@font-face{font-family:"Plex Mono";src:url(fonts/plex-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(fonts/plex-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(fonts/plex-arrows.woff2) format("woff2");font-weight:400 500;unicode-range:U+2190-2193}

:root{
  --paper:#efefed; --ink:#111110; --mute:#8d8d89; --faint:#c9c9c5;
  --pad:22px; --fs:11px; --track:.055em;
  --ease:cubic-bezier(.22,.61,.12,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper);color:var(--ink)}
body{min-height:100%;background:var(--paper)}
html.home,html.home body{height:100%;overflow:hidden;overscroll-behavior:none}
html.home body{touch-action:none}
body{font:400 var(--fs)/1.45 "Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:var(--track);text-transform:uppercase;
  -webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;background:none;border:0;cursor:pointer}
i.arr{font-style:normal;display:inline-block;transition:transform .5s var(--ease)}

/* ---------- corners */
.corner{position:fixed;z-index:20;display:flex;gap:14px}
.corner--tl{top:var(--pad);left:var(--pad)}
.corner--tr{top:var(--pad);right:var(--pad)}
.corner--bl{bottom:var(--pad);left:var(--pad)}
.corner--br{bottom:var(--pad);right:var(--pad)}
.nav{display:flex;gap:14px}
.corner a,.nav a{position:relative;padding-bottom:1px}
.corner a::after,.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.corner a:hover::after,.nav a:hover::after,.corner a.is-current::after{transform:scaleX(1);transform-origin:left}

.brand{position:fixed;z-index:20;top:calc(var(--pad) - 1px);left:50%;transform:translateX(-50%);display:block;line-height:0}
.brand img{height:14px;width:auto;display:block}

/* ---------- stage + strip */
.stage{position:fixed;inset:0;z-index:5}
.strip{position:absolute;inset:0;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 84%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 84%,transparent 100%)}
/* items are hero-sized boxes; size changes are pure transforms (outer scale, inner counter-scale keeps the crop honest) */
.item{position:absolute;left:0;top:0;overflow:hidden;transform-origin:0 0;will-change:transform,opacity;cursor:pointer;
  backface-visibility:hidden;contain:strict}
.item__in{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform}
.item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none;pointer-events:none;
  will-change:opacity;backface-visibility:hidden}
.item.is-hero{cursor:none}

/* ---------- labels: stacked sets crossfade in place */
.label{position:absolute;z-index:6;display:flex;flex-direction:column;pointer-events:none}
.label--l{text-align:right;align-items:flex-end;top:50%;transform:translateY(-50%)}
.label--r{text-align:left;align-items:flex-start;top:50%;transform:translateY(-50%)}
.lab-stack{display:grid}
.lab-set{grid-area:1/1;display:flex;flex-direction:column;gap:3px;align-items:inherit}
.label--l .lab-set{align-items:flex-end}
.label--r .lab-set{align-items:flex-start}
.lab-line{display:block;white-space:nowrap;will-change:transform,opacity}
.label__meta{color:var(--mute)}
.label__tap{display:none}

