@charset "UTF-8";
/* ==========================================================================
   ABSOLUTE AWARENESS — stylesheet
   --------------------------------------------------------------------------
   Brand:  Public Sans · Blue #006DB5 / #00A1E4 · Graphite #1B1E23 · Bone #F4F3F0
   No build step, no preprocessor, no framework. Plain CSS.

   THIS FILE IS scaletimedynamics.com/styles.css WITH FOUR CHANGES.
   Everything else — the type scale, the spacing scale, the layout, the header,
   the footer, the cards, the contents rail — is identical, so the two files can
   be diffed against each other and a fix applied to both.

     1. Section 2 — the accent tokens carry the blue family instead of
                    turquoise, and --brand-turquoise is now --brand-blue.
     2. Section 2 — two new tokens, --btn-fill and --btn-label, for filled
                    buttons. See the note beside them.
     3. Section 6 — the wordmark is the Ring lockup, not the Scale-Time
                    Dynamics img + <i> + <b> lockup.
     4. Sections 5, 9, 12 — the three places that fill a shape and set white on
                    it now read --btn-fill rather than --accent-brand.

   The blue values are the identity's own, carried over unchanged: each is the
   sRGB rendition of a plain cyan + magenta build, so screen and press agree.

   CONTENTS
     1. Fonts
     2. Colour & size tokens          ← change colours here, once
     3. Reset
     4. Typography
     5. Layout helpers
     6. Header & navigation
     7. Footer
     8. Hero
     9. Buttons
    10. Cards
    11. Prose (article & page text)
    12. Audio player
    13. Resource grid
    14. Table of contents
    15. Home page
    16. Numbered grid  (".axioms" on the other site; here, the practice)
    17. About page
    18. Contact page
    19. Legal pages
    20. 404
   ========================================================================== */


/* ==========================================================================
   1. FONTS
   Public Sans, self-hosted from /fonts. Nothing is requested from Google.
   ========================================================================== */

