/*
Theme Name:  Miles Hunter
Theme URI:   https://mileshunter.com
Author:      Miles Hunter
Description: Custom author theme for Miles Hunter — LitRPG & Cultivation Fantasy. Requires ACF Pro.
Version:     1.2.0
License:     Private
Text Domain: miles-hunter
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --bg-void:        #060504;
  --bg-deep:        #0a0806;
  --bg-panel:       #100e0b;
  --bg-card:        #141109;
  --bg-raised:      #1a1610;

  --gold-bright:    #e8b84b;
  --gold-mid:       #c9943a;
  --gold-dim:       #7a5a20;
  --gold-pale:      #f0d080;
  --gold-trace:     #2e1f08;

  --cyan-bright:    #4dd8e8;
  --cyan-mid:       #2ab0c0;
  --cyan-dim:       #1a6070;

  --crimson-bright: #e05242;
  --crimson-mid:    #8b1a1a;
  --crimson-dim:    #4a0f0f;
  --jade-bright:    #26c485;
  --jade-mid:       #1a7a52;
  --jade-dim:       #0d3d28;

  --text-primary:   #ede8df;
  --text-secondary: #8a8070;
  --text-muted:     #4a4035;

  --border-gold:    rgba(201,148,58,0.28);
  --border-warm:    rgba(232,184,75,0.12);
  --border-dim:     rgba(255,240,200,0.07);

  --glow-gold:      0 0 22px rgba(232,184,75,0.45), 0 0 65px rgba(232,184,75,0.12);
  --glow-gold-soft: 0 0 12px rgba(232,184,75,0.25);
  --glow-cyan:      0 0 16px rgba(77,216,232,0.35), 0 0 40px rgba(77,216,232,0.08);
  --glow-crimson:   0 0 25px rgba(224,82,66,0.5),   0 0 70px rgba(224,82,66,0.15);
  --glow-jade:      0 0 20px rgba(38,196,133,0.4),  0 0 60px rgba(38,196,133,0.1);

  --font-display:   'Cinzel', serif;
  --font-label:     'Rajdhani', sans-serif;
  --font-body:      'Lato', sans-serif;
  --font-mono:      'Share Tech Mono', monospace;

  --ease-out-expo:  cubic-bezier(0.16,1,0.3,1);
  --ease-in-out:    cubic-bezier(0.4,0,0.2,1);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background-color: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Grain texture overlay */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: 0.04;
  pointer-events: none;
  z-index: 9999;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg-void); }
::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 2px; }

.container { max-width: 1160px; margin: 0 auto; padding: 0 2rem; }

/* ============================================================
   UTILITY
   ============================================================ */
.section-label {
  font-family: var(--font-label); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.38em; color: var(--gold-mid); text-transform: uppercase;
  display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.5rem;
}
.section-label::before { content: '✦'; color: var(--gold-dim); font-size: 0.55rem; letter-spacing: 0; }
.section-label::after  { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg,var(--gold-dim),transparent); max-width: 80px; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo); }
.reveal.visible { opacity: 1; transform: translateY(0); }

.stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo); }
.stagger.visible > *:nth-child(1) { transition-delay: 0s; }
.stagger.visible > *:nth-child(2) { transition-delay: 0.08s; }
.stagger.visible > *:nth-child(3) { transition-delay: 0.16s; }
.stagger.visible > *:nth-child(4) { transition-delay: 0.24s; }
.stagger.visible > *:nth-child(5) { transition-delay: 0.32s; }
.stagger.visible > *:nth-child(6) { transition-delay: 0.40s; }
.stagger.visible > *:nth-child(7) { transition-delay: 0.48s; }
.stagger.visible > * { opacity: 1; transform: translateY(0); }

@keyframes fadeUp  { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn  { from { opacity:0; } to { opacity:1; } }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display); font-size: 0.62rem; font-weight: 400;
  letter-spacing: 0.28em; text-transform: uppercase;
  padding: 0.9rem 2.2rem;
  border: 1px solid var(--gold-dim); color: var(--gold-mid);
  background: rgba(232,184,75,0.03);
  position: relative; overflow: hidden;
  transition: all 0.35s var(--ease-in-out); cursor: pointer;
}
.btn::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg,transparent 40%,rgba(232,184,75,0.06));
  opacity: 0; transition: opacity 0.35s;
}
.btn:hover { border-color: var(--gold-bright); color: var(--gold-pale); box-shadow: var(--glow-gold-soft), inset 0 0 20px rgba(232,184,75,0.04); }
.btn:hover::before { opacity: 1; }
.btn::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 55%; height: 100%;
  background: linear-gradient(90deg,transparent,rgba(232,184,75,0.08),transparent);
  animation: shimmer 4s infinite;
}
@keyframes shimmer { 0% { left:-100%; } 70%,100% { left:160%; } }

.btn-secondary { border-color: var(--cyan-dim); color: var(--cyan-mid); background: rgba(77,216,232,0.02); }
.btn-secondary:hover { border-color: var(--cyan-bright); color: var(--cyan-bright); box-shadow: var(--glow-cyan); }

.btn-amazon  { border-color: var(--gold-mid);  color: var(--gold-bright); background: rgba(232,184,75,0.04); }
.btn-amazon:hover  { border-color: var(--gold-bright); box-shadow: var(--glow-gold-soft); }
.btn-audible { border-color: var(--gold-dim);  color: var(--gold-mid); background: transparent; }
.btn-audible:hover { border-color: var(--gold-mid); color: var(--gold-bright); }

/* ============================================================
   NAVIGATION
   ============================================================ */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 1.6rem 0; transition: all 0.4s var(--ease-in-out);
}
#nav.scrolled {
  background: rgba(6,5,4,0.95);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  padding: 1rem 0; border-bottom: 1px solid var(--border-dim);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; }

.nav-logo {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
  letter-spacing: 0.22em; color: var(--gold-bright); text-transform: uppercase;
  text-shadow: var(--glow-gold); transition: text-shadow 0.3s;
}
.nav-logo:hover { text-shadow: 0 0 30px rgba(232,184,75,0.8), 0 0 80px rgba(232,184,75,0.3); }

