/* CINEOS components (DS-06 §1, §3a, §6, §12). Ported from foyer v3 styles.css, base section on.
   Nothing here names a colour: every value is a token from tokens.css. Mobile first, min-width only. */

/* ----------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--background);
  scrollbar-color:var(--scroll-thumb) var(--sunken);}
body{margin:0;background:var(--background);color:var(--foreground);
  font-family:var(--font-sans);font-size:16px;line-height:1.58;
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none;min-height:100vh;
  font-optical-sizing:auto;}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:2px;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
img{max-inline-size:100%;display:block;}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0;}
ul,ol{padding:0;list-style:none;}
hr{border:0;height:1px;background:var(--leaf-soft);margin:0;}
::selection{background:var(--selection);color:var(--foreground);}
.ico{flex:none;}
[hidden]{display:none!important;}

/* ------------------------------------------------- the room (DS-06 §3a) */
/* 1 · the duotone field: gold from above, a green house light low right */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(115% 78% at 50% -12%, var(--wash-gold), transparent 58%),
    radial-gradient(88% 68% at 92% 108%, var(--wash-green), transparent 54%);}
/* 2 · the vignette and the projector gate, on a fixed full-bleed element */
.vignette::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:99;
  box-shadow:var(--vignette-shadow);}
.vignette::after{content:'';position:fixed;top:0;left:0;right:0;height:1px;pointer-events:none;
  z-index:150;background:linear-gradient(90deg,transparent,var(--gate-gold) 24%,var(--gate-green) 78%,transparent);}
/* 3 · the grain: still and lighter on phones, moving from 769px up */
body::after{content:'';position:fixed;inset:-50%;width:200%;height:200%;
  pointer-events:none;z-index:100;opacity:calc(var(--grain-opacity) * 0.7);
  mix-blend-mode:var(--grain-blend);background-size:256px 256px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");}
@media(min-width:769px){body::after{opacity:var(--grain-opacity);animation:grain 8s steps(10) infinite;}}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 10%{transform:translate(-5%,-10%)}
  20%{transform:translate(-15%,5%)} 30%{transform:translate(7%,-25%)}
  40%{transform:translate(-5%,25%)} 50%{transform:translate(-15%,10%)}
  60%{transform:translate(15%,0)}   70%{transform:translate(0,15%)}
  80%{transform:translate(3%,35%)}  90%{transform:translate(-10%,10%)}}
/* the ops register drops the room */
.register-ops::before,.register-ops::after,.register-ops .vignette{display:none;}

::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--sunken)}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover)}

/* ------------------------------------------------------------ type (§6) */
.eyebrow{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.22em;color:var(--gold);line-height:1.5;}
.meta{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.16em;font-variant-numeric:tabular-nums;color:var(--muted-foreground);}
.title{font-family:var(--font-display);font-weight:400;letter-spacing:-.008em;
  font-size:clamp(2.125rem,7.5vw,3.75rem);line-height:1.08;color:var(--gold-pale);}
.lead{margin-top:var(--space-5);max-inline-size:46rem;font-size:1.0625rem;line-height:1.68;color:var(--dim);}
.section-title{font-family:var(--font-display);font-size:1.5rem;font-weight:400;color:var(--foreground);}
.body{font-size:.9375rem;line-height:1.72;color:var(--dim);}
.prose p{font-family:var(--font-display);font-size:1.0625rem;line-height:1.72;color:var(--ink-prose);
  max-inline-size:46rem;}
.prose p + p{margin-top:var(--space-5);}
@media(min-width:768px){
  .lead{font-size:1.1875rem;}
  .prose p{font-size:1.125rem;line-height:1.78;}}

/* ----------------------------------------------------------------- shell */
.shell{width:100%;max-inline-size:var(--shell);margin:0 auto;padding-inline:var(--space-6);
  position:relative;z-index:1;}
@media(min-width:768px){.shell{padding-inline:var(--space-8);}}
@media(min-width:1280px){.shell{padding-inline:3.5rem;}}
main{position:relative;z-index:1;}
.view{padding-block:var(--space-9);}
@media(min-width:768px){.view{padding-block:3.5rem;}}

/* ---------------------------------------------------------------- header */
.skip{position:absolute;left:-9999px;top:0;z-index:210;padding:var(--space-3) var(--space-4);
  background:var(--card);border:1px solid var(--gold);border-radius:var(--radius-sm);}
.skip:focus{left:var(--space-4);top:var(--space-4);}
.hdr{position:sticky;top:0;z-index:40;background:var(--bar);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--leaf-soft);}
.hdr-row{display:flex;align-items:center;gap:var(--space-4);height:62px;}
.lockup{display:flex;align-items:center;gap:var(--space-3);flex:none;min-height:44px;}
.lockup img{width:28px;height:28px;border-radius:var(--radius-sm);box-shadow:0 0 0 1px var(--leaf-soft);}
.wordmark{font-family:var(--font-mono);font-size:.875rem;text-transform:uppercase;
  letter-spacing:.3em;color:var(--foreground);}
.hdr-nav{display:flex;margin-left:auto;gap:2px;align-items:center;}
.hdr-nav a,.hdr-nav button{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.16em;color:var(--dimmer);white-space:nowrap;min-height:44px;
  padding:var(--space-3);border-radius:var(--radius-sm);
  transition:color var(--dur-fast) var(--ease-smooth),background var(--dur-fast) var(--ease-smooth);}
.hdr-nav a:active,.hdr-nav button:active{color:var(--gold-pale);background:var(--fill-gold-0);}
.hdr-nav form{display:contents;}
.hdr-links{display:flex;flex-wrap:wrap;gap:0 var(--space-4);padding-bottom:var(--space-1);}
.hdr-links:empty{display:none;}
.hdr-links a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.14em;color:var(--dim);}
.hdr-links a:active{color:var(--gold-pale);}
.carry-on{display:grid;gap:var(--space-3);padding-block:var(--space-7);}
.carry-list{display:grid;gap:0;}
.carry-list a{display:inline-flex;align-items:center;min-height:44px;color:var(--gold-pale);}
.hdr-toggle{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;color:var(--gold-soft);border-radius:var(--radius-sm);}
.hdr-toggle:active{background:var(--fill-gold-1);}
/* Until the menu script lands (Day 25) the nav shows at every width and the toggle stays hidden. */
.no-js .hdr-toggle{display:none;}
.hdr-menu{border-top:1px solid var(--leaf-soft);padding:var(--space-1) 0 var(--space-3);}
.hdr-menu a{display:block;padding:var(--space-4) var(--space-1);font-family:var(--font-mono);font-size:12px;
  text-transform:uppercase;letter-spacing:.18em;color:var(--dimmer);border-bottom:1px solid var(--hair);}
