/* .ckpt drop page. One file so the live site can run with style-src 'self'. */
@font-face{font-family:"JetBrains Mono"; src:url("/assets/jetbrains-mono.woff2") format("woff2"); font-weight:100 800; font-style:normal; font-display:swap}
:root{
  /* Three views. Home: the cover piece (the rose) settles onto the shirt within a second, then one sticky chapter per piece.
     Shop: its own page with all pieces. Piece: the photos and pre-reserve. Paper is the grey of the product photos (#f4f4f4). */
  --bg:#060607;
  --fg:#f4f3f1;
  --mute:#8d8c93;
  --line:#25252a;
  --studio:#f4f4f4;
  --rule:#dcdcde;
  --edge:#bdbdc1;
  --sub:#56555b;
  --ink:#0b0b0c;
  --mono:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --gut-l:max(20px, env(safe-area-inset-left,0px));
  --gut-r:max(20px, env(safe-area-inset-right,0px));
  color-scheme:dark;
}
@media (min-width:900px){ :root{ --gut-l:max(40px, env(safe-area-inset-left,0px)); --gut-r:max(40px, env(safe-area-inset-right,0px)); } }
*,*::before,*::after{box-sizing:border-box}
html,body{background:var(--bg); color:var(--fg)}
body{margin:0; font-family:var(--mono); font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid currentColor; outline-offset:3px}
a{color:inherit}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

