/* =====================================================================================================================
   Our work (/our-work/), page-only styles. Owned by the gallery builder.
   The studio slideshow hero, the 50/50 you drag, the gallery (filters + grid) and the lightbox.
   ===================================================================================================================== */

/* ---------- hero: the studio cars one after another; the strips flicker on over each new car ---------- */
.ow-hero { position: relative; isolation: isolate; min-height: max(640px, 100svh); display: grid; align-items: end; overflow: hidden;
  padding: calc(var(--hdr-h) + 72px) var(--pad) clamp(110px, 11vw, 160px); background: var(--bg); }
.ow-hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--bg); }
.ow-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 55%; opacity: 0; }
.ow-hero-media img.is-on { opacity: 1; }
.ow-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 70% at 10% 95%, rgba(4, 5, 6, 0.9), transparent 70%),
    linear-gradient(180deg, rgba(4, 5, 6, 0.72) 0%, rgba(4, 5, 6, 0.1) 30%, rgba(4, 5, 6, 0.24) 60%, var(--bg) 100%); }
.ow-hero::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16) 30%, rgba(255, 255, 255, 0.16) 70%, transparent); }
.ow-hero-in { display: grid; gap: 26px; justify-items: start; }
.ow-hero .mega { max-width: 13ch; text-shadow: 0 10px 60px rgba(0, 0, 0, 0.55); }
.ow-hero .lead { color: rgba(243, 245, 247, 0.84); }
/* counter, the LED progress bar, pause */
.ow-hero-meta { position: absolute; z-index: 2; right: var(--pad); bottom: clamp(30px, 3.6vw, 52px); display: flex; align-items: center; gap: 16px;
  font: 500 12.5px/1 var(--mono); letter-spacing: 0.04em; color: var(--dim); }
.ow-hero-count b { font-weight: 500; color: var(--ink); }
.ow-hero-bar { position: relative; width: clamp(80px, 9vw, 140px); height: 2px; border-radius: 2px; background: var(--faint); overflow: hidden; }
.ow-hero-bar i { position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.7), #fff 70%, var(--ice-hi)); box-shadow: var(--led);
  transform-origin: 0 50%; transform: scaleX(0); }
.ow-hero-pause { position: relative; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; color: var(--ink);
  background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background 0.25s, color 0.25s, box-shadow 0.25s; }
.ow-hero-pause:hover { background: var(--ice); color: var(--ice-ink); box-shadow: 0 0 22px var(--ice-glow); }
.ow-hero-pause i { width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.ow-hero-pause[aria-pressed="true"] i { width: 11px; height: 12px; margin-left: 3px; border: 0; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
html.no-motion .ow-hero-meta { display: none; }

/* the two section heads: each beat on one line beside its lead */
@media (min-width: 901px) {
  .ow-fifty .head.row, .ow-gal .head.row { grid-template-columns: fit-content(66%) minmax(0, 1fr); }
  .ow-fifty .display, .ow-gal .display { font-size: clamp(40px, 5.2vw, 80px); }
}

/* ---------- the 50/50: same car, same light; drag the line ---------- */
.ow-fifty .head { margin-bottom: clamp(36px, 4.4vw, 68px); }
.fifty { --p: 50%; position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 16 / 8; border-radius: var(--r-lg); background: var(--char); cursor: ew-resize;
  box-shadow: inset 0 0 0 1px var(--line), 0 50px 120px rgba(0, 0, 0, 0.6); touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.fifty img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%; pointer-events: none; -webkit-user-drag: none; }
.fifty-clean { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--p)); }
/* the edge of the wash: a little shade on the dirty side, fresh light on the clean side */
.fifty-sheen { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent calc(var(--p) - 9%), rgba(4, 5, 6, 0.3) var(--p), rgba(214, 249, 255, 0.13) var(--p), rgba(214, 249, 255, 0.04) calc(var(--p) + 5%), transparent calc(var(--p) + 15%)); }
.fifty::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(4, 5, 6, 0.42), transparent 26%, transparent 70%, rgba(4, 5, 6, 0.55)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.fifty-glints { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.fifty-glints i { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; opacity: 0;
  background:
    radial-gradient(circle, #fff 0 1.6px, rgba(214, 249, 255, 0.5) 2.4px, transparent 4px),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95) 50%, transparent) 50% 50% / 100% 1.4px no-repeat,
    linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.95) 50%, transparent) 50% 50% / 1.4px 100% no-repeat;
  filter: drop-shadow(0 0 5px rgba(139, 233, 255, 0.9)); }
