/* ==========================================================================
   DAVID PACHECO - personal site
   Design: "TITLE CARD"
   A black screen. The point cloud alone in the top two thirds, a one-pixel
   horizon with a soft lens streak, and the name set centred, light and
   wide-tracked beneath it. Calm, cinematic, quiet.
   Display + body: Josefin Sans (200 / 300 / 400) · Labels: IBM Plex Mono
   ========================================================================== */

/* ---- Fonts (self-hosted) ------------------------------------------------ */
@font-face {
  font-family: 'Josefin Sans';
  src: url('../fonts/josefin-sans-var.woff2') format('woff2');
  font-weight: 200 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---- Tokens -------------------------------------------------------------- */
/* Dark is the design; light is the same card in daylight. Every colour on
   the site is one of these, and the light block below overrides them all. */
:root {
  --bg: #000;
  --bg-2: #0a0a0a;            /* frames, code blocks */
  --bg-3: #141414;            /* inline code */
  --ink: #ece9e2;             /* headings, labels that must read */
  --ink-strong: #fff;         /* the name, page titles, the footer question */
  --body: #b9b6af;            /* running text */
  --dim: #7d7b76;             /* kickers, meta, readouts */
  --accent: #9fc4ff;          /* the streak's ice blue: hover, links, live label */
  --accent-deep: #5c8fe6;     /* the cloud's far colour, for graphics only */
  --accent-line: rgba(159, 196, 255, 0.4);  /* underline beneath prose links */
  --on-accent: #000;          /* text on a block of accent (selection) */
  --line: rgba(236, 233, 226, 0.14);
  --line-soft: rgba(236, 233, 226, 0.07);
  --header-bg: rgba(0, 0, 0, 0.86);

  /* the title card: sky gradient (top to horizon), the horizon line, the streak */
  --sky-0: #000;
  --sky-1: #03050a;
  --sky-2: #091120;
  --sky-3: #142238;
  --sky-4: #3e3540;
  --horizon: rgba(236, 233, 226, 0.38);
  --streak-edge: rgba(159, 196, 255, 0.45);
  --streak-core: rgba(236, 243, 255, 0.95);
  --streak-opacity: 0.85;
  --sun-opacity: 0;           /* the daytime sun on the horizon (light theme only) */
  --fallback-far: rgba(92, 143, 230, 0.22);
  --fallback-near: rgba(242, 237, 227, 0.16);

  /* the point cloud is drawn as additive light on a transparent canvas; on
     paper it is re-read as ink (see the light block) */
  --cloud-filter: none;
  --cloud-blend: normal;

  /* the theme toggle */
  --toggle-size: 2.5rem;
  --toggle-bg: rgba(0, 0, 0, 0.35);
  --theme-fade: 250ms;

  /* aliases kept for older references */
  --ink-dim: var(--body);
  --ink-faint: var(--dim);

  --font-display: 'Josefin Sans', 'Century Gothic', 'Trebuchet MS', ui-sans-serif, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6.5rem;

  --measure: 52ch;             /* about 72 characters in Josefin */
  --narrow: 52rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --header-h: 4rem;

  --track-name: clamp(0.28em, 1.4vw, 0.5em);
  --track-head: clamp(0.2em, 1.1vw, 0.4em);
  --track-nav: 0.42em;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 400ms;
}

/* Light: daytime. A clear blue sky fading to white at the horizon with a soft
   sun sitting on the line (the night card's opposite), near-white page below,
   near-black ink, one steel blue; the cloud is re-read as ink. */
:root[data-theme="light"] {
  --bg: #fcfcfa;
  --bg-2: #f0f1f0;
  --bg-3: #e9ebea;
  --ink: #1a1a18;
  --ink-strong: #0e0e0d;
  --body: #45443f;
  --dim: #67665f;
  --accent: #3566b8;
  --accent-deep: #2a4f93;
  --accent-line: rgba(53, 102, 184, 0.4);
  --on-accent: #fcfcfa;
  --line: rgba(26, 26, 24, 0.16);
  --line-soft: rgba(26, 26, 24, 0.08);
  --header-bg: rgba(252, 252, 250, 0.86);

  --sky-0: #5c9fe8;
  --sky-1: #8fbdf0;
  --sky-2: #c6def7;
  --sky-3: #e8f1fb;
  --sky-4: #f6f9fd;
  --horizon: rgba(70, 110, 170, 0.32);
  --streak-edge: rgba(255, 250, 230, 0.8);
  --streak-core: #ffffff;
  --streak-opacity: 1;
  --sun-opacity: 1;
  --fallback-far: rgba(53, 102, 184, 0.22);
  --fallback-near: rgba(26, 26, 24, 0.12);

  /* white points become near-black, the steel blue stays blue; multiply
     lets the additive glow darken the paper instead of disappearing on it */
  --cloud-filter: invert(1) hue-rotate(180deg) contrast(1.1);
  --cloud-blend: multiply;

  --toggle-bg: rgba(252, 252, 250, 0.5);
}

/* Registering the sky tokens lets the gradient fade with the rest of the
   page when the theme changes; without support it simply switches. */
@property --sky-0 { syntax: '<color>'; inherits: true; initial-value: #000; }
@property --sky-1 { syntax: '<color>'; inherits: true; initial-value: #000; }
@property --sky-2 { syntax: '<color>'; inherits: true; initial-value: #000; }
@property --sky-3 { syntax: '<color>'; inherits: true; initial-value: #000; }
@property --sky-4 { syntax: '<color>'; inherits: true; initial-value: #000; }
@property --streak-edge { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --streak-core { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --fallback-far { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --fallback-near { syntax: '<color>'; inherits: true; initial-value: transparent; }

/* ---- Reset / base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: dark;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}
html[data-theme="light"] { color-scheme: light; }

/* A short fade when the theme is toggled (main.js adds the class for the
   duration). Reveal elements keep their own opacity/transform transitions. */
html.is-theming,
html.is-theming *:not(.reveal),
html.is-theming *:not(.reveal)::before,
html.is-theming *:not(.reveal)::after {
  transition:
    background-color var(--theme-fade) ease,
    color var(--theme-fade) ease,
    border-color var(--theme-fade) ease,
    text-decoration-color var(--theme-fade) ease,
    filter var(--theme-fade) ease,
    --sky-0 var(--theme-fade) ease, --sky-1 var(--theme-fade) ease, --sky-2 var(--theme-fade) ease,
    --sky-3 var(--theme-fade) ease, --sky-4 var(--theme-fade) ease,
    --streak-edge var(--theme-fade) ease, --streak-core var(--theme-fade) ease,
    --fallback-far var(--theme-fade) ease, --fallback-near var(--theme-fade) ease;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

main { flex: 1; }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.2;
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}

p { margin: 0 0 var(--space-3); }

strong { font-weight: 400; color: var(--ink); }

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease-out), text-decoration-color var(--dur) var(--ease-out);
}
a:hover { color: var(--accent); text-decoration-color: var(--accent); }

:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}

::selection { background: var(--accent); color: var(--on-accent); }

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-3);
  z-index: 100;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
}
.skip-link:focus { top: var(--space-3); color: var(--bg); }

/* ---- Utility ------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: calc(var(--narrow) + 2 * var(--gutter)); }

.mono {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.7;
}

.dim { color: var(--dim); }

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

/* ---- Header / nav --------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out),
              opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.site-header.is-scrolled {
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line-soft);
}
/* On the home page the title card carries its own nav; the bar only
   appears once the card has been scrolled away. */
.site-header.home:not(.is-scrolled) {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  min-height: var(--header-h);
  flex-wrap: wrap;
  /* the first row is toggle-height so the brand centres on the fixed theme
     toggle, which sits on this line; the right padding keeps the nav clear
     of it (on phones the nav wraps under the brand instead) */
  padding-block: calc((var(--header-h) - var(--toggle-size)) / 2);
  padding-right: calc(var(--gutter) + var(--toggle-size) + var(--space-4));
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--toggle-size);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.brand:hover { color: var(--ink); }

.site-nav ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: clamp(1rem, 3vw, 2.75rem);
}
.site-nav a {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: clamp(0.22em, 1vw, 0.36em);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dim);
  padding-block: 0.4rem;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); }

/* ---- Theme toggle ---------------------------------------------------------
   A quiet circle fixed to the top right, in line with the header nav (and
   reachable on the home page while the header is hidden over the title card).
   Its right edge follows the content column, which is the viewport gutter
   until the column reaches its maximum width. Sun in the dark, moon in the
   light: the icon shows where the button takes you. */
.theme-toggle {
  position: fixed;
  top: calc((var(--header-h) - var(--toggle-size)) / 2);
  right: max(var(--gutter), calc((100% - 78rem) / 2 + var(--gutter)));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--toggle-size);
  height: var(--toggle-size);
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--toggle-bg);
  color: var(--dim);
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out);
}
.theme-toggle svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
.theme-toggle:hover,
.theme-toggle:focus-visible {
  color: var(--ink);
  border-color: var(--dim);
}
.theme-toggle:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}

