/* ============================================================
   base — reset, type, chrome, the lamp, the grain
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

html{scroll-behavior:auto}

body{
  font-family:var(--f-body);
  font-size:var(--t-body);
  font-weight:400;
  line-height:1.62;
  color:var(--plaster);
  background:var(--void);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden;height:100vh}

/* ---------- type primitives ---------- */

.t-data{
  font-family:var(--f-data);
  font-size:var(--t-data);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.22em;
  line-height:1.3;
  color:var(--clay);
}
.t-lead{
  font-size:var(--t-lead);
  line-height:1.5;
  font-weight:300;
  color:var(--bone);
}

::selection{background:var(--tungsten);color:#000}

:focus-visible{
  outline:2px solid var(--tungsten);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute;left:var(--gutter);top:-4rem;z-index:200;
  padding:.7rem 1.1rem;background:var(--bone);color:#000;
  font-family:var(--f-data);font-size:var(--t-data);
  text-transform:uppercase;letter-spacing:.18em;
  transition:top var(--d-fast) var(--e-out);
}
.skip:focus{top:1rem}

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

/* ---------- layout ---------- */
.wrap{width:100%;padding-inline:var(--gutter);margin-inline:auto;max-width:106rem}
.section{position:relative;padding-block:clamp(5rem,12vh,9rem)}
.rule{height:1px;background:var(--hairline-soft);border:0;width:100%}

.head{display:grid;gap:var(--s-4);margin-bottom:var(--s-7)}
.head__kicker{display:flex;align-items:center;gap:var(--s-3)}
.head__kicker::after{content:"";flex:1;height:1px;background:var(--hairline)}
.head__title{font-family:var(--f-display);font-weight:var(--w-display);font-size:var(--t-section);line-height:.95;letter-spacing:-.035em;color:var(--bone)}
.head__intro{max-width:38rem;color:var(--plaster)}

/* ---------- button ---------- */
/* set in the label voice the kickers use, and warms to the lamp's colour on
   hover — the only accent this palette allows. */
.btn{
  display:inline-flex;align-items:center;gap:var(--s-3);
  justify-self:start;
  padding:1rem 1.75rem;
  border:1px solid var(--hairline);
  font-family:var(--f-data);font-size:var(--t-data);
  font-weight:700;
  text-transform:uppercase;letter-spacing:.2em;
  color:var(--bone);line-height:1;
  transition:border-color var(--d-mid) var(--e-out),
             color var(--d-mid) var(--e-out),
             background-color var(--d-mid) var(--e-out);
}
.btn:hover,.btn:focus-visible{
  border-color:var(--tungsten);color:var(--tungsten);
  background-color:var(--tungsten-ghost);
}
.btn__arrow{transition:transform var(--d-mid) var(--e-out)}
.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow{transform:translate(.3em,-.3em)}
/* the one that goes nowhere off-site slides sideways instead of away */
.btn--here:hover .btn__arrow,
.btn--here:focus-visible .btn__arrow{transform:translateX(.4em)}

/* ---------- 3D card ---------- */
/* the parent supplies the perspective and is the pointer surface; this turns
   inside it. two elements because a parallax layer and a tilt cannot share
   one transform — whichever is written last simply replaces the other. */
.card3d{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  will-change:transform;
  /* slow settle back to square; motion.js swaps in a fast follow while the
     pointer is actually on it */
  transition:transform .65s var(--e-out),box-shadow .65s var(--e-out);
  box-shadow:0 30px 60px -40px #000;
}
.card3d.is-tilting{
  transition:transform .1s linear,box-shadow .3s var(--e-out);
  box-shadow:0 50px 90px -40px #000;
}
.card3d img{width:100%;height:100%;object-fit:cover;display:block;filter:none}
/* a specular pass that slides across the face as it turns. no explicit size on
   the gradient — a circle's radius must be a length, and a keyword sidesteps
   the question entirely. */
.card3d::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),
    rgba(255,217,168,.16),transparent 58%);
  opacity:0;transition:opacity .35s var(--e-out);
}
.card3d.is-tilting::after{opacity:1}

/* ---------- the grain ---------- */
.grain{
  position:fixed;inset:-120px;z-index:8;pointer-events:none;
  opacity:.055;mix-blend-mode:overlay;
  background-image:var(--grain-url);
  background-size:180px 180px;
  will-change:transform;
}
@media (prefers-reduced-motion:reduce){.grain{animation:none}}

/* ---------- the lamp ---------- */
/* a soft warm pool that follows the pointer, sitting above the page
   but below the chrome. it is the only warm thing on the site. */
