/* Day Twenty Two — guide template
   Shared by the static guide pages in client/public/ (21-day-rule.html,
   ab2801.html, wear-and-tear.html). Follows
   client/scratchpad/article-news-mockup.svg: the site header and footer
   from the landing page (App.css .app-header / .app-footer, reproduced here
   because the static pages do not load the app bundle), then the guide —
   eyebrow, display headline, deck, mono dateline, hairline — and, from
   960px, a 640px article column beside a sticky sidebar. Below 960px the
   sidebar's three blocks stack under the article in the same order.

   Tokens mirror App.css. Every text/background pair here was checked for
   WCAG AA: ink on white 14.6:1, ink on cream 12.7:1, muted on white 5.5:1,
   muted on cream 4.8:1, forest on white 9.5:1, forest on cream 8.2:1,
   --kicker-small (#7A5F22) on white 6.1:1 and on cream 5.3:1 — so the 12px
   eyebrows clear the 4.5:1 normal-text bar on both grounds. White on forest
   (the button) is 9.5:1. Sand is used only for rules, dots and the header
   line — never as text.

   The pages link brand/fonts/fonts.css themselves; this file assumes the
   three faces are declared. */

:root {
  --bg: #F4EFE6;
  --card: #ffffff;
  --ink: #1B2A24;
  --muted: #5E6B64;
  --accent: #1F4D3A;
  --accent-ink: #ffffff;
  --sand: #E8C170;
  --kicker-small: #7A5F22;
  --border: #E3DCCF;
  --font-display: 'Archivo', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-text: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;
}

* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.5;
}

a {
  color: var(--accent);
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- Site header: the landing page's, verbatim in static HTML.
   Lockup (mark + wordmark, Logo.js at size 26) left, the nav right, a 2px
   sand rule under both across the 1008px content width. */
.app-header {
  padding: 22px 16px 0;
}
.app-header-inner {
  max-width: 1008px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--sand);
}
.lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  text-decoration: none;
  line-height: 1;
}
.lockup svg {
  display: block;
  flex: none;
  width: 27px;
  height: 26px;
}
.lockup .wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transform: translateY(-1px);
}
.site-nav {
  display: flex;
  gap: 16px;
  font-size: 0.9rem;
}
.site-nav a {
  color: var(--muted);
  text-decoration: none;
}
.site-nav a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ---- Site footer: the landing page's. A rule across the page, then the
   small lockup (Logo.js at size 20) and the two lines. */
.app-footer {
  margin-top: 64px;
  border-top: 1px solid var(--border);
  padding: 28px 16px 32px;
  color: var(--muted);
  font-size: 13px;
}
.app-footer-inner {
  max-width: 1008px;
  margin: 0 auto;
}
.app-footer .lockup {
  gap: 8px;
}
.app-footer .lockup svg {
  width: 21px;
  height: 20px;
}
.app-footer .lockup .wordmark {
  font-size: 16px;
}
.app-footer p {
  margin: 4px 0 0;
}
.app-footer p:first-of-type {
  margin-top: 14px;
}

/* ---- Guide head: eyebrow, headline, deck, dateline, hairline. */
.guide {
  max-width: 1008px;
  margin: 0 auto;
  padding: 0 16px;
}
.eyebrow {
  margin: 0;
  color: var(--kicker-small);
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.guide-head {
  padding-top: 52px;
}
.guide-title {
  margin: 20px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 36px;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--accent);
  text-wrap: balance;
}
.guide-deck {
  margin: 20px 0 0;
  max-width: 1008px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.4;
}
.guide-dateline {
  margin: 20px 0 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
}
.guide-rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 22px 0 0;
}
@media (min-width: 960px) {
  .guide-head {
    padding-top: 56px;
  }
  .guide-title {
    font-size: 52px;
  }
  .guide-deck {
    font-size: 20px;
  }
}

/* ---- Body layout: one column, the sidebar after the article; from 960px
   the 640px article beside the sidebar, which is sticky. The sidebar column
   is what remains of the 1008px width (368px, of which 80px is the gutter),
   so its text sits on the mockup's 288px column and the header rule, the
   article and the sidebar all share one left and right edge. */
.guide-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-top: 40px;
}
.guide-article {
  min-width: 0;
  max-width: 640px;
}
.guide-sidebar {
  margin-top: 56px;
  max-width: 640px;
}
@media (min-width: 960px) {
  .guide-body {
    grid-template-columns: 640px minmax(0, 1fr);
    padding-top: 48px;
  }
  .guide-sidebar {
    margin-top: 0;
    max-width: none;
    padding-left: 80px;
    position: sticky;
    top: 24px;
    align-self: start;
  }
}

/* ---- Article text: 17px/1.6 Instrument Sans on a 640px measure. */
.guide-article {
  font-size: 17px;
  line-height: 1.6;
}
.guide-article p {
  margin: 16px 0 0;
}
.guide-article strong {
  color: var(--accent);
  font-weight: 700;
}
.guide-article a:hover {
  text-decoration: underline;
}
.guide-article ol,
.guide-article ul {
  margin: 16px 0 0;
  padding-left: 26px;
}
.guide-article li {
  margin: 10px 0 0;
}
.guide-article li:first-child {
  margin-top: 0;
}
.guide-article ul.dots {
  list-style: none;
  padding-left: 0;
}
.guide-article ul.dots li {
  position: relative;
  padding-left: 18px;
}
.guide-article ul.dots li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sand);
}

