/* =========================================================================
   Drive Pass — security-print world
   Intaglio green fields, safety-paper panels, generated guilloche,
   seal red for action, foil for proof, perforated counterfoils.
   ========================================================================= */

:root{
  /* --- ink & ground ------------------------------------------------- */
  --ink:        #08231E;   /* deepest engraving ink                     */
  --field:      #0B2E27;   /* the dominant intaglio green ground        */
  --field-2:    #0F3A31;   /* a shade up, for panels on the green       */
  --field-3:    #1C5F4E;   /* guilloche line colour on the green        */
  --paper:      #E9EFEC;   /* safety paper — pale, green-cast, not cream*/
  --paper-2:    #DCE6E1;   /* second paper tone, panels & rules         */
  --paper-warm: #F3F7F4;   /* the lightest stock, for lifted stubs      */

  /* --- text ---------------------------------------------------------- */
  --on-field:   #E4EBE7;   /* body on green   — 13.4:1                  */
  --on-field-2: #A9C0B6;   /* secondary on green — 6.4:1                */
  --on-paper:   #0A2A23;   /* body on paper   — 14.6:1                  */
  --on-paper-2: #40584F;   /* secondary on paper — 7.2:1                */

  /* --- accents -------------------------------------------------------- */
  --seal:       #A62B22;   /* the one action colour                      */
  --seal-deep:  #8A2019;
  --seal-ink:   #FFF6F4;
  --foil:       #B08536;   /* proof, rules, the denomination             */
  --foil-lite:  #D8B978;   /* foil highlight on the green ground         */

  /* --- type ----------------------------------------------------------- */
  --display: "Bodoni Moda", "Bodoni MT", Didot, "Times New Roman", serif;
  --text:    "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --hand:    "Pinyon Script", "Snell Roundhand", cursive;
  --serial:  "Courier Prime", "Courier New", ui-monospace, monospace;

  /* --- rhythm ---------------------------------------------------------- */
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --measure: 64ch;
  --band: clamp(4.25rem, 9vw, 8rem);    /* vertical space between bands  */
  --radius: 3px;                          /* documents barely round        */

  --ease: cubic-bezier(.16,1,.3,1);
}

/* =========================================================================
   Reset & base
   ========================================================================= */

*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  background-image:
    repeating-linear-gradient(64deg, transparent 0 5px, rgba(10,42,35,.020) 5px 6px),
    repeating-linear-gradient(-64deg, transparent 0 5px, rgba(10,42,35,.014) 5px 6px);
  color:var(--on-paper);
  font-family:var(--text);
  font-size:clamp(1.0rem, .96rem + .30vw, 1.15rem);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3{ margin:0; font-weight:400; text-wrap:balance; }
p{ margin:0; }
ol,ul,dl,dd{ margin:0; padding:0; }
li{ list-style:none; }
img,svg{ max-width:100%; }
b{ font-weight:700; }

::selection{ background:var(--foil); color:var(--ink); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--seal); color:var(--seal-ink);
  padding:.9rem 1.3rem; font-weight:600; border-radius:0 0 var(--radius) 0;
}
.skip:focus{ left:0; }

:focus-visible{
  outline:3px solid var(--foil);
  outline-offset:3px;
  border-radius:2px;
}

/* =========================================================================
   Guilloche engine — SVG rosettes drawn by app.js
   ========================================================================= */

.rosette{
  position:absolute;
  display:block;
  overflow:visible;
  pointer-events:none;
}
.rosette path{
  fill:none;
  vector-effect:non-scaling-stroke;
}

/* On the green ground the engraving is a lighter green line. */
.doc__engine .rosette path,
.ledger__engine .rosette path,
.close__engine .rosette path{ stroke:var(--field-3); stroke-width:.8; }

/* The seal rosette is foil on paper. */
.rosette--seal path{ stroke:var(--foil); stroke-width:.45; opacity:.5; }

/* =========================================================================
   Masthead
   ========================================================================= */

