:root{
  --bg:#FAF9F6; --ink:#151413; --mute:#6F6B64; --line:#E3E0DA; --card:#FFFFFF;
  --accent:#C8263A; --accent-ink:#FFFFFF; --shelf:#D9D5CE; --stage:#ECEAE5; --shadow:rgba(21,20,19,.18);
  --display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"Instrument Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  /* layout + control system */
  --wrap:2400px;
  --gut:clamp(16px,3.2vw,64px);
  --top-h:76px;
  --ctl:40px;
}
:root,:root[data-theme="dark"]{color-scheme:light}
@media (pointer:coarse){:root{--ctl:44px}}
@media (max-width:520px){:root{--top-h:64px}}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--body);padding-inline:var(--gut);overflow-x:hidden;
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
body>main{flex:1 0 auto;width:100%}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* page transitions: a quiet cross-fade between pages, header held still */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s;animation-timing-function:ease}
.top{view-transition-name:site-top}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;max-width:var(--wrap);margin-inline:auto;height:var(--top-h);background:var(--bg);border-bottom:1px solid var(--line)}
.mark{font:800 clamp(18px,2.4vw,24px)/1 var(--display);font-stretch:72%;letter-spacing:.01em;text-transform:uppercase;text-decoration:none}
.mark span{color:var(--accent)}
.brand{display:grid;gap:6px}
.tag{font:400 11px/1 var(--mono);color:var(--mute);letter-spacing:.08em;text-transform:uppercase}
.hint{font:400 12px/1.5 var(--mono);color:var(--mute);letter-spacing:.06em;text-transform:uppercase}

/* ---- controls: one height, one pill ---- */
.nav{display:flex;align-items:center;gap:8px}
.navlink,.bag,.size,.tabs button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--ctl);padding:0 16px;
  border:1px solid var(--line);border-radius:999px;background:transparent;font:500 13px/1 var(--mono);letter-spacing:.02em;text-decoration:none;white-space:nowrap;
  transition:border-color .2s,background-color .2s,color .2s}
