/* ==========================================================================
   adambroder.com — site stylesheet
   One file, no build step. Loaded by every page.
   Design tokens and scale per design_handoff_site_redesign/README.md.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Ground */
  --ground: #0f1214;
  --panel: #141a1c;
  --media-bed: #000000;

  /* Text */
  --fg: #dfe3e6;
  --fg-bright: #eef1f3;

  /* Site chrome accent — always teal, never overridden by a tool page */
  --teal: oklch(0.72 0.1 205);
  --teal-text: oklch(0.78 0.1 205);
  --teal-link: oklch(0.82 0.1 205);

  /* Page accent — defaults to teal; tool pages override these three
     with their brand colour. See "Per-page accent" at the foot of this file. */
  --accent: var(--teal);
  --accent-text: var(--teal-text);
  --accent-link: var(--teal-link);

  /* Body text is --fg at reduced alpha rather than separate grey tokens */
  --fg-lead: rgba(223, 227, 230, .85);
  --fg-list: rgba(223, 227, 230, .72);
  --fg-body: rgba(223, 227, 230, .6);
  --fg-body-dim: rgba(223, 227, 230, .58);
  --fg-meta: rgba(223, 227, 230, .45);
  --fg-meta-dim: rgba(223, 227, 230, .4);
  --fg-faint: rgba(223, 227, 230, .32);

  /* Hairlines */
  --hair: rgba(223, 227, 230, .1);
  --hair-card: rgba(223, 227, 230, .12);
  --hair-strong: rgba(223, 227, 230, .14);
  --hair-hover: rgba(223, 227, 230, .24);
  --ghost: rgba(223, 227, 230, .07);

  /* Tool brand colours — canonical values from the Deck family branding kit
     (GraphDeckMain/Branding/README.md), which generated the lockup PNGs.
     The handoff README eyeballed these from the artwork and is a shade off. */
  --brand-stayput: #e0a24a;
  --brand-quickadd: #a78bfa;
  --brand-graphdeck: #4a9eed;
  --brand-trackdeck: #14b8a6;
  --brand-reviewdeck: #d98fa6;

  /* Type */
  --font-display: 'Big Shoulders Display', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Layout */
  --maxw: 1560px;
  --gutter: clamp(20px, 3vw, 48px);
  --sec-pad: clamp(44px, 5vw, 68px);
  --sub-pad: clamp(36px, 4.5vw, 56px);

  /* Motion */
  --t: 250ms ease;
}

/* --- Base ----------------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

body {
  background: var(--ground);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }

a { color: var(--fg); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--accent-link); }

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

/* Square corners and flat surfaces everywhere — deliberate, see README. */

/* --- Type utilities ------------------------------------------------------- */

.display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: .85;
  color: var(--fg-bright);
}

.mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.mono--wide { letter-spacing: .28em; }
.mono--sm { font-size: 9px; letter-spacing: .14em; }

/* Small mono link — "All tools →", "More about me →" */
.link-mono {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-meta);
}
.link-mono:hover { color: var(--accent-link); }
.link-mono--accent { color: var(--accent-text); }

.lead { font-size: clamp(18px, 1.7vw, 23px); line-height: 1.6; color: var(--fg-lead); }
.body { font-size: 14px; line-height: 1.75; color: var(--fg-body-dim); }

/* Eyebrow: short accent rule followed by a mono label */
.eyebrow { display: flex; align-items: center; gap: 14px; }
.eyebrow::before { content: ''; width: 34px; height: 1px; background: var(--accent); flex: none; }
.eyebrow > span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--accent-text); }

/* --- Layout --------------------------------------------------------------- */

.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.sec { padding-top: var(--sec-pad); }
.sec--sub { padding-top: var(--sub-pad); }

/* A band that steps up from ground — tools, CTAs */
.band {
  background: var(--panel);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.band__inner { max-width: var(--maxw); margin: 0 auto; padding: var(--sub-pad) var(--gutter); }

/* Section head: display heading left, mono meta right */
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.sec-head__h { font-family: var(--font-display); font-weight: 700; font-size: clamp(48px, 6vw, 84px); line-height: .85; text-transform: uppercase; color: var(--fg-bright); }
.sec-head__meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-meta-dim); text-align: right; }

