/* ===========================================================================
   good.design — home (v2)
   Spec: good_design_homepage_build_spec_v0.2
=========================================================================== */

/* ---------- 1.1 Color tokens ---------- */
:root {
  --bg-black: #161615;
  --text-white: #f2f2f0;
  --red: #cc444e;
  --yellow: #d8c05d;
  --blue: #4684b2;
  --green: #93ba1a;
  --gray-444: #444444;

  /* 1.5 Spacing */
  --page-pad-x-desktop: 40px;
  --page-pad-x-mobile: 15px;
  --page-pad-y-mobile: 12px;
  --hero-top-offset: 130px;
  --radius: 8px;

  /* GOOD. wordmark (SVG mask). Height in px; width follows the 2117.79:596.8
     intrinsic ratio. Tunable live via the parameters tool. */
  --wm-h-m: 75px;   /* mobile header + sticky bar */
  --wm-h-d: 168px;  /* desktop header — equals the 4-line nav block
                       (--t-wordmark-d 30pt × 1.05 line-height × 4), so the mark
                       runs from the top of "Work" to the baseline of "Contact" */
  --wm-h: var(--wm-h-m);   /* the header wordmark's active height (regime-wrapped
                              below); single knob the editor edits per breakpoint */

  /* Top-nav vertical padding (above / below the wordmark) — tunable live.
     --bar-pad-top is the MOBILE space above the wordmark/nav at the very top of
     the page (it also drives the mobile bar height + menu-drawer offset, so the
     in-flow header, sticky bar, and drawer stay in sync). The desktop header
     uses its own top pad below. */
  --bar-pad-top: 13px;
  --bar-pad-bottom: 9px;
  /* Desktop space above the wordmark/nav at the top of the page (in-flow
     header). Mobile uses --bar-pad-top above. Both tunable via the params tool. */
  --header-pad-top-d: 40px;
  /* Mobile bar height derives from the wordmark + its padding, so the sticky
     bar, page-header, and the menu drawer below all stay in sync. */
  --bar-h-m: calc(var(--wm-h-m) + var(--bar-pad-top) + var(--bar-pad-bottom));

  /* Optical left overshoot for the round "G": the mark sits ON the gutter, but a
     circular letterform reads as inset against the flat-edged content below it.
     Nudge the mark left by a fraction of its height so it optically lines up.
     Proportional to --wm-h, so it scales per regime. Tunable. */
  --wm-optical-x: calc(var(--wm-h) * -0.025);

  /* 1.4 Type sizes (Parabolica) */
  --t-wordmark-m: 22pt;
  --t-wordmark-d: 30pt;
  --t-hnav-d: 22pt;
  --t-body-m: 17pt;
  --t-body-d: 22pt;
  --t-proj-name-m: 24pt;
  --t-proj-name-d: 24pt;
  --t-proj-tagline-m: 17pt;
  --t-proj-tagline-d: 16pt;
  --t-proj-links-m: 17pt;
  --t-proj-links-d: 16pt;
  --t-proj-desc-m: 13pt;
  --t-proj-desc-d: 13pt;
  --t-menu-link: 36pt;
  --t-small: 18pt;

  /* Mise-en-Scène role tokens (tunable via the editor shell). Each defaults to
     the existing rendered size so they are visually inert until edited.
     --lede-size drives the home description paragraph (the `lede` role);
     --nav-size drives the desktop header nav (the `nav` role). The desktop
     value of --lede-size is overridden in the ≥1024px breakpoint below. */
  --lede-size: 17pt;   /* base (mobile) — matches --t-body-m */
  --nav-size: 30pt;    /* desktop header nav — matches --t-wordmark-d */

  /* === Mise-en-Scène M2 role tokens. Single token + breakpoint-aware via the
     desktop @media :root block below; each defaults to the current rendered value
     so it is visually inert until the editor shell edits it live. === */
  --ink: #f2f2f0;            /* shared text color: nav, lede, project name + desc */
  --font: parabolica, "Cormorant Garamond", Georgia, serif;  /* site body font; every role inherits this unless its own font is set */

  --nav-font: var(--font);
  --nav-leading: 1.05;
  --nav-tracking: 0em;
  --nav-weight: 400;

  --lede-font: var(--font);
  --lede-leading: 1.25;
  --lede-tracking: 0em;
  --lede-weight: 400;
  --lede-pad-bs: 0px;  --lede-pad-be: 0px;
  --lede-pad-is: 0px;  --lede-pad-ie: 0px;

  --pname-font: var(--font);
  --pname-size: 24pt;
  --pname-leading: 1.25;
  --pname-tracking: 0em;
  --pname-weight: 400;

  --pdesc-font: var(--font);
  --pdesc-size: 13pt;
  --pdesc-leading: 1.44;
  --pdesc-tracking: 0em;
  --pdesc-weight: 400;

  --fsoc-font: var(--font);
  --fsoc-size: 18pt;
  --fsoc-leading: 1.25;
  --fsoc-tracking: 0em;
  --fsoc-weight: 400;
  --fsoc-color: #161615;

  --gap-hero: 50px;          /* hero → lede (description margin-top, mobile) */
  --gap-lede: 56px;          /* lede → divider (divider margin-top, mobile) */

  --measure: 100%;           /* lede column width (mobile) */
  --base-type: 17pt;         /* body base type (mobile) */
  --gap-section: 56px;       /* project-row vertical rhythm (mobile) */
  --page-bg-color: #161615;  /* page surface solid behind any treatment */

  /* --- Per-element padding (top/bottom) + extra font sizes, all tunable --- */
  /* Home description (bottom pad differs by breakpoint) */
  --desc-pt: 0px;  --desc-pb-m: 165px;  --desc-pb-d: 0px;
  /* Gap beneath the last project row on the home page, before the footer */
  --home-end-gap: 96px;
  /* Sub-page section heading + body */
  --t-h1-m: 36pt;  --t-h1-d: 48pt;
  --h1-pt: 0px;    --h1-pb: 24px;
  --secp-pt: 0px;  --secp-pb: 24px;
  /* Article-list item + article body */
  --t-arttitle: 24pt;
  --arttitle-pt: 0px;  --arttitle-pb: 8px;
  --artp-pt: 0px;      --artp-pb: 24px;
  /* Footer */
  --footer-wm-h-m: 82.5px;   /* GOOD. logo height in the footer (mobile) — 50% larger */
  --footer-wm-h-d: 105px;   /* GOOD. logo height in the footer (desktop) — 50% larger */
  --footer-wm-h: var(--footer-wm-h-m);  /* active footer wordmark height (regime-wrapped) */
  --footer-wm-pt: 15px;    /* mobile downward nudge for the footer wordmark */
  --footer-wm-pb: 0px;     /* padding below the footer wordmark */
  --footer-col-gap: 50px;  /* desktop gap between the footer columns */
  --t-flabel: 18pt;        /* footer column headers (Menu/Social/Contact) */
  --t-flist: 18pt;         /* footer links */
  --t-fblurb: 17pt;        /* footer blurb */
  --t-fbase: 16pt;         /* footer baseline row */
  --flabel-pt: 0px;  --flabel-pb: 10px;
  --flist-pt: 0px;   --flist-pb: 0px;
  --fblurb-pt: 10px; --fblurb-pb: 0px;
  --fbase-pt: 16px;  --fbase-pb: 0px;

  /* === Named structural spacing — surfaced in the parameters tool, grouped by
     the tool's sections. Each value below was previously hardcoded in a rule;
     it now lives here as a tunable token. =============================== */

  /* Header */
  --header-gap: 16px;          /* wordmark ↔ nav/hamburger gap (header + sticky bar) */

  /* Navigation */
  --menu-pad: 32px;            /* mobile menu drawer padding (top + sides) */
  --menu-gap: 16px;            /* gap between mobile menu links */
  --sticky-links-gap: 32px;    /* desktop sticky-nav links gap */

  /* Body — home */
  --hero-mt: 32px;             /* gap below the header, above the hero */
  --desc-mt-m: 50px;   --desc-mt-d: 32px;          /* gap above the description */
  --divider-my-m: 56px;   --divider-my-d: 80px;    /* divider vertical margin */
  --project-row-my-m: 56px;   --project-row-my-d: 80px;  /* project row vertical margin */
  --project-grid-gap-m: 16px;  --project-grid-gap-d: 32px;  /* meta ↔ description gap */
  --project-grid-mb-m: 32px;   --project-grid-mb-d: 40px;   /* gap below the grid */
  --project-meta-gap: 8px;     /* name ↔ tagline ↔ links stack gap */
  --project-tagline-pt-m: 20px;  --project-tagline-pt-d: 10px;  /* tagline top pad */
  --project-links-mt: 22px;    /* links row top margin */
  --project-links-pb-m: 30px;  /* links row bottom pad (mobile only) */
  --project-desc-pb-m: 28px;   /* description bottom pad (mobile only) */

  /* Body — sub-pages (About / Contact / Articles) */
  --section-pad-top-m: 48px;     --section-pad-top-d: 80px;
  --section-pad-bottom-m: 96px;  --section-pad-bottom-d: 128px;
  --articles-list-mt: 32px;    /* gap above the article list */
  --article-item-py: 32px;     /* article list item vertical padding */
  --article-meta-mb: 12px;     /* article meta bottom margin */
  --article-back-mb: 32px;     /* "back" link bottom margin */
  --article-page-meta-mb: 40px;  /* article page meta bottom margin */
  --article-page-h1-mb: 16px;    /* article page h1 bottom margin */

  /* Footer */
  --footer-pad-top-m: 40px;     --footer-pad-top-d: 72px;     /* footer outer top pad */
  --footer-pad-bottom-m: 24px;  --footer-pad-bottom-d: 32px;  /* footer outer bottom pad */
  --footer-stack-gap: 28px;    /* mobile vertical gap (footer rows + columns) */
  --footer-wm-mb-m: 0px;       /* footer wordmark bottom margin (mobile) */
  --footer-list-gap: 4px;      /* gap between footer links */
  --footer-baseline-gap: 16px; /* gap across the baseline row */

  /* Animation */
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: hidden; background: var(--bg-black); }

