/* Zorba · Reptile Rompers — 2026-06-04 */
:root {
  /* Reptile palette */
  --leaf-deep:   #0e3a2a;
  --leaf-mid:    #1c5f43;
  --leaf-bright: #3aa86b;
  --leaf-soft:   #d7ecdc;

  /* Romper palette */
  --romper-pink:  #ffd0db;
  --romper-coral: #ff7e9b;
  --romper-rose:  #c44569;

  /* Warm neutrals */
  --cream:    #fbf7ee;
  --cream-2:  #f3ecde;
  --ink:      #1c2620;
  --ink-soft: #56615a;
  --gold:     #d4a13a;
  --line:     rgba(28, 38, 32, 0.10);

  /* Role accents */
  --brandon: #5f7adb;
  --noelle:  #e85ba0;
  --fiona:   #a55cd5;
  --zoe:     #4ec3c4;
  --lisa:    #d4a13a;
  --zorba:   #3aa86b;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(circle at 12% -10%, rgba(58, 168, 107, 0.10), transparent 55%),
    radial-gradient(circle at 92% 8%, rgba(255, 126, 155, 0.10), transparent 55%),
    radial-gradient(circle at 50% 110%, rgba(212, 161, 58, 0.10), transparent 55%);
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; }
em { font-style: italic; font-weight: 500; color: var(--leaf-mid); }
code { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 0.92em; background: rgba(58, 168, 107, 0.08); padding: 1px 6px; border-radius: 4px; color: var(--leaf-deep); }

/* ─── HERO ────────────────────────────────────────────────────────────── */
.hero {
  text-align: center;
  padding: 96px 24px 64px;
  background:
    linear-gradient(180deg, transparent 0%, rgba(58, 168, 107, 0.04) 100%),
    radial-gradient(ellipse at center top, rgba(255, 208, 219, 0.18) 0%, transparent 60%);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 8% 30%,  rgba(58, 168, 107, 0.10) 2px, transparent 3px),
    radial-gradient(circle at 92% 24%, rgba(196, 69, 105, 0.10) 2px, transparent 3px),
    radial-gradient(circle at 16% 78%, rgba(212, 161, 58, 0.10) 2px, transparent 3px),
    radial-gradient(circle at 86% 82%, rgba(58, 168, 107, 0.10) 2px, transparent 3px);
  background-size: 60px 60px;
  opacity: 0.6;
  pointer-events: none;
}
.badge {
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--leaf-mid);
  background: rgba(58, 168, 107, 0.10);
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 28px;
}
.title {
  font-family: "Fraunces", "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(64px, 14vw, 168px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin-bottom: 28px;
  position: relative;
}
.title .line { display: block; }
.title .line:nth-child(1) { color: var(--leaf-deep); }
.title .line.outline {
  -webkit-text-stroke: 2.5px var(--romper-rose);
  color: transparent;
  font-style: italic;
  font-weight: 600;
}
.tagline {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(18px, 2.3vw, 26px);
  line-height: 1.45;
  color: var(--ink);
  max-width: 640px;
  margin: 0 auto 36px;
  font-weight: 400;
}
.hero-cta {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.cta {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 11px 22px;
  border-radius: 999px;
  background: white;
  border: 1.5px solid var(--line);
  color: var(--ink);
  transition: all 0.2s;
}
.cta:hover { border-color: var(--leaf-bright); color: var(--leaf-deep); transform: translateY(-1px); }
.cta.primary { background: var(--leaf-deep); border-color: var(--leaf-deep); color: var(--cream); }
.cta.primary:hover { background: var(--leaf-mid); border-color: var(--leaf-mid); color: white; }
.hero-decor { font-size: 20px; letter-spacing: 12px; opacity: 0.55; }

/* ─── SECTIONS ────────────────────────────────────────────────────────── */
.section {
  padding: 80px 32px;
  max-width: 1280px;
  margin: 0 auto;
}
.section.alt { background: var(--cream-2); max-width: none; margin: 0; padding-left: 32px; padding-right: 32px; }
.section.alt > * { max-width: 1280px; margin-left: auto; margin-right: auto; }
.section-head { text-align: center; margin-bottom: 56px; }
.section-head .kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--romper-rose);
  margin-bottom: 14px;
}
.section-head h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--leaf-deep);
  margin-bottom: 14px;
}
.section-head .lede {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 620px;
  margin: 0 auto;
}

/* ─── ROLE GRID ───────────────────────────────────────────────────────── */
.role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.role-card {
  background: white;
  border-radius: 18px;
  padding: 28px 24px;
  border: 1.5px solid var(--line);
  border-top: 6px solid var(--role-color);
  position: relative;
  transition: all 0.25s;
}
.role-card[data-role="brandon"] { --role-color: var(--brandon); }
.role-card[data-role="noelle"]  { --role-color: var(--noelle);  }
.role-card[data-role="fiona"]   { --role-color: var(--fiona);   }
.role-card[data-role="zoe"]     { --role-color: var(--zoe);     }
.role-card[data-role="lisa"]    { --role-color: var(--lisa);    }
.role-card[data-role="zorba"]   { --role-color: var(--zorba);   }
.role-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(28, 38, 32, 0.08);
  border-color: var(--role-color);
  border-top-color: var(--role-color);
}
.role-card.star {
  background: linear-gradient(180deg, white 0%, rgba(58, 168, 107, 0.06) 100%);
  grid-column: span 1;
}
.role-card.star::after {
  content: "★ THE STAR";
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--zorba);
  background: rgba(58, 168, 107, 0.10);
  padding: 4px 10px;
  border-radius: 999px;
}
.role-emoji {
  font-size: 44px;
  margin-bottom: 12px;
  filter: drop-shadow(0 2px 8px rgba(28, 38, 32, 0.08));
}
.role-name {
  font-family: "Fraunces", Georgia, serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--leaf-deep);
  margin-bottom: 6px;
  line-height: 1.05;
}
.role-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--role-color);
  margin-bottom: 14px;
  line-height: 1.4;
}
.role-title .designer-note {
  font-weight: 400;
  font-size: 12px;
  color: var(--ink-soft);
  font-style: italic;
}
.role-blurb {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 16px;
}
.role-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.role-tags .tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
  color: var(--ink-soft);
}

