/* Self-hosted. Generated by tools/fetch-fonts.mjs — do not edit. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url(/fonts/archivo-latin-ext-0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url(/fonts/archivo-latin-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url(/fonts/newsreader-latin-ext-0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url(/fonts/newsreader-latin-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/fonts/newsreader-latin-ext-2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/fonts/newsreader-latin-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/plexmono-latin-ext-0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/plexmono-latin-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/plexmono-latin-ext-2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/plexmono-latin-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/plexmono-latin-ext-4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/plexmono-latin-5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Innertia Audio — design system
   Dark, panel-grade. Three families: Archivo (engineered display + UI),
   Newsreader (prose), IBM Plex Mono (measurements and labels).
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Ground and surfaces. Slightly blue-black so warm brass reads as warm. */
  --ink-0:   #08090b;
  --ink-1:   #0c0e11;
  --ink-2:   #12151a;
  --ink-3:   #191d23;

  /* Rules. --line is the hairline that carries the whole layout. */
  --line:    #22262d;
  --line-2:  #2f343d;

  /* Ink on that ground, warm to match the accent. */
  --paper:   #eae7e0;
  --paper-2: #a8a69f;
  --paper-3: #74767b;

  /* One accent: the brass of a tine bar, taken from the plugin panels. */
  --brass:    #d19a45;
  --brass-hi: #eab868;
  --brass-lo: #7a5a25;
  --oxide:    #c2542c;

  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-text:    'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Fluid type. Clamps are deliberate: nothing scales past its optical size. */
  --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.34rem + 0.8vw, 2rem);
  --step-3:  clamp(2rem, 1.6rem + 2vw, 3.2rem);
  --step-4:  clamp(2.2rem, 1.55rem + 3.2vw, 4.5rem);

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --measure: 34rem;          /* prose line length */
  --shell: 84rem;            /* outer content width */
  --rail: 4.5rem;            /* left number gutter on wide screens */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--ink-0);
  color: var(--paper);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.65;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600;
  font-stretch: 112%; letter-spacing: -0.018em; line-height: 1.06; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0 0 1em; padding-left: 1.15em; }
li { margin-bottom: 0.35em; }
strong { font-weight: 600; color: #f5f2ec; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

a { color: inherit; text-decoration-color: color-mix(in oklab, var(--brass) 55%, transparent);
    text-underline-offset: 0.18em; text-decoration-thickness: 1px;
    transition: color 0.18s var(--ease), text-decoration-color 0.18s var(--ease); }
a:hover { color: var(--brass-hi); text-decoration-color: var(--brass-hi); }

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

::selection { background: color-mix(in oklab, var(--brass) 35%, transparent); color: #fff; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brass); color: #14100a; padding: 0.7em 1.1em;
  font-family: var(--font-mono); font-size: var(--step--1); text-decoration: none;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ------------------------------------------------------------ primitives -- */

/* Mono label: the site's connective tissue. Specs, figure numbers, eyebrows. */
.label {
  font-family: var(--font-mono); font-size: var(--step--1); font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--paper-3);
}
.label--brass { color: var(--brass); }

.shell { width: min(100% - var(--gutter) * 2, var(--shell)); margin-inline: auto; }
.prose { max-width: var(--measure); }
.prose a { text-decoration: underline; }

.lede { font-size: var(--step-1); line-height: 1.5; color: var(--paper-2); max-width: 40rem; }
.lede strong { color: var(--paper); font-weight: 500; }

/* --------------------------------------------------------------- header -- */

.masthead {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--ink-0) 88%, transparent);
  backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--line);
}
.masthead__inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 4.25rem;
}

.mark { display: inline-flex; align-items: center; gap: 0.72rem; text-decoration: none; flex: none; }
.mark:hover { color: var(--paper); }
.mark:hover .mark__glyph { color: var(--brass-hi); }
.mark__glyph { width: 30px; height: 30px; flex: none; color: var(--brass);
  transition: color 0.2s var(--ease); }

/* One lockup, set wide and tracked. The hairline under INNER is the joke,
   left for the reader to notice rather than explained. */