.hdr-menu a:last-child{border-bottom:0;}
.hdr-menu a:active{color:var(--gold-pale);}

/* --------------------------------------------------------- theme control */
.theme-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;color:var(--gold-soft);border-radius:var(--radius-sm);
  transition:color var(--dur-fast) var(--ease-smooth),background var(--dur-fast) var(--ease-smooth);}
.theme-btn:active{background:var(--fill-gold-1);color:var(--gold-pale);}
.theme-btn:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:var(--radius-sm);}
.no-js .theme-btn{display:none;}

/* ---------------------------------------------------------------- footer */
.ftr{margin-top:var(--space-12);border-top:1px solid var(--leaf-soft);
  padding:var(--space-9) 0 3.5rem;position:relative;z-index:1;}
.ftr::before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--leaf-strong) 40%,var(--gate-green) 75%,transparent);}
.ftr-row{display:flex;flex-direction:column;gap:var(--space-7);}
.ftr-links{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-4);}
.ftr-links a,.ftr-links button{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.16em;color:var(--dimmer);padding:var(--space-2) 0;min-height:44px;
  display:inline-flex;align-items:center;transition:color var(--dur-fast) var(--ease-smooth);}
.ftr-links a:active,.ftr-links button:active{color:var(--gold);}
.ftr small{display:block;font-size:12px;line-height:1.8;color:var(--muted-foreground);max-inline-size:44rem;}
.ftr .attrib{font-size:11.5px;line-height:1.85;}
.ftr .lockup img{width:24px;height:24px;opacity:.8;}

/* ------------------------------------------------------- components (§12) */
/* surfaces: a gold-leaf hairline across the top of every panel */
.surface,.surface-soft,.rhyme,.facet,.echo-lock,.result{position:relative;overflow:hidden;}
.surface::before,.surface-soft::before,.rhyme::before,.facet::before,.echo-lock::before,.result::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--leaf-strong),transparent);
  opacity:.8;transition:opacity var(--dur-fast) var(--ease-smooth);}
.surface{border:1px solid var(--leaf-soft);border-radius:var(--radius-lg);background:var(--panel);padding:var(--space-5);}
.surface-soft{border:1px solid var(--hair);border-radius:var(--radius-lg);background:var(--panel-soft);padding:var(--space-5);}
.surface .body,.surface-soft .body{margin-top:var(--space-2);}
@media(min-width:768px){.surface{padding:var(--space-7)}.surface-soft{padding:var(--space-6)}}

/* buttons: secondary, primary (the one brass fill), ghost, small */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:var(--space-3) var(--space-4);border:1px solid var(--leaf);border-radius:var(--radius-md);
  font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--dim);background:var(--fill-ghost);min-height:44px;
  transition:color var(--dur-fast) var(--ease-smooth),border-color var(--dur-fast) var(--ease-smooth),
             background var(--dur-fast) var(--ease-smooth);}
.btn:active{color:var(--gold-pale);border-color:var(--leaf-strong);background:var(--fill-gold-1);}
.btn[aria-pressed="true"]{color:var(--gold);border-color:var(--leaf-strong);background:var(--fill-gold-2);}
.btn:disabled{opacity:.6;cursor:not-allowed;}
.btn-primary{background:var(--primary);color:var(--primary-ink);border-color:var(--primary);
  font-family:var(--font-sans);font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;
  padding:var(--space-3) var(--space-5);}
.btn-primary:active{background:var(--primary-hover);border-color:var(--primary-hover);color:var(--primary-ink);}
.btn-ghost{border-color:transparent;background:none;padding:var(--space-2) var(--space-3);}
.btn-sm{padding:var(--space-2) var(--space-3);letter-spacing:.14em;}
.btn.htmx-request,.htmx-request .btn{opacity:.7;pointer-events:none;}

/* the field: a sunken well, a serif input at 17px (clears iOS zoom) */
.field{display:flex;align-items:center;gap:var(--space-3);width:100%;
  border:1px solid var(--edge);border-radius:var(--radius-md);background:var(--sunken);
  padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  transition:border-color var(--dur-fast) var(--ease-smooth),box-shadow var(--dur-fast) var(--ease-smooth);}
.field:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px var(--focus-halo);}
.field .ico{color:var(--gold-soft);}
.field input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--foreground);
  font-family:var(--font-display);font-size:1.0625rem;padding:var(--space-3) 0;}
.field input::placeholder{color:var(--muted-foreground);font-style:italic;}

/* the waiting line: hidden until htmx marks its request, plain text when it shows */
.indicator{display:none;margin-top:var(--space-3);font-size:.875rem;line-height:1.6;color:var(--muted-foreground);}
.indicator.htmx-request,.htmx-request .indicator{display:block;}

/* chips and motif pills, both raised to 44px from foyer's 40 and 38 */
.suggests{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-5);}
.chip{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);min-height:44px;
  border:1px solid var(--hair);border-radius:999px;font-family:var(--font-display);
  font-size:.9375rem;font-style:italic;color:var(--dim);
  transition:color var(--dur-fast) var(--ease-smooth),border-color var(--dur-fast) var(--ease-smooth),
             background var(--dur-fast) var(--ease-smooth);}
.chip:active{color:var(--gold-pale);border-color:var(--leaf-strong);background:var(--fill-gold-0);}
.chip .ico{color:var(--green);}
.motifs{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-7);}
.motif{padding:var(--space-2) var(--space-4);min-height:44px;border:1px solid var(--hair);border-radius:999px;
  font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--dimmer);
  transition:color var(--dur-fast) var(--ease-smooth),border-color var(--dur-fast) var(--ease-smooth),
             background var(--dur-fast) var(--ease-smooth);}
