/* =============================================
   varvarley.com — global design system
   Version: 0.16.3
   Version history:
     0.1.0 — Initial lodge aesthetic redesign; homestead map; pixel fonts
     0.1.1 — Brand name → Josh Varley; Orbitron font for brand; nav tab label updates
     0.2.0 — Alpine glow dark mode; fixed hero scroll-cover effect; white-toned UI
     0.2.1 — IMG_0192 photo hero bg; text repositioned higher; eyebrow typewriter effect
     0.3.0 — Pure black dark mode bg; hero h1 → Orbitron "Josh Varley"; DS cartridge project cards; hero mountains → black rect
     0.3.1 — Body/description font changed from Lora to JetBrains Mono
     0.4.0 — Light mode implemented: sunrise alpine glow gradient hero, warm off-white content bg
     0.4.1 — Dark mode hero swapped from photo to CSS sunset gradient (#a4516c -> #d38896 -> #ed945a)
     0.4.2 — Removed hero-mountains rectangle; gradient now fills full hero height in both modes
     0.5.0 — Header always frosted (not transparent); scroll-content peeks at bottom (92vh); theme toggle icon-only; fix light-mode nav white box
     0.5.1 — Theme toggle replaced with CSS pixel-art SVG moon/sun icons (currentColor, pixelated rendering)
     0.6.0 — Section headings (h2) switched to Montserrat 700 all-caps via --font-heading token
     0.6.1 — h2, h3, and ds-cart-title switched to Press Start 2P (pixel font)
     0.6.2 — Section headings (h2, h3) switched to Bebas Neue; ds-cart-title restored to Calistoga
     0.6.3 — Hero typewriter moved to name (two-line); suffix cycler (?!$:)#$%&;)); lede updated
     0.6.4 — Typewriter slowed (140ms); suffix backspaces out before next; white-space nowrap on hero-name
     0.6.5 — favicon updated to duragcowboy_no_bg.png
     0.6.6 — Content cleanup: updated about text, quick facts, cleared placeholder project/hobby content; removed suffix cycler
     0.7.0 — Homestead facelift: Orbitron title, bigger labels, unique building redesigns (pole, tower, greenhouse, cars, glass grid, tent+dig)
     0.8.0 — Project cards filled in: Data Pipelining, Data Warehousing, Crypto Trading; ds-cart-title font → JetBrains Mono
     0.8.1 — Cartridge icons linked to GitHub; updated Projects lede and Beyond Work description
     0.9.0 — Nav expanded (Work, Varchive, Contact); terminal code block in About; Homestead section rename; work.html + varchive.html added
     0.9.1 — Homestead section: correct favicon (cowboyfavicon.png), removed hobby cards, updated lede
     0.10.0 — Terminal comments removed; poem added to work.html; contact.html created; nav Contact → contact.html
     0.10.1 — Interaction polish: custom easing curves, :active press states, hover transitions, media-query guards
     0.11.0 — dvh viewport fix, emoji removal, :focus-visible, prefers-reduced-motion, scroll-stagger entrance, LinkedIn URL
     0.12.0 — resume.html added; hero button updated to link to resume page; PDF link fixed
     0.13.0 — Varchive playlist grid added; .playlist-grid and .playlist-card components
     0.14.0 — work.html design polish: page-header gradient accent, poem stanza stagger reveal, section indexes, coming-soon redesign
     0.14.1 — Varchive polish: playlist card stagger reveal, section-index label, hover lift reduced, tagline added
     0.15.0 — Homestead overhaul: EarthBound/Pokemon GBA pixel art sprites replace all CSS buildings, tiled grass+cobblestone map
     0.16.0 — Pixel art icons on contact page (email envelope, LinkedIn square, GitHub octocat)
     0.16.3 — Footer tagline: "hot cocoa" → "Raw milk"
   ============================================= */

/* =============================================
   COLOR TOKENS
   Dark mode is the default. Light mode tokens
   will be added under [data-theme="light"] later.
   Edit here to retheme the entire site.
   ============================================= */

