/* bd accountancy: no JavaScript. All motion is CSS and is progressive enhancement. */

@font-face { font-family: "Source Serif"; src: url("/fonts/source-serif-4-latin-opsz-normal.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif"; src: url("/fonts/source-serif-4-latin-opsz-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

@view-transition { navigation: auto; }

:root {
  color-scheme: light;
  --paper: #f7f8f0;
  --bar: #edf2e0;
  --rule: #d2dabf;
  --ink: #2a2c26;
  --grey: #494948;
  --muted: #5d6157;
  --green: #6e8f30;
  --green-deep: #47601a;
  --night: #1c2412;
  --lime: #dcf550;
  --white: #fffffb;
  --mast: 4.5rem;
  --gutter: clamp(1rem, 4vw, 4rem);
  --display: "Source Serif", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--mast) + 1rem); overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.6 var(--sans); overflow-x: clip; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-underline-offset: .18em; }
a:focus-visible { outline: 3px solid var(--green-deep); outline-offset: 3px; border-radius: 2px; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; font-optical-sizing: auto; line-height: 1.08; letter-spacing: -.012em; text-wrap: balance; }
h2 { font-size: clamp(2.25rem, 5.6vw, 5rem); max-width: 18ch; }
em { font-style: italic; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: -4rem; z-index: 30; padding: .6rem 1rem; background: var(--night); color: var(--white); }
.skip:focus { top: .5rem; }
.eyebrow { font: 400 .8125rem/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--green-deep); margin-bottom: 1rem; }
.lede { font-size: clamp(1.2rem, 1.9vw, 1.6rem); line-height: 1.35; }

/* Masthead */
.mast { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 2rem; height: var(--mast); padding: 0 var(--gutter); background: var(--paper); border-bottom: 1px solid var(--rule); view-transition-name: mast; }
.mark { display: block; margin-right: auto; }
.mark img { width: auto; height: 3.75rem; }
.mast__nav { display: flex; gap: 1.75rem; font-size: .95rem; }
.mast__nav a { text-decoration: none; }
.mast__nav a:hover { text-decoration: underline; }
.mast__login { padding: .35rem .85rem; border: 1px solid var(--ink); border-radius: 99px; font-size: .9rem; text-decoration: none; white-space: nowrap; }
.mast__login:hover { background: var(--ink); color: var(--paper); }
.mast__toggle { display: none; align-items: center; gap: .5rem; padding: .35rem .85rem; border: 1px solid var(--ink); border-radius: 99px; font-size: .9rem; text-decoration: none; }
.mast__toggle--open::before { content: ""; width: 1rem; height: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }

/* Small screens: the menu opens with #menu as the URL target, so it needs no
   JavaScript. Tapping a section link changes the target, which closes it. */
@media (max-width: 54rem) {
  .mast { gap: .6rem; }
  .mast__toggle--open { display: inline-flex; }
  .mast__nav { display: none; position: fixed; top: var(--mast); left: 0; right: 0; max-height: calc(100svh - var(--mast)); overflow-y: auto; flex-direction: column; gap: 0; padding: .5rem var(--gutter) 1.5rem; background: var(--paper); border-bottom: 1px solid var(--rule); box-shadow: 0 1.5rem 2.5rem -1.5rem rgb(28 36 18 / .45); }
  .mast__nav:target { display: flex; }
  .mast__nav a { padding: .8rem 0; border-bottom: 1px solid var(--rule); font: 400 1.75rem/1.2 var(--display); }
  .mast:has(.mast__nav:target) .mast__toggle--open { display: none; }
  .mast:has(.mast__nav:target) .mast__toggle--close { display: inline-flex; }
}

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; align-items: center; min-height: calc(100svh - var(--mast)); background: repeating-linear-gradient(to bottom, var(--bar) 0 3rem, transparent 3rem 6rem); }
.nb { white-space: nowrap; }
.hero h1 { font-size: clamp(2.75rem, min(4.5vw, 10svh), 5.5rem); line-height: 1.04; text-wrap: pretty; }
.hero__dots { color: var(--green); }
.hero h1 em { display: block; margin-top: .08em; }
.hero h1 em span { background: linear-gradient(var(--lime), var(--lime)) no-repeat 0 78% / 100% 56%; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .08em; margin-left: -.08em; }
.hero .lede { max-width: 32ch; margin-top: clamp(1.25rem, 3vh, 2rem); }
.hero__copy { padding: clamp(1.5rem, 4vh, 3rem) 2rem 1.5rem var(--gutter); }
.hero__photo { position: relative; grid-column: 2; grid-row: 1 / -1; align-self: stretch; min-height: 24rem; }
.hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%; }
.hero__cue { padding: 0 0 1.25rem var(--gutter); font: 400 .8125rem/1.3 var(--mono); color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(1.25rem, 3vh, 2rem); }
@media (max-width: 72rem) {
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; align-items: start; min-height: 0; }
  .hero__copy { padding-right: var(--gutter); }
  .hero__photo { grid-column: 1; grid-row: auto; min-height: 0; aspect-ratio: 3 / 2; }
  .hero__cue { padding-top: 1rem; }
}

