/* atlas.css: the whole look of the site.
 *
 * Contents
 *    1. Tokens: colours, type sizes and spacing as CSS variables, for "On paper" and "On film"
 *    2. Header
 *    3. Controls: fields, buttons, chips, the length slider, the Country / Genre picker
 *    4. Browse: the grid and the title cards
 *   4b. Search: suggestions, the cue on each card, notes
 *   4c. "I saw it at a festival": steps, festival buttons, chips, the dense wall of posters
 *    5. Feeling Lucky, and the dice
 *    6. Detail dialog
 *   6b. Your diary: title-page buttons, card marks, the My Sagasu page
 *    7. Awards and tables
 *    8. Analytics
 *    9. Data log
 *   10. Phones and touch screens: bottom tab bar, full-screen sheets, bigger tap targets
 *   11. The November 2026 redesign: centred titles, the ticket card, ticket and receipt, the projector Feed
 *
 * Everything below uses the variables from section 1, e.g. color: var(--muted) or gap: var(--g3), so
 * changing a colour or a spacing step there changes it everywhere.
 */

/* ================================================================================================
   1. Tokens
   ================================================================================================ */
/* What the variables mean:
     --bg             page background       --fg      main text         --fg-2   secondary text
     --surface-2, -3  slightly raised areas --muted   quiet text: labels, hints, counts
     --line, --line-2 hairlines and borders --accent  the one highlight colour: titles, main button, active tab
     --ruling         the thin lines the page is ruled with, like the list of a catalogue (see body)
     --rule           the line of the sheet drawn on that ruling (ground.js): a little darker than --ruling
     --stock-1 … -4   the other papers a ticket is printed on, as light as --surface-2 (section 11i)
     --tone-0 … -7    stamp inks for title cards without a picture (see .poster)
     --s1 … --s8      chart colours         --focus   the outline that shows keyboard focus
     --t0 … --t6      type sizes            --g1 … --g7  spacing steps          --r  corner radius
   Two themes with the same names. "On paper" comes first and is the default for every visitor; "On film" is
   chosen with the ◐ button (<html data-theme="dark">) and is what the Feed always wears.

   The look (owner's redesign, November 2026; DESIGN.md): a cinema's paper goods. Cream paper, cloth-coloured
   tickets, black ink, one vermilion for every title; since 12 Nov 2026 in softer values (a paper that does not
   glare, a warm black, a deeper vermilion). Three typefaces with one job each:
     --font-display  Jost 500 in wide-spaced capitals (the lettering of a cinema sign): page and film titles
     --font-ui       Hind Madurai: everything you read or press — text, buttons, menus
     --font-mono     DM Mono: catalogue data — years, runtimes, counts, small labels
   Type sizes step by the square root of the golden ratio (every second step is ×1.618); spacing follows
   the Fibonacci run 5 · 8 · 13 · 21 · 34 · 55 · 89. Corners are square. */
:root {
  color-scheme: light;
  --bg: #e9e3d6;
  --surface: #e9e3d6;
  --surface-2: #cdc3af;
  --stock-1: #c1c8af;
  --stock-2: #d9bdb4;
  --stock-3: #abcad2;
  --stock-4: #ccc4ab;
  --surface-3: #beb39d;
  --fg: #1a1612;
  --fg-2: #2e2a25;
  --muted: #544f48;
  --line: #d3cbbc;
  --line-2: #aca28e;
  --rule: #d6d2ca; /* the silverpoint line of what is drawn on the ground (ground.js) */
  --ruling: #dfdad0; /* the ruling itself: lighter than anything drawn or standing on it */
  --accent: #922c1e;
  --accent-ink: #f1ece3;
  --accent-soft: rgba(146, 44, 30, 0.08);
  --win: #6b4b0e;
  --focus: #1c55c5;
  --tone-0: #8d3223;
  --tone-1: #354a66;
  --tone-2: #3f5542;
  --tone-3: #634d18;
  --tone-4: #2a2725;
  --tone-5: #833840;
  --tone-6: #584b65;
  --tone-7: #2b5757;
  --s1: #2a78d6;
  --s2: #eb6834;
  --s3: #1baf7a;
  --s4: #eda100;
  --s5: #e87ba4;
  --s6: #008300;
  --s7: #6250d6;
  --s8: #e34948;
  --grid: #ddd6c8;
  --axis: #aca28e;
  --shadow: 0 24px 70px rgba(60, 40, 10, 0.16);
  --lift: rgba(40, 28, 14, 0.2); /* the shadow under a ticket and receipt lifted off the page */
  --font-ui: 'Hind Madurai', system-ui, -apple-system, 'Segoe UI', Roboto, 'Hiragino Sans',
    'Noto Sans CJK JP', 'Microsoft YaHei', sans-serif;
  --font-display: 'Jost', 'Futura PT', Futura, 'Century Gothic', 'Hiragino Sans', 'Noto Sans CJK JP',
    'Microsoft YaHei', sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-print: 'Special Elite', 'Courier Prime', 'Courier New', 'DM Mono', ui-monospace, monospace;
  --t0: 12px;
  --t1: 15px;
  --t2: 19px;
  --t3: 24px;
  --t4: 31px;
  --t5: 39px;
  --t6: 50px;
  --g1: 5px;
  --g2: 8px;
  --g3: 13px;
  --g4: 21px;
  --g5: 34px;
  --g6: 55px;
  --g7: 89px;
  --r: 0px;
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #12100e;
  --surface: #12100e;
  --surface-2: #1e1b18;
  --stock-1: #1b1c17;
  --stock-2: #201a19;
  --stock-3: #171d1f;
  --stock-4: #1d1c16;
  --surface-3: #2b2823;
  --fg: #ede7dc;
  --fg-2: #c7c0b3;
  --muted: #9b9386;
  --line: #2c2925;
  --line-2: #46413b;
  --rule: #23211e;
  --ruling: #1b1917;
  --accent: #e36a56;
  --accent-ink: #1a0905;
  --accent-soft: rgba(227, 106, 86, 0.14);
  --win: #e0c071;
  --focus: #7fb2ff;
  --tone-0: #cc6e5b;
  --tone-1: #7693ba;
  --tone-2: #7ba080;
  --tone-3: #cdaf6a;
  --tone-4: #a39c90;
  --tone-5: #be727d;
  --tone-6: #9b8ab1;
  --tone-7: #6fadab;
  --s1: #3987e5;
  --s2: #d95926;
  --s3: #199e70;
  --s4: #c98500;
  --s5: #d55181;
  --s6: #008300;
  --s7: #9085e9;
  --s8: #e66767;
  --grid: #23201c;
  --axis: #46413b;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  --lift: rgba(0, 0, 0, 0.5);
}
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html {
  -webkit-text-size-adjust: 100%;
}
/* The page is ruled like the list of a catalogue, in thin silverpoint lines (owner, 12 Nov 2026): a row every
   --g5 and a column every --g7, counted from the middle of the page so that both sides match, and set off
   so that a row line lies under the header's own. The lines are part of the paper: they scroll with the page,
   and whatever has a surface of its own (the header, a ticket, a sheet, the Feed) covers them. One pixel wide;
   half a pixel where the screen can draw it. */
body {
  --rule-w: 1px;
  background-color: var(--bg);
  /* third, a sheet of a production's paperwork drawn over the cells in the same line (ground.js, --sheet) */
  background-image: linear-gradient(to right, var(--ruling) var(--rule-w), transparent 0),
    linear-gradient(to bottom, var(--ruling) var(--rule-w), transparent 0), var(--sheet, none);
  background-size: var(--g7) var(--g5), var(--g7) var(--g5), auto;
  background-position: 50% 60px;
  background-position: round(down, 50%, 1px) 60px; /* a line on half a pixel would be drawn as a blur */
  color: var(--fg);
  font: 400 var(--t1) / 1.6 var(--font-ui);
  margin: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
@media (min-resolution: 2dppx) {
  body {
    --rule-w: 0.5px;
  }
}
/* What has lines of its own, or is read line after line, lies on a plain sheet a little larger than itself:
   a table, a chart, a column of text. */
.tablewrap,
.chart,
.prose {
  background: var(--bg);
  box-shadow: 0 0 0 var(--g3) var(--bg);
}
a {
  color: inherit;
}
button,
input,
select {
  font: inherit;
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
/* tick boxes, radio buttons and sliders drawn by the browser take the accent colour */
input {
  accent-color: var(--accent);
}
/* the × that clears a search box: the browser draws it blue; this draws it in the quiet text colour,
   as a mask (a shape cut out of a coloured square), so it follows the theme */
input[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  cursor: pointer;
  background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 3l8 8M11 3l-8 8' stroke='black' stroke-width='1.8' stroke-linecap='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 14 14'%3E%3Cpath d='M3 3l8 8M11 3l-8 8' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
input[type='search']::-webkit-search-cancel-button:hover {
  background: var(--fg);
}
.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: max(var(--g4), env(safe-area-inset-left, 0px));
  padding-right: max(var(--g4), env(safe-area-inset-right, 0px));
}
@media (max-width: 520px) {
  .wrap {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
}
body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  background: var(--bg);
  z-index: 30;
}

/* ================================================================================================
   2. Header: the site name, the section tabs, the theme switch
   ================================================================================================ */
.top {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.top .wrap {
  display: flex;
  align-items: center;
  gap: var(--g4);
  padding-block: var(--g3);
  flex-wrap: wrap;
}
/* The logo (the owner chose it on 12 Nov 2026): the mark, a curtain lantern, with the name drawn beside it in the
   same strokes. It is inline SVG in the text colour and the accent, so one drawing serves both themes
   (scripts/logo_inline.py puts it in from the logo kit). The mark is tall, so the logo is given a height: 40px,
   which the link takes back with a negative margin so that the header keeps its height, and a finger gets 44px. */
.brand {
  display: block;
  flex: none;
  margin-block: -5px;
  padding-block: 2px;
  color: var(--fg);
  text-decoration: none;
}
.brand .logo {
  display: block;
  height: 40px;
  width: auto;
}
.brand:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}
nav.tabs {
  display: flex;
  gap: var(--g4);
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 100%;
}
nav.tabs::-webkit-scrollbar {
  display: none;
}
nav.tabs button {
  background: none;
  border: 0;
  padding: var(--g1) 0;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  font-weight: 500;
  font-size: 13.5px;
  box-shadow: inset 0 -2px 0 transparent;
  transition:
    color 0.15s,
    box-shadow 0.15s;
}
nav.tabs button:hover {
  color: var(--fg);
}
/* the place one is in: its name in the accent over an accent rule, as on a phone's bottom bar */
nav.tabs button[aria-current='page'] {
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}
/* The bar holds five places (Lucky, Feed, Browse, Mine, More), which fit on one line down to a phone's width;
   phones (760px and narrower) use the bottom bar instead. The other pages and the settings are in the More menu
   (.msheet, section 10). */

main {
  padding-block: var(--g6) var(--g7);
}
@media (max-width: 520px) {
  main {
    padding-block: var(--g5) var(--g6);
  }
}
.view[hidden] {
  display: none !important;
}
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: auto; /* Fraunces draws large sizes with finer detail than small ones */
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}
/* small catalogue labels: mono capitals, slightly spaced ("SHORT · 2017 · SWEDEN") */
.eyebrow {
  font: 500 11px/1.4 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* ================================================================================================
   3. Controls: one height, one border, one radius for every field and button
   ================================================================================================ */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g2);
  align-items: center;
}
.ctl {
  display: inline-flex;
  align-items: center;
  gap: var(--g2);
  background: var(--bg); /* plain paper: the page's ruled lines stop at a field, a button, a chip */
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0 var(--g3);
  height: 36px;
  min-width: 0;
  transition: border-color 0.15s;
}
.ctl:hover {
  border-color: var(--line-2);
}
.ctl label {
  font-size: var(--t0);
  color: var(--muted);
  white-space: nowrap;
}
.ctl input,
.ctl select {
  background: none;
  border: 0;
  outline: 0;
  min-width: 0;
  height: 34px;
}
.ctl select {
  cursor: pointer;
  max-width: 190px;
}
.ctl select option {
  background: var(--bg);
  color: var(--fg);
}
.ctl.search {
  flex: 1 1 280px;
}
.ctl.search input {
  width: 100%;
}
.ctl.search span {
  color: var(--muted);
}
.ctl.years input {
  width: 44px;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.ctl.years input::-webkit-inner-spin-button,
.ctl.years input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ctl:focus-within {
  border-color: var(--fg-2);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g2);
}
.chip {
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 999px;
  padding: 5px var(--g3);
  cursor: pointer;
  font-size: 13px;
  color: var(--fg-2);
  display: inline-flex;
  align-items: center;
  gap: var(--g2);
  line-height: 1.2;
  transition:
    border-color 0.15s,
    color 0.15s;
}
@media (hover: hover) {
  .chip:hover {
    border-color: var(--line-2);
    color: var(--fg);
  }
}
.chip .sw {
  display: none;
}
.chip[aria-pressed='true'] {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.btn {
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: var(--r);
  height: 36px;
  padding: 0 var(--g3);
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: var(--g2);
  white-space: nowrap;
  color: var(--fg);
  transition:
    border-color 0.15s,
    background 0.15s;
}
@media (hover: hover) {
  .btn:hover {
    border-color: var(--line-2);
    background: var(--surface-2);
  }
}
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
@media (hover: hover) {
  .btn.primary:hover {
    background: var(--accent);
    filter: brightness(1.06);
  }
}
.btn.ghost {
  border-color: transparent;
  background: none;
  color: var(--muted);
}
.btn.ghost:hover {
  color: var(--fg);
  background: none;
  border-color: transparent;
}
.btn[disabled] {
  opacity: 0.5;
  cursor: default;
}
.btn[aria-expanded='true'] {
  border-color: var(--fg-2);
}
.btn .n {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--g2);
  cursor: pointer;
  font-size: 14px;
  color: var(--fg-2);
  height: 36px;
  padding: 0 var(--g1);
}
.toggle input {
  accent-color: var(--accent);
  margin: 0;
}

/* length (minutes) range: two native range inputs sharing one rail */
.ctl.lenctl {
  flex: 1 1 300px;
  max-width: 440px;
  gap: var(--g3);
}
.dual {
  position: relative;
  flex: 1;
  min-width: 120px;
  height: 34px;
}
.dual .rail {
  position: absolute;
  left: 9px;
  right: 9px;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: var(--line-2);
}
.dual .fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--accent);
}
.ctl .dual input[type='range'] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 34px;
  margin: 0;
  padding: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.dual input[type='range']::-webkit-slider-runnable-track {
  background: none;
  height: 34px;
}
.dual input[type='range']::-moz-range-track {
  background: none;
  height: 34px;
}
.dual input[type='range']::-webkit-slider-thumb {
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--fg);
  cursor: grab;
}
.dual input[type='range']::-moz-range-thumb {
  pointer-events: auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--fg);
  cursor: grab;
}
.dual input[type='range']:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.dual input[type='range']:active::-webkit-slider-thumb {
  cursor: grabbing;
}
.lenout {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--fg-2);
  min-width: 88px;
  text-align: right;
  font-size: 13px;
}
@media (max-width: 620px) {
  .ctl.lenctl {
    flex-basis: 100%;
    max-width: none;
  }
}

/* multi-select popover */
.ms {
  position: relative;
}
.ms > .btn .ms-val {
  color: var(--muted);
  font-weight: 400;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 25;
  width: min(300px, 86vw);
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: var(--g2);
}
.ms-pop input[type='search'] {
  width: 100%;
  height: 34px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: none;
  padding: 0 var(--g3);
  outline: 0;
}
.ms-pop input[type='search']:focus {
  border-color: var(--fg-2);
}
.ms-list {
  max-height: 300px;
  overflow: auto;
  margin-top: var(--g1);
  display: flex;
  flex-direction: column;
}
.ms-list label {
  display: flex;
  align-items: center;
  gap: var(--g2);
  padding: 6px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}