.mast{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem var(--gutter);
  background:var(--field);
  border-bottom:1px solid var(--field-3);
}
.mast::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent,var(--foil),transparent);
  opacity:.45;
}

.mark{ display:flex; align-items:center; gap:.7rem; text-decoration:none; min-height:44px; }
.mark__d{ display:block; width:34px; height:34px; flex:none; }
.mark__d svg{ display:block; width:100%; height:100%; }
.mark__plate{ fill:none; stroke:var(--foil); stroke-width:1.5; }
.mark__glyph{ fill:var(--on-field); }
.mark__words{ display:flex; flex-direction:column; line-height:1.1; }
.mark__name{
  font-family:var(--display);
  font-size:1.16rem; font-weight:600; color:var(--on-field);
  letter-spacing:.005em;
}
.mark__sub{
  font-size:.66rem; color:var(--on-field-2);
  letter-spacing:.10em; text-transform:uppercase; font-weight:500;
  margin-top:.15rem;
}

.mast__call{
  display:flex; align-items:baseline; gap:.5rem;
  min-height:44px; padding:.45rem .95rem;
  border:1px solid var(--foil);
  border-radius:var(--radius);
  text-decoration:none; color:var(--on-field);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.mast__call:hover{ background:var(--foil); color:var(--ink); }
.mast__call-label{
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  color:var(--foil-lite);
  transition:color .25s var(--ease);
}
.mast__call:hover .mast__call-label{ color:var(--ink); }
.mast__call-num{ font-family:var(--serial); font-size:.95rem; font-weight:700; }

@media (max-width:29.99em){
  .mast{ padding:.55rem 1rem; }
  .mark__sub{ display:none; }
  .mast__call-label{ display:none; }
  .mast__call{ padding:.5rem .7rem; }
  .mast__call-num{ font-size:.88rem; }
}

/* =========================================================================
   1. The statement
   ========================================================================= */

.doc{
  position:relative;
  background:var(--field);
  color:var(--on-field);
  padding:clamp(3rem,8vw,6rem) 0 clamp(3.5rem,8vw,6rem);
  overflow:hidden;
  isolation:isolate;
}
/* fine engine-turned field behind everything */
.doc::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background-image:repeating-linear-gradient(
    115deg, transparent 0 3px, rgba(255,255,255,.022) 3px 4px);
}
.doc__engine{ position:absolute; inset:0; z-index:-1; }
.rosette--hero{
  top:50%; left:74%;
  width:min(96vw,620px); height:min(96vw,620px);
  transform:translate(-50%,-50%);
  opacity:.95;
}
.rosette--small{
  top:auto; bottom:-16%; left:-9%;
  width:min(56vw,330px); height:min(56vw,330px);
  opacity:.6;
}

.doc__inner{
  position:relative;
  max-width:78rem; margin:0 auto; padding:0 var(--gutter);
  display:grid; gap:clamp(2.25rem,4vw,3.5rem);
  grid-template-columns:1fr;
}
@media (min-width:62em){
  .doc__inner{ grid-template-columns:minmax(0,1.7fr) minmax(18rem,.78fr); align-items:start; }
}

.statement{ margin:0 0 clamp(1.4rem,2.4vw,2rem); }
.statement__q{
  display:block;
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:500;
  font-size:clamp(1.78rem, 1.08rem + 2.55vw, 3.3rem);
  line-height:1.08;
  letter-spacing:-.018em;
  color:#F2F6F3;
}
.statement__q > span{ display:block; }

.statement__src{
  position:relative;
  max-width:44ch;
  font-size:.94rem; line-height:1.6;
  color:var(--on-field-2);
  padding-top:1.35rem;
}
.statement__src b{ color:var(--on-field); font-weight:600; }
.statement__rule{
  position:absolute; top:0; left:0; width:5.5rem; height:2px;
  background:linear-gradient(90deg,var(--foil),transparent);
}

