/* =========================================================
   PAGE-SPECIFIC STYLES (v2) — THE WURSTER ARCHIVE
   Constrained images · tighter grids · reduced type.
   ========================================================= */

/* =========================================================
   GATE (00)
   ========================================================= */
.gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px var(--gutter);
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
}
.gate::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 55% at 50% 50%, rgba(182,148,90,0.2), transparent 70%),
    radial-gradient(40% 50% at 80% 20%, rgba(12,42,61,0.55), transparent 70%),
    radial-gradient(55% 55% at 10% 90%, rgba(194,70,26,0.15), transparent 70%);
  pointer-events: none;
}
.gate__chrome {
  position: absolute; inset: 0;
  pointer-events: none;
  padding: clamp(16px, 2vw, 28px);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242,237,225,0.55);
}
.gate__chrome span { position: absolute; }
.gate__chrome .tl { top: clamp(16px, 2vw, 24px); left: clamp(16px, 2vw, 24px); }
.gate__chrome .tr { top: clamp(16px, 2vw, 24px); right: clamp(16px, 2vw, 24px); }
.gate__chrome .bl { bottom: clamp(16px, 2vw, 24px); left: clamp(16px, 2vw, 24px); }
.gate__chrome .br { bottom: clamp(16px, 2vw, 24px); right: clamp(16px, 2vw, 24px); }

.gate__panel {
  position: relative;
  text-align: center;
  width: min(640px, 100%);
  display: grid;
  gap: 28px;
  justify-items: center;
}
.gate__monogram {
  display: grid; place-items: center;
  width: 76px; height: 76px; border-radius: 50%;
  border: 1px solid rgba(242,237,225,0.22);
  font-family: var(--font-display); font-weight: 400; font-size: 22px;
  letter-spacing: 0.02em;
  position: relative;
}
.gate__monogram::before, .gate__monogram::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 1px solid rgba(242,237,225,0.1);
  animation: spin 18s linear infinite;
}
.gate__monogram::after { inset: -20px; animation-duration: 36s; animation-direction: reverse; opacity: 0.6; }
@keyframes spin { to { transform: rotate(360deg); } }

.gate__label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(242,237,225,0.6);
}
.gate__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(36px, 5.4vw, 68px); line-height: 0.98; letter-spacing: -0.02em;
  color: var(--paper);
  margin: 0;
}
.gate__title em { font-style: italic; color: var(--brass); }

.gate__form {
  width: min(460px, 100%);
  display: grid;
  gap: 14px;
}
.gate__input-wrap {
  display: flex; align-items: center;
  border: 1px solid rgba(242,237,225,0.22);
  border-radius: 999px;
  padding: 4px 6px 4px 20px;
  background: rgba(18,17,15,0.5);
  backdrop-filter: blur(6px);
  transition: border-color var(--transition), background var(--transition), transform 220ms ease;
}
.gate__input-wrap:focus-within { border-color: var(--brass); background: rgba(18,17,15,0.7); }
.gate__input-wrap.shake { animation: shake 380ms ease; }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}
.gate__input-wrap input {
  flex: 1;
  background: transparent; border: none; outline: none;
  padding: 12px 4px;
  font-family: var(--font-sans); font-size: 15px;
  color: var(--paper);
  letter-spacing: 0.02em;
}
.gate__input-wrap input::placeholder { color: rgba(242,237,225,0.4); }
.gate__submit {
  border: none;
  background: var(--brass);
  color: var(--ink);
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
  transition: background var(--transition), color var(--transition), transform 220ms ease;
}
.gate__submit:hover { background: var(--paper); }
.gate__submit .arrow { width: 12px; height: 8px; position: relative; }
.gate__submit .arrow::before { content: ""; position: absolute; inset: 0; border-top: 1.5px solid currentColor; top: 50%; }
.gate__submit .arrow::after { content: ""; position: absolute; right: 0; top: 50%; width: 5px; height: 5px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: translateY(-50%) rotate(45deg); }

.gate__error {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #e88;
  min-height: 14px;
  opacity: 0; transition: opacity 220ms ease;
}
.gate__error.is-on { opacity: 1; }

.gate__hint {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(242,237,225,0.44);
}

.gate__ticker {
  position: absolute; left: 0; right: 0; bottom: 0;
  border-top: 1px solid rgba(242,237,225,0.12);
  color: rgba(242,237,225,0.55);
  pointer-events: none;
}
.gate__ticker .ticker__track span b { color: rgba(182,148,90,0.8); }

/* =========================================================
   HOME (01)
   ========================================================= */
.hero {
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(32px, 4vw, 60px) var(--gutter) clamp(32px, 4vw, 60px);
}
.hero__meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 16px;
  border-bottom: var(--edge);
  flex-wrap: wrap;
}

.hero__stage {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr);
  gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(28px, 3.5vw, 48px);
  align-items: center;
}

.hero__type {
  position: relative;
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-size: clamp(36px, 5.4vw, 78px);
}
.hero__type .line { display: block; overflow: hidden; padding: 0.04em 0; }
.hero__type em { font-style: italic; color: var(--brass-deep); font-weight: 300; }
.hero__type .amp {
  font-family: var(--font-serif-alt);
  font-style: italic;
  font-weight: 400;
  color: var(--ember);
  margin: 0 0.04em;
}

.hero__portrait {
  position: relative;
  width: 100%;
  max-width: 380px;
  justify-self: end;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--ink);
  border-radius: 3px;
}
.hero__portrait img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 18%;
  transition: transform 1200ms cubic-bezier(0.2,0.8,0.2,1);
}
.hero__portrait:hover img { transform: scale(1.03); }
.hero__portrait::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(18,17,15,0.22));
  pointer-events: none;
}
.hero__portrait .tag {
  position: absolute; top: 12px; left: 12px; right: 12px;
  display: flex; justify-content: space-between; align-items: center;
  color: var(--paper);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  mix-blend-mode: difference;
}

