@font-face { font-family:"Martian Mono"; font-style:normal; font-weight:100 900;
    font-display:block; src:url(/fonts/martian-mono.woff2) format("woff2"); }

  :root {
    --catline:url(/mark/cat.png);
    --void:#070E12; --ink:#F4F8F9; --quiet:#9DAFB6; --dim:#61757D; --meta:#6E838B;
    --cyan:#4FD8E8; --red:#FF2D46;
    --face:"Martian Mono"; --pad:clamp(18px,4.4vw,72px);
  }
  * { box-sizing:border-box; }
  html { -webkit-text-size-adjust:100%; }
  body { margin:0; background:var(--void); color:var(--ink);
         font-family:var(--face); font-size:11px; line-height:1.8;
         -webkit-font-smoothing:antialiased; }
  a { color:inherit; text-decoration:none; }
  a:focus-visible { outline:1px solid var(--cyan); outline-offset:5px; }
  img { max-width:100%; display:block; }

  .skip { position:absolute; left:-9999px; top:0; z-index:20; padding:10px 16px;
          background:var(--void); border:1px solid var(--cyan); }
  .skip:focus { left:var(--pad); top:12px; }
  .lock { position:relative; width:min(200px,48vw); aspect-ratio:520 / 241; }
  .lock .cat { position:absolute; inset:0; display:block;
    background-image:var(--catline); background-size:contain;
    background-repeat:no-repeat; background-position:center; opacity:.95;
    filter:drop-shadow(0 1px 16px rgba(7,14,18,.92)); }
  .lock canvas { position:absolute; inset:0; width:100%; height:100%; }
  .nav { display:flex; gap:clamp(14px,2.4vw,30px);
         font-size:9px; font-weight:700; letter-spacing:.26em;
         text-transform:uppercase; color:var(--ink); }
  .nav a { text-shadow:0 1px 12px rgba(7,14,18,.95); }
  .nav a:hover { color:var(--cyan); }

  .mast { display:flex; align-items:flex-start; justify-content:space-between;
          gap:18px 32px; flex-wrap:wrap; position:relative; z-index:6;
          padding:clamp(22px,3.6vh,40px) var(--pad) clamp(26px,4vh,40px); }
  
  .mast .lock .cat { filter:none; }
  .mast .nav a { text-shadow:none; }
  .mast .nav a[aria-current] { color:var(--cyan); }

  .beam { position:relative; height:34px; }
  .beam::before {
    content:""; position:absolute; left:0; right:0; top:50%; height:22px;
    transform:translateY(-56%);
    background:linear-gradient(to bottom,
      rgba(79,216,232,0) 0%, rgba(79,216,232,.10) 46%,
      rgba(79,216,232,.22) 72%, rgba(79,216,232,0) 100%);
    filter:blur(5px);
  }
  .beam::after {
    content:""; position:absolute; left:0; right:0; top:calc(50% + 5px); height:1px;
    background:var(--red);
    box-shadow:0 0 2px rgba(255,45,70,.95), 0 0 16px rgba(255,45,70,.55);
  }

  section.band { position:relative; z-index:6;
                 padding:clamp(56px,9vh,104px) var(--pad) clamp(56px,9vh,104px); }
  .eyebrow { margin:0 0 clamp(26px,4vh,44px); display:flex; gap:14px; align-items:baseline;
             font-size:9px; letter-spacing:.28em; text-transform:uppercase; color:var(--dim); }
  .eyebrow b { color:var(--red); font-weight:400; }
  h2 { margin:0 0 22px; font-weight:400; letter-spacing:-.01em;
       font-size:clamp(18px,2.5vw,30px); line-height:1.35; max-width:22ch; text-wrap:balance; }
  .body { margin:0 0 16px; color:var(--quiet); max-width:56ch; }
  .body b { color:var(--ink); font-weight:400; }
  .more { display:inline-block; margin-top:10px; color:var(--ink);
          font-size:9px; letter-spacing:.24em; text-transform:uppercase;
          border-bottom:1px solid rgba(79,216,232,.45); padding-bottom:5px; }
  .more:hover { color:var(--cyan); border-color:var(--cyan); }

  .two { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
         gap:clamp(28px,5vw,86px); align-items:start; }
  
  @media (max-width:820px) { .two { grid-template-columns:1fr; row-gap:0; } }

  .rail { margin:clamp(30px,5vh,46px) 0 0; padding:0; display:grid;
          grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
          background:rgba(157,175,182,.16); border:1px solid rgba(157,175,182,.16); }
  .rail div { background:var(--void); padding:16px 14px; }
  .rail dt { font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--dim); }
  .rail dd { margin:2px 0 0; font-size:clamp(14px,1.6vw,18px); color:var(--ink);
             font-variant-numeric:tabular-nums; line-height:1.4; white-space:nowrap; }
  @media (max-width:640px) { .rail { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  .rail-3 { grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:20px; }
  @media (max-width:640px) { .rail-3 { grid-template-columns:1fr; } }

  .trio { margin:0; padding:0; list-style:none; display:grid;
          grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(22px,3vw,44px);
          margin-top:clamp(26px,4vh,44px); }
  @media (max-width:860px) { .trio { grid-template-columns:1fr; } }
  .trio li { position:relative; padding-top:16px; border-top:1px solid rgba(157,175,182,.2); }
  .trio li::before { content:""; position:absolute; left:0; top:-1px; width:36px; height:1px;
                     background:var(--red); box-shadow:0 0 10px rgba(255,45,70,.6); }
  .tn { display:block; font-size:9px; letter-spacing:.28em; color:var(--red); }
  
  .trio > li > b { display:block; margin-top:8px; font-weight:400; color:var(--ink); }
  .trio p { margin:8px 0 0; color:var(--quiet); }
  .trio p b { display:inline; font-weight:400; color:var(--ink); }

  .sup { color:var(--ink); line-height:2.1; max-width:52ch; }
  
  .sup-wide { max-width:none; column-gap:0; }
  .sup .one { white-space:nowrap; }
  .sup .sep { color:var(--dim); }
  .sup i { font-style:normal; color:var(--dim); }
  .dimmer { color:var(--dim); }

  .grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
          gap:clamp(20px,3vw,40px) clamp(18px,2.4vw,32px); }
  @media (max-width:900px) { .grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media (max-width:520px) { .grid { grid-template-columns:1fr; } }

  .rel { display:block; position:relative; }
  .rel .art { display:block; position:relative; aspect-ratio:1; overflow:hidden;
              background:#0B1519; border:1px solid rgba(157,175,182,.14); }
  .rel .art img { width:100%; height:100%; object-fit:cover;
                  filter:saturate(.92) contrast(1.02); transition:transform .5s ease; }
  .rel:hover .art img { transform:scale(1.03); }
  .rel .art::after {
    content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
    background:var(--red); opacity:0; transition:opacity .25s ease;
    box-shadow:0 0 12px rgba(255,45,70,.7);
  }
  .rel:hover .art::after { opacity:1; }
  .rn { display:block; margin-top:12px; font-size:9px; letter-spacing:.24em; color:var(--red); }
  .rt { display:block; margin-top:5px; color:var(--ink); line-height:1.55; }
  a.rt:hover { color:var(--cyan); }
  .ra { display:block; color:var(--quiet); }
  
  .rm { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:7px;
        font-size:9px; letter-spacing:.16em; text-transform:uppercase;
        color:var(--meta); font-variant-numeric:tabular-nums; }
  .rm .gen { color:var(--quiet); }
  
  .sr-head { position:absolute; width:1px; height:1px; margin:-1px; padding:0;
             overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

  .play {
    position:absolute; inset:0; margin:auto; width:32px; height:32px; padding:0;
    display:grid; place-items:center; cursor:pointer;
    border:1px solid rgba(244,248,249,.5); border-radius:50%;
    background:rgba(7,14,18,.62); color:var(--ink);
    opacity:0; transition:opacity .18s ease, background .18s ease, border-color .18s ease;
    backdrop-filter:blur(2px);
  }
  .play svg { width:17px; height:17px; fill:currentColor; }
  .play .i-pause { display:none; }
  .rel:hover .play, .play:focus-visible { opacity:1; }
  .play:hover { background:rgba(7,14,18,.85); border-color:var(--cyan); color:var(--cyan); }
  
  .rel.on .play { opacity:1; border-color:var(--cyan); color:var(--cyan); }
  .rel.on .play .i-play { display:none; }
  .rel.on .play .i-pause { display:block; }
  .rel.on .art img { filter:saturate(1) contrast(1.02) brightness(.72); }
  @media (hover:none) { .play { opacity:1; } }   

  .bar { display:none; }
  .g-rows .bar, .g-strip .bar, .g-tiles .bar {
    display:block; height:1px; background:rgba(157,175,182,.18); margin-top:8px;
    opacity:0; transition:opacity .2s ease;
  }
  .rel.on .bar { opacity:1; }
  .bar i { display:block; height:100%; width:0; background:var(--cyan);
           box-shadow:0 0 8px rgba(79,216,232,.8); }

  .grid.g-strip { grid-template-columns:repeat(6,minmax(0,1fr));
             gap:clamp(14px,1.6vw,22px); }
  @media (max-width:1080px) { .grid.g-strip { grid-template-columns:repeat(3,minmax(0,1fr)); } }
  @media (max-width:560px)  { .grid.g-strip { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  .g-strip .rn { margin-top:10px; }
  .g-strip .rt { font-size:10px; line-height:1.5; }
  .g-strip .ra { font-size:10px; }
  .g-strip .rm { margin-top:5px; }

  .grid.g-rows { grid-template-columns:1fr; gap:0;
                 border-top:1px solid rgba(157,175,182,.16); }
  
  .grid.g-list { grid-template-columns:1fr; gap:0;
            border-top:1px solid rgba(157,175,182,.16); }
  .g-list .rel { display:grid; align-items:baseline;
                 grid-template-columns:38px minmax(0,3fr) minmax(0,2fr) auto;
                 gap:6px 24px; padding:15px 0 16px;
                 border-bottom:1px solid rgba(157,175,182,.16); }
  .g-list .rel:hover { background:linear-gradient(90deg,rgba(79,216,232,.05),transparent 60%); }
  .g-list .rn { margin:0; }
  .g-list .rt { margin:0; }
  .g-list .ra { color:var(--quiet); }
  .g-list .rm { margin:0; justify-content:flex-end; }
  @media (max-width:720px) {
    .g-list .rel { grid-template-columns:38px minmax(0,1fr); }
    .g-list .ra, .g-list .rm { grid-column:2; }
  }

  .head { display:flex; align-items:baseline; justify-content:space-between;
          gap:16px 30px; flex-wrap:wrap; }

  .routes { margin:0; padding:0; list-style:none; display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
            background:rgba(157,175,182,.16); border:1px solid rgba(157,175,182,.16); }
  .routes li { background:var(--void); }
  .routes a { display:block; padding:20px 18px 22px; height:100%; }
  .routes a:hover { background:#0B1519; }
  
  .routes span { display:block; font-size:9px; letter-spacing:.24em;
                 text-transform:uppercase; color:var(--meta); }
  .routes b { display:block; margin-top:8px; font-weight:400; color:var(--ink); }
  .routes a:hover b { color:var(--cyan); }
  .routes i { display:block; margin-top:6px; font-style:normal; color:var(--quiet); }
  
  .mail { color:var(--ink); border-bottom:1px solid rgba(79,216,232,.45); padding-bottom:3px; }
  .mail:hover { color:var(--cyan); border-color:var(--cyan); }
  @media (max-width:760px) { .routes { grid-template-columns:1fr; } }

  .lead { grid-template-columns:1fr; }
  .lead li { position:relative; padding:20px 18px 22px; }
  .lead li::before { content:""; position:absolute; left:0; top:0; right:0; height:1px;
                     background:var(--red); box-shadow:0 0 10px rgba(255,45,70,.6); }
  
  .lead li a { display:inline; padding:0; height:auto; background:none; }
  .lead b { font-size:clamp(13px,1.6vw,17px); }
  .lead b a:hover { color:var(--cyan); }
  .lead i { max-width:56ch; }
  .lead i a { color:var(--ink); border-bottom:1px solid rgba(79,216,232,.45);
              padding-bottom:2px; }
  .lead i a:hover { color:var(--cyan); border-color:var(--cyan); }
  .admin { margin-top:clamp(30px,5vh,48px); }
  .admin b { font-size:12px; }

  footer { position:relative; z-index:6; padding:clamp(34px,5vh,54px) var(--pad) clamp(40px,6vh,64px);
           border-top:1px solid rgba(157,175,182,.16); }
  .fnav { display:flex; flex-wrap:wrap; gap:12px 30px; margin-bottom:22px;
          font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--quiet); }
  .fnav a:hover { color:var(--cyan); }
  
  .fine { display:flex; flex-wrap:wrap; gap:6px 30px; justify-content:space-between;
          font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--meta); }