/* ═══════════════════════════════════════
   ☽ serena — styles
   a gentle corner of the internet
   ═══════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.75;
  min-height: 100vh;
  transition: background 1.2s ease, color 0.8s ease;
  background: var(--bg);
  color: var(--text);
}

/* ── Sunrise (5–10) ────────────────── */
body.sunrise {
  --bg: #fdf6ee;
  --bg-deep: #f5e6d0;
  --text: #5c3d2e;
  --text-soft: #8b6b5a;
  --link: #b86b4a;
  --link-hover: #9a4f32;
  --accent: #d4956a;
  --accent-soft: rgba(212, 149, 106, 0.15);
  --border: #e0c9b4;
  --border-strong: #c9a88a;
  --card-bg: rgba(255, 252, 247, 0.7);
  --nav-bg: rgba(253, 246, 238, 0.92);
  --moon-lit: #f4ead5;
  --moon-shadow: #c9a88a;
  --moon-glow: rgba(244, 220, 170, 0.4);
  --moon-glow-strong: rgba(244, 220, 170, 0.7);
  --gradient-air: linear-gradient(180deg, rgba(253,246,238,0) 0%, rgba(245,230,208,0.3) 100%);
  --star-opacity: 0;
}

/* ── Midday (10–16) ────────────────── */
body.midday {
  --bg: #faf8f3;
  --bg-deep: #f0ece3;
  --text: #3d3d3d;
  --text-soft: #7a7a7a;
  --link: #8b6b7b;
  --link-hover: #6b4b5b;
  --accent: #7a9a7e;
  --accent-soft: rgba(122, 154, 126, 0.12);
  --border: #ddd8cf;
  --border-strong: #c4bfb4;
  --card-bg: rgba(255, 255, 252, 0.6);
  --nav-bg: rgba(250, 248, 243, 0.92);
  --moon-lit: #e8e0d0;
  --moon-shadow: #b8b0a0;
  --moon-glow: rgba(230, 220, 200, 0.25);
  --moon-glow-strong: rgba(230, 220, 200, 0.5);
  --gradient-air: linear-gradient(180deg, rgba(250,248,243,0) 0%, rgba(240,236,227,0.2) 100%);
  --star-opacity: 0;
}

/* ── Sunset (16–20) ────────────────── */
body.sunset {
  --bg: #f0ddd0;
  --bg-deep: #e4c4b0;
  --text: #4a2d3d;
  --text-soft: #7a5a6a;
  --link: #b87333;
  --link-hover: #965a22;
  --accent: #c9756b;
  --accent-soft: rgba(201, 117, 107, 0.15);
  --border: #d4b0a0;
  --border-strong: #c09080;
  --card-bg: rgba(248, 235, 225, 0.6);
  --nav-bg: rgba(240, 221, 208, 0.92);
  --moon-lit: #f0dcc8;
  --moon-shadow: #a08070;
  --moon-glow: rgba(240, 200, 160, 0.4);
  --moon-glow-strong: rgba(240, 200, 160, 0.7);
  --gradient-air: linear-gradient(180deg, rgba(240,221,208,0) 0%, rgba(228,196,176,0.4) 100%);
  --star-opacity: 0;
}

/* ── Twilight (20–5) ───────────────── */
body.twilight {
  --bg: #1a1525;
  --bg-deep: #2d2040;
  --text: #d4c8e0;
  --text-soft: #a090b8;
  --link: #c8b0e0;
  --link-hover: #dcc8f0;
  --accent: #8b6fb0;
  --accent-soft: rgba(139, 111, 176, 0.2);
  --border: #3d3055;
  --border-strong: #5a4878;
  --card-bg: rgba(35, 28, 50, 0.6);
  --nav-bg: rgba(26, 21, 37, 0.95);
  --moon-lit: #e8e0f0;
  --moon-shadow: #2d2040;
  --moon-glow: rgba(200, 190, 230, 0.35);
  --moon-glow-strong: rgba(200, 190, 230, 0.7);
  --gradient-air: linear-gradient(180deg, rgba(26,21,37,0) 0%, rgba(45,32,64,0.5) 100%);
  --star-opacity: 1;
}

