/* =====================================================================
   LOIS DAGANA — a personal journal of work, people & impact
   Type: Geist / Geist Mono (from the reference sites), Permanent Marker
   for handwriting, Instrument Serif italic as the editorial accent.
   ===================================================================== */

:root {
  --ivory: #F8F6F2;
  --ink: #25212C;
  --purple: #7955B3;
  --lilac: #EDE5F7;
  --pink: #D9A9C5;

  --paper: #FFFDF8;
  --paper-2: #F2EEE6;
  --kraft: #E6DCC8;
  --ink-2: #4A4553;      /* secondary text, 8.6:1 on ivory */
  --ink-3: #6B6573;      /* tertiary text, 5.3:1 on ivory */
  --rule: rgba(37, 33, 44, .14);
  --purple-deep: #5B3C8F;

  --f-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-hand: "Permanent Marker", "Comic Sans MS", cursive;
  --f-serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1320px;
  --radius: 4px;

  --shadow-paper: 0 1px 1px rgba(37,33,44,.06), 0 6px 14px -6px rgba(37,33,44,.22), 0 24px 40px -24px rgba(37,33,44,.35);
  --shadow-lift: 0 2px 2px rgba(37,33,44,.06), 0 14px 24px -8px rgba(37,33,44,.26), 0 36px 60px -28px rgba(37,33,44,.38);

  --ease: cubic-bezier(.22, .8, .24, 1);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .15  0 0 0 0 .13  0 0 0 0 .17  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fibers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .42  0 0 0 0 .32  0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; overflow-x: clip; }
body {
  margin: 0;
  background-color: var(--ivory);
  background-image: var(--noise), var(--fibers);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
::selection { background: var(--lilac); color: var(--ink); }

:focus { outline: none; }
:focus-visible {
  outline: 2.5px solid var(--purple);
  outline-offset: 3px;
  border-radius: 3px;
}

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 1000;
  background: var(--ink); color: var(--ivory); padding: 10px 16px; border-radius: 999px;
  font: 500 14px var(--f-mono); text-decoration: none; transition: top .2s;
}
.skip-link:focus { top: 16px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.serif { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.hand { font-family: var(--f-hand); font-weight: 400; letter-spacing: 0; }
.mono, .label {
  font-family: var(--f-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1.4;
}
.label { color: var(--ink-2); }
.purple { color: var(--purple); }

/* ---------- Page transition veil ---------- */
.veil {
  position: fixed; inset: 0; z-index: 900; pointer-events: none;
  background: var(--ivory) var(--noise);
  opacity: 0; transition: opacity .28s ease;
}
.is-leaving .veil { opacity: 1; }

/* =====================================================================
   SCRAPBOOK PIECES
   ===================================================================== */

/* Masking tape */
.tape {
  position: absolute; z-index: 3; width: 96px; height: 28px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, rgba(240,231,205,.86), rgba(228,216,186,.82));
  box-shadow: 0 1px 2px rgba(37,33,44,.12);
  clip-path: polygon(2% 8%, 6% 0, 11% 9%, 16% 1%, 22% 7%, 100% 0, 97% 18%, 100% 34%, 96% 52%, 100% 70%, 97% 86%, 100% 100%, 0 100%, 3% 84%, 0 66%, 4% 48%, 0 30%, 3% 15%);
  transform: rotate(var(--r, -4deg));
  pointer-events: none;
}
.tape--purple {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.22) 0 4px, transparent 4px 9px),
    linear-gradient(180deg, rgba(160,130,210,.62), rgba(121,85,179,.55));
}
.tape--pink { background: repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 2px, transparent 2px 7px), linear-gradient(180deg, rgba(225,180,205,.8), rgba(217,169,197,.78)); }
.tape--tl { top: -12px; left: -22px; --r: -38deg; }
.tape--tr { top: -12px; right: -22px; --r: 38deg; }
.tape--top { top: -14px; left: 50%; margin-left: -48px; --r: -3deg; }
.tape--bl { bottom: -10px; left: -20px; --r: 36deg; }
.tape--br { bottom: -10px; right: -20px; --r: -34deg; }

