/* OXIME — Orbit. The mark is a dial; the catalogue orbits it; whatever is chosen sits in
   the aperture and plays through one player that stays put while pages change.
   Colours are the identity's seven (see assets/ds/tokens/colors.css); magenta is the one accent.
   Dark only, by choice. */
:root{
  color-scheme:dark;
  --klein:#002FA7; --midnight:#061436; --black:#000; --ice:#E6EDF8; --silver:#B6C1CF; --magenta:#EC008C;
  --deep:#030B22;
  --rule:rgba(182,193,207,.22);
  --rule-strong:rgba(182,193,207,.5);
  --font-core:"Recursive",system-ui,sans-serif;
  --font-prose:"Newsreader",Georgia,serif;
  --gut:max(16px,env(safe-area-inset-left,0px));
  --gutr:max(16px,env(safe-area-inset-right,0px));
  --max:1320px;
  --bar-h:76px;
}
*{box-sizing:border-box}
html{background:var(--deep);scroll-behavior:smooth}
body{margin:0;background:var(--deep);color:var(--ice);font:400 16px/1.6 var(--font-core);font-variation-settings:"MONO" 0,"CASL" 0,"slnt" 0;-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px))}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--magenta);outline-offset:3px}
.w{max-width:var(--max);margin:0 auto;padding-left:var(--gut);padding-right:var(--gutr)}
@media(min-width:900px){.w{padding-left:max(56px,var(--gut));padding-right:max(56px,var(--gutr))}}
.cap{font-size:11px;letter-spacing:.14em;text-transform:lowercase;font-weight:500;color:var(--silver)}
.mono{font-variation-settings:"MONO" 1;font-weight:600}
.dyn{font-family:var(--font-prose);font-weight:700;font-size:20px;letter-spacing:-.02em;line-height:1;color:var(--ice)}
.btn{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 20px;border-radius:999px;border:0;background:var(--magenta);color:var(--black);font:500 14px var(--font-core);cursor:pointer;text-decoration:none;white-space:nowrap}
.btn.ghost{background:transparent;color:var(--ice);border:1px solid var(--silver)}
.btn.ghost:hover{border-color:var(--ice)}
.btn svg{width:12px;height:12px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* header */
.top .w{display:flex;align-items:center;gap:20px;padding-block:24px}
.top .word{width:120px;color:var(--ice)}
.top nav{margin-left:auto;display:flex;gap:22px;font-size:14px}
.top nav a[aria-current="page"]{color:var(--ice);text-decoration:underline;text-decoration-color:var(--magenta);text-decoration-thickness:2px;text-underline-offset:8px}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--rule-strong);border-radius:999px;height:36px;padding:0 16px;cursor:pointer;font-size:13px}
@media(max-width:620px){.menu-btn{display:block}.top nav{display:none;position:absolute;left:0;right:0;top:100%;z-index:30;background:var(--midnight);flex-direction:column;gap:0;padding:8px max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--rule)}
 .top nav.open{display:flex}.top nav a{padding:12px 0;font-size:20px;font-family:var(--font-prose);color:var(--ice);border-bottom:1px solid var(--rule)}}
.top{position:relative}
.top nav a{text-decoration:none;color:var(--silver)}
.top nav a:hover{color:var(--ice)}

/* hero + dial */
.hero .w{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px;align-items:center;padding-block:16px 56px}
.hero-txt{grid-column:1 / span 5;display:flex;flex-direction:column;gap:26px;min-width:0;position:relative;z-index:2}
.hero h1{margin:0;font-family:var(--font-prose);font-weight:300;font-size:clamp(36px,4.6vw,68px);line-height:1.02;letter-spacing:-.015em;text-wrap:balance}
.hero p{margin:0;color:var(--silver);max-width:42ch}
.ctl{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.dial{grid-column:6 / span 7;position:relative;aspect-ratio:1;width:100%;max-width:720px;justify-self:end}
.dial svg.ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.tick{stroke:var(--silver);stroke-width:1.2;opacity:.55}
.tick.q{opacity:1;stroke-width:1.6}
.tick.hit{stroke:var(--magenta);stroke-width:3;opacity:1}
.prog{fill:none;stroke:var(--magenta);stroke-width:1.6;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .25s linear}
.orbit{position:absolute;inset:0;animation:spin 240s linear infinite}
.dial.hold .orbit,.dial.hold .sat img{animation-play-state:paused}
.sat{position:absolute;width:5.4%;aspect-ratio:1;border-radius:50%;overflow:hidden;transform:translate(-50%,-50%);border:0;padding:0;background:var(--midnight);cursor:pointer;box-shadow:0 0 0 1px rgba(182,193,207,.35);transition:box-shadow .2s,width .2s}
.sat img{width:100%;height:100%;object-fit:cover;display:block;animation:spin 240s linear infinite reverse}
.sat.sel{box-shadow:0 0 0 2px var(--magenta);width:7%}
.sat:hover{box-shadow:0 0 0 2px var(--ice)}
.aperture{position:absolute;left:22%;top:22%;width:56%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--midnight);border:0;padding:0;cursor:pointer}
.aperture img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(1.6) contrast(1.3) url(#duo-charged);transition:filter .6s}
.aperture:hover img,.dial.playing .aperture img{filter:none}
.ap-label{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);background:var(--deep);color:var(--ice);padding:4px 12px;border-radius:999px;font-size:12px;white-space:nowrap;max-width:80%;overflow:hidden;text-overflow:ellipsis}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:900px){.hero-txt,.dial{grid-column:1 / -1}.dial{justify-self:center;order:-1}}
@media(prefers-reduced-motion:reduce){.orbit,.sat img{animation:none}}

