/* ============================================================================
   ParkSyde — the story pages
   ----------------------------------------------------------------------------
   One stylesheet for the six pages a visitor reads on their way through the
   park: Our beginning · Why ParkSyde · How we work · Our evidence ·
   Where we're heading · What things cost.

   What it is trying to hold:

     · The environment is the teacher. Space is the main material here —
       most of the work is done by measure, rhythm and silence, not ornament.
     · One accent per page, used a few times, never as wallpaper. The accent
       is wayfinding (which part of the park you are standing in), so each
       page sets --accent and nothing else.
     · Numbers only where a sequence is real. A plan has steps; a set of
       principles does not. The markup and the counters follow that.
     · Nothing here may imply a claim the words don't make.
     · No network. System faces only, no remote images, no CDN — these pages
       must read the same on a bad connection in a waiting room.

   Usage:  <link rel="stylesheet" href="assets/park-story.css">
           then, in the page,  :root{ --accent: var(--teal); }
           A page on a pale accent (the gold) also sets --on-accent, so the
           one button on the page keeps readable ink on it.
   ========================================================================= */

/* --- 1. Tokens ----------------------------------------------------------- */

:root{
  color-scheme: light;

  /* House palette — unchanged, and the single source for every colour below. */
  --navy:#1F3864;  --navy-deep:#16294A;  --teal:#2A9D8F;
  --gold:#E9B44C;  --coral:#E76F51;      --park:#3F7D4E;
  --paper:#F7F8FA; --ink:#1C2333;        --muted:#5A6478;  --rule:#D9DFE8;

  /* Semantic surfaces — the only things a theme re-points. */
  --bg:            var(--paper);
  --surface:       #FFFFFF;
  --surface-sunk:  #FCFDFE;
  --text:          var(--ink);
  --text-muted:    var(--muted);
  --hair:          var(--rule);
  --head:          var(--navy);
  --band:          var(--navy);        /* the header field   */
  --band-deep:     var(--navy-deep);   /* the footer field   */
  --on-band:       #FFFFFF;
  --on-band-muted: rgba(255,255,255,.78);
  --on-band-hair:  rgba(255,255,255,.14);
  --affirm:        #1F7A6D;            /* what we can say    */
  --limit:         #C0402C;            /* what we can't yet  */
  --focus:         var(--navy);
  --shadow:        0 1px 2px rgba(28,35,51,.05), 0 14px 30px -24px rgba(28,35,51,.5);

  --accent: var(--navy);               /* each page overrides this */
  --on-accent: #FFFFFF;                /* and, on a light accent, this */

  /* Type. Fraunces and Figtree if the reader happens to have them; otherwise
     the best serif and grotesque already on the machine. No download. */
  --font-display: Fraunces, "Iowan Old Style", "Palatino Linotype", Palatino,
                  "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-text:    Figtree, ui-sans-serif, system-ui, -apple-system,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* A real scale: 1.25 at the small end, opening up as the page widens. */
  --t-xs:    .8125rem;
  --t-sm:    .9375rem;
  --t-base:  clamp(1.0625rem, 1.02rem + .19vw,  1.125rem);
  --t-lead:  clamp(1.1875rem, 1.11rem + .34vw,  1.3125rem);
  --t-h3:    clamp(1.1875rem, 1.09rem + .42vw,  1.375rem);
  --t-h2:    clamp(1.5rem,    1.28rem + .95vw,  2.0625rem);
  --t-h1:    clamp(2.125rem,  1.56rem + 2.4vw,  3.375rem);
  --t-quote: clamp(1.3125rem, 1.13rem + .82vw,  1.8125rem);

  /* Rhythm. Everything vertical is one of these. */
  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem;   --sp-7:3rem;   --sp-8:4rem;

  --gutter:   clamp(1.25rem, .95rem + 1.5vw, 2rem);
  --container:46rem;    /* the column everything is measured against */
  --measure:  65ch;     /* comfortable running-text width           */
  --radius:   10px;
  --radius-sm:6px;
}