:root {
  /* ── Page backgrounds — pure black for dark mode ── */
  --color-bg-primary:  #080808;   /* near-black — main page bg */
  --color-bg-surface:  #111111;   /* dark surface (cards, alt sections) */
  --color-bg-elevated: #1a1a1a;   /* slightly lifted (hover states, modals) */

  /* ── Alpine glow palette (used in hero gradient + accents) ── */
  --color-alpine-sky:    #0e0818;  /* top of sky, near black-purple */
  --color-alpine-violet: #3d1450;  /* upper sky purple */
  --color-alpine-rose:   #c02860;  /* horizon rose — primary accent */
  --color-alpine-ember:  #e86018;  /* orange ember glow */
  --color-alpine-dark:   #090608;  /* mountain silhouette / foreground */

  /* ── Text — white-toned ── */
  --color-text-primary: #f0ecf8;   /* near white with slight lavender */
  --color-text-muted:   #8878a8;   /* muted purple-grey */
  --color-text-accent:  #d8c8f0;   /* bright lavender-white for highlights */

  /* ── Borders ── */
  --color-border:      #222222;   /* subtle dark border */
  --color-border-warm: #2e2e2e;   /* slightly brighter border */

  /* ── Homestead map (keep earthy) ── */
  --color-bg-ground:  #1c2e10;    /* grass background on homestead map */
  --color-path:       #3d2510;
  --color-wood-dark:  #3d2510;
  --color-wood-mid:   #5c3820;
  --color-wood-light: #8b5e38;
  --color-snow:       #c8d8c0;
  --color-lantern:    #f8d080;

  /* ── Sizing / spacing ── */
  --max-width: 1100px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --radius:    8px;
  --radius-sm: 4px;

  /* ── Shadows ── */
  --shadow-glow:  0 4px 24px rgba(192, 40, 96, 0.2);
  --shadow-deep:  0 8px 40px rgba(0, 0, 0, 0.7);
  --shadow-card:  0 4px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.04);

  /* ── Easing curves ── */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);   /* strong ease-out for entering elements */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* strong ease-in-out for on-screen motion */

  /* ── Terminal / code block ── */
  --t-bg:     #141210;
  --t-bar:    #242018;
  --t-text:   #cfc4b0;
  --t-str:    #c8922a;    /* amber/gold — strings */
  --t-kw:     #9c86c8;    /* muted lavender — keywords */
  --t-cmt:    #7a8c5e;    /* olive-green — comments */
  --t-output: #e8d5a0;    /* warm amber — output */

  /* ── Work icon category backgrounds ── */
  --color-work-technical-bg: #080e18;  /* deep navy for code/data */
  --color-work-creative-bg:  #180808;  /* deep rose for creative */
  --color-work-people-bg:    #080e0a;  /* deep forest for people */
}

/* =============================================
   TYPOGRAPHY
   - Calistoga       → display / headlines
   - Press Start 2P  → pixel labels & buttons (sparingly)
   - JetBrains Mono  → all body / description text
   - Orbitron        → brand name (.brand) only
   ============================================= */

:root {
  --font-display: 'Calistoga', serif;
  --font-heading: 'Bebas Neue', sans-serif;       /* section headings — condensed, all-caps */
  --font-pixel:   'Press Start 2P', monospace;
  --font-body:    'JetBrains Mono', monospace;  /* all description/body text */
  --font-brand:   'Orbitron', sans-serif;        /* GameCube/PlayStation-style brand name */
}

/* =============================================
   GLOBAL BASE STYLES
   ============================================= */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Film-grain overlay — subtle texture over everything */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}

img { max-width: 100%; display: block; }

a { color: var(--color-text-accent); text-decoration: none; transition: color 150ms ease; }
a:hover { color: var(--color-text-primary); }

:focus-visible {
  outline: 2px solid var(--color-alpine-rose);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.15;
  margin: 0 0 var(--space-2);
  color: var(--color-text-primary);
}
h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-family: var(--font-heading); letter-spacing: 0.06em; }
h3 { font-size: 1.2rem; font-family: var(--font-heading); letter-spacing: 0.04em; }

p  { margin: 0 0 var(--space-2); color: var(--color-text-muted); }
p strong { color: var(--color-text-primary); }
ul { margin: 0; padding: 0; list-style: none; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

/* =============================================
   HEADER / NAV
   Fixed — floats above the hero and scroll content.
   Always frosted glass; .scrolled retained for JS compatibility.
   ============================================= */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--color-bg-primary) 90%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  transition: background 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease;
}

/* .scrolled is kept for JS compatibility — no visual change needed */
.site-header.scrolled {}

.nav {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-2) var(--space-3);
}

/* Brand — Orbitron bold, GameCube/PlayStation feel */
.brand {
  font-family: var(--font-brand);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text-primary);
}
.brand:hover { color: var(--color-text-accent); }

.nav-right { display: flex; align-items: center; gap: var(--space-3); }

.nav-links { display: flex; gap: var(--space-3); }

.nav-links a {
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  color: rgba(240, 236, 248, 0.7);
  letter-spacing: 0.05em;
}
.nav-links a:hover  { color: var(--color-text-primary); }
.nav-links a.active {
  color: var(--color-text-primary);
  border-bottom: 2px solid var(--color-text-primary);
  padding-bottom: 2px;
}

