/* ==========================================================================
   NIVAKANA PUBLICATIONS — Design System
   Tokens per Blueprint §26.2. Motion per §27.
   ========================================================================== */

:root{
  /* ---- COLOUR — sampled from the Nivakana logo (verified AA, §26.1) ---- */
  --paper:       #FBFAF7;
  --ink:         #141616;
  --ink-muted:   #525251;
  --night:       #171514;
  --on-night:    #FBFAF7;
  --line:        #141616;
  --hairline:    color-mix(in srgb, #141616 14%, transparent);

  --accent:        #A82BAA;
  --accent-ink:    #FFFFFF;
  --accent-strong: #8E2490;

  --brand-aqua:      #72CEE2;
  --brand-fuchsia:   #A82BAA;
  --brand-yellow:    #FBD10A;
  --brand-vermilion: #E43A0F;
  --brand-orange:    #F39004;
  --brand-lime:      #CBDB00;
  --brand-mint:      #6CD4A7;
  --on-tint:         #141616;

  /* ---- TYPE ---- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans:    "Inter", system-ui, -apple-system, sans-serif;

  --step--1: clamp(0.83rem, 0.79rem + 0.2vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
  --step-3:  clamp(2.0rem, 1.6rem + 2vw, 3.0rem);
  --step-4:  clamp(2.6rem, 1.9rem + 3.5vw, 4.5rem);
  --step-5:  clamp(3.2rem, 2.1rem + 6vw, 7rem);

  --lh-tight: 1.02; --lh-head: 1.1; --lh-body: 1.6;
  --tracking-display: -0.02em; --tracking-eyebrow: 0.08em;
  --measure: 66ch;

  /* ---- SPACING (8pt) ---- */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-6:1.5rem;
  --s-8:2rem; --s-12:3rem; --s-16:4rem; --s-24:6rem; --s-32:8rem;
  --section-y: clamp(3rem, 2rem + 6vw, 8rem);

  /* ---- LAYOUT ---- */
  --container: 1200px; --container-wide: 1360px; --container-read: 720px;
  --gutter: clamp(1rem, 0.5rem + 3vw, 2.5rem);
  --radius-sm:8px; --radius:12px; --radius-lg:20px; --radius-pill:999px;

  /* ---- ELEVATION ---- */
  --shadow-rest: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.06);
  --shadow-hover:0 8px 24px rgba(0,0,0,.12);

  /* ---- MOTION ---- */
  --dur-fast:160ms; --dur:240ms; --dur-slow:480ms; --dur-scene:900ms;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-io:  cubic-bezier(.65,0,.35,1);

  --header-h: 72px;
}

@media (prefers-reduced-motion: reduce){
  :root{ --dur-fast:0ms; --dur:0ms; --dur-slow:0ms; --dur-scene:0ms; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ==========================================================================
   BASE
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:var(--step-0);
  line-height:var(--lh-body);
  font-feature-settings:"kern","liga","calt";
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Lenis smooth-scroll */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

img,video,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

::selection{ background:var(--accent); color:var(--accent-ink); }

:focus-visible{
  outline:2px solid var(--accent-strong);
  outline-offset:3px;
  border-radius:var(--radius-sm);
}

.skip-link{
  position:fixed; top:-100px; left:var(--gutter); z-index:9999;
  background:var(--ink); color:var(--paper);
  padding:.75rem 1.25rem; border-radius:var(--radius-pill);
  font-weight:600; transition:top var(--dur) var(--ease-out);
}
.skip-link:focus{ top:1rem; }

/* ==========================================================================
   TYPOGRAPHY (§26.4)
   ========================================================================== */
.u-display{
  font-family:var(--font-display);
  font-weight:500;
  font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 120;
  line-height:var(--lh-tight);
  letter-spacing:var(--tracking-display);
}
.u-h1{ font-size:var(--step-4); line-height:1.05; }
.u-h2{ font-size:var(--step-3); line-height:var(--lh-head); }
.u-h3{ font-size:var(--step-2); line-height:var(--lh-head); }
.u-hero{ font-size:var(--step-5); }

.u-lead{ font-size:var(--step-1); color:var(--ink-muted); line-height:1.45; }
.u-body{ max-width:var(--measure); }
.u-caption{ font-size:var(--step--1); color:var(--ink-muted); }
.u-meta{ font-size:var(--step--1); color:var(--ink-muted); }

.u-eyebrow{
  font-size:var(--step--1);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:var(--tracking-eyebrow);
  color:var(--ink-muted);
}
.u-eyebrow--boxed{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1.5px solid var(--line);
  border-radius:var(--radius-pill);
  padding:.35rem .85rem;
  color:var(--ink);
  background:transparent;
}
.u-eyebrow--boxed::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--accent); flex:none;
}