/* wp_nav_menu() outputs a <ul> — we target it directly */
.nav-links { display: flex; align-items: center; gap: 2.5rem; list-style: none; }
.nav-links li { position: relative; }
.nav-links a {
  font-family: var(--font-label); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-secondary);
  position: relative; transition: color 0.3s;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -4px; left: 0;
  width: 0; height: 1px; background: var(--gold-bright);
  transition: width 0.3s var(--ease-out-expo); box-shadow: 0 0 6px var(--gold-mid);
}
.nav-links a:hover { color: var(--text-primary); }
.nav-links a:hover::after,
.nav-links .current-menu-item a::after,
.nav-links .current_page_item a::after { width: 100%; }
.nav-links .current-menu-item a,
.nav-links .current_page_item a { color: var(--text-primary); }

.nav-hamburger { display: none; flex-direction: column; gap: 5px; width: 28px; cursor: pointer; }
.nav-hamburger span { display: block; height: 1px; background: var(--gold-bright); transition: all 0.3s; }

.mobile-menu {
  display: none; position: fixed; inset: 0;
  background: rgba(6,5,4,0.98); z-index: 999;
  flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.2em;
  color: var(--text-primary); text-transform: uppercase; transition: color 0.3s;
}
.mobile-menu a:hover { color: var(--gold-bright); }
.menu-close-btn {
  position: absolute; top: 2rem; right: 2rem;
  font-family: var(--font-label); font-size: 1.2rem;
  color: var(--text-muted); cursor: pointer; transition: color 0.3s;
}
.menu-close-btn:hover { color: var(--gold-bright); }

/* ============================================================
   PARTICLE CANVAS
   ============================================================ */
#particle-canvas {
  position: fixed; bottom: 0; left: 0;
  width: 100%; height: 65vh;
  pointer-events: none; z-index: 1;
}

/* ============================================================
   HERO
   ============================================================ */
#hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
  padding-bottom: 10rem; /* lifts content clear of the scroll indicator */
  background:
    radial-gradient(ellipse 100% 55% at 50% 115%, rgba(140,70,10,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 70%  45% at 50% 0%,   rgba(160,100,20,0.08) 0%, transparent 60%),
    var(--bg-void);
}
.hero-texture {
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='120' height='120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 60 Q30 45 60 60 Q90 75 120 60' fill='none' stroke='rgba(232,184,75,0.025)' stroke-width='0.8'/%3E%3Cpath d='M0 30 Q40 20 80 35 Q100 40 120 30' fill='none' stroke='rgba(232,184,75,0.018)' stroke-width='0.5'/%3E%3Cpath d='M0 90 Q50 80 80 95 Q100 100 120 90' fill='none' stroke='rgba(232,184,75,0.018)' stroke-width='0.5'/%3E%3C/svg%3E") 0 0 / 120px 120px;
  mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 20%, transparent 80%);
}
.hero-runes {
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 6 L74 40 L40 74 L6 40 Z' fill='none' stroke='rgba(201,148,58,0.04)' stroke-width='0.6'/%3E%3Ccircle cx='40' cy='40' r='2' fill='rgba(201,148,58,0.05)'/%3E%3C/svg%3E") 0 0 / 80px 80px;
  animation: runesDrift 40s linear infinite;
}
@keyframes runesDrift { from { background-position: 0 0; } to { background-position: 80px 80px; } }

.hero-fire-glow {
  position: absolute; bottom: -8%; left: 50%; transform: translateX(-50%);
  width: 1000px; height: 500px;
  background: radial-gradient(ellipse, rgba(160,80,15,0.18) 0%, rgba(100,40,5,0.08) 40%, transparent 70%);
  animation: breathe 8s ease-in-out infinite; pointer-events: none;
}
@keyframes breathe {
  0%,100% { opacity:0.7; transform:translateX(-50%) scaleY(1); }
  50%      { opacity:1;   transform:translateX(-50%) scaleY(1.1); }
}

.hero-corner { position: absolute; width: 48px; height: 48px; opacity: 0.35; }
.hero-corner svg { width: 100%; height: 100%; }
.hero-corner.tl { top: 4.5rem; left: 2rem; }
.hero-corner.tr { top: 4.5rem; right: 2rem; transform: scaleX(-1); }
.hero-corner.bl { bottom: 2.5rem; left: 2rem; transform: scaleY(-1); }
.hero-corner.br { bottom: 2.5rem; right: 2rem; transform: scale(-1,-1); }

.hero-content { position: relative; z-index: 10; max-width: 900px; padding: 2rem; }

.hero-eyebrow {
  font-family: var(--font-label); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.5em; color: var(--gold-mid); text-transform: uppercase;
  margin-bottom: 2rem;
  opacity: 0; animation: fadeUp 1s var(--ease-out-expo) 0.3s forwards;
}
.hero-eyebrow::before { content: '— '; letter-spacing: 0.1em; color: var(--gold-dim); }
.hero-eyebrow::after  { content: ' —'; letter-spacing: 0.1em; color: var(--gold-dim); }

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 700;
  letter-spacing: 0.12em; line-height: 1.0; text-transform: uppercase;
  color: var(--gold-bright); text-shadow: var(--glow-gold);
  margin-bottom: 0.6rem;
  opacity: 0; animation: fadeUp 1s var(--ease-out-expo) 0.5s forwards;
}
.hero-sub {
  display: block; font-size: 0.38em; font-weight: 400;
  letter-spacing: 0.45em; color: var(--text-muted); text-shadow: none; margin-top: 0.8rem;
}

.hero-divider {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; margin: 1.5rem auto; max-width: 320px;
  opacity: 0; animation: fadeUp 1s var(--ease-out-expo) 0.7s forwards;
}
.hero-divider-line { flex: 1; height: 1px; background: linear-gradient(90deg,transparent,var(--gold-dim)); }
.hero-divider-line:last-child { background: linear-gradient(90deg,var(--gold-dim),transparent); }
.hero-divider-gem {
  width: 8px; height: 8px; border: 1px solid var(--gold-mid); transform: rotate(45deg);
  box-shadow: var(--glow-gold-soft); animation: gemPulse 4s ease-in-out infinite;
}
@keyframes gemPulse { 0%,100% { box-shadow:0 0 4px rgba(232,184,75,0.2); } 50% { box-shadow:var(--glow-gold-soft); } }