/* release drawer: opens under the dial when a release is picked */
.drawer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.4,0,.3,1);background:var(--midnight)}
.drawer.open{grid-template-rows:1fr}
.drawer > div{overflow:hidden;min-height:0}
.rel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px;padding-block:56px 64px;border-top:2px solid var(--magenta)}
.rel figure{grid-column:1 / span 4;margin:0;position:relative;align-self:start}
.rel figure img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.band{position:absolute;top:0;right:0;bottom:0;width:16%}
.band.still{background:var(--klein)}.band.drift{background:var(--silver)}.band.charged{background:var(--magenta)}.band.moving{background:#CCFF00}
.rel-body{grid-column:5 / span 8;display:flex;flex-direction:column;gap:22px;min-width:0}
.rel-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.rel-head h2{margin:6px 0 0;font-family:var(--font-prose);font-weight:300;font-size:clamp(34px,4vw,58px);line-height:1}
.close{background:none;border:1px solid var(--rule-strong);border-radius:999px;height:36px;padding:0 14px;cursor:pointer;color:var(--silver);font-size:13px;flex:none}
.close:hover{color:var(--ice);border-color:var(--ice)}
.rel-meta{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;color:var(--silver);font-size:14px}
.rel-meta .dyn{font-size:22px}
.tl{list-style:none;margin:0;padding:0;columns:2;column-gap:40px}
.tl.one{columns:1;max-width:520px}
.tl li{break-inside:avoid}
.tk{display:grid;grid-template-columns:28px minmax(0,1fr) auto minmax(22px,auto);gap:12px;align-items:center;width:100%;padding:10px 0;border:0;border-bottom:1px solid var(--rule);background:none;text-align:left;cursor:pointer}
.tk .n{font-size:12px;color:var(--silver);font-variant-numeric:tabular-nums;font-variation-settings:"MONO" 1}
.tk .t{font-size:17px;line-height:1.25;min-width:0}
.tk .t.tbd{color:var(--silver);opacity:.6;font-size:14px}
.tk .d{font-size:13px;color:var(--silver);font-variant-numeric:tabular-nums}
.tk .ic{width:22px;height:22px;display:grid;place-items:center;opacity:0;color:var(--magenta)}
.tk:hover .ic,.tk.on .ic{opacity:1}
.tk:hover .t{color:var(--ice)}
.tk.on .t,.tk.on .d{color:var(--magenta)}
.eq{display:inline-flex;gap:2px;align-items:flex-end;height:12px}
.eq i{width:3px;background:var(--magenta);height:40%;animation:eq .9s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:-.3s}.eq i:nth-child(3){animation-delay:-.6s}
@keyframes eq{0%,100%{height:30%}50%{height:100%}}
@media(prefers-reduced-motion:reduce){.eq i{animation:none;height:70%}}
.tk .also{display:block;font-size:11px;letter-spacing:.1em;color:var(--silver);margin-top:2px}
.tk.ext{text-decoration:none;color:inherit}
.tk.ext .t{color:var(--silver)}
.tk .ic .sp{font-size:11px;letter-spacing:.08em;color:var(--silver);white-space:nowrap}
.tk.ext .ic{opacity:1;width:auto}
.tk.ext:hover .t,.tk.ext:hover .sp{color:var(--ice)}
.rel-note{font-size:13px;color:var(--silver);margin:0}
.series{font-size:14px;color:var(--silver)}
.series button{background:none;border:0;padding:0;color:var(--ice);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
@media(max-width:900px){.rel figure{grid-column:1 / span 12;max-width:320px}.rel-body{grid-column:1 / -1}.tl{columns:1}}

/* sections */
section.s{padding-block:104px}
.sh{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 32px;flex-wrap:wrap;margin-bottom:40px}
.sh h2{margin:0;font-family:var(--font-prose);font-weight:300;font-size:clamp(28px,3vw,44px);line-height:1.1}
.sh p{margin:6px 0 0;color:var(--silver);max-width:52ch}

/* journey */
/* read down side a, then down side b — the grid fills by column, with a rule between */
.sides,.jr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px}
.jr{grid-template-rows:repeat(7,auto);grid-auto-flow:column;position:relative}
.jr::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--rule-strong)}
.sides{margin-bottom:6px}
.side-h{display:flex;align-items:baseline;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--rule-strong)}
.side-h b{font-family:var(--font-prose);font-weight:400;font-size:22px}
.side-h .arrow{margin-left:auto;color:var(--silver);font-size:16px}
@media(max-width:820px){.sides{display:none}.jr{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row}.jr::before{display:none}}
.legend{display:flex;flex-wrap:wrap;gap:14px 40px;align-items:center;padding:18px 0;margin-bottom:28px;border-block:1px solid var(--rule)}
.legend .lg{display:flex;gap:12px;align-items:center;font-size:14px;color:var(--silver)}
.legend .lg svg{width:30px;height:30px;flex:none}
.legend .dyns{display:flex;gap:18px;flex-wrap:wrap}
.legend .dyns span{display:inline-flex;gap:8px;align-items:baseline;font-size:14px;color:var(--silver)}
.legend .dyns .dyn{font-size:18px;color:var(--ice)}
.trk{display:grid;grid-template-columns:40px minmax(0,1fr) 40px auto;gap:16px;align-items:center;padding:12px 0;border:0;border-bottom:1px solid var(--rule);background:none;text-align:left;cursor:pointer;width:100%}
.trk svg{width:40px;height:40px}
.trk .bg{fill:none;stroke:var(--rule);stroke-width:3}
.trk .arc{fill:none;stroke:var(--ice);stroke-width:4}
.trk .nm{font-size:18px;line-height:1.2;min-width:0}
.trk .ph{display:block;margin-top:3px}
.trk .dyn{font-size:18px;text-align:right;color:var(--silver)}
.trk .du{font-size:13px;color:var(--silver);font-variant-numeric:tabular-nums;min-width:34px;text-align:right}
.trk:hover .arc,.trk.on .arc{stroke:var(--magenta)}
.trk.on .nm{color:var(--magenta)}