@font-face {
  font-family: 'Public Sans';
  src: url('fonts/public-sans.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Public Sans';
  src: url('fonts/public-sans-italic.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}


/* ==========================================================================
   2. TOKENS
   Every colour and size the site uses. Change a value here and it changes
   everywhere. The dark theme is the same list of names with different values.
   ========================================================================== */

:root {
  /* --- Brand constants (identical in both themes) --- */
  --brand-blue: #00a1e4;      /* C100 M0 Y0 K0 — process cyan */
  --brand-graphite: #1b1e23;
  --brand-bone: #f4f3f0;

  /* --- Light theme --- */
  --bg: #f4f3f0;
  --bg-sunken: #eceae5;
  --surface: #ffffff;
  --surface-2: #f9f8f6;

  --text: #1b1e23;
  --text-muted: #5c6169;
  --text-faint: #868b93;

  --line: #dedbd4;
  --line-strong: #c8c4bb;

  --accent: #006db5;          /* C100 M50 Y0 K0 — links, 4.9:1 on bone */
  --accent-hover: #00558e;
  --accent-brand: #006db5;    /* rules, decoration */
  --accent-soft: rgba(0, 161, 228, 0.10);

  /* Filled buttons, both themes. White labels need a fill at or below 0.183
     luminance to clear AA — the bright cyan is 0.311, where white lands at
     2.9:1. C100 M50 is the deepest of the blue family and carries white at
     5.5:1. Deliberately not theme-dependent: label contrast is a property of
     the button, not of the page behind it. */
  --btn-fill: #006db5;
  --btn-label: #ffffff;

  --header-bg: rgba(244, 243, 240, 0.85);
  --shadow-s: 0 1px 2px rgba(27, 30, 35, .05), 0 2px 8px rgba(27, 30, 35, .04);
  --shadow-m: 0 2px 4px rgba(27, 30, 35, .05), 0 12px 32px rgba(27, 30, 35, .08);
  --selection: rgba(0, 161, 228, .22);

  /* --- Type --- */
  --font: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;

  /* Fluid sizes: min at 320px wide, max at ~1400px, no media queries needed */
  --size--1: clamp(0.83rem, 0.80rem + 0.14vw, 0.92rem);
  --size-0:  clamp(1.03rem, 1.00rem + 0.16vw, 1.14rem);
  --size-1:  clamp(1.19rem, 1.13rem + 0.30vw, 1.38rem);
  --size-2:  clamp(1.42rem, 1.31rem + 0.55vw, 1.79rem);
  --size-3:  clamp(1.72rem, 1.51rem + 1.03vw, 2.42rem);
  --size-4:  clamp(2.07rem, 1.71rem + 1.79vw, 3.27rem);
  --size-5:  clamp(2.49rem, 1.90rem + 2.95vw, 4.42rem);

  /* --- Spacing --- */
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.25rem;
  --space-xl:  3.5rem;
  --space-2xl: 5rem;

  /* --- Measurements --- */
  --measure: 68ch;        /* comfortable reading width */
  --container: 74rem;
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 14px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  color-scheme: light dark;
}

/* --- Dark theme -----------------------------------------------------------
   Applied automatically when the visitor's system is set to dark. There is
   no switch and no JavaScript: the browser tells us, we respond.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171b;
    --bg-sunken: #101317;
    --surface: #1b1e23;
    --surface-2: #22262c;

    --text: #e9e7e2;
    --text-muted: #a2a8b0;
    --text-faint: #767d86;

    --line: #2c3138;
    --line-strong: #3b414a;

    --accent: #00a1e4;        /* C100 M0 — lighter so it passes on graphite */
    --accent-hover: #4cc3f2;
    /* Unlike the turquoise it replaces, the deep blue cannot carry over to the
       dark theme as decoration: #006DB5 on #14171B is 2.5:1, too dark to see.
       The bright cyan takes its place here. Filled buttons do not follow —
       they stay on --btn-fill, which is why that token exists. */
    --accent-brand: #00a1e4;
    --accent-soft: rgba(0, 161, 228, .16);

    --header-bg: rgba(20, 23, 27, .85);
    --shadow-s: 0 1px 2px rgba(0, 0, 0, .22);
    --shadow-m: 0 2px 6px rgba(0, 0, 0, .20), 0 14px 40px rgba(0, 0, 0, .28);
    --selection: rgba(33, 188, 239, .28);
  }
}


/* ==========================================================================
   3. RESET
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--size-0);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

main { flex: 1; }

::selection { background: var(--selection); }

img, picture, svg, video { display: block; max-width: 100%; height: auto; }

a {
  color: var(--accent);
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  transition: color .15s var(--ease);
}
a:hover { color: var(--accent-hover); }

:focus-visible {
  outline: 2px solid var(--accent-brand);
  outline-offset: 3px;
  border-radius: 2px;
}

hr { border: 0; height: 1px; background: var(--line); }


/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.022em;
  text-wrap: balance;
}

h1 { font-size: var(--size-4); font-weight: 800; }
h2 { font-size: var(--size-2); }
h3 { font-size: var(--size-1); }

p { text-wrap: pretty; }


/* ==========================================================================
   5. LAYOUT HELPERS
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.section       { padding-block: clamp(var(--space-l), 5.5vw, var(--space-2xl)); }
.section-roomy { padding-block: clamp(var(--space-xl), 8vw, 7.5rem); }
.section-tight { padding-block: clamp(var(--space-m), 4vw, var(--space-xl)); }

.narrow { max-width: var(--measure); margin-inline: auto; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 99;
  padding: .6rem 1rem;
  border-radius: var(--radius-s);
  background: var(--btn-fill);
  color: var(--btn-label);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; color: var(--btn-label); }

/* Section heading block */
.sec-head { max-width: 54ch; margin-block-end: var(--space-l); }
.sec-head h2 { font-size: var(--size-3); letter-spacing: -.028em; }
.sec-head p  { margin-block-start: var(--space-s); color: var(--text-muted); }

.sec-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-m);
  max-width: none;
}


