/* ============================================================
   PAGE PLAYERS — pageplayers.com
   Design language: pen-and-ink crosshatch on aged paper,
   framed by NES-cartridge industrial grey. "A video game,
   but made of paper."
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Paper */
  --paper:      #efe7d6;
  --paper-2:    #e7ddc7;
  --paper-3:    #dcd0b5;
  --paper-lit:  #f7f2e6;

  /* Ink */
  --ink:        #17140f;
  --ink-2:      #3a342a;
  --ink-3:      #6b6152;
  --ink-4:      #9a8f7c;
  --rule:       #c3b69b;

  /* Cartridge */
  --cart:       #9d9992;
  --cart-2:     #87837c;
  --cart-3:     #6a6660;
  --cart-lite:  #b6b2aa;

  /* Accents */
  --red:        #a5342a;
  --red-2:      #7d2620;
  --blue:       #1d3f8c;
  --gold:       #a8842c;

  /* Semantics */
  --bg:         var(--paper);
  --fg:         var(--ink);
  --fg-soft:    var(--ink-2);
  --fg-faint:   var(--ink-3);
  --line:       var(--rule);
  --surface:    var(--paper-lit);

  /* Type */
  --display: "IM Fell English", "Iowan Old Style", Georgia, serif;
  --body:    "EB Garamond", Georgia, "Times New Roman", serif;
  --pixel:   "Press Start 2P", ui-monospace, "SFMono-Regular", monospace;

  /* Metrics */
  --wrap: 1180px;
  --wrap-narrow: 720px;
  --gutter: clamp(1.15rem, 4vw, 2.75rem);
  --radius: 3px;

  --shadow-page: 0 1px 0 rgba(23,20,15,.14), 0 10px 26px -14px rgba(23,20,15,.45);
  --shadow-lift: 0 2px 0 rgba(23,20,15,.16), 0 26px 50px -22px rgba(23,20,15,.55);
}

/* Night: the ink stays ink, the paper goes to lamplight-on-dark.
   Illustrations invert-friendly via a soft multiply screen. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:    #171512;
    --paper-2:  #1e1b17;
    --paper-3:  #262219;
    --paper-lit:#221f1a;
    --ink:      #ece3d0;
    --ink-2:    #cabfa8;
    --ink-3:    #9d927c;
    --ink-4:    #6d6555;
    --rule:     #423b30;
    --cart:     #4a4741;
    --cart-2:   #3b3833;
    --cart-3:   #2c2a26;
    --cart-lite:#5d5a53;
    --red:      #d1594a;
    --blue:     #7b9ae0;
    --gold:     #cfa martial;
    --gold:     #cda44a;
    --shadow-page: 0 1px 0 rgba(0,0,0,.5), 0 10px 26px -14px rgba(0,0,0,.8);
    --shadow-lift: 0 2px 0 rgba(0,0,0,.55), 0 26px 50px -22px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --paper:#171512; --paper-2:#1e1b17; --paper-3:#262219; --paper-lit:#221f1a;
  --ink:#ece3d0; --ink-2:#cabfa8; --ink-3:#9d927c; --ink-4:#6d6555; --rule:#423b30;
  --cart:#4a4741; --cart-2:#3b3833; --cart-3:#2c2a26; --cart-lite:#5d5a53;
  --red:#d1594a; --blue:#7b9ae0; --gold:#cda44a;
  --shadow-page: 0 1px 0 rgba(0,0,0,.5), 0 10px 26px -14px rgba(0,0,0,.8);
  --shadow-lift: 0 2px 0 rgba(0,0,0,.55), 0 26px 50px -22px rgba(0,0,0,.9);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1.05rem, .55vw + .95rem, 1.2rem);
  line-height:1.66;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Paper grain — a faint fibre tooth over everything */
body::before{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.30; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body::before{ mix-blend-mode:screen; opacity:.16; }
}
:root[data-theme="dark"] body::before{ mix-blend-mode:screen; opacity:.16; }

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

::selection{ background:var(--red); color:var(--paper-lit); }

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

/* ---------- 3. Type ---------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  line-height:1.05;
  margin:0 0 .5em;
  letter-spacing:-.005em;
}
h1{ font-size:clamp(2.6rem, 7.2vw, 5.4rem); }
h2{ font-size:clamp(2rem, 4.6vw, 3.35rem); }
h3{ font-size:clamp(1.35rem, 2.1vw, 1.75rem); }
h4{ font-size:1.15rem; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.lede{
  font-size:clamp(1.2rem, 1.5vw, 1.45rem);
  line-height:1.55;
  color:var(--ink-2);
}

/* Small-caps letterpress eyebrow with the numbered-marker vibe */
.eyebrow{
  font-family:var(--pixel);
  font-size:clamp(.55rem,.75vw,.68rem);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--red);
  display:flex; align-items:center; gap:.85em;
  margin:0 0 1.35em;
  line-height:1.7;
}
.eyebrow::after{
  content:""; flex:1; height:1px; min-width:1.5rem;
  background:repeating-linear-gradient(90deg,var(--rule) 0 6px,transparent 6px 10px);
}
.eyebrow--center{ justify-content:center; }
.eyebrow--center::after{ display:none; }
.eyebrow--center::before{
  content:""; width:2.2rem; height:1px;
  background:repeating-linear-gradient(90deg,var(--rule) 0 6px,transparent 6px 10px);
}

