/* ─────────────────────────────────────────────────────────────────────────
   artiFACT — shared brand stylesheet for the static SEO pages
   (10 category hubs, 12 guide pages, terms, privacy).

   These pages used to each carry their own inline <style> block built around
   a dark #080d1e ground with indigo gradients and system-ui — a completely
   different design language from the app, the landing page, and the SSR item
   pages. Since they're the pages organic search actually lands on, they were
   most visitors' first impression of the brand.

   This file is the same editorial system used by the SSR item pages
   (routes/upload.py) and the landing page: warm cream, ink, restrained
   terracotta, Playfair Display over Source Serif 4.

   The CSS variable NAMES are deliberately unchanged from the old stylesheet —
   ~470 inline `style="color: var(--text)"` attributes in the page bodies and
   both post-build injector scripts depend on them. Only the values moved.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --bg:      #FAF5EC;   /* warm cream — page ground */
  --surface: #F5EFE2;   /* raised paper — cards, wells */
  --panel:   #FFFCF5;   /* brightest panel */
  --border:  #E8DFD2;   /* hairline */
  --text:    #1F1A14;   /* ink */
  --muted:   #6B5F50;   /* soft ink — body copy, captions */
  --faint:   #A89C8A;   /* footnotes, disabled */
  --accent:  #C8624A;   /* terracotta — used sparingly */
  --accent-text: #A04E37; /* darker terracotta, legible as link text */
  --amber:   #6b4e0c;   /* value/money — deep bronze-gold, AAA on cream */

  --display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --body:    'Source Serif 4', 'Source Serif Pro', Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--text); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── Nav ────────────────────────────────────────────────────────────────── */
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  background: rgba(250, 245, 236, 0.94);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 10;
}
.nav-logo { text-decoration: none; color: var(--text); }
.nav-logo div {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.5px;
}
/* The wordmark used to be two spans with a gradient on the second half.
   It's one italic word now — both spans just render inline. */
.nav-logo span { color: inherit; font: inherit; letter-spacing: inherit; }

.nav-cta {
  flex: none;
  padding: 11px 22px;
  background: var(--text);
  color: var(--bg);
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.15s;
}
.nav-cta:hover { background: var(--accent); color: var(--bg); }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.container { max-width: 720px; margin: 0 auto; padding: 0 24px; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { padding: 76px 24px 60px; text-align: center; }

.hero-eyebrow {
  display: block;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--accent);
  margin-bottom: 22px;
}

h1 {
  font-family: var(--display);
  font-size: clamp(34px, 6vw, 54px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -1.2px;
  margin-bottom: 20px;
  text-wrap: balance;
}
/* Emphasis in a headline is carried by the italic, not by a second color —
   the same move the landing page makes with "Know what / you own." */
h1 em { font-style: italic; color: inherit; }

.hero-sub {
  font-size: 19px;
  color: var(--muted);
  max-width: 54ch;
  margin: 0 auto 32px;
  line-height: 1.6;
}

.hero-cta {
  display: inline-block;
  padding: 15px 34px;
  background: var(--text);
  color: var(--bg);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.15s;
}
.hero-cta:hover { background: var(--accent); color: var(--bg); }

.hero-note { margin-top: 14px; font-size: 14px; color: var(--muted); font-style: italic; }
.hero-note a { color: var(--accent-text); }

/* ── Sections ───────────────────────────────────────────────────────────── */
section { padding: 56px 0; border-top: 1px solid var(--border); }
section:first-of-type { border-top: none; }

h2 {
  font-family: var(--display);
  font-size: clamp(25px, 3.6vw, 33px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.6px;
  margin-bottom: 14px;
  text-wrap: balance;
}
h3 {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  margin: 30px 0 8px;
}
p { color: var(--muted); margin-bottom: 16px; }
p:last-child { margin-bottom: 0; }
article strong { color: var(--text); font-weight: 600; }
article em { font-style: italic; }
article ul, article ol { color: var(--muted); margin: 0 0 16px 22px; }
article li { margin-bottom: 7px; }

/* ── Steps — numbered I. II. III. via a counter ─────────────────────────── */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  margin-top: 34px;
  counter-reset: step;
}
.step { counter-increment: step; text-align: left; }
.step h3 { margin: 0 0 7px; font-size: 19px; }
.step p { font-size: 15.5px; line-height: 1.6; }

/* The markup carries "1" / "2" / "3" as text — hide it and set a roman
   numeral from the counter instead, matching the landing page's I. II. III. */
.step-num {
  font-size: 0;
  color: transparent;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.step-num::before {
  content: counter(step, upper-roman) ".";
  font-family: var(--display);
  font-size: 25px;
  font-weight: 700;
  font-style: italic;
  color: var(--accent);
  letter-spacing: 0;
}

/* ── Result grid — what the analysis covers ─────────────────────────────── */
.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0;
  margin-top: 30px;
}
/* Rule sits on the TOP of each cell, not the bottom — the grid closes without
   a trailing hairline, so it never doubles up with the next section's rule. */
.result-item {
  padding: 18px 20px 18px 0;
  border-top: 1px solid var(--border);
}
/* Decorative emoji markers are stripped from the markup; this is a backstop
   for any that survive a future edit. */
.result-icon { display: none; }
.result-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 6px;
}
.result-value { font-size: 15.5px; color: var(--muted); line-height: 1.55; }