/* ── Candlelight (hushed lilac twilight) ── */
body.candlelight {
  --bg: #17122a;
  --bg-deep: #211b38;
  --text: #d8cce8;
  --text-soft: #a898c0;
  --link: #d0a8c8;
  --link-hover: #e8c0e0;
  --accent: #b088b0;
  --accent-soft: rgba(176, 136, 176, 0.18);
  --border: #382d55;
  --border-strong: #504070;
  --card-bg: rgba(28, 22, 48, 0.65);
  --nav-bg: rgba(23, 18, 42, 0.95);
  --moon-lit: #e0d8f0;
  --moon-shadow: #211b38;
  --moon-glow: rgba(210, 195, 240, 0.4);
  --moon-glow-strong: rgba(210, 195, 240, 0.75);
  --gradient-air: linear-gradient(180deg, rgba(23,18,42,0) 0%, rgba(33,27,56,0.55) 100%);
  --star-opacity: 1;
}

/* ── Air texture overlay ───────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--gradient-air);
  pointer-events: none;
  z-index: 1;
}

/* ── Stars (twilight & candlelight) ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    /* brilliant stars — solid bright core with soft halo */
    radial-gradient(2.5px 2.5px at 12% 18%, #fff 30%, rgba(255,255,255,0.3) 60%, transparent 100%),
    radial-gradient(2.5px 2.5px at 67% 7%, #fff 30%, rgba(255,255,255,0.3) 60%, transparent 100%),
    radial-gradient(2px 2px at 88% 42%, #fff 35%, rgba(255,255,255,0.25) 65%, transparent 100%),
    radial-gradient(2.5px 2.5px at 34% 82%, #fff 30%, rgba(255,255,255,0.3) 60%, transparent 100%),
    radial-gradient(2px 2px at 51% 53%, #fff 35%, rgba(255,255,255,0.25) 65%, transparent 100%),
    radial-gradient(2.5px 2.5px at 5% 73%, #fff 30%, rgba(255,255,255,0.3) 60%, transparent 100%),
    radial-gradient(2px 2px at 78% 91%, #fff 35%, rgba(255,255,255,0.25) 65%, transparent 100%),
    radial-gradient(2.5px 2.5px at 94% 14%, #fff 30%, rgba(255,255,255,0.3) 60%, transparent 100%),
    radial-gradient(2px 2px at 27% 4%, #fff 35%, rgba(255,255,255,0.25) 65%, transparent 100%),
    radial-gradient(2.5px 2.5px at 61% 68%, #fff 30%, rgba(255,255,255,0.3) 60%, transparent 100%),
    radial-gradient(2px 2px at 40% 15%, #fff 35%, rgba(255,255,255,0.25) 65%, transparent 100%),
    radial-gradient(2.5px 2.5px at 83% 29%, #fff 30%, rgba(255,255,255,0.3) 60%, transparent 100%),
    /* medium stars — crisp points */
    radial-gradient(1.5px 1.5px at 23% 31%, #fff 40%, transparent 100%),
    radial-gradient(1.5px 1.5px at 45% 12%, rgba(255,255,255,0.95) 40%, transparent 100%),
    radial-gradient(1.5px 1.5px at 72% 64%, #fff 40%, transparent 100%),
    radial-gradient(1.5px 1.5px at 91% 22%, rgba(255,255,255,0.9) 40%, transparent 100%),
    radial-gradient(1.5px 1.5px at 16% 88%, #fff 40%, transparent 100%),
    radial-gradient(1.5px 1.5px at 58% 38%, rgba(255,255,255,0.9) 40%, transparent 100%),
    radial-gradient(1.5px 1.5px at 38% 56%, #fff 40%, transparent 100%),
    radial-gradient(1.5px 1.5px at 82% 74%, rgba(255,255,255,0.9) 40%, transparent 100%),
    radial-gradient(1.5px 1.5px at 3% 44%, rgba(255,255,255,0.95) 40%, transparent 100%),
    radial-gradient(1.5px 1.5px at 63% 86%, #fff 40%, transparent 100%),
    radial-gradient(1.5px 1.5px at 48% 95%, rgba(255,255,255,0.9) 40%, transparent 100%),
    radial-gradient(1.5px 1.5px at 75% 3%, #fff 40%, transparent 100%),
    radial-gradient(1.5px 1.5px at 19% 60%, rgba(255,255,255,0.95) 40%, transparent 100%),
    radial-gradient(1.5px 1.5px at 55% 44%, rgba(255,255,255,0.9) 40%, transparent 100%),
    /* dim stars — small but clear */
    radial-gradient(1px 1px at 8% 5%, rgba(255,255,255,0.8) 45%, transparent 100%),
    radial-gradient(1px 1px at 19% 48%, rgba(255,255,255,0.7) 45%, transparent 100%),
    radial-gradient(1px 1px at 27% 14%, rgba(255,255,255,0.75) 45%, transparent 100%),
    radial-gradient(1px 1px at 33% 67%, rgba(255,255,255,0.65) 45%, transparent 100%),
    radial-gradient(1px 1px at 42% 3%, rgba(255,255,255,0.7) 45%, transparent 100%),
    radial-gradient(1px 1px at 48% 73%, rgba(255,255,255,0.65) 45%, transparent 100%),
    radial-gradient(1px 1px at 55% 26%, rgba(255,255,255,0.75) 45%, transparent 100%),
    radial-gradient(1px 1px at 62% 47%, rgba(255,255,255,0.65) 45%, transparent 100%),
    radial-gradient(1px 1px at 69% 85%, rgba(255,255,255,0.7) 45%, transparent 100%),
    radial-gradient(1px 1px at 76% 16%, rgba(255,255,255,0.65) 45%, transparent 100%),
    radial-gradient(1px 1px at 84% 58%, rgba(255,255,255,0.75) 45%, transparent 100%),
    radial-gradient(1px 1px at 93% 35%, rgba(255,255,255,0.65) 45%, transparent 100%),
    radial-gradient(1px 1px at 97% 68%, rgba(255,255,255,0.7) 45%, transparent 100%),
    radial-gradient(1px 1px at 14% 95%, rgba(255,255,255,0.65) 45%, transparent 100%),
    radial-gradient(1px 1px at 30% 41%, rgba(255,255,255,0.7) 45%, transparent 100%),
    radial-gradient(1px 1px at 41% 92%, rgba(255,255,255,0.7) 45%, transparent 100%),
    radial-gradient(1px 1px at 53% 8%, rgba(255,255,255,0.65) 45%, transparent 100%),
    radial-gradient(1px 1px at 66% 30%, rgba(255,255,255,0.75) 45%, transparent 100%),
    radial-gradient(1px 1px at 86% 12%, rgba(255,255,255,0.7) 45%, transparent 100%),
    radial-gradient(1px 1px at 2% 28%, rgba(255,255,255,0.7) 45%, transparent 100%),
    radial-gradient(1px 1px at 36% 24%, rgba(255,255,255,0.65) 45%, transparent 100%),
    radial-gradient(1px 1px at 81% 33%, rgba(255,255,255,0.65) 45%, transparent 100%),
    radial-gradient(1px 1px at 7% 52%, rgba(255,255,255,0.7) 45%, transparent 100%),
    radial-gradient(1px 1px at 44% 61%, rgba(255,255,255,0.65) 45%, transparent 100%),
    radial-gradient(1px 1px at 71% 2%, rgba(255,255,255,0.7) 45%, transparent 100%),
    radial-gradient(1px 1px at 89% 88%, rgba(255,255,255,0.65) 45%, transparent 100%);
  opacity: var(--star-opacity, 0);
  pointer-events: none;
  z-index: 2;
  transition: opacity 1.2s ease;
  animation: starTwinkle 6s ease-in-out infinite alternate;
}

@keyframes starTwinkle {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(0.75); }
}

/* ═══════ LAYOUT ═══════════════════════ */

.site-wrapper {
  position: relative;
  z-index: 3;
  max-width: 660px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 2rem;
  min-height: 100vh;
}

/* ═══════ HEADER ═══════════════════════ */

.site-header {
  text-align: center;
  padding: 2rem 0 1.2rem;
  border-bottom: 3px double var(--border-strong);
  margin-bottom: 2rem;
}

.site-title {
  font-size: 1.6rem;
  font-weight: normal;
  letter-spacing: 0.18em;
  color: var(--text);
  margin-bottom: 0.25rem;
  font-style: italic;
}

.site-title a {
  color: inherit;
  text-decoration: none;
}

.site-tagline {
  font-size: 0.82rem;
  color: var(--text-soft);
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

/* ═══════ NAVIGATION ═══════════════════ */

.nav-label {
  font-size: 0.68rem;
  color: var(--text-soft);
  letter-spacing: 0.18em;
  text-align: center;
  margin-bottom: 0.4rem;
  font-style: italic;
  opacity: 0.7;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 0;
  font-size: 0.85rem;
}

.site-nav a {
  color: var(--link);
  text-decoration: none;
  padding: 0.15rem 0.45rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, color 0.3s;
}

.site-nav a:hover,
.site-nav a.active {
  color: var(--link-hover);
  border-bottom-color: var(--accent);
}

.nav-dot {
  color: var(--text-soft);
  padding: 0 0.1rem;
  user-select: none;
}

/* ═══════ MAIN CONTENT ═════════════════ */

.content {
  padding: 0.5rem 0 2rem;
}

.content h2 {
  font-size: 1.2rem;
  font-weight: normal;
  font-style: italic;
  color: var(--text);
  margin: 2.5rem 0 1rem;
  letter-spacing: 0.06em;
}

.content h2:first-child {
  margin-top: 0.5rem;
}

.content h3 {
  font-size: 1rem;
  font-weight: normal;
  color: var(--text-soft);
  margin: 1.8rem 0 0.6rem;
  font-style: italic;
}

.content p {
  margin-bottom: 1rem;
  max-width: 62ch;
}

.content ul,
.content ol {
  margin: 0.8rem 0 1.2rem 1.2rem;
}

.content li {
  margin-bottom: 0.4rem;
}

.content a {
  color: var(--link);
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
  transition: color 0.3s, text-decoration-color 0.3s;
}

.content a:hover {
  color: var(--link-hover);
  text-decoration-color: var(--accent);
}

/* ═══════ DECORATIVE ELEMENTS ══════════ */

.divider {
  text-align: center;
  color: var(--text-soft);
  margin: 2rem 0;
  font-size: 0.85rem;
  letter-spacing: 0.35em;
  user-select: none;
}

.divider-line {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2rem auto;
  max-width: 180px;
}

.sparkle-border {
  border: 1px solid var(--border);
  border-top: 2px solid var(--border-strong);
  border-bottom: 2px solid var(--border-strong);
}

/* ═══════ POEM BLOCKS ══════════════════ */

.poem {
  margin: 1.5rem 0;
  padding: 1rem 1.5rem;
  border-left: 2px solid var(--border-strong);
  background: var(--card-bg);
  font-style: italic;
  line-height: 1.9;
}

.poem p {
  margin-bottom: 0;
}

.poem .poem-title {
  font-size: 0.78rem;
  color: var(--text-soft);
  letter-spacing: 0.12em;
  margin-bottom: 0.5rem;
  font-style: normal;
  text-transform: lowercase;
}

/* ═══════ CARDS ════════════════════════ */

.card {
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 1.2rem 1.5rem;
  margin: 1.5rem 0;
  background: var(--card-bg);
}

.card h3 {
  margin-top: 0;
}

/* ═══════ RITUAL BOX ══════════════════ */

.ritual-box {
  border: 1px dashed var(--border-strong);
  padding: 1rem 1.2rem;
  margin: 1.8rem 0;
  background: var(--accent-soft);
  position: relative;
}

.ritual-box::before {
  content: '✧';
  position: absolute;
  top: -0.65rem;
  left: 1rem;
  background: var(--bg);
  padding: 0 0.4rem;
  color: var(--accent);
  font-size: 0.9rem;
}

.ritual-box .ritual-title {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 0.5rem;
  text-transform: lowercase;
  font-style: italic;
}

.ritual-box ul {
  margin: 0.4rem 0 0 1rem;
  font-size: 0.92rem;
}

.ritual-box li {
  margin-bottom: 0.3rem;
}

/* ═══════ FRAGMENT / PULL QUOTE ═══════ */

.fragment {
  text-align: center;
  font-style: italic;
  color: var(--text-soft);
  padding: 1.2rem 2rem;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}

/* ═══════ NOTE FRAGMENTS ══════════════ */

.note-fragment {
  padding: 0.5rem 1rem;
  margin: 0.5rem 0;
  font-style: italic;
  font-size: 0.92rem;
  border-left: 1px solid var(--border);
  color: var(--text-soft);
}

/* ═══════ SHRINE ENTRY ════════════════ */

.shrine-entry {
  margin: 2rem 0;
  padding: 1.2rem 1.5rem;
  border: 1px solid var(--border);
  border-top: 3px double var(--border-strong);
  background: var(--card-bg);
}

.shrine-entry h3 {
  margin-top: 0.3rem;
  color: var(--text);
}

/* ═══════ GODDESS ENTRY ═══════════════ */

.goddess-entry {
  margin: 2rem 0;
  padding: 1.5rem;
  border: 1px solid var(--border);
  background: var(--card-bg);
  position: relative;
}

.goddess-entry::before {
  content: attr(data-symbol);
  position: absolute;
  top: -0.85rem;
  right: 1rem;
  font-size: 1.2rem;
  background: var(--bg);
  padding: 0 0.4rem;
}

.goddess-entry h3 {
  margin-top: 0;
  font-size: 1.08rem;
  color: var(--text);
  font-style: italic;
}

.goddess-practice {
  margin-top: 0.8rem;
  padding: 0.6rem 1rem;
  border-left: 2px solid var(--accent);
  background: var(--accent-soft);
  font-size: 0.92rem;
  font-style: italic;
}

/* ═══════ LIBRARY — SHELVES & BOOKS ══ */

.shelf {
  margin: 2.5rem 0;
}

.shelf-title {
  font-size: 0.78rem;
  font-style: italic;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: var(--accent);
  border: 1px solid var(--border-strong);
  display: inline-block;
  padding: 0.25rem 0.8rem;
  margin-bottom: 1.2rem;
  background: var(--card-bg);
}

.book-card {
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
  background:
    linear-gradient(135deg, var(--card-bg) 0%, transparent 60%),
    linear-gradient(to bottom, var(--accent-soft) 0%, transparent 40%);
  background-color: var(--card-bg);
}

.book-title {
  font-style: italic;
  font-size: 1.02rem;
  color: var(--text);
  margin-bottom: 0.1rem;
}

.book-author {
  font-size: 0.82rem;
  color: var(--text-soft);
  margin-bottom: 0.6rem;
  letter-spacing: 0.04em;
}

.book-blurb {
  font-size: 0.92rem;
  line-height: 1.7;
  margin-bottom: 0.5rem;
}

.book-tag {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--accent);
  border: 1px dashed var(--border);
  padding: 0.15rem 0.5rem;
  font-style: italic;
}

/* ═══════ LINKS SECTION ═══════════════ */

.links-section {
  text-align: center;
  padding: 1rem;
  margin: 1.5rem 0;
  border: 1px dotted var(--border-strong);
}

.links-section a {
  color: var(--link);
}

/* ═══════ WELCOME LIST ════════════════ */

.welcome-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.welcome-list li {
  padding: 0.25rem 0;
}

.welcome-list li::before {
  content: '☽ ';
  color: var(--accent);
  font-size: 0.85rem;
}

/* ═══════ INVOCATION ══════════════════ */

.invocation {
  text-align: center;
  padding: 1.5rem 2rem;
  margin: 2rem 0;
  border: 1px solid var(--border);
  border-radius: 2px;
  font-style: italic;
  font-size: 0.92rem;
  color: var(--text-soft);
  background: var(--card-bg);
}

/* ═══════ MOON COMPONENT ══════════════ */

.moon-container {
  position: fixed;
  top: 1.5rem;
  right: 2rem;
  z-index: 100;
}

.moon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--moon-lit);
  transition: box-shadow 1s ease, background 1s ease;
  animation: moon-float 8s ease-in-out infinite;
}

.moon.full {
  box-shadow:
    inset 0 0 0 0 transparent,
    0 0 20px var(--moon-glow-strong),
    0 0 50px var(--moon-glow);
}

.moon.new {
  box-shadow:
    inset 0 0 0 24px var(--moon-shadow),
    0 0 8px var(--moon-glow);
}

.moon.waxing-crescent {
  box-shadow:
    inset 10px 0 6px 1px var(--moon-shadow),
    0 0 12px var(--moon-glow);
}

.moon.first-quarter {
  box-shadow:
    inset 13px 0 1px -1px var(--moon-shadow),
    0 0 14px var(--moon-glow),
    0 0 36px var(--moon-glow);
}

.moon.waxing-gibbous {
  box-shadow:
    inset 5px 0 4px -2px var(--moon-shadow),
    0 0 18px var(--moon-glow),
    0 0 45px var(--moon-glow);
}

.moon.waning-gibbous {
  box-shadow:
    inset -5px 0 4px -2px var(--moon-shadow),
    0 0 18px var(--moon-glow),
    0 0 45px var(--moon-glow);
}

.moon.last-quarter {
  box-shadow:
    inset -13px 0 1px -1px var(--moon-shadow),
    0 0 14px var(--moon-glow),
    0 0 36px var(--moon-glow);
}

.moon.waning-crescent {
  box-shadow:
    inset -10px 0 6px 1px var(--moon-shadow),
    0 0 12px var(--moon-glow);
}

@keyframes moon-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* ═══════ FOOTER ══════════════════════ */

.site-footer {
  border-top: 3px double var(--border-strong);
  padding: 1.5rem 0 1rem;
  margin-top: 2.5rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-soft);
  letter-spacing: 0.05em;
}

.site-footer > div {
  margin-bottom: 0.35rem;
}

.footer-tagline {
  font-style: italic;
  margin-top: 0.6rem;
}

.candlelight-btn {
  display: inline-block;
  margin-top: 0.8rem;
  padding: 0.35rem 1rem;
  background: var(--card-bg);
  border: 1px solid var(--border-strong);
  color: var(--link);
  font-family: Georgia, serif;
  font-size: 0.76rem;
  cursor: pointer;
  letter-spacing: 0.06em;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.candlelight-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--link-hover);
}

/* ═══════ PAGE-SPECIFIC ═══════════════ */

.beauty-section {
  margin: 2rem 0;
  padding: 1.2rem 1.5rem;
  border: 1px solid var(--border);
  background: var(--card-bg);
}

.beauty-section h3 {
  margin-top: 0;
}

.tiny-miracles li::marker {
  content: '✦ ';
  color: var(--accent);
}

.offering-step {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  margin-bottom: 0.4rem;
  font-size: 0.92rem;
}

.offering-step .step-num {
  color: var(--accent);
  font-style: italic;
  flex-shrink: 0;
}

/* ═══════ SELECTION & SCROLLBAR ═══════ */

::selection {
  background: var(--accent-soft);
  color: var(--text);
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-deep);
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* ═══════ TWEET EMBED ════════════════ */

.tweet-embed {
  margin: 1.2rem 0 1.5rem;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 0.5rem;
  background: var(--card-bg);
  max-height: 500px;
  overflow-y: auto;
}

.tweet-embed a {
  color: var(--link);
  font-style: italic;
  font-size: 0.88rem;
}

/* ═══════ GEOCITIES GIFS ═════════════ */

.geo-gif {
  display: block;
  margin: 1.2rem auto;
  max-height: 90px;
  image-rendering: auto;
  opacity: 0.88;
  transition: opacity 0.3s;
}

.geo-gif:hover {
  opacity: 1;
}

.geo-gif-small {
  display: block;
  margin: 0.8rem auto;
  max-height: 55px;
  image-rendering: auto;
  opacity: 0.82;
}

.geo-gif-inline {
  display: inline-block;
  vertical-align: middle;
  max-height: 24px;
  opacity: 0.8;
  margin: 0 0.3rem;
}

.geo-gif-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin: 1.2rem 0;
  flex-wrap: wrap;
}

/* ═══════ RESPONSIVE ═════════════════ */

@media (max-width: 700px) {
  .site-wrapper {
    padding: 1rem;
  }

  .moon-container {
    top: 0.8rem;
    right: 0.8rem;
  }

  .moon {
    width: 36px;
    height: 36px;
  }

  .moon.new {
    box-shadow:
      inset 0 0 0 18px var(--moon-shadow),
      0 0 8px var(--moon-glow);
  }

  .site-header {
    padding: 1.5rem 0 1rem;
  }

  .site-nav {
    gap: 0.2rem 0;
    font-size: 0.8rem;
  }

  .poem {
    padding: 0.8rem 1rem;
  }

  .invocation {
    padding: 1rem 1.2rem;
  }

  .goddess-entry,
  .shrine-entry,
  .beauty-section {
    padding: 1rem;
  }
}