/*
  Baobab Investment Management, site styles. Third cut, 21 Aug 2026: the
  premium pass. Same bones as the second cut (charcoal and white bands, the
  manifesto as the dark centrepiece, the tree as atmosphere), now with light
  and depth: warm paper whites, dark bands lit by a soft glow with a film of
  grain, a frosted-glass header, staged reveals whose signature is the yellow
  horizon rule drawing itself, a sticky manifesto title with tenets that
  stamp in, feathered shadows on portraits and fund cards, and parallax on
  the hero and interlude (driven from the inline script in index.html).
  Brand per BRAND.md: Cabin / Open Sans, yellow as the working accent, red
  only in the logo. Content untouched.
  Hard rule: light-only colour scheme; the dark bands are painted, not themed.
  Reduced motion: every animation and transition collapses to visible-at-rest.
*/
:root {
  color-scheme: light only;
  --ink: #231f20;
  --muted: #6f6a6b;
  --ground: #fbfaf8;   /* warm paper, not device white */
  --panel: #f4f2ee;
  --line: #e6e3de;
  --yellow: #ffd900;
  /* the same hue, deepened for light surfaces: pure brand yellow reads
     washed-out on paper, so rules, pips and underlines on light bands use
     this while the dark bands keep the true yellow */
  --gold: #d9a908;
  /* the dark canvas, from the accepted proposal page */
  --deep: #0b0a0a;
  --dark: #0f0d0e;
  --dcard: #1d191a;
  --dline: #2c2728;
  --dink: #e8e4e5;
  --dmut: #9a9294;
  --display: 'Cabin', 'Segoe UI', sans-serif;
  --body: 'Open Sans', 'Segoe UI', sans-serif;
  --measure: 46rem;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --draw: cubic-bezier(.65, 0, .2, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: #8b8687 transparent; }

/* modern typesetting: no orphan words on headings, tidy rag on body text.
   Browsers without these simply wrap as before. */
h1, h2, h3, blockquote { text-wrap: balance; }
p { text-wrap: pretty; }

/* selection in the brand */
::selection { background: var(--yellow); color: var(--ink); }

/* cross-document view transitions: leaving for Insights fades instead of
   snapping. One line, ignored by browsers that lack it. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* the reading-progress horizon: the brand's yellow rule, fixed at the top
   of the viewport, filling as the page is read. CSS scroll-driven
   animation only; hidden entirely where the timeline is unsupported so no
   browser ever shows a stuck full bar. */
.journey { display: none; }
@supports (animation-timeline: scroll(root)) {
  .journey {
    display: block; position: fixed; top: 0; left: 0; right: 0; height: 3px;
    background: var(--gold); transform-origin: left; transform: scaleX(0);
    z-index: 20; pointer-events: none;
    animation: journey linear both;
    animation-timeline: scroll(root);
  }
  @keyframes journey { to { transform: scaleX(1); } }
  @media (prefers-reduced-motion: reduce) { .journey { display: none; } }
}
body {
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--ground);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-color .25s ease; }
a:hover { text-decoration-color: var(--yellow); text-decoration-thickness: 3px; }
a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

/* ---------- the lit dark bands ----------
   Every dark surface gets the same treatment: a base near-black, a soft
   warm glow as if lit from the upper left, a diagonal sheen, and a film of
   grain (the ::before). Content inside must sit in its own layer, which is
   why .sec-in, .foot-in and .legal are positioned. */
.hero, .band-dark, .band-deep, footer, .interlude { position: relative; }
/* the manifesto band's glow drifts, so the dark reads as lit, not painted */
@property --glow-x {
  syntax: '<percentage>'; initial-value: 8%; inherits: false;
}
.band-dark {
  background:
    radial-gradient(1100px 700px at var(--glow-x, 8%) -12%, rgba(255, 217, 0, .055), transparent 62%),
    linear-gradient(118deg, #161213 0%, var(--dark) 46%, #181414 100%);
  color: var(--dink);
  animation: glow-drift 22s ease-in-out infinite alternate;
}
@keyframes glow-drift { to { --glow-x: 20%; } }
.band-deep {
  background:
    radial-gradient(1000px 640px at 90% -14%, rgba(255, 217, 0, .045), transparent 60%),
    linear-gradient(244deg, #151112 0%, var(--deep) 48%, #161213 100%);
  color: var(--dink);
}
.band-dark::before, .band-deep::before, .hero::before, footer::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--grain); background-size: 180px;
  opacity: .05; pointer-events: none;
}
.sec-in { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; }

/* ---------- reveal system ----------
   One signature, used everywhere: the block rises as its yellow horizon
   rule draws itself left to right, then the content follows. --rvd is the
   stagger delay the script hands each element as it enters. */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease) var(--rvd, 0ms), transform .9s var(--ease) var(--rvd, 0ms); }
