/* ==========================================================================
   Creators of Place — shared design system (v2: consolidated editorial pass)
   ONE typography system: display / heading / subhead / lead / meta.
   Warm near-black ground, Fraunces (serif) + Inter (sans).
   Bronze accent is a minor, functional touch only — links, focus, hover.
   Never in running type, headings or metadata.
   Photography is selective and hierarchical, not decorative filler.
   ========================================================================== */

:root {
  --bg: #0a0705;
  --bg-raised: #14100c;
  --ink: #f0e7d6;
  --ink-dim: rgba(240, 231, 214, 0.62);
  --ink-faint: rgba(240, 231, 214, 0.38);
  --accent: #a77c59;
  --error: #c98a6f;
  --hairline: rgba(240, 231, 214, 0.10);
  --hairline-strong: rgba(240, 231, 214, 0.22);

  --serif: 'Fraunces', ui-serif, Georgia, serif;
  --sans: 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* two breakpoints, site-wide — every responsive rule keys off one of
     these two (900px "tablet", 560px "mobile"). Custom properties can't
     be read inside an @media condition, so every media query below still
     hardcodes 900px / 560px directly — these two exist as the documented
     reference for what those numbers mean. Do not introduce a third. */
  --bp-tablet: 900px;
  --bp-mobile: 560px;

  /* section shell */
  --section-pad-y: 148px;
  --section-pad-x: 64px;
  /* a smaller, still-responsive vertical pad for compact blocks that
     aren't full sections (footer, coda) */
  --pad-y-compact: clamp(56px, 8vw, 96px);

  /* the one spacing scale. every gap between headings, body copy,
     images and metadata should be one of these eight values (or the
     fluid --space-fluid step for the largest, viewport-scaled gaps). */
  --space-xs: 8px;
  --space-sm: 14px;
  --space-md: 20px;
  --space-lg: 28px;
  --space-xl: 40px;
  --space-2xl: 56px;
  --space-3xl: 72px;
  --space-4xl: 96px;
  --space-fluid: clamp(100px, 11vw, 150px);

  /* transition speeds — every hover/focus transition on the site uses
     one of these three, never a one-off duration. */
  --ease-fast: 0.2s ease;
  --ease-med: 0.25s ease;
  --ease-slow: 0.8s ease;

  /* no site-wide container: sections are intentionally full-bleed,
     with per-content-type max-widths instead (--max-prose for running
     copy, individual figure caps for photography). */
  --max-prose: 620px;
  /* the one width for a .display.statement line, wherever it appears */
  --max-statement: 800px;
  /* the one wrap width for a section headline that sits above body
     copy (in ch, so it scales with the type) */
  --heading-wrap: 13ch;
  /* sections stay full-bleed (their background runs edge to edge on
     any monitor), but a grid whose image column is locked to an
     aspect-ratio has no such cap — on an ultra-wide screen the image
     keeps getting taller while the text next to it, capped by
     --max-prose/--max-statement, does not, and the row stops reading
     as one balanced unit. Every such grid (.split, .proof) is capped
     and centered at this width instead, so the pairing stays the same
     proportion at 1440px and at 2400px. */
  --max-content: 1440px;
}

@media (max-width: 900px) {
  :root { --section-pad-y: 96px; --section-pad-x: 28px; }
}
@media (max-width: 560px) {
  :root { --section-pad-y: 76px; --section-pad-x: 20px; }
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* keeps an anchor jump (the header's "Interest" link, or a direct
     #interest URL) from landing a heading underneath the fixed header */
  scroll-padding-top: 96px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(167, 124, 89, 0.35); color: var(--ink); }

/* ==========================================================================
   ONE type system — every headline, label and paragraph on the site draws
   from exactly these five roles (display, heading, body/lead, subhead,
   meta). Do not introduce another treatment or another one-off tracked-
   label rule — extend the .meta group below instead.
   ========================================================================== */

/* display: the one big serif moment — hero headline, and every
   pull-statement line that punctuates a movement or a pull-quote */
.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 48px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}