.hero__lede {
  margin-top: clamp(32px, 4vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 36px);
  align-items: start;
}
.hero__lede h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--step-3);
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.hero__lede h2 em { font-style: italic; color: var(--brass-deep); }
.hero__lede .side {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.8;
}
.hero__lede .side.r { text-align: right; }
.hero__lede .side b { color: var(--ember); font-weight: 500; }

/* Pillars */
.pillars {
  margin-top: clamp(40px, 5vw, 80px);
  padding: 0 var(--gutter);
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}
.pillars h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  padding-bottom: 16px;
  border-bottom: var(--edge);
}
.pillars__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-bottom: var(--edge);
}
.pillars__grid article {
  padding: clamp(22px, 2.6vw, 36px) clamp(14px, 1.8vw, 24px);
  border-right: var(--edge-soft);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: clamp(220px, 22vw, 300px);
  transition: background var(--transition);
}
.pillars__grid article:last-child { border-right: none; }
.pillars__grid article:hover { background: rgba(18,17,15,0.04); }
.pillars__grid article .num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-deep);
}
.pillars__grid article h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-2);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-top: auto;
}
.pillars__grid article h4 em { font-style: italic; color: var(--brass-deep); }
.pillars__grid article p { color: var(--ink-soft); font-size: 13.5px; line-height: 1.55; }

/* Editorial split */
.editorial {
  margin-top: clamp(48px, 6vw, 96px);
  padding: clamp(36px, 5vw, 80px) var(--gutter);
  background: var(--ink);
  color: var(--paper);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(24px, 3vw, 56px);
  align-items: center;
  position: relative;
  overflow: hidden;
}
.editorial::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(50% 40% at 80% 30%, rgba(182,148,90,0.12), transparent 60%);
  pointer-events: none;
}
.editorial__text { position: relative; max-width: 600px; }
.editorial__text .kicker {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass);
}
.editorial__text h2 {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--step-5); line-height: 1.05; letter-spacing: -0.02em;
  margin: 16px 0 22px;
}
.editorial__text h2 em { font-style: italic; color: var(--brass); }
.editorial__text p {
  max-width: 540px;
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--step-1); line-height: 1.55;
  color: rgba(242,237,225,0.78);
}
.editorial__text .sig {
  display: flex; align-items: center; gap: 14px;
  margin-top: 22px;
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(242,237,225,0.65);
}
.editorial__text .sig hr { flex: 1; border: none; border-top: 1px solid rgba(242,237,225,0.2); }
.editorial__figure {
  position: relative;
  width: 100%;
  max-width: 440px;
  justify-self: end;
  aspect-ratio: 4/5;
  overflow: hidden;
}
.editorial__figure img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.editorial__figure::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(18,17,15,0.5));
}
.editorial__figure figcaption {
  position: absolute; bottom: 14px; left: 14px; right: 14px;
  color: var(--paper);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  display: flex; justify-content: space-between;
}

/* Dashboard / Stats / Timeline */
.dashboard {
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 80px) var(--gutter);
}
.dashboard__head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  padding-bottom: 18px; border-bottom: var(--edge);
  margin-bottom: 32px;
  align-items: end;
}
.dashboard__head .kicker {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft);
}
.dashboard__head h2 {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--step-4); line-height: 1; letter-spacing: -0.02em;
  margin-top: 10px;
}
.dashboard__head h2 em { font-style: italic; color: var(--brass-deep); }
.dashboard__head p { font-family: var(--font-display); font-weight: 300; font-size: var(--step-1); color: var(--ink-2); max-width: 420px; }

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: var(--edge);
  border-bottom: var(--edge);
}
.stats div {
  padding: clamp(22px, 2.8vw, 36px) clamp(14px, 1.8vw, 24px);
  border-right: var(--edge-soft);
  display: flex; flex-direction: column; gap: 6px;
}
.stats div:last-child { border-right: none; }
.stats .n {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(30px, 3.8vw, 56px); line-height: 1; letter-spacing: -0.02em;
}
.stats .n sup { font-size: 0.36em; color: var(--brass-deep); font-family: var(--font-mono); vertical-align: top; top: 0.9em; position: relative; }
.stats .l {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
}

.timeline {
  margin-top: clamp(40px, 5vw, 80px);
}
.timeline article {
  display: grid;
  grid-template-columns: 100px 110px minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(14px, 2vw, 30px);
  padding: clamp(18px, 2.4vw, 30px) 0;
  border-top: var(--edge);
  align-items: baseline;
  transition: background var(--transition), padding var(--transition);
}
.timeline article:last-child { border-bottom: var(--edge); }
.timeline article:hover { background: rgba(18,17,15,0.03); padding-left: 14px; }
.timeline .y {
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 400;
  color: var(--brass-deep);
}
.timeline .r {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
}
.timeline .t {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--step-2); line-height: 1.2; letter-spacing: -0.015em;
}
.timeline .t em { font-style: italic; color: var(--brass-deep); }
.timeline .n {
  font-family: var(--font-sans); font-size: 13.5px; line-height: 1.55; color: var(--ink-soft);
}

