/* ============================================================
   Mark Ulett — Personal site
   Sub-brand of BeargrassAI. Paper-primary; SOFT-axis Fraunces;
   saddle accent; editorial measure.
   ============================================================ */

@font-face {
  font-family: "Fraunces";
  src: url("./fonts/fraunces-vf.ttf") format("truetype-variations"),
       url("./fonts/fraunces-vf.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Inherited BeargrassAI tokens */
  --ink:           #231f1a;
  --barn:          #a64b3b;
  --cream:         #f0e6cf;
  --warm-bright:   #f4c45a;
  --night:         #16212e;
  --paper:         #f4ebd7;

  /* Mark Ulett personal extension */
  --saddle:        #5d3220;          /* personal accent */
  --saddle-deep:   #3d1f10;          /* hover / press */
  --paper-warm:    #efe4c8;          /* one step deeper than paper */
  --paper-warmer:  #e8dcc0;          /* sunk well */
  --surface-card:  #f8f0dc;          /* card on paper */

  --fg:            var(--ink);
  --fg-muted:      #6b6359;
  --fg-subtle:     #8d8678;
  --fg-faint:      #a89e8a;

  --rule:          rgba(35, 31, 26, 0.16);
  --rule-strong:   rgba(35, 31, 26, 0.32);
  --rule-faint:    rgba(35, 31, 26, 0.08);

  /* Type */
  --font-serif:    "Fraunces", "Iowan Old Style", "Palatino", Georgia, serif;
  --font-mono:     ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Editorial scale — slightly larger than BeargrassAI's website tokens
     because this is a reading surface, not a marketing surface */
  --t-xs:    11px;
  --t-sm:    14px;
  --t-base:  18px;
  --t-md:    21px;
  --t-lg:    26px;
  --t-xl:    34px;
  --t-2xl:   46px;
  --t-3xl:   64px;
  --t-4xl:   92px;

  --measure:       640px;     /* reading column */
  --measure-wide:  920px;     /* TOC / index pages */
  --gutter:        max(24px, 5vw);

  --s-1:  4px;  --s-2:  8px;  --s-3:  12px; --s-4:  16px;
  --s-5:  24px; --s-6:  32px; --s-7:  48px; --s-8:  64px;
  --s-9:  96px; --s-10: 128px;

  --r-sm: 2px; --r-md: 4px; --r-lg: 8px;

  --shadow-1: 0 1px 0 rgba(35, 31, 26, 0.06), 0 1px 2px rgba(35, 31, 26, 0.04);
  --shadow-2: 0 1px 0 rgba(35, 31, 26, 0.08), 0 4px 12px rgba(35, 31, 26, 0.06);

  --ease:        cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast:    120ms;
  --dur:         200ms;
  --dur-slow:    320ms;
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--fg);
  font-family: var(--font-serif);
  font-size: var(--t-base);
  line-height: 1.6;
  font-weight: 400;
  font-variation-settings: "opsz" 14, "SOFT" 30;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--warm-bright); color: var(--ink); }

/* ============================================================
   Type system
   ============================================================ */

h1, h2, h3, h4, p { margin: 0; }

.t-display {
  font-family: var(--font-serif);
  font-size: clamp(52px, 9vw, var(--t-4xl));
  line-height: 0.95;
  letter-spacing: -0.025em;
  font-weight: 600;
  font-variation-settings: "opsz" 120, "SOFT" 40;
  text-wrap: balance;
}

.t-h1 {
  font-family: var(--font-serif);
  font-size: clamp(36px, 5.2vw, var(--t-3xl));
  line-height: 1.02;
  letter-spacing: -0.018em;
  font-weight: 580;
  font-variation-settings: "opsz" 60, "SOFT" 35;
  text-wrap: balance;
}

.t-h2 {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.6vw, var(--t-2xl));
  line-height: 1.08;
  letter-spacing: -0.012em;
  font-weight: 560;
  font-variation-settings: "opsz" 40, "SOFT" 30;
  text-wrap: balance;
}

.t-h3 {
  font-family: var(--font-serif);
  font-size: var(--t-xl);
  line-height: 1.15;
  letter-spacing: -0.005em;
  font-weight: 580;
  font-variation-settings: "opsz" 30, "SOFT" 25;
}

.t-h4 {
  font-family: var(--font-serif);
  font-size: var(--t-lg);
  line-height: 1.25;
  font-weight: 600;
  font-variation-settings: "opsz" 24, "SOFT" 20;
}

.t-lede {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.4vw, var(--t-md));
  line-height: 1.45;
  font-weight: 400;
  font-style: italic;
  font-variation-settings: "opsz" 28, "SOFT" 55;
  color: var(--fg);
  text-wrap: pretty;
}