/* --- Media ---------------------------------------------------------------- */

.media { overflow: hidden; background: var(--media-bed); }
.media > img, .media > video { width: 100%; height: 100%; object-fit: cover; }

.ar-cine { aspect-ratio: 2.39 / 1; }
.ar-wide { aspect-ratio: 16 / 9; }
.ar-port { aspect-ratio: 3 / 4; }
.ar-bleed { aspect-ratio: 3.2 / 1; }

/* Placeholder slot for artwork that does not exist yet */
.slot {
  background: repeating-linear-gradient(135deg, rgba(223,227,230,.07) 0 8px, rgba(223,227,230,.02) 8px 16px);
  display: flex;
  align-items: flex-end;
  padding: 14px;
}
.slot__label { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-meta); }

/* --- Coming-soon strip (sits above the first work row) --------------------- */

.coming-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 36px 22px;
  margin-bottom: clamp(24px, 3vw, 44px);
  border: 1px solid var(--hair-card);
  background: repeating-linear-gradient(135deg, rgba(223, 227, 230, .05) 0 8px, rgba(223, 227, 230, .015) 8px 16px);
}
.coming-strip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.coming-strip__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); }
.coming-strip__note { font-size: 14px; color: var(--fg-body); }
.coming-strip__meta { margin-left: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-meta); }

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  border: 1px solid rgba(223, 227, 230, .25);
  color: var(--fg-lead);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: border-color var(--t), color var(--t);
}
.btn:hover { border-color: var(--hair-hover); color: var(--fg-bright); }

.btn--accent { border-color: var(--accent); color: var(--accent-link); }
.btn--accent:hover { border-color: var(--accent-link); color: var(--accent-link); }

.btn--lg { padding: 16px 34px; font-size: 11px; }

/* --- Nav ------------------------------------------------------------------ */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 16px var(--gutter);
  background: rgba(15, 18, 20, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair);
}
.nav__logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-bright);
}
.nav__links { display: flex; gap: clamp(14px, 2vw, 28px); flex-wrap: wrap; list-style: none; }
.nav__links a {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(223, 227, 230, .55);
}
.nav__links a:hover { color: var(--accent-link); }
/* Current section, and the Contact link, take the accent */
.nav__links a.is-current { color: var(--accent-text); }
.nav__links a.is-contact { color: var(--teal-text); }

/* --- Hero ----------------------------------------------------------------- */

.hero { position: relative; min-height: 92vh; overflow: hidden; background: var(--media-bed); }
.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.62) contrast(1.08) saturate(.72);
}
.hero__still { display: none; }
/* Loading: the reel is invisible until it can play, then fades in. No poster frame. */
video.hero__media { opacity: 0; transition: opacity .8s ease; }
.hero.is-ready video.hero__media { opacity: 1; }
.hero.is-failed video.hero__media { display: none; }
.hero.is-failed .hero__still { display: block; }
.hero__loading {
  position: absolute;
  right: var(--gutter);
  bottom: 22px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(223, 227, 230, .38);
  transition: opacity var(--t);
}
.hero.is-ready .hero__loading, .hero.is-failed .hero__loading { opacity: 0; }
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(15, 18, 20, .38) 0%,
    rgba(15, 18, 20, 0) 24%,
    rgba(15, 18, 20, .12) 52%,
    rgba(15, 18, 20, .42) 80%,
    rgba(15, 18, 20, .78) 94%,
    var(--ground) 100%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Full width, not the 1560px column: the name sits bottom-left at any screen size (Adam, 2026-09-07) */
  padding: 0 var(--gutter) clamp(48px, 6vh, 80px);
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(72px, 12vw, 180px);
  line-height: .82;
  text-transform: uppercase;
  color: var(--fg-bright);
  margin-top: 14px;
}
.hero__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; flex-wrap: wrap; margin-top: 24px; }
.hero__tag { font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; max-width: 460px; color: var(--fg-body); }
.hero__ctas { display: flex; gap: 10px; flex-wrap: wrap; }

/* --- Client ticker -------------------------------------------------------- */

/* Positioned and raised above all page content (nav at 50 and the modal at
   100 still cover it), so nothing that reflows during a window resize can
   end up painting over it: as a bare static block it sat in the lowest
   paint layer, under every positioned element on the page. */