/* ---- Hero: the title card ------------------------------------------------- */
.hero { position: relative; }

.title-card {
  position: relative;
  min-height: min(100vh, 1200px);   /* ultra-tall viewports: the card does not stretch forever */
  min-height: min(100svh, 1200px);
  display: flex;
  flex-direction: column;
  overflow: clip;
}

/* the sky: a very dark dusk gradient, almost black, warming just above the line */
.hero-sky {
  position: relative;
  flex: 0 0 auto;
  height: min(63vh, 760px);
  height: min(63svh, 760px);
  min-height: 300px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky-0) 0%, var(--sky-1) 30%, var(--sky-2) 68%, var(--sky-3) 90%, var(--sky-4) 100%);
}

/* cloud.js puts the model 62% across a landscape mount; shifting the mount
   left by that excess centres the model under the name */
/* the sun: a soft glow centred on the horizon, behind the cloud; invisible at night */
.hero-sky::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 900px;
  height: 900px;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  opacity: var(--sun-opacity);
  background: radial-gradient(circle, rgba(255, 252, 240, 1) 0, rgba(255, 248, 225, 0.85) 14%, rgba(255, 244, 215, 0.35) 32%, rgba(255, 240, 210, 0) 55%);
  transition: opacity var(--theme-fade) ease;
}
.hero-canvas {
  position: absolute;
  top: 6%;
  left: -12%;
  width: 100%;
  height: 100%;
  z-index: 1;
  /* cloud.js draws light on a transparent canvas; on paper the mount is
     inverted and multiplied so the same points read as ink (dark theme: none) */
  filter: var(--cloud-filter);
  mix-blend-mode: var(--cloud-blend);
}
.hero-canvas canvas { display: block; width: 100%; height: 100%; }