@media (hover: hover) {
  .ms-list label:hover {
    background: var(--surface-2);
  }
}
.ms-list label span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ms-list label em {
  font-style: normal;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.ms-list input {
  accent-color: var(--accent);
}
.ms-foot {
  display: flex;
  justify-content: space-between;
  gap: var(--g2);
  border-top: 1px solid var(--line);
  margin-top: var(--g1);
  padding-top: var(--g1);
}
.ms-foot button {
  background: none;
  border: 0;
  color: var(--fg-2);
  cursor: pointer;
  padding: 4px 6px;
}
.ms-foot button:hover {
  color: var(--fg);
}

/* ================================================================================================
   4. Browse: the Films / Series / Shorts pages, the grid and the title cards
   ================================================================================================ */
.browse-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--g4);
  flex-wrap: wrap;
  margin-bottom: var(--g5);
}
.browse-head h1 {
  font-size: clamp(var(--t5), 6vw, 64px);
  line-height: 1;
  letter-spacing: -0.025em;
}
.filterbar {
  display: flex;
  flex-direction: column;
  gap: var(--g3);
  margin-bottom: var(--g4);
}
.fpanel {
  display: flex;
  flex-direction: column;
  gap: var(--g3);
  padding-block: var(--g4);
  border-block: 1px solid var(--line);
}
.resline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--g3);
  flex-wrap: wrap;
  margin: 0 0 var(--g4);
  color: var(--muted);
  font-size: 14px;
}
.resline b {
  color: var(--fg);
  font: 500 13px var(--font-mono);
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--g5) var(--g4);
}
@media (max-width: 520px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--g4) var(--g3);
  }
}
.card {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--g3);
  min-width: 0;
}
.card:focus-visible .poster {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.card .cap {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.card .cap b {
  display: block;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (hover: hover) {
  .card:hover .cap b {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--line-2);
  }
}
.card .cap span {
  display: block;
  font: 400 11.5px/1.5 var(--font-mono);
  letter-spacing: -0.01em;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* a music video: a plain tag on the poster and a word in the caption */
.poster .mvtag {
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 3;
  padding: 2px 6px;
  border-radius: 3px;
  background: #e8467c;
  color: #fff;
  font: 700 11px/1.3 var(--font-mono);
  letter-spacing: 0.04em;
}
.card .cap .mvline {
  font-style: normal;
  font-weight: 600;
  color: #e8467c;
}
/* the second title on a card: the original-language title, under the title in the visitor's language */
.card .cap .t2 {
  font: 400 12.5px/1.35 var(--font-ui);
  letter-spacing: 0;
  color: var(--fg-2);
}
/* the Titles language menu, a row of the More menu */
.lang-sel {
  font: 500 12px/1 var(--font-mono);
  color: var(--fg-2);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r);
  height: 32px;
  padding: 0 6px;
  max-width: 11em;
  cursor: pointer;
}
.hmlist {
  display: grid;
}
.hmlist button {
  display: flex;
  gap: var(--g3);
  align-items: baseline;
  justify-content: space-between;
  text-align: left;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  padding: var(--g2) 0;
  color: inherit;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  min-width: 0;
}
.hmlist button:last-child {
  border-bottom: 1px solid var(--line);
}
.hmlist button b {
  font-weight: 500;
  min-width: 0;
  overflow-wrap: anywhere;
}
.hmlist button span {
  color: var(--muted);
  font-size: 12px;
  text-align: right;
  flex: 0 1 auto;
  min-width: 0;
}
@media (hover: hover) {
  .hmlist button:hover b {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
.qa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--g4);
  margin: var(--g4) 0;
}
.qa-grid .kpi b {
  font-size: var(--t3);
}
table.data td.n,
table.data th.n {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.more {
  display: flex;
  justify-content: center;
  margin-top: var(--g5);
}
.empty {
  grid-column: 1 / -1; /* it sits in the card grid: use the full width, not one card's */
  padding: var(--g6) 0;
  color: var(--muted);
  text-align: center;
}
.empty .elsewhere {
  margin-top: var(--g4);
  color: var(--fg);
}

/* title cards: the poster when a source has one, otherwise the title set flat on a quiet ground */
.poster {
  position: relative;
  aspect-ratio: 2/3;
  max-width: 100%;
  border-radius: 3px;
  overflow: hidden;
  color: var(--fg);
  background: var(--tone, var(--surface-2));
  isolation: isolate;
  transition: opacity 0.15s ease;
}
/* A title card without a poster gets one of eight grounds, picked from its title (poster() in cards.js
   sets the class t0 … t7), so a wall of them reads like a box of painted cels rather than grey blanks. */
.poster.t0 {
  --tone: var(--tone-0);
}
.poster.t1 {
  --tone: var(--tone-1);
}
.poster.t2 {
  --tone: var(--tone-2);
}
.poster.t3 {
  --tone: var(--tone-3);
}
.poster.t4 {
  --tone: var(--tone-4);
}
.poster.t5 {
  --tone: var(--tone-5);
}
.poster.t6 {
  --tone: var(--tone-6);
}
.poster.t7 {
  --tone: var(--tone-7);
}
/* a thin frame inside the edge, like a printed title card */
.poster:not(.has-img)::after {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid color-mix(in srgb, var(--fg) 18%, transparent);
  border-radius: 1px;
  pointer-events: none;
}
@media (hover: hover) {
  .card .poster {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .card:hover .poster {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  }
}
@media (prefers-reduced-motion: reduce) {
  .card:hover .poster {
    transform: none;
  }
}
.poster .pt {
  position: absolute;
  left: var(--g3);
  right: var(--g3);
  bottom: var(--g3);
  z-index: 2;
  font: 600 var(--fs, 17px) / 1.12 var(--font-display);
  letter-spacing: -0.01em;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.poster .pk {
  position: absolute;
  left: var(--g3);
  top: var(--g3);
  z-index: 2;
  font: 500 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg);
}
.poster .pb {
  position: absolute;
  right: var(--g2);
  top: var(--g2);
  z-index: 3;
  display: flex;
  gap: 4px;
}
.poster .pb i {
  font-style: normal;
  background: var(--fg);
  color: var(--bg);
  border-radius: 2px;
  padding: 3px 5px;
  font: 500 10.5px/1 var(--font-mono);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.poster .pb i.w {
  background: var(--accent);
  color: var(--accent-ink);
}
.poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
/* a wide picture (video still, article picture) shown whole, over a blurred copy of itself (fitPoster in cards.js) */
.poster.wide img {
  object-fit: contain;
}
.poster.wide::before {
  content: '';
  position: absolute;
  inset: -16px;
  z-index: 0;
  background: var(--bk) center / cover no-repeat;
  filter: blur(14px) saturate(1.1) brightness(0.8);
}
.poster.has-img .pt,
.poster.has-img .pk {
  display: none;
}

/* ================================================================================================
   4b. Search (js/search.js): suggestions under the box, the cue on each card, the note instead of an empty page
   ================================================================================================ */
.ctl.search {
  position: relative;
}
.suggest {
  position: absolute;
  left: -1px;
  right: -1px;
  top: calc(100% + 4px);
  z-index: 40;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  padding: var(--g1) 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--bg);
  box-shadow: var(--shadow);
}
.suggest .sg {
  display: flex;
  align-items: baseline;
  gap: var(--g2);
  padding: var(--g2) var(--g3);
  cursor: pointer;
  font-size: 14px;
}
.suggest .sg b {
  font-weight: 500;
}
.suggest .sg .tag {
  font: 500 10.5px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.suggest .sg .nt {
  color: var(--muted);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.suggest .sg.on,
.suggest .sg:hover {
  background: var(--surface-2);
}
.card .cap .cue {
  white-space: normal;
  color: var(--accent);
  font: 500 11px/1.4 var(--font-mono);
  letter-spacing: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
/* The director's own website: a button on cards of films whose director keeps one (cards.js siteChip), and beside
   the director's name on the film's page (detail.js). The owner, 12 Nov 2026: "a little bit bigger and clickable
   for mobile users". It is 12px type (11px before), and the area that takes a tap (::before) is larger than the
   button that is seen. On a touch screen or a narrow window it is 36px high with a 46px tap area; on a ticket it
   then runs from edge to edge (section 11). */
.card .cap .site,
.facts dd .site {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  padding: 3px 9px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font: 500 12px/1.5 var(--font-mono);
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  overflow: visible; /* a caption's line is clipped (.card .cap span); this one's tap area lies outside it */
  cursor: pointer;
}
.card .cap .site::before,
.facts dd .site::before {
  content: '';
  position: absolute;
  inset: -6px -8px; /* measured from inside the 1px border: 5px and 7px around the button */
}
.card .cap .site:hover,
.card .cap .site:active,
.facts dd .site:hover,
.facts dd .site:active {
  background: var(--accent);
  color: var(--accent-ink);
}
.card .cap .site {
  align-self: flex-start;
  margin-top: 4px;
}
.facts dd .site {
  margin: 2px 0 2px 8px;
  vertical-align: middle;
}
/* the way to the director's page (the owner, 13 Nov 2026): a long name wraps instead of widening the page */
.facts dd .dpage {
  max-width: 100%;
  white-space: normal;
}
@media (pointer: coarse), (max-width: 760px) {
  .card .cap .site,
  .facts dd .site {
    padding: 8px 12px;
    font-size: 13px;
    line-height: 18px;
    text-align: center;
  }
  .card .cap .site::before,
  .facts dd .site::before {
    inset: -6px -7px; /* 36px + 5px above and below: a 46px tap area */
  }
  .facts dd .site {
    display: block;
    width: max-content;
    margin: 9px 0 3px;
  }
  /* "All films by <name> →" under the Artist site button: far enough below that the two tap areas do not meet */
  .facts dd .site + .dpage {
    margin-top: 16px;
  }
}
.empty.searchnote {
  padding: var(--g3) 0 var(--g4);
  text-align: left;
  color: var(--fg-2);
}
.empty.searchnote p {
  margin: 0 0 var(--g2);
}

/* ================================================================================================
   4c. "I saw it at a festival" (js/festival.js): steps, festival buttons, chips, a dense wall of posters
   ================================================================================================ */
.fsteps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g2);
  list-style: none;
  margin: 0 0 var(--g4);
  padding: 0;
  font: 500 12px/1.4 var(--font-mono);
  color: var(--muted);
}
.fsteps li + li::before {
  content: '›';
  margin-right: var(--g2);
}
.fsteps span {
  color: var(--fg);
}
.ffilter {
  width: min(520px, 100%);
  margin-bottom: var(--g4);
}
.fcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
  gap: var(--g3);
}
.fcard {
  all: unset;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--g3) var(--g4);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.fcard b {
  font: 600 var(--t2) / 1.2 var(--font-display);
}
.fcard span {
  color: var(--fg-2);
  font-size: 13px;
}
.fcard .n {
  font: 500 11px/1.4 var(--font-mono);
  color: var(--muted);
}
.fcard:hover {
  border-color: var(--line-2);
  background: var(--surface-2);
}
.fcard:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.fstep {
  margin-bottom: var(--g4);
}
.fstep h4 {
  margin: 0 0 var(--g2);
  font: 500 11px/1.3 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-2);
}
.chip .n {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.chip[aria-pressed='true'] .n {
  color: inherit;
  opacity: 0.75;
}
.fchips {
  margin-bottom: var(--g4);
}
/* under 60 films: posters only, many to a row, the way you scan a wall for the image you remember */
.grid.dense {
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: var(--g3);
}
.grid.dense .card .cap span:not(.cue):not(.site),
.grid.dense .card .by {
  display: none;
}
.grid.dense .card .cap b {
  font-size: 12.5px;
}

/* ================================================================================================
   5. Feeling Lucky, and the dice
   ================================================================================================ */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
  gap: var(--g5);
  align-items: end;
  margin: 0 0 var(--g5);
}
.hero h1 {
  font-size: clamp(var(--t5), 5.4vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.stats {
  display: flex;
  gap: var(--g5);
  justify-content: flex-end;
}
.stat b {
  display: block;
  font: 600 var(--t4) / 1 var(--font-display);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}
.stat span {
  font: 500 11px var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
  }
  .stats {
    justify-content: flex-start;
  }
}
.lucky-panel {
  display: flex;
  flex-direction: column;
  gap: var(--g4);
}
.dials {
  display: flex;
  flex-direction: column;
  gap: var(--g3);
  padding-block: var(--g4);
  border-block: 1px solid var(--line);
}
.lucky-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g2);
  align-items: center;
}
.seg {
  display: inline-flex;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 2px;
  gap: 2px;
}
.seg button {
  border: 0;
  background: none;
  border-radius: 4px;
  padding: 0 var(--g3);
  height: 30px;
  cursor: pointer;
  color: var(--fg-2);
  font-weight: 500;
  font-size: 14px;
}
.seg button:hover {
  color: var(--fg);
}
.seg button[aria-pressed='true'] {
  background: var(--fg);
  color: var(--bg);
}
.go {
  display: flex;
  gap: var(--g3);
  align-items: center;
  flex-wrap: wrap;
}
.go .btn.primary {
  height: 44px;
  padding: 0 var(--g4);
  font-size: var(--t1);
}
.go small {
  color: var(--muted);
}
/* the three picks are long tickets: section 11f */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* dice roll (Feeling lucky): three dice tumble while the draw happens, then land and turn into the picks */
.btn .dice-ico {
  flex: none;
  margin-left: -2px;
}
.btn.rolling[disabled] {
  opacity: 1;
}
.btn.rolling .dice-ico {
  animation: diceSpin 0.9s cubic-bezier(0.25, 0.8, 0.25, 1);
}
@keyframes diceSpin {
  0% {
    transform: rotate(0) scale(1);
  }
  45% {
    transform: rotate(400deg) scale(1.3);
  }
  100% {
    transform: rotate(720deg) scale(1);
  }
}
.dice-row {
  grid-column: 1/-1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(34px, 8vw, 89px);
  height: 170px;
  padding-bottom: var(--g4);
}
.die-wrap {
  position: relative;
  perspective: 520px;
}
.die {
  --s: 55px;
  --h: calc(var(--s) / 2);
  width: var(--s);
  height: var(--s);
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-18deg) rotateY(24deg);
}
.die i {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  padding: 8px;
  border-radius: 10px;
  background: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
  backface-visibility: hidden;
}
.die i b {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent-ink);
  place-self: center;
  visibility: hidden;
}
.die i b.on {
  visibility: visible;
}
.die .f1 {
  transform: translateZ(var(--h));
}
.die .f6 {
  transform: rotateY(180deg) translateZ(var(--h));
}
.die .f3 {
  transform: rotateY(90deg) translateZ(var(--h));
}
.die .f4 {
  transform: rotateY(-90deg) translateZ(var(--h));
}
.die .f2 {
  transform: rotateX(90deg) translateZ(var(--h));
}
.die .f5 {
  transform: rotateX(-90deg) translateZ(var(--h));
}
.die-shadow {
  position: absolute;
  left: 50%;
  bottom: -16px;
  width: 50px;
  height: 6px;
  margin-left: -25px;
  border-radius: 50%;
  background: var(--line);
}
@media (prefers-reduced-motion: reduce) {
  .pick {
    animation: none;
  }
  .poster {
    transition: none;
  }
  .btn.rolling .dice-ico {
    animation: none;
  }
}
.pool {
  color: var(--muted);
  font-size: 13px;
  margin-top: var(--g5);
}

/* ================================================================================================
   6. Detail dialog: poster on the left third, facts on the right two thirds
   ================================================================================================ */
dialog.detail {
  border: 1px solid var(--line);
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  border-radius: 6px;
  width: min(1000px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  box-shadow: var(--shadow);
}
dialog.detail::backdrop {
  background: rgba(0, 0, 0, 0.55);
}
.dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--g5);
  padding: var(--g5);
  overflow: auto;
  max-height: calc(100vh - 24px);
}
.dl .side {
  display: flex;
  flex-direction: column;
  gap: var(--g3);
  position: sticky;
  top: 0;
  align-self: start;
}
.dl .side .btn {
  border: 0;
  padding: 0;
  height: auto;
  font-size: 13px;
  color: var(--muted);
  background: none;
}
.dl .side .btn:hover {
  color: var(--fg);
}
@media (max-width: 720px) {
  .dl {
    grid-template-columns: 1fr;
    padding: var(--g4) 16px;
    gap: var(--g4);
  }
  .dl .side {
    max-width: 160px;
    position: static;
  }
  .dl.noart .side {
    display: none;
  }
}
.dl h2 {
  font-size: clamp(var(--t4), 4.4vw, var(--t6));
  line-height: 1.02;
  letter-spacing: -0.02em;
  padding-right: 40px;
  margin-top: var(--g1);
}
.dl .orig {
  font: italic 400 19px/1.3 var(--font-display);
  color: var(--fg-2);
  margin-top: var(--g2);
}
.dl .alt {
  font-size: 13px;
  color: var(--muted);
  margin-top: var(--g1);
}
.detail .x {
  position: absolute;
  right: var(--g3);
  top: var(--g3);
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}
.detail .x:hover {
  background: var(--surface-2);
  color: var(--fg);
}
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(180px, 42%), 1fr)); /* two columns even on a phone */
  gap: var(--g4);
  margin: var(--g5) 0 0;
  padding-top: var(--g4);
  border-top: 1px solid var(--line);
}
.facts div {
  min-width: 0;
}
.facts dt {
  font: 500 10.5px/1.4 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}
/* a fact: the small quiet label names it, the value is what you read (larger, medium weight, main text colour) */
.facts dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  font-size: var(--t1);
  font-weight: 500;
  line-height: 1.4;
  color: var(--fg);
}
.sec {
  margin-top: var(--g5);
}
/* Section headings in a title's page come in two strengths, so a change of subject can be seen at a glance
   (the owner, 11 Nov 2026). The film's own record (awards and festivals, synopsis, watch links): Jost capitals
   in the main text colour over a full rule, its count as a figure in the accent. */
.sec h4 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--g3);
  margin: 0 0 var(--g3);
  padding-bottom: var(--g2);
  border-bottom: 1px solid var(--fg);
  font: 500 var(--t1) / 1.3 var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg);
}
.sec h4 b {
  font: 500 var(--t1) / 1.3 var(--font-mono);
  letter-spacing: 0;
  color: var(--accent);
}
/* What leads away from the film (other records with its title, look-up and search links): a small mono label
   in the quiet colour over a hairline, its links smaller and lighter, the blocks closer together. */
.sec.quiet {
  margin-top: var(--g4);
}
.sec.quiet h4 {
  justify-content: flex-start;
  margin-bottom: var(--g2);
  padding-bottom: var(--g1);
  border-bottom-color: var(--line);
  font: 500 10.5px/1.3 var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--muted);
}
.sec.quiet h4 b {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}
.sec.quiet .links a {
  font-size: 13px;
  color: var(--fg-2);
}
/* on a phone, where everything sits in one column, the two strengths are a step further apart */
@media (max-width: 720px) {
  .facts dd,
  .sec:not(.quiet) h4,
  .sec:not(.quiet) h4 b {
    font-size: 16px;
  }
  .sec:not(.quiet) {
    margin-top: var(--g6);
  }
  .sec:not(.quiet) h4 {
    border-bottom-width: 2px;
  }
}
.links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g2) var(--g4);
}
.links a {
  text-decoration: none;
  font-size: 14px;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 1px;
}
.links a:hover {
  border-bottom-color: var(--fg);
}
.links a.find {
  color: var(--fg-2);
  border-bottom-style: dashed;
}
table.aw {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
table.aw td {
  padding: var(--g2) var(--g3) var(--g2) 0;
  border-top: 1px solid var(--line);
  vertical-align: top;
}
table.aw td:last-child {
  padding-right: 0;
  text-align: right;
}
table.aw td:first-child {
  color: var(--muted);
  font: 400 13px var(--font-mono);
  width: 56px;
}
table.aw:not(.all) tr.xtra {
  display: none;
}
.res {
  font-size: var(--t0);
  font-weight: 500;
  border-radius: 999px;
  padding: 1px var(--g2);
  border: 1px solid var(--line);
  white-space: nowrap;
  color: var(--fg-2);
  display: inline-block;
  margin: 0 2px 4px 0;
}
button.res {
  font-family: inherit;
  background: none;
  cursor: pointer;
}
@media (hover: hover) {
  button.res:hover {
    border-color: var(--fg-2);
    color: var(--fg);
  }
}
.tlink.awlink {
  text-align: left;
}
.res.W {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}
.scores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g4) var(--g5);
}
.score b {
  display: block;
  font: 600 var(--t4) / 1 var(--font-display);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}
