:root{font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);--forest:#1c3b2e;--violet:#6a4c9a;--ink:#1c3b2e;--muted:#606e65;--paper:#f7f9f7;--surface:#efedf3;--line:#d5dcd6;--purple-text:#6a4c9a;--pad:clamp(22px,5vw,80px);color-scheme:light}
:root[data-theme=dark]{--ink:#eef2ef;--muted:#b6c1ba;--paper:#111b16;--surface:#24232c;--line:#3c4b41;--purple-text:#c2a7ec;color-scheme:dark}
*{box-sizing:border-box;--cut:14px;--octagon:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut))}
html,body{margin:0;height:100%;width:100%;overflow:hidden}body{height:100dvh;background:var(--paper);color:var(--ink)}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--purple-text);outline-offset:4px}button{border:0}p{font-size:16px;line-height:1.65;margin:0 0 20px}header{position:fixed;top:24px;right:var(--pad);z-index:50}#toggle,.theme-button,.rail-buttons button{--cut:31.2%;width:44px;height:44px;clip-path:var(--octagon);background:var(--surface);display:flex;align-items:center;justify-content:center}#toggle{flex-direction:column;gap:5px}#toggle span{width:16px;height:1px;background:currentColor;transition:transform .2s}#toggle[aria-expanded=true] span:first-child{transform:translateY(3px) rotate(45deg)}#toggle[aria-expanded=true] span:last-child{transform:translateY(-3px) rotate(-45deg)}#toggle:hover,.theme-button[aria-pressed=true],.rail-buttons button:hover{background:var(--violet);color:white}
#menu{position:fixed;inset:0;background:var(--paper);z-index:40;padding:clamp(70px,12vh,130px) var(--pad) 40px}#menu[hidden]{display:none}.menu-inner{max-width:1000px;margin:auto;height:100%;display:flex;flex-direction:column;justify-content:center;gap:32px}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--purple-text);margin:0 0 12px;line-height:1.4}nav{display:grid;grid-template-columns:1fr 1fr;gap:0 9vw}nav a{font-size:clamp(25px,3.3vw,44px);letter-spacing:-.035em;line-height:1.25;padding:15px 0;border-bottom:1px solid var(--line)}nav a span{font-size:12px;letter-spacing:0;color:var(--muted);display:inline-block;width:35px;vertical-align:middle}nav a:hover,nav a[aria-current=page]{color:var(--purple-text)}.menu-bottom{display:flex;align-items:center;gap:24px;color:var(--muted);font-size:14px}.theme-controls{display:flex;gap:8px}.theme-button svg,.rail-buttons svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square}
main{position:absolute;inset:86px 0 68px;outline:none!important}.section{height:100%;padding:10px var(--pad) 0;display:flex;flex-direction:column;gap:22px}.section-head{flex-shrink:0;max-width:calc(100% - 30px)}h1{font-size:clamp(30px,3.7vw,54px);line-height:1.1;letter-spacing:-.045em;font-weight:400;margin:0}.section-lead{color:var(--muted);margin:12px 0 0;max-width:800px}.rail{position:relative;display:flex;align-items:stretch;gap:32px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;touch-action:pan-x;flex:1;min-height:0}.rail::-webkit-scrollbar{display:none}.card{flex:0 0 calc((100% - 32px)/2);min-width:0;scroll-snap-align:start;scroll-snap-stop:always;padding:24px 26px 14px 0;border-top:1px solid var(--line)}.card-content{height:100%;column-width:var(--col-width,360px);column-fill:auto;column-gap:40px}.card-content>*{break-inside:avoid}.number{display:block;font-size:11px;letter-spacing:.1em;color:var(--purple-text);margin-bottom:20px;line-height:1.5}h2{font-size:clamp(26px,2.6vw,38px);font-weight:400;line-height:1.15;letter-spacing:-.035em;margin:0 0 22px;break-after:avoid}.card p{color:var(--muted)}.card strong{color:var(--ink);font-weight:600}.card ul{padding:0;list-style:none;margin:0 0 22px}.card li{font-size:16px;line-height:1.6;margin:0 0 14px}.evidence{font-size:14px;border-left:2px solid var(--purple-text);padding-left:16px}.text-link{font-size:15px;line-height:1.5;border:0;border-bottom:1px solid var(--purple-text);padding:4px 0;background:transparent;color:var(--ink);display:inline-block}.text-link:hover{color:var(--purple-text)}.pill{display:inline-flex;align-items:center;justify-content:center;padding:14px 24px;min-height:48px;clip-path:var(--octagon);background:var(--violet);color:white;font-size:14px;line-height:1.4}.pill.secondary{background:var(--forest);color:white}:root[data-theme=dark] .pill.secondary{background:#e4eae6;color:var(--forest)}.pill:hover{filter:brightness(1.15)}.hero-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px}.rail-controls{display:flex;justify-content:space-between;align-items:center;flex-shrink:0;min-height:40px;gap:16px}.rail-caption{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.rail-buttons{display:flex;gap:8px}.rail-buttons[hidden]{display:none}.rail-buttons button{width:40px;height:40px}.rail-buttons button:disabled{opacity:.25;cursor:default}.signature{position:absolute;bottom:16px;left:var(--pad)}.signature a{display:flex;align-items:center;gap:10px}.signature img{width:25px;height:25px}.signature span{font-size:10px;letter-spacing:.02em}:root[data-theme=dark] .signature img,:root[data-theme=dark] .hero-logo{filter:brightness(0) invert(1)}.home-section{padding-top:0}.home-rail .card{flex-basis:100%;padding:clamp(20px,5vh,65px) clamp(0px,4vw,70px);border-top:0}.home-rail .card-content{max-width:100%;}.home-rail .card:not(.hero-card) .card-content{max-width:780px;margin:auto}.hero-brand{text-align:center}.hero-logo{width:clamp(70px,12vh,125px);height:clamp(70px,12vh,125px);margin:0 auto 16px;display:block}.wordmark{font-size:clamp(42px,5vw,68px);letter-spacing:-.065em}.wordmark span{font-weight:700}.hero-tagline{font-size:12px;letter-spacing:.06em;color:var(--purple-text)!important;margin:16px 0 24px}.hero-intro{max-width:690px;margin:auto;text-align:center}.hero-intro h2{font-size:25px;margin-bottom:12px}.hero-intro p{margin:0 auto 12px;max-width:640px}.hero-intro .hero-actions{justify-content:center;margin-top:22px}.email{font-size:clamp(20px,2.7vw,34px);letter-spacing:-.04em;color:var(--ink);border-bottom:1px solid var(--purple-text)}.copy-status{min-height:24px;font-size:14px;margin-top:14px}.tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex-shrink:0}.tabs button{white-space:nowrap;clip-path:var(--octagon);padding:12px 18px;font-size:14px;background:var(--surface);color:var(--ink);min-height:44px}.tabs button[aria-selected=true]{background:var(--violet);color:white}::selection{background:var(--violet);color:white}
@media(max-width:800px){.section{gap:18px}.card{flex-basis:100%;padding-right:0}.rail{gap:24px}.section-lead{font-size:15px}.home-rail .card{padding:24px 0}header{top:20px}main{top:80px}.home-rail .card:not(.hero-card) .card-content{max-width:100%}}
@media(max-width:600px){#menu{padding:85px var(--pad) 28px}.menu-inner{gap:24px;justify-content:center}nav{grid-template-columns:1fr;gap:0}nav a{font-size:25px;padding:9px 0;line-height:1.2}nav a span{width:29px;font-size:10px}.menu-bottom{margin-top:0}.eyebrow{font-size:10px}.section-head{max-width:100%}h1{font-size:32px}.section-lead{line-height:1.5;margin-top:10px}h2{font-size:27px;margin-bottom:18px}.number{margin-bottom:16px}.card p,.card li{font-size:16px;line-height:1.6}.card .evidence{font-size:14px}.card{padding-top:20px}.home-rail .card{padding-top:8px}.hero-logo{width:78px;height:78px;margin-bottom:12px}.wordmark{font-size:45px}.hero-tagline{font-size:10px;margin:12px 0 22px}.hero-intro h2{font-size:22px}.hero-intro p{font-size:15px;line-height:1.55}.hero-actions{gap:10px}.hero-intro .hero-actions{flex-wrap:nowrap}.hero-actions .pill{font-size:12px;padding:12px 17px}.tabs{gap:6px}.tabs button{font-size:13px;padding:10px 16px}.rail-caption{font-size:11px}.signature span{font-size:9px}}
@media(max-height:720px){main{top:70px;bottom:57px}.section{gap:14px}.section-lead{margin-top:8px}.signature{bottom:12px}.card{padding-top:18px}.hero-logo{width:64px;height:64px;margin-bottom:10px}.wordmark{font-size:40px}.hero-tagline{margin:10px 0 16px}.hero-intro p{font-size:14px;line-height:1.5}.hero-intro h2{font-size:22px}.hero-intro .hero-actions{margin-top:16px}.home-rail .card{padding-top:8px;padding-bottom:0}h1{font-size:30px}.card h2{font-size:26px}.number{margin-bottom:14px}}
@media(max-height:600px){#menu{padding-top:65px;padding-bottom:20px}.menu-inner{gap:16px}nav{grid-template-columns:1fr 1fr;gap:0 24px}nav a{font-size:22px;padding:9px 0}.menu-bottom{gap:16px}.section-head .section-lead{display:none}.section-head .eyebrow{margin-bottom:8px}.hero-card .card-content{column-width:var(--col-width,320px)}.hero-brand{break-inside:avoid}.hero-intro{break-inside:auto}.hero-intro p{break-inside:avoid}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* Preserve space for all eight menu entries and the theme controls. */
@media(max-width:600px) and (min-height:601px){nav a{font-size:24px;padding:8px 0}}
.home-rail .card:not(.hero-card) .card-content{max-width:none}
/* One viewport and one index entry for every content block. */
.rail{gap:32px;scroll-padding-inline:0}
.rail>.card,.home-rail>.card{flex:0 0 100%;width:100%;min-width:100%;max-width:100%;overflow:hidden;padding-inline:clamp(0px,4vw,64px)}
.card-content{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--purple-text) transparent;overscroll-behavior-x:contain;padding-bottom:12px}
.card-content.has-overflow{scroll-snap-type:none}
.card-content:not(.has-overflow){scrollbar-width:none}
/* Every content link is a recognizable eight-sided action. */
.card a,.card button.text-link,.pill,.tabs button,nav a{border:0;clip-path:var(--octagon);background:var(--violet);color:#fff;display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:13px 22px;font-size:14px;line-height:1.45;letter-spacing:0;text-align:center;text-decoration:none;max-width:100%;overflow-wrap:anywhere}
.card a:hover,.card button.text-link:hover{color:#fff;filter:brightness(1.15)}
.hero-actions>:nth-child(odd){background:var(--violet);color:#fff}
.hero-actions>:nth-child(even),:root[data-theme=dark] .hero-actions>:nth-child(even){background:var(--forest);color:#fff}
.card .email{font-size:clamp(16px,2vw,24px)}
nav{gap:12px 24px}nav a{justify-content:flex-start;font-size:clamp(22px,2.8vw,34px);padding:12px 24px}nav a span{color:inherit;opacity:.75}nav a:nth-child(even){background:var(--forest)}nav a:hover,nav a[aria-current=page]{color:#fff}nav a[aria-current=page]{box-shadow:inset 0 0 0 3px var(--purple-text)}
.tabs button:nth-child(odd),.theme-button:nth-child(odd),.rail-buttons button:nth-child(odd){background:var(--violet);color:white}
.tabs button:nth-child(even),.theme-button:nth-child(even),.rail-buttons button:nth-child(even){background:var(--forest);color:white}
.tabs button[aria-selected=true],.theme-button[aria-pressed=true]{box-shadow:inset 0 0 0 3px var(--purple-text);font-weight:700}
.tabs button[aria-selected=true]::after{content:'✓';font-size:13px;margin-left:8px}
@media(max-width:600px){.rail>.card,.home-rail>.card{padding-inline:0}nav{gap:8px}nav a{font-size:22px;min-height:43px;padding:8px 22px}.card a,.card button.text-link{padding:12px 18px;font-size:14px}.hero-intro .hero-actions{flex-wrap:wrap}}
@media(max-height:650px){#menu nav{grid-template-columns:1fr 1fr;gap:8px 16px}#menu nav a{font-size:20px;min-height:40px;padding:8px 20px}}
.tabs button[aria-selected=true],.theme-button[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--paper),inset 0 0 0 4px var(--purple-text)}
/* Navigation uses one calm base color; purple indicates the selected tab. */
nav a:nth-child(n),.tabs button:nth-child(n){background:var(--forest);color:#fff}
.tabs button[aria-selected=true]{background:var(--violet)}

/* The demo is a single rail card with its own vertical reading area. */
.octofall-card .octofall-content{columns:auto;height:100%;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;touch-action:pan-y;scrollbar-width:thin;padding:0 10px 20px 0}
.octofall-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(24px,4vw,64px);align-items:start;max-width:1050px;margin:auto}
.octofall-copy{padding-top:18px;max-width:460px}.octofall-copy .octofall-note{font-size:12px;margin-top:20px}
.octofall-frame{display:block;width:100%;max-width:420px;height:650px;border:1px solid var(--line);border-radius:12px;background:var(--paper);justify-self:center}
@media(max-width:800px){.octofall-layout{grid-template-columns:minmax(0,1fr);gap:18px}.octofall-copy{padding-top:0;max-width:none}.octofall-copy h2{font-size:25px;margin-bottom:12px}.octofall-copy p{font-size:14px;line-height:1.5;margin-bottom:12px}.octofall-copy .number{margin-bottom:10px}.octofall-copy .octofall-note{display:none}}

body.admin-bar{height:calc(100dvh - 32px)}@media(max-width:782px){body.admin-bar{height:calc(100dvh - 46px)}}