.hero-tagline {
  font-family: var(--font-label); font-size: 0.88rem; font-weight: 400;
  color: var(--text-secondary); letter-spacing: 0.25em;
  margin-bottom: 2rem;
  opacity: 0; animation: fadeUp 1.2s var(--ease-out-expo) 1s forwards;
}

.hero-cta {
  opacity: 0; animation: fadeUp 1s var(--ease-out-expo) 1.2s forwards;
  display: flex; gap: 1.25rem; justify-content: center; flex-wrap: wrap;

}

.hero-scroll {
  position: absolute; bottom: 5rem; left: 50%; transform: translateX(-50%); pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  font-family: var(--font-label); font-size: 0.58rem; letter-spacing: 0.35em;
  color: var(--text-muted); z-index: 10;
  opacity: 0; animation: fadeIn 1s ease 1.8s forwards;
}
.scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, var(--gold-dim), transparent);
  animation: scrollPulse 2.5s ease-in-out infinite;
}
@keyframes scrollPulse { 0%,100% { opacity:0.3; transform:scaleY(0.85); } 50% { opacity:1; transform:scaleY(1); } }

/* ============================================================
   DASHBOARD — The Author's Grimoire
   ============================================================ */
#dashboard {
  position: relative; padding: 7rem 0;
  background: linear-gradient(180deg, var(--bg-void) 0%, var(--bg-deep) 15%, var(--bg-deep) 85%, var(--bg-void) 100%);
  overflow: hidden; z-index: 2;
}
.dashboard-texture {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 20% 50%, rgba(140,90,10,0.04), transparent),
    radial-gradient(ellipse 70% 50% at 80% 50%, rgba(140,90,10,0.04), transparent);
}
.dashboard-frame {
  border: 1px solid var(--border-gold); padding: 3rem; position: relative;
  background: rgba(20,16,8,0.6);
}
.dashboard-frame::before,.dashboard-frame::after { content:'✦'; position:absolute; font-size:0.7rem; color:var(--gold-dim); line-height:1; }
.dashboard-frame::before { top:-0.4rem; left:-0.4rem; }
.dashboard-frame::after  { bottom:-0.4rem; right:-0.4rem; }
.frame-corner-tr { position:absolute; top:-0.4rem; right:-0.4rem; font-size:0.7rem; color:var(--gold-dim); line-height:1; }
.frame-corner-bl { position:absolute; bottom:-0.4rem; left:-0.4rem; font-size:0.7rem; color:var(--gold-dim); line-height:1; }
.dash-rule     { position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--gold-dim),transparent); }
.dash-rule-bot { position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--gold-dim),transparent); }

.dash-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:2.5rem; flex-wrap:wrap; gap:1rem; }
.dash-title  { font-family:var(--font-display); font-size:0.68rem; letter-spacing:0.3em; color:var(--gold-bright); text-transform:uppercase; }

.status-badge {
  font-family:var(--font-label); font-size:0.65rem; font-weight:500;
  letter-spacing:0.2em; color:var(--jade-bright);
  border:1px solid rgba(38,196,133,0.35); padding:0.3rem 0.9rem;
  display:flex; align-items:center; gap:0.6rem;
}
.status-dot {
  width:7px; height:7px; border-radius:50%; background:var(--jade-bright);
  box-shadow:0 0 8px var(--jade-bright); animation:pulseDot 2.5s ease-in-out infinite;
}
@keyframes pulseDot { 0%,100% { opacity:1; box-shadow:0 0 8px var(--jade-bright); } 50% { opacity:0.5; box-shadow:0 0 22px var(--jade-bright); } }

.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-bottom:1px; }
.stat-cell {
  background:var(--bg-panel); padding:1.75rem 1.5rem;
  border:1px solid var(--border-dim); position:relative; overflow:hidden;
  transition:border-color 0.3s, background 0.3s;
}
.stat-cell::before {
  content:''; position:absolute; top:0; left:0; width:100%; height:1px;
  background:linear-gradient(90deg,var(--gold-trace),transparent); transition:background 0.4s;
}
.stat-cell:hover { border-color:var(--border-gold); background:rgba(232,184,75,0.02); }
.stat-cell:hover::before { background:linear-gradient(90deg,var(--gold-dim),transparent); }
.stat-label { font-family:var(--font-label); font-size:0.6rem; font-weight:500; letter-spacing:0.28em; color:var(--text-muted); text-transform:uppercase; margin-bottom:0.8rem; }
.stat-value { font-family:var(--font-mono); font-size:clamp(0.95rem,2.8vw,2.1rem); color:var(--gold-bright); line-height:1; text-shadow:var(--glow-gold-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stat-suffix { font-family:var(--font-label); font-size:0.65rem; font-weight:400; color:var(--text-muted); margin-top:0.35rem; letter-spacing:0.12em; }

.progress-cell {
  background:var(--bg-panel); padding:2rem 1.75rem;
  border:1px solid var(--border-dim); grid-column:1 / -1; position:relative;
}
.progress-cell::before { content:''; position:absolute; top:0; left:0; width:100%; height:1px; background:linear-gradient(90deg,var(--gold-trace),transparent); }
.progress-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; flex-wrap:wrap; gap:0.5rem; }
.progress-book { font-family:var(--font-display); font-size:0.65rem; letter-spacing:0.2em; color:var(--gold-bright); text-transform:uppercase; }
.progress-volume-label { font-family:var(--font-label); font-size:0.58rem; font-weight:400; letter-spacing:0.2em; color:var(--gold-dim); margin-right:0.5rem; }
.progress-pct { font-family:var(--font-mono); font-size:1.3rem; color:var(--gold-bright); text-shadow:var(--glow-gold-soft); }
.progress-track { height:10px; background:rgba(255,240,200,0.04); border:1px solid rgba(232,184,75,0.1); position:relative; overflow:hidden; }
.progress-fill {
  height:100%; width:0;
  background:linear-gradient(90deg,var(--gold-dim),var(--gold-bright));
  box-shadow:0 0 15px rgba(232,184,75,0.5), 0 0 35px rgba(232,184,75,0.2);
  transition:width 2.2s var(--ease-out-expo); position:relative;
}
.progress-fill::after {
  content:''; position:absolute; right:0; top:-2px; bottom:-2px; width:3px;
  background:var(--gold-bright);
  box-shadow:0 0 12px var(--gold-bright), 0 0 30px rgba(232,184,75,0.5);
  animation:progressGlow 2s ease-in-out infinite;
}
@keyframes progressGlow { 0%,100% { opacity:0.8; } 50% { opacity:1; box-shadow:0 0 25px var(--gold-bright); } }
.progress-note { font-family:var(--font-label); font-size:0.58rem; font-weight:400; letter-spacing:0.2em; color:var(--text-muted); margin-top:0.6rem; text-transform:uppercase; }

/* ============================================================
   CHOOSE YOUR REALM
   ============================================================ */
#realms { position:relative; padding:8rem 0; overflow:hidden; z-index:2; }
.realms-bg {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 65% 80% at 22% 50%, rgba(139,26,26,0.09), transparent),
    radial-gradient(ellipse 65% 80% at 78% 50%, rgba(26,122,82,0.08), transparent),
    var(--bg-void);
}
.rune-strip { position:absolute; left:0; right:0; font-family:var(--font-label); font-size:0.5rem; font-weight:400; letter-spacing:0.35em; color:rgba(201,148,58,0.18); white-space:nowrap; overflow:hidden; padding:0.45rem 0; }
.rune-strip-top { top:0; border-bottom:1px solid rgba(201,148,58,0.08); }
.rune-strip-bot { bottom:0; border-top:1px solid rgba(201,148,58,0.08); }
.rune-inner { display:inline-block; animation:runeScroll 30s linear infinite; }
@keyframes runeScroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }

.realms-header { text-align:center; margin-bottom:5rem; }
.realms-main-title { font-family:var(--font-display); font-size:clamp(1.8rem,5vw,3.2rem); font-weight:600; letter-spacing:0.15em; text-transform:uppercase; color:var(--text-primary); line-height:1.2; }
.realms-main-title span { color:var(--gold-bright); text-shadow:var(--glow-gold); }
.realms-sub { font-family:var(--font-label); font-size:0.7rem; font-weight:400; color:var(--text-muted); letter-spacing:0.32em; margin-top:1rem; text-transform:uppercase; }

.realms-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; max-width:860px; margin:0 auto; }
.realm-card { display:flex; flex-direction:column; align-items:center; text-align:center; cursor:pointer; }
.emblem-wrapper { position:relative; width:220px; height:220px; margin-bottom:2.5rem; }
.emblem-ring-outer { position:absolute; inset:-14px; border-radius:50%; border:1px dashed rgba(201,148,58,0.12); animation:rotateSlow 30s linear infinite; transition:border-color 0.5s; }
@keyframes rotateSlow { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
.emblem-ring-mid { position:absolute; inset:0; border-radius:50%; border:1px solid rgba(201,148,58,0.15); transition:border-color 0.5s, box-shadow 0.5s; }
.emblem-inner { position:absolute; inset:16px; border-radius:50%; background:var(--bg-panel); border:1px solid rgba(201,148,58,0.1); display:flex; align-items:center; justify-content:center; transition:all 0.5s var(--ease-out-expo); overflow:hidden; }
.emblem-inner::before { content:''; position:absolute; inset:0; border-radius:50%; background:radial-gradient(ellipse at 40% 35%, rgba(255,240,200,0.04), transparent 60%); }
.emblem-inner svg { width:58%; height:58%; transition:all 0.5s var(--ease-out-expo); }
.emblem-icon { stroke:rgba(201,148,58,0.25); fill:none; transition:stroke 0.5s; }

.realm-card.sworn:hover  .emblem-ring-outer,
.realm-card.sworn.tapped .emblem-ring-outer  { border-color:rgba(224,82,66,0.25); animation-duration:14s; }
.realm-card.sworn:hover  .emblem-ring-mid,
.realm-card.sworn.tapped .emblem-ring-mid    { border-color:var(--crimson-mid); box-shadow:var(--glow-crimson); }
.realm-card.sworn:hover  .emblem-inner,
.realm-card.sworn.tapped .emblem-inner       { background:rgba(139,26,26,0.22); border-color:var(--crimson-mid); box-shadow:var(--glow-crimson), inset 0 0 40px rgba(139,26,26,0.18); }
.realm-card.sworn:hover  .emblem-icon,
.realm-card.sworn.tapped .emblem-icon        { stroke:var(--crimson-bright); }
.realm-card.sworn:hover  svg,
.realm-card.sworn.tapped svg                 { filter:drop-shadow(0 0 10px rgba(224,82,66,0.7)); }

.realm-card.tribal:hover  .emblem-ring-outer,
.realm-card.tribal.tapped .emblem-ring-outer { border-color:rgba(38,196,133,0.2); animation-duration:14s; }
.realm-card.tribal:hover  .emblem-ring-mid,
.realm-card.tribal.tapped .emblem-ring-mid   { border-color:var(--jade-mid); box-shadow:var(--glow-jade); }
.realm-card.tribal:hover  .emblem-inner,
.realm-card.tribal.tapped .emblem-inner      { background:rgba(26,122,82,0.18); border-color:var(--jade-mid); box-shadow:var(--glow-jade), inset 0 0 40px rgba(26,122,82,0.12); }
.realm-card.tribal:hover  .emblem-icon,
.realm-card.tribal.tapped .emblem-icon       { stroke:var(--jade-bright); }
.realm-card.tribal:hover  svg,
.realm-card.tribal.tapped svg                { filter:drop-shadow(0 0 10px rgba(38,196,133,0.7)); }

.realm-card:hover .realm-series,
.realm-card.tapped .realm-series             { color:var(--gold-mid); }
.realm-card.sworn:hover  .realm-name,
.realm-card.sworn.tapped .realm-name         { color:var(--gold-bright); text-shadow:var(--glow-gold); }
.realm-card.tribal:hover .realm-name,
.realm-card.tribal.tapped .realm-name        { color:var(--jade-bright); text-shadow:var(--glow-jade); }

.realm-series { font-family:var(--font-label); font-size:0.62rem; font-weight:500; letter-spacing:0.35em; color:var(--text-muted); text-transform:uppercase; margin-bottom:0.6rem; transition:color 0.4s; }
.realm-name { font-family:var(--font-display); font-size:1.3rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-secondary); margin-bottom:0.6rem; transition:color 0.4s, text-shadow 0.4s; }
.realm-tagline { font-family:var(--font-body); font-size:0.84rem; color:var(--text-muted); max-width:220px; line-height:1.75; margin-bottom:1.75rem; opacity:0; transform:translateY(10px); transition:opacity 0.4s 0.08s, transform 0.4s 0.08s; }
.realm-card:hover .realm-tagline, .realm-card.tapped .realm-tagline { opacity:1; transform:translateY(0); }
.realm-cta { opacity:0; transform:translateY(10px); transition:opacity 0.4s 0.14s, transform 0.4s 0.14s; font-size:0.62rem; padding:0.65rem 1.6rem; }
.realm-card:hover .realm-cta, .realm-card.tapped .realm-cta { opacity:1; transform:translateY(0); }
.realm-card.sworn:hover  .realm-cta, .realm-card.sworn.tapped  .realm-cta { border-color:var(--crimson-mid); color:var(--crimson-bright); }
.realm-card.tribal:hover .realm-cta, .realm-card.tribal.tapped .realm-cta { border-color:var(--jade-mid);    color:var(--jade-bright); }

