/* ==========================================================================
   Axions — Observations (long-form reading register).
   Warm-paper "document" side of the DS. Consumes the design-system tokens
   directly (no mirrored :root): fonts, colours, type scale, spacing, effects
   all come from tokens/*.css. Light register throughout.
   Synced to Axions DS v1.2.0.
   ========================================================================== */

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper-0);
  color:var(--ink-reading-light);
  font-family:var(--font-body);
  font-size:var(--text-body);
  line-height:var(--leading-reading);
  font-weight:var(--weight-regular);
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;}

/* ---- Masthead (sticky paper) ---- */
nav{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--border-subtle-light);background:var(--paper-0);}
/* 0.82 let reading text read through the sticky bar (the same defect site.css had at 0.72 on the
   dark register). 0.94 keeps a trace of the blur while the bar stays opaque enough to read past.
   Now the documented DS token --paper-0-nav (v1.3.0) rather than the literal. */
@supports (backdrop-filter:blur(1px)){nav{background:var(--paper-0-nav);backdrop-filter:saturate(1.4) blur(14px);}}
nav .bar{max-width:var(--container-max);margin:0 auto;padding-inline:var(--margin);height:72px;display:flex;align-items:center;justify-content:space-between;}
nav img{height:40px;display:block;width:auto;}
nav .back{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:0.04em;color:var(--ink-2-light);text-decoration:none;transition:color var(--motion-state) var(--ease-default);
  /* 23px tall was the only sub-44px tap target on these pages, and it is the sole way back. */
  display:inline-flex;align-items:center;min-height:46px;}
nav .back:hover{color:var(--ink-0-light);}

/* ---- Reading column ---- */
.measure{max-width:680px;margin:0 auto;padding:0 var(--margin);}
header.essay{position:relative;padding:var(--space-10) 0 var(--space-6);border-bottom:1px solid var(--border-subtle-light);overflow:hidden;}
/* one soft ambient teal halo — life, not elevation (effects.css) */
header.essay::before{content:"";position:absolute;top:-38%;right:-8%;width:min(560px,72%);aspect-ratio:1;background:var(--halo-ambient-soft);pointer-events:none;z-index:0;}
header.essay .measure{position:relative;z-index:1;}
.eyebrow{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--teal-on-light);margin-bottom:var(--space-5);}
h1.title{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--fs-statement);line-height:var(--leading-display);letter-spacing:var(--tracking-display);color:var(--ink-0-light);}
.standfirst{font-family:var(--font-body);font-size:var(--fs-lede);line-height:var(--leading-lede);color:var(--ink-2-light);margin-top:var(--space-5);max-width:34ch;}
/* Legal / document pages: effective-date meta + inline links (essays have no inline links) */
.doc-date{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:0.04em;color:var(--ink-2-light);margin-top:var(--space-4);}
article a{color:var(--link-light);text-decoration:underline;text-underline-offset:0.14em;text-decoration-thickness:1px;transition:color var(--motion-state) var(--ease-default);}
article a:hover{color:var(--teal-deep);}

article{padding:var(--space-8) 0 var(--space-7);}
/* opening paragraph reads as a standfirst */
article > .measure > p:first-child{font-size:var(--fs-lede);line-height:var(--leading-lede);color:var(--ink-1-light);margin-bottom:var(--space-6);}
article h3{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--fs-h3);letter-spacing:-0.01em;color:var(--ink-0-light);margin:var(--space-8) 0 var(--space-4);line-height:var(--leading-h3);}
article p{margin:0 0 var(--space-5);}
article p.runin strong{color:var(--ink-0-light);}
article .pull{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--fs-pull);line-height:var(--leading-h2);letter-spacing:-0.01em;color:var(--ink-0-light);margin:var(--space-7) 0;padding-left:var(--space-5);border-left:3px solid var(--teal-on-light);}
article em{font-style:italic;}
.byline{font-size:var(--fs-body-sm);color:var(--ink-2-light);border-top:1px solid var(--border-subtle-light);padding-top:var(--space-6);margin-top:var(--space-5);font-style:italic;}

/* ---- Read-on / CTA footer ---- */
.more{border-top:1px solid var(--border-subtle-light);background:var(--paper-1);padding:var(--space-9) 0 var(--space-10);margin-top:var(--space-7);}
.more .eyebrow{margin-bottom:var(--space-5);}
.more-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-bottom:var(--space-8);}
@media(max-width:640px){.more-grid{grid-template-columns:1fr;}}
.more-card{display:block;background:var(--paper-0);border:1px solid var(--border-subtle-light);border-radius:var(--radius-card);padding:var(--space-5);text-decoration:none;transition:transform var(--motion-state) var(--ease-default);}
.more-card:hover{transform:var(--lift);}
.more-card .no{font-family:var(--font-mono);font-size:var(--fs-label-sm);color:var(--teal-on-light);letter-spacing:var(--tracking-eyebrow);display:block;margin-bottom:var(--space-3);}
.more-card .t{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--fs-h5);color:var(--ink-0-light);line-height:var(--leading-h3);}
.more .ask{font-family:var(--font-body);font-size:var(--fs-lede);line-height:var(--leading-lede);color:var(--ink-0-light);max-width:48ch;margin-bottom:var(--space-5);}
.cta-row{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center;}
.btn{font-family:var(--font-body);font-size:var(--fs-ui);font-weight:var(--weight-semibold);padding:13px var(--space-5);border-radius:var(--radius-md);text-decoration:none;display:inline-block;white-space:nowrap;transition:background var(--motion-state) var(--ease-default),color var(--motion-state) var(--ease-default);}
.btn-primary{background:var(--teal-on-light);color:var(--white);}
.btn-primary:hover{background:var(--teal-deep);}
.btn-ghost{color:var(--teal-on-light);border:1px solid rgba(13,111,94,.4);}
.btn-ghost:hover{background:rgba(13,111,94,.08);}

:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset);}

/* ---- Widescreen: use the canvas — a bolder title and a slightly wider column
   so the essay reads shorter, without pushing line length past comfort ---- */
@media(min-width:1200px){
  .measure{max-width:720px;}
  header.essay .measure{max-width:1080px;}
  header.essay h1.title{max-width:20ch;}
  .more .measure{max-width:1080px;}
  .more-grid{grid-template-columns:repeat(4,1fr);}
  /* --fs-statement caps at 3.4rem, reached at ~1209px, so the essay title was the same 54.4px at
     1280 and at 2576 while the canvas grew twice as wide. The reading column is deliberately NOT
     widened (65ch is correct for long-form) — the title carries the scale instead. */
  header.essay h1.title{font-size:clamp(3rem,4.2vw,5rem);}
}
@media(min-width:1600px){
  .measure{max-width:740px;}
  header.essay .measure{max-width:1180px;}
}

/* ---- Phone refinement (mirrors site.css ≤600px pass) ---- */
@media(max-width:600px){
  header.essay{padding:var(--space-8) 0 var(--space-6);}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition-duration:0.001ms !important;}
}