/* ===== scroll progress ===== --p (0..1) is written on by one scroll handler; everything below just reads it, so there is a single source of truth for "how far down". */ .bar-prog{ position:absolute;left:0;right:0;bottom:0;height:3px; background:var(--orange);transform-origin:left center; scale:var(--p,0) 1; } .sprog{ font-family:var(--mono);font-size:10.5px;letter-spacing:.12em; color:var(--cream-dim);font-variant-numeric:tabular-nums; min-width:4.4ch;text-align:right; } @media (max-width:600px){.sprog{display:none}} /* the skip pill fills as you go, so it carries progress too */ .skipto::before{ content:"";position:absolute;inset:0;border-radius:99px;pointer-events:none; background:var(--orange);opacity:.16; transform-origin:left center;scale:var(--p,0) 1; } .skipto > *{position:relative;z-index:1} /* what's next: a dashed outline says "not here yet" without an empty page */ .nx{ margin:clamp(16px,2.2vw,32px) var(--gut) 0; padding:clamp(28px,4.4vw,56px) 0; display:flex;flex-direction:column;align-items:flex-start; gap:clamp(11px,1.3vw,17px); } .nx-kick{ font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase; font-weight:500;color:var(--orange); } .nx-h{ font-family:var(--disp);font-weight:400;text-transform:uppercase; font-size:clamp(28px,4vw,54px);line-height:1;color:var(--ink); } .nx p{max-width:58ch;font-size:clamp(15px,1.15vw,18px);line-height:1.62;color:#403D36} .nx-meta{ font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--meta); } /* section CTA - the hero/footer lockup, sized for a section */ .sec-cta{ display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center; margin:0 auto clamp(30px,4.5vh,52px);padding-bottom:clamp(26px,3.5vh,40px); border-bottom:1px solid var(--line); } .sec-cta .kick{ font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--meta); } .sec-cta p{ font-family:var(--disp);font-weight:400;text-transform:uppercase; font-size:clamp(42px,6.6vw,104px);line-height:.96; } .sec-cta a{ position:relative;display:inline-block;text-decoration:none;color:var(--ink); transition:color .2s ease-out; } /* the rule sweeps in from the left - hard to miss without shouting */ .sec-cta a::after{ content:"";position:absolute;left:0;right:0;bottom:-.08em;height:6px;background:var(--orange); scale:0 1;transform-origin:0 50%;transition:scale .32s cubic-bezier(.22,1,.36,1); } .sec-cta a:hover{color:var(--orange)} .sec-cta a:hover::after{scale:1 1} /* Security dark mode: the "what's next" copy was written for a light card */ html[data-theme="dark"] .nx p{color:var(--pill-fg)}