/* ==========================================================================
   6. HEADER & NAVIGATION
   On narrow screens the nav simply wraps onto a second line and the header
   stops sticking. No hamburger, no toggle, no script — nothing to break.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.site-header .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .4rem var(--space-m);
  padding-block: .85rem;
}

/* --- Wordmark — the Ring lockup ---
   Identity spec, all-caps revision (Logo.pdf):
     type   Public Sans 250 / 700, all caps, tracking +0.04em, line-height 1
     ring   1.714 x the type size, stroke 1:9.44 of the ring
     gap    0.529 x the type size  (= 0.308 x the ring, measured off the
            sheet's own primary-lockup artwork at 600dpi: ring 104px, gap 32px)

   Everything hangs off the type size, so scaling the lockup means changing
   font-size and nothing else — the three em values below re-derive themselves.

   The wordmark is written lowercase in the markup and capitalised in CSS:
   screen readers announce literal all-caps text as individual letters. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .529em;
  font-size: 14px;
  font-weight: 250;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .18s var(--ease);
  /* Opt out of the site-wide grayscale override. Weight 250 is exactly where
     it hurts: thin strokes lose the horizontal subpixel detail that keeps
     curves smooth, and "absolute" reads ragged. */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
.wordmark:hover { opacity: .75; color: var(--text); }
.wordmark b { font-weight: 700; }

/* The ring. A `border` cannot carry the 0.1816em stroke: Chromium floors
   border-width to whole pixels, so it paints at 2px and the ratio comes out
   1:12. An inset box-shadow keeps the fraction. */
.wordmark .ring {
  flex: none;
  width: 1.714em;
  height: 1.714em;
  border-radius: 50%;
  box-shadow: inset 0 0 0 .1816em var(--ring, var(--accent-brand));
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .1rem .15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: block;
  padding: .4rem .7rem;
  border-radius: var(--radius-m);
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: -.008em;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.site-nav a:hover { color: var(--text); background: var(--accent-soft); }

/* The current page. Add class="here" to the matching link on each page. */
.site-nav a.here { color: var(--text); font-weight: 600; }

@media (max-width: 46rem) {
  .site-header { position: static; }
  .site-header .container { justify-content: center; padding-block: .9rem; }
  .site-nav { width: 100%; }
  .site-nav ul { justify-content: center; }
  .site-nav a { padding: .35rem .55rem; font-size: .88rem; }
}


/* ==========================================================================
   7. FOOTER
   ========================================================================== */

.site-footer {
  margin-block-start: auto;
  padding-block: var(--space-xl) var(--space-m);
  background: var(--brand-graphite);
  border-top: 2px solid var(--brand-blue);
  color: #b6bcc4;
  font-size: var(--size--1);
}

/* The footer is graphite in both themes, so the ring takes the bright cyan
   here whatever --accent-brand currently resolves to. */
.site-footer .wordmark { color: var(--brand-bone); --ring: var(--brand-blue); }
.site-footer .wordmark:hover { color: var(--brand-bone); }

.footer-top {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) 2fr;
  gap: var(--space-xl);
  align-items: start;
}

.footer-tagline {
  margin-block-start: .9rem;
  max-width: 22ch;
  color: #8b929b;
  line-height: 1.5;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-m);
}

.footer-cols h2 {
  margin-block-end: .9rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-blue);
}

.footer-cols ul { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }

.footer-cols a {
  color: #b6bcc4;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color .16s var(--ease);
}
.footer-cols a:hover { color: #fff; text-decoration: underline; text-underline-offset: .2em; }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem var(--space-m);
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-m);
  border-top: 1px solid rgba(255, 255, 255, .09);
  color: #767d86;
  font-size: .8rem;
}

@media (max-width: 52rem) {
  .footer-top  { grid-template-columns: 1fr; gap: var(--space-l); }
  .footer-cols { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-l) var(--space-m); }
}


/* ==========================================================================
   8. HERO
   A full-bleed photo with a dark gradient over it and the title on top.
   ========================================================================== */

.hero {
  position: relative;
  display: grid;
  align-items: end;
  isolation: isolate;
  min-height: min(46svh, 26rem);
  padding-block: var(--space-2xl) var(--space-xl);
  color: var(--brand-bone);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--brand-graphite);
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dark wash so white text stays readable over any photo.
   The wash is pure black, not the graphite of the dark theme: a grey veil desaturates
   the photo underneath and reads as washed out, while black only darkens it. */
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(0, 0, 0, .83) 0%,
    rgba(0, 0, 0, .63) 35%,
    rgba(0, 0, 0, .29) 70%,
    rgba(0, 0, 0, .41) 100%);
}


