/* The Night Owl — Nocturnal Editorial Blog
   Dark theme with warm tones, animated night sky
   Avoiding AI slop: no neon, no card soup, no pure black */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Fira+Code:wght@400&display=swap');

/* ---- Custom Properties ---- */
:root {
  --night-deep: #10121c;
  --night-mid: #181b2e;
  --night-surface: #1f2337;
  --night-elevated: #272b42;
  --dusk-purple: #2d2549;
  --text-bright: #e8e4dc;
  --text-body: #bfb9ad;
  --text-muted: #9e9589;
  --text-faint: #7a746b;
  --amber: #d97706;
  --amber-light: #f59e0b;
  --amber-dim: #92400e;
  --ember: #dc2626;
  --sage: #65a30d;
  --lavender: #a78bfa;
  --moon-glow: rgba(253, 244, 220, 0.08);
  --border: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.1);

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Source Sans 3', -apple-system, sans-serif;
  --font-mono: 'Fira Code', monospace;

  --measure: 38rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
}

/* ---- Skip Link ---- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  background: var(--amber);
  color: var(--night-deep);
  padding: 0.5rem 1rem;
  font-weight: 600;
  font-size: 0.875rem;
  z-index: 100;
  border-radius: 0 0 2px 2px;
  text-decoration: none;
}
.skip-link:focus-visible {
  top: 0;
  outline: 2px solid var(--text-bright);
  outline-offset: 2px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }

/* ---- Base ---- */
body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-body);
  background: var(--night-deep);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection {
  background: rgba(217, 119, 6, 0.3);
  color: var(--text-bright);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--amber); text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color 0.2s ease-in-out; }
a:hover { color: var(--amber-light); }

/* Focus-visible: keyboard nav only, consistent across all interactive elements */
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 1px;
}
button:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

/* ============================================
   NIGHT SKY — Animated Background
   ============================================ */

.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    175deg,
    #080a14 0%,
    #0d1025 20%,
    #131729 40%,
    #1a1537 60%,
    #1e1340 80%,
    #131729 100%
  );
  overflow: hidden;
  contain: layout style paint;
}

/* Stars — two layers for depth (reduced gradient count for performance) */
.stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 47px 83px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 131px 29px, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 207px 147px, rgba(255,255,255,0.75), transparent),
    radial-gradient(2px 2px at 389px 211px, rgba(255,255,255,0.9), transparent),
    radial-gradient(1.5px 1.5px at 521px 253px, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 609px 43px, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 697px 189px, rgba(255,255,255,0.65), transparent),
    radial-gradient(2px 2px at 151px 307px, rgba(255,255,255,0.85), transparent),
    radial-gradient(1px 1px at 263px 371px, rgba(255,255,255,0.55), transparent),
    radial-gradient(2px 2px at 567px 401px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.5px 1.5px at 83px 467px, rgba(255,255,255,0.65), transparent),
    radial-gradient(1.5px 1.5px at 347px 557px, rgba(255,255,255,0.7), transparent);
  background-size: 800px 600px;
  animation: twinkle 5s ease-in-out infinite alternate;
  will-change: opacity;
}

.stars--sm {
  background-image:
    radial-gradient(1px 1px at 91px 167px, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 347px 241px, rgba(255,255,255,0.25), transparent),
    radial-gradient(1px 1px at 557px 307px, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 127px 419px, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 587px 461px, rgba(255,255,255,0.25), transparent);
  background-size: 700px 550px;
  animation: twinkle 8s ease-in-out 2s infinite alternate-reverse;
  will-change: opacity;
}

@keyframes twinkle {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
}

/* Moon */
.moon {
  position: absolute;
  top: 4%;
  right: 10%;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 38%, #fefcf4, #f0e8d0 50%, #d8ccb0);
  box-shadow:
    0 0 60px 20px rgba(253, 249, 239, 0.22),
    0 0 140px 60px rgba(253, 249, 239, 0.10),
    0 0 300px 120px rgba(253, 249, 239, 0.04);
  animation: moonFloat 20s ease-in-out infinite;
  will-change: transform;
}

.moon__crater {
  position: absolute;
  border-radius: 50%;
  background: rgba(180, 170, 150, 0.28);
}

.moon__crater--1 { width: 26px; height: 26px; top: 40px; left: 32px; }
.moon__crater--2 { width: 16px; height: 16px; top: 82px; left: 84px; }
.moon__crater--3 { width: 20px; height: 20px; top: 34px; left: 90px; opacity: 0.65; }

@keyframes moonFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
}

/* Mobile-safe moon glow — opacity only, no transform to avoid Safari jitter */
@keyframes moonGlow {
  0% { opacity: 0.85; filter: brightness(0.95); }
  100% { opacity: 1; filter: brightness(1.15); }
}

/* More visible star twinkle for mobile */
@keyframes twinkleMobile {
  0% { opacity: 0.3; }
  50% { opacity: 0.9; }
  100% { opacity: 0.5; }
}

/* Clouds */
.cloud {
  position: absolute;
  background: linear-gradient(90deg, transparent 0%, rgba(180, 175, 200, 0.08) 15%, rgba(200, 195, 215, 0.15) 35%, rgba(210, 205, 220, 0.18) 50%, rgba(200, 195, 215, 0.15) 65%, rgba(180, 175, 200, 0.08) 85%, transparent 100%);
  border-radius: 100px;
  will-change: transform;
}

.cloud--1 {
  width: 280px;
  height: 8px;
  top: 15%;
  left: -280px;
  animation: drift 45s linear infinite;
}

.cloud--2 {
  width: 360px;
  height: 5px;
  top: 28%;
  left: -360px;
  animation: drift 60s linear 8s infinite;
}

.cloud--3 {
  width: 220px;
  height: 6px;
  top: 9%;
  left: -220px;
  animation: drift 50s linear 20s infinite;
}

@keyframes drift {
  from { transform: translateX(0); }
  to { transform: translateX(calc(100vw + 300px)); }
}

/* Bright feature stars — larger, with glow */
.stars--bright {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(3px 3px at 120px 60px, rgba(255,255,255,1), rgba(255,255,255,0.3) 50%, transparent),
    radial-gradient(2.5px 2.5px at 480px 180px, rgba(255,248,220,1), rgba(255,248,220,0.2) 50%, transparent),
    radial-gradient(3px 3px at 750px 320px, rgba(200,220,255,1), rgba(200,220,255,0.3) 50%, transparent),
    radial-gradient(3px 3px at 620px 80px, rgba(255,240,200,1), rgba(255,240,200,0.3) 50%, transparent);
  background-size: 900px 650px;
  animation: twinkleBright 4s ease-in-out infinite alternate;
  will-change: opacity;
}

@keyframes twinkleBright {
  0% { opacity: 0.5; }
  25% { opacity: 0.9; }
  50% { opacity: 0.6; }
  75% { opacity: 1; }
  100% { opacity: 0.7; }
}

/* Nebula — subtle color shifting glow */
.nebula {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 400px at 20% 30%, rgba(88, 28, 135, 0.08), transparent),
    radial-gradient(ellipse 500px 350px at 75% 60%, rgba(30, 58, 138, 0.06), transparent),
    radial-gradient(ellipse 400px 300px at 50% 80%, rgba(127, 29, 29, 0.04), transparent);
  animation: nebulaShift 30s ease-in-out infinite alternate;
  will-change: opacity;
}

@keyframes nebulaShift {
  0% { opacity: 0.6; }
  33% { opacity: 1; }
  66% { opacity: 0.7; }
  100% { opacity: 0.9; }
}

/* Shooting stars */
.shooting-star {
  position: absolute;
  width: 100px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.8), rgba(255,255,255,0.3) 40%, transparent);
  border-radius: 100px;
  opacity: 0;
  transform: rotate(-35deg);
  will-change: transform, opacity;
}

