/* Aegis Barding — the look of AEGIS-BARDING.md §10.7: near-black and
   off-white, large exact type, thin rules and grids, wide empty space,
   generated drawings, slow and sparse motion, and one signal colour kept for
   what changed. Mobile first. Every animation has a still final frame under
   prefers-reduced-motion. */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap;
  src: url("/static/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap;
  src: url("/static/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap;
  src: url("/static/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }

:root {
  --ink: #0b0c0e;
  --ink-2: #16181c;
  --paper: #ecebe6;
  --paper-2: #e2e0d9;
  --mute-on-paper: #4d4f54;
  --mute-on-ink: #a3a5a9;
  --rule-on-paper: #c4c2bb;
  --rule-on-ink: #34373d;
  --signal: #ff4f33;
  --signal-on-paper: #c0301b;
  --ok: #5fae7f;
  --ok-on-paper: #2c7349;
  --sans: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --wrap: 72rem;
  --fg: var(--ink); --bg: var(--paper); --mute: var(--mute-on-paper);
  --rule: var(--rule-on-paper); --sig: var(--signal-on-paper); --okc: var(--ok-on-paper);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 1.0625rem/1.6 var(--sans); color: var(--fg); background: var(--bg);
  font-feature-settings: "tnum" 1; }
.dark, .site-header, .site-footer { --fg: var(--paper); --bg: var(--ink); --mute: var(--mute-on-ink);
  --rule: var(--rule-on-ink); --sig: var(--signal); --okc: var(--ok); color: var(--fg); background: var(--bg); }

h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 0.6em; }
h1 { font-size: clamp(2.4rem, 7vw, 5rem); letter-spacing: -0.035em; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--sig); }
:focus-visible { outline: 2px solid var(--sig); outline-offset: 3px; }
.mono, code, .index, .eyebrow, .small-h { font-family: var(--mono); font-feature-settings: normal; }
.muted { color: var(--mute); }
.plain { list-style: none; margin: 0; padding: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; padding: 0.5rem 1rem; background: var(--paper); color: var(--ink); z-index: 10; }
.skip:focus { left: 1rem; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1rem; }
.narrow { max-width: 46rem; }
.center { text-align: center; }
.section { padding: 4.5rem 0; scroll-margin-top: 4rem; }
.rule { border-top: 1px solid var(--rule); }
.page-head { padding: 5rem 0 3.5rem; }
.eyebrow { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); margin-bottom: 1.5rem; }
.small-h { font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); margin: 1.75rem 0 0.75rem; }
.section-h { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
.section-lead { max-width: 40rem; color: var(--mute); margin-bottom: 2.5rem; }
.lead { font-size: 1.1875rem; max-width: 40rem; }
.sub { font-size: clamp(1.15rem, 2.4vw, 1.5rem); max-width: 36rem; color: var(--mute); }
.index { display: block; font-size: 0.8125rem; color: var(--mute); margin-bottom: 0.75rem; }
.source { font-size: 0.875rem; color: var(--mute); max-width: 46rem; margin-top: 1.5rem; }
.split { display: grid; gap: 3rem; }

/* Header and footer */
.site-header { border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 5; }
.header-row { display: flex; align-items: center; gap: 1rem; min-height: 4rem; }
.brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; margin-right: auto; }
.brand-name { font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.v.brand-mark { width: 1.875rem; height: 1.25rem; flex: none; }   /* the letters as tall as the name's capitals */
.nav-wide { display: none; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.nav-list a { white-space: nowrap; text-decoration: none; font-size: 0.9375rem; padding: 0.5rem 0; display: inline-block; }
.nav-list a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--sig); }
.lang { font-family: var(--mono); font-size: 0.8125rem; text-decoration: none; border: 1px solid var(--rule); padding: 0.25rem 0.5rem; }
.nav-toggle summary { cursor: pointer; list-style: none; font-family: var(--mono); font-size: 0.8125rem; text-transform: uppercase;
  letter-spacing: 0.08em; padding: 0.5rem 0; }
