@import url("tokens/fonts.css");
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");

/* ---------------------------------------------------------------------------
   Page / scale-to-fit stage — reproduces the source's 1920×1080 canvas.
--------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--surface-page);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#root {
  width: 1920px;
  height: 1080px;
  position: relative;
  overflow: hidden;
  flex: none;
  transform-origin: center center;
  background: var(--surface-page);
  font-family: var(--font-sans);
  color: var(--text-primary);
}

a { color: inherit; text-decoration: none; }
img { display: block; }

/* ---------------------------------------------------------------------------
   Hero — exact positions & sizes transcribed from the source composition.
--------------------------------------------------------------------------- */

/* logomark — centered, top 96, 104×104 (source) */
.hero__logomark {
  position: absolute;
  left: 50%;
  top: 96px;
  transform: translateX(-50%);
  width: 104px;
  height: 104px;
  object-fit: contain;
}

/* wordmark — serif, 40px, top 380 */
.hero__wordmark {
  position: absolute;
  left: 0;
  right: 0;
  top: 380px;
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 0.9;
  letter-spacing: -0.08em;
}

/* headline — bold sans + inline serif, 72px, three hard-broken lines, top 442 */
.hero__headline {
  position: absolute;
  left: 50%;
  top: 442px;
  transform: translateX(-50%);
  margin: 0;
  text-align: center;
  white-space: nowrap;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 72px;
  line-height: 0.85;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
.hero__headline em {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: normal;
}

/* subhead — 18px, width 640, top 660 */
.hero__subhead {
  position: absolute;
  left: 50%;
  top: 660px;
  transform: translateX(-50%);
  margin: 0;
  width: 640px;
  text-align: center;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* CTA row — top 790, 37px gap */
.hero__ctas {
  position: absolute;
  left: 50%;
  top: 790px;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-cta-gap);
}

/* microcopy — 14px muted, top 856 */
.hero__microcopy {
  position: absolute;
  left: 0;
  right: 0;
  top: 856px;
  margin: 0;
  text-align: center;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
   Button — ported from components/core/Button.jsx (solid primary / outlined
   secondary; all-caps, tight tracking, no radius, no shadow).
--------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--button-height);           /* 38.891px */
  padding: 0 var(--button-padding-x);      /* 32px */
  font-family: var(--font-sans);
  font-size: var(--text-label-size);       /* 14px */
  font-weight: var(--text-label-weight);   /* 400 */
  letter-spacing: var(--text-label-tracking); /* -0.05em */
  text-transform: var(--text-label-transform);
  border: 1px solid var(--fr-black);
  border-radius: var(--button-radius);     /* 0 */
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn--primary {
  background-color: var(--button-primary-bg);
  color: var(--button-primary-fg);
}
.btn--primary:hover { background-color: var(--button-primary-bg-hover); }
.btn--secondary {
  background-color: var(--button-secondary-bg);
  color: var(--button-secondary-fg);
}
.btn--secondary:hover {
  background-color: var(--button-secondary-bg-hover);
  color: var(--button-secondary-fg-hover);
}
.btn:focus-visible { outline: 2px solid var(--fr-black); outline-offset: 3px; }

/* ---------------------------------------------------------------------------
   Mobile — same composition, stacked in flow. The fixed 1920×1080 frame stays
   desktop-only; below 768px the hero becomes a fluid centered column with the
   same elements, same copy, same monochrome system, and the same generous
   whitespace (one screen, breathing room, nothing else).
--------------------------------------------------------------------------- */
@media (max-width: 768px) {
  html, body { height: auto; overflow: auto; }

  #stage { position: static; display: block; }

  #root {
    width: 100%;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    transform: none !important;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 64px 20px;
  }

  .hero__logomark {
    position: static;
    transform: none;
    width: 76px;
    height: 76px;
  }

  .hero__wordmark {
    position: static;
    margin-top: 56px;
    font-size: 30px;
  }

  .hero__headline {
    position: static;
    transform: none;
    margin-top: 26px;
    /* sized to the viewport so the widest hard-broken line spans the width */
    font-size: clamp(26px, 8.2vw, 60px);
    line-height: 0.9;
  }

  .hero__subhead {
    position: static;
    transform: none;
    width: 100%;
    max-width: 420px;
    margin-top: 28px;
    font-size: 14px;
    line-height: 1.5;
  }

  .hero__ctas {
    position: static;
    transform: none;
    margin-top: 44px;
    width: 100%;
    max-width: 320px;
  }

  .hero__ctas .btn {
    width: 100%;
    height: 52px;   /* comfortable tap target; same type, border, no radius */
  }

  .hero__microcopy {
    position: static;
    margin-top: 18px;
    font-size: 12px;
  }
}