/* aerobbert.com: V2 additions shared by every essay page.
   Loaded after each essay's own inline styles, so these rules win. */

/* One ink per essay, as in a shelf of one-colour covers. Each essay page sets a class on <html>
   (ink-green, ink-red, ink-blue, ink-ochre; chosen in build_v2.py). The ink colours the links,
   note numbers and drop capital. Small text uses the first value (4.5:1 or better
   on the cream); the drop capital and heading use the brighter --ink-display.
   Green: a letterpress cover. Red and ochre: the hero manuscript. Blue: the Practice in Still Life cover.
   Gold is kept for dark backgrounds only; the hero uses --hero-gold and is unchanged. */
:root { --color-accent: #048046; --ink-display: #058e4e; --color-accent-muted: #036637; --color-accent-subtle: #d5ecdf; }
html.ink-green { --color-accent: #048046; --ink-display: #058e4e; --color-accent-muted: #036637; --color-accent-subtle: #d5ecdf; }
html.ink-red { --color-accent: #ad3519; --ink-display: #c03c1c; --color-accent-muted: #872812; --color-accent-subtle: #f4ddd5; }
html.ink-blue { --color-accent: #1a4a80; --ink-display: #1f5a9c; --color-accent-muted: #12365f; --color-accent-subtle: #d9e5f3; }
html.ink-ochre { --color-accent: #8a6520; --ink-display: #9a7122; --color-accent-muted: #6b4e17; --color-accent-subtle: #efe4c9; }
.drop-cap::first-letter, .t-dropcap::first-letter { color: var(--ink-display); }

/* Navigation matches the hub pages. */
.sitenav__wordmark { font-size: 20px; text-transform: none; letter-spacing: 0.005em; color: #e8e5e0; }
.sitenav__links a { font-size: 14.5px; color: #9a9a96; }

/* After the essay: the newsletter. */
/* A full-width band in a slightly deeper cream sets the newsletter apart from the essay text.
   Its heading is plain ink, not the essay's colour. */
.after { margin: clamp(48px, 7vw, 72px) 0 0; padding: clamp(40px, 6vw, 56px) 24px clamp(44px, 6.5vw, 60px); background: #f0ede5; text-align: center; }
.after__rule { display: none; }
.after h2 {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 3vw, 1.8rem); line-height: 1.25;
  margin: 0 0 .55em; color: var(--color-text);
}
.after p { margin: 0; font-size: 1.2rem; line-height: 1.5; color: var(--color-text); text-wrap: balance; }
.after .subscribe-btn {
  display: inline-block; margin: 18px 0 0; font-family: var(--font-aux); font-size: 14px; text-transform: uppercase;
  letter-spacing: .1em; padding: 12px 22px; background: #252321; color: #e8e5e0; text-decoration: none; white-space: nowrap;
  transition: background 200ms ease;
}
.after .subscribe-btn:hover { background: #3a3733; color: #e8e5e0; }

/* Footer matches the hub pages: a dark band with gold accents. */
.site-footer { margin: 0; padding: 40px 24px 44px; background: #252321; }
.site-footer__inner {
  max-width: var(--measure); margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  font-style: italic; font-size: 16px; color: #9a9a96; text-align: center;
}
.site-footer p { margin: 0; }
.footer-row { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.footer-row .mail { color: var(--hero-gold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.footer-row .mail:hover { color: #d4ba84; }
.footer-icons { display: inline-flex; align-items: center; gap: 16px; }
.footer-icons a { color: #cfccc6; display: inline-flex; padding: 8px; margin: -8px; text-decoration: none; transition: color 200ms ease; }
.footer-icons a:hover { color: var(--hero-gold); }
.footer-icons svg { width: 18px; height: 18px; display: block; }

/* Phone menu: inset from the screen edge, with larger touch areas, as on the hub pages. */
@media (max-width: 720px) {
  .sitenav__inner .sitenav__links { right: 24px; gap: 4px; padding: 12px 22px; }
  .sitenav__inner .sitenav__links a { padding: 6px 0; }
}

/* Long web addresses in notes and bibliographies wrap instead of pushing the page sideways. */
.essay a, .endnotes a, .bib a { overflow-wrap: anywhere; }

/* Keyboard users can jump past the navigation. */
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: #faf9f6; color: #1c1b18;
  padding: 10px 16px; font-size: 17px; text-decoration: none; border: 1px solid var(--color-rule); }
.skip:focus { top: 12px; }

/* Phones held sideways: fit the title on the first screen instead of below it. */
@media (orientation: landscape) and (max-height: 520px) {
  .hero { height: calc(100vh - 62px); min-height: 280px; }
  .hero__inner { padding: 14px 24px 76px; }
  .hero__title { font-size: clamp(1.7rem, 5vw, 2.5rem); }
  .hero__subtitle { margin: 8px auto 0; font-size: 1.1rem; }
  .hero__foot { bottom: 38px; }
  .hero__ornament { display: none; }
  .hero__credit { bottom: 10px; font-size: 12px; }
}

@media (max-width: 600px) {
  .after, .site-footer { padding-left: 20px; padding-right: 20px; }
  .site-footer { padding-top: 34px; padding-bottom: 38px; }
  .site-footer__inner { font-size: 15px; }
}