/* ============================================================
   BASE — reset, typography primitives, global chrome
   ============================================================ */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{ position:fixed; left:0; right:0; width:100%; overflow:hidden; }

img,svg,video{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; padding:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,p,figure{ margin:0; }
::selection{ background:var(--forest); color:var(--paper); }

:focus-visible{
  outline:1.5px solid var(--ocean-2);
  outline-offset:3px;
}

/* ---- Typographic primitives ------------------------------- */
.display{
  font-family:var(--serif);
  font-weight:300;
  line-height:.94;
  letter-spacing:var(--track-display);
}
.display em{ font-style:italic; font-weight:300; }

.h1{ font:300 var(--t-h1)/.92 var(--serif); letter-spacing:var(--track-display); }
.h2{ font:300 var(--t-h2)/.96 var(--serif); letter-spacing:var(--track-display); }
.h3{ font:300 var(--t-h3)/1.06 var(--serif); letter-spacing:-.02em; }
.h4{ font:300 var(--t-h4)/1.14 var(--serif); letter-spacing:-.015em; }
.h1 em,.h2 em,.h3 em,.h4 em{ font-style:italic; }

.lead{
  font-size:var(--t-lead);
  line-height:1.6;
  color:var(--ink-70);
  font-weight:300;
}
.body-sm{ font-size:var(--t-small); line-height:1.72; color:var(--ink-70); }

.label{
  font-size:var(--t-micro);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  font-weight:500;
  line-height:1;
  color:var(--ink-55);
}
.label--light{ color:var(--ink-on-dark-65); }
.label--rule{ display:flex; align-items:center; gap:14px; }
.label--rule::before{
  content:""; width:34px; height:1px; background:currentColor; opacity:.55; flex:none;
}

.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }

.on-dark{ color:var(--ink-on-dark); }
.on-dark .label{ color:var(--ink-on-dark-65); }
.on-dark .lead,.on-dark .body-sm{ color:var(--ink-on-dark-65); }

/* ---- Shell ------------------------------------------------ */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.shell--wide{ max-width:none; }
.section{ padding-block:var(--section-y); position:relative; }
.rule{ height:1px; background:var(--line); border:0; margin:0; }
.rule--dark{ background:var(--line-dark); }

/* ---- Film grain ------------------------------------------- */
.grain{
  position:fixed; inset:0; z-index:var(--z-grain);
  pointer-events:none; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Scroll progress hairline ----------------------------- */
.progress{
  position:fixed; top:0; left:0; height:2px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:var(--sand-2);
  z-index:calc(var(--z-header) + 5);
  pointer-events:none;
}

/* ---- Custom cursor (fine pointers only) ------------------- */
.cursor{
  position:fixed; top:0; left:0; z-index:var(--z-cursor);
  width:56px; height:56px; margin:-28px 0 0 -28px;
  border-radius:50%;
  display:none; place-items:center;
  border:1px solid var(--line-2);
  background:rgba(251,248,241,.06);
  backdrop-filter:blur(2px);
  pointer-events:none;
  transform:scale(.28);
  transition:transform .4s var(--ease), background-color .4s var(--ease), border-color .4s var(--ease), opacity .3s;
  opacity:0;
}
.cursor span{
  font-size:9px; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  color:var(--paper); opacity:0; transition:opacity .3s var(--ease);
  white-space:nowrap;
}
.cursor.is-on{ opacity:1; }
.cursor.is-active{
  transform:scale(1);
  background:var(--forest);
  border-color:transparent;
}
.cursor.is-active span{ opacity:1; }
@media (hover:hover) and (pointer:fine){
  .cursor{ display:grid; }
}

/* ---- Preloader -------------------------------------------- */
.preloader{
  position:fixed; inset:0; z-index:var(--z-preloader);
  background:var(--forest);
  color:var(--ink-on-dark);
  display:grid; place-items:center;
  transition:opacity .7s var(--ease), visibility .7s;
}
.preloader__inner{ text-align:center; width:min(420px,72vw); }
.preloader__mark{
  font:300 clamp(1.5rem,3.4vw,2.5rem)/1 var(--serif);
  letter-spacing:.16em; text-transform:uppercase;
  overflow:hidden;
}
.preloader__mark span{
  display:inline-block;
  transform:translateY(105%);
  animation:preload-in .9s var(--ease) forwards;
}
.preloader__bar{
  margin-top:26px; height:1px; width:100%;
  background:var(--line-dark);
  position:relative; overflow:hidden;
}
.preloader__bar i{
  position:absolute; inset:0; transform-origin:0 50%;
  background:var(--sand-2); transform:scaleX(0);
  transition:transform .5s var(--ease-soft);
}
.preloader__meta{
  margin-top:16px; display:flex; justify-content:space-between;
  font-size:var(--t-micro); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--ink-on-dark-40);
}
@keyframes preload-in{ to{ transform:translateY(0); } }
body.is-loaded .preloader{ opacity:0; visibility:hidden; }

/* ---- Reveal primitives ------------------------------------ */
[data-reveal]{ will-change:transform,opacity; }

[data-reveal="fade"]{
  opacity:0; transform:translateY(22px);
  transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  transition-delay:var(--reveal-delay,0ms);
}
[data-reveal="fade"].is-in{ opacity:1; transform:none; }

/* Masked reveal. The clip box is padded so tight display line-heights
   never crop ascenders or descenders, and the start offset clears the
   padding so no sliver of the incoming glyph shows through. */
[data-reveal="mask"]{ overflow:hidden; padding:.14em 0; margin:-.14em 0; }
[data-reveal="mask"] > *{
  display:block;
  transform:translateY(125%);
  transition:transform var(--dur-cine) var(--ease);
  transition-delay:var(--reveal-delay,0ms);
}
[data-reveal="mask"].is-in > *{ transform:none; }

[data-reveal="image"]{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.25s var(--ease-inout);
  transition-delay:var(--reveal-delay,0ms);
}
[data-reveal="image"].is-in{ clip-path:inset(0 0 0 0); }
[data-reveal="image"] img{
  transform:scale(1.16);
  transition:transform 1.6s var(--ease-inout);
  transition-delay:var(--reveal-delay,0ms);
}
[data-reveal="image"].is-in img{ transform:none; }

[data-reveal="line"]{
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform 1s var(--ease-inout);
  transition-delay:var(--reveal-delay,0ms);
}
[data-reveal="line"].is-in{ transform:none; }

/* Line-split text reveal (built by motion.js) */
.split-line{ display:block; overflow:hidden; padding:.14em 0; margin:-.14em 0; }
.split-line > i{
  display:block; font-style:inherit;
  transform:translateY(125%);
  transition:transform 1.15s var(--ease);
}
.is-in .split-line > i{ transform:none; }
.split-line:nth-child(2) > i{ transition-delay:.09s; }
.split-line:nth-child(3) > i{ transition-delay:.18s; }
.split-line:nth-child(4) > i{ transition-delay:.27s; }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  [data-reveal] > *,[data-reveal] img,.split-line > i{ transform:none !important; }
  .cursor{ display:none !important; }
  html{ scroll-behavior:auto !important; }
}

/* ---- Utility ---------------------------------------------- */
.visually-hidden{
  position:absolute !important; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.no-scrollbar{ scrollbar-width:none; -ms-overflow-style:none; }
.no-scrollbar::-webkit-scrollbar{ display:none; }