.nav-toggle summary::-webkit-details-marker { display: none; }
.nav-toggle[open] nav { position: absolute; left: 0; right: 0; top: 4rem; background: var(--ink); border-bottom: 1px solid var(--rule); padding: 0.5rem 1rem 1.25rem; }
.site-footer { border-top: 1px solid var(--rule); padding: 3.5rem 0 2rem; font-size: 0.9375rem; }
.footer-grid { display: grid; gap: 2rem; }
.footer-h { font-family: var(--mono); font-size: 0.75rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mute); }
.footer-grid li { margin-bottom: 0.35rem; }
.footer-grid a { text-decoration: none; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; margin-top: 3rem; padding-top: 1.25rem;
  border-top: 1px solid var(--rule); font-size: 0.75rem; color: var(--mute); }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.btn { display: inline-block; font: 600 0.9375rem/1 var(--sans); padding: 0.95rem 1.4rem; background: var(--fg); color: var(--bg);
  border: 1px solid var(--fg); text-decoration: none; cursor: pointer; }
.btn:hover { background: transparent; color: var(--fg); }
.btn-ghost { background: transparent; color: var(--fg); }
.btn-ghost:hover { border-color: var(--sig); }
.btn-small { padding: 0.55rem 0.9rem; font-size: 0.875rem; }
.nav-list .btn { color: var(--bg); }
.nav-list .btn:hover { color: var(--fg); }

/* Home */
.hero { padding: 4rem 0 3rem; border-bottom: 1px solid var(--rule); }
.hero-grid { display: grid; gap: 2.5rem; align-items: center; }
.proofs { display: grid; gap: 3rem; }
.proof .v { border: 1px solid var(--rule); margin-bottom: 1.25rem; overflow: hidden; }   /* a line never runs past its frame */
.cards { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.card { background: var(--bg); }
.card-link { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.75rem 1.5rem 2rem; text-decoration: none; height: 100%; }
.card-link:hover .card-h { text-decoration: underline; text-decoration-color: var(--sig); }
.card-h { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; }

/* Lists and figures */
.parts { display: grid; gap: 2.5rem; counter-reset: none; }
.part-h { font-size: 1.375rem; }
.ruled li { border-top: 1px solid var(--rule); padding: 0.9rem 0; }
.ruled li:last-child { border-bottom: 1px solid var(--rule); }
.numbered .mono { color: var(--mute); margin-right: 0.75rem; }
.moments li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; border-top: 1px solid var(--rule); padding: 0.85rem 0; }
.moments .mono { color: var(--mute); font-size: 0.875rem; }
.moments .signal { color: var(--sig); }
.inline { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.figures { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin: 1rem 0; font-size: 0.875rem; }
.figures dt { color: var(--mute); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
.figures dd { margin: 0; }
.facts div { display: grid; gap: 0.25rem; border-top: 1px solid var(--rule); padding: 0.8rem 0; }
.facts dt { color: var(--mute); font-size: 0.875rem; }
.facts dd { margin: 0; }
.prose h2 { font-size: 1.25rem; margin-top: 2.25rem; }

/* The sample */
.table-wrap { overflow-x: auto; margin: 1.5rem 0; }
table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; }
th { text-align: left; font: 400 0.75rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--mute);
  border-bottom: 1px solid var(--fg); padding: 0.6rem 0.75rem 0.6rem 0; }
td { border-bottom: 1px solid var(--rule); padding: 0.75rem 0.75rem 0.75rem 0; vertical-align: top; }
tr.holds .state, tr.step-ok .state { color: var(--okc); }
tr.unknown .state { color: var(--mute); }
tr.broken, tr.step-hit, tr.step-moved { color: var(--sig); }
tr.broken .muted { color: inherit; }
.venues { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.venue { background: var(--bg); padding: 1.5rem; }
/* The conditional card (AEGIS-BARDING.md §10.7): the answer, a one-pixel rule, the givens. It lays
   itself out by its own width, so a card in a venue's narrow column stacks as on a phone. */
.cc { container-type: inline-size; margin-bottom: 1.5rem; }
.cc-list { display: grid; gap: 0 3rem; }
.caught { margin-top: 4rem; }
.cc-index { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); margin: 0 0 0.5rem; }
.cc-tag { margin-left: 0.75rem; padding: 0 0.5rem; border: 1px solid var(--rule); }
.cc-body { display: grid; border-top: 1px solid var(--rule); padding-top: 1rem; }
.cc-answer { padding-bottom: 1rem; border-bottom: 1px solid var(--rule); }
.cc-fig { font-size: 1.375rem; line-height: 1.1; margin: 0 0 0.5rem; }
.cc-undefined { display: inline-block; border: 1px dashed var(--mute); color: var(--mute); padding: 0.25rem 0.75rem;
  font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 0.5rem; }
