/* ---------------------------------------------------------------------
   D8. The program's three faces, self hosted, copied from the research
   site's own assets/fonts rather than refetched, so the map is running
   the same files the site is and cannot drift from it.

   Roles are the research site's, not invented here:
     Nokio            headings and display, weight 500, tracking .01em
     Newsreader       prose, which is what body copy is set in there
     IBM Plex Mono    every small tracked label, button, meta and eyebrow

   That last one is what most of this page was: forty four of the map's
   forty seven font declarations were Helvetica at nine to twelve pixels
   with a tenth to three tenths of an em of tracking, which is a label,
   and labels on the research site are mono.
   --------------------------------------------------------------------- */
/* Only 400 and 500 are ever asked for: those are the only two weights any
   rule in either stylesheet sets on a Nokio element, and the only two the
   browser requests at runtime. The 300 and 700 faces were declared and
   shipped and never used. */
@font-face{font-family:'Nokio';font-style:normal;font-weight:400;src:url(fonts/Nokio-400.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Nokio';font-style:normal;font-weight:500;src:url(fonts/Nokio-500.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;src:url(fonts/Newsreader-var.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:200 800;src:url(fonts/Newsreader-var-italic.woff2) format('woff2');font-display:swap}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;src:url(fonts/IBMPlexMono-400.woff2) format('woff2');font-display:swap}


:root{
  --sans:Nokio,system-ui,sans-serif;
  --serif:Newsreader,Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --ink:#0B0F0E;   /* Ink, Shared Tokens. D9: the canvas clears to this, so the page has to match or a seam shows at the edge of the stage. */
  --bone:#FAF7F0;
  --chrome:#436692;
  --slate:#7F91AA;
  --flash:#9DC3E2;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;
  user-select:none;-webkit-user-select:none}
input,textarea{user-select:text;-webkit-user-select:text}
html,body{height:100%;overflow:hidden;background:var(--ink);color:var(--bone);
  font-family:var(--serif);}
button{font-family:inherit;cursor:pointer}
#stage{position:fixed;inset:0;touch-action:none;cursor:grab}
#stage:active{cursor:grabbing}
canvas{display:block}

/* ---------- header / footer furniture ---------- */
/* The header is fixed and the library scrolls underneath it, so without a
   background of its own every line of the library ran straight through the
   masthead on its way up the screen. This is a gradient rather than a blur:
   a blur here would sample a surface that changes every frame and cost what
   the side card's blur used to cost. Ink to transparent is invisible on the
   map, whose top edge is already ink, and opaque enough over the library to
   take the collision out. */
header{position:fixed;top:0;left:0;right:0;z-index:50;pointer-events:none;
  display:flex;justify-content:space-between;align-items:baseline;
  padding:18px 24px 26px;
  /* the masthead's second line ends 52px down and the header is 78px tall,
     so the solid part has to run past 67% before the fade starts, or the
     line underneath shows straight through the words */
  background:linear-gradient(to bottom,
    var(--ink) 0%, var(--ink) 72%,
    color-mix(in srgb, var(--ink) 55%, transparent) 88%,
    transparent 100%);}
.masthead{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--slate);
  font-family:var(--mono)}
.masthead b{color:var(--bone);font-weight:400}
.masthead a{text-decoration:none;color:inherit}
nav{pointer-events:auto;display:flex;gap:6px}
nav button{background:none;border:none;color:var(--slate);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;padding:4px 8px;border-bottom:1px solid transparent}
nav button.cur{color:var(--bone);border-bottom-color:var(--chrome)}
footer{position:fixed;bottom:0;left:0;right:0;z-index:20;pointer-events:none;
  padding:0 24px 14px;display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--slate)}
footer a{color:var(--slate);text-decoration:none;pointer-events:auto}
#mute{pointer-events:auto;background:none;border:1px solid rgba(127,145,170,.4);
  color:var(--slate);font-size:10px;letter-spacing:.1em;padding:3px 10px;border-radius:12px}

/* ---------- chakra markers ---------- */
.pt{position:fixed;z-index:10;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
  pointer-events:none;transition:opacity .5s;opacity:0}
.pt::after{content:'';position:absolute;inset:14px;border-radius:50%;background:var(--c);
  box-shadow:0 0 12px 2px var(--c)}