.u-quote{ font-family:var(--font-display); font-style:italic; font-size:var(--step-2); line-height:1.3; }

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.wrap{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--wide{ max-width:var(--container-wide); }
.wrap--read{ max-width:var(--container-read); }

.section{ padding-block:var(--section-y); position:relative; }

/* the ink keyline — a first-class element (§26.1 rule d) */
.keyline{ border-top:1.5px solid var(--line); }
.keyline-b{ border-bottom:1.5px solid var(--line); }
.hair{ border-top:1px solid var(--hairline); }

.section-head{
  display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between;
  gap:var(--s-6); margin-bottom:var(--s-12);
}
/* The heading block must claim the row. Without a flex-basis it is a
   shrinking item whose h2 only carries a max-width, so the heading gets
   crushed to a few characters and wraps over many lines. */
.section-head > :first-child{ flex:1 1 min(100%, 36ch); }
.section-head > :last-child:not(:first-child){ flex:0 0 auto; }

/* ==========================================================================
   BUTTONS (§26.5)
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  border-radius:var(--radius-pill);
  padding:.75rem 1.25rem;
  font-family:var(--font-sans); font-weight:600; font-size:.95rem;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:background var(--dur) var(--ease-out),
             color var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease-out),
             transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur) var(--ease-out);
  will-change:transform;
}
.btn .chip{
  display:grid; place-items:center;
  width:1.4rem; height:1.4rem; border-radius:50%;
  background:currentColor; flex:none;
  transition:transform var(--dur-fast) var(--ease-out);
}
.btn .chip svg{ width:.75rem; height:.75rem; }
.btn:hover .chip{ transform:translateX(3px); }

.btn--primary{ background:var(--accent); color:var(--accent-ink); }
.btn--primary .chip svg{ stroke:var(--accent); }
.btn--primary:hover{ background:var(--accent-strong); transform:scale(1.02); box-shadow:var(--shadow-hover); }

.btn--secondary{ border-color:var(--line); color:var(--ink); background:transparent; }
.btn--secondary .chip svg{ stroke:var(--paper); }
.btn--secondary:hover{ background:var(--ink); color:var(--paper); transform:scale(1.02); }
.btn--secondary:hover .chip svg{ stroke:var(--ink); }

.btn--ghost{ padding-inline:0; }
.btn--ghost .chip{ background:var(--ink); color:var(--paper); }
.btn--ghost .chip svg{ stroke:var(--paper); }

.btn--onnight{ border-color:color-mix(in srgb,var(--on-night) 40%,transparent); color:var(--on-night); }
.btn--onnight .chip{ background:var(--on-night); }
.btn--onnight .chip svg{ stroke:var(--night); }
.btn--onnight:hover{ background:var(--on-night); color:var(--night); }

.btn:active{ transform:scale(.99); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* underline-draw link (§26.5) */
.link-draw{
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 1.5px;
  transition:background-size var(--dur) var(--ease-out);
  padding-bottom:2px;
}
.link-draw:hover,.link-draw:focus-visible{ background-size:100% 1.5px; }

/* ==========================================================================
   BADGES / TAGS (§26.5) — outline default, or spectrum tint + ink text
   ========================================================================== */
.tag{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:var(--step--1); font-weight:600; line-height:1;
  padding:.35rem .7rem; border-radius:var(--radius-pill);
  border:1.5px solid var(--line); color:var(--ink); background:transparent;
  white-space:nowrap;
}
.tag--tint{ border-color:transparent; color:var(--on-tint); }
.tag--aqua{ background:var(--brand-aqua); }
.tag--yellow{ background:var(--brand-yellow); }
.tag--orange{ background:var(--brand-orange); }
.tag--lime{ background:var(--brand-lime); }
.tag--mint{ background:var(--brand-mint); }
.tag--fuchsia{ background:var(--accent); color:var(--accent-ink); }

/* ==========================================================================
   PRELOADER (§27.1)
   ========================================================================== */
#preloader{
  position:fixed; inset:0; z-index:9000;
  background:var(--paper);
  display:grid; place-items:center;
}
#preloader .mark{ width:84px; height:84px; }
#preloader .bar{
  position:absolute; bottom:18%; left:50%; transform:translateX(-50%);
  width:min(220px,50vw); height:2px; background:var(--hairline); overflow:hidden;
}
#preloader .bar i{ display:block; height:100%; width:0%; background:var(--ink); }

