/* ============================================================
   iOS PASS — Apple HIG conformance, Safari behaviour, safe areas
   Everything below is scoped to touch devices or small/short
   viewports; the desktop composition is untouched.
   ============================================================ */

/* --- platform hygiene --- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
body{overscroll-behavior-y:none}
*{-webkit-tap-highlight-color:transparent}
button,a,summary,label,input[type=checkbox],.lore-dashes span{touch-action:manipulation}
nav,.mob-drawer,.hero-links,.seg-row,.chip-row,.hat-row,.export-size,.mini-btns,.buy-steps,.lore-dashes{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
code,p,h1,h2,h3,input{-webkit-user-select:text;user-select:text}
.buy-modal,.borrow-gallery{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* body is frozen in place while a sheet is open, so the page cannot scroll behind it */
body.locked{position:fixed;left:0;right:0;width:100%;overflow:hidden}

/* --- safe areas (viewport-fit=cover): notch, Dynamic Island, home indicator --- */
nav{padding-left:max(28px,env(safe-area-inset-left));padding-right:max(28px,env(safe-area-inset-right));padding-top:max(18px,env(safe-area-inset-top))}
.wrap{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
.mob-drawer{padding-right:max(24px,env(safe-area-inset-right));padding-bottom:max(40px,calc(env(safe-area-inset-bottom) + 24px))}
footer{padding-bottom:max(60px,calc(env(safe-area-inset-bottom) + 36px))}
#fortune{bottom:max(34px,calc(env(safe-area-inset-bottom) + 20px))}
.buy-modal{padding-bottom:max(28px,calc(env(safe-area-inset-bottom) + 12px))}
.sound-toggle{right:max(26px,calc(env(safe-area-inset-right) + 12px))}

/* ============================================================
   THE HERO ON PHONES AND TABLETS
   The film gets its own clean window; the copy sits beneath it
   on solid ground. No text over bright footage, no collisions.
   ============================================================ */
@media(max-width:1020px){
  .hero{height:auto;min-height:0;overflow:visible;display:block;background:var(--bg)}
  /* The film used to take 62svh. On every phone that pushed the headline,
     the promise and all three actions past the fold, and left the pack card
     sliced in half across the bottom edge: the opening screen ended on a cut.
     At 52svh the film is still the biggest thing on the page and the address
     capsule clears the fold underneath it. */
  .hero video{position:relative;inset:auto;display:block;width:100%;height:52svh;min-height:240px;max-height:560px;object-fit:cover}
  .hero .shade{position:absolute;top:0;left:0;right:0;height:52svh;min-height:240px;max-height:560px;background:
    linear-gradient(180deg,rgba(4,10,6,.62) 0%,rgba(4,10,6,.12) 22%,rgba(4,10,6,.06) 55%,rgba(5,11,7,.72) 88%,var(--bg) 100%)}
  .hero-inner{position:relative;height:auto;display:block;padding:18px 20px 44px;
    padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));
    background:var(--bg);margin-top:-1px}
  .hero-main{flex-direction:column;align-items:center;gap:22px}
  /* site.js lifts the pack card up under the promise on a phone. It is a
     216px card, so wherever it sits it cannot fit on the first screen beside
     the film, and sitting above the actions it buried every one of them.
     The column puts the address and the door first and lets the pack follow. */
  .hero-left{text-align:center;max-width:none;display:flex;flex-direction:column}
  .hero-left .glass-cards{order:1}
  .hero .tag{margin:12px auto 20px;max-width:36ch}
  .hero-links{justify-content:center}
  .sound-toggle{top:calc(52svh - 60px);bottom:auto;max-height:none}
  .scroll-cue{display:none}
  .pfp-stage{position:static}
}
@media(max-width:1020px) and (max-height:520px){
  /* landscape phones: a shorter film window so the headline is reachable */
  .hero video,.hero .shade{height:78svh;min-height:200px}
  .sound-toggle{top:calc(78svh - 60px)}
}
@media(max-width:640px){
  .hero h1{font-size:clamp(2.3rem,10.5vw,3.1rem)}
  .hero .tag{font-size:1rem}
  .glass-cards{width:100%;flex-direction:column;align-items:stretch}
  .glass-cards .gcard{width:100%;padding:16px 18px;
    background:rgba(255,255,255,.06);border:1px solid var(--line)}
  /* the live cap reads as one compact chip */
  .glass-cards .gcard:not(.pack-card){flex-direction:row;align-items:baseline;gap:12px;flex-wrap:wrap}
  .gcard .big{font-size:1.4rem}
  .gcard .big small{margin-bottom:2px}
  .glass-cards .gcard:not(.pack-card) p{display:none}
  /* the pack keeps its doors two by two, labels legible */
  .pack-card .pack-count{margin-bottom:12px}
  .pack-links{gap:10px}
  .pk{min-height:50px;padding:0 12px;font-size:11px;letter-spacing:.08em}
  .pk svg{width:18px;height:18px}
}