.motif:active{color:var(--gold-pale);border-color:var(--leaf-strong);}
.motif[aria-pressed="true"]{color:var(--gold);border-color:var(--leaf-strong);background:var(--fill-gold-2);}
.motif-just{margin-bottom:var(--space-7);border-left:1px solid var(--gold);padding-left:var(--space-4);}
.motif-just p{font-family:var(--font-display);font-size:1.0625rem;line-height:1.7;color:var(--ink-mid);}

/* the jump rail: sticky under the header, anchors in a scrolling row */
.jump{position:sticky;top:var(--hdr-h);z-index:30;background:var(--bar-2);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--leaf-soft);margin-inline:calc(var(--space-6) * -1);padding-inline:var(--space-6);}
@media(min-width:768px){.jump{margin-inline:calc(var(--space-8) * -1);padding-inline:var(--space-8)}}
.jump-rail{display:flex;align-items:center;gap:var(--space-3);position:relative;padding-top:var(--space-2);}
.jump-lead{display:none;align-items:center;gap:var(--space-2);flex:none;align-self:stretch;
  font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.2em;
  color:var(--muted-foreground);padding-right:var(--space-3);border-right:1px solid var(--leaf-soft);}
.jump-lead .ico{color:var(--gold);}
@media(min-width:940px){.jump-lead{display:flex}}
.jump-scroll{display:flex;gap:var(--space-2);overflow-x:auto;padding:0 0 var(--space-2);flex:1;min-width:0;
  scrollbar-width:none;scroll-behavior:smooth;}
.jump-scroll::-webkit-scrollbar{display:none}
.jump-chip{display:inline-flex;align-items:center;gap:var(--space-2);flex:none;min-height:44px;
  padding:var(--space-2) var(--space-3);border:1px solid var(--hair);border-radius:var(--radius-sm);
  background:var(--fill-ghost);white-space:nowrap;
  transition:border-color var(--dur-fast) var(--ease-smooth),background var(--dur-fast) var(--ease-smooth);}
.jump-chip span{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--dimmer);}
.jump-chip .jn{font-family:var(--font-mono);font-size:11px;font-style:normal;font-variant-numeric:tabular-nums;
  color:var(--muted-foreground);padding-right:var(--space-2);border-right:1px solid var(--leaf-soft);}
.jump-chip:active{border-color:var(--leaf-strong);background:var(--fill-gold-1);}
.jump-chip.on{border-color:var(--leaf-strong);background:var(--fill-gold-3);}
.jump-chip.on span{color:var(--gold-pale);}
.jump-chip.on .jn{color:var(--gold);border-color:var(--leaf-strong);}
/* The film's title card in the bar, so a scene never loses its film; it fades in as the frame
   scrolls away where the browser supports scroll timelines, and simply stays visible elsewhere. */
.jump-title{display:flex;align-items:baseline;gap:var(--space-3);margin:0;padding-top:var(--space-3);
  font-family:var(--font-display);font-size:1.125rem;line-height:1.2;color:var(--gold-pale);overflow:hidden}
@supports (animation-timeline:scroll()){.jump-title{animation:jt linear both;animation-timeline:scroll(root);animation-range:0 280px}
  @keyframes jt{from{opacity:0;max-height:0;padding-top:0}to{opacity:1;max-height:3rem}}}
.jump-fade{position:absolute;right:0;top:0;bottom:var(--space-2);width:42px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,var(--fade-0),var(--fade-1));transition:opacity var(--dur-fast) var(--ease-smooth);}
.jump-rail.can-scroll .jump-fade{opacity:1;}
.jump-progress{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--progress-track);}
.jump-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--gold));}
.jump-foot{display:flex;align-items:center;gap:var(--space-3);padding-bottom:var(--space-3);}
.jump-dots{display:inline-flex;gap:4px;flex:none;align-items:center;}
.jump-dots i{width:6px;height:6px;border-radius:50%;border:1px solid var(--dot-idle);}
.jump-dots i.lit{background:var(--gold);border-color:var(--gold);}
.jump-note{font-size:11px;line-height:1.65;color:var(--muted-foreground);}
.jump-note b{color:var(--gold-pale);font-weight:400;font-family:var(--font-mono);letter-spacing:.06em;}
.jump-note-tail{display:none;}
@media(min-width:640px){.jump-note-tail{display:inline}}

/* the plate: a printed object that does not flip; the hue is an angle, rotated over a token wash */
.plate{--ph:200deg;position:relative;aspect-ratio:2/3;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--leaf);display:flex;flex-direction:column;justify-content:flex-end;gap:var(--space-2);
  padding:var(--space-5);max-inline-size:186px;background:var(--plate-ground);box-shadow:var(--shadow-plate);}
@media(min-width:640px){.plate{max-inline-size:230px}}
.plate::before{content:'';position:absolute;inset:0;
  background:
    radial-gradient(120% 70% at 50% -6%, var(--plate-top), transparent 62%),
    radial-gradient(100% 60% at 50% 104%, var(--plate-bottom), transparent 60%),
    linear-gradient(180deg, transparent 45%, var(--plate-floor));}
.plate::after{content:'';position:absolute;inset:0;opacity:.3;
  background-image:repeating-linear-gradient(0deg,transparent,transparent 2px,var(--plate-scan) 2px,var(--plate-scan) 3px);}
.plate-hue{position:absolute;inset:0;opacity:var(--plate-hue-a);
  background:linear-gradient(180deg,var(--plate-top),transparent 55%);filter:hue-rotate(var(--ph));}
.plate > p{position:relative;z-index:1;}
.plate-title{font-family:var(--font-display);font-size:1.1875rem;line-height:1.18;color:var(--plate-title);}
@media(min-width:640px){.plate-title{font-size:1.4375rem}}
.plate-foot{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--plate-ink-dim);}
.plate-sm{width:58px;padding:var(--space-2);border-radius:var(--radius-sm);}
.plate-sm .plate-title,.plate-sm .plate-foot{display:none;}

