/* ─────────────────────────────────────────────
   Nextability — Colors & Type
   Semantic + base tokens.
   This file extends tokens.css with element-level
   styles (h1, h2, code, p, etc).
   ───────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600&family=IBM+Plex+Sans:wght@400;500&family=IBM+Plex+Mono:wght@400&display=swap");

:root {
  /* ─── Base color tokens (compositional roles) ─── */
  --field:        #261834;  /* aubergine — primary dark bg */
  --field-deep:   #170B23;  /* plum — recessed surfaces */
  --mid:          #8A75A8;  /* mauve — italic counterpoint */
  --ground:       #ECE2D0;  /* bone — light bg */
  --ground-warm:  #D8CCB6;  /* linen — soft light surface */
  --accent:       #FF6A1F;  /* electric — single accent */
  --accent-hi:    #FF8C3F;  /* orb gradient highlight */
  --accent-lo:    #C84610;  /* orb gradient shadow */

  /* ─── Semantic foreground / background ─── */
  --bg:           var(--field);
  --bg-deep:      var(--field-deep);
  --bg-light:     var(--ground);
  --bg-light-warm:var(--ground-warm);

  --fg1:          var(--ground);        /* primary text on dark */
  --fg2:          color-mix(in srgb, var(--ground) 70%, transparent);
  --fg3:          color-mix(in srgb, var(--ground) 45%, transparent);

  --fg1-on-light: var(--field);          /* primary text on light */
  --fg2-on-light: color-mix(in srgb, var(--field) 65%, transparent);
  --fg3-on-light: color-mix(in srgb, var(--field) 40%, transparent);

  --rule:         color-mix(in srgb, currentColor 18%, transparent);
  --rule-strong:  color-mix(in srgb, currentColor 30%, transparent);

  /* ─── Type families ─── */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* ─── Type scale ─── */
  --fs-display-l: 96px;
  --fs-display-m: 64px;
  --fs-display-s: 36px;
  --fs-lead:      18px;
  --fs-body:      15px;
  --fs-italic:    28px;  /* italic counterpoint */
  --fs-cap:       11px;  /* mono caps */
  --fs-data:      14px;  /* mono data */

  /* ─── Spacing — 4pt baseline ─── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ─── Motion ─── */
  --ease:     cubic-bezier(.2, 0, 0, 1);
  --d-reveal: 320ms;
  --d-pulse:  2600ms;
  --d-float:  5000ms;
}

/* ─── Base ─── */
html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

html { scroll-behavior: smooth; }

/* Reasonable offset so anchored sections don't tuck under the sticky-ish header */
#engagement, #contact, #top { scroll-margin-top: 24px; }

/* Respect users who prefer reduced motion — snap instead of glide */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ─── Surfaces ─── */
.surface-field      { background: var(--field);       color: var(--ground); }
.surface-field-deep { background: var(--field-deep);  color: var(--ground); }
.surface-ground     { background: var(--ground);      color: var(--field); }
.surface-warm       { background: var(--ground-warm); color: var(--field); }

/* ─── Semantic element styles ─── */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-l);
  letter-spacing: -0.05em;
  line-height: 0.95;
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-m);
  letter-spacing: -0.04em;
  line-height: 0.98;
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-s);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

.lead {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: 1.5;
  font-weight: 400;
}
p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  margin: 0 0 var(--s-4);
}
.italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-italic);
  color: var(--mid);
  line-height: 1.25;
}
.cap {
  font-family: var(--font-mono);
  font-size: var(--fs-cap);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 400;
  opacity: 0.55;
}
.data {
  font-family: var(--font-mono);
  font-size: var(--fs-data);
  letter-spacing: 0.02em;
  font-weight: 400;
}
code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: var(--fs-data);
}
a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: border-color var(--d-reveal) var(--ease);
}
a:hover { border-bottom-color: currentColor; }

/* ─── Wordmark ─── */
.nextability {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1;
}
.nextability .next { color: var(--accent); }

/* ─── Display headlines with system colors ─── */
.display .accent { color: var(--accent); }
.display .it     { font-style: italic; color: var(--mid); font-weight: 400; }

/* ─── Vocabulary primitives ─── */
.orb {
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    var(--accent-hi) 0%,
    var(--accent)    50%,
    var(--accent-lo) 95%
  );
  box-shadow: 0 0 120px color-mix(in srgb, var(--accent) 35%, transparent);
}
.dot {
  display: inline-block;
  border-radius: 50%;
  background: var(--accent);
}
.rule-hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--s-6) 0;
}
.stamp {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--field-deep);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  letter-spacing: -0.05em;
}
.marker {
  display: inline-block;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--fs-cap);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ─── Motion ─── */