.score span {
  display: block;
  font-size: var(--t0);
  color: var(--muted);
  max-width: 26ch;
}
.desc {
  color: var(--fg-2);
  max-width: 66ch;
  margin: 0;
}
.prov {
  font-size: 13px;
  color: var(--muted);
}
details.fold {
  margin-top: var(--g5);
  border-top: 1px solid var(--line);
  padding-top: var(--g3);
}
details.fold > summary {
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
}
details.fold > summary::-webkit-details-marker {
  display: none;
}
details.fold > summary::after {
  content: ' +';
}
details.fold[open] > summary::after {
  content: ' −';
}
details.fold > summary:hover {
  color: var(--fg);
}
details.fold .sec {
  margin-top: var(--g4);
}

/* ================================================================================================
   6b. Your diary (js/mine.js, js/diary.js): the buttons on a title's page, the mark on cards, My Sagasu
   Everything that is "yours" wears the accent: a pressed button, your stars, your mark on a card.
   ================================================================================================ */
.mine {
  margin-top: var(--g4);
}
.mine-acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g2);
  align-items: center;
}
.mact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 var(--g3) 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--fg-2);
  font: 500 14px/1 var(--font-ui);
  cursor: pointer;
  transition:
    border-color 0.15s,
    color 0.15s,
    background 0.15s;
}
.mact svg,
.mine-acts2 .btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.mine-acts2 .btn svg {
  width: 16px;
  height: 16px;
}
@media (hover: hover) {
  .mact:hover {
    border-color: var(--line-2);
    color: var(--fg);
  }
}
.mact[aria-pressed='true'] {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.mact[data-act='l'][aria-pressed='true'] svg {
  fill: currentColor;
}
.mine-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: var(--g2);
}
.stars {
  position: relative;
  display: inline-block;
  width: 130px;
  height: 26px;
  cursor: pointer;
  touch-action: manipulation;
  border-radius: 3px;
  flex: none;
}
.stars svg {
  display: block;
  width: 130px;
  height: 26px;
}
.stars .st-off path {
  fill: var(--line-2);
}
.stars .st-on {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}
.stars .st-on path {
  fill: var(--accent);
}
.stars:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.rclear {
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  flex: none;
}
.rclear:hover {
  color: var(--fg);
  background: var(--surface-2);
}
.mine-acts2 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g2) var(--g3);
  align-items: center;
  margin-top: var(--g3);
}
.mine-acts2 .btn[aria-pressed='true'] {
  color: var(--accent);
}
.mine-note {
  font: 500 11px/1.4 var(--font-mono);
  letter-spacing: 0.03em;
  color: var(--muted);
}
.mine-log {
  margin-top: var(--g3);
  padding: var(--g4);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: var(--g3);
}
.mine-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g2) var(--g3);
  align-items: center;
}
.mine-log .lbl {
  font-size: var(--t0);
  color: var(--muted);
  white-space: nowrap;
}
.mine-log .ctl {
  background: var(--bg);
}
.mine-log input[type='date'] {
  color: var(--fg);
  font: inherit;
}
.mine-rate {
  display: inline-flex;
  align-items: center;
  gap: var(--g2);
}
.mine-log textarea {
  width: 100%;
  min-height: 76px;
  resize: vertical;
  padding: var(--g2) var(--g3);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.5 var(--font-ui);
}
.mine-log textarea:focus {
  outline: 0;
  border-color: var(--fg-2);
}
.mine-diary {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mine-diary li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 2px var(--g3);
  align-items: center;
  padding: var(--g1) 0;
  border-bottom: 1px solid var(--line);
}
.mine-diary .dd {
  font: 500 12px/1.4 var(--font-mono);
  color: var(--fg-2);
}
.mine-diary .ds {
  color: var(--accent);
  letter-spacing: 1px;
}
.mine-diary .re {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0;
}
.mine-diary .dn {
  grid-column: 1 / -1;
  margin: 0 0 var(--g1);
  color: var(--fg-2);
  font-size: 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* your mark on a card: outlined, so it never reads as an award badge (those are filled) */
.poster .pb i.me {
  background: var(--bg);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  letter-spacing: 0;
}
.poster .pb i.me svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.poster .pb i.me.liked svg {
  fill: currentColor;
  stroke-width: 1.5;
}

/* a short message at the bottom of the screen */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--g5) + env(safe-area-inset-bottom, 0px));
  z-index: 100;
  max-width: min(92vw, 540px);
  padding: var(--g2) var(--g4);
  border-radius: var(--r);
  background: var(--fg);
  color: var(--bg);
  font-size: 14px;
  line-height: 1.4;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translate(-50%, 16px);
  pointer-events: none;
  transition:
    opacity 0.2s,
    transform 0.2s;
}
.toast.on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* the My Sagasu page */
.mine-stats {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--g4) var(--g5);
  margin: 0 0 var(--g4);
}
.top4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--g4);
  max-width: 760px;
}
.top-slot {
  position: relative;
  min-width: 0;
}
/* a card outside .grid would shrink to its caption: make it fill its place */
.top-slot > .card,
.top-slot .poster {
  width: 100%;
}
.top-slot .unpin {
  position: absolute;
  top: -10px;
  left: -10px; /* the top right corner carries the card's badges */
  z-index: 4;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.top-slot .unpin:hover {
  color: var(--fg);
  border-color: var(--line-2);
}
#mineTopHint {
  margin: 0 0 var(--g3);
}
.top-empty {
  aspect-ratio: 2/3;
  border: 1px dashed var(--line-2);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--g3);
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}
.mine-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g3);
  align-items: center;
  justify-content: space-between;
  margin: var(--g5) 0 var(--g4);
}
.mine-tabs .seg {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.mine-tabs .seg button {
  white-space: nowrap;
}
.mine-empty {
  max-width: 62ch;
  padding: var(--g5) 0;
}
.mine-empty h2 {
  font-size: var(--t3);
  margin: 0 0 var(--g3);
}
.mine-empty p {
  color: var(--fg-2);
}
.month h3 {
  font: 600 var(--t2) / 1.2 var(--font-display);
  margin: var(--g5) 0 var(--g1);
  padding-bottom: var(--g2);
  border-bottom: 1px solid var(--line-2);
}
.drow {
  display: grid;
  grid-template-columns: 34px 44px minmax(0, 1fr);
  gap: var(--g3);
  align-items: center;
  width: 100%;
  padding: var(--g2) 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.drow .day {
  font: 600 var(--t2) / 1 var(--font-display);
  color: var(--fg-2);
  text-align: center;
  font-variant-numeric: tabular-nums lining-nums;
}
.drow .poster {
  width: 44px;
}
.drow .poster .pt,
.drow .poster .pk,
.drow .poster .pb {
  display: none;
}
.drow .poster:not(.has-img)::after {
  inset: 3px;
}
.drow .what {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--g2);
}
.drow b {
  font: 600 var(--t1) / 1.3 var(--font-display);
}
.drow .meta {
  font: 400 11.5px/1.5 var(--font-mono);
  color: var(--muted);
}
.drow .marks {
  flex-basis: 100%;
  color: var(--accent);
  letter-spacing: 1px;
}
.drow .marks:empty {
  display: none;
}
.drow .note {
  flex-basis: 100%;
  margin: 0;
  color: var(--fg-2);
  font-size: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.drow.gone {
  cursor: default;
  opacity: 0.65;
}
.drow:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
@media (hover: hover) {
  .drow:not(.gone):hover b {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--line-2);
  }
}
.card.gone {
  cursor: default;
  opacity: 0.65;
}
.ratings p b {
  font-weight: 600;
}
/* the ratings chart: one bar per half star, rounded at the top, 2px apart, on a baseline */
.hist {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 2px;
  align-items: end;
  height: 170px;
  max-width: 560px;
  margin-top: var(--g5);
  border-bottom: 1px solid var(--axis);
}
.hist .hb {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
  border-radius: 4px 4px 0 0;
}
.hist .hb i {
  display: block;
  width: 100%;
  background: var(--accent);
  border-radius: 4px 4px 0 0;
}
.hist .hb:hover i,
.hist .hb:focus-visible i {
  filter: brightness(1.15);
}
.hist .hb:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.hist .hb .cnt {
  position: absolute;
  left: 0;
  right: 0;
  margin-bottom: 4px;
  text-align: center;
  font: 500 11px/1 var(--font-mono);
  color: var(--fg-2);
}
.hist .hb:hover::after,
.hist .hb:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  white-space: nowrap;
  padding: 5px 8px;
  border-radius: 3px;
  background: var(--fg);
  color: var(--bg);
  font: 500 11px/1 var(--font-mono);
  pointer-events: none;
}
.hist-x {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 2px;
  max-width: 560px;
  margin-top: 5px;
  text-align: center;
  font: 500 11px/1 var(--font-mono);
  color: var(--muted);
}
.mine-data {
  margin-top: var(--g6);
}
.mine-btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g2);
  margin: var(--g3) 0;
}
.btn.danger {
  color: var(--accent);
}
.mine-report {
  margin-top: var(--g3);
  color: var(--fg-2);
  font-size: 14px;
}
.mine-report:empty {
  display: none;
}
@media (max-width: 620px) {
  .mine-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--g4) var(--g3);
  }
  .mine-tabs .seg {
    display: flex;
    width: 100%;
  }
  .mine-tabs .seg button {
    flex: 1 1 auto;
    padding: 0 6px;
    font-size: 13px;
  }
  .top4 {
    gap: var(--g3);
  }
  .top4 .card .cap span,
  .top4 .card .by,
  .top4 .poster .pb {
    display: none;
  }
  .top4 .card .cap b {
    font-size: 12px;
  }
  .mine-stars {
    margin-left: 0;
  }
  .mine-log {
    padding: var(--g3);
  }
}
@media (pointer: coarse) {
  .mact {
    height: 44px;
  }
  .stars,
  .stars svg {
    width: 160px;
    height: 32px;
  }
  .rclear {
    width: 40px;
    height: 40px;
  }
  .top-slot .unpin {
    width: 36px;
    height: 36px;
  }
}
@media (max-width: 760px) {
  .toast {
    bottom: calc(58px + var(--g4) + env(safe-area-inset-bottom, 0px));
  }
}

/* ================================================================================================
   7. Awards and tables
   ================================================================================================ */
.tablewrap {
  overflow-x: auto;
}
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 620px;
}
table.data th {
  text-align: left;
  font: 500 10.5px/1.4 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  padding: var(--g2) var(--g3) var(--g2) 0;
  border-bottom: 1px solid var(--line-2);
  position: sticky;
  top: 0;
  background: var(--bg);
}
table.data td {
  padding: var(--g3) var(--g3) var(--g3) 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.data td.n {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}
.tlink {
  all: unset;
  cursor: pointer;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 3px;
}
.tlink:hover {
  text-decoration-color: var(--fg);
}
.bodies {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g2);
  margin: 0 0 var(--g4);
}

/* ================================================================================================
   8. Analytics
   ================================================================================================ */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--g4);
  margin: 0 0 var(--g6);
}
.kpi {
  border-top: 1px solid var(--line);
  padding-top: var(--g3);
}
.kpi b {
  display: block;
  font: 600 var(--t4) / 1.05 var(--font-display);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}
.kpi span {
  font-size: 13px;
  color: var(--muted);
}
.charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--g6) var(--g5);
}
@media (max-width: 900px) {
  .charts {
    grid-template-columns: 1fr;
  }
}
.chart {
  min-width: 0;
  position: relative;
}
.chart.wide {
  grid-column: 1/-1;
}
.chart h3 {
  font: 600 var(--t2) / 1.25 var(--font-display);
  letter-spacing: -0.01em;
}
.chart .sub {
  font-size: 13px;
  color: var(--muted);
  margin: 2px 0 var(--g3);
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--g3);
  font-size: 12px;
  color: var(--fg-2);
  margin: 4px 0 6px;
}
.legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
}
.chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.chart svg text {
  fill: var(--muted);
  font: 11px var(--font-ui);
}
.chart svg text.v {
  fill: var(--fg-2);
  font-weight: 500;
}
.chart svg .hit {
  fill: transparent;
  cursor: default;
}
.chart svg .hit:hover + .mark,
.chart svg g.col:hover rect.mark {
  opacity: 0.82;
}
.tip {
  position: absolute;
  pointer-events: none;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: var(--g2) var(--g3);
  font-size: 12px;
  box-shadow: var(--shadow);
  z-index: 5;
  min-width: 120px;
  max-width: 260px;
}
.tip b {
  display: block;
  font-size: 14px;
}
.tip .r {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-2);
}
.tip .r i {
  width: 12px;
  height: 2px;
  background: var(--c);
  border-radius: 1px;
}
.tip .r b {
  display: inline;
  font-size: 12.5px;
  color: var(--fg);
  margin-left: auto;
}
details.tv {
  margin-top: var(--g2);
}
details.tv summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
}
details.tv summary:hover {
  color: var(--fg);
}
details.tv table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 6px;
}
details.tv td,
details.tv th {
  padding: 4px 6px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.note {
  font-size: 13px;
  color: var(--muted);
  margin-top: var(--g2);
  max-width: 80ch;
}

/* ================================================================================================
   9. Data log
   ================================================================================================ */
.prose {
  max-width: 70ch;
}
.prose h2 {
  font-size: var(--t4);
  margin: 0 0 var(--g4);
  letter-spacing: -0.025em;
}
.prose h3 {
  font-size: var(--t2);
  margin: var(--g5) 0 var(--g3);
}
.prose h4 {
  font-size: var(--t1);
  margin: var(--g4) 0 var(--g2);
  font-weight: 600;
}
.prose .tablewrap {
  margin: var(--g2) 0 var(--g3);
}
.prose p,
.prose li {
  color: var(--fg-2);
}
.prose code {
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 13px;
}
.loading {
  display: flex;
  gap: var(--g3);
  align-items: center;
  color: var(--muted);
  padding: var(--g5) 0;
}
.spin {
  width: 14px;
  height: 14px;
  border: 2px solid var(--line-2);
  border-top-color: var(--fg);
  border-radius: 50%;
  animation: sp 0.8s linear infinite;
}
@keyframes sp {
  to {
    transform: rotate(360deg);
  }
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ================================================================================================
   10. Phones and touch screens
   ================================================================================================ */
.bnav,
.sheet-head,
.sheet-foot {
  display: none;
}
/* The More menu of both bars: Festivals, Awards, Analytics, Data log, Insights, then the two settings (the language
   of titles, On film). On a wide screen it hangs under More in the top bar (app.js sets where); on a phone it is a
   sheet above the bottom bar (below). A row is at least 44px high; the page one is on is in the accent, with a dot. */
.msheet {
  position: fixed;
  z-index: 29;
  width: 248px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-top-color: var(--fg);
  padding: var(--g1) 0;
}
.msheet button,
.msheet a,
.msheet .mrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--g3);
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 0 var(--g4);
  background: none;
  border: 0;
  text-decoration: none;
  font: 500 var(--t1) / 1 var(--font-ui);
  color: var(--fg);
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .msheet button:hover,
  .msheet a:hover {
    background: var(--surface-2);
  }
}
.msheet button:active,
.msheet a:active {
  background: var(--surface-2);
}
.msheet button:focus-visible,
.msheet a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
.msheet [aria-current='page'] {
  color: var(--accent);
}
.msheet [aria-current='page']::after {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.msheet a span,
.msheet #themeBtn span {
  color: var(--muted);
}
.msheet #themeBtn span {
  font: 400 12px/1 var(--font-mono);
}
/* the settings stand apart from the pages, under a hairline */
.msheet .mrow {
  margin-top: var(--g1);
  border-top: 1px solid var(--line);
  padding-top: var(--g1);
  min-height: 49px;
}
/* On film is on: the half-moon is in the accent */
.msheet #themeBtn[aria-pressed='true'] span {
  color: var(--accent);
}
button,
a,
.card,
.pick {
  -webkit-tap-highlight-color: transparent;
}
.card:active .poster,
.pick:active .poster {
  opacity: 0.7;
}
.btn:active {
  background: var(--surface-2);
}
.btn.primary:active {
  filter: brightness(0.94);
  background: var(--accent);
}
@media (pointer: coarse) {
  input,
  select,
  textarea {
    font-size: 16px;
  } /* iOS zooms into a field set smaller than 16px */
  .ctl,
  .btn {
    height: 44px;
  }
  .ctl input,
  .ctl select {
    height: 42px;
  }
  .go .btn.primary {
    height: 48px;
  }
  .chip {
    padding: 11px 15px;
  }
  .toggle {
    height: 44px;
  }
  .seg button {
    height: 40px;
  }
  .ms-list label {
    padding: 11px 6px;
  }
  .ms-foot button {
    padding: 11px 10px;
  }
  .hmlist button {
    padding: var(--g3) 0;
  }
  .links {
    gap: var(--g3) var(--g4);
  }
  .links a {
    padding-top: 6px;
  }
  .tlink {
    display: inline-block;
    padding-block: 6px;
  }
  details.fold > summary,
  details.tv summary {
    padding-block: 11px;
  }
  .dual .rail {
    left: 13px;
    right: 13px;
  }
  .dual input[type='range']::-webkit-slider-thumb {
    width: 26px;
    height: 26px;
    margin-top: 4px;
  }
  .dual input[type='range']::-moz-range-thumb {
    width: 20px;
    height: 20px;
  }
  .ctl.years input {
    width: 48px;
  }
}
@media (max-width: 760px) {
  /* the header keeps the name; the five places move to a bar at the bottom, within thumb reach */
  .top {
    position: relative;
    top: 0;
  }
  .top .wrap {
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .top nav.tabs {
    display: none;
  }
  main {
    padding-bottom: calc(var(--g7) + 58px + env(safe-area-inset-bottom, 0px));
  }
  .bnav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)); /* Lucky, Feed, Browse, Mine, More */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    background: var(--bg);
    border-top: 1px solid var(--line);
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px)
      env(safe-area-inset-left, 0px);
  }
  .bnav button {
    all: unset;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 58px;
    color: var(--muted);
    font: 500 11px/1 var(--font-ui);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .bnav svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  /* The tab that is open is in the accent colour, its icon and its name, under a short accent bar: which tab one
     is on must show by colour at a glance (the owner, 12 Nov 2026; before, only the icon changed colour and the
     name went from grey to black). */
  .bnav button[aria-current='page'] {
    color: var(--accent);
    font-weight: 600;
  }
  .bnav button[aria-current='page']::before {
    content: '';
    position: absolute;
    top: 0;
    left: calc(50% - 14px);
    width: 28px;
    height: 2px;
    background: var(--accent);
  }
  .bnav button:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -6px;
    border-radius: 10px;
  }
  body.typing .bnav,
  body.typing .msheet {
    display: none;
  } /* the on-screen keyboard would lift the bar over the page */
  /* the More menu is a sheet over the whole width, above the bar */
  .msheet {
    left: 0;
    right: 0;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-height: calc(100vh - 58px - env(safe-area-inset-bottom, 0px) - 40px);
    border-width: 1px 0 0;
    padding: var(--g2) 0;
    box-shadow: var(--shadow);
  }
  .msheet button,
  .msheet a,
  .msheet .mrow {
    min-height: 52px;
    padding-inline: max(var(--g4), env(safe-area-inset-left, 0px)) max(var(--g4), env(safe-area-inset-right, 0px));
  }
  .msheet .mrow {
    min-height: 57px;
  }
  .lang-sel {
    height: 40px;
  }
  /* filters open as a full-screen sheet: Done on top, the result count at the bottom */
  .fpanel {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: var(--bg);
    overflow: auto;
    overscroll-behavior: contain;
    border: 0;
    gap: var(--g4);
    padding: env(safe-area-inset-top, 0px) 16px 0;
  }
  .sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg);
    margin: 0 -16px;
    padding: var(--g2) 16px;
    border-bottom: 1px solid var(--line);
  }
  .sheet-head b {
    font-size: var(--t2);
    font-weight: 600;
  }
  .sheet-foot {
    display: flex;
    gap: var(--g2);
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--bg);
    margin: auto -16px 0;
    padding: var(--g3) 16px calc(var(--g3) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
  }
  .sheet-foot .btn.primary {
    flex: 1;
    justify-content: center;
  }
  body.sheet-open {
    overflow: hidden;
  }
  /* country and genre lists rise from the bottom instead of hanging off the side of the screen */
  .ms-pop {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
    z-index: 60;
    border-radius: 12px 12px 0 0;
    border-width: 1px 0 0;
    padding: var(--g3) 16px calc(var(--g3) + env(safe-area-inset-bottom, 0px));
  }
  .ms-list {
    max-height: 50vh;
  }
  /* controls share the row */
  .filterbar .ctl {
    flex: 1 1 140px;
  }
  .filterbar .ctl.search {
    flex-basis: 100%;
  }
  .ctl select {
    max-width: none;
    flex: 1;
  }
}
@media (max-width: 720px) {
  /* the detail view takes the whole screen; Back or × closes it */
  dialog.detail {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  .dl {
    height: 100%;
    max-height: none;
    overscroll-behavior: contain;
    padding: calc(var(--g5) + env(safe-area-inset-top, 0px)) 16px
      calc(var(--g6) + env(safe-area-inset-bottom, 0px));
  }
  .detail .x {
    top: calc(var(--g2) + env(safe-area-inset-top, 0px));
    right: var(--g2);
    width: 44px;
    height: 44px;
  }
}
@media (max-width: 620px) {
  /* award rows stack: year, title and result on one line, the award under the title */
  #v-awards table.data {
    min-width: 0;
  }
  #v-awards table.data thead {
    display: none;
  }
  #v-awards table.data tr {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 2px var(--g3);
    padding: var(--g3) 0;
    border-bottom: 1px solid var(--line);
  }
  /* the award-body shortcuts scroll sideways in one row instead of filling the screen */
  .bodies {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: -16px;
    padding-inline: 16px;
    overscroll-behavior-x: contain;
  }
  .bodies::-webkit-scrollbar {
    display: none;
  }
  .bodies .chip {
    flex: none;
  }
  #v-awards table.data td {
    border: 0;
    padding: 0;
  }
  #v-awards table.data td:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }
  #v-awards table.data td:nth-child(4) {
    grid-column: 3;
    grid-row: 1;
  }
  #v-awards table.data td:nth-child(3) {
    grid-column: 2/4;
    grid-row: 2;
    font-size: 13px;
  }
}
@media (max-width: 520px) {
  .go .btn.primary {
    flex: 1 1 auto;
    justify-content: center;
  }
  .browse-head {
    margin-bottom: var(--g4);
  }
  .browse-head h1 {
    font-size: var(--t4);
  }
}

