/* =============================================================================
   ryderkatz.com — global design system
   -----------------------------------------------------------------------------
   Tokens → primitives → components → page-level overrides
   Per-section accent: body[data-accent] swaps --accent / --accent-2 with a
   transition so chrome (nav, glow, focus rings) shifts as the user scrolls.
============================================================================= */

/* === Tokens =============================================================== */
:root {
  /* Section accents — each pillar of the site has its own color identity. */
  --c-cyan-1:    #22d3ee;
  --c-cyan-2:    #2563eb;
  --c-violet-1:  #c084fc;
  --c-violet-2:  #7c3aed;
  --c-coral-1:   #ff8a5b;
  --c-coral-2:   #ef4444;
  --c-mint-1:    #6ee7b7;
  --c-mint-2:    #059669;
  --c-amber-1:   #fcd34d;
  --c-amber-2:   #d97706;

  /* Active accent — overridden by body[data-accent]. Light mode default. */
  --accent:        var(--c-cyan-1);
  --accent-2:      var(--c-cyan-2);
  --accent-soft:   color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-glow:   color-mix(in srgb, var(--accent) 36%, transparent);
  --accent-fg:     #0a0f1a;

  /* Neutral surfaces (light) */
  --bg:        #fbfbfd;
  --bg-elev:   #ffffff;
  --bg-soft:   #f3f4f7;
  --bg-deep:   #e7e9ee;
  --fg:        #0a0f1a;
  --fg-dim:    #4b5363;
  --fg-mute:   #8a93a3;
  --border:    rgba(10, 15, 26, .08);
  --border-hi: rgba(10, 15, 26, .16);
  --hairline:  rgba(10, 15, 26, .06);

  /* Material — translucent layers used on cards, nav, palette */
  --mat-1:     color-mix(in srgb, var(--bg-elev) 92%, transparent);
  --mat-2:     color-mix(in srgb, var(--bg-elev) 78%, transparent);

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(10,15,26,.04);
  --shadow-sm: 0 2px 8px rgba(10,15,26,.06);
  --shadow-md: 0 12px 28px -10px rgba(10,15,26,.14);
  --shadow-lg: 0 40px 80px -24px rgba(10,15,26,.22);
  --shadow-accent: 0 24px 60px -16px var(--accent-glow);

  /* Type */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Layout */
  --maxw: 1240px;
  --pad-x: clamp(1.25rem, 5vw, 4rem);

  /* Shape */
  --radius:    28px;
  --radius-sm: 18px;
  --radius-xs: 12px;

  /* Motion — apple-flavored curves */
  --ease:        cubic-bezier(.2, .7, .2, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-in:     cubic-bezier(.55, 0, 1, .45);
  --t-fast:      .18s;
  --t-base:      .36s;
  --t-slow:      .8s;
}

:root[data-theme="dark"] {
  --bg:        #07090f;
  --bg-elev:   #0d1118;
  --bg-soft:   #131822;
  --bg-deep:   #1c2230;
  --fg:        #f4f6fb;
  --fg-dim:    #a3acbd;
  --fg-mute:   #5b6478;
  --border:    rgba(244, 246, 251, .08);
  --border-hi: rgba(244, 246, 251, .18);
  --hairline:  rgba(244, 246, 251, .05);

  --mat-1:     color-mix(in srgb, var(--bg-elev) 75%, transparent);
  --mat-2:     color-mix(in srgb, var(--bg-elev) 55%, transparent);

  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 2px 10px rgba(0,0,0,.5);
  --shadow-md: 0 16px 36px -12px rgba(0,0,0,.7);
  --shadow-lg: 0 56px 120px -24px rgba(0,0,0,.9);
  --shadow-accent: 0 28px 80px -16px var(--accent-glow);

  --accent-fg: #04060c;
}

/* Section accents (body[data-accent="…"]) ---------------------------------- */
body[data-accent="cyan"]   { --accent: var(--c-cyan-1);   --accent-2: var(--c-cyan-2); }
body[data-accent="violet"] { --accent: var(--c-violet-1); --accent-2: var(--c-violet-2); }
body[data-accent="coral"]  { --accent: var(--c-coral-1);  --accent-2: var(--c-coral-2); }
body[data-accent="mint"]   { --accent: var(--c-mint-1);   --accent-2: var(--c-mint-2); }
body[data-accent="amber"]  { --accent: var(--c-amber-1);  --accent-2: var(--c-amber-2); }

/* === Base ================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: clip;
  transition: background-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease);
}

::selection { background: var(--accent); color: var(--accent-fg); }

a { color: inherit; text-decoration: none; transition: color var(--t-fast) var(--ease); }
a.link {
  color: var(--accent);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  position: relative;
}
a.link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 1px; background: currentColor;
  transition: right var(--t-base) var(--ease-out);
}
a.link:hover::after { right: 0; }

button { font: inherit; cursor: pointer; }

main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  width: 100%;
}

/* === Background — generative + scrim layers =============================== */
/* The animated canvas (#fx-canvas) sits behind everything.
   Two scrim layers add color depth and warmth without busying the canvas. */
#fx-canvas {
  position: fixed; inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .9;
}
body::before {
  /* Radial accent wash — tracks active accent, breathes */
  content: ""; position: fixed; inset: -20%;
  background:
    radial-gradient(60vw 60vw at 80% -10%, var(--accent-glow), transparent 60%),
    radial-gradient(50vw 50vw at -10% 110%, color-mix(in srgb, var(--accent-2) 28%, transparent), transparent 60%);
  filter: blur(40px);
  z-index: -3;
  pointer-events: none;
  transition: background var(--t-slow) var(--ease);
  animation: breath 18s var(--ease) infinite alternate;
}
body::after {
  /* Fine grain — barely there, breaks up flat fills */
  content: ""; position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .035;
  z-index: 60;
  pointer-events: none;
  mix-blend-mode: overlay;
}

