/* ============================================================
raghavbuilds.in — shared design system
Theme: minimal monochrome + kinetic type (Swiss/editorial).
One accent colour (red) used only for interactive/live moments —
everything else is paper, ink, and grays.
============================================================ */
/* Fonts are loaded from in each page, NOT with @import here.
An @import inside a stylesheet serialises two round trips: the browser
must fetch and parse style.css before it even discovers the font URL.
Measured cost of that chain: ~200ms of render-blocking time. */
:root{
--ink:#111110;
--ink2:#ffffff;
--ink3:#edebe3;
--line:#11111017;
--line2:#1111100a;
--paper:#f5f4ee;
--text:#232220;
--text-dim:#5c584f;
--text-dim2:#5f5a4e;
--gold-1:#d9b483;
--gold-2:#a9762e;
--gold-3:#6e4718;
--gold:#a9762e;
--gold-grad: linear-gradient(120deg,var(--gold-1),var(--gold-2) 55%,var(--gold-3));
/* Buttons need their own, shorter ramp. The decorative --gold-grad spans
from a pale gold down to a deep brown; white text fails on its light
end (measured 1.5–2.1:1) and dark text fails on its dark end. Clamping
the button to gold-1..gold-2 with dark ink passes AA right across it. */
--btn-grad: linear-gradient(120deg,var(--gold-1),var(--gold-2));
--on-gold:#191307;
--gold-ink:#8a5c1e;
--silver-1:#7d7f88;
--silver-2:#4b4d55;
--silver-3:#2a2b30;
--silver-grad: linear-gradient(120deg,var(--silver-1),var(--silver-2) 55%,var(--silver-3));
--on-accent:#f5f4ee;
--radius:14px;
--font-sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
--font-mono:'IBM Plex Mono','SFMono-Regular',Menlo,Consolas,monospace;
--font-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
--ease:cubic-bezier(.16,.8,.24,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;background:var(--paper);color:var(--text);
font-family:var(--font-sans);font-size:15px;line-height:1.6;
-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:600;color:var(--ink)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;background:none;border:none;color:inherit;cursor:pointer}
::selection{background:var(--gold-2);color:var(--on-accent)}
/* ---------- visible keyboard focus (WCAG 2.4.7) ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,
[tabindex]:focus-visible,.tilt:focus-visible{
outline:2px solid var(--gold-ink);outline-offset:3px;border-radius:4px}
[data-theme="dark"] a:focus-visible,[data-theme="dark"] button:focus-visible,
[data-theme="dark"] input:focus-visible,[data-theme="dark"] [tabindex]:focus-visible{
outline-color:var(--gold-1)}
/* one source of truth for the page width — the floating nav docks to the
same edge, so nothing looks half an inch off from the content */
:root{--wrap:min(1400px,94vw)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
@media (max-width:720px){.wrap{padding:0 20px}}
.gold-text{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mono{font-family:var(--font-mono)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ---------- cursor ----------
The custom dot-and-ring cursor was removed: a replaced cursor always
trails the real pointer by a frame, which reads as lag rather than
polish, and it costs people their OS cursor settings. Native pointer,
with a proper pointer affordance on anything interactive. */
a,button,.hoverable,[role="button"]{cursor:pointer}
#cur,#curRing{display:none !important}
/* ---------- RB mark (injected by main.js) — gold/silver lockup image ---------- */
.rb-mark{display:block}
.rb-mark img{display:block;width:100%;height:auto;user-select:none;filter:drop-shadow(0 1px 2px #00000018)}
#nav .brand .rb-mark{width:30px}
.f-brand .rb-mark{width:36px}
.hero .rb-mark{width:92px;margin:0 auto 26px}
.about-teaser .frame .rb-mark{width:128px;opacity:.95}
#boot .rb-mark{width:132px}
/* ---------- illustrative icons (injected by main.js) ---------- */
.ico{display:inline-flex;color:var(--ink)}
.ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico svg .fillc{fill:currentColor;stroke:none}
.ico svg .accent{fill:var(--gold-2);stroke:none}
.ico svg .edge{opacity:.45}
.ico svg .node{transform-box:fill-box;transform-origin:center;animation:nodePulse 2.6s ease-in-out infinite}
@keyframes nodePulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}
.feat:hover .ico svg,.svc-card:hover .ico svg{filter:drop-shadow(0 0 6px var(--gold-2))}
/* ---------- nav ---------- */
#nav{position:fixed;top:0;left:0;right:0;z-index:200;
display:flex;align-items:center;justify-content:space-between;
padding:20px 32px;transition:background .3s,padding .3s,border-color .3s;
border-bottom:1px solid transparent}
#nav.scrolled{background:#f5f4eed9;backdrop-filter:blur(10px);padding:14px 32px;border-color:var(--line)}
#nav .brand{display:flex;align-items:center;gap:10px}
/* Brand lockup in the nav and footer is the WORDMARK, not the monogram.
The ornate RB mark loses its silver B below ~48px and turns to mush, so
it only appears where it has room (hero, boot, about frame, portrait
slot, favicon). Typeset here in the brand's gold/silver two-tone so it
still reads as the logo, and stays crisp at any size. */
#nav .brand .t{display:inline-block;font-family:var(--font-serif);font-weight:600;font-size:20px;
text-transform:uppercase;letter-spacing:.14em;
background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
#nav .brand .t i{display:inline-block;margin-left:.34em;font-style:normal;font-family:var(--font-serif);font-weight:600;font-size:20px;
letter-spacing:.14em;
background:var(--silver-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
#navlinks{display:flex;align-items:center;gap:34px}
#navlinks a{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);
position:relative;padding:4px 0;transition:color .2s}
#navlinks a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--gold-2);transition:right .25s var(--ease)}
#navlinks a:hover,#navlinks a.on{color:var(--ink)}
#navlinks a:hover::after,#navlinks a.on::after{right:0}
#navcta{border:1px solid var(--ink);padding:9px 18px;border-radius:100px;font-family:var(--font-mono);font-size:12px;
letter-spacing:.1em;text-transform:uppercase;color:var(--ink);transition:.25s}
#navcta:hover{background:var(--gold-2);color:var(--on-gold);border-color:var(--gold-2)}
#navBurger{display:none;width:34px;height:34px;position:relative;z-index:210}
#navBurger span{position:absolute;left:6px;right:6px;height:1px;background:var(--ink);transition:.3s}
#navBurger span:nth-child(1){top:13px}
#navBurger span:nth-child(2){top:20px}
#navBurger span:nth-child(3){top:27px}
#navBurger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#navBurger.on span:nth-child(2){opacity:0}
#navBurger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
#mobilenav{position:fixed;inset:0;z-index:195;background:#f5f4eef7;backdrop-filter:blur(6px);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
opacity:0;pointer-events:none;transition:opacity .35s}
#mobilenav.on{opacity:1;pointer-events:auto}
#mobilenav a{font-family:var(--font-sans);font-weight:700;font-size:30px;color:var(--ink)}
#mobilenav a i{font-style:normal;font-family:var(--font-mono);font-weight:500;color:var(--gold-ink)}
@media (max-width:860px){
#navlinks,#navcta{display:none}
#navBurger{display:block}
}
/* ---------- section header pattern ---------- */
.kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:14px;display:block}
.h-xl{font-family:var(--font-sans);font-weight:800;font-size:clamp(34px,6vw,62px);line-height:1.02;letter-spacing:-.02em;color:var(--ink)}
.h-lg{font-family:var(--font-sans);font-weight:800;font-size:clamp(28px,4.4vw,44px);line-height:1.06;letter-spacing:-.02em;color:var(--ink)}
.lede{font-size:17px;color:var(--text-dim);max-width:560px;line-height:1.7;margin-top:16px}
.section{padding:110px 0}
@media (max-width:720px){.section{padding:76px 0}}
.section-head{margin-bottom:56px}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:100px;
font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;transition:.25s;border:1px solid transparent}
.btn-gold{background:var(--btn-grad);color:var(--on-gold);font-weight:700}
.btn-gold:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-line{border-color:var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn svg{width:14px;height:14px}
/* #5 — an email address in all-caps is harder to scan than the short
verb-phrase labels this uppercase treatment was designed for; drop
the transform for this one case without touching every other .btn */
[data-site-email]{text-transform:none}
/* ---------- reveal on scroll ----------
The Framer entrance: things don't just fade, they resolve — rising a
little, settling from a slight scale, and coming out of a soft blur.
The blur is what does most of the work; it reads as focus pulling in
rather than as an element sliding around. */
.reveal{opacity:0;transform:translateY(26px) scale(.985);filter:blur(7px);
transition:opacity .85s var(--ease),transform .85s var(--ease),filter .7s var(--ease)}
.reveal.in{opacity:1;transform:none;filter:blur(0)}
.reveal-stagger > *{opacity:0;transform:translateY(24px) scale(.99);filter:blur(6px);
transition:opacity .75s var(--ease),transform .75s var(--ease),filter .6s var(--ease)}
.reveal-stagger.in > *{opacity:1;transform:none;filter:blur(0)}
.reveal-stagger.in > *:nth-child(1){transition-delay:.04s}
.reveal-stagger.in > *:nth-child(2){transition-delay:.10s}
.reveal-stagger.in > *:nth-child(3){transition-delay:.16s}
.reveal-stagger.in > *:nth-child(4){transition-delay:.22s}
.reveal-stagger.in > *:nth-child(5){transition-delay:.28s}
.reveal-stagger.in > *:nth-child(6){transition-delay:.34s}
.reveal-stagger.in > *:nth-child(7){transition-delay:.40s}
.reveal-stagger.in > *:nth-child(8){transition-delay:.46s}
.reveal-stagger.in > *:nth-child(9){transition-delay:.52s}
@media (prefers-reduced-motion:reduce){
.reveal,.reveal-stagger > *{opacity:1;transform:none;filter:none;transition:none}
}
/* ---------- cycling word (the Quora pattern) ----------
A fixed lead-in with one word swapping under it. The mask clips the
outgoing word as it leaves and the incoming one as it arrives, and the
mask itself animates its width so the line re-centres around whatever
word is showing rather than jumping. */
.rotator{display:flex;align-items:baseline;justify-content:center;gap:.4em;
flex-wrap:wrap;position:relative;z-index:2;margin-top:26px;
font-family:var(--font-serif);font-size:clamp(19px,2.4vw,27px);font-weight:500;color:var(--text)}
/* Baseline, solved structurally rather than with a fudge factor.
An inline-block whose overflow is not 'visible' takes its baseline from
its BOTTOM MARGIN EDGE, not from the text inside — so align-items:baseline
was lining the box's bottom up with the sentence and pushing the word
above the line. Compensating with vertical-align means hand-tuning a
number that breaks the moment the font size changes.
Instead: clip-path does the masking (it is purely visual and does NOT
affect baseline), and an in-flow invisible ghost gives the box a real
text baseline to align on. The result is correct at any size. */
.rot-mask{position:relative;display:inline-block;vertical-align:baseline;
font-size:1.24em;font-weight:700;line-height:1.3;
clip-path:inset(0 0 0 0);
transition:width .55s var(--ease)}
.rot-ghost{visibility:hidden;font-style:italic;font-weight:700;white-space:nowrap;
display:inline-block}
.rot-mask b{position:absolute;left:0;top:0;white-space:nowrap;font-weight:700;font-style:italic;
line-height:1.3;
background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
opacity:0;transform:translateY(100%);
transition:opacity .5s var(--ease),transform .5s var(--ease)}
.rot-mask b.on{opacity:1;transform:none}
.rot-mask b.out{opacity:0;transform:translateY(-100%)}
@media (prefers-reduced-motion:reduce){
.rot-mask{width:auto !important;clip-path:none}
.rot-mask b{position:static;opacity:1;transform:none;transition:none}
.rot-mask b:not(:first-child){display:none}
}
/* ---------- scroll parallax ----------
Elements drift at a fraction of scroll speed. Subtle by design: enough
to give the page depth, never enough to notice as an effect. */
[data-parallax]{will-change:transform}
@media (prefers-reduced-motion:reduce){[data-parallax]{transform:none !important}}
/* ---------- kinetic type (split text) ---------- */
.split-line{overflow:hidden;display:block}
.split-word{display:inline-block;transform:translateY(110%);transition:transform .8s var(--ease)}
.split-line.in .split-word{transform:none}
.magnetic{display:inline-block;will-change:transform;transition:transform .35s cubic-bezier(.2,.9,.3,1.3)}
/* ---------- marquee ticker ---------- */
.marquee{overflow:hidden;white-space:nowrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
padding:18px 0}
.marquee-track{display:inline-flex;align-items:center;gap:40px;animation:marqueeScroll 24s linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-family:var(--font-mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);
display:inline-flex;align-items:center;gap:40px}
.marquee-track span b{font-weight:500;color:var(--ink)}
.marquee-track span::after{content:"—";color:var(--gold-ink);margin-left:40px}
@keyframes marqueeScroll{to{transform:translateX(-50%)}}
/* ---------- chips / tags ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chips span{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);
border:1px solid var(--line);padding:6px 12px;border-radius:100px}
.catline{display:flex;flex-wrap:wrap;gap:0;align-items:center;justify-content:center;
font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim)}
.catline b{color:var(--gold-ink);font-weight:500;margin:0 16px}
.catline b:first-child{margin-left:0}
.catline i{font-style:normal;color:var(--text-dim2);margin:0 16px}
/* ---------- cards: feature (home "what I do") ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:1px;background:var(--line);
border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.feat-grid a:nth-child(1){grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column;justify-content:center}
.feat-grid a:nth-child(3){grid-column:span 2}
@media (max-width:900px){
.feat-grid{grid-template-columns:repeat(2,1fr)}
.feat-grid a:nth-child(1){grid-row:auto}
}
@media (max-width:520px){
.feat-grid{grid-template-columns:1fr}
.feat-grid a:nth-child(1),.feat-grid a:nth-child(3){grid-column:auto}
}
.feat{background:var(--ink2);padding:36px 28px;transition:background .3s;position:relative;overflow:hidden}
.feat:hover{background:var(--ink3)}
.feat>*:not(.cover){position:relative;z-index:1}
.feat .ico{width:30px;height:30px;margin-bottom:22px}
.feat .n{font-family:var(--font-mono);color:var(--gold-ink);font-size:12px;margin-bottom:22px;display:block;letter-spacing:.04em}
.feat h3{font-size:20px;margin-bottom:10px;color:var(--ink)}
.feat p{color:var(--text-dim);font-size:14px;line-height:1.65}
.feat .go{margin-top:18px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink);
display:flex;align-items:center;gap:6px;opacity:0;transform:translateX(-6px);transition:.25s}
.feat:hover .go{opacity:1;transform:none}
/* ---------- generic card grid ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid{grid-template-columns:1fr}}
.card{background:var(--ink2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
transition:border-color .3s,transform .3s}
.card:hover{border-color:#a9762e44}
.card.tilt,.vcard.tilt,.feat.tilt,.svc-card.tilt{will-change:transform;transition:transform .35s cubic-bezier(.2,.8,.2,1);position:relative}
.tilt::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:1;
background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),#a9762e16,transparent 60%);
opacity:0;transition:opacity .3s}
.tilt:hover::after{opacity:1}
.glow{position:relative}
.glow::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
background:linear-gradient(120deg,var(--gold-1),transparent 45%,var(--gold-2) 78%,transparent);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
opacity:0;transition:opacity .35s}
.glow:hover::before{opacity:1}
/* ---------- website build card ---------- */
.wshot{position:relative;aspect-ratio:16/10;background:#eeece4;background-size:cover;background-position:top center;
display:flex;align-items:center;justify-content:center;overflow:hidden}
.wshot-img{position:absolute;inset:0;background-size:cover;background-position:top center}
.wframe{position:absolute;inset:0;width:400%;height:400%;transform:scale(.25);transform-origin:top left;
border:0;background:#fff;pointer-events:none;transition:filter .4s var(--ease)}
.wcard:hover .wframe{filter:saturate(1.05)}
.wchrome{position:absolute;top:0;left:0;right:0;height:22px;z-index:1;background:#e6e3d9;display:flex;align-items:center;gap:5px;padding:0 10px}
.wchrome span{width:6px;height:6px;border-radius:50%;background:#11111020}
.wshot .wplaceholder{width:40px;height:40px;opacity:.4}
.wshot .wplaceholder svg{width:100%;height:100%;fill:none;stroke:var(--gold-2);stroke-width:1.4}
/* animated stand-in for a site with no screenshot yet — the same live logo-mark
drawn on the logos page, reused here so an empty card still feels built
rather than blank. Centered over the full wshot slot like .lmark on cards. */
.wshot .wmark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.wshot .wmark svg{width:72px;height:72px}
/* the real rendered logo-animation clip for this client, looping muted as
the card's cover instead of a static shot or the drawn stand-in mark */
.wshot-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.wmeta{padding:22px 24px 24px}
.wtop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.wtop h3{font-size:17px;color:var(--ink)}
.wtop .wyear{font-size:12px;color:var(--text-dim2);font-family:var(--font-mono)}
.wlive{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
padding:4px 10px;border-radius:100px;border:1px solid var(--line);color:var(--text-dim);margin-bottom:14px}
.wlive.on{color:#178a4c;border-color:#178a4c33;background:#178a4c0d}
.wlive.on::before{content:"";width:6px;height:6px;border-radius:50%;background:#178a4c;box-shadow:0 0 8px #178a4c55}
.wlive.preview{color:var(--gold-ink);border-color:#a9762e33;background:#a9762e0d}
.wlive.preview::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold-2);box-shadow:0 0 8px #a9762e55}
.wmeta p{font-size:13px;color:var(--text-dim);line-height:1.6;margin-bottom:14px}
.wmeta .chips{margin-bottom:10px}
.wmeta .btn{margin-top:14px;padding:10px 20px;font-size:12px}
/* ---------- website cards: click-to-expand "miniplayer" ----------
Clicking a card (anywhere but a real link/button) grows it into a
floating panel above its siblings via a FLIP transform -- animating a
single `transform` is what keeps this smooth, rather than animating
top/left/width/height directly. A hidden ghost div holds the card's
old grid slot open so neighbours don't reflow to fill the gap. The
enlarged card swaps its static poster/video for a live iframe of the
real build (the actual url if live, the showcase file otherwise) --
an actual "miniplayer", not just a bigger screenshot. */
.wcard-ghost{visibility:hidden}
.wexpand-backdrop{position:fixed;inset:0;z-index:500;opacity:0;pointer-events:none;
background:#09090b70;backdrop-filter:blur(5px);transition:opacity .3s ease}
.wexpand-backdrop.on{opacity:1;pointer-events:auto}
body.wexpand-open{overflow:hidden}
#sitesGrid.grid-dim .wcard:not(.wcard-expanded){opacity:.3;filter:saturate(.6) blur(.5px);
transform:scale(.97) !important;pointer-events:none}
.wcard{transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s ease,filter .35s ease}
.wcard.wcard-expanded{position:fixed;z-index:520;margin:0;cursor:default;
box-shadow:0 40px 100px -24px #000000a0,0 0 0 1px var(--line);
overflow-y:auto;overflow-x:hidden;max-height:86vh}
.wclose{position:absolute;top:12px;right:12px;z-index:3;width:34px;height:34px;border-radius:50%;
display:none;align-items:center;justify-content:center;background:#000000b0;color:#fff;
border:1px solid #ffffff2e;cursor:pointer;backdrop-filter:blur(4px);transition:background .2s}
.wclose:hover{background:#000000d8}
.wclose svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none}
.wcard-expanded .wclose{display:flex}
.wcard-expanded .wshot{aspect-ratio:auto;height:clamp(220px,42vh,440px)}
.wframe-live{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.wshot-live .wchrome{z-index:2}
.wcard-expanded .wmeta{padding:22px 26px 26px}
@media (prefers-reduced-motion:reduce){
.wcard-expanded{transition:none !important}
#sitesGrid.grid-dim .wcard:not(.wcard-expanded){transform:none !important}
}
@media (max-width:720px){
.wcard.wcard-expanded{max-height:92vh}
.wcard-expanded .wshot{height:34vh}
}
/* ---------- services ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
@media (max-width:760px){.svc-grid{grid-template-columns:1fr}}
.svc-card{background:var(--ink2);padding:44px 40px;transition:background .3s;position:relative;overflow:hidden}
.svc-card:hover{background:var(--ink3)}
.svc-card>*:not(.cover){position:relative;z-index:1}
.svc-card .ico{width:34px;height:34px;margin-bottom:20px}
.svc-card .n{font-family:var(--font-mono);color:var(--gold-ink);font-size:12px;margin-bottom:8px;display:block;letter-spacing:.04em}
.svc-card h3{font-size:20px;color:var(--ink);margin-bottom:12px;letter-spacing:-.01em}
.svc-card p{color:var(--text-dim);font-size:14px;line-height:1.7;margin-bottom:22px}
.svc-points{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.svc-points li{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--text);line-height:1.5}
.svc-points li::before{content:"";flex:0 0 5px;width:5px;height:5px;border-radius:50%;background:var(--gold-2);margin-top:7px}
/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2px;background:var(--line);
border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}
.contact-main,.contact-side{background:var(--ink2);padding:44px 40px}
.contact-main p{color:var(--text-dim);font-size:15px;line-height:1.75;margin-bottom:28px}
.contact-main p.note{font-size:13px;color:var(--text-dim2)}
.contact-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.contact-chips span{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--text-dim);border:1px solid var(--line);
padding:7px 14px;border-radius:100px;display:flex;align-items:center;gap:7px}
.contact-chips span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold-2)}
.contact-side h2,.contact-side h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim2);margin-bottom:18px}
.social-row{display:flex;align-items:center;justify-content:space-between;padding:15px 0;border-bottom:1px solid var(--line2);
font-size:15px;color:var(--text);transition:color .2s}
.social-row:last-child{border-bottom:none}
.social-row .go{font-family:var(--font-mono);color:var(--gold-ink);font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:0;transition:.2s}
a.social-row:hover{color:var(--gold-ink)}
a.social-row:hover .go{opacity:1}
.social-row.off{opacity:.6;pointer-events:none}
/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:64px 0 34px;margin-top:60px}
.f-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:44px;border-bottom:1px solid var(--line2)}
.f-brand{display:flex;align-items:center;gap:12px}
.f-brand .t{display:inline-block;font-family:var(--font-serif);font-weight:600;font-size:20px;
text-transform:uppercase;letter-spacing:.14em;
background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.f-brand .t i{display:inline-block;margin-left:.34em;font-style:normal;font-family:var(--font-serif);font-weight:600;letter-spacing:.14em;
background:var(--silver-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.f-cols{display:flex;gap:64px;flex-wrap:wrap}
.f-col h2,.f-col h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim2);margin-bottom:16px}
.f-col a,.f-col span{display:block;font-size:14px;color:var(--text-dim);margin-bottom:11px;transition:color .2s}
.f-col a:hover{color:var(--gold-ink)}
.f-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;flex-wrap:wrap;gap:12px}
.f-bottom span{font-family:var(--font-mono);font-size:12px;color:var(--text-dim2)}
/* ============================================================
BOOT SEQUENCE — two acts, then a door
Act 1: a real 0→100 counter with a filling rule.
Act 2: the mark, lit by a specular highlight that tracks the
cursor across the letterforms, and an ENTER button.
Always dark regardless of theme — it's a curtain, not a page.
Plays once per browser session; reduced-motion skips straight
to the enter state rather than animating anything.
============================================================ */
#boot{position:fixed;inset:0;z-index:999;background:#08080a;
display:flex;align-items:center;justify-content:center;
transition:opacity .85s var(--ease),visibility .85s}
#boot.gone{opacity:0;visibility:hidden;pointer-events:none}
#boot::before{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(680px circle at 50% 46%,#a9762e1c,transparent 68%);
opacity:0;transition:opacity 1.6s ease}
#boot.act2::before{opacity:1}
/* fine grain so the black isn't a dead flat field */
#boot::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
background-image:url("data:image/svg+xml;utf8,")}
/* --- act 1: the counter --- */
/* The counter, centred. Everything shares one centre axis: the number,
the bar beneath it, and the status under that.
The figure is deliberately NOT a heavy display weight — a fat 800-weight
numeral reads as sporty, not considered. This is medium weight at a
restrained size with open tracking, which is how a premium loader
carries itself. Lining + tabular numerals so digits are all one height
and one width, and the number doesn't jitter as it counts. */
/* Both acts occupy the SAME grid cell and cross-fade.
The previous version hid act 1 with position:absolute, which applies
the instant the class lands while the opacity is still transitioning
over half a second — so the counter snapped out of flow and finished
fading ON TOP of the logo. Stacking them in one grid cell means
neither ever leaves the layout, so there is nothing to jump. */
.boot-inner{position:relative;z-index:1;display:grid;place-items:center;
width:min(560px,84vw);text-align:center}
.boot-act{grid-area:1/1;display:flex;flex-direction:column;align-items:center;
width:100%;transition:opacity .55s var(--ease),transform .7s var(--ease)}
.boot-act1{gap:20px}
.boot-act2{gap:34px;opacity:0;transform:translateY(16px) scale(.97);pointer-events:none}
#boot.act2 .boot-act1{opacity:0;transform:translateY(-16px);pointer-events:none}
/* act 2 waits for act 1 to clear before arriving, so they never overlap */
#boot.act2 .boot-act2{opacity:1;transform:none;pointer-events:auto;
transition-delay:.3s}
/* Reserve the width of "100" up front. tabular-nums keeps each DIGIT the
same width, but the digit COUNT still changes (0 -> 42 -> 100), so the
element grew mid-count and nudged the bar and status under it. Measured
as a real (small) layout shift; 3ch removes it. */
.boot-count{display:inline-flex;align-items:baseline;justify-content:center;gap:.12em;
font-family:var(--font-sans);font-weight:500;line-height:1;color:#f4f4f5;
font-size:clamp(46px,6.4vw,66px);letter-spacing:-.02em;
font-variant-numeric:tabular-nums lining-nums;
font-feature-settings:"tnum" 1,"lnum" 1}
.boot-count > span{display:inline-block;min-width:3ch;text-align:right}
.boot-count i{font-style:normal;font-weight:400;font-size:.34em;color:#c99a4e;
letter-spacing:.02em;font-variant-numeric:normal;transform:translateY(-.15em)}
#boot.act2
#bootbar{width:min(300px,70vw);height:1.5px;background:#ffffff17;border-radius:2px;
overflow:hidden;position:relative;margin:0 auto;
transition:opacity .5s var(--ease),transform .6s var(--ease)}
#bootbar i{position:absolute;inset:0 auto 0 0;height:100%;width:0%;
background:linear-gradient(90deg,#8a5c1e,#ecd1a6);
box-shadow:0 0 14px #c99a4e66;transition:width .25s cubic-bezier(.3,.1,.2,1)}
.boot-status{font-family:var(--font-mono);font-size:11px;letter-spacing:.28em;
text-transform:uppercase;color:#ffffff40;white-space:nowrap;text-align:center}
/* --- act 2: the mark + enter --- */
#boot.act2
.boot-logo{position:relative;width:190px;cursor:crosshair}
.boot-logo img{display:block;width:100%;height:auto}
/* the specular highlight — a soft light clipped to the mark's own
pixels, following the pointer. mask-image on the logo file means it
only ever lights the letterforms, never the box around them. */
.boot-logo::after{content:"";position:absolute;inset:-6%;pointer-events:none;
background:radial-gradient(circle 130px at var(--mx,50%) var(--my,50%),
#fffffff2 0%,#ffffff8c 22%,#c99a4e59 42%,transparent 66%);
-webkit-mask-image:url('img/logo-mark.png');-webkit-mask-size:contain;
-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;
mask-image:url('img/logo-mark.png');mask-size:contain;
mask-repeat:no-repeat;mask-position:center;
mix-blend-mode:screen;opacity:0;transition:opacity .45s var(--ease)}
.boot-logo.lit::after{opacity:1}
.boot-enter{position:relative;display:inline-flex;align-items:center;gap:13px;
padding:15px 34px;border-radius:100px;border:1px solid #ffffff26;
font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
color:#f4f4f5;overflow:hidden;transition:border-color .3s,color .3s,transform .3s var(--ease)}
.boot-enter::before{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(120deg,#ecd1a6,#c99a4e 55%,#8a5c1e);
transform:translateY(101%);transition:transform .45s var(--ease)}
.boot-enter:hover{color:#0b0b0c;border-color:transparent;transform:translateY(-2px)}
.boot-enter:hover::before{transform:translateY(0)}
.boot-enter .arw{width:15px;height:15px;transition:transform .35s var(--ease)}
.boot-enter:hover .arw{transform:translateX(4px)}
.boot-enter:focus-visible{outline:2px solid #ecd1a6;outline-offset:4px}
.boot-hint{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
text-transform:uppercase;color:#ffffff33}
@media (prefers-reduced-motion:reduce){
.boot-count,#bootbar,.boot-stage,.boot-logo::after,.boot-enter::before{transition:none}
}
/* ---------- misc ---------- */
.center{text-align:center}
.mx-auto{margin-left:auto;margin-right:auto}
.mt-s{margin-top:16px}.mt-m{margin-top:32px}.mt-l{margin-top:56px}
.divider{height:1px;background:var(--line);border:none}
.eyebrow-line{display:flex;align-items:center;gap:16px;color:var(--text-dim2);font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.eyebrow-line .ln{flex:1;height:1px;background:var(--line)}
.noscroll{overflow:hidden}
/* ---------- video card (reels) — vslot stays dark, it's a screen ---------- */
.vcard{background:var(--ink2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
transition:border-color .3s,transform .3s;cursor:pointer}
.vcard:hover{border-color:#a9762e44}
.vcard .vslot{position:relative;aspect-ratio:16/10;background:#0c0b0a;overflow:hidden}
.vcard .vposter{position:absolute;inset:0;background-size:cover;background-position:center;
background-color:#171513;display:flex;align-items:center;justify-content:center}
.vcard .vposter::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#00000000 40%,#000000aa)}
.vplay{position:relative;z-index:2;width:56px;height:56px;border-radius:50%;
border:1px solid #ffffff55;background:#00000055;backdrop-filter:blur(4px);
display:flex;align-items:center;justify-content:center;transition:.25s}
.vcard:hover .vplay{background:var(--gold-2);border-color:var(--gold-2);transform:scale(1.08)}
.vplay svg{width:16px;height:16px;fill:#fff;margin-left:2px}
.vcard:hover .vplay svg{fill:#fff}
/* the player lays over the still rather than replacing it, so stopping
brings the frame straight back with nothing to re-fetch */
.vcard.playing .vposter{opacity:0;pointer-events:none;visibility:hidden}
.vposter{transition:opacity .3s var(--ease)}
.vslot > video,.vslot > iframe{position:absolute;inset:0;width:100%;height:100%;
z-index:2;border:0;display:block;border-radius:inherit;background:#000}
.vruntime{position:absolute;right:12px;bottom:12px;z-index:2;font-family:var(--font-mono);font-size:11px;letter-spacing:.02em;
color:#f5f4eecc;background:#00000066;padding:3px 8px;border-radius:100px}
.vmeta{padding:20px 22px 22px}
.vmeta h3{font-size:17px;color:var(--ink);margin-bottom:4px}
.vmeta .sub{font-size:13px;color:var(--text-dim2);margin-bottom:12px}
.vmeta p{font-size:13px;color:var(--text-dim);line-height:1.6;margin-bottom:14px}
/* ---------- logo mark card (logos page — reuses .vcard shell, stays dark stage) ---------- */
.lmark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
background:radial-gradient(circle at 50% 45%,#ffffff08,transparent 70%),#171513}
.lmark svg{width:88px;height:88px}
.vcard.playing .lmark{display:none}
.lbadge{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);
width:44px;height:44px;border-radius:50%;
border:1px solid #ffffff40;background:#00000055;backdrop-filter:blur(4px);
display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s,transform .25s}
.vcard:hover .lbadge{opacity:1;transform:translate(-50%,-50%) scale(1.06)}
.lbadge svg{width:13px;height:13px;fill:#fff;margin-left:2px}
.lcard-nourl .lbadge{display:none}
/* live animated marks — motion unchanged, colour now set per-entry via content.js (reds/ink) */
.mk .a{transform-box:fill-box;transform-origin:center;animation:mkspin 9s linear infinite;animation-duration:calc(9s / var(--mkspeed,1))}
.mk .b{transform-box:fill-box;transform-origin:center 38px;animation:mkspin 4.5s linear infinite;animation-duration:calc(4.5s / var(--mkspeed,1))}
.mk .c{transform-box:fill-box;transform-origin:center;animation:mkslideL 3s ease-in-out infinite;animation-duration:calc(3s / var(--mkspeed,1))}
.mk .d{transform-box:fill-box;transform-origin:center;animation:mkslideR 3s ease-in-out infinite;animation-duration:calc(3s / var(--mkspeed,1))}
.mk .e{stroke-dasharray:150;animation:mkdraw 3.4s ease-in-out infinite;animation-duration:calc(3.4s / var(--mkspeed,1))}
.mk .f{transform-box:fill-box;transform-origin:left center;animation:mkstack 2.6s ease-in-out infinite;animation-duration:calc(2.6s / var(--mkspeed,1))}
.mk .g{transform-box:fill-box;transform-origin:center;animation:mkpulse 2.6s ease-out infinite;animation-duration:calc(2.6s / var(--mkspeed,1))}
.mk .h{transform-box:fill-box;transform-origin:center;animation:mkflip 3.2s ease-in-out infinite;animation-duration:calc(3.2s / var(--mkspeed,1))}
@keyframes mkspin{to{transform:rotate(360deg)}}
@keyframes mkslideL{0%,100%{transform:translateX(0)}50%{transform:translateX(-10px) scaleY(.8)}}
@keyframes mkslideR{0%,100%{transform:translateX(0)}50%{transform:translateX(10px) scaleY(1.15)}}
@keyframes mkdraw{0%{stroke-dashoffset:150}45%,55%{stroke-dashoffset:0}100%{stroke-dashoffset:-150}}
@keyframes mkstack{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.35)}}
@keyframes mkpulse{0%{transform:scale(.6);opacity:1}80%,100%{transform:scale(1.35);opacity:0}}
@keyframes mkflip{0%,100%{transform:rotateY(0) scaleX(1)}50%{transform:scaleX(.06)}}
/* A social link with no URL yet still has to be READABLE — a 35% ghost
reads as a broken link, not an unfinished one. Shown at full text
colour with a quiet "soon" marker until the URL is filled in. */
.f-col a.off,#mobilenav a.off{opacity:1;color:var(--text-dim2);pointer-events:none;position:relative}
.f-col a.off::after{content:"soon";margin-left:8px;font-family:var(--font-mono);font-size:11px;
letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink);opacity:.75;
border:1px solid #a9762e33;border-radius:100px;padding:2px 7px;vertical-align:middle}
/* ---------- hero — cursor-tracking spotlight ---------- */
#heroGlow{position:absolute;inset:0;pointer-events:none;z-index:0;
background:radial-gradient(620px circle at var(--sx,50%) var(--sy,30%),#a9762e11,#11111007 42%,transparent 70%)}
.hero{position:relative;padding:190px 0 60px;text-align:center;overflow:hidden}
.hero .word{position:relative;z-index:1;font-family:var(--font-serif);font-weight:600;
text-transform:uppercase;letter-spacing:.09em;line-height:1.22;
font-size:clamp(34px,7vw,88px);padding:.08em 0}
.hero .word-gold,.hero .word-silver{display:block}
.hero .word-gold{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .word-silver{background:var(--silver-grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-top:.05em}
.hero .divider{display:flex;align-items:center;justify-content:center;gap:16px;margin:30px auto 0;max-width:340px;position:relative;z-index:1}
.hero .divider span{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold-2));opacity:.55}
.hero .divider span:last-child{background:linear-gradient(90deg,var(--gold-2),transparent)}
.hero .divider i{width:4px;height:4px;border-radius:50%;background:var(--gold-2);flex:0 0 auto}
.hero .tag{font-family:var(--font-serif);font-size:clamp(17px,2.1vw,21px);font-weight:500;letter-spacing:.01em;color:var(--text);margin-top:22px}
.hero .tag i{font-style:italic;font-weight:600;color:var(--gold-ink)}
.hero .role{font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;color:var(--text-dim2);margin-top:16px}
.hero .cats{margin-top:34px}
.hero .ctas{margin-top:44px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}
.scrollcue{position:relative;z-index:1;margin:60px auto 0;
display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-dim2);
font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.8}
.scrollcue .ln{width:1px;height:34px;background:linear-gradient(var(--gold-2),transparent);animation:cue 2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.3}50%{opacity:1}}
/* ---------- CTA band ---------- */
.ctaband{border:1px solid var(--line);border-radius:20px;padding:70px 40px;text-align:center;
background:radial-gradient(circle at 50% 0%,#a9762e0c,transparent 60%)}
.ctaband h2{margin-bottom:14px}
.ctaband p{color:var(--text-dim);max-width:480px;margin:0 auto}
.ctaband .ctas{margin-top:34px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
/* ---------- about teaser (home) ---------- */
.about-teaser{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center}
@media (max-width:820px){.about-teaser{grid-template-columns:1fr;gap:36px}}
.about-teaser .frame{aspect-ratio:4/5;border-radius:var(--radius);border:1px solid var(--line);
background:radial-gradient(circle at 38% 26%,#a9762e1c,transparent 55%),radial-gradient(circle at 68% 82%,#a9762e12,transparent 60%),linear-gradient(160deg,#efece1,#e2ddcc);
box-shadow:inset 0 1px 0 #ffffff90;display:flex;align-items:center;justify-content:center}
.about-teaser p{color:var(--text-dim);font-size:15px;line-height:1.75;margin-top:18px}
/* ---------- sub-page header ---------- */
.pagehead{padding:168px 0 70px}
.pagehead .lede{max-width:640px}
/* ---------- about hero: floating medium chips (page-scoped, doesn't
touch the shared .pagehead used by every other page) ---------- */
.ab-hero-wrap{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:center}
.ab-hero-visual{position:relative;height:360px}
.ab-chip{position:absolute;display:flex;align-items:center;gap:9px;padding:11px 15px;border-radius:13px;
background:var(--ink2);border:1px solid var(--line);box-shadow:0 14px 34px -16px rgba(0,0,0,.5);
font-family:var(--font-mono);font-size:12px;letter-spacing:.02em;color:var(--text-dim);white-space:nowrap;
position:absolute;will-change:transform;transition:transform .3s cubic-bezier(.2,.8,.2,1);
animation:abChipFloat 7s ease-in-out infinite}
.ab-chip .ico{width:19px;height:19px;color:var(--gold-ink);flex:0 0 auto}
.ab-chip:nth-child(1){top:2%;left:4%;animation-duration:6.4s}
.ab-chip:nth-child(2){top:30%;right:0;animation-duration:7.6s;animation-delay:-2.1s}
.ab-chip:nth-child(3){top:60%;left:10%;animation-duration:7s;animation-delay:-4.3s}
.ab-chip:nth-child(4){top:84%;right:8%;animation-duration:8.1s;animation-delay:-1.2s}
@keyframes abChipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@media (max-width:1099px){
.ab-hero-wrap{grid-template-columns:1fr}
.ab-hero-visual{display:none}
}
@media (prefers-reduced-motion:reduce){.ab-chip{animation:none}}
/* ---------- timeline ---------- */
.timeline{border-top:1px solid var(--line)}
.tl-item{display:grid;grid-template-columns:200px 1fr;gap:40px;padding:38px 0;border-bottom:1px solid var(--line)}
@media (max-width:720px){.tl-item{grid-template-columns:1fr;gap:10px}}
.tl-item .period{font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;color:var(--text-dim2)}
.tl-item .period b.now{display:inline-block;margin-left:9px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
color:var(--gold-ink);border:1px solid #a9762e44;padding:2px 8px;border-radius:100px;text-transform:uppercase;font-weight:500}
.tl-item h3{font-size:20px;color:var(--ink);margin-bottom:3px}
.tl-item .org{font-family:var(--font-mono);font-size:13px;color:var(--gold-ink);margin-bottom:14px}
.tl-item p{color:var(--text-dim);font-size:15px;line-height:1.7;max-width:560px}
.tl-item .chips{margin-top:16px}
/* ---------------- About: hero intro2 + badge row ---------------- */
.ab-intro2{color:var(--text-dim2);font-size:15px;line-height:1.7;max-width:560px;margin-top:14px}
.ab-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
/* ">" here matters: .ico is itself a , so a plain descendant selector
(".ab-badges span") would also match it and hand it the pill's own
padding/border/background -- rendering as a second blank pill instead
of a small icon. */
.ab-badges > span{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11.5px;
letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim);padding:9px 16px 9px 13px;
border:1px solid var(--line);border-radius:100px;background:var(--ink2);transition:border-color .3s,background .3s}
.ab-badges > span:hover{border-color:#a9762e55;background:var(--ink3)}
.ab-badges .ico{width:14px;height:14px;color:var(--gold-ink);flex:0 0 auto}
/* ---------------- About: journey timeline ----------------
Each chapter is a standalone card -- icon + one-line gist + scannable
highlights up front, the full story tucked behind "Read the full
story" -- strung along a gold progress rail. Cards read in seconds;
the prose is there for anyone who wants to go deeper. */
.jtl{position:relative}
.jtl::before{content:"";position:absolute;left:23px;top:6px;bottom:6px;border-left:1.5px dashed var(--line);pointer-events:none}
.jtl-fill{position:absolute;left:22.25px;top:6px;width:1.5px;height:0;border-radius:2px;pointer-events:none;z-index:1;
background:linear-gradient(var(--gold-1),var(--gold-2));box-shadow:0 0 10px 0 #a9762e55}
.jtl-item{display:grid;grid-template-columns:48px 1fr;gap:20px;padding:0 0 26px;position:relative;z-index:1}
.jtl-item:last-child{padding-bottom:2px}
.jtl-rail{display:flex;justify-content:center;padding-top:28px}
.jtl-node{position:relative;z-index:1;width:40px;height:40px;border-radius:50%;flex:0 0 auto;
display:flex;align-items:center;justify-content:center;
font-family:var(--font-mono);font-size:12.5px;font-weight:600;color:var(--gold-ink);
background:var(--paper);border:1px solid var(--line);
transition:transform .35s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
/* "you are here" -- lit by an IntersectionObserver as each chapter crosses
the reading line, independent of .now (the latest real-world chapter,
not necessarily the one currently being read) */
.jtl-item.spy-on .jtl-node{border-color:var(--gold-2);box-shadow:0 0 0 5px #a9762e1f,0 0 24px -6px var(--gold-2)}
.jtl-item.now .jtl-node{background:var(--btn-grad);color:var(--on-gold);border-color:transparent}
.jtl-card{position:relative;overflow:hidden;background:var(--ink2);border:1px solid var(--line);border-radius:20px;
padding:30px 30px 26px;transition:border-color .4s,box-shadow .4s,transform .35s cubic-bezier(.2,.8,.2,1);will-change:transform}
.jtl-item.spy-on .jtl-card{border-color:#a9762e4a;box-shadow:0 0 0 1px #a9762e22,0 20px 50px -24px #a9762e33}
.jtl-item.now .jtl-card{border-color:#a9762e55}
.jtl-card:hover{box-shadow:0 20px 44px -20px rgba(0,0,0,.4)}
.jtl-num{position:absolute;right:16px;top:-16px;font-family:var(--font-serif);font-weight:600;font-size:96px;
line-height:1;color:var(--line);opacity:.55;pointer-events:none;z-index:0;user-select:none}
.jtl-card > *{position:relative;z-index:1}
.jtl-top{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.jtl-medal{position:relative;width:52px;height:52px;border-radius:50%;flex:0 0 auto;
display:flex;align-items:center;justify-content:center;background:var(--ink3);border:1px solid var(--line);
transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .45s var(--ease),border-color .45s var(--ease)}
.jtl-item.spy-on .jtl-medal{border-color:var(--gold-2);box-shadow:0 0 0 5px #a9762e1a,0 0 26px -6px var(--gold-2)}
.jtl-item.now .jtl-medal{background:var(--btn-grad);border-color:transparent}
.jtl-medal .ico{width:24px;height:24px;color:var(--gold-ink)}
.jtl-item.now .jtl-medal .ico{color:var(--on-gold)}
.jtl-card:hover .jtl-medal{transform:scale(1.08) rotate(-4deg)}
.jtl-top-text{min-width:0}
.jtl-kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
color:var(--gold-ink);display:block;margin-bottom:4px}
.jtl-period{font-family:var(--font-mono);font-size:12.5px;color:var(--text-dim2)}
.jtl-period b.now{display:inline-block;margin-left:9px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;
text-transform:uppercase;color:var(--on-gold);background:var(--btn-grad);padding:3px 9px;border-radius:100px}
.jtl-h{font-family:var(--font-sans);font-weight:800;font-size:clamp(20px,2.4vw,26px);letter-spacing:-.02em;
line-height:1.16;color:var(--ink);margin-bottom:12px}
.jtl-gist{color:var(--text-dim);font-size:15px;line-height:1.65;max-width:600px;margin-bottom:18px}
.jtl-highlights{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;max-width:600px;margin-bottom:4px}
.jtl-highlights li{display:flex;align-items:flex-start;gap:9px;font-family:var(--font-mono);font-size:12px;
letter-spacing:.01em;color:var(--text-dim);line-height:1.5}
.jtl-highlights svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px;color:var(--gold-2)}
.jtl-quote{margin-top:18px;padding:16px 20px;border-left:2px solid var(--gold-2);background:var(--ink3);
border-radius:0 10px 10px 0;font-family:var(--font-serif);font-style:italic;font-size:16px;line-height:1.5;
color:var(--ink);max-width:560px}
.jtl-more{margin-top:18px;display:inline-flex;align-items:center;gap:7px;background:none;border:none;padding:0;
font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink);
cursor:pointer;transition:color .25s}
.jtl-more svg{width:11px;height:11px;transition:transform .35s var(--ease)}
.jtl-item.expanded .jtl-more svg{transform:rotate(180deg)}
.jtl-more:hover{color:var(--ink)}
/* height-animated via grid-template-rows 0fr -> 1fr: smooth, no JS measuring */
.jtl-more-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.jtl-item.expanded .jtl-more-panel{grid-template-rows:1fr}
.jtl-more-inner{overflow:hidden;min-height:0}
.jtl-more-inner p{color:var(--text-dim);font-size:14.5px;line-height:1.75;max-width:600px;margin-top:16px}
.jtl-more-inner p+p{margin-top:12px}
.jtl-more-inner b{color:var(--ink);font-weight:600}
.jtl-card .chips{margin-top:18px}
@media (max-width:720px){
.jtl::before{left:17px}
.jtl-fill{left:16.25px}
.jtl-item{grid-template-columns:34px 1fr;gap:12px}
.jtl-rail{padding-top:22px}
.jtl-node{width:34px;height:34px;font-size:11px}
.jtl-card{padding:22px 18px 20px;border-radius:16px}
.jtl-num{font-size:64px;right:8px;top:-10px}
.jtl-top{gap:12px;margin-bottom:14px}
.jtl-medal{width:44px;height:44px}
.jtl-medal .ico{width:20px;height:20px}
.jtl-highlights{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.jtl-fill{transition:none}.jtl-more-panel{transition:none}}
/* ---------------- About: "what's next" closing note ---------------- */
.jnext .kicker{display:inline-flex;align-items:center;gap:11px}
.jnext .kicker::before{content:"";width:26px;height:1px;background:var(--gold-2);opacity:.85}
.jnext h2{margin-bottom:18px}
.jnext p{color:var(--text-dim);font-size:15.5px;line-height:1.75;max-width:560px}
/* ---------- skills — interactive tabbed widget ---------- */
.skilltabs{background:var(--ink2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.stabs{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--line);position:relative}
/* driven entirely by JS transform (translateX AND translateY, so it tracks
the active tab's own row when .stabs wraps to multiple lines) — top:0/
left:0 is just the transform origin, not a resting position */
.tab-indicator{position:absolute;left:0;top:0;height:2px;width:0;background:var(--gold-2);pointer-events:none}
.stab{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
padding:18px 22px;color:var(--text-dim);border-bottom:2px solid transparent;margin-bottom:-1px;
transition:color .2s,border-color .2s;cursor:pointer}
.stab:hover{color:var(--ink)}
.stab.on{color:var(--ink);border-bottom-color:var(--gold-2)}
.spanels{position:relative;padding:34px 32px}
.spanel{display:none}
.spanel.on{display:block;animation:panelIn .35s var(--ease)}
@keyframes panelIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.spanel .chips span{border-color:var(--line2)}
/* ---------- functional tag filters (reels / logos / websites) ---------- */
.filterbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px}
.fchip{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
padding:8px 16px;border-radius:100px;border:1px solid var(--line);color:var(--text-dim);
background:var(--ink2);transition:.2s}
.fchip:hover{border-color:var(--gold-2);color:var(--ink)}
.fchip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.fhide{display:none !important}
/* ============================================================
DARK MODE — Linear/Vercel-style variant, toggled via
[data-theme="dark"] on . Every component above already
reads its colours from these tokens, so most of the site flips
for free; the few hardcoded (non-token) colours are overridden
individually below.
============================================================ */
:root[data-theme="dark"]{
--paper:#09090b;
--ink:#f4f4f5;
--ink2:rgba(255,255,255,.035);
--ink3:rgba(255,255,255,.07);
--line:rgba(255,255,255,.1);
--line2:rgba(255,255,255,.06);
--text:#d4d4d8;
--text-dim:#c3c3ca;
--text-dim2:#b9b9c1;
--gold-1:#ecd1a6;
--gold-2:#c99a4e;
--gold-3:#8a5c1e;
--gold:#c99a4e;
--gold-ink:#e0ac5c;
--silver-1:#f1f2f4;
--silver-2:#b6b8c0;
--silver-3:#75777f;
}
[data-theme="dark"] body{
background-color:var(--paper);
background-image:url("data:image/svg+xml;utf8,");
}
[data-theme="dark"] .feat,[data-theme="dark"] .svc-card,[data-theme="dark"] .card,[data-theme="dark"] .vcard,
[data-theme="dark"] .skilltabs,[data-theme="dark"] .contact-main,[data-theme="dark"] .contact-side,
[data-theme="dark"] .markcustom,[data-theme="dark"] .estimator,[data-theme="dark"] .fchip{
backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
[data-theme="dark"] #nav.scrolled{background:#09090bd2}
[data-theme="dark"] #mobilenav{background:#09090bf2}
[data-theme="dark"] .about-teaser .frame{background:radial-gradient(circle at 40% 30%,#17171b,#09090b 75%)}
[data-theme="dark"] .wshot{background:#151517}
[data-theme="dark"] .wchrome{background:#1c1c1f}
[data-theme="dark"] .wchrome span{background:#ffffff26}
[data-theme="dark"] .cmdk-backdrop{background:#000000a0}
[data-theme="dark"] .cmdk-panel{box-shadow:0 30px 90px -20px #00000080}
/* theme transition — smooth colour cross-fade instead of a hard cut */
body,#nav,.feat,.card,.vcard,.svc-card,.skilltabs,.contact-main,.contact-side,footer,
.wshot,.wchrome,.about-teaser .frame,#mobilenav,.fchip,.markcustom,.estimator{
transition:background-color .4s ease,background .4s ease,border-color .4s ease,color .4s ease;
}
/* ---------- nav tools: command palette / sound / theme toggle ---------- */
.navtools{display:flex;align-items:center;gap:6px;margin-left:16px}
.navtool{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;
justify-content:center;color:var(--text-dim);transition:.2s;position:relative;flex:none}
.navtool:hover{border-color:var(--gold-2);color:var(--ink)}
.navtool svg{width:16px;height:16px;flex:none;display:block;
fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.navtool kbd{font-family:var(--font-mono);font-size:11px;letter-spacing:.02em}
@media (max-width:860px){#cmdk kbd{font-size:12px}}
.navtool .snd-on{display:none}
.navtool[data-sound-toggle].on .snd-on{display:block}
.navtool[data-sound-toggle].on .snd-off{display:none}
.navtool .th-sun{display:none}
:root[data-theme="dark"] .navtool .th-moon{display:none}
:root[data-theme="dark"] .navtool .th-sun{display:block}
.navtool.spin{animation:navtoolPop .4s var(--ease)}
@keyframes navtoolPop{0%{transform:scale(.8) rotate(-20deg)}60%{transform:scale(1.15) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
@media (max-width:860px){.navtools{margin-left:auto;margin-right:10px}}
/* ---------- command palette ---------- */
#cmdk{position:fixed;inset:0;z-index:800;opacity:0;pointer-events:none;transition:opacity .2s}
#cmdk.open{opacity:1;pointer-events:auto}
.cmdk-backdrop{position:absolute;inset:0;background:#09090b5c;backdrop-filter:blur(3px)}
.cmdk-panel{position:relative;max-width:560px;margin:14vh auto 0;background:var(--paper);border:1px solid var(--line);
border-radius:14px;overflow:hidden;box-shadow:0 30px 80px -20px #00000040;
transform:translateY(-14px) scale(.98);opacity:0;transition:transform .25s var(--ease),opacity .25s var(--ease)}
#cmdk.open .cmdk-panel{transform:none;opacity:1}
.cmdk-input-row{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line);color:var(--text-dim2)}
.cmdk-input-row svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;flex:none}
.cmdk-input-row input{flex:1;border:none;background:none;outline:none;font-family:var(--font-sans);font-size:15px;color:var(--ink)}
.cmdk-input-row kbd{font-family:var(--font-mono);font-size:11px;color:var(--text-dim2);border:1px solid var(--line);padding:3px 7px;border-radius:5px}
.cmdk-list{max-height:340px;overflow-y:auto;padding:8px}
.cmdk-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px;border-radius:9px;font-size:14px;color:var(--text)}
.cmdk-item.on{background:var(--ink3)}
.cmdk-tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--gold-ink);border:1px solid #a9762e33;padding:2px 7px;border-radius:5px}
.cmdk-empty{padding:20px;text-align:center;color:var(--text-dim2);font-size:13px}
/* ---------- copy-to-clipboard badges ---------- */
.copy-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;
color:var(--text-dim);border:1px solid var(--line);padding:8px 14px;border-radius:100px;transition:.2s;cursor:pointer}
.copy-badge:hover{border-color:var(--gold-2);color:var(--ink)}
.copy-badge svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;flex:none}
.copy-badge.copied{border-color:#178a4c88;color:#178a4c;background:#178a4c0d}
.copy-badge.copied{animation:copyPop .35s var(--ease)}
@keyframes copyPop{0%{transform:scale(.96)}60%{transform:scale(1.03)}100%{transform:scale(1)}}
/* ---------- mark customizer (logos page) ---------- */
.markcustom{display:grid;grid-template-columns:280px 1fr;background:var(--ink2);border:1px solid var(--line);
border-radius:var(--radius);overflow:hidden;margin-bottom:56px}
@media (max-width:720px){.markcustom{grid-template-columns:1fr}}
.mc-preview{background:#171513;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1}
.mc-preview .mc-stage{width:66%;height:66%}
.mc-preview .mc-stage svg{width:100%;height:100%}
.mc-controls{padding:32px 34px;display:flex;flex-direction:column;gap:24px;justify-content:center}
.mc-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim2);display:block;margin-bottom:10px}
.mc-styles,.mc-swatches{display:flex;flex-wrap:wrap;gap:9px}
.mc-chip{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:8px 14px;
border-radius:100px;border:1px solid var(--line);color:var(--text-dim);transition:.2s}
.mc-chip:hover{color:var(--ink);border-color:var(--gold-2)}
.mc-chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.mc-swatch{width:28px;height:28px;border-radius:50%;background:var(--sw);border:2px solid var(--line);transition:.2s;cursor:pointer}
.mc-swatch.on{border-color:var(--gold-2);transform:scale(1.14)}
.mc-row input[type=range]{width:100%;accent-color:var(--gold-2)}
/* ---------- project estimator (services page) ---------- */
.estimator{background:var(--ink2);border:1px solid var(--line);border-radius:var(--radius);padding:44px 40px;margin-bottom:56px}
.est-head h2,.est-head h3{font-size:24px;color:var(--ink);margin:8px 0 10px}
.est-head p{color:var(--text-dim);font-size:14px;max-width:520px;line-height:1.7}
.est-chips{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0}
.est-chip{font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;padding:11px 18px;border-radius:100px;
border:1px solid var(--line);color:var(--text-dim);transition:.2s}
.est-chip:hover{border-color:var(--gold-2);color:var(--ink)}
.est-chip.on{background:var(--btn-grad);color:var(--on-gold);border-color:transparent}
.est-result{display:flex;gap:48px;flex-wrap:wrap;padding-top:26px;border-top:1px solid var(--line2)}
.est-num{display:block;font-family:var(--font-sans);font-weight:800;font-size:30px;color:var(--ink);letter-spacing:-.02em;
transition:opacity .15s}
.est-sub{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim2);margin-top:6px;display:block}
/* ============================================================
COVER BLOOMS — a soft, blurred photographic wash (cropped from
the studio brand shoot) behind every card header and page header,
topped with a theme-tinted colour bloom that echoes the section's
own accent so it still adapts cleanly between light and dark.
============================================================ */
.cover{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
-webkit-mask-image:linear-gradient(178deg,#000 0%,#000 40%,transparent 92%);
mask-image:linear-gradient(178deg,#000 0%,#000 40%,transparent 92%)}
.cover img{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;
filter:blur(9px) saturate(1.15) sepia(.18);opacity:.2;transition:opacity .4s var(--ease),transform 8s ease-out;
transform:scale(1)}
.tilt:hover .cover img,a:hover>.cover img{transform:scale(1.045)}
[data-theme="dark"] .cover img{opacity:.4;filter:blur(7px) saturate(1.12) brightness(.78)}
.cover i{position:absolute;display:block;border-radius:50%;filter:blur(60px);opacity:.34;transform:translateZ(0)}
.cover .b1{width:60%;aspect-ratio:1;top:-38%;right:-16%;background:var(--cov1,var(--gold-2))}
.cover .b2{width:44%;aspect-ratio:1;bottom:-30%;left:-10%;background:var(--cov2,var(--gold-1));opacity:.24}
[data-theme="dark"] .cover i{opacity:.22}
[data-theme="dark"] .cover .b2{opacity:.14}
.feat-grid a:nth-child(1) .cover{--cov1:var(--gold-2);--cov2:var(--gold-3)}
.feat-grid a:nth-child(2) .cover{--cov1:var(--gold-1);--cov2:var(--gold-2)}
.feat-grid a:nth-child(3) .cover{--cov1:var(--gold-3);--cov2:var(--gold-1)}
.feat-grid a:nth-child(4) .cover{--cov1:var(--gold-2);--cov2:var(--gold-3)}
.svc-grid .svc-card:nth-child(1) .cover{--cov1:var(--gold-1);--cov2:var(--gold-2)}
.svc-grid .svc-card:nth-child(2) .cover{--cov1:var(--gold-3);--cov2:var(--gold-1)}
.svc-grid .svc-card:nth-child(3) .cover{--cov1:var(--gold-2);--cov2:var(--gold-3)}
.svc-grid .svc-card:nth-child(4) .cover{--cov1:var(--gold-1);--cov2:var(--gold-2)}
.pagehead{position:relative;overflow:hidden}
.pagehead>.wrap{position:relative;z-index:1}
.pagehead .cover{--cov1:var(--gold-2);--cov2:var(--gold-1)}
.pagehead .cover i{filter:blur(70px)}
.pagehead .cover .b1{width:46%;top:-40%;right:-8%}
.pagehead .cover .b2{width:34%;bottom:-45%;left:2%}
/* ---------- brand plate — the studio banner, shown clearly, once, right under the hero ---------- */
.brandplate{margin:0 auto;max-width:1040px;display:block}
.brandplate-frame{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);
box-shadow:0 30px 70px -30px #00000030;background:var(--ink3)}
.brandplate-frame::after{content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;
box-shadow:inset 0 0 0 1px #ffffff14}
.brandplate-frame img{width:100%;height:auto;display:block}
.brandplate figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
margin-top:18px;padding:0 4px}
.brandplate figcaption .kicker{margin:0}
.brandplate figcaption>span:last-child{font-family:var(--font-serif);font-size:15px;color:var(--text-dim);text-align:right}
@media (max-width:640px){.brandplate figcaption{flex-direction:column;gap:6px}.brandplate figcaption>span:last-child{text-align:left}}
/* ============================================================
LIVE CANVAS BACKGROUND
A drifting node-field that reacts to the cursor. Sits behind
hero + page headers; main.js paints it. Falls back to nothing
if canvas is unsupported or reduced-motion is requested.
============================================================ */
.livebg{position:absolute;inset:0;z-index:0;pointer-events:none;display:block;width:100%;height:100%}
.hero .wrap,.pagehead .wrap{position:relative;z-index:2}
@media (prefers-reduced-motion:reduce){.livebg{display:none}}
/* ============================================================
SIGNATURE BAND — the "who's behind this" strip on the home
page. Portrait slot on the left (set meta.portrait in
content.js), statement + credentials on the right.
============================================================ */
.signature{display:grid;grid-template-columns:.72fr 1.28fr;gap:56px;align-items:center;
border:1px solid var(--line);border-radius:20px;padding:38px;position:relative;overflow:hidden}
.signature::before{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(70% 90% at 12% 20%,#a9762e14,transparent 60%)}
.signature>*{position:relative;z-index:1}
.sig-portrait{aspect-ratio:4/5;border-radius:14px;overflow:hidden;border:1px solid var(--line);
background:linear-gradient(160deg,#1a1a1e,#0d0d10);display:flex;align-items:center;justify-content:center;position:relative}
.sig-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.sig-portrait .rb-mark{width:96px;opacity:.9}
.sig-body .kicker{margin-bottom:16px}
.sig-body h2{font-family:var(--font-sans);font-weight:800;font-size:clamp(24px,3vw,34px);
line-height:1.18;letter-spacing:-.02em;color:var(--ink);margin-bottom:18px}
.sig-body p{color:var(--text-dim);font-size:15px;line-height:1.75;margin-bottom:14px;max-width:56ch}
.sig-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.sig-facts span{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
color:var(--text-dim);border:1px solid var(--line);border-radius:100px;padding:7px 14px}
.sig-facts span.on{color:var(--gold-ink);border-color:#a9762e40;background:#a9762e0d}
.sig-sign{margin-top:26px;font-family:var(--font-serif);font-style:italic;font-size:20px;color:var(--gold-ink)}
@media (max-width:860px){.signature{grid-template-columns:1fr;gap:32px;padding:28px}
.sig-portrait{max-width:280px;margin:0 auto}}
/* ============================================================
LIGHT THEME POLISH
Light was inheriting a dark-first design and reading flat.
These rules only apply when dark isn't active: real surface
elevation, firmer edges, warmer paper, gold as accent.
============================================================ */
html:not([data-theme="dark"]) body{
background-color:#f3f1ea;
background-image:
radial-gradient(900px 520px at 78% -8%,#a9762e12,transparent 62%),
radial-gradient(700px 460px at 6% 104%,#a9762e0d,transparent 60%);
background-attachment:fixed;
}
html:not([data-theme="dark"]){
--paper:#f3f1ea;
--line:#1d1a1420;
--line2:#1d1a1412;
--text:#1f1e1b;
--text-dim:#55514a;
--text-dim2:#6b665c;
}
/* surfaces: white cards lifted off the warm page */
html:not([data-theme="dark"]) .feat,
html:not([data-theme="dark"]) .card,
html:not([data-theme="dark"]) .svc-card,
html:not([data-theme="dark"]) .vcard,
html:not([data-theme="dark"]) .contact-main,
html:not([data-theme="dark"]) .contact-side,
html:not([data-theme="dark"]) .skilltabs,
html:not([data-theme="dark"]) .estimator,
html:not([data-theme="dark"]) .signature,
html:not([data-theme="dark"]) .brandplate-frame{
background:#fffefb;
box-shadow:0 1px 2px #1d1a1408,0 14px 34px -18px #1d1a141f;
}
html:not([data-theme="dark"]) .feat:hover,
html:not([data-theme="dark"]) .svc-card:hover{background:#fffdf7}
html:not([data-theme="dark"]) .card:hover,
html:not([data-theme="dark"]) .vcard:hover,
html:not([data-theme="dark"]) .signature:hover{
box-shadow:0 2px 4px #1d1a140a,0 22px 48px -20px #1d1a142b;
}
/* the feature grid is one slab — give it a real edge, not a haze */
html:not([data-theme="dark"]) .feat-grid{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
html:not([data-theme="dark"]) .feat{box-shadow:none;background:#fffefb}
/* CTA band + about frame get a surface instead of floating on paper */
html:not([data-theme="dark"]) .ctaband{
background:linear-gradient(170deg,#fffefb,#f8f5ec);
box-shadow:0 1px 2px #1d1a1408,0 20px 50px -26px #1d1a1424;
}
html:not([data-theme="dark"]) .about-teaser .frame{
box-shadow:0 1px 2px #1d1a1408,0 20px 46px -24px #1d1a1426;
}
/* nav + footer read as distinct planes */
html:not([data-theme="dark"]) #nav.scrolled{background:#f3f1eae0;border-color:var(--line)}
html:not([data-theme="dark"]) footer{background:#fffefb99;border-top-color:var(--line)}
html:not([data-theme="dark"]) .marquee{background:#fffefb80}
/* media wells stay dark on purpose — but framed, not floating */
html:not([data-theme="dark"]) .vslot{border-bottom:1px solid var(--line)}
html:not([data-theme="dark"]) .wshot{background:#f0eee6;border-bottom:1px solid var(--line)}
html:not([data-theme="dark"]) .wchrome{background:#e9e6dc}
/* chips and small accents: firmer so they don't dissolve into the page */
html:not([data-theme="dark"]) .chips span,
html:not([data-theme="dark"]) .sig-facts span{border-color:#1d1a1424;background:#ffffffb3}
html:not([data-theme="dark"]) .btn-line{border-color:#1d1a1440}
html:not([data-theme="dark"]) .btn-line:hover{border-color:var(--ink);background:#fffefb}
/* the live canvas is tuned for dark — soften it on paper */
html:not([data-theme="dark"]) .livebg{opacity:.55}
/* Light mode: the blurred photo layer under the covers was what turned the
feature cards and page headers grey. On paper the gold blooms carry it
alone — cleaner, and it stops fighting the card surface. */
html:not([data-theme="dark"]) .cover img{display:none}
html:not([data-theme="dark"]) .cover i{opacity:.4;filter:blur(56px)}
html:not([data-theme="dark"]) .cover .b2{opacity:.28}
html:not([data-theme="dark"]) .pagehead .cover i{opacity:.34}
/* The live field fades out toward the edges so it reads as atmosphere
rather than a rectangle of dots sitting behind the text. */
.livebg{
-webkit-mask-image:radial-gradient(78% 78% at 50% 42%,#000 32%,transparent 100%);
mask-image:radial-gradient(78% 78% at 50% 42%,#000 32%,transparent 100%);
}
/* --gold-grad reads fine on dark (near-black backdrop makes even its
palest stop pop) but its light end (gold-1, ~1.8:1 on paper) and
even its middle (gold-2, ~3.6:1) both fail AA text contrast on the
light theme's cream background — same failure mode --btn-grad was
already clamped for above, just never applied to the text-clip
gradient. Confined to gold-ink..gold-3 here, every stop in the
ramp stays >=5:1 on paper, so any text using --gold-grad (brand
wordmark, hero "AI" emphasis, rotator word, stat counters) passes
AA in light mode too, while dark mode is untouched. */
html:not([data-theme="dark"]){
--gold-grad: linear-gradient(120deg,var(--gold-ink),var(--gold-3) 65%,var(--gold-3));
}
/* ============================================================
LIGHT MODE — TEXTURE AND STRUCTURE
Dark mode has a noise texture and the glow of its own depth to
hold a page together. Light had neither, so the gaps between
sections read as empty rather than as breathing room. This adds
paper grain, a faint drafting grid, and section rules so the
whitespace feels composed instead of unfilled.
============================================================ */
html:not([data-theme="dark"]) body{
background-image:
/* paper grain */
url("data:image/svg+xml;utf8,"),
/* drafting grid — the same 44px module the live canvas uses */
linear-gradient(#1d1a1409 1px,transparent 1px),
linear-gradient(90deg,#1d1a1409 1px,transparent 1px),
/* warm light from the top-right, cooler pool bottom-left */
radial-gradient(900px 520px at 78% -8%,#a9762e14,transparent 62%),
radial-gradient(700px 460px at 6% 104%,#a9762e0d,transparent 60%);
background-size:140px 140px,44px 44px,44px 44px,auto,auto;
background-attachment:scroll,scroll,scroll,fixed,fixed;
}
/* Section rhythm: a hairline and a counter so the eye has structure
to travel down, instead of jumping across undifferentiated space. */
html:not([data-theme="dark"]) .section-head{
position:relative;padding-top:26px;border-top:1px solid var(--line);
}
html:not([data-theme="dark"]) .section-head .kicker{
display:inline-flex;align-items:center;gap:10px;
}
html:not([data-theme="dark"]) .section-head .kicker::before{
content:"";width:22px;height:1px;background:var(--gold-2);opacity:.8;
}
/* tighten the vertical gaps — they were tuned for dark, where the
glow fills them; on paper they just read as void */
html:not([data-theme="dark"]) .section{padding:88px 0}
@media (max-width:720px){html:not([data-theme="dark"]) .section{padding:64px 0}}
/* The marquee band was a thin line floating in space on paper.
Give it a real surface so it separates hero from body. */
html:not([data-theme="dark"]) .marquee{
background:#fffefbcc;border-top-color:var(--line);border-bottom-color:var(--line);
}
html:not([data-theme="dark"]) .marquee-track span{color:var(--text-dim)}
/* Page headers on paper: anchor the header block with a rule under
the lede so it doesn't dissolve into the grid. */
html:not([data-theme="dark"]) .pagehead .lede{
padding-bottom:34px;border-bottom:1px solid var(--line);
}
/* ============================================================
STATS BAND — the numbers, counted up on entry
============================================================ */
.statband{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--line)}
.statband .stat{background:var(--paper);padding:38px 28px;position:relative;transition:background .3s}
.statband .stat:hover{background:var(--ink2)}
.stat .n{display:block;font-family:var(--font-serif);font-weight:600;
font-size:clamp(38px,5.2vw,62px);line-height:1;letter-spacing:.01em;
background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .l{display:block;margin-top:14px;font-family:var(--font-mono);font-size:11px;
letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.stat .s{display:block;margin-top:7px;font-size:13px;color:var(--text-dim2);line-height:1.5}
@media (max-width:860px){.statband{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.statband{grid-template-columns:1fr}}
/* ============================================================
PROCESS — numbered steps, connected by a rule
============================================================ */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;position:relative}
.process::before{content:"";position:absolute;left:0;right:0;top:23px;height:1px;
background:linear-gradient(90deg,transparent,var(--line) 8%,var(--line) 92%,transparent)}
.pstep{position:relative;padding-top:0}
.pstep .pnum{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
border:1px solid var(--line);background:var(--paper);position:relative;z-index:1;
font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;color:var(--gold-ink);
transition:border-color .3s,background .3s,color .3s}
.pstep:hover .pnum{border-color:#a9762e59;background:#a9762e12;color:var(--gold-ink)}
.pstep h3{margin-top:22px;font-family:var(--font-sans);font-weight:700;font-size:17px;
letter-spacing:-.01em;color:var(--ink)}
.pstep p{margin-top:10px;font-size:14px;line-height:1.7;color:var(--text-dim)}
@media (max-width:860px){.process{grid-template-columns:1fr;gap:26px}.process::before{display:none}
.pstep{display:grid;grid-template-columns:46px 1fr;gap:18px;align-items:start}
.pstep h3{margin-top:11px}.pstep .pnum{grid-row:span 2}
.pstep p{grid-column:2}}
/* ============================================================
TESTIMONIALS — hidden entirely until there are real ones
============================================================ */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media (max-width:980px){.quotes{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.quotes{grid-template-columns:1fr}}
.quote{background:var(--ink2);border:1px solid var(--line);border-radius:var(--radius);
padding:32px 30px;display:flex;flex-direction:column;gap:20px;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.quote:hover{transform:translateY(-3px)}
.quote .mk{font-family:var(--font-serif);font-size:44px;line-height:.6;color:var(--gold-2);opacity:.5}
.quote p{font-size:15px;line-height:1.75;color:var(--text);flex:1}
.quote .who{display:flex;align-items:center;gap:13px;padding-top:6px;border-top:1px solid var(--line2)}
.quote .av{width:40px;height:40px;border-radius:50%;flex:0 0 auto;overflow:hidden;
display:grid;place-items:center;background:var(--btn-grad);color:var(--on-gold);
font-family:var(--font-mono);font-size:13px;letter-spacing:.02em}
.quote .av img{width:100%;height:100%;object-fit:cover}
.quote .who b{display:block;font-weight:600;font-size:14px;color:var(--ink)}
.quote .who span{display:block;font-size:13px;color:var(--text-dim2);margin-top:2px}
/* ============================================================
FAQ — accordion, height-animated
============================================================ */
.faq{max-width:860px;margin:0 auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 46px 24px 0;position:relative;
font-family:var(--font-sans);font-weight:600;font-size:17px;letter-spacing:-.01em;
color:var(--ink);transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold-ink)}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease);opacity:.55}
.faq details[open] summary{color:var(--gold-ink)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .ans{overflow:hidden}
.faq .ans p{padding:0 46px 26px 0;font-size:15px;line-height:1.78;color:var(--text-dim)}
.faq details[open] .ans{animation:faqOpen .38s var(--ease)}
@keyframes faqOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* light-mode surfaces for the new blocks */
html:not([data-theme="dark"]) .statband .stat{background:#fffefb}
html:not([data-theme="dark"]) .statband .stat:hover{background:#fffdf7}
html:not([data-theme="dark"]) .statband{box-shadow:0 1px 2px #1d1a1408,0 14px 34px -18px #1d1a141f}
html:not([data-theme="dark"]) .pstep .pnum{background:#fffefb}
html:not([data-theme="dark"]) .quote{box-shadow:0 1px 2px #1d1a1408,0 14px 34px -18px #1d1a141f}
html:not([data-theme="dark"]) .quote:hover{box-shadow:0 2px 4px #1d1a140a,0 22px 48px -20px #1d1a142b}
/* ============================================================
TEMPLATE-LANGUAGE PATTERNS
Distilled from the six Framer references: a status pill above the
headline, a bento grid of separated rounded cards, a tabbed
capability showcase, and an honest comparison table.
============================================================ */
/* --- status pill: every one of the six opens with one --- */
.hero-pill{display:inline-flex;align-items:center;gap:11px;margin:0 auto 30px;
padding:8px 8px 8px 15px;border-radius:100px;border:1px solid var(--line);
background:var(--ink2);font-family:var(--font-mono);font-size:11px;
letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);
position:relative;z-index:2;width:max-content}
.hero-pill .dot{width:7px;height:7px;border-radius:50%;background:#3fbf6a;
box-shadow:0 0 0 0 #3fbf6a99;animation:pulseDot 2.4s ease-out infinite;flex:0 0 auto}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 #3fbf6a80}70%{box-shadow:0 0 0 8px #3fbf6a00}100%{box-shadow:0 0 0 0 #3fbf6a00}}
.hero-pill b{font-weight:500;color:var(--ink)}
.hero-pill .yr{padding:5px 11px;border-radius:100px;background:var(--ink3);
color:var(--text-dim2);font-size:11px;letter-spacing:.12em}
@media (prefers-reduced-motion:reduce){.hero-pill .dot{animation:none}}
/* --- bento: separated rounded cards instead of one flat slab --- */
.feat-grid{gap:18px;background:transparent;border:0;border-radius:0;overflow:visible}
.feat{border:1px solid var(--line);border-radius:20px;padding:34px 30px;
display:flex;flex-direction:column;
transition:transform .4s var(--ease),border-color .3s,background .3s}
.feat:hover{transform:translateY(-4px);border-color:#a9762e40}
.feat .go{margin-top:auto;padding-top:20px}
.feat-grid a:nth-child(1) h3{font-size:clamp(22px,2.6vw,30px)}
.feat-grid a:nth-child(1) p{font-size:15px;max-width:42ch}
@media (max-width:900px){.feat-grid{gap:14px}}
/* --- tabbed capability showcase (the Ailex pattern) --- */
.showcase{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--ink2)}
.sc-tabs{display:flex;gap:2px;padding:10px;background:var(--ink3);flex-wrap:wrap}
.sc-tab{flex:1;min-width:140px;padding:13px 18px;border-radius:14px;
font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
color:var(--text-dim);transition:background .25s,color .25s;text-align:center;cursor:pointer}
.sc-tab:hover{color:var(--ink)}
.sc-tab.on{background:var(--ink2);color:var(--gold-ink);box-shadow:0 1px 3px #00000014}
.sc-panels{padding:44px 44px 48px}
.sc-panel{display:none}
.sc-panel.on{display:grid;grid-template-columns:1.1fr .9fr;gap:46px;align-items:center;
animation:scIn .45s var(--ease)}
@keyframes scIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sc-panel h3{font-family:var(--font-sans);font-weight:800;font-size:clamp(22px,2.8vw,32px);
letter-spacing:-.02em;line-height:1.14;color:var(--ink);margin-bottom:16px}
.sc-panel p{font-size:15px;line-height:1.75;color:var(--text-dim);margin-bottom:22px}
.sc-list{display:flex;flex-direction:column;gap:11px}
.sc-list span{display:flex;align-items:flex-start;gap:11px;font-size:14px;color:var(--text)}
.sc-list span::before{content:"";width:16px;height:16px;border-radius:50%;flex:0 0 auto;margin-top:3px;
background:var(--gold-grad);
-webkit-mask:url("data:image/svg+xml;utf8,") center/12px no-repeat;
mask:url("data:image/svg+xml;utf8,") center/12px no-repeat}
.sc-visual{aspect-ratio:4/3;border-radius:14px;border:1px solid var(--line);overflow:hidden;
position:relative;background:linear-gradient(155deg,#17171b,#0c0c0e)}
.sc-visual .scico{position:absolute;inset:0;display:grid;place-items:center}
.sc-visual .scico .ico{width:84px;height:84px;color:var(--gold-2);opacity:.9}
.sc-visual::after{content:"";position:absolute;inset:0;
background:radial-gradient(60% 60% at 30% 22%,#a9762e30,transparent 62%)}
@media (max-width:860px){.sc-panels{padding:30px 24px 34px}
.sc-panel.on{grid-template-columns:1fr;gap:28px}
.sc-visual{order:-1;aspect-ratio:16/9}}
/* --- comparison table (the Projectise pattern) --- */
.compare{border:1px solid var(--line);border-radius:20px;overflow:hidden}
.crow{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;align-items:center;
border-bottom:1px solid var(--line)}
.crow:last-child{border-bottom:0}
.crow>*{padding:18px 22px;font-size:14px}
.crow.head>*{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
text-transform:uppercase;color:var(--text-dim2);padding:16px 22px}
.crow.head .me{color:var(--gold-ink)}
.crow .lbl{color:var(--text);font-weight:500}
.crow .me{background:#a9762e0d;color:var(--ink);font-weight:600;height:100%;display:flex;align-items:center}
.crow.head .me{background:#a9762e0d;height:100%}
.crow .cell{color:var(--text-dim2)}
.yes::before,.no::before{content:"";display:inline-block;width:15px;height:15px;margin-right:9px;
vertical-align:-2px;background-size:contain;background-repeat:no-repeat;background-position:center}
.yes::before{background-image:url("data:image/svg+xml;utf8,")}
.no::before{background-image:url("data:image/svg+xml;utf8,");opacity:.6}
@media (max-width:820px){
.compare{border:0;border-radius:0}
.crow{grid-template-columns:1fr;border:1px solid var(--line);border-radius:14px;margin-bottom:12px}
.crow.head{display:none}
.crow>*{padding:12px 18px;border-bottom:1px solid var(--line2)}
.crow>*:last-child{border-bottom:0}
.crow .lbl{font-weight:700;background:var(--ink3)}
.crow .cell::before,.crow .me::before{content:attr(data-col);display:block;
font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
color:var(--text-dim2);margin-bottom:5px}
.crow .me{display:block}
}
/* light-mode surfaces for the new patterns */
html:not([data-theme="dark"]) .hero-pill{background:#fffefbe6;box-shadow:0 1px 2px #1d1a1408}
html:not([data-theme="dark"]) .showcase{background:#fffefb;
box-shadow:0 1px 2px #1d1a1408,0 18px 44px -22px #1d1a1424}
html:not([data-theme="dark"]) .sc-tabs{background:#f3f1ea}
html:not([data-theme="dark"]) .sc-tab.on{background:#fffefb}
html:not([data-theme="dark"]) .sc-visual{background:linear-gradient(155deg,#f6f3ea,#ece7d9)}
html:not([data-theme="dark"]) .compare{background:#fffefb;
box-shadow:0 1px 2px #1d1a1408,0 18px 44px -22px #1d1a1424}
/* ============================================================
CARD MARQUEE — the Habitline drifting stack
A continuous horizontal rail of cards rather than text. Two
copies of the track run back to back so the loop is seamless;
hovering slows it rather than stopping it dead, which reads as
responsive instead of broken.
============================================================ */
.railwrap{position:relative;overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.rail{display:flex;gap:16px;width:max-content;animation:railRun 46s linear infinite}
.railwrap:hover .rail{animation-duration:110s}
@keyframes railRun{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.rcard{width:250px;flex:0 0 auto;border:1px solid var(--line);border-radius:20px;
padding:24px 22px;background:var(--ink2);display:flex;flex-direction:column;gap:12px;
transition:transform .35s var(--ease),border-color .3s}
.railwrap:hover .rcard:hover{transform:translateY(-5px);border-color:#a9762e4d}
.rcard .rc-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
background:#a9762e14;border:1px solid #a9762e26}
.rcard .rc-ico .ico{width:19px;height:19px;color:var(--gold-2)}
.rcard b{font-weight:600;font-size:15px;color:var(--ink);letter-spacing:-.01em}
.rcard span{font-size:13px;line-height:1.6;color:var(--text-dim2)}
@media (prefers-reduced-motion:reduce){
.rail{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
}
/* ============================================================
STACK BLOCKS — Habitline's expandable feature list
One open at a time, the body height animated rather than
snapped, with a rule that fills as the row opens.
============================================================ */
.stack{border-top:1px solid var(--line)}
.srow{border-bottom:1px solid var(--line);position:relative}
.srow::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;
background:var(--gold-grad);transition:width .55s var(--ease)}
.srow.on::after{width:100%}
.shead{width:100%;display:grid;grid-template-columns:56px 1fr 30px;align-items:center;gap:18px;
padding:26px 0;text-align:left;cursor:pointer}
.shead .sn{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--text-dim2);
transition:color .3s}
.srow.on .shead .sn{color:var(--gold-ink)}
.shead h3{font-family:var(--font-sans);font-weight:700;font-size:clamp(18px,2.2vw,23px);text-transform:none;
letter-spacing:-.015em;color:var(--ink);transition:color .3s}
.srow.on .shead h3{color:var(--gold-ink)}
.shead .sx{width:22px;height:22px;position:relative;justify-self:end}
.shead .sx::before,.shead .sx::after{content:"";position:absolute;background:currentColor;
left:50%;top:50%;transition:transform .4s var(--ease),opacity .3s}
.shead .sx::before{width:13px;height:1.5px;transform:translate(-50%,-50%)}
.shead .sx::after{width:1.5px;height:13px;transform:translate(-50%,-50%)}
.srow.on .shead .sx::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.sbody{overflow:hidden;height:0;transition:height .5s var(--ease)}
.sbody-in{padding:0 0 30px 74px;display:grid;grid-template-columns:1.25fr .75fr;gap:36px;align-items:start}
.sbody-in p{font-size:15px;line-height:1.78;color:var(--text-dim)}
.sbody-in .stags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.sbody-in .stags span{font-family:var(--font-mono);font-size:11px;letter-spacing:.09em;
text-transform:uppercase;color:var(--text-dim);border:1px solid var(--line);
border-radius:100px;padding:6px 12px}
.skpi{display:grid;gap:12px}
.skpi div{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--ink2)}
.skpi b{display:block;font-family:var(--font-serif);font-weight:600;font-size:27px;line-height:1;
background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.skpi span{display:block;margin-top:6px;font-family:var(--font-mono);font-size:11px;
letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim2)}
@media (max-width:820px){
.shead{grid-template-columns:40px 1fr 24px;gap:12px;padding:22px 0}
.sbody-in{grid-template-columns:1fr;gap:22px;padding-left:52px}
}
/* ============================================================
CORNER MARK — Majd's "©2026" register mark
============================================================ */
.cornermark{position:absolute;top:104px;right:34px;z-index:2;
font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
color:var(--text-dim2);display:flex;align-items:center;gap:9px;pointer-events:none}
.cornermark::before{content:"";width:26px;height:1px;background:var(--line)}
@media (max-width:860px){.cornermark{display:none}}
/* --- subcategory tags on the bento cards (Majd / Portavia) --- */
.feat .subtags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.feat .subtags span{font-family:var(--font-mono);font-size:11px;letter-spacing:.09em;
text-transform:uppercase;color:var(--text-dim2);border:1px solid var(--line);
border-radius:100px;padding:5px 10px;transition:border-color .3s,color .3s}
.feat:hover .subtags span{border-color:#a9762e33;color:var(--text-dim)}
/* light surfaces for the new blocks */
html:not([data-theme="dark"]) .rcard{background:#fffefb;box-shadow:0 1px 2px #1d1a1408,0 10px 26px -16px #1d1a141c}
html:not([data-theme="dark"]) .skpi div{background:#fffefb}
/* ============================================================
HERO — REBUILT AS AN EDITORIAL SPLIT
The old hero was centre-stacked: mark, wordmark, tagline, buttons,
all on one axis. That composition is the single biggest reason the
page read as a 2019 portfolio template no matter what got added
below it. None of the six references centre their hero.
This is a two-column asymmetric layout — the statement on the left
at real display scale, a supporting column on the right — and it
overrides the centred rules above rather than replacing them, so
every other page keeps working untouched.
============================================================ */
.hero{text-align:left;padding:150px 0 96px;min-height:88vh;display:flex;align-items:center}
.hero > .wrap{width:100%}
/* --- the statement, full width ------------------------------- */
.hero .hero-pill{margin:0 0 40px}
/* One oversized statement spanning the whole container. The side stat
cards were removed: the same three numbers already appear in the stats
band further down the page, so the hero was showing them twice AND
giving up half its width to do it. Full width is the impact. */
.hero-h{margin:0;font-family:var(--font-sans);font-weight:800;
font-size:clamp(44px,8.6vw,132px);line-height:.92;letter-spacing:-.045em;
color:var(--ink);max-width:none}
.hero-h .hl{display:block}
.hero-h .hl.sub{color:var(--text-dim);font-weight:700}
.hero-h em{font-style:normal;
background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* punctuation in gold — a small editorial tell that costs nothing */
.hero-h i{font-style:normal;color:var(--gold-2)}
.hero-rule{height:1px;margin:56px 0 28px;
background:linear-gradient(90deg,var(--line),var(--line) 72%,transparent)}
/* the footer row carries what the sidebar used to, laid horizontally */
.hero-foot{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:end}
.hf-a .rotator{justify-content:flex-start;margin:0 0 16px;font-size:clamp(17px,1.8vw,21px)}
.hero-sub{font-size:15px;line-height:1.7;color:var(--text-dim);max-width:52ch;margin:0}
.hf-b{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.hf-b .ctas{margin:0;justify-content:flex-start}
.hf-loc{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
text-transform:uppercase;color:var(--text-dim2)}
.hero .rb-mark.mark,.hero .word,.hero .divider,.hero .tag,.hero .role,.hero .cats{display:none}
/* the hero is a flex container now, so the cue has to be taken out of
flow or it lands beside the content instead of under it */
.hero .scrollcue{position:absolute;left:32px;bottom:26px;margin:0;align-items:flex-start;z-index:2}
@media (max-width:900px){
.hero-foot{grid-template-columns:1fr;gap:30px;align-items:start}
.hero-rule{margin:40px 0 24px}
.hero .hero-pill{margin-bottom:30px}
}
@media (max-width:640px){
.hero{padding:146px 0 84px;min-height:0}
.hero-h{font-size:clamp(34px,11vw,52px);line-height:.98}
.hero .scrollcue{display:none}
}
/* Section heads: left-aligned with real scale, and the eyebrow rule
that the references all use to anchor a section start. */
.section-head{position:relative}
.section-head .kicker{display:inline-flex;align-items:center;gap:11px}
.section-head .kicker::before{content:"";width:26px;height:1px;background:var(--gold-2);opacity:.85}
.h-lg{font-size:clamp(30px,4.8vw,52px);letter-spacing:-.03em;line-height:1.03}
/* page can't scroll behind the boot curtain */
body.booting{overflow:hidden}
/* ============================================================
HEADER — REBUILT AS A FLOATING RAIL
The old nav was a full-width bar pinned to the top edge, which
is the most default shape a header can have. This detaches it:
it sits inset from the edges, and on scroll it contracts into a
narrower blurred pill with a lit border. The link group gets its
own inner rail with a sliding indicator that tracks the active
and hovered item, so the nav has a moving part of its own.
============================================================ */
#nav{top:18px;left:18px;right:18px;padding:14px 18px 14px 22px;
border:1px solid transparent;border-radius:100px;
transition:background .45s var(--ease),padding .45s var(--ease),
border-color .45s var(--ease),box-shadow .45s var(--ease),
top .45s var(--ease),left .45s var(--ease),right .45s var(--ease),
backdrop-filter .45s var(--ease)}
#nav.scrolled{
top:12px;left:max(18px,calc(50% - var(--wrap) / 2));right:max(18px,calc(50% - var(--wrap) / 2));
padding:10px 12px 10px 20px;
background:#0e0e11cc;backdrop-filter:blur(16px) saturate(1.3);
border-color:#ffffff14;
box-shadow:0 18px 44px -24px #000000b3,inset 0 1px 0 #ffffff0f}
html:not([data-theme="dark"]) #nav.scrolled{
background:#fffdf8d9;border-color:#1d1a1418;
box-shadow:0 18px 44px -26px #1d1a1433,inset 0 1px 0 #ffffffcc}
/* link group becomes its own rail with a sliding pill behind it */
#navlinks{position:relative;gap:4px;padding:4px;border-radius:100px;
border:1px solid transparent;transition:border-color .45s var(--ease),background .45s var(--ease)}
#nav.scrolled #navlinks{border-color:var(--line2)}
#navlinks::before{content:"";position:absolute;z-index:0;top:4px;bottom:4px;
left:var(--ix,0px);width:var(--iw,0px);border-radius:100px;
background:#a9762e1f;border:1px solid #a9762e2e;opacity:0;
transition:left .45s var(--ease),width .45s var(--ease),opacity .3s}
#navlinks.has-ind::before{opacity:1}
#navlinks a{position:relative;z-index:1;padding:9px 15px;border-radius:100px;
transition:color .28s}
/* the underline was doing the indicator's job — the pill does it now */
#navlinks a::after{display:none}
#navlinks a:hover,#navlinks a.on{color:var(--ink)}
#navcta{padding:11px 22px;transition:.3s var(--ease)}
#navcta:hover{transform:translateY(-1px);box-shadow:0 8px 20px -10px #a9762e99}
.navtools{gap:7px}
.navtool{transition:transform .3s var(--ease),border-color .3s,background .3s}
.navtool:hover{transform:translateY(-1px)}
/* the hero sits under a floating bar now, so it needs its own top room */
.hero{padding-top:196px}
@media (max-width:640px){.hero{padding-top:146px}}
@media (max-width:860px){
#nav{top:10px;left:10px;right:10px;padding:12px 14px}
#nav.scrolled{top:8px;left:10px;right:10px}
}
/* ============================================================
PHONE PASS
The layout already reflowed correctly at every width — these are
the touch-specific problems that width testing doesn't catch:
targets too small for a thumb, type below comfortable reading
size, and one control that makes no sense without a keyboard.
============================================================ */
@media (max-width:860px){
/* Two controls that only make sense with a keyboard and a desk: a ⌘K
button advertises a shortcut the phone cannot press, and a sound
toggle for interface clicks is noise next to the one control people
actually look for here. Both stay on desktop. */
.navtool[data-cmdk-trigger],
.navtool[data-sound-toggle]{display:none}
/* the theme control is the only tool left, so it gets a real surface
instead of reading as an empty ring */
.navtool[data-theme-toggle]{background:#ffffff0a;border-color:#ffffff2e;color:var(--ink)}
html:not([data-theme="dark"]) .navtool[data-theme-toggle]{background:#1d1a140a;border-color:#1d1a142e}
/* the wordmark was wrapping onto two lines and crowding the tools */
#nav .brand{padding:7px 0;min-height:44px;align-items:center}
#nav .brand .t{font-size:15px;letter-spacing:.1em;white-space:nowrap}
#nav .brand .t i{margin-left:.28em}
#nav{padding:10px 12px}
/* thumb-sized targets: 44px is the Apple/Android minimum, and the
tools were 34px with 23px-tall footer links */
.navtool{width:44px;height:44px}
#navBurger{width:44px;height:44px}
#navBurger span{left:11px;right:11px}
#navBurger span:nth-child(1){top:17px}
#navBurger span:nth-child(2){top:24px}
#navBurger span:nth-child(3){top:31px}
.f-col a,.f-col span{padding:9px 0;margin-bottom:2px}
.social-row{padding:17px 0}
.copy-badge{min-height:44px}
.sc-tab{min-height:46px}
.faq summary{padding-top:20px;padding-bottom:20px}
/* 10.5px is fine on a desktop at arm's length, not on a phone */
/* these need to out-specify their base rules (.feat .subtags span etc),
so they're written at matching depth rather than as bare selectors */
.chips span,.sig-facts span,.stat .l,.hf-loc,.contact-chips span,
.sc-list span,.feat .subtags span,.sbody-in .stags span,
.skpi span,.wlive,.f-col h2,.f-col h4{font-size:12px}
.kicker{font-size:12px;letter-spacing:.2em}
/* the last few labels still under a comfortable phone reading size */
.hero-pill .yr,.vruntime,.est-sub,.feat .go,.social-row .go,
.boot-hint{font-size:12px}
}
/* very small phones: the nav tools and brand stop competing */
@media (max-width:400px){
#nav .brand .t{font-size:15px;letter-spacing:.07em}
.navtools{gap:2px}
.hero .hero-pill{font-size:12px;letter-spacing:.08em;padding:7px 6px 7px 11px;gap:8px}
}
/* ============================================================
THE CARD — one object, two faces
Front is the RB mark, back is the portrait. It twists on its
vertical axis to show the other side, and the same card (a fixed
copy of it) rides down into the About frame on scroll. See
initPortraitCard() in main.js.
============================================================ */
.sig-portrait{background:none;border:0;overflow:visible;aspect-ratio:4/5;
margin-left:6%;position:relative;width:100%}
.flipcard{position:absolute;inset:0;perspective:1500px}
.fc{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
/* each face is a finished card in its own right — the one turned away
is hidden by the backface, not by opacity */
.fc-face{position:absolute;inset:0;border-radius:20px;overflow:hidden;
backface-visibility:hidden;-webkit-backface-visibility:hidden;
border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
box-shadow:0 26px 60px -26px #00000096}
.fc-back{transform:rotateY(180deg)}
.fc-back img{width:100%;height:100%;object-fit:cover;display:block}
.fc-front{background:radial-gradient(circle at 38% 26%,#a9762e1c,transparent 55%),
radial-gradient(circle at 68% 82%,#a9762e12,transparent 60%),
linear-gradient(160deg,#efece1,#e2ddcc);box-shadow:inset 0 1px 0 #ffffff90,0 26px 60px -26px #00000030}
.fc-front .rb-mark{width:44%}
.fc-front .rb-mark img{width:100%;height:auto;object-fit:contain}
[data-theme="dark"] .fc-back{background:linear-gradient(160deg,#1a1a1e,#0d0d10)}
[data-theme="dark"] .fc-front{background:radial-gradient(circle at 40% 30%,#17171b,#09090b 75%);
box-shadow:0 26px 60px -26px #00000096}
/* the flip is driven by scroll now — there is nothing to click, so the
old "Flip" affordance is gone with it */
@media (max-width:860px){.sig-portrait{width:100%;max-width:280px;margin:0 auto}}
@media (prefers-reduced-motion:reduce){.fc{transition:none}}
/* ============================================================
THE RIDE — the same card, flying between the two slots.
Scroll position drives it; the slot it is not occupying holds
its space but shows nothing, so layout never moves.
============================================================ */
#flyCard{position:fixed;top:0;left:0;z-index:150;pointer-events:none;
visibility:hidden;perspective:1500px;will-change:transform,width,height}
#flyCard.is-flying{visibility:visible}
.fly-tilt{position:absolute;inset:0;transform-style:preserve-3d}
#flyCard .flipcard{perspective:none;transform-style:preserve-3d}
#flyCard .fc-face{box-shadow:0 48px 104px -44px #000000cc}
/* the About frame becomes a landing pad: the card brings its own
surface, so the empty frame underneath steps out of the way */
.about-teaser .frame{position:relative}
.about-teaser .frame.relay-dst{overflow:visible;background:none;border-color:transparent;box-shadow:none}
.about-teaser .frame.relay-dst > .rb-mark{display:none}
/* narrow screens: nothing travels, so the frame holds the portrait itself */
.about-teaser .frame.relay-static{overflow:hidden}
.about-teaser .frame.relay-static > .rb-mark{display:none}
.frame-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
display:block;border-radius:inherit}
.relay-away{opacity:0!important}
.relay-away *{pointer-events:none}
@media (max-width:1099px){#flyCard{display:none}}
@media (prefers-reduced-motion:reduce){#flyCard{display:none}}
/* ============================================================
VIDEO / LOGO CARDS — glass shell, film-shaped window
The window takes its aspect from --ar, which each card sets
from the real dimensions of its file, so a vertical edit is
never letterboxed into a landscape hole.
============================================================ */
.grid.masonry{display:block;columns:3;column-gap:26px}
@media (max-width:1000px){.grid.masonry{columns:2}}
@media (max-width:640px){.grid.masonry{columns:1}}
.grid.masonry > *{break-inside:avoid;-webkit-column-break-inside:avoid;
margin:0 0 26px;display:block;width:100%}
.vcard{position:relative;isolation:isolate;border-radius:20px;overflow:hidden;
background:linear-gradient(168deg,#ffffff12,#ffffff06 44%,#ffffff02);
backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
border:1px solid #ffffff1c;
box-shadow:inset 0 1px 0 #ffffff16, 0 14px 34px -24px #000000bf;
transform-origin:50% 50%;
transition:box-shadow .45s var(--ease), border-color .45s var(--ease), transform .38s var(--ease)}
/* the hovered tile lifts clear of the ones around it */
.vcard:hover{z-index:6;border-color:#a9762e55;
box-shadow:inset 0 1px 0 #ffffff24,
0 34px 74px -26px #000000e6,
0 0 0 1px #a9762e22,
0 20px 60px -32px #a9762e66}
/* a soft sheen that tracks the cursor — the glass catching the light */
.vcard::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),#ffffff16,transparent 62%);
opacity:0;transition:opacity .4s var(--ease)}
.vcard:hover::after{opacity:1}
/* the window itself sits inside the glass rather than flush to its edge */
.vcard .vslot{aspect-ratio:var(--ar,16/10);position:relative;overflow:hidden;
margin:10px 10px 0;border-radius:14px;border:1px solid #ffffff12;background:#0c0b0a}
.vcard .vposter{border-radius:inherit}
.vmeta{padding:18px 20px 20px}
html:not([data-theme="dark"]) .vcard{
background:linear-gradient(168deg,#fffefbe8,#f7f4eccc 46%,#f3f0e6b8);
border-color:#1d1a1418;
box-shadow:inset 0 1px 0 #ffffff, 0 12px 30px -24px #1d1a1445}
html:not([data-theme="dark"]) .vcard:hover{border-color:#a9762e45;
box-shadow:inset 0 1px 0 #ffffff, 0 30px 62px -28px #1d1a1459, 0 0 0 1px #a9762e1f}
html:not([data-theme="dark"]) .vcard::after{
background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),#ffffffd9,transparent 62%)}
html:not([data-theme="dark"]) .vcard .vslot{border-color:#1d1a141f}
@media (prefers-reduced-motion:reduce){
.vcard{transition:box-shadow .2s linear,border-color .2s linear}
}
/* ---------- wider page: keep the long-form columns readable ---------- */
.about-teaser p,.sig-body p{max-width:62ch}
/* ============================================================
CARD HOVER — smooth, and clearly on top
The lift is pure CSS on a single transform, so it interpolates
on the compositor instead of being re-set from a mousemove
handler on every frame (which is what made it judder). Only the
sheen position still comes from the pointer, and that writes two
custom properties, never a transform.
============================================================ */
.vcard{transition:
transform .55s cubic-bezier(.16,.84,.24,1),
box-shadow .5s cubic-bezier(.16,.84,.24,1),
border-color .4s var(--ease),
opacity .4s var(--ease),
filter .4s var(--ease)}
.vcard:hover,.vcard:focus-visible{transform:translateY(-10px) scale(1.035)}
/* everything else steps back so the raised tile reads as the subject */
.grid.masonry:has(.vcard:hover) .vcard,
.grid.masonry:has(.vcard:focus-visible) .vcard{opacity:.42;filter:saturate(.72) brightness(.86)}
.grid.masonry:has(.vcard:hover) .vcard:hover,
.grid.masonry:has(.vcard:focus-visible) .vcard:focus-visible{opacity:1;filter:none}
.vcard.playing{opacity:1!important;filter:none!important}
.vcard:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px;z-index:6}
/* stop control — only there once something is actually playing */
.vstop{position:absolute;top:10px;right:10px;z-index:4;width:30px;height:30px;border-radius:50%;
display:none;align-items:center;justify-content:center;cursor:pointer;
border:1px solid #ffffff2e;background:#0b0b0cb3;backdrop-filter:blur(8px);
transition:background .25s,border-color .25s,transform .25s}
.vcard.playing .vstop{display:flex}
.vstop:hover{background:#0b0b0ce6;border-color:#ffffff59;transform:scale(1.08)}
.vstop svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round}
@media (prefers-reduced-motion:reduce){
.vcard{transition:box-shadow .2s linear,opacity .2s linear}
.vcard:hover,.vcard:focus-visible{transform:none}
}
/* ============================================================
PRODUCTION AUDIT FIXES
Everything below came out of the Playwright suite in qa/.
============================================================ */
/* an animation nobody can see should not be running — see
initIdleAnimations() in main.js */
.anim-idle,.anim-idle *{animation-play-state:paused!important}
.anim-hidden *{animation-play-state:paused!important}
/* a social profile with no link yet is text, not a control */
.f-col span.off,.social-row span.off{color:var(--text-dim2);cursor:default}
@media (max-width:860px){
/* 40–43px targets read as "big enough" on a desktop and miss under a
thumb. Everything tappable clears 44. */
.f-col a,.f-col span{padding:11px 0;margin-bottom:2px}
.est-chip{min-height:44px;display:inline-flex;align-items:center}
.btn{min-height:44px}
input,select,textarea{min-height:44px;padding-top:10px;padding-bottom:10px}
.cmdk-input-row input{min-height:44px}
/* the last labels still below comfortable phone reading size */
.hero-pill{font-size:12px}
.tl-item .period b.now{font-size:12px}
.contact-side h2,.contact-side h4,.c-col h4,.f-col h2,.f-col h4,h4{font-size:12px}
}
/* ============================================================
FOCUS — the play and stop controls are the tab stops now
============================================================ */
.vplay:focus-visible,.vstop:focus-visible{
outline:2px solid var(--gold-2);outline-offset:3px}
.vcard:has(.vplay:focus-visible){z-index:6}
/* ============================================================
LANDMARKS & SKIP LINK
============================================================ */
.skip{position:absolute;left:12px;top:-60px;z-index:1000;
padding:12px 18px;border-radius:14px;
background:var(--ink);color:var(--paper);
font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;
text-transform:uppercase;text-decoration:none;
transition:top .25s var(--ease)}
.skip:focus-visible{top:12px;outline:2px solid var(--gold-2);outline-offset:3px}
/* ============================================================
CONTRAST — measured, not guessed
axe reports "background could not be determined" over gradients,
images and pseudo-elements and leaves them for a human. Each fix
below comes from sampling the real rendered backdrop behind the
text and computing the actual ratio.
============================================================ */
/* The sub-page header art sits directly behind the floating nav, so the
links were reading 3.0:1 against a warm blurred photo. One scrim under
the nav fixes every control in it at once. */
#nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:linear-gradient(180deg,#f5f4eef2 0%,#f5f4ee9e 62%,#f5f4ee00 100%)}
[data-theme="dark"] #nav::before{
background:linear-gradient(180deg,#09090bf2 0%,#09090ba6 62%,#09090b00 100%)}
/* and the same art behind the page title, kicker and lede */
.pagehead::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:linear-gradient(180deg,#f5f4eecc 0%,#f5f4ee73 55%,#f5f4ee00 100%)}
[data-theme="dark"] .pagehead::after{
background:linear-gradient(180deg,#09090bcc 0%,#09090b8c 55%,#09090b00 100%)}
.pagehead>.wrap{position:relative;z-index:2}
/* "2026" in the hero pill measured 3.78:1 against the pill fill */
.hero-pill .yr{color:var(--text)}
/* the live badge: too dark on dark, too light on light */
.wlive.on{color:#3ec27a;border-color:#3ec27a33;background:#3ec27a0d}
.wlive.on::before{background:#3ec27a;box-shadow:0 0 8px #3ec27a55}
html:not([data-theme="dark"]) .wlive.on{color:#0c6236;border-color:#0c623633;background:#0c62360d}
html:not([data-theme="dark"]) .wlive.on::before{background:#0c6236;box-shadow:0 0 8px #0c623655}
/* ⌘K sat at 2.4–4.5:1 depending on what was behind the nav; the scrim
above does most of it, this finishes the job */
.navtool kbd{color:var(--text)}
/* the giant full stop after "AI" measured 2.95:1 on paper — 0.05 short */
html:not([data-theme="dark"]) .hero-h .hl i{color:var(--gold-3)}
/* service card numerals sit on the card's cover art, not on flat ink */
[data-theme="dark"] .svc-card .n{color:var(--gold-1)}
/* ============================================================
USABILITY PASS
Everything below answers a numbered finding from the
heuristics audit. Kept at the end so the reasoning for each
override sits next to it.
============================================================ */
/* #3 — the tab and the copy badge were drifting their own button
ramps; they now share the one the .btn family uses */
.sc-tab{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.copy-badge{font-size:12px;letter-spacing:.08em;text-transform:uppercase}
/* #5 · #7 · #8 · #12 — the small-label ramp bottomed out at 9.5px and the
tags were a thin dark outline on a dark page. One floor of 11px, and a
fill behind them so they register as objects rather than hairlines. */
.feat .subtags span,.skpi span,.sbody-in .stags span{font-size:12px}
.feat .subtags span{border-color:#ffffff24;background:#ffffff0a;color:var(--text-dim)}
.feat:hover .subtags span{border-color:#a9762e55;background:#a9762e12;color:var(--ink)}
html:not([data-theme="dark"]) .feat .subtags span{border-color:#1d1a1426;background:#1d1a1408}
.skpi span{color:var(--text-dim)}
.hero-pill .yr,.sig-facts span{font-size:12px}
/* #11 — Cormorant Garamond ships old-style figures: the 1 sits at x-height
like a small-cap I and the 0 is a circle. Fine in running prose, wrong
for numbers people are meant to read as data. */
.stat .n,.skpi b,.pnum,.est-total b,.tl-item .period{
font-variant-numeric:lining-nums tabular-nums;
font-feature-settings:"lnum" 1,"tnum" 1}
/* #13 — the discipline cards are links, but the only signifier appeared on
hover, which a touch device never fires */
.feat .go{opacity:.72;transform:none}
.feat:hover .go,.feat:focus-visible .go{opacity:1}
/* #17 — the bar sat 14px off the top edge at rest */
#nav{padding:22px 32px 18px}
@media (max-width:860px){#nav{padding:12px 12px 10px}}
/* #19 · #20 — the tall card left its tags floating mid-air while the short
ones pinned theirs near the base. One column layout, tags always last. */
.feat{display:flex;flex-direction:column}
.feat .subtags{margin-top:auto;padding-top:20px}
.feat .go{margin-top:14px;padding-top:0}
/* #3 (cont.) — the expandable stack header is a button too */
.shead{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}