/* Self-hosted fonts (Big Shoulders Display, Manrope, JetBrains Mono) —
   no external requests to fonts.googleapis.com / fonts.gstatic.com */
@font-face{
  font-family:'Big Shoulders Display';
  font-style:normal; font-weight:500; font-display:swap;
  src:url('/assets/fonts/big-shoulders-display-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Big Shoulders Display';
  font-style:normal; font-weight:700; font-display:swap;
  src:url('/assets/fonts/big-shoulders-display-latin-700-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Big Shoulders Display';
  font-style:normal; font-weight:900; font-display:swap;
  src:url('/assets/fonts/big-shoulders-display-latin-900-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Manrope';
  font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/manrope-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Manrope';
  font-style:normal; font-weight:500; font-display:swap;
  src:url('/assets/fonts/manrope-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Manrope';
  font-style:normal; font-weight:600; font-display:swap;
  src:url('/assets/fonts/manrope-latin-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Manrope';
  font-style:normal; font-weight:700; font-display:swap;
  src:url('/assets/fonts/manrope-latin-700-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Manrope';
  font-style:normal; font-weight:800; font-display:swap;
  src:url('/assets/fonts/manrope-latin-800-normal.woff2') format('woff2');
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal; font-weight:500; font-display:swap;
  src:url('/assets/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
}
:root{
    --navy-950:#060B14; --navy-900:#0B1526; --navy-800:#101E36;
    --ice-300:#A9C3E0; --gold-400:#E3AE5E;
    --fog-100:#EDF1F7; --fog-400:#8A97AE; --fog-500:#6C7890;
    --glass-ink:var(--fog-100); --glass-ink-soft:var(--fog-100); --glass-gold:var(--gold-400);
  }
  html, body{
    height:100%;
    overscroll-behavior:none;
  }
  body{
    background:var(--navy-950);
    color:var(--fog-100);
    font-family:'Manrope',sans-serif;
    overflow:hidden; /* single screen, no scroll, by design */
  }
  .font-display{font-family:'Big Shoulders Display',sans-serif;}
  .font-mono{font-family:'JetBrains Mono',monospace;}

  .app-h{ height:100svh; }

  .grain{
    position:fixed; inset:0; pointer-events:none; z-index:40; opacity:0.025;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .eyebrow{ font-family:'JetBrains Mono',monospace; letter-spacing:0.18em; font-size:0.68rem; text-transform:uppercase; }

  /* link rows */
  .link-row{
    display:flex; align-items:center; gap:clamp(0.6rem,1.6vw,1rem);
    padding:clamp(0.5rem,1.3vh,0.85rem) 0;
    border-bottom:1px solid rgba(20,28,43,0.12);
    color:var(--glass-ink);
    cursor:pointer;
    text-decoration:none;
    background:none; border-left:none; border-right:none; border-top:none;
    text-align:left; width:100%;
    transition:padding-left .25s ease, color .25s ease;
  }
  .link-row:first-child{ border-top:1px solid rgba(20,28,43,0.12); }
  .link-row:hover, .link-row:focus-visible{
    padding-left:0.4rem;
    color:var(--glass-gold);
  }
  .link-row .label{
    font-family:'Big Shoulders Display',sans-serif;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.01em;
    font-size:clamp(1rem,2.7vh,1.55rem);
    flex:1;
    line-height:1;
  }
  .link-row .arrow{ display:inline-block; opacity:0; transform:translateX(-4px); transition:opacity .25s ease, transform .25s ease; }
  .link-row:hover .arrow, .link-row:focus-visible .arrow{ opacity:1; transform:translate(0,0); }

  /* translucent glass panel over the full-bleed photo */
  .glass-panel{
    background:rgba(255,255,255,0.52);
    transform:translateZ(0);
    will-change:backdrop-filter;
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
    .glass-panel{
      background:rgba(255,255,255,0.30);
      backdrop-filter:blur(22px);
      -webkit-backdrop-filter:blur(22px);
    }
  }

  /* modal cards get the same white frosted-glass treatment as the side panel */
  .card-panel{
    background:rgba(255,255,255,0.55);
    transform:translateZ(0);
    will-change:backdrop-filter;
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
    .card-panel{
      background:rgba(255,255,255,0.32);
      backdrop-filter:blur(24px);
      -webkit-backdrop-filter:blur(24px);
    }
  }

  /* WHITE GLASS MODE — the panel/modals are now light, so text, borders and
     hover accents inside them need to flip from light-on-dark to dark-on-light.
     Scoped to .glass-panel/.card-panel only — the photo area and its captions
     stay light-on-dark as before, since they still sit on the dark photo.
     Each rule covers both "element has the utility class itself" and
     "utility class is on a descendant", since both patterns occur in the markup. */
  .glass-panel.text-fog-100, .card-panel.text-fog-100,
  .glass-panel .text-fog-100, .card-panel .text-fog-100{ color:var(--glass-ink); }

  .glass-panel.text-fog-400, .card-panel.text-fog-400,
  .glass-panel .text-fog-400, .card-panel .text-fog-400{ color:var(--glass-ink-soft); }

  .glass-panel.text-fog-500, .card-panel.text-fog-500,
  .glass-panel .text-fog-500, .card-panel .text-fog-500{ color:var(--glass-ink-soft); }

  .glass-panel.text-gold-400, .card-panel.text-gold-400,
  .glass-panel .text-gold-400, .card-panel .text-gold-400{ color:var(--glass-gold); }

  .glass-panel.hover\:text-gold-400:hover, .card-panel.hover\:text-gold-400:hover,
  .glass-panel .hover\:text-gold-400:hover, .card-panel .hover\:text-gold-400:hover{ color:var(--glass-gold); }

  .glass-panel.hover\:text-fog-100:hover, .card-panel.hover\:text-fog-100:hover,
  .glass-panel .hover\:text-fog-100:hover, .card-panel .hover\:text-fog-100:hover{ color:var(--glass-ink); }

  .glass-panel.hover\:border-gold-400:hover, .card-panel.hover\:border-gold-400:hover,
  .glass-panel .hover\:border-gold-400:hover, .card-panel .hover\:border-gold-400:hover{ border-color:var(--glass-gold); }

  .glass-panel.border-white\/10, .card-panel.border-white\/10,
  .glass-panel .border-white\/10, .card-panel .border-white\/10{ border-color:rgba(20,28,43,0.12); }

  .glass-panel.border-white\/15, .card-panel.border-white\/15,
  .glass-panel .border-white\/15, .card-panel .border-white\/15{ border-color:rgba(20,28,43,0.15); }

  .glass-panel.bg-white\/10, .card-panel.bg-white\/10,
  .glass-panel .bg-white\/10, .card-panel .bg-white\/10{ background-color:rgba(20,28,43,0.12); }

  .glass-panel .placeholder-fog-500::placeholder, .card-panel .placeholder-fog-500::placeholder{ color:var(--glass-ink-soft); }

  /* geometric signature: turntable ring */
  .ring{
    position:absolute; border-radius:9999px; border:1px solid rgba(169,195,224,0.28);
  }
  .ring-spin{ animation:spin 90s linear infinite; }
  .ring-spin-slow{ animation:spin 140s linear infinite reverse; }
  @keyframes spin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }

  @media (prefers-reduced-motion: reduce){
    .ring-spin, .ring-spin-slow{ animation:none; }
  }

  /* full-bleed photo behind both columns; the left panel sits on top, translucent */
  .visual-bg{
    background-image:
      linear-gradient(100deg, rgba(6,11,20,0.35) 0%, rgba(6,11,20,0.12) 55%, rgba(6,11,20,0.5) 100%),
      url('https://images.pexels.com/photos/8448561/pexels-photo-8448561.jpeg?auto=compress&cs=tinysrgb&w=1920');
    background-size:cover;
    background-position:center 32%;
  }
  @media (max-width: 1024px){
    .visual-bg{
      background-image:
        linear-gradient(180deg, rgba(6,11,20,0.25) 0%, rgba(6,11,20,0.55) 100%),
        url('https://images.pexels.com/photos/8448561/pexels-photo-8448561.jpeg?auto=compress&cs=tinysrgb&w=900');
      background-position:center 25%;
    }
  }

  a:focus-visible, button:focus-visible{ outline:2px solid var(--gold-400); outline-offset:3px; }
  ::selection{ background:var(--gold-400); color:var(--navy-950); }

  /* entrance */
  .fade-up{ opacity:0; transform:translateY(10px); animation:fadeUp .7s ease forwards; }
  @keyframes fadeUp{ to{ opacity:1; transform:translateY(0); } }

  /* modal */
  .modal-panel{
    max-height:min(820px, 95svh);
  }

  /* marquee: LED-ticker style scroll for track titles too long to fit */
  .marquee-track{
    display:inline-flex;
    white-space:nowrap;
    animation-name:marqueeScroll;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
  }
  .marquee-item{
    padding-right:2.5rem;
  }
  @keyframes marqueeScroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce){
    .marquee-track{ animation:none; }
  }

  /* volume popover: no box, no border — just the vertical slider, animated in */
  .volume-popover{
    position:absolute;
    bottom:100%;
    left:50%;
    margin-left:-12px;
    margin-bottom:10px;
    width:24px;
    height:84px;
    display:none;
    align-items:center;
    justify-content:center;
    transform-origin:bottom center;
  }
  .volume-popover.is-open{
    display:flex;
    animation:volumePop .18s ease;
  }
  @keyframes volumePop{
    from{ opacity:0; transform:scale(0.85); }
    to{ opacity:1; transform:scale(1); }
  }
  .volume-slider-vertical{
    -webkit-appearance:none;
    appearance:none;
    width:70px;
    height:2px;
    background:rgba(20,28,43,0.18);
    border-radius:9999px;
    outline:none;
    transform:rotate(-90deg);
  }
  .volume-slider-vertical::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:9px; height:9px;
    border-radius:9999px;
    background:var(--glass-gold);
    cursor:pointer;
  }
  .volume-slider-vertical::-moz-range-thumb{
    width:9px; height:9px;
    border-radius:9999px;
    background:var(--glass-gold);
    border:none;
    cursor:pointer;
  }
  .volume-slider-vertical::-moz-range-track{
    height:2px;
    background:rgba(20,28,43,0.18);
    border-radius:9999px;
  }

  /* Sitio Piola credit (dev/agency attribution link) */
  @font-face{
    font-family:'Piola Bungee';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url('/assets/fonts/piola-bungee.woff2') format('woff2');
  }
  .piola-credit{
    display:flex; align-items:center; gap:6px;
    font-family:'Piola Bungee', system-ui, sans-serif;
    font-size:10px; letter-spacing:.02em; text-transform:uppercase;
    color:inherit; text-decoration:none;
    opacity:.7; transition:opacity .2s ease;
    width:fit-content;
  }
  .piola-credit:hover{ opacity:1; }
  .piola-credit svg{ width:15px; height:auto; flex:none; color:#c6ff3d; }