@keyframes breath {
  0%   { transform: translate3d(0,0,0) scale(1);   opacity: .8; }
  100% { transform: translate3d(2%, -1%, 0) scale(1.08); opacity: 1; }
}

/* === Scroll progress bar ================================================== */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 200;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  transition: transform .1s linear, background var(--t-base) var(--ease);
  box-shadow: 0 0 12px var(--accent-glow);
}

/* === Navigation =========================================================== */
/* The nav is fully transparent at the top of the page so chrome reads as
   floating directly over the canvas — no visible "shelf" clashing with the
   generative pattern, and no edge for iOS overscroll bounce to reveal. Once
   the user scrolls past 8px, a blurred translucent surface fades in to give
   the nav its own ground. */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base) var(--ease),
              background var(--t-base) var(--ease),
              backdrop-filter var(--t-base) var(--ease),
              -webkit-backdrop-filter var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.nav[data-stuck] {
  background: var(--mat-1);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  border-bottom-color: var(--hairline);
  box-shadow: var(--shadow-xs);
}
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1rem var(--pad-x);
  display: flex; align-items: center; gap: 1.5rem;
}
.brand {
  font-weight: 800; font-size: 17px; letter-spacing: -0.02em;
  display: flex; align-items: center; gap: .75rem;
}
.brand .mark {
  width: 30px; height: 30px; border-radius: 9px;
  object-fit: cover;
  display: block;
  box-shadow: 0 6px 18px -6px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform var(--t-base) var(--ease-spring);
}
.brand:hover .mark { transform: rotate(-8deg) scale(1.08); }

.nav-spacer { flex: 1; }
.nav-links { display: flex; gap: .25rem; }
.nav-links a {
  padding: .5rem 1rem;
  border-radius: 12px;
  font-weight: 600; font-size: 14px;
  color: var(--fg-dim);
  position: relative;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav-links a:hover { color: var(--fg); background: var(--bg-soft); }
.nav-links a.active {
  color: var(--fg);
}
.nav-links a.active::before {
  content: ""; position: absolute; left: 50%; bottom: -4px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent); transform: translateX(-50%);
  box-shadow: 0 0 8px var(--accent);
}

.nav-tools { display: flex; gap: .5rem; align-items: center; }

