:root{
  --white:#F4F4F2;
  --black:#000;
  --grey:#8A8A86;
  --line:rgba(0,0,0,.18);
  --hot:#6E5DF2;
  --g:clamp(.9rem,3vw,2.5rem);
  --nav:3.2rem;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--white);color:var(--black);-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{font-family:"Inter Tight",system-ui,sans-serif;font-weight:400;font-size:1rem;line-height:1.35;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a:focus-visible,button:focus-visible{outline:2px solid var(--hot);outline-offset:3px}
.mono{font-family:"Space Mono",ui-monospace,monospace;font-size:.72rem;line-height:1.4;letter-spacing:0}
.h{font-weight:900;letter-spacing:-.045em;line-height:.84;text-transform:lowercase}
.wrap{padding-left:var(--g);padding-right:var(--g)}
section[id]{scroll-margin-top:var(--nav)}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav);z-index:60;display:flex;align-items:center;justify-content:space-between;padding:0 var(--g);mix-blend-mode:difference;color:#fff}
.nav .c{position:absolute;left:50%;transform:translateX(-50%)}
.nav .r{display:flex;gap:1.4rem}
@media (max-width:600px){.nav .c{display:none}}

/* hero: hard-cut detail teasers */
.hero{position:relative;height:100svh;min-height:520px;overflow:hidden;background:#000}
.hero .t{position:absolute;inset:0;opacity:0}
.hero .t.on{opacity:1}
.hero .t img{width:100%;height:100%;object-fit:cover}
.hero .tag{position:absolute;top:calc(var(--nav) + .6rem);left:var(--g);z-index:3;color:#fff;mix-blend-mode:difference;display:flex;gap:1.5rem}
.hero h1{position:absolute;left:var(--g);bottom:.12em;z-index:3;font-size:clamp(7rem,28vw,26rem);color:#fff;margin-left:-.05em}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(transparent,rgba(0,0,0,.55));z-index:2;pointer-events:none}
.hero .meta{position:absolute;right:var(--g);bottom:1.4rem;z-index:3;color:#fff;text-align:right;display:grid;gap:.15rem}
@media (max-width:600px){.hero .meta{left:var(--g);right:auto;text-align:left;bottom:auto;top:calc(var(--nav) + 2.6rem)}}

/* marquee */
.marq{background:var(--black);color:var(--white);overflow:hidden;padding:.75rem 0;white-space:nowrap}
.marq .tr{display:inline-flex;animation:mv 40s linear infinite}
.marq span{display:inline-flex;gap:2.5rem;padding-right:2.5rem}
.marq b{color:var(--hot);font-weight:400}
.marq:hover .tr{animation-play-state:paused}
@keyframes mv{to{transform:translateX(-50%)}}

/* statement */
.say{padding:clamp(4rem,9vw,8rem) var(--g) clamp(3rem,7vw,6rem);display:grid;gap:2.5rem}
@media (min-width:900px){.say{grid-template-columns:8fr 4fr;align-items:end}}
.say h2{font-size:clamp(2.6rem,7.5vw,7rem);max-width:9em}
.say p{color:var(--black);max-width:30em}
.say p + p{margin-top:1rem;color:var(--grey)}
.say a.ul{border-bottom:1px solid var(--grey)}

/* makers */
.mk{padding-top:clamp(3rem,8vw,7rem)}
.mh{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.5rem 2rem;padding:0 var(--g) 1.2rem}
.mh h2{font-size:clamp(3rem,10vw,9rem);margin-left:-.05em}
.mh p{color:var(--grey);padding-bottom:.8rem}
.det figcaption{display:flex;justify-content:space-between;gap:1rem;right:.7rem}
.det figcaption b{font-weight:400}
.det figcaption span{opacity:.75}
/* ground up: book pages */
.gu{padding-top:clamp(4rem,10vw,9rem)}
.gu .lh h2{font-size:clamp(3rem,11vw,10rem)}
.gu .lh p{color:var(--grey);padding-bottom:.8rem;max-width:34em}
.pages{align-items:flex-start;gap:.6rem;background:#E9E9E6;padding-top:1rem;padding-bottom:1rem}
.pg{flex:0 0 auto;scroll-snap-align:start;width:min(74vw,560px)}
.pg img{width:100%;height:auto;box-shadow:0 1px 0 rgba(0,0,0,.08),0 12px 30px rgba(0,0,0,.08)}
.pg p{padding:.5rem 0 0;color:var(--black)}
/* details grid */
.det{display:grid;gap:1.2rem .5rem;padding:0 var(--g);grid-template-columns:1fr 1fr}
@media (min-width:900px){.det{grid-template-columns:repeat(4,1fr)}}
.det figure{position:relative;overflow:hidden}
.det img{width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;display:block}
.det figcaption{display:flex;justify-content:space-between;gap:1rem;padding-top:.45rem;color:var(--black)}
.det figcaption b{font-weight:400;color:var(--grey)}

/* looks strip */
.looks{padding-top:clamp(4rem,10vw,9rem);padding-bottom:clamp(3rem,8vw,7rem)}
.lh{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 2rem;padding:0 var(--g) 1.2rem}
.lh h2{font-size:clamp(4rem,14vw,13rem);margin-left:-.05em}
.tabs{display:flex;gap:1.2rem;padding-bottom:.8rem}
.tabs button{color:var(--grey);border-bottom:1px solid transparent;transition:color .25s,border-color .25s;text-transform:lowercase}
.tabs button.on{color:var(--black);border-color:var(--black)}
.rail{display:flex;gap:.35rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 var(--g);cursor:grab;-webkit-overflow-scrolling:touch;align-items:flex-start}
.rail::-webkit-scrollbar{display:none}
.rail.drag{cursor:grabbing;scroll-snap-type:none}
.card{flex:0 0 auto;scroll-snap-align:start;position:relative;height:min(76vh,760px)}
.card figure{height:100%;overflow:hidden;background:#ddd}
.card img{height:100%;width:auto;user-select:none;-webkit-user-drag:none}
.card figcaption{position:absolute;left:.8rem;bottom:.7rem;right:.8rem;display:flex;justify-content:space-between;gap:1rem;color:#fff;mix-blend-mode:difference}
.card .open{position:absolute;inset:0;width:100%;height:100%}
@media (max-width:700px){
  .rail{align-items:center}
  .card{height:auto;width:88vw}
  .card img{width:100%;height:auto}
}
.rf{display:flex;align-items:center;gap:1.5rem;padding:1rem var(--g) 0}
.bar{flex:1;height:1px;background:var(--line);position:relative}
.bar i{position:absolute;top:0;bottom:0;left:0;width:10%;background:var(--black);transition:left .2s,width .2s}
.arr{display:flex;gap:.5rem}
.arr button{width:2.4rem;height:2.4rem;border:1px solid var(--black);display:grid;place-items:center;transition:background .2s,color .2s}
.arr button:hover{background:var(--black);color:var(--white)}
.arr svg{width:.9rem;height:.9rem;stroke:currentColor;fill:none;stroke-width:1.6}
.cnt{min-width:4.6em;text-align:right;font-variant-numeric:tabular-nums}

/* credits */
.cred{background:var(--black);color:var(--white);padding:clamp(4rem,10vw,9rem) var(--g) clamp(2rem,5vw,4rem)}
.cred .yrs{font-size:clamp(4rem,16vw,15rem);margin-left:-.05em}
.cred .yrs b{color:var(--hot);font-weight:400}
.list{margin-top:clamp(2rem,6vw,5rem);display:grid;gap:0;max-width:60rem;border-top:1px solid rgba(255,255,255,.25)}
.list div{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:.7rem 0;border-bottom:1px solid rgba(255,255,255,.25)}
.list dt{color:rgba(255,255,255,.55)}
.list dd{font-weight:500;text-transform:lowercase}
.list .dim{color:rgba(255,255,255,.35)}
.list dd a{border-bottom:1px solid transparent;transition:border-color .2s}
.list dd a:hover{border-color:var(--hot)}
@media (max-width:520px){.list div{grid-template-columns:1fr;gap:.2rem}}
.cred .note{margin-top:2.5rem;color:rgba(255,255,255,.55);max-width:28em}
footer{background:var(--black);color:rgba(255,255,255,.55);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem 2rem;padding:1rem var(--g) 2rem}
footer nav{display:flex;gap:1.6rem}
footer a:hover{color:#fff}

/* lightbox */
.lb{position:fixed;inset:0;z-index:100;background:var(--white);display:none;align-items:center;justify-content:center;padding:var(--nav) var(--g) 3rem}
.lb.open{display:flex}
.lb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.lb .cap{position:absolute;left:var(--g);bottom:1rem;display:flex;gap:1.5rem}
.lb .x{position:absolute;top:.8rem;right:var(--g);z-index:2}
.lb .p,.lb .n{position:absolute;top:0;bottom:0;width:25%;cursor:w-resize}
.lb .n{right:0;cursor:e-resize}.lb .p{left:0}

@media (prefers-reduced-motion:reduce){
  .marq .tr{animation:none!important}
}