:root{color-scheme:dark;--bg:#090909;--ink:#f0f0ef;--gray:#999;--line:#303030}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--ink);font:14px Arial,Helvetica,sans-serif;margin:0;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:hover{color:#ccc}a:focus-visible,button:focus-visible{outline:2px solid white;outline-offset:4px}.shell{max-width:1440px;margin:auto;padding:0 clamp(20px,5vw,72px)}.skip{position:absolute;top:-100px;background:white;color:black;padding:12px;z-index:3}.skip:focus{top:0}.masthead{min-height:190px;padding:36px 0 28px;display:flex;justify-content:space-between;align-items:flex-end}.brand{display:flex;flex-direction:column;font:900 clamp(48px,7vw,98px)/.8 Impact,'Arial Narrow',Arial,sans-serif;letter-spacing:-.045em}.brand b,.gray{color:#777}.head-side{display:flex;gap:54px;align-items:flex-end;font-size:10px;font-weight:bold;letter-spacing:.17em;line-height:1.7}.head-side span{color:#777}.nav-row{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.nav{display:flex;gap:clamp(14px,2.6vw,38px)}.nav a{padding:22px 0;position:relative;color:#999;font-weight:bold;font-size:11px;letter-spacing:.12em;text-transform:uppercase}.nav a[aria-current=page]{color:#fff}.nav a[aria-current=page]:after{content:'';height:2px;background:#ddd;position:absolute;bottom:-1px;left:0;right:0}.nav-code{font:11px monospace;color:#777}.menu-toggle{display:none}.intro{display:flex;justify-content:space-between;align-items:end;gap:35px;padding:66px 0 37px;border-bottom:1px solid var(--line)}.kicker{font-size:10px;letter-spacing:.21em;font-weight:bold;color:#aaa;margin:0 0 22px}.dot{display:inline-block;width:6px;height:6px;border-radius:100%;background:#999;margin-left:8px}h1,.detail-title,.about-lead{font:900 clamp(50px,7.5vw,102px)/.96 Impact,'Arial Narrow',Arial,sans-serif;letter-spacing:-.02em;margin:0}.intro-right{display:flex;align-items:end;gap:36px;color:#aaa}.intro-right p{font-size:12px;line-height:1.7;max-width:225px;margin:0}.intro-right span{white-space:nowrap;font:11px monospace;color:#777}.feed{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:58px 24px;padding:34px 0 100px}.post{min-width:0}.artwork{position:relative;aspect-ratio:1/1;background:repeating-linear-gradient(140deg,#181818,#181818 3px,#141414 3px,#141414 8px);display:grid;place-items:center;overflow:hidden;border:1px solid #292929}.artwork i{font:900 clamp(70px,12vw,170px) Impact,sans-serif;color:#303030;font-style:normal}.artwork img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:transform .35s,filter .35s}.post a:hover img{transform:scale(1.025);filter:grayscale(.5)}.type-tag{position:absolute;top:14px;left:14px;padding:9px 11px;background:#e2e2e2;color:#111;font-size:9px;letter-spacing:.14em;font-weight:900}.post-meta{border-bottom:1px solid #2a2a2a;display:flex;justify-content:space-between;gap:10px;color:#858585;letter-spacing:.12em;font-size:10px;text-transform:uppercase;padding:18px 0 12px}.post h2{font:900 clamp(25px,2.6vw,37px)/1.09 Impact,'Arial Narrow',Arial,sans-serif;text-transform:uppercase;letter-spacing:0;margin:16px 0 10px;overflow-wrap:anywhere}.post p{font-size:12px;line-height:1.8;color:#aaa;margin:0}.read{margin-top:18px;font-weight:bold;font-size:10px;letter-spacing:.17em}.read span{color:#888}.empty,.loading{padding:80px 0 110px;min-height:310px}.empty{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}.empty h2{font:900 clamp(40px,5vw,70px)/1 Impact,sans-serif;max-width:12ch;margin:0}.empty p{line-height:1.85;color:#999;max-width:380px}.empty a,.detail-link{display:inline-block;border:1px solid #666;font-weight:bold;letter-spacing:.12em;font-size:10px;padding:14px 18px;margin-top:15px}.loading{color:#aaa;font-size:12px;letter-spacing:.2em}.about{display:grid;grid-template-columns:1.5fr 1fr;gap:60px;padding:65px 0 100px}.about-lead{font-size:clamp(42px,4.7vw,67px)}.about p{max-width:600px;color:#aaa;line-height:2}.about aside{border-top:1px solid #666;padding-top:20px}.about aside a{display:block;border-bottom:1px solid #333;padding:18px 0;font-weight:bold;font-size:12px}.detail{max-width:980px;margin:auto;padding:55px 0 105px}.detail-title{font-size:clamp(46px,6vw,84px);text-transform:uppercase;overflow-wrap:anywhere}.detail-back{display:inline-block;margin-bottom:35px;color:#aaa;font-size:11px;letter-spacing:.14em}.detail-meta{margin:20px 0 32px;color:#aaa;font-size:11px;letter-spacing:.12em}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px}.player iframe{width:100%;aspect-ratio:16/9;border:0;background:#171717}.player.bandcamp iframe{height:240px;aspect-ratio:auto}.article-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.85;color:#bbb}.article-text a{text-decoration:underline}.footer{margin-top:25px;border-top:1px solid var(--line)}.footer-head{padding:48px 0 75px;display:flex;justify-content:space-between;align-items:end}.footer-head strong{font:900 clamp(100px,14vw,200px)/.85 Impact,sans-serif;letter-spacing:-.07em}.footer-head sup{font:14px Arial;vertical-align:top}.footer-head p{font-size:10px;color:#999;max-width:190px;text-align:right;font-weight:bold;line-height:1.8;letter-spacing:.14em}.footer-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:15px;border-top:1px solid #292929;padding:25px 0 30px;font-size:10px;color:#888;letter-spacing:.13em}@media(max-width:950px){.feed{grid-template-columns:repeat(2,minmax(0,1fr))}.head-side{gap:20px}.nav{gap:16px}.nav a{font-size:10px}}@media(max-width:690px){.masthead{min-height:135px}.brand{font-size:55px}.head-side span,.nav-code{display:none}.head-side a{font-size:10px}.menu-toggle{display:flex;justify-content:space-between;width:100%;background:none;border:0;color:#fff;padding:16px 0;font-size:11px;letter-spacing:.2em;cursor:pointer}.nav-row{position:relative;display:block}.nav{display:none;position:absolute;top:100%;left:0;right:0;background:#090909;z-index:5;flex-direction:column;gap:0;border-bottom:1px solid #555}.nav.open{display:flex}.nav a{padding:15px 0;font-size:12px}.intro{display:block;padding:43px 0 28px}.intro-right{justify-content:space-between;align-items:center;margin-top:24px}.feed{grid-template-columns:1fr;gap:44px;padding:26px 0 70px}.post h2{font-size:36px}.empty,.about,.detail-grid{grid-template-columns:1fr}.about{padding:50px 0 70px}.detail{padding:40px 0 80px}.footer-head{gap:25px}.footer-head p{font-size:9px;max-width:100px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Typography Vol. 61 — Stencil display, Inter Tight editorial text. */
:root{
  --font-display:"Saira Stencil One",Impact,sans-serif;
  --font-body:"Inter Tight",Arial,Helvetica,sans-serif;
  --font-code:"IBM Plex Mono",monospace;
}
body{font-family:var(--font-body);font-size:14px}
.brand,h1,.detail-title,.about-lead,.empty h2,.footer-head strong{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-.023em;
}
.masthead{min-height:164px;padding:30px 0 27px}
.brand{font-size:clamp(43px,6.2vw,82px);line-height:1.01;letter-spacing:-.036em}
h1{font-size:clamp(42px,6.6vw,78px);line-height:1.08}
.detail-title{font-size:clamp(39px,5.8vw,70px);line-height:1.1}
.about-lead{font-size:clamp(37px,4.4vw,61px);line-height:1.15}
.empty h2{font-size:clamp(33px,4.5vw,57px);line-height:1.13;max-width:17ch}
.footer-head strong{font-size:clamp(75px,10.5vw,145px);line-height:1;letter-spacing:-.04em}
.footer-head sup{font:12px var(--font-body)}
.intro{padding:54px 0 32px}
.head-side{letter-spacing:.12em}
.nav a{font-size:11px;letter-spacing:.095em}
.nav-code,.intro-right span,.detail-meta,.post-meta{font-family:var(--font-code)}
.feed{align-items:stretch;gap:48px 24px}
.post{display:flex;min-width:0;height:100%}
.post>a,.post>.placeholder-inner{
  display:flex;flex-direction:column;width:100%;height:100%;min-width:0;
}
.artwork{width:100%;flex:0 0 auto}
.post-meta{min-height:45px;align-items:center;line-height:1.4;letter-spacing:.03em;overflow-wrap:anywhere}
.post h2{
  font-family:var(--font-body);
  font-weight:800;
  font-size:clamp(23px,2.25vw,31px);
  line-height:1.17;
  letter-spacing:-.018em;
  margin:15px 0 10px;
  min-height:2.34em;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
.post p{
  font-size:12px;
  line-height:1.75;
  min-height:5.25em;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}
.read{margin-top:auto;padding-top:20px;letter-spacing:.11em}
.about p,.article-text{font-size:14px;line-height:1.85}
.preview-banner{
  display:flex;align-items:center;flex-wrap:wrap;gap:12px;
  padding:19px 0 0;color:#999;font-size:12px;line-height:1.6;
}
.preview-banner strong{
  color:#d0d0d0;border:1px solid #505050;padding:5px 8px;
  font:600 10px var(--font-code);letter-spacing:.07em;white-space:nowrap;
}
.feed--placeholder{padding-top:24px}
.placeholder-post .artwork{
  isolation:isolate;display:grid;place-items:center;
  background:repeating-linear-gradient(150deg,#101010 0px,#101010 8px,#292929 9px,#121212 11px,#121212 18px);
}
.placeholder-post .artwork:before{
  content:"";position:absolute;inset:12%;border:1px solid #363636;
  transform:rotate(-12deg);z-index:-1;
}
.placeholder-post.pattern-rings .artwork{
  background:repeating-radial-gradient(circle at center,#181818 0px,#181818 12px,#333 13px,#0b0b0b 15px,#0b0b0b 27px);
}
.placeholder-post.pattern-grid .artwork{
  background:linear-gradient(90deg,transparent 95%,#333 95%),linear-gradient(0deg,transparent 95%,#333 95%),#161616;
  background-size:34px 34px;
}
.placeholder-post.pattern-gradient .artwork{
  background:radial-gradient(ellipse at 65% 30%,#3b3b3b 0%,#1e1e1e 32%,#080808 76%);
}
.placeholder-post .placeholder-mark{
  max-width:88%;font:400 clamp(28px,3.4vw,48px)/1.12 var(--font-display);
  letter-spacing:-.03em;color:#aaa;text-align:center;overflow-wrap:anywhere;
  z-index:1;text-shadow:0 2px 20px #050505;
}
.placeholder-post .artwork:after{
  content:"PREVIEW / NOT PUBLISHED";
  position:absolute;bottom:13px;left:13px;color:#9c9c9c;
  font:500 9px var(--font-code);letter-spacing:.035em;
}
.placeholder-post .type-tag{z-index:2}
.placeholder-post .read{color:#777;font-family:var(--font-code);font-size:10px}
@media(max-width:950px){
  .nav a{font-size:10px}
}
@media(max-width:690px){
  .masthead{min-height:120px;padding:22px 0}
  .brand{font-size:clamp(43px,9.8vw,57px)}
  h1{font-size:clamp(34px,9vw,51px)}
  .intro{padding:40px 0 27px}
  .nav a{font-size:12px}
  .post h2{font-size:clamp(23px,6vw,31px)}
  .footer-head strong{font-size:clamp(69px,15vw,102px)}
  .feed{gap:38px}
  .placeholder-post .placeholder-mark{font-size:clamp(33px,9vw,56px)}
  .preview-banner{padding-top:16px}
}

/* Brand social icons — single-colour, accessible icon buttons. */
.social-symbols{position:absolute;width:0;height:0;overflow:hidden}
.social-links{display:flex;align-items:center;flex-wrap:wrap;gap:9px}
.social-link{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex:0 0 40px;
  color:#d3d3d3;background:transparent;border:1px solid #444;
  text-decoration:none;transition:background-color .2s,border-color .2s,color .2s;
}
.social-link svg{display:block;width:20px;height:20px;fill:currentColor}
.social-link--soundcloud svg{width:25px;height:25px}
.social-link:hover{color:#090909;background:#eee;border-color:#eee}
.social-link:focus-visible{outline:2px solid #fff;outline-offset:3px}
.head-side .social-links{flex-wrap:nowrap}
.footer-base .social-links{flex-wrap:nowrap}
.about aside .social-links{border-bottom:1px solid #333;padding:13px 0 18px}
.about aside .social-link{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;margin:0;
  border:1px solid #444;font-size:inherit;font-weight:normal;
}
.about aside .social-link:hover{color:#090909;background:#eee;border-color:#eee}
.empty .social-links{margin-top:18px}
.empty .social-link{display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0;font-size:inherit;font-weight:normal;letter-spacing:0}
@media(max-width:690px){
  .head-side{gap:12px}
  .head-side .social-links{gap:7px}
  .head-side .social-link{width:36px;height:36px;flex-basis:36px}
  .footer-base .social-links{width:100%}
}