/* ==========================================================================
   shithin.com — "FIELD NOTES"
   A cinematic editorial journal. Built as a print object, not a product page.

   Design rules this file enforces:
     · Serif and monospace only. No UI sans-serif anywhere. The absence of a
       neutral interface grotesque is the single biggest reason this stops
       reading as a SaaS template.
     · Hairlines and rules, not cards, shadows or glass. Nothing floats.
     · Asymmetry over centred stacks. Type sits where a magazine would put it.
     · One warm accent (amber / golden hour) instead of a tech green.
     · Numbered chapters, folios, coordinates and running heads — print
       furniture that makes a page feel authored rather than generated.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Ink — near-black, very slightly warm-green so it sits with the photography */
  --ink: #08090a;
  --ink-raise: #0d0f0e;
  --ink-figure: #111413;

  /* Bone — warm ivory. Pure #fff reads digital; this reads printed. */
  --bone: #efe9db;
  --bone-2: #d3cdbf;
  --muted: #96988d;
  --faint: #787b70;

  /* Accents — golden hour and laterite, not SaaS green */
  --amber: #d8a15c;
  --amber-bright: #e8bd85;
  --rust: #a85f3e;
  --moss: #8a9a7c;

  --line: rgba(239, 233, 219, 0.16);
  --line-soft: rgba(239, 233, 219, 0.075);
  --amber-line: rgba(216, 161, 92, 0.4);

  /* Type */
  --display: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --body: 'Newsreader', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Space & rhythm */
  --maxw: 1300px;
  --gutter: clamp(20px, 5vw, 76px);
  --rail: 58px;
  --chapter-gap: clamp(96px, 15vw, 200px);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Climate — set on <html> by js/site.js. The forest stays the same place;
     only the hour and the weather change. */
  --clim-tint: transparent;
  --clim-strength: 0;
}

/* The same forest, three hours of the day. */
html[data-climate="night"] { --clim-tint: #060f16; --clim-strength: 0.55; }
html[data-climate="day"]   { --clim-tint: #26331f; --clim-strength: 0.09; }
html[data-climate="rain"]  { --clim-tint: #0a1820; --clim-strength: 0.62; }

/* Photographs are graded once, then nudged per climate. */
.clim-img { transition: filter 1.8s var(--ease), opacity 1.2s var(--ease); }
html[data-climate="night"] .clim-img { filter: brightness(0.80) saturate(0.74) hue-rotate(-8deg); }
html[data-climate="rain"]  .clim-img { filter: brightness(0.86) saturate(0.66) contrast(1.04); }
html[data-climate="day"]   .clim-img { filter: brightness(1.05) saturate(1.05); }

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--ink);
  color: var(--bone);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}

body {
  font-family: var(--body);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.62;
  overflow-x: hidden;
  position: relative;
  background: var(--ink);
  /* Film grain, fixed, barely visible — prints don't glow. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* The whole site sits inside the forest: one fixed, heavily blurred ground. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background: url('../img/forest-backdrop.webp') center / cover no-repeat;
  opacity: 0.55;
  pointer-events: none;
}
/* Climate wash above the ground, below the type. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  background: var(--clim-tint);
  opacity: var(--clim-strength);
  mix-blend-mode: multiply;
  pointer-events: none;
  transition: opacity 1.8s var(--ease), background 1.8s var(--ease);
}
main, .colophon { position: relative; z-index: 2; }

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 1px solid var(--amber);
  outline-offset: 4px;
}
::selection { background: var(--amber); color: #14100a; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--wide { max-width: 1520px; margin: 0 auto; padding: 0 var(--gutter); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--bone); color: var(--ink);
  padding: 14px 20px; font-family: var(--mono); font-size: 12px;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
.display,
.h1,
.h2,
.h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--bone);
  text-wrap: balance;
}

.display {
  font-size: clamp(30px, 8.6vw, 152px);
  line-height: 0.9;
  letter-spacing: -0.028em;
}

.h1 {
  font-size: clamp(30px, 6.2vw, 92px);
  line-height: 0.94;
  letter-spacing: -0.022em;
}

.h2 {
  font-size: clamp(26px, 4.6vw, 72px);
  line-height: 0.96;
  letter-spacing: -0.018em;
}

.h3 {
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1.08;
}

/* Italic is the editorial emphasis device: one word per headline, warm not neon. */
em, .ital {
  font-style: italic;
  color: var(--amber);
}

.lede {
  font-family: var(--body);
  font-size: clamp(19px, 1.9vw, 25px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--bone-2);
  max-width: 46ch;
}

.body {
  color: var(--bone-2);
  font-size: 17px;
  line-height: 1.68;
  max-width: 62ch;
}
.body p + p { margin-top: 1.1em; }
.body strong { color: var(--bone); font-weight: 500; }
.body a {
  color: var(--bone);
  border-bottom: 1px solid var(--amber-line);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.body a:hover { color: var(--amber-bright); border-color: var(--amber); }

/* Micro-label: the workhorse of the editorial furniture. */
.label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.label--amber { color: var(--amber); }

/* A hairline that carries a label — the section break used throughout. */
.rule {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.rule__num { color: var(--amber); }

/* --------------------------------------------------------------------------
   4. Chrome — top bar + fixed left rail
   -------------------------------------------------------------------------- */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 1px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--amber);
  z-index: 200;
  pointer-events: none;
}
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--gutter);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease), padding 0.4s var(--ease);
}
.topbar.is-stuck {
  padding-top: 13px;
  padding-bottom: 13px;
  border-bottom-color: var(--line);
  background: rgba(8, 9, 10, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.wordmark {
  font-family: var(--display);
  font-size: 21px;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  color: var(--bone);
  white-space: nowrap;
}
.wordmark__dot {
  width: 5px; height: 5px;
  background: var(--amber);
  border-radius: 50%;
  flex: none;
  transform: translateY(-4px);
}
.wordmark em { font-style: italic; color: var(--bone-2); }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 38px);
}
.nav a {
  position: relative;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 4px;
  transition: color 0.25s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--bone); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