.fifty-line { position: absolute; z-index: 4; top: 0; bottom: 0; left: var(--p); width: 64px; margin-left: -32px; display: grid; place-items: center; cursor: ew-resize; outline: none; }
.fifty-line::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #fff;
  box-shadow: 0 0 8px 1px rgba(255, 255, 255, 0.9), 0 0 34px 6px rgba(139, 233, 255, 0.55); }
.fifty-knob { position: relative; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: rgba(4, 5, 6, 0.42); box-shadow: inset 0 0 0 1.5px #fff, 0 0 30px rgba(139, 233, 255, 0.5), 0 10px 30px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform 0.45s var(--spring), box-shadow 0.3s, background 0.3s; }
.fifty-knob i { width: 26px; height: 26px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.fifty-knob::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--ice); opacity: 0; pointer-events: none; }
.fifty.hint .fifty-knob::after { animation: fifty-ring 1.9s var(--ease) infinite; }
@keyframes fifty-ring { 0% { transform: scale(1); opacity: 0.95; } 100% { transform: scale(1.75); opacity: 0; } }
@media (hover: hover) { .fifty:hover .fifty-knob { background: rgba(10, 58, 70, 0.55); } }
.fifty.is-drag .fifty-knob { transform: scale(1.12); background: rgba(10, 58, 70, 0.6); }
.fifty-line:focus-visible .fifty-knob { box-shadow: inset 0 0 0 2px var(--ice), 0 0 0 5px rgba(139, 233, 255, 0.28), 0 0 34px var(--ice-glow); }
.fifty .caption { z-index: 3; top: 16px; bottom: auto; }
.fifty .fifty-after { left: auto; right: 16px; }
.fifty .fifty-after i { width: 7px; height: 7px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 10px var(--ice); }
/* the read-out rides the line: Dirty 50 | 50 Clean, lit when it's exactly half and half */
.fifty-read { position: absolute; z-index: 3; bottom: 18px; left: clamp(118px, var(--p), calc(100% - 118px)); transform: translateX(-50%); display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-radius: 999px; white-space: nowrap; font: 500 12px/1 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--dim);
  background: rgba(4, 5, 6, 0.6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background 0.35s, color 0.35s, box-shadow 0.35s; }
.fifty-read b { display: inline-block; min-width: 2.2ch; text-align: center; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; transition: color 0.35s; }
.fifty-read i { width: 1px; height: 14px; background: var(--faint); }
.fifty-read.is-even { color: var(--ice-ink); background: var(--ice); box-shadow: 0 0 0 1px var(--ice), 0 0 30px var(--ice-glow); }
.fifty-read.is-even b { color: var(--ice-ink); }
.fifty-read.is-even i { background: rgba(3, 22, 27, 0.3); }
.fifty-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 22px; }

/* ---------- gallery ---------- */
.ow-gal .head { margin-bottom: clamp(32px, 3.6vw, 56px); }
.g-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-bottom: clamp(24px, 2.6vw, 38px); }
.g-filters .chip small { margin-left: 1px; font: 500 11.5px/1 var(--mono); }
.g-filters .chip[aria-pressed="true"] small { opacity: 0.75; }
.g-note { display: flex; align-items: baseline; gap: 10px; max-width: 34em; font: 500 12.5px/1.55 var(--mono); color: var(--mute); }
.g-note i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 10px var(--ice); transform: translateY(-1px); }
.g-grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(170px, 18.4vw, 290px); grid-auto-flow: row dense; gap: clamp(10px, 1.05vw, 16px); }
.g-item { position: relative; min-width: 0; }
.g-item[hidden] { display: none; }
.g-b { grid-column: span 2; grid-row: span 2; }
.g-t { grid-row: span 2; }
.g-w { grid-column: span 2; }
.g-btn { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; overflow: hidden; isolation: isolate; cursor: zoom-in; color: var(--ink);
  border-radius: clamp(14px, 1.3vw, 20px); background: var(--char); box-shadow: inset 0 0 0 1px var(--line), 0 24px 50px rgba(0, 0, 0, 0.4); }