/* Quote canvas */
.quote {
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 120px) var(--gutter);
  text-align: center;
  position: relative;
}
.quote blockquote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--step-4);
  line-height: 1.15;
  letter-spacing: -0.015em;
  max-width: 26ch;
  margin: 0 auto;
}
.quote blockquote em { font-style: italic; color: var(--brass-deep); }
.quote .mark { font-family: var(--font-serif-alt); font-size: clamp(50px, 6vw, 90px); line-height: 0.7; color: var(--ember); display: block; margin-bottom: -0.1em; }
.quote cite {
  display: inline-block; margin-top: 24px; font-style: normal;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft);
}
.quote::before, .quote::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  width: 1px; height: 40px; background: var(--ink); opacity: 0.2;
}
.quote::before { top: 0; }
.quote::after { bottom: 0; }

/* Image band — constrained sizes */
.band {
  max-width: 1600px;
  margin: clamp(24px, 3vw, 48px) auto 0;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.2vw, 18px);
}
.band figure {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--ink);
  border-radius: 2px;
}
.band figure.lg { aspect-ratio: 4/5; }
.band img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: transform 1000ms cubic-bezier(0.2,0.8,0.2,1); }
.band figure:hover img { transform: scale(1.03); }
.band figcaption {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  color: var(--paper);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  display: flex; justify-content: space-between;
  mix-blend-mode: difference;
}
@media (max-width: 700px) {
  .band { grid-template-columns: repeat(1, 1fr); }
  .band figure { aspect-ratio: 4/3; }
}

/* Next chapter */
.next-chapter {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(30px, 4vw, 60px) var(--gutter);
  border-top: var(--edge);
  transition: background var(--transition), color var(--transition);
}
.next-chapter:hover { background: var(--ink); color: var(--paper); }
.next-chapter:hover .next-chapter__arr { transform: translateX(10px); }
.next-chapter .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.55; }
.next-chapter h3 { font-family: var(--font-display); font-weight: 300; font-size: var(--step-4); line-height: 1.05; letter-spacing: -0.02em; margin-top: 8px; }
.next-chapter h3 em { font-style: italic; color: var(--brass-deep); }
.next-chapter:hover h3 em { color: var(--brass); }
.next-chapter__arr { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; display: flex; align-items: center; gap: 12px; transition: transform var(--transition); }
.next-chapter__arr::after { content: ""; width: 60px; height: 1px; background: currentColor; }

@media (max-width: 900px) {
  .hero__stage { grid-template-columns: 1fr; }
  .hero__portrait { max-width: 320px; justify-self: start; }
  .hero__lede { grid-template-columns: 1fr; }
  .hero__lede .side.r { text-align: left; }
  .pillars__grid { grid-template-columns: 1fr 1fr; }
  .pillars__grid article:nth-child(2n) { border-right: none; }
  .pillars__grid article { border-bottom: var(--edge-soft); }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats div:nth-child(2n) { border-right: none; }
  .stats div { border-bottom: var(--edge-soft); }
  .editorial { grid-template-columns: 1fr; }
  .editorial__figure { max-width: 100%; justify-self: stretch; }
  .timeline article { grid-template-columns: 80px 1fr; row-gap: 6px; }
  .timeline .r { grid-column: 2; }
  .timeline .t { grid-column: 1 / -1; }
  .timeline .n { grid-column: 1 / -1; }
  .dashboard__head { grid-template-columns: 1fr; }
}

/* =========================================================
   BIOGRAPHY (02)
   ========================================================= */
.bio-intro {
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(32px, 4vw, 64px) var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(28px, 3.5vw, 64px);
  align-items: center;
}
.bio-intro__fig {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4/5;
  overflow: hidden;
  position: relative;
  border-radius: 3px;
}
.bio-intro__fig img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.bio-intro__text .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.bio-intro__text h2 {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--step-4); line-height: 1; letter-spacing: -0.02em;
  margin: 14px 0 20px;
}
.bio-intro__text h2 em { font-style: italic; color: var(--brass-deep); }
.bio-intro__text p {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--step-1); line-height: 1.55; color: var(--ink-2);
  max-width: 560px;
}
.bio-intro__text p + p { margin-top: 14px; }

.factfile {
  max-width: 1600px;
  margin: clamp(24px, 3vw, 48px) auto 0;
  border-top: var(--edge); border-bottom: var(--edge);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.factfile div { padding: clamp(16px, 1.8vw, 26px); border-right: var(--edge-soft); }
.factfile div:last-child { border-right: none; }
.factfile .l { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.factfile .v { font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); line-height: 1.15; margin-top: 8px; }

/* Chronology scroll */
.chrono {
  padding: clamp(40px, 5vw, 80px) 0;
  overflow: hidden;
}
.chrono__head {
  max-width: 1600px;
  margin: 0 auto 28px;
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end;
  border-bottom: var(--edge); padding-bottom: 20px;
}
.chrono__head .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.chrono__head h2 { font-family: var(--font-display); font-weight: 300; font-size: var(--step-4); line-height: 1; letter-spacing: -0.02em; margin-top: 10px; }
.chrono__head h2 em { font-style: italic; color: var(--brass-deep); }
.chrono__head p { font-family: var(--font-display); font-weight: 300; font-size: var(--step-1); color: var(--ink-2); max-width: 420px; }

.chrono__scroll {
  display: flex;
  gap: clamp(14px, 1.8vw, 24px);
  padding: 0 var(--gutter) 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.chrono__scroll::-webkit-scrollbar { height: 4px; }
.chrono__scroll::-webkit-scrollbar-thumb { background: rgba(18,17,15,0.18); }
.chrono__scroll article {
  flex: 0 0 clamp(260px, 28vw, 360px);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  border: var(--edge); border-radius: 2px;
  padding: clamp(18px, 2.2vw, 26px);
  background: var(--paper-2);
  transition: transform var(--transition), background var(--transition);
}
.chrono__scroll article:hover { transform: translateY(-4px); background: var(--paper); }
.chrono__scroll .y { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--brass-deep); text-transform: uppercase; }
.chrono__scroll .t { font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); line-height: 1.15; margin: 10px 0 12px; letter-spacing: -0.015em; }
.chrono__scroll .t em { font-style: italic; color: var(--brass-deep); }
.chrono__scroll .b { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
.chrono__scroll .d { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }

/* Philosophy */
.philosophy {
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 80px) var(--gutter);
  display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(24px, 3vw, 60px);
  border-top: var(--edge);
}
.philosophy__side .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.philosophy__side h2 { font-family: var(--font-display); font-weight: 300; font-size: var(--step-4); line-height: 1; letter-spacing: -0.02em; margin-top: 12px; }
.philosophy__side h2 em { font-style: italic; color: var(--brass-deep); }
.philosophy__list {
  list-style: none;
  display: grid;
}
.philosophy__list li {
  display: grid; grid-template-columns: 60px 1fr; gap: clamp(14px, 1.8vw, 28px);
  padding: clamp(18px, 2.2vw, 28px) 0;
  border-top: var(--edge-soft);
}
.philosophy__list li:last-child { border-bottom: var(--edge-soft); }
.philosophy__list .n { font-family: var(--font-mono); font-size: 11px; color: var(--brass-deep); letter-spacing: 0.14em; text-transform: uppercase; }
.philosophy__list h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); line-height: 1.2; letter-spacing: -0.015em; }
.philosophy__list h3 em { font-style: italic; color: var(--brass-deep); }
.philosophy__list p { margin-top: 8px; color: var(--ink-soft); font-size: 14px; line-height: 1.55; max-width: 62ch; }

