*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:400;line-height:var(--lh-display);letter-spacing:-.005em;text-wrap:balance}
p{margin:0}
::selection{background:rgba(151,124,88,.32);color:var(--jet-900)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--alabaster-200)}
::-webkit-scrollbar-thumb{background:var(--tan-500);border:3px solid var(--alabaster-200);border-radius:var(--r-pill)}
:focus-visible{outline:3px solid rgba(151,124,88,.55);outline-offset:2px;box-shadow:0 0 0 1px var(--bg)}
html{caret-color:var(--copper-500)}

.container{width:min(var(--content-max),100% - 2*var(--gutter));margin-inline:auto}
.section{padding-block:var(--section-y)}
.eyebrow{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--s-4)}
.lede{font-size:clamp(1.05rem,1.4vw,1.25rem);color:var(--text-2);max-width:48ch;font-weight:300}
.prose{max-width:64ch;color:var(--text-2)}
.mono{font-family:var(--font-mono);font-size:var(--fs-small);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.display{font-family:var(--font-display)}
.rule{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--hairline-strong) 18%,var(--hairline-strong) 82%,transparent)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.22em;text-transform:uppercase;border-radius:var(--r-control);border:1px solid transparent;transition:transform var(--t-control) var(--ease),box-shadow var(--t-control) var(--ease),color var(--t-control) var(--ease),border-color var(--t-control) var(--ease),background var(--t-control) var(--ease);white-space:nowrap}
.btn .ic{width:16px;height:16px;transition:transform var(--t-control) var(--ease)}
.btn:hover .ic{transform:translateX(3px)}
.btn:active{transform:scale(.988);box-shadow:none}
.btn-primary{background:var(--copper-500);color:var(--alabaster-50);box-shadow:var(--shadow-glow-copper)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 24px 48px -18px rgba(151,124,88,.7)}
.btn-quiet{border-color:var(--hairline-strong);color:var(--text)}
.btn-quiet:hover{border-color:var(--copper-500);color:var(--copper-500)}
.btn-jet{background:var(--jet-800);color:var(--alabaster-50)}
.btn-jet:hover{transform:translateY(-2px);box-shadow:var(--shadow-3)}
.btn:disabled{opacity:.4;pointer-events:none}
.ls-dark .btn-quiet{border-color:var(--hairline-strong);color:var(--text)}
.ls-dark .btn-quiet:hover{border-color:var(--copper-400);color:var(--copper-300)}

/* icon (Lucide, mask) */
.ic{display:inline-block;width:18px;height:18px;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;flex:none}

/* glass */
.glass{background:var(--glass-bg);backdrop-filter:blur(var(--blur-2)) saturate(1.35);-webkit-backdrop-filter:blur(var(--blur-2)) saturate(1.35);border:1px solid var(--glass-line);box-shadow:var(--shadow-3);position:relative;border-radius:var(--r-panel)}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.glass-1{backdrop-filter:blur(var(--blur-1)) saturate(1.35);-webkit-backdrop-filter:blur(var(--blur-1)) saturate(1.35)}
.glass-3{backdrop-filter:blur(var(--blur-3)) saturate(1.35);-webkit-backdrop-filter:blur(var(--blur-3)) saturate(1.35)}
.glass-dark{background:var(--glass-bg-dark);border-color:var(--glass-line-dark);color:var(--alabaster-100)}

/* cards */
.card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-card);box-shadow:var(--shadow-whisper);transition:transform var(--t-surface) var(--ease),box-shadow var(--t-surface) var(--ease),border-color var(--t-surface) var(--ease);overflow:hidden}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-3)}
.card-media{height:260px;overflow:hidden;background:var(--tan-100)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-media) var(--ease)}
.card:hover .card-media img{transform:scale(1.045)}

/* reveal
   Every hidden state is gated behind .reveal-armed, which app.js puts on <html>
   only once the observer is running, and takes off again if the observer never
   fires. Without that gate the whole site is invisible by default and any
   renderer that skips IntersectionObserver — a crawler, a preview service, a tab
   that was never composited — ships a blank page. Content visible is the
   default; the animation is the enhancement. */
.reveal-armed .reveal{opacity:0;transform:translateY(var(--reveal-lift))}
.reveal{transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease);transition-delay:var(--d,0ms)}
.reveal.is-in{opacity:1;transform:none}
/* The disarmed fallback must not depend on a transition running: where the
   observer never fires, frames are usually not being produced either, so a
   0 → 1 transition would sit at 0 for ever and the page would still be blank.
   This shows everything outright. */
.reveal-off .reveal,.reveal-off .reveal-line>span,.reveal-off .reveal-clip{
  opacity:1!important;transform:none!important;clip-path:none!important;
  filter:none!important;transition:none!important;
}
.reveal-armed .reveal-blur{filter:blur(8px)}
.reveal-blur.is-in{filter:blur(0);transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease),filter var(--t-reveal) var(--ease)}
.reveal-line{display:block;overflow:hidden}
.reveal-armed .reveal-line>span{transform:translateY(110%)}
.reveal-line>span{display:block;transition:transform 900ms var(--ease);transition-delay:var(--d,0ms)}
.is-in .reveal-line>span,.reveal-line.is-in>span{transform:none}
.reveal-armed .reveal-clip{clip-path:inset(0 0 100% 0)}
.reveal-clip{transition:clip-path 1.1s var(--ease)}
.reveal-clip.is-in{clip-path:inset(0 0 0 0)}

[data-parallax]{will-change:transform}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;transition-duration:1ms!important}
  .reveal{transform:none}
  [data-parallax]{transform:none!important}
}