@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════════════
   StratOps — SPINE
   Dark is the default and the designed version; light is a deliberate second
   pressing of the same design, not an inversion.

   Three ideas, and nothing else:
     1. A spine. Every section hangs off an outer column carrying its number.
        On a phone the column collapses on top of the body — the number does not.
     2. Fields, not rules. Sections separate because the ground changes value or
        because there is more air above them. The whole stylesheet contains FOUR
        border declarations, and each one means something:
           · the datum under a section number
           · the mark on quoted speech
           · the ruling between rows of the one table on the page
           · the flag on the single warning block
     3. One accent, used with conviction. Cyan carries the hero's second line,
        the four proof figures at 6rem, and the entire closing section as a
        full-bleed field. Everywhere else it is a small label doing small work.
        The warning orange appears exactly once, on the unfixed audit finding.

   Self-contained: no @import, no web font, no image, no script.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── 1. reset ───────────────────────── */

*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
* { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 5rem;
}

/* ───────────────────────── 2. tokens — DARK IS :root ───────────────────────── */

:root {
  color-scheme: dark;

  /* faces. A drafting grotesk for display, a book serif for the long copy,
     a mono for every label and numeral. All resident locally. */
  --f-dwg: "Bahnschrift", "DIN Alternate", "DIN Condensed", "Oswald",
           "Franklin Gothic Medium", "Liberation Sans Narrow", "Arial Narrow", sans-serif;
  --f-prose: "Iowan Old Style", "Charter", "Constantia", "Palatino Linotype",
             Palatino, "Book Antiqua", "URW Palladio L", Georgia, serif;
  --f-mono: "Consolas", "Iosevka", "SF Mono", "Menlo", "DejaVu Sans Mono",
            "Liberation Mono", "Courier New", monospace;

  /* the dark field: three values of ground, one ink, one accent */
  --paper:      #04070a;
  --paper-2:    #0a141b;
  --field:      #0d1a22;
  --ink:        #dfe9ed;
  --ink-dim:    #94aab3;
  --line:       #2e5361;
  --cyan:       #63dcf2;
  --cyan-soft:  rgba(99, 220, 242, .075);
  --warn:       #ffa53d;
  --warn-soft:  rgba(255, 165, 61, .075);
  /* type set ON the cyan field */
  --oncyan:     #04070a;
  --oncyan-dim: #123a44;

  /* the grid. Content is pinned left of centre: past 1520px the right margin
     grows faster than the left, so this is never a centred column. */
  --pad:   clamp(1.15rem, 4.4vw, 3.4rem);
  --el:    max(var(--pad), calc((100vw - 1520px) * .40));
  --er:    max(var(--pad), calc((100vw - 1520px) * .60));
  --spine: clamp(4.5rem, 9vw, 8.5rem);
  --gap:   clamp(1.5rem, 3.4vw, 3.6rem);
  --hang:  2.9rem;

  --measure: 62ch;
  --secpad:  clamp(3.6rem, 8.5vw, 8rem);
}

@media (min-width: 48em) { :root { --hang: 4.2rem; } }

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    /* Light is its own pressing: warm sheet, teal ink, the same structure.
       Every value re-chosen against the paper rather than flipped. */
    --paper:      #f7f5ef;
    --paper-2:    #ece7da;
    --field:      #e4dfd0;
    --ink:        #14252c;
    --ink-dim:    #435b64;
    --line:       #9cb3bb;
    --cyan:       #0c6379;
    --cyan-soft:  rgba(12, 99, 121, .08);
    --warn:       #a63c07;
    --warn-soft:  rgba(166, 60, 7, .08);
    --oncyan:     #f4fbfd;
    --oncyan-dim: #d3edf5;
  }
}

/* ───────────────────────── 3. page ───────────────────────── */

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-prose);
  font-size: clamp(1rem, .95rem + .2vw, 1.09rem);
  line-height: 1.62;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--cyan); color: var(--oncyan); }

a { color: inherit; }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .85rem 1.2rem;
  background: var(--cyan);
  color: var(--oncyan);
  text-decoration: none;
}
.skip:focus { left: 0; }

/* ───────────────────────── 4. type primitives ───────────────────────── */

h1, h2 {
  font-family: var(--f-dwg);
  font-weight: 600;
  text-transform: uppercase;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.8rem, 9.2vw, 7rem);
  line-height: .875;
  letter-spacing: -.014em;
  max-width: 15ch;
}
.h1-a, .h1-b { display: block; }
.h1-b { color: var(--cyan); }