/* ── Dark/Light mode toggle ──
   Currently dark mode only. Light mode tokens
   will be added under [data-theme="light"] in a future update.
   ─────────────────────────────────────────── */
.theme-toggle {
  background: transparent;
  border: none;
  padding: 0.3rem;
  cursor: pointer;
  line-height: 1;
  color: var(--color-text-muted);
  transition: opacity 150ms ease, transform 150ms var(--ease-out);
}
.theme-toggle:hover { opacity: 0.65; transform: scale(1.1); }
.theme-toggle:active { transform: scale(0.95); transition: transform 80ms var(--ease-out); }

/* Pixel art toggle icons — currentColor inherits button text color */
.toggle-icon {
  width: 14px;
  height: 14px;
  display: block;
  image-rendering: pixelated;
}

/* Show moon in dark mode, sun in light mode */
[data-theme="dark"]  .icon-sun  { display: none; }
[data-theme="light"] .icon-moon { display: none; }

.nav-toggle {
  display: none; background: none; border: 0; padding: 6px; cursor: pointer;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px; margin: 4px 0;
  background: var(--color-text-primary); border-radius: 2px;
}

/* =============================================
   HERO — Fixed behind everything.
   The .scroll-content slides over it as the user scrolls.
   ============================================= */

.hero {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100dvh;
  z-index: 0;
  display: flex;
  align-items: flex-start; /* content anchors to top so we control position via padding */
  overflow: hidden;

  /* Dark mode sunset alpine glow — end of a long ski day, sun going down.
     Deep purple-rose at top → muted rose-pink alpenglow → warm orange at horizon. */
  background: linear-gradient(
    180deg,
    #a4516c 0%,    /* deep purple-rose — last light high in the sky */
    #b86078 18%,   /* purple fading into pink */
    #d38896 42%,   /* muted rose alpenglow zone */
    #dfa07a 65%,   /* warming toward the horizon */
    #e8a868 82%,   /* golden-orange glow */
    #ed945a 100%   /* warm orange at the horizon */
  );
}

/* Hero text content — padding-top places it in the upper sky area of the photo */
.hero-content {
  position: relative;
  z-index: 2;
  padding-top: 16vh; /* sits in the colorful sky, clears the nav */
  text-shadow: 0 2px 16px rgba(0,0,0,0.55); /* keeps text legible over the photo */
}

/* Hero mountains — retained as empty element in HTML; no visible fill needed */
.hero-mountains {
  display: none;
}

/* Typewriter cursor blink — applied while text is being typed */
@keyframes blink-cursor {
  0%, 100% { border-color: rgba(240,236,248,0.8); }
  50%       { border-color: transparent; }
}

/* Typewriter cursor — attached to active typing span and cycling suffix */
.hero-line1.typing,
.hero-line2.typing,
.hero-suffix.cycling {
  border-right: 3px solid rgba(240,236,248,0.85);
  animation: blink-cursor 0.75s step-end infinite;
}

.lede {
  font-size: 1.1rem;
  max-width: 600px;
  margin-top: var(--space-2);
  color: rgba(240, 236, 248, 0.75);
}

.location {
  display: inline-block;
  margin-top: var(--space-2);
  font-family: var(--font-pixel);
  font-size: 0.45rem;
  color: rgba(240,236,248,0.5);
  letter-spacing: 0.08em;
}

.accent { color: var(--color-alpine-rose); }

/* Hero name — Orbitron bold, professional wordmark feel */
.hero-name {
  font-family: var(--font-brand);
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}

.cta-row {
  margin-top: var(--space-4);
  display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center;
}

/* =============================================
   BUTTONS — chunky pixel style, white-toned
   ============================================= */

.btn {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
  text-transform: uppercase;
}
.btn:hover { text-decoration: none; transform: translateY(2px); }
.btn:active { transform: scale(0.97); transition: transform 80ms var(--ease-out); }

/* Primary — white background, dark text */
.btn-primary {
  background: var(--color-text-primary);
  color: var(--color-bg-primary);
  box-shadow: 0 4px 0 rgba(200,200,220,0.4);
}
.btn-primary:hover {
  color: var(--color-bg-primary);
  box-shadow: 0 2px 0 rgba(200,200,220,0.4);
}

/* Ghost — white border, white text */
.btn-ghost {
  background: transparent;
  border: 2px solid rgba(240,236,248,0.35);
  color: var(--color-text-primary);
  box-shadow: 0 4px 0 rgba(0,0,0,0.3);
}
.btn-ghost:hover {
  border-color: var(--color-text-primary);
  color: var(--color-text-primary);
  box-shadow: 0 2px 0 rgba(0,0,0,0.3);
}