/* credits: the synopsis's Wikipedia credit on a title page, TMDB's logo in the Data log and Insights */
.credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.credits p { margin: 0 0 .6em; }
.tmdb-logo { display: inline-block; vertical-align: -1px; margin-right: .35em; }
.tmdb-logo img { display: block; height: 12px; width: auto; }

/* ================================================================================================
   11. The November 2026 redesign (DESIGN.md; Figma pages "Redesign · minimal" and "Design system · minimal")
       11a lettering and centred titles · 11b the ticket card · 11c ticket and receipt · 11d the title page
       answers the pointer · 11e the Feed as a projector · 11f Browse: three names, search, one filter button ·
       11g where a film can be seen
   ================================================================================================ */
:root {
  /* a stamp's rough edge and uneven ink (a mask for the plate without a picture), the same edge alone (for a
     picture), paper grain, and the fibres left along a torn perforation */
  --stamp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 190' preserveAspectRatio='none'%3E%3Cfilter id='r' x='-6%25' y='-6%25' width='112%25' height='112%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.04' numOctaves='3' seed='7' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='10' xChannelSelector='R' yChannelSelector='G' result='d'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3' result='g'/%3E%3CfeColorMatrix in='g' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 2.05' result='h'/%3E%3CfeComposite in='d' in2='h' operator='in'/%3E%3C/filter%3E%3Crect x='8' y='8' width='284' height='174' rx='2' filter='url(%23r)'/%3E%3C/svg%3E");
  --stamp-pic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 190' preserveAspectRatio='none'%3E%3Cfilter id='r' x='-6%25' y='-6%25' width='112%25' height='112%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='3' seed='11' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='7' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='9' y='9' width='282' height='172' rx='2' filter='url(%23r)'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .45 0 0 0 0 .4 0 0 0 0 .34 0 0 0 .6 -.14'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --rip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpolyline points='0.0,7.4 3.85,4.2 7.69,8.8 11.54,3.5 15.38,7.7 19.23,6.2 23.08,3.3 26.92,7.5 30.77,3.2 34.62,6.8 38.46,3.4 42.31,3.6 46.15,6.7 50.0,10.4 53.85,3.9 57.69,4.8 61.54,8.6 65.38,11.5 69.23,8.1 73.08,6.4 76.92,11.8 80.77,3.2 84.62,10.7 88.46,5.5 92.31,4.1 96.15,3.9 100.0,7.4' fill='none' stroke='rgba(10,10,10,.3)' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cpolyline points='0.0,6 3.85,2.8 7.69,7.4 11.54,2.1 15.38,6.3 19.23,4.8 23.08,1.9 26.92,6.1 30.77,1.8 34.62,5.4 38.46,2 42.31,2.2 46.15,5.3 50.0,9 53.85,2.5 57.69,3.4 61.54,7.2 65.38,10.1 69.23,6.7 73.08,5 76.92,10.4 80.77,1.8 84.62,9.3 88.46,4.1 92.31,2.7 96.15,2.5 100.0,6' fill='none' stroke='%23ddd6c8' stroke-width='2.6' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
:root[data-theme='dark'] {
  --rip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpolyline points='0.0,7.4 3.85,4.2 7.69,8.8 11.54,3.5 15.38,7.7 19.23,6.2 23.08,3.3 26.92,7.5 30.77,3.2 34.62,6.8 38.46,3.4 42.31,3.6 46.15,6.7 50.0,10.4 53.85,3.9 57.69,4.8 61.54,8.6 65.38,11.5 69.23,8.1 73.08,6.4 76.92,11.8 80.77,3.2 84.62,10.7 88.46,5.5 92.31,4.1 96.15,3.9 100.0,7.4' fill='none' stroke='rgba(0,0,0,.6)' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cpolyline points='0.0,6 3.85,2.8 7.69,7.4 11.54,2.1 15.38,6.3 19.23,4.8 23.08,1.9 26.92,6.1 30.77,1.8 34.62,5.4 38.46,2 42.31,2.2 46.15,5.3 50.0,9 53.85,2.5 57.69,3.4 61.54,7.2 65.38,10.1 69.23,6.7 73.08,5 76.92,10.4 80.77,1.8 84.62,9.3 88.46,4.1 92.31,2.7 96.15,2.5 100.0,6' fill='none' stroke='%233a3631' stroke-width='2.6' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* ---- 11a. Lettering: every title is Jost in wide-spaced capitals, in the accent, and sits in the middle ---- */
h1,
h2,
h3 {
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.browse-head {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--g3);
}
.browse-head h1,
.hero h1,
.prose h1 {
  font-size: clamp(22px, 3.8vw, 52px);
  line-height: 1.2;
  letter-spacing: 0.2em;
  padding-left: 0.2em; /* the spacing after the last letter would push the line off centre */
  color: var(--accent);
  text-align: center;
}
.hero {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}
.stats {
  justify-content: center;
}
.stat b,
.score b,
.kpi b {
  font-weight: 500;
  letter-spacing: 0.06em;
}
.dl h2 {
  font-size: clamp(21px, 3vw, 34px);
  line-height: 1.25;
  letter-spacing: 0.16em;
  color: var(--accent);
  transition: letter-spacing 0.5s var(--ease);
}
.dl .orig {
  font: 400 17px/1.4 var(--font-ui);
  letter-spacing: 0.02em;
}
/* a film's page: its heading block (label, title, other titles, your buttons) sits in the middle of its column */
.dl > div:not(.side) > .eyebrow,
.dl h2,
.dl .orig,
.dl .alt {
  text-align: center;
}
.dl h2 {
  padding-inline: 40px; /* the close button's width, on both sides, so the title stays centred */
}
#mineNow .mine-acts,
#mineNow .mine-acts2 {
  justify-content: center;
}
@media (max-width: 720px) {
  .dl .side {
    justify-self: center; /* one column on a phone: the picture sits over the centred title */
    width: 160px; /* a width of its own: the plate has only a shape, so "fit the content" would be nothing */
    text-align: center;
  }
}
/* the picture's credit under it names a site: a long name wraps instead of running off the screen. On a phone
   the credit may be wider than the small picture: it stays in the middle and inside the screen */
.dl .side .btn {
  max-width: 100%;
  justify-content: center;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.5;
}
@media (max-width: 720px) {
  .dl .side .btn {
    align-self: center;
    width: max-content;
    max-width: calc(100vw - 32px);
  }
}
/* the Data log: one reading column in the middle of the page, under a title like every other page's */
#logBody {
  margin-inline: auto;
}
#logBody > .eyebrow:first-child {
  text-align: center;
}
#logBody > .eyebrow:first-child + h2 {
  font-size: clamp(22px, 3.8vw, 52px);
  line-height: 1.2;
  letter-spacing: 0.2em;
  padding-left: 0.2em;
  margin: var(--g2) 0 var(--g5);
  color: var(--accent);
  text-align: center;
}
.fcard b,
.month h3,
.drow .day,
.drow b,
.chart h3 {
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.chart h3,
.month h3,
.fcard b {
  font-size: 15px;
  line-height: 1.4;
}
.drow b {
  font-size: 13px;
}
.prose h2 {
  font-size: 19px;
  line-height: 1.4;
}
.prose h3 {
  font-size: 15px;
  line-height: 1.45;
}
/* five places in the bar: each name is a target at least 34px high (44px for a finger), with room between them */
nav.tabs {
  gap: var(--g5);
}
nav.tabs button {
  min-height: 34px;
  padding: 0 0 0 0.14em; /* the spacing after the last letter would pull the rule under the name off centre */
  font: 500 11.5px/1.7 var(--font-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
nav.tabs button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}
@media (pointer: coarse) {
  nav.tabs button {
    min-height: 44px;
  }
}
@media (max-width: 900px) {
  nav.tabs {
    gap: var(--g4);
  }
}
.btn {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.btn.primary {
  font-weight: 500;
}
.chip,
.card .cap .site,
.facts dd .site,
.poster,
.poster .mvtag,
.poster .pb i,
dialog.detail,
.detail .x,
.res,
.mact,
.seg,
.seg button,
.ms-list label {
  border-radius: 0;
}
/* a result (Winner, Nominee, Selected) is stamped in small capitals */
.res {
  font: 500 10px / 1.7 var(--font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1px 7px 0;
}
/* a curated list's name can be long: its button wraps inside the page (it made a phone's page scroll sideways) */
button.res {
  max-width: 100%;
  white-space: normal;
  text-align: left;
}
/* a title card without a picture: the title in paper colour on its stamp ink */
.poster {
  color: var(--surface-2);
}
.poster .pt {
  font-weight: 500;
  font-size: calc(var(--fs, 17px) * 0.78);
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.poster .pk {
  color: inherit;
}
.poster:not(.has-img)::after {
  border-color: color-mix(in srgb, currentColor 34%, transparent);
}
/* still paper grain over the whole page (it never moves, so it costs nothing while you read) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background: var(--grain);
  opacity: 0.5;
}

/* ---- 11b. The film card is a cinema ticket -----------------------------------------------------------
   Header between two rules (country and year · festivals), the title, the stamp as the plate, and a stub with
   the director under a perforation. Its edge is cut out with a mask: a row of half-holes top and bottom and a
   notch each side where the stub tears off. cards.js writes the parts; a card outside a ticket grid (the dense
   festival wall, your top four) keeps the plain poster and caption. */
.card .ch,
.card .cf {
  display: none;
}
.grid:not(.dense) {
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: var(--g5) var(--g4);
}
@media (max-width: 520px) {
  .grid:not(.dense) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--g4) var(--g3);
  }
}
:is(.grid:not(.dense), .pvhold) > .tk {
  --stub: 58px; /* the height of the stub under the perforation */
  --pad: 18px;
  --cut:
    radial-gradient(circle at 50% 0, transparent 4.6px, #000 5.2px) left top / 20px 10px round no-repeat,
    linear-gradient(#000 0 0) left 0 top 9px / 100% calc(100% - var(--stub) - 20px) no-repeat,
    radial-gradient(circle at 0 50%, transparent 11.4px, #000 12px) left 0 bottom calc(var(--stub) - 12px) / 12px 24px no-repeat,
    radial-gradient(circle at 100% 50%, transparent 11.4px, #000 12px) right 0 bottom calc(var(--stub) - 12px) / 12px 24px no-repeat,
    linear-gradient(#000 0 0) left 11.5px bottom calc(var(--stub) - 12px) / calc(100% - 23px) 24px no-repeat,
    linear-gradient(#000 0 0) left 0 bottom 9px / 100% calc(var(--stub) - 20px) no-repeat,
    radial-gradient(circle at 50% 100%, transparent 4.6px, #000 5.2px) left bottom / 20px 10px round no-repeat;
  position: relative;
  box-sizing: border-box;
  container-type: inline-size;
  gap: 0;
  padding: 22px var(--pad) calc(var(--stub) + 16px);
  background: var(--wm, none) var(--stock, var(--surface-2));
  color: var(--fg);
  text-align: center;
  -webkit-mask: var(--cut);
  mask: var(--cut);
  transition: transform 0.35s var(--ease);
}
:is(.grid:not(.dense), .pvhold) > .tk:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -8px; /* inside the edge: the mask would cut an outline drawn outside it */
}
:is(.grid:not(.dense), .pvhold) > .tk:focus-visible .poster {
  outline: 0;
}
/* the perforation */
:is(.grid:not(.dense), .pvhold) > .tk::after {
  content: '';
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: var(--stub);
  height: 1px;
  background: repeating-linear-gradient(90deg, currentColor 0 5px, transparent 5px 10px);
  pointer-events: none;
}
:is(.grid:not(.dense), .pvhold) > .tk .ch {
  order: 0;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0 7px;
  border-block: 1px solid currentColor;
  font: 400 clamp(8.5px, 4.1cqw, 10px) / 1.5 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
}
:is(.grid:not(.dense), .pvhold) > .tk .ch span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
:is(.grid:not(.dense), .pvhold) > .tk .ch span:last-child {
  flex: none;
  text-align: right;
  white-space: nowrap;
}
:is(.grid:not(.dense), .pvhold) > .tk .ch i {
  font-style: normal;
  font-variant-numeric: tabular-nums;
}
:is(.grid:not(.dense), .pvhold) > .tk .cap {
  display: contents; /* its lines become lines of the ticket, so they can sit above and below the plate */
}
:is(.grid:not(.dense), .pvhold) > .tk .cap b {
  order: 1;
  margin: auto 0;
  /* the room above and below is a transparent border, not padding: a clamped title would show the top of its
     fourth line inside a padding */
  padding: 0 0 0 0.14em;
  border-block: 11px solid transparent;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  /* the loudest line of a ticket: 13.5px on a phone's two-column grid, up to 17px on a wide card (the owner
     asked for a larger title, 11 Nov 2026: at 10.5px it did not catch the eye on a phone) */
  font: 500 clamp(13.5px, 7.4cqw, 17px) / 1.4 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
}
:is(.grid:not(.dense), .pvhold) > .tk .cap .t2 {
  order: 2;
  margin: -6px 0 9px;
  font: 400 clamp(10px, 4.6cqw, 11.5px) / 1.4 var(--font-ui);
  text-align: center;
}
:is(.grid:not(.dense), .pvhold) > .tk .cap > span:not([class]),
:is(.grid:not(.dense), .pvhold) > .tk .cap > .by,
:is(:is(.grid:not(.dense), .pvhold) > .tk, .pick) .poster .pt,
:is(:is(.grid:not(.dense), .pvhold) > .tk, .pick) .poster .pk {
  display: none; /* the header and the stub say these */
}
/* what a search matched and the artist's site stand over the plate, never under it: the plate then stands
   straight on the perforation in every ticket, so the stamps of a row line up from left to right (the owner,
   13 Nov 2026: "每張票的 stamp 都要 lineup 左右") */
:is(.grid:not(.dense), .pvhold) > .tk .cap .cue {
  order: 2;
  margin-bottom: 9px;
  text-align: center;
}
:is(.grid:not(.dense), .pvhold) > .tk .cap .site {
  order: 2;
  align-self: center;
  margin-bottom: 9px;
}
@media (pointer: coarse), (max-width: 760px) {
  /* under a thumb the button runs across the ticket, between the same edges as the ticket's rules */
  :is(.grid:not(.dense), .pvhold) > .tk .cap .site {
    align-self: stretch;
  }
}
/* the plate: a stamp of the year in one of eight inks, or the film's picture with the stamp's rough edge. The
   long ticket of Feeling Lucky (.pick, 11f) has the same plate. */
:is(:is(.grid:not(.dense), .pvhold) > .tk, .pick) .poster {
  order: 3;
  flex: none;
  width: var(--plate, 100%); /* a long ticket (11f) gives its plate a width */
  aspect-ratio: var(--plate-shape, 16 / 10);
  background: none;
  transform: none;
  box-shadow: none;
}
:is(:is(.grid:not(.dense), .pvhold) > .tk, .pick) .poster:not(.has-img)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--tone, var(--fg));
  -webkit-mask: var(--stamp) center / 100% 100% no-repeat;
  mask: var(--stamp) center / 100% 100% no-repeat;
}
:is(:is(.grid:not(.dense), .pvhold) > .tk, .pick) .poster:not(.has-img)::after {
  content: attr(data-y);
  inset: 0;
  z-index: 1;
  border: 0;
  display: grid;
  place-items: center;
  padding-left: 0.3em;
  font: 500 clamp(17px, 10.4cqw, 27px) / 1 var(--font-display);
  letter-spacing: 0.3em;
  color: var(--surface-2);
  opacity: 0.92;
}
:is(:is(.grid:not(.dense), .pvhold) > .tk, .pick) .poster.has-img::before {
  display: none; /* no blurred copy behind a wide picture: the plate is wide itself */
}
/* The plate shows a band of a picture that has another shape. focus.js slides the picture so that its subject
   is in the middle of the band (object-position); 50% 30% is the band of a picture it cannot read. */
:is(:is(.grid:not(.dense), .pvhold) > .tk, .pick) .poster img {
  object-fit: cover;
  object-position: 50% 30%;
  -webkit-mask: var(--stamp-pic) center / 100% 100% no-repeat;
  mask: var(--stamp-pic) center / 100% 100% no-repeat;
  transition: object-position 0.35s var(--ease);
}
/* A picture that cannot be read, and of which the band would show less than 60% (a poster from a host that does
   not let a page read it): the whole picture stands in the middle of the plate, on the plate's ink, like a stamp
   on its pad. Nothing is cut blindly. */
:is(:is(.grid:not(.dense), .pvhold) > .tk, .pick) .poster.whole::before {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--tone, var(--fg));
  filter: none;
  -webkit-mask: var(--stamp) center / 100% 100% no-repeat;
  mask: var(--stamp) center / 100% 100% no-repeat;
}
:is(:is(.grid:not(.dense), .pvhold) > .tk, .pick) .poster.whole img {
  inset: 4% 0;
  height: 92%;
  object-fit: contain;
  object-position: 50% 50%;
  -webkit-mask: none;
  mask: none;
}
:is(:is(.grid:not(.dense), .pvhold) > .tk, .pick) .poster .pb {
  right: 11px;
  top: 10px;
}
:is(:is(.grid:not(.dense), .pvhold) > .tk, .pick) .poster .mvtag {
  left: 11px;
  bottom: 10px;
}
/* the stub */
:is(.grid:not(.dense), .pvhold) > .tk .cf {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7px;
  height: calc(var(--stub) - 12px);
  padding: 0 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  text-align: center;
}
:is(.grid:not(.dense), .pvhold) > .tk .cf span {
  font: 400 clamp(7px, 3.3cqw, 8px) / 1.2 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
:is(.grid:not(.dense), .pvhold) > .tk .cf b {
  padding-left: 0.2em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 500 clamp(9px, 4.7cqw, 12px) / 1.3 var(--font-display);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
@media (max-width: 520px) {
  :is(.grid:not(.dense), .pvhold) > .tk {
    --stub: 48px;
    --pad: 11px;
    padding-top: 17px;
  }
  :is(.grid:not(.dense), .pvhold) > .tk .cf {
    padding: 0 16px;
  }
}
@media (hover: hover) {
  .grid:not(.dense) > .tk:hover {
    transform: translateY(-4px);
  }
  .grid:not(.dense) > .tk:hover .cap b {
    text-decoration: none;
  }
  .grid:not(.dense) > .tk:hover .poster {
    transform: none;
    box-shadow: none;
  }
}
/* a ticket whose stub was torn: fibres along the tear, the stub a little off (kept until the page is left) */
:is(.grid:not(.dense), .pvhold) > .tk.torn::after {
  left: 0;
  right: 0;
  height: 12px;
  margin-bottom: -6px;
  background: var(--rip) center / 100% 100% no-repeat;
  animation: none;
}
:is(.grid:not(.dense), .pvhold) > .tk.torn .cf {
  transform: translateY(3px) rotate(0.9deg);
  transform-origin: 0 0;
}
.card.taken,
.pick.taken {
  visibility: hidden; /* it is in your hand: the preview shows it */
}
/* Feeling Lucky's long ticket tears too (11f): in the hand its copy takes no clicks and does not rise again;
   torn, its stub hangs a little off */
.pvhold > .pick {
  pointer-events: none;
  animation: none;
  transform: none;
}
.pick.torn .cf {
  transform: translate(3px, 2px) rotate(1.2deg);
  transform-origin: 0 0;
}
/* small motions inside the card, only while it is on screen (ticket.js sets .inview) */
@media (prefers-reduced-motion: no-preference) {
  .grid:not(.dense) > .tk.inview .poster:not(.has-img)::before {
    animation: inkw 7s ease-in-out infinite alternate;
  }
  .grid:not(.dense) > .tk.inview .poster img {
    animation: kb 16s ease-in-out infinite alternate;
  }
  .grid:not(.dense) > .tk.inview .poster:not(.has-img)::after {
    animation: press 0.62s cubic-bezier(0.2, 1.5, 0.4, 1) both;
    animation-delay: var(--d, 0ms);
  }
  .grid:not(.dense) > .tk:hover .poster::before,
  .grid:not(.dense) > .tk:hover .poster img {
    animation-play-state: paused;
  }
  .grid:not(.dense) > .tk:not(.torn):hover::after {
    animation: perf 0.7s linear infinite;
  }
}
@keyframes inkw {
  from {
    transform: rotate(-0.5deg);
  }
  to {
    transform: rotate(0.6deg) scale(1.015);
  }
}
@keyframes kb {
  from {
    transform: none;
  }
  to {
    transform: scale(1.03) translate(-0.6%, 0.4%);
  }
}
@keyframes press {
  from {
    transform: scale(1.6) rotate(-7deg);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 0.92;
  }
}
@keyframes perf {
  to {
    background-position-x: -10px;
  }
}

/* ---- 11c. Ticket and receipt: the first click tears the stub off (ticket.js) ---------------------------
   #pv covers the page. The ticket (a copy of the card, cut along the tear) goes to the left, the stub comes
   back as a receipt with the film's main facts on the right; on a phone the receipt sits under the ticket.
   States on #pv: rip (tearing, in place) → in (side by side) → closing. */
.pv {
  position: fixed;
  inset: 0;
  z-index: 39;
  overflow: hidden;
}
.pvbg {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg) 96.5%, transparent);
  opacity: 0;
  transition: opacity 0.35s;
  cursor: zoom-out;
}
.pv.in .pvbg {
  opacity: 1;
}
.pvt,
.pvs,
.pvr {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}
.pvt,
.pvr {
  cursor: pointer;
  transition: transform 0.62s cubic-bezier(0.2, 1.15, 0.3, 1);
}
.pvr {
  width: 300px;
}
/* the shadow falls further than it spreads (offset 26px, blur 24px): a shadow that reaches up to the ticket's
   top edge fills its half-holes with a tone close to the paper, and the edge then reads as straight */
.pvhold,
.pvri {
  filter: drop-shadow(0 26px 24px var(--lift));
}
.pvhold > .tk {
  display: flex;
  cursor: inherit;
  pointer-events: none;
}
/* The ticket in the hand takes no clicks of its own (a click on it enters the film). Its Artist site button is a
   real link there, laid over the copy's button (ticket.js siteLink; the owner, 12 Nov 2026: "the Artist button
   needs to be clickable during the torn state"). --k is the ticket's scale (ticket.js): on a phone the ticket is
   small, so the link's tap area (::before) grows until it covers 46px of the screen. It grows upwards, over the
   margin and the line above the button; below it the torn edge is too near. */
.pvsite {
  position: absolute;
  z-index: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pvsite::before {
  content: '';
  position: absolute;
  inset: min(-5px, 41px - 46px / var(--k, 1)) -7px -5px;
}
/* pointed at or pressed, the button under it fills, as the button of a card does */
.pvsite:hover,
.pvsite:active,
.pvsite:focus-visible {
  background: color-mix(in srgb, var(--accent) 24%, transparent);
}
.pvsite:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.pvti {
  transform-origin: 50% 40%;
  transition: transform 0.62s cubic-bezier(0.2, 1.15, 0.3, 1);
}
.pv.in .pvti {
  transform: rotate(-3deg);
}
.pvri {
  transform-origin: 0 0;
  transform: rotate(18deg);
  clip-path: inset(-80px -80px 80% -80px);
  opacity: 0;
  transition:
    transform 0.62s cubic-bezier(0.2, 1.15, 0.3, 1),
    clip-path 0.62s var(--ease),
    opacity 0.2s;
}
.pv.in .pvri {
  transform: rotate(2.5deg);
  clip-path: inset(-80px);
  opacity: 1;
}
/* tearing: the stub swings down on its left end, the ticket recoils, scraps of paper fly */
.pv.rip .pvt,
.pv.rip .pvr,
.pv.rip .pvti,
.pv.rip .pvri {
  transition: none;
}
.pv.rip .pvsi {
  transform-origin: 0 var(--tear, 80%);
  animation: rip 0.24s cubic-bezier(0.3, 0, 0.2, 1) forwards;
}
.pv.rip .pvti {
  transform-origin: 50% 0;
  animation: tearjolt 0.24s cubic-bezier(0.3, 0, 0.3, 1);
}
.pv.side.rip .pvsi {
  transform-origin: var(--tearx, 80%) 0; /* a long ticket's stub swings out on its top end */
  animation-name: ripside;
}
@keyframes ripside {
  22% {
    transform: translate(4px, 2px) rotate(-2deg);
  }
  100% {
    transform: translate(14px, 8px) rotate(-16deg);
  }
}
.pv:not(.rip) .pvs {
  display: none;
}
@keyframes rip {
  22% {
    transform: translate(2px, 4px) rotate(2deg);
  }
  100% {
    transform: translate(8px, 14px) rotate(18deg);
  }
}
@keyframes tearjolt {
  28% {
    transform: translateY(4px) scaleY(0.985);
  }
  68% {
    transform: translateY(-12px) rotate(-1.9deg);
  }
}
.pvscrap {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--s);
  height: var(--s);
  background: var(--surface-2);
  box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--fg) 18%, transparent);
  pointer-events: none;
  animation: scrap 0.75s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes scrap {
  from {
    transform: translate(var(--x), var(--y));
  }
  to {
    transform: translate(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy))) rotate(var(--r));
    opacity: 0;
  }
}
.pv.closing .pvt,
.pv.closing .pvr {
  transition: transform 0.34s cubic-bezier(0.5, 0, 0.8, 0.4);
}
.pv.closing .pvti {
  transition-duration: 0.34s;
}
.pv.closing .pvri {
  transition-duration: 0.34s;
}
.pvx {
  position: absolute;
  right: 28px;
  top: calc(22px + env(safe-area-inset-top, 0px));
  padding: 8px;
  border: 0;
  background: none;
  cursor: pointer;
  font: 500 11px/1 var(--font-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  opacity: 0;
  transition: opacity 0.3s;
}
.pv.in .pvx {
  opacity: 1;
}
.pvhint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px;
  margin: 0;
  text-align: center;
  font: 400 9px/1.4 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.3s 0.3s;
  pointer-events: none;
}
.pv.in .pvhint {
  opacity: 1;
}
@media (max-width: 700px) {
  .pvhint {
    display: none;
  }
}
@media (hover: hover) {
  .pv.in .pvt:hover .pvti {
    transform: rotate(-1.5deg) scale(1.02);
  }
  .pv.in .pvr:hover .pvri {
    transform: rotate(1deg) translateY(-5px);
  }
  .pvr:hover .renter,
  .renter:focus-visible {
    background-size: 100% 100%;
    letter-spacing: 0.22em;
  }
}
/* the receipt */
.rc {
  position: relative;
  width: 300px;
  box-sizing: border-box;
  padding: 32px 24px 30px;
  background: var(--stock, var(--surface-2)); /* the paper of the ticket it was torn from (11i) */
  color: var(--fg);
  font: 400 10px/1.5 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  clip-path: polygon(0.0% 5px, 3.85% 1.8px, 7.69% 6.4px, 11.54% 1.1px, 15.38% 5.3px, 19.23% 3.8px, 23.08% 0.9px, 26.92% 5.1px, 30.77% 0.8px, 34.62% 4.4px, 38.46% 1px, 42.31% 1.2px, 46.15% 4.3px, 50.0% 8px, 53.85% 1.5px, 57.69% 2.4px, 61.54% 6.2px, 65.38% 9.1px, 69.23% 5.7px, 73.08% 4px, 76.92% 9.4px, 80.77% 0.8px, 84.62% 8.3px, 88.46% 3.1px, 92.31% 1.7px, 96.15% 1.5px, 100.0% 5px, 100.0% 100%, 96.67% calc(100% - 7px), 93.33% 100%, 90.0% calc(100% - 7px), 86.67% 100%, 83.33% calc(100% - 7px), 80.0% 100%, 76.67% calc(100% - 7px), 73.33% 100%, 70.0% calc(100% - 7px), 66.67% 100%, 63.33% calc(100% - 7px), 60.0% 100%, 56.67% calc(100% - 7px), 53.33% 100%, 50.0% calc(100% - 7px), 46.67% 100%, 43.33% calc(100% - 7px), 40.0% 100%, 36.67% calc(100% - 7px), 33.33% 100%, 30.0% calc(100% - 7px), 26.67% 100%, 23.33% calc(100% - 7px), 20.0% 100%, 16.67% calc(100% - 7px), 13.33% 100%, 10.0% calc(100% - 7px), 6.67% 100%, 3.33% calc(100% - 7px), 0.0% 100%);
}
.rc .rh {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 600 10px/1.5 var(--font-ui);
  letter-spacing: 0.3em;
}
.rc .rh i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.rc .rk {
  margin-top: 4px;
  text-align: center;
  font-size: 8px;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.rc hr {
  margin: 14px 0;
  border: 0;
  border-top: 1px dashed currentColor;
}
.rc h4 {
  margin: 0;
  padding-left: 0.2em;
  text-align: center;
  font: 500 15px/1.5 var(--font-display);
  letter-spacing: 0.2em;
  color: var(--accent);
  overflow-wrap: anywhere;
}
.rc .ro {
  margin-top: 4px;
  text-align: center;
  font: 400 11px/1.5 var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: none;
}
.rc dl {
  display: grid;
  gap: 7px;
  margin: 0;
}
.rc dl div {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.rc dt {
  font-size: 8px;
  letter-spacing: 0.14em;
  white-space: nowrap;
  color: var(--muted);
}
.rc dl i {
  flex: 1;
  min-width: 12px;
  border-bottom: 1px dotted var(--line-2);
  transform: translateY(-2px);
}
.rc dd {
  margin: 0;
  max-width: 62%;
  text-align: right;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  text-transform: none;
}
.rc .renter {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 13px 10px;
  border: 0;
  cursor: pointer;
  text-align: center;
  font: 500 10px/1.5 var(--font-ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bg);
  background-color: var(--fg);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 0 100%;
  transition:
    background-size 0.42s var(--ease),
    letter-spacing 0.4s;
}
.rc .renter:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
/* the way to the director's page from the receipt (the owner, 13 Nov 2026): the names in "Directed by", and one
   line under "Enter the film" for a film with one director; links, so the receipt's own click leaves them alone */
.rc dd .dlink {
  text-decoration-color: currentColor;
}
.rc .rdir {
  display: block;
  margin-top: 10px;
  padding: 8px 4px; /* a 34px tap area for an 11px line */
  text-align: center;
  font: 500 11px/1.6 var(--font-ui);
  letter-spacing: 0.04em;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rc .rdir:hover {
  color: var(--fg);
}
.rc .rdir:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.rc .bars {
  display: block;
  width: 100%;
  height: 30px;
  margin-top: 16px;
  fill: currentColor;
}
@media (prefers-reduced-motion: reduce) {
  .pv,
  .pv * {
    transition: none !important;
    animation: none !important;
  }
}

/* ---- 11d. The title page answers the pointer ------------------------------------------------------- */
/* its picture is a stamp too: the film's picture with the stamp's rough edge, or its ink with the year */
.detail .side .poster {
  background: none;
  transition: transform 0.55s var(--ease);
}
.detail .side .poster:not(.has-img) {
  aspect-ratio: 16 / 10; /* the shape of the stamp on the card, so its ink is not stretched */
}
.detail .side .poster:not(.has-img)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--tone, var(--fg));
  -webkit-mask: var(--stamp) center / 100% 100% no-repeat;
  mask: var(--stamp) center / 100% 100% no-repeat;
}
.detail .side .poster:not(.has-img)::after {
  content: attr(data-y);
  inset: 0;
  z-index: 1;
  border: 0;
  display: grid;
  place-items: center;
  padding-left: 0.3em;
  font: 500 clamp(24px, 3.2vw, 44px) / 1 var(--font-display);
  letter-spacing: 0.3em;
  color: var(--surface-2);
  opacity: 0.92;
}
.detail .side .poster .pt,
.detail .side .poster .pk {
  display: none; /* the heading beside it says the title */
}
.detail .side .poster.has-img {
  /* the whole plate is cut, so a wide still on its blurred copy gets the same edge as a poster */
  -webkit-mask: var(--stamp-pic) center / 100% 100% no-repeat;
  mask: var(--stamp-pic) center / 100% 100% no-repeat;
}
.detail .side .poster .pb {
  /* clear of the cut edge, which takes about a twentieth of the plate on each side */
  right: calc(3% + 10px);
  top: calc(5% + 10px);
}
.facts div {
  padding-bottom: 6px;
  border-bottom: 1px solid transparent;
  transition:
    padding 0.3s,
    border-color 0.3s;
}
.facts dt {
  transition: color 0.3s;
}
.links a,
.dl .side .btn,
table.aw tr {
  transition:
    background-size 0.42s var(--ease),
    background-color 0.3s,
    box-shadow 0.3s,
    color 0.3s,
    border-color 0.3s;
}
.links a {
  padding: 2px 4px 1px;
  background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 0 / 0 100%;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .detail .side .poster:hover {
    transform: scale(1.018) rotate(-0.4deg);
  }
  .dl h2:hover {
    letter-spacing: 0.21em;
  }
  .facts div:hover {
    padding-left: 12px;
    border-bottom-color: var(--accent);
  }
  .facts div:hover dt {
    color: var(--accent);
  }
  .links a:hover {
    background-size: 100% 100%;
    color: var(--accent-ink);
    border-bottom-color: var(--accent);
  }
  table.aw tr:hover {
    background-color: var(--accent-soft);
    box-shadow: inset 2px 0 0 var(--accent);
  }
}
/* the title page arrives like a sheet laid on the table */
@media (prefers-reduced-motion: no-preference) {
  dialog.detail[open] {
    animation: sheet 0.42s var(--ease);
  }
  dialog.detail[open]::backdrop {
    animation: fadein 0.3s ease;
  }
}
@keyframes sheet {
  from {
    opacity: 0;
    translate: 0 26px;
  }
}
@keyframes fadein {
  from {
    opacity: 0;
  }
}

/* ---- 11e. The Feed: one film per screen, shown the way a 1970s projector would --------------------------
   The frame is fixed under the header and always wears the film colours. feed.js adds .rolling while the
   strip runs (sprocket holes, cue mark, blur) and .on to the film in the gate, the only one whose official
   embed is loaded. There is no countdown between two films (the owner took it out, 11 Nov 2026). */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.feedframe {
  --bg: #060505;
  --surface-2: #1e1b18;
  --stock-1: #1b1c17;
  --stock-2: #201a19;
  --stock-3: #171d1f;
  --stock-4: #1d1c16;
  --fg: #ede7dc;
  --fg-2: #c7c0b3;
  --muted: #9b9386;
  --line: #3a3530;
  --line-2: #5a534b;
  --accent: #e36a56;
  --accent-ink: #1a0905;
  --focus: #7fb2ff;
  --tone-0: #8d3223;
  --tone-1: #354a66;
  --tone-2: #3f5542;
  --tone-3: #634d18;
  --tone-4: #2a2725;
  --tone-5: #833840;
  --tone-6: #584b65;
  --tone-7: #2b5757;
  --gx: clamp(8px, 7.6vw, 110px); /* how far the gate stands in from each side */
  --gy: 20px;
  position: fixed;
  left: 0;
  right: 0;
  top: var(--feed-top, 58px);
  bottom: var(--feed-bottom, 0px);
  z-index: 5;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  color-scheme: dark;
}
.feed {
  height: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  overscroll-behavior: contain;
}
.feed::-webkit-scrollbar {
  display: none;
}
.feed:focus-visible {
  outline: 0;
}
.fs {
  position: relative;
  height: 100%;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  border-block: 12px solid var(--bg); /* the frame line between two films */
}
.fbg {
  position: absolute;
  inset: 0;
  container-type: size;
  background: var(--tone, #2a2724);
  filter: sepia(0.22) contrast(1.06);
}
.fbg::before {
  content: attr(data-y);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-left: 0.3em;
  font: 500 clamp(64px, 17vw, 240px) / 1 var(--font-display);
  letter-spacing: 0.3em;
  color: rgba(6, 5, 5, 0.24);
}
.fbg iframe {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100cqw, 177.78cqh);
  height: max(100cqh, 56.25cqw);
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none; /* a picture on the screen: the buttons beside it drive it */
}
.fs::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 5, 5, 0.3), rgba(6, 5, 5, 0) 32%, rgba(6, 5, 5, 0.82));
  pointer-events: none;
}
/* The description of the film in the gate (the owner, 12 Nov 2026: "have a translucent background behind the
   description, and it shows for a brief moment before collapsing till the user click on it"). It stands on a pane
   of dark glass, so that its lines can be read over any picture; behind the title the glass is denser (a soft
   band), because the accent is darker than the text colour. Over a white picture the text and the title keep
   4.5:1 (redesign_check.js measures it). feed.js opens the description when the film stops in the gate (.open on
   the slide) and folds it after a moment: the two .fx parts close, and only the title stays, small. The title is
   the handle (.ftog): a press opens the description again.
   The pane stands between the left side of the gate and the buttons at the right (--side, --rail), and between
   the gate's top, or the counter on a phone, and its own foot (--clear, --rest). A description taller than that
   room scrolls inside the pane; it never leaves the gate. */
.fmeta {
  --side: 150px; /* room at the left; wide screens: the same as the room for the buttons at the right */
  --rail: 150px; /* room at the right: the buttons beside the film */
  --rest: clamp(52px, 11vh, 104px); /* how far the pane stands above the foot of the slide */
  --clear: calc(var(--gy) + 12px); /* room kept free at the top of the slide */
  --pad: 24px;
  --band: color-mix(in srgb, var(--bg) 90%, transparent); /* the denser glass behind the title: 90%, so that the
     accent keeps 4.5:1 over a white picture with room to spare (at 80% it stood at 4.4 to 4.8) */
  position: absolute;
  z-index: 2;
  left: calc(var(--gx) + var(--side));
  right: calc(var(--gx) + var(--rail));
  bottom: var(--rest);
  box-sizing: border-box;
  width: fit-content;
  max-width: 680px;
  max-height: calc(100% - var(--rest) - var(--clear));
  margin-inline: auto;
  padding: 0 var(--pad);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--fg) 40%, transparent) transparent;
  border: 1px solid color-mix(in srgb, var(--fg) 16%, transparent);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  text-align: center;
}
@media (max-width: 1100px) {
  .fmeta {
    --side: 24px;
  }
}
.fx {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
}
.fx > div {
  min-height: 0;
  overflow: hidden;
}
.fs.open .fx {
  grid-template-rows: 1fr;
}
.fmeta .eyebrow {
  margin-top: 18px;
  color: var(--fg);
  opacity: 0.74;
}
.fmeta h2 {
  margin-inline: calc(-1 * var(--pad));
  padding-inline: calc(var(--pad) + 0.06em) var(--pad); /* the tracking after the last letter is given back at the left */
  background: linear-gradient(180deg, transparent, var(--band) 8px, var(--band) calc(100% - 8px), transparent);
  font-size: clamp(21px, min(4vw, 6vh), 54px);
  line-height: 1.18;
  /* the owner, 13 Nov 2026 ("kerning of the logo font"): the display capitals stand close, as in the name
     SAGASU, with the font's own kerning pairs; they were spaced 0.2em apart */
  letter-spacing: 0.06em;
  font-kerning: normal;
  font-feature-settings: 'kern' 1;
  overflow-wrap: anywhere; /* a word wider than the pane is broken, never cut off */
  color: var(--accent);
  transition: font-size 0.5s var(--ease);
}
/* a long title (feed.js marks it) is set smaller, so that it takes three lines where it would take five */
.fmeta h2.long {
  font-size: clamp(17px, min(2.9vw, 4.4vh), 40px);
}
.fs:not(.open) .fmeta h2 {
  font-size: clamp(13px, 1.5vw, 18px);
}
.ftog {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  min-height: 44px;
  padding: 10px 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ftog:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
/* the handle's mark: it points up while the description is folded (it opens upwards), down while it is open */
.ftog i {
  flex: none;
  width: 7px;
  height: 7px;
  border: solid var(--fg);
  border-width: 1.5px 0 0 1.5px;
  opacity: 0.8;
  transform: translateY(2px) rotate(45deg);
  transition: transform 0.5s var(--ease);
}
.fs.open .ftog i {
  transform: translateY(-2px) rotate(225deg);
}
/* with the description folded the picture is darkened less */
.fs::after {
  transition: opacity 0.5s var(--ease);
}
.fs.on:not(.open)::after {
  opacity: 0.6;
}
.fmeta h2 .ln {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}
.fmeta h2 .ln > span {
  display: inline-block;
}
.fs:not(.open) .fmeta h2 .ln {
  white-space: nowrap;
  text-overflow: ellipsis;
}
.fmeta .orig {
  font-size: clamp(14px, 1.6vw, 20px);
  opacity: 0.74;
}
.fmeta .by {
  margin-top: var(--g2);
  font-size: 14px;
}
.ftags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: var(--g3);
}
.ftags span {
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  font: 400 10px/1.4 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ftags span.w {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink); /* filled: its lettering does not depend on the picture behind the glass */
}
.fbtns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: var(--g4) 0 20px;
}
.fbtns .btn {
  background: none; /* on the glass */
  height: 42px;
  padding: 0 22px;
  border-color: var(--fg);
  color: var(--fg);
  text-decoration: none;
}
.fbtns .btn.solid {
  background: var(--fg);
  color: var(--bg);
}
@media (hover: hover) {
  .fbtns .btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
  }
}
.eng {
  position: absolute;
  z-index: 2;
  right: calc(var(--gx) + 62px);
  bottom: clamp(60px, 14vh, 150px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.eng button {
  width: 72px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font: 400 10px/1.3 var(--font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
}
.eng i {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 400 17px/1 var(--font-ui);
  font-style: normal;
  transition:
    background 0.25s,
    border-color 0.25s,
    transform 0.25s var(--ease);
}
.eng button[aria-pressed='true'] i {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
@media (hover: hover) {
  .eng button:hover i {
    transform: scale(1.08);
  }
}
.fsrc {
  position: absolute;
  z-index: 2;
  left: calc(var(--gx) + 62px);
  bottom: calc(var(--gy) + 34px);
  margin: 0;
  font: 400 9.5px/1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}
.fsrc a {
  text-underline-offset: 3px;
}
/* the gate: the projector's window on black, a lamp that flickers, a scratch that comes and goes */
.gate {
  position: absolute;
  z-index: 4;
  inset: var(--gy) var(--gx);
  border-radius: 26px;
  box-shadow:
    0 0 0 2000px var(--bg),
    inset 0 0 140px 30px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.gate::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #fff3d6;
  opacity: 0.04;
}
.gate::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 31%;
  width: 1px;
  background: rgba(255, 255, 255, 0.3);
  opacity: 0;
}
.cuemark {
  position: absolute;
  right: 26px;
  top: 22px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f4e7c4;
  opacity: 0;
  transition: opacity 0.1s;
}
.rolling .cuemark {
  opacity: 0.9;
}
/* sprocket holes down both sides while the strip runs */
.spr {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  width: 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background: rgba(6, 5, 5, 0.82);
  opacity: 0;
  transition: opacity 0.12s;
  pointer-events: none;
}
.spr.l {
  left: var(--gx);
}
.spr.r {
  right: var(--gx);
}
.spr i {
  display: block;
  width: 22px;
  height: 13px;
  border-radius: 3px;
  background: #e9dfc6;
}
.rolling .spr {
  opacity: 1;
}
.fnav {
  position: absolute;
  z-index: 6;
  right: calc(var(--gx) + 70px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font: 500 12px/1 var(--font-display);
  letter-spacing: 0.14em;
  color: var(--fg);
}
.fnav b {
  font-weight: 500;
  color: var(--accent);
}
.fnav button {
  width: 34px;
  height: 34px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--fg);
  opacity: 0.8;
}
.fnav button:hover {
  opacity: 1;
}
.feedempty,
.feed > .loadfail {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: var(--g5);
  text-align: center;
  color: var(--fg-2);
}
.feed > .loadfail {
  place-content: center; /* the line and its Try again button together, mid-screen */
  gap: var(--g3);
}
@media (prefers-reduced-motion: no-preference) {
  .gate::after {
    animation: flick 0.13s steps(2) infinite;
  }
  .gate::before {
    animation: scr 3.1s steps(1) infinite;
  }
  .fs.on .fbg {
    animation: weave 0.45s steps(3) infinite;
  }
  .feedframe.rolling .fs {
    filter: blur(1.3px) brightness(1.22);
  }
  /* the description of a film shows when the film stops in the gate */
  .fmeta {
    opacity: 0;
    transition: opacity 0.35s var(--ease);
  }
  .fs.on .fmeta {
    opacity: 1;
  }
  /* the title comes up from under a mask, the rest rises after it */
  .fmeta h2 .ln > span {
    transform: translateY(110%);
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .fs.on .fmeta h2 .ln > span {
    transform: none;
  }
  .fmeta .rise {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 0.7s cubic-bezier(0.33, 1, 0.68, 1) 0.25s,
      transform 0.7s cubic-bezier(0.33, 1, 0.68, 1) 0.25s;
  }
  .fs.on .fmeta .rise {
    opacity: 1;
    transform: none;
  }
  .fs.on .fmeta .by {
    transition-delay: 0.35s;
  }
  .fs.on .fmeta .ftags {
    transition-delay: 0.45s;
  }
  .fs.on .fmeta .fbtns {
    transition-delay: 0.55s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fx,
  .fmeta h2,
  .ftog i,
  .fs::after {
    transition: none;
  }
  .spr,
  .cuemark {
    display: none !important;
  }
}
@keyframes flick {
  0% {
    opacity: 0.02;
  }
  50% {
    opacity: 0.09;
  }
  100% {
    opacity: 0.04;
  }
}
@keyframes scr {
  0% {
    opacity: 0;
  }
  12% {
    opacity: 1;
    left: 31%;
  }
  16% {
    opacity: 0;
  }
  47% {
    opacity: 1;
    left: 68%;
  }
  50% {
    opacity: 0.6;
    left: 68.3%;
  }
  54% {
    opacity: 0;
  }
  81% {
    opacity: 1;
    left: 22%;
  }
  84% {
    opacity: 0;
  }
}
@keyframes weave {
  0% {
    transform: translate(0, 0);
  }
  33% {
    transform: translate(0.6px, -1px);
  }
  66% {
    transform: translate(-0.5px, 0.8px);
  }
}
@media (max-width: 760px) {
  .feedframe {
    --gy: 10px;
  }
  .gate {
    border-radius: 16px;
    box-shadow:
      0 0 0 2000px var(--bg),
      inset 0 0 60px 10px rgba(0, 0, 0, 0.5);
  }
  .spr {
    width: 20px;
  }
  .spr i {
    width: 10px;
    height: 7px;
    border-radius: 2px;
  }
  .cuemark {
    right: 14px;
    top: 14px;
    width: 16px;
    height: 16px;
  }
  .fmeta {
    --side: 16px;
    --rail: 74px;
    --rest: 64px;
    --clear: calc(var(--gy) + 50px); /* the counter is at the top here */
    --pad: 14px;
  }
  /* The title is as large as its longest word allows (--letters, from feed.js; a letter with its spacing is about
     0.88em wide). The room: the screen, less the sides of the gate, the room beside the pane (16px + 74px), the
     pane's padding and border (30px) and the handle's mark (21px). */
  .fmeta h2 {
    --room: calc(100vw - 2 * var(--gx) - 141px);
    font-size: clamp(14px, min(5.3vw, var(--room) / (var(--letters, 8) * 0.88)), 30px);
    letter-spacing: 0.06em;
    padding-inline: calc(var(--pad) + 0.06em) var(--pad);
  }
  .fmeta h2.long {
    font-size: clamp(14px, min(4.5vw, var(--room) / (var(--letters, 8) * 0.88)), 24px);
  }
  .fmeta .eyebrow {
    margin-top: 12px;
  }
  .fmeta .by {
    margin-top: 6px;
  }
  .ftags {
    gap: 6px;
    margin-top: 11px;
  }
  .ftags span {
    padding: 4px 8px;
  }
  .fbtns {
    gap: 8px;
    margin: 14px 0;
  }
  .fbtns .btn {
    height: 38px;
    padding: 0 13px;
    font-size: 10px;
  }
  .eng {
    right: calc(var(--gx) + 4px);
    bottom: 76px;
    gap: 12px;
  }
  .eng button {
    width: 58px;
    font-size: 8.5px;
  }
  .eng i {
    width: 40px;
    height: 40px;
  }
  .fsrc {
    left: calc(var(--gx) + 16px);
    right: calc(var(--gx) + 16px);
    bottom: calc(var(--gy) + 12px);
    font-size: 8.5px;
  }
  .fnav {
    right: calc(var(--gx) + 14px);
    top: calc(var(--gy) + 20px);
    transform: none;
    flex-direction: row;
  }
  .fnav button {
    display: none;
  }
}
/* a low window (a phone on its side, a small phone): the description keeps to where and when, the title, who
   made it and the buttons */
@media (max-height: 560px) {
  .fmeta .orig,
  .ftags {
    display: none;
  }
}
@media (max-height: 480px) {
  .fmeta {
    --rest: 40px;
  }
  @media (max-width: 760px) {
    .fmeta {
      --rail: 96px; /* beside the counter, not under it */
      --clear: calc(var(--gy) + 8px);
    }
  }
  .fmeta .eyebrow {
    margin-top: 10px;
  }
  .fbtns {
    margin: 10px 0 12px;
  }
  .fbtns .btn {
    height: 34px;
  }
}

/* ---- 11f. Feeling Lucky draws three long tickets --------------------------------------------------------
   The owner, 12 Nov 2026: "For the I'm feeling lucky result, the tickets should be long and horizontal", "instead
   of not being ticket". A pick is the ticket card of the lists laid on its side: half-holes down both ends; the
   plate (11b draws it: the year's stamp, or the picture); the header between two rules, the title and the reasons
   to watch it; a perforation with a notch above and below it; and the stub with who made it. lucky.js writes the
   parts. A press opens the title's page: there is no stub to tear here, the three are a draw. */
.picks {
  display: grid;
  gap: var(--g4);
  max-width: 880px;
  margin: var(--g6) auto 0;
}
.pick {
  --stub: 176px; /* from the perforation to the right edge */
  --gap: 20px; /* between the parts; the perforation runs down the middle of the last gap */
  --end: 24px; /* the room at the right end, half-holes included */
  --plate: 168px;
  --cut:
    radial-gradient(circle at 0 50%, transparent 4.6px, #000 5.2px) left top / 10px 20px no-repeat round,
    linear-gradient(#000 0 0) left 9px top 0 / calc(100% - var(--stub) - 20px) 100% no-repeat,
    radial-gradient(circle at 50% 0, transparent 11.4px, #000 12px) right calc(var(--stub) - 12px) top 0 / 24px 12px no-repeat,
    radial-gradient(circle at 50% 100%, transparent 11.4px, #000 12px) right calc(var(--stub) - 12px) bottom 0 / 24px 12px no-repeat,
    linear-gradient(#000 0 0) right calc(var(--stub) - 12px) top 11.5px / 24px calc(100% - 23px) no-repeat,
    linear-gradient(#000 0 0) right 9px top 0 / calc(var(--stub) - 20px) 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent 4.6px, #000 5.2px) right top / 10px 20px no-repeat round;
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) calc(var(--stub) - var(--end) - var(--gap) / 2);
  column-gap: var(--gap);
  align-items: center;
  width: 100%;
  min-height: 150px;
  padding: 18px var(--end) 18px 28px;
  border: 0;
  border-radius: 0;
  background: var(--wm, none) var(--stock, var(--surface-2));
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-mask: var(--cut);
  mask: var(--cut);
  /* "backwards" only: a kept last frame would hold the ticket still under the pointer */
  animation: rise 0.35s ease backwards;
  transition: transform 0.35s var(--ease);
}
.pick:nth-child(2) {
  animation-delay: 0.07s;
}
.pick:nth-child(3) {
  animation-delay: 0.14s;
}
.pick:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -8px; /* inside the edge: the mask would cut an outline drawn outside it */
}
/* the perforation */
.pick::after {
  content: '';
  position: absolute;
  top: 20px;
  bottom: 20px;
  right: var(--stub);
  width: 1px;
  background: repeating-linear-gradient(180deg, currentColor 0 5px, transparent 5px 10px);
  pointer-events: none;
}
.pick .poster {
  container-type: inline-size; /* the year on the stamp is sized by the plate's width (11b, cqw) */
}
.pick .pm {
  order: 4; /* after the plate, which 11b numbers 3 */
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pick .ch {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0 6px;
  border-block: 1px solid currentColor;
  font: 400 10px/1.5 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pick .ch span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pick .ch span:last-child {
  flex: none;
  text-align: right;
}
.pick .ch i {
  font-style: normal;
  font-variant-numeric: tabular-nums;
}
.pick .pm > b {
  margin-top: 11px;
  padding-left: 0.14em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  font: 500 17px/1.4 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.pick .t2 {
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 400 12px/1.4 var(--font-ui);
  color: var(--fg-2);
}
/* why it was drawn: an award, a score, a list, a technique, a watch link (lucky.js, why) */
.pick .why {
  display: flex;
  flex-wrap: wrap;
  gap: 0 14px;
  max-height: 3.2em; /* two lines */
  margin-top: 9px;
  overflow: hidden;
  font: 400 10px/1.6 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.pick .why span.w {
  color: var(--accent);
}
/* the stub */
.pick .cf {
  order: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  text-align: center;
}
.pick .cf span {
  font: 400 8px/1.2 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* a phone's ticket says who made it under the title, and its stub carries the count (see below) */
.pick .by,
.pick .cf .no {
  display: none;
}
.pick .cf b {
  padding-left: 0.2em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  font: 500 12px/1.4 var(--font-display);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.pool {
  text-align: center;
}
/* the dials' row stands in the middle, under the centred title and over the centred tickets */
.go {
  justify-content: center;
}
@media (hover: hover) {
  .pick:hover {
    transform: translateY(-3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pick {
    animation: none;
    transition: none;
  }
  .pick:hover {
    transform: none;
  }
}
/* A phone: the ticket keeps its long shape. The plate stands upright; the stub is narrow and carries a number
   (how many festivals), and who made it is a line under the title. */
@media (max-width: 620px) {
  .pick {
    --stub: 68px;
    --gap: 12px;
    --end: 16px;
    --plate: 84px;
    --plate-shape: 4 / 5;
    min-height: 0;
    padding: 11px var(--end) 11px 20px;
  }
  .pick .ch {
    font-size: 8.5px;
  }
  .pick .pm > b {
    margin-top: 8px;
    font-size: 13.5px;
  }
  .pick .t2 {
    font-size: 11px;
  }
  .pick .ch span:last-child {
    display: none; /* the count stands on the stub */
  }
  .pick .why {
    max-height: 1.6em; /* one line: the maker's line took the other */
    margin-top: 4px;
    font-size: 9px;
  }
  /* who made it, in a line that is read like the title: the stub is too narrow for a name, and a name turned
     on its side was not read (the owner, 12 Nov 2026: "讓用戶能夠讀到導演的名字") */
  .pick .by {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    margin-top: 2px;
    font: 400 11px/1.4 var(--font-ui);
    color: var(--fg-2);
  }
  .pick .by b {
    font-weight: 500;
    color: var(--fg);
  }
  .pick .cf > span,
  .pick .cf > b {
    display: none;
  }
  .pick .cf .no {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font: 500 15px/1 var(--font-display);
    font-style: normal;
    letter-spacing: 0.08em;
    padding-left: 0.08em;
    font-variant-numeric: tabular-nums;
  }
  .pick .cf .no small {
    font: 400 7px/1.2 var(--font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
}

/* ---- 11f. Browse: Films, Series and Shorts are one page. Its three names are the title and the switch; under
        them one search box and one button for sort and filters (the owner, 12 Nov 2026: "more minimal", "merge
        the categories") ---- */
.cats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 clamp(var(--g4), 3vw, var(--g5));
}
.cats a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-left: 0.2em; /* the spacing after the last letter would push the name off the middle of its rule */
  color: var(--muted);
  font: 500 clamp(19px, 2.6vw, 34px) / 1.2 var(--font-display);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.15s;
}
@media (hover: hover) {
  .cats a:hover {
    color: var(--fg);
  }
}
/* the category that is open: in the accent over an accent rule, the way a bar marks its place */
.cats a[aria-current='page'] {
  color: var(--accent);
}
.cats a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0.2em;
  right: 0.2em;
  bottom: 3px;
  height: 2px;
  background: var(--accent);
}
.cats a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
/* the search box and its one button sit in the middle, under the names */
.find {
  flex-wrap: nowrap;
  width: min(100%, 680px);
  margin-inline: auto;
}
.find .ctl.search {
  flex: 1 1 auto;
  height: 44px;
}
.find .ctl.search input {
  height: 42px;
}
.find .btn {
  flex: none;
  height: 44px;
}
.fbtn {
  position: relative;
}
.fbtn svg {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.fbtn svg circle {
  fill: var(--bg);
}
/* how many filters are set: a small accent tag on the button's corner */
.fbtn .n:not(:empty) {
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: 0;
}
@media (min-width: 761px) {
  .fpanel .filters {
    justify-content: center;
  }
}
@media (max-width: 760px) {
  /* a phone: the button is its icon alone, and Reset is in the sheet's foot */
  .fbtn {
    width: 44px;
    padding: 0;
    justify-content: center;
  }
  .fbtn .lbl,
  .find #fReset {
    display: none;
  }
}

/* ---- 11g. Where a film can be seen: one line under its titles on the title page (whereLine in detail.js). What
        it is stands first as a small stamp (filled while the film is showing), then the city and the dates, then
        the festival, whose name is the link. It is always one line: the part with class "wl" (the festival's name,
        or what was last known) is cut with "…" when the screen is narrow; the stamp and the dates never are. The
        line takes its column's width and never widens it (width 0 with min-width 100%: a line that may not wrap
        would otherwise push the whole title page wider than a phone). ---- */
.where {
  display: flex;
  align-items: center;
  gap: 0 7px;
  width: 0;
  min-width: 100%;
  margin: var(--g3) 0 0;
  overflow: hidden;
  white-space: nowrap;
  font: 400 13px/1.7 var(--font-ui);
  color: var(--fg-2);
}
.where > * {
  flex: none;
}
.where > :first-child {
  margin-left: auto; /* centred while there is room; from the left edge when there is not, so the stamp is never cut */
}
.where > :last-child {
  margin-right: auto;
}
.where .wc {
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 760px) {
  .where .wc {
    max-width: 7em; /* a very long city gives way to the festival's name */
  }
}
@media (max-width: 380px) {
  .where .wc,
  .where .wc + i {
    display: none; /* the narrowest phones: the festival's name says more than the city */
  }
}
.where > i {
  font-style: normal;
  color: var(--muted);
}
.where .wk {
  padding: 1px 7px 0;
  border: 1px solid var(--accent);
  color: var(--accent);
  font: 500 10px/1.7 var(--font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.where .wk.on {
  background: var(--accent);
  color: var(--accent-ink);
}
.where .wk + i {
  display: none; /* the stamp needs no dot after it */
}
.where .wl {
  flex: 0 1 auto;
  display: inline-flex;
  gap: 0.3em;
  min-width: 0;
}
.where .wl > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.where a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .where a:hover {
    color: var(--accent);
    text-decoration-color: var(--accent);
  }
}
.where a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
@media (pointer: coarse) {
  .where a {
    padding-block: 8px; /* a finger's target */
  }
}

/* ---- 11h. Directors: the index is a catalogue's list, a director's page is their films and their festivals
        (the owner, 12 Nov 2026: festival shorts and their directors in front); the About page ---- */
.dlist {
  max-width: 880px;
  margin: 0 auto;
  background: var(--bg);
  border-top: 1px solid var(--fg);
}
.drow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px 96px 92px 64px;
  align-items: baseline;
  gap: var(--g3);
  min-height: 44px;
  padding: 10px var(--g2) 9px;
  border-bottom: 1px solid var(--line);
  color: var(--fg);
  text-decoration: none;
}
.drow b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 500 var(--t1) / 1.5 var(--font-ui);
}
.drow .dn,
.drow .ds {
  font: 400 11px / 1.5 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.drow .dy,
.drow .ds {
  text-align: right;
}
.drow .ds {
  color: var(--accent);
}
@media (hover: hover) {
  .drow:hover {
    background: var(--surface-2);
  }
  .drow:hover b {
    color: var(--accent);
  }
}
@media (max-width: 620px) {
  .drow {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 var(--g3);
  }
  .drow b {
    grid-column: 1 / -1;
  }
  .drow .dn:nth-of-type(2),
  .drow .ds {
    display: none;
  }
  .drow .dy {
    text-align: right;
  }
}
/* one director */
.dback {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  font: 400 11px / 1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--bg);
}
.dback:hover {
  color: var(--fg);
}
.dhead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--g2);
  margin: var(--g3) 0 var(--g6);
  text-align: center;
}
.dhead .kicker,
.about .kicker {
  margin: 0;
  font: 400 11px / 1.4 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.dhead h2 {
  margin: 0;
  padding-left: 0.2em;
  font: 500 clamp(22px, 3.8vw, 52px) / 1.2 var(--font-display);
  letter-spacing: 0.2em;
  color: var(--accent);
  overflow-wrap: anywhere;
}
.dfacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 9px;
  margin: 0 0 var(--g2);
  font: 400 12px / 1.7 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.dfacts i {
  font-style: normal;
  color: var(--muted);
}
#v-director .sec {
  margin-top: var(--g6);
}
#v-director .grid {
  margin-bottom: var(--g4);
}
.dtrail {
  max-width: 880px;
}
.dtrail .tl {
  color: inherit;
  text-underline-offset: 2px;
}
.dfix {
  max-width: 70ch;
  margin-top: var(--g5);
}
.dlink {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 3px;
}
.dlink:hover {
  color: var(--accent);
}
/* About */
.about {
  margin: 0 auto;
  padding-block: var(--g4) var(--g5);
}
.about .lede {
  font-size: var(--t2);
  line-height: 1.5;
}
.forwho {
  margin: var(--g5) 0;
  border-top: 1px solid var(--fg);
}
.forwho dt {
  margin: 0;
  padding-top: var(--g3);
  font: 500 12px / 1.4 var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.forwho dd {
  margin: 4px 0 0;
  padding-bottom: var(--g3);
  border-bottom: 1px solid var(--line);
}
/* Browse's switch on a narrow phone: three longer names still stand in one row */
@media (max-width: 520px) {
  .cats {
    gap: 0 var(--g3);
  }
  .cats a {
    font-size: 15px;
    letter-spacing: 0.12em;
  }
}
/* the Type filter's three chips */
#fType {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g2);
}
.about .kicker {
  text-align: center;
}

/* ---- 11i. No two tickets are quite alike (the owner, 13 Nov 2026, with three references: a printed receipt,
        a sheet of old cinema tickets of many shapes and papers, a one-colour handbill).
        cards.js (ticketLook) gives a ticket, from its film's number, one of four edges (.e0 to .e3), one of five
        papers (.k0 to .k4) and where the paper's tooth lies (--wx, --wy). The papers are as light as
        --surface-2 and as grey, so every ink reads on them as it does there; the small print (header, reasons, the stub's label) is set in a typewriter's
        face. The same film always has the same ticket. ---- */
.k1 {
  --stock: var(--stock-1);
}
.k2 {
  --stock: var(--stock-2);
}
.k3 {
  --stock: var(--stock-3);
}
.k4 {
  --stock: var(--stock-4);
}
/* every ticket's paper has a tooth over the page's fine grain, laid at another place on each (--wx, --wy), so no
   two sheets look cut from the same spot. No watermark and no pattern (the owner, 13 Nov 2026 10:02: "Remove
   the ticket watermark and 紋，全部只加紋理"). Each edge has a paper of its own (11:59: "Different silhouette
   ticket should have different paper texture"): half-holes on a fibrous sheet, a straight cut on a cloudy pulp,
   bitten corners on linen, teeth on a rough sheet with flecks. */
:is(.tk, .pick) {
  --wm: var(--tooth) var(--wx, 0%) var(--wy, 0%) / 260px 260px, var(--grain);
}
/* .e0: fibres that run along the ticket */
:is(.tk, .pick) {
  --tooth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.03 .8' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .23 0 0 0 0 .18 0 0 0 0 .12 0 0 0 0.34 -0.115'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
:root[data-theme='dark'] :is(.tk, .pick) {
  --tooth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.03 .8' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .93 0 0 0 0 .9 0 0 0 0 .84 0 0 0 0.204 -0.069'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
/* .e1: a cloudy pulp */
:is(.tk, .pick).e1 {
  --tooth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .23 0 0 0 0 .18 0 0 0 0 .12 0 0 0 0.5 -0.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
:root[data-theme='dark'] :is(.tk, .pick).e1 {
  --tooth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .93 0 0 0 0 .9 0 0 0 0 .84 0 0 0 0.3 -0.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
/* .e2: a linen weave: fibres both ways */
:is(.tk, .pick).e2 {
  --tooth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .9' numOctaves='2' seed='5' stitchTiles='stitch' result='h'/%3E%3CfeColorMatrix in='h' type='matrix' values='0 0 0 0 .23 0 0 0 0 .18 0 0 0 0 .12 0 0 0 0.3 -0.105' result='a'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .02' numOctaves='2' seed='6' stitchTiles='stitch' result='v'/%3E%3CfeColorMatrix in='v' type='matrix' values='0 0 0 0 .23 0 0 0 0 .18 0 0 0 0 .12 0 0 0 0.3 -0.105' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='a'/%3E%3CfeMergeNode in='b'/%3E%3C/feMerge%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
:root[data-theme='dark'] :is(.tk, .pick).e2 {
  --tooth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .9' numOctaves='2' seed='5' stitchTiles='stitch' result='h'/%3E%3CfeColorMatrix in='h' type='matrix' values='0 0 0 0 .93 0 0 0 0 .9 0 0 0 0 .84 0 0 0 0.18 -0.063' result='a'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .02' numOctaves='2' seed='6' stitchTiles='stitch' result='v'/%3E%3CfeColorMatrix in='v' type='matrix' values='0 0 0 0 .93 0 0 0 0 .9 0 0 0 0 .84 0 0 0 0.18 -0.063' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='a'/%3E%3CfeMergeNode in='b'/%3E%3C/feMerge%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
/* .e3: a rough sheet with flecks */
:is(.tk, .pick).e3 {
  --tooth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='1' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .23 0 0 0 0 .18 0 0 0 0 .12 0 0 0 1.2 -0.68'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
:root[data-theme='dark'] :is(.tk, .pick).e3 {
  --tooth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='1' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .93 0 0 0 0 .9 0 0 0 0 .84 0 0 0 0.72 -0.408'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
/* the edges. .e0 is the row of half-holes drawn in 11b and 11f. */
/* .e1: cut straight */
:is(.grid:not(.dense), .pvhold) > .tk.e1 {
  --cut:
    linear-gradient(#000 0 0) left 0 top 0 / 100% calc(100% - var(--stub) - 11px) no-repeat,
    radial-gradient(circle at 0 50%, transparent 11.4px, #000 12px) left 0 bottom calc(var(--stub) - 12px) / 12px 24px no-repeat,
    radial-gradient(circle at 100% 50%, transparent 11.4px, #000 12px) right 0 bottom calc(var(--stub) - 12px) / 12px 24px no-repeat,
    linear-gradient(#000 0 0) left 11.5px bottom calc(var(--stub) - 12px) / calc(100% - 23px) 24px no-repeat,
    linear-gradient(#000 0 0) left 0 bottom 0 / 100% calc(var(--stub) - 11px) no-repeat;
}
.pick.e1 {
  --cut:
    linear-gradient(#000 0 0) left 0 top 0 / calc(100% - var(--stub) - 11px) 100% no-repeat,
    radial-gradient(circle at 50% 0, transparent 11.4px, #000 12px) right calc(var(--stub) - 12px) top 0 / 24px 12px no-repeat,
    radial-gradient(circle at 50% 100%, transparent 11.4px, #000 12px) right calc(var(--stub) - 12px) bottom 0 / 24px 12px no-repeat,
    linear-gradient(#000 0 0) right calc(var(--stub) - 12px) top 11.5px / 24px calc(100% - 23px) no-repeat,
    linear-gradient(#000 0 0) right 0 top 0 / calc(var(--stub) - 11px) 100% no-repeat;
}
/* .e2: the four corners bitten off */
:is(.grid:not(.dense), .pvhold) > .tk.e2 {
  --cut:
    radial-gradient(circle at 0 0, transparent 9.4px, #000 10px) left top / 10px 10px no-repeat,
    radial-gradient(circle at 100% 0, transparent 9.4px, #000 10px) right top / 10px 10px no-repeat,
    linear-gradient(#000 0 0) left 9.5px top 0 / calc(100% - 19px) 10px no-repeat,
    linear-gradient(#000 0 0) left 0 top 9.5px / 100% calc(100% - var(--stub) - 20.5px) no-repeat,
    radial-gradient(circle at 0 50%, transparent 11.4px, #000 12px) left 0 bottom calc(var(--stub) - 12px) / 12px 24px no-repeat,
    radial-gradient(circle at 100% 50%, transparent 11.4px, #000 12px) right 0 bottom calc(var(--stub) - 12px) / 12px 24px no-repeat,
    linear-gradient(#000 0 0) left 11.5px bottom calc(var(--stub) - 12px) / calc(100% - 23px) 24px no-repeat,
    linear-gradient(#000 0 0) left 0 bottom 9.5px / 100% calc(var(--stub) - 20.5px) no-repeat,
    linear-gradient(#000 0 0) left 9.5px bottom 0 / calc(100% - 19px) 10px no-repeat,
    radial-gradient(circle at 0 100%, transparent 9.4px, #000 10px) left bottom / 10px 10px no-repeat,
    radial-gradient(circle at 100% 100%, transparent 9.4px, #000 10px) right bottom / 10px 10px no-repeat;
}
.pick.e2 {
  --cut:
    radial-gradient(circle at 0 0, transparent 9.4px, #000 10px) left top / 10px 10px no-repeat,
    radial-gradient(circle at 0 100%, transparent 9.4px, #000 10px) left bottom / 10px 10px no-repeat,
    linear-gradient(#000 0 0) left 0 top 9.5px / 10px calc(100% - 19px) no-repeat,
    linear-gradient(#000 0 0) left 9.5px top 0 / calc(100% - var(--stub) - 20.5px) 100% no-repeat,
    radial-gradient(circle at 50% 0, transparent 11.4px, #000 12px) right calc(var(--stub) - 12px) top 0 / 24px 12px no-repeat,
    radial-gradient(circle at 50% 100%, transparent 11.4px, #000 12px) right calc(var(--stub) - 12px) bottom 0 / 24px 12px no-repeat,
    linear-gradient(#000 0 0) right calc(var(--stub) - 12px) top 11.5px / 24px calc(100% - 23px) no-repeat,
    linear-gradient(#000 0 0) right 9.5px top 0 / calc(var(--stub) - 20.5px) 100% no-repeat,
    linear-gradient(#000 0 0) right 0 top 9.5px / 10px calc(100% - 19px) no-repeat,
    radial-gradient(circle at 100% 0, transparent 9.4px, #000 10px) right top / 10px 10px no-repeat,
    radial-gradient(circle at 100% 100%, transparent 9.4px, #000 10px) right bottom / 10px 10px no-repeat;
}
/* .e3: torn off a roll, a row of teeth */
:is(.grid:not(.dense), .pvhold) > .tk.e3 {
  --cut:
    conic-gradient(from 135deg at 50% 0, #000 90deg, transparent 0) left top / 10px 5px round no-repeat,
    linear-gradient(#000 0 0) left 0 top 4.5px / 100% calc(100% - var(--stub) - 15.5px) no-repeat,
    radial-gradient(circle at 0 50%, transparent 11.4px, #000 12px) left 0 bottom calc(var(--stub) - 12px) / 12px 24px no-repeat,
    radial-gradient(circle at 100% 50%, transparent 11.4px, #000 12px) right 0 bottom calc(var(--stub) - 12px) / 12px 24px no-repeat,
    linear-gradient(#000 0 0) left 11.5px bottom calc(var(--stub) - 12px) / calc(100% - 23px) 24px no-repeat,
    linear-gradient(#000 0 0) left 0 bottom 4.5px / 100% calc(var(--stub) - 15.5px) no-repeat,
    conic-gradient(from -45deg at 50% 100%, #000 90deg, transparent 0) left bottom / 10px 5px round no-repeat;
}
.pick.e3 {
  --cut:
    conic-gradient(from 45deg at 0 50%, #000 90deg, transparent 0) left top / 5px 10px no-repeat round,
    linear-gradient(#000 0 0) left 4.5px top 0 / calc(100% - var(--stub) - 15.5px) 100% no-repeat,
    radial-gradient(circle at 50% 0, transparent 11.4px, #000 12px) right calc(var(--stub) - 12px) top 0 / 24px 12px no-repeat,
    radial-gradient(circle at 50% 100%, transparent 11.4px, #000 12px) right calc(var(--stub) - 12px) bottom 0 / 24px 12px no-repeat,
    linear-gradient(#000 0 0) right calc(var(--stub) - 12px) top 11.5px / 24px calc(100% - 23px) no-repeat,
    linear-gradient(#000 0 0) right 4.5px top 0 / calc(var(--stub) - 15.5px) 100% no-repeat,
    conic-gradient(from 225deg at 100% 50%, #000 90deg, transparent 0) right top / 5px 10px no-repeat round;
}
/* the small print: typed, not set */
:is(:is(.grid:not(.dense), .pvhold) > .tk, .pick) :is(.ch, .cf > span, .cf .no small),
.pick .why {
  font-family: var(--font-print);
}

/* ------------------------------------------------------------ 11j. the 20-point audit (13 Nov 2026)
   Touch target: a press area of 44px without moving the layout (the Feed's gate has no room to spare).
   Widow: a title's lines are balanced; running text does not end on one lone word.
   Line length: notes keep to 70ch like the rest of the prose. Tabular numbers: the Feed's counter does not jump. */
.fbtns .btn,
.tlink {
  position: relative;
}
.fbtns .btn::after,
.tlink::after {
  content: '';
  position: absolute;
  inset: -4px 0;
}
.tlink::after {
  inset: -9px 0;
}
@media (max-width: 620px) {
  #q,
  #dQ,
  #fFilter {
    min-height: 44px;
  }
}
:is(.grid:not(.dense), .pvhold) > .tk .cap b,
.pick .pm b,
.fmeta h2,
.rc h4,
.view h1,
.view h2 {
  text-wrap: balance;
}
.prose p,
.prose li,
.note,
.lede,
.desc,
dd {
  text-wrap: pretty;
}
.note {
  max-width: 70ch;
}
#feedCount {
  font-variant-numeric: tabular-nums lining-nums;
}
/* tracking: capitals are never set tighter than normal (the About page's headings were) */
.about h2 {
  letter-spacing: 0.04em;
}
@media (max-width: 620px) {
  details > summary {
    min-height: 44px;
    box-sizing: border-box;
  }
}

/* ------------------------------------------------------------ 11k. the Feed, quieter (the owner, 13 Nov 2026:
   "Fix feed UI, minimalist, margin, kerning of the Logo font")
   One button; the film's marks are one typed line without boxes; the counter and its arrows stand in the top
   corner on every screen (in the middle of the right side they ran into the Watchlist button); every part keeps
   the same margin from the gate's edge. */
.ftags {
  gap: 0 14px;
  margin-top: var(--g2);
}
.ftags span,
.ftags span.w {
  padding: 0;
  border: 0;
  background: none;
  opacity: 0.74;
}
.ftags span.w {
  color: var(--accent);
  opacity: 1;
}
.fmeta .eyebrow {
  text-wrap: balance;
}
.fbtns {
  margin: var(--g4) 0 var(--g4);
}
.fnav {
  top: calc(var(--gy) + 20px);
  right: calc(var(--gx) + 62px);
  transform: none;
  flex-direction: row;
  gap: 6px;
}
.fnav button {
  order: 2; /* the number first, then the two arrows */
}
@media (max-width: 760px) {
  .fnav {
    right: calc(var(--gx) + 16px);
  }
  .eng {
    right: calc(var(--gx) + 7px); /* its 40px rings then stand 16px from the gate's edge, like the text */
  }
  .ftags {
    margin-top: 6px;
  }
  .fbtns {
    margin: 12px 0 14px;
  }
}

/* ------------------------------------------------------------ 11l. small print of 9px; a bezel round the Feed's glass
   The owner, 13 Nov 2026 ("按你說的改", after the 20-point audit): nothing is set smaller than 9px (the tickets'
   typed print stood at 7 to 8.5px). */
:is(.grid:not(.dense), .pvhold) > .tk .ch {
  font-size: clamp(9px, 4.1cqw, 10px);
}
:is(.grid:not(.dense), .pvhold) > .tk .cf span {
  font-size: 9px;
  letter-spacing: 0.1em;
}
.rc .rk,
.rc dt,
.pick .cf span,
.pick .cf .no small {
  font-size: 9px;
}
@media (max-width: 760px) {
  .eng button,
  .fsrc,
  .pick .ch {
    font-size: 9px;
  }
}
/* The owner, 13 Nov 2026: "bezel feed的description". The pane of glass sits in a bezel like a viewfinder's: a dark
   rim 4px wide, lit along its upper edge and shaded along its lower one, with a hairline where the glass begins. */
.fmeta {
  border: 0;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--fg) 14%, transparent),
    inset 0 1px 0 0 color-mix(in srgb, var(--fg) 34%, transparent),
    0 0 0 4px color-mix(in srgb, var(--bg) 86%, transparent),
    0 -1px 0 4px color-mix(in srgb, var(--fg) 26%, transparent),
    0 1px 0 4px rgba(0, 0, 0, 0.7);
}

/* ------------------------------------------------------------ 11m. the title glides into the film's page
   A shared element transition (detail.js sharedTitle): the title pressed on the receipt or in the Feed and the
   page's title carry one name, so the browser moves one into the other; the rest cross-fades. Short, and not at
   all under "reduce motion" (detail.js does not start it). */
#detail[open] #dTitle {
  view-transition-name: film-title; /* only while the page is open: a closed page keeps its last title */
}
::view-transition-group(film-title) {
  animation-duration: 0.32s;
  animation-timing-function: var(--ease);
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.22s;
}
@media (max-width: 760px) {
  .fsrc {
    letter-spacing: 0.03em; /* at 9px the line still fits a phone's gate in one row */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ------------------------------------------------------------ 11n. the Feed's number stands in the cue mark
   The owner, 13 Nov 2026: "feed的右上角圓跟數字不在visual centre，數字直接跑出來了". The counter moved into the corner
   where the projector's cue mark flashes (11k), and the two did not meet. Now they are one thing: the number is
   set in a box of the mark's own size and place, centred both ways, without tracking (tracking adds room after
   the last figure and pushes a number off centre); the mark is wide enough for three figures. */
.feedframe {
  --cue: 34px; /* the mark's size */
  --cue-x: 26px; /* from the gate's right edge */
  --cue-y: 22px; /* from the gate's top edge */
}
.cuemark {
  right: var(--cue-x);
  top: var(--cue-y);
  width: var(--cue);
  height: var(--cue);
}
.fnav {
  top: calc(var(--gy) + var(--cue-y));
  right: calc(var(--gx) + var(--cue-x));
  height: var(--cue);
  align-items: center;
  gap: 2px;
  letter-spacing: 0;
}
.fnav button {
  order: 0; /* the arrows, then the number in the mark at the corner */
}
#feedCount {
  order: 1;
  display: grid;
  place-items: center;
  width: var(--cue);
  height: var(--cue);
  margin-left: 6px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
}
#feedCount b {
  display: block;
  transition: color 0.1s;
}
.rolling #feedCount b {
  color: #12100e; /* on the lit mark the number is dark */
}
@media (max-width: 760px) {
  .feedframe {
    --cue: 30px;
    --cue-x: 14px;
    --cue-y: 14px;
  }
  .cuemark {
    right: var(--cue-x);
    top: var(--cue-y);
    width: var(--cue);
    height: var(--cue);
  }
  .fnav {
    top: calc(var(--gy) + var(--cue-y));
    right: calc(var(--gx) + var(--cue-x));
  }
  #feedCount {
    margin-left: 0;
    font-size: 11px;
  }
}
#feedCount b {
  transform: translateY(-0.5px); /* optical centre: figures have no descenders, so their box sits a hair low */
}
/* ================================================================================================
   12. The opening (owner, 13 Nov 2026): once per visit the flame in the lantern kindles, flares and settles,
       throwing embers; its light reveals the torch, the roof and then the name, which start in the dark. Behind it a
       storyboard sheet rules itself in silverpoint, from the middle out. The page's grain (z 60) lies over it, so the
       sheet sits on paper. Drawing: scripts/intro_inline.py; sheet and once-per-visit rule: the script under it in
       index.html. Seconds: sheet 0-1.2, flame .3-2.1, torch and roof .9-2.95, name 2.05-3.45, the curtain lifts at 4.
   ================================================================================================ */
.intro {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
  animation: in-lift 0.45s ease-in 4s forwards; /* also ends it when the script cannot */
}
.intro.in-hold {
  animation: none;
}
.intro.in-out {
  animation: in-lift 0.35s ease-in forwards;
}
.in-board {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: radial-gradient(ellipse 34vmax 30vmax at 50% 50%, transparent 35%, #000 85%);
  mask-image: radial-gradient(ellipse 34vmax 30vmax at 50% 50%, transparent 35%, #000 85%);
}
.in-board path {
  fill: none;
  stroke: var(--line-2);
  stroke-opacity: 0.75;
  stroke-width: 0.7;
}
.in-board .in-dash {
  stroke-dasharray: 3 3;
}
.in-board text {
  fill: var(--line-2);
  font: 500 8px/1 var(--font-mono);
  letter-spacing: 0.14em;
}
.in-stage {
  position: relative;
  width: min(56vw, 46vh, 360px);
}
.in-logo {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.in-logo .in-ink {
  fill: var(--fg);
}
.in-logo .in-shade {
  fill: var(--fg);
  opacity: 0.09;
}
.in-logo .in-warm,
.in-logo .in-fire {
  fill: var(--accent);
}
.in-front {
  transform: scale(125);
}
.in-glow {
  opacity: 0.25;
}
.in-ember {
  opacity: 0;
  fill: color-mix(in srgb, var(--accent) 78%, #fff);
  transform-box: fill-box;
  transform-origin: center;
}
.in-go .in-rule {
  stroke-dasharray: 1;
  animation: in-rule 0.8s cubic-bezier(0.3, 0.6, 0.3, 1) var(--d) both;
}
.in-go .in-board text {
  animation: in-fade 0.5s ease-out calc(var(--d) + 0.35s) both;
}
.in-go .in-flame {
  animation: in-kindle 1.8s linear 0.3s both;
}
.in-go .in-glow {
  animation: in-glow 2.6s ease-out 0.55s both;
}
.in-go .in-fw {
  animation: in-climb 1.8s cubic-bezier(0.4, 0.05, 0.3, 1) 0.9s both;
}
.in-go .in-fi {
  animation: in-climb 1.8s cubic-bezier(0.4, 0.05, 0.3, 1) 1.25s both;
}
.in-go .in-fnw {
  animation: in-climb 1.1s cubic-bezier(0.4, 0.05, 0.3, 1) 2.05s both;
}
.in-go .in-fni {
  animation: in-climb 1.1s cubic-bezier(0.4, 0.05, 0.3, 1) 2.35s both;
}
.in-go .in-ember {
  animation: in-ember var(--t) cubic-bezier(0.2, 0.6, 0.4, 1) var(--d) both;
}
/* the flame: a spark, a small wobble before it catches (anticipation), a tall flare (stretch), a squash, two
   smaller answers (follow-through), then its own size */
@keyframes in-kindle {
  0% { transform: scale(0.05, 0.03); opacity: 0; animation-timing-function: ease-out; }
  6% { transform: scale(0.13, 0.11); opacity: 1; animation-timing-function: ease-in-out; }
  14% { transform: scale(0.11, 0.15); animation-timing-function: ease-in-out; }
  22% { transform: scale(0.1, 0.08); animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
  55% { transform: scale(1.14, 1.32); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  70% { transform: scale(1.04, 0.88); animation-timing-function: ease-in-out; }
  80% { transform: scale(0.98, 1.06); animation-timing-function: ease-in-out; }
  90% { transform: scale(1.01, 0.98); animation-timing-function: ease-in-out; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes in-glow {
  0% { opacity: 0; transform: scale(0.2); }
  25% { opacity: 1; transform: scale(1.12); }
  45% { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0.25; transform: scale(1); }
}
@keyframes in-climb {
  0% { transform: scale(0); }
  100% { transform: scale(125); }
}
@keyframes in-ember {
  0% { opacity: 0; transform: translate(0, 0) scale(1); }
  12% { opacity: 1; }
  55% { transform: translate(calc(var(--dx) * 0.6), calc(var(--dy) * 0.55)) scale(0.8); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); }
}
@keyframes in-rule {
  0% { stroke-dashoffset: 1; }
  100% { stroke-dashoffset: 0; }
}
@keyframes in-fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes in-lift {
  to { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
}