@font-face{font-family:'Archivo';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/archivo-400-italic.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:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/archivo-400-normal.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:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/archivo-500-normal.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:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/archivo-600-normal.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:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/archivo-700-normal.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:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/archivo-800-normal.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:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;src:url(/fonts/fraunces-italic.woff2) format('woff2')}

      /*
        Design notes (one line per decision)
        Color: plum-black, haze violet and crimson come straight from the band's photos; cream replaces pure white to soften glare on dark.
        Theme: dark only, because the photography is gel-lit in a dark room and the page should feel like that room.
        Display type: Fraunces italic with SOFT and WONK maxed, the closest match to the ball-terminal italic of the band's wordmark.
        Body type: Archivo, a plain workhorse grotesk so the soft display type has something sturdy to sit on.
        Logo: the real wordmark and N.A. monogram, traced from the band's artwork into SVG.
        Motif: the circle, taken from the band's porthole-cropped photos.
        Layout: each section has its own composition (hero field, split listen, offset band, full-color press, uneven next) so the page reads as a set, not a grid.
        Motion: hover and focus only; no loops, no scroll reveals.
      */
      :root{
        --ink:#0d070c;
        --ink-2:#170c16;
        --line:rgba(245,239,230,.14);
        --line-strong:rgba(245,239,230,.32);
        --paper:#f5efe6;
        --paper-2:#b9adb6;
        --violet:#6f1fd6;
        --crimson:#b5112c;
        --crimson-deep:#8a0f26;
        --crimson-ink:#e9c9d3;
        --max:1180px;
        --display:"Fraunces", "Iowan Old Style", Georgia, serif;
        --body:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
      }
      *{box-sizing:border-box}
      html{scroll-behavior:smooth; scroll-padding-top:72px}
      @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none !important} }
      body{
        margin:0; background:var(--ink); color:var(--paper);
        font-family:var(--body); font-size:17px; line-height:1.6;
        -webkit-font-smoothing:antialiased;
      }
      a{color:inherit}
      img{display:block; max-width:100%; height:auto}
      ::selection{background:var(--crimson); color:var(--paper)}
      .vh{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

      /* Focus: cream ring plus an ink halo, so it reads on haze, crimson and black alike. */
      :focus-visible{outline:3px solid var(--paper); outline-offset:3px; box-shadow:0 0 0 7px var(--ink); border-radius:4px}

      .skip{position:absolute; left:12px; top:-60px; z-index:100; background:var(--paper); color:var(--ink); padding:10px 14px; font-weight:700; text-decoration:none}
      .skip:focus{top:12px}

      .wrap{width:min(var(--max), 100% - 48px); margin-inline:auto}
      @media (max-width:600px){ .wrap{width:calc(100% - 32px)} }

      .display{
        font-family:var(--display); font-style:italic; font-weight:850;
        font-variation-settings:"SOFT" 100, "WONK" 1, "opsz" 72;
        letter-spacing:-.005em; line-height:1.02;
      }

      /* ---------- top bar ---------- */
      .topbar{position:sticky; top:0; z-index:50; background:var(--ink); border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top,0px)}
      .topbar-in{display:flex; align-items:center; gap:8px; min-height:60px}
      .mono{display:flex; align-items:center; min-height:44px; padding:4px 6px 4px 0; color:var(--paper); text-decoration:none}
      .mono svg{height:24px; width:auto}
      .topnav{display:flex; margin-left:auto}
      .topnav a{
        display:flex; align-items:center; min-height:44px; padding:0 12px;
        font-weight:600; font-size:15px; text-decoration:none; color:var(--paper-2);
        border-bottom:2px solid transparent;
      }
      .topnav a:hover{color:var(--paper)}
      .topnav a[aria-current="true"]{color:var(--paper); border-bottom-color:var(--crimson)}
      .top-cta{
        margin-left:8px; display:flex; align-items:center; min-height:44px; padding:0 16px;
        background:var(--crimson); color:var(--paper); font-weight:700; font-size:15px;
        text-decoration:none; border-radius:999px; white-space:nowrap;
      }
      .top-cta:hover{background:#cc1735}
      @media (max-width:760px){ .top-cta{display:none} }
      @media (max-width:420px){ .topnav a{padding:0 9px; font-size:14px} .mono svg{height:20px} }

      /* ---------- hero: the band's own haze photo is the field ---------- */
      .hero{
        background:#5a1a9e url(/images/haze.jpg) center / cover no-repeat;
        color:#fff;
      }
      .hero-in{padding:clamp(56px, 11vw, 136px) 0 clamp(40px, 7vw, 80px)}
      h1.band{margin:0}
      h1.band svg{display:block; width:min(100%, 1040px); height:auto; color:#fff}
      .hero-sub{
        margin:clamp(18px,2.4vw,28px) 0 0; max-width:32em;
        font-size:clamp(18px,2.2vw,23px); line-height:1.45; font-weight:500;
      }
      .release{
        margin-top:clamp(40px,7vw,88px);
        display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,3vw,32px); align-items:center;
        max-width:900px;
      }
      .release img{width:clamp(120px,18vw,196px); border-radius:4px; box-shadow:0 18px 40px rgba(13,7,12,.45)}
      .release h2{margin:0; font-size:clamp(30px,4.6vw,52px)}
      .release .meta{margin:6px 0 18px; font-weight:500}
      .btns{display:flex; flex-wrap:wrap; gap:10px}
      .btn{
        display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 20px;
        font-weight:700; font-size:16px; text-decoration:none; border-radius:999px;
        border:2px solid transparent;
      }
      .btn svg{width:20px; height:20px; flex:none}
      .btn-cream{background:var(--paper); color:var(--ink)}
      .btn-cream:hover{background:#fff}
      .btn-line{border-color:currentColor}
      .btn-line:hover{background:rgba(255,255,255,.12)}
      .btn-red{background:var(--crimson); color:var(--paper)}
      .btn-red:hover{background:#cc1735}
      @media (max-width:560px){
        .release{grid-template-columns:1fr}
        .release img{width:150px}
      }

      /* ---------- shared section bits ---------- */
      section h2.display{margin:0; font-size:clamp(36px,5.6vw,64px)}
      .lede{margin:10px 0 0; color:var(--paper-2); max-width:34em}

      /* ---------- listen ---------- */
      #listen{padding:clamp(56px,8vw,96px) 0 clamp(48px,7vw,80px)}
      .listen-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,5vw,64px); margin-top:clamp(24px,4vw,40px); align-items:start}
      @media (max-width:860px){ .listen-grid{grid-template-columns:1fr} }
      .player{position:relative; border-radius:12px; overflow:hidden; background:var(--ink-2); min-height:352px}
      .player .loading{position:absolute; inset:0; display:grid; place-items:center; color:var(--paper-2); font-size:15px; padding:20px; text-align:center}
      .player iframe{position:relative; display:block; width:100%; height:352px; border:0}
      .player-fallback{margin:12px 0 0; font-size:15px; color:var(--paper-2)}
      .player-fallback a{color:var(--paper)}
      .plats{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
      .plats li{border-bottom:1px solid var(--line)}
      .plats a{display:flex; align-items:center; gap:16px; padding:18px 4px; min-height:64px; text-decoration:none}
      .plats svg{width:24px; height:24px; flex:none; color:var(--paper)}
      .plats .nm{display:block; font-weight:700; font-size:18px}
      .plats .ds{display:block; color:var(--paper-2); font-size:15px}
      .text-links svg{width:20px; height:20px; flex:none}
      .plats a:hover .nm{text-decoration:underline; text-underline-offset:4px}
      .numbers{margin-top:clamp(40px,6vw,64px); padding-top:24px; border-top:1px solid var(--line)}
      .numbers h3{margin:0 0 18px; font-size:15px; font-weight:600; color:var(--paper-2)}
      .numbers dl{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px 32px; margin:0}
      @media (max-width:700px){ .numbers dl{grid-template-columns:1fr} }
      .numbers div{display:flex; flex-direction:column-reverse; gap:4px}
      .numbers dd{margin:0; font-size:clamp(40px,5vw,56px)}
      .numbers dt{color:var(--paper-2); font-size:15px; max-width:22em}

      /* ---------- band: the circle photo is the motif ---------- */
      #band{padding:clamp(56px,9vw,120px) 0; background:var(--ink-2); border-block:1px solid var(--line)}
      .band-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(32px,6vw,80px); align-items:center}
      @media (max-width:860px){ .band-grid{grid-template-columns:1fr} }
      .porthole{margin:0; width:100%; max-width:480px}
      .porthole img{width:100%; aspect-ratio:1; border-radius:50%; object-fit:cover}
      @media (max-width:860px){ .porthole{max-width:340px; margin-inline:auto} }
      .band-copy p{margin:0 0 16px; max-width:36em; color:var(--paper-2)}
      .band-copy p.first{font-size:clamp(19px,2vw,22px); color:var(--paper); line-height:1.5}
      .band-copy .loud{margin:28px 0 32px; font-size:clamp(34px,4.4vw,50px); color:var(--paper)}
      .facts{margin:0; display:grid; grid-template-columns:auto 1fr; gap:0; border-top:1px solid var(--line); max-width:560px}
      .facts dt, .facts dd{padding:11px 0; border-bottom:1px solid var(--line); margin:0}
      .facts dt{color:var(--paper-2); padding-right:24px; font-size:15px}
      .facts dd{font-weight:600; overflow-wrap:anywhere}
      .facts a{text-underline-offset:3px}

      /* ---------- press: full crimson field ---------- */
      #press{background:var(--crimson-deep); color:var(--paper); padding:clamp(56px,8vw,104px) 0}
      #press .lede{color:var(--crimson-ink)}
      .quotes{margin-top:clamp(28px,4vw,48px); display:grid; gap:clamp(36px,5vw,56px)}
      .quote{margin:0; max-width:820px}
      .quote:nth-child(2){margin-left:auto}
      .quote blockquote{margin:0; font-size:clamp(26px,3.6vw,42px); line-height:1.15}
      .quote figcaption{margin-top:14px; font-weight:600; color:var(--crimson-ink)}
      .quote figcaption a{color:var(--paper); text-underline-offset:3px}

      /* ---------- what's next: two blocks of unequal weight ---------- */
      #next{padding:clamp(56px,8vw,104px) 0}
      .next-grid{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr); gap:clamp(32px,6vw,80px); margin-top:clamp(24px,4vw,40px)}
      @media (max-width:860px){ .next-grid{grid-template-columns:1fr} }
      .album h3{margin:0 0 14px; font-size:clamp(30px,4vw,44px)}
      .album p{margin:0 0 22px; color:var(--paper-2); max-width:32em}
      .shows{border-top:1px solid var(--line-strong); padding-top:20px}
      .shows h3{margin:0 0 8px; font-size:20px; font-weight:700}
      .shows p{margin:0 0 18px; color:var(--paper-2)}
      .text-links{display:flex; flex-wrap:wrap; gap:4px 18px}
      .text-links a{display:inline-flex; align-items:center; gap:8px; min-height:44px; font-weight:700; text-underline-offset:4px}

      /* ---------- footer ---------- */
      footer{border-top:1px solid var(--line); padding:40px 0 calc(40px + env(safe-area-inset-bottom,0px)); background:var(--ink)}
      .foot{display:flex; flex-wrap:wrap; gap:20px 40px; align-items:center; justify-content:space-between}
      .foot .stamp{display:flex; align-items:center; gap:16px; color:var(--paper-2); font-size:15px}
      .foot .stamp span.ring{display:grid; place-items:center; width:64px; height:64px; border-radius:50%; background:var(--violet); color:#fff; flex:none}
      .foot .stamp svg{width:40px; height:auto}
      .foot nav{display:flex; flex-wrap:wrap; gap:0 6px}
      .foot nav a{display:inline-flex; align-items:center; min-height:44px; padding:0 8px; color:var(--paper-2); text-decoration:none; font-weight:600}
      .foot nav a:hover{color:var(--paper); text-decoration:underline; text-underline-offset:4px}
      .foot small{display:block; width:100%; color:var(--paper-2); font-size:14px; border-top:1px solid var(--line); padding-top:18px}
      .foot small a{color:var(--paper)}

      /* ---------- members (shown only when names are filled in) ---------- */
      .members{list-style:none; margin:0 0 22px; padding:0; display:flex; flex-wrap:wrap; gap:6px 28px}
      .members li{font-weight:700; color:var(--paper)}
      .members span{display:block; font-weight:400; color:var(--paper-2); font-size:15px}

      /* ---------- shows ---------- */
      .show-list{list-style:none; margin:0 0 18px; padding:0; border-top:1px solid var(--line)}
      .show-list li{display:grid; grid-template-columns:auto 1fr; gap:4px 18px; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--line)}
      .show-list .when{font-size:24px; grid-row:span 2}
      .show-list .where{font-weight:700}
      .show-list .city{color:var(--paper-2); font-size:15px}
      .show-list a{grid-column:2; justify-self:start; display:inline-flex; align-items:center; min-height:44px; font-weight:700; text-underline-offset:4px}
      .shows-empty[hidden], .show-list li[hidden]{display:none}