.mark__word {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 700;
  font-size: clamp(0.92rem, 0.86rem + 0.3vw, 1.12rem);
  letter-spacing: 0.155em; text-transform: uppercase;
  line-height: 1; padding-bottom: 2px; white-space: nowrap;
}
.mark__inner { border-bottom: 1px solid color-mix(in oklab, var(--brass) 75%, transparent);
  padding-bottom: 3px; }

@media (max-width: 26rem) {
  .mark { gap: 0.5rem; }
  .mark__glyph { width: 24px; height: 24px; }
  .mark__word { letter-spacing: 0.11em; }
}

.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); }
.nav a {
  font-family: var(--font-display); font-size: 0.86rem; font-weight: 500;
  letter-spacing: 0.055em; text-transform: uppercase; text-decoration: none;
  color: var(--paper-2); position: relative; padding-block: 0.4rem;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--brass); transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s var(--ease);
}
.nav a:hover, .nav a[aria-current] { color: var(--paper); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }

.nav__toggle { display: none; }

@media (max-width: 52rem) {
  .nav__toggle {
    display: inline-flex; align-items: center; gap: 0.5rem; margin-left: auto;
    background: none; border: 1px solid var(--line-2); color: var(--paper);
    font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em;
    text-transform: uppercase; padding: 0.5rem 0.75rem; cursor: pointer;
  }
  .nav {
    position: fixed; inset: 4.25rem 0 auto 0; margin: 0; flex-direction: column;
    align-items: stretch; gap: 0; background: var(--ink-1);
    border-bottom: 1px solid var(--line); padding: 0.5rem var(--gutter) 1.5rem;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  }
  .nav[data-open='true'] { opacity: 1; transform: none; pointer-events: auto; }
  .nav a { font-size: 1.05rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
  .nav a::after { display: none; }
}

/* ------------------------------------------------------------- sections -- */

/* Numbered sections with a left gutter, like plates in a technical manual. */
.section { border-top: 1px solid var(--line); padding-block: clamp(3.5rem, 8vw, 7rem); }
.section--flush { border-top: 0; }

.section__head {
  display: grid; gap: 0.9rem 2rem; margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
@media (min-width: 60rem) {
  .section__head { grid-template-columns: var(--rail) minmax(0, 1fr); align-items: start; }
  .section__num { padding-top: 0.35rem; }
}
.section__num { font-family: var(--font-mono); font-size: var(--step--1);
  color: var(--brass); letter-spacing: 0.1em; }
.section__title { font-size: var(--step-2); }
.section__note { color: var(--paper-2); margin: 0.75rem 0 0; max-width: 38rem; }

.section__body { display: grid; gap: 0; }
@media (min-width: 60rem) {
  .section__body { grid-template-columns: var(--rail) minmax(0, 1fr); }
  .section__body > * { grid-column: 2; }
}

/* ----------------------------------------------------------------- hero -- */

.hero { position: relative; padding-block: clamp(3rem, 9vw, 7.5rem) clamp(2.5rem, 6vw, 5rem); overflow: hidden; }
.hero__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: end; }
@media (min-width: 64rem) { .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }

.hero__eyebrow { display: flex; align-items: center; gap: 0.85rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.hero__eyebrow::after { content: ''; height: 1px; flex: 1; background: linear-gradient(90deg, var(--line-2), transparent); }

.hero__title {
  font-size: var(--step-4); font-weight: 700; font-stretch: 108%;
  letter-spacing: -0.032em; line-height: 0.94; margin-bottom: 1.5rem;
}
.hero__title em { font-style: normal; color: var(--brass); }

.hero__lede { font-size: var(--step-1); line-height: 1.5; color: var(--paper-2); max-width: 33rem; }

.hero__meta {
  margin-top: clamp(2rem, 4vw, 3rem); display: flex; flex-wrap: wrap;
  gap: 0 2.5rem; border-top: 1px solid var(--line); padding-top: 1.1rem;
}
.hero__meta div { padding-block: 0.4rem; }
.hero__meta dt { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--paper-3); margin-bottom: 0.25rem; }
.hero__meta dd { margin: 0; font-family: var(--font-display); font-size: 0.95rem; font-weight: 500; }

/* The decay plot. Real modal physics, drawn live — see js/decay.js. */
.plot { position: relative; border: 1px solid var(--line); background:
  linear-gradient(180deg, var(--ink-1), var(--ink-0)); }
.plot canvas { width: 100%; height: auto; display: block; cursor: crosshair; }
.plot__cap {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  border-top: 1px solid var(--line); padding: 0.7rem 0.9rem;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--paper-3);
}
.plot__cap b { color: var(--paper-2); font-weight: 500; }