h2 {
  font-size: clamp(1.95rem, 5.4vw, 3.9rem);
  line-height: .93;
  letter-spacing: -.01em;
  max-width: 19ch;
  margin-bottom: .55em;
}

h3 {
  font-family: var(--f-dwg);
  font-weight: 600;
  font-size: clamp(1.16rem, 1.9vw, 1.38rem);
  line-height: 1.16;
  letter-spacing: .002em;
}

p { text-wrap: pretty; }

strong { font-weight: 400; color: var(--ink); }
em { font-style: italic; }

code {
  font-family: var(--f-mono);
  font-size: .85em;
  color: var(--cyan);
  background: var(--cyan-soft);
  padding: .06em .32em;
  overflow-wrap: anywhere;
}

/* the small mono voice: every label, tag, caption and button */
.spine-note, .nav-n, .topnav a, .brand-name, .btn, .clock, .scene-label,
.scene-tool, .tag, .proofbox-label, .fig-u, .tier, .cta-note, .step-n,
.foot-brand, .hero-fine {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}

/* ───────────────────────── 5. topbar ───────────────────────── */

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem clamp(1rem, 4vw, 2.5rem);
  padding: .7rem var(--er) .7rem var(--el);
  background: var(--field);
}
@media (min-width: 46em) {
  .topbar { position: sticky; top: 0; z-index: 30; }
}

.brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
}
.mark { width: 16px; height: 16px; flex: none; }
.mark rect { fill: var(--cyan); }
.mark .mark-rule { stroke: var(--paper); stroke-width: 2.6; fill: none; }
.mark .mark-dot { fill: var(--paper); }
.brand-name {
  font-size: .92rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}

.topnav { margin-inline-start: auto; }
.topnav ul { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; }
.topnav a {
  display: inline-flex;
  align-items: baseline;
  gap: .5em;
  font-size: .62rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-decoration: none;
  padding: .25rem 0;
}
.topnav a:hover { color: var(--ink); }
.nav-n { color: var(--cyan); }

/* ───────────────────────── 6. the spine ───────────────────────── */

.sec {
  display: grid;
  grid-template-columns: var(--el) minmax(0, 1fr) var(--er);
  padding-block: var(--secpad);
}
.sec > .spine { grid-column: 2; margin-bottom: clamp(1.6rem, 4vw, 2.4rem); }
.sec > .col   { grid-column: 2; min-width: 0; overflow-wrap: break-word; }

@media (min-width: 62em) {
  .sec {
    grid-template-columns: var(--el) var(--spine) var(--gap) minmax(0, 1fr) var(--er);
  }
  .sec > .spine {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 0;
    position: sticky;
    top: 4.6rem;
    align-self: start;
  }
  .sec > .col { grid-column: 4; grid-row: 1; }
}

.spine-no {
  display: block;
  width: max-content;
  min-width: 4.2rem;
  font-family: var(--f-dwg);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: clamp(2.1rem, 5vw, 4.2rem);
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--ink-dim);
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--line);   /* RULE 1 of 4 — the datum */
}
.spine-note {
  margin-top: .75rem;
  font-size: .63rem;
  line-height: 1.55;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--cyan);
  max-width: 34ch;
}

/* section grounds — the separation, in place of rules */
.sec-alt { background: var(--paper-2); }

/* ───────────────────────── 7. shared body parts ───────────────────────── */

.col > * { max-width: var(--measure); }
.col-wide > * { max-width: min(100%, 90ch); }
.col-wide > .section-lede { max-width: var(--measure); }

/* Headings keep the measure declared on h1/h2 further up.
   Those are element selectors at (0,0,1); `.col > *` is (0,1,0) and beat them
   silently, so every headline shipped with no cap at all — `ch` resolves against
   the element's OWN font-size, so 62ch of a 62px display face computes to about
   2100px. The symptom was headlines running 760-900px as two loose lines instead
   of the tight blocks the type system specifies, with the closing headline the
   lone exception because its override happened to be specific enough to survive.
   These are (0,1,1) and win. The later `.sec-field h2` is also (0,1,1) and still
   wins on order, which is intended: that section wants a tighter 17ch. */
.col > h1, .col-wide > h1 { max-width: 15ch; }
.col > h2, .col-wide > h2 { max-width: 19ch; }

