/* ============================================================
   DAMASCENE — Fonts, reset, typographic primitives
   ============================================================ */
@font-face{font-family:"Gravite Elevaty";src:url("../fonts/GraviteElevaty-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-Light.woff2") format("woff2");font-weight:300;font-display:swap;}
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-Regular.woff2") format("woff2");font-weight:400;font-display:swap;}
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-Medium.woff2") format("woff2");font-weight:500;font-display:swap;}
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap;}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto;}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0;padding:0;}
ul,ol{list-style:none;}
img,video,svg{display:block;max-width:100%;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px;}

body{
  font-family:var(--font-ui);
  font-weight:300;
  font-size:var(--t-md);
  line-height:1.62;
  color:var(--fg);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden;height:100vh;}

/* --- Lenis ------------------------------------------------- */
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-stopped{overflow:hidden;}

/* --- Typographic primitives -------------------------------- */
.display{
  font-family:var(--font-display);
  font-weight:400;
  line-height:.9;
  letter-spacing:var(--track-mega);
  text-transform:uppercase;
  font-feature-settings:"kern" 1,"liga" 1;
}
.d-hero{font-size:var(--t-hero);}
.d-xxl {font-size:var(--t-xxl);}
.d-xl  {font-size:var(--t-xl);}
.d-lg  {font-size:var(--t-lg);line-height:1.04;}

.label{
  font-family:var(--font-ui);
  font-size:var(--t-xs);
  font-weight:500;
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  line-height:1;
}
.label--rule{display:flex;align-items:center;gap:.9em;white-space:nowrap;}
.label--rule::after{content:"";flex:1;height:1px;background:var(--rule);}

.lede{
  font-size:clamp(1rem,1.18vw,1.32rem);
  line-height:1.7;
  font-weight:300;
  max-width:34ch;
}
.fine{font-size:var(--t-sm);line-height:1.7;opacity:.8;max-width:44ch;}

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

/* --- Layout scaffolding ------------------------------------ */
.scene{position:relative;background:var(--bg);color:var(--fg);isolation:isolate;}
.scene--pad{padding-block:var(--scene-y);}
.wrap{width:100%;max-width:1680px;margin-inline:auto;padding-inline:var(--edge);}
.grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut);}
.vh100{min-height:100svh;}

.u-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;}

/* Skip link */
.skip{position:fixed;top:0;left:50%;translate:-50% -120%;z-index:999;padding:.7rem 1.4rem;
  background:var(--sand);color:var(--ink);transition:translate .25s var(--e-out);}
.skip:focus-visible{translate:-50% 0;}

/* --- Grain: a single tiled noise, cheap, unifies photography --- */
.grain{position:fixed;inset:-120px;z-index:60;pointer-events:none;opacity:.05;
  background-image:var(--grain-url);background-size:180px 180px;mix-blend-mode:overlay;}
@media (prefers-reduced-motion:no-preference){
  .grain{animation:grain-shift 7s steps(6) infinite;}
}
@keyframes grain-shift{
  0%{transform:translate(0,0)} 16%{transform:translate(-14px,7px)}
  33%{transform:translate(9px,-11px)} 50%{transform:translate(-7px,-6px)}
  66%{transform:translate(12px,9px)} 83%{transform:translate(-11px,4px)}
  100%{transform:translate(0,0)}
}

/* --- Reveal primitives (JS adds .in) ------------------------ */
.rv{opacity:0;transform:translate3d(0,var(--rv-y,18px),0);
  transition:opacity .9s var(--e-out),transform 1.05s var(--e-out);
  transition-delay:var(--rv-d,0s);}
.rv.in{opacity:1;transform:none;}

/* --- richer entrances -------------------------------------------
   .rv-mask  a line of type rises out of a clip, so it arrives rather
             than fades. Wrap the text in a <span>.
   .rv-img   an image is wiped in from the ground up while it settles
             back from a slight over-scale — the reveal reads as a
             lens finding its subject, not as a fade.               */
.rv-mask{overflow:hidden;display:block;padding-block:.1em;margin-block:-.1em;}
.rv-mask > span{display:block;transform:translate3d(0,110%,0);
  transition:transform 1.15s var(--e-out) var(--rv-d,0s);}
.rv-mask.in > span{transform:none;}

.rv-img{display:block;clip-path:inset(0 0 100% 0);
  transition:clip-path 1.25s var(--e-inout) var(--rv-d,0s);}
.rv-img > img,.rv-img > picture > img,.rv-img > video{
  transform:scale(1.1);transform-origin:50% 60%;
  transition:transform 1.7s var(--e-out) var(--rv-d,0s);}
.rv-img.in{clip-path:inset(0 0 0% 0);}
.rv-img.in > img,.rv-img.in > picture > img,.rv-img.in > video{transform:none;}


.mask-line{display:block;overflow:hidden;}
.mask-line>span{display:block;transform:translate3d(0,110%,0);
  transition:transform 1.05s var(--e-out);transition-delay:var(--rv-d,0s);}
.in .mask-line>span,.mask-line.in>span{transform:none;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;}
  .rv{opacity:1;transform:none;}
  .rv-mask > span{transform:none;}
  .rv-img{clip-path:none;}
  .rv-img > img,.rv-img > picture > img,.rv-img > video{transform:none;}
  .mask-line>span{transform:none;}
  .grain{animation:none;}
}