.dropcap::first-letter{
  font-family:var(--display);
  float:left; font-size:3.9em; line-height:.78;
  padding:.06em .12em 0 0; color:var(--ink);
}

/* ---------- 4. Layout ---------- */
.wrap{ width:min(100% - var(--gutter)*2, var(--wrap)); margin-inline:auto; }
.wrap--narrow{ width:min(100% - var(--gutter)*2, var(--wrap-narrow)); }
.section{ padding-block:clamp(3.8rem, 8vw, 7.5rem); position:relative; }
.section--tight{ padding-block:clamp(2.6rem, 5vw, 4.5rem); }
.center{ text-align:center; }
.stack > * + *{ margin-top:1.1em; }

/* ---------- 5. Textures & surfaces ---------- */

/* Crosshatch — the signature. Two ink directions, like Nowak's pen. */
.hatch{ position:relative; }
.hatch::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  opacity:.055;
  background-image:
    repeating-linear-gradient(45deg,  var(--ink) 0 .7px, transparent .7px 5px),
    repeating-linear-gradient(-45deg, var(--ink) 0 .7px, transparent .7px 5px);
}
.hatch > *{ position:relative; z-index:1; }

.band-toned{ background:var(--paper-2); }
.band-deep{ background:var(--paper-3); }

/* Ink-dark band: white line-art on black, like the night pages */
.band-ink{
  background:var(--ink);
  color:var(--paper);
  --fg:var(--paper); --line:rgba(239,231,214,.22);
}
.band-ink h1,.band-ink h2,.band-ink h3{ color:var(--paper-lit); }
.band-ink .lede{ color:rgba(239,231,214,.78); }
.band-ink .eyebrow{ color:#e2a04e; }
.band-ink .eyebrow::after,.band-ink .eyebrow::before{
  background:repeating-linear-gradient(90deg,rgba(239,231,214,.35) 0 6px,transparent 6px 10px);
}
.band-ink::before{ opacity:.10; background-image:
    repeating-linear-gradient(45deg,  #fff 0 .7px, transparent .7px 5px),
    repeating-linear-gradient(-45deg, #fff 0 .7px, transparent .7px 5px); }

/* Torn/deckle edge between bands */
.deckle{
  position:absolute; left:0; right:0; height:16px; z-index:2;
  background:inherit;
}
.deckle--top{ top:-1px; }

/* ---------- 6. Hand-drawn rules ---------- */
.rule-hand{
  display:block; width:100%; max-width:280px; height:12px; margin:2.2rem auto;
  color:var(--rule);
}
.rule-hand svg{ width:100%; height:100%; overflow:visible; }

/* ---------- 7. The numbered marker (from the book) ---------- */
/* A downward shield with a page number — the book's core navigation mark. */
.marker{
  --mk:  var(--paper-lit);
  --mkb: var(--ink);
  display:inline-flex; align-items:center; justify-content:center;
  width:2.6em; height:2.9em; flex:none;
  font-family:var(--pixel); font-size:.62rem; line-height:1;
  color:var(--mkb); background:var(--mk);
  border:1.5px solid var(--mkb);
  clip-path:polygon(0 0,100% 0,100% 66%,50% 100%,0 66%);
  padding-bottom:.85em;
  text-decoration:none;
  transition:transform .16s ease, background .16s ease, color .16s ease;
}
a.marker:hover,button.marker:hover{
  background:var(--red); color:var(--paper-lit); border-color:var(--red);
  transform:translateY(2px);
}
.marker--ink{ --mk:var(--ink); --mkb:var(--paper-lit); color:var(--paper-lit); border-color:var(--ink); }
.marker--lg{ font-size:.82rem; }
.marker--sm{ font-size:.5rem; width:2.4em; height:2.7em; }

/* ---------- 8. Collectible item chip ("Collect A²") ---------- */
.chip{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--pixel); font-size:.56rem; letter-spacing:.06em;
  text-transform:uppercase;
  padding:.62em .95em; border-radius:999px;
  background:var(--ink); color:var(--paper-lit);
  border:1.5px solid var(--ink);
  line-height:1;
}
.chip--open{ background:transparent; color:var(--ink); }
.chip--red{ background:var(--red); border-color:var(--red); color:#fff; }

/* ---------- 9. Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  font-family:var(--pixel); font-size:.7rem; letter-spacing:.05em;
  line-height:1; text-align:center; text-decoration:none;
  padding:1.15em 1.7em; border:2px solid var(--ink); border-radius:2px;
  background:var(--ink); color:var(--paper-lit);
  cursor:pointer;
  box-shadow:4px 4px 0 var(--rule);
  transition:transform .12s ease, box-shadow .12s ease, background .16s ease;
}
.btn:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--rule); background:var(--red); border-color:var(--red); }
.btn:active{ transform:translate(4px,4px); box-shadow:0 0 0 var(--rule); }
.btn--ghost{ background:transparent; color:var(--ink); box-shadow:4px 4px 0 var(--rule); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper-lit); border-color:var(--ink); }
.btn--red{ background:var(--red); border-color:var(--red); color:#fff; }
.btn--red:hover{ background:var(--red-2); border-color:var(--red-2); }
.band-ink .btn{ background:var(--paper-lit); color:var(--ink); border-color:var(--paper-lit); box-shadow:4px 4px 0 rgba(239,231,214,.28); }
.band-ink .btn:hover{ background:var(--red); border-color:var(--red); color:#fff; }
.band-ink .btn--ghost{ background:transparent; color:var(--paper-lit); border-color:var(--paper-lit); }
.band-ink .btn--ghost:hover{ background:var(--paper-lit); color:var(--ink); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.9rem 1rem; align-items:center; }
.btn-row--center{ justify-content:center; }

/* ---------- 10. NES cartridge frame ---------- */
.cart{
  position:relative;
  background:linear-gradient(155deg,var(--cart-lite),var(--cart) 34%,var(--cart-2));
  border-radius:10px 10px 4px 4px;
  padding:clamp(.75rem,2vw,1.15rem);
  padding-left:clamp(2.3rem,5.5vw,3.5rem);
  box-shadow:var(--shadow-lift), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 4px rgba(0,0,0,.25);
  isolation:isolate;
}
/* The ridged cartridge spine */
.cart::before{
  content:""; position:absolute; left:clamp(.6rem,1.6vw,1rem); top:6%; bottom:6%;
  width:clamp(1.1rem,2.6vw,1.7rem);
  border-radius:3px;
  background:
    repeating-linear-gradient(180deg,
      rgba(0,0,0,.16) 0 2px,
      rgba(255,255,255,.16) 2px 4px,
      transparent 4px 15px),
    linear-gradient(90deg, rgba(0,0,0,.13), rgba(255,255,255,.09));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);
}
.cart__label{
  display:block; border-radius:3px; overflow:hidden;
  box-shadow:0 0 0 1.5px rgba(0,0,0,.3), 0 8px 20px -10px rgba(0,0,0,.7);
}
.cart__label img{ width:100%; }

/* Official seal */
.seal{
  position:absolute; z-index:3; width:clamp(4.6rem,10vw,6.4rem); aspect-ratio:1;
  right:-.7rem; bottom:-.9rem;
  display:grid; place-items:center; text-align:center;
  font-family:var(--pixel); font-size:.42rem; line-height:1.5; letter-spacing:.03em;
  color:#fff; text-transform:uppercase;
  background:var(--blue);
  clip-path:polygon(50% 0%,61% 9%,75% 4%,81% 18%,95% 19%,95% 34%,100% 50%,95% 66%,95% 81%,81% 82%,75% 96%,61% 91%,50% 100%,39% 91%,25% 96%,19% 82%,5% 81%,5% 66%,0% 50%,5% 34%,5% 19%,19% 18%,25% 4%,39% 9%);
  transform:rotate(-9deg);
  box-shadow:0 8px 18px -8px rgba(0,0,0,.7);
}
.seal span{ display:block; padding:0 12%; }

/* ---------- 11. Illustration plate ---------- */
/* Every illustration is presented as a mounted plate on paper. */
.plate{
  position:relative; display:block;
  background:var(--paper-lit);
  padding:.55rem;
  border:1px solid var(--rule);
  box-shadow:var(--shadow-page);
}
.plate img{
  width:100%;
  filter:contrast(1.05);
  mix-blend-mode:multiply;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .plate img{ mix-blend-mode:normal; filter:invert(1) contrast(.92) brightness(1.02); }
}
:root[data-theme="dark"] .plate img{ mix-blend-mode:normal; filter:invert(1) contrast(.92) brightness(1.02); }

.plate__cap{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.62rem .3rem .15rem;
  font-family:var(--pixel); font-size:.5rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3);
}
.plate__cap em{ font-style:normal; color:var(--ink-4); }

/* ---------- 12. Rope-bordered box (from the book's text panels) ---------- */
.rope{
  position:relative;
  background:var(--paper-lit);
  padding:clamp(1.6rem,4vw,2.6rem);
  box-shadow:var(--shadow-page);
}
.rope::before{
  content:""; position:absolute; inset:9px; pointer-events:none;
  border:7px solid transparent;
  border-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='none' stroke='%236b6152' stroke-width='1.6'%3E%3Cpath d='M0 12 L6 4 M6 20 L12 4 M12 20 L18 4 M18 20 L24 12'/%3E%3C/g%3E%3Crect x='0' y='2.4' width='24' height='.9' fill='%236b6152'/%3E%3Crect x='0' y='20.7' width='24' height='.9' fill='%236b6152'/%3E%3C/svg%3E") 7 round;
  opacity:.55;
}
.rope > *{ position:relative; }

/* ---------- 13. Grids ---------- */
.grid{ display:grid; gap:clamp(1.1rem,2.6vw,2rem); }
.grid-2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr)); }
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)); }
.grid-4{ grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5rem),1fr)); }