.cc-sentence { margin: 0; }
.cc-note { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--mute); }
.cc-givens { padding-top: 1rem; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); }
.cc-given { padding-left: 0.75rem; border-left: 2px solid transparent; }
.cc-given.new { color: var(--sig); border-left-color: var(--sig); animation: given 1.4s cubic-bezier(.2,.6,.2,1) both; }
.cc-src { padding-left: 0.75rem; margin-top: 0.5rem; }
@keyframes given { from { color: var(--mute); border-left-color: transparent; } }
.venue .cc { margin: 0 0 1rem; }
/* The samples' index, and the pieces of the shoot and the venue's report */
.samples { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.sample-card { background: var(--bg); padding: 1.75rem 1.5rem; display: flex; flex-direction: column; }
.sample-card .cc { margin-top: auto; padding-top: 1.5rem; }
.figures-pair { margin-bottom: 3rem; }
.after-visual { margin-top: 3rem; }
.weeks li span { display: inline-block; width: 8.5rem; color: var(--mute); }
.venue .cc-fig { font-size: 1.375rem; }
.venue .cc-sentence { font-size: 0.9375rem; }
@container (min-width: 26rem) {
  .cc-body { grid-template-columns: 1fr minmax(10rem, 0.7fr); }
  .cc-answer { padding: 0 1.5rem 0 0; border-bottom: 0; border-right: 1px solid var(--rule); }
  .cc-givens { padding: 0 0 0 1.5rem; }
}
/* The estimate's scale: the Update movement slides the marker from the previous estimate, by the
   width of the invisible span that reaches back to it (generate.py, estimate) */
.v.estimate { margin-top: 1rem; }
.v.framed { border: 1px solid var(--rule); }   /* a visual standing on its own (§10.7, the visual frame) */
.v .v-est { transform-box: fill-box; }
.v .v-est-span { fill: none; }
.v .v-est-up { animation: est-up 1.4s cubic-bezier(.2,.6,.2,1) both; }
.v .v-est-down { animation: est-down 1.4s cubic-bezier(.2,.6,.2,1) both; }
@keyframes est-up { from { transform: translateX(calc(5px - 100%)); } }
@keyframes est-down { from { transform: translateX(calc(100% - 5px)); } }
.steps-nav { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--rule); margin-bottom: 2rem; }
.steps-nav li { flex: 1 1 8rem; }
.steps-nav a { display: block; padding: 0.8rem 1rem; text-decoration: none; font-size: 0.8125rem; border-right: 1px solid var(--rule); }
.steps-nav a[aria-current="step"] { background: var(--fg); color: var(--bg); }
.replay-grid { display: grid; gap: 2rem; align-items: start; }
.replay-grid > .v { border: 1px solid var(--rule); }
.proposal { border: 1px solid var(--sig); padding: 1rem 1.25rem; margin-top: 1.25rem; }
.proposal .small-h { color: var(--sig); margin-top: 0; }
.pager { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.875rem; }

/* The form */
.form { display: grid; gap: 1.25rem; max-width: 34rem; }
.field label { display: block; font-size: 0.9375rem; font-weight: 600; margin-bottom: 0.35rem; }
.field input, .field select, .field textarea { width: 100%; font: inherit; color: var(--fg); background: transparent;
  border: 1px solid var(--mute); border-radius: 0; padding: 0.7rem 0.8rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--fg); outline-offset: 0; }
.has-error input, .has-error select, .has-error textarea { border-color: var(--sig); }
.field-error, .error { color: var(--sig); font-size: 0.875rem; margin: 0.35rem 0 0; }
.hint { color: var(--mute); font-size: 0.875rem; margin: 0.35rem 0 0; }
.hp { position: absolute; left: -9999px; }
.panel { border: 1px solid var(--fg); padding: 2rem; }