.rv.in { opacity: 1; transform: none; }
.rv .horizon { transform: scaleX(0); transform-origin: left; transition: transform .85s var(--draw) calc(var(--rvd, 0ms) + 180ms); }
.rv.in .horizon { transform: scaleX(1); }

/* the horizon line */
.horizon { width: 56px; height: 4px; background: var(--yellow); border: 0; margin: 0 0 24px; }

/* ---------- top bar: frosted glass ---------- */
.bar {
  position: sticky; top: 0; z-index: 10;
  /* .86, not lower: at .72 the blur over the dark bands turned the bar a
     muddy grey. This keeps it reading as warm glass on every band. */
  background: rgba(251, 250, 248, .86);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  border-bottom: 1px solid rgba(35, 31, 32, .08);
  transition: box-shadow .4s ease;
}
.bar.scrolled { box-shadow: 0 10px 34px -22px rgba(11, 10, 10, .35); }
.bar-in { max-width: 1180px; margin: 0 auto; padding: 14px 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; transition: padding .35s ease; }
.bar.scrolled .bar-in { padding-top: 9px; padding-bottom: 9px; }
.bar img { height: 34px; width: auto; transition: height .35s ease; }
.bar.scrolled img { height: 30px; }
.bar nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.bar nav a { position: relative; font-family: var(--display); font-weight: 600; font-size: 14.5px; text-decoration: none; color: var(--ink); padding: 2px 0; }
.bar nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.bar nav a:hover::after, .bar nav a:focus-visible::after { transform: scaleX(1); }
@media (max-width: 720px) { .bar nav { display: none; } }