.lede {
  font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem);
  line-height: 1.5;
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  max-width: 54ch;
}
.lede strong { color: var(--cyan); }
.lede-tight { margin-top: 1.1rem; color: var(--ink-dim); }

.section-lede {
  font-size: clamp(1.05rem, 1rem + .3vw, 1.18rem);
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 56ch;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.btn {
  display: inline-block;
  font-size: .69rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .95rem 1.5rem;
  background: var(--field);
  color: var(--ink);
  transition: background-color .12s linear, color .12s linear;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-primary { background: var(--cyan); color: var(--oncyan); }
.btn-primary:hover { background: var(--ink); color: var(--paper); }

.hero-cta, .cta-inline, .final-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1.4rem;
}
.hero-cta { margin-top: clamp(1.8rem, 3.5vw, 2.6rem); }
.cta-inline {
  margin-top: clamp(2.6rem, 5vw, 4rem);
  max-width: min(100%, 70ch);
}
.cta-note {
  font-size: .72rem;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--ink-dim);
  max-width: 40ch;
}

/* ───────────────────────── 8. hero ───────────────────────── */

.sec-hero { padding-top: clamp(2.6rem, 6vw, 5rem); }

.hero-fine {
  margin-top: 1.5rem;
  font-size: .72rem;
  line-height: 1.6;
  letter-spacing: .03em;
  color: var(--ink-dim);
  max-width: 42ch;
}

.proofbox {
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  background: var(--field);
  padding: 1.15rem 1.25rem 1.25rem;
  max-width: min(100%, 68ch);
}
.proofbox-label {
  font-size: .63rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: .85rem;
}
.proofbox pre { overflow-x: auto; }
.proofbox code {
  display: block;
  font-size: .8rem;
  line-height: 1.7;
  color: var(--ink);
  background: none;
  padding: 0;
  white-space: pre;
}
.proofbox-wide { margin-top: 1.4rem; }

/* ───────────────────────── 9. the cost ───────────────────────── */

.tuesday { margin-bottom: clamp(2.4rem, 5vw, 3.4rem); }
.tuesday li {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr);
  gap: .2rem 1rem;
  padding-bottom: 1.6rem;
  max-width: 64ch;
}
.clock {
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--cyan);
  padding-top: .3em;
}
.beat { color: var(--ink-dim); }

.cost-after p { max-width: 60ch; }
.cost-after p + p { margin-top: 1.1rem; }
.cost-punch {
  font-size: clamp(1.2rem, 1rem + .8vw, 1.55rem);
  line-height: 1.35;
  color: var(--cyan);
  margin-block: 1.9rem;
  max-width: 32ch;
}

/* ───────────────────────── 10. steps ───────────────────────── */

.steps { display: grid; gap: clamp(2.4rem, 5vw, 3.6rem); }
.step {
  display: grid;
  grid-template-columns: var(--hang) minmax(0, 1fr);
  align-items: start;
}
.step-n {
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--cyan);
  padding-top: .35em;
}
.step-body { max-width: 62ch; }
.step-body h3 { margin-bottom: .7rem; }
.step-body p { color: var(--ink-dim); }
.step-caveat {
  margin-top: 1.1rem;
  font-size: .93em;
  background: var(--cyan-soft);
  padding: 1rem 1.1rem;
}
/* the later steps step further off the spine */
@media (min-width: 62em) {
  .step:nth-child(2) { margin-left: clamp(0px, 3vw, 3rem); }
  .step:nth-child(3) { margin-left: clamp(0px, 6vw, 6rem); }
}

/* ───────────────────────── 11. the demonstration ───────────────────────── */

.scene { margin-bottom: clamp(2.8rem, 6vw, 4.5rem); }
@media (min-width: 62em) {
  .scene-lead {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(1.8rem, 4vw, 3.4rem);
    align-items: start;
  }
}

.scene-label {
  font-size: .62rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: .8rem;
}
blockquote {
  font-size: clamp(1.15rem, 1rem + .7vw, 1.42rem);
  line-height: 1.36;
  padding-left: 1.05rem;
  text-indent: -.4em;
  border-left: 2px solid var(--cyan);   /* RULE 2 of 4 — quoted speech */
  max-width: 36ch;
}
blockquote::before { content: "\201C"; color: var(--cyan); }
blockquote::after  { content: "\201D"; color: var(--cyan); }
.scene-tool {
  margin-top: .9rem;
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--ink-dim);
}
.scene-wrote { margin-top: 1.8rem; }
@media (min-width: 62em) {
  .scene-lead .scene-wrote { margin-top: 0; }
}

