/* ============================================================================
   canon.css — Digital Concrete (Option A bronze #7C6A38), the canonical
   tokens + shared components for the RESKINNED templates (post.hbs, index.hbs).
   Standalone from the legacy tokens.css/screen.css so old pages are untouched.
   Fonts self-hosted from ../fonts (the /data promise). Body of this file is the
   antigravity-build tokens.css verbatim; only these @font-face blocks are added.
   ============================================================================ */
@font-face{
  font-family:"Fraunces"; src:url("../fonts/Fraunces-VF.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
/* the true italic (3 Sep 2026): until now every italic on the live site was a synthesised
   slant of the roman — the ratified italic adjective on /ark, the captions, the council's
   verdicts. Same opsz+wght axes, same glyph set as the roman, OFL, 77 KB. */
@font-face{
  font-family:"Fraunces"; src:url("../fonts/Fraunces-Italic-VF.woff2") format("woff2");
  font-weight:100 900; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono"; src:url("../fonts/JetBrainsMono-VF.woff2") format("woff2");
  font-weight:100 800; font-style:normal; font-display:swap;
}

/* ============================================================================
   DIGITAL CONCRETE — Third ARK · tokens.css
   The one token source (S-1: pages link this; never duplicate a custom property).
   Values are the ratified law: DESIGN.md v1.1 front-matter + DESIGN-CANON.
   Type scale revised 31 Jul 2026: display + body held (Chairman: "good"),
   mid-tiers enlarged (Chairman: "the medium scales seem too small").
   ========================================================================== */

:root {
  /* ---- THE PAPER REGISTER — the published record ---- */
  --paper: #F9F8F5;
  --stone: #E5E4E2;
  --paper-container: #F3F2EE;
  --ink: #211A14;
  --ink-2: #534438;
  --rule: #C9C4BC;

  /* ---- THE MACHINE REGISTER — the working room ---- */
  --machine-black: #0D0D0D;
  --machine-raised: #1C1B1B;
  --machine-pane: #201F1F;
  --machine-border: #2A2A2A;
  --machine-ink: #E5E2E1;
  --machine-ink-2: #9A8F84;

  /* ---- BRONZE — inverts across registers (darker on paper, lighter on machine) ---- */
  --bronze-paper: #7C6A38;   /* Option A · Antique Brass (Chairman, reaffirmed 7 Aug 2026) */
  --bronze-paper-rule: #7C6A38;
  --bronze-paper-hover: #5A4A28;
  --bronze-machine: #C09A6B;
  --bronze-machine-deep: #A0784A;
  --on-bronze: #F9F8F5;

  /* ---- STATES ---- */
  --dead-grey: #7B7B7B;   /* broken cryptographic states only */
  --error: #BA1A1A;       /* destructive states only */

  /* ---- THE TWO VOICES ---- */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- TYPE SCALE ----
     display + body-lg + body held per Chairman; mid-tiers pushed up. */
  --t-display:    clamp(46px, 9vw, 104px);    /* hero — large but not overpowering (Chairman: 128 "a bit big"); floors near the 44px mobile token */
  --t-display-2:  clamp(38px, 4.6vw, 64px);   /* carousel frame heads */
  --t-stance:     clamp(30px, 4vw, 44px);     /* the stance quote (DESIGN.md #6) */
  --t-headline:   clamp(36px, 4.4vw, 52px);   /* section headlines / the ask */
  --t-cardtitle:  clamp(29px, 2.7vw, 35px);   /* ledger card titles — BUMPED (was 26px) */
  --t-subhead:    22px;                        /* sub-heads — BUMPED (was ~18px) */
  --t-body-lg:    20px;                        /* held */
  --t-body:       18px;                        /* ledger body — nudged (was 17px) */
  --t-body-sm:    16px;                        /* held */


  /* ---- THE FRAUNCES LADDER — RATIFIED 1 Sep 2026 (Chairman: Formula A) ----
     One ratio, √2: every second step is exactly half. 104 · 74 · 52 · 37 · 26 · 18.
     Weight: 700 to the section head, then one notch per step (600 · 500 · 450);
     never 900, never below 450 on paper. Roles: display (the page's one headline),
     headline (big frame/panel heads), title (section heads, the stance, the ask),
     deck (the line under a headline; verdicts), pull (statements, closing thoughts),
     item (card/shelf titles), body. Exceptions ruled with it: the footer motto stays
     22/700 as built; the 404's numeral and in-demo specimen type sit outside the ladder.
     The --t-* names above are the legacy scale; new work uses the --f-* roles. */
  --f-display:  clamp(46px, 9vw, 104px);
  --f-headline: clamp(38px, 6.4vw, 74px);
  --f-title:    clamp(32px, 4.5vw, 52px);
  --f-deck:     clamp(24px, 3.2vw, 37px);
  --f-pull:     clamp(21px, 2.25vw, 26px);
  --f-item:     clamp(21px, 2.25vw, 26px);
  --f-body-lg:  20px;
  --f-body:     18px;
  --f-body-sm:  16px;
  --w-display: 700; --w-headline: 700; --w-title: 700; --w-deck: 600; --w-pull: 500; --w-item: 600; --w-body: 450;
  --lh-display: .96; --lh-headline: 1.0; --lh-title: 1.05; --lh-deck: 1.18; --lh-pull: 1.4; --lh-item: 1.25; --lh-body: 1.6;
  --ls-display: -.03em; --ls-headline: -.025em; --ls-title: -.02em; --ls-deck: -.01em; --ls-pull: 0em; --ls-item: -.005em; --ls-body: 0em;

  /* ---- MONO TIERS ---- */
  --m-label: 13px;   /* labels, 0.05em tracking */
  --m-data:  14px;   /* hashes, data */
  --m-eyebrow: 11px; /* serial lines, eyebrows */

  /* ---- STRUCTURE ---- */
  --unit: 8px;
  --rule-w: 1px;
  --stroke-heavy: 2px;
  --stroke-monument: 4px;
  --edge: 24px;        /* page margin — where the grid rules sit */
  --gutter: 28px;      /* clear space between a grid rule and the text inside it */
  --shell: 1280px;
}

/* ============================================================================
   RESET + GROUND
   ========================================================================== */
* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: var(--t-body-sm);
  font-weight: var(--w-body);   /* the ladder's reading weight; dark pages return to 400 */
  line-height: 1.6;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  orphans: 3;
  widows: 3;
}

/* Grain on every ground — one tileable texture, multiply, low opacity (DESIGN.md #9) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--bronze-paper); }

img { max-width: 100%; display: block; }

/* ============================================================================
   SHARED STRUCTURE
   ========================================================================== */
/* The content column: the grid rules sit at --edge; the text sits a further
   --gutter inside, so nothing ever touches a line. Nav + footer share the inset
   so every left edge aligns down the page. */
.wrap { max-width: var(--shell); margin: 0 auto; padding: 0 calc(var(--edge) + var(--gutter)); }

/* THE VISIBLE LEDGER GRID (DESIGN.md #7) — full-height 1px bronze rules bounding
   the content zone. Per-segment (seg-grid): each section draws its own hairline
   pair spanning its own box. Positioned with 50% (never 50vw) so the rules sit on
   the content grid, not offset by the scrollbar (the G-1 fix). Rules sit at --edge;
   content half-width to a rule at the 1280 cap = 1280/2 − 24 = 616px. */
.grid { position: relative; }
.grid::before, .grid::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--bronze-paper-rule); z-index: 1; pointer-events: none;
}
.grid::before { left:  max(var(--edge), calc(50% - 616px)); }
.grid::after  { right: max(var(--edge), calc(50% - 616px)); }
/* per-segment adaptation — open one side (or none) */
.grid.g-left::after   { content: none; }   /* left rule only  */
.grid.g-right::before  { content: none; }   /* right rule only */
.grid.g-none::before,
.grid.g-none::after    { content: none; }   /* no side rules   */