/* Dark. Declared twice on purpose: once for the reader's system setting
   (unless they have explicitly asked this page for light), once for an
   explicit toggle — so whichever the reader chose last wins, both ways. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --teal:#4CC3B2; --gold:#EFC169; --coral:#F08A6E; --park:#6FB07C;
    --bg:#101A2C;
    --surface:#17233A;
    --surface-sunk:#141E31;
    --text:#E7ECF5;
    --text-muted:#A6B1C6;
    --hair:rgba(231,236,245,.16);
    --head:#DEE7F6;
    --band:#16294A;
    --band-deep:#0C1524;
    --on-band-muted:rgba(255,255,255,.76);
    --on-band-hair:rgba(255,255,255,.13);
    --affirm:#5FC7B3;
    --limit:#F0937B;
    --focus:#EFC169;
    --on-accent:var(--ink);   /* every accent lightens in the dark; ink must not */
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 34px -26px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --teal:#4CC3B2; --gold:#EFC169; --coral:#F08A6E; --park:#6FB07C;
  --bg:#101A2C;
  --surface:#17233A;
  --surface-sunk:#141E31;
  --text:#E7ECF5;
  --text-muted:#A6B1C6;
  --hair:rgba(231,236,245,.16);
  --head:#DEE7F6;
  --band:#16294A;
  --band-deep:#0C1524;
  --on-band-muted:rgba(255,255,255,.76);
  --on-band-hair:rgba(255,255,255,.13);
  --affirm:#5FC7B3;
  --limit:#F0937B;
  --focus:#EFC169;
  --on-accent:var(--ink);   /* every accent lightens in the dark; ink must not */
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 34px -26px rgba(0,0,0,.9);
}
:root[data-theme="light"]{ color-scheme: light; }

/* --- 2. Foundations ------------------------------------------------------ */

*{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-text);
  font-size:var(--t-base);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{ max-width:100%; height:auto }

:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
  border-radius:3px;
}
header :focus-visible,
footer :focus-visible{ outline-color:var(--gold) }

::selection{ background:color-mix(in srgb, var(--accent) 26%, transparent) }

/* The centred column. Header and footer use it directly; <main> rebuilds the
   same measurements as a grid so a figure can break the margins without any
   viewport-width arithmetic (which is what puts a scrollbar on a page). */
.wrap{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* Wide content that must never push the page sideways. */
.scroll-x{ overflow-x:auto; overscroll-behavior-x:contain }

/* --- 3. Header ----------------------------------------------------------- */

header{
  position:relative;
  isolation:isolate;
  background:var(--band);
  color:var(--on-band);
  overflow:hidden;
}
/* A dawn wash, borrowed from the park door: gold low on the left where the
   light comes from, a breath of teal river on the right. */
header::before{
  content:"";
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 88% at 6% 6%,  rgba(233,180,76,.20), transparent 58%),
    radial-gradient(88% 74% at 94% 0%,  rgba(42,157,143,.17), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 42%, rgba(0,0,0,.22));
}
header::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--accent);
}
header > .wrap{
  padding-block:var(--sp-6) calc(var(--sp-8) - .25rem);
}

/* Primary navigation, sitting on the band. */
.sitenav{
  display:flex; flex-wrap:wrap;
  gap:.3rem 1.35rem;
  margin:0 0 var(--sp-7);
  font-size:var(--t-sm);
  font-weight:500;
}
.sitenav a{
  color:var(--on-band-muted);
  text-decoration:none;
  padding:.2rem 0;
  border-bottom:1.5px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
.sitenav a:hover{ color:#fff; border-bottom-color:rgba(255,255,255,.34) }
.sitenav a[aria-current="page"]{ color:#fff; border-bottom-color:var(--accent) }

/* The wayfinding marker. A beacon, not a number: the same crystal that stands
   at every district's door in the park. Nothing on these pages is a sequence,
   so nothing here is numbered. */
.marker{
  display:flex; align-items:center; gap:.7rem;
  margin:0 0 var(--sp-5);
}
.marker .mark{
  width:1.4rem; height:1.4rem; flex:none;
  position:relative;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.3);
}
.marker .mark::after{
  content:"";
  position:absolute; inset:.36rem;
  background:var(--accent);
  transform:rotate(45deg);
  border-radius:1px;
}
.marker .lbl{
  font-size:var(--t-xs);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--on-band-muted);
  font-weight:700;
}

h1{
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--t-h1);
  line-height:1.05;
  letter-spacing:-.018em;
  margin:0 0 var(--sp-4);
  max-width:20ch;
  text-wrap:balance;
}
.standfirst{
  font-size:var(--t-lead);
  line-height:1.45;
  color:var(--on-band-muted);
  margin:0;
  max-width:44ch;
  text-wrap:pretty;
}

