/* ═══════════════════════════════════════════════════════════════════
   Reviews — two clips, mounted upright.

   The footage is portrait: filmed on a phone, held the way a phone is
   held. So the card is portrait too. A wide crop of a tall frame throws
   away the half of the picture the person is standing in — the only
   thing taken off here is a strip of the top, which was empty wall.

   That trim is done in CSS, not in the file. The clips are the
   originals and are never re-encoded: a crop baked into the video would
   cost a generation of quality to save a corner of wall, and the
   browser is already holding the pixels either way.

   The framing device is a hairline drawn a few pixels proud of the
   picture on two sides — a drawing mounted on board. Same 1px of --hair
   every other line on the site is drawn with; it separates picture from
   ground the way a shadow would, without introducing the only soft edge
   on the page.
   ═══════════════════════════════════════════════════════════════════ */

.rev{
  padding:clamp(5rem,14vh,9rem) var(--gut);
  position:relative;
}

/* ── the statement ────────────────────────────────────────────────── */
.rev__head{
  max-width:78rem;
  margin:0 auto clamp(3rem,8vh,5rem);
}
.rev__title{
  margin:clamp(1rem,2.5vh,1.5rem) 0 0;
  font-size:var(--fs-major);
  line-height:1.06;
  color:var(--bone);
}
.rev__title em{ font-style:normal; color:var(--bronze-lt) }

/* ── the pair ─────────────────────────────────────────────────────── */
/* Upright cards sit narrow, so two of them leave a lot of page either
   side. Held to a measure that keeps them beside the type above rather
   than adrift in the middle of the width. */
.rev__list{
  list-style:none; margin:0 auto; padding:0;
  max-width:56rem;
  counter-reset:rev;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:clamp(2.5rem,6vw,4.5rem);
}
.rev__item{ counter-increment:rev }

/* ── the card ─────────────────────────────────────────────────────── */
.rev__card{
  display:block;
  width:100%;
  text-align:left;
  cursor:pointer;
  color:inherit;
}
.rev__card:focus-visible{ outline:2px solid var(--bronze-hi); outline-offset:8px }

.rev__frame{
  position:relative;
  display:block;
  /* Upright, and a rectangle rather than the phone's own 9:16 — the
     trim off the top is what makes the difference. */
  aspect-ratio:2 / 3;
  overflow:hidden;
  background:var(--ink);
  /* the board behind, set proud on two sides */
  --mount:clamp(8px,1.1vw,16px);
}
.rev__frame::after{
  content:'';
  position:absolute;
  left:var(--mount); top:var(--mount);
  width:100%; height:100%;
  border:1px solid var(--hair);
  pointer-events:none;
  transition:border-color .4s var(--ease-out), transform .4s var(--ease-out);
}

/* The preview and the poster it starts on are the same element, so both
   are cropped by the one rule and neither can drift from the other. */
.rev__preview{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  /* The line that does the cropping. Bottom-aligned, so everything taken
     is taken off the top and nothing off the feet — which is where the
     empty wall was. */
  object-position:center bottom;
  background:var(--ink);
  transition:transform .7s var(--ease-out);
}

@media (hover:hover) and (pointer:fine){
  /* The board opens away from the picture; the picture itself leans in
     a little. Two speeds on the same gesture read as depth. */
  .rev__card:hover .rev__frame::after{
    border-color:var(--bronze);
    transform:translate(4px,4px);
  }
  /* No scale while it is running: a moving picture that is also being
     scaled is two motions competing, and the second one is the frame
     interfering with the first. The lean is for the still. */
  .rev__card:hover .rev__preview{ transform:scale(1.03) }
  .rev__card.is-previewing:hover .rev__preview{ transform:none }
}

/* ── the play mark ────────────────────────────────────────────────── */
/* Top-left, out of the face. Centred, it lands on whoever is talking in
   every frame of both clips. */
.rev__play{
  position:absolute; left:0; top:0;
  display:inline-flex; align-items:center; gap:.6rem;
  margin:clamp(.75rem,1.6vw,1.1rem);
  padding:.5rem .95rem .5rem .8rem;
  border:1px solid rgba(244,241,236,.45);
  border-radius:999px;
  /* Enough ground to stay legible over any frame it lands on, without
     becoming a solid chip. */
  background:var(--media-scrim);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:var(--on-media);
  font-family:var(--sans);
  font-size:var(--fs-micro); letter-spacing:.2em; text-transform:uppercase;
  transition:border-color .3s var(--ease-out), color .3s var(--ease-out),
             background .3s var(--ease-out);
}
.rev__play svg{ width:11px; height:11px; flex:0 0 auto }
/* Running silently, and saying so. A preview that starts on hover with
   no sound reads as a broken video unless it tells you the sound is one
   click away — which is also the instruction for what to do next. */
.rev__play-t{ transition:opacity .25s var(--ease-out) }
.is-previewing .rev__play{
  border-color:var(--on-media-accent);
  color:var(--on-media-accent);
  background:rgba(14,14,16,.72);
}
@media (hover:hover) and (pointer:fine){
  .rev__card:hover .rev__play{
    border-color:var(--on-media-accent);
    color:var(--on-media-accent);
    background:rgba(14,14,16,.72);
  }
}
.rev__card:active .rev__play{ transform:scale(.97) }

