/* ==========================================================================
   Parklane — Strategy Visualizer
   An architectural model: four material slabs on a stone plinth.
   Layout/positions are computed in strategy-visualizer.js and written as
   inline transforms; this file owns materials, lighting and motion.
   ========================================================================== */

.sv {
  --sv-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --sv-dur: 1600ms;
  overflow-x: clip;
  /* A faint, low light pooling behind the model — not a gradient field */
  background:
    radial-gradient(55% 50% at 68% 64%, rgba(6, 74, 18, 0.1), rgba(6, 74, 18, 0) 70%),
    var(--c-vault);
  /* Enter a little sooner after the hero's fade */
  padding-top: calc(var(--section-y) * 0.72);
}

.sv__layout {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 1rem + 3vw, 5rem);
  align-items: center;
}

.sv__panel {
  position: relative;
  z-index: 2;
  max-width: 27rem;
}

.sv__panel .lead {
  font-size: 1.0625rem;
}

/* Controls ------------------------------------------------------------------ */

.sv__controls {
  margin-top: var(--s-7);
  border-top: 1px solid var(--c-hairline-dark);
}

.sv-control {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  align-items: center;
  width: 100%;
  min-height: 60px;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--c-hairline-dark);
  text-align: left;
  color: var(--c-ivory-muted);
  transition: color var(--dur) var(--ease);
}

/* Soft green line expands along the bottom rule when active */
.sv-control::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--c-green-edge);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--ease);
}

.sv-control__num {
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  color: var(--c-brass);
}

.sv-control__label {
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
}

/* Square marker, like a specimen tag */
.sv-control__mark {
  position: relative;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(242, 239, 229, 0.3);
  transition:
    border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

.sv-control:hover,
.sv-control:focus-visible {
  color: var(--c-ivory);
}

.sv-control:hover .sv-control__mark {
  border-color: var(--c-brass);
}

.sv-control:focus-visible {
  outline-color: var(--c-green-edge);
  outline-offset: 2px;
}

.sv-control[aria-pressed="true"] {
  color: var(--c-ivory);
}

.sv-control[aria-pressed="true"]::after {
  transform: scaleX(1);
}

.sv-control[aria-pressed="true"] .sv-control__mark {
  border-color: var(--c-green-edge);
  background: var(--c-green);
  box-shadow: inset 0 0 0 2px var(--c-vault);
}

/* Detail copy --------------------------------------------------------------- */

.sv__detail {
  margin-top: var(--s-6);
  min-height: 9.5rem;
}

.sv__hint {
  font-size: var(--fs-small);
  color: var(--c-ivory-faint);
}

.sv-detail {
  animation: sv-copy-in 900ms var(--ease) both;
}

.sv-detail__kicker {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-brass);
}

.sv-detail__title {
  margin-top: var(--s-3);
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.2;
}

.sv-detail__text {
  margin-top: var(--s-3);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--c-ivory-muted);
}

.sv-detail__roles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-4);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--c-limestone);
}

.sv-detail__roles li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.sv-detail__roles li::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--c-brass);
}

@keyframes sv-copy-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Stage & scene ------------------------------------------------------------- */

.sv__stage {
  position: relative;
  height: clamp(540px, 46vw, 760px);
  perspective: 2400px;
  perspective-origin: 50% 30%;
  cursor: default;
}

.sv__placeholder {
  position: absolute;
  inset: auto 0 0;
  text-align: center;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-ivory-faint);
}

.sv__stage.is-mounted .sv__placeholder {
  display: none;
}

/* The scene origin is a single point on the plinth; everything is placed from it. */
.sv-scene {
  position: absolute;
  left: 53%;                        /* laptop: cluster centred between the copy column and the edge */
  top: 79%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transition: transform 2000ms var(--sv-ease);
}

.sv-scene * {
  transform-style: preserve-3d;
}

