/* New Earth Collective design system. See STYLE.md for the rules behind this file. */

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin-var.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Tiempos Headline';
  src: url('fonts/TiemposHeadline-Light.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Tiempos Text';
  src: url('fonts/tiempos-text-web-regular-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  /* palette: the five elements (earth, fire, water, air, metal) plus ink and paper */
  --ink: #0F1F17;
  --forest: #15301F;      /* earth */
  --moss: #2F5241;
  --brass: #8A6A2E;
  --champagne: #D6C39C;   /* air */
  --paper: #F5F0E8;
  --emerald: #10B981;
  --navy: #16294D;
  --navy-hover: #263F70;
  --night: #0E1A33;       /* deep night sky */
  --clay: #EFE2D3;
  --clay-ink: #3B1F14;
  --terracotta: #A4421F;
  --void: #0D1012;
  --water: #1F7A8A;
  --fire: #BE522E;
  --charcoal: #1C2022;    /* metal */

  /* semantic (light theme) */
  --bg: #FFFFFF;
  --bg-raised: #FFFFFF;
  --bg-sunk: var(--paper);
  --line: rgba(26, 58, 42, 0.14);
  --line-soft: rgba(26, 58, 42, 0.09);
  --line-strong: rgba(26, 58, 42, 0.22);
  --line-ui: #5E7266;
  --text: #0F1F17;
  --text-body: #1A3A2A;
  --text-muted: #47604F;
  --action: var(--navy);
  --action-fg: #FFFFFF;
  --action-hover: var(--navy-hover);
  --accent: var(--brass);
  --link: #23407A;
  --focus: var(--navy);
  --hover-border: var(--navy);
  --glow: rgba(47, 82, 65, 0.08);
  --shadow-card: 0 1px 2px rgba(15, 42, 30, 0.04), 0 6px 16px rgba(15, 42, 30, 0.06), 0 24px 48px -16px rgba(15, 42, 30, 0.14);

  /* type families */
  --serif: 'Tiempos Headline', Georgia, serif;
  --serif-italic: 'Tiempos Text', Georgia, serif;
  --sans: 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* type scale: the only sizes used on the site */
  --t-display: clamp(2.625rem, 6.3vw, 5.125rem);
  --t-feature: clamp(2.5rem, 5vw, 4.5rem);
  --t-h1: clamp(2.375rem, 5.3vw, 4.125rem);
  --t-h2: clamp(1.875rem, 4vw, 3.125rem);
  --t-statement: clamp(1.625rem, 3.4vw, 2.5rem);
  --t-h3-lg: 2rem;
  --t-h3: 1.625rem;
  --t-lead: 1.1875rem;
  --t-body: 1.0625rem;
  --t-body-sm: 1rem;
  --t-small: 0.9375rem;
  --t-label: 0.8125rem;

  /* space scale (8px base) */
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2rem;
  --s5: 3rem;
  --s6: 4rem;
  --s7: 6rem;
  --section-y: clamp(4.5rem, 9vw, 7rem);
  --gutter: 28px;
  --section-y-sm: 64px;
  --radius-btn: 3px;
  --radius-card: 20px;
  --radius-panel: 24px;
}

/* emerald and photo sections: same components, flipped tokens */
.theme-dark {
  --bg: var(--forest);
  --bg-raised: rgba(255, 255, 255, 0.05);
  --bg-sunk: rgba(255, 255, 255, 0.05);
  --line: rgba(245, 240, 232, 0.16);
  --line-soft: rgba(245, 240, 232, 0.1);
  --line-strong: rgba(245, 240, 232, 0.28);
  --line-ui: #8FA596;
  --text: #F5F0E8;
  --text-body: #DCE5DC;
  --text-muted: #A9BBAE;
  --action: #F5F0E8;
  --action-fg: #0F1F17;
  --action-hover: #FFFFFF;
  --accent: var(--champagne);
  --link: var(--champagne);
  --focus: var(--emerald);
  --hover-border: var(--emerald);
  --shadow-card: none;
  color: var(--text);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--void); }