p {
  text-wrap: pretty;
  hanging-punctuation: first;
}

.t-caption {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-feature-settings: "tnum";
}

.t-meta {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  font-feature-settings: "tnum";
}

.t-italic { font-style: italic; }

a {
  color: var(--saddle);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(93, 50, 32, 0.4);
  transition: text-decoration-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
a:hover { text-decoration-color: currentColor; color: var(--saddle-deep); }

/* ============================================================
   Wordmark — the brand's typographic moment.
   "Mark" SOFT 20 upright. "Ulett" SOFT 60 italic + 4° oblique.
   Doubled baseline rule beneath.
   ============================================================ */

.wm {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
}

.wm-row {
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
}

.wm-mark {
  font-family: var(--font-serif);
  font-weight: 620;
  font-variation-settings: "opsz" 60, "SOFT" 20;
  letter-spacing: -0.018em;
}

.wm-ulett {
  font-family: var(--font-serif);
  font-weight: 460;
  font-style: italic;
  font-variation-settings: "opsz" 60, "SOFT" 60;
  letter-spacing: -0.005em;
  /* Brand's typographic move: 4° synthetic oblique on the soft segment
     (mirrors BeargrassAI's 4° oblique on "AI"). The font is already italic;
     the additional skew exaggerates the lean. */
  transform: skewX(-2.5deg);
  transform-origin: left bottom;
  color: var(--saddle);
}

/* Doubled baseline rule — 2 parallel 2px strokes with 2px gap */
.wm-rule {
  margin-top: 0.18em;
  height: 6px;
  width: 100%;
  background-image:
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--saddle), var(--saddle));
  background-size: 100% 2px, 100% 2px;
  background-position: 0 0, 0 4px;
  background-repeat: no-repeat;
}

/* Small inline wordmark — for nav, footer */
.wm--sm .wm-mark { font-size: 22px; }
.wm--sm .wm-ulett { font-size: 22px; }
.wm--sm .wm-rule { height: 4px; background-size: 100% 1px, 100% 1px; background-position: 0 0, 0 3px; }

.wm--md .wm-mark { font-size: 36px; }
.wm--md .wm-ulett { font-size: 36px; }

.wm--xl .wm-mark { font-size: clamp(64px, 11vw, 140px); }
.wm--xl .wm-ulett { font-size: clamp(64px, 11vw, 140px); }
.wm--xl .wm-rule { height: 10px; background-size: 100% 3px, 100% 3px; background-position: 0 0, 0 7px; }

/* ============================================================
   Page chrome — nav + footer
   ============================================================ */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}

.site-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

.site-nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-nav-links a {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  font-variation-settings: "opsz" 14, "SOFT" 25;
  color: var(--fg-muted);
  text-decoration: none;
  letter-spacing: 0.01em;
  position: relative;
  padding: 4px 0;
  transition: color var(--dur) var(--ease);
}
.site-nav-links a:hover { color: var(--ink); }
.site-nav-links a[aria-current="page"] {
  color: var(--ink);
}
.site-nav-links a[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  background: var(--saddle);
}

/* CTA-styled nav item (Contact). Contained button look, stands apart from
   the underline/text nav items. */
.site-nav-links a.nav-cta {
  color: var(--ink);
  background: var(--warm-bright);
  padding: 7px 14px;
  border-radius: var(--r-md);
  font-weight: 560;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.site-nav-links a.nav-cta:hover {
  background: var(--saddle);
  color: var(--cream);
}
.site-nav-links a.nav-cta[aria-current="page"] {
  background: var(--saddle);
  color: var(--cream);
}
.site-nav-links a.nav-cta[aria-current="page"]::after {
  display: none;  /* no underline marker — the contained background is the cue */
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 8px 12px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

@media (max-width: 720px) {
  .site-nav-links { display: none; }
  .nav-toggle { display: block; }
  .site-nav.is-open { padding-bottom: 8px; }
  .site-nav.is-open .site-nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-3);
    flex-basis: 100%;
    padding: var(--s-4) var(--gutter) var(--s-3);
    margin-top: var(--s-3);
    border-top: 1px solid var(--rule);
  }
  .site-nav.is-open .site-nav-inner { flex-wrap: wrap; }
}

/* Footer */
.site-foot {
  margin-top: var(--s-10);
  padding: var(--s-8) 0 var(--s-7);
  border-top: 1px solid var(--rule);
  background: var(--paper-warm);
}

.site-foot-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: var(--s-7);
  align-items: start;
}
@media (max-width: 760px) {
  .site-foot-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .site-foot-inner { grid-template-columns: 1fr; }
}

