/* ============================================================
   Luma — inner pages (blog, legal, contact, accessibility)

   Loaded after styles.css and built entirely on its tokens, so the
   articles and legal text sit in the same design as the homepage
   instead of the old dark theme. Nothing here restyles the header,
   footer or buttons — those come from styles.css unchanged.
   ============================================================ */

/* ── Page frame ─────────────────────────────────────────── */
.page {
  padding-block: clamp(48px, 7vw, 88px) clamp(64px, 9vw, 120px);
}

/* Measure, not width. ~68 characters is the readable line length, and
   these pages are all long-form. */
.page__body {
  max-width: 44rem;
}

.page__head {
  margin-bottom: clamp(32px, 5vw, 48px);
}

.page__title {
  margin: 8px 0 0;
  font-size: clamp(34px, 5.4vw, 52px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.page__lede {
  margin: 18px 0 0;
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.6;
  color: var(--muted);
}

/* ── Back link ──────────────────────────────────────────── */
.backlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;          /* same target floor as the rest of the site */
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-strong);
  text-decoration: none;
}

.backlink:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Long-form prose ────────────────────────────────────── */
.prose {
  font-size: 17px;
  line-height: 1.72;
  color: var(--ink-soft);
}

.prose > * + * {
  margin-top: 1.15em;
}

.prose h2 {
  margin-top: 2.1em;
  margin-bottom: 0;
  font-size: clamp(22px, 2.6vw, 27px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.prose h3 {
  margin-top: 1.7em;
  margin-bottom: 0;
  font-size: clamp(18px, 2vw, 20px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

.prose strong {
  font-weight: 700;
  color: var(--ink);
}

.prose a {
  color: var(--brand-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.prose a:hover {
  text-decoration-thickness: 2px;
}

.prose ul,
.prose ol {
  padding-left: 1.35em;
}

.prose li + li {
  margin-top: 0.5em;
}

.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }

.prose li::marker {
  color: var(--muted-2);
}

.prose blockquote {
  margin-inline: 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--brand-tint-2);
  color: var(--muted);
  font-style: italic;
}

.prose code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--brand-tint);
  font-size: 0.9em;
}

.prose hr {
  margin-block: 2.4em;
  border: 0;
  border-top: 1px solid var(--line);
}

/* Sections inside the legal pages: a heading plus its body, repeated.
   `.prose > * + *` only reaches direct children, so the rhythm has to be
   restated inside the section wrapper — and the section's own gap replaces
   the heading's top margin so the two don't stack. */
.prose__section + .prose__section {
  margin-top: 2.4em;
}

.prose__section > * + * {
  margin-top: 1.15em;
}

.prose__section > h2:first-child,
.prose__section > h3:first-child {
  margin-top: 0;
}

.prose__section > h2 + *,
.prose__section > h3 + * {
  margin-top: 0.7em;
}

/* ── Meta line (category · date · reading time) ─────────── */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted-2);
}

.post-meta__category {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
}

.post-meta__sep {
  color: var(--line);
}

.post-byline {
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--muted);
}

/* ── Blog index ─────────────────────────────────────────── */
.post-list {
  display: grid;
  gap: 18px;
  max-width: 52rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.post-card {
  position: relative;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.post-card:hover {
  border-color: var(--brand-tint-2);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .post-card { transition: none; }
  .post-card:hover { transform: none; }
}

.post-card__title {
  margin: 12px 0 0;
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* The whole card is the target, but only the title is the link — so the
   accessible name stays the headline rather than the entire excerpt. */
.post-card__link {
  color: inherit;
  text-decoration: none;
}

.post-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.post-card__link:hover {
  color: var(--brand-strong);
}

.post-card__excerpt {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

/* ── Contact form ───────────────────────────────────────── */
.form {
  display: grid;
  gap: 20px;
  max-width: 32rem;
}

.field {
  display: grid;
  gap: 8px;
}

.field__label {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 16px;   /* 16px stops iOS zooming the page on focus */
}

.field__textarea {
  min-height: 160px;
  resize: vertical;
}

.field__input::placeholder,
.field__textarea::placeholder {
  color: var(--muted-2);
}

.field__input:focus-visible,
.field__select:focus-visible,
.field__textarea:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-color: var(--brand);
}

.form__status {
  padding: 16px 18px;
  border: 1px solid var(--tone-green);
  border-radius: var(--r-sm);
  background: var(--tint-green);
  color: var(--ink);
}

/* ── Footnote block (affiliate disclosure, statement dates) ─ */
.note-block {
  margin-top: 3.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}

.note-block__kicker {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.note-block__body {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}