body {
  /* Page edges: iOS Safari tints its bottom bar from the body background.
     The last 160px (always behind the footer) is the footer colour, so the
     bar reads dark at the end of the page instead of a white strip. */
  margin: 0; background: var(--bg) linear-gradient(to bottom, transparent calc(100% - 160px), var(--void) calc(100% - 160px)); color: var(--text);
  font-family: var(--sans); font-size: var(--t-body); line-height: 1.7;
  min-height: 100vh; overflow-x: hidden;
}
::selection { background: var(--action); color: var(--action-fg); }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; }
a { color: var(--link); text-decoration: none; }
@media (hover: hover) { a:hover { color: var(--accent); } }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 20px;
  background: var(--action); color: var(--action-fg); border-radius: var(--radius-btn); font-weight: 600;
}
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- type ---------- */
.display, .h1, .h2, .h3, .h3-lg, .feature, .statement {
  font-family: var(--serif); font-weight: 400; color: var(--text); text-wrap: balance;
}
.display { font-size: var(--t-display); line-height: 1.04; letter-spacing: -0.02em; max-width: 16ch; }
.h1 { font-size: var(--t-h1); line-height: 1.07; letter-spacing: -0.02em; max-width: 20ch; }
.h2 { font-size: var(--t-h2); line-height: 1.14; letter-spacing: -0.015em; max-width: 21ch; }
.h3-lg { font-size: var(--t-h3-lg); line-height: 1.2; letter-spacing: -0.01em; }
.h3 { font-size: var(--t-h3); line-height: 1.2; }
.feature { font-size: var(--t-feature); line-height: 1; letter-spacing: -0.02em; }
.statement { font-size: var(--t-statement); line-height: 1.2; }

.lead { font-size: var(--t-lead); line-height: 1.7; color: var(--text-body); max-width: 60ch; text-wrap: pretty; }
.copy { font-size: var(--t-body); line-height: 1.74; color: var(--text-body); max-width: 64ch; text-wrap: pretty; }
.copy-sm { font-size: var(--t-body-sm); line-height: 1.7; color: var(--text-body); text-wrap: pretty; }
.muted { color: var(--text-muted); }

/* labels: small uppercase field names and tags. Never a decoration above a heading. */
.label {
  font-size: var(--t-label); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  line-height: 1.5; color: var(--accent);
}
.label--muted { color: var(--text-muted); }

/* ---------- layout ---------- */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.wrap--content { max-width: calc(1080px + var(--gutter) * 2); }
.wrap--narrow { max-width: calc(880px + var(--gutter) * 2); }

.section { position: relative; padding: var(--section-y) 0; border-top: 1px solid var(--line); }
.section--paper { background: var(--paper); }
.section--forest { background: var(--forest); }
.section--charcoal { background: var(--charcoal); }
.section--photo-dark { background: var(--forest); overflow: hidden; }
.section--photo-light { background: #FFFFFF; overflow: hidden; }
.section-in { position: relative; z-index: 1; }

.section-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.section-bg img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; object-fit: cover; }
.section-bg::after { content: ''; position: absolute; inset: 0; }
.section--photo-dark .section-bg::after { background: rgba(21, 48, 31, 0.9); }
.section--photo-light .section-bg::after { background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.95)); }

/* section header: title with an optional lead */
.section-head { display: grid; gap: var(--s3); margin-bottom: var(--s6); }
/* header with a photo beside it */
.split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s6); align-items: center; margin-bottom: var(--s6); }
.split .section-head { margin-bottom: 0; }
.split-media { margin: 0; border-radius: var(--radius-panel); overflow: hidden; background: var(--ink); box-shadow: 0 50px 100px -40px rgba(15, 31, 23, 0.55); }
.split-media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: var(--s5); } }

/* centered section header (choices) */
.section-head--center { justify-items: center; text-align: center; }
.section-head--center .h2 { max-width: 24ch; }
.section-head--center .lead { max-width: 56ch; }
.section-foot { margin-top: var(--s5); }

/* page header: the h1 block that opens every inner page */
.page { padding: var(--s7) 0 var(--section-y); }
.page-head { display: grid; gap: var(--s3); margin-bottom: var(--s7); }

/* vertical rhythm between blocks inside a section or page */
.flow > * + * { margin-top: var(--s6); }
.prose > * + * { margin-top: var(--s3); }
.prose > .statement { margin-top: var(--s5); }