body {
  /* Canvas stays black (so the browser chrome / overscroll never picks up a
     footer color). The colored footer is its own fixed layer at the bottom. */
  background: var(--bg-black);
  color: var(--text-white);
  overflow-x: hidden;
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--base-type);
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
hr { border: 0; }

/* ---------- Animated underline (4.3) ---------- */
.animated-underline {
  position: relative;
  display: inline-block;
  /* No padding-bottom — keep the box height equal to font line-height so the
     nav rows align to the wordmark rows in the desktop header. */
}
.animated-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms var(--ease);
}
.animated-underline:hover::after,
.animated-underline:focus-visible::after {
  transform: scaleX(1);
}
/* Reverse on mouse-out: pin origin to right when leaving */
.animated-underline.leaving::after {
  transform-origin: right center;
}

/* ---------- Wordmark wiggle (4.4) ---------- */
@keyframes wm-wiggle {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-2deg); }
  75%  { transform: rotate(2deg); }
  100% { transform: rotate(0deg); }
}
.wiggle-target {
  display: inline-block;
  transform-origin: center;
  will-change: transform;
  /* Smooth ease-back to 0deg when the animation stops mid-cycle on mouse-out.
     The transition is overridden by the keyframes while .wiggling is active. */
  transition: transform 200ms var(--ease);
}
.wiggle-target.wiggling { animation: wm-wiggle 600ms linear infinite; }