/* Buttons ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .9rem;
  border-radius: 12px;
  font-weight: 600; font-size: 14px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg);
  transition: all var(--t-base) var(--ease);
  white-space: nowrap;
}
.btn-bordered {
  background: var(--mat-1);
  border-color: var(--border);
  color: var(--fg-dim);
}
.btn-bordered:hover {
  border-color: var(--accent);
  color: var(--fg);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.btn-square {
  width: 36px; height: 36px; padding: 0;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--mat-1);
  color: var(--fg-dim);
}
.btn-square:hover { color: var(--accent); border-color: var(--accent); }
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-fg);
  border: none;
  box-shadow: 0 12px 28px -10px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -12px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.4); }

.cmdk-btn {
  padding-right: .5rem;
}
.cmdk-btn .label { color: var(--fg-mute); font-weight: 500; }
.cmdk-btn kbd {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  padding: 2px 6px; border-radius: 5px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--fg-dim);
}

/* === Hero ================================================================= */
.hero {
  min-height: clamp(520px, 78vh, 820px);
  padding: clamp(2rem, 6vh, 5rem) 0 clamp(2rem, 4vh, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
/* Hero scrim — softens the canvas behind hero text so the dashboard reads
   distinctly from the rest of the page. Sits above the canvas, below content.
   Tuned to keep some pattern visible at the edges. */
.hero::after {
  content: "";
  position: absolute; inset: 0 -10%;
  background: radial-gradient(ellipse 55% 50% at 30% 55%,
              color-mix(in srgb, var(--bg) 88%, transparent) 0%,
              color-mix(in srgb, var(--bg) 55%, transparent) 35%,
              transparent 70%);
  z-index: 0;
  pointer-events: none;
}
/* Cursor-follow glow. Fixed to the viewport (not bound to the hero box) so
   the gradient runs cleanly to the screen edges and continues to track when
   the cursor moves over the nav. Sits at z-index 1 — below the nav (100) and
   nav controls (which have their own translucent backgrounds), so the nav
   chrome reads as floating on top of the glow rather than blocking it. */
.hero::before {
  content: "";
  position: fixed; inset: 0;
  background: radial-gradient(380px circle at var(--mx, -200px) var(--my, -200px),
              var(--accent-soft), transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
  z-index: 1;
}
.hero[data-cursor]::before { opacity: 1; }
.hero > * { position: relative; z-index: 2; }

.hero .eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--mono);
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--fg-dim);
  margin-bottom: 1.5rem;
  opacity: 0; transform: translateY(8px);
  animation: rise var(--t-slow) var(--ease-out) .1s forwards;
}
.hero .eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: .6; }
  50%      { transform: scale(1.4); opacity: 1; }
}

.hero h1 {
  font-size: clamp(3rem, 9.5vw, 7.5rem);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: .92;
  margin: 0 0 2rem;
}
.hero h1 .line {
  display: block;
  opacity: 0; transform: translateY(20px);
  animation: rise 1s var(--ease-out) forwards;
}
.hero h1 .line:nth-child(2) { animation-delay: .15s; }
.hero h1 .accent {
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer { to { background-position: 200% 0; } }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }

.hero .currently {
  display: inline-flex; align-items: center; gap: .9rem;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--fg-dim);
  opacity: 0;
  animation: rise var(--t-slow) var(--ease-out) .4s forwards;
}
.hero .currently .label {
  background: var(--accent-soft);
  color: var(--accent);
  padding: 6px 12px;
  border-radius: 8px;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .14em;
  font-weight: 700;
}
.hero .currently .word::after {
  content: "▍";
  margin-left: 2px;
  color: var(--accent);
  animation: blink 1.1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Hero stat strip — four equal cards, each carrying its own color identity.
   Music remains the marquee with a stronger tint and a larger value, but
   every card now reads as part of the same dashboard rather than one bright
   slab + neutral fillers. */
.hero-strip {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hairline);
  opacity: 0;
  animation: rise var(--t-slow) var(--ease-out) .6s forwards;
}
@media (max-width: 980px) { .hero-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hero-strip { grid-template-columns: 1fr; } }

.hero-stat {
  --tile-c:  var(--fg-mute);
  --tile-c2: var(--fg-dim);
  display: flex; flex-direction: column;
  padding: 1.25rem 1.4rem;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--tile-c) 22%, var(--border-hi));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--tile-c) 7%, transparent), transparent 65%),
    var(--bg-elev);
  box-shadow: var(--shadow-sm);
  transition: all var(--t-base) var(--ease);
  position: relative; overflow: hidden; isolation: isolate;
  color: inherit;
}
.hero-stat:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--tile-c) 50%, var(--border-hi));
  box-shadow: 0 22px 48px -20px color-mix(in srgb, var(--tile-c) 32%, transparent);
}
.hero-stat .k {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono);
  font-size: 11px; font-weight: 700;
  line-height: 14px;
  text-transform: uppercase; letter-spacing: .14em;
  color: color-mix(in srgb, var(--tile-c) 55%, var(--fg-mute));
  margin-bottom: .6rem;
}
/* Constrain the equalizer to match the .k text height so the music card's
   label line is the same height as the other cards' — keeps "TLR" and the
   hint beneath aligned with the other cards' baselines. */
