/* schillman.se shared stylesheet.
   Single source of truth for the design tokens. The ledger deliberately keeps
   its own inline copy, because that page has to keep working as a single file
   saved to disk with the network off.

   Two levels of chrome live here. The hub at / is the game selector and owns
   .hero and .monument. Everything under /d4/ is a game section and reuses the
   shared page furniture with a .topbar__crumb identifying which game you are
   inside. Adding a second game needs one more .monument on the hub and a
   directory. It needs nothing new here. */

:root{
  --bg:#110d0f;
  --surface:#1c161a;
  --surface-hi:#241c21;
  --border:#332830;
  --border-soft:#241b20;
  --ink:#eee6e1;
  --ink-dim:#a89892;
  --accent:#ff5a36;
  --accent-hi:#ff7a52;
  --accent-ink:#1c0d07;
  --gold:#c9a15a;
  --gold-dim:#8a7040;
  /* --bloom is --bg with --accent composited over it at 16%. It is declared as
     a real token rather than written as an rgba() stop so that check.py can
     compute contrast against it: it is the effective background under the hero
     and the monument, and every text colour that sits over it is in PAIRS. */
  --bloom:#371915;
  --radius-lg:14px;
  --radius-md:8px;
  --font-display:"Cinzel",serif;
  --font-ui:"Barlow",system-ui,-apple-system,sans-serif;
  --font-cond:"Barlow Condensed",system-ui,-apple-system,sans-serif;
  --shadow-panel:0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px rgba(0,0,0,.35);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 15% -10%, var(--bloom), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(201,161,90,.06), transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,h2,h3{margin:0;font-weight:600;}
p{margin:0;}
ul,ol{margin:0;padding:0;}
a{color:var(--accent-hi);}
:focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px;border-radius:4px;}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;color:var(--ink);}
strong{color:var(--ink);font-weight:600;}

.app{position:relative;z-index:1;max-width:920px;margin:0 auto;padding:0 20px 64px;}
.app--narrow{max-width:760px;}
.app--wide{max-width:1080px;}

/* ============================================================
   MOTION SYSTEM
   Four layers, in the order a visitor meets them:
     1. drifting embers, ambient and decorative
     2. the load sequence, staged once per page
     3. scroll reveals, one per section
     4. hover and focus choreography on every control
   Every one of them is switched off wholesale in the
   prefers-reduced-motion block at the bottom of this file.
   ============================================================ */

/* Cross document transitions. Two declarations, no JavaScript, and browsers
   that do not implement it simply navigate. .app carries the page name and the
   wordmark is lifted out of it so it holds still while the page underneath
   swaps, which is what makes /d4/ feel like a section rather than a new site. */
@view-transition{navigation:auto;}
.app{view-transition-name:page;}
.topbar__mark,.hero__mark{view-transition-name:mark;}
::view-transition-old(page){animation:vt-out .24s var(--ease-soft) both;}
::view-transition-new(page){animation:vt-in .42s var(--ease) both;}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px);}}
@keyframes vt-in{from{opacity:0;transform:translateY(16px);}}

@keyframes rise-in{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}
@keyframes draw-x{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes bloom-in{from{opacity:0;transform:scale(.9);}to{opacity:1;transform:none;}}
@keyframes sigil-breathe{0%,100%{opacity:.8;transform:scale(1);}50%{opacity:1;transform:scale(1.05);}}
@keyframes ember-rise{
  0%{transform:translate3d(0,0,0) scale(.5);opacity:0;}
  10%{opacity:.9;}
  75%{opacity:.55;}
  100%{transform:translate3d(var(--dx,0px),-104vh,0) scale(1);opacity:0;}
}

/* Ambient embers. Fourteen 2 to 4px sparks, transform and opacity only, so the
   whole field stays on the compositor. Purely decorative and aria-hidden. */
.embers{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.ember{
  position:absolute;
  left:var(--x);
  bottom:-10px;
  width:var(--s);
  height:var(--s);
  border-radius:50%;
  background:var(--accent);
  opacity:0;
  animation:ember-rise var(--d) linear var(--t) infinite;
}

/* Scroll reveals. Gated on .js so that with scripting off every section is
   simply visible, which is also the state a reduced-motion visitor gets. */
.js .reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  transition-delay:calc(var(--i,0)*80ms);
}
.js .reveal.is-in{opacity:1;transform:none;}

/* ---- header ---- */
.topbar{padding:40px 0 28px;border-bottom:1px solid var(--border-soft);}
.topbar__mark{
  font-family:var(--font-cond);
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--gold);
}
a.topbar__mark{text-decoration:none;display:inline-block;}
a.topbar__mark:hover{color:var(--accent-hi);}
/* Section breadcrumb: the site wordmark, a hairline, then the game you are in.
   This is the only thing that identifies /d4/ as a section rather than a site. */