.lamp{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  opacity:var(--lamp-i);
  background:radial-gradient(
    circle var(--lamp-r) at var(--lx) var(--ly),
    rgba(255,217,168,.10) 0%,
    rgba(255,217,168,.055) 30%,
    rgba(255,217,168,.015) 56%,
    rgba(255,217,168,0) 76%);
  transition:opacity .6s var(--e-out);
}
.no-lamp .lamp{display:none}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--gutter);
  color:var(--bone);
}
/* a scrim, so the credit line never fights the work behind it */
.nav::before{
  content:"";position:absolute;inset:0 0 -1.75rem;z-index:-1;
  background:linear-gradient(180deg,
    rgba(0,0,0,.98) 0%,rgba(0,0,0,.96) 52%,
    rgba(0,0,0,.7) 78%,transparent 100%);
  opacity:0;transition:opacity .45s var(--e-out);
}
.nav.is-stuck::before{opacity:1}
.nav__mark{font-family:var(--f-data);font-size:var(--t-data);text-transform:uppercase;letter-spacing:.24em;color:var(--bone)}
.nav__mark b{font-weight:700}
/* the links ride in a black pill that hangs off the top edge. against pure
   black it is invisible and against the lit work it is a shape — which is
   the point: it only appears where it is needed. */
.nav__list{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;
  gap:.75rem;
  padding:.5rem 1rem;
  background:var(--void);
  border-radius:0 0 1rem 1rem;
}
.nav__link{
  font-family:var(--f-data);font-size:.625rem;
  text-transform:uppercase;letter-spacing:.2em;
  color:rgba(225,224,204,.8);
  position:relative;padding-block:.4rem;
  transition:color var(--d-fast) var(--e-out);
}
.nav__link::after{
  content:"";position:absolute;left:0;bottom:.15rem;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform var(--d-mid) var(--e-out);
}
.nav__link:hover,.nav__link:focus-visible,.nav__link.is-on{color:#E1E0CC}
.nav__link:hover::after,.nav__link.is-on::after{transform:scaleX(1);transform-origin:left}

/* ---------- mobile menu ---------- */
.nav__toggle{
  display:none;align-items:center;gap:.55rem;
  font-family:var(--f-data);font-size:var(--t-data);
  text-transform:uppercase;letter-spacing:.2em;color:#fff;
  padding:.5rem 0;
}
.nav__bars{display:grid;gap:4px;width:1.1rem}
.nav__bars span{display:block;height:1px;background:currentColor;transition:transform var(--d-mid) var(--e-out),opacity var(--d-fast)}
.is-menu .nav__bars span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.is-menu .nav__bars span:nth-child(2){opacity:0}
.is-menu .nav__bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:99;
  background:var(--void);
  display:grid;align-content:center;gap:var(--s-3);
  padding:var(--gutter);
  opacity:0;visibility:hidden;
  transition:opacity .4s var(--e-out),visibility .4s;
}
.is-menu .menu{opacity:1;visibility:visible}
.menu__link{
  font-family:var(--f-display);font-weight:var(--w-display);
  font-size:clamp(2.25rem,11vw,4rem);
  line-height:1.05;color:var(--bone);
  border-bottom:1px solid var(--hairline-soft);padding-bottom:.4rem;
}
.menu__foot{margin-top:var(--s-6);display:grid;gap:.5rem}

@media (min-width:40rem){
  .nav__list{gap:1.5rem}
  .nav__link{font-size:.75rem}
}
@media (min-width:48rem){
  .nav__list{gap:3rem;padding-inline:2rem;border-radius:0 0 1.5rem 1.5rem}
  .nav__link{font-size:.875rem}
}
@media (min-width:64rem){
  .nav__list{gap:3.5rem}
}

@media (max-width:34rem){
  .nav__list{display:none}
  .nav__toggle{display:flex}
}
/* the pill is centred, so what sits beside it depends on measured room, not
   taste: the link row is 689px at its widest step, and the wordmark needs
   118px plus a gutter. below 70rem there is none, so the pill stands alone;
   the role suffix costs another 200px and only clears at 100rem. */
.nav__mark span{display:none}
@media (min-width:34.0625rem) and (max-width:70rem){
  .nav__mark{display:none}
}
@media (min-width:100rem){
  .nav__mark span{display:inline}
}
@media (min-width:34.0625rem){.menu{display:none}}

/* ---------- preloader ---------- */
.ignite{
  position:fixed;inset:0;z-index:300;background:var(--void);
  display:grid;place-items:center;
}
.ignite__inner{display:grid;justify-items:center;gap:var(--s-4);width:min(30rem,72vw)}
.ignite__count{
  font-family:var(--f-data);font-size:clamp(2.5rem,7vw,4rem);
  font-weight:400;letter-spacing:.06em;color:var(--bone);
  font-variant-numeric:tabular-nums;line-height:1;
}
.ignite__bar{position:relative;width:100%;height:1px;background:var(--hairline)}
.ignite__sweep{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,transparent,var(--tungsten))}
.ignite__label{font-family:var(--f-data);font-size:var(--t-data);letter-spacing:.28em;text-transform:uppercase;color:var(--clay)}

/* ---------- reveal defaults (JS removes these) ---------- */
.js .r-fade{opacity:0}
.js .r-rise{opacity:0;transform:translateY(20px)}
@media (prefers-reduced-motion:reduce){
  .js .r-fade,.js .r-rise{opacity:1;transform:none}
}