.navlink{border-color:transparent}
.navlink:hover,.size:hover,.tabs button:hover{border-color:var(--ink)}
.navlink[aria-current="page"]{border-color:var(--ink)}
.bag{border-color:var(--ink);padding-right:10px}
.bag b{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:500;font-size:11px}
.size.on,.tabs button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.btn{display:inline-flex;align-items:center;justify-content:center;height:var(--ctl);padding:0 20px;border:1px solid var(--ink);border-radius:999px;
  background:var(--ink);color:var(--bg);font:600 14px/1 var(--body);letter-spacing:.01em;text-decoration:none;white-space:nowrap}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.accent{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.arrows{display:flex;gap:8px}
.arrows button{display:inline-grid;place-items:center;width:var(--ctl);height:var(--ctl);padding:0;border-radius:999px;border:1px solid var(--line);background:var(--card);font-size:16px;line-height:1;transition:border-color .2s}
@media (hover:hover){.arrows button:hover{border-color:var(--ink)}}
.x{position:absolute;right:12px;top:12px;display:inline-grid;place-items:center;width:var(--ctl);height:var(--ctl);padding:0;border-radius:999px;border:1px solid var(--line);background:var(--bg);font-size:18px;line-height:1}

/* the Shop button: label + arrow, arrow always shown, nudges right on hover */
#shopBtn{gap:10px;padding:0 18px 0 20px;transition:background-color .25s,border-color .25s,color .25s}
#shopBtn .ar{display:block;line-height:1;transition:transform .25s ease}
@media (hover:hover){
  #shopBtn:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
  #shopBtn:hover .ar{transform:translateX(3px)}
}
#shopBtn.beat{animation:beat .7s ease}
@keyframes beat{0%{transform:scale(1)}35%{transform:scale(1.07);background:var(--accent);border-color:var(--accent)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){#shopBtn.beat{animation:none}}

/* ---- landing: header + crate + now row fill the first screen ---- */
.home{display:flex;flex-direction:column;max-width:var(--wrap);margin-inline:auto;
  min-height:calc(100vh - var(--top-h));min-height:calc(100svh - var(--top-h) - env(safe-area-inset-top,0px));
  padding-top:clamp(12px,2.2vh,24px);
  /* space everything else on the first screen needs; the posters get the rest */
  --reserve:350px;
  --cw:clamp(150px,min(46vw,calc((100svh - var(--reserve)) / 1.4143)),640px);
  --ph:calc(var(--cw) * 1.4143)}
@media (max-width:859px){.home{--reserve:400px}}
@media (max-width:520px){.home{--reserve:360px;--cw:clamp(170px,min(70vw,calc((100svh - var(--reserve)) / 1.4143)),300px)}}

/* the stage takes whatever height is left; the posters sit optically centred in it (a touch low, to leave the hint room above) */
.crate-wrap{position:relative;flex:1 0 auto;min-height:calc(var(--ph) + 90px);background:var(--stage);border-radius:4px;overflow:hidden}
.crate-in{position:absolute;inset:0}
.crate{position:relative;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  height:100%;padding-block:44px 22px;padding-inline:calc(50% - var(--cw)/2 + var(--cw)*0.28);
  perspective:max(1400px,calc(var(--cw) * 4.7));scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab}
.crate::-webkit-scrollbar{display:none}
.crate:active{cursor:grabbing}
.sleeve{position:relative;z-index:1;flex:0 0 var(--cw);margin-inline:calc(var(--cw) * -0.28);scroll-snap-align:center;border:0;padding:0;background:none;
  height:var(--ph);display:flex;align-items:flex-end;transform-style:preserve-3d;transform-origin:50% 100%;will-change:transform;transition:transform .12s linear;animation:sleeveIn .5s ease both}
@keyframes sleeveIn{from{opacity:0}}
.sleeve.land{flex-basis:calc(var(--cw)*1.414)}
.sleeve.sq{flex-basis:calc(var(--cw)*1.1)}
.sleeve img{display:block;width:100%;aspect-ratio:42/59.4;object-fit:cover;background:var(--card);
  box-shadow:0 1px 2px rgba(21,20,19,.12),0 22px 28px -14px rgba(21,20,19,.35);border-radius:1px}
.sleeve.land img{aspect-ratio:59.4/42}
.sleeve.sq img{aspect-ratio:1/1;object-fit:contain}
#crate:empty::after{content:"Loading…";position:absolute;left:0;right:0;top:50%;text-align:center;font:400 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.shelf{position:absolute;left:8%;right:8%;bottom:calc(50% - var(--ph) / 2 - 27px);height:28px;background:radial-gradient(ellipse at center,rgba(21,20,19,.22) 0%,rgba(21,20,19,.08) 45%,rgba(21,20,19,0) 72%);filter:blur(4px);z-index:0;pointer-events:none}
.swipe{position:absolute;left:50%;top:max(14px,calc(50% - var(--ph) / 2 - 33px));transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:999px;background:var(--ink);color:var(--bg);font:500 11px/1 var(--mono);letter-spacing:.04em;white-space:nowrap;pointer-events:none;transition:opacity .4s}
.swipe.gone{opacity:0}
html.lock .swipe{display:none}
.swipe i{font-style:normal;display:inline-block;animation:nudge 1.2s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

/* the "now" row: name left, arrows under the crate's centre, Shop right */
.now{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;padding-block:18px clamp(18px,3vh,28px)}
.now .who{min-width:0;cursor:pointer}
.now h2{margin:0;height:1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:800 clamp(28px,3.2vw,40px)/1 var(--display);font-stretch:75%;text-transform:uppercase}
.now .meta{margin-top:8px;min-height:1.4em;font:400 13px/1.4 var(--mono);color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.now .tap{margin-top:4px;font:400 11px/1.4 var(--mono);color:var(--mute);letter-spacing:.06em;text-transform:uppercase}
.now .cta{display:flex;justify-content:flex-end}
@media (max-width:859px){
  .now{grid-template-columns:auto 1fr;gap:16px 12px;padding-block:16px 20px}
  .now .who{grid-column:1/-1}
}

/* ---- shop ---- */
.shophead{width:100%;max-width:var(--wrap);margin:clamp(24px,4vw,44px) auto 0;display:grid;gap:14px}
.shophead h1{margin:0;font:800 clamp(56px,11vw,132px)/.85 var(--display);font-stretch:68%;text-transform:uppercase;letter-spacing:-.01em}
.shophead .row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--ink);padding-bottom:12px;min-height:calc(var(--ctl) + 13px)}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.shopgrid{max-width:var(--wrap);margin:0 auto}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:36px 20px;padding-top:24px;align-items:start}
@media (max-width:520px){.grid{grid-template-columns:1fr 1fr;gap:30px 12px}}
#grid:empty::after{content:"Loading…";font:400 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);padding:40px 0;display:block}
.tile{display:flex;flex-direction:column;gap:6px;border:0;background:none;padding:0;text-align:left;min-width:0;animation:sleeveIn .4s ease both}
.tile .frame{background:var(--stage);padding:12%;transition:background-color .3s;aspect-ratio:5/6;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:4px}
.tile.sq .frame{padding:6%}
.tile img{display:block;max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 1px 2px rgba(21,20,19,.12),0 14px 20px -12px rgba(21,20,19,.35);transition:transform .35s ease}
.tile:hover img{transform:translateY(-4px)}
.tile:hover .frame{background:#E4E1DB}
.tile .name{font-weight:600;font-size:15px;line-height:1.2}
.tile .price{font:400 13px/1 var(--mono);color:var(--mute)}

/* notes */
.notes{max-width:var(--wrap);margin:clamp(40px,7vw,80px) auto 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:20px;
  border-top:1px solid var(--line);padding-top:20px;color:var(--mute);font-size:14px}
.notes b{display:block;color:var(--ink);font:500 12px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.06em}

/* ---- legal pages ---- */
.doc{max-width:680px;margin:clamp(24px,4vw,48px) auto 0}
.doc h1{margin:0 0 20px;font:800 clamp(44px,8vw,80px)/.9 var(--display);font-stretch:68%;text-transform:uppercase}
.doc h2{margin:28px 0 8px;font:500 12px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.06em}
.doc p,.doc li{font-size:16px;line-height:1.55}
.doc ul{padding-left:20px}
.doc .upd{font:400 12px/1.5 var(--mono);color:var(--mute)}

/* ---- footer: one band on every page ---- */
.foot{width:100%;max-width:var(--wrap);margin:clamp(56px,8vw,96px) auto 0;border-top:1px solid var(--ink);
  padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));font:400 12px/1.5 var(--mono);color:var(--mute)}
.home+.foot{margin-top:0}
.foot a{color:inherit;text-decoration:none;transition:color .2s}
.foot a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.foot-in{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:24px;padding-block:28px 40px}
.foot-brand{display:grid;gap:8px;align-content:start}
.foot-brand .mark{font-size:18px;color:var(--ink)}
.foot-brand .mark:hover{text-decoration:none}
.foot-col{display:grid;gap:6px;align-content:start;justify-items:start}
.foot-base{margin:0;display:flex;justify-content:space-between;gap:16px;padding-top:14px;border-top:1px solid var(--line);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
@media (max-width:640px){
  .foot-in{grid-template-columns:1fr 1fr;gap:24px 16px;padding-block:24px 32px}
  .foot-brand{grid-column:1/-1}
}

/* ---- sheet ---- */
.veil{position:fixed;inset:0;background:rgba(10,10,10,.45);z-index:40}
.sheet{position:fixed;z-index:50;left:50%;top:50%;transform:translate(-50%,-50%);width:min(960px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;
  background:var(--bg);display:grid;grid-template-columns:1.1fr 1fr;border-radius:4px}
.sheet .pic{background:var(--stage);padding:clamp(20px,5vw,48px);display:grid;place-items:center}
.sheet .pic img{width:100%;max-width:420px;box-shadow:0 1px 2px rgba(21,20,19,.12),0 24px 36px -18px rgba(21,20,19,.4)}
.sheet .info{padding:clamp(20px,4vw,40px);display:grid;align-content:start;gap:16px}
.sheet h4{margin:0;font:800 clamp(30px,4.4vw,48px)/.95 var(--display);font-stretch:70%;text-transform:uppercase;text-wrap:balance}
.spec{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font:400 13px/1.5 var(--mono);margin:0}
.spec dt{color:var(--mute)} .spec dd{margin:0}
.sizes{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:720px){.sheet{grid-template-columns:1fr;top:auto;bottom:0;left:0;transform:none;width:100%;max-height:92dvh;border-radius:14px 14px 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}}

/* ---- cart ---- */
.cart{position:fixed;z-index:60;top:0;right:0;height:100%;height:100dvh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;width:min(420px,100%);background:var(--bg);border-left:1px solid var(--line);
  display:grid;grid-template-rows:auto 1fr auto;padding:calc(16px + env(safe-area-inset-top,0px)) 20px calc(20px + env(safe-area-inset-bottom,0px))}
.cart.paying{display:block}
.cart.paying #pay{margin-top:12px;padding-bottom:40px}
html.lock,html.lock body{overflow:hidden}
.cart h5{margin:0;font:800 22px/1 var(--display);font-stretch:75%;text-transform:uppercase}
.lines{overflow:auto;display:grid;align-content:start;gap:14px;padding-block:16px}
.line{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center}
.line img{width:56px;height:56px;object-fit:contain}
.line small{display:block;color:var(--mute);font:400 12px/1.4 var(--mono)}
.qty{display:flex;align-items:center;gap:8px;font:400 13px var(--mono)}
.qty button{width:28px;height:28px;border-radius:999px;border:1px solid var(--line);background:var(--card)}
.total{display:flex;justify-content:space-between;font:500 15px var(--mono);border-top:1px solid var(--ink);padding-top:14px;margin-bottom:12px}
.empty{color:var(--mute)}
.notice{font-size:13px;color:var(--mute);margin:10px 0 0}
#pay{margin-top:8px}

/* ---- thank you ---- */
.thanks{position:fixed;inset:0;z-index:80;background:#fff;display:grid;place-items:center;padding:calc(24px + env(safe-area-inset-top,0px)) 24px calc(24px + env(safe-area-inset-bottom,0px));overflow:auto;text-align:center}
.thanks[hidden]{display:none}
.thanks .in{max-width:520px;display:grid;justify-items:center;gap:18px}
.thanks .pics{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.thanks .pics img{width:min(52vw,220px);box-shadow:0 1px 2px rgba(21,20,19,.12),0 24px 36px -18px rgba(21,20,19,.4)}
.thanks .pics.many img{width:min(34vw,140px)}
.thanks h2{margin:8px 0 0;font:800 clamp(52px,14vw,96px)/.9 var(--display);font-stretch:68%;text-transform:uppercase}
.thanks h2 span{color:var(--accent)}
.thanks p{margin:0;font-size:16px;color:var(--ink);text-wrap:balance}
.thanks small{font:400 12px/1.5 var(--mono);color:var(--mute);letter-spacing:.04em}

@media (prefers-reduced-motion:reduce){.sleeve,.tile,.tile img{transition:none;animation:none}}

@media (max-width:520px){
  .tag{font-size:10px;letter-spacing:.06em;white-space:nowrap}
  .navlink,.bag{padding-inline:12px}
  .bag{padding-right:8px}
}