/* ============================================================
   Matrix Digital Systems — v2
   Editorial dark theme (default) with light theme option.
   Serif display + clean sans. Brass accent.
   ============================================================ */

/* -----------------------------------------------------------
   0. Accessibility — skip link + main landmark
   The skip link is the first focusable element on every page.
   Visually hidden until focused, then reveals as a brass pill
   anchored to the top-left of the viewport.
----------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  z-index: 10000;
  padding: 10px 16px;
  background: #c79956;  /* brass token — readable on both themes */
  color: #1a1712;
  font: 600 14px/1 "Inter", system-ui, -apple-system, sans-serif;
  text-decoration: none;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  transition: top .15s ease-out;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 8px;
  outline: 2px solid #1a1712;
  outline-offset: 2px;
}

/* Main landmark target — remove the focus ring that browsers paint when
   the skip link sends focus here. The visible focus stays on whichever
   interactive element gets focused next via the keyboard. */
#main-content:focus { outline: none; }
#main-content:focus-visible { outline: none; }


/* -----------------------------------------------------------
   1. Tokens — Light theme (default)
   Light is the default so pages always render in light mode
   even if localStorage is unavailable (e.g. in partitioned iframes).
   Dark is an opt-in override via [data-theme="dark"].
----------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Surfaces — warm ivory */
  --ink:        #f5efe3;   /* page background */
  --ink-2:      #ece4d3;   /* card / band */
  --ink-3:      #e2d8c3;   /* hover menu */
  --ink-4:      #d7ccb4;   /* pressed tile */
  --line:       #d0c4ac;
  --line-2:     #b9ac92;

  /* Deep ink text — WCAG 2.1 AA tuned for cream backgrounds */
  --paper:      #1a1712;   /* primary text       — 15.6:1 on --ink */
  --paper-2:    #2e2920;   /* secondary text     — 12.6:1 on --ink */
  --paper-mute: #5f5645;   /* muted body         —  6.0:1 on --ink,  5.4:1 on --ink-2 */
  --paper-dim:  #695f4c;   /* eyebrows / captions—  5.5:1 on --ink,  5.0:1 on --ink-2 */

  /* Accent — darkened brass for AA contrast on cream */
  --brass:      #7e6428;   /* accent text + borders — 4.9:1 on --ink */
  --brass-hi:   #c9a96a;   /* highlight / decorative only — do NOT use as text on light */
  --brass-lo:   #6f5628;   /* deeper brass — 6.0:1 on --ink */

  /* Semantic aliases */
  --surface:      var(--ink);
  --surface-2:    var(--ink-2);
  --surface-3:    var(--ink-3);
  --surface-4:    var(--ink-4);
  --border:       var(--line);
  --border-2:     var(--line-2);
  --text:         var(--paper);
  --text-2:       var(--paper-2);
  --text-mute:    var(--paper-mute);
  --text-dim:     var(--paper-dim);

  /* RGB channels for overlays, light-mode values */
  --overlay-rgb:  245, 239, 227;
  --tile-rgb:     236, 228, 211;
  --glass-rgb:    26, 23, 18;
  --shadow-rgb:   90, 70, 40;
  --shadow-strength: 0.12;

  /* Softer veils so hero photography isn't washed out on cream. */
  --hero-veil-top: 0.15;
  --hero-veil-bot: 0.55;
  --hero-veil-side: 0.25;
  --card-veil-bot: 0.6;
  --page-hero-dim: 0.7;
  --page-hero-top: 0.2;
  --page-hero-bot: 0.65;
}

/* -----------------------------------------------------------
   1b. Dark theme override
----------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Warm near-black surfaces */
  --ink:        #0d0c0b;
  --ink-2:      #14120f;
  --ink-3:      #1b1815;
  --ink-4:      #231f1a;
  --line:       #2b2722;
  --line-2:     #3a342d;

  /* Ivory text — WCAG 2.1 AA tuned for near-black surfaces */
  --paper:      #f3eee5;   /* primary text — 16.9:1 on --ink */
  --paper-2:    #e8e1d4;   /* secondary    — 15.0:1 on --ink */
  --paper-mute: #a69f93;   /* muted body   —  7.5:1 on --ink */
  --paper-dim:  #827c70;   /* eyebrows     —  4.7:1 on --ink, 4.5:1 on --ink-2 */

  /* Brass values on dark — tuned so --brass-lo also passes AA on --ink/--ink-2 (5.87:1 / 5.62:1) */
  --brass:      #c9a96a;
  --brass-hi:   #e8cf9c;
  --brass-lo:   #a18a5d;

  /* Dark overlays */
  --overlay-rgb:  13, 12, 11;
  --tile-rgb:     20, 18, 15;
  --glass-rgb:    243, 238, 229;
  --shadow-rgb:   0, 0, 0;
  --shadow-strength: 0.4;

  /* Stronger veils to darken photography. */
  --hero-veil-top: 0.3;
  --hero-veil-bot: 0.85;
  --hero-veil-side: 0.55;
  --card-veil-bot: 0.9;
  --page-hero-dim: 0.45;
  --page-hero-top: 0.5;
  --page-hero-bot: 0.95;
}

