:root{--bg:#0c0d10;--panel:#131419;--ink:#eceef3;--muted:#a0a4ad;--line:#3a3d45;--accent:#05a1ed;--gutter:clamp(22px,4vw,72px);--gap:24px;--radius:18px;--mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace;--font-sans:'Helvetica Neue',Helvetica,Arial,sans-serif;--body-size:16px;--display-weight:400;--display-tracking:-.055em;--display-scale:1;--label-tracking:.045em}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:72px}
.gx-takeover body{margin:0;background:var(--bg);color:var(--ink);font:var(--body-size)/1.5 var(--font-sans);overflow-wrap:normal}
button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
/* The browser defaults, restated so nothing else can supply them. Inside Squarespace the
   page inherits a host stylesheet that styles bare elements at specificity 0,0,1 — measured
   on gxace.com: `h1,h2,h3,h4{font-family:var(--heading-font-font-family)}` (Poppins),
   `.sqsrte-large,p,.sqsrte-small{line-height:var(--body-font-line-height)}` (1.8) and
   `body{overflow-wrap:break-word}`, above. Every declaration here is the value a standalone
   page already computes, so this changes nothing on its own and removes the host's reach.
   The two lines below come after, so the design's own heading sizes and weights still win. */
h1{font-size:2em}h3{font-size:1.17em}h1,h2,h3{color:inherit;line-height:normal;font-family:inherit}p{line-height:inherit}
/* `height:auto` is load-bearing, not tidiness: every design <img> carries its intrinsic
   width/height attributes so the box is reserved before the bytes arrive, and those
   attributes are presentation hints. Overriding only the width would leave the height hint
   standing, which stretches every image to its pixel height. */
img{display:block;width:100%;height:auto}h1,h2,p{margin:0}h1,h2{font-weight:var(--display-weight);line-height:.97;letter-spacing:var(--display-tracking)}
h2{font-size:calc(clamp(38px,5vw,76px) * var(--display-scale))}p{max-width:34em}
.mono,figcaption{font:12px/1.45 var(--mono);text-transform:uppercase;letter-spacing:var(--label-tracking)}
.site-header{height:92px;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.wordmark{font-weight:700;font-size:35px;letter-spacing:-.065em;line-height:1}
.site-header nav{display:flex;gap:36px;font:14px var(--mono);text-transform:uppercase}
.site-header nav a{color:var(--muted);padding:4px 0;border-bottom:1px solid transparent}
.site-header nav a[aria-current]{color:var(--ink);border-bottom-color:var(--accent)}
.header-format{color:var(--muted)}
.text-link{display:inline-flex;gap:48px;align-items:center;font:14px var(--mono);padding:14px 0;border-bottom:1px solid currentColor}
.hero-caption{position:absolute;bottom:30px;right:var(--gutter);padding:8px 12px;background:#0d0f14bb}
.product-panel{position:relative;z-index:2;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);margin:0 var(--gutter);padding:0 32px;overflow:hidden}
.product-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line);padding:22px 0}
.product-bar nav{display:flex;gap:32px;font:14px var(--mono)}
.buy{display:inline-block;border-radius:6px;background:var(--accent);color:#0d1016;padding:13px 20px;font:14px var(--mono)}
.product-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);padding:70px 0}
/* The plate takes its height from the artwork rather than a constant: the six pack cases
   trim to 840x797 and the Master Collection case to 840x800, and a fixed ratio would shave
   the bottom edge off whichever one it did not match. */
