/* ============================================================
   LEE COGSWELL DESIGN — site styles
   Every value comes from tokens.css. Blocks reference semantic
   tokens only. Layout primitives (.section .container .stack
   .row .grid .split) own ALL spacing; blocks never set margins.
   One media query (768px) — everything else is fluid.
   ============================================================ */

/* ── Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  color: var(--type-body-color);
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  font-weight: var(--type-body-weight);
  font-style: var(--type-body-style);
  letter-spacing: var(--type-body-tracking);
  text-transform: var(--type-body-transform);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main { flex: 1 0 auto; overflow-x: clip; }
main, .footer { overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a {
  color: var(--type-link-color);
  font-family: var(--type-link-family);
  font-size: var(--type-link-size);
  font-weight: var(--type-link-weight);
  font-style: var(--type-link-style);
  line-height: var(--type-link-line);
  letter-spacing: var(--type-link-tracking);
  text-transform: var(--type-link-transform);
  text-decoration-color: var(--link-underline-color);
  text-underline-offset: .18em;
}
a:hover { color: var(--link-hover-color); text-decoration-color: currentColor; }
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-xs);
}
::selection { background-color: var(--color-accent); color: var(--color-text-on-accent); }

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-4);
  top: calc(-1 * var(--tap-target-min) * 2);
  z-index: var(--layer-modal);
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-text-strong);
  color: var(--color-surface);
  border-radius: var(--radius-sm);
  font-family: var(--type-button-family); font-size: var(--type-button-size); font-weight: var(--type-button-weight);
  font-style: var(--type-button-style); line-height: var(--type-button-line); letter-spacing: var(--type-button-tracking);
  text-transform: var(--type-button-transform);
}
.skip-link:focus { top: var(--space-4); }
html.is-locked { overflow: hidden; }   /* drawer / lightbox open */

/* Visually hidden — a11y idiom, values are technique constants. */
.visually-hidden,
[data-honeypot] {
  position: absolute !important;                 /* a11y-constant */
  width: 1px; height: 1px;                        /* a11y-constant */
  padding: 0; margin: -1px;                       /* a11y-constant */
  overflow: hidden; clip: rect(0 0 0 0);          /* a11y-constant */
  white-space: nowrap; border: 0;
}

/* ── Primitives ───────────────────────────────────────────────── */

/* SECTION — owns vertical padding + surface. background-color only,
   never the shorthand, so treatments can layer background-image. */
.section {
  --section-pad: var(--space-section);
  padding-block: var(--section-pad);
  background-color: transparent;
}
.section[data-density="compact"]  { --section-pad: var(--space-section-compact); }
.section[data-density="spacious"] { --section-pad: var(--space-section-spacious); }
.section[data-density="flush"]    { --section-pad: 0; }
.section[data-surface="alt"]      { background-color: var(--color-surface-alt); }
.section[data-surface="deep"]     { background-color: var(--color-surface-deep); }

/* CONTAINER — max width, centered, gutter. */
.container {
  --container-max: var(--width-content);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}
.container[data-width="prose"]   { --container-max: var(--width-prose); }
.container[data-width="narrow"]  { --container-max: var(--width-narrow); }
.container[data-width="wide"]    { --container-max: var(--width-wide); }

/* STACK — vertical rhythm via gap. */
.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-stack)); }
.stack[data-gap="tight"]  { --stack-gap: var(--space-stack-tight); }
.stack[data-gap="normal"] { --stack-gap: var(--space-4); }
.stack[data-gap="loose"]  { --stack-gap: var(--space-8); }
.stack[data-gap="xl"]     { --stack-gap: var(--space-12); }
.stack[data-align="center"] { align-items: center; text-align: center; }

/* ROW — horizontal group, wraps. */
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--row-gap, var(--space-3)); }
.row[data-gap="tight"] { --row-gap: var(--space-2); }
.row[data-gap="loose"] { --row-gap: var(--space-6); }
.row[data-justify="between"] { justify-content: space-between; }
.row[data-justify="center"]  { justify-content: center; }
.row[data-align="start"]     { align-items: flex-start; }

/* GRID — auto-fit columns; collapse threshold from --col-min tokens. */
.grid {
  --grid-min: var(--col-min-md);
  display: grid;
  gap: var(--space-8) var(--space-grid);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min), 100%), 1fr));
}
.grid[data-min="sm"] { --grid-min: var(--col-min-sm); }
.grid[data-min="lg"] { --grid-min: var(--col-min-lg); }

/* ── SPLIT — block contract ────────────────────────────────────
   · Two columns of equal width, reflowing to one at --col-min-lg.
   · Media height derives from a ratio token, never a min-height.
   · data-align="start" for text columns (default stretch).
   ─────────────────────────────────────────────────────────────── */