/* --------------------------------------------------------------- plates -- */

/* A product entry: full-bleed screenshot, hairline frame, spec table. */
.plate { display: grid; gap: clamp(1.75rem, 3vw, 2.75rem); }
.plate + .plate { margin-top: clamp(4rem, 8vw, 7rem); padding-top: clamp(3.5rem, 7vw, 6rem);
  border-top: 1px solid var(--line); }

@media (min-width: 62rem) {
  .plate { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem); align-items: start; }
  .plate--flip > .plate__figure { order: 2; }
}

.plate__figure { margin: 0; position: relative; }
.plate__frame {
  border: 1px solid var(--line-2); background: var(--ink-2); overflow: hidden;
  position: relative;
}
.plate__frame img { width: 100%; }
.plate__frame::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.03);
}
.plate__figcap {
  display: flex; flex-wrap: wrap; gap: 0.35rem 0.85rem; margin-top: 0.75rem;
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--paper-3);
}
.plate__figcap span:first-child { color: var(--brass); flex: none;
  letter-spacing: 0.12em; text-transform: uppercase; }
.plate__figcap span + span { letter-spacing: 0.01em; }

.plate__index { font-family: var(--font-mono); font-size: var(--step--1);
  color: var(--brass); letter-spacing: 0.1em; margin-bottom: 0.9rem; display: block; }
.plate__title { font-size: var(--step-3); font-weight: 700; letter-spacing: -0.028em; margin-bottom: 0.2rem; }
.plate__kicker { font-family: var(--font-display); font-weight: 500; font-size: var(--step-1);
  color: var(--brass); margin: 0 0 1rem; letter-spacing: -0.01em; }
.plate__body { color: var(--paper-2); }
.plate__body strong { color: var(--paper); }

/* -------------------------------------------------------------- specs --- */

.specs { width: 100%; border-collapse: collapse; margin: 1.75rem 0; font-family: var(--font-mono);
  font-size: 0.78rem; }
.specs th, .specs td { text-align: left; padding: 0.55rem 0; border-bottom: 1px solid var(--line);
  vertical-align: baseline; }
.specs th { font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper-3); width: 8.5rem; padding-right: 1rem; }
.specs td { color: var(--paper); }
.specs tr:last-child th, .specs tr:last-child td { border-bottom: 0; }

/* -------------------------------------------------------------- buttons -- */

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display); font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  padding: 0.72rem 1.15rem; border: 1px solid var(--line-2); color: var(--paper);
  background: transparent; cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
.btn:hover { border-color: var(--brass); color: var(--brass-hi); background: color-mix(in oklab, var(--brass) 8%, transparent); }
.btn--primary { background: var(--brass); border-color: var(--brass); color: #14100a; }
.btn--primary:hover { background: var(--brass-hi); border-color: var(--brass-hi); color: #14100a; }
.btn svg { width: 15px; height: 15px; flex: none; }

/* ---------------------------------------------------------------- cards -- */

.grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 44rem) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 44rem) and (max-width: 61.99rem) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }

.card {
  background: var(--ink-0); padding: clamp(1.25rem, 2.5vw, 1.9rem);
  display: flex; flex-direction: column; gap: 0.55rem;
  transition: background 0.22s var(--ease);
}
.card:hover { background: var(--ink-2); }
.card__title { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; letter-spacing: -0.012em; }
.card__title a { text-decoration: none; }
.card__title a::after { content: ''; position: absolute; inset: 0; }
.card { position: relative; }
.card__desc { color: var(--paper-2); font-size: 0.98rem; margin: 0; }
.card__meta { margin-top: auto; padding-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--paper-3); }
.card__meta .lang::before { content: ''; display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; background: var(--brass); margin-right: 0.45rem; vertical-align: 0.05em; }

/* ------------------------------------------------------------- galleries -- */

.tiles { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 40rem) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .tiles--4 { grid-template-columns: repeat(4, 1fr); }
  .tiles--3 { grid-template-columns: repeat(3, 1fr); } }
.tile { position: relative; background: var(--ink-0); margin: 0; }
.tile img { width: 100%; height: auto; }
.tile figcaption { position: absolute; left: 0; bottom: 0; right: 0; padding: 0.55rem 0.75rem;
  font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper); background: linear-gradient(0deg, rgb(0 0 0 / 0.78), transparent); }

/* ------------------------------------------------------------- releases -- */

.feed { border-top: 1px solid var(--line); }
.feed__item { display: grid; gap: 0.35rem 2rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 48rem) {
  .feed__item { grid-template-columns: 8rem minmax(0, 12rem) minmax(0, 1fr); align-items: baseline; }
}
.feed__date { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--paper-3); }
.feed__name { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; letter-spacing: -0.01em; }
.feed__name a { text-decoration: none; }
.feed__tag { font-family: var(--font-mono); font-size: 0.75rem; color: var(--brass); margin-left: 0.5rem; }
.feed__note { color: var(--paper-2); font-size: 0.95rem; margin: 0; }

/* ------------------------------------------------------------ breadcrumb -- */

.crumbs { padding-block: 1.1rem; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 0; padding: 0; }
.crumbs li { margin: 0; color: var(--paper-3); }
.crumbs li + li::before { content: '/'; margin-right: 0.55rem; color: var(--line-2); }
.crumbs a { text-decoration: none; color: var(--paper-2); }

/* ---------------------------------------------------------------- pagehd -- */

.pagehead { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem); }
.pagehead__title { font-size: var(--step-3); font-weight: 700; letter-spacing: -0.03em; margin-bottom: 1rem; }
.pagehead__lede { color: var(--paper-2); font-size: var(--step-1); line-height: 1.5; max-width: 38rem; }

/* ---------------------------------------------------------------- footer -- */

.foot { border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.foot__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 48rem) { .foot__grid { grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); } }
.foot h2 { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--paper-3); margin-bottom: 1rem; font-stretch: normal; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 0.55rem; }
.foot a { text-decoration: none; color: var(--paper-2); font-family: var(--font-display); font-size: 0.92rem; }
.foot a:hover { color: var(--brass-hi); }
.foot__note { color: var(--paper-3); font-size: 0.95rem; max-width: 26rem; }
.foot__legal { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; justify-content: space-between;
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.25rem; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--paper-3); }
.foot__legal a { font-family: var(--font-mono); font-size: inherit; letter-spacing: inherit; }

/* --------------------------------------------------------------- reveal -- */

[data-reveal] { opacity: 0; transform: translateY(14px); }
[data-reveal].is-in { opacity: 1; transform: none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ------------------------------------------------------------- features -- */

.feature-list { margin: 0; display: grid; gap: 0; }
.feature { display: grid; gap: 0.4rem 2.5rem; padding: 1.5rem 0; border-top: 1px solid var(--line); }
.feature:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 52rem) {
  .feature { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: baseline; }
}
.feature dt { font-family: var(--font-display); font-weight: 600; font-size: 1.06rem;
  letter-spacing: -0.012em; color: var(--paper); }
.feature dd { margin: 0; color: var(--paper-2); }

/* Wide spec table used on the downloads page. */
.specs--wide th, .specs--wide td { padding-right: 1.5rem; }
.specs--wide th[scope='col'] { color: var(--paper-3); width: auto; }
.specs--wide tbody th { color: var(--paper); font-weight: 500; text-transform: none;
  letter-spacing: 0.02em; font-size: 0.85rem; width: auto; }
