/* T4 · Bewijs: /ons-werk/ (src/pagina/onswerk.mjs). stroming.css is loaded first and carries the tokens, the worlds, the header, the
   buttons, the form panel, the callback sheet and the footer; this file holds only what this page has of its own. No WebGL off the home
   page (011 §1 rule 3): the chapters' films stand on the body's graphite. */

/* the two still planes of the ground's fallback, so the world under the header is the home page's (grond.css) */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(104deg, transparent 64%, color-mix(in srgb, var(--w2) 22%, transparent) 64.15%, transparent 96%),
    linear-gradient(116deg, transparent 38%, color-mix(in srgb, var(--w3) 14%, transparent) 38.15%, transparent 78%);
}
main, .voet { position: relative; z-index: 1; }

/* ======================= the page head: T1's (t1.css), with the index where T1 has its facts ======================= */
.f-kop { padding: var(--pagina-top) 0 var(--sec-y); }
.f-kop-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 0 var(--kolom-gap); align-items: start; }
.f-kop-boven > .sec-label { grid-column: 1 / -1; }
.f-kop-boven > .f-h1 { grid-column: 1; grid-row: 2; align-self: center; }
.f-kop-boven > .sub { grid-column: 1; grid-row: 3; }
.f-kop-boven > .ow-index { grid-column: 2; grid-row: 2 / span 2; align-self: end; }
.f-h1 { margin: 0; font-size: var(--t-pagina); font-weight: 650; line-height: .96; letter-spacing: -.032em; }
.f-h1 span { display: block; }
.f-h1 span + span { color: rgba(255, 255, 255, .5); }
.f-h1 em { font-style: normal; color: var(--rood); }
.f-kop .sub { max-width: 30em; }
/* the six clients: a row each, the number, the name, the trade, an arrow that points down the page */
.ow-index ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lijn); }
.ow-index a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 16px; align-items: baseline; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--lijn); color: var(--fg); text-decoration: none; }
.ow-index a::after { content: ''; align-self: center; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--pijl) center / contain no-repeat; mask: var(--pijl) center / contain no-repeat; rotate: 90deg; opacity: .5; transition: translate .4s var(--e-uit), opacity .4s; }
.ow-index b { font-size: var(--t-label); font-weight: 500; letter-spacing: .08em; color: var(--fg2); transition: color .3s; }
.ow-index span { font-size: var(--t-sub); font-weight: 600; letter-spacing: -.01em; transition: translate .4s var(--e-uit); }
.ow-index small { font-size: var(--t-meta); color: var(--fg2); }
.ow-index a:hover b, .ow-index a:focus-visible b { color: var(--rood); }
.ow-index a:hover span, .ow-index a:focus-visible span { translate: 6px 0; }
.ow-index a:hover::after, .ow-index a:focus-visible::after { translate: 0 4px; opacity: 1; }

/* ======================= the chapters ======================= */
.ow { position: relative; }
/* one chapter: the stage sticks for the chapter's whole height, and the name and the plate scroll up over it */
.hw { position: relative; isolation: isolate; }
.hw-scherm { position: sticky; top: 0; z-index: 0; height: 100vh; height: 100svh; overflow: hidden; }
/* the mount: the home page's white print (05-werk.css), 5 px of white at radius 24 outside and 20 inside. On the stage it is two clips,
   the white one 5 px outside the window's, and core/t4.js opens both to the screen's edges while the chapter rises */