.ticker {
  position: relative;
  z-index: 10;
  overflow: hidden;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  padding: 14px 0;
  background: var(--ground);
}
/* The track is a block-level flex with explicit metrics, deliberately.
   As an inline-flex, its layer bounds depended on the font's strut and
   Chromium's GPU compositor could clip the animated layer to stale
   (fallback-font) bounds, slicing the glyph bottoms. Fixed line-height
   plus width:max-content keeps the bounds stable across font swap. */
.ticker__track {
  display: flex;
  width: max-content;
  animation: tick 52s linear infinite;
}
.ticker__item {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--fg-faint);
  padding: 0 32px;
  white-space: nowrap;
}
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- Work rows ------------------------------------------------------------ */

/* The whole row is one link — no nested anchors inside it. */
.work-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 3vw, 44px);
  align-items: center;
  padding-bottom: clamp(32px, 4vw, 52px);
  color: inherit;
}
.work-row:hover { color: inherit; }
.work-row:hover .work-row__title { color: var(--accent-link); }
/* Asymmetric by design — 62/38 above ~800px. Do not equalise. */
.work-row__media { flex: 3.4 1 420px; position: relative; }
/* The still is absolutely positioned so it always fills the box's real used
   size (a percentage-height img inside a min-height-stretched box does not,
   and letterboxes). The box's size comes from aspect-ratio (mobile) or the
   uniform row height (desktop). */
.work-row__media > img { position: absolute; inset: 0; }
.work-row__media img,
.work-row__media video { transition: filter var(--t); }
.work-row__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--t); }
.work-row:hover .work-row__media video { opacity: 1; }
.work-row__media video.is-playing { opacity: 1; }
.work-row__text { flex: 2 1 320px; position: relative; }

/* Ghost numeral sits in flow, pulled up so the text overlaps it.
   It must NOT be absolutely positioned — that lets it escape into the row above. */
.work-row__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 130px;
  line-height: .78;
  color: var(--ghost);
  pointer-events: none;
  margin-bottom: -44px;
}
.work-row__body { position: relative; }
.work-row__client { font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-text); }
.work-row__title {
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 3.4vw, 48px);
  line-height: .92;
  text-transform: uppercase;
  color: var(--fg-bright);
}
.work-row__desc { margin-top: 14px; font-size: 14px; line-height: 1.7; color: var(--fg-body-dim); max-width: 420px; }
.work-row__role { margin-top: 20px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(223, 227, 230, .75); }

/* Rows alternate: odd rows text-right, even rows text-left. Below 800px the
   rows stack, image first (DOM order), and the hairline separates them.
   Desktop: the still fills the whole row edge to edge; the text sits on a
   solid panel (page ground breathed with the row's --tint) whose inner edge
   fades into the footage. --tint is set inline per row by
   scripts/apply_row_tints.py -- re-run it when a thumbnail changes. */
.work-row {
  position: relative;
  --row-panel: color-mix(in srgb, var(--ground) 80%, var(--tint, var(--ground)));
}

@media (max-width: 799px) {
  .work-row + .work-row { border-top: 1px solid var(--hair); padding-top: clamp(28px, 3.5vw, 44px); }
  /* The still crops to ~1.4:1 for poster presence; img/video cover-crop
     identically so the hover/scroll clip stays frame-matched. */
  .work-row__media { aspect-ratio: 7 / 5; }
  /* Same grammar as desktop, rotated: the text panel rides deep over the
     still's bottom edge and the blend runs downward into the panel. */
  /* The gradient must reach full opacity BEFORE the image's bottom edge
     (solid distance < overlap depth), or the image's hard edge shows
     through the semi-transparent blend as a seam. */
  .work-row__text {
    --blend: clamp(100px, 30vw, 190px);
    margin-top: calc(-1 * clamp(110px, 34vw, 210px));
    padding: clamp(110px, 32vw, 200px) 4px 0;
    background: linear-gradient(to bottom,
      transparent 0,
      color-mix(in srgb, var(--row-panel) 16%, transparent) calc(var(--blend) * .25),
      color-mix(in srgb, var(--row-panel) 50%, transparent) calc(var(--blend) * .5),
      color-mix(in srgb, var(--row-panel) 84%, transparent) calc(var(--blend) * .75),
      var(--row-panel) var(--blend));
  }
}