.grid {
  display: grid; gap: var(--gap, var(--s3));
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 300px), 100%), 1fr));
}
.grid--260 { --min: 260px; }
.grid--300 { --min: 300px; }
.grid--320 { --min: 320px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 32px; border-radius: var(--radius-btn); border: 1px solid transparent;
  font-family: var(--sans); font-size: var(--t-body-sm); font-weight: 600; letter-spacing: 0.01em; line-height: 1.2;
  cursor: pointer; text-align: center;
}
.btn--primary { background: var(--action); color: var(--action-fg); }
@media (hover: hover) { .btn--primary:hover { background: var(--action-hover); color: var(--action-fg); } }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 74px; }
.brand { display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--text); }
.brand-logo { width: 40px; height: 40px; flex: none; }
.brand-name { font-family: var(--serif); font-size: var(--t-lead); line-height: 1.1; letter-spacing: 0.01em; }
@media (hover: hover) { .brand:hover { color: var(--text); } }

.site-nav { display: flex; align-items: center; gap: 2px; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font-size: var(--t-small); color: var(--text-body); position: relative; }
.site-nav a[aria-current='page']:not(.btn) { color: var(--text); }
.site-nav a[aria-current='page']:not(.btn)::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 1px; background: var(--action); }
@media (hover: hover) { .site-nav a:not(.btn):hover { color: var(--text); } }
.site-nav .btn { margin-left: 10px; min-height: 44px; padding: 0 22px; font-size: var(--t-small); color: var(--action-fg); }

.menu-btn {
  display: none; min-height: 44px; padding: 0 20px; border-radius: var(--radius-btn);
  background: transparent; color: var(--text); border: 1px solid var(--line-ui);
  font-family: var(--sans); font-size: var(--t-small); cursor: pointer;
}
@media (max-width: 860px) {
  .menu-btn { display: inline-flex; align-items: center; }
  .js .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 20px;
  }
  .js .site-nav.is-open { display: flex; }
  .site-nav a { min-height: 48px; padding: 0; font-size: var(--t-body); border-bottom: 1px solid var(--line-soft); }
  .site-nav a[aria-current='page']:not(.btn)::after { display: none; }
  .site-nav .btn { margin: 16px 0 0; border-bottom: 0; justify-content: center; }
}
html:not(.js) .header-row { flex-wrap: wrap; padding: 8px var(--gutter); }
html:not(.js) .site-nav { flex-wrap: wrap; }

/* ---------- section template: photo hero ---------- */
.hero { position: relative; display: flex; align-items: center; overflow: hidden; background: var(--ink); color: var(--text); min-height: min(calc(100svh - 74px), 900px); padding: var(--s7) 0; }
.hero-media, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media { animation: drift 24s cubic-bezier(0.2, 0.7, 0.1, 1) infinite alternate; transform-origin: 60% 50%; }
.hero-media img { object-fit: cover; object-position: 60% center; }
.hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(26, 17, 12, 0.9) 0%, rgba(26, 17, 12, 0.7) 50%, rgba(26, 17, 12, 0) 88%),
    linear-gradient(0deg, rgba(26, 17, 12, 0.55) 0%, rgba(26, 17, 12, 0) 35%);
}
.hero-copy { position: relative; width: 100%; display: grid; gap: var(--s2); justify-items: start; }
.hero-copy .statement { margin-top: var(--s2); }
.hero-sub { font-size: var(--t-body); line-height: 1.6; color: var(--text-muted); max-width: 58ch; }

/* ---------- section template: stacking cards ---------- */
.stack { display: grid; gap: 10svh; padding-bottom: 10svh; max-width: 1100px; margin-inline: auto; }
.step {
  position: sticky; top: 92px; height: min(72svh, 620px); border-radius: 28px; overflow: hidden;
  transform-origin: center top; background: var(--ink);
  box-shadow: 0 -30px 60px -30px rgba(0, 0, 0, 0.45), 0 50px 100px -40px rgba(0, 0, 0, 0.7);
}
.step:nth-child(2) { top: 110px; } .step:nth-child(3) { top: 128px; } .step:nth-child(4) { top: 146px; }
.step:nth-child(5) { top: 164px; } .step:nth-child(6) { top: 182px; }
.step-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.step::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30, 15, 10, 0.92) 0%, rgba(30, 15, 10, 0.6) 45%, rgba(30, 15, 10, 0.05) 100%); }
.step-in { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s2); padding: clamp(28px, 4vw, 56px); max-width: 620px; }
.step-text { font-size: var(--t-lead); line-height: 1.6; color: var(--text-body); max-width: 40ch; }
@media (max-width: 600px) {
  .step { border-radius: 20px; height: min(70svh, 560px); }
  .step::after { background: linear-gradient(0deg, rgba(30, 15, 10, 0.94) 0%, rgba(30, 15, 10, 0.55) 55%, rgba(30, 15, 10, 0.05) 100%); }
}

