/**
 * Justin Gibbs — So Below (Earth / Mycelium)
 * Companion to styles.css. Same visionary spirit, rooted in loam.
 */

html, body.earth { background: #0A0604; color: #F5EEDC; }
body.earth { font-family: 'Rajdhani', sans-serif; overflow-x: hidden; letter-spacing: 0.01em; }

/* ===== CANOPY / UNDERSTORY BACKDROP ===== */
.earth .canopy {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 18% 18%,  rgba(74, 143, 60, 0.30), transparent 60%),
    radial-gradient(ellipse 65% 50% at 85% 25%,  rgba(232, 166, 54, 0.22), transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 108%, rgba(192, 50, 46, 0.25), transparent 60%),
    radial-gradient(ellipse 60% 45% at 90% 85%,  rgba(107, 62, 138, 0.35), transparent 60%),
    linear-gradient(180deg, #0A0604 0%, #160E08 45%, #0E0805 100%);
}
/* mycelium / root network instead of a grid */
.earth .mycelium {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.35;
  background-image:
    radial-gradient(ellipse 2px 12px at 15% 20%, rgba(245, 238, 220, 0.25), transparent 70%),
    radial-gradient(ellipse 12px 2px at 70% 60%, rgba(245, 238, 220, 0.18), transparent 70%),
    radial-gradient(ellipse 2px 20px at 40% 80%, rgba(232, 166, 54, 0.15), transparent 70%),
    radial-gradient(ellipse 18px 2px at 20% 50%, rgba(168, 232, 144, 0.12), transparent 70%);
}
.earth .mycelium::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(115deg, transparent 48%, rgba(245, 238, 220, 0.04) 49%, rgba(245, 238, 220, 0.08) 50%, rgba(245, 238, 220, 0.04) 51%, transparent 52%),
    linear-gradient(55deg,  transparent 48%, rgba(168, 232, 144, 0.05) 49%, rgba(168, 232, 144, 0.09) 50%, rgba(168, 232, 144, 0.05) 51%, transparent 52%),
    linear-gradient(165deg, transparent 48%, rgba(232, 166, 54, 0.04) 49%, rgba(232, 166, 54, 0.07) 50%, rgba(232, 166, 54, 0.04) 51%, transparent 52%);
  background-size: 180px 180px, 240px 240px, 320px 320px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 20%, transparent 80%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 20%, transparent 80%);
}

