/* ============ DEVAM DHUNNOO — THE RAW FILE (paper edition) ============ */
:root {
  --paper: #f7f4ed;
  --paper-2: #efeadf;
  --ink: #111111;
  --ink-soft: #55504a;
  --accent: #1c2b4a;      /* navy ink */
  --marker: #f5d83e;      /* highlighter */
  --red: #c8401f;         /* stamp red */
  --line: rgba(17, 17, 17, 0.14);
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Inter", -apple-system, sans-serif;
  --mono: "IBM Plex Mono", monospace;
  --marquee-speed: 40s;
}
body.genre-techno { --accent: #7a1fd0; --marker: #b9f53e; }
body.genre-jazz   { --accent: #6b4423; --marker: #f5b83e; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.7;
  overflow-x: hidden;
  cursor: none;
  transition: background 0.6s ease;
}
@media (hover: none), (pointer: coarse) {
  body { cursor: auto; }
  .cursor { display: none; }
}

::selection { background: var(--marker); color: var(--ink); }
.mono { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.13em; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: none; }
@media (hover: none) { button { cursor: pointer; } }

/* paper texture */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
}
main, .topbar { position: relative; z-index: 1; }

/* ============ LOADER ============ */
.loader {
  position: fixed; inset: 0; z-index: 100;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1) 0.15s;
}
.loader.done { transform: translateY(-101%); }
.loader-doc { position: relative; text-align: center; }
.loader-type { font-size: clamp(0.8rem, 2vw, 1rem); letter-spacing: 0.2em; min-height: 1.4em; }
.loader-type::after { content: "▌"; animation: blink 0.8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.stamp {
  position: absolute; left: 50%; top: 50%;
  border: 4px solid var(--red); color: var(--red);
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(1.1rem, 3vw, 1.8rem); letter-spacing: 0.18em; line-height: 1.3;
  padding: 0.7rem 1.4rem; border-radius: 6px;
  transform: translate(-50%, -50%) rotate(-12deg) scale(3.2);
  opacity: 0; pointer-events: none;
}
.stamp.slam { animation: slam 0.42s cubic-bezier(0.2, 1.6, 0.4, 1)
forwards; }
@keyframes slam {
  to { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scale(1); }
}

/* ============ PROGRESS / CURSOR ============ */
.progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--accent); z-index: 85;
  transition: background 0.6s ease;
}
.cursor {
  position: fixed; top: 0; left: 0; z-index: 95; pointer-events: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ink);
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  transition: width 0.25s ease, height 0.25s ease, background 0.25s ease;
}
.cursor span {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em;
  color: var(--paper); opacity: 0; white-space: nowrap;
  transition: opacity 0.2s ease;
}
.cursor.big { width: 64px; height: 64px; background: var(--accent); }
.cursor.big span { opacity: 1; }


