/* ============================================================
   PROTAGONIST INK — SITE SYSTEM
   One stylesheet, linked by every page. Everything shared lives
   here: tokens, the reset, the shell, the nav, the card family,
   the inquiry and the footer.

   Layers on top of _ds/…/colors_and_type.css, which owns the raw
   palette and the two typefaces. Link that file first, this one
   second. Nothing in here restates a DS token; it only adds the
   layout, tracking and component tokens the DS has no opinion on.

   Page files own their own sections and nothing else. If a rule
   appears in two page files, it belongs in here instead.
   ============================================================ */

/* Satoshi from its hosted source. colors_and_type.css declares
   @font-face against fonts/*.ttf, which are not checked in — this
   loads the same typeface so pages render faithfully. Drop it once
   the TTFs land in _ds/…/fonts/. */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&display=swap');

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* ---- Layout: one measure, one edge ----
     Every section on every page aligns to this box. .shell and
     .container are the same box, so the hero, the philosophy
     block, the work grid, the essay feed and the footer all share
     a left edge across the site. Do not hand-code padding-inline
     anywhere; use --edge, or --gutter for full-bleed children. */
  --measure-page: 1280px;
  --edge: clamp(24px, 4.4vw, 56px);
  /* Viewport edge -> content edge, for full-bleed children (the
     filmstrip) that must still line up with .shell. Resolves
     against the child's containing block, so it is scrollbar-safe
     in a way 100vw is not. */
  --gutter: calc(max(0px, (100% - var(--measure-page)) / 2) + var(--edge));
  /* Reading column for long-form body copy. Narrower than the
     shell on purpose — an essay is read, not scanned. */
  --measure-read: 680px;

  /* ---- Vertical rhythm: one section step ---- */
  --section-y: clamp(112px, 11vw, 176px);

  /* ---- Tracking ladder, tied to size ----
     Sans display tightens as it grows. The serif keeps its own
     tracking (-0.03em on statements, -0.015em on card titles) —
     it is drawn tight already. */
  --tracking-display-xl: -0.05em;  /* 96px and up   */
  --tracking-display-l:  -0.04em;  /* 48–90px       */
  --tracking-display-m:  -0.03em;  /* 24–44px       */

  /* ---- Eyebrows: the only uppercase on the site ----
     --tracking-eyebrow (0.18em, from the DS) for inline meta,
     --wide for section-level kickers, --tight for card tag lines
     where a client name, a service list and a year have to stay
     on one line in a half-column. */
  --eyebrow-size: 14px;
  --tracking-eyebrow-wide: 0.28em;
  --tracking-eyebrow-tight: 0.075em;

  /* ---- Accent hovers ----
     --lift goes lighter for crimson on dark grounds, --press goes
     darker for crimson on paper. */
  --accent-lift:  #DF4B3E;
  --accent-press: #A8301F;

  /* ---- Rules ----
     Hairlines on paper are --color-mist; on the crimson and ink
     grounds they are paper at partial strength. */
  --rule-on-accent: rgba(250, 250, 250, 0.82);

  /* Homepage quill opacity, kept here so the token ladder is in
     one place even though one page uses it. */
  --quill-presence: 0.24;
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--color-paper); scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  background: var(--color-paper);
}
img { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-press); }
button, input, textarea { color: inherit; font: inherit; }
::selection { background: var(--accent); color: var(--color-paper); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.page {
  width: 100%;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* Carries the edge itself, so sections only own their vertical
   padding. One name for one box — the old `.container` alias is
   gone, because two names for the same measure is how two pages
   quietly drift onto two different ones. */
.shell {
  width: 100%;
  max-width: var(--measure-page);
  margin-inline: auto;
  padding-inline: var(--edge);
}

/* The nav sits in normal flow on every page — never fixed, never
   sticky — so anchored sections need no scroll offset. */
[id] { scroll-margin-top: 0; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 12px 16px;
  transform: translateY(-150%);
  background: var(--color-hero-black);
  color: var(--color-paper);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--weight-bold);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); color: var(--color-paper); }