.split {
  --split-gap: clamp(var(--space-8), 6vw, var(--space-20));
  --split-min-column: var(--col-min-lg);
  --split-align: stretch;
  display: grid;
  gap: var(--split-gap);
  align-items: var(--split-align);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--split-min-column), 100%), 1fr));
}
.split[data-align="start"]  { --split-align: start; }
.split[data-align="center"] { --split-align: center; }
.split > * { min-width: 0; container-type: inline-size; }

/* ── MEDIA — block contract ────────────────────────────────────
   · display:block (may sit on <a>/<span>); aspect from a ratio token.
   · data-fit="cover" crops via object-fit; "contain" letterboxes onto
     the deep surface — used for artwork exported on black.
   ─────────────────────────────────────────────────────────────── */
.media {
  --media-ratio: var(--ratio-media-tile);
  --media-radius: var(--tile-radius);
  --media-bg: var(--color-surface-deep);
  position: relative;
  display: block;
  aspect-ratio: var(--media-ratio);
  overflow: clip;
  border-radius: var(--media-radius);
  background-color: var(--media-bg);
  isolation: isolate;
}
.media[data-ratio="portrait"] { --media-ratio: var(--ratio-media-portrait); }
.media[data-ratio="split"]    { --media-ratio: var(--ratio-media-split); }
.media > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focal-center);
}
.media[data-fit="contain"] > img { object-fit: contain; }
.media[data-focal="top"] > img { object-position: var(--focal-top); }
/* Ring drawn above the image so it survives contain/cover alike. */
.media::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 var(--border-thin) var(--color-tile-ring);
  pointer-events: none;
  transition: box-shadow var(--duration-fast) var(--ease-out);
}

/* ── Typography ───────────────────────────────────────────────── */
.display {
  font-family: var(--display-role-family, var(--type-display-md-family));
  font-size: var(--display-role-size, var(--type-display-md-size));
  font-weight: var(--display-role-weight, var(--type-display-md-weight));
  font-style: var(--display-role-style, var(--type-display-md-style));
  line-height: var(--display-role-line, var(--type-display-md-line));
  letter-spacing: var(--display-role-tracking, var(--type-display-md-tracking));
  text-transform: var(--display-role-transform, var(--type-display-md-transform));
  color: var(--display-role-color, var(--type-display-md-color));
  text-wrap: balance;
}
.display[data-size="xs"] {
  --display-role-family: var(--type-display-xs-family); --display-role-size: var(--type-display-xs-size);
  --display-role-weight: var(--type-display-xs-weight); --display-role-style: var(--type-display-xs-style);
  --display-role-line: var(--type-display-xs-line); --display-role-tracking: var(--type-display-xs-tracking);
  --display-role-transform: var(--type-display-xs-transform); --display-role-color: var(--type-display-xs-color);
}
.display[data-size="sm"] {
  --display-role-family: var(--type-display-sm-family); --display-role-size: var(--type-display-sm-size);
  --display-role-weight: var(--type-display-sm-weight); --display-role-style: var(--type-display-sm-style);
  --display-role-line: var(--type-display-sm-line); --display-role-tracking: var(--type-display-sm-tracking);
  --display-role-transform: var(--type-display-sm-transform); --display-role-color: var(--type-display-sm-color);
}
.display[data-size="md"] {
  --display-role-family: var(--type-display-md-family); --display-role-size: var(--type-display-md-size);
  --display-role-weight: var(--type-display-md-weight); --display-role-style: var(--type-display-md-style);
  --display-role-line: var(--type-display-md-line); --display-role-tracking: var(--type-display-md-tracking);
  --display-role-transform: var(--type-display-md-transform); --display-role-color: var(--type-display-md-color);
}
.display[data-size="lg"] {
  --display-role-family: var(--type-display-lg-family); --display-role-size: var(--type-display-lg-size);
  --display-role-weight: var(--type-display-lg-weight); --display-role-style: var(--type-display-lg-style);
  --display-role-line: var(--type-display-lg-line); --display-role-tracking: var(--type-display-lg-tracking);
  --display-role-transform: var(--type-display-lg-transform); --display-role-color: var(--type-display-lg-color);
  max-width: 18ch;
}
.display[data-size="xl"] { font-size: var(--display-xl); }

.eyebrow {
  font-family: var(--type-eyebrow-family);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  font-style: var(--type-eyebrow-style);
  line-height: var(--type-eyebrow-line);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: var(--type-eyebrow-transform);
  color: var(--type-eyebrow-color);
}
.heading-group { display: flex; flex-direction: column; gap: var(--space-heading-label); }