/* Portrait strip */
.portraits {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.2vw, 18px);
  border-top: var(--edge);
  padding-top: clamp(24px, 3vw, 40px);
}
.portraits figure {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: 2px;
  background: var(--ink);
}
.portraits img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; transition: transform 1200ms cubic-bezier(0.2,0.8,0.2,1); }
.portraits figure:hover img { transform: scale(1.03); }
.portraits figcaption {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  color: var(--paper);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  display: flex; justify-content: space-between;
  mix-blend-mode: difference;
}
@media (max-width: 900px) {
  .bio-intro { grid-template-columns: 1fr; }
  .bio-intro__fig { max-width: 320px; }
  .factfile { grid-template-columns: 1fr 1fr; }
  .factfile div:nth-child(2n) { border-right: none; }
  .factfile div { border-bottom: var(--edge-soft); }
  .philosophy { grid-template-columns: 1fr; }
  .portraits { grid-template-columns: 1fr 1fr; }
  .portraits figure:nth-child(n+3) { display: none; }
}

/* =========================================================
   LEADERSHIP (03)
   ========================================================= */
.thesis {
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 80px) var(--gutter);
  display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(28px, 3.5vw, 64px);
  border-top: var(--edge);
}
.thesis .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.thesis h2 { font-family: var(--font-display); font-weight: 300; font-size: var(--step-4); line-height: 1; letter-spacing: -0.02em; margin-top: 12px; }
.thesis h2 em { font-style: italic; color: var(--brass-deep); }
.thesis__right { font-family: var(--font-display); font-weight: 300; font-size: var(--step-1); line-height: 1.55; color: var(--ink-2); max-width: 56ch; }
.thesis__right p + p { margin-top: 14px; }

.matrix {
  max-width: 1600px;
  margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: var(--edge); border-bottom: var(--edge);
}
.matrix article {
  padding: clamp(24px, 3vw, 40px) clamp(16px, 2vw, 28px);
  border-right: var(--edge-soft);
  display: flex; flex-direction: column; gap: 14px;
  min-height: clamp(240px, 26vw, 360px);
  transition: background var(--transition), color var(--transition);
}
.matrix article:last-child { border-right: none; }
.matrix article:hover { background: var(--ink); color: var(--paper); }
.matrix article:hover .matrix__n { color: var(--brass); }
.matrix__n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass-deep); transition: color var(--transition); }
.matrix__t { font-family: var(--font-display); font-weight: 400; font-size: var(--step-3); line-height: 1.1; letter-spacing: -0.015em; margin-top: auto; }
.matrix__t em { font-style: italic; color: var(--brass-deep); }
.matrix__d { font-size: 13.5px; line-height: 1.55; }

/* Diagram */
.diagram {
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 80px) var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(28px, 3.5vw, 56px);
  align-items: center;
}
.diagram__text .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.diagram__text h2 { font-family: var(--font-display); font-weight: 300; font-size: var(--step-4); line-height: 1; letter-spacing: -0.02em; margin-top: 12px; }
.diagram__text h2 em { font-style: italic; color: var(--brass-deep); }
.diagram__text p { margin-top: 16px; font-family: var(--font-display); font-weight: 300; font-size: var(--step-1); line-height: 1.55; color: var(--ink-2); max-width: 52ch; }
.diagram__text ul { list-style: none; margin-top: 20px; display: grid; gap: 8px; }
.diagram__text li { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); display: flex; gap: 10px; }
.diagram__text li::before { content: "↳"; color: var(--ember); }

.orbit {
  position: relative;
  aspect-ratio: 1;
  max-width: 440px;
  margin: 0 auto;
  width: 100%;
}
.orbit svg { width: 100%; height: 100%; overflow: visible; }
.orbit__dot { fill: var(--ink); }
.orbit__ring { fill: none; stroke: var(--ink); stroke-opacity: 0.15; }
.orbit__core { fill: var(--ink); }
.orbit__label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; fill: var(--ink-soft);
}
.orbit__core-label { font-family: var(--font-display); font-size: 16px; fill: var(--paper); text-anchor: middle; dominant-baseline: middle; font-weight: 300; }