.hero h1 {
  max-width: 20ch;
  font-size: var(--size-4);
  letter-spacing: -.028em;
  line-height: 1.06;
}

.hero-sub {
  margin-block-start: 1.1rem;
  max-width: 48ch;
  font-size: var(--size-1);
  line-height: 1.55;
  letter-spacing: -.012em;
  color: rgba(244, 243, 240, .82);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5em;
  margin-block-start: var(--space-m);
  font-size: var(--size--1);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(244, 243, 240, .7);
}

/* Page header with no photo */
.hero-plain {
  min-height: 0;
  padding-block: clamp(var(--space-xl), 7vw, var(--space-2xl)) var(--space-m);
  border-bottom: 1px solid var(--line);
  color: var(--text);
}
.hero-plain .hero-sub { color: var(--text-muted); }

@media (max-width: 40rem) {
  .hero { min-height: 18rem; }
}


/* ==========================================================================
   9. BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .68em 1.25em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  color: var(--text);
  font-size: var(--size--1);
  font-weight: 600;
  text-decoration: none;
  transition: background .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { border-color: var(--accent-brand); color: var(--text); transform: translateY(-1px); }

.btn-primary {
  background: var(--btn-fill);
  border-color: var(--btn-fill);
  color: var(--btn-label);
}
.btn-primary:hover { background: #007cc2; border-color: #007cc2; color: var(--btn-label); }

.btn-ghost { background: var(--surface); border-color: var(--line); }

/* On a photo background */
.btn-onphoto {
  color: var(--brand-bone);
  border-color: rgba(244, 243, 240, .32);
  backdrop-filter: blur(6px);
}
.btn-onphoto:hover { color: var(--brand-bone); background: rgba(244, 243, 240, .1); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }


/* ==========================================================================
   10. CARDS
   ========================================================================== */

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  color: inherit;
  text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-m);
  border-color: var(--line-strong);
  color: inherit;
}

.card-media { overflow: hidden; background: var(--bg-sunken); aspect-ratio: 16 / 9; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card-media img { transform: scale(1.035); }

.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .5rem;
  padding: var(--space-m);
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45em;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.card-body h3 {
  font-size: var(--size-1);
  line-height: 1.2;
  letter-spacing: -.022em;
  color: var(--text);
}

.card-sub {
  margin-block-start: -.15rem;
  font-size: var(--size-0);
  font-weight: 500;
  line-height: 1.4;
  color: var(--accent);
}

.card-desc { font-size: .95rem; line-height: 1.6; color: var(--text-muted); }

.card-more {
  margin-block-start: auto;
  padding-block-start: var(--space-s);
  font-size: .85rem;
  font-weight: 600;
  color: var(--accent);
}
.card:hover .card-more { text-decoration: underline; text-underline-offset: .2em; }

/* Wide variant for the first article on the home page */
@media (min-width: 56rem) {
  .card-wide { display: grid; grid-template-columns: 1.05fr 1fr; }
  .card-wide .card-media { aspect-ratio: auto; height: 100%; min-height: 22rem; }
  .card-wide .card-body { justify-content: center; padding: var(--space-l); }
  .card-wide .card-body h3 { font-size: var(--size-3); letter-spacing: -.026em; }
  .card-wide .card-sub { font-size: var(--size-1); }
  .card-wide .card-desc { font-size: var(--size-0); }
  .card-wide .card-more { margin-block-start: var(--space-s); padding-block-start: 0; }
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-m);
}


/* ==========================================================================
   11. PROSE — the running text of articles and pages
   ========================================================================== */

.prose {
  max-width: var(--measure);
  font-size: var(--size-0);
  line-height: 1.75;
}

.prose > * + * { margin-block-start: 1.35em; }

.prose h2 {
  margin-block-start: 2.2em;
  margin-block-end: 0;
  font-size: var(--size-2);
  letter-spacing: -.024em;
  scroll-margin-top: 5.5rem;
}