/* fallback when WebGL unavailable */
.hero-fallback {
  background:
    radial-gradient(ellipse 36% 52% at 62% 44%, var(--fallback-far), transparent 70%),
    radial-gradient(ellipse 18% 26% at 62% 44%, var(--fallback-near), transparent 70%);
}

/* the horizon: one pixel, with a soft blue-white lens streak across its middle */
.hero-horizon {
  position: relative;
  z-index: 1;
  display: block;
  height: 1px;
  background: var(--horizon);
}
.hero-horizon::before {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  top: -4px;
  height: 9px;
  pointer-events: none;
  filter: blur(3px);
  opacity: var(--streak-opacity);
  background: linear-gradient(90deg, transparent 0%, var(--streak-edge) 32%, var(--streak-core) 50%, var(--streak-edge) 68%, transparent 100%);
}

/* the card: kicker, name, nav */
.hero-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-5) var(--gutter) var(--space-6);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.hero-kicker, .hero-title, .hero-nav, .hero-hud {
  animation: rise 900ms var(--ease-out) backwards;
}
.hero-title { animation-delay: 120ms; }
.hero-nav { animation-delay: 260ms; }
.hero-hud { animation-delay: 420ms; }

.hero-kicker {
  display: block;
  color: var(--dim);
  padding-left: 0.18em;
  margin-bottom: var(--space-4);
}

.hero-title {
  font-weight: 200;
  font-size: clamp(1.5rem, 3.2vw, 2.875rem);
  line-height: 1.1;
  letter-spacing: var(--track-name);
  padding-left: var(--track-name);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-strong);
  margin: 0 0 var(--space-5);
}

.hero-nav ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4.5vw, 4rem);
}
.hero-nav a {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: var(--track-nav);
  padding-left: var(--track-nav);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dim);
}
.hero-nav a:hover { color: var(--ink); }

