/* The DarkHorse Syndicate — V1 stylesheet
   Palette and type follow the Master Brief, Part IX §32.
   Dark shell. Parchment interior. Oxblood only where a decision is asked for. */

:root {
  --black: #171412;      /* warm black */
  --charcoal: #26221F;
  --steel: #3A342F;      /* oxidized metal, hairlines on dark */
  --stone: #8A8279;
  --stone-light: #B9B0A4;
  --bone: #E9E2D6;
  --parchment: #EDE4D6;
  --parchment-deep: #E2D7C5;
  --walnut: #4A3428;
  --oxblood: #5E1F22;
  --oxblood-deep: #47171A;

  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --measure: 34rem;   /* prose measure, ~66ch in Newsreader */
  --wide: 72rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.5625rem;
  --step-3: 2rem;
  --step-4: clamp(2.5rem, 4.5vw, 3.75rem);
  --step-5: clamp(2.6rem, 5.6vw, 5rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
[id] { scroll-margin-top: 5.5rem; }
.skip { position: absolute; left: 1rem; top: -3rem; z-index: 50; background: var(--bone); color: var(--black); font-family: var(--sans); font-size: var(--step--1); padding: 0.6rem 0.9rem; text-decoration: none; }
.skip:focus { top: 1rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--black);
  color: var(--bone);
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.55;
  font-feature-settings: "kern", "liga", "onum";
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-color: var(--stone); text-underline-offset: 0.16em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--stone-light); outline-offset: 3px; }
.on-light :focus-visible, .light :focus-visible { outline-color: var(--walnut); }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 500; }
em { font-style: italic; }

/* ---------- Layout ---------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; }
.measure { max-width: var(--measure); }
.section { padding-block: clamp(4rem, 9vw, 8rem); }
.section + .section { border-top: 1px solid var(--steel); }
.light .section + .section, .section.light + .section.light { border-top-color: var(--parchment-deep); }

.light { background: var(--parchment); color: var(--black); }
.light a { text-decoration-color: var(--walnut); }
.light .lede { color: var(--charcoal); }
.deep { background: var(--charcoal); }
.walnut { background: var(--walnut); color: var(--bone); }

.grid { display: grid; gap: clamp(2rem, 4vw, 4rem); }
@media (min-width: 52em) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-aside { grid-template-columns: minmax(0, 18rem) minmax(0, var(--measure)); }
  .grid-aside.reverse { grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr); }
}

/* ---------- Type roles ---------- */
.display {
  font-size: var(--step-5);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
  max-width: 30ch;
}
.title { font-size: var(--step-4); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; max-width: 24ch; }
.h2 { font-size: var(--step-3); line-height: 1.15; text-wrap: balance; max-width: 26ch; }
.h3 { font-size: var(--step-2); line-height: 1.2; }
.h4 { font-size: var(--step-1); line-height: 1.3; }

.lede { font-size: var(--step-1); line-height: 1.5; color: var(--stone-light); max-width: var(--measure); }
.light .lede { color: var(--charcoal); }
.small { font-family: var(--sans); font-size: var(--step--1); line-height: 1.5; }
.muted { color: var(--stone); }
.light .muted { color: #6B625A; }

.kicker {
  font-family: var(--sans);
  font-size: var(--step--1);
  line-height: 1.4;
  color: var(--stone);
  margin-bottom: 1.25rem;
  max-width: var(--measure);
}
.light .kicker { color: #6B625A; }

.stack > * + * { margin-top: 1em; }
.stack-lg > * + * { margin-top: 2rem; }

/* Statements: the brief's pull-quotes, set as full-weight paragraphs, not decorated blockquotes */
.statement {
  font-size: var(--step-2);
  line-height: 1.3;
  letter-spacing: -0.012em;
  text-wrap: pretty;
  max-width: 30ch;
  margin: 0;
}
.statement.lg { font-size: var(--step-3); line-height: 1.2; }

/* Plain lists in prose */
.list { margin: 0; padding: 0; list-style: none; max-width: var(--measure); }
.list li { padding: 0.75rem 0; border-top: 1px solid var(--steel); }
.list li:last-child { border-bottom: 1px solid var(--steel); }
.light .list li { border-color: var(--parchment-deep); }
.list.tight li { padding: 0.45rem 0; }

/* Two-column "this, not that" pairs */
.pairs { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; max-width: var(--measure); }
.pairs li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.3fr); gap: 0.75rem; align-items: baseline;
  padding: 0.6rem 0; border-top: 1px solid var(--steel);
}
.pairs li:last-child { border-bottom: 1px solid var(--steel); }
.pairs li span:first-child { text-align: right; }
.pairs li span:last-child { text-align: left; }
.pairs li span:nth-child(2) { font-family: var(--sans); font-size: var(--step--1); color: var(--stone); }
.pairs li span:last-child { color: var(--stone-light); }
.light .pairs li { border-color: var(--parchment-deep); }
.light .pairs li span:last-child { color: #6B625A; }

/* Numbered steps — used only for genuine sequences (the methodology) */
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; max-width: var(--measure); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--parchment-deep); }
.steps li:last-child { border-bottom: 1px solid var(--parchment-deep); }
.steps li::before { content: counter(step); font-family: var(--sans); font-size: var(--step--1); color: #6B625A; padding-top: 0.35em; }
.steps h3 { font-size: var(--step-1); margin-bottom: 0.2em; }

/* Definition rows — label / value */
.rows { margin: 0; max-width: var(--measure); }
.rows div { display: grid; grid-template-columns: minmax(7rem, 10rem) 1fr; gap: 1rem; padding: 0.7rem 0; border-top: 1px solid var(--parchment-deep); }
.rows div:last-child { border-bottom: 1px solid var(--parchment-deep); }
.rows dt { font-family: var(--sans); font-size: var(--step--1); color: #6B625A; padding-top: 0.2em; }
.rows dd { margin: 0; }
.dark .rows div, .deep .rows div { border-color: var(--steel); }
.dark .rows dt, .deep .rows dt { color: var(--stone); }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.01em;
  display: inline-block;
  padding: 0.85rem 1.35rem;
  border: 1px solid currentColor;
  text-decoration: none;
  color: var(--bone);
  background: transparent;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.btn:hover { background: var(--bone); color: var(--black); }
.light .btn { color: var(--black); }
.light .btn:hover { background: var(--black); color: var(--bone); }
.btn-apply { background: var(--oxblood); border-color: var(--oxblood); color: var(--bone); }
.btn-apply:hover { background: var(--oxblood-deep); border-color: var(--oxblood-deep); color: var(--bone); }
.light .btn-apply { color: var(--bone); }
.light .btn-apply:hover { background: var(--oxblood-deep); color: var(--bone); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; }
.textlink { font-family: var(--sans); font-size: var(--step--1); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--black) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--steel);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 4.25rem; gap: 1rem; }
.wordmark {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-decoration: none;
  color: var(--bone);
}
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); }
.nav a { font-family: var(--sans); font-size: var(--step--1); text-decoration: none; color: var(--stone-light); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--bone); }
.nav .btn { padding: 0.55rem 1rem; }
.nav-toggle { display: none; background: none; border: 1px solid var(--steel); color: var(--bone); font-family: var(--sans); font-size: var(--step--1); padding: 0.5rem 0.8rem; cursor: pointer; }
@media (max-width: 52em) {
  .nav-toggle { display: inline-block; }
  .nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: flex-start; gap: 0;
         background: var(--black); border-bottom: 1px solid var(--steel); padding: 0.5rem var(--gutter) 1.25rem; display: none; }
  .nav.open { display: flex; }
  .nav a { padding: 0.8rem 0; font-size: var(--step-0); width: 100%; border-bottom: 1px solid var(--steel); }
  .nav a:last-child { border-bottom: 0; }
  .nav .btn { margin-top: 1rem; width: auto; padding: 0.75rem 1.25rem; border: 1px solid var(--oxblood); }
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(4rem, 9vw, 7rem) clamp(4rem, 8vw, 6rem); }
.hero .wrap { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: end; }
@media (min-width: 60em) { .hero .wrap { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.hero .display { max-width: none; font-size: clamp(2.5rem, 4.4vw, 4.5rem); }
.hero-text { min-width: 0; }
.hero .photo { aspect-ratio: 4 / 5; }
@media (max-width: 60em) { .hero .photo.tall { aspect-ratio: 16 / 10; order: -1; } }
.hero .display { margin-bottom: 2rem; }
.hero .lede { margin-bottom: 2.5rem; }
.hero .line { display: inline; }
@media (prefers-reduced-motion: no-preference) {
  .hero .line { opacity: 0; animation: fade 900ms ease forwards; }
  .hero .line:nth-child(2) { animation-delay: 220ms; }
  .hero .line:nth-child(3) { animation-delay: 440ms; }
  .hero .after { opacity: 0; animation: fade 900ms ease 900ms forwards; }
  @keyframes rise { to { opacity: 1; transform: none; } }
  @keyframes fade { to { opacity: 1; } }
}

/* Page heads on inner pages */
.page-head { padding-block: clamp(4rem, 10vw, 8rem) clamp(3rem, 7vw, 5rem); }
.page-head .kicker { margin-bottom: 1.5rem; }
.page-head .lede { margin-top: 1.5rem; }

/* ---------- Photos (placeholders until the documentary production — Brief §64) ---------- */
.photo { position: relative; margin: 0; overflow: hidden; background: var(--charcoal); border: 1px solid var(--steel); }
.photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) sepia(0.28) contrast(1.05) brightness(0.92); }
.photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,20,18,0) 55%, rgba(23,20,18,0.35)); pointer-events: none; }
.light .photo { border-color: var(--parchment-deep); }
.light .photo::after { background: linear-gradient(180deg, rgba(74,52,40,0) 60%, rgba(74,52,40,0.18)); }
.photo.tall { aspect-ratio: 4 / 5; }
.photo.wide { aspect-ratio: 16 / 9; }
.photo.band { aspect-ratio: 21 / 9; }
.photo figcaption { position: absolute; left: 1rem; bottom: 0.9rem; right: 1rem; font-family: var(--sans); font-size: 0.75rem; color: var(--bone); opacity: 0.85; }