/* ============================================================
   TOUCH TARGETS — Apple HIG asks for 44x44pt, with 8pt of air
   ============================================================ */
@media (hover:none) and (pointer:coarse){
  .nav-logo{min-height:44px}
  .burger{width:46px;height:46px}
  .glass-pill{gap:6px}
  .glass-pill a{min-height:44px;display:flex;align-items:center;padding:0 16px}
  .foot-social a{min-height:44px;display:inline-flex;align-items:center}
  /* inline links in prose get a finger-sized band without disturbing the line box */
  .lore-caption a,.lc-body a,.ch-body a.lore-link,.buy-adv .chain-line a{display:inline-block;padding:13px 0;margin:-13px 0}
  .mob-drawer a.mlink{padding:16px}
  .btn-buy,.grad-pill{min-height:44px}
  #heroCopy.grad-pill{min-height:44px;padding:12px 18px}
  .ca-capsule{padding:6px 6px 6px 16px}
  .hero-links{gap:8px 20px}
  .hero-links a.tlink,.crumb-link{min-height:44px;display:inline-flex;align-items:center;padding:12px 4px}
  .sound-toggle{width:46px;height:46px}

  /* editor controls */
  .seg-row button{min-height:46px;font-size:.64rem}
  .chip{min-height:44px;display:inline-flex;align-items:center;font-size:.6rem;padding:0 14px}
  .chip-row{gap:8px}
  .hat-row{gap:10px}
  .hat-btn{min-height:52px;display:flex;align-items:center;justify-content:center}
  .extra-none{min-height:52px}
  .mini-btns{gap:10px}
  .mini-btns button{min-height:44px}
  .export-size{gap:10px}
  .export-size button{min-height:44px}
  .name-row button{min-height:44px;width:48px}
  .btn-download{min-height:50px}
  .copy-btn{min-height:44px}
  .dropzone{padding:30px 16px}
  .borrow-row{gap:10px}

  /* the checkbox row reads and taps like a control, not a hairline */
  .stamp-row{min-height:44px}
  .stamp-row input{width:24px;height:24px}
  .stamp-row label{padding:10px 0}

  /* sliders: a 3px rail is not a handle. Rail stays thin, target gets tall. */
  input[type=range]{height:38px;background:transparent}
  input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:#1c2b1a}
  input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:#1c2b1a}
  input[type=range]::-webkit-slider-thumb{width:24px;height:24px;margin-top:-10px}
  input[type=range]::-moz-range-thumb{width:24px;height:24px}
  .slider-row{grid-template-columns:46px 1fr 46px;gap:12px}

  /* carousel pagination: a 4px bar inside a 44pt target */
  .lore-dashes{gap:4px;margin:12px 0 0}
  .lore-dashes span{width:46px;height:44px;background:none;box-shadow:none;overflow:visible;position:relative;border-radius:0}
  .lore-dashes span::before{content:"";position:absolute;left:6px;right:6px;top:50%;height:4px;margin-top:-2px;background:#233623;border-radius:2px}
  .lore-dashes span.on{background:none;box-shadow:none}
  .lore-dashes span i{left:6px;right:6px;top:50%;bottom:auto;height:4px;margin-top:-2px;border-radius:2px}
  .lore-hint{margin-top:6px}

  /* the chapter trail on a phone: the pins and the cards both take a thumb */
  .ch-pin{min-height:52px;padding-bottom:6px}
  .ch-arrow{width:46px;height:46px}
  .ch-lab b{font-size:11px}
  .ch-lab em{font-size:10px}
  .ch-body h3{font-size:1.2rem;line-height:1.2}
  .ch-body p{font-size:1rem;line-height:1.7}
  .ch-clock{font-size:1.1rem}

  /* modal */
  .buy-close{width:44px;height:44px;top:12px;right:12px}
  .buy-card{min-height:56px}
  .buy-adv summary{min-height:44px;display:flex;align-items:center}

  /* press feedback, since there is no hover on glass */
  .grad-pill:active,.btn-buy:active,.btn-download:active,.copy-btn:active,.chip:active,
  .hat-btn:active,.seg-row button:active,.mini-btns button:active,.buy-card:active,
  .export-size button:active,.name-row button:active{transform:scale(.97);opacity:.9}

  /* no sticky :hover artefacts left behind after a tap */
  .door:hover,.stat:hover,.glass-cards .gcard:hover,.buy-card:hover{transform:none;box-shadow:none;animation:none}
  .stat:hover .arrow-hit{animation:none;opacity:0}
  .chapter:hover .ch-media img{transform:none}
}

/* ============================================================
   LEGIBILITY — every microcopy colour now clears WCAG AA (4.5:1)
   and no interface text drops below 11px on a phone
   ============================================================ */
@media(max-width:1020px){
  .dropzone small,.hat-names,.stage-hint,.bag-fine,.lore-hint,
  .buy-primary small,.buy-adv .chain-line,.buy-fine,.disclaimer,.bag-pct,
  .foot-social a,.ca-bar .lbl,.stat .lbl{font-size:max(11px,.68rem)}
  .kicker{font-size:.72rem}
  .hero .eyebrow{font-size:.72rem}
  .ca-capsule code{font-size:.74rem}
  .marquee span{font-size:.72rem}
  .chip{letter-spacing:.1em}
}

/* ============================================================
   THE EDITOR ON A PHONE
   Canvas keeps a usable size on short screens, and a vertical
   swipe over it scrolls the page instead of trapping the finger.
   ============================================================ */
.canvas-frame{width:min(620px,100%,max(300px,calc(100svh - 200px)))}
@media (hover:none) and (pointer:coarse){
  #pfpCanvas{touch-action:pan-y}
}
@media(max-width:640px){
  .pfp-grid{grid-template-columns:1fr}
  .pfp-stage{order:0;grid-column:auto}
  .borrow-gallery{max-height:230px}
}

/* ============================================================
   MOTION — respect the system setting, and keep the compositor
   quiet on devices that are running on a battery
   ============================================================ */
@media (hover:none) and (pointer:coarse){
  .feather-fall{display:none}
  .ca-bar::before{animation:none}
}

/* type floor on touch hardware: nothing interactive under 11px, and no
   form control under 16px (Safari zooms the page when one takes focus) */
@media (hover:none) and (pointer:coarse){
  .name-row input,.bag-panel input,input[type=text]{font-size:16px}
  .grad-pill,.btn-buy,.hero-links a.tlink,.crumb-link,.copy-btn,.mini-btns button,
  .export-size button,.btn-download,.buy-card,.seg-row button,.marquee span,
  .kicker,.hero .eyebrow,.foot-social a{font-size:.72rem}
  .panel h4,.stat .lbl,.ca-bar .lbl,.door .d,.slider-row label,.slider-row output,
  .stat .sub,.buy-modal .eyebrow,.bstep,.buy-live,.chip,.stamp-row,.extra-none,
  .gcard .big small,.hat-names,.stage-hint,.lore-hint,.bag-fine,.bag-pct,
  .dropzone small,.buy-primary small,.buy-adv .chain-line,.buy-fine,.disclaimer{font-size:11px}
  .name-row button{flex:0 0 48px}
  .glass-pill a{font-size:.72rem}
  .foot-logo span,.gcard .gfoot small,.buy-adv .ca-mini code,.pk{font-size:11px}
  .scroll-cue{display:none}
}

/* the bar sits over the brightest part of the film until the page scrolls */
@media(max-width:1020px){
  nav:not(.scrolled){background:linear-gradient(180deg,rgba(4,10,6,.62),rgba(4,10,6,.28) 60%,transparent)}
}

/* ============================================================
   THE LEGEND ON A PHONE — a deck you swipe, not a wall you read
   Four chapter cards on a snapping rail. The illustration and its
   words are one object, the next card peeks in from the right, and
   nothing auto-advances while someone is reading.
   ============================================================ */
.lore-deck{display:none}
@media(max-width:900px){
  .lore-stage,.lore-chnum,.lore-caption,.lore-hint,.lore-crumbrow{display:none}
  .lore-deck{display:block;margin-top:18px}
  .lore-track{
    display:flex;align-items:stretch;gap:14px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    padding:2px 24px 10px;margin:0 -24px;
    scroll-padding-inline:24px;
    scrollbar-width:none;
  }
  .lore-track::-webkit-scrollbar{display:none}
  .lore-card{
    flex:0 0 82%;max-width:430px;scroll-snap-align:center;scroll-snap-stop:always;
    display:flex;flex-direction:column;
    background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold);
    border-radius:12px;overflow:hidden;box-shadow:0 18px 40px -22px rgba(0,0,0,.9);
  }
  .lc-media{position:relative;aspect-ratio:3/2;overflow:hidden;background:#060f08}
  .lc-media img{width:100%;height:100%;object-fit:cover;display:block}
  .lc-media::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(4,10,6,.55) 0%,rgba(4,10,6,0) 34%,rgba(11,22,13,.9) 100%);
  }
  .lc-num{
    position:absolute;left:14px;top:12px;z-index:2;
    font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.28em;
    color:var(--gold);text-shadow:0 2px 10px rgba(0,0,0,.9);
  }
  .lc-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:10px}
  .lc-body h3{
    font-family:var(--font-display);font-weight:700;font-size:1.28rem;letter-spacing:.05em;
    color:var(--cream);margin:0;
  }
  .lc-body p{margin:0;color:var(--cream-dim);font-weight:300;font-size:.97rem;line-height:1.66}
  .lc-body p b{color:var(--cream);font-weight:600}
  .lc-body a{color:var(--gold);text-decoration:none;border-bottom:1px dotted rgba(217,178,74,.5)}
  .lore-count{
    display:flex;align-items:center;justify-content:center;gap:8px;
    font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
    color:#8d8770;margin-top:14px;
  }
  .lore-count b{font-family:var(--font-display);font-size:13px;letter-spacing:.18em;color:var(--gold);font-weight:700}
  /* the rail is the progress, so the bars stop pretending to be a timer */
  .lore-dashes{margin:10px 0 0}
  .lore-dashes span.on i{animation:none;transform:scaleX(1)}
}