/* heading: the one serif treatment for every section headline — same
   size, same wrap width, everywhere it appears */
h2, .heading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  max-width: var(--heading-wrap);
  text-wrap: balance;
}

/* body: the one text size for running copy — sans for paragraphs (lead),
   serif for short labels (subhead, index words like "Gatherings") */
p.lead, .lead {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.75;
  color: var(--ink-dim);
  max-width: var(--max-prose);
  margin: 0;
}
.lead + .lead { margin-top: var(--space-sm); }
/* a lead paragraph that leads into a .display statement gets a looser
   gap than the standard lead-to-lead rhythm — the one documented
   exception to it, used instead of a one-off inline margin */
.lead + .lead.lead-loose { margin-top: var(--space-lg); }

.subhead {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.3;
  color: var(--ink);
}

/* meta: the one small tracked-label treatment on the site. Every piece
   of factual, wayfinding or micro-copy text shares this exact rule —
   volume/date labels, nav links, the footer, and quote attribution —
   rather than each coding its own near-duplicate. */
.meta,
.site-header nav a,
.site-footer,
.pull-quote cite,
.category {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* category: the one wayfinding label at the top of every primary
   section — same typography as the rest of the .meta group (that's
   what the shared selector above is for), with its own layout rule:
   a fixed gap down to whatever heading follows it. Every section on
   the homepage opens with one of these, so a visitor scanning quickly
   sees ABOUT / OUR PERSPECTIVE / THE COMMUNITY / GATHERINGS·VOLUME I /
   WHAT'S NEXT / GET INVOLVED and reads the shape of the page without
   reading a single paragraph. It names what a section is about; it is
   not a nav control, so it never links or hovers like one. */
.category {
  display: block;
  margin-bottom: var(--space-sm);
}

/* wordmark: the one text-based rendering of the logo, shared by the
   header and the footer. (The hero's image lockup is the one other
   exception, justified by its size and first-impression role.) */
.wordmark {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink);
  opacity: 0.95;
}

p { margin: 0; }

/* ---------------- header ---------------- */
/* fixed, compact, understated — transparent over the hero/photography by
   default, fading to a near-solid dark bar once the page is scrolled so
   it keeps reading against lighter content underneath. No blur (no
   glassmorphism), no shadow, no border — a flat color change is enough. */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--section-pad-x);
  pointer-events: none;
  background: transparent;
  transition: background var(--ease-med);
  /* a light text-shadow, not a box-shadow on the bar itself — keeps the
     wordmark/nav legible over bright photography (the essay hero) before
     the scrolled background takes over */
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
.site-header.is-scrolled {
  background: rgba(10, 7, 5, 0.94);
  text-shadow: none;
}
.site-header .wordmark {
  pointer-events: auto;
}
/* the horizontal logo lockup — same Fraunces/italic-"of" treatment as
   the hero's stacked logo, just recomposed on one line so it stays
   legible at header height. A drop-shadow (the image equivalent of the
   header's own text-shadow) keeps it readable over bright photography
   before the scrolled background takes over. */
.site-header-logo {
  display: block;
  pointer-events: auto;
}
.site-header-logo img {
  display: block;
  height: 22px;
  width: auto;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.45));
  transition: filter var(--ease-med);
}
.site-header.is-scrolled .site-header-logo img { filter: none; }
.site-header nav {
  pointer-events: auto;
  display: flex;
  gap: 30px;
}
.site-header nav a {
  transition: color var(--ease-fast);
}
.site-header nav a:hover { color: var(--ink); }
/* the city-based nav labels ("Southern California 02") run longer than
   the old Volume/Interest labels — past 560px, a single flex row no
   longer has room to hold the wordmark and all three links on one
   line, so the header stacks instead of squeezing/wrapping mid-word */
@media (max-width: 560px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 18px var(--section-pad-x);
  }
  .site-header nav { flex-wrap: wrap; gap: 14px 22px; }
}