/* Fixed vertical rail: the spine of the journal. Hidden on small screens. */
.rail {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: var(--rail);
  z-index: 110;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 92px 0 28px;
  border-right: 1px solid var(--line-soft);
  pointer-events: none;
}
.rail__text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}
.rail__now {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
  white-space: nowrap;
  transition: opacity 0.3s var(--ease);
}
.rail__ticks {
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: center;
}
.rail__tick {
  width: 12px; height: 1px;
  background: var(--line);
  transition: background 0.4s var(--ease), width 0.4s var(--ease);
}
.rail__tick.is-on { background: var(--amber); width: 20px; }

body.has-rail { padding-left: var(--rail); }
body.has-rail .topbar { padding-left: calc(var(--gutter) + var(--rail)); }

/* --------------------------------------------------------------------------
   5. Overture — the opening plate
   -------------------------------------------------------------------------- */
.overture {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: 0 0 clamp(34px, 5vw, 58px);
}
.overture__media {
  position: absolute;
  inset: -8% 0 -8% 0;
  z-index: 0;
  will-change: transform;
}
.overture__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  filter: brightness(0.72) saturate(0.92) contrast(1.04);
  transform: scale(1.06);
  transition: transform 2.4s var(--ease-out);
}
.overture.is-in .overture__media img { transform: scale(1); }
.overture__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--ink) 2%, rgba(8, 9, 10, 0.55) 34%, rgba(8, 9, 10, 0.1) 66%, rgba(8, 9, 10, 0.72) 100%),
    linear-gradient(to right, rgba(8, 9, 10, 0.72) 0%, rgba(8, 9, 10, 0) 48%);
}

.overture__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

.overture__meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-2);
  margin-bottom: clamp(18px, 3vw, 30px);
  /* the row sits over photography, so it carries its own shadow for legibility */
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.95), 0 0 4px rgba(0, 0, 0, 0.9);
}
.overture__meta .divider { flex: 0 0 42px; height: 1px; background: var(--line); align-self: center; }
.overture__meta .coord { color: var(--muted); }
.overture__meta .coord::before {
  content: "·";
  margin-right: 10px;
  color: var(--faint);
}