@media (min-width: 800px) {
  /* Grid, one cell: the still and the text panel overlap, and the row is as
     tall as whichever is taller. The still keeps its 2.39 frame when the
     text is short; when the text is taller (narrow windows, long copy) the
     still cover-fills the row instead of the panel spilling out of it. */
  .work-row { display: grid; grid-template-columns: 1fr; align-items: stretch; padding-bottom: 0; margin-bottom: clamp(24px, 3vw, 44px); }
  /* Uniform row height for every row: equals the still's natural 2.39
     height at full width (so nothing is cropped there), floored at narrow
     widths so the text always fits; the still cover-crops to whatever the
     row is. A definite height (not aspect-ratio) so the image fills it. */
  .work-row__media {
    grid-area: 1 / 1;
    justify-self: start;
    width: 72%;
    aspect-ratio: auto;
    height: clamp(380px, calc((100vw - 2 * var(--gutter)) * .301), 441px);
    min-height: 100%;
  }
  .work-row:nth-of-type(even) .work-row__media { justify-self: end; }
  /* The text panel spans the row's full height beside it, solid on its outer
     side, dissolving into the footage across its inner edge. */
  .work-row__text {
    /* The dissolve must finish inside the media/panel overlap or the still's
       edge shows through (seen at 2800px, 2026-09-07). Panel 54% / 740px over
       a 72% still gives ~330px of overlap at the 1560px cap, so a 320px
       dissolve fits at every width. Adam wanted it softer (2026-09-07). */
    --blend: clamp(160px, 22vw, 320px);
    grid-area: 1 / 1;
    justify-self: end;
    position: relative;
    width: min(54%, 740px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px clamp(12px, 1.5vw, 24px) 32px calc(var(--blend) + 20px);
    /* eased dissolve: many stops so no band is visible along it */
    background: linear-gradient(to right,
      transparent 0,
      color-mix(in srgb, var(--row-panel) 2%, transparent) calc(var(--blend) * 0.125),
      color-mix(in srgb, var(--row-panel) 9%, transparent) calc(var(--blend) * 0.25),
      color-mix(in srgb, var(--row-panel) 23%, transparent) calc(var(--blend) * 0.375),
      color-mix(in srgb, var(--row-panel) 42%, transparent) calc(var(--blend) * 0.5),
      color-mix(in srgb, var(--row-panel) 62%, transparent) calc(var(--blend) * 0.625),
      color-mix(in srgb, var(--row-panel) 80%, transparent) calc(var(--blend) * 0.75),
      color-mix(in srgb, var(--row-panel) 93%, transparent) calc(var(--blend) * 0.875),
      var(--row-panel) var(--blend));
  }
  .work-row:nth-of-type(even) .work-row__text {
    justify-self: start;
    padding: 32px calc(var(--blend) + 20px) 32px clamp(12px, 1.5vw, 24px);
    background: linear-gradient(to left,
      transparent 0,
      color-mix(in srgb, var(--row-panel) 2%, transparent) calc(var(--blend) * 0.125),
      color-mix(in srgb, var(--row-panel) 9%, transparent) calc(var(--blend) * 0.25),
      color-mix(in srgb, var(--row-panel) 23%, transparent) calc(var(--blend) * 0.375),
      color-mix(in srgb, var(--row-panel) 42%, transparent) calc(var(--blend) * 0.5),
      color-mix(in srgb, var(--row-panel) 62%, transparent) calc(var(--blend) * 0.625),
      color-mix(in srgb, var(--row-panel) 80%, transparent) calc(var(--blend) * 0.75),
      color-mix(in srgb, var(--row-panel) 93%, transparent) calc(var(--blend) * 0.875),
      var(--row-panel) var(--blend));
  }
}

/* Narrow desktop: keep the panel copy compact so it rarely out-grows the still */
@media (min-width: 800px) and (max-width: 1100px) {
  .work-row__desc { font-size: 13px; line-height: 1.6; }
  .work-row__num { font-size: 96px; margin-bottom: -30px; }
}

/* --- Archive -------------------------------------------------------------- */

.arch-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  border-top: 1px solid var(--hair);
  padding-top: 26px;
  margin-bottom: 20px;
}
.arch-head__h { font-family: var(--font-display); font-weight: 700; font-size: 32px; text-transform: uppercase; color: rgba(223, 227, 230, .55); }
.arch-head__count { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }

.arch-outer { position: relative; }
.arch-clip { max-height: 260px; overflow: hidden; transition: max-height .7s cubic-bezier(.4, 0, .2, 1); }
.arch-outer.is-open .arch-clip { max-height: 4000px; }
.arch-mask {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 60%;
  background: linear-gradient(180deg, transparent 0%, var(--ground) 78%);
  pointer-events: none;
  transition: opacity var(--t);
}
.arch-outer.is-open .arch-mask { opacity: 0; }

.arch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.arch-card { display: block; }
.arch-card img { filter: brightness(.75); transition: filter var(--t); }
.arch-card:hover img { filter: brightness(1); }
/* Archive hover clips: same first-frame-matched convention as work rows */
.arch-card .media { position: relative; }
.arch-card .media video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--t);
}
.arch-card:hover .media video { opacity: 1; }
.arch-card__cap {
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-body);
  transition: color var(--t);
}
.arch-card:hover .arch-card__cap { color: var(--fg-bright); }

.arch-toggle {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin-top: 18px;
  padding: 12px 0;
  background: none;
  border: none;
  border-top: 1px solid var(--hair);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-meta);
  text-align: left;
  transition: color var(--t);
}
.arch-toggle:hover { color: var(--accent-link); }
.arch-toggle__label { flex: 1; }

/* --- Tool cards (homepage band + rails) ----------------------------------- */

.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 28px; }
.tool-card { display: block; border: 1px solid var(--hair-strong); background: var(--ground); transition: border-color var(--t); }
.tool-card:hover { border-color: var(--hair-hover); }
/* Product shot. The panel renders are portrait, so they are contained and
   centred on the media bed rather than cropped to fill a 16:9 box. */
.tool-shot {
  aspect-ratio: 16 / 9;
  background: var(--media-bed);
  border-bottom: 1px solid var(--hair-card);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.tool-shot img { max-height: 100%; width: auto; object-fit: contain; }
/* Desktop-app cards: the shot fills the slot edge to edge, no padding gutter. */
.tool-shot--fill { padding: 0; }
.tool-shot--fill img { width: 100%; height: 100%; max-height: none; object-fit: cover; }

.tool-card__body { padding: 24px 26px 26px; }
.tool-card__head { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.tool-card__tagline { margin-top: 18px; font-size: 16px; line-height: 1.5; color: var(--fg-lead); }
.tool-card__desc { margin-top: 12px; font-size: 14px; line-height: 1.75; color: rgba(223, 227, 230, .55); }
.tool-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--hair-card);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.tool-card__spec { color: rgba(223, 227, 230, .42); }

.lockup { height: 38px; width: auto; }
.lockup--sm { height: 26px; }
.lockup--xs { height: 24px; }
.lockup--lg { height: clamp(64px, 8vw, 104px); }
/* Text that follows a wordmark image, e.g. "GraphDeck" + "Connector" */
.lockup-suffix { font-family: var(--font-body); font-weight: 500; letter-spacing: -.01em; line-height: 1; color: var(--fg-bright); }
.lockup-suffix--lg { font-size: clamp(38px, 4.8vw, 62px); }
.lockup-suffix--sm { font-size: 17px; }
.lockup-suffix--xs { font-size: 15px; }

.status {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(223, 227, 230, .55);
}
.status--dim { color: rgba(223, 227, 230, .42); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.dot--sm { width: 5px; height: 5px; opacity: .7; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.chip {
  border: 1px solid rgba(223, 227, 230, .16);
  padding: 5px 9px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(223, 227, 230, .5);
}

/* Tier label — a mono caption with a rule running out to the right */
.tier {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-meta-dim);
}
.tier::after { content: ''; flex: 1; height: 1px; background: var(--hair); }

/* Secondary tool cards */
.devtool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
/* Short row (two or three cards): cap the grid, not the tracks, so the cards share one row without stretching the full 1560px */
.devtool-grid--pair { max-width: 1380px; }
.devtool-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid var(--hair);
  background: var(--ground);
  padding: 22px 22px 20px;
  transition: border-color var(--t);
}
.devtool-card:hover { border-color: var(--hair-hover); }
.devtool-card__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.devtool-card__head img { opacity: .9; }
.devtool-card__glyph { opacity: .55; flex: none; }
.devtool-card__tagline { flex: 1; font-size: 14px; line-height: 1.6; color: rgba(223, 227, 230, .58); }
.devtool-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
}
.devtool-card__site { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }

/* --- Craft strips --------------------------------------------------------- */

.craft-row {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 26px);
  padding: 22px 0;
  border-top: 1px solid var(--hair);
  flex-wrap: wrap;
}
.craft-row:last-child { border-bottom: 1px solid var(--hair); }
.craft-tick { width: 4px; height: 52px; background: rgba(223, 227, 230, .18); flex: none; }
.craft-row:first-of-type .craft-tick { background: var(--accent); }
.craft-idx { width: 56px; flex: none; font-family: var(--font-mono); font-size: 11px; color: var(--fg-meta-dim); padding-top: 4px; }
.craft-title { width: 290px; flex: none; font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: .95; text-transform: uppercase; color: var(--fg-bright); }
.craft-desc { flex: 1; min-width: 280px; font-size: 14px; line-height: 1.75; color: var(--fg-body-dim); }
.craft-tools { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: rgba(223, 227, 230, .38); }

/* --- About ---------------------------------------------------------------- */

.about { display: flex; flex-wrap: wrap; justify-content: space-between; gap: clamp(28px, 4vw, 52px); align-items: flex-start; }
.about__text { flex: 1 1 460px; }
.about__quote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(56px, 7vw, 96px);
  line-height: .85;
  text-transform: uppercase;
  color: var(--fg-bright);
  margin-bottom: 22px;
}
.about__p { font-size: 16px; line-height: 1.85; color: rgba(223, 227, 230, .62); max-width: 640px; }
.about__p + .about__p { margin-top: 16px; }
.about__p strong { color: var(--fg-bright); font-weight: 300; }
.about__name { margin-top: 20px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-meta-dim); }
.about__portrait { flex: 0 0 280px; }

/* --- Showreel ------------------------------------------------------------- */

.reel { width: 100%; aspect-ratio: 1920 / 890; background: var(--media-bed); border: 1px solid var(--hair-strong); object-fit: contain; }

/* --- Contact -------------------------------------------------------------- */

.contact__h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(84px, 14vw, 200px);
  line-height: .8;
  text-transform: uppercase;
  color: var(--fg-bright);
}
.contact__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; flex-wrap: wrap; margin-top: 28px; }
.contact__note { font-size: 15px; line-height: 1.75; color: var(--fg-body); max-width: 440px; }
.email-link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--accent-link);
}
.socials { margin-top: 12px; display: flex; gap: 18px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.socials a { color: var(--fg-meta); }

/* --- Footer --------------------------------------------------------------- */

.site-foot {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 18px var(--gutter);
  border-top: 1px solid var(--hair);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* --- Breadcrumb (tool + project pages) ------------------------------------ */

.crumb { display: flex; gap: 10px; align-items: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-meta-dim); }
.crumb a { color: var(--fg-meta-dim); }
.crumb__here { color: rgba(223, 227, 230, .75); }

/* --- Tool page ------------------------------------------------------------ */

.tool-hero { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 36px; margin-top: clamp(28px, 4vw, 44px); }
.tool-hero__main { flex: 1 1 460px; }
.tool-hero__tagline { margin-top: clamp(20px, 2.5vw, 28px); font-size: clamp(20px, 2.2vw, 30px); line-height: 1.35; color: var(--fg-bright); max-width: 640px; }
.tool-hero__side { flex: 0 1 300px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

.pill {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.tool-spec { font-family: var(--font-mono); font-size: 10px; line-height: 1.9; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-meta); }

.demo { position: relative; border: 1px solid var(--hair-strong); }
.play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 78px; height: 78px;
  border: 1px solid color-mix(in srgb, var(--accent) 65%, transparent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-text);
  font-size: 18px;
  padding-left: 4px;
}
.caption { margin-top: 10px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(223, 227, 230, .38); }

.split { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 56px); }
.split__h { flex: 0 0 320px; font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 4.5vw, 60px); line-height: .85; text-transform: uppercase; color: var(--fg-bright); }
.split__p { flex: 1 1 420px; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.75; color: var(--fg-list); max-width: 760px; }