.doc__act{ margin-top:clamp(2rem,4vw,2.75rem); }
.doc__act-what{
  font-size:1.02rem; color:var(--on-field);
  max-width:38ch; margin-bottom:1.1rem;
}
.doc__act-what b{ color:#fff; }
.doc__act-note{
  margin-top:.85rem;
  font-family:var(--serial);
  font-size:.82rem; letter-spacing:.01em;
  color:var(--on-field-2);
}

/* --- the seal button ------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.65rem;
  min-height:56px; padding:.9rem 1.6rem;
  font-family:var(--text); font-size:1.06rem; font-weight:700;
  letter-spacing:.005em;
  text-decoration:none; border-radius:var(--radius);
  border:1px solid transparent;
  position:relative;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), background .2s linear;
}
.btn--seal{
  background:var(--seal);
  color:var(--seal-ink);
  box-shadow:0 2px 0 0 var(--seal-deep), 0 10px 24px -10px rgba(0,0,0,.65);
}
.btn--seal:hover,.btn--seal:focus-visible{
  background:var(--seal-deep);
  transform:translateY(-2px);
  box-shadow:0 4px 0 0 #6E1913, 0 16px 30px -12px rgba(0,0,0,.7);
}
.btn--seal:active{ transform:translateY(1px); box-shadow:0 1px 0 0 var(--seal-deep); }
.btn__ic{ width:20px; height:20px; flex:none; fill:currentColor; }
.btn--wide{ width:100%; max-width:24rem; justify-content:center; font-size:1.18rem;
  font-family:var(--serial); font-weight:700; letter-spacing:.02em; }

/* =========================================================================
   Counterfoil stub — the reusable panel of this world
   ========================================================================= */

.stub{
  position:relative;
  background:var(--paper-warm);
  color:var(--on-paper);
  border-radius:var(--radius);
  padding:1.35rem 1.4rem 1.5rem;
  box-shadow:0 1px 2px rgba(8,35,30,.10), 0 14px 30px -18px rgba(8,35,30,.55);
}
/* engraved inner keyline, the way a ticket is bordered */
.stub::before{
  content:""; position:absolute; inset:6px;
  border:1px solid var(--paper-2);
  border-radius:2px; pointer-events:none;
}
.stub--hero{ padding:1.5rem 1.5rem 1.6rem; }

.stub__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:.75rem;
  padding-bottom:.7rem; margin-bottom:.9rem;
  border-bottom:1px solid var(--paper-2);
}
.stub__title{
  font-family:var(--display); font-weight:600;
  font-size:1.12rem; line-height:1.2; letter-spacing:-.005em;
}
.stub__ref{
  font-family:var(--serial); font-size:.72rem; font-weight:700;
  color:var(--on-paper-2); letter-spacing:.06em; white-space:nowrap;
}

.stub__rows{ display:grid; gap:.72rem; }
.stub__rows > div{ display:grid; grid-template-columns:5.4rem 1fr; gap:.75rem; align-items:baseline; }
.stub__rows dt{
  font-size:.7rem; letter-spacing:.10em; text-transform:uppercase;
  font-weight:700; color:var(--on-paper-2);
}
.stub__rows dd{ font-size:.92rem; line-height:1.45; }
.foil{
  font-family:var(--display); font-weight:700; font-size:1.18em;
  color:#7A5A1E;
}

/* the perforation: a real die-cut line of dots */
.stub__perf{
  height:8px; margin:1.1rem -1.4rem .9rem;
  background-image:radial-gradient(circle at 50% 50%, var(--paper-2) 0 1.5px, transparent 1.7px);
  background-size:9px 8px; background-position:center;
  background-repeat:repeat-x;
}
.stub--hero .stub__perf{ margin-left:-1.5rem; margin-right:-1.5rem; }
.stub__foot,.stub__by{
  font-size:.78rem; color:var(--on-paper-2); line-height:1.45;
}
.stub__by{ font-family:var(--serial); letter-spacing:.01em; }

/* =========================================================================
   2. The rule of this page — a quiet band
   ========================================================================= */