.pt.locked{opacity:0}
.pt.active{opacity:1;animation:pulse 2.4s ease-in-out infinite;pointer-events:auto;cursor:pointer}
.pt.active:hover{animation:none;transform:scale(1.35)}
.pt.engaged{opacity:1;animation:none}
.pt.engaged::after{box-shadow:0 0 22px 6px var(--c)}
.pt.resolved{opacity:.9;animation:none;pointer-events:auto;cursor:pointer}
.pt.resolved::after{inset:15px;box-shadow:0 0 12px 2px var(--c)}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
.pt.active::before{content:'';position:absolute;inset:6px;border-radius:50%;
  border:1px solid var(--slate);opacity:.55}

/* hold ring */
#ring{position:fixed;z-index:11;pointer-events:none;opacity:0;transition:opacity .3s}
#ring.on{opacity:1}
#ring circle.track{stroke:rgba(67,102,146,.35);fill:none}
#ring circle.prog{stroke:var(--chrome);fill:none;stroke-linecap:round;
  transform:rotate(-90deg);transform-origin:center}
#ring.flash circle.prog{stroke:var(--flash)}

/* ---------- coach: one short line per step ---------- */
#coach{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:16;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate);text-align:center;pointer-events:none;
  transition:opacity .5s;max-width:90vw}
#coach.off{opacity:0}

/* ---------- side panel ---------- */
#panel{position:fixed;top:64px;right:24px;bottom:56px;width:320px;z-index:15;
  display:flex;flex-direction:column;justify-content:center;pointer-events:none}
#paneltoggle{display:none;pointer-events:auto;align-self:flex-end;margin-bottom:6px;
  background:rgba(11,15,14,.8);border:1px solid rgba(67,102,146,.45);color:var(--slate);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  padding:5px 12px;border-radius:12px}
#panel.min .card{display:none}
/* No backdrop-filter here, deliberately. This panel sits on top of a canvas
   that redraws every frame, so a blur behind it makes the compositor re-blur
   that region sixty times a second. Measured on an Intel Iris on 2026-09-27:
   it cost about 42ms per frame, more than the particle figure, the ambient
   field and the whole animation loop put together, and dropping it took the
   map from 12.9fps to 24.6fps with nothing else changed. The opacity is
   raised from .82 to .94 to keep the panel reading as its own surface now
   that there is nothing softening what is behind it. */
.card{background:rgba(11,15,14,.94);border:1px solid rgba(67,102,146,.45);
  border-radius:10px;padding:22px 22px 20px;pointer-events:auto;
  max-height:100%;overflow-y:auto}
.card::-webkit-scrollbar{width:4px}
.card::-webkit-scrollbar-thumb{background:var(--chrome);border-radius:2px}
.kicker{font-family:var(--mono);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--slate);margin-bottom:10px}
.kicker i{font-style:normal;color:var(--ck,var(--bone))}
.card .line{font-size:17px;line-height:1.5;font-style:italic;margin-bottom:14px}
.card .sub{font-family:var(--mono);font-size:11.5px;line-height:1.6;
  color:var(--slate);letter-spacing:.03em}
.card .count{font-size:34px;font-style:normal;text-align:center;margin:10px 0 2px;
  font-variant-numeric:tabular-nums}
.card .phase{font-family:var(--mono);font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;text-align:center;color:var(--slate);min-height:14px}
.facts{margin:4px 0 6px}
.facts dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--slate);margin-top:9px}
.facts dd{font-size:13px;line-height:1.5;margin-top:2px}
.lawbox{margin-top:14px;padding:12px 14px;border:1px solid rgba(67,102,146,.4);
  border-radius:8px}
