/* jonasfriedman.com — homepage only.
   Built on the scroll-craft floor (scrollcraft.css) with the site's own
   palette and face. Loads after main.css. Nothing here restyles the engine's
   own selectors; the page's own classes carry the composition. */

/* ── Tokens ─────────────────────────────────────── */
body.home {
  --sc-canvas:      #0d0d0d;
  --sc-surface:     #141414;
  --sc-ink:         #ebebeb;
  --sc-ink-soft:    #9a9389;
  --sc-accent:      #e0873f;
  --sc-accent-ink:  #14100c;
  /* Display face. Swap the family here to change the whole page's voice:
     'Big Shoulders Display' (chosen), 'Anton', 'Bebas Neue' all sit well. */
  --sc-font-display: 'Big Shoulders Display', 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --sc-font-text:    'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --sc-font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --sc-shadow-color: 20 20% 2%;
  --sc-r-sm: 3px; --sc-r-md: 3px; --sc-r-lg: 3px;

  --home-muted: var(--sc-ink-soft);
  --home-header-h: 4.6rem;

  background-color: var(--sc-canvas);
  color: var(--sc-ink);
  overflow-x: clip;
}

/* ── Fixed header over the stages ───────────────── */
.site-header--home {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: linear-gradient(to bottom, rgba(8,8,8,0.55), rgba(8,8,8,0));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
/* The bar's ground is a layer whose opacity follows scroll (--hdr, 0 to 1
   over the first third of a viewport, written by home.js), so it arrives
   gradually rather than switching on. */
.site-header--home::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(8,8,8,0.96), rgba(14,14,14,0.9));
  box-shadow: 0 1px 0 rgba(255,255,255,0.05), 0 4px 24px rgba(0,0,0,0.5);
  backdrop-filter: blur(calc(var(--hdr, 0) * 14px));
  -webkit-backdrop-filter: blur(calc(var(--hdr, 0) * 14px));
  opacity: var(--hdr, 0);
}
.site-header--home .site-nav { position: relative; z-index: 1; }

/* ── Shared label schema (museum label) ─────────── */
.label {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--home-muted);
  margin: 0 0 0.9rem;
}
.object-label__title {
  font-family: var(--sc-font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.25;
  margin: 0 0 0.35rem;
  color: var(--sc-ink);
  text-wrap: balance;
}
.object-label__line {
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--home-muted);
  margin: 0;
  line-height: 1.6;
}
.object-label__line--role { color: var(--sc-ink); opacity: 0.86; }

.textlink {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity var(--sc-d-fast) var(--sc-ease-out);
}
.textlink:hover { opacity: 0.65; }
.textlink:active { transform: translateY(1px); }

.cta {
  display: inline-block;
  margin-top: 1.6rem;
  background: var(--sc-ink);
  color: var(--sc-canvas);
  padding: 0.8rem 2.3rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  box-shadow: var(--sc-e2);
  transition: opacity var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out);
}
.cta:hover { opacity: 0.82; }
.cta:active { transform: scale(0.97); }

/* ── Timecode chrome ────────────────────────────── */
.nav-left { display: flex; align-items: center; gap: 1.5rem; }
.tc__read--bar {
  font-family: var(--sc-font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--sc-ink);
  opacity: 0.85;
}
.tc {
  position: fixed;
  left: var(--sc-gutter);
  bottom: clamp(1rem, 3vh, 2rem);
  z-index: var(--sc-z-chrome);
  pointer-events: none;
  font-family: var(--sc-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--home-muted);
  font-variant-numeric: tabular-nums;
  max-width: 18rem;
}
.tc__read { margin: 0; display: flex; align-items: center; gap: 0.5rem; color: var(--sc-ink); }
.tc .tc__read--float { display: none; }
.tc__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sc-accent);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
  transition: opacity var(--sc-d-base) var(--sc-ease-out);
}
.is-end .tc__dot { opacity: 0.35; }
.tc__label { opacity: 0.55; }
.tc__log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.tc__log li { opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity 320ms var(--sc-ease-out), transform 320ms var(--sc-ease-out); }
.tc__log li.is-in { opacity: 0.7; transform: none; }
.tc__log li.is-in.is-current { opacity: 1; }
.tc__log a { pointer-events: auto; color: inherit; text-transform: uppercase; white-space: nowrap; transition: color var(--sc-d-fast) var(--sc-ease-out); }
.tc__log a:hover, .tc__log a:focus-visible, .tc__log li.is-current a { color: var(--sc-ink); }
.tc__log li.is-current a::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--sc-accent); margin-right: 0.6em; vertical-align: middle; }
.tc__log li:not(.is-current) a::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 0.6em; }
.tc__log time { opacity: 0.6; margin-right: 0.6em; }