/* ---------------- section shell ---------------- */
section {
  padding: var(--section-pad-y) var(--section-pad-x);
  border-top: 1px solid var(--hairline);
  position: relative;
}
/* documented modifier classes for a section that departs from the
   default shell — used instead of one-off inline border/padding
   overrides. Keep to these three; don't add another ad hoc variant. */
.section--flush { border-top: none; }
.section--attached { border-top: none; padding-top: 0; }
.section--quote { border-top: none; padding-top: clamp(40px, 6vw, 60px); }

.center { text-align: center; }
/* the first paragraph directly under a section headline always gets
   the same gap, site-wide */
h2 + .lead { margin-top: var(--space-lg); }
/* every pull-statement line, wherever it appears, is the same width —
   and is deliberately smaller than a section heading at every viewport
   size (22-30px vs the heading's 26-36px), so the heading always reads
   as the loudest thing in the section. A pull-quote used on its own,
   with no heading beside it to compete with (the essay page's
   .pull-quote), stays at the full .display size instead — this rule
   only applies to a statement sharing a section with a heading. */
.statement {
  margin-top: var(--space-2xl);
  max-width: var(--max-statement);
  font-size: clamp(22px, 2.6vw, 30px);
}
/* the one documented reverse case — an Accent line that opens a section
   ahead of its Body copy (Exploration), rather than closing it. Same
   Accent treatment; only the copy that follows needs its own gap. */
.statement + .lead { margin-top: var(--space-lg); }

/* split: the one two-column layout for a section that pairs a block
   of content with a photo — used by every such section on the site
   (an "idea" with a photo, the list-and-image movement, the interest
   form). Same columns, same gap, everywhere. .split--flip is the only
   thing that changes, and it's how sections alternate which side the
   photo sits on: read top to bottom, the photo goes right, left,
   right, left, form-left-to-close. A section with no photo (like the
   second half of "By design. By chance.") is simply not a .split — a
   deliberate text-only pause in that rhythm, not a missing image.

   Ordering keys off the .idea-image class itself, not first-/last-child:
   a .split's non-image content isn't always written before the image
   in the markup (the interest form's photo comes first in the HTML,
   the index list's photo comes last), so a positional rule would make
   the same .split--flip class flip different sides on different
   sections. Keying off .idea-image makes "flip" mean one fixed thing
   — photo left instead of right — everywhere it's used. */
.split {
  max-width: var(--max-content);
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--section-pad-x);
  /* top-aligned, not centered: a tall photo and a short text block are
     almost never the same height, and centering them stacks empty space
     above and below whichever one is shorter. Lining both columns up
     from the same top edge is what makes the row read as symmetric —
     the same reason the essay hero's own label/heading/lead block reads
     clean: everything starts from one shared top line. */
  align-items: start;
}
.split > :not(.idea-image) { order: 1; }
.split > .idea-image { order: 2; }
.split--flip > :not(.idea-image) { order: 2; }
.split--flip > .idea-image { order: 1; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  /* flip is a desktop-only distinction — on one narrow column every
     section reads top to bottom in its natural, written order instead */
  .split > *, .split--flip > * { order: initial; }
}

/* the one photo treatment for a photo paired with text in a .split —
   same crop, same size logic, whichever side it lands on. Two gap
   tiers elsewhere: --space-2xl for a standalone body image (a gallery
   dominant photo), --space-3xl reserved for the hero's own top image. */
.idea-image {
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--bg-raised);
}
.idea-image img { width: 100%; height: 100%; object-fit: cover; }

.text-link {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  margin-top: var(--space-xl);
  font-family: var(--sans);
  font-size: 13px; letter-spacing: 0.06em; color: var(--accent);
  border-bottom: 1px solid transparent;
  transition: border-color var(--ease-med);
}
.text-link:hover { border-color: var(--accent); }