.site-foot h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fg-subtle);
  margin-bottom: var(--s-4);
}

.site-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.site-foot a { font-size: 16px; color: var(--ink); text-decoration: none; }
.site-foot a:hover { color: var(--saddle); }

.foot-brand-note {
  font-size: 14px;
  color: var(--fg-muted);
  line-height: 1.55;
  margin-top: var(--s-3);
  max-width: 32ch;
}

.foot-bg-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
  padding: 6px 10px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  background: var(--paper);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.foot-bg-mark:hover { border-color: var(--saddle); color: var(--ink); }
.foot-bg-mark svg { color: var(--saddle); }

.site-foot-base {
  max-width: 1200px;
  margin: var(--s-8) auto 0;
  padding: var(--s-5) var(--gutter) 0;
  border-top: 1px solid var(--rule-faint);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

/* ============================================================
   Layout primitives
   ============================================================ */

.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--s-9) var(--gutter) 0;
}

.reading {
  max-width: var(--measure);
  margin: 0 auto;
}

.wide {
  max-width: var(--measure-wide);
  margin: 0 auto;
}

.stack > * + * { margin-top: var(--s-5); }
.stack-tight > * + * { margin-top: var(--s-3); }
.stack-wide > * + * { margin-top: var(--s-7); }

.prose p { font-size: var(--t-base); line-height: 1.7; color: var(--fg); }
.prose p + p { margin-top: var(--s-4); }
.prose strong { font-weight: 580; color: var(--ink); }
.prose em { font-style: italic; }

/* Section header pattern — caption + h2, with thin saddle rule above */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule-strong);
  margin-bottom: var(--s-6);
}
.section-head .t-caption { color: var(--saddle); }

/* Doubled-rule structural divider — used once per page max */
.divider-doubled {
  height: 10px;
  margin: var(--s-8) 0;
  background-image:
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--saddle), var(--saddle));
  background-size: 100% 1px, 100% 1px;
  background-position: 0 0, 0 4px;
  background-repeat: no-repeat;
}

/* Hairline divider */
hr {
  border: none;
  height: 1px;
  background: var(--rule);
  margin: var(--s-7) 0;
}

/* Pullquote */
.pullquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(24px, 3.2vw, 32px);
  line-height: 1.35;
  font-variation-settings: "opsz" 40, "SOFT" 55;
  color: var(--ink);
  margin: var(--s-8) 0;
  padding: 0;
  text-align: left;
  border: none;
  position: relative;
  padding-left: var(--s-5);
  border-left: 2px solid var(--saddle);
}

/* Caption block — date/location stamp */
.dateline {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.dateline .dot {
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--saddle);
}

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 12px 22px;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 540;
  font-variation-settings: "opsz" 14, "SOFT" 25;
  border-radius: var(--r-md);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn-primary {
  background: var(--saddle);
  color: var(--paper);
  border-color: var(--saddle);
}
.btn-primary:hover {
  background: var(--saddle-deep);
  border-color: var(--saddle-deep);
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn-ghost:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}
.btn-arrow::after {
  content: '→';
  margin-left: 4px;
  transition: transform var(--dur) var(--ease);
}
.btn:hover .btn-arrow::after,
.btn-arrow:hover::after { transform: translateX(3px); }

/* ============================================================
   Card recipes
   ============================================================ */

.card {
  background: var(--surface-card);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-6);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
a.card { color: inherit; text-decoration: none; display: block; }
a.card:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }

/* ============================================================
   Photography — full-bleed treated images
   ============================================================ */

.photo-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--ink);
}
.photo-bleed img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: cover;
}

.photo-frame {
  position: relative;
  background: var(--paper-warmer);
  padding: 0;
  border-radius: 0;
  overflow: hidden;
}
.photo-frame img {
  display: block;
  width: 100%;
  height: auto;
}
.photo-caption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-top: var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.photo-caption .figno {
  color: var(--saddle);
}

/* ============================================================
   TOC (Home) — almanac-style index of pages
   ============================================================ */

.toc {
  border-top: 1px solid var(--rule-strong);
}
.toc-row {
  display: grid;
  grid-template-columns: 60px 1.6fr 2.4fr auto;
  align-items: baseline;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur) var(--ease);
  margin: 0 calc(-1 * var(--s-3));
  padding-left: var(--s-3);
  padding-right: var(--s-3);
}
.toc-row:hover {
  background: var(--paper-warm);
}
.toc-row:hover .toc-arrow { transform: translateX(4px); color: var(--saddle); }