.lawbox .lname{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--slate)}
.lawbox .lmax{font-style:italic;font-size:14px;line-height:1.5;margin:5px 0 4px}
.lawbox .lgloss{font-family:var(--serif);font-size:11px;line-height:1.55;color:var(--slate)}
.readbar{display:flex;align-items:center;gap:10px;margin-top:14px}
.readbar .rc{font-size:15px;font-variant-numeric:tabular-nums;color:var(--slate);min-width:26px}
.btnrow{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.btn{background:none;border:1px solid var(--chrome);color:var(--bone);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  padding:8px 14px;border-radius:16px;transition:border-color .2s,color .2s,opacity .2s}
.btn:hover{border-color:var(--flash)}
.btn:disabled{opacity:.35;cursor:default}
.btn.ghost{border-color:rgba(127,145,170,.4);color:var(--slate)}
/* a link can wear the button shape: the leave-site door on the threshold */
.btnrow a.btn{text-decoration:none;display:inline-flex;align-items:center;line-height:1}
input.fill{width:100%;background:none;border:none;border-bottom:1px solid var(--chrome);
  color:var(--bone);font-family:var(--serif);font-style:italic;font-size:14px;
  padding:6px 2px;margin-top:12px;outline:none}
input.fill::placeholder{color:rgba(127,145,170,.6)}

/* color wheel */
#wheelwrap{margin-top:16px;display:none;text-align:center}
#wheelwrap.on{display:block}
#wheel{touch-action:none;cursor:pointer}
#wheellbl{font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--slate);margin-top:6px}

/* ---------- mood board ---------- */
#mood{position:fixed;left:24px;top:50%;transform:translateY(-50%);z-index:15;
  display:flex;flex-direction:column;gap:10px}
.tile{width:44px;height:44px;border-radius:6px;border:1px solid rgba(67,102,146,.35);
  overflow:hidden;opacity:.35;transition:opacity .8s;cursor:pointer}
.tile.filled{opacity:1;border-color:rgba(127,145,170,.6)}
.tile canvas{width:100%;height:100%;display:block}

/* ---------- intro ---------- */
#intro{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:rgba(11,15,14,.72);transition:opacity .9s}
#intro.off{opacity:0;pointer-events:none;visibility:hidden}
#intro.off *{pointer-events:none!important}
#intro .card{max-width:380px;margin:20px}
#intro .line{font-size:19px}

/* ---------- library overlay ---------- */
#library{position:fixed;inset:0;z-index:35;display:none;overflow-y:auto;
  background:rgba(11,15,14,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#library.on{display:block}
#library .wrap{max-width:600px;margin:118px auto 90px;padding:0 20px}
#library.widepad .wrap{max-width:1200px}
#library h2{font-size:22px;font-weight:400;font-style:italic;margin-bottom:6px}
#library .sech{font-size:16px;font-weight:400;font-style:italic;margin:26px 0 12px;color:var(--bone)}
#library .lede{font-family:var(--serif);font-size:12px;line-height:1.7;
  color:var(--slate);margin-bottom:24px}
.entry{border:1px solid rgba(67,102,146,.4);border-radius:10px;margin-bottom:12px;overflow:hidden}
.entry>button{width:100%;background:none;border:none;color:var(--bone);text-align:left;
  padding:14px 18px;display:flex;align-items:center;gap:12px;font-size:15px}
.entry .dot{width:10px;height:10px;border-radius:50%;background:var(--c);flex:none;
  box-shadow:0 0 8px 0 var(--c)}
.entry .sk{font-style:italic;color:var(--slate);font-size:13px}
.entry .body{display:none;padding:2px 18px 16px}
.entry.open .body{display:block}
.lawentry{padding:14px 18px 12px}
.lawentry .lmax{font-style:italic;font-size:15px;line-height:1.5}
.lawentry .lname{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--slate);margin-bottom:4px}
.lawentry .lgloss{font-family:var(--serif);font-size:11.5px;line-height:1.6;
  color:var(--slate);margin-top:6px}
.axrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}
.ax{border:1px solid rgba(67,102,146,.4);border-radius:8px;padding:12px 14px}
.ax .lname{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--slate)}
.ax p{font-family:var(--serif);font-size:11px;line-height:1.55;color:var(--bone);
  margin-top:5px;opacity:.85}
.srcnote{font-family:var(--mono);font-size:10px;color:var(--slate);
  opacity:.7;margin-top:20px;letter-spacing:.05em}

/* color tab */
#padwrap{margin-top:8px}
#slpad{width:100%;height:58vh;min-height:300px;border-radius:10px;touch-action:none;cursor:crosshair;display:block}
#huebar{width:100%;height:30px;border-radius:15px;margin-top:18px;touch-action:none;cursor:pointer;display:block}
#colread{display:flex;align-items:center;gap:14px;margin-top:18px}
#colswatch{width:54px;height:54px;border-radius:8px;border:1px solid rgba(127,145,170,.5)}
#colhex{font-size:20px;letter-spacing:.06em}
#colmap{font-family:var(--serif);font-size:12px;line-height:1.7;color:var(--slate);margin-top:14px}
#colmap b{color:var(--bone);font-weight:400}