.overture__title {
  max-width: 18ch;
  color: var(--bone);
  text-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
}
.overture__title em { color: var(--amber-bright); }

.overture__foot {
  position: relative;
  z-index: 2;
  margin-top: clamp(30px, 4.5vw, 52px);
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.95);
}
.overture__scroll {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--bone-2);
}
.overture__scroll::before {
  content: "";
  width: 1px; height: 26px;
  background: linear-gradient(to bottom, var(--amber), transparent);
  animation: drip 2.6s var(--ease) infinite;
  transform-origin: top;
}
@keyframes drip {
  0%   { transform: scaleY(0.2); opacity: 0.2; }
  50%  { transform: scaleY(1);   opacity: 1; }
  100% { transform: scaleY(0.2); opacity: 0.2; }
}
.overture__aside {
  max-width: 34ch;
  font-family: var(--body);
  font-size: 15px;
  font-style: italic;
  line-height: 1.55;
  color: var(--bone-2);
  text-align: right;
}

/* --------------------------------------------------------------------------
   6. Chapter shell
   -------------------------------------------------------------------------- */
.chapter {
  position: relative;
  padding: var(--chapter-gap) 0 0;
}
.chapter__head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: end;
  gap: clamp(20px, 4vw, 56px);
  padding-bottom: clamp(26px, 3.5vw, 44px);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(40px, 6vw, 78px);
}
.chapter__kicker {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.chapter__num {
  font-family: var(--display);
  font-size: clamp(30px, 5vw, 74px);
  line-height: 0.8;
  color: var(--amber);
  letter-spacing: -0.02em;
}
.chapter__title { margin-top: 16px; }
.chapter__note {
  font-family: var(--body);
  font-size: 18px;
  font-style: italic;
  line-height: 1.55;
  color: var(--bone-2);
  max-width: 38ch;
  justify-self: end;
  text-align: right;
}

/* Editorial two-column spread: statement left, running text right. */
.spread {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.spread--reverse .spread__aside { order: 2; }
.spread__main { max-width: none; }
.spread__main .h2 { margin-bottom: 0; }
.spread__aside { padding-top: 8px; }

/* Capability ledger: numbered rows, no boxes. */
.ledger { border-top: none; }
.ledger__row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(14px, 2.5vw, 36px);
  padding: clamp(18px, 2.4vw, 26px) 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
  transition: border-color 0.3s var(--ease);
}
.ledger__row:hover { border-bottom-color: var(--amber-line); }
.ledger__num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--amber);
}
.ledger__term {
  font-family: var(--display);
  font-size: clamp(21px, 2.2vw, 30px);
  line-height: 1.1;
  color: var(--bone);
}
.ledger__desc {
  font-family: var(--body);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   7. Index — products as a printed contents list, not cards
   -------------------------------------------------------------------------- */
.index { border-top: none; }
.index__row {
  position: relative;
  display: grid;
  grid-template-columns: 70px minmax(0, 1.15fr) minmax(0, 1.35fr) auto 40px;
  gap: clamp(12px, 2vw, 30px);
  align-items: center;
  padding: clamp(22px, 3vw, 34px) 0;
  border-bottom: 1px solid var(--line-soft);
  transition: padding 0.4s var(--ease), border-color 0.3s var(--ease);
}
.index__row:hover { border-bottom-color: var(--line); padding-left: 10px; }
.index__num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--faint);
  transition: color 0.3s var(--ease);
}
.index__row:hover .index__num { color: var(--amber); }
.index__name {
  font-family: var(--display);
  font-size: clamp(30px, 4.2vw, 58px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--bone);
  transition: color 0.3s var(--ease);
}
.index__row:hover .index__name { color: var(--amber-bright); }
.index__desc {
  font-family: var(--body);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 44ch;
}
.index__meta {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}
.index__arrow {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--faint);
  transition: transform 0.35s var(--ease), color 0.3s var(--ease);
  justify-self: end;
}
.index__row:hover .index__arrow { transform: translate(4px, -4px); color: var(--amber); }
.index__row:focus-visible { outline-offset: 2px; }

/* --------------------------------------------------------------------------
   8. Figure / full-bleed plate
   -------------------------------------------------------------------------- */