/* ─── BRAND STACK ─────────────────────────────────────────────────────── */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}
.brand-card {
  background: white;
  border-radius: 14px;
  padding: 22px 22px;
  border: 1.5px solid var(--line);
  position: relative;
  transition: all 0.2s;
}
.brand-card:hover { border-color: var(--leaf-bright); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(28, 38, 32, 0.06); }
.brand-card.recommended {
  background: linear-gradient(135deg, white 0%, rgba(255, 208, 219, 0.20) 100%);
  border-color: var(--romper-rose);
}
.brand-card.recommended::after {
  content: "⭐ PICK THIS ONE";
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--romper-rose);
}
.brand-key {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.brand-val {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 17px;
  font-weight: 600;
  color: var(--leaf-deep);
  word-break: break-all;
  margin-bottom: 10px;
  letter-spacing: -0.005em;
}
.brand-card.recommended .brand-val { color: var(--romper-rose); }
.brand-why {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
}
.brand-alts {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 11.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* ─── FILMS ───────────────────────────────────────────────────────────── */
.film-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}
.film-card {
  background: white;
  border-radius: 20px;
  padding: 36px 28px;
  border: 1.5px solid var(--line);
  position: relative;
  overflow: hidden;
  transition: all 0.25s;
}
.film-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 100px;
  background: var(--film-grad);
  opacity: 0.15;
  pointer-events: none;
}
.film-zorassic { --film-grad: linear-gradient(135deg, #d4a13a, #8b6914); }
.film-godzorbo { --film-grad: linear-gradient(135deg, #5f7adb, #1a2960); }
.film-harzorba { --film-grad: linear-gradient(135deg, #a55cd5, #4a1a6e); }
.film-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(28, 38, 32, 0.08); }
.film-emoji {
  font-size: 48px;
  margin-bottom: 14px;
  position: relative;
}
.film-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--leaf-deep);
  margin-bottom: 14px;
  line-height: 1;
}
.film-pitch {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 16px;
}
.film-pieces {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.film-pieces strong { color: var(--romper-rose); font-weight: 700; }

/* ─── LAUNCH PHASES ───────────────────────────────────────────────────── */
.phase-list {
  list-style: none;
  max-width: 920px;
  margin: 0 auto;
}
.phase {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px dashed var(--line);
}
.phase:last-child { border-bottom: 0; }
.phase-num {
  font-family: "Fraunces", Georgia, serif;
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, var(--leaf-bright), var(--leaf-deep));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}
.phase-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--leaf-deep);
  margin-bottom: 8px;
}
.phase-detail {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 14px;
}
.phase-tasks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.phase-tasks span {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(58, 168, 107, 0.10);
  color: var(--leaf-deep);
  padding: 5px 12px;
  border-radius: 999px;
}

/* ─── MOTTO ───────────────────────────────────────────────────────────── */
.motto {
  padding-top: 48px;
  padding-bottom: 80px;
  text-align: center;
}
.motto blockquote {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-size: clamp(22px, 3.4vw, 38px);
  line-height: 1.35;
  color: var(--leaf-deep);
  max-width: 820px;
  margin: 0 auto;
  position: relative;
  padding: 0 32px;
}
.motto blockquote::before, .motto blockquote::after {
  font-size: 56px;
  position: absolute;
  color: var(--romper-rose);
  opacity: 0.5;
  line-height: 1;
  font-family: "Fraunces", Georgia, serif;
}
.motto blockquote::before { content: "“"; top: -12px; left: -2px; }
.motto blockquote::after  { content: "”"; bottom: -32px; right: -2px; }
.motto cite {
  display: block;
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--romper-rose);
  margin-top: 24px;
  font-family: "Inter", sans-serif;
}

/* ─── FOOTER ──────────────────────────────────────────────────────────── */
.foot {
  background: var(--leaf-deep);
  color: var(--cream);
  padding: 44px 32px 36px;
}
.foot-row {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}
.foot-brand {
  font-family: "Fraunces", Georgia, serif;
  font-size: 18px;
  color: var(--cream);
}
.foot-brand strong { color: var(--romper-pink); font-weight: 600; }
.foot-actions { display: flex; gap: 10px; }
.foot-btn {
  padding: 11px 22px;
  border-radius: 999px;
  background: transparent;
  color: var(--cream);
  border: 1.5px solid rgba(251, 247, 238, 0.30);
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s;
}
.foot-btn:hover { border-color: var(--cream); transform: translateY(-1px); }
.foot-btn.primary { background: var(--romper-coral); border-color: var(--romper-coral); color: white; }
.foot-btn.primary:hover { background: var(--romper-rose); border-color: var(--romper-rose); }
.foot-note {
  max-width: 1280px;
  margin: 18px auto 0;
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: rgba(251, 247, 238, 0.55);
  text-align: center;
}

/* ─── RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .hero { padding: 64px 18px 48px; }
  .section { padding: 56px 18px; }
  .section.alt { padding-left: 18px; padding-right: 18px; }
  .phase { grid-template-columns: 60px 1fr; gap: 16px; }
  .phase-num { font-size: 44px; }
  .role-card.star { grid-column: span 1; }
  .foot-row { flex-direction: column; text-align: center; }
}