/* --- 4. The page column -------------------------------------------------- */

main{
  display:grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [content-start] min(var(--container), calc(100% - var(--gutter) * 2)) [content-end]
    minmax(var(--gutter), 1fr) [full-end];
  padding-block:var(--sp-7) var(--sp-6);
}
main > *{ grid-column:content }
main > .full{ grid-column:full }

p{ margin:0 0 var(--sp-4); max-width:var(--measure); text-wrap:pretty }
.lead{
  font-size:var(--t-lead);
  line-height:1.5;
  max-width:56ch;
  margin-bottom:var(--sp-5);
}
.quiet{ color:var(--text-muted); font-size:var(--t-sm); line-height:1.55 }

main a{
  color:var(--head);
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
  text-decoration-color:color-mix(in srgb, var(--accent) 55%, transparent);
  transition:text-decoration-color .18s ease;
}
main a:hover{ text-decoration-color:var(--accent) }

/* A section opens with a hairline the width of the column and one short tick
   of the page's colour. That is the whole ornament budget. */
main > h2{
  position:relative;
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--t-h2);
  line-height:1.16;
  letter-spacing:-.012em;
  color:var(--head);
  margin:var(--sp-6) 0 var(--sp-4);
  padding-top:var(--sp-5);
  border-top:1px solid var(--hair);
  text-wrap:balance;
}
main > h2::before{
  content:"";
  position:absolute; left:0; top:-1px;
  width:2.25rem; height:2px;
  background:var(--accent);
}
main > h2:first-child{
  margin-top:0; padding-top:0; border-top:0;
}
main > h2:first-child::before{ display:none }

/* Our beginning numbers its chapters, because chapters really are a sequence. */
h2 .ch{
  display:block;
  font-family:var(--font-text);
  font-size:var(--t-xs);
  letter-spacing:.15em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--text-muted);
  margin-bottom:.4rem;
}

h3{
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--t-h3);
  line-height:1.25;
  color:var(--head);
  margin:0 0 var(--sp-2);
  text-wrap:balance;
}

/* A line the page already said, given room to be heard again. */
.pull{
  font-family:var(--font-display);
  font-style:normal;
  font-weight:400;
  font-size:var(--t-quote);
  line-height:1.34;
  letter-spacing:-.008em;
  color:var(--head);
  max-width:34ch;
  margin:var(--sp-6) 0;
  padding:.1rem 0 .1rem var(--sp-5);
  border-left:2px solid var(--accent);
  background:none;
  text-wrap:balance;
}
.pull p{ margin:0; max-width:none; font:inherit; color:inherit }

/* Cards, panels, quiet notes ------------------------------------------------ */

