@import url("colors_and_type.css");

/* ============================================================
   ErinVentures — Website shared styles
   Lawler Ventures ecosystem · ink + gold on cream
   LIGHT / EDITORIAL: cream-dominant, ink type, gold accents.
   Dark (ink + gold aurora) is the rare inverted moment.
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ---------- Tweakable theme hooks ---------- */
:root {
  --accent: var(--ev-gold-700);        /* legible gold accent text on cream */
  --accent-bright: var(--ev-gold-500); /* brand gold — fills, marks, focus */
  --accent-soft: var(--ev-gold-300);   /* light gold — accent text on ink */
  --spark: var(--ev-gold-500);
  --page-dark: var(--ev-ink-800);      /* ink for the inverted dark moment */
  --flare-1: rgba(218,165,32,0.18);    /* gold aurora */
  --flare-2: rgba(168,125,18,0.13);
  --section-pad: clamp(72px, 9vw, 144px);
  --gutter: clamp(24px, 5vw, 80px);
  --maxw: 1240px;
}
/* Color mood: clean whites (no cream) */
body[data-mood="editorial"] { --bg-page: #ffffff; }
body[data-mood="bright"]    { --bg-page: #ffffff; }
body[data-mood="soft"]      { --bg-page: #F4F5F6; }

/* Family echo: show the footer ecosystem band (nvested + Fresh + Lawler) */
body[data-family="echo"] .family-band { display: block; }

/* ---------- Layout primitives ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { position: relative; padding: var(--section-pad) 0; }
.section-light { background: var(--bg-page); color: var(--fg-1); }
.section-paper { background: var(--ev-paper); color: var(--fg-1); }
.section-cream2 { background: var(--ev-cream-2); color: var(--fg-1); }
.section-dark { background: var(--page-dark); color: var(--fg-on-dark); }
.section-tight { padding: clamp(48px,6vw,88px) 0; }

/* Gold aurora flare — subtle on cream, richer on the dark moment */
.flare {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(55% 70% at 82% 10%, var(--flare-1) 0%, transparent 60%),
    radial-gradient(60% 80% at 10% 94%, var(--flare-2) 0%, transparent 60%);
}
.section-dark .flare {
  background:
    radial-gradient(55% 70% at 82% 8%, rgba(218,165,32,0.22) 0%, transparent 58%),
    radial-gradient(60% 80% at 8% 96%, rgba(168,125,18,0.16) 0%, transparent 60%);
}
.section > .wrap { position: relative; z-index: 1; }

/* Hairline rule helper */
.rule { height: 1px; background: var(--border-1); border: 0; margin: 0; }
.section-dark .rule { background: var(--border-dark); }

/* ---------- Type roles ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 12px;
}
.section-dark .eyebrow { color: var(--accent-soft); }
.eyebrow.on-light { color: var(--accent); }
.eyebrow .bolt { width: 10px; height: 15px; flex-shrink: 0; }
.eyebrow .line { width: 36px; height: 1px; background: currentColor; opacity: 0.45; }

.display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--t-display); line-height: 0.98;
  letter-spacing: -0.018em; text-transform: uppercase;
  margin: 0; color: var(--fg-1);
}
.section-dark .display { color: var(--fg-on-dark); }
.display .em { color: var(--accent); font-style: normal; }
.section-dark .display .em { color: var(--accent-soft); }

h2.heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(30px, 4vw, 52px); line-height: 1.0;
  letter-spacing: -0.018em; text-transform: uppercase;
  margin: 0; color: var(--fg-1);
}
.section-dark h2.heading { color: var(--fg-on-dark); }
h2.heading .em { color: var(--accent); }
.section-dark h2.heading .em { color: var(--accent-soft); }
h3.subhead {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(19px, 2vw, 24px); line-height: 1.1;
  text-transform: uppercase; letter-spacing: -0.01em; margin: 0;
}
.lede {
  font-family: var(--font-body); font-weight: 400;
  font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6;
  color: var(--fg-2); max-width: 60ch;
}
.section-dark .lede { color: var(--fg-on-dark-2); }
.body-copy { font-size: 16px; line-height: 1.65; color: var(--fg-2); }
.section-dark .body-copy { color: var(--fg-on-dark-2); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 800;
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 16px 26px; border-radius: var(--r-pill); border: 1px solid transparent;
  cursor: pointer; transition: transform var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
  text-decoration: none; line-height: 1;
}
.btn svg { width: 15px; height: 15px; }
/* Primary: brand gold fill, ink text (high-contrast, on-brand) */
.btn-primary {
  background: var(--ev-gold-500); color: var(--ev-ink-800);
  box-shadow: 0 10px 30px -12px rgba(218,165,32,0.65);
}
.btn-primary:hover { transform: translateY(-2px); background: var(--ev-gold-400); box-shadow: 0 16px 40px -12px rgba(218,165,32,0.85); }
/* Ghost: ink outline on cream; cream outline on ink */
.btn-ghost { background: transparent; border-color: var(--border-1); color: var(--fg-1); }
.btn-ghost:hover { transform: translateY(-2px); background: rgba(14,17,15,0.04); border-color: var(--ev-ink-800); }
.section-dark .btn-ghost { background: rgba(244,242,234,0.04); border-color: rgba(244,242,234,0.24); color: var(--fg-on-dark); }
.section-dark .btn-ghost:hover { background: rgba(244,242,234,0.09); border-color: rgba(244,242,234,0.5); }
/* The hero is full-bleed ink (the "ink bookends" refactor) but is .hero, not
   .section-dark — so it needs the same on-dark ghost treatment, or the button
   renders ink-on-ink and disappears. */
.hero .btn-ghost { background: rgba(244,242,234,0.04); border-color: rgba(244,242,234,0.24); color: var(--fg-on-dark); }
.hero .btn-ghost:hover { background: rgba(244,242,234,0.09); border-color: rgba(244,242,234,0.5); }
.btn-arrow { transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px) scale(0.985); filter: blur(6px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), filter .8s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; filter: blur(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; filter:none; transition:none; } html{scroll-behavior:auto;} }

/* Scroll progress bar */
#scrollbar { position: fixed; top: 0; left: 0; height: 2.5px; width: 0%; background: linear-gradient(90deg, var(--ev-gold-600), var(--ev-gold-400)); z-index: 999; transition: width .08s linear; }

/* Gentle parallax hooks (translateY driven by JS via --py) */
[data-parallax] { will-change: transform; transform: translateY(calc(var(--py, 0) * 1px)); }

/* ---------- Responsive hardening ---------- */
.display, h2.heading, h3.subhead, .tier-card .t-name, .offer-card h3, .model .step h4 { overflow-wrap: break-word; }
.hero-title { overflow-wrap: normal; word-break: keep-all; }

@media (max-width: 900px){
  :root { --section-pad: clamp(60px, 11vw, 110px); }
}
@media (max-width: 600px){
  :root { --section-pad: clamp(52px, 13vw, 88px); }
  .hero .wrap { padding-top: 104px; padding-bottom: 64px; }
  .hero-title { font-size: clamp(34px, 11vw, 52px); }
  .sectors, .fb-links, .chips { gap: 8px; }
  .btn { padding: 15px 22px; }
  .hero-cta .btn, .cta-band .btn { width: 100%; justify-content: center; }
}
@media (max-width: 380px){
  .display { font-size: clamp(30px, 9vw, 40px) !important; }
}