/* ============================================================
   EARN YOUR FEATHER ON A PHONE — the portrait stays on screen
   The canvas pins under the bar while every control scrolls past
   it, so you always see what a cap, a vibe or a slider just did.
   ============================================================ */
@media(max-width:640px){
  #cap{overflow:visible;background:#071408}
  .pfp-grid{display:block}
  .pfp-grid .panel{margin-bottom:14px}
  .pfp-stage{
    position:sticky;top:calc(84px + env(safe-area-inset-top));z-index:6;
    background:#071408;box-shadow:0 16px 20px -14px rgba(3,8,4,.95);
    padding:12px 0 12px;margin-bottom:16px;gap:8px;
  }
  .canvas-frame{width:min(100%,42svh);min-width:0}
  /* the hint used to be pinned to one line here. That line is about 470px
     of tracked-out mono, which is wider than every phone there is, so the
     page grew a sideways scroll nothing on screen explained. It wraps. */
  .stage-hint{max-width:100%;white-space:normal}
  /* the story lead-in gives the deck room to start sooner */
  .legend-intro{font-size:.95rem;padding-left:16px;margin-bottom:4px}
}
/* the picker group is a handle for moving, never a box */
#capPickers{display:contents}

/* the trail on a phone: tighter margin, the doors stack full width */
@media(max-width:640px){
  .trail{padding-left:30px;gap:12px;margin-top:20px}
  .trail-line{left:10px}
  .stop-mark{left:-30px;width:22px;height:22px;margin-top:-11px}
  .stop-home .stop-mark,.stop-buy .stop-mark{left:-32px;width:26px;height:26px;margin-top:-13px}
  .stop-card{padding:14px 16px;gap:13px}
  .stop-ico{width:42px;height:42px;border-radius:12px}
  .stop-body b{font-size:1rem}
  .stop-line{font-size:.84rem}
  .home-cta{gap:8px}
  .home-cta .grad-pill,.home-cta .btn-ghost{width:100%;text-align:center;justify-content:center}
}