/* Smooth the theme transition (but not for images/media). */
html { transition: background-color 260ms var(--ease, ease); }
body { transition: background-color 260ms var(--ease, ease), color 260ms var(--ease, ease); }

:root {

  /* Type */
  --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Fluid type */
  --fs-xs:    clamp(0.72rem, 0.68rem + 0.15vw, 0.78rem);
  --fs-sm:    clamp(0.82rem, 0.78rem + 0.2vw, 0.9rem);
  --fs-base:  clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  --fs-lg:    clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --fs-xl:    clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
  --fs-2xl:   clamp(2rem, 1.2rem + 3vw, 3.2rem);
  --fs-3xl:   clamp(2.8rem, 1rem + 6vw, 5rem);
  --fs-hero:  clamp(3.6rem, 0.5rem + 9vw, 8rem);

  /* Spacing (4px) */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 2.5rem;  --sp-8: 3rem;
  --sp-10: 4rem;   --sp-12: 5rem;   --sp-16: 7rem;   --sp-20: 9rem;
  --sp-24: 11rem;

  /* Layout */
  --max-w:      1320px;
  --gutter:     clamp(1.25rem, 4vw, 3rem);
  --radius:     4px;
  --radius-lg:  10px;

  /* Motion */
  --ease:       cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur:        420ms;
  --dur-fast:   220ms;
}

/* -----------------------------------------------------------
   2. Base
----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--paper);
  background: var(--ink);
  min-height: 100dvh;
  overflow-x: hidden;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); letter-spacing: -0.01em; }
h4 { font-size: var(--fs-lg); letter-spacing: -0.005em; }

p { max-width: 62ch; text-wrap: pretty; color: var(--paper-2); }

::selection { background: var(--brass); color: var(--ink); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Stop hero zoom and reveal fade-up content immediately for users who opt out of motion. */
  .hero__bg,
  picture.hero__bg > img { animation: none !important; transform: none !important; }
  .fade-up { opacity: 1 !important; transform: none !important; }
}

/* -----------------------------------------------------------
   3. Layout helpers
----------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 880px; }

.section {
  padding-block: clamp(var(--sp-10), 9vw, var(--sp-20));
}
.section--tight { padding-block: clamp(var(--sp-8), 6vw, var(--sp-12)); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* --brass-lo (6.0:1 on --ink, 5.4:1 on --ink-2) clears WCAG AA on both surface tones */
  color: var(--brass-lo);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--brass-lo);
}
.eyebrow--plain::before { display: none; }

.lead {
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--paper-2);
  max-width: 58ch;
}

.rule {
  height: 1px; width: 100%;
  background: var(--line);
  border: 0;
  margin: 0;
}