/* Push pin */
.pin {
  position: absolute; z-index: 4; width: 20px; height: 20px; border-radius: 50%;
  top: -8px; left: 50%; margin-left: -10px;
  background: radial-gradient(circle at 34% 30%, #CDB6F0 0 12%, #9572CF 30%, var(--purple) 55%, #43286E 100%);
  box-shadow: inset -2px -3px 3px rgba(0,0,0,.28), 1px 2px 2px rgba(37,33,44,.25);
  pointer-events: none;
}
.pin::after { /* the needle's shadow on the paper */
  content: ""; position: absolute; left: 12px; top: 14px; width: 14px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(37,33,44,.35), rgba(37,33,44,0));
  transform: rotate(32deg); transform-origin: left center; z-index: -1; filter: blur(.6px);
}
.pin--pink { background: radial-gradient(circle at 34% 30%, #FBE6F1 0 12%, #E7BDD5 30%, var(--pink) 55%, #9C5F82 100%); }
.pin--ink  { background: radial-gradient(circle at 34% 30%, #8D8597 0 12%, #4E4858 32%, var(--ink) 60%, #0E0C11 100%); }

/* Paper clip */
.clip {
  position: absolute; z-index: 4; width: 22px; height: 58px; top: -26px; left: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 58' fill='none'%3E%3Cpath d='M15 18V45a6 6 0 0 1-12 0V9a6 6 0 0 1 12 0' stroke='%23000' stroke-opacity='.18' stroke-width='3.4' stroke-linecap='round' transform='translate(1.2 1.6)'/%3E%3Cpath d='M15 18V45a6 6 0 0 1-12 0V9a6 6 0 0 1 12 0v32a3 3 0 0 1-6 0V16' stroke='%238C8994' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M15 18V45a6 6 0 0 1-12 0V9a6 6 0 0 1 12 0v32a3 3 0 0 1-6 0V16' stroke='%23E9E7EE' stroke-width='.8' stroke-linecap='round' transform='translate(-.4 -.3)'/%3E%3C/svg%3E") no-repeat center / contain;
  transform: rotate(var(--r, 6deg));
  pointer-events: none;
}

/* Polaroid */
.polaroid {
  position: relative; margin: 0;
  background: var(--paper) var(--noise);
  padding: 10px 10px 0;
  box-shadow: var(--shadow-paper);
  transform: rotate(var(--rot, 0deg));
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.polaroid > img, .polaroid > .ph { width: 100%; aspect-ratio: var(--ar, 4/5); object-fit: cover; filter: saturate(.92) contrast(1.02); }
.polaroid figcaption {
  font-family: var(--f-hand); font-size: 15px; line-height: 1.25; color: var(--ink-2);
  padding: 10px 4px 14px; text-align: center;
}
.polaroid:not(:has(figcaption)) { padding-bottom: 34px; }
.tilt:hover { transform: rotate(calc(var(--rot, 0deg) * -0.4)) translateY(-4px) scale(1.015); box-shadow: var(--shadow-lift); }

/* Paper sheet / note */
.sheet {
  position: relative; background: var(--paper) var(--noise);
  box-shadow: var(--shadow-paper); padding: 28px;
  transform: rotate(var(--rot, 0deg));
}
.sheet--lined {
  background-image:
    linear-gradient(90deg, transparent 38px, rgba(217,169,197,.7) 38px 39.5px, transparent 39.5px),
    repeating-linear-gradient(180deg, transparent 0 29px, rgba(121,85,179,.13) 29px 30px),
    var(--noise);
  background-position: 0 0, 0 18px, 0 0;
  padding-left: 56px;
}
.sheet--kraft { background-color: var(--kraft); }
.sheet--lilac { background-color: var(--lilac); }

/* Torn edges */
.torn-bottom {
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 12px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12' preserveAspectRatio='none'%3E%3Cpath d='M0 0h240v5l-7 4-9-5-6 6-10-4-8 5-7-6-11 5-6-3-9 5-8-6-10 5-7-4-6 5-10-6-8 6-9-4-7 5-11-6-6 4-9-3-8 5-7-5-10 6-8-4-9 5-7-6-6 4-10-3-8 5-8-4V0z'/%3E%3C/svg%3E") bottom / 240px 12px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 12px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12' preserveAspectRatio='none'%3E%3Cpath d='M0 0h240v5l-7 4-9-5-6 6-10-4-8 5-7-6-11 5-6-3-9 5-8-6-10 5-7-4-6 5-10-6-8 6-9-4-7 5-11-6-6 4-9-3-8 5-7-5-10 6-8-4-9 5-7-6-6 4-10-3-8 5-8-4V0z'/%3E%3C/svg%3E") bottom / 240px 12px repeat-x;
  padding-bottom: 40px;
}
.torn-top {
  -webkit-mask: linear-gradient(#000 0 0) bottom / 100% calc(100% - 12px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12' preserveAspectRatio='none'%3E%3Cpath d='M0 12h240V7l-7-4-9 5-6-6-10 4-8-5-7 6-11-5-6 3-9-5-8 6-10-5-7 4-6-5-10 6-8-6-9 4-7-5-11 6-6-4-9 3-8-5-7 5-10-6-8 4-9-5-7 6-6-4-10 3-8-5-8 4v5z'/%3E%3C/svg%3E") top / 240px 12px repeat-x;
          mask: linear-gradient(#000 0 0) bottom / 100% calc(100% - 12px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12' preserveAspectRatio='none'%3E%3Cpath d='M0 12h240V7l-7-4-9 5-6-6-10 4-8-5-7 6-11-5-6 3-9-5-8 6-10-5-7 4-6-5-10 6-8-6-9 4-7-5-11 6-6-4-9 3-8-5-7 5-10-6-8 4-9-5-7 6-6-4-10 3-8-5-8 4v5z'/%3E%3C/svg%3E") top / 240px 12px repeat-x;
}

/* Stamps & labels */
.stamp {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--purple); border: 1.5px solid currentColor; border-radius: 3px;
  padding: 6px 8px 5px; transform: rotate(var(--r, -6deg));
  background: rgba(248,246,242,.4);
  -webkit-mask: var(--noise) 0 0 / 120px, linear-gradient(#000 0 0);
  -webkit-mask-composite: source-over;
  opacity: .92;
}
.stamp--round { border-radius: 50%; width: 92px; height: 92px; justify-content: center; text-align: center; padding: 8px; line-height: 1.3; border-style: double; border-width: 4px; }
.stamp--ink { color: var(--ink-2); }
.stamp--draft { color: #A0527F; }

.chapter-label {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  font: 500 12px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}
.chapter-label b { color: var(--purple); font-weight: 600; }
.chapter-label::before { content: ""; width: 28px; height: 1.5px; background: currentColor; }

.annot {
  font-family: var(--f-hand); color: var(--purple); font-size: 18px; line-height: 1.15;
  display: inline-block; transform: rotate(var(--r, -4deg));
}
.annot--pink { color: #B07094; }

/* Hand-drawn underline / circle */
.scribble { position: relative; display: inline-block; white-space: nowrap; }
.scribble svg { position: absolute; left: -2%; width: 104%; height: .32em; bottom: -.12em; overflow: visible; pointer-events: none; }
.scribble path { fill: none; stroke: var(--purple); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 520; stroke-dashoffset: 520; transition: stroke-dashoffset 1.1s var(--ease) .25s; }
.scribble--pink path { stroke: var(--pink); }
.in .scribble path, .scribble.in path, .no-js .scribble path { stroke-dashoffset: 0; }

/* Placeholder image */
.ph {
  position: relative; display: flex; align-items: center; justify-content: center; text-align: center;
  aspect-ratio: var(--ar, 4/3); width: 100%;
  background:
    repeating-linear-gradient(-45deg, rgba(121,85,179,.08) 0 10px, transparent 10px 20px),
    var(--lilac);
  color: var(--purple-deep);
  border: 1.5px dashed rgba(121,85,179,.45);
  padding: 16px;
}
.ph span {
  font: 500 11px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
  background: var(--paper); padding: 6px 9px; border-radius: 3px; max-width: 90%;
  box-shadow: 0 1px 2px rgba(37,33,44,.08);
}
.ph span::before { content: "To add: "; font-weight: 600; }
.ph--dark { background: repeating-linear-gradient(-45deg, rgba(255,255,255,.04) 0 10px, transparent 10px 20px), #2F2A38; border-color: rgba(237,229,247,.25); color: var(--lilac); }
.ph--dark span { background: #3A3444; color: var(--lilac); }

/* "To add" note */
.todo {
  position: relative; display: flex; gap: 12px; align-items: flex-start;
  background: rgba(237,229,247,.55); border: 1.5px dashed rgba(121,85,179,.45);
  padding: 14px 16px; border-radius: 6px; margin: 16px 0 0;
  font-size: 15px; line-height: 1.5; color: var(--ink-2);
}
.todo::before {
  content: "TO ADD"; flex: none; font: 600 10px/1 var(--f-mono); letter-spacing: .12em;
  background: var(--purple); color: #fff; padding: 5px 6px 4px; border-radius: 3px; margin-top: 2px;
}
.todo--inline { display: inline-flex; padding: 6px 10px; margin: 0; font-size: 14px; }
.todo--inline::before { content: "TO ADD"; }
.confirm-tag { font: 600 10px/1 var(--f-mono); letter-spacing: .1em; color: var(--purple); border: 1px dashed var(--purple); padding: 3px 5px 2px; border-radius: 3px; margin-left: 6px; vertical-align: middle; white-space: nowrap; }

/* =====================================================================
   BUTTONS & LINKS
   ===================================================================== */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 14px 24px; border-radius: 999px;
  font: 600 16px/1 var(--f-sans); letter-spacing: -0.01em; text-decoration: none;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .25s;
  cursor: pointer; border: 0;
}
.btn .arr { transition: transform .35s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn--ink { background: var(--ink); color: var(--ivory); box-shadow: 0 6px 0 -1px var(--purple), 0 10px 20px -10px rgba(37,33,44,.6); }
.btn--ink:hover { transform: translateY(-2px); box-shadow: 0 8px 0 -1px var(--purple), 0 16px 24px -12px rgba(37,33,44,.6); }
.btn--paper {
  background: var(--paper) var(--noise); color: var(--ink);
  border-radius: 6px; transform: rotate(-1.5deg); box-shadow: var(--shadow-paper);
}
.btn--paper:hover { transform: rotate(0deg) translateY(-2px); box-shadow: var(--shadow-lift); }
.btn--paper::before { content: ""; position: absolute; top: -9px; left: 50%; width: 46px; height: 18px; margin-left: -23px; background: linear-gradient(180deg, rgba(160,130,210,.6), rgba(121,85,179,.5)); transform: rotate(-4deg); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--ivory); }

.link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; text-decoration: none; color: var(--ink);
  background: linear-gradient(var(--purple), var(--purple)) 0 100% / 100% 2px no-repeat;
  padding-bottom: 3px; transition: background-size .35s var(--ease), color .2s;
}
.link:hover { color: var(--purple); background-size: 0 2px; background-position: 100% 100%; }
.link .arr { transition: transform .35s var(--ease); }
.link:hover .arr { transform: translateX(4px); }

/* =====================================================================
   NAVIGATION — floating index label
   ===================================================================== */
.tabnav {
  position: fixed; top: 18px; left: 50%; z-index: 500;
  transform: translateX(-50%) rotate(-1.2deg);
  display: flex; align-items: center; gap: 4px;
  background: var(--paper) var(--noise);
  padding: 7px 7px 7px 14px; border-radius: 14px;
  box-shadow: var(--shadow-paper);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.tabnav:hover { transform: translateX(-50%) rotate(0deg); }
.tabnav .pin { top: -9px; left: 26px; margin: 0; width: 16px; height: 16px; }
.tabnav__mark {
  font-family: var(--f-hand); font-size: 21px; line-height: 1; text-decoration: none; color: var(--ink);
  padding: 6px 12px 4px 6px; margin-right: 4px; border-right: 1.5px dashed var(--rule);
}
.tabnav__mark span { color: var(--purple); }
.tabnav__list { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.tabnav__link {
  position: relative; display: block; padding: 9px 13px; border-radius: 8px;
  font: 500 15px/1 var(--f-sans); text-decoration: none; color: var(--ink);
  transition: color .2s;
}
.tabnav__link:hover { color: var(--purple); }
.tabnav__link .circ { position: absolute; inset: -4px -6px; width: calc(100% + 12px); height: calc(100% + 8px); overflow: visible; pointer-events: none; }
.tabnav__link .circ path { fill: none; stroke: var(--purple); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 260; transition: stroke-dashoffset .6s var(--ease); }
.tabnav__link[aria-current="page"] .circ path, .tabnav__link:hover .circ path { stroke-dashoffset: 0; }
.tabnav__link[aria-current="page"] { color: var(--purple); }
.tabnav__cta {
  display: block; padding: 10px 15px; border-radius: 9px; margin-left: 4px;
  background: var(--purple); color: #fff; text-decoration: none; font: 600 15px/1 var(--f-sans);
  transition: background .2s, transform .3s var(--ease);
}
.tabnav__cta:hover, .tabnav__cta[aria-current="page"] { background: var(--ink); }
.tabnav__toggle { display: none; }

/* Mobile index sheet */
.index-sheet {
  position: fixed; inset: 0; z-index: 600; display: none;
}
.index-sheet.is-open { display: block; }
.index-sheet__scrim { position: absolute; inset: 0; background: rgba(37,33,44,.35); animation: fade .3s ease both; }
.index-sheet__paper {
  position: absolute; top: 12px; left: 12px; right: 12px;
  background: var(--paper) var(--noise); box-shadow: var(--shadow-lift);
  padding: 28px 24px 30px; border-radius: 4px;
  transform-origin: top center; animation: unfold .45s var(--ease) both;
  max-height: calc(100dvh - 24px); overflow-y: auto;
}
.index-sheet__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.index-sheet__title { font-family: var(--f-hand); font-size: 28px; color: var(--purple); }
.index-sheet__close {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink); background: transparent;
  display: grid; place-items: center; cursor: pointer;
}
.toc { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc a {
  display: flex; align-items: baseline; gap: 8px; text-decoration: none; padding: 12px 0;
  font-size: 26px; font-weight: 650; letter-spacing: -0.03em;
}
.toc a::after { content: ""; flex: 1; border-bottom: 2px dotted var(--rule); transform: translateY(-6px); order: 1; }
.toc a .pg { order: 2; font: 500 13px var(--f-mono); color: var(--ink-3); }
.toc a[aria-current="page"] { color: var(--purple); }
.toc--small a { font-size: 17px; font-weight: 500; padding: 8px 0; }
.index-sheet .label { margin: 22px 0 4px; display: block; }

@keyframes unfold { from { transform: perspective(900px) rotateX(-70deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } }

/* Chapter bookmarks (homepage, desktop) */
.bookmarks {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 400;
  display: flex; flex-direction: column; gap: 6px; list-style: none; margin: 0; padding: 0;
}
.bookmarks a {
  position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 12px;
  height: 34px; padding: 0 14px 0 15px; text-decoration: none;
  background: var(--lilac); color: var(--purple-deep);
  font: 600 11px/1 var(--f-mono); letter-spacing: .08em;
  border-radius: 6px 0 0 6px; box-shadow: -2px 2px 6px -2px rgba(37,33,44,.2);
  transform: translateX(calc(100% - 44px)); transition: transform .4s var(--ease), background .25s, color .25s;
  white-space: nowrap;
}
.bookmarks a .t { font-family: var(--f-sans); font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 600; }
.bookmarks a:hover, .bookmarks a:focus-visible { transform: translateX(0); }
.bookmarks a.is-active { background: var(--purple); color: #fff; transform: translateX(calc(100% - 56px)); }
.bookmarks a.is-active:hover, .bookmarks a.is-active:focus-visible { transform: translateX(0); }
.bookmarks a::before { content: ""; position: absolute; left: -7px; top: 0; border: 17px solid transparent; border-right: 7px solid var(--lilac); border-left: 0; transition: border-color .25s; display: none; }

/* =====================================================================
   COVER (opening experience)
   ===================================================================== */
.cover { display: none; }
.cover-on .cover {
  position: fixed; inset: 0; z-index: 800;
  display: grid; place-items: center;
  background: rgba(37,33,44,.0);
  perspective: 2200px;
}
.cover__stage { position: relative; width: min(560px, 86vw); aspect-ratio: 5 / 7; max-height: 82vh; }
.cover__pages {
  position: absolute; inset: 0; background: var(--paper) var(--noise); border-radius: 2px 6px 6px 2px;
  box-shadow: 4px 0 0 -1px #EFEAE0, 8px 0 0 -2px #E7E1D5, 12px 2px 0 -3px #DED7C9, var(--shadow-lift);
}
.cover__front {
  position: absolute; inset: 0; transform-origin: left center; transform-style: preserve-3d;
  transition: transform 1.15s cubic-bezier(.6,.02,.25,1);
}
.cover__face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 2px 6px 6px 2px; overflow: hidden;
}
.cover__face--front {
  background:
    linear-gradient(90deg, rgba(0,0,0,.18) 0 10px, rgba(255,255,255,.06) 10px 13px, transparent 13px),
    var(--noise), var(--fibers),
    linear-gradient(160deg, #EDE5F7 0%, #E2D6F2 100%);
  box-shadow: var(--shadow-lift);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(24px, 6%, 44px) clamp(24px, 7%, 48px) clamp(24px, 6%, 44px) clamp(36px, 10%, 64px);
}
.cover__face--back { transform: rotateY(180deg); background: var(--paper-2) var(--noise); }
.cover__top { display: flex; justify-content: space-between; align-items: flex-start; }
.cover__name { font-size: clamp(56px, 13vw, 112px); font-weight: 800; letter-spacing: -0.06em; line-height: .84; color: var(--ink); }
.cover__name span { display: block; }
.cover__sub { font-family: var(--f-serif); font-style: italic; font-size: clamp(20px, 3.4vw, 28px); line-height: 1.15; color: var(--ink-2); margin-top: 18px; max-width: 16ch; }
.cover__bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.cover__ribbon { position: absolute; top: -6px; right: 40%; width: 26px; height: 34%; background: var(--purple); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 88%, 0 100%); box-shadow: inset -4px 0 0 rgba(0,0,0,.12); z-index: 2; }
.cover__open {
  display: inline-flex; align-items: center; gap: 10px; border: 0; cursor: pointer;
  background: var(--ink); color: var(--ivory); padding: 14px 20px; border-radius: 999px; font-weight: 600; font-size: 15px;
}
.cover__skip {
  position: fixed; bottom: 22px; right: 22px; z-index: 2;
  background: rgba(248,246,242,.9); border: 1.5px solid var(--ink); border-radius: 999px;
  padding: 10px 16px; font: 500 13px var(--f-mono); cursor: pointer; min-height: 44px;
}
.cover__backdrop { position: absolute; inset: 0; background: var(--ivory) var(--noise); transition: opacity .7s ease .55s; }
.cover.is-open .cover__front { transform: rotateY(-165deg); }
.cover.is-open .cover__backdrop { opacity: 0; }
.cover.is-open .cover__pages { opacity: 0; transform: scale(1.06); transition: opacity .55s ease .6s, transform .9s var(--ease) .4s; }
.cover.is-open .cover__skip { opacity: 0; transition: opacity .2s; }
.cover__stage { animation: coverIn .7s var(--ease) both; }
@keyframes coverIn { from { transform: translateY(18px) rotate(-1.5deg); opacity: 0; } }

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  position: relative; min-height: max(720px, 100svh);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch; gap: clamp(12px, 2vw, 32px);
  padding: 110px var(--gutter) 56px;
  max-width: 1600px; margin: 0 auto;
}
.hero__side { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding-block: 10px 24px; }
.hero__side--left { align-items: flex-start; }
.hero__side--right { align-items: flex-end; }
.hero__center {
  position: relative; z-index: 5; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  max-width: 760px;
}
.hero__kicker { margin-bottom: 18px; display: inline-flex; gap: 10px; align-items: center; }
.hero__kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--purple); display: inline-block; }
.hero__name {
  font-size: clamp(84px, 12.6vw, 212px); font-weight: 800; letter-spacing: -0.065em; line-height: .82;
  margin: 0 0 28px; position: relative;
}
.hero__name .line { display: block; overflow: hidden; padding: .04em .1em .06em; }
.hero__name.is-settled .line { overflow: visible; }
.hero__name .line > span { display: block; }
.hero__name .line--first {
  font-family: var(--f-serif); font-style: italic; font-weight: 400;
  font-size: 1.22em; letter-spacing: -0.03em; line-height: .78; color: var(--purple);
  position: relative; z-index: 2; margin-bottom: -.2em; transform: translateX(-.42em);
}
.hero__name .line--last { color: var(--ink); }
/* letters react to the cursor: outer span holds the layout, inner span moves */
.hero__name .w { white-space: nowrap; }
.hero__name .ch { display: inline-block; }
.hero__name .ch > span {
  display: inline-block; --f: 0;
  transform: translate(var(--lx, 0), calc(var(--f) * -0.09em)) rotate(var(--lr, 0deg)) scale(calc(1 + var(--f) * .07));
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), color .3s ease;
  will-change: transform;
}
.hero__name .line--last .ch > span { color: color-mix(in srgb, var(--purple) calc(var(--f) * 100%), var(--ink)); }
.hero__name .line--first .ch > span { color: color-mix(in srgb, var(--pink) calc(var(--f) * 85%), var(--purple)); }
.hero__name::after { /* highlighter stroke behind */
  content: ""; position: absolute; z-index: -1; left: 2%; right: 4%; top: 66%; height: 22%;
  background: linear-gradient(90deg, rgba(217,169,197,.55), rgba(205,182,240,.6) 60%, rgba(205,182,240,.4));
  clip-path: polygon(0 18%, 3% 6%, 30% 10%, 62% 0, 97% 8%, 100% 30%, 98% 72%, 100% 92%, 70% 100%, 38% 92%, 4% 100%, 1% 70%);
  transform: rotate(-1.5deg);
}
.hero__dot { color: var(--purple); }
.hero__intro { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--ink-2); max-width: 42ch; margin: 0 auto 34px; text-wrap: pretty; }
.hero__intro p { margin: 0 0 .8em; }
.hero__intro p:last-child { margin-bottom: 0; }
.hero__intro em { font-size: 1.25em; line-height: 1; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 18px 22px; justify-content: center; align-items: center; }

/* collage pieces */
.c-portrait { width: clamp(150px, 13vw, 230px); --rot: -5deg; --ar: 4/5; margin-left: 4%; }
.c-speaking { width: clamp(190px, 17vw, 300px); --rot: 4deg; --ar: 16/10; margin-right: 2%; margin-top: 10px; }
.c-candid   { width: clamp(150px, 12.5vw, 220px); --rot: -3deg; --ar: 3/4; margin-right: 8%; }
.c-note {
  width: clamp(170px, 14vw, 230px); --rot: 3deg; padding: 26px 20px 22px; margin-left: 10%;
  font-family: var(--f-hand); font-size: 17px; line-height: 1.3; color: var(--ink);
}
.c-note small { display: block; font: 500 10px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.c-note u { text-decoration: none; background: linear-gradient(transparent 62%, rgba(217,169,197,.6) 62%); }
.c-annot { position: absolute; z-index: 6; pointer-events: none; }
.c-annot--hi { top: 49%; left: 9%; width: 170px; }
.c-annot--hi svg { width: 60px; height: 50px; display: block; margin: 0 0 4px 30px; transform: scaleY(-1); }
.c-annot svg path { fill: none; stroke: var(--purple); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.c-stamp { position: absolute; z-index: 6; bottom: 40%; left: 70%; }
.c-sticker {
  position: absolute; z-index: 6; width: 64px; height: 64px; border-radius: 50%;
  background: var(--pink); color: var(--ink); display: grid; place-items: center; text-align: center;
  font: 600 10px/1.15 var(--f-mono); letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 2px 3px rgba(37,33,44,.2); transform: rotate(14deg);
}
.c-sticker--speak { top: -18px; right: -14px; }

.hero__scroll { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 34px; padding: 6px 10px; text-decoration: none; color: var(--ink-3); transition: color .2s; }
.hero__scroll:hover { color: var(--purple); }
.hero__scroll svg { animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(5px); } }

/* entrance choreography (enabled only with JS) */
.js .hero__name .line > span { transform: translateY(105%); }
.js .hero__kicker, .js .hero__intro, .js .hero__actions, .js .hero__scroll { opacity: 0; transform: translateY(14px); }
.js .hero [data-piece] { opacity: 0; transform: translateY(24px) scale(.94) rotate(var(--rot, 0deg)); }
.js .hero__name::after { transform: scaleX(0) rotate(-1.5deg); transform-origin: left; }
.is-ready .hero__name .line > span { transform: none; transition: transform 1s var(--ease); }
.is-ready .hero__name .line:nth-child(2) > span { transition-delay: .12s; }
.is-ready .hero__name::after { transform: scaleX(1) rotate(-1.5deg); transition: transform .9s var(--ease) .55s; }
.is-ready .hero__kicker, .is-ready .hero__intro, .is-ready .hero__actions, .is-ready .hero__scroll { opacity: 1; transform: none; transition: opacity .8s ease, transform .8s var(--ease); }
.is-ready .hero__kicker { transition-delay: .05s; }
.is-ready .hero__intro { transition-delay: .45s; }
.is-ready .hero__actions { transition-delay: .6s; }
.is-ready .hero__scroll { transition-delay: .8s; }
.is-ready .hero [data-piece] { opacity: 1; transform: translate(var(--px, 0), var(--py, 0)) rotate(var(--rot, 0deg)); transition: opacity .7s ease, transform .9s var(--ease); transition-delay: calc(.7s + var(--i, 0) * .12s); }
.is-ready .hero [data-piece].settled { transition: transform 1.2s var(--ease), box-shadow .5s var(--ease); transition-delay: 0s; }
.is-ready .hero .tilt.settled:hover { transform: rotate(calc(var(--rot, 0deg) * -0.4)) translateY(-4px) scale(1.02); box-shadow: var(--shadow-lift); }

/* =====================================================================
   SECTIONS / CHAPTERS
   ===================================================================== */
.chapter { position: relative; padding: clamp(80px, 11vw, 160px) 0; }
.chapter__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 64px; align-items: end; margin-bottom: clamp(48px, 7vw, 96px); }
.chapter__title { font-size: clamp(44px, 6.6vw, 104px); letter-spacing: -0.05em; line-height: .94; margin-top: 18px; text-wrap: balance; }
.chapter__title .serif { font-size: 1.06em; letter-spacing: -0.02em; color: var(--purple); }
.chapter__lede { font-size: clamp(18px, 1.45vw, 21px); color: var(--ink-2); max-width: 40ch; text-wrap: pretty; }
.chapter__num {
  position: absolute; top: clamp(40px, 6vw, 90px); right: var(--gutter);
  font-size: clamp(120px, 18vw, 280px); font-weight: 800; letter-spacing: -0.08em; line-height: .8;
  color: transparent; -webkit-text-stroke: 1.5px rgba(121,85,179,.22); pointer-events: none; user-select: none;
}
.chapter-rule { display: flex; align-items: center; gap: 16px; color: var(--ink-3); }
.chapter-rule::before, .chapter-rule::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

/* reveal on scroll */
.js [data-reveal].pre { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform 1s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal].in { opacity: 1; transform: none; }
.js [data-reveal="photo"].pre { opacity: 1; transform: none; }
.js [data-reveal="photo"] > :first-child { transition: clip-path 1.2s var(--ease); }
.js [data-reveal="photo"].pre > :first-child { clip-path: inset(0 0 100% 0); }
.js [data-reveal="photo"].in > :first-child { clip-path: inset(0 0 0 0); }

/* =====================================================================
   WORK — project features
   ===================================================================== */
.projects { display: flex; flex-direction: column; gap: clamp(96px, 12vw, 180px); }
.project { position: relative; }
.project__no { font: 500 12px/1 var(--f-mono); letter-spacing: .12em; color: var(--purple); }
.project__name { font-size: clamp(38px, 4.6vw, 72px); letter-spacing: -0.05em; line-height: .95; margin: 14px 0 22px; }
.project__name a { text-decoration: none; }
.project__name a:hover { color: var(--purple); }
.project__meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0 0 24px; font-size: 15px; }
.project__meta dt { font: 500 11px/1.9 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.project__meta dd { margin: 0; font-weight: 500; }
.project__block { margin-bottom: 20px; }
.project__block :is(h3, h4) { font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.project__block :is(h3, h4)::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--pink); }
.project__block:nth-of-type(2) h4::before { background: var(--purple); }
.project__block p { font-size: 17px; color: var(--ink-2); max-width: 46ch; }
.project__actions { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-top: 28px; }

.frame { position: relative; background: var(--paper) var(--noise); padding: clamp(8px, 1vw, 14px); box-shadow: var(--shadow-paper); }
.frame > img { width: 100%; height: auto; display: block; background: var(--paper-2); }

/* Project card: a tinted stage that frames any mockup the same way */
.pcard { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.pcard--right { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.pcard--right .pcard__stage { order: 2; }
.pcard__stage {
  position: relative; display: grid; place-items: center; isolation: isolate;
  aspect-ratio: 5 / 4; padding: clamp(20px, 3.4vw, 48px);
  border-radius: 10px; text-decoration: none; color: inherit;
  background:
    radial-gradient(circle at 1px 1px, rgba(37,33,44,.10) 1px, transparent 1.4px) 0 0 / 18px 18px,
    linear-gradient(160deg, color-mix(in srgb, var(--tint) 55%, #fff), var(--tint) 70%);
  box-shadow: 0 0 0 10px var(--paper), 0 0 0 11px rgba(37,33,44,.06), var(--shadow-paper);
  margin: 11px;
  transition: box-shadow .5s var(--ease), transform .5s var(--ease);
}
.pcard__stage .tape { z-index: 4; }
.pcard__stage .tape--tl { top: -20px; left: -26px; }
.pcard__stage .tape--tr { top: -20px; right: -26px; }
.pcard__glow { /* soft light behind the mockup */
  position: absolute; inset: 14% 12% 18%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.75), transparent);
}
.pcard__no {
  position: absolute; left: 20px; bottom: 16px; z-index: 2;
  font: 600 12px/1 var(--f-mono); letter-spacing: .12em; color: color-mix(in srgb, var(--ink) 55%, var(--tint));
}
.pcard__mock { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: transform .6s var(--ease); }
.pcard__mock.is-mockup { filter: drop-shadow(0 28px 34px rgba(37,33,44,.28)) drop-shadow(0 6px 10px rgba(37,33,44,.12)); }
.pcard__mock.is-shot { border-radius: 10px; box-shadow: 0 1px 2px rgba(37,33,44,.12), 0 24px 44px -18px rgba(37,33,44,.45); }
.pcard__ph { width: 82%; --ar: 16/10; border-radius: 10px; background-color: rgba(255,255,255,.55); }
.pcard__pinned { position: absolute; z-index: 3; width: 28%; left: -4%; bottom: -8%; --rot: -6deg; --ar: 4/3.4; }
.pcard--right .pcard__pinned { left: auto; right: -4%; --rot: 5deg; }
.pcard__pinned img { filter: grayscale(1) contrast(1.05); }
.pcard__open {
  position: absolute; right: 18px; bottom: 14px; z-index: 5;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: var(--ivory); padding: 9px 14px; border-radius: 999px;
  font: 500 12px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase;
  opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .4s var(--ease);
}
.pcard__stage:hover, .pcard__stage:focus-visible { box-shadow: 0 0 0 10px var(--paper), 0 0 0 11px rgba(37,33,44,.06), var(--shadow-lift); }
.pcard__stage:hover .pcard__mock, .pcard__stage:focus-visible .pcard__mock { transform: translateY(-8px) scale(1.025); }
.pcard__stage:hover .pcard__open, .pcard__stage:focus-visible .pcard__open { opacity: 1; transform: none; }

.more-work { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; margin-top: clamp(80px, 10vw, 140px); padding-top: 28px; border-top: 1.5px dashed var(--rule); }

/* =====================================================================
   IMPACT — the ink spread
   ===================================================================== */
.impact {
  position: relative; background-color: var(--ink); color: var(--ivory);
  background-image: var(--noise);
  padding: clamp(96px, 12vw, 170px) 0;
  margin: 40px 0;
}
.impact::before, .impact::after { /* torn paper edges */
  content: ""; position: absolute; left: 0; right: 0; height: 18px; background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 18' preserveAspectRatio='none'%3E%3Cpath d='M0%2018V10%20L10%2011.5%20L21%208.5%20L27%2010.2%20L33%205.7%20L38%2011.1%20L46%202.4%20L57%206.2%20L65%202.9%20L76%202.6%20L90%203.2%20L98%208.3%20L112%2011.5%20L126%207.9%20L131%2011.8%20L136%207.6%20L143%204.9%20L150%207.4%20L164%205.1%20L171%203.0%20L185%208.4%20L195%203.0%20L201%207.6%20L215%204.1%20L228%206.3%20L238%206.7%20L250%205.6%20L258%209.9%20L266%202.8%20L275%207.3%20L285%209.3%20L294%208.1%20L300%203.2%20L311%203.6%20L321%203.5%20L333%206.2%20L339%209.6%20L353%209.9%20L363%205.4%20L373%207.9%20L387%2010.0%20L393%2010.4%20L402%206.7%20L408%202.6%20L417%208.5%20L429%204.8%20L440%2010.9%20L450%202.2%20L462%205.6%20L476%203.2%20L480%204.2%20L480%2010V18Z'/%3E%3C/svg%3E") 0 0 / 480px 18px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 18' preserveAspectRatio='none'%3E%3Cpath d='M0%2018V10%20L10%2011.5%20L21%208.5%20L27%2010.2%20L33%205.7%20L38%2011.1%20L46%202.4%20L57%206.2%20L65%202.9%20L76%202.6%20L90%203.2%20L98%208.3%20L112%2011.5%20L126%207.9%20L131%2011.8%20L136%207.6%20L143%204.9%20L150%207.4%20L164%205.1%20L171%203.0%20L185%208.4%20L195%203.0%20L201%207.6%20L215%204.1%20L228%206.3%20L238%206.7%20L250%205.6%20L258%209.9%20L266%202.8%20L275%207.3%20L285%209.3%20L294%208.1%20L300%203.2%20L311%203.6%20L321%203.5%20L333%206.2%20L339%209.6%20L353%209.9%20L363%205.4%20L373%207.9%20L387%2010.0%20L393%2010.4%20L402%206.7%20L408%202.6%20L417%208.5%20L429%204.8%20L440%2010.9%20L450%202.2%20L462%205.6%20L476%203.2%20L480%204.2%20L480%2010V18Z'/%3E%3C/svg%3E") 0 0 / 480px 18px repeat-x;
}
.impact::before { top: -17px; }
.impact::after { bottom: -17px; transform: scaleY(-1); }
.impact .chapter-label { color: rgba(248,246,242,.72); }
.impact .chapter-label b { color: var(--pink); }
.impact__title { font-size: clamp(42px, 6.4vw, 104px); letter-spacing: -0.05em; line-height: .96; max-width: 16ch; margin: 22px 0 0; text-wrap: balance; }
.impact__title .serif { color: var(--pink); font-size: 1.08em; }
.impact__intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 64px; align-items: end; }
.impact__lede { font-size: clamp(18px, 1.5vw, 21px); color: rgba(248,246,242,.82); max-width: 40ch; }
.impact__annot { color: var(--pink); font-size: 20px; margin-top: 22px; display: inline-flex; align-items: center; gap: 8px; }
.themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); margin-top: clamp(64px, 8vw, 110px); }
.theme { color: var(--ink); padding: 36px 30px 34px; }
.theme:nth-child(1) { --rot: -1.6deg; }
.theme:nth-child(2) { --rot: 1.2deg; margin-top: 48px; }
.theme:nth-child(3) { --rot: -.8deg; margin-top: 16px; }
.theme__no { font-family: var(--f-serif); font-style: italic; font-size: 26px; color: var(--purple); }
.theme__word { font-size: clamp(40px, 4.2vw, 64px); letter-spacing: -0.05em; margin: 4px 0 14px; }
.theme__line { font-size: 17px; color: var(--ink-2); }
.theme__eg { margin-top: 22px; padding-top: 18px; border-top: 1.5px dashed var(--rule); font-size: 15px; color: var(--ink-2); }
.theme__eg b { display: block; font: 500 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--purple); margin-bottom: 8px; }
.theme__eg a { font-weight: 600; }
.impact__close { margin-top: clamp(64px, 8vw, 100px); display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; max-width: 820px; }
.impact__close p { font-family: var(--f-serif); font-style: italic; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.2; color: rgba(248,246,242,.92); margin: 0; }

/* =====================================================================
   BEYOND THE SCREEN — collage of stories
   ===================================================================== */
.stories {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 56px 28px; align-items: start;
}
.story-card {
  position: relative; display: block; text-align: left; cursor: pointer;
  background: none; border: 0; padding: 0; color: inherit;
}
.story-card .polaroid { --ar: 4/3; }
.story-card__meta { margin-top: 18px; padding: 0 4px; }
.story-card__tag { display: flex; align-items: center; gap: 10px; }
.story-card__title { font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.035em; margin: 10px 0 6px; line-height: 1.08; }
.story-card__sum { font-size: 15.5px; color: var(--ink-2); margin: 0; }
.story-card__open { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 0; font: 600 15px var(--f-sans); color: var(--purple); background: none; border: 0; cursor: pointer; }
.story-card__open::after { content: ""; position: absolute; inset: 0; z-index: 6; } /* whole card is the hit area */
.story-card { cursor: pointer; }
.story-card:hover .polaroid { transform: rotate(calc(var(--rot, 0deg) * -.3)) translateY(-6px); box-shadow: var(--shadow-lift); }
.story-card:hover .story-card__open .arr { transform: translateX(4px); }
.story-card .arr { transition: transform .35s var(--ease); display: inline-block; }
.story-card:nth-child(1) { grid-column: 1 / span 5; --rot: -2.5deg; }
.story-card:nth-child(2) { grid-column: 7 / span 4; --rot: 2deg; margin-top: 70px; }
.story-card:nth-child(3) { grid-column: 2 / span 4; --rot: 1.5deg; }
.story-card:nth-child(4) { grid-column: 7 / span 5; --rot: -1.8deg; margin-top: -40px; }
.story-card:nth-child(5) { grid-column: 4 / span 5; --rot: -1deg; }
.story-card:nth-child(n+6) { grid-column: span 4; }
.story-card .stamp { position: absolute; right: -10px; top: -14px; z-index: 5; background: var(--ivory); }

/* =====================================================================
   BOOK — page-turning component
   ===================================================================== */
.book { position: relative; }
.book__spread {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  min-height: var(--book-h, 600px); perspective: 2400px;
  background: var(--paper) var(--noise);
  box-shadow: 0 2px 0 #EFEAE0, 0 4px 0 #E7E1D5, 0 6px 0 #DED7C9, var(--shadow-lift);
  border-radius: 3px;
}
.book__spread::after { /* gutter shadow */
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 80px; margin-left: -40px; pointer-events: none; z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(37,33,44,.08) 40%, rgba(37,33,44,.16) 50%, rgba(37,33,44,.08) 60%, transparent);
}
.book__page { position: relative; padding: clamp(28px, 3.4vw, 52px); overflow: hidden; min-width: 0; }
.book__page--left { border-right: 1px solid rgba(37,33,44,.06); }
.book__folio { position: absolute; bottom: 18px; font: 500 11px var(--f-mono); color: var(--ink-3); letter-spacing: .1em; }
.book__page--left .book__folio { left: 28px; }
.book__page--right .book__folio { right: 28px; }
.leaf {
  position: absolute; top: 0; bottom: 0; width: 50%; z-index: 4;
  transform-style: preserve-3d; transition: transform .9s cubic-bezier(.645,.045,.355,1);
}
.leaf--next { left: 50%; transform-origin: left center; }
.leaf--prev { left: 0; transform-origin: right center; }
.leaf__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--paper) var(--noise); overflow: hidden; }
.leaf__face .book__page { height: 100%; }
.leaf__face--back { transform: rotateY(180deg); }
.leaf__face::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(37,33,44,0), rgba(37,33,44,.12)); opacity: 0; transition: opacity .45s ease; }
.leaf.is-turning .leaf__face::after { opacity: 1; }
.leaf--next.is-turning { transform: rotateY(-180deg); }
.leaf--prev.is-turning { transform: rotateY(180deg); }
.book__controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; }
.book__btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 18px;
  background: var(--paper) var(--noise); border: 0; border-radius: 6px; cursor: pointer;
  box-shadow: var(--shadow-paper); font-weight: 600; font-size: 15px;
  transition: transform .3s var(--ease), box-shadow .3s, opacity .2s;
}
.book__btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.book__btn:disabled { opacity: .35; cursor: default; }
.book__status { font: 500 12px var(--f-mono); letter-spacing: .1em; color: var(--ink-3); text-transform: uppercase; }
.book__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.book__tab {
  border: 0; cursor: pointer; padding: 9px 12px 8px; border-radius: 6px 6px 0 0; min-height: 40px;
  background: var(--lilac); color: var(--purple-deep); font: 600 12px/1 var(--f-mono); letter-spacing: .06em;
  transition: background .2s, color .2s, transform .3s var(--ease);
}
.book__tab:hover { transform: translateY(-2px); }
.book__tab[aria-current="true"] { background: var(--purple); color: #fff; }

/* single-page (mobile) mode */
.book.is-single .book__spread { grid-template-columns: 1fr; }
.book.is-single .book__spread::after { display: none; }
.book.is-single .book__page--left { border: 0; }
.book.is-single .book__page.is-out-next { animation: pageOutNext .45s var(--ease) both; }
.book.is-single .book__page.is-in-next { animation: pageInNext .5s var(--ease) both; }
.book.is-single .book__page.is-in-prev { animation: pageInPrev .5s var(--ease) both; }
@keyframes pageInNext { from { opacity: 0; transform: translateX(40px) rotate(1.5deg); } }
@keyframes pageInPrev { from { opacity: 0; transform: translateX(-40px) rotate(-1.5deg); } }

/* page contents used by spreads */
.pg-photo { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 22px; position: relative; }
.pg-photo .polaroid { width: min(86%, 400px); }
.pg-photo .polaroid + .polaroid { width: 52%; position: absolute; right: 4%; bottom: 6%; --rot: 5deg; }
.pg-notes h3 { font-size: clamp(28px, 3vw, 42px); letter-spacing: -0.045em; margin: 12px 0 16px; }
.pg-notes .pg-body { font-size: 17px; color: var(--ink-2); }
.pg-notes .pg-sub { font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--purple); margin: 26px 0 8px; display: block; }
.pg-margin { position: absolute; right: 26px; top: 26px; max-width: 150px; text-align: right; }
.pg-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-right: 150px; }