/* ── caption ──────────────────────────────────────────────────────── */
.rev__cap{
  display:flex; align-items:baseline; gap:1rem;
  margin-top:calc(var(--mount,12px) + clamp(.9rem,2.2vh,1.3rem));
  font-family:var(--sans);
  font-size:var(--fs-fine); letter-spacing:.02em;
  color:var(--bone-dim);
}
.rev__n{
  flex:0 0 auto;
  font-family:var(--display);
  font-size:var(--fs-micro); letter-spacing:.18em;
  font-variant-numeric:tabular-nums;
  color:var(--bronze);
}
.rev__n::before{ content:counter(rev,decimal-leading-zero) }

/* ═══ the player ══════════════════════════════════════════════════ */
/* Opened over the page, not in it. The clip keeps its own upright
   shape here — the card on the wall is the cropped one; this is the
   whole picture, the way it was shot. */
.rev__lb{
  position:fixed; inset:0;
  z-index:var(--z-nav);
  display:grid; place-items:center;
  padding:clamp(1rem,4vh,2.5rem);
}
.rev__lb[hidden]{ display:none }

.rev__lb-scrim{
  position:absolute; inset:0;
  /* Strong enough to take the page behind it out of the reading. */
  background:var(--media-veil);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;
  transition:opacity .35s var(--ease-out);
}
.rev__lb-panel{
  position:relative;
  /* Height-led, because the clip is upright: it is the window's height
     that runs out first, not its width. */
  max-height:calc(100svh - clamp(2rem,8vh,5rem));
  max-width:min(92vw,30rem);
  opacity:0;
  transform:scale(.96);
  transition:opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
/* Never from scale 0 — nothing in the world appears out of nothing. */
.rev__lb.is-open .rev__lb-scrim{ opacity:1 }
.rev__lb.is-open .rev__lb-panel{ opacity:1; transform:none }

.rev__lb-video{
  display:block;
  max-height:calc(100svh - clamp(2rem,8vh,5rem));
  max-width:100%;
  width:auto; height:auto;
  background:#000;
}

/* Name over the top edge, the way the reference sets it — over the
   picture rather than beside it, so the frame stays one object. */
.rev__lb-who{
  position:absolute; left:0; top:0; right:0;
  margin:0;
  padding:clamp(.8rem,2vw,1.1rem) clamp(1rem,2.5vw,1.4rem) 2.5rem;
  font-family:var(--sans);
  font-size:var(--fs-fine); letter-spacing:.18em; text-transform:uppercase;
  color:var(--on-media);
  background:linear-gradient(to bottom,rgba(12,12,14,.6),transparent);
  pointer-events:none;   /* must never sit between the finger and the controls */
  z-index:1;
}

.rev__lb-x{
  position:absolute;
  top:0; right:0;
  transform:translate(50%,-50%);
  display:grid; place-items:center;
  width:44px; height:44px;
  border:1px solid rgba(244,241,236,.4);
  border-radius:50%;
  background:rgba(12,12,14,.8);
  cursor:pointer;
  transition:border-color .3s var(--ease-out), transform .3s var(--ease-out);
}
/* the same crossed hairlines the drawer's close is drawn with */
.rev__lb-x > span{ position:relative; display:block; width:14px; height:14px }
.rev__lb-x > span span{
  position:absolute; left:0; top:50%;
  display:block; width:100%; height:1px;
  background:var(--bone);
  transition:background .3s var(--ease-out);
}
.rev__lb-x > span span:first-child{ transform:translateY(-50%) rotate(45deg) }
.rev__lb-x > span span:last-child { transform:translateY(-50%) rotate(-45deg) }
@media (hover:hover) and (pointer:fine){
  .rev__lb-x:hover{ border-color:var(--bronze-hi); transform:translate(50%,-50%) scale(1.06) }
  .rev__lb-x:hover > span span{ background:var(--bronze-hi) }
}
.rev__lb-x:focus-visible{ outline:2px solid var(--bronze-hi); outline-offset:4px }

@media (max-width:520px){
  /* the close needs to be inside the screen, not hanging off the corner */
  .rev__lb-x{ transform:none; top:.5rem; right:.5rem }
  .rev__lb-x:hover{ transform:scale(1.06) }
}

/* ── entrance ─────────────────────────────────────────────────────── */
[data-rev-in]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.rev.is-in [data-rev-in]{ opacity:1; transform:none }
.rev.is-in .rev__item:nth-child(2){ transition-delay:.1s }
.no-js [data-rev-in]{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  [data-rev-in]{ opacity:1; transform:none; transition:none }
  .rev__frame::after, .rev__poster, .rev__lb-panel, .rev__lb-scrim{ transition:none }
  .rev__card:hover .rev__frame::after,
  .rev__card:hover .rev__preview{ transform:none }
  .rev__lb-panel{ transform:none }
}

/* ── narrow ───────────────────────────────────────────────────────── */
@media (max-width:620px){
  /* Two upright cards side by side on a phone are two thin strips. One
     at a time, at a width worth looking at. */
  .rev__list{ grid-template-columns:1fr; max-width:24rem }
  .rev__frame{ --mount:0px }
  .rev__frame::after{ display:none }
}