/* =============================================
   SCROLL CONTENT
   Slides up over the fixed hero as the user scrolls.
   Rounded top corners + shadow give a "card lifting" feel.
   ============================================= */

.scroll-content {
  position: relative;
  z-index: 1;
  margin-top: 92dvh;
  background: var(--color-bg-primary);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.7);
}

/* =============================================
   SECTION DIVIDER — pixel treeline silhouette
   ============================================= */

.divider {
  height: 40px;
  overflow: hidden;
  background: var(--color-bg-primary);
  position: relative;
  border-radius: 20px 20px 0 0; /* matches scroll-content top */
}
.divider::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40px;
  background: var(--color-bg-surface);
  clip-path: polygon(
    0% 100%, 0% 65%, 2% 65%, 2% 40%, 4% 40%, 4% 55%, 6% 55%,
    6% 25%, 8% 25%, 8% 50%, 10% 50%, 10% 60%, 12% 60%, 12% 35%,
    14% 35%, 14% 55%, 16% 55%, 16% 30%, 18% 30%, 18% 55%, 20% 55%,
    20% 45%, 22% 45%, 22% 65%, 24% 65%, 24% 40%, 26% 40%, 26% 20%,
    28% 20%, 28% 50%, 30% 50%, 30% 35%, 32% 35%, 32% 60%, 34% 60%,
    34% 45%, 36% 45%, 36% 25%, 38% 25%, 38% 50%, 40% 50%, 40% 55%,
    42% 55%, 42% 40%, 44% 40%, 44% 60%, 46% 60%, 46% 30%, 48% 30%,
    48% 55%, 50% 55%, 50% 45%, 52% 45%, 52% 20%, 54% 20%, 54% 50%,
    56% 50%, 56% 35%, 58% 35%, 58% 55%, 60% 55%, 60% 65%, 62% 65%,
    62% 40%, 64% 40%, 64% 25%, 66% 25%, 66% 50%, 68% 50%, 68% 60%,
    70% 60%, 70% 45%, 72% 45%, 72% 30%, 74% 30%, 74% 55%, 76% 55%,
    76% 40%, 78% 40%, 78% 60%, 80% 60%, 80% 35%, 82% 35%, 82% 55%,
    84% 55%, 84% 25%, 86% 25%, 86% 50%, 88% 50%, 88% 65%, 90% 65%,
    90% 40%, 92% 40%, 92% 55%, 94% 55%, 94% 35%, 96% 35%, 96% 60%,
    98% 60%, 98% 45%, 100% 45%, 100% 100%
  );
}

/* =============================================
   SECTIONS
   ============================================= */

.section     { padding: var(--space-6) 0; }
.section-alt { background: var(--color-bg-surface); }
.section-lede { max-width: 640px; margin-bottom: var(--space-4); }

.two-col {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-4);
  align-items: start;
}

/* Cards — subtle glass-like surface */
.card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius);
  padding: var(--space-3);
  box-shadow: var(--shadow-card);
}

.facts { display: grid; gap: 0.5rem; margin-top: var(--space-2); }
.facts li {
  display: flex; justify-content: space-between; gap: var(--space-2);
  padding: 0.4rem 0;
  border-bottom: 1px dashed var(--color-border-warm);
  font-size: 0.9rem;
}
.facts li:last-child { border-bottom: 0; }
.facts li span:first-child { color: var(--color-text-muted); font-style: italic; }
.facts li span:last-child  { color: var(--color-text-primary); }

/* =============================================
   WORK ICON GRID — Home page Work section
   Three icon cards: Technical, Creative, People
   Each links to work.html
   ============================================= */

.work-icon-grid {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

.work-icon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
  width: 140px;
}

.work-icon-face {
  width: 120px;
  height: 120px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border-warm);
  box-shadow: var(--shadow-card);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .work-icon-card:hover .work-icon-face {
    transform: translateY(-6px);
    box-shadow: var(--shadow-glow), var(--shadow-deep);
  }
}

.work-icon-card:active .work-icon-face {
  transform: scale(0.97);
  transition: transform 80ms var(--ease-out);
}

.work-icon-face svg {
  width: 48px;
  height: auto;
  image-rendering: pixelated;
  color: var(--color-text-accent);
}

.work-icon-label {
  font-family: var(--font-pixel);
  font-size: 0.45rem;
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  text-align: center;
}

.work-icon-card[data-work="technical"] .work-icon-face {
  background: linear-gradient(145deg, var(--color-work-technical-bg), var(--color-alpine-violet));
}
.work-icon-card[data-work="creative"] .work-icon-face {
  background: linear-gradient(145deg, var(--color-work-creative-bg), var(--color-alpine-rose));
}
.work-icon-card[data-work="people"] .work-icon-face {
  background: linear-gradient(145deg, var(--color-work-people-bg), var(--color-bg-ground));
}

