/* ------------------------------------------------------------------ *
 * site.css — tim trautmann redesign foundation
 *
 * Load order: after style.css during the port. Tokens + component
 * styling here override the legacy rules page-by-page as views migrate.
 *
 * Canonical spec: /Users/timtrautmann/Development/Tim Trautmann Photo
 * Redesign/  (BRIEF.md, README.md, mockup HTML).
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* Fonts — additional weight mappings                                  */
/* ------------------------------------------------------------------ */
/* The legacy style.css declares the Light woff2 at font-weight: 100.
   The redesign asks for `font-weight: 300` (matching the mockup's
   tokens). Without these declarations the browser would round 300 up
   to 400 (Regular) and our "light" copy would render too heavy.
   These additions don't replace the legacy 100 mappings — both
   coexist, mapping the same file at two weight stops. */
@font-face {
  font-family: "GT Pressura";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/GT-Pressura-Standard-Light.woff2") format("woff2");
}
@font-face {
  font-family: "GT Pressura";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/GT-Pressura-Standard-Light-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "GT Pressura Mono";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/GT-Pressura-Mono-Light.woff2") format("woff2");
}
@font-face {
  font-family: "GT Pressura Mono";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/GT-Pressura-Mono-Light-Italic.woff2") format("woff2");
}

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

:root {
  --bg: #fafaf8;
  --fg: #1a1715;
  --rule: rgba(26, 23, 21, 0.14);
  --muted: rgba(26, 23, 21, 0.66);
  --soft: rgba(26, 23, 21, 0.04);
  --accent: #ff5c1f;

  --font-sans: "GT Pressura", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "GT Pressura Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout widths from the brief. */
  --measure-stream: 820px;
  --measure-grid: 1060px;
  --gutter: 28px;

  /* Header height — used for sticky offsets. */
  --header-h: 64px;
}

[data-theme="dark"] {
  --bg: #0d0d0d;
  --fg: #e8e6e0;
  --rule: rgba(232, 230, 224, 0.14);
  --muted: rgba(232, 230, 224, 0.66);
  --soft: rgba(232, 230, 224, 0.04);
  --accent: #ff5c1f;
}

/* ------------------------------------------------------------------ */
/* Reset-ish baseline                                                  */
/* ------------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
  color: var(--fg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
  font-feature-settings: "kern", "liga", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

input, textarea, select { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }
/* No-underline on hover — override legacy style.css's a:hover rule.
   Links that *should* keep an underline (KV email, etc.) set it
   explicitly on their own class. */
a:hover { color: var(--accent); text-decoration: none; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

/* Focus — visible but not garish. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ------------------------------------------------------------------ */
/* Typography                                                          */
/* ------------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 0;
}

h1 { font-size: clamp(40px, 5.5vw, 84px); letter-spacing: -0.02em; }
h2 { font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -0.015em; line-height: 1.15; }
h3 { font-size: clamp(20px, 1.6vw, 24px); letter-spacing: -0.01em; line-height: 1.25; }
h4 { font-size: 17px; line-height: 1.3; }

p { margin: 0 0 1rem; }

em, i { font-style: italic; }
strong, b { font-weight: 700; }

small { font-size: 0.85em; color: var(--muted); }

code, kbd, samp, pre { font-family: var(--font-mono); }

/* Section label pattern: "§ 01 — Name    right" */
.section-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 28px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.section-label > .right { color: var(--muted); }
.section-label__num::before { content: "§ "; }

/* Metadata text (EXIF, location, kickers). */
.meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}

/* Italic accent — used in hero headlines. */
.accent-italic {
  color: var(--accent);
  font-style: italic;
}

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

.container {
  width: 100%;
  max-width: var(--measure-grid);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Screen-reader-only (for accessibility labels we want visually hidden). */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Skip-to-content link — visible on focus. */
.skip-link {
  position: absolute;
  top: -60px;
  left: 12px;
  z-index: 1000;
  padding: 8px 14px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.skip-link:focus { top: 12px; }

/* ------------------------------------------------------------------ */
/* Header — sticky masthead                                            */
/* ------------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 16px var(--gutter);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--fg);
}
.site-header__brand svg { height: 24px; width: auto; fill: currentColor; }
.site-header__brand:hover { color: var(--fg); }

.site-header__tagline {
  display: inline-block;
  padding-left: 12px;
  border-left: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.site-nav {
  display: flex;
  justify-content: center;
  gap: 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  color: var(--muted);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.site-nav a:hover { color: var(--fg); }
.site-nav a[aria-current="page"] {
  color: var(--fg);
  border-bottom-color: var(--fg);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-self: end;
}

.weather-chip {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.weather-chip__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #7fa7c9;
}

.search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 11px;
  border: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 120ms ease, border-color 120ms ease;
}
.search-trigger:hover { color: var(--fg); border-color: var(--fg); }

/* kbd — keyboard affordance chip. */
kbd, .kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: transparent;
  border-radius: 2px;
  line-height: 1.4;
}

/* Mobile menu toggle — hidden until small viewports. */
.site-header__mobile-toggle {
  display: none;
}

@media (max-width: 960px) {
  .site-header {
    grid-template-columns: auto 1fr auto;
  }
  .site-header > nav {
    display: none;
  }
  .site-header__mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 9px;
    border: 1px solid var(--rule);
    color: var(--muted);
  }
  .site-header__mobile-toggle:hover { color: var(--fg); border-color: var(--fg); }
  .site-header[data-menu-open="true"] > nav {
    display: block;
    position: absolute;
    top: calc(100% - 1px);
    right: var(--gutter);
    min-width: 200px;
    background: var(--bg);
    border: 1px solid var(--rule);
    box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.12);
    z-index: 1;
  }
  .site-header[data-menu-open="true"] .site-nav {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 14px;
  }
  .site-header[data-menu-open="true"] .site-nav li {
    display: block;
    border-bottom: 1px solid var(--rule);
  }
  .site-header[data-menu-open="true"] .site-nav li:last-child {
    border-bottom: none;
  }
  .site-header[data-menu-open="true"] .site-nav a {
    display: block;
    padding: 18px var(--gutter);
    color: var(--fg);
    border-bottom: none;
    padding-bottom: 18px;
  }
  .site-header[data-menu-open="true"] .site-nav a:hover,
  .site-header[data-menu-open="true"] .site-nav a:focus-visible {
    background: var(--soft);
    color: var(--fg);
  }
  .site-header[data-menu-open="true"] .site-nav a[aria-current="page"] {
    color: var(--accent);
    border-bottom: none;
  }
  .site-header__tagline { display: none; }
}

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

.site-footer {
  margin-top: 96px;
  padding: 40px var(--gutter);
  border-top: 1px solid var(--rule);
  background: var(--bg);
  color: var(--fg);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: 40px;
  max-width: var(--measure-grid);
  margin-inline: auto;
}
.site-footer__mark svg { height: 52px; width: auto; fill: currentColor; }
.site-footer__colophon {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  line-height: 1.8;
}
.site-footer__colophon a { color: var(--muted); }
.site-footer__colophon a:hover { color: var(--accent); }

.site-footer__links {
  display: flex;
  gap: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  list-style: none;
  margin: 0; padding: 0;
}
.site-footer__links a { color: var(--muted); }
.site-footer__links a:hover { color: var(--accent); }

@media (max-width: 720px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
}

/* ------------------------------------------------------------------ */
/* Command palette                                                     */
/* ------------------------------------------------------------------ */

/* The server renders an empty shell; client JS mounts it + populates results.
   search.js toggles visibility via the `hidden` attribute (overlay.hidden =
   true|false), so we honor that — the [hidden] browser default supplies
   display:none, and our style block applies only when hidden is absent.
   Compound id+class selectors out-specify the legacy #search-overlay*
   rules in style.css. */
#search-overlay.cmdk {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  padding-top: 120px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  overflow: hidden;
}
#search-overlay.cmdk[hidden] { display: none; }

#search-overlay-inner.cmdk__panel {
  width: min(600px, calc(100% - 32px));
  max-width: none;
  margin: 0;
  padding: 0;
  max-height: 500px;
  background: var(--bg);
  border: 1px solid var(--rule);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
}

#search-header.cmdk__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  margin: 0;
}
.cmdk__slash {
  font-family: var(--font-mono);
  color: var(--accent);
}
#search-input.cmdk__input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--fg);
  caret-color: var(--accent);
}
#search-input.cmdk__input::placeholder { color: var(--muted); opacity: 1; }
#search-close { color: var(--muted); opacity: 1; }
#search-close:hover { color: var(--fg); opacity: 1; }

