/* Generated from tokens.json by brand/scripts/build_kit.py. Edit tokens.json, not this file. */
@font-face{font-family:"Archivo";src:url("../fonts/archivo/Archivo-VF.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono/JetBrainsMono-VF.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:swap}
:root{
  --pp-scope-black:#0B0C0E;
  --pp-trace:#E9EEF2;
  --pp-grid:#1E2228;
  --pp-muted:#9AA3AC;
  --pp-body-language:#FF6A3D;
  --pp-body-language-text-on-light:#C63300;
  --pp-pulse-check:#3DA9FF;
  --pp-pulse-check-text-on-light:#006EB6;
  --pp-reflex-test:#E6FF3B;
  --pp-reflex-test-text-on-light:#647100;
  --pp-resting-heart-rate:#B49CFF;
  --pp-resting-heart-rate-text-on-light:#745AB7;
  --pp-bg:#0B0C0E;
  --pp-fg:#E9EEF2;
  --pp-muted:#9AA3AC;
  --pp-line:#1E2228;
  --pp-font-display:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pp-weight-display:700;
  --pp-wdth-display:75;
  --pp-tracking-display:0.004em;
  --pp-leading-display:0.88;
  --pp-font-body:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pp-weight-body:420;
  --pp-wdth-body:100;
  --pp-tracking-body:0em;
  --pp-leading-body:1.45;
  --pp-font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --pp-weight-mono:500;
  --pp-tracking-mono:0.06em;
  --pp-leading-mono:1.3;
  --pp-size--1:0.8rem;
  --pp-size-0:1rem;
  --pp-size-1:1.25rem;
  --pp-size-2:1.562rem;
  --pp-size-3:1.953rem;
  --pp-size-4:2.441rem;
  --pp-size-5:3.052rem;
  --pp-size-6:3.815rem;
  --pp-size-7:4.768rem;
  --pp-size-8:5.961rem;
  --pp-space-1:4px;
  --pp-space-2:8px;
  --pp-space-3:12px;
  --pp-space-4:16px;
  --pp-space-5:24px;
  --pp-space-6:32px;
  --pp-space-7:48px;
  --pp-space-8:64px;
  --pp-space-9:96px;
  --pp-space-10:128px;
  --pp-radius-pill:999px;
  --pp-radius-sm:4px;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){--pp-bg:#E9EEF2;--pp-fg:#0B0C0E;--pp-muted:#4A525B;--pp-line:#C9D1D8;color-scheme:light}}
:root[data-theme="light"]{--pp-bg:#E9EEF2;--pp-fg:#0B0C0E;--pp-muted:#4A525B;--pp-line:#C9D1D8;color-scheme:light}
:root[data-theme="dark"]{--pp-bg:#0B0C0E;--pp-fg:#E9EEF2;--pp-muted:#9AA3AC;--pp-line:#1E2228;color-scheme:dark}
.pp-display{font-family:var(--pp-font-display);font-weight:var(--pp-weight-display);font-variation-settings:"wdth" var(--pp-wdth-display);text-transform:uppercase;letter-spacing:var(--pp-tracking-display);line-height:var(--pp-leading-display)}
.pp-body{font-family:var(--pp-font-body);font-weight:var(--pp-weight-body);font-variation-settings:"wdth" var(--pp-wdth-body);line-height:var(--pp-leading-body)}
.pp-mono{font-family:var(--pp-font-mono);font-weight:var(--pp-weight-mono);text-transform:uppercase;letter-spacing:var(--pp-tracking-mono);line-height:var(--pp-leading-mono)}
:root{--land-h:56.250vw;--land-line:2.699vw;--land-up:-5.844vw;--land-down:11.711vw;--port-h:177.778vw;--port-line:-8.889vw;--port-up:-26.444vw;--port-down:9.620vw}
@keyframes pp-heartbeat{0.0%{opacity:0.826}2.5%{opacity:0.863}5.0%{opacity:0.920}7.5%{opacity:0.976}10.0%{opacity:1.000}12.5%{opacity:0.977}15.0%{opacity:0.923}17.5%{opacity:0.873}20.0%{opacity:0.849}22.5%{opacity:0.854}25.0%{opacity:0.876}27.5%{opacity:0.900}30.0%{opacity:0.910}32.5%{opacity:0.900}35.0%{opacity:0.874}37.5%{opacity:0.846}40.0%{opacity:0.823}42.5%{opacity:0.810}45.0%{opacity:0.803}47.5%{opacity:0.801}50.0%{opacity:0.800}52.5%{opacity:0.800}55.0%{opacity:0.800}57.5%{opacity:0.800}60.0%{opacity:0.800}62.5%{opacity:0.800}65.0%{opacity:0.800}67.5%{opacity:0.800}70.0%{opacity:0.800}72.5%{opacity:0.800}75.0%{opacity:0.800}77.5%{opacity:0.800}80.0%{opacity:0.800}82.5%{opacity:0.800}85.0%{opacity:0.800}87.5%{opacity:0.800}90.0%{opacity:0.800}92.5%{opacity:0.800}95.0%{opacity:0.802}97.5%{opacity:0.808}100.0%{opacity:0.826}}
/* plausibleperson.com, lean v1. Colour, type and spacing come from the kit's tokens (above);
   build_site.py adds the hero geometry and the heartbeat keyframes between the two. */
:root{
  --gutter:clamp(20px,5vw,72px);
  --section:clamp(88px,13vw,176px);
  --measure:62ch;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--pp-bg);color:var(--pp-fg);-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-color:var(--pp-line) var(--pp-bg)}
body{margin:0;font-family:var(--pp-font-body);font-weight:440;font-stretch:100%;font-size:clamp(1.0625rem,1rem + 0.3vw,1.25rem);line-height:1.6;letter-spacing:0.004em;caret-color:var(--pp-pulse-check)}
::selection{background:var(--pp-pulse-check);color:var(--pp-scope-black)}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:0.22em}
:focus-visible{outline:2px solid var(--pp-pulse-check);outline-offset:3px;border-radius:2px}

.display{font-family:var(--pp-font-display);font-weight:var(--pp-weight-display);font-stretch:75%;text-transform:uppercase;letter-spacing:var(--pp-tracking-display);line-height:var(--pp-leading-display);text-wrap:balance}
.mono{font-family:var(--pp-font-mono);font-weight:var(--pp-weight-mono);text-transform:uppercase;letter-spacing:var(--pp-tracking-mono);line-height:var(--pp-leading-mono);font-size:0.8125rem}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--gutter);top:-100px;z-index:10;padding:12px 16px;background:var(--pp-fg);color:var(--pp-bg);text-decoration:none}
.skip:focus{top:12px}

/* ---------------------------------------------------------------- nav */
.nav{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(18px,3vw,36px) var(--gutter)}
.nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav-mark{width:clamp(30px,2.8vw,42px);height:auto}
.nav-brand .display{font-size:clamp(1.05rem,1.45vw,1.55rem);line-height:1}
.nav-links{display:flex;gap:clamp(16px,2.2vw,32px)}
.nav-links a{display:inline-block;padding:10px 0;text-decoration:none}
@media (max-width:640px){.nav nav{display:none}}

/* ---------------------------------------------------------------- hero
   The hero is never taller than the plate's aspect, so the plate scales to the width and the
   trace sits at a fixed offset from the hero's centre (--land-line, --port-*: see build_site.py). */
.hero{position:relative;isolation:isolate;overflow:hidden;height:min(100svh,var(--land-h));min-height:min(520px,var(--land-h))}
.hero-stage{position:absolute;inset:0;z-index:-1}
.hero-plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:.8}
.hero-trace{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hero-trace--portrait{display:none}
.hero-title{position:absolute;left:var(--gutter);bottom:calc(50% - var(--land-line) + clamp(28px,3.4vw,56px));font-size:clamp(3.5rem,7.2vw,9.25rem);max-width:62vw}
.hero-lower{position:absolute;left:var(--gutter);top:calc(50% + var(--land-line) + clamp(28px,3.2vw,52px));max-width:min(56vw,760px)}
.hero-tagline{font-size:clamp(1.25rem,1.9vw,2.1rem);font-weight:470;line-height:1.25;text-wrap:balance}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,2.4vw,32px)}
.hero-readout{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(20px,3vw,40px);color:var(--pp-muted)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:var(--pp-radius-sm);font-size:0.875rem;text-decoration:none;white-space:nowrap;transition:background-color 160ms var(--ease-out),color 160ms var(--ease-out),box-shadow 160ms var(--ease-out),transform 120ms var(--ease-out)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--pp-fg);color:var(--pp-bg)}
.btn-secondary{box-shadow:inset 0 0 0 2px var(--pp-fg);color:var(--pp-fg)}

