/* .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{
  /* Layout: one long drop page. The cover piece (the rose) opens it and settles onto the shirt within a second,
     then an index of all pieces, then one sticky chapter per piece. Studio grey wherever the product is shown. */
  --bg:#060607;
  --fg:#f4f3f1;
  --mute:#8d8c93;
  --line:#25252a;
  --studio:#ddd5cf;
  --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:150vh}
.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}
.buy .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}}
.buy .btn:hover::before{animation:sheen .8s ease-out 1}
.buy .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:#56555b}
.cap .btn:hover{background:var(--ink); color:var(--studio)}
@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))}
  .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 6px; font-weight:600; letter-spacing:-.04em; font-size:clamp(26px,3vw,42px); line-height:1.05}
.sect .sub{margin:0 0 40px; color:#56555b; max-width:60ch}
.cards{display:grid; grid-template-columns:repeat(var(--n,5), minmax(0,1fr)); gap:24px}
@media (max-width:899px){ .cards{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:min(62vw, 260px); overflow-x:auto; padding-bottom:8px} }
.card{display:grid; gap:10px; text-decoration:none; min-width:0}
.card canvas{width:100%; aspect-ratio:4/5; display:block}
.card b{font-weight:600; white-space:pre-wrap; min-height:3.1em}   /* two lines, so the prices line up */
.card span{font-size:12px; color:#56555b}
.card:hover canvas{filter:brightness(1.03)}

.buy{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:48px; align-items:start}
.buy canvas{width:100%; aspect-ratio:4/5; display:block}
.buy h1{margin:0; font-weight:600; letter-spacing:-.04em; font-size:clamp(26px,2.6vw,36px); white-space:pre}
.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:#56555b; 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 #b8b0aa; 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 */
.buy .btn{width:100%; justify-content:center; background:var(--ink); color:var(--studio); border-color:var(--ink)}
.buy .btn:hover{background:#000}
.buy .say{margin-top:10px; color:#56555b}
.note{margin:14px 0 0; font-size:12px; color:#56555b}
.facts{margin:32px 0 0; display:grid; grid-template-columns:auto 1fr; gap:8px 22px; font-size:13px}
.facts dt{color:#56555b}
.facts dd{margin:0}
@media (max-width:899px){ .buy{grid-template-columns:1fr; gap:28px} }

.about{border-top:1px solid #c9c1bb}
.about h2 span{font-weight:300; color:#56555b}
.about .path{margin:0 0 18px; font-size:12px; color:#56555b}
.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 #c9c1bb}
.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}
.card-model{margin:0; padding:20px 22px; border:1px solid #b8b0aa; font-size:13px; display:grid; gap:4px}
@media (max-width:899px){ .drop-grid{grid-template-columns:1fr} }
footer{padding-block:40px 120px; font-size:12px; color:#56555b; display:flex; flex-wrap:wrap; gap:10px 24px}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}

/* views: the drop page, or the page of one piece (where ads land) */
body[data-view="piece"] .chap:not(.current), body[data-view="home"] #buy, body[data-view="home"] #more, body[data-view="piece"] #index{display:none}
/* from the drop page: straight to the product; from an ad: the chapter, then the buy box 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="site"] #buy .sect{padding-top:max(12vh, 96px)}

/* 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} }