/* -----------------------------------------------------------
   4. Buttons
----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.4rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn__arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--primary {
  background: var(--paper);
  color: var(--ink);
}
.btn--primary:hover {
  background: var(--brass-hi);
}

.btn--ghost {
  background: transparent;
  color: var(--paper);
  border-color: var(--line-2);
}
.btn--ghost:hover {
  border-color: var(--brass);
  color: var(--brass-hi);
}

.btn--link {
  padding: 0;
  color: var(--brass);
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.btn--link:hover { color: var(--brass-hi); }

/* -----------------------------------------------------------
   5. Header
----------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1rem 0;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), padding var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: oklch(from var(--ink) l c h / 0.82);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: var(--line);
  padding: 0.65rem 0;
}
.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.95rem;
  color: var(--paper);
  text-decoration: none;
}
.brand__logo {
  height: 56px;
  width: auto;
  display: block;
  transition: height var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.site-header.is-scrolled .brand__logo { height: 44px; }
.brand--footer .brand__logo { height: 46px; }
@media (max-width: 700px) {
  .brand__logo { height: 42px; }
  .site-header.is-scrolled .brand__logo { height: 34px; }
}
.brand:hover .brand__logo { opacity: 0.85; }
.brand__sub {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-mute);
  margin-top: 3px;
  display: block;
  line-height: 1;
}
.brand__sub--inline {
  padding-left: 0.95rem;
  border-left: 1px solid var(--line);
  margin-top: 0;
  line-height: 1.2;
  align-self: center;
}
@media (max-width: 900px) {
  .brand__sub--inline:not(.brand--footer .brand__sub--inline) { display: none; }
  .site-header .brand__sub--inline { display: none; }
}
.brand--footer {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
}
.brand--footer .brand__sub--inline {
  display: block;
  padding-left: 0;
  border-left: none;
  margin-top: 0;
  white-space: nowrap;
}
.brand__mark {
  display: flex;
  flex-direction: column;
  line-height: 0.95;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}
.nav a {
  font-size: var(--fs-sm);
  color: var(--paper-2);
  position: relative;
  padding: 0.4rem 0;
  transition: color var(--dur-fast) var(--ease);
}
.nav a:hover { color: var(--paper); }
.nav a.is-active { color: var(--brass); }

.nav-item { position: relative; }
.nav-item__trigger { cursor: pointer; }
.nav-item__trigger::after {
  content: "⌄";
  margin-left: 0.25em;
  font-size: 0.8em;
  opacity: 0.6;
  display: inline-block;
  transform: translateY(-2px);
}
.nav-item__menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: -1rem;
  min-width: 280px;
  padding: 0.6rem;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              visibility var(--dur-fast) var(--ease);
  box-shadow: 0 24px 48px rgba(var(--shadow-rgb), var(--shadow-strength));
}
.nav-item:hover .nav-item__menu,
.nav-item:focus-within .nav-item__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-item__menu a {
  display: block;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  color: var(--paper-2);
}
.nav-item__menu a:hover {
  background: var(--ink-4);
  color: var(--brass-hi);
}

.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
}
.menu-toggle:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

@media (max-width: 960px) {
  .nav, .nav-cta { display: none; }
  .menu-toggle { display: inline-flex; }
  .nav.is-open {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    top: var(--mobile-header-h, 68px);
    bottom: 0;
    height: auto;
    max-height: calc(100dvh - var(--mobile-header-h, 68px));
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--sp-4) var(--gutter) calc(var(--sp-8) + env(safe-area-inset-bottom));
    background: var(--ink);
    border-top: 1px solid var(--line);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .nav.is-open a { font-size: var(--fs-lg); padding: 0.75rem 0; border-bottom: 1px solid var(--line); width: 100%; }
  .nav.is-open .nav-item { width: 100%; }
  /* Collapse the Experiences sub-menu behind a click so the main nav fits on one screen */
  .nav.is-open .nav-item__trigger {
    display: block;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--line);
    position: relative;
  }
  .nav.is-open .nav-item__trigger::after {
    content: "+";
    display: inline-block;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4em;
    font-weight: 300;
    opacity: 0.7;
    margin: 0;
    transition: transform var(--dur-fast) var(--ease);
  }
  .nav.is-open .nav-item.is-expanded .nav-item__trigger::after {
    content: "–";
  }
  .nav.is-open .nav-item__menu {
    position: static;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transform: none;
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
    min-width: 0;
    transition: max-height var(--dur) var(--ease), opacity var(--dur-fast) var(--ease), padding var(--dur) var(--ease);
  }
  .nav.is-open .nav-item.is-expanded .nav-item__menu {
    opacity: 1;
    visibility: visible;
    max-height: 600px;
    padding: 0.2rem 0 0.6rem 1rem;
  }
  .nav.is-open .nav-item__menu a {
    font-size: var(--fs-base);
    padding: 0.55rem 0;
    border-bottom: 1px dashed var(--line);
  }
  .nav.is-open .nav-item__menu a:last-child { border-bottom: none; }
}

/* -----------------------------------------------------------
   6. Hero (home)
----------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  padding-top: 8rem;
  padding-bottom: var(--sp-12);
  overflow: hidden;
  background: var(--ink);
}
.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  animation: slow-zoom 24s ease-out forwards;
}
/* When the hero background is rendered as <picture><img> (better LCP than a CSS
   background, because the browser can preload it and decode in parallel), make
   the wrapper and image fill the hero. The animation moves to the inner img so
   the picture box stays static and reduced-motion still works (see media
   query at the top of this file). */
picture.hero__bg { display: block; overflow: hidden; }
picture.hero__bg > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: slow-zoom 24s ease-out forwards;
}
picture.hero__bg { animation: none; }
@keyframes slow-zoom {
  from { transform: scale(1.08); }
  to   { transform: scale(1.0); }
}

/* Hero video — sits above the still image, fades in once it has data so we
   never flash an empty box. Respects prefers-reduced-motion. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  opacity: 0;
  transition: opacity 600ms ease-out;
  pointer-events: none;
  /* Stop the still-image zoom once video is ready (handled in JS) */
}
.hero__video.is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}
.hero__grad {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(var(--overlay-rgb), var(--hero-veil-top)) 0%, rgba(var(--overlay-rgb), calc(var(--hero-veil-top) * 0.33)) 35%, rgba(var(--overlay-rgb), var(--hero-veil-bot)) 100%),
    linear-gradient(90deg, rgba(var(--overlay-rgb), var(--hero-veil-side)) 0%, rgba(var(--overlay-rgb), 0) 60%);
}
.hero__content {
  position: relative;
  z-index: 2;
  max-width: 900px;
}
.hero h1 {
  margin: 1.2rem 0 1.6rem;
  font-weight: 400;
}
.hero h1 em {
  font-style: italic;
  color: var(--brass);
  font-weight: 300;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-mute);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.hero__scroll::after {
  content: "";
  width: 1px; height: 28px;
  background: linear-gradient(180deg, var(--paper-mute), transparent);
  animation: scroll-pulse 2.4s ease-in-out infinite;
}
@keyframes scroll-pulse {
  0%, 100% { opacity: 0.4; transform: scaleY(0.8); }
  50%      { opacity: 1;   transform: scaleY(1); }
}