.prose h3 { margin-block-start: 1.9em; margin-block-end: -.5em; font-size: var(--size-1); }
.prose h2:first-child, .prose h3:first-child { margin-block-start: 0; }

.prose a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-underline-offset: .2em;
}
.prose a:hover { text-decoration-color: currentColor; }

.prose strong { font-weight: 700; }

.prose ul, .prose ol { padding-inline-start: 1.35em; }
.prose li + li { margin-block-start: .5em; }
.prose li::marker { color: var(--text-muted); }

/* Quotes read at the same size as the running text; the rule, the italic and
   the softer colour are what set them apart. */
.prose blockquote {
  padding: .1em 0 .1em 1.4em;
  border-inline-start: 2px solid var(--accent-brand);
  font-size: var(--size-0);
  font-style: italic;
  line-height: 1.75;
  letter-spacing: -.006em;
  color: var(--text-muted);
}
.prose blockquote cite {
  display: block;
  margin-block-start: .7em;
  font-size: var(--size--1);
  font-style: normal;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.prose img { border-radius: var(--radius-m); box-shadow: var(--shadow-s); }
.prose figure { margin-block: 2em; }
.prose figcaption {
  margin-block-start: .75rem;
  font-size: var(--size--1);
  line-height: 1.5;
  color: var(--text-muted);
}

.prose code {
  padding: .15em .4em;
  border-radius: var(--radius-s);
  background: var(--accent-soft);
  font-family: var(--font-mono);
  font-size: .9em;
}

.prose hr { margin-block: 2.5em; }

/* Opening paragraph of an article — add class="lead" */
.prose .lead {
  font-size: var(--size-1);
  line-height: 1.6;
  letter-spacing: -.014em;
  color: var(--text-muted);
}

/* Article footer: tags, share links */
.article-foot {
  display: grid;
  gap: var(--space-s);
  max-width: var(--measure);
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-m);
  border-top: 1px solid var(--line);
}

.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.tags li {
  padding: .25em .7em;
  border-radius: 999px;
  background: var(--accent-soft);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent);
}

.article-foot p { font-size: var(--size--1); color: var(--text-faint); }
.article-foot p a { color: var(--text-muted); }

.related {
  padding-block: var(--space-xl);
  border-top: 1px solid var(--line);
  background: var(--bg-sunken);
}
.related h2 { margin-block-end: var(--space-m); font-size: var(--size-2); }


/* ==========================================================================
   12. AUDIO PLAYER
   The markup ships a normal <audio controls>. site.js swaps the browser's
   default controls for the styled player below. With JavaScript off, the
   native player shows instead and everything still works.
   ========================================================================== */

.audio-box {
  max-width: var(--measure);
  padding: var(--space-m);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
}