/* ── Act 1: the room ────────────────────────────── */
.room { background: var(--sc-canvas); }
.room__plane {
  position: absolute;
  inset: -8vh 0;
  z-index: 1;
  pointer-events: none;
}
.room__plane img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 40% 48%;
}
.room__plane--far { z-index: 1; }
.room__plane--far img { transform: scale(1.02); filter: saturate(0.92); }
.room__plane--subject { z-index: 3; }
.room__name {
  position: absolute;
  z-index: 2;
  left: var(--sc-gutter);
  top: calc(var(--home-header-h) + 4vh);
  margin: 0;
  font-family: var(--sc-font-display);
  font-weight: 900;
  font-size: clamp(4rem, 12vw, 15rem);
  line-height: 0.86;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--sc-ink);
  opacity: calc(0.92 - var(--sc-p, 0) * 0.22);
  pointer-events: none;
  user-select: none;
}
.room__floor {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 30%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, color-mix(in oklab, var(--sc-canvas) 70%, transparent) 55%, var(--sc-canvas) 100%);
}
.room__scrim {
  position: absolute; inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(to right,
    transparent 44%,
    color-mix(in oklab, var(--sc-canvas) 40%, transparent) 58%,
    color-mix(in oklab, var(--sc-canvas) 78%, transparent) 76%,
    color-mix(in oklab, var(--sc-canvas) 92%, transparent) 100%);
}
.room__object {
  position: absolute;
  z-index: var(--sc-z-copy);
  right: var(--sc-gutter);
  top: 55%;
  transform: translateY(-50%);
  width: min(40vw, 600px);
}
.room__object .room__video { margin-bottom: 1.4rem; }
.room__object .object-label { text-shadow: 0 1px 8px rgba(0,0,0,0.6); }
.room__object .label { font-size: 0.68rem; }
.room__object .object-label__title { font-size: clamp(2rem, 3vw, 3rem); margin-bottom: 0.5rem; }
.room__object .object-label__line { font-size: 0.95rem; }
/* Each label line boxes only its own text, so nothing beside it counts as
   its background in the contrast pass. */
.room__object .object-label,
.room__object .object-label > * { width: fit-content; }
.room__video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: none;
  border-radius: var(--sc-r-sm);
  box-shadow: var(--sc-e3);
}

/* ── Act 2: the reel ────────────────────────────── */
.reel { background: transparent; }
.reel__copy {
  position: absolute;
  z-index: var(--sc-z-copy);
  inset-inline: 0;
  top: calc(var(--home-header-h) + 3vh);
  width: 100%;
  max-width: var(--sc-maxw);
  margin-inline: auto;
  padding-inline: var(--sc-gutter);
}
.object-label--wide { margin-bottom: 1.4rem; }
.reel__frame { margin: 0; }
.reel__frame iframe {
  width: 100%;
  /* Fits between the label and the fixed index at the foot of the viewport. */
  height: min(640px, calc(100svh - var(--home-header-h) - 3vh - 15.5rem));
  border: none;
  display: block;
}

/* Lines that print from scroll. Per act: --print-start is the progress the
   first line lands at, --print-step the gap between lines. */
.print__row {
  --s: calc(var(--print-start, 0.04) + var(--i) * var(--print-step, 0.06));
  --t: clamp(0, calc((var(--sc-p, 0) - var(--s)) / 0.05), 1);
  opacity: var(--t);
  transform: translate3d(0, calc((1 - var(--t)) * 8px), 0);
}
.reel__copy { --print-start: -0.02; --print-step: 0.05; }