.rule-note{
  position:relative;
  padding:clamp(2.75rem,5.5vw,4.25rem) 0;
}
/* the double rule a certificate panel is set between */
.rule-note::before,
.rule-note::after{
  content:""; position:absolute; left:0; right:0; height:3px;
  background:
    linear-gradient(var(--foil),var(--foil)) 0 0/100% 1px no-repeat,
    linear-gradient(var(--paper-2),var(--paper-2)) 0 2px/100% 1px no-repeat;
  opacity:.75;
}
.rule-note::before{ top:0; }
.rule-note::after{ bottom:0; transform:scaleY(-1); }

.rule-note__inner{
  max-width:78rem; margin:0 auto; padding:0 var(--gutter);
  display:grid; gap:clamp(1rem,3vw,3.5rem);
}
@media (min-width:56em){
  .rule-note__inner{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:start; }
}
.rule-note__h{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.4rem,.95rem + 1.85vw, 2.3rem);
  line-height:1.16; letter-spacing:-.014em;
  max-width:24ch;
}
.rule-note p{ color:var(--on-paper-2); max-width:52ch; font-size:1.02rem; }

/* =========================================================================
   Shared heading + lead
   ========================================================================= */

.h-doc{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.72rem, 1.1rem + 2.6vw, 3.15rem);
  line-height:1.1; letter-spacing:-.016em;
  max-width:20ch;
}
.h-doc--light{ color:#F2F6F3; }
.lead{
  margin-top:1.15rem; max-width:56ch;
  font-size:1.04rem; color:var(--on-paper-2);
}
.lead--light{ color:var(--on-field-2); }

/* =========================================================================
   3. Routes — four counterfoils
   ========================================================================= */

.routes{ padding:var(--band) 0; }
.routes__inner{ max-width:78rem; margin:0 auto; padding:0 var(--gutter); }
.routes__head{
  display:grid; gap:clamp(1rem,3vw,3.5rem); align-items:end;
}
@media (min-width:56em){
  .routes__head{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); }
  .routes__head .lead{ margin-top:0; padding-bottom:.35rem; }
}
.routes__list{
  margin-top:clamp(2.25rem,4.5vw,3.25rem);
  display:grid; gap:clamp(1rem,2vw,1.5rem);
  grid-template-columns:1fr;
}
@media (min-width:40em){ .routes__list{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:72em){ .routes__list{ grid-template-columns:repeat(4,1fr); } }
.stub--route{ display:flex; flex-direction:column; }
.stub--route .stub__head{ min-height:3.4rem; align-items:flex-start; }
.stub--route .stub__say{ margin-top:.35rem; }
.stub--route .stub__title{ font-size:1.06rem; }

.stub__say{
  font-size:.95rem; line-height:1.55; flex:1;
}
.stub--route .stub__perf{ margin-top:1.15rem; margin-bottom:.75rem; }

/* =========================================================================
   4. The ledger — engraved, on the green
   ========================================================================= */

.ledger{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--field); color:var(--on-field);
  padding:var(--band) 0;
}
.ledger::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background-image:repeating-linear-gradient(
    -115deg, transparent 0 3px, rgba(255,255,255,.02) 3px 4px);
}
.ledger__engine{ position:absolute; inset:0; z-index:-1; }
.rosette--wide{
  top:-16%; left:88%; transform:translateX(-50%);
  width:min(110vw,700px); height:min(110vw,700px); opacity:.7;
}
.ledger__inner{ position:relative; max-width:72rem; margin:0 auto; padding:0 var(--gutter); }