.shooting-star--1 {
  top: 12%;
  left: 30%;
  animation: shoot 8s ease-in 2s infinite;
}

.shooting-star--2 {
  top: 25%;
  left: 60%;
  width: 80px;
  animation: shoot 12s ease-in 6s infinite;
}

.shooting-star--3 {
  top: 8%;
  left: 75%;
  width: 120px;
  animation: shoot 15s ease-in 10s infinite;
}

@keyframes shoot {
  0% {
    opacity: 0;
    transform: rotate(-35deg) translateX(0);
  }
  2% {
    opacity: 1;
  }
  6% {
    opacity: 0;
    transform: rotate(-35deg) translateX(300px);
  }
  100% {
    opacity: 0;
    transform: rotate(-35deg) translateX(300px);
  }
}

/* Enhanced clouds — more visible, wispy */
.cloud--4 {
  position: absolute;
  background: linear-gradient(90deg, transparent 0%, rgba(180, 175, 200, 0.08) 15%, rgba(200, 195, 215, 0.15) 35%, rgba(210, 205, 220, 0.18) 50%, rgba(200, 195, 215, 0.15) 65%, rgba(180, 175, 200, 0.08) 85%, transparent 100%);
  border-radius: 100px;
  will-change: transform;
  width: 400px;
  height: 7px;
  top: 20%;
  left: -400px;
  animation: drift 55s linear 15s infinite;
}

/* Forest silhouettes — SVG-based tree shapes */
.forest {
  position: absolute;
  bottom: 0;
  pointer-events: none;
  contain: layout style;
}

.forest--left {
  left: 0;
  width: 450px;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 450 900' preserveAspectRatio='xMinYMax meet'%3E%3Cpolygon points='50,15 -30,900 130,900' fill='%23060810'/%3E%3Cpolygon points='50,15 14,105 86,105' fill='%23060810'/%3E%3Cpolygon points='50,80 17,170 83,170' fill='%23060810'/%3E%3Cpolygon points='50,145 20,230 80,230' fill='%23060810'/%3E%3Cpolygon points='50,210 23,288 77,288' fill='%23060810'/%3E%3Cpolygon points='50,270 25,342 75,342' fill='%23060810'/%3E%3Cpolygon points='50,326 27,392 73,392' fill='%23060810'/%3E%3Cpolygon points='50,378 29,440 71,440' fill='%23060810'/%3E%3Cpolygon points='50,425 30,485 70,485' fill='%23060810'/%3E%3Cpolygon points='50,468 31,524 69,524' fill='%23060810'/%3E%3Crect x='46' y='15' width='8' height='885' fill='%23060810'/%3E%3Cpolygon points='150,50 78,900 222,900' fill='%23080a14'/%3E%3Cpolygon points='150,50 112,140 188,140' fill='%23080a14'/%3E%3Cpolygon points='150,115 118,200 182,200' fill='%23080a14'/%3E%3Cpolygon points='150,178 122,258 178,258' fill='%23080a14'/%3E%3Cpolygon points='150,238 126,314 174,314' fill='%23080a14'/%3E%3Cpolygon points='150,295 128,367 172,367' fill='%23080a14'/%3E%3Cpolygon points='150,348 130,416 170,416' fill='%23080a14'/%3E%3Cpolygon points='150,398 132,462 168,462' fill='%23080a14'/%3E%3Crect x='146' y='50' width='8' height='850' fill='%23080a14'/%3E%3Cpolygon points='262,115 200,900 324,900' fill='%23090b16'/%3E%3Cpolygon points='262,115 228,200 296,200' fill='%23090b16'/%3E%3Cpolygon points='262,178 232,258 292,258' fill='%23090b16'/%3E%3Cpolygon points='262,238 235,315 289,315' fill='%23090b16'/%3E%3Cpolygon points='262,295 237,368 287,368' fill='%23090b16'/%3E%3Cpolygon points='262,348 240,416 284,416' fill='%23090b16'/%3E%3Crect x='258' y='115' width='7' height='785' fill='%23090b16'/%3E%3Cellipse cx='355' cy='280' rx='58' ry='52' fill='%230a0c16'/%3E%3Cellipse cx='372' cy='258' rx='46' ry='40' fill='%23080a14'/%3E%3Cellipse cx='336' cy='268' rx='36' ry='33' fill='%23090b15'/%3E%3Crect x='352' y='328' width='7' height='572' fill='%230a0c16'/%3E%3Cpolygon points='412,230 392,900 432,900' fill='%230b0d18' opacity='0.85'/%3E%3Cpolygon points='412,230 396,305 428,305' fill='%230b0d18' opacity='0.85'/%3E%3Cpolygon points='412,290 400,360 424,360' fill='%230b0d18' opacity='0.85'/%3E%3Cpolygon points='412,345 402,410 422,410' fill='%230b0d18' opacity='0.85'/%3E%3Crect x='409' y='230' width='6' height='670' fill='%230b0d18' opacity='0.85'/%3E%3Cellipse cx='50' cy='870' rx='80' ry='35' fill='%23060810'/%3E%3Cellipse cx='160' cy='882' rx='65' ry='26' fill='%23080a14'/%3E%3Cellipse cx='270' cy='890' rx='55' ry='20' fill='%23090b15'/%3E%3Cellipse cx='380' cy='894' rx='45' ry='16' fill='%230a0c16' opacity='0.8'/%3E%3Cpolygon points='95,35 52,900 138,900' fill='%23060810'/%3E%3Cpolygon points='95,35 66,128 124,128' fill='%23060810'/%3E%3Cpolygon points='95,108 70,198 120,198' fill='%23060810'/%3E%3Cpolygon points='95,178 73,262 117,262' fill='%23060810'/%3E%3Crect x='92' y='35' width='6' height='865' fill='%23060810'/%3E%3Cpolygon points='205,82 168,900 242,900' fill='%23070912'/%3E%3Cpolygon points='205,82 180,172 230,172' fill='%23070912'/%3E%3Cpolygon points='205,152 184,238 226,238' fill='%23070912'/%3E%3Cpolygon points='205,218 186,298 224,298' fill='%23070912'/%3E%3Crect x='202' y='82' width='6' height='818' fill='%23070912'/%3E%3Cpolygon points='310,148 280,900 340,900' fill='%23080a14'/%3E%3Cpolygon points='310,148 288,232 332,232' fill='%23080a14'/%3E%3Cpolygon points='310,216 292,295 328,295' fill='%23080a14'/%3E%3Crect x='307' y='148' width='6' height='752' fill='%23080a14'/%3E%3Cpolygon points='442,195 422,900 462,900' fill='%230a0c16' opacity='0.8'/%3E%3Cpolygon points='442,195 427,268 457,268' fill='%230a0c16' opacity='0.8'/%3E%3Cpolygon points='442,252 430,322 454,322' fill='%230a0c16' opacity='0.8'/%3E%3Crect x='440' y='195' width='5' height='705' fill='%230a0c16' opacity='0.8'/%3E%3Cline x1='83' y1='170' x2='113' y2='170' stroke='%23060810' stroke-width='3' stroke-linecap='round'/%3E%3Cg transform='translate(113,157)'%3E%3Cellipse cx='0' cy='0' rx='10' ry='13' fill='%23060810'/%3E%3Cpolygon points='-6,9 6,9 4,18 -4,18' fill='%23060810'/%3E%3Ccircle cx='0' cy='-13' r='9' fill='%23060810'/%3E%3Cpolygon points='-3,-21 -7,-29 -1,-22' fill='%23060810'/%3E%3Cpolygon points='3,-21 7,-29 1,-22' fill='%23060810'/%3E%3Ccircle cx='-3.5' cy='-13' r='3.2' fill='%23fbbf24'/%3E%3Ccircle cx='3.5' cy='-13' r='3.2' fill='%23fbbf24'/%3E%3Ccircle cx='-3.5' cy='-13' r='6' fill='%23fbbf24' opacity='0.15'/%3E%3Ccircle cx='3.5' cy='-13' r='6' fill='%23fbbf24' opacity='0.15'/%3E%3Ccircle cx='-3.5' cy='-13' r='1.4' fill='%23030408'/%3E%3Ccircle cx='3.5' cy='-13' r='1.4' fill='%23030408'/%3E%3Cline x1='-4' y1='11' x2='-7' y2='15' stroke='%23060810' stroke-width='2'/%3E%3Cline x1='-2' y1='11' x2='-2' y2='16' stroke='%23060810' stroke-width='2'/%3E%3Cline x1='2' y1='11' x2='4' y2='15' stroke='%23060810' stroke-width='2'/%3E%3Cline x1='4' y1='11' x2='7' y2='16' stroke='%23060810' stroke-width='2'/%3E%3C/g%3E%3Cline x1='188' y1='140' x2='218' y2='140' stroke='%23060810' stroke-width='3' stroke-linecap='round'/%3E%3Cg transform='translate(218,130)' opacity='0.85'%3E%3Cellipse cx='0' cy='0' rx='8' ry='10' fill='%23060810'/%3E%3Cpolygon points='-5,7 5,7 3,14 -3,14' fill='%23060810'/%3E%3Ccircle cx='0' cy='-10' r='7' fill='%23060810'/%3E%3Cpolygon points='-2,-16 -5,-23 -1,-17' fill='%23060810'/%3E%3Cpolygon points='2,-16 5,-23 1,-17' fill='%23060810'/%3E%3Ccircle cx='-2.8' cy='-10' r='2.6' fill='%23fbbf24'/%3E%3Ccircle cx='2.8' cy='-10' r='2.6' fill='%23fbbf24'/%3E%3Ccircle cx='-2.8' cy='-10' r='5' fill='%23fbbf24' opacity='0.12'/%3E%3Ccircle cx='2.8' cy='-10' r='5' fill='%23fbbf24' opacity='0.12'/%3E%3Ccircle cx='-2.8' cy='-10' r='1.1' fill='%23030408'/%3E%3Ccircle cx='2.8' cy='-10' r='1.1' fill='%23030408'/%3E%3Cline x1='-3' y1='8' x2='-5' y2='12' stroke='%23060810' stroke-width='1.5'/%3E%3Cline x1='0' y1='8' x2='0' y2='13' stroke='%23060810' stroke-width='1.5'/%3E%3Cline x1='3' y1='8' x2='5' y2='12' stroke='%23060810' stroke-width='1.5'/%3E%3C/g%3E%3Cline x1='296' y1='200' x2='326' y2='200' stroke='%23060810' stroke-width='3' stroke-linecap='round'/%3E%3Cg transform='translate(326,193)' opacity='0.5'%3E%3Cellipse cx='0' cy='0' rx='5' ry='7' fill='%230a0d1a'/%3E%3Ccircle cx='0' cy='-8' r='5' fill='%230a0d1a'/%3E%3Ccircle cx='-1.8' cy='-8' r='2' fill='%23fbbf24' opacity='0.9'/%3E%3Ccircle cx='1.8' cy='-8' r='2' fill='%23fbbf24' opacity='0.9'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 450px 100%;
  background-repeat: no-repeat;
  background-position: left bottom;
}