/* ── Act 3: the projects rail ───────────────────── */
.rail-stage { background: transparent; }
.rail {
  height: 100%;
  align-items: flex-start;
  gap: clamp(1.25rem, 3vw, 3rem);
  padding-inline: var(--sc-gutter);
  padding-top: calc(var(--home-header-h) + 5vh);
  width: max-content;
}
.rail__lead { padding-top: 1rem; }
.rail__note { align-self: center; }
.rail__lead { width: clamp(18rem, 30vw, 30rem); flex: none; }
.rail__lead .label { font-size: 0.68rem; }
.rail__lead-line { font-size: clamp(1rem, 1.15vw, 1.15rem); line-height: 1.5; color: var(--home-muted); margin: 0; text-wrap: pretty; }
.obj { flex: none; width: clamp(14rem, 22vw, 26rem); }
.obj__media { display: block; }
.obj__tilt { overflow: hidden; border-radius: var(--sc-r-sm); box-shadow: var(--sc-e2), var(--sc-edge); }
.obj__tilt img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; transition: opacity var(--sc-d-base) var(--sc-ease-out); }
.obj__media:hover img { opacity: 0.8; }
.obj .object-label { margin-top: 1rem; }
.obj .object-label__title { font-size: 0.92rem; }
.obj .object-label__line { font-size: 0.72rem; }
.rail__note { flex: none; width: clamp(14rem, 26vw, 28rem); display: flex; align-items: center; justify-content: center; }

/* The rail as a grid. Unused since 2026-09-02 (the rail pans at every width);
   kept so a flow swap in home.js would still have a layout. */
.act-rail[data-sc-act="flow"] { padding: clamp(2rem, 6vh, 4rem) 0 var(--sc-section); }
.act-rail[data-sc-act="flow"] .rail-stage { position: static; height: auto; overflow: visible; }
.act-rail[data-sc-act="flow"] .rail {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem clamp(1rem, 2.5vw, 2rem);
  width: auto;
  height: auto;
  max-width: var(--sc-maxw);
  margin-inline: auto;
  padding-top: 0;
  transform: none !important;
}
.act-rail[data-sc-act="flow"] .rail__lead,
.act-rail[data-sc-act="flow"] .rail__note { grid-column: 1 / -1; width: auto; justify-content: flex-start; }
.act-rail[data-sc-act="flow"] .obj { width: auto; }
.act-rail[data-sc-act="flow"] .rail__note { padding-top: 0.5rem; }

/* Staggered settle: items arrive in sequence as the rail is pulled. The
   first item is exempt (a pan act needs its opening content present). */
@media (prefers-reduced-motion: no-preference) {
  .act-rail[data-sc-act="pan"] .obj {
    --t: clamp(0, calc((var(--sc-p, 0) * 3.2 - (var(--i) - 1) * 0.55)), 1);
    opacity: calc(0.55 + var(--t) * 0.45);
  }
}

/* ── Act 4: the record (peak) ───────────────────── */
.record { background: #0a0a0a; }
.record__plane {
  position: absolute;
  inset: -7vh 0;
  z-index: 1;
  pointer-events: none;
}
.record__plane img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 28% 50%;
}
.record__plane--subject { z-index: 2; }
.record__floor {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 26%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, color-mix(in oklab, var(--sc-canvas) 70%, transparent) 55%, var(--sc-canvas) 100%);
}
/* A column of density under the copy, so the photograph keeps its contrast
   on the left where he is. Sibling of the copy, never a child. */