/* ============================================================
   TESTIMONIES / REVIEWS
   ============================================================ */
#reviews { position:relative; padding:7rem 0; background:var(--bg-deep); overflow:hidden; z-index:2; }
.reviews-top-line { position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--border-gold),transparent); }
.reviews-bot-line { position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--border-warm),transparent); }
.reviews-header { text-align:center; margin-bottom:4rem; }
.section-h2 { font-family:var(--font-display); font-size:clamp(1.5rem,4vw,2.5rem); font-weight:600; letter-spacing:0.15em; text-transform:uppercase; color:var(--text-primary); }
.reviews-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.review-card { background:var(--bg-card); border:1px solid var(--border-dim); padding:2rem; position:relative; transition:border-color 0.4s, transform 0.4s; }
.review-card::before { content:''; position:absolute; top:0; left:0; width:40px; height:1px; background:var(--gold-dim); transition:width 0.5s var(--ease-out-expo), background 0.4s; }
.review-card:hover { border-color:var(--border-gold); transform:translateY(-5px); }
.review-card:hover::before { width:100%; background:linear-gradient(90deg,var(--gold-mid),transparent); }
.review-stars { display:flex; gap:4px; margin-bottom:1.1rem; }
.star { width:11px; height:11px; fill:var(--gold-bright); filter:drop-shadow(0 0 4px rgba(232,184,75,0.5)); }
.review-text { font-size:0.88rem; line-height:1.85; color:var(--text-secondary); font-style:italic; margin-bottom:1.5rem; position:relative; padding-top:1.2rem; }
.review-text::before { content:'\201C'; font-family:var(--font-display); font-size:3.5rem; color:var(--gold-trace); position:absolute; top:-0.5rem; left:-0.3rem; line-height:1; }
.review-meta { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--border-dim); padding-top:1rem; }
.review-author { font-family:var(--font-label); font-size:0.62rem; letter-spacing:0.2em; color:var(--text-muted); text-transform:uppercase; }
.review-source { font-family:var(--font-label); font-size:0.6rem; color:var(--gold-dim); letter-spacing:0.15em; border:1px solid rgba(201,148,58,0.2); padding:0.15rem 0.55rem; }

/* ============================================================
   CHRONICLES PREVIEW (homepage) & CARDS (full page)
   ============================================================ */
#chronicles-preview { padding:7rem 0; position:relative; z-index:2; }
.chronicles-top { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:3rem; flex-wrap:wrap; gap:1.5rem; }
.post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.chronicles-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; padding-bottom:6rem; }

.post-card { background:var(--bg-card); border:1px solid var(--border-dim); overflow:hidden; transition:border-color 0.4s, transform 0.4s; display:flex; flex-direction:column; position:relative; }
.post-card:hover { border-color:var(--border-gold); transform:translateY(-5px); }
.post-thumb { height:150px; background:var(--bg-raised); position:relative; overflow:hidden; }
.post-thumb-bg { position:absolute; inset:0; background:repeating-linear-gradient(45deg,transparent,transparent 28px,rgba(201,148,58,0.015) 28px,rgba(201,148,58,0.015) 29px); }
.post-glyph { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:3.5rem; opacity:0.07; user-select:none; color:var(--gold-bright); }
.post-cat { position:absolute; top:1rem; left:1rem; font-family:var(--font-label); font-size:0.56rem; font-weight:500; letter-spacing:0.2em; color:var(--gold-mid); border:1px solid var(--gold-dim); padding:0.2rem 0.65rem; background:rgba(6,5,4,0.85); }
.post-body { padding:1.5rem; flex:1; display:flex; flex-direction:column; }
.post-date { font-family:var(--font-label); font-size:0.58rem; font-weight:400; letter-spacing:0.2em; color:var(--text-muted); margin-bottom:0.5rem; }
.post-title { font-family:var(--font-display); font-size:0.95rem; font-weight:600; line-height:1.45; color:var(--text-primary); margin-bottom:0.75rem; transition:color 0.3s; }
.post-card:hover .post-title { color:var(--gold-bright); }
.post-excerpt { font-size:0.83rem; color:var(--text-muted); line-height:1.75; flex:1; margin-bottom:1.25rem; }
.post-more { font-family:var(--font-display); font-size:0.58rem; letter-spacing:0.22em; color:var(--gold-dim); text-transform:uppercase; display:flex; align-items:center; gap:0.5rem; transition:color 0.3s, gap 0.3s; }
.post-more::before { content:""; position:absolute; inset:0; z-index:1; } /* stretches click area over whole card */
.post-card:hover .post-more { color:var(--gold-mid); gap:0.8rem; }
.post-more::after { content:'→'; }

/* ============================================================
   MAILING LIST
   ============================================================ */
