/* ════════════════════════════════════════════════════════════
   The Becoming Company — Landing
   Mobile-first. Desktop layout layered on via min-width queries.
   ════════════════════════════════════════════════════════════ */

:root {
  /* CORE */
  --bg:       #FFFFFF;
  --ink:      #1E1915;
  --primary:  #ED3700;

  /* ACCENTS */
  --blue:     #192DED;
  --green:    #0A6D2E;
  --amber:    #E8A33D;

  /* DERIVED */
  --ink-70:   rgba(30, 25, 21, 0.70);
  --ink-55:   rgba(30, 25, 21, 0.55);
  --ink-35:   rgba(30, 25, 21, 0.35);
  --rule:     rgba(30, 25, 21, 0.18);

  /* TYPE */
  --f-serif:  'Fraunces', Georgia, serif;
  --f-body:   'DM Sans', 'Helvetica Neue', sans-serif;
  --f-mono:   'Space Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--f-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

/* ════════════════════════════════════════════════════════════
   ATMOSPHERIC BACKGROUND
   Light field + primary bloom (bottom-right) + soft top-left
   highlight + film grain. Inline-encoded SVG noise = zero
   network requests beyond the HTML/CSS.
   ════════════════════════════════════════════════════════════ */
.atmos {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
}
.atmos > * { position: absolute; inset: 0; }

.atmos .bloom-primary {
  background: radial-gradient(140% 120% at 100% 110%,
    var(--primary) 0%,
    rgba(237,55,0,0.85) 14%,
    rgba(237,55,0,0.45) 32%,
    rgba(237,55,0,0.18) 52%,
    rgba(237,55,0,0.06) 70%,
    transparent 88%);
  mix-blend-mode: multiply;
  opacity: 0.42;
}
.atmos .bloom-primary-2 {
  background: radial-gradient(95% 80% at 92% 100%,
    rgba(237,55,0,0.55) 0%,
    rgba(237,55,0,0.18) 35%,
    transparent 70%);
  mix-blend-mode: multiply;
  opacity: 0.55;
}
.atmos .air {
  background: radial-gradient(110% 95% at 8% 5%,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.22) 20%,
    transparent 55%);
  mix-blend-mode: screen;
}
.atmos .grain {
  opacity: 0.55;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 320px 320px;
}
.atmos .tooth {
  opacity: 0.22;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='2.6' numOctaves='2' seed='11'/></filter><rect width='100%25' height='100%25' filter='url(%23m)'/></svg>");
  background-size: 180px 180px;
}

/* ════════════════════════════════════════════════════════════
   STAGE — full viewport, 3-row grid (top meta / center / footer)
   100dvh handles mobile browser chrome correctly.
   ════════════════════════════════════════════════════════════ */
.stage {
  position: relative; z-index: 2;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 18px 20px;
  gap: 16px;
}

/* ════════════════════════════════════════════════════════════
   THE PERIOD — brand system rule (square dot ends headlines)
   ════════════════════════════════════════════════════════════ */
.dot {
  display: inline-block;
  width: 0.32em; height: 0.32em;
  background: var(--primary);
  vertical-align: baseline;
  margin: 0 0.04em 0.02em;
}

/* ════════════════════════════════════════════════════════════
   TOP META
   ════════════════════════════════════════════════════════════ */
.top {
  display: flex;
  justify-content: flex-end;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}
.top .col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  text-align: right;
}

/* ════════════════════════════════════════════════════════════
   CENTER — lockup + tagline + nav
   ════════════════════════════════════════════════════════════ */
.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  text-align: center;
  padding: 4vh 0;
}

.lockup {
  width: 142px;               /* mobile: ~5% smaller than original 150 */
  flex-shrink: 0;
  color: var(--ink);
}
.lockup svg {
  width: 100%;
  height: auto;
}