/* ============================================================
   TYPE TIERS
   Four tiers, and no others: eyebrow, section title, page title,
   statement. Uppercase is reserved for the eyebrow tier. Nothing
   else on the site shouts, which is what lets the eyebrows read
   as labels rather than as competing headlines.
   ============================================================ */
.eyebrow-meta,
.link-underline {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--eyebrow-size);
  line-height: 1;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
/* Not --color-ash (#B5B5B5) — 1.9:1 on paper, effectively
   invisible. Graphite is 4.8:1 and still reads as a quiet tier. */
.eyebrow-meta { color: var(--color-graphite); }
.eyebrow-meta--wide { letter-spacing: var(--tracking-eyebrow-wide); }
/* Card tag lines: a client name, a service and a year in a half
   column. At 14px/0.18em that wraps to two lines and starts
   competing with the title under it. */
.eyebrow-meta--tight {
  color: var(--color-ink);
  font-size: 12px;
  letter-spacing: var(--tracking-eyebrow-tight);
}

.link-underline {
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-graphite);
  padding-bottom: 4px;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.link-underline:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Section heading inside a page — "Recent Work", "The Ink". */
.section-title {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: clamp(32px, 4vw, 56px);
  line-height: 0.96;
  letter-spacing: var(--tracking-display-l);
}

/* Masthead of a section page — "Selected work.", "The Ink".
   Sans, not serif: the serif is reserved for the names of things
   (an essay, a case study, a statement). A page title names a
   part of the site, so it sits in the same voice as the section
   titles it will appear beside on the homepage.

   Every property is declared, including ones that happen to
   match. The bare h1 in colors_and_type.css is 96px Instrument
   Serif at 700 — leave any of family, weight, size, leading,
   tracking or colour off and the page opens in the serif. */
.page-title {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: clamp(56px, 7.5vw, 96px);
  line-height: 0.94;
  letter-spacing: var(--tracking-display-xl);
}

/* Statement tier — the serif, at display size, on any ground.
   The hero thesis, the dark band, the inquiry question. */
.statement {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-body);
  font-size: clamp(40px, 6vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* ============================================================
   PROSE
   Long-form reading copy — Portable Text rendered into an
   essay body (editorial/article) or a case study's narrative
   movements (work/case). Lived as two identical blocks,
   .article-copy and .case-copy, until both existed at once;
   per this file's own rule above ("if a rule appears in two
   page files, it belongs in here"), that duplication is what
   triggers the hoist. --measure-read, not --measure-page: this
   column is read line by line, not scanned the way the rest of
   a page is — narrower on purpose. Not folded into the type
   tiers above: those are four fixed sizes for short strings,
   this is a whole rendered document with its own descendant
   selectors for every element Portable Text can produce.
   ============================================================ */
.prose {
  width: min(100%, var(--measure-read));
  margin-inline: auto;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.68;
}
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin: 0 0 1.35em; color: inherit; font-size: inherit; line-height: inherit; }
.prose h2,
.prose h3,
.prose h4 { margin: 2.75em 0 0.75em; color: var(--color-ink); font-weight: var(--weight-body); line-height: 1; letter-spacing: -0.025em; }
.prose h2 { max-width: 15ch; font-family: var(--font-display); font-size: clamp(34px, 3.6vw, 52px); }
/* Sans below h2, not more serif: inside a reading column the
   serif at 24px starts competing with the body face rather than
   structuring it. */
.prose h3 { font-family: var(--font-body); font-size: clamp(20px, 1.7vw, 24px); font-weight: var(--weight-bold); letter-spacing: -0.01em; line-height: 1.25; }
.prose h4 { font-family: var(--font-body); font-size: 1em; font-weight: var(--weight-bold); letter-spacing: 0; line-height: 1.4; }
.prose a { color: inherit; border-bottom: 1px solid var(--color-ash); transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.prose a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.prose strong { font-weight: var(--weight-bold); }
.prose em { font-style: italic; }
.prose ul,
.prose ol { margin: 0 0 1.35em; padding-left: 1.2em; }
.prose li { margin: 0.45em 0; padding-left: 0.25em; }
.prose blockquote {
  margin: clamp(56px, 9vw, 104px) 0;
  padding: clamp(26px, 4vw, 48px) 0;
  border-block: 1px solid var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 56px);
  font-style: italic;
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.prose blockquote p { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
.prose blockquote cite {
  display: block;
  margin-top: 20px;
  color: var(--color-graphite);
  font-family: var(--font-body);
  font-size: 12px;
  font-style: normal;
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}
.prose figure { margin: clamp(44px, 7vw, 80px) calc(-1 * min(var(--edge), 56px)); }
.prose figure img { width: 100%; }
.prose figcaption { margin-top: 10px; padding-inline: min(var(--edge), 56px); color: var(--color-graphite); font-size: 12px; line-height: 1.45; }
.prose hr { margin: clamp(52px, 8vw, 88px) 0; border: 0; border-top: 1px solid var(--color-mist); }
.prose pre {
  max-width: 100%;
  margin: 1.5em 0;
  padding: 20px;
  overflow: auto;
  background: var(--color-hero-black);
  color: var(--color-paper);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78em;
  line-height: 1.55;
}
.prose :not(pre) > code { padding: 0.1em 0.28em; background: var(--color-mist); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.82em; }

/* ============================================================
   LEGAL PAGES
   Shared by /privacy/, /terms/, /data-deletion/ — same header
   shape (kicker, title, effective-date line) over a .prose body.
   ============================================================ */
.legal-header { padding-block: clamp(64px, 7vw, 104px) clamp(40px, 5vw, 64px); }
.legal-header .eyebrow-meta { display: block; margin: 0 0 20px; }
.legal-header__meta { margin: 20px 0 0; color: var(--color-graphite); font-size: 15px; }
.legal-content { padding-bottom: var(--section-y); }

/* ============================================================
   CARDS
   One anatomy for every linked thing on the site: a case study,
   an essay, a filmstrip entry. Pages set the plate ratio and the
   column width; nothing else varies.
   ============================================================ */
.card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  color: var(--color-ink);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
/* Without this the global a:hover turns the whole card — plate,
   meta and title — crimson on hover. */
.card:hover { color: var(--color-ink); }
/* A class-level display:flex outranks the UA sheet's
   [hidden] { display: none }, so el.hidden = true would do
   nothing at all. */
.card[hidden] { display: none; }
/* The lead card carries an excerpt and a read link under a 48px
   title, so it gets more air between plate and body than the
   cards beside it — otherwise the extra copy reads as clutter
   rather than as the reason it is the lead. */
.card--lead { gap: 28px; }

.card__media {
  overflow: hidden;
  background: var(--color-mist);
}
.card__media--wide      { aspect-ratio: 16 / 9; }
.card__media--landscape { aspect-ratio: 4 / 3; }
.card__media--portrait  { aspect-ratio: 3 / 4; }
.card__media--pano      { aspect-ratio: 21 / 9; }
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.card__media img.is-mono { filter: grayscale(1); }
.card:hover .card__media img { filter: grayscale(0); transform: scale(1.025); }

.card__body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* Category on the left, date on the right, one hairline under.
   The same line on a case study, an essay card and a journal
   entry, so a reader crossing from Work to The Ink meets the
   same furniture. */
.card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-mist);
}
.card__meta > .eyebrow-meta { min-width: 0; }
.card__date {
  flex: 0 0 auto;
  color: var(--color-graphite);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1;
}

/* Serif on purpose: Instrument Serif is the voice of the studio
   and the face for the names of things. All six properties are
   declared because the bare h3 in colors_and_type.css is 40px/500
   — inherit that and an index of five entries reads as five hero
   statements. 1.12 rather than --leading-display (1.05): an index
   title runs to two lines. 26px is the floor, below which the
   serif gets frail. */
.card__title {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: var(--weight-body);
  font-size: clamp(26px, 2.35vw, 30px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.card__title--lead {
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.06;
  letter-spacing: var(--tracking-display-m);
}
.card__title--compact { font-size: clamp(22px, 1.7vw, 24px); }

.card__excerpt {
  max-width: 46ch;
  margin: 0;
  color: var(--color-graphite);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: var(--leading-body);
  text-wrap: pretty;
}
.card__read {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  margin-top: 4px;
}
.card__read::after { content: "→"; margin-left: 10px; transition: transform var(--dur-fast) var(--ease-out); }
.card:hover .card__read { color: var(--accent); border-bottom-color: var(--accent); }
.card:hover .card__read::after { transform: translateX(4px); }

/* ---- Feature grid ----
   One lead card beside a stack of two. The homepage's Ink section
   is a preview of the editorial index, so both use this exact
   split — a reader arriving from one recognises the other. */
.feature-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: start;
}
.feature-grid__aside { display: flex; flex-direction: column; gap: 48px; }
.feature-grid__aside .card + .card { border-top: 1px solid var(--color-mist); padding-top: 32px; }

/* Ruled row — the archive tier, under the cards. No plate, no
   hierarchy left to spend: a title and a date. */
.row-list { display: flex; flex-direction: column; border-top: 1px solid var(--color-ink); }
.row-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--color-mist);
  color: var(--color-ink);
  transition: color var(--dur-fast) var(--ease-out);
}
.row-link:hover { color: var(--accent); }
.row-link__title {
  min-width: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-body);
  font-size: clamp(19px, 1.55vw, 21px);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.row-link__meta { flex: 0 0 auto; }
.row-link:hover .row-link__meta { color: inherit; }

/* ============================================================
   NAV
   One nav on every page: wordmark left, four links right, in
   normal flow. Paper ground by default; .nav--dark inverts it for
   the homepage's charcoal opening. No hamburger, no overlay, no
   fixed rail — the site is four surfaces and they all fit on one
   line.
   ============================================================ */
.nav { position: relative; z-index: 3; display: block; color: var(--color-ink); }
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding-block: 34px;
}
.nav__home { display: inline-flex; align-items: center; line-height: 0; }
.nav__wordmark { width: 225px; height: auto; max-width: 100%; }
.nav__links { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 36px; margin: 0; padding: 0; }
.nav__link {
  padding: 0;
  border: 0;
  color: var(--color-graphite);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link:hover,
.nav__link:focus-visible { color: var(--color-ink); }
/* The page you are on, marked in the accent rather than by
   removing the link — a reader landing mid-site should be able to
   see where they are without reading the URL. */
.nav__link[aria-current="page"] { color: var(--accent); }

.nav--dark { color: var(--color-paper); }
.nav--dark .nav__link { color: var(--fg-on-dark-dim); }
.nav--dark .nav__link:hover,
.nav--dark .nav__link:focus-visible { color: var(--color-paper); }
.nav--dark .nav__link[aria-current="page"] { color: var(--accent-lift); }

/* ============================================================
   INQUIRY
   Intent: give a prospective client enough room to describe the
   work, without making it feel like a lead-generation exercise.
   The crimson is the invitation; the form itself is deliberately
   just type, white space and ruled lines.

   This section closes every page on the site. It is the only
   crimson field anywhere.
   ============================================================ */
.inquiry { padding-block: clamp(64px, 6vw, 96px); background: var(--accent); }
.inquiry__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: start;
  gap: clamp(40px, 5vw, 80px);
}
.inquiry__intro { display: flex; flex-direction: column; align-items: flex-start; }
/* The form/confirmation swap toggles `hidden` on whichever of these two
   carries it — same cascade trap as .card[hidden] above: their own
   display:grid/flex would otherwise outrank the UA [hidden] rule. */
.inquiry__inner[hidden],
.inquiry__intro[hidden] { display: none; }
.inquiry__eyebrow,
.inquiry__label {
  margin: 0;
  color: var(--color-paper);
  font-family: var(--font-body);
  font-size: var(--eyebrow-size);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow-wide);
  line-height: 1.2;
  text-transform: uppercase;
}
.inquiry__title {
  max-width: none;
  margin: clamp(24px, 3vw, 40px) 0 0;
  color: var(--color-paper);
  font-family: var(--font-display);
  font-size: clamp(54px, 6vw, 100px);
  font-weight: var(--weight-body);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.inquiry__lede {
  max-width: 34ch;
  margin: clamp(20px, 2.5vw, 32px) 0 0;
  color: var(--color-paper);
  font-size: clamp(18px, 1.45vw, 24px);
  line-height: 1.55;
}
.inquiry__form { display: flex; min-width: 0; flex-direction: column; gap: clamp(24px, 2.5vw, 36px); }
.inquiry__field {
  display: flex;
  min-height: 76px;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-on-accent);
}
.inquiry__input,
.inquiry__message {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--color-paper);
  caret-color: var(--color-paper);
  font-family: var(--font-body);
  font-size: clamp(17px, 1.2vw, 20px);
  line-height: 1.45;
}
.inquiry__input::placeholder,
.inquiry__message::placeholder { color: rgba(250, 250, 250, 0.62); }
.inquiry__field:focus-within,
.inquiry__message-wrap:focus-within { border-bottom-color: var(--color-paper); }
.inquiry__message-wrap {
  display: flex;
  min-height: 170px;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-on-accent);
}
.inquiry__message { min-height: 100px; flex: 1; resize: vertical; }
.inquiry__form-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
/* Same anatomy as .hero-cta on the homepage opener: small uppercase
   text, a hairline that draws under it, an arrow that rides along. No
   entrance animation here — those were tuned for a hero that appears
   once on load, not a button a visitor triggers on their own schedule. */
.inquiry__submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  padding: 0 0 9px;
  border: 0;
  background: none;
  color: var(--color-paper);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: clamp(12px, 1vw, 15px);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  line-height: 1;
  text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease-out);
}
.inquiry__submit::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: currentColor;
  content: '';
}
.inquiry__submit:hover,
.inquiry__submit:focus-visible { color: var(--color-ink); }
.inquiry__submit-arrow { display: inline-block; font-size: 1.25em; line-height: 0.5; }
.inquiry__error {
  margin: 0;
  color: var(--color-paper);
  font-size: clamp(14px, 1vw, 16px);
  font-weight: var(--weight-bold);
  line-height: 1.5;
}

/* The global focus ring is 2px of --accent, and this section's
   ground is --accent — on the inquiry the ring is drawn in the
   background colour and vanishes. Paper is the only ring that
   survives here. */
.inquiry a:focus-visible,
.inquiry button:focus-visible,
.inquiry input:focus-visible,
.inquiry textarea:focus-visible { outline-color: var(--color-paper); }

/* ---------- Inquiry, compact ----------
   The full name/email/message form is a homepage-only commitment.
   Everywhere else the inquiry closes the page as a single low-friction
   line: headline, one-sentence nudge, a mailto CTA styled like
   .inquiry__submit — no state machine, because there's no form to
   submit. */
.inquiry--compact { padding-block: clamp(48px, 5vw, 72px); }
.inquiry-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
}
.inquiry-banner__text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
}
.inquiry-banner__headline {
  margin: 0;
  color: var(--color-paper);
  font-family: var(--font-display);
  font-weight: var(--weight-body);
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.inquiry-banner__sub {
  margin: 0;
  color: var(--color-paper);
  font-family: var(--font-body);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.4;
}
@media (max-width: 640px) {
  .inquiry-banner { flex-direction: column; align-items: flex-start; gap: 28px; }
}

/* ============================================================
   FOOTER
   The inquiry earns the crimson field. The footer returns to ink
   and carries only what someone needs after deciding to stay in
   touch.
   ============================================================ */
.foot { padding-block: clamp(56px, 5vw, 80px); background: var(--color-hero-black); }
.foot__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(130px, 0.75fr) minmax(180px, 0.9fr);
  gap: clamp(40px, 6vw, 96px);
  color: var(--color-paper);
}
.foot__brand,
.foot__col,
.foot__links { display: flex; flex-direction: column; align-items: flex-start; }
.foot__brand { gap: 20px; }
.foot__brand > a { line-height: 0; }
.foot__wordmark {
  display: block;
  width: min(176px, 100%);
  height: auto;
  /* The exported wordmark carries a transparent left gutter. Shift the
     file, not the footer grid, so its visible letterforms share the copy's
     left edge. */
  margin-inline-start: -10px;
}
.foot__description { max-width: 30ch; margin: 0; color: var(--fg-on-dark-dim); font-size: 16px; line-height: 1.45; }
.foot__col { gap: 22px; }
.foot__heading {
  margin: 0;
  color: rgba(250, 250, 250, 0.65);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.22em;
  line-height: 1.2;
  text-transform: uppercase;
}
.foot__links { gap: 16px; }
.foot__links a,
.foot__links span { color: rgba(250, 250, 250, 0.88); font-size: 16px; line-height: 1.35; }
.foot__links a { transition: color var(--dur-fast) var(--ease-out); }
.foot__links a:hover { color: var(--accent-lift); }

