/* ————————————————————————————————————————————————
   Cohesive paper theme — the app-owned layer on top of landing-kit.css.

   Shared by every marketing surface: the landing pages and the /guides and
   /compare articles. It lives in one file because the landing and the articles
   share a masthead, a colophon and a palette, and two copies of that would have
   drifted the first time one was edited.

   The kit rule holds: personality from the kit, palette from the app. Only the
   --lk-* colour tokens are overridden; the skeleton is untouched.
   ———————————————————————————————————————————————— */

/* Palette values are the app's own day palette from AwarenessTheme.kt. */
:root {
  --lk-paper: #f9f6ee;
  --lk-ink: #191713;
  --lk-surface: #ffffff;
  --lk-accent: #8a5f00;
  --lk-accent-contrast: #ffffff;
  --lk-soft: #e0d9c9;
  --lk-line: rgba(25, 23, 19, .28);
}

/* BaseLayout ships the dark product theme; these surfaces own paper. */
html.lk-page {
  color-scheme: light;
  background: var(--lk-paper);
  font-family: var(--lk-body);
}
html.lk-page body { background: var(--lk-paper); color: var(--lk-ink); min-width: 320px; }
html.lk-page :is(h1, h2, h3) { letter-spacing: -.03em; }
html.lk-page :is(p, li) { color: var(--lk-ink); line-height: 1.6; }
/* Must outrank the rule above: the handwritten voice is the accent (kit §3), and
   a blanket paragraph colour silently flattens it to ink. */
html.lk-page .lk-hand { color: var(--lk-accent); line-height: 1; }
html.lk-page a { color: inherit; }
html.lk-page a:hover { color: var(--lk-accent); }
html.lk-page .skip-link { background: var(--lk-ink); color: var(--lk-paper); }

/* BaseLayout's draft-status banner and the kit's grain are both body::before.
   The banner wins on specificity but inherits the grain's fixed/z-index/opacity
   and becomes invisible, so restore the grain explicitly and let the draft
   warning live on the chrome-bearing pages instead. */
html.lk-page body::before {
  content: "";
  display: block;
  padding: 0;
  background-color: transparent;
  opacity: .16;
}

/* The consent panel ships with the dark product theme; on paper it needs the
   kit's edges, and the privacy-preserving choice must not read as secondary. */
html.lk-page .consent {
  border: 3px solid var(--lk-ink);
  border-radius: 0;
  background: var(--lk-surface);
  box-shadow: var(--lk-shadow);
}
html.lk-page .consent p { color: var(--lk-ink); font-size: .9rem; }
html.lk-page .consent button {
  flex: 1 1 auto;
  border: 2px solid var(--lk-ink);
  border-radius: 0;
  background: var(--lk-paper);
  color: var(--lk-ink);
  box-shadow: 3px 3px 0 var(--lk-ink);
  font: 700 .9rem/1.1 var(--lk-body);
}
html.lk-page .consent button[data-choice="essential"] {
  background: var(--lk-accent);
  color: var(--lk-accent-contrast);
}

/* —— masthead —— */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 72px;
  border-bottom: 4px solid var(--lk-ink);
}
.masthead-brand { font-weight: 700; letter-spacing: .12em; text-decoration: none; }
.masthead-tag { color: color-mix(in srgb, var(--lk-ink) 62%, transparent); }
.masthead-lang { padding-bottom: 2px; border-bottom: 2px solid var(--lk-ink); text-decoration: none; }

/* —— FAQ accordion —— */
/* Shared by the landing's "Questions people ask" and every /guides and /compare article. It lived
   in LandingPage.astro until the articles rendered raw <details> markers without it. */

.faq-list { margin-top: 44px; border-top: 2px solid var(--lk-ink); }
.faq-item { border-bottom: 2px solid var(--lk-ink); }
.faq-item summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  margin-left: auto;
  font: 400 2rem/1 var(--lk-body);
  color: var(--lk-accent);
}
.faq-item[open] summary::after { content: "\2013"; }
.faq-question { margin: 0; font: 700 clamp(1.1rem, 2.2vw, 1.45rem)/1.25 var(--lk-display); }
.faq-answer { max-width: 68ch; margin: 0 0 26px; font-size: 1.02rem; line-height: 1.7; }

/* —— colophon —— */

.colophon { padding: 40px 0 44px; border-top: 4px solid var(--lk-ink); }
.colophon-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.colophon-group-title { color: color-mix(in srgb, var(--lk-ink) 58%, transparent); }
.colophon-group ul { margin: 12px 0 0; padding: 0; list-style: none; }
.colophon-group li { margin-bottom: 8px; font-size: .95rem; }
.colophon-group a { text-underline-offset: 4px; }
.colophon-lockup { margin: 36px 0 0; padding-top: 22px; border-top: 2px solid var(--lk-line); }

@media (max-width: 860px) {
  .colophon-groups { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .masthead { flex-wrap: wrap; padding-block: 14px; }
  .colophon-groups { grid-template-columns: 1fr; }
}