/* Page hero */
.page-hero {
  position: relative;
  padding-top: 10rem;
  padding-bottom: clamp(var(--sp-8), 7vw, var(--sp-16));
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.45;
  z-index: 0;
}
.page-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(var(--overlay-rgb), var(--page-hero-top)), rgba(var(--overlay-rgb), var(--page-hero-bot)));
}
.page-hero__content {
  position: relative;
  z-index: 1;
  max-width: 820px;
}
.page-hero h1 {
  font-size: var(--fs-3xl);
  margin: 1.2rem 0 1.2rem;
}
.breadcrumb {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-mute);
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.breadcrumb a:hover { color: var(--brass); }
.breadcrumb__sep { opacity: 0.4; }

/* -----------------------------------------------------------
   7. Intro / narrative blocks
----------------------------------------------------------- */
.intro {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--sp-8);
  align-items: start;
}
.intro__label { position: sticky; top: 6rem; }
.intro h2 { margin-bottom: var(--sp-5); }
.intro p + p { margin-top: 1rem; }
@media (max-width: 820px) {
  .intro { grid-template-columns: 1fr; gap: var(--sp-4); }
  .intro__label { position: static; }
}

.quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: var(--fs-2xl);
  line-height: 1.2;
  max-width: 24ch;
  color: var(--paper);
  text-wrap: balance;
}
.quote__attr {
  margin-top: 1.2rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-mute);
  font-style: normal;
}

/* -----------------------------------------------------------
   8. Experience cards (home)
----------------------------------------------------------- */
.exps {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-4);
}
.exp {
  grid-column: span 6;
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--ink-3);
}
.exp--tall { grid-row: span 2; aspect-ratio: 5 / 8; }
.exp--wide { grid-column: span 12; aspect-ratio: 21 / 9; }
.exp__img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 900ms var(--ease);
}
.exp:hover .exp__img { transform: scale(1.05); }
.exp__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--overlay-rgb), 0) 30%, rgba(var(--overlay-rgb), var(--card-veil-bot)) 100%);
}
.exp__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  color: var(--paper);
}
.exp__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  color: var(--brass);
  opacity: 0.9;
}
.exp__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 400;
  margin: 0.4rem 0 0.4rem;
  letter-spacing: -0.01em;
}
.exp__desc {
  font-size: var(--fs-sm);
  color: var(--paper-2);
  max-width: 40ch;
}
.exp__arrow {
  position: absolute;
  top: clamp(1rem, 2vw, 1.5rem);
  right: clamp(1rem, 2vw, 1.5rem);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(var(--glass-rgb), 0.12);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  border: 1px solid rgba(var(--glass-rgb), 0.2);
  transition: all var(--dur-fast) var(--ease);
}
.exp:hover .exp__arrow {
  background: var(--brass);
  color: var(--ink);
  border-color: var(--brass);
}

@media (max-width: 820px) {
  .exp, .exp--tall, .exp--wide {
    grid-column: span 12;
    grid-row: auto;
    aspect-ratio: 5 / 4;
  }
}

/* -----------------------------------------------------------
   9. Process / steps
----------------------------------------------------------- */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
  counter-reset: step;
}
.process__step {
  padding: var(--sp-6);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  position: relative;
}
.process__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  color: var(--brass);
  margin-bottom: var(--sp-5);
  display: block;
}
.process__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 400;
  margin-bottom: 0.75rem;
  line-height: 1.1;
}
.process__body {
  font-size: var(--fs-sm);
  color: var(--paper-2);
  line-height: 1.6;
}
@media (max-width: 900px) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .process { grid-template-columns: 1fr; } }

/* -----------------------------------------------------------
   10. Split feature
----------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--sp-4), 5vw, var(--sp-10));
  align-items: stretch;
}
.split--reverse .split__media { order: 2; }
.split__media {
  position: relative;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--ink-3);
}
.split__media picture {
  position: absolute;
  inset: 0;
  display: block;
}
.split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 820px) {
  .split__media {
    aspect-ratio: 4 / 5;
    height: auto;
    min-height: 0;
  }
  .split__media picture { position: static; }
}
.split__body h2 { margin-bottom: var(--sp-5); }
.split__body p { margin-bottom: var(--sp-4); }
.split__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
.split__meta dt {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  color: var(--paper-mute);
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}
.split__meta dd {
  font-size: var(--fs-sm);
  color: var(--paper);
}
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
}

/* -----------------------------------------------------------
   11. Capability list
----------------------------------------------------------- */
.caps {
  list-style: none;
  padding: 0;
  margin-top: var(--sp-5);
}
.caps li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--sp-3);
  padding: 0.85rem 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.caps li:last-child { border-bottom: 1px solid var(--line); }
.caps__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--paper-mute);
}
.caps__text {
  font-size: var(--fs-base);
  color: var(--paper);
}
.caps__text span {
  color: var(--paper-mute);
  margin-left: 0.5rem;
}

/* -----------------------------------------------------------
   12. Brand strip
----------------------------------------------------------- */
.brands {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  justify-content: center;
  padding-block: var(--sp-8);
  border-block: 1px solid var(--line);
}
.brands__item {
  filter: grayscale(1) brightness(1.4) opacity(0.55);
  transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
  max-height: 30px;
  width: auto;
}
.brands__item:hover { filter: grayscale(1) brightness(1.6) opacity(1); }

/* -----------------------------------------------------------
   13. Projects gallery
----------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-3);
}
.gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--ink-3);
}
.gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease);
}
.gallery__item:hover img { transform: scale(1.04); }
.gallery__item--lg { grid-column: span 4; aspect-ratio: 4 / 3; }
.gallery__item--md { grid-column: span 3; aspect-ratio: 4 / 3; }
.gallery__item--sm { grid-column: span 2; aspect-ratio: 3 / 4; }
.gallery__item--tall { grid-column: span 3; aspect-ratio: 3 / 4; }

.gallery__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.25rem;
  background: linear-gradient(180deg, transparent, rgba(var(--overlay-rgb), 0.9));
  color: var(--paper);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.gallery__item:hover .gallery__cap { opacity: 1; transform: translateY(0); }
.gallery__cap small {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  display: block;
  margin-bottom: 0.3rem;
}
.gallery__cap strong {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 400;
}
@media (max-width: 820px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery__item--lg, .gallery__item--md, .gallery__item--sm, .gallery__item--tall {
    grid-column: span 2;
    aspect-ratio: 4 / 3;
  }
}

/* -----------------------------------------------------------
   14. CTA band & footer
----------------------------------------------------------- */
.cta-band {
  position: relative;
  padding-block: clamp(var(--sp-10), 10vw, var(--sp-20));
  text-align: center;
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: var(--ink-2);
}
.cta-band h2 {
  font-size: var(--fs-3xl);
  max-width: 18ch;
  margin: 0 auto 1.5rem;
  font-weight: 400;
}
.cta-band h2 em { font-style: italic; color: var(--brass); }
.cta-band p { margin: 0 auto 2rem; color: var(--paper-2); font-size: var(--fs-lg); }
.cta-band__cta { display: inline-flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }

.footer {
  background: var(--ink-2);
  padding-top: var(--sp-12);
  padding-bottom: var(--sp-6);
  border-top: 1px solid var(--line);
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-8);
  padding-bottom: var(--sp-10);
  border-bottom: 1px solid var(--line);
}
.footer__brand p {
  color: var(--paper-mute);
  font-size: var(--fs-sm);
  margin-top: 1rem;
  max-width: 32ch;
}
.footer__creds {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  max-width: 36ch;
}
.footer__cred {
  flex: 0 0 auto;
  display: inline-flex;
  width: 64px;
  height: 64px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 4px;
  background: transparent;
  transition: opacity var(--dur-fast) var(--ease);
}
.footer__cred:hover { opacity: 0.82; }
.footer__cred-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: none;
}
/* Default (light theme): show the onLight logo (dark text version) */
.footer__cred-logo--onLight { display: block; }
.footer__cred-logo--onDark { display: none; }
/* Dark theme: flip */
[data-theme="dark"] .footer__cred-logo--onLight { display: none; }
[data-theme="dark"] .footer__cred-logo--onDark { display: block; }
.footer__cred-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.footer__cred-copy strong {
  font-size: var(--fs-sm);
  color: var(--paper);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.footer__cred-copy small {
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--paper-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.footer h5 {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 1rem;
}
.footer ul li { margin-bottom: 0.7rem; }
.footer ul a {
  font-size: var(--fs-sm);
  color: var(--paper-2);
}
.footer ul a:hover { color: var(--paper); }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  color: var(--paper-mute);
  text-transform: uppercase;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer__bottom a { color: var(--paper-mute); }
.footer__bottom a:hover { color: var(--paper); }
.footer__bottom-links a + a { margin-left: 1.5rem; }

@media (max-width: 820px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .footer__brand { grid-column: span 2; }
}
@media (max-width: 520px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__brand { grid-column: span 1; }
}

/* -----------------------------------------------------------
   15. Contact form
----------------------------------------------------------- */
.contact {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(var(--sp-6), 6vw, var(--sp-12));
}
.contact__info dl { margin-top: var(--sp-5); }
.contact__info dt {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  color: var(--paper-mute);
  text-transform: uppercase;
  margin-top: 1.4rem;
  margin-bottom: 0.35rem;
}
.contact__info dd { font-size: var(--fs-base); color: var(--paper); }
.contact__info dd a:hover { color: var(--brass-hi); }

.form {
  display: grid;
  gap: 1rem;
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form__field { display: flex; flex-direction: column; gap: 0.4rem; }
.form__field label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-mute);
}
.form__field input,
.form__field textarea,
.form__field select {
  background: var(--ink-2);
  color: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  font-size: var(--fs-base);
  font-family: var(--font-body);
  transition: border-color var(--dur-fast) var(--ease);
}
.form__field input:focus,
.form__field textarea:focus,
.form__field select:focus {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
  border-color: var(--brass);
}
.form__field input:focus-visible,
.form__field textarea:focus-visible,
.form__field select:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
  border-color: var(--brass);
}

/* Required-field indicator on labels */
.form__field label .required {
  color: var(--brass);
  font-weight: 600;
  margin-left: 0.15em;
}
.form__legend {
  font-size: var(--fs-sm, 0.875rem);
  color: var(--text-mute);
  margin: 0 0 1rem;
}
.form__legend .required { color: var(--brass); font-weight: 600; }
.form__field textarea { min-height: 140px; resize: vertical; }
.form__actions { margin-top: 0.6rem; }

@media (max-width: 820px) {
  .contact { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------
   15.5 FAQ section — service-page accordion
----------------------------------------------------------- */
.faq__list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border);
}
.faq__item {
  border-bottom: 1px solid var(--border);
  padding: 1.1rem 0;
}
.faq__q {
  font-family: var(--font-display, "Fraunces", serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-right: 1.5rem;
  position: relative;
  transition: color var(--dur-fast) var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--brass);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: transform var(--dur-fast) var(--ease);
}
.faq__item[open] .faq__q::after { content: "–"; }
.faq__q:hover { color: var(--brass); }
.faq__q:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 4px;
  border-radius: 2px;
}
.faq__a {
  padding: 0.6rem 1.5rem 0.4rem 0;
  color: var(--text-2);
}
.faq__a p {
  margin: 0;
  line-height: 1.65;
  max-width: 62ch;
}

/* -----------------------------------------------------------
   16. Projects: featured list
----------------------------------------------------------- */
.projects-list {
  display: grid;
  gap: var(--sp-10);
}
.project-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(var(--sp-5), 5vw, var(--sp-10));
  align-items: stretch;
}
.project-row--reverse { grid-template-columns: 1.2fr 1fr; }
.project-row--reverse .project-row__media { order: 2; }
.project-row__media {
  position: relative;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.project-row__media picture {
  position: absolute;
  inset: 0;
  display: block;
}
.project-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1200ms var(--ease);
}
@media (max-width: 760px) {
  .project-row__media {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 0;
  }
  .project-row__media picture { position: static; }
}
.project-row:hover .project-row__media img { transform: scale(1.04); }
.project-row__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 0.75rem;
}
.project-row h3 { font-size: var(--fs-2xl); margin-bottom: 1rem; font-weight: 400; }
.project-row__meta {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: var(--sp-5);
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.project-row__meta > div small {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-mute);
  margin-bottom: 0.3rem;
}
.project-row__meta > div strong {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 400;
  color: var(--paper);
}
@media (max-width: 820px) {
  .project-row, .project-row--reverse { grid-template-columns: 1fr; }
  .project-row--reverse .project-row__media { order: 0; }
  .project-row__meta { grid-template-columns: 1fr 1fr; }
}

/* Service tags + contextual links for project case studies */
.project-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.25rem;
}
.project-row__tags span {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .25rem .65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--paper-dim);
  background: transparent;
  line-height: 1.4;
}
.project-row__links {
  margin-top: 1rem;
  font-size: .875rem;
  color: var(--paper-mute);
  line-height: 1.6;
}
.project-row__links a {
  color: var(--brass);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--brass) 30%, transparent);
  margin-left: .35rem;
}
.project-row__links a + a { margin-left: 1rem; }
.project-row__links a:hover,
.project-row__links a:focus-visible { border-bottom-color: var(--brass); }

/* -----------------------------------------------------------
   17. Fade-up animation
----------------------------------------------------------- */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

html:not(.js-ready) .fade-up { opacity: 1; transform: none; }

/* -----------------------------------------------------------
   18. Utility / misc
----------------------------------------------------------- */
.stack-sm > * + * { margin-top: var(--sp-3); }
.stack-md > * + * { margin-top: var(--sp-5); }
.stack-lg > * + * { margin-top: var(--sp-8); }

.text-brass { color: var(--brass); }
.text-mute  { color: var(--paper-mute); }
.italic { font-style: italic; font-weight: 300; }

.heading-xl {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.heading-xl em { font-style: italic; color: var(--brass); font-weight: 300; }

/* =========================================================
   Journal — index grid + article reading layout
   ========================================================= */

.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 900px) {
  .journal-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .journal-grid { grid-template-columns: 1fr; }
}

.journal-card {
  display: flex;
  flex-direction: column;
  color: var(--paper);
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease);
}
.journal-card:hover { transform: translateY(-3px); }

.journal-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--line);
}
.journal-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease);
}
.journal-card:hover .journal-card__media img { transform: scale(1.04); }

.journal-card__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-mute);
  margin-top: 1.25rem;
}
.journal-card__meta span.dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--brass);
  display: inline-block;
}

.journal-card__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-top: 0.7rem;
  color: var(--paper);
}
.journal-card:hover .journal-card__title { color: var(--brass); }

.journal-card__dek {
  color: var(--paper-mute);
  font-size: 0.97rem;
  line-height: 1.55;
  margin-top: 0.6rem;
}

.journal-card__arrow {
  margin-top: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

/* Homepage 3-up teaser variant — lighter top meta */
.journal-teaser .journal-card__meta { margin-top: 1rem; }

/* Article page */
.article {
  padding-block: clamp(3rem, 6vw, 5rem);
}
.article__header {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.article__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-mute);
}
.article__meta span.dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--brass);
}
.article__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-top: 1.25rem;
}
.article__title em { font-style: italic; color: var(--brass); font-weight: 300; }
.article__dek {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.5;
  color: var(--paper-mute);
  margin-top: 1.5rem;
  font-style: italic;
}

.article__hero {
  max-width: 1200px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
}
.article__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.article__body {
  max-width: 680px;
  margin: 0 auto;
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--paper);
}
.article__body p {
  margin-bottom: 1.4rem;
}
.article__body p:first-of-type::first-letter {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 3.5em;
  float: left;
  line-height: 0.85;
  padding: 0.15em 0.12em 0 0;
  color: var(--brass);
}
.article__body h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.5vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 3rem 0 1rem;
  color: var(--paper);
}
.article__body h2 em { font-style: italic; color: var(--brass); font-weight: 300; }
.article__body blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.3rem, 2vw, 1.55rem);
  line-height: 1.4;
  color: var(--paper);
  border-left: 2px solid var(--brass);
  padding: 0.3rem 0 0.3rem 1.5rem;
  margin: 2.25rem 0 2.25rem;
}
.article__body ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem;
}
.article__body ul li {
  padding-left: 1.5rem;
  position: relative;
  margin-bottom: 0.65rem;
}
.article__body ul li::before {
  content: '·';
  color: var(--brass);
  position: absolute;
  left: 0.5rem;
  font-weight: 700;
  font-size: 1.3em;
  top: -0.1rem;
}
.article__body a:not(.btn) {
  color: var(--brass);
  text-decoration: underline;
  text-decoration-color: rgba(var(--glass-rgb), 0.22);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast) var(--ease);
}
.article__body a:not(.btn):hover { text-decoration-color: var(--brass); }
.article__body strong { color: var(--paper); font-weight: 600; }

.article__footer-meta {
  max-width: 680px;
  margin: clamp(3rem, 5vw, 4rem) auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-mute);
}
.article__footer-meta a { color: var(--brass); text-decoration: none; }

/* Related articles at bottom of each article */
.related-journal {
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 5vw, 5rem);
}
.related-journal__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

/* Netlify form additions */
.hp-field { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
.form__consent { font-size:.78rem; line-height:1.5; color: var(--paper-mute); margin:1rem 0 0; max-width:52ch; }
.form__consent a { color:var(--brass); text-decoration:underline; text-underline-offset:3px; }
.thankyou { padding:8rem 0 6rem; text-align:center; }
.thankyou h1 { font-family:'Fraunces', serif; font-weight:300; font-size:clamp(2.5rem, 5vw, 4.5rem); letter-spacing:-0.02em; margin:0 0 1.5rem; }
.thankyou h1 em { font-style:italic; color:var(--brass); }
.thankyou p { font-size:1.15rem; max-width:52ch; margin:0 auto 1rem; line-height:1.6; opacity:.8; }
.thankyou .btn { margin-top:2.5rem; }

/* =========================================================
   Brands — line card page
   ========================================================= */
.brand-section {
  padding-block: clamp(3.5rem, 6vw, 6rem);
}
.brand-section--alt {
  background: var(--ink-2);
  border-block: 1px solid var(--line);
}

.brand-section__head {
  max-width: 820px;
  margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);
  text-align: center;
}
.brand-section__head .eyebrow { display: inline-flex; }
.brand-section__head h2 {
  margin-top: 1rem;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.brand-section__head p {
  margin: 1.1rem auto 0;
  color: var(--paper-mute);
  font-size: 1.02rem;
  line-height: 1.6;
  max-width: 58ch;
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 2.8vw, 2.25rem);
}
@media (max-width: 960px) {
  .brand-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .brand-grid { grid-template-columns: 1fr; }
}

.brand-card {
  display: flex;
  flex-direction: column;
  color: var(--paper);
  text-decoration: none;
  background: rgba(var(--tile-rgb), 0.55);
  border: 1px solid var(--line);
  transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.brand-card:hover {
  transform: translateY(-3px);
  border-color: var(--brass);
  background: rgba(var(--tile-rgb), 0.9);
}

.brand-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
.brand-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease);
}
.brand-card:hover .brand-card__media img { transform: scale(1.04); }

.brand-card__body {
  padding: 1.5rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.brand-card__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 1.9vw, 1.55rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--paper);
  transition: color var(--dur-base) var(--ease);
}
.brand-card:hover .brand-card__title { color: var(--brass); }

.brand-card__dek {
  color: var(--paper-mute);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0.7rem 0 1.1rem;
  flex: 1;
}

.brand-card__link {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
}
.brand-card__ext {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  letter-spacing: 0;
  transition: transform var(--dur-base) var(--ease);
}
.brand-card:hover .brand-card__ext { transform: translate(2px, -2px); }

