/* ==========================================================================
   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; }
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 back-link, the footer, and quote
   attribution — rather than each coding its own near-duplicate. */
.meta,
.site-header nav a,
.back-link,
.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 ---------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px var(--section-pad-x);
  pointer-events: none;
}
.site-header .wordmark {
  pointer-events: auto;
}
.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); }

/* ---------------- 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-lg);
  max-width: var(--max-statement);
  font-size: clamp(22px, 2.6vw, 30px);
}

/* 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;
  align-items: end;
}
.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. */
.activities-list { margin-top: var(--space-xl); }

/* ---------------- 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, no more uneven
   4/3/3/2 spans */
.proof-support {
  margin-top: var(--space-sm);
  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); }
}

/* 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;
}
.site-footer .wordmark { color: var(--ink-dim); }
.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); }
}

/* ==========================================================================
   01-seattle essay page
   ========================================================================== */
.essay-hero {
  height: 100svh; min-height: 520px; position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--section-pad-x) 64px; overflow: hidden;
}
.essay-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.essay-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,7,5,0.15), rgba(10,7,5,0.92));
}
.essay-hero .inner { position: relative; z-index: 1; }
/* headline type comes from the shared .display class (added in the
   markup) rather than a one-off rule, so it matches the homepage exactly */
.essay-hero h1 { margin-top: 16px; }
.essay-hero .date { margin-top: 10px; }

.coda { text-align: center; padding: var(--pad-y-compact) var(--section-pad-x); }
.coda h2 { margin: 0 auto; }
.coda .text-link { margin-top: var(--space-lg); }
.back-link {
  /* typography comes from the shared .meta rule above */
  position: fixed; top: 28px; left: var(--section-pad-x); z-index: 41;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.9);
  transition: color var(--ease-fast);
}
.back-link:hover { color: var(--ink); }

.essay-block { max-width: var(--max-prose); margin: 0 auto; }
/* essay paragraphs share the homepage's .lead size/line-height exactly
   (set here rather than adding a class to every <p>) */
.essay-block p { margin-top: var(--space-md); font-family: var(--sans); font-size: clamp(16px, 1.6vw, 18px); line-height: 1.75; color: var(--ink-dim); }
.essay-block p + p { margin-top: 16px; }
em, i { font-style: italic; }

/* type comes from the shared .display class (added in the markup);
   this rule only carries the quote-specific layout */
.pull-quote {
  font-style: normal;
  max-width: 760px; margin: 0 auto; text-align: center;
}
.pull-quote cite {
  /* typography comes from the shared .meta rule above */
  display: block; margin-top: 22px; font-style: normal;
}

/* essay proof gallery — same hierarchy principle as the homepage, and
   the exact same top gap as .proof: one dominant photograph, a few
   supporting. no equal grid, no menu-card. */
.essay-proof .proof-dominant { aspect-ratio: 16 / 9; }
.essay-proof .proof-support figure { aspect-ratio: 4 / 3; }

.essay-block + .people-list { margin-top: var(--space-xl); }
.people-list { columns: 2; column-gap: 48px; max-width: 900px; margin: 0 auto; }
.people-list div { break-inside: avoid; padding: 10px 0; border-top: 1px solid var(--hairline); font-size: 14px; color: var(--ink-dim); }
.people-list b { color: var(--ink); font-weight: 400; }
.people-list span { color: var(--ink-faint); font-size: 12.5px; }
@media (max-width: 560px) { .people-list { columns: 1; } }