.split{
  display:grid; gap:clamp(1.8rem,5vw,4rem);
  grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:62rem){
  .split{ grid-template-columns:1fr 1fr; }
  .split--wide-left{ grid-template-columns:1.25fr 1fr; }
  .split--wide-right{ grid-template-columns:1fr 1.25fr; }
  .split--flip > :first-child{ order:2; }
}

/* ---------- 14. Site header ---------- */
.site-head{
  position:sticky; top:0; z-index:120;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(9px) saturate(1.1);
  border-bottom:1px solid var(--rule);
}
.site-head__in{
  display:flex; align-items:center; gap:1.4rem;
  min-height:4.15rem;
}
.brand{
  display:inline-flex; align-items:center; gap:.62rem;
  text-decoration:none; margin-right:auto; flex:none;
}
.brand__mark{
  width:2.5rem; height:1.25rem; flex:none;
  color:var(--ink);
}
.brand__name{
  font-family:var(--pixel); font-size:.72rem; letter-spacing:.06em;
  line-height:1.35; text-transform:uppercase; color:var(--ink);
}
.brand__name b{ display:block; font-weight:400; }
.brand__name i{ display:block; font-style:normal; font-size:.72em; color:var(--ink-3); letter-spacing:.1em; }

.nav{ display:flex; align-items:center; gap:.25rem; }
.nav a{
  font-family:var(--pixel); font-size:.6rem; letter-spacing:.05em;
  text-transform:uppercase; text-decoration:none; color:var(--ink-2);
  padding:.85em .9em; border-radius:2px;
  position:relative; white-space:nowrap;
  transition:color .16s ease;
}
.nav a:hover{ color:var(--ink); }
.nav a::after{
  content:""; position:absolute; left:.9em; right:.9em; bottom:.5em; height:2px;
  background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform .2s ease;
}
.nav a:hover::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); }
.nav a[aria-current="page"]{ color:var(--ink); }

