/* Of the Earth, shared sheet.
   Sibling to Field Notes: same two faces, same hairline register, shifted from
   kraft-envelope to soil. Nothing electric, no gradient text, no glass. */

@import url("https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  --bg-0: #0b0906;
  --bg-1: #14100b;
  --surface: #1c1710;
  --surface-2: #251e15;

  --ink: #ece4d2;
  --ink-2: #b9ac92;
  --mute: #7f7259;
  --mute-2: #4e4634;

  --line: rgba(236, 228, 210, 0.07);
  --line-strong: rgba(236, 228, 210, 0.18);

  --leader: #c99a4a;
  --ochre: #b07a2a;
  --oxblood: #a64238;

  --serif: "Spectral", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --measure: 34rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink);
  background-color: var(--bg-0);
  background-image:
    radial-gradient(120% 80% at 50% 0%, #191309 0%, var(--bg-0) 62%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.035'/></svg>");
  background-attachment: fixed;
}

a { color: inherit; }

/* ── type ─────────────────────────────────────────────────────────── */
h1, h2, h3 { font-weight: 400; letter-spacing: -0.005em; margin: 0; }
.eyebrow {
  font-family: var(--mono); font-size: 10.5px; font-weight: 400;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute);
}
.label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-2);
}
.dim { color: var(--mute); }
em { font-style: italic; color: var(--ink); }

/* ── masthead ─────────────────────────────────────────────────────── */
.mast {
  position: sticky; top: 0; z-index: 900;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 16px 30px;
  border-bottom: 1px solid var(--line);
  background: rgba(11, 9, 6, 0.88);
  backdrop-filter: blur(9px);
}
.mast-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.mast-mark { width: 21px; height: 21px; color: var(--leader); flex: none; }
.mast-name { font-size: 17px; font-weight: 400; letter-spacing: 0.01em; }
.mast-nav { display: flex; gap: 22px; align-items: center; }
.mast-nav a {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--mute); text-decoration: none;
  transition: color 180ms ease;
}
.mast-nav a:hover, .mast-nav a[aria-current] { color: var(--leader); }

/* ── shell ────────────────────────────────────────────────────────── */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 30px; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.05em; }

/* ── hero ─────────────────────────────────────────────────────────── */
.hero { padding: 92px 0 70px; }
.hero-title {
  font-size: clamp(46px, 8vw, 92px); line-height: 0.98; font-weight: 300;
  letter-spacing: -0.025em; margin-bottom: 26px;
}
.hero-sub {
  font-size: clamp(19px, 2.3vw, 24px); font-style: italic; color: var(--ink-2);
  font-weight: 300; max-width: 30rem; margin-bottom: 40px;
}
.epigraph {
  max-width: 38rem; padding: 26px 0 26px 26px;
  border-left: 2px solid var(--ochre);
  font-size: 18.5px; font-style: italic; color: var(--ink-2); line-height: 1.7;
}
.epigraph cite {
  display: block; margin-top: 14px; font-style: normal;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--mute);
}

/* ── stat strip ───────────────────────────────────────────────────── */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.stat { padding: 20px 22px 20px 0; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat-n { font-size: 30px; font-weight: 300; line-height: 1; color: var(--leader); }
.stat-l {
  display: block; margin-top: 8px; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--mute);
}

/* ── section heads ────────────────────────────────────────────────── */
.sec { padding: 62px 0 12px; }
.sec-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 8px; }
.sec-num {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  color: var(--mute-2); flex: none;
}
.sec-title { font-size: 27px; font-weight: 400; letter-spacing: -0.01em; }
.sec-note { max-width: var(--measure); color: var(--mute); font-size: 15.5px; margin: 10px 0 30px; }

/* ── motif groups ─────────────────────────────────────────────────── */
.motif-group { margin-bottom: 54px; }
.motif-head {
  display: flex; align-items: baseline; gap: 13px;
  padding-bottom: 12px; margin-bottom: 20px;
  border-bottom: 1px solid var(--line-strong);
}
.motif-pip { width: 9px; height: 9px; border-radius: 50%; background: var(--m); flex: none; align-self: center; }
.motif-name { font-size: 19px; font-weight: 400; }
.motif-gloss { font-size: 14.5px; font-style: italic; color: var(--mute); }
.motif-count { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--mute-2); }

