/* viktoriia.art
   Nude-blush ground, aubergine ink, one ribbon-rose accent (Viktoriia signs her posts with 🎀).
   Every other colour on the page comes from her footage. */

@font-face {
  font-family: "Commissioner";
  src: url(fonts/commissioner-latin.woff2) format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Commissioner";
  src: url(fonts/commissioner-latin-ext.woff2) format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Commissioner";
  src: url(fonts/commissioner-cyrillic.woff2) format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Commissioner has no Georgian: Noto Sans Georgian fills in under the same family name.
   It downloads only when Georgian text is on screen (see .lang-link below). */
@font-face {
  font-family: "Commissioner";
  src: url(fonts/noto-sans-georgian.woff2) format("woff2");
  font-weight: 100 900;
  font-display: swap;
  /* Its letters run larger and wider than Commissioner's at the same size; this evens them
     out (keep GEORGIAN_SIZE_ADJUST in build_html.py in step). */
  size-adjust: 90%;
  unicode-range: U+0589, U+10A0-10FF, U+1C90-1CBA, U+1CBD-1CBF, U+205A, U+2D00-2D2F, U+2E31;
}

:root {
  --ground: #f1e4e0;      /* nude blush */
  --ground-deep: #e8d6d1;
  --ink: #2b1a22;         /* aubergine */
  --ink-soft: #7a5f68;    /* mauve grey, 4.6:1 on ground */
  --line: #dccac5;
  --ribbon: #b42a56;      /* the one accent, 5:1 on ground */
  --screen: #1c1217;      /* player room */
  --screen-ink: #f1e4e0;
  --screen-soft: #b9a3ab;

  --gutter: clamp(16px, 5vw, 72px);
  --measure: 34rem;
  /* Every vertical card is 9:16 at the same width, so rows line up whatever the source ratio. */
  --card-w: clamp(150px, 44vw, 236px);
  --card-h: calc(var(--card-w) * 16 / 9);
  --radius-card: 16px;

  /* Commissioner's flair axis flares the stroke ends, like the Optima-style
     lettering on cosmetics packaging. Text sits at a hint of it; display at full. */
  --flar: 30;
  --volm: 0;
  --display-tracking: -.035em;

  color-scheme: light;
  background: var(--ground);
  color: var(--ink);
  font-family: "Commissioner", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 100%;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Georgian letters are rounder and wider; tight tracking would crowd them. */
:lang(en), :lang(ru) { --display-tracking: -.035em; }
:lang(ka) { --display-tracking: -.01em; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
* { font-variation-settings: "FLAR" var(--flar), "VOLM" var(--volm); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--ground);
  font-size: 1.0625rem;
  font-weight: 400;
}
@media (min-width: 900px) { body { font-size: 1.125rem; } }

h1, h2, h3, p, dl, dd, ol, ul { margin: 0; }
h1, h2, h3 { font-weight: 300; text-wrap: balance; }
p, dd { text-wrap: pretty; }
img, video { max-width: 100%; }
button { font: inherit; color: inherit; }

a { color: inherit; }
:focus-visible { outline: 2px solid var(--ribbon); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--ribbon); color: #fff; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Language switcher ---------- */

.topbar {
  display: flex;
  justify-content: flex-end;
  padding: max(14px, env(safe-area-inset-top, 0px)) var(--gutter) 0;
}

.lang-list {
  position: relative;
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 3px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.lang-link {
  position: relative;
  z-index: 1;
  display: block;
  padding: 5px 13px 6px;
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: .875rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.lang-link:hover { color: var(--ink); }
.lang-link[aria-current="page"] { background: var(--ink); color: var(--ground); }

/* With the script running, the highlight is one pill that slides to the chosen language. */
.lang-pill {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: var(--pill-w, 0px);
  border-radius: 999px;
  background: var(--ink);
  transform: translateX(var(--pill-x, 0px));
  pointer-events: none;
}
.lang-list.has-pill .lang-link[aria-current="page"] { background: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .lang-pill.is-ready {
    transition: transform .34s cubic-bezier(.3, .7, .2, 1), width .34s cubic-bezier(.3, .7, .2, 1);
  }
  .lang-link { transition: color .25s ease; }
}

/* ---------- Translations ----------
   Every translated element holds all three languages, stacked in one grid cell, and only
   the page's language is visible. Each element is as tall as its longest translation, so
   switching language (site.js changes <html lang>) never moves anything, and every text
   starts on the same line in each language (so nothing here is aligned to the end). */
[data-i18n] { display: grid; }
[data-i18n] > .tr-v { grid-area: 1 / 1; min-width: 0; }
:root:lang(en) .tr-v:not(:lang(en)),
:root:lang(ru) .tr-v:not(:lang(ru)),
:root:lang(ka) .tr-v:not(:lang(ka)) { visibility: hidden; opacity: 0; }
/* The old words fade out first and the new ones fade in after, so two languages are never
   on screen together. */
@media (prefers-reduced-motion: no-preference) {
  .tr-v { transition: opacity .16s ease-out .1s, visibility 0s .1s; }
  :root:lang(en) .tr-v:not(:lang(en)),
  :root:lang(ru) .tr-v:not(:lang(ru)),
  :root:lang(ka) .tr-v:not(:lang(ka)) { transition: opacity .1s ease-in, visibility 0s .1s; }
}

/* ---------- Hero ---------- */

.hero {
  display: grid;
  gap: 1.25rem 3rem;
  padding: clamp(18px, 4vh, 44px) var(--gutter) clamp(28px, 5vh, 48px);
}

.hero-name {
  --flar: 100;
  font-weight: 230;
  line-height: .9;
  /* the three names share a baseline */
  align-items: end;
  align-items: last baseline;
}
.hero-name > .tr-v {
  /* --name-w is each language's name width in ems, measured at build time,
     so every name fills the space it is given without overflowing. */
  font-size: min(12rem, calc((100vw - 2 * var(--gutter)) / var(--name-w, 3.6) * .97));
  letter-spacing: var(--display-tracking);
  /* optical nudge: the first letter's side bearing reads as an indent at this size */
  margin-left: -.04em;
}

/* Georgian descenders need more room under the name than Latin or Cyrillic. */
.hero-name > .tr-v:lang(ka) { line-height: 1.04; }

/* From 1200px the name and the introduction share a row, on the same two-column
   grid as the sections below; the name scales to whatever the left column allows. */
@media (min-width: 1200px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--measure));
    align-items: end;
  }
  .hero-name > .tr-v { font-size: min(12rem, calc((100vw - 2 * var(--gutter) - var(--measure) - 3rem) / var(--name-w, 3.6) * .97)); }
}

.hero-lede {
  font-size: 1.3125rem;
  line-height: 1.38;
  max-width: 30ch;
}
@media (min-width: 960px) { .hero-lede { font-size: 1.5rem; } }

.hero-status {
  margin-top: .75rem;
  color: var(--ink-soft);
  font-size: 1rem;
  /* the dot keeps a column of its own, beside the words in whichever language is showing */
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: .55em;
  align-items: baseline;
}
.hero-status::before {
  content: "";
  grid-area: 1 / 1;
  width: .5em; height: .5em;
  border-radius: 50%;
  background: var(--ribbon);
  translate: 0 -.08em;
}
.hero-status > .tr-v { grid-area: 1 / 2; }

/* ---------- Colour script ---------- */

.script { padding: 0 var(--gutter); }

.band {
  --band-h: clamp(150px, 30vh, 320px);
  --gap-project: 6px;
  --gap-video: 2px;
  position: relative;
  display: flex;
  gap: var(--gap-project);
}
@media (max-width: 599px) { .band { --gap-project: 4px; --gap-video: 1px; } }

.band-project {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-basis: 0;
  min-width: 0;
}

.band-segs {
  display: flex;
  align-self: stretch;
  gap: var(--gap-video);
  height: var(--band-h);
}
.band-project:first-of-type .band-segs { border-radius: 8px 0 0 8px; overflow: hidden; }
.band-project:last-of-type .band-segs { border-radius: 0 8px 8px 0; overflow: hidden; }

.seg {
  display: block;
  flex-basis: 0;
  min-width: 0;
  background-color: var(--ground-deep);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: opacity .15s ease;
}
.seg:focus-visible { outline-offset: -2px; outline-color: #fff; border-radius: 0; }
@media (hover: hover) and (pointer: fine) {
  .band.is-pointing .seg { opacity: .55; }
  .band.is-pointing .seg.is-current { opacity: 1; }
}

/* Each label is a tick under the band and a link down to its project. */
.band-label {
  margin-top: 10px;
  padding: 2px 6px 2px 8px;
  border-left: 1px solid var(--ink-soft);
  color: var(--ink-soft);
  font-size: .8125rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.band-label:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* Narrow screens: alternate labels drop a line so neighbours never collide,
   and the last one hangs from the band's right end so it can't run off the page. */
@media (max-width: 719px) {
  .band-project:nth-of-type(even) .band-label { margin-top: 30px; }
  .band-project:last-of-type { align-items: flex-end; }
  .band-project:last-of-type .band-label {
    min-width: max-content; /* as wide as its longest translation, so no version runs past the tick */
    text-align: right;
    padding: 2px 8px 2px 6px;
    border-left: 0;
    border-right: 1px solid var(--ink-soft);
  }
}

.band-tip {
  position: absolute;
  top: -10px;
  left: 0;
  z-index: 2;
  display: flex;
  gap: .6em;
  padding: 5px 10px 6px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ground);
  font-size: .8125rem;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -100%);
}
.band-tip::after {
  /* the playhead: a hairline down through the band at the pointer */
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  width: 2px;
  margin-left: -1px;
  height: var(--band-h);
  background: #fff;
  box-shadow: 0 0 0 1px rgb(43 26 34 / .4);
}
.band-tip-time { color: #cdb5bd; font-variant-numeric: tabular-nums; }

.script-caption {
  max-width: var(--measure);
  margin-top: 18px;
  color: var(--ink-soft);
  font-size: .9375rem;
}
@media (max-width: 719px) { .script-caption { margin-top: 14px; } }

/* The one orchestrated moment: the band scans in left to right like a playhead,
   each project's share of the sweep matching its share of the running time. */
@media (prefers-reduced-motion: no-preference) {
  .band-segs {
    animation: band-scan calc(var(--w) * 1.8s) linear calc(var(--s) * 1.8s + .25s) backwards;
  }
  @keyframes band-scan {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
  }
}

/* "Let's meet", "Давайте знакомиться", "გავიცნოთ ერთმანეთი": one word to a line in every
   language, so the closing reads the same and needs the same room whichever is shown. */
.meet-title > .tr-v { max-width: min-content; }

/* Display headings track each language's copy by that language's own measure. */
:is(.section-title, .project-title, .meet-title) > .tr-v {
  letter-spacing: calc(var(--display-tracking) * var(--tracking, 1));
}

/* ---------- Work ---------- */

main { display: block; }

.section-title {
  --flar: 100;
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  font-weight: 260;
  line-height: 1.02;
  --tracking: .7;
}

.work { padding: clamp(72px, 13vh, 160px) var(--gutter) 0; }

.work-intro {
  display: grid;
  gap: 1rem 3rem;
}
.work-intro p { max-width: var(--measure); }
@media (min-width: 1200px) {
  .work-intro { grid-template-columns: minmax(0, 1fr) minmax(0, var(--measure)); align-items: end; }
}

.project {
  margin-top: clamp(56px, 10vh, 120px);
  scroll-margin-top: 24px;
}

.project-head {
  display: grid;
  gap: .5rem 3rem;
  margin-bottom: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
@media (min-width: 1200px) {
  .project-head { grid-template-columns: minmax(0, 1fr) minmax(0, var(--measure)); }
}

.project-title {
  --flar: 90;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  font-weight: 330;
  line-height: 1.12;
  --tracking: .45;
}

/* The credit runs into the description as its first sentence, so both start where they always do. */
.project-notes { max-width: var(--measure); color: var(--ink-soft); }
.project-credit { font-weight: 560; color: var(--ink); }

/* ---------- Carousels ---------- */

.carousel { position: relative; }

/* One swipeable row per project at every width, bleeding into the page margins.
   It is positioned so the visually hidden text in each card is clipped by the
   scroller instead of widening the page on phones. */
.reel {
  --fade-l: 0px;
  --fade-r: 0px;
  position: relative;
  display: flex;
  gap: clamp(12px, 1.6vw, 20px);
  margin: 0 calc(-1 * var(--gutter));
  padding: 4px var(--gutter) 8px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  /* soft edges where there is more to scroll to */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}
.reel::-webkit-scrollbar { display: none; }
.reel.can-left { --fade-l: var(--gutter); }
.reel.can-right { --fade-r: var(--gutter); }

.reel-item {
  flex: 0 0 var(--card-w);
  scroll-snap-align: start;
}
/* The landscape film keeps the row height of the vertical cards where it fits,
   and the full width of the column where it doesn't. */
.reel-item.is-wide { flex-basis: min(calc(100vw - 2 * var(--gutter)), calc(var(--card-h) * var(--r))); }

.carousel-button {
  position: absolute;
  top: calc(4px + var(--card-h) / 2);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--ground);
  color: var(--ink);
  cursor: pointer;
}
.carousel-button:hover { border-color: var(--ink); }
/* centred in the page margin, clear of the posters */
.carousel-prev { left: calc((var(--gutter) + 44px) / -2); }
.carousel-next { right: calc((var(--gutter) + 44px) / -2); }
@media (hover: none), (pointer: coarse), (max-width: 899px) {
  .carousel-button { display: none !important; }
}

.clip {
  display: block;
  text-decoration: none;
  border-radius: var(--radius-card);
}
.clip:focus-visible { outline: none; }
.clip:focus-visible .clip-frame { outline: 2px solid var(--ribbon); outline-offset: 3px; }

.clip-frame {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--avg, var(--ground-deep));
}
.is-wide .clip-frame { aspect-ratio: var(--r); border-radius: 12px; }

.clip-poster,
.clip-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.clip-preview { opacity: 0; transition: opacity .2s ease; }
.clip.is-previewing .clip-preview { opacity: 1; }

/* a small play mark, as on a Reels grid */
.clip-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding-left: 2px;
  border-radius: 50%;
  background: rgb(20 12 16 / .38);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: opacity .2s ease;
}
.clip.is-previewing .clip-badge { opacity: 0; }