.btn { display: inline-block; padding: .85rem 1.4rem; border: 1.5px solid var(--ink); border-radius: 99px; font-weight: 500; line-height: 1.2; text-decoration: none; background: transparent; transition: background-color .15s, color .15s; }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--lime); color: var(--ink); }
.btn--light { border-color: var(--white); color: var(--white); }
.btn--light:hover { background: var(--lime); border-color: var(--lime); color: var(--ink); }

/* Story: static layout first */
.story { padding: 3rem var(--gutter) 1.5rem; border-top: 1px solid var(--rule); }
.stage { display: grid; gap: 2rem; }
.rail, .flag, .source, .note, .ledger, .returns, .forecast { display: none; }
.report { max-width: 32rem; padding: 1.5rem; background: var(--white); border: 1px solid var(--rule); border-left: 6px solid var(--green); font: 400 .95rem/1.2 var(--mono); }
.report p { display: flex; justify-content: space-between; padding: .55em 0; border-bottom: 1px solid var(--rule); }
.report .report__by { border: 0; padding: 0; color: var(--green-deep); }
.report .report__title { display: block; border: 0; padding: .3em 0 .7em; font: 400 2.5rem/1 var(--display); }
.report .report__total { border-bottom: 4px double var(--grey); }
.report .report__subtotal { border-top: 1.5px solid var(--grey); border-bottom-color: var(--grey); }
.stamp { display: inline-block; margin-top: 1rem; padding: .4em .7em; border: 2px solid var(--green-deep); border-radius: .3em; color: var(--green-deep); text-transform: uppercase; letter-spacing: .06em; transform: rotate(-4deg); }
.desk { position: relative; container-type: inline-size; }
.chapters { display: grid; gap: 2.5rem; max-width: 40rem; }
.chapter h3 { font-size: clamp(1.9rem, 3.4vw, 3.25rem); margin-bottom: .9rem; }
.story__note { margin-top: 1.25rem; font: 400 .75rem/1.4 var(--mono); color: var(--muted); }

.ledger { background: var(--white); border: 1px solid var(--rule); font: 400 clamp(.72rem, 1.75cqw, 1rem)/1 var(--mono); }
.row { display: grid; grid-template-columns: 5% 13% 41% 18% 23%; align-items: center; height: 2.6em; padding: 0 2cqw; }
.row span.tick { overflow: visible; }
.tick::before, .check::before { content: ""; display: block; width: .5em; height: .95em; margin-left: .2em; border: solid var(--green-deep); border-width: 0 .17em .17em 0; transform: rotate(42deg) translate(-.1em, -.1em); }
.row:nth-child(even) { background: var(--bar); }
.row--head { font-size: .86em; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); border-bottom: 1.5px solid var(--grey); }
.row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.num { text-align: right; font-variant-numeric: tabular-nums; }


/* Sections */
.section { --pad: clamp(4.5rem, 10vw, 9rem); padding: var(--pad) var(--gutter); }
.photo-band { height: clamp(17rem, 80svh, 58rem); overflow: clip; }
.photo-band img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.photo-band--short { height: clamp(14rem, 46svh, 30rem); }
.photo-band--short img { object-position: 50% 10%; }
@media (max-width: 54rem), (max-aspect-ratio: 5/4) { .photo-band, .photo-band--short { height: auto; aspect-ratio: 5 / 3; } }
.bleed { margin: calc(var(--pad) * -1) calc(var(--gutter) * -1) var(--pad); }
.section--bar { background: repeating-linear-gradient(to bottom, var(--bar) 0 3rem, transparent 3rem 6rem); }
.section--page { min-height: 70svh; }
.page-title { font-size: clamp(2.5rem, 6.5vw, 5.75rem); max-width: 16ch; margin-bottom: 3rem; }