/* The generated visuals: drawn by class, so both themes and the motion rules apply */
.v { display: block; width: 100%; height: auto; overflow: visible; }
.v .v-ln, .v .v-mu, .v .v-sg { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.v .v-ln { stroke: var(--fg); }
.v .v-mu { stroke: var(--rule); }
.v .v-iso { stroke: var(--mute); stroke-opacity: 0.55; }
.v .v-iso-major { stroke: var(--fg); stroke-opacity: 0.7; }
.v .v-strong { stroke-width: 1.5; }
.v .v-dash { stroke-dasharray: 3 4; stroke: var(--mute); fill: none; }
.v .v-cell-mu { fill: var(--rule); }   /* a weekend with beds to spare */
.v .v-runway { stroke-width: 5; }
.v .v-sg { stroke: var(--sig); stroke-width: 1.5; }
.v .v-sgf { fill: var(--sig); }
.v .v-lnf { fill: var(--fg); }
.v .v-band { fill: var(--sig); fill-opacity: 0.25; }
.v .v-tx { fill: var(--mute); font: 11px var(--mono); letter-spacing: 0.04em; }
.v .v-tx-sg { fill: var(--sig); }
.v .v-cell { fill: var(--okc); fill-opacity: 0.16; stroke: var(--okc); stroke-width: 1; }
.v .v-cell-red { fill: var(--sig); fill-opacity: 0.3; stroke: var(--sig); }
.v .v-cell-unk { fill: none; stroke: var(--mute); stroke-dasharray: 3 3; }
/* The mark A|B (AEGIS-BARDING.md §10.7): stroke 1.4 in its own units, butt caps, mitre joins; only the bar is red */
.v .v-mark { fill: none; stroke: var(--fg); stroke-width: 1.4; stroke-linejoin: miter; }
.v .v-mark-bar { stroke: var(--sig); }
.v .v-tx-ok { fill: var(--okc); }
.v .v-panel { fill: var(--bg); stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* the hero plate: each row of the mesh is filled with the ground, so nearer rows hide farther lines */
.v .v-mesh { fill: var(--bg); stroke: var(--fg); stroke-opacity: 0.4; stroke-width: 0.8; vector-effect: non-scaling-stroke; }
.v .v-mesh-major { stroke-opacity: 0.85; }
/* the film: at rest every element shows the last frame (the replan and the day) */
.v .v-f-title { fill: var(--fg); font: 600 30px var(--sans); letter-spacing: -0.02em; }
.v .v-f-s1, .v .v-f-lab2, .v .v-f-lab3, .v .v-f-lab4 { opacity: 0; }
.v .v-f-grid { vector-effect: none; stroke-dasharray: 1; stroke-dashoffset: 0; }
.v .v-f-cam { transform: translate(-561.6px, -146.8px) scale(1.8); }
.v .v-f-venue { fill: none; stroke: var(--okc); stroke-width: 0.8; stroke-dasharray: 1; stroke-dashoffset: 0; }
.v .v-f-trk { fill: none; stroke: var(--mute); stroke-width: 0.5; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 0.25; }
.v .v-f-hit { stroke: var(--sig); stroke-width: 0.8; }
.v .v-f-old { fill: var(--sig); fill-opacity: 0; stroke: var(--sig); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.v .v-f-new { fill: var(--okc); transform-box: fill-box; transform-origin: left center; }
.v .v-f-disc { transform: translate(594px, 250.8px); }
.v .v-f-tick { fill: none; stroke: var(--okc); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

/* Motion: slow, sparse, and still under reduced motion. The resting style of
   each element is its final frame; the animation only leads up to it. */
@keyframes draw { from { stroke-dashoffset: 1; } }
@keyframes fade { from { opacity: 0; } }
@keyframes flip { 0%, 35% { fill: var(--okc); stroke: var(--okc); fill-opacity: 0.16; }
  45%, 70% { fill: var(--sig); stroke: var(--sig); fill-opacity: 0.4; }
  80%, 100% { fill: var(--okc); stroke: var(--okc); fill-opacity: 0.16; } }
@keyframes cursor { from { transform: translateX(-560px); } }
.v .v-draw { stroke-dasharray: 1; stroke-dashoffset: 0; animation: draw 2.8s cubic-bezier(.2,.6,.2,1) both; }
.v .v-d1 { animation-delay: 0.3s; } .v .v-d2 { animation-delay: 0.6s; } .v .v-d3 { animation-delay: 0.9s; }
.v .v-d4 { animation-delay: 1.4s; }
.v .v-fade { animation: fade 1.2s 2.4s ease-out both; }
.v .v-flip { animation: flip 8s ease-in-out infinite; }
.v .v-cursor { animation: cursor 4.5s cubic-bezier(.3,.6,.3,1) both; }
.anim-box { position: relative; }
.anim-box.film { border: 1px solid var(--rule); margin-bottom: 3rem; overflow: hidden; }
.anim-box.film .v { overflow: hidden; }   /* the camera's zoom never paints outside the frame */
.pause { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pause-label { position: absolute; right: 0.5rem; top: 0.5rem; z-index: 1; font-size: 0.6875rem; cursor: pointer;
  border: 1px solid var(--rule); padding: 0.2rem 0.45rem; background: var(--bg); color: var(--mute); }
.pause:focus-visible + .pause-label { outline: 2px solid var(--sig); outline-offset: 2px; }
.pause:checked + .pause-label { color: var(--fg); border-color: var(--fg); }
.pause:checked ~ .v * { animation-play-state: paused; }
/* The film plays once, 40 s, while its play box is checked (by the visitor, or by film.js when
   the whole frame first comes into view); unchecking, by Stop or by film.js when it ends, stops it on its
   resting frame. Its camera positions centre the venue (generate.py, VX and VY) at 2.4 and 1.8. */
@keyframes f-s1 { 0%, 12% { opacity: 1; } 15%, 100% { opacity: 0; } }
@keyframes f-grid { 0% { stroke-dashoffset: 1; } 8%, 100% { stroke-dashoffset: 0; } }
@keyframes f-cam { 0%, 14% { opacity: 0; transform: none; } 17% { opacity: 1; transform: none; }
  30%, 58% { opacity: 1; transform: translate(-668.8px, -262.4px) scale(2.4); }
  66%, 100% { opacity: 1; transform: translate(-561.6px, -146.8px) scale(1.8); } }
@keyframes f-venue { 0%, 18% { stroke-dashoffset: 1; stroke: var(--okc); } 28% { stroke-dashoffset: 0; stroke: var(--okc); }
  44%, 60% { stroke-dashoffset: 0; stroke: var(--sig); } 64%, 100% { stroke-dashoffset: 0; stroke: var(--okc); } }
@keyframes f-trk { 0%, 38% { stroke-dashoffset: 1; opacity: 1; } 47%, 60% { stroke-dashoffset: 0; opacity: 1; }
  64%, 100% { stroke-dashoffset: 0; opacity: 0.25; } }
@keyframes f-lab2 { 0%, 18% { opacity: 0; } 21%, 33% { opacity: 1; } 35%, 100% { opacity: 0; } }
@keyframes f-lab3 { 0%, 35% { opacity: 0; } 37%, 58% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes f-lab4 { 0%, 60% { opacity: 0; } 62%, 82% { opacity: 1; } 84%, 100% { opacity: 0; } }
@keyframes f-lab5 { 0%, 84% { opacity: 0; } 87%, 100% { opacity: 1; } }
@keyframes f-tl { 0%, 40% { opacity: 0; transform: translateY(110px); } 45%, 100% { opacity: 1; transform: none; } }
@keyframes f-old { 0%, 62% { fill-opacity: 1; } 68%, 100% { fill-opacity: 0; } }
@keyframes f-new { 0%, 64% { transform: scaleX(0); } 72%, 100% { transform: scaleX(1); } }
@keyframes f-sun { 0%, 62% { opacity: 0; } 65%, 100% { opacity: 1; } }
@keyframes f-disc { 0%, 64% { transform: translate(510px, 160.3px); } 78%, 100% { transform: translate(594px, 250.8px); } }
@keyframes f-c0 { 0%, 66% { opacity: 0; } 67%, 100% { opacity: 1; } }
@keyframes f-c1 { 0%, 69% { opacity: 0; } 70%, 100% { opacity: 1; } }
@keyframes f-c2 { 0%, 72% { opacity: 0; } 73%, 100% { opacity: 1; } }
@keyframes f-c3 { 0%, 75% { opacity: 0; } 76%, 100% { opacity: 1; } }
.play:checked ~ .v .v-f-s1 { animation: f-s1 40s both; }
.play:checked ~ .v .v-f-grid { animation: f-grid 40s both; }
.play:checked ~ .v .v-f-cam { animation: f-cam 40s ease-in-out both; }
.play:checked ~ .v .v-f-venue { animation: f-venue 40s both; }
.play:checked ~ .v .v-f-trk { animation: f-trk 40s both; }
.play:checked ~ .v .v-f-lab2 { animation: f-lab2 40s both; }
.play:checked ~ .v .v-f-lab3 { animation: f-lab3 40s both; }
.play:checked ~ .v .v-f-lab4 { animation: f-lab4 40s both; }
.play:checked ~ .v .v-f-lab5 { animation: f-lab5 40s both; }
.play:checked ~ .v .v-f-tl { animation: f-tl 40s ease-out both; }
.play:checked ~ .v .v-f-old { animation: f-old 40s both; }
.play:checked ~ .v .v-f-new { animation: f-new 40s ease-in-out both; }
.play:checked ~ .v .v-f-sun { animation: f-sun 40s both; }
.play:checked ~ .v .v-f-disc { animation: f-disc 40s ease-in-out both; }
.play:checked ~ .v .v-f-c0 { animation: f-c0 40s both; }
.play:checked ~ .v .v-f-c1 { animation: f-c1 40s both; }
.play:checked ~ .v .v-f-c2 { animation: f-c2 40s both; }
.play:checked ~ .v .v-f-c3 { animation: f-c3 40s both; }
.play { position: absolute; opacity: 0; width: 1px; height: 1px; }
.play:focus-visible + .pause-label { outline: 2px solid var(--sig); outline-offset: 2px; }
.play:checked + .pause-label { color: var(--fg); border-color: var(--fg); }
.play + .pause-label .when-on, .play:checked + .pause-label .when-off { display: none; }
.play:checked + .pause-label .when-on { display: inline; }
/* The Condition movement: June, then the north-east wind, thin the field of evenings; the quiet
   ones left fill in signal and their share appears. At rest, the final frame. */
.v .v-c-p { fill: var(--fg); }
.v .v-c-f1, .v .v-c-f2 { fill: var(--rule); }
.v .v-c-a { fill: var(--sig); }
.v .v-c-big { font-size: 28px; fill: var(--fg); }
.v .v-c-f1 { animation: c-was 0.4s 1.2s both; }
.v .v-c-f2 { animation: c-was 0.4s 2.4s both; }
.v .v-c-a { animation: c-was 0.6s 3.6s both; }
.v .v-c-g1 { animation: fade 0.4s 1.2s both; }
.v .v-c-g2 { animation: fade 0.4s 2.4s both; }
.v .v-c-g3 { animation: fade 0.6s 3.6s both; }
.v .v-c-fig { animation: fade 0.8s 5s both; }
@keyframes c-was { from { fill: var(--fg); } }
@media (prefers-reduced-motion: reduce) {
  .v *, .v, .cc * { animation: none !important; }
  .pause-label { display: none; }
}

@media (min-width: 48rem) {
  .wrap { padding: 0 2rem; }
  .section { padding: 6.5rem 0; }
  .split { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
  .hero { padding: 6rem 0 5rem; }
  .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 3rem; }
  .proofs { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .cards { grid-template-columns: repeat(3, 1fr); }   /* the three markets of AEGIS-BARDING.md §3 */
  .parts { grid-template-columns: repeat(2, 1fr); gap: 3rem 4rem; }
  .venues { grid-template-columns: repeat(3, 1fr); row-gap: 0; }
  /* each venue's name, region, score and twelve answers share the rows of the three columns,
     so one requirement reads straight across */
  .venue { display: grid; grid-row: span 15; grid-template-rows: subgrid; align-content: start; }
  .farms { grid-template-columns: repeat(2, 1fr); }
  .farms .venue { grid-row: span 11; }   /* a farm's name, region, score and eight risks */
  .samples { grid-template-columns: repeat(3, 1fr); }
  .cc-list { grid-template-columns: 1fr 1fr; }
  .replay-grid { grid-template-columns: 1fr 1.1fr; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
  .facts div { grid-template-columns: 14rem 1fr; }
}
@media (min-width: 64rem) {
  .nav-wide { display: block; }
  .nav-wide .nav-list { flex-direction: row; align-items: center; gap: 1.5rem; }
  .nav-toggle { display: none; }
}
.field-list { margin-top: 2rem; }