:root{
  --navy: #0b1f3a;
  --ink: #0a1c33;
  --muted: #50607a;
  
  --bg: #ffffff;
  --bg-soft: #f7faff;
  --line: #e6e8ee;
  
  --accent: #ff7a59;
  --accent-ink: #8c2f1d;
  
  --radius: 16px;
  --container: 1120px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Layout helpers */
.container{max-width:var(--container);margin-inline:auto;padding:0 24px}
.narrow{max-width:820px;margin-inline:auto}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;background:var(--ink);color:#fff;padding:8px 12px;border-radius:8px}

/* Header */
.site-header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:72px}
a.brand,
a.brand:link,
a.brand:visited,
a.brand:hover,
a.brand:active{
  text-decoration:none;color:#000;font-weight:800;letter-spacing:.5px;text-transform:uppercase
}
.nav{display:flex;gap:20px;align-items:center}
.nav a{color:var(--ink);text-decoration:none;font-weight:600;opacity:.9}
.nav a:hover{opacity:1}
.nav .btn{margin-left:8px}

/* Dropdown via <details> for accessibility */
.menu-dropdown{position:relative}
.menu-dropdown > summary{
  list-style:none;cursor:pointer;font-weight:600;opacity:.9
}
.menu-dropdown > summary::-webkit-details-marker{display:none}
.menu-dropdown[open] > summary{opacity:1}
.dropdown{
  position:absolute;top:100%;left:0;min-width:240px;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  visibility:hidden;opacity:0;transform:translateY(8px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s linear;
  pointer-events:none; /* prevent stray hovers when hidden */
}
.dropdown a{display:block;padding:8px 10px;border-radius:8px;color:var(--ink);text-decoration:none;font-weight:500}
.dropdown a:hover{background:var(--bg-soft)}

.menu-dropdown:hover .dropdown,
.menu-dropdown:focus-within .dropdown{
  visibility:visible;opacity:1;transform:translateY(0);
  pointer-events:auto;
}

/* Hover “bridge” to avoid gaps between summary and dropdown */
.menu-dropdown{position:relative}
.menu-dropdown::after{
  content:"";
  position:absolute;left:0;right:0;top:100%;
  height:10px; /* cover the previous gap */
}

/* Optional: style tweak so the summary looks active on hover */
.menu-dropdown:hover > summary{opacity:1}

/* Mobile nav button */
.nav-toggle{
  display:none;background:#fff;border:1px solid var(--line);border-radius:10px;width:40px;height:40px;align-items:center;justify-content:center;cursor:pointer
}
.nav-toggle .bar{display:block;width:22px;height:2px;background:var(--ink);margin:3px 0}

/* Dropdown box */
.menu-dropdown{position:relative}
.menu-dropdown > summary{
  list-style:none;cursor:pointer;font-weight:600;opacity:.9
}
.menu-dropdown > summary::-webkit-details-marker{display:none}

/* Place dropdown flush under the summary */
.dropdown{
  position:absolute;top:100%;left:0;min-width:240px;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
}

/* Hover bridge so leaving the summary doesn't close immediately */
.menu-dropdown::after{
  content:"";
  position:absolute;left:0;right:0;top:100%;
  height:10px;
}

/* Optional: active look on hover/focus */
.menu-dropdown:hover > summary,
.menu-dropdown:focus-within > summary{opacity:1}

/* Hero */
.hero{border-bottom:1px solid var(--line)}
.hero-bright{
  background:
  radial-gradient(1200px 600px at 10% -20%, rgba(255,122,89,.18), transparent 60%),
  radial-gradient(1000px 600px at 90% -30%, rgba(65,105,225,.12), transparent 55%),
  var(--bg);
}
.hero-grid{
  display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;padding:80px 0 48px
}
.headline{
  font-size:clamp(36px, 6vw, 64px);
  line-height:1.05;letter-spacing:-.02em;margin:0 0 12px;color:var(--ink)
}
.lede{margin:0;color:var(--muted);max-width:60ch}
.row{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}

/* Portrait */
.portrait{margin:0;display:flex;justify-content:center}
.portrait-img{
  width:100%;max-width:420px;aspect-ratio:4/5;object-fit:cover;border-radius:20px;
  box-shadow:0 14px 40px rgba(0,0,0,.12);
  outline:6px solid #fff; /* bright edge */
}

/* Sections */
.section{padding:64px 0}
.section-title{
  font-size:clamp(22px, 3vw, 30px);
  margin:0 0 12px;position:relative;color:var(--ink)
}
.section-title::after{
  content:"";display:block;width:56px;height:3px;margin-top:10px;background:rgba(255,122,89,.25);border-radius:2px
}

/* Audio card */
.audio-card{
  margin-top:28px;border:1px solid var(--line);border-radius:16px;padding:16px;background:#fff
}
.audio-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.audio-head h3{margin:0;font-size:18px}
.audio-credit{color:var(--muted);font-size:13px}
.audio-controls{display:flex;align-items:center;gap:10px}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer
}
.icon-btn:hover{background:var(--bg-soft)}
.icon-btn.active{outline:2px solid rgba(255,122,89,.35);outline-offset:2px}
.icon-btn svg{fill:var(--ink)}
.audio-time{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums}