/* ---------- reveal ---------- */
#reveal{position:fixed;inset:0;z-index:30;display:none;pointer-events:none}
#reveal.on{display:block}
#reveal .inner{position:absolute;right:24px;top:50%;transform:translateY(-50%);
  width:320px;pointer-events:none;opacity:0;transition:opacity 2s;max-height:86vh;overflow-y:auto}
#reveal.settle .inner{opacity:1;pointer-events:auto}
#collage{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0}
#collage .tile{width:100%;height:56px;opacity:1;cursor:default}
#reveal .line{font-size:17px;font-style:italic;line-height:1.5}
#stances{margin-top:16px}
#again{margin-top:20px}

/* ---------- responsive (first pass; mobile build comes later) ---------- */
@media (max-width:760px){
  header{flex-direction:column;align-items:flex-start;gap:4px;padding:12px 14px 0}
  nav{flex-wrap:wrap;gap:2px;margin-left:-8px}
  nav button{font-size:10.5px;padding:6px 8px}
  #panel{top:auto;right:12px;left:12px;bottom:52px;width:auto}
  .card{max-height:38vh}
  #mood{left:12px;top:96px;transform:none;flex-direction:row}
  .tile{width:34px;height:34px}
  #reveal .inner{right:12px;left:12px;width:auto;top:auto;bottom:60px;transform:none}
  .masthead span{display:none}
  footer .credit{display:none}
  footer{padding:0 14px 12px}
  #mute{font-size:11px;padding:7px 16px}
  #library .wrap{margin-top:128px}
  #coach{top:88px}
  #paneltoggle{display:block}
}
@media (prefers-reduced-motion:reduce){
  .pt.active{animation:none;opacity:1}
}

/* =====================================================================
   The threshold.

   The email gate page's design, brought inside. The map is the front door
   now, so nothing is asked for here except attention, but the gate's
   arrangement was the right one for a threshold and it is the only place
   in this project where the figure is shown moving rather than answered
   into being. On a phone the video sits above the words, which is the
   order Charles asked for on the gate; from 1024 up it takes the right of
   the frame and the words hold the left, and the scrim carries one into
   the other.
   ===================================================================== */
.threshold .thresh{
  position:fixed; inset:0; z-index:40; display:flex; flex-direction:column;
  overflow-y:auto; background:var(--ink);
}
.threshold .thresh-video{
  position:relative; order:1; width:100%; aspect-ratio:1/1;
  background:var(--ink); overflow:hidden; flex:none; pointer-events:none;
}
.threshold .thresh-vid{
  width:100%; height:100%; object-fit:cover; object-position:right center;
  display:block;
}
.threshold .thresh-scrim{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, transparent 0%,
    rgba(11,15,14,.35) 58%, rgba(11,15,14,.88) 82%, var(--ink) 100%);
}
.threshold .thresh-body{
  order:2; position:relative; z-index:2; width:100%;
  padding:4px 24px 40px; background:var(--ink);
}
.threshold .thresh-head{
  font-family:var(--sans); font-weight:500; font-size:27px; line-height:1.16;
  letter-spacing:-.01em; color:var(--bone); margin:10px 0 18px; max-width:17ch;
}
.threshold .thresh-body .sub{max-width:52ch}
/* the line under the title card, set in Nokio like the title above it */
/* the description under the title card */
.threshold .thresh-desc{margin-bottom:26px}
.threshold .thresh-desc p{margin-bottom:11px}
.threshold .thresh-desc p:last-child{margin-bottom:0}

.threshold .thresh-sub{
  font-family:var(--sans); font-weight:400; font-size:21px; line-height:1.25;
  color:color-mix(in srgb, var(--bone) 78%, transparent); margin-bottom:18px;
}

/* the toolbar is not reachable behind the threshold, so it is not shown
   until somebody has passed it */
header nav{opacity:0; pointer-events:none; transition:opacity .5s ease}
body.begun header nav{opacity:1; pointer-events:auto}
.threshold .thresh-note{
  font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  color:var(--slate); margin-top:22px; opacity:.75;
}

