/* ==========================================================================
   HEADER & NAVIGATION
   ========================================================================== */

.head {
  text-align: center;
  position: relative;
  margin-bottom: 8px;
  padding-top: 18px;
}

.theme-toggle {
  position: absolute;
  top: 14px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  cursor: pointer;
}

.theme-toggle:hover { color: var(--brass); border-color: var(--brass); }

.main-logo-link { text-decoration: none; color: var(--ink); }

/* Masthead — an <h1> on the homepage, a <p> on inner pages; margins zeroed
   to override both UA defaults. Fallback face is metric-tuned (base.css). */
.masthead {
  font-family: "Permanent Marker", "Masthead Fallback", cursive;
  font-weight: 400;
  font-size: clamp(2.5rem, 1.5rem + 5vw, 5rem); /* 40–80px */
  text-transform: uppercase;
  display: inline-block;
  line-height: 1;
  margin: 0;
  color: var(--ink);
}

/* Signature: the daily quote as a centered band between hairlines.
   It wraps. It used to be `white-space: nowrap` with `text-overflow: ellipsis`,
   which clipped every quote past roughly one line — the longest in quotes.csv is
   110 characters against a 720px band, so most were losing their ending and some
   were losing the author's name ("— Albert Eins…").
   text-wrap: balance evens the line lengths so a wrapped quote reads as a
   deliberate two-line block rather than a full line plus one orphaned word. */
.quote-band {
  max-width: 720px;
  margin: 14px auto 0;
  padding: 10px 16px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  font-style: italic;
  font-size: 0.875rem; /* 14px */
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: center;
  text-wrap: balance;
}

.quote-author {
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-left: 8px;
  /* Keeps the dash bound to the name, so a wrap never leaves "—" stranded at
     the end of a line or splits the attribution across two. */
  white-space: nowrap;
}

.subhead {
  text-transform: uppercase;
  border-bottom: 2px solid var(--ink);
  border-top: 2px solid var(--ink);
  margin-top: 14px;
  padding: 0;
  font-family: var(--sans);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.subhead a {
  color: var(--ink);
  padding: 14px 1.5vw;
  min-height: 44px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-decoration: none;
}

.subhead a:hover { color: var(--brass); text-decoration: underline; }

.subhead b {
  color: var(--brass);
  padding: 0 3vw;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
}

/* Search sits top-left, mirroring .theme-toggle top-right, and deliberately
   shares its visual language (44px tap target, hairline border, pill radius,
   muted ink) so the two read as one pair of utility controls rather than two
   unrelated widgets. It previously sat centred on its own line below the nav's
   bottom rule — structurally orphaned, and 54px of every page's header. */
.head-search {
  position: absolute;
  top: 14px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  box-sizing: border-box;
  padding-right: 12px;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 999px;
}

/* The whole pill reacts, not just the input — the border is the control's edge. */
.head-search:focus-within { border-color: var(--brass); }

.head-search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-height: 42px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
}

.head-search-submit:hover { color: var(--brass); }
.head-search-submit svg { width: 16px; height: 16px; }

.head-search input {
  width: 170px;
  min-height: 42px;
  padding: 0;
  background: transparent;
  border: 0;
  font-family: var(--sans);
  /* 1rem (16px), not 0.875rem — iOS Safari auto-zooms on focusing any input
     below 16px, and this box appears on every page. */
  font-size: 1rem;
  color: var(--ink);
}

/* The pill already shows focus via :focus-within, so the input's own ring would
   draw a second, squarer outline inside a rounded control. */
.head-search input:focus { outline: none; }
.head-search input::placeholder { color: var(--muted); }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.main-footer {
  margin-top: 80px;
  margin-bottom: 40px;
  padding: 0 20px;
}

.trust-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 4px;
  margin-bottom: 10px;
}

.trust-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  box-sizing: border-box;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}

.trust-link:hover { color: var(--brass); text-decoration: underline; }

/* Wraps at any width, not only on mobile. The row was `white-space: nowrap`
   with wrapping enabled solely under the 768px breakpoint, and its `b` spacer
   uses 4vw padding that grows with the viewport — so between roughly 769px and
   1000px the links ran past the edge and put the whole site into horizontal
   scroll. Found while measuring the article column; it affected every page. */
.footer-nav {
  text-transform: uppercase;
  border-bottom: 2px solid var(--ink);
  border-top: 2px solid var(--ink);
  padding: 6px 0;
  font-family: var(--sans);
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  justify-content: center;
  align-items: center;
}

.footer-link {
  color: var(--ink);
  padding: 12px 2vw;
  min-height: 44px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  font-size: 0.8125rem;
  text-decoration: none;
  letter-spacing: 0.08em;
}

.footer-link:hover { color: var(--brass); text-decoration: underline; }

.footer-nav b {
  color: var(--muted);
  padding: 0 4vw;
  font-size: 0.8125rem;
}

.bookshop-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px 40px;
}

/* Bookshop injects a cross-origin iframe with a white background. The search
   pill occupies only the top ~51px of its 74px box, so the remainder rendered
   as a bright white slab against --paper — worst in dark mode, where it was the
   only white block on the page. The frame's interior is not ours to style, so
   clip its wrapper to the pill and round it to the pill's own radius.

   Never mutate this container from JS: the widget script re-injects an iframe
   whenever its container changes, and they multiply on the page. Static CSS
   applied at load is safe; runtime style writes are not. */
.bookshop-widget > div {
  height: 51px;
  overflow: hidden;
  border-radius: 26px;
}

/* Block, so the frame does not sit on a text baseline and add descender space
   below itself — that gap was 8px of the white slab. */
.bookshop-widget iframe {
  display: block;
}

.bookshop-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin: 0 0 12px;
}

/* ==========================================================================
   BACK TO TOP — in layout.css because the button renders on every page,
   including static pages that don't load components.css.
   ========================================================================== */

#backToTop {
  display: none;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 99;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  padding: 10px 15px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 4px;
  font-family: var(--sans);
  font-weight: 700;
}

#backToTop:hover { background: var(--ink); color: var(--paper); }

@media (prefers-reduced-motion: no-preference) {
  #backToTop { transition: background 0.15s ease, color 0.15s ease; }
}