/* catalogue (from Score, set on the dark ground) */
.works{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px}
.key{grid-column:1 / span 3;display:flex;flex-direction:column;gap:12px;font-size:14px;align-self:start;position:sticky;top:24px}
.key .row{display:flex;gap:12px;align-items:baseline}
.key .dyn{width:32px;flex:none}
.key hr{border:0;border-top:1px solid var(--rule);margin:10px 0;width:100%}
.tally{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;font-size:15px;align-items:baseline}
.tally b{font-family:var(--font-prose);font-weight:300;font-size:40px;line-height:1;font-variant-numeric:lining-nums;text-align:right}
@media(max-width:820px){.tally{grid-template-columns:repeat(2,auto minmax(0,1fr));justify-content:start}.tally b{font-size:28px}}
.years{grid-column:4 / span 9;display:flex;flex-direction:column}
.yr{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;border-top:1px solid var(--rule-strong);padding-block:18px 26px}
.yr-h{display:flex;flex-direction:column;gap:8px}
.yr-h span:first-child{font-family:var(--font-prose);font-size:44px;font-weight:300;line-height:1;font-variant-numeric:lining-nums}
.yr ul{list-style:none;margin:0;padding:0}
.ent{display:grid;grid-template-columns:44px minmax(0,1fr) auto 36px;gap:16px;align-items:center;padding:8px 0;border:0;border-bottom:1px solid var(--rule);background:none;width:100%;text-align:left;cursor:pointer}
.yr li:last-child .ent{border-bottom:0}
.ent img{width:44px;height:44px;border-radius:50%;object-fit:cover;display:block;box-shadow:0 0 0 1px rgba(182,193,207,.35)}
.ent.album img,.ent.ep img{border-radius:3px}
.ent .t{font-family:var(--font-prose);font-size:20px;line-height:1.2;min-width:0}
.ent.album .t{font-weight:500}
.ent .ty{font-size:12px;color:var(--silver);white-space:nowrap}
.ent.album .ty,.ent.ep .ty{color:var(--ice);border:1px solid var(--rule-strong);border-radius:999px;padding:1px 10px}
.ent .dyn{text-align:right}
.ent:hover .t{color:var(--magenta)}
.ent.sel .t{color:var(--magenta)}
.ent.sel img{box-shadow:0 0 0 2px var(--magenta)}
@media(max-width:820px){.key{grid-column:1 / -1;position:static}.years{grid-column:1 / -1}.yr{grid-template-columns:minmax(0,1fr);gap:8px}.yr-h{flex-direction:row;align-items:baseline;gap:14px;flex-wrap:wrap}.yr-h span:first-child{font-size:32px}.ent .ty{display:none}}