/* ── place cards ──────────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1px; background: var(--line); }
.card {
  display: block; text-decoration: none; padding: 22px 22px 24px;
  background: var(--surface); border-left: 2px solid var(--m, var(--mute-2));
  transition: background 200ms ease, transform 200ms ease;
}
.card:hover { background: var(--surface-2); }
.card-top { display: flex; align-items: baseline; gap: 9px; margin-bottom: 9px; }
.card-region { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); }
.card-title { font-size: 21px; font-weight: 400; line-height: 1.2; margin-bottom: 4px; }
.card-locale { font-family: var(--mono); font-size: 10.5px; color: var(--mute-2); letter-spacing: 0.05em; margin-bottom: 13px; }
.card-hook { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin-bottom: 16px; }
.card-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.pip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-2);
}
.pip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--p); }
.pip-sep { color: var(--mute-2); }
.seal {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 3px 7px; border: 1px solid var(--line-strong); color: var(--mute);
}
.seal.withheld { border-color: rgba(166, 66, 56, 0.5); color: #c47a70; }
.seal.restricted { border-color: rgba(176, 122, 42, 0.45); color: var(--ochre); }

/* ── filter bar ───────────────────────────────────────────────────── */
.filters { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 30px; }
.filters button {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase;
  padding: 6px 11px; background: transparent; color: var(--mute);
  border: 1px solid var(--line-strong); cursor: pointer; transition: all 170ms ease;
}
.filters button:hover { color: var(--ink-2); }
.filters button[aria-pressed="true"] { color: var(--bg-0); background: var(--leader); border-color: var(--leader); }

/* ── folio ────────────────────────────────────────────────────────── */
.folio { max-width: 940px; margin: 0 auto; padding: 0 30px 110px; }
.folio-head { padding: 62px 0 34px; }
.folio-title { font-size: clamp(38px, 6vw, 62px); line-height: 1.02; font-weight: 300; letter-spacing: -0.025em; }
.folio-hook { font-size: 20px; font-style: italic; color: var(--ink-2); max-width: 33rem; margin-top: 22px; line-height: 1.58; }

.meta-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line);
}
.meta { padding: 16px 20px 16px 0; border-right: 1px solid var(--line); }
.meta:last-child { border-right: 0; }
.meta-l { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute-2); margin-bottom: 7px; }
.meta-v { font-size: 15px; color: var(--ink-2); line-height: 1.4; }

/* the names stack: the page refuses a single title */
.names { margin: 44px 0; border-top: 1px solid var(--line-strong); }
.name-row { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(120px, 0.9fr) 2fr; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.name-n { font-size: 18px; }
.name-lang { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ochre); }
.name-m { font-size: 14.5px; color: var(--mute); font-style: italic; line-height: 1.5; }

/* what is / what can be */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-strong); margin: 44px 0; }
.pair > div { background: var(--bg-0); padding: 24px 26px 26px; }
.pair-l { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute); margin-bottom: 14px; }
.pair-state { font-size: 21px; margin-bottom: 12px; display: flex; align-items: center; gap: 9px; }
.pair-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--p); flex: none; }
.pair-line { font-size: 15.5px; color: var(--ink-2); line-height: 1.62; }

/* the strata: six blocks, six soil horizons, surface to bedrock */
.strata { margin: 54px 0; }
.horizon { display: grid; grid-template-columns: 74px 1fr; gap: 26px; padding: 30px 0; border-top: 1px solid var(--line); }
.horizon:last-child { border-bottom: 1px solid var(--line); }
.horizon-gut { position: relative; text-align: right; padding-top: 3px; }
.horizon-letter { font-family: var(--mono); font-size: 26px; font-weight: 500; color: var(--mute-2); line-height: 1; }
.horizon-depth { display: block; margin-top: 7px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; color: var(--mute-2); }
.horizon-t { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ochre); margin-bottom: 13px; }
.horizon-b { font-size: 17px; line-height: 1.68; color: var(--ink); max-width: var(--measure); }
.horizon-b p { margin: 0 0 1em; }

/* the hole where a story is not published */
.withheld-box {
  border: 1px solid rgba(166, 66, 56, 0.42);
  padding: 30px 30px 32px; max-width: var(--measure);
  background: repeating-linear-gradient(-45deg, transparent, transparent 11px, rgba(166,66,56,0.045) 11px, rgba(166,66,56,0.045) 22px);
}
.withheld-t { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: #c47a70; margin-bottom: 15px; }
.withheld-n { font-size: 16px; font-style: italic; color: var(--ink-2); line-height: 1.68; }

.steward-box { border: 1px solid var(--line-strong); padding: 26px 28px; margin: 44px 0; max-width: var(--measure); }
.sources { margin: 44px 0; }
.source { display: grid; grid-template-columns: 84px 1fr; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.source-kind { font-family: var(--mono); font-size: 9px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--mute-2); padding-top: 4px; }
.source-kind.community { color: var(--leader); }
.source-kind.collector { color: var(--oxblood); }
.source-who { color: var(--mute); font-style: italic; }

.foot { border-top: 1px solid var(--line); padding: 40px 0 70px; margin-top: 70px; }
.foot-in { display: flex; justify-content: space-between; gap: 26px; flex-wrap: wrap; align-items: baseline; }
.foot p { font-size: 14px; color: var(--mute); max-width: 30rem; margin: 0; }
.foot-motto { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute-2); }