.lead {
  font-family: var(--type-lead-family);
  font-size: var(--type-lead-size);
  font-weight: var(--type-lead-weight);
  font-style: var(--type-lead-style);
  line-height: var(--type-lead-line);
  letter-spacing: var(--type-lead-tracking);
  text-transform: var(--type-lead-transform);
  color: var(--type-lead-color);
  max-width: var(--width-prose);
  text-wrap: pretty;
}
.prose { display: flex; flex-direction: column; gap: var(--space-4); max-width: var(--width-prose); }
.prose p, .project-sub, .plain-list {
  font-family: var(--type-paragraph-family);
  font-size: var(--type-paragraph-size);
  font-weight: var(--type-paragraph-weight);
  font-style: var(--type-paragraph-style);
  line-height: var(--type-paragraph-line);
  letter-spacing: var(--type-paragraph-tracking);
  text-transform: var(--type-paragraph-transform);
  color: var(--type-paragraph-color);
  text-wrap: pretty;
}
.prose-sub {
  font-family: var(--type-prose-sub-family);
  font-size: var(--type-prose-sub-size);
  font-weight: var(--type-prose-sub-weight);
  font-style: var(--type-prose-sub-style);
  line-height: var(--type-prose-sub-line);
  letter-spacing: var(--type-prose-sub-tracking);
  text-transform: var(--type-prose-sub-transform);
  color: var(--type-prose-sub-color);
}
.prose-sub:not(:first-child) { padding-top: var(--space-2); }

/* META — definition list of label/value pairs. */
.meta {
  display: grid;
  gap: var(--space-4) var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--col-min-sm), 100%), 1fr));
}
.meta > div { display: flex; flex-direction: column; gap: var(--space-1); }
.meta dt {
  font-family: var(--type-meta-label-family);
  font-size: var(--type-meta-label-size);
  font-weight: var(--type-meta-label-weight);
  font-style: var(--type-meta-label-style);
  line-height: var(--type-meta-label-line);
  letter-spacing: var(--type-meta-label-tracking);
  text-transform: var(--type-meta-label-transform);
  color: var(--type-meta-label-color);
}
.meta dd { color: var(--color-text); }

.plain-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.plain-list li { padding-block: var(--space-2); border-bottom: var(--border-thin) solid var(--color-hairline); }
.tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag-list li {
  font-family: var(--type-micro-family);
  font-size: var(--type-micro-size);
  font-weight: var(--type-micro-weight);
  font-style: var(--type-micro-style);
  line-height: var(--type-micro-line);
  letter-spacing: var(--type-micro-tracking);
  text-transform: var(--type-micro-transform);
  padding: var(--space-1) var(--space-3);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--type-micro-color);
}
.empty-note { color: var(--type-paragraph-color); }
.back-link { text-decoration: none; }

/* ── Controls ─────────────────────────────────────────────────── */

/* BTN — every variant meets the tap target; colors come in pairs. */
.btn {
  --btn-bg: var(--button-bg);
  --btn-fg: var(--button-text);
  --btn-bg-hover: var(--button-bg-hover);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap-target-min);
  padding: var(--button-padding-y) var(--button-padding-x);
  border-radius: var(--button-radius);
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--type-button-family);
  font-size: var(--type-button-size);
  font-weight: var(--type-button-weight);
  font-style: var(--type-button-style);
  line-height: var(--type-button-line);
  letter-spacing: var(--type-button-tracking);
  text-transform: var(--type-button-transform);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.btn[data-variant="primary"] {
  --btn-bg: var(--button-primary-bg);
  --btn-fg: var(--button-primary-text);
  --btn-bg-hover: var(--button-primary-hover);
}
.btn:hover { background-color: var(--btn-bg-hover); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .6; cursor: progress; }

/* CHIP — filter toggle. aria-pressed carries the state. */
.chip {
  display: inline-flex; align-items: center;
  min-height: calc(var(--tap-target-min) - var(--space-2));
  padding: var(--chip-padding-y) var(--chip-padding-x);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--chip-radius);
  font-family: var(--type-chip-family);
  font-size: var(--type-chip-size);
  font-weight: var(--type-chip-weight);
  font-style: var(--type-chip-style);
  line-height: var(--type-chip-line);
  letter-spacing: var(--type-chip-tracking);
  text-transform: var(--type-chip-transform);
  color: var(--type-chip-color);
  transition: color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.chip:hover { color: var(--color-text-strong); border-color: var(--color-border-strong); }
.chip[aria-pressed="true"] {
  background-color: var(--chip-active-bg);
  border-color: var(--chip-active-bg);
  color: var(--chip-active-text);
}

/* ICON-BTN — square tap target around a stroked icon. */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap-target-min); height: var(--tap-target-min);
  border-radius: var(--icon-button-radius);
  color: var(--color-text);
  transition: background-color var(--duration-fast) var(--ease-out);
}
.icon-btn:hover { background-color: var(--color-surface-raised); }
.icon { width: var(--icon-md); height: var(--icon-md); fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }

/* FORM FIELDS — every control meets the tap target and inherits type. */
.form { width: 100%; }
.field { display: grid; gap: var(--space-2); }
.field label {
  font-family: var(--type-field-label-family);
  font-size: var(--type-field-label-size);
  font-weight: var(--type-field-label-weight);
  font-style: var(--type-field-label-style);
  line-height: var(--type-field-label-line);
  letter-spacing: var(--type-field-label-tracking);
  text-transform: var(--type-field-label-transform);
  color: var(--type-field-label-color);
}
.field input, .field select, .field textarea {
  width: 100%;
  min-height: var(--field-height);
  padding-inline: var(--field-padding-x);
  padding-block: var(--space-3);
  border: var(--field-border);
  border-radius: var(--field-radius);
  background-color: var(--field-bg);
  color: var(--type-field-color);
  font-family: var(--type-field-family);
  font-size: var(--type-field-size);
  font-weight: var(--type-field-weight);
  font-style: var(--type-field-style);
  line-height: var(--type-field-line);
  letter-spacing: var(--type-field-tracking);
  text-transform: var(--type-field-transform);
  transition: border-color var(--duration-fast) var(--ease-out);
}
.field textarea { resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-text-dim); }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--color-danger); }
.form-status {
  font-family: var(--type-small-family); font-size: var(--type-small-size); font-weight: var(--type-small-weight);
  font-style: var(--type-small-style); line-height: var(--type-small-line); letter-spacing: var(--type-small-tracking);
  text-transform: var(--type-small-transform); color: var(--type-small-color);
}
.form-status[data-tone="ok"]    { color: var(--color-success-on-dark); }
.form-status[data-tone="error"] { color: var(--color-danger-on-dark); }
.cf-turnstile { max-width: 100%; overflow-x: clip; }

/* ── Nav ──────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0;
  z-index: var(--layer-nav);
  background-color: var(--nav-bg);
  backdrop-filter: blur(var(--nav-blur));
  -webkit-backdrop-filter: blur(var(--nav-blur));
  border-bottom: var(--border-thin) solid var(--color-hairline);
  view-transition-name: nav;
}
.nav-bar {
  display: flex; align-items: center; gap: var(--space-6);
  min-height: var(--nav-height);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--space-3);
  text-decoration: none;
  color: var(--type-brand-color);
}
.brand-mark {
  width: var(--nav-logo-size); height: var(--nav-logo-size);
  border-radius: var(--mark-radius);
  flex: none;
}
.brand-word {
  font-family: var(--type-brand-family);
  font-size: var(--type-brand-size);
  font-weight: var(--weight-medium);
  font-style: var(--type-brand-style);
  letter-spacing: var(--type-brand-tracking);
  line-height: var(--type-brand-line);
  text-transform: var(--type-brand-transform);
  white-space: nowrap;
}
.brand-word strong { font-weight: var(--type-brand-weight); }
.brand-suffix { color: var(--color-text-dim); }
.nav-links { display: flex; gap: var(--nav-link-gap); margin-left: auto; }
.nav-link {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: var(--tap-target-min);
  font-family: var(--type-nav-family);
  font-size: var(--type-nav-size);
  font-weight: var(--type-nav-weight);
  font-style: var(--type-nav-style);
  line-height: var(--type-nav-line);
  letter-spacing: var(--type-nav-tracking);
  text-transform: var(--type-nav-transform);
  color: var(--type-nav-color);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
.nav-link::after {
  content: "";
  position: absolute; inset-inline: 0; bottom: var(--space-2);
  height: var(--border-thin);
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-expo);
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--color-text-strong); }
.nav-link[aria-current="page"]::after, .nav-link:hover::after { transform: scaleX(1); }

/* Burger — three lines that become an X. Hidden on desktop. */
.nav-burger {
  display: none;
  margin-left: auto;
  width: var(--burger-size); height: var(--burger-size);
  align-items: center; justify-content: center;
  border-radius: var(--icon-button-radius);
}
.burger-lines, .burger-lines::before, .burger-lines::after {
  display: block;
  width: var(--burger-width); height: var(--burger-line);
  background-color: var(--color-text-strong);
  border-radius: var(--radius-full);
  transition: transform var(--duration-base) var(--ease-expo),
              opacity var(--duration-fast) var(--ease-out);
}
.burger-lines { position: relative; }
.burger-lines::before, .burger-lines::after { content: ""; position: absolute; left: 0; }
.burger-lines::before { transform: translateY(calc(-1 * var(--space-2))); }
.burger-lines::after  { transform: translateY(var(--space-2)); }
.nav-burger[aria-expanded="true"] .burger-lines { background-color: transparent; }
.nav-burger[aria-expanded="true"] .burger-lines::before { transform: rotate(45deg); }
.nav-burger[aria-expanded="true"] .burger-lines::after  { transform: rotate(-45deg); }