#mailing { position:relative; padding:7rem 0; background:linear-gradient(180deg,var(--bg-void),var(--bg-deep) 50%,var(--bg-void)); overflow:hidden; z-index:2; }
.mailing-glow { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:700px; height:350px; background:radial-gradient(ellipse,rgba(130,70,10,0.1),transparent 70%); pointer-events:none; }
.mailing-inner { max-width:640px; margin:0 auto; text-align:center; position:relative; }
.mailing-icon { font-family:var(--font-label); font-size:0.7rem; font-weight:500; letter-spacing:0.42em; color:var(--gold-dim); margin-bottom:1.5rem; display:block; text-transform:uppercase; }
.mailing-title { font-family:var(--font-display); font-size:clamp(1.5rem,4vw,2.2rem); font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-primary); margin-bottom:1rem; }
.mailing-sub { font-family:var(--font-body); font-size:0.9rem; color:var(--text-muted); margin-bottom:2.5rem; line-height:2; }
.ml-wrap { border:1px solid var(--border-gold); padding:2rem; background:rgba(20,16,8,0.4); position:relative; }
.ml-wrap::before { content:'✦'; position:absolute; top:-0.45rem; left:-0.45rem; font-size:0.6rem; color:var(--gold-dim); line-height:1; }
.ml-wrap::after  { content:'✦'; position:absolute; bottom:-0.45rem; right:-0.45rem; font-size:0.6rem; color:var(--gold-dim); line-height:1; }
.ml-row { display:flex; flex-wrap:wrap; }
.ml-input { flex:1; min-width:200px; padding:0.9rem 1.25rem; background:var(--bg-panel); border:1px solid var(--border-dim); border-right:none; color:var(--text-primary); font-family:var(--font-label); font-size:0.8rem; letter-spacing:0.1em; outline:none; transition:border-color 0.3s; }
.ml-input:focus { border-color:var(--gold-dim); }
.ml-input::placeholder { color:var(--text-muted); }
.ml-submit { padding:0.9rem 2rem; background:rgba(232,184,75,0.06); border:1px solid var(--gold-mid); color:var(--gold-bright); font-family:var(--font-display); font-size:0.6rem; letter-spacing:0.28em; text-transform:uppercase; cursor:pointer; transition:all 0.3s; white-space:nowrap; }
.ml-submit:hover { background:rgba(232,184,75,0.12); box-shadow:var(--glow-gold-soft); }
.mailing-note { font-family:var(--font-label); font-size:0.62rem; font-weight:400; color:var(--text-muted); letter-spacing:0.15em; margin-top:1rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { position:relative; z-index:2; padding:3rem 0 2rem; border-top:1px solid var(--border-dim); }
.footer-topglow { position:absolute; top:-1px; left:50%; transform:translateX(-50%); width:350px; height:2px; background:linear-gradient(90deg,transparent,var(--gold-dim),transparent); }
.footer-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:2rem; }
.footer-logo { font-family:var(--font-display); font-size:0.88rem; letter-spacing:0.25em; color:var(--gold-mid); text-transform:uppercase; }
.footer-nav { display:flex; gap:2rem; list-style:none; flex-wrap:wrap; }
.footer-nav a { font-family:var(--font-label); font-size:0.65rem; font-weight:500; letter-spacing:0.2em; color:var(--text-muted); text-transform:uppercase; transition:color 0.3s; }
.footer-nav a:hover { color:var(--gold-bright); }
.footer-socials { display:flex; gap:0.75rem; }
.social-link { width:36px; height:36px; border:1px solid var(--border-dim); display:flex; align-items:center; justify-content:center; font-family:var(--font-label); font-size:0.65rem; font-weight:500; color:var(--text-muted); transition:all 0.3s; }
.social-link:hover { border-color:var(--gold-dim); color:var(--gold-bright); box-shadow:0 0 10px rgba(232,184,75,0.15); }
.footer-copy { width:100%; text-align:center; font-family:var(--font-label); font-size:0.6rem; font-weight:400; color:var(--text-muted); letter-spacing:0.2em; padding-top:2rem; border-top:1px solid var(--border-dim); margin-top:1rem; }
.footer-accent { color:var(--gold-dim); }

/* ============================================================
   INNER PAGE HERO (Books, Chronicles, Contact)
   ============================================================ */
.page-hero {
  padding:10rem 0 5rem; text-align:center; position:relative;
  background:radial-gradient(ellipse 80% 60% at 50% 100%, rgba(120,60,10,0.12), transparent), var(--bg-void);
  z-index:2;
}
.page-hero-title { font-family:var(--font-display); font-size:clamp(2rem,6vw,4rem); font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold-bright); text-shadow:var(--glow-gold); margin-bottom:1rem; }
.page-hero-sub   { font-family:var(--font-label); font-size:0.72rem; font-weight:400; color:var(--text-muted); letter-spacing:0.28em; }

/* ============================================================
   BOOKS PAGE
   ============================================================ */
.series-divider { position:relative; text-align:center; padding:5rem 0 4rem; }
.series-divider::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--border-gold),transparent); }
.series-divider:first-child::before { display:none; }
.series-num   { font-family:var(--font-label); font-size:0.65rem; font-weight:500; letter-spacing:0.45em; color:var(--gold-dim); text-transform:uppercase; margin-bottom:1rem; display:block; }
.series-title { font-family:var(--font-display); font-size:clamp(1.8rem,5vw,3rem); font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold-bright); text-shadow:var(--glow-gold); margin-bottom:0.75rem; }
.series-rule { display:flex; align-items:center; justify-content:center; gap:1rem; margin:0 auto; max-width:280px; }
.series-rule-line { flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--gold-dim)); }
.series-rule-line:last-child { background:linear-gradient(90deg,var(--gold-dim),transparent); }
.series-rule-gem { width:6px; height:6px; border:1px solid var(--gold-mid); transform:rotate(45deg); }
.series-sworn  .series-rule-gem { border-color:var(--crimson-mid); box-shadow:0 0 8px rgba(139,26,26,0.5); }
.series-tribal .series-rule-gem { border-color:var(--jade-mid);   box-shadow:0 0 8px rgba(26,122,82,0.5); }
.series-description { font-family:var(--font-body); font-size:0.9rem; color:var(--text-muted); max-width:560px; margin:1.5rem auto 0; line-height:1.85; }

.book-entry { padding:4.5rem 0; position:relative; }
.book-entry + .book-entry::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:200px; height:1px; background:linear-gradient(90deg,transparent,var(--border-dim),transparent); }
.book-grid { display:grid; grid-template-columns:300px 1fr; gap:5rem; align-items:start; }
.book-grid.reverse { grid-template-columns:1fr 300px; }
.book-grid.reverse .book-cover-col   { order:2; }
.book-grid.reverse .book-content-col { order:1; }

