@font-face{font-family:"Diatype Heavy";src:url("assets/fonts/DiatypeHeavy.otf") format("opentype");font-weight:800;font-display:swap}
@font-face{font-family:"Diatype Mono";src:url("assets/fonts/DiatypeMono.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Diatype Mono";src:url("assets/fonts/DiatypeMonoMedium.otf") format("opentype");font-weight:500;font-display:swap}
*{box-sizing:border-box}
html,body{margin:0;background:#fff;color:#000}
body{font-family:"Diatype Mono",ui-monospace,monospace;font-weight:400;font-size:15px;line-height:1.25;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
p{margin:0}
.h{font-family:"Diatype Heavy","Helvetica Neue",Arial,sans-serif;font-weight:800;letter-spacing:-.01em}
.ph{opacity:.5}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto minmax(0,1fr);column-gap:20px;row-gap:28px;padding:20px;min-height:100vh}
.grid.flat{grid-template-rows:auto;min-height:0}
.brand{display:flex;flex-direction:column;gap:2px}
.menu{display:flex;flex-direction:column;gap:2px}
.menu a{display:grid;grid-template-columns:28px 1fr;line-height:1.25}
.menu a .n{font-variant-numeric:tabular-nums}
.menu a.on .n{text-decoration:none}
.menu a.on span:last-child{text-decoration:underline}
.menu a:hover{text-decoration:none}.menu a:hover span:last-child{text-decoration:underline}
.menu a.on{text-decoration:none}
.wide{grid-column:span 2;display:flex;flex-direction:column;gap:18px}
.wide.tall{grid-row:1 / span 2}
.pic{grid-column:1 / span 2;grid-row:2;align-self:stretch;min-height:0;position:relative;overflow:hidden}
.pic img,.pic video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.lead{font-size:clamp(22px,2.4vw,34px);line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
.row{display:grid;grid-template-columns:1fr auto;gap:6px 24px;padding:12px 0;border-top:1px solid rgba(0,0,0,.15)}
.rows{display:flex;flex-direction:column}
.rows .row:last-child{border-bottom:1px solid rgba(0,0,0,.15)}
.row .r{text-align:right}
.stack{display:flex;flex-direction:column;gap:2px}
.thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.thumbs a{display:block;aspect-ratio:4/5;overflow:hidden}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.mark{position:fixed;right:20px;bottom:20px;z-index:3;line-height:0;color:#fff;mix-blend-mode:difference;isolation:auto}
.mark svg{width:24px;height:22px;display:block}
/* player */
.trk{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:0 14px;padding:10px 0;border-top:1px solid rgba(0,0,0,.15)}
.trk:last-child{border-bottom:1px solid rgba(0,0,0,.15)}
.pb{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(0,0,0,.25);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;color:#000;font:inherit}
.pb:hover{border-color:#000}
.trk.on .pb{background:#000;border-color:#000;color:#fff}
.pb .ic-pause{display:none}
.trk.on .pb .ic-play{display:none}
.trk.on .pb .ic-pause{display:block}
.bar{grid-column:2 / 4;height:1px;background:rgba(0,0,0,.15);margin-top:10px;position:relative;cursor:pointer;display:none}
.trk.active .bar{display:block}
.bar span{position:absolute;left:0;top:-1px;height:3px;background:#000;width:0}
.tc{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
/* landing */
.landing{background:#050505;color:#fff}
.landing .photo{position:fixed;top:-2px;right:-2px;bottom:-2px;left:-2px;height:calc(100lvh + 4px);z-index:0;background:#050505 url("assets/img/landing.jpg") center / cover no-repeat}
.landing .grid{position:relative;z-index:2;grid-template-rows:auto;min-height:0}
.landing > .grid .wide{max-width:520px}
@media (max-width:760px){
.grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;min-height:0}
.wide{grid-column:span 2}.wide.tall{grid-row:auto}
.pic{grid-row:auto;aspect-ratio:4/3}
}

@media (max-width:460px){
.grid{grid-template-columns:1fr}.wide,.pic{grid-column:span 1}
.thumbs{grid-template-columns:repeat(2,minmax(0,1fr))}
.landing .grid{display:flex;flex-direction:column;min-height:100vh;gap:28px}
.landing > .grid .wide{margin-top:auto;padding-bottom:4px;padding-right:64px}
}

/* long scroll on phone */
.longscroll{display:none}
html,body{transition:background-color .45s ease}
html.dark,html.dark body{background:#050505}
.mhead{display:none}
@media (max-width:760px){
.longscroll{display:block;background:#fff;color:#000;position:relative;z-index:1}
body.landing{background:#fff;min-height:100lvh}
.landing .photo{display:none}
.landing > .grid{position:relative;z-index:2;min-height:calc(100lvh + 120px);margin-top:-2px;padding-top:max(22px,calc(env(safe-area-inset-top) + 2px));background:linear-gradient(#050505 0,#050505 env(safe-area-inset-top,0px),rgba(5,5,5,0) calc(env(safe-area-inset-top,0px) + 90px)),url("assets/img/landing.jpg") center / cover no-repeat #050505}
.longscroll .sec{scroll-margin-top:0}
.longscroll .grid{display:flex;flex-direction:column;gap:28px;padding:20px;min-height:0}
.longscroll .pic{aspect-ratio:4/3;position:relative;margin:0;width:100%}
.longscroll .pic img,.longscroll .pic video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* fixed header */
.mhead{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;position:fixed;top:0;left:0;right:0;z-index:5;padding:20px;padding-top:max(20px,env(safe-area-inset-top));background:rgba(255,255,255,1);color:#000;border-bottom:1px solid rgba(0,0,0,.15);transition:background-color .45s ease,color .45s ease,border-color .45s ease}
.mhead.dark{background:rgba(255,255,255,0);color:#fff;border-bottom-color:rgba(0,0,0,0)}
.mhead a{color:inherit}
.landing > .grid .brand,.landing > .grid .menu{visibility:hidden}
.landing > .grid .wide{display:none}
.longscroll .sec{padding-top:0}
.sec{scroll-margin-top:152px}
.landing .mark{position:fixed;z-index:6;color:#fff}
.landing .mark.light{color:#fff}
}