/* the consent gate */
.threshold .consent-head{
  font-family:var(--sans); font-weight:500; font-size:17px; color:var(--bone);
  margin:26px 0 8px;
}
.threshold .consent-intro,
.threshold .consent-note{
  font-size:13px; line-height:1.6; max-width:56ch; margin:0 0 14px;
  color:color-mix(in srgb, var(--bone) 74%, transparent);
}
.threshold .consent-note b,
.threshold .consent-intro b{color:var(--bone); font-weight:400}
.threshold .consent-link{
  font-family:var(--mono); font-size:10.5px; line-height:1.7; margin:0 0 6px;
  max-width:56ch; color:var(--slate);
}
.threshold .consent-link a{color:var(--chrome); text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--chrome) 45%, transparent)}
.threshold .consent-link a:hover{border-bottom-color:var(--chrome)}
.threshold .consent-link span{letter-spacing:.04em}

/* ---------- the research program's method marks ---------- */
/* The sprite itself must never take up space or be read aloud. */
.gram-defs{position:absolute;width:0;height:0;overflow:hidden}
.gram{width:44px;height:44px;display:block;color:var(--chrome)}

/* On the threshold: a colophon under the buttons, quiet enough to read
   past. The marks carry the research program's own blue, so they stay
   legible as an import rather than reading as local furniture. */
.method-band{margin-top:26px;max-width:60ch}
.method-cap{font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--slate);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--slate) 40%, transparent)}
.method-cap:hover{color:var(--chrome);border-bottom-color:var(--chrome)}
/* One chain, the width of the consent box.

   Every gram draws its line from x=0 to x=48 of a 48 by 48 box, so eight
   of them butted together already read as one run. Stretching them to fill
   a 56ch column would have meant either squashing the circles or eight
   marks a hundred pixels tall, so the marks keep their own size and a rule
   behind them carries the line the rest of the way. The rule sits at the
   same height the marks draw their line at, and the two marks that carry a
   solid fill, the encounter box and the trace box, sit on top of it and
   mask it, which is what they do on the research site too.

   The names live in <title> rather than under each mark, because a caption
   under each one puts a gutter between them and the run stops reading as
   one line. */
.method-marks{--mark:44px;--rule:color-mix(in srgb, var(--bone) 62%, transparent);
  list-style:none;display:grid;grid-template-columns:repeat(8,1fr);
  align-items:center;gap:0;margin:16px 0 0;padding:0;width:100%;max-width:56ch}
/* The connectors fill the space either side of each mark rather than running
   behind them. A single rule across the whole width looked right until the
   fourth mark, whose line is dashed to mean an interruption: the rule filled
   its gaps and the meaning went. So the line is only ever drawn where a mark
   is not drawing it. The eighth gets no connector on its right, because its
   line stops early and turns back, which is the point of it. */
.method-marks li{position:relative;display:flex;justify-content:center;
  min-width:0;line-height:0}
.method-marks li::before,
.method-marks li::after{content:"";position:absolute;top:50%;height:3px;
  transform:translateY(-50%);background:var(--rule);
  width:max(0px, calc((100% - var(--mark)) / 2))}
.method-marks li::before{left:0}
.method-marks li::after{right:0}
.method-marks li:last-child::after{display:none}
.method-marks .gram{width:100%;max-width:var(--mark);height:auto;aspect-ratio:1;
  color:var(--rule);position:relative;z-index:1}

/* Inside a button, and beside the archetype eyebrow on the reading sheet. */
.btn .gram{width:26px;height:16px;margin-right:7px;color:currentColor}
.btn:has(.gram){display:inline-flex;align-items:center}
.cs-eyebrow .gram{width:30px;height:18px;display:inline-block;vertical-align:middle;
  margin-right:8px;color:currentColor}

@media (max-width:760px){
  .method-marks{--mark:32px}
  .method-marks li::before,.method-marks li::after{height:2px}
}

/* The box now holds the consent sentence and the paragraph about written
   reflections. It keeps the height it had when it held only the first, so
   the screen does not grow, and the second scrolls into view. */
.threshold .consent-box{
  margin:4px 0 16px; padding:14px 16px; max-width:56ch;
  max-height:170px; overflow-y:auto; overscroll-behavior:contain;
  border:1px solid color-mix(in srgb, var(--chrome) 42%, transparent);
  border-radius:10px;
  background:color-mix(in srgb, var(--chrome) 9%, transparent);
}
.threshold .consent-box::-webkit-scrollbar{width:8px}
.threshold .consent-box::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--chrome) 45%, transparent); border-radius:4px}
.threshold .consent-box .consent-note{margin-top:11px; margin-bottom:0}