/* ---------- Legacy empty slots ---------- */
.slot {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(120% 80% at 20% 10%, rgba(255,255,255,0.05), transparent 60%),
    linear-gradient(160deg, var(--charcoal), var(--black));
  border: 1px solid var(--steel);
  overflow: hidden;
}
.slot.wide { aspect-ratio: 16 / 10; }
.slot::after {
  content: ""; position: absolute; inset: 0; opacity: 0.35; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.55 0 0 0 0 0.5 0 0 0 0.9 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}
.slot figcaption { position: absolute; left: 1rem; bottom: 1rem; right: 1rem; font-family: var(--sans); font-size: 0.75rem; color: var(--stone); }
.light .slot { border-color: var(--parchment-deep); background: linear-gradient(160deg, #D8CBB6, var(--parchment-deep)); }
.light .slot figcaption { color: #6B625A; }

.band-section { padding-block: 0; }
.band-section .photo { border-left: 0; border-right: 0; }

/* ---------- Offers ---------- */
.offer { padding-top: 1.5rem; border-top: 1px solid var(--black); }
.offer .h3 { margin-bottom: 0.35rem; }
.offer .object { font-family: var(--sans); font-size: var(--step--1); color: #6B625A; margin-bottom: 1.25rem; }
.offer .price { font-family: var(--sans); font-size: var(--step--1); margin: 1.25rem 0; color: var(--black); }
.offer p { max-width: 36ch; }

/* ---------- Journal ---------- */
.entries { margin: 0; padding: 0; list-style: none; }
.entries li { padding: 2rem 0; border-top: 1px solid var(--parchment-deep); display: grid; gap: 1.25rem 2.5rem; align-items: start; }
@media (min-width: 52em) { .entries li { grid-template-columns: 14rem 1fr; } }
.entries .photo { aspect-ratio: 4 / 3; }
.entries li:last-child { border-bottom: 1px solid var(--parchment-deep); }
.entries h3 { font-size: var(--step-2); line-height: 1.2; max-width: 26ch; margin-bottom: 0.5rem; }
.entries h3 a { text-decoration: none; }
.entries h3 a:hover { text-decoration: underline; }
.entries p { max-width: var(--measure); }
.entries .small { margin-top: 0.75rem; }

/* ---------- Forms ---------- */
form { font-family: var(--sans); }
.field { display: grid; gap: 0.5rem; margin-bottom: 1.75rem; max-width: var(--measure); }
.field label, .field legend { font-size: var(--step--1); color: var(--black); }
.field .hint { font-size: var(--step--1); color: #6B625A; }
input[type="text"], input[type="email"], input[type="url"], textarea, select {
  font: inherit; font-size: var(--step-0);
  width: 100%; padding: 0.8rem 0.9rem;
  background: #F6F0E6; color: var(--black);
  border: 1px solid #C9BDA9; border-radius: 0;
}
textarea { min-height: 7.5rem; resize: vertical; }
::placeholder { color: #8A8279; opacity: 1; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--black) 50%), linear-gradient(135deg, var(--black) 50%, transparent 50%); background-position: calc(100% - 1.25rem) 1.2rem, calc(100% - 0.85rem) 1.2rem; background-size: 0.4rem 0.4rem; background-repeat: no-repeat; padding-right: 2.5rem; }
.on-dark input[type="email"] { background: var(--charcoal); color: var(--bone); border-color: var(--steel); }
.on-dark input:focus { outline-color: var(--stone-light); border-color: var(--stone-light); }
.on-dark ::placeholder { color: var(--stone); }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--walnut); outline-offset: 1px; border-color: var(--walnut); }
fieldset { border: 0; margin: 0; padding: 0; }
.choices { display: grid; gap: 0.5rem; }
.choices label { display: flex; gap: 0.75rem; align-items: flex-start; font-size: var(--step-0); font-family: var(--serif); padding: 0.75rem 0.9rem; border: 1px solid #C9BDA9; background: #F6F0E6; cursor: pointer; }
.choices input { margin-top: 0.3em; accent-color: var(--oxblood); }
.choices label:has(:checked) { border-color: var(--black); }
.inline-form { display: flex; flex-wrap: wrap; gap: 0.75rem; max-width: var(--measure); }
.inline-form input { flex: 1 1 16rem; }
.inline-form .btn { flex: 0 0 auto; }
.field-inline { display: none; }

/* ---------- Footer ---------- */
.site-footer { background: var(--black); color: var(--stone-light); border-top: 1px solid var(--steel); padding-block: 3.5rem 2.5rem; font-family: var(--sans); font-size: var(--step--1); }
.site-footer .grid { gap: 2rem; }
@media (min-width: 52em) { .site-footer .grid { grid-template-columns: 2fr 1fr 1fr; } }
.site-footer a { text-decoration: none; color: var(--stone-light); }
.site-footer a:hover { color: var(--bone); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.site-footer .wordmark { margin-bottom: 1rem; display: inline-block; }
.site-footer .legal { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--steel); color: var(--stone); font-size: 0.8rem; display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between; }
.site-footer .legal p { margin: 0; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== Layout variety (UX pass 2) ===== */

/* Tonal alternation inside the light interior */
.light.tone { background: var(--parchment-deep); }
.light.tone + .light.tone, .light.tone + .light, .light + .light.tone { border-top-color: #D3C6B1; }

/* A. Full-bleed statement: one line, very large, centered, nothing beside it */
.layout-statement .wrap { text-align: center; display: grid; justify-items: center; gap: 2rem; }
.layout-statement .statement { max-width: 24ch; font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1.12; }
.layout-statement .lede, .layout-statement p { text-align: left; }
.layout-statement .body { max-width: var(--measure); text-align: left; }
.layout-statement .pairs { justify-self: stretch; width: 100%; }

/* B. Heading on top, content split into two reading columns */
.layout-split .head { margin-bottom: clamp(2rem, 4vw, 3.5rem); max-width: var(--wide); }
.layout-split .cols { display: grid; gap: clamp(2rem, 5vw, 5rem); }
@media (min-width: 52em) { .layout-split .cols { grid-template-columns: 1fr 1fr; } }
.layout-split .cols > div > * + * { margin-top: 1em; }
.layout-split .h4 { margin-bottom: 0.5rem; }

/* C. Big serif list in two columns (contradictions) */
.list.cols { max-width: none; display: grid; gap: 0 4rem; }
@media (min-width: 52em) { .list.cols { grid-template-columns: 1fr 1fr; } .list.cols li:nth-child(2) { border-top: 1px solid var(--steel); } }
.list.cols li { border-top: 1px solid var(--steel); border-bottom: 0; padding: 0.9rem 0; font-size: var(--step-1); line-height: 1.35; }
.list.cols li:last-child { border-bottom: 0; }

/* D. Horizontal steps */
.steps.row { max-width: none; display: grid; gap: 2rem 2.5rem; }
@media (min-width: 52em) { .steps.row { grid-template-columns: repeat(5, 1fr); } }
.steps.row li { display: block; padding: 1.25rem 0 0; border-top: 2px solid var(--black); border-bottom: 0; }
.steps.row li::before { display: block; margin-bottom: 1.25rem; font-size: var(--step-0); color: var(--black); }
.steps.row h3 { font-size: var(--step-1); line-height: 1.25; margin-bottom: 0.6rem; }
.steps.row p { font-size: var(--step--1); font-family: var(--sans); line-height: 1.55; color: #55493F; }
.light .steps.row li { border-top-color: var(--black); }

/* E. Figure-led section: image big on one side, prose stacked, facts below in two columns */
.layout-figure { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (min-width: 60em) { .layout-figure { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.layout-figure .photo { position: sticky; top: 6rem; }
.layout-figure .rows { max-width: none; }
.layout-figure .rows div { grid-template-columns: 1fr; gap: 0.25rem; padding: 1rem 0; }

/* F. Definition rows as a fact panel */
.panel { background: rgba(23,20,18,0.035); border: 1px solid var(--parchment-deep); padding: clamp(1.25rem, 3vw, 2.25rem); }
.light.tone .panel { background: rgba(255,255,255,0.28); border-color: #CDBFA9; }
.panel .rows { max-width: none; }
.panel.stack-lg { max-width: none; }
@media (min-width: 52em) { .grid-aside:has(> .panel) { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); } }
.panel .rows div:first-child { border-top: 0; }
.panel .rows div:last-child { border-bottom: 0; }
.rows.two { display: grid; gap: 0 3rem; }
.rows.two div { border-bottom: 1px solid var(--parchment-deep); }
@media (min-width: 52em) { .rows.two { grid-template-columns: 1fr 1fr; } .rows.two div:nth-child(2) { border-top: 1px solid var(--parchment-deep); } }

/* G. Offers as three tall panels */
.offers { display: grid; gap: 1px; background: var(--parchment-deep); border: 1px solid var(--parchment-deep); }
@media (min-width: 52em) { .offers { grid-template-columns: repeat(3, 1fr); } }
.offers .offer { background: var(--parchment); border-top: 0; padding: clamp(1.5rem, 3vw, 2.5rem); display: flex; flex-direction: column; gap: 0; }
.offers .offer .h3 { font-size: var(--step-2); }
.offers .offer p { max-width: none; }
.offers .offer .price { margin-top: auto; padding-top: 1.5rem; border-top: 1px solid var(--parchment-deep); }
.offers .offer .textlink { margin-top: 1rem; }

/* H. Before / After diptych */
.diptych { display: grid; gap: 1px; background: var(--steel); border: 1px solid var(--steel); }
@media (min-width: 52em) { .diptych { grid-template-columns: 1fr 1fr; } }
.diptych > div { background: var(--charcoal); padding: clamp(1.5rem, 4vw, 3rem); }
.diptych .h3 { max-width: 20ch; font-size: var(--step-3); line-height: 1.15; }
.light .diptych { background: var(--parchment-deep); border-color: var(--parchment-deep); }
.light .diptych > div { background: var(--parchment); }

/* I. Distinctions as a wide two-column grid */
.pairs.grid2 { max-width: none; grid-template-columns: 1fr; }
@media (min-width: 52em) { .pairs.grid2 { grid-template-columns: 1fr 1fr; column-gap: 4rem; } .pairs.grid2 li:nth-child(2) { border-top: 1px solid var(--steel); } .light .pairs.grid2 li:nth-child(2) { border-top-color: var(--parchment-deep); } }
.pairs.grid2 li { font-size: var(--step-1); }

/* J. Inner page head with image beside */
.page-head.with-figure .wrap { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: end; }
@media (min-width: 60em) { .page-head.with-figure .wrap { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.page-head.with-figure .photo.tall { aspect-ratio: 4 / 5; }
@media (max-width: 60em) { .page-head.with-figure .photo.tall { aspect-ratio: 16 / 9; } }

/* K. Boundary / "what it is not" as a quiet dark inset on light pages */
.light .inset { background: var(--black); color: var(--bone); padding: clamp(2rem, 5vw, 4rem); }
.light .inset a { text-decoration-color: var(--stone); }
.light .inset .h2 { color: var(--bone); }
.light .inset .muted { color: var(--stone-light); }

/* L. Closing action strip */
.closing .wrap { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 52em) { .closing .wrap { grid-template-columns: 1fr auto; } }
.closing .lede { margin: 0; }

/* =====================================================================
   PREMIUM PASS — space over lines, scale over decoration, texture over flat
   ===================================================================== */

:root {
  --wide: 84rem;
  --gutter: clamp(1.5rem, 6vw, 6rem);
  --measure: 36rem;
  --step-4: clamp(2.75rem, 5.2vw, 4.75rem);
  --step-5: clamp(2.9rem, 6.4vw, 6.25rem);
  --hair: rgba(233,226,214,0.14);       /* hairline on dark */
  --hair-light: rgba(23,20,18,0.12);    /* hairline on light */
}

body { font-optical-sizing: auto; text-rendering: optimizeLegibility; hanging-punctuation: first last; line-height: 1.6; }
h1, h2, h3, .display, .title, .h2, .statement { font-weight: 300; }
.display { letter-spacing: -0.032em; line-height: 0.98; }
.title { letter-spacing: -0.028em; line-height: 1.02; }
.h2 { letter-spacing: -0.02em; line-height: 1.1; max-width: 22ch; }
.statement { letter-spacing: -0.02em; }
.h3, .h4 { font-weight: 400; }
.lede { line-height: 1.55; }
a { text-decoration-thickness: 1px; text-underline-offset: 0.22em; }

/* Texture on dark surfaces */
body.dark, .deep, .inset, .site-footer, .section:not(.light) { position: relative; }
.grain::before, body.dark > main > .section:not(.light)::before, .deep::before, .light .inset::before, .site-footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.22; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.9'/></svg>");
}
.section > .wrap { position: relative; }

/* Rhythm */
.section { padding-block: clamp(5rem, 11vw, 10rem); }
.section + .section { border-top-color: var(--hair); }
.light .section + .section, .section.light + .section.light { border-top-color: var(--hair-light); }
.light.tone + .light.tone, .light.tone + .light, .light + .light.tone { border-top-color: var(--hair-light); }
.hero { padding-block: clamp(5rem, 10vw, 8rem) clamp(5rem, 9vw, 7rem); }
.page-head { padding-block: clamp(5rem, 11vw, 9rem) clamp(4rem, 8vw, 6rem); }

/* Header — thinner, airier */
.site-header { background: color-mix(in srgb, var(--black) 82%, transparent); border-bottom-color: var(--hair); }
.site-header .wrap { min-height: 5rem; }
.wordmark { font-size: 0.9rem; letter-spacing: 0.26em; font-weight: 500; }
.nav { gap: clamp(1.25rem, 2.8vw, 2.5rem); }
.nav a { font-size: 0.8125rem; letter-spacing: 0.04em; }
.nav .btn { padding: 0.6rem 1.15rem; font-size: 0.8125rem; letter-spacing: 0.06em; }

/* Kickers: a short rule instead of a label sitting alone */
.kicker { display: flex; align-items: center; gap: 0.75rem; font-size: 0.8125rem; letter-spacing: 0.04em; margin-bottom: 1.75rem; }
.kicker::before { content: ""; width: 2rem; height: 1px; background: currentColor; opacity: 0.6; }
.layout-statement .kicker { justify-content: center; }

/* Buttons — slower, quieter, more deliberate */
.btn { padding: 1rem 1.75rem; letter-spacing: 0.06em; font-weight: 500; transition: background-color 320ms ease, color 320ms ease, border-color 320ms ease; }
.btn-apply { background: var(--oxblood); }
.actions { gap: 1rem 1.5rem; }

/* Lists — hairlines lighter, rows taller */
.list li, .list.cols li { border-color: var(--hair); padding: 1.1rem 0; }
.light .list li, .light .list.cols li { border-color: var(--hair-light); }
.pairs li, .pairs.grid2 li { border-color: var(--hair); padding: 0.9rem 0; }
.light .pairs li { border-color: var(--hair-light); }

/* Definition rows — no boxes; generous rows; value in serif */
.rows div { padding: 1.1rem 0; border-color: var(--hair-light); }
.rows dt { letter-spacing: 0.03em; }
.rows dd { font-size: var(--step-0); }
.panel { background: transparent; border: 0; padding: 0; }
.light.tone .panel { background: transparent; border: 0; }
.panel .rows div:first-child { border-top: 1px solid var(--hair-light); }
.panel .rows div:last-child { border-bottom: 1px solid var(--hair-light); }
.rows.two div { border-color: var(--hair-light); }

/* Steps — remove heavy rules */
.steps li { border-color: var(--hair-light); padding: 1.25rem 0; }
.steps.row li { border-top: 1px solid var(--hair-light); padding-top: 1.5rem; }
.steps.row li::before { font-size: var(--step-1); color: var(--black); opacity: 0.5; }
.steps.row h3 { font-size: var(--step-1); }
.steps.row p { color: #4E443B; }

/* Offers — columns, not cards */
.offers { gap: clamp(2.5rem, 5vw, 5rem); background: transparent; border: 0; }
.offers .offer { background: transparent; padding: 2rem 0 0; border-top: 1px solid var(--hair-light); }
.offers .offer .h3 { font-size: var(--step-3); letter-spacing: -0.02em; margin-bottom: 0.75rem; }
.offers .offer .object { margin-bottom: 1.75rem; }
.offers .offer .price { border-top: 0; padding-top: 2rem; font-family: var(--serif); font-size: var(--step-1); color: var(--black); }
.offers .offer .textlink { margin-top: 1.25rem; }

/* Diptych — two columns divided by a single hairline */
.diptych { gap: 0; background: transparent; border: 0; border-top: 1px solid var(--hair-light); border-bottom: 1px solid var(--hair-light); }
.diptych > div { background: transparent; padding: clamp(2rem, 4vw, 3.5rem) 0; }
@media (min-width: 52em) {
  .diptych > div:first-child { padding-right: clamp(2rem, 4vw, 4rem); }
  .diptych > div:last-child { padding-left: clamp(2rem, 4vw, 4rem); border-left: 1px solid var(--hair-light); }
}
.diptych .h3 { font-size: var(--step-4); line-height: 1.02; letter-spacing: -0.025em; max-width: 16ch; }
.light .diptych { background: transparent; }
.light .diptych > div { background: transparent; }

/* Inset — full-bleed dark band, not a box */
.light .inset { padding: clamp(5rem, 11vw, 10rem) var(--gutter); margin-inline: calc(-1 * var(--gutter)); width: auto; }
.light .inset > * { position: relative; }
@media (min-width: 84rem) {
  .light .inset { margin-inline: calc((100vw - var(--wide)) / -2); padding-inline: calc((100vw - var(--wide)) / 2); }
}
.section:has(> .wrap > .inset) { padding-block: 0; }
.light .inset .h2 { font-weight: 300; }

/* Images — cinematic and, where possible, edge-to-edge */
.photo { border: 0; }
.photo::after { background: linear-gradient(180deg, rgba(23,20,18,0) 60%, rgba(23,20,18,0.28)); }
.photo figcaption { font-size: 0.6875rem; letter-spacing: 0.04em; opacity: 0.7; }
.photo.band { aspect-ratio: 21 / 8; }
.band-section .photo { margin-inline: calc(-1 * var(--gutter)); }
@media (min-width: 84rem) { .band-section .photo { margin-inline: calc((100vw - var(--wide)) / -2); } }
.band-section { border-top: 0 !important; }
.hero .photo.tall { aspect-ratio: 3 / 4; }
@media (min-width: 60em) {
  .hero .wrap { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; }
  .hero .photo.tall { margin-right: calc(-1 * var(--gutter)); }
}
@media (min-width: 84rem) { .hero .photo.tall { margin-right: calc((100vw - var(--wide)) / -2); } }
.layout-figure .photo { top: 7rem; }
.layout-figure .photo.tall { aspect-ratio: 3 / 4; }
@media (min-width: 60em) { .layout-figure .photo { margin-left: calc(-1 * var(--gutter)); } }
@media (min-width: 84rem) { .layout-figure .photo { margin-left: calc((100vw - var(--wide)) / -2); } }
.page-head.with-figure .photo.tall { aspect-ratio: 3 / 4; }
@media (min-width: 60em) { .page-head.with-figure .photo.tall { margin-right: calc(-1 * var(--gutter)); } }
@media (min-width: 84rem) { .page-head.with-figure .photo.tall { margin-right: calc((100vw - var(--wide)) / -2); } }
.entries .photo { aspect-ratio: 4 / 3; }

/* Journal entries — more air */
.entries li { padding: 3rem 0; border-color: var(--hair-light); }
.entries li:last-child { border-bottom-color: var(--hair-light); }
.entries h3 { font-size: var(--step-3); font-weight: 300; letter-spacing: -0.02em; }

/* Forms — underline fields, larger type */
input[type="text"], input[type="email"], input[type="url"], textarea, select {
  background: transparent; border: 0; border-bottom: 1px solid rgba(23,20,18,0.35); padding: 0.85rem 0; font-size: var(--step-1); font-family: var(--serif);
}
textarea { min-height: 6.5rem; }
input:focus, textarea:focus, select:focus { outline: 0; border-bottom-color: var(--black); box-shadow: 0 1px 0 0 var(--black); }
.field { margin-bottom: 2.75rem; }
.field label, .field legend { letter-spacing: 0.03em; margin-bottom: 0.25rem; }
.choices { gap: 0; border-top: 1px solid var(--hair-light); }
.choices label { background: transparent; border: 0; border-bottom: 1px solid var(--hair-light); padding: 1rem 0; font-size: var(--step-1); }
.choices label:has(:checked) { border-color: var(--hair-light); color: var(--black); }
.choices input { width: 1.1rem; height: 1.1rem; margin-top: 0.45em; }
select { background-position: calc(100% - 0.6rem) 1.25rem, calc(100% - 0.2rem) 1.25rem; padding-right: 1.75rem; }
.on-dark input[type="email"] { background: transparent; border: 0; border-bottom: 1px solid rgba(233,226,214,0.4); color: var(--bone); }
.on-dark input:focus { border-bottom-color: var(--bone); box-shadow: 0 1px 0 0 var(--bone); }
.inline-form { align-items: flex-end; gap: 1.25rem 2rem; }

/* Closing strip */
.closing { padding-block: clamp(5rem, 11vw, 10rem); }
.closing .title { font-size: var(--step-4); }

/* Footer — more presence */
.site-footer { padding-block: 5rem 3rem; border-top-color: var(--hair); }
.site-footer .wrap { position: relative; }
.site-footer .wordmark { font-size: 1.1rem; letter-spacing: 0.3em; margin-bottom: 1.5rem; }
.site-footer ul { gap: 0.8rem; }
.site-footer .legal { margin-top: 4.5rem; border-top-color: var(--hair); }

/* Statement layout — let the statement breathe */
.layout-statement .wrap { gap: 2.75rem; }
.layout-statement .statement { font-size: clamp(2.25rem, 4.8vw, 4.25rem); line-height: 1.05; max-width: 22ch; }

/* Split — headline scale */
.layout-split .head { margin-bottom: clamp(3rem, 6vw, 5rem); }
.grid { gap: clamp(2.5rem, 5vw, 6rem); }

/* containment for full-bleed elements */
html, body { overflow-x: clip; }
.section.band-section { padding-block: 0; }
.band-section .photo figcaption { left: var(--gutter); }
@media (min-width: 84rem) { .band-section .photo figcaption { left: calc((100vw - var(--wide)) / 2); } }
@media (max-width: 60em) {
  .hero .photo.tall, .page-head.with-figure .photo.tall { aspect-ratio: 16 / 10; margin-inline: calc(-1 * var(--gutter)); }
  .layout-figure .photo { position: static; margin-inline: calc(-1 * var(--gutter)); aspect-ratio: 16 / 10; }
  .display { font-size: clamp(2.6rem, 11vw, 3.4rem); }
}

/* =====================================================================
   ROUND 4 — tonal header, hierarchy, editorial journal, details
   ===================================================================== */

/* 1. Header takes the page's tone */
body.light .site-header { background: color-mix(in srgb, var(--parchment) 86%, transparent); border-bottom-color: var(--hair-light); }
body.light .wordmark { color: var(--black); }
body.light .nav a { color: #5E544B; }
body.light .nav a:hover, body.light .nav a[aria-current="page"] { color: var(--black); }
body.light .nav-toggle { color: var(--black); border-color: var(--hair-light); }
body.light .nav .btn-apply { color: var(--bone); }

/* 2. Current page marked by a hairline, not color alone */
.nav a:not(.btn) { position: relative; padding-bottom: 0.25rem; }
.nav a[aria-current="page"]:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.1rem; height: 1px; background: currentColor; opacity: 0.7; }

/* 6. CTA hierarchy: secondary buttons quieter */
.btn:not(.btn-apply) { border-color: color-mix(in srgb, currentColor 45%, transparent); }
.btn:not(.btn-apply):hover { border-color: currentColor; }
.btn-apply { box-shadow: inset 0 0 0 1px rgba(233,226,214,0.06); }

/* 7. One photographic series: warm multiply veil */
.photo::before { content: ""; position: absolute; inset: 0; background: var(--walnut); mix-blend-mode: multiply; opacity: 0.22; pointer-events: none; z-index: 1; }
.photo::after { z-index: 1; }
.photo figcaption { z-index: 2; }
.photo img { filter: grayscale(1) sepia(0.2) contrast(1.06) brightness(0.96); }

/* 9. Typographic details */
p, li, dd { text-wrap: pretty; }
::selection { background: var(--oxblood); color: var(--bone); }
.light ::selection { background: var(--walnut); color: var(--bone); }

/* 5. Footer with a closing line */
.site-footer .close-line { font-family: var(--serif); font-weight: 300; font-size: var(--step-3); letter-spacing: -0.02em; color: var(--bone); max-width: 20ch; line-height: 1.1; margin: 0 0 clamp(3rem, 6vw, 5rem); }
.site-footer .legal p:last-child { display: none; }

/* 3. Journal: featured entry + two-up grid */
.entries { border-top: 1px solid var(--hair-light); }
.entries li { border-top: 0; }
.entries li.featured { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: end; padding: clamp(3rem, 5vw, 4.5rem) 0; border-bottom: 1px solid var(--hair-light); }
@media (min-width: 52em) { .entries li.featured { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.entries li.featured .photo { aspect-ratio: 4 / 3; }
.entries li.featured h3 { font-size: var(--step-4); line-height: 1.02; letter-spacing: -0.028em; max-width: 14ch; }
.entries li.featured p { font-size: var(--step-1); }
.entries-grid { display: grid; gap: clamp(2rem, 4vw, 4rem); margin: 0; padding: 0; list-style: none; padding-top: clamp(3rem, 5vw, 4.5rem); }
@media (min-width: 52em) { .entries-grid { grid-template-columns: 1fr 1fr; } }
.entries-grid li { display: block; padding: 0; border: 0; }
.entries-grid .photo { aspect-ratio: 3 / 2; margin-bottom: 1.75rem; }
.entries-grid h3 { font-size: var(--step-2); font-weight: 300; letter-spacing: -0.02em; line-height: 1.15; max-width: 28ch; margin-bottom: 0.75rem; }
.entries-grid .small { margin-top: 0.75rem; }

/* 4. About principles: full width, like the reframe */
.principles { margin-top: clamp(3rem, 5vw, 4.5rem); }
.principles .pairs.grid2 { max-width: none; }

/* Home action: the Apply column leads */
#action .grid-2 { align-items: start; }
@media (min-width: 52em) { #action .grid-2 { grid-template-columns: 1.15fr 1fr; } }
#action .h2 { font-size: var(--step-4); }

/* 8. Mobile menu as a full overlay in the site's type */
@media (max-width: 52em) {
  .nav { position: absolute; left: 0; right: 0; top: 100%; height: calc(100vh - 5rem); height: calc(100dvh - 5rem); overflow-y: auto; padding: 2rem var(--gutter) 3rem; gap: 0; justify-content: flex-start; background: var(--black); border: 0; }
  .nav a { font-family: var(--serif); font-weight: 300; font-size: var(--step-3); letter-spacing: -0.02em; padding: 0.9rem 0; border-bottom: 1px solid var(--hair); color: var(--bone); }
  .nav a[aria-current="page"]:not(.btn)::after { display: none; }
  .nav a[aria-current="page"] { color: var(--stone-light); }
  .nav .btn { font-family: var(--sans); font-size: var(--step--1); margin-top: 2rem; border: 1px solid var(--oxblood); padding: 1rem 1.75rem; }
  body.light .nav { background: var(--parchment); }
  body.light .nav a { color: var(--black); border-bottom-color: var(--hair-light); }
  body.light .nav a[aria-current="page"] { color: #5E544B; }
  body.light .nav .btn { color: var(--bone); }
  body.menu-open { overflow: hidden; }
}


/* =====================================================================
   ROUND 5 — remove template tells; photographic environments
   ===================================================================== */

/* No decorative rule before labels; labels sit quietly */
.kicker::before { display: none; }
.kicker { margin-bottom: 1.25rem; color: var(--stone); }
.light .kicker { color: #6B625A; }

/* No entrance animation */
.hero .line, .hero .after { opacity: 1 !important; animation: none !important; transform: none !important; }

/* No captions on imagery */
.photo figcaption { display: none; }

/* Background media component */
.has-bg { position: relative; isolation: isolate; color: var(--bone); }
.bg-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--black); }
.bg-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); filter: grayscale(1) sepia(0.18) contrast(1.05) brightness(0.6); }
.bg-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,20,18,0.55) 0%, rgba(23,20,18,0.35) 45%, rgba(23,20,18,0.82) 100%); }
.has-bg.quiet .bg-media img { filter: grayscale(1) sepia(0.18) contrast(1.05) brightness(0.42); }
.has-bg.quiet .bg-media::after { background: rgba(23,20,18,0.55); }
.has-bg .lede { color: var(--bone); opacity: 0.86; }
.has-bg .muted, .has-bg .kicker { color: var(--stone-light); }
.has-bg .pairs li { border-color: rgba(233,226,214,0.18); }
.has-bg .pairs li span:nth-child(2) { color: var(--stone-light); }
.has-bg .pairs li span:last-child { color: var(--bone); opacity: 0.8; }
.light .has-bg a { text-decoration-color: var(--stone-light); }
.has-bg .btn { color: var(--bone); }
.has-bg .btn:not(.btn-apply):hover { background: var(--bone); color: var(--black); }
.has-bg input[type="email"] { color: var(--bone); border-bottom-color: rgba(233,226,214,0.45); }
.has-bg ::placeholder { color: var(--stone-light); }

/* Hero: a full-viewport environment; everything above the fold */
.hero.has-bg { min-height: calc(100svh - 5rem); display: grid; align-items: end; padding-block: clamp(3rem, 7vh, 6rem) clamp(3rem, 8vh, 6rem); }
.hero.has-bg .wrap { display: block; }
.hero.has-bg .hero-text { max-width: 48rem; }
.hero.has-bg .display { font-size: clamp(2.4rem, min(6vw, 10.5vh), 5.75rem); margin-bottom: clamp(1.25rem, 3vh, 2rem); text-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.hero.has-bg .lede { margin-bottom: clamp(1.5rem, 3.5vh, 2.5rem); }
.hero.has-bg .bg-media::after { background: linear-gradient(90deg, rgba(23,20,18,0.86) 0%, rgba(23,20,18,0.62) 50%, rgba(23,20,18,0.3) 100%), linear-gradient(180deg, rgba(23,20,18,0.2), rgba(23,20,18,0.7)); }
@media (max-width: 60em) {
  .hero.has-bg .display { font-size: clamp(2.1rem, min(10.5vw, 7.2vh), 3.4rem); }
  .hero.has-bg .bg-media::after { background: linear-gradient(180deg, rgba(23,20,18,0.35) 0%, rgba(23,20,18,0.88) 70%); }
}

/* Deep/dark sections that carry imagery */
.section.has-bg { border-top: 0; }
.light .inset.has-bg { background: transparent; }
.light .inset.has-bg::before { display: none; }
#action.has-bg .h2 { color: var(--bone); }

/* the page-head figure on service pages stays; the home band goes */
.light .inset > .bg-media, .has-bg > .bg-media { position: absolute; inset: 0; }
.hero.has-bg .hero-text { max-width: 54rem; }

/* ===== Brand logo ===== */
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand .logo { height: 2.1rem; width: auto; display: block; }
.logo-dark { display: none; }
body.light .site-header .logo-light { display: none; }
body.light .site-header .logo-dark { display: block; }
.site-footer .brand { margin-bottom: 1.5rem; }
.site-footer .brand .logo { height: 2.4rem; }
@media (max-width: 52em) { .brand .logo { height: 1.8rem; } }

/* ===== The brand's own photography: shown as shot, no stock treatment ===== */
.bg-media.own img { filter: none; }
.bg-media.own::after { background: linear-gradient(180deg, rgba(23,20,18,0.25) 0%, rgba(23,20,18,0.2) 50%, rgba(23,20,18,0.7) 100%); }
.hero.has-bg .bg-media.own::after { background: linear-gradient(90deg, rgba(23,20,18,0.72) 0%, rgba(23,20,18,0.35) 45%, rgba(23,20,18,0.05) 100%), linear-gradient(180deg, rgba(23,20,18,0.15), rgba(23,20,18,0.55)); }
.has-bg.quiet .bg-media.own img { filter: brightness(0.75); }
.has-bg.quiet .bg-media.own::after { background: rgba(23,20,18,0.42); }
.photo.own img { filter: none; }
.photo.own::before { opacity: 0; }
.photo.own::after { background: linear-gradient(180deg, rgba(23,20,18,0) 70%, rgba(23,20,18,0.18)); }
@media (max-width: 60em) { .hero.has-bg .bg-media.own::after { background: linear-gradient(180deg, rgba(23,20,18,0.2) 0%, rgba(23,20,18,0.85) 65%); } }
.brand .logo-dark { display: none; }
body.light .site-header .brand .logo-light { display: none; }
body.light .site-header .brand .logo-dark { display: block; }

/* ===== Footer, reconsidered ===== */
.site-footer { padding-block: clamp(5rem, 10vw, 9rem) 2.5rem; border-top: 1px solid var(--hair); }
.site-footer .grid { display: none; }
.foot-top { display: grid; gap: 2.5rem; align-items: end; padding-bottom: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--hair); }
@media (min-width: 52em) { .foot-top { grid-template-columns: 1fr auto; } }
.site-footer .close-line { margin: 0; font-size: clamp(2.25rem, 4.2vw, 3.75rem); line-height: 1.02; letter-spacing: -0.028em; max-width: 16ch; }
.site-footer .brand { margin: 0; justify-self: start; }
@media (min-width: 52em) { .site-footer .brand { justify-self: end; } }
.site-footer .brand .logo { height: 3rem; }
.foot-grid { display: grid; gap: 2.5rem 3rem; padding-block: clamp(3rem, 5vw, 4rem); }
@media (min-width: 52em) { .foot-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); } }
.foot-desc { margin: 0; font-family: var(--serif); font-size: var(--step-1); line-height: 1.45; color: var(--stone-light); max-width: 30ch; }
.foot-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.foot-nav a { font-family: var(--serif); font-size: var(--step-1); color: var(--bone); text-decoration: none; display: inline-block; padding: 0.25rem 0; }
.foot-nav a:hover { color: var(--stone-light); }
.site-footer .legal { margin-top: 0; padding-top: 1.5rem; border-top: 1px solid var(--hair); font-size: 0.75rem; letter-spacing: 0.03em; color: var(--stone); }
.site-footer .legal p { margin: 0; }
.site-footer .foot-nav { gap: 0.35rem; align-content: start; }

/* Figure-led sections: image runs the full height of the section, flush top and bottom */
.section:has(> .layout-figure) { padding-block: 0; }
.layout-figure { align-items: stretch; }
.layout-figure > .stack-lg { padding-block: clamp(5rem, 11vw, 10rem); }
.layout-figure .photo, .layout-figure .photo.tall { position: relative; top: auto; aspect-ratio: auto; height: 100%; min-height: 100%; }
.layout-figure .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 60em) {
  .layout-figure .photo, .layout-figure .photo.tall { aspect-ratio: 16 / 10; height: auto; min-height: 0; }
  .layout-figure > .stack-lg { padding-top: 0; }
}

/* =====================================================================
   Inner page heads: complete above the fold
   ===================================================================== */
.page-head .title { font-size: clamp(2rem, min(4.4vw, 7.4vh), 4.5rem); line-height: 1.02; max-width: 22ch; }
.page-head .lede { font-size: clamp(1rem, min(1.25vw, 2.3vh), 1.25rem); margin-top: clamp(1rem, 2.5vh, 1.5rem); max-width: 34rem; }
.page-head .kicker { margin-bottom: clamp(0.75rem, 2vh, 1.5rem); }
.page-head:not(.with-figure) { padding-block: clamp(3rem, 9vh, 7rem) clamp(2.5rem, 7vh, 5rem); }

/* with a figure: the head fills the first screen; the image runs flush top-to-bottom on the right */
.page-head.with-figure { padding-block: 0; min-height: calc(100svh - 5rem); display: grid; }
.page-head.with-figure .wrap { display: grid; gap: clamp(2rem, 4vw, 5rem); align-items: stretch; }
@media (min-width: 60em) { .page-head.with-figure .wrap { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.page-head.with-figure .wrap > div:first-child { align-self: center; padding-block: clamp(3rem, 8vh, 6rem); }
.page-head.with-figure .photo.tall { position: relative; aspect-ratio: auto; height: 100%; min-height: 100%; }
.page-head.with-figure .photo.tall img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 60em) {
  .page-head.with-figure { min-height: 0; }
  .page-head.with-figure .wrap > div:first-child { padding-block: 0 clamp(2.5rem, 6vh, 4rem); order: 2; }
  .page-head.with-figure .photo.tall { aspect-ratio: 16 / 10; height: auto; min-height: 0; order: 1; margin-inline: calc(-1 * var(--gutter)); }
  .page-head.with-figure .photo.tall img { position: static; }
}

/* =====================================================================
   Apply / Contact form: a document, not a widget
   ===================================================================== */
.section:has(> .wrap > .apply-form) { padding-top: 0; }
.apply-form { max-width: 46rem; background: #F4EDE2; border: 1px solid var(--parchment-deep); padding: clamp(1.75rem, 4vw, 3.5rem); }
.apply-form .field { max-width: none; margin: 0; padding: clamp(1.5rem, 3vw, 2.25rem) 0; border-top: 1px solid var(--parchment-deep); }
.apply-form .field:first-child { border-top: 0; padding-top: 0; }
.apply-form .field label, .apply-form .field legend { font-family: var(--serif); font-size: var(--step-1); line-height: 1.3; color: var(--black); letter-spacing: -0.01em; margin: 0 0 0.35rem; }
.apply-form .field legend { padding: 0; margin-bottom: 1rem; }
.apply-form .field .hint { font-family: var(--sans); font-size: var(--step--1); color: #6B625A; margin: 0 0 1rem; max-width: 40rem; }
.apply-form input[type="text"], .apply-form input[type="email"], .apply-form textarea, .apply-form select {
  font-family: var(--serif); font-size: var(--step-0); background: #FBF7F0; border: 1px solid #CDBFA9; padding: 0.9rem 1rem; box-shadow: none; transition: border-color 200ms ease, box-shadow 200ms ease;
}
.apply-form textarea { min-height: 8.5rem; line-height: 1.5; }
.apply-form input:focus, .apply-form textarea:focus, .apply-form select:focus { outline: 0; border-color: var(--black); box-shadow: 0 0 0 1px var(--black); }
.apply-form ::placeholder { color: #A89C8D; }

/* pair name + email on one row */
.apply-form .pair { display: grid; gap: 0 2rem; }
@media (min-width: 40em) { .apply-form .pair { grid-template-columns: 1fr 1fr; } .apply-form .pair .field + .field { border-top: 0; } }
.apply-form .pair .field { padding-top: 0; border-top: 0; }
.apply-form .field.pair-wrap { padding-bottom: 0; }

/* choices as cards */
.apply-form .choices { display: grid; gap: 0.75rem; border: 0; }
@media (min-width: 40em) { .apply-form .choices.two { grid-template-columns: 1fr 1fr; } }
.apply-form .choices label {
  display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.85rem; align-items: start;
  font-family: var(--serif); font-size: var(--step-0); line-height: 1.4; color: var(--black);
  background: #FBF7F0; border: 1px solid #CDBFA9; padding: 1rem 1.1rem; cursor: pointer; margin: 0;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.apply-form .choices label:hover { border-color: var(--stone); }
.apply-form .choices label:has(:checked) { border-color: var(--black); background: #FFFDF8; }
.apply-form .choices input[type="radio"] {
  appearance: none; margin: 0.2rem 0 0; width: 1.1rem; height: 1.1rem; border: 1px solid #8A7E70; border-radius: 50%; background: transparent; cursor: pointer;
}
.apply-form .choices input[type="radio"]:checked { border-color: var(--oxblood); background: radial-gradient(circle, var(--oxblood) 0 42%, transparent 46%); }
.apply-form .choices input[type="radio"]:focus-visible { outline: 2px solid var(--walnut); outline-offset: 2px; }
.apply-form .choices strong { font-weight: 500; }

/* submit row */
.apply-form .submit-row { display: grid; gap: 1.25rem; align-items: center; padding-top: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid var(--parchment-deep); }
@media (min-width: 40em) { .apply-form .submit-row { grid-template-columns: 1fr auto; } }
.apply-form .submit-row .hint { margin: 0; max-width: 34rem; }
.apply-form .btn { padding: 1.1rem 2rem; }
.apply-form .btn.btn-apply { color: var(--bone); }
.apply-form { max-width: 54rem; }

/* ===== Form pages: sticky introduction left, form right ===== */
.section.form-layout { padding-top: clamp(3rem, 7vh, 6rem); }
.form-grid { display: grid; gap: clamp(2.5rem, 5vw, 6rem); align-items: start; }
@media (min-width: 60em) { .form-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.form-intro { position: sticky; top: 6.5rem; }
.form-intro .title { font-size: clamp(2rem, 3.4vw, 3.25rem); line-height: 1.04; max-width: 18ch; }
.form-intro .lede { font-size: var(--step-0); margin-top: 1.5rem; max-width: 30rem; }
.form-grid .apply-form { max-width: none; }
@media (max-width: 60em) { .form-intro { position: static; } }

/* ===== Hamburger ===== */
.nav-toggle { border: 0; padding: 0.6rem; width: 2.75rem; height: 2.75rem; display: none; align-items: center; justify-content: center; background: transparent; }
.nav-toggle .bars { display: block; width: 1.4rem; height: 0.85rem; position: relative; }
.nav-toggle .bars i { position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform 260ms ease, opacity 200ms ease, top 260ms ease; }
.nav-toggle .bars i:nth-child(1) { top: 0; }
.nav-toggle .bars i:nth-child(2) { top: 50%; }
.nav-toggle .bars i:nth-child(3) { top: 100%; }
.nav-toggle[aria-expanded="true"] .bars i:nth-child(1) { top: 50%; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bars i:nth-child(3) { top: 50%; transform: rotate(-45deg); }
@media (max-width: 52em) { .nav-toggle { display: inline-flex; } }

/* ===== Mobile sticky Apply ===== */
.mobile-apply { display: none; }
@media (max-width: 52em) {
  .mobile-apply {
    display: flex; align-items: center; justify-content: center;
    position: fixed; left: var(--gutter); right: var(--gutter); bottom: calc(1rem + env(safe-area-inset-bottom));
    z-index: 15; padding: 1rem 1.5rem; box-shadow: 0 10px 30px rgba(23,20,18,0.35);
  }
  body { padding-bottom: 5.5rem; }
  body.page-apply .mobile-apply, body.menu-open .mobile-apply { display: none; }
  body.page-apply { padding-bottom: 0; }
}
@media (max-width: 52em) { .hero.has-bg { padding-bottom: 6.75rem; } }