/* Shared visual system. Section styles retain their individual layouts. */
:root {
  --background: #101923;
  --foreground: #eee0e7;
  --card: #151e29;
  --border: #754057;
  --muted-foreground: #b8bdca;
  --ring: #d58ca6;
  --title-color: #e6c5d3;
  --text-color: #cbd2df;
  --link-color: #e0a1b9;
  --heading-font: 'Cormorant Garamond', Georgia, serif;
}
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1; min-width: 0; width: 100%; }
body > .header, body > footer { flex-shrink: 0; }
.reading-head { border-bottom-color: #75405766; }
body:not(.hacker-page) .reading-head h1 {
  font-family: var(--heading-font);
  font-weight: 600;
  color: var(--title-color);
}
.reading-head .deck { color: var(--text-color); }
.article-panel h2, .article-panel h3, .essential h3, .join h2 {
  font-family: var(--heading-font);
  font-weight: 700;
  color: var(--title-color);
}
.article-panel p, .article-panel li { color: var(--text-color); }
.page-link, .essential { border-color: var(--border); background-color: var(--card); }
.page-link:hover, .essential:hover { border-color: var(--ring); background-color: #28202e; }
.page-link b { font-weight: 600; }
.back-link, .source-note a { color: var(--link-color); }
.header-link { border-color: var(--border); }
.header-link:hover, .header-link[aria-current='page'] { background: #52263a; border-color: var(--ring); }
.header nav .active::after { background: var(--ring); }
.brand strong, .footer-brand { font-family: 'Grenze Gotisch', Georgia, serif; font-weight: 500; }
.brand strong { font-size: 19px; letter-spacing: 1.4px; }
.footer-brand { font-size: 25px; }
footer { border-top-color: #75405755; }
a, button, summary, input { touch-action: manipulation; }
button, input { font: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 2px solid var(--ring); outline-offset: 4px;
}
img { max-width: 100%; }
[hidden] { display: none !important; }
@media (max-width: 760px) {
  .header nav { height: auto; min-height: 45px; flex-wrap: wrap; gap: 0 18px; justify-content: flex-start; }
  .header nav a { min-height: 44px; line-height: 1.4; }
  .reading-head h1 { overflow-wrap: anywhere; }
  footer .socials { flex-wrap: wrap; row-gap: 16px; }
}