/* ---------------------------------------------------------------
   The site's header and footer (build.py site_header_html /
   site_footer_html). Loaded by every site.css page AND by the eight
   /life-story/<slug>/ articles, which do not load site.css: everything
   here is sh-/sf- prefixed and self-contained, so neither stylesheet can
   reach it and it cannot reach them. Same palette as the Life Story
   pages (ls-articles.css).

   Contrast (WCAG 2): --c-ink #173f43 on --c-cream 10.8:1 · --c-text
   #3c504d on cream 8.1:1 · --c-rust #a64b30 on cream 5.4:1 · white on
   rust 5.7:1 · white on --c-ink 11.5:1 · --c-sand #f3ece0 on ink 9.8:1.

   Phones: the links fold behind a "Menu" button once /js/nav.js has
   marked <html> with .nav-js; without the script they show, wrapped,
   under the brand. From 960px the links sit in one row.
   ------------------------------------------------------------- */

.sh, .sf {
  --c-ink: #173f43;
  --c-text: #3c504d;
  --c-cream: #faf8f3;
  --c-sand: #f3ece0;
  --c-paper: #fffdf9;
  --c-gold: #c4a370;
  --c-rust: #a64b30;
  --c-rust-h: #8f3f27;
  --c-line: #e4dccd;
  --c-serif: Fraunces, Georgia, "Times New Roman", serif;
  --c-sans: "Atkinson Hyperlegible", Atkinson, Verdana, Arial, sans-serif;
  font-family: var(--c-sans);
}
.sh *, .sf * { box-sizing: border-box; }

/* ---- header ---- */
.sh { position: relative; z-index: 30; background: var(--c-cream); border-bottom: 1px solid var(--c-line); }
.sh-in {
  width: min(1180px, 100% - 32px);
  margin-inline: auto;
  min-height: 68px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.sh-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  padding: 6px 0;
  font: 600 21px/1.1 var(--c-serif);
  letter-spacing: -0.02em;
  color: var(--c-ink);
  text-decoration: none;
  white-space: nowrap;
}
.sh-brand:hover .sh-name { text-decoration: underline; text-decoration-color: var(--c-gold); text-underline-offset: 5px; }
.sh-mark { width: 18px; height: 22px; flex: none; color: var(--c-rust); transform: rotate(-6deg); }
.sh-dot { color: var(--c-rust); margin-left: -8px; }
.sh-plain .sh-in { justify-content: center; }
.sh-plain .sh-brand { margin: 0; }

.sh-nav { width: 100%; padding: 0 0 12px; }
.sh-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.sh-links a {
  display: inline-block;
  padding: 8px 0;
  font-size: 17px;
  line-height: 1.3;
  color: var(--c-ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.sh-links a:hover { color: var(--c-rust); }
.sh-links a[aria-current="page"], .sh-links a.is-here { color: var(--c-rust); border-bottom-color: var(--c-gold); font-weight: 700; }
.sh-cta { margin-top: 10px; }

.sh-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 18px;
  background: var(--c-rust);
  border: 1px solid var(--c-rust);
  border-radius: 4px;
  color: #fff;
  font: 700 16px/1.2 var(--c-sans);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s, transform 0.18s;
}
.sh-button span { font-weight: 400; font-size: 18px; }
.sh-button:hover { background: var(--c-rust-h); transform: translateY(-1px); }

.sh-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  margin: 0;
  padding: 8px 14px;
  background: var(--c-paper);
  color: var(--c-ink);
  border: 1.5px solid var(--c-ink);
  border-radius: 4px;
  font: 700 16px/1 var(--c-sans);
  cursor: pointer;
}
.sh-toggle:hover, .sh-toggle:focus { background: var(--c-sand); color: var(--c-ink); border-color: var(--c-ink); transform: none; }
.sh-bars, .sh-bars::before, .sh-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}
.sh-bars { position: relative; }
.sh-bars::before, .sh-bars::after { content: ""; position: absolute; left: 0; }
.sh-bars::before { top: -6px; }
.sh-bars::after { top: 6px; }
.nav-open .sh-bars { background: transparent; }
.nav-open .sh-bars::before { top: 0; transform: rotate(45deg); }
.nav-open .sh-bars::after { top: 0; transform: rotate(-45deg); }