.plate {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.plate__media {
  position: relative;
  height: clamp(320px, 52vw, 620px);
  overflow: hidden;
}
.plate__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.62) saturate(0.9);
  will-change: transform;
}
.plate__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,9,10,0.92) 0%, rgba(8,9,10,0.15) 55%, rgba(8,9,10,0.5) 100%);
}
.plate__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 0 var(--gutter) clamp(24px, 4vw, 44px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.plate__quote {
  font-family: var(--display);
  font-size: clamp(28px, 4.4vw, 62px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--bone);
  max-width: 22ch;
}
.plate__quote em { color: var(--amber-bright); }
.plate__meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-2);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   9. Coda / contact
   -------------------------------------------------------------------------- */
.coda {
  padding: var(--chapter-gap) 0 clamp(80px, 10vw, 130px);
}
.coda__email {
  display: inline-block;
  font-family: var(--display);
  font-size: clamp(28px, 5.6vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--bone);
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.coda__email:hover { color: var(--amber-bright); border-color: var(--amber); }
.coda__links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 3vw, 44px);
  margin-top: clamp(36px, 5vw, 64px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.coda__links a {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  transition: color 0.25s var(--ease);
}
.coda__links a:hover { color: var(--amber); }
.coda__links span { color: var(--faint); }

/* --------------------------------------------------------------------------
   10. Subpage masthead
   -------------------------------------------------------------------------- */
.masthead {
  position: relative;
  padding: clamp(140px, 17vw, 210px) 0 clamp(40px, 6vw, 70px);
  overflow: hidden;
}
.masthead__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.masthead__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.55) saturate(0.8) contrast(1.02);
}
.masthead__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(8,9,10,0.55) 0%, rgba(8,9,10,0.88) 60%, var(--ink) 100%);
}
.masthead__inner { position: relative; z-index: 2; }
.masthead__index {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: clamp(20px, 3vw, 34px);
}
.masthead__no {
  font-family: var(--display);
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 0.8;
  color: var(--amber);
}
.masthead h1 { max-width: 20ch; }
.masthead__sub {
  margin-top: clamp(22px, 3vw, 34px);
  max-width: 52ch;
}

/* --------------------------------------------------------------------------
   11. Colophon — the end of the journal
   A thin forest plate with "Fin.", then the credits. Deliberately quiet: the
   giant name-over-clouds ending read as a different site.
   -------------------------------------------------------------------------- */
.colophon {
  position: relative;
  z-index: 2;
  margin-top: var(--chapter-gap);
}
.colophon__plate {
  position: relative;
  height: clamp(220px, 26vw, 340px);
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.colophon__plate-img {
  position: absolute;
  inset: 0;
  background: url('../img/forest-strip.webp') center 48% / cover no-repeat;
  filter: brightness(0.52) saturate(0.85);
}
.colophon__plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--ink) 0%, rgba(8, 9, 10, 0.35) 55%, rgba(8, 9, 10, 0.6) 100%);
}
.colophon__fin {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(16px, 3vw, 30px);
  z-index: 2;
  font-family: var(--display);
  font-size: clamp(34px, 6vw, 92px);
  line-height: 0.88;
  letter-spacing: -0.025em;
  color: var(--bone);
}
.colophon__fin em { font-style: italic; color: var(--amber); }
.colophon__fin span { color: var(--amber); }
.colophon__plate-meta {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(20px, 3vw, 34px);
  z-index: 2;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-2);
  text-align: right;
  line-height: 1.8;
}

.colophon__body {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 84px);
  align-items: start;
  padding: clamp(38px, 6vw, 76px) 0 0;
}
.colophon__name {
  font-family: var(--display);
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1;
  margin-top: 14px;
  letter-spacing: -0.015em;
}
.colophon__name em { font-style: italic; color: var(--amber); }
.colophon__line {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 40ch;
  margin-top: 16px;
}
.colophon__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 40px;
}
.colophon__col h4 {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 12px;
}
.colophon__col a {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 5px 0;
  transition: color 0.25s var(--ease), transform 0.3s var(--ease);
}
.colophon__col a:hover { color: var(--amber); transform: translateX(3px); }

