/* phillipchan.org v11 · Plumb, brighter.
   Default state = finished state (works without JS, reduced motion).
   Pre-animation states exist only under html.anim, which site.js sets when JS runs and motion is allowed. */

@font-face {
  font-family: "Geist";
  src: url(../fonts/geist-latin-wght.woff2) format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  src: url(../fonts/geist-mono-latin-wght.woff2) format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2190-2199, U+2212;
}
@font-face {
  font-family: "Newsreader";
  src: url(../fonts/newsreader-500-latin.woff2) format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --dawn: #FBF1E1; --glow: #FFE2B0; --sun: #F7B733; --amber: #8C5200; --rule-warm: #E8D5B8;
  --ink: #121212; --ink-2: #4A4A47; --ink-3: #6B6A66;
  /* ink-3 fails on glow (4.32:1). Unlit ending text sits on glow, so it uses this slightly darker step (5.2:1 on glow). */
  --unlit: #5E5D59;
  --true: #E5432A; --true-ink: #B42F18;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --pad: clamp(20px, 5vw, 72px);
  --max: 1320px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --lx: calc(100% - 10px);       /* x of the plumb line inside a column box */
  --bob: 28px;
}
@media (min-width: 900px) { :root { --lx: 62%; --bob: 36px; } }

/* the sky: fixed, flat, opacity-only. Present only under html.anim; site.js writes --dim and --rise */
.sky { display: none; }
.anim .sky { display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.sky i { position: absolute; left: 0; right: 0; will-change: opacity; }
.sky__dim { top: 0; bottom: 0; background: rgba(18, 18, 18, .07); opacity: var(--dim, 1); }
.sky__rise { bottom: 0; height: 75vh; background: linear-gradient(to bottom, rgba(255, 226, 176, 0), var(--glow)); opacity: var(--rise, 0); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; background: var(--dawn); color: var(--ink);
  font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, picture { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote, ul { margin: 0; padding: 0; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--glow); }

.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--dawn); padding: 10px 14px; border-radius: 2px; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }

.label { font: 500 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--amber); }
h1, h2, h3 { font-weight: 600; letter-spacing: -.035em; line-height: 1; text-wrap: balance; }
h2 { font-size: clamp(36px, 6vw, 72px); }

/* links: ink text, 2px sun underline, amber on hover */
.along__small a, .foot a { text-decoration: underline 2px; text-underline-offset: .22em; }
.along__small a { text-decoration-color: var(--sun); }
.along__small a:hover { color: var(--amber); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 52px; padding: 0 24px;
  font: 600 16px/1 var(--sans); letter-spacing: -.005em; text-decoration: none; border-radius: 2px;
  border: 1.5px solid var(--ink); cursor: pointer; transition: background-color 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease);
}
.btn--ink { background: var(--ink); color: var(--dawn); }
.btn--ink:hover { background: var(--ink-2); }
.btn--line { background: transparent; color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--dawn); }
.btn__arrow { display: inline-block; transition: transform 200ms var(--ease); }
.btn:hover .btn__arrow { transform: translateY(2px); }
.along .btn:hover .btn__arrow { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }

/* ───── bar ───── */
.bar { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.bar__id { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; }
.mark { width: 14px; height: 18px; fill: var(--ink); }
.bar__nav { display: flex; gap: clamp(16px, 3vw, 32px); font-size: 15px; }
.bar__nav a { text-decoration: none; color: var(--ink-2); padding: 8px 0; transition: color 160ms; }
.bar__nav a:hover { color: var(--ink); }
@media (max-width: 520px) { .bar__book { display: none; } }

/* ───── hero ───── */
.hero { position: relative; overflow: clip; }
.hero__in { position: relative; padding-top: 28px; }
.stage { position: relative; padding-right: 40px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 28px; }
.hero__copy { display: flex; flex-direction: column; gap: 18px; }
.hero__title { font-size: clamp(34px, 9.6vw, 88px); line-height: .98; letter-spacing: -.04em; margin-bottom: 10px; text-wrap: balance; }
.hero__title .w { display: inline-block; overflow: clip; padding-bottom: .12em; margin-bottom: -.12em; vertical-align: top; }
.hero__title .w > span { display: inline-block; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 900px) {
  .hero__in { padding-top: 56px; }
  .stage { display: grid; grid-template-columns: 62% 38%; padding: 0; gap: 0; align-items: end; }
  .hero__copy { padding: 0 56px 64px 0; align-self: center; }
  .hero__title { font-size: clamp(56px, 6.3vw, 92px); }
}

/* plumb: arm hangs from the stage top, bob rests at the horizon */
.plumb { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.plumb__arm {
  position: absolute; left: var(--lx); top: -28px; width: 0;
  height: calc(100% + 28px - var(--bobgap, 14px));
  transform-origin: 0 0; will-change: transform;
}
@media (min-width: 900px) { .plumb__arm { top: -56px; height: calc(100% + 56px - var(--bobgap, 14px)); } }
.plumb__arm::before { content: ""; position: absolute; left: -.75px; top: 0; bottom: 0; width: 1.5px; background: var(--ink); }
.plumb__arm::after { /* the pin it hangs from */ content: ""; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.plumb__bob {
  position: absolute; left: 0; bottom: calc(-1 * var(--bob) + 2px); width: 44px; height: calc(var(--bob) + 16px);
  transform: translateX(-50%); display: flex; justify-content: center; align-items: flex-start;
  pointer-events: auto; cursor: grab; touch-action: none; outline: none;
}
.plumb__bob.is-grabbing { cursor: grabbing; }
.plumb__bob svg { width: var(--bob); height: var(--bob); fill: var(--true); overflow: visible; }
.plumb__bob:focus-visible::after { content: ""; position: absolute; inset: -4px; border: 2px solid var(--ink); border-radius: 4px; }
.plumb__read {
  position: absolute; left: 0; top: 0; font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
  white-space: nowrap; transform: translate3d(0, 0, 0); opacity: 0;
}
.plumb__read.is-on { opacity: 1; }
@media (hover: none) { .plumb__bob { width: 48px; } }

/* ground: the horizon wash, one sun rule, the verse */
.ground { position: relative; padding: 36px 0 clamp(48px, 6vw, 72px); isolation: isolate; }
.ground__wash { position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; background: linear-gradient(to bottom, var(--glow) 0%, rgba(255, 226, 176, 0) 100%); }
.ground::before, .ground::after { content: ""; position: absolute; top: 0; height: 2px; background: var(--sun); }
.ground::before { left: 0; width: max(0px, calc(var(--lx) - 40px)); transform-origin: 100% 50%; }
.ground::after { left: calc(var(--lx) + 40px); right: 0; transform-origin: 0 50%; }
@media (max-width: 899px) { .ground::after { display: none; } }
.verse { max-width: min(34rem, calc(var(--lx) - 40px)); }
.verse blockquote { font-size: clamp(19px, 2.2vw, 26px); line-height: 1.35; letter-spacing: -.015em; font-weight: 500; color: var(--ink); text-wrap: pretty; }
.verse figcaption { margin-top: 12px; font: 500 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--amber); }
@media (max-width: 899px) { .ground { padding-top: 68px; } .verse { max-width: calc(100% - 56px); } }

/* ───── 2 · together ───── */
.together { padding: clamp(96px, 15vw, 200px) 0 clamp(64px, 9vw, 120px); }
.together__title { text-align: center; margin-bottom: clamp(48px, 7vw, 96px); font-size: clamp(46px, 10.4vw, 150px); line-height: .94; letter-spacing: -.05em; }
.tw { display: inline-block; }
.beats { display: grid; gap: 28px; }
.beat h3 { font-size: clamp(26px, 3vw, 40px); letter-spacing: -.03em; line-height: 1.1; margin-bottom: 8px; }
.beat p { color: var(--ink-2); font-size: 18px; line-height: 1.45; max-width: 28ch; text-wrap: pretty; }
.beat--1 h3 { color: var(--ink); }
.beat p.beat__after { margin-top: 14px; max-width: 34ch; font-size: 16px; color: var(--ink-3); }
.conv { display: none; }
.work { font-size: clamp(28px, 4vw, 44px); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.work__mark { display: none; }

@media (max-width: 759px) {
  .flow { position: relative; padding-left: 40px; }
  .beats { position: relative; }
  .beats::before { content: ""; position: absolute; left: -31px; top: .55em; bottom: -28px; width: 1.5px; background: var(--ink); transform-origin: 50% 0; }
  .beat { position: relative; }
  .beat::before { content: ""; position: absolute; left: -31px; top: .55em; width: 31px; height: 1.5px; background: var(--ink); transform-origin: 100% 50%; }
  .work { position: relative; margin-top: 28px; }
  .work__mark { display: block; position: absolute; left: -38px; top: -2px; width: 14px; height: 18px; fill: var(--ink); }
  .work span { display: block; padding-top: 22px; }
}
@media (min-width: 760px) {
  .beats { grid-template-columns: repeat(3, 1fr); gap: 48px; }
  .beat { text-align: center; }
  .beat p { margin-inline: auto; }
  .conv { display: block; width: 100%; height: auto; margin-top: 8px; overflow: visible; }
  .c { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 0; }
  .conv__mark { fill: var(--ink); }
  .work { text-align: center; margin-top: 24px; }
}

/* ───── 3 · now ───── */
.now { padding: clamp(40px, 6vw, 80px) 0 clamp(72px, 10vw, 140px); }
.now h2 { margin: 14px 0 clamp(40px, 6vw, 80px); font-size: clamp(54px, 13vw, 168px); line-height: .9; letter-spacing: -.055em; }
.cards { display: grid; gap: 16px; }
.card {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 20px;
  border: 1px solid var(--rule-warm); border-radius: 4px; transition: border-color 200ms var(--ease), transform 280ms var(--ease);
}
.card:hover, .card:focus-within { border-color: var(--ink); transform: translateY(-3px); }
.tile { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 4px; border: 1px solid var(--rule-warm); }
.tile img { width: 34px; height: auto; }
.tile--ph { border: 1px dashed var(--ink-2); }
.tile--ph span { font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.tile--cover { height: 96px; width: 62px; padding: 0; overflow: hidden; border: 0; box-shadow: 0 0 0 1px var(--rule-warm); }
.tile--cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile--wide { width: 112px; padding: 0 12px; }
.tile--wide img { width: 100%; }
.tile--ink { background: var(--ink); border-color: var(--ink); }
.tile--text { background: var(--dawn); border-color: var(--ink); text-align: center; }
.tile--text span { font: 500 13px/1.05 var(--serif); letter-spacing: -.005em; color: var(--ink); }
.tile--text b { display: block; font-weight: 500; font-size: 17px; margin: 1px 0; }
.card__n { position: absolute; top: 18px; right: 20px; font: 500 12px/1 var(--mono); letter-spacing: .08em; color: var(--amber); }
.card::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 0 0 4px 4px; background: var(--sun); transform: scaleX(0); transform-origin: 0 50%; transition: transform 520ms var(--ease); }
.card:hover::after, .card:focus-within::after { transform: none; }
.card__role { font: 500 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--amber); margin-bottom: 8px; }
.card__name { font-size: clamp(22px, 2.4vw, 26px); letter-spacing: -.03em; line-height: 1.1; margin-bottom: 8px; text-wrap: pretty; }
.card__desc { color: var(--ink-2); font-size: 15.5px; line-height: 1.5; margin-bottom: 14px; text-wrap: pretty; }
.card__link { font: 500 11.5px/1.3 var(--mono); letter-spacing: .01em; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.card__link::before { content: ""; position: absolute; inset: 0; border-radius: 4px; }
.card__link:focus-visible { outline: none; }
.card:has(.card__link:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.card__link span[aria-hidden] { display: inline-block; transition: transform 220ms var(--ease); }
.card:hover .card__link span[aria-hidden] { transform: translate(3px, -3px); }
.card__body { min-width: 0; }
@media (min-width: 760px) {
  .card__link { font-size: 12.5px; }
  .cards { grid-template-columns: 1fr 1fr; gap: 20px; }
  .card { grid-template-columns: auto 1fr; gap: 22px; padding: 26px; }
  .tile { width: 72px; height: 72px; }
  .tile--cover { height: 120px; width: 78px; }
  .tile--wide { width: 148px; padding: 0 14px; }
  .tile--text span { font-size: 15px; } .tile--text b { font-size: 20px; }
  .tile img { width: 44px; }
  .tile--wide img, .tile--cover img { width: 100%; }
  .card:last-child { grid-column: 1 / -1; }
}

/* ───── 4 · along ───── */
.along { padding: clamp(56px, 8vw, 110px) 0 clamp(96px, 13vw, 180px); }
.along__in { display: grid; gap: 32px; }
.along__h { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.03em; margin-bottom: clamp(20px, 3vw, 36px); }
.along__big { font-size: clamp(38px, 7.4vw, 104px); line-height: .96; letter-spacing: -.048em; font-weight: 600; max-width: 12ch; text-wrap: balance; }
.along__lede { margin-top: 24px; font-size: clamp(18px, 2vw, 22px); line-height: 1.45; letter-spacing: -.012em; color: var(--ink-2); max-width: 34ch; text-wrap: pretty; }
.signup__row { display: flex; gap: 12px; }
.signup input {
  flex: 1; min-width: 0; min-height: 52px; padding: 0 16px; font: 400 16px/1 var(--sans); color: var(--ink);
  background: transparent; border: 1.5px solid var(--ink); border-radius: 2px; transition: box-shadow 160ms var(--ease);
}
.signup input::placeholder { color: var(--ink-3); }
.signup input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--dawn), 0 0 0 5px var(--ink); }
.along__small { margin-top: 16px; font-size: 15px; color: var(--ink-2); }
@media (max-width: 479px) { .signup__row { flex-direction: column; } }
/* the Dawn Card offer: a small card standing on a sun rule, beside the headline */
.offer { display: grid; grid-template-columns: clamp(96px, 26vw, 132px) 1fr; gap: 20px; align-items: start; margin-bottom: 24px; }
.offer__card img { width: 100%; height: auto; border-radius: 2px; box-shadow: 0 1px 0 var(--rule-warm), 0 10px 28px -10px rgba(140, 82, 0, .35); transform: rotate(-2deg); }
.offer__h { font-size: clamp(21px, 2vw, 26px); line-height: 1.12; letter-spacing: -.028em; }
.offer__p { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.offer__p b { font-weight: 600; color: var(--ink); }

/* ───── Dawn Card thanks page ───── */
.thanks { overflow-x: clip; padding: clamp(40px, 8vw, 110px) 0 clamp(96px, 13vw, 180px); }
.thanks__in { display: grid; gap: clamp(40px, 6vw, 72px); align-items: center; }
.thanks h1 { margin: 16px 0 0; font-size: clamp(38px, 6.4vw, 84px); line-height: .98; letter-spacing: -.045em; max-width: 14ch; }
.thanks__lede { margin-top: 24px; font-size: clamp(18px, 2vw, 22px); line-height: 1.45; letter-spacing: -.012em; color: var(--ink-2); max-width: 36ch; text-wrap: pretty; }
.thanks__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.thanks__small { margin-top: 16px; font-size: 15px; color: var(--ink-2); }
.thanks__card { position: relative; isolation: isolate; justify-self: center; width: min(72vw, 340px); }
.thanks__card::before { content: ""; position: absolute; z-index: -1; inset: 18% -40% -6%; background: radial-gradient(ellipse 50% 50% at 50% 60%, rgba(255, 226, 176, 1), rgba(255, 226, 176, 0)); }
.thanks__card img { width: 100%; height: auto; border-radius: 2px; box-shadow: 0 1px 0 var(--rule-warm), 0 18px 40px -16px rgba(140, 82, 0, .4); transform: rotate(-2deg); }
@media (max-width: 479px) { .thanks__acts .btn { width: 100%; } }
@media (min-width: 900px) { .thanks__in { grid-template-columns: 1fr auto; } .thanks__card { margin-right: 4%; } }

@media (min-width: 900px) {
  .along__in { grid-template-columns: 58% 1fr; align-items: end; gap: 0; }
  .along__form { padding-left: 48px; }
}

/* ───── 5 · ending: lowered into the light ───── */
.ending { position: relative; overflow: clip; background: var(--glow); padding: clamp(96px, 14vw, 200px) 0 clamp(40px, 5vw, 64px); }
.wash { display: none; }
.ending .wrap { position: relative; z-index: 1; }
.ending__body { position: relative; padding-right: 40px; }
.ending__title { margin: 14px 0 clamp(28px, 4vw, 52px); font-size: clamp(46px, 9.4vw, 132px); line-height: .92; letter-spacing: -.05em; }
.ending__bright { font-size: clamp(22px, 2.9vw, 38px); line-height: 1.22; letter-spacing: -.028em; font-weight: 600; max-width: 24ch; margin-top: clamp(28px, 4vw, 48px); }
.ending__lede { font-size: clamp(19px, 2.3vw, 28px); line-height: 1.4; letter-spacing: -.02em; max-width: 34ch; margin-bottom: 20px; font-weight: 500; text-wrap: pretty; }
.ending__verse { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.5; max-width: 34ch; margin: 28px 0; color: var(--ink); text-wrap: pretty; }
.ending__verse cite { display: block; margin-top: 6px; font: 500 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--amber); }
.big { font-size: clamp(48px, 14.4vw, 150px); line-height: .94; letter-spacing: -.045em; font-weight: 600; margin-top: clamp(72px, 12vw, 160px); text-wrap: balance; }
.sunrule { display: block; width: clamp(72px, 10vw, 128px); height: 4px; margin-top: clamp(24px, 3vw, 36px); background: var(--sun); transform-origin: 0 50%; }
.lastline { position: relative; margin-top: clamp(56px, 7vw, 88px); padding-top: clamp(28px, 4vw, 44px); font-size: clamp(22px, 3vw, 32px); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.lastline::before { content: ""; position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: 4px; background: var(--sun); transform-origin: 0 50%; transform: scaleX(var(--h, 1)); }
.lastline::after { content: ""; position: absolute; top: -30px; left: 0; width: 60px; height: 30px; border-radius: 60px 60px 0 0; background: var(--sun); pointer-events: none; }
.ending .plumb { inset: 0; }
.ending .plumb__arm { top: 0; height: calc(100% - 28px); }
.ending .plumb__arm::after { display: none; }
.ending .plumb__bob { cursor: grab; }
@media (min-width: 900px) {
  .ending { --lx: 86%; }
  .ending__body { padding-right: calc(14% + 40px); }
  .ending .plumb__arm { top: 0; }
}

.find { background: var(--glow); padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 7vw, 88px); }
.find .wrap, .foot .wrap { position: relative; }
.find .wrap::before, .foot .wrap::before { content: ""; position: absolute; top: 0; left: var(--pad); right: var(--pad); height: 1px; background: rgba(18, 18, 18, .18); }
.find .wrap { padding-top: clamp(28px, 4vw, 40px); }
.find__list { display: flex; flex-wrap: wrap; gap: 14px 36px; margin-top: 18px; }
.find__n { font-weight: 600; letter-spacing: -.01em; }
.find__h { font: 400 13px/1 var(--mono); color: var(--ink-2); margin-left: 4px; overflow-wrap: anywhere; }
.find a { text-decoration: none; display: inline-block; padding: 4px 0; }
.find__n { text-decoration: underline 1.5px var(--ink); text-underline-offset: .22em; }
.find a:hover .find__n { color: var(--amber); }
@media (max-width: 519px) { .find__list { flex-direction: column; } }

.foot { background: var(--glow); padding: 0 0 clamp(36px, 5vw, 56px); font-size: 14px; color: var(--ink-2); }
.foot .wrap { padding-top: 24px; }
.foot__line { line-height: 1.8; max-width: 70ch; }
.foot a { text-decoration-thickness: 1px; text-decoration-color: var(--ink-2); }
.foot a:hover { color: var(--ink); }
.foot__sdg { margin-top: 10px; color: var(--ink); }
.foot__c { color: var(--ink-2); margin-left: 8px; }

/* ───── motion (only while html.anim) ───── */
.anim [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 800ms var(--ease); }
.anim [data-reveal].is-in { opacity: 1; transform: none; }
.anim .cards .card:nth-child(2n) { transition-delay: 0ms, 0ms, 0ms, 0ms; }

/* hero intro, runs when html.ready lands */
.anim .hero__title .w > span { transform: translateY(108%); transition: transform 900ms var(--ease); transition-delay: calc(var(--i, 0) * 55ms + 150ms); }
.anim.ready .hero__title .w > span { transform: none; }
.anim .hero__title .w:nth-child(1) { --i: 0; } .anim .hero__title .w:nth-child(2) { --i: 1; } .anim .hero__title .w:nth-child(3) { --i: 2; }
.anim .hero__title .w:nth-child(4) { --i: 3; } .anim .hero__title .w:nth-child(5) { --i: 4; } .anim .hero__title .w:nth-child(6) { --i: 5; } .anim .hero__title .w:nth-child(7) { --i: 6; }
.anim .hero .label, .anim .hero__ctas, .anim .verse { opacity: 0; transform: translateY(12px); transition: opacity 800ms var(--ease) 500ms, transform 900ms var(--ease) 500ms; }
.anim.ready .hero .label, .anim.ready .hero__ctas, .anim.ready .verse { opacity: 1; transform: none; }
.anim .ground::before, .anim .ground::after { transform: scaleX(0); transition: transform 1000ms var(--ease) 500ms; }
.anim.ready .ground::before, .anim.ready .ground::after { transform: none; }
.anim .ground__wash { opacity: 0; transition: opacity 1400ms ease 400ms; }
.anim.ready .ground__wash { opacity: 1; }
.anim .hero .plumb__arm { height: 0; transition: height 1000ms var(--ease) 200ms; }
.anim.ready .hero .plumb__arm { height: calc(100% + 28px - var(--bobgap, 14px)); }
@media (min-width: 900px) { .anim.ready .hero .plumb__arm { height: calc(100% + 56px - var(--bobgap, 14px)); } }
.anim .hero .plumb__arm.is-live { transition: none; }

/* section 2: lines converge, scrubbed by --p (0 to 1) set by site.js */
.anim .beat { --l: clamp(0, (var(--p, 1) - var(--a)) / .12, 1); }
.anim .beat--1 { --a: .0; } .anim .beat--2 { --a: .06; } .anim .beat--3 { --a: .12; }
.anim .beat h3, .anim .beat p { color: color-mix(in srgb, var(--ink) calc(var(--l) * 100%), var(--ink-3)); }
.anim .beat p { color: color-mix(in srgb, var(--ink-2) calc(var(--l) * 100%), var(--ink-3)); }
.anim .work { color: color-mix(in srgb, var(--ink) calc(clamp(0, (var(--p, 1) - .88) / .1, 1) * 100%), var(--ink-3)); }
@media (min-width: 760px) {
  .anim .c { stroke-dashoffset: calc(1 - clamp(0, (var(--p, 1) - var(--a)) / var(--w), 1)); }
  .anim .c1, .anim .c3 { --a: .06; --w: .46; } .anim .c2 { --a: .04; --w: .4; } .anim .c4 { --a: .52; --w: .16; }
  .anim .conv__mark { opacity: clamp(0, (var(--p, 1) - .68) / .08, 1); }
}
@media (max-width: 759px) {
  .anim .beats::before { transform: scaleY(clamp(0, (var(--p, 1) - .04) / .6, 1)); }
  .anim .beat::before { transform: scaleX(clamp(0, (var(--p, 1) - var(--b)) / .1, 1)); }
  .anim .beat--1 { --b: .03; } .anim .beat--2 { --b: .2; } .anim .beat--3 { --b: .38; }
  .anim .work__mark { opacity: clamp(0, (var(--p, 1) - .62) / .08, 1); }
}

/* v11 cinematic: words, hero exit, type */
.anim .tw { color: color-mix(in srgb, var(--ink) calc((.14 + .86 * var(--l)) * 100%), transparent); transform: translateY(calc((1 - var(--l)) * .22em)); --l: clamp(0, (var(--tp, 1) * 5.2 - var(--i)), 1); }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .anim .hero__copy { animation: copyExit linear both; animation-timeline: scroll(root); animation-range: 0 80vh; }
    @keyframes copyExit { to { transform: translateY(-48px); opacity: .25; } }
  }
}