.hint{position:fixed;left:50%;bottom:var(--pad);transform:translateX(-50%);color:var(--mute);z-index:20;transition:opacity .8s}
.hint::before{content:"";display:inline-block;width:1px;height:9px;background:currentColor;margin-right:9px;vertical-align:-1px;animation:tick 2.4s var(--ease) infinite}
@keyframes tick{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.hint.is-gone{opacity:0;transition:opacity .8s}

/* ---------- hover label that follows the pointer */
.cursor{position:fixed;left:0;top:0;z-index:30;pointer-events:none;white-space:nowrap;color:#f3f3f1;mix-blend-mode:difference;
  opacity:0;transition:opacity .3s}
.cursor.is-on{opacity:1}
.cursor::before{content:"";position:absolute;left:-16px;top:-14px;width:5px;height:5px;border-radius:50%;background:currentColor}

/* ---------- poster words */
.words{position:fixed;inset:0;z-index:1;pointer-events:none;color:#111;opacity:.13}
.w{position:absolute;white-space:nowrap;text-transform:none;will-change:transform}
.w--a{top:24%;left:9%;letter-spacing:.9em;font-size:10px}
.w--b{top:33%;right:12%;font-size:13px;letter-spacing:.04em;filter:blur(.3px)}
.w--c{bottom:27%;left:17%;letter-spacing:.9em;font-size:10px}
.w--d{bottom:17%;right:23%;font-size:13px;letter-spacing:.04em;filter:blur(.3px)}
.w--e{top:71%;right:7%;letter-spacing:.7em;font-size:9px;text-transform:uppercase}

/* ---------- grain */
.grain{position:fixed;inset:-6%;z-index:40;pointer-events:none;background:url(img/grain-a.png) repeat;background-size:200px;
  opacity:.075;animation:grain 1.6s steps(8) infinite;will-change:transform;transform:translateZ(0)}
body.is-moving .grain{animation-play-state:paused}
@keyframes grain{0%{transform:translate3d(0,0,0)}17%{transform:translate3d(-2%,1.5%,0)}33%{transform:translate3d(1.5%,-2.5%,0)}50%{transform:translate3d(-2.5%,-.5%,0)}67%{transform:translate3d(2%,2%,0)}83%{transform:translate3d(-.5%,2.5%,0)}100%{transform:translate3d(0,0,0)}}

/* ---------- intro: the mark alone, a long breath, then the index */
.intro{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:var(--paper);pointer-events:none;
  transition:opacity 2.2s cubic-bezier(.45,0,.2,1) .5s;will-change:opacity}
.intro__mark{width:46px;height:auto;opacity:0;transform:scale(.94);filter:blur(5px);
  animation:markIn 1.9s cubic-bezier(.25,.1,.2,1) .35s forwards;will-change:transform,opacity,filter}
@keyframes markIn{to{opacity:1;transform:none;filter:blur(0)}}
body.is-ready .intro{opacity:0}
body.is-ready .intro__mark{animation:markOut 1.6s cubic-bezier(.5,0,.2,1) forwards}
@keyframes markOut{from{opacity:1;transform:none;filter:blur(0)}to{opacity:0;transform:scale(1.05);filter:blur(3px)}}
.corner,.brand,.hint,.words{transition:opacity 1.8s cubic-bezier(.45,0,.2,1) 1.6s}
body.is-loading .corner,body.is-loading .brand,body.is-loading .hint,body.is-loading .words{opacity:0}
html.home:not(.first-visit) .corner,html.home:not(.first-visit) .brand,html.home:not(.first-visit) .hint,html.home:not(.first-visit) .words{transition-delay:.1s;transition-duration:.9s}

/* ---------- piece overlay */
.piece{position:fixed;inset:0;z-index:35;background:var(--paper);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  align-items:center;gap:6vw;padding:12vh 8vw;visibility:hidden;touch-action:pan-y;opacity:0;transition:opacity .6s var(--ease),visibility 0s linear .6s}
.piece.is-open{visibility:visible;opacity:1;transition:opacity .6s var(--ease)}
.piece__fig{overflow:hidden;aspect-ratio:4/3;clip-path:inset(12% 12% 12% 12%);transition:clip-path 1s var(--ease)}
.piece.is-open .piece__fig{clip-path:inset(0 0 0 0)}
.piece__fig img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.08);transition:transform 1.4s var(--ease)}
.piece.is-open .piece__fig img{transform:none}
.piece__text{max-width:360px;display:flex;flex-direction:column;gap:18px;opacity:0;transform:translateY(8px);transition:opacity .8s var(--ease) .25s,transform .8s var(--ease) .25s}
.piece.is-open .piece__text{opacity:1;transform:none}
.piece__n{color:var(--mute)}
.piece__name{font-weight:400;font-size:11px;letter-spacing:var(--track)}
.piece__copy{text-transform:none;letter-spacing:.01em;font-size:12px;line-height:1.7;max-width:34ch}
.piece__spec{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;border-top:1px solid var(--faint);padding-top:16px}
.piece__spec dt{color:var(--mute)}
.piece__cta{align-self:flex-start;border-bottom:1px solid currentColor;padding-bottom:2px}
.piece__cta:hover .arr,.piece__close:hover span{transform:translateX(3px)}
.piece__close{position:fixed;top:var(--pad);right:var(--pad);z-index:2}
.piece__close span{display:inline-block;transition:transform .4s var(--ease)}