@media (max-width: 760px) {
  body { font-size: 16.5px; }
  .wrap, .folio { padding-left: 20px; padding-right: 20px; }
  .mast { padding: 14px 20px; }
  .mast-nav { gap: 15px; }
  .pair { grid-template-columns: 1fr; }
  .horizon { grid-template-columns: 44px 1fr; gap: 16px; }
  .horizon-letter { font-size: 20px; }
  .name-row { grid-template-columns: 1fr; gap: 5px; }
  .source { grid-template-columns: 1fr; gap: 4px; }
}

/* ── hero rotation ─────────────────────────────────────────────────
   Built for land, not for portraits, so it diverges from the Field Notes
   hero on four counts:
   1. the slide IS a folio and is clickable, not decoration
   2. the caption carries the place's own name plus what is / what can be,
      so the archive's argument is in the furniture of the front page
   3. no sepia. These are living places photographed last year, and toning
      them into an archival brown would make them look like specimens,
      which is the exact framing this project argues against
   4. slower. 7s hold, 1.6s fade. Land is not a face you glance at. */
.hero-stage {
  position: relative; height: min(76vh, 760px); min-height: 480px;
  overflow: hidden; border-bottom: 1px solid var(--line-strong);
  display: flex; align-items: flex-end;
}
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1600ms ease-in-out;
  background-position: center 45%; background-size: cover; background-repeat: no-repeat;
  background-color: var(--bg-1);
  transform: scale(1.03);
  animation: heroDrift 34s ease-in-out infinite alternate;
  /* a light unifying grade only, so heterogeneous photographs share a room
     without being falsified into archive brown */
  filter: saturate(0.92) contrast(1.02);
}
@keyframes heroDrift { from { transform: scale(1.03) translate3d(0,0,0); } to { transform: scale(1.11) translate3d(-1.2%,-1%,0); } }
.hero-slide.on { opacity: 1; }
.hero-slides::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(11,9,6,0.55) 0%, rgba(11,9,6,0.04) 30%, rgba(11,9,6,0.42) 60%, rgba(11,9,6,0.93) 90%, var(--bg-0) 100%),
    linear-gradient(to right, rgba(11,9,6,0.62) 0%, rgba(11,9,6,0) 52%);
}
.hero-frame { position: relative; z-index: 2; width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 30px 40px; }
.hero-stage .hero-title { font-size: clamp(44px, 7.6vw, 88px); line-height: 0.98; font-weight: 300; letter-spacing: -0.028em; margin-bottom: 18px; }
.hero-stage .hero-sub { font-size: clamp(17px, 2vw, 21px); font-style: italic; color: var(--ink-2); max-width: 31rem; margin-bottom: 34px; }

/* the rotating plate: this place, its name, and both columns */
.hero-plate {
  display: block; text-decoration: none;
  border-top: 1px solid var(--line-strong); padding-top: 15px;
  max-width: 640px; transition: border-color 220ms ease;
}
.hero-plate:hover { border-top-color: var(--leader); }
.hero-plate-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 7px; }
.hero-plate-name { font-size: 23px; font-weight: 400; line-height: 1.15; margin-bottom: 3px; }
.hero-plate-cap { font-size: 14.5px; font-style: italic; color: var(--ink-2); margin: 0 0 11px; }
.hero-plate-cols { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero-col { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.hero-col span:first-child { color: var(--mute); }
.hero-col b { font-weight: 400; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.hero-col b::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--p); }
.hero-arrow { font-family: var(--mono); font-size: 10px; color: var(--leader); letter-spacing: 0.14em; }

/* Covenant III applies to pictures: the photographer is on the page */
.hero-credit {
  position: absolute; right: 30px; bottom: 18px; z-index: 2; text-align: right;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.1em;
  color: var(--mute-2); max-width: 270px; line-height: 1.6;
}
.hero-credit a { color: var(--mute); text-decoration: none; }
.hero-credit a:hover { color: var(--ink-2); }

.hero-ticks { display: flex; gap: 5px; margin-top: 22px; }
.hero-tick { width: 21px; height: 2px; background: rgba(236,228,210,0.2); border: 0; padding: 0; cursor: pointer; transition: background 300ms ease; }
.hero-tick[aria-current="true"] { background: var(--leader); }

@media (prefers-reduced-motion: reduce) {
  .hero-slide { animation: none; transform: none; transition: opacity 300ms linear; }
}
@media (max-width: 760px) {
  .hero-stage { height: auto; min-height: 0; padding-top: 220px; }
  .hero-frame { padding: 0 20px 32px; }
  .hero-credit { display: none; }
}

/* ── folio plate ───────────────────────────────────────────────────
   The photograph sits under the hook, not above the title. The place is
   named first and shown second, which is the order Rule I implies. */
.folio-plate { margin: 6px 0 40px; }
.folio-plate img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; filter: saturate(0.92) contrast(1.02); }
.folio-plate-cap {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-top: 9px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--mute-2); line-height: 1.7;
}
.folio-plate-cap em { font-family: var(--serif); font-size: 13.5px; letter-spacing: 0; color: var(--ink-2); }
.folio-plate-cap a { color: var(--mute); text-decoration: none; }
.folio-plate-cap a:hover { color: var(--ink-2); }