/* Simulacrum product-page mockup — page-specific rules only. mockups.css supplies the
   shared tokens, product nav and spec list. */

.sim-hero{position:relative}
.sim-hero-media{width:100%;aspect-ratio:2.39;min-height:340px;overflow:hidden;background:#08090c}
.sim-hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.sim-hero-title{position:absolute;left:var(--gutter);top:44px;max-width:calc(100% - 2 * var(--gutter));display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-shadow:0 1px 12px #0008}
.sim-hero-title h1{font-size:calc(clamp(72px,10.5vw,164px) * var(--display-scale));margin:0;color:#fff}
.sim-hero-title .text-link{color:#fff;margin-top:16px}

.sim-object-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:center}
.sim-case-area{grid-column:1/7;display:flex;flex-direction:column;align-items:center;gap:20px}
/* One case, front-on, unlabelled: the user supplied a version without the 250D/500T stock
   label so the page shows the object without printing a claim the copy cannot support. Sized
   from one definite height, so the grid can neither stretch nor squeeze it. */
.sim-case{height:clamp(360px,52svh,620px);aspect-ratio:900/1237;filter:drop-shadow(-16px 12px 28px #000000b3)}
.sim-case img{width:100%;height:100%;object-fit:contain}
.sim-copy{grid-column:8/13;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.sim-copy .mono{color:var(--muted)}
.sim-copy h2{font-size:calc(clamp(40px,4vw,66px) * var(--display-scale))}
.sim-copy>p{font-size:20px;max-width:24em}
.sim-copy .purchase-description{width:100%}
.sim-copy .buy{margin-top:4px}

/* Inspect the look: the wipe sequence itself is shared with the pack pages and lives in
   mockups.css; only this section's own lead-in copy is here. */
.sim-compare{padding-bottom:40px}
.compare-lead{font-size:19px;max-width:38em;color:#c6cad3}

/* The edition names itself and prices itself on one line, the same split the pack cards use
   (identity left, figure right), and its button says which edition it buys. Nothing in the
   card has to be read together with something elsewhere to be understood. */
.sim-edition-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.sim-edition-head>.mono{color:var(--muted)}
.sim-edition-price{color:var(--ink)}

.sim-editions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.sim-edition{border:1px solid var(--line);border-radius:var(--radius);padding:32px;display:flex;flex-direction:column;gap:16px;background:var(--panel)}
.sim-edition>.mono{color:var(--muted)}
.sim-edition>p{font-size:16px}
.sim-edition-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:16px;border-top:1px solid var(--line);padding-top:16px}
.sim-edition-list li{padding-left:18px;position:relative}
.sim-edition-list li:before{content:"—";position:absolute;left:0;color:var(--muted)}
.sim-edition-excluded{color:var(--muted);margin-top:auto}

@media(max-width:1000px){.sim-case-area{grid-column:1/6}.sim-copy{grid-column:6/13}}

@media(max-width:900px){.sim-object-grid{display:flex;flex-direction:column;gap:40px}.sim-case-area{width:100%}.sim-editions{grid-template-columns:1fr}}

@media(max-width:700px){
  .sim-hero-media{min-height:520px}
  .sim-hero-title{top:32px;gap:8px}
  .sim-hero-title h1{font-size:76px}
  .sim-edition{padding:24px}
  .sim-case{height:clamp(300px,42svh,420px)}
  .compare-lead{font-size:16px}
}

/* Simulacrum in action: four click-to-play facades. Each is a button carrying a poster, and
   video.mjs swaps in the iframe on the click that asks for it — nothing reaches Google, and
   no cookie is set, for a visitor who never presses play. */
.video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px var(--gap)}
.video-card{display:flex;flex-direction:column;gap:16px}
.video-facade{position:relative;display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:#08090c;overflow:hidden;aspect-ratio:16/9;cursor:pointer}
.video-facade img{width:100%;height:100%;object-fit:cover;display:block}
/* The mark is an inline SVG triangle, not U+25B6: iOS and Android resolve the bare
   character to the colour emoji ▶️, which is a rounded blue plate on a page that has one
   accent. `drop-shadow` rather than `text-shadow` because the glyph is no longer text;
   `font-size` stays because this stylesheet ships ahead of the re-pasted fragments and
   the character is still what the not-yet-updated pages hold. */
.video-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:34px;color:var(--ink);filter:drop-shadow(0 2px 18px #000c);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.video-facade:hover .video-play,.video-facade:focus-visible .video-play{transform:scale(1.14)}
.video-frame{width:100%;aspect-ratio:16/9;border:1px solid var(--line);border-radius:var(--radius);background:#08090c}
.video-card figcaption{display:flex;justify-content:space-between;gap:24px;padding:15px 0;border-bottom:1px solid var(--line);font-size:16px}
.video-card figcaption .mono{color:var(--muted);flex:none}
@media(max-width:1000px){.video-grid{grid-template-columns:1fr}}