/* ---------- Fade-in on scroll (4.2) ---------- */
.fade-in-target {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.fade-in-target.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ===========================================================================
   2.2 Initial header
   Mobile: structurally identical to sticky-nav (horizontal wordmark + Nav
   Button, 64px tall, black bg) but in normal flow — scrolls away with the
   page. Desktop overrides below switch back to the stacked vertical layout.
=========================================================================== */
.page-header {
  /* No bar background — the page surface (.page-bg) shows through behind the
     mobile header, same as desktop. */
  background: transparent;
  padding: 0;
}
.page-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* vertical padding = space above/below the wordmark (tunable) */
  padding: var(--bar-pad-top) var(--page-pad-x-mobile) var(--bar-pad-bottom);
  gap: var(--header-gap);
}
/* GOOD. wordmark — rendered as a CSS mask so it inherits the page's text color
   (currentColor → --text-white by default, and flips per-page automatically on
   the colored interior pages). Width follows the intrinsic aspect ratio. */
.wordmark {
  display: block;
  height: var(--wm-h);
  aspect-ratio: 672.817 / 263.83;
  width: auto;
  background-color: currentColor;
  -webkit-mask: url(assets/GD_Wordmark.svg) no-repeat center / contain;
          mask: url(assets/GD_Wordmark.svg) no-repeat center / contain;
}
/* Optical alignment: pull the round mark left so the "G" lines up with the flat
   left edge of the content/gutter below it (header context only). */
.page-header .wordmark { margin-left: var(--wm-optical-x); height: 120px; }
/* The mark carries no text node — keep an accessible name visually hidden. */
.wordmark-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.header-nav {
  display: none; /* mobile: hidden; hamburger shown */
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  font-size: var(--t-wordmark-m);
  line-height: 1.05;
}

.hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;         /* lock the click area against flex shrinking */
  width: 44px;            /* placement is identical for hamburger and X states */
  height: 44px;
  padding: 0;
}
/* Inline-SVG dot icon with 7 circles. Defaults render as 3 colored hamburger
   dots (left/center/right). 4 X-corner dots are parked at center with
   opacity 0. Open-state transitions are JS-driven via inline style so they
   reliably win against the SVG presentation attributes. */
.menu-icon {
  display: block;
  width: 38px;
  height: 38px;
  pointer-events: none;
}
.menu-icon .dot {
  transition:
    transform 280ms cubic-bezier(.6, .05, .3, .95),
    fill 280ms ease,
    opacity 200ms ease;
}
/* Token-driven dot fills (override the inline SVG fill attributes so the
   palette / parameters tool controls them). app.js sets fills inline on open,
   also via the same tokens. */
.dot--hb-l { fill: var(--red); }
.dot--hb-c { fill: var(--yellow); }
.dot--hb-r { fill: var(--blue); }
.dot--x-tl, .dot--x-tr, .dot--x-bl, .dot--x-br { fill: var(--text-white); }

/* Nav item colors (1.3) — all white; hover keeps white + the underline animation
   (the animated underline draws in currentColor). */
.nav-work,
.nav-about,
.nav-articles,
.nav-contact { color: var(--text-white); }
.header-nav .nav-link { color: var(--ink); }