.specs--wide td a { color: var(--brass); text-decoration: none; }
.specs--wide td a:hover { color: var(--brass-hi); text-decoration: underline; }
.specs thead th { border-bottom-color: var(--line-2); }

.plate__text > .actions:first-of-type { margin-top: 1.5rem; }
.prose h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.018em; }
.prose em { font-style: italic; color: var(--paper); }

/* ---------------------------------------------------------- full bleed -- */

/* A single plate that runs the full width of the window, used once per page
   at most — the flagship screenshot under the homepage headline. */
.bleed { margin-block: clamp(1.5rem, 3vw, 2.5rem) 0; }
.bleed__figure { margin: 0; border-block: 1px solid var(--line); background: var(--ink-1); }
/* Capped near the source resolution so the capture is never upscaled into mush;
   on wider screens it centres on the ground and the rules still run edge to edge. */
.bleed__figure img,
.bleed__figure .hero-video { width: 100%; max-width: 1416px; margin-inline: auto; }
.bleed__cap {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem;
  width: min(100% - var(--gutter) * 2, var(--shell)); margin-inline: auto;
  padding: 0.85rem 0; font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--paper-3);
}
.bleed__cap span:first-child { color: var(--brass); }

/* The hero is text-only now, so it sets its own rhythm. */
.hero__title { max-width: 18ch; }
.hero .actions { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* Two-column split used for a figure beside its explanation. */
.split { display: grid; gap: clamp(1.75rem, 3vw, 3rem); align-items: start; }
@media (min-width: 62rem) { .split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.split .prose { max-width: none; }

/* A stack of labelled facts, used where a page would otherwise have dead space. */
.spec-stack { margin: 0; border-top: 1px solid var(--line); }
.spec-stack > div { display: grid; gap: 0.15rem 1.5rem; padding: 0.8rem 0;
  border-bottom: 1px solid var(--line); }
@media (min-width: 34rem) {
  .spec-stack > div { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: baseline; }
}
.spec-stack dt { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--paper-3); }
.spec-stack dd { margin: 0; font-family: var(--font-display); font-size: 0.95rem;
  font-weight: 500; color: var(--paper); letter-spacing: -0.005em; }

@media (min-width: 64rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: end; }
  .hero__title { max-width: none; }
}

/* Utility classes replace inline style attributes so the site can ship a
   Content-Security-Policy without 'unsafe-inline'. */
.specs--narrow { max-width: 36rem; }
.pagehead__title--tight { margin-top: 1rem; }
.actions--spaced { margin-top: clamp(2.5rem, 5vw, 4rem); }
.prose h2 { font-size: var(--step-2); margin: 2.5rem 0 1rem; }
.prose > h2:first-child { margin-top: 0; }
.card__kicker { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--brass); margin: 0; }

/* A catalogue entry: number and name on the left, description and points right. */
.feature--wide dt { display: flex; flex-direction: column; gap: 0.3rem; }
.feature__num { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; color: var(--brass); }
.feature__name { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600;
  letter-spacing: -0.018em; }
.feature__kicker { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--paper-3); }
.feature--wide { padding-block: clamp(1.75rem, 3vw, 2.5rem); }
@media (min-width: 52rem) { .feature--wide { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); } }

.ticks { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.4rem; }
@media (min-width: 40rem) { .ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; } }
.ticks li { margin: 0; padding-left: 1.15rem; position: relative; font-family: var(--font-display);
  font-size: 0.92rem; color: var(--paper-2); }
.ticks li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px;
  background: var(--brass); }

/* Capability entries on the technology page. */
.cap { display: grid; gap: 1rem 3rem; padding-block: clamp(2.25rem, 4vw, 3.25rem);
  border-top: 1px solid var(--line); }