.topbar__crumb{display:flex;align-items:center;flex-wrap:wrap;gap:10px;}
.topbar__crumb::after{
  content:"";
  flex:1 1 40px;
  height:1px;
  background:linear-gradient(90deg,var(--gold-dim),transparent);
  transform-origin:left;
  animation:draw-x 1.1s var(--ease) .1s both;
}
.topbar__game{
  font-family:var(--font-cond);
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--ink-dim);
  padding-left:10px;
  border-left:1px solid var(--gold-dim);
}
.topbar__title{
  font-family:var(--font-display);
  font-size:clamp(28px,4.4vw,40px);
  letter-spacing:.01em;
  line-height:1.1;
  margin-top:8px;
}
.topbar__title em{font-style:normal;color:var(--accent-hi);}
.topbar__sub{margin-top:14px;color:var(--ink-dim);max-width:64ch;}
.updated{margin-top:14px;color:var(--ink-dim);font-size:13px;}

.js .topbar__title{animation:rise-in .8s var(--ease) .12s both;}
.js .topbar__sub{animation:rise-in .8s var(--ease) .2s both;}
.js .updated{animation:rise-in .8s var(--ease) .26s both;}
.js .sitenav{animation:rise-in .8s var(--ease) .32s both;}

.sitenav{
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
  margin-top:24px;
}
.sitenav a{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  font-family:var(--font-cond);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:11.5px;
  padding:5px 12px;
  border-radius:99px;
  /* gold-dim, not border: these are interactive controls whose pill outline is
     the affordance, so it has to clear 3:1 against both the page and the fill. */
  border:1px solid var(--gold-dim);
  background:var(--surface);
  color:var(--ink-dim);
  text-decoration:none;
  transition:border-color .2s var(--ease-soft),color .2s var(--ease-soft);
}
/* The ember wash sweeps in from the leading edge on hover and on keyboard
   focus, so the choreography is identical for both input methods. */
.sitenav a::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,rgba(255,90,54,.28),rgba(255,90,54,.06));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .32s var(--ease);
}
.sitenav a:hover::before,.sitenav a:focus-visible::before{transform:scaleX(1);}
.sitenav a:hover,.sitenav a:focus-visible{border-color:var(--gold);color:var(--ink);}
.sitenav a[aria-current="page"]{
  border-color:var(--accent);
  color:var(--ink);
  background:var(--surface-hi);
}

/* ============================================================
   HUB: the game selector at /
   One game is not a gap in a grid, it is a monument. There is
   deliberately no numbered register under it: a one row list
   with an 01 in the margin is the launcher grid wearing a
   different shape, and it made the page count itself. The
   monument is the whole answer, and a second game is a second
   monument.
   ============================================================ */
.hero{padding:32px 0 8px;}
.hero__head{
  display:flex;
  flex-wrap:wrap;
  gap:14px 28px;
  align-items:center;
  justify-content:space-between;
}
/* The hub reads mark, nav, rule, title, lede, monument. The shared .sitenav
   delay is tuned for the guide header, where the nav comes last, so the hub
   pulls it forward to keep the load sequence in reading order. */
.js .hero__head .sitenav{margin-top:0;animation-delay:.12s;}
.hero__mark{
  display:inline-block;
  font-family:var(--font-cond);
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--gold);
  text-decoration:none;
}
.hero__rule{
  height:1px;
  margin:18px 0 26px;
  background:linear-gradient(90deg,var(--accent),var(--gold-dim) 38%,transparent);
  transform-origin:left;
}
.hero__title{
  font-family:var(--font-display);
  font-size:clamp(38px,7.2vw,76px);
  line-height:1.02;
  letter-spacing:-.01em;
  text-wrap:balance;
  max-width:15ch;
}
.hero__title em{font-style:normal;color:var(--accent-hi);}