/* ==========================================================================
   CURSOR
   ========================================================================== */
.cursor{
  position:fixed; top:0; left:0; z-index:8000;
  width:14px; height:14px; border-radius:50%;
  background:var(--ink); pointer-events:none;
  mix-blend-mode:difference;
  transform:translate3d(-100px,-100px,0);
  transition:width var(--dur) var(--ease-out),height var(--dur) var(--ease-out);
}
.cursor--lg{ width:56px; height:56px; }
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

/* ==========================================================================
   HEADER (condense-on-scroll, §11)
   ========================================================================== */
/* The utility bar scrolls away; the header then pins to the top. */
.topstack{
  position:sticky;
  top:calc(var(--utility-h,0px) * -1);
  z-index:1000;
}

.site-header{
  position:relative; z-index:1;
  transition:background var(--dur) var(--ease-out),
             box-shadow var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease-out);
  border-bottom:1.5px solid transparent;
}
/* over a full-bleed dark section the header inverts rather than fighting it */
.site-header.is-dark{ color:var(--on-night); }
.site-header.is-dark .brand__sub{ color:color-mix(in srgb,var(--on-night) 70%,transparent); }
.site-header.is-dark .icon-btn{ border-color:color-mix(in srgb,var(--on-night) 34%,transparent); }
.site-header.is-dark .icon-btn:hover{ border-color:var(--on-night); background:color-mix(in srgb,var(--on-night) 12%,transparent); }
.site-header.is-dark.is-condensed{
  background:color-mix(in srgb,var(--night) 72%,transparent);
  border-bottom-color:color-mix(in srgb,var(--on-night) 16%,transparent);
}

.site-header.is-condensed{
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--hairline);
  box-shadow:0 1px 20px rgba(0,0,0,.04);
}
.site-header__inner{
  display:flex; align-items:center; gap:var(--s-6);
  height:var(--header-h);
  transition:height var(--dur) var(--ease-out);
}
.site-header.is-condensed .site-header__inner{ height:62px; }

/* The wordmark follows the logo lockup: geometric, wide-tracked uppercase
   over a lighter grey "Publications" in sentence case. Set in type rather
   than shipped as an image so it stays crisp and inverts on dark surfaces. */
.brand{ display:flex; align-items:center; gap:.65rem; flex:none; }
.brand__mark{
  width:36px; height:auto; flex:none;
  transition:transform var(--dur-slow) var(--ease-out);
  will-change:transform;
}
.brand:hover .brand__mark{ transform:rotate(25.714deg); } /* one petal of seven */

.brand__name{
  display:block;
  font-family:var(--font-sans); font-weight:700;
  font-size:.95rem; line-height:1;
  letter-spacing:.17em; text-transform:uppercase;
}
.brand__sub{
  display:block; font-family:var(--font-sans);
  font-size:.62rem; font-weight:500; line-height:1;
  letter-spacing:.05em; color:var(--ink-muted); margin-top:5px;
}
.site-header.is-condensed .brand__mark{ width:32px; }

/* the footer carries the full lockup, inverted for the night surface */
.brand--footer .brand__mark{ width:50px; }
.brand--footer .brand__name{ font-size:1.05rem; }
.brand--footer .brand__sub{ font-size:.66rem; color:color-mix(in srgb,var(--on-night) 62%,transparent); }
.brand--footer:hover .brand__mark{ transform:none; }

/* Eight items now. The breakpoint is where they genuinely fit beside the
   brand and the CTA — below it the hamburger is the honest answer. */