.head-cta{ display:none; }
@media (min-width:78rem){ .head-cta{ display:inline-flex; padding:.95em 1.25em; font-size:.6rem; } }

.nav-toggle{
  display:grid; place-items:center; width:2.9rem; height:2.9rem;
  background:transparent; border:1.5px solid var(--rule); border-radius:2px;
  cursor:pointer; color:var(--ink); flex:none;
}
@media (min-width:62rem){ .nav-toggle{ display:none; } }
@media (max-width:61.99rem){
  .nav{
    position:fixed; inset:4.15rem 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--rule);
    padding:.6rem var(--gutter) 1.6rem;
    box-shadow:0 22px 40px -26px rgba(0,0,0,.6);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
    max-height:calc(100dvh - 4.15rem); overflow-y:auto;
  }
  .nav[data-open="true"]{ transform:none; opacity:1; pointer-events:auto; }
  .nav a{ padding:1.05em .2em; border-bottom:1px dashed var(--rule); font-size:.68rem; }
  .nav a::after{ left:.2em; right:auto; width:1.6rem; }
}

/* ---------- 15. Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding-block:clamp(3rem,7vw,6rem) clamp(3.5rem,8vw,6.5rem);
  background:var(--paper);
}
.hero__art{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center 32%;
  opacity:.15;
  filter:contrast(1.1);
  mix-blend-mode:multiply;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero__art{ mix-blend-mode:screen; filter:invert(1) contrast(1); opacity:.12; }
}
:root[data-theme="dark"] .hero__art{ mix-blend-mode:screen; filter:invert(1) contrast(1); opacity:.12; }
.hero__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 85% at 50% 42%, transparent 24%, var(--paper) 88%);
}
.hero__in{ position:relative; z-index:2; }
.hero h1{ margin-bottom:.32em; }
.hero h1 em{
  display:block; font-style:italic; color:var(--red);
  font-size:.52em; line-height:1.15; margin-top:.28em;
}
.hero__cover{ position:relative; }

.kicker-stats{
  display:flex; flex-wrap:wrap; gap:.55rem .5rem; margin-top:2rem;
  list-style:none; padding:0;
}
.kicker-stats li{
  font-family:var(--pixel); font-size:.55rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-2);
  border:1.5px solid var(--rule); border-radius:999px;
  padding:.72em 1em; line-height:1; background:var(--paper-lit);
}
.kicker-stats b{ color:var(--red); font-weight:400; }

/* ---------- 16. Numbered step cards ---------- */
.steps{ counter-reset:step; list-style:none; padding:0; margin:0; }
.step{
  position:relative; padding-left:0;
  background:var(--paper-lit); border:1px solid var(--rule);
  padding:2.4rem 1.5rem 1.6rem; box-shadow:var(--shadow-page);
}
.step__num{
  position:absolute; top:-1.05rem; left:1.35rem;
}
.step h3{ margin-bottom:.4em; }
.step p{ color:var(--ink-2); font-size:.97em; }

/* ---------- 17. Interactive page-flip demo ---------- */
.demo{
  background:var(--paper-lit); border:1px solid var(--rule);
  box-shadow:var(--shadow-lift);
  padding:clamp(.9rem,2.4vw,1.5rem);
}
.demo__screen{
  position:relative; overflow:hidden; background:var(--paper-lit);
  aspect-ratio:4/3;
}
.demo__pane{
  position:absolute; inset:0;
  opacity:0; pointer-events:none;
  transition:opacity .34s ease;
}
.demo__pane[data-active="true"]{ opacity:1; pointer-events:auto; }
.demo__pane img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  mix-blend-mode:multiply; filter:contrast(1.05);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .demo__pane img{ mix-blend-mode:normal; filter:invert(1) contrast(.92); }
}
:root[data-theme="dark"] .demo__pane img{ mix-blend-mode:normal; filter:invert(1) contrast(.92); }