.js .hero__mark{animation:rise-in .7s var(--ease) .05s both;}
.js .hero__rule{animation:draw-x 1.2s var(--ease) .18s both;}
.js .hero__title{animation:rise-in .9s var(--ease) .28s both;}
.js .monument{animation:rise-in 1s var(--ease) .44s both;}

.monument{
  display:block;
  position:relative;
  overflow:hidden;
  margin-top:28px;
  padding:34px 30px 30px;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface);
  box-shadow:var(--shadow-panel);
  text-decoration:none;
  color:inherit;
  transition:border-color .35s var(--ease-soft),transform .35s var(--ease);
}
/* The bloom is a decorative wash pinned to the top right of the panel. It is
   the reason --bloom is a declared token: every colour used inside .monument is
   checked against it in check.py, so the wash cannot quietly eat contrast. */
.monument::before{
  content:"";
  position:absolute;
  top:-55%;
  right:-18%;
  width:82%;
  height:210%;
  background:radial-gradient(closest-side,var(--bloom),transparent 78%);
  opacity:.85;
  pointer-events:none;
  transition:opacity .5s var(--ease-soft);
}
/* An ember hairline traces the top edge on hover and focus. */
.monument::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  transform:scaleX(0);
  transition:transform .6s var(--ease);
}
.monument:hover,.monument:focus-visible{border-color:var(--gold-dim);transform:translateY(-3px);}
.monument:hover::after,.monument:focus-visible::after{transform:scaleX(1);}
.monument:hover::before,.monument:focus-visible::before{opacity:1;}
/* Two plates side by side once there is room: the name and the action on the
   left, the argument on the right. Below 860px they stack in the same order. */
.monument__plate,.monument__brief{display:block;position:relative;}
/* DOM order is the mobile order: name, then argument, then action. On desktop
   the grid moves the action back under the name without touching that order. */
@media (min-width:860px){
  .monument{
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(0,1fr);
    grid-template-areas:"plate brief" "cta brief";
    grid-template-rows:auto 1fr;
    column-gap:52px;
    padding:40px 44px;
  }
  .monument__plate{grid-area:plate;align-self:end;}
  .monument__brief{grid-area:brief;align-self:center;padding-left:26px;border-left:1px solid var(--gold-dim);}
  .monument__cta{grid-area:cta;justify-self:start;align-self:start;}
}
.monument__sigil{
  display:block;
  width:52px;
  height:52px;
  margin-bottom:18px;
}
.js .monument__sigil{animation:sigil-breathe 5.5s var(--ease-soft) infinite;}
.monument__title{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(34px,5.6vw,58px);
  line-height:1.05;
  margin-top:10px;
  color:var(--ink);
}
.monument__season{
  display:block;
  margin-top:10px;
  font-family:var(--font-cond);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:14px;
  color:var(--accent-hi);
}
.monument__body{display:block;margin-top:18px;color:var(--ink);max-width:48ch;}
.monument__stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
@media (min-width:860px){
  .monument__brief .monument__body{margin-top:0;}
}
.monument__cta{
  display:inline-block;
  margin-top:26px;
  font-family:var(--font-cond);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:14px;
  padding:11px 22px;
  border-radius:var(--radius-md);
  background:var(--accent);
  color:var(--accent-ink);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.monument:hover .monument__cta,.monument:focus-visible .monument__cta{
  transform:translateY(-1px);
  box-shadow:0 0 0 4px rgba(255,90,54,.18);
}


/* ---- sections and prose ---- */
section{margin-top:44px;}
.section-label{
  font-family:var(--font-cond);
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--gold);
}
h2{font-family:var(--font-cond);font-size:26px;line-height:1.25;letter-spacing:.01em;margin-top:6px;}
h3{
  font-family:var(--font-cond);
  font-size:19px;
  letter-spacing:.02em;
  margin-top:28px;
}
.prose{max-width:70ch;margin-top:14px;}
.longform{line-height:1.7;}
.prose p + p,.prose p + ul,.prose ul + p,.prose p + ol,.prose ol + p{margin-top:14px;}
.prose ul,.prose ol{padding-left:20px;color:var(--ink-dim);}
.prose li + li{margin-top:6px;}
h3 + .prose{margin-top:10px;}
/* Prose links grow their underline from the leading edge instead of blinking
   colour, which reads as one continuous system with the nav pill sweep. */