.g-btn > img, .g-btn > video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter 0.6s; }
/* shade for the caption, and a gloss edge where the light catches the glass */
.g-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.35; transition: opacity 0.45s;
  background: linear-gradient(to top, rgba(4, 5, 6, 0.9) 0%, rgba(4, 5, 6, 0.35) 34%, transparent 62%), linear-gradient(160deg, rgba(255, 255, 255, 0.08), transparent 26%); }
/* hover: an LED strip glides across the photo */
.g-btn::after { content: ""; position: absolute; z-index: 1; top: -20%; bottom: -20%; left: -40%; width: 3px; pointer-events: none; opacity: 0; background: #fff;
  box-shadow: 0 0 10px 1px rgba(255, 255, 255, 0.85), 0 0 40px 8px rgba(139, 233, 255, 0.35); transform: skewX(-12deg); }
@media (hover: hover) {
  .g-btn:hover > img, .g-btn:hover > video { transform: scale(1.06); }
  .g-btn:hover::before, .g-btn:focus-visible::before { opacity: 1; }
  .g-btn:hover::after { opacity: 0.9; left: 140%; transition: left 1.1s var(--ease-io), opacity 0.2s; }
}
.g-btn:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
.g-cap { position: absolute; z-index: 2; left: clamp(14px, 1.3vw, 20px); right: 14px; bottom: clamp(12px, 1.2vw, 18px); display: grid; gap: 6px; justify-items: start; text-align: left;
  opacity: 0; transform: translateY(10px); transition: opacity 0.35s, transform 0.55s var(--ease); }
.g-cap small { font: 500 11.5px/1.2 var(--mono); letter-spacing: 0.04em; color: var(--ice); }
.g-cap b { font: 800 clamp(15px, 1.1vw, 19px)/1.08 var(--display); font-stretch: 118%; letter-spacing: 0.005em; text-transform: uppercase; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6); }
.is-gold .g-cap small { color: var(--gold); }
.g-btn:hover .g-cap, .g-btn:focus-visible .g-cap { opacity: 1; transform: none; }
/* every tile says what it is, at every width: "In the studio" (ice light; a play mark on a clip) or "Stand-in" (an
   unlit ring), so a stock photo never passes for the studio's own work */