@media (orientation:portrait),(max-width:700px){
  /* The plate keeps its full 9:16 box at the top; the words below it flow, so a short screen
     grows the hero instead of stacking the readout on the buttons. */
  .hero{height:auto;min-height:0;padding-bottom:clamp(24px,6vw,40px)}
  .hero-stage{bottom:auto;height:var(--port-h)}
  .hero-trace--landscape{display:none}
  .hero-trace--portrait{display:block}
  .hero-title{right:var(--gutter);bottom:auto;top:calc(var(--port-h) / 2 + var(--port-up) - 20px);transform:translateY(-100%);max-width:none;font-size:clamp(3rem,18.4vw,6.25rem)}
  .hero-lower{position:relative;left:auto;top:auto;margin:calc(var(--port-h) / 2 + var(--port-down) + 28px) var(--gutter) 0;max-width:34rem}
  .hero-tagline{font-size:clamp(1.15rem,4.6vw,1.6rem)}
  .hero-cta .btn{flex:1 1 100%}
  .hero-readout{position:static;margin:clamp(28px,8vw,48px) var(--gutter) 0;font-size:0.75rem}
}
}

/* ---------------------------------------------------------------- series */
.series{padding:var(--section) var(--gutter) 0}
.series-head{display:grid;gap:20px;margin-bottom:clamp(40px,6vw,80px)}
.h2{font-size:clamp(2.6rem,6vw,5.5rem)}
.series-genres{max-width:var(--measure);color:var(--pp-muted)}
.series-list{border-top:1px solid var(--pp-line)}
.series-row{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"mark name" "mark lane";column-gap:clamp(16px,2.4vw,32px);row-gap:6px;align-items:center;padding:clamp(20px,2.8vw,36px) 0;border-bottom:1px solid var(--pp-line)}
.series-mark{grid-area:mark;width:clamp(44px,5vw,72px);height:auto}
.series-name{grid-area:name;font-size:clamp(2rem,5.4vw,4.75rem);color:var(--c)}
.series-lane{grid-area:lane;color:var(--pp-muted)}
.s-body-language{--c:var(--pp-body-language)}
.s-pulse-check{--c:var(--pp-pulse-check)}
.s-reflex-test{--c:var(--pp-reflex-test)}
.s-resting-heart-rate{--c:var(--pp-resting-heart-rate)}
@media (min-width:925px){
  .series-head{grid-template-columns:5fr 7fr;align-items:end}
  .series-row{grid-template-columns:auto 1fr auto;grid-template-areas:"mark name lane"}
  .series-lane{text-align:right}
}