/* ---------------- hero ---------------- */
.hero { padding: 156px var(--section-pad-x) 0; border-top: none; }
.hero-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.6fr;
  gap: 64px;
  /* the stacked logo sits centered against the full height of the
     header+body text column beside it, not pinned to its baseline */
  align-items: center;
}
.hero-logo img { width: 100%; max-width: 210px; opacity: 0.96; }
.hero-headline { max-width: 15ch; }
.hero-copy .lead { margin-top: 26px; }
.hero-copy .lead:first-of-type { margin-top: var(--space-lg); }
.hero-image {
  margin: var(--space-3xl) auto 0;
  max-width: 1100px;
  height: 56vh;
  min-height: 340px;
  max-height: 620px;
  overflow: hidden;
  position: relative;
}
.hero-image img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; align-items: start; }
  .hero-logo img { max-width: 150px; }
}

/* ---------------- section 2: our perspective ---------------- */
/* (heading width and statement width now come from the shared rules
   above — every idea block in every section matches) */

/* ---------------- section 3: the community ---------------- */
/* GATHER / EXPERIENCE / EXCHANGE reuses .index-list (the one shared
   label+lead list component — deliberately not a new card/icon
   treatment) with its own top gap, since here it sits inside a text
   column instead of its own full-width row. Full .index-list rule is
   below, next to the other section that reused it first. */
/* more separation from the paragraph above, and a side-by-side layout
   (three open columns, not stacked rows) so the three activities read
   as one airy composition rather than a tight list glued to the copy.
   Compound .index-list.activities-list selectors so this overrides the
   shared .index-list component regardless of source order. */
.index-list.activities-list {
  margin-top: var(--space-3xl);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}
.index-list.activities-list li {
  display: block;
  padding: 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--hairline);
}
.index-list.activities-list li:last-child { border-bottom: none; }
.index-list.activities-list .subhead { display: block; margin-bottom: var(--space-xs); flex: none; }
.index-list.activities-list .lead { max-width: none; min-width: 0; }
@media (max-width: 900px) {
  .index-list.activities-list { grid-template-columns: 1fr; gap: var(--space-lg); }
}

/* ---------------- section 4: volume i ---------------- */
.volume-meta-row { display: flex; gap: 28px; }
.volume h2 { margin-top: 14px; }

.proof {
  margin-top: var(--space-2xl);
  max-width: var(--max-content);
  margin-left: auto;
  margin-right: auto;
}
.proof-dominant { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-raised); }
.proof-dominant img { width: 100%; height: 100%; object-fit: cover; }
/* one dominant photo, then equal-size supports underneath — every
   support photo is the same width and the same crop. Used as-is by the
   essay page's deeper gallery (.essay-proof); the homepage feature uses
   the --duo modifier below instead. */
.proof-support {
  margin-top: var(--space-sm);
  /* self-contained centering (not just inherited from a .proof parent)
     so this is reusable standalone, e.g. mid-page in a Volume feature */
  max-width: var(--max-content);
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}
.proof-support figure { margin: 0; overflow: hidden; background: var(--bg-raised); aspect-ratio: 4 / 3; }
.proof-support figure img { width: 100%; height: 100%; object-fit: cover; }
/* one shared breakpoint with every other structural stack on the site */
@media (max-width: 900px) {
  .proof-support { grid-template-columns: repeat(2, 1fr); }
}

/* --duo: an earlier two-photo variant (kept in case a future feature
   wants it) — a wide candid next to a narrower, taller atmospheric
   shot, at deliberately different scales rather than an even grid. */
.proof-support--duo {
  grid-template-columns: 1.6fr 1fr;
}
.proof-support--duo figure { aspect-ratio: auto; }
.proof-support--duo figure:first-child { aspect-ratio: 4 / 3; }
.proof-support--duo figure:last-child { aspect-ratio: 3 / 4; }

/* crop-bottom: bias an object-fit:cover crop toward the bottom of the
   frame, e.g. a portrait source placed in a wider box where the subject
   (a table, a doorway) sits low in the original photo. */
