/* ============================================================
   Kylechelin House of Ink — "Ink & bone"
   Design system per research/design-language.md
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --ground: #F3EFE7;   /* page background */
  --surface: #FFFFFF;  /* cards — FLIPS in dark mode */
  --ink: #16141A;      /* body text */
  --muted: #5A5560;    /* secondary text */
  --brand: #8E2A1E;    /* CTA fill */
  --brand-text: #8E2A1E; /* accent text */
  --rule: #D8D1C3;     /* hairlines */

  /* Fixed tokens — these DO NOT flip. Text on always-dark bands /
     brand fills. Kept separate from --surface so remapping surface
     for dark mode never steals the colour of band/hero/footer text. */
  --bone: #F1ECE2;     /* text on always-dark bands (fixed) */
  --on-brand: #FFFFFF; /* text on brand fill (fixed) */
  --band: #16141A;     /* always-dark header/hero/footer/CTA/brief panel */
  --band-2: #08070A;   /* deepest band (footer / brief panel) */
  --on-band-muted: #C7C1B7; /* muted text on dark bands (fixed, ≥4.5 on band) */
  --rule-dark: #2E2A33;

  --maxw: 1080px;
  --radius: 10px;
  --font-head: "Barlow Condensed", system-ui, sans-serif;
  --font-body: "Work Sans", system-ui, sans-serif;
}

[data-theme="dark"] {
  --ground: #0E0D10;
  --surface: #1A181D;     /* cards flip dark */
  --ink: #F1ECE2;
  --muted: #B4ADA6;
  --brand: #B03A2B;       /* white text ≥4.5:1 — measured ~7:1 */
  --brand-text: #F08A78;
  --rule: #2E2A33;
  --band: #08070A;
  --band-2: #08070A;
  --on-band-muted: #C7C1B7;
  --rule-dark: #2E2A33;
  /* --bone, --on-brand stay fixed (white/bone) — not redefined */
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  background: var(--ground);
  overflow-x: hidden; /* 320px: no horizontal overflow */
}
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.08;
  margin: 0 0 .4em;
  color: var(--ink);
  letter-spacing: .01em;
}
h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.6vw, 1.55rem); }
h4 { font-size: 1.1rem; }
p { margin: 0 0 1rem; }
a { color: var(--brand-text); }
a:hover { text-decoration: underline; }

.muted { color: var(--muted); }
.eyebrow {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .78rem;
  font-weight: 600;
  color: var(--brand-text);
  margin: 0 0 .5rem;
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 20px; /* only horizontal — never `padding: X 0` on .container */
}
.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section--tight { padding-block: clamp(1.8rem, 4vw, 2.6rem); }