/* ---------- hero: the dark opening ---------- */
.hero { background: var(--deep); color: var(--dink); overflow: hidden; }
.hero-photo { position: absolute; inset: 0; will-change: transform; }
.hero-photo img {
  width: 100%; height: 112%; object-fit: cover; object-position: 20% 35%;
  opacity: .5; filter: grayscale(1);
  transform: scale(1.05);
  animation: hero-drift 30s ease-in-out infinite alternate;
}
@keyframes hero-drift {
  from { transform: scale(1.05) translateX(0); }
  to   { transform: scale(1.12) translateX(-2.2%); }
}
.hero::before { z-index: 1; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(130% 100% at 88% 6%, transparent 42%, rgba(11, 10, 10, .48) 100%),
    linear-gradient(100deg, rgba(11, 10, 10, .93) 22%, rgba(11, 10, 10, .55) 55%, rgba(11, 10, 10, .26) 100%);
}
.hero-in { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: clamp(84px, 13vw, 190px) 22px clamp(84px, 12vw, 170px); }
.eyebrow { font-family: var(--display); font-weight: 700; font-size: 12.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--yellow); margin-bottom: 20px; }
.hero h1 { font-family: var(--display); font-weight: 700; font-size: clamp(46px, 7vw, 84px); line-height: 1.0; letter-spacing: -.015em; color: #ffffff; margin-bottom: 24px; max-width: 12em; }
.hero .lede { font-size: clamp(18px, 2vw, 21px); max-width: 32rem; color: var(--dink); }
.hero .horizon { margin-bottom: 28px; }

/* the staged arrival: kicker, then the rule draws, then the headline rises */
.hero-in > * { opacity: 0; animation: hero-rise .95s var(--ease) forwards; }
.hero-in > .eyebrow { animation-delay: .1s; }
.hero-in > .horizon { animation: hero-draw .9s var(--draw) .45s forwards; transform: scaleX(0); transform-origin: left; }
.hero-in > h1 { animation-delay: .5s; }
.hero-in > .lede { animation-delay: .78s; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes hero-draw { from { opacity: 1; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }

/* ---------- bands ---------- */
section { padding: clamp(64px, 9vw, 120px) 22px; }
/* The light bands are paper, not a void: a faint warm gradient, the same
   grain as the dark bands at a whisper, and an inset seam shadow so each
   light sheet sits under the dark band above it. */
.band-white, .band-panel { position: relative; }
.band-white {
  background: linear-gradient(180deg, #fdfcfa 0%, var(--ground) 30%, #f7f5f1 100%);
  box-shadow: inset 0 28px 44px -34px rgba(11, 10, 10, .22);
}
.band-panel {
  background: linear-gradient(180deg, #f7f5f1 0%, var(--panel) 40%, #f1efe9 100%);
  box-shadow: inset 0 28px 44px -34px rgba(11, 10, 10, .14);
}
.band-white::before, .band-panel::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--grain); background-size: 180px;
  opacity: .028; pointer-events: none;
}
/* light-surface accents take the deepened gold */
.band-white .horizon, .band-panel .horizon { background: var(--gold); }
.band-white .attrs li::before, .band-panel .attrs li::before { background: var(--gold); }
.band-white a:hover, .band-panel a:hover { text-decoration-color: var(--gold); }
.band-dark .eyebrow, .band-deep .eyebrow { color: var(--yellow); }
h2 { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 4vw, 46px); line-height: 1.08; letter-spacing: -.01em; margin-bottom: 22px; }
.band-dark h2, .band-deep h2 { color: #ffffff; }
.prose { max-width: var(--measure); }
.prose p { margin-bottom: 1.15em; }
.prose p:last-child { margin-bottom: 0; }
.lead { font-size: clamp(18px, 2vw, 20px); }
.band-dark p, .band-deep p { color: var(--dmut); }
.band-dark .lead, .band-deep .lead { color: var(--dink); }

/* pull quote */
.pull { max-width: var(--measure); margin: 40px 0 0; padding-left: 26px; border-left: 4px solid var(--yellow); font-family: var(--display); font-weight: 600; font-size: clamp(20px, 2.6vw, 26px); line-height: 1.35; }
.pull cite { display: block; margin-top: 10px; font-family: var(--body); font-style: normal; font-weight: 400; font-size: 14px; color: var(--muted); }
.band-dark .pull cite, .band-deep .pull cite { color: var(--dmut); }

/* on the light bands the quote is a raised paper card, not a floating line */
.band-white .pull, .band-panel .pull {
  position: relative;
  background: #ffffff;
  border: 1px solid #edeae4;
  border-left: 4px solid var(--gold);
  border-radius: 16px;
  padding: 34px 36px 30px;
  box-shadow: 0 32px 60px -36px rgba(11, 10, 10, .3), 0 10px 24px -16px rgba(11, 10, 10, .16);
}
.band-white .pull::before, .band-panel .pull::before {
  content: "\201C"; position: absolute; top: -6px; right: 22px;
  font-family: var(--display); font-weight: 700; font-size: 96px; line-height: 1;
  color: var(--gold); opacity: .28; pointer-events: none;
}

/* Our business: the prose and the da Vinci card share the row */
#business .sec-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(260px, 4fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
#business .pull { margin-top: 0; }
@media (max-width: 880px) {
  #business .sec-in { grid-template-columns: 1fr; }
  #business .pull { margin-top: 8px; }
}

/* Attributes: raised tiles, so the light band holds objects with edges.
   Seven items cannot balance a three-column grid, and the list is the
   client's own words, so nothing is added or dropped: the first six sit
   3 x 2 at equal height, and the seventh (holding cash, their most
   contrarian belief) closes the set as a full-width anchor strip. */
.attrs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); grid-auto-rows: 1fr; gap: 14px 16px; list-style: none; max-width: 66rem; margin-top: 30px; }
.attrs li {
  position: relative; padding: 15px 18px 15px 46px; font-size: 16px;
  text-wrap: balance;
  background: #ffffff;
  border: 1px solid #edeae4;
  border-radius: 12px;
  box-shadow: 0 18px 36px -28px rgba(11, 10, 10, .3), 0 4px 12px -8px rgba(11, 10, 10, .12);
  display: flex; align-items: center;
}
.attrs li::before { content: ""; position: absolute; left: 20px; top: 50%; margin-top: -6px; width: 12px; height: 12px; background: var(--yellow); }
@media (min-width: 640px) {
  .attrs li:last-child { grid-column: 1 / -1; justify-content: center; padding-left: 18px; }
  .attrs li:last-child::before { position: static; margin: 0 14px 0 0; flex: none; }
}

/* ---------- manifesto: the set piece ----------
   The title holds its ground on the left while the tenets scroll past on
   the right. Each tenet arrives as its yellow square stamps in and the
   hairline above it draws across. Single column again below 920px. */
.creed { display: grid; grid-template-columns: minmax(300px, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.creed-head { position: sticky; top: 118px; }
.creed-head > p:last-of-type { color: var(--dink); font-size: 19px; }
.tenets { min-width: 0; }
.tenet { position: relative; padding: 26px 0 22px; margin: 0; color: var(--dmut); }
.tenet::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--dline);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1s var(--draw) var(--rvd, 0ms);
}
.tenet.in::before { transform: scaleX(1); }
.tenet b { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(19px, 2.2vw, 24px); line-height: 1.3; color: #ffffff; margin-bottom: 6px; }
.tenet b::before {
  content: ""; display: inline-block; width: 12px; height: 12px; background: var(--yellow); margin-right: 14px;
  transform: scale(0);
  transition: transform .55s cubic-bezier(.34, 1.56, .64, 1) calc(var(--rvd, 0ms) + 250ms);
}
.tenet.in b::before { transform: scale(1); }
@media (max-width: 920px) {
  .creed { grid-template-columns: 1fr; }
  .creed-head { position: static; margin-bottom: 8px; }
}

/* people */
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 48px; margin-top: 12px; }
.person img {
  width: 100%; max-width: 360px; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1);
  border-radius: 12px;
  box-shadow: 0 30px 60px -32px rgba(11, 10, 10, .45), 0 10px 24px -14px rgba(11, 10, 10, .25);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), filter .8s ease;
}
/* The portraits stay editorial mono until met, then warm in tone. The
   source files are true black and white, so a colour reveal has nothing to
   show; if colour originals ever arrive, swap this filter for
   grayscale(0). */