/* the signature: a compass, not a leaderboard */
.sig-group + .sig-group{margin-top:var(--space-9);}
.sig-group-head{display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-4);}
.sig-group-head span{font-size:.9375rem;color:var(--muted-foreground);font-family:var(--font-display);font-style:italic;}
.strip{border-top:1px solid var(--leaf);}
.rd{border-bottom:1px solid var(--hair);}
.rd[open]{background:linear-gradient(90deg,var(--row-open),transparent 80%);}
.rd-btn{display:grid;grid-template-columns:1fr 66px auto;gap:var(--space-2);align-items:center;
  padding:var(--space-3) var(--space-1);min-height:48px;cursor:pointer;list-style:none;}
.rd-btn::-webkit-details-marker{display:none;}
@media(min-width:640px){.rd-btn{grid-template-columns:1fr 92px auto;gap:var(--space-4)}}
.rd-label{font-size:.9375rem;color:var(--ink-mid);display:flex;align-items:center;gap:var(--space-2);}
@media(min-width:640px){.rd-label{font-size:1rem}}
.rd-label .caret{color:var(--gold-soft);transition:transform var(--dur-fast) var(--ease-smooth);}
.rd[open] .caret{transform:rotate(90deg);color:var(--gold);}
.rd[open] .rd-label{color:var(--gold-pale);}
.rd-meter{display:flex;gap:2px;align-items:center;height:16px;--pole:var(--green-pole);}
.rd-meter.hi{--pole:var(--gold-soft);}
.rd-meter i{display:block;width:2px;border-radius:1px;background:var(--meter-idle);position:relative;}
@media(min-width:640px){.rd-meter i{width:3px}}
/* tempering with no mixing function: the pole sits over the neutral at the reading's distance from the middle */
.rd-meter i.lit{background:var(--temper-neutral);}
.rd-meter i.lit::after{content:'';position:absolute;inset:0;border-radius:1px;background:var(--pole);opacity:var(--d);}
.rd-val{font-family:var(--font-mono);font-size:12px;font-variant-numeric:tabular-nums;
  color:var(--muted-foreground);text-align:right;letter-spacing:.02em;}
.rd[open] .rd-val{color:var(--dimmer);}
.rd-just{padding:0 var(--space-1) var(--space-5);}
.rd-just p{font-family:var(--font-display);font-size:1rem;line-height:1.7;color:var(--ink-mid);
  border-left:1px solid var(--gold);padding-left:var(--space-4);max-inline-size:52rem;}
@media(min-width:640px){.rd-just p{font-size:1.0625rem}}
.rd-poles{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-4);padding-left:var(--space-4);}
@media(min-width:640px){.rd-poles{flex-direction:row;justify-content:space-between;gap:var(--space-5)}}
.rd-poles .pole{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted-foreground);line-height:1.7;}

/* results and rhymes */
.results{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-7);}
.result{display:grid;grid-template-columns:58px 1fr;gap:var(--space-3);align-items:start;
  border:1px solid var(--hair);border-radius:var(--radius-lg);padding:var(--space-4);background:var(--panel);
  transition:border-color var(--dur-fast) var(--ease-smooth),background var(--dur-fast) var(--ease-smooth);}
@media(min-width:640px){.result{grid-template-columns:auto 1fr;gap:var(--space-5);padding:var(--space-5)}}
.result:active{border-color:var(--leaf-strong);background:var(--fill-gold-lift);}
.result h3{font-family:var(--font-display);font-size:1.3125rem;font-weight:400;color:var(--foreground);}
.result h3 a{display:inline-block;min-height:44px;}
.result-band{margin-top:var(--space-2);font-family:var(--font-mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--green);}
.result .because{margin-top:var(--space-2);font-size:.875rem;line-height:1.72;color:var(--dimmer);}

/* the Screening Room (F-001; Day 26) */
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-5);}
.search-form .indicator-more{display:block;}
.room-status{min-height:1.6em;margin-top:var(--space-3);font-size:.875rem;line-height:1.6;color:var(--muted-foreground);}
.room-results{margin-top:var(--space-7);}
.room-results>.title{font-size:1.5rem;}
.room-partial,.room-invite,.room-timing,.room-save{margin-top:var(--space-5);}
.room-message{margin-top:var(--space-7);}
.result-body{min-width:0;}
.result-kin{margin-top:var(--space-1);font-size:.75rem;color:var(--muted-foreground);}
.result .why{margin-top:var(--space-3);}
.why-labels{margin-top:var(--space-1);font-size:.875rem;color:var(--dim);}
.not-asked{margin-top:var(--space-3);}
.not-asked summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-size:.875rem;color:var(--dim);}
.not-asked-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3);}
.na-label{font-size:.8125rem;color:var(--dim);}
.na-note{margin-top:var(--space-1);font-size:.875rem;line-height:1.72;color:var(--dimmer);}
.result-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3);}
.rhymes{display:grid;gap:var(--space-5);}
@media(min-width:768px){.rhymes{grid-template-columns:1fr 1fr}}
.rhyme{display:block;border:1px solid var(--hair);border-radius:var(--radius-lg);padding:var(--space-6);background:var(--panel);
  transition:border-color var(--dur-fast) var(--ease-smooth),background var(--dur-fast) var(--ease-smooth);}
.rhyme:active{border-color:var(--leaf-strong);background:var(--fill-gold-lift);}
.rhyme-kind{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.22em;color:var(--gold);}
.rhyme h3{font-family:var(--font-display);font-size:1.5rem;font-weight:400;margin-top:var(--space-3);}
.rhyme .kin{margin-top:var(--space-4);display:flex;align-items:center;gap:var(--space-3);}
.kinbar{flex:1;height:2px;background:var(--track);position:relative;border-radius:1px;}
.kinbar i{position:absolute;top:0;bottom:0;left:0;background:var(--green);border-radius:1px;}
.kinbar.neg i{background:var(--gold-soft);}
.rhyme p{margin-top:var(--space-4);font-size:.875rem;line-height:1.72;color:var(--dimmer);}

