/* ------------------------------------------------------------------
   LIGHT THEME — bone ground, dark ink. Concept pass; overrides only.
   ------------------------------------------------------------------ */
:root {
  --bone: #f5efdf;
  --bone-2: #eee6d2;

  /* one ground: every token the base sheet paints a panel with resolves to
     the SAME bone, so no section can quietly land on a second shade.
     Recessed surfaces (fields, code) use --field on purpose. */
  --paper: var(--bone);
  --paper-2: var(--bone);
  --card: var(--bone);
  --field: var(--bone-2);

  --ink: #100f0c;          /* body text, was cream */
  --ink-2: #3b372e;        /* secondary copy */
  --earth: #24211a;
  --earth-2: #565042;      /* muted, still AA on bone */
  --earth-3: #6b6454;      /* mono eyebrows */
  --muted: #6b6454;

  --line: #ded4bb;
  --dark: #100f0c;
  --dark-2: #1b1913;
  --dark-3: #262219;
}

/* the page ground itself */
body { background: var(--bone); color: var(--ink); }
body, .film, .band, .close, .faq-section, .footer { background: var(--bone); }

/* nav, once it leaves the hero */
.nav.scrolled { background: rgba(245,239,223,.86); border-bottom: 1px solid var(--line); }

/* the wordmark ships as cream — invert it for bone */
.brand-mark, .footer .brand-mark { filter: brightness(0) saturate(100%); }

/* dark boxes that were black-on-black */
.vslot, .shotframe { background: var(--bone); border-color: var(--line); }

/* lime buttons already carry dark ink — keep the ghost readable on bone */
.btn-ghost { color: var(--ink); border-color: rgba(16,15,12,.28); }
.btn-ghost:hover { border-color: var(--ink); background: rgba(16,15,12,.05); }

/* ------------------------------------------------------------------
   Sections the base sheet paints dark with hardcoded colours — the
   token swap above can't reach these, so they're restated here.
   ------------------------------------------------------------------ */

/* FAQ */
.faq-section { background: var(--bone); }
.faq-icon { border-color: var(--ink); color: var(--ink); }
.faq-wrap h2, .rundown-head h2 { color: var(--ink); }
.faq-list { border-top-color: var(--line); }
.faq-list details { border-bottom-color: var(--line); }
.faq-list summary { color: var(--ink); }
.faq-list summary:hover { color: var(--ink); opacity: .7; }
.faq-list p { color: var(--ink-2); }
.faq-list summary::after { border-right-color: var(--earth-2); border-bottom-color: var(--earth-2); }

/* closing block + technical rundown */
.close { background: var(--bone); }
.close h2 { color: var(--ink); }
.close p { color: var(--ink-2); }
.close .meta { color: var(--earth-2); }
.technical-rundown { background: var(--bone); border-top-color: var(--line); }

/* the ghost button's three faces must share one edge colour */
.btn-ghost {
  --edge: rgba(16,15,12,.26);
  --face: transparent;
  --face-2: transparent;
  color: var(--ink);
  border-color: rgba(16,15,12,.26);
}
.btn-ghost:hover {
  --edge: rgba(16,15,12,.45);
  border-color: rgba(16,15,12,.45);
  background: rgba(16,15,12,.05);
}

/* The ink button is a CREAM chip in the base sheet, so its three faces are warm
   greys built to sit on a dark page. On bone it becomes a dark chip, and the
   faces have to follow it down — the same way the lime button's faces are a
   darker lime — or the block reads as a dark rectangle floating on light card. */