.cmdk__body {
  /* Horizontal inset so the JS-rendered legacy result cards (which
     bring their own minimal padding) don't sit flush against the
     panel edge. */
  padding: 10px 18px;
  overflow-y: auto;
  flex: 1;
}
.cmdk__section-label {
  padding: 6px 18px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.cmdk__foot {
  display: flex;
  gap: 18px;
  padding: 12px 18px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.cmdk__foot > .cmdk__foot-right { margin-left: auto; }
.cmdk__foot a { color: var(--muted); }
.cmdk__foot a:hover { color: var(--accent); }

/* ================================================================== */
/* Homepage — Archive direction                                        */
/* ================================================================== */

main.home { display: block; }

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

.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--rule);
  /* No upper cap — matches the mockup. The full 80vh gives the
     space-between distribution enough room to push the KV cluster down
     toward the bottom, opening the gap between lede and divider. */
  min-height: 80vh;
}

.hero__copy {
  padding: 72px 56px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  border-right: 1px solid var(--rule);
}

.hero__rail {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 36px;
  /* Header-level meta is 11px in the mockup — override .meta's 10px. */
  font-size: 11px;
  letter-spacing: 0.14em;
}
.hero__rail-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
}
.hero__rail-mark::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.hero__headline {
  font-size: clamp(40px, 5.5vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 0;
}

.hero__lede {
  font-size: 17px;
  line-height: 1.45;
  font-weight: 300;
  color: var(--muted);
  max-width: 520px;
  margin: 32px 0 0;
}

.hero__kvs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  border-top: 1px solid var(--rule);
  padding-top: 28px;
  margin-top: 24px;
}

.hero__cta {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.hero__slideshow {
  position: relative;
  background: #000;
  overflow: hidden;
  min-height: 380px;
}
.hero__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
  pointer-events: none;
}
.hero__slide.is-active { opacity: 1; pointer-events: auto; }
.hero__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero__slide > a {
  display: block;
  width: 100%; height: 100%;
}

.hero__caption {
  position: absolute;
  top: 20px; left: 20px; right: 20px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  pointer-events: none;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
  /* Two-layer shadow keeps the caption legible against bright/white
     areas of the photograph: a tight 1px hard shadow for a crisp edge,
     plus a soft 8px halo to lift the text off any background. */
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.85),
    0 0 8px  rgba(0, 0, 0, 0.55);
}
.hero__pip {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.hero__caption-right {
  text-align: right;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero__mark {
  position: absolute;
  bottom: 20px; left: 20px;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  pointer-events: none;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.85),
    0 0 8px  rgba(0, 0, 0, 0.55);
}

.hero__dots {
  position: absolute;
  bottom: 20px; right: 20px;
  display: flex;
  gap: 6px;
  z-index: 2;
}
.hero__dot {
  width: 20px; height: 2px;
  background: rgba(255, 255, 255, 0.3);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 200ms ease;
}
.hero__dot.is-active,
.hero__dot:hover { background: #fff; }

/* ------------------------------------------------------------------ */
/* KV (label + value pair)                                             */
/* ------------------------------------------------------------------ */

.kv__label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.kv__value {
  font-family: var(--font-mono);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--fg);
}
.kv__value a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.kv__value a:hover { color: var(--accent); }
.kv__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}
.kv--accent .kv__value { color: var(--accent); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.btn--primary {
  background: var(--accent);
  color: #fff;
}
.btn--primary:hover { background: var(--fg); color: var(--bg); }
.btn--outline {
  border-color: var(--fg);
  color: var(--fg);
}
.btn--outline:hover {
  background: var(--fg);
  color: var(--bg);
}

/* ------------------------------------------------------------------ */
/* Section wrappers                                                    */
/* ------------------------------------------------------------------ */

.section {
  /* Full-bleed sections — gutter-padded, no max-width clamp.
     The mockup spans the entire viewport with only 28px edges. */
  padding: 56px var(--gutter);
  border-top: 1px solid var(--rule);
}
.section .section-label {
  margin-bottom: 28px;
}
.section .section-label .right a { color: var(--muted); }
.section .section-label .right a:hover { color: var(--accent); }

/* ------------------------------------------------------------------ */
/* §01 Index                                                           */
/* ------------------------------------------------------------------ */

.index__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.index__card {
  background: var(--bg);
  color: var(--fg);
  padding: 20px;
  display: block;
  position: relative;
  text-decoration: none;
  transition: background 200ms ease;
}
.index__card:hover { color: var(--fg); }

.index__card-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}

.index__card-frame {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #111;
}
.index__card-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms ease, filter 400ms ease;
}
.index__card:hover .index__card-frame img { transform: scale(1.04); }
.index__card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 14px;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.85) 100%);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 300ms ease;
}
.index__card:hover .index__card-overlay { opacity: 1; }

/* ------------------------------------------------------------------ */
/* §02 Galleries                                                       */
/* ------------------------------------------------------------------ */

.galleries__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.gallery-card {
  display: block;
  border: 1px solid var(--rule);
  text-decoration: none;
  color: var(--fg);
  transition: border-color 300ms ease;
}
.gallery-card:hover {
  border-color: var(--fg);
  color: var(--fg);
}

.gallery-card__frame {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #111;
}
.gallery-card__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms ease;
}
.gallery-card:hover .gallery-card__frame img { transform: scale(1.04); }

.gallery-card__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
}

.gallery-card__top,
.gallery-card__bottom { position: absolute; left: 16px; right: 16px; }
.gallery-card__top {
  top: 16px;
  display: flex; justify-content: space-between;
  color: rgba(255,255,255,0.85);
}
.gallery-card__bottom {
  bottom: 20px;
  color: #fff;
}
.gallery-card__title {
  font-size: clamp(28px, 3vw, 44px);
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1;
  color: #fff;
}
.gallery-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 10px;
}
.gallery-card__foot .meta { color: rgba(255,255,255,0.85); }
.gallery-card__arrow {
  font-size: 16px;
  color: var(--accent);
}

/* ------------------------------------------------------------------ */
/* §03 Journal                                                         */
/* ------------------------------------------------------------------ */

.journal__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.journal-card {
  background: var(--bg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-decoration: none;
  color: var(--fg);
  min-width: 0;
}
.journal-card:hover { color: var(--fg); }
.journal-card__head {
  display: flex;
  justify-content: space-between;
}
.journal-card__frame {
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #111;
}
.journal-card__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}
.journal-card:hover .journal-card__frame img { transform: scale(1.03); }
.journal-card__title {
  font-size: 20px;
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.journal-card__blurb {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  font-weight: 300;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* §04 Albums                                                          */
/* ------------------------------------------------------------------ */

.albums__list {
  list-style: none;
  margin: 0; padding: 0;
  border-top: 1px solid var(--rule);
}
.album-row {
  display: grid;
  grid-template-columns: 120px 1fr auto auto;
  gap: 24px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--fg);
  transition: padding 200ms ease, background 200ms ease;
}
.album-row:hover {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  padding-inline: 12px;
  color: var(--fg);
}
.album-row:hover .album-row__arrow { color: var(--accent); }

.album-row__cover {
  width: 120px; height: 120px;
  background: #111;
  overflow: hidden;
}
.album-row__cover img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.album-row__title {
  font-family: var(--font-sans);
  font-size: 20px;
  letter-spacing: -0.01em;
}
.album-row__subtitle {
  margin-left: 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
}
.album-row__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
}
.album-row__arrow {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--muted);
  padding-left: 12px;
}

/* ------------------------------------------------------------------ */
/* §05 / §06 Two-up                                                    */
/* ------------------------------------------------------------------ */