/* Spread dialog */
.spread-dialog {
  border: 0; padding: 0; background: transparent; width: min(1120px, calc(100vw - 32px)); max-width: none;
  max-height: calc(100dvh - 32px); overflow: visible;
}
.spread-dialog::backdrop { background: rgba(37,33,44,.62); backdrop-filter: blur(3px); }
.spread-dialog[open] { animation: dlgIn .5s var(--ease) both; }
@keyframes dlgIn { from { opacity: 0; transform: translateY(24px) scale(.97); } }
.spread-dialog__close {
  position: absolute; top: -18px; right: -10px; z-index: 10; width: 48px; height: 48px; border-radius: 50%;
  background: var(--ink); color: var(--ivory); border: 0; cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.5);
}
.spread-dialog .book__status { color: rgba(248,246,242,.8); }
.spread-dialog .book__spread { --book-h: min(640px, calc(100dvh - 150px)); max-height: calc(100dvh - 150px); }
.spread-dialog .book__page { overflow-y: auto; }

/* =====================================================================
   NOTES — journal cards
   ===================================================================== */
.notes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 28px; }
.note-card { position: relative; min-height: 260px; display: flex; flex-direction: column; padding: 26px 22px 22px 52px; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.note-card:nth-child(4n+1) { --rot: -1.4deg; }
.note-card:nth-child(4n+2) { --rot: 1deg; margin-top: 26px; }
.note-card:nth-child(4n+3) { --rot: -.6deg; }
.note-card:nth-child(4n+4) { --rot: 1.6deg; margin-top: 18px; }
.note-card:hover { transform: rotate(0) translateY(-8px); box-shadow: var(--shadow-lift); }
.note-card__no { font: 500 11px/1 var(--f-mono); color: var(--ink-3); letter-spacing: .1em; }
.note-card__topic { font-size: 21px; letter-spacing: -0.03em; line-height: 1.12; margin: 12px 0 14px; }
.note-card__prompt { font-family: var(--f-hand); color: var(--purple); font-size: 17px; line-height: 1.38; flex: 1; }
.note-card__body { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); margin: 14px 0 0; }
.note-card__more { margin-top: 16px; align-self: flex-start; }
.note-card { min-height: 0; }
.note-card__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; }
.note-card .stamp { --r: -4deg; }
.note-card__soon { font: 500 12px var(--f-mono); color: var(--ink-3); }
.note-card .tape { --r: 2deg; top: -12px; left: 40%; width: 70px; }