.nav{ display:none; align-items:center; gap:1.25rem; margin-inline:auto; }
@media (min-width:1180px){ .nav{ display:flex; } }
.nav__item{ position:relative; }
.nav__link{
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.9rem; font-weight:600; padding:.4rem 0;
  position:relative;
  /* a two-word label wrapping mid-item made the whole bar two lines tall */
  white-space:nowrap;
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1.5px; background:currentColor;
  transform:scaleX(0); transform-origin:100% 50%;
  transition:transform var(--dur) var(--ease-out);
}
.nav__link:hover::after,.nav__item[data-open="true"] .nav__link::after{ transform:scaleX(1); transform-origin:0 50%; }
.nav__caret{ width:.7rem; height:.7rem; transition:transform var(--dur) var(--ease-out); }
.nav__item[data-open="true"] .nav__caret{ transform:rotate(180deg); }

/* typographic mega-panel */
.mega{
  position:absolute; top:calc(100% + 1.1rem); left:50%; transform:translateX(-50%);
  width:min(680px,88vw);
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:0 24px 60px rgba(0,0,0,.14);
  padding:var(--s-8);
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-8);
  opacity:0; visibility:hidden; pointer-events:none;
  clip-path:inset(0 0 100% 0 round var(--radius-lg));
}
.mega__col h4{ margin:0 0 .9rem; font-size:var(--step--1); font-weight:600; text-transform:uppercase; letter-spacing:var(--tracking-eyebrow); color:var(--ink-muted); }
.mega__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.mega__col a{ font-family:var(--font-display); font-size:1.12rem; display:inline-block; }

.header__actions{ display:flex; align-items:center; gap:.6rem; margin-left:auto; flex:none; }
.icon-btn{
  display:grid; place-items:center; width:40px; height:40px;
  border-radius:50%; border:1.5px solid var(--hairline); background:transparent;
  cursor:pointer; transition:border-color var(--dur) var(--ease-out),background var(--dur) var(--ease-out);
}
.icon-btn:hover{ border-color:var(--line); background:color-mix(in srgb,var(--ink) 5%,transparent); }
.icon-btn svg{ width:18px; height:18px; }
.header__cta{ display:none; }
@media (min-width:1180px){ .header__cta{ display:inline-flex; } .menu-btn{ display:none; } }

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:1200;
  background:var(--paper);
  display:flex; flex-direction:column;
  clip-path:inset(0 0 100% 0);
  visibility:hidden;
}
.drawer__body{ flex:1; overflow-y:auto; padding:var(--s-8) 0 var(--s-12); }
.drawer__link{
  display:block; font-family:var(--font-display);
  font-size:clamp(2rem,9vw,3rem); line-height:1.25; letter-spacing:-.02em;
  padding:.25rem 0; border-bottom:1px solid var(--hairline);
}
.drawer__foot{ padding:var(--s-6) 0 calc(var(--s-8) + env(safe-area-inset-bottom)); border-top:1.5px solid var(--line); }

/* ==========================================================================
   UTILITY BAR
   ========================================================================== */
.utility{
  background:var(--ink); color:var(--paper);
  font-size:.8rem; font-weight:500;
  position:relative; z-index:2;
}
.utility__inner{ display:flex; align-items:center; gap:1rem; min-height:38px; padding-block:.4rem; }
.utility__note{ display:flex; align-items:center; gap:1rem; min-width:0; }
/* with the notice gone the address carries the strip on its own, centred */
.utility.is-dismissed .utility__address{ margin-inline:auto; }
.utility__inner > span:nth-of-type(2){ min-width:0; }
/* The address sits at the right of the strip, so the bar reads announcement
   on the left, where we are on the right. It is the first thing to go when
   the strip runs out of room — the footer carries it in full regardless. */
.utility__address{
  margin-left:auto;
  display:none; align-items:center; gap:.45rem;
  font-style:normal; font-size:.76rem; line-height:1;
  opacity:.72; white-space:nowrap;
}
@media (min-width:860px){ .utility__address{ display:inline-flex; } }

.utility__pin{ width:13px; height:13px; flex:none; opacity:.8; }
.utility__full{ display:none; }
.utility__short{ display:inline; }
@media (min-width:1280px){
  .utility__full{ display:inline; }
  .utility__short{ display:none; }
}

.utility__close{ margin-left:1rem; background:none; border:0; cursor:pointer; opacity:.7; padding:.25rem; }
.utility__close:hover{ opacity:1; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ position:relative; padding-top:var(--s-12); padding-bottom:var(--s-16); overflow:clip; }
.hero__grid{ display:grid; gap:var(--s-12); align-items:center; }
@media (min-width:980px){ .hero__grid{ grid-template-columns:1.15fr .85fr; gap:var(--s-16); } }