/* notes, arc, facets, ledger, what stayed dark, source line */
.notes{display:grid;gap:var(--space-6);}
@media(min-width:768px){.notes{grid-template-columns:1fr 1fr;gap:var(--space-7) var(--space-8)}}
.note{border-left:1px solid var(--leaf-strong);padding-left:var(--space-5);}
.note h4{font-family:var(--font-display);font-size:1.1875rem;font-weight:400;color:var(--gold-pale);margin-bottom:var(--space-2);}
.note p{font-size:.9375rem;line-height:1.78;color:var(--dim);}
.arc{position:relative;margin-top:var(--space-2);}
.arc::before{content:'';position:absolute;left:5px;top:10px;bottom:10px;width:1px;
  background:linear-gradient(180deg,var(--green),var(--gold-soft),var(--gold));}
.season{position:relative;padding-left:var(--space-7);padding-bottom:var(--space-7);}
.season:last-child{padding-bottom:var(--space-2);}
.season::before{content:'';position:absolute;left:0;top:8px;width:11px;height:11px;border-radius:50%;
  border:1px solid var(--green);background:var(--background);}
.season:nth-child(2)::before{border-color:var(--gold-soft);}
.season:nth-child(3)::before{border-color:var(--gold);background:var(--gold);}
.season h4{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.24em;color:var(--gold);margin-bottom:var(--space-3);}
.season p{font-family:var(--font-display);font-size:1.0625rem;line-height:1.72;color:var(--ink-prose);}
.facets{display:grid;gap:var(--space-3);margin-top:var(--space-7);}
@media(min-width:640px){.facets{grid-template-columns:repeat(3,1fr)}}
.facet{border:1px solid var(--hair);border-radius:var(--radius-md);padding:var(--space-4);background:var(--panel-soft);}
.facet dt{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.2em;color:var(--gold);margin-bottom:var(--space-2);}
.facet dd{margin:0;font-size:.875rem;line-height:1.72;color:var(--dim);}
.ledger{display:grid;gap:var(--space-4) var(--space-8);}
@media(min-width:640px){.ledger{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.ledger{grid-template-columns:repeat(3,1fr)}}
.ledger div{border-top:1px solid var(--hair);padding-top:var(--space-3);}
.ledger dt{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted-foreground);margin-bottom:var(--space-2);}
.ledger dd{margin:0;font-size:.9375rem;line-height:1.7;color:var(--ink-soft);}
.dark-list{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-5);}
.dark-tag{padding:var(--space-2) var(--space-4);border:1px dashed var(--dash);border-radius:var(--radius-sm);
  font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-foreground);}
.source-line{margin-top:var(--space-7);font-family:var(--font-mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--muted-foreground);display:flex;align-items:center;gap:var(--space-2);}
.source-line .ico{color:var(--green);}

/* the film's movements (Day 28): drop cap, what stayed dark as a list of tags with a sentence each, links out */
.dropcap p:first-child::first-letter{float:left;font-size:3.4em;line-height:.9;margin:var(--space-1) var(--space-2) 0 0;color:var(--gold);}
.dark-ledger{display:grid;gap:var(--space-5);margin-top:var(--space-5);}
.dark-ledger li{display:grid;gap:var(--space-2);justify-items:start;}
.dark-ledger p{max-inline-size:46rem;font-size:.9375rem;line-height:1.72;color:var(--dim);}
.dark-ledger .dark-flag{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--muted-foreground);}
.why-return,.craft{margin-top:var(--space-7);}
.links-out{display:flex;flex-wrap:wrap;gap:0 var(--space-5);margin-top:var(--space-5);}
.links-out a{display:inline-flex;align-items:center;min-height:44px;color:var(--gold-pale);}

/* the guide pages (Day 28-b): one page at three depths, its related links and a motif's films */
.guide-head{margin-bottom:var(--space-7);}
.guide-head .eyebrow a{display:inline-flex;align-items:center;min-height:44px;}
.depth-summary h2.depth-name{margin:0;}
.guide-example{border-left:1px solid var(--leaf-strong);padding-left:var(--space-5);font-style:italic;}
.guide-links ul,.guide-films ul{display:grid;gap:var(--space-1);margin-top:var(--space-6);}
.guide-links a,.guide-films a{display:inline-flex;align-items:center;min-height:44px;color:var(--gold-pale);}
.guide-films{margin-top:var(--space-9);}
.guide-always{display:grid;gap:var(--space-4);margin-bottom:var(--space-7);}
.trust-status{margin-bottom:var(--space-6);padding:var(--space-4);border:1px dashed var(--dash);border-radius:var(--radius-md);}
.error-page{display:grid;gap:var(--space-5);padding-block:var(--space-9);}
.error-links{display:flex;flex-wrap:wrap;gap:0 var(--space-3);align-items:center;}
.error-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--gold-pale);}

/* the booth (Day 29): the member's own pages, lists not disclosures */
.booth-head{margin-bottom:var(--space-7);}
.booth-nav{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-6);}
.booth-room{display:grid;gap:var(--space-5);}
.booth-list,.leanings{display:grid;gap:var(--space-5);}
.booth-film,.booth-search,.leaning{border-top:1px solid var(--hair);padding-top:var(--space-4);display:grid;gap:var(--space-2);}
.booth-film a{display:inline-flex;align-items:center;min-height:44px;}
.booth-title,.leaning-sentence{font-family:var(--font-display);font-size:1.1875rem;color:var(--foreground);}
.booth-actions,.leaning-nudges form{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;}
.booth-rename input{min-height:44px;padding:0 var(--space-3);border:1px solid var(--hair);border-radius:var(--radius-sm);
  background:var(--panel-soft);color:var(--foreground);font:inherit;}

/* empty state: plain prose, never a spinner */
.empty{border:1px dashed var(--leaf);border-radius:var(--radius-lg);padding:var(--space-9) var(--space-6);
  text-align:center;color:var(--muted-foreground);margin-top:var(--space-7);background:var(--veil-1);}