.book-cover-col { position:relative; }
.book-cover-frame { position:relative; padding:10px; background:var(--bg-panel); border:1px solid var(--border-gold); }
.book-cover-frame::before,.book-cover-frame::after { content:'✦'; position:absolute; font-size:0.55rem; color:var(--gold-dim); line-height:1; }
.book-cover-frame::before { top:-0.35rem; left:-0.35rem; }
.book-cover-frame::after  { bottom:-0.35rem; right:-0.35rem; }
.book-cover-frame-tr { position:absolute; top:-0.35rem;    right:-0.35rem; font-size:0.55rem; color:var(--gold-dim); line-height:1; }
.book-cover-frame-bl { position:absolute; bottom:-0.35rem; left:-0.35rem;  font-size:0.55rem; color:var(--gold-dim); line-height:1; }
.cover-glow { position:absolute; bottom:-30px; left:50%; transform:translateX(-50%); width:85%; height:60px; background:radial-gradient(ellipse,rgba(201,148,58,0.18),transparent 70%); filter:blur(12px); pointer-events:none; }

.book-cover-img { width:100%; display:block; aspect-ratio:10/16; object-fit:cover; background:var(--bg-raised); }
.book-cover-placeholder { width:100%; aspect-ratio:10/16; background:linear-gradient(160deg,var(--bg-raised) 0%,var(--bg-panel) 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; border:1px dashed rgba(201,148,58,0.15); }
.placeholder-glyph { font-size:3.5rem; opacity:0.12; color:var(--gold-bright); }
.placeholder-label { font-family:var(--font-label); font-size:0.58rem; letter-spacing:0.28em; color:var(--text-muted); text-transform:uppercase; }
.book-number { position:absolute; top:-14px; left:50%; transform:translateX(-50%); font-family:var(--font-display); font-size:0.58rem; letter-spacing:0.25em; color:var(--gold-mid); text-transform:uppercase; background:var(--bg-void); padding:0 0.75rem; white-space:nowrap; }

.book-content-col { padding-top:0.5rem; }
.book-title { font-family:var(--font-display); font-size:clamp(1.4rem,3vw,2rem); font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-primary); margin-bottom:0.5rem; line-height:1.25; }
.book-subtitle { font-family:var(--font-label); font-size:0.68rem; font-weight:400; letter-spacing:0.25em; color:var(--gold-dim); text-transform:uppercase; margin-bottom:2rem; }
.book-title-rule { width:60px; height:1px; background:linear-gradient(90deg,var(--gold-dim),transparent); margin-bottom:2rem; }
.book-blurb { font-family:var(--font-body); font-size:0.92rem; color:var(--text-secondary); line-height:1.9; margin-bottom:2.5rem; }
.book-meta { display:flex; align-items:center; gap:1.5rem; margin-bottom:2.5rem; flex-wrap:wrap; }
.book-meta-item { font-family:var(--font-label); font-size:0.62rem; font-weight:500; letter-spacing:0.22em; color:var(--text-muted); text-transform:uppercase; display:flex; align-items:center; gap:0.4rem; }
.book-meta-item::before { content:'✦'; font-size:0.45rem; color:var(--gold-dim); }
.book-buttons { display:flex; gap:1rem; flex-wrap:wrap; }
.book-status { display:inline-flex; align-items:center; gap:0.6rem; font-family:var(--font-label); font-size:0.62rem; font-weight:500; letter-spacing:0.2em; color:var(--jade-bright); text-transform:uppercase; border:1px solid rgba(38,196,133,0.3); padding:0.3rem 0.85rem; margin-bottom:2rem; }
.book-status.coming-soon { color:var(--gold-mid); border-color:rgba(201,148,58,0.3); }
.book-status-dot { width:6px; height:6px; border-radius:50%; background:currentColor; animation:pulseDot 2.5s ease-in-out infinite; }

/* ============================================================
   CHRONICLES PAGE — filter bar
   ============================================================ */
.filter-row { display:flex; gap:0.75rem; flex-wrap:wrap; margin-bottom:3rem; }
.filter-btn { font-family:var(--font-label); font-size:0.65rem; font-weight:500; letter-spacing:0.2em; text-transform:uppercase; padding:0.5rem 1.25rem; border:1px solid var(--border-dim); color:var(--text-muted); background:transparent; cursor:pointer; transition:all 0.3s; }
.filter-btn:hover,.filter-btn.active { border-color:var(--gold-dim); color:var(--gold-bright); background:rgba(232,184,75,0.04); }

/* ============================================================
   SINGLE POST
   ============================================================ */
