/* ───────── Tokens ───────── */
:root {
  color-scheme: only light;
  /* default = "Forest" dark section */
  --bg: #0D1611;
  --bg-elev: #121C17;
  --bg-card: #18241D;
  --ink: #F2EEE2;
  --ink-soft: #C0BCAF;
  --ink-mute: #7C7B71;
  --line: rgba(242, 238, 226, 0.10);
  --line-strong: rgba(242, 238, 226, 0.22);
  --green: #1F5D3B;
  --green-hi: #2F7A4F;
  --green-deep: #08120D;
  --accent: #C7E635;   /* IG-bright lime · matches book cover · LOUD moments */
  --accent-soft: #9CAE5C;  /* muted sage · small ornaments, dots, ticks */
  --ornament: #E8E0CB; /* warm bone · subtle editorial moments */
  --gold: #C9A961;
  --danger: #C2553C;

  --display: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --sans:    "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono:    "Geist Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
  --accent-serif: "Fraunces", "Times New Roman", Georgia, serif;

  --maxw: 1360px;
  --gutter: clamp(20px, 4vw, 72px);
  --section: clamp(72px, 12vw, 180px);
}

/* Prevent system dark-mode from inverting the design */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: only light; }
}

/* ───────── Mobile-first refinements ───────── */
@media (max-width: 720px) {
  :root {
    --gutter: 18px;
    --section: 64px;
    --maxw: 100%;
  }
  body { font-size: 16px; }
  .display { letter-spacing: -0.03em; }
  h1.display { font-size: clamp(40px, 11vw, 64px) !important; line-height: 1.0; }
  h2.display { font-size: clamp(34px, 9vw, 52px) !important; line-height: 1.02; }
  h3.display { font-size: clamp(22px, 6vw, 32px) !important; }
  .body-lg { font-size: 16px; }
  .section-head {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding-bottom: 28px !important;
    margin-bottom: 32px !important;
  }
  .btn { padding: 14px 18px; font-size: 13px; width: auto; }
  .card { padding: 24px !important; }
}

/* ───────── Section themes ───────── */
.theme-bone {
  --bg: #EFEAD9;
  --bg-elev: #E7E1CD;
  --bg-card: #FFFCF1;
  --ink: #0D1611;
  --ink-soft: #3C403B;
  --ink-mute: #87867D;
  --line: rgba(13, 22, 17, 0.12);
  --line-strong: rgba(13, 22, 17, 0.28);
  --accent: #1F5D3B;
  --accent-soft: #1F5D3B;
  background: #EFEAD9;
  color: #0D1611;
}
.theme-black {
  --bg: #08110D;
  --bg-elev: #0C1611;
  --bg-card: #101C16;
  --ink: #F2EEE2;
  --ink-soft: #B5B2A7;
  --ink-mute: #6A6A60;
  --line: rgba(242, 238, 226, 0.08);
  --line-strong: rgba(242, 238, 226, 0.20);
  background: #08110D;
  color: #F2EEE2;
}
.theme-forest {
  background: #0D1611;
  color: #F2EEE2;
}
.theme-terracotta {
  --bg: #C2553C;
  --bg-elev: #B14A33;
  --bg-card: #D4644D;
  --ink: #FAF6EC;
  --ink-soft: rgba(250, 246, 236, 0.85);
  --ink-mute: rgba(250, 246, 236, 0.60);
  --line: rgba(250, 246, 236, 0.18);
  --line-strong: rgba(250, 246, 236, 0.35);
  --accent: #FAF6EC;
  background: #C2553C;
  color: #FAF6EC;
}
.theme-shout {
  --bg: #C7E635;
  --bg-elev: #BAD92A;
  --bg-card: #D4F045;
  --ink: #0D1611;
  --ink-soft: #1B2820;
  --ink-mute: rgba(13, 22, 17, 0.55);
  --line: rgba(13, 22, 17, 0.18);
  --line-strong: rgba(13, 22, 17, 0.30);
  --accent: #0D1611;
  --accent-soft: #0D1611;
  background: #C7E635;
  color: #0D1611;
}
.theme-shout .display em,
.theme-shout .display .italic {
  color: #0D1611;
  background: rgba(13, 22, 17, 0.06);
  padding: 0 0.08em;
}

/* ───────── Reset ───────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--ink); }
body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }

/* ───────── Type ───────── */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}
.eyebrow .dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--accent-soft);
  border-radius: 50%;
  margin: 0 10px 2px 0;
  vertical-align: middle;
}

.display {
  font-family: var(--display);
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.038em;
  line-height: 0.96;
  color: var(--ink);
}
.display em, .display .italic {
  font-family: var(--accent-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -0.02em;
}

h1.display { font-size: clamp(54px, 8.4vw, 132px); font-weight: 600; }
h2.display { font-size: clamp(40px, 6vw, 96px); font-weight: 600; line-height: 0.98; }
h3.display { font-size: clamp(24px, 2.8vw, 38px); font-weight: 600; }

.body-lg {
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 58ch;
  letter-spacing: -0.005em;
}
.body-sm {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* ───────── Layout ───────── */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
section { position: relative; }

/* ───────── Buttons ───────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  border-radius: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn .arrow { width: 14px; height: 14px; transition: transform 0.2s ease; }
.btn:hover .arrow { transform: translate(2px, -2px); }

.btn-primary {
  background: var(--ink);
  color: var(--bg);
}
.btn-primary:hover { background: var(--accent); color: #0D1611; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn-ghost:hover { border-color: var(--ink); }

.btn-gold {
  background: var(--accent);
  color: #0D1611;
}
.btn-gold:hover { opacity: 0.85; }

.linkrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
}
.linkrow:hover { color: var(--accent); border-bottom-color: var(--accent); }
.linkrow .arrow { transition: transform 0.2s ease; }
.linkrow:hover .arrow { transform: translateX(3px); }

/* ───────── Section head ───────── */
.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 72px;
}
.section-head .left { display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 800px) {
  .section-head { grid-template-columns: 1fr; gap: 24px; padding-bottom: 40px; margin-bottom: 40px; }
}

.section-index {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--ink-mute);
  text-transform: uppercase;
  font-weight: 500;
}

/* ───────── Cards ───────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 36px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.card:hover { border-color: var(--line-strong); }

/* ───────── Divider ───────── */
.divider {
  display: flex; align-items: center; gap: 16px;
  color: var(--ink-mute); font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.divider::before, .divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

/* ───────── Marquee ───────── */
.marquee {
  display: flex;
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  animation: marquee 38s linear infinite;
  will-change: transform;
}
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ───────── FAQ ───────── */
details.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 32px 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--ink);
  transition: color 0.2s ease;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary:hover { color: var(--accent); }
details.faq summary .plus {
  font-family: var(--mono);
  color: var(--ink-mute);
  font-size: 14px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
details.faq[open] summary .plus { transform: rotate(45deg); color: var(--accent); }
details.faq .answer {
  padding: 0 0 32px;
  max-width: 70ch;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.6;
}
details.faq:last-of-type { border-bottom: 1px solid var(--line); }

/* ───────── Reveal (subtle, no opacity flash) ───────── */
.reveal { opacity: 1; }

/* ───────── Selection ───────── */
::selection { background: var(--accent); color: #0D1611; }

/* image-slot defaults */
image-slot {
  background: var(--bg-elev);
  color: var(--ink-mute);
}

/* Light-section input overrides */
.theme-bone input,
.theme-bone textarea {
  color: var(--ink) !important;
  border-bottom-color: var(--line-strong) !important;
}
.theme-bone input::placeholder,
.theme-bone textarea::placeholder {
  color: var(--ink-mute);
}