/* mono readout bottom-left, scroll cue bottom-right */
.hero-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-5);
  padding: 0 var(--gutter) var(--space-5);
  color: var(--dim);
}
.hero-hud .hud-mode { min-width: 22ch; }
.hero-hud .hud-mode em { color: var(--accent); font-style: normal; }
.hud-scroll { margin-left: auto; }
.hud-scroll a { color: var(--dim); text-decoration: none; display: inline-block; }
.hud-scroll a:hover { color: var(--ink); }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}
.hud-scroll a { animation: bob 2.6s ease-in-out infinite; }
.hud-scroll a:hover { animation-play-state: paused; }

/* the one-line statement after the card */
.hero-sub {
  max-width: 36em;
  margin: 0 auto;
  padding: var(--space-7) var(--gutter) var(--space-3);
  text-align: center;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.65;
  color: var(--body);
  text-wrap: balance;
}
.hero-sub strong { color: var(--ink); font-weight: 400; }

/* ---- Section scaffolding ---------------------------------------------------- */
.section { padding-block: clamp(4rem, 9vh, 6.5rem); }
.section--flush { padding-top: 0; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.section-head h2 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  display: flex;
  gap: 1.6em;
  line-height: 1.7;
}
.section-head .index { color: var(--dim); font-size: inherit; letter-spacing: inherit; }
.section-head .more { color: var(--dim); text-decoration: none; white-space: nowrap; }
.section-head .more:hover { color: var(--accent); }

/* ---- Work grid ---------------------------------------------------------------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: calc(-1 * var(--space-3)) 0 var(--space-5);
}
.filter-btn {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 0.3rem 0 0.2rem;
  cursor: pointer;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.filter-btn:hover { color: var(--ink); }
.filter-btn[aria-pressed="true"] { color: var(--accent); border-bottom-color: var(--accent); }

.work-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6) var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 720px) {
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.work-card { position: relative; }
.work-card.is-hidden { display: none; }

.work-card a {
  display: block;
  text-decoration: none;
  color: var(--ink);
}

/* three equal 16:9 frames */
.work-thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-2);
}
.work-thumb svg, .work-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.85);
  transition: filter 500ms var(--ease-out);
}
.work-card a:hover .work-thumb svg,
.work-card a:hover .work-thumb img,
.work-card a:focus-visible .work-thumb svg,
.work-card a:focus-visible .work-thumb img { filter: none; }

@keyframes cardIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.work-grid.did-filter .work-card:not(.is-hidden) { animation: cardIn 320ms var(--ease-out) backwards; }

/* title first, then meta, then the description (the markup keeps meta first) */
.work-body {
  padding-top: var(--space-4);
  display: flex;
  flex-direction: column;
}
.work-title {
  order: 1;
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.45;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-strong);
  margin: 0 0 var(--space-2);
  transition: color var(--dur) var(--ease-out);
}
.work-card a:hover .work-title,
.work-card a:focus-visible .work-title { color: var(--accent); }
.work-meta {
  order: 2;
  display: flex;
  color: var(--dim);
  margin-bottom: var(--space-3);
}
.work-meta span + span::before { content: '\00b7'; margin: 0 0.7em; }
.work-desc {
  order: 3;
  color: var(--body);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 var(--space-3);
}
.work-tags {
  order: 4;
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.tag + .tag::before { content: '\00b7'; margin: 0 0.7em; }

/* ---- Writing list ---------------------------------------------------------------- */
.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-soft);
}
.post-list li { border-bottom: 1px solid var(--line-soft); }
.post-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  padding: var(--space-4) 0;
  text-decoration: none;
  color: var(--ink);
}
@media (min-width: 720px) {
  .post-list a { grid-template-columns: 11ch minmax(0, 1fr) auto; align-items: baseline; }
}
.post-date { color: var(--dim); }
.post-title {
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
  transition: color var(--dur) var(--ease-out);
}
.post-list a:hover .post-title { color: var(--accent); }
.post-summary {
  grid-column: 1 / -1;
  color: var(--body);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
  max-width: var(--measure);
}
@media (min-width: 720px) {
  .post-summary { grid-column: 2; }
}
.post-arrow {
  color: var(--dim);
  display: none;
  transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
@media (min-width: 720px) { .post-arrow { display: block; } }
.post-list a:hover .post-arrow { transform: translateX(6px); color: var(--accent); }

/* ---- Prose (post body, about, project body) --------------------------------------- */
.prose {
  max-width: var(--measure);
  margin-inline: auto;
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--body);
}
.prose h2 {
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
  margin: var(--space-6) 0 var(--space-3);
}
.prose > :first-child { margin-top: 0; }
.prose h3 {
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: var(--space-5) 0 var(--space-3);
}
.prose strong { color: var(--ink); font-weight: 400; }
.prose a {
  color: var(--accent);
  text-decoration-color: var(--accent-line);
}
.prose a:hover { color: var(--ink); text-decoration-color: var(--ink); }
.prose blockquote {
  margin: var(--space-4) 0;
  padding-left: var(--space-4);
  border-left: 1px solid var(--accent);
  color: var(--body);
  font-style: italic;
}
.prose code {
  font-family: var(--font-mono);
  font-size: 0.82em;
  background: var(--bg-3);
  padding: 0.15em 0.4em;
}
.prose pre {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  padding: var(--space-3) var(--space-4);
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.6;
  margin: var(--space-4) 0;
}
.prose pre code { background: none; padding: 0; }
.prose img {
  border: 1px solid var(--line-soft);
  margin-block: var(--space-4);
}
.prose hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--space-6) 0;
}
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin-bottom: 0.4em; }