/* ── Type cards ─────────────────────────────────────────────────────────── */
.types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin-top: 28px;
}
.type-card {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 22px 20px;
}
.type-card strong {
  display: block;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.25;
}
.type-card span { font-size: 15px; color: var(--muted); line-height: 1.6; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq { display: flex; flex-direction: column; margin-top: 26px; }
.faq-item { border-bottom: 1px solid var(--border); padding: 22px 0; }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-q {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 9px;
  line-height: 1.3;
}
.faq-a { font-size: 16px; color: var(--muted); line-height: 1.65; }

/* ── Closing CTA band ───────────────────────────────────────────────────── */
.cta-band {
  margin: 60px 0;
  padding: 52px 32px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
}
.cta-band h2 { margin-bottom: 12px; }
.cta-band p { margin: 0 auto 26px; max-width: 46ch; }

/* ── Guides index ───────────────────────────────────────────────────────── */
.guide-list { display: flex; flex-direction: column; margin-top: 30px; }
/* Two columns — title left, blurb right. Explicit tracks (not space-between)
   so long titles get real room instead of collapsing and orphaning the arrow.
   The rule sits on top of each row so the list closes without a trailing
   hairline doubling up with the next section's. */
.guide-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 8px 32px;
  align-items: baseline;
  padding: 24px 2px;
  border-top: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition: padding-left 0.15s;
}
.guide-card:hover { padding-left: 10px; color: var(--text); }
.guide-card strong {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
}
.guide-card span { font-size: 15.5px; color: var(--muted); line-height: 1.55; }
.guide-card .arrow { color: var(--accent); font-size: 19px; white-space: nowrap; }

.hubs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hub-link {
  padding: 9px 17px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.hub-link:hover { border-color: var(--accent); color: var(--text); }

/* ── Terms / Privacy ────────────────────────────────────────────────────── */
.wrap { max-width: 720px; margin: 0 auto; padding: 56px 24px 80px; }
.wrap h2 { margin-top: 40px; }
.wrap p, .wrap li { color: var(--muted); }
.wrap ul, .wrap ol { margin: 0 0 16px 22px; }
.kicker {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--accent);
  margin-bottom: 18px;
}
.updated { font-size: 14px; color: var(--faint); font-style: italic; margin-bottom: 34px; }

/* ── Figures (injected post-build into guides) ──────────────────────────── */
figure { margin: 0 0 8px; text-align: center; }
figcaption { font-family: var(--body); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--border);
  padding: 40px 24px;
  text-align: center;
  font-size: 14px;
  color: var(--faint);
  margin-top: 20px;
}
footer a { color: var(--muted); }
footer a:hover { color: var(--text); }

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .nav { padding: 15px 18px; }
  .nav-cta { padding: 10px 15px; font-size: 11px; letter-spacing: 1px; }
  .nav-logo div { font-size: 19px; }
  .hero { padding: 52px 20px 44px; }
  .container { padding: 0 20px; }
  section { padding: 44px 0; }
  .steps { gap: 28px; }
  .types-grid { grid-template-columns: 1fr; gap: 16px; }
  .results-grid { grid-template-columns: 1fr; }
  .result-item { padding-right: 0; }
  .cta-band { padding: 40px 22px; margin: 44px 0; }
  .guide-card { grid-template-columns: 1fr; gap: 7px; }
  .guide-card strong { font-size: 19px; }
  .wrap { padding: 40px 20px 64px; }
}

/* Narrow phones — the nav CTA labels are long ("Analyze My Postcard →"), so
   shrink them further rather than letting them crowd the wordmark. */
@media (max-width: 420px) {
  .nav { padding: 13px 15px; gap: 10px; }
  .nav-logo div { font-size: 17px; }
  .nav-cta { padding: 9px 12px; font-size: 10px; letter-spacing: 0.7px; }
}