.twoup__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}
.twoup__col .section-label { margin-bottom: 18px; }
.twoup__h {
  font-size: clamp(28px, 3vw, 40px);
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.twoup__lede {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  font-weight: 300;
  max-width: 460px;
}
.twoup__cta { margin-top: 28px; }
.twoup__kvs {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ------------------------------------------------------------------ */
/* Responsive: collapse the homepage to a single column under tablet   */
/* ------------------------------------------------------------------ */

@media (max-width: 960px) {
  .hero {
    grid-template-columns: 1fr;
  }
  .hero__copy {
    padding: 40px var(--gutter);
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .hero__slideshow { aspect-ratio: 4 / 3; min-height: 0; }

  .index__grid,
  .galleries__grid,
  .journal__grid {
    grid-template-columns: 1fr;
  }

  .album-row {
    grid-template-columns: 72px 1fr auto;
    gap: 14px;
  }
  .album-row__cover { width: 72px; height: 72px; }
  .album-row__meta { display: none; }
  .album-row__subtitle { display: none; }

  .twoup__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ================================================================== */
/* Gallery — editorial pairs                                           */
/* ================================================================== */

main.gallery-page { display: block; }

/* ------------------------------------------------------------------ */
/* Editorial masthead                                                  */
/* ------------------------------------------------------------------ */

.gmast {
  padding: 80px var(--gutter) 64px;
  border-bottom: 1px solid var(--rule);
}
.gmast__grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: baseline;
  max-width: 1400px;
  margin-inline: auto;
}
.gmast__kicker {
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.22em;
}
.gmast__kicker-emph { color: var(--accent); }

.gmast__title {
  font-size: clamp(56px, 8vw, 144px);
  line-height: 0.9;
  font-weight: 300;
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--fg);
}
.gmast__title em.accent-italic {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

.gmast__blurb {
  margin: 32px 0 0;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.45;
  font-weight: 300;
  color: var(--fg);
  letter-spacing: -0.005em;
  max-width: 580px;
}

.gmast__body { margin-top: 32px; }
.gmast__body p { font-size: 17px; line-height: 1.55; max-width: 580px; }
.gmast__map-link {
  display: inline-block;
  margin-top: 18px;
  color: var(--accent);
}

/* Standard mode — smaller display title (used by albums/keywords/etc.) */
.gmast--standard { padding: 64px var(--gutter) 48px; }
.gmast__title--standard {
  font-size: clamp(40px, 5vw, 88px);
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* ------------------------------------------------------------------ */
/* Category switcher                                                   */
/* ------------------------------------------------------------------ */

.cat-switcher {
  max-width: 1400px;
  margin: 56px auto 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--rule);
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.cat-switcher__item {
  color: var(--muted);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.cat-switcher__item:hover { color: var(--fg); }
.cat-switcher__item.is-active {
  color: var(--fg);
  border-bottom-color: var(--fg);
}
.cat-switcher__count {
  margin-left: 8px;
  opacity: 0.5;
  font-size: 10px;
}

/* ------------------------------------------------------------------ */
/* Plates — editorial pairs                                            */
/* ------------------------------------------------------------------ */

.plates {
  padding: 96px var(--gutter);
  max-width: 1400px;
  margin-inline: auto;
  display: grid;
  gap: 96px;
}

.pair {
  display: grid;
  gap: 48px;
  align-items: start;
}
/* Same-orientation pairs: 1.4fr/1fr asymmetric rhythm, alternating. */
.pair--pp-left,
.pair--ll-left   { grid-template-columns: 1.4fr 1fr; }
.pair--pp-right,
.pair--ll-right  { grid-template-columns: 1fr 1.4fr; }

/* Mixed pairs: 1fr/2fr (portrait 3:4 + landscape 3:2 at matched heights). */
.pair--pl { grid-template-columns: 1fr 2fr; }
.pair--lp { grid-template-columns: 2fr 1fr; }

.pair--solo-portrait {
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
}
.pair--solo-landscape {
  grid-template-columns: 1fr;
}

/* Landscape-framed plates: 3:2 crop.
   Portrait plates keep the default 3:4 from .plate__frame.
   focus_x/focus_y on the img keeps subjects in view under either crop. */
.pair--ll-left .plate__frame,
.pair--ll-right .plate__frame,
.pair--solo-landscape .plate__frame,
.pair--pl .plate:last-child .plate__frame,
.pair--lp .plate:first-child .plate__frame {
  aspect-ratio: 3 / 2;
}

/* Standard mode — uniform 3-up grid with tighter spacing for
   albums/keywords where photos aren't curated and counts can be high. */
.plates--flat {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 24px;
  padding: 56px var(--gutter);
}

/* ------------------------------------------------------------------ */
/* Plate (single photo card)                                           */
/* ------------------------------------------------------------------ */

.plate {
  display: block;
  text-decoration: none;
  color: var(--fg);
}
.plate:hover { color: var(--fg); }

.plate__frame {
  position: relative;
  aspect-ratio: 3 / 4;
  margin: 0;
  overflow: hidden;
  background: #080706;
}
.plate__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s ease;
}
.plate:hover .plate__frame img { transform: scale(1.04); }

/* EXIF appears only on hover; a heavy text-shadow keeps it legible
   against any photograph without darkening the image itself. */
.plate__exif {
  position: absolute;
  inset: auto 20px 20px 20px;
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.16em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms ease, transform 500ms ease;
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.85),
    0 0 8px  rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.plate:hover .plate__exif {
  opacity: 1;
  transform: translateY(0);
}

.plate__title-row {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
}
.plate__title {
  font-size: 22px;
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.plate__meta {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
  white-space: nowrap;
}
.plate__caption {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 300;
  color: var(--muted);
  max-width: 62ch;
}

/* Flat-mode plates are smaller — shrink the title to match. */
.plates--flat .plate__title { font-size: 17px; }
.plates--flat .plate__caption { font-size: 13px; }

/* ------------------------------------------------------------------ */
/* End-of-gallery cross-nav                                            */
/* ------------------------------------------------------------------ */

.gallery-end {
  border-top: 1px solid var(--rule);
  padding: 96px var(--gutter);
}
.gallery-end__link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: baseline;
  max-width: 1400px;
  margin-inline: auto;
  color: var(--fg);
}
.gallery-end__link:hover { color: var(--fg); }
.gallery-end__kicker { margin-bottom: 18px; letter-spacing: 0.22em; }
.gallery-end__title {
  font-size: clamp(40px, 5vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-weight: 300;
}
.gallery-end__title em.accent-italic {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.gallery-end__count {
  text-align: right;
  letter-spacing: 0.16em;
}
.gallery-end__arrow { color: var(--accent); }
.gallery-end__link:hover .gallery-end__arrow { transform: translateX(4px); transition: transform 200ms ease; }

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 960px) {
  .gmast__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .pair--pp-left,
  .pair--pp-right,
  .pair--ll-left,
  .pair--ll-right,
  .pair--pl,
  .pair--lp { grid-template-columns: 1fr; }
  .plates { gap: 64px; padding: 56px var(--gutter); }
  .plates--flat { grid-template-columns: repeat(2, 1fr); }
  .gallery-end__link { grid-template-columns: 1fr; gap: 16px; }
  .gallery-end__count { text-align: left; }
}

@media (max-width: 640px) {
  .plates--flat { grid-template-columns: 1fr; }
}

/* ================================================================== */
/* Photo detail — plate layout, minimal chrome                         */
/* ================================================================== */

/* Hide the site header/footer + skip link on photo detail. The page
   becomes a focused viewer with its own slim top bar. */
body.photo-detail-page .site-header,
body.photo-detail-page .site-footer,
body.photo-detail-page .skip-link { display: none !important; }
body.photo-detail-page #main { padding: 0; }
body.photo-detail-page { background: #0a0a0a; color: #e8e6e0; }

.pd { display: block; }

/* ------------------------------------------------------------------ */
/* Slim top bar                                                        */
/* ------------------------------------------------------------------ */

.pd-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pd-topbar a { color: #e8e6e0; }
.pd-topbar a:hover { color: var(--accent); }
.pd-topbar__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.pd-topbar__pos {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  color: rgba(232, 230, 224, 0.6);
}
.pd-topbar__nav { color: var(--accent); }

/* ------------------------------------------------------------------ */
/* Photo + metadata split                                              */
/* ------------------------------------------------------------------ */

.pd-split {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  min-height: calc(100vh - 60px);
}

.pd-photo {
  position: relative;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.pd-photo a { display: block; max-width: 100%; max-height: 100%; }
.pd-photo img {
  max-width: 100%;
  max-height: calc(100vh - 140px);
  object-fit: contain;
  display: block;
}

/* ------------------------------------------------------------------ */
/* Metadata sidebar                                                    */
/* ------------------------------------------------------------------ */

.pd-meta {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  background: #0a0a0a;
  overflow-y: auto;
  max-height: calc(100vh - 60px);
  position: sticky;
  top: 60px;
  align-self: start;
}
.pd-meta__inner { padding: 40px 28px 60px; color: #e8e6e0; }

.pd-meta__kicker {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
  color: rgba(232, 230, 224, 0.55);
}
.pd-meta__tag { color: var(--accent); }
.pd-meta__id  { color: rgba(232, 230, 224, 0.55); }

.pd-meta__title {
  font-size: clamp(26px, 2vw, 34px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: #e8e6e0;
}
.pd-meta__caption {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: #e8e6e0;
  max-width: 56ch;
}

.pd-section {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.pd-section__label {
  display: block;
  margin-bottom: 14px;
  letter-spacing: 0.2em;
  color: rgba(232, 230, 224, 0.55);
}

/* Exposure key/value grid */
.pd-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 20px;
  row-gap: 8px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pd-grid dt { color: rgba(232, 230, 224, 0.55); margin: 0; }
.pd-grid dd { margin: 0; color: #e8e6e0; }
.pd-grid dd a { color: #e8e6e0; }
.pd-grid dd a:hover { color: var(--accent); }

/* Location */
.pd-location-crumb {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.7;
  color: #e8e6e0;
}
.pd-location-crumb a { color: #e8e6e0; }
.pd-location-crumb a:hover { color: var(--accent); }
.pd-crumb-sep { color: rgba(232, 230, 224, 0.55); margin: 0 4px; }
.pd-location-coords {
  margin-top: 10px;
  letter-spacing: 0.14em;
  color: rgba(232, 230, 224, 0.55);
}
.pd-map {
  margin-top: 16px;
  height: 220px;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.pd-map-explore {
  display: inline-block;
  margin-top: 10px;
  color: var(--accent);
}

/* Keyword chips */
.pd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pd-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e8e6e0;
}
.pd-chip:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Albums (Included in) */
.pd-albums {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pd-albums a { color: #e8e6e0; font-size: 14px; }
.pd-albums a:hover { color: var(--accent); }

/* Licensing */
.pd-license {
  font-size: 13px;
  line-height: 1.55;
  color: #e8e6e0;
  margin: 0 0 8px;
}
.pd-license-actions {
  margin-top: 14px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pd-license-cta {
  padding-bottom: 2px;
  color: #e8e6e0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.pd-license-cta:hover { border-bottom-color: var(--accent); color: var(--accent); }
.pd-license-cta--accent { color: var(--accent); border-bottom-color: var(--accent); }

/* Alt text details */
.pd-alt summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pd-alt summary::-webkit-details-marker { display: none; }
.pd-alt summary::after { content: '▾'; font-size: 9px; opacity: 0.5; }
.pd-alt[open] summary::after { content: '▴'; }
.pd-alt-text {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: #e8e6e0;
}

/* ------------------------------------------------------------------ */
/* Prev / next strip                                                   */
/* ------------------------------------------------------------------ */

.pd-prevnext {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.pd-prevnext__cell {
  display: grid;
  gap: 20px;
  padding: 28px 32px;
  align-items: center;
  background: #0a0a0a;
  color: #e8e6e0;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 200ms ease;
}
.pd-prevnext__cell:hover { background: #111; color: #e8e6e0; }
.pd-prevnext__cell--prev { grid-template-columns: 120px 1fr; }
.pd-prevnext__cell--next { grid-template-columns: 1fr 120px; text-align: right; }
.pd-prevnext__cell--next { border-right: 0; }

.pd-prevnext__thumb {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #000;
}
.pd-prevnext__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.pd-prevnext__label { color: var(--accent); margin-bottom: 8px; }
.pd-prevnext__title {
  font-family: var(--font-sans);
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 960px) {
  .pd-split { grid-template-columns: 1fr; }
  .pd-meta {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    position: static;
    max-height: none;
  }
  .pd-photo { padding: 20px; }
  .pd-photo img { max-height: 70vh; }
  .pd-prevnext { grid-template-columns: 1fr; }
  .pd-prevnext__cell--prev,
  .pd-prevnext__cell--next {
    grid-template-columns: 80px 1fr;
    text-align: left;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .pd-prevnext__cell--next > .pd-prevnext__thumb { order: -1; }
}

/* ================================================================== */
/* About — editorial voice, inset portrait                             */
/* ================================================================== */

main.about { display: block; }

/* ------------------------------------------------------------------ */
/* Inset hero (copy left, portrait right)                              */
/* ------------------------------------------------------------------ */

.about-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--rule);
  min-height: 70vh;
}

.about-hero__copy {
  padding: 72px 56px;
  display: flex;
  flex-direction: column;
  /* On wide viewports the column itself is 50% of the screen — push
     the content to the inside (right) edge so it sits adjacent to the
     portrait instead of floating in whitespace. Each block is capped
     so the lede stays a comfortable read-width. */
  align-items: flex-end;
  border-right: 1px solid var(--rule);
}
.about-hero__copy > * {
  width: 100%;
  max-width: 720px;
}

.about-hero__rail {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 36px;
  font-size: 11px;
  letter-spacing: 0.14em;
}
.about-hero__rail-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
}
.about-hero__rail-mark::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.about-hero__headline {
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.05;
  font-weight: 300;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--fg);
}

.about-hero__prose {
  margin-top: 56px;
  max-width: 56ch;
}
.about-hero__prose p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg);
  margin: 0 0 22px;
}
.about-hero__prose p:last-child { margin-bottom: 0; }

.about-hero__portrait {
  position: relative;
  background: #111;
  overflow: hidden;
  min-height: 600px;
}
.about-hero__portrait img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
.about-hero__portrait-top,
.about-hero__portrait-bottom {
  position: absolute;
  left: 20px; right: 20px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.85),
    0 0 8px  rgba(0, 0, 0, 0.55);
}
.about-hero__portrait-top { top: 20px; }
.about-hero__portrait-bottom { bottom: 20px; }
.about-hero__portrait-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.about-hero__portrait-mark::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ------------------------------------------------------------------ */
/* §02 Disciplines                                                     */
/* ------------------------------------------------------------------ */

.about-disciplines { padding-block: 72px; }
.discipline-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.discipline-cell {
  padding: 48px 24px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.discipline-cell__num {
  margin-bottom: 14px;
  letter-spacing: 0.14em;
}
.discipline-cell__name {
  font-size: clamp(28px, 3.2vw, 48px);
  letter-spacing: -0.02em;
  line-height: 0.95;
  font-weight: 400;
}

/* ------------------------------------------------------------------ */
/* §03/04/05 Trio                                                      */
/* ------------------------------------------------------------------ */

.about-trio { padding-block: 72px; }
.trio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.lang-list {
  list-style: none;
  margin: 0; padding: 0;
  border-top: 1px solid var(--rule);
}
.lang-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.lang-item__label {
  font-size: 18px;
  letter-spacing: -0.01em;
}
.lang-item__level {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.lang-item__level--accent { color: var(--accent); }

.industry-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.industry-chip {
  padding: 8px 14px;
  border: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
}
.trio-col__note {
  margin-top: 28px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  font-weight: 300;
}

.bio-list {
  border-top: 1px solid var(--rule);
  padding-top: 14px;
  display: grid;
  gap: 14px;
}

/* ------------------------------------------------------------------ */
/* §06 Client wall                                                     */
/* ------------------------------------------------------------------ */

.about-clients { padding-block: 64px; }
.client-wall {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
}
.client-wall__name {
  font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--fg);
}

/* ------------------------------------------------------------------ */
/* §07 Keep going CTA grid                                             */
/* ------------------------------------------------------------------ */

.about-keepgoing { padding-block: 72px; }
.cta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.cta-cell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px 24px;
  min-height: 160px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  color: var(--fg);
  text-decoration: none;
  transition: background 200ms ease;
}
.cta-cell:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--fg); }
.cta-cell__kicker { letter-spacing: 0.14em; }
.cta-cell__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 40px;
}
.cta-cell__label {
  font-size: 22px;
  letter-spacing: -0.01em;
}
.cta-cell__arrow {
  font-size: 18px;
  color: var(--muted);
  transition: color 200ms ease, transform 200ms ease;
}
.cta-cell:hover .cta-cell__arrow {
  color: var(--accent);
  transform: translateX(4px);
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 960px) {
  .about-hero { grid-template-columns: 1fr; min-height: 0; }
  .about-hero__copy {
    padding: 40px var(--gutter);
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .about-hero__portrait { aspect-ratio: 4 / 5; min-height: 0; }
  .discipline-grid { grid-template-columns: repeat(2, 1fr); }
  .trio-grid { grid-template-columns: 1fr; gap: 56px; }
  .cta-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .discipline-grid,
  .cta-grid { grid-template-columns: 1fr; }
}

/* ================================================================== */
/* Links — stream layout                                               */
/* ================================================================== */

main.links { display: block; }

.links-hero {
  border-bottom: 1px solid var(--rule);
  padding: 80px var(--gutter) 72px;
}
.links-hero__inner {
  max-width: var(--measure-stream);
  margin-inline: auto;
}
.links-hero__rail {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.links-hero__rail::before {
  content: "";
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--accent);
}
.links-hero__title {
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 300;
  margin: 0 0 28px;
}
.links-hero__lead {
  font-size: 21px;
  line-height: 1.55;
  font-weight: 300;
  color: var(--fg);
  max-width: 620px;
  margin: 0 0 36px;
}
.links-hero__meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 11px;
  letter-spacing: 0.12em;
}

.links-body {
  max-width: var(--measure-stream);
  margin: 0 auto;
  padding: 0 var(--gutter) 96px;
}

.link-section { padding: 56px 0 8px; }
.link-section__header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: baseline;
  margin-bottom: 32px;
}
.link-section__num {
  letter-spacing: 0.2em;
  font-size: 11px;
}
.link-section__title {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0;
}
.link-section__count {
  font-size: 10px;
  letter-spacing: 0.16em;
  white-space: nowrap;
}

.link-list {
  list-style: none;
  margin: 0; padding: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.link-list > li + li > .link-row,
.link-list > li + li.link-creator { border-top: 1px solid var(--rule); }

.link-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: baseline;
  padding: 22px 0;
  color: var(--fg);
  transition: padding 160ms ease, background 120ms ease;
}
.link-row:hover {
  padding-inline: 16px;
  background: var(--soft);
  color: var(--fg);
}
.link-row__main { min-width: 0; }
.link-row__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.link-row__label {
  font-size: 22px;
  letter-spacing: -0.005em;
  line-height: 1.2;
  transition: color 120ms ease;
}
.link-row:hover .link-row__label { color: var(--accent); }
.link-row__host {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: lowercase;
  font-family: var(--font-mono);
}
.link-row__note {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  font-weight: 300;
  max-width: 62ch;
}
.link-row__arrow {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--muted);
  align-self: center;
  transition: color 120ms ease, transform 160ms ease;
}
.link-row:hover .link-row__arrow {
  color: var(--accent);
  transform: translate(2px, -2px);
}

/* Creator with multiple sub-links */
.link-creator { padding: 22px 0; }
.link-creator__name {
  font-size: 22px;
  letter-spacing: -0.005em;
  margin-bottom: 10px;
}
.link-creator__list {
  list-style: none;
  margin: 0; padding: 0;
  border-top: 1px dotted var(--rule);
  margin-left: 20px;
}
.link-creator__list > li + li > .link-row { border-top: 1px dotted var(--rule); }
.link-row--nested { padding: 14px 0; }
.link-row--nested .link-row__label { font-size: 17px; }

.links-footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 80px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  font-size: 11px;
  letter-spacing: 0.14em;
}
.links-footer a { color: var(--accent); }
.links-footer a:hover { color: var(--fg); }

@media (max-width: 640px) {
  .link-section__header { grid-template-columns: 1fr; gap: 8px; }
  .link-row { padding-inline: 0; }
  .link-row:hover { padding-inline: 0; }
  .link-row__host { display: none; }
}

/* ================================================================== */
/* Legal documents (Privacy / Terms / Colophon) — sidebar TOC layout   */
/* ================================================================== */

main.legal { display: block; }

.legal__breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 1200px;
  margin: 40px auto 0;
  padding: 0 var(--gutter);
}
.legal__breadcrumb-mark { color: var(--accent); }
.legal__breadcrumb-mark::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 6px;
  vertical-align: middle;
}
.legal__breadcrumb-sep { color: var(--muted); }

.legal__hero {
  /* Explicit display:block to defeat legacy `header { display: flex }`
     in style.css, which would otherwise turn the meta + title + kicker
     into a 3-column row. */
  display: block;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px var(--gutter) 56px;
}
.legal__hero-meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  font-size: 11px;
  letter-spacing: 0.16em;
}
.legal__title {
  font-size: clamp(40px, 5.6vw, 84px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0;
  max-width: 18ch;
  color: var(--fg);
}
.legal__title em.accent-italic,
.legal__title .accent-italic {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}
.legal__kicker {
  margin: 24px 0 0;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.35;
  color: var(--muted);
  max-width: 48ch;
}

/* TL;DR card + sibling list ----------------------------------------- */

.legal__intro {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gutter) 72px;
}
.legal__intro-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: start;
}

.legal__tldr {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  background: var(--soft);
  padding: 28px 32px 32px;
}
.legal__tldr-label {
  color: var(--accent);
  margin-bottom: 10px;
  letter-spacing: 0.16em;
  font-size: 10px;
}
.legal__tldr-lead {
  font-size: 17px;
  line-height: 1.5;
  margin: 0 0 20px;
  color: var(--fg);
}
.legal__tldr-grid { margin: 0; }
.legal__tldr-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
}
.legal__tldr-row dt {
  color: var(--muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-size: 10px;
  margin: 0;
}
.legal__tldr-row dd {
  margin: 0;
  color: var(--fg);
  font-size: 14px;
  line-height: 1.45;
}

.legal__siblings-label {
  margin-bottom: 14px;
  letter-spacing: 0.16em;
  font-size: 10px;
}
.legal__siblings ul {
  list-style: none;
  margin: 0; padding: 0;
  border-top: 1px solid var(--rule);
}
.legal__sibling {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--fg);
  transition: background 160ms ease, padding 160ms ease;
}
.legal__sibling:hover {
  background: var(--soft);
  padding-inline: 12px;
  margin-inline: -12px;
  color: var(--fg);
}
.legal__sibling-title {
  font-size: 20px;
  letter-spacing: -0.015em;
}
.legal__sibling .meta { margin-top: 4px; font-size: 10px; letter-spacing: 0.14em; }
.legal__sibling-arrow {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--muted);
  transition: color 160ms ease, transform 160ms ease;
}
.legal__sibling:hover .legal__sibling-arrow {
  color: var(--accent);
  transform: translateX(4px);
}

/* Body — sidebar TOC + long-form ----------------------------------- */

.legal__body-wrap {
  border-top: 1px solid var(--rule);
  padding: 64px var(--gutter) 120px;
}
.legal__body-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 72px;
}

.legal__toc {
  position: sticky;
  top: 80px;
  align-self: start;
}
.legal__toc-label {
  margin-bottom: 16px;
  font-size: 10px;
  letter-spacing: 0.16em;
}
.legal__toc-list {
  list-style: none;
  margin: 0; padding: 0;
}
.legal__toc-list li { margin-bottom: 2px; }
.legal__toc-list a {
  display: block;
  padding: 8px 0 8px 14px;
  border-left: 2px solid transparent;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--muted);
  transition: color 160ms ease, border-color 160ms ease;
}
.legal__toc-list a:hover { color: var(--accent); }
.legal__toc-list a.is-active {
  color: var(--accent);
  border-left-color: var(--accent);
}
.legal__toc-num {
  opacity: 0.5;
  margin-right: 10px;
}