.clip-strip {
  position: relative;
  display: block;
  height: 10px;
  margin-top: 8px;
  border-radius: 3px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.clip-head {
  position: absolute;
  top: -3px; bottom: -3px;
  left: calc(var(--p, 0) * 100%);
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--ink);
  opacity: 0;
}
.clip.is-previewing .clip-head { opacity: 1; }

.clip-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  margin-top: 6px;
  font-size: .9375rem;
  line-height: 1.3;
}
.clip-title { font-weight: 520; }
.clip-length { flex: none; color: var(--ink-soft); font-size: .875rem; font-variant-numeric: tabular-nums; }

/* ---------- What I bring ---------- */

.offer { padding: clamp(96px, 16vh, 180px) var(--gutter) 0; }

.offer-list {
  display: grid;
  margin-top: clamp(28px, 5vh, 48px);
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
@media (min-width: 720px) {
  .offer-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 64px); }
}
@media (min-width: 1200px) { .offer-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Items share the list's rows, so every heading and every text starts on the same line
   across the columns, whichever language is showing. */
.offer-item {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  padding: 18px 0 26px;
  border-bottom: 1px solid var(--line);
}
.offer-term {
  --flar: 90;
  font-size: 1.3125rem;
  font-weight: 400;
  line-height: 1.25;
}
.offer-text { margin-top: .5rem; color: var(--ink-soft); max-width: 32ch; }

.offer-languages { margin-top: 22px; max-width: var(--measure); }

/* ---------- Let's meet: the page closes in the colour of the ink ---------- */

.meet {
  margin-top: clamp(96px, 16vh, 180px);
  padding: clamp(64px, 12vh, 140px) var(--gutter) clamp(40px, 7vh, 72px);
  border-radius: 28px 28px 0 0;
  background: var(--ink);
  color: var(--ground);
  -webkit-font-smoothing: antialiased;
}

.meet-title {
  --flar: 100;
  font-size: clamp(3.25rem, 12vw, 9rem);
  font-weight: 230;
  line-height: .98;
  --tracking: 1;
  margin-left: -.04em;
}

.meet-text {
  max-width: 32ch;
  margin-top: clamp(18px, 3vh, 28px);
  color: #e3d1cd;
  font-size: 1.3125rem;
  line-height: 1.4;
}
@media (min-width: 960px) { .meet-text { font-size: 1.5rem; } }

.contact {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  margin-top: 32px;
  padding: 0;
  list-style: none;
}
.contact-link {
  display: inline-block;
  padding: 12px 22px 13px;
  border-radius: 999px;
  background: var(--ground);
  color: var(--ink);
  font-weight: 520;
  text-decoration: none;
}
.contact-link:hover { background: var(--ribbon); color: #fff; }
.contact-detail { margin-left: .4rem; color: var(--screen-soft); font-variant-numeric: tabular-nums; }

/* The colour script again, as a thin ribbon: the page ends where it began. */
.ribbon {
  display: flex;
  gap: 2px;
  height: 12px;
  margin-top: clamp(56px, 10vh, 112px);
  overflow: hidden;
  border-radius: 6px;
}
.ribbon-seg {
  flex-basis: 0;
  min-width: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 0 var(--gutter) max(32px, env(safe-area-inset-bottom, 0px));
  background: var(--ink);
  color: var(--screen-soft);
  font-size: .875rem;
  -webkit-font-smoothing: antialiased;
}
.lang-footer .lang-list { border-color: rgb(241 228 224 / .22); }
.lang-footer .lang-link { color: var(--screen-soft); }
.lang-footer .lang-link:hover { color: var(--screen-ink); }
.lang-footer .lang-link[aria-current="page"] { background: var(--ground); color: var(--ink); }
.lang-footer .lang-pill { background: var(--ground); }
.lang-footer .lang-list.has-pill .lang-link[aria-current="page"] { background: transparent; }
.footer :focus-visible, .meet :focus-visible { outline-color: var(--ground); }

/* ---------- Player ---------- */

.player {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--screen);
  color: var(--screen-ink);
  -webkit-font-smoothing: antialiased;
}
.player::backdrop { background: var(--screen); }
html:has(.player[open]) { overflow: hidden; }
.player[open] {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}
@media (min-width: 900px) {
  .player[open] {
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 23rem);
  }
}