/* =====================================================================
   CREATING & SHARING — media clippings
   ===================================================================== */
.media { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 28px; align-items: start; }
.clipping { position: relative; display: block; text-decoration: none; color: inherit; background: var(--paper) var(--noise); padding: 12px 12px 18px; box-shadow: var(--shadow-paper); transform: rotate(var(--rot, 0deg)); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
a.clipping:hover { transform: rotate(0) translateY(-6px); box-shadow: var(--shadow-lift); }
.clipping__thumb { position: relative; }
.clipping__thumb img { width: 100%; aspect-ratio: var(--ar); object-fit: cover; }
.clipping__play { position: absolute; z-index: 2; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(37,33,44,.82); display: grid; place-items: center; }
.clipping__play::before { content: ""; border-left: 15px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }
.clipping__platform { position: absolute; z-index: 3; top: -12px; left: 14px; padding: 6px 10px 5px; font: 600 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #fff; transform: rotate(-3deg); box-shadow: 0 2px 4px rgba(0,0,0,.15); }
.clipping--youtube .clipping__platform { background: #B3261E; }
.clipping--tiktok .clipping__platform { background: var(--ink); }
.clipping__title { font-size: 18px; letter-spacing: -0.02em; line-height: 1.2; margin: 14px 2px 6px; }
.clipping__desc { font-size: 14.5px; color: var(--ink-2); margin: 0 2px; }
.clipping--youtube { --ar: 16/9; }
.clipping--tiktok { --ar: 9/16; }
.media > .clipping:nth-of-type(1) { grid-column: 1 / span 6; --rot: -1.2deg; }
.media > .clipping:nth-of-type(2) { grid-column: 7 / span 3; --rot: 2deg; margin-top: 36px; }
.media > .clipping:nth-of-type(3) { grid-column: 10 / span 3; --rot: -1.5deg; }
.media > .clipping:nth-of-type(4) { grid-column: 2 / span 6; --rot: 1.2deg; margin-top: 8px; }
.media > .clipping:nth-of-type(5) { grid-column: 9 / span 3; --rot: -2deg; margin-top: -40px; }
.media > .clipping:nth-of-type(n+6) { grid-column: span 4; }
.media__profiles { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 48px; align-items: center; }

/* =====================================================================
   ABOUT PREVIEW (home)
   ===================================================================== */
.about-prev { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 56px 80px; align-items: center; }
.about-prev__photos { position: relative; aspect-ratio: 1 / 1.02; }
.about-prev__photos .polaroid { position: absolute; }
.about-prev__photos .p1 { width: 45%; left: 0; top: 0; --rot: -5deg; --ar: 3/4; z-index: 2; }
.about-prev__photos .p2 { width: 42%; right: 0; top: 4%; --rot: 4deg; --ar: 3/4; z-index: 1; }
.about-prev__photos .p3 { width: 36%; left: 22%; bottom: 0; --rot: -1.5deg; --ar: 4/5; z-index: 3; }
.about-prev__photos .annot { position: absolute; right: 4%; bottom: 14%; z-index: 4; max-width: 150px; }
.about-prev__text p { font-size: clamp(18px, 1.4vw, 20px); color: var(--ink-2); }
.about-prev__text p.big { font-size: clamp(22px, 2vw, 28px); color: var(--ink); line-height: 1.35; letter-spacing: -0.015em; }
.values-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 34px; padding: 0; list-style: none; }
.values-row li { font-family: var(--f-hand); font-size: 18px; padding: 6px 14px 4px; border: 1.5px solid var(--ink); border-radius: 999px; transform: rotate(var(--r, 0deg)); }
.values-row li:nth-child(odd) { --r: -2deg; }
.values-row li:nth-child(even) { --r: 1.5deg; background: var(--lilac); border-color: var(--lilac); color: var(--purple-deep); }

/* =====================================================================
   LET'S TALK
   ===================================================================== */
.talk { position: relative; padding: clamp(100px, 13vw, 190px) 0 60px; text-align: center; overflow: hidden; }
.talk__title { font-size: clamp(54px, 9.4vw, 156px); letter-spacing: -0.065em; line-height: .9; margin: 22px auto 30px; max-width: 12ch; }
.talk__title .serif { color: var(--purple); font-size: 1.04em; }
.talk__copy { font-size: clamp(18px, 1.5vw, 21px); color: var(--ink-2); max-width: 44ch; margin: 0 auto 48px; }
.talk__actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; list-style: none; margin: 0; padding: 0; }
.ticket {
  position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 56px;
  padding: 14px 22px; text-decoration: none; background: var(--paper) var(--noise); box-shadow: var(--shadow-paper);
  font-weight: 600; transform: rotate(var(--r, 0deg)); transition: transform .4s var(--ease), box-shadow .4s, background .2s, color .2s;
  -webkit-mask: radial-gradient(circle 7px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 7px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
}
.ticket small { font: 500 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); border-left: 1.5px dashed var(--rule); padding-left: 12px; }
.ticket:hover { transform: rotate(0) translateY(-4px); background-color: var(--lilac); }
.ticket--primary { background-color: var(--purple); color: #fff; }
.ticket--primary small { color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.4); }
.ticket--primary:hover { background-color: var(--ink); }
.talk__actions li:nth-child(1) .ticket { --r: -2deg; }
.talk__actions li:nth-child(2) .ticket { --r: 1.5deg; }
.talk__actions li:nth-child(3) .ticket { --r: -1deg; }
.talk__actions li:nth-child(4) .ticket { --r: 2deg; }
.talk__actions li:nth-child(5) .ticket { --r: -1.5deg; }
.talk__envelope { position: absolute; left: 6%; top: 18%; --rot: -8deg; width: 140px; }
.talk__stamp { position: absolute; right: 8%; top: 22%; }

.footer { padding: 36px 0 44px; border-top: 1.5px dashed var(--rule); margin-top: 80px; }
.footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px; font-size: 14px; color: var(--ink-3); }
.footer__end { font-family: var(--f-hand); font-size: 18px; color: var(--purple); }
.footer nav ul { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; margin: 0; padding: 0; }
.footer nav a { text-decoration: none; color: var(--ink-2); font-weight: 500; }
.footer nav a:hover { color: var(--purple); }