/* ============ TOPBAR ============ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 2rem;
  background: linear-gradient(var(--paper) 65%, transparent);
}
.topbar-left { display: flex; align-items: center; gap: 0.8rem; }
.monogram { width: 34px; height: 34px; object-fit: cover; mix-blend-mode: multiply; }
.tb-right { display: flex; align-items: center; gap: 0.5rem; color: var(--ink-soft); }
.kl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: pulse 2s ease infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ============ HERO ============ */
.hero { min-height: 100svh; padding: 7.5rem 2rem 3rem; display: flex; flex-direction: column; max-width: 1340px; margin: 0 auto; }
.hero-coords { color: var(--ink-soft); display: flex; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.arrow { color: var(--red); }

.hero-name { line-height: 0.94; margin-bottom: 2.6rem; }
.hn-line { display: block; font-family: "Space Grotesk", var(--sans); font-weight: 700; font-size: clamp(3.4rem, 12.5vw, 11.5rem); letter-spacing: 0.005em; }
.hn-italic { color: var(--ink); }
.hn-line .ch { display: inline-block; transform: translateY(115%) rotate(6deg); opacity: 0; transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease; }
body.loaded .hn-line .ch { transform: none; opacity: 1; }

.hero-row { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 3rem; align-items: center; flex: 1; }
.hero-sub { font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.6; max-width: 36ch; font-weight: 400; }
.hero-sub em { font-family: var(--serif); }
.hero-langs { color: var(--ink-soft); margin-top: 1.8rem; line-height: 2; }

/* marker highlight */
.hl {
  background: linear-gradient(transparent 38%, var(--marker) 38%, var(--marker) 92%, transparent 92%);
  background-size: 0% 100%; background-repeat: no-repeat;
  transition: background-size 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.15s;
  padding: 0 0.1em;
}
.in .hl, body.loaded .hero .hl { background-size: 100% 100%; }

/* polaroid */
.polaroid {
  background: #fff; padding: 12px 12px 14px;
  box-shadow: 0 14px 40px rgba(17,17,17,0.18);
  transform: rotate(var(--tilt, 2deg));
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
}
.polaroid:hover { transform: rotate(0deg) scale(1.02); box-shadow: 0 24px 60px rgba(17,17,17,0.26); }
.polaroid img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.polaroid figcaption { margin-top: 0.7rem; color: var(--ink-soft); font-size: 0.62rem; }
.hero-pol { max-width: 330px; justify-self: end; }

.scroll-cue { display: flex; align-items: center; gap: 1rem; margin-top: 3rem; color: var(--ink-soft); }
.cue-line { flex: 1; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.cue-line::after { content: ""; position: absolute; top: 0; left: -30%; width: 30%; height: 100%; background: var(--red); animation: cue 2.4s ease infinite; }
@keyframes cue { to { left: 130%; } }

/* ============ MARQUEE ============ */
.marquee { border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); overflow: hidden; padding: 1rem 0; background: var(--paper); }
.marquee-track { display: flex; align-items: center; gap: 2.4rem; width: max-content; animation: marquee var(--marquee-speed) linear infinite; }
.marquee-track span { font-family: var(--serif); font-style: italic; font-size: 1.05rem; white-space: nowrap; }
.marquee-track i { color: var(--red); font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============ CHAPTERS ============ */
.chapter { padding: 7.5rem 2rem; max-width: 1280px; margin: 0 auto; }
.chapter-tint { max-width: none; background: var(--paper-2); }
.chapter-tint > * { max-width: 1280px; margin-left: auto; margin-right: auto; }
.ch-head { display: flex; align-items: baseline; gap: 1.5rem; flex-wrap: wrap; border-bottom: 1.5px solid var(--ink); padding-bottom: 1.3rem; margin-bottom: 3.6rem; }
.ch-num { color: var(--red); }
.ch-title { font-family: var(--serif); font-weight: 800; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1; }
.ch-title em { font-style: italic; font-weight: 600; color: var(--accent); transition: color 0.6s ease; }
.ch-tag { margin-left: auto; color: var(--ink-soft); }

.reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.in { opacity: 1; transform: translateY(0); }
.polaroid.reveal.in { transform: rotate(var(--tilt, 2deg)); }
.polaroid.reveal.in:hover { transform: rotate(0deg) scale(1.02); }

/* ============ 01 WHO ============ */
.bio-reveal {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.5rem, 3.2vw, 2.6rem); line-height: 1.45;
  max-width: 30ch; margin-bottom: 4rem;
}
.bio-reveal .w { opacity: 0.12; transition: opacity 0.35s ease; }
.bio-reveal .w.on { opacity: 1; }

.who-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.note {
  background: #fff; border: 1px solid var(--line);
  padding: 1.8rem; box-shadow: 0 10px 30px rgba(17,17,17,0.08);
  transform: rotate(var(--tilt, 0deg));
}
.note.reveal { transform: translateY(34px) rotate(var(--tilt, 0deg)); }
.note.reveal.in { transform: rotate(var(--tilt, 0deg)); }
.note:hover { transform: rotate(0deg) !important; }
.note { transition: opacity 0.8s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease; }
.note:hover { box-shadow: 0 18px 44px rgba(17,17,17,0.14); }
.note-q { display: block; color: var(--red); margin-bottom: 0.9rem; }
.note-big { font-family: var(--serif); font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 700; line-height: 1.2; }

/* ============ 02 HOME ============ */
.home-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 3.5rem; align-items: center; margin-bottom: 4.5rem; }
.home-copy p + p { margin-top: 1.3rem; }
.home-big { font-family: var(--serif); font-size: clamp(1.5rem, 2.8vw, 2.2rem); font-weight: 600; line-height: 1.3; }
.raw-aside { color: var(--red); display: inline-block; }
.kl-block { border-top: 1px dashed var(--line); padding-top: 3rem; max-width: 62ch; }
.kl-block p + p { margin-top: 1.2rem; }
.kl-line { font-family: var(--serif); font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 700; margin-bottom: 1rem; }
.strike { position: relative; white-space: nowrap; }
.strike::after { content: ""; position: absolute; left: -3%; right: -3%; top: 55%; height: 3px; background: var(--red); transform: rotate(-2.5deg); }