/* the one table on the page, and the one place a ruling helps read it */
.rows li {
  display: grid;
  gap: .15rem;
  padding: .8rem 0;
}
.rows li + li { border-top: 1px solid var(--line); }   /* RULE 3 of 4 */
@media (min-width: 34em) {
  .rows li { grid-template-columns: 5.6rem minmax(0, 1fr); gap: .9rem; }
}
.tag {
  font-size: .61rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--cyan);
  padding-top: .35em;
}
.row-body { color: var(--ink-dim); font-size: .97em; }
.row-body strong { color: var(--ink); }
.scene-foot {
  margin-top: 1.2rem;
  font-size: .88em;
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 58ch;
}

.scene-pair { display: grid; gap: clamp(2.6rem, 5vw, 3.6rem); }
@media (min-width: 62em) {
  .scene-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scene-sm { margin-bottom: 0; }
}
.scene-sm blockquote { font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem); }

.note {
  margin-top: clamp(1rem, 2vw, 2rem);
  background: var(--field);
  padding: clamp(1.3rem, 2.5vw, 1.9rem);
  max-width: min(100%, 70ch);
}
.note h3 { color: var(--cyan); margin-bottom: .7rem; }
.note p { color: var(--ink-dim); }

/* ───────────────────────── 12. reads ───────────────────────── */

.qgrid { display: grid; gap: clamp(2rem, 4vw, 3rem) clamp(2rem, 4vw, 4rem); }
@media (min-width: 54em) {
  .qgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.q {
  font-family: var(--f-dwg);
  font-weight: 600;
  font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem);
  line-height: 1.14;
  color: var(--ink);
  margin-bottom: .6rem;
}
.a { color: var(--ink-dim); font-size: .97em; max-width: 46ch; }

/* ───────────────────────── 13. fit ───────────────────────── */

.fitgrid { display: grid; gap: clamp(1.2rem, 2.5vw, 1.8rem); }
@media (min-width: 54em) {
  .fitgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
.fit { padding: clamp(1.3rem, 2.6vw, 2rem); }
.fit h3 { margin-bottom: 1.1rem; }
.fit-yes { background: var(--cyan-soft); }
.fit-yes h3 { color: var(--cyan); }
.fit-no { background: var(--field); }
.fit li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--ink-dim);
  font-size: .97em;
  line-height: 1.5;
}
.fit li + li { margin-top: .9rem; }
.fit li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--f-mono);
  font-size: .85em;
}
.fit-yes li::before { content: "+"; color: var(--cyan); }
.fit-no li::before { content: "\2013"; color: var(--ink-dim); }
.fit-close {
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--ink-dim);
  max-width: 56ch;
}

/* ───────────────────────── 14. proof ───────────────────────── */

.tier {
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: .68rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  margin-bottom: 1.1rem;
}
.proof-prose {
  margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
  color: var(--ink-dim);
  max-width: 62ch;
}

.numbers { display: grid; gap: clamp(2.4rem, 5vw, 3.4rem); }
@media (min-width: 54em) {
  .numbers li {
    display: grid;
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
  }
}
.fig {
  font-family: var(--f-dwg);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: clamp(3.2rem, 8vw, 6rem);
  line-height: .82;
  letter-spacing: -.025em;
  color: var(--cyan);
  margin-bottom: .8rem;
}
.fig-u {
  display: block;
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: .7rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: .7rem;
  line-height: 1.45;
}
.figbody { color: var(--ink-dim); font-size: .97em; max-width: 58ch; }

.counter {
  margin-top: clamp(2.6rem, 5vw, 4rem);
  background: var(--warn-soft);
  border-left: 2px solid var(--warn);   /* RULE 4 of 4 — the one warning */
  padding: clamp(1.3rem, 2.6vw, 1.9rem);
  max-width: min(100%, 72ch);
}
.counter h3 { color: var(--warn); margin-bottom: .8rem; }
.counter p { color: var(--ink-dim); }
.counter p + p { margin-top: 1rem; }

/* ───────────────────────── 15. status ───────────────────────── */