/* ===========================================================================
   2.3 Hero
=========================================================================== */
.hero {
  padding: 0 var(--page-pad-x-mobile);
  margin-top: var(--hero-mt);     /* gap below the bar on mobile */
}
.hero-box {
  position: relative;
  width: 100%;
  height: 470px;                  /* mobile: fixed height */
  background: var(--gray-444);
  border-radius: var(--radius);
  overflow: hidden;
}
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--gray-444);
}

/* ---------- 1.6 Play / pause buttons ---------- */
.play-btn {
  position: absolute;
  width: 32px; height: 32px;
  left: 12px; bottom: 12px;
  border-radius: 4px;
  background-image: url('assets/pause.svg'); /* default state = playing */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 2;
}
.play-btn[data-state="paused"] {
  background-image: url('assets/play.svg');
}
.play-btn-item {
  opacity: 0;
  transition: opacity 160ms var(--ease);
}
.carousel-item:hover .play-btn-item,
.play-btn-item:focus-visible {
  opacity: 1;
}

/* ===========================================================================
   2.4 Description
=========================================================================== */
.description {
  padding: var(--desc-pt) var(--page-pad-x-mobile) var(--desc-pb-m);
  margin-top: var(--gap-hero);                 /* hero → lede (mise --gap-hero) */
}
.description p {
  margin: 0;
  max-width: var(--measure);
  font-family: var(--lede-font);
  font-size: var(--lede-size);
  line-height: var(--lede-leading);
  letter-spacing: var(--lede-tracking);
  font-weight: var(--lede-weight);
  color: var(--ink);
  padding-block: var(--lede-pad-bs) var(--lede-pad-be);
  padding-inline: var(--lede-pad-is) var(--lede-pad-ie);
}

/* ===========================================================================
   2.5 Divider
=========================================================================== */
.divider {
  height: 1px;
  background: var(--gray-444);
  width: calc(100% - (var(--page-pad-x-mobile) * 2));
  margin: var(--gap-lede) var(--page-pad-x-mobile) var(--divider-my-m);
}

/* ===========================================================================
   2.6 Project row
=========================================================================== */
.project-row {
  margin: var(--gap-section) 0;
}
/* Gap below the last project row before the footer reveals (home page). */
#projectsRoot { padding-bottom: var(--home-end-gap); }
.project-row-inner {
  padding: 0 var(--page-pad-x-mobile);
}
.project-row-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--project-grid-gap-m);
  margin-bottom: var(--project-grid-mb-m);
}
.project-meta { display: flex; flex-direction: column; gap: var(--project-meta-gap); }
.project-name {
  display: inline-block;
  align-self: flex-start;     /* shrink underline to text width */
  font-family: var(--pname-font);
  font-size: var(--pname-size);
  line-height: var(--pname-leading);
  letter-spacing: var(--pname-tracking);
  font-weight: var(--pname-weight);
  color: var(--ink);
}
/* The project names keep their type and layout, with the portfolio's watercolor inside the letters. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  #projectsRoot.watercolor-titles-ready .project-name {
    background-image: linear-gradient(rgba(255,255,255,.44), rgba(255,255,255,.44)), url("/anthropic/growth/media/paint-4.webp");
    background-color: #fff;
    background-size: cover;
    background-position: center;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
@media print, (forced-colors: active), (prefers-contrast: more) {
  #projectsRoot.watercolor-titles-ready .project-name {
    background-image: none;
    background-color: transparent;
    -webkit-text-fill-color: currentColor;
  }
}
@media print {
  #projectsRoot.watercolor-titles-ready .project-name { color: #111; }
}
.project-tagline { margin: 0; padding-top: var(--project-tagline-pt-m); font-size: var(--t-proj-tagline-m); }
.project-description p { margin: 0; font-family: var(--pdesc-font); font-size: var(--pdesc-size); line-height: var(--pdesc-leading); letter-spacing: var(--pdesc-tracking); font-weight: var(--pdesc-weight); color: var(--ink); }
.project-links {
  margin: 0;
  margin-top: var(--project-links-mt);  /* + meta gap = distance from tagline */
  padding-bottom: var(--project-links-pb-m);   /* mobile-only spacing below the links row */
  font-size: var(--t-proj-links-m);
  line-height: 1;
}
.project-description { padding-bottom: var(--project-desc-pb-m); }   /* mobile-only spacing below the description */
.project-link-sep {
  display: inline-block;
  margin: 0 8px;        /* 8px on each side of the | */
  opacity: 0.5;
}

/* ===========================================================================
   3 Carousel
=========================================================================== */
.carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* full-bleed: extends to viewport edges, breaks page padding (2.6) */
}
.carousel-track {
  display: flex;
  gap: 16px;
  align-items: stretch;
  will-change: transform;
}
.carousel-item {
  position: relative;
  flex: 0 0 auto;
  height: 375px;                 /* mobile carousel height */
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--gray-444);
}
.carousel-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===========================================================================
   2.7 Reveal footer — a fixed, solid-color panel that the page scrolls up to
   reveal, with a flat horizontal edge. Footer color is per-page (map below).
=========================================================================== */

