/* Lake world, second pass. The real lake footage is fixed behind the whole page; content sits on one family of
   dark glass cards with a gold hairline (cream glass only where you join). Scrolling deepens the light from dawn
   to dusk while motion is on; under Pause and under reduced motion the light rests at dawn.
   Text and buttons never move on their own. The breath guide in 03 runs only after its Begin button. */

@font-face { font-family: "EB Garamond"; src: url(fonts/ebgaramond-roman-latin-v33.woff2) format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url(fonts/ebgaramond-italic-latin-v33.woff2) format("woff2"); font-weight: 400 800; font-style: italic; font-display: swap; }
/* Georgia sized to EB Garamond, so lines hold while the web font loads */
@font-face { font-family: "EB Garamond Fallback"; src: local("Georgia"); size-adjust: 90%; ascent-override: 112%; descent-override: 33%; line-gap-override: 0%; }
/* Overrides are scaled by size-adjust, so these land on Jost's own 1.07 ascent and .375 descent */
@font-face { font-family: "Jost Fallback"; src: local("Arial"); size-adjust: 96.6%; ascent-override: 110.8%; descent-override: 38.8%; line-gap-override: 0%; }

:root {
  --paper: #FBF7EF;
  --ink: #221B14;
  --ink-2: #4B4034;
  --gold: #EBA21C;
  --gold-lt: #F3C97E;
  --gold-hi: #F8DC9E;
  --gold-dk: #B67810;
  --dusk: 30, 21, 12;
  --cream-2: rgba(251, 247, 239, .8);
  --hair: rgba(235, 162, 28, .34);
  --serif: "EB Garamond", "EB Garamond Fallback", Georgia, serif;
  --sans: "Jost", "Jost Fallback", "Segoe UI", Arial, sans-serif;
  --gut: clamp(16px, 5.2vw, 120px);
  --wrap: 1200px;
  --head: 76px;
  --r: 16px;
}
@media (max-width: 759px) { :root { --head: 64px; --r: 14px; } }
@media (min-width: 1800px) { :root { --wrap: 1320px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--head) + 16px); background: rgb(var(--dusk)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100vh;
  background: rgb(var(--dusk));
  color: var(--paper);
  font: 400 19px/1.6 var(--serif);
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
p, dl, dd { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button { font: inherit; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nw { white-space: nowrap; }
.wrap { width: min(100% - 2 * var(--gut), var(--wrap)); margin-inline: auto; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 3px; border-radius: 4px; }
.cream :focus-visible, .top:not(.solid) .tool:focus-visible, .top:not(.solid) .mark:focus-visible { outline-color: var(--ink); }

.skip { position: absolute; left: 16px; top: -100px; z-index: 50; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; background: var(--paper); color: var(--ink); font: 500 15px/1 var(--sans); border-radius: 6px; text-decoration: none; }
.skip:focus { top: 12px; }
.skip:focus-visible { outline-color: var(--ink); }

/* ---------- The world: fixed footage and the light over it ---------- */
.world { position: fixed; inset: 0; height: 100vh; height: 100lvh; z-index: 0; overflow: hidden; background: #3A2A16; pointer-events: none; }
.world img, .world video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.world video { opacity: 0; transition: opacity 1.4s ease; }
.world.live video { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .world video { transition: none; } }
/* --sx and --sy are the sun's place on screen (set from the frame size by the script), so the light can keep it warm. */
.world { --sx: 50%; --sy: 21%; }
.tint { position: absolute; inset: 0; }
/* The dawn values below are the resting light: what shows before any scroll, under Pause and under reduced motion. */
.tint-dawn { opacity: 1; background:
  radial-gradient(circle at var(--sx) var(--sy), rgba(255, 250, 236, .55) 0, rgba(255, 240, 200, .3) 1.4vmax, rgba(235, 162, 28, .16) 3.8vmax, rgba(235, 162, 28, 0) 12vmax),
  linear-gradient(180deg, rgba(var(--dusk), 0) 0%, rgba(var(--dusk), 0) 46%, rgba(var(--dusk), .14) 70%, rgba(var(--dusk), .3) 100%); }
/* The warm wash leaves the sun's own core white-hot */
.tint-amber { opacity: .2; mix-blend-mode: multiply; background: linear-gradient(180deg, rgb(205, 128, 40) 0%, rgb(222, 150, 62) 40%, rgb(150, 92, 40) 70%, rgb(110, 68, 34) 100%);
  -webkit-mask-image: radial-gradient(circle at var(--sx) var(--sy), rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, .15) 1.2vmax, #000 7vmax);
  mask-image: radial-gradient(circle at var(--sx) var(--sy), rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, .15) 1.2vmax, #000 7vmax); }
/* Pause and Play ease the light between its resting dawn and the scroll-linked value, instead of a jump */
.world.easing .tint { transition: opacity .9s ease; }
@media (prefers-reduced-motion: reduce) { .world.easing .tint { transition: none; } }
/* Dusk: the sky darkens, and the sun stays a low amber ember instead of a grey disc */
.tint-ember { opacity: 0; mix-blend-mode: multiply; background: radial-gradient(circle at var(--sx) var(--sy), rgb(236, 138, 40) 0, rgb(232, 138, 52) 4vmax, rgba(232, 138, 52, .75) 8vmax, rgba(232, 138, 52, 0) 18vmax); }
.tint-dusk { opacity: 0; background: linear-gradient(180deg, rgba(var(--dusk), .93) 0%, rgba(var(--dusk), .84) 28%, rgba(62, 36, 13, .7) 46%, rgba(var(--dusk), .8) 60%, rgba(var(--dusk), .93) 100%);
  -webkit-mask-image: radial-gradient(circle at var(--sx) var(--sy), rgba(0, 0, 0, .45) 0, rgba(0, 0, 0, .7) 3vmax, #000 13vmax);
  mask-image: radial-gradient(circle at var(--sx) var(--sy), rgba(0, 0, 0, .45) 0, rgba(0, 0, 0, .7) 3vmax, #000 13vmax); }

/* ---------- Header: ink over the dawn sky, smoked glass once the page scrolls ---------- */
.top { position: sticky; top: 0; z-index: 30; height: var(--head); color: var(--ink); border-bottom: 1px solid rgba(235, 162, 28, 0); transition: border-color .4s ease, color .4s ease; }
.top::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s ease; background: linear-gradient(180deg, rgba(var(--dusk), .9), rgba(var(--dusk), .82)); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.top.solid { color: var(--paper); border-bottom-color: rgba(235, 162, 28, .26); }
.top.solid::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .top, .top::before, .tool { transition: none; } }
.top-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mark { display: grid; gap: 4px; text-decoration: none; min-height: 44px; align-content: center; }
.mark-name { font: 500 18px/1.1 var(--serif); letter-spacing: .14em; text-transform: uppercase; font-variant-numeric: lining-nums; }
.mark-name span { white-space: nowrap; }
.mark-sub { font: 400 12.5px/1.2 var(--sans); letter-spacing: .04em; }
.top:not(.solid) .mark-sub { color: #3A2E22; }
.top.solid .mark-sub { color: var(--cream-2); }
.tools { display: flex; align-items: center; gap: 8px; }
.tool { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; min-width: 44px; padding: 0 16px; border-radius: 999px; color: inherit; cursor: pointer;
  font: 400 14px/1 var(--sans); letter-spacing: .04em;
  border: 1px solid rgba(34, 27, 20, .3); background: rgba(251, 247, 239, .2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background-color .25s ease, border-color .25s ease; }
.tool:hover { background: rgba(251, 247, 239, .34); }
.top.solid .tool { border-color: rgba(235, 162, 28, .38); background: rgba(var(--dusk), .3); }
.top.solid .tool:hover { background: rgba(var(--dusk), .55); border-color: rgba(235, 162, 28, .7); }
.tool svg { width: 13px; height: 13px; flex: none; }
#motion { min-width: 100px; }
#motion .i-play { display: none; }
html.still #motion .i-play { display: block; }
html.still #motion .i-pause { display: none; }

.menu { position: relative; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu nav { position: absolute; right: 0; top: calc(100% + 14px); width: 260px; padding: 10px; border-radius: 14px; color: var(--paper); background: rgba(var(--dusk), .95); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid var(--hair); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.menu a { display: flex; align-items: baseline; gap: 14px; min-height: 46px; padding: 12px 14px 0; border-radius: 8px; text-decoration: none; font: 400 19px/1.2 var(--serif); }
.menu a:hover { background: rgba(251, 247, 239, .08); }
.menu a span { font: 400 16px/1 var(--serif); color: var(--gold-lt); min-width: 20px; }
.menu :focus-visible { outline-color: var(--gold-lt); }

/* ---------- One card family ---------- */
/* main paints over the world by tree order, without its own stacking context, so the signoff's warm shade
   can multiply straight onto the footage. The footer keeps a plain stacking context. */
main { position: relative; }
.foot { position: relative; z-index: 1; }

.glass {
  position: relative; border-radius: var(--r); border: 1px solid var(--hair); color: var(--paper);
  background: linear-gradient(160deg, rgba(var(--dusk), .72), rgba(var(--dusk), .84));
  /* The hue turn keeps a bright lemon sky behind the glass reading as amber, not olive. */
  -webkit-backdrop-filter: blur(22px) saturate(1.15) hue-rotate(-12deg); backdrop-filter: blur(22px) saturate(1.15) hue-rotate(-12deg);
  box-shadow: inset 0 1px 0 rgba(251, 247, 239, .08), 0 40px 90px -50px rgba(0, 0, 0, .9);
}
/* Cream glass marks the one main action: joining. */
.glass.cream {
  color: var(--ink); border-color: rgba(182, 120, 16, .42);
  background: linear-gradient(135deg, rgba(253, 250, 243, .95), rgba(250, 241, 222, .9));
  -webkit-backdrop-filter: blur(30px) saturate(1.15); backdrop-filter: blur(30px) saturate(1.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 40px 90px -50px rgba(var(--dusk), .85);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(var(--dusk), .95); }
  .glass.cream { background: rgba(251, 247, 239, .97); }
  .top::before, .menu nav { background: rgba(var(--dusk), .95); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .top::before, .menu nav { background: rgba(var(--dusk), .96); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .glass.cream { background: rgba(251, 247, 239, .97); }
}

/* Quiet section labels: a small serif numeral and a plain sans word */
.label { display: flex; align-items: baseline; gap: 12px; margin: 0 0 20px; font: 400 13.5px/1.3 var(--sans); letter-spacing: .05em; color: var(--cream-2); }
.label .num { font: 400 17px/1 var(--serif); font-variant-numeric: oldstyle-nums; letter-spacing: .02em; color: var(--gold-lt); }
.cream .label { color: var(--ink-2); }
.cream .label .num { color: #8C5C0E; }

.h2 { font: 400 clamp(34px, 3.7vw, 54px)/1.08 var(--serif); letter-spacing: -.005em; text-wrap: balance; }
.h3 { font: 400 clamp(27px, 2.3vw, 34px)/1.16 var(--serif); text-wrap: balance; }
.lead { font: 400 clamp(23px, 2.1vw, 31px)/1.38 var(--serif); text-wrap: pretty; }
.body { font-size: clamp(18px, 1.4vw, 20px); line-height: 1.6; }
.soft { color: var(--cream-2); }
.cream .soft { color: var(--ink-2); }

.btn-gold {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 0 30px; border-radius: 6px;
  font: 500 15px/1.2 var(--sans); letter-spacing: .05em; text-decoration: none; text-align: center;
  color: var(--ink); cursor: pointer;
  background: linear-gradient(120deg, #FBE3AC 0%, #F2BE57 34%, #EBA21C 66%, #DC9418 100%);
  border: 1px solid #FBE3AC;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(140, 86, 8, .25), 0 12px 36px -14px rgba(235, 162, 28, .7);
  transition: filter .25s ease, box-shadow .25s ease;
}
.btn-gold:hover { filter: brightness(1.07) saturate(1.05); }
.cream .btn-gold { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(140, 86, 8, .25), 0 10px 22px -14px rgba(var(--dusk), .6); }
.btn-line { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 6px; border: 1px solid rgba(243, 201, 126, .55); background: none; color: var(--paper); cursor: pointer; text-decoration: none; font: 400 15px/1 var(--sans); letter-spacing: .05em; transition: background-color .25s ease, border-color .25s ease; }
.btn-line:hover { background: rgba(243, 201, 126, .12); border-color: var(--gold-lt); }
.arrow { width: 16px; height: 16px; flex: none; }

.station { position: relative; padding-block: clamp(64px, 11vh, 132px); scroll-margin-top: var(--head); }

/* ---------- Hero: the sunrise, sun left clear ---------- */
.hero { position: relative; margin-top: calc(-1 * var(--head)); min-height: 100vh; min-height: 100svh; display: grid; align-content: end; padding-bottom: clamp(48px, 10vh, 108px); }
/* The scrim sits only behind the words, low and left; the sky and the sun above stay untouched. */
.hero-scrim { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(var(--dusk), .74) 0%, rgba(var(--dusk), .6) 36%, rgba(var(--dusk), .3) 58%, rgba(var(--dusk), .06) 74%, rgba(var(--dusk), 0) 86%),
    linear-gradient(0deg, rgba(var(--dusk), .6) 0%, rgba(var(--dusk), .2) 30%, rgba(var(--dusk), 0) 52%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 34%, #000 52%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, transparent 34%, #000 52%, #000 84%, transparent 100%); }
/* The scrim's warm half, multiplied onto the footage in the same shape. As the hero scrolls past the fixed sun,
   whatever the scrim darkens turns amber brown instead of grey, and the lemon sky turns gold instead of olive. */
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
  background:
    linear-gradient(90deg, rgba(232, 140, 44, .74) 0%, rgba(232, 140, 44, .6) 36%, rgba(232, 140, 44, .3) 58%, rgba(232, 140, 44, .06) 74%, rgba(232, 140, 44, 0) 86%),
    linear-gradient(0deg, rgba(232, 140, 44, .6) 0%, rgba(232, 140, 44, .2) 30%, rgba(232, 140, 44, 0) 52%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 34%, #000 52%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, transparent 34%, #000 52%, #000 84%, transparent 100%); }
.hero-in { position: relative; }
.hero-line { font: 400 clamp(44px, 6.4vw, 100px)/1.02 var(--serif); letter-spacing: -.012em; text-shadow: 0 2px 30px rgba(var(--dusk), .45); }
.hero-line span { display: block; }
.hero-act { display: grid; justify-items: start; gap: 20px; margin-top: clamp(30px, 4.6vh, 46px); }
/* The world stays put while this line scrolls up into the bright sky, so it carries its own close shade */
.trust { font: 400 14px/1.4 var(--sans); letter-spacing: .04em; color: var(--paper); font-variant-numeric: lining-nums; text-shadow: 0 0 5px rgba(var(--dusk), .85), 0 0 12px rgba(var(--dusk), .7), 0 1px 22px rgba(var(--dusk), .6); }

/* ---------- Shore gauge: the station index on wide screens ---------- */
.gauge-hold { position: sticky; top: calc(50vh - 162px); height: 0; z-index: 4; display: none; }
.gauge { position: absolute; right: 26px; top: 0; display: grid; padding: 8px 0; }
.gauge::before { content: ""; position: absolute; right: 21px; top: 0; bottom: 0; width: 1px; background: rgba(243, 201, 126, .3); }
.gauge a { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 12px; height: 44px; text-decoration: none; font: 400 16px/1 var(--serif); color: rgba(251, 247, 239, .7); }
.gauge a::after { content: ""; width: 28px; height: 2px; margin-right: 8px; background: linear-gradient(90deg, transparent 9px, rgba(243, 201, 126, .6) 9px, rgba(243, 201, 126, .6) 21px, transparent 21px) 0 50% / 100% 1px no-repeat; }
/* The station name stays in the link's accessible name; it only shows on hover or focus */
.gauge a .gn { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; font: 400 13px/1 var(--sans); letter-spacing: .04em; }
.gauge a:hover, .gauge a:focus-visible { color: var(--paper); }
.gauge a:hover .gn, .gauge a:focus-visible .gn { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
.gauge a[aria-current="true"] { color: var(--gold-lt); }
.gauge a[aria-current="true"]::after { background: var(--gold); }
@media (min-width: 1600px) and (min-height: 640px) { .gauge-hold { display: block; } }

/* ---------- 01 Join: where the hero button lands ---------- */
.st-join { padding-top: clamp(56px, 9vh, 96px); }
.join-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-areas: "head head" "promise form"; column-gap: 64px; align-items: center; padding: clamp(28px, 4vw, 56px); transition: box-shadow .3s ease; }
/* The panel answers when its email field has focus, so the hero button visibly arrives here. */
.join-panel:focus-within { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 0 1px rgba(235, 162, 28, .75), 0 0 0 7px rgba(235, 162, 28, .2), 0 40px 90px -50px rgba(var(--dusk), .85); }
.join-head { grid-area: head; padding-bottom: clamp(22px, 2.4vw, 32px); margin-bottom: clamp(22px, 2.4vw, 32px); border-bottom: 1px solid rgba(182, 120, 16, .38); }
.join-panel > .promise { grid-area: promise; }
.join-panel > .join-form { grid-area: form; }
.promise { font-size: clamp(19px, 1.5vw, 22px); }
.join-form { display: flex; flex-wrap: wrap; gap: 12px; }
.join-form input[type=email] { flex: 1 1 240px; min-width: 0; min-height: 56px; padding: 0 18px; border-radius: 6px; font: 400 19px/1.2 var(--serif); color: var(--ink); background: rgba(255, 253, 248, .95); border: 1px solid rgba(182, 120, 16, .55); }
.join-form input::placeholder { color: #6F6253; opacity: 1; }
.join-form input[type=email]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.join-form .btn-gold { flex: 0 0 auto; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.thanks { flex-basis: 100%; font: italic 400 19px/1.4 var(--serif); }

/* ---------- 02 Who we are and Our mission: one card, two voices ---------- */
.who-panel { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); padding: clamp(32px, 4.6vw, 64px); }
.who-main { padding-right: clamp(32px, 4.4vw, 64px); }
.who-main .lead { max-width: 30ch; }
.who-mission { padding-left: clamp(32px, 4.4vw, 64px); border-left: 1px solid var(--hair); align-self: stretch; display: grid; align-content: start; }
.who-mission .label { margin-top: 3px; }

/* ---------- 03 Practice: the breath lens, still until Begin ---------- */
.st-practice { overflow: clip; padding-block: clamp(120px, 18vh, 200px); }
.lens { --b: 0; position: relative; width: min(90vw, 480px); aspect-ratio: 1; margin-inline: auto; display: grid; place-items: center; }
.halo, .ring, .track { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.halo { width: 168%; height: 168%; margin: -84% 0 0 -84%; border-radius: 50%; opacity: .3;
  background: radial-gradient(circle, rgba(235, 162, 28, 0) 0 28%, rgba(248, 220, 158, .6) 30.5%, rgba(235, 162, 28, .26) 40%, rgba(235, 162, 28, .08) 52%, rgba(235, 162, 28, 0) 64%); }
.ring { border-radius: 50%; border: 1px solid rgba(243, 201, 126, .42); }
.r1 { width: 124%; height: 124%; margin: -62% 0 0 -62%; }
.r2 { width: 144%; height: 144%; margin: -72% 0 0 -72%; border-color: rgba(243, 201, 126, .26); }
.r3 { width: 166%; height: 166%; margin: -83% 0 0 -83%; border-color: rgba(243, 201, 126, .14); }
.track { width: 110%; height: 110%; margin: -55% 0 0 -55%; transform: rotate(-90deg); overflow: visible; }
.track circle { fill: none; stroke-width: .3; }
.track-bg { stroke: rgba(243, 201, 126, .2); }
.track-fill { stroke: var(--gold-lt); stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; }
.lens:not(.guiding) .track-fill { visibility: hidden; }
/* Under reduced motion nothing sweeps: the words and the count pace the guide on their own. */
@media (prefers-reduced-motion: reduce) { .track-fill { display: none; } }
/* Breathing in, the rings and the light open; breathing out, they settle. Reduced motion keeps them still. */
@media (prefers-reduced-motion: no-preference) {
  .halo { opacity: calc(.3 + var(--b) * .7); transform: scale(calc(.9 + var(--b) * .16)); }
  .r1 { transform: scale(calc(1 + var(--b) * .05)); opacity: calc(.7 + var(--b) * .3); }
  .r2 { transform: scale(calc(1 + var(--b) * .08)); opacity: calc(.6 + var(--b) * .4); }
  .r3 { transform: scale(calc(1 + var(--b) * .11)); opacity: calc(.5 + var(--b) * .5); }
}
.glass.lens-disc { position: relative; width: 100%; height: 100%; border-radius: 50%; display: grid; place-content: center; justify-items: center; text-align: center; padding: 13%;
  background: radial-gradient(circle at 50% 36%, rgba(var(--dusk), .7) 0%, rgba(var(--dusk), .8) 62%, rgba(var(--dusk), .88) 100%); }
.glass.lens-disc::before { content: ""; position: absolute; inset: 4%; border-radius: 50%; border: 1px solid rgba(235, 162, 28, .2); pointer-events: none; }
.lens-disc:focus { outline: none; }
/* Keyboard focus lands on the disc after Begin: its inner ring brightens to show it */
.glass.lens-disc:focus-visible::before { border: 2px solid var(--gold-lt); }
.lens.held .say { opacity: .55; }
.lens .label { justify-content: center; margin-bottom: 14px; color: rgba(251, 247, 239, .88); }
.lens-h { font: 400 clamp(32px, 3.3vw, 44px)/1.08 var(--serif); }
.swap { display: grid; width: 100%; justify-items: center; }
.swap > * { grid-area: 1 / 1; }
.swap-cue { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hair); max-width: 30ch; }
.cue { font: italic 400 clamp(19px, 1.5vw, 21px)/1.5 var(--serif); color: var(--cream-2); text-wrap: balance; }
.say { align-self: center; font: italic 400 clamp(30px, 2.8vw, 38px)/1.1 var(--serif); color: var(--gold-hi); }
.swap-act { margin-top: 20px; min-height: 48px; }
.count { align-self: center; font: 400 14px/1.2 var(--sans); letter-spacing: .06em; color: var(--cream-2); font-variant-numeric: lining-nums; }
.lens:not(.guiding) .guide-only, .lens.guiding .rest-only { visibility: hidden; }

/* ---------- 04 Event and 05 Writing ---------- */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.card { overflow: hidden; display: flex; flex-direction: column; }
.card > article { display: flex; flex-direction: column; flex: 1; }
.plate { position: relative; aspect-ratio: 16 / 7; overflow: hidden; background-repeat: no-repeat; border-bottom: 1px solid rgba(235, 162, 28, .4); }
.plate-art { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Evening: the darkest water of the real still, the light path brought down to dusk */
.plate-evening { background-image: var(--pl-v), var(--pl-a), var(--pl-b), url(images/sea-poster.jpg);
  --pl-v: linear-gradient(90deg, rgba(var(--dusk), .8) 0%, rgba(var(--dusk), .36) 34%, rgba(var(--dusk), .2) 50%, rgba(var(--dusk), .36) 66%, rgba(var(--dusk), .8) 100%);
  --pl-a: linear-gradient(180deg, rgba(var(--dusk), .78) 0%, rgba(var(--dusk), .5) 50%, rgba(var(--dusk), .76) 100%);
  --pl-b: linear-gradient(rgb(214, 136, 64), rgb(214, 136, 64));
  background-size: cover, cover, cover, 240% auto; background-position: 0 0, 0 0, 0 0, 51.5% 100%; background-blend-mode: normal, normal, multiply, normal; }
/* Breath: open golden water near the light path */
.plate-breath { background-image: linear-gradient(180deg, rgba(var(--dusk), .16) 0%, rgba(var(--dusk), .1) 50%, rgba(var(--dusk), .4) 100%), linear-gradient(rgb(246, 204, 140), rgb(246, 204, 140)), url(images/sea-poster.jpg);
  background-size: cover, cover, 240% auto; background-position: 0 0, 0 0, 51.5% 66%; background-blend-mode: normal, multiply, normal; }
@media (max-width: 899px) {
  .plate-evening { background-image: var(--pl-v), var(--pl-a), var(--pl-b), url(images/sea-poster-720.jpg); }
  .plate-breath { background-image: var(--pl-a), var(--pl-b), url(images/sea-poster-720.jpg); }
  .plate-breath { --pl-a: linear-gradient(180deg, rgba(var(--dusk), .16) 0%, rgba(var(--dusk), .1) 50%, rgba(var(--dusk), .4) 100%); --pl-b: linear-gradient(rgb(246, 204, 140), rgb(246, 204, 140)); }
}
.card-body { padding: clamp(28px, 3.2vw, 42px); display: grid; gap: 16px; justify-items: start; align-content: start; flex: 1; }
.card-body .label { margin: 0; }
/* The event: a date line under the title, then one reply */
.when { display: grid; justify-items: start; gap: 6px; margin: 2px 0 8px; }
.when dt { display: flex; align-items: center; gap: 14px; font: 400 13.5px/1.3 var(--sans); letter-spacing: .05em; color: var(--gold-lt); }
.when dt::after { content: ""; width: 34px; height: 1px; background: rgba(243, 201, 126, .5); }
.when dd { font: italic 400 22px/1.35 var(--serif); color: var(--paper); }
.meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font: 400 14px/1.3 var(--sans); letter-spacing: .04em; color: var(--cream-2); font-variant-numeric: lining-nums; }
.meta .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--gold-lt); flex: none; }
.post-link { text-decoration: underline; text-decoration-color: rgba(243, 201, 126, .5); text-decoration-thickness: 1px; text-underline-offset: 7px; transition: color .25s ease, text-decoration-color .25s ease; }
.post-link:hover { color: var(--gold-hi); text-decoration-color: var(--gold-lt); }
.post-link .arrow { display: inline-block; vertical-align: -1px; margin-left: 8px; color: var(--gold-lt); }
.excerpt { margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--hair); font: italic 400 clamp(19px, 1.45vw, 21px)/1.5 var(--serif); color: var(--cream-2); max-width: 40ch; }

/* ---------- 06 Grantees ---------- */
.grantees-panel { padding: clamp(32px, 4.4vw, 60px); }
.grantees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 6px; }
.grantees li { padding: 6px 32px 4px; border-left: 1px solid var(--hair); display: grid; grid-template-rows: auto auto 1fr; gap: 8px; align-content: start; }
.grantees li:first-child { border-left: 0; padding-left: 0; }
.g-icon { width: 56px; height: 56px; margin-bottom: 16px; color: var(--gold-lt); }
.g-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.g-name { font: 400 clamp(24px, 1.95vw, 28px)/1.15 var(--serif); text-wrap: balance; }
.g-desc { font: italic 400 19px/1.4 var(--serif); color: var(--cream-2); }

/* ---------- 07 Give ---------- */
.give-panel { padding: clamp(32px, 4.6vw, 64px); }
.amounts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(26px, 3vw, 40px) 0 clamp(20px, 2.2vw, 28px); border-block: 1px solid var(--hair); }
.amounts li { display: flex; align-items: flex-start; justify-content: center; padding: clamp(18px, 2.2vw, 30px) 8px; border-left: 1px solid var(--hair); font: 400 clamp(44px, 5vw, 76px)/1 var(--serif); font-variant-numeric: lining-nums; letter-spacing: -.01em; }
.amounts li:first-child { border-left: 0; }
/* One inline amount, so "$50" reads and copies as one word; the $ is raised by position only */
.amounts .amt { white-space: nowrap; }
.amounts .cur { position: relative; top: -.62em; font-size: .46em; line-height: 0; margin-right: .08em; color: var(--gold-lt); }
.give-terms { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; }
.terms { font-size: 22px; }
.give-proof { font: 400 15px/1.5 var(--sans); letter-spacing: .03em; color: var(--cream-2); font-variant-numeric: lining-nums; }
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: clamp(28px, 3vw, 40px); }
.way { display: grid; grid-template-columns: clamp(112px, 11vw, 148px) minmax(0, 1fr); column-gap: 24px; row-gap: 16px; align-items: center; padding: 20px; border-radius: 12px; border: 1px solid var(--hair); background: rgba(251, 247, 239, .03); }
.qr-frame { width: 100%; aspect-ratio: 1; padding: 9px; border-radius: 8px; background: var(--paper); }
.qr-frame img { width: 100%; height: 100%; object-fit: contain; }
.way figcaption { display: grid; gap: 6px; font-size: 18px; line-height: 1.4; }
.way-name { font: 400 26px/1.1 var(--serif); color: var(--paper); }
.way .to { color: var(--cream-2); }
.btn-phone { display: none; }
@media (pointer: coarse), (max-width: 759px) { .btn-phone { display: inline-flex; } .scan { display: none; } }
.receipt { margin-top: clamp(24px, 2.6vw, 32px); font-size: 19px; color: var(--cream-2); }
.receipt a { display: inline-flex; align-items: center; min-height: 44px; }
.receipt a, .foot a { color: var(--paper); text-decoration-color: rgba(243, 201, 126, .6); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.receipt a:hover, .foot a:hover { color: var(--gold-hi); text-decoration-color: var(--gold-lt); }

/* ---------- Closing ---------- */
.closing { padding-top: clamp(110px, 18vh, 220px); overflow-x: clip; }
.signoff { position: relative; text-align: center; font: 400 clamp(40px, 5.4vw, 82px)/1.08 var(--serif); text-wrap: balance; text-shadow: 0 2px 40px rgba(var(--dusk), .6); margin-bottom: clamp(56px, 9vh, 104px);
  padding-top: 100px; }
.signoff > span { position: relative; }
.signoff::after { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 64px; background: linear-gradient(180deg, rgba(235, 162, 28, 0), var(--gold)); }
/* A warm local shade multiplied onto the footage, so the line reads in any light and the sun behind it
   turns to an amber ember instead of a grey disc */
.signoff::before { content: ""; position: absolute; left: 50%; top: calc(50% + 50px); width: min(1500px, 150%); height: 300%; transform: translate(-50%, -50%); pointer-events: none; mix-blend-mode: multiply;
  /* Its outer ring warms more than it darkens, so a sun caught at the edge reads amber, not grey */
  background: radial-gradient(closest-side, rgb(150, 92, 40) 0%, rgb(150, 92, 40) 34%, rgba(150, 92, 40, .85) 52%, rgba(196, 118, 44, .5) 74%, rgba(226, 140, 52, .3) 88%, rgba(236, 150, 60, 0) 100%); }

/* The closing join is a compact strip under the signoff, not a second copy of 01 */
.closing .join-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-areas: "head form" "promise form"; row-gap: 6px; padding: clamp(26px, 3.2vw, 40px) clamp(28px, 4vw, 56px); }
.closing .join-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; align-self: end; }
.closing .join-head .h2 { font-size: clamp(28px, 2.6vw, 38px); }
.closing .join-panel > .promise { align-self: start; }

/* ---------- Footer ---------- */
.foot { background: rgba(var(--dusk), .94); border-top: 1px solid rgba(235, 162, 28, .3); padding: 56px 0 44px; font: 400 15px/1.6 var(--sans); color: var(--cream-2); }
.foot-grid { display: grid; grid-template-columns: 1.1fr 1.4fr 1fr; gap: 32px 48px; }
.foot-name { font: 500 16px/1.4 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--paper); }
.foot address { font-style: normal; }
.foot .irs { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.foot .mail { display: inline-flex; align-items: center; min-height: 44px; }
.foot p { font-variant-numeric: lining-nums; }

/* ---------- Medium screens ---------- */
@media (max-width: 1023px) {
  .join-panel, .closing .join-panel { grid-template-columns: 1fr; grid-template-areas: "head" "promise" "form"; }
  .join-panel > .promise { margin-bottom: 22px; }
  .closing .join-panel { row-gap: 10px; }
  .closing .join-panel > .promise { margin-bottom: 12px; }
  /* Tall tablet screens: the scrim stays full down to the trust line, then fades inside the bottom padding,
     so the hero never ends on a hard dark edge as it scrolls up over the sky */
  .hero::before, .hero-scrim { -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 34%, #000 52%, #000 calc(100% - clamp(44px, 9vh, 96px)), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, transparent 34%, #000 52%, #000 calc(100% - clamp(44px, 9vh, 96px)), transparent 100%); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 899px) {
  .ways { grid-template-columns: 1fr; max-width: 640px; }
}

/* ---------- Phones ---------- */
@media (max-width: 759px) {
  body { font-size: 18px; }
  .mark { gap: 4px; }
  .mark-name { font-size: 16px; letter-spacing: .1em; }
  .mark-name span:last-child { display: block; font: 500 12px/1.2 var(--serif); letter-spacing: .1em; }
  .mark-sub { display: none; }
  .tools { gap: 6px; }
  .tool { padding: 0 14px; }
  #motion { min-width: 92px; }
  .menu .tool-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .menu summary.tool { padding: 0; width: 44px; }
  .hero { padding-bottom: 56px; }
  .hero-scrim { background:
      linear-gradient(0deg, rgba(var(--dusk), .86) 0%, rgba(var(--dusk), .72) 28%, rgba(var(--dusk), .3) 50%, rgba(var(--dusk), 0) 64%); }
  .hero::before { background:
      linear-gradient(0deg, rgba(232, 140, 44, .86) 0%, rgba(232, 140, 44, .72) 28%, rgba(232, 140, 44, .3) 50%, rgba(232, 140, 44, 0) 64%); }
  /* Full shade behind the words, then a soft fade inside the bottom padding instead of a hard edge */
  .hero::before, .hero-scrim { -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 52px); mask-image: linear-gradient(0deg, transparent 0, #000 52px); }
  .hero-line { font-size: clamp(34px, 10.2vw, 52px); line-height: 1.05; }
  .hero-act { justify-items: stretch; gap: 16px; }
  .hero-act .btn-gold { width: 100%; }
  .trust { font-size: 13px; text-align: center; color: var(--paper); }
  .label { margin-bottom: 16px; }
  .join-form .btn-gold { flex: 1 1 100%; }
  .who-panel { grid-template-columns: 1fr; }
  .who-main { padding-right: 0; padding-bottom: 28px; }
  .who-mission { padding-left: 0; padding-top: 28px; border-left: 0; border-top: 1px solid var(--hair); }
  .st-practice { padding-block: 96px; }
  /* The lens fills the content width, so it centres; the progress ring traces the disc's inner hairline */
  .lens { width: min(100%, 420px); }
  .glass.lens-disc { padding: 12%; }
  .track { width: 92%; height: 92%; margin: -46% 0 0 -46%; z-index: 1; }
  .track circle { stroke-width: .7; }
  .track-bg { stroke: rgba(243, 201, 126, .28); }
  .lens.guiding .lens-disc::before { border-color: transparent; }
  .r1 { width: 104%; height: 104%; margin: -52% 0 0 -52%; border-color: rgba(243, 201, 126, .55); }
  .r2 { width: 110%; height: 110%; margin: -55% 0 0 -55%; border-color: rgba(243, 201, 126, .32); }
  .lens .label { margin-bottom: 10px; }
  .lens-h { font-size: 28px; }
  .swap-cue { margin-top: 12px; padding-top: 12px; max-width: 21ch; }
  .cue { font-size: 17px; line-height: 1.45; }
  .say { font-size: 28px; }
  .swap-act { margin-top: 14px; }
  .pair { grid-template-columns: 1fr; row-gap: 20px; }
  .plate { aspect-ratio: 16 / 8; }
  .grantees { grid-template-columns: 1fr; }
  .grantees li, .grantees li:first-child { border-left: 0; padding: 22px 0; border-top: 1px solid var(--hair); grid-template-columns: 44px 1fr; grid-template-rows: auto; column-gap: 18px; row-gap: 4px; }
  .g-icon { grid-row: 1 / span 2; margin: 0; }
  .grantees li:first-child { border-top: 0; padding-top: 4px; }
  .amounts { grid-template-columns: 1fr 1fr; }
  .amounts li:nth-child(3) { border-left: 0; }
  .amounts li:nth-child(n+3) { border-top: 1px solid var(--hair); }
  .give-terms { display: grid; gap: 6px; }
  .give-panel { padding: 30px 22px 26px; }
  .way { grid-template-columns: 104px minmax(0, 1fr); column-gap: 16px; padding: 14px; }
  .qr-frame { padding: 6px; }
  .way figcaption { font-size: 17px; line-height: 1.35; }
  .way-name { font-size: 23px; }
  .btn-phone { grid-column: 1 / -1; justify-self: stretch; }
  .foot-grid { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 379px) {
  .tool { padding: 0 12px; gap: 8px; }
  .mark-name { font-size: 15px; }
  .mark-name span:last-child { font-size: 11.5px; letter-spacing: .08em; }
  .way { grid-template-columns: 92px minmax(0, 1fr); column-gap: 14px; }
  .way figcaption { font-size: 16px; }
  .lens-h { font-size: 26px; }
  .cue { font-size: 16.5px; }
}
@media (max-width: 345px) {
  .top-in { gap: 8px; }
  .mark-name span:last-child { letter-spacing: .04em; }
  .tools { gap: 4px; }
  .tool { padding: 0 10px; }
  #motion { min-width: 80px; }
}

@media print { .world, .top, .gauge-hold { display: none; } body { background: #fff; color: #000; } }

/* An Jia: Lake World, refined October 2026. */
@font-face{font-family:Jost;src:url(fonts/jost-latin-v20.woff2) format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root{--wrap:1184px;--gut:clamp(22px,6vw,112px);--r:12px;--head:88px;--cream-2:rgba(251,247,239,.86)}
body{font-size:20px;line-height:1.65}a,button,input{-webkit-tap-highlight-color:transparent}button,a,input{touch-action:manipulation}::selection{color:var(--ink);background:#f3c97e}
.top{height:var(--head)}.mark-name{font-size:19px;letter-spacing:.1em}.mark-name span:last-child{display:block;font:400 12px/1.6 var(--sans);letter-spacing:.2em}.mark-sub{display:none}.top-in{gap:24px}.tools{gap:12px}.tool{font-size:14px;border-color:rgba(34,27,20,.24)}.top.solid::before{background:rgba(30,21,12,.94)}.desktop-nav{display:flex;align-items:center;gap:30px;margin-left:auto;margin-right:34px;font:400 14px var(--sans)}.desktop-nav a{display:flex;align-items:center;min-height:44px;text-decoration:none}.desktop-nav a:hover{text-decoration:underline;text-underline-offset:6px}.desktop-nav a:last-child{padding-left:30px;border-left:1px solid currentColor}
.hero{min-height:100svh;padding-bottom:clamp(56px,9vh,100px)}.hero-line{font-size:clamp(48px,6.1vw,88px);line-height:1.025;letter-spacing:-.022em}.hero-act{gap:24px;margin-top:36px}.hero-act .btn-gold{min-height:58px;padding-inline:28px}.btn-gold{border-radius:4px;font-size:15px;letter-spacing:.025em;background:linear-gradient(115deg,#f5d99f,#edb84f 58%,#e5a12c);box-shadow:inset 0 1px rgba(255,255,255,.55),0 8px 28px -14px rgba(235,162,28,.42)}.btn-line{border-radius:4px;font-size:15px;letter-spacing:.025em}.trust{font-size:16px;letter-spacing:0}.hero-note{position:absolute;right:var(--gut);bottom:88px;writing-mode:vertical-rl;display:flex;align-items:center;gap:18px;font:400 11px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--paper)}.hero-note::after{content:'';height:64px;width:1px;background:rgba(251,247,239,.55)}
.station{padding-block:76px}.st-join{padding-top:54px;padding-bottom:84px}.glass{box-shadow:0 20px 60px -45px rgba(0,0,0,.65);border-color:rgba(243,201,126,.25)}.glass.cream{background:rgba(251,247,239,.97);border-color:rgba(251,247,239,.55);box-shadow:0 24px 75px -50px rgba(0,0,0,.5)}.label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;gap:16px;margin-bottom:24px}.label .num{font:400 12px var(--sans);letter-spacing:.05em}.h2{font-size:clamp(36px,3.6vw,52px);line-height:1.08}.h3{font-size:clamp(31px,2.8vw,40px)}
.join-panel{grid-template-columns:1.05fr 1fr;grid-template-areas:'head form' 'promise form';gap:12px 48px;padding:42px 48px}.join-head{border:0;margin:0;padding:0}.join-head .label{margin-bottom:12px}.join-head .h2{font-size:clamp(31px,3vw,42px);max-width:16ch;text-wrap:balance}.join-panel>.promise{font-size:19px}.join-form{gap:10px}.join-form input[type=email]{flex:1 1 190px;font:400 16px var(--sans);border:1px solid #b8a68d;border-radius:4px;background:#fffcf6}.join-form .btn-gold{padding-inline:22px}.form-note{flex-basis:100%;font:400 12px/1.5 var(--sans);color:#5f5141}.thanks{font-size:17px}.join-panel:focus-within{box-shadow:0 0 0 3px rgba(235,162,28,.5),0 24px 75px -50px rgba(0,0,0,.5)}
.st-who{padding-block:0 76px}.who-panel{background:rgba(251,247,239,.97);color:var(--ink);border-color:rgba(251,247,239,.55);grid-template-columns:1.4fr 1fr;padding:62px 58px}.who-panel .label{color:#62503c}.who-panel .num{color:#8c5c0e}.who-main{padding-right:62px}.who-main .lead{font-size:clamp(28px,3vw,43px);line-height:1.18;letter-spacing:-.012em;max-width:26ch}.who-mission{padding-left:42px;border-color:rgba(115,82,40,.22);align-content:center}.who-mission .soft{color:#514433;font-size:21px;line-height:1.6}.who-place{display:flex;align-items:center;gap:15px;color:#6c563e;font:400 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;margin-top:32px}.who-place::before{content:'';width:36px;height:1px;background:#af8544}
.st-practice{padding-block:100px 130px}.practice-layout{display:grid;grid-template-columns:1fr 1.25fr;align-items:center;gap:100px}.practice-intro{max-width:340px;position:relative;padding-block:32px}.practice-intro .h2{font-size:clamp(42px,4.6vw,64px);line-height:1.07}.practice-intro .body{max-width:28ch;font-size:22px;margin-top:24px;color:var(--paper)}.practice-rule{width:46px;height:1px;background:var(--gold-lt);margin-bottom:28px}.practice-caption{font:400 12px/1.6 var(--sans);letter-spacing:.12em;text-transform:uppercase;margin-top:28px;color:var(--gold-lt)}.lens{width:min(100%,410px)}.lens-h{font-size:34px}.lens-disc .label{margin-bottom:16px}.lens .halo{opacity:.18}.r3{border-color:rgba(243,201,126,.09)}.r2{border-color:rgba(243,201,126,.2)}.lens-stop{display:none;min-height:44px;margin-top:12px;padding:0 16px;border:0;background:transparent;color:var(--cream-2);text-decoration:underline;text-underline-offset:4px;font:400 14px var(--sans);cursor:pointer}.lens.guiding .lens-stop{display:inline-flex;align-items:center;justify-content:center}.lens.guiding .swap-cue{margin-top:6px}.lens.guiding .swap-act{margin-top:8px}
.st-pair{padding-block:56px 76px}.pair{gap:30px;grid-template-columns:1fr 1fr}.card{background:rgba(30,21,12,.91);overflow:hidden}.plate{aspect-ratio:16/7}.plate-art{opacity:.8}.card-body{padding:36px 38px;gap:20px}.card-body .h3{font-size:36px;line-height:1.14}.card-writing .h3{font-size:34px}.meta{font-size:13px}.when{margin:0}.when dt{font-size:12px}.when dd{font-size:22px}.post-link{text-decoration:none}.post-link:hover{text-decoration:underline;text-underline-offset:6px}.excerpt{font-size:20px;font-style:normal;line-height:1.55}.card .btn-line{margin-top:8px}
.st-grantees{padding-top:0;padding-bottom:76px}.grantees-panel{padding:36px 0;background:rgba(30,21,12,.8);border-radius:0;border-width:1px 0;box-shadow:none;backdrop-filter:blur(16px)}.grantees-panel>.label{padding:0 28px;margin-bottom:28px}.grantees{grid-template-columns:repeat(3,minmax(0,1fr));margin:0}.grantees li,.grantees li:first-child{padding:4px 28px 12px;border-color:rgba(243,201,126,.22);grid-template-rows:auto 1fr;gap:10px}.g-icon{display:none}.g-name{font-size:29px;line-height:1.2;max-width:18ch}.g-desc{font-size:18px;font-style:normal}
.st-give{padding-top:0}.give-panel{background:rgba(251,247,239,.97);color:var(--ink);border-color:rgba(251,247,239,.55);padding:52px 58px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:42px 62px}.give-panel .label{color:#62503c}.give-panel .label .num{color:#8c5c0e}.give-panel .h2{font-size:46px}.amounts{margin:28px 0 24px;border-color:#cdbda6;grid-template-columns:1fr 1fr;gap:0}.amounts li{font-size:46px;padding:18px 12px;border-color:#cdbda6;justify-content:flex-start}.amounts li:nth-child(3){border-left:0}.amounts li:nth-child(n+3){border-top:1px solid #cdbda6}.amounts .cur{color:#7b5b2b}.give-terms{display:grid;gap:16px}.terms{font-size:20px}.give-proof{font-size:16px;color:#514433}.payment-area{align-self:center;min-width:0}.payment-tabs{display:flex;gap:0;border-bottom:1px solid #cdbda6;margin-bottom:24px}.payment-tabs button{position:relative;flex:1;min-height:52px;background:none;border:0;color:#6c5942;font:500 15px var(--sans);cursor:pointer}.payment-tabs button[aria-selected=true]{color:var(--ink)}.payment-tabs button[aria-selected=true]::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#906117}.ways{display:block;margin:0}.way{display:grid;grid-template-columns:124px minmax(0,1fr);padding:0;border:0;background:none;gap:18px;align-items:center}.way[hidden]{display:none}.way-name{color:var(--ink);font-size:28px}.way .to{color:#514433}.way figcaption{font-size:18px}.way figcaption .nw{white-space:normal;overflow-wrap:anywhere}.qr-frame{padding:6px;background:white;border:1px solid #dfd2be;border-radius:4px}.way .btn-phone{display:flex;grid-column:1/-1;color:var(--ink);border-color:#a88a5b;width:100%;min-height:48px}.way .btn-phone:hover{background:#f0e5d0}.scan{display:block}.copy-address{font:400 14px var(--sans);background:transparent;color:var(--ink);border:1px solid #a88a5b;border-radius:4px;min-height:48px;grid-column:1/-1;cursor:pointer}.copy-address:hover{background:#f0e5d0}.copy-status{font:400 13px var(--sans);color:#514433;grid-column:1/-1;min-height:20px}.receipt{font-size:17px;color:#514433;grid-column:1/-1;margin:0;padding-top:22px;border-top:1px solid #cdbda6}.receipt a{color:var(--ink)}.receipt a:hover{color:#775514}.give-panel :focus-visible{outline-color:var(--ink)}
.closing{padding-top:64px;padding-bottom:96px}.signoff{font-size:clamp(42px,5vw,72px);margin-bottom:64px;padding-top:80px}.signoff::after{height:45px}.closing .join-panel{padding:36px 48px;gap:12px 48px}.closing .join-head .h2{font-size:36px}.foot{font-size:16px;padding:54px 0 36px;background:#1e150c}.foot-name{font-size:19px;letter-spacing:.08em;line-height:1.55}.foot-grid{grid-template-columns:1.1fr 1.2fr 1fr;gap:48px}.foot-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid rgba(243,201,126,.2);margin-top:32px;padding-top:24px;font:400 12px/1.5 var(--sans);letter-spacing:.06em;color:#c8baa4}.foot-bottom a{min-height:44px;display:inline-flex;align-items:center}
.article-world{position:fixed;inset:0;background:linear-gradient(rgba(30,21,12,.35),rgba(30,21,12,.75)),url(images/sea-poster.jpg) center/cover;z-index:-1}.article-page .top{position:sticky;background:rgba(30,21,12,.96);color:var(--paper)}.article-page .top .tool{color:var(--paper);border-color:rgba(243,201,126,.4);background:transparent}.article-head{padding:94px 0 72px}.article-head .label{color:var(--paper)}.article-head h1{max-width:20ch;font:400 clamp(42px,5.5vw,76px)/1.06 var(--serif);letter-spacing:-.02em}.article-head .meta{margin-top:28px;font-size:14px}.article-sheet{background:var(--paper);color:var(--ink);border-radius:12px;padding:64px 72px;margin-bottom:80px}.article-layout{display:grid;grid-template-columns:170px minmax(0,680px);gap:64px}.article-aside{font:400 13px/1.7 var(--sans);color:#6c5942;position:sticky;top:120px;align-self:start}.article-aside a{display:flex;align-items:center;min-height:44px;color:var(--ink);margin-top:16px}.article-body{font:400 22px/1.65 var(--serif)}.article-body>p:first-child{font-size:27px;line-height:1.45}.article-body p{margin:0 0 24px}.article-body h2{font-size:34px;line-height:1.18;margin:48px 0 22px}.article-body ul,.article-body ol{padding-left:24px;margin-bottom:28px;list-style:disc}.article-body ol{list-style:decimal}.article-body li{padding-left:7px;margin-bottom:12px}.article-return{margin-top:48px;padding-top:24px;border-top:1px solid #cdbda6;display:flex;align-items:center;justify-content:space-between;gap:24px;font:400 15px var(--sans)}.article-return a{min-height:44px;display:inline-flex;align-items:center}.article-page .closing{padding-top:0}
@media(min-width:1600px){.gauge{right:24px}.gauge a{font-size:15px}}
@media(max-width:1100px){.desktop-nav{gap:22px;margin-right:12px}.join-panel{grid-template-columns:1fr;grid-template-areas:'head' 'promise' 'form';gap:16px;padding:36px}.join-head .h2{max-width:none}.join-panel>.promise{margin-bottom:0}.join-form input[type=email]{flex-basis:220px}.practice-layout{gap:44px}.give-panel{gap:36px;padding:42px}.who-panel{padding:44px}.who-main{padding-right:34px}.who-mission{padding-left:30px}.foot-grid{gap:28px}.article-sheet{padding:48px}.article-layout{grid-template-columns:140px 1fr;gap:36px}}
@media(max-width:900px){.desktop-nav{display:none}.practice-layout{grid-template-columns:.85fr 1.1fr;gap:35px}.practice-intro .h2{font-size:43px}.practice-intro .body{font-size:21px}.lens{width:100%}.give-panel{grid-template-columns:1fr;gap:32px}.amounts{grid-template-columns:repeat(4,1fr)}.amounts li:nth-child(3){border-left:1px solid #cdbda6}.amounts li:nth-child(n+3){border-top:0}.payment-area{max-width:500px;width:100%}.ways{max-width:none}.pair{gap:22px}.card-body{padding:28px}.card-body .h3,.card-writing .h3{font-size:31px}.grantees li,.grantees li:first-child{padding-inline:20px}.g-name{font-size:25px}.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:759px){:root{--head:76px;--r:10px;--gut:22px}body{font-size:18px}.top-in{gap:12px}.mark-name{font-size:17px;letter-spacing:.07em}.mark-name span:last-child{font:400 11px/1.6 var(--sans);letter-spacing:.04em}.tools{gap:6px}.tool{font-size:12px;padding:0 12px;gap:6px}#motion{min-width:44px;width:44px;padding:0}#motion .tool-t{display:none}.menu summary.tool{width:44px}.hero-line{font-size:clamp(36px,9.4vw,64px);line-height:1.06}.hero{padding-bottom:52px;min-height:100svh}.hero-act{gap:18px;margin-top:28px}.hero-act .btn-gold{padding:0 18px;font-size:14px;letter-spacing:0;min-height:56px}.trust{font-size:15px;line-height:1.5}.hero-note{display:none}.station{padding-block:44px}.st-join{padding-top:32px;padding-bottom:44px}.join-panel,.closing .join-panel{padding:28px 24px;gap:14px;grid-template-columns:1fr;grid-template-areas:'head' 'promise' 'form'}.join-head .label{margin-bottom:14px}.join-head .h2,.closing .join-head .h2{font-size:34px;text-wrap:balance;max-width:17ch}.join-panel>.promise,.closing .join-panel>.promise{font-size:18px;margin:0 0 6px}.join-form input[type=email]{flex-basis:100%}.join-form .btn-gold{flex-basis:100%}.st-who{padding-top:0;padding-bottom:42px}.who-panel{padding:34px 26px;grid-template-columns:1fr}.who-main{padding-right:0;padding-bottom:30px}.who-main .lead{font-size:32px;line-height:1.25}.who-mission{padding:30px 0 0;border-left:0;border-top:1px solid #cdbda6}.who-mission .body{font-size:20px}.who-place{font-size:11px}.practice-layout{grid-template-columns:1fr;gap:72px}.practice-intro{padding:0;max-width:100%}.practice-intro .h2{font-size:44px;max-width:14ch}.practice-intro .body{font-size:21px;max-width:28ch;margin-top:18px}.practice-caption{margin-top:20px}.practice-rule{display:none}.st-practice{padding-block:40px 64px}.lens{width:min(100%,360px)}.lens-disc .label{display:none}.lens-h{font-size:30px}.lens.guiding .lens-h{font-size:26px}.cue{font-size:18px;line-height:1.4}.lens.guiding .lens-stop{margin-top:4px}.lens .r3{display:none}.st-pair{padding-top:40px;padding-bottom:44px}.pair{grid-template-columns:1fr;gap:24px}.plate{aspect-ratio:16/7}.card-body{padding:28px 26px}.card-body .h3,.card-writing .h3{font-size:33px}.excerpt{font-size:20px}.st-grantees{padding-top:0;padding-bottom:44px}.grantees-panel{padding:28px 0 12px}.grantees-panel>.label{padding:0 22px;margin-bottom:20px}.grantees{grid-template-columns:1fr}.grantees li,.grantees li:first-child{display:grid;grid-template-columns:1fr;grid-template-rows:auto;border-left:0;padding:24px 22px;gap:8px}.grantees li:first-child{border-top:0;padding-top:0}.g-name{font-size:28px;max-width:none}.g-desc{font-size:18px}.st-give{padding-top:0}.give-panel{padding:32px 24px;gap:28px}.give-panel .h2{font-size:38px}.amounts{grid-template-columns:1fr 1fr}.amounts li{font-size:43px;padding:18px 14px}.amounts li:nth-child(3){border-left:0}.amounts li:nth-child(n+3){border-top:1px solid #cdbda6}.way{grid-template-columns:100px minmax(0,1fr);gap:16px}.way figcaption{font-size:17px}.way-name{font-size:26px}.copy-status{font-size:12px}.receipt{font-size:16px;overflow-wrap:anywhere}.closing{padding-top:36px;padding-bottom:54px}.signoff{font-size:44px;line-height:1.1;margin-bottom:42px;padding-top:64px}.foot{font-size:16px;padding-top:38px}.foot-grid{grid-template-columns:1fr;gap:26px}.foot-name{font-size:17px}.foot-bottom{display:grid;gap:8px}.article-head{padding:64px 0 42px}.article-head h1{font-size:44px}.article-sheet{padding:32px 24px;margin-bottom:48px}.article-layout{display:block}.article-aside{position:static;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid #cdbda6}.article-aside a{display:inline-flex;margin:0 18px 0 0}.article-body{font-size:20px}.article-body>p:first-child{font-size:24px}.article-body h2{font-size:30px;margin-top:36px}.article-return{display:grid;gap:14px}.article-page .closing .join-panel{max-width:none}}
@media(max-width:379px){:root{--gut:18px}.hero-line{font-size:34px}.mark-name{font-size:16px}.mark-name span:last-child{font-size:10px}.join-panel,.closing .join-panel{padding-inline:22px}.who-main .lead{font-size:30px}.lens-h{font-size:28px}.cue{font-size:17px}.way{grid-template-columns:86px minmax(0,1fr);gap:12px}.way figcaption{font-size:16px}.give-panel{padding-inline:22px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}.world video{display:none}.lens .halo{opacity:.15}}
@media print{.world,.top,.gauge-hold,.hero-note,.join-form,.payment-tabs,.lens-stop{display:none!important}.glass,.glass.cream,.who-panel,.give-panel,.foot{color:#000!important;background:#fff!important;backdrop-filter:none!important;box-shadow:none!important}.station{padding-block:20px}.hero{min-height:auto;margin:0;padding:30px 0}.hero-line{color:#000;font-size:36px;text-shadow:none}.hero-scrim,.hero::before{display:none}.article-sheet{padding:0}.article-head h1{font-size:36px}.article-body{font-size:12pt}}

/* Legibility across every lake frame. */
.top.solid{background:#241a10}.st-practice{background:linear-gradient(90deg,rgba(30,21,12,.9),rgba(30,21,12,.72) 42%,rgba(30,21,12,.4));border-block:1px solid rgba(243,201,126,.12)}

.article-world{z-index:0}.article-page main{position:relative;z-index:1}