.hero-stat .k .eq { height: 12px; gap: 2px; }
.hero-stat .k .eq span { width: 2.5px; }
.hero-stat .v {
  font-size: 22px; font-weight: 800; letter-spacing: -.02em;
  line-height: 1.15;
}
.hero-stat .v .accent { color: var(--tile-c); }
.hero-stat .hint {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-mute);
  margin-top: .5rem;
  text-transform: lowercase;
  letter-spacing: .04em;
}

/* Per-card color identities (TLR / education / software / research) */
.hero-stat-music { --tile-c: var(--c-coral-1);  --tile-c2: var(--c-coral-2); }
.hero-stat-edu   { --tile-c: var(--c-mint-1);   --tile-c2: var(--c-mint-2); }
.hero-stat-sw    { --tile-c: var(--c-cyan-1);   --tile-c2: var(--c-cyan-2); }
.hero-stat-res   { --tile-c: var(--c-violet-1); --tile-c2: var(--c-violet-2); }

/* Music — stronger tint, gradient text, larger value */
.hero-stat-music {
  border-color: color-mix(in srgb, var(--tile-c) 40%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--tile-c) 18%, transparent), transparent 70%),
    var(--mat-1);
  box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--tile-c) 36%, transparent);
}
.hero-stat-music:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--tile-c) 65%, var(--border));
  box-shadow: 0 28px 60px -20px color-mix(in srgb, var(--tile-c) 50%, transparent);
}
.hero-stat-music .v {
  font-size: 34px; font-weight: 900; letter-spacing: -.04em;
}
.hero-stat-music .v .accent {
  background: linear-gradient(120deg, var(--tile-c), var(--tile-c2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-stat-music .eq span { background: var(--tile-c); }
:root[data-theme="dark"] .hero-stat .k { color: color-mix(in srgb, var(--tile-c) 70%, var(--fg-mute)); }
:root[data-theme="dark"] .hero-stat-music .k { color: var(--tile-c); opacity: .9; }

/* === Sections ============================================================= */
section { padding: 8rem 0; position: relative; }
section:first-of-type { padding-top: 0; }

.section-head { margin-bottom: 4rem; max-width: 800px; }
.section-num {
  font-family: var(--mono);
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .2em;
  color: var(--accent);
  margin-bottom: 1rem;
  display: inline-flex; align-items: center; gap: .6rem;
}
.section-num::before {
  content: ""; width: 24px; height: 1px; background: var(--accent);
}
.section-head h2 {
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.02;
  margin: 0 0 1rem;
}
.section-head .sub {
  font-size: 18px;
  color: var(--fg-dim);
  max-width: 56ch;
}

/* Prose --------------------------------------------------------------------- */
.prose {
  max-width: 64ch;
  font-size: 19px; line-height: 1.65;
  color: var(--fg-dim);
}
.prose strong { color: var(--fg); font-weight: 700; }
.prose p { margin: 0 0 1.5rem; }
.prose p:last-child { margin-bottom: 0; }

/* === Tiles — multi-layer cards with edge-light ============================ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

.tile {
  --tint: var(--accent);
  position: relative;
  display: flex; flex-direction: column;
  padding: 2rem;
  background: var(--mat-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
  --gx: 50%; --gy: 50%;
}

/* gradient overlay that tracks cursor */
.tile::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(420px circle at var(--gx) var(--gy),
              color-mix(in srgb, var(--tint) 18%, transparent), transparent 60%);
  opacity: 0; transition: opacity var(--t-base) var(--ease);
  pointer-events: none;
}
/* top edge-light */
.tile::after {
  content: ""; position: absolute; top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent,
              color-mix(in srgb, var(--tint) 50%, transparent), transparent);
  opacity: .5;
  transition: opacity var(--t-base) var(--ease);
  z-index: 1;
}
.tile > * { position: relative; z-index: 2; }

.tile:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--tint) 50%, var(--border));
  box-shadow: 0 28px 60px -20px color-mix(in srgb, var(--tint) 30%, transparent),
              0 1px 0 0 color-mix(in srgb, var(--tint) 20%, transparent) inset;
}
.tile:hover::before { opacity: 1; }
.tile:hover::after { opacity: 1; }

