:root{
  --bg:#f4f2ee; --fg:#1c1b1a; --muted:#8a857e; --faint:#c9c4bc; --line:#dcd7cf;
  --ph:#e8e5df; --ph-dot:#d6d1c9; --accent:#e8621f; --accent-soft:#f7c3a1;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Geist",ui-sans-serif,system-ui,sans-serif;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#181716; --fg:#ece8e2; --muted:#7c7771; --faint:#45423e; --line:#2c2a28;
  --ph:#211f1e; --ph-dot:#2f2c2a; --accent:#ff7a2e; --accent-soft:#6b3216;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#181716; --fg:#ece8e2; --muted:#7c7771; --faint:#45423e; --line:#2c2a28;
    --ph:#211f1e; --ph-dot:#2f2c2a; --accent:#ff7a2e; --accent-soft:#6b3216;
    color-scheme:dark;
  }
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--fg)}
/* Theme switch: the page fades between palettes; the nav follows a touch faster. */
html{transition:background-color .3s ease}
body{font-family:var(--mono);font-size:14px;line-height:1.7;-webkit-font-smoothing:antialiased;
  min-height:100vh;overflow-x:hidden;transition:background-color .3s ease,color .3s ease}
a{color:inherit}
::selection{background:var(--accent);color:#fff}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:center;
  align-items:center;gap:clamp(14px,3.2vw,32px);padding:22px 16px;font-size:13px;pointer-events:none}
.nav a,.nav button{pointer-events:auto}
.nav a{color:var(--muted);text-decoration:none;transition:color .2s ease}
.nav a:hover{color:var(--fg)}
.nav a[aria-current="page"]{color:var(--fg);font-weight:600}
.theme-btn{background:none;border:0;color:var(--muted);cursor:pointer;display:grid;place-items:center;
  width:22px;height:22px;transition:color .2s,transform .4s}
.theme-btn:hover{color:var(--accent);transform:rotate(30deg)}
.theme-btn svg{width:15px;height:15px}
.theme-btn .moon{display:none}
:root[data-theme="light"] .theme-btn .sun{display:none}
:root[data-theme="light"] .theme-btn .moon{display:block}

/* pod counter */
.counter{position:fixed;top:22px;right:max(16px,20vw);z-index:20;text-align:right;font-size:11px;line-height:1.6;
  color:var(--muted);font-variant-numeric:tabular-nums}
.counter b{display:block;font-weight:500;transition:color .2s ease}
.counter b+b{color:var(--fg)}
.counter b.bump{color:var(--accent)}

/* cursor */
.cursor{display:inline-block;width:.6em;height:1.05em;background:var(--fg);vertical-align:-2px;margin-left:2px;
  animation:blink 1.05s steps(1) infinite;transition:background-color .3s ease}
@keyframes blink{50%{opacity:0}}

/* home */
#pod{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero{position:relative;z-index:5;min-height:100vh;padding:52vh 16px 12vh;max-width:760px;margin-left:max(16px,20vw);
  pointer-events:none}
.hero a{pointer-events:auto}
.tagline{color:var(--muted);min-height:3.4em;margin-bottom:56px}
.intro p{margin:0 0 2px}
.intro p.gap{margin-top:18px}
.intro h1{font-size:inherit;font-weight:500;margin-bottom:2px}
.intro a,.links a{text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
.intro a:hover,.links a:hover{color:var(--accent);text-decoration-color:var(--accent)}
.links{margin-top:18px;color:var(--muted)}
.links a{color:var(--muted)}
.hint{position:fixed;left:16px;bottom:16px;z-index:5;font-size:11px;color:var(--faint)}

/* shared page */
.page{position:relative;z-index:1;padding:110px clamp(16px,5vw,64px) 80px}
.wrap{max-width:1120px;margin:0 auto}
.kicker{color:var(--muted);min-height:1.7em}
.lede{font-family:var(--sans);font-size:15px;margin-top:10px}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:56px}
.page-head a{font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.page-head a:hover{color:var(--accent)}

/* placeholder art */
.ph{position:relative;background-color:var(--ph);overflow:hidden;transition:background-color .3s ease;
  background-image:radial-gradient(var(--ph-dot) 1.2px,transparent 1.4px);background-size:9px 9px}
.ph::after{content:attr(data-label);position:absolute;left:12px;bottom:10px;font-size:10px;letter-spacing:.06em;
  color:var(--muted);text-transform:uppercase}
.ph canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}

/* projects */
.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 0 24px;scroll-padding-left:0;
  scrollbar-width:thin;scrollbar-color:var(--faint) transparent}
.card{flex:0 0 min(78vw,700px);scroll-snap-align:start;text-decoration:none;display:block}
.card .ph{aspect-ratio:3/2}
.card .ph .view{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:#fff;
  background:color-mix(in srgb,var(--accent) 82%,transparent);opacity:0;transition:opacity .25s}