/* the trail's collection and the sealed chapter, on a phone */
@media(max-width:640px){
  .crumb-take{width:100%;justify-content:center;min-height:44px;font-size:11px}
  .crumb-slots{gap:8px}
  .crumb-slot{min-height:36px;font-size:10px;letter-spacing:.12em;padding:6px 10px}
  .crumb-note{font-size:11px}
  .next-drop{flex-direction:column;align-items:flex-start;gap:14px;padding:20px}
  .seal-mark{width:54px;height:54px;font-size:1.3rem}
  .seal-clock{font-size:1.1rem}
}

/* ============================================================
   The pack trail and the chapter trail, held to the same bar:
   44pt targets, nothing under 11px, on every touch device.
   ============================================================ */
@media (hover:none) and (pointer:coarse){
  .crumb-take{min-height:44px;font-size:11px;padding:12px 20px}
  .crumb-slot{min-height:36px;font-size:11px}
  .crumb-note{font-size:11px}
  .stop-handle,.seal-kick,.seal-note{font-size:11px}
  .rec-num .lbl,.rec-num .sub,.rec-chain{font-size:11px}
  .record .ca-bar .lbl{font-size:11px}
  .rec-links a{min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:11px}
  .record .copy-btn{min-height:44px;font-size:11px}
  .home-cta .grad-pill,.home-cta .btn-ghost{min-height:44px;font-size:.72rem}
  .stop-card{min-height:64px}
}