.colophon__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: clamp(34px, 5vw, 58px);
  padding: 20px 0 34px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Ambience control — auto by climate, or pinned by hand. */
.ambience {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.ambience__label { color: var(--faint); }
.ambience button {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 2px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.ambience button:hover { color: var(--bone); }
.ambience button[aria-pressed="true"] {
  color: var(--amber);
  border-bottom-color: var(--amber-line);
}

/* --------------------------------------------------------------------------
   11a. Paths — three doors in, as a hairline index rather than a CTA block
   -------------------------------------------------------------------------- */
.paths {
  border-top: 1px solid var(--line);
  margin-top: clamp(30px, 4vw, 48px);
}
.path {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: clamp(14px, 2.5vw, 36px);
  align-items: baseline;
  padding: clamp(20px, 2.8vw, 30px) 0;
  border-bottom: 1px solid var(--line-soft);
  transition: padding 0.4s var(--ease), border-color 0.3s var(--ease);
}
.path:hover { border-bottom-color: var(--line); padding-left: 8px; }
.path__no {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--amber);
}
.path__body { display: block; }
.path__title {
  display: block;
  font-family: var(--display);
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--bone);
  transition: color 0.3s var(--ease);
}
.path:hover .path__title { color: var(--amber-bright); }
.path__desc {
  display: block;
  margin-top: 9px;
  font-family: var(--body);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 52ch;
}
.path__arrow {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--faint);
  transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}
.path:hover .path__arrow { color: var(--amber); transform: translateX(4px); }
.path__cta {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px solid var(--amber-line);
  padding: 11px 16px;
  white-space: nowrap;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
a.path__cta:hover, .path:hover .path__cta { background: var(--amber); color: #14100a; }

/* --------------------------------------------------------------------------
   11b. Fauna — the ambient layer the climate drives
   -------------------------------------------------------------------------- */
.fauna-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.fauna-field canvas { display: block; width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   11c. Screening — forest photographs handled as film frames
   -------------------------------------------------------------------------- */
.screening {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 26px);
}
.screening--feature {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}
.screening--feature .frame:first-child { grid-row: span 2; }

.frame {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}
.frame__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line);
}
.frame--tall .frame__media { aspect-ratio: 4 / 5; }
.screening--feature .frame__media { aspect-ratio: 16 / 9; }
.screening--feature .frame:not(:first-child) .frame__media { aspect-ratio: 2.39 / 1; }
.frame__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.015);
  transition: transform 1.4s var(--ease-out);
}
.frame:hover .frame__media img { transform: scale(1.06); }
.frame figcaption {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.frame__no { color: var(--amber); }
.frame__tc { margin-left: auto; color: var(--faint); }

/* An editorial figure beside running text. */
.figure-spread {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 84px);
  align-items: start;
}
.figure-spread__text { padding-top: 6px; }
.figure-spread .ledger__row {
  grid-template-columns: 74px minmax(0, 1fr);
  row-gap: 6px;
}
.figure-spread .ledger__num {
  font-size: 9px;
  letter-spacing: 0.06em;
}
.figure-spread .ledger__desc { grid-column: 2; }
.figure-spread .ledger__term { font-size: clamp(19px, 1.9vw, 26px); }

/* A slow drift on the feature frame, so the still is never quite still. */
@media (prefers-reduced-motion: no-preference) {
  .frame--drift .frame__media img {
    animation: ken 26s var(--ease) infinite alternate;
  }
  @keyframes ken {
    from { transform: scale(1.015) translate3d(0, 0, 0); }
    to   { transform: scale(1.075) translate3d(0, -1.2%, 0); }
  }
}

/* --------------------------------------------------------------------------
   12. Reveal choreography
   Scoped to .js so with JavaScript disabled every chapter is simply visible.
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.js [data-reveal].is-seen { opacity: 1; transform: none; }

.js [data-line] {
  clip-path: inset(0 0 108% 0);
  transform: translateY(0.12em);
  transition: clip-path 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
.js [data-line].is-seen { clip-path: inset(-20% 0 -20% 0); transform: none; }

/* hero loads immediately rather than waiting for a scroll event */
.js .overture [data-reveal] { opacity: 0; transform: translateY(26px); }
.js .overture .overture__media { opacity: 0; transition: opacity 1.6s var(--ease-out); }
.js .overture.is-in .overture__media { opacity: 1; }
.js .overture.is-in [data-reveal] { opacity: 1; transform: none; }
.js .overture.is-in [data-line] { clip-path: inset(-20% 0 -20% 0); transform: none; }

