/* On Point Finances — "The Summit Is Halfway" One mountain world shared across every page. Each page sits at its own elevation band (see data-band on ), so the site reads as one continuous climb. Storyboard: content/website/opfinances-storyboard.md */ :root{ --rock:#1B2027; --snow:#EDEFF1; --glacier:#6E8CA0; --pine:#2E4034; --alpenglow:#D9663F; color-scheme:dark; --ground:#0D1319; --ink:#E6EBEF; --ink-dim:#A2B0BC; --ink-faint:#6E7F8D; --panel:rgba(19,24,32,.72); --panel-line:rgba(160,180,200,.16); --field-solid:#171E27; --accent:var(--alpenglow); --accent-ink:#12181E; --sky-0a:#080D13; --sky-0b:#18202A; --sky-1a:#141D2A; --sky-1b:#33405A; --sky-2a:#243040; --sky-2b:#D9663F; --sky-3a:#1E2A36; --sky-3b:#8A5A48; --sky-4a:#0A1017; --sky-4b:#1C2A26; --ridge-far:#3A4A5C; --ridge-mid:#26313E; --ridge-near:#161D26; --ridge-fore:#0C1116; --sun:#FFD9BC; --font-display:Georgia,"Iowan Old Style","Palatino Linotype","Times New Roman",serif; --font-body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --font-mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,"Liberation Mono",monospace; --measure:34rem; --pad:clamp(1.25rem,5vw,3rem); } @media (prefers-color-scheme: light){ :root{ color-scheme:light; --ground:#E9EDF0; --ink:#1A222B; --ink-dim:#4A5A68; --ink-faint:#7B8A97; --panel:rgba(255,255,255,.74); --panel-line:rgba(30,50,70,.14); --field-solid:#E4E9ED; --accent:#B4502C; --accent-ink:#FFFFFF; --sky-0a:#B9CBD9; --sky-0b:#E6ECF0; --sky-1a:#9FBBD2; --sky-1b:#E4EDF2; --sky-2a:#E3B197; --sky-2b:#F6E8DC; --sky-3a:#D3BCAD; --sky-3b:#F0E9E3; --sky-4a:#BCCAC3; --sky-4b:#E6EBE7; --ridge-far:#A8BAC8; --ridge-mid:#8598A8; --ridge-near:#5F7183; --ridge-fore:#3E4E5D; --sun:#FFF3E4; } } :root[data-theme="dark"]{ color-scheme:dark; --ground:#0D1319; --ink:#E6EBEF; --ink-dim:#A2B0BC; --ink-faint:#6E7F8D; --panel:rgba(19,24,32,.72); --panel-line:rgba(160,180,200,.16); --field-solid:#171E27; --accent:#D9663F; --accent-ink:#12181E; --sky-0a:#080D13; --sky-0b:#18202A; --sky-1a:#141D2A; --sky-1b:#33405A; --sky-2a:#243040; --sky-2b:#D9663F; --sky-3a:#1E2A36; --sky-3b:#8A5A48; --sky-4a:#0A1017; --sky-4b:#1C2A26; --ridge-far:#3A4A5C; --ridge-mid:#26313E; --ridge-near:#161D26; --ridge-fore:#0C1116; --sun:#FFD9BC; } :root[data-theme="light"]{ color-scheme:light; --ground:#E9EDF0; --ink:#1A222B; --ink-dim:#4A5A68; --ink-faint:#7B8A97; --panel:rgba(255,255,255,.74); --panel-line:rgba(30,50,70,.14); --field-solid:#E4E9ED; --accent:#B4502C; --accent-ink:#FFFFFF; --sky-0a:#B9CBD9; --sky-0b:#E6ECF0; --sky-1a:#9FBBD2; --sky-1b:#E4EDF2; --sky-2a:#E3B197; --sky-2b:#F6E8DC; --sky-3a:#D3BCAD; --sky-3b:#F0E9E3; --sky-4a:#BCCAC3; --sky-4b:#E6EBE7; --ridge-far:#A8BAC8; --ridge-mid:#8598A8; --ridge-near:#5F7183; --ridge-fore:#3E4E5D; --sun:#FFF3E4; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--ground); color:var(--ink); font-family:var(--font-body); font-size:18px; line-height:1.65; -webkit-font-smoothing:antialiased; } #world{position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block} .veil{position:fixed; inset:0; z-index:1; pointer-events:none; background:radial-gradient(120% 80% at 50% 0%,transparent 40%,rgba(0,0,0,.28) 100%)} @media (prefers-color-scheme: light){ .veil{background:radial-gradient(120% 80% at 50% 0%,transparent 45%,rgba(40,60,80,.14) 100%)} } :root[data-theme="light"] .veil{ background:radial-gradient(120% 80% at 50% 0%,transparent 45%,rgba(40,60,80,.14) 100%)} :root[data-theme="dark"] .veil{ background:radial-gradient(120% 80% at 50% 0%,transparent 40%,rgba(0,0,0,.28) 100%)} main{position:relative; z-index:2} .skip{position:absolute; left:-9999px} .skip:focus{left:var(--pad); top:.6rem; z-index:9; background:var(--accent); color:var(--accent-ink); padding:.7rem 1rem; border-radius:2px} /* ---- chrome ---- */ .topbar{ position:fixed; top:0; left:0; right:0; z-index:5; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; padding:.75rem var(--pad); background:linear-gradient(to bottom,rgba(0,0,0,.42),transparent); } @media (prefers-color-scheme: light){ .topbar{background:linear-gradient(to bottom,rgba(255,255,255,.7),transparent)} } :root[data-theme="light"] .topbar{background:linear-gradient(to bottom,rgba(255,255,255,.7),transparent)} :root[data-theme="dark"] .topbar{background:linear-gradient(to bottom,rgba(0,0,0,.42),transparent)} .brand{font-family:var(--font-display); font-size:1.05rem; color:var(--ink); text-decoration:none; margin-right:auto} .brand span{color:var(--accent)} nav{display:flex; gap:.2rem; flex-wrap:wrap; align-items:center} nav a{ display:inline-flex; align-items:center; min-height:44px; padding:0 .7rem; font:500 .88rem/1 var(--font-body); color:var(--ink-dim); text-decoration:none; border-radius:2px; } nav a:hover{color:var(--ink)} nav a[aria-current="page"]{color:var(--accent)} .pill{ display:inline-flex; align-items:center; min-height:48px; font:600 .82rem/1 var(--font-body); letter-spacing:.04em; text-transform:uppercase; background:var(--accent); color:var(--accent-ink); text-decoration:none; padding:0 1.15rem; border-radius:2px; white-space:nowrap; } .pill:hover{filter:brightness(1.08)} .hud{ position:fixed; right:var(--pad); bottom:1.1rem; z-index:5; font:500 .72rem/1.5 var(--font-mono); letter-spacing:.08em; color:var(--ink-faint); text-align:right; text-transform:uppercase; font-variant-numeric:tabular-nums; pointer-events:none; } .hud b{display:block; font-size:1.1rem; color:var(--ink-dim); font-weight:500} /* ---- chapters ---- */ section{min-height:100svh; display:flex; align-items:center; padding:7.5rem var(--pad) 5rem} section.short{min-height:auto; padding-block:4rem} .wrap{width:100%; max-width:var(--measure)} .wide{max-width:56rem} .eyebrow{font:600 .74rem/1 var(--font-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:0 0 1.15rem} h1{font-family:var(--font-display); font-weight:400; text-wrap:balance; font-size:clamp(2.6rem,8vw,5rem); line-height:1.04; letter-spacing:-.02em; margin:0 0 1.3rem} h2{font-family:var(--font-display); font-weight:400; text-wrap:balance; font-size:clamp(1.9rem,5vw,3rem); line-height:1.12; letter-spacing:-.015em; margin:0 0 1.15rem} h3{font-family:var(--font-display); font-weight:400; font-size:1.3rem; line-height:1.25; margin:0 0 .5rem} p{margin:0 0 1.1rem; color:var(--ink-dim); max-width:34rem} .lead{font-size:1.2rem; color:var(--ink)} .panel{background:var(--panel); border:1px solid var(--panel-line); border-radius:3px; padding:clamp(1.4rem,3.5vw,2.2rem); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)} .quote{font-family:var(--font-display); font-size:clamp(1.5rem,3.6vw,2.1rem); line-height:1.3; color:var(--ink); border-left:2px solid var(--accent); padding-left:1.2rem; margin:2rem 0 0; max-width:30rem} .grid{display:grid; gap:1rem; grid-template-columns:1fr; margin-top:1.75rem} @media(min-width:720px){ .grid{grid-template-columns:1fr 1fr; gap:1.15rem} } .card{background:var(--panel); border:1px solid var(--panel-line); border-top:2px solid var(--accent); border-radius:3px; padding:1.35rem; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)} .card p{font-size:.97rem; margin:0; color:var(--ink-dim)} .steps{list-style:none; margin:1.75rem 0 0; padding:0; display:grid; gap:1.4rem} .steps li{display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start} .steps .n{font:500 .78rem/1.9 var(--font-mono); color:var(--accent); letter-spacing:.08em} .steps p{margin:.25rem 0 0; font-size:.98rem} .note{font-size:.95rem; color:var(--ink-faint); border-top:1px solid var(--panel-line); padding-top:1.1rem; margin-top:1.75rem} .faq{margin-top:1.75rem; display:grid; gap:.6rem} details{background:var(--panel); border:1px solid var(--panel-line); border-radius:3px; padding:1rem 1.15rem} summary{cursor:pointer; font-family:var(--font-display); font-size:1.1rem; color:var(--ink); min-height:32px} details p{margin:.8rem 0 0; font-size:.97rem} .rise{opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1)} .rise.in{opacity:1; transform:none} /* ---- form ---- */ form{display:grid; gap:.9rem; margin-top:1.5rem} .row{display:grid; gap:.9rem; grid-template-columns:1fr} @media(min-width:620px){ .row{grid-template-columns:1fr 1fr} } label{display:block; font:600 .76rem/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:.45rem} input,select,textarea{width:100%; font:inherit; font-size:1rem; color:var(--ink); background:rgba(127,150,170,.10); border:1px solid var(--panel-line); border-radius:2px; padding:.85rem .9rem; min-height:52px} /* The dropdown list of a