/* =============================================
   TERMINAL / CODE BLOCK
   Animated fake Python terminal in the About section.
   ============================================= */

.terminal {
  background: var(--t-bg);
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 560px;
  margin: var(--space-4) auto 0;
  box-shadow: var(--shadow-deep);
}

.terminal-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--t-bar);
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.t-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.t-dot-r { background: #c0645a; }
.t-dot-y { background: #c8a040; }
.t-dot-g { background: #7aaa5e; }

.terminal-filename {
  font-family: var(--font-pixel);
  font-size: 0.38rem;
  color: var(--color-text-muted);
  margin: 0 auto;
  letter-spacing: 0.05em;
}

.terminal-body { padding: var(--space-3) var(--space-3) var(--space-2); }

.terminal-code {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--t-text);
  background: none;
  margin: 0;
  padding: 0;
  line-height: 1.85;
}

/* Each code line animates in independently */
.t-line {
  display: block;
  white-space: pre;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.t-line.visible { opacity: 1; transform: none; }

.t-str { color: var(--t-str); }
.t-kw  { color: var(--t-kw); }
.t-cmt { color: var(--t-cmt); font-style: italic; }

.terminal-output {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--t-output);
  margin-top: var(--space-2);
  padding-top: var(--space-1);
  border-top: 1px solid rgba(255,255,255,0.07);
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
  white-space: pre;
}
.terminal-output.visible { opacity: 1; }

.t-prompt { color: var(--t-cmt); margin-right: 0.4em; }

/* =============================================
   HOMESTEAD SECTION  (formerly "Beyond Work")
   ============================================= */

.homestead-icon {
  width: 22px;
  height: 22px;
  vertical-align: middle;
  margin-left: 0.45rem;
}

.section-cta { margin-top: var(--space-3); }

.beyond-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
}

.beyond-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius);
  padding: var(--space-3);
  box-shadow: var(--shadow-card);
}
.beyond-card h3 { color: var(--color-text-accent); }

/* =============================================
   CONTACT + FOOTER
   ============================================= */

.contact { text-align: center; max-width: 700px; margin: 0 auto; }

.contact-links {
  display: flex; justify-content: center; gap: var(--space-4);
  margin-top: var(--space-4); flex-wrap: wrap;
}

.contact-link-item {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-2); text-decoration: none;
  color: var(--color-text-primary);
  font-family: var(--font-pixel); font-size: 0.45rem;
  transition: color 0.2s var(--ease-out);
}
.contact-link-item:hover { color: var(--color-text-accent); }

.contact-icon-wrapper {
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius-sm);
  transition: background 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.contact-link-item:hover .contact-icon-wrapper {
  background: var(--color-bg-elevated);
  transform: translateY(-3px);
}

.contact-icon {
  width: 48px; height: 48px;
  image-rendering: pixelated;
  display: block;
}

.site-footer {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
  text-align: center;
}
.site-footer p {
  font-family: var(--font-pixel);
  font-size: 0.45rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* =============================================
   HOMESTEAD PAGE — top bar
   ============================================= */

.homestead-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border-warm);
  position: sticky; top: 0; z-index: 50;
}

.homestead-title {
  font-family: var(--font-brand);
  font-size: 1.4rem;
  color: var(--color-text-primary);
  margin: 0;
}

.homestead-stars { display: flex; align-items: center; gap: 0.6rem; font-size: 1rem; }

.star { display: inline-block; animation: twinkle 2.5s ease-in-out infinite; }
.star:nth-child(2) { animation-delay: 0.8s; }
.star:nth-child(3) { animation-delay: 1.6s; }

@keyframes twinkle {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.3; transform: scale(0.7); }
}

.resume-link {
  font-family: var(--font-pixel);
  font-size: 0.45rem;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-warm);
  padding: 0.4rem 0.7rem;
  transition: color 150ms ease, border-color 150ms ease, transform 80ms var(--ease-out);
}
.resume-link:hover { color: var(--color-text-primary); border-color: rgba(240,236,248,0.4); }
.resume-link:active { transform: scale(0.97); }

/* =============================================
   HOMESTEAD MAP CANVAS
   ============================================= */

.map-canvas {
  position: relative;
  width: 100%;
  height: 660px;
  background-image: url('assets/ui/hs-grass.png');
  background-repeat: repeat;
  background-size: 64px 64px;
  image-rendering: pixelated;
  overflow: hidden;
}

.map-paths { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }

/* =============================================
   MAP SPRITES — pine trees
   ============================================= */

