/* The Wild Blue — one-page website
   Fonts: Figtree, Gloock, Fredericka the Great (SIL Open Font License), self-hosted in /assets/fonts */
@font-face { font-family:'Figtree'; font-style:italic; font-weight:400 800; font-display:swap;
  src:url('../fonts/figtree-italic-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Figtree'; font-style:italic; font-weight:400 800; font-display:swap;
  src:url('../fonts/figtree-italic-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Figtree'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url('../fonts/figtree-normal-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Figtree'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url('../fonts/figtree-normal-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Fredericka the Great'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/fredericka-the-great-normal-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Fredericka the Great'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/fredericka-the-great-normal-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Gloock'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/gloock-normal-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Gloock'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/gloock-normal-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

  :root {
    color-scheme: dark;
    --deep:#030a14;        /* ink-dark ocean, the page ground */
    --abyss:#06142a;       /* raised panels */
    --tide:#0e2a4a;        /* hairlines, quiet fills */
    --foam:#eaf4ff;        /* text */
    --mist:#9fb7cf;        /* secondary text */
    --glint:#7cd0ff;       /* the one accent: the blue glitter in the backdrop */
    --brush:"Gloock", "Iowan Old Style", Georgia, serif;   /* high-contrast display serif */
    --release:"Fredericka the Great", "Gloock", Georgia, serif;   /* release & song titles */
    --sans:"Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
    --gutter:clamp(16px, 5vw, 64px);
  }
  html { scroll-behavior:smooth; }
  html, body { margin:0; background:var(--deep); color:var(--foam); }
  body { font:400 18px/1.65 var(--sans); -webkit-font-smoothing:antialiased; }
  a { color:inherit; }
  ::selection { background:var(--glint); color:var(--deep); }
  :focus-visible { outline:2px solid var(--glint); outline-offset:3px; border-radius:4px; }

  /* ---- hero: the scroll-driven logo animation ---- */
  #stage { position:fixed; inset:0; width:100%; height:100%; display:block; background:var(--deep); z-index:0; }
  .hero { position:relative; z-index:1; }
  #track { height:260vh; }   /* scroll length that forms the logo */
  #hint {
    position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); z-index:2;
    font:600 11px/1.4 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--foam);
    opacity:.75; transition:opacity .6s ease; pointer-events:none; white-space:nowrap; text-shadow:0 1px 8px rgba(0,0,0,.6);
  }
  body.scrolled #hint { opacity:0; }
  #hint span { display:block; width:1px; height:28px; margin:10px auto 0; background:linear-gradient(var(--foam), transparent); animation:drip 1.6s ease-in-out infinite; transform-origin:top; }
  @keyframes drip { 0% { transform:scaleY(0); opacity:1; } 60% { transform:scaleY(1); opacity:1; } 100% { transform:scaleY(1); opacity:0; } }

  /* ---- navigation ---- */
  .nav {
    position:fixed; top:0; left:0; right:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:calc(14px + env(safe-area-inset-top, 0px)) var(--gutter) 14px;
    transition:background .4s ease, backdrop-filter .4s ease, border-color .4s ease; border-bottom:1px solid transparent;
  }
  body.past-hero .nav { background:rgba(3,10,20,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-color:var(--tide); }
  .nav__logo { display:block; width:64px; opacity:0; transform:translateY(-6px); transition:opacity .4s ease, transform .4s ease; }
  body.past-hero .nav__logo { opacity:1; transform:none; }
  .nav__logo img { display:block; width:100%; height:auto; }
  .nav__links { display:flex; gap:clamp(14px, 3vw, 32px); list-style:none; margin:0; padding:0; flex-wrap:wrap; justify-content:flex-end; }
  .nav__links a { font:700 12px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; text-decoration:none; opacity:.85; padding-block:8px; }
  .nav__links a:hover { opacity:1; color:var(--glint); }

  /* ---- content sits on top of the fixed canvas ---- */
  main { position:relative; z-index:2; }
  /* once the content takes over, the animated logo itself recedes behind it as a watermark (see uRecede in the shader) */
  section { padding:clamp(72px, 12vw, 160px) var(--gutter); }
  .wrap { max-width:1180px; margin:0 auto; }
  .eyebrow { font:400 clamp(18px, 1.6vw, 22px)/1.1 var(--brush); letter-spacing:0; color:var(--glint); margin:0 0 16px; }
  .brush { font-family:var(--release); font-weight:400; line-height:1.08; letter-spacing:0; text-wrap:balance; margin:0; }
  h2.brush { font-size:clamp(42px, 6.4vw, 88px); line-height:1.08; }
  p { margin:0; max-width:62ch; }
  .lead { font-size:clamp(20px, 2.1vw, 24px); line-height:1.55; }
  .muted { color:var(--mist); }

  /* bio */
  .bio { display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); gap:clamp(32px, 6vw, 88px); align-items:center; }
  .bio__text { display:grid; gap:26px; }
  .bio__photo { margin:0; position:relative; }
  .bio__photo img { display:block; width:100%; height:auto; border-radius:6px; }
  .bio__photo figcaption { font-size:13px; color:var(--mist); margin-top:10px; }
  .press { margin:6px 0; padding:4px 0 4px 22px; border-left:2px solid var(--glint); max-width:62ch; }
  .press p { font:400 clamp(20px, 2vw, 24px)/1.45 var(--brush); color:var(--foam); }
  .press footer { position:static; z-index:auto; display:block; padding:10px 0 0; border:0; background:none; font-size:14px; color:var(--mist); }
  .press cite { font-style:italic; }
  .tagline { font-family:var(--brush); font-size:clamp(28px, 3.2vw, 40px); color:var(--glint); transform:rotate(-3deg); transform-origin:left; margin-top:6px; }
  .influences { display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:0; }
  .influences li { font:600 14px/1 var(--sans); padding:10px 14px; border:1px solid var(--tide); border-radius:999px; color:var(--foam); }

  /* music */
  .music { background:linear-gradient(180deg, transparent, rgba(6,20,42,.55) 40%, transparent); }
  .music__head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:24px; margin-bottom:clamp(40px, 6vw, 72px); }
  .release { display:grid; grid-template-columns:minmax(0, 360px) minmax(0, 1fr); gap:clamp(28px, 5vw, 64px); align-items:center; margin-bottom:clamp(64px, 9vw, 120px); }
  .release img { display:block; width:100%; height:auto; border-radius:6px; box-shadow:0 30px 80px rgba(0,0,0,.5); }
  .release__meta { display:grid; gap:18px; }
  .release__title { font-family:var(--release); font-weight:400; font-size:clamp(48px, 6vw, 84px); line-height:1.05; margin:0; }
  .btns { display:flex; flex-wrap:wrap; gap:12px; }
  .btn { display:inline-flex; align-items:center; gap:10px; font:700 13px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
         padding:15px 20px; border-radius:999px; border:1px solid var(--foam); transition:background .2s, color .2s, border-color .2s; }
  .btn--solid { background:var(--foam); color:var(--deep); }
  .btn:hover { background:var(--glint); border-color:var(--glint); color:var(--deep); }
  .spotify { width:100%; max-width:560px; min-height:152px; border-radius:12px; overflow:hidden; background:rgba(6,20,42,.7); border:1px solid var(--tide); }
  .spotify iframe { display:block; width:100%; height:352px; border:0; }
  .spotify__fallback { display:grid; gap:12px; padding:22px; justify-items:start; }
  .spotify__label { font:400 19px/1.1 var(--brush); color:var(--glint); }
  body.embeds .spotify { border:0; background:transparent; }
  .videos { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(24px, 3vw, 40px) clamp(16px, 2.4vw, 32px); }
  .video--feature { grid-column:1 / -1; }
  .video--feature .video__title { font-size:clamp(30px, 3.6vw, 48px); }
  .video--feature .video__play { width:76px; height:76px; left:24px; bottom:24px; }
  .video--feature .video__play::after { border-left-width:22px; border-top-width:14px; border-bottom-width:14px; margin-left:6px; }
  .video { display:grid; gap:12px; text-decoration:none; }
  .video__frame { position:relative; aspect-ratio:16/9; max-width:100%; overflow:hidden; border-radius:6px; background:var(--abyss); }
  .video__frame img, .video__frame iframe { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0; display:block; transition:transform .6s ease; }
  .video:hover .video__frame img { transform:scale(1.04); }
  .video:hover .video__play { transform:scale(1.1); }
  .video__play { position:absolute; left:18px; bottom:18px; width:58px; height:58px; transition:transform .3s ease; border-radius:50%; background:var(--foam); display:grid; place-items:center; }
  .video__play::after { content:""; margin-left:4px; border-left:14px solid var(--deep); border-top:9px solid transparent; border-bottom:9px solid transparent; }
  .video__title { font-family:var(--release); font-weight:400; font-size:clamp(22px, 2vw, 28px); line-height:1.2; }
  .video__kind { font-size:13px; color:var(--mist); }

  /* live */
  .live__head { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(24px, 5vw, 64px); align-items:end; margin-bottom:clamp(40px, 6vw, 64px); }
  /* Bandsintown tour dates */
  .dates { margin:0 0 clamp(56px, 8vw, 96px); border-top:1px solid var(--tide); border-bottom:1px solid var(--tide); padding-block:18px; }
  .dates__fallback { display:grid; gap:12px; justify-items:start; padding-block:10px; }
  .dates .bit-widget-container, .dates .bit-widget { font-family:var(--sans) !important; color:var(--foam); }
  .dates .bit-play-my-city-heading-text { color:var(--foam) !important; font:400 clamp(22px, 2.4vw, 30px)/1.2 var(--brush) !important; margin-bottom:14px; }
  .dates .bit-play-my-city-cta { background:var(--glint) !important; color:var(--deep) !important; border-radius:999px !important; border:0 !important; font:700 13px/1 var(--sans) !important; letter-spacing:.12em; text-transform:uppercase; padding:15px 20px !important; }
  .dates .google-pixel-iframe { display:none; }
  /* playful gallery: a loose collage on a 12-column grid, every photo slightly tilted, each one drifting at its own speed */
  .gallery { display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); grid-auto-rows:clamp(34px, 4.6vw, 64px); gap:clamp(10px, 1.4vw, 18px); }
  .gallery figure { margin:0; position:relative; --r:0deg; transform:rotate(var(--r)); transition:transform .5s cubic-bezier(.2,.8,.2,1.2), z-index 0s; z-index:1; }
  .gallery figure > div { width:100%; height:100%; overflow:hidden; border-radius:8px; box-shadow:0 18px 50px rgba(0,0,0,.55); outline:1px solid rgba(234,244,255,.06); }
  .gallery img { display:block; width:100%; height:124%; margin-top:-12%; object-fit:cover; transition:filter .8s ease; filter:saturate(.9); }
  .gallery figure:hover { transform:rotate(0deg) scale(1.04); z-index:3; }
  .gallery figure:hover img { filter:none; }
  .g1  { grid-column:1 / 7;   grid-row:1 / 7;   --r:-2deg; }
  .g2  { grid-column:7 / 10;  grid-row:2 / 6;   --r:2.5deg; }
  .g3  { grid-column:10 / 13; grid-row:1 / 8;   --r:-1.5deg; }
  .g4  { grid-column:7 / 10;  grid-row:6 / 10;  --r:-3deg; }
  .g5  { grid-column:1 / 4;   grid-row:7 / 11;  --r:3deg; }
  .g6  { grid-column:4 / 7;   grid-row:7 / 10;  --r:-1deg; }
  .g7  { grid-column:10 / 13; grid-row:8 / 12;  --r:2deg; }
  .g8  { grid-column:4 / 8;   grid-row:10 / 15; --r:1.5deg; }
  .g9  { grid-column:8 / 13;  grid-row:12 / 16; --r:-2.5deg; }
  .g10 { grid-column:1 / 4;   grid-row:11 / 15; --r:-2deg; }
  .g11 { grid-column:1 / 5;   grid-row:15 / 19; --r:2deg; }
  .g12 { grid-column:5 / 10;  grid-row:15 / 19; --r:-1.5deg; }
  .gallery .note { grid-column:10 / 13; grid-row:16 / 19; align-self:center; justify-self:center; transform:rotate(-6deg); text-align:center; font-family:var(--brush); font-size:clamp(22px, 2.4vw, 32px); line-height:1.15; color:var(--glint); }
  .gallery .note small { display:block; margin-top:8px; font:500 13px/1.4 var(--sans); color:var(--mist); }
  .credit { font-size:13px; color:var(--mist); margin-top:18px; }

  /* contact */
  .contact { text-align:left; border-top:1px solid var(--tide); }
  .contact__grid { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr); gap:clamp(32px, 6vw, 80px); align-items:start; }
  .contact h2.brush { font-size:clamp(52px, 9vw, 128px); }
  .mail { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:28px; }
  .mail__addr { font:700 clamp(20px, 2.6vw, 30px)/1.2 var(--sans); user-select:all; word-break:break-all; }
  .copy { font:700 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; padding:12px 14px; border-radius:999px; background:transparent; color:var(--foam); border:1px solid var(--tide); cursor:pointer; }
  .copy:hover { border-color:var(--glint); color:var(--glint); }
  .socials { list-style:none; padding:0; margin:0; display:grid; }
  .socials a { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0; border-bottom:1px solid var(--tide); text-decoration:none; font-weight:700; font-size:18px; }
  .socials a span { font-weight:400; color:var(--mist); font-size:15px; }
  .socials a:hover { color:var(--glint); }
  footer { position:relative; z-index:2; padding:28px var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px)); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:14px; color:var(--mist); border-top:1px solid var(--tide); }

  .socials a { justify-content:flex-start; }
  .socials a span { margin-left:auto; }
  .socials__icon { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; border:1px solid var(--tide); flex:none; transition:border-color .2s, background .2s, color .2s; }
  .socials__icon svg, .footer__social svg { width:18px; height:18px; display:block; }
  .socials a:hover .socials__icon { border-color:var(--glint); color:var(--glint); }
  .footer__social { display:flex; gap:10px; list-style:none; margin:0; padding:0; }
  .footer__social a { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; border:1px solid var(--tide); color:var(--foam); transition:border-color .2s, background .2s, color .2s; }
  .footer__social a:hover { border-color:var(--glint); color:var(--glint); }
  footer { align-items:center; }
  /* lightbox for the live photos */
  .gallery figure { cursor:zoom-in; }
  .gallery figure:focus-visible { outline:2px solid var(--glint); outline-offset:6px; border-radius:10px; }
  .lightbox { width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0; border:0; background:transparent; color:var(--foam); overflow:hidden; }
  .lightbox::backdrop { background:rgba(3,10,20,.92); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
  .lightbox[open] { display:grid; place-items:center; }
  .lightbox__stage { margin:0; display:grid; gap:14px; justify-items:center; padding:clamp(56px, 7vw, 80px) clamp(16px, 8vw, 110px); max-width:100%; max-height:100%; box-sizing:border-box; }
  .lightbox__img { display:block; max-width:min(1200px, 100%); max-height:calc(100vh - 170px); width:auto; height:auto; border-radius:8px; box-shadow:0 30px 90px rgba(0,0,0,.6); user-select:none; -webkit-user-drag:none; }
  .lightbox__cap { display:flex; gap:18px; justify-content:space-between; width:100%; font-size:15px; color:var(--mist); }
  .lightbox__count { font-variant-numeric:tabular-nums; white-space:nowrap; }
  .lightbox__btn { position:fixed; display:grid; place-items:center; width:52px; height:52px; border-radius:50%; border:1px solid var(--tide); background:rgba(6,20,42,.8); color:var(--foam); font:400 34px/1 var(--sans); cursor:pointer; transition:background .2s, color .2s, border-color .2s; }
  .lightbox__btn:hover { background:var(--glint); border-color:var(--glint); color:var(--deep); }
  .lightbox__close { top:calc(16px + env(safe-area-inset-top, 0px)); right:16px; font-size:30px; }
  .lightbox__prev { left:16px; top:50%; transform:translateY(-50%); }
  .lightbox__next { right:16px; top:50%; transform:translateY(-50%); }
  @media (max-width: 560px) { .lightbox__prev, .lightbox__next { top:auto; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); transform:none; } .lightbox__img { max-height:calc(100vh - 220px); } }
  /* scroll-in animation helpers */
  .w { display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.1em; margin-bottom:-.1em; }
  .wi { display:inline-block; will-change:transform; }
  @media (max-width: 860px) {
    .bio, .release, .live__head, .contact__grid { grid-template-columns:minmax(0, 1fr); }
    .videos { grid-template-columns:minmax(0, 1fr); }
    .gallery { grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-rows:auto; gap:14px; }
    .gallery figure { grid-column:auto; grid-row:auto; aspect-ratio:4/5; }
    .gallery figure:nth-child(3n+1) { grid-column:1 / -1; aspect-ratio:3/2; }
    .gallery .note { grid-column:1 / -1; grid-row:auto; padding-block:12px; }
    .release img { max-width:420px; }
  }
  @media (max-width: 560px) {
    body { font-size:17px; }
    .nav__links { gap:14px; }
    .nav__links a { font-size:11px; letter-spacing:.12em; }
    .nav__logo { width:48px; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    #hint span { animation:none; }
    .gallery img, .video__frame img { transition:none; }
  }

  /* ---- accessibility & fallbacks ---- */
  [hidden] { display:none !important; }
  .sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  .skip { position:fixed; left:16px; top:-60px; z-index:20; padding:12px 16px; border-radius:8px; background:var(--foam); color:var(--deep); font-weight:700; text-decoration:none; }
  .skip:focus { top:16px; }
  /* static hero for browsers without JavaScript or WebGL */
  .hero-fallback { display:none; position:fixed; inset:0; z-index:0; background:var(--deep) url('../img/hero-static.jpg') center / cover no-repeat; }
  .no-webgl .hero-fallback, .no-js .hero-fallback { display:block; }
  .no-webgl #stage, .no-js #stage { display:none; }
  .no-js #track, .no-webgl #track { height:100vh; }
  .no-js #hint, .no-webgl #hint { display:none; }
  .no-js .nav__logo { opacity:1; transform:none; }
  .mail__addr { text-decoration:none; }
  .mail__addr:hover { color:var(--glint); }