.tile-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem;
}
.tile-glyph {
  font-size: 28px;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--tint) 12%, var(--bg-soft));
  color: var(--tint);
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--tint) 24%, var(--border));
  transition: transform var(--t-base) var(--ease-spring);
}
.tile-glyph img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
:root[data-theme="dark"] .tile-glyph img { filter: invert(1); }
.tile:hover .tile-glyph {
  transform: scale(1.08) rotate(-6deg);
}

.tile-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: .5rem;
  line-height: 1.2;
}
.tile-desc {
  color: var(--fg-dim);
  font-size: 15px;
  line-height: 1.55;
}
.tile-footer {
  margin-top: auto;
  padding-top: 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fg-mute);
}
.tile-footer .arrow {
  transition: transform var(--t-base) var(--ease-out);
}
.tile:hover .tile-footer .arrow { transform: translateX(4px); color: var(--tint); }

/* Status pills */
.status {
  font-family: var(--mono);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  padding: 4px 9px;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--fg-dim);
}
.status.live  { background: color-mix(in srgb, var(--c-mint-1) 15%, var(--bg-soft));  color: var(--c-mint-2); border-color: color-mix(in srgb, var(--c-mint-1) 30%, transparent); }
.status.wip   { background: color-mix(in srgb, var(--c-amber-1) 18%, var(--bg-soft)); color: var(--c-amber-2); border-color: color-mix(in srgb, var(--c-amber-1) 36%, transparent); }
.status.idea  { background: color-mix(in srgb, var(--c-violet-1) 14%, var(--bg-soft)); color: var(--c-violet-2); border-color: color-mix(in srgb, var(--c-violet-1) 30%, transparent); }
:root[data-theme="dark"] .status.live { color: var(--c-mint-1); }
:root[data-theme="dark"] .status.wip  { color: var(--c-amber-1); }
:root[data-theme="dark"] .status.idea { color: var(--c-violet-1); }

/* Featured tile (asymmetric) — used for "spotlight" entries */
.tile-feature {
  grid-column: span 2;
  min-height: 280px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--tint) 10%, transparent), transparent 60%),
    var(--mat-1);
}
.tile-feature .tile-title { font-size: 30px; }
.tile-feature .tile-desc  { font-size: 17px; max-width: 50ch; }
@media (max-width: 720px) {
  .tile-feature { grid-column: span 1; }
}

/* === Bento — asymmetric layout ============================================ */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
}
.bento .tile { grid-column: span 2; }
.bento .tile.lg { grid-column: span 3; }
.bento .tile.xl { grid-column: span 4; }
.bento .tile.tall { grid-row: span 2; }
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento .tile, .bento .tile.lg, .bento .tile.xl { grid-column: span 2; }
  .bento .tile.tall { grid-row: span 1; }
}

/* === Music hero =========================================================== */
.music-hero {
  position: relative;
  padding: 3.5rem;
  background: var(--mat-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.music-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 80% at 90% 10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(50% 70% at 0% 100%, color-mix(in srgb, var(--accent-2) 22%, transparent), transparent 70%);
}
@media (max-width: 880px) {
  .music-hero { grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem; }
}

/* Animated equalizer */
.eq {
  display: inline-flex; align-items: flex-end; gap: 3px;
  height: 18px; vertical-align: middle;
}
.eq span {
  width: 3px; background: var(--accent); border-radius: 2px;
  animation: eq 1s var(--ease) infinite;
}
.eq span:nth-child(2) { animation-delay: .15s; }
.eq span:nth-child(3) { animation-delay: .3s;  }
.eq span:nth-child(4) { animation-delay: .45s; }
.eq span:nth-child(5) { animation-delay: .6s;  }
@keyframes eq {
  0%, 100% { height: 30%; }
  50%      { height: 100%; }
}

/* Album cover — either real img (.album-cover-img) or procedural fallback */
.album-cover {
  position: relative;
  width: 100%; max-width: 420px;
  margin: 0 auto;
  aspect-ratio: 1;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: var(--shadow-lg), 0 0 100px -20px var(--accent-glow);
  display: flex; align-items: center; justify-content: center;
  isolation: isolate;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.album-cover:hover {
  transform: translateY(-4px) rotate(-1deg);
  box-shadow: var(--shadow-lg), 0 0 140px -16px var(--accent-glow);
}
.album-cover .mark {
  position: relative; z-index: 1;
  font-size: 80px; font-weight: 900;
  letter-spacing: -.06em;
  color: rgba(255,255,255,.96);
  text-shadow: 0 4px 24px rgba(0,0,0,.2);
}

/* When wrapping an <img>, the image is the cover */
.album-cover-img { background: var(--bg-soft); }
.album-cover-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow) var(--ease-out);
}
.album-cover-img:hover img { transform: scale(1.04); }