/* ---- Page headers (subpages): the title card at a smaller size ----------------------- */
.page-head {
  padding-top: calc(var(--header-h) + var(--space-7));
  padding-bottom: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.page-head .kicker {
  display: block;
  color: var(--dim);
  padding-left: 0.18em;
  margin-bottom: var(--space-4);
}
.page-head .kicker a { color: inherit; text-decoration: none; }
.page-head .kicker a:hover { color: var(--ink); }
.page-head h1 {
  font-weight: 200;
  font-size: clamp(1.4rem, 2.6vw, 2.25rem);
  line-height: 1.4;
  letter-spacing: var(--track-head);
  padding-left: var(--track-head);
  text-transform: uppercase;
  color: var(--ink-strong);
  margin: 0 0 var(--space-4);
  max-width: 24em;
}
.page-head .lede {
  color: var(--body);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.65;
  max-width: 36em;
  margin: 0;
  text-wrap: balance;
}
.page-head .lede.mono { font-size: 0.7rem; color: var(--dim); }

/* ---- Project detail --------------------------------------------------------------- */
.project-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-4);
  border-block: 1px solid var(--line-soft);
  padding-block: var(--space-4);
  margin: var(--space-5) 0 var(--space-6);
}
.project-meta div { min-width: 0; }
.project-meta dt { color: var(--dim); margin-bottom: var(--space-2); }
.project-meta dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.55;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink);
}

.media-slot {
  border: 1px dashed var(--line);
  background: var(--bg-2);
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  color: var(--dim);
  margin-block: var(--space-5);
  text-align: center;
  padding: var(--space-3);
}
.media-slot--wide { aspect-ratio: 21 / 9; }
.media-slot--portrait { aspect-ratio: 4 / 5; margin-block: var(--space-4) 0; }

/* Figures inside a project page. Use data-portrait on the figure for
   phone-shot vertical clips so they don't dominate the column. */
.project-figure {
  margin: var(--space-6) auto;
}
.project-figure img,
.project-figure video {
  width: 100%;
  height: auto;
  background: var(--bg-2);
}
.project-figure[data-portrait] { max-width: 22rem; }
.project-figure--narrow { max-width: 40rem; }
.project-figure figcaption {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--dim);
  margin-top: var(--space-3);
  text-align: center;
}
.project-figure.pair {
  display: grid;
  gap: var(--space-3);
  max-width: none;
}
@media (min-width: 720px) {
  .project-figure.pair { grid-template-columns: 1fr 1fr; align-items: end; }
}

.project-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  border-top: 1px solid var(--line-soft);
  margin-top: var(--space-7);
  padding-top: var(--space-4);
}
.project-nav a { text-decoration: none; color: var(--dim); }
.project-nav a:hover { color: var(--accent); }

/* ---- About ------------------------------------------------------------------------- */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}
@media (min-width: 900px) {
  .about-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; column-gap: var(--space-7); }
  .about-grid .prose { margin-inline: 0; }
}
.about-aside {
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
}
.about-aside h3 { color: var(--dim); margin-bottom: var(--space-3); font-weight: 400; }
.about-aside ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line-soft); }
.about-aside li {
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--line-soft);
  color: var(--body);
  font-size: 0.95rem;
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}
.about-aside li .mono { color: var(--dim); text-align: right; }
.about-aside li .mono a { color: inherit; text-decoration: none; }
.about-aside li .mono a:hover { color: var(--accent); }