/* line-by-line clip/mask reveal (§27 item 2) */
.line-mask{ display:block; overflow:hidden; }
.line-mask > span{ display:block; }

.hero__collage{ position:relative; aspect-ratio:1/1.12; }
.hero__collage .cover{ position:absolute; width:38%; }
/* The collage's children are all absolutely positioned, so the box has no
   content to size to. `margin-inline:auto` alone would cancel the grid
   item's stretch and collapse it to 0 — the explicit width is required. */
@media (max-width:979px){
  .hero__collage{ width:100%; max-width:520px; margin-inline:auto; }
}


/* --- photographic cover mockups ------------------------------------------
   These PNG/WebP mockups already carry their own perspective and a baked-in
   drop shadow on a transparent background, so they get NO keyline, radius,
   ground colour or box-shadow — adding any of those would double up on what
   is already composited into the artwork. The hover shadow uses drop-shadow
   so it follows the book's silhouette rather than a rectangle. */
.cover-photo{
  display:block; margin:0;
  aspect-ratio:801 / 927;          /* the mockup canvas, shadow margin included */
  position:relative;
}
.cover-photo img{
  width:100%; height:100%;
  object-fit:contain;
  transition:filter var(--dur) var(--ease-out);
}
.book-card:hover .cover-photo img{
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.3));
}
.book-card .tag--tint{ transition:transform var(--dur) var(--ease-out); }
.book-card:hover .tag--tint{ transform:translateY(-2px) scale(1.06); }

/* everything above is hover sugar — none of it should move for someone who
   asked for stillness, but the card must still read as a link */
.no-motion .book-card__sheen,
.no-motion .book-card__glow{ display:none; }
.no-motion .rail__track:hover .book-card:not(:hover){ filter:none; }
.hero__collage .cover-photo{ position:absolute; width:46%; }

/* ==========================================================================
   MARQUEE (kinetic strip)
   ========================================================================== */
.marquee{ overflow:hidden; background:var(--ink); color:var(--paper); padding-block:1.1rem; }
.marquee__track{ display:flex; gap:3rem; width:max-content; will-change:transform; }
.marquee__item{
  font-family:var(--font-display); font-size:clamp(1.3rem,3.2vw,2.1rem);
  letter-spacing:-.02em; white-space:nowrap; display:flex; align-items:center; gap:3rem;
}
.marquee__dot{ width:9px; height:9px; border-radius:50%; flex:none; }

/* ==========================================================================
   HORIZONTAL RAIL (pinned)
   ========================================================================== */
.rail{ overflow:hidden; }
.rail__track{ display:flex; gap:var(--s-8); align-items:stretch; width:max-content; padding-inline:var(--gutter); }
.book-card{
  width:clamp(230px,26vw,320px); flex:none;
  display:flex; flex-direction:column; gap:var(--s-4);
  perspective:900px;                      /* the cover tilts toward the cursor */
  /* NOT a transition on opacity: GSAP animates opacity on this element for
     the arrival, and a CSS transition on the same property fights every
     frame it writes — the card ends up lagging its own animation, and if the
     tab's animation clock is throttled it never arrives at all. The dim below
     uses filter, which nothing else touches. */
  transition:filter var(--dur) var(--ease-out);
}
.book-card__media{
  position:relative;
  transform-style:preserve-3d;
  will-change:transform;
}

/* A halo in the title's own imprint hue, behind the cover. It is what gives
   the hover its colour without tinting the artwork itself. */
.book-card__glow{
  position:absolute; inset:6% 2% 0;
  border-radius:50%;
  background:radial-gradient(60% 60% at 50% 55%,
    color-mix(in srgb, var(--glow, var(--accent)) 72%, transparent) 0%,
    transparent 70%);
  filter:blur(26px);
  opacity:0; transform:scale(.7) translateZ(-40px);
  transition:opacity var(--dur-slow) var(--ease-out),
             transform var(--dur-slow) var(--ease-out);
  pointer-events:none;
}
.book-card:hover .book-card__glow,
.book-card:focus-visible .book-card__glow{ opacity:.85; transform:scale(1.08) translateZ(-40px); }