/* ---------- small screens */
@media (max-width:760px){
  :root{--pad:16px;--fs:10px}
  .brand{top:auto;bottom:calc(var(--pad) + 1px)}
  .brand img{height:11px}
  .hint{display:none}
  .nav{gap:11px}
  .strip{-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 6%,#000 20%,#000 80%,transparent 94%,transparent 100%);
                 mask-image:linear-gradient(to bottom,transparent 0,transparent 6%,#000 20%,#000 80%,transparent 94%,transparent 100%)}
  .label--l,.label--r{transform:none}
  .label--l{text-align:left;align-items:flex-start}
  .label--r{text-align:right;align-items:flex-end}
  .label--l .lab-set{align-items:flex-start}
  .label--r .lab-set{align-items:flex-end}
  .w--a{top:15%;left:auto;right:9%}
  .w--b{top:24%;right:14%;font-size:12px}
  .w--c{bottom:21%;left:auto;right:8%}
  .w--d{bottom:13%;right:30%;font-size:12px}
  .w--e{display:none}
  .piece{grid-template-columns:1fr;align-content:center;gap:28px;padding:64px 16px 40px;overflow:auto}
  .piece__text{max-width:none}
}
@media (hover:none){
  .label__tap{display:inline-block;margin-top:6px;color:var(--ink)}
  .cursor{display:none}
}
@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  .hint::before{animation:none}
  .intro{transition:opacity .4s linear}
  .intro__mark{animation:none;opacity:1;transform:none;filter:none}
  body.is-ready .intro__mark{animation:none}
  .corner,.brand,.hint,.words{transition:opacity .4s linear}
  .piece,.piece__fig,.piece__fig img,.piece__text{transition-duration:.01s!important;transition-delay:0s!important}
}


/* =====================================================================
   v2 — shared page system (pieces, ritual, legal, checkout returns)
   ===================================================================== */
:root{--soft:cubic-bezier(.45,0,.2,1)}

/* page-to-page veil: paper fades away on arrival, returns before leaving */
.veil{display:none}
html.js .veil{display:block;position:fixed;inset:0;z-index:60;background:var(--paper);pointer-events:none;opacity:1;
  transition:opacity 1.1s var(--soft) .06s;will-change:opacity}
html.js.is-in .veil{opacity:0}
html.js.is-out .veil{opacity:1;transition:opacity .6s var(--soft)}
html.first-visit .veil{display:none}

/* fixed paper bands so scrolling content dissolves under the corner type */
.band{position:fixed;left:0;right:0;height:64px;z-index:15;pointer-events:none}
.band--t{top:0;background:linear-gradient(var(--paper) 35%,rgba(239,239,237,0))}
.band--b{bottom:0;background:linear-gradient(rgba(239,239,237,0),var(--paper) 65%)}

.meta{color:var(--mute)}
.lower{text-transform:none}
.pw{position:absolute;white-space:nowrap;text-transform:none;color:#111;opacity:.14;pointer-events:none}
.pw--s{letter-spacing:.9em;font-size:10px}
.pw--l{font-size:13px;letter-spacing:.04em}
.pw--c{letter-spacing:.7em;font-size:9px;text-transform:uppercase}

/* reveal on scroll */
[data-reveal]{opacity:0;transform:translate3d(0,14px,0);transition:opacity 1.2s var(--soft),transform 1.5s var(--ease);will-change:opacity,transform}
[data-reveal].is-seen{opacity:1;transform:none}

/* focus frames: heavy blur → mid → sharp, crossfaded (no animated filters) */
.focus{position:relative;overflow:hidden;background:#0c0c0c;contain:paint}
.focus img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
.focus .m,.focus .s{opacity:0;transition:opacity 1.2s var(--soft);will-change:opacity}
.focus.is-seen .m{opacity:1}
.focus.is-seen.is-loaded .s{opacity:1;transition-delay:.3s;transition-duration:1.5s}
.focus .zoom{position:absolute;inset:0;transition:transform 1.4s var(--ease);will-change:transform}

/* buy */
.buy{position:relative;display:inline-flex;align-items:center;gap:12px;padding:9px 15px 8px;border:1px solid currentColor;overflow:hidden;isolation:isolate;
  transition:color .55s var(--ease)}
.buy::before{content:"";position:absolute;inset:-1px;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .65s var(--ease);z-index:-1}
.buy:hover,.buy:focus-visible{color:var(--paper);outline:none}
.buy:hover::before,.buy:focus-visible::before{transform:scaleX(1);transform-origin:left}
.buy:hover .arr{transform:translateX(3px)}
.buy-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.buy-note{color:var(--mute);opacity:0;transform:translate3d(0,4px,0);transition:opacity .6s var(--soft),transform .8s var(--ease);white-space:nowrap}
.buy-note.is-on{opacity:1;transform:none}
.link-u{position:relative;padding-bottom:2px}
.link-u::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:left;transition:transform .5s var(--ease)}
.link-u:hover::after{transform:scaleX(.35)}
.link-u:hover .arr{transform:translateX(3px)}

/* spec lines */
.spec{display:grid;grid-template-columns:auto auto;gap:5px 22px;justify-content:start}
.spec dt{color:var(--mute)}

/* ---------- piece page */
.pc-hero{position:relative;height:100vh;height:100svh;min-height:620px}
.pc-frame{position:absolute;left:50%;top:50%;height:min(72vh,860px);aspect-ratio:4/5;transform:translate(-50%,-50%)}
.pc-side{position:absolute;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:3px}
.pc-side--l{right:calc(50% + min(72vh,860px)*.4 + 22px);text-align:right;align-items:flex-end}
.pc-side--r{left:calc(50% + min(72vh,860px)*.4 + 22px);gap:0}
.pc-side--r .spec{margin-bottom:26px}
.pc-price{margin-bottom:14px;display:block}
.pc-down{position:fixed;left:50%;bottom:var(--pad);transform:translateX(-50%);color:var(--mute);z-index:16;transition:opacity .8s var(--soft),color .4s}
.pc-down:hover{color:var(--ink)}
html.is-scrolled .pc-down{opacity:0;pointer-events:none}
.pc-details{position:relative;display:grid;grid-template-columns:repeat(12,1fr);column-gap:22px;row-gap:14vh;padding:12vh 22px 10vh}
.pc-d figcaption{display:flex;gap:14px;margin-top:10px}
.pc-d .focus{aspect-ratio:4/3}
.pc-d--a{grid-column:3/7}
.pc-copy{grid-column:8/11;align-self:center;text-transform:none;letter-spacing:.01em;font-size:12px;line-height:1.75;max-width:34ch}
.pc-copy .meta{display:block;text-transform:uppercase;letter-spacing:var(--track);font-size:var(--fs);margin-bottom:12px}
.pc-d--b{grid-column:7/10}
.pc-next{display:flex;justify-content:center;padding:6vh 22px 22vh}
.pc-next a{display:flex;flex-direction:column;align-items:center;gap:14px}
.pc-next .focus{width:132px;aspect-ratio:4/5}
.pc-next .focus .zoom{transform:scale(1.001)}
.pc-next a:hover .focus .zoom{transform:scale(1.06)}

/* ---------- pieces index (sparse grid) */
.px{position:relative;height:100vh;height:100svh;min-height:640px}
.px-item{position:absolute;display:block}
.px-item .focus{aspect-ratio:4/5}
.px-item--a{left:25vw;top:15vh}
.px-item--a .focus{height:min(58vh,700px)}
.px-item--b{left:57vw;top:calc(15vh + min(58vh,700px) - min(38vh,460px))}  /* captions share one baseline */
.px-item--b .focus{height:min(38vh,460px)}
.px-cap{display:flex;justify-content:space-between;gap:22px;margin-top:10px}
.px-cap > span:first-child{display:flex;gap:14px}
.px-item .zoom{transform:scale(1.001)}
.px-item:hover .zoom{transform:scale(1.035)}
.px.has-hover .px-item{transition:opacity .8s var(--soft)}
.px.has-hover .px-item:not(:hover){opacity:.45}
.px-head{position:absolute;left:var(--pad);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:3px}
.px-soon{position:absolute;left:57vw;top:15vh;display:flex;gap:14px;color:var(--mute)}

/* ---------- ritual */
.rt-hero{position:relative;height:100vh;height:100svh;min-height:640px;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.rt-form{position:absolute;left:50%;top:50%;height:112vh;aspect-ratio:1100/1500;transform:translate(-50%,-50%)}
.rt-form > img:first-child{position:absolute;inset:0;width:100%;height:100%;animation:breathe 16s var(--soft) infinite alternate;will-change:transform}
@keyframes breathe{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-1.2%,.8%,0) scale(1.025)}}
.rt-mark{position:absolute;left:51.9%;top:50.4%;width:34px;transform:translate(-50%,-50%)}
.rt-hero .pw{color:var(--paper);mix-blend-mode:difference;opacity:.66}   /* reads dark on paper, light across the form */
.rt-hero .pw--c,.rt-hero .pw--s{opacity:.55}
.rt-list{list-style:none;max-width:520px;margin:0 auto;padding:16vh 22px 10vh;display:flex;flex-direction:column;gap:9vh}
.rt-list li{display:grid;grid-template-columns:48px 1fr;column-gap:10px}
.rt-list li p{text-transform:none;letter-spacing:.01em;font-size:12.5px;line-height:1.75}
.rt-list li p b{font-weight:400;text-transform:uppercase;letter-spacing:var(--track);font-size:var(--fs);display:block;margin-bottom:6px}
.rt-end{display:flex;flex-direction:column;align-items:center;gap:16px;padding:4vh 22px 24vh}
.rt-end img{width:26px}
.draft{color:var(--mute)}

/* ---------- quiet pages: thank-you, cancel, 404 */
.qt{position:relative;height:100vh;height:100svh;min-height:560px;display:grid;place-items:center;text-align:center}
.qt-in{display:flex;flex-direction:column;align-items:center;gap:0}
.qt-in img{width:34px;margin-bottom:34px}
.qt-in .meta{margin-bottom:4px}
.qt-in p.lower{max-width:36ch;font-size:12px;line-height:1.75;letter-spacing:.01em;margin:22px 0 30px}
.qt-links{display:flex;gap:26px}

/* ---------- text pages: terms, privacy, shipping */
.tx{display:grid;grid-template-columns:repeat(12,1fr);column-gap:22px;padding:22vh 22px 20vh}
.tx-side{grid-column:1/4;position:sticky;top:22vh;align-self:start;display:flex;flex-direction:column;gap:3px;text-align:right;align-items:flex-end}
.tx-body{grid-column:5/10;max-width:62ch}
.tx-flag{border:1px solid var(--ink);padding:12px 14px 11px;margin-bottom:9vh;line-height:1.6}
.tx-body section{margin-bottom:7vh}
.tx-body h2{font-weight:400;font-size:var(--fs);letter-spacing:var(--track);margin-bottom:14px;display:flex;gap:14px}
.tx-body p,.tx-body li{text-transform:none;letter-spacing:.01em;font-size:12.5px;line-height:1.75}
.tx-body p + p{margin-top:12px}
.tx-body ul{list-style:none;display:flex;flex-direction:column;gap:6px;margin-top:10px}
.tx-body li::before{content:"— ";color:var(--mute)}
.ph{background:rgba(17,17,16,.06);padding:0 3px}

@media (max-width:760px){
  .band{height:52px}
  .pc-hero{height:auto;min-height:0;padding:72px 16px 0}
  .pc-frame{position:relative;left:auto;top:auto;transform:none;width:100%;height:auto}
  .pc-side{position:static;transform:none}
  .pc-side--l{flex-direction:row;justify-content:space-between;align-items:baseline;text-align:left;margin:14px 0 26px}
  .pc-side--r .spec{margin-bottom:22px}
  .pc-down{display:none}
  .pc-hero .pw{display:none}
  .pc-details{display:flex;flex-direction:column;gap:9vh;padding:14vh 16px 8vh}
  .pc-d--b{width:78%;align-self:flex-end}
  .pc-copy{max-width:none}
  .pc-next{padding:4vh 16px 16vh}
  .px{height:auto;min-height:0;padding:84px 16px 110px;display:flex;flex-direction:column;gap:9vh}
  .px-item{position:relative;left:auto;top:auto}
  .px-item .focus{height:auto!important;width:100%}
  .px-item--b{width:72%;align-self:flex-end}
  .px-head{position:static;transform:none;flex-direction:row;justify-content:space-between}
  .px-soon{position:static;align-self:flex-start}
  .rt-form{height:92vh}
  .rt-form > img:first-child{opacity:.66}
  .rt-hero .pw{mix-blend-mode:normal;color:var(--ink);opacity:.8}
  .rt-hero .pw--c,.rt-hero .pw--s{opacity:.62}
  .rt-hero .pw--hide-m{display:none}
  .tx{display:block;padding:110px 16px 14vh}
  .tx-side{position:static;text-align:left;align-items:flex-start;margin-bottom:40px}
  .corner--br{gap:10px}
}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{transform:none;transition:opacity .01s}
  .focus .m,.focus .s{transition:none}
  .rt-form > img:first-child{animation:none}
  html.js .veil{transition:opacity .2s linear}
}