.toc-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--fg-subtle);
}
.toc-title {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 560;
  font-variation-settings: "opsz" 28, "SOFT" 25;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.toc-desc {
  font-family: var(--font-serif);
  font-size: 16px;
  font-style: italic;
  font-variation-settings: "opsz" 14, "SOFT" 50;
  color: var(--fg-muted);
  line-height: 1.45;
}
.toc-arrow {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--fg-subtle);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
@media (max-width: 720px) {
  .toc-row {
    grid-template-columns: 36px 1fr auto;
    gap: var(--s-4);
  }
  .toc-desc { display: none; }
  .toc-title { font-size: 22px; }
}

/* ============================================================
   Numbers (almanac)
   ============================================================ */

.numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-6) var(--s-7);
}
.number {
  border-top: 1px solid var(--rule-strong);
  padding-top: var(--s-3);
}
.number-figure {
  font-family: var(--font-serif);
  font-size: clamp(48px, 6vw, 76px);
  font-weight: 500;
  font-variation-settings: "opsz" 96, "SOFT" 45;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--saddle);
  display: block;
}
.number-figure sup {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--fg-subtle);
  letter-spacing: 0.1em;
  vertical-align: top;
  margin-left: 6px;
  position: relative;
  top: 0.4em;
}
.number-label {
  font-size: 15px;
  color: var(--fg-muted);
  line-height: 1.5;
  margin-top: var(--s-2);
  max-width: 28ch;
}

/* ============================================================
   Page header (sub-pages)
   ============================================================ */

.page-head {
  max-width: var(--measure);
  margin: 0 auto;
  padding-bottom: var(--s-7);
}
.page-head-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--saddle);
  margin-bottom: var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.page-head-eyebrow::before {
  content: '';
  width: 36px;
  height: 6px;
  background-image:
    linear-gradient(var(--saddle), var(--saddle)),
    linear-gradient(var(--saddle), var(--saddle));
  background-size: 100% 1px, 100% 1px;
  background-position: 0 1px, 0 4px;
  background-repeat: no-repeat;
}

/* ============================================================
   Marginalia (long-form pages) — Tufte-style side note
   ============================================================ */

.with-margin {
  display: grid;
  grid-template-columns: 1fr min(var(--measure), 100%) 1fr;
  column-gap: var(--s-5);
}
.with-margin > * { grid-column: 2; }
.with-margin > .margin-note {
  grid-column: 3;
  align-self: start;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.45;
  font-variation-settings: "opsz" 12, "SOFT" 55;
  color: var(--fg-muted);
  max-width: 24ch;
  padding-left: var(--s-4);
  border-left: 1px solid var(--saddle);
  margin-top: 6px;
}
@media (max-width: 960px) {
  .with-margin { grid-template-columns: 1fr; }
  .with-margin > * { grid-column: 1; }
  .with-margin > .margin-note {
    grid-column: 1;
    max-width: 36ch;
    margin-top: var(--s-3);
  }
}

/* ============================================================
   Resume-style entries
   ============================================================ */

.entries { list-style: none; padding: 0; margin: 0; }
.entry {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--rule);
}
.entry:first-child { border-top: 1px solid var(--rule-strong); }
.entry-date {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--fg-subtle);
  padding-top: 5px;
}
.entry-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  font-variation-settings: "opsz" 20, "SOFT" 25;
  color: var(--ink);
  margin: 0;
  line-height: 1.25;
}
.entry-role {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--fg-muted);
  margin: 2px 0 6px;
  font-variation-settings: "opsz" 14, "SOFT" 55;
}
.entry-desc {
  font-size: 16px;
  color: var(--fg);
  line-height: 1.55;
}
@media (max-width: 600px) {
  .entry { grid-template-columns: 1fr; gap: var(--s-2); }
}

/* ============================================================
   Now page — log book
   ============================================================ */

.logbook { list-style: none; padding: 0; margin: 0; }
.logbook li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  align-items: baseline;
}
.logbook li::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--saddle);
  margin-top: 8px;
}
.logbook li.muted::before { background: var(--rule-strong); }
.logbook strong { font-weight: 580; color: var(--ink); display: inline-block; margin-right: 4px; }

/* ============================================================
   Forms
   ============================================================ */

