/* =========================================================
   GUSTAI — Site-level styles
   ========================================================= */

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--cream);
  overflow-x: hidden;
}

* { box-sizing: border-box; }

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

/* selection */
::selection { background: var(--sugo); color: var(--cream); }

/* Reusable wrappers */
.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 720px) {
  .container { padding: 0 20px; }
}

/* Section base */
section {
  position: relative;
}

.section-pad {
  padding: clamp(64px, 9vw, 140px) 0;
}

/* Eyebrow */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
  display: inline-block;
}

/* Display headings */
.display {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
}

.display-xl { font-size: clamp(56px, 9vw, 160px); line-height: 0.86; letter-spacing: -0.055em; }
.display-lg { font-size: clamp(44px, 6.5vw, 110px); }
.display-md { font-size: clamp(36px, 4.5vw, 72px); }
.display-sm { font-size: clamp(24px, 2.5vw, 40px); }

/* Italic accent — Archivo italic for poster feel */
.it { font-style: italic; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 16px 22px;
  border: 2px solid var(--ink);
  border-radius: var(--r-pill);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur) var(--ease-bounce), box-shadow var(--dur) var(--ease-bounce);
  white-space: nowrap;
  box-shadow: 4px 4px 0 var(--ink);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }

.btn-sugo {
  background: var(--sugo);
  color: var(--cream);
}
.btn-cream {
  background: var(--cream);
  color: var(--ink);
}
.btn-yolk {
  background: var(--yolk);
  color: var(--ink);
}
.btn-outline {
  background: transparent;
  color: var(--cream);
  border-color: var(--cream);
  box-shadow: 4px 4px 0 var(--cream);
}
.btn-outline:hover { box-shadow: 6px 6px 0 var(--cream); }
.btn-outline:active { box-shadow: 0 0 0 var(--cream); }
.btn-outline-ink {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

/* Color backgrounds for sections */
.bg-ink   { background: var(--ink);   color: var(--cream); }
.bg-cream { background: var(--cream); color: var(--ink); }
.bg-paper { background: var(--paper); color: var(--ink); }
.bg-sugo  { background: var(--sugo);  color: var(--cream); }

/* Cards */
.card {
  background: var(--cream);
  border: 2.5px solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: 6px 6px 0 var(--ink);
  color: var(--ink);
  transition: transform var(--dur) var(--ease-bounce), box-shadow var(--dur) var(--ease-bounce);
}
.card:hover { transform: translate(-3px, -3px) rotate(-0.3deg); box-shadow: 9px 9px 0 var(--ink); }

/* Mono callout */
.mono {
  font-family: var(--font-mono);
  letter-spacing: 0;
  font-size: 13px;
}

/* Dashed divider */
.dashed-divider {
  border-top: 2px dashed currentColor;
  opacity: 0.4;
}

/* Sticker */
.sticker {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--yolk);
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 8px 14px 6px;
  border-radius: 6px;
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-3deg);
}

/* Lab readout — used everywhere for measurement context */
.readout {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* Bullet number */
.num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.04em;
}

/* Hide scrollbar on horizontal scrollers */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* Reveal on view */
.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.fade-up.in {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   MOBILE OVERRIDES — proper mobile-first refactor
   ========================================================= */

/* Tablet down */
@media (max-width: 980px) {
  .nav-cta { display: none !important; }            /* burger menu replaces */
  .display-xl { font-size: clamp(44px, 11vw, 96px); letter-spacing: -0.04em; }
  .display-lg { font-size: clamp(36px, 8vw, 80px); }
}

/* Phone */
@media (max-width: 720px) {
  .container { padding: 0 16px; }
  .section-pad { padding: clamp(48px, 12vw, 96px) 0; }

  .display-xl { font-size: clamp(40px, 13vw, 80px); line-height: 0.92; }
  .display-lg { font-size: clamp(32px, 10vw, 64px); }
  .display-md { font-size: clamp(28px, 8vw, 48px); }

  /* CV row: two-col → single col, label on top */
  .cv-row { grid-template-columns: 1fr !important; gap: 6px !important; }
  .cv-row > :first-child { color: var(--sugo) !important; }

  /* Founder portrait: kill sticky so it doesn't overlap copy */
  section#founder .container > div > div:first-child[style*="position: sticky"],
  section#founder [style*="position: sticky"] { position: static !important; }

  /* Process row: collapse to single col (matches existing index.html rule, kept here for safety) */
  ol > li[style*="grid-template-columns: 180px"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  ol > li[style*="grid-template-columns: 180px"] > div:last-child { text-align: left !important; }

  /* Press / certifications grids */
  section [style*="grid-template-columns: repeat(auto-fit, minmax(220px"],
  section [style*="grid-template-columns: repeat(auto-fit, minmax(240px"],
  section [style*="grid-template-columns: repeat(auto-fit, minmax(280px"],
  section [style*="grid-template-columns: repeat(auto-fit, minmax(160px"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Contact 12-col → stack */
  section#contact div[style*="grid-template-columns: repeat(12, 1fr)"] > article,
  section#contact div[style*="grid-template-columns: repeat(12, 1fr)"] > a {
    grid-column: span 12 !important;
  }
  section#contact form > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Footer 4-col → 2-col */
  footer div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Hero buttons: full-width-ish so they sit nicely */
  section#top .btn { padding: 14px 18px; font-size: 13px; }

  /* Prevent any leftover wide elements from causing horizontal scroll */
  section, .container { max-width: 100vw; }
}

/* Small phone */
@media (max-width: 480px) {
  footer div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  .display-xl { font-size: clamp(34px, 12vw, 60px); }
  .display-lg { font-size: clamp(28px, 9vw, 48px); }
}