/* Songumentary — shared design system */
/* AKM Brand & Style Guide — Songumentary surface (sienna). D-156.
   Paper-ground identity — replaces the superseded dark theme. */
:root {
  --paper:      #EBE8DC;
  --paper2:     #E1DDCE;
  --paper3:     #D7D2C0;
  --ink:        #191E2B;
  --muted:      #6E6656;
  --hairline:   #C6C3B2;
  --brass:      #8A6A2F;
  --sienna:     #925620;
  --radius:     2px;
  --warn:       #e85c5c;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--paper); color:var(--ink);
  font-family:'Archivo', sans-serif;
  font-size:16px; line-height:1.6; overflow-x:hidden;
}

/* ── NAV ───────────────────────────────────────────────── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(235,232,220,.94); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--hairline);
  padding:0 5%; display:flex; align-items:center;
  justify-content:space-between; height:64px;
}
.logo {
  font-family:'Archivo', sans-serif;
  font-size:1.25rem; font-weight:700; letter-spacing:-.02em;
  color:var(--sienna);
  text-decoration:none;
}
.logo span { color:var(--muted); font-weight:300; font-size:.85em; }
nav ul { list-style:none; display:flex; align-items:center; gap:2rem; }
nav ul a { color:var(--muted); text-decoration:none; font-size:.9rem; font-weight:600; transition:color .2s; }
nav ul a:hover { color:var(--ink); }
nav ul a.active { color:var(--ink); border-bottom:2px solid var(--sienna); }

/* Offers dropdown — CSS-only (details/summary), no JS on this site */
.nav-dropdown { position:relative; }
.nav-dropdown summary {
  cursor:pointer; color:var(--muted); font-size:.9rem; font-weight:600;
  list-style:none; transition:color .2s;
}
.nav-dropdown summary::-webkit-details-marker { display:none; }
.nav-dropdown summary::after { content:'\00a0\25be'; font-size:.7em; }
.nav-dropdown summary:hover { color:var(--ink); }
.nav-dropdown[open] summary { color:var(--ink); }
.nav-dropdown .dropdown-menu {
  position:absolute; top:calc(100% + .75rem); right:0;
  background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius);
  padding:.5rem; min-width:210px; list-style:none;
  z-index:200;
}
.nav-dropdown .dropdown-menu li a {
  display:block; padding:.55rem .75rem; border-radius:var(--radius);
  color:var(--muted); font-size:.85rem; text-decoration:none; transition:background .15s,color .15s;
}
.nav-dropdown .dropdown-menu li a:hover { background:var(--paper2); color:var(--ink); }
.nav-cta {
  background:var(--sienna); color:var(--paper);
  padding:.5rem 1.25rem; border-radius:var(--radius);
  font-size:.875rem; font-weight:600; letter-spacing:.04em; text-decoration:none;
  transition:filter .2s,transform .1s;
}
.nav-cta:hover { filter:brightness(1.12); transform:translateY(-1px); }

/* ── PAGE HERO (inner pages) ────────────────────────────── */
.page-hero {
  padding:9rem 5% 5rem; text-align:center;
  background:var(--paper);
}
.page-hero .family-tag {
  display:inline-block; color:var(--sienna);
  font-size:.69rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; margin-bottom:.75rem;
}
.page-hero h1 {
  font-family:'Eczar', 'Archivo', sans-serif;
  font-size:clamp(2rem,5vw,3.75rem); font-weight:700;
  letter-spacing:-.03em; line-height:1.08; margin-bottom:1.25rem;
  max-width:800px; margin-left:auto; margin-right:auto;
  color:var(--ink);
}
.page-hero h1 .grad { color:var(--sienna); }
.page-hero p {
  color:var(--muted); font-size:clamp(.95rem,1.8vw,1.15rem);
  max-width:620px; margin:0 auto 2rem;
}