/* Footer is white with black text + GOOD. logo on every page. */
body,
body.page-about,
body.page-articles,
body.page-contact { --footer-bg: var(--text-white); --footer-fg: var(--bg-black); --footer-muted: var(--bg-black); }

/* The scrolling page (black) sits above the fixed footer and hides it until you
   reach the bottom. Its flat bottom edge lifts off to reveal the footer. */
.page-content {
  position: relative;
  z-index: 2;
  background: transparent;                 /* the opaque surface is .page-bg below */
  min-height: 100vh;
  margin-bottom: var(--footer-h, 60vh);   /* reveal room = footer height (JS sets px) */
}

/* ---------- Page background — the one surface (solid / gradient / video) -------
   Painted on the scrolling .page-content panel (not a fixed layer behind it) so
   the footer-reveal still works: .page-bg is the opaque surface that lifts off at
   the bottom to expose the fixed footer. Default solid --bg-black is identical to
   a flat-black page. Authored per page — tune live with the ?gg-edit Background
   panel, then bake the resulting <div class="page-bg">…</div> into the page. */
.page-bg {
  position: absolute;
  inset: 0;
  z-index: -1;                             /* behind .page-content's own children */
  background: var(--page-bg-color);        /* solid default (mise page bg); override inline per page */
  overflow: hidden;
}
.page-bg good-gradient,
.page-bg .page-bg-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.page-bg .page-bg-media { object-fit: cover; }

/* ---------- .page-bg-style — a treatment surface on ANY box (Mise-en-Scène M3)
   Generalises .page-bg: a box may carry a fill behind its content, or a media
   element an fx overlay over its own pixels. Mounted by the in-page agent under
   ?mise=1 (and bake-able per page in M4). Inert / absent on a normal visit. */
.page-bg-style {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.page-bg-style good-gradient,
.page-bg-style good-dither,
.page-bg-style .page-bg-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.page-bg-style .page-bg-media { object-fit: cover; }
.page-bg good-dither { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.reveal-footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1;                 /* behind .page-content (z-2) */
  background: var(--footer-bg);
  color: var(--footer-fg);
  padding: var(--footer-pad-top-m) var(--page-pad-x-mobile) var(--footer-pad-bottom-m);
  display: flex;
  flex-direction: column;
  gap: var(--footer-stack-gap);
}
.reveal-footer a { color: inherit; }

.footer-inner { display: flex; flex-direction: column; gap: var(--footer-stack-gap); }
/* GOOD. logo (mask) — inline-block so its baseline (its bottom edge) can align
   with the column headers via align-items:baseline on the row (desktop). */
.footer-wordmark {
  display: inline-block;
  vertical-align: baseline;
  line-height: 0;             /* no strut, so the flex baseline = the logo's bottom */
  box-sizing: content-box;    /* height = logo height; padding adds space around it */
  height: var(--footer-wm-h);
  aspect-ratio: 672.817 / 263.83;
  width: auto;
  position: relative;
  top: var(--footer-wm-pt);   /* downward nudge; reliably moves the masked mark */
  margin: 0 0 var(--footer-wm-mb-m);
  background-color: currentColor;
  /* Mask sized/clipped to the content box so the vertical padding spaces the
     mark without scaling it down. */
  -webkit-mask: url(assets/GD_Wordmark.svg) no-repeat center / contain content-box;
          mask: url(assets/GD_Wordmark.svg) no-repeat center / contain content-box;
  -webkit-mask-origin: content-box;
          mask-origin: content-box;
}
.footer-blurb { margin: 0; max-width: 34em; font-size: var(--t-fblurb); line-height: 1.3; padding: var(--fblurb-pt) 0 var(--fblurb-pb); }
.footer-label { margin: 0; font-size: var(--t-flabel); color: var(--footer-muted); padding: var(--flabel-pt) 0 var(--flabel-pb); }
.footer-list  { display: flex; flex-direction: column; gap: var(--footer-list-gap); font-family: var(--fsoc-font); font-size: var(--fsoc-size); line-height: var(--fsoc-leading); letter-spacing: var(--fsoc-tracking); font-weight: var(--fsoc-weight); color: var(--fsoc-color); padding: var(--flist-pt) 0 var(--flist-pb); }
.footer-baseline {
  display: flex;
  justify-content: space-between;
  gap: var(--footer-baseline-gap);
  font-size: var(--t-fbase);
  color: var(--footer-muted);
  border-top: 1px solid var(--footer-fg);        /* divider matches the footer's black */
  padding: var(--fbase-pt) 0 var(--fbase-pb);
}

/* ===========================================================================
   4.1 Sticky nav
=========================================================================== */
.sticky-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;        /* no bar fill — page surface shows through */
  transform: translateY(-100%);
  transition: transform 240ms var(--ease);
}
.sticky-nav.is-visible { transform: translateY(0); }
.sticky-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* vertical padding = space above/below the wordmark (tunable) */
  padding: var(--bar-pad-top) var(--page-pad-x-mobile) var(--bar-pad-bottom);
  gap: var(--header-gap);
}
/* Sticky-bar context: the compact bar keeps the wordmark at its mobile height
   at every width (the desktop header grows the mark; the sticky one shouldn't). */