/* Prose */
.legal__prose {
  max-width: 68ch;
}
.legal-section {
  margin-bottom: 56px;
  scroll-margin-top: 80px;
}
.legal-section h2 {
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 22px;
  color: var(--fg);
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.legal-section h2::before {
  content: "§ " counter(legal-section, decimal-leading-zero);
  counter-increment: legal-section;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  flex-shrink: 0;
  font-weight: 400;
}
.legal__prose { counter-reset: legal-section; }
.legal-section h3 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -0.01em;
  margin: 1.8em 0 0.6em;
  color: var(--fg);
}
.legal-section p {
  font-size: 17px;
  line-height: 1.7;
  margin: 0 0 1.1em;
  color: var(--fg);
  max-width: 68ch;
}
.legal-section a {
  color: inherit;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  padding-bottom: 1px;
  transition: color 160ms ease, border-color 160ms ease;
}
.legal-section a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.legal-section ul {
  padding-left: 0;
  list-style: none;
  margin: 1em 0 1.4em;
}
.legal-section ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 0.7em;
  font-size: 17px;
  line-height: 1.55;
}
.legal-section ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-family: var(--font-mono);
}
.legal-section code {
  font-family: var(--font-mono);
  font-size: 14px;
  background: var(--soft);
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid var(--rule);
}