.person:hover img {
  transform: translateY(-6px);
  filter: grayscale(1) sepia(.32) saturate(1.5) brightness(1.03);
  box-shadow: 0 42px 74px -34px rgba(11, 10, 10, .5), 0 14px 30px -14px rgba(11, 10, 10, .28);
}
.person h3 { font-family: var(--display); font-weight: 700; font-size: 23px; margin: 20px 0 2px; }
.person .role { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.person p { margin-bottom: 1em; }

/* the tree interlude: parallax window with the quote rising word by word */
.interlude { padding: 0; height: clamp(240px, 36vw, 440px); background: var(--deep); overflow: hidden; }
.interlude img {
  position: absolute; left: 0; top: -16%; width: 100%; height: 132%;
  object-fit: cover; object-position: 15% 20%; opacity: .55; filter: grayscale(1);
  will-change: transform;
}
.interlude p {
  position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center;
  padding: 0 22px; text-align: center;
  font-family: var(--display); font-weight: 700; color: #ffffff;
  font-size: clamp(22px, 3.4vw, 38px); line-height: 1.25;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .55);
}
.interlude .w { display: inline-block; opacity: 0; transform: translateY(.55em); transition: opacity .7s var(--ease) var(--wd, 0ms), transform .7s var(--ease) var(--wd, 0ms); }
.interlude.in .w { opacity: 1; transform: none; }