/* === Command Palette ====================================================== */
.palette-backdrop {
  position: fixed; inset: 0;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 200;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-base) var(--ease);
}
.palette-backdrop[data-open] { opacity: 1; pointer-events: auto; }

.palette {
  position: fixed;
  top: 14vh; left: 50%;
  transform: translate(-50%, -20px) scale(.96);
  width: min(640px, calc(100% - 2rem));
  background: var(--bg-elev);
  border: 1px solid var(--border-hi);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  z-index: 210;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-spring);
  overflow: hidden;
}
.palette[data-open] {
  opacity: 1; pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}
.palette-input-row {
  display: flex; align-items: center; gap: .9rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  color: var(--fg-dim);
}
.palette-input-row input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--fg); font-size: 16px; font-weight: 500;
}
.palette-output { padding: .5rem; max-height: 52vh; overflow-y: auto; }
.palette-item {
  padding: .75rem 1rem;
  border-radius: 12px;
  display: flex; align-items: center; gap: .9rem;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
  font-size: 14px;
}
.palette-item .kind {
  font-family: var(--mono); font-size: 10px;
  color: var(--fg-mute);
  width: 36px;
  text-transform: uppercase; letter-spacing: .1em;
}
.palette-item .palette-name { font-weight: 600; color: var(--fg); }
.palette-item .palette-desc { color: var(--fg-dim); font-size: 13px; margin-left: auto; }
.palette-item:hover,
.palette-item[aria-selected="true"] {
  background: var(--bg-soft);
}
.palette-item[aria-selected="true"] {
  outline: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}

/* === Reveal animations ==================================================== */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* Stagger children when parent has .stagger */
.stagger > * { transition-delay: 0s; }
.stagger.in > *:nth-child(1) { transition-delay: .04s; }
.stagger.in > *:nth-child(2) { transition-delay: .12s; }
.stagger.in > *:nth-child(3) { transition-delay: .2s;  }
.stagger.in > *:nth-child(4) { transition-delay: .28s; }
.stagger.in > *:nth-child(5) { transition-delay: .36s; }
.stagger.in > *:nth-child(6) { transition-delay: .44s; }

/* === Footer =============================================================== */
footer {
  margin-top: auto;
  padding: 5rem var(--pad-x) 3rem;
  border-top: 1px solid var(--hairline);
  background: var(--bg-elev);
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.footer-brand .brand {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--fg);
}
.footer-desc {
  font-size: 14px;
  color: var(--fg-dim);
  max-width: 28ch;
  line-height: 1.5;
}
.footer-column h4 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-mute);
  margin: 0 0 1.25rem 0;
}
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.footer-nav a {
  font-size: 14px;
  color: var(--fg-dim);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  width: fit-content;
  display: inline-block;
}
.footer-nav a:hover {
  color: var(--accent);
  transform: translateX(4px);
}
.footer-bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hairline);
  font-size: 13px;
  color: var(--fg-mute);
  font-family: var(--mono);
}
.footer-bottom .mono {
  color: var(--fg-dim);
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .footer-inner {
    gap: 3rem;
  }
}

/* === Responsive tweaks ==================================================== */
@media (max-width: 720px) {
  section { padding: 5rem 0; }
  .hero { min-height: 70vh; padding-top: 4vh; }
  .nav-inner { gap: .75rem; }
  .nav-links { display: none; }
  .cmdk-btn .label { display: none; }
  .tile { padding: 1.5rem; }
  .music-hero { padding: 2rem; }
}