@keyframes nx-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal { animation: nx-reveal var(--d-reveal) var(--ease) both; }

@keyframes nx-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
  50%      { box-shadow: 0 0 0 16px color-mix(in srgb, var(--accent) 18%, transparent); }
}
.pulse { animation: nx-pulse var(--d-pulse) var(--ease) infinite; }

@keyframes nx-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.float { animation: nx-float var(--d-float) ease-in-out infinite; }

/* ─────────────────────────────────────────────
   Responsive layer
   Most layout is set as inline styles in the JSX
   (padding, grid columns, font sizes). These rules
   override those at narrow widths using !important
   so the desktop design is left untouched above the
   breakpoints.
   ───────────────────────────────────────────── */

/* Tablet / large phone — collapse multi-column grids */
@media (max-width: 900px) {
  header[data-screen-label="01 Header"] {
    padding: 22px 24px !important;
  }
  header[data-screen-label="01 Header"] nav {
    gap: 22px !important;
  }

  /* Hero (index + lab share #top) */
  #top {
    padding: 48px 24px 72px !important;
    min-height: 0 !important;
  }
  #top h1 {
    font-size: 52px !important;
    line-height: 1.04 !important;
  }
  #top > p {
    font-size: 18px !important;
  }
  /* Float-shrink the orb so the headline gets room */
  #top > div[aria-hidden="true"] {
    width: 280px !important;
    height: 280px !important;
    margin-right: -120px !important;
    margin-top: -60px !important;
  }
  #top > div[aria-hidden="true"] .orb {
    width: 280px !important;
    height: 280px !important;
  }

  /* Engagement: 2-col → 1-col */
  #engagement {
    padding: 80px 24px !important;
  }
  #engagement > div {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  #engagement h2 {
    font-size: 44px !important;
  }

  /* Footer: 3-col → 2-col */
  #contact {
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
    padding: 64px 24px 48px !important;
  }
  #contact > div:first-child {
    grid-column: 1 / -1;
  }

  /* Lab notes: drop the wide metadata column under the title */
  #notes {
    padding: 8px 24px 96px !important;
  }
  #notes li > a {
    grid-template-columns: 56px 1fr 24px !important;
    gap: 20px !important;
    padding: 28px 0 !important;
  }
  #notes li > a > :nth-child(3) {
    grid-column: 2 / 3;
    margin-top: 8px;
  }
}

/* Phone — tighten further, drop the orb, scale headlines */
@media (max-width: 640px) {
  header[data-screen-label="01 Header"] {
    padding: 18px 18px !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
  }
  header[data-screen-label="01 Header"] nav {
    gap: 18px !important;
    flex-wrap: wrap !important;
  }
  /* "Get in touch" button is heavy on mobile — let the email link in the
     footer carry that load. Footer is one tap away. */
  header[data-screen-label="01 Header"] nav > a:last-child {
    display: none !important;
  }

  #top {
    padding: 32px 20px 56px !important;
  }
  /* Orb is decorative — pull it out of flow on small phones */
  #top > div[aria-hidden="true"] {
    display: none !important;
  }
  #top h1 {
    font-size: 36px !important;
    letter-spacing: -0.03em !important;
    line-height: 1.06 !important;
  }
  #top > p {
    font-size: 16px !important;
    margin-top: 28px !important;
  }
  /* Hero button row — stack and full-width */
  #top > div:last-of-type {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-top: 32px !important;
  }
  #top > div:last-of-type a {
    justify-content: center !important;
    text-align: center !important;
  }

  /* Lab hero — italic premise + display term */
  #top > p:first-of-type {
    font-size: 19px !important;
  }

  #engagement {
    padding: 64px 20px !important;
  }
  #engagement h2 {
    font-size: 36px !important;
  }
  #engagement .italic,
  #engagement p {
    font-size: 17px !important;
  }

  /* Footer: 2-col → 1-col on phones */
  #contact {
    grid-template-columns: 1fr !important;
    padding: 56px 20px 40px !important;
  }
  #contact > div:first-child {
    grid-column: auto;
  }

  /* Lab notes: stack everything */
  #notes li > a {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 24px 0 !important;
  }
  #notes li > a > :last-child {
    display: none !important; /* trailing arrow — visual flourish, not needed */
  }
  #notes li > a > :nth-child(3) {
    grid-column: auto;
  }

  /* Lab closer */
  section[data-screen-label]:not([data-screen-label="01 Header"]) {
    /* generic phone padding floor where not otherwise set */
  }
}