.grid { display: grid; gap: 1.25rem; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
/* 320px: grid children must be allowed to shrink */
.grid > * { min-width: 0; }

.stack > * + * { margin-top: 1rem; }
.center { text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: .72em 1.3em;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s, color .15s, border-color .15s;
  max-width: 100%;
  overflow-wrap: anywhere; /* wrap long phone text / labels at 320px */
}
.btn:hover { text-decoration: none; }
.btn--primary {
  background: var(--brand);
  color: var(--on-brand);
  border-color: var(--brand);
}
.btn--primary:hover { background: #7a231a; border-color: #7a231a; color: var(--on-brand); }
[data-theme="dark"] .btn--primary:hover { background: #c6442f; border-color: #c6442f; }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}
.btn--ghost:hover { border-color: var(--brand); color: var(--brand-text); }
.btn--sm { font-size: .9rem; padding: .55em 1em; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.card h3 { margin-top: 0; }

/* ---------- Chips ---------- */
.chip {
  display: inline-block;
  font-size: .82rem;
  font-weight: 500;
  padding: .3em .75em;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--muted);
}
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- Hairline rule ---------- */
.hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* ---------- NAP list ---------- */
dl.nap { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; }
dl.nap dt { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; color: var(--muted); align-self: center; }
dl.nap dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }

/* ---------- Image notes & demo note ---------- */
.img-note {
  font-size: .78rem;
  color: var(--muted);
  font-style: italic;
  margin: .5rem 0 0;
}
.demo-note {
  background: var(--band-2);
  color: var(--bone);
  font-size: .85rem;
  text-align: center;
  padding: .7rem 20px;
}
.demo-note a { color: #F0A090; }

.figure { margin: 0; }
.figure img { border-radius: var(--radius); border: 1px solid var(--rule); }

/* ---------- Star / proof ---------- */
.stars { color: #9A6B00; font-size: 1.05em; letter-spacing: .05em; } /* amber ≥4.5:1 on bone */
[data-theme="dark"] .stars { color: #E8B84B; }
.proof { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: baseline; }
.proof .num { font-family: var(--font-head); font-size: 2rem; font-weight: 700; color: var(--ink); line-height: 1; }
.proof .lbl { font-size: .85rem; color: var(--muted); }

/* ============================================================
   ALWAYS-DARK SECTIONS — explicit light-on-dark text rules.
   Applies to header, .hero, .band, footer and .brief panel.
   Every text role is set so remapping surface in dark mode can
   never leave text unreadable. Verified in BOTH themes.
   ============================================================ */
.band, .hero, .site-header, .site-footer, .brief {
  background: var(--band);
  color: var(--bone);
}
.hero, .site-footer, .brief { background: var(--band-2); }

.band h1, .band h2, .band h3, .band h4,
.hero h1, .hero h2, .hero h3, .hero h4,
.site-header h1, .site-header h2, .site-header h3, .site-header h4,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4,
.brief h1, .brief h2, .brief h3, .brief h4 { color: var(--bone); }

.band p, .band li, .band .muted,
.hero p, .hero li, .hero .muted,
.site-header p, .site-header li, .site-header .muted,
.site-footer p, .site-footer li, .site-footer .muted,
.brief p, .brief li, .brief .muted { color: var(--bone); }

/* muted variant on dark bands stays readable (fixed, not --muted) */
.band .muted, .hero .muted, .site-footer .muted, .brief .muted,
.band .img-note, .hero .img-note, .site-footer .img-note, .brief .img-note,
.band .proof .lbl, .hero .proof .lbl, .site-footer .proof .lbl { color: var(--on-band-muted); }

.band .eyebrow, .hero .eyebrow, .site-footer .eyebrow, .brief .eyebrow { color: #F08A78; }
.band .proof .num, .hero .proof .num, .site-footer .proof .num { color: var(--bone); }

/* NAP labels AND values inside dark bands (footer / hero too) */
.band dl.nap dt, .hero dl.nap dt, .site-footer dl.nap dt, .brief dl.nap dt { color: var(--on-band-muted); }
.band dl.nap dd, .hero dl.nap dd, .site-footer dl.nap dd, .brief dl.nap dd { color: var(--bone); }

/* chips on dark bands */
.band .chip, .hero .chip, .site-footer .chip, .brief .chip {
  background: rgba(255,255,255,.06);
  border-color: var(--rule-dark);
  color: var(--on-band-muted);
}

/* ghost buttons on dark bands — light outline/text */
.band .btn--ghost, .hero .btn--ghost, .site-footer .btn--ghost, .brief .btn--ghost {
  color: var(--bone);
  border-color: rgba(241,236,226,.4);
}
.band .btn--ghost:hover, .hero .btn--ghost:hover, .site-footer .btn--ghost:hover, .brief .btn--ghost:hover {
  border-color: var(--bone);
  color: var(--bone);
}

/* notes / demo note inside bands */
.band .img-note, .hero .img-note, .brief .img-note { color: var(--on-band-muted); }

/* generic links inside dark sections -> bone/accent */
.band a, .hero a, .site-footer a, .brief a { color: #F0A090; }

/* -----------------------------------------------------------
   BUTTON TEXT must NOT be overridden by the dark-section link
   rules above, including :hover. Equal/higher specificity
   exceptions (a.btn--primary / a.btn--ghost).
   ----------------------------------------------------------- */
.band a.btn--primary, .hero a.btn--primary, .site-footer a.btn--primary, .brief a.btn--primary,
.band a.btn--primary:hover, .hero a.btn--primary:hover, .site-footer a.btn--primary:hover, .brief a.btn--primary:hover {
  color: var(--on-brand);
}
.band a.btn--ghost, .hero a.btn--ghost, .site-footer a.btn--ghost, .brief a.btn--ghost,
.band a.btn--ghost:hover, .hero a.btn--ghost:hover, .site-footer a.btn--ghost:hover, .brief a.btn--ghost:hover {
  color: var(--bone);
}

/* ---------- Header / nav ---------- */
.site-header { border-bottom: 1px solid var(--rule-dark); position: sticky; top: 0; z-index: 50; }
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .9rem;
}
.brand {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bone);
  text-decoration: none;
  white-space: normal;   /* 320px: brand wraps at spaces */
  line-height: 1.05;
}
.brand:hover { text-decoration: none; }
.brand .mark { color: #F08A78; }
.nav { display: flex; align-items: center; gap: 1.4rem; }
.nav ul { list-style: none; display: flex; gap: 1.2rem; margin: 0; padding: 0; flex-wrap: wrap; }
.nav a {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .9rem;
  color: var(--bone);
  text-decoration: none;
}
.nav a:hover, .nav a[aria-current="page"] { color: #F0A090; text-decoration: none; }
.header-cta { display: inline-flex; }

/* theme toggle */
.theme-toggle {
  background: transparent;
  border: 1px solid rgba(241,236,226,.35);
  color: var(--bone);
  width: 40px; height: 40px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.theme-toggle:hover { border-color: var(--bone); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero .container { position: relative; z-index: 2; padding-block: clamp(3rem, 8vw, 6rem); }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: .28; filter: grayscale(1); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8,7,10,.55), rgba(8,7,10,.8)); }
.hero .lead { font-size: clamp(1.05rem, 2.2vw, 1.25rem); max-width: 48ch; }

/* ---------- Styles row / tiles ---------- */
.style-tags { display: flex; flex-wrap: wrap; gap: .6rem; }
.style-tags .chip { font-size: .95rem; padding: .45em 1em; color: var(--ink); background: var(--surface); }

/* ---------- Steps ---------- */
.steps { counter-reset: step; }
.step .n {
  font-family: var(--font-head); font-weight: 700; font-size: 1.6rem;
  color: var(--brand-text); display: block; margin-bottom: .3rem;
}

/* ---------- Footer ---------- */
.site-footer { margin-top: 0; }
.site-footer .container { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.footer-grid > * { min-width: 0; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid ul li + li { margin-top: .4rem; }
.footer-bottom { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--rule-dark); font-size: .82rem; }

/* ============================================================
   INK BRIEF signature feature
   ============================================================ */
.brief-form fieldset { border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.2rem 1.3rem; margin: 0 0 1.25rem; min-width: 0; }
.brief-form legend { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; padding: 0 .4rem; color: var(--ink); }
.brief-form .help { font-size: .85rem; color: var(--muted); margin: .2rem 0 .9rem; }

.option-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .6rem; }
.option-grid > * { min-width: 0; }

/* radio / checkbox tiles — labels wrapping native inputs; NO nested buttons */
.opt {
  position: relative;
  display: flex; align-items: center; gap: .6rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: .7rem .85rem;
  cursor: pointer;
  background: var(--surface);
  font-size: .95rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.opt input { accent-color: var(--brand); flex: 0 0 auto; margin: 0; }
.opt:hover { border-color: var(--brand); }
.opt:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.opt:has(input:focus-visible) { outline: 2px solid var(--brand-text); outline-offset: 2px; }

.field-text, .field-area, .field-date {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: .7rem .8rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
}
.field-text:focus, .field-area:focus, .field-date:focus { outline: 2px solid var(--brand-text); outline-offset: 1px; border-color: var(--brand); }
.field-area { resize: vertical; min-height: 4rem; }
.inline-field { margin-top: .7rem; }
.inline-field label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .3rem; }
.when-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.when-row .opt { flex: 0 0 auto; }

.hidden { display: none !important; }

/* Ink Brief result panel — always-dark .brief */
.brief { border-radius: var(--radius); padding: 1.6rem; margin-top: 1.5rem; }
.brief h3 { margin-top: 0; }
.brief .summary {
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  line-height: 1.3;
  color: var(--bone);
  margin: 0 0 1.2rem;
  overflow-wrap: anywhere;
}
.brief .summary .sep { color: #F08A78; padding: 0 .35em; }
.brief .checklist { list-style: none; margin: 0 0 1.3rem; padding: 0; }
.brief .checklist li { color: var(--bone); padding-left: 1.6rem; position: relative; margin-bottom: .5rem; }
.brief .checklist li::before { content: "\2713"; position: absolute; left: 0; color: #F08A78; font-weight: 700; }
.brief .msg-preview {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--rule-dark);
  border-radius: 8px;
  padding: .9rem 1rem;
  font-size: .9rem;
  color: var(--on-band-muted);
  margin: 0 0 1.2rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.copy-status { font-size: .85rem; color: var(--on-band-muted); min-height: 1.2em; margin: .6rem 0 0; }

/* ============================================================
   NEEDS CONTENT placeholder
   ============================================================ */
.placeholder {
  border: 2px dashed var(--rule);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--muted);
  background: transparent;
}
.placeholder strong { color: var(--ink); font-family: var(--font-head); letter-spacing: .05em; }

/* ============================================================
   RESPONSIVE — 320px first principles
   ============================================================ */
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  /* nav on its own row */
  .site-header .container { flex-wrap: wrap; }
  .nav { width: 100%; order: 3; }
  .nav ul { width: 100%; justify-content: flex-start; gap: .9rem 1.1rem; }
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  /* hide header CTA & subtitle at small widths */
  .header-cta, .header-sub { display: none !important; }
  .proof { gap: 1rem 1.75rem; }
  .btn-row .btn { width: 100%; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* used when measuring contrast — disable transitions */
.no-transition * { transition: none !important; }