/* ==========================================================================
   BUT FOR · EDITORIAL SYSTEM
   The single stylesheet behind every editorial and legal surface:
   about.html, terms.html, privacy.html, and the generated report.html.

   landing.html is the reference implementation of the house system; this
   file is its editorial dialect, kept in one place so the two can never
   silently fork again (they had, four ways, before August 5 2026).
   Only genuinely page-specific components live inline on their own page:
   about's rules/gates/plain/colophon, the report's corroboration chips and
   capture blocks, the legal pages' denser heading scale.
   ========================================================================== */

/* ---------- Tokens: one colour, one name ---------- */
:root{
  --paper:#f7f4ec;        /* page ground */
  --paper-2:#f1ebdc;      /* recessed ground: gates, capture (was --wash here, a raw hex there) */
  --card:#fcfaf4;         /* input + card ground */
  --ink:#141519;          /* headings, rules, emphasis */
  --ink-body:#2b2d26;     /* running body copy (was a raw hex on both pages) */
  --ink-dim:#4a4c43;
  --ink-faint:#63655a;
  --ivory:#f3efe6;        /* type on ink grounds */
  --oxblood:#b23a35; --oxblood-deep:#8e2723;
  --gold:#7f6125; --gold-bright:#c9a24b;
  --hair-2:rgba(20,21,25,.24);
  --hair-strong:rgba(20,21,25,.55);
  --serif:'Fraunces',Georgia,serif;
  --mono:'Spline Sans Mono',ui-monospace,monospace;
  --sans:'Archivo',system-ui,sans-serif;
  --rail:760px;           /* the article rail — masthead and footer share it */
  --gutter:clamp(20px,4vw,40px);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.7;
  -webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--oxblood-deep);outline-offset:3px}
p,li{text-wrap:pretty}
h1,h2,h3,blockquote,.stand{text-wrap:balance}
[id]{scroll-margin-top:5rem}

/* Skip link — visible on keyboard focus only */
.skip{position:fixed;top:.75rem;left:50%;transform:translate(-50%,calc(-100% - 1.5rem));z-index:100;
  background:var(--ink);color:var(--ivory);padding:.65rem 1.1rem;font-family:var(--mono);font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:transform .2s}
.skip:focus-visible{transform:translate(-50%,0);outline-offset:0;outline-color:var(--gold-bright)}

/* ---------- Masthead ---------- */
/* rgba() first: color-mix() alone renders a fully transparent bar (article text
   scrolling under it) on Safari <16.2, Chrome <111, Firefox <113. */
.mast{position:sticky;top:0;z-index:5;background:rgba(247,244,236,.88);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair-2)}
@supports (background:color-mix(in srgb, red 50%, transparent)){
  .mast{background:color-mix(in srgb,var(--paper) 88%,transparent)}
}
.mast-in{max-width:var(--rail);margin:0 auto;padding:.35rem var(--gutter);
  display:flex;justify-content:space-between;align-items:center;gap:1rem}
.wordmark{display:inline-flex;align-items:center;min-height:2.75rem;
  font-family:var(--serif);font-weight:700;font-size:1.15rem;color:var(--ink);text-decoration:none}
.wordmark i{font-style:normal;color:var(--oxblood)}
.mast a.quiet{display:inline-flex;align-items:center;min-height:2.75rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);
  text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--hair-strong);
  text-underline-offset:.5em;transition:color .2s,text-decoration-color .2s;text-align:right}
.mast a.quiet:hover{color:var(--oxblood-deep);text-decoration-color:var(--oxblood-deep)}
/* Below ~400px the longest quiet label ("Take the calibration") would wrap to
   two lines beside the wordmark; tightening the tracking keeps it on one. */
@media (max-width:400px){ .mast a.quiet{font-size:.66rem;letter-spacing:.1em} }

/* ---------- Article ---------- */
main{max-width:var(--rail);margin:0 auto;padding:clamp(40px,7vw,72px) var(--gutter) 0}
.kick{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);line-height:1.8}
h1{font-family:var(--serif);font-weight:600;font-size:clamp(1.9rem,1.4rem + 2.6vw,3.1rem);
  line-height:1.12;margin:.7rem 0 0;max-width:24ch}
.stand{margin:1.4rem 0 0;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.05rem,1rem + .5vw,1.25rem);color:var(--ink-dim);line-height:1.55;max-width:58ch}
h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.3rem,1.15rem + .8vw,1.65rem);
  line-height:1.25;margin:2.6rem 0 0;max-width:36ch}
h3{font-family:var(--serif);font-weight:600;font-size:1.25rem;line-height:1.3;max-width:34ch}
p{margin:1.05rem 0 0;color:var(--ink-body);max-width:70ch}
ul{margin:1.05rem 0 0;padding-left:1.2rem;max-width:68ch}
li{margin-top:.5rem;color:var(--ink-body)}
strong{color:var(--ink)}
blockquote{margin:1.3rem 0 0;border-left:2px solid var(--oxblood);padding:.15rem 0 .15rem 1.1rem}
blockquote p{color:var(--ink-dim);font-family:var(--serif);font-size:1.02rem}
.rule{border:0;border-top:2px solid var(--ink);margin:2.2rem 0}

/* Prose links: never colour alone — #8e2723 against #2b2d26 body ink is 1.6:1 */
main p a,main li a,.plain a,.bench a{color:var(--oxblood-deep);text-decoration:underline;
  text-decoration-thickness:1px;text-decoration-color:var(--hair-strong);text-underline-offset:.25em}
main p a:hover,main li a:hover,.plain a:hover,.bench a:hover{text-decoration-color:var(--gold)}

/* The closing pointer back to the bench */
.bench{margin:2.2rem 0 0;padding:1.2rem 0 0;border-top:1px solid var(--hair-2);
  color:var(--ink-dim);font-size:.95rem;max-width:70ch}

/* ---------- Footer ---------- */
footer{margin-top:3.5rem;border-top:1px solid var(--hair-2)}
.foot-in{max-width:var(--rail);margin:0 auto;padding:1.4rem var(--gutter) 2.6rem;
  font-size:.82rem;color:var(--ink-faint);line-height:1.75}
/* The element-level p rule would otherwise repaint the footer in body ink */
.foot-in p{color:inherit}
.foot-note{margin:0;max-width:70ch}
.foot-links{margin:.9rem 0 0;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;line-height:2.4}
/* Bigger target, zero layout cost: the padding is cancelled by an equal negative margin */
.flink{color:var(--ink-dim);text-decoration:underline;text-decoration-thickness:1px;
  text-decoration-color:var(--hair-strong);text-underline-offset:.35em;
  display:inline-block;padding:.3rem .15rem;margin:-.3rem -.15rem;
  transition:color .2s,text-decoration-color .2s}
.flink:hover{color:var(--ink);text-decoration-color:var(--gold)}
.fmail{color:var(--ink-dim)}