/* A light band that sweeps across the cover once, like turning it to the window */
.book-card__sheen{
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
  border-radius:var(--radius);
}
.book-card__sheen::before{
  content:""; position:absolute; top:-60%; bottom:-60%; left:-70%;
  width:45%;
  background:linear-gradient(100deg,
    transparent 0%,
    rgba(255,255,255,.08) 35%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,.08) 65%,
    transparent 100%);
  transform:translateX(0) rotate(8deg);
  transition:transform var(--dur-scene) var(--ease-io);
}
.book-card:hover .book-card__sheen::before,
.book-card:focus-visible .book-card__sheen::before{ transform:translateX(420%) rotate(8deg); }

/* the rest of the rail steps back so the one under the cursor is the subject */
.rail__track:hover .book-card:not(:hover){ filter:saturate(.35) opacity(.65); }

/* the title underlines itself as the card lifts */
.book-card__title{
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 1.5px;
  transition:background-size var(--dur-slow) var(--ease-out);
  padding-bottom:2px;
}
.book-card:hover .book-card__title,
.book-card:focus-visible .book-card__title{ background-size:100% 1.5px; }
.book-card__view{
  position:absolute; inset:auto .6rem .6rem auto; z-index:3;
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--ink); color:var(--paper);
  font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding:.4rem .8rem; border-radius:var(--radius-pill);
  box-shadow:0 8px 20px rgba(0,0,0,.28);
  opacity:0; transform:translateY(14px) scale(.86);
  transition:opacity var(--dur) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.book-card__view::after{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--glow, var(--accent));
}
.book-card:hover .book-card__view,
.book-card:focus-visible .book-card__view{ opacity:1; transform:translateY(0) scale(1); }

/* ==========================================================================
   SIGNATURE — pinned scroll-scrubbed video
   ========================================================================== */
/* The product footage is bright and sits on warm paper, so this scene runs
   LIGHT. A dark veil swallowed the book's black cover and made the mandala
   pages almost invisible — the opposite of what the set-piece is for.
   The copy is anchored low over a paper scrim instead of centred, because
   the subject is centred and the camera pushes into it. */
.scene{ position:relative; background:var(--paper); color:var(--ink); }
.scene__pin{
  height:100vh; position:relative; overflow:hidden;
  display:grid; align-content:end; justify-items:center;
}
.scene__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; will-change:opacity,transform;
}
.scene__veil{
  position:absolute; inset:0;
  background:
    /* just enough to keep the sticky header legible over the footage */
    linear-gradient(180deg, color-mix(in srgb,var(--paper) 58%,transparent) 0%,
                            transparent 13%),
    /* The footage carries its own cover typography, so the lower third is
       given over to the headline as a near-solid paper surface. The two
       stop competing, and the product keeps the upper two-thirds, which is
       where the push-in and the page-turns actually happen. */
    linear-gradient(0deg,  var(--paper) 0%,
                            var(--paper) 17%,
                            color-mix(in srgb,var(--paper) 93%,transparent) 28%,
                            color-mix(in srgb,var(--paper) 55%,transparent) 42%,
                            transparent 58%);
}
.scene__content{
  position:relative; text-align:center;
  padding-inline:var(--gutter);
  padding-bottom:clamp(4.5rem,11vh,8rem);
  max-width:980px;
}
.scene__word{ display:inline-block; will-change:transform,opacity,filter; }

.scene__progress{
  position:absolute; left:var(--gutter); right:var(--gutter); bottom:2.2rem;
  height:1.5px; background:var(--hairline);
}
.scene__progress i{ display:block; height:100%; width:0%; background:var(--ink); }
.scene__frames{
  position:absolute; right:var(--gutter); bottom:3.2rem;
  font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-muted); font-variant-numeric:tabular-nums;
}

/* ==========================================================================
   MANIFESTO — scrubbed typographic assembly
   ========================================================================== */
.manifesto__text{
  font-family:var(--font-display);
  font-size:clamp(1.8rem,5.2vw,4rem);
  line-height:1.16; letter-spacing:-.025em;
}
.manifesto__text .w{ display:inline-block; }

/* ==========================================================================
   AUTHOR CARD — typographic portrait plate
   ========================================================================== */