.services { margin-top: clamp(2.5rem, 6vw, 5rem); border-top: 1.5px solid var(--grey); }
.services li { display: grid; grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.2fr); gap: 1rem 2rem; align-items: baseline; padding: clamp(1.25rem, 3vw, 2.5rem) 0; border-bottom: 1px solid var(--rule); }
.services__no { font: 400 .875rem/1 var(--mono); color: var(--green-deep); }
.services h3 { font-size: clamp(2rem, 4.4vw, 4rem); }
.services p { max-width: 34rem; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.4; }
@media (max-width: 44rem) { .services li { grid-template-columns: 2.5rem minmax(0, 1fr); } .services p { grid-column: 2; } }

.band { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3rem var(--gutter); align-items: end; padding: clamp(4.5rem, 10vw, 9rem) var(--gutter); background: var(--green-deep); color: var(--white); }
.band .eyebrow { color: var(--lime); }
.band h2 { margin-bottom: 1.5rem; }
.band__copy > p:not(.eyebrow) { max-width: 36rem; margin-bottom: 1.75rem; font-size: 1.15rem; }
.modules { font: 400 clamp(2.5rem, 6vw, 5.5rem)/1.1 var(--display); border-top: 1px solid rgb(255 255 251 / .4); }
.modules li { padding: .22em 0; border-bottom: 1px solid rgb(255 255 251 / .4); }
@media (max-width: 54rem) { .band { grid-template-columns: minmax(0, 1fr); } }

.about { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem var(--gutter); margin-top: clamp(2.5rem, 6vw, 5rem); }
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 15.3rem)); gap: clamp(.75rem, 2vw, 1.75rem); align-content: start; }
.people img { width: 100%; }
figcaption { margin-top: .75rem; font-weight: 500; }
figcaption small { display: block; font: 400 .8125rem/1.5 var(--mono); color: var(--green-deep); }
figcaption span { display: block; margin-top: .4rem; font-size: .95rem; font-weight: 400; line-height: 1.4; }
.about__copy > * + * { margin-top: 1.25rem; }
.members { padding-top: .5rem; }
.members div { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); padding: .85rem 0; border-top: 1px solid var(--rule); }
.members dt { font: 400 1rem/1.5 var(--mono); color: var(--green-deep); }
@media (max-width: 54rem) { .about { grid-template-columns: minmax(0, 1fr); } }

.slot { margin-top: clamp(3rem, 6vw, 5rem); padding: 1.75rem; border: 1.5px dashed var(--green); font: italic 400 clamp(1.25rem, 2.6vw, 2rem)/1.25 var(--display); }
.slot__label { font: 400 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--green-deep); margin-bottom: .75rem; }

.fees { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 3rem var(--gutter); align-items: center; }
.fees h2 { margin-bottom: 1.5rem; }
.fees p:not(.eyebrow, .spec__title) { max-width: 36rem; }
.spec { padding: 1.75rem; background: var(--white); border: 1px solid var(--rule); box-shadow: 0 1.25rem 2.5rem -1.5rem rgb(28 36 18 / .35); transform: rotate(1.2deg); }
.spec__title { font: 400 .875rem/1.3 var(--mono); text-transform: uppercase; color: var(--green-deep); padding-bottom: .9rem; border-bottom: 1.5px solid var(--grey); }
.spec ol { counter-reset: s; }
.spec li { counter-increment: s; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); padding: .8rem 0; border-bottom: 1px solid var(--rule); }
.spec li::before { content: counter(s, decimal-leading-zero); font: 400 .875rem/1.8 var(--mono); color: var(--green-deep); }
@media (max-width: 54rem) { .fees { grid-template-columns: minmax(0, 1fr); } }