.prose a{
  text-decoration:none;
  background-image:linear-gradient(var(--accent-hi),var(--accent-hi));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:100% 1px;
  transition:background-size .3s var(--ease),color .3s var(--ease);
}
.prose a:hover,.prose a:focus-visible{background-size:100% 2px;color:var(--ink);}

/* ---- project card ---- */
.card{
  display:block;
  position:relative;
  overflow:hidden;
  margin-top:20px;
  padding:24px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-panel);
  text-decoration:none;
  color:inherit;
  transition:border-color .3s var(--ease-soft), transform .3s var(--ease);
}
.card::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  transform:scaleX(0);
  transition:transform .6s var(--ease);
}
.card:hover,.card:focus-visible{border-color:var(--gold-dim);transform:translateY(-3px);}
.card:hover::after,.card:focus-visible::after{transform:scaleX(1);}
.card__head{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:baseline;justify-content:space-between;}
.card__title{font-family:var(--font-display);font-size:22px;color:var(--accent-hi);}
.card__host{
  font-family:var(--font-cond);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--ink-dim);
}
.card__body{margin-top:12px;color:var(--ink);max-width:70ch;}
.card__stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.chip{
  font-family:var(--font-cond);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:11.5px;
  padding:5px 12px;
  border-radius:99px;
  border:1px solid var(--border);
  background:var(--surface-hi);
  color:var(--ink-dim);
}
.card__cta{
  display:inline-block;
  margin-top:20px;
  font-family:var(--font-cond);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:13px;
  padding:9px 18px;
  border-radius:var(--radius-md);
  background:var(--accent);
  color:var(--accent-ink);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.card:hover .card__cta,.card:focus-visible .card__cta{
  transform:translateY(-1px);
  box-shadow:0 0 0 4px rgba(255,90,54,.18);
}

/* ---- guide index cards ---- */
.guide-list{display:grid;gap:14px;margin-top:20px;list-style:none;}
.guide-list a{
  display:block;
  position:relative;
  padding:18px 20px 18px 22px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  text-decoration:none;
  color:inherit;
  transition:border-color .3s var(--ease-soft),transform .3s var(--ease);
}
/* A gold bar grows down the leading edge on hover, which is the same left to
   right, quiet to lit gesture the nav pills and prose links use. */
.guide-list a::before{
  content:"";
  position:absolute;
  left:-1px;
  top:-1px;
  bottom:-1px;
  width:2px;
  border-radius:var(--radius-lg) 0 0 var(--radius-lg);
  background:var(--accent);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .35s var(--ease);
}
.guide-list a:hover::before,.guide-list a:focus-visible::before{transform:scaleY(1);}
.guide-list a:hover,.guide-list a:focus-visible{border-color:var(--gold-dim);transform:translateX(2px);}
.guide-list h3{
  display:block;
  font-family:var(--font-cond);
  font-weight:600;
  font-size:19px;
  letter-spacing:.02em;
  margin-top:0;
  color:var(--accent-hi);
}
.guide-list span{display:block;margin-top:6px;color:var(--ink-dim);font-size:15px;max-width:70ch;}

/* ---- flat bullet grid ---- */
.cover-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:10px 20px;
  margin-top:18px;
  list-style:none;
}
.cover-list li{padding-left:16px;position:relative;color:var(--ink-dim);font-size:15px;}
.cover-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:6px;
  height:6px;
  border-radius:2px;
  background:var(--gold-dim);
}

/* ---- term and description rows ---- */
.facts{margin-top:18px;list-style:none;max-width:70ch;}
.facts li{padding:16px 0;border-top:1px solid var(--border-soft);}
.facts li:last-child{border-bottom:1px solid var(--border-soft);}
.facts b{
  display:block;
  font-family:var(--font-cond);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:13px;
  color:var(--ink);
  margin-bottom:4px;
}
.facts span{color:var(--ink-dim);font-size:15px;}

/* ---- callout ---- */
.note{
  margin-top:20px;
  padding:16px 18px;
  background:var(--surface);
  border:1px solid var(--border);
  border-left:3px solid var(--gold-dim);
  border-radius:var(--radius-md);
  max-width:70ch;
  color:var(--ink-dim);
  font-size:15px;
}
.note b{
  font-family:var(--font-cond);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:13px;
  color:var(--ink);
  display:block;
  margin-bottom:4px;
}