.audio-box h2,
.audio-label {
  display: flex;
  align-items: center;
  gap: .5em;
  margin-block-end: .9rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.audio-label svg { flex: none; width: 1.2em; height: 1.2em; color: var(--accent-brand); }

/* Fallback player, shown only when site.js has not run */
.audio-box audio { width: 100%; height: 2.75rem; }
.audio-box audio.is-enhanced { display: none; }

/* --- The styled player --- */
.player {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.player__btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 50%;
  background: var(--btn-fill);
  color: var(--btn-label);
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.player__btn svg { width: 1.35rem; height: 1.35rem; fill: currentColor; }
.player__btn:hover { background: #007cc2; transform: scale(1.04); }
/* No press effect: the button must not shrink, square off or pick up a shadow. */
.player__btn:active { box-shadow: none; }
.player__btn:focus-visible { border-radius: 50%; }

/* Seek bar. --played is set by site.js and fills the track up to the thumb. */
.player__seek {
  flex: 1;
  min-width: 0;
  height: 1.15rem;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.player__seek::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(to right,
    var(--accent-brand) 0 var(--played, 0%), var(--line-strong) var(--played, 0%) 100%);
}
.player__seek::-moz-range-track {
  height: 5px;
  border-radius: 999px;
  background: var(--line-strong);
}
.player__seek::-moz-range-progress {
  height: 5px;
  border-radius: 999px;
  background: var(--accent-brand);
}

.player__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -4.5px;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: var(--accent-brand);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
  transition: transform .15s var(--ease);
}
.player__seek::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: var(--accent-brand);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.player:hover .player__seek::-webkit-slider-thumb { transform: scale(1.25); }
.player__seek:focus-visible { outline: 2px solid var(--accent-brand); outline-offset: 4px; }

.player__time {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: .3em;
  font-family: var(--font-mono);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.player__time b { font-weight: 600; color: var(--text); }
.player__time i { font-style: normal; opacity: .4; }

.audio-note {
  margin-block-start: .9rem;
  font-size: var(--size--1);
  line-height: 1.5;
  color: var(--text-faint);
}
.audio-note a { color: var(--text-muted); }

@media (max-width: 30rem) {
  .player { flex-wrap: wrap; }
  .player__seek { order: 3; flex-basis: 100%; }
}


/* ==========================================================================
   13. RESOURCE GRID — download / link tiles
   ========================================================================== */

.resources {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.resource {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  height: 100%;
  padding: var(--space-s) 2.6rem var(--space-s) var(--space-s);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  color: var(--text);
  text-decoration: none;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.resource:hover {
  border-color: var(--accent-brand);
  background: var(--surface-2);
  transform: translateY(-2px);
  color: var(--text);
}

.resource-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.resource-head b { font-size: .98rem; font-weight: 600; letter-spacing: -.012em; }

.resource-tag {
  padding: .12em .5em;
  border-radius: 999px;
  background: var(--accent-soft);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}

.resource span.desc { font-size: .88rem; line-height: 1.5; color: var(--text-muted); }

.resource::after {
  content: '→';
  position: absolute;
  top: var(--space-s);
  right: var(--space-s);
  color: var(--text-faint);
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.resource:hover::after { color: var(--accent); transform: translateX(2px); }
.resource.external::after { content: '↗'; }


/* ==========================================================================
   14. TABLE OF CONTENTS (long pages)
   ========================================================================== */

.with-toc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  gap: var(--space-xl);
  align-items: start;
}

.with-toc > .main { min-width: 0; max-width: var(--measure); }
.with-toc > .main > * + * { margin-block-start: var(--space-l); }

.toc {
  position: sticky;
  top: 5.5rem;
  padding-inline-start: var(--space-s);
  border-inline-start: 1px solid var(--line);
}

.toc h2 {
  margin-block-end: var(--space-s);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.toc ol { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }

.toc a {
  display: block;
  font-size: .86rem;
  line-height: 1.4;
  color: var(--text-muted);
  text-decoration: none;
}
.toc a:hover { color: var(--text); }

/* Set by the small scroll-spy script at the bottom of the two long pages.
   Delete the script and everything still works — you just lose the highlight. */
.toc a[aria-current='true'] { color: var(--accent); font-weight: 600; }

@media (max-width: 62rem) {
  .with-toc { grid-template-columns: 1fr; }
  .with-toc > .main { margin-inline: auto; }
  .toc { display: none; }
}


/* ==========================================================================
   15. HOME PAGE
   ========================================================================== */

.lede {
  position: relative;
  display: grid;
  align-items: center;
  isolation: isolate;
  min-height: min(88svh, 46rem);
  padding-block: var(--space-2xl);
  color: var(--brand-bone);
}

.lede .hero-media::after {
  background:
    linear-gradient(105deg, rgba(0,0,0,0.498) 0%, rgba(0,0,0,0.398) 42%, rgba(0,0,0,0.167) 100%),
    linear-gradient(to top, rgba(0,0,0,0.415), rgba(0,0,0,0) 45%);
}


.lede h1 {
  margin-block-start: var(--space-s);
  max-width: 15ch;
  font-size: var(--size-5);
  letter-spacing: -.032em;
  line-height: 1.02;
}

.lede p {
  margin-block-start: var(--space-m);
  max-width: 46ch;
  font-size: var(--size-1);
  line-height: 1.55;
  letter-spacing: -.012em;
  color: rgba(244, 243, 240, .84);
}

.lede .btn-row { margin-block-start: var(--space-l); }

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--space-m);
}

.pillar .card-media { aspect-ratio: 21 / 9; }
.pillar .card-body { padding-block-end: var(--space-l); }

.pillar h3 { font-size: var(--size-2); letter-spacing: -.024em; }
.pillar p { font-size: .97rem; line-height: 1.6; color: var(--text-muted); }

.quote-band {
  padding-block: clamp(var(--space-xl), 7vw, var(--space-2xl));
  background: var(--brand-graphite);
}

.quote-band blockquote {
  max-width: 26ch;
  margin-inline: auto;
  text-align: center;
  font-size: var(--size-3);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.026em;
  color: var(--brand-bone);
  text-wrap: balance;
}

.quote-band cite {
  display: block;
  margin-block-start: var(--space-m);
  font-size: var(--size--1);
  font-style: normal;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-blue);
}

.cta {
  padding-block: var(--space-xl);
  border-top: 1px solid var(--line);
  background: var(--bg-sunken);
}

.cta .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m) var(--space-l);
}

.cta h2 { font-size: var(--size-2); letter-spacing: -.024em; }
.cta p {
  margin-block-start: .6rem;
  max-width: 52ch;
  font-size: .97rem;
  line-height: 1.6;
  color: var(--text-muted);
}


/* ==========================================================================
   16. SCALE-TIME THEORY PAGE
   ========================================================================== */

/* The status strip sits full width under the opening paragraph.
   The opening paragraph itself uses the ordinary body text style. */
.intro {
  max-width: var(--measure);
  font-size: var(--size-0);
  line-height: 1.75;
  letter-spacing: -.006em;
  color: var(--text);
}

.status {
  padding: var(--space-m);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
}

.status dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: var(--space-m) var(--space-l);
  margin: 0;
}