.sticky-nav .wordmark {
  height: var(--wm-h-m);
}

.sticky-nav-links {
  display: none;                /* mobile: hidden */
  align-items: center;
  gap: var(--sticky-links-gap);
  font-size: var(--t-hnav-d);   /* mobile-hidden anyway; desktop @media keeps this in sync */
  line-height: 1;               /* match .sticky-wordmark so flex-center works visually */
}
.sticky-nav-links li,
.sticky-nav-links a { line-height: inherit; }

/* ===========================================================================
   Unified color scheme — every page (home, About, Articles, Contact) uses the
   same system: black background, white text, all-white nav. The page-about /
   page-articles / page-contact body classes no longer recolor anything; they
   inherit the base body + nav rules above. (Former per-page colored backgrounds
   removed per the single-scheme direction.)
=========================================================================== */
.sticky-nav .wordmark { color: var(--text-white); }

/* ===========================================================================
   Sub-page content (About, Articles, Contact) — minimal shared styling.
=========================================================================== */
.page-section {
  padding: var(--section-pad-top-m) var(--page-pad-x-mobile) var(--section-pad-bottom-m);
  max-width: 800px;
}
.page-section h1 {
  font-size: var(--t-h1-m);
  font-weight: 400;
  margin: 0;
  padding: var(--h1-pt) 0 var(--h1-pb);
  letter-spacing: -0.01em;
}
.page-section p {
  margin: 0;
  padding: var(--secp-pt) 0 var(--secp-pb);
  font-size: var(--t-body-m);
  line-height: 1.4;
}

/* Articles list */
.articles-list { list-style: none; margin: var(--articles-list-mt) 0 0; padding: 0; }
.article-item {
  padding: var(--article-item-py) 0;
  border-top: 1px solid var(--gray-444);
}
.article-item:last-child { border-bottom: 1px solid var(--gray-444); }
.article-title {
  font-size: var(--t-arttitle);
  font-weight: 400;
  margin: 0;
  padding: var(--arttitle-pt) 0 var(--arttitle-pb);
}
.article-title a { color: inherit; }
.article-meta {
  font-size: var(--t-small);
  color: var(--gray-444);
  margin: 0 0 var(--article-meta-mb);
}
.article-excerpt {
  margin: 0;
  padding: var(--artp-pt) 0 var(--artp-pb);
  font-size: var(--t-body-m);
  line-height: 1.4;
  max-width: 720px;
}

/* Article (Essay archetype) — plain reading layout, generous measure */
.article-page { max-width: 720px; }
.article-back {
  font-size: var(--t-small);
  margin: 0 0 var(--article-back-mb);
}
.article-back a { color: var(--text-white); }
.article-page-meta {
  font-size: var(--t-small);
  color: var(--gray-444);
  margin: 0 0 var(--article-page-meta-mb);
}
.article-page h1 { margin-bottom: var(--article-page-h1-mb); }

@media (min-width: 1024px) {
  .page-section {
    padding: var(--section-pad-top-d) var(--page-pad-x-desktop) var(--section-pad-bottom-d);
  }
  .page-section h1 { font-size: var(--t-h1-d); }
  .page-section p,
  .article-excerpt { font-size: var(--t-body-d); }
}

/* ===========================================================================
   Mobile menu drawer (4.5) — slides down from top, sits BELOW the sticky-nav.
   The sticky-nav is force-shown while the menu is open, so its wordmark + the
   X-morphed hamburger sit in the same place as the initial header's.
=========================================================================== */
/* Mobile menu drawer — overflow clipper anchored just below the bar
   (page-header at top of page, or sticky-nav when scrolled). Both bars are
   64px tall, so the drawer sits flush at top: 64px in either case.
   Links wrapper inside translates from -100% to 0, emerging from below the bar. */
.mobile-menu {
  position: fixed;
  top: 0;                   /* full-screen: sheet drops from the very top */
  left: 0;
  right: 0;
  height: 100vh;            /* fills the screen, incl. the black behind the wordmark */
  z-index: 90;              /* below the sticky-nav so its X stays clickable */
  overflow: hidden;
  pointer-events: none;
}
/* While the menu is open, lift the header (the good. wordmark + hamburger) above
   the black sheet so the mark reads on top with black behind it. */
.is-menu-open .page-header {
  position: relative;
  z-index: 110;
}
.is-menu-open .mobile-menu {
  pointer-events: auto;
}

/* Lock page scroll while the menu is open. */
body.is-menu-open {
  overflow: hidden;
  touch-action: none;
}
.mobile-menu-links {
  position: absolute;       /* fill the drawer fully so translateY(-100%) hides it */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-black);
  /* Top pad clears the bar + wordmark, then drops the link list a further 100px. */
  padding: calc(var(--bar-h-m) + var(--menu-pad) + 100px) var(--page-pad-x-mobile) var(--menu-pad);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--menu-gap);
  box-sizing: border-box;
  transform: translateY(-100%);
  transition: transform 320ms cubic-bezier(.2, .7, .2, 1);
}
.is-menu-open .mobile-menu-links {
  transform: translateY(0);
}
.mobile-menu-link {
  font-size: calc(var(--t-menu-link) * 1.1);   /* 10% larger */
  line-height: 1.1;
}