.crop-bottom { object-position: 50% 100%; }
/* crop-top: bias toward the upper part of the frame (faces near the top) */
.crop-top { object-position: 50% 20%; }
@media (max-width: 900px) {
  .proof-support--duo { grid-template-columns: 1fr; }
  .proof-support--duo figure:first-child,
  .proof-support--duo figure:last-child { aspect-ratio: 4 / 3; }
}

/* cluster: one dominant image beside two smaller supporting images —
   the asymmetric alternative to an equal-size grid. Shared by any
   "Gatherings" feature (the homepage's Volume teaser) and a Volume
   page's own photography beats (e.g. "The Evening"). Never a 50/50
   pair and never an equal three-up grid. */
.cluster {
  margin-top: var(--space-2xl);
  max-width: var(--max-content);
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-sm);
  /* a defined height (same clamp logic as .hero-image) rather than
     per-figure aspect-ratio — the two rows need a real height to
     split evenly, since the dominant figure spans both */
  height: clamp(380px, 34vw, 560px);
}
.cluster figure { margin: 0; height: 100%; overflow: hidden; background: var(--bg-raised); }
.cluster figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cluster-dominant { grid-row: 1 / 3; }

/* --flip: mirror the layout so the dominant image sits on the right
   and the two smaller supports stack on the left (e.g. "The Place",
   where the wider environmental shot should anchor last). Same
   proportions as .cluster, just reversed. */
.cluster--flip { grid-template-columns: 1fr 1.7fr; }
.cluster--flip .cluster-dominant { grid-column: 2; grid-row: 1 / 3; }
.cluster--flip .cluster-support:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.cluster--flip .cluster-support:nth-of-type(2) { grid-column: 1; grid-row: 2; }

@media (max-width: 900px) {
  .cluster { grid-template-columns: 1fr; grid-template-rows: none; height: auto; }
  .cluster-dominant, .cluster-support { grid-row: auto; height: auto; aspect-ratio: 4 / 3; }
  .cluster--flip .cluster-dominant, .cluster--flip .cluster-support { grid-column: auto; }
}

/* the shared label+lead list component for GATHER / EXPERIENCE /
   EXCHANGE (section 3) — plain rows, no cards or icons */
.index-list { list-style: none; margin: 0; padding: 0; }
.index-list li {
  padding: 26px 0;
  border-top: 1px solid var(--hairline);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 24px;
}
.index-list li:last-child { border-bottom: 1px solid var(--hairline); }
.index-list .subhead { flex: 0 0 190px; }
.index-list .lead { flex: 1; min-width: 220px; }

/* ---------------- section 5: exploration ---------------- */
/* "More to come." is this section's ACCENT line — it uses the same
   .statement treatment as every other pull-line on the site, not its
   own heading level. */

/* image-placeholder: a clearly-a-placeholder fill for an .idea-image
   slot that doesn't have final photography yet. Same box (aspect-ratio,
   size, responsive behavior) as every other .idea-image — only the
   inside differs — so dropping a real <img> in later is a one-line
   swap with no layout change. */
.image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  text-align: center;
  background:
    repeating-linear-gradient(135deg, var(--hairline) 0 1px, transparent 1px 14px),
    var(--bg-raised);
}
.image-placeholder span {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.9;
  color: var(--ink-faint);
}

/* ---------------- section 6: interest list ---------------- */
/* .interested-grid is a .split (photo | form) too */
.interested-grid { margin-top: var(--space-2xl); align-items: start; }

.interest-form { display: flex; flex-direction: column; gap: 22px; max-width: 420px; }
.field input, .field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline-strong);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14px;
  padding: 12px 2px;
  outline: none;
  transition: border-color var(--ease-fast);
  resize: none;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:focus, .field textarea:focus { border-color: var(--accent); }

.form-submit {
  margin-top: 6px;
  width: 100%;
  background: none;
  border: 1px solid var(--accent);
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 16px;
  transition: background var(--ease-med), color var(--ease-med);
}
.form-submit:hover { background: var(--accent); color: var(--bg); }
.form-submit:disabled { opacity: 0.5; cursor: default; }
.form-submit:hover:disabled { background: none; color: var(--accent); }

