/* ==========================================================================
   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-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; }
}