.field { margin-bottom: var(--s-4); }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: var(--s-2);
}
.field input,
.field textarea {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 17px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  outline: none;
  resize: vertical;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field input:focus,
.field textarea:focus {
  border-color: var(--saddle);
  box-shadow: 0 0 0 3px rgba(166, 75, 59, 0.15);
}

/* ============================================================
   Utility
   ============================================================ */

.text-saddle { color: var(--saddle); }
.text-muted { color: var(--fg-muted); }
.text-ink { color: var(--ink); }
.italic { font-style: italic; }
.center { text-align: center; }

.subtle-bg { background: var(--paper-warm); }
.deeper-bg { background: var(--paper-warmer); }

.hide-on-mobile { }
@media (max-width: 720px) { .hide-on-mobile { display: none !important; } }

/* ============================================================
   V2 — vibe pass
   ============================================================ */

/* Paper grain — very subtle SVG noise overlay on body */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.45 0 0 0 0 0.30 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
body > * { position: relative; z-index: 1; }

/* Section bands — full-width regardless of parent */
.band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: var(--s-10) var(--gutter);
}
@media (max-width: 720px) { .band { padding: var(--s-8) var(--gutter); } }

.band-paper { background: var(--paper); color: var(--ink); }
.band-paper-warm { background: var(--paper-warm); color: var(--ink); }
.band-paper-deep { background: var(--paper-warmer); color: var(--ink); }

.band-night {
  background: var(--night);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.band-night a { color: var(--warm-bright); text-decoration-color: rgba(244,196,90,0.4); }
.band-night a:hover { color: var(--warm-bright); text-decoration-color: currentColor; }
.band-night .t-caption,
.band-night .t-meta { color: rgba(240, 230, 207, 0.55); }
.band-night .section-head { border-top-color: rgba(240, 230, 207, 0.3); }
.band-night .section-head .t-caption { color: var(--warm-bright); }

/* ============================================================
   SCENE — Glacier ridge at sunrise (SVG illustration)
   Layered: sky gradient → sun disc → far ridge → mid ridge → near ridge → fg
   ============================================================ */

.scene-glacier {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: linear-gradient(180deg, #0a1024 0%, #16212e 35%, #2a2433 70%, #4a2c1f 100%);
  overflow: hidden;
  isolation: isolate;
}
.scene-glacier .scene-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Slow sun-rise on load */
@keyframes sun-rise {
  from { transform: translateY(40px); }
  to { transform: translateY(0); }
}
.scene-sun {
  animation: sun-rise 2.4s var(--ease) both;
  transform-origin: center;
}

/* Stars twinkle */
@keyframes twinkle {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.95; }
}
.scene-star {
  animation: twinkle 3.6s ease-in-out infinite;
}
.scene-star:nth-child(2n) { animation-duration: 4.2s; animation-delay: 1.1s; }
.scene-star:nth-child(3n) { animation-duration: 5s; animation-delay: 2.2s; }

/* ============================================================
   Wordmark draw-in animation
   ============================================================ */

@keyframes mark-fade-in {
  from { transform: translateY(12px); }
  to { transform: translateY(0); }
}
@keyframes rule-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.wm-animated .wm-mark { animation: mark-fade-in 700ms var(--ease) both; }
.wm-animated .wm-ulett { animation: mark-fade-in 700ms 180ms var(--ease) both; }
/* Rule does not animate — keeps it visible in static captures and reduced-motion users. */

/* ============================================================
   Scroll-revealed motion (IntersectionObserver applies .is-visible)
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal:nth-child(2) { transition-delay: 80ms; }
.reveal:nth-child(3) { transition-delay: 160ms; }
.reveal:nth-child(4) { transition-delay: 240ms; }
.reveal:nth-child(5) { transition-delay: 320ms; }
.reveal:nth-child(6) { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-visible { opacity: 1; transform: none; transition: none; }
  .scene-sun, .scene-star, .wm-animated * { animation: none !important; }
}

/* ============================================================
   Poster moments — giant typography
   ============================================================ */

.poster-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(36px, 6vw, 86px);
  line-height: 1.05;
  font-weight: 400;
  font-variation-settings: "opsz" 120, "SOFT" 60;
  letter-spacing: -0.015em;
  color: var(--cream);
  text-wrap: balance;
}
.poster-quote .accent { color: var(--warm-bright); }

.poster-attribution {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(240, 230, 207, 0.55);
  margin-top: var(--s-5);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.poster-attribution::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--warm-bright);
}

/* ============================================================
   Stat poster — for night band
   ============================================================ */

.stat-poster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-7);
}
@media (max-width: 900px) { .stat-poster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .stat-poster { grid-template-columns: 1fr; } }

.stat-poster .stat {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(240, 230, 207, 0.3);
}
.stat-fig {
  font-family: var(--font-serif);
  font-size: clamp(56px, 7vw, 96px);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 45;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--warm-bright);
}
.stat-label {
  font-family: var(--font-serif);
  font-size: 15px;
  font-style: italic;
  font-variation-settings: "opsz" 14, "SOFT" 55;
  color: rgba(240, 230, 207, 0.75);
  line-height: 1.45;
  max-width: 26ch;
}
.stat-year {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240, 230, 207, 0.5);
}