.form-note { margin-top: var(--space-md); font-size: 12px; color: var(--ink-faint); min-height: 18px; }
.form-note.is-error { color: var(--error); }

/* ---------------- footer ---------------- */
.site-footer {
  /* typography comes from the shared .meta rule above; this rule is
     layout only */
  padding: 56px var(--section-pad-x);
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
/* footer logo: the same horizontal lockup image as the header, kept small
   (16px tall, about the width of the old text wordmark), no drop-shadow */
.site-footer-logo { display: block; }
.site-footer-logo img { display: block; height: 16px; width: auto; }
.site-footer .links { display: flex; gap: 28px; }
.site-footer .links a { transition: color var(--ease-fast); }
.site-footer .links a:hover { color: var(--ink); }
@media (max-width: 560px) {
  .site-footer { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
}

/* ---------------- reveal-on-scroll ---------------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--ease-slow), transform var(--ease-slow); }
  .reveal.is-visible { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Volume template — reusable across every Creators of Place gathering
   page (Volume I, II, …). Inherits the homepage's type system entirely
   (category/h2/lead/statement/split/idea-image); the only additions
   here are layout primitives generic enough for any future Volume, so
   nothing below is Seattle-specific.
   ========================================================================== */

em, i { font-style: italic; }

/* volume-intro: the opening — a small meta column beside the primary
   header/body/accent column. Deliberately not a hero: no full-bleed
   image, same restrained composition as any other homepage section. */
.volume-intro {
  max-width: var(--max-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.6fr 1.6fr;
  gap: var(--section-pad-x);
  align-items: start;
}
.volume-intro .volume-meta-col .meta { display: block; margin-top: var(--space-xs); }
@media (max-width: 900px) {
  .volume-intro { grid-template-columns: 1fr; gap: var(--space-md); }
}

/* editorial-figure: a single contained photograph used to punctuate
   running copy (the opening image, a solo moment in "The Evening", the
   closing photograph). Always capped well short of full width/viewport
   — an editorial image, never a hero or a splash. */
.editorial-figure {
  margin: var(--space-2xl) auto 0;
  overflow: hidden;
  background: var(--bg-raised);
}
.editorial-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.editorial-figure--wide { max-width: calc(var(--max-content) * 0.78); aspect-ratio: 16 / 10; }
.editorial-figure--narrow { max-width: calc(var(--max-content) * 0.52); aspect-ratio: 4 / 3; }
@media (max-width: 900px) {
  .editorial-figure--wide, .editorial-figure--narrow { max-width: 100%; }
}

/* offset modifiers: break an editorial-figure out of dead-center so a
   sequence of images/text/pull-statements reads as an intentional
   layout rather than one uniform centered column (used by "The
   Conversation" to alternate sides through its sequence). */
.editorial-figure--offset-left { margin-left: 0; }
.editorial-figure--offset-right { margin-left: auto; margin-right: 0; }

/* editorial-block: consistent rhythm for a photography beat that isn't
   a single .editorial-figure (e.g. a .proof-support--duo pair used
   mid-page rather than under a dominant photo). */
.editorial-block { margin-top: var(--space-2xl); }

/* around-the-table: the restrained organizations line in "The Table" —
   plain running type, not a list, not cards, not logos. */
.around-the-table-label { display: block; margin-top: var(--space-lg); margin-bottom: var(--space-xs); }
.around-the-table { color: var(--ink-dim); }

/* volume-closing: one photograph, then a compact meta/header/CTA close
   — never another paragraph explaining Creators of Place. */
.volume-closing { text-align: center; padding-top: var(--space-3xl); }
.volume-closing .meta { display: block; }
.volume-closing h2 { margin: var(--space-sm) auto 0; }
.volume-closing .text-link { margin-top: var(--space-lg); }

/* a subtle active state for the current page's nav item — color only,
   no box, no underline */
.site-header nav a.is-active { color: var(--ink); }

/* honeypot field for the interest form: off-screen, never shown */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }