/* WeDominators — extras for single-case-study.html (generated) */

/* ————— case study: media blocks (drop-in image areas) ————— */
.shot{margin:2.2rem 0;border-radius:20px;overflow:hidden;position:relative}
.shot .art{aspect-ratio:16/9}
.shot.tall .art{aspect-ratio:4/3}
.shot.wide .art{aspect-ratio:21/9}
.shot figcaption{padding:.85rem 1.1rem;font-size:.78rem;color:var(--ink2);border-top:1px solid var(--line)}
/* empty image slots read as deliberate placeholders, labelled with the export size */
.ph{position:absolute;inset:0;z-index:3;display:grid;place-content:center;justify-items:center;gap:.55rem;
  pointer-events:none;text-align:center;padding:1rem;
  font:600 .62rem/1.4 var(--font-b);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.ph svg{opacity:.5}
.shot .art,.break .art,.gallery .art,.compare .art{position:relative;
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--ink) 9%,transparent)}
.gallery{display:grid;gap:.85rem;margin:2.2rem 0}
.gallery.two{grid-template-columns:1fr 1fr}
.gallery.three{grid-template-columns:repeat(3,1fr)}
.gallery figure{border-radius:16px;overflow:hidden;position:relative}
.gallery .art{aspect-ratio:4/3}
.gallery figcaption{padding:.7rem .9rem;font-size:.74rem;color:var(--mute)}
.compare{position:relative;border-radius:20px;overflow:hidden;margin:2.2rem 0;aspect-ratio:16/9;
  touch-action:none;user-select:none;cursor:ew-resize;--x:50%}
.compare>.side{position:absolute;inset:0}
.compare>.side.after{clip-path:inset(0 0 0 var(--x))}
.compare .lbl{position:absolute;top:.75rem;z-index:4;padding:.32rem .65rem;border-radius:999px;
  font:600 .62rem/1 var(--font-b);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);
  background:var(--glass-deep);border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.compare .lbl.a{left:.75rem}
.compare .lbl.b{right:.75rem}
.compare .bar{position:absolute;top:0;bottom:0;left:var(--x);width:2px;z-index:5;background:var(--accent);pointer-events:none}
.compare .bar::before{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;width:38px;height:38px;
  border-radius:50%;background:var(--accent);box-shadow:0 10px 26px -10px color-mix(in oklab,var(--accent) 85%,transparent)}
.compare .bar svg{position:absolute;top:50%;left:50%;translate:-50% -50%;color:#fff}
.compare:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.break{position:relative;border-radius:24px;overflow:hidden;margin:clamp(2rem,4vw,3rem) 0}
.break .art{aspect-ratio:21/9}
.facts{display:grid;grid-template-columns:1fr}
.facts>div{display:grid;gap:.2rem;padding:.62rem 0;border-bottom:1px solid var(--line);min-width:0}
.facts>div:last-child{border-bottom:0;padding-bottom:0}
.facts>div:first-child{padding-top:0}
.facts dt{font:600 .63rem/1 var(--font-b);letter-spacing:.13em;text-transform:uppercase;color:var(--mute)}
.facts dd{margin:0;min-width:0;color:var(--ink);font:500 .88rem/1.45 var(--font-b);overflow-wrap:anywhere}
@media (max-width:820px){.gallery.three{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.gallery.two,.gallery.three{grid-template-columns:1fr}}