.legal__end {
  margin-top: 80px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 11px;
  letter-spacing: 0.16em;
}

/* Responsive */
@media (max-width: 960px) {
  .legal__intro-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .legal__tldr-row { grid-template-columns: 110px 1fr; gap: 12px; }
}
/* Sidebar TOC + prose collapses only on actually-narrow viewports
   (most laptops are 1200+ effective width and benefit from the
   sidebar). */
@media (max-width: 720px) {
  .legal__body-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .legal__toc {
    position: static;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 20px;
  }
}

/* ================================================================== */
/* Journal — index (cards layout)                                      */
/* ================================================================== */

main.journal { display: block; }

/* ------------------------------------------------------------------ */
/* Journal masthead                                                    */
/* ------------------------------------------------------------------ */

.journal-mast {
  border-bottom: 1px solid var(--rule);
  padding: 80px var(--gutter) 56px;
  max-width: 1400px;
  margin-inline: auto;
}
.journal-mast__kicker {
  font-size: 11px;
  letter-spacing: 0.2em;
  margin-bottom: 20px;
}
.journal-mast__kicker-mark {
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.journal-mast__kicker-mark::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.journal-mast__kicker-sep { color: var(--muted); margin: 0 4px; }

.journal-mast__title {
  font-size: clamp(48px, 7vw, 104px);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 0.95;
  margin: 0;
  max-width: 18ch;
}
.journal-mast__lede {
  margin: 28px 0 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 58ch;
  font-weight: 300;
}

/* Archive variant (tag, author) — slightly smaller title. */
.journal-mast__title--archive { font-size: clamp(40px, 5vw, 80px); }

/* ------------------------------------------------------------------ */
/* Cards grid                                                          */
/* ------------------------------------------------------------------ */

.journal-cards {
  max-width: 1400px;
  margin-inline: auto;
  padding: 56px var(--gutter) 96px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 48px 32px;
}

.post-card-jrnl {
  display: block;
  text-decoration: none;
  color: var(--fg);
}
.post-card-jrnl:hover { color: var(--fg); }

.post-card-jrnl__frame {
  margin: 0 0 16px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #111;
}
.post-card-jrnl__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}
.post-card-jrnl:hover .post-card-jrnl__frame img { transform: scale(1.03); }

.post-card-jrnl__meta {
  display: block;
  font-size: 10px;
  letter-spacing: 0.18em;
  margin-bottom: 8px;
}
.post-card-jrnl__tag { color: var(--accent); }

.post-card-jrnl__title {
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}
.post-card-jrnl__blurb {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  font-weight: 300;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Pagination                                                          */
/* ------------------------------------------------------------------ */

.journal-pagination {
  border-top: 1px solid var(--rule);
  padding: 32px var(--gutter);
}
.journal-pagination__inner {
  max-width: 1400px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
}
.journal-pagination__counter { text-align: center; font-size: 11px; }
.journal-pagination__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
}
.journal-pagination__link:hover { color: var(--accent); }
.journal-pagination__link--prev { justify-self: start; }
.journal-pagination__link--next { justify-self: end; }
.journal-pagination__arrow { font-size: 14px; color: var(--accent); }

/* ------------------------------------------------------------------ */
/* Subscribe / dispatch CTA (shared with post)                         */
/* ------------------------------------------------------------------ */

.journal-cta {
  border-top: 1px solid var(--rule);
  padding: 80px var(--gutter);
}
.journal-cta__inner {
  max-width: var(--measure-stream);
  margin-inline: auto;
  text-align: center;
}
.journal-cta__kicker {
  letter-spacing: 0.2em;
  font-size: 11px;
  margin-bottom: 18px;
}
.journal-cta__title {
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
}
.journal-cta__lede {
  margin: 18px auto 28px;
  max-width: 48ch;
  color: var(--muted);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.55;
}

/* ================================================================== */
/* Journal post — wide measure, drop cap, progress bar                 */
/* ================================================================== */

main.post { display: block; }

/* Reading progress bar — pinned to the top of the viewport. */
.post-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 0;
  transition: transform 80ms linear;
  z-index: 100;
  pointer-events: none;
}

.post__breadcrumb {
  max-width: 1200px;
  margin: 40px auto 0;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.16em;
}
.post__breadcrumb-back {
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
}
.post__breadcrumb-back:hover { color: var(--accent); border-bottom-color: var(--accent); }
.post__breadcrumb-sep { color: var(--muted); }
.post__breadcrumb-tag { color: var(--accent); }

.post__head {
  /* Explicit display:block to defeat legacy `header { display: flex }`
     in style.css (same trick as .legal__hero). Without this, the title
     and the meta-grid sit side-by-side instead of stacking. */
  display: block;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px var(--gutter) 60px;
}
.post__title {
  font-size: clamp(36px, 5vw, 76px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0;
  max-width: 22ch;
}

.post__meta-grid {
  margin: 36px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.post__meta-grid > div { display: flex; flex-direction: column; gap: 8px; }
.post__meta-grid dt { color: var(--muted); margin: 0; opacity: 0.85; font-size: 10px; }
.post__meta-grid dd { color: var(--fg); margin: 0; }
.post__meta-grid dd a { color: var(--fg); }
.post__meta-grid dd a:hover { color: var(--accent); }

.post__hero {
  max-width: 1600px;
  margin: 0 auto 60px;
  padding: 0 var(--gutter);
}
.post__hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: #111;
}
.post__hero-caption {
  margin-top: 12px;
  text-align: right;
  font-size: 11px;
  letter-spacing: 0.14em;
}

.post__body-wrap {
  /* No max-width here — body breakouts (kg-width-wide/full) need to be
     positioned relative to the viewport, which works most cleanly when
     this wrapper spans the full width and only the prose inside is
     centered + capped. */
  margin: 0;
  padding: 0;
}
.post__body {
  /* Wide measure — generous reading width that mirrors the H1's column.
     Centered so empty space distributes evenly on both sides; image
     breakouts below extend symmetrically from this center line. */
  max-width: 920px;
  margin: 0 auto;
  padding: 0 var(--gutter) 80px;
}

/* Generic prose styles — apply to Ghost-rendered post content. */
.post-prose p {
  font-size: 18px;
  line-height: 1.7;
  margin: 0 0 1.1em;
  color: var(--fg);
}
.post-prose h2 {
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 2em 0 0.6em;
}
.post-prose h3 {
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 1.6em 0 0.5em;
}
.post-prose a {
  color: inherit;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  padding-bottom: 1px;
  transition: color 160ms ease, border-color 160ms ease;
}
.post-prose a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.post-prose blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--accent);
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.4;
  font-style: italic;
  letter-spacing: -0.005em;
  color: var(--fg);
}
.post-prose ul, .post-prose ol {
  padding-left: 0;
  margin: 1em 0 1.4em;
}
.post-prose ul { list-style: none; }
.post-prose ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 0.7em;
  font-size: 18px;
  line-height: 1.55;
}
.post-prose ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-family: var(--font-mono);
}
.post-prose ol { padding-left: 1.5em; }
.post-prose ol li { font-size: 18px; line-height: 1.55; margin-bottom: 0.6em; }

.post-prose figure {
  margin: 2em 0;
}
/* Scope the 100%-width img rule to image-style figures only — bookmark
   cards have their own tiny favicon + fixed thumbnail that Ghost's
   cards.min.css sizes correctly, but my rule was clobbering them. */
.post-prose figure:not(.kg-bookmark-card) img,
.post-prose .kg-image-card img,
.post-prose .kg-gallery-image img {
  width: 100%;
  height: auto;
  display: block;
}
/* Image / gallery captions — mono uppercase. Scoped to image-style
   figures so bookmark cards (which also use <figure>) opt out below. */
.post-prose figure:not(.kg-bookmark-card) figcaption,
.post-prose img + figcaption,
.post-prose .kg-image-card figcaption,
.post-prose .kg-gallery-card figcaption {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

/* ------------------------------------------------------------------ */
/* Ghost image breakouts (regular / wide / full)                       */
/* ------------------------------------------------------------------ */
/* The body is a 920-max centered column. Wide and full image cards
   break out of that column using `left: 50%; transform: translateX(-50%)`
   so they re-center on the viewport, not the body. */

.post-prose .kg-card { margin: 2em 0; }

.post-prose .kg-width-wide,
.post-prose .kg-width-full {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  max-width: none;
}

.post-prose .kg-width-wide {
  /* Up to 1280px wide, gutter-padded so it never touches the viewport
     edge on smaller screens. */
  width: min(1280px, calc(100vw - 2 * var(--gutter)));
}

.post-prose .kg-width-full {
  /* Edge-to-edge — the image hits the viewport edges with no gutter. */
  width: 100vw;
}
.post-prose .kg-width-full img {
  width: 100%;
  display: block;
}

.post-prose code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--soft);
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid var(--rule);
}
.post-prose pre {
  margin: 1.4em 0;
  padding: 18px 20px;
  background: var(--soft);
  border-left: 3px solid var(--accent);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.55;
}
.post-prose pre code {
  background: transparent;
  border: 0;
  padding: 0;
}
.post-prose hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 3em 0;
}

/* Ghost gallery card. */
.post-prose .kg-gallery-container {
  margin: 2em 0;
}

/* Bookmark card itself: NOT styled here — Ghost ships its own
   cards.min.css (loaded via {{ghost_head}}) that handles the layout
   plus light/dark via prefers-color-scheme. Trade-off: the card
   follows OS theme, not our manual T toggle. Worth it to avoid
   maintaining duplicate card styles.

   But the bookmark *caption* needs a small override — Ghost wraps it
   in a <p> which would otherwise inherit my paragraph styling and
   render as 18px body copy. */
.post-prose .kg-bookmark-card figcaption,
.post-prose .kg-bookmark-card + figcaption {
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 100;
  font-size: 12.8px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--muted);
  margin: 12px 0 0;
}
.post-prose .kg-bookmark-card figcaption p {
  margin: 0;
  font-size: inherit;
  line-height: 1.5;
  font-weight: inherit;
  color: inherit;
}

.post__signoff {
  margin-top: 60px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  letter-spacing: 0.16em;
}

/* ------------------------------------------------------------------ */
/* Share row                                                           */
/* ------------------------------------------------------------------ */

.post__share {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gutter) 80px;
}
.post__share-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.post__share-label { font-size: 10px; letter-spacing: 0.18em; }
.post__share-links { display: flex; gap: 14px; flex-wrap: wrap; }
.post__share-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  border: 0;
  background: none;
  border-bottom: 1px solid var(--rule);
  padding: 0 0 2px;
  cursor: pointer;
  text-decoration: none;
}
.post__share-btn:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ------------------------------------------------------------------ */
/* Related posts                                                       */
/* ------------------------------------------------------------------ */

.post__related {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px var(--gutter) 80px;
}
.post__related-label {
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 0.22em;
  margin-bottom: 28px;
}
.post__related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}
.post__related-item {
  display: block;
  text-decoration: none;
  color: var(--fg);
}
.post__related-frame {
  margin: 0 0 14px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #111;
}
.post__related-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}
.post__related-item:hover .post__related-frame img { transform: scale(1.03); }
.post__related-meta { color: var(--accent); font-size: 10px; letter-spacing: 0.18em; margin-bottom: 6px; }
.post__related-title {
  font-size: 20px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* ------------------------------------------------------------------ */
/* Prev / next                                                         */
/* ------------------------------------------------------------------ */

.post__prevnext {
  border-top: 1px solid var(--rule);
}
.post__prevnext-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.post__prevnext-cell {
  display: block;
  padding: 40px var(--gutter) 50px;
  text-decoration: none;
  color: var(--fg);
  transition: background 160ms ease;
}
.post__prevnext-cell:hover { background: var(--soft); color: var(--fg); }
.post__prevnext-cell--next {
  border-left: 1px solid var(--rule);
  text-align: right;
}
.post__prevnext-label {
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 0.22em;
  margin-bottom: 14px;
}
.post__prevnext-title {
  font-size: 24px;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.post__prevnext-meta {
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: 0.18em;
}

/* Comments section — give Ghost's iframe some breathing room. */
.post__comments {
  max-width: 720px;
  margin: 0 auto;
  padding: 60px var(--gutter);
}

/* ------------------------------------------------------------------ */
/* Error 404 page (Ghost blog 404)                                     */
/* ------------------------------------------------------------------ */

main.error-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 80px var(--gutter);
}
.error-page__inner {
  max-width: 640px;
  text-align: center;
}
.error-page__num {
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 0.22em;
  margin-bottom: 24px;
}
.error-page__title {
  font-size: clamp(40px, 6vw, 88px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0;
}
.error-page__lede {
  margin: 24px 0 36px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}
.error-page__nav {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: 28px;
  justify-content: center;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.error-page__nav a { color: var(--fg); }
.error-page__nav a:hover { color: var(--accent); }

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 720px) {
  .journal-cards { grid-template-columns: 1fr; gap: 40px; }
  .post__meta-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .post__hero img { aspect-ratio: 4 / 3; }
  .post__prevnext-inner { grid-template-columns: 1fr; }
  .post__prevnext-cell--next {
    border-left: 0;
    border-top: 1px solid var(--rule);
    text-align: left;
  }
  .journal-pagination__inner { grid-template-columns: 1fr; gap: 8px; text-align: center; }
  .journal-pagination__link--prev,
  .journal-pagination__link--next { justify-self: center; }
}

/* ================================================================== */
/* Search results page                                                 */
/* ================================================================== */

main.search { display: block; }

.search__head {
  border-bottom: 1px solid var(--rule);
  padding: 56px var(--gutter) 36px;
}
.search__head-inner {
  max-width: 1200px;
  margin-inline: auto;
}

.search__kicker {
  display: flex;
  gap: 14px;
  align-items: baseline;
  margin-bottom: 24px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.search__kicker-mark {
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.search__kicker-mark::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.search__kicker-q { color: var(--fg); }
.search__kicker-count { margin-left: auto; }

.search__form {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--fg);
}
.search__form-slash {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 36px;
  line-height: 1;
}
.search__form-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  font-family: var(--font-sans);
  font-size: clamp(28px, 3.6vw, 48px);
  letter-spacing: -0.02em;
  color: var(--fg);
  padding: 8px 0;
}
.search__form-input::placeholder { color: var(--muted); opacity: 0.6; }
.search__form-input::-webkit-search-cancel-button,
.search__form-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.search__form-clear {
  padding: 6px 12px;
  border: 1px solid var(--rule);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.search__form-clear:hover { color: var(--fg); border-color: var(--fg); }

/* ------------------------------------------------------------------ */
/* Body & groups                                                       */
/* ------------------------------------------------------------------ */

.search__body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px var(--gutter) 96px;
}

.search__group { margin-bottom: 56px; }
.search__group:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ */
/* Result row                                                          */
/* ------------------------------------------------------------------ */

.search-rows {
  list-style: none;
  margin: 0; padding: 0;
  border-top: 1px solid var(--rule);
}

.search-row {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 20px 8px;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--fg);
  transition: background 160ms ease;
}
.search-row:hover {
  background: var(--soft);
  color: var(--fg);
}
.search-row:hover .search-row__arrow {
  color: var(--accent);
  transform: translateX(4px);
}

.search-row__thumb {
  width: 88px;
  aspect-ratio: 4 / 3;
  background: var(--soft);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
}
.search-row__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.search-row__badge {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--muted);
}

.search-row__main {
  min-width: 0;
}
.search-row__head {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 4px;
}
.search-row__type {
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 0.16em;
}
.search-row__sub {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.14em;
}
.search-row__title {
  font-family: var(--font-sans);
  font-size: 20px;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg);
}
.search-row__snippet {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.45;
  font-weight: 300;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 70ch;
}

.search-row__arrow {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--muted);
  align-self: center;
  transition: color 160ms ease, transform 160ms ease;
}

/* Photos pagination (within the Photos group) */
.search-pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  padding: 24px 0;
}
.search-pager__counter { text-align: center; font-size: 11px; }
.search-pager__link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
}
.search-pager__link:hover { color: var(--accent); }
.search-pager__link:first-of-type { justify-self: start; }
.search-pager__link:last-of-type  { justify-self: end; }

/* ------------------------------------------------------------------ */
/* Empty / zero states                                                 */
/* ------------------------------------------------------------------ */