/* ---------- section template: two portrait panels ---------- */
.paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); align-items: start; }
.path { position: relative; overflow: hidden; border-radius: var(--radius-panel); aspect-ratio: 3 / 4; min-height: 560px; background: var(--ink); box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.7); }
.path--build { margin-top: 96px; }
.path-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.path::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14, 18, 20, 0.95) 0%, rgba(14, 18, 20, 0.72) 38%, rgba(14, 18, 20, 0) 72%); }
.path::before { content: ''; position: absolute; inset: 0; z-index: 1; mix-blend-mode: soft-light; }
.path--receive::before { background: linear-gradient(0deg, rgba(31, 122, 138, 0.55), rgba(31, 122, 138, 0)); }
.path--build::before { background: linear-gradient(0deg, rgba(190, 82, 46, 0.55), rgba(190, 82, 46, 0)); }
.path-in { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: clamp(28px, 3.4vw, 48px); display: flex; flex-direction: column; gap: var(--s2); }
.path-text { font-size: var(--t-body); line-height: 1.65; color: var(--text-body); max-width: 44ch; }
@media (max-width: 860px) {
  .paths { grid-template-columns: 1fr; }
  .path--build { margin-top: 0; }
  .path { aspect-ratio: auto; min-height: 640px; }
}

/* ---------- section template: photo band (inner pages) ---------- */
.band { height: clamp(180px, 24vw, 340px); overflow: hidden; background: var(--ink); }
.band img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- blocks: cards, panels, rows ---------- */
.card {
  display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4) 28px;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); color: var(--text-body);
}
.card--sunk { background: var(--bg-sunk); box-shadow: none; }
.card--lg { padding: 34px 30px; }
.card-body { font-size: var(--t-body-sm); line-height: 1.72; flex: 1; }
.card-num { font-family: var(--serif); font-size: var(--t-h3); color: var(--accent); line-height: 1; }

.mech { border-top: 1px solid var(--line); padding-top: var(--s2); font-size: var(--t-small); line-height: 1.6; color: var(--text-muted); }
.mech .label { display: block; margin-bottom: 6px; }

.panel { display: grid; gap: var(--s2); border: 1px solid var(--line-strong); border-radius: var(--radius-panel); padding: var(--s5); background: var(--bg-raised); }
.panel--paper { background: var(--paper); border-color: transparent; }
.panel--forest { border-color: transparent; background: var(--forest); }
.panel--split { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; justify-content: space-between; }
.panel-body { display: grid; gap: var(--s2); max-width: 52ch; }

.row { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); border-top: 1px solid var(--line); padding: var(--s6) 0; }
.row-side { flex: 0 1 200px; min-width: 180px; display: grid; gap: var(--s1); align-content: start; }
.row-main { flex: 1 1 320px; min-width: 0; display: grid; gap: var(--s2); }
.row--compact { padding: var(--s4) 0; gap: var(--s1); }
.era-years { font-family: var(--serif); font-size: var(--t-lead); color: var(--accent); line-height: 1.3; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: var(--s5) 0 var(--s3); background: var(--void); }
.footer-top { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: space-between; align-items: flex-start; }
.footer-cols { display: flex; flex-wrap: wrap; gap: var(--s5); }
.footer-col { display: flex; flex-direction: column; }
.footer-col .label { margin-bottom: var(--s1); }
.footer-col a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-body-sm); color: var(--text-body); }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: var(--s1); }
.footer-logo { display: block; width: 40px; height: 40px; }
.footer-name { font-family: var(--serif); font-size: var(--t-lead); color: var(--text); }
.footer-about { font-size: var(--t-small); line-height: 1.7; color: var(--text-muted); max-width: 40ch; }
.footer-bottom { margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--line-soft); display: grid; justify-items: center; gap: 4px; text-align: center; }
.footer-mantra { font-family: var(--serif); font-size: var(--t-lead); line-height: 1.3; color: var(--text); }
.footer-credit { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: var(--s3); font-size: var(--t-small); color: var(--text-muted); }
.link { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--action-hover); }
.footer-credit a { display: inline-flex; align-items: center; min-height: 44px; margin-left: 0.3em; color: var(--text-body); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- motion ---------- */
.display .w, .statement .w, .story-title .w, .together-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.display .w > span { display: inline-block; animation: rise 1.2s cubic-bezier(0.2, 0.7, 0.1, 1) both; }
.statement .w > span { display: inline-block; }
.display .w:nth-of-type(1) > span { animation-delay: 0.25s; } .display .w:nth-of-type(2) > span { animation-delay: 0.31s; }
.display .w:nth-of-type(3) > span { animation-delay: 0.37s; } .display .w:nth-of-type(4) > span { animation-delay: 0.43s; }
.display .w:nth-of-type(5) > span { animation-delay: 0.49s; } .display .w:nth-of-type(6) > span { animation-delay: 0.55s; }
.display .w:nth-of-type(7) > span { animation-delay: 0.61s; } .display .w:nth-of-type(8) > span { animation-delay: 0.67s; }
.display .w:nth-of-type(9) > span { animation-delay: 0.73s; } .display .w:nth-of-type(10) > span { animation-delay: 0.79s; }
.display .w:nth-of-type(11) > span { animation-delay: 0.85s; } .display .w:nth-of-type(12) > span { animation-delay: 0.91s; }
@keyframes rise { from { transform: translateY(108%); } to { transform: none; } }
@keyframes drift { from { transform: scale(1.04); } to { transform: scale(1.14) translate(-1.2%, -0.8%); } }
.fade-in { animation: fade 1.4s 0.2s cubic-bezier(0.2, 0.7, 0.1, 1) both; }
.fade-in--2 { animation-delay: 1.1s; }
.fade-in--3 { animation-delay: 1.3s; }
@keyframes fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.grain {
  position: fixed; inset: -50%; z-index: 50; pointer-events: none; opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); }
  50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } 100% { transform: translate(0, 0); }
}
.anim [data-reveal], .anim [data-stagger] > *, .anim [data-words] { opacity: 0; }

