/* Site v3 refinements, September 24th, 2026. Loaded after style.css and editorial.css.
   Same colors, type, images and layout as version 45; this layer only tunes rhythm, type details,
   states and motion. Spacing uses a 4/8 px scale. */
:root{
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:40px;--s8:48px;--s9:64px;--s10:72px;--s11:96px;
  --section-y:72px;--section-fade:96px;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --dur-1:160ms;--dur-2:240ms;--dur-3:500ms;
  --h2:clamp(36px,3.9vw,56px);
  --focus-ring:#111111;
}
@media(max-width:1100px){:root{--section-y:64px}}
@media(max-width:620px){:root{--section-y:56px;--section-fade:64px}}

/* Type details: balanced headings, pretty paragraphs, tabular figures, calmer tracking on large capitals. */
h1,h2,h3,h4,summary{text-wrap:balance}
p,li,dd{text-wrap:pretty}
body{font-kerning:normal;font-optical-sizing:auto;caret-color:var(--orange)}
.hero h1{letter-spacing:.008em;line-height:1.08}
.planning-intro h2,.portfolio-copy h2,.credit-heading h2,.family-copy h2,.about-copy h2,.research h2,.conversation h2,.t71-teaser h2,.t71-reading h2,.t71-chapter-head h2,.t71-methods h2{font-size:var(--h2);line-height:1.08;letter-spacing:.012em}
.button,.text-link,.desktop-nav a,.life-tabs button,.booking-title,.email-option>span{letter-spacing:.06em}
.protocol-value,.protocol-year,.live-value,.live-number,.protocol-y,.protocol-x,.protocol-reference b,.wheel-center,.live-checked{font-variant-numeric:tabular-nums lining-nums}
a{text-decoration-thickness:1px}
/* Comfortable measure: about 50 to 65 characters for body copy. */
.portfolio-copy>p:not(.label),.family-copy>p:not(.label),.about-copy>p:not(.label),.conversation-intro>p:not(.label){max-width:28em}
.life-panels p{max-width:28em}
.hero-content>p{max-width:22em;text-wrap:balance}