/* =====================================================================
   INNER PAGES
   ===================================================================== */
.page-head { position: relative; padding: clamp(140px, 16vw, 210px) 0 clamp(56px, 7vw, 100px); }
.page-head__title { font-size: clamp(54px, 9vw, 150px); letter-spacing: -0.065em; line-height: .88; margin: 22px 0 28px; max-width: 13ch; }
.page-head__title .serif { color: var(--purple); }
.page-head__lede { font-size: clamp(19px, 1.6vw, 23px); color: var(--ink-2); max-width: 44ch; }
.page-head__decor { position: absolute; right: var(--gutter); top: 150px; }

.process { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: step; }
.process li { list-style: none; padding: 26px 22px; }
.process li:nth-child(odd) { --rot: -1deg; }
.process li:nth-child(even) { --rot: 1deg; margin-top: 20px; }
.process h3 { font-size: 22px; letter-spacing: -0.03em; margin: 10px 0 10px; }
.process p { font-size: 15.5px; color: var(--ink-2); }
.process ol { margin: 0; padding: 0; display: contents; }

/* timeline */
.timeline { position: relative; list-style: none; margin: 0; padding: 0 0 0 36px; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: repeating-linear-gradient(180deg, var(--purple) 0 6px, transparent 6px 12px); opacity: .5; }
.timeline li { position: relative; padding: 0 0 34px; }
.timeline li::before { content: ""; position: absolute; left: -33px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--ivory); border: 2px solid var(--purple); }
.timeline li.mark::before { background: var(--purple); box-shadow: 0 0 0 4px var(--lilac); }
.timeline__when { font: 500 12px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--purple); }
.timeline__what { font-size: clamp(19px, 1.6vw, 23px); font-weight: 650; letter-spacing: -0.025em; margin: 4px 0; line-height: 1.25; }
.timeline__detail { font-size: 15.5px; color: var(--ink-2); max-width: 52ch; }

.two-col { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 80px; align-items: start; }
.cards-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.value-card { padding: 26px 22px; }
.value-card:nth-child(odd) { --rot: -1.2deg; }
.value-card:nth-child(even) { --rot: 1deg; }
.value-card h3 { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: 38px; letter-spacing: -0.02em; color: var(--purple); margin-bottom: 10px; }
.value-card p { font-size: 15.5px; color: var(--ink-2); }

.diary-page h3 { font-size: clamp(30px, 3.2vw, 46px); letter-spacing: -0.045em; margin: 12px 0 18px; }
.diary-page p { font-size: 17px; color: var(--ink-2); }
.diary-page .chap { font-family: var(--f-serif); font-style: italic; font-size: 30px; color: var(--purple); }
.diary-photo { display: grid; place-items: center; height: 100%; }
.diary-photo .polaroid { width: min(78%, 360px); }

.tag-list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.tag-list li { padding: 8px 14px; background: var(--paper) var(--noise); box-shadow: var(--shadow-paper); font-size: 15px; font-weight: 500; transform: rotate(var(--r, 0)); }
.tag-list li:nth-child(odd) { --r: -1.5deg; }
.tag-list li:nth-child(even) { --r: 1.2deg; }

.contact-letter { max-width: 760px; margin: 0 auto; padding: clamp(32px, 5vw, 64px); --rot: -.6deg; }
.contact-letter p { font-size: 18px; color: var(--ink-2); }
.contact-letter .sign { font-family: var(--f-hand); font-size: 32px; color: var(--purple); margin-top: 18px; }
.contact-list { list-style: none; margin: 32px 0 0; padding: 0; }
.contact-list li { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 16px 0; border-top: 1.5px dashed var(--rule); align-items: center; }
.contact-list li:last-child { border-bottom: 1.5px dashed var(--rule); }
.contact-list .label { margin: 0; }
.contact-list a { font-size: clamp(17px, 1.6vw, 21px); }

/* =====================================================================
   CASE STUDY
   ===================================================================== */
.cs-head { padding-block: clamp(140px, 15vw, 200px) 48px; }
.cs-head__title { font-size: clamp(52px, 8.4vw, 136px); letter-spacing: -0.065em; line-height: .9; margin: 18px 0 24px; max-width: 14ch; }
.cs-head__tagline { font-size: clamp(19px, 1.6vw, 23px); color: var(--ink-2); max-width: 52ch; }
.cs-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 44px; border-top: 1.5px solid var(--ink); }
.cs-facts div { padding: 16px 18px 16px 0; border-right: 1px solid var(--rule); }
.cs-facts div + div { padding-left: 18px; }
.cs-facts div:last-child { border-right: 0; }
.cs-facts dt { font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.cs-facts dd { margin: 0; font-weight: 600; font-size: 16px; }
.cs-cover { margin: 24px 0 0; }
.cs-cover img { width: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: top center; }
.cs-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 72px; padding-top: 88px; }
.cs-toc { position: sticky; top: 100px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; padding: 4px 4px 4px 2px; }
.cs-toc ol { list-style: none; margin: 14px 0 0; padding: 0; }
.cs-toc a {
  position: relative; display: flex; gap: 10px; padding: 7px 10px; text-decoration: none; font-size: 14.5px; color: var(--ink-2); border-radius: 0 6px 6px 0;
  border-left: 2px solid var(--rule); transition: color .2s, background .2s, border-color .2s;
}
.cs-toc a span { font: 500 11px/1.9 var(--f-mono); color: var(--ink-3); }
.cs-toc a:hover { color: var(--purple); }
.cs-toc a.is-active { color: var(--purple-deep); background: var(--lilac); border-color: var(--purple); font-weight: 600; }
.cs-toc a.is-active span { color: var(--purple); }
.cs-section { padding: 0 0 72px; margin-bottom: 72px; border-bottom: 1.5px dashed var(--rule); max-width: 820px; scroll-margin-top: 100px; }
.cs-section:last-of-type { border-bottom: 0; }
.cs-section__no { font: 500 12px/1 var(--f-mono); letter-spacing: .12em; color: var(--purple); }
.cs-section h2 { font-size: clamp(32px, 3.6vw, 52px); letter-spacing: -0.045em; margin: 12px 0 24px; }
.cs-section p { font-size: 18px; color: var(--ink-2); max-width: 64ch; }
.cs-quote { position: relative; margin: 32px 0; padding: 28px 32px 28px 36px; --rot: -.8deg; }
.cs-quote p { font-family: var(--f-serif); font-style: italic; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.22; color: var(--ink); margin: 0; }
.cs-quote cite { display: block; font: 500 11px/1.4 var(--f-mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-top: 14px; }
.cs-list { list-style: none; padding: 0; margin: 8px 0 0; counter-reset: li; }
.cs-list li { position: relative; padding: 12px 0 12px 44px; border-top: 1px solid var(--rule); font-size: 17.5px; color: var(--ink-2); counter-increment: li; }
.cs-list li::before { content: counter(li, decimal-leading-zero); position: absolute; left: 0; top: 15px; font: 500 12px var(--f-mono); color: var(--purple); }
.cs-defs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 8px 0 24px; }
.cs-def { padding: 22px 22px 24px; background: var(--paper) var(--noise); box-shadow: 0 1px 2px rgba(37,33,44,.06), 0 6px 14px -8px rgba(37,33,44,.2); border-top: 3px solid var(--lilac); }
.cs-def:nth-child(3n+2) { border-top-color: var(--pink); }
.cs-def:nth-child(3n+3) { border-top-color: var(--purple); }
.cs-def h3 { font-size: 19px; letter-spacing: -0.025em; margin-bottom: 8px; line-height: 1.2; }
.cs-def p { font-size: 15.5px !important; margin: 0; }
.cs-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; list-style: none; margin: 8px 0 24px; padding: 0; }
.cs-flow li { position: relative; flex: 1 1 140px; padding: 16px 16px 18px; background: var(--lilac); border-radius: 4px; font-size: 15px; font-weight: 600; color: var(--purple-deep); line-height: 1.3; }
.cs-flow li span { display: block; font: 500 10px/1 var(--f-mono); letter-spacing: .1em; color: var(--purple); margin-bottom: 8px; }
.cs-images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 24px; }
.cs-images figure { margin: 0; }
.cs-images figure:first-child:nth-last-child(odd), .cs-images figure.full { grid-column: 1 / -1; }
.cs-images img { width: 100%; height: auto; background: var(--paper-2); }
.cs-images figcaption { font-family: var(--f-hand); font-size: 16px; color: var(--ink-2); margin-top: 10px; }
.cs-images .ph { --ar: 16/10; }
.cs-next { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 64px 0 0; border-top: 1.5px solid var(--ink); margin-top: 40px; }
.cs-next a { text-decoration: none; display: block; padding: 22px 0; }
.cs-next a:last-child { text-align: right; }
.cs-next .label { display: block; margin-bottom: 10px; }
.cs-next strong { font-size: clamp(26px, 3vw, 44px); letter-spacing: -0.045em; line-height: 1; display: block; transition: color .2s; }
.cs-next a:hover strong { color: var(--purple); }
.cs-note { margin-top: 28px; font-size: 15px; color: var(--ink-3); }