.single-post-wrap { max-width:760px; margin:0 auto; padding:3rem 2rem 7rem; }
.single-post-header { margin-bottom:3rem; }
.single-post-cat { font-family:var(--font-label); font-size:0.6rem; font-weight:500; letter-spacing:0.28em; color:var(--gold-mid); text-transform:uppercase; margin-bottom:1rem; }
.single-post-title { font-family:var(--font-display); font-size:clamp(1.6rem,4vw,2.6rem); font-weight:700; letter-spacing:0.1em; color:var(--text-primary); line-height:1.25; margin-bottom:1.5rem; }
.single-post-meta { font-family:var(--font-label); font-size:0.62rem; font-weight:400; letter-spacing:0.2em; color:var(--text-muted); }
.single-post-divider { width:60px; height:1px; background:linear-gradient(90deg,var(--gold-dim),transparent); margin:2rem 0; }
.single-post-content { font-size:1rem; line-height:1.9; color:var(--text-secondary); }
.single-post-content h2,.single-post-content h3 { font-family:var(--font-display); color:var(--gold-bright); letter-spacing:0.1em; margin:2.5rem 0 1rem; }
.single-post-content p   { margin-bottom:1.5rem; }
.single-post-content a   { color:var(--gold-mid); border-bottom:1px solid var(--gold-dim); transition:color 0.2s; }
.single-post-content a:hover { color:var(--gold-bright); }
.single-post-content blockquote { border-left:2px solid var(--gold-dim); padding-left:1.5rem; color:var(--text-muted); font-style:italic; margin:2rem 0; }
.post-back { display:inline-flex; align-items:center; gap:0.5rem; font-family:var(--font-display); font-size:0.6rem; letter-spacing:0.2em; color:var(--gold-dim); text-transform:uppercase; transition:color 0.3s, gap 0.3s; margin-bottom:3rem; }
.post-back::before { content:'←'; }
.post-back:hover { color:var(--gold-mid); gap:0.8rem; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:5rem; padding-bottom:7rem; align-items:start; }
.contact-info h3 { font-family:var(--font-display); font-size:1.1rem; color:var(--gold-bright); letter-spacing:0.1em; margin-bottom:1rem; }
.contact-info p  { font-size:0.88rem; color:var(--text-muted); line-height:1.85; margin-bottom:1.75rem; }
.social-stack { display:flex; flex-direction:column; gap:0.75rem; }
.social-item { display:flex; align-items:center; gap:1rem; font-family:var(--font-label); font-size:0.68rem; letter-spacing:0.2em; color:var(--text-muted); transition:color 0.3s; }
.social-item:hover { color:var(--gold-bright); }
.social-icon { width:34px; height:34px; border:1px solid var(--border-dim); display:flex; align-items:center; justify-content:center; font-size:0.7rem; transition:all 0.3s; flex-shrink:0; }
.social-item:hover .social-icon { border-color:var(--gold-dim); box-shadow:0 0 8px rgba(232,184,75,0.15); }
.status-card { border:1px solid var(--border-gold); padding:1.25rem; background:rgba(20,16,8,0.4); position:relative; margin-top:2rem; }
.status-card::before { content:'✦'; position:absolute; top:-0.4rem;    left:-0.4rem;  font-size:0.6rem; color:var(--gold-dim); line-height:1; }
.status-card::after  { content:'✦'; position:absolute; bottom:-0.4rem; right:-0.4rem; font-size:0.6rem; color:var(--gold-dim); line-height:1; }
.status-card-label { font-family:var(--font-display); font-size:0.65rem; letter-spacing:0.25em; color:var(--gold-bright); margin-bottom:0.75rem; }
.status-card-text  { display:flex; align-items:center; gap:0.75rem; font-family:var(--font-label); font-size:0.65rem; color:var(--text-muted); letter-spacing:0.12em; font-weight:400; }

.contact-form { display:flex; flex-direction:column; gap:1.25rem; }
.form-group  { display:flex; flex-direction:column; gap:0.5rem; }
.form-label  { font-family:var(--font-label); font-size:0.6rem; font-weight:500; letter-spacing:0.28em; color:var(--text-muted); text-transform:uppercase; }
.form-input,.form-textarea { background:var(--bg-panel); border:1px solid var(--border-dim); padding:0.85rem 1rem; color:var(--text-primary); font-family:var(--font-body); font-size:0.88rem; outline:none; transition:border-color 0.3s, box-shadow 0.3s; resize:none; width:100%; }
.form-input:focus,.form-textarea:focus { border-color:var(--gold-dim); box-shadow:0 0 0 1px var(--gold-trace), 0 0 20px rgba(232,184,75,0.04); }
.form-input::placeholder,.form-textarea::placeholder { color:var(--text-muted); font-family:var(--font-label); font-size:0.76rem; letter-spacing:0.1em; }
.form-textarea { min-height:180px; }
.form-note { font-family:var(--font-label); font-size:0.6rem; font-weight:400; letter-spacing:0.15em; color:var(--text-muted); margin-top:0.75rem; text-align:center; }
.form-message { font-family:var(--font-label); font-size:0.72rem; letter-spacing:0.15em; padding:0.85rem 1rem; margin-bottom:1rem; text-align:center; }
.form-message.success { border:1px solid rgba(38,196,133,0.3); color:var(--jade-bright); background:rgba(26,122,82,0.08); }
.form-message.error   { border:1px solid rgba(224,82,66,0.3);  color:var(--crimson-bright); background:rgba(139,26,26,0.08); }

/* ============================================================
   404 PAGE
   ============================================================ */
.not-found-wrap { min-height:80vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:4rem 2rem; }
.not-found-code { font-family:var(--font-mono); font-size:6rem; color:var(--gold-dim); line-height:1; margin-bottom:1rem; }
.not-found-title { font-family:var(--font-display); font-size:clamp(1.5rem,4vw,2.5rem); letter-spacing:0.15em; color:var(--text-primary); margin-bottom:1rem; text-transform:uppercase; }
.not-found-text { font-family:var(--font-body); font-size:0.9rem; color:var(--text-muted); max-width:400px; margin-bottom:3rem; line-height:1.85; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px) {
  .stats-grid            { grid-template-columns:repeat(2,1fr); }
  .reviews-grid          { grid-template-columns:1fr 1fr; }
  .post-grid,
  .chronicles-grid       { grid-template-columns:1fr 1fr; }
  .contact-grid          { grid-template-columns:1fr; gap:3rem; }
  .book-grid,
  .book-grid.reverse     { grid-template-columns:220px 1fr; gap:3rem; }
}
@media(max-width:680px) {
  .nav-links             { display:none; }
  .nav-hamburger         { display:flex; }
  .realms-grid           { grid-template-columns:1fr; gap:5rem; }
  .reviews-grid          { grid-template-columns:1fr; }
  .post-grid,
  .chronicles-grid       { grid-template-columns:1fr; }
  .dashboard-frame       { padding:1.5rem; }
  .stats-grid            { grid-template-columns:1fr 1fr; }
  .stat-value            { font-size:1rem !important; }
  .hero-corner           { display:none; }
  .ml-input              { border-right:1px solid var(--border-dim); border-bottom:none; }
  .ml-row                { flex-direction:column; }
  .footer-inner          { flex-direction:column; align-items:flex-start; }
  .book-grid,
  .book-grid.reverse     { grid-template-columns:1fr; gap:2.5rem; }
  .book-grid.reverse .book-cover-col,
  .book-grid.reverse .book-content-col { order:unset; }
  .book-cover-col        { max-width:260px; margin:0 auto; }
  .series-divider        { padding:3.5rem 0 3rem; }
  .single-post-wrap      { padding:7rem 1.5rem 5rem !important; } /* extra top clears fixed nav */
}