@media (max-width: 600px) {
  :root { --gutter: 20px; }
  .panel { padding: var(--s4) var(--s3); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .step { position: relative; top: auto !important; }
  .stack { gap: var(--s3); }
}

/* ---------- section template: pinned journey ---------- */
.journey { position: relative; background: var(--ink); color: var(--text); }
.journey-pin { position: relative; }
.journey-bg { position: absolute; inset: 0; overflow: hidden; }
.journey-bg img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.journey-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15, 20, 18, 0.88) 0%, rgba(15, 20, 18, 0.62) 55%, rgba(15, 20, 18, 0.35) 100%); }
.journey-chapters { position: relative; z-index: 1; padding: var(--section-y) 0; }
.chapter { max-width: 560px; display: grid; gap: var(--s3); }
.chapter + .chapter { margin-top: var(--s7); }
.chapter-text { font-size: var(--t-lead); line-height: 1.65; color: var(--text-body); max-width: 46ch; }

/* pinned scroll version, switched on by home.js */
.js-journey .journey { height: 380svh; }
.js-journey .journey-pin { position: sticky; top: 74px; height: calc(100svh - 74px); overflow: hidden; }
.js-journey .journey-bg img { width: 190%; max-width: none; }
.js-journey .journey-chapters { position: absolute; inset: 0; padding: 0; }
.js-journey .journey-chapters .wrap { position: relative; height: 100%; }
.js-journey .chapter { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 12%; margin: 0; opacity: 0; }

/* pillars */
.pillar-group { display: grid; gap: var(--s4); margin-bottom: var(--s6); }
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--s3); }
.pillars { position: relative; padding-top: var(--s3); }
.pillars::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--accent), var(--line-strong)); transform-origin: left; transform: scaleX(var(--draw, 1)); }
.pillars li { padding-top: 0; font-family: var(--serif); font-size: var(--t-h3); line-height: 1.2; color: var(--text); }

/* ---------- section template: sideways protocols ---------- */
.hscroll { position: relative; background: var(--night); color: var(--text); border-top: 1px solid var(--line); padding: var(--s6) 0 var(--s7); }
.hscroll-track { display: flex; align-items: center; gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter) var(--s3); -webkit-overflow-scrolling: touch; }
.proto { position: relative; flex: 0 0 min(86vw, 460px); height: min(72svh, 620px); border-radius: var(--radius-panel); overflow: hidden; scroll-snap-align: center; background: var(--ink); box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.7); }
.proto-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.proto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 14, 30, 0.95) 0%, rgba(8, 14, 30, 0.75) 42%, rgba(8, 14, 30, 0.05) 78%); }
.proto-in { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; gap: var(--s1); padding: var(--s4); }
.proto-text { font-size: var(--t-body-sm); line-height: 1.65; color: var(--text-body); margin-top: var(--s1); }
.proto-end { flex: 0 0 auto; padding: 0 var(--s5) 0 var(--s3); scroll-snap-align: center; }
.hscroll-bar { display: none; }

