:root{
  --paper:#0E0E0F;
  --ink:#EDEDEA;
  --g1:#ABABAB;
  --g2:#777777;
  --hair:#2C2C2C;
  --display:'Syne',sans-serif;
  --body:'IBM Plex Sans',-apple-system,system-ui,sans-serif;
  --maxw:1200px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;font-weight:500}
a:hover{text-decoration-thickness:2px}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.label{font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--g1)}

/* top bar */
.topbar{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:2px solid var(--ink)}
.topbar .bar{max-width:var(--maxw);margin:0 auto;padding:0 28px;height:64px;display:flex;align-items:center;justify-content:space-between}
.topbar .brand{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.01em;text-decoration:none}
.topbar .tlink{font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.topbar .tlink:hover{text-decoration:underline;text-underline-offset:5px}

/* intro / header */
.header{max-width:var(--maxw);margin:0 auto;padding:clamp(46px,7vw,88px) 28px clamp(30px,4vw,48px)}
.header h1{font-family:var(--display);font-weight:800;font-size:clamp(40px,6.4vw,78px);line-height:.98;letter-spacing:-.025em;margin:18px 0 22px;max-width:16ch}
.header p{color:var(--g1);max-width:58ch;margin:0 0 8px;font-size:clamp(16px,1.6vw,18px)}
.header p a{color:var(--ink)}

/* section label */
.sec-label{max-width:var(--maxw);margin:0 auto;padding:30px 28px 0;display:flex;gap:16px;align-items:baseline;border-top:2px solid var(--ink)}
.sec-label .secnum{font-weight:600;font-size:13px;letter-spacing:.08em;color:var(--g2)}
.sec-label h2{font-family:var(--display);font-weight:700;font-size:clamp(22px,3vw,34px);letter-spacing:-.01em}

/* grid */
.grid-container{max-width:var(--maxw);margin:0 auto;padding:36px 28px 20px;display:grid;grid-template-columns:repeat(3,1fr);column-gap:36px;row-gap:56px}
.grid-item{display:flex;flex-direction:column}
.grid-item--title h2{font-family:var(--body);font-weight:600;font-size:19px;letter-spacing:-.01em;margin:0 0 7px;line-height:1.25}
.grid-item--title p{margin:0;color:var(--g1);font-weight:600;font-size:11px;letter-spacing:.13em;text-transform:uppercase}

/* media thumbnails: video buttons and soundcloud triggers share the look */
.video-embed-button,.grid-item--thumbnail{position:relative;display:block;width:100%;height:210px;margin:18px 0;padding:0;border:2px solid var(--ink);background:var(--paper);cursor:pointer;overflow:hidden}
.video-embed-button>img,.grid-item--thumbnail>img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.02) brightness(.9);transition:filter .4s ease,transform .8s ease}
.video-embed-button:hover>img,.grid-item--thumbnail:hover>img{filter:grayscale(0) contrast(1) brightness(1);transform:scale(1.03)}
.video-embed-button::after,.grid-item--thumbnail::after{content:"\25B6";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:16px;color:var(--ink);background:var(--paper);border:2px solid var(--ink);width:46px;height:46px;display:grid;place-items:center;opacity:0;transition:opacity .25s ease;pointer-events:none}
.video-embed-button:hover::after,.grid-item--thumbnail:hover::after{opacity:1}

/* description */
.grid-item--video-embed-container{margin:0}
.grid-item--description{padding:2px 0 0}
.grid-item--description p{margin:0 0 8px;color:var(--g1);font-size:14px;line-height:1.55}
.grid-item--description p a{color:var(--ink)}
.grid-item--description strong{color:var(--ink);font-weight:600}

/* footer */
.footer{max-width:var(--maxw);margin:30px auto 0;padding:26px 28px;border-top:2px solid var(--ink);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--g2);font-size:13px}
.footer a{color:var(--g2);font-weight:500}
.footer a:hover{color:var(--ink)}

/* soundcloud modal (behavior preserved, restyled) */
.soundcloud-embed-modal--wrapper{display:none}
.soundcloud-embed-modal--container{position:fixed;inset:0;width:100%;height:100%;background:rgba(0,0,0,.72);display:flex;justify-content:center;align-items:center;z-index:120}
.soundcloud-embed{width:600px;max-width:90%;position:relative;border:2px solid var(--ink);background:var(--paper)}
.soundcloud-embed iframe{display:block}
.soundcloud-embed--close{color:var(--ink);font-size:32px;font-weight:300;position:absolute;right:0;top:-46px;line-height:1;cursor:pointer}
.grid-item--thumbnail:hover,.soundcloud-embed--close:hover{cursor:pointer}

/* responsive */
@media screen and (max-width:1024px){.grid-container{grid-template-columns:repeat(2,1fr)}}
@media screen and (max-width:680px){.grid-container{grid-template-columns:1fr;row-gap:46px}.video-embed-button,.grid-item--thumbnail{height:210px}.soundcloud-embed{width:90%}}

/* loader */
body.loading{overflow:hidden}
.loader{position:fixed;inset:0;z-index:1000;background:var(--paper);color:var(--ink);display:flex;flex-direction:column;justify-content:space-between;transition:transform .72s cubic-bezier(.76,0,.24,1)}
.loader.done{transform:translateY(-101%)}
.loader .l-top{max-width:var(--maxw);margin:0 auto;width:100%;display:flex;align-items:center;justify-content:space-between;padding:24px 28px 0}
.loader .l-top .brand{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.01em}
.loader .l-main{max-width:var(--maxw);margin:0 auto;width:100%;padding:0 28px 9vh}
.loader .count{font-family:var(--display);font-weight:800;font-size:clamp(72px,17vw,220px);line-height:.85;letter-spacing:-.03em;display:flex;align-items:flex-start}
.loader .count .sign{font-size:.32em;font-weight:700;margin-top:.55em;margin-left:.08em;color:var(--g1)}
.loader .bar{height:3px;width:100%;background:var(--hair);margin-top:22px;overflow:hidden}
.loader .bar-fill{height:100%;width:0;background:var(--ink);transition:width .18s linear}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .loader{transition:none}
  .video-embed-button>img,.grid-item--thumbnail>img{transition:none}
}