.player-stage {
  /* a size container, so the video can fit both its width and its height */
  container-type: size;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: max(12px, env(safe-area-inset-top, 0px)) 12px 8px;
}
@media (min-width: 900px) { .player-stage { padding: 32px 0 32px 32px; } }

.player-video {
  display: block;
  /* contain: as wide as the stage allows, unless the height runs out first */
  width: min(100cqw, 100cqh * var(--arn, .5625));
  height: auto;
  aspect-ratio: var(--ar, 9 / 16);
  border-radius: 14px;
  background: #000;
}

.player-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 16px max(16px, env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}
.player-panel:focus { outline: none; }
.player-panel > * { flex-shrink: 0; }
@media (min-width: 900px) {
  .player-panel { justify-content: flex-end; gap: 14px; padding: 80px 32px 36px; }
}

.player-project { color: var(--screen-soft); font-size: .875rem; }
.player-title {
  --flar: 100;
  margin-top: -6px;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 300;
  line-height: 1.1;
}
.player-credit { color: var(--screen-soft); font-size: .9375rem; }
.player-credit:empty { display: none; }

.player-onscreen { font-size: .9375rem; }
.player-onscreen-label { color: var(--screen-soft); font-size: .8125rem; }
.player-onscreen-label:empty { display: none; }
.player-onscreen-lines { margin-top: 4px; padding: 0; list-style: none; }
.player-onscreen-lines li + li { margin-top: 2px; }

