:root{--paper:#eae2cf;--ink:#25291f;--muted:#58594b;--red:#a33124;--rule:#928e79}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px Arial,"Hiragino Kaku Gothic ProN",sans-serif}
a{color:inherit}a:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.wrap{width:min(92%,1240px);margin:auto}.mono,nav,button,footer{font-family:ui-monospace,monospace;font-size:12px;letter-spacing:.1em}
.bar,.index,.plate-top,.plate-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px}.bar{padding:18px 0;border-bottom:1px solid var(--ink)}
.logo{font-size:25px;font-weight:950;letter-spacing:-.09em;text-decoration:none}nav{display:flex;gap:22px}nav a{text-decoration:none}nav a:hover{color:var(--red)}
.intro{display:grid;grid-template-columns:1.6fr 1fr;align-items:end;gap:24px;padding:clamp(26px,5vw,69px) 0 23px}.tag{color:var(--red)}
h1,h2,p{margin:0}h1,h2{letter-spacing:-.085em;font-weight:950}h1{font-size:clamp(52px,10.5vw,154px);line-height:.8;margin-top:14px}h2{font-size:clamp(36px,6vw,80px);line-height:.92}
.intro p,.details p{line-height:1.8}.intro p{max-width:32ch}.intro .spec{display:block;margin-top:12px;color:var(--muted)}
.plate{padding:9px;background:var(--ink);color:var(--paper)}.plate-top,.plate-bottom{padding:6px 5px}.plate-top{padding-bottom:12px}.plate-bottom{padding-top:12px}
.compare{aspect-ratio:2.35;position:relative;overflow:hidden;background:#222920;--split:50%}.compare svg{position:absolute;inset:0;width:100%;height:100%}
.compare .after{filter:saturate(1.45) contrast(1.22) sepia(.22);clip-path:inset(0 0 0 var(--split))}.divider{position:absolute;inset:0 auto 0 var(--split);width:2px;background:white;pointer-events:none}.divider:after{content:'↔';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--paper);color:var(--ink);border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;width:42px;height:42px;font-size:20px}
.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize}.compare:focus-within{outline:2px solid white;outline-offset:-4px}
.marks{position:absolute;inset:12px 12px auto;display:flex;justify-content:space-between;pointer-events:none}.marks span{padding:5px 7px;background:#25291f;color:#fff}
.tracks{display:grid;grid-template-columns:repeat(5,1fr);margin:0;padding:0;list-style:none;border-bottom:1px solid var(--ink)}.tracks li+li{border-left:1px solid var(--rule)}.tracks button{display:block;width:100%;height:100%;border:0;background:none;color:var(--ink);padding:13px 5px;cursor:pointer}.tracks button:hover{background:#d8cdb4}.tracks button[aria-pressed=true]{background:var(--red);color:white}
.details{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,5vw,64px);padding:clamp(44px,7vw,90px) 0}.details h2{margin:14px 0}.sheet{margin:0}.sheet div{display:grid;grid-template-columns:minmax(94px,.5fr) 1fr;gap:12px;border-top:1px solid var(--rule);padding:13px 0}.sheet dt{font-size:12px;color:var(--muted)}.sheet dd{margin:0;font-size:14px}
.buy{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;background:var(--ink);color:var(--paper);padding:22px}.buy strong{display:block;font-size:23px;margin-top:6px}.buy-status{padding:10px 12px;border:1px solid currentColor}
footer{border-top:1px solid var(--rule);margin-top:52px;padding:18px 0 32px;display:flex;justify-content:space-between;gap:14px}
@media(max-width:660px){.intro,.details{grid-template-columns:1fr;gap:14px}.intro p{max-width:none}.compare{aspect-ratio:1.48}.tracks button{font-size:9px;letter-spacing:0;padding:12px 2px}.plate-top,.plate-bottom,nav{font-size:10px}.details{gap:22px}}

.store-head{padding:clamp(42px,8vw,100px) 0 28px;display:flex;justify-content:space-between;gap:24px;align-items:end}
.store-head p{max-width:24ch;line-height:1.65}.shelf{border-top:1px solid var(--ink);padding-top:14px}
.products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px}
.product{display:block;text-decoration:none}.cover{position:relative;isolation:isolate;aspect-ratio:1;display:flex;flex-direction:column;justify-content:space-between;padding:7%;overflow:hidden;background:#c34e36;color:#fff3db;border:1px solid #25291f55}
.cover:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.35;background:repeating-linear-gradient(0deg,transparent 0 3px,#1112 3px 4px)}
.cover:after{content:"";position:absolute;z-index:-1;inset:35% -18% 11% 22%;border:1px solid currentColor;border-radius:50%;transform:rotate(-27deg);box-shadow:0 0 0 12px #ffffff15,0 0 0 24px #ffffff15,0 0 0 36px #ffffff15}
.cover strong{font-weight:950;font-size:clamp(26px,5vw,73px);line-height:.86;letter-spacing:-.085em}
.cover.teal{background:#174e49;color:#ffad71}.cover.grade{background:#272926;color:#dbd0b7}
.product-info{display:grid;grid-template-columns:1fr auto;gap:7px 12px;padding:13px 0;border-bottom:1px solid var(--rule)}.product-info small{grid-column:1/-1;color:var(--muted)}
a.product:hover .product-info strong{color:var(--red);text-decoration:underline}.buy-status{text-decoration:none;display:inline-block}.buy-status:hover{background:var(--paper);color:var(--ink)}
.back{display:inline-block;margin-top:22px;text-decoration:none}.back:hover{text-decoration:underline}.sample-cover{max-width:550px;margin-bottom:24px}
@media(max-width:760px){.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.store-head{display:block}.store-head p{margin-top:20px;max-width:none}.cover .mono,.product-info .mono{font-size:10px;letter-spacing:.04em}}
@media(max-width:420px){.products{grid-template-columns:1fr}.cover strong{font-size:clamp(46px,13vw,64px)}}
.purchase-link{display:inline-block;margin-top:16px;padding:12px 14px;background:var(--ink);color:var(--paper);text-decoration:none}.purchase-link:hover{background:var(--red)}
.pack-section{padding-top:clamp(44px,7vw,90px)}.pack-section h2{margin:14px 0 24px}
.look-notes{list-style:none;padding:0;margin:0;border-bottom:1px solid var(--rule)}.look-notes li{display:grid;grid-template-columns:40px minmax(115px,.4fr) 1fr;align-items:baseline;gap:12px;padding:15px 0;border-top:1px solid var(--rule)}.look-notes p,.workflow,.product-guide{line-height:1.65}
.workflow{padding-left:1.2em;margin:0}.workflow li+li,.product-guide p+p{margin-top:8px}.product-guide{max-width:76ch;padding-top:16px;font-size:14px;color:var(--muted)}
@media(max-width:550px){.look-notes li{grid-template-columns:26px 1fr;gap:5px 10px}.look-notes p{grid-column:2}.plate-bottom{flex-wrap:wrap}}
.field-link{display:inline-block;margin:14px 0 0 12px;text-underline-offset:4px}
.field-notes{border:1px solid var(--ink);margin:0 0 24px;scroll-margin-top:20px}
.field-head{display:flex;align-items:end;justify-content:space-between;gap:16px;padding:clamp(18px,4vw,36px);background:var(--ink);color:var(--paper)}
.field-head h2{margin-top:9px}.field-head p{font-size:14px;line-height:1.5}
.field-signal{padding:12px clamp(18px,4vw,36px);background:var(--red);color:white}
.field-body{padding:0 clamp(18px,4vw,36px)}
.field-body details+details{border-top:1px solid var(--rule)}
.field-body summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:32px 1fr auto;gap:8px;align-items:baseline;padding:16px 0;font-weight:700}
.field-body summary::-webkit-details-marker{display:none}.field-body summary::after{content:'+'}.field-body details[open] summary::after{content:'−'}
.field-body summary .mono{color:var(--red)}.field-body summary:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.field-body p{padding:0 0 17px 40px;max-width:72ch;line-height:1.65}
.field-foot{display:flex;flex-wrap:wrap;gap:14px 24px;padding:14px clamp(18px,4vw,36px);border-top:1px solid var(--ink)}
.product-art{padding:0;background:#eae2cf}.product-art::before,.product-art::after{display:none}.product-art img{width:100%;height:100%;object-fit:cover}
.pack-cover{margin:0 0 22px;border:1px solid var(--rule)}.pack-cover img{display:block;width:100%;height:auto}

.has-purchase-bar{padding-bottom:calc(92px + env(safe-area-inset-bottom))}.purchase-bar{position:fixed;inset:auto 0 0;z-index:20;background:var(--ink);color:var(--paper);padding-bottom:env(safe-area-inset-bottom);border-top:2px solid var(--red)}
.purchase-inner,.purchase-actions{display:flex;align-items:center;gap:14px}.purchase-inner{justify-content:space-between;min-height:72px;padding-block:10px}.purchase-label span,.purchase-label strong{display:block}.purchase-label span{margin-bottom:5px}
.purchase-price{white-space:nowrap}.cart-link{display:inline-block;background:var(--red);color:white;padding:13px 18px;text-decoration:none;white-space:nowrap}.cart-link:hover{background:#873020}.cart-link:focus-visible{outline-color:var(--paper)}
@media(max-width:600px){.purchase-label .mono{display:none}.purchase-label strong{font-size:13px}.purchase-actions{gap:8px}.cart-link{font-size:11px;letter-spacing:.03em;padding:12px 10px}.purchase-price{font-size:13px}}
.compare .real-still{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare.has-stills{aspect-ratio:16/9}
.compare.has-stills svg{display:none}
.compare.has-stills .real-still{display:block}
.compare .real-after{clip-path:inset(0 0 0 var(--split))}
@media(max-width:420px){.compare .marks{font-size:9px;letter-spacing:.03em}}
.logo{display:inline-flex;align-items:center;gap:7px}
.planet-mark{display:block;flex:none;width:46px}
.planet-mark img{display:block;width:100%;height:auto}

/* Film-grain night sky behind the storefront. */
:root{--ink:#131522;--muted:#cbc3bd;--rule:#f0e1cc44}
html{background:#222124}
body{color:var(--paper);background:transparent}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:#222124 linear-gradient(90deg,#100f16a8 0%,#100f1660 59%,#100f1630 100%) center/cover no-repeat;
  background-image:linear-gradient(90deg,#100f16a8 0%,#100f1660 59%,#100f1630 100%),url("/assets/film-space.svg");
  background-position:center,right bottom;
}
body{isolation:isolate}
.bar,.shelf,.tracks,.field-notes,.field-foot{border-color:var(--rule)}
.tag,.field-body summary .mono,nav a:hover,a.product:hover .product-info strong{color:#ffa787}
a:focus-visible,button:focus-visible,.field-body summary:focus-visible{outline-color:#ffa787}
.tracks,.field-notes{background:#131522e8}
.tracks button{color:var(--paper)}
.tracks button:hover{background:#302936}
.tracks button[aria-pressed=true]{background:var(--red)}

@media(max-width:660px){body::before{background-image:linear-gradient(#100f1678,#100f1696),url("/assets/film-space.svg")}}

/* Keep the price and checkout action prominent in the fixed bar. */
.purchase-bar{border-top-color:#ffa787;box-shadow:0 -6px 22px #0005}
.purchase-price{color:#fff0d8;font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}
.purchase-bar .cart-link{
  background:#ba3215;color:#fff6e8;font-size:14px;font-weight:800;padding:14px 24px;
  box-shadow:inset 0 0 0 1px #ff9a54bd,0 0 12px #ff62268f,0 0 27px #ff481d54;
}
.purchase-bar .cart-link:hover,.purchase-bar .cart-link:focus-visible{
  background:#c23818;
  box-shadow:inset 0 0 0 1px #ffa664,0 0 16px #ff6b2fd1,0 0 32px #ff481d78;
}
@media(max-width:600px){
  .purchase-price{font-size:19px}
  .purchase-bar .cart-link{font-size:13px;padding:13px 14px}
}

.product-info .catalog-price{font-size:clamp(20px,3vw,26px);font-weight:800;line-height:1;letter-spacing:0;white-space:nowrap}

.products-single{grid-template-columns:minmax(0,420px)}
.products-single .product-info{grid-template-columns:minmax(0,1fr) auto;align-items:baseline}
.products-single .product-info strong{font-size:clamp(13px,3.8vw,16px);white-space:nowrap}
@media(max-width:330px){.products-single .catalog-price{grid-row:2;grid-column:2}.products-single .product-info strong{grid-column:1/-1}.products-single .product-info small{grid-row:2;grid-column:1}}

/* Highlight the whole linked product, including its artwork and price. */
.products-single .product:is(:hover,:focus-visible){
  outline:2px solid #ffa787;
  outline-offset:4px;
  background:#ffa78714;
  box-shadow:0 0 22px #ff622644;
}
.products-single .product:is(:hover,:focus-visible) .product-info strong{
  color:#ffa787;
  text-decoration:none;
}