/* ---- Domain index (home) -------------------------------------------------------------- */
#about-teaser .prose { margin: 0 0 var(--space-6); }
.domain-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-5);
}
@media (min-width: 900px) {
  .domain-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.domain-grid li {
  border-top: 1px solid var(--line);
  padding-top: var(--space-4);
}
.domain-grid .domain-id { color: var(--dim); display: block; margin-bottom: var(--space-3); }
.domain-grid h3 {
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 1.5;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 var(--space-2);
}
.domain-grid p { color: var(--dim); margin: 0; font-size: 0.66rem; }

/* ---- Footer ------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line-soft);
  margin-top: var(--space-7);
}
.site-footer--bare { margin-top: 0; }

/* the centred call to action */
.footer-cta {
  padding-block: var(--space-7) var(--space-6);
  text-align: center;
}
.footer-cta h2 {
  font-weight: 200;
  font-size: clamp(1.2rem, 2.3vw, 1.875rem);
  line-height: 1.4;
  letter-spacing: clamp(0.18em, 1vw, 0.32em);
  padding-left: clamp(0.18em, 1vw, 0.32em);
  text-transform: uppercase;
  color: var(--ink-strong);
  margin: 0 0 var(--space-4);
}
.footer-cta a.cta-mail {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
  display: inline-block;
}
.footer-cta a.cta-mail:hover { color: var(--accent); }

/* the columns, laid out quietly */
.footer-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5) var(--space-4);
  padding-block: var(--space-6) var(--space-5);
  border-top: 1px solid var(--line-soft);
}
@media (min-width: 560px) {
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 860px) {
  .footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.footer-cols h3 {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 var(--space-3);
}
.footer-cols ul { list-style: none; margin: 0; padding: 0; }
.footer-cols li { margin-bottom: var(--space-2); }
.footer-cols a {
  color: var(--body);
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.footer-cols a:hover { color: var(--ink); }
.footer-note { color: var(--dim); font-size: 0.95rem; letter-spacing: 0.02em; }

/* the one centred row */
.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  gap: var(--space-2) var(--space-6);
  padding-block: var(--space-5);
  color: var(--dim);
  border-top: 1px solid var(--line-soft);
}

/* ---- Reveal on scroll ----------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (min-width: 720px) {
  .work-grid .work-card.reveal:nth-child(2n) { transition-delay: 90ms; }
}
@media (min-width: 1024px) {
  .work-grid .work-card.reveal:nth-child(3n+2) { transition-delay: 90ms; }
  .work-grid .work-card.reveal:nth-child(3n) { transition-delay: 180ms; }
}

/* HUD mode label brightens briefly when the cloud morphs */
@keyframes hudflash {
  0% { color: var(--ink); }
  100% { color: var(--dim); }
}
.hud-mode.is-flashing { animation: hudflash 900ms var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- 404 -------------------------------------------------------------------------------- */
.notfound {
  min-height: 70vh;
  display: grid;
  place-content: center;
  text-align: center;
  padding-top: var(--header-h);
}
.notfound h1 {
  font-weight: 200;
  font-size: clamp(4rem, 16vw, 10rem);
  line-height: 1;
  letter-spacing: 0.3em;
  padding-left: 0.3em;
  color: var(--ink-strong);
  margin-bottom: var(--space-4);
}
.notfound .dim { margin-bottom: var(--space-5); }
.notfound p a {
  color: var(--body);
  text-decoration: none;
  letter-spacing: 0.1em;
}
.notfound p a:hover { color: var(--accent); }

/* ---- Phone widths ------------------------------------------------------------------------ */
@media (max-width: 720px) {
  .hero-sky { height: min(52vh, 480px); height: min(52svh, 480px); min-height: 260px; }
  .title-card { min-height: min(100vh, 920px); min-height: min(100svh, 920px); }
  /* portrait mount: cloud.js centres the model itself */
  .hero-canvas { left: 0; }
  .hero-card { padding-block: var(--space-5); }
  .hero-hud .hud-mode { flex-basis: 100%; min-width: 0; }
  .hero-hud { gap: var(--space-2) var(--space-4); padding-bottom: var(--space-4); }
  .hero-sub { padding-top: var(--space-6); }
  .section-head { flex-wrap: wrap; }
  .project-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-base { flex-direction: column; }
}