/* ============ 03 SHAPED ============ */
.shaped-intro { font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-style: italic; margin-bottom: 2.5rem; }
.shaped-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; align-items: start; }
.shaped-list { list-style: none; border-top: 1.5px solid var(--ink); }
.shaped-item { border-bottom: 1.5px solid var(--ink); transition: background 0.3s ease; }
.si-row {
  display: flex; align-items: baseline; gap: 1.6rem;
  padding: 1.5rem 0.5rem;
  transition: padding-left 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.shaped-item:hover, .shaped-item.active { background: #fff; }
.shaped-item:hover .si-row, .shaped-item.active .si-row { padding-left: 1.4rem; }
.si-idx { color: var(--ink-soft); }
.si-word { font-family: var(--serif); font-weight: 800; font-size: clamp(1.7rem, 3.4vw, 2.9rem); line-height: 1; }
.si-hint { margin-left: auto; color: var(--ink-soft); }
.si-detail { display: none; }

/* the answer lives right next to the words — no looking down */
.shaped-panel { position: sticky; top: 110px; }
.sp-pol { max-width: 330px; }
.sp-pol img { transition: opacity 0.3s ease, filter 0.55s ease; }
.sp-pol img.swapping { opacity: 0; }
.shaped-panel .sp-text { margin-top: 1.4rem; max-width: 40ch; font-size: 1.02rem; line-height: 1.75; }
.changed { margin-top: 4rem; background: var(--ink); color: var(--paper); padding: 2.4rem; max-width: 720px; }
.changed .mono { color: var(--marker); display: block; margin-bottom: 0.8rem; }
.changed .hl { background: none; box-shadow: inset 0 -0.45em var(--accent); transition: box-shadow 0.6s ease; }

/* ============ QUOTE ============ */
.quote-break { padding: 8rem 2rem; text-align: center; background: var(--ink); color: var(--paper); }
.qb { color: var(--marker); margin-bottom: 1.8rem; }
.qb-text { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: clamp(1.8rem, 4.6vw, 3.8rem); line-height: 1.25; max-width: 24ch; margin: 0 auto; }
.hl-big { color: var(--marker); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 10px; }

/* ============ 04 WORK ============ */
.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
.work-card {
  background: #fff; border: 1.5px solid var(--ink); padding: 2.4rem;
  box-shadow: 8px 8px 0 var(--ink);
  transition: opacity 0.8s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.work-card:hover { transform: translate(-4px, -4px); box-shadow: 14px 14px 0 var(--accent); }
.wc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.8rem; }
.wc-logo { width: 52px; height: 52px; object-fit: contain; mix-blend-mode: multiply; }
.wc-role { color: var(--red); }
.wc-name { font-family: var(--serif); font-weight: 900; font-size: clamp(2.2rem, 4.5vw, 3.4rem); line-height: 1; margin-bottom: 0.8rem; }
.wc-tag { font-weight: 600; margin-bottom: 1.2rem; }
.wc-body { color: var(--ink-soft); font-size: 0.95rem; }
.work-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; }

/* ============ 05 VS ============ */
.vs { padding: 8rem 2rem; text-align: center; overflow: hidden; max-width: 1280px; margin: 0 auto; }
.vs-kicker { color: var(--red); margin-bottom: 2rem; }
.vs-stage { display: flex; align-items: center; justify-content: center; gap: 2.5vw; user-select: none; margin-bottom: 2.4rem; }
.vs-you { font-family: var(--serif); font-weight: 900; font-size: clamp(3.2rem, 11vw, 9rem); line-height: 1; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.vs-ink { color: var(--ink); }
.vs-ghost { color: transparent; -webkit-text-stroke: 2px var(--ink); }
.vs-stage:hover .vs-ink { transform: translateX(-1.4vw) skewX(-3deg); }
.vs-stage:hover .vs-ghost { transform: translateX(1.4vw) skewX(3deg); }
.vs-vs { color: var(--red); letter-spacing: 0.4em; }
.vs-line { font-size: clamp(1.1rem, 2vw, 1.4rem); max-width: 46ch; margin: 0 auto 3.6rem; }
.vs-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; text-align: left; max-width: 1000px; margin: 0 auto 4rem; }
.broke { max-width: 56ch; margin: 0 auto; }
.broke-1 { font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 2.2vw, 1.6rem); color: var(--ink-soft); margin-bottom: 1rem; line-height: 1.5; }
.broke-2 { font-size: clamp(1.15rem, 2vw, 1.5rem); }
.broke-2 .mono { color: var(--red); }