.card,
.practice,
.commit,
.edu,
.mark,
.ledger{
  background:var(--surface);
  border:1px solid var(--hair);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* The honest caveat blocks — where the page tells you what it can't claim.
   Deliberately the plainest thing on the page. */
.plainly,
.note{
  margin:var(--sp-6) 0 0;
  padding:var(--sp-5) 0 0;
  border-top:2px solid var(--head);
  max-width:var(--measure);
}
.plainly p,
.note p{ color:var(--text-muted); margin-bottom:0 }
.plainly strong,
.note strong{ color:var(--head) }

/* --- 5. Page components -------------------------------------------------- */

/* Why ParkSyde — the refusals. Each one is a line we hold, so each one
   carries the same weight and the same coral edge. */
ul.wont{ list-style:none; padding:0; margin:var(--sp-5) 0 var(--sp-6); max-width:var(--measure) }
ul.wont li{
  background:var(--surface);
  border:1px solid var(--hair);
  border-left:3px solid var(--coral);
  border-radius:var(--radius-sm);
  padding:var(--sp-4) var(--sp-5);
  margin:0 0 var(--sp-3);
  box-shadow:var(--shadow);
}
ul.wont li:last-child{ margin-bottom:0 }

/* Why ParkSyde — the stencil band, breaking the column on purpose. */
.band{ margin:var(--sp-7) 0 0 }
.band img{ display:block; width:100%; height:auto }
.band figcaption{
  max-width:var(--container);
  margin:var(--sp-3) auto 0;
  padding-inline:var(--gutter);
  font-size:var(--t-sm);
  color:var(--text-muted);
  text-align:center;
}
.closing{ margin-top:var(--sp-7) }
.closing h2{
  font-family:var(--font-display); font-weight:600; font-size:var(--t-h2);
  line-height:1.16; color:var(--head); margin:0 0 var(--sp-3);
  letter-spacing:-.012em; text-wrap:balance;
}
.cta{
  display:inline-block;
  background:var(--accent);
  color:var(--on-accent);
  text-decoration:none;
  font-weight:700;
  padding:.8rem 1.5rem;
  border-radius:var(--radius-sm);
  margin-top:var(--sp-2);
  transition:background-color .18s ease, transform .18s ease;
}
.cta:hover{ background:var(--head); color:#fff; transform:translateY(-1px) }
main a.cta{ text-decoration:none; color:var(--on-accent) }
main a.cta:hover{ color:#fff }

/* How we work — five principles. Not a sequence, so the numerals stay small,
   grey and out of the way: they count the set, they don't order it. */
ol.principles{
  list-style:none; counter-reset:pr; padding:0;
  margin:var(--sp-5) 0 var(--sp-6);
  border-top:1px solid var(--hair);
  max-width:var(--measure);
}
ol.principles li{
  counter-increment:pr;
  padding:var(--sp-4) 0 var(--sp-4) 2.9rem;
  position:relative;
  border-bottom:1px solid var(--hair);
}
ol.principles li::before{
  content:counter(pr,decimal-leading-zero);
  position:absolute; left:0; top:calc(var(--sp-4) + .28em);
  font-family:var(--font-text);
  font-size:var(--t-xs);
  font-weight:700;
  letter-spacing:.1em;
  color:var(--text-muted);
  line-height:1;
}
ol.principles strong{
  display:block; font-weight:700; margin-bottom:.15rem; color:var(--head);
}
ol.principles span{ color:var(--text-muted) }

.practice{ padding:var(--sp-5) var(--sp-5) var(--sp-4); margin:var(--sp-5) 0;
  border-left:3px solid var(--accent) }
.practice h3{
  font-family:var(--font-text);
  font-size:var(--t-xs);
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin:0 0 var(--sp-4);
  font-weight:700;
}
.practice ul{ margin:0; padding-left:1.1rem; max-width:var(--measure) }
.practice li{ margin-bottom:.6rem }
.practice li:last-child{ margin-bottom:0 }
.practice li::marker{ color:var(--accent) }

/* Our evidence — the ledger. Two columns that face each other, and are given
   exactly the same room, because that is the point of the page. */
.ledger{
  display:grid;
  grid-template-columns:1fr 1fr;
  margin:var(--sp-6) 0;
  overflow:hidden;
}
.ledger .col{ padding:var(--sp-5) var(--sp-5) }
.ledger .col:first-child{ border-right:1px solid var(--hair) }
.ledger h3{
  font-family:var(--font-text);
  font-size:var(--t-xs);
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0 0 var(--sp-4);
  font-weight:700;
}
.ledger .can h3{ color:var(--affirm) }
.ledger .cant h3{ color:var(--limit) }
.ledger ul{ margin:0; padding:0; list-style:none }
.ledger li{
  position:relative;
  padding-left:1.35rem;
  margin-bottom:.85rem;
  font-size:var(--t-sm);
  line-height:1.55;
}
.ledger li:last-child{ margin-bottom:0 }
.can li::before{
  content:""; position:absolute; left:0; top:.52em;
  width:8px; height:8px; border-radius:50%; background:var(--teal);
}
.cant li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:9px; height:2px; background:var(--coral);
}
@media (max-width:38rem){
  .ledger{ grid-template-columns:1fr }
  .ledger .col:first-child{ border-right:0; border-bottom:1px solid var(--hair) }
}

/* Our evidence — how we're closing the gap. This one IS a sequence: you
   cannot report before you baseline. So this one keeps its numbers. */
ol.steps{ list-style:none; counter-reset:st; padding:0; margin:var(--sp-5) 0 var(--sp-6); max-width:var(--measure) }
ol.steps li{
  counter-increment:st;
  padding:var(--sp-4) 0 var(--sp-4) 3.1rem;
  position:relative;
  border-bottom:1px solid var(--hair);
}
ol.steps li::before{
  content:counter(st);
  position:absolute; left:0; top:calc(var(--sp-4) - .05rem);
  width:1.9rem; height:1.9rem; border-radius:50%;
  border:1.5px solid var(--accent);
  color:var(--head);
  display:grid; place-items:center;
  font-size:var(--t-xs); font-weight:700;
}
ol.steps strong{ display:block; color:var(--head) }
ol.steps span{ color:var(--text-muted); font-size:var(--t-sm) }

/* Where we're heading — six commitments, each one a promise you can hold us
   to. No ranking, so no numbers and no first-among-equals styling. */
.commits{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr));
  gap:var(--sp-4);
  margin:var(--sp-5) 0 var(--sp-6);
}
.commit{ padding:var(--sp-5) }
.commit h3{ margin:0 0 .4rem }
.commit p{ margin:0; color:var(--text-muted); font-size:var(--t-sm); max-width:none }