/* Pull quote */
.pull {
  background: var(--ink); color: var(--paper);
  padding: clamp(48px, 7vw, 112px) var(--gutter);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.pull::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(40% 50% at 50% 50%, rgba(182,148,90,0.1), transparent 70%);
  pointer-events: none;
}
.pull blockquote { font-family: var(--font-display); font-weight: 300; font-size: var(--step-4); line-height: 1.15; letter-spacing: -0.015em; max-width: 24ch; margin: 0 auto; }
.pull blockquote em { font-style: italic; color: var(--brass); }
.pull cite { display: block; margin-top: 22px; font-style: normal; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(242,237,225,0.55); }

/* Initiatives */
.initiatives {
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 80px) var(--gutter);
}
.initiatives__head { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; padding-bottom: 18px; border-bottom: var(--edge); }
.initiatives__head .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.initiatives__head h2 { font-family: var(--font-display); font-weight: 300; font-size: var(--step-4); line-height: 1; letter-spacing: -0.02em; margin-top: 10px; }
.initiatives__head h2 em { font-style: italic; color: var(--brass-deep); }
.initiatives__head p { font-family: var(--font-display); font-weight: 300; font-size: var(--step-1); color: var(--ink-2); max-width: 420px; }
.initiatives__list { display: grid; }
.initiatives__list article {
  display: grid; grid-template-columns: 50px 110px minmax(0, 3fr) auto;
  gap: clamp(14px, 2vw, 28px);
  padding: clamp(16px, 2.2vw, 28px) 0;
  border-bottom: var(--edge);
  align-items: baseline;
  transition: background var(--transition), padding var(--transition);
  cursor: pointer;
}
.initiatives__list article:hover { background: rgba(18,17,15,0.04); padding-left: 16px; }
.initiatives__list .n { font-family: var(--font-mono); font-size: 11px; color: var(--brass-deep); letter-spacing: 0.14em; text-transform: uppercase; }
.initiatives__list .c { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.initiatives__list .t { font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); line-height: 1.15; letter-spacing: -0.015em; }
.initiatives__list .t em { font-style: italic; color: var(--brass-deep); }
.initiatives__list .arr { font-family: var(--font-mono); font-size: 13px; }

@media (max-width: 900px) {
  .thesis { grid-template-columns: 1fr; }
  .matrix { grid-template-columns: 1fr; }
  .matrix article { border-right: none; border-bottom: var(--edge-soft); }
  .diagram { grid-template-columns: 1fr; }
  .orbit { max-width: 320px; }
  .initiatives__list article { grid-template-columns: 40px 1fr auto; }
  .initiatives__list .c { grid-column: 2; }
  .initiatives__head { grid-template-columns: 1fr; }
}

/* =========================================================
   INSIGHTS (04)
   ========================================================= */
.mast {
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 80px) var(--gutter) clamp(24px, 3vw, 40px);
  border-bottom: var(--edge);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: end;
}
.mast .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.mast h2 { font-family: var(--font-display); font-weight: 300; font-size: var(--step-4); line-height: 1; letter-spacing: -0.02em; margin-top: 12px; }
.mast h2 em { font-style: italic; color: var(--brass-deep); }
.mast p { font-family: var(--font-display); font-weight: 300; font-size: var(--step-1); line-height: 1.55; color: var(--ink-2); max-width: 52ch; }

.editorial-grid {
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(32px, 4vw, 60px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(18px, 2.4vw, 36px);
}
.essay {
  position: relative;
  padding: clamp(22px, 2.4vw, 32px) 0;
  border-top: 2px solid var(--ink);
  display: flex; flex-direction: column; gap: 14px;
  transition: color var(--transition);
}
.essay:hover { color: var(--brass-deep); }
.essay.feature {
  grid-column: span 12;
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: clamp(22px, 3vw, 48px);
  align-items: center;
}
.essay.feature .essay__fig {
  order: 2;
  width: 100%;
  max-width: 420px;
  justify-self: end;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 2px;
}
.essay.feature .essay__fig img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform 1200ms cubic-bezier(0.2,0.8,0.2,1); }
.essay.feature:hover .essay__fig img { transform: scale(1.03); }
.essay.feature .essay__text h3 { font-family: var(--font-display); font-weight: 300; font-size: clamp(30px, 3.6vw, 54px); line-height: 1.02; letter-spacing: -0.02em; }
.essay.feature .essay__text h3 em { font-style: italic; color: var(--brass-deep); }
.essay.feature .essay__text .dek { font-family: var(--font-display); font-weight: 300; font-size: var(--step-1); color: var(--ink-2); margin-top: 14px; line-height: 1.55; }

.essay.half { grid-column: span 6; }
.essay.third { grid-column: span 4; }
.essay .meta { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.essay h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); line-height: 1.15; letter-spacing: -0.015em; }
.essay h3 em { font-style: italic; color: var(--brass-deep); }
.essay .dek { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.essay .by { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-top: auto; }

@media (max-width: 900px) {
  .essay.feature { grid-template-columns: 1fr; }
  .essay.feature .essay__fig { max-width: 100%; justify-self: stretch; }
  .essay.half, .essay.third { grid-column: span 12; }
  .mast { grid-template-columns: 1fr; }
}

/* Commentary */
.commentary {
  padding: clamp(32px, 4.5vw, 72px) var(--gutter);
  border-top: var(--edge); border-bottom: var(--edge);
  background: var(--paper-2);
}
.commentary > * { max-width: 1600px; margin-left: auto; margin-right: auto; }
.commentary h2 { font-family: var(--font-display); font-weight: 300; font-size: var(--step-3); letter-spacing: -0.015em; margin-bottom: 20px; }
.commentary h2 em { font-style: italic; color: var(--brass-deep); }
.commentary__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 24px); }
.commentary__item {
  padding: clamp(18px, 2vw, 26px);
  border: var(--edge);
  background: var(--paper);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform var(--transition);
}
.commentary__item:hover { transform: translateY(-3px); }
.commentary__item .t { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-deep); }
.commentary__item blockquote { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.35; letter-spacing: -0.01em; }
.commentary__item blockquote em { font-style: italic; color: var(--brass-deep); }
.commentary__item cite { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); font-style: normal; margin-top: auto; }
@media (max-width: 900px) { .commentary__grid { grid-template-columns: 1fr; } }