/* chapter-opening leaf on case studies */
.chapter-leaf {
  position: fixed; inset: 0; z-index: 700; pointer-events: none; perspective: 2400px;
}
.chapter-leaf__page {
  position: absolute; inset: 0; transform-origin: left center; background: var(--paper) var(--noise), var(--paper);
  box-shadow: 0 0 60px rgba(37,33,44,.25);
  display: grid; place-items: center;
  transition: transform 1s cubic-bezier(.6,.02,.25,1), opacity .4s ease .7s;
}
.chapter-leaf__page span { font-family: var(--f-serif); font-style: italic; font-size: clamp(36px, 6vw, 80px); color: var(--purple); }
.chapter-leaf.is-turning .chapter-leaf__page { transform: rotateY(-100deg); opacity: 0; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1180px) {
  .bookmarks { display: none; }
  .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-stamp { display: none; }
  .cards-4, .process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  .cs-layout { grid-template-columns: 1fr; gap: 0; padding-top: 56px; }
  .cs-toc { position: static; max-height: none; margin-bottom: 48px; padding: 20px; background: var(--paper) var(--noise); box-shadow: var(--shadow-paper); }
  .cs-toc ol { columns: 2; column-gap: 16px; }
  .cs-toc li { break-inside: avoid; }
}

@media (max-width: 900px) {
  body { font-size: 17px; }
  /* nav */
  .tabnav { padding: 6px 6px 6px 12px; top: 12px; }
  .tabnav__list, .tabnav__cta { display: none; }
  .tabnav__mark { border-right: 0; }
  .tabnav__toggle {
    display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; min-height: 44px;
    background: var(--ink); color: var(--ivory); border-radius: 9px; padding: 10px 14px; font: 600 15px/1 var(--f-sans);
  }
  .tabnav__toggle i { display: block; width: 16px; height: 2px; background: currentColor; position: relative; }
  .tabnav__toggle i::before, .tabnav__toggle i::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; }
  .tabnav__toggle i::before { top: -5px; }
  .tabnav__toggle i::after { top: 5px; width: 70%; }

  /* hero recomposition */
  .hero {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "a b" "c c" "e e";
    padding: 96px var(--gutter) 64px; min-height: auto; gap: 0 16px;
  }
  .hero__side { display: contents; }
  .hero__center { grid-area: c; max-width: none; padding: 30px 0 34px; }
  .c-portrait { grid-area: a; justify-self: end; width: min(42vw, 210px); margin: 0 6px 0 0; }
  .c-speaking { grid-area: b; justify-self: start; align-self: center; width: min(46vw, 260px); margin: 22px 0 0 -10px; }
  .c-note     { grid-area: d; justify-self: end; align-self: start; width: min(44vw, 210px); margin: 10px 4px 0 0; font-size: 15px; padding: 20px 14px 16px; }
  .c-candid   { grid-area: e; justify-self: center; width: min(40vw, 190px); margin: 0; }
  .hero__name { font-size: clamp(60px, 19vw, 150px); }
  .c-annot--hi, .c-stamp { display: none; }
  .hero__kicker { justify-content: center; text-align: center; flex-wrap: wrap; font-size: 11px; }

  .chapter__head, .impact__intro, .two-col, .about-prev { grid-template-columns: 1fr; }
  .chapter__num { font-size: 120px; top: 30px; }
  .pcard, .pcard--right { grid-template-columns: 1fr; gap: 28px; }
  .pcard--right .pcard__stage { order: 0; }
  .themes { grid-template-columns: 1fr; gap: 28px; }
  .theme:nth-child(n) { margin-top: 0; }
  .stories { grid-template-columns: 1fr 1fr; gap: 44px 20px; }
  .story-card:nth-child(n) { grid-column: auto; margin-top: 0; }
  .story-card:nth-child(1) { grid-column: 1 / -1; }
  .media { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 18px; }
  .media > .clipping:nth-of-type(n) { grid-column: auto; margin-top: 0; }
  .media > .clipping--youtube:nth-of-type(n) { grid-column: 1 / -1; }
  .about-prev__photos { max-width: 520px; width: 100%; margin: 0 auto; }
  .talk__envelope, .talk__stamp { display: none; }
  .cs-facts { grid-template-columns: 1fr 1fr; }
  .cs-facts div { padding: 14px 12px 14px 0 !important; border-right: 0; border-bottom: 1px solid var(--rule); }
  .cs-facts div:nth-child(even) { padding-left: 12px !important; border-left: 1px solid var(--rule); }
  .page-head__decor { display: none; }
}

@media (max-width: 820px) {
  .spread-dialog { width: calc(100vw - 20px); }
  .spread-dialog__close { top: -14px; right: -4px; }
  .pg-top { padding-right: 0; }
  .pg-margin { position: static; text-align: left; max-width: none; margin-bottom: 8px; }
  .book__spread { --book-h: auto !important; min-height: 0 !important; }
  .book__controls { gap: 8px; }
  .book__btn { padding: 10px 12px; font-size: 14px; white-space: nowrap; }
  .book__status { font-size: 10px; text-align: center; letter-spacing: .06em; }
  .book__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .book__tab { flex: none; }
  .pg-photo .polaroid + .polaroid { position: relative; right: auto; bottom: auto; width: 60%; margin-top: -30px; align-self: flex-end; }
}

@media (max-width: 600px) {
  .notes, .cards-4, .process { grid-template-columns: 1fr; }
  .note-card:nth-child(n), .process li:nth-child(n) { margin-top: 0; }
  .note-card { min-height: 0; }
  .stories { grid-template-columns: 1fr; }
  .cs-defs, .cs-images { grid-template-columns: 1fr; }
  .cs-toc ol { columns: 1; }
  .cs-next { grid-template-columns: 1fr; }
  .cs-next a:last-child { text-align: left; }
  .contact-list li { grid-template-columns: 1fr; gap: 4px; }
  .project__meta { grid-template-columns: 1fr; gap: 0; }
  .project__meta dd { margin-bottom: 8px; }
  .ticket { padding: 12px 18px; }
  .chapter__num { display: none; }
  .impact__close { grid-template-columns: 1fr; }
}

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  html { scroll-behavior: auto; }
  .js [data-reveal], .js [data-reveal="photo"] { opacity: 1; transform: none; clip-path: none; }
  .js .hero__name .line > span, .js .hero__kicker, .js .hero__intro, .js .hero__actions, .js .hero [data-piece] { opacity: 1; transform: rotate(var(--rot, 0deg)); }
  .js .hero__name .line > span, .js .hero__kicker, .js .hero__intro, .js .hero__actions, .js .hero__scroll { transform: none; opacity: 1; }
  .js .hero__name::after { transform: rotate(-1.5deg); }
  .scribble path { stroke-dashoffset: 0; }
  .cover, .chapter-leaf { display: none !important; }
}

/* =====================================================================
   THE BOOK — the whole site as a spiral-bound journal.
   Each top-level block in <main> becomes a page. Scroll to the bottom
   of a page and keep going to turn it around the spiral.
   ===================================================================== */
