/* Shared styles for individual tip pages at sourdough.tax/tips/<slug>/.
   Composes with tokens.css from the main site (cool ivory paper, federal-blue
   workhorse, treasury-red scoreboard moments). The tips index at /tips/
   keeps its own inline styles; this stylesheet is only for the per-tip pages
   generated by scripts/build-tip-pages.mjs. */

body { background: var(--paper); color: var(--ink); font-family: var(--serif); margin: 0; -webkit-font-smoothing: antialiased; }
.wrap { max-width: 680px; margin: 0 auto; padding: var(--s3) var(--s2) var(--s6); }

/* ── Masthead row ─────────────────────────────────────────────────────── */
.masthead {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: var(--fs-ui); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--mute);
  border-bottom: var(--bd); padding-bottom: var(--s1);
}
.masthead .brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink); text-decoration: none;
  font-family: var(--serif); text-transform: none; letter-spacing: -0.005em;
  font-weight: 700; font-size: var(--fs-lede);
}
.masthead .brand:hover { color: var(--federal); }
.masthead .wordmark-dot { display: inline-block; width: 12px; height: 12px; background: var(--federal); }
.masthead .year-tag { color: var(--warm); }

/* ── Breadcrumb ───────────────────────────────────────────────────────── */
.breadcrumb {
  margin: var(--s3) 0 var(--s2);
  font-family: var(--mono); font-size: var(--fs-ui); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--mute);
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.breadcrumb a { color: var(--federal); text-decoration: none; border-bottom: 1px solid var(--federal); }
.breadcrumb a:hover { background: var(--federal-tint); }
.breadcrumb [aria-current="page"] { color: var(--ink); }

/* ── The tip article ──────────────────────────────────────────────────── */
.tip { margin: var(--s2) 0 var(--s5); }
.tip h1 {
  font-family: var(--serif); font-weight: 700; font-size: var(--fs-hero);
  line-height: 1.12; letter-spacing: -0.01em;
  margin: var(--s3) 0 var(--s2);
}
.tip .lede {
  font-family: var(--serif); font-style: italic; font-size: 19px;
  line-height: 1.5; color: var(--ink-soft);
  margin: 0 0 var(--s3);
}
.tip .body {
  font-family: var(--serif); font-size: var(--fs-body); line-height: 1.65;
  color: var(--ink); padding: 0 0 0 1.5em; margin: 0 0 var(--s3);
}
.tip .body li { margin: 0 0 var(--s2); padding: 0; }
.tip .body li:last-child { margin-bottom: 0; }
.tip .cite {
  font-family: var(--mono); font-size: var(--fs-ui); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--warm);
  border-top: 1px dashed var(--paper-edge);
  padding-top: var(--s2); margin-top: var(--s4);
  line-height: 1.55;
}
.tip .cite-label {
  color: var(--ink); font-weight: 700; letter-spacing: 0.18em;
  margin-right: 8px;
}

/* ── Related tips ─────────────────────────────────────────────────────── */
.related {
  border-top: var(--bd); padding-top: var(--s3); margin-top: var(--s4);
}
.related h2 {
  font-family: var(--mono); font-size: var(--fs-ui); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink);
  margin: 0 0 var(--s2);
}
.related ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.related li { margin: 0; }
.related a {
  display: block;
  border: 1.5px solid var(--paper-edge); background: var(--paper);
  padding: var(--s2) var(--s3);
  text-decoration: none; color: var(--ink);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.related a:hover, .related a:focus-within {
  background: var(--federal-tint);
  border-color: var(--federal);
}
.related .related-title {
  display: block;
  font-family: var(--serif); font-weight: 700; font-size: 17px; line-height: 1.3;
  letter-spacing: -0.003em;
  margin-bottom: 4px;
}
.related .related-subtitle {
  display: block;
  font-family: var(--serif); font-size: 14px; line-height: 1.45;
  color: var(--ink-soft);
}

/* ── Disclaimer + footer ──────────────────────────────────────────────── */
.disclaimer {
  margin-top: var(--s4); padding: var(--s2);
  background: var(--paper-tint); border: var(--bd);
  font-family: var(--serif); font-size: 14px; line-height: 1.5;
  color: var(--warm);
}
.disclaimer strong { color: var(--ink); }

footer {
  margin-top: var(--s4); padding-top: var(--s3); border-top: var(--bd);
  font-family: var(--mono); font-size: var(--fs-ui); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--mute);
  display: flex; justify-content: space-between; gap: var(--s2); flex-wrap: wrap;
}
footer a { color: var(--federal); border-bottom: 1px solid var(--federal); text-decoration: none; }