/* =========================================================
   MEDIA (05)
   ========================================================= */
.media-hero {
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 80px) var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 3.5vw, 56px);
  align-items: end;
  border-bottom: var(--edge);
}
.media-hero .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.media-hero h2 { font-family: var(--font-display); font-weight: 300; font-size: var(--step-4); line-height: 1; letter-spacing: -0.02em; margin-top: 12px; }
.media-hero h2 em { font-style: italic; color: var(--brass-deep); }
.media-hero p { font-family: var(--font-display); font-weight: 300; font-size: var(--step-1); line-height: 1.55; color: var(--ink-2); max-width: 48ch; }

.interview-reel {
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(32px, 4vw, 60px) var(--gutter);
  display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(18px, 2.4vw, 32px);
}
.reel-card {
  grid-column: span 6;
  display: grid; grid-template-rows: auto 1fr;
  gap: 14px;
  border-top: 2px solid var(--ink);
  padding-top: 18px;
  transition: transform var(--transition);
}
.reel-card:hover { transform: translateY(-4px); }
.reel-card.featured { grid-column: span 12; grid-template-columns: 1fr 1fr; grid-template-rows: auto; align-items: center; gap: clamp(22px, 3vw, 48px); }
.reel-card__fig {
  aspect-ratio: 16/10;
  overflow: hidden;
  position: relative;
  background: var(--ink);
  width: 100%;
  max-width: 640px;
  border-radius: 2px;
}
.reel-card__fig img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform 1200ms cubic-bezier(0.2,0.8,0.2,1); }
.reel-card:hover .reel-card__fig img { transform: scale(1.03); }
.reel-card__fig .play {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--paper);
}
.reel-card__fig .play::after {
  content: ""; width: 56px; height: 56px;
  border: 1px solid rgba(242,237,225,0.6); border-radius: 50%;
  background: radial-gradient(circle, rgba(242,237,225,0.18), rgba(242,237,225,0.06));
  transition: transform var(--transition), background var(--transition);
}
.reel-card__fig .play b {
  position: absolute; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--paper);
}
.reel-card:hover .reel-card__fig .play::after { transform: scale(1.08); background: radial-gradient(circle, rgba(242,237,225,0.28), rgba(242,237,225,0.1)); }
.reel-card__meta { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.reel-card__title { font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); line-height: 1.15; letter-spacing: -0.015em; }
.reel-card.featured .reel-card__title { font-size: var(--step-3); font-weight: 300; }
.reel-card__title em { font-style: italic; color: var(--brass-deep); }
.reel-card__dek { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }

.press-wall {
  max-width: 1600px;
  margin: 0 auto;
  border-top: var(--edge);
  padding: clamp(32px, 4vw, 60px) var(--gutter);
}
.press-wall h2 { font-family: var(--font-display); font-weight: 300; font-size: var(--step-4); letter-spacing: -0.02em; margin-bottom: 24px; }
.press-wall h2 em { font-style: italic; color: var(--brass-deep); }
.press-wall__list { display: grid; }
.press-wall__list a {
  display: grid; grid-template-columns: 50px 180px minmax(0, 1fr) auto;
  gap: clamp(14px, 2vw, 28px);
  align-items: baseline;
  padding: clamp(14px, 1.8vw, 22px) 0;
  border-bottom: var(--edge-soft);
  transition: background var(--transition), padding var(--transition);
}
.press-wall__list a:hover { background: rgba(18,17,15,0.04); padding-left: 14px; }
.press-wall__list a:first-child { border-top: var(--edge-soft); }
.press-wall__list .n { font-family: var(--font-mono); font-size: 11px; color: var(--brass-deep); letter-spacing: 0.14em; text-transform: uppercase; }
.press-wall__list .s { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.press-wall__list .t { font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); line-height: 1.2; letter-spacing: -0.015em; }
.press-wall__list .t em { font-style: italic; color: var(--brass-deep); }
.press-wall__list .d { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }

.speaking {
  padding: clamp(32px, 4.5vw, 72px) var(--gutter);
  background: var(--ink); color: var(--paper);
}
.speaking > * { max-width: 1600px; margin-left: auto; margin-right: auto; }
.speaking__head { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; margin-bottom: 32px; }
.speaking__head .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(242,237,225,0.55); }
.speaking__head h2 { font-family: var(--font-display); font-weight: 300; font-size: var(--step-4); letter-spacing: -0.02em; margin-top: 12px; }
.speaking__head h2 em { font-style: italic; color: var(--brass); }
.speaking__head p { font-family: var(--font-display); font-weight: 300; font-size: var(--step-1); color: rgba(242,237,225,0.8); max-width: 48ch; }
.speaking__grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(242,237,225,0.2); border-bottom: 1px solid rgba(242,237,225,0.2); }
.speaking__grid article {
  padding: clamp(20px, 2.4vw, 32px) clamp(14px, 1.8vw, 24px);
  border-right: 1px solid rgba(242,237,225,0.12);
  display: flex; flex-direction: column; gap: 12px;
  min-height: 220px;
}
.speaking__grid article:last-child { border-right: none; }
.speaking__grid .d { font-family: var(--font-mono); font-size: 11px; color: var(--brass); letter-spacing: 0.14em; text-transform: uppercase; }
.speaking__grid .t { font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); line-height: 1.15; letter-spacing: -0.015em; margin-top: auto; }
.speaking__grid .t em { font-style: italic; color: var(--brass); }
.speaking__grid .loc { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(242,237,225,0.6); }