.h-sub { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 3.6vw, 48px); line-height: .9; text-transform: uppercase; color: var(--fg-bright); }

.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 clamp(20px, 2.5vw, 40px); }
.feat { padding: 22px 0; border-top: 1px solid var(--hair-card); }
.feat__h { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: .03em; text-transform: uppercase; color: var(--fg-bright); }
.feat__p { margin-top: 8px; font-size: 13.5px; line-height: 1.7; color: rgba(223, 227, 230, .55); }

.use-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 clamp(24px, 3vw, 48px); }
.use { display: flex; gap: 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--hair); }
.use__idx { font-family: var(--font-mono); font-size: 10px; color: var(--accent-text); flex: none; }
.use__t { font-size: 15px; line-height: 1.6; color: var(--fg-list); }

.detail-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border-top: 1px solid var(--hair-strong);
  border-bottom: 1px solid var(--hair-strong);
}
.detail-cell { padding: 24px 28px; border-right: 1px solid var(--hair-strong); }
.detail-cell:first-child { padding-left: 0; }
.detail-cell:last-child { border-right: none; }
.detail-cell__k { font-family: var(--font-mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: rgba(223, 227, 230, .38); }
.detail-cell__v { margin-top: 8px; font-size: 15px; color: var(--fg-bright); }
.detail-cell__v--tbd { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-meta); }
/* Homepage numbers strip: the figure in display type, the label above it as usual */
.detail-cell__v--big { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 3.6vw, 52px); line-height: 1; letter-spacing: .01em; margin-top: 10px; }
/* A list of names that only wraps between items, never inside one */
.stat-list { display: flex; flex-wrap: wrap; row-gap: 4px; }
.stat-list span { white-space: nowrap; }
.stat-list span:not(:last-child)::after { content: '·'; margin: 0 9px; color: var(--accent-text); }
@media (max-width: 640px) {
  .stat-list { flex-direction: column; row-gap: 6px; }
  .stat-list span::after { display: none; }
}

.cta-band { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 32px; }
.cta-band__h { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 5vw, 68px); line-height: .85; text-transform: uppercase; color: var(--fg-bright); }
.cta-band__note { margin-top: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-meta); max-width: 460px; }

.rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
/* align-items must not be stretch: the wordmark imgs have fixed heights,
   and a stretched width would distort their aspect ratio. */
.rail__card { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; border: 1px solid var(--hair); background: var(--ground); padding: 20px; transition: border-color var(--t); }
.rail__card:hover { border-color: var(--hair-hover); }
.rail-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 20px; }
.rail-head__h { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3vw, 38px); line-height: .9; text-transform: uppercase; color: var(--fg-body); }
.rail-head__all { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(223, 227, 230, .5); }

/* --- Project page --------------------------------------------------------- */

.proj-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; margin-top: clamp(24px, 3vw, 36px); }
.proj-head__main { flex: 1 1 480px; }
.proj-head__kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-text); }
.proj-head__title {
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(56px, 9vw, 132px);
  line-height: .82;
  text-transform: uppercase;
  color: var(--fg-bright);
}
.proj-head__roles { flex: 0 1 260px; font-family: var(--font-mono); font-size: 10px; line-height: 2; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-meta); text-align: right; }

.player { position: relative; aspect-ratio: 2.39 / 1; overflow: hidden; background: var(--media-bed); }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
/* YouTube-backed pages: the iframe cannot crop, so the box matches the upload's 16:9 */
.player--yt { aspect-ratio: 16 / 9; }
.player video { width: 100%; height: 100%; object-fit: cover; }

/* Click-to-load poster. The YouTube iframe is only fetched once the visitor
   asks for it, so the page does not phone home on load. */