/* Our beginning — the marks, shown as they are. */
.mark{ padding:var(--sp-4); margin:var(--sp-5) 0 var(--sp-3) }
.mark img{ display:block; max-width:min(26rem, 100%); margin-inline:auto }
.mark.wide img{ max-width:100% }
.mark .empty{
  display:grid; place-items:center;
  min-height:11rem;
  border:1px dashed var(--hair);
  border-radius:var(--radius-sm);
  background:var(--surface-sunk);
  color:var(--text-muted);
  font-size:var(--t-sm);
  line-height:1.55;
  text-align:center;
  /* The plate fills its card — an empty frame that is obviously a frame,
     not a shy box floating in white. The text inside keeps its own measure. */
  padding:var(--sp-6) clamp(var(--sp-5), 12%, var(--sp-8));
  text-wrap:pretty;
}
.caption{
  font-size:var(--t-xs);
  color:var(--text-muted);
  margin:var(--sp-3) 0 0;
  text-align:center;
}

.thanks{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--band);
  color:#fff;
  border-radius:var(--radius);
  padding:var(--sp-6) var(--sp-6) var(--sp-5);
  margin:var(--sp-6) 0;
}
.thanks::before{
  content:"";
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(110% 90% at 4% 0%, rgba(233,180,76,.18), transparent 58%),
    radial-gradient(90% 80% at 96% 100%, rgba(42,157,143,.14), transparent 62%);
}
.thanks h2{
  font-family:var(--font-display); font-weight:600; font-size:var(--t-h2);
  line-height:1.16; letter-spacing:-.012em;
  margin:0 0 var(--sp-4); color:#fff; text-wrap:balance;
}
.thanks p{ color:rgba(255,255,255,.88) }
.thanks p:last-child{ color:var(--gold); font-weight:600; margin-bottom:0 }

/* What things cost — a published price list. A leader rules the eye across
   from the thing to the number, the way a menu does. */