.disc{position:relative;width:min(78%,400px)}
.disc img{display:block;width:100%;max-width:none}
.product-copy{grid-column:8/13;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:24px}
.product-copy .mono{color:var(--muted)}
.product-copy h2{font-size:calc(clamp(40px,4vw,66px) * var(--display-scale))}
.product-copy>p{font-size:20px;max-width:18em}
.purchase-description{padding-top:24px;margin-top:12px;border-top:1px solid var(--line);width:100%}
.purchase-description p{margin-top:12px;color:#b7bbc4}
.section{padding:100px var(--gutter)}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:40px}
.section-heading .mono{color:var(--muted)}
figure{margin:0}
.large-example img{max-height:850px;object-fit:contain;background:#08090c}
.large-example figcaption{display:flex;justify-content:space-between;padding:15px 0;border-bottom:1px solid var(--line)}
.details{border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.details>.mono{grid-column:1/4;color:var(--muted)}
.details h2{grid-column:5/13;font-size:calc(clamp(36px,4vw,64px) * var(--display-scale))}
.details .buy{grid-column:5/9;justify-self:start;margin-top:20px}
footer{padding:40px var(--gutter);border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
footer>.mono{color:var(--muted)}
.dither-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
@media(max-width:700px){.site-header{height:76px}.site-header nav{gap:20px;font-size:12px}.header-format{display:none}.product-panel{padding:0 20px}.product-bar{gap:12px}.product-bar nav{gap:14px;font-size:12px}.buy{font-size:12px;padding:12px}.product-grid{padding:36px 0;display:flex;flex-direction:column;gap:40px}.disc{width:min(90%,330px)}.product-copy{padding-bottom:16px}.section{padding:64px var(--gutter)}.section-heading{align-items:start;flex-direction:column;gap:20px}.details{display:block}.details h2{margin:28px 0}.details .buy{margin-top:0}footer>.mono{font-size:12px;max-width:150px;text-align:right}.hero-caption{bottom:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
.gx-takeover body{isolation:isolate}
.gx-takeover body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.10;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");background-size:240px 240px;animation:grain .22s steps(2) infinite}
@keyframes grain{0%{background-position:0 0}33%{background-position:60px -40px}66%{background-position:-35px 90px}}
.hero-title,.hero-caption,.opening-object{z-index:2}
.product-panel>*{position:relative}
.reveal{transition:transform 1.1s cubic-bezier(.19,1,.22,1),opacity 1s}
.reveal.waiting{opacity:0;transform:translateY(35px)}
/* A control that takes money does not move under the finger reaching for it. Any
   revealing block that contains a buy button fades in without travelling: the 35px
   slide lasts 1.1s, and a tap that lands during it hits the panel behind the button
   and silently does nothing — measured on the Simulacrum editions, where the click
   arrived with `target: DIV.sim-edition` instead of the button. */
.reveal.waiting:has(.buy){transform:none}
.sim-edition.reveal.waiting,.details.reveal.waiting{transform:none}
.reveal:nth-child(2){transition-delay:.1s}
body[data-motion=off] .reveal{opacity:1;transform:none;transition:none}
/* Panel facts: the home page's two product panels and the Master Collection route all show
   the same three-fact row, so it is defined once here rather than per page. */
.panel-facts{display:flex;gap:40px;margin:8px 0 0;padding:0}
.panel-facts div{display:flex;flex-direction:column;gap:8px}
.panel-facts dt{color:var(--muted)}
.panel-facts dd{margin:0;font-size:28px;letter-spacing:-.03em}
@media(max-width:700px){.panel-facts{gap:28px}.panel-facts dd{font-size:22px}}
/* Duet, shared by the pack pages and the Master Collection: the product name across the
   top, its photography beside its packaging object, then the product panel beneath. The
   pack page opens on one hero photograph; the Master Collection opens on a mosaic of the
   six, so only those two rules differ. */
body[data-page=pack] .opening,body[data-page=master] .opening{position:relative;margin:0 var(--gutter) 64px}
body[data-page=pack] .hero-sticky,body[data-page=master] .hero-sticky{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
body[data-page=pack] .hero-title,body[data-page=master] .hero-title{grid-column:1/13;grid-row:1;padding:48px 0 10px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
body[data-page=pack] .hero-title h1,body[data-page=master] .hero-title h1{grid-column:1/13;grid-row:1;font-size:calc(clamp(58px,7vw,108px) * var(--display-scale));margin:0}
body[data-page=pack] .hero-title .text-link,body[data-page=master] .hero-title .text-link{display:none}
body[data-page=pack] .hero-media{position:relative;grid-column:1/9;grid-row:2;border-radius:var(--radius);overflow:hidden;aspect-ratio:1.42}
body[data-page=pack] .hero-media img{position:absolute;inset:0;height:100%;object-fit:cover;object-position:var(--focus,50% 45%)}
body[data-page=pack] .opening-object,body[data-page=master] .opening-object{display:flex;grid-column:9/13;grid-row:2;flex-direction:column;align-items:center;justify-content:center;padding:28px 24px;border-radius:var(--radius);border:1px solid var(--line);background:var(--panel)}
body[data-page=pack] .opening-object .disc,body[data-page=master] .opening-object .disc{width:100%;margin:auto 0}
/* Hero label, in the page's caption device: the same split row over a hairline rule that
   `.large-example figcaption` and `.card-line` use, aligned to the media it labels rather
   than floating under it. The descriptive half sits left, the equipment code right. */
body[data-page=pack] .hero-caption,body[data-page=master] .hero-caption{position:static;grid-column:1/9;grid-row:3;display:flex;align-items:baseline;justify-content:space-between;gap:24px;max-width:none;margin:4px 0 0;padding:15px 0;background:none;color:var(--muted);border-bottom:1px solid var(--line)}
body[data-page=pack] .product-grid,body[data-page=master] .product-grid{padding:48px 0}
body[data-page=pack] .product-copy,body[data-page=master] .product-copy{grid-column:1/13;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
body[data-page=pack] .product-copy>.mono,body[data-page=master] .product-copy>.mono{grid-column:1/5}
body[data-page=pack] .product-copy>h2,body[data-page=master] .product-copy>h2{grid-column:1/5;grid-row:2}
body[data-page=pack] .product-copy>p,body[data-page=master] .product-copy>p{grid-column:5/9;grid-row:2;font-size:24px}
body[data-page=pack] .purchase-description,body[data-page=master] .purchase-description{grid-column:9/13;grid-row:2;margin:0;padding:0;border:0;font-size:14px}
/* Third row of the description block, beneath the paragraph it qualifies: the pack pages'
   three authorized bullets, the Master Collection's three panel facts. The panel's link
   moves down to make room for either. */
body[data-page=pack] .pack-benefits{grid-column:5/9;grid-row:3;display:grid;gap:20px;margin:32px 0 0;padding:0}
body[data-page=pack] .pack-benefits div{display:grid;gap:6px}
body[data-page=pack] .pack-benefits dt{color:var(--muted)}
body[data-page=pack] .pack-benefits dd{margin:0;font-size:16px;color:#c6cad3}
body[data-page=master] .product-copy>.panel-facts{grid-column:5/9;grid-row:3;flex-wrap:wrap;gap:24px 40px;margin:24px 0 0}
body[data-page=pack] .product-copy>.text-link,body[data-page=master] .product-copy>.text-link{grid-column:5/9;grid-row:4;justify-self:start}
/* The mosaic stands where a pack page puts its hero photograph: each tile is that pack's
   own supplied hero, panned by the same `--focus` its card and pack page use. Rows are
   minmax(0,1fr), not 1fr: a bare 1fr keeps each row's min-content floor, and the three
   portrait tiles then push the last row out of the clipped box entirely. The box aspect is
   the tile grid's — 3x2 at 1.42, 2x3 at 2/3 — so every tile stays square at both widths. */
body[data-page=master] .master-mosaic{position:relative;grid-column:1/9;grid-row:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:4px;aspect-ratio:1.42;border-radius:var(--radius);overflow:hidden}
body[data-page=master] .master-mosaic img{width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 50%)}
@media(max-width:700px){body[data-page=pack] .hero-sticky,body[data-page=master] .hero-sticky{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}body[data-page=pack] .hero-title,body[data-page=master] .hero-title{display:block;grid-column:1/5;padding-top:32px}body[data-page=pack] .hero-title h1,body[data-page=master] .hero-title h1{font-size:64px;margin-top:0}body[data-page=pack] .hero-media{grid-column:1/5;aspect-ratio:1.35}body[data-page=master] .master-mosaic{grid-column:1/5;grid-template-columns:repeat(2,minmax(0,1fr));aspect-ratio:2/3}body[data-page=pack] .opening-object,body[data-page=master] .opening-object{grid-row:4;grid-column:1/5;padding:24px}body[data-page=pack] .opening-object .disc,body[data-page=master] .opening-object .disc{width:min(72%,340px)}body[data-page=pack] .hero-caption,body[data-page=master] .hero-caption{grid-column:1/5}body[data-page=pack] .opening,body[data-page=master] .opening{margin-bottom:32px}body[data-page=pack] .product-copy,body[data-page=master] .product-copy{display:flex;gap:24px}body[data-page=pack] .pack-benefits{grid-column:1/5}body[data-page=pack] .purchase-description,body[data-page=master] .purchase-description{border-top:1px solid var(--line);padding-top:24px}}
@media(prefers-reduced-motion:reduce){.reveal.waiting{opacity:1;transform:none}}
.gx-takeover body[data-motion=off]:before{display:none}@media(prefers-reduced-motion:reduce){.gx-takeover body:before{display:none}}

.product-nav{position:sticky;top:0;z-index:3;min-height:64px;padding:0 var(--gutter);display:flex;align-items:center;gap:var(--gap);background:var(--bg);border-block:1px solid var(--line)}
/* The bar stands where the site header was: its wordmark is the header's home link and its
   product identity is the way back to the top of the page, both marked on approach with the
   accent hairline both navigation levels use for the current entry. */
.product-nav .wordmark{flex:none;font-size:22px;border-bottom:1px solid transparent}
a.nav-product{display:inline-flex;align-items:baseline;gap:8px;flex:none;white-space:nowrap;font-size:16px;letter-spacing:-.02em;border-bottom:1px solid transparent}
a.nav-product>.mono{color:var(--muted)}
.nav-top{color:var(--muted);font-size:13px}
.product-nav .wordmark:hover,.product-nav .wordmark:focus-visible,a.nav-product:hover,a.nav-product:focus-visible{border-bottom-color:var(--accent)}
.product-nav ul{display:flex;align-items:center;gap:32px;margin:0 auto 0 0;padding:0;list-style:none;font:14px var(--mono);text-transform:uppercase;letter-spacing:var(--label-tracking)}
.product-nav li{flex:none}.product-nav ul a{display:block;padding:8px 0;color:var(--muted);border-bottom:1px solid transparent}
.product-nav ul a[aria-current=location]{color:var(--ink);border-bottom-color:var(--accent)}
.product-nav .buy{flex:none;padding:10px 16px}
/* The price, and the cart when there is one. Both stand outside the section list, which is
   the part of the strip that scrolls: anything inside it on a phone sits past the masked
   right edge, which is exactly where the cart link used to end up. */
.nav-price{color:var(--ink);flex:none}
.product-nav .cart-link,.site-header nav .cart-link{color:var(--accent);flex:none;white-space:nowrap}
/* Present but unemphasised until there is something in it: the accent means "act on this". */
.product-nav .cart-link-empty,.site-header nav .cart-link-empty{color:var(--muted)}
.cart-link-empty:hover,.cart-link-empty:focus-visible{color:var(--ink)}
/* The pinned nav's buy button carries both labels and shows one: the full destination on
   desktop, the short form where the strip has to stay on a single row. */
.product-nav .buy-short{display:none}
/* Narrower than 1100px the bar sheds width in the order that costs the least: the product's
   name (its code stays), then the buy button's destination (the short label is written for
   this row), then the section list's own spacing, which scrolls rather than widening the
   page. The Master Collection's four section links are the widest case; the two escapes —
   wordmark home, code back to top — survive at every width. */
@media(max-width:1100px){.nav-product-name{display:none}a.nav-product{gap:6px}.product-nav .buy-long{display:none}.product-nav .buy-short{display:inline}.product-nav ul{gap:20px;font-size:13px;min-width:0;overflow-x:auto;scrollbar-width:none}.product-nav ul::-webkit-scrollbar{display:none}}
.specs .spec-list{border-top:1px solid var(--line)}
.spec-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);padding:24px 0;border-bottom:1px solid var(--line)}
.spec-row>.mono{grid-column:1/4;color:var(--muted);padding-top:4px}
.spec-row p{grid-column:5/12;font-size:18px}
code{font:.92em var(--mono)}
.spec-note{margin-top:24px;color:var(--muted);font:14px/1.5 var(--mono);max-width:56em}
.card-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px var(--gap)}
.collection-card{display:flex;flex-direction:column;gap:16px}
.card-stage{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:#0f1014}
.card-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 50%)}
.card-scene.pending{display:flex;align-items:center;justify-content:center;color:var(--muted);font:12px var(--mono);text-transform:uppercase;letter-spacing:var(--label-tracking)}
.card-sleeve{position:absolute;top:0;left:0;height:100%;display:flex;align-items:center;justify-content:center;padding:7%;background:#14161c;border-right:1px solid var(--line);box-shadow:-14px 0 30px #000a;transition:transform .75s cubic-bezier(.16,1,.3,1)}
.card-sleeve .disc{width:100%;max-width:none}
.card-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;align-items:baseline;padding-bottom:16px;border-bottom:1px solid var(--line)}
.card-line>.mono{grid-area:1/1;color:var(--muted)}
.card-line>.card-format{grid-area:1/2;color:var(--muted);text-align:right}
.card-line h3{grid-area:2/1/3/3;margin:0;font-weight:400;font-size:24px;letter-spacing:-.035em}
.collection-card:hover .card-line,.collection-card:focus-visible .card-line{border-bottom-color:var(--accent)}
/* One card treatment: the tile carries the packaging's own proportions, the object covers
   the photograph and slides aside on approach. Each photograph carries its own `--focus`
   from content/packs.json, panned so its subject sits right of the covered edge. */
.collection-card{grid-column:span 4}
.card-stage{aspect-ratio:498/480}
.card-sleeve{width:100%}
.collection-card:hover .card-sleeve,.collection-card:focus-visible .card-sleeve{transform:translateX(-62%)}
/* Without hover there is no approach to slide on, so the object slides once, when the card
   is revealed: system.mjs holds `.waiting` on the card until it enters the viewport, then
   drops it. It lands on the same -62% a pointer device settles at, rather than resting
   permanently mid-slide the way `@media(hover:none){transform:translateX(-46%)}` did.
   With motion off or reduced, `.waiting` is never applied, so the two overrides below
   catch the same selector and hold the static aside-resting state the design specifies —
   they are more specific than this block's rule, which the bare rules on the next two
   lines are not. */
@media(hover:none){
  .card-sleeve{transform:translateX(0)}
  .collection-card.reveal:not(.waiting) .card-sleeve{transform:translateX(-62%)}
  body[data-motion=off] .collection-card.reveal:not(.waiting) .card-sleeve{transform:translateX(-46%)}
}
@media(hover:none) and (prefers-reduced-motion:reduce){
  .collection-card.reveal:not(.waiting) .card-sleeve{transform:translateX(-46%)}
}
/* Without motion or with reduced motion the object rests aside so both stay visible. */
body[data-motion=off] .card-sleeve{transition:none;transform:translateX(-46%)}
@media(prefers-reduced-motion:reduce){.card-sleeve{transition:none;transform:translateX(-46%)}}
@media(max-width:1000px){.collection-card{grid-column:span 6}}
/* Phone: the strip is a single row and the section list is the part that scrolls, so its
   right edge fades — a hard cut at the padding reads as a line broken off rather than a list
   that continues. */
@media(max-width:700px){.product-nav{min-height:0;padding:8px 12px;gap:10px}.product-nav .wordmark{font-size:18px}.product-nav ul{gap:16px;font-size:12px;min-width:0;overflow-x:auto;scrollbar-width:none;mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}.product-nav ul::-webkit-scrollbar{display:none}.product-nav .nav-price,.product-nav .cart-link{font-size:12px}.product-nav .buy{font-size:12px;padding:8px 12px}.product-nav .buy-long{display:none}.product-nav .buy-short{display:inline}.spec-row{display:block;padding:20px 0}.spec-row>.mono{display:block;margin-bottom:8px;padding-top:0}.spec-row p{font-size:16px}.card-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 16px}.collection-card{grid-column:1/5}.card-line h3{font-size:22px}}

/* Before/after: a frame pinned under the product nav while its wipe crosses from the unedited
   frame to the graded one. --amount is written by wipe.mjs; --plate-aspect is the pair's own
   aspect as a bare number, because the width cap multiplies by it and calc() cannot multiply
   by a <ratio>. The cap letterboxes a tall plate into a centred column rather than cropping
   it: the Simulacrum footage is 2.39:1 and a photograph is often 2:3. */
.wipe-sequence{display:block}
.wipe-scene{position:relative;height:200svh;margin-bottom:8px}
.wipe-frame{position:sticky;top:var(--nav-h,64px);width:100%;max-width:calc((100svh - var(--nav-h,64px)) * var(--plate-aspect,2.3878));margin-inline:auto;aspect-ratio:var(--plate-aspect,2.3878);max-height:calc(100svh - var(--nav-h,64px));overflow:hidden;background:#06070a;border:1px solid var(--line);--amount:0%}
.wipe-plate{position:absolute;inset:0;margin:0}
.wipe-plate img{width:100%;height:100%;object-fit:cover}
.wipe-plate-after{clip-path:inset(0 calc(100% - var(--amount)) 0 0)}
.wipe-plate figcaption{position:absolute;bottom:16px;padding:6px 10px;background:#0d0f14cc;font-size:12px}
.wipe-plate-before figcaption{right:16px}
.wipe-plate-after figcaption{left:16px}
.wipe-caption{display:flex;justify-content:space-between;gap:16px;max-width:none;color:var(--muted);padding:12px var(--gutter) 0}
@media(max-width:700px){.wipe-scene{height:170svh}.wipe-frame{aspect-ratio:min(var(--plate-aspect,2.3878),1.3333);max-height:none;max-width:100%}}
/* No motion: the pin is released and both frames stand full width, captioned, so either
   state can be inspected without any scroll interaction. */
body[data-motion=off] .wipe-scene{height:auto}
body[data-motion=off] .wipe-frame{position:static;display:grid;gap:8px;aspect-ratio:auto;max-height:none;max-width:none}
body[data-motion=off] .wipe-plate{position:static}
body[data-motion=off] .wipe-plate img{height:auto;object-fit:contain}
body[data-motion=off] .wipe-plate-after{clip-path:none}
body[data-motion=off] .wipe-plate figcaption{position:static;background:none;color:var(--muted);padding:12px var(--gutter) 0}
@media(prefers-reduced-motion:reduce){
  .wipe-scene{height:auto}
  .wipe-frame{position:static;display:grid;gap:8px;aspect-ratio:auto;max-height:none;max-width:none}
  .wipe-plate{position:static}
  .wipe-plate img{height:auto;object-fit:contain}
  .wipe-plate-after{clip-path:none}
  .wipe-plate figcaption{position:static;background:none;color:var(--muted);padding:12px var(--gutter) 0}
}