.player__facade { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: none; background: none; cursor: pointer; }
.player__facade img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.82); transition: filter var(--t); }
.player__facade:hover img { filter: brightness(1); }

.play--lg { width: 86px; height: 86px; font-size: 20px; padding-left: 5px; }
.play--neutral {
  border-color: rgba(238, 241, 243, .75);
  background: rgba(15, 18, 20, .25);
  color: var(--fg-bright);
  transition: background var(--t);
}
.player__facade:hover .play--neutral { background: rgba(15, 18, 20, .05); }

.onthis__k { font-family: var(--font-mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: rgba(223, 227, 230, .38); margin-bottom: 12px; }
.onthis__item { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--hair); font-size: 14px; color: var(--fg-list); }
.onthis__item:last-child { border-bottom: 1px solid var(--hair); }
.onthis__item::before { content: '—'; color: var(--accent-text); }

.frames { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.frames figcaption { margin-top: 8px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-meta); }

.prevnext { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; border-top: 1px solid var(--hair-strong); padding-top: 24px; }
.prevnext a { display: flex; gap: 18px; align-items: center; }
.prevnext a.is-next { justify-content: flex-end; text-align: right; }
.prevnext__thumb { width: 180px; flex: none; }
.prevnext__thumb img { filter: brightness(.7); transition: filter var(--t); }
.prevnext a:hover .prevnext__thumb img { filter: brightness(1); }
.prevnext__dir { font-family: var(--font-mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-meta-dim); }
.prevnext__title { margin-top: 6px; font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: .95; text-transform: uppercase; color: var(--fg-bright); }

/* --- Documentation pages --------------------------------------------------- */

.doc { max-width: 780px; }
.doc h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 40px);
  line-height: .9;
  text-transform: uppercase;
  color: var(--fg-bright);
  margin: 44px 0 14px;
  padding-top: 24px;
  border-top: 1px solid var(--hair-card);
  scroll-margin-top: 90px;
}
.doc h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--fg-bright);
  margin: 28px 0 8px;
}
.doc p { font-size: 15px; line-height: 1.75; color: var(--fg-list); margin: 10px 0; }
.doc ul, .doc ol { margin: 10px 0 14px 22px; font-size: 15px; line-height: 1.75; color: var(--fg-list); }
.doc li { margin: 4px 0; padding-left: 4px; }
.doc li::marker { color: var(--accent-text); }
.doc ol li::marker { font-family: var(--font-mono); font-size: 12px; }
.doc code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: rgba(223, 227, 230, .07);
  border: 1px solid var(--hair);
  padding: 1px 6px;
}
.doc strong { color: var(--fg-bright); font-weight: 400; }

/* On-page contents: chips as links */
a.chip { transition: color var(--t), border-color var(--t); }
a.chip:hover { color: var(--accent-text); border-color: var(--hair-hover); }

/* --- Narrow widths -------------------------------------------------------- */

@media (max-width: 900px) {
  .nav { padding: 12px var(--gutter); }
  .nav__logo { font-size: 18px; }
  .nav__links { gap: 14px; }
  .work-row__num { font-size: 96px; margin-bottom: -30px; }
  .craft-title { width: 100%; }
  .about__portrait { flex: 0 0 220px; }
  .detail-cell { padding: 20px 0; border-right: none; border-bottom: 1px solid var(--hair-strong); }
  .detail-cell:last-child { border-bottom: none; }
  .prevnext a.is-next { justify-content: flex-start; text-align: left; flex-direction: row-reverse; }
}

@media (max-width: 560px) {
  .tool-grid { grid-template-columns: 1fr; }
  .arch-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .prevnext__thumb { width: 120px; }
}

/* --- Reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .ticker__track { animation: none; }
  /* Swap the hero video for its poster still */
  video.hero__media { display: none; }
  .hero__loading { display: none; }
  .hero__still { display: block; }
}

/* --- Per-page accent ------------------------------------------------------
   Tool pages set their brand colour by overriding the three accent tokens in
   a page-level <style> block, e.g.

     :root { --accent: var(--brand-stayput);
             --accent-text: var(--brand-stayput);
             --accent-link: var(--brand-stayput); }

   Site chrome that must stay teal uses --teal / --teal-text / --teal-link.
   -------------------------------------------------------------------------- */