/* ── Drawer — body-level sibling of .nav (never nested) ───────── */
.drawer { position: fixed; inset: 0; z-index: var(--layer-drawer); overflow: clip; pointer-events: none; }
.drawer-scrim {
  position: absolute; inset: 0;
  background-color: var(--color-scrim);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: var(--drawer-width);
  display: flex; flex-direction: column; gap: var(--space-10);
  padding: var(--nav-clearance) var(--space-gutter) var(--space-8);
  background-color: var(--color-surface-alt);
  border-left: var(--border-thin) solid var(--color-hairline);
  transform: translateX(100%);
  transition: transform var(--duration-base) var(--ease-expo);
  overflow-y: auto;
}
.drawer[data-open="true"] { pointer-events: auto; }
.drawer[data-open="true"] .drawer-scrim { opacity: 1; }
.drawer[data-open="true"] .drawer-panel { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; min-height: var(--nav-logo-size); }
.drawer-links { list-style: none; }
.drawer-link {
  display: block;
  padding-block: var(--space-2);
  font-family: var(--type-drawer-family);
  font-size: var(--type-drawer-size);
  font-weight: var(--type-drawer-weight);
  font-style: var(--type-drawer-style);
  letter-spacing: var(--type-drawer-tracking);
  line-height: var(--type-drawer-line);
  text-transform: var(--type-drawer-transform);
  color: var(--type-drawer-color);
  text-decoration: none;
  transform: translateX(var(--motion-distance));
  opacity: 0;
  transition: color var(--duration-fast) var(--ease-out),
              transform var(--duration-slow) var(--ease-expo),
              opacity var(--duration-slow) var(--ease-out);
}
.drawer-link:hover, .drawer-link[aria-current="page"] { color: var(--color-text-strong); }
.drawer[data-open="true"] .drawer-link { transform: none; opacity: 1; }
.drawer[data-open="true"] .drawer-link:nth-child(1) { transition-delay: calc(var(--motion-stagger) * 1); }
.drawer[data-open="true"] .drawer-link:nth-child(2) { transition-delay: calc(var(--motion-stagger) * 2); }
.drawer[data-open="true"] .drawer-link:nth-child(3) { transition-delay: calc(var(--motion-stagger) * 3); }
.drawer[data-open="true"] .drawer-link:nth-child(4) { transition-delay: calc(var(--motion-stagger) * 4); }
.drawer-foot {
  margin-top: auto;
  color: var(--type-footer-color);
  font-family: var(--type-footer-family); font-size: var(--type-footer-size); font-weight: var(--type-footer-weight);
  font-style: var(--type-footer-style); line-height: var(--type-footer-line); letter-spacing: var(--type-footer-tracking);
  text-transform: var(--type-footer-transform);
}
.drawer-foot a { text-decoration: none; }
.drawer-foot a:hover { color: var(--color-text-strong); }

/* ── Work grid ────────────────────────────────────────────────── */
.filter-row { --row-gap: var(--space-2); }

.work-grid {
  list-style: none;
  display: grid;
  gap: calc(var(--space-grid) * 2) var(--space-grid);
  grid-template-columns: repeat(auto-fill, minmax(min(var(--col-min-md), 100%), 1fr));
  container-type: inline-size;
}
/* A wide tile spans two columns only when two columns exist. Container
   queries cannot read custom properties, so this literal is documented:
   40rem = 2 × --col-min-md (19rem) + one --space-grid. */
@container (min-width: 40rem) {
  .work-tile[data-layout="wide"] { grid-column: span 2; }
}
.work-tile[data-layout="wide"] .media { --media-ratio: var(--ratio-media-tile-wide); }
.work-tile[data-filtered-out] { display: none; }

.tile-link {
  display: flex; flex-direction: column; gap: var(--tile-caption-gap);
  text-decoration: none;
  color: var(--color-text);
}
.tile-link .media > img {
  transition: transform var(--duration-hover-media) var(--ease-expo),
              opacity var(--duration-media) var(--ease-out);
}
.tile-link:hover .media > img,
.tile-link:focus-visible .media > img { transform: scale(var(--motion-scale-hover)); }
.tile-link:hover .media::after { box-shadow: inset 0 0 0 var(--border-thin) var(--color-border-strong); }
.tile-caption { display: flex; flex-direction: column; gap: var(--space-1); padding-inline: var(--space-1); }
.tile-title {
  font-family: var(--type-tile-title-family);
  font-size: var(--type-tile-title-size);
  font-weight: var(--type-tile-title-weight);
  font-style: var(--type-tile-title-style);
  line-height: var(--type-tile-title-line);
  letter-spacing: var(--type-tile-title-tracking);
  text-transform: var(--type-tile-title-transform);
  color: var(--type-tile-title-color);
  display: inline-flex; align-items: baseline; gap: var(--space-2);
}
.tile-title::after {
  content: "↗";
  font-size: var(--type-tile-subtitle-size);
  color: var(--color-text-dim);
  transition: transform var(--duration-base) var(--ease-expo), color var(--duration-fast) var(--ease-out);
}
.tile-link:hover .tile-title::after { transform: translate(var(--space-1), calc(-1 * var(--space-1))); color: var(--color-secondary); }
.tile-sub {
  font-family: var(--type-tile-subtitle-family); font-size: var(--type-tile-subtitle-size); font-weight: var(--type-tile-subtitle-weight);
  font-style: var(--type-tile-subtitle-style); line-height: var(--type-tile-subtitle-line); letter-spacing: var(--type-tile-subtitle-tracking);
  text-transform: var(--type-tile-subtitle-transform); color: var(--type-tile-subtitle-color);
}