/* about */
.about{position:relative;background:var(--klein);overflow:hidden}
.about .band{width:clamp(48px,8vw,120px);background:var(--magenta)}
.about .w{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px;padding-block:112px}
.about blockquote{grid-column:1 / span 8;margin:0;font-family:var(--font-prose);font-size:clamp(24px,2.8vw,40px);line-height:1.3;font-weight:300;text-wrap:pretty}
.about .side{grid-column:9 / span 3;align-self:end;display:flex;flex-direction:column;gap:12px;font-size:14px;color:var(--silver)}
.about .side a{color:var(--ice);text-underline-offset:5px}
@media(max-width:820px){.about blockquote,.about .side{grid-column:1 / span 10}}

/* writing */
.posts{display:flex;flex-direction:column;border-top:1px solid var(--rule-strong)}
.post-row{display:grid;grid-template-columns:160px minmax(0,1fr) auto;gap:24px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--rule);text-decoration:none}
.post-row h3{margin:0;font-family:var(--font-prose);font-weight:400;font-size:clamp(22px,2.2vw,30px);line-height:1.15}
.post-row p{margin:6px 0 0;color:var(--silver);max-width:60ch}
.post-row .go{color:var(--magenta);font-size:14px;white-space:nowrap}
.post-row:hover h3{color:var(--magenta)}
@media(max-width:700px){.post-row{grid-template-columns:minmax(0,1fr);gap:6px}.post-row .go{display:none}}
.follow{display:flex;gap:16px 32px;flex-wrap:wrap;align-items:baseline;margin-top:28px;color:var(--silver);font-size:14px}
.follow code{font-family:var(--font-core);font-variation-settings:"MONO" 1;color:var(--ice);background:var(--midnight);padding:4px 10px;border-radius:4px;user-select:all;overflow-wrap:anywhere}