.record__column {
  position: absolute; inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to right,
    transparent 36%,
    color-mix(in oklab, #0a0a0a 62%, transparent) 50%,
    color-mix(in oklab, #0a0a0a 90%, transparent) 62%,
    #0a0a0a 100%);
}
.record__copy {
  position: absolute;
  z-index: var(--sc-z-copy);
  right: var(--sc-gutter);
  bottom: clamp(3rem, 8vh, 6rem);
  width: min(46vw, 40rem);
}
.bio { max-width: 40rem; }
.bio__name {
  font-family: var(--sc-font-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 4.4vw, 4.2rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 1.1rem;
}
.bio__line {
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  line-height: 1.55;
  color: var(--sc-ink);
  max-width: 52ch;
  text-wrap: pretty;
  margin: 0 0 0.85rem;
}
.bio .label { margin-bottom: 1.1rem; }
.bio .textlink { margin-top: 0.4rem; }

.record__copy { --print-start: 0.04; --print-step: 0.06; }

.totals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 1.8rem 0 0;
}
.totals__item {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  --s: calc(0.5 + var(--i) * 0.05);
  --t: clamp(0, calc((var(--sc-p, 0) - var(--s)) / 0.05), 1);
  opacity: var(--t);
  transform: translate3d(0, calc((1 - var(--t)) * 8px), 0);
}
.totals dt {
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--home-muted);
  margin: 0 0 0.3rem;
}
.totals dd {
  margin: 0;
  font-family: var(--sc-font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 3.2vw, 3.2rem);
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* ── Act 5: the plate ───────────────────────────── */
.act-close { padding-top: clamp(3rem, 8vh, 6rem); }
.close { padding-bottom: var(--sc-section); }
.close__form { width: min(100%, 560px); margin-inline: auto; }
.close__form .label { margin-bottom: 0.4rem; text-align: center; }
.close__form .contact-form { max-width: none; }
.close__form .contact-form button { display: block; margin-inline: auto; }
.close__form .mailto-fallback { text-align: center; }
.close__form .contact-form label:first-of-type { margin-top: 0.8rem; }
.close__form .contact-form input,
.close__form .contact-form textarea { background: color-mix(in oklab, var(--sc-ink) 5%, transparent); border-color: var(--sc-hairline-strong); }
.close__form .contact-form input:focus,
.close__form .contact-form textarea:focus { border-color: var(--sc-ink-soft); }
.close__form .contact-form button { transition: opacity var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out); }
.close__form .contact-form button:active { transform: scale(0.97); }
.act-close .site-footer { margin-top: 0; padding-bottom: 10rem; }  /* room for the fixed index */

/* ── Reduced motion: the sheet is simply there ──── */
@media (prefers-reduced-motion: reduce) {
  .print__row, .totals__item { opacity: 1; transform: none; }
  .room__name { opacity: 0.92; }
}

/* ── Tablet and below ───────────────────────────── */
@media (max-width: 1100px) {
  .room__object { width: min(40vw, 460px); }
  .record__copy { width: min(56vw, 40rem); }
  .record__column { background: linear-gradient(to right, transparent 22%, color-mix(in oklab, #0a0a0a 62%, transparent) 38%, color-mix(in oklab, #0a0a0a 90%, transparent) 52%, #0a0a0a 100%); }
}

/* ── Phone: its own design, not a resize ────────── */
@media (max-width: 860px) {
  body.home { --home-header-h: 4rem; }
  /* Two-row phone header (main.css, 740px and under). */
  @media (max-width: 740px) { body.home { --home-header-h: 5.8rem; } }

  .tc__read--bar { display: none; }
  .tc .tc__read--float {
    display: flex;
    font-size: 0.6rem;
    padding: 0.35rem 0.6rem;
    border-radius: var(--sc-r-pill);
    background: color-mix(in oklab, var(--sc-canvas) 82%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: var(--sc-e1), var(--sc-edge);
  }
  .tc { max-width: none; }
  .tc__log { display: none; }

  /* Act 1: name up top, him in the middle, the object across the bottom. Both
     planes ride higher so his face sits between the name and the trailer. */
  .room__plane { top: -10vh; bottom: -6vh; }
  .room__plane img { object-position: 42% 40%; }
  .room__name {
    top: calc(var(--home-header-h) + 3vh);
    font-size: clamp(3.4rem, 19vw, 5.6rem);
  }
  .room__floor { height: 55%; }
  .room__scrim { display: none; }
  .room__object {
    width: auto;
    inset-inline: var(--sc-gutter);
    top: auto;
    bottom: clamp(2.6rem, 7vh, 4rem);
    transform: none;
  }
  /* The trailer's width comes from the viewport height too, not width alone:
     in a wide, short window (an iPad, a narrow desktop window just under the
     breakpoint) 84% grew tall enough to climb over his face. The block's top
     now stays below roughly 52% of the stage, under his chin. Ordinary
     phones are unaffected since 84% is still the smaller value there. */
  .room__object .room__video {
    margin-bottom: 0.9rem;
    width: clamp(17rem, calc((48svh - 12.4rem) * 16 / 9), 84%);
  }
  .room__object .object-label__title { font-size: 1.5rem; }
  .room__object .object-label__line { font-size: 0.82rem; }

  .reel__copy { top: calc(var(--home-header-h) + 2vh); }
  /* Fill the stage so its tail is not empty on the way out. No 640px cap
     here: on a tall phone the cap left a dead band under the player before
     the projects slid up. The player scrolls its own list, so it uses
     whatever height it is given. */
  .reel__frame iframe { height: calc(100svh - var(--home-header-h) - 2vh - 8rem); }
  .act-rail[data-sc-act="flow"] { padding: 2rem 0 3rem; }
  /* Fill the stage. A 16rem poster left the bottom ~40% of the pinned act
     empty on a portrait phone, so the rail read as a huge gap before the bio.
     Posters now size from the viewport height (2:3, capped by width) and the
     rail centers whatever is left over instead of piling it at the bottom. */
  .rail {
    padding-top: calc(var(--home-header-h) + 2vh);
    padding-bottom: 2vh;
    gap: 1.25rem;
    align-items: center;
  }
  /* The lead rides at the top beside the centered posters, as on desktop, so
     the act shows text right at its top edge as it slides in. */
  .rail__lead { width: min(78vw, 22rem); padding-top: 0.5rem; align-self: flex-start; }
  .obj { width: clamp(9rem, calc((100svh - var(--home-header-h) - 12rem) * 2 / 3), 88vw); }
  .obj .object-label__title { font-size: 1rem; }
  .obj .object-label__line { font-size: 0.78rem; }
  .rail__note { width: min(50vw, 12rem); }

  .act-rail[data-sc-act="flow"] .rail { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }
  /* Five posters plus the Work plate fill six cells; no empty trailing cell. */
  .act-rail[data-sc-act="flow"] .rail__note { grid-column: auto; align-self: start; align-items: flex-start; padding-top: 0.25rem; }

  /* Act 4: photo up top, the sheet across the bottom on a band. */
  .record__plane img { object-position: 24% 30%; }
  .record__column {
    background: linear-gradient(to top,
      #0a0a0a 0%, #0a0a0a 44%,
      color-mix(in oklab, #0a0a0a 84%, transparent) 60%,
      color-mix(in oklab, #0a0a0a 30%, transparent) 76%,
      transparent 90%);
  }
  .record__floor { display: none; }
  .record__copy {
    top: auto;
    bottom: clamp(3.2rem, 8vh, 5rem);
    transform: none;
    inset-inline: var(--sc-gutter);
    width: auto;
  }
  .bio__name { font-size: 2.4rem; margin-bottom: 0.7rem; }
  .bio__line { font-size: 0.88rem; line-height: 1.45; margin-bottom: 0.55rem; }
  .totals { gap: 0.75rem; margin-top: 1.2rem; }
  .totals dd { font-size: 1.6rem; }
  .totals dt { font-size: 0.52rem; letter-spacing: 0.14em; }

  /* The footer leaves room for the floating readout. */
  .act-close .site-footer { padding-bottom: 4.5rem; }
}

/* Wider phone windows (and small tablets in portrait) put the trailer block
   higher up the stage, so the planes ride higher there to keep his face clear. */
@media (max-width: 860px) and (min-aspect-ratio: 1/2) {
  .room__plane { top: -16vh; bottom: 0; }
}

/* Tablet portrait (iPad and a narrow desktop window just under the phone
   breakpoint). The phone name cap of 5.6rem reads small at this width, and
   the phone crop leaves his face left of center. Jonas asked for both,
   2026-09-02. */
@media (min-width: 600px) and (max-width: 860px) {
  /* Much bigger than the phone cap (Jonas, 2026-09-02): the name spans about
     nine tenths of the width, so "FRIEDMAN" reads past both sides of his head
     instead of ending behind it. */
  .room__name { font-size: clamp(5.6rem, 22vw, 12rem); }
  .room__plane img { object-position: 31% 40%; }
}

@media (max-width: 600px) {
  .room__object .object-label__line { font-size: 0.72rem; }
  .act-rail[data-sc-act="flow"] .obj .object-label__title { font-size: 0.8rem; }
  .act-rail[data-sc-act="flow"] .obj .object-label__line { font-size: 0.66rem; }
}

/* A local poster avoids loading YouTube scripts during the first paint. */
.video-preview { display:block; position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:var(--sc-r-sm); box-shadow:var(--sc-e3); background:#111; }
.video-preview img { width:100%; height:100%; object-fit:cover; }
.video-preview__play { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:64px; height:46px; border-radius:12px; background:#f00; color:white; font-size:23px; }
.video-preview:hover .video-preview__play { background:#cf0000; }
.video-preview:focus-visible { outline:3px solid #d4b779; outline-offset:5px; }