/* Plinth — dark stone with a drafted plan grid */
.sv-plinth {
  position: absolute;
  width: var(--pw);
  height: var(--pd);
  margin-left: calc(var(--pw) / -2);
  margin-top: calc(var(--pd) / -2);
  transform: rotateX(90deg);
  background:
    linear-gradient(rgba(242, 239, 229, 0.035) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(242, 239, 229, 0.035) 1px, transparent 1px) 0 0 / 40px 40px,
    radial-gradient(closest-side, #151b17, #0b100d);
  border: 1px solid rgba(242, 239, 229, 0.08);
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
}

/* Slab: a W × H × D box built from five faces */
.sv-slab {
  position: absolute;
  width: calc(var(--w) * 1px);
  height: calc(var(--h) * 1px);
  margin-left: calc(var(--w) * -0.5px);
  margin-top: calc(var(--h) * -1px);
  transition: transform var(--sv-dur) var(--sv-ease);
  cursor: pointer;
}

.sv-face {
  position: absolute;
  left: 0;
  top: 0;
  backface-visibility: hidden;
}

.sv-face::after {
  /* Shade + recession: a layer rather than filter/opacity,
     which would flatten the 3D context */
  content: "";
  position: absolute;
  inset: 0;
  background: #040806;
  opacity: calc(var(--face-shade, 0) + var(--recede, 0));
  transition: opacity var(--sv-dur) var(--sv-ease);
  pointer-events: none;
}

.sv-face--front,
.sv-face--back {
  width: 100%;
  height: 100%;
}

/* Key light from upper left: left + top faces lit, right face in shadow */
.sv-face--front {
  transform: translateZ(calc(var(--d) * 0.5px));
  --light:
    linear-gradient(180deg, rgba(255, 250, 240, 0.18) 0 2px, rgba(255, 250, 240, 0.05) 3px, transparent 7px),
    linear-gradient(90deg, rgba(255, 250, 240, 0.1) 0 2px, transparent 5px),
    linear-gradient(0deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0) 22%),
    linear-gradient(118deg, rgba(255, 248, 235, 0.1) 0%, rgba(255, 248, 235, 0) 40%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.3) 100%);
}

.sv-face--back {
  transform: rotateY(180deg) translateZ(calc(var(--d) * 0.5px));
  --face-shade: 0.62;
}

.sv-face--left,
.sv-face--right {
  width: calc(var(--d) * 1px);
  height: 100%;
  left: calc((var(--w) - var(--d)) * 0.5px);
}

.sv-face--right {
  transform: rotateY(90deg) translateZ(calc(var(--w) * 0.5px));
  --face-shade: 0.52;
  --light: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 30%);
}

.sv-face--left {
  transform: rotateY(-90deg) translateZ(calc(var(--w) * 0.5px));
  --face-shade: 0.1;
  --light:
    linear-gradient(90deg, rgba(0, 0, 0, 0.12), rgba(255, 250, 240, 0.06)),
    linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 26%);
}

.sv-face--top {
  width: 100%;
  height: calc(var(--d) * 1px);
  top: calc((var(--h) - var(--d)) * 0.5px);
  transform: rotateX(90deg) translateZ(calc(var(--h) * 0.5px));
  --light: linear-gradient(180deg, rgba(255, 250, 240, 0.16), rgba(255, 250, 240, 0.08));
}

.sv-slab.is-receded { --recede: 0.55; }

/* Arrises: a lit top/left edge and a dark lower/right edge read as a chamfer */
.sv-slab {
  --arris:
    inset 0 1px 0 rgba(255, 250, 240, 0.26),
    inset 1px 0 0 rgba(255, 250, 240, 0.1),
    inset -1px 0 0 rgba(0, 0, 0, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45);
}

.sv-slab .sv-face--front {
  box-shadow: var(--arris);
  transition: box-shadow var(--sv-dur) var(--sv-ease);
}

/* Selected: restrained Parklane-green edge light */
.sv-slab.is-active .sv-face--front {
  box-shadow:
    var(--arris),
    inset 0 0 0 1px rgba(47, 122, 64, 0.8),
    inset 10px 0 18px -14px rgba(47, 122, 64, 0.7),
    0 40px 90px -44px rgba(6, 74, 18, 0.85);
}

.sv-slab.is-active .sv-face--left {
  box-shadow: inset 0 0 0 1px rgba(47, 122, 64, 0.45);
}

/* Contact shadow on the plinth, cast back and to the right */
.sv-shadow {
  position: absolute;
  left: calc(var(--w) * -0.25px);
  width: calc(var(--w) * 1.5px);
  height: calc((var(--d) + 150) * 1px);
  top: calc(var(--h) * 1px - (var(--d) + 150) * 0.5px);
  transform: translate3d(22px, -1px, -34px) rotateX(90deg);
  background:
    radial-gradient(closest-side, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0));
  pointer-events: none;
}

.sv-shadow::after {
  content: "";
  position: absolute;
  inset: 20% 12%;
  background: radial-gradient(closest-side, rgba(6, 74, 18, 0.6), rgba(6, 74, 18, 0));
  opacity: 0;
  transition: opacity var(--sv-dur) var(--sv-ease);
}

.sv-slab.is-active .sv-shadow::after {
  opacity: 1;
}

/* Specimen tag — small and quiet; the object leads */
.sv-tag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 7.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tag, rgba(242, 239, 229, 0.6));
  opacity: 0.8;
  transform: translateZ(1px);
  transition: opacity var(--sv-dur) var(--sv-ease);
}

.sv-slab.is-receded .sv-tag {
  opacity: 0.3;
}

.sv-tag b {
  font-family: var(--font-serif);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--c-brass);
}

/* Brass: a slim tie that joins the assembled composition, and a floor datum line */
.sv-lintel {
  cursor: default;
  transition: transform var(--sv-dur) var(--sv-ease);
}

.sv-lintel .sv-face--front {
  box-shadow: none;
}

.sv-datum {
  position: absolute;
  height: 1px;
  width: 1px;
  background: var(--c-brass);
  transform-origin: 0 0;
  transition: transform var(--sv-dur) var(--sv-ease);
}

.sv-datum::before,
.sv-datum::after {
  /* dimension-line end ticks */
  content: "";
  position: absolute;
  top: -5px;
  width: 1px;
  height: 11px;
  background: inherit;
}

.sv-datum::before { left: 0; }
.sv-datum::after  { right: 0; }

/* Caption under the model */
.sv__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-hairline-dark);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-ivory-faint);
}

.sv__caption strong {
  font-weight: 500;
  color: var(--c-brass);
}

/* Materials ------------------------------------------------------------------
   Neutral placeholders, matte by design. Each face stacks:
   base colour (--mat) → texture (--tex) → fine grain → light (--light) → shade.
   An asset can instead supply an `image` in the JS config for its front face. */

.sv-slab {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .3 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --none: linear-gradient(transparent, transparent);
}

.sv-face {
  background: var(--mat);
}

.sv-face::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    var(--light, var(--none)) 0 0 / 100% 100%,
    var(--grain, var(--none)) 0 0 / 180px 180px,
    var(--tex, var(--none)) 0 0 / var(--tex-size, 480px 480px);
  pointer-events: none;
}

/* Final artwork -------------------------------------------------------------
   Each asset is a pre-rendered dimensional slab on transparency, shown as a
   sprite standing on the slab's footprint and turned toward the viewer. The
   material box below it is the placeholder until the art has decoded. */

.sv-sprite {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
  transition: transform 1800ms var(--sv-ease);
  pointer-events: none;
}

.sv-sprite__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  opacity: 0;
  user-select: none;
  /* One filter chain for every state so transitions interpolate smoothly:
     brightness / saturation for recession, drop-shadows for the green edge light */
  --sv-dim: 1;
  --sv-sat: 1;
  --sv-edge: rgba(47, 122, 64, 0);
  --sv-glow: rgba(6, 74, 18, 0);
  filter:
    brightness(var(--sv-dim))
    saturate(var(--sv-sat))
    drop-shadow(0 0 0.75px var(--sv-edge))
    drop-shadow(0 14px 22px var(--sv-glow));
  transition:
    opacity 700ms var(--ease),
    filter var(--sv-dur) var(--sv-ease);
}

.sv-slab.is-loaded .sv-sprite__img {
  opacity: 1;
}

/* Fade the placeholder box out beneath the artwork */
.sv-slab .sv-face {
  transition: opacity 700ms var(--ease);
}

.sv-slab.is-loaded > .sv-face {
  opacity: 0;
  pointer-events: none;
}

.sv-slab.is-receded .sv-sprite__img {
  --sv-dim: 0.42;
  --sv-sat: 0.75;
}

.sv-slab.is-active .sv-sprite__img {
  --sv-edge: rgba(47, 122, 64, 0.95);
  --sv-glow: rgba(6, 74, 18, 0.32);
}

/* Specimen tag sits just beneath the object, on the plinth line */
.sv-sprite .sv-tag {
  left: 2px;
  bottom: auto;
  top: calc(100% + 12px);
  color: rgba(242, 239, 229, 0.5);
  transform: none;
}