/* ============================================================
   Topo motif — a topographic ridge line drawn as inline SVG
   used in section dividers and page-head eyebrows.
   ============================================================ */

.topo-divider {
  width: 100%;
  height: 28px;
  display: block;
  color: var(--saddle);
  opacity: 0.7;
}
.band-night .topo-divider { color: var(--warm-bright); opacity: 0.5; }

/* ============================================================
   Sinopah SVG cameo
   ============================================================ */

.sinopah-peek {
  position: absolute;
  bottom: 0;
  right: var(--gutter);
  width: 90px;
  height: 90px;
  pointer-events: none;
  opacity: 0.95;
  color: var(--saddle);
  transform: translateY(8px);
  transition: transform 400ms var(--ease);
}
.sinopah-peek:hover { transform: translateY(0); }

/* ============================================================
   Hero CTAs — beefier
   ============================================================ */

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

.btn-warm {
  background: var(--warm-bright);
  color: var(--night);
  border-color: var(--warm-bright);
}
.btn-warm:hover {
  background: #f7d175;
  border-color: #f7d175;
  transform: translateY(-1px);
}

.btn-night-ghost {
  background: transparent;
  color: var(--cream);
  border-color: rgba(240,230,207,0.4);
}
.btn-night-ghost:hover {
  border-color: var(--cream);
  background: rgba(240,230,207,0.06);
  transform: translateY(-1px);
}

/* TOC enhancement — give rows more personality */
.toc-row {
  position: relative;
}
.toc-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--saddle);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-slow) var(--ease);
}
.toc-row:hover::before { transform: scaleY(1); }

/* Card vibe — make them feel less like brochure cards */
.card.card-vibe {
  position: relative;
  overflow: hidden;
}
.card.card-vibe::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--saddle);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
}
.card.card-vibe:hover::after { transform: scaleX(1); }

/* Coordinate badge for hero */
.coord-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 8px 14px;
  border: 1px solid rgba(240,230,207,0.3);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240,230,207,0.85);
  background: rgba(10,16,36,0.4);
  backdrop-filter: blur(6px);
}
.coord-badge .pulse {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--warm-bright);
  box-shadow: 0 0 0 0 rgba(244,196,90,0.6);
  animation: pulse 2.2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(244,196,90,0.55); }
  70% { box-shadow: 0 0 0 10px rgba(244,196,90,0); }
  100% { box-shadow: 0 0 0 0 rgba(244,196,90,0); }
}

/* ============================================================
   V3 — page heroes. Shared night-band hero pattern for every page.
   Each page provides its own SVG focal scene + chapter copy.
   ============================================================ */

