/* ============================================================
   burp.agency — Colors & Type
   Bold. Minimal. Black + cream + one orange hit per section.
   Source of truth: burp.agency Homepage Brief (Part 1).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
/* Georgia is a system serif; no @import needed. */

:root {
  /* ─── Colour tokens (from brief Part 1) ──────────────────── */
  --color-ink:         #111111;   /* primary text, outlines, dark bgs    */
  --color-orange:      #FF4D00;   /* ONE accent hit per section          */
  --color-cream:       #FAF8F4;   /* default page background             */
  --color-charcoal:    #1A1A1A;   /* dark card / dark section background */
  --color-pale-orange: #F5EDE6;   /* tinted callout backgrounds, tags    */
  --color-warm-gray:   #E8E4DF;   /* borders + dividers, everywhere      */
  --color-mid-gray:    #666666;   /* secondary body, captions            */

  /* Semantic aliases — use these in components */
  --fg-1:        var(--color-ink);
  --fg-2:        var(--color-mid-gray);
  --fg-inverse:  #FFFFFF;
  --bg-page:     var(--color-cream);
  --bg-dark:     var(--color-charcoal);
  --bg-darker:   var(--color-ink);
  --bg-tint:     var(--color-pale-orange);
  --border:      var(--color-warm-gray);
  --accent:      var(--color-orange);

  /* ─── Typography ─────────────────────────────────────────── */
  --font-display:  Georgia, 'Times New Roman', serif;     /* hero + headings */
  --font-body:     'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, monospace; /* rarely used */

  /* Type scale (px). Display sizes use clamp() in components for fluidity. */
  --fs-hero:       96px;   /* 72–96; clamp in usage */
  --fs-h2:         56px;   /* 40–56 */
  --fs-h3:         40px;
  --fs-h4:         28px;
  --fs-sub:        18px;
  --fs-body:       15px;
  --fs-nav:        14px;
  --fs-caption:    13px;
  --fs-label:      11px;

  /* Tracking */
  --tr-hero:       -0.02em;     /* −2px equivalent at large sizes        */
  --tr-h2:         -0.018em;    /* −1px                                   */
  --tr-sub:       -0.018em;     /* −0.3px on 18px                         */
  --tr-label:      0.10em;      /* +0.1em — caps labels                   */
  --tr-cap-sm:     0.08em;      /* social proof line                      */

  /* Line height */
  --lh-display:    1.05;
  --lh-heading:    1.15;
  --lh-body:       1.75;
  --lh-tight:      1.3;

  /* ─── Spacing (from brief Webflow scale) ─────────────────── */
  --s-xs:   8px;
  --s-sm:   16px;
  --s-md:   24px;
  --s-lg:   40px;
  --s-xl:   80px;
  --s-xxl:  120px;

  --pad-section-y:        var(--s-xxl);   /* 120px desktop  */
  --pad-section-y-mobile: var(--s-xl);    /* 80px mobile    */

  --container:        1200px;
  --container-text:   800px;

  /* ─── Borders, shadows, radii ────────────────────────────── */
  --rule:           1px solid var(--border);
  --rule-strong:    1px solid var(--color-ink);
  --radius-0:       0;            /* default — sharp corners everywhere */
  --radius-circle:  50%;          /* only for mascot avatar             */

  /* No drop shadows. No gradients. Don't add tokens for them. */
}

/* ============================================================
   Base
   ============================================================ */

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

html, body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── Headings (Georgia, lighter weights) ──────────────────── */
h1, .h1, h2, .h2, h3, .h3 {
  font-family: var(--font-display);
  font-weight: 400;
  margin: 0;
  letter-spacing: var(--tr-h2);
  line-height: var(--lh-heading);
  color: var(--fg-1);
}

h1, .h1 {
  /* H1 is usually visually hidden — the visual hero is set in components */
  font-size: var(--fs-hero);
  letter-spacing: var(--tr-hero);
  line-height: var(--lh-display);
}

h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sub);
  letter-spacing: var(--tr-sub);
  line-height: var(--lh-tight);
  margin: 0;
}

/* ─── Body, helpers ────────────────────────────────────────── */
p, .p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  text-wrap: pretty;
}
p.ink, .p.ink { color: var(--fg-1); }

.lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 60ch;
}

.label {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--accent);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: var(--tr-cap-sm);
  text-transform: uppercase;
  color: var(--fg-2);
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .12s ease, font-weight .12s ease;
}
a:hover { text-decoration: underline; text-underline-offset: 4px; }

::selection { background: var(--accent); color: #fff; }

/* ─── Reveal keyframes — transform only, opacity stays at 1.
   Keeping opacity:1 means content is always visible; only a subtle rise. */
@keyframes burp-fade-in {
  from { transform: translateY(10px); }
  to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  @keyframes burp-fade-in {
    from { transform: none; }
    to   { transform: none; }
  }
}

/* ─── Buttons (sharp corners; black default; orange on accent CTA) ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 28px;
  background: var(--color-ink);
  color: #fff;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-0);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; text-decoration: none; }
.btn--accent { background: var(--accent); border-color: var(--accent); }
.btn--accent:hover { background: var(--color-ink); border-color: var(--color-ink); }
.btn--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.btn--ghost:hover { background: var(--color-ink); color: #fff; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }

/* ─── Rules ────────────────────────────────────────────────── */
hr, .rule { border: 0; height: 1px; background: var(--border); margin: 0; }

/* ─── Containers ───────────────────────────────────────────── */
.container { max-width: var(--container); margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.container--text { max-width: var(--container-text); margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.section { padding-top: var(--pad-section-y); padding-bottom: var(--pad-section-y); }
@media (max-width: 768px) {
  .section { padding-top: var(--pad-section-y-mobile); padding-bottom: var(--pad-section-y-mobile); }
}