/* ============================================================
   BASE + LAYOUT + GLOBAL COMPONENTS
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html,body{ margin:0; padding:0; }
body{
  background:var(--midnight);
  color:var(--paper);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* hide native cursor when custom cursor active (desktop pointer only) */
@media (hover:hover) and (pointer:fine){
  body.has-cursor, body.has-cursor a, body.has-cursor button{ cursor:none; }
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; color:inherit; background:none; border:none; cursor:pointer; }
::selection{ background:var(--ink); color:var(--paper); }

/* film grain overlay */
body::after{
  content:""; position:fixed; inset:0; z-index:9000; pointer-events:none;
  opacity:.045; mix-blend-mode:overlay;
  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='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Typography ---------- */
.serif{ font-family:var(--serif); }
.display{
  font-family:var(--serif); font-weight:900; line-height:.94;
  letter-spacing:-.01em; text-wrap:balance;
}
h1,h2,h3,h4{ margin:0; font-family:var(--sans); font-weight:800; line-height:1.02; }
p{ margin:0; }

/* small uppercase section tag */
.tag{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--sans); font-weight:600; font-size:.78rem;
  letter-spacing:.18em; color:var(--gold);
  text-transform:none;
}
.tag::before{ content:""; width:34px; height:1px; background:var(--gold); opacity:.7; }
.tag.center::after{ content:""; width:34px; height:1px; background:var(--gold); opacity:.7; }

.eyebrow{ font-family:var(--sans); color:var(--paper-2); font-weight:400; letter-spacing:.03em; }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--pad); }
.section{ position:relative; padding-block:clamp(80px,11vh,170px); }
.section--tight{ padding-block:clamp(56px,7vh,110px); }

/* ---------- Buttons ---------- */
.btn{
  --c:var(--paper);
  position:relative; display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--sans); font-weight:600; font-size:1rem; line-height:1;
  padding:1.05em 2.1em; border-radius:var(--radius-pill);
  color:var(--midnight); background:var(--gold);
  overflow:hidden; transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  box-shadow:0 10px 40px -12px var(--gold-glow);
  isolation:isolate;
}
.btn .ar{ transition:transform .5s var(--ease); }
.btn:hover{ transform:translateY(-3px); box-shadow:0 18px 50px -12px var(--gold-glow); }
.btn:hover .ar{ transform:translateX(-5px); }
.btn--ghost{
  background:transparent; color:var(--paper);
  border:1px solid var(--hair); box-shadow:none;
}
.btn--ghost::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--paper);
  transform:scaleX(0); transform-origin:right; transition:transform .55s var(--ease);
}
.btn--ghost:hover{ color:var(--midnight); border-color:var(--paper); transform:translateY(-3px); }
.btn--ghost:hover::before{ transform:scaleX(1); }
.btn--ink{ background:var(--ink); color:var(--paper); box-shadow:0 10px 40px -12px rgba(200,16,46,.5); }
.btn--ink:hover{ box-shadow:0 18px 54px -12px rgba(200,16,46,.6); }

/* big text-link with animated underline */
.tlink{
  position:relative; display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--serif); font-weight:700; font-size:clamp(1.1rem,2vw,1.6rem);
  color:var(--paper); padding-bottom:.1em;
}
.tlink::after{
  content:""; position:absolute; right:0; bottom:0; height:2px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.tlink .ar{ color:var(--gold); transition:transform .5s var(--ease); }
.tlink:hover::after{ transform:scaleX(1); }
.tlink:hover .ar{ transform:translateX(-7px); }

/* ---------- Custom cursor ---------- */
.cursor{
  position:fixed; top:0; left:0; z-index:9500; pointer-events:none;
  width:14px; height:14px; border-radius:50%; background:var(--gold);
  transform:translate(-50%,-50%);
  transition:width .35s var(--ease), height .35s var(--ease), background .35s var(--ease), opacity .3s;
  mix-blend-mode:difference;
}
.cursor__ring{
  position:fixed; top:0; left:0; z-index:9499; pointer-events:none;
  width:42px; height:42px; border:1px solid var(--paper-3); border-radius:50%;
  transform:translate(-50%,-50%);
  transition:width .4s var(--ease), height .4s var(--ease), border-color .4s, opacity .3s;
}
.cursor__label{
  position:fixed; top:0; left:0; z-index:9501; pointer-events:none;
  transform:translate(-50%,-50%) scale(.6); opacity:0;
  font-family:var(--sans); font-weight:600; font-size:.72rem; letter-spacing:.1em;
  color:var(--midnight); background:var(--gold); padding:.6em 1em; border-radius:100px;
  white-space:nowrap; transition:opacity .3s var(--ease), transform .3s var(--ease);
}
body.cur-link .cursor{ width:6px; height:6px; }
body.cur-link .cursor__ring{ width:64px; height:64px; border-color:var(--gold); }
body.cur-media .cursor{ opacity:0; }
body.cur-media .cursor__ring{ opacity:0; }
body.cur-media .cursor__label{ opacity:1; transform:translate(-50%,-50%) scale(1); }
@media (hover:none),(pointer:coarse){ .cursor,.cursor__ring,.cursor__label{ display:none; } }

/* ---------- Scroll progress ---------- */
.progress{
  position:fixed; top:0; left:0; width:2px; height:100vh; z-index:8000;
  background:var(--hair-2); pointer-events:none;
}
.progress__bar{
  position:absolute; top:0; left:0; width:100%; height:0%;
  background:linear-gradient(var(--gold),var(--ink)); transform-origin:top;
}

/* ---------- Reveal primitives ----------
   Default state is VISIBLE — GSAP sets the hidden start inline when motion
   is allowed, so a JS/animation failure can never hide content. */
.r-up,.r-fade{ opacity:1; transform:none; }

/* line/word split reveal */
.split .word{ display:inline-block; overflow:hidden; vertical-align:top; }
.split .word > span{ display:inline-block; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; }
  .r-up,.r-fade{ opacity:1 !important; transform:none !important; }
  .split .word > span{ transform:none !important; }
  .cursor,.cursor__ring,.cursor__label{ display:none; }
  body.has-cursor{ cursor:auto !important; }
}