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

/* Skip link (WCAG 2.4.1) — rests hidden via .visually-hidden (base.css) and
   undoes that technique on focus, painting as an overlay at the top-left so it
   pushes no layout around at any width. Ink-on-paper inverted: both tokens flip
   in the dark blocks, so this needs no dark-mode rules of its own. z-index sits
   above #backToTop (99), the only other stacked element. */
.skip-link:focus {
  width: auto;
  height: auto;
  margin: 0;
  padding: 12px 20px;
  overflow: visible;
  clip-path: none;
  top: 0;
  left: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 600;
  text-decoration: underline;
  outline: 3px solid var(--brass);
  outline-offset: -3px;
}

.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; }

/* The date, not a link. It was var(--brass), which is exactly what .subhead a
   turns into on hover -- so the only colored item in the navigation bar read
   as the current section on every page. */
.subhead b {
  color: var(--muted);
  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 centered 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;
}

/* This was a cross-origin iframe whose interior we could not style: it painted
   white across a 220x74 box while its pill filled only the top ~51px, so the
   remainder showed as a bright slab against --paper — the only white block on
   the page in dark mode — and had to be clipped by its wrapper. The form is
   ours now, so it takes the site's own surface and there is nothing to clip.
   Fixed height, so the footer does not shift as the page settles. */
.bookshop-search {
  display: flex;
  align-items: stretch;
  height: 44px;
  border: 2px solid var(--ink);
  border-radius: 26px;
  overflow: hidden;
  background: var(--paper);
}

.bookshop-search:focus-within { box-shadow: 0 0 0 2px var(--brass); }

.bookshop-search input[type="search"] {
  width: 180px;
  min-width: 0;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.875rem;
}

.bookshop-search input[type="search"]::placeholder { color: var(--muted); }

/* The pill already draws a focus ring around the whole control via
   :focus-within; a second ring inside it reads as a box within a box. */
.bookshop-search input[type="search"]:focus { outline: none; }

.bookshop-search button {
  padding: 0 20px;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.bookshop-search button:hover { background: var(--brass); }

@media (prefers-reduced-motion: no-preference) {
  .bookshop-search button { transition: background var(--motion-fast) var(--ease); }
}

.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 var(--s-4);
  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 var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease); }
}