/* Hogeshy shared mirror atmosphere: one quiet room across the site. */
:root {
  --mirror-void: #071018;
  --mirror-ink: #d8e4e2;
  --mirror-muted: #8ca1a7;
  --mirror-line: rgba(155, 188, 197, .22);
  --mirror-accent: #a8c4c9;
}
html { background: var(--mirror-void); }
body {
  background-color: var(--mirror-void) !important;
  background-image: radial-gradient(circle at 72% 12%, rgba(57, 96, 112, .13), transparent 34%) !important;
  color: var(--mirror-ink);
}
body::selection { background: rgba(168, 196, 201, .3); color: #f2f6f4; }
.site-nav, .global-nav, .topbar { border-color: var(--mirror-line) !important; }
.site-nav a, .global-nav a, .brand, .site-brand { color: var(--mirror-muted); }
.site-nav a:hover, .site-nav a:focus-visible,
.global-nav a:hover, .global-nav a:focus-visible { color: var(--mirror-ink); }
h1, h2, h3, .title, .hero h1 { color: var(--mirror-ink); }
.subtitle, .eyebrow, .kicker, .section-label, .number { color: var(--mirror-accent); }
a { transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
.free-card, .shelf, .comic-card, .archive-card, .panel, .diary-subscribe {
  border-color: var(--mirror-line) !important;
  background-color: rgba(10, 25, 32, .58) !important;
}
.free-card:hover, .shelf:hover, .comic-card:hover, .archive-card:hover {
  background-color: rgba(65, 108, 122, .15) !important;
}
button, input, textarea, select { border-color: var(--mirror-line) !important; background-color: rgba(6, 16, 22, .7) !important; color: var(--mirror-ink); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Shared navigation: horizontal on desktop, hamburger on phones and tablets. */
.site-nav {
  position: relative;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  max-width: 960px;
  margin: 0 auto 28px;
  padding: 0 4px 18px;
  border-bottom: 1px solid var(--mirror-line) !important;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
}
.site-brand { color: var(--mirror-ink) !important; text-decoration: none; font-size: .72rem; letter-spacing: .18em; white-space: nowrap; }
.nav-links { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 18px; font-size: .66rem; letter-spacing: .13em; }
.nav-links a { color: var(--mirror-muted) !important; text-decoration: none; }
.nav-links a:hover, .nav-links a:focus-visible, .nav-links a[aria-current="page"] { color: var(--mirror-ink) !important; }
.nav-toggle { display: none; appearance: none; border: 1px solid var(--mirror-line); background: rgba(6,16,22,.7); color: var(--mirror-ink); padding: 9px 12px; font: inherit; font-size: .66rem; letter-spacing: .13em; cursor: pointer; }
.nav-toggle:hover, .nav-toggle:focus-visible { border-color: var(--mirror-accent); outline: none; }
@media (max-width: 900px) {
  .site-nav { justify-content: flex-end; }
  .site-brand { margin-right: auto; }
  .nav-toggle { display: block; }
  .nav-links { display: none; position: absolute; top: calc(100% - 10px); right: 4px; min-width: 220px; padding: 9px 14px; border: 1px solid var(--mirror-line); background: rgba(7,16,24,.98); box-shadow: 0 18px 38px rgba(0,0,0,.46); }
  .site-nav.is-open .nav-links { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav.is-open .nav-links a { display: block; padding: 11px 2px; border-bottom: 1px solid rgba(155,188,197,.14); text-align: right; }
  .site-nav.is-open .nav-links a:last-child { border-bottom: 0; }
}

/* Diary archive contrast: keep the quiet blue-black atmosphere, but preserve readable text. */
.archive-intro { color: var(--mirror-muted) !important; }
.date-item { color: var(--mirror-muted) !important; }
.date-item:hover, .date-item:focus-visible, .date-item.active { color: var(--mirror-ink) !important; }
.year-label { color: var(--mirror-ink) !important; }
.month-label { color: var(--mirror-muted) !important; }
.year-label:hover, .month-label:hover, .year-label:focus-visible, .month-label:focus-visible { color: var(--mirror-ink) !important; }
.viewer-date { color: var(--mirror-accent) !important; }
.viewer-content { color: var(--mirror-ink) !important; }
.viewer-content:hover, .viewer-content:focus, .viewer-content.is-focused { color: #f2f6f4 !important; text-shadow: 0 0 12px rgba(216, 228, 226, .08); }
.back-link { color: var(--mirror-muted) !important; }
.back-link:hover, .back-link:focus-visible { color: var(--mirror-ink) !important; }
.diary-subscribe p { color: var(--mirror-muted) !important; }
.diary-subscribe strong { color: var(--mirror-accent) !important; }