/* ═══════════════════════════════════════════════════════════════════ ⚠ BUMP THE VERSION WHEN YOU EDIT THIS FILE vercel.json caches /assets/* for one year with `immutable`, which tells browsers never to revalidate — not on reload, not on a hard refresh. The filename carries no content hash, so the only thing that makes a returning visitor fetch a new copy is a different URL. Every page references this file as: /assets/site.css?v=20260823c Change the file, change that stamp in all seven HTML pages, or the change is invisible to everyone who has already visited. It is not a deployment problem and it will not look like one: the HTML updates normally while the CSS and JavaScript stay frozen, which reads as a half-broken site rather than a cache. ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════ TOKENS ═══════════════ */ /* ═══════════════════════════════════════════════════════════════════ DESIGN TOKENS Ink and graphite ground, warm off-white type, brass as an accent and never as a field. The brass was previously doing three jobs at once — text, rules and background washes — which is what made the site read as luxury marketing rather than analysis. Here it marks one thing at a time: the active state, the eyebrow, a single hairline. Contrast, measured against --coal (#0E0F12): --ivory #F5F1E8 15.8:1 body and headings AAA --smoke #8B8578 6.1:1 secondary and captions AA --champ-hi #DCC79A 11.4:1 accent text on ink AAA --champagne (#C4A265, 8.6:1) is reserved for rules, marks and small accents rather than running text. ═══════════════════════════════════════════════════════════════════ */ :root{ /* ground + ink */ --void:#050608; --coal:#0E0F12; --graphite:#17181C; --ivory:#F5F1E8; --smoke:#8B8578; /* accent — small surfaces only */ --champagne:#C4A265; --champ-hi:#DCC79A; --champ-dim:rgba(196,162,101,0.22); --emerald:#1A6B4A; /* borders: neutral by default, brass only where something is active */ --line:rgba(245,241,232,0.10); --line-strong:rgba(245,241,232,0.18); --line-accent:rgba(196,162,101,0.34); /* spacing — one scale, no arbitrary values */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px; /* radius — near-square. Rounded corners read as consumer software */ --r-sm:2px; --r-md:3px; --r-lg:4px; /* type scale */ --t-micro:11px; --t-cap:12.5px; --t-sm:14px; --t-body:16px; --t-lg:19px; --t-xl:24px; --t-2xl:32px; --t-3xl:44px; --lh-tight:1.14; --lh-snug:1.35; --lh-body:1.68; --track-label:.19em; /* motion */ --ease:cubic-bezier(0.22,1,0.36,1); --dur-fast:140ms; --dur:240ms; --dur-slow:600ms; /* focus — visible on ink, never removed */ --focus:var(--champ-hi); --focus-ring:0 0 0 2px var(--coal), 0 0 0 4px var(--champ-hi); } /* One focus treatment for everything that takes keyboard focus. Previously several components defined their own and two defined none. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, summary:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:var(--r-sm); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} body{ font-family:'Inter',sans-serif;background:var(--void);color:var(--ivory); font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden; } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} button{font-family:inherit;} ::selection{background:var(--champagne);color:var(--void);} .wrap{max-width:1140px;margin:0 auto;padding:0 28px;} .serif{font-family:'Cormorant Garamond',serif;} .label{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--champagne);font-weight:600;} /* reveals */ /* Content is visible by default and only hidden when there is JavaScript present to reveal it again. The reveal is driven by an IntersectionObserver, so hiding unconditionally meant a failed or blocked script left the body of every page blank — hero and footer with nothing between them. An inline script in stamps .js on before the first paint, so the animation is unchanged for anyone with a working browser and the content simply stays put for everyone else. */ .js .rv{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease);} .rv.in{opacity:1;transform:none;} .rv-d1{transition-delay:.12s;} .rv-d2{transition-delay:.24s;} .rv-d3{transition-delay:.36s;} @media(prefers-reduced-motion:reduce){ .js .rv{opacity:1;transform:none;transition:none;} *{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;} } /* ═══════════════ PRELOADER ═══════════════ */ #loader{position:fixed;inset:0;background:var(--void);z-index:200;display:flex;align-items:center;justify-content:center;transition:opacity .7s var(--ease),visibility .7s;} #loader.gone{opacity:0;visibility:hidden;} #loader .lr{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:64px;color:var(--champagne);opacity:0;animation:loaderIn 1s var(--ease) forwards;} @keyframes loaderIn{to{opacity:1;}} /* ═══════════════ CURSOR ═══════════════ */ #cur-dot,#cur-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:190;border-radius:50%;transform:translate(-50%,-50%);} #cur-dot{width:6px;height:6px;background:var(--champagne);} #cur-ring{width:34px;height:34px;border:1px solid var(--champ-dim);transition:width .25s,height .25s,border-color .25s;} #cur-ring.hot{width:56px;height:56px;border-color:var(--champagne);} @media(hover:none),(max-width:860px){#cur-dot,#cur-ring{display:none;}} /* ═══════════════ NAV ═══════════════ */ #progress{position:fixed;top:0;left:0;height:2px;background:var(--champagne);width:0;z-index:110;} /* The bar's background and blur live on a pseudo-element, not on