/* the checkbox and the one sentence it governs */
.threshold .consent{
  display:flex; align-items:flex-start; gap:10px; cursor:pointer; margin:0;
}
.threshold .consent input{
  appearance:none; flex:none; width:15px; height:15px; margin-top:2px;
  border:1px solid var(--chrome); border-radius:3px; cursor:pointer;
  background:transparent; position:relative;
}
.threshold .consent input:checked{background:var(--chrome)}
.threshold .consent input:checked::after{
  content:''; position:absolute; left:4px; top:1px; width:4px; height:8px;
  border:solid var(--ink); border-width:0 2px 2px 0; transform:rotate(42deg);
}
.threshold .consent input:focus-visible{outline:2px solid var(--chrome); outline-offset:2px}
.threshold .consent-text{
  font-size:12px; line-height:1.55;
  color:color-mix(in srgb, var(--bone) 72%, transparent);
}
.threshold .consent-text b{color:var(--bone); font-weight:400}

@media (min-width:1024px){
  .threshold .thresh{display:block; overflow:hidden}
  .threshold .thresh-video{
    position:absolute; inset:0; order:0; aspect-ratio:auto;
    width:100%; height:100%;
  }
  .threshold .thresh-scrim{
    background:linear-gradient(to right, var(--ink) 0%, var(--ink) 40%,
      rgba(11,15,14,.82) 56%, rgba(11,15,14,.32) 74%, transparent 92%);
  }
  .threshold .thresh-body{
    /* The consent gate made this column tall enough to overflow a laptop
       viewport, and a centred column that overflows runs off the top of
       the screen and under the header rather than off the bottom where it
       could be scrolled to. So it starts below the header and scrolls. */
    position:relative; height:100%; overflow-y:auto; background:transparent;
    padding:82px clamp(32px,6vw,90px) 48px; max-width:720px;
  }
  .threshold .thresh-head{font-size:clamp(26px,2.3vw,34px); max-width:19ch}
}

/* the same threshold, at the other end */
#sendover{position:fixed; inset:0; z-index:60}
#sendover[hidden]{display:none}
#sendover .thresh-body{max-width:640px}
#sendover .thresh-head{max-width:20ch}
.sendfield{
  width:100%; max-width:380px; display:block; margin-top:18px;
  background:transparent; color:var(--bone);
  border:1px solid color-mix(in srgb, var(--chrome) 55%, transparent);
  border-radius:12px; padding:13px 16px;
  font-family:var(--mono); font-size:14px; letter-spacing:.02em;
}
.sendfield::placeholder{color:color-mix(in srgb, var(--slate) 80%, transparent)}
.sendfield:focus{outline:none; box-shadow:0 0 0 2px color-mix(in srgb, var(--chrome) 45%, transparent)}
#sendover .consent{max-width:380px; margin:16px 0 18px}
.senderr{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  color:#C98A7C; min-height:14px; margin-top:10px;
}
#sendnote{
  max-width:46ch; line-height:1.65; margin-top:20px;
  font-family:var(--serif); font-size:13.5px; letter-spacing:0;
  text-transform:none; opacity:1;
  color:color-mix(in srgb, var(--bone) 78%, transparent);
}
#sendnote a{color:var(--chrome)}


/* ---------- how it works, a card over the map ---------- */
#howto{position:fixed; left:0; right:0; bottom:34px; z-index:38;
  display:flex; justify-content:center; pointer-events:none;
  opacity:1; transition:opacity .6s ease}
#howto.off{opacity:0}
#howto .howto-card{
  pointer-events:auto; width:min(440px,calc(100vw - 40px));
  padding:18px 20px 16px; margin:0 20px;
  border:1px solid color-mix(in srgb, var(--chrome) 42%, transparent);
  border-radius:12px; background:color-mix(in srgb, var(--ink) 92%, transparent);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
}
#howto .howto-body{font-family:var(--serif); font-size:12.5px; line-height:1.62;
  color:color-mix(in srgb, var(--bone) 78%, transparent); margin:8px 0 14px}
#howto .howto-body p{margin-bottom:9px}
#howto .howto-body p:last-child{margin-bottom:0}
@media (max-width:760px){ #howto{bottom:14px} }
@media (prefers-reduced-motion:reduce){ #howto{transition:none} }