/* Mesekovács — tokens from BRAND.md (Fable Flight.dc.html) */
:root{
  --void:#05060f; --gold:#f3d79b; --gold-bright:#f4d69b; --gold-mid:#f0cf8e;
  --gold-deep:#e8c176; --gold-pale:#fff2cf; --cream:#fdf6e6; --cream-warm:#fdf3dd;
  --ink:#eae3f5; --ink-soft:#cfc4e6;
  --f-display:'Cinzel Decorative',serif; --f-ui:Cinzel,serif;
  --f-num:'Cormorant Garamond',serif; --f-body:Spectral,Georgia,serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--void);font-family:var(--f-body);color:var(--ink);overflow-x:hidden}
a{color:var(--gold);text-decoration:none}
img,video{display:block;max-width:100%}

@keyframes bookfloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-4px) rotate(1deg)}}
@keyframes pageglow{0%,100%{opacity:.35}50%{opacity:.85}}
@keyframes sparkle{0%{opacity:0;transform:translate(0,0) scale(.4)}35%{opacity:1;transform:translate(0,-5px) scale(1)}100%{opacity:0;transform:translate(0,-12px) scale(.3)}}
@keyframes swayL{0%,100%{transform:rotate(0)}50%{transform:rotate(-2.6deg)}}
@keyframes swayR{0%,100%{transform:rotate(0)}50%{transform:rotate(2.6deg)}}
@keyframes scrollhint{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(14px);opacity:0}}

/* ── nav ── */
.nav{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:60;display:flex;align-items:center;
  gap:clamp(10px,2vw,30px);max-width:calc(100vw - 32px);padding:10px 14px 10px 24px;border-radius:999px;
  border:1px solid rgba(243,215,155,.34);background:linear-gradient(180deg,rgba(14,12,34,.82),rgba(8,7,22,.9));
  backdrop-filter:blur(14px);box-shadow:0 18px 60px rgba(3,2,14,.7),inset 0 1px 0 rgba(255,245,214,.14)}