/* ---------------------------------------------------------------- latest (only with data/featured.json) */
.latest{padding:var(--section) var(--gutter) 0}
.player{position:relative;margin-top:clamp(28px,4vw,48px);max-width:1100px}
.player img,.player iframe{width:100%;height:auto;aspect-ratio:16/9;border:0;border-radius:var(--pp-radius-sm);background:var(--pp-grid)}
.player-play{position:absolute;left:50%;top:calc(50% - 28px);transform:translate(-50%,-50%);min-height:52px;padding:0 26px;border:0;border-radius:var(--pp-radius-sm);background:var(--pp-fg);color:var(--pp-bg);cursor:pointer}
.player figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;margin-top:16px}
.player figcaption .display{font-size:clamp(1.6rem,3vw,2.6rem)}
.player figcaption .mono{color:var(--c)}

/* ---------------------------------------------------------------- how it's made */
.made{display:grid;gap:clamp(28px,4vw,48px);padding:var(--section) var(--gutter) 0}
.made-body{display:grid;gap:1.1em;max-width:var(--measure)}
.made-lede{font-size:clamp(1.4rem,2.2vw,2rem);font-weight:480;line-height:1.3;text-wrap:balance}
.made-body p{text-wrap:pretty}
.made-disclosure{margin-top:.5em;color:var(--pp-pulse-check)}
@media (min-width:925px){.made{grid-template-columns:5fr 7fr}}

/* ---------------------------------------------------------------- listen (close) */
.listen{display:grid;justify-items:center;gap:clamp(18px,2.4vw,28px);padding:var(--section) var(--gutter);text-align:center}
.listen-mark{width:clamp(72px,9vw,120px);height:auto}
.listen-title{font-size:clamp(3.4rem,9vw,7rem)}
.listen-cadence{max-width:var(--measure);color:var(--pp-muted)}
.listen .hero-cta{justify-content:center;margin-top:8px}
.listen-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;margin-top:8px}
.listen-links a{display:inline-block;padding:8px 0}

/* ---------------------------------------------------------------- footer and plain pages */
.foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px 32px;padding:clamp(28px,4vw,48px) var(--gutter);border-top:1px solid var(--pp-line)}
.foot-line{font-size:clamp(1.5rem,2.4vw,2rem)}
.foot-meta{display:flex;flex-wrap:wrap;gap:8px 24px;color:var(--pp-muted)}
.foot-meta a{display:inline-block;padding:4px 0;color:var(--pp-fg)}
.page{padding:calc(var(--section) + 48px) var(--gutter) var(--section)}
.page-title{font-size:clamp(3rem,8vw,6rem);margin-bottom:clamp(28px,4vw,48px)}
.page-body{display:grid;gap:1.1em;max-width:var(--measure)}

/* ---------------------------------------------------------------- interaction + motion */
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover,.player-play:hover{background:var(--pp-pulse-check)}
  .btn-secondary:hover{box-shadow:inset 0 0 0 2px var(--pp-pulse-check);color:var(--pp-pulse-check)}
  .nav-links a:hover{text-decoration:underline}
}
@media (prefers-reduced-motion:no-preference){
  .hero-plate img{animation:pp-heartbeat 1.25s linear 4}  /* 4 beats (5 s), then the pulse rests: WCAG 2.2.2 */
  .hero-trace path{stroke-dasharray:1 1;stroke-dashoffset:1;animation:pp-draw 1.6s var(--ease-out) .15s forwards}
}
@keyframes pp-draw{to{stroke-dashoffset:0}}