.sh a:focus-visible, .sh button:focus-visible,
.sf a:focus-visible { outline: 3px solid var(--c-rust); outline-offset: 3px; border-radius: 2px; }

/* phones and small tablets, with nav.js: a Menu button and a drop-down panel */
@media (max-width: 959.98px) {
  .nav-js .sh-toggle { display: inline-flex; }
  .nav-js .sh-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: 6px 16px 18px;
    background: var(--c-paper);
    border-bottom: 1px solid var(--c-line);
    box-shadow: 0 18px 30px -20px rgba(61, 42, 26, 0.45);
  }
  .nav-js.nav-open .sh-nav { display: block; }
  .nav-js .sh-links { display: block; }
  .nav-js .sh-links li + li { border-top: 1px solid var(--c-line); }
  .nav-js .sh-links a { display: block; padding: 14px 4px; font-size: 19px; border-bottom: 0; }
  .nav-js .sh-links a[aria-current="page"], .nav-js .sh-links a.is-here { border-bottom: 0; box-shadow: inset 4px 0 0 var(--c-gold); padding-left: 14px; }
  .nav-js .sh-cta { margin-top: 12px; }
  .nav-js .sh-cta > a { display: flex; width: 100%; min-height: 52px; font-size: 17px; }
}
@media (max-width: 380px) {
  .sh-brand { font-size: 19px; gap: 8px; }
  .sh-toggle { padding: 8px 11px; }
}

/* desktop: one row */
@media (min-width: 960px) {
  .sh-in { min-height: 84px; flex-wrap: nowrap; gap: 28px; }
  .sh-brand { font-size: 24px; }
  .sh-mark { width: 20px; height: 24px; }
  .sh-nav { width: auto; padding: 0; display: flex; align-items: center; gap: 26px; }
  .sh-links { flex-wrap: nowrap; gap: 24px; }
  .sh-links a { font-size: 17px; white-space: nowrap; }
  .sh-cta { margin-top: 0; }
}

