/* One continuous geometric sequence. All figures use the original brand accent. */
.tangent-story {
  /* Extra viewport lengths spent drawing the first tangent; shared with JS. */
  --arrow-extra-travel: .7;
  --departure-opacity: 1;
  --possibility-opacity: 1;
  --capital-opacity: 1;
  --capital-mark: 1;
  --wash: 0;
  position: relative;
}
.story-stage { position: relative; isolation: isolate; background: var(--bg); }
.story-geometry, .story-wash { display: none; }
.story-panel { position: relative; overflow: hidden; min-height: 820px; padding: 128px var(--gutter) 95px; }
.story-panel > .section-kicker { position: relative; z-index: 2; }
.story-departure-copy { position: relative; z-index: 2; max-width: 55%; margin-top: 10vh; }
.story-departure-copy h2 { font-size: clamp(44px, 4.65vw, 76px); line-height: 1.07; letter-spacing: -.055em; }
.story-departure-copy em { color: var(--muted); font-style: normal; }
.story-departure-copy > p { margin-top: 35px; font-size: clamp(17px, 1.75vw, 28px); line-height: 1.5; letter-spacing: -.025em; }
.story-caption { position: absolute; left: var(--gutter); bottom: 42px; max-width: 300px; font-size: 10px; color: var(--muted); }
.story-ring { fill: none; stroke: color-mix(in srgb, var(--text), var(--inverse-text) calc(var(--arc-ink, 0) * 100%)); }
.story-ring.ring-1 { opacity: .58; }
.story-ring.ring-2 { opacity: .3; }
.static-rings { width: min(115vw, 1600px); position: absolute; right: -62%; bottom: -80%; pointer-events: none; }
.story-static-key { position: relative; z-index: 2; margin-top: 85px; font: 9px ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.story-static-key span { margin-inline: 18px; color: var(--tangent-accent); }
.story-annotation { font: 9px ui-monospace, 'SFMono-Regular', monospace; letter-spacing: .085em; text-transform: uppercase; fill: var(--muted); }
.story-annotation path { fill: none; stroke: var(--muted); stroke-width: .7; opacity: .65; }
.story-annotation .annotation-title { fill: var(--text); }
.annotation-shift .annotation-title { fill: var(--tangent-accent); }
.story-arrival-mark { color: color-mix(in srgb, color-mix(in srgb, var(--inverse-text), var(--tangent-accent) calc(var(--drop-tint, 0) * 100%)), var(--text) calc(var(--capital-ink, 0) * 100%)); }
.logo-triangle { fill: var(--tangent-accent); }
.story-possibility { background: var(--inverse); color: var(--inverse-text); }
.story-possibility .section-kicker { color: var(--inverse-muted); }
.story-possibility .kicker-rule { background: var(--inverse-muted); opacity: .4; }
.story-possibility h2 { position: relative; margin: 75px 0 30px 39%; max-width: 790px; font-size: clamp(35px, 3.5vw, 59px); line-height: 1.14; letter-spacing: -.05em; }
.possibility-muted { color: var(--inverse-muted); }
.keep-together { white-space: nowrap; }
.story-blog { margin-left: 39%; margin-top: 36px; }
.scroll-highlight { --mark: 1; display: inline-block; position: relative; vertical-align: baseline; padding: .025em .07em .055em; margin-left: -.07em; margin-top: .09em; line-height: 1.1; }
.highlight-base { display: block; }
.highlight-ink { position: absolute; inset: 0; padding: inherit; color: #101110; background: var(--tangent-accent); clip-path: inset(0 calc((1 - var(--mark)) * 100%) 0 0); }
.capital-highlight { --mark: var(--capital-mark); }
.tangent-story:not([data-story-mode=animated]) .scroll-highlight { --mark: 1; }
.story-capital { color: var(--text); }
.story-capital-heading { margin-top: 100px; max-width: 50%; }
.story-capital-heading h2 { font-size: clamp(65px, 7.4vw, 120px); letter-spacing: -.075em; line-height: .99; }
.story-capital-heading .scroll-highlight { line-height: 1.01; padding-top: .035em; padding-bottom: .085em; }
.story-capital-heading > .text-link { margin-top: 38px; min-width: 150px; border-bottom-color: currentColor; }
.story-capital-detail { position: absolute; top: 270px; right: var(--gutter); width: 34%; }
.story-capital-detail > .eyebrow { margin-top: 25px; color: var(--muted); font-size: 10px; }
.story-capital-detail .capital-number { font-size: clamp(104px, 11vw, 180px); }
.story-capital-detail .capital-copy { font-size: 15px; line-height: 1.8; margin-top: 35px; max-width: 400px; }
.story-navigation { display: none; }

/* Animation enhances the stacked, readable fallback. */
.tangent-story[data-story-mode=animated] { height: calc(1020svh + var(--arrow-extra-travel) * 100svh); --possibility-opacity: 0; --capital-opacity: 0; --capital-mark: 0; }
[data-story-mode=animated] .story-stage { position: sticky; top: 0; height: 100svh; min-height: 620px; overflow: hidden; }
[data-story-mode=animated] .story-wash { display: block; position: absolute; inset: 0; z-index: 0; background: var(--inverse); opacity: var(--wash); }
[data-story-mode=animated] .story-geometry { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.story-arrow [data-shaft], .story-arrow [data-head] { fill: var(--tangent-accent); stroke: none; }
.connection-arc { fill: none; stroke: var(--tangent-accent); stroke-linecap: round; }
.connection-junction { fill: var(--bg); stroke: var(--tangent-accent); stroke-width: 1.25; }
.connection-core { fill: var(--tangent-accent); }
[data-story-mode=animated] .story-panel { position: absolute; inset: 0; height: 100%; min-height: 0; background: transparent; z-index: 2; pointer-events: none; }
[data-story-mode=animated] .story-panel[aria-hidden=false] { pointer-events: auto; }
[data-story-mode=animated] .static-rings, [data-story-mode=animated] .story-static-key { display: none; }
[data-story-mode=animated] .story-departure { opacity: var(--departure-opacity); }
[data-story-mode=animated] .story-possibility { opacity: var(--possibility-opacity); transform: translateY(calc(var(--possibility-shift, 0) * 1px)); }
[data-story-mode=animated] .story-capital { opacity: var(--capital-opacity); }
.story-capital .section-kicker { color: var(--muted); }
.capital-kicker-label { display: inline-flex; align-items: center; gap: 20px; color: var(--muted); background: var(--bg); padding: 7px 9px; margin: -7px -9px; }
[data-story-mode=animated] .story-possibility h2 { margin-top: clamp(55px, 8vh, 110px); }
[data-story-mode=animated] .story-capital-heading { position: absolute; left: var(--gutter); top: 31%; margin: 0; width: 46%; color: var(--bg); }
[data-story-mode=animated] .story-capital-detail { top: 31%; }
[data-story-mode=animated] .story-navigation { display: flex; align-items: center; justify-content: space-between; position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: 29px; color: color-mix(in srgb, var(--muted), var(--inverse-muted) calc(var(--wash) * 100%)); }
.story-navigation a { min-height: 38px; display: flex; align-items: center; font-size: 10px; letter-spacing: .025em; padding: 0 12px; color: var(--text); background: var(--bg); border: 1px solid var(--line); }
.story-steps { display: flex; gap: 7px; }
.story-steps i { display: block; height: 3px; width: 19px; background: currentColor; opacity: .4; }
[data-chapter="1"] .story-steps i:nth-child(1), [data-chapter="2"] .story-steps i:nth-child(2), [data-chapter="3"] .story-steps i:nth-child(3) { background: var(--tangent-accent); opacity: 1; }
[data-story-mode=animated] .story-caption { bottom: 89px; }
[data-story-mode=animated][data-chapter="3"] .story-steps { color: var(--bg); }

@media (min-width: 1800px) {
  .story-departure-copy { max-width: 780px; }
  .story-possibility h2 { margin-left: 42%; }
  .story-blog { margin-left: 42%; }
}
@media (max-width: 1100px) and (min-width: 701px) {
  .story-departure-copy { max-width: 56%; }
  .story-departure-copy h2 { font-size: 5.1vw; }
  .story-possibility h2 { font-size: 3.8vw; margin-left: 38%; }
  .story-blog { margin-left: 38%; }
  .story-capital-heading h2 { font-size: 7.5vw; }
  .story-capital-detail { width: 33%; }
  .story-capital-detail .capital-copy { font-size: 14px; }
}
@media (max-width: 700px) {
  .tangent-story[data-story-mode=animated] { height: calc(920svh + var(--arrow-extra-travel) * 100svh); }
  .story-panel { min-height: 760px; padding: 111px var(--gutter) 65px; }
  .story-departure-copy { max-width: 94%; margin-top: 54px; }
  .story-departure-copy h2 { font-size: clamp(33px, 9.1vw, 49px); line-height: 1.07; letter-spacing: -.055em; }
  .story-departure-copy > p { margin-top: 23px; font-size: 16px; max-width: 260px; }
  .static-rings { width: 780px; right: -520px; bottom: -385px; }
  .story-annotation { font-size: 8px; letter-spacing: .045em; }
  .story-caption { font-size: 8px; max-width: 130px; bottom: 33px; line-height: 1.7; }
  [data-story-mode=animated] .story-caption { bottom: 84px; }
  .story-possibility h2 { margin: 70px 0 30px 21%; max-width: 100%; font-size: clamp(26px, 6.85vw, 40px); line-height: 1.13; letter-spacing: -.055em; }
  [data-story-mode=animated] .story-possibility h2 { margin-top: max(70px, 9vh); }
  .story-blog { margin-left: 21%; margin-top: 35px; }
  .story-blog .coming-soon { font-size: 10px; gap: 11px; flex-wrap: wrap; }
  .story-blog .coming-soon > span { font-size: 7px; }
  .capital-kicker-label { gap: 12px; }
  .story-capital-heading { margin-top: 50px; max-width: 100%; }
  .story-capital-heading h2 { font-size: clamp(49px, 14vw, 75px); }
  .story-capital-heading > .text-link { margin-top: 19px; min-width: 135px; font-size: 11px; }
  .story-capital-detail { position: relative; top: auto; right: auto; width: 100%; margin-top: 80px; }
  .story-capital-detail .capital-number { font-size: clamp(85px, 25vw, 120px); }
  .story-capital-detail .capital-number .percent { color: inherit; margin-top: 4px; }
  .story-capital-detail > .eyebrow { margin-top: 18px; font-size: 9px; }
  .story-capital-detail .capital-copy { font-size: 13px; line-height: 1.75; margin-top: 26px; }
  [data-story-mode=animated] .story-capital-heading { left: var(--gutter); top: 20%; width: auto; max-width: 100%; color: var(--text); }
  [data-story-mode=animated] .story-capital-detail { position: absolute; top: 57%; left: var(--gutter); right: var(--gutter); margin: 0; width: auto; color: var(--bg); }
  [data-story-mode=animated] .story-capital-detail > .eyebrow, [data-story-mode=animated] .story-capital-detail .capital-copy { color: inherit; }
  [data-story-mode=animated] .story-capital-detail .capital-copy { font-size: clamp(12px, 3.15vw, 14px); line-height: 1.7; margin-top: 22px; max-width: 360px; }
  [data-story-mode=animated] .story-navigation { bottom: 18px; font-size: 8px; }
  .story-navigation a { font-size: 8px; }
  .story-steps { gap: 5px; }
  .story-steps i { width: 14px; }
  [data-story-mode=animated][data-chapter="3"] .story-navigation { color: var(--bg); }
}
@media (max-width: 360px) {
  .story-departure-copy { margin-top: 42px; }
  .story-departure-copy h2 { font-size: 32px; }
  .story-departure-copy > p { font-size: 14px; }
  .story-possibility h2 { font-size: 25px; margin-left: 20%; }
  .story-blog { margin-left: 20%; }
  .story-capital-heading h2 { font-size: 49px; }
  .story-capital-detail .capital-copy { font-size: 12px; }
  [data-story-mode=animated] .story-capital-heading { top: 21%; }
  [data-story-mode=animated] .story-capital-detail > .eyebrow { margin-top: 14px; }
  [data-story-mode=animated] .story-capital-detail .capital-copy { margin-top: 16px; }
}
@media (max-height: 780px) and (min-width: 701px) {
  .story-panel { padding-top: 112px; }
  .story-departure-copy { margin-top: 55px; }
  .story-departure-copy h2 { font-size: clamp(40px, 4.2vw, 65px); }
  .story-possibility h2 { font-size: clamp(32px, 3.5vw, 52px); }
  [data-story-mode=animated] .story-possibility h2 { margin-top: 55px; }
  .story-blog { margin-top: 23px; }
  .story-capital-detail .capital-copy { margin-top: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .tangent-story[data-story-mode=animated] { height: auto; }
  [data-story-mode=animated] .story-stage { position: relative; height: auto; overflow: visible; }
  [data-story-mode=animated] .story-panel { position: relative; height: auto; min-height: 760px; opacity: 1; transform: none; }
  .highlight-ink { clip-path: none; }
}
@media print {
  .tangent-story[data-story-mode=animated] { height: auto; }
  .story-geometry, .story-wash, .story-navigation, .static-rings { display: none !important; }
  [data-story-mode=animated] .story-stage { position: relative; height: auto; overflow: visible; }
  [data-story-mode=animated] .story-panel { position: relative; height: auto; min-height: 0; padding-block: 30px; opacity: 1; transform: none; break-inside: avoid; }
  .story-departure-copy { max-width: 100%; margin-top: 30px; }
  .story-possibility, .story-capital { color: #111; background: #fff; }
  .story-possibility h2, .story-blog { margin-left: 0; }
  [data-story-mode=animated] .story-capital-heading, [data-story-mode=animated] .story-capital-detail { position: relative; top: auto; left: auto; right: auto; color: #111; width: 100%; max-width: none; margin: 25px 0; }
  .highlight-ink { display: none; }
}

/* Scroll-paced quotations; the logo holds until its drop into chapter 03. */
.story-thesis-link { margin-top: 34px; }
.coming-soon[aria-disabled=true] { cursor: default; }
.possibility-content { margin: clamp(45px, 6vh, 85px) 0 0 39%; max-width: 790px; }
.story-possibility .possibility-content h2 { margin: 0; max-width: 740px; font-size: clamp(28px, 2.8vw, 45px); line-height: 1.13; }
.conviction-highlight { --mark: var(--conviction-mark, 1); white-space: nowrap; }
.quote-technology { display: inline-block; position: relative; padding: 5px 9px; font-size: 13px; line-height: 1.2; letter-spacing: .035em; color: #bec2ba; background: #181a16; }
.technology-ink { position: absolute; inset: 0; padding: inherit; color: var(--tangent-accent); clip-path: inset(0 calc((1 - var(--technology-reveal, 1)) * 100%) 0 0); }
.tangent-story:not([data-story-mode=animated]) .technology-ink { clip-path: none; }
.paradigm-quotes { margin-top: 42px; }
.paradigm-quote { padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--inverse-muted), transparent 65%); }
.paradigm-quote + .paradigm-quote { margin-top: 45px; }
.quote-era { display: flex; align-items: center; gap: 12px; font: 10px ui-monospace, monospace; letter-spacing: .055em; text-transform: uppercase; color: var(--inverse-muted); }
.paradigm-quote blockquote { margin: 20px 0 22px; font-size: clamp(25px, 2.35vw, 37px); line-height: 1.26; letter-spacing: -.04em; }
.paradigm-quote figcaption { font-size: 11px; line-height: 1.6; color: var(--inverse-muted); }
.possibility-content .story-blog { margin: 30px 0 0; }
.quote-progress { display: none; }
.static-tangent-symbol { position: absolute; top: 195px; left: 22%; width: 94px; }
[data-story-mode=animated] .static-tangent-symbol { display: none; }
[data-story-mode=animated] .paradigm-quotes { display: grid; }
[data-story-mode=animated] .paradigm-quote { grid-area: 1 / 1; margin: 0; opacity: var(--quote-opacity, 0); transform: translateY(var(--quote-shift, 12px)); }
[data-story-mode=animated] .quote-progress { display: flex; gap: 7px; margin-top: 27px; }
.quote-progress i { height: 2px; width: 25px; background: var(--inverse-muted); opacity: .25; }
.quote-progress .is-current { opacity: 1; background: var(--tangent-accent); }
[data-story-mode=animated] .possibility-content .story-blog { opacity: var(--thinking-opacity, 0); }
.story-capital-detail .capital-intro { font-size: clamp(20px, 2vw, 30px); line-height: 1.2; letter-spacing: -.035em; margin-top: 28px; max-width: 350px; }
.story-capital-detail .capital-intro + .capital-copy { margin-top: 18px; }
@media (max-width: 700px) {
  .story-thesis-link { margin-top: 24px; }
  .possibility-content { margin: 48px 0 0; max-width: none; }
  .story-possibility .possibility-content h2 { margin-left: 23%; font-size: clamp(24px, 6.4vw, 34px); line-height: 1.12; }
  .paradigm-quotes { margin-top: 38px; }
  .paradigm-quote { padding-top: 20px; }
  .paradigm-quote blockquote { font-size: clamp(23px, 6.15vw, 31px); margin: 18px 0; }
  .quote-era { font-size: 9px; gap: 10px; }
  .quote-technology { font-size: 11px; padding: 5px 8px; }
  .paradigm-quote figcaption { font-size: 10px; }
  .possibility-content .story-blog { margin-top: 25px; }
  .static-tangent-symbol { width: 47px; top: 160px; left: var(--gutter); }
  .story-capital-detail .capital-intro { font-size: 21px; margin-top: 18px; }
  [data-story-mode=animated] .story-capital-detail { top: 52%; }
  [data-story-mode=animated] .story-capital-detail .capital-intro + .capital-copy { margin-top: 12px; }
}
@media (max-height: 740px) {
  .possibility-content { margin-top: 35px; }
  .paradigm-quotes { margin-top: 24px; }
  .story-possibility .possibility-content h2 { font-size: clamp(23px, 2.6vw, 34px); }
  .paradigm-quote blockquote { font-size: clamp(20px, 2.2vw, 29px); margin-block: 14px; }
  [data-story-mode=animated] .quote-progress { margin-top: 18px; }
  .possibility-content .story-blog { margin-top: 18px; }
  .story-capital-detail .capital-number { font-size: clamp(74px, 10vw, 132px); }
  .story-capital-detail .capital-intro { margin-top: 18px; font-size: 22px; }
}
@media (max-height: 740px) and (max-width: 700px) {
  .story-possibility .possibility-content h2 { font-size: 23px; }
  .paradigm-quote blockquote { font-size: 21px; }
  .story-capital-detail .capital-intro { font-size: 19px; margin-top: 14px; }
  [data-story-mode=animated] .story-capital-detail > .eyebrow { margin-top: 10px; }
}
@media print {
  .possibility-content { margin: 25px 0; }
  [data-story-mode=animated] .paradigm-quotes { display: block; }
  [data-story-mode=animated] .paradigm-quote { opacity: 1; transform: none; margin-top: 28px; }
  [data-story-mode=animated] .possibility-content .story-blog { opacity: 1; }
  [data-story-mode=animated] .quote-progress { display: none; }
}

@media print { .quote-technology { color: #111; background: transparent; } .technology-ink { display: none; } }