.status dl > div { display: grid; gap: .3rem; align-content: start; }

.status dt {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.status dd {
  margin: 0;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.012em;
  overflow-wrap: anywhere;
}

.status__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s) var(--space-m);
  margin-block-start: var(--space-m);
  padding-block-start: var(--space-m);
  border-top: 1px solid var(--line);
}

.status__doi {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-size: .85rem;
  color: var(--text-muted);
}
.status__doi b {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.axioms {
  padding-block: clamp(var(--space-xl), 7vw, var(--space-2xl));
  background: var(--bg-sunken);
  border-block: 1px solid var(--line);
  scroll-margin-top: 5rem;
}

.axiom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  overflow: hidden;
}

.axiom-grid li {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: var(--space-m);
  background: var(--bg);
  transition: background .2s var(--ease);
}
.axiom-grid li:hover { background: var(--surface); }

.axiom-grid b { font-size: .72rem; font-weight: 700; letter-spacing: .14em; color: var(--accent); }
.axiom-grid h3 { font-size: var(--size-0); letter-spacing: -.018em; line-height: 1.3; }
.axiom-grid p { font-size: .9rem; line-height: 1.6; color: var(--text-muted); }



/* ==========================================================================
   17. ABOUT PAGE
   ========================================================================== */

.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  gap: var(--space-xl);
  align-items: start;
}
.about-layout > .main { min-width: 0; max-width: var(--measure); }

.portrait { max-width: 20rem; margin: 0 0 var(--space-l); }
/* The portrait sits inside the prose column, level with the first paragraph
   rather than with the heading above it. */
.prose .portrait { margin-block: 1.35em var(--space-l); }
.portrait img { width: 100%; border-radius: var(--radius-l); box-shadow: var(--shadow-m); }
.portrait figcaption {
  margin-block-start: .7rem;
  font-size: var(--size--1);
  letter-spacing: .04em;
  color: var(--text-faint);
}

.side { position: sticky; top: 5.5rem; display: grid; gap: var(--space-m); }

.side-card {
  padding: var(--space-m);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
}