/* site bar */
.site{position:fixed; z-index:10; top:0; left:0; right:0; display:flex; align-items:center; gap:24px; padding:22px var(--gut-r) 0 var(--gut-l); color:var(--fg); mix-blend-mode:difference; pointer-events:none}
.site > *{pointer-events:auto}
.wm{font-weight:800; font-size:22px; letter-spacing:-.03em; text-decoration:none}
.site nav{margin-left:auto; display:flex; gap:22px; font-size:13px}
.site nav a, .site nav button{text-decoration:none; background:none; border:0; padding:0; color:inherit; font:inherit; cursor:pointer}
.site .menu-btn{display:none}
/* step indicator: one entry per piece, the current one is lit */
.steps{position:absolute; left:50%; transform:translateX(-50%); display:flex; gap:18px; font-size:12px; font-variant-numeric:tabular-nums}
.steps a{text-decoration:none; opacity:.42; transition:opacity .3s}
.steps a.on{opacity:1}
.steps a.on::before{content:"\25CF\00a0"}
@media (max-width:1099px){ .steps{display:none} }
@media (max-width:640px){ .site nav a:not(#shopLink){display:none} .site .menu-btn{display:inline} }

/* menu on phones: the drop as a file listing */
.menu{position:fixed; z-index:30; inset:0; background:var(--bg); color:var(--fg); padding:22px var(--gut-r) 32px var(--gut-l); overflow:auto; font-size:14px}
.menu[hidden]{display:none}
.menu-top{display:flex; align-items:center}
.menu-top button{margin-left:auto; background:none; border:0; color:inherit; font:inherit; font-size:13px; cursor:pointer}
.menu .dir{margin:44px 0 6px; color:var(--mute); font-size:12px}
.menu ul{list-style:none; margin:0; padding:0}
.menu li a{display:flex; gap:16px; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--line); text-decoration:none; white-space:pre}
.menu li a span{color:var(--mute)}
.menu .more{margin-top:28px}
.menu .more a{border-bottom:0; padding:8px 0; color:var(--mute)}

/* status of the drop window */
.dot{display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; margin-right:8px; vertical-align:1px; animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}

/* chapters: a tall section with a sticky stage */
.chap{position:relative}
.chap.hero{height:100vh; height:100svh}
.chap:not(.hero){height:220vh}
.sticky{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden}
.sticky canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.copy{position:absolute; z-index:3; left:var(--gut-l); top:50%; transform:translateY(-46%); max-width:min(640px, 52vw)}
.claim{margin:0; font-weight:600; font-size:clamp(34px,4.2vw,70px); line-height:1.05; letter-spacing:-.04em; text-wrap:balance}
.claim .w{display:inline-block; min-width:1ch; white-space:nowrap}
.claim .w .m{font-weight:300; color:var(--mute)}
.no{margin:0 0 14px; font-size:12px; color:var(--mute); letter-spacing:.04em; font-variant-numeric:tabular-nums}
.meta{margin:24px 0 0; font-size:13px; color:#c9c8ce; letter-spacing:.01em}
.say{margin:20px 0 0; font-size:15px; color:#c9c8ce; max-width:34ch}
/* hero caption: under the shirt, quiet */
.hero .cap{left:auto; right:var(--gut-r); bottom:4.5vh; width:min(560px, 46vw); text-align:center; color:var(--mute)}
.hero .cap p{font-size:13px; font-weight:400; letter-spacing:0; white-space:normal; color:var(--fg)}
.hero .cap span{color:var(--mute)}
.hero .cap a{color:var(--fg)}
.btn{display:inline-flex; margin-top:28px; padding:14px 30px; border:1px solid currentColor; text-decoration:none; font-size:14px; letter-spacing:.02em; background:none; color:inherit; font-family:inherit; cursor:pointer}
.btn:hover{background:var(--fg); color:var(--bg)}
.btn.sm{margin-top:16px; padding:10px 22px; font-size:13px}
/* buttons: a holo light runs once around the edge when they appear, and again on hover; the label decodes from characters */
.btn{position:relative; isolation:isolate}
.btn::after{content:""; position:absolute; inset:-1px; padding:1px; pointer-events:none; opacity:0;
  background:linear-gradient(105deg, transparent 0 32%, #c4f0ff 38%, #8c88ff 43%, #ec80ff 48%, #ff60de 51%, #ffd0f0 55%, transparent 62% 100%) 100% 0 / 320% 100% no-repeat;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0)}
@keyframes edge{0%{opacity:1; background-position:100% 0} 85%{opacity:1} 100%{opacity:0; background-position:0 0}}
.copy .btn::after{animation:edge 1.6s ease-out 2.6s 1}
.cap.on .btn::after{animation:edge 1.4s ease-out .15s 1}
.btn:hover::after, .btn:focus-visible::after{animation:edge .9s ease-out 1}
.info .btn::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0;
  background:linear-gradient(105deg, transparent 30%, rgba(196,240,255,.35) 42%, rgba(236,128,255,.4) 50%, rgba(255,96,222,.3) 56%, transparent 68%) 100% 0 / 300% 100% no-repeat}
@keyframes sheen{0%{opacity:1; background-position:100% 0} 100%{opacity:1; background-position:0 0}}
.info .btn:hover::before{animation:sheen .8s ease-out 1}
.info .btn::after{inset:0}
.hud{position:absolute; z-index:3; right:var(--gut-r); bottom:5vh; margin:0; font-size:13px; color:var(--mute); font-variant-numeric:tabular-nums}
.hud b{color:var(--fg); font-weight:600}
.cap{position:absolute; z-index:3; left:0; right:0; bottom:4vh; text-align:center; color:var(--ink); opacity:0; pointer-events:none}
.cap.on{pointer-events:auto}
.cap p{margin:0; font-weight:600; letter-spacing:-.03em; font-size:clamp(17px,1.7vw,23px); white-space:pre}
.cap span{display:block; margin-top:6px; font-size:12px; color:var(--sub)}
.cap .btn:hover{background:var(--ink); color:var(--studio)}
/* chapters end on the model: on wide screens the caption stands beside her, not over her */
@media (min-width:900px){ .chap:not(.hero) .cap{left:auto; right:var(--gut-r); bottom:auto; top:50%; transform:translateY(-50%); width:min(380px, 27vw); text-align:left} }
@media (max-width:899px){
  .copy{top:auto; bottom:12vh; transform:none; max-width:none; right:var(--gut-r)}
  .hero .copy{bottom:calc(9vh + 44px)}
  .hero .cap{display:none}
  .chap:not(.hero) .cap{bottom:calc(70px + env(safe-area-inset-bottom,0px)); padding-inline:var(--gut-l) var(--gut-r)}
  .claim{font-size:clamp(28px,8.4vw,44px)}
  .hud{bottom:4vh}
}

/* bottom bar on phones: the current piece, one tap from its page */
.bbar{position:fixed; z-index:9; left:0; right:0; bottom:0; display:none; align-items:center; gap:12px; padding:14px var(--gut-r) calc(14px + env(safe-area-inset-bottom,0px)) var(--gut-l);
  background:rgba(6,6,7,.86); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-top:1px solid var(--line); color:var(--fg); text-decoration:none; font-size:13px;
  transform:translateY(110%); transition:transform .35s ease}
.bbar b{font-weight:600; white-space:pre; overflow:hidden; text-overflow:ellipsis}
.bbar span{margin-left:auto; white-space:nowrap; color:var(--mute)}
.bbar span i{font-style:normal; color:var(--fg); margin-left:10px}
.bbar.on{transform:none}
@media (max-width:899px){ .bbar{display:flex} body[data-view="piece"] .bbar{display:none} }

/* light sections: other pieces, buy box, drop facts */
.paper{background:var(--studio); color:var(--ink)}
.wrap{max-width:1180px; margin:0 auto; padding-left:var(--gut-l); padding-right:var(--gut-r)}
.sect{padding-block:9vh 7vh}
.sect h2{margin:0 0 28px; font-weight:600; letter-spacing:-.04em; font-size:clamp(26px,3vw,42px); line-height:1.05}
.sect .sub{margin:0 0 40px; color:var(--sub); max-width:60ch}
/* shop grid: the flat shot, on hover the model wearing it */
.grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:64px 32px}
.grid.small{grid-template-columns:repeat(6, minmax(0,1fr)); gap:32px 20px}
@media (max-width:1099px){ .grid{grid-template-columns:repeat(2, minmax(0,1fr)); gap:48px 20px} .grid.small{grid-template-columns:repeat(3, minmax(0,1fr))} }
@media (max-width:640px){ .grid{gap:36px 12px} .grid.small{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:42vw; overflow-x:auto; padding-bottom:8px} }
.card{display:grid; gap:12px; align-content:start; text-decoration:none; min-width:0}
.card .ph{position:relative; display:block; aspect-ratio:3/4; background:var(--studio); overflow:hidden}
.card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:opacity .5s ease, transform .8s ease}
.card img.alt{opacity:0}
/* the flat shot has a lot of backdrop around the shirt; a little closer, so shirts and model fill their frames alike */
.card img:not(.alt){transform:scale(1.14)}
@media (hover:hover){ .card:hover img.alt{opacity:1} .card:hover img:not(.alt){transform:scale(1.17)} .card:hover img.alt{transform:scale(1.015)} }
.card b{font-weight:600; white-space:pre-wrap; letter-spacing:-.02em; font-size:15px}
.card span{font-size:12px; color:var(--sub)}
.grid.small .card b{font-size:13px}

/* shop page */
.shop{min-height:100vh}
.shop .wrap{max-width:1320px; padding-block:max(18vh, 120px) 14vh}
.shop-head{max-width:62ch; margin-bottom:12vh}
.shop-head .no{color:var(--sub)}
.shop-head h1{margin:0; font-weight:800; letter-spacing:-.05em; font-size:clamp(56px,9vw,128px); line-height:.9}
.shop-head .sub{margin:28px 0 0; color:var(--sub); font-size:15px; max-width:52ch}
.group{margin:0 0 28px; padding-top:18px; border-top:1px solid var(--rule); font-size:12px; font-weight:400; letter-spacing:.06em; color:var(--sub)}
.grid + .group{margin-top:14vh}

/* piece page: photos on the left, the buy box stays beside them */
.piece{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr); gap:56px; align-items:start; max-width:1320px; padding-block:max(14vh, 104px) 10vh}
.gallery{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px}
.gallery figure{margin:0; position:relative; aspect-ratio:3/4; background:var(--studio); overflow:hidden}
.gallery img{width:100%; height:100%; object-fit:cover; display:block}
/* the caption reads on the grey backdrop and on black cloth alike */
.gallery figcaption{position:absolute; left:12px; bottom:10px; font-size:11px; letter-spacing:.03em; color:#fff; mix-blend-mode:difference; opacity:.72}
.info{position:sticky; top:96px}
.crumb{margin:0 0 18px; font-size:12px; color:var(--sub)}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}
.info h1{margin:0; font-weight:600; letter-spacing:-.04em; font-size:clamp(26px,2.6vw,36px); white-space:pre}
@media (max-width:899px){
  .piece{grid-template-columns:1fr; gap:28px; padding-top:76px}
  .gallery{display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:calc(-1 * var(--gut-l)) calc(-1 * var(--gut-r)); padding-inline:var(--gut-l) var(--gut-r); scrollbar-width:none}
  .gallery::-webkit-scrollbar{display:none}
  .gallery figure{flex:0 0 86%; scroll-snap-align:center}
  .info{position:static}
}
.price{margin:8px 0 0; font-size:18px}
.sizes{display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; padding:0; border:0}
.sizes legend{font-size:12px; color:var(--sub); margin-bottom:10px; padding:0}
.sizes label{position:relative}
.sizes input{position:absolute; opacity:0; inset:0}
.sizes span{display:inline-flex; min-width:52px; justify-content:center; padding:10px 12px; border:1px solid var(--edge); cursor:pointer}
.sizes input:checked + span{border-color:var(--ink); background:var(--ink); color:var(--studio)}
.sizes input:focus-visible + span{outline:2px solid var(--ink); outline-offset:2px}
@media (max-width:420px){ .sizes{gap:6px} .sizes span{min-width:44px; padding:10px 6px} }   /* S–3XL in one row on phones */
.info .btn, .btn.ink{background:var(--ink); color:var(--studio); border-color:var(--ink)}
.info .btn{width:100%; justify-content:center}
.info .btn:hover, .btn.ink:hover{background:#000; color:var(--studio)}
.info .say{margin-top:10px; color:var(--sub)}
.note{margin:14px 0 0; font-size:12px; color:var(--sub)}
.facts{margin:32px 0 0; display:grid; grid-template-columns:auto 1fr; gap:8px 22px; font-size:13px}
.facts dt{color:var(--sub)}
.facts dd{margin:0}

.about{border-top:1px solid var(--rule)}
.about h2 span{font-weight:300; color:var(--sub)}
.about .path{margin:0 0 18px; font-size:12px; color:var(--sub)}
.about h2{margin:0 0 22px}
.about p{margin:0 0 14px; max-width:58ch; font-size:15px}
.about p:last-child{margin-bottom:0}
.drop{border-top:1px solid var(--rule)}
.drop .big{margin:0; font-weight:800; letter-spacing:-.05em; font-size:clamp(56px,11vw,160px); line-height:.9}
.drop-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:end; margin-top:40px}
.drop-grid p{margin:0; max-width:46ch}
.drop-grid .btn{margin-top:28px}
.card-model{margin:0; padding:20px 22px; border:1px solid var(--edge); font-size:13px; display:grid; gap:4px}
@media (max-width:899px){ .drop-grid{grid-template-columns:1fr} }
.foot .wrap{padding-block:28px 120px; border-top:1px solid var(--rule); font-size:12px; color:var(--sub); display:flex; flex-wrap:wrap; gap:10px 24px}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline}