/* page views */
.page-hero .w{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px;padding-block:40px 64px;align-items:end}
.page-hero .ttl{grid-column:1 / span 8;display:flex;flex-direction:column;gap:18px;min-width:0}
.page-hero h1{margin:0;font-family:var(--font-prose);font-weight:300;font-size:clamp(44px,7vw,104px);line-height:.95;letter-spacing:-.02em}
.page-hero p{margin:0;color:var(--silver);max-width:48ch;font-size:18px}
.page-hero .pmark{grid-column:10 / span 3;justify-self:end;width:min(200px,100%);color:var(--ice)}
@media(max-width:820px){.page-hero .ttl{grid-column:1 / -1}.page-hero .pmark{display:none}}
.prose{font-family:var(--font-prose);font-size:21px;line-height:1.65;display:flex;flex-direction:column;gap:22px;max-width:62ch;min-width:0}
.prose p{margin:0}
.prose p:first-child{font-size:26px;line-height:1.45}
@media(max-width:620px){.prose{font-size:18px;gap:18px}.prose p:first-child{font-size:21px}}
.about-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px;padding-bottom:104px}
.facts{grid-column:1 / span 3;display:flex;flex-direction:column;gap:20px;align-self:start;position:sticky;top:24px;margin:0}
.facts dd{margin:4px 0 0;font-size:15px}
.facts dd a{color:var(--ice);text-underline-offset:4px}
.about-grid .prose{grid-column:4 / span 8}
@media(max-width:820px){.facts,.about-grid .prose{grid-column:1 / -1}.facts{position:static;display:grid;grid-template-columns:1fr 1fr}}
.energies{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;margin-top:8px}
.en{position:relative;background:var(--midnight);padding:28px 40px 32px 24px;min-height:220px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.en .dyn{font-size:40px}
.en h3{margin:0;font-family:var(--font-prose);font-weight:400;font-size:26px}
.en p{margin:0;color:var(--silver);font-size:14px;max-width:28ch}
.en .band{width:10px}
@media(max-width:900px){.energies{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.energies{grid-template-columns:minmax(0,1fr)}}
.contact{background:var(--klein);position:relative;overflow:hidden}
.contact .band{width:clamp(48px,8vw,120px);background:var(--magenta)}
.contact .w{padding-block:88px;display:flex;flex-direction:column;gap:18px;padding-right:max(140px,var(--gutr))}
.contact h2{margin:0;font-family:var(--font-prose);font-weight:300;font-size:clamp(28px,3.4vw,48px);line-height:1.1}
.mail{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.mail span{font-size:clamp(18px,2vw,26px);user-select:all;overflow-wrap:anywhere}
@media(max-width:620px){.contact .w{padding-right:max(72px,var(--gutr))}}
.article .w{max-width:880px}
.article header{padding-block:40px;display:flex;flex-direction:column;gap:16px;border-bottom:1px solid var(--rule-strong);margin-bottom:40px}
.article h1{margin:0;font-family:var(--font-prose);font-weight:300;font-size:clamp(38px,5.4vw,72px);line-height:1;letter-spacing:-.015em;text-wrap:balance}
.article .lede{color:var(--silver);font-size:18px;margin:0}
.article .back{color:var(--silver);text-decoration:none;font-size:14px}
.article .back:hover{color:var(--ice)}
.post-foot{padding-block:48px 104px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--silver);font-size:14px}
.post-foot a{color:var(--ice);text-underline-offset:4px}

footer .w{padding-block:64px 40px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
footer .mk{width:72px;height:72px;color:var(--ice)}
footer .links{display:flex;gap:22px;flex-wrap:wrap;font-size:14px}
footer .links a{color:var(--ice);text-underline-offset:5px}

/* the one player, fixed to the bottom edge */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:rgba(3,11,34,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--rule);padding-bottom:env(safe-area-inset-bottom,0px)}
.bar .w{display:grid;grid-template-columns:auto auto minmax(0,1fr) minmax(120px,320px) auto;gap:18px;align-items:center;height:var(--bar-h)}
.bar .art{width:46px;height:46px;border-radius:50%;object-fit:cover;display:block}
.pp{width:46px;height:46px;border-radius:50%;border:0;background:var(--magenta);color:var(--black);display:grid;place-items:center;cursor:pointer}
.pp svg{width:14px;height:14px}
.skip{display:flex;gap:4px}
.skip button{background:none;border:0;color:var(--silver);width:30px;height:30px;cursor:pointer;display:grid;place-items:center}
.skip button:hover{color:var(--ice)}
.skip svg{width:14px;height:14px}
.np{min-width:0}
.np .t{font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np .c{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.seek{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--silver);font-variant-numeric:tabular-nums}
.seek input{flex:1;accent-color:var(--magenta);min-width:0}
.mode{font-size:10px;letter-spacing:.12em;color:var(--silver);border:1px solid var(--rule-strong);border-radius:999px;padding:2px 8px;white-space:nowrap}
@media(max-width:760px){.bar .w{grid-template-columns:auto minmax(0,1fr) auto;gap:12px}.bar .art,.seek,.mode{display:none}}

/* additions for the built site */
[hidden]{display:none!important}
img{max-width:100%}
.skiplink{position:absolute;left:-9999px;top:0;z-index:50;background:var(--magenta);color:var(--black);padding:10px 16px;text-decoration:none}
.skiplink:focus{left:16px;top:16px}
.ent{text-decoration:none;color:inherit}
.dial .sat{text-decoration:none}
.release-page .rel{border-top:0;padding-top:24px}
.crumbs{padding-top:8px}
.crumbs a{color:var(--silver);text-decoration:none}
.crumbs a:hover{color:var(--ice)}
.pager{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--rule);padding-block:32px 104px}
.pager a{font-family:var(--font-prose);font-size:24px;text-decoration:none;display:block;margin-top:6px}
.pager a:hover{color:var(--magenta)}
.pager .next{text-align:right;margin-left:auto}
.notfound{padding-block:64px 160px}
.sc-fallback{color:var(--ice);font-size:12px;text-underline-offset:4px}
main{display:block;min-height:50vh}
main.leaving{opacity:.4;transition:opacity .15s}
.ctls{display:flex;gap:6px;align-items:center}
/* the hidden SoundCloud player: full size (its waveform code fails at 1px) but off-screen */
#sc-host{position:absolute;left:-9999px;top:0;width:400px;height:166px;overflow:hidden}
img{height:auto}
.rel-head h1{margin:6px 0 0;font-family:var(--font-prose);font-weight:300;font-size:clamp(40px,5vw,72px);line-height:1}
/* icons never take the press: it always lands on the button they sit in */
button svg,button .ic,button .ic *,button .eq,.btn svg{pointer-events:none}
.pp{width:52px;height:52px}
.skip button{width:40px;height:40px}
/* works in progress, as a blog */
.sks{display:flex;flex-direction:column;border-top:1px solid var(--rule-strong)}
.sk{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:20px;align-items:center;padding:22px 0;border-bottom:1px solid var(--rule)}
.sk-play{width:52px;height:52px;border-radius:50%;border:1px solid var(--rule-strong);background:none;display:grid;place-items:center;cursor:pointer;color:var(--ice)}
.sk-play.none{border-style:dashed;opacity:.4;cursor:default}
.sk-play svg{width:14px;height:14px}
.sk-play:hover,.sk-play.on{background:var(--magenta);border-color:var(--magenta);color:var(--black)}
.sk-play .eq i{background:var(--black)}
.sk-body{min-width:0;display:flex;flex-direction:column;gap:4px}
.sk h3{margin:0;font-family:var(--font-prose);font-weight:400;font-size:clamp(22px,2.2vw,30px);line-height:1.15}
.sk h3 a{text-decoration:none}
.sk h3 a:hover{color:var(--magenta)}
.sk p{margin:0;color:var(--silver);max-width:60ch}
.sk .go{color:var(--magenta);font-size:14px;text-decoration:none;white-space:nowrap}
@media(max-width:700px){.sk{grid-template-columns:52px minmax(0,1fr)}.sk .go{display:none}}
.empty{color:var(--silver)}
.article header .ctl{margin-top:8px}
/* video and images inside posts */
.video{margin:0 0 40px;position:relative;aspect-ratio:16/9;width:100%;background:var(--midnight)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.prose .video{margin:8px 0}
.post-image,.prose img{width:100%;height:auto;display:block;margin:0 0 40px}
.prose img{margin:8px 0}
/* click-to-play video */
.video-play{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:var(--midnight);cursor:pointer;display:grid;place-items:center;color:var(--ice)}
.video-play img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85;margin:0}
.video-play:hover img{opacity:1}
.vp-icon{position:relative;width:72px;height:72px;border-radius:50%;background:var(--magenta);color:var(--black);display:grid;place-items:center}
.vp-icon svg{width:22px;height:22px;margin-left:4px}
.vp-label{position:absolute;left:16px;bottom:14px;font-size:11px;letter-spacing:.14em;background:var(--deep);padding:3px 10px;border-radius:999px}
.vp-link{position:absolute;right:12px;bottom:12px;font-size:12px;color:var(--silver);background:var(--deep);padding:3px 10px;border-radius:999px;text-decoration:none}
.vp-link:hover{color:var(--ice)}
.video.live .vp-link{display:none}
/* the featured video band on the homepage */
.feature{background:var(--midnight);border-top:1px solid var(--rule)}
.feature .w{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px;align-items:center;padding-block:72px}
.feature-txt{grid-column:1 / span 4;display:flex;flex-direction:column;gap:16px;min-width:0}
.feature-txt h2{margin:0;font-family:var(--font-prose);font-weight:300;font-size:clamp(30px,3.4vw,52px);line-height:1.05}
.feature-txt p{margin:0;color:var(--silver)}
.feature-txt .btn{align-self:flex-start}
.feature-video{grid-column:5 / span 8;min-width:0}
.feature-video .video{margin:0}
@media(max-width:900px){.feature-txt,.feature-video{grid-column:1 / -1}.feature-video{order:-1}}
/* posts without audio: a link to the post in the play button's place */
.sk-play.kind{text-decoration:none;color:var(--silver)}
.sk-play.kind svg{width:16px;height:16px}
.sk-play.kind:hover{color:var(--black)}
/* phones: the 12-column grids keep their structure but with narrow gaps, so eleven gaps never outgrow the screen */
@media(max-width:900px){.hero .w,.rel,.works,.about .w,.page-hero .w,.about-grid,.feature .w{column-gap:12px}}
/* and the page itself never scrolls sideways (iOS ignores overflow on body alone) */
html,body{overflow-x:clip}