.foot__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 24px;
  border-top: 1px solid rgba(250, 250, 250, 0.14);
}
.foot__copyright { margin: 0; color: rgba(250, 250, 250, 0.5); font-size: 13px; }
.foot__legal-links { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.foot__legal-links a { color: rgba(250, 250, 250, 0.65); font-size: 13px; letter-spacing: 0.02em; transition: color var(--dur-fast) var(--ease-out); }
.foot__legal-links a:hover { color: var(--accent-lift); }

/* ============================================================
   REVEAL
   Default state is the finished state, so every page is complete
   with JS off. A script only marks what is still below the
   trigger line on load as pending, and releases it on scroll.
   ============================================================ */
.is-pending { opacity: 0; transform: translateY(18px); }

/* ============================================================
   SHARED RESPONSIVE
   899 is the site breakpoint for content. 900 / 760 / 640 carry
   the nav, inquiry and footer, which step at their own widths.
   ============================================================ */
@media (max-width: 899px) {
  .feature-grid { grid-template-columns: 1fr; gap: 56px; }
  .feature-grid__aside { gap: 40px; }
}
@media (max-width: 900px) {
  .nav__inner { padding-block: 24px; gap: 16px 20px; }
  .nav__wordmark { width: 200px; }
  .nav__links { gap: 12px 22px; }
  .nav__link { font-size: 14px; }
  .inquiry__inner { gap: 36px; }
  .inquiry__title { font-size: clamp(52px, 7vw, 80px); }
  .foot__inner { gap: 40px; }
}
@media (max-width: 760px) {
  .inquiry__inner { grid-template-columns: 1fr; }
  .inquiry__title { max-width: 11.5ch; margin-top: 28px; }
  .inquiry__lede { margin-top: 24px; }
  .foot__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .nav__wordmark { width: 172px; }
  /* Deliberately not below 26px: Instrument Serif gets frail
     there, so the serif floor holds on phones too. The lead keeps
     one step above the rest — a single column would otherwise set
     every essay at the same size and lose the hierarchy the
     feature grid exists to carry. */
  .card__title { font-size: 26px; }
  .card__title--lead { font-size: 32px; }
  .card__title--compact { font-size: 23px; }
  /* .prose's own phone overrides — ported with the base block from
     .article-copy/.case-copy above, not new rules. */
  .prose figure { margin-inline: 0; }
  .prose figcaption { padding-inline: 0; }
  .prose blockquote { font-size: clamp(28px, 8vw, 38px); }
  .inquiry { padding-block: 56px; }
  .inquiry__title { font-size: clamp(40px, 11.5vw, 52px); }
  .inquiry__field { min-height: 68px; }
  .inquiry__message-wrap { min-height: 150px; }
  .inquiry__message { min-height: 90px; }
  .inquiry__form-footer { align-items: flex-start; gap: 24px; }
  .foot { padding-block: 56px; }
  .foot__inner { grid-template-columns: 1fr; gap: 36px; }
  .foot__brand { grid-column: auto; gap: 20px; }
  .foot__col { gap: 20px; }
  .foot__links { gap: 14px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card,
  .card__media img,
  .card__read::after,
  .link-underline,
  .nav__link,
  .row-link,
  .foot__links a,
  .skip-link { transition: none; }
  .card:hover .card__media img { transform: none; }
  .card:hover .card__read::after { transform: none; }
  /* The reveal scripts sit out under reduced motion, so nothing
     ever gets .is-pending — but if it is applied by hand or by a
     future path, the finished state has to win rather than leave
     an element at opacity 0. */
  .is-pending { opacity: 1; transform: none; }
}