.cap:last-of-type { border-bottom: 1px solid var(--line); }
@media (min-width: 58rem) { .cap { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); } }
.cap__head { display: flex; gap: 1rem; align-items: baseline; }
.cap__num { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--brass); }
.cap__title { font-size: var(--step-2); letter-spacing: -0.022em; }
.cap__lede { font-family: var(--font-display); font-size: var(--step-1); font-weight: 500;
  line-height: 1.35; letter-spacing: -0.012em; color: var(--paper); margin-bottom: 0.9rem; }
.cap__text { color: var(--paper-2); max-width: 42rem; }
.cap__proof { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--paper-3); margin: 1rem 0 0; }

/* Compact capability index on the homepage. */
.caplist { border-top: 1px solid var(--line); }
.caplist__row { display: grid; gap: 0.25rem 2rem; padding: 1.15rem 0; border-bottom: 1px solid var(--line);
  align-items: baseline; }
@media (min-width: 56rem) {
  .caplist__row { grid-template-columns: 3rem minmax(0, 16rem) minmax(0, 1fr); }
}
.caplist__num { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; color: var(--brass); }
.caplist__title { font-family: var(--font-display); font-weight: 600; font-size: 1.04rem; letter-spacing: -0.014em; }
.caplist__lede { color: var(--paper-2); }
code { font-family: var(--font-mono); font-size: 0.86em; color: var(--paper);
  background: var(--ink-2); padding: 0.12em 0.4em; border: 1px solid var(--line); }
.aside { position: sticky; top: 6rem; align-self: start; }
@media (max-width: 61.99rem) { .aside { position: static; } }
.aside .spec-stack dd a { color: var(--brass); text-decoration: none; }

/* ====================================================================== */
/* Long-form product page: a fact strip, a sticky contents rail, and       */
/* chapters of prose with figures set into them.                          */
/* ====================================================================== */

.glance { border-block: 1px solid var(--line); margin-top: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--ink-1); }
.glance .shell { display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: center; justify-content: space-between; padding-block: 1.1rem; }
.glance__row { display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; margin: 0; }
.glance__row dt { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--paper-3); margin-bottom: 0.2rem; }
.glance__row dd { margin: 0; font-family: var(--font-display); font-size: 0.92rem; font-weight: 500; }
.glance__actions .btn { padding-block: 0.6rem; }

.layout { display: grid; gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 68rem) {
  .layout { grid-template-columns: 15rem minmax(0, 1fr); }
}
.layout__main { min-width: 0; }

/* Contents rail. Hidden on narrow screens, where the page is a single column
   and scrolling past the headings is faster than reading a list of them. */
.toc { display: none; }
@media (min-width: 68rem) {
  .toc { display: block; position: sticky; top: 6rem; }
}
.toc__title { font-family: var(--font-mono); font-size: 0.64rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-3);
  font-stretch: normal; margin-bottom: 0.9rem; }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; border-top: 1px solid var(--line); }
.toc li { margin: 0; counter-increment: toc; border-bottom: 1px solid var(--line); }
.toc a { display: flex; gap: 0.7rem; padding: 0.6rem 0; text-decoration: none;
  font-family: var(--font-display); font-size: 0.88rem; color: var(--paper-2);
  transition: color 0.18s var(--ease); }
.toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-mono);
  font-size: 0.66rem; color: var(--line-2); padding-top: 0.22em; transition: color 0.18s var(--ease); }
.toc a:hover, .toc a[aria-current='true'] { color: var(--paper); }
.toc a:hover::before, .toc a[aria-current='true']::before { color: var(--brass); }

.chapter { scroll-margin-top: 6rem; }
.chapter + .chapter { margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line); }
.chapter__title { font-size: var(--step-2); letter-spacing: -0.024em; margin-bottom: 1.5rem; }
.chapter__note { color: var(--paper-2); max-width: var(--measure); margin-bottom: 1.75rem; }
.chapter__body { max-width: 38rem; }
.chapter__body p { font-size: 1.05rem; line-height: 1.7; color: var(--paper-2); margin-bottom: 1.15em; }
/* The opening paragraph of each chapter carries a little more weight. */
.chapter__body p:first-child { color: var(--paper); font-size: 1.12rem; }
.chapter__body p:last-child { margin-bottom: 0; }
.chapter__figure { margin: clamp(2rem, 4vw, 3rem) 0 0; }