/* Ledger heading rule: mono label left, meta right, 2px ink underscore */
.ledger-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  border-bottom: var(--stroke-heavy) solid var(--ink);
  padding-bottom: 14px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
}
.ledger-head .meta { color: var(--ink-2); font-size: var(--m-eyebrow); }

.mono { font-family: var(--mono); }
.eyebrow {
  font-family: var(--mono); font-size: var(--m-eyebrow);
  letter-spacing: .16em; text-transform: uppercase; color: var(--bronze-paper);
}

/* ============================================================================
   COMPONENTS
   ========================================================================== */

/* Buttons on paper are INK (DESIGN.md #3). Hover = binary invert via inset stroke
   (the one permitted box-shadow technique, DESIGN.md #4). */
.btn-ink {
  display: inline-block;
  font-family: var(--mono); font-size: var(--m-data); font-weight: 700; letter-spacing: .05em;
  background: var(--ink); color: var(--paper);
  padding: 16px 30px; border: 0; cursor: pointer;
  transition: none;
}
.btn-ink:hover {
  background: var(--paper); color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
}

/* Nav CTA is the bronze-stroke secondary (DESIGN.md #3) */
.btn-secondary {
  display: inline-block;
  font-family: var(--mono); font-size: var(--m-label); font-weight: 700; letter-spacing: .05em;
  background: none; color: var(--ink);
  border: 1px solid var(--bronze-paper-rule); padding: 7px 17px;
}
.btn-secondary:hover {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}

/* Quiet inline link with a bronze underscore */
.btn-link {
  font-family: var(--mono); font-size: var(--m-label); letter-spacing: .04em;
  border-bottom: 1px solid var(--bronze-paper-rule); padding-bottom: 3px;
}