.nav__brand{display:flex;align-items:center;gap:10px;padding-right:6px;white-space:nowrap}
.nav__word{font-family:var(--f-display);font-weight:700;font-size:16px;letter-spacing:.16em;color:var(--cream-warm);text-transform:uppercase}
.mark{position:relative;display:inline-block;width:34px;height:28px;animation:bookfloat 5s ease-in-out infinite}
.mark svg{position:absolute;inset:0;filter:drop-shadow(0 0 7px rgba(243,215,155,.55))}
.mark__glow{position:absolute;left:50%;bottom:-1px;width:26px;height:8px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(50% 60% at 50% 50%,rgba(243,215,155,.7),rgba(243,215,155,0) 72%);animation:pageglow 3.6s ease-in-out infinite}
.mark .pgL{transform-origin:17px 22px;transform-box:view-box;animation:swayL 5s ease-in-out -1.1s infinite}
.mark .pgR{transform-origin:17px 22px;transform-box:view-box;animation:swayR 5s ease-in-out -1.1s infinite}
.sp{position:absolute;border-radius:50%;background:#fff3d0;box-shadow:0 0 6px rgba(255,240,200,.95);animation:sparkle 2.5s ease-out infinite}
.nav__links{display:flex;align-items:center;gap:2px}
.nav__links a{font-family:var(--f-ui);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  color:var(--ink-soft);padding:8px clamp(8px,1vw,14px);border-radius:999px;
  background-image:linear-gradient(90deg,transparent,rgba(243,215,155,.95),transparent);background-repeat:no-repeat;
  background-position:50% 82%;background-size:0% 1px;
  transition:color .35s ease,background-size .45s cubic-bezier(.2,.8,.2,1),text-shadow .35s ease,transform .35s ease}
.nav__links a:hover{color:#fff6e2;background-size:74% 1px;text-shadow:0 0 18px rgba(243,215,155,.85);transform:translateY(-2px)}

/* ── the burger: three gold hairlines folding into an X; phones only ── */
.nav__burger{display:none;position:relative;width:40px;height:40px;flex:none;padding:0;
  border:1px solid rgba(243,215,155,.34);border-radius:999px;background:rgba(14,12,34,.6);cursor:pointer}
.nav__burger span{position:absolute;left:11px;right:11px;height:1.5px;border-radius:1px;
  background:linear-gradient(90deg,var(--gold-mid),var(--gold-pale),var(--gold-deep));
  transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s ease;transform-origin:50% 50%}
.nav__burger span:nth-child(1){top:13px}
.nav__burger span:nth-child(2){top:19px}
.nav__burger span:nth-child(3){top:25px}
.nav__burger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav__burger.is-open span:nth-child(2){opacity:0}
.nav__burger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ── the menu itself: a plate dropped from the pill, in the tome's furniture ── */
.mnav{position:fixed;inset:0;z-index:55;visibility:hidden;pointer-events:none}
.mnav.is-open{visibility:visible;pointer-events:auto}
.mnav__scrim{position:absolute;inset:0;background:rgba(4,6,18,.78);backdrop-filter:blur(8px);
  opacity:0;transition:opacity .3s ease}
.mnav.is-open .mnav__scrim{opacity:1}
.mnav__panel{position:absolute;left:50%;top:74px;transform:translateX(-50%) translateY(-14px);
  width:min(88vw,340px);padding:10px;border-radius:16px;
  border:1px solid rgba(243,215,155,.34);
  background:linear-gradient(180deg,rgba(14,12,34,.96),rgba(8,7,22,.98));
  box-shadow:0 30px 80px rgba(3,2,14,.8),inset 0 1px 0 rgba(255,245,214,.14);
  opacity:0;transition:opacity .3s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.mnav.is-open .mnav__panel{opacity:1;transform:translateX(-50%) translateY(0)}
.mnav__panel a{display:flex;align-items:center;justify-content:space-between;gap:14px;
  font-family:var(--f-ui);font-size:14px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);padding:15px 16px;border-radius:10px}
.mnav__panel a .num{font-size:15px;opacity:.75}
.mnav__panel a+a{border-top:1px solid rgba(243,215,155,.12)}
.mnav__panel a:active{background:rgba(243,215,155,.08);color:#fff6e2}
.mnav__panel .mnav__cta{justify-content:center;margin-top:8px;border-top:0;
  font-size:12.5px;color:#14100a;padding:14px 16px;border-radius:999px}
body.is-mlocked{overflow:hidden}

/* ── buttons ── */
.btn{font-family:var(--f-ui);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;border-radius:999px;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease,background .3s ease}
.btn--gold{font-size:12.5px;color:#14100a;padding:15px 30px;
  background:linear-gradient(100deg,var(--gold-mid),var(--gold-pale) 50%,var(--gold-deep));box-shadow:0 14px 44px rgba(240,207,142,.35)}
.btn--gold:hover{transform:translateY(-3px);box-shadow:0 22px 60px rgba(240,207,142,.55);color:#14100a}
.nav__cta{font-size:12px;padding:11px 22px;box-shadow:0 0 0 1px rgba(255,245,214,.5),0 10px 30px rgba(240,207,142,.3)}
.nav__cta:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 0 0 1px rgba(255,245,214,.8),0 16px 44px rgba(240,207,142,.55)}
.btn--ghost{font-size:12.5px;color:#e8e2f6;padding:15px 30px;border:1px solid rgba(232,226,246,.42)}
.btn--ghost:hover{border-color:rgba(255,246,226,.9);background:rgba(255,255,255,.1);transform:translateY(-3px);color:#fff}
.btn--forest{font-size:13px;color:var(--cream);padding:17px 34px;
  background:linear-gradient(100deg,#1e3a26,#2f5b3c 55%,#1e3a26);box-shadow:0 18px 50px rgba(20,50,30,.4)}
.btn--forest:hover{transform:translateY(-3px);box-shadow:0 26px 66px rgba(20,50,30,.55);color:var(--cream)}

/* ── shared type ── */
.eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--f-ui);font-size:11.5px;letter-spacing:.34em;
  text-transform:uppercase;color:#d7e4fb;margin:0 0 clamp(12px,2.4svh,22px)}
.eyebrow--warm{color:#ffc79c}.eyebrow--cool{color:#a9c0f5}.eyebrow--sage{color:#b7c6ae}.eyebrow--ink{color:#5d5326}
/* row-reverse flips the main axis, so flex-START is the right-hand edge here.
   flex-end would push this eyebrow to the left, away from its right-aligned heading. */
.eyebrow--rev{justify-content:flex-start;flex-direction:row-reverse}
.rule{display:inline-block;width:44px;height:1px;background:linear-gradient(90deg,var(--gold-mid),rgba(240,207,142,0))}
.rule--ink{background:linear-gradient(90deg,#8a7433,rgba(138,116,51,0))}
.num{font-family:var(--f-num);font-weight:600;font-size:17px;letter-spacing:.06em;color:var(--gold-bright)}
.num--ink{color:#6a5a2a}
.num--big{font-size:clamp(24px,4svh,34px);color:var(--gold);display:block;margin-bottom:clamp(6px,1.4svh,12px)}
h1{font-family:var(--f-display);font-weight:900;font-size:clamp(30px,min(4.4vw,7.4svh),58px);line-height:1.08;margin:0;
  color:var(--cream);text-shadow:0 2px 24px rgba(2,6,24,.8);text-wrap:balance}
h1 .gold{color:var(--gold-bright);text-shadow:0 0 42px rgba(244,214,155,.45),0 2px 22px rgba(2,6,24,.8)}
/* dark sections only — the meadow card is ink-on-cream and must not inherit this */
.copy--left h2,.copy--right h2{font-family:var(--f-display);font-weight:700;
  font-size:clamp(28px,min(4.4vw,7svh),56px);line-height:1.08;margin:0;color:#f6f0ff;max-width:18ch;text-wrap:balance}
.copy--right h2{max-width:none}
.glow-warm{text-shadow:0 0 70px rgba(255,150,90,.45),0 10px 40px rgba(0,0,0,.65)}
.glow-cool{color:#eef3ff!important;text-shadow:0 0 70px rgba(90,120,220,.55),0 10px 40px rgba(0,0,0,.7)}
.lead{font-family:var(--f-body);font-weight:300;font-size:clamp(15px,1.15vw,19px);line-height:1.7;color:#dfe6fa;
  max-width:520px;margin:clamp(14px,2.6svh,26px) 0 0;text-wrap:pretty}
.lead--italic{font-style:italic;color:#ded6f4;max-width:540px}
.whisper{font-family:var(--f-body);font-style:italic;font-size:15px;color:#b9c6e6;margin:clamp(14px,2.4svh,22px) 0 0}
.label{font-family:var(--f-ui);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.micro{font-family:var(--f-body);font-weight:300;font-size:15px;line-height:1.6;color:#cfc8e4;margin:0}
.row{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(18px,3.4svh,34px)}

/* ── STAGE 1: sticky flight (NOT fixed — releases naturally into stage 2) ── */
.flight{position:relative}
/* height pins to svh (bars expanded) so the scrub bands never move, but the
   painted stage stretches to dvh — on iOS the URL bar collapses mid-scroll,
   the viewport grows ~60-90px, and without the min-height the page's black
   body showed as a bar under the film. The engine ignores height-only
   resizes on touch, so this is purely visual. */
.flight__stage{position:sticky;top:0;height:100svh;min-height:100dvh;overflow:hidden}
.flight__media{position:absolute;inset:0;background:var(--void)}
.flight__media .clip,.flight__media .poster,.flight__media .loop{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity .18s linear}
.flight__media .clip.is-on,.flight__media .poster.is-on,.flight__media .loop.is-on{opacity:1}
.scrim{position:absolute;inset:0;opacity:0;transition:opacity .25s ease;pointer-events:none}
.scrim.is-on{opacity:1}
.scrim--hero{background:linear-gradient(96deg,rgba(2,5,20,.9) 0%,rgba(2,5,20,.78) 30%,rgba(2,5,20,.34) 56%,rgba(2,5,20,0) 78%),
  linear-gradient(180deg,rgba(2,4,18,.6) 0%,rgba(2,4,18,0) 26%,rgba(2,4,18,0) 62%,rgba(3,4,16,.9) 100%)}
.scrim--forest{background:linear-gradient(180deg,rgba(4,6,22,.9) 0%,rgba(40,16,52,.28) 38%,rgba(26,12,42,.45) 68%,rgba(8,8,26,.86) 100%)}
.scrim--dusk{background:linear-gradient(180deg,rgba(8,8,26,.9) 0%,rgba(6,10,38,.35) 40%,rgba(6,10,34,.62) 100%)}

/* The copy layer switches instantly; the CHILDREN carry all the motion (see scroll.js),
   so a parent fade would only muddy them. */
.copy{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(96px,14svh,124px) 24px calc(clamp(28px,5svh,48px) + env(safe-area-inset-bottom));
  opacity:0;pointer-events:none;visibility:hidden}
.copy.is-on{opacity:1;visibility:visible}
/* buttons and inputs too — the tome is a <button>, the name field an <input>; an
   anchor-only rule leaves them unclickable for a real pointer (JS .click() in tests
   bypasses hit-testing, which is exactly how that slipped through) */
.copy.is-on a,.copy.is-on button,.copy.is-on input,.copy.is-on label{pointer-events:auto}
.copy__inner{width:100%;max-width:min(1080px,100%);min-width:0;perspective:1200px;transform-style:preserve-3d}

/* word-level reveal targets, created at runtime by splitWords() */
/* No will-change here, deliberately. It pins every word to its own composited
   layer, cached at layout scale — inside the hero's scaled title that raster is
   then GPU-stretched ~1.9x and the landing headline renders soft. Blur() and
   3D transforms promote these spans while they're actually animating anyway. */
.w{display:inline-block;white-space:pre}
.fx{}

/* The hero title opens full-bleed and is scrubbed down into its layout slot (FLIP-style
   transform computed in scroll.js). transform-origin must be the centre or it drifts. */
/* transform only, no will-change: the intro scales this up to ~1.9x, and a
   promoted layer would be rasterised once at 58px and stretched — the type on
   the landing view must be painted through the transform, not resampled. */
.copy--hero h1{transform-origin:50% 50%}

/* gold shimmer that runs across the headline once as the section lands */
@keyframes sweep{0%{background-position:-140% 0}100%{background-position:240% 0}}
.sweep{background-image:linear-gradient(100deg,transparent 38%,rgba(255,248,224,.92) 50%,transparent 62%);
  background-size:220% 100%;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;
  animation:sweep 1.25s cubic-bezier(.3,.7,.3,1) .18s both}

/* drifting gold motes — fairy dust, denser in the forest, sparse in daylight */
.motes{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.1s ease;z-index:15}
.motes.is-on{opacity:1}
.motes i{position:absolute;display:block;border-radius:50%;background:#ffe9b8;
  box-shadow:0 0 8px rgba(255,225,160,.9);animation:drift linear infinite}
@keyframes drift{
  0%{transform:translate3d(0,110%,0) scale(.5);opacity:0}
  12%{opacity:.75}
  50%{transform:translate3d(22px,50%,0) scale(1)}
  88%{opacity:.55}
  100%{transform:translate3d(-14px,-14%,0) scale(.45);opacity:0}}
.copy--hero .copy__inner{max-width:1180px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end}
.hero__col{max-width:660px;min-width:0}
.copy--right .copy__inner{text-align:right;margin-left:auto}
.copy--right .lead{margin-left:auto}
.scrollhint{display:flex;flex-direction:column;align-items:center;gap:10px;padding-bottom:6px}
.scrollhint__label{font-family:var(--f-ui);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(226,233,252,.8);writing-mode:vertical-rl}
.scrollhint__line{display:block;width:1px;height:clamp(24px,5svh,46px);
  background:linear-gradient(180deg,rgba(243,215,155,.9),transparent);animation:scrollhint 2.4s ease-in-out infinite}

/* Each card draws its OWN hairline (a 1px ring) rather than the container painting a
   frame behind them — otherwise a card that hasn't been revealed yet still shows as an
   empty gold box. The 1px gap + 1px ring still reads as a shared divider when all
   three are present, which is the look the reference design had. */
/* Cards carry the tome's plate language: rounded boards, a second hairline rule
   set just inside the first, and a dot at each inner corner — the same furniture
   the cover stamps in foil, in each scene's own metal. (This supersedes the old
   1px-gap hairline grid deliberately — per Tom, no more harsh rectangles.) */
.hairgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  gap:clamp(10px,1.8svh,16px);margin-top:clamp(24px,5svh,46px);background:none;border:0}
.hairgrid>div{position:relative;padding:clamp(16px,2.8svh,24px) 22px;background:rgba(8,8,28,.62);
  border:1px solid rgba(243,215,155,.26);border-radius:12px}
.hairgrid>div::before{content:'';position:absolute;inset:5px;border-radius:8px;pointer-events:none;
  border:1px solid rgba(243,215,155,.14);
  background:radial-gradient(circle,rgba(243,215,155,.6) 1.4px,transparent 2px) left 2px top 2px/9px 9px no-repeat,
    radial-gradient(circle,rgba(243,215,155,.6) 1.4px,transparent 2px) right 2px top 2px/9px 9px no-repeat,
    radial-gradient(circle,rgba(243,215,155,.6) 1.4px,transparent 2px) left 2px bottom 2px/9px 9px no-repeat,
    radial-gradient(circle,rgba(243,215,155,.6) 1.4px,transparent 2px) right 2px bottom 2px/9px 9px no-repeat}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:clamp(12px,2.4svh,20px);
  margin-top:clamp(20px,4svh,40px);text-align:left}
.step{position:relative;padding:clamp(16px,3svh,26px) 24px;border:1px solid rgba(200,215,255,.24);
  border-radius:12px;background:rgba(8,10,30,.55);
  backdrop-filter:blur(6px);transition:transform .4s ease,border-color .4s ease,background .4s ease}
/* same plate furniture as .hairgrid, in this scene's cool metal */
.step::before{content:'';position:absolute;inset:5px;border-radius:8px;pointer-events:none;
  border:1px solid rgba(200,215,255,.13);
  background:radial-gradient(circle,rgba(200,215,255,.55) 1.4px,transparent 2px) left 2px top 2px/9px 9px no-repeat,
    radial-gradient(circle,rgba(200,215,255,.55) 1.4px,transparent 2px) right 2px top 2px/9px 9px no-repeat,
    radial-gradient(circle,rgba(200,215,255,.55) 1.4px,transparent 2px) left 2px bottom 2px/9px 9px no-repeat,
    radial-gradient(circle,rgba(200,215,255,.55) 1.4px,transparent 2px) right 2px bottom 2px/9px 9px no-repeat}
.step:hover{transform:translateY(-8px);border-color:rgba(200,215,255,.55);background:rgba(14,18,46,.7)}
.step h3{font-family:var(--f-ui);font-weight:600;font-size:17px;letter-spacing:.04em;color:#f2f6ff;margin:0 0 8px}
.step .micro{color:#cdd6ea}

/* ── section 4: the meadow loop — same pinned surface as the legs ── */
.scrim--meadow{background:linear-gradient(180deg,rgba(6,10,34,.82) 0%,rgba(150,190,225,.14) 26%,rgba(255,255,255,.14) 58%,rgba(20,36,24,.42) 100%)}
.copy--meadow .copy__inner{max-width:1120px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:clamp(24px,5svh,48px);align-items:center}
.cover{position:relative;width:100%;max-width:min(330px,48svh);aspect-ratio:3/4;justify-self:center;border-radius:6px;
  background-image:repeating-linear-gradient(135deg,rgba(253,248,235,.94) 0 12px,rgba(236,224,196,.92) 12px 24px);
  border:1px solid rgba(110,88,44,.4);box-shadow:0 40px 90px rgba(20,40,30,.45);display:grid;place-items:center;
  transform:rotate(-2deg);transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s ease}
.cover:hover{transform:rotate(0) translateY(-10px);box-shadow:0 60px 120px rgba(20,40,30,.5)}
.cover__ph{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:#3a3122;background:rgba(255,255,255,.85);padding:7px 12px}
.card{position:relative;padding:clamp(24px,4svh,38px) clamp(24px,3vw,38px);border-radius:14px;
  background:linear-gradient(158deg,rgba(253,248,235,.96),rgba(243,233,209,.93));border:1px solid rgba(110,88,44,.3);
  box-shadow:0 30px 80px rgba(18,40,22,.34),inset 0 1px 0 rgba(255,255,255,.7)}
/* the buying card is the title page — full plate: inner rule and corner dots in ink */
.card::before{content:'';position:absolute;inset:7px;border-radius:9px;pointer-events:none;
  border:1px solid rgba(110,88,44,.24);
  background:radial-gradient(circle,rgba(138,116,51,.5) 1.5px,transparent 2.1px) left 3px top 3px/10px 10px no-repeat,
    radial-gradient(circle,rgba(138,116,51,.5) 1.5px,transparent 2.1px) right 3px top 3px/10px 10px no-repeat,
    radial-gradient(circle,rgba(138,116,51,.5) 1.5px,transparent 2.1px) left 3px bottom 3px/10px 10px no-repeat,
    radial-gradient(circle,rgba(138,116,51,.5) 1.5px,transparent 2.1px) right 3px bottom 3px/10px 10px no-repeat}
.card__h{font-family:var(--f-display);font-weight:900;font-size:clamp(26px,min(3.6vw,6svh),48px);line-height:1.08;margin:0;
  color:#1b2a17;text-wrap:balance}
.card__p{font-family:var(--f-body);font-size:17px;line-height:1.65;color:#33402c;max-width:480px;
  margin:clamp(12px,2.2svh,18px) 0 0;text-wrap:pretty}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(14px,2.6svh,22px) 0 clamp(16px,3svh,26px)}
.chip{font-family:var(--f-ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#3c4a30;white-space:nowrap;
  border:1px solid rgba(110,88,44,.34);padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.5)}
.card__cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.card__note{font-family:var(--f-body);font-style:italic;font-size:15px;color:#4a5340}

/* ── kolofon ── */
.kolofon{position:relative;background:#0a140d}
.kolofon__head{max-width:1000px;margin:0 auto;padding:76px 24px 8px}
.kolofon__h{font-family:var(--f-display);font-weight:700;font-size:clamp(24px,2.6vw,34px);line-height:1.15;margin:0;
  color:#f6f1e2;max-width:22ch;text-wrap:balance}
.faq{max-width:1000px;margin:0 auto;padding:34px 24px 64px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:32px}
.faq h3{font-family:var(--f-ui);font-weight:600;font-size:16px;color:var(--gold);margin:0 0 8px}
.faq p{font-family:var(--f-body);font-weight:300;font-size:15px;line-height:1.7;color:#c8d3c6;margin:0}
.foot{border-top:1px solid rgba(243,215,155,.16);padding:30px 24px calc(30px + env(safe-area-inset-bottom));
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.foot__word{font-family:var(--f-display);font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.foot__links{display:flex;gap:22px;flex-wrap:wrap}
.foot__links a{font-family:var(--f-ui);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:#cfd8cd}
.foot__links a:hover{color:#fff3d6}
.foot__meta{font-family:var(--f-body);font-weight:300;font-size:12.5px;color:#8b9a8b}

/* ── responsive ── */
@media (max-width:860px){
  .nav{gap:8px;padding:8px 8px 8px 14px;top:12px}
  .nav__links{display:none}
  .nav__burger{display:block}
  .nav__word{font-size:13px;letter-spacing:.12em}
  .nav__cta{font-size:11px;padding:9px 16px;letter-spacing:.12em}
  .copy--hero .copy__inner{grid-template-columns:1fr}
  .scrollhint{display:none}
  .eyebrow{font-size:10px;letter-spacing:.2em;gap:9px;align-items:flex-start}
  .rule{width:26px;margin-top:.55em;flex:none}
  h1{font-size:clamp(28px,8.6vw,40px)}
  .copy--left h2,.copy--right h2{font-size:clamp(26px,7.6vw,38px);max-width:none}
  .card__h{font-size:clamp(24px,6.6vw,34px)}
  .copy--right .copy__inner,.copy--right .lead{text-align:left;margin-left:0}
  .eyebrow--rev{justify-content:flex-start;flex-direction:row}
  .hairgrid{margin-top:20px}
  .card__cta{gap:10px}
  /* section 4 is a pinned overlay: on a phone the whole block must fit one viewport,
     or the CTA falls below the fold where it can never be reached. */
  .copy{padding-top:70px;padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .copy--meadow .copy__inner{gap:10px;justify-items:center}
  .copy .cover{max-width:min(260px,42vw);gap:24px}
  .cover__ph{font-size:9px;padding:5px 9px}
  .card{padding:14px 16px}
  .card__p{font-size:14px;line-height:1.45;margin-top:6px}
  .chips{gap:6px;margin:10px 0 12px}
  .card__note{font-size:12px}
  .chip{font-size:9.5px;padding:6px 10px;letter-spacing:.1em}
  .btn--forest{font-size:11.5px;padding:14px 22px;letter-spacing:.12em}
  .card__note{font-size:13px}
  .copy--meadow .eyebrow{margin-bottom:8px}
}

/* ── portrait phones: every pinned section must fit one small viewport ──
   Budget on an iPhone 15 Pro with Safari's bars up: ~660svh, minus the copy
   padding. Measured before these rules: section 3 needed 761px of content and
   the meadow ~630px + padding — both cut off. Everything here buys height. */
@media (max-width:600px){
  /* brand + CTA + burger cannot share a 393px pill — the burger was pushed
     half off screen. The menu panel carries the same gold CTA, so the nav's
     copy yields on phones. */
  .nav__cta{display:none}
  .copy{padding-top:64px}
  .lead{font-size:15px;line-height:1.6;margin-top:10px}
  .copy--left h2,.copy--right h2{font-size:clamp(26px,7.2vw,32px)}

  /* the three steps become numeral-beside-text rows — the stacked layout spent
     a full line on each roman numeral and three card-heights on padding */
  .steps{margin-top:14px;gap:10px}
  .step{display:grid;grid-template-columns:34px 1fr;column-gap:12px;align-items:start;
    padding:13px 16px}
  /* the numeral owns column 1 for both rows — without the span the .micro
     wraps into the 34px column and each card grows ~4x tall */
  .num--big{font-size:22px;margin-bottom:0;line-height:1.2;grid-row:1/3;grid-column:1}
  .step h3{grid-column:2}
  .step .micro{grid-column:2}
  .step h3{font-size:15.5px;margin:1px 0 4px}
  .step .micro{font-size:14px;line-height:1.5}
  /* the hairline cards in section 2 get the same trim */
  .hairgrid{margin-top:14px}
  .hairgrid>div{padding:15px 16px}
  .hairgrid .micro{font-size:14px;line-height:1.5}
  .label{margin-bottom:6px}

  /* The meadow's content is viewport-sized on phones — the engine's parallax
     drift (0-66px, scroll-dependent) has no slack here and slid the board's
     top under the nav. Pin it; the other sections keep their drift.
     !important because the engine writes transform inline every frame. */
  [data-leg="3"].copy .copy__inner{transform:none!important}
  /* meadow: the board is the hero — 172px, funded by the reclaims below.
     At 124px the 12px title floor ate half the cover and three names spilled
     off the bottom of the board. */
  .copy .cover{max-width:min(200px,50vw);gap:4px}
  .tome__hint{display:none}
  /* in place of the pill: a hand taps the book — fades in to half strength and
     back out while sinking toward the board, like a finger approaching glass */
  .tome::after{content:'';position:absolute;right:5%;bottom:6%;z-index:6;
    width:48px;height:48px;pointer-events:none;opacity:0;
    background:linear-gradient(135deg,var(--gold-mid),var(--gold-pale) 55%,var(--gold-deep));
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 11.24V7.5C9 6.12 10.12 5 11.5 5S14 6.12 14 7.5v3.74c1.21-.81 2-2.18 2-3.74C16 5.01 13.99 3 11.5 3S7 5.01 7 7.5c0 1.56.79 2.93 2 3.74zm9.84 4.63l-4.54-2.26c-.17-.07-.35-.11-.54-.11H13v-6c0-.83-.67-1.5-1.5-1.5S10 6.67 10 7.5v10.74l-3.43-.72c-.08-.01-.15-.03-.24-.03-.31 0-.59.13-.79.33l-.79.8 4.94 4.94c.27.27.65.44 1.06.44h6.79c.75 0 1.33-.55 1.44-1.28l.75-5.27c.01-.07.02-.14.02-.2 0-.62-.38-1.16-.91-1.38z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 11.24V7.5C9 6.12 10.12 5 11.5 5S14 6.12 14 7.5v3.74c1.21-.81 2-2.18 2-3.74C16 5.01 13.99 3 11.5 3S7 5.01 7 7.5c0 1.56.79 2.93 2 3.74zm9.84 4.63l-4.54-2.26c-.17-.07-.35-.11-.54-.11H13v-6c0-.83-.67-1.5-1.5-1.5S10 6.67 10 7.5v10.74l-3.43-.72c-.08-.01-.15-.03-.24-.03-.31 0-.59.13-.79.33l-.79.8 4.94 4.94c.27.27.65.44 1.06.44h6.79c.75 0 1.33-.55 1.44-1.28l.75-5.27c.01-.07.02-.14.02-.2 0-.62-.38-1.16-.91-1.38z'/%3E%3C/svg%3E") center/contain no-repeat;
    filter:drop-shadow(0 2px 8px rgba(3,8,4,.55));
    animation:tapHint 2.6s ease-in-out infinite}
  /* no hint while the reader is already interacting */
  .copy.is-naming .tome::after{display:none}
  /* decorative on a screen this small; the reclaimed rows pay for the board */
  .card .eyebrow{display:none}
  /* the desktop 12px floor is ~1.5x the print proportion on a 172px board —
     three shrunk names plus the subtitle ran off the bottom of the boards.
     .tome prefix: the base .tome__title rule is later in the file, so a bare
     class here silently loses the cascade. */
  .tome .tome__title{font-size:max(10.5px,4.57cqw)}
  /* at 124-150px the 7px imprint is illegible and its floor makes it collide
     with the subtitle block — the print file and desktop keep it */
  .tome__imprint{display:none}
  .card{padding:18px 18px}
  .card__h{font-size:clamp(22px,6.2vw,28px)}
  .card__p{font-size:14.5px;line-height:1.45;margin-top:5px}
  .names{margin-top:5px}
  .names input{padding:8px 12px;font-size:16px;max-width:none}
  /* one scrollable row instead of two wrapped ones — the second row was the
     price of the bigger board */
  .chips{margin:6px 0 8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch}
  .chips::-webkit-scrollbar{display:none}
  .chip{font-size:9.5px;padding:5px 10px;letter-spacing:.06em;flex:none}
  .btn--forest{font-size:12px;padding:13px 20px}
  .card__note{font-size:12.5px}
  .whisper{font-size:14.5px;margin-top:10px}

  /* ── naming mode: the hősök-neve field has focus ──
     The keyboard leaves ~330px of visible viewport and the meadow is pinned,
     so nothing can be scrolled into view. While typing, the card is stripped
     to the input alone and the book pulls in tight above it — the write-on is
     the point of the feature, and it must be on screen while it happens.
     Toggled by names.js on focus/blur; ≤600px only. */
  /* top-aligned, not centred: everything must sit inside the ~330px the
     keyboard leaves without depending on the OS panning the right amount.
     68px clears the floating nav (top 12px + ~46px pill). The parallax drift
     is pinned while typing — it shifts the inner up by a scroll-dependent
     0-66px, which put the book under the nav at some scroll positions.
     !important is required: the engine writes transform as an inline style. */
  /* --nvh: visualViewport height, --kbo: its offsetTop (iOS pans the layout
     viewport when the keyboard opens; a pinned stage slides with it, so the
     block is pushed back down by exactly that amount and then centred in the
     space that actually remains above the keyboard). names.js maintains both;
     the fallbacks make emulators and non-vv browsers behave like before. */
  .copy.is-naming{place-items:start center;
    padding-top:calc(var(--kbo,0px) + clamp(24px,(var(--nvh,100svh) - 280px)/2,160px))}
  .copy.is-naming .copy__inner{transform:none!important}
  .copy.is-naming .card .eyebrow,
  .copy.is-naming .card__h,
  .copy.is-naming .card__p,
  .copy.is-naming .chips,
  .copy.is-naming .card__cta{display:none}
  .copy.is-naming .copy__inner{gap:6px}
  .copy.is-naming .cover{max-width:min(160px,22svh)}
  .copy.is-naming .names{margin-top:0}
  .copy.is-naming .card{padding:10px 14px}
}

/* ── reduced motion: no video, posters only ── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .flight__media .clip,.flight__media .loop{display:none!important}
  .mark,.mark__glow,.mark .pgL,.mark .pgR,.sp,.scrollhint__line{animation:none!important}
  .copy{transition:none}
}

/* ══════════════════════════════════════════════════════════════════════════════
   THE BOOK — closed tome in the meadow, and the full-screen reader
   ══════════════════════════════════════════════════════════════════════════ */
.cover{background:none;border:0;box-shadow:none;aspect-ratio:auto;transform:none;
  display:flex;flex-direction:column;align-items:center;gap:52px;max-width:min(400px,56svh)}
.cover:hover{transform:none;box-shadow:none}
/* The book is 210x210mm, so the board is square — a portrait mockup sold a
   shape we do not make. container-type lets the furniture below be sized in
   cqw, which is how the cover keeps the print proportions at any width. */
.tome{position:relative;display:block;width:100%;aspect-ratio:1/1;padding:0;border:0;cursor:pointer;
  container-type:inline-size;
  background:none;transform:rotate(-2.2deg);transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .55s ease;
  filter:drop-shadow(0 34px 60px rgba(10,22,14,.55))}
.tome:hover,.tome:focus-visible{transform:rotate(0) translateY(-10px) scale(1.03);
  filter:drop-shadow(0 52px 90px rgba(10,22,14,.6)) drop-shadow(0 0 26px rgba(243,215,155,.32))}
.tome:focus-visible{outline:2px solid var(--gold);outline-offset:8px}
/* the page block peeking out on the fore-edge */
.tome__block{position:absolute;inset:2.5% -1.6% 2.5% auto;width:5%;border-radius:0 3px 3px 0;
  background:repeating-linear-gradient(180deg,#efe4c8 0 2px,#d9c9a3 2px 4px);
  box-shadow:inset -2px 0 5px rgba(90,70,30,.45)}
/* ── the board, themed per adventure ──────────────────────────────────────────
   Every world keeps the same gold: only the leather changes, so the three covers
   read as one imprint's series rather than three different products.
   --b1..--b4 are the board gradient stops, --sp the spine's lit edge. */
.tome{--b1:#241a4d;--b2:#1a1338;--b3:#120d28;--b4:#1d1540;--sp:#1d1540;--spd:#0a0718}
.tome[data-world="Sárkánybércek"]{--b1:#4a1a22;--b2:#33101a;--b3:#200a12;--b4:#43171f;--sp:#43171f;--spd:#170508}
.tome[data-world="Vándorló Erdő"]{--b1:#17392a;--b2:#0f2a20;--b3:#081a13;--b4:#153428;--sp:#153428;--spd:#050f0b}

.tome__board{position:absolute;inset:0;border-radius:3px 7px 7px 3px;overflow:hidden;
  background:linear-gradient(148deg,var(--b1) 0%,var(--b2) 38%,var(--b3) 72%,var(--b4) 100%);
  box-shadow:inset 0 0 0 1px rgba(243,215,155,.22),inset 0 2px 0 rgba(255,245,214,.10),
    inset -18px 0 34px rgba(0,0,0,.45)}

/* one emblem visible at a time — the ring and frame around it never move */
.orn-em{display:none}
.tome[data-world="Holdtenger"] .orn-em--hold,
.tome[data-world="Sárkánybércek"] .orn-em--sark,
.tome[data-world="Vándorló Erdő"] .orn-em--vand{display:block}
/* leather grain + a soft sheen across the boards */
.tome__board::before{content:'';position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(circle at 22% 28%,rgba(255,255,255,.05) 0 2px,transparent 3px),
    radial-gradient(circle at 68% 62%,rgba(255,255,255,.04) 0 2px,transparent 3px),
    radial-gradient(circle at 44% 82%,rgba(0,0,0,.16) 0 3px,transparent 4px);
  background-size:23px 21px,31px 27px,17px 19px}
.tome__board::after{content:'';position:absolute;inset:0;
  background:linear-gradient(114deg,transparent 34%,rgba(255,246,222,.13) 48%,transparent 60%)}
.tome__orn{position:absolute;inset:0;width:100%;height:100%;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.5)) drop-shadow(0 0 7px rgba(243,215,155,.35))}
/* Positions are the print cover's, expressed as percentages of the 216mm board:
   title baseline 118/216, imprint 18mm off the foot, side padding 24/216.
   Sizes are cqw so the type scales with the board exactly as it does on press
   (28pt of 216mm = 12.96%... of the *height*; as a share of width that is
   4.57cqw). The max() floor keeps it legible in the small on-page mockup. */
.tome__title{position:absolute;left:0;right:0;top:54.6%;text-align:center;padding:0 11.1%;
  font-family:var(--f-display);font-weight:700;font-size:max(12px,4.57cqw);line-height:1.3;
  letter-spacing:.04em;color:#f6dfa8;text-shadow:0 1px 0 rgba(0,0,0,.55),0 0 16px rgba(243,215,155,.35)}
/* 26mm off the foot (26/216), inside the inner frame — in the band between the
   rules the 7px floor made the caps collide with the border on small boards.
   Keep in sync with .cover__imprint in the generator's lib/cover-art.mjs. */
.tome__imprint{position:absolute;left:0;right:0;bottom:12.04%;text-align:center;font-family:var(--f-ui);
  font-size:max(7px,1.14cqw);letter-spacing:.3em;text-transform:uppercase;color:rgba(243,215,155,.72)}
.tome__spine{position:absolute;left:0;top:0;bottom:0;width:7%;border-radius:3px 0 0 3px;
  background:linear-gradient(90deg,var(--spd) 0%,var(--sp) 62%,rgba(0,0,0,.42) 100%);
  box-shadow:inset -1px 0 0 rgba(243,215,155,.18),inset 1px 0 0 rgba(243,215,155,.14)}
/* NYISD KI is the doorway into the whole preview — it reads as a button, not a
   whisper. Same gold pill language as every other CTA on the page. */
.tome__hint{position:absolute;left:50%;bottom:-64px;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--f-ui);font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:#14100a;padding:10px 24px;border-radius:999px;
  background:linear-gradient(100deg,var(--gold-mid),var(--gold-pale) 50%,var(--gold-deep));
  box-shadow:0 0 0 1px rgba(255,245,214,.5),0 10px 30px rgba(240,207,142,.35);
  transition:box-shadow .3s ease,transform .3s ease;
  animation:hintGlow 3s ease-in-out infinite}
@keyframes hintGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(255,245,214,.5),0 10px 30px rgba(240,207,142,.35)}
  50%{box-shadow:0 0 0 1px rgba(255,245,214,.85),0 10px 44px rgba(240,207,142,.65)}}
.tome:hover .tome__hint{transform:translateX(-50%) translateY(3px);
  box-shadow:0 0 0 1px rgba(255,245,214,.9),0 16px 50px rgba(240,207,142,.7)}
@media (prefers-reduced-motion:reduce){.tome__hint{animation:none}}

body.is-locked{overflow:hidden}

/* ── reader ── */
.reader{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  opacity:0;visibility:hidden;transition:opacity .42s ease,visibility .42s}
.reader.is-open{opacity:1;visibility:visible}
.reader__scrim{position:absolute;inset:0;background:rgba(4,6,18,.9);backdrop-filter:blur(9px)}
.reader__stage{position:relative;width:min(1180px,94vw);display:flex;flex-direction:column;
  align-items:center;gap:16px;padding:clamp(12px,3svh,26px) 0;
  transform:translateY(16px) scale(.97);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.reader.is-open .reader__stage{transform:none}

/* two 210x210 pages side by side — the trim is square, so the spread is 2:1 */
.spread{position:relative;display:grid;grid-template-columns:1fr 1fr;width:100%;
  aspect-ratio:2/1;max-height:min(74svh,760px);perspective:2400px;
  border-radius:4px;box-shadow:0 50px 110px rgba(0,0,0,.66),0 0 0 1px rgba(243,215,155,.14);
  background:#2a2038;cursor:pointer;
  /* the turning leaf projects toward the viewer and would otherwise spill over the
     nav bar; a real page never leaves the book's outline */
  overflow:hidden}
.leafp{position:relative;overflow:hidden}
.leafp--l{border-radius:4px 0 0 4px}
.leafp--r{border-radius:0 4px 4px 0}
.spread__gutter{position:absolute;left:50%;top:0;bottom:0;width:52px;transform:translateX(-50%);
  pointer-events:none;background:linear-gradient(90deg,rgba(60,40,18,0) 0%,rgba(60,40,18,.30) 38%,
    rgba(38,25,10,.46) 50%,rgba(60,40,18,.30) 62%,rgba(60,40,18,0) 100%)}

/* an actual page surface: aged paper, deckle warmth, a whisper of foxing */
.pgi{position:absolute;inset:0;padding:clamp(20px,3.4svh,40px) clamp(20px,3vw,44px) clamp(30px,4svh,48px);
  background:linear-gradient(158deg,#f8efd9 0%,#f2e6cb 46%,#ead9b8 100%);
  background-blend-mode:multiply;display:flex;flex-direction:column;justify-content:center}
.pgi::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle at 18% 24%,rgba(150,110,50,.10) 0 6px,transparent 7px),
    radial-gradient(circle at 76% 68%,rgba(150,110,50,.08) 0 5px,transparent 6px),
    radial-gradient(circle at 52% 88%,rgba(150,110,50,.07) 0 4px,transparent 5px)}
.pgi--text{box-shadow:inset -26px 0 40px -26px rgba(70,48,18,.5)}
.pgi--art{box-shadow:inset 26px 0 40px -26px rgba(70,48,18,.5)}
.pgi__body{position:relative;z-index:1}
.pgi__body p{font-family:var(--f-body);font-weight:400;font-size:clamp(13px,1.15vw,17.5px);
  line-height:1.72;color:#3a2f1e;margin:0 0 .82em;text-wrap:pretty}
/* No drop cap: templates/book.css doesn't set one, so the printed page doesn't
   have one either. It also collided with line 2 on short opening paragraphs. */
.pgi__folio{position:absolute;left:0;right:0;bottom:clamp(11px,1.8svh,18px);text-align:center;
  font-family:var(--f-ui);font-size:10.5px;letter-spacing:.2em;color:#8a7442}
/* Art runs full-bleed to the trim — no frame, no caption. A picture book page IS
   the picture; the mount-and-caption treatment is a gallery idiom, not a book one. */
.pgi--art{padding:0}
.plate{margin:0;position:absolute;inset:0}
.plate img{width:100%;height:100%;object-fit:cover;display:block}

/* Type A copy sits DIRECTLY on the art — no panel, no scrim, matching
   templates/book.css in the generator. Readability is a placement problem, not a
   decoration one: left/top/width are set inline as page percentages, taken from
   the generator's measurement of the flattest, lightest region of that image.
   Do not add a wash here — it would break the art the placement pass protects. */
.pgi__copy{position:absolute;z-index:2}
.pgi__copy p{font-family:var(--f-body);font-weight:400;font-size:clamp(11px,1.02vw,15.5px);
  line-height:1.55;color:#2b2b2b;margin:0 0 .62em;text-wrap:pretty}
.pgi__copy p:last-child{margin-bottom:0}
.pgi--art .pgi__folio{color:#f6ecd2;text-shadow:0 1px 3px rgba(20,12,4,.75)}

/* the empty side of an opening recto or the closing leaf — paper, nothing on it */
.pgi--blank::after{opacity:.28}

/* preview cut-off: the sixth leaf hands over to the order flow */
.pgi--end{justify-content:center;align-items:center;text-align:center}
.endc{position:relative;z-index:1;max-width:30ch;display:flex;flex-direction:column;
  align-items:center;gap:clamp(9px,1.5svh,15px)}
.endc__eyebrow{margin:0;font-family:var(--f-ui);font-size:10.5px;letter-spacing:.28em;
  text-transform:uppercase;color:#8a7442}
.endc__h{margin:0;font-family:var(--f-display);font-weight:700;line-height:1.14;
  font-size:clamp(17px,1.9vw,27px);color:#3a2a10}
.endc__p{margin:0;font-family:var(--f-body);font-size:clamp(11.5px,1vw,14.5px);
  line-height:1.62;color:#4a3d24;text-wrap:pretty}
.endc__cta{margin-top:4px;font-size:clamp(11px,.95vw,13px)}

/* the turning leaf */
.turner{position:absolute;top:0;left:50%;width:50%;height:100%;z-index:6;
  transform-style:preserve-3d;transform-origin:left center;pointer-events:none;
  visibility:hidden;transition:transform .76s cubic-bezier(.42,.02,.32,1)}
.turner.is-on{visibility:visible}
.turner__face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;
  box-shadow:0 0 46px rgba(0,0,0,.4)}
.turner__back{transform:rotateY(180deg)}
.turner.is-fwd{transform:rotateY(0deg)}
.turner.is-fwd.is-run{transform:rotateY(-180deg)}
.turner.is-back{left:0;transform-origin:right center;transform:rotateY(180deg)}
.turner.is-back.is-run{transform:rotateY(0deg)}
.turner.is-back .turner__front{transform:rotateY(180deg)}
.turner.is-back .turner__back{transform:rotateY(0deg)}

/* ── reader chrome ── */
.reader__bar{position:relative;display:flex;align-items:center;gap:20px}
.rbtn{width:46px;height:46px;border-radius:999px;border:1px solid rgba(243,215,155,.4);
  background:rgba(16,12,34,.8);color:var(--gold);font-size:22px;line-height:1;cursor:pointer;
  transition:background .3s ease,transform .3s ease,opacity .3s ease}
.rbtn:hover:not(:disabled){background:rgba(40,30,72,.95);transform:translateY(-2px)}
.rbtn:disabled{opacity:.28;cursor:default}
.reader__count{font-family:var(--f-ui);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);min-width:170px;text-align:center}
.reader__note{margin:0;font-family:var(--f-body);font-style:italic;font-size:13px;color:#9aa6c4;text-align:center}
.reader__close{position:absolute;top:-6px;right:0;width:44px;height:44px;border-radius:999px;
  border:1px solid rgba(243,215,155,.34);background:rgba(16,12,34,.8);color:var(--gold);
  font-size:15px;cursor:pointer;transition:background .3s ease,transform .3s ease}
.reader__close:hover{background:rgba(40,30,72,.95);transform:rotate(90deg)}

@media (max-width:860px){
  /* cover sizing lives in the FIRST 860 block and the ≤600 block — a second
     .cover rule here was last-in-file and silently won every fight */
  .reader__stage{width:96vw;gap:10px}
  /* one page at a time on a phone: the text page would be unreadable at half width */
  .spread{grid-template-columns:1fr;aspect-ratio:1/1;max-height:66svh}
  .leafp--l{border-radius:4px 4px 0 0}
  .leafp--r{display:none}
  .spread__gutter,.turner{display:none}
  .reader__count{min-width:0;font-size:10px}
  .reader__close{top:-4px;right:4px;width:38px;height:38px}
  .reader__note{font-size:11.5px;padding:0 14px}
}
@media (prefers-reduced-motion:reduce){
  .tome,.tome__hint,.reader,.reader__stage,.turner,.rbtn,.reader__close{transition:none!important}
}

/* ── live cover names: the write-on and the sparkles ── */
.tome__names{display:inline}
.tome__sub{display:block}
.tome__names .ltr{display:inline-block;white-space:pre;opacity:0}
.tome__names .ltr.now{opacity:1}
.tome__names .ltr.in{animation:ltrIn .55s cubic-bezier(.2,.7,.3,1) both}
@keyframes ltrIn{
  0%{opacity:0;transform:translateY(10px) scale(1.7);filter:blur(7px);
     text-shadow:0 0 26px rgba(255,236,180,.95)}
  55%{opacity:1;filter:blur(0)}
  72%{transform:translateY(-2px) scale(1.07)}
  100%{opacity:1;transform:none;text-shadow:0 1px 0 rgba(0,0,0,.55),0 0 16px rgba(243,215,155,.35)}}
.tome__spark{position:absolute;z-index:5;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;pointer-events:none;
  border-radius:50%;background:radial-gradient(circle,#fff8e0 0%,#ffe9a8 45%,rgba(255,220,140,0) 72%);
  filter:drop-shadow(0 0 6px rgba(255,230,160,.9));animation:spkFly .85s ease-out both}
.tome__spark--star{border-radius:0;width:9px;height:9px;background:linear-gradient(#fff6d8,#f4d69b);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
@keyframes spkFly{
  0%{opacity:0;transform:translate(0,0) scale(.2) rotate(0)}
  18%{opacity:1}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(var(--s)) rotate(var(--r))}}

/* ── the name field, set into the parchment card ── */
.names{margin:clamp(12px,2.2svh,20px) 0 0}
.names label{display:block;font-family:var(--f-ui);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:#5d5326;margin:0 0 8px}
.names input{width:100%;max-width:340px;background:rgba(255,255,255,.55);
  border:1px solid rgba(110,88,44,.4);border-radius:10px;padding:11px 14px;
  font-family:var(--f-body);font-size:16px;color:#33402c;outline:none;
  transition:border-color .3s ease,box-shadow .3s ease,background .3s ease}
.names input::placeholder{color:rgba(138,116,66,.75);font-style:italic}
.names input:focus{border-color:#8a7433;background:rgba(255,255,255,.75);
  box-shadow:0 0 0 3px rgba(240,207,142,.35)}

@media (max-width:860px){
  .names{margin:8px 0 0}
  .names label{font-size:8.5px;letter-spacing:.16em;margin-bottom:5px}
  /* never under 16px on an input: iOS Safari auto-zooms into any focused field
     with a smaller computed font, and never zooms back out. This late rule sat
     at 14px and was the actual trigger. */
  .names input{padding:8px 11px;font-size:16px;max-width:100%}
}
@media (prefers-reduced-motion:reduce){
  .tome__names .ltr.in{animation:none;opacity:1}
  .tome__spark{display:none}
}

/* ── order flow (feltöltés) ── */
.order{position:fixed;inset:0;z-index:220;display:grid;place-items:center;
  opacity:0;visibility:hidden;transition:opacity .38s ease,visibility .38s}
.order.is-open{opacity:1;visibility:visible}
.order__scrim{position:absolute;inset:0;background:rgba(4,6,18,.9);backdrop-filter:blur(9px)}
.order__card{position:relative;width:min(560px,94vw);max-height:92svh;overflow:auto;border-radius:14px;
  background:linear-gradient(158deg,rgba(253,248,235,.98),rgba(243,233,209,.96));
  border:1px solid rgba(110,88,44,.35);box-shadow:0 50px 110px rgba(0,0,0,.6);
  padding:clamp(22px,4svh,34px) clamp(20px,3.4vw,34px);
  transform:translateY(14px) scale(.98);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.order.is-open .order__card{transform:none}
.order__close{position:sticky;top:0;float:right;margin:-6px -6px 0 0}
.order__h{font-family:var(--f-display);font-weight:900;font-size:clamp(22px,2.6vw,30px);
  line-height:1.12;margin:0;color:#1b2a17;text-wrap:balance}
.order__p{font-family:var(--f-body);font-size:15.5px;line-height:1.6;color:#33402c;
  margin:10px 0 18px;text-wrap:pretty}
.ofield{margin:0 0 14px}
.ofield label{display:block;font-family:var(--f-ui);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:#5d5326;margin:0 0 6px}
.ofield .opt{text-transform:none;letter-spacing:.04em;color:#8a7442}
.ofield input[type=text],.ofield input[type=email],.ofield select,.ofield textarea{
  width:100%;background:rgba(255,255,255,.6);border:1px solid rgba(110,88,44,.4);border-radius:10px;
  padding:10px 13px;font-family:var(--f-body);font-size:16px;color:#33402c;outline:none;
  transition:border-color .3s ease,box-shadow .3s ease}
.ofield input:focus,.ofield select:focus,.ofield textarea:focus{border-color:#8a7433;
  box-shadow:0 0 0 3px rgba(240,207,142,.35)}
.ofield textarea{resize:vertical;min-height:52px}
.ofield--half{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ofield input[type=file]{width:100%;font-family:var(--f-body);font-size:13.5px;color:#5d5326}
.ofield input[type=file]::file-selector-button{font-family:var(--f-ui);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:#fdf6e6;border:0;border-radius:999px;
  padding:9px 16px;margin-right:12px;cursor:pointer;
  background:linear-gradient(100deg,#1e3a26,#2f5b3c 55%,#1e3a26)}
.othumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.othumbs img{width:74px;height:74px;object-fit:cover;border-radius:4px;
  box-shadow:0 0 0 1px rgba(110,88,44,.4),0 6px 14px rgba(60,40,14,.25)}
.ohp{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}
.ocheck{display:flex;gap:10px;align-items:flex-start;margin:16px 0 18px;cursor:pointer}
.ocheck input{margin-top:3px;accent-color:#2f5b3c;width:17px;height:17px;flex:none}
.ocheck span{font-family:var(--f-body);font-size:13.5px;line-height:1.55;color:#4a5340}
/* gold links are invisible on parchment — inside the order card links are forest-green */
.order__card a{color:#2f5b3c;text-decoration:underline;font-weight:600}
.order__card a:hover{color:#1e3a26}
.order__actions{display:flex;flex-direction:column;gap:10px}
.order__actions .btn{border:0;cursor:pointer}
.order__actions .btn:disabled{opacity:.6;cursor:wait;transform:none}
.order__err{font-family:var(--f-body);font-size:14px;color:#8a2f22;min-height:1.2em}
.order__done{text-align:center;padding:24px 6px}
.order__ref{font-family:var(--f-ui);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#5d5326}
@media (max-width:560px){.ofield--half{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.order,.order__card{transition:none}}

/* ── adventure picker (worlds) ── */
.worlds{border:0;padding:0;margin:0 0 14px}
.worlds legend{font-family:var(--f-ui);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:#5d5326;margin:0 0 8px;padding:0}
.worlds{display:grid}
.worlds legend{grid-column:1/-1}
@supports (display:grid){.worlds{grid-template-columns:repeat(3,1fr);gap:10px}}
.world{position:relative;display:block;cursor:pointer;border-radius:10px;overflow:hidden;
  border:2px solid rgba(110,88,44,.35);transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.world:hover{transform:translateY(-3px)}
.world input{position:absolute;opacity:0;pointer-events:none}
.world img{width:100%;aspect-ratio:340/212;object-fit:cover;display:block}
.world__name{position:absolute;left:0;right:0;bottom:0;padding:22px 6px 24px;text-align:center;
  font-family:var(--f-ui);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#fdf6e6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:linear-gradient(180deg,transparent,rgba(4,8,20,.85) 55%);text-shadow:0 1px 4px rgba(0,0,0,.8)}
.world__sub{position:absolute;left:6px;right:6px;bottom:7px;text-align:center;font-family:var(--f-body);
  font-style:italic;font-size:10.5px;color:rgba(233,225,205,.85);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.world:has(input:checked){border-color:#8a7433;
  box-shadow:0 0 0 3px rgba(240,207,142,.4),0 10px 26px rgba(60,40,14,.3)}
.world:has(input:checked)::after{content:'✦';position:absolute;top:6px;right:9px;
  font-size:15px;color:#f4d69b;text-shadow:0 0 8px rgba(244,214,155,.9)}
.world:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
@media (max-width:560px){.worlds{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .world__name{font-size:9px;letter-spacing:.06em;padding-bottom:18px}
  .world__sub{display:none}}

/* ── product choice ── */
.prods{border:0;padding:0;margin:0 0 14px;display:grid;gap:8px}
.prods legend{font-family:var(--f-ui);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:#5d5326;margin:0 0 8px;padding:0}
.prod{display:flex;align-items:center;gap:10px;cursor:pointer;border-radius:8px;
  border:2px solid rgba(110,88,44,.18);background:rgba(255,255,255,.35);padding:11px 14px;
  transition:border-color .25s ease,background .25s ease,box-shadow .25s ease}
.prod input{position:absolute;opacity:0;pointer-events:none}
.prod__name{flex:1;font-family:var(--f-body);font-size:14.5px;color:#33402c}
.prod__price{font-family:var(--f-ui);font-size:13px;letter-spacing:.06em;color:#1b2a17;white-space:nowrap}
.prod:has(input:checked){border-color:#8a7433;background:rgba(255,255,255,.75);
  box-shadow:0 0 0 3px rgba(240,207,142,.35)}
.prod:has(input:checked) .prod__name::after{content:' ✦';color:#8a7433}
.prod:has(input:focus-visible){outline:2px solid #8a7433;outline-offset:2px}

/* the mobile tap-hint hand (only ever visible ≤600px, see .tome::after there) */
@keyframes tapHint{
  0%{opacity:0;transform:scale(1.35) rotate(-12deg)}
  50%{opacity:.5;transform:scale(.95) rotate(-12deg)}
  100%{opacity:0;transform:scale(1.35) rotate(-12deg)}}
@media (prefers-reduced-motion:reduce){.tome::after{animation:none;content:none}}