.hotspot{
  position:absolute; transform:translate(-50%,-50%);
  background:none; border:0; padding:0; cursor:pointer;
  animation:bob 2.6s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ translate:0 0 } 50%{ translate:0 -5px } }
@media (prefers-reduced-motion:reduce){ .hotspot{ animation:none } }
.hotspot .marker{ box-shadow:0 4px 12px -4px rgba(0,0,0,.6); }

.demo__bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1rem;
  padding-top:.95rem; margin-top:.85rem; border-top:1px dashed var(--rule);
  font-family:var(--pixel); font-size:.53rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3); line-height:1.7;
}
.demo__bar strong{ color:var(--ink); font-weight:400; }
.demo__bar .spacer{ flex:1; }
.demo__caption{
  font-family:var(--body); font-size:.98rem; letter-spacing:0; text-transform:none;
  color:var(--ink-2); line-height:1.5; flex-basis:100%;
}

/* ---------- 18. Bookpack tracker demo ---------- */
.bookpack{
  background:linear-gradient(160deg,var(--cart-lite),var(--cart) 40%,var(--cart-2));
  border-radius:8px; padding:clamp(1rem,2.6vw,1.5rem);
  box-shadow:var(--shadow-lift), inset 0 1px 0 rgba(255,255,255,.25);
}
.bookpack__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.tab{
  position:relative; display:flex; align-items:center; gap:.55rem;
  background:var(--paper-lit); border:1.5px solid var(--ink);
  border-radius:2px; padding:.7rem .6rem; cursor:pointer;
  font-family:var(--pixel); font-size:.5rem; letter-spacing:.03em;
  text-transform:uppercase; color:var(--ink); text-align:left;
  line-height:1.35;
  transition:background .16s ease, color .16s ease, transform .12s ease;
}
.tab__dot{
  width:.85rem; height:.85rem; flex:none; border-radius:2px;
  border:1.5px solid var(--ink); background:transparent;
  transition:background .16s ease;
}
.tab[aria-pressed="true"]{ background:var(--ink); color:var(--paper-lit); }
.tab[aria-pressed="true"] .tab__dot{ background:var(--red); border-color:var(--paper-lit); }
.tab:hover{ transform:translateY(-2px); }
.bookpack__read{
  margin-top:.9rem; padding-top:.8rem; border-top:1px dashed rgba(0,0,0,.3);
  font-family:var(--pixel); font-size:.53rem; letter-spacing:.06em;
  text-transform:uppercase; color:#1a1815; line-height:1.7;
}

/* ---------- 19. Gallery ---------- */
.gallery{
  columns:3 17rem; column-gap:clamp(.8rem,2vw,1.35rem);
}
.gallery > *{ break-inside:avoid; margin-bottom:clamp(.8rem,2vw,1.35rem); }
.gallery button{
  display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in;
  text-align:left;
}
.gallery .plate{ transition:transform .2s ease, box-shadow .2s ease; }
.gallery button:hover .plate{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:200; display:none;
  place-items:center; padding:clamp(1rem,4vw,3rem);
  background:rgba(14,12,9,.93);
}
.lightbox[data-open="true"]{ display:grid; }
.lightbox img{
  max-width:100%; max-height:82vh; width:auto;
  background:#efe7d6; padding:.5rem;
  box-shadow:0 30px 80px -30px #000;
}
.lightbox__cap{
  margin-top:1rem; text-align:center;
  font-family:var(--pixel); font-size:.55rem; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(239,231,214,.72); line-height:1.7;
}
.lightbox__close{
  position:absolute; top:1rem; right:1rem;
  width:3rem; height:3rem; display:grid; place-items:center;
  background:transparent; border:1.5px solid rgba(239,231,214,.45); border-radius:2px;
  color:#efe7d6; cursor:pointer; font-size:1.3rem; line-height:1;
}
.lightbox__close:hover{ background:rgba(239,231,214,.14); }

/* ---------- 20. Editions ---------- */
.edition{
  display:flex; flex-direction:column;
  background:var(--paper-lit); border:1px solid var(--rule);
  box-shadow:var(--shadow-page); padding:1.7rem 1.4rem 1.5rem;
  position:relative;
}
.edition--feature{ border:2px solid var(--ink); box-shadow:var(--shadow-lift); }
.edition__flag{
  position:absolute; top:-.85rem; left:1.3rem;
  font-family:var(--pixel); font-size:.5rem; letter-spacing:.08em; text-transform:uppercase;
  background:var(--red); color:#fff; padding:.6em .85em; line-height:1;
}
.edition h3{ margin-bottom:.15em; }
.edition__price{
  font-family:var(--pixel); font-size:1.05rem; color:var(--red); line-height:1;
  margin:.55rem 0 1.1rem;
}
.edition__price small{ font-size:.44em; color:var(--ink-3); letter-spacing:.08em; display:block; margin-top:.75em; }
.edition ul{ list-style:none; padding:0; margin:0 0 1.5rem; font-size:.97em; }
.edition li{
  padding:.45em 0 .45em 1.5em; position:relative; border-bottom:1px dashed var(--rule);
  color:var(--ink-2);
}
.edition li:last-child{ border-bottom:0; }
.edition li::before{
  content:"✦"; position:absolute; left:.1em; top:.45em; color:var(--gold); font-size:.85em;
}
.edition .btn{ margin-top:auto; width:100%; }