/* --------------------------------------------------------------------------
   12b. Disclosure — FAQ as printed question and answer
   -------------------------------------------------------------------------- */
details {
  border-bottom: 1px solid var(--line-soft);
  padding: 16px 0;
}
details summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  font-family: var(--display);
  font-size: clamp(19px, 1.9vw, 25px);
  line-height: 1.22;
  color: var(--bone);
  transition: color 0.25s var(--ease);
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: "+";
  font-family: var(--mono);
  font-size: 13px;
  color: var(--amber);
  flex: none;
  transition: transform 0.3s var(--ease);
}
details[open] summary { color: var(--amber-bright); }
details[open] summary::after { content: "−"; }
details p {
  margin-top: 12px;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--muted);
  max-width: 56ch;
}

/* Link rows (the ledger doubles as a directory on the contact page) */
a.ledger__row { color: inherit; }
a.ledger__row:hover .ledger__term { color: var(--amber-bright); }
.ledger__term { transition: color 0.25s var(--ease); }

/* --------------------------------------------------------------------------
   13. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .rail { display: none; }
  body.has-rail { padding-left: 0; }
  body.has-rail .topbar { padding-left: var(--gutter); }
}

@media (max-width: 900px) {
  .chapter__head { grid-template-columns: 1fr; align-items: start; }
  .chapter__note { justify-self: start; text-align: left; }
  .spread { grid-template-columns: 1fr; gap: 30px; }
  .spread__main { max-width: none; }
  .figure-spread { grid-template-columns: 1fr; gap: 32px; }
  .index__row {
    grid-template-columns: 46px minmax(0, 1fr) 28px;
    row-gap: 8px;
  }
  .index__desc { grid-column: 2 / 4; }
  .index__meta { grid-column: 2 / 3; }
  .index__arrow { grid-column: 3; grid-row: 1; }
  .ledger__row { grid-template-columns: 44px minmax(0, 1fr); }
  .ledger__desc { grid-column: 2; }
}

@media (max-width: 720px) {
  :root { --rail: 0px; }
  .topbar {
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 14px var(--gutter);
  }
  .nav {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }
  .nav a { font-size: 9px; letter-spacing: 0.1em; }
  body { font-size: 16px; }
  .nav { gap: 16px; }
  .nav a { font-size: 9.5px; letter-spacing: 0.12em; }
  .overture { min-height: 88svh; }
  .overture__aside { display: none; }
  .overture__meta { gap: 10px; font-size: 9px; }
  .overture__meta .coord::before { content: none; }
  .overture__meta .divider { flex-basis: 22px; }
  .overture__foot { font-size: 9px; }
  .plate__caption { flex-direction: column; align-items: flex-start; gap: 14px; }
  .screening { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .screening--feature { grid-template-columns: 1fr; }
  .screening--feature .frame:first-child { grid-row: auto; }
  .screening--feature .frame:not(:first-child) .frame__media { aspect-ratio: 16 / 9; }
  .colophon__body { grid-template-columns: 1fr; }
  .path { grid-template-columns: 40px minmax(0, 1fr); }
  .path__arrow, .path__cta { grid-column: 2; justify-self: start; margin-top: 12px; }
  .colophon__foot { flex-direction: column; align-items: flex-start; }
  .colophon__plate-meta { display: none; }
  .coda__links { gap: 16px; }
}

@media (max-width: 560px) {
  .screening { grid-template-columns: 1fr; }
  .colophon__links { grid-template-columns: 1fr 1fr; gap: 22px 24px; }
}

/* --------------------------------------------------------------------------
   14. Reduced motion — render every chapter in its final readable state
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js [data-reveal],
  .js [data-line],
  .js .overture__media {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}