/* -----------------------------------------------------------
   20. Theme toggle
----------------------------------------------------------- */
.theme-toggle {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 50%;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
  flex-shrink: 0;
}
.theme-toggle:hover {
  color: var(--brass);
  border-color: var(--brass);
  transform: rotate(12deg);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur) var(--ease);
}
/* Light is the default: show sun icon. Dark hides sun, shows moon. */
.theme-toggle .theme-toggle__sun { display: block; }
.theme-toggle .theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-toggle__moon { display: block; }

/* Logo swap: default (light) uses black logo; dark uses white. */
.brand__logo--dark { display: none; }
.brand__logo--light { display: block; }
:root[data-theme="dark"] .brand__logo--dark { display: block; }
:root[data-theme="dark"] .brand__logo--light { display: none; }

/* Mobile: theme toggle lives in the header row next to the menu button */
@media (max-width: 960px) {
  .theme-toggle--desktop { display: none; }
  .theme-toggle--mobile {
    display: inline-flex;
    margin-right: 0.5rem;
  }
}
@media (min-width: 961px) {
  .theme-toggle--mobile { display: none; }
  .theme-toggle--desktop { display: inline-flex; }
}

/* -----------------------------------------------------------
   21. Theme-invariant regions (light text on dark photography)
   The hero and page-hero sit on dark imagery. Even in light mode
   the text, logo, and nav chrome over the hero must stay light
   so it reads against the photo. The sticky header only flips
   to "dark chrome" after scrolling past the hero.
----------------------------------------------------------- */
.hero, .page-hero {
  /* Pin the readability tokens to the dark palette while inside
     these regions, regardless of the page-level theme. */
  --ink:        #0d0c0b;
  --ink-2:      #14120f;
  --paper:      #f3eee5;
  --paper-2:    #e8e1d4;
  --paper-mute: #a69f93;
  --line:       #2b2722;
  --line-2:     #3a342d;
  /* Keep the veils dark over the photo in both themes */
  --overlay-rgb: 13, 12, 11;
  --hero-veil-top: 0.3;
  --hero-veil-bot: 0.85;
  --hero-veil-side: 0.55;
  --page-hero-dim: 0.45;
  --page-hero-top: 0.5;
  --page-hero-bot: 0.95;
  color: var(--paper);
}
.hero h1, .page-hero h1, .hero p, .page-hero p,
.hero .eyebrow, .page-hero .breadcrumb, .hero__scroll {
  color: var(--paper);
}
.hero p.lead { color: var(--paper-2); }

/* Header-over-hero in light mode: since the hero photo is dark,
   the chrome needs to read as light (white logo, light nav) UNTIL
   the user scrolls past the hero and .is-scrolled applies the
   cream-glass state. In dark mode the chrome is already light, so
   these rules only need to target the default (light) theme. */
:root:not([data-theme="dark"]) .site-header:not(.is-scrolled) .brand__logo--dark { display: block; }
:root:not([data-theme="dark"]) .site-header:not(.is-scrolled) .brand__logo--light { display: none; }
:root:not([data-theme="dark"]) .site-header:not(.is-scrolled) {
  --ink:        #0d0c0b;
  --paper:      #f3eee5;
  --paper-2:    #e8e1d4;
  --paper-mute: #a69f93;
  --line-2:     #3a342d;
  color: var(--paper);
}
:root:not([data-theme="dark"]) .site-header:not(.is-scrolled) .nav a,
:root:not([data-theme="dark"]) .site-header:not(.is-scrolled) .theme-toggle {
  color: var(--paper);
  border-color: var(--line-2);
}

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

/* Bug 1: Restore dark text inside the Experiences dropdown in light mode.
   The header-not-scrolled rule above reassigns --paper-2 to a light cream
   so nav links read on the dark hero. The dropdown lives inside the header
   but paints its own light surface — restore page-level tokens locally so
   the dropdown text stays readable. Desktop only: on mobile the submenu
   sits on the dark mobile nav, so it should keep the light cream color. */
@media (min-width: 961px) {
  :root:not([data-theme="dark"]) .site-header .nav-item__menu {
    --paper-2: #2e2920;
    --paper:   #1a1712;
  }
}

/* Bug 2: When the mobile menu is open, drop the header's backdrop-filter.
   backdrop-filter creates a containing block that traps position:fixed
   descendants, which clipped the nav to one row when the header was
   scrolled. The nav paints its own opaque background, so the blur is
   not needed while the menu overlay is visible. */
@media (max-width: 960px) {
  .site-header:has(.nav.is-open) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ============================================================
   Social media icons (footer + contact page)
   ============================================================ */
.mds-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.mds-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid currentColor;
  color: inherit;
  opacity: .75;
  transition: opacity .18s ease, transform .18s ease, border-color .18s ease, background-color .18s ease;
  text-decoration: none;
}
.mds-social__link:hover,
.mds-social__link:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
  border-color: var(--brass, currentColor);
  color: var(--brass, inherit);
}
.mds-social__link:focus-visible {
  outline: 2px solid var(--brass, currentColor);
  outline-offset: 2px;
}
.mds-social__link svg {
  width: 18px;
  height: 18px;
  display: block;
}
.mds-social--footer { margin-top: 22px; }
.mds-social--contact { margin-top: 0; }