/* ending: JS drives line length, wash, and which lines are lit */
.anim .ending { background: var(--dawn); }
.anim .wash { display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: var(--glow); z-index: 0; transform: translate3d(0, 100%, 0); will-change: transform; pointer-events: none; }
.anim .wash::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 90px; background: linear-gradient(to bottom, rgba(255, 226, 176, 0), var(--glow)); }
.anim .ending .lit { color: var(--unlit); transition: color 600ms var(--ease); }
.anim .ending .lit.is-lit { color: var(--ink); }
.anim .ending .lit cite { transition: color 600ms var(--ease); }
.anim .ending .big .sunrule { transform: scaleX(0); transition: transform 900ms var(--ease) 150ms; }
.anim .ending .big.is-lit .sunrule { transform: none; }
.anim .ending .plumb__arm { transition: none; }
/* the sun clears the horizon when the last line arrives */
.anim .lastline::after { clip-path: inset(100% 0 0 0); transition: clip-path 1100ms var(--ease) 350ms; }
.anim .lastline.is-in::after { clip-path: inset(0); }
.anim .find, .anim .foot { background: var(--glow); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .card, .btn__arrow, .card__link span { transition: none; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ───── the horizon: no photo in the hero; a sun clears the line where the plumb comes to rest, rings of light spread from it ───── */
.stage::before, .stage::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; bottom: 0;
  left: calc(var(--lx, 70%) - var(--R)); width: calc(2 * var(--R)); height: var(--R);
}
.stage { --R: min(84vw, 560px); isolation: isolate; min-height: 470px; justify-content: center; }
@media (min-width: 900px) { .stage { --R: min(46vw, 640px); min-height: min(640px, calc(100vh - 150px)); } }
.stage::before { /* the glow and the half-disc */
  background:
    radial-gradient(circle at 50% 100%, rgba(247, 183, 51, .95) 0 15%, rgba(247, 183, 51, 0) 15.4%),
    radial-gradient(circle at 50% 100%, rgba(255, 226, 176, 1), rgba(255, 226, 176, .55) 38%, rgba(255, 226, 176, 0) 70%);
}
.stage::after { /* thin rings of light, fading with distance */
  background: repeating-radial-gradient(circle at 50% 100%, rgba(247, 183, 51, 0) 0 calc(var(--R) * .115), rgba(247, 183, 51, .55) calc(var(--R) * .115) calc(var(--R) * .115 + 1.5px));
  -webkit-mask-image: radial-gradient(circle at 50% 100%, transparent 14%, #000 22%, transparent 74%);
  mask-image: radial-gradient(circle at 50% 100%, transparent 14%, #000 22%, transparent 74%);
}
.anim .stage::before, .anim .stage::after { transform: translateY(46%); transform-origin: 50% 100%; opacity: 0; transition: transform 1800ms var(--ease) 200ms, opacity 1400ms var(--ease) 200ms; }
.anim.ready .stage::before, .anim.ready .stage::after { transform: none; opacity: 1; }

/* ───── "Right now." with the portrait standing on a sun rule beside it ───── */
.now__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 14px 0 clamp(40px, 6vw, 80px); overflow-x: clip; position: relative; }
.now__head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--sun); }
.now__text { min-width: 0; padding-bottom: 14px; }
.now__head h2 { margin: 14px 0 0; }
.now__photo { position: relative; isolation: isolate; flex: none; margin: 0; width: clamp(168px, 44vw, 330px); aspect-ratio: 760 / 1143; align-self: flex-end; pointer-events: none; }
.now__photo::before {
  content: ""; position: absolute; inset: 0; background: center bottom / contain no-repeat;
  background-image: image-set(url(../img/hero-a-cut.avif) type("image/avif"), url(../img/hero-a-cut.webp) type("image/webp"));
  filter: drop-shadow(0 0 2px rgba(247, 183, 51, .55)) drop-shadow(0 0 22px rgba(255, 226, 176, .95));
}
.now__photo::after { /* warm halo rising from the rule */
  content: ""; position: absolute; z-index: -1; left: -30%; right: -30%; bottom: -4px; height: 112%;
  background: radial-gradient(ellipse 50% 100% at 50% 100%, rgba(255, 226, 176, .95), rgba(255, 226, 176, .55) 38%, rgba(255, 226, 176, 0) 100%);
}
@media (min-width: 900px) { .now__photo { width: clamp(240px, 24vw, 330px); } }