/* spores / fireflies instead of stars */
.earth .spores {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0.7;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 10%, #F5EEDC, transparent),
    radial-gradient(1px 1px at 27% 62%,    #A8E890, transparent),
    radial-gradient(2px 2px at 41% 22%,    #E8A636, transparent),
    radial-gradient(1px 1px at 58% 82%,    #D97979, transparent),
    radial-gradient(1px 1px at 74% 12%,    #F5EEDC, transparent),
    radial-gradient(1.5px 1.5px at 88% 53%,#A8E890, transparent),
    radial-gradient(1px 1px at 95% 30%,    #F5EEDC, transparent),
    radial-gradient(1.5px 1.5px at 16% 92%,#E8A636, transparent),
    radial-gradient(2.5px 2.5px at 50% 40%,#F5EEDC, transparent),
    radial-gradient(2px 2px at 82% 78%,    #D97979, transparent);
  animation: glim 7s ease-in-out infinite;
}
@keyframes glim { 0%,100%{opacity:.4}50%{opacity:.95} }

/* soft grit texture instead of scanlines */
.earth.grit::before {
  content: ''; position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(232, 166, 54, 0.012) 0px, rgba(232, 166, 54, 0.012) 1px,
      transparent 1px, transparent 3px),
    radial-gradient(1px 1px at 7% 15%,  rgba(245, 238, 220, 0.18), transparent 80%),
    radial-gradient(1px 1px at 33% 77%, rgba(245, 238, 220, 0.14), transparent 80%),
    radial-gradient(1px 1px at 68% 40%, rgba(245, 238, 220, 0.16), transparent 80%),
    radial-gradient(1px 1px at 91% 9%,  rgba(245, 238, 220, 0.12), transparent 80%);
}

/* ===== GLOWS ===== */
.earth .glow-moss   { text-shadow: 0 0 10px rgba(168, 232, 144, 0.8), 0 0 30px rgba(74, 143, 60, 0.35); }
.earth .glow-amber  { text-shadow: 0 0 10px rgba(232, 166, 54, 0.8), 0 0 28px rgba(232, 166, 54, 0.4); }
.earth .glow-cap    { text-shadow: 0 0 10px rgba(192, 50, 46, 0.8), 0 0 28px rgba(192, 50, 46, 0.4); }
.earth .glow-chloro { text-shadow: 0 0 10px rgba(63, 168, 130, 0.8), 0 0 28px rgba(63, 168, 130, 0.4); }

.earth .loam {
  background: linear-gradient(90deg, #4A8F3C, #6B3E8A, #C0322E, #E8A636, #3FA882, #4A8F3C);
  background-size: 320% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: loam-shift 11s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(107, 62, 138, 0.45));
}
@keyframes loam-shift { 0%,100%{ background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ===== PANELS / CLIP ===== */
.earth .clip-bark {
  clip-path: polygon(
    0 18px, 14px 6px, 38px 0, 100% 0,
    100% calc(100% - 14px), calc(100% - 22px) 100%,
    28px 100%, 0 calc(100% - 26px));
}
.earth .clip-bark-sm {
  clip-path: polygon(
    0 10px, 8px 2px, 18px 0, 100% 0,
    100% calc(100% - 10px), calc(100% - 14px) 100%,
    14px 100%, 0 calc(100% - 14px));
}
.earth .border-loam {
  position: relative;
  background: linear-gradient(180deg, rgba(42, 24, 16, 0.82), rgba(22, 14, 8, 0.95));
  border: 1px solid transparent;
  box-shadow:
    0 0 22px rgba(107, 62, 138, 0.20),
    0 0 12px rgba(232, 166, 54, 0.15),
    inset 0 0 28px rgba(74, 143, 60, 0.08);
}
.earth .border-loam::before {
  content: '';
  position: absolute; inset: 0;
  padding: 1px;
  background: linear-gradient(135deg, #4A8F3C 0%, #6B3E8A 35%, #C0322E 65%, #E8A636 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  clip-path: inherit;
}

.earth .shroom-corners { position: relative; }
.earth .shroom-corners::before, .earth .shroom-corners::after {
  content: '❦'; position: absolute;
  color: #E8A636; font-size: 0.95rem;
  filter: drop-shadow(0 0 6px #E8A636);
}
.earth .shroom-corners::before { top: 8px; left: 12px; }
.earth .shroom-corners::after  { bottom: 8px; right: 12px; transform: rotate(180deg); }

/* ===== MOTION ===== */
@keyframes earth-breath {
  0%,100% { filter: brightness(1)    drop-shadow(0 0 8px rgba(74, 143, 60, 0.45)); }
  50%     { filter: brightness(1.25) drop-shadow(0 0 22px rgba(232, 166, 54, 0.7)); }
}
.earth .breathe { animation: earth-breath 6s ease-in-out infinite; }

@keyframes drift-cw  { to { transform: rotate(360deg); } }
@keyframes drift-ccw { to { transform: rotate(-360deg); } }
.earth .drift-slow { animation: drift-cw 70s linear infinite; }
.earth .drift-med  { animation: drift-ccw 48s linear infinite; }
.earth .drift-fast { animation: drift-cw 26s linear infinite; }

@keyframes rot-sweep {
  0% { transform: translateY(-100%); opacity: 0; }
  10% { opacity: 0.7; }
  100% { transform: translateY(100%); opacity: 0; }
}
.earth .rot-host { position: relative; overflow: hidden; }
.earth .rot-host::after {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #A8E890, #E8A636, #C0322E, transparent);
  filter: blur(1px);
  animation: rot-sweep 7s linear infinite;
  animation-delay: var(--rot-delay, 0s);
}

@keyframes pulse-bark {
  0%,100% { box-shadow: 0 0 0 1px rgba(74, 143, 60, 0.22), 0 0 14px rgba(107, 62, 138, 0.3); }
  50%     { box-shadow: 0 0 0 1px rgba(192, 50, 46, 0.4), 0 0 30px rgba(232, 166, 54, 0.55); }
}
.earth .pulse-bark { animation: pulse-bark 5s ease-in-out infinite; }

/* ===== HERO FOREST FLOOR ===== */
.earth .understory {
  background:
    radial-gradient(ellipse 80% 50% at 50% 90%, rgba(192, 50, 46, 0.18), transparent 60%),
    linear-gradient(180deg, #0A0604 0%, #160E08 45%, #1E130A 85%, #2A1810 100%);
  position: relative;
}
.earth .understory::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #4A8F3C 35%, #E8A636 50%, #C0322E 65%, transparent);
  box-shadow: 0 0 28px rgba(192, 50, 46, 0.6);
}
/* forest floor — branching root "horizon" in perspective */
.earth .loamfloor {
  position: absolute; left: -20%; right: -20%; bottom: -40px; height: 58vh;
  background-image:
    radial-gradient(ellipse 2px 80px at 18% 10%, rgba(168, 232, 144, 0.55), transparent 70%),
    radial-gradient(ellipse 90px 2px at 40% 30%, rgba(168, 232, 144, 0.40), transparent 70%),
    radial-gradient(ellipse 2px 60px at 66% 20%, rgba(232, 166, 54, 0.45), transparent 70%),
    radial-gradient(ellipse 120px 2px at 80% 55%, rgba(232, 166, 54, 0.35), transparent 70%),
    linear-gradient(rgba(74, 143, 60, 0.16) 2px, transparent 2px),
    linear-gradient(90deg, rgba(74, 143, 60, 0.12) 2px, transparent 2px);
  background-size: auto, auto, auto, auto, 120px 120px, 120px 120px;
  transform: perspective(500px) rotateX(62deg);
  transform-origin: center top;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%);
          mask-image: linear-gradient(to bottom, #000, transparent 85%);
  filter: drop-shadow(0 0 8px rgba(107, 62, 138, 0.35));
}
.earth .spiral-overlay {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.14; mix-blend-mode: screen;
}

/* ===== HUD ===== */
.earth .hud-earth {
  background: linear-gradient(90deg, rgba(74, 143, 60, 0.06), rgba(192, 50, 46, 0.06));
  border-top: 1px solid rgba(107, 62, 138, 0.3);
  border-bottom: 1px solid rgba(107, 62, 138, 0.3);
}
.earth .cursor-earth::after {
  content: '◉'; animation: blink-earth 1.2s steps(1) infinite; color: #E8A636;
}
@keyframes blink-earth { 0%,49%{opacity:1}50%,100%{opacity:0.2} }

.earth .toggle-link {
  transition: color 0.3s, text-shadow 0.3s;
  cursor: pointer; padding: 0 0.25rem;
}
.earth .toggle-link:hover {
  color: #F5EEDC;
  text-shadow: 0 0 10px rgba(232, 166, 54, 0.8);
}
.earth .toggle-link.active {
  color: #F5EEDC;
  text-shadow: 0 0 12px rgba(232, 166, 54, 0.9);
}

/* ===== BUTTONS ===== */
.earth .btn-bone {
  position: relative;
  padding: 0.9rem 2rem;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.76rem;
  color: #F5EEDC;
  background: linear-gradient(90deg, rgba(74, 143, 60, 0.28), rgba(107, 62, 138, 0.28), rgba(192, 50, 46, 0.25));
  border: 1px solid #E8A636;
  box-shadow:
    0 0 24px rgba(74, 143, 60, 0.4),
    0 0 28px rgba(192, 50, 46, 0.3),
    inset 0 0 20px rgba(232, 166, 54, 0.18);
  transition: all 0.3s ease;
  display: inline-block;
  cursor: pointer;
}
.earth .btn-bone:hover {
  box-shadow:
    0 0 44px rgba(168, 232, 144, 0.6),
    0 0 44px rgba(192, 50, 46, 0.55),
    inset 0 0 28px rgba(232, 166, 54, 0.35);
  transform: translateY(-1px);
}
.earth .btn-shroom {
  padding: 0.9rem 2rem;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.76rem;
  color: #E8A636;
  border: 1px solid rgba(232, 166, 54, 0.55);
  background: transparent;
  transition: all 0.3s ease;
  display: inline-block;
  cursor: pointer;
}
.earth .btn-shroom:hover {
  background: rgba(232, 166, 54, 0.12);
  box-shadow: 0 0 28px rgba(232, 166, 54, 0.55);
  color: #F5EEDC;
}

/* ===== NAV ===== */
.earth .nav-root { position: relative; transition: color 0.3s; }
.earth .nav-root:hover { color: #E8A636; text-shadow: 0 0 10px rgba(232, 166, 54, 0.7); }
.earth .nav-root::after {
  content: ''; position: absolute; left: 50%; right: 50%; bottom: -6px; height: 1px;
  background: linear-gradient(90deg, transparent, #E8A636, transparent);
  transition: all 0.3s;
}
.earth .nav-root:hover::after { left: 0; right: 0; }

/* ===== LABELS ===== */
.earth .rune-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem; letter-spacing: 0.4em;
  color: #A8E890; text-transform: uppercase;
}
.earth .rune-label-amber { color: #E8A636; }

/* ===== IDENTITY MANDALA (ring of leaves + cap) ===== */
.earth .mandala {
  position: relative; width: 100%; max-width: 440px; aspect-ratio: 1; margin: 0 auto;
}
.earth .mandala .aura-earth {
  position: absolute; inset: 6%; border-radius: 50%;
  background: conic-gradient(from 0deg,
    #4A8F3C, #6B3E8A, #C0322E, #E8A636, #3FA882, #4A8F3C);
  filter: blur(38px); opacity: 0.5;
}
.earth .mandala .notches {
  position: absolute; inset: -4px; border-radius: 50%;
  background: conic-gradient(from 0deg,
    #A8E890 0 2deg, transparent 2deg 30deg,
    #E8A636 30deg 32deg, transparent 32deg 60deg,
    #A8E890 60deg 62deg, transparent 62deg 90deg,
    #E8A636 90deg 92deg, transparent 92deg 120deg,
    #A8E890 120deg 122deg, transparent 122deg 150deg,
    #E8A636 150deg 152deg, transparent 152deg 180deg,
    #A8E890 180deg 182deg, transparent 182deg 210deg,
    #E8A636 210deg 212deg, transparent 212deg 240deg,
    #A8E890 240deg 242deg, transparent 242deg 270deg,
    #E8A636 270deg 272deg, transparent 272deg 300deg,
    #A8E890 300deg 302deg, transparent 302deg 330deg,
    #E8A636 330deg 332deg, transparent 332deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 49%, #000 50.5%, #000 52.5%, transparent 54%);
          mask: radial-gradient(circle, transparent 49%, #000 50.5%, #000 52.5%, transparent 54%);
  filter: drop-shadow(0 0 6px rgba(168, 232, 144, 0.9));
}
.earth .mandala .ring-outer {
  position: absolute; inset: 10%; border-radius: 50%;
  border: 1px solid rgba(168, 232, 144, 0.65);
  box-shadow: 0 0 40px rgba(74, 143, 60, 0.5), inset 0 0 40px rgba(107, 62, 138, 0.3);
}
.earth .mandala .ring-dashed {
  position: absolute; inset: 17%; border-radius: 50%;
  border: 1px dashed rgba(192, 50, 46, 0.75);
}
.earth .mandala .portrait-earth {
  position: absolute; inset: 23%;
  border-radius: 50%; overflow: hidden; background: #0A0604;
  border: 2px solid rgba(232, 166, 54, 0.88);
  box-shadow:
    0 0 50px rgba(192, 50, 46, 0.55),
    0 0 40px rgba(74, 143, 60, 0.45),
    inset 0 0 40px rgba(107, 62, 138, 0.4);
}
.earth .mandala .portrait-earth img {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.05) saturate(1.1) sepia(0.15);
}
.earth .mandala .portrait-earth::after {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(192, 50, 46, 0.38), transparent 55%),
    radial-gradient(ellipse at 50% 0%,   rgba(74, 143, 60, 0.35), transparent 55%);
  mix-blend-mode: screen;
}
.earth .third-eye-earth {
  position: absolute; top: 33%; left: 50%; transform: translate(-50%, -50%);
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle, #F5EEDC 0%, #E8A636 40%, transparent 72%);
  box-shadow: 0 0 22px #E8A636, 0 0 44px #C0322E, 0 0 60px #6B3E8A;
  z-index: 5;
}
.earth .petals {
  position: absolute; inset: -12%; border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(232, 166, 54, 0.32) 2deg, transparent 6deg,
    transparent 28deg, rgba(168, 232, 144, 0.35) 30deg, transparent 34deg,
    transparent 58deg, rgba(192, 50, 46, 0.3) 60deg, transparent 64deg,
    transparent 88deg, rgba(232, 166, 54, 0.3) 90deg, transparent 94deg,
    transparent 118deg, rgba(63, 168, 130, 0.32) 120deg, transparent 124deg,
    transparent 148deg, rgba(232, 166, 54, 0.3) 150deg, transparent 154deg,
    transparent 178deg, rgba(107, 62, 138, 0.36) 180deg, transparent 184deg,
    transparent 208deg, rgba(232, 166, 54, 0.3) 210deg, transparent 214deg,
    transparent 238deg, rgba(168, 232, 144, 0.35) 240deg, transparent 244deg,
    transparent 268deg, rgba(232, 166, 54, 0.3) 270deg, transparent 274deg,
    transparent 298deg, rgba(192, 50, 46, 0.3) 300deg, transparent 304deg,
    transparent 328deg, rgba(232, 166, 54, 0.3) 330deg, transparent 334deg,
    transparent 360deg);
  mix-blend-mode: screen;
  -webkit-mask: radial-gradient(circle, transparent 32%, #000 35%, #000 78%, transparent 100%);
          mask: radial-gradient(circle, transparent 32%, #000 35%, #000 78%, transparent 100%);
}

/* ===== TURTLE (the stopping-and-staring kind) =====
   42s cycle:
   0–6s   walk in from off-screen left to ~40vw (fades in 0–1.7s)
   6–28s  stop and stare (head peeks out ~7.5s, tucks back ~27s)
   28–42s plod out past the right edge
*/
@keyframes turtle-saunter {
  0%   { transform: translateX(-22vw); opacity: 0; }
  4%   { opacity: 1; }
  14%  { transform: translateX(40vw); }    /* arrived */
  67%  { transform: translateX(40vw); }    /* still stopped */
  98%  { transform: translateX(120vw); opacity: 1; }
  100% { transform: translateX(124vw); opacity: 0; }
}
/* head stays tucked during walk-in, peeks out during stop, tucks back before walk-out */
@keyframes turtle-head-peek {
  0%,16%   { transform: translateX(0); }
  24%      { transform: translateX(10px); }
  60%      { transform: translateX(10px); }
  67%      { transform: translateX(0); }
  100%     { transform: translateX(0); }
}
/* two deliberate blinks while staring */
@keyframes turtle-blink {
  0%,32%   { transform: scaleY(1); }
  34%      { transform: scaleY(0.1); }
  36%,48%  { transform: scaleY(1); }
  50%      { transform: scaleY(0.1); }
  52%,100% { transform: scaleY(1); }
}
@keyframes shell-mush-sway {
  0%,100% { transform: rotate(-3deg); }
  50%     { transform: rotate(3deg); }
}
.earth .turtle-wrap {
  position: absolute; bottom: 10%; left: 0; z-index: 5; pointer-events: none;
  animation: turtle-saunter 42s linear infinite;
  animation-delay: 2s;
}
.earth .turtle-head { animation: turtle-head-peek 42s linear infinite; animation-delay: 2s; }
.earth .turtle-eye  { transform-origin: center; animation: turtle-blink 42s linear infinite; animation-delay: 2s; }
.earth .shell-mush  { transform-origin: 50% 100%; animation: shell-mush-sway 4.2s ease-in-out infinite; }

/* ===== ROOT CARD (pillar equivalent) ===== */
.earth .root-card {
  position: relative;
  background: linear-gradient(180deg, rgba(42, 24, 16, 0.85), rgba(22, 14, 8, 0.95));
  padding: 2.5rem 2rem 2rem;
  transition: all 0.4s ease;
}
.earth .root-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 40px rgba(74, 143, 60, 0.45),
    0 0 40px rgba(192, 50, 46, 0.32);
}
.earth .root-card .aura-card {
  position: absolute; top: -20%; left: 50%; transform: translateX(-50%);
  width: 180%; height: 80%;
  background: radial-gradient(ellipse at center, rgba(232, 166, 54, 0.32), transparent 55%);
  pointer-events: none;
}

/* ===== DIGIT RING READOUT ===== */
.earth .ring-digit {
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  background: linear-gradient(180deg, #F5EEDC 0%, #A8E890 30%, #4A8F3C 60%, #6B3E8A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgba(74, 143, 60, 0.55));
}
.earth .ring-digit.amber {
  background: linear-gradient(180deg, #F5EEDC 0%, #E8A636 50%, #C0322E 100%);
  -webkit-background-clip: text; background-clip: text;
}
.earth .ring-digit.chloro {
  background: linear-gradient(180deg, #F5EEDC 0%, #3FA882 60%, #4A8F3C 100%);
  -webkit-background-clip: text; background-clip: text;
}

/* ===== ORNAMENT ===== */
.earth .earth-divider {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; color: #E8A636; opacity: 0.9;
}
.earth .earth-divider::before,
.earth .earth-divider::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, #E8A636 40%, #C0322E 60%, transparent);
  max-width: 160px;
  box-shadow: 0 0 4px rgba(232, 166, 54, 0.6);
}

/* ===== DROP CAP ===== */
.earth .initial-earth {
  float: left;
  font-family: 'Cinzel', serif; font-weight: 900;
  font-size: 4.5rem; line-height: 0.9;
  padding: 0.25rem 0.75rem 0 0;
  background: linear-gradient(180deg, #A8E890 0%, #E8A636 50%, #C0322E 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 22px rgba(192, 50, 46, 0.4);
}

/* ===== SIDE IDs ===== */
.earth .side-rune {
  position: absolute;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem; letter-spacing: 0.4em;
  color: rgba(168, 232, 144, 0.55);
}

/* ===== PROSE ===== */
.earth .prose p { margin-bottom: 1.25rem; }
.earth .prose p:last-child { margin-bottom: 0; }
.earth .prose em { font-style: italic; color: #E8A636; }
.earth .prose strong { color: #F5EEDC; font-weight: 600; }

/* ===== FOCUS ===== */
.earth a:focus-visible,
.earth button:focus-visible {
  outline: 2px solid #E8A636;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ===== BLOCKQUOTE ===== */
.earth blockquote {
  border-left: 2px solid #E8A636;
  padding: 0.5rem 0 0.5rem 1.5rem;
  font-style: italic;
  color: #F5EEDC;
  box-shadow: -4px 0 20px rgba(232, 166, 54, 0.22);
}