.author{ display:block; }
.author__plate{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  border:1.5px solid var(--line); border-radius:var(--radius-lg);
  display:grid; place-items:center;
}
.author__plate i{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--font-display); font-style:normal; font-weight:600;
  font-size:clamp(3.5rem,9vw,6rem); color:var(--on-tint); opacity:.92;
  transition:transform var(--dur-slow) var(--ease-out);
  will-change:transform;
}
.author:hover .author__plate i{ transform:scale(1.06); }
.author__plate::after{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg,rgba(20,22,22,.1) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(0deg,rgba(20,22,22,.1) 0 1px,transparent 1px 22px);
  opacity:.55; pointer-events:none;
}
.author__name{ font-family:var(--font-display); font-size:1.28rem; margin-top:.85rem; letter-spacing:-.01em; }

/* ==========================================================================
   STORY / AUTHOR PROFILE
   ========================================================================== */
.profile{ position:relative; overflow:clip; }   /* clips the butterfly's exit */
.profile > .wrap{ position:relative; z-index:1; }

.profile__grid{ display:grid; gap:var(--s-12); align-items:start; }
@media (min-width:900px){
  .profile__grid{ grid-template-columns:.8fr 1.2fr; gap:var(--s-16); }
}

/* The box matches the photograph's own 2:3 so nothing is cropped — the
   notebook she is writing in is the point of the picture. */
.profile__portrait{ margin:0; max-width:420px; }
.profile__portrait img{
  display:block; width:100%; height:auto; aspect-ratio:854 / 1280;
  object-fit:cover;
  border:1.5px solid var(--line); border-radius:var(--radius-lg);
}

.chapters{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s-4); }
.chapters__item{
  display:flex; align-items:center; gap:var(--s-4);
  padding:var(--s-3) 0; border-bottom:1px solid var(--hairline);
  font-family:var(--font-display); font-size:var(--step-1);
  letter-spacing:-.01em;
}
.chapters__tick{ width:30px; height:auto; flex:none; will-change:transform; }

/* ==========================================================================
   BUTTERFLY — flown along a curve by scroll (see initButterfly)
   ========================================================================== */
.butterfly{
  /* Behind the copy, not over it — a decorative element must never sit on
     top of text someone is reading. It still reads clearly against the
     section's open space and is tastefully occluded by the portrait. */
  position:absolute; top:0; left:0; z-index:0;
  width:clamp(62px,7vw,112px);
  pointer-events:none;
  will-change:transform;
  opacity:0;                       /* revealed once the flight is built */
}
.butterfly img{
  width:100%; height:auto; display:block;
  transform-origin:50% 50%;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.18));
  will-change:transform;
}
@media (prefers-reduced-motion: reduce){ .butterfly{ display:none; } }
.no-motion .butterfly{ display:none; }

/* ==========================================================================
   IMPRINT CARD — tinted keyline panel + parallax colophon
   ========================================================================== */
.imprint{
  position:relative; overflow:hidden;
  border:1.5px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--s-8); min-height:300px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:.5rem;
  color:var(--on-tint);
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);
}
.imprint:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover); }
.imprint__icon{
  position:absolute; top:-8%; right:-6%; width:48%; max-width:190px;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.2));
  will-change:transform; pointer-events:none;
}
.imprint__n{ font-family:var(--font-display); font-size:var(--step-2); letter-spacing:-.02em; line-height:1.08; }

/* ==========================================================================
   COUNTERS / RECOGNITION
   ========================================================================== */
.stat__n{ font-family:var(--font-display); font-size:clamp(2.6rem,7vw,4.6rem); line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }

/* ==========================================================================
   ARTICLE CARD
   ========================================================================== */
.article__media{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border:1.5px solid var(--line); border-radius:var(--radius);
  display:grid; place-items:center; padding:var(--s-6);
}
.article__media > span{
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(1.1rem,2.4vw,1.6rem); text-align:center; color:var(--on-tint);
  transition:transform var(--dur-slow) var(--ease-out); will-change:transform;
}
.article:hover .article__media > span{ transform:scale(1.05); }
.article__title{ font-family:var(--font-display); font-size:var(--step-2); letter-spacing:-.02em; line-height:1.15; }
.article:hover .article__kicker{ color:var(--accent-strong); }

/* ==========================================================================
   PROCESS TIMELINE
   ========================================================================== */