.hw-ring { position: absolute; inset: 0; background: #fff; clip-path: inset(calc(15vh - 5px) calc(22vw - 5px) round 24px); }
.hw-raam { position: absolute; inset: 0; overflow: hidden; background: #1E2125; clip-path: inset(15vh 22vw round 20px); }
/* the film scales down from 114 % while the mount opens, and drifts inside its window while the chapter passes (werk's parallax): it is
   16 % taller than the window, so the drift of 6 % either way never shows the window's own ground */
.hw-film { position: absolute; inset: 0; transform: scale(1.14); will-change: transform; }
.hw-film video { position: absolute; left: 0; right: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; will-change: transform; }
.hw-waas { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, .08) 26%, rgba(0, 0, 0, .12) 50%, rgba(0, 0, 0, .74) 100%), linear-gradient(90deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 55%); }
.hw-donker { position: absolute; inset: 0; background: #0E0F11; opacity: 0; }
/* the readout: REC and the clip's own timecode, which client of the six, and the credit. It comes up once the mount has opened */
.hw-ui { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; }
.hw-ui p { position: absolute; top: clamp(92px, 13vh, 132px); margin: 0; display: flex; align-items: center; gap: 10px; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .55); }
.hw-rec { left: var(--rand); }
.hw-rec i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.hw-rec b { font-weight: 500; color: rgba(255, 255, 255, .72); }
.hw-ui.is-rec .hw-rec i { background: var(--rood); animation: hw-knip 1.1s steps(1, end) infinite; }
@keyframes hw-knip { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .15; } }
.hw-stand { left: 50%; translate: -50% 0; gap: 14px !important; }
.hw-stand b { font-weight: 500; color: var(--rood); }
.hw-seg { display: flex; gap: 4px; }
.hw-seg i { position: relative; width: 22px; height: 2px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .28); }
.hw-seg b { position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: 0 50%; }
.hw-seg .is-vol b { transform: none; }
.hw-krediet { right: var(--rand); }
/* a client without footage: the graphite field in the viewfinder's four corners, and the day the crew comes still to be set */
.hw-raam.is-leeg { background: #1E2125 linear-gradient(104deg, transparent 60%, rgba(255, 255, 255, .05) 60.15%, transparent 96%); }
.hw-zoeker { position: absolute; inset: 22% 16%; opacity: .5;
  background:
    linear-gradient(#fff, #fff) 0 0 / 34px 1.5px, linear-gradient(#fff, #fff) 0 0 / 1.5px 34px,
    linear-gradient(#fff, #fff) 100% 0 / 34px 1.5px, linear-gradient(#fff, #fff) 100% 0 / 1.5px 34px,
    linear-gradient(#fff, #fff) 0 100% / 34px 1.5px, linear-gradient(#fff, #fff) 0 100% / 1.5px 34px,
    linear-gradient(#fff, #fff) 100% 100% / 34px 1.5px, linear-gradient(#fff, #fff) 100% 100% / 1.5px 34px;
  background-repeat: no-repeat; }
.hw-zoeker::before, .hw-zoeker::after { content: ''; position: absolute; left: 50%; top: 50%; background: #fff; }
.hw-zoeker::before { width: 22px; height: 1.5px; margin: -.75px 0 0 -11px; }
.hw-zoeker::after { width: 1.5px; height: 22px; margin: -11px 0 0 -.75px; }
.hw-volgt { position: absolute; left: 0; right: 0; top: calc(50% + 28px); margin: 0; text-align: center; font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
/* the tap to play, on the phone and in the still state (below); the scroll show plays by itself */
.hw-speel { display: none; }

/* his name at the foot of the first screen, over the film; then the plate */
.hw-inhoud { position: relative; z-index: 1; margin-top: -100vh; margin-top: -100svh; }
.hw-kop { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(36px, 8vh, 88px); }
.hw-kicker { margin: 0 0 18px; display: flex; align-items: center; gap: 14px; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .82); text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.hw-kicker span:first-child { color: var(--rood); }
.hw-naam { margin: 0; max-width: 11em; font-size: var(--t-pagina); font-weight: 650; line-height: .96; letter-spacing: -.03em; text-wrap: balance; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.hw-naam em { display: inline-block; font-style: normal; color: var(--rood); }
/* the three facts on a chalk plate at the right, so the name leaves on the left and the film stays in sight beside the plate */
.hw-rij { display: flex; justify-content: flex-end; padding-bottom: 22vh; }
.hw-plaat { --fg: var(--inkt); --fg2: #4f4b46; --lijn: rgba(20, 20, 20, .14); width: min(600px, 46vw); padding: var(--plaat-p); border-radius: var(--r-plaat); background: var(--kalk); color: var(--inkt); box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .6); }
.hw-feiten { margin: 0; }
.hw-feit { padding: 20px 0; border-top: 1px solid var(--lijn); }
.hw-feit:first-child { padding-top: 0; border-top: 0; }
.hw-feit dt { margin: 0 0 8px; font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--fg2); }
.hw-feit dd { margin: 0; font-size: var(--t-sub); line-height: 1.45; }
.hw-feit.is-wij dt { color: var(--rood-tekst); }
.hw-feit.is-wij dd { font-size: var(--t-zin); font-weight: 560; line-height: 1.3; letter-spacing: -.012em; }
.hw-kreeg { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hw-kreeg li { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 13px 6px 11px; border: 1px solid var(--lijn); border-radius: var(--r-knop); font-size: var(--t-meta); font-weight: 500; letter-spacing: 0; line-height: 1.2; }
.hw-kreeg li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--rood); }
.hw-verder { margin: 22px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }

/* ======================= the ending: the quote, the credits, the hand-offs ======================= */
.ow-einde { position: relative; padding: var(--sec-y) 0; }
.ow-einde .kop-mega { max-width: 21em; }
.ow-tag { margin: 12px 0 0; }
[data-tags=uit] .ow-tag { display: none; }
/* the credits, set as a film's: the trade on the left of the axis, the names on the right, centred on the page */
.ow-titels { margin-top: var(--kop-y); padding-top: var(--kop-y); border-top: 1px solid var(--lijn); }
.ow-titels-kop { margin: 0 0 var(--kop-y); text-align: center; font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--fg2); }
.ow-titels dl { margin: 0 auto; max-width: 1000px; display: grid; gap: 34px; }
.ow-titels dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 44px; }
.ow-titels dt { padding-top: .6em; text-align: right; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--fg2); }
.ow-titels dd { margin: 0; display: grid; gap: 6px; font-size: var(--t-zin); font-weight: 560; line-height: 1.25; letter-spacing: -.012em; }
.ow-acties { margin-top: var(--kop-y); justify-content: center; }

/* ======================= slot: the home page's own (stroming.css) ======================= */
.js .terugbel-voet .terugbel { display: none; }
.slot-kop { margin-bottom: var(--kop-y); }
.slot-kop .slot-tbc { margin: 12px 0 0; }
[data-tags=uit] .slot-kop .slot-tbc { display: none; }

/* the phone bar, as the other v4 pages have it */
.s-balk { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(24, 26, 29, .86); backdrop-filter: blur(14px); border-top: 1px solid rgba(255, 255, 255, .22); color: #fff; transform: translateY(110%); transition: transform var(--t-deel) var(--e-uit); }
.s-balk.is-op { transform: none; }
.s-balk-tel { font-weight: 600; font-size: 16px; color: #fff; text-decoration: none; }
.no-js .s-balk { display: none !important; }

/* ======================= the list: the phone tier, reduced motion and no script ======================= */
/* no stage and nothing held: each client is his mount with its poster, then his name and the three facts. With the script a tap on the
   mount plays the take, and a second tap stops it (spec §3, T4) */
html:not(.beweeg) .hw, [data-tier=lite] .hw { padding-top: var(--sec-y); }
html:not(.beweeg) .hw-scherm, [data-tier=lite] .hw-scherm { position: relative; height: auto; overflow: visible; margin-inline: var(--rand); padding: 5px; border-radius: 24px; background: #fff; }
html:not(.beweeg) .hw-ring, [data-tier=lite] .hw-ring { display: none; }
html:not(.beweeg) .hw-raam, [data-tier=lite] .hw-raam { position: relative; inset: auto; aspect-ratio: 16 / 9; border-radius: 20px; clip-path: inset(0 round 20px); }
html:not(.beweeg) .hw-film, [data-tier=lite] .hw-film { transform: none; will-change: auto; }
html:not(.beweeg) .hw-film video, [data-tier=lite] .hw-film video { top: 0; height: 100%; transform: none !important; will-change: auto; }
html:not(.beweeg) .hw-ui, [data-tier=lite] .hw-ui { opacity: 1; }
html:not(.beweeg) .hw-ui p, [data-tier=lite] .hw-ui p { top: 16px; }
html:not(.beweeg) .hw-rec, [data-tier=lite] .hw-rec { left: 18px; }
html:not(.beweeg) .hw-krediet, [data-tier=lite] .hw-krediet { right: 18px; }
html:not(.beweeg) .hw-stand, [data-tier=lite] .hw-stand { display: none !important; }
html:not(.beweeg) .hw-inhoud, [data-tier=lite] .hw-inhoud { margin-top: 0; }
html:not(.beweeg) .hw-kop, [data-tier=lite] .hw-kop { min-height: 0; padding-top: var(--kop-y); padding-bottom: 0; }
html:not(.beweeg) .hw-kicker, html:not(.beweeg) .hw-naam, [data-tier=lite] .hw-kicker, [data-tier=lite] .hw-naam { text-shadow: none; }
html:not(.beweeg) .hw-naam, [data-tier=lite] .hw-naam { font-size: var(--t-kop2); line-height: 1.05; }
html:not(.beweeg) .hw-rij, [data-tier=lite] .hw-rij { display: block; padding-bottom: 0; margin-top: var(--sub-y); }
html:not(.beweeg) .hw-plaat, [data-tier=lite] .hw-plaat { --fg: #fff; --fg2: rgba(255, 255, 255, .72); --lijn: rgba(255, 255, 255, .16); width: auto; max-width: 44em; padding: 0; border-radius: 0; background: none; color: #fff; box-shadow: none; }
html:not(.beweeg) .hw-feit.is-wij dt, [data-tier=lite] .hw-feit.is-wij dt { color: var(--rood); }
html:not(.beweeg) .hw-verder .link, [data-tier=lite] .hw-verder .link { color: #fff; }
/* the tap: the whole window is the button, the disc shows until the take plays and comes back when it stops */
.js:not(.beweeg) .hw-speel, .js[data-tier=lite] .hw-speel { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; }
.hw-schijf { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--inkt); box-shadow: 0 20px 50px -18px rgba(0, 0, 0, .6); transition: opacity .35s, scale .35s var(--e-uit); }
.hw-schijf svg { width: 28px; height: 28px; fill: currentColor; }
.hw-play { margin-left: 3px; }
.hw-pauze { display: none; }
.hw-speel[aria-pressed=true] .hw-schijf { opacity: 0; scale: .8; }
.hw-speel[aria-pressed=true] .hw-play { display: none; }
.hw-speel[aria-pressed=true] .hw-pauze { display: block; }
.hw-speel:focus-visible .hw-schijf { opacity: 1; scale: 1; outline: 2px solid #fff; outline-offset: 4px; }
/* the still state on a wide screen: the mount beside the facts, as a list of six */
@media (min-width: 1101px) {
  html:not(.beweeg) .hw { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); column-gap: var(--kolom-gap); align-items: start; width: 100%; max-width: 1760px; margin-inline: auto; padding-inline: var(--rand); }
  html:not(.beweeg) .hw-scherm { margin-inline: 0; }
  html:not(.beweeg) .hw-inhoud > .rand { padding-inline: 0; }
  html:not(.beweeg) .hw-kop { padding-top: 0; }
}

/* ======================= narrower screens ======================= */
@media (max-width: 1100px) {
  .f-kop-grid { grid-template-columns: minmax(0, 1fr); }
  .f-kop-boven > :is(.f-h1, .sub, .ow-index) { grid-column: auto; grid-row: auto; }
  .f-kop-boven > .ow-index { padding-top: var(--kop-y); }
  .hw-plaat { width: min(560px, 62vw); }
}
@media (max-width: 760px) {
  .f-h1 { font-size: 13.5vw; }
  .ow-index a { grid-template-columns: 30px minmax(0, 1fr) 16px; gap: 4px 12px; padding: 14px 0; }
  .ow-index small { grid-column: 2; grid-row: 2; }
  .ow-index a::after { grid-column: 3; grid-row: 1 / span 2; }
  [data-tier=lite] .hw-raam, html:not(.beweeg) .hw-raam { aspect-ratio: 4 / 5; }
  .hw-ui p { font-size: var(--t-label); }
  html:not(.beweeg) .hw-krediet, [data-tier=lite] .hw-krediet { display: none; }
  .ow-titels dl > div { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ow-titels dt { padding-top: 0; text-align: left; }
  .ow-titels-kop { text-align: left; }
  .ow-acties { flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .s-balk { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .hw-ui.is-rec .hw-rec i { animation: none; }
  .hw-schijf, .ow-index a::after, .ow-index span, .s-balk { transition: none; }
}

/* ======================= /reviews/ (src/pagina/reviews.mjs) ======================= */
/* the head and the roll: one screen on the desktop, the title and the rating on the left, the roll on the right */
.rv-held { position: relative; padding: clamp(104px, 14vh, 140px) 0 var(--sec-y); }
.rv-held-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 0 var(--kolom-gap); }
.rv-links { display: flex; flex-direction: column; }
.rv-h1 { margin: 0; max-width: 9em; font-size: var(--t-kop2); font-weight: 650; line-height: 1; letter-spacing: -.025em; text-wrap: balance; }
.rv-h1 em { font-style: normal; color: var(--rood); }
.rv-score { margin-top: auto; padding-top: var(--kop-y); }
/* the rating: the giant type of the page, its comma red as the full stops are */
.rv-cijfer-masker { margin: 0; overflow: clip; }
.rv-cijfer { display: block; font-size: clamp(150px, min(26vw, 35svh), 500px); font-weight: 650; line-height: 1.08; letter-spacing: -.055em; color: #fff; }
.rv-cijfer em { font-style: normal; color: var(--rood); }
.rv-score-voet { margin-top: clamp(8px, 1.5vh, 16px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
/* five stars, filled to the average: the grey row under a clipped white one */
.rv-sterren { position: relative; margin: 0; display: inline-flex; }
.rv-sterren svg { width: 30px; height: 30px; flex: none; }
.rv-sterren-leeg { display: flex; gap: 4px; fill: rgba(255, 255, 255, .22); }
.rv-sterren-vol { position: absolute; left: 0; top: 0; bottom: 0; width: var(--vol); overflow: hidden; }
.rv-sterren-vol > span { display: flex; gap: 4px; width: max-content; fill: #fff; }
.rv-score-tekst { margin: 0; font-size: var(--t-sub); color: var(--fg2); }
/* all of them on Google, and the clients' work: the two ways out of the head */
.rv-verder { margin: clamp(14px, 2.4vh, 24px) 0 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }

/* the roll: a window with soft edges, the reading line at 40 % of its height, the track that core/t4.js moves up through it */
.rv-rol { display: flex; flex-direction: column; min-width: 0; }
.rv-venster { position: relative; }
.rv-lijn { display: none; }
.rv-lijst { list-style: none; margin: 0; padding: 0; }
.rv-item { margin: 0; }
.rv-review { margin: 0; }
.rv-review p { margin: 0; font-size: var(--t-zin); font-weight: 520; line-height: 1.32; letter-spacing: -.01em; overflow-wrap: anywhere; white-space: pre-line; }
.rv-item.is-kort .rv-review p { font-size: var(--t-kaart); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.rv-item.is-lang .rv-review p { font-size: var(--t-sub); font-weight: 450; line-height: 1.5; letter-spacing: 0; }
.rv-review footer { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.rv-review cite { font-style: normal; text-transform: capitalize; font-size: var(--t-meta); font-weight: 600; }
.rv-review footer .mono { font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--fg2); }
.rv-transport { display: none; }

/* the still state (no script, reduced motion, the still tier): the head, then the list in columns */
html:not(.beweeg) .rv-held-in { grid-template-columns: minmax(0, 1fr); }
html:not(.beweeg) .rv-rol { margin-top: var(--sec-y); }
html:not(.beweeg) .rv-lijst { columns: 3 280px; column-gap: clamp(28px, 3vw, 56px); }
html:not(.beweeg) .rv-item { break-inside: avoid; padding: 0 0 clamp(32px, 4vw, 48px); }

/* the roll, where there is motion */

.beweeg .rv-held-in { grid-template-rows: minmax(0, 1fr); height: calc(100svh - clamp(104px, 14vh, 140px) - clamp(28px, 5vh, 56px)); min-height: 560px; }
.beweeg .rv-venster { flex: 1; min-height: 0; overflow: hidden; padding-left: 64px;
  -webkit-mask: linear-gradient(180deg, transparent, #000 16%, #000 74%, transparent); mask: linear-gradient(180deg, transparent, #000 16%, #000 74%, transparent); }
.beweeg .rv-spoor { position: relative; will-change: transform; }
.beweeg .rv-item { padding: 0 0 clamp(36px, 5.5vh, 60px); opacity: .3; transition: opacity .6s var(--e-uit); }
.beweeg .rv-item.is-nu { opacity: 1; }
/* the reading mark: a red tick in the gutter and the review's number beside it */
.beweeg .rv-lijn { display: flex; align-items: center; gap: 10px; position: absolute; left: 0; top: 40%; z-index: 1; }
.rv-lijn::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: var(--rood); }
.rv-lijn .rv-teller { font-size: var(--t-label); font-weight: 500; letter-spacing: .08em; color: var(--rood); }
.beweeg .rv-transport { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding: 18px 0 0 64px; border-top: 1px solid var(--lijn); }
.rv-knoppen { display: flex; gap: 8px; }
.rv-knop { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%; background: none; color: #fff; cursor: pointer; transition: background-color .3s, border-color .3s, color .3s; }
.rv-knop svg { width: 18px; height: 18px; fill: currentColor; }
.rv-knop:hover { border-color: #fff; background: #fff; color: var(--inkt); }
.rv-knop:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.rv-speel { border-color: var(--rood-knop); background: var(--rood-knop); }
.rv-speel .rv-play { display: none; margin-left: 2px; }
.rv-speel[aria-pressed=false] .rv-play { display: block; }
.rv-speel[aria-pressed=false] .rv-pauze { display: none; }
.rv-stand { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--fg2); }
.rv-stand b { font-weight: 500; color: #fff; }

/* ======================= narrower screens ======================= */
@media (max-width: 900px) {
  .rv-held-in, .beweeg .rv-held-in { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
  .beweeg .rv-held { min-height: 0; }
  .rv-score { margin-top: 0; }
  .rv-cijfer { font-size: 40vw; }
  .rv-rol, html:not(.beweeg) .rv-rol { margin-top: var(--kop-y); }
  .beweeg .rv-venster { flex: none; height: 62svh; padding-left: 30px; }
  .rv-lijn .rv-teller { display: none; }
  .beweeg .rv-transport { padding-left: 0; }
  .rv-sterren svg { width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .rv-item, .rv-knop { transition: none; }
}