/* ---------- 320px phones: flex children must be allowed to shrink ----------
   The outlaw-name input carried its placeholder as a min-width, which pushed
   the editor panel wider than the screen and gave the whole page a sideways
   scroll. Nothing below 400px should ever set its own floor. */
.name-row input{min-width:0}
.pfp-stage,.canvas-frame,.panel,.lore-card{min-width:0;max-width:100%}
.pfp-stage>*{max-width:100%}
.stage-hint{max-width:100%}
/* the hint wraps on every phone now, so this only has to close up the
   tracking on the narrowest ones. */
@media(max-width:370px){.stage-hint{letter-spacing:.14em}}
/* the reveal offsets slide sideways, which lets a phone swipe off the page
   before the section has animated in. On a phone they only ever rise. */
@media(max-width:1020px){.reveal.slide-l,.reveal.slide-r{transform:translateY(20px)}}

/* ---------- the hero's vertical rhythm on a phone ----------
   The pack card is a card, so its copy sits left even though the hero
   prose above it is centred, and it keeps real air from the address
   capsule it now sits under instead of butting straight into it. */
@media(max-width:1020px){
  .hero .tag{margin:12px auto 18px}
  /* the pack now follows the actions, so its air moved to the top of it */
  .hero .glass-cards{margin:20px 0 0}
  .hero-inner{padding-bottom:44px}
  .pack-card{text-align:left}
  .pack-card .ghead{margin-bottom:14px}
  .pack-card .pack-count{margin:0 0 14px}
  .ca-capsule{margin-bottom:12px}
}