.btn-ink {
  background: #1c1a14;
  color: var(--bone);
  border-color: #0b0a07;
  --face: #12110c;
  --face-2: #0a0906;
  --edge: #000;
  box-shadow: 9px 11px 18px -7px rgba(16, 15, 12, .28);
}
.btn-ink:hover { background: #2a261d; }
.btn-ink:active { box-shadow: inset 0 2px 0 rgba(0, 0, 0, .3); }

/* footer */
.footer { background: var(--bone); border-top: 1px solid var(--line); }
.footer a, .footer p, .footer-links a { color: var(--ink-2); }
.footer a:hover, .footer-links a:hover { color: var(--ink); }

/* sub-page furniture: hero bands, legal columns, contact + support cards */
.page-hero { background: var(--bone); border-bottom: 1px solid var(--line); }
.page-hero h1, .legal-layout h1, .legal-layout h2, .legal-layout h3 { color: var(--ink); }
.page-hero p, .legal-layout p, .legal-layout li { color: var(--ink-2); }
.legal-toc { background: var(--bone); border: 1px solid var(--line); }
.legal-toc a { color: var(--ink-2); }
.legal-toc a:hover { color: var(--ink); }
.contact-box, .notice, .copy-cmd, .card, .shotframe, .vslot {
  background: var(--bone);
  border-color: var(--line);
  color: var(--ink);
}
.contact-toggle button { color: var(--ink-2); border-color: var(--line); }
.contact-toggle button[aria-selected="true"] { background: var(--lime); color: var(--ink); }
input, textarea, select {
  background: var(--field);
  color: var(--ink);
  border-color: var(--line);
}
input::placeholder, textarea::placeholder { color: var(--earth-3); }

/* Lime is a background colour, not a text colour — on bone it sits at 1.5:1.
   Anything that used lime (or cream) as TYPE gets the deep olive instead. */
:root { --lime-ink: #61701c; }
.eyebrow-mono, .close .eyebrow-mono, .page-hero .eyebrow-mono,
.band-copy .eyebrow-mono, .band-copy h2 b,
.band-list li b, .band-list b { color: var(--lime-ink); }
.band-list li, .band-list span { color: var(--ink-2); }
.page-kicker, .dl-steps strong, .steps strong, li strong,
.step-list strong, .step-list li strong { color: var(--lime-ink); }

/* the same lime-as-type problem in body copy: inline links and run-in labels */
strong { color: var(--lime-ink); }
main a:not(.btn):not(.brand), .contact-box a:not(.btn), .notice a:not(.btn) { color: var(--lime-ink); }
main a:not(.btn):not(.brand):hover { color: var(--ink); }

/* ------------------------------------------------------------------
   ONE GROUND. Every band, card and panel sits on the same bone as the
   page; structure comes from the 1px rule, never from a second shade.
   Only genuine input surfaces (fields, code blocks) stay recessed.
   ------------------------------------------------------------------ */
.page-hero,
.technical-rundown,
.legal-toc,
.contact-box,
.notice,
.card,
.support-card,
.plan,
.shotframe,
.vslot,
.faq-section,
.close,
.band,
.film,
.subpage,
main,
section {
  background-color: var(--bone);
}

/* the heading band keeps its rule but loses the tint */
.page-hero { border-bottom: 1px solid var(--line); }

/* panels are drawn by their border alone */
.legal-toc, .contact-box, .notice, .card, .support-card, .plan, .shotframe, .vslot {
  border: 1px solid var(--line);
}

/* the two surfaces that SHOULD read as recessed */
.copy-cmd, pre, code, input, textarea, select { background-color: var(--field); }

/* the base sheet's literal panel colours, mapped onto the one ground */
[class*="card"], [class*="panel"], [class*="box"], .rail > article, .rail > div {
  background-color: var(--bone);
}
.step-list { background-color: var(--bone); }

/* ------------------------------------------------------------------
   The nav is fixed and ~81px tall, but the sub-page override drops the
   top padding to 58px — so the kicker starts underneath it, and on a
   phone the heading is behind the bar entirely.
   ------------------------------------------------------------------ */
html { scroll-padding-top: 110px; }
.subpage { padding-top: 156px; }
.page-hero { margin-bottom: 72px; }

@media (max-width: 900px) {
  .subpage { padding-top: 140px; }
}
@media (max-width: 720px) {
  .subpage { padding-top: 128px; }
  .page-hero { margin-bottom: 52px; }
}

/* ---- "works with what you have" band on the home page -------------- */
.works { padding: 8px 0 92px; background: var(--bone); }
.works h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(22px, 2.6vw, 34px); margin: 0 0 30px; color: var(--ink);
}
.works-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.works-grid h3 { margin: 0 0 9px; font-size: 15px; font-weight: 500; color: var(--ink); }
.works-grid p { margin: 0 0 10px; color: var(--ink-2); font-size: 14px; line-height: 1.62; }
.works-grid a {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--lime-ink);
}
@media (max-width: 980px) { .works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .works-grid { grid-template-columns: 1fr; gap: 20px; } }

/* the site claimed BreadcrumbList in structured data with no breadcrumb on the
   page — markup has to describe something a reader can see */
.crumbs {
  margin: 0 0 18px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--earth-2);
}
.crumbs a { color: var(--earth-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs span { margin: 0 6px; }