.empty .ico{color:var(--gold-soft);margin:0 auto var(--space-4);display:block;}
.empty p{font-size:.9375rem;line-height:1.75;max-inline-size:32rem;margin:0 auto;color:var(--dim);}
.empty em{font-family:var(--font-display);color:var(--gold-pale);font-style:italic;}

/* the Long Echo lock and its wordless placeholder (ADR-0021) */
.echo-lock{border:1px solid var(--leaf);border-radius:var(--radius-lg);padding:var(--space-9) var(--space-6);
  text-align:center;background:var(--veil-2);}
.echo-lock .ico{color:var(--gold);margin:0 auto var(--space-5);display:block;}
.echo-lock h3{font-family:var(--font-display);font-size:1.375rem;font-weight:400;margin-bottom:var(--space-3);}
.echo-lock p{font-size:.9375rem;line-height:1.75;color:var(--dim);max-inline-size:34rem;margin:0 auto var(--space-7);}
.echo-lock .indicator{margin:var(--space-3) auto 0;}
.echo-placeholder{position:relative;height:160px;margin-top:var(--space-7);display:flex;flex-direction:column;
  gap:var(--space-6);padding:var(--space-6);background:linear-gradient(180deg,var(--veil-2),var(--background));
  border-radius:var(--radius-lg);overflow:hidden;}
.echo-placeholder i{display:block;height:1px;background:var(--dash);}
.echo-placeholder i:nth-child(2){width:86%}
.echo-placeholder i:nth-child(3){width:92%}
.echo-placeholder i:nth-child(4){width:64%}

/* the toast region: one line, raised, never colour alone */
.toast-region{position:fixed;left:var(--space-4);right:var(--space-4);bottom:var(--space-4);z-index:180;
  display:flex;flex-direction:column;gap:var(--space-2);pointer-events:none;}
@media(min-width:640px){.toast-region{left:auto;max-inline-size:28rem}}
.toast{pointer-events:auto;background:var(--raised);border:1px solid var(--edge);border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4);font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  line-height:1.6;color:var(--foreground);box-shadow:var(--shadow-card);}

/* form controls */
.form-field{display:flex;flex-direction:column;gap:var(--space-2);}
.form-field + .form-field{margin-top:var(--space-5);}
.form-label{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--dimmer);}
.form-control{width:100%;min-height:44px;padding:var(--space-3) var(--space-4);background:var(--sunken);color:var(--foreground);
  border:1px solid var(--edge);border-radius:var(--radius-md);font:inherit;font-size:1rem;}
.form-control:focus-visible{border-color:var(--gold);box-shadow:0 0 0 3px var(--focus-halo);}
textarea.form-control{min-height:7rem;resize:vertical;}
.form-error{font-size:.875rem;line-height:1.6;color:var(--gold);}
.is-invalid .form-control{border-color:var(--gold);}

/* the depth ladder (PUB-001): Trailer always shown, deeper depths open with no script */
.depths{display:flex;flex-direction:column;border-top:1px solid var(--leaf-soft);}
.depth{border-bottom:1px solid var(--hair);}
.depth-first{padding-block:var(--space-6);}
.depth-name{font-family:var(--font-mono);font-size:11px;font-weight:400;text-transform:uppercase;
  letter-spacing:.22em;color:var(--gold);}
.depth-first .depth-body{margin-top:var(--space-3);}
.depth-summary{display:flex;align-items:center;gap:var(--space-2);min-height:44px;padding-block:var(--space-3);
  cursor:pointer;list-style:none;}
.depth-summary::-webkit-details-marker{display:none;}
.depth-summary .caret{color:var(--gold-soft);transition:transform var(--dur-fast) var(--ease-smooth);}
.depth[open] .depth-summary .caret{transform:rotate(90deg);}
.depth .depth-body{padding-bottom:var(--space-6);scroll-margin-top:72px;}

/* the film page (F-002 §Page skeleton): movements, the Frame, Keep and Seen, the ledger's attribution */
.movement{padding-block:var(--space-9);border-top:1px solid var(--hair);scroll-margin-top:calc(var(--hdr-h) + 9rem);}
.movement:first-of-type{border-top:0;}
.mv-head{margin-bottom:var(--space-6);}
.mv-why{margin-top:var(--space-3);max-inline-size:46rem;font-size:.9375rem;line-height:1.72;color:var(--dim);}
.frame{display:grid;gap:var(--space-6);}
@media(min-width:640px){.frame{grid-template-columns:auto 1fr;align-items:end}}
.frame-text .title{margin-top:var(--space-3);}
.frame-original{margin-top:var(--space-2);font-family:var(--font-display);font-style:italic;color:var(--dim);}
.frame-text .meta{margin-top:var(--space-3);}
.film-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6);}
.rhyme-cta{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--green);}
.ledger-attrib{margin-top:var(--space-6);font-size:11.5px;line-height:1.85;color:var(--muted-foreground);}

/* --------------------------------------------------- the ops register (§13) */
.register-ops{font-size:.875rem;}
.register-ops .body,.register-ops .lead{color:var(--foreground);font-size:.875rem;}
.register-ops .surface,.register-ops .surface-soft{padding:var(--space-4);}
.ops-table{width:100%;border-collapse:collapse;font-size:.875rem;}
.ops-table caption{text-align:left;padding-bottom:var(--space-3);font-family:var(--font-mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.16em;color:var(--gold);}
.ops-table th{background:var(--sunken);text-align:left;font-family:var(--font-mono);font-size:11px;font-weight:400;
  text-transform:uppercase;letter-spacing:.14em;color:var(--muted-foreground);padding:var(--space-2) var(--space-3);}
.ops-table td{height:40px;padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--hair);
  font-variant-numeric:tabular-nums;color:var(--foreground);}
.ops-table tr.is-selected td{background:var(--row-open);}
.ops-card .ops-figure{margin-top:var(--space-2);font-family:var(--font-mono);font-size:1.5rem;
  font-variant-numeric:tabular-nums;color:var(--foreground);}