/* funds: dark cards, raised */
.funds { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 32px; }
.fund {
  background: linear-gradient(160deg, #221d1e 0%, var(--dcard) 55%);
  border: 1px solid var(--dline); border-top: 4px solid var(--yellow);
  border-radius: 14px;
  padding: 30px 30px 26px;
  box-shadow: 0 36px 70px -42px rgba(0, 0, 0, .9);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s ease;
}
.fund:hover { transform: translateY(-6px); border-color: #3b3536; border-top-color: var(--yellow); box-shadow: 0 48px 86px -44px rgba(0, 0, 0, .95); }
.fund h3 { font-family: var(--display); font-weight: 700; font-size: 22px; color: #ffffff; margin-bottom: 6px; }
.fund .meta { font-size: 13.5px; color: var(--dmut); margin-bottom: 16px; }
.fund p { margin-bottom: 16px; }
.fund a { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--dink); }

/* insights article */
.article { max-width: var(--measure); }
.article h1 { font-family: var(--display); font-weight: 700; font-size: clamp(32px, 5vw, 52px); line-height: 1.06; margin-bottom: 12px; }
.article .meta { font-size: 14px; color: var(--muted); margin-bottom: 34px; }
.article p { margin-bottom: 1.15em; }

/* ---------- insights: the reading room ----------
   The page itself is the dark surface (the manifesto's lit charcoal with
   grain), and the commentary sits on it as a raised ivory sheet with the
   gold spine: the quarterly letter on a dark desk. The letter's text keeps
   light-surface readability; the room does the theatre. */
body.reading {
  color: var(--dink);
  background:
    radial-gradient(1100px 700px at 10% -6%, rgba(255, 217, 0, .05), transparent 60%),
    linear-gradient(118deg, #151112 0%, var(--deep) 55%, #171314 100%);
}
body.reading::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: var(--grain); background-size: 180px;
  opacity: .05; pointer-events: none;
}
.reading-head { padding: clamp(56px, 8vw, 104px) 22px 0; }
.reading-head .eyebrow { color: var(--yellow); }
.reading-head h1 { font-family: var(--display); font-weight: 700; font-size: clamp(34px, 5vw, 56px); line-height: 1.06; color: #ffffff; margin-bottom: 10px; }
.reading-head .meta { font-size: 14px; color: var(--dmut); }
.reading-body { padding: clamp(34px, 5vw, 60px) 22px clamp(64px, 9vw, 110px); }
.letter {
  max-width: 54rem;
  background: linear-gradient(180deg, #fffefb 0%, var(--ground) 100%);
  color: var(--ink);
  border: 1px solid #edeae4;
  border-left: 4px solid var(--gold);
  border-radius: 18px;
  padding: clamp(28px, 5vw, 60px);
  box-shadow: 0 60px 110px -60px rgba(0, 0, 0, .85), 0 22px 48px -30px rgba(0, 0, 0, .5);
}
.letter p { color: var(--ink); }
/* the archive shelves: their own categories, as racks of documents in the
   dark room. Cards are whole-card links in the fund-card language. */
.shelf { margin-top: clamp(44px, 6vw, 72px); }
.shelf .horizon { background: var(--yellow); }
.shelf h2 { color: #ffffff; font-size: clamp(24px, 3vw, 34px); }
.shelf > .note-line { color: var(--dmut); font-size: 15px; max-width: var(--measure); margin: -8px 0 0; }
.docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-top: 26px; }
.doc {
  display: block; text-decoration: none;
  background: linear-gradient(160deg, #221d1e 0%, var(--dcard) 60%);
  border: 1px solid var(--dline); border-top: 3px solid var(--yellow);
  border-radius: 12px; padding: 20px 20px 16px;
  box-shadow: 0 24px 50px -34px rgba(0, 0, 0, .85);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s ease;
}
.doc:hover { transform: translateY(-4px); border-color: #3b3536; box-shadow: 0 34px 60px -36px rgba(0, 0, 0, .95); }
.doc b { display: block; font-family: var(--display); font-weight: 700; font-size: 17px; line-height: 1.3; color: #ffffff; margin-bottom: 6px; text-wrap: balance; }
.doc span { font-size: 13px; color: var(--dmut); }

/* the featured letter: an ivory sheet peeking out of the dark hub, the
   same material as the letter page it opens */
.doc-lead {
  display: block; max-width: 40rem; margin-top: 26px; text-decoration: none;
  background: linear-gradient(180deg, #fffefb 0%, var(--ground) 100%);
  color: var(--ink);
  border: 1px solid #edeae4; border-left: 4px solid var(--gold);
  border-radius: 16px; padding: 26px 30px 22px;
  box-shadow: 0 44px 84px -48px rgba(0, 0, 0, .85), 0 16px 36px -24px rgba(0, 0, 0, .45);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.doc-lead:hover { transform: translateY(-4px); box-shadow: 0 54px 96px -50px rgba(0, 0, 0, .95), 0 20px 42px -24px rgba(0, 0, 0, .5); }
.doc-lead b { display: block; font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.25; margin-bottom: 6px; text-wrap: balance; }
.doc-lead span { font-size: 14px; color: var(--muted); }

/* the page arrives like the hero: title first, then the letter rises */
.reading-head .sec-in > * { opacity: 0; animation: hero-rise .9s var(--ease) forwards; }
.reading-head .eyebrow { animation-delay: .05s; }
.reading-head .horizon { animation: hero-draw .8s var(--draw) .3s forwards; transform: scaleX(0); transform-origin: left; opacity: 0; }
.reading-head h1 { animation-delay: .35s; }
.reading-head .meta { animation-delay: .55s; }
.letter { opacity: 0; animation: hero-rise 1s var(--ease) .55s forwards; }

/* footer: lit charcoal with the tree as a ghost */
footer {
  background:
    radial-gradient(900px 560px at 10% -20%, rgba(255, 217, 0, .05), transparent 60%),
    linear-gradient(118deg, #151112 0%, var(--deep) 55%),
    var(--deep);
  color: var(--dmut); padding: 56px 22px 60px; overflow: hidden;
}
footer::after {
  content: ""; position: absolute; right: -4%; bottom: -18%;
  width: min(620px, 70vw); aspect-ratio: 1 / 1;
  background: url(/assets/tree.png) 30% 20% / cover no-repeat;
  filter: grayscale(1);
  opacity: .08; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 72%);
  mask-image: radial-gradient(closest-side, #000 30%, transparent 72%);
}
.foot-in { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 34px; }
footer h4 { font-family: var(--display); font-weight: 700; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--yellow); margin-bottom: 14px; }
footer p, footer li { font-size: 15px; }
footer a { color: var(--dink); }
footer ul { list-style: none; }
footer li { margin-bottom: 7px; }
.legal { position: relative; z-index: 1; max-width: 1180px; margin: 38px auto 0; padding-top: 20px; border-top: 1px solid var(--dline); font-size: 12.5px; }

/* ---------- reduced motion: everything at rest, visible ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv, .rv .horizon, .interlude .w, .tenet::before, .tenet b::before,
  .hero-in > *, .hero-in > .horizon { opacity: 1; transform: none; transition: none; animation: none; }
  .hero-photo img { animation: none; transform: none; }
  .band-dark { animation: none; }
  .person img, .fund, .bar-in, .bar img { transition: none; }
  .reading-head .sec-in > *, .reading-head .horizon, .letter { animation: none; opacity: 1; transform: none; }
}