/* components/embed.css — the plate page: an asymmetric spread with one
   oversized element, negative space as the compositional weapon; the
   game frame is a hairline box, not a lit tube. */
.hero{ position:relative; padding-block:6rem 3.5rem }
/* off-centre: the copy column is too big, the plate column too small */
.hero__grid{ display:grid; grid-template-columns:1.35fr .65fr; gap:4.5rem; align-items:start }
.hero__grid > div{ min-width:0 }
@media (max-width:820px){ .hero__grid{grid-template-columns:1fr; gap:2.5rem} }
.hero__art{ background-size:cover !important; aspect-ratio:4/3; border-radius:0; border:1px solid var(--ink);
  min-height:260px; contain:paint; position:relative }
.section-head .btn, .section-head > a.btn{ align-self:center }
/* the display line — Didone, 56–72px, alone on the field */
.hero h1{ color:var(--ink); margin-bottom:.25em; letter-spacing:.01em }
.hero h1.font-black{ font-size:clamp(3.6rem,7.5vw,4.75rem); letter-spacing:.04em }
.hero__lead{ font-size:1.05rem; color:var(--fg-muted); max-width:52ch; font-family:var(--font-body) }
.hero__cta{ margin-top:2.4rem }
/* === asset hooks (STYLE-REFERENCE: one role per asset) === */
/* railing — the one boundary band, same placement on every page: under masthead */
.railing-band{ height:18px; background:url("../../img/ink/svg/railing.svg") repeat-x center/auto 18px;
  opacity:.45; pointer-events:none; border-top:1px solid var(--ink) }
/* corner — feature card ornament, homepage only; inside the media plate, away from controls */
.corner-orn{ position:absolute; top:.5rem; left:.5rem; width:34px; height:34px; z-index:3;
  background:url("../../img/ink/svg/corner.svg") center/contain no-repeat; color:var(--ink);
  pointer-events:none; opacity:.8 }
/* torch — one instance on project-detail, edge margin, vertical */
.margin-torch{ position:absolute; top:6rem; right:-46px; width:24px; height:190px; z-index:1;
  background:url("../../img/ink/svg/torch.svg") top center/contain no-repeat; opacity:.55;
  pointer-events:none }
@media (max-width:1330px){ .margin-torch{ right:-40px } }
/* the game frame: a ruled observation box. Header = catalogue bar,
   viewport = the only dark surface (an ink plate), no glow, no vignette */
.gameframe{ border:1px solid var(--ink); border-radius:0; overflow:hidden;
  background:var(--paper) }
.gameframe__bar{ display:flex; align-items:center; gap:.6rem; padding:.65rem .9rem; border-bottom:1px solid var(--ink);
  background:var(--bone);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-muted);
  position:relative }
.gameframe__bar > span{ position:relative; z-index:1 }
.gameframe__dots span{ width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px;
  background:var(--bone); border:1px solid var(--ink) }
.gameframe iframe{ width:100%; height:min(74vh,760px); border:0; display:block; background:var(--ink) }
.gameframe--full iframe{ height:calc(100vh - 130px) }
/* the empty plate: a dashed registration frame on blank paper */
.empty{ padding:4rem 1rem; text-align:center; color:var(--fg-muted);
  border:1px dashed var(--ink); border-radius:0; background:none;
  font-family:var(--font-mono); font-size:.85rem; letter-spacing:.08em }
/* stats read as ruled index cells */
.stat{ padding:1.4rem 1.6rem; border:1px solid var(--ink); border-radius:0; position:relative;
  background:var(--paper) }
.stat::before{ content:""; position:absolute; top:6px; left:6px; width:5px; height:5px;
  border:1px solid var(--ink); border-radius:50%; background:var(--paper) }
.stat b{ font-family:var(--font-display); font-size:2.6rem; display:block; color:var(--ink); font-weight:500 }
.stat span{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.24em; color:var(--fg-muted) }