.forest--right {
  right: 0;
  width: 430px;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 430 900' preserveAspectRatio='xMaxYMax meet'%3E%3Cpolygon points='380,15 300,900 460,900' fill='%23060810'/%3E%3Cpolygon points='380,15 344,105 416,105' fill='%23060810'/%3E%3Cpolygon points='380,80 347,170 413,170' fill='%23060810'/%3E%3Cpolygon points='380,145 350,230 410,230' fill='%23060810'/%3E%3Cpolygon points='380,210 353,288 407,288' fill='%23060810'/%3E%3Cpolygon points='380,270 355,342 405,342' fill='%23060810'/%3E%3Cpolygon points='380,326 357,392 403,392' fill='%23060810'/%3E%3Cpolygon points='380,378 359,440 401,440' fill='%23060810'/%3E%3Cpolygon points='380,425 360,485 400,485' fill='%23060810'/%3E%3Cpolygon points='380,468 361,524 399,524' fill='%23060810'/%3E%3Crect x='376' y='15' width='8' height='885' fill='%23060810'/%3E%3Cpolygon points='280,50 208,900 352,900' fill='%23080a14'/%3E%3Cpolygon points='280,50 242,140 318,140' fill='%23080a14'/%3E%3Cpolygon points='280,115 248,200 312,200' fill='%23080a14'/%3E%3Cpolygon points='280,178 252,258 308,258' fill='%23080a14'/%3E%3Cpolygon points='280,238 256,314 304,314' fill='%23080a14'/%3E%3Cpolygon points='280,295 258,367 302,367' fill='%23080a14'/%3E%3Cpolygon points='280,348 260,416 300,416' fill='%23080a14'/%3E%3Cpolygon points='280,398 262,462 298,462' fill='%23080a14'/%3E%3Crect x='276' y='50' width='8' height='850' fill='%23080a14'/%3E%3Cpolygon points='168,115 106,900 230,900' fill='%23090b16'/%3E%3Cpolygon points='168,115 134,200 202,200' fill='%23090b16'/%3E%3Cpolygon points='168,178 138,258 198,258' fill='%23090b16'/%3E%3Cpolygon points='168,238 141,315 195,315' fill='%23090b16'/%3E%3Cpolygon points='168,295 143,368 193,368' fill='%23090b16'/%3E%3Cpolygon points='168,348 145,416 191,416' fill='%23090b16'/%3E%3Crect x='164' y='115' width='7' height='785' fill='%23090b16'/%3E%3Cellipse cx='75' cy='280' rx='58' ry='52' fill='%230a0c16'/%3E%3Cellipse cx='58' cy='258' rx='46' ry='40' fill='%23080a14'/%3E%3Cellipse cx='94' cy='268' rx='36' ry='33' fill='%23090b15'/%3E%3Crect x='72' y='328' width='7' height='572' fill='%230a0c16'/%3E%3Cpolygon points='18,230 -2,900 38,900' fill='%230b0d18' opacity='0.85'/%3E%3Cpolygon points='18,230 2,305 34,305' fill='%230b0d18' opacity='0.85'/%3E%3Cpolygon points='18,290 4,360 32,360' fill='%230b0d18' opacity='0.85'/%3E%3Cpolygon points='18,345 6,410 30,410' fill='%230b0d18' opacity='0.85'/%3E%3Crect x='15' y='230' width='6' height='670' fill='%230b0d18' opacity='0.85'/%3E%3Cellipse cx='380' cy='870' rx='80' ry='35' fill='%23060810'/%3E%3Cellipse cx='270' cy='882' rx='65' ry='26' fill='%23080a14'/%3E%3Cellipse cx='160' cy='890' rx='55' ry='20' fill='%23090b15'/%3E%3Cellipse cx='50' cy='894' rx='45' ry='16' fill='%230a0c16' opacity='0.8'/%3E%3Cpolygon points='335,35 292,900 378,900' fill='%23060810'/%3E%3Cpolygon points='335,35 306,128 364,128' fill='%23060810'/%3E%3Cpolygon points='335,108 310,198 360,198' fill='%23060810'/%3E%3Cpolygon points='335,178 313,262 357,262' fill='%23060810'/%3E%3Crect x='332' y='35' width='6' height='865' fill='%23060810'/%3E%3Cpolygon points='225,82 188,900 262,900' fill='%23070912'/%3E%3Cpolygon points='225,82 200,172 250,172' fill='%23070912'/%3E%3Cpolygon points='225,152 204,238 246,238' fill='%23070912'/%3E%3Cpolygon points='225,218 206,298 244,298' fill='%23070912'/%3E%3Crect x='222' y='82' width='6' height='818' fill='%23070912'/%3E%3Cpolygon points='120,148 90,900 150,900' fill='%23080a14'/%3E%3Cpolygon points='120,148 98,232 142,232' fill='%23080a14'/%3E%3Cpolygon points='120,216 102,295 138,295' fill='%23080a14'/%3E%3Crect x='117' y='148' width='6' height='752' fill='%23080a14'/%3E%3Cpolygon points='-12,195 -32,900 8,900' fill='%230a0c16' opacity='0.8'/%3E%3Cpolygon points='-12,195 -27,268 3,268' fill='%230a0c16' opacity='0.8'/%3E%3Crect x='-14' y='195' width='5' height='705' fill='%230a0c16' opacity='0.8'/%3E%3Cline x1='347' y1='170' x2='317' y2='170' stroke='%2314171f' stroke-width='3' stroke-linecap='round'/%3E%3Cg transform='translate(317,157)'%3E%3Cellipse cx='0' cy='0' rx='10' ry='13' fill='%2314171f'/%3E%3Cpolygon points='-6,9 6,9 4,18 -4,18' fill='%2314171f'/%3E%3Ccircle cx='0' cy='-13' r='9' fill='%2314171f'/%3E%3Cpolygon points='-3,-21 -7,-29 -1,-22' fill='%2314171f'/%3E%3Cpolygon points='3,-21 7,-29 1,-22' fill='%2314171f'/%3E%3Ccircle cx='-3.5' cy='-13' r='3.2' fill='%23fbbf24'/%3E%3Ccircle cx='3.5' cy='-13' r='3.2' fill='%23fbbf24'/%3E%3Ccircle cx='-3.5' cy='-13' r='6' fill='%23fbbf24' opacity='0.15'/%3E%3Ccircle cx='3.5' cy='-13' r='6' fill='%23fbbf24' opacity='0.15'/%3E%3Ccircle cx='-3.5' cy='-13' r='1.4' fill='%23030408'/%3E%3Ccircle cx='3.5' cy='-13' r='1.4' fill='%23030408'/%3E%3Cline x1='-4' y1='11' x2='-7' y2='15' stroke='%2314171f' stroke-width='2'/%3E%3Cline x1='-2' y1='11' x2='-2' y2='16' stroke='%2314171f' stroke-width='2'/%3E%3Cline x1='2' y1='11' x2='4' y2='15' stroke='%2314171f' stroke-width='2'/%3E%3Cline x1='4' y1='11' x2='7' y2='16' stroke='%2314171f' stroke-width='2'/%3E%3C/g%3E%3Cline x1='242' y1='140' x2='212' y2='140' stroke='%2314171f' stroke-width='3' stroke-linecap='round'/%3E%3Cg transform='translate(212,130)' opacity='0.85'%3E%3Cellipse cx='0' cy='0' rx='8' ry='10' fill='%2314171f'/%3E%3Cpolygon points='-5,7 5,7 3,14 -3,14' fill='%2314171f'/%3E%3Ccircle cx='0' cy='-10' r='7' fill='%2314171f'/%3E%3Cpolygon points='-2,-16 -5,-23 -1,-17' fill='%2314171f'/%3E%3Cpolygon points='2,-16 5,-23 1,-17' fill='%2314171f'/%3E%3Ccircle cx='-2.8' cy='-10' r='2.6' fill='%23fbbf24'/%3E%3Ccircle cx='2.8' cy='-10' r='2.6' fill='%23fbbf24'/%3E%3Ccircle cx='-2.8' cy='-10' r='5' fill='%23fbbf24' opacity='0.12'/%3E%3Ccircle cx='2.8' cy='-10' r='5' fill='%23fbbf24' opacity='0.12'/%3E%3Ccircle cx='-2.8' cy='-10' r='1.1' fill='%23030408'/%3E%3Ccircle cx='2.8' cy='-10' r='1.1' fill='%23030408'/%3E%3Cline x1='-3' y1='8' x2='-5' y2='12' stroke='%2314171f' stroke-width='1.5'/%3E%3Cline x1='0' y1='8' x2='0' y2='13' stroke='%2314171f' stroke-width='1.5'/%3E%3Cline x1='3' y1='8' x2='5' y2='12' stroke='%2314171f' stroke-width='1.5'/%3E%3C/g%3E%3Cline x1='134' y1='200' x2='104' y2='200' stroke='%2314171f' stroke-width='3' stroke-linecap='round'/%3E%3Cg transform='translate(104,193)' opacity='0.5'%3E%3Cellipse cx='0' cy='0' rx='5' ry='7' fill='%230a0d1a'/%3E%3Ccircle cx='0' cy='-8' r='5' fill='%230a0d1a'/%3E%3Ccircle cx='-1.8' cy='-8' r='2' fill='%23fbbf24' opacity='0.9'/%3E%3Ccircle cx='1.8' cy='-8' r='2' fill='%23fbbf24' opacity='0.9'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 430px 100%;
  background-repeat: no-repeat;
  background-position: right bottom;
}