/* ---- data table ---- */
.table-scroll{margin-top:18px;overflow-x:auto;}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px;}
caption{
  text-align:left;
  color:var(--ink-dim);
  font-size:13px;
  padding-bottom:10px;
}
th,td{
  text-align:left;
  padding:11px 14px;
  border-bottom:1px solid var(--border-soft);
  vertical-align:top;
}
thead th{
  font-family:var(--font-cond);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--gold);
  background:var(--surface);
  border-bottom:1px solid var(--border);
}
tbody th{font-weight:600;color:var(--ink);white-space:nowrap;}
td{color:var(--ink-dim);}
tbody tr:hover th,tbody tr:hover td{background:var(--surface);}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:none;}

/* ---- sources ---- */
.sources{margin-top:18px;list-style:none;max-width:70ch;}
.sources li{
  padding-left:16px;
  position:relative;
  color:var(--ink-dim);
  font-size:14px;
}
.sources li + li{margin-top:6px;}
.sources li::before{
  content:"";
  position:absolute;
  left:0;
  top:.6em;
  width:6px;
  height:6px;
  border-radius:2px;
  background:var(--gold-dim);
}

/* ---- footer ---- */
.site-footer{
  margin-top:56px;
  padding-top:24px;
  border-top:1px solid var(--border-soft);
  color:var(--ink-dim);
  font-size:12.5px;
  line-height:1.8;
  max-width:70ch;
}
.site-footer p + p{margin-top:8px;}
.site-footer nav a{margin-right:18px;}

/* Stacked monument: name, action, then the argument. DOM order stays name,
   argument, action for the reading order, and reordering visually is safe here
   because the whole monument is a single link, so there is no focus order to
   desync. Without this the action sits ~190px below a phone fold. */
@media (max-width:859px){
  .monument{display:flex;flex-direction:column;}
  .monument__plate{order:1;}
  .monument__cta{order:2;align-self:flex-start;}
  .monument__brief{order:3;margin-top:24px;}
}

@media (max-width:640px){
  .hero{padding-top:28px;}
  .monument{padding:28px 22px 26px;}
}

/* Short laptop viewports. The primary action is inside the monument, so on a
   720 to 800px tall screen the whole first viewport has to give up its slack or
   the one thing a visitor is meant to click sits below the fold. Only the
   vertical rhythm tightens; the headline scale, which is the thesis, does not. */
@media (min-width:860px) and (max-height:820px){
  .hero{padding-top:18px;}
  .hero__rule{margin:12px 0 16px;}
  .monument{margin-top:18px;padding-top:26px;padding-bottom:26px;}
  .monument__body{font-size:15px;}
}

/* ============================================================
   REDUCED MOTION
   This is a floor, not a dial. Everything above is switched off:
   the ember field is removed from the document, every keyframe
   animation and transition is collapsed, scroll reveals render
   in their final state, and cross document transitions stop
   animating. What is left is the same static, complete page.
   ============================================================ */
/* M1: .reveal starts hidden, and only site.js ever unhides it. Print has no
   scrolling and no observer, so without this a printed guide is blank pages.
   The other half of that guard is onerror on the script tag in each head. */
@media print{
  .js .reveal{opacity:1!important;transform:none!important;transition:none!important;}
  .embers{display:none!important;}
}

@media (prefers-reduced-motion:reduce){
  /* animation:none, not a collapsed duration. Every entrance animation here
     ends at the element's own natural state, so removing the animation lands on
     the finished frame with certainty, while a .01ms duration only lands there
     if the animation gets a tick at all. It does not always: under a virtual
     clock the same page measured opacity 0 on four hero elements. Reduced
     motion is a floor, and a floor cannot depend on a race. */
  *,*::before,*::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
  .embers{display:none!important;}
  .js .reveal,.js .reveal.is-in{opacity:1!important;transform:none!important;transition:none!important;}
  .monument::after,.card::after,.sitenav a::before,.guide-list a::before{display:none!important;}
  .monument:hover,.card:hover,.guide-list a:hover,
  .monument:focus-visible,.card:focus-visible,.guide-list a:focus-visible{transform:none!important;}
  .monument:hover .monument__cta,.card:hover .card__cta,
  .monument:focus-visible .monument__cta,.card:focus-visible .card__cta{transform:none!important;}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important;}
}