/* ── Project detail (page + lightbox) — block contract ─────────
   · Media column and info panel; panel fixed width on desktop.
   · Figures letterbox onto the deep surface; never crop artwork.
   · Reflows to one column via the single breakpoint.
   ─────────────────────────────────────────────────────────────── */
.project {
  --project-panel: var(--lightbox-panel-width);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--project-panel);
  gap: var(--space-8);
  align-items: start;
}
.project-media { display: flex; flex-direction: column; gap: var(--space-grid); min-width: 0; }
.project-figure {
  flex: 0 0 auto;              /* never shrink to fit a scroll column (Safari) */
  display: flex; align-items: center; justify-content: center;
  background-color: var(--color-surface-deep);
  border-radius: var(--tile-radius);
  overflow: clip;
}
.project-figure > img,
.project-zoom > img {
  width: 100%;
  max-height: var(--lightbox-media-max);
  object-fit: contain;
}
/* The whole figure is a zoom trigger (button so it is keyboard-reachable). */
.project-zoom { display: block; width: 100%; cursor: zoom-in; border-radius: inherit; }
.project-zoom:focus-visible { outline-offset: calc(-1 * var(--focus-ring-width)); }
.project-panel { position: sticky; top: calc(var(--nav-height) + var(--space-4)); min-width: 0; }
.project-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: var(--border-thin) solid var(--color-hairline);
}
.project-nav-link {
  display: flex; flex-direction: column; gap: var(--space-1);
  font-family: var(--type-nav-family);
  font-size: var(--type-nav-size);
  font-weight: var(--type-nav-weight);
  font-style: var(--type-nav-style);
  line-height: var(--type-nav-line);
  letter-spacing: var(--type-nav-tracking);
  text-transform: var(--type-nav-transform);
  color: var(--color-text-strong);
  text-decoration: none;
}
.project-nav-link[rel="next"] { text-align: right; }
.project-nav-dir {
  font-family: var(--type-meta-label-family); font-size: var(--type-meta-label-size); font-weight: var(--type-meta-label-weight);
  font-style: var(--type-meta-label-style); line-height: var(--type-meta-label-line); letter-spacing: var(--type-meta-label-tracking);
  text-transform: var(--type-meta-label-transform); color: var(--type-meta-label-color);
}
.project-nav-link:hover .project-nav-dir { color: var(--color-secondary); }

/* ── Lightbox <dialog> ────────────────────────────────────────── */
.lightbox {
  width: min(var(--lightbox-max-width), calc(100vw - var(--space-gutter) * 2));
  max-width: none;
  height: min(92dvh, calc(100dvh - var(--space-gutter) * 2));
  max-height: none;
  padding: 0;
  border: var(--border-thin) solid var(--color-hairline);
  border-radius: var(--lightbox-radius);
  background-color: var(--color-surface-alt);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
  overflow: clip;
}
.lightbox::backdrop { background-color: var(--color-scrim); backdrop-filter: blur(var(--nav-blur)); }
.lightbox[open] { animation: lightbox-in var(--duration-base) var(--ease-expo) both; }
.lightbox[open]::backdrop { animation: fade-in var(--duration-base) var(--ease-out) both; }
.lightbox[data-closing] { animation: lightbox-out var(--duration-fast) var(--ease-in-out) both; }
.lightbox[data-closing]::backdrop { animation: fade-out var(--duration-fast) var(--ease-out) both; }
.lightbox-close { position: absolute; top: var(--space-3); right: var(--space-3); z-index: var(--layer-base); background-color: var(--color-surface-alt); }
/* Inside the dialog the two columns are a FLEX row that stretches to the
   dialog height. Flex stretch gives each column a definite height in every
   engine, so overflow-y:auto scrolls — a height:100% chain inside a grid
   with align-items:start does not resolve in Safari and the media column
   collapsed/squashed there. */