.tagline {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  /* fluid sizing: 18px on small phones → 26px on desktop
     (slightly tighter so "years." never gets pushed onto its own line) */
  font-size: clamp(18px, 2.4vw + 13px, 26px);
  line-height: 1.4;
  letter-spacing: -0.005em;
  max-width: 28ch;
  color: var(--ink-70);
  padding: 0 8px;
  /* prevent any soft-wrap mid-word; word-level wrapping still works */
  overflow-wrap: normal;
}

/* keeps "years" and the red square period glued together at every size */
.tagline .nowrap { white-space: nowrap; }

/* ════════════════════════════════════════════════════════════
   NAV — amber pill (Instagram CTA)
   Bigger touch target on mobile.
   ════════════════════════════════════════════════════════════ */
.nav {
  display: flex; gap: 24px; align-items: center; justify-content: center;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-70);
  margin-top: 4px;
}
.nav .pill {
  background: var(--amber);
  color: var(--ink);
  padding: 11px 16px 10px;
  transition: background 0.2s, color 0.2s;
  /* keep it tappable */
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}
.nav .pill:hover,
.nav .pill:focus-visible {
  background: var(--ink);
  color: var(--bg);
  outline: none;
}

/* ════════════════════════════════════════════════════════════
   FOOTER — 5-col grid of brand marks + crosshair + tick
   ════════════════════════════════════════════════════════════ */
.footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  align-items: end;
  font-family: var(--f-mono);
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-70);
}
.footer > * { display: flex; }
.footer .l1 { justify-content: flex-start; }
.footer .l2 { justify-content: flex-start; padding-left: 4%; }
.footer .l3 { justify-content: center; }
.footer .l4 { justify-content: flex-end; padding-right: 4%; }
.footer .l5 { justify-content: flex-end; }

.foot-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.foot-ico svg { width: 100%; height: 100%; }
.foot-ico.is-blue  { color: var(--blue); }
.foot-ico.is-green { color: var(--green); }

.stack { line-height: 1.4; font-size: 8px; text-align: left; }

.center-mark { width: 16px; height: 16px; color: var(--ink); }
.tick { width: 1px; height: 12px; background: var(--ink); }

/* ════════════════════════════════════════════════════════════
   TABLET (≥640px) — slightly larger type, more breathing room
   ════════════════════════════════════════════════════════════ */
@media (min-width: 640px) {
  .stage { padding: 24px 28px; }
  .top { font-size: 10px; letter-spacing: 0.22em; }
  .top .col { gap: 6px; }
  .lockup { width: 165px; }
  .tagline { max-width: 540px; }
  .nav { font-size: 11px; }
  .footer { font-size: 9px; }
  .stack { font-size: 9px; }
  .foot-ico, .center-mark { width: 18px; height: 18px; }
  .tick { height: 14px; }
}

/* ════════════════════════════════════════════════════════════
   DESKTOP (≥960px) — original spec dimensions
   ════════════════════════════════════════════════════════════ */
@media (min-width: 960px) {
  .stage {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    padding: 28px 36px;
  }
  .center { gap: 44px; padding-top: 8vh; padding-bottom: 0; }
  .lockup { width: 187px; }   /* desktop: 15% smaller than original 220 */
  .tagline { max-width: 620px; }
  .nav { gap: 40px; }
  .footer .l2 { padding-left: 8%; }
  .footer .l4 { padding-right: 8%; }
}

/* ════════════════════════════════════════════════════════════
   ULTRA-WIDE / LARGE (≥1280px) — keep things from sprawling
   ════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {
  .stage { padding: 32px 48px; }
}

/* ════════════════════════════════════════════════════════════
   TALL/SHORT viewport tweaks — keeps splash centered nicely
   ════════════════════════════════════════════════════════════ */
@media (max-height: 640px) {
  .center { padding-top: 0; padding-bottom: 0; gap: 24px; }
  .lockup { width: 123px; }   /* ~5% smaller than 130 */
}

/* ════════════════════════════════════════════════════════════
   MOTION PREFERENCES
   Atmosphere is static today — animation hooks live in script.js
   This block exists so future motion respects user preferences.
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}