.status-lead {
  font-size: clamp(1.15rem, 1rem + .7vw, 1.45rem);
  line-height: 1.4;
  color: var(--cyan);
  max-width: 42ch;
  margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem);
}
.status-body { color: var(--ink-dim); max-width: 62ch; }
.status-body + .status-body { margin-top: 1.2rem; }

/* ───────────────────────── 16. limits ───────────────────────── */

.limits { counter-reset: lim; display: grid; gap: clamp(2rem, 4vw, 2.8rem); }
.limits > div {
  counter-increment: lim;
  display: grid;
  grid-template-columns: var(--hang) minmax(0, 1fr);
}
.limits > div::before {
  content: "08." counter(lim);
  grid-column: 1;
  grid-row: 1;
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: .67rem;
  letter-spacing: .08em;
  color: var(--cyan);
  padding-top: .55em;
}
.limits dt {
  grid-column: 2;
  font-family: var(--f-dwg);
  font-weight: 600;
  font-size: clamp(1.18rem, 1rem + .7vw, 1.5rem);
  line-height: 1.14;
  color: var(--ink);
}
.limits dd {
  grid-column: 2;
  margin-top: .6rem;
  color: var(--ink-dim);
  font-size: .97em;
  max-width: 60ch;
}

/* ───────────────────────── 17. faq ───────────────────────── */

.faq { counter-reset: faq; display: grid; gap: clamp(2.4rem, 5vw, 3.6rem); }
.faq article {
  counter-increment: faq;
  display: grid;
  grid-template-columns: var(--hang) minmax(0, 1fr);
}
.faq article::before {
  content: "09." counter(faq, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1;
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: .67rem;
  letter-spacing: .08em;
  color: var(--cyan);
  padding-top: .6em;
}
.faq h3 {
  grid-column: 2;
  font-size: clamp(1.18rem, 1rem + .7vw, 1.48rem);
  line-height: 1.16;
  max-width: 34ch;
}
.faq p {
  grid-column: 2;
  margin-top: .9rem;
  color: var(--ink-dim);
  font-size: .97em;
  max-width: 66ch;
}
/* the three run-in sub-headings inside the first answer do real work — the only
   place on the page that gets a true bold */
.faq strong { color: var(--ink); font-weight: 700; }

/* ───────────────────────── 18. the closing field ───────────────────────── */

/* the page commits: one full-bleed cyan section, everything on it re-pointed
   at the on-cyan pair. --cyan itself is left alone so the button can use it. */
.sec-field {
  background: var(--cyan);
  color: var(--oncyan);
  --ink: var(--oncyan);
  --ink-dim: var(--oncyan-dim);
  --line: var(--oncyan-dim);
  padding-block: clamp(4.5rem, 10vw, 9rem);
}
.sec-field .spine-no { color: var(--oncyan-dim); }
.sec-field h2 { max-width: 17ch; }
.sec-field .section-lede { color: var(--oncyan-dim); }
.sec-field .ask {
  max-width: 58ch;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  color: var(--oncyan);
}
.sec-field .btn {
  background: var(--paper);
  color: var(--cyan);
  font-size: clamp(.8rem, .6rem + .8vw, 1.05rem);
  text-transform: none;
  letter-spacing: .06em;
  padding: 1.1rem 1.7rem;
}
.sec-field .btn:hover { background: var(--paper-2); color: var(--cyan); }
.sec-field :focus-visible { outline-color: var(--paper); }
.capture-note {
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  font-size: .82rem;
  line-height: 1.6;
  color: var(--oncyan-dim);
  max-width: 52ch;
}

/* ───────────────────────── 19. foot ───────────────────────── */

.foot {
  padding: clamp(3rem, 6vw, 4.5rem) var(--er) clamp(3.5rem, 7vw, 5.5rem) var(--el);
  background: var(--paper);
}
.foot-in { max-width: 70ch; }
.foot-brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .8rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 1.1rem;
}
.mark-sm { width: 14px; height: 14px; }
.foot-meta {
  font-size: .86rem;
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 58ch;
}
.foot-meta a { color: var(--cyan); text-decoration: none; }
.foot-meta a:hover { text-decoration: underline; }
.foot-fine { margin-top: .9rem; font-size: .78rem; }

/* ───────────────────────── 20. motion & print ───────────────────────── */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
  .topbar { display: none; }
  .sec > .spine { position: static; }
  .sec-field { background: none; color: inherit; }
}