.g-tag { position: absolute; z-index: 2; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 7px; max-width: calc(100% - 24px); padding: 7px 11px 7px 9px; border-radius: 999px;
  font: 500 11.5px/1 var(--mono); letter-spacing: 0.03em; white-space: nowrap; color: var(--ink); background: rgba(4, 5, 6, 0.6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.g-tag i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 8px var(--ice); }
.g-tag.is-clip i { width: 8px; height: 9px; border-radius: 0; box-shadow: none; clip-path: polygon(0 0, 100% 50%, 0 100%); filter: drop-shadow(0 0 4px var(--ice)); }
.is-gold .g-tag i { background: var(--gold); box-shadow: 0 0 8px rgba(255, 181, 90, 0.8); }
.is-gold .g-tag.is-clip i { box-shadow: none; filter: drop-shadow(0 0 4px var(--gold)); }
.g-tag.is-stand { color: var(--dim); }
.g-tag.is-stand i { background: transparent; box-shadow: inset 0 0 0 1.3px currentColor; }
/* warm stand-ins (a wood dash, beige carpet) are graded towards black and white, so they sit in the black/ice grid */
.is-graded .g-btn > img, .lb-fig.is-graded img, .lb-thumbs button.is-graded img { filter: grayscale(0.85) brightness(0.86) contrast(1.08); }
.g-slot { margin-top: clamp(14px, 1.6vw, 22px); min-height: 180px; }
.g-slot b { max-width: none; }
/* touch screens have no hover: the big tiles keep a small caption */
@media (hover: none) {
  .g-b .g-cap, .g-w .g-cap { opacity: 1; transform: none; }
  .g-b .g-btn::before, .g-w .g-btn::before { opacity: 0.8; }
}

/* ---------- lightbox ---------- */
html.lb-open { overflow: hidden !important; scrollbar-gutter: stable; }
.lb { position: fixed; inset: 0; z-index: 200; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; color: var(--ink); background: transparent;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; }
.lb[open] { display: grid; }
.lb::backdrop { background: transparent; }
.lb:focus { outline: none; }
.lb-bg { position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(80% 46% at 50% 0%, rgba(206, 236, 255, 0.08), transparent 70%), radial-gradient(60% 30% at 50% 100%, rgba(139, 233, 255, 0.05), transparent 70%), rgba(4, 5, 6, 0.95);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
/* the ceiling strip at the top of the viewer */
.lb-bg::before { content: ""; position: absolute; top: 0; left: 50%; width: min(1100px, 90%); height: 2px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7) 20%, #fff 50%, rgba(255, 255, 255, 0.7) 80%, transparent); box-shadow: 0 0 12px rgba(190, 240, 255, 0.6); opacity: 0.7; }
.lb-top { display: flex; align-items: center; gap: 16px; padding: 14px var(--pad) 10px; min-height: 76px; }
.lb-count { font: 500 13px/1 var(--mono); letter-spacing: 0.06em; color: var(--dim); }
.lb-count b { font-weight: 500; color: var(--ink); }
.lb-hint { margin-left: auto; display: flex; align-items: center; gap: 6px; font: 500 12px/1 var(--mono); color: var(--mute); }
.lb-btn { position: relative; flex: none; width: 52px; height: 52px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; color: var(--ink);
  background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: background 0.25s, color 0.25s, box-shadow 0.25s, transform 0.3s var(--spring); }
@media (hover: hover) { .lb-btn:hover { background: var(--ice); color: var(--ice-ink); box-shadow: 0 0 26px var(--ice-glow); } }
.lb-btn:active { transform: scale(0.92); }
.lb-close { margin-left: 18px; }
.lb-close i { position: relative; width: 18px; height: 18px; }
.lb-close i::before, .lb-close i::after { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1.6px; margin-top: -0.8px; border-radius: 2px; background: currentColor; transform: rotate(45deg); }
.lb-close i::after { transform: rotate(-45deg); }
.lb-prev, .lb-next { position: absolute; z-index: 3; top: 50%; margin-top: -26px; }
.lb-prev { left: var(--pad); }
.lb-next { right: var(--pad); }
.lb-prev i, .lb-next i { width: 18px; height: 13px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 12'%3E%3Cpath d='M1 6h14M10.5 1.2 15.4 6l-4.9 4.8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 12'%3E%3Cpath d='M1 6h14M10.5 1.2 15.4 6l-4.9 4.8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.lb-prev i { transform: scaleX(-1); }
.lb-stage { position: relative; margin: 0 calc(var(--pad) + 74px); touch-action: none; cursor: grab; }
.lb-stage:active { cursor: grabbing; }
.lb-slide { position: absolute; inset: 0; display: grid; place-items: center; }
.lb-fig { position: relative; overflow: hidden; border-radius: 10px; background: var(--char); box-shadow: 0 40px 110px rgba(0, 0, 0, 0.75), inset 0 0 0 1px var(--line); will-change: transform; }
.lb-fig img, .lb-fig video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.lb-fig .hi { opacity: 0; transition: opacity 0.45s; }
.lb-fig .hi.is-in { opacity: 1; }
.lb-fig::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(165deg, rgba(255, 255, 255, 0.07), transparent 24%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.lb-beam { position: absolute; z-index: 4; top: -3%; bottom: -3%; left: 0; width: 3px; margin-left: -1.5px; border-radius: 3px; pointer-events: none; opacity: 0; background: #fff;
  box-shadow: 0 0 12px 2px rgba(255, 255, 255, 0.9), 0 0 48px 10px rgba(139, 233, 255, 0.45); }
.lb-foot { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 20px var(--pad) 6px; min-height: 104px; }
.lb-cap { display: grid; gap: 7px; max-width: 48em; }
.lb-src { font: 500 12px/1.3 var(--mono); letter-spacing: 0.05em; color: var(--ice); }
.lb-src.is-gold { color: var(--gold); }
.lb-title { font-size: clamp(22px, 2.3vw, 36px); line-height: 0.98; }
.lb-line { color: var(--dim); font-size: 16.5px; line-height: 1.45; }
.lb-thumbs { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior: contain; padding: 14px var(--pad) calc(18px + env(safe-area-inset-bottom)); scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--pad), #000 calc(100% - var(--pad)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--pad), #000 calc(100% - var(--pad)), transparent); }
.lb-thumbs::-webkit-scrollbar { display: none; }
.lb-thumbs button { position: relative; flex: none; width: 78px; height: 52px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--char); opacity: 0.42; transition: opacity 0.3s; }
.lb-thumbs button:hover { opacity: 0.8; }
.lb-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.lb-thumbs button::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); transition: box-shadow 0.3s; }
.lb-thumbs button.on { opacity: 1; }
.lb-thumbs button.on::after { box-shadow: inset 0 0 0 2px var(--ice), inset 0 0 14px rgba(139, 233, 255, 0.4); }
.lb-thumbs button.is-video::before { content: ""; position: absolute; z-index: 1; left: 7px; top: 7px; width: 7px; height: 8px; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.lb-pause[hidden] { display: none; }
.lb-pause i { width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.lb-pause[aria-pressed="true"] i { width: 11px; height: 12px; margin-left: 3px; border: 0; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .g-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 24vw, 260px); }
  .lb-stage { margin: 0 calc(var(--pad) + 62px); }
}
@media (max-width: 900px) {
  .fifty { aspect-ratio: 16 / 10; }
}
@media (max-width: 720px) {
  .ow-hero { min-height: max(600px, 100svh); padding-bottom: 104px; }
  .ow-hero-media img { object-position: 54% 55%; }
  .ow-hero-meta { left: var(--pad); right: var(--pad); bottom: 30px; }
  .ow-hero-bar { flex: 1; }
  .fifty { aspect-ratio: 4 / 4.5; margin-inline: calc(var(--pad) * -1); border-radius: 0; box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
  .fifty img { object-position: 47% 62%; }
  .fifty-knob { width: 58px; height: 58px; }
  .fifty-read { bottom: 14px; left: clamp(104px, var(--p), calc(100% - 104px)); padding: 9px 13px; gap: 10px; font-size: 11.5px; }
  .fifty-foot { justify-content: center; }
  .fifty-foot .tag { width: 100%; text-align: center; }
  .g-bar { gap: 14px; }
  .g-filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--pad) * -1); padding: 4px var(--pad); scrollbar-width: none; scroll-padding-inline: var(--pad); }
  .g-filters::-webkit-scrollbar { display: none; }
  .g-filters .chip { flex: none; }
  .g-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 44vw; gap: 8px; }
  .g-btn { border-radius: 14px; }
  .g-cap { left: 12px; bottom: 11px; }
  .g-cap small { font-size: 10.5px; }
  .g-cap b { font-size: 14px; }
  .g-tag { top: 9px; left: 9px; max-width: calc(100% - 18px); padding: 6px 9px 6px 8px; gap: 6px; font-size: 10.5px; }
  .lb-top { min-height: 64px; padding-top: calc(10px + env(safe-area-inset-top)); }
  .lb-hint { display: none; }
  .lb-close { margin-left: auto; }
  .lb-stage { margin: 0; }
  .lb-fig { border-radius: 0; }
  .lb-prev, .lb-next { top: auto; bottom: calc(22px + env(safe-area-inset-bottom)); margin: 0; width: 50px; height: 50px; }
  .lb-prev { left: auto; right: calc(var(--pad) + 58px); }
  .lb-foot { padding: 18px calc(var(--pad) + 128px) calc(24px + env(safe-area-inset-bottom)) var(--pad); min-height: 120px; align-items: flex-start; }
  .lb-pause { position: absolute; right: var(--pad); top: -64px; }
  .lb-title { font-size: 22px; }
  .lb-line { font-size: 15.5px; }
  .lb-thumbs { display: none; }
}
@media (hover: none) { .lb-hint { display: none; } }
.ow-touch { display: none; }
@media (hover: none) { .ow-fine { display: none; } .ow-touch { display: inline; } }
.g-slot b { text-wrap: balance; }