/* Limestone — warm, clouded, with sparse fossil specks and an etched plan */
.m-limestone {
  --mat: linear-gradient(174deg, #d8d1c1 0%, #cbc4b5 50%, #bdb5a4 100%);
  --tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .018' numOctaves='4' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .38 0 0 0 0 .31 0 0 0 1 -.36'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='1' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .27 0 0 0 0 .22 0 0 0 7 -4.95'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
  --tag: rgba(11, 13, 12, 0.5);
}

.m-limestone .sv-face--front {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 160' fill='none' stroke='%230B0D0C' stroke-opacity='.16' stroke-width='.5'%3E%3Crect x='10' y='14' width='100' height='120'/%3E%3Cpath d='M10 60h58v74M68 88h42M40 60v-46M86 14v40h24M68 110h-20'/%3E%3Cpath d='M48 110a14 14 0 0 1 14-14' stroke-dasharray='1.5 1.5'/%3E%3Cpath d='M10 146h100M10 143v6M110 143v6' stroke='%2366533B' stroke-opacity='.4'/%3E%3C/svg%3E") 50% 36% / 72% auto no-repeat,
    var(--mat);
}

/* Patinated bronze — dark blotching with a trace of verdigris; no shine */
.m-bronze {
  --mat: linear-gradient(170deg, #6f5a3f 0%, #58472f 45%, #3d3124 100%);
  --tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .03' numOctaves='4' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .07 0 0 0 0 .04 0 0 0 1.8 -.62'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .26 0 0 0 0 .33 0 0 0 0 .27 0 0 0 1.2 -.74'/%3E%3C/filter%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .5 0 0 0 0 .33 0 0 0 .9 -.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
  --tex-size: 420px 420px;
  --tag: rgba(242, 239, 229, 0.55);
}

/* Smoked glass — tinted, matte, framed; edges read green like thick glass */
.m-glass {
  --mat:
    linear-gradient(101deg, rgba(242, 239, 229, 0) 18%, rgba(242, 239, 229, 0.05) 30%, rgba(242, 239, 229, 0) 42%),
    linear-gradient(180deg, rgba(242, 239, 229, 0.05), rgba(242, 239, 229, 0) 40%),
    rgba(18, 26, 22, 0.74);
  --grain: none;
  --tag: rgba(242, 239, 229, 0.5);
}

.m-glass .sv-face--front {
  border: 1px solid rgba(169, 138, 82, 0.28);
  background:
    repeating-linear-gradient(180deg, transparent 0 83px, rgba(242, 239, 229, 0.07) 83px 84px),
    var(--mat);
}

.m-glass .sv-face--left,
.m-glass .sv-face--right,
.m-glass .sv-face--top {
  background: rgba(38, 66, 50, 0.9);
}

/* Deep green marble — clouded ground with fine turbulent veining */
.m-marble {
  --mat: linear-gradient(162deg, #0f2c1b 0%, #0a2114 50%, #06150d 100%);
  --tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008 .014' numOctaves='3' seed='6' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .02 0 0 0 0 .05 0 0 0 0 .03 0 0 0 1.6 -.5'/%3E%3C/filter%3E%3Cfilter id='v'%3E%3CfeTurbulence type='turbulence' baseFrequency='.0035 .022' numOctaves='5' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .78 0 0 0 0 .77 0 0 0 0 .7 0 0 0 -3.2 .42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3Cg transform='rotate(-32 260 260)'%3E%3Crect x='-200' y='-200' width='920' height='920' filter='url(%23v)'/%3E%3C/g%3E%3C/svg%3E");
  --tex-size: 520px 520px;
  --tag: rgba(242, 239, 229, 0.5);
}

/* Brass tie */
.m-brass {
  --mat: linear-gradient(180deg, #bb9d68, #8a6f45);
  --grain: none;
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 1024px) {
  .sv__layout {
    grid-template-columns: 1fr;
  }

  /* Flatten the panel so the model sits between the heading and the controls:
     each tap is answered in view. */
  .sv__layout {
    gap: var(--s-6);
  }

  .sv__panel {
    display: contents;
  }

  .sv__panel .section-head { order: 1; }
  .sv__stage               { order: 2; }
  .sv__controls            { order: 3; margin-top: 0; }
  .sv__detail              { order: 4; margin-top: 0; }

  .sv__controls,
  .sv__detail {
    max-width: var(--measure);
  }

  .sv__stage {
    height: clamp(440px, 74vw, 620px);
  }

  .sv-scene {
    left: 52.5%;                    /* cluster is heavier on its left; this centres it */
  }
}

@media (max-width: 640px) {
  .sv__controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--s-4);
    margin-top: var(--s-6);
  }

  .sv-control {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: start;
    min-height: 72px;
    row-gap: 2px;
  }

  .sv-control__num {
    grid-column: 1;
    font-size: 0.8125rem;
  }

  .sv-control__label {
    grid-column: 1;
    font-size: 0.875rem;
    line-height: 1.3;
  }

  .sv-control__mark {
    grid-column: 2;
    grid-row: 1;
  }

  .sv__detail {
    min-height: 0;
  }

  .sv__stage {
    height: 300px;
    perspective: 1600px;
    margin-inline: calc(var(--gutter) * -1);
  }

  .sv__caption {
    left: var(--gutter);
    right: var(--gutter);
  }

  .sv-scene {
    top: 76%;
    left: 50%;
  }

  .sv-tag {
    display: none;
  }

  .sv__fig {
    display: none;
  }

  .sv__caption {
    letter-spacing: 0.14em;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sv {
    --sv-dur: 1ms;
  }

  .sv-scene {
    transition-duration: 1ms;
  }

  .sv-detail {
    animation: none;
  }
}

/* Wide desktops: as far left as keeps a clear gap from the controls */
@media (min-width: 1360px) {
  .sv-scene {
    left: 55.9%;
  }
}