/* ------------------------------------------------------------ a11y, misc */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;}
@media(hover:hover) and (pointer:fine){
  .hdr-nav a:hover,.hdr-nav button:hover{color:var(--gold-pale);background:var(--fill-gold-0);}
  .ftr-links a:hover,.ftr-links button:hover{color:var(--gold);}
  .theme-btn:hover{background:var(--fill-gold-0);color:var(--gold-pale);}
  .btn:hover{color:var(--gold-pale);border-color:var(--leaf-strong);background:var(--fill-gold-1);}
  .btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:var(--primary-ink);}
  .chip:hover{color:var(--gold-pale);border-color:var(--leaf-strong);background:var(--fill-gold-0);}
  .motif:hover{color:var(--gold-pale);border-color:var(--leaf-strong);}
  .jump-chip:hover{border-color:var(--leaf-strong);background:var(--fill-gold-1);transform:translateY(-2px);}
  .rd-btn:hover .rd-label{color:var(--gold-pale);}
  .rhyme:hover,.result:hover{border-color:var(--leaf-strong);}
  .rhyme:hover{transform:translateY(-3px);}
  .result:hover{transform:translateX(3px);}
  .rhyme:hover::before,.result:hover::before{opacity:1;}}

@media(forced-colors:active){.title,.plate-title{color:CanvasText;}.theme-btn,.hdr-toggle,.btn-primary{border:1px solid ButtonText;}.rd-meter i.lit{background:Highlight;forced-color-adjust:none;}.echo-placeholder i{background:CanvasText;}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;transition-delay:0ms!important;}
  body::after{animation:none}
  html{scroll-behavior:auto}
  .jump-scroll{scroll-behavior:auto}}

/* Per-film values as classes, so no template needs a style attribute and style-src stays
   'self' (DAY-32-b; the owner's choice of 2026-10-08, "Exact classes"). .ph-N is a plate's hue,
   in 10-degree steps, crc32(film id) % 36 x 10 (films.views.hue; F-013, 2026-10-18); .kw-N is a
   rhyme bar's width, round(|kinship| x 100). */
.ph-0{--ph:0deg}.ph-10{--ph:10deg}.ph-20{--ph:20deg}.ph-30{--ph:30deg}.ph-40{--ph:40deg}.ph-50{--ph:50deg}.ph-60{--ph:60deg}.ph-70{--ph:70deg}.ph-80{--ph:80deg}
.ph-90{--ph:90deg}.ph-100{--ph:100deg}.ph-110{--ph:110deg}.ph-120{--ph:120deg}.ph-130{--ph:130deg}.ph-140{--ph:140deg}.ph-150{--ph:150deg}.ph-160{--ph:160deg}.ph-170{--ph:170deg}
.ph-180{--ph:180deg}.ph-190{--ph:190deg}.ph-200{--ph:200deg}.ph-210{--ph:210deg}.ph-220{--ph:220deg}.ph-230{--ph:230deg}.ph-240{--ph:240deg}.ph-250{--ph:250deg}.ph-260{--ph:260deg}
.ph-270{--ph:270deg}.ph-280{--ph:280deg}.ph-290{--ph:290deg}.ph-300{--ph:300deg}.ph-310{--ph:310deg}.ph-320{--ph:320deg}.ph-330{--ph:330deg}.ph-340{--ph:340deg}.ph-350{--ph:350deg}
.kw-0{width:0%}.kw-1{width:1%}.kw-2{width:2%}.kw-3{width:3%}.kw-4{width:4%}.kw-5{width:5%}.kw-6{width:6%}.kw-7{width:7%}.kw-8{width:8%}.kw-9{width:9%}
.kw-10{width:10%}.kw-11{width:11%}.kw-12{width:12%}.kw-13{width:13%}.kw-14{width:14%}.kw-15{width:15%}.kw-16{width:16%}.kw-17{width:17%}.kw-18{width:18%}.kw-19{width:19%}
.kw-20{width:20%}.kw-21{width:21%}.kw-22{width:22%}.kw-23{width:23%}.kw-24{width:24%}.kw-25{width:25%}.kw-26{width:26%}.kw-27{width:27%}.kw-28{width:28%}.kw-29{width:29%}
.kw-30{width:30%}.kw-31{width:31%}.kw-32{width:32%}.kw-33{width:33%}.kw-34{width:34%}.kw-35{width:35%}.kw-36{width:36%}.kw-37{width:37%}.kw-38{width:38%}.kw-39{width:39%}
.kw-40{width:40%}.kw-41{width:41%}.kw-42{width:42%}.kw-43{width:43%}.kw-44{width:44%}.kw-45{width:45%}.kw-46{width:46%}.kw-47{width:47%}.kw-48{width:48%}.kw-49{width:49%}
.kw-50{width:50%}.kw-51{width:51%}.kw-52{width:52%}.kw-53{width:53%}.kw-54{width:54%}.kw-55{width:55%}.kw-56{width:56%}.kw-57{width:57%}.kw-58{width:58%}.kw-59{width:59%}
.kw-60{width:60%}.kw-61{width:61%}.kw-62{width:62%}.kw-63{width:63%}.kw-64{width:64%}.kw-65{width:65%}.kw-66{width:66%}.kw-67{width:67%}.kw-68{width:68%}.kw-69{width:69%}
.kw-70{width:70%}.kw-71{width:71%}.kw-72{width:72%}.kw-73{width:73%}.kw-74{width:74%}.kw-75{width:75%}.kw-76{width:76%}.kw-77{width:77%}.kw-78{width:78%}.kw-79{width:79%}
.kw-80{width:80%}.kw-81{width:81%}.kw-82{width:82%}.kw-83{width:83%}.kw-84{width:84%}.kw-85{width:85%}.kw-86{width:86%}.kw-87{width:87%}.kw-88{width:88%}.kw-89{width:89%}
.kw-90{width:90%}.kw-91{width:91%}.kw-92{width:92%}.kw-93{width:93%}.kw-94{width:94%}.kw-95{width:95%}.kw-96{width:96%}.kw-97{width:97%}.kw-98{width:98%}.kw-99{width:99%}
.kw-100{width:100%}
/* The reading meter without style attributes (DAY-32-b): bar heights by position, as the tag
   drew them (5 + i/9 x 11 px), and the distance from the midpoint in 0.05 steps. */