/* ---- footer ---- */
.sf { background: var(--c-ink); color: var(--c-sand); margin-top: 0; }
.sf-in { width: min(1180px, 100% - 32px); margin-inline: auto; padding: 44px 0 30px; }
.sf a { color: #fff; text-underline-offset: 4px; }
.sf a:hover { color: #f4d9b4; }
.sf .sh-brand { color: #fff; padding: 0; }
.sf .sh-mark, .sf .sh-dot { color: #e7a483; }
.sf-top { display: grid; gap: 30px; }
.sf-about p { margin: 12px 0 0; max-width: 34ch; font-size: 17px; line-height: 1.55; }
.sf-art { display: block; width: 190px; height: auto; margin-top: 18px; opacity: 0.95; background: var(--c-cream); border-radius: 6px; padding: 8px 10px; }
.sf-h { margin: 0 0 8px; font: 600 19px/1.3 var(--c-serif); color: #fff; }
.sf-col ul { list-style: none; margin: 0; padding: 0; }
.sf-col li a { display: inline-block; padding: 5px 0; font-size: 17px; line-height: 1.4; }
.sf-bottom { margin-top: 34px; padding-top: 18px; border-top: 1px solid rgba(243, 236, 224, 0.28); font-size: 16px; line-height: 1.55; }
.sf-bottom p { margin: 0; max-width: 80ch; }
.sf-bottom p + p { margin-top: 8px; }

@media (min-width: 620px) {
  .sf-top { grid-template-columns: 1fr 1fr; }
  .sf-about { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .sf-top { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
  .sf-about { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .sh-button { transition: none; }
  .sh-button:hover { transform: none; }
}
@media print {
  .sh, .sf { display: none !important; }
}

/* ---- "Save with a set" (build.py sets_promo_html, 03.11.2026) ----
   The compact block at the end of every blog post (inside site.css's
   .reading) and every /life-story/<slug>/ and /kit/<slug>/ article (in
   .sp-out, before the related cards; those pages load ls-articles.css,
   not site.css). Self-contained like the header: its own tokens, and
   selectors two classes deep so neither page's h2/ul/li/a rules reach in.
   Text 16px and up; the set name is the link. */
.sp {
  --c-ink: #173f43;
  --c-text: #3c504d;
  --c-muted: #5f675e;
  --c-paper: #fffdf9;
  --c-gold: #c4a370;
  --c-rust: #a64b30;
  --c-line: #e4dccd;
  --c-serif: Fraunces, Georgia, "Times New Roman", serif;
  --c-sans: "Atkinson Hyperlegible", Atkinson, Verdana, Arial, sans-serif;
  box-sizing: border-box;
  width: min(100%, 860px);
  margin: 2.4rem auto 2rem;
  padding: 22px 20px 20px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-gold);
  border-radius: 6px;
  font-family: var(--c-sans);
  color: var(--c-text);
}
.sp * { box-sizing: border-box; }
.sp .sp-h { margin: 0; font: 600 25px/1.2 var(--c-serif); letter-spacing: -0.01em; color: var(--c-ink); }
.sp .sp-intro { margin: 8px 0 0; font-size: 17px; line-height: 1.5; }
.sp .sp-list { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--c-line); }
.sp .sp-list > li {
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-line);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px 18px;
  font-size: 16px;
  line-height: 1.45;
}
.sp .sp-name { font-size: 18px; font-weight: 700; color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c-gold); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.sp .sp-name:hover { color: var(--c-rust); text-decoration-color: currentColor; }
.sp .sp-what { color: var(--c-text); }
.sp .sp-price strong { font-size: 18px; color: var(--c-ink); }
.sp .sp-price small { font-size: 16px; color: var(--c-muted); margin-left: 6px; }
.sp .sp-more { margin: 14px 0 0; font-size: 17px; }
.sp .sp-all { font-weight: 700; color: var(--c-ink); text-decoration: none; border-bottom: 1.5px solid var(--c-gold); }
.sp .sp-all:hover { color: var(--c-rust); border-bottom-color: currentColor; }
.sp a:focus-visible { outline: 3px solid var(--c-rust); outline-offset: 3px; border-radius: 2px; }
/* wider: name and contents on the left, the price on the right */
@media (min-width: 640px) {
  .sp { padding: 24px 26px 22px; }
  .sp .sp-list > li { grid-template-columns: 1fr auto; align-items: baseline; }
  .sp .sp-what { grid-column: 1; }
  .sp .sp-price { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; }
  .sp .sp-price small { display: block; margin: 2px 0 0; }
}
.sp-out { padding-top: 26px; }
.sp-out .sp { margin: 0 auto; }
@media print { .sp { display: none !important; } }

/* ---- One-line cross-sell (build.py cross_line_html, 09.11.2026) ----
   A short line pointing to one other product: My Life Story at the end of
   the puzzle-book blog posts (inside site.css's .reading), a puzzle book in
   the Christmas /life-story/<slug>/ articles (in .xs-out, just before the
   sets block's .sp-out). Self-contained like .sp. */
.xs {
  --c-ink: #173f43;
  --c-text: #3c504d;
  --c-paper: #fffdf9;
  --c-gold: #c4a370;
  --c-rust: #a64b30;
  --c-line: #e4dccd;
  box-sizing: border-box;
  width: min(100%, 860px);
  margin: 2rem auto 0;
  padding: 16px 20px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-gold);
  border-radius: 6px;
  font-family: "Atkinson Hyperlegible", Atkinson, Verdana, Arial, sans-serif;
  color: var(--c-text);
}
.xs .xs-text { margin: 0; font-size: 17px; line-height: 1.5; }
.xs .xs-link { font-weight: 700; color: var(--c-ink); text-decoration: none; border-bottom: 1.5px solid var(--c-gold); white-space: nowrap; }
.xs .xs-link:hover { color: var(--c-rust); border-bottom-color: currentColor; }
.xs a:focus-visible { outline: 3px solid var(--c-rust); outline-offset: 3px; border-radius: 2px; }
.xs-out { padding-top: 26px; }
.xs-out .xs { margin: 0 auto; }