:root {
  --desk: #E6E0D5;
  --spine: 44px;            /* width of the spiral binding */
  --wire: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='30'%3E%3Cdefs%3E%3ClinearGradient id='w' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F4F2F7'/%3E%3Cstop offset='.45' stop-color='%23A7A3AE'/%3E%3Cstop offset='1' stop-color='%23605C68'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='15' r='5' fill='%2325212C' fill-opacity='.62'/%3E%3Ccircle cx='50' cy='15.6' r='5' fill='none' stroke='%23fff' stroke-opacity='.5' stroke-width='.8'/%3E%3Cpath d='M51 13.4C40 8 16 8 9 13.6c-5 4 4 7.6 18 6.6' fill='none' stroke='%2325212C' stroke-opacity='.22' stroke-width='5' stroke-linecap='round' transform='translate(1.5 2)'/%3E%3Cpath d='M51 13.4C40 8 16 8 9 13.6c-5 4 4 7.6 18 6.6' fill='none' stroke='url(%23w)' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --wire-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='54'%3E%3Cdefs%3E%3ClinearGradient id='w' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23F4F2F7'/%3E%3Cstop offset='.45' stop-color='%23A7A3AE'/%3E%3Cstop offset='1' stop-color='%23605C68'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='15' cy='42' r='4.5' fill='%2325212C' fill-opacity='.62'/%3E%3Cpath d='M13.4 43C8 33 8 13 13.6 7c4-4 7.6 4 6.6 16' fill='none' stroke='%2325212C' stroke-opacity='.22' stroke-width='4.6' stroke-linecap='round' transform='translate(1.5 1.5)'/%3E%3Cpath d='M13.4 43C8 33 8 13 13.6 7c4-4 7.6 4 6.6 16' fill='none' stroke='url(%23w)' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.paged, .paged body { height: 100%; overflow: hidden; }
.paged body { background-color: var(--desk); }
.paged:not(.book-ready) #main { visibility: hidden; }

.book-site { position: fixed; inset: 0; perspective: 2800px; perspective-origin: 0% 50%; }
.book-site::before { /* the stack of pages still to come */
  content: ""; position: absolute; top: 12px; bottom: 10px; left: var(--spine); right: 10px; border-radius: 2px 6px 6px 2px;
  background: var(--paper-2);
  box-shadow: 2px 2px 0 #E2DBCD, 4px 4px 0 #D9D1C1, 6px 6px 0 #CFC6B4, 0 26px 50px -24px rgba(37,33,44,.45);
}
.page {
  position: absolute; top: 8px; bottom: 16px; left: var(--spine); right: 16px;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  background-color: var(--ivory); background-image: var(--noise), var(--fibers);
  border-radius: 2px 6px 6px 2px;
  box-shadow: inset 14px 0 18px -14px rgba(37,33,44,.22), 0 1px 2px rgba(37,33,44,.1);
  transform-origin: left center; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  visibility: hidden;
  transition: transform 1.05s cubic-bezier(.62,.04,.28,1), filter 1.05s ease, visibility 0s linear 1.05s;
  scrollbar-width: thin; scrollbar-color: rgba(121,85,179,.35) transparent;
}
.page:focus { outline: none; }
.page:focus-visible { outline: none; }
.page.is-current, .page.is-next, .page.is-turning { visibility: visible; transition: transform 1.05s cubic-bezier(.62,.04,.28,1), filter 1.05s ease, visibility 0s; }
.page.is-turned { transform: rotateY(-178deg); }
.page.is-turning { filter: brightness(.93); }
.page.no-anim { transition: none !important; }
.page > :first-child:last-child, .page > .hero { min-height: 100%; }

/* chapter title pages: center the heading on its own page */
.page > .page-head:first-child:last-child { display: flex; flex-direction: column; justify-content: center; }
.page > .page-head:first-child:last-child .page-head__decor { top: 50%; transform: translateY(-50%) rotate(var(--rot, 5deg)); }

/* blocks that assumed one long scroll */
.paged .hero { min-height: 100%; }
.paged .impact { margin: 0; }
.paged .impact::before, .paged .impact::after { display: none; }
.paged .footer { margin-top: 40px; }

/* the spiral binding, drawn over the page edges */
.spiral {
  position: fixed; z-index: 450; pointer-events: none;
  top: 14px; bottom: 22px; left: calc(var(--spine) - 46px); width: 64px;
  background: var(--wire) repeat-y 0 0 / 64px 30px;
}

/* page-turn controls */
.book-nav {
  position: fixed; z-index: 460; right: 30px; bottom: 30px;
  display: flex; align-items: center; gap: 4px;
  background: var(--paper) var(--noise); border-radius: 999px; padding: 4px;
  box-shadow: var(--shadow-paper);
}
.book-nav button {
  width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center; color: var(--ink); transition: background .2s, color .2s;
}
.book-nav button:hover:not(:disabled) { background: var(--lilac); color: var(--purple-deep); }
.book-nav button:disabled { opacity: .3; cursor: default; }
.book-nav__sound { border-right: 1.5px dashed var(--rule) !important; border-radius: 50% !important; margin-right: 2px; }
.book-nav__sound[aria-pressed="false"] { color: var(--ink-3); }
.book-nav__folio { font: 500 12px/1 var(--f-mono); letter-spacing: .08em; color: var(--ink-2); min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }
.book-hint {
  position: fixed; z-index: 460; left: 50%; bottom: 30px; transform: translateX(-50%) rotate(-2deg);
  font-family: var(--f-hand); color: var(--purple); font-size: 17px; pointer-events: none;
  opacity: 0; transition: opacity .4s ease;
}
.book-hint.is-shown { opacity: 1; }
.paged .bookmarks { right: 16px; }
.paged .bookmarks a { border-radius: 6px 0 0 6px; }

/* phones: the spiral moves to the top and pages flip upward like a notepad */
@media (max-width: 820px) {
  :root { --spine: 0px; }
  .book-site { perspective-origin: 50% 0%; }
  .book-site::before { top: 36px; left: 8px; right: 6px; bottom: 6px; }
  .page { top: 30px; left: 8px; right: 10px; bottom: 10px; transform-origin: center top; border-radius: 3px 3px 6px 6px; box-shadow: inset 0 14px 18px -14px rgba(37,33,44,.22), 0 1px 2px rgba(37,33,44,.1); }
  .page.is-turned { transform: rotateX(178deg); }
  .spiral { top: 2px; left: 14px; right: 14px; bottom: auto; width: auto; height: 54px; background: var(--wire-top) repeat-x 0 0 / 30px 54px; }
  .paged .tabnav { top: 44px; }
  .book-nav { right: 50%; transform: translateX(50%); bottom: 18px; }
  .book-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .page.is-turned { transform: none; visibility: hidden; }
}

/* ---------- Breathing room inside the book ----------
   Content clears the spiral, margins widen, and type and photos
   step down a size so pages feel less packed. */
.paged .page {
  --gutter: clamp(28px, 4.4vw, 72px);
  --clear: 34px;           /* extra space beside the spiral */
  --max: 1180px;
}
.paged .page .wrap { padding-left: calc(var(--gutter) + var(--clear)); }
.paged .hero { padding: 96px var(--gutter) 48px calc(var(--gutter) + var(--clear)); gap: clamp(16px, 3vw, 48px); max-width: 1480px; }

/* type steps down a notch */
.paged .hero__name { font-size: clamp(46px, 6.3vw, 104px); margin-bottom: 22px; }
.paged .hero__intro { font-size: clamp(17px, 1.22vw, 18px); line-height: 1.6; max-width: 42ch; margin: 6px auto 34px; }
.paged .hero__intro p { margin-bottom: 1em; }
.paged .hero__kicker { margin-bottom: 44px; }
.paged .hero__name { margin-bottom: 30px; }
.paged .chapter__title, .paged .impact__title { font-size: clamp(36px, 5.2vw, 82px); }
.paged .page-head__title { font-size: clamp(46px, 7vw, 116px); }
.paged .chapter__lede, .paged .impact__lede, .paged .page-head__lede { font-size: clamp(16px, 1.25vw, 19px); }
.paged .chapter__num { font-size: clamp(100px, 14vw, 210px); }
.paged .project__name { font-size: clamp(32px, 3.7vw, 58px); }
.paged .talk__title { font-size: clamp(48px, 7.6vw, 124px); }
.paged .theme__word { font-size: clamp(34px, 3.4vw, 52px); }

/* less vertical padding between blocks */
.paged .chapter { padding: clamp(64px, 8vw, 116px) 0; }
.paged .impact { padding: clamp(72px, 9vw, 124px) 0; }
.paged .talk { padding: clamp(80px, 10vw, 140px) 0 48px; }
.paged .page-head { padding: clamp(110px, 12vw, 160px) 0 clamp(40px, 5vw, 72px); }
.paged .chapter__head { margin-bottom: clamp(36px, 5vw, 72px); }
.paged .projects { gap: clamp(72px, 9vw, 130px); }

/* hero collage pieces a little smaller */
.paged .c-portrait { width: clamp(130px, 11vw, 196px); }
.paged .c-speaking { width: clamp(170px, 14.5vw, 256px); }
.paged .c-candid   { width: clamp(130px, 10.5vw, 188px); }
.paged .c-note     { width: clamp(150px, 12vw, 200px); font-size: 15.5px; }

@media (max-width: 900px) {
  .paged .hero { padding: 104px var(--gutter) 56px; }
  .paged .hero__name { font-size: clamp(42px, 12vw, 88px); }
  .paged .hero__kicker { margin-bottom: 30px; }
  .paged .c-portrait { width: min(38vw, 190px); }
  .paged .c-speaking { width: min(42vw, 236px); }
  .paged .c-candid { width: min(36vw, 172px); }
  .paged .c-note { width: min(40vw, 190px); }
}
@media (max-width: 820px) {
  .paged .page { --gutter: 22px; --clear: 0px; }
  .paged .chapter { padding: 56px 0; }
}

/* ---------- Case study: generous margins so the page doesn't run to the edges ---------- */
body[data-page="case"] { --gutter: clamp(24px, 8vw, 128px); --max: 1360px; }
body[data-page="case"] .cs-head { padding-top: clamp(130px, 13vw, 180px); }
body[data-page="case"] .cs-cover { margin-top: 36px; }
body[data-page="case"] .cs-layout { gap: clamp(48px, 6vw, 96px); padding-top: clamp(72px, 8vw, 112px); }
@media (max-width: 600px) {
  body[data-page="case"] { --gutter: 24px; }
}

/* ---------- AI & trust (inside the Impact chapter) ---------- */
.ai-block {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 5vw, 80px);
  margin-top: clamp(64px, 8vw, 110px); padding-top: clamp(48px, 6vw, 80px);
  border-top: 1.5px dashed rgba(248,246,242,.22);
}
.ai-block__title { font-size: clamp(32px, 3.8vw, 56px); letter-spacing: -0.045em; line-height: 1; color: var(--ivory); text-wrap: balance; }
.ai-block__title .serif { color: var(--pink); font-size: 1.08em; }
.ai-block__lede { margin-top: 22px; font-size: clamp(16px, 1.25vw, 18px); color: rgba(248,246,242,.82); max-width: 42ch; }
.ai-path { margin-top: 34px; }
.ai-path__label { display: block; font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(248,246,242,.62); margin-bottom: 12px; }
.ai-path ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ai-path a {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
  border: 1.5px solid rgba(217,169,197,.5); color: var(--ivory); text-decoration: none; font-size: 14.5px; font-weight: 500;
  transition: background .2s, border-color .2s;
}
.ai-path a::after { content: "→"; color: var(--pink); }
.ai-path a:hover { background: rgba(217,169,197,.14); border-color: var(--pink); }
.ai-principles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px; }
.ai-p { padding-top: 18px; border-top: 2px solid var(--pink); }
.ai-p h4 { font-size: clamp(19px, 1.6vw, 23px); letter-spacing: -0.03em; color: var(--ivory); margin-bottom: 10px; line-height: 1.15; }
.ai-p p { font-size: 15.5px; color: rgba(248,246,242,.78); margin: 0; }
.ai-p .ai-p__eg { margin-top: 14px; font-size: 14.5px; color: rgba(248,246,242,.7); }
.ai-p__eg b { display: block; font: 500 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--pink); margin-bottom: 7px; }
@media (max-width: 900px) {
  .ai-block { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ai-principles { grid-template-columns: 1fr; gap: 28px; }
  .ai-path a { border-radius: 14px; }
}

/* ---------- About: AI at the centre ---------- */
.ai-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 36px); }
.ai-col { display: flex; flex-direction: column; gap: 12px; padding: 32px 26px 28px; }
.ai-col:nth-child(1) { --rot: -1deg; }
.ai-col:nth-child(2) { --rot: .8deg; margin-top: 24px; }
.ai-col:nth-child(3) { --rot: -.6deg; margin-top: 10px; }
.ai-col__k { font-family: var(--f-hand); color: var(--purple); font-size: 20px; margin: 0; }
.ai-col h3 { font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.035em; }
.ai-col p { font-size: 16px; color: var(--ink-2); margin: 0; }
.ai-col .ai-col__note { font-family: var(--f-serif); font-style: italic; font-size: 19px; line-height: 1.3; color: var(--ink); border-left: 3px solid var(--pink); padding-left: 14px; }
.ai-col .link { margin-top: auto; align-self: flex-start; padding-top: 8px; }
.ai-milestones { margin-top: clamp(48px, 6vw, 80px); padding: 26px 0 0; border-top: 1.5px solid var(--ink); }
.ai-milestones__k { font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 20px; }
.ai-milestones ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 36px; }
.ai-milestones b { display: block; font-size: 19px; letter-spacing: -0.025em; margin-bottom: 6px; }
.ai-milestones span { font-size: 15.5px; color: var(--ink-2); }
@media (max-width: 900px) {
  .ai-cols, .ai-milestones ul { grid-template-columns: 1fr; }
  .ai-col:nth-child(n) { margin-top: 0; }
}

/* Every book page starts below the floating menu */
.paged .page > .chapter:first-child,
.paged .page > .impact:first-child,
.paged .page > .talk:first-child { padding-top: 128px !important; }
@media (max-width: 820px) {
  .paged .page > .chapter:first-child,
  .paged .page > .impact:first-child,
  .paged .page > .talk:first-child { padding-top: 116px !important; }
}