.search__empty {
  max-width: 720px;
  margin: 40px auto;
  text-align: center;
}
.search__empty-kicker {
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 0.22em;
  margin-bottom: 18px;
}
.search__empty-title {
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}
.search__empty-lede {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
  font-weight: 300;
}
.search__empty-lede a {
  color: var(--accent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 640px) {
  .search-row { grid-template-columns: 56px 1fr auto; gap: 14px; }
  .search-row__thumb { width: 56px; }
  .search-row__title { font-size: 17px; }
  .search-row__snippet { display: none; }
  .search__kicker { flex-wrap: wrap; }
  .search__kicker-count { margin-left: 0; flex-basis: 100%; }
}

/* ------------------------------------------------------------------ */
/* Atlas / map page — let the map fill the viewport                    */
/* ------------------------------------------------------------------ */
/* The legacy body.map-body uses flex-column to lock the map area to
   the remaining viewport height between header + footer. After the
   layout refactor wraps page content in <div id="main">, that wrapper
   now sits between #map-page and the body flex context, so the map
   can't grow. Forward the flex behavior through #main. */

body.map-body #main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
body.map-body #main > main { flex: 1; min-height: 0; }

/* Mapbox custom controls (reset-view button) use an inline <svg> child
   instead of the background-image trick Mapbox's defaults rely on, so
   we have to center the icon explicitly. */
.mapboxgl-ctrl.mapboxgl-ctrl-group button > svg {
  display: block;
  margin: auto;
}
.mapboxgl-ctrl.mapboxgl-ctrl-group button:has(> svg) {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ================================================================== */
/* Contact page                                                        */
/* ================================================================== */

main.contact { display: block; }

.contact__rail {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px var(--gutter) 0;
  display: flex;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.contact__rail-mark { color: var(--accent); }

.contact__head {
  display: block;          /* override legacy bare-element `header { display: flex }` */
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px var(--gutter) 56px;
}
.contact__headline {
  font-family: var(--font-sans);
  font-weight: 400;
  margin: 0;
  font-size: clamp(44px, 6.2vw, 96px);
  letter-spacing: -0.03em;
  line-height: 1.0;
  max-width: 18ch;
}
.contact__lede {
  margin: 28px 0 0;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.35;
  color: var(--muted);
  max-width: 40ch;
  font-weight: 300;
}

.contact__section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px var(--gutter) 72px;
}
.contact__section--soft {
  max-width: none;
  border-top: 1px solid var(--rule);
  background: var(--soft);
  padding: 56px var(--gutter) 80px;
}
.contact__section--soft > .section-label,
.contact__section--soft > .channels { max-width: 1200px; margin-inline: auto; }
.contact__section--ctas { padding-top: 0; padding-bottom: 100px; }

/* ------------------------------------------------------------------ */
/* Letter-style form                                                   */
/* ------------------------------------------------------------------ */

/* Span the section's content width (matches the §01 section-label end caps). */
.contact__form-wrap { max-width: none; }

.contact__error {
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--fg);
  padding: 14px 18px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}

.letter {
  position: relative;
  padding: 48px 48px 40px;
  background: #fffef8;       /* warm cream "letterhead" — default (light) */
  border: 1px solid var(--rule);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.12);
  font-family: var(--font-sans);
  color: #1a1715;            /* dark ink, regardless of page theme */
}
[data-theme="dark"] .letter {
  background: #161513;       /* deep ink "letterhead" — paper inverted */
  box-shadow: none;
  color: var(--fg);
}

.letter__honey {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.letter__date {
  text-align: right;
  margin-bottom: 36px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.letter__city {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  width: 14ch;
  text-align: left;
}
.letter__greeting { font-size: 22px; letter-spacing: -0.01em; margin-bottom: 22px; }

.letter__body {
  width: 100%;
  resize: vertical;
  background: transparent;
  border: 0;
  outline: none;
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.65;
  color: var(--fg);
  padding: 0;
  min-height: 200px;
}
.letter__body::placeholder { color: var(--muted); opacity: 0.7; }

.letter__signoff {
  margin-top: 28px;
  font-size: 18px;
  line-height: 1.55;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}
.letter__name { font-size: 18px; width: 16ch; }

.letter__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 28px;
  gap: 24px;
  flex-wrap: wrap;
}
.letter__email-wrap { flex: 1; min-width: 0; }
.letter__email { font-size: 15px; min-width: 22ch; width: 100%; max-width: 32ch; }

/* Shared underline-style input used by .letter__city/name/email */
.letter input[type="text"],
.letter input[type="email"] {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  outline: none;
  padding: 6px 2px;
  font-family: var(--font-sans);
  color: var(--fg);
  transition: border-color 160ms ease;
}
.letter input[type="text"]:focus,
.letter input[type="email"]:focus { border-bottom-color: var(--accent); }
.letter input[aria-invalid="true"] { border-bottom-color: var(--accent); }

.letter__field-err {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.letter__note {
  margin: 20px 0 0;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--muted);
}

/* Shared "send" button (used by letter form + newsletter) */
.send-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 26px;
  background: var(--fg);
  color: var(--bg);
  border: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background 160ms ease, color 160ms ease;
}
.send-btn:hover { background: var(--accent); color: #fff; }

/* ------------------------------------------------------------------ */
/* Success state                                                       */
/* ------------------------------------------------------------------ */

.contact__thanks {
  max-width: 560px;
  padding: 48px 0;
}
.contact__thanks-kicker {
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 0.22em;
  margin-bottom: 16px;
}
.contact__thanks-title {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  max-width: 22ch;
  margin-bottom: 16px;
}
.contact__thanks-lede {
  margin: 0;
  font-size: 16px;
  color: var(--muted);
  line-height: 1.55;
  font-weight: 300;
}
.contact__thanks-lede a {
  color: var(--accent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}

/* ------------------------------------------------------------------ */
/* §02 Channels                                                        */
/* ------------------------------------------------------------------ */

.channels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.channel {
  display: block;
  padding: 28px;
  border-top: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  text-decoration: none;
  color: var(--fg);
  transition: background 160ms ease;
}
.channel:first-child { padding-left: 0; }
.channel:last-child  { border-right: 0; padding-right: 0; }
.channel:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.channel__num {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-bottom: 10px;
}
.channel__label {
  font-family: var(--font-sans);
  font-size: 28px;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.channel__email {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--accent);
  letter-spacing: 0.01em;
}
.channel__hint {
  font-size: 14px;
  color: var(--muted);
  margin-top: 8px;
  max-width: 34ch;
  font-weight: 300;
}

/* ------------------------------------------------------------------ */
/* §03 Studio                                                          */
/* ------------------------------------------------------------------ */

.studio {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  align-items: start;
}
.studio__lead {
  font-family: var(--font-sans);
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.45;
  margin: 0;
  max-width: 44ch;
}
.studio__sub {
  margin: 24px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 50ch;
  font-weight: 300;
}
.studio__kv { margin: 0; font-family: var(--font-mono); font-size: 13px; }
.studio__kv-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 20px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
}
.studio__kv-row:last-child { border-bottom: 1px solid var(--rule); }
.studio__kv-row dt {
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 10px;
}
.studio__kv-row dd { margin: 0; color: var(--fg); }

/* ------------------------------------------------------------------ */
/* §04 CTAs                                                            */
/* ------------------------------------------------------------------ */

.contact-ctas {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
}
.contact-cta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 32px 28px;
  min-height: 180px;
  text-decoration: none;
  color: var(--fg);
  border-right: 1px solid var(--rule);
  transition: background 160ms ease;
}
.contact-cta:first-child { padding-left: 0; }
.contact-cta:last-child  { border-right: 0; padding-right: 0; }
.contact-cta:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.contact-cta__num { font-size: 10px; letter-spacing: 0.16em; color: var(--muted); }
.contact-cta__label {
  font-family: var(--font-sans);
  font-size: 22px;
  letter-spacing: -0.015em;
}
.contact-cta__meta {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

/* 2-column wrap: §02 channels + §04 CTAs both collapse from 4 → 2 columns.
   Recompute first/last padding + the missing horizontal divider per row. */
@media (max-width: 980px) {
  .channels,
  .contact-ctas { grid-template-columns: 1fr 1fr; }

  .channel,
  .contact-cta { padding-left: 28px; padding-right: 28px; border-right: 1px solid var(--rule); }
  .channel:nth-child(odd),
  .contact-cta:nth-child(odd) { padding-left: 0; }
  .channel:nth-child(even),
  .contact-cta:nth-child(even) { border-right: 0; padding-right: 0; }
  /* Horizontal rule between rows */
  .channel:nth-child(n+3),
  .contact-cta:nth-child(n+3) { border-top: 1px solid var(--rule); }
}

@media (max-width: 720px) {
  .letter { padding: 32px 24px 28px; }
  .studio { grid-template-columns: 1fr; gap: 32px; }
  .channels,
  .contact-ctas { grid-template-columns: 1fr; }
  .channel,
  .contact-cta {
    border-right: 0;
    padding-left: 0;
    padding-right: 0;
    border-top: 1px solid var(--rule);
  }
  .contact-cta { min-height: 0; gap: 16px; }
}

/* ------------------------------------------------------------------ */
/* Legacy compatibility shims                                          */
/* ------------------------------------------------------------------ */

/* The legacy style.css still loads and paints the unported pages.
   These shims keep legacy-styled elements from visually clashing with
   the new tokens while the port proceeds. Delete when style.css is removed. */

body.rebuild-bridge #privacy-notice,
body.rebuild-bridge footer { background: var(--bg); }