/* ============================================================
   THE LEGEND ON A PHONE, PART TWO — made to be read
   The chapter was a wall: italic preamble, a 3:2 photo eating the
   fold, and body copy set at caption size. This is the reading pass.
   ============================================================ */
@media(max-width:900px){
  /* the section starts sooner */
  #legend{padding-top:74px}
  #legend .sec-head{margin-bottom:20px;gap:10px}
  #legend h2{line-height:1.02;letter-spacing:.04em}

  /* the countdown stops being grey text and becomes a live chip */
  #dropChip{
    display:inline-flex;align-items:center;
    border:1px solid rgba(217,178,74,.4);border-radius:999px;
    background:rgba(217,178,74,.08);
    padding:9px 15px;color:var(--gold)!important;
    font-size:11px;letter-spacing:.18em;
  }
  #dropChip::before{content:none}

  /* the lead-in is a subtitle, not a paragraph of italics */
  #legend .legend-intro{
    font-style:normal;font-size:.98rem;line-height:1.6;
    color:#c7c0ab;padding-left:15px;border-left-width:2px;margin-bottom:6px;
  }
  #legend .legend-intro b{color:var(--cream)}

  /* one chapter open means one article: use the whole width */
  .lore-deck.solo .lore-track{padding-left:0;padding-right:0;margin-left:0;margin-right:0;overflow:visible}
  .lore-deck.solo .lore-card{flex:0 0 100%;max-width:none}

  /* the photo gives the words the fold back */
  .lc-media{aspect-ratio:16/10}

  /* reading typography */
  .lc-body{padding:20px 20px 22px;gap:11px}
  .lc-body h3{font-size:1.36rem;line-height:1.18;letter-spacing:.04em}
  .lc-body p{
    font-size:1.06rem;line-height:1.75;color:#d9d2be;font-weight:300;
    -webkit-hyphens:none;hyphens:none;
  }
  .lc-body p b{color:#fff;font-weight:600}
  /* the chapter opens the way a storybook page does */
  .lc-body p::first-letter{
    font-family:var(--font-display);font-weight:700;color:var(--gold);
    font-size:2.7em;line-height:.8;float:left;padding:5px 11px 0 0;
  }
  .lore-count{color:#b3ab93;margin-top:16px}
}
@media(max-width:900px) and (max-height:730px){
  .lc-media{aspect-ratio:16/9}
}

/* the crumb strip: a gold headline you can scan, then the caption */
@media(max-width:900px){
  .crumb-collect{margin-top:22px}
  .crumb-slots{gap:9px}
  .crumb-slot{min-height:40px;padding:9px 14px;font-size:11px;letter-spacing:.14em}
  .crumb-note{
    max-width:34ch;margin:16px auto 0;font-size:12px;line-height:1.7;
    letter-spacing:.05em;color:#a8a08a;
  }
  .crumb-note b{
    display:block;color:var(--gold);font-size:13px;letter-spacing:.2em;
    margin-bottom:5px;
  }
  .crumb-take{font-size:12px;letter-spacing:.14em}
}

/* ============================================================
   EARN YOUR FEATHER ON A PHONE — shorter, and set to be read
   Wide-tracked mono at caption size is the hardest thing on this
   page to read, so on a phone it loosens up and grows.
   ============================================================ */
@media(max-width:900px){
  #cap{padding-top:74px}
  #cap .sec-head{margin-bottom:20px;gap:8px}
  #cap h2{line-height:1.02}
  #cap .sec-head .kicker{letter-spacing:.2em}

  #cap .legend-intro{
    font-style:normal;font-size:1.02rem;line-height:1.65;
    color:#cdc6b1;padding-left:15px;border-left-width:2px;margin-bottom:18px;
  }
  #cap .legend-intro b{color:var(--cream)}

  /* panel labels read as headings, not tracking exercises */
  .panel h4{letter-spacing:.18em;font-size:12px}
  .dropzone{padding:26px 16px}
  .dropzone b{font-size:.98rem;margin-bottom:6px}
  .dropzone small{letter-spacing:.04em;line-height:1.6}
  .hat-names{letter-spacing:.08em;line-height:1.6}
  .stage-hint{letter-spacing:.1em}
  .slider-row label,.slider-row output{letter-spacing:.1em}
  .seg-row button,.export-size button{letter-spacing:.12em}
  .chip{letter-spacing:.08em}

  /* the outlaw wall is a browse, not a scroll marathon */
  .borrow-gallery{max-height:186px;grid-template-columns:repeat(4,1fr)}
}

