/* ============================================================
   Nicholas K. Mitchell — shared site styles
   Resets, masthead, footer, and the one-pixel rule <hr class="r">.
   Each page keeps its own :root palette; this stylesheet relies
   on the variables: --bg, --fg, --fg-muted, --fg-faint,
   --rule, --accent, --serif, --sans, --mono.
   ============================================================ */

/* ----- Reset ----- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01","ss02";
}
a { color: inherit; text-decoration: none; }

/* ----- Masthead ----- */
header.mast {
  padding: 28px 56px 28px;
  border-bottom: 1px solid var(--rule);
}
.mast-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wordmark {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.6px;
  font-style: italic;
  white-space: nowrap;
}
nav.main {
  display: flex;
  gap: 28px;
  font-size: 13px;
  color: var(--fg-muted);
}
nav.main a:hover { color: var(--fg); }
nav.main .active {
  color: var(--fg);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}

/* Optional dateline strip directly beneath the masthead */
.dateline {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.4px;
  color: var(--fg-faint);
  text-transform: uppercase;
}

/* ----- Hairline rule ----- */
hr.r { border: none; height: 1px; background: var(--rule); }

/* ----- Footer ----- */
/* Shared structure for both <footer> and <footer class="site"> */
footer.site,
body > footer {
  padding: 36px 56px 48px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid var(--rule);
}
footer.site .c,
body > footer .c {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: var(--fg);
}
footer.site .note,
body > footer .note {
  margin-top: 6px;
  font-size: 12px;
  color: var(--fg-faint);
  max-width: 520px;
  line-height: 1.5;
}
footer.site nav,
body > footer nav {
  display: flex;
  gap: 20px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-muted);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
footer.site nav a:hover,
body > footer nav a:hover { color: var(--fg); }

/* ----- Responsive (masthead + footer only) ----- */
@media (max-width: 900px) {
  header.mast { padding-left: 24px; padding-right: 24px; }
  footer.site,
  body > footer {
    padding-left: 24px;
    padding-right: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .dateline { flex-wrap: wrap; gap: 8px; }
}

/* Below ~700px the wordmark + 4 nav items can't share a row.
   Stack them, shrink the wordmark, let the nav wrap.
   Also a safety: prevent any rogue child from creating a
   horizontal scroll on narrow viewports. */
@media (max-width: 700px) {
  html, body { overflow-x: hidden; }
  header.mast { padding: 20px 20px 16px; }
  .mast-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .wordmark {
    font-size: 22px;
    letter-spacing: -0.4px;
  }
  nav.main {
    gap: 16px 18px;
    flex-wrap: wrap;
    font-size: 12px;
    max-width: 100%;
  }
  footer.site,
  body > footer { padding: 28px 20px 36px; }
  footer.site nav,
  body > footer nav { flex-wrap: wrap; gap: 12px 18px; }
}

/* ----- Photo prev/next disabled state (wired by js/photo-nav.js) ----- */
.prevnext a.end {
  pointer-events: none;
  cursor: default;
  opacity: 0.35;
}
.prevnext a.end:hover { background: transparent; }
.prevnext a.end .thumb { opacity: 0.6; }

/* ----- Article read-grid left rail on mobile ----------------------
   At ≤1100px each article's own @media collapses the .read grid
   to 1fr, which stacks the left aside (TOC + progress + share)
   above the body column — that stack is tall and pushes the lede
   off-screen on phones. Hide the TOC/progress on mobile, leave a
   compact Share strip, and tighten the grid padding so the body
   column starts near the top. */
@media (max-width: 1100px) {
  .read { padding-top: 0; gap: 20px; }
  .read aside.left .block.toc { display: none; }
  .read aside.left {
    padding: 0;
    margin: 0;
    min-height: 48px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--rule-faint);
  }
  .read aside.left .block.share-row {
    padding: 0;
    margin: 0;
    border: none;
    align-items: center;
  }
}