.ledger__list{
  margin-top:clamp(2.25rem,4.5vw,3.25rem);
  border-top:1px solid var(--field-3);
}
.entry{
  border-bottom:1px solid var(--field-3);
  padding:clamp(1.3rem,2.6vw,1.9rem) 0;
  display:grid; gap:.55rem;
}
@media (min-width:56em){
  .entry{
    grid-template-columns:minmax(12rem,16rem) minmax(0,1fr);
    column-gap:clamp(2rem,5vw,4.5rem); align-items:start;
  }
  .entry__top{ grid-row:1; }
  .entry__say{ grid-row:1; }
  .entry__by{ grid-column:2; }
}
.entry__top{ display:flex; flex-direction:column; align-items:flex-start; gap:.7rem; }
.entry__name{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.28rem,1.05rem + .8vw,1.75rem);
  line-height:1.15; color:#F2F6F3; letter-spacing:-.01em;
}
.entry__mark{
  font-family:var(--text); font-size:.68rem; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase;
  color:#FF9C90;
  border:2px solid #C4453A;
  border-radius:2px;
  padding:.3rem .55rem .26rem;
  transform:rotate(-4deg);
  transform-origin:center;
  white-space:nowrap;
}
.entry__say{ font-size:1rem; line-height:1.6; color:var(--on-field); max-width:58ch; }
.entry__by{
  font-family:var(--serial); font-size:.8rem; color:var(--on-field-2);
  margin-top:.15rem;
}
.ledger__note{
  margin-top:clamp(1.75rem,3.5vw,2.5rem);
  font-size:1.02rem; color:var(--on-field-2); max-width:46ch;
}

/* =========================================================================
   5. The denomination
   ========================================================================= */

.denom{ position:relative; padding:var(--band) 0; }
.denom::before{
  content:""; position:absolute; top:0; left:var(--gutter); right:var(--gutter);
  height:1px; background:var(--paper-2);
}
.denom__inner{
  max-width:72rem; margin:0 auto; padding:0 var(--gutter);
  display:grid; gap:clamp(2.5rem,5vw,4.5rem);
}
@media (min-width:56em){
  .denom__inner{ grid-template-columns:minmax(15rem,21rem) minmax(0,1fr); align-items:start; }
}

.denom__figure{
  display:flex; flex-direction:column; align-items:center;
}
.denom__medal{
  position:relative;
  width:min(74vw,19rem); aspect-ratio:1;
  display:grid; place-items:center;
}
.rosette--seal{
  top:50%; left:50%; transform:translate(-50%,-50%);
  width:100%; height:100%;
}
.denom__num{
  position:relative;
  font-family:var(--display); font-weight:700;
  font-size:clamp(4.6rem,3.6rem + 6vw, 8rem);
  line-height:.9; letter-spacing:-.045em;
  color:#7A5A1E;
}
.denom__stars{ margin-top:1.35rem; }
.denom__cap{
  margin-top:.55rem;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:var(--on-paper-2); text-align:center;
}
.denom__stars svg{ display:block; width:clamp(7rem,22vw,9.5rem); height:auto; }
.stars path{ fill:var(--foil); }

.denom__text > .h-doc{ max-width:22ch; }
.denom__text > p{ margin-top:1.15rem; color:var(--on-paper-2); max-width:56ch; }

.pullquote{
  margin:1.9rem 0 0;
  padding:1.15rem 0 0 1.4rem;
  border-left:1px solid var(--foil);
}
.pullquote blockquote{ margin:0; }
.pullquote p{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.08rem,1rem + .5vw,1.35rem);
  line-height:1.42; letter-spacing:-.006em;
  color:var(--on-paper);
}
.pullquote figcaption{
  margin-top:.7rem;
  font-family:var(--serial); font-size:.8rem; color:var(--on-paper-2);
}
.denom__caveat{
  margin-top:2rem; padding-top:1.1rem;
  border-top:1px solid var(--paper-2);
  font-size:.9rem; color:var(--on-paper-2); max-width:52ch;
}

/* =========================================================================
   6. The close
   ========================================================================= */