/* Framed proof container — corner registration marks + hairline frame */
.frame { position: relative; border: 1px solid var(--bronze-paper-rule); }
.frame .rm { position: absolute; font-family: var(--mono); font-size: 15px; color: var(--bronze-paper-rule); }
.frame .rm.tl { top: 12px; left: 14px; }
.frame .rm.tr { top: 12px; right: 14px; }
.frame .rm.bl { bottom: 12px; left: 14px; }
.frame .rm.br { bottom: 12px; right: 14px; }

/* ============================================================================
   NAV
   ========================================================================== */
.nav { position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: 1px solid var(--bronze-paper-rule); }
.nav-inner { max-width: var(--shell); margin: 0 auto; padding: 18px calc(var(--edge) + var(--gutter)) 16px; display: flex; align-items: baseline; gap: 1.6rem; }
.nav-wordmark { display: flex; align-items: baseline; gap: .55rem; font-family: var(--mono); font-weight: 500; font-size: 15px; letter-spacing: .05em; white-space: nowrap; color: var(--ink); }
.nav-wordmark img { height: 17px; width: auto; transform: translateY(2px); }
/* wordmark set as a scheme: THIRD-ARK:// — one flex item so the :// hugs the name */
.nav-wordmark .wm { display: inline; }
.nav-wordmark .proto { color: var(--bronze-paper); }
.nav-links { display: flex; gap: 1.5rem; margin-left: auto; font-family: var(--mono); font-size: var(--m-label); font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }
.nav-links a { color: var(--ink-2); padding: 6px 0; border-bottom: 2px solid transparent; }
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--ink); border-bottom-color: var(--bronze-paper); }
/* the nav CTA's right edge lands ON the grid line (a gutter outside the content edge) */
.nav .btn-secondary { margin-right: calc(-1 * var(--gutter)); }

/* ============================================================================
   FOOTER (shared chrome — every page links this; S-1: not duplicated per page)
   ========================================================================== */