/* ---------- Contact rows ---------- */
.contact-rows { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.crow { position: relative; display: flex; align-items: center; gap: 10px; border-radius: 12px; transition: background .2s; }
.crow:hover { background: rgba(237,229,247,.6); }
.crow__main {
  flex: 1; min-width: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 14px 14px; border-radius: 12px; text-decoration: none; color: var(--ink);
}
.crow__icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--lilac); color: var(--purple-deep); transition: background .2s, color .2s; }
.crow:hover .crow__icon { background: var(--purple); color: #fff; }
.crow__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.crow__label { font: 500 10.5px/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.crow__value { font-size: clamp(17px, 1.5vw, 20px); font-weight: 650; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.crow__hint { font-size: 14px; color: var(--ink-2); }
.crow__go { color: var(--ink-3); transition: transform .3s var(--ease), color .2s; }
.crow:hover .crow__go { color: var(--purple); transform: translateX(3px); }
.crow__main:focus-visible { outline-offset: 0; }
.crow--primary { background: rgba(237,229,247,.5); }
.crow--primary .crow__icon { background: var(--purple); color: #fff; }
.crow__copy {
  flex: none; margin-right: 12px; min-height: 40px; padding: 8px 16px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--ink); background: var(--paper); font: 600 14px/1 var(--f-sans); color: var(--ink);
  transition: background .2s, color .2s, border-color .2s;
}
.crow__copy:hover { background: var(--ink); color: var(--ivory); }
.crow__copy.is-done { background: var(--purple); border-color: var(--purple); color: #fff; }
@media (max-width: 600px) {
  .crow { flex-wrap: wrap; }
  .crow__main { flex: 1 1 100%; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; padding: 12px 10px; }
  .crow__icon { width: 40px; height: 40px; }
  .crow__copy { margin: -4px 0 12px 62px; }
}

/* Media: vertical clippings (Shorts, TikTok) sit in an even row */
.media { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 36px 22px; }
@media (max-width: 1100px) { .media { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
.media > .clipping:nth-of-type(n) { grid-column: auto !important; margin-top: 0 !important; }
.media > .clipping:nth-of-type(odd) { --rot: -1.4deg; }
.media > .clipping:nth-of-type(even) { --rot: 1.6deg; margin-top: 22px !important; }
.media > .clipping:not(.is-vertical) { grid-column: span 2 !important; }
.clipping.is-vertical { --ar: 9/16; }
.clipping__series { margin: 14px 2px -8px; font: 500 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--purple); }
.clipping--youtube .clipping__platform { background: #B3261E; }
@media (max-width: 600px) {
  .media { grid-template-columns: 1fr 1fr !important; gap: 28px 16px; }
  .media > .clipping:nth-of-type(even) { margin-top: 16px !important; }
}

.clipping.is-embed .clipping__thumb { aspect-ratio: 9 / 16; background: #111; overflow: hidden; }
.clipping.is-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.clipping.is-embed .clipping__series { margin-bottom: 0; }
.clipping__out { margin: 12px 2px 0; font-size: 15px; }

.tt-poster {
  position: relative; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer; display: block;
  background: radial-gradient(120% 70% at 20% 10%, rgba(121,85,179,.55), transparent 60%),
              radial-gradient(90% 60% at 90% 90%, rgba(217,169,197,.45), transparent 60%), #1E1A24;
  background-size: cover; background-position: center; color: #fff;
}
.tt-poster__note { position: absolute; top: 14px; right: 16px; font-size: 26px; opacity: .55; }
.tt-poster .clipping__play { transition: transform .3s var(--ease), background .2s; }
.tt-poster:hover .clipping__play { transform: scale(1.08); background: var(--purple); }
.tt-poster__label { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; opacity: .8; }

.tt-poster[style*="background-image"] { background-size: cover; background-position: center; }
.tt-poster[style*="background-image"] .tt-poster__note, .tt-poster[style*="background-image"] .tt-poster__label { display: none; }

/* Media: a stacked pile that fans out on hover (desktop with a mouse only) */
@media (hover: hover) and (pointer: fine) and (min-width: 1001px) and (prefers-reduced-motion: no-preference) {
  .media {
    --cw: clamp(150px, 13.5vw, 184px); --step: calc(var(--cw) + 24px);
    display: block !important; position: relative; height: calc(var(--cw) * 16 / 9 + 210px); margin-top: 56px;
  }
  .media > .clipping {
    position: absolute !important; top: 0; left: 50%; width: var(--cw); margin: 0 !important;
    transform: translateX(-50%) translateX(calc((var(--i) - var(--mid)) * 22px)) translateY(calc(var(--i) * 5px)) rotate(calc((var(--i) - var(--mid)) * 6deg)) !important;
    z-index: calc(10 - var(--i));
    transition: transform .7s var(--ease), box-shadow .4s var(--ease), opacity .9s ease !important;
    transition-delay: calc(var(--i) * 35ms) !important;
  }
  .media:hover > .clipping, .media:focus-within > .clipping {
    transform: translateX(-50%) translateX(calc((var(--i) - var(--mid)) * var(--step))) rotate(calc((var(--i) - var(--mid)) * 1.5deg)) !important;
  }
  .media:hover > .clipping:hover, .media:focus-within > .clipping:focus-within {
    transform: translateX(-50%) translateX(calc((var(--i) - var(--mid)) * var(--step))) translateY(-12px) rotate(0deg) !important;
    z-index: 20; box-shadow: var(--shadow-lift); transition-delay: 0s !important;
  }
  .media::before {
    content: "hover to spread them out"; position: absolute; left: 50%; top: -40px; z-index: 30;
    transform: translateX(-50%) rotate(-2deg); font-family: var(--f-hand); font-size: 18px; color: var(--purple);
    pointer-events: none; transition: opacity .3s ease;
  }
  .media:hover::before, .media:focus-within::before { opacity: 0; }
}

.about-question__q { max-width: 900px; margin: 0 auto; padding: clamp(32px, 4vw, 52px); --rot: -.6deg; }
.about-question__q p { font-size: clamp(26px, 3vw, 42px); }
.page-head__lede strong { color: var(--ink); font-weight: 650; }

/* Learning in public: two groups in one chapter */
.share-group { margin-top: clamp(40px, 5vw, 72px); }
.share-group + .share-group { margin-top: clamp(80px, 9vw, 130px); }
.share-group__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px;
  padding-top: 22px; border-top: 1.5px dashed var(--rule); margin-bottom: clamp(36px, 4vw, 56px);
}
.share-group__head h3 { font-size: clamp(26px, 2.6vw, 38px); letter-spacing: -0.04em; }
.share-group__head p { font-size: 16px; color: var(--ink-2); max-width: 46ch; margin: 0; }
@media (hover: hover) and (pointer: fine) and (min-width: 1001px) and (prefers-reduced-motion: no-preference) {
  .share-group .media { margin-top: 80px; }
}

/* Notes: quote on the card, full entry in a spread */
.note-card__quote { margin: 14px 0 0; font-family: var(--f-serif); font-style: italic; font-size: 18px; line-height: 1.3; color: var(--ink); }
.note-card__open {
  position: static; align-self: flex-start; margin-top: auto; padding: 14px 0 2px; background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; font: 600 15px var(--f-sans); color: var(--purple);
}
.note-card__open::after { content: ""; position: absolute; inset: 0; z-index: 5; }
.note-card__open .arr { transition: transform .35s var(--ease); display: inline-block; }
.note-card:hover .note-card__open .arr { transform: translateX(4px); }
.note-card { cursor: pointer; }
.note-card__prompt { flex: none; }
.note-pg h3 { margin-top: 18px; }
.note-pg__q { font-family: var(--f-hand); color: var(--purple); font-size: 20px; line-height: 1.35; margin: 0 0 24px; }
.note-pg__pull { font-family: var(--f-serif); font-style: italic; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.25; color: var(--ink); border-left: 3px solid var(--pink); padding-left: 18px; margin: 0; }
.note-pg--body .pg-body { font-size: 16.5px; line-height: 1.65; }

/* ---------- Mascot ---------- */
.mascot { display: block; width: clamp(180px, 17vw, 240px); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.mascot svg { width: 100%; height: auto; overflow: visible; display: block; }
.mascot:focus-visible { outline-offset: 6px; border-radius: 12px; }
.m-dancer { transform-box: view-box; transform-origin: 145px 345px; animation: m-sway 1.8s ease-in-out infinite; }
.m-kick { transform-box: view-box; transform-origin: 170px 245px; animation: m-kick .9s ease-in-out infinite alternate; }
.m-sign { transform-box: view-box; transform-origin: 140px 186px; animation: m-wave 1.8s ease-in-out infinite; }
.m-braid { transform-box: view-box; transform-origin: 174px 100px; animation: m-wave 1.8s ease-in-out infinite reverse; }
.m-note { transform-box: view-box; animation: m-note 2.6s ease-in-out infinite; }
.m-note--2 { animation-delay: 1.1s; }
.m-shadow { transform-box: view-box; transform-origin: 160px 354px; animation: m-shadow 1.8s ease-in-out infinite; }
.mascot:hover .m-dancer, .mascot:focus-visible .m-dancer, .mascot:hover .m-sign, .mascot:hover .m-shadow, .mascot:hover .m-braid { animation-duration: .9s; }
.mascot:hover .m-kick { animation-duration: .45s; }
@keyframes m-sway { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-6px); } }
@keyframes m-kick { from { transform: rotate(-6deg); } to { transform: rotate(12deg); } }
@keyframes m-wave { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(6deg); } }
@keyframes m-note { 0% { transform: translate(0, 10px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(10px, -26px); opacity: 0; } }
@keyframes m-shadow { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.85); } }

.talk__mascot, .talk .mascot { position: absolute; right: max(3.5%, calc(50% - 660px)); top: 50%; transform: translateY(-46%); width: clamp(160px, 12.5vw, 205px); }
.talk { position: relative; }
.page-head .contact-mascot.mascot { position: absolute; top: 50%; right: calc(var(--gutter) + 2vw); transform: translateY(-48%); width: clamp(200px, 18vw, 260px); }
@media (max-width: 1100px) {
  .talk .mascot { position: static; transform: none; width: 190px; margin: 0 auto 36px; }
}
@media (max-width: 900px) {
  .page-head .contact-mascot.mascot { position: static; transform: none; width: 180px; margin: 32px auto 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mascot * { animation: none !important; }
}

/* Story spreads: long reflections stay inside the page */
.spread-dialog .book__spread { height: min(760px, calc(100dvh - 130px)); }
.spread-dialog .book__page { max-height: 100%; overflow-y: auto; scrollbar-width: thin; }
.spread-dialog .pg-notes .pg-body { font-size: 15.5px; line-height: 1.55; margin-bottom: .7em; }
.spread-dialog .pg-notes h3 { margin-bottom: 12px; }
.spread-dialog .pg-notes .pg-sub { margin: 18px 0 6px; }
@media (max-width: 820px) { .spread-dialog .book__spread { height: auto; max-height: calc(100dvh - 150px); } }

/* Story spread: photo + intro on the left, reflection on the right */
.pg-photo--story { justify-content: center; gap: 26px; }
.pg-photo--story .polaroid { width: min(78%, 360px); }
.pg-photo--story .polaroid > img, .pg-photo--story .polaroid > .ph { max-height: 330px; }
.pg-intro { max-width: 40ch; margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); text-align: left; }
.spread-dialog .pg-notes .pg-sub:first-of-type { margin-top: 6px; }
@media (max-width: 820px) {
  .pg-photo--story .polaroid > img, .pg-photo--story .polaroid > .ph { max-height: 46vh; }
}
@media (min-width: 821px) and (max-height: 820px) {
  .spread-dialog .book__page { padding: 26px 34px; }
  .spread-dialog .pg-notes h3 { font-size: clamp(24px, 2.2vw, 32px); margin: 8px 0 8px; }
  .spread-dialog .pg-notes .pg-body { font-size: 14.5px; line-height: 1.5; margin-bottom: .55em; }
  .spread-dialog .pg-notes .pg-sub { margin: 12px 0 4px; }
  .spread-dialog .pg-top { margin-bottom: 0; }
  .pg-intro { font-size: 14.5px; line-height: 1.5; }
  .pg-photo--story { gap: 18px; }
  .pg-photo--story .polaroid > img, .pg-photo--story .polaroid > .ph { max-height: 250px; }
}

/* A full mockup scene fills the stage edge to edge */
.pcard__mock.is-scene { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; border-radius: 10px; z-index: 1; }
.pcard__stage:hover .pcard__mock.is-scene, .pcard__stage:focus-visible .pcard__mock.is-scene { transform: none; filter: brightness(1.04) contrast(1.03); }
.pcard__stage:has(.is-scene) .pcard__no { color: var(--ink-2); z-index: 3; }

.pcard--dark .pcard__stage .pcard__no { color: rgba(248,246,242,.75) !important; }

/* Case study additions */
.cs-lede { font-family: var(--f-serif); font-style: italic; font-size: clamp(24px, 2.4vw, 32px) !important; line-height: 1.22; color: var(--ink) !important; margin: -6px 0 26px; max-width: 30ch !important; text-wrap: balance; }
.cs-head__intro { font-size: 17px; color: var(--ink-2); max-width: 60ch; margin-top: 14px; }
.cs-head__status { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 8px 14px; border-radius: 999px; background: var(--lilac); color: var(--purple-deep); font: 500 13px/1.3 var(--f-sans); }
.cs-head__status span { width: 8px; height: 8px; border-radius: 50%; background: #2E9E6A; box-shadow: 0 0 0 4px rgba(46,158,106,.18); }
.cs-head__status--concept span { background: var(--purple); box-shadow: 0 0 0 4px rgba(121,85,179,.18); }
.cs-def__s { display: inline-block; margin-bottom: 10px; padding: 4px 8px; border-radius: 4px; background: var(--lilac); color: var(--purple-deep); font: 600 10.5px/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.cs-def__x { margin-top: 12px !important; padding-top: 10px; border-top: 1px dashed var(--rule); font-size: 14.5px !important; color: var(--ink) !important; }
.cs-def__x b { display: block; font: 600 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--purple); margin-bottom: 6px; }
.cs-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 12px 0 28px; border-top: 1.5px solid var(--ink); }
.cs-stat { padding: 18px 16px 18px 0; border-right: 1px solid var(--rule); }
.cs-stat + .cs-stat { padding-left: 16px; }
.cs-stat:last-child { border-right: 0; }
.cs-stat strong { display: block; font-size: clamp(30px, 3vw, 42px); letter-spacing: -0.04em; line-height: 1; color: var(--purple); font-variant-numeric: tabular-nums; }
.cs-stat p { font-size: 14.5px !important; margin: 10px 0 0 !important; color: var(--ink-2); }
.cs-stat small { display: block; margin-top: 6px; font: 500 11px/1.4 var(--f-mono); color: var(--ink-3); }
.cs-note--research { font-style: italic; border-left: 3px solid var(--lilac); padding-left: 14px; }
.cs-flow li { flex: 1 1 120px; }
@media (max-width: 900px) { .cs-stats { grid-template-columns: 1fr 1fr; } .cs-stat { border-bottom: 1px solid var(--rule); } .cs-stat:nth-child(2) { border-right: 0; } .cs-stat:nth-child(3) { padding-left: 0; } }
@media (max-width: 600px) { .cs-stats { grid-template-columns: 1fr; } .cs-stat, .cs-stat + .cs-stat { padding-left: 0; border-right: 0; } }

/* Case study: tighter rhythm between sections, wider headline lines */
.cs-section { padding-bottom: 44px; margin-bottom: 52px; }
.cs-section h2 { margin-bottom: 16px; }
.cs-lede { max-width: 44ch !important; margin: -2px 0 22px; }
.cs-defs { margin-bottom: 18px; }
.cs-quote { margin: 24px 0; }
@media (max-width: 600px) { .cs-section { padding-bottom: 32px; margin-bottom: 40px; } }

.cs-figure { margin: 26px 0 28px; }
.cs-figure img { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 1px 2px rgba(37,33,44,.08), 0 14px 30px -18px rgba(37,33,44,.35); }
.cs-figure figcaption { font-family: var(--f-hand); font-size: 16px; color: var(--ink-2); margin-top: 10px; }
.cs-defs > .cs-def:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* side-by-side case-study images: equal height, captions on one line */
.cs-images { align-items: stretch; }
.cs-images figure { display: flex; flex-direction: column; }
.cs-images figure > img { flex: 1; min-height: 0; object-fit: contain; object-position: center top; }
.cs-images figure > img { background: transparent; }

/* Case studies: no entrance animations */
body[data-page="case"] [data-reveal], body[data-page="case"] [data-reveal] > * { transition: none !important; clip-path: none !important; opacity: 1 !important; transform: none !important; }

/* Process: five steps as numbered rows */
.process--5 { display: block !important; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.process--5 li {
  display: grid !important; grid-template-columns: 64px minmax(0, 4fr) minmax(0, 7fr); gap: 8px 32px; align-items: baseline;
  padding: 26px 0 !important; margin: 0 !important; border-bottom: 1.5px dashed var(--rule);
  background: none !important; box-shadow: none !important; transform: none !important;
}
.process--5 li > .pin, .process--5 li > .tape { display: none; }
.process--5 .label { font: 500 13px/1 var(--f-mono); color: var(--purple); letter-spacing: .1em; }
.process--5 h3 { font-size: clamp(21px, 1.9vw, 27px); line-height: 1.15; margin: 0; letter-spacing: -0.03em; }
.process--5 p { font-size: 16.5px; line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 60ch; }
.process--5 li:hover h3 { color: var(--purple); }
.process__note { margin: 40px 0 0; font-family: var(--f-serif); font-style: italic; font-size: clamp(20px, 2vw, 26px); line-height: 1.3; color: var(--ink); max-width: 46ch; padding-left: 18px; border-left: 3px solid var(--pink); }
@media (max-width: 800px) { .process--5 li { grid-template-columns: 44px minmax(0, 1fr); } .process--5 li p { grid-column: 2; } }

/* Impact themes: longer, personal entries */
.theme .theme__line + .theme__line { margin-top: 12px; }
.theme .theme__line strong { color: var(--ink); font-weight: 650; }
.theme__eg a + a { margin-left: 2px; }
.impact__lede + .impact__lede { margin-top: 14px; }