/* ── SECTION COMMONS ────────────────────────────────────── */
section { padding:5rem 5%; }
.section-label {
  font-family:'Archivo', sans-serif;
  font-size:.69rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--sienna); margin-bottom:.75rem;
}
h2 {
  font-family:'Eczar', 'Archivo', sans-serif;
  font-size:clamp(1.6rem,3.5vw,2.5rem); font-weight:700;
  letter-spacing:-.03em; margin-bottom:1rem;
  color:var(--ink);
}
.section-intro { color:var(--muted); max-width:620px; font-size:1rem; }

/* ── BUTTONS ────────────────────────────────────────────── */
.btn-primary {
  background:var(--sienna);
  color:var(--paper); padding:.875rem 2rem; border-radius:var(--radius);
  font-weight:600; font-size:.875rem; letter-spacing:.04em; text-decoration:none;
  display:inline-block;
  transition:filter .15s,transform .15s;
}
.btn-primary:hover { filter:brightness(1.12); transform:translateY(-2px); }
.btn-secondary {
  background:transparent; border:1px solid var(--sienna); color:var(--sienna);
  padding:.875rem 2rem; border-radius:var(--radius);
  font-weight:600; font-size:.875rem; letter-spacing:.04em; text-decoration:none;
  transition:border-color .2s,background .2s,color .2s;
}
.btn-secondary:hover { background:var(--sienna); color:var(--paper); }

/* ── HOW IT WORKS (3-step) ──────────────────────────────── */
.how-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.5rem; margin-top:2.5rem; }
.how-step {
  background:var(--paper); border:1px solid var(--hairline);
  border-radius:var(--radius); padding:1.75rem;
  transition:border-color .2s,transform .2s;
}
.how-step:hover { border-color:var(--sienna); transform:translateY(-2px); }
.how-num {
  font-family:'Eczar', 'Archivo', sans-serif;
  font-size:2.5rem; font-weight:700; line-height:1;
  color:var(--sienna);
  margin-bottom:.75rem;
}
.how-step h3 { font-family:'Eczar', 'Archivo', sans-serif; font-size:1rem; font-weight:700; margin-bottom:.4rem; color:var(--ink); }
.how-step p { color:var(--muted); font-size:.875rem; }

/* ── PRICING BAND (offer pages) ─────────────────────────── */
.pricing-band {
  background:var(--paper2); border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  padding:3rem 5%; display:flex; align-items:center;
  justify-content:space-between; gap:2rem; flex-wrap:wrap;
}
.pricing-band .price-display { }
.price-display .amount {
  font-family:'Eczar', 'Archivo', sans-serif;
  font-size:2.25rem; font-weight:700; letter-spacing:-.02em;
  color:var(--sienna);
}
.price-display p { color:var(--muted); font-size:.875rem; margin-top:.25rem; }

/* ── FAMILY INTRO BAND ──────────────────────────────────── */
.family-intro {
  background:var(--paper2);
  border-bottom:1px solid var(--hairline);
  padding:2rem 5%; display:flex; gap:1rem; align-items:center;
}
.family-intro .spirit-line {
  font-size:.69rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--sienna); margin-bottom:.35rem;
}
.family-intro p { color:var(--muted); font-size:.9rem; max-width:600px; }

/* ── CONTACT FORM ───────────────────────────────────────── */
.contact-form-section { background:var(--paper2); }
.contact-inner { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.contact-copy h2 { margin-bottom:1rem; }
.contact-copy p { color:var(--muted); margin-bottom:1.25rem; font-size:.95rem; }
.contact-form {
  background:var(--paper); border:1px solid var(--hairline);
  border-radius:var(--radius); padding:2rem;
}
.form-group { margin-bottom:1.25rem; }
.form-group label {
  display:block; font-size:.75rem; font-weight:600;
  letter-spacing:.04em; color:var(--muted); text-transform:uppercase;
  margin-bottom:.4rem;
}
.form-group input, .form-group select, .form-group textarea {
  width:100%; background:var(--paper2); border:1px solid var(--hairline);
  border-radius:var(--radius); color:var(--ink); font-size:.9rem;
  font-family:inherit; padding:.7rem 1rem; outline:none;
  transition:border-color .2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--sienna); }