.fee-list{ margin:var(--sp-5) 0 var(--sp-4) }
.fee-list + .quiet{ margin-top:var(--sp-4) }
.fee-row{
  display:flex;
  align-items:baseline;
  gap:.5rem;
  padding:var(--sp-4) 0;
  border-bottom:1px solid var(--hair);
}
.fee-row:first-child{ border-top:1px solid var(--hair) }
.fee-row::before{
  content:"";
  flex:1 1 1.5rem;
  order:1;
  min-width:1.25rem;
  align-self:baseline;
  border-bottom:1px dotted var(--hair);
  transform:translateY(-.3em);
}
.f-name{ font-weight:600; flex:0 1 auto; color:var(--head) }
.f-name .f-sub{
  display:block; font-weight:400;
  font-size:var(--t-xs); color:var(--text-muted); line-height:1.5;
}
.f-price{
  order:2; flex:none;
  font-family:var(--font-display);
  font-weight:600;
  white-space:nowrap;
  color:var(--head);
  font-variant-numeric:tabular-nums;
}
@media (max-width:30rem){
  .fee-row{ display:block }
  .fee-row::before{ display:none }
  .f-price{ margin-top:.3rem }
}

.edu{ padding:var(--sp-5); margin:var(--sp-5) 0; border-left:3px solid var(--accent) }
.edu .big{
  font-family:var(--font-display); font-weight:600;
  font-size:var(--t-h3); line-height:1.25;
  color:var(--head); display:block; margin-bottom:var(--sp-3);
}
.edu p{ font-size:var(--t-sm) }
.edu p:last-child{ margin-bottom:0 }

ul.free{ list-style:none; padding:0; margin:var(--sp-5) 0 var(--sp-5); max-width:var(--measure) }
ul.free li{
  padding:var(--sp-3) 0 var(--sp-3) 1.5rem;
  position:relative;
  border-bottom:1px solid var(--hair);
}
ul.free li:first-child{ border-top:1px solid var(--hair) }
ul.free li::before{
  content:""; position:absolute; left:0; top:1.15em;
  width:9px; height:9px; border-radius:50%; background:var(--park);
}
ul.free b{ color:var(--head) }

/* --- 6. Footer ----------------------------------------------------------- */

footer{
  margin-top:var(--sp-6);
  background:var(--band-deep);
  border-top:1px solid var(--accent);
  color:var(--on-band-muted);
  padding-block:var(--sp-6);
  font-size:var(--t-sm);
}
footer p{ margin:0 0 .25rem; max-width:none }
footer .fnav{
  display:flex; flex-wrap:wrap;
  gap:.3rem 1.2rem;
  margin:0 0 var(--sp-5);
  font-weight:500;
}
footer a{ color:#fff; text-decoration:none; border-bottom:1.5px solid transparent }
footer a:hover{ border-bottom-color:rgba(255,255,255,.4) }
footer .fnav a{ padding:.2rem 0 }
/* The line that matters most on a heavy day. Given its own rule and its own air. */
footer .crisis{
  margin-top:var(--sp-4);
  padding-top:var(--sp-4);
  border-top:1px solid var(--on-band-hair);
  color:rgba(255,255,255,.72);
}
footer .crisis b{ color:#fff; font-weight:600 }

/* --- 7. Motion ----------------------------------------------------------- */

@media (prefers-reduced-motion:no-preference){
  header .marker,
  header h1,
  header .standfirst{ animation:ps-rise .68s cubic-bezier(.2,.7,.3,1) both }
  header h1{ animation-delay:.05s }
  header .standfirst{ animation-delay:.12s }
  @keyframes ps-rise{
    from{ opacity:0; transform:translateY(12px) }
    to  { opacity:1; transform:none }
  }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}

/* --- 8. Dark-mode corrections for fixed-ink artwork ----------------------- */
/* The stencil band is a single dark ink on transparent. Inverting keeps it a
   silhouette instead of a hole in the page. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .band img{ filter:invert(1) hue-rotate(180deg); opacity:.9 }
}
:root[data-theme="dark"] .band img{ filter:invert(1) hue-rotate(180deg); opacity:.9 }
:root[data-theme="light"] .band img{ filter:none; opacity:1 }

/* --- 9. Print ------------------------------------------------------------ */

@media print{
  header::before,header::after,.thanks::before{ display:none }
  header,footer,.thanks{ background:#fff; color:#000 }
  .sitenav,.fnav{ display:none }
  main > h2{ break-after:avoid }
  .card,.practice,.commit,.edu,.mark,.ledger{ box-shadow:none }
}