@charset "UTF-8";
/* ==========================================================================
   SCALE-TIME DYNAMICS — stylesheet
   --------------------------------------------------------------------------
   Brand:  Public Sans · Turquoise #00A0A8 · Graphite #1B1E23 · Bone #F4F3F0
   No build step, no preprocessor, no framework. Plain CSS.

   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. Scale-Time Theory page
    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-turquoise: #00a0a8;
  --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: #00767d;          /* links — darker so it passes contrast on bone */
  --accent-hover: #005e64;
  --accent-brand: #00a0a8;    /* rules, fills, decoration */
  --accent-soft: rgba(0, 160, 168, 0.10);

  --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, 160, 168, .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: #2bc0c8;        /* lighter so it passes contrast on graphite */
    --accent-hover: #59d4da;
    --accent-brand: #00a0a8;
    --accent-soft: rgba(0, 160, 168, .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(43, 192, 200, .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(--accent-brand);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; color: #fff; }

/* 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 ---
   Per the logo sheet: mark, then "Scale-Time" 700, then "Dynamics" 800 turquoise.
   The lockup ends on "Dynamics". The sheet's entity variant, which sets the company
   suffix at 500 / 0.6em / +0.06em tracking, is reserved for legal naming and is not
   used anywhere on this site. */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  font-size: 1.15rem;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .18s var(--ease);
}
.wordmark:hover { opacity: .75; color: var(--text); }
.wordmark b  { font-weight: 800; color: var(--accent-brand); }
.wordmark i  { font-weight: 700; font-style: normal; margin-inline-end: .3em; }

/* The mark, per the lockup sheet: 1.50 x cap height, 0.40em gap, optically centred
   on the cap band rather than on the line box. Public Sans caps are .723em, so the
   height is 1.5 x .723 = 1.085em and the baseline nudge is half the difference.
   Its sigma is a knockout, so the counters pick up whatever ground it sits on. */
.wordmark img {
  height: 1.085em;
  width: auto;
  margin-inline-end: .4em;
  position: relative;
  top: .228em;
}

.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-turquoise);
  color: #b6bcc4;
  font-size: var(--size--1);
}

.site-footer .wordmark { color: var(--brand-bone); }
.site-footer .wordmark b { color: var(--brand-turquoise); }
.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-turquoise);
}

.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(--accent-brand);
  border-color: var(--accent-brand);
  color: #fff;
}
.btn-primary:hover { background: #00b3bc; border-color: #00b3bc; color: #fff; }

.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(--accent-brand);
  color: #fff;
  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: #00b3bc; 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-turquoise);
}

.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; }
}