/* views: home (the story), shop, or the page of one piece (where ads land) */
body:not([data-view="home"]) main > :not(#shop):not(#buy):not(#more):not(.current), body[data-view="home"] #shop, body[data-view="home"] #buy, body[data-view="home"] #more,
body[data-view="shop"] #buy, body[data-view="shop"] #more, body[data-view="piece"] #shop{display:none}
body:not([data-view="home"]) .steps, body:not([data-view="home"]) .bbar{display:none}
/* from the site: straight to the product; from an ad: the chapter, then the photos with no caption in between */
body[data-view="piece"][data-entry="site"] .chap{display:none}
body[data-view="piece"] .chap .cap{display:none}
body[data-view="piece"] .chap.hero{height:100vh}
body[data-view="piece"] .chap:not(.hero){height:170vh}
body[data-view="piece"][data-entry="ad"] .current ~ #buy .piece{padding-top:10vh}
#more .sect{padding-block:6vh 4vh}

/* prototype controls (not part of the site) */
.ctl{position:fixed; z-index:20; left:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:8px 12px; border-radius:12px;
  background:rgba(30,30,34,.92); color:#fff; font-size:11px; max-width:calc(100% - 24px)}
.ctl .ctl-t{background:none; border:0; color:#9a9da6; padding:2px 0; letter-spacing:.06em; font:inherit; cursor:pointer}
.ctl.closed > :not(.ctl-t){display:none}
.ctl[hidden]{display:none}
.ctl .diag{color:#9a9da6}
.ctl label{display:flex; align-items:center; gap:6px}
.ctl select{font:inherit}
.ctl button:not(.ctl-t){font:inherit; color:#0b0b0c; background:#fff; border:0; border-radius:6px; padding:5px 9px; cursor:pointer}
@media (max-width:899px){ .ctl{bottom:auto; top:64px} }