.player-strip {
  position: relative;
  height: 26px;
  margin-top: 4px;
  border-radius: 4px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  cursor: pointer;
  touch-action: none;
}
.player-head {
  position: absolute;
  top: -4px; bottom: -4px;
  left: calc(var(--p, 0) * 100%);
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .35);
}

.player-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.player-button {
  min-height: 44px;
  padding: 0 18px;
  place-content: center; /* its words are a grid of stacked translations; keep them mid-button */
  border: 1px solid rgb(241 228 224 / .28);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}
.player-button:hover { border-color: var(--screen-ink); }
.player-count { color: var(--screen-soft); font-size: .875rem; font-variant-numeric: tabular-nums; }

.player-close {
  position: absolute;
  top: max(10px, env(safe-area-inset-top, 0px));
  right: 10px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgb(28 18 23 / .6);
  color: var(--screen-ink);
  cursor: pointer;
}
.player-close:hover { background: rgb(241 228 224 / .16); }
@media (min-width: 900px) { .player-close { top: 20px; right: 20px; } }

@media (max-width: 899px) {
  /* On phones the title, timeline and buttons stay in view under the video;
     the credit and on-screen text follow and scroll within the panel. */
  .player-panel { max-height: max(172px, 27dvh); }
  .player-strip { order: 3; height: 18px; }
  .player-nav { order: 4; }
  .player-credit, .player-onscreen { order: 5; }
  .player-title { font-size: 1.375rem; }
}