.specs--detail { font-size: 0.82rem; max-width: 54rem; }
.specs--detail th { width: 12rem; vertical-align: baseline; }
.specs--detail td { color: var(--paper); }
@media (max-width: 40rem) {
  .specs--detail th, .specs--detail td { display: block; width: auto; }
  .specs--detail th { border-bottom: 0; padding-bottom: 0.15rem; }
}

@media (min-width: 40rem) { .tiles--2 { grid-template-columns: repeat(2, 1fr); } }

.pagehead__kicker { font-family: var(--font-display); font-weight: 500; font-size: var(--step-1);
  color: var(--brass); letter-spacing: -0.012em; margin: 0.35rem 0 1.1rem; }

/* Measured figures. Numbers a person can check, not adjectives. */
.figures { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
  margin: clamp(2rem, 4vw, 3rem) 0 0; }
/* The figures strip sits directly above the long-form, so it owns the gap. */
.figures + * { margin-top: 0; }
.layout { padding-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 44rem) { .figures { grid-template-columns: repeat(3, 1fr); } }
/* Column count matches the number of figures, so a row is never left ragged.
   A data attribute rather than an inline style, because the site ships a CSP
   without 'unsafe-inline'. */
@media (min-width: 72rem) {
  .figures[data-cols='4'] { grid-template-columns: repeat(4, 1fr); }
  .figures[data-cols='5'] { grid-template-columns: repeat(5, 1fr); }
  .figures[data-cols='6'] { grid-template-columns: repeat(6, 1fr); }
}
.figures__item { background: var(--ink-0); padding: clamp(1.1rem, 2vw, 1.6rem); }
.figures__item dt { font-family: var(--font-display); font-stretch: 108%; font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -0.03em; color: var(--brass);
  line-height: 1; margin-bottom: 0.6rem; }
.figures__item dd { margin: 0; font-size: 0.88rem; line-height: 1.45; color: var(--paper-2); }
.figures-band { padding-block: 0 clamp(0.5rem, 1vw, 1rem); }

/* A hero that plays. Sized by its intrinsic ratio so nothing shifts on load. */
.hero-video { width: 100%; height: auto; display: block; background: var(--ink-2); }
.hero-video[data-paused] { cursor: pointer; }
.plate__frame:has(.hero-video[data-paused])::before {
  content: 'Play'; position: absolute; z-index: 2; left: 50%; top: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: #14100a; background: var(--brass);
  padding: 0.7rem 1.2rem;
}

/* A standout note: one number worth stopping for, and why it matters. */
.note {
  display: grid; gap: 1.25rem 2.5rem; align-items: center;
  border: 1px solid var(--brass-lo); background:
    linear-gradient(180deg, color-mix(in oklab, var(--brass) 7%, var(--ink-1)), var(--ink-1));
  padding: clamp(1.5rem, 3vw, 2.5rem); margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 52rem) { .note { grid-template-columns: auto minmax(0, 1fr); } }
.note__figure {
  font-family: var(--font-display); font-stretch: 110%; font-weight: 700;
  font-size: clamp(2.6rem, 1.8rem + 3vw, 4.25rem); letter-spacing: -0.04em;
  line-height: 0.9; color: var(--brass-hi); white-space: nowrap;
}
.note__title { font-size: var(--step-1); letter-spacing: -0.016em; margin-bottom: 0.55rem; }
.note__text p { margin: 0; color: var(--paper-2); max-width: 44rem; }

/* At-a-glance feature row under a product summary. */
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1.15rem 0 0; padding: 0; }
.tags li { margin: 0; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--paper-2); border: 1px solid var(--line-2);
  padding: 0.32rem 0.6rem; }

/* The hero's line breaks are chosen for the wide layout. Below that they are
   wider than the viewport, so let the sentence wrap on its own instead. */
@media (max-width: 52rem) {
  .hero__title br { display: none; }
}
.hero__grid > * { min-width: 0; }