/* pinned sideways version, switched on by home.js on wide screens */
.js-hscroll .hscroll { height: calc(100svh - 74px); padding: 0; border-top: 0; overflow: hidden; }
.js-hscroll .hscroll-pin { height: 100%; display: flex; align-items: center; }
.js-hscroll .hscroll-track { overflow: visible; scroll-snap-type: none; width: max-content; padding: 0 var(--s7) 0 max(var(--gutter), calc((100vw - 1200px) / 2 + var(--gutter))); }
.js-hscroll .proto { flex-basis: min(42vw, 560px); height: min(74svh, 640px); }
.js-hscroll .hscroll-bar { display: block; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 28px; height: 1px; background: var(--line); }
.js-hscroll .hscroll-bar span { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }

/* nerve backdrop: lighter wash so the gold filaments glow */
.section--nerve .section-bg::after { background: linear-gradient(90deg, rgba(21, 48, 31, 0.9) 0%, rgba(21, 48, 31, 0.62) 55%, rgba(21, 48, 31, 0.3) 100%); }

/* ---------- section template: angelic timeline ---------- */
.theme-sky {
  --text: var(--navy);
  --text-body: #243B66;
  --text-muted: #4B6592;
  --link: var(--navy);
  --action: var(--navy);
  --focus: var(--navy);
  --line: rgba(22, 41, 77, 0.16);
  --line-strong: rgba(22, 41, 77, 0.3);
  color: var(--text);
}
.angel { position: relative; overflow: hidden; background: #FFFFFF; border-top: 1px solid var(--line); padding: var(--section-y) 0; }
.angel-bg { position: absolute; inset: 0; z-index: 0; }
.angel-bg img { position: absolute; left: 0; bottom: 0; width: 100%; height: 56%; object-fit: cover; object-position: 50% 100%; filter: brightness(0.93) saturate(0.92); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%); mask-image: linear-gradient(180deg, transparent 0%, #000 55%); }
.angel-bg::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 56%; background: linear-gradient(180deg, rgba(90, 120, 180, 0) 0%, rgba(90, 120, 180, 0.16) 100%); mix-blend-mode: multiply; }
.angel-pin { position: relative; z-index: 1; }
.angel .h2 { max-width: 26ch; }
.angel .section-head { margin-bottom: var(--s5); }

.tl { --p: 1; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 0; }
.tl::before, .tl::after { content: ''; position: absolute; top: 15px; left: 12.5%; right: 12.5%; height: 2px; }
.tl::before { background: var(--line-strong); }
.tl::after { background: var(--accent); transform-origin: left; transform: scaleX(var(--p)); }
.tl-item { position: relative; display: grid; justify-items: center; gap: var(--s2); padding-top: 0; text-align: center; }
.tl-node {
  --done: 1;
  position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(22, 41, 77, var(--done)); border: 2px solid var(--navy);
  display: grid; place-items: center; box-shadow: 0 0 0 6px #FFFFFF;
}
.tl-node svg { width: 18px; height: 18px; fill: none; stroke: #FFFFFF; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tl-node path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--done)); }
.tl-name { font-family: var(--serif); font-size: var(--t-h3); line-height: 1.2; color: var(--text); max-width: 16ch; text-shadow: 0 0 22px rgba(255, 255, 255, 0.95), 0 0 8px rgba(255, 255, 255, 0.9); }

.converge { position: relative; height: 84px; margin-top: var(--s3); }
.converge i, .converge b, .converge u { position: absolute; background: var(--accent); display: block; }
.converge i { top: 0; width: 2px; height: 50%; transform-origin: top; margin-left: -1px; }
.converge i:nth-child(1) { left: 12.5%; } .converge i:nth-child(2) { left: 37.5%; }
.converge i:nth-child(3) { left: 62.5%; } .converge i:nth-child(4) { left: 87.5%; }
.converge b { top: 50%; left: 12.5%; right: 12.5%; height: 2px; transform-origin: left; }
.converge u { top: 50%; left: 50%; width: 2px; height: 50%; margin-left: -1px; transform-origin: top; text-decoration: none; }
.tl-final { text-shadow: 0 0 26px rgba(255, 255, 255, 0.95), 0 0 10px rgba(255, 255, 255, 0.9); text-align: center; max-width: 24ch; margin-inline: auto; margin-top: var(--s2); }

/* pinned scroll version, switched on by home.js on wide screens */
.js-angel .angel { height: calc(100svh - 74px); padding: 0; display: flex; align-items: center; }
.js-angel .angel-pin { width: 100%; }
.js-angel .angel .section-head { margin-bottom: var(--s4); }
.js-angel .angel .lead { max-width: 74ch; }

/* phones: the timeline runs vertically */
@media (max-width: 860px) {
  .tl { grid-template-columns: 1fr; gap: var(--s5); padding-left: 56px; }
  .tl::before, .tl::after { top: 16px; bottom: 16px; left: 15px; right: auto; width: 2px; height: auto; }
  .tl::after { transform-origin: top; transform: scaleY(var(--p)); }
  .tl-item { justify-items: start; text-align: left; align-content: start; }
  .tl-node { position: absolute; left: -56px; top: 0; box-shadow: 0 0 0 6px transparent; background-clip: padding-box; }
  .tl-name { padding-top: 2px; max-width: none; }
  .converge { height: 56px; margin-left: 56px; margin-top: -16px; }
  .converge i, .converge b { display: none; }
  .converge u { left: -41px; top: 0; height: 100%; margin-left: 0; }
  .tl-final { text-align: left; margin-inline: 0; margin-left: 56px; max-width: 18ch; }
}

/* ---------- element rotation: each section takes its own color ---------- */
.section--clay { background: var(--clay); }
.theme-clay {
  --text: var(--clay-ink);
  --text-body: #4A2E22;
  --text-muted: #7A5A4A;
  --accent: var(--terracotta);
  --line: rgba(59, 31, 20, 0.16);
  --line-strong: rgba(59, 31, 20, 0.3);
  color: var(--text);
}
.section--duo { background: linear-gradient(100deg, #0F3A44 0%, #13272B 36%, #1A1D1F 50%, #2A1810 66%, #4A2417 100%); }
.theme-night {
  --bg: var(--night);
  --line: rgba(220, 232, 255, 0.16);
  --line-soft: rgba(220, 232, 255, 0.1);
  --line-strong: rgba(220, 232, 255, 0.28);
  --text-muted: #A8B6D4;
}

/* ---------- story: a photo banner that carries the title, then readable text ---------- */
.story { margin-top: var(--s7); }
.story-media { position: relative; margin: 0 auto; width: min(calc(100% - var(--gutter) * 2), 1080px); aspect-ratio: 16 / 7; min-height: 300px; border-radius: var(--radius-panel); overflow: hidden; background: var(--ink); box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.6); }
.story-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 12, 16, 0) 30%, rgba(8, 12, 16, 0.82) 100%); }
.story-title { position: absolute; z-index: 2; left: clamp(24px, 4vw, 56px); right: clamp(24px, 4vw, 56px); bottom: clamp(24px, 4vw, 44px); color: var(--cream, #F6F1E7); text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }
.story-text { margin-top: var(--s5); }

/* ---------- together: full-bleed closing photo ---------- */
.section--together { min-height: min(86svh, 780px); display: flex; align-items: center; text-align: center; }
.section--together .section-bg::after { background: linear-gradient(180deg, rgba(8, 14, 30, 0.78) 0%, rgba(8, 14, 30, 0.38) 48%, rgba(8, 14, 30, 0.74) 100%); }
.section--together .section-in { display: grid; justify-items: center; gap: var(--s3); }
.together-title { font-family: var(--serif); font-size: var(--t-feature); line-height: 1.02; letter-spacing: -0.02em; color: var(--text); }

/* ---------- steps: a numbered practice ---------- */
.steps { counter-reset: step; display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 48px 1fr; column-gap: var(--s2); align-items: baseline; font-size: var(--t-body); line-height: 1.7; color: var(--text-body); }
.steps li::before { content: counter(step); font-family: var(--serif); font-size: var(--t-h3); line-height: 1; color: var(--accent); }
.steps li strong { font-weight: 600; color: var(--text); }

/* ---------- deck: a row of cards, one open at a time ---------- */
.deck-heading { margin-bottom: var(--s4); }
.deck { display: grid; gap: var(--s2); }
.deck-card { background: var(--bg-raised, #fff); border-radius: var(--radius-panel); overflow: hidden; position: relative; }
.deck-tab { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); width: 100%; min-height: 64px; padding: 0 var(--s3); background: transparent; border: 0; cursor: pointer; font: inherit; color: var(--text); text-align: left; }
.deck-title { font-family: var(--serif); font-size: var(--t-h3); line-height: 1.15; }
.deck-num { font-family: var(--serif); font-size: var(--t-lead); color: var(--accent); }
.deck-tab:hover .deck-title { color: var(--accent); }
.deck-panel { display: grid; }
.deck-photo { margin: 0; }
.deck-photo img { display: block; width: 100%; height: 220px; object-fit: cover; }
.deck-body > * { margin: 0; }
.deck-body { padding: var(--s4) var(--s3) var(--s4); display: grid; gap: var(--s2); align-content: start; }
.deck-n { font-family: var(--serif); font-size: var(--t-lead); color: var(--accent); }
.deck-body > .deck-sub { margin-top: var(--s1); font-family: var(--serif); font-size: var(--t-lead); font-weight: 400; color: var(--text); }
.copy-sm { font-size: var(--t-body-sm); line-height: 1.7; color: var(--text-body); }
.steps--sm { gap: var(--s2); }
.steps--sm li { font-size: var(--t-body-sm); grid-template-columns: 36px 1fr; }
.deck-next { justify-self: start; margin-top: var(--s2); }

/* no scripts: every card shows in full, one after another */
.deck:not(.is-ready) .deck-tab { display: none; }

/* scripts on: phones stack the cards, the open one unfolds */
.deck.is-ready .deck-card:not(.is-open) .deck-panel { display: none; }
.deck.is-ready .deck-card.is-open .deck-tab { display: none; }

@media (min-width: 861px) {
  .deck.is-ready { display: flex; gap: 12px; height: 720px; }
  .deck.is-ready .deck-card { flex: 0 0 72px; transition: flex-basis 0.7s cubic-bezier(0.2, 0.7, 0.1, 1); min-width: 0; }
  .deck.is-ready .deck-card.is-open { flex: 1 1 auto; }
  .deck.is-ready .deck-card:not(.is-open) .deck-tab { position: absolute; inset: 0; flex-direction: column; justify-content: space-between; align-items: center; padding: var(--s3) 0; min-height: 0; }
  .deck.is-ready .deck-card:not(.is-open) .deck-title { writing-mode: vertical-rl; transform: rotate(180deg); font-size: var(--t-lead); }
  .deck.is-ready .deck-card:not(.is-open) .deck-num { order: 2; }
  .deck.is-ready .deck-card.is-open .deck-panel { display: grid; grid-template-columns: minmax(240px, 36%) 1fr; height: 100%; }
  .deck.is-ready .deck-photo { height: 100%; padding: 12px 0 12px 12px; }
  .deck.is-ready .deck-photo img { height: 100%; border-radius: 16px 16px 16px 16px; }
  .deck.is-ready .deck-body { padding: var(--s5) var(--s5) var(--s5) var(--s4); overflow-y: scroll; overscroll-behavior: contain; }
  @supports not selector(::-webkit-scrollbar) { .deck.is-ready .deck-body { scrollbar-width: thin; scrollbar-color: rgba(59, 31, 20, 0.45) rgba(59, 31, 20, 0.08); } }
  .deck.is-ready .deck-body::-webkit-scrollbar { width: 12px; }
  .deck.is-ready .deck-body::-webkit-scrollbar-track { background: rgba(59, 31, 20, 0.08); border-radius: 10px; margin: 12px 0; }
  .deck.is-ready .deck-body::-webkit-scrollbar-thumb { background: rgba(59, 31, 20, 0.45); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
  .deck:not(.is-ready) .deck-panel { grid-template-columns: minmax(240px, 36%) 1fr; }
  .deck:not(.is-ready) .deck-photo img { height: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .deck.is-ready .deck-card { transition: none; }
}
.section--together-sm { min-height: 0; padding: var(--section-y-sm) 0; }
.together-title--sm { font-size: var(--t-h2); max-width: 24ch; margin: 0 auto; }
.deck-body h3[tabindex="-1"]:focus { outline: none; }

/* ---------- vertical rhythm ---------- */
/* a page that hands off to a full-bleed section keeps no extra white band under it */
.page:has(+ .section) { padding-bottom: 0; }
.page > .story:last-child .story-text { padding-bottom: var(--section-y-sm); }
.together-title { text-wrap: balance; }
.deck-section { padding: var(--section-y-sm) 0; }
.deck-heading--next { margin-top: var(--s6); }