/* Hide the menu drawer + hamburger entirely on desktop — the desktop header's
   inline nav handles navigation there. */
@media (min-width: 1024px) {
  .mobile-menu { display: none; }
}

/* ===========================================================================
   1.7 Breakpoint — desktop (≥ 1024px)
=========================================================================== */
@media (min-width: 1024px) {
  :root {
    --lede-size: 22pt;     /* desktop lede — matches --t-body-d */
    --base-type: 22pt;     /* desktop body */
    --gap-hero: 32px;      /* hero → lede (desktop) */
    --gap-lede: 80px;      /* lede → divider (desktop) */
    --measure: 66%;        /* desktop lede column */
    --gap-section: 80px;   /* desktop section rhythm */
    --wm-h: var(--wm-h-d);            /* header wordmark — desktop height */
    --footer-wm-h: var(--footer-wm-h-d);  /* footer wordmark — desktop height */
  }

  .page-header {
    height: auto;            /* override mobile fixed 64px */
    padding: var(--header-pad-top-d) var(--page-pad-x-desktop) 40px;
    background: transparent; /* desktop has no bar look */
  }
  .page-header-inner {
    height: auto;
    align-items: flex-start;  /* stacked content */
    padding: 0;
  }
  /* .wordmark desktop height now flows from :root --wm-h (regime-wrapped above) */
  .page-header .wordmark { height: 200px; }
  .header-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-family: var(--nav-font);
    font-size: var(--nav-size);
    line-height: var(--nav-leading);   /* match .wordmark so rows align baseline-for-baseline */
    letter-spacing: var(--nav-tracking);
    font-weight: var(--nav-weight);
    gap: 0;
  }
  .header-nav li,
  .header-nav .nav-link { line-height: inherit; }
  .hamburger { display: none; }

  /* ----- Nav layout variants (initial header only; sticky nav unchanged) ----- */

  /* Nav_Style_Right — default. Nav block sits at the right edge,
     text right-justified within the column. */
  [data-nav-style="right"] .header-nav { align-items: flex-end; }

  /* Nav_Style_Middle — nav column starts 345px from the screen's left edge,
     text left-justified within the column. Matches Matt's mockup. */
  [data-nav-style="middle"] .page-header {
    position: relative;
    /* Reserve room for the nav's 4 rows + top/bottom padding (the absolutely
       positioned nav doesn't contribute to the parent's intrinsic height). */
    min-height: calc(var(--header-pad-top-d) + (30pt * 1.05 * 4) + 40px);
  }
  [data-nav-style="middle"] .page-header-inner { display: block; }
  [data-nav-style="middle"] .header-nav {
    position: absolute;
    top: var(--header-pad-top-d);        /* match page-header padding-top */
    left: 345px;      /* from screen left, per mockup */
    align-items: flex-start;
  }

  /* Hero — 16:9 desktop, full content width */
  .hero {
    padding: 0 var(--page-pad-x-desktop);
    margin-top: var(--hero-mt);
  }
  .hero-box { height: auto; aspect-ratio: 16 / 9; }
  .play-btn {
    width: 48px; height: 48px;
    left: 16px; bottom: 16px;
    border-radius: 6px;
  }

  .description {
    padding: var(--desc-pt) var(--page-pad-x-desktop) var(--desc-pb-d);
    margin-top: var(--gap-hero);
  }
  .description p { max-width: var(--measure); }

  .divider {
    width: calc(100% - (var(--page-pad-x-desktop) * 2));
    margin: var(--gap-lede) var(--page-pad-x-desktop) var(--divider-my-d);
  }

  /* Project row 2-col */
  .project-row { margin: var(--gap-section) 0; }
  .project-row-inner { padding: 0 var(--page-pad-x-desktop); }
  /* Two equal-width columns at 45% each. Gap between them is variable —
     fills whatever is left after both columns claim 45% (≈ 10% of the row,
     so the gap grows/shrinks with viewport width). */
  .project-row-grid {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    grid-template-columns: none;
    gap: var(--project-grid-gap-d);   /* safety minimum if viewport ever shrinks below 90% headroom */
    margin-bottom: var(--project-grid-mb-d);
  }
  .project-meta { flex: 0 0 40%; max-width: 40%; min-width: 0; }
  .project-description { flex: 0 0 40%; max-width: 40%; }
  /* Switch project text to desktop tokens. */
  .project-name { font-size: var(--pname-size); }
  .project-tagline {
    font-size: var(--t-proj-tagline-d);
    padding-top: var(--project-tagline-pt-d);       /* desktop: tagline sits closer to project name */
  }
  .project-description p { font-size: var(--pdesc-size); }
  .project-links { font-size: var(--t-proj-links-d); padding-bottom: 0; }
  .project-description { padding-bottom: 0; }

  .carousel-item { height: 512px; }

  /* Reveal footer — GOOD. logo on the left, socials right-aligned to the page
     edge (like the header nav). align-items:flex-start lines the top of the logo
     up with the top of the first social link (YouTube). */
  .reveal-footer { padding: var(--footer-pad-top-d) var(--page-pad-x-desktop) var(--footer-pad-bottom-d); gap: var(--footer-col-gap); }
  .footer-inner {
    flex-direction: row;
    gap: var(--footer-col-gap);
    align-items: flex-start;
  }
  .footer-col--brand { flex: 1 1 auto; }            /* fills the left, pushes socials right */
  .footer-inner .footer-col:not(.footer-col--brand) {
    flex: 0 0 auto;                                 /* size to content */
    text-align: right;                              /* right-align at the page edge */
  }
  .footer-wordmark { margin-bottom: 0; top: 0; }  /* height flows from :root --footer-wm-h */

  /* Sticky nav desktop — height follows wordmark + bar padding (same as mobile) */
  .sticky-nav-inner { padding: var(--bar-pad-top) var(--page-pad-x-desktop) var(--bar-pad-bottom); }
  /* sticky wordmark height is fixed at --wm-h-m (set above) at all widths */
  .sticky-nav-links {
    display: flex;
    font-size: var(--t-hnav-d);
  }
  .sticky-nav .hamburger { display: none; }
}

