/* Editorial palette and layout; the perspective gallery keeps its own geometry. */
:root {
  --bg: #0b0a0a;
  --surface: #141212;
  --card: #171515;
  --ink: #f7f1eb;
  --muted: #beb3ac;
  --line: #332b2a;
  --cinema-red: #ff8178;
  --cinema-red-light: #ffb0a8;
  --cinema-button: #b62630;
  --cinema-button-hover: #9f1d26;
  --cinema-display: Georgia, 'Times New Roman', serif;
  --brand-deep: var(--cinema-button);
  --brand-hover: var(--cinema-button-hover);
  --gold: var(--cinema-red);
  --gold-light: var(--cinema-red-light);
  --action: var(--cinema-button);
  --action-hover: var(--cinema-button-hover);
  --focus: var(--cinema-red-light);
  color-scheme: dark;
}

html, body { background: var(--bg); color: var(--ink); }
::selection { background: var(--cinema-button); color: #fff; }
.site-header { background: #0b0a0af7; border-color: #332b2a; box-shadow: none; }
.site-header .brand, .cinema-footer .brand { background: #090909; border-color: #2b2626; }
.nav-shell nav > a { color: #ded5ce; font-weight: 550; }
.nav-shell nav > a:hover, .nav-shell nav > a[aria-current] { color: var(--cinema-red); }
.nav-actions .language { color: var(--cinema-red-light); }
.nav-actions .menu-toggle span { background: var(--ink); }
.button { border-radius: 5px; background: var(--action); border-color: var(--action); color: #fff; box-shadow: none; }
.button:hover { background: var(--action-hover); border-color: var(--action-hover); color: #fff; }
.button-outline { background: transparent; border-color: #775450; color: var(--cinema-red-light); }
.button-outline:hover { background: #271b1a; border-color: var(--cinema-red); color: #fff; }
.text-link { color: var(--cinema-red); border-bottom-color: #76524e; }
.text-link:hover { color: var(--cinema-red-light); border-bottom-color: currentColor; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

.reference-hero { --gallery-accent: var(--cinema-red); --gallery-focus: var(--cinema-red-light); }
html[lang='en'] .reference-hero h1 { font-weight: 700; letter-spacing: -.05em; text-shadow: 0 3px 18px #000a; }
.reference-hero h1, .reference-hero h1 .headline-line { color: var(--ink); }
.reference-hero .hero-kicker { border-color: #4b3030; background: #140e0e; }
.reference-hero .cinema-shortcuts {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  width: min(1080px, calc(100% - 64px));
  margin: 32px auto 0;
}
.reference-hero .cinema-shortcuts .hero-feature {
  border-color: #3f3434;
  background: #141212;
  transition: background-color .18s ease, border-color .18s ease;
}
.reference-hero .cinema-shortcuts .hero-feature:hover { background: #211616; border-color: #875653; }
.reference-hero .cinema-shortcuts .hero-feature > svg { background: #271a1a; color: var(--cinema-red); }
.reference-hero .cinema-shortcuts .hero-feature strong { color: var(--ink); }
.reference-hero .cinema-shortcuts .hero-feature small { color: var(--muted); }
.reference-hero .cinema-shortcuts .hero-feature > div { min-width: 0; }
.reference-hero .search-feedback {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 13px;
  width: min(750px, calc(100% - 32px));
  margin: 12px auto 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.reference-hero .search-feedback:empty { display: none; }
.reference-hero #clear-search {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 5px 10px;
  border: 1px solid #694441;
  border-radius: 5px;
  background: #160e0e;
  color: var(--cinema-red-light);
  font-size: 12px;
  font-weight: 650;
}
.reference-hero #clear-search:hover { color: #fff; border-color: var(--cinema-red); background: #2a1919; }

.cinema-section { padding: clamp(58px, 7vw, 100px) 0; background: var(--bg); }
.reference-hero + .cinema-section, .cinema-section + .cinema-section { border-top: 1px solid var(--line); }
.cinema-heading { margin-bottom: clamp(22px, 3.2vw, 36px); }
.cinema-heading .eyebrow, .cinema-about .eyebrow, .spotlight .eyebrow, .feature-copy .eyebrow,
#story-dialog .eyebrow { color: var(--cinema-red); }
.cinema-heading .eyebrow i, .cinema-about .eyebrow i, .spotlight .eyebrow i, .feature-copy .eyebrow i,
#story-dialog .eyebrow i { background: var(--cinema-red); }
.cinema-heading h2, .feature-copy h2, .feature-copy h3, .spotlight h2, .cinema-about h2, #story-dialog h2 {
  margin-top: 11px;
  color: var(--ink);
  font-size: clamp(34px, 4vw, 57px);
  line-height: 1.04;
  letter-spacing: -.04em;
  text-wrap: balance;
}
html[lang='en'] :is(.cinema-heading h2, .feature-copy h2, .feature-copy h3, .spotlight h2, .cinema-about h2, .story-content h3, #story-dialog h2) {
  font-family: var(--cinema-display);
  font-weight: 500;
  letter-spacing: -.045em;
}
html[lang='bn'] :is(.cinema-heading h2, .feature-copy h2, .feature-copy h3, .spotlight h2, .cinema-about h2, .story-content h3, #story-dialog h2) {
  line-height: 1.26;
  letter-spacing: 0;
}
.cinema-heading p, .cinema-about p, .feature-copy p { max-width: 61ch; margin-top: 14px; color: var(--muted); line-height: 1.75; }

.cinema-section .filter-tabs { gap: 8px; margin-bottom: 22px; }
.cinema-section .filter-tabs > button {
  min-height: 44px;
  padding: 8px 14px;
  border-color: #594545;
  border-radius: 5px;
  background: #1a1515;
  color: #e4d8d2;
  font-size: 12px;
  font-weight: 630;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.cinema-section .filter-tabs > button:hover { border-color: var(--cinema-red); background: #2b1a19; color: #fff; }
.cinema-section .filter-tabs > button:is(.active, [aria-pressed='true']) { background: var(--action); border-color: #d65158; color: #fff; }
#statuses .filter-tabs { flex-wrap: wrap; }
#statuses .filter-tabs > button { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
#statuses .filter-tabs [data-status-filter='saved'] { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
#statuses .filter-tabs [data-status-filter='saved'] svg { width: 15px; height: 15px; }

.story-grid, .status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.story-card, .status-card {
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color .18s ease, background-color .18s ease;
}
.story-card:hover, .status-card:hover, .story-card:focus-within, .status-card:focus-within { border-color: #754a47; }
.story-card { display: grid; grid-template-columns: minmax(86px, 32%) minmax(0, 1fr); gap: 15px; padding: 14px; }
.story-art {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  background-color: #282021;
  background-repeat: no-repeat;
  background-size: 300% 300%;
  background-position: calc(var(--anime-column, 0) * 50%) calc(var(--anime-row, 0) * 50%);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px #fff2;
}
.story-art[data-anime-sheet='emotion'] { background-image: url("assets/anime-emotion.jpg"); }
.story-art[data-anime-sheet='attitude'] { background-image: url("assets/anime-attitude.jpg"); }
.story-card > .story-art { align-self: start; }
.story-content { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 3px 0 0; }
.card-kicker {
  display: block;
  color: var(--cinema-red);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.45;
  letter-spacing: .13em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
html[lang='bn'] .card-kicker { letter-spacing: 0; }
.story-content h3 { margin: 7px 0 6px; color: var(--ink); font-size: clamp(19px, 1.65vw, 25px); line-height: 1.13; }
.story-content p { margin: 0 0 7px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.story-content h3, .story-content p, .status-card blockquote, #spotlight-text { overflow-wrap: anywhere; }
.cinema-section .card-link, .spotlight .card-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  min-height: 44px;
  padding: 7px 0;
  border: 0;
  color: var(--cinema-red);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-align: start;
}
.story-content .card-link, .status-card .card-link { align-self: flex-start; margin-top: auto; }
.cinema-section .card-link:hover, .spotlight .card-link:hover { color: var(--cinema-red-light); text-decoration: underline; text-underline-offset: 4px; }
.cinema-section .card-link svg { width: 16px; height: 16px; }
.status-card { display: flex; flex-direction: column; min-height: 191px; padding: clamp(17px, 2.25vw, 27px); }
.status-card[data-mood] .card-kicker::before { content: ''; display: inline-block; vertical-align: .22em; width: 13px; height: 1px; margin-inline-end: 7px; background: currentColor; }
.status-card blockquote { margin: 12px 0 10px; color: var(--ink); font-size: clamp(18px, 1.7vw, 25px); line-height: 1.32; }
html[lang='en'] .status-card blockquote, html[lang='en'] #spotlight-text { font-family: var(--cinema-display); }
.status-card .status-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 11px; min-width: 0; margin-top: auto; padding-top: 4px; }
.status-card .status-actions > :is(.card-link, .save-status) { min-width: 44px; max-width: 100%; min-height: 44px; margin: 0; white-space: normal; }
.status-card .status-actions > .card-link { align-self: auto; padding-inline: 2px; }
.status-share-field {
  width: min(100%, 28rem);
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
}
.status-card .save-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid #795e5a;
  border-radius: 5px;
  background: #211919;
  color: #e7d3ce;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  text-align: center;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.status-card .save-status svg { width: 15px; height: 15px; }
.status-card .save-status:hover { background: #2e201f; border-color: #a37670; color: var(--cinema-red-light); }
.status-card .save-status[aria-pressed='true'] { background: #352120; border-color: #bf746c; color: var(--cinema-red-light); }
.status-card .save-status[aria-pressed='true'] svg { fill: currentColor; }
.status-card .save-status[aria-pressed='true']:hover { background: #432927; color: #fff; }
.status-card .save-status:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.featured-status {
  --status-art-shade: linear-gradient(90deg, #10141d, #10141d40 32%, transparent 68%);
  --status-art: url("assets/anime-emotion.jpg");
  --status-art-column: left;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  grid-column: 1 / -1;
  min-height: 322px;
  overflow: hidden;
  padding: clamp(25px, 4vw, 56px);
  border: 1px solid #42526a;
  border-radius: 12px;
  background: #10141d;
}
.is-linked-status[data-mood='emotion'] { --status-art-column: center; }
.is-linked-status[data-mood='attitude'] { --status-art: url("assets/anime-attitude.jpg"); }
.is-linked-status:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.featured-status::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 0 0 auto;
  width: min(47%, 460px);
  background: var(--status-art-shade), linear-gradient(0deg, #10141dbf, transparent 48%), var(--status-art) var(--status-art-column) 3.5% / 300% auto no-repeat;
}
.featured-status .card-kicker, .cinema-section .featured-status .card-link { color: #ffb9b9; }
.featured-status blockquote {
  max-width: min(55%, 32ch);
  margin: 14px 0 12px;
  color: #fff7f6;
  font-size: clamp(1.45rem, 3vw, 2.35rem);
  line-height: 1.26;
  overflow-wrap: anywhere;
  white-space: pre-line;
}
html[lang='en'] .featured-status blockquote { font-family: var(--cinema-display); }
.featured-status .status-actions { margin-top: 0; }
#latest-status { margin-bottom: 16px; }

@media (max-width: 650px) {
  .featured-status {
    --status-art-shade: linear-gradient(0deg, #10141d, #10141d12 58%, transparent);
    min-height: 0;
    padding-top: 172px;
  }
  .featured-status::before { inset: 0 0 auto; width: 100%; height: 225px; background-position: center, center, var(--status-art-column) 6%; }
  .featured-status blockquote { max-width: 100%; }
}

.grid-empty { grid-column: 1 / -1; padding: 24px; border: 1px dashed #654845; border-radius: 7px; color: var(--muted); }

.feature-panel {
  display: grid;
  grid-template-columns: minmax(150px, .7fr) minmax(0, 1.3fr);
  align-items: center;
  gap: clamp(24px, 6vw, 86px);
  padding: clamp(22px, 4.6vw, 63px);
  border: 1px solid #422f2d;
  border-radius: 12px;
  background: #171212;
}
.feature-panel .feature-art { width: min(100%, 254px); justify-self: center; border-radius: 8px; }
.feature-copy { min-width: 0; }
.feature-copy :is(.button, .card-link, .text-link) { margin-top: 16px; }
.feature-copy .card-kicker + p { margin-top: 8px; }

.clip-shelf {
  display: grid;
  grid-template-columns: clamp(100px, 15vw, 164px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 4.3vw, 58px);
  padding: clamp(17px, 3.2vw, 43px);
  border: 1px solid #422f2d;
  border-radius: 10px;
  background: #171212;
}
.clip-shelf .clip-art { align-self: center; border-radius: 7px; }
.clip-copy { min-width: 0; }
.clip-copy h3 { margin: 8px 0 0; color: var(--ink); font-size: clamp(25px, 3vw, 41px); line-height: 1.09; text-wrap: balance; }
html[lang='en'] .clip-copy h3 { font-family: var(--cinema-display); font-weight: 500; letter-spacing: -.04em; }
html[lang='bn'] .clip-copy h3 { line-height: 1.27; }
.clip-copy p { max-width: 60ch; margin-top: 11px; color: var(--muted); line-height: 1.65; }
.platform-links { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 16px; }
.platform-links > :is(span, a) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 5px 10px;
  border: 1px solid #4f3b3a;
  border-radius: 5px;
  background: #201818;
  color: #e3d5cd;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
}
.platform-links > a { min-height: 44px; color: var(--cinema-red-light); }
.platform-links > a:hover { background: #2b1a19; border-color: var(--cinema-red); color: #fff; }
.platform-links svg { width: 15px; height: 15px; }

.spotlight {
  padding: clamp(27px, 5.7vw, 72px) clamp(18px, 5vw, 64px);
  border: 1px solid #4a302d;
  border-radius: 12px;
  background: #1b1313;
  text-align: center;
}
.spotlight .eyebrow { justify-content: center; }
.spotlight h2 { font-size: clamp(32px, 3.9vw, 53px); }
.spotlight p { max-width: 55ch; margin: 12px auto 0; }
#spotlight-text { max-width: 34ch; margin: 20px auto; color: var(--ink); font-size: clamp(23px, 3.4vw, 41px); line-height: 1.25; text-wrap: balance; }
#random-status, #spotlight-copy {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  margin: 4px;
  padding: 8px 15px;
  border: 1px solid var(--action);
  border-radius: 5px;
  background: var(--action);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}
#random-status:hover { background: var(--action-hover); border-color: var(--cinema-red); }
#spotlight-copy { background: transparent; border-color: #88605b; color: var(--cinema-red-light); }
#spotlight-copy:hover { background: #2a1b1a; color: #fff; border-color: var(--cinema-red); }

.cinema-about { border-top: 1px solid var(--line); }
.cinema-about :is(.button, .text-link) { margin-top: 16px; }
.cinema-footer { background: #080707; border-top: 1px solid var(--line); }
.cinema-footer .footer-main { flex-wrap: wrap; row-gap: 16px; }
.cinema-footer .footer-main > p, .cinema-footer .footer-bottom { color: var(--muted); }
.cinema-footer .footer-main > a:not(.brand), .cinema-footer .footer-bottom a:hover { color: var(--cinema-red); }
.cinema-footer .footer-bottom { border-color: var(--line); }
.cinema-footer nav { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; }
.cinema-footer nav a:hover { color: var(--cinema-red-light); }

#story-dialog {
  width: min(690px, calc(100% - 28px));
  max-height: calc(100dvh - 32px);
  background: #1a1515;
  color: var(--ink);
  border: 1px solid #60403d;
  border-radius: 12px;
  box-shadow: 0 28px 95px #000c;
  color-scheme: dark;
}
#story-dialog::backdrop { background: #000b; backdrop-filter: blur(8px); }
#story-dialog .dialog-inner { padding: 0; }
#story-dialog .story-dialog-content { position: relative; padding: clamp(23px, 5vw, 49px); }
#story-dialog .dialog-close { z-index: 1; color: var(--cinema-red-light); }
#story-dialog .dialog-close:hover { color: #fff; }
#story-dialog h2 { padding-inline-end: 20px; font-size: clamp(30px, 4vw, 49px); }
#story-dialog p { color: var(--muted); font-size: 15px; line-height: 1.7; }
#story-dialog p + p { margin-top: 13px; }
#story-dialog .story-art { width: min(100%, 155px); margin-block: 17px; }
#story-dialog :is(.button, .card-link) { margin-top: 15px; }

@media (max-width: 1100px) {
  .reference-hero .cinema-shortcuts { width: calc(100% - 48px); gap: 10px; }
  .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 850px) {
  .reference-hero .cinema-shortcuts { margin-top: 27px; gap: 9px; }
  .status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .nav-shell #main-nav {
    max-height: calc(100vh - 78px);
    max-height: calc(100dvh - 78px);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    background: #121010fc;
    border-color: var(--line);
    box-shadow: 0 18px 32px #0008;
  }
  .nav-shell #main-nav > a { border-color: var(--line); }
  .reference-hero .cinema-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); width: calc(100% - 32px); margin-top: 24px; gap: 10px; }
  .cinema-section { padding-block: 55px; }
  .story-grid { grid-template-columns: minmax(0, 1fr); gap: 11px; }
  .story-card { grid-template-columns: minmax(82px, 26%) minmax(0, 1fr); gap: 14px; padding: 12px; }
  .feature-panel { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .feature-panel .feature-art { width: min(100%, 220px); }
  .cinema-footer .footer-bottom { align-items: flex-start; flex-wrap: wrap; gap: 10px 20px; }
  .cinema-footer .footer-bottom > div { flex-wrap: wrap; gap: 8px 16px; }
}
@media (max-width: 500px) {
  .status-grid { grid-template-columns: minmax(0, 1fr); gap: 11px; }
  .status-card { min-height: 0; }
  .clip-shelf { grid-template-columns: minmax(74px, 25%) minmax(0, 1fr); align-items: start; gap: 13px; padding: 14px; }
  .clip-shelf .clip-art { align-self: start; }
  .clip-copy p { font-size: 13px; }
  .cinema-section .filter-tabs { gap: 7px; }
  .cinema-section .filter-tabs > button { padding-inline: 10px; }
  #story-dialog .dialog-close { top: 7px; right: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-card, .status-card, .reference-hero .cinema-shortcuts .hero-feature, .cinema-section .filter-tabs > button { transition: none; }
  .status-card .save-status { transition: none; }
}
.cinema-toast {
  position: fixed; z-index: 12; bottom: 18px; left: 50%; transform: translateX(-50%);
  max-width: calc(100% - 32px); margin: 0; padding: 10px 18px; border-radius: 24px;
  background: #19191e; border: 1px solid #44434a; color: #fff; text-align: center;
  box-shadow: 0 12px 30px #0008; pointer-events: none;
}
.cinema-toast:empty { opacity: 0; }
.status-card .poster-button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px;
  max-width: 100%; padding: 7px 9px; border: 1px solid #6c403d; border-radius: 6px;
  background: #261818; color: #ffc1b8; font-size: .78rem; line-height: 1.25; text-align: start;
}
.status-card .poster-button svg { width: 15px; height: 15px; }
.status-card .poster-button:hover { background: #3a2120; border-color: #ba6e66; color: #fff; }
.status-card .poster-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.story-series { color: #f2aaa1; font-size: .86rem; margin: 10px 0 0; }
.story-tools { display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid #3b3031; margin-top: 25px; padding-top: 20px; }
.story-tools .button { min-height: 44px; }
.story-tools .button-outline, #poster-dialog .button-outline { color: #ffe2df; background: #241a1c; border-color: #714d4d; }
.story-tools .button-outline:hover { color: #fff; background: #392326; border-color: #ac706c; }
.dialog-feedback { margin: 9px 0 0; color: #f5b2aa; font-size: .85rem; overflow-wrap: anywhere; }
.dialog-feedback:empty { margin: 0; }
#poster-dialog {
  width: min(820px, calc(100% - 32px)); max-height: calc(100dvh - 28px); padding: 0;
  background: #141113; color: #fff5f2; border: 1px solid #553537; border-radius: 13px;
  box-shadow: 0 22px 80px #000c; color-scheme: dark;
}
#poster-dialog::backdrop { background: #060407dd; }
.poster-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); position: relative; }
.poster-preview { display: grid; place-items: center; background: #0b090b; padding: 20px; }
.poster-preview canvas { display: block; width: 100%; max-width: 370px; max-height: 57vh; object-fit: contain; border: 1px solid #3c2a2b; border-radius: 5px; }
.poster-controls { padding: 50px 25px 27px; min-width: 0; display: grid; align-content: center; gap: 9px; }
.poster-controls h2 { color: #fff5f2; margin: 0; font-size: clamp(1.28rem, 4vw, 1.95rem); line-height: 1.3; }
.poster-controls label { color: #f5d8d2; font-size: .83rem; margin-top: 5px; }
.poster-controls p { color: #dcc5c2; overflow-wrap: anywhere; }
.poster-controls select { color: #fff5f2; background: #251c20; border: 1px solid #61474a; padding: 9px 10px; border-radius: 6px; min-height: 44px; }
.poster-controls .button { margin-top: 4px; min-height: 44px; justify-content: center; }
.poster-controls .button:disabled { opacity: .48; cursor: wait; }
#poster-dialog .dialog-close { color: #fff5f2; z-index: 2; }
.cinema-video-gallery { display: grid; gap: 16px; margin-bottom: 18px; }
.cinema-video-card { display: grid; grid-template-columns: minmax(160px, 270px) minmax(0, 1fr); align-items: center; gap: clamp(18px, 5vw, 65px); border: 1px solid #483133; border-radius: 14px; padding: clamp(15px, 3vw, 32px); background: radial-gradient(ellipse at 8% 15%, #271b25, #141112 60%); }
.cinema-video-frame { max-width: 270px; width: 100%; margin: 0 auto; overflow: hidden; border: 1px solid #6b4447; border-radius: 11px; background: #0b090b; }
.cinema-video-frame video { display: block; aspect-ratio: 9 / 16; width: 100%; height: auto; max-height: 476px; object-fit: contain; }
.cinema-video-copy h3 { color: #fff6f0; margin: 8px 0; font-size: clamp(1.5rem, 4vw, 3rem); line-height: 1.22; }
.cinema-video-copy > p { color: #d4c3c0; margin: 0 0 13px; }
.cinema-video-copy .card-kicker { color: #ffb4ab; }
@media (max-width: 620px) {
  .poster-shell { grid-template-columns: 1fr; }
  .poster-preview { padding: 12px 38px; }
  .poster-preview canvas { max-height: 37vh; width: auto; max-width: 100%; }
  .poster-controls { padding: 13px 16px 16px; }
  .poster-controls .card-kicker { display: none; }
  .cinema-video-card { grid-template-columns: 1fr; }
  .cinema-video-copy { grid-row: 1; }
}