/* ═══════════════════════════════════════════════════════════
   VELA — Design system
   Dusk. Warm ground, one point of light.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Ground */
  --ink:       #100E0C;
  --dusk:      #1C1815;
  --dusk-2:    #272120;
  --hair:      #2E2724;

  /* Light */
  --bone:      #EDE7DC;
  --sand:      #A8998A;
  --sand-dim:  #6B6058;

  /* Accent */
  --corten:    #A84E2A;
  --corten-hi: #C05F37;

  /* Type */
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --grot:  "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Scale */
  --pad:     clamp(20px, 5vw, 88px);
  /* Sections were butting into each other on wide screens. The ceiling
     matters more than the floor here: on a laptop the old 140px read as
     a stack of blocks rather than a page with air in it. */
  --gap:     clamp(68px, 13vh, 184px);
  --measure: 62ch;
  --label:   10.5px;
  --track:   .18em;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  /* No CSS smooth-scroll: easing is owned by the scroll engine in JS.
     Leaving both on makes every programmatic scrollTo its own animation,
     and the two fight each other into a sluggish drift. */
}

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--grot);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* clip, not hidden: hidden turns body into a scroll container
     and breaks both page scrolling and position:fixed children. */
  overflow-x:clip;
}

::selection{ background:var(--corten); color:var(--bone); }

img,video,canvas{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--corten-hi); outline-offset:4px; border-radius:2px; }

/* ── Primitives ──────────────────────────────────────────── */
.shell{ max-width:1440px; margin:0 auto; padding-inline:var(--pad); }

.label{
  font-size:var(--label);
  letter-spacing:var(--track);
  text-transform:uppercase;
  font-weight:600;
  color:var(--sand-dim);
  margin:0;
}
.label--accent{ color:var(--corten); }

.serif{ font-family:var(--serif); font-weight:400; letter-spacing:-.018em; }

.h-xl{ font-family:var(--serif); font-weight:400; font-size:clamp(44px,8.4vw,124px); line-height:.96; letter-spacing:-.03em; margin:0; text-wrap:balance; }
.h-lg{ font-family:var(--serif); font-weight:400; font-size:clamp(32px,5.2vw,72px);  line-height:1.04; letter-spacing:-.024em; margin:0; text-wrap:balance; }
.h-md{ font-family:var(--serif); font-weight:400; font-size:clamp(25px,3.4vw,44px);  line-height:1.14; letter-spacing:-.016em; margin:0; text-wrap:balance; }

.lede{
  font-size:clamp(16px,1.5vw,19px);
  line-height:1.66;
  color:var(--sand);
  max-width:var(--measure);
  margin:0;
}
.copy{ font-size:15.5px; line-height:1.72; color:var(--sand); max-width:var(--measure); margin:0; }
.copy strong{ color:var(--bone); font-weight:500; }

.rule{ height:1px; background:var(--hair); border:0; margin:0; }

/* ── Mark ────────────────────────────────────────────────── */
.mark{
  font-family:var(--serif);
  font-size:28px;
  line-height:1;
  letter-spacing:-.04em;
  color:var(--bone);
  display:inline-block;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  background:var(--bone); color:var(--ink);
  font-family:var(--grot); font-size:11.5px; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  padding:15px 26px; border:0; border-radius:999px; cursor:pointer;
  transition:background .3s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}
.btn:hover{ background:#FFF; transform:translateY(-1px); }
.btn__arrow{ display:inline-flex; align-items:center; transition:transform .3s cubic-bezier(.2,.7,.3,1); }
.btn:hover .btn__arrow{ transform:translate(3px,-3px); }

/* The north-east arrow is drawn, never typed. U+2197 carries an emoji
   presentation on iOS, so Safari swaps the glyph for a blue tile. */
.arw{ width:.72em; height:.72em; display:block; overflow:visible; }

.btn--ghost{
  background:transparent; color:var(--bone);
  border:1px solid var(--hair);
}
.btn--ghost:hover{ background:var(--dusk); border-color:var(--sand-dim); }

/* ── Sections ────────────────────────────────────────────── */
.band{ padding-block:var(--gap); }
.band--hair{ border-top:1px solid var(--hair); }

/* ── Reveal ──────────────────────────────────────────────── */
.rev{ opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1); }
.rev.in{ opacity:1; transform:none; }
.rev[data-d="1"]{ transition-delay:.05s; }
.rev[data-d="2"]{ transition-delay:.1s; }
.rev[data-d="3"]{ transition-delay:.15s; }

@media (prefers-reduced-motion:reduce){
  .rev{ opacity:1; transform:none; transition:none; }
  .btn,.btn__arrow{ transition:none; }
}