.map-pine {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  image-rendering: pixelated;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.45));
}

/* =============================================
   MAP SPRITES — lantern posts
   ============================================= */

.map-lantern {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  image-rendering: pixelated;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 6px rgba(248,208,80,0.85));
  animation: lantern-flicker 3s ease-in-out infinite;
}
.map-lantern:nth-child(even) { animation-delay: 0.9s; }
.map-lantern:nth-child(3n)   { animation-delay: 1.8s; }

@keyframes lantern-flicker {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(248,208,80,0.85)); opacity: 1; }
  30%       { filter: drop-shadow(0 0 2px rgba(248,208,80,0.4));  opacity: 0.82; }
  70%       { filter: drop-shadow(0 0 10px rgba(248,208,80,1.0)); opacity: 1; }
}

/* =============================================
   MAP SPRITES — snow patches
   ============================================= */

.map-snow {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  image-rendering: pixelated;
  opacity: 0.88;
}

/* =============================================
   BUILDINGS — pixel art sprites
   ============================================= */

.building {
  position: absolute;
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer;
  z-index: 10;
  transition: transform 150ms var(--ease-out);
  transform: translate(-50%, -50%);
}
.building:active { transform: translate(-50%, -50%) scale(0.97); transition: transform 80ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .building:hover { transform: translate(-50%, -50%) scale(1.1) translateY(-5px); z-index: 20; }
  .building:hover .b-label { color: var(--color-text-primary); background: rgba(0,0,0,0.78); }
}

.building-sprite {
  image-rendering: pixelated;
  display: block;
  filter: drop-shadow(0 5px 8px rgba(0,0,0,0.65));
}

.b-label {
  font-family: var(--font-pixel);
  font-size: 0.38rem;
  color: var(--color-text-muted);
  margin-top: 5px;
  white-space: nowrap;
  text-align: center;
  transition: color 0.15s ease, background 0.15s ease;
  letter-spacing: 0.04em;
  background: rgba(0,0,0,0.58);
  padding: 2px 5px;
  border-radius: 2px;
}

/* =============================================
   MODAL SYSTEM
   ============================================= */

.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(8,4,14,0.8);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
  padding: var(--space-3);
}
.modal-overlay.is-open { opacity: 1; pointer-events: all; }

.modal-box {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius);
  box-shadow: 0 0 60px rgba(184,40,88,0.15), var(--shadow-deep);
  width: 100%; max-width: 520px;
  padding: var(--space-4);
  transform: translateY(12px) scale(0.97);
  transition: transform 240ms var(--ease-out);
  position: relative;
}
.modal-overlay.is-open .modal-box { transform: translateY(0) scale(1); }

.modal-title    { font-family: var(--font-heading); font-size: 2.2rem; color: var(--color-text-primary); margin: 0 0 var(--space-1); letter-spacing: 0.03em; }
.modal-subtitle { font-family: var(--font-pixel); font-size: 0.4rem; color: var(--color-text-muted); letter-spacing: 0.08em; margin-bottom: var(--space-3); }
.modal-body     { color: var(--color-text-muted); font-style: italic; margin-bottom: var(--space-3); line-height: 1.7; }
.modal-tags     { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: var(--space-4); }
.modal-tags li  { font-family: var(--font-pixel); font-size: 0.38rem; padding: 0.3rem 0.55rem; background: rgba(240,236,248,0.06); color: var(--color-text-accent); border: 1px solid rgba(240,236,248,0.15); border-radius: 2px; }

.modal-close {
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  position: absolute; top: var(--space-2); right: var(--space-2);
  padding: 0.4rem 0.7rem;
  background: transparent;
  border: 1px solid var(--color-border-warm);
  color: var(--color-text-muted);
  cursor: pointer;
  box-shadow: none; transform: none;
  transition: color 150ms ease, border-color 150ms ease, transform 80ms var(--ease-out);
}
.modal-close:hover { border-color: var(--color-text-accent); color: var(--color-text-primary); transform: none; box-shadow: none; }
.modal-close:active { transform: scale(0.97); }

/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 720px) {
  .two-col { grid-template-columns: 1fr; }

  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column;
    background: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-2) var(--space-3);
    display: none;
    gap: var(--space-2);
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { font-size: 0.6rem; }

  .map-canvas { height: 500px; }
  .homestead-bar { flex-wrap: wrap; gap: var(--space-1); }
  .homestead-stars { order: 3; width: 100%; justify-content: center; }

  .hero-content h1 { font-size: 2.2rem; }
}

/* =============================================
   LIGHT MODE — [data-theme="light"]
   Sunrise alpine glow: cool blue sky at top,
   grey-blue transition, warm peachy sunrise at bottom.
   All variable overrides here — component styles
   pick them up automatically via var().
   ============================================= */