@media (max-width: 900px) {
  .media-hero { grid-template-columns: 1fr; }
  .reel-card, .reel-card.featured { grid-column: span 12; grid-template-columns: 1fr; }
  .reel-card__fig { max-width: 100%; }
  .press-wall__list a { grid-template-columns: 40px 1fr; }
  .press-wall__list .s, .press-wall__list .d { grid-column: 2; }
  .speaking__head, .speaking__grid { grid-template-columns: 1fr; }
  .speaking__grid article { border-right: none; border-bottom: 1px solid rgba(242,237,225,0.12); }
}

/* =========================================================
   GALLERY (06)
   ========================================================= */
.gallery-mast {
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 80px) var(--gutter) clamp(24px, 3vw, 40px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end;
  border-bottom: var(--edge);
}
.gallery-mast .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.gallery-mast h2 { font-family: var(--font-display); font-weight: 300; font-size: var(--step-4); letter-spacing: -0.02em; margin-top: 12px; }
.gallery-mast h2 em { font-style: italic; color: var(--brass-deep); }
.gallery-mast p { font-family: var(--font-display); font-weight: 300; font-size: var(--step-1); color: var(--ink-2); max-width: 50ch; }

.gallery-filters {
  max-width: 1600px;
  margin: 0 auto;
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 20px var(--gutter);
  border-bottom: var(--edge);
}
.gallery-filters button {
  padding: 8px 14px;
  border: var(--edge); border-radius: 999px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.gallery-filters button:hover { background: var(--ink); color: var(--paper); }
.gallery-filters button.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.mosaic {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(160px, 17vw, 220px);
  grid-auto-flow: dense;
  gap: clamp(10px, 1.2vw, 16px);
  padding: clamp(18px, 2.4vw, 32px) var(--gutter) clamp(32px, 4vw, 60px);
}
.tile {
  overflow: hidden;
  position: relative;
  background: var(--ink);
  cursor: zoom-in;
  border-radius: 2px;
}
.tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transition: transform 1200ms cubic-bezier(0.2,0.8,0.2,1), filter 500ms ease;
}
.tile:hover img { transform: scale(1.04); filter: brightness(1.04); }
.tile figcaption {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  color: var(--paper);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  display: flex; justify-content: space-between;
  mix-blend-mode: difference;
}
.tile::before {
  content: attr(data-n);
  position: absolute; top: 12px; left: 12px;
  color: var(--paper);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  z-index: 2;
  mix-blend-mode: difference;
}

/* All tiles share the same row height (span 2 rows).
   Column spans are only 3 or 6, so every row always packs to 12. */
.tile { grid-row: span 2; }
.tile.portrait  { grid-column: span 3; }
.tile.landscape { grid-column: span 6; }
.tile.square    { grid-column: span 3; }
.tile.tall      { grid-column: span 3; }
.tile.wide      { grid-column: span 6; }
.tile.hero      { grid-column: span 6; }

@media (max-width: 1100px) {
  .mosaic { grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(150px, 22vw, 200px); }
  .tile { grid-row: span 2; }
  .tile.portrait, .tile.square, .tile.tall  { grid-column: span 3; }
  .tile.landscape, .tile.wide, .tile.hero   { grid-column: span 6; }
}
@media (max-width: 600px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(160px, 34vw, 200px); }
  .tile, .tile.portrait, .tile.landscape, .tile.square, .tile.tall, .tile.wide, .tile.hero {
    grid-column: span 2; grid-row: span 2;
  }
  .gallery-mast { grid-template-columns: 1fr; }
}

/* Lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(18,17,15,0.94); z-index: 400; display: grid; place-items: center; padding: 5vh 5vw; opacity: 0; pointer-events: none; transition: opacity 300ms ease; }
.lightbox.is-on { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 100%; max-height: 82vh; object-fit: contain; }
.lightbox__close { position: absolute; top: 18px; right: 22px; color: var(--paper); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.lightbox__close::after { content: ""; width: 12px; height: 12px; background: linear-gradient(45deg, transparent calc(50% - 1px), var(--paper) 50%, transparent calc(50% + 1px)), linear-gradient(-45deg, transparent calc(50% - 1px), var(--paper) 50%, transparent calc(50% + 1px)); }
.lightbox__nav { position: absolute; bottom: 18px; left: 22px; right: 22px; display: flex; justify-content: space-between; color: var(--paper); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.lightbox__nav button { color: var(--paper); }

/* =========================================================
   CONTACT (07)
   ========================================================= */
.contact-hero {
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 80px) var(--gutter) clamp(28px, 3.5vw, 56px);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 3.5vw, 60px); align-items: end;
  border-bottom: var(--edge);
}
.contact-hero .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.contact-hero h2 { font-family: var(--font-display); font-weight: 300; font-size: var(--step-4); line-height: 1; letter-spacing: -0.02em; margin-top: 12px; }
.contact-hero h2 em { font-style: italic; color: var(--brass-deep); }
.contact-hero p { font-family: var(--font-display); font-weight: 300; font-size: var(--step-1); line-height: 1.55; color: var(--ink-2); max-width: 50ch; }