.rd-meter i:nth-child(1){height:5.0px}.rd-meter i:nth-child(2){height:6.2px}.rd-meter i:nth-child(3){height:7.4px}.rd-meter i:nth-child(4){height:8.7px}.rd-meter i:nth-child(5){height:9.9px}.rd
-meter i:nth-child(6){height:11.1px}.rd-meter i:nth-child(7){height:12.3px}.rd-meter i:nth-child(8){height:13.6px}.rd-meter i:nth-child(9){height:14.8px}.rd-meter i:nth-child(10){height:16.0px}
.md-0{--d:0}.md-1{--d:0.05}.md-2{--d:0.1}.md-3{--d:0.15}.md-4{--d:0.2}.md-5{--d:0.25}.md-6{--d:0.3}.md-7{--d:0.35}.md-8{--d:0.4}.md-9{--d:0.45}.md-10{--d:0.5}
.md-11{--d:0.55}.md-12{--d:0.6}.md-13{--d:0.65}.md-14{--d:0.7}.md-15{--d:0.75}.md-16{--d:0.8}.md-17{--d:0.85}.md-18{--d:0.9}.md-19{--d:0.95}.md-20{--d:1}

/* sign-in and reset (DAY-44): two panels from 768px; a 44px row for each consent box */
.auth{display:grid;gap:var(--space-6);max-inline-size:56rem;}
@media(min-width:768px){.auth{grid-template-columns:1fr 1fr;align-items:start;}}
.auth-narrow{max-inline-size:30rem;}
.auth form{margin-top:var(--space-4);}
.auth form > .btn,.auth-narrow > .btn{margin-top:var(--space-5);}
.form-check{display:flex;align-items:center;gap:var(--space-3);min-height:44px;margin-top:var(--space-3);
  font-size:.9375rem;color:var(--dim);}
.form-check input{inline-size:20px;block-size:20px;accent-color:var(--green);flex:none;}
.auth-link{display:inline-flex;align-items:center;min-height:44px;color:var(--gold-pale);text-decoration:underline;}
.list-link{display:inline-flex;align-items:center;min-height:44px;color:var(--gold-pale);}

/* ------------------------------------------------- the walk-through (F-013 Wave 1) */
/* The cold open: a film's line before its title, in the display serif. */
.cold-open{font-family:var(--font-display);font-weight:400;font-size:1.375rem;line-height:1.35;
  letter-spacing:-.005em;color:var(--foreground);max-inline-size:38rem;margin:0 0 var(--space-6);}
@media(min-width:768px){.cold-open{font-size:1.75rem}}
/* In the frame: first on phones; from 1024px it fills the space right of the title. */
.frame .cold-open{order:-1;margin:0}
@media(min-width:1024px){.frame{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr)}
  .frame .cold-open{order:0;align-self:center;padding-inline-start:var(--space-6);border-inline-start:1px solid var(--hair)}}
.shelf-card a,.doors a,.shelf-views a,.shelf-rail a{color:var(--gold-pale);min-height:44px}
/* The shelf: cards that carry a line, one column on phones, then two and three. */
.shelf{list-style:none;margin:var(--space-5) 0 0;padding:0;display:grid;gap:var(--space-4)}
@media(min-width:720px){.shelf{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.shelf{grid-template-columns:repeat(3,1fr)}}
.shelf-card a,.shelf-card>div{display:flex;flex-direction:column;gap:var(--space-2);height:100%;padding:var(--space-5);
  border:1px solid var(--hair);border-radius:var(--radius-md);background:var(--card);text-decoration:none;
  transition:border-color var(--dur-fast) var(--ease-smooth)}
.shelf-card a:hover{border-color:var(--leaf-strong)}
.shelf-line{font-family:var(--font-display);font-size:1.0625rem;line-height:1.45;color:var(--foreground)}
.shelf-title{font-size:1rem;color:var(--gold-pale)}
.shelf-card .meta{color:var(--dim)}
.shelf-views,.shelf-rail{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);margin-top:var(--space-6)}
.shelf-views a,.shelf-rail a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;
  font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em}
.shelf-views a[aria-current]{text-decoration:underline;text-underline-offset:6px}
.shelf-head{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.18em;
  color:var(--dim);margin:var(--space-9) 0 0;padding-top:var(--space-4);border-top:1px solid var(--hair)}
.shelf-foot{margin-top:var(--space-9)}
.the-map,.wander{padding-block:var(--space-8) 0}
/* Questions people ask, and the doors at the end of a page. */
.qa dt{font-family:var(--font-display);font-size:1.125rem;color:var(--foreground);margin-top:var(--space-6)}
.qa dd{margin:var(--space-2) 0 0;color:var(--dim);line-height:1.68;max-inline-size:46rem}
.doors{list-style:none;margin:var(--space-4) 0 0;padding:0;display:grid;gap:var(--space-2)}
.doors a{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-3);padding-block:var(--space-3);
  border-bottom:1px solid var(--hair);text-decoration:none;font-size:1.0625rem}
.door-kind{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--dim)}
.post-credits{padding-bottom:var(--space-8)}
.result-line{font-family:var(--font-display);font-size:1rem;line-height:1.45;color:var(--foreground);margin-top:var(--space-2)}
/* F-013 §5 the readings contact sheet: shelf tiles; each end is its word over its film. A tile
   whose reading page is not yet published is the same card (.shelf-card>div) without the link. */
.contact-end{display:flex;flex-direction:column;gap:var(--space-1);font-size:.9375rem;color:var(--dim)}
/* F-013 §5 the reading page: the cold open's film titles reach 44px without moving the line;
   the walk, "Ask for it" and the post-credits open as scenes on a hairline. */
.reading-open{margin-top:var(--space-4)}
.reading-open a{padding:.5em;margin-inline:-.5em;color:var(--gold-pale);text-decoration:underline;text-underline-offset:.2em}
.reading-scene{margin-top:var(--space-8);padding-top:var(--space-4);border-top:1px solid var(--hair)}
.reading-scene>.meta{margin:var(--space-4) 0 0}