/* ---------- the film's own play button ----------
   When iOS refuses to autoplay, Safari paints a large play button across
   the middle of the video. The poster underneath is a designed still, and
   the button makes it look like something has gone wrong instead. hero.js
   starts the film on the visitor's first gesture, and the round control at
   the corner of the film is there for anyone who wants it explicitly, so
   the overlay has nothing left to offer. */
.hero video::-webkit-media-controls,
.hero video::-webkit-media-controls-panel,
.hero video::-webkit-media-controls-start-playback-button{
  display:none!important;-webkit-appearance:none;appearance:none;
}

/* ---------- closing the drawer ----------
   nav carries z-index:50, which makes it a stacking context of its own, so
   the burger's z-index:70 counts only among nav's own children and can never
   reach past the drawer at 60. The X was being painted underneath the panel:
   the drawer had no visible way out except the 64px strip of backdrop down
   the left. Lift the whole bar over the drawer while the menu is open and
   take its skin off, so the only thing standing above the panel is the X. */
#nav:has(.burger.open){
  z-index:65;background:transparent;border-bottom-color:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
#nav:has(.burger.open) .nav-logo{opacity:0;pointer-events:none}

/* the drawer rows keep a 44pt target without eating the whole screen */
@media (hover:none) and (pointer:coarse){
  .mob-drawer a.mlink{padding:12px}
}
@media(max-height:700px){
  .mob-drawer{padding-top:calc(72px + env(safe-area-inset-top))}
  .md-head img{width:40px;height:40px}
  .mlink .mt em{font-size:.7rem}
  .md-social a{min-height:46px}
}

/* the crumb card on a phone: the count stays big, the prose stays prose */
@media(max-width:900px){
  .crumb-collect{margin-top:24px}
  .crumb-card{padding:18px 18px 16px;border-radius:14px}
  .crumb-score{font-size:.95rem}
  .crumb-score b{font-size:1.6rem}
  .crumb-collect .crumb-slot{min-height:36px;font-size:11px;padding:8px 12px;letter-spacing:.1em}
  .crumb-collect .crumb-note{font-size:.94rem;line-height:1.65;max-width:none}
  .crumb-collect .crumb-note b{display:inline;font-size:inherit;letter-spacing:0;margin:0}
  /* the deck counter is a caption, not a headline */
  .lore-count{
    font-family:var(--font-body);font-size:.82rem;letter-spacing:.01em;
    text-transform:none;color:#a8a08a;
  }
  .lore-count b{font-family:var(--font-display);font-size:.9rem;letter-spacing:.04em}
}
@media (hover:none) and (pointer:coarse){
  .crumb-collect .crumb-slot{font-size:11px}
  .crumb-collect .crumb-note{font-size:.94rem}
}