.forest--ground {
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 L0,70 Q80,50 160,62 Q280,42 400,55 Q520,38 650,52 Q780,40 900,50 Q1050,35 1200,48 Q1320,42 1400,55 L1400,100 Z' fill='%23060810' opacity='0.5'/%3E%3Cpath d='M0,100 L0,80 Q120,68 250,75 Q420,60 600,72 Q780,58 950,68 Q1120,60 1300,70 L1400,72 L1400,100 Z' fill='%23060810' opacity='0.3'/%3E%3C/svg%3E");
  background-size: 100% 100px;
  background-repeat: no-repeat;
  background-position: bottom;
}

.forest--canopy {
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 900' preserveAspectRatio='none'%3E%3Cpath d='M0,0 Q80,22 180,16 Q260,20 360,8 Q440,16 530,5 Q600,12 640,3 L640,0 Z' fill='%23060810'/%3E%3Cpath d='M0,0 L0,110 Q50,95 100,78 Q160,92 220,68 Q280,82 340,60 Q400,74 460,52 Q520,66 570,44 Q610,56 640,36 Q610,42 570,30 Q520,46 460,32 Q400,54 340,38 Q280,60 220,44 Q160,68 100,52 Q50,72 0,55 Z' fill='%23060810'/%3E%3Cpath d='M0,22 Q70,14 150,20 Q230,12 320,18 Q410,10 500,16 Q570,8 630,14 Q570,18 500,10 Q410,16 320,10 Q230,18 150,12 Q70,20 0,14 Z' fill='%23070911' opacity='0.9'/%3E%3Cpath d='M0,55 Q90,46 180,60 Q260,48 350,65 Q430,52 510,70 Q570,58 620,74 Q570,68 510,56 Q430,46 350,58 Q260,42 180,52 Q90,40 0,46 Z' fill='%23070911' opacity='0.8'/%3E%3Cpath d='M0,78 Q100,68 200,82 Q300,70 400,85 Q480,72 560,88 Q600,76 640,90 Q600,84 560,74 Q480,62 400,76 Q300,60 200,72 Q100,58 0,68 Z' fill='%23080a14' opacity='0.7'/%3E%3Cellipse cx='60' cy='65' rx='50' ry='22' fill='%23060810' opacity='0.95'/%3E%3Cellipse cx='160' cy='50' rx='42' ry='18' fill='%23070911' opacity='0.85'/%3E%3Cellipse cx='268' cy='68' rx='38' ry='16' fill='%23080a14' opacity='0.75'/%3E%3Cellipse cx='380' cy='56' rx='34' ry='15' fill='%23090b15' opacity='0.65'/%3E%3Cellipse cx='480' cy='72' rx='30' ry='13' fill='%230a0c16' opacity='0.55'/%3E%3Cellipse cx='570' cy='60' rx='28' ry='12' fill='%230a0c16' opacity='0.45'/%3E%3Cellipse cx='640' cy='78' rx='24' ry='10' fill='%230b0d18' opacity='0.35'/%3E%3Cpath d='M1400,0 Q1320,22 1220,16 Q1140,20 1040,8 Q960,16 870,5 Q800,12 760,3 L760,0 Z' fill='%23060810'/%3E%3Cpath d='M1400,0 L1400,110 Q1350,95 1300,78 Q1240,92 1180,68 Q1120,82 1060,60 Q1000,74 940,52 Q880,66 830,44 Q790,56 760,36 Q790,42 830,30 Q880,46 940,32 Q1000,54 1060,38 Q1120,60 1180,44 Q1240,68 1300,52 Q1350,72 1400,55 Z' fill='%23060810'/%3E%3Cpath d='M1400,22 Q1330,14 1250,20 Q1170,12 1080,18 Q990,10 900,16 Q830,8 770,14 Q830,18 900,10 Q990,16 1080,10 Q1170,18 1250,12 Q1330,20 1400,14 Z' fill='%23070911' opacity='0.9'/%3E%3Cpath d='M1400,55 Q1310,46 1220,60 Q1140,48 1050,65 Q970,52 890,70 Q830,58 780,74 Q830,68 890,56 Q970,46 1050,58 Q1140,42 1220,52 Q1310,40 1400,46 Z' fill='%23070911' opacity='0.8'/%3E%3Cpath d='M1400,78 Q1300,68 1200,82 Q1100,70 1000,85 Q920,72 840,88 Q800,76 760,90 Q800,84 840,74 Q920,62 1000,76 Q1100,60 1200,72 Q1300,58 1400,68 Z' fill='%23080a14' opacity='0.7'/%3E%3Cellipse cx='1340' cy='65' rx='50' ry='22' fill='%23060810' opacity='0.95'/%3E%3Cellipse cx='1240' cy='50' rx='42' ry='18' fill='%23070911' opacity='0.85'/%3E%3Cellipse cx='1132' cy='68' rx='38' ry='16' fill='%23080a14' opacity='0.75'/%3E%3Cellipse cx='1020' cy='56' rx='34' ry='15' fill='%23090b15' opacity='0.65'/%3E%3Cellipse cx='920' cy='72' rx='30' ry='13' fill='%230a0c16' opacity='0.55'/%3E%3Cellipse cx='830' cy='60' rx='28' ry='12' fill='%230a0c16' opacity='0.45'/%3E%3Cellipse cx='760' cy='78' rx='24' ry='10' fill='%230b0d18' opacity='0.35'/%3E%3Cpath d='M640,10 Q680,16 720,10 Q760,16 800,8' stroke='%23070911' stroke-width='3' fill='none' opacity='0.55'/%3E%3Cpath d='M650,26 Q700,20 750,28 Q790,22 820,30' stroke='%23080a14' stroke-width='2' fill='none' opacity='0.4'/%3E%3Cellipse cx='700' cy='14' rx='12' ry='5' fill='%23080a14' opacity='0.4' transform='rotate(12,700,14)'/%3E%3Cellipse cx='760' cy='20' rx='10' ry='4' fill='%23090b15' opacity='0.3' transform='rotate(-8,760,20)'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: top;
}