/* Vertical rhythm: one section padding, more space above headings than below them. */
.planning,.portfolio,.about,.research,.conversation,.t71-teaser{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.bitcoin-definition{padding-top:var(--section-y);padding-bottom:var(--s9)}
.credit{padding-top:calc(var(--section-y) + var(--section-fade));padding-bottom:calc(var(--section-y) + var(--section-fade))}
.footer{padding-top:calc(var(--s8) + var(--section-fade))}
.planning-intro{margin-bottom:var(--s8)}
.portfolio-copy>p:not(.label),.family-copy>p:nth-of-type(1),.about-copy>p,.conversation-intro>p:not(.label){margin-top:var(--s5)}
.about-copy>p+p{margin-top:var(--s4)}
.portfolio-copy .text-link,.family-copy .text-link,.about-copy .text-link{margin-top:var(--s5)}
.credit-mechanism{margin-top:var(--s8)}
.research{gap:var(--s6)}
.dictionary-context{margin-top:var(--s8)}
.supply-figure{margin-top:var(--s8);padding-top:var(--s7)}
.protocol-charts{margin-top:var(--s7);gap:var(--s8)}
.protocol-controls{margin-top:var(--s6);padding-top:var(--s5)}
.supply-note{margin:var(--s5) 0 var(--s2)}

/* Smoother joins between light and navy bands (eased stops instead of a straight blend). */
.credit{background:linear-gradient(to bottom,var(--page-surface) 0,color-mix(in oklab,var(--ink) 10%,var(--page-surface)) calc(var(--section-fade)*.2),color-mix(in oklab,var(--ink) 35%,var(--page-surface)) calc(var(--section-fade)*.4),color-mix(in oklab,var(--ink) 65%,var(--page-surface)) calc(var(--section-fade)*.6),color-mix(in oklab,var(--ink) 90%,var(--page-surface)) calc(var(--section-fade)*.8),var(--ink) var(--section-fade),var(--ink) calc(100% - var(--section-fade)),color-mix(in oklab,var(--ink) 90%,var(--page-surface)) calc(100% - var(--section-fade)*.8),color-mix(in oklab,var(--ink) 65%,var(--page-surface)) calc(100% - var(--section-fade)*.6),color-mix(in oklab,var(--ink) 35%,var(--page-surface)) calc(100% - var(--section-fade)*.4),color-mix(in oklab,var(--ink) 10%,var(--page-surface)) calc(100% - var(--section-fade)*.2),var(--page-surface) 100%)}
.footer{background:linear-gradient(to bottom,var(--page-surface) 0,color-mix(in oklab,var(--night) 10%,var(--page-surface)) calc(var(--section-fade)*.2),color-mix(in oklab,var(--night) 35%,var(--page-surface)) calc(var(--section-fade)*.4),color-mix(in oklab,var(--night) 65%,var(--page-surface)) calc(var(--section-fade)*.6),color-mix(in oklab,var(--night) 90%,var(--page-surface)) calc(var(--section-fade)*.8),var(--night) var(--section-fade))}
.hero:before{height:var(--section-fade);background:linear-gradient(to bottom,transparent 0,color-mix(in oklab,var(--page-surface) 10%,transparent) 20%,color-mix(in oklab,var(--page-surface) 35%,transparent) 40%,color-mix(in oklab,var(--page-surface) 65%,transparent) 60%,color-mix(in oklab,var(--page-surface) 90%,transparent) 80%,var(--page-surface) 100%)}

/* Header: solid navy once scrolled, with a soft shadow, and the current section marked. */
.header{transition:padding var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
.header.is-scrolled{background:#111111;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:#ffffff14;box-shadow:0 1px 0 #ffffff0a,0 14px 32px -18px #030303cc}
.desktop-nav a{transition:color var(--dur-1) var(--ease-out)}
.desktop-nav a:after{transition:transform var(--dur-2) var(--ease-out)}
.desktop-nav a[aria-current]:after{transform:scaleX(1)}
.desktop-nav a[aria-current=page]{color:#fff}
.client-login{transition:opacity var(--dur-1) var(--ease-out)}
@media(hover:hover) and (pointer:fine){.client-login:hover{opacity:.78}}

/* Hero: restrained depth. A soft light behind the folio, a quiet top vignette, a gentle parallax (at most 12 px). */
.hero{background:linear-gradient(180deg,#0c0c0c99 0,#0c0c0c00 24%),radial-gradient(60% 70% at 72% 46%,#1b1b1b 0%,#151515 42%,#111111 74%),#111111}
.hero-art{translate:0 var(--hero-shift,0px);will-change:translate}
.hero .button:not(.button-light){box-shadow:0 10px 24px -14px #f5991f80}
@media(max-width:620px){.hero h1{font-size:clamp(32px,9.2vw,55px);letter-spacing:.004em}.booking-title{letter-spacing:0;gap:12px}}

/* Buttons and links: quick, quiet feedback on hover, press and keyboard focus. */
.button{transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.button>svg,.button>span{transition:transform var(--dur-1) var(--ease-out)}
.button:hover{transform:none}
@media(hover:hover) and (pointer:fine){
  .button:hover{background:#f5991f;transform:translateY(-1px);box-shadow:0 12px 26px -14px #f5991fcc}
  .button:hover>span{transform:translate(2px,-2px)}
  .button-light:hover,.header .header-cta:hover{background:#fff;border-color:#fff;color:var(--ink);box-shadow:none}
  .header.is-scrolled .header-cta:hover{background:#f5991f;border-color:#f5991f}
  .text-link:hover{border-bottom-color:var(--orange)}
  .life-tabs button:hover{color:var(--ink)}
  .life-tabs button:not([aria-selected=true]):hover:after{transform:scaleX(.16)}
}
.button:active{transform:translateY(0) scale(.98);box-shadow:none;transition-duration:80ms}
.text-link{transition:border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.life-tabs button{transition:color var(--dur-1) var(--ease-out)}
.life-tabs button:after{transition:transform var(--dur-2) var(--ease-out)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,[role=button]:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:1px}
.header,.hero,.credit,.footer,#mobile-menu,.section-rail,.mobile-jump,.hero-1971{--focus-ring:#f5991f}
.button:focus-visible{outline-offset:4px}
.life-tabs button:focus-visible{outline-offset:-2px}
.allocation:focus-visible{outline:none}
summary>span{display:inline-block;transition:transform var(--dur-2) var(--ease-out)}
.credit-details summary>span{display:inline-block}
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  details::details-content{height:0;overflow:clip;transition:height var(--dur-2) var(--ease-out),content-visibility var(--dur-2) allow-discrete}
  details[open]::details-content{height:auto}
}

/* Planning tabs: panels share one cell and crossfade in about 240 ms; the link sits with the copy. */
.life-stage{min-height:0;padding:var(--s7) 0 var(--s2)}
.life-visual{min-height:250px}
.js .life-panels{display:grid;align-content:center}
.js .life-panels>[role=tabpanel]{grid-area:1/1;opacity:1;visibility:visible;transform:none;transition:opacity var(--dur-2) var(--ease-out) 60ms,transform var(--dur-2) var(--ease-out) 60ms,visibility 0s linear 0s}
.js .life-panels>[role=tabpanel][hidden]{display:block!important;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out),visibility 0s linear var(--dur-1)}
.life-panels [role=tabpanel]:not([hidden]){animation:none}
.life-link{justify-self:start;margin-top:var(--s6)}
.js .life-link{grid-area:2/1}
.life-coin.turn img,.life-stage[data-topic=family] .life-coin.turn img{animation-duration:450ms}
.planning .section-bottom{display:none}
@media(max-width:620px){.life-stage{padding-top:var(--s5)}.life-visual{min-height:190px}.life-link{margin-top:var(--s5)}}

/* Investments: the explanation and fine print align with the legend rhythm. */
.portfolio-legend button{transition:color var(--dur-1) var(--ease-out)}
@media(hover:hover) and (pointer:fine){.portfolio-legend button:hover{color:#3d5a73}}
.allocation{transition:stroke-width var(--dur-2) var(--ease-out),opacity var(--dur-2) var(--ease-out)}

/* Research: fuller rows, a clear hover and an orange rule on the row you point at. */
.research-list{gap:0 var(--s6)}
.research-list>a,.research-list>a:first-child{padding:var(--s5) var(--s7) var(--s6) 0;transition:box-shadow var(--dur-2) var(--ease-out)}
.research-list h3{transition:color var(--dur-1) var(--ease-out)}
.research-list b{bottom:var(--s6)}
@media(hover:hover) and (pointer:fine){.research-list>a:hover{box-shadow:inset 0 2px 0 var(--orange)}}
.research-list>details{margin-top:0}
.planning-guides{padding-top:var(--s6);gap:var(--s4) var(--s6)}
.planning-guides a{transition:color var(--dur-1) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.planning-guides a>span{transition:transform var(--dur-1) var(--ease-out)}
@media(hover:hover) and (pointer:fine){.planning-guides a:hover{box-shadow:inset 0 -2px 0 var(--orange)}.planning-guides a:hover>span{transform:translate(2px,-2px)}}

/* Timeline sliders: thin track, orange progress, a thumb that is easy to grab. */
.protocol-controls input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;height:44px;margin:var(--s2) 0;--pct:50%}
.protocol-controls input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,#f5991f 0,#f5991f var(--pct),#d2d2d2 var(--pct),#d2d2d2 100%)}
.protocol-controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;margin-top:-10px;border-radius:50%;background:#f5991f;border:4px solid #fffefa;box-shadow:0 0 0 1px #f5991f,0 3px 10px -2px #11111155;transition:transform var(--dur-1) var(--ease-out)}
.protocol-controls input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12)}
.protocol-controls input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:#d2d2d2}
.protocol-controls input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:#f5991f}
.protocol-controls input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#f5991f;border:4px solid #fffefa;box-shadow:0 0 0 1px #f5991f,0 3px 10px -2px #11111155}
.protocol-controls input[type=range]:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.protocol-reset{transition:color var(--dur-1) var(--ease-out)}
@media(hover:hover) and (pointer:fine){.protocol-reset:hover{color:#f5991f}}
/* Supply charts finish drawing within about a second. */
.protocol-entered .protocol-line{animation-duration:900ms}
.protocol-entered .protocol-fill{animation:protocol-fill-in 500ms 300ms both}
.protocol-entered .protocol-dot{animation:protocol-dot-in 300ms 650ms both}

/* Booking: a designed card instead of an empty box; the calendar loads on request. */
.booking{border:1px solid #e1e1e1;box-shadow:0 1px 2px #1111110d,0 16px 40px -20px #11111133}
#calendly-embed.booking-body{height:auto}
.booking-card{padding:var(--s7) var(--s7) var(--s6)}
.booking-meta{display:flex;align-items:center;gap:var(--s4);padding-bottom:var(--s5);border-bottom:1px solid var(--line)}
.booking-meta svg{flex:none;color:var(--ink)}
.booking-length{font-size:25px;font-weight:500;line-height:1.3;color:var(--ink)}
.booking-with{font-size:17px;line-height:1.5}
.booking-heading{font-size:16px;font-weight:600;line-height:1.4;letter-spacing:.075em;text-transform:uppercase;margin:var(--s6) 0 var(--s2)}
.booking-points{list-style:none;margin:0;padding:0}
.booking-points li{position:relative;padding:var(--s3) 0 var(--s3) var(--s6);border-bottom:1px solid #e9e9e9;font-size:19px;line-height:1.5;color:var(--ink)}
.booking-points li:before{content:'';position:absolute;left:0;top:26px;width:14px;height:2px;background:var(--orange)}
.booking-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s6);margin-top:var(--s6)}
.booking-direct{font-size:17px;text-decoration:underline;text-underline-offset:5px;transition:color var(--dur-1) var(--ease-out)}
@media(hover:hover) and (pointer:fine){.booking-direct:hover{color:#f5991f}}
.booking-privacy{margin-top:var(--s5);font-size:15px;line-height:1.6;color:#5f5f5f}
.booking-privacy a{text-decoration:underline;text-underline-offset:4px}
.calendar-frame{height:720px}
.calendar-frame iframe{width:100%;height:100%;border:0}
.calendar-loading{padding:var(--s7) var(--s6);font-size:17px}
.booking .calendar-fallback{border-top:1px solid var(--line);margin:0}
@media(max-width:620px){.booking-card{padding:var(--s6) var(--s5) var(--s5)}.booking-length{font-size:23px}.booking-points li{font-size:18px}.booking-actions .button{width:100%;justify-content:space-between}.calendar-frame{height:820px}}

/* Footer navigation, including the new Since 1971 page. */
.footer-nav{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);padding-bottom:var(--s6);margin-bottom:var(--s6);border-bottom:1px solid #ffffff1f}
.footer-nav a{font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#e6e6e6;transition:color var(--dur-1) var(--ease-out)}
.footer-nav a[aria-current]{color:var(--orange)}
@media(hover:hover) and (pointer:fine){.footer-nav a:hover,.legal-links a:hover,.back-top:hover{color:var(--orange)}}
@media(max-width:620px){.footer-nav{gap:var(--s4) var(--s5)}}

/* Section rail: the label appears on hover and focus with a short fade. */
.section-rail a>span{transition:opacity var(--dur-1) var(--ease-out)}

/* Intro curtain: at most once per session (entrance.js) and under a second. */
.entrance-active .brand-entrance{animation-duration:900ms}
.brand-entrance img{animation-duration:700ms}
.brand-entrance>span{animation-duration:500ms}
.entrance-active .hero-content{animation:entrance-content 450ms 420ms var(--ease-out) both}
.entrance-active .header{animation:entrance-nav 300ms 480ms var(--ease-out) both}

/* Scroll reveals replace the version 45 scene animations (which dimmed visible copy before fading it back). */
.motion-scene.motion-entered .scene-copy,.dictionary-entry.motion-entered .dictionary-bitcoin,.dictionary-entry.motion-entered .dictionary-meaning,.life-experience.motion-entered .life-visual,.life-experience.motion-entered .life-panels,.portfolio.motion-entered .wheel-center,.portfolio.motion-entered .portfolio-legend button,.credit-mechanism.motion-entered .credit-step,.family-section.motion-entered .family-image,.about.motion-entered .portrait,.research.motion-entered .research-list>a,.conversation.motion-entered .booking-title,.reveal.entered{animation:none}
.credit-mechanism.motion-entered .flow-connector{animation-duration:600ms}
.life-experience.motion-entered .life-lines path{animation-duration:700ms}
.js .rv{opacity:0;transform:translate3d(0,16px,0)}
.js .rv.is-in{opacity:1;transform:none;transition:opacity var(--dur-3) var(--ease-out),transform 600ms var(--ease-out);transition-delay:calc(var(--rv-i,0) * 60ms)}
@media(prefers-reduced-motion:reduce){
  .js .rv,.js .rv.is-in{opacity:1!important;transform:none!important;transition:none!important}
  .hero-art{translate:none}
  .js .life-panels>[role=tabpanel],.js .life-panels>[role=tabpanel][hidden]{transform:none;transition:opacity 1ms}
  details::details-content{transition:none}
}
@media print{.js .rv{opacity:1;transform:none}.brand-entrance,.section-rail,.mobile-jump{display:none!important}}

/* Guide and privacy footers: the legal paragraphs inherited the dark body color on navy (about 1.7:1). Now #cbcbcb, as on the home footer. */
.guide-footer p{color:#cbcbcb}
.guide-footer>span{color:#cbcbcb}

/* Metric-matched fallback while Jost loads from Google Fonts, so text barely moves when it swaps in. */
@font-face{font-family:'Jost Fallback';src:local('Arial'),local('ArialMT'),local('Helvetica'),local('Liberation Sans');size-adjust:96%;ascent-override:104%;descent-override:30%;line-gap-override:0%}
body,h1,h2,h3,.button,.text-link,.life-tabs button,.desktop-nav a,.plan-art text{font-family:'Jost','Jost Fallback',Arial,sans-serif}

/* The dictionary card sizes to its content instead of a fixed 550 px (it left an empty band under the definition). */
.dictionary-entry{min-height:0;padding:64px 64px}
@media(max-width:800px){.dictionary-entry{padding:56px 32px}}
@media(max-width:620px){.dictionary-entry{padding:40px 24px 32px}}

/* Without JavaScript: a solid header (it cannot switch to its scrolled state) and spaced, stacked planning topics. */
html:not(.js) .header{background:#111111}
html:not(.js) .life-panels>[role=tabpanel]+[role=tabpanel]{margin-top:var(--s6)}

/* Four header links (with Since 1971) fit on one line: labels never wrap, spacing tightens a little on
   narrower desktops, and the menu button takes over below 1,200 px (version 45 switched at 1,100 px with three links). */
.desktop-nav a,.header-cta,.client-login span{white-space:nowrap}
@media(max-width:1360px){.header{gap:20px}.desktop-nav{gap:20px}.desktop-nav a{letter-spacing:.04em}.client-login{padding-inline:16px}}
@media(min-width:1200px) and (max-width:1300px){.header .brand img{width:180px}.desktop-nav{gap:18px}.header-actions{gap:12px}}
@media(max-width:1199px){.desktop-nav{display:none}.menu-toggle{display:block}.header.is-scrolled .header-cta{display:flex}}
/* Brand colors v4 (Charlie, October 3rd, 2026) */
:root{--ink:#111111;--night:#111111;--stone:#e9e3d8;--slate:#3d5a73;--orange-text:#f5991f}
/* Warm stone sections */
.bitcoin-definition{background:var(--stone)}
.credit{background:linear-gradient(to bottom,var(--page-surface) 0,var(--stone) var(--section-fade),var(--stone) calc(100% - var(--section-fade)),var(--page-surface) 100%);color:var(--ink)}
.credit p,.credit li,.credit summary,.credit small,.credit strong,.credit dt,.credit dd,.credit .credit-disclosure,.credit .issuer-note,.credit-heading>p,.credit-step p,.credit-bottom p,.credit-details,.credit-details *{color:#2b2b2b!important}
.credit h2,.credit h3,.credit h4{color:var(--ink)!important}
.credit-heading h2 em{color:var(--orange-text)!important}
.credit .button,.credit .button *{color:var(--ink)!important}
.credit *{border-color:#0000001f!important}
.credit svg{color:var(--slate)}
.credit .income-mark{color:var(--orange-text)}
.guide-help{background:var(--stone)}
/* Slate accents: links, labels, icons, chart lines */
.text-link{color:var(--slate);border-bottom-color:var(--orange)}
.text-link:hover{color:var(--ink)}
.portfolio-legend svg{color:var(--slate)}
.other-allocation{stroke:var(--slate)}
.research-list>a>span,.wheel-center>span{color:var(--slate)}
.t71-card .protocol-fill{fill:var(--slate)}
/* Orange signature: a short rule above each section heading, orange link underlines */
:is(.t71-teaser-copy,.planning-intro,.portfolio-copy,.credit-heading,.family-copy,.about-copy,.research-heading,.conversation-intro)>h2:before{content:'';display:block;width:48px;height:4px;background:var(--orange);margin:0 0 22px}
.life-panels p a{text-decoration-color:var(--orange)}

/* October 5th: match the keyboard ring to the v4 light credit section. */
.credit{--focus-ring:#111111}
/* Keep footer links easy to tap without changing their type or grouping. */
.footer-nav a{display:inline-flex;align-items:center;min-height:44px}