/* ============ 06 TASTE ============ */
.taste-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.8rem; }
.taste-card { background: #fff; border: 1px solid var(--line); padding: 1.9rem; box-shadow: 0 10px 30px rgba(17,17,17,0.07); }
.taste-wide { grid-column: 1 / -1; }
.tc-label { display: block; color: var(--red); margin-bottom: 1.1rem; }
.tc-label i { color: var(--ink-soft); font-style: normal; }
.tc-out { margin-bottom: 1rem; }
.tc-foot { color: var(--ink-soft); }

.seg { display: flex; gap: 0.6rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.seg-btn {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em;
  padding: 0.55rem 1.1rem; background: transparent;
  border: 1.5px solid var(--ink); color: var(--ink);
  transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
.seg-btn:hover { transform: translateY(-2px); }
.seg-btn.active { background: var(--ink); color: var(--paper); }

.eq { display: flex; gap: 4px; align-items: flex-end; height: 26px; }
.eq i { width: 5px; background: var(--accent); height: 30%; animation: eq 0.9s ease-in-out infinite; transition: background 0.6s ease; }
.eq i:nth-child(2) { animation-delay: 0.15s; } .eq i:nth-child(3) { animation-delay: 0.3s; }
.eq i:nth-child(4) { animation-delay: 0.45s; } .eq i:nth-child(5) { animation-delay: 0.6s; }
@keyframes eq { 0%,100% { height: 25%; } 50% { height: 100%; } }

/* in-card music player — audio only, the equalizer carries the vibe */
.player { margin-top: 1.1rem; border-top: 1px dashed var(--line); padding-top: 1.1rem; position: relative; }
.np { color: var(--ink-soft); margin-bottom: 0.9rem; }
/* the iframe stays in the page (so the audio plays) but out of sight */
.player-frame {
  position: absolute; left: -9999px; top: 0;
  width: 4px; height: 4px; overflow: hidden; opacity: 0.01;
}
.player-frame iframe { width: 200px; height: 120px; border: 0; }
.np-eq { display: flex; align-items: flex-end; gap: 4px; height: 54px; margin-bottom: 0.4rem; }
.np-eq i {
  flex: 1; min-width: 3px; background: var(--accent);
  height: 20%;
  animation: npEq var(--du, 0.8s) ease-in-out var(--de, 0s) infinite alternate;
  transition: background 0.6s ease;
}
@keyframes npEq { from { height: 12%; } to { height: var(--hi, 90%); } }
.stop-btn {
  margin-top: 0.8rem; padding: 0.5rem 1rem;
  background: transparent; border: 1.5px solid var(--ink); color: var(--ink);
  font-size: 0.65rem; letter-spacing: 0.13em;
  transition: background 0.2s ease, color 0.2s ease;
}
.stop-btn:hover { background: var(--ink); color: var(--paper); }

.wings-btn {
  width: 100%; text-align: left; background: var(--paper);
  border: 1.5px dashed var(--ink); padding: 1rem 1.2rem;
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.wings-btn:hover { background: var(--marker); border-style: solid; }
.wings-cta { font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 1.05rem; }

.combos { display: flex; gap: 0.8rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.combo { display: flex; align-items: center; gap: 0.45rem; background: transparent; border: 1px solid var(--line); padding: 0.5rem 0.8rem; transition: border-color 0.25s ease, transform 0.2s ease; }
.combo:hover { border-color: var(--ink); transform: translateY(-2px); }
.combo i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line); }
.combo .mono { font-size: 0.6rem; }
.sock-rule { color: var(--ink-soft); position: relative; padding-right: 3.4rem; }
.sock-rule .non {
  position: absolute; right: 0; top: 50%;
  color: var(--red); border: 2px solid var(--red); border-radius: 4px;
  padding: 0.1rem 0.4rem; font-weight: 500;
  transform: translateY(-50%) rotate(-8deg) scale(0);
  transition: transform 0.3s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.sock-rule:hover .non { transform: translateY(-50%) rotate(-8deg) scale(1); }

.shelf { display: flex; gap: 0.7rem; align-items: flex-end; flex-wrap: wrap; }
.book {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em;
  padding: 1rem 0.7rem; min-height: 190px;
  display: inline-flex; align-items: center;
  border: 1.5px solid var(--ink);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.book:hover { transform: rotate(180deg) translateY(10px); }
.b1 { background: #dfe8da; } .b2 { background: #f3e3c8; } .b3 { background: #f0d4c2; } .b4 { background: #dcd6e8; }
.b5 { background: var(--ink); color: var(--paper); min-height: 230px; }
.b5 i { font-style: normal; opacity: 0.6; }

/* ============ 07 FILM STRIP ============ */
.film-strip { display: flex; gap: 2rem; overflow-x: auto; padding: 1.4rem 0.4rem 1.8rem; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--ink) transparent; }
.film-strip.dragging { scroll-snap-type: none; }
.frame { flex: 0 0 min(300px, 76vw); scroll-snap-align: start; }

/* ============ 08 ARCHIVE ============ */
.archive { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 0; border: 1.5px solid var(--ink); background: #fff; min-height: 480px; }
.archive-list { border-right: 1.5px solid var(--ink); max-height: 540px; overflow-y: auto; scrollbar-width: thin; }
.arc-item {
  display: flex; gap: 0.9rem; align-items: baseline; width: 100%; text-align: left;
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: 0.85rem 1.1rem;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em;
  color: var(--ink); transition: background 0.2s ease, padding-left 0.25s ease;
}
.arc-item:hover { background: var(--paper); padding-left: 1.5rem; }
.arc-item.active { background: var(--ink); color: var(--paper); }
.arc-item .n { color: var(--red); }
.arc-item.active .n { color: var(--marker); }
.archive-pane { padding: 2.2rem; position: sticky; top: 90px; align-self: start; }
.ap-q { color: var(--red); margin-bottom: 1.2rem; }
.ap-a { font-size: 1.02rem; line-height: 1.8; white-space: pre-line; }
.ap-a::after { content: "▌"; color: var(--red); animation: blink 0.8s steps(1) infinite; }
.ap-a.done::after { content: ""; }

/* ============ 09 STILL / LEGACY ============ */
.fig-list { list-style: none; margin-bottom: 4rem; }
.fig-list li { display: flex; gap: 1.6rem; align-items: baseline; font-family: var(--serif); font-size: clamp(1.25rem, 2.5vw, 1.9rem); line-height: 1.45; padding: 1.5rem 0; border-bottom: 1.5px solid var(--ink); }
.fig-idx { color: var(--red); }
.karma, .younger { max-width: 68ch; margin-bottom: 2.6rem; }
.karma .note-q, .younger .note-q { display: block; margin-bottom: 0.7rem; }
.btc { display: inline-block; background: var(--marker); padding: 0.1em 0.3em; font-weight: 500; }

/* ============ FOOTER ============ */
.footer { padding: 8rem 2rem 3rem; text-align: center; border-top: 1.5px solid var(--ink); }
.f-kicker { color: var(--ink-soft); margin-bottom: 1.6rem; }
.legacy { font-family: var(--serif); font-weight: 700; font-size: clamp(1.8rem, 4.4vw, 3.4rem); line-height: 1.3; max-width: 24ch; margin: 0 auto 3.6rem; }
.legacy em { color: var(--accent); transition: color 0.6s ease; }
/* —— the postcard —— */
.postcard {
  display: grid; grid-template-columns: 1.15fr 1px 0.85fr; gap: 2.2rem;
  width: min(820px, 100%); margin: 0 auto; padding: 2.4rem 2.6rem;
  background: #fff; border: 1.5px solid var(--ink);
  color: var(--ink); text-decoration: none; text-align: left;
  box-shadow: 0 18px 50px rgba(17, 17, 17, 0.16);
  transform: rotate(-1.3deg);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease;
  position: relative;
}
.postcard::after { /* postcard back texture: faint ruled lines */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(transparent 0 30px, rgba(17,17,17,0.035) 30px 31px);
}
.postcard:hover { transform: rotate(0deg) translateY(-8px); box-shadow: 0 30px 70px rgba(17, 17, 17, 0.22); }
.pc-big { font-family: var(--serif); font-style: italic; font-weight: 800; font-size: clamp(1.9rem, 3.6vw, 2.6rem); line-height: 1.1; margin-bottom: 0.9rem; }
.pc-msg { color: var(--ink-soft); font-size: 0.98rem; max-width: 34ch; margin-bottom: 1.2rem; }
.pc-sub { color: var(--ink-soft); margin-bottom: 1.6rem; }
.pc-go { color: var(--red); position: relative; }
.pc-go::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 1.5px; width: 0; background: var(--red); transition: width 0.35s ease; }
.postcard:hover .pc-go::after { width: 100%; }
.pc-divider { background: var(--line); }
.pc-right { display: flex; flex-direction: column; gap: 1.6rem; }
.pc-stamp-row { position: relative; align-self: flex-end; margin-right: 0.6rem; }
.pc-stamp {
  width: 86px; height: 102px; background: var(--paper);
  border: 1.5px dashed var(--ink);
  display: flex; align-items: center; justify-content: center;
  transform: rotate(2.5deg);
  transition: transform 0.4s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.postcard:hover .pc-stamp { transform: rotate(-3deg) scale(1.04); }
.pc-stamp img { width: 56px; height: 56px; object-fit: cover; mix-blend-mode: multiply; }
.pc-postmark {
  position: absolute; width: 110px; height: 110px;
  right: -44px; top: -28px;
  color: var(--red); opacity: 0.72;
  animation: pmSpin 16s linear infinite;
}
.postcard:hover .pc-postmark { animation-duration: 5s; }
@keyframes pmSpin { to { transform: rotate(360deg); } }
.pc-postmark text { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.22em; fill: currentColor; }
.pc-lines { display: flex; flex-direction: column; gap: 0.9rem; color: var(--ink); }
.pc-lines span { border-bottom: 1px solid var(--line); padding-bottom: 0.5rem; }
.f-row { margin-top: 5rem; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; color: var(--ink-soft); }
.f-brands { display: flex; gap: 1.5rem; align-items: center; }
.f-brands img { width: 30px; height: 30px; object-fit: contain; mix-blend-mode: multiply; opacity: 0.85; }
.f-home { color: var(--red); }

/* wings easter egg */
.feather {
  position: fixed; z-index: 96; pointer-events: none;
  top: -40px;
  animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translateY(110vh) rotate(540deg); opacity: 0.4; }
}
body.wings .marquee-track { animation-duration: 6s; }
body.wings .polaroid { transform: rotate(0deg) translateY(-8px); }

/* ============ A11Y ============ */
a:focus-visible, button:focus-visible, .film-strip:focus-visible { outline: 2.5px solid var(--red); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  .reveal, .hn-line .ch { opacity: 1 !important; transform: none !important; }
  .bio-reveal .w { opacity: 1; }
  .loader { display: none; }
  .hl { background-size: 100% 100%; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 980px) {
  .hero-row { grid-template-columns: 1fr; }
  .hero-pol { justify-self: start; max-width: 300px; }
  .who-cards { grid-template-columns: 1fr; }
  .home-grid { grid-template-columns: 1fr; }
  .home-grid .polaroid { max-width: 320px; }
  .work-grid, .work-extra, .vs-cards, .taste-grid { grid-template-columns: 1fr; }
  .archive { grid-template-columns: 1fr; }
  .archive-list { border-right: 0; border-bottom: 1.5px solid var(--ink); max-height: 260px; }
  .archive-pane { position: static; }
}
@media (max-width: 600px) {
  .topbar { padding: 0.9rem 1.2rem; }
  .tb-name { display: none; }
  .hero { padding: 6.5rem 1.2rem 3rem; }
  .chapter, .vs, .quote-break, .footer { padding-left: 1.2rem; padding-right: 1.2rem; }
  .chapter { padding-top: 5rem; padding-bottom: 5rem; }
  .ch-tag { margin-left: 0; }
  .si-hint { display: none; }
  .si-row { gap: 0.9rem; }
}

/* shaped grid + postcard responsive */
@media (max-width: 980px) {
  .shaped-grid { grid-template-columns: 1fr; }
  .shaped-panel { display: none; }
  .si-detail {
    display: block; max-height: 0; overflow: hidden; margin: 0;
    padding: 0 0.5rem; color: var(--ink-soft);
    transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1), padding 0.45s ease;
  }
  .shaped-item.open .si-detail { max-height: 12em; padding: 0 0.5rem 1.3rem; }
  .postcard { grid-template-columns: 1fr; gap: 1.8rem; padding: 1.8rem 1.4rem; }
  .pc-divider { display: none; }
  .pc-stamp-row { align-self: flex-start; margin-left: 0.4rem; margin-top: 0.6rem; }
  .pc-postmark { right: -38px; top: -22px; }
}

/* ==================================================================
   V3 — COLOUR LIVES UNDER YOUR CURSOR
   The page is ink on paper. Hover is where the creativity detonates.
   ================================================================== */

/* --- strip persistent colour back to ink (minimalist base) --- */
.ch-num, .note-q, .tc-label, .arc-item .n, .raw-aside, .qb,
.wc-role, .vs-vs, .vs-kicker, .fig-idx, .si-idx, .f-home,
.broke-2 .mono, .changed .mono { color: var(--ink-soft); }
.arc-item.active .n { color: var(--marker); }
.arrow { color: var(--ink); }
.cue-line::after { background: var(--ink); }
.hn-italic { color: var(--ink); }
.ch-title em, .legacy em { color: inherit; }
.qb { color: rgba(247, 244, 237, 0.6); }
.changed .mono { color: rgba(247, 244, 237, 0.6); }

/* the one always-coloured thing: your progress through the file */
.progress { background: linear-gradient(90deg, #1c2b4a, #c8401f, #d9a514, #2e7d6b, #7a1fd0); }

/* --- photos: B/W until touched --- */
.polaroid img { filter: grayscale(1) contrast(1.05); transition: filter 0.55s ease; }
.polaroid:hover img { filter: grayscale(0) contrast(1); }
.ghost-img { filter: none; }
@media (hover: none) { .polaroid img { filter: none; } }

/* --- gradient ink: colour mixture on hover — ONLY on the two big quotes --- */
.qb-text, .legacy {
  transition: color 0.3s ease;
  background-size: 250% 100%;
}
.qb-text:hover, .legacy:hover {
  background-image: linear-gradient(100deg, #1c2b4a, #c8401f, #d9a514, #2e7d6b, #7a1fd0, #1c2b4a);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: inkflow 3s linear infinite;
}
@keyframes inkflow { to { background-position: 250% 0; } }
.qb-text:hover .hl-big { color: inherit; }

.bio-reveal .w { transition: opacity 0.35s ease; }

/* marquee: pauses when touched */
.marquee:hover .marquee-track { animation-play-state: paused; }

/* --- letter physics: split characters pop colour when grazed --- */
.ch, .lt { display: inline-block; transition-property: transform, opacity, color; }
.ch, .lt { color: inherit; }
.pop {
  animation: pop 0.55s cubic-bezier(0.2, 1.5, 0.4, 1);
  color: var(--pc, #c8401f) !important;
  transition: color 0s !important;
}
@keyframes pop {
  30% { transform: translateY(-0.12em) rotate(var(--pr, 5deg)) scale(1.08); }
  100% { transform: none; }
}

/* chapter titles assemble letter by letter as they enter */
.split-title .lt {
  opacity: 0; transform: translateY(0.7em) rotate(6deg);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i) * 30ms),
              opacity 0.4s ease calc(var(--i) * 30ms),
              color 0.25s ease 0s;
}
.split-title.in .lt { opacity: 1; transform: none; }

/* --- paint splats: the cursor leaves pigment on the big type --- */
.paint {
  position: fixed; z-index: 94; pointer-events: none; border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: paintFade 0.9s ease-out forwards;
}
@keyframes paintFade {
  0% { opacity: 0.95; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.1) translateY(18px); }
}

/* --- bookshelf: blank spines, ink your hover in --- */
.b1, .b2, .b3, .b4 { background: #fff; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease; }
.b1:hover { background: #cfe3c5; } .b2:hover { background: #f3ddb4; }
.b3:hover { background: #f0c8ad; } .b4:hover { background: #d3c9ea; }

/* --- vs ghost gets colour stroke on hover --- */
.vs-stage:hover .vs-ghost { -webkit-text-stroke-color: #c8401f; }
.vs-stage .vs-ghost { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), -webkit-text-stroke-color 0.3s ease; }

/* --- cards get a faster, livelier transform for 3D tilt --- */
.work-card, .taste-card, .note { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .split-title .lt { opacity: 1 !important; transform: none !important; }
  .polaroid img { filter: none; }
}

/* ==================================================================
   V4 — THE BEAST: ink particles, pinned scenes, torn paper
   ================================================================== */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* solid type hero: hover swaps the name for the things I love */
.hero-name { position: relative; }
.hero-hint { color: var(--ink-soft); margin-top: -1.6rem; margin-bottom: 2.2rem; }
.hn-line { transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease; }
.hero-name.loving .hn-line { opacity: 0; transform: translateY(-14px); filter: blur(4px); pointer-events: none; }
.hn-love {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  font-family: "Space Grotesk", var(--sans); font-weight: 700;
  font-size: clamp(3.2rem, 12vw, 11rem); line-height: 1;
  color: var(--accent);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease, color 0.6s ease;
}
.hero-name.loving .hn-love { opacity: 1; }
.hn-love .lv {
  display: inline-block;
  animation: lvIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes lvIn {
  from { transform: translateY(55%) skewX(-6deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* torn paper edges on the ink section */
.quote-break { position: relative; }
.tear { position: absolute; left: 0; width: 100%; height: 26px; fill: var(--paper); }
.tear-top { top: -1px; }
.tear-bottom { bottom: -1px; }

/* hand-drawn circle around "luck" */
.luck-wrap { position: relative; display: inline-block; }
.luck-circle { position: absolute; left: -14%; top: -22%; width: 128%; height: 144%; overflow: visible; }
.luck-circle path {
  stroke: var(--marker); stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 560; stroke-dashoffset: 560;
}
.luck-circle.draw path { animation: drawLuck 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.35s forwards; }
@keyframes drawLuck { to { stroke-dashoffset: 0; } }

/* VS battle scene */
.vs-pin { min-height: 86svh; display: flex; flex-direction: column; justify-content: center; }

/* ghost chapter numbers */
.chapter { position: relative; }
.ch-ghost {
  position: absolute; right: -1%; top: 2%; z-index: -1;
  font-family: var(--serif); font-weight: 900; font-style: italic;
  font-size: clamp(10rem, 28vw, 26rem); line-height: 1;
  color: rgba(17, 17, 17, 0.045);
  pointer-events: none; user-select: none;
}
.chapter-tint .ch-ghost { color: rgba(17, 17, 17, 0.05); }

/* film strip in pinned (horizontal-drive) mode */
#rawChapter.pinned { overflow: hidden; }
#rawChapter.pinned .film-strip { overflow: visible; cursor: none; }

@media (prefers-reduced-motion: reduce) {
  .luck-circle.draw path { animation: none; stroke-dashoffset: 0; }
  .np-eq i { animation: none; height: 40%; }
}

/* ==================================================================
   V8 — MOBILE FEEL: every hover moment gets a touch twin
   ================================================================== */
@media (hover: none), (pointer: coarse) {
  /* press states echo the desktop hovers */
  .note:active, .taste-card:active { transform: scale(0.985) rotate(0deg); }
  .work-card:active { transform: translate(-3px, -3px); box-shadow: 12px 12px 0 var(--accent); }
  .postcard:active { transform: rotate(0deg) translateY(-4px); }
  .postcard:active .pc-stamp { transform: rotate(-3deg) scale(1.04); }
  .book:active { transform: rotate(180deg) translateY(10px); }
  .b1:active { background: #cfe3c5; } .b2:active { background: #f3ddb4; }
  .b3:active { background: #f0c8ad; } .b4:active { background: #d3c9ea; }
  .seg-btn, .combo, .wings-btn, .stop-btn, .arc-item { -webkit-tap-highlight-color: transparent; }
  .shaped-item, .frame, .postcard, .book, .sock-rule { -webkit-tap-highlight-color: transparent; }

  /* tap toggles the NON. stamp */
  .sock-rule.show-non .non { transform: translateY(-50%) rotate(-8deg) scale(1); }

  /* the two gradient quotes ignite when they enter the screen */
  .qb-text.inkflow-on, .legacy.inkflow-on {
    background-image: linear-gradient(100deg, #1c2b4a, #c8401f, #d9a514, #2e7d6b, #7a1fd0, #1c2b4a);
    background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    animation: inkflow 3s linear infinite;
  }
  .qb-text.inkflow-on .hl-big { color: inherit; }

  /* the name switch runs on tap (JS adds .loving) — keep it smooth */
  .hero-name { -webkit-tap-highlight-color: transparent; }

  /* roomier touch targets */
  .si-row { padding: 1.3rem 0.4rem; }
  .arc-item { padding: 1rem 1.1rem; }
  .seg-btn { padding: 0.7rem 1.2rem; }
}

/* tighter, calmer small-screen rhythm — same design, phone-sized */
@media (max-width: 600px) {
  .hero { padding-top: 5.8rem; }
  .hero-coords { font-size: 0.6rem; gap: 0.5rem; }
  .hero-hint { margin-top: -0.9rem; }
  .hero-sub { font-size: 1.12rem; }
  .marquee-track span { font-size: 0.92rem; }
  .bio-reveal { font-size: 1.45rem; }
  .ch-head { margin-bottom: 2.6rem; }
  .chapter { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .quote-break { padding: 6rem 1.2rem; }
  .vs { padding: 6rem 1.2rem; }
  .vs-pin { min-height: 72svh; }
  .work-card { box-shadow: 6px 6px 0 var(--ink); }
  .frame { flex: 0 0 82vw; }
  .archive { min-height: 0; }
  .archive-pane { padding: 1.5rem 1.2rem; }
  .ap-a { font-size: 0.95rem; }
  .np-eq { height: 44px; }
  .pc-postmark { width: 92px; height: 92px; right: -26px; top: -18px; }
  .pc-big { font-size: 1.7rem; }
  .legacy { font-size: 1.7rem; }
  .f-brands img { width: 26px; height: 26px; }
}