/* ---------- 21. FAQ ---------- */
.faq{ border-top:1px solid var(--rule); }
.faq details{ border-bottom:1px solid var(--rule); }
.faq summary{
  display:flex; align-items:flex-start; gap:1rem;
  padding:1.4rem .2rem; cursor:pointer; list-style:none;
  font-family:var(--display); font-size:clamp(1.15rem,1.7vw,1.4rem); line-height:1.25;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; margin-left:auto; flex:none;
  font-family:var(--pixel); font-size:.9rem; color:var(--red);
  transition:transform .2s ease;
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq summary:hover{ color:var(--red); }
.faq__body{ padding:0 .2rem 1.6rem; color:var(--ink-2); max-width:62ch; }

/* ---------- 22. Signup ---------- */
.signup{
  display:flex; flex-wrap:wrap; gap:.7rem;
  max-width:33rem;
}
.signup input[type="email"]{
  flex:1 1 15rem; min-width:0;
  font-family:var(--body); font-size:1.02rem;
  padding:1em 1.05em; color:var(--ink);
  background:var(--paper-lit);
  border:2px solid var(--ink); border-radius:2px;
}
.signup input::placeholder{ color:var(--ink-4); }
.band-ink .signup input[type="email"]{ background:rgba(239,231,214,.07); border-color:var(--paper-lit); color:var(--paper-lit); }
.band-ink .signup input::placeholder{ color:rgba(239,231,214,.5); }
.signup .btn{ flex:0 0 auto; }
.form-note{
  font-family:var(--pixel); font-size:.5rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-3); margin-top:1rem; line-height:1.8;
}
.band-ink .form-note{ color:rgba(239,231,214,.55); }
.form-status{ margin-top:.9rem; font-size:.98rem; color:var(--red); min-height:1.4em; }
.band-ink .form-status{ color:#e8a86a; }

/* ---------- 23. Pull quote ---------- */
.pull{
  font-family:var(--display); font-size:clamp(1.5rem,3.2vw,2.35rem);
  line-height:1.24; text-align:center; max-width:22ch; margin-inline:auto;
}
.pull cite{
  display:block; margin-top:1.5rem;
  font-family:var(--pixel); font-size:.55rem; letter-spacing:.1em;
  text-transform:uppercase; font-style:normal; color:var(--ink-3);
}
.band-ink .pull cite{ color:rgba(239,231,214,.6); }

/* ---------- 24. Footer ---------- */
.site-foot{
  background:var(--ink); color:rgba(239,231,214,.72);
  padding-block:clamp(3rem,6vw,4.5rem) 2.2rem;
  font-size:.98rem;
}
.site-foot a{ color:rgba(239,231,214,.72); text-decoration:none; border-bottom:1px solid rgba(239,231,214,.24); }
.site-foot a:hover{ color:#fff; border-color:var(--red); }
.site-foot h4{
  font-family:var(--pixel); font-size:.55rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(239,231,214,.45); margin-bottom:1.1rem;
}
.site-foot ul{ list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
.foot-grid{
  display:grid; gap:2.4rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));
}
.foot-brand{ grid-column:1/-1; max-width:26rem; }
@media (min-width:62rem){ .foot-brand{ grid-column:span 2; } }
.foot-brand .brand__name{ color:var(--paper-lit); }
.foot-brand .brand__mark{ color:var(--paper-lit); }
.foot-brand p{ margin-top:1rem; color:rgba(239,231,214,.6); font-size:.96rem; }
.foot-base{
  margin-top:3rem; padding-top:1.6rem; border-top:1px solid rgba(239,231,214,.16);
  display:flex; flex-wrap:wrap; gap:.8rem 1.6rem; align-items:center;
  font-family:var(--pixel); font-size:.5rem; letter-spacing:.07em; text-transform:uppercase;
  color:rgba(239,231,214,.4); line-height:1.9;
}
.foot-base .spacer{ flex:1; }

/* ---------- 25. Page header (interior pages) ---------- */
.pagehead{
  padding-block:clamp(2.8rem,6vw,4.6rem) clamp(2rem,4vw,3rem);
  border-bottom:1px solid var(--rule);
  position:relative; overflow:hidden;
}
.pagehead h1{ font-size:clamp(2.4rem,6vw,4.4rem); margin-bottom:.28em; }
.pagehead .lede{ max-width:52ch; }

/* ---------- 26. Utilities ---------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--ink); color:var(--paper-lit); padding:1em 1.4em;
  font-family:var(--pixel); font-size:.6rem;
}
.skip:focus{ left:.6rem; top:.6rem; }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.mt-0{margin-top:0} .mb-0{margin-bottom:0}
.mt-2{margin-top:2rem} .mt-3{margin-top:3rem}

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none } }

/* ---------- 27. Cover shot ---------- */
.cover-shot{
  margin:0; position:relative;
  max-width:min(100%, 27rem);
  margin-inline:auto;
  transform:rotate(-1.6deg);
}
.cover-shot img{
  width:100%; border-radius:5px;
  box-shadow:
    0 2px 0 rgba(23,20,15,.2),
    0 30px 60px -26px rgba(23,20,15,.75),
    0 60px 90px -50px rgba(23,20,15,.6);
}
/* the little bit of shelf shadow under it */
.cover-shot::after{
  content:""; position:absolute; left:8%; right:8%; bottom:-1.4rem; height:1.6rem;
  background:radial-gradient(60% 100% at 50% 0%, rgba(23,20,15,.34), transparent 72%);
  pointer-events:none;
}
@media (min-width:62rem){
  .cover-shot{ transform:rotate(-2.2deg) translateY(.5rem); }
}

/* ---------- 28. Hotspot legibility ---------- */
.hotspot .marker{
  box-shadow:0 0 0 3px rgba(247,242,230,.9), 0 5px 14px -4px rgba(0,0,0,.7);
}
.hotspot:hover .marker{ box-shadow:0 0 0 3px rgba(247,242,230,.95), 0 7px 18px -4px rgba(0,0,0,.8); }

/* ---------- 29. Shop ---------- */
.shop-nav{
  display:flex; flex-wrap:wrap; gap:.5rem;
  padding-block:1.1rem; border-bottom:1px solid var(--rule);
  position:sticky; top:4.15rem; z-index:100;
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(8px);
}
.shop-nav a{
  font-family:var(--pixel); font-size:.55rem; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-2);
  border:1.5px solid var(--rule); border-radius:999px; padding:.75em 1.05em; line-height:1;
}
.shop-nav a:hover{ border-color:var(--ink); color:var(--ink); }