.lightbox-body { height: 100%; overflow: hidden; }
.lightbox-body .project { display: flex; align-items: stretch; height: 100%; gap: 0; }
.lightbox-body .project-media {
  flex: 1 1 auto; min-width: 0; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-grid);
  background-color: var(--color-surface-deep);
  gap: var(--space-grid);
}
.lightbox-body .project-figure > img,
.lightbox-body .project-zoom > img { max-height: calc(var(--lightbox-media-max) - var(--space-grid) * 2); }
.lightbox-body .project-panel {
  position: static;
  flex: 0 0 var(--project-panel); width: var(--project-panel); min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: calc(var(--space-6) + var(--tap-target-min)) var(--space-6) var(--space-6);
}

@keyframes lightbox-in  { from { opacity: 0; transform: translateY(var(--motion-distance)) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes lightbox-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.985); } }
@keyframes fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }


/* ── Zoom viewer <dialog> — block contract ─────────────────────
   · Full-viewport, on top of the lightbox (a second modal dialog).
   · The image is laid out at natural pixel size and moved with a
     single transform (translate + scale) — JS owns the numbers, all
     limits come from --zoom-* tokens.
   · Drag pans, wheel/pinch zooms about the pointer, dblclick toggles.
   ─────────────────────────────────────────────────────────────── */
.zoom {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  padding: 0; border: 0;
  background-color: var(--color-surface-deep);
  color: var(--color-text);
  overflow: clip;
}
.zoom::backdrop { background-color: var(--color-scrim); }
.zoom[open] { animation: fade-in var(--duration-fast) var(--ease-out) both; }
.zoom-stage {
  position: absolute; inset: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.zoom-stage[data-dragging] { cursor: grabbing; }
.zoom-img {
  position: absolute; top: 0; left: 0;
  max-width: none;
  transform-origin: 0 0;
  will-change: transform;
  -webkit-user-drag: none;
  pointer-events: none;
}
.zoom-img[data-animate] { transition: transform var(--duration-base) var(--ease-expo); }
.zoom-close { position: absolute; top: var(--space-3); right: var(--space-3); background-color: var(--color-surface-alt); }
.zoom-bar {
  position: absolute; left: 50%; bottom: var(--space-4);
  translate: -50% 0;
  display: flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-full);
  background-color: var(--color-surface-alt);
  border: var(--border-thin) solid var(--color-hairline);
}
.zoom-level {
  min-width: calc(var(--tap-target-min) + var(--space-2)); text-align: center; font-variant-numeric: tabular-nums;
  font-family: var(--type-small-family); font-size: var(--type-small-size); font-weight: var(--type-small-weight);
  font-style: var(--type-small-style); line-height: var(--type-small-line); letter-spacing: var(--type-small-tracking);
  text-transform: var(--type-small-transform); color: var(--type-small-color);
}
.zoom-fit {
  min-height: var(--tap-target-min); padding-inline: var(--space-4);
  border-radius: var(--button-radius);
  font-family: var(--type-small-family); font-size: var(--type-small-size); font-weight: var(--type-small-weight);
  font-style: var(--type-small-style); line-height: var(--type-small-line); letter-spacing: var(--type-small-tracking);
  text-transform: var(--type-small-transform); color: var(--type-small-color);
}
.zoom-fit:hover { color: var(--color-text-strong); background-color: var(--color-surface-raised); }
.zoom-hint {
  position: absolute; left: 50%; bottom: calc(var(--space-4) + var(--tap-target-min) + var(--space-4));
  translate: -50% 0;
  font-family: var(--type-micro-family); font-size: var(--type-micro-size); font-weight: var(--type-micro-weight);
  font-style: var(--type-micro-style); line-height: var(--type-micro-line); letter-spacing: var(--type-micro-tracking);
  text-transform: var(--type-micro-transform); color: var(--type-micro-color);
  white-space: nowrap; pointer-events: none;
  animation: fade-in var(--duration-slow) var(--ease-out) both;
}

