/* ============ mobile-first: base = 375px; scale UP with min-width ============ */
  :root{
    color-scheme:dark;
    --bg:#0b0907;
    --bg2:#120d09;
    --panel:#161009;
    --paper:#efe4cf;
    --muted:#9c8b71;
    --amber:#e0a94a;
    --amber-hi:#f4c46a;
    --screen:#bcd2dc;
    --ember:#c0402a;
    --gold:#c9a24a;
    --serif:Georgia,'Iowan Old Style','Palatino Linotype',Palatino,serif;
    /* The header is fixed, so anything that docks under it needs its height. */
    --navh:63px;
    --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  }
  *{margin:0;padding:0;box-sizing:border-box}
  [hidden]{display:none !important}
  html{scroll-behavior:smooth}
  body{background:var(--bg);color:var(--paper);font-family:var(--serif);line-height:1.6;overflow-x:hidden}
  ::selection{background:var(--amber);color:#1a1204}

  /* ---------- nav: collapsed + burger ---------- */
  /* `body > nav` on purpose: the tale page has its own <nav> for chapters, and a bare
     `nav{}` rule made that one position:fixed, display:flex and unable to stay hidden. */
  body > nav{
    position:fixed;top:0;left:0;right:0;z-index:50;
    display:flex;align-items:center;justify-content:space-between;gap:.6rem;
    padding:.55rem .9rem;min-height:52px;
    background:rgba(11,9,7,.9);backdrop-filter:blur(8px);
    border-bottom:1px solid rgba(224,169,74,.22);
  }
  .brand{
    font-size:.95rem;letter-spacing:.16em;color:var(--amber-hi);text-decoration:none;
    font-variant:small-caps;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .brand .b,.marquee .b{color:var(--ember)}
  .menu-btn{flex:none;min-width:44px;min-height:44px;background:none;border:1px solid rgba(224,169,74,.4);border-radius:2px;color:var(--amber-hi);font-size:1.1rem;cursor:pointer}
  .menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;list-style:none;background:rgba(11,9,7,.98);border-bottom:1px solid rgba(224,169,74,.35)}
  .menu.open{display:flex}
  .menu a{display:block;padding:.95rem 1.2rem;color:var(--paper);text-decoration:none;font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;border-top:1px solid rgba(224,169,74,.14)}

  /* ---------- hero: the theater from the back ---------- */
  header.hero{
    position:relative;min-height:100svh;overflow:hidden;
    display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
    text-align:center;padding:5rem 1rem 2rem;
    background:radial-gradient(ellipse 120% 80% at 50% 120%, #1a130b 0%, var(--bg) 55%);
  }
  /* ---- 3-state reveal stage: covers the hero in 1344:768 image-space so overlays track the crop ---- */
  .stage{position:absolute;top:50%;left:50%;transform:translate(-51%,-54%) scale(1.08);  /* -51% (not -50%): plates bake the screen at 51% image-x; this lands it on true viewport-center */
    width:max(100vw, calc(100svh * 1344 / 768));aspect-ratio:1344/768;z-index:1;overflow:hidden}
  .state{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:0;transition:opacity 1.6s ease;
    filter:saturate(.86) sepia(.16) brightness(1.03) contrast(1.02)}   /* tame the cold teal, nudge warm (grade, not new art) */
  #st-human{opacity:1}
  .state.on{opacity:1}
  /* the blank-screen slot (image %-coords) holds our randomized "now showing" content */
  .screen-slot{position:absolute;left:33.5%;top:20%;width:35%;height:31.5%;z-index:3;overflow:hidden;
    display:flex;align-items:center;justify-content:center;opacity:.85;transition:opacity 1s ease}
  .screen-slot.hidden{opacity:0}
  .screen-slot .sc{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#0a1518}
  .screen-slot .sc.show{display:flex}
  .sc-film{padding:0}
  .sc-film video{width:100%;height:100%;object-fit:cover;opacity:.9;display:block}
  .sc-rest{padding:0}   /* the host's mask, at rest — shown when the film can't/won't play */
  .sc-rest .rest-img{width:100%;height:100%;object-fit:cover;opacity:.94;display:block}
  .sc-leader{color:var(--amber-hi)}
  .sc-leader .lring,.sc-leader .lsweep,.sc-leader .lcross{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:86%;aspect-ratio:1}
  .sc-leader .lring{border-radius:50%;border:1.5px solid rgba(224,169,74,.5);box-shadow:inset 0 0 22px rgba(224,169,74,.08)}
  .sc-leader .lsweep{border-radius:50%;transition:transform .45s cubic-bezier(.5,0,.3,1);background:conic-gradient(from 0deg, rgba(224,169,74,.4) 0deg 90deg, transparent 90deg 180deg, rgba(224,169,74,.4) 180deg 270deg, transparent 270deg 360deg)}
  .sc-leader .lcross::before,.sc-leader .lcross::after{content:"";position:absolute;background:rgba(224,169,74,.55)}
  .sc-leader .lcross::before{top:0;bottom:0;left:50%;width:1.5px;transform:translateX(-.75px)}
  .sc-leader .lcross::after{left:0;right:0;top:50%;height:1.5px;transform:translateY(-.75px)}
  .sc-leader .ln{position:relative;font-family:var(--serif);font-weight:800;font-size:min(9vw,3.4rem);line-height:1;color:var(--amber-hi);text-shadow:0 0 18px rgba(224,169,74,.5)}
  /* soul-wisps drift up over REVEALED only */
  .wisps{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity 1.8s ease}
  .wisps.on{opacity:.5}
  .wisp{position:absolute;bottom:36%;width:4.5%;height:15%;border-radius:50%;
    background:radial-gradient(ellipse, rgba(185,220,225,.55), transparent 70%);filter:blur(4px)}
  /* ambience over everything */
  .amb-grain{position:absolute;inset:0;z-index:4;pointer-events:none;background:var(--grain);opacity:.07;mix-blend-mode:overlay}
  .amb-vig{position:absolute;inset:0;z-index:4;pointer-events:none;
    background:radial-gradient(ellipse 82% 72% at 50% 40%, transparent 42%, rgba(6,4,2,.5) 100%),
      linear-gradient(180deg, rgba(6,4,2,.42) 0%, transparent 24%, transparent 54%, rgba(6,4,2,.85) 100%)}
  /* black wispy haze behind the hero text — SVG fractal-noise wisps, thresholded for clean edges,
     contained in a soft ellipse; DESKTOP ONLY (off on mobile) */
  .text-haze{
    position:absolute;inset:0;z-index:4;pointer-events:none;
    background:linear-gradient(180deg, transparent 30%, rgba(5,3,2,.42) 45%, rgba(5,3,2,.58) 56%, rgba(5,3,2,.5) 76%, rgba(5,3,2,.34) 100%);
  }
  /* constant 'room' atmosphere — sits on ALL 3 plates so a swap reads as the room shifting, not a new picture */
  .beam2{position:absolute;top:-6%;left:50%;transform:translateX(-50%);width:52%;height:72%;z-index:2;pointer-events:none;
    background:linear-gradient(180deg, rgba(240,200,132,.17), rgba(236,196,140,.05) 55%, transparent);
    clip-path:polygon(44% 0,56% 0,88% 100%,12% 100%);mix-blend-mode:screen}
  .haze{position:absolute;inset:-15%;z-index:2;pointer-events:none;opacity:.6;mix-blend-mode:screen;
    background:radial-gradient(60% 50% at 30% 42%, rgba(120,140,150,.06), transparent 70%),
      radial-gradient(52% 46% at 72% 56%, rgba(120,96,60,.05), transparent 70%)}
  /* warm color-grade over the room (below the screen-slot so the now-showing content keeps its own color) */
  .grade{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:soft-light;
    background:linear-gradient(180deg, rgba(232,176,96,.28) 0%, rgba(198,120,72,.12) 44%, rgba(122,34,54,.20) 100%)}
  .glow{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;
    background:radial-gradient(44% 32% at 50% 22%, rgba(255,196,120,.20), transparent 66%),   /* warm light off the screen */
      radial-gradient(90% 60% at 50% 122%, rgba(150,54,44,.12), transparent 68%)}             /* faint crimson from the rows */
  .edge{position:absolute;inset:0;z-index:4;pointer-events:none;                              /* harlequin crimson creeping in at the frame */
    background:radial-gradient(120% 82% at 50% 44%, transparent 46%, rgba(108,16,40,.26) 80%, rgba(130,22,48,.46) 100%)}
  /* transition: shadow-mist closes in from the sides; the scene changes inside the dark, then it recedes */
  .mist{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}
  /* lumpy radial ovals at different heights → billowing cloud edge, not a soft wall */
  .veil{position:absolute;top:-28%;bottom:-28%;width:88%;filter:blur(46px);opacity:0;will-change:transform,opacity}
  .veil.l{left:0;transform:translateX(-120%);background:
    radial-gradient(72% 42% at 2% 22%, #050302 42%, transparent 80%),
    radial-gradient(84% 50% at 0% 52%, #050302 44%, transparent 82%),
    radial-gradient(64% 40% at 4% 84%, #050302 42%, transparent 78%)}
  .veil.r{right:0;transform:translateX(120%);background:
    radial-gradient(72% 42% at 98% 30%, #050302 42%, transparent 80%),
    radial-gradient(84% 50% at 100% 60%, #050302 44%, transparent 82%),
    radial-gradient(64% 40% at 96% 86%, #050302 42%, transparent 78%)}
  .veil-fog{position:absolute;inset:-30%;z-index:5;pointer-events:none;background:var(--grain);background-size:240px 240px;opacity:0;mix-blend-mode:multiply;filter:blur(3px);will-change:opacity,background-position}
  .stage.cutting .state,.stage.cutting .wisps,.stage.cutting .screen-slot{transition:none}

  .hero-copy{position:relative;z-index:5;margin-top:auto;padding-top:34svh}
  .marquee-sub{font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
  .marquee{
    font-size:clamp(1.9rem,8vw,3.6rem);font-weight:400;letter-spacing:.08em;font-variant:small-caps;
    color:var(--amber-hi);text-shadow:0 0 26px rgba(224,169,74,.5), 0 2px 0 #3a2a10;
  }
  .marquee-sub,.presents,.tagline{text-shadow:0 2px 12px rgba(0,0,0,.9)}
  .presents{margin-top:.4rem;font-style:italic;color:var(--paper);font-size:clamp(.95rem,3.6vw,1.2rem)}
  .tagline{margin:1.3rem auto 0;max-width:40rem;font-style:italic;color:var(--muted);font-size:.98rem}
  .cta-row{margin-top:1.8rem;display:flex;flex-direction:column;align-items:stretch;gap:.9rem;width:100%}
  .btn{display:inline-block;padding:.85rem 1.5rem;min-height:44px;font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;border-radius:2px;text-align:center;font-family:var(--serif);transition:background .2s,color .2s}
  .btn-amber{background:var(--amber);color:#1a1204;border:1px solid var(--amber-hi)}
  .btn-ghost{background:transparent;color:var(--amber-hi);border:1px solid rgba(224,169,74,.55)}
  .scroll-hint{position:absolute;bottom:.8rem;left:50%;transform:translateX(-50%);z-index:5;color:var(--muted);font-size:1.4rem;text-decoration:none;padding:.4rem;animation:bob 2.4s infinite ease-in-out}
  @keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

  /* ---------- sections ---------- */
  section{padding:3.5rem 1rem;position:relative}
  .shell{max-width:74rem;margin:0 auto}
  .sec-head{text-align:center;margin-bottom:2.2rem}
  .sec-head .over{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ember)}
  .sec-head h2{font-size:clamp(1.7rem,6vw,2.6rem);font-weight:400;letter-spacing:.05em;font-variant:small-caps;margin:.35rem 0 .5rem;color:var(--amber-hi)}
  .sec-head .aside{font-style:italic;color:var(--muted);max-width:40rem;margin:0 auto;font-size:.95rem}

  /* now showing — poster cards */
  #showing{background:var(--bg2)}
  /* showtime shelf — the age/tone axis, in theater language instead of a "kids" label */
  /* ONE chip component for every single-select filter. There used to be a segmented bar for
     showtime and pills for genre — two idioms doing the same job, stacked, eating a third of a
     phone screen before the first result. They are anchors now (each state is a real URL), which
     is why text-decoration has to be turned off explicitly. */
  .chiprow{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin-bottom:.9rem}
  .crlabel{flex:0 0 100%;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
           color:var(--muted);margin-bottom:.1rem}
  .chip{flex:none;display:inline-flex;align-items:center;text-decoration:none;
        font-family:var(--serif);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
        padding:.5rem .85rem;min-height:44px;border-radius:999px;cursor:pointer;
        background:transparent;color:var(--muted);border:1px solid rgba(156,139,113,.4)}
  .chip.active{background:var(--amber);border-color:var(--amber);color:#1a1204;font-weight:700}
  .chip.active.late{background:var(--ember);border-color:var(--ember);color:var(--paper)}
  /* Each chip carries what it would return. A chip that would return nothing is dead rather than
     hidden — the shelf stays legible, and you learn the shape of the catalog by looking at it. */
  .chip .cn{margin-left:.45rem;font-size:.66rem;opacity:.65;font-variant-numeric:tabular-nums}
  .chip.dead{opacity:.3;pointer-events:none}
  .chip.active .cn{opacity:.75}
  .crlabel em{font-style:italic;text-transform:none;letter-spacing:.02em;opacity:.75;margin-left:.4rem}
  .grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
  .poster{background:var(--panel);border:1px solid rgba(224,169,74,.16);border-radius:3px;overflow:hidden;display:flex;flex-direction:column}
  .poster .art{position:relative;aspect-ratio:2/3;overflow:hidden;background:#0d0a06}
  .poster .art img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.82) sepia(.12)}
  .poster .rt{position:absolute;top:.4rem;right:.4rem;font-size:.6rem;letter-spacing:.08em;background:rgba(11,9,7,.85);border:1px solid rgba(224,169,74,.3);color:var(--amber-hi);padding:.15rem .4rem;border-radius:2px}
  .poster .rating{position:absolute;top:.4rem;left:.4rem;font-size:.58rem;letter-spacing:.06em;background:rgba(11,9,7,.85);border:1px solid var(--ember);color:var(--ember);padding:.12rem .35rem;border-radius:2px}
  .poster .meta{padding:.7rem .75rem .8rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
  .poster h3{font-size:1rem;font-weight:400;letter-spacing:.02em}
  .poster .log{font-size:.82rem;font-style:italic;color:#c6b795;flex:1}
  .poster .foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(156,139,113,.18);padding-top:.35rem;font-size:.78rem;color:var(--muted)}
  .poster .foot button,.poster .foot a.cta{text-decoration:none;font-family:var(--serif);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;background:none;border:none;cursor:pointer;color:var(--amber-hi);padding:.6rem 0;min-height:44px}
  .poster .seen,.poster .newb{position:absolute;bottom:.45rem;left:.45rem;z-index:2;font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;padding:.16rem .42rem;border-radius:2px}
  .poster .seen{background:rgba(11,9,7,.85);border:1px solid rgba(224,169,74,.4);color:var(--amber-hi)}
  .poster .newb{background:var(--ember);border:1px solid var(--ember);color:#fff;font-weight:700}
  .poster .cardprog{position:absolute;left:0;right:0;bottom:0;height:4px;z-index:2;background:rgba(11,9,7,.7)}
  .poster .cardprog i{display:block;height:100%;background:var(--ember)}
  .your-reel{margin-bottom:1.6rem}
  .your-reel .reel-lbl{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:.75rem}
  .reel-row{display:flex;gap:.7rem;overflow-x:auto;padding-bottom:.4rem;-webkit-overflow-scrolling:touch}
  .reel-item{flex:0 0 auto;text-decoration:none;color:inherit;width:92px;padding:0;background:none;border:none;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:.3rem}
  .reel-item img{width:92px;height:138px;object-fit:cover;border-radius:2px;border:1px solid rgba(224,169,74,.2);filter:brightness(.82) sepia(.12)}
  .reel-item .rl-t{font-size:.66rem;letter-spacing:.02em;color:var(--paper);line-height:1.2}
  .reel-item .rl-s{font-size:.62rem;color:var(--amber-hi)}
  .book-end .upnext{margin-top:1.4rem;font-family:var(--serif);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;background:none;border:1px solid rgba(224,169,74,.4);color:var(--amber-hi);padding:.65rem 1.15rem;border-radius:2px;cursor:pointer;min-height:44px}

  /* feature presentation — marrow */
  #feature .card{max-width:56rem;margin:0 auto;border:1px solid rgba(192,64,42,.4);background:linear-gradient(160deg,#160d09,#0d0a12);padding:1.8rem 1.1rem;text-align:center}
  #feature .card img.fc{display:block;width:150px;margin:0 auto 1.4rem;border:1px solid rgba(224,169,74,.45);box-shadow:0 10px 26px rgba(0,0,0,.5)}
  #feature h3{font-size:clamp(1.5rem,6vw,2.3rem);font-weight:400;font-variant:small-caps;letter-spacing:.1em;color:var(--amber-hi)}
  #feature .sub{color:var(--amber);font-style:italic;margin:.3rem 0 1.2rem;font-size:.92rem}
  #feature p.desc{color:#cfc3ab;max-width:44rem;margin:0 auto 1.4rem;font-size:.95rem}
  #feature .row{display:flex;flex-direction:column;align-items:stretch;gap:.9rem;max-width:20rem;margin:0 auto 1.2rem}
  #feature .sealed{margin-top:1.2rem;font-style:italic;color:var(--muted);font-size:.88rem;border-top:1px dashed rgba(224,169,74,.3);padding-top:1.1rem}

  /* the host — bio */
  #host{background:var(--bg2)}
  .bio{max-width:52rem;margin:0 auto}
  .bio .lede{font-size:1.1rem;color:var(--paper)}
  .bio p{margin-bottom:1rem;color:#d6c9ad;font-size:.97rem}
  .bio .booth{border:1px solid rgba(224,169,74,.35);background:radial-gradient(ellipse at 50% 30%,#1c140b,#0d0906);padding:1.4rem;text-align:center;max-width:300px;margin:0 auto 1.8rem}
  .bio .booth .icon{font-size:3rem}
  .bio .booth .plate{margin-top:.6rem;font-variant:small-caps;letter-spacing:.16em;color:var(--amber-hi);font-size:.9rem}
  .bio .booth .plate small{display:block;color:var(--muted);letter-spacing:.1em;font-size:.7rem;margin-top:.2rem}

  /* box office — find me */
  #boxoffice{background:var(--bg)}
  .tickets{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;max-width:60rem;margin:0 auto}
  .ticket{display:block;text-decoration:none;text-align:center;background:var(--panel);border:1px solid rgba(224,169,74,.2);padding:1.2rem .7rem;color:var(--paper)}
  .ticket .g{font-size:1.5rem;display:block;margin-bottom:.4rem}
  .ticket .n{letter-spacing:.12em;text-transform:uppercase;font-size:.84rem}
  .ticket .h{display:block;color:var(--muted);font-size:.76rem;margin-top:.3rem;font-style:italic}
  .ticket.dim{opacity:.45;cursor:default}

  footer{padding:2.4rem 1rem;text-align:center;color:var(--muted);font-size:.84rem;border-top:1px solid rgba(224,169,74,.16)}
  footer .wink{font-style:italic;margin-top:.5rem;opacity:.85}


  .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

  /* ---------- front page: bounded ---------- */
  .seeall{text-align:center;margin-top:1.6rem}
  .bills{margin-top:.9rem;font-size:.86rem;font-style:italic;color:var(--muted)}
  .bills a{color:var(--amber-hi);text-decoration:none;border-bottom:1px solid rgba(224,169,74,.35);
           display:inline-block;min-height:44px;line-height:44px}
  .bills a:hover{border-bottom-color:var(--amber-hi)}
  /* A shelf costs ONE row of height no matter how big the catalog gets. That is the whole point —
     it is why the front page stops growing when he publishes weekly. */
  .shelf{margin-top:2.6rem}
  .sec-head.tight{margin-bottom:.8rem}
  .sec-head.tight h3{font-size:1.1rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-hi)}
  .shelfrow{display:flex;gap:.7rem;overflow-x:auto;scroll-snap-type:x proximity;
            -webkit-overflow-scrolling:touch;padding-bottom:.5rem;scrollbar-width:thin}
  .shelfitem{flex:0 0 auto;width:112px;scroll-snap-align:start;text-decoration:none;color:inherit;
             display:flex;flex-direction:column;gap:.3rem}
  .shelfitem img{width:112px;height:168px;object-fit:cover;border-radius:2px;
                 border:1px solid rgba(224,169,74,.2);filter:brightness(.82) sepia(.12)}
  .shelfitem:hover img{filter:brightness(1) sepia(.04);border-color:rgba(224,169,74,.5)}
  .si-t{font-size:.76rem;line-height:1.25;color:var(--paper)}
  .si-s{font-size:.68rem;color:var(--muted)}

  /* ---------- library ---------- */
  .libtools{display:grid;gap:.6rem;margin-bottom:1rem}
  .toolrow{display:flex;align-items:center;gap:.5rem}
  .trgap{flex:1}
  .ftoggle{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:0 .9rem;
    background:none;border:1px solid rgba(224,169,74,.4);border-radius:2px;color:var(--amber-hi);
    font-family:var(--serif);font-size:.82rem;letter-spacing:.06em;cursor:pointer}
  .ftoggle .caret{transition:transform .18s}
  .ftoggle[aria-expanded="true"] .caret{transform:rotate(180deg)}
  .fcount{display:inline-grid;place-items:center;min-width:1.15rem;height:1.15rem;padding:0 .25rem;
    border-radius:999px;background:var(--amber);color:#1a1204;font-size:.68rem;font-weight:700}
  /* Collapsed by default on a phone; the script opens it whenever a filter is actually applied. */
  /* Applied filters, shown whether or not the panel is open — one line instead of two screens. */
  .applied{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
  .applied:empty{display:none}
  .apill,.apclear{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;padding:0 .7rem;
    border-radius:999px;text-decoration:none;font-size:.74rem;letter-spacing:.06em;
    background:rgba(224,169,74,.14);border:1px solid rgba(224,169,74,.4);color:var(--amber-hi)}
  .apill i{font-style:normal;font-size:.95rem;line-height:1;opacity:.7}
  .apill:hover i{opacity:1}
  .apclear{background:none;border-color:rgba(156,139,113,.4);color:var(--muted)}
  .apclear:hover{color:var(--ember);border-color:var(--ember)}
  .fpanel{display:none;padding:.9rem .9rem .1rem;background:rgba(11,9,7,.5);
          border:1px solid rgba(224,169,74,.16);border-radius:3px}
  .fpanel.open{display:block}
  .sortline .sortsel{flex:1 1 12rem;min-width:0}
  .clearall{flex:none;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
            color:var(--muted);text-decoration:underline;min-height:44px;display:inline-flex;align-items:center}
  .clearall:hover{color:var(--ember)}
  .srch input{width:100%;min-height:44px;padding:.7rem .8rem;background:var(--panel);
    border:1px solid rgba(224,169,74,.28);border-radius:2px;color:var(--paper);
    font-family:var(--serif);font-size:1rem}
  .srch input:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 2px rgba(224,169,74,.18)}
  .sortsel select{width:100%;min-height:44px;padding:.6rem .8rem;background:var(--panel);
    border:1px solid rgba(224,169,74,.28);border-radius:2px;color:var(--paper);
    font-family:var(--serif);font-size:.9rem;cursor:pointer;appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,var(--amber-hi) 50%),linear-gradient(135deg,var(--amber-hi) 50%,transparent 50%);
    background-position:calc(100% - 18px) 20px,calc(100% - 12px) 20px;background-size:6px 6px;background-repeat:no-repeat}
  .views{display:flex}
  .views button{flex:1;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
    background:none;border:1px solid rgba(224,169,74,.4);color:var(--muted);cursor:pointer;
    font-family:var(--serif);font-size:.82rem}
  .views button span{display:none}      /* glyph only on a phone — the words collided with the icons */
  .views button:first-child{border-radius:2px 0 0 2px}
  .views button:last-child{border-radius:0 2px 2px 0;margin-left:-1px}
  .views button[aria-pressed="true"]{background:rgba(224,169,74,.18);color:var(--amber-hi)}
  .libbar{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
          margin:1.1rem 0 .9rem;flex-wrap:wrap}
  .libcount{font-size:.78rem;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
  .surprise{min-height:44px;padding:0 .9rem;background:none;border:1px solid rgba(224,169,74,.4);
    border-radius:2px;color:var(--amber-hi);font-family:var(--serif);font-size:.82rem;cursor:pointer}
  .surprise:hover{background:rgba(224,169,74,.15)}

  /* The LIST is the default view. For a 1,000-word tale the first line sells it, not the cover —
     which is what every short-fiction archive (Nightmare, PseudoPod) converged on. */
  .llist{display:grid;gap:.1rem}
  .lrow{display:flex;gap:.9rem;padding:1rem .2rem;text-decoration:none;color:inherit;
        border-top:1px solid rgba(156,139,113,.16)}
  .lrow:first-child{border-top:0}
  .lrow:hover{background:rgba(224,169,74,.045)}
  .lcov{flex:none;width:70px;height:105px;object-fit:cover;border-radius:2px;
        border:1px solid rgba(224,169,74,.2);filter:brightness(.82) sepia(.12)}
  .lbody{min-width:0;display:flex;flex-direction:column;gap:.28rem}
  .lhead{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
  .ltitle{font-size:1rem;font-weight:400;letter-spacing:.03em;color:var(--amber-hi)}
  .tag{flex:none;font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;padding:.16rem .42rem;border-radius:2px}
  .tag.seen{border:1px solid rgba(224,169,74,.4);color:var(--amber-hi)}
  .tag.part{border:1px solid rgba(156,139,113,.5);color:var(--muted)}
  .tag.newb{background:var(--ember);color:#fff;font-weight:700}
  .lmeta{font-size:.72rem;letter-spacing:.04em;color:var(--muted)}
  .lex{font-size:.86rem;line-height:1.55;color:#c6b795;font-style:italic}
  .lgo{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-hi)}

  .pager2{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.35rem;margin-top:2rem}
  .pg{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
      padding:0 .6rem;text-decoration:none;border:1px solid rgba(224,169,74,.35);border-radius:2px;
      color:var(--amber-hi);font-family:var(--serif);font-size:.82rem}
  .pg.on{background:rgba(224,169,74,.2);border-color:var(--amber)}
  .pg.off{opacity:.3;pointer-events:none}
  .pg span{display:none}
  .pgap{color:var(--muted);padding:0 .2rem}

  /* ---------- signup: the front page's actual conversion ---------- */
  .signup{background:var(--panel);border:1px solid rgba(224,169,74,.2);border-radius:3px;
          padding:1.2rem 1.1rem;max-width:44rem;margin:0 auto}
  .sudesc{font-size:.92rem;color:#c6b795;margin-bottom:1rem}
  .suform{display:grid;gap:.6rem}
  .suform input[type=email]{width:100%;min-height:48px;padding:.75rem .85rem;background:rgba(11,9,7,.6);
    border:1px solid rgba(224,169,74,.3);border-radius:2px;color:var(--paper);
    font-family:var(--serif);font-size:1rem}
  .suform input[type=email]:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 2px rgba(224,169,74,.18)}
  .suform input.bad{border-color:var(--ember)}
  .suerr{min-height:1.2em;margin-top:.5rem;font-size:.84rem;color:var(--ember)}
  .sunote{margin-top:.6rem;font-size:.78rem;font-style:italic;color:var(--muted)}
  .sunote b{color:var(--amber-hi);font-style:normal}
  .suok{max-width:44rem;margin:0 auto}

  /* ---------- footer ----------
     The channel links live here now instead of on a page of their own. They are on every page
     rather than one, and it matches what they have become: once he posts here first, Wattpad and
     the rest are syndication endpoints, not destinations. */
  .fshell{display:grid;gap:1.4rem;max-width:60rem;margin:0 auto 1.4rem;text-align:left}
  .flabel{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
  footer ul{list-style:none;display:flex;flex-wrap:wrap;gap:.2rem 1.1rem}
  footer li a{display:inline-block;min-height:44px;line-height:44px;color:var(--paper);
              text-decoration:none;font-size:.88rem}
  footer li a:hover{color:var(--amber-hi)}
  .fcopy{font-size:.82rem}
  /* The way back of house. Deliberately quiet — it is a door, not a feature. */
  .fadmin{color:var(--muted) !important;font-size:.8rem}
  .fadmin:hover{color:var(--amber-hi) !important}
  .fby{margin-top:.9rem;font-size:.76rem;color:var(--muted);opacity:.85}
  .fby a{color:var(--muted);text-decoration:none;border-bottom:1px solid rgba(156,139,113,.35)}
  .fby a:hover{color:var(--amber-hi);border-bottom-color:var(--amber-hi)}

  /* ---------- pages without a hero: give the nav somewhere to land ---------- */
  .pagetop{height:1.5rem}

  /* ---------- contact: the box-office window ---------- */
  .windows{display:grid;gap:.8rem}
  .window{display:grid;gap:.2rem;padding:1.1rem 1rem;text-decoration:none;background:var(--panel);
          border:1px solid rgba(224,169,74,.18);border-radius:3px}
  .window .g{font-size:1.4rem;line-height:1}
  .window .wt{font-variant:small-caps;letter-spacing:.14em;color:var(--amber-hi);font-size:1.05rem}
  .window .wa{font-family:var(--serif);color:var(--paper);word-break:break-all}
  .window .wh{font-size:.84rem;font-style:italic;color:var(--muted);margin-top:.3rem}
  .window:hover{border-color:rgba(224,169,74,.45)}
  /* ---------- contact form ---------- */
  .cform{display:grid;gap:1rem;margin-bottom:2rem}
  .f2{display:grid;gap:1rem}
  .fld{display:grid;gap:.35rem}
  .fld > span{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .fld input,.fld select,.fld textarea{width:100%;min-height:44px;padding:.7rem .8rem;
    background:var(--panel);border:1px solid rgba(224,169,74,.28);border-radius:2px;
    color:var(--paper);font-family:var(--serif);font-size:1rem;line-height:1.5}
  .fld textarea{resize:vertical;min-height:9rem}
  .fld select{appearance:none;cursor:pointer;
    background-image:linear-gradient(45deg,transparent 50%,var(--amber-hi) 50%),linear-gradient(135deg,var(--amber-hi) 50%,transparent 50%);
    background-position:calc(100% - 18px) 20px,calc(100% - 12px) 20px;background-size:6px 6px;background-repeat:no-repeat}
  .fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--amber);
    box-shadow:0 0 0 2px rgba(224,169,74,.18)}
  .fld input.bad,.fld textarea.bad{border-color:var(--ember)}
  .fld small{font-size:.74rem;color:var(--muted);font-style:italic}
  .err{display:block;font-style:normal;font-size:.78rem;color:var(--ember);min-height:1.1em}
  .err:empty{min-height:0}
  .pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .frow{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
  .frow .btn{flex:1 1 auto}
  .fstate{font-size:.82rem;font-style:italic;color:var(--muted)}
  .cform button[disabled]{opacity:.55;cursor:default}
  .cnote.mock{background:var(--panel);border:1px solid rgba(224,169,74,.18);border-radius:3px;
    padding:.8rem .9rem;margin-top:0}
  .cnote.mock b{color:var(--amber-hi);font-style:normal}
  .sent{text-align:center;background:var(--panel);border:1px solid rgba(224,169,74,.3);
    border-radius:3px;padding:2rem 1.1rem;margin-bottom:2rem}
  .sent .fin{letter-spacing:.34em;color:var(--ember);text-transform:uppercase;font-size:.85rem;margin-bottom:1rem}
  .sent .sentmsg{color:var(--paper);margin-bottom:.7rem}
  .sent .aside{margin-bottom:1.3rem}

  .cnote{margin-top:1.1rem;font-size:.84rem;font-style:italic;color:var(--muted)}
  .cnote a{color:var(--amber-hi)}

  /* ---------- the tale page ----------
     Two reading modes off one document. Scroll is the default because a growing book on a phone
     wants to be an article; pages keeps the theater conceit for anyone who prefers it. */
  .tale{position:relative}
  .readbar{position:fixed;top:0;left:0;height:2px;width:0;z-index:120;
           background:linear-gradient(90deg,var(--ember),var(--amber-hi))}
  .tale-head{padding:calc(var(--navh) + 1.1rem) 1.1rem .2rem;max-width:46rem;margin:0 auto}
  .backlink{display:inline-block;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
            color:var(--muted);text-decoration:none;margin-bottom:.9rem;min-height:44px;line-height:44px}
  .backlink:hover{color:var(--amber-hi)}
  .tale-head h1{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,6vw,2.1rem);
                letter-spacing:.06em;color:var(--amber-hi);font-variant:small-caps}
  .tale-meta{font-size:.74rem;letter-spacing:.06em;color:var(--muted);margin-top:.35rem}
  .tale-log{font-family:var(--serif);font-style:italic;color:#c6b795;margin-top:.6rem}

  /* Tools stay reachable while reading — sticky, one row, no wrap at 375. */
  .tale-tools{position:sticky;top:var(--navh);z-index:60;display:flex;align-items:center;gap:.35rem;
              padding:.5rem .8rem;margin-top:1rem;background:rgba(11,9,7,.94);
              backdrop-filter:blur(8px);border-top:1px solid rgba(224,169,74,.18);
              border-bottom:1px solid rgba(224,169,74,.18)}
  .tale-tools .tgap{flex:1}
  .tbtn,.modes button{min-height:44px;display:inline-flex;align-items:center;gap:.3rem;padding:0 .55rem;
        cursor:pointer;text-decoration:none;background:none;border:1px solid rgba(224,169,74,.4);
        border-radius:2px;color:var(--amber-hi);font-family:var(--serif);font-size:.8rem}
  .modes{display:flex}
  .modes button{border-radius:0}
  .modes button:first-child{border-radius:2px 0 0 2px}
  .modes button:last-child{border-radius:0 2px 2px 0;margin-left:-1px}
  .modes button[aria-pressed="true"]{background:rgba(224,169,74,.18);color:var(--amber-hi)}
  .modes button[aria-pressed="false"]{color:var(--muted)}
  .tbtn span,.modes button span{display:none}          /* glyph only on a phone; words once there is room */
  .chapters{position:sticky;top:calc(var(--navh) + 3.6rem);z-index:59;max-height:60vh;overflow:auto;
            background:rgba(11,9,7,.97);border-bottom:1px solid rgba(224,169,74,.25)}
  .chapters a{display:block;padding:.85rem 1rem;min-height:44px;color:var(--paper);text-decoration:none;
              font-family:var(--serif);font-size:.9rem;border-bottom:1px solid rgba(156,139,113,.14)}
  .chapters a:hover{background:rgba(224,169,74,.1);color:var(--amber-hi)}
  .threading{text-align:center;color:var(--muted);padding:3rem 1rem}
  .ch{font-family:var(--serif);font-weight:700;font-size:1.05rem;color:var(--amber-hi);
      letter-spacing:.04em;margin:1.8em 0 .7em;scroll-margin-top:calc(var(--navh) + 4rem)}
  .book-pages > .ch:first-child{margin-top:0}

  /* Scroll mode: an ordinary article, with a readable measure. */
  .mode-scroll .book-area{padding:1.4rem 1.1rem 3rem}
  .mode-scroll .book-pages{max-width:38rem;margin:0 auto;height:auto;transition:none}

  /* Pages mode: the paginated book. The whole article is one viewport-tall flex column and the
     page area simply takes what is left — subtracting guessed toolbar heights was off by 9px and
     left the page scrolling behind a reader that is supposed to fill the screen exactly. */
  .mode-pages{display:flex;flex-direction:column;height:100dvh;padding-top:var(--navh)}
  .mode-pages .tale-head,.mode-pages .readbar{display:none}
  .mode-pages .tale-tools{position:static;margin-top:0;flex:none}
  .mode-pages .chapters{position:static;flex:none;max-height:50vh}
  .mode-pages .book-area{flex:1;min-height:0;overflow:hidden;position:relative;padding:1.2rem 1.1rem}
  .mode-pages .book-pages{height:100%;column-fill:auto;transition:transform .25s}
  .mode-pages .reader-bottom{flex:none}
  /* Pages mode fills the screen — the site footer below it is what was still scrolling. */
  .mode-pages ~ footer{display:none}

  /* ---------- reader prose (warm celluloid) ---------- */
  .book-area{position:relative}
  .book-pages p{margin:0 0 1em;color:#e4d8bd;line-height:1.65;font-family:var(--serif)}
  .book-pages > p:first-child{font-variant:small-caps;letter-spacing:.1em;color:var(--amber-hi)}
  .book-end{text-align:center;padding-top:1.5rem}
  .book-end .fin{letter-spacing:.4em;color:var(--ember);text-transform:uppercase;font-size:.9rem;margin-bottom:1rem}
  .book-end .outro{font-style:italic;color:var(--muted);margin-bottom:1.2rem}
  .book-end a{color:var(--amber-hi)}
  .reader-bottom{display:flex;align-items:center;gap:.8rem;padding:.45rem .9rem;background:rgba(11,9,7,.95);border-top:1px solid rgba(224,169,74,.25)}
  .reader-bottom button{min-width:44px;min-height:44px;cursor:pointer;background:none;border:1px solid rgba(224,169,74,.5);border-radius:2px;color:var(--amber-hi);font-family:var(--serif);font-size:.8rem}
  .reader-bottom button:disabled{opacity:.3;cursor:default}
  .pg-mid{flex:1;min-width:0}
  .pg-track{height:3px;background:rgba(156,139,113,.25);border-radius:2px;overflow:hidden;margin-bottom:.3rem}
  .pg-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ember),var(--amber-hi))}
  #pgLabel{display:block;text-align:center;font-size:.68rem;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}

  /* ============ tablet: min-width 768px ============ */
  @media (min-width:768px){
    :root{--navh:56px}
    body > nav{padding:.65rem 1.4rem}
    .f2{grid-template-columns:1fr 1fr}
    .fshell{grid-template-columns:1fr 1fr}
    .suform{grid-template-columns:1fr auto;align-items:start}
    .libtools{grid-template-columns:1fr auto;align-items:center}
    .toolrow{grid-column:2}
    .views button{flex:none;padding:0 .9rem}
    .views button span{display:inline}
    .sortline .sortsel{flex:0 1 16rem}
    .chiprow{margin-bottom:1rem}
    .pg span{display:inline}
    .lcov{width:92px;height:138px}
    .shelfitem,.shelfitem img{width:140px}
    .shelfitem img{height:210px}
    .llist{max-width:52rem}
    .frow .btn{flex:0 0 auto}
    /* A form is not a layout — fields stretched to 1180px are unusable and read as a bug. */
    .cform,.sent,.windows,#contact .cnote{max-width:44rem;margin-inline:auto}
    .brand{font-size:1.05rem;letter-spacing:.2em}
    .menu-btn{display:none}
    .menu{display:flex;position:static;flex-direction:row;gap:1.3rem;background:none;border:none}
    .menu a{padding:.4rem .2rem;border:none;font-size:.82rem;color:var(--muted)}
    .cta-row{flex-direction:row;justify-content:center;max-width:none;width:auto}
    section{padding:4.5rem 1.4rem}
    .filters{flex-wrap:wrap;overflow:visible;padding-bottom:0}
    /* 230px needed 731px for three columns and iPad Mini has 723 — so the tablet fell back to
       two fat columns and became the TALLEST view of the catalog, worse than the phone. */
    .grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.3rem}
    #feature .card{padding:2.4rem 3rem}
    #feature .card img.fc{width:190px}
    #feature .row{flex-direction:row;justify-content:center;max-width:none}
    .tickets{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.2rem}
    .mode-pages .book-area{padding:2rem clamp(2rem,8vw,5rem)}
    .mode-scroll .book-area{padding:2rem clamp(1.5rem,6vw,3rem) 4rem}
  }

  /* ============ desktop: the filters become a rail ============
     Below this the panel is a disclosure, because 444px of stacked filters above the results means
     scrolling most of a screen before seeing a single tale. From here there is ~350px of width
     sitting empty beside a list capped at 52rem for readability — so the filters move into it and
     stop costing height at all. 1200 rather than 1024: at 1024 only 147px was spare, and a rail
     there would squeeze the list below its readable measure. */
  @media (min-width:1200px){
    .libgrid{display:grid;grid-template-columns:14rem minmax(0,1fr);gap:1.8rem;align-items:start}
    .fpanel{display:block;position:sticky;top:calc(var(--navh) + 1rem);background:none;border:0;padding:0}
    .ftoggle{display:none}
    .fpanel .chiprow{margin-bottom:1.2rem}
    /* Only the type shrinks, to fit a 14rem rail. Height stays at the 44px target —
       vertical space in a rail is the one thing there is plenty of. */
    .fpanel .chip{font-size:.72rem;padding:.42rem .7rem}
    .sortline{display:block}
    .sortline .sortsel{width:100%}
    .libmain{min-width:0}
  }

  @media (min-width:1200px){ .screen-wrap{max-width:720px} }

  @media (hover:hover){
    .brand:hover .b{color:var(--amber)}
    .menu a:hover{color:var(--amber-hi)}
    .btn{transition:transform .2s,background .2s,color .2s,box-shadow .2s}
    .btn-amber:hover{background:var(--amber-hi);transform:translateY(-2px);box-shadow:0 8px 22px rgba(224,169,74,.3)}
    .btn-ghost:hover{background:rgba(224,169,74,.12);transform:translateY(-2px)}
    .chip:hover{color:var(--amber-hi);border-color:var(--amber)}
    .poster{transition:transform .22s,box-shadow .22s}
    .poster:hover{transform:translateY(-5px);box-shadow:0 14px 30px rgba(0,0,0,.55)}
    .poster:hover .art img{filter:brightness(1) sepia(0)}
    .poster .foot button:hover{color:var(--paper)}
    .ticket{transition:transform .22s,box-shadow .22s}
    a.ticket:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(0,0,0,.5)}
    .tbtn:hover,.modes button:hover,.reader-bottom button:hover:not(:disabled){background:rgba(224,169,74,.15)}
  }

  /* projector flicker, grain drift, wisp rise — motion only */
  @media (prefers-reduced-motion:no-preference){
    .amb-grain{animation:grainmove .5s infinite steps(2)}
    @keyframes grainmove{0%{background-position:0 0}100%{background-position:40px -30px}}
    .stage{animation:projflick 6s infinite steps(1)}
    @keyframes projflick{0%,100%{filter:brightness(1)}46%{filter:brightness(.93)}48%{filter:brightness(1)}73%{filter:brightness(.96)}}
    /* the projector lamp itself wavers — localized to the beam cone, gentle, no strobe */
    .beam2{animation:beamflick 3.9s ease-in-out infinite}
    @keyframes beamflick{0%,100%{opacity:1}6%{opacity:.8}13%{opacity:.96}22%{opacity:.74}31%{opacity:.92}44%{opacity:1}53%{opacity:.83}62%{opacity:.97}71%{opacity:.77}84%{opacity:.95}93%{opacity:1}}
    .wisp{animation:wisprise var(--wd,7s) ease-in-out infinite}
    @keyframes wisprise{0%,100%{transform:translateY(6%);opacity:.2}50%{transform:translateY(-42%);opacity:.6}}
    .haze{animation:hazedrift 30s ease-in-out infinite alternate}
    @keyframes hazedrift{0%{transform:translate(0,0)}100%{transform:translate(3%,-2%)}}
    .veil-fog{animation:fogchurn 9s linear infinite}
    @keyframes fogchurn{0%{background-position:0 0}100%{background-position:240px 150px}}
  }
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none !important;transition:none !important}
    html{scroll-behavior:auto}
  }