/* LANGE FILM — hi-fi landing page styles
   Type: Newsreader (editorial serif) + JetBrains Mono (UI/data).
   Color: B&W on warm paper. Sharp 1px Swiss delineation. */

:root {
  --paper:   #ffffff;
  --ink:     #111111;
  --muted:   #7a7368;
  --hair:    #111111;
  --soft:    #1a1a1a0d;        /* very light tint behind dashboard cells */

  --serif:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --mono:   "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --tx-tiny:    10.5px;
  --tx-small:   12px;
  --tx-body:    14px;
  --tx-lead:    16px;
  --tx-mid:     22px;
  --tx-display: 38px;
  --tx-huge:    72px;

  --row-header:  112px;
  --row-ticker:   48px;
  --row-footer:   58px;

  --col-left:  360px;
  --col-right: 320px;

  --pad:   18px;
  --pad-s: 12px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--tx-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Layout shell ────────────────────────────────────────────────────────── */

.stage {
  position: fixed; inset: 0;
  background: var(--paper);
  overflow: hidden;
}

.dash {
  /* The dash is uniformly scaled. Its natural size is the viewport divided
     by the scale factor, so once transformed it exactly fills the viewport.
     Internal pixel sizes (col widths, row heights, fonts) stay at design
     dimensions; the 1fr cells (middle column, body row) absorb whatever
     extra space the viewport provides on either axis. */
  width:  calc(100vw / var(--s, 1));
  height: calc(100vh / var(--s, 1));
  transform: scale(var(--s, 1));
  transform-origin: top left;
  display: grid;
  grid-template-columns: var(--col-left) 1fr var(--col-right);
  grid-template-rows:
    var(--row-header)
    var(--row-ticker)
    1fr
    var(--row-footer);
  border-top:    1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  min-width: 0;
  min-height: 0;
}

/* hairlines between every cell — uniform Swiss grid */
.cell {
  position: relative;
  border-right:  1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  overflow: hidden;
  background: var(--paper);
}
.cell:last-child { border-right: none; }
.row-last .cell  { border-bottom: none; }

.cell.no-br { border-right: none; }
.cell.no-bb { border-bottom: none; }

.col       { display: flex; flex-direction: column; }
.row       { display: flex; }
.flex1     { flex: 1 1 auto; min-width: 0; min-height: 0; }
.gap-s     { gap: 4px; }
.gap       { gap: 8px; }
.gap-m     { gap: 12px; }
.gap-l     { gap: 18px; }
.gap-xl    { gap: 28px; }
.between   { justify-content: space-between; }
.center    { align-items: center; }
.baseline  { align-items: baseline; }
.tight     { line-height: 1.1; }

.pad   { padding: var(--pad); }
.pad-s { padding: var(--pad-s); }
.pad-h { padding-left: var(--pad); padding-right: var(--pad); }
.pad-v { padding-top: var(--pad); padding-bottom: var(--pad); }

.hair  { height: 0; border-top: 1px solid var(--hair); }

/* ── Type helpers ────────────────────────────────────────────────────────── */

.serif { font-family: var(--serif); }
.mono  { font-family: var(--mono);  }

.eyebrow {
  font-family: var(--mono);
  font-size: var(--tx-tiny);
  font-weight: inherit;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.eyebrow.ink { color: var(--ink); }

.label {
  font-family: var(--mono);
  font-size: var(--tx-tiny);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cap {
  font-family: var(--mono);
  font-size: var(--tx-small);
  letter-spacing: 0.04em;
}

.muted { color: var(--muted); }
.tab   { font-variant-numeric: tabular-nums; }

a, .lk {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: background .15s, color .15s;
}
a:hover, .lk:hover { background: var(--ink); color: var(--paper); }

.bare { border: 0; padding: 0; }

/* ── Header — logo · widgets · date ──────────────────────────────────────── */

.header {
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  grid-template-columns: var(--col-left) 1fr var(--col-right);
  /* No border-bottom here — the child .cells supply their own
     border-bottom (.cell base rule). Adding one to .header on top of
     the cells' borders renders as a 2px line above the ticker. */
}
.header .cell { padding: 0; }
.header .logotype {
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--pad);
}
.header .datestamp { padding: 0 var(--pad); }

/* Widget strip (replaces search): clock · 4 days weather */
.headwidgets {
  display: grid;
  grid-template-columns: 140px 1fr;
  height: 100%;
  align-items: stretch;
}
.headwidgets .hw-cell {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 10px 14px;
  position: relative;
  border-right: 1px solid var(--hair);
  text-align: center;
}
.headwidgets .hw-cell:last-child { border-right: none; }
.headwidgets .hw-corner {
  position: absolute; top: 7px; left: 10px;
  font-family: var(--mono); font-size: var(--tx-tiny);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.headwidgets .hw-cap {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--muted); margin-top: 6px;
}

/* clock cell */
.hw-clock { gap: 0; padding: 8px !important; }

/* weather strip in header — 4 days inline */
.hw-weather {
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  height: 100%;
  position: relative;
}
.hw-weather .hw-city {
  position: absolute; top: 6px; right: 10px;
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
  z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
}
.hw-weather .hw-city .approx {
  display: inline-block;
  border: 1px solid currentColor;
  padding: 1px 4px 0;
  font-size: 8px;
  letter-spacing: 0.16em;
  opacity: .7;
}
.hw-weather .hw-city .approx::before { content: "≈ "; }
.hw-weather .day {
  border-right: 1px dotted #00000022;
  padding: 14px 10px 10px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
  text-align: left;
  position: relative;
}
.hw-weather .day:last-child { border-right: none; }
.hw-weather .day.today .lbl {
  color: var(--ink);
  font-weight: 700;
}
.hw-weather .day .temp {
  color: var(--muted);
  font-weight: 400;
}
.hw-weather .day.today .temp {
  color: var(--ink);
  font-weight: 700;
}
.hw-weather .day.today::before {
  content: ""; position: absolute; left: 10px; top: 6px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink);
}
.hw-weather .day.today .lbl { padding-left: 12px; }
.hw-weather .day .lbl {
  grid-column: 1 / 3;
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.hw-weather .day .ico { grid-row: 2; grid-column: 1; color: currentColor; }
.hw-weather .day .temp {
  grid-row: 2; grid-column: 2;
  font-family: var(--serif);
  font-size: 26px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hw-weather .day .cond {
  grid-column: 1 / 3;
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

/* moon mini — centered, no extra top padding */
.hw-moon { gap: 6px; }
.hw-moon .glyph { color: var(--ink); }

.datestamp {
  padding: 0 var(--pad);
  display: flex; flex-direction: column; justify-content: center;
  align-items: flex-end; text-align: right;
}
.logotype .logo-h1 {
  margin: 0;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  display: block;
}
.logotype .mark {
  font-family: var(--serif);
  font-weight: 800;
  /* JS in HiFi() rescales this to fill the cell width on every layout
     change (initial mount, font load, container resize). The 54px CSS
     value is a calibrated fallback that approximately fills the 324px
     desktop column, so the pre-JS paint isn't noticeably wrong. */
  font-size: 54px;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  display: block;
}
.logotype .mark em {
  font-style: italic;
  font-weight: 400;
  color: var(--muted);
}
.logotype .sub {
  display: block;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.search {
  display: flex; align-items: center;
  gap: 12px; padding: 0 var(--pad);
  height: 100%;
}
.search .icon {
  width: 14px; height: 14px;
  border: 1.5px solid var(--ink); border-radius: 50%;
  position: relative;
}
.search .icon::after {
  content: ""; position: absolute; left: 100%; top: 100%;
  width: 6px; height: 1.5px; background: var(--ink);
  transform: rotate(45deg); transform-origin: 0 0; margin-left: -3px; margin-top: -1px;
}
.search input {
  border: 0; background: transparent; flex: 1;
  font-family: var(--serif); font-size: var(--tx-lead);
  color: var(--ink); outline: none;
  font-style: italic;
}
.search input::placeholder { color: var(--muted); font-style: italic; }

.datestamp {
  padding: 0 var(--pad);
  display: flex; flex-direction: column; justify-content: center;
  align-items: flex-end; text-align: right;
}
.datestamp .day {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--tx-mid);
  line-height: 1;
  letter-spacing: -0.005em;
}
.datestamp .meta {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: var(--tx-tiny);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Widgets row ─────────────────────────────────────────────────────────── */

.widgets {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 180px 240px 1fr;
  border-bottom: 1px solid var(--hair);
}

.widget {
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  padding: 12px var(--pad);
  border-right: 1px solid var(--hair);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Today/conditions widget — left aligned, dense */
.widget.conditions {
  align-items: stretch;
  text-align: left;
  padding-top: 24px;
}
.conditions .cond-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  height: 100%;
}
.conditions .cond-now {
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 4px;
  color: var(--ink);
}
.conditions .cond-temp {
  font-family: var(--serif); font-weight: 500;
  font-size: 32px; line-height: 1;
}
.conditions .cond-sun {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--mono); font-size: var(--tx-tiny);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.conditions .cond-sun .ln {
  display: flex; justify-content: space-between; gap: 8px;
}
.conditions .cond-sun .k { color: var(--muted); }
.conditions .cond-sun .v { color: var(--ink); }
.conditions .cond-sun .cond-moon {
  margin-top: 4px; padding-top: 6px;
  border-top: 1px dotted #00000022;
}
.widget .stack { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.widget .cap   { color: var(--muted); }
.widget .corner {
  position: absolute; top: 8px; left: 12px;
  font-family: var(--mono);
  font-size: var(--tx-tiny); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
}

.weather-block { padding: 0; display: flex; flex-direction: column; }
.weather-block .head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px var(--pad); border-bottom: 1px solid var(--hair);
}
.weather-block .strip {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.weather-block .day {
  border-right: 1px solid var(--hair);
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 4px;
  justify-content: center;
}
.weather-block .day:last-child { border-right: none; }
.weather-block .day .d {
  font-family: var(--mono); font-size: var(--tx-tiny);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.weather-block .day .ico { width: 28px; height: 28px; color: var(--ink); }
.weather-block .day .temp {
  font-family: var(--serif); font-size: 20px; font-weight: 500;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.weather-block .day .lo {
  font-family: var(--mono); font-size: var(--tx-tiny); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.weather-block .day .cond {
  font-family: var(--mono); font-size: var(--tx-tiny); color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Ticker / now showing ────────────────────────────────────────────────── */

.ticker {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 var(--pad);
  border-bottom: 1px solid var(--hair);
  overflow: hidden;
}
.ticker .badge {
  display: inline-flex; align-items: center; gap: 10px;
  flex: 0 0 auto;
  margin: 0;
  font-family: var(--mono); font-size: var(--tx-tiny);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); font-weight: 600;
  line-height: 1;
}
.ticker .badge .dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 70% { opacity: 1; }
  85%     { opacity: 0.2; }
  100%    { opacity: 1; }
}
.ticker .dates {
  display: flex; align-items: center;
  overflow: hidden; white-space: nowrap;
  flex: 1 1 auto; min-width: 0;
  line-height: 1;
  /* fade the leading/trailing edges so items don't pop in/out hard */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}
.ticker .dates .track {
  display: flex; align-items: center;
  flex: 0 0 auto;
  width: max-content;
  animation: ticker-scroll 60s linear infinite;
  will-change: transform;
}
.ticker .dates:hover .track,
.ticker .dates:focus-within .track { animation-play-state: paused; }
.ticker .dates .track-copy {
  display: flex; align-items: center; gap: 22px;
  padding-right: 22px;
  flex: 0 0 auto;
}
@keyframes ticker-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker .dates .track { animation: none; }
}
.ticker .dates .d {
  display: inline-flex; gap: 8px; align-items: center;
  font-family: var(--mono); font-size: var(--tx-tiny);
  letter-spacing: 0.10em; text-transform: uppercase;
  line-height: 1;
}
.ticker .dates .d .when { color: var(--ink); font-weight: 600; }
.ticker .dates .d .where { color: var(--muted); }
.ticker .dates .sep { color: var(--muted); opacity: .6; }

/* ── Body — 3 columns ──────────────────────────────────────────────────── */

.body {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-template-columns: var(--col-left) 1fr var(--col-right);
  min-height: 0;
}
.body > .cell { display: flex; flex-direction: column; overflow: hidden; }

/* Filmography */
.filmo .head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 var(--pad);
  height: 36px;
  flex: 0 0 auto;
}
.filmo .filters {
  padding: 8px var(--pad);
  min-height: 32px;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--hair);
  display: flex; flex-wrap: wrap; gap: 14px; row-gap: 6px;
  align-items: center;
  font-family: var(--mono); font-size: var(--tx-tiny);
  letter-spacing: 0.10em; text-transform: uppercase;
}
.filmo .filters .f { color: var(--muted); cursor: pointer; }
.filmo .filters .f.on {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
}
.filmo .list {
  flex: 1; overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ink) var(--paper);
}
.filmo .list::-webkit-scrollbar {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  background: var(--paper);
  border-left: 1px solid var(--hair);
  /* No border-right — the parent cell already paints a 1px border on its
     right edge. Stacking the two creates a 2px line in the bottom-right
     corner that doesn't align with the rest of the grid. */
}
.filmo .list::-webkit-scrollbar-track {
  background: var(--paper);
}
.filmo .list::-webkit-scrollbar-track-piece {
  background: var(--paper);
}
.filmo .list::-webkit-scrollbar-thumb {
  background: var(--ink);
  border: 0;
  border-radius: 0;
  /* Hairline gaps top/bottom so the thumb doesn't kiss the arrow buttons. */
  background-clip: padding-box;
  border-top:    1px solid var(--paper);
  border-bottom: 1px solid var(--paper);
  min-height: 36px;
}
.filmo .list::-webkit-scrollbar-thumb:hover { background-color: #000; }

/* Square arrow buttons, top and bottom. WebKit needs both `start` and
   `end` listed (`single-button` enables them) — the SVG fills each.
   No top/bottom border here — the .filters row above and the .cell
   below already supply hairlines; stacking would double them. */
.filmo .list::-webkit-scrollbar-button {
  background: var(--paper);
  height: 12px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 7px 7px;
}
.filmo .list::-webkit-scrollbar-button:vertical:decrement,
.filmo .list::-webkit-scrollbar-button:vertical:start:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M5 2 L9 8 L1 8 Z' fill='%23111111'/></svg>");
}
.filmo .list::-webkit-scrollbar-button:vertical:increment,
.filmo .list::-webkit-scrollbar-button:vertical:end:increment {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M5 8 L9 2 L1 2 Z' fill='%23111111'/></svg>");
}
/* Suppress the duplicate buttons WebKit creates at the opposite end. */
.filmo .list::-webkit-scrollbar-button:vertical:end:decrement,
.filmo .list::-webkit-scrollbar-button:vertical:start:increment {
  display: none;
}
.filmo .list::-webkit-scrollbar-button:hover { background-color: #f4f1ea; }
.filmo .list::-webkit-scrollbar-corner { background: var(--paper); }
.filmo .list { overflow-x: hidden; }
.filmo .row-f {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 12px;
  /* Negative right margin (matched by extra padding) lets the row's
     border-bottom extend across the 12px scrollbar gutter so the
     hairline reaches the cell's right edge instead of stopping short.
     The list's overflow-x: hidden clips the extension at the cell edge. */
  margin-right: -12px;
  padding: 14px calc(var(--pad) + 12px) 14px var(--pad);
  border-bottom: 1px solid var(--hair);
  cursor: pointer;
  transition: background .15s, color .15s;
  position: relative;
}
.filmo .row-f:hover { background: var(--soft); }
/* No visual change for the active row — selection is communicated solely
   by the feature pane updating. (User pref.) */
.filmo .row-f.active { /* intentionally empty */ }
.filmo .empty-state {
  padding: 24px var(--pad);
  text-align: center;
  color: var(--muted);
}
.filmo .row-f .still {
  width: 78px; height: 52px;
  flex: 0 0 auto;
}
.filmo .row-f .meta { min-width: 0; }
.filmo .row-f .meta .yr {
  font-family: var(--mono); font-size: var(--tx-tiny);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.filmo .row-f .meta .ttl {
  font-family: var(--serif); font-size: var(--tx-lead);
  font-weight: 500; line-height: 1.15; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.filmo .row-f .meta .info {
  font-family: var(--mono); font-size: var(--tx-tiny);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Title + logo. The logo is absolutely positioned bottom-right of the
   title-group with an explicit height derived from the .ttl + .info font
   metrics — so every row's logo is the same size regardless of how many
   lines the title wraps to. JS measures the rendered logo width and writes
   it to --logo-w so .title-text gets a matching right-padding. */
.filmo .row-f .meta .title-group {
  position: relative;
  min-width: 0;
}
.filmo .row-f .meta .title-group.has-logo .title-text {
  padding-right: calc(var(--logo-w, 0px) + 12px);
}
.filmo .film-logo {
  /* Single-line .ttl + .info height: ttl line (tx-lead * 1.15)
     + info line (tx-tiny * 1.5) + 5px of margins between yr/ttl/info. */
  --logo-h: calc(var(--tx-lead) * 1.15 + var(--tx-tiny) * 1.5 + 5px);
  position: absolute;
  right: 0;
  bottom: 0;
  height: var(--logo-h);
  max-width: 40%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none;
  /* The logo PNG is used as a mask; the visible color comes from
     background-color, so we can tint to a brand color on hover. */
  background-color: var(--ink);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: bottom right;
          mask-position: bottom right;
  -webkit-mask-size: contain;
          mask-size: contain;
  transform: scale(var(--logo-scale, 1));
  transform-origin: bottom right;
  transition: background-color 200ms ease;
}
.filmo .row-f:hover .film-logo {
  background-color: var(--logo-hover, var(--ink));
}
.filmo .film-logo img {
  display: block;
  max-height: 100%;
  max-width: 100%;
  height: auto;
  width: auto;
  /* The img is invisible — it only provides intrinsic sizing so the
     mask + background fill matches the logo's natural dimensions. */
  visibility: hidden;
}

/* Featured */
.feature { padding: 0; display: flex; flex-direction: column; position: relative; }
.feature .head {
  padding: 0 var(--pad);
  height: 68px;
  flex: 0 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--hair);
}
.feature .feature-nav {
  display: flex; align-items: center; gap: 10px;
}
.feature .nav-btn {
  appearance: none;
  width: 26px; height: 24px;
  border: 1px solid var(--hair);
  background: transparent;
  font-family: var(--mono); font-size: 12px;
  color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
  line-height: 1;
}
.feature .nav-btn:hover:not(:disabled) {
  background: var(--ink); color: var(--paper);
}
.feature .nav-btn:disabled {
  color: var(--muted); cursor: not-allowed; opacity: .5;
}
.feature .trailer-wrap {
  padding: 14px var(--pad);
  flex: 1 1 auto;
  min-height: 0;
  /* Full-bleed trailer + meta-row scrolls vertically when it would
     otherwise clip. Custom scrollbar mirrors the filmography list.

     The trailer's 16:9 box is width:100% of this container, so its width —
     and thus the still's right edge — must not change between films. A
     vertical scrollbar that appears only on tall films (gallery / long
     credits) would shrink the content box and make the image jump. To pin
     the width for EVERY film and browser we always reserve the gutter:
       - `overflow-y: scroll` always reserves space for a classic scrollbar
         (works everywhere, incl. Safari without scrollbar-gutter support);
       - `scrollbar-gutter: stable` reserves the gutter even where scrollbars
         are overlays (modern Chrome/Firefox/Safari 18.2+). */
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--ink) var(--paper);
}
.feature .trailer-wrap::-webkit-scrollbar {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  background: var(--paper);
  border-left: 1px solid var(--hair);
}
.feature .trailer-wrap::-webkit-scrollbar-track,
.feature .trailer-wrap::-webkit-scrollbar-track-piece { background: var(--paper); }
.feature .trailer-wrap::-webkit-scrollbar-thumb {
  background: var(--ink);
  background-clip: padding-box;
  border: 0; border-radius: 0;
  border-top: 1px solid var(--paper);
  border-bottom: 1px solid var(--paper);
  min-height: 36px;
}
.feature .trailer-wrap::-webkit-scrollbar-thumb:hover { background-color: #000; }
.feature .trailer-wrap::-webkit-scrollbar-button {
  background: var(--paper);
  /* No top/bottom border — the .head above and .cell below already
     provide hairlines; an extra one here renders as a doubled line. */
  height: 12px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 7px 7px;
}
.feature .trailer-wrap::-webkit-scrollbar-button:vertical:decrement,
.feature .trailer-wrap::-webkit-scrollbar-button:vertical:start:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M5 2 L9 8 L1 8 Z' fill='%23111111'/></svg>");
}
.feature .trailer-wrap::-webkit-scrollbar-button:vertical:increment,
.feature .trailer-wrap::-webkit-scrollbar-button:vertical:end:increment {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M5 8 L9 2 L1 2 Z' fill='%23111111'/></svg>");
}
.feature .trailer-wrap::-webkit-scrollbar-button:vertical:end:decrement,
.feature .trailer-wrap::-webkit-scrollbar-button:vertical:start:increment { display: none; }
.feature .feature-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}
.feature .trailer {
  width: 100%;
  /* Full-bleed — no max-width cap. */
  aspect-ratio: 16/9;
  position: relative;
  flex: 0 0 auto;
}
.feature .trailer .play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.feature .trailer .play .btn {
  width: 60px; height: 60px; border-radius: 50%;
  border: 1.5px solid #fff;
  display: inline-flex; align-items: center; justify-content: center;
  backdrop-filter: blur(2px); background: rgba(0,0,0,0.2);
}
.feature .trailer .play .btn::after {
  content: ""; width: 0; height: 0;
  border-left: 14px solid #fff;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;
}
.feature .trailer .corner {
  position: absolute; bottom: 8px; left: 12px;
  color: #fff;
  font-family: var(--mono); font-size: var(--tx-tiny);
  letter-spacing: 0.12em; text-transform: uppercase;
  background: rgba(0,0,0,.35); padding: 2px 6px;
}
.feature .trailer .runtime {
  position: absolute; bottom: 8px; right: 12px;
  color: #fff;
  font-family: var(--mono); font-size: var(--tx-tiny);
  font-variant-numeric: tabular-nums;
  background: rgba(0,0,0,.35); padding: 2px 6px;
}

.feature .meta-row {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  min-height: 0;
}
.feature .meta-row .lede .eyebrow { margin-bottom: 8px; }
.feature .meta-row .lede h2.title {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.012em;
}
.feature .meta-row .lede p {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: #2a2a2a;
}
.feature .meta-row .lede .cta {
  margin-top: 16px;
  display: flex; gap: 18px; flex-wrap: wrap;
}
.feature .meta-row .credits .ln {
  display: grid; grid-template-columns: auto 1fr; gap: 12px;
  padding: 4px 0;
  font-family: var(--mono); font-size: var(--tx-tiny);
  letter-spacing: 0.06em; text-transform: uppercase;
  border-bottom: 1px dotted #00000022;
}
.feature .meta-row .credits .ln.group { margin-top: 6px; }
.feature .meta-row .credits .ln .k { color: var(--muted); text-align: left; }
.feature .meta-row .credits .ln .v { color: var(--ink); text-align: right; }
.feature .meta-row .credits .ttl { margin-bottom: 6px; text-align: right; }

/* Still / portrait image — sibling to the .ph placeholder; fills its wrapper */
.still-img {
  position: relative;
  overflow: hidden;
  background: #1a1a1a;
}
.still-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Trailer hosts the still or placeholder absolutely, with the play overlay above */
.feature .trailer .ph,
.feature .trailer .still-img,
.feature .trailer .yt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.feature .trailer .yt {
  border: 0;
  display: block;
  background: #000;
}
/* Corner badge stays above the iframe */
.feature .trailer .corner { z-index: 2; }

/* ── Film gallery — configurable flex grid ───────────────────────────────────
   Columns are set per film via the --gallery-cols / --gallery-cols-mobile
   custom properties (see FilmGallery in hifi.jsx). Defaults: 3 up on desktop,
   2 up on mobile. The 2px subtracted per item accounts for the flex gap. */
.film-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-top: 1px solid var(--hair);
  padding-top: 2px;
  --gallery-cols: 3;
  --gallery-cols-mobile: 2;
}
.film-gallery .gallery-item {
  flex: 0 0 calc((100% - (var(--gallery-cols) - 1) * 2px) / var(--gallery-cols));
  min-width: 0;
  overflow: hidden;
  background: #1a1a1a;
}
.film-gallery .gallery-item img {
  width: 100%;
  display: block;
  cursor: pointer; /* desktop: click to maximize (reset on mobile below) */
}

/* ── Maximized gallery still ───────────────────────────────────────────────
   Covers the entire featured box: a thin top bar of buttons over the still.
   Desktop only — hidden below the mobile breakpoint. */
.gallery-max {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: var(--paper);
  display: flex;
  flex-direction: column;
}
.gallery-max-bar {
  flex: 0 0 auto;
  display: flex;
  border-bottom: 1px solid var(--hair);
}
.gallery-max-bar .nav-btn {
  flex: 1 1 0;
  width: auto;
  height: 34px;
  gap: 6px;
  border: none;
  border-right: 1px solid var(--hair);
  background: var(--paper);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.gallery-max-bar .nav-btn:last-child { border-right: none; }
.gallery-max-img {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: var(--paper);
  overflow: hidden;
}
.gallery-max-img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Filmography thumbnail — 78px wide, 16:9 aspect. object-fit:cover (on .still-img img)
   handles any still that isn't natively 16:9 by scaling to fill and cropping. */
.filmo .row-f .still-img.still { width: 78px; aspect-ratio: 16/9; flex: 0 0 auto; }

/* Filmography stills are black & white by default — they regain color
   only on hover. The active/featured row stays grayscale like the rest.
   The trailer still in the feature window is always color. */
.filmo .row-f .still-img.still img {
  filter: grayscale(1) contrast(1.02);
  transition: filter 200ms ease;
}
.filmo .row-f:hover .still-img.still img {
  filter: grayscale(0);
}

/* Bio portrait — same sizing whether placeholder or image.
   Use padding-bottom for the aspect ratio: it reliably establishes
   intrinsic height on first paint inside the flex column container,
   whereas `aspect-ratio` here flickers a 0-height frame and locks
   the image into a wavy, vertically-collapsed render until a resize. */
.aboutcol .still-img.portrait,
.aboutcol .portrait {
  width: 100%;
  height: 0;
  padding-bottom: 66.6667%; /* 3:2 */
  margin-bottom: 10px;
  flex-shrink: 0;
  position: relative;
}
.aboutcol .still-img.portrait > img,
.aboutcol .still-img.portrait > .cap,
.aboutcol .portrait > .cap {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}

/* Now-showing entries become anchor tags so the whole row is clickable */
.ticker .dates .screening {
  display: inline-flex; gap: 8px; align-items: center;
  border-bottom: 0; padding: 0;
  color: inherit;
  cursor: pointer;
}
.ticker .dates .screening:hover { background: var(--ink); color: var(--paper); }
.ticker .dates .screening:hover .when,
.ticker .dates .screening:hover .where { color: inherit; }

/* Right column — about + contact */
.aboutcol .section {
  padding: 14px var(--pad);
  border-bottom: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--ink) var(--paper);
}
.aboutcol .section:last-child { border-bottom: none; }

.aboutcol .section::-webkit-scrollbar {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  background: var(--paper);
  border-left: 1px solid var(--hair);
}
.aboutcol .section::-webkit-scrollbar-track,
.aboutcol .section::-webkit-scrollbar-track-piece { background: var(--paper); }
.aboutcol .section::-webkit-scrollbar-thumb {
  background: var(--ink);
  background-clip: padding-box;
  border: 0; border-radius: 0;
  border-top: 1px solid var(--paper);
  border-bottom: 1px solid var(--paper);
  min-height: 36px;
}
.aboutcol .section::-webkit-scrollbar-thumb:hover { background-color: #000; }
.aboutcol .section::-webkit-scrollbar-button {
  background: var(--paper);
  height: 12px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 7px 7px;
}
.aboutcol .section::-webkit-scrollbar-button:vertical:decrement,
.aboutcol .section::-webkit-scrollbar-button:vertical:start:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M5 2 L9 8 L1 8 Z' fill='%23111111'/></svg>");
}
.aboutcol .section::-webkit-scrollbar-button:vertical:increment,
.aboutcol .section::-webkit-scrollbar-button:vertical:end:increment {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M5 8 L9 2 L1 2 Z' fill='%23111111'/></svg>");
}
.aboutcol .section::-webkit-scrollbar-button:vertical:end:decrement,
.aboutcol .section::-webkit-scrollbar-button:vertical:start:increment { display: none; }
.aboutcol .section::-webkit-scrollbar-button:hover { background-color: #f4f1ea; }
.aboutcol .section::-webkit-scrollbar-corner { background: var(--paper); }
/* .aboutcol .portrait sizing is handled above with .still-img.portrait */
.aboutcol h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: var(--tx-mid); line-height: 1.1;
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}
.aboutcol .bio {
  font-size: 12.5px; line-height: 1.5;
  color: #2a2a2a;
}
.aboutcol .more {
  display: flex; gap: 14px; margin-top: 10px;
  font-family: var(--mono); font-size: var(--tx-tiny);
  letter-spacing: 0.10em; text-transform: uppercase;
}

/* CV download card */
.cv-button {
  margin-top: 12px;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--hair);
  background: var(--paper);
  text-decoration: none;
  color: var(--ink);
  transition: background .15s, color .15s;
}
.cv-button:hover { background: var(--ink); color: var(--paper); }
.cv-button .cv-icon { flex: 0 0 auto; display: inline-flex; }
.cv-button .cv-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cv-button .cv-label {
  font-family: var(--serif); font-weight: 500; font-size: 15px; line-height: 1;
}
.cv-button .cv-meta {
  font-family: var(--mono); font-size: var(--tx-tiny);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.cv-button:hover .cv-meta { color: var(--paper); opacity: .7; }
.cv-button .cv-arrow {
  font-family: var(--mono); font-size: 16px; line-height: 1;
}
.aboutcol .contact { display: grid; gap: 8px; }
.aboutcol .contact .ln {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: var(--tx-small);
}
.aboutcol .contact .ln .k {
  font-size: var(--tx-tiny); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}

/* ── Footer / Newsletter ─────────────────────────────────────────────────── */

.footer {
  grid-column: 1 / -1;
  grid-row: 4;
  display: grid;
  grid-template-columns: 320px 1fr 200px;
}
.footer .cell { display: flex; align-items: center; padding: 0 var(--pad); border-bottom: none; }
.footer .cell.last { border-right: none; }
.footer .colophon {
  font-family: var(--mono); font-size: var(--tx-tiny);
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
}

/* Centered contact in the footer */
.footer .foot-contact {
  justify-content: center;
  gap: 10px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-wrap: nowrap;
  overflow: hidden;
  padding: 0 12px !important;
}
.footer .foot-contact .ft-item {
  display: inline-flex; align-items: baseline; gap: 6px;
  flex: 0 0 auto;
}
.footer .foot-contact .ft-k {
  font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}
.footer .foot-contact .ft-v {
  font-family: var(--mono); font-size: 12px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.footer .foot-contact .ft-sep {
  color: var(--muted); opacity: .5;
  flex: 0 0 auto;
}
.footer .right { justify-content: flex-end; gap: 16px; }
.footer .right .sm {
  font-family: var(--mono); font-size: var(--tx-tiny);
  letter-spacing: 0.12em; text-transform: uppercase;
}

/* ── Image slot styling override (when used) ─────────────────────────────── */
/* Scale-to-fit wrapper — inner content scales down via transform when
   it would otherwise overflow its container. */
.fit-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  min-height: 0;
  min-width: 0;
}
.fit-inner {
  width: 100%;
  transform-origin: top center;
  will-change: transform;
}

image-slot {
  --is-bg:    #1a1a1a;
  --is-fg:    #f5f1e8;
  --is-stripe: #2a2a2a;
  background: var(--is-bg);
}

/* placeholder caption inside a dark slot */
.slot-cap {
  position: absolute; left: 12px; bottom: 10px;
  color: #f5f1e8aa;
  font-family: var(--mono); font-size: var(--tx-tiny);
  letter-spacing: 0.14em; text-transform: uppercase;
  pointer-events: none;
}

/* ── Placeholders (dark + diagonal stripe + caption) ─────────────────────── */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(135deg,
      transparent 0 9px,
      rgba(255,255,255,0.05) 9px 10px),
    #1a1a1a;
  color: #f5f1e8;
  overflow: hidden;
}
.ph .cap {
  position: absolute; left: 10px; bottom: 8px;
  font-family: var(--mono); font-size: var(--tx-tiny);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(245,241,232,.55);
  pointer-events: none;
}
.ph::before {
  content: ""; position: absolute; inset: 0;
  border: 1px solid rgba(245,241,232,.08);
  pointer-events: none;
}

/* ── Mobile layout — under 850px viewport width ──────────────────────────
   Disables the transform-scale fit and re-flows the dash as a vertically
   scrolling page:
     · Header: logo only (no clock / weather / day)
     · Ticker: unchanged
     · Body: filmography (1/3) + featured (2/3) side-by-side, bio below
     · Footer: contacts row, then copyright row (no version stamp)
*/
@media (max-width: 1000px) {
  .stage { overflow-y: auto; overflow-x: hidden; }

  .dash {
    width: 100vw;
    height: auto;
    min-height: 100vh;
    transform: none;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
  }

  /* HEADER — only the logo cell shows */
  .header { grid-template-columns: 1fr; }
  .header > .cell:nth-child(2),
  .header > .cell.datestamp { display: none; }
  .header > .cell.logotype { border-right: none; }
  .logotype .sub { display: none; }

  /* BODY — filmo 1fr / featured 2fr in row 1, bio full width in row 2 */
  .body {
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto auto;
    min-height: 0;
  }

  /* Hide the filmography count in the filmo header on mobile */
  .filmo .head span.eyebrow { display: none; }
  .body > .cell.filmo    { grid-column: 1; grid-row: 1; max-height: 0; min-height: 100%; }
  .body > .cell.feature  { grid-column: 2; grid-row: 1; overflow: visible; }
  .body > .cell.aboutcol {
    grid-column: 1 / -1;
    grid-row: 2;
    border-right: none !important;
    /* No border-top here — the .filmo / .feature cells in the row above
     already supply a border-bottom (.cell base rule); adding a top
     border doubles the hairline above the bio. */
  }

  /* Featured meta row stacks under the trailer */
  .feature .meta-row { grid-template-columns: 1fr; }
  .feature .meta-row .credits .ttl { text-align: left; }

  /* Featured panel: content-driven height, no internal scroll */
  .feature .trailer-wrap {
    overflow: visible;
    flex: 0 0 auto;
  }

  /* Filmography rows stack vertically on mobile: year/role · still · title · info.
     `.meta` uses display:contents so its three children flatten into the
     row-f flex container; we then assign explicit orders so the still slots
     between yr and ttl. */
  .filmo .row-f {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Match the desktop trick: extend the row past the 12px scrollbar
       gutter so the bottom hairline reaches the cell's right edge. */
    margin-right: -12px;
    padding: 16px calc(var(--pad) + 12px) 16px var(--pad);
  }
  .filmo .row-f .meta { display: contents; }
  .filmo .row-f .still-img.still {
    /* Full-width still on mobile, 16:9 aspect to match the trailer ratio. */
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    order: 2;
  }
  .filmo .row-f .meta .yr          { order: 1; }
  .filmo .row-f .meta .title-group { order: 3; }
  .filmo .row-f .meta .ttl  { white-space: normal; overflow: visible; text-overflow: clip; }
  .filmo .row-f .meta .info { white-space: normal; overflow: visible; text-overflow: clip; }

  /* At narrow widths shrink every logo together by capping --logo-h to a
     viewport-relative size. Since --logo-h is the same on every row, all
     logos stay the same size and shrink in lockstep. */
  .filmo .film-logo {
    --logo-h: min(
      calc(var(--tx-lead) * 1.15 + var(--tx-tiny) * 1.5 + 5px),
      7vw
    );
    transform: scale(var(--logo-scale-mobile, var(--logo-scale, 1)));
  }

  /* FOOTER — two stacked rows */
  .footer {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .footer > .cell                { padding: 18px var(--pad); border-right: none; }
  .footer > .cell.foot-contact   {
    grid-column: 1; grid-row: 1;
    justify-content: center;
    flex-wrap: wrap;
    white-space: normal;
    row-gap: 12px;
    /* Extra bottom padding so the underline on the link text doesn't
       kiss the hairline below when the row wraps to two lines. */
    padding-bottom: 22px;
    border-bottom: 1px solid var(--hair);
  }
  .footer > .cell:first-child    {
    grid-column: 1; grid-row: 2;
    justify-content: center;
    /* Extra breathing room below the colophon — otherwise the last line
       sits right against the page edge when the contact row wraps. */
    padding-bottom: 24px;
  }
  .footer > .cell.right.last     { display: none; }

  .film-gallery .gallery-item {
    flex: 0 0 calc((100% - (var(--gallery-cols-mobile) - 1) * 2px) / var(--gallery-cols-mobile));
  }
  /* Maximize is desktop-only — disable the affordance and overlay on mobile. */
  .film-gallery .gallery-item img { cursor: default; }
  .gallery-max { display: none; }
}

/* Dark mode toggle */
.datestamp .dm-btn {
  appearance: none;
  width: auto; height: 24px;
  padding: 0 8px;
  border: 1px solid var(--hair);
  background: transparent;
  font-family: var(--mono); font-size: 12px;
  color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 5px;
  transition: background .15s, color .15s;
  line-height: 1;
  white-space: nowrap;
}
.datestamp .dm-btn:hover {
  background: var(--ink); color: var(--paper);
}

/* Dark mode */
html.dark {
  --paper: #111111;
  --ink:   #f0ece3;
  --muted: #a09890;  /* was #7a7368 */
  --hair:  #f0ece3;
  --soft:  #ffffff0d;
}
html.dark .aboutcol .bio,
html.dark .feature .meta-row .lede p {
  color: var(--ink);
}
html.dark .hw-weather .day {
  border-right: 1px dotted color-mix(in srgb, var(--ink) 15%, transparent);
}
html.dark .feature .meta-row .credits .ln {
  border-bottom: 1px dotted color-mix(in srgb, var(--ink) 15%, transparent);
}
html.dark .filmo .list::-webkit-scrollbar-button:vertical:decrement,
html.dark .filmo .list::-webkit-scrollbar-button:vertical:start:decrement,
html.dark .feature .trailer-wrap::-webkit-scrollbar-button:vertical:decrement,
html.dark .feature .trailer-wrap::-webkit-scrollbar-button:vertical:start:decrement,
html.dark .aboutcol .section::-webkit-scrollbar-button:vertical:decrement,
html.dark .aboutcol .section::-webkit-scrollbar-button:vertical:start:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M5 2 L9 8 L1 8 Z' fill='%23f0ece3'/></svg>");
}
html.dark .filmo .list::-webkit-scrollbar-button:vertical:increment,
html.dark .filmo .list::-webkit-scrollbar-button:vertical:end:increment,
html.dark .feature .trailer-wrap::-webkit-scrollbar-button:vertical:increment,
html.dark .feature .trailer-wrap::-webkit-scrollbar-button:vertical:end:increment,
html.dark .aboutcol .section::-webkit-scrollbar-button:vertical:increment,
html.dark .aboutcol .section::-webkit-scrollbar-button:vertical:end:increment {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M5 8 L9 2 L1 2 Z' fill='%23f0ece3'/></svg>");
}

/* Two buttons side by side (dark mode + language) */
.datestamp-btns {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  width: 100%;
  justify-content: space-between;
}

/* Language toggle — same style as dm-btn but slightly wider */
.lang-btn {
  width: auto !important;
  padding: 0 8px;
  letter-spacing: 0.14em;
}