.process{ position:relative; }
.process__line{ position:absolute; left:0; right:0; top:74px; height:1.5px; background:var(--hairline); }
.process__line i{ position:absolute; inset:0 auto 0 0; width:0%; background:var(--ink); }
.step__icon{ width:86px; height:86px; object-fit:contain; will-change:transform; }
.step__n{ font-size:var(--step--1); font-weight:600; letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--ink-muted); }
.step__t{ font-family:var(--font-display); font-size:var(--step-2); letter-spacing:-.02em; }

/* ==========================================================================
   REVEAL VIDEO — clip-path expanding mask
   ========================================================================== */
.reveal-video{ position:relative; background:var(--night); color:var(--on-night); overflow:hidden; }
.reveal-video__clip{
  position:relative; width:100%; height:78vh; min-height:440px;
  clip-path:inset(0% 22% round 40px);
  will-change:clip-path;
}
.reveal-video__clip video{ width:100%; height:100%; object-fit:cover; }
.reveal-video__cap{
  position:absolute; inset:auto 0 0 0;
  padding:var(--s-24) 0 var(--s-8);
  background:linear-gradient(180deg,
    rgba(23,21,20,0) 0%,
    rgba(23,21,20,.55) 38%,
    rgba(23,21,20,.88) 72%,
    rgba(23,21,20,.97) 100%);
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq__item{ border-bottom:1px solid var(--hairline); }
.faq__btn{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  display:flex; align-items:center; gap:var(--s-4);
  padding:1.4rem 0; font-family:var(--font-display);
  font-size:var(--step-2); letter-spacing:-.02em; line-height:1.2;
}
.faq__caret{ margin-left:auto; flex:none; width:34px; height:34px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; transition:transform var(--dur) var(--ease-out),background var(--dur) var(--ease-out); }
.faq__item[data-open="true"] .faq__caret{ transform:rotate(45deg); background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.faq__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--dur-slow) var(--ease-io); }
.faq__item[data-open="true"] .faq__panel{ grid-template-rows:1fr; }
.faq__panel > div{ overflow:hidden; }
.faq__panel p{ margin:0 0 1.4rem; max-width:62ch; color:var(--ink-muted); }

/* ==========================================================================
   CONVERSION BAND / NEWSLETTER
   ========================================================================== */
.band{ background:var(--accent); color:var(--accent-ink); }

.field{
  width:100%; background:transparent; border:0;
  border-bottom:1.5px solid currentColor;
  padding:.85rem 0; font-size:var(--step-1); font-family:var(--font-sans);
  color:inherit;
}
.field::placeholder{ color:currentColor; opacity:.55; }
.field:focus{ outline:none; }
.field-wrap{ position:relative; }
.field-wrap::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0;
  background:currentColor; transition:width var(--dur-slow) var(--ease-out);
}
.field-wrap:focus-within::after{ width:100%; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background:var(--night); color:var(--on-night); position:relative; }
.site-footer a{ color:inherit; }
.footer__edge{ display:block; width:100%; height:clamp(48px,7vw,110px); }
/* <address> defaults to italic — reset it, and give the NAP block its own
   contrast so it stays readable against the night surface */
.footer__address{
  font-style:normal;
  line-height:1.65;
  max-width:30ch;
  color:color-mix(in srgb,var(--on-night) 72%,transparent);
}
.footer__contact{ color:color-mix(in srgb,var(--on-night) 88%,transparent); }
.footer__contact a{ font-variant-numeric:tabular-nums; }

.footer__col h4{ font-size:var(--step--1); font-weight:600; text-transform:uppercase; letter-spacing:var(--tracking-eyebrow); opacity:.6; margin:0 0 1.1rem; }
.footer__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.footer__col a{ opacity:.85; }
.footer__col a:hover{ opacity:1; }
.footer__wordmark{
  font-family:var(--font-display); letter-spacing:-.03em; line-height:.85;
  font-size:clamp(3.2rem,15vw,12rem); opacity:.1; user-select:none;
  margin:0; padding-bottom:.08em;
}

/* ==========================================================================
   MOTION PRIMITIVES
   ========================================================================== */
[data-reveal]{ opacity:0; }
[data-mask]{ clip-path:inset(0 0 100% 0); }
.no-motion [data-reveal]{ opacity:1 !important; transform:none !important; }
.no-motion [data-mask]{ clip-path:none !important; }

/* progress rail */
.scroll-progress{
  position:fixed; top:0; left:0; z-index:1300;
  height:2px; width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--brand-aqua),var(--accent),var(--brand-orange),var(--brand-lime));
}