.card:hover .ph .view,.card:focus-visible .ph .view{opacity:1}
.card-meta{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:14px}
.card-meta h2{font-family:var(--sans);font-size:15px;font-weight:500}
.card-meta span{font-size:11px;color:var(--muted)}
.card p{font-family:var(--sans);font-size:13px;color:var(--muted);margin-top:4px}
.rail-hint{font-size:11px;color:var(--muted);margin-top:8px}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:72px 24px;align-items:start}
.piece:nth-child(4n+1){grid-column:1 / span 7}
.piece:nth-child(4n+2){grid-column:9 / span 4;margin-top:120px}
.piece:nth-child(4n+3){grid-column:2 / span 4}
.piece:nth-child(4n+4){grid-column:7 / span 6;margin-top:60px}
.piece figcaption{display:flex;justify-content:space-between;gap:12px;font-size:11px;margin-top:10px}
.piece figcaption span{color:var(--muted)}
@media (max-width:720px){
  .gallery{grid-template-columns:1fr;gap:48px}
  .piece:nth-child(n){grid-column:1;margin-top:0}
  .hero{margin-left:0}
  .counter{right:16px}
}

/* transmissions */
.wrap.narrow{max-width:760px}
.log{list-style:none;border-top:1px solid var(--line);transition:border-color .3s ease}
.log a{display:grid;grid-template-columns:96px 1fr 20px;gap:20px;padding:22px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:color .2s,border-color .3s ease}
.log time{font-size:12px;color:var(--muted);padding-top:2px}
.log b{display:block;font-family:var(--sans);font-size:15px;font-weight:500}
.log em{display:block;font-style:normal;font-family:var(--sans);font-size:13px;color:var(--muted);margin-top:4px}
.log i{font-style:normal;color:var(--faint);transition:transform .2s,color .2s}
.log a:hover b,.log a:hover i{color:var(--accent)}
.log a:hover i{transform:translateX(4px)}
.card p .artist{font-weight:500;color:var(--fg)}
@media (max-width:560px){.log a{grid-template-columns:1fr 20px;gap:6px 12px}.log time{grid-column:1 / -1}.nav{gap:12px;font-size:12px}}
/* blog */
.soon{min-height:100vh;display:grid;place-items:center;position:relative;z-index:1;color:var(--muted)}

@media (prefers-reduced-motion:reduce){.cursor{animation:none}}

/* release cards with real artwork */
.card{flex:0 0 min(82vw,440px)}
.card .cover{display:block;aspect-ratio:1/1;background-image:none}
.card .cover::after{content:none}
.card .cover img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .25s}
.card .cover:hover .view,.card .cover:focus-visible .view{opacity:1}
.thumbs{display:flex;gap:6px;margin-top:8px}
.thumb{width:44px;height:44px;padding:0;border:1px solid transparent;background:var(--ph);cursor:pointer;opacity:.55;transition:opacity .2s,border-color .2s}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb:hover,.thumb.on{opacity:1}
.thumb.on{border-color:var(--accent)}
.card .actions{font-family:var(--mono);font-size:12px;margin-top:10px}
.card .actions a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:3px;transition:color .2s}
.card .actions a:hover{color:var(--accent)}
.tracks{margin-top:10px;font-size:12px}
.tracks summary{cursor:pointer;color:var(--muted)}
.tracks summary:hover{color:var(--accent)}
.tracks ol{margin:8px 0 0 18px;font-family:var(--sans);font-size:13px}
.tracks li{padding:2px 0}
.tracks li em{font-style:normal;color:var(--muted);margin-left:8px;font-size:12px}
.head-links{font-size:12px;color:var(--muted)}
.card p a.inline{color:var(--fg);text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:3px;transition:color .2s}
.card p a.inline:hover{color:var(--accent)}

/* logo: the mark rebuilt from blocks, like the pod */
.nav .logo{display:block;color:var(--fg);line-height:0;margin-right:clamp(0px,1.5vw,10px);transition:color .2s ease}
.nav .logo:hover,.nav .logo:focus-visible{color:var(--accent)}
.logo-mark{width:auto;height:30px;display:block}
.logo-mark rect{transition:opacity .25s ease}
.nav .logo:hover .logo-mark rect:nth-child(7n+3){opacity:.35}
@media (max-width:560px){.logo-mark{height:24px}}

/* home player (Spotify playlist, loads on first play) */
.player{display:flex;gap:12px;align-items:flex-start;pointer-events:auto;max-width:460px}
/* The player sits in a bar outside #page so it keeps playing when the page changes.
   Phones: at the very bottom of every page. Desktop: pinned to the bottom of the screen.
   Same position and size on every page. */
.player-dock{position:relative;z-index:15;padding:8px 16px 28px var(--dock-left)}
body{--dock-left:calc(max(16px,20vw) + 16px)} /* same spot on every page: lined up with the home page text */
@media (min-width:761px){
  .player-dock{position:fixed;bottom:14px;left:calc(var(--dock-left) - 10px);padding:8px 10px;width:min(480px,calc(100vw - 32px));
    background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);transition:background-color .3s ease}
  body{padding-bottom:84px}
  .hint{left:auto;right:16px}
}
.pl-btn{flex:none;width:30px;height:30px;display:grid;place-items:center;background:none;cursor:pointer;color:var(--fg);
  border:1px solid var(--line);transition:color .2s,border-color .2s}
