/* =====================================================================
   scene.css  ·  THE TERRITORY SCENES
   Loads AFTER atlas.css and map-type.css. map-type.css §8 owns the
   tokens (.sc-plate, .sc-pillow, .sc-h1, .sc-bar, .sc-stop, .sc-act);
   this file is the chrome those tokens live inside, plus the shared
   furniture every territory mechanic is built from.
   Nothing here edits map-type.css. Where a token needs a companion on
   a night ground it gets one (--terr-lit), it is never overwritten.
   ===================================================================== */

/* ---------------------------------------------------------------
   0 · ground rules
   --------------------------------------------------------------- */
html{background:#0d0a08}
body.scene{
  overflow-x:hidden;
  --terr-lit:#e0703f;                 /* the territory ink, lifted for cream-on-night */
  --sc-ease:cubic-bezier(.6,.05,.25,1);
  --sc-settle:cubic-bezier(.16,.84,.3,1);
  --sc-paper:#efe6d2; --sc-pink:#241b10;
  /* the lozenge mask. A radial background alone still ends on the box's
     four corners; this dissolves the field before any edge exists, which
     is the whole difference between a pillow and a card. */
  --sc-soft:radial-gradient(closest-side ellipse at 50% 50%,
              #000 0%, #000 46%, rgba(0,0,0,.94) 68%, rgba(0,0,0,.52) 86%, rgba(0,0,0,0) 100%);
}
/* Measured over the actual plates at 1440x900 (SCRATCH/fix/contrast.py).
   Each value is the territory ink lifted until the verb clears 4.5:1 against
   the bare art under it on that page, darkest plate and lightest alike. Same
   hue, same family; only the value moved. */
body.scene[data-terr="table"]    { --terr-lit:#c9a35e }
body.scene[data-terr="fire"]     { --terr-lit:#ef8a58 }
body.scene[data-terr="school"]   { --terr-lit:#b6d3e0 }
body.scene[data-terr="ground"]   { --terr-lit:#c0d195 }
body.scene[data-terr="files"]    { --terr-lit:#e8cfa4 }
body.scene[data-terr="register"] { --terr-lit:#ef8a58 }
body.scene[data-terr="surveyor"] { --terr-lit:#e8ad6d }

/* the tokens that carry the territory ink onto the night */
.scene .sc-verb{ color:var(--terr-lit) }
.scene .sc-stop .num{ color:var(--terr-lit) }
.scene .sc-back:hover{ color:var(--terr-lit) }
.scene .sc-act:hover{ border-color:var(--terr-lit); background:var(--terr-lit); color:#12100c }

/* ---------------------------------------------------------------
   1 · the plate: cover, ken burns push, idle loop
   --------------------------------------------------------------- */
.sc-plate img,.sc-plate video{
  transform:scale(var(--sc-zoom,1.03));
  transition:transform 2.4s var(--sc-ease), transform-origin 2.4s var(--sc-ease), filter 620ms ease-out;
}
.sc-plate video{ pointer-events:none }
.sc-plate::before{                       /* a second, lower wash so cream prose always holds */
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(to bottom, rgba(9,7,5,.34) 0%, rgba(9,7,5,.06) 34%, rgba(9,7,5,.20) 72%, rgba(9,7,5,.58) 100%);
}
.sc-plate::after{ z-index:1 }

/* the parchment veil the scene exhales into on the way back to the atlas */
.sc-veil{
  position:fixed;inset:0;z-index:70;background:#efe6d2;opacity:0;pointer-events:none;
  transition:opacity 520ms var(--sc-ease);
}

/* ---------------------------------------------------------------
   2 · the flow above the plate
   --------------------------------------------------------------- */
.sc-flow{position:relative;z-index:20}
.sc-hold{width:min(70rem,100%);margin:0 auto;padding:0 clamp(2.6rem,4vw,3.2rem)}

.sc-hero{
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 0 15vh;
}
.sc-hero-in{position:relative;max-width:46rem;padding:2.4rem 3rem 2.8rem}
.sc-hero-in::before{
  content:"";position:absolute;inset:-3.4rem -2.6rem -4.4rem -2.6rem;z-index:0;
  background:radial-gradient(104% 122% at 40% 50%, rgba(9,7,5,.86) 0%, rgba(9,7,5,.72) 40%, rgba(9,7,5,.36) 72%, rgba(9,7,5,0) 100%);
  -webkit-mask-image:var(--sc-soft);mask-image:var(--sc-soft);
}
.sc-hero-in > *{position:relative;z-index:1}
.sc-hero .sc-verb{
  display:block;margin-bottom:1.4rem;font-size:.74rem;
  text-shadow:0 1px 3px rgba(9,7,5,.98),0 0 14px rgba(9,7,5,.95),0 0 30px rgba(9,7,5,.8);
}
.sc-hero .sc-h1{margin:0 0 1.5rem;text-shadow:0 2px 30px rgba(9,7,5,.9)}
.sc-hero .sc-lede{max-width:31em;text-shadow:0 1px 18px rgba(9,7,5,.9);color:var(--sc-cream)}
.sc-hero .sc-lede + .sc-lede{margin-top:.7em}
.sc-scent{                                /* the small descent cue under the hero */
  display:block;margin-top:2.6rem;font-family:var(--sc-caps);font-weight:600;
  font-size:.58rem;letter-spacing:.34em;color:var(--sc-cream-2);opacity:.78;
}

/* ---------------------------------------------------------------
   2b · the night bloom
   Three lines stand on bare plate with no pillow under them: the
   verb, the descent cue, and the back link. They get the pillow at
   line scale. A soft lozenge of night, dissolved by the same mask
   the pillows use, so there is no edge anywhere to point at, and a
   layered shadow underneath so each glyph keeps its own dark rim.
   Measured, not guessed: SCRATCH/fix/contrast.py.
   --------------------------------------------------------------- */
.scene .sc-hero .sc-verb,
.scene .sc-scent{ width:fit-content;max-width:100% }
.scene .sc-hero .sc-verb,
.scene .sc-scent,
.scene .sc-back{ position:relative;isolation:isolate }
.scene .sc-hero .sc-verb::before,
.scene .sc-scent::before,
.scene .sc-back::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:-.95rem -1.9rem;
  background:radial-gradient(closest-side ellipse at 50% 50%,
    rgba(9,7,5,.86) 0%, rgba(9,7,5,.76) 40%, rgba(9,7,5,.38) 74%, rgba(9,7,5,0) 100%);
  -webkit-mask-image:var(--sc-soft);mask-image:var(--sc-soft);
}
.scene .sc-scent,
.scene .sc-back{ text-shadow:0 1px 2px rgba(9,7,5,.9), 0 0 14px rgba(9,7,5,.8) }

/* ---------------------------------------------------------------
   3 · the waypoints  (SPEC §5: route stops become in-scene moments)
   One sticky layer holds all three; the triggers underneath drive
   which one is standing. The plate pushes toward the one that is.
   --------------------------------------------------------------- */
.sc-stops{position:relative}
.sc-anchor{position:sticky;top:0;height:0;z-index:2}
.sc-anchor-in{
  position:absolute;top:0;left:0;width:100%;
  height:100vh;height:100svh;pointer-events:none;
}
.sc-trigger{height:100vh;height:100svh}
.sc-stop{
  pointer-events:auto;margin-top:-3.4rem;width:min(30rem,calc(100vw - 3rem));
  left:clamp(1.4rem, var(--x,50%), calc(100% - 31.4rem));
  top:clamp(6rem, var(--y,42%), calc(100% - 30rem));
}
.sc-stop:not(.reached){pointer-events:none}
.sc-stop .num{
  margin-bottom:.34rem;font-size:.82rem;letter-spacing:.34em;
  text-shadow:0 1px 10px rgba(9,7,5,.98),0 0 22px rgba(9,7,5,.95);
}
.sc-stop .flag{filter:drop-shadow(0 2px 9px rgba(0,0,0,.95)) drop-shadow(0 0 16px rgba(0,0,0,.7))}
.sc-stop .sc-pillow{max-width:30rem;padding:1.9rem 2.4rem}
.sc-stop .sc-pillow p{font-size:1rem;line-height:1.66}
/* a waypoint that carries a list as well as prose needs a longer line */
.sc-stop.wide{
  width:min(38rem,calc(100vw - 3rem));
  left:clamp(1.4rem, var(--x,50%), calc(100% - 39.4rem));
  top:clamp(5.4rem, var(--y,34%), calc(100% - 32rem));
}
.sc-stop.wide .sc-pillow{max-width:38rem}
.sc-stop.wide .sc-pillow p{font-size:.98rem;line-height:1.62}
.sc-stop.wide .sc-pillow li{font-size:.93rem;line-height:1.5}

/* ---------------------------------------------------------------
   4 · the pillow, and its interior
   The token's field is moved onto a pseudo so the lozenge mask can
   dissolve it (and the backdrop blur with it) before it reaches a
   corner. Same gradient, same blur, no edge you can point at.
   --------------------------------------------------------------- */
.sc-pillow{background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.sc-pillow::before{
  content:"";position:absolute;inset:-1.5rem -1.2rem;z-index:0;
  background:var(--sc-pillow);
  -webkit-backdrop-filter:blur(2.5px) saturate(.88);
          backdrop-filter:blur(2.5px) saturate(.88);
  -webkit-mask-image:var(--sc-soft);mask-image:var(--sc-soft);
}
.sc-pillow > *{position:relative;z-index:1}
.sc-pillow h2,.sc-pillow h3{
  font-family:var(--sc-display);font-style:italic;font-weight:600;
  font-size:clamp(1.45rem,2.4vw,1.95rem);line-height:1.08;letter-spacing:-.004em;
  color:var(--sc-cream);margin:.3rem 0 .85rem;
}
.sc-pillow .sc-key{display:block;margin-bottom:.15rem}
.sc-pillow a{
  color:var(--sc-cream);text-decoration:none;
  border-bottom:1px solid rgba(240,231,212,.34);
  transition:color .3s ease,border-color .3s ease;
}
.sc-pillow a:hover{color:var(--terr-lit);border-color:var(--terr-lit)}
.sc-pillow ol,.sc-pillow ul{list-style:none;margin:.9em 0 0;display:grid;gap:.55rem}
.sc-pillow li{
  font-family:var(--sc-prose);font-weight:300;font-size:.96rem;line-height:1.6;color:var(--sc-cream-2);
  display:grid;grid-template-columns:1.5rem 1fr;gap:.5rem;
}
.sc-pillow li::before{content:"·";color:var(--terr-lit)}
.sc-pillow .sc-inline{
  display:inline-flex;align-items:center;gap:.5em;margin-top:1.1rem;
  font-family:var(--sc-caps);font-weight:600;font-size:.6rem;letter-spacing:.3em;
  color:var(--sc-cream);border:1px solid rgba(240,231,212,.3);border-radius:999px;
  padding:.75em 1.5em;text-decoration:none;transition:all .3s ease;
}
.sc-pillow .sc-inline:hover{border-color:var(--terr-lit);background:var(--terr-lit);color:#12100c}

/* ---------------------------------------------------------------
   5 · the door at the end, the footer
   --------------------------------------------------------------- */
.sc-end{position:relative;padding:14vh 0 0}
.sc-door{position:relative;max-width:min(38rem,calc(100vw - 2.8rem));margin:0 auto;padding:3rem 3.2rem 3.2rem;text-align:center}
.sc-door .sc-key{display:block;margin-bottom:.7rem;color:var(--terr-lit);opacity:1}
.sc-door h3{
  font-family:var(--sc-display);font-style:italic;font-weight:600;
  font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.05;color:var(--sc-cream);margin:0 0 .9rem;
}
.sc-door p{
  font-family:var(--sc-prose);font-weight:300;font-size:1.04rem;line-height:1.7;
  color:var(--sc-cream-2);max-width:30em;margin:0 auto 1.8rem;
}
.sc-btn{
  display:inline-block;font-family:var(--sc-caps);font-weight:600;
  font-size:.66rem;letter-spacing:.32em;color:var(--sc-cream);
  background:rgba(9,7,5,.45);border:1px solid rgba(240,231,212,.3);border-radius:999px;
  padding:.95em 2.1em;text-decoration:none;cursor:pointer;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  transition:border-color .3s,background .3s,color .3s;
}
.sc-btn:hover{border-color:var(--terr-lit);background:var(--terr-lit);color:#12100c}
.sc-btn.q{background:transparent;border-color:rgba(240,231,212,.22);color:var(--sc-cream-2);font-size:.6rem}
.sc-doors{display:grid;gap:2.4rem;max-width:64rem;margin:0 auto;padding:0 1.4rem}
@media(min-width:880px){
  .sc-doors{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
  .sc-doors .sc-door{padding:2.4rem 1.8rem 2.6rem}
  .sc-doors .sc-door h3{font-size:clamp(1.5rem,2.4vw,2rem)}
}

.sc-foot{
  position:relative;margin-top:12vh;padding:3.2rem 0 7.5rem;border-top:0;
  background:linear-gradient(to bottom, rgba(9,7,5,0), rgba(9,7,5,.86) 42%, rgba(9,7,5,.96));
}
.sc-foot .in{
  width:min(70rem,100%);margin:0 auto;padding:0 clamp(1.4rem,4vw,3.2rem);
  display:flex;flex-wrap:wrap;gap:1rem 2.4rem;align-items:baseline;justify-content:space-between;
}
.sc-foot img{height:1.7rem;width:auto;display:block;opacity:.9}
.sc-foot .mk{
  font-family:var(--sc-display);font-style:italic;font-weight:500;font-size:1.05rem;color:var(--sc-cream-2);
}
.sc-foot a{
  font-family:var(--sc-prose);font-weight:300;font-size:.9rem;
  color:var(--sc-cream-2);text-decoration:none;border-bottom:1px solid rgba(240,231,212,.24);
}
.sc-foot a:hover{color:var(--terr-lit);border-color:var(--terr-lit)}
.sc-footline{
  width:min(70rem,100%);margin:0 auto 1.6rem;padding:0 clamp(1.4rem,4vw,3.2rem);
  font-family:var(--sc-display);font-style:italic;font-weight:500;
  font-size:clamp(1rem,1.6vw,1.2rem);line-height:1.55;color:var(--sc-cream-2);max-width:44rem;
}

/* ---------------------------------------------------------------
   6 · the one interaction: the panel it opens into
   --------------------------------------------------------------- */
.sc-panel{
  position:fixed;inset:0;z-index:80;display:none;overflow-y:auto;overscroll-behavior:contain;
  background:radial-gradient(130% 120% at 50% 42%, rgba(9,7,5,.88) 0%, rgba(9,7,5,.95) 100%);
  -webkit-backdrop-filter:blur(7px) saturate(.85);backdrop-filter:blur(7px) saturate(.85);
  opacity:0;transition:opacity .5s var(--sc-ease);
}
.sc-panel.open{display:block}
.sc-panel.on{opacity:1}
.sc-panel-in{position:relative;width:min(54rem,92vw);margin:0 auto;padding:6.5rem 0 8rem}
.sc-x{
  position:fixed;top:1.1rem;right:1.6rem;z-index:4;
  font-family:var(--sc-caps);font-weight:600;font-size:.6rem;letter-spacing:.32em;
  color:var(--sc-cream);opacity:.7;background:rgba(9,7,5,.5);border:1px solid rgba(240,231,212,.24);
  border-radius:999px;padding:.7em 1.4em;cursor:pointer;transition:all .3s ease;
}
.sc-x:hover{opacity:1;border-color:var(--terr-lit);color:var(--terr-lit)}
.sc-ph{
  font-family:var(--sc-display);font-style:italic;font-weight:600;
  font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.05;color:var(--sc-cream);margin:.5rem 0 1rem;
}
.sc-intro{
  font-family:var(--sc-prose);font-weight:300;font-size:1.03rem;line-height:1.7;
  color:var(--sc-cream-2);max-width:38em;margin:0 0 2rem;
}
.sc-prompt{
  font-family:var(--sc-mono);font-weight:400;font-size:.58rem;letter-spacing:.28em;
  color:var(--terr-lit);text-transform:uppercase;margin:0 0 1rem;min-height:1.2em;
}
.sc-note{
  font-family:var(--sc-prose);font-style:italic;font-weight:300;font-size:.95rem;line-height:1.6;
  color:#b6ab93;margin:1.1rem 0 0;max-width:38em;
}
.sc-priv{
  font-family:var(--sc-mono);font-size:.53rem;letter-spacing:.2em;line-height:1.9;
  color:#8d836f;text-transform:uppercase;margin:1.2rem 0 0;
}
.sc-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem;align-items:center}

/* a panel that must not hide the plate it is reading (ground, surveyor) */
.sc-panel--plate{
  overflow:hidden;-webkit-backdrop-filter:none;backdrop-filter:none;
  background:radial-gradient(130% 120% at 50% 48%, rgba(9,7,5,.26) 0%, rgba(9,7,5,.60) 100%);
}
.sc-panel--plate .sc-panel-in{position:absolute;inset:0;width:100%;margin:0;padding:0}
.sc-brief{position:absolute;left:clamp(1.4rem,4vw,3rem);top:5.4rem;max-width:24rem;z-index:2}
.sc-brief .sc-ph{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:.35rem 0 .7rem}
.sc-brief .sc-intro{font-size:.95rem;margin:0 0 .9rem}
.sc-brief .sc-prompt{margin:0}

/* ---------------------------------------------------------------
   7 · shared mechanic furniture
   --------------------------------------------------------------- */

/* a card that can be chosen (fire beats, school answers, files envelopes) */
.sc-card{
  display:block;width:100%;text-align:left;font:inherit;cursor:pointer;
  background:rgba(240,231,212,.045);border:1px solid rgba(240,231,212,.19);
  padding:1rem 1.2rem;color:var(--sc-cream-2);
  transition:border-color .3s ease,background .3s ease,color .3s ease,transform .3s var(--sc-ease);
}
.sc-card:hover{border-color:rgba(240,231,212,.5);background:rgba(240,231,212,.09)}
.sc-card.on{border-color:var(--terr-lit);background:rgba(240,231,212,.12);color:var(--sc-cream)}
.sc-card .cn{
  font-family:var(--sc-caps);font-weight:600;font-size:.63rem;letter-spacing:.3em;
  color:var(--sc-cream);display:block;
}
.sc-card.on .cn{color:var(--terr-lit)}
.sc-card .cd{
  font-family:var(--sc-prose);font-weight:300;font-size:.9rem;line-height:1.6;
  display:block;margin-top:.4rem;color:#b0a58e;
}
.sc-grid{display:grid;gap:.7rem}
@media(min-width:760px){ .sc-grid.two{grid-template-columns:1fr 1fr} }

/* a sheet of the surveyor's paper, laid on the night */
.sc-sheet{
  position:relative;background:#efe6d2;color:#241b10;
  font-family:var(--sc-prose);font-weight:300;font-size:1.02rem;line-height:1.75;
  padding:clamp(1.8rem,4vw,3rem) clamp(1.6rem,4vw,3.2rem);
  box-shadow:0 30px 70px -26px rgba(0,0,0,.9), 0 2px 22px -10px rgba(0,0,0,.6);
}
.sc-sheet::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 12% 0%, rgba(255,255,255,.42), rgba(255,255,255,0) 62%),
             radial-gradient(70% 60% at 96% 104%, rgba(150,126,86,.22), rgba(150,126,86,0) 70%);
}
.sc-sheet > *{position:relative}
.sc-sheet p{margin:0 0 1em}
.sc-sheet p:last-child{margin-bottom:0}
.sc-sheet .tab{
  font-family:var(--sc-mono);font-size:.54rem;letter-spacing:.26em;color:#8a7f6a;
  text-transform:uppercase;display:block;margin-bottom:1.4rem;
}
.sc-sheet .tab.blz{color:#c74e24}
.sc-sheet .from{
  font-family:var(--sc-display);font-style:italic;font-weight:500;font-size:1.1rem;
  color:#5b4c34;margin:0 0 .3rem;
}
.sc-sheet .q{
  font-family:var(--sc-display);font-style:italic;font-weight:600;
  font-size:clamp(1.2rem,2.2vw,1.55rem);line-height:1.3;color:#241b10;margin:0 0 1.6rem;
}
.sc-sheet .sig{text-align:right;font-style:italic;color:#5b4c34;margin-top:1.4rem}
.sc-sheet hr{border:0;height:1px;background:rgba(36,27,16,.18);margin:1.6rem 0}
.sc-blank{
  display:inline-block;min-width:8.5em;border-bottom:1px solid rgba(36,27,16,.42);
  transform:translateY(-.18em);
}
.sc-ink{                                   /* the drafted paragraph, written into the page */
  font-family:var(--sc-prose);font-weight:400;font-size:1.06rem;line-height:1.95;color:#241b10;
}
.sc-ink .wr{opacity:0;animation:sc-write .9s var(--sc-ease) forwards}
@keyframes sc-write{ from{opacity:0;filter:blur(2px)} to{opacity:1;filter:blur(0)} }

/* fields, dark ground */
.sc-field-row{margin-bottom:1.3rem}
.sc-field-row label{
  display:block;font-family:var(--sc-caps);font-weight:600;font-size:.6rem;letter-spacing:.3em;
  color:var(--sc-cream-2);opacity:.72;margin-bottom:.5rem;
}
.sc-field-row input,.sc-field-row textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid rgba(240,231,212,.28);
  color:var(--sc-cream);font-family:var(--sc-prose);font-weight:300;font-size:1.05rem;
  padding:.5em 0;outline:none;border-radius:0;transition:border-color .25s ease;resize:vertical;
}
.sc-field-row textarea{min-height:3.1em;line-height:1.55}
.sc-field-row input:focus,.sc-field-row textarea:focus{border-color:var(--terr-lit)}
.sc-field-row input::placeholder,.sc-field-row textarea::placeholder{color:#7d7462;font-style:italic}

/* the logbook: a real page, so atlas.css's ink-on-paper form is right */
.sc-logbook{position:relative;max-width:40rem;margin:0 auto}
.sc-logbook .lb-rule{
  font-family:var(--sc-mono);font-size:.54rem;letter-spacing:.26em;color:#8a7f6a;
  text-transform:uppercase;display:block;margin-bottom:1.6rem;
}
.sc-logbook #terrain-note{display:none;font-family:var(--sc-mono);font-size:.6rem;letter-spacing:.16em;color:#c74e24;margin-bottom:1.2rem;text-transform:uppercase}
.sc-logbook .f-field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#6f6759 50%),linear-gradient(135deg,#6f6759 50%,transparent 50%);
  background-position:calc(100% - 15px) 55%,calc(100% - 10px) 55%;background-size:5px 5px;background-repeat:no-repeat;cursor:pointer;
}
.sc-logbook .btn{font-family:var(--sc-caps);letter-spacing:.3em;font-size:.68rem}
.sc-sheet .inkeye{white-space:nowrap}
.sc-logbook .sc-lead{font-style:italic;color:#5b4c34;margin:0 0 1.8rem;font-size:1rem;line-height:1.7}

/* hotspots and instruments laid over the plate */
.sc-hotlayer{position:absolute;inset:0;pointer-events:none}
.sc-hot{
  position:absolute;left:var(--x,50%);top:var(--y,50%);transform:translate(-50%,-50%);
  pointer-events:auto;background:none;border:0;padding:.6rem;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:.45rem;
  color:var(--sc-cream);opacity:.9;transition:opacity .45s ease,transform .45s var(--sc-ease);
}
.sc-hot svg{width:34px;height:34px;overflow:visible;display:block;filter:drop-shadow(0 2px 8px rgba(0,0,0,.95))}
.sc-hot .hl{
  font-family:var(--sc-caps);font-weight:600;font-size:.55rem;letter-spacing:.26em;
  white-space:nowrap;text-shadow:0 1px 8px rgba(9,7,5,.98),0 0 18px rgba(9,7,5,.9);
}
.sc-hot::after{
  content:"";position:absolute;left:50%;top:14px;width:34px;height:34px;margin:-17px 0 0 -17px;
  border:1px solid rgba(240,231,212,.5);border-radius:50%;opacity:0;
  transition:opacity .4s ease,transform .6s var(--sc-ease);transform:scale(.5);
}
.sc-hot:hover::after,.sc-hot:focus-visible::after{opacity:.8;transform:scale(1)}
.sc-hot:hover,.sc-hot:focus-visible{opacity:1;transform:translate(-50%,calc(-50% - 3px))}
.sc-hot.read{color:var(--terr-lit)}
.sc-hot.held{color:var(--terr-lit);opacity:1;transform:translate(-50%,calc(-50% - 9px))}
.sc-hotlayer.holding .sc-hot:not(.held){opacity:.26}
.sc-notepill{
  position:absolute;left:var(--nx,50%);top:var(--ny,50%);width:min(26rem,86vw);
  z-index:3;pointer-events:auto;
}

/* ---------------------------------------------------------------
   8 · arrival, and the exhale back to the atlas
   --------------------------------------------------------------- */
.scene .sc-hero-in{transition:opacity .8s ease .2s, transform .9s var(--sc-settle) .2s}
.scene.arriving .sc-hero-in{opacity:0;transform:translateY(20px)}
.scene.arriving .sc-bar,.scene.arriving .sc-act{opacity:0}

body.leaving .sc-veil{opacity:1}
body.leaving .sc-plate img,body.leaving .sc-plate video{
  transform:scale(.82)!important;transition:transform 520ms var(--sc-ease)!important;
}
body.leaving .sc-bar,body.leaving .sc-act,body.leaving .sc-flow{
  opacity:0;transition:opacity 200ms ease;
}
body.panel-open{overflow:hidden}
body.panel-open .sc-act{opacity:0;pointer-events:none}
/* the page steps back so the panel has the plate to itself */
body.panel-open .sc-flow{opacity:0;pointer-events:none;transition:opacity .4s ease}
.sc-flow{transition:opacity .5s ease}

/* ---------------------------------------------------------------
   9 · reduced motion: everything collapses to opacity
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .sc-plate img,.sc-plate video{transform:none!important;transition:opacity .3s linear!important;filter:none!important}
  .sc-stop{transform:none!important;transition:opacity .3s linear!important}
  .scene .sc-hero-in{transform:none!important;transition:opacity .3s linear!important}
  .scene.arriving .sc-hero-in{transform:none}
  body.leaving .sc-plate img,body.leaving .sc-plate video{transform:none!important}
  .sc-ink .wr{animation:none;opacity:1}
  .sc-hot,.sc-hot::after{transition:opacity .2s linear!important;transform:translate(-50%,-50%)!important}
  .sc-hot::after{transform:translate(-50%,-50%) scale(1)!important}
}

/* ---------------------------------------------------------------
   10 · under 760px: the plate still covers, the waypoints unstack
   --------------------------------------------------------------- */
@media(max-width:759px){
  .sc-bar{padding:.85rem 1.1rem}
  .sc-bar .wm img{height:1.55rem}
  .sc-back{font-size:.53rem;letter-spacing:.22em}
  .sc-hero{padding:0 0 12vh}
  .sc-hero-in{padding:1.9rem 1.4rem 2.1rem;max-width:none}
  .sc-hero-in::before{inset:-1.4rem -1.4rem -2rem -1.4rem}
  .sc-hold{padding:0 1.1rem}

  .sc-anchor{position:static;height:auto}
  .sc-anchor-in{position:static;height:auto;pointer-events:auto}
  .sc-trigger{display:none}
  .sc-stops{padding:2vh 0 2vh}
  .sc-stop{
    position:relative;left:auto!important;top:auto!important;
    width:auto;margin:0 0 3.4rem;opacity:1;transform:none;pointer-events:auto;
  }
  .sc-stop:not(.reached){pointer-events:auto}
  .sc-stop .num,.sc-stop .flag{margin-left:1.4rem}
  .sc-stop .sc-pillow{max-width:none}
  .sc-pillow{padding:1.7rem 1.4rem;max-width:none}
  /* at this width the pillow is the full column, so the field runs edge to
     edge and fades only top and bottom. No side edges, and nothing overflows. */
  .sc-pillow::before,.sc-hero-in::before{
    inset:-1.3rem 0;
    background-image:var(--sc-pillow);background-color:rgba(9,7,5,.46);
    -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 15%, #000 85%, rgba(0,0,0,0) 100%),
                       linear-gradient(to right,  rgba(0,0,0,0) 0%, #000 9%,  #000 91%, rgba(0,0,0,0) 100%);
            mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 15%, #000 85%, rgba(0,0,0,0) 100%),
                       linear-gradient(to right,  rgba(0,0,0,0) 0%, #000 9%,  #000 91%, rgba(0,0,0,0) 100%);
    -webkit-mask-composite:source-in;mask-composite:intersect;
  }
  .sc-hero-in::before{inset:-1.6rem 0 -2rem 0}

  .sc-end{padding:6vh 0 0}
  .sc-door{padding:2.4rem 1.5rem 2.6rem}
  .sc-doors{gap:1.4rem}
  .sc-foot{padding:2.4rem 0 6.5rem}
  .sc-foot .in{gap:.9rem 1.6rem}

  .sc-act{bottom:1.1rem;font-size:.58rem;letter-spacing:.26em;padding:.9em 1.4em;max-width:calc(100vw - 1.6rem)}
  .sc-panel-in{padding:5.4rem 1.1rem 7rem;width:100%}
  .sc-x{top:.8rem;right:.9rem;font-size:.55rem;padding:.6em 1.1em}
  .sc-sheet{font-size:.98rem}

  /* the plate reads become a list you can actually hit with a thumb */
  .sc-panel--plate{overflow-y:auto;background:radial-gradient(130% 120% at 50% 48%, rgba(9,7,5,.72) 0%, rgba(9,7,5,.9) 100%)}
  .sc-panel--plate .sc-panel-in{position:relative;inset:auto;padding:5.4rem 1.1rem 7rem}
  .sc-brief{position:relative;left:auto;top:auto;max-width:none;margin-bottom:1.6rem}
  .sc-hotlayer{position:relative;inset:auto;display:grid;gap:.7rem;pointer-events:auto}
  .sc-hot{
    position:relative;left:auto!important;top:auto!important;transform:none!important;
    flex-direction:row;justify-content:flex-start;gap:.9rem;padding:.85rem 1rem;
    border:1px solid rgba(240,231,212,.2);background:rgba(240,231,212,.05);width:100%;
  }
  .sc-hot::after{display:none}
  .sc-hot svg{width:26px;height:26px;flex:0 0 auto}
  .sc-notepill{position:relative;left:auto;top:auto;width:auto;margin:.9rem 0 1.4rem}
}

/* very short viewports: keep a standing waypoint on screen */
@media(min-width:760px) and (max-height:700px){
  .sc-stop .sc-pillow{padding:1.5rem 1.8rem}
  .sc-stop .sc-pillow p{font-size:.98rem;line-height:1.6}
  .sc-stop{top:clamp(5.6rem, var(--y,46%), calc(100% - 21rem))}
}