.contact-grid {
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(32px, 4.5vw, 80px) var(--gutter);
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: clamp(28px, 3.5vw, 60px);
}
.contact-card {
  border: var(--edge);
  padding: clamp(22px, 2.6vw, 36px);
  background: var(--paper-2);
  display: grid; gap: 20px;
  align-content: start;
  position: relative;
}
.contact-card::before {
  content: ""; position: absolute; inset: 8px; border: 1px solid rgba(18,17,15,0.06); pointer-events: none;
}
.contact-card .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.contact-card h3 { font-family: var(--font-display); font-weight: 300; font-size: var(--step-3); line-height: 1.1; letter-spacing: -0.02em; }
.contact-card h3 em { font-style: italic; color: var(--brass-deep); }
.contact-card .fields { display: grid; gap: 12px; }
.contact-card .field { display: grid; gap: 4px; }
.contact-card .field label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.contact-card .field input,
.contact-card .field textarea {
  width: 100%;
  background: transparent;
  border: none; border-bottom: 1px solid rgba(18,17,15,0.2);
  padding: 6px 0;
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 300;
  color: var(--ink);
  transition: border-color var(--transition);
}
.contact-card .field input:focus,
.contact-card .field textarea:focus { outline: none; border-color: var(--brass-deep); }
.contact-card .field textarea { resize: vertical; min-height: 88px; }
.contact-card button[type=submit] {
  justify-self: start;
  background: var(--ink); color: var(--paper);
  padding: 12px 24px;
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background var(--transition), color var(--transition);
}
.contact-card button[type=submit]:hover { background: var(--brass); color: var(--ink); }

.contact-card .note {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
}

.contact-directory {
  display: grid; gap: clamp(24px, 2.6vw, 36px);
  align-content: start;
}
.contact-directory__block {
  padding: clamp(18px, 2.4vw, 32px) 0;
  border-top: var(--edge);
  display: grid; gap: 8px;
}
.contact-directory__block:last-child { border-bottom: var(--edge); }
.contact-directory__block .l { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.contact-directory__block a { font-family: var(--font-display); font-weight: 300; font-size: var(--step-3); line-height: 1.1; letter-spacing: -0.015em; transition: color var(--transition); }
.contact-directory__block a:hover { color: var(--brass-deep); font-style: italic; }
.contact-directory__block .who { font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); letter-spacing: -0.015em; color: var(--ink-2); }
.contact-directory__social { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.contact-directory__social a {
  width: 36px; height: 36px; border: var(--edge); border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.contact-directory__social a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.contact-directory__social svg { width: 12px; height: 12px; fill: currentColor; }

@media (max-width: 900px) {
  .contact-hero, .contact-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   LEGACY (08)
   ========================================================= */
.legacy-hero {
  padding: clamp(40px, 5vw, 80px) var(--gutter);
  background: var(--ink); color: var(--paper);
  position: relative;
  overflow: hidden;
}
.legacy-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(50% 50% at 70% 20%, rgba(182,148,90,0.16), transparent 70%),
    radial-gradient(60% 60% at 10% 90%, rgba(12,42,61,0.35), transparent 70%);
  pointer-events: none;
}
.legacy-hero__wrap { max-width: 1600px; margin: 0 auto; position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 3.5vw, 64px); align-items: end; }
.legacy-hero .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); }
.legacy-hero h2, .legacy-hero h1 { font-family: var(--font-display); font-weight: 300; font-size: var(--step-6); line-height: 0.96; letter-spacing: -0.025em; margin-top: 12px; color: var(--paper); }
.legacy-hero h2 em, .legacy-hero h1 em { font-style: italic; color: var(--brass); }
.legacy-hero p { font-family: var(--font-display); font-weight: 300; font-size: var(--step-1); color: rgba(242,237,225,0.8); max-width: 48ch; }

.pillar-legacy {
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 80px) var(--gutter);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3vw, 56px);
  border-top: var(--edge);
}
.pillar-legacy article {
  display: grid; grid-template-columns: 50px 1fr; gap: clamp(14px, 1.8vw, 24px);
  padding: 22px 0;
  border-top: var(--edge-soft);
}
.pillar-legacy article .n { font-family: var(--font-mono); font-size: 11px; color: var(--brass-deep); letter-spacing: 0.14em; text-transform: uppercase; }
.pillar-legacy article h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); line-height: 1.15; letter-spacing: -0.015em; }
.pillar-legacy article h3 em { font-style: italic; color: var(--brass-deep); }
.pillar-legacy article p { margin-top: 8px; color: var(--ink-soft); font-size: 14px; line-height: 1.55; }

.forward {
  padding: clamp(36px, 4.5vw, 80px) var(--gutter);
  background: var(--paper-2);
  border-top: var(--edge); border-bottom: var(--edge);
}
.forward__inner {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(28px, 3.5vw, 60px);
  align-items: center;
}
.forward__fig {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: 2px;
}
.forward__fig img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.forward__text .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.forward__text h2 { font-family: var(--font-display); font-weight: 300; font-size: var(--step-4); line-height: 1; letter-spacing: -0.02em; margin-top: 12px; }
.forward__text h2 em { font-style: italic; color: var(--brass-deep); }
.forward__text p { margin-top: 16px; font-family: var(--font-display); font-weight: 300; font-size: var(--step-1); line-height: 1.55; color: var(--ink-2); max-width: 54ch; }
.forward__text p + p { margin-top: 12px; }

@media (max-width: 900px) {
  .legacy-hero__wrap { grid-template-columns: 1fr; }
  .pillar-legacy { grid-template-columns: 1fr; }
  .forward__inner { grid-template-columns: 1fr; }
  .forward__fig { max-width: 320px; }
}