.pl-btn:hover,.pl-btn:focus-visible{color:var(--accent);border-color:var(--accent)}
.pl-btn svg{width:11px;height:11px}
.pl-btn .i-pause,.player[data-state="playing"] .i-play{display:none}
.player[data-state="playing"] .i-pause{display:block}
.player[data-state="playing"] .pl-btn,.player[data-state="loading"] .pl-btn{color:var(--accent);border-color:var(--accent)}
.player[data-state="loading"] .pl-btn svg{animation:blink 1.05s steps(1) infinite}
.pl-body{flex:1;min-width:0}
.pl-line{display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;line-height:30px;height:30px}
.pl-title{font-weight:500;overflow:hidden;text-overflow:ellipsis;flex:none;max-width:60%}
.pl-sub{color:var(--muted);overflow:hidden;text-overflow:ellipsis;min-width:0}
.pl-eq{display:none;align-items:flex-end;gap:2px;height:11px;flex:none}
.pl-eq i{width:3px;height:3px;background:var(--accent)}
.player[data-state="playing"] .pl-eq{display:inline-flex}
.player[data-state="playing"] .pl-eq i{animation:eq .9s steps(4) infinite}
.pl-eq i:nth-child(2){animation-delay:-.3s}.pl-eq i:nth-child(3){animation-delay:-.6s}.pl-eq i:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%{height:3px}25%{height:11px}50%{height:6px}75%{height:9px}100%{height:3px}}
.pl-row{display:none;align-items:center;gap:8px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:2px}
.player:not([data-state="idle"]) .pl-row{display:flex}
.pl-bar{flex:1;height:5px;cursor:pointer;outline-offset:4px;
  background:linear-gradient(90deg,var(--accent) 0 var(--p,0%),var(--faint) 0);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 5px,transparent 0 7px);mask:repeating-linear-gradient(90deg,#000 0 5px,transparent 0 7px)}
.pl-bar:focus-visible{outline:1px solid var(--accent)}
.pl-prev,.pl-next{background:none;border:0;color:var(--muted);font:inherit;cursor:pointer;padding:0 2px}
.pl-prev:hover,.pl-next:hover,.pl-prev:focus-visible,.pl-next:focus-visible{color:var(--accent)}
.pl-foot{font-size:11px;color:var(--faint);margin-top:2px}
.pl-foot a{color:var(--muted);text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:3px}
.pl-foot a:hover{color:var(--accent)}
.pl-body{position:relative}
.pl-embed{position:absolute;left:0;top:0;width:100%;max-width:340px;height:80px;overflow:hidden;opacity:0;pointer-events:none;z-index:-1}
.player.show-embed .pl-embed{position:static;opacity:1;pointer-events:auto;z-index:auto;margin-top:10px;border-radius:12px}
.pl-embed iframe{display:block;width:100%;border:0}
@media (prefers-reduced-motion:reduce){.player .pl-eq i{animation:none!important;height:7px}}

/* about */
.about-grid{display:grid;grid-template-columns:minmax(120px,200px) 1fr;gap:clamp(28px,6vw,80px);align-items:start}
.about-mark{width:100%;height:auto;display:block;color:var(--accent);transition:color .3s ease}
.about-mark rect{transform-box:fill-box;transform-origin:center}
.about-mark{cursor:pointer;touch-action:manipulation;overflow:visible;outline:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
/* the narwhal is the logo here; the blocks stay as an invisible click target */
.pod-pose .about-mark{opacity:0}
#water{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.mark-cap{margin-top:12px;font-size:11px;color:var(--muted);line-height:1.5}
.about-copy{max-width:36em}
.about-copy p+p{margin-top:14px}
.about-copy .links{margin-top:28px}
.about-copy .lead{font-weight:500}
@media (max-width:640px){
  .about-grid{grid-template-columns:1fr}
  .about-mark{width:96px}
    }

/* phones: once scrolled, the nav gets the same see-through backing as the player */
@media (max-width:760px){
  .nav{transition:background-color .2s ease}
  .scrolled .nav{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
}

/* phones: text, player and hint all line up on the left edge; the hint sits just under the nav */
@media (max-width:760px){
  .hero{margin-left:0}
  body{--dock-left:16px}
  .hint{position:absolute;top:72px;left:16px;right:auto;bottom:auto}
}

/* phones: releases stack vertically instead of scrolling sideways */
@media (max-width:760px){
  .rail{flex-direction:column;overflow:visible;scroll-snap-type:none;gap:56px;padding-bottom:0}
  .card{flex:none;width:100%}
  .rail-hint{display:none}
}

/* phones: a little more room between the nav links */
@media (max-width:760px){
  .nav{gap:22px}
}

/* release links: a slash between them, like the home page links */
.card .actions .sep{color:var(--faint);margin:0 8px}
/* phones: the release text already links to the pre-order form, so the extra button goes */
@media (max-width:760px){
  .actions.desktop-only{display:none}
}