/* ── Maintenance page — full-viewport centred stack, no chrome ───── */
.maintenance {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: var(--space-section-spacious) var(--space-gutter);
  text-align: center;
}
.maintenance > .stack { max-width: var(--width-narrow); }
.maintenance .heading-group { align-items: center; }
.maintenance-mark { width: var(--maintenance-mark); height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.maintenance-brand {
  font-family: var(--type-footer-family); font-size: var(--type-footer-size); color: var(--color-text-faint);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
}

/* ── About / Contact / 404 ─────────────────────────────────────── */
.about-portrait { max-width: var(--width-narrow); }
.not-found-mark { max-width: calc(var(--col-min-lg) * 0.75); }
.not-found-mark .media { --media-radius: var(--radius-lg); }
.about-portrait .media { --media-radius: var(--portrait-radius); }
[data-block="about-lists"] .grid { --grid-min: var(--col-min-md); }

/* ── Footer ───────────────────────────────────────────────────── */
.footer {
  background-color: var(--color-surface-alt);
  border-top: var(--border-thin) solid var(--color-hairline);
  padding-block: var(--space-section);
  view-transition-name: footer;
}
/* Three symmetric columns: brand left-aligned, links centred, meta
   right-aligned; the outer columns share the leftover width so the middle
   one is truly centred. Everything vertically centred. On mobile (the one
   breakpoint) it stacks and everything centres. */
.footer-grid {
  display: grid;
  gap: var(--space-8) var(--space-grid);
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}
.footer-grid > .brand { justify-self: start; }
.footer-links { justify-self: center; justify-content: center; }
.footer-meta { justify-self: end; align-items: flex-end; text-align: right; }
.footer-links a {
  font-family: var(--type-footer-family); font-size: var(--type-footer-size); font-weight: var(--type-footer-weight);
  font-style: var(--type-footer-style); line-height: var(--type-footer-line); letter-spacing: var(--type-footer-tracking);
  text-transform: var(--type-footer-transform); color: var(--type-footer-color); text-decoration: none;
}
.footer-links a:hover, .footer-links a[aria-current="page"] { color: var(--color-text-strong); }
.footer-meta {
  font-family: var(--type-footer-family); font-size: var(--type-footer-size); font-weight: var(--type-footer-weight);
  font-style: var(--type-footer-style); line-height: var(--type-footer-line); letter-spacing: var(--type-footer-tracking);
  text-transform: var(--type-footer-transform); color: var(--type-footer-color);
}
.footer-meta a { text-decoration: none; color: var(--color-text); }
.footer-copy { color: var(--color-text-faint); }

/* ── Motion layer 1: entrance (CSS animation — self-completing) ─ */
@keyframes rise {
  from { opacity: 0; transform: translateY(var(--motion-distance)); }
  to   { opacity: 1; transform: none; }
}
main > .section:first-of-type .heading-group,
main > .section:first-of-type .lead,
main > .section:first-of-type .split > *,
main > .section:first-of-type .back-link,
[data-block="work"] .filter-row,
.work-tile:nth-child(-n+6) { animation: rise var(--motion-enter); }
main > .section:first-of-type .lead        { animation-delay: calc(var(--motion-stagger) * 1); }
main > .section:first-of-type .split > :nth-child(2) { animation-delay: calc(var(--motion-stagger) * 1); }
[data-block="work"] .filter-row            { animation-delay: calc(var(--motion-stagger) * 2); }
.work-tile:nth-child(1) { animation-delay: calc(var(--motion-stagger) * 3); }
.work-tile:nth-child(2) { animation-delay: calc(var(--motion-stagger) * 4); }
.work-tile:nth-child(3) { animation-delay: calc(var(--motion-stagger) * 5); }
.work-tile:nth-child(4) { animation-delay: calc(var(--motion-stagger) * 6); }
.work-tile:nth-child(5) { animation-delay: calc(var(--motion-stagger) * 7); }
.work-tile:nth-child(6) { animation-delay: calc(var(--motion-stagger) * 8); }

/* ── Motion layer 2: scroll reveal (JS adds .js-reveal below fold) */
.js-reveal { opacity: 0; transform: translateY(var(--motion-distance)); }
.js-reveal[data-revealed="true"] {
  opacity: 1; transform: none;
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-expo);
}

/* ── Motion layer 3: media fade (JS marks only images not yet loaded) */
img[data-loading] { opacity: 0; }
img[data-loaded]  { opacity: 1; transition: var(--motion-fade); }

/* ── Motion layer 4: cross-page navigation ────────────────────── */
@view-transition { navigation: auto; }

/* ── Reduced motion: everything off, wholesale ────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;      /* a11y-constant */
    animation-iteration-count: 1 !important;    /* a11y-constant */
    transition-duration: 0.01ms !important;     /* a11y-constant */
    scroll-behavior: auto !important;           /* a11y-constant */
  }
}

/* ── The ONE breakpoint — layout only ─────────────────────────── */
@media (max-width: 48rem) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
  .project { grid-template-columns: minmax(0, 1fr); }
  .project-panel { position: static; }

  .lightbox { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; border: 0; }
  .lightbox-body { overflow-y: auto; }
  .lightbox-body .project { flex-direction: column; height: auto; }
  .lightbox-body .project-media { flex: none; overflow: visible; padding-top: calc(var(--tap-target-min) + var(--space-6)); }
  .lightbox-body .project-figure > img,
  .lightbox-body .project-zoom > img { max-height: 70dvh; }
  .lightbox-body .project-panel { flex: none; width: auto; overflow: visible; }

  .footer-grid { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .footer-grid > .brand, .footer-links, .footer-meta { justify-self: center; align-items: center; text-align: center; }
  .zoom-hint { display: none; }
}