/* =====================================================================
   trial.css  ·  THE TRIAL, AND THE EDGES OF THE SHEET
   Loaded ONLY by wood, pit, hollow, return, valley, the back room and
   off the map, and always AFTER scene.css.

   It edits nothing shared. All it does is carry the trial's own
   furniture (the separation caption, the keepers' riddle, the knot and
   rite chips, the ladder / triumph / fork overlays, the beast's hand of
   cards, the camp) into the language that map-type.css §8 and scene.css
   already speak: the pillow, the four type roles, the cream-on-night
   buttons, the territory ink.

   Rule of the house, restated: Cormorant Garamond italic for names and
   whole sentences, Cormorant SC for every letterspaced roman, Spectral
   300 for prose, IBM Plex Mono for coordinates and file numbers ONLY.
   ===================================================================== */

/* ---------------------------------------------------------------
   1 · the inks. The trial has its own four, plus the two edges.
   --------------------------------------------------------------- */
body[data-terr="wood"]    { --terr:#8a6d3f }
body[data-terr="pit"]     { --terr:#c74e24 }
body[data-terr="hollow"]  { --terr:#8a6d3f }
body[data-terr="return"]  { --terr:#c74e24 }
body[data-terr="valley"]  { --terr:#c74e24 }

body.scene[data-terr="wood"]   { --terr-lit:#dcb98c }
body.scene[data-terr="pit"]    { --terr-lit:#e0703f }
body.scene[data-terr="hollow"] { --terr-lit:#e3b784 }
body.scene[data-terr="return"] { --terr-lit:#e0a05e }
body.scene[data-terr="valley"] { --terr-lit:#e0703f }
body.scene[data-terr="edge"]   { --terr-lit:#e0703f }   /* off the map, the back room: the blaze */

/* the pillow arrives with the rest of the chrome, it does not snap */
.scene .sc-pillow{ transition:opacity .8s ease 300ms }

/* a page with no plate of its own still wants the night under it */
body.scene.flat{ background:var(--sc-night) }

/* ---------------------------------------------------------------
   2 · the plate, when the page drives its own layers
   The trial pages cross-fade two and three layers inside the plate and
   pulse the whole plate when the beast swells. scene.css's transition
   is transform only, so the opacity fade has to be restated here.
   --------------------------------------------------------------- */
.sc-plate .layer{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:opacity 1.4s ease, transform 2.4s var(--sc-ease,cubic-bezier(.6,.05,.25,1));
}
.sc-plate{ transition:opacity 1.3s ease }

/* ---------------------------------------------------------------
   3 · the flow. Trial scenes hang their copy off the bottom of the
   first screen, the way the scenes always did.
   --------------------------------------------------------------- */
.tr-flow{
  position:relative; z-index:20;
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.tr-spacer{ flex:1; min-height:26vh }
.tr-hold{ width:min(70rem,100%); margin:0 auto; padding:0 clamp(1.1rem,4vw,3.2rem) }

/* ---------------------------------------------------------------
   4 · the pillows the trial already had, re-cut as lozenges
   --------------------------------------------------------------- */

/* the separation caption in the wood: centred, low, and it breathes */
.tr-cap{
  position:relative; z-index:20;
  width:min(44rem,calc(100vw - 2.2rem)); max-width:none; margin:0 auto 10vh; text-align:center;
}
.tr-cap .sc-verb{ display:block; margin-bottom:1rem; font-size:.62rem }
.tr-cap .sc-h1{ font-size:clamp(2.1rem,5.6vw,3.5rem); margin:0 0 1.3rem }
.tr-cap .line{
  font-family:var(--sc-display); font-style:italic; font-weight:500;
  font-size:clamp(1.15rem,2.1vw,1.6rem); line-height:1.5; color:var(--sc-cream);
  min-height:3em; opacity:0; transition:opacity 1s ease;
  text-shadow:0 1px 18px rgba(9,7,5,.9);
}
.tr-cap .line.on{ opacity:1 }
.tr-cap .go{ margin-top:1.7rem; opacity:0; transition:opacity .8s }
.tr-cap .go.on{ opacity:1 }

/* the arrival line at the top of the pit and the hollow */
.tr-arrival{
  position:relative; z-index:20;
  width:min(42rem,calc(100vw - 2.2rem)); max-width:none; margin:5.6rem auto 0; text-align:center;
}
.tr-arrival .sc-verb{ display:block; margin-bottom:.9rem; font-size:.62rem }
.tr-arrival .sc-h1{ font-size:clamp(2.1rem,5.6vw,3.5rem); margin:0 0 1rem }
.tr-arrival .said{
  font-family:var(--sc-display); font-style:italic; font-weight:500;
  font-size:clamp(1.05rem,1.9vw,1.4rem); line-height:1.5; color:var(--sc-cream);
  text-shadow:0 1px 18px rgba(9,7,5,.9);
}

/* the knot chip and the rite chip: the same lozenge, pinned to a corner */
.tr-chip{
  position:fixed; top:4.6rem; right:clamp(.8rem,2vw,1.6rem); z-index:24;
  width:max-content; max-width:min(19rem,calc(100vw - 2rem)); padding:1rem 1.3rem;
}
.tr-chip .sc-key{ display:block; margin-bottom:.45rem; opacity:.9 }
.tr-chip .cl{
  display:block; font-family:var(--sc-caps); font-weight:600;
  font-size:.56rem; letter-spacing:.24em; line-height:1.9; color:var(--sc-cream-2);
  text-shadow:0 1px 8px rgba(9,7,5,.95);
}
.tr-chip .cl b{ color:var(--terr-lit); font-weight:600 }
.tr-knots{ display:flex; gap:.45rem; margin-top:.6rem; justify-content:flex-end }
.tr-knots span{
  width:11px; height:11px; border-radius:50%;
  border:1.5px solid rgba(240,231,212,.45); transition:background .5s ease,border-color .5s ease;
}
.tr-knots span.slipped{ background:var(--terr-lit); border-color:var(--terr-lit) }

/* the line of quiet exits along the bottom */
.tr-hint{
  position:relative; z-index:20; text-align:center; margin:0 auto .9rem;
  width:min(62rem,calc(100vw - 2.2rem));
  font-family:var(--sc-caps); font-weight:600;
  font-size:.58rem; letter-spacing:.26em; line-height:2.1; color:var(--sc-cream-2);
  opacity:.78; text-shadow:0 1px 9px rgba(9,7,5,.98), 0 0 20px rgba(9,7,5,.85);
}
.tr-hint a{ color:var(--terr-lit); text-decoration:none; border-bottom:1px solid transparent }
.tr-hint a:hover{ border-bottom-color:var(--terr-lit) }
.tr-hint .sep{ opacity:.4; padding:0 .5em }

/* ---------------------------------------------------------------
   5 · the keepers' doors: plaque above, riddle below, one column
   --------------------------------------------------------------- */
.tr-frame{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden;
}
.tr-media{ position:absolute; inset:0; font-size:0 }
.tr-media img,.tr-media video{ width:100%; height:100%; display:block; object-fit:cover }
.tr-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(9,7,5,.5) 0%, rgba(9,7,5,.05) 30%, rgba(9,7,5,.42) 66%, rgba(9,7,5,.82) 100%);
}
.tr-plaque{
  position:relative; z-index:2; width:min(70rem,calc(100vw - 2.2rem)); margin:0 auto; text-align:center;
  font-family:var(--sc-display); font-style:italic; font-weight:500;
  font-size:clamp(1.02rem,1.55vw,1.36rem); line-height:1.55; color:var(--sc-cream);
  padding:1.6rem 2.2rem .4rem;
}
.tr-plaque em{ color:var(--terr-lit); font-style:italic }
.tr-riddle{
  position:relative; z-index:2; width:min(70rem,calc(100vw - 2.2rem));
  margin:0 auto 3.5vh; padding:.6rem 2.2rem 2rem; text-align:center;
}
/* one pillow under the pair, so the plaque and the riddle read as one board */
.tr-board{ position:relative; z-index:2 }
.tr-board::before{
  content:""; position:absolute; inset:-.6rem -1rem -1.2rem -1rem; 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);
}
.tr-board > *{ position:relative; z-index:1 }

.tr-words{ display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center }
.tr-words button{
  font-family:var(--sc-display); font-style:italic; font-weight:500;
  font-size:clamp(.98rem,1.1vw,1.2rem); line-height:1.2; color:var(--sc-cream-2);
  background:rgba(9,7,5,.5); border:1px solid rgba(240,231,212,.24); border-radius:999px;
  padding:.5em 1.2em; cursor:pointer; transition:border-color .25s,background .25s,color .25s;
}
.tr-words button:hover{ border-color:rgba(240,231,212,.6); color:var(--sc-cream) }
.tr-words button.picked{ background:var(--terr-lit); border-color:var(--terr-lit); color:#14100c }
.tr-qline{
  margin:1.1rem 0 0; font-family:var(--sc-display); font-style:italic; font-weight:500;
  font-size:1.08rem; color:var(--sc-cream-2);
}
.tr-qline em{ color:var(--sc-cream) }
.tr-row{ display:flex; gap:.9rem; flex-wrap:wrap; justify-content:center; margin:1.1rem 0 0 }
.tr-answer{
  font-family:var(--sc-display); font-style:italic; font-weight:600;
  font-size:1.14rem; line-height:1.5; color:var(--sc-cream); min-height:1.6em; margin:1rem 0 0;
}
.tr-note{
  font-family:var(--sc-caps); font-weight:600; font-size:.58rem; letter-spacing:.26em;
  line-height:2; color:var(--sc-cream-2); opacity:.8; min-height:1.6em; margin:.9rem 0 0;
}
.tr-note.blz{ color:var(--terr-lit); opacity:1 }

/* ---------------------------------------------------------------
   6 · the buttons. scene.css's .sc-btn is the one true pill; these
   are only its two tempers.
   --------------------------------------------------------------- */
.sc-btn.blz{ border-color:var(--terr-lit); color:var(--terr-lit) }
.sc-btn.blz:hover{ background:var(--terr-lit); border-color:var(--terr-lit); color:#12100c }
.sc-btn.wide{ font-size:.62rem; letter-spacing:.28em }

/* ---------------------------------------------------------------
   7 · the overlays the trial owns (the fall, the ladder, the
   triumph, the fork, the open door). They are NOT .sc-panel: they
   are page-driven and must not be picked up by scene.js.
   --------------------------------------------------------------- */
.tr-over{
  position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center;
  padding:1.2rem;
  background:radial-gradient(130% 120% at 50% 42%, rgba(9,7,5,.86) 0%, rgba(9,7,5,.95) 100%);
  -webkit-backdrop-filter:blur(7px) saturate(.85); backdrop-filter:blur(7px) saturate(.85);
}
.tr-over.on{ display:flex }
.tr-over-in{ max-width:38rem; text-align:center }
.tr-over-in .sc-key{ display:block; margin-bottom:.8rem; color:var(--terr-lit); opacity:1 }
.tr-over-in h2{
  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:0 0 1rem;
}
.tr-over-in p{
  font-family:var(--sc-prose); font-weight:300; font-size:1.03rem; line-height:1.72;
  color:var(--sc-cream-2); margin:0 0 1em;
}
.tr-over-in p.said{
  font-family:var(--sc-display); font-style:italic; font-weight:500;
  font-size:clamp(1.15rem,2.1vw,1.55rem); line-height:1.45; color:var(--sc-cream); margin-bottom:1.4rem;
}
.tr-over-in strong{ color:var(--sc-cream); font-weight:600 }
.tr-over-in .tr-row{ margin-top:1.6rem }

/* the door that opens when the riddle is folded right */
.tr-onward{
  display:none; position:relative; z-index:20; text-align:center;
  width:min(44rem,calc(100vw - 2.2rem)); max-width:none; margin:0 auto 8vh; padding:2.2rem 2.4rem 2.4rem;
}
.tr-onward .said{
  font-family:var(--sc-display); font-style:italic; font-weight:600;
  font-size:clamp(1.15rem,2.1vw,1.5rem); line-height:1.45; color:var(--sc-cream); margin:.9rem 0;
}
.tr-onward p{
  font-family:var(--sc-prose); font-weight:300; font-size:1rem; line-height:1.7; color:var(--sc-cream-2);
}
.tr-onward .tr-row{ margin-top:1.5rem }

/* the fall. A fixed sheet of black, so nothing under it can move it. */
.tr-fall{
  position:fixed; inset:0; z-index:90; background:#060404;
  display:none; align-items:center; justify-content:center; text-align:center; padding:0 1.5rem;
}
.tr-fall.falling{ display:flex }
.tr-fall p{
  font-family:var(--sc-display); font-style:italic; font-weight:500;
  font-size:clamp(1.3rem,3vw,2rem); line-height:1.4; color:var(--sc-cream-2);
  opacity:0; transition:opacity .8s;
}
.tr-fall.falling p{ opacity:1 }

/* the shake, and the plunge. The SCENE moves. Never <html>, never
   <body>: a transform there would break every fixed overlay. */
@keyframes tr-shake{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-14px,6px) rotate(-1.2deg)}
  40%{transform:translate(11px,-8px) rotate(1deg)}
  60%{transform:translate(-9px,10px) rotate(-.8deg)}
  80%{transform:translate(7px,-5px) rotate(.6deg)}
}
@keyframes tr-plunge{
  0%{transform:translateY(0) scale(1);opacity:1}
  100%{transform:translateY(-60vh) scale(1.25);opacity:0}
}
body.shaking .sc-plate,body.shaking .tr-flow{ animation:tr-shake .55s ease-in-out 2 }
body.plunging .sc-plate,body.plunging .tr-flow{ animation:tr-plunge 1.2s ease-in forwards }
@media (prefers-reduced-motion: reduce){
  body.shaking .sc-plate,body.shaking .tr-flow,
  body.plunging .sc-plate,body.plunging .tr-flow{ animation:none }
}

/* ---------------------------------------------------------------
   8 · the talking stone. The subtitles and the rune row are
   atlas.css's and stay exactly as they are. Only the label around
   the stone changes face: it is a legend, not a file number.
   --------------------------------------------------------------- */
.scene .stone-k{
  font-family:var(--sc-caps); font-weight:600;
  font-size:.6rem; letter-spacing:.28em; color:var(--sc-cream-2);
}
.scene .rune-ui{ z-index:20 }

/* ---------------------------------------------------------------
   9 · the camp at dawn: the portrait, and the sheets laid on it
   --------------------------------------------------------------- */
.tr-scrim{
  position:relative;
  background:linear-gradient(to bottom, rgba(9,7,5,0) 0%, rgba(9,7,5,.62) 9%, rgba(9,7,5,.78) 30%, rgba(9,7,5,.82) 100%);
}
.tr-said{
  display:grid; grid-template-columns:7rem 1fr; gap:1.6rem; align-items:start;
  max-width:44rem;
}
.tr-said .arch{ border-radius:80px; overflow:hidden; filter:saturate(.9) contrast(1.02) }
.tr-said .hi{
  font-family:var(--sc-display); font-style:italic; font-weight:600;
  font-size:clamp(1.2rem,2.2vw,1.6rem); line-height:1.3; color:var(--sc-cream); margin:0 0 .8rem;
}
.tr-recap{ display:none; margin-bottom:.9rem }
@media(max-width:560px){
  .tr-said{ grid-template-columns:1fr; gap:1.1rem }
  .tr-said .arch{ max-width:120px }
}
.tr-sheetwrap{ max-width:44rem; margin:0 auto }
.tr-sheetwrap + .tr-sheetwrap{ margin-top:2.2rem }
a.sc-scent{
  text-decoration:none; opacity:.74; text-shadow:0 1px 12px rgba(9,7,5,.95), 0 0 26px rgba(9,7,5,.8);
  transition:opacity .3s ease,color .3s ease;
}
a.sc-scent:hover{ opacity:1; color:var(--terr-lit) }
/* a button standing on the surveyor's paper wears the same caps as the rest */
.sc-sheet .btn{ font-family:var(--sc-caps); letter-spacing:.3em; font-size:.68rem }
.sc-sheet .tr-k{
  display:block; margin-bottom:1.1rem;
  font-family:var(--sc-caps); font-weight:600; font-size:.62rem; letter-spacing:.3em; color:#8a7f6a;
}
.sc-sheet .tr-k.blz{ color:#c74e24 }
.tr-voxrow{ display:flex; gap:.9rem; flex-wrap:wrap; align-items:center; margin-top:1rem }
.tr-mini{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.2rem }
@media(max-width:560px){ .tr-mini{ grid-template-columns:1fr } }
#vox-timer{ font-family:var(--sc-mono); font-size:.8rem; color:#c74e24; min-width:4em; font-variant-numeric:tabular-nums }
#vox-audio{ width:100%; margin-top:1rem; display:none }
#vox-status{
  font-family:var(--sc-prose); font-style:italic; font-weight:300; font-size:.92rem;
  color:#5b4c34; margin-top:.9rem; min-height:1.4em;
}
.tr-recdot{
  display:inline-block; width:9px; height:9px; border-radius:50%;
  background:#c74e24; margin-right:.5em; animation:tr-blink 1s infinite;
}
@keyframes tr-blink{ 50%{opacity:.2} }
@media (prefers-reduced-motion: reduce){ .tr-recdot{ animation:none } }

/* ---------------------------------------------------------------
   10 · the repeating valley: the beast's plate is a sheet of the
   surveyor's paper laid on the night, and the hand is three cards.
   --------------------------------------------------------------- */
.tr-arena{ position:relative; z-index:20; width:min(56rem,100%); margin:0 auto; padding:7.5rem 1.2rem 5rem }
.tr-arena .sc-h1{ font-size:clamp(2.3rem,6vw,4rem); margin:.7rem 0 1.1rem }
.tr-arena .sc-lede{ max-width:34em; color:var(--sc-cream-2) }
.tr-stage{
  position:relative; margin:2rem 0 0; background:#efe6d2; overflow:hidden;
  box-shadow:0 30px 70px -26px rgba(0,0,0,.9), 0 2px 22px -10px rgba(0,0,0,.6);
}
.tr-stage img{
  width:100%; display:block; position:relative;
  /* the beast plates are drawn on PURE WHITE. Multiplied onto the sheet the
     white margin disappears into the parchment instead of glaring off the
     night. The blend sits on the art, whose parent IS the sheet. */
  mix-blend-mode:multiply;
  transition:opacity .8s ease, transform 1.1s ease, filter 1.1s ease;
}
.tr-stage img.b{ position:absolute; inset:0; opacity:0 }
.tr-stage.state-lurk .lurk{ opacity:1 }
.tr-stage.state-big  .big { opacity:1; transform:scale(1.04) }
.tr-stage.state-done .done{ opacity:1 }
.tr-stage.hit img{ filter:blur(1.5px) }
.tr-beastline{
  position:absolute; left:0; right:0; top:0; padding:1.1rem 1.5rem; text-align:center;
  font-family:var(--sc-display); font-style:italic; font-weight:600;
  font-size:clamp(1rem,2.6vw,1.4rem); line-height:1.4; color:#241b10;
  text-shadow:0 1px 0 rgba(239,230,210,.95), 0 0 16px rgba(239,230,210,.95);
  min-height:3.4em;
}
.tr-round{
  position:absolute; right:1rem; bottom:.8rem;
  font-family:var(--sc-caps); font-weight:600; font-size:.58rem; letter-spacing:.28em; color:#6b5c42;
}
.tr-hand{ display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; margin-top:1.3rem }
@media(max-width:680px){ .tr-hand{ grid-template-columns:1fr } }
.tr-card{
  display:block; width:100%; text-align:left; font:inherit; cursor:pointer;
  background:rgba(240,231,212,.05); border:1px solid rgba(240,231,212,.2);
  padding:1.1rem 1.2rem; color:var(--sc-cream-2);
  transition:border-color .25s ease, background .25s ease, transform .25s var(--sc-ease,ease);
}
.tr-card:hover{
  border-color:var(--terr-lit); background:rgba(240,231,212,.1);
  transform:translateY(-4px);
}
.tr-card .cn{
  display:block; margin-bottom:.5rem;
  font-family:var(--sc-caps); font-weight:600; font-size:.58rem; letter-spacing:.28em; color:var(--terr-lit);
}
.tr-card .ct{
  display:block; font-family:var(--sc-display); font-style:italic; font-weight:600;
  font-size:1.06rem; line-height:1.35; color:var(--sc-cream);
}
.tr-card .cs{
  display:block; margin-top:.45rem;
  font-family:var(--sc-prose); font-weight:300; font-style:italic; font-size:.86rem; color:#b0a58e;
}
.tr-narr{
  margin-top:1.2rem; min-height:2.2em;
  font-family:var(--sc-display); font-style:italic; font-weight:500;
  font-size:1.1rem; line-height:1.5; color:var(--sc-cream-2);
}
.tr-epi{ display:none; margin-top:2rem; max-width:42rem }
.tr-epi .sc-key{ display:block; margin-bottom:.6rem; color:var(--terr-lit); opacity:1 }
.tr-epi .sig{
  font-family:var(--sc-display); font-style:italic; font-weight:500; color:var(--sc-cream-2); margin-top:.4rem;
}

/* ---------------------------------------------------------------
   11 · the two edges: off the map, and the back room
   --------------------------------------------------------------- */
.tr-edge{
  position:relative; z-index:20; min-height:100vh; min-height:100svh;
  display:flex; align-items:center; justify-content:center; text-align:center; padding:6rem 1.2rem 4rem;
}
.tr-edge-in{ max-width:38rem }
.tr-edge .sc-chrome{ display:block; margin-bottom:1.4rem; color:var(--terr-lit); opacity:1 }
.tr-edge .sc-h1{ font-size:clamp(2.2rem,6.6vw,4.2rem); margin:0 0 1.2rem }
.tr-edge .sc-lede{ margin:0 auto 2.2rem; max-width:30em; color:var(--sc-cream-2) }

.tr-room{
  position:relative; z-index:20; max-width:40rem; margin:0 auto; padding:15vh 1.4rem 5rem;
}
.tr-room .sc-h1{ font-size:clamp(2rem,5.2vw,3.1rem); margin:.7rem 0 1.8rem }
/* the letter's own text has to line up with the heading above it, so the
   pillow gives back the padding it took */
.tr-letter{ max-width:none; margin:0 -2.6rem }
.tr-letter p{ margin-bottom:1em }
.tr-letter p:last-child{ margin-bottom:0 }
.tr-letter .sig{
  font-family:var(--sc-display); font-style:italic; font-weight:500; color:#a4977e; margin-top:1.4rem;
}
.tr-cred{ display:none; margin-top:1.6rem; text-align:center }
.tr-cred .n{
  font-family:var(--sc-display); font-style:italic; font-weight:600;
  font-size:1.5rem; color:var(--sc-cream); margin-top:.4rem;
}
.tr-final{ display:none }
.tr-way{ margin-top:2.6rem }
.tr-way a{
  font-family:var(--sc-caps); font-weight:600; font-size:.6rem; letter-spacing:.28em;
  color:var(--sc-cream-2); opacity:.7; text-decoration:none;
}
.tr-way a:hover{ opacity:1; color:var(--terr-lit) }

/* ---------------------------------------------------------------
   11b · from 760px up: the field under a centred caption has to
   reach further than the token's default, because a wide short box
   makes the closest-side ellipse fade almost before it starts. And
   the hint line at the foot has to clear the marks satchel.
   --------------------------------------------------------------- */
@media(min-width:760px){
  .tr-cap::before,.tr-arrival::before{ inset:-2.6rem -2rem }
  .tr-chip::before{
    inset:-1.2rem -1.1rem;
    background:radial-gradient(118% 152% at 50% 50%,
      rgba(9,7,5,.88) 0%, rgba(9,7,5,.74) 46%, rgba(9,7,5,.36) 78%, rgba(9,7,5,0) 100%);
  }
  .tr-hint{ width:min(60rem,calc(100vw - 30rem)); margin-bottom:1.4rem; text-wrap:balance }
}

/* ---------------------------------------------------------------
   12 · under 760px. The chips unpin, the board unpads, nothing
   is allowed to push the page sideways.
   --------------------------------------------------------------- */
@media(max-width:759px){
  .tr-chip{
    position:relative; top:auto; right:auto; z-index:20;
    width:min(30rem,calc(100vw - 2.2rem)); max-width:none; margin:5.2rem auto 0; text-align:center;
  }
  .tr-chip .cl{ line-height:2 }
  .tr-knots{ justify-content:center }
  .tr-arrival{ margin-top:1.6rem; width:calc(100vw - 1.6rem) }
  .tr-arrival + .tr-spacer{ min-height:12vh }
  .tr-cap{ width:calc(100vw - 1.6rem); margin-bottom:7vh }
  .tr-plaque{ width:calc(100vw - 1.6rem); padding:1.3rem 1.1rem .3rem; font-size:1rem }
  .tr-riddle{ width:calc(100vw - 1.6rem); padding:.5rem 1.1rem 1.6rem }
  .tr-board::before{ inset:-.4rem 0 -.8rem 0 }
  .tr-words button{ font-size:.92rem; padding:.45em 1em }
  .tr-hint{ width:calc(100vw - 1.6rem); font-size:.54rem; letter-spacing:.2em }
  .tr-hint .sep{ display:block; height:0; overflow:hidden; padding:0 }
  .tr-over{ padding:1rem; align-items:flex-start; overflow-y:auto }
  .tr-over-in{ margin:auto 0; padding:5rem 0 3rem }
  .tr-onward{ width:calc(100vw - 1.6rem); padding:1.8rem 1.3rem 2rem }
  .tr-arena{ padding:6rem .9rem 4rem }
  .tr-room{ padding:11vh 1.1rem 4rem }
  .tr-letter{ margin:0 -1.4rem }
  .tr-edge{ padding:6rem 1rem 3rem }
  .tr-sheetwrap{ max-width:none }
}