.contact { padding: clamp(4.5rem, 10vw, 9rem) var(--gutter); background: var(--night); color: var(--white); }
.contact .eyebrow { color: var(--lime); }
.contact h2 { font-size: clamp(3rem, 9vw, 9rem); max-width: 12ch; }
.contact h2 em { color: var(--lime); }
.contact__lede { max-width: 34rem; margin-top: 1.5rem; font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.4; }
.contact__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 2rem var(--gutter); margin-top: clamp(3rem, 7vw, 6rem); padding-top: 2rem; border-top: 1px solid rgb(255 255 251 / .3); align-items: start; }
.contact__big { font: 400 clamp(1.5rem, 3.2vw, 2.75rem)/1.25 var(--display); }
.contact__big a { display: block; overflow-wrap: anywhere; }
.contact__big a:hover { color: var(--lime); }
address { font-style: normal; }
.contact a:focus-visible { outline-color: var(--lime); }
.contact__park { font-size: .95rem; color: #cfd6c4; }
@media (max-width: 54rem) { .contact__grid { grid-template-columns: minmax(0, 1fr); } }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding: 1.25rem var(--gutter); background: var(--night); color: #cfd6c4; font: 400 .8125rem/1.4 var(--mono); border-top: 1px solid rgb(255 255 251 / .18); }

.docs { max-width: 56rem; border-top: 1.5px solid var(--grey); }
.docs li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.docs a { font: 400 clamp(1.3rem, 2.8vw, 2.1rem)/1.15 var(--display); text-decoration: none; }
.docs a:hover { text-decoration: underline; }
.docs span { font: 400 .75rem/1 var(--mono); color: var(--muted); }

/* Motion. Everything above stands on its own without this block. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .hero h1 em span { animation: swipe 1s .35s cubic-bezier(.65, 0, .2, 1) backwards; }
}
@keyframes swipe { from { background-size: 0 62%; } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 5% entry 55%; }
    .modules li { animation: slide-in linear both; animation-timeline: view(); animation-range: entry 10% entry 70%; }
    .spec.reveal { animation-name: rise-tilt; }
    .hero__cue { animation: fade-off linear both; animation-timeline: scroll(root); animation-range: 0 45vh; }
    .photo-band img { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }

    .story { height: 620svh; padding: 0; border: 0; view-timeline: --story block; position: relative; }
    .story__note { position: absolute; left: var(--gutter); bottom: .5rem; margin: 0; z-index: 5; }
    .chapter p:last-child { font-size: 1.15rem; line-height: 1.45; }
    .stage { position: sticky; top: var(--mast); height: calc(100svh - var(--mast)); padding: clamp(1rem, 4vh, 2.5rem) var(--gutter) clamp(2rem, 5vh, 3rem); grid-template-columns: minmax(19rem, 34%) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: center; overflow: clip; background: var(--paper); }

    .rail { display: block; position: absolute; inset: 0 0 auto; height: 4px; background: var(--bar); }
    .rail i { display: block; height: 100%; background: var(--green); transform-origin: 0 50%; animation: grow-x linear both; animation-timeline: --story; animation-range: contain 0% contain 100%; }

    .chapters { order: -1; max-width: none; gap: 0; }
    .chapter { grid-area: 1 / 1; align-self: center; animation: chapter linear both; animation-timeline: --story; animation-range: contain var(--a) contain var(--b); }
    .c1 { --a: 0%;  --b: 11%; animation-name: chapter-first; }
    .c2 { --a: 10%; --b: 23%; }
    .c3 { --a: 22%; --b: 50%; }
    .c4 { --a: 49%; --b: 74%; }
    .c5 { --a: 73%; --b: 100%; animation-name: chapter-last; }

    .desk { height: 100%; min-height: 0; container-type: size; overflow: clip; overflow-clip-margin: .75rem; }

    .source { display: block; position: absolute; left: 2cqw; top: 77cqh; font: 400 clamp(.7rem, min(1.6cqw, 2.3cqh), .95rem)/1.3 var(--mono); color: var(--green-deep); animation: fade-out linear both; animation-timeline: --story; animation-range: contain 9% contain 12%; }

    .flag { display: block; position: absolute; z-index: 1; left: 0; right: 0; top: 42cqh; height: 8cqh; background: var(--lime); mix-blend-mode: multiply; opacity: 0; animation: appear linear forwards, fade-out linear forwards; animation-timeline: --story, --story; animation-range: contain 15.5% contain 17%, contain 20% contain 21.5%; }

    .note { display: flex; align-items: center; gap: .9em; position: absolute; z-index: 3; left: 3cqw; bottom: 1cqh; width: min(70cqw, 27rem); padding: .8em 1em; background: var(--white); border: 1px solid var(--rule); box-shadow: 0 1rem 2rem -1rem rgb(28 36 18 / .5); font-size: clamp(.8rem, min(1.9cqw, 2.6cqh), 1.05rem); line-height: 1.3; animation: note-in linear both, fade-out linear forwards; animation-timeline: --story, --story; animation-range: contain 15.5% contain 18%, contain 20% contain 22%; }
    .note img { flex: none; width: 3.2em; height: 3.2em; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
    .note span { display: block; font: 400 .85em/1.3 var(--mono); color: var(--green-deep); }

    .ledger { display: block; position: absolute; left: 0; right: 0; top: 2cqh; z-index: 2; border: 0; background: var(--white); box-shadow: 0 1rem 2.5rem -1.5rem rgb(28 36 18 / .4); font-size: clamp(.68rem, min(1.75cqw, 2.3cqh), 1.05rem); animation: fade-collapse linear forwards; animation-timeline: --story; animation-range: contain 23% contain 29%; transform-origin: 50% 40%; }
    .row { height: 8cqh; }
    .row:not(.row--head) { animation: row-in linear both; animation-timeline: --story; animation-range: contain calc(.5% + var(--i) * 1.1%) contain calc(2.5% + var(--i) * 1.1%); }
    .tick { animation: tick-in linear both; animation-timeline: --story; animation-range: contain calc(11.5% + var(--i) * .8%) contain calc(13% + var(--i) * .8%); }
    .l5 .tick { animation-range: contain 20% contain 21.5%; }
    .l1 { --i: 0; } .l2 { --i: 1; } .l3 { --i: 2; } .l4 { --i: 3; } .l5 { --i: 4; } .l6 { --i: 5; } .l7 { --i: 6; } .l8 { --i: 7; }
    .ledger { background: transparent; box-shadow: none; }



    .report { display: block; max-width: none; border-top: 0; border-right: 0; border-bottom: 0; position: absolute; z-index: 4; left: calc(50cqw - min(60cqh, 44cqw)); right: calc(50cqw - min(60cqh, 44cqw)); top: 2cqh; height: 94cqh; padding: 5cqh min(6cqh, 4cqw); background: var(--white); border-left: 1.4cqw solid var(--green); box-shadow: 0 1.5rem 3rem -1.25rem rgb(28 36 18 / .5); font: 400 clamp(.72rem, min(1.8cqw, 2.3cqh), 1.05rem)/1.2 var(--mono); animation: report-in linear both, report-out linear forwards; animation-timeline: --story, --story; animation-range: contain 25% contain 33%, contain 50% contain 56%; }
    .report p { display: flex; justify-content: space-between; padding: 2.1cqh 0; border-bottom: 1px solid var(--rule); }
    .report .report__by { border: 0; color: var(--green-deep); padding: 0; }
    .report .report__title { display: block; border: 0; padding: 1.5cqh 0 8cqh; font: 400 clamp(2.25rem, min(8.4cqw, 12cqh), 5.5rem)/1 var(--display); letter-spacing: -.015em; }
    .report .report__sub { border-bottom: 1.5px solid var(--grey); color: var(--muted); }
    .report .report__total { border-bottom: 4px double var(--grey); margin-top: 1cqh; font-size: 1.2em; }
    .stamp { display: block; margin: 0; position: absolute; right: min(6cqh, 4cqw); bottom: 5cqh; padding: .4em .7em; border: 2px solid var(--green-deep); border-radius: .3em; color: var(--green-deep); font-size: 1.15em; text-transform: uppercase; letter-spacing: .06em; animation: stamp linear both; animation-timeline: --story; animation-range: contain 38% contain 42%; }

    .returns { display: flex; flex-direction: column; position: absolute; z-index: 4; left: calc(50cqw - min(60cqh, 44cqw)); right: calc(50cqw - min(60cqh, 44cqw)); top: 2cqh; height: 94cqh; padding: 5cqh min(6cqh, 4cqw); background: var(--white); border-left: 1.4cqw solid var(--green); box-shadow: 0 1.5rem 3rem -1.25rem rgb(28 36 18 / .5); font: 400 clamp(.72rem, min(1.8cqw, 2.3cqh), 1.05rem)/1.2 var(--mono); animation: report-in linear both, report-out linear forwards; animation-timeline: --story, --story; animation-range: contain 52% contain 59%, contain 74% contain 80%; }
    .returns__title { padding-bottom: 1.5cqh; border-bottom: 1.5px solid var(--grey); font: 400 clamp(1.5rem, min(5.2cqw, 8cqh), 3.25rem)/1.05 var(--display); letter-spacing: -.012em; }
    .returns__title--second { margin-top: auto; padding-top: 3cqh; }
    .returns__row { --i: 0; display: flex; justify-content: space-between; align-items: center; padding: 2.8cqh 0; font-size: 1.35em; border-bottom: 1px solid var(--rule); animation: appear linear both; animation-timeline: --story; animation-range: contain calc(58% + var(--i) * 2.5%) contain calc(60.5% + var(--i) * 2.5%); }
    .returns__row:nth-child(3) { --i: 1; } .returns__row:nth-child(4) { --i: 2; }
    .returns__topics { display: flex; flex-wrap: wrap; gap: .5em; margin-top: 2.2cqh; }
    .returns__topics li { --i: 0; padding: .55em .85em; font-size: 1.15em; background: var(--bar); animation: appear linear both; animation-timeline: --story; animation-range: contain calc(64% + var(--i) * 1.5%) contain calc(66% + var(--i) * 1.5%); }
    .returns__topics li:nth-child(2) { --i: 1; } .returns__topics li:nth-child(3) { --i: 2; } .returns__topics li:nth-child(4) { --i: 3; } .returns__topics li:nth-child(5) { --i: 4; }

    .forecast { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; overflow: visible; }
    .forecast path { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
    .forecast__past, .forecast__up, .forecast__down { animation: draw-path linear both; animation-timeline: --story; }
    .forecast__axis { stroke: var(--rule); stroke-width: 2; animation: appear linear both; animation-timeline: --story; animation-range: contain 78% contain 81%; }
    .forecast__past { stroke: var(--grey); stroke-width: 7; animation-range: contain 78% contain 85%; }
    .forecast__up { stroke: var(--green); stroke-width: 11; animation-range: contain 85% contain 94%; }
    .forecast__down { stroke: var(--grey); stroke-width: 4; animation-range: contain 85% contain 94%; }
    .forecast__now { fill: var(--lime); stroke: var(--ink); stroke-width: 4; animation: appear linear both; animation-timeline: --story; animation-range: contain 84% contain 86%; }
    .forecast__label { font: 400 30px var(--display); fill: var(--ink); animation: appear linear both; animation-timeline: --story; animation-range: contain 92% contain 96%; }
    .forecast__label--now { font: 400 22px var(--mono); animation-range: contain 84% contain 86%; }

    @media (max-width: 54rem), (max-aspect-ratio: 1/1) {
      .stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 15.5rem; gap: 1rem; align-items: stretch; padding-top: 1.25rem; padding-bottom: 1.75rem; }
      .chapters { order: 0; }
      .chapter { align-self: start; }
      .chapter .eyebrow { margin-bottom: .4rem; }
      .chapter h3 { font-size: 1.75rem; margin-bottom: .5rem; }
      .chapter p:last-child { font-size: 1rem; line-height: 1.45; }
      .row { grid-template-columns: 8% 46% 20% 26%; }
      .row .date { display: none; }
      .source { top: 76cqh; }
      .report, .returns { left: 8cqw; right: 8cqw; }
      .forecast__label--now { font-size: 30px; }
    }
  }
}

@keyframes rise { from { opacity: 0; transform: translateY(2.5rem); } }
@keyframes rise-tilt { from { opacity: 0; transform: translateY(3.5rem) rotate(-3deg); } }
@keyframes slide-in { from { opacity: 0; transform: translateX(14%); } }
@keyframes fade-off { to { opacity: 0; } }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes fade-collapse { from { opacity: 1; transform: none; } to { opacity: 0; transform: scaleY(.55); } }
@keyframes draw-path { from { stroke-dashoffset: 1; opacity: 0; } 2% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }

@keyframes chapter { 0% { opacity: 0; transform: translateY(1.75rem); } 18%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-1.75rem); } }
@keyframes chapter-first { 0%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-1.75rem); } }
@keyframes chapter-last { 0% { opacity: 0; transform: translateY(1.75rem); } 22%, 100% { opacity: 1; transform: none; } }

@keyframes settle { from { transform: scale(1.1); } to { transform: none; } }
@keyframes row-in { from { opacity: 0; transform: translateX(-1.5rem); } to { opacity: 1; transform: none; } }
@keyframes tick-in { from { opacity: 0; transform: scale(1.8); } to { opacity: 1; transform: none; } }
@keyframes note-in { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } }
@keyframes report-in { from { opacity: 0; transform: translateY(16cqh) rotate(4deg); } to { opacity: 1; transform: none; } }
@keyframes report-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-14cqh) scale(.82); } }
@keyframes stamp { from { opacity: 0; transform: rotate(-8deg) scale(1.9); } to { opacity: 1; transform: rotate(-8deg) scale(1); } }