[data-theme="light"] {
  /* ── Backgrounds — warm off-white, feels like fresh mountain morning ── */
  --color-bg-primary:  #faf7f5;
  --color-bg-surface:  #f0ece8;
  --color-bg-elevated: #e6e0da;

  /* ── Alpine glow palette (light mode) ── */
  --color-alpine-sky:    #9fb9de;   /* top of gradient — cool blue sky */
  --color-alpine-violet: #b4c6de;   /* transitioning sky */
  --color-alpine-rose:   #c87060;   /* sunrise accent */
  --color-alpine-ember:  #d08878;   /* warm ember accent */
  --color-alpine-dark:   #f0b7ab;   /* bottom of gradient — warm peach */

  /* ── Text — dark and legible on light backgrounds ── */
  --color-text-primary: #1a1218;
  --color-text-muted:   #6a5c68;
  --color-text-accent:  #4a3850;

  /* ── Borders ── */
  --color-border:      #d4cdd8;
  --color-border-warm: #c4bab8;

  /* ── Shadows — softer on light bg ── */
  --shadow-glow: 0 4px 24px rgba(192, 112, 96, 0.18);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.7);
  --shadow-deep: 0 8px 40px rgba(0,0,0,0.12);
}

/* Hero — replace photo with CSS sunrise gradient in light mode */
[data-theme="light"] .hero {
  background: linear-gradient(
    180deg,
    #9fb9de 0%,    /* cool blue sky */
    #b4c6de 18%,   /* softening sky */
    #ced2dd 42%,   /* grey-blue horizon zone */
    #ddc4bc 65%,   /* warming towards sunrise */
    #ecc0b4 82%,   /* soft peach glow */
    #f0b7ab 100%   /* warm peachy sunrise */
  );
}