.form-group select option { background:var(--paper); }
.form-group textarea { resize:vertical; min-height:100px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-submit {
  width:100%; background:var(--sienna); color:var(--paper); border:none;
  border-radius:var(--radius); padding:.875rem; font-size:.875rem; letter-spacing:.04em;
  font-weight:600; font-family:inherit; cursor:pointer;
  transition:filter .2s,transform .1s;
}
.form-submit:hover { filter:brightness(1.12); transform:translateY(-1px); }
.form-note { color:var(--muted); font-size:.75rem; margin-top:.75rem; text-align:center; }

/* ── TODO BLOCKS (internal editorial scaffolding, not brand chrome) ─────── */
.todo {
  border:2px dashed var(--brass); border-radius:var(--radius);
  padding:1.5rem 2rem; background:rgba(138,106,47,.06);
  color:var(--brass); font-size:.875rem; line-height:1.6;
  margin:1.5rem 0;
}
.todo strong { display:block; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.4rem; opacity:.8; }
.todo-critical {
  border-color:var(--warn); background:rgba(232,92,92,.06); color:var(--warn);
}

/* ── FOOTER ─────────────────────────────────────────────── */
footer {
  background:var(--paper2); border-top:1px solid var(--hairline);
  padding:3rem 5%;
  display:flex; flex-wrap:wrap; gap:2rem;
  justify-content:space-between; align-items:flex-start;
}
.footer-brand .logo { font-size:1rem; }
.footer-brand p { color:var(--muted); font-size:.8rem; margin-top:.5rem; max-width:240px; }
.footer-links h4 { font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:.75rem; }
.footer-links ul { list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.footer-links a { color:var(--muted); text-decoration:none; font-size:.85rem; transition:color .2s; }
.footer-links a:hover { color:var(--ink); }
.footer-bottom {
  margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--hairline);
  color:var(--muted); font-size:.75rem; width:100%;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width:768px) {
  .contact-inner { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .pricing-band { flex-direction:column; align-items:flex-start; }
}
/* ── MOBILE NAV — checkbox-hack, no JS (same approach as the Offers dropdown) ── */
.nav-toggle-checkbox { display:none; }
.nav-toggle-label {
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:28px; height:22px; cursor:pointer; z-index:110;
}
.nav-toggle-label span {
  display:block; width:100%; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle-checkbox:checked ~ .nav-toggle-label span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle-checkbox:checked ~ .nav-toggle-label span:nth-child(2) { opacity:0; }
.nav-toggle-checkbox:checked ~ .nav-toggle-label span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

@media (max-width:600px) {
  .nav-toggle-label { display:flex; }

  nav ul {
    display:none;
    position:fixed; top:64px; left:0; right:0; bottom:0;
    flex-direction:column; gap:0;
    background:var(--paper2); border-top:1px solid var(--hairline);
    padding:1rem 5% 6rem; overflow-y:auto;
    z-index:105;
  }
  .nav-toggle-checkbox:checked ~ ul { display:flex; }

  nav ul li { width:100%; }
  nav ul > li > a {
    display:block; padding:.9rem 0; font-size:1rem;
    border-bottom:1px solid var(--hairline);
  }

  /* Offers dropdown flows inline in the mobile panel instead of floating */
  .nav-dropdown { position:static; }
  .nav-dropdown summary { padding:.9rem 0; border-bottom:1px solid var(--hairline); }
  .nav-dropdown .dropdown-menu {
    position:static; border:none; background:none; min-width:0;
    padding:0 0 .5rem 1rem; margin-top:.25rem;
  }

  /* CTA surfaces as part of the same mobile panel, pinned near the bottom */
  .nav-cta {
    display:none;
    position:fixed; left:5%; right:5%; bottom:1.25rem;
    text-align:center; z-index:106;
  }
  .nav-toggle-checkbox:checked ~ .nav-cta { display:block; }
}