.product{
  display:flex; flex-direction:column; position:relative;
  background:var(--paper-lit); border:1px solid var(--rule);
  box-shadow:var(--shadow-page);
  transition:transform .18s ease, box-shadow .18s ease;
}
.product:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.product--feature{ border:2px solid var(--ink); }
.product__media{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  background:#fff; display:grid; place-items:center;
  border-bottom:1px solid var(--rule);
}
.product__media img{ width:100%; height:100%; object-fit:contain; padding:6%; }
.product__flag{
  position:absolute; top:.75rem; left:.75rem; z-index:2;
  font-family:var(--pixel); font-size:.46rem; letter-spacing:.08em; text-transform:uppercase;
  background:var(--red); color:#fff; padding:.62em .8em; line-height:1;
}
.product__flag--ink{ background:var(--ink); }
.product__body{ padding:1.35rem 1.25rem 1.35rem; display:flex; flex-direction:column; flex:1; }
.product__kind{
  font-family:var(--pixel); font-size:.46rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 .7rem; line-height:1.6;
}
.product h3{ font-size:1.3rem; margin-bottom:.3em; line-height:1.15; }
.product__desc{ font-size:.95rem; color:var(--ink-2); margin-bottom:1rem; }
.product__list{ list-style:none; padding:0; margin:0 0 1.15rem; font-size:.9rem; }
.product__list li{ padding:.32em 0 .32em 1.25em; position:relative; color:var(--ink-2); }
.product__list li::before{ content:"✦"; position:absolute; left:0; top:.35em; color:var(--gold); font-size:.8em; }
.product__foot{ margin-top:auto; display:flex; align-items:center; gap:.85rem; flex-wrap:wrap; }
.product__price{
  font-family:var(--pixel); font-size:.95rem; color:var(--ink); line-height:1; flex:none;
}
.product__price s{ color:var(--ink-4); font-size:.7em; margin-left:.5em; }
.product__foot .btn{ flex:1; min-width:8rem; padding:.95em 1.1em; font-size:.6rem; }
.product__note{
  flex-basis:100%; font-family:var(--pixel); font-size:.44rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3); line-height:1.8; margin:0;
}

/* Line-art product mark used where there's no photo yet */
.linemark{ width:100%; height:100%; display:block; color:var(--ink-2); padding:9%; }
.linemark svg{ width:100%; height:100%; }

/* ---------- 30. Cart ---------- */
.cart-btn{
  position:relative; display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--pixel); font-size:.58rem; letter-spacing:.05em; text-transform:uppercase;
  background:transparent; border:1.5px solid var(--rule); border-radius:2px;
  color:var(--ink); padding:.9em 1em; cursor:pointer; line-height:1; flex:none;
}
.cart-btn:hover{ border-color:var(--ink); }
.cart-btn__count{
  display:inline-grid; place-items:center; min-width:1.45em; height:1.45em; padding:0 .3em;
  background:var(--red); color:#fff; border-radius:999px; font-size:.85em;
}
.cart-btn[data-empty="true"] .cart-btn__count{ background:var(--ink-4); }

.drawer{
  position:fixed; inset:0; z-index:180; display:none;
}
.drawer[data-open="true"]{ display:block; }
.drawer__scrim{ position:absolute; inset:0; background:rgba(14,12,9,.62); backdrop-filter:blur(2px); }
.drawer__panel{
  position:absolute; top:0; right:0; bottom:0; width:min(100%, 27rem);
  background:var(--paper); border-left:1px solid var(--rule);
  display:flex; flex-direction:column;
  box-shadow:-30px 0 60px -30px rgba(0,0,0,.6);
  animation:slidein .26s ease;
}
@keyframes slidein{ from{ transform:translateX(18px); opacity:.4 } to{ transform:none; opacity:1 } }
@media (prefers-reduced-motion:reduce){ .drawer__panel{ animation:none } }
.drawer__head{
  display:flex; align-items:center; gap:1rem;
  padding:1.35rem 1.4rem; border-bottom:1px solid var(--rule);
}
.drawer__head h2{ font-size:1.4rem; margin:0; flex:1; }
.drawer__close{
  width:2.5rem; height:2.5rem; display:grid; place-items:center; flex:none;
  background:transparent; border:1.5px solid var(--rule); border-radius:2px;
  color:var(--ink); cursor:pointer; font-size:1.1rem;
}
.drawer__body{ flex:1; overflow-y:auto; padding:1.1rem 1.4rem; }
.drawer__foot{ border-top:1px solid var(--rule); padding:1.3rem 1.4rem; background:var(--paper-lit); }