/* Hero text — dark on the light gradient, with soft white glow for legibility */
[data-theme="light"] .hero-content { text-shadow: 0 1px 8px rgba(255,255,255,0.5); }
[data-theme="light"] .hero-name    { color: #1a1218; }
[data-theme="light"] .hero-line1.typing,
[data-theme="light"] .hero-line2.typing,
[data-theme="light"] .hero-suffix.cycling { border-right-color: rgba(26,18,24,0.75); }
[data-theme="light"] .lede         { color: rgba(26,18,24,0.65); }
[data-theme="light"] .location     { color: rgba(26,18,24,0.55); }

/* Scroll content shadow — warm instead of black */
[data-theme="light"] .scroll-content {
  box-shadow: 0 -16px 40px rgba(120, 90, 90, 0.14);
}

/* Nav — always frosted in light mode with warm off-white bg and dark text */
[data-theme="light"] .site-header {
  background: rgba(250, 247, 245, 0.92);
  border-bottom-color: var(--color-border);
}
[data-theme="light"] .site-header .brand          { color: #1a1218; }
[data-theme="light"] .site-header .nav-links a    { color: #6a5c68; }
[data-theme="light"] .site-header .nav-links a:hover { color: #1a1218; }
[data-theme="light"] .site-header .theme-toggle   { color: #6a5c68; }

/* Buttons — flip to dark bg with light text in light mode */
[data-theme="light"] .btn-primary {
  background: #1a1218;
  color: #faf7f5;
  box-shadow: 0 4px 0 #3a2a38;
}
[data-theme="light"] .btn-primary:hover { color: #faf7f5; box-shadow: 0 2px 0 #3a2a38; }

[data-theme="light"] .btn-ghost {
  border-color: rgba(26,18,24,0.35);
  color: #1a1218;
  box-shadow: 0 4px 0 rgba(0,0,0,0.08);
}
[data-theme="light"] .btn-ghost:hover {
  border-color: #1a1218;
  box-shadow: 0 2px 0 rgba(0,0,0,0.08);
}

/* Divider treeline — pick up the light surface color */
[data-theme="light"] .divider          { background: #faf7f5; }
[data-theme="light"] .divider::before  { background: #f0ece8; }

/* Project + beyond card text */
[data-theme="light"] .beyond-card h3  { color: #4a3850; }
[data-theme="light"] .contact-link-item { color: #4a3850; }
[data-theme="light"] .contact-icon-wrapper { background: #f0ece8; border-color: rgba(74,56,80,0.2); }
[data-theme="light"] .contact-link-item:hover .contact-icon-wrapper { background: #e4dcd8; }

/* Mobile nav dropdown in light mode — scoped to mobile only */
@media (max-width: 720px) {
  [data-theme="light"] .nav-links {
    background: #faf7f5;
    border-bottom-color: var(--color-border);
  }
}

/* =============================================
   SCROLL REVEAL
   Elements with .reveal fade + rise in when scrolled
   into view. JS adds .is-visible via IntersectionObserver.
   ============================================= */

.reveal {
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Stagger each card in the work icon grid */
.work-icon-grid .work-icon-card.reveal:nth-child(2) { transition-delay: 60ms; }
.work-icon-grid .work-icon-card.reveal:nth-child(3) { transition-delay: 120ms; }

/* Stagger each playlist card */
.playlist-grid .playlist-card.reveal:nth-child(2) { transition-delay: 70ms; }
.playlist-grid .playlist-card.reveal:nth-child(3) { transition-delay: 140ms; }
.playlist-grid .playlist-card.reveal:nth-child(4) { transition-delay: 210ms; }

/* =============================================
   WORK PAGE / INNER PAGES
   Shared layout for work.html, varchive.html, etc.
   ============================================= */

.page-content { padding-top: 60px; }  /* offset for fixed site-header */

.page-header {
  background: var(--color-bg-surface);
  padding: var(--space-5) 0 var(--space-4);
  position: relative;
}

.page-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-alpine-rose) 25%,
    var(--color-alpine-ember) 75%,
    transparent 100%
  );
  opacity: 0.55;
}
.page-header h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, 5rem);
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-1);
  color: var(--color-text-primary);
}
.page-header p {
  font-family: var(--font-pixel);
  font-size: 0.42rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* Poem block */
.poem {
  max-width: 660px;
  padding-left: var(--space-3);
  border-left: 2px solid color-mix(in srgb, var(--color-alpine-rose) 22%, transparent);
}
.poem-title {
  font-family: var(--font-body);
  font-size: 0.6rem;
  color: var(--color-text-muted);
  letter-spacing: 0.2em;
  text-transform: lowercase;
  margin: 0 0 var(--space-3);
}
.poem-lines { display: flex; flex-direction: column; }
.poem-stanza {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--color-text-primary);
  line-height: 2.1;
  margin: 0 0 var(--space-3);
  font-style: italic;
}
.poem-stanza:last-child { margin-bottom: 0; }

/* Stagger each stanza — delays compound with the reveal transition */
.poem-lines .poem-stanza.reveal:nth-child(2) { transition-delay: 80ms; }
.poem-lines .poem-stanza.reveal:nth-child(3) { transition-delay: 160ms; }
.poem-lines .poem-stanza.reveal:nth-child(4) { transition-delay: 240ms; }

/* Numeric index label above section headings — 01 / 02 / 03 */
.section-index {
  display: block;
  font-family: var(--font-pixel);
  font-size: 0.38rem;
  color: color-mix(in srgb, var(--color-alpine-rose) 70%, transparent);
  letter-spacing: 0.18em;
  margin-bottom: var(--space-1);
}

/* Placeholder "coming soon" block */
.coming-soon {
  font-family: var(--font-pixel);
  font-size: 0.44rem;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border-warm);
  border-bottom: 1px solid var(--color-border-warm);
  padding: var(--space-5) var(--space-3);
  text-align: center;
  margin-top: var(--space-4);
  line-height: 3;
  letter-spacing: 0.1em;
}

/* =============================================
   VARCHIVE — Playlist Cards
   2-col mobile → 4-col desktop grid of image cards,
   each linking to a Spotify playlist in a new tab.
   ============================================= */

.playlist-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-4);
}

@media (min-width: 900px) {
  .playlist-grid { grid-template-columns: repeat(4, 1fr); }
}

.playlist-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .playlist-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-glow), var(--shadow-deep);
  }
}

.playlist-card:active {
  transform: scale(0.97);
  transition: transform 80ms var(--ease-out);
}

.playlist-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.playlist-label {
  padding: var(--space-2);
  font-family: var(--font-pixel);
  font-size: 0.42rem;
  color: var(--color-text-muted);
  line-height: 1.8;
  text-align: center;
}

/* =============================================
   REDUCED MOTION
   Stop ambient loops and speed all transitions to
   near-instant for users who prefer reduced motion.
   ============================================= */

@media (prefers-reduced-motion: reduce) {
  /* Pause ambient decorative loops */
  .star             { animation: none; }
  .lantern-glow     { animation: none; box-shadow: 0 0 10px 4px rgba(248,208,128,0.55); }
  .b-pole::after    { animation: none; }

  /* Collapse reveal / terminal transitions to instant */
  .reveal,
  .t-line,
  .terminal-output  { transition: none; }

  /* Remove blinking typewriter cursor */
  .hero-line1.typing,
  .hero-line2.typing,
  .hero-suffix.cycling {
    animation: none;
    border-right-color: transparent;
  }
}