.hero-night {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: 560px;
  background: linear-gradient(180deg, #0a1024 0%, #16212e 38%, #2a2433 70%, #4a2c1f 92%, #5d3220 100%);
  overflow: hidden;
  isolation: isolate;
  color: var(--cream);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero-night.hero-night-sm { min-height: 480px; }

.hero-night a { color: var(--warm-bright); text-decoration-color: rgba(244,196,90,0.4); }

/* Base sky layer — stars (rendered inline SVG inside) */
.hero-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-sky > svg { width: 100%; height: 100%; display: block; }

/* Mountain ridges — share the silhouette layered look */
.hero-ridges {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-ridges > svg { width: 100%; height: auto; display: block; }

/* Scene focal element overlay (page-specific) */
.hero-scene {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* Content overlay */
.hero-content {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px var(--gutter) 28px;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.hero-content h1 {
  font-family: var(--font-serif);
  color: var(--cream);
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  font-weight: 580;
  font-variation-settings: "opsz" 96, "SOFT" 35;
  text-wrap: balance;
  max-width: 22ch;
  margin: 0;
}
.hero-content .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--warm-bright);
}
.hero-content .hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 36px;
  height: 6px;
  background-image:
    linear-gradient(var(--warm-bright), var(--warm-bright)),
    linear-gradient(var(--cream), var(--cream));
  background-size: 100% 1px, 100% 1px;
  background-position: 0 1px, 0 4px;
  background-repeat: no-repeat;
}
.hero-content .hero-lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
  font-weight: 400;
  font-variation-settings: "opsz" 24, "SOFT" 55;
  color: rgba(240, 230, 207, 0.88);
  max-width: 60ch;
  text-wrap: pretty;
}

/* Bottom meta row — coord badge, timestamp, page mark */
.hero-bottom {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gutter) 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.hero-bottom-mark {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(240, 230, 207, 0.5);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.hero-bottom-mark .ch-mark {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  font-variation-settings: "opsz" 14, "SOFT" 55;
  color: var(--warm-bright);
  text-transform: none;
  letter-spacing: 0;
}

@media (max-width: 720px) {
  .hero-night { min-height: 480px; }
  .hero-content { padding: 60px var(--gutter) 20px; gap: var(--s-3); }
  .hero-bottom { padding-bottom: 20px; }
}

/* Page-specific scene helpers — small animations */
@keyframes glow-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.glow-node { animation: glow-pulse 3.4s ease-in-out infinite; transform-origin: center; }
.glow-node:nth-child(2n) { animation-delay: 1.2s; animation-duration: 4.1s; }
.glow-node:nth-child(3n) { animation-delay: 2.4s; animation-duration: 5s; }

@keyframes ember-drift {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 0.8; }
  100% { transform: translateY(-200px) translateX(-30px); opacity: 0; }
}
.ember { animation: ember-drift 4.5s linear infinite; transform-origin: center; }
.ember:nth-child(2n) { animation-delay: 1.5s; animation-duration: 5.4s; }
.ember:nth-child(3n) { animation-delay: 2.8s; animation-duration: 6s; }
.ember:nth-child(4n) { animation-delay: 0.8s; animation-duration: 4s; }

@keyframes signal-pulse {
  0% { transform: scale(0.9); opacity: 0; }
  30% { opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}
.signal-ring {
  transform-origin: center;
  animation: signal-pulse 3s ease-out infinite;
}
.signal-ring:nth-child(2) { animation-delay: 1s; }
.signal-ring:nth-child(3) { animation-delay: 2s; }

@keyframes typewriter-key {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
.tw-key { animation: typewriter-key 1.6s ease-in-out infinite; }
.tw-key:nth-child(2n) { animation-delay: 0.4s; }
.tw-key:nth-child(3n) { animation-delay: 0.8s; }

@keyframes sun-track {
  from { stroke-dashoffset: 800; }
  to { stroke-dashoffset: 0; }
}
.sun-track-path {
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: sun-track 3.6s var(--ease) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .glow-node, .ember, .signal-ring, .tw-key { animation: none !important; }
  .sun-track-path { stroke-dashoffset: 0 !important; animation: none !important; }
}

/* ============================================================
   Fabric dividers — reusable section breaks
   ============================================================ */

.fabric-horizon {
  width: 100%;
  height: 64px;
  display: block;
  color: var(--saddle);
  opacity: 0.6;
}
.band-night .fabric-horizon { color: var(--warm-bright); opacity: 0.5; }

.fabric-rain {
  width: 100%;
  height: 36px;
  display: block;
  color: var(--saddle);
  opacity: 0.5;
}

.fabric-plumes {
  width: 100%;
  height: 48px;
  display: block;
  color: var(--saddle);
  opacity: 0.7;
}

/* Inline beargrass plume — for inline use next to chapter labels */
.plume-inline {
  display: inline-block;
  width: 32px;
  height: 12px;
  vertical-align: middle;
  margin-right: 8px;
  color: var(--saddle);
}
.band-night .plume-inline { color: var(--warm-bright); }

/* Horizon transition strip — drawn under the hero, blends night → paper */
.horizon-transition {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: 64px;
  background: linear-gradient(180deg, #5d3220 0%, #efe4c8 100%);
  overflow: hidden;
  isolation: isolate;
}
.horizon-transition::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Beargrass cluster silhouette */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 64' preserveAspectRatio='xMidYEnd slice'%3E%3Cg stroke='%230a0606' stroke-width='1.4' stroke-linecap='round' opacity='0.8'%3E%3Cline x1='80' y1='64' x2='80' y2='30'/%3E%3Cline x1='130' y1='64' x2='130' y2='40'/%3E%3Cline x1='180' y1='64' x2='180' y2='24'/%3E%3Cline x1='240' y1='64' x2='240' y2='38'/%3E%3Cline x1='300' y1='64' x2='300' y2='28'/%3E%3Cline x1='370' y1='64' x2='370' y2='42'/%3E%3Cline x1='440' y1='64' x2='440' y2='22'/%3E%3Cline x1='510' y1='64' x2='510' y2='36'/%3E%3Cline x1='580' y1='64' x2='580' y2='30'/%3E%3Cline x1='650' y1='64' x2='650' y2='40'/%3E%3Cline x1='720' y1='64' x2='720' y2='26'/%3E%3Cline x1='790' y1='64' x2='790' y2='36'/%3E%3Cline x1='860' y1='64' x2='860' y2='24'/%3E%3Cline x1='930' y1='64' x2='930' y2='40'/%3E%3Cline x1='1000' y1='64' x2='1000' y2='30'/%3E%3Cline x1='1070' y1='64' x2='1070' y2='42'/%3E%3Cline x1='1140' y1='64' x2='1140' y2='22'/%3E%3Cline x1='1210' y1='64' x2='1210' y2='36'/%3E%3Cline x1='1280' y1='64' x2='1280' y2='28'/%3E%3Cline x1='1350' y1='64' x2='1350' y2='40'/%3E%3Cline x1='1420' y1='64' x2='1420' y2='26'/%3E%3Cline x1='1490' y1='64' x2='1490' y2='36'/%3E%3Cline x1='1560' y1='64' x2='1560' y2='30'/%3E%3C/g%3E%3Cg fill='%23f0e6cf' opacity='0.65'%3E%3Ccircle cx='80' cy='28' r='2'/%3E%3Ccircle cx='180' cy='22' r='2.2'/%3E%3Ccircle cx='300' cy='26' r='2'/%3E%3Ccircle cx='440' cy='20' r='2.4'/%3E%3Ccircle cx='580' cy='28' r='2'/%3E%3Ccircle cx='720' cy='24' r='2.2'/%3E%3Ccircle cx='860' cy='22' r='2.4'/%3E%3Ccircle cx='1000' cy='28' r='2'/%3E%3Ccircle cx='1140' cy='20' r='2.4'/%3E%3Ccircle cx='1280' cy='26' r='2'/%3E%3Ccircle cx='1420' cy='24' r='2.2'/%3E%3Ccircle cx='1560' cy='28' r='2'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Beargrass plume divider — sits between paper sections */
.plume-band {
  width: 100%;
  height: 42px;
  display: block;
  margin: 32px auto;
  color: var(--saddle);
  opacity: 0.7;
}

/* ============================================================
   MOBILE FIXES (added 2026-05-19)
   Inline grid-template-columns on six page sections does not
   collapse on phones. These rules use !important to win over
   inline-style specificity. Also caps the hero wordmark so
   "MarkUlett" fits at ~390px without clipping.
   ============================================================ */
@media (max-width: 720px) {
  /* Every inline multi-column grid collapses to one column */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: var(--s-6) !important;
  }

  /* Hero wordmark floor: 64px was clipping at the right edge */
  .wm--xl .wm-mark,
  .wm--xl .wm-ulett {
    font-size: clamp(46px, 13vw, 96px);
  }
  .wm--xl .wm-rule {
    height: 6px;
    background-size: 100% 2px, 100% 2px;
    background-position: 0 0, 0 4px;
  }

  /* HOME HERO — break out of the SVG's 16:9 aspect ratio on phones.
     The default sizing makes .scene-glacier 219px tall at 390px wide;
     the overlay (wordmark + lede + CTAs + coord badge) needs ~450px,
     and the section's overflow:hidden was clipping it. Give the hero
     a real mobile height, stretch the SVG to cover, and let the
     overlay stack inside it without overflow. */
  .scene-glacier {
    min-height: 600px; /* fallback */
    min-height: 100svh; /* modern browsers override fallback */
  }
  .scene-glacier .scene-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .scene-glacier .scene-overlay > div[style*="padding-top: 80px"] {
    padding-top: 64px !important;
    justify-content: flex-start !important;
    gap: var(--s-4);
  }
  .scene-glacier .scene-overlay > div:last-child {
    justify-content: flex-start !important;
    gap: var(--s-3) !important;
    padding-bottom: 24px !important;
  }
  .scene-glacier .t-lede {
    font-size: clamp(15px, 4.4vw, 19px);
    margin-top: 20px !important;
  }
  .scene-glacier .hero-cta-row {
    margin-top: 24px !important;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-3);
  }
  .scene-glacier .hero-cta-row .btn { width: 100%; text-align: center; }

  /* Stat poster figures: cap so 100k+ and 1,150 do not overflow */
  .stat-fig { font-size: clamp(48px, 17vw, 88px); }
  .stat-poster { gap: var(--s-7); }

  /* Pull-quote on the night band */
  .poster-quote { font-size: clamp(22px, 6.4vw, 36px); }

  /* Sinopah cameo SVG: smaller corner placement */
  .sinopah-peek { width: 80px !important; }

  /* Campfire photo bleed: 4:3 reads better than 16:7 on phone */
  .photo-bleed img {
    aspect-ratio: 4 / 3 !important;
    object-position: 50% 40% !important;
  }

  /* Contact form: two-column name/email/topic row collapses cleanly */
  #contact-form .field { width: 100%; }

  /* Section heads: shrink the eyebrow gap so it does not eat
     the top of every collapsed section */
  .section-head { margin-bottom: var(--s-5); }
}