/* ===========================================================================
   4.6 Reduced motion
=========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sticky-nav { transition: none; }
  .fade-in-target { opacity: 1; transform: none; transition: none; }
  .animated-underline::after { transition: none; }
  .wiggle-target.wiggling { animation: none; }
  .mobile-menu, .mobile-menu-link { transition: none; }
  .carousel-track { animation: none !important; }
}

/* Approved appearance update: colors and title families only.
   Original layout, wordmark dimensions and navigation typography above are retained. */
@font-face {
  font-family: 'Aleo';
  src: url('/gds-chrome/assets/fonts/aleo-variable-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --gd-ground: #191818;
  --gd-panel: #1e1d1d;
  --gd-ink: #292929;
  --flat-t1: #e2e2e0;
  --bg-black: var(--gd-ground);
  --page-bg-color: var(--gd-ground);
  --text-white: var(--flat-t1);
  --ink: var(--flat-t1);
  --gray-444: var(--gd-ink);
  --fsoc-color: var(--gd-ground);
  --pname-font: 'Aleo', Georgia, serif;
}
.page-section h1,
.article-title { font-family: 'Aleo', Georgia, serif; }
.hero-box,
.hero-video,
.carousel-item { background-color: var(--gd-panel); }
.article-meta,
.article-page-meta { color: #82807a; }
/* Keep the existing background layer, with the approved solid ground color. */
.page-bg good-gradient { opacity: 0; }

/* Homepage media: ratios follow the source, while all boxes share a row height. */
.hero[hidden] { display: none; }
.carousel-item { height: 375px; width: calc(375px * var(--media-ratio, 1)); }
.carousel-item > a { display: block; width: 100%; height: 100%; }
.carousel-media { display: block; width: 100%; height: 100%; object-fit: cover; }
.carousel-item:focus-within { outline: 2px solid var(--yellow); outline-offset: -2px; }
@media (min-width: 1024px) { .carousel-item { height: 512px; width: calc(512px * var(--media-ratio, 1)); } }
body.media-open { overflow: hidden; }
#projectsRoot .carousel-item > a { cursor: zoom-in; }
#mediaLightbox { padding: 56px 16px 16px; border: 0; border-radius: var(--radius); background: var(--bg-black); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
#mediaLightbox::backdrop { background: rgb(0 0 0 / .85); }
#mediaLightbox .media-lightbox-media { display: block; max-width: min(90vw, calc(100vw - 56px)); max-height: min(80dvh, calc(100dvh - 96px)); width: auto; height: auto; object-fit: contain; }
#mediaLightbox .media-lightbox-close {
  position: absolute; right: 12px; top: 4px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; min-height: 44px; padding: 0 8px;
  appearance: none; background: transparent; border: 0; border-radius: 2px;
  color: var(--text-white); cursor: pointer;
  font: 400 16px/1 var(--font); -webkit-tap-highlight-color: transparent;
}
#mediaLightbox .media-lightbox-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
#mediaLightbox .media-lightbox-close:focus { outline: none; }
#mediaLightbox[data-input="keyboard"] .media-lightbox-close:focus { outline: 2px solid var(--yellow); outline-offset: 2px; }
#mediaLightbox .media-lightbox-close:hover span,
#mediaLightbox[data-input="keyboard"] .media-lightbox-close:focus span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
#mediaLightbox .media-lightbox-focus-guard { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
#projectsRoot .media-video-badge { position: absolute; left: 12px; bottom: 12px; width: 32px; height: 32px; background: url('assets/play.svg') center / contain no-repeat; pointer-events: none; }