/* Cards */
.section-cards{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cards-grid{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:20px}
.card{
  display:block;border:1px solid var(--line);border-radius:14px;background:#fff;padding:16px;text-decoration:none;color:inherit;
  transition:transform .18s ease, box-shadow .18s ease
}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(0,0,0,.08)}
.card-title{margin:4px 0 6px;font-size:18px}
.card-text{margin:0;color:var(--muted)}

/* Gradient Section */
.section-gradient{background:linear-gradient(90deg, rgba(255,122,89,.12), rgba(65,105,225,.10));border-top:1px solid var(--line)}
.section-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.section-title-inner{margin:0 0 6px}
.section-text-inner{margin:0;color:var(--muted)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:999px;border:1px solid var(--ink);text-decoration:none;font-weight:800}
.btn-sm{padding:8px 14px;font-size:14px}
.btn-lg{padding:12px 20px;font-size:16px}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{transform:translateY(-1px)}
.btn-outline{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-outline:hover{background:var(--bg-soft)}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:32px 0;margin-top:32px;color:#000;text-align:center}
.site-footer a,
.site-footer a:link,
.site-footer a:visited,
.site-footer a:hover,
.site-footer a:active{color:#000;text-decoration:none}
.site-footer a:hover{text-decoration:underline}

/* Responsive (tablet) */
@media (max-width: 1024px){
  .cards-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}

/* SR-only for a11y utilities */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Compact hero for inner pages */
.hero-compact { padding: 64px 0 36px; }

/* Projects */
.section-projects { padding-top: 36px; }

/* Grid */
.project-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:20px;
}
@media (max-width: 1024px){
  .project-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* Card */
.project-card{
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.project-card:hover,
.project-card:focus-within{
  transform:translateY(-3px);
  box-shadow:0 16px 32px rgba(0,0,0,.08);
}

.project-link{ display:block; color:inherit; text-decoration:none; }
.project-figure{ margin:0; position:relative; }
.project-img{
  display:block; width:100%;
  aspect-ratio: 1/1; object-fit:cover; background:#f2f4f8;
}

/* Title-only overlay */
.project-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 16px;
  background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  color:#fff;
}
.project-title{ margin:0; font-size:18px; }

/* Visible focus for keyboard users */
.project-link:focus-visible{
  outline:3px solid rgba(255,122,89,.65);
  outline-offset:3px;
  border-radius:10px;
}

/* --- Search form layout --- */
.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px 20px;
  align-items:end;
}
.form-row{ display:grid; gap:8px; }
.form-row .input{
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  font:inherit; width:100%;
}
.actions{ grid-column: 1 / -1; margin-top:4px; }

/* Pill checkboxes */
.check-pill{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:999px;
  padding:6px 10px; width:max-content; cursor:pointer;
}
.check-pill input{ accent-color: var(--accent); }
.check-pill:hover{ background:var(--bg-soft); }

/* Results toolbar */
.results-toolbar{
  display:flex; align-items:center; justify-content:flex-end; gap:12px;
  margin: 8px 0 12px;
}

/* Make tables scroll on small screens */
.table-scroll{ overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:#fff; }
.table-scroll table{ width:100%; min-width:720px; border-collapse:collapse; }

/* Optional: tidy common table styles if your HTML tables lack them */
.table-scroll th, .table-scroll td{ padding:10px 12px; border-bottom:1px solid var(--line); }
.table-scroll tr:last-child td{ border-bottom:0; }

/* Responsive */
@media (max-width: 900px){
  .form-grid{ grid-template-columns: 1fr; }
  .actions{ margin-top:8px; }
}

/* Small polish for stats deltas */
.delta{ font-size:14px; margin-left:8px; font-weight:700; }
.delta-up{ color:#0c8a44; }        /* green */
.delta-down{ color:#c02a2a; }      /* red */
.delta-flat{ color:var(--muted); } /* gray */

/* Ghost card to keep 4-column balance (hidden border) */
.stat-ghost{ visibility:hidden; }

/* Tracks - Artists Slider */

.switch-wrap {
  display: flex;
  justify-content: center;
  margin: 0 0 1rem;
}

/* Hide native checkbox but keep accessible */
.switch-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Rail + labels */
.switch-ui {
  /* Exact geometry */
  --switch-w: 300px;
  --switch-h: 100px;
  --switch-pad: 0px; /* no gutter so thumb fully covers a half */
  
  font-size: 24px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: center;
  
  width: var(--switch-w);
  height: var(--switch-h);
  padding: var(--switch-pad);
  
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.switch-ui .switch-label-left,
.switch-ui .switch-label-right {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  line-height: 1;
  pointer-events: none;
}

/* Thumb: exactly half width by full height */
.switch-thumb {
  position: absolute;
  top: 0;
  left: 0;                 /* start on Tracks */
  width: 50%;
  height: 100%;
  border-radius: 10px;     /* block with gentle corners */
  
  /* Blue → orange gradient (no muddy mid) */
  background: linear-gradient(135deg, #3b82f6 0%, #3b82f6 60%, #ff7a59 100%);
  border: 1px solid var(--line);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  transition: transform .25s ease;
}

.switch-thumb{
  background: linear-gradient(
    135deg,
    #3b82f6 0%,
    #6aa6fa 40%,
    #ff8f73 60%,
    #ff7a59 100%
  );
}

/* Perceptual blend where supported */
@supports (background: linear-gradient(in oklch, red, blue)) {
  .switch-thumb{
    background: linear-gradient(in oklch 135deg, #3b82f6, #ff7a59);
  }
}

/* Active label colors: white over the thumb, muted otherwise */
#toggle-entity:not(:checked) + .switch-ui .switch-label-left { color: #fff; }
#toggle-entity:not(:checked) + .switch-ui .switch-label-right { color: var(--muted); }
#toggle-entity:checked + .switch-ui .switch-label-left { color: var(--muted); }
#toggle-entity:checked + .switch-ui .switch-label-right { color: #fff; }

/* Slide exactly one half on check */
#toggle-entity:checked + .switch-ui .switch-thumb {
  transform: translateX(100%); /* 100% of its own width = 150px */
}

/* Focus ring: navy, not orange */
#toggle-entity:focus-visible + .switch-ui {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

/* Ensure the thumb always has a transform (no 'none' start state) */
.switch-thumb {
  transform: translateX(0);                  /* explicit base state */
  transition: transform 500ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
  transform-origin: left center;
  backface-visibility: hidden;
  transform: translateX(0) translateZ(0);    /* promote to its own layer */
}

/* Checked state stays as a pure transform change */
#toggle-entity:checked + .switch-ui .switch-thumb {
  transform: translateX(100%) translateZ(0);
}

/* Optional: animate label color for a smoother feel */
.switch-ui .switch-label-left,
.switch-ui .switch-label-right {
  transition: color 220ms cubic-bezier(.2,.8,.2,1);
}

/* iOS/Android flicker guards on the container */
.switch-ui {
  overflow: hidden;
  contain: layout paint;
  -webkit-tap-highlight-color: transparent;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .switch-thumb,
  .switch-ui .switch-label-left,
  .switch-ui .switch-label-right {
    transition: none;
  }
}

/* Center the rendered tables and make them scroll on narrow screens */
.table-center{
  margin-inline:auto;
  max-width:var(--container);
}
.table-scroll{
  overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:#fff; padding:8px;
}
.table-scroll table{
  width:auto; min-width:720px; margin:0 auto; border-collapse:collapse;
}
.table-scroll th, .table-scroll td{ padding:10px 12px; border-bottom:1px solid var(--line); }
.table-scroll tr:last-child td{ border-bottom:0; }

/* Responsive: keep the stats row tidy */
@media (max-width:1024px){
  .stat-ghost{ display:none; }
}

/* 1) Center the cumulative stats block */
.section-numbers .narrow{ text-align:center; }
.section-numbers .stats{ justify-items:center; }  /* centers cards inside grid */

/* 2) Clean table styling: no grid lines, Inter font, centered wrapper */
.table-center{ margin-inline:auto; max-width:var(--container); }
.table-clean{ background:#fff; border:0; padding:0; }
.table-clean table{
  width:auto;
  min-width:720px;
  margin:0 auto;
  border-collapse:separate;
  border-spacing:0;
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-size:16px;
  line-height:1.55;
  color:var(--ink);
}
.table-clean thead th{
  font-weight:700;
  padding:12px 14px;
  background:transparent;
  border:none !important;
}
.table-clean tbody td{
  padding:10px 14px;
  border:none !important;
}
.table-clean tbody tr{ transition: background-color .15s ease; }
.table-clean tbody tr:hover{ background:var(--blue-50); }
.table-clean table, .table-clean th, .table-clean td{ border:0 !important; }

.table-clean td img,
.table-scroll td img{
  border-radius: 10px;
  display: block;       /* avoids tiny inline gaps */
  object-fit: cover;    /* keeps square crops tidy */
}

/* Collapse the gap for the stats section across all viewports */
.section--stats{
  margin-top: -100px;   /* visual lift */
  padding-bottom: 0;
}

/* Tighten spacing between stats and gradient section */
.section--stats + .section-gradient{
  margin-top: 0;
  padding-top: 8px;     /* tweak to taste */
}

/* Trim any residual padding at the end of the list */
.section--stats .table-scroll:last-child{ margin-bottom: 0; }

/* Keep existing table-scroll wrapper functional for narrow screens */
.table-scroll{ overflow-x:auto; border-radius:12px; }

/* Optional: slightly larger numbers in stat cards when centered */
.section-numbers .stat-number{ font-size:clamp(24px, 3.4vw, 30px); }

/* 1) Cumulative stats: make "+" deltas a bit larger and align nicely */
.section-numbers .stat-number{
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  text-align: center;
}


/* Lift the whole stats section */
.section--stats{
  margin-top: -50px;   /* increase magnitude to pull higher */
  padding-top: 0;
  padding-bottom: 0;
}

/* Pull the slider up and keep a tight gap to the tables */
.section--stats .switch-wrap{
  margin: -32px 0 6px; /* top, right/left, bottom */
  position: relative;
  z-index: 2;
}

/* Tighten inside the section so nothing adds extra space */
.section--stats .table-scroll:last-child{ margin-bottom: 0; }
.section--stats .mobile-list{ padding-bottom: 0; }

/* Keep next section snug against stats */
.section--stats + .section-gradient{
  margin-top: 0;
  padding-top: 8px;  /* adjust or set to 0 */
}

.delta{ font-size: 1.05em; line-height: 1; }
@media (min-width: 768px){
  .section-numbers .delta{ font-size: 0.9em; }
}

/* Desktop still uses the clean table */
@media (min-width: 769px){
  .mobile-list{ display:none; }
}

/* Mobile list default hidden for desktop */
.mobile-list { display: none; }

/* ------------------------------ */
/* MOBILE (≤768px) — SINGLE BLOCK */
/* ------------------------------ */
@media (max-width: 768px){
  
  /* Vars (tweak to taste) */
  :root{
    --rank-col: 6.5ch;     /* keep stable rank/caret width */
    --cover-size: 112px;   /* larger covers */
    --row-left-nudge: -10px; /* how far to pull everything left */
  }
  
  /* Header / Nav */
  .nav-toggle{ display:inline-flex; }
  .site-header .nav{ display:none; }
  .site-header .nav.open{
    display:flex; position:absolute; top:72px; right:16px;
    flex-direction:column; background:#fff; border:1px solid var(--line);
    border-radius:12px; padding:12px; gap:12px; min-width:220px;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
  }
  
  /* Hero */
  .hero-grid{ grid-template-columns:1fr; gap:20px; padding:56px 0 36px; }
  .portrait-img{ max-width:360px; }
  
  /* Cards / Projects */
  
  /* Gradient section layout (support both spellings just in case) */
  .section-inner,
  .section-inner{ flex-direction:column; align-items:flex-start; }
  
  /* Hide desktop tables and wrappers */
  .table-clean table,
  .table-clean thead,
  .table-clean tbody,
  .table-clean tr,
  .table-clean td,
  .table-clean th{ display:none !important; }
  .table-clean{
    border:0;
    padding:0;
    background:transparent;
  }
  .table-scroll table { display:none !important; }
  
  .table-scroll.table-clean{
    margin-left: var(--row-left-nudge);
    overflow-x: clip; /* avoid any tiny horizontal scrollbars */
  }
  
  /* Mobile list container */
  .mobile-list{
    list-style: none;
    display: grid;
    gap: 8px;                /* tighter list spacing */
    margin: 0 auto;
    max-width: 620px;
    padding: 0 12px 8px;
    padding-left: 0;
    padding-right: 8px;
  }
  
  /* Mobile item (rank | cover | text) */
  .mobile-item{
    display:grid;
    grid-template-columns: var(--rank-col) var(--cover-size) 1fr;
    column-gap: 10px;
    align-items: center;
    padding: 8px 0;         /* tighter row padding */
    border: 0;              /* remove lines/dividers */
    background: transparent;
    column-gap: 10px;
  }
  
  .mobile-item .mi-rank{
    width:var(--rank-col);
    text-align:right;
    font-variant-numeric: tabular-nums;
    white-space:nowrap;
  }
  
  .mobile-item .mi-cover img{
    width: var(--cover-size);
    height: var(--cover-size);
    border-radius: 10px;
    object-fit: cover;
    display: block;
  }
  
  /* Fixed slot for caret/arrow so digits always align */
  .mobile-item .mi-rank .caret,
  .mobile-item .mi-rank .carrot,   /* if spelled this way in markup */
  .mobile-item .mi-rank .delta,
  .mobile-item .mi-rank .ml-delta,
  .mobile-item .mi-rank [data-delta]{
    display:inline-block;
    width:1.2ch;
    text-align:center;
    margin-right:.2ch;
    line-height:1;
  }
  
  .mobile-item .mi-cover img{
    width:var(--cover-size);
    height:var(--cover-size);
    border-radius:10px;
    object-fit:cover;
    display:block;
  }
  
  .mobile-item .mi-track{ font-weight:700; line-height:1.15; }
  .mobile-item .mi-artist{ color:var(--muted, #6b7280); margin-top:2px; line-height:1.15; }
  .mobile-item .mi-streams{ margin-top:2px; font-variant-numeric: tabular-nums; }
  
  /* Remove any leftover borders from older variants */
  .ml-item{ border:0 !important; background:transparent; }
  
  /* Hero copy centering on mobile */
  .hero-copy,
  .hero-copy .headline{ text-align:center; }
  .hero-copy .lede{ padding:0 16px; }
  .hero-copy .row{
    display:flex; flex-direction:column; align-items:center; gap:8px;
  }
  .hero-copy .row a{ width:auto; }
  
  /* Gradient & numbers alignment */
  .section-gradient .container{
    text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px;
  }
  .section-numbers .narrow{ text-align:left; }
  
  /* Slightly smaller headline on compact hero */
  .hero-compact .headline{ font-size:clamp(26px, 6.5vw, 34px); }
  
  /* Force top-level Projects link visible; keep submenu hidden on mobile */
  .site-header nav,
  .site-header .nav,
  .menu-dropdown{ display:block !important; }
  
  .menu-parent{
    display:inline-block !important;
    padding:8px 0;
  }
  
  #projects-submenu{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  
  .menu-dropdown[open] #projects-submenu,
  .menu-dropdown:hover #projects-submenu,
  .menu-dropdown:focus-within #projects-submenu{
    display:none !important;
  }
  
  .section--stats{
    margin-top: -50px;   /* lifts the whole section; no phantom space */
    padding-top: 0;
    padding-bottom: 0;
  }
  
  /* Tighten inside the section so nothing adds extra space */
  .section--stats .switch-wrap{ margin-bottom: 6px; }    /* slider ↔ list gap */
  .section--stats .table-scroll:last-child{ margin-bottom: 0; }
  .section--stats .mobile-list{ padding-bottom: 0; }     /* your mobile list */
  
  /* Keep next section snug against stats */
  .section--stats + .section-gradient{
    margin-top: 0;
    padding-top: 8px;     /* small breathing room; adjust or set to 0 */
  }
  
}

/* ------------------------------ */
/* END MOBILE (≤768px)            */
/* ------------------------------ */

/* ===== Spotify Wrapped page fixes (2025-08) ===== */

/* 1) Prevent horizontal scroll on small screens */
html, body {
  overflow-x: hidden;
}

/* 2) Make media responsive and never overflow the container */
img, video, canvas, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 3) Center figures and captions */
figure {
  margin: 1.5rem auto;
  text-align: center;
}
figure img {
  margin-inline: auto;
}
figcaption,
.caption {
  display: block;
  margin-top: .5rem;
  font-size: 0.9rem;
  color: #aaa;
  text-align: center;
}

/* 4) Keep article imagery nicely sized but responsive */
.prose figure img,
.prose > img {
  width: 100%;
  max-width: 700px; /* Adjust if you prefer a different cap */
  border-radius: 8px; /* keeps the "rounded" feel */
}

/* 5) Add safe side padding for mobile layouts (if not already present) */
.container {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* 6) Avoid overflow from code blocks or long strings */
pre, code {
  white-space: pre-wrap;
  word-wrap: anywhere;
}

/* 7) Defensive clamp for any inline-styled widths that could cause overflow */
*[style*="width:"] {
  max-width: 100% !important;
}

/* 8) Audio progress bar should not be hoverable/clickable/seekable */
.audio-controls progress {
  pointer-events: none;
}
.audio-controls progress:hover,
.audio-controls progress:active,
.audio-controls progress:focus {
  outline: none;
}

/* ===== Hero audio controls (no progress bar) ===== */
.hero-audio {
  margin-top: 0.75rem;
}
.hero-audio .audio-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.hero-audio .audio-controls .btn {
  padding: 0.5rem 0.85rem;
  border-radius: 6px;
  line-height: 1;
}
.hero-audio .audio-controls .time {
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

/* Defensive: if any legacy styles targeted a <progress>, ensure it's gone visually */
.audio-controls progress {
  display: none !important;
}

/* Hero audio buttons with gradient */
.hero-audio .audio-controls .btn {
  border: none;
  border-radius: 9999px; /* fully rounded */
  padding: 0.5rem 1rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(
    135deg,
    #3b82f6 0%,
    #6aa6fa 40%,
    #ff8f73 60%,
    #ff7a59 100%
  );
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Perceptual blend where supported */
@supports (background: linear-gradient(in oklch, red, blue)) {
  .hero-audio .audio-controls .btn {
    background: linear-gradient(in oklch 135deg, #3b82f6, #ff7a59);
  }
}

/* Optional hover/active effects */
.hero-audio .audio-controls .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.hero-audio .audio-controls .btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

a.hyperlink:link,
a.hyperlink:visited {
  color: #1a73e8; /* pick your shade of blue */
  text-decoration: underline; /* optional */
}

a.hyperlink:hover,
a.hyperlink:focus {
  color: #1558b0; /* darker blue on hover/focus */
}

a.hyperlink:active {
  color: #0d3b82; /* optional active color */
}

@media (min-width: 769px) {
  .stat-label {
    display: flex;
    justify-content: center;
    text-align: center;
  }
}

/* Place the dynamic label next to the H1 without layout jumps */
.hero .headline {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
}
.hero-hover-label {
  opacity: .85;
  white-space: nowrap;
  font-weight: 500;
  transition: opacity .12s ease;
}
@media (max-width: 768px){
  /* Optional: hide on small screens */
  .hero-hover-label { display: none; }
}

/* Screen-reader-only helper */
.sr-only {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* Force black for the hero heading and its hover label */
.hero .headline { color: #000; }
.hero .headline .hero-hover-label { color: #000; opacity: 1; } /* remove/override opacity so it’s true black */

/* Keep heading black */
.hero .headline { color: #000; }
.hero .headline .hero-hover-label { color: #000; }

/* Fade behavior with a 0.5s delay on show */
.hero-hover-label {
  opacity: 0;
  transition: opacity .25s ease;   /* fade duration */
  transition-delay: 0s;            /* no delay when hiding */
}
.hero-hover-label.is-active {
  opacity: 1;
  transition-delay: .5s;           /* wait 0.5s before fading in */
}

/* ---- Results layout & spacing ---- */
:root { --results-max: 900px; }

.section-compact { padding-top: 0.5rem; }
.section + .section { margin-top: 0; }
.banner { margin-top: -2.5rem; }

.results-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.results-center .banner,
.results-center .lede,
.results-center .results-toolbar,
.results-center .spotify-history-table {
  width: 100%;
  max-width: var(--results-max);
  margin-inline: auto;
  text-align: center;
}

.results-center .results-toolbar {
  display: flex;
  justify-content: center;
}

.results-center .spotify-history-table { margin-top: 0.25rem; }

/* ---- Table wrapper (matches History) ---- */
.results-table.spotify-history-table {
  max-width: var(--results-max);
  margin-inline: auto;
  overflow-x: auto;
}

.results-table.spotify-history-table table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: none;
  margin: 0 auto;
  display: table; /* guard against overrides */
}

.results-table.spotify-history-table colgroup col { width: auto !important; }

.results-table.spotify-history-table th,
.results-table.spotify-history-table td {
  text-align: center;
  padding: 0.5rem;
  border: none;
  background: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.results-table.spotify-history-table tr { background: none !important; }

/* Toggle panes safely */
#results-default table,
#results-inverse table { display: table; }

#results-default[hidden],
#results-inverse[hidden] { display: none !important; }

/* ---- Responsive tweaks ---- */
@media (max-width: 640px) {
  .results-table.spotify-history-table th,
  .results-table.spotify-history-table td {
    white-space: normal;
    text-overflow: clip;
    word-break: break-word;
  }
}

/* lava gradient text */
.lava-text{
  /* Base speeds */
  --speed: 4s;        /* primary rhythm for fades */
  --spin-speed: 16s;  /* slow base rotation; seamless */
  
  /* Color palette */
  --o1:#ff8a00; --o2:#ffb000;
  --b1:#2e8cff; --b2:#46c0ff;
  --pu1:#8a3ffc; --pu2:#b07cff;
  --pk1:#ff4f9a; --pk2:#ff77c8;
  
  /* Initial positions/alphas for 6 blobs */
  --x1: 18%; --y1: 24%; --a1: 0;  /* orange */
  --x2: 76%; --y2: 32%; --a2: 0;  /* blue   */
  --x3: 28%; --y3: 82%; --a3: 0;  /* purple */
  --x4: 64%; --y4: 74%; --a4: 0;  /* pink   */
  --x5: 42%; --y5: 18%; --a5: 0;  /* orange (tint) */
  --x6: 58%; --y6: 86%; --a6: 0;  /* blue (tint)   */
  
  /* Rotation angle for the base conic gradient */
  --spin: 0turn;
  
  display:inline-block;
  font-weight:800;
  
  /* 6 semi-opaque “blobs” + 1 opaque base */
  background-image:
    radial-gradient(120% 160% at var(--x1) var(--y1), rgba(255,138,0,var(--a1)) 0 32%, transparent 60%),
    radial-gradient(120% 160% at var(--x2) var(--y2), rgba(46,140,255,var(--a2)) 0 32%, transparent 60%),
    radial-gradient(120% 160% at var(--x3) var(--y3), rgba(138,63,252,var(--a3)) 0 30%, transparent 60%),
    radial-gradient(120% 160% at var(--x4) var(--y4), rgba(255,79,154,var(--a4)) 0 30%, transparent 60%),
    radial-gradient(120% 160% at var(--x5) var(--y5), rgba(255,176,0,var(--a5)) 0 28%, transparent 58%),
    radial-gradient(120% 160% at var(--x6) var(--y6), rgba(70,192,255,var(--a6)) 0 28%, transparent 58%),
    /* Opaque base — lots of stops so no single color dominates */
    conic-gradient(from var(--spin) at 50% 50%,
      var(--o1) 0deg,   var(--pk1) 30deg,
      var(--pu1) 60deg, var(--b1)  90deg,
      var(--o2) 120deg, var(--pk2) 150deg,
      var(--pu2) 180deg,var(--b2)  210deg,
      var(--o1) 240deg, var(--pk1) 270deg,
      var(--pu1) 300deg,var(--b1)  330deg,
      var(--o1) 360deg
    );
  
  background-size: 240% 240%;
  background-repeat:no-repeat;
  background-position: 0 0,0 0,0 0,0 0,0 0,0 0,50% 50%;
  background-blend-mode: normal;
  
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
          color:transparent;
  
  /* Independent, desynchronized motion + seamless rotation */
  animation:
    spin var(--spin-speed) linear infinite,
  
    /* positions wander slowly (non-linear) */
    move1  13.2s cubic-bezier(.25,.7,.25,1) infinite -2.1s,
    move2  15.0s cubic-bezier(.2,.8,.1,1)  infinite -6.7s,
    move3  17.5s cubic-bezier(.3,.6,.2,1)  infinite -4.0s,
    move4  14.1s cubic-bezier(.2,.6,.3,1.2) infinite -9.3s,
    move5  19.3s cubic-bezier(.4,0,.2,1)   infinite -1.5s,
    move6  16.8s cubic-bezier(.3,.4,.2,1)  infinite -7.9s,
  
    /* alphas fade in/out wherever they currently are */
    alpha1 var(--speed) ease-in-out infinite -1.1s,
    alpha2 calc(var(--speed)*1.15) ease-in-out infinite -3.0s,
    alpha3 calc(var(--speed)*.9)  ease-in-out infinite -5.4s,
    alpha4 calc(var(--speed)*1.25) ease-in-out infinite -2.6s,
    alpha5 calc(var(--speed)*1.05) ease-in-out infinite -6.2s,
    alpha6 calc(var(--speed)*.95)  ease-in-out infinite -4.7s;
  
  /* small saturation lift keeps colors vibrant without washing out blue */
  filter:saturate(112%);
}

/* Typed custom properties so variable animation is smooth */
@property --x1 { syntax:'<percentage>'; inherits:false; initial-value:18%; }
@property --y1 { syntax:'<percentage>'; inherits:false; initial-value:24%; }
@property --x2 { syntax:'<percentage>'; inherits:false; initial-value:76%; }
@property --y2 { syntax:'<percentage>'; inherits:false; initial-value:32%; }
@property --x3 { syntax:'<percentage>'; inherits:false; initial-value:28%; }
@property --y3 { syntax:'<percentage>'; inherits:false; initial-value:82%; }
@property --x4 { syntax:'<percentage>'; inherits:false; initial-value:64%; }
@property --y4 { syntax:'<percentage>'; inherits:false; initial-value:74%; }
@property --x5 { syntax:'<percentage>'; inherits:false; initial-value:42%; }
@property --y5 { syntax:'<percentage>'; inherits:false; initial-value:18%; }
@property --x6 { syntax:'<percentage>'; inherits:false; initial-value:58%; }
@property --y6 { syntax:'<percentage>'; inherits:false; initial-value:86%; }

@property --a1 { syntax:'<number>'; inherits:false; initial-value:0; }
@property --a2 { syntax:'<number>'; inherits:false; initial-value:0; }
@property --a3 { syntax:'<number>'; inherits:false; initial-value:0; }
@property --a4 { syntax:'<number>'; inherits:false; initial-value:0; }
@property --a5 { syntax:'<number>'; inherits:false; initial-value:0; }
@property --a6 { syntax:'<number>'; inherits:false; initial-value:0; }

@property --spin { syntax:'<angle>'; inherits:false; initial-value:0turn; }

/* Seamless base rotation (0turn -> 1turn === continuous) */
@keyframes spin { to { --spin: 1turn; } }

/* Wander paths (0% and 100% match to avoid jumps) */
@keyframes move1 {
  0%   { --x1:16%; --y1:22%; }
  35%  { --x1:58%; --y1:38%; }
  70%  { --x1:28%; --y1:72%; }
  100% { --x1:16%; --y1:22%; }
}
@keyframes move2 {
  0%   { --x2:78%; --y2:34%; }
  40%  { --x2:32%; --y2:60%; }
  85%  { --x2:90%; --y2:80%; }
  100% { --x2:78%; --y2:34%; }
}
@keyframes move3 {
  0%   { --x3:26%; --y3:80%; }
  30%  { --x3:72%; --y3:18%; }
  60%  { --x3:18%; --y3:42%; }
  100% { --x3:26%; --y3:80%; }
}
@keyframes move4 {
  0%   { --x4:62%; --y4:72%; }
  45%  { --x4:40%; --y4:16%; }
  90%  { --x4:86%; --y4:52%; }
  100% { --x4:62%; --y4:72%; }
}
@keyframes move5 {
  0%   { --x5:44%; --y5:20%; }
  40%  { --x5:12%; --y5:44%; }
  80%  { --x5:78%; --y5:70%; }
  100% { --x5:44%; --y5:20%; }
}
@keyframes move6 {
  0%   { --x6:56%; --y6:84%; }
  35%  { --x6:86%; --y6:24%; }
  75%  { --x6:22%; --y6:68%; }
  100% { --x6:56%; --y6:84%; }
}

/* Each blob fades wherever it is — no side bias, no cross-screen exits */
@keyframes alpha1 { 0%,18%{--a1:0;} 30%,62%{--a1:.92;} 82%,100%{--a1:0;} }
@keyframes alpha2 { 0%,22%{--a2:0;} 36%,66%{--a2:.90;} 86%,100%{--a2:0;} }
@keyframes alpha3 { 0%,16%{--a3:0;} 32%,58%{--a3:.88;} 84%,100%{--a3:0;} }
@keyframes alpha4 { 0%,20%{--a4:0;} 38%,64%{--a4:.90;} 88%,100%{--a4:0;} }
@keyframes alpha5 { 0%,14%{--a5:0;} 28%,62%{--a5:.86;} 86%,100%{--a5:0;} }
@keyframes alpha6 { 0%,24%{--a6:0;} 40%,70%{--a6:.88;} 90%,100%{--a6:0;} }

/* Optional: ease up on small screens so things don’t collide */
@media (max-width: 768px){
  .section--stats .switch-wrap{ margin-top: -35px; }
}

.section-gradient {
  border-bottom: 1px solid var(--line);
}

.site-footer { 
  border-top: 0;  /* leave this off so you don't get two lines */
}

.headline.lava-text {
  line-height: 1.2;
  padding-bottom: 0.1em;
  overflow: visible;
}

#content[data-404] .container {
  width: 100%;
  max-width: none;
  margin-left: 12.8%;
  margin-right: auto;
}