:root{
    --paper:#eeece3;
    --ink:#111111;
    --line:#111111;
    --mute:#55524a;
    --splash-bg:#eeece3;
    --splash-ink:#111111;
    --accent:#a83a2c;
    --font-display:'Anton', Impact, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --grain-opacity:0.09;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }

  body{
    background:var(--paper);
    color:var(--ink);
    font-family:-apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:15px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  a{ color:var(--ink); text-decoration:underline; text-decoration-color:rgba(17,17,17,0.35); }
  a:hover{ text-decoration-color:var(--accent); }

  .wrap{
    max-width:640px;
    margin:0 auto;
    padding:0 24px 100px;
  }

  /* ---------- nav ---------- */
  nav{
    padding:28px 24px 40px;
    max-width:640px;
    margin:0 auto;
    display:flex;
    flex-wrap:wrap;
    gap:14px 20px;
    text-transform:uppercase;
    letter-spacing:0.03em;
  }
  nav a{ text-decoration:none; font-weight:800; }
  nav a:hover{ text-decoration:underline; text-decoration-color:var(--accent); }
  nav .sep{ color:var(--mute); font-weight:400; }
  nav a.brand{ display:inline-flex; align-items:center; }
  .brand-mark{ height:18px; width:auto; display:block; }

  /* ---------- generic blocks ---------- */
  .eyebrow{
    display:inline-block;
    border:1.5px solid var(--ink);
    color:var(--ink);
    font-weight:700;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    padding:3px 10px;
    margin:0 0 14px;
  }

  .block{ margin-bottom:56px; }

  /* ---------- band: full-bleed section background, paul-kalkbrenner style
     colour blocking so sections read as distinct chunks while scanning.
     content still lines up with the site's normal 640px/24px column. ---------- */
  .block.band{
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding-top:44px;
    padding-bottom:44px;
    padding-left:max(24px, calc(50vw - 296px));
    padding-right:max(24px, calc(50vw - 296px));
  }
  .block.band-dark{
    background:#111111;
    --ink:#eeece3;
    --mute:#a8a496;
    color:var(--ink);
  }
  .block.band-dark a{ text-decoration-color:rgba(238,236,227,0.35); }
  .block.band-dark a:hover{ text-decoration-color:var(--accent); }
  .block.band-dark .line-list div,
  .block.band-dark .track{ border-color:rgba(238,236,227,0.2); }
  .block.band-dark .vinyl-track-name{ text-decoration-color:rgba(238,236,227,0.3); }
  .block.band-dark .doodle-row svg{ filter:invert(1); }
  .block.band-accent{
    background:var(--accent);
    --mute:#3a1410;
  }

  /* progressive enhancement: only hide-then-reveal once js confirms it can
     actually observe and flip .is-visible back on - so content never gets
     stuck invisible if js fails. each direct child of a .block cascades in
     on its own slight delay, rather than the section moving as one flat
     unit, with a bit of rotation/scale so it feels stamped into place
     rather than just sliding up. */
  .js-reveal .block > *{
    opacity:0;
    transform:translateY(28px) scale(0.96) rotate(-0.6deg);
    transition:opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);
    transition-delay:var(--reveal-delay, 0s);
  }
  .js-reveal .block.is-visible > *{
    opacity:1;
    transform:none;
  }
  .js-reveal .block > *:nth-child(1){ --reveal-delay:0s; }
  .js-reveal .block > *:nth-child(2){ --reveal-delay:.09s; }
  .js-reveal .block > *:nth-child(3){ --reveal-delay:.18s; }
  .js-reveal .block > *:nth-child(4){ --reveal-delay:.27s; }
  .js-reveal .block > *:nth-child(5){ --reveal-delay:.36s; }
  .js-reveal .block > *:nth-child(6){ --reveal-delay:.45s; }
  .js-reveal .block > *:nth-child(n+7){ --reveal-delay:.5s; }

  /* the manifesto grid and doodle row read as one composed unit - cascade
     their own children a beat faster instead of arriving as a single slab */
  .js-reveal .manifesto > div,
  .js-reveal .doodle-row > svg,
  .js-reveal .contact-sheet > .frame{
    opacity:0;
    transform:translateY(14px) scale(0.94);
    transition:opacity .5s ease, transform .5s ease;
    transition-delay:var(--reveal-delay-inner, 0s);
  }
  .js-reveal .block.is-visible .manifesto > div,
  .js-reveal .block.is-visible .doodle-row > svg,
  .js-reveal .block.is-visible .contact-sheet > .frame{
    opacity:1;
    transform:none;
  }
  .js-reveal .manifesto > div:nth-child(1),
  .js-reveal .doodle-row > svg:nth-child(1),
  .js-reveal .contact-sheet > .frame:nth-child(1){ --reveal-delay-inner:.55s; }
  .js-reveal .manifesto > div:nth-child(2),
  .js-reveal .doodle-row > svg:nth-child(2),
  .js-reveal .contact-sheet > .frame:nth-child(2){ --reveal-delay-inner:.62s; }
  .js-reveal .manifesto > div:nth-child(3),
  .js-reveal .doodle-row > svg:nth-child(3),
  .js-reveal .contact-sheet > .frame:nth-child(3){ --reveal-delay-inner:.69s; }
  .js-reveal .manifesto > div:nth-child(4),
  .js-reveal .contact-sheet > .frame:nth-child(4){ --reveal-delay-inner:.76s; }
  .js-reveal .contact-sheet > .frame:nth-child(5){ --reveal-delay-inner:.83s; }
  .js-reveal .contact-sheet > .frame:nth-child(6){ --reveal-delay-inner:.9s; }

  .block p{ max-width:56ch; margin-bottom:14px; }

  /* ---------- media ---------- */
  .media img,
  .media video{
    width:100%;
    display:block;
    filter:grayscale(1) contrast(1.1);
  }
  .media.placeholder{
    aspect-ratio:16/10;
    border:2px solid var(--ink);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--mute);
  }
  .media-caption{
    margin-top:8px;
    color:var(--mute);
  }

  /* hero: a dark media card with a bold condensed title stamped over it,
     gig-poster style. works with just the placeholder fill now, and keeps
     working once a real photo/video is dropped in behind the title. */
  .media.hero{
    position:relative;
    aspect-ratio:1/1;
    max-width:380px;
    margin:10px auto 0;
    border:2px solid var(--ink);
    overflow:hidden;
    display:flex;
    align-items:flex-end;
    padding:20px;
    background:#141312;
  }
  .media.hero img,
  .media.hero video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    z-index:0;
  }

  .hero-title{
    position:relative;
    z-index:1;
    font-family:var(--font-display);
    font-weight:400;
    text-transform:uppercase;
    font-size:clamp(30px, 7.5vw, 68px);
    letter-spacing:0.01em;
    line-height:0.95;
    color:#f3f0e6;
  }
  .media.hero.accent-2 .hero-title{ color:var(--accent); }

  /* ---------- youtube / project embeds ---------- */
  .video-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:10px;
    margin-top:6px;
  }
  .video-embed{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    border:1.5px solid var(--ink);
    overflow:hidden;
  }
  .video-embed iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
  }
  .video-embed.placeholder{
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--mute);
    text-align:center;
    padding:16px;
  }
  .video-caption{
    margin-top:6px;
    font-size:11px;
    line-height:1.3;
    color:var(--mute);
  }
  @media (max-width:520px){
    .video-grid{ grid-template-columns:repeat(2, 1fr); }
  }

  /* ---------- lines / lists ---------- */
  .line-list{ margin-top:6px; }
  .line-list div{
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:6px 0;
    border-bottom:1px solid rgba(17,17,17,0.2);
  }
  .line-list div:first-child{ border-top:1px solid rgba(17,17,17,0.2); }
  .line-list .t{ color:var(--mute); flex-shrink:0; }

  /* ---------- tracks (listen / demos) ---------- */
  .track-list{ margin-top:6px; }
  .track{
    padding:10px 0;
    border-bottom:1px solid rgba(17,17,17,0.2);
  }
  .track:first-child{ border-top:1px solid rgba(17,17,17,0.2); }
  .track-row{
    display:flex;
    justify-content:space-between;
    gap:16px;
  }
  .track-row .t{ color:var(--mute); flex-shrink:0; }
  .track-hint{
    margin:4px 0 0;
    font-size:13px;
    color:var(--mute);
  }
  .track audio,
  .track iframe{
    width:100%;
    margin-top:8px;
    display:block;
    border:0;
  }
  /* ---------- tracklist playlist ----------
     a custom skin driven by the soundcloud widget api. the iframe is
     rendered but visually hidden — every visible control is our own.
     each song is its own bordered card with its own play button,
     title, and progress bar. cards are generated at runtime from
     whatever the linked soundcloud playlist actually contains. */
  .playlist{
    margin-top:6px;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .track-list-more{
    align-self:center;
    margin-top:4px;
    background:none;
    border:1.5px solid var(--ink);
    color:var(--ink);
    font-weight:800;
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:0.08em;
    padding:8px 18px;
    cursor:pointer;
    transition:background .15s ease, color .15s ease;
  }
  .track-list-more:hover{ background:var(--ink); color:var(--paper); }
  .track-card{
    position:relative;
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 16px;
    border:2px solid var(--ink);
    cursor:pointer;
    overflow:hidden;
    transition:background .15s ease, color .15s ease;
  }
  .track-card[hidden]{ display:none; }
  .track-card:hover{ background:rgba(17,17,17,0.05); }
  .track-card.is-active{ background:var(--ink); color:var(--paper); }
  .track-card-toggle{
    flex-shrink:0;
    width:34px;
    height:34px;
    border-radius:50%;
    border:1.5px solid var(--ink);
    background:none;
    color:var(--ink);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:transform .15s ease, border-color .15s ease, color .15s ease;
  }
  .track-card-toggle:hover{ transform:scale(1.08); }
  .track-card.is-active .track-card-toggle{ border-color:var(--paper); color:var(--paper); }
  .track-card-body{
    flex:1;
    min-width:0;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .track-card-num{
    font-family:monospace;
    font-size:11px;
    color:var(--mute);
    flex-shrink:0;
  }
  .track-card.is-active .track-card-num{ color:rgba(255,255,255,0.6); }
  .track-card-title{
    font-weight:800;
    text-transform:uppercase;
    font-size:14px;
    letter-spacing:0.02em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .track-card-time{
    flex-shrink:0;
    font-family:monospace;
    font-size:11px;
    color:var(--mute);
    margin-left:auto;
  }
  .track-card.is-active .track-card-time{ color:rgba(255,255,255,0.7); }
  .track-card-bars{
    display:flex;
    align-items:flex-end;
    gap:2px;
    height:14px;
    margin-left:10px;
    flex-shrink:0;
    opacity:0;
    transition:opacity .2s ease;
  }
  .track-card.is-playing .track-card-bars{ opacity:1; }
  .track-card-bars span{
    width:3px;
    background:var(--accent);
    animation:track-card-bars 0.9s ease-in-out infinite;
  }
  .track-card-bars span:nth-child(1){ height:6px; animation-delay:0s; }
  .track-card-bars span:nth-child(2){ height:14px; animation-delay:.15s; }
  .track-card-bars span:nth-child(3){ height:9px; animation-delay:.3s; }
  .track-card-bars span:nth-child(4){ height:12px; animation-delay:.45s; }
  @keyframes track-card-bars{
    0%, 100%{ transform:scaleY(0.4); }
    50%{ transform:scaleY(1); }
  }
  .track-card-progress{
    position:absolute;
    left:0; right:0; bottom:0;
    height:10px;
    display:flex;
    align-items:flex-end;
    cursor:pointer;
  }
  .track-card-progress::before{
    content:'';
    position:absolute;
    left:0; right:0; bottom:0;
    height:3px;
    background:rgba(17,17,17,0.15);
    transition:height .12s ease, background .15s ease;
  }
  .track-card.is-active .track-card-progress::before{ background:rgba(255,255,255,0.2); }
  .track-card-progress:hover::before{ height:6px; }
  .track-card-progress-fill{
    position:relative;
    height:3px;
    width:0%;
    background:var(--accent);
    transition:width .15s linear, height .12s ease;
  }
  .track-card-progress:hover .track-card-progress-fill{ height:6px; }
  .playlist-frame{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
    overflow:hidden;
    border:0;
  }

  /* ---------- doodles: fine-line, scientific-illustration style ---------- */
  .doodle{
    display:block;
    margin:0 auto 8px;
  }
  .doodle-row{
    display:flex;
    gap:14px;
    margin:10px 0 4px;
  }

  /* ---------- facts ---------- */
  .facts div{ display:flex; gap:8px; padding:4px 0; }
  .facts span{ color:var(--mute); min-width:120px; }

  /* ---------- manifesto (zine-style numbered grid) ---------- */
  .manifesto{
    display:grid;
    grid-template-columns:1fr 1fr;
    border:1.5px solid var(--ink);
    margin-top:16px;
  }
  .manifesto div{
    border:1px solid var(--ink);
    padding:14px;
    font-size:13px;
    line-height:1.4;
  }
  .manifesto .num{
    display:block;
    font-weight:800;
    font-size:11px;
    letter-spacing:0.05em;
    color:var(--mute);
    margin-bottom:6px;
  }
  .manifesto .label{
    display:block;
    text-transform:uppercase;
    font-weight:800;
    font-size:12px;
    letter-spacing:0.04em;
    margin-bottom:4px;
  }

  /* ---------- contact sheet (press photos) ---------- */
  .contact-sheet{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:6px;
    margin-top:6px;
    padding:10px;
    background:var(--ink);
  }
  .frame{
    position:relative;
    aspect-ratio:3/2;
    background:var(--paper);
    overflow:hidden;
    display:flex;
    align-items:flex-end;
  }
  .frame img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    filter:grayscale(1) contrast(1.1);
  }
  .frame-num{
    position:relative;
    z-index:1;
    font-family:monospace;
    font-size:10px;
    font-weight:700;
    color:var(--mute);
    padding:4px 6px;
  }

  footer{
    padding:40px 24px;
    max-width:640px;
    margin:0 auto;
    color:var(--mute);
  }
  .footer-mark{
    height:12px;
    width:auto;
    vertical-align:baseline;
    opacity:0.75;
  }

  /* ---------- splash ---------- */
  html.no-splash #splash{ display:none; }
  html:not(.no-splash){ overflow:hidden; }

  #splash{
    position:fixed;
    inset:0;
    z-index:999;
    background:var(--splash-bg);
    color:var(--splash-ink);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    cursor:pointer;
    transition:opacity .5s ease, visibility .5s ease;
    overflow:hidden;
  }
  #splash .splash-art{
    width:min(70vw, 420px);
    height:auto;
    mix-blend-mode:multiply;
    transition:transform 1.4s ease;
  }
  #splash .splash-art:hover{
    transform:scale(1.12);
  }
  #splash.is-hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }

  /* ---------- now playing bar ---------- */
  .now-playing{
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:900;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:10px 20px;
    background:var(--paper);
    border-top:1.5px solid var(--ink);
  }
  .np-left{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
  }
  .np-eq{
    display:flex;
    align-items:flex-end;
    gap:2.5px;
    height:16px;
    flex-shrink:0;
  }
  .np-eq span{
    width:3px;
    height:100%;
    background:var(--ink);
    opacity:0.35;
    transform:scaleY(0.25);
    transform-origin:bottom;
  }
  .now-playing.is-playing .np-eq span{
    opacity:1;
    animation:np-bounce 0.9s ease-in-out infinite;
  }
  .now-playing.is-playing .np-eq span:nth-child(1){ animation-delay:0s; }
  .now-playing.is-playing .np-eq span:nth-child(2){ animation-delay:0.15s; }
  .now-playing.is-playing .np-eq span:nth-child(3){ animation-delay:0.3s; }
  .now-playing.is-playing .np-eq span:nth-child(4){ animation-delay:0.1s; }
  @keyframes np-bounce{
    0%, 100%{ transform:scaleY(0.25); }
    50%{ transform:scaleY(1); }
  }
  .np-text{
    display:flex;
    flex-direction:column;
    line-height:1.2;
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .np-label{
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:var(--mute);
  }
  .np-title{
    font-weight:800;
    font-size:13px;
  }
  .np-toggle{
    flex-shrink:0;
    background:none;
    border:1.5px solid var(--ink);
    padding:6px 12px;
    font:inherit;
    font-weight:800;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.05em;
    color:var(--ink);
    cursor:pointer;
  }
  .np-toggle:hover{ background:var(--ink); color:var(--paper); }

  #np-player-mount{
    position:fixed;
    width:2px;
    height:2px;
    bottom:0;
    right:0;
    overflow:hidden;
    opacity:0;
    pointer-events:none;
  }

  /* leave room above the fixed now-playing bar so it never covers content */
  body:has(.now-playing:not([hidden])) .wrap,
  body:has(.now-playing:not([hidden])) footer{ padding-bottom:64px; }

  /* ---------- grain ---------- */
  #grain{
    position:fixed;
    inset:0;
    z-index:1000;
    pointer-events:none;
    background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMDAnIGhlaWdodD0nMjAwJz4KICA8ZmlsdGVyIGlkPSduJz4KICAgIDxmZVR1cmJ1bGVuY2UgdHlwZT0nZnJhY3RhbE5vaXNlJyBiYXNlRnJlcXVlbmN5PScwLjknIG51bU9jdGF2ZXM9JzInIHN0aXRjaFRpbGVzPSdzdGl0Y2gnIHJlc3VsdD0ndCcvPgogICAgPGZlQ29sb3JNYXRyaXggaW49J3QnIHR5cGU9J21hdHJpeCcgdmFsdWVzPScwIDAgMCAwIDAgIDAgMCAwIDAgMCAgMCAwIDAgMCAwICAwLjM1IDAuMzUgMC4zNSAwIDAnLz4KICA8L2ZpbHRlcj4KICA8cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyBmaWx0ZXI9J3VybCgjbiknLz4KPC9zdmc+Cg==");
    background-repeat:repeat;
    background-size:200px 200px;
    opacity:var(--grain-opacity);
    animation:grain 1s steps(8) infinite;
  }
  @keyframes grain{
    0%, 100%{ background-position:0 0; }
    10%{ background-position:-5% -10%; }
    20%{ background-position:-15% 5%; }
    30%{ background-position:7% -25%; }
    40%{ background-position:20% 25%; }
    50%{ background-position:-25% 10%; }
    60%{ background-position:15% 5%; }
    70%{ background-position:0% 15%; }
    80%{ background-position:25% 0%; }
    90%{ background-position:-10% 10%; }
  }