/* ============================================================
   THE LEGEND ON DESKTOP WHEN ONLY ONE CHAPTER IS OPEN
   The stage is a three-up carousel: a big frame with a smaller one
   either side. Seal every chapter but the first and the two side
   frames vanish, the main one collapses to a small box stranded in
   the left margin, and the words end up centred a long way below
   it. One open chapter is one article, so on desktop it now uses
   the same card the phone uses, turned landscape.
   ============================================================ */
@media(min-width:901px){
  /* the carousel and its furniture retire while a single chapter is open */
  #legend:has(.lore-deck.solo) .lore-stage,
  #legend:has(.lore-deck.solo) .lore-crumbrow{display:none}
  .lore-deck.solo ~ .lore-chnum,
  .lore-deck.solo ~ .lore-caption,
  .lore-deck.solo ~ .lore-dashes,
  .lore-deck.solo ~ .lore-hint{display:none}

  .lore-deck.solo{display:block;margin-top:26px}
  .lore-deck.solo .lore-track{
    display:block;overflow:visible;padding:0;margin:0;
  }
  .lore-deck.solo .lore-card{
    display:grid;grid-template-columns:minmax(0,45%) minmax(0,55%);
    flex:none;max-width:none;
    background:linear-gradient(150deg,#0e1a11,#080f09 78%);
    border:1px solid var(--line);border-left:3px solid var(--gold);
    border-radius:18px;overflow:hidden;
    box-shadow:0 30px 72px rgba(0,0,0,.5);
  }
  /* the illustration is a full-height panel, not a postage stamp */
  .lore-deck.solo .lc-media{aspect-ratio:auto;height:100%;min-height:400px}
  .lore-deck.solo .lc-media img{height:100%;width:100%;object-fit:cover}
  .lore-deck.solo .lc-media::after{
    background:linear-gradient(90deg,rgba(4,10,6,.25) 0%,rgba(4,10,6,0) 45%,rgba(12,24,15,.85) 100%);
  }
  .lore-deck.solo .lc-num{
    left:20px;top:18px;font-size:.68rem;letter-spacing:.3em;
  }

  /* the chapter reads as a column of prose, left aligned, with room */
  .lore-deck.solo .lc-body{
    padding:40px 44px;gap:14px;justify-content:center;text-align:left;
  }
  .lore-deck.solo .lc-body h3{
    font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.08;letter-spacing:.05em;
  }
  .lore-deck.solo .lc-body p{
    font-size:1.04rem;line-height:1.78;color:#d9d2be;max-width:48ch;
  }
  .lore-deck.solo .lc-body p b{color:#fff;font-weight:600}
  .lore-deck.solo .lc-body p::first-letter{
    font-family:var(--font-display);font-weight:700;color:var(--gold);
    font-size:2.9em;line-height:.82;float:left;padding:6px 12px 0 0;
  }
  .lore-deck.solo .crumb-take{align-self:flex-start;margin-top:10px}
  .lore-deck.solo .lore-count{
    font-family:var(--font-body);font-size:.84rem;letter-spacing:.01em;
    text-transform:none;color:#a8a08a;margin-top:16px;justify-content:flex-start;
  }
  .lore-deck.solo .lore-count b{font-family:var(--font-display);font-size:.92rem;letter-spacing:.05em}

  /* the two cards under the chapter were centred against a left-aligned
     section, which is what made the column feel unresolved */
  #legend:has(.lore-deck.solo) .crumb-collect{margin-left:0;margin-right:0;max-width:620px}
  #legend:has(.lore-deck.solo) .next-drop{margin-left:0;margin-right:0;max-width:820px}
}
/* a narrow desktop window stacks the two halves rather than squeezing them */
@media(min-width:901px) and (max-width:1120px){
  .lore-deck.solo .lore-card{grid-template-columns:1fr}
  .lore-deck.solo .lc-media{min-height:0;aspect-ratio:16/9}
  .lore-deck.solo .lc-media::after{
    background:linear-gradient(180deg,rgba(4,10,6,.45),rgba(4,10,6,0) 40%,rgba(11,22,13,.9))
  }
  .lore-deck.solo .lc-body{padding:32px 34px}
}