/* Drop cap on the first paragraph: the display face at ExtraBold, three
   lines deep (3 x 27.2px line boxes = 81.6px). */
.guide-article .drop::first-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 76px;
  line-height: 0.82;
  padding: 6px 10px 0 0;
  color: var(--accent);
}

/* Key points: a white card with a hairline border and a 5px sand rule at
   the left, 26px padding on every side, sand dots. */
.key-points {
  margin: 0 0 32px;
  padding: 26px;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 5px solid var(--sand);
}
.key-points .eyebrow {
  margin: 0;
}
.key-points ul {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.4;
}
.key-points li {
  position: relative;
  margin: 0;
  padding-left: 20px;
}
.key-points li + li {
  margin-top: 12px;
}
.key-points li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sand);
}

/* Statute quotations as pull quotes: the display face at Bold, 20px, a 5px
   sand rule, and a mono attribution. */
.pull-quote {
  margin: 28px 0 0;
  padding: 4px 0 4px 23px;
  border-left: 5px solid var(--sand);
}
.pull-quote blockquote {
  margin: 0;
}
.pull-quote blockquote p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: var(--accent);
}
.pull-quote figcaption {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* Section subheads: the divider (three forest bars, sand dot — the mark laid
   flat, as on the landing page), then the title in the display face. */
.section-head {
  margin: 44px 0 0;
}
.section-divider {
  display: block;
  width: 140px;
  height: 9px;
  fill: var(--accent);
}
.section-divider circle {
  fill: var(--sand);
}
.section-head h2 {
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--accent);
  text-wrap: balance;
}
@media (min-width: 960px) {
  .section-head h2 {
    font-size: 30px;
  }
}

/* Two-column example lists: a labelled column of sand-dot items beside one
   of forest-dot items; stacked below 600px. */
.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px 32px;
  margin: 24px 0 0;
}
@media (min-width: 600px) {
  .two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.two-col .eyebrow {
  margin: 0;
}
.two-col ul {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.4;
}
.two-col li {
  position: relative;
  margin: 0;
  padding-left: 18px;
}
.two-col li + li {
  margin-top: 8px;
}
.two-col li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sand);
}
.two-col .col-forest li::before {
  background: var(--accent);
}
.two-col-note {
  margin: 20px 0 0;
  color: var(--muted);
  font-style: italic;
  font-size: 15px;
  line-height: 1.45;
}

/* In-article call to action: the site's primary button (forest, white text)
   and the note under it. */
.guide-cta {
  margin: 28px 0 0;
}
.btn-primary {
  display: inline-block;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}
.btn-primary:hover {
  filter: brightness(1.08);
  text-decoration: none;
}
.btn-primary .arrow {
  display: inline-block;
}
.cta-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 15px;
}

/* Quick answers (the FAQ in the two existing guides). */
.faq {
  margin: 20px 0 0;
}
.faq dt {
  margin: 22px 0 0;
  font-weight: 700;
  color: var(--accent);
}
.faq dt:first-child {
  margin-top: 0;
}
.faq dd {
  margin: 6px 0 0;
}

/* The disclaimer that ends every guide. */
.guide-disclaimer {
  margin: 40px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

/* ---- Sidebar: three blocks — the statute at a glance, the check, more
   guides — each opened by an eyebrow, separated by hairlines, the first
   under a 2px forest rule. */
.sidebar-block {
  padding: 26px 0 30px;
  border-top: 1px solid var(--border);
}
.sidebar-block:first-child {
  padding-top: 26px;
  border-top: 2px solid var(--accent);
}
.sidebar-block h2 {
  margin: 0;
}
.statute-glance dl {
  margin: 18px 0 0;
}
.statute-glance dt {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.5;
  color: var(--accent);
}
.statute-glance dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--muted);
}
.statute-glance dd + dt {
  margin-top: 14px;
}
.sidebar-check p {
  margin: 16px 0 0;
  font-size: 14.5px;
  line-height: 1.4;
}
.sidebar-check .btn-primary {
  display: block;
  width: 100%;
  margin-top: 18px;
}
.more-guides a {
  display: block;
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--accent);
  text-decoration: none;
}
.more-guides a:hover {
  text-decoration: underline;
}

/* Phones. */
@media (max-width: 599px) {
  .guide-head {
    padding-top: 36px;
  }
  .guide-title {
    font-size: 32px;
  }
  .guide-deck {
    font-size: 17px;
  }
  .guide-body {
    padding-top: 28px;
  }
  .key-points {
    padding: 22px 20px 22px 21px;
  }
  .guide-article .drop::first-letter {
    font-size: 64px;
    line-height: 0.84;
    padding-top: 5px;
  }
  .btn-primary {
    display: block;
    width: 100%;
  }
}