/* ============================================================
   BASE — resets, global typography, shared primitives
   ============================================================ */

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

html{ scroll-behavior: smooth; }

body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a{ color:inherit; text-decoration:none; }

ul{ list-style:none; }

button{ font-family: inherit; cursor:pointer; }

::selection{ background: var(--amber); color: var(--amber-ink); }

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

.container{
  width:100%;
  max-width: 1320px;
  margin-inline:auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.container--narrow{ max-width: 900px; }

section{ position:relative; }

/* ---- eyebrow / kicker ---- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
}
.eyebrow::before{
  content:"";
  width: 22px; height:1px;
  background: var(--amber);
  display:inline-block;
}

/* ---- headings ---- */
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.section-head{
  max-width: 720px;
  margin-bottom: var(--space-xl);
}
.section-head h2{
  font-size: var(--step-3);
  margin-top: var(--space-sm);
}
.section-head p{
  margin-top: var(--space-sm);
  color: var(--ink-dim);
  font-size: var(--step-1);
  max-width: 54ch;
}
.section-head.center{
  margin-inline:auto;
  text-align:center;
}
.section-head.center p{ margin-inline:auto; }

/* ---- buttons ---- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding: 0.95em 1.9em;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-soft),
              background var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft);
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }

.btn--solid{
  background: var(--amber);
  color: var(--amber-ink);
  border-color: var(--amber);
}
.btn--solid:hover{ background: var(--amber-dim); border-color: var(--amber-dim); }

.btn--ghost{
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover{ border-color: var(--ink); background: rgba(243,239,231,0.04); }

.btn--sm{ padding: 0.7em 1.4em; font-size: 0.72rem; }

/* ---- film-frame signature divider ---- */
.frame-divider{
  display:flex;
  align-items:center;
  gap: 3px;
  height: 22px;
  opacity: 0.55;
}
.frame-divider span{
  width: 3px;
  background: var(--amber);
  border-radius: 1px;
  display:block;
}

/* ---- reveal-on-scroll ---- */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal.is-visible{
  opacity: 1;
  transform: none;
}
.reveal-stagger > *{
  transition-delay: calc(var(--i, 0) * 90ms);
}

/* ---- skip link ---- */
.skip-link{
  position:absolute;
  left: -999px;
  top: 0;
  background: var(--amber);
  color: var(--amber-ink);
  padding: 0.8em 1.4em;
  z-index: 999;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.skip-link:focus{ left: 1rem; top: 1rem; }

/* ---- utility ---- */
.visually-hidden{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}