.foot { background: var(--paper); border-top: 1px solid var(--bronze-paper-rule); }
.foot-inner { max-width: var(--shell); margin: 0 auto; padding: 40px calc(var(--edge) + var(--gutter)) 20px; display: grid; }
.foot-top { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 1.8rem; border-bottom: 1px solid var(--rule); padding-bottom: 18px; }
.foot-nav { display: flex; gap: 1.8rem; flex-wrap: wrap; justify-self: end; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.foot-nav a { color: var(--ink-2); }
.foot-big { text-align: center; padding: 64px 0 72px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.foot-seal { text-align: center; border-top: 1px solid var(--rule); padding-top: 18px; font-family: var(--mono); font-size: 11px; color: var(--ink-2); letter-spacing: .06em; line-height: 1.9; }

/* ============================================================================
   MACHINE REGISTER — the full-page dark mode (manifesto + machine surfaces).
   body.dark-page flips the shared paper chrome to the machine palette without
   forking the nav/footer markup. Bronze inverts lighter on machine (DESIGN.md #2).
   ========================================================================== */
body.dark-page { background: var(--machine-black); color: var(--machine-ink); font-weight: 400; }
body.dark-page::before { mix-blend-mode: overlay; }   /* grain reads on dark via overlay, not multiply */
.dark-page a { color: var(--machine-ink); }
.dark-page a:hover { color: var(--bronze-machine); }
.dark-page .eyebrow { color: var(--bronze-machine); }
/* nav */
.dark-page .nav { background: var(--machine-black); border-bottom-color: var(--bronze-machine-deep); }
.dark-page .nav-wordmark { color: var(--machine-ink); }
.dark-page .nav-wordmark .proto { color: var(--bronze-machine); }
.dark-page .nav-links a { color: var(--machine-ink-2); }
.dark-page .nav-links a:hover { color: var(--machine-ink); }
.dark-page .nav-links a.active { color: var(--machine-ink); border-bottom-color: var(--bronze-machine); }
.dark-page .btn-secondary { color: var(--machine-ink); border-color: var(--bronze-machine-deep); }
.dark-page .btn-secondary:hover { background: var(--bronze-machine); color: var(--machine-black); border-color: var(--bronze-machine); }
.dark-page .btn-ink { background: var(--bronze-machine); color: var(--machine-black); }
.dark-page .btn-ink:hover { background: var(--machine-black); color: var(--bronze-machine); box-shadow: inset 0 0 0 2px var(--bronze-machine); }
/* footer */
.dark-page .foot { background: var(--machine-black); border-top-color: var(--bronze-machine-deep); }
.dark-page .foot-top { border-bottom-color: var(--machine-border); }
.dark-page .foot-nav a { color: var(--machine-ink-2); }
.dark-page .foot-nav a:hover { color: var(--bronze-machine); }
.dark-page .foot-seal { color: var(--machine-ink-2); border-top-color: var(--machine-border); }

/* ============================================================================
   MOTION — budget of two (DESIGN.md #8). prefers-reduced-motion → static.
   ========================================================================== */
@keyframes strike-a { from { transform: translateY(5px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes strike-b { from { transform: translateY(5px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes seal-strike { from { transform: rotate(-3deg) scale(1.04); opacity: 0; } to { transform: rotate(-.5deg) scale(1); opacity: 1; } }
@keyframes thread-draw { from { stroke-dashoffset: 520; } to { stroke-dashoffset: 0; } }

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

/* ============================================================================
   THE TIE — a labelled stanza grounded to the ledger grid (Chairman, 3 Sep 2026).
   A 1px bronze line leaves the left grid rule, passes through the key word (the
   word knocks it out on its own ground), runs on at the same height to the stanza,
   and the stanza carries a heavier vertical bronze stroke down its left edge, met
   at a right angle where the line arrives. Number → rule → line → word → line → ┬ stanza.
   Used by /ark (the four modes) and /passport (the three stages). The page sets
   --tie-col (the word column) and --tie-ground (the section's ground colour).
   ========================================================================== */
.tie { position: relative; display: grid; grid-template-columns: var(--tie-col, 7rem) minmax(0, 1fr); gap: 0 2rem; align-items: start; }
.tie::before {
  content: ""; position: absolute; top: 0; height: 1px; background: var(--bronze-paper-rule);
  left: calc(-1 * var(--pcol-pad, 48px)); width: calc(var(--pcol-pad, 48px) + var(--tie-col, 7rem) + 2rem);
}
.tie .k {
  position: relative; z-index: 1; width: fit-content; max-width: 100%;
  line-height: 1; margin-top: -.5em; padding: 0 12px 0 8px; margin-left: -8px;
  background: var(--tie-ground, var(--paper));
}
.tie .body { border-left: var(--stroke-heavy) solid var(--bronze-paper); padding: 6px 0 2px 1.4rem; margin: 0; }
@media (max-width: 1200px) {
  /* one column: the line becomes a short leader from the page edge to the word; the stroke keeps the stanza */
  .tie { grid-template-columns: 1fr; gap: 0; }
  .tie::before { width: var(--pcol-pad, 48px); }
  .tie .body { margin-top: 16px; }
}

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  :root { --edge: 20px; --gutter: 20px; }
  /* Mobile nav: the links stay — they wrap onto their own ruled row under the
     wordmark (no hamburger; the register is a ledger, not an app drawer). */
  .nav-inner { flex-wrap: wrap; row-gap: 8px; padding-bottom: 10px; }
  .nav .btn-secondary { margin-left: auto; order: 2; }
  .nav-links { order: 3; flex-basis: 100%; flex-wrap: wrap; gap: 0 1.1rem; row-gap: 2px; border-top: 1px solid var(--rule); padding-top: 8px; }
  .dark-page .nav-links { border-top-color: var(--machine-border); }
}

/* ============================================================================
   THE MOBILE REGISTER (Chairman, 3 Sep 2026: "not enough room for all that text
   to breathe"). One record, two registers of CSS — never a second site: the
   sealed text is identical on every device, only its setting changes.
   1 · The ladder steps down one notch below the display tiers (display/headline/
       title already scale with the viewport; deck/pull/item/body did not).
   2 · Locked line breaks reflow. A break is content at desktop width; on a phone
       column it is a ragged orphan. Breaks inside body/deck/pull copy hide below
       640px (the markup carries a space before every in-paragraph <br>, so the
       sealed text is unchanged either way). Display headlines keep their breaths.
       Opt a paragraph out with class="lock"; opt a single break out with br.keep.
   3 · Six nav links on one ruled row at phone width.
   ========================================================================== */
@media (max-width: 640px) {
  :root {
    --f-deck: 22px; --f-pull: 19px; --f-item: 20px; --f-body-lg: 18px; --f-body: 17px;
    --lh-deck: 1.25; --lh-pull: 1.45;
    --t-cardtitle: 24px; --t-subhead: 20px; --t-body: 17px;
  }
  p br, li br, .stand br { display: none; }
  p.lock br, .lock br, br.keep { display: inline; }
  /* section-head rules: label and meta may wrap onto two lines rather than touch */
  .ledger-head, .phead { flex-wrap: wrap; gap: 4px 16px; }
}
@media (max-width: 480px) {
  :root { --edge: 16px; --gutter: 14px; }
  /* the display floor drops from 46 to 40 on a phone so a locked breath like
     "on your machine." still fits its line (the breaks in a display are content) */
  :root { --f-display: 40px; --t-display: 40px; }
  .nav-links { font-size: 11.5px; letter-spacing: .03em; gap: 0 .5rem; justify-content: space-between; }
}