/* Fonts loaded via Google Fonts CDN (see index.html) */

/* ============ TOKENS ============ */
:root{
--bg:#F5F2EC;--bg-dark:#12110E;
--ink:#15130F;--ink-inv:#F5F2EC;
--accent:#C7522A;--accent-sec:#2E4034;
--line:#D8D2C4;--line-soft:rgba(21,19,15,.08);
--serif:'Fraunces',Georgia,serif;
--sans:'Sora',system-ui,-apple-system,sans-serif;
--nav-h:72px;--nav-h-m:56px;
--pad:clamp(20px,5vw,80px);
--sec-gap:clamp(80px,14vh,160px);
}
/* ============ BASE ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
font-family:var(--sans);font-size:clamp(16px,1.05vw,18px);line-height:1.55;
color:var(--ink);background:var(--bg);
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:var(--bg)}
.wrap{width:100%;max-width:1680px;margin-inline:auto;padding-inline:var(--pad)}
.container{width:100%;max-width:1680px;margin-inline:auto;padding-inline:0}
section{position:relative}
.sec-pad{padding-block:var(--sec-gap)}
.hairline{border-top:1px solid var(--line)}

/* ============ TYPO UTILS ============ */
.tp-label{
font-family:var(--sans);font-weight:500;font-size:.72rem;letter-spacing:.28em;
text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:.75em;
}
.tp-label::before{content:"";width:2rem;height:1px;background:var(--accent);flex:none}
.dark .tp-label{color:#E0704B}
.tp-label .num{color:var(--ink);opacity:.55;font-weight:400}
.dark .tp-label .num{color:var(--ink-inv)}
.tp-h1{font-family:var(--serif);font-weight:300;font-size:clamp(3rem,8.5vw,9.5rem);line-height:.95;letter-spacing:-.02em}
.tp-h2{font-family:var(--serif);font-weight:300;font-size:clamp(2.4rem,5.8vw,5.5rem);line-height:1.02;letter-spacing:-.015em}
.tp-h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,2.2vw,2.1rem);line-height:1.15;letter-spacing:-.01em}
.tp-quote{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.9rem,4.5vw,4.2rem);line-height:1.1;color:var(--accent);letter-spacing:-.01em}
.tp-figure{font-family:var(--serif);font-weight:300;font-size:clamp(3.5rem,8vw,8.5rem);line-height:.9;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tp-body{font-size:clamp(1rem,1.1vw,1.18rem);line-height:1.6;color:color-mix(in srgb,var(--ink) 78%,transparent)}
.dark .tp-body{color:color-mix(in srgb,var(--ink-inv) 75%,transparent)}
.tp-small{font-size:.9rem;line-height:1.5;color:color-mix(in srgb,var(--ink) 60%,transparent)}
.dark .tp-small{color:color-mix(in srgb,var(--ink-inv) 55%,transparent)}

/* ============ MOTION ============ */
/* Progressive enhancement: content is visible by default; reveal animation
   only applies when JS is active (html.js class added by inline script). */
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .8s cubic-bezier(.2,.6,.2,1)}
.js [data-reveal].is-in{opacity:1;transform:translateY(0)}
.js [data-reveal="1"]{transition-delay:.06s}.js [data-reveal="2"]{transition-delay:.14s}
.js [data-reveal="3"]{transition-delay:.22s}.js [data-reveal="4"]{transition-delay:.3s}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
[data-reveal]{opacity:1;transform:none}
}

/* ============ CUSTOM CURSOR (desktop only) ============ */
.cursor{position:fixed;z-index:9999;pointer-events:none;left:0;top:0;transform:translate(-50%,-50%);opacity:0;transition:opacity .2s}
.cursor.is-on{opacity:1}
.cursor__label{width:56px;height:56px;border-radius:50%;background:var(--accent);color:var(--bg);display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;transform:scale(.4);transition:transform .25s cubic-bezier(.2,.6,.2,1)}
.cursor.is-hover .cursor__label{transform:scale(1)}
@media(pointer:coarse){.cursor{display:none}}