/* ==========================================================================
   MEDIUM-STYLE EDITORIAL DESIGN SYSTEM WITH DUNE NOVEL (ARRAKIS) MOTIFS
   Dune Ridges, Twin Moons of Arrakis, Sandworm Rings, & Spice Melange Dust
   ========================================================================== */

:root {
  /* Warm Parchment & Espresso Brown Palette */
  --bg-main: #faf8f5;
  --bg-card: #ffffff;
  --bg-subtle: #f3f0ea;

  --text-primary: #242424;
  --text-secondary: #595959;
  --text-muted: #757575;

  --border-light: #e8e5df;
  --border-hover: #d4cfc7;

  --accent-brown: #7c5235;
  --accent-brown-hover: #5d3d27;
  --accent-brown-light: #f4ede6;

  --font-serif: 'Lora', 'Georgia', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-full: 9999px;

  --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.03);
  --shadow-center: 0 8px 30px rgba(124, 82, 53, 0.06), 0 2px 8px rgba(0, 0, 0, 0.03);
  --transition-fast: 0.15s ease-in-out;
}

/* Reset & Base Rules */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

/* Body with Dune Novel (Arrakis) Desert Sci-Fi Motifs: Sweeping Dune Ridges, Twin Moons, Sandworm Rings & Spice Dust */
body {
  font-family: var(--font-sans);
  background-color: #f1ebd7;
  /* 320px Dune Novel SVG Pattern URI */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3C!-- Sweeping Sand Dune Contour Lines --%3E%3Cg stroke='%237c5235' fill='none'%3E%3Cpath d='M0 160 Q80 120 160 170 T320 150' stroke-opacity='0.22' stroke-width='2'/%3E%3Cpath d='M0 240 Q100 200 200 250 T320 220' stroke-opacity='0.18' stroke-width='1.8'/%3E%3Cpath d='M0 80 Q120 130 220 70 T320 100' stroke-opacity='0.16' stroke-width='1.5'/%3E%3Cpath d='M0 300 Q140 260 240 310 T320 295' stroke-opacity='0.14' stroke-width='1.2'/%3E%3C/g%3E%3C!-- The Twin Moons of Arrakis --%3E%3Cg fill='%237c5235'%3E%3C!-- First Moon of Arrakis (Muad'Dib Moon) --%3E%3Ccircle cx='230' cy='65' r='18' fill-opacity='0.12'/%3E%3Cpath d='M230 47 A18 18 0 0 1 230 83 A14 14 0 0 0 230 47Z' fill-opacity='0.14'/%3E%3C!-- Second Companion Moon --%3E%3Ccircle cx='275' cy='90' r='10' fill-opacity='0.10'/%3E%3C/g%3E%3C!-- Sandworm (Shai-Hulud) Segment Rings --%3E%3Cg transform='translate(70, 230) rotate(-15)' stroke='%237c5235' fill='none'%3E%3Cellipse cx='0' cy='0' rx='38' ry='14' stroke-opacity='0.22' stroke-width='2.2'/%3E%3Cellipse cx='0' cy='0' rx='28' ry='10' stroke-opacity='0.18' stroke-width='1.5'/%3E%3Cellipse cx='0' cy='0' rx='18' ry='6' stroke-opacity='0.14' stroke-width='1.2'/%3E%3C/g%3E%3C!-- Arrakis Sun %26 Rays --%3E%3Cg stroke='%237c5235' stroke-opacity='0.16' fill='none' stroke-width='1'%3E%3Ccircle cx='90' cy='45' r='14' stroke-opacity='0.22' stroke-width='1.5'/%3E%3Cpath d='M90 25 L90 20 M90 70 L90 65 M70 45 L65 45 M115 45 L110 45 M76 31 L72 27 M104 59 L108 63 M104 31 L108 27 M76 59 L72 63'/%3E%3C/g%3E%3C!-- Spice Melange Dust Particles --%3E%3Cg fill='%237c5235' fill-opacity='0.2'%3E%3Ccircle cx='40' cy='140' r='2'/%3E%3Ccircle cx='120' cy='155' r='1.5'/%3E%3Ccircle cx='180' cy='145' r='2'/%3E%3Ccircle cx='210' cy='220' r='1.5'/%3E%3Ccircle cx='150' cy='280' r='2'/%3E%3Ccircle cx='290' cy='180' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 320px 320px;
  color: var(--text-primary);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  padding: 2.5rem 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

a {
  color: var(--accent-brown);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--accent-brown-hover);
}

/* Framed Central Reading Column (Zero Wasted Space - Dynamic Height) */
.site-wrapper {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  background-color: var(--bg-main);
  border: 1px solid #e2dad0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-center);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.container {
  width: 100%;
  padding: 0 2rem;
}

/* Editorial Button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.88rem;
  padding: 0.55rem 1.15rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-light);
  cursor: pointer;
  background: var(--bg-card);
  color: var(--text-primary);
  transition: all var(--transition-fast);
}

.btn:hover {
  background: var(--bg-subtle);
  border-color: var(--border-hover);
}

.btn-brown {
  background: var(--accent-brown);
  color: #ffffff;
  border-color: var(--accent-brown);
}

.btn-brown:hover {
  background: var(--accent-brown-hover);
  color: #ffffff;
}

.tag-badge {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  background: var(--accent-brown-light);
  color: var(--accent-brown);
  border: 1px solid rgba(124, 82, 53, 0.15);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  display: inline-block;
}