.line{
  display:grid; grid-template-columns:3.5rem 1fr auto; gap:.9rem;
  padding:.95rem 0; border-bottom:1px dashed var(--rule); align-items:start;
}
.line:last-child{ border-bottom:0; }
.line__thumb{
  width:3.5rem; height:3.5rem; background:#fff; border:1px solid var(--rule);
  display:grid; place-items:center; overflow:hidden;
}
.line__thumb img{ width:100%; height:100%; object-fit:contain; padding:6%; }
.line h4{ font-family:var(--body); font-weight:600; font-size:.98rem; margin:0 0 .2rem; line-height:1.25; }
.line__meta{ font-family:var(--pixel); font-size:.44rem; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); line-height:1.7; }
.qty{ display:inline-flex; align-items:center; border:1.5px solid var(--rule); border-radius:2px; margin-top:.45rem; }
.qty button{
  width:1.65rem; height:1.65rem; background:transparent; border:0; cursor:pointer;
  color:var(--ink); font-size:.9rem; line-height:1; display:grid; place-items:center;
}
.qty button:hover{ background:var(--paper-2); }
.qty span{ min-width:1.6rem; text-align:center; font-family:var(--pixel); font-size:.55rem; }
.line__price{ font-family:var(--pixel); font-size:.62rem; white-space:nowrap; }
.line__rm{
  display:block; margin-top:.5rem; background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--pixel); font-size:.42rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-4); text-decoration:underline;
}
.line__rm:hover{ color:var(--red); }

.totals{ font-family:var(--pixel); font-size:.55rem; letter-spacing:.05em; text-transform:uppercase; line-height:2.2; }
.totals div{ display:flex; justify-content:space-between; gap:1rem; }
.totals .grand{ font-size:.78rem; color:var(--ink); border-top:1px solid var(--rule); margin-top:.5rem; padding-top:.7rem; }
.totals .muted{ color:var(--ink-3); }
.drawer__foot .btn{ width:100%; margin-top:1rem; }

.ship-toggle{
  display:inline-flex; border:1.5px solid var(--rule); border-radius:2px; overflow:hidden; margin-top:.5rem;
}
.ship-toggle button{
  background:transparent; border:0; cursor:pointer; padding:.6em .85em; line-height:1;
  font-family:var(--pixel); font-size:.46rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
}
.ship-toggle button[aria-pressed="true"]{ background:var(--ink); color:var(--paper-lit); }

.cart-empty{ text-align:center; padding:3rem 1rem; color:var(--ink-3); }
.cart-empty p{ font-size:.98rem; }

/* Toast */
.toast{
  position:fixed; left:50%; bottom:1.5rem; transform:translateX(-50%) translateY(1.5rem);
  z-index:190; opacity:0; pointer-events:none;
  background:var(--ink); color:var(--paper-lit);
  font-family:var(--pixel); font-size:.55rem; letter-spacing:.06em; text-transform:uppercase;
  padding:1em 1.3em; line-height:1.6; border-radius:2px;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.8);
  transition:opacity .22s ease, transform .22s ease;
  max-width:calc(100% - 2rem); text-align:center;
}
.toast[data-show="true"]{ opacity:1; transform:translateX(-50%) translateY(0); }

/* Shipping table */
.tbl{ width:100%; border-collapse:collapse; font-size:.95rem; }
.tbl th,.tbl td{ text-align:left; padding:.85em 1em; border-bottom:1px solid var(--rule); }
.tbl th{
  font-family:var(--pixel); font-size:.48rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); font-weight:400;
}
.tbl td{ color:var(--ink-2); }
.tbl tr:last-child td{ border-bottom:0; }

/* ---------- 31. Product variant + option control ---------- */
.product h3 em{
  display:block; font-style:normal; font-family:var(--pixel);
  font-size:.5rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); margin-top:.55rem; line-height:1.6;
}
.opt{ display:flex; align-items:center; gap:.7rem; margin:0 0 1.1rem; }
.opt span{
  font-family:var(--pixel); font-size:.46rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3);
}
.opt select{
  font-family:var(--pixel); font-size:.55rem; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--rule); border-radius:2px;
  padding:.7em .8em; cursor:pointer;
}
.opt select:hover{ border-color:var(--ink); }
.product__media img{ transition:transform .3s ease; }
.product:hover .product__media img{ transform:scale(1.03); }

/* wider marker for multi-character labels (400, 100, 8+) */
.marker--wide{ width:auto; min-width:3.1em; padding-inline:.55em; }

/* eyebrow: drop the trailing rule when the label itself wraps */
@media (max-width:40rem){
  .eyebrow{ flex-wrap:wrap; }
  .eyebrow::after{ display:none; }
}