.close{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--field); color:var(--on-field);
  padding:var(--band) 0 clamp(2.5rem,5vw,3.5rem);
}
.close::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background-image:repeating-linear-gradient(
    115deg, transparent 0 3px, rgba(255,255,255,.022) 3px 4px);
}
.close__engine{ position:absolute; inset:0; z-index:-1; }
.rosette--close{
  bottom:-26%; right:-14%;
  width:min(104vw,660px); height:min(104vw,660px); opacity:.8;
}
.close__inner{
  position:relative; max-width:72rem; margin:0 auto; padding:0 var(--gutter);
  display:grid; gap:clamp(2.5rem,5vw,4rem);
}
@media (min-width:52em){
  .close__inner{ grid-template-columns:minmax(0,1.35fr) minmax(16rem,.85fr); align-items:start; }
}
.close__lead .btn{ margin-top:clamp(1.5rem,3vw,2.1rem); }
.close__addr{
  margin-top:1.1rem;
  font-family:var(--serial); font-size:.88rem; color:var(--on-field-2);
}

/* --- hours: an engraved timetable ------------------------------------ */
.hours{
  width:100%; border-collapse:collapse;
  border:1px solid var(--field-3);
  background:rgba(255,255,255,.028);
}
.hours__cap{
  caption-side:top; text-align:left;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:800; color:var(--foil-lite);
  padding:0 0 .8rem;
}
.hours tr{ border-bottom:1px solid var(--field-3); }
.hours tr:last-child{ border-bottom:0; }
.hours th,.hours td{
  padding:.72rem .95rem; text-align:left; font-weight:400; font-size:.95rem;
}
.hours th{ color:var(--on-field-2); font-weight:500; }
.hours td{ font-family:var(--serial); text-align:right; color:var(--on-field); }
.hours tr[data-today]{ background:rgba(216,185,120,.13); }
.hours tr[data-today] th{ color:#F2F6F3; font-weight:700; }
.hours tr[data-today] td{ color:var(--foil-lite); font-weight:700; }

/* --- the signature ---------------------------------------------------- */
.sign{
  position:relative;
  max-width:72rem; margin:clamp(3rem,6vw,4.5rem) auto 0;
  padding:0 var(--gutter);
  display:flex; flex-direction:column; align-items:flex-start; gap:.15rem;
}
.sign__hand{
  font-family:var(--hand);
  font-size:clamp(2.5rem,2rem + 2.4vw,3.6rem);
  line-height:1; color:var(--foil-lite);
  padding-left:.15em;
}
.sign__rule{ display:block; width:min(20rem,72%); height:1px; background:var(--field-3); margin:.55rem 0 .5rem; }
.sign__cap{
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  font-weight:600; color:var(--on-field-2);
}

/* =========================================================================
   Footer
   ========================================================================= */

.foot{
  background:var(--ink); color:var(--on-field-2);
  padding:clamp(2.5rem,5vw,3.5rem) 0;
}
.foot__inner{ max-width:72rem; margin:0 auto; padding:0 var(--gutter); }
.foot__num a{
  font-family:var(--serial); font-weight:700;
  font-size:clamp(1.35rem,1.1rem + 1vw,1.8rem);
  color:#F2F6F3; text-decoration:none;
  border-bottom:1px solid var(--foil);
  padding-bottom:.15rem;
  display:inline-block; min-height:44px;
}
.foot__num a:hover{ color:var(--foil-lite); }
.foot__addr{ margin-top:.9rem; font-size:.92rem; }
.foot__fine{
  margin-top:1.9rem; padding-top:1.3rem;
  border-top:1px solid #12352D;
  font-size:.78rem; line-height:1.6; max-width:64ch;
  color:#7E968C;
}

/* =========================================================================
   Motion — content is visible by default; JS adds the entrance
   ========================================================================= */

/* Armed before first paint by the inline head script; released by app.js,
   or by that script's own 3s failsafe if app.js never runs. */
.pre .statement__q > span,
.pre .stub--hero,
.pre .statement__src,
.pre .doc__act-what,
.pre .doc__act-note,
.pre #call{ opacity:0; }

@media (prefers-reduced-motion: reduce){
  .pre .statement__q > span,
  .pre .stub--hero,
  .pre .statement__src,
  .pre .doc__act-what,
  .pre .doc__act-note,
  .pre #call{ opacity:1; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}