.side-card h2 {
  margin-block-end: var(--space-s);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

.side-card p { font-size: .88rem; line-height: 1.6; color: var(--text-muted); }
.side-card .btn { margin-block-start: var(--space-s); }

.timeline { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; }
.timeline li {
  display: grid;
  gap: .15rem;
  padding-inline-start: var(--space-s);
  border-inline-start: 2px solid var(--line);
}
.timeline li:hover { border-inline-start-color: var(--accent-brand); }
.timeline b {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.timeline span { font-size: .88rem; line-height: 1.5; color: var(--text-muted); }

.about-cta {
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-m);
  border-top: 1px solid var(--line);
}

@media (min-width: 40rem) {
  .portrait {
    float: right;
    max-width: 15rem;
    margin-inline-start: var(--space-l);
    margin-block-start: .4rem;
    shape-outside: inset(0 round var(--radius-l));
  }
}

@media (max-width: 62rem) {
  .about-layout { grid-template-columns: 1fr; }
  .about-layout > .main { margin-inline: auto; }
  .side {
    position: static;
    width: 100%;
    max-width: var(--measure);
    margin-inline: auto;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  }
}


/* ==========================================================================
   18. CONTACT PAGE
   ========================================================================== */

.contact-block { padding-block-end: var(--space-l); border-bottom: 1px solid var(--line); }
.contact-block:last-child { padding-block-end: 0; border-bottom: 0; }

.contact-block h2 {
  margin-block-end: var(--space-s);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

.contact-list { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.contact-list li {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: .5rem 1rem;
  align-items: baseline;
}
.contact-list span {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.contact-list a { font-size: var(--size-0); font-weight: 500; overflow-wrap: anywhere; }

/* On this page the links are the content itself, not accents inside running text.
   Never underlined. They rest one step down from full strength and come up to it on
   hover, so the emphasis runs the opposite way to an ordinary link. */
.contact-block a { color: var(--text-muted); text-decoration: none; }
.contact-block a:hover { color: var(--text); text-decoration: none; }

address { font-style: normal; line-height: 1.7; }

@media (max-width: 34rem) {
  .contact-list li { grid-template-columns: 1fr; gap: .1rem; }
}


/* ==========================================================================
   19. LEGAL PAGES
   ========================================================================== */

.notice {
  padding: var(--space-s) var(--space-m);
  border-left: 3px solid var(--accent-brand);
  border-radius: var(--radius-s);
  background: var(--accent-soft);
  font-size: var(--size--1);
  line-height: 1.6;
  color: var(--text);
}
.notice code { font-size: .9em; }


/* --------------------------------------------------------------------------
   Partner lockup — a sibling project with its own identity (stardrive.energy).
   The wordmark is an SVG that carries its own light and dark colours.
   -------------------------------------------------------------------------- */

.partner {
  padding: var(--space-m);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
}
.partner img { width: min(14rem, 62%); height: auto; }
.partner p {
  margin-block-start: var(--space-s);
  font-size: var(--size--1);
  line-height: 1.6;
  color: var(--text-muted);
}
.partner .btn-row { margin-block-start: var(--space-s); }

.updated {
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-s);
  border-top: 1px solid var(--line);
  font-size: var(--size--1);
  color: var(--text-faint);
}


/* ==========================================================================
   20. 404
   ========================================================================== */

.notfound {
  display: grid;
  place-items: center;
  min-height: 60svh;
  padding-block: var(--space-2xl);
  text-align: center;
}

.notfound .code { font-size: var(--size-2); font-weight: 800; letter-spacing: .2em; color: var(--accent); }
.notfound h1 { margin-block-start: var(--space-s); letter-spacing: -.03em; }
.notfound > div > p {
  margin-block-start: var(--space-m);
  font-size: var(--size-1);
  line-height: 1.6;
  color: var(--text-muted);
}

.notfound ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem 1.2rem;
  margin-block-start: var(--space-l);
  padding: 0;
  list-style: none;
}
.notfound ul a { font-size: .95rem; font-weight: 600; }


/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {
  .site-header, .site-footer, .toc, .hero-media, .btn-row, .related { display: none !important; }
  body { background: #fff; color: #000; }
  .hero { min-height: 0; padding-block: 0 1rem; color: #000; }
  .hero h1, .hero-sub { color: #000; }
  a { color: #000; text-decoration: underline; }
  .prose { max-width: none; }
}