/* Background tree line — full width mid-ground depth layer */
.forest--bg {
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 900' preserveAspectRatio='none'%3E%3Cpolygon points='80,400 50,900 110,900' fill='%23060810'/%3E%3Cpolygon points='80,400 63,462 97,462' fill='%23060810'/%3E%3Cpolygon points='80,452 65,512 95,512' fill='%23060810'/%3E%3Cpolygon points='180,418 150,900 210,900' fill='%23070912'/%3E%3Cpolygon points='180,418 163,480 197,480' fill='%23070912'/%3E%3Cpolygon points='180,472 165,530 195,530' fill='%23070912'/%3E%3Cpolygon points='295,390 265,900 325,900' fill='%23060810'/%3E%3Cpolygon points='295,390 278,452 312,452' fill='%23060810'/%3E%3Cpolygon points='295,444 280,504 310,504' fill='%23060810'/%3E%3Cpolygon points='405,412 375,900 435,900' fill='%23070912'/%3E%3Cpolygon points='405,412 388,474 422,474' fill='%23070912'/%3E%3Cpolygon points='405,465 390,524 420,524' fill='%23070912'/%3E%3Cpolygon points='518,396 488,900 548,900' fill='%23060810'/%3E%3Cpolygon points='518,396 501,460 535,460' fill='%23060810'/%3E%3Cpolygon points='518,450 503,510 533,510' fill='%23060810'/%3E%3Cpolygon points='635,420 605,900 665,900' fill='%23070912'/%3E%3Cpolygon points='635,420 618,482 652,482' fill='%23070912'/%3E%3Cpolygon points='635,474 620,532 650,532' fill='%23070912'/%3E%3Cpolygon points='748,398 718,900 778,900' fill='%23060810'/%3E%3Cpolygon points='748,398 731,462 765,462' fill='%23060810'/%3E%3Cpolygon points='748,452 733,512 763,512' fill='%23060810'/%3E%3Cpolygon points='858,415 828,900 888,900' fill='%23070912'/%3E%3Cpolygon points='858,415 841,477 875,477' fill='%23070912'/%3E%3Cpolygon points='858,468 843,528 873,528' fill='%23070912'/%3E%3Cpolygon points='968,392 938,900 998,900' fill='%23060810'/%3E%3Cpolygon points='968,392 951,456 985,456' fill='%23060810'/%3E%3Cpolygon points='968,446 953,506 983,506' fill='%23060810'/%3E%3Cpolygon points='1078,418 1048,900 1108,900' fill='%23070912'/%3E%3Cpolygon points='1078,418 1061,480 1095,480' fill='%23070912'/%3E%3Cpolygon points='1078,471 1063,531 1093,531' fill='%23070912'/%3E%3Cpolygon points='1190,400 1160,900 1220,900' fill='%23060810'/%3E%3Cpolygon points='1190,400 1173,464 1207,464' fill='%23060810'/%3E%3Cpolygon points='1190,454 1175,514 1205,514' fill='%23060810'/%3E%3Cpolygon points='1310,415 1280,900 1340,900' fill='%23070912'/%3E%3Cpolygon points='1310,415 1293,477 1327,477' fill='%23070912'/%3E%3Cpolygon points='1310,468 1295,528 1325,528' fill='%23070912'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: bottom;
  pointer-events: none;
}

/* Dark atmospheric vignette — trees bleed into darkness at edges */
.sky::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    linear-gradient(to right, rgba(2, 3, 8, 0.95) 0%, rgba(2, 3, 8, 0.75) 14%, rgba(2, 3, 8, 0.4) 28%, rgba(2, 3, 8, 0.1) 40%, transparent 50%),
    linear-gradient(to left, rgba(2, 3, 8, 0.95) 0%, rgba(2, 3, 8, 0.75) 14%, rgba(2, 3, 8, 0.4) 28%, rgba(2, 3, 8, 0.1) 40%, transparent 50%),
    linear-gradient(to bottom, rgba(2, 3, 8, 0.4) 0%, rgba(2, 3, 8, 0.15) 10%, transparent 20%);
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 48rem) {
  .forest--left { width: 150px; opacity: 0.75; background-size: 150px 100%; }
  .forest--right { width: 130px; opacity: 0.75; background-size: 130px 100%; }
  .forest--canopy { opacity: 0.65; }
}

/* ============================================
   LAYOUT — Everything over the sky
   ============================================ */

.site-header,
.hero,
.featured-picks,
.articles-section,
.newsletter,
.spotlight,
.about,
.ad-slot,
.site-footer,
.article-header,
.article-content,
.related {
  position: relative;
  z-index: 1;
}

/* ---- Site Header ---- */
.site-header {
  padding: var(--space-xl) var(--space-lg);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.site-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--text-bright);
  text-decoration: none;
  letter-spacing: -0.02em;
  line-height: 1.1;
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.site-title__owl {
  font-size: 1.2em;
  animation: owlBob 4s ease-in-out infinite;
  will-change: transform;
}

@keyframes owlBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.site-title:hover { color: var(--amber); }

.site-nav {
  display: flex;
  gap: var(--space-lg);
  font-size: 0.9375rem;
  font-weight: 500;
}

.site-nav a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
  position: relative;
  /* 44px touch target on mobile */
  padding: 0.5rem 0;
}

.site-nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--amber);
  transition: width 0.3s ease;
}

.site-nav a:hover { color: var(--text-bright); }
.site-nav a:hover::after { width: 100%; }

/* ---- Hero / Feature ---- */
.hero {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-lg) var(--space-2xl);
}

.hero__slideshow {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 2.2 / 1;
  background: rgba(31, 35, 55, 0.6);
  margin-bottom: var(--space-md);
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
  display: block;
  text-decoration: none;
  color: inherit;
}

.hero__slide--active {
  opacity: 1;
}

.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.45);
  transition: filter 0.4s ease, transform 8s ease;
}

.hero__slide img[src*="header.png"] {
  object-position: right center;
}

.hero__slide--active img {
  transform: scale(1.04);
}

.hero__slide:hover img {
  filter: brightness(0.55);
}

.hero__slide-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-2xl) var(--space-xl) var(--space-xl);
  background: linear-gradient(to top, rgba(4, 5, 10, 0.9) 0%, rgba(4, 5, 10, 0.5) 50%, transparent 100%);
}

.hero__label {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--amber);
  margin-bottom: var(--space-sm);
}

.hero__slide-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 900;
  line-height: 1.15;
  color: var(--text-bright);
  max-width: 38rem;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-sm);
}

.hero__slide-excerpt {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-body);
  max-width: 36rem;
  margin: 0 0 var(--space-sm);
}

.hero__slide-meta {
  font-size: 0.8125rem;
  color: var(--amber);
  font-weight: 500;
}

.hero__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: var(--space-md);
}

.hero__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}

.hero__dot:hover {
  border-color: rgba(255, 255, 255, 0.6);
  transform: scale(1.2);
}

.hero__dot--active {
  background: var(--amber);
  border-color: var(--amber);
}

.hero__rule {
  border: none;
  height: 1px;
  background: var(--border);
  margin-top: var(--space-2xl);
}

@media (max-width: 48rem) {
  .hero__slideshow { aspect-ratio: 1.4 / 1; }
  .hero__slide-excerpt { display: none; }
  .hero__slide-title { font-size: 1.25rem; }
}

/* ---- Article Sections ---- */
.articles-section {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg);
}

.articles-section:nth-of-type(even) {
  background: rgba(24, 27, 46, 0.3);
  padding: var(--space-2xl) var(--space-lg);
  border-radius: 0;
}

.articles-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.articles-section__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-bright);
}

.articles-section__link {
  font-size: 0.875rem;
  font-weight: 500;
}

.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: var(--space-2xl) var(--space-xl);
}

/* ---- Article Items ---- */
.article-item {
  background: rgba(31, 35, 55, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.4s ease,
              border-color 0.3s ease;
}

.article-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(217, 119, 6, 0.08);
  border-color: rgba(217, 119, 6, 0.2);
}

.article-item__img-wrap {
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}

.article-item__img-wrap img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
}

.article-item__img-wrap img[src*="header.png"] {
  object-position: right center;
}

.article-item:hover .article-item__img-wrap img {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.article-item__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.article-item__label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-sm);
}

.article-item__label--production { color: var(--amber); }
.article-item__label--business { color: var(--sage); }
.article-item__label--culture { color: var(--lavender); }

.article-item__title {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: var(--space-sm);
  letter-spacing: -0.01em;
}

.article-item__title a {
  color: var(--text-bright);
  text-decoration: none;
  transition: color 0.2s;
}

.article-item__title a:hover { color: var(--amber); }

.article-item__excerpt {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-md);
  flex: 1;
}

.article-item__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.article-item__meta {
  font-size: 0.75rem;
  color: var(--text-faint);
}

.article-item__read {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.3em;
  transition: color 0.2s ease;
}

.article-item__read:hover {
  color: var(--amber);
}

.article-item__read-arrow {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.article-item:hover .article-item__read-arrow {
  transform: translateX(4px);
}

/* ---- Newsletter CTA ---- */
.newsletter {
  background:
    radial-gradient(ellipse 600px 300px at 50% 100%, rgba(217, 119, 6, 0.08), transparent),
    radial-gradient(ellipse 400px 200px at 30% 0%, rgba(167, 139, 250, 0.05), transparent),
    rgba(31, 35, 55, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(217, 119, 6, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: var(--space-3xl) var(--space-lg);
  margin-top: var(--space-2xl);
}

.newsletter__inner {
  max-width: 36rem;
  margin: 0 auto;
  text-align: center;
}

.newsletter__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  margin-bottom: var(--space-sm);
  color: var(--text-bright);
}

.newsletter__desc {
  color: var(--text-muted);
  margin-bottom: var(--space-xl);
  font-size: 1rem;
}

.newsletter__form {
  display: flex;
  gap: var(--space-sm);
  max-width: 28rem;
  margin: 0 auto;
}

.newsletter__input {
  flex: 1;
  padding: 0.75rem 1rem;
  background: rgba(16, 18, 28, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: var(--text-bright);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.newsletter__input::placeholder { color: var(--text-faint); }
.newsletter__input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.12), 0 0 20px rgba(217, 119, 6, 0.06); background: rgba(16, 18, 28, 0.8); }

.newsletter__btn {
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, var(--amber), var(--amber-light));
  color: var(--night-deep);
  border: none;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
}

.newsletter__btn:hover { background: linear-gradient(135deg, var(--amber-light), var(--amber)); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(217, 119, 6, 0.4); }
.newsletter__btn:active { transform: translateY(0); background: var(--amber-dim); }

/* ---- Song Spotlight ---- */
.spotlight {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-lg);
  background:
    radial-gradient(ellipse 500px 250px at 0% 50%, rgba(167, 139, 250, 0.06), transparent),
    rgba(31, 35, 55, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(167, 139, 250, 0.08);
}

.spotlight__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
}

.spotlight__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--amber);
  margin-bottom: var(--space-sm);
}

.spotlight__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 900;
  color: var(--text-bright);
  margin-bottom: var(--space-lg);
  letter-spacing: -0.02em;
}

.spotlight__desc {
  color: var(--text-body);
  line-height: 1.7;
  max-width: 28rem;
}

.spotlight__submit-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-bright);
  margin-bottom: var(--space-lg);
}

.spotlight__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.spotlight__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.spotlight__field-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
}

.spotlight__input,
.spotlight__textarea {
  padding: 0.85rem 1rem;
  background: rgba(16, 18, 28, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  color: var(--text-bright);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.spotlight__input:focus,
.spotlight__textarea:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.12), 0 0 20px rgba(217, 119, 6, 0.06);
  background: rgba(16, 18, 28, 0.8);
}

.spotlight__input::placeholder,
.spotlight__textarea::placeholder {
  color: var(--text-faint);
}

.spotlight__textarea {
  resize: vertical;
  min-height: 5rem;
}

select.spotlight__input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239e9589' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.spotlight__btn {
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, var(--amber), var(--amber-light));
  color: var(--night-deep);
  border: none;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  align-self: flex-start;
}

.spotlight__btn:hover {
  background: linear-gradient(135deg, var(--amber-light), var(--amber));
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.4);
}
.spotlight__btn:active {
  transform: translateY(0);
  background: var(--amber-dim);
}

.spotlight__note {
  margin-top: var(--space-md);
  font-size: 0.8125rem;
  color: var(--text-faint);
  font-style: italic;
}

@media (max-width: 48rem) {
  .spotlight__inner { grid-template-columns: 1fr; gap: var(--space-xl); }
  .spotlight { padding: var(--space-xl) var(--space-md); }
}

/* ---- Ad Slots ---- */
.ad-slot {
  max-width: 72rem;
  margin: var(--space-xl) auto;
  padding: var(--space-lg);
  text-align: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  min-height: 90px;
  color: var(--text-faint);
  font-size: 0.75rem;
}

/* ---- About Section ---- */
.about {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-lg);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-2xl);
  align-items: start;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  background: radial-gradient(ellipse 400px 200px at 100% 0%, rgba(217, 119, 6, 0.04), transparent);
}

.about__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
}

.about__text { max-width: var(--measure); }

.about__text p {
  margin-bottom: var(--space-md);
  color: var(--text-muted);
}

.about__links {
  display: flex;
  gap: var(--space-lg);
  margin-top: var(--space-md);
  font-size: 0.875rem;
  font-weight: 500;
}

/* ---- Bitcoin Donation ---- */
.btc-donate {
  position: relative;
  z-index: 1;
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-lg);
  border-top: 1px solid rgba(217, 119, 6, 0.1);
  background:
    radial-gradient(ellipse 500px 250px at 80% 50%, rgba(217, 119, 6, 0.06), transparent),
    rgba(31, 35, 55, 0.3);
}

.btc-donate__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3xl);
  align-items: center;
}

.btc-donate__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--amber);
  margin-bottom: var(--space-sm);
}

.btc-donate__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 900;
  color: var(--text-bright);
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}

.btc-donate__desc {
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 32rem;
}

.btc-donate__wallet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.btc-donate__qr {
  border-radius: 12px;
  border: 2px solid rgba(217, 119, 6, 0.2);
  padding: 8px;
  background: var(--night-deep);
}

.btc-donate__address-wrap {
  text-align: center;
}

.btc-donate__address-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  margin-bottom: var(--space-xs);
}

.btc-donate__copy-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: rgba(16, 18, 28, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
}

.btc-donate__address {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--amber-light);
  word-break: break-all;
  max-width: 180px;
  line-height: 1.4;
}

.btc-donate__copy-btn {
  padding: 0.35rem 0.75rem;
  background: rgba(217, 119, 6, 0.15);
  color: var(--amber);
  border: 1px solid rgba(217, 119, 6, 0.25);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btc-donate__copy-btn:hover {
  background: rgba(217, 119, 6, 0.25);
  border-color: var(--amber);
}

@media (max-width: 48rem) {
  .btc-donate__inner { grid-template-columns: 1fr; gap: var(--space-xl); text-align: center; }
  .btc-donate__desc { max-width: none; }
  .btc-donate { padding: var(--space-xl) var(--space-md); }
}

/* ---- Article BTC Mini Banner ---- */
.btc-donate-mini {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-lg);
  border-top: 1px solid rgba(217, 119, 6, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.btc-donate-mini__text {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
}

.btc-donate-mini__row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: rgba(16, 18, 28, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
}

.btc-donate-mini__addr {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--amber-light);
  word-break: break-all;
  max-width: 200px;
  line-height: 1.3;
}

.btc-donate-mini__btn {
  padding: 0.3rem 0.6rem;
  background: rgba(217, 119, 6, 0.15);
  color: var(--amber);
  border: 1px solid rgba(217, 119, 6, 0.25);
  border-radius: 5px;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btc-donate-mini__btn:hover {
  background: rgba(217, 119, 6, 0.25);
  border-color: var(--amber);
}

@media (max-width: 48rem) {
  .btc-donate-mini { flex-direction: column; text-align: center; padding: var(--space-lg) var(--space-md); }
}

/* ---- Footer ---- */
.site-footer {
  padding: var(--space-xl) var(--space-lg);
  background: rgba(8, 10, 20, 0.8);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 0.8125rem;
  color: var(--text-faint);
}

.site-footer__inner {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
}

/* ---- Article Page ---- */
.article-header {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-lg) var(--space-xl);
}

.article-header__label {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--amber);
  margin-bottom: var(--space-md);
}

.article-header__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  line-height: 1.12;
  color: var(--text-bright);
  max-width: 42rem;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-lg);
}

.article-header__meta {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.article-content {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 var(--space-lg) var(--space-2xl);
}

.article-content__body {
  max-width: var(--measure);
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}

.article-content__body p { margin-bottom: 1.5em; }

.article-content__body h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-bright);
  margin: 2.5em 0 0.75em;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.article-content__body h3 {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-bright);
  margin: 2em 0 0.5em;
}

.article-content__body ul, .article-content__body ol {
  padding-left: 1.25em;
  margin-bottom: 1.5em;
}

.article-content__body li { margin-bottom: 0.5em; }
.article-content__body li::marker { color: var(--amber); }

.article-content__body strong {
  font-weight: 600;
  color: var(--text-bright);
}

.article-content__body blockquote {
  border-left: 2px solid var(--amber);
  padding-left: var(--space-lg);
  margin: 2em 0;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text-body);
  font-size: 1.125rem;
}

.article-content__body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--night-elevated);
  padding: 0.15em 0.4em;
  border-radius: 2px;
  color: var(--amber-light);
}

.article-content__body a { color: var(--amber); }
.article-content__body a:hover { color: var(--amber-light); }

.article-footer {
  max-width: var(--measure);
  padding: var(--space-xl) 0;
  margin-top: var(--space-xl);
  border-top: 1px solid var(--border);
  font-style: italic;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 0.9375rem;
}

/* ---- Hero Equalizer ---- */
.hero-eq {
  display: block;
  height: 44px;
  margin: var(--space-xl) 0 var(--space-lg);
}

/* ---- Scroll Reveal Animation ---- */
.article-item,
.newsletter__inner {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.6s ease forwards;
}
.article-item:nth-child(1) { animation-delay: 0.15s; }
.article-item:nth-child(2) { animation-delay: 0.25s; }
.article-item:nth-child(3) { animation-delay: 0.35s; }
.article-item:nth-child(4) { animation-delay: 0.45s; }
.article-item:nth-child(5) { animation-delay: 0.55s; }
.newsletter__inner { animation-delay: 0.1s; }

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Featured Picks (Typography-driven cards) ---- */
.featured-picks {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 var(--space-lg) var(--space-2xl);
  position: relative;
  z-index: 1;
}

.featured-picks__header {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.featured-picks__title {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  white-space: nowrap;
}

.featured-picks__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border-strong), transparent);
}

.featured-picks__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--space-md);
}

.pick-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 260px;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.4s ease,
              border-color 0.3s ease;
}

.pick-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5), 0 0 40px rgba(217, 119, 6, 0.06);
  border-color: rgba(217, 119, 6, 0.25);
}

.pick-card--wide {
  min-height: 300px;
}

.pick-card__gradient {
  position: absolute;
  inset: 0;
  opacity: 0.85;
  transition: opacity 0.4s ease;
}

.pick-card:hover .pick-card__gradient {
  opacity: 1;
}

.pick-card__gradient--rage {
  background: linear-gradient(135deg, #1a0a2e 0%, #2d1b4e 30%, #4a1942 60%, #1a0a2e 100%);
}

.pick-card__gradient--beef {
  background: linear-gradient(135deg, #1c1917 0%, #292524 40%, #44403c 70%, #1c1917 100%);
}

.pick-card__gradient--louisiana {
  background: linear-gradient(135deg, #0c1220 0%, #1e3a5f 40%, #0f766e 80%, #0c1220 100%);
}

.pick-card__content {
  position: relative;
  z-index: 1;
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.pick-card__tag {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--amber);
}

.pick-card__title {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.375rem);
  font-weight: 700;
  color: var(--text-bright);
  line-height: 1.3;
  margin: 0;
}

.pick-card--wide .pick-card__title {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
}

.pick-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-muted);
  font-size: 1rem;
  margin-top: var(--space-sm);
  transition: all 0.3s ease;
  align-self: flex-start;
}

.pick-card:hover .pick-card__arrow {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--night-deep);
  transform: translateX(4px);
}

@media (max-width: 48rem) {
  .featured-picks__grid {
    grid-template-columns: 1fr;
  }
  .pick-card { min-height: 200px; }
  .pick-card--wide { min-height: 220px; }
  .featured-picks { padding: 0 var(--space-md) var(--space-xl); }
}

/* ---- Responsive ---- */
@media (max-width: 48rem) {
  .site-header__inner { flex-direction: column; gap: var(--space-sm); }
  .site-nav { gap: var(--space-sm); font-size: 0.8125rem; flex-wrap: wrap; justify-content: center; }
  .hero { padding: var(--space-2xl) var(--space-md) var(--space-xl); }
  .articles-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .articles-section { padding: var(--space-xl) var(--space-md); }
  .newsletter__form { flex-direction: column; }
  .about { grid-template-columns: 1fr; gap: var(--space-lg); padding: var(--space-xl) var(--space-md); }
  .article-header { padding: var(--space-2xl) var(--space-md) var(--space-lg); }
  .article-content { padding: 0 var(--space-md) var(--space-xl); }
  .featured-picks { padding: 0 var(--space-md) var(--space-xl); }
  .featured-picks__grid { grid-template-columns: 1fr; }
  .moon { width: 90px; height: 90px; top: 3%; right: 5%; animation: moonGlow 4s ease-in-out infinite alternate !important; }
  .moon__crater--1 { width: 14px; height: 14px; top: 22px; left: 18px; }
  .moon__crater--2 { width: 9px; height: 9px; top: 44px; left: 46px; }
  .moon__crater--3 { width: 11px; height: 11px; top: 19px; left: 50px; }
  /* Clouds & shooting stars hidden on mobile — translateX causes Safari scroll jitter */
  .shooting-star, .shooting-star--1, .shooting-star--2, .shooting-star--3 { display: none !important; }
  .cloud, .cloud--1, .cloud--2, .cloud--3, .cloud--4 { display: none !important; }
  /* More visible star twinkle on mobile */
  .stars { animation: twinkleMobile 3s ease-in-out infinite alternate !important; }
  .stars--sm { animation: twinkleMobile 4s ease-in-out 1s infinite alternate !important; }
  .stars--bright { animation: twinkleBright 2.5s ease-in-out infinite alternate !important; }
}

/* ---- Print ---- */
@media print {
  .sky, .newsletter, .ad-slot, .site-nav { display: none; }
  body { background: white; color: black; }
  .site-title, .hero__title, .articles-section__title, .article-item__title a { color: black; }
}

/* ---- Scroll-triggered reveals ---- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

.reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal:nth-child(3) { transition-delay: 0.2s; }
.reveal:nth-child(4) { transition-delay: 0.15s; }
.reveal:nth-child(5) { transition-delay: 0.25s; }

/* ---- Enhanced article hover underline ---- */
.article-item__title a {
  position: relative;
  display: inline;
  background-image: linear-gradient(var(--amber), var(--amber));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s;
}

.article-item:hover .article-item__title a {
  background-size: 100% 2px;
}

/* ---- Newsletter / Spotlight ripple button ---- */
.newsletter__btn,
.spotlight__btn {
  position: relative;
  overflow: hidden;
}

.newsletter__btn::before,
.spotlight__btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s, height 0.5s;
}

.newsletter__btn:active::before,
.spotlight__btn:active::before {
  width: 300px;
  height: 300px;
}

/* ---- Custom Scrollbar ---- */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--night-deep);
}
::-webkit-scrollbar-thumb {
  background: var(--night-elevated);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--amber-dim);
}

/* ---- Hero bottom glow line ---- */
.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217, 119, 6, 0.2), transparent);
}

/* ---- Section glow dividers ---- */
.articles-section + .articles-section::before {
  content: '';
  display: block;
  height: 1px;
  max-width: 72rem;
  margin: 0 auto var(--space-xl);
  background: linear-gradient(90deg, transparent, rgba(217, 119, 6, 0.15), rgba(167, 139, 250, 0.1), transparent);
}

/* ---- Browse: Search & Filters ---- */
.browse {
  position: relative;
  z-index: 2;
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg) var(--space-md);
}
.browse__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.browse__search-wrap {
  position: relative;
  max-width: 28rem;
}
.browse__search-icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.browse__search {
  width: 100%;
  padding: 0.625rem 1rem 0.625rem 2.5rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--text-bright);
  background: var(--night-surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.browse__search::placeholder {
  color: var(--text-faint);
}
.browse__search:focus-visible {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15);
}
.browse__search::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 14px;
  width: 14px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l12 12M13 1L1 13' stroke='%239e9589' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  cursor: pointer;
}
.browse__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.browse__filter {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.4rem 0.875rem;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s;
}
.browse__filter:hover {
  color: var(--text-bright);
  border-color: var(--border-strong);
  background: var(--night-surface);
}
.browse__filter--active {
  color: var(--night-deep);
  background: var(--amber);
  border-color: var(--amber);
}
.browse__filter--active:hover {
  background: var(--amber-light);
  border-color: var(--amber-light);
  color: var(--night-deep);
}

/* ---- Like Button ---- */
.article-item__like {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.5rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--text-faint);
  background: none;
  border: 1px solid transparent;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1;
}
.article-item__like svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  transition: all 0.2s;
}
.article-item__like:hover {
  color: var(--ember);
  border-color: rgba(220, 38, 38, 0.2);
  background: rgba(220, 38, 38, 0.06);
}
.article-item__like--liked {
  color: var(--ember);
}
.article-item__like--liked svg {
  fill: var(--ember);
  stroke: var(--ember);
}
.article-item__like-count {
  min-width: 0.75rem;
  text-align: center;
}
.article-item__footer {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.article-item__footer .article-item__read {
  margin-left: auto;
}

/* ---- No results message ---- */
.articles-section__empty {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  color: var(--text-muted);
  font-size: 1.125rem;
  font-style: italic;
}

/* ---- Article hide/show for filtering ---- */
.article-item--hidden {
  display: none !important;
}

@media (max-width: 640px) {
  .browse {
    padding: var(--space-lg) var(--space-md) var(--space-sm);
  }
  .browse__search-wrap {
    max-width: 100%;
  }
  .browse__filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
  }
  .browse__filters::-webkit-scrollbar { display: none; }
  .browse__filter {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
  .article-item, .hero__title, .hero__excerpt, .newsletter__inner { opacity: 1; transform: none; }
  .hero-eq { opacity: 0.4; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .shooting-star { display: none; }
  .nebula { animation: none; opacity: 0.7; }
}