/* The Movie Palace: dark art deco in oxblood and brass, picked by Sebastian (Oct 2026).
   Loaded after each page's own styles, so it only restyles; layout and behavior are unchanged.
   Posters stay plain. */

/* Josefin Sans with its vertical metrics rebalanced, so capitals sit centered in buttons and fields
   instead of riding up near the top edge (the original leaves 250 units under the baseline but only 48
   above the capitals). Renamed per the font's OFL Reserved Font Name; see fonts/OFL.txt. */
@font-face {
  font-family: 'Shelf Palace Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(/fonts/shelf-palace-sans.woff2) format('woff2');
}
:root {
  --bg: #120a0b;
  --surface: #1c0a0c;
  --surface-hover: #2a0f13;
  --border: #5e4825;
  --text: #f1e5cc;
  --text-muted: #ab9479;
  --accent: #c9a24c;
  --accent-glow: #c9a24c22;
  --radius: 0;
  --font-display: 'Limelight', Georgia, serif;
  --font-body: 'Shelf Palace Sans', 'Futura', system-ui, sans-serif;
  --p-velvet: #3b0f14;
  --p-velvet-2: #26090d;
  --p-brass: #c9a24c;
  --p-brass-lo: #7d6430;
  --p-glow: 0 0 40px -6px #ffcf6a55;
}

html { background-color: var(--bg); }
body {
  background-color: var(--bg);
  /* faint brass fan-scale carpet, with a velvet glow behind the sign */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Cg fill='none' stroke='%23c9a24c' stroke-opacity='.11'%3E%3Cpath d='M0 24a24 24 0 0 1 48 0M8 24a16 16 0 0 1 32 0M16 24a8 8 0 0 1 16 0'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Cg fill='none' stroke='%23c9a24c' stroke-opacity='.11'%3E%3Cpath d='M0 24a24 24 0 0 1 48 0M8 24a16 16 0 0 1 32 0M16 24a8 8 0 0 1 16 0'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse 900px 600px at 50% 0%, #3a0f14 0%, transparent 70%);
  background-position: 0 0, 24px 12px, 0 0;
  background-repeat: repeat, repeat, no-repeat;
}

/* ============ MARQUEE SIGN ============ */
.container { padding-top: 1.4rem; }
header { margin-bottom: 1.2rem; }
.orn-crown { display: block; width: 150px; margin: 0 auto -6px; }
.marquee {
  position: relative; margin: 0 4px; padding: 18px;
  background: linear-gradient(#3b2a12, #1e1408);
  border: 2px solid var(--p-brass);
  box-shadow: var(--p-glow);
}
/* outer trim line, broken where the sunburst sits */
.marquee::before {
  content: ""; position: absolute; inset: -7px; border: 1px solid var(--p-brass-lo); pointer-events: none;
  -webkit-mask: linear-gradient(90deg, #000 calc(50% - 82px), transparent 0 calc(50% + 82px), #000 0) 0 0 / 100% 2px no-repeat, linear-gradient(#000, #000) 0 2px / 100% calc(100% - 2px) no-repeat;
          mask: linear-gradient(90deg, #000 calc(50% - 82px), transparent 0 calc(50% + 82px), #000 0) 0 0 / 100% 2px no-repeat, linear-gradient(#000, #000) 0 2px / 100% calc(100% - 2px) no-repeat;
}
.marquee .lights { position: absolute; inset: 0; pointer-events: none; }
.marquee .lights i {
  position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%;
  background: radial-gradient(circle, #fffbe8 0 2.6px, #ffd27a 3.4px, #ffb84a66 4.6px, transparent 5.5px);
  opacity: 0.3; animation: chase3 0.9s steps(1) infinite;
}
.marquee .lights i.p1 { animation-delay: -0.6s; }
.marquee .lights i.p2 { animation-delay: -0.3s; }
@keyframes chase3 { 0% { opacity: 1; filter: drop-shadow(0 0 3px #ffc65a); } 33.4%, 100% { opacity: 0.3; filter: none; } }
@media (prefers-reduced-motion: reduce) { .marquee .lights i { animation: none; opacity: 1; } }

.board {
  position: relative; z-index: 1; padding: 4px 14px;
  background: radial-gradient(ellipse at 50% 45%, #fffdf3 0%, #fbf0d2 58%, #e9d3a1 100%);
  box-shadow: 0 0 26px #ffe3a066, inset 0 0 16px #c9a96a66;
  color: #151010; font-family: 'Oswald', 'Arial Narrow', sans-serif; font-weight: 500; text-transform: uppercase;
}
.board .row { padding: 7px 0 6px; letter-spacing: 0.05em; line-height: 1.05; }
.board .row + .row { border-top: 1px solid #cbb37f; box-shadow: 0 -1px 0 #fffaf0 inset; }
header .board .sm { font-size: 1.05rem; color: #151010; }
header .board h1 {
  font-family: 'Oswald', 'Arial Narrow', sans-serif; font-weight: 600; font-size: 2.5rem;
  color: #151010; letter-spacing: 0.05em; margin: 0; padding: 8px 0 6px;
}
header .board .logo-link:focus-visible { outline-color: var(--p-velvet); }
@media (max-width: 600px) {
  header .board h1 { font-size: 1.95rem; }
  header .board .sm { font-size: 0.92rem; }
  .board { padding-inline: 8px; }
}

/* ============ NAV ============ */
nav { margin-top: 1.5rem; gap: 1rem; align-items: center; }
nav a {
  font-family: 'Poiret One', system-ui, sans-serif; color: #e2c27a; font-size: 1rem; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase; text-shadow: 0 0 10px #c9a24c66;
  padding-bottom: 4px; border-bottom: 1px solid var(--p-brass);
}
nav .sep { display: inline-block; width: 6px; height: 6px; background: var(--p-brass); transform: rotate(45deg); }

/* ============ HEADINGS & INPUTS ============ */
section h2 { color: var(--p-brass); }
section h2 span { font-family: var(--font-body); letter-spacing: 0.14em; }
.search-box input, .input-group input {
  background: var(--surface); border: 1px solid var(--p-brass);
  outline: 1px solid var(--p-brass-lo); outline-offset: 3px;
}
.search-box input:focus, .input-group input:focus { border-color: #e2c27a; box-shadow: 0 0 14px -4px #ffcf6a66; }
.search-box svg { stroke: var(--p-brass); }
.search-box { margin: 0 4px 1rem; }
.input-group { margin: 0 4px; }
.autocomplete-list { border-color: var(--p-brass-lo); }
.autocomplete-item img, .confirm-card .preview img { border-radius: 0; }

/* ============ FILTERS ============ */
.filters { border: 1px solid var(--p-brass-lo); border-radius: 0; background: var(--surface); }
.filters button { border-radius: 0; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; font-weight: 600; }
.filters button.active { background: var(--p-brass); color: #1b1210; }
.genre-filters button, .format-filters button {
  border-radius: 0; border-color: var(--p-brass-lo); color: var(--text); background: #1c0a0cdd;
}
.genre-filters button .count, .format-filters button .count { color: var(--p-brass); }
.genre-filters button.active, .format-filters button.active { background: var(--p-velvet); border-color: var(--p-brass); }
.sort-bar { letter-spacing: 0.06em; }
.sort-bar select {
  /* drop Safari's native rounded menu button; draw a square box with a brass chevron instead */
  -webkit-appearance: none; appearance: none; border-radius: 0; border-color: var(--p-brass-lo);
  padding: 0.35rem 1.9rem 0.35rem 0.7rem; background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23c9a24c' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.65rem center;
}
.sort-bar select:focus-visible { border-color: var(--p-brass); }

/* fan ornament above the poster grid */
.orn-fan { display: flex; align-items: center; gap: 10px; margin: 0.2rem 0 1rem; }
.orn-fan::before, .orn-fan::after { content: ""; flex: 1; height: 3px; border-top: 1px solid var(--p-brass-lo); border-bottom: 1px solid var(--p-brass-lo); }
.orn-fan svg { width: 56px; height: 22px; }

/* ============ POSTERS (plain) ============ */
.grid-item, .card-fan .card, .mini-item, .poster-choices img { border-radius: 0; }

/* ============ POP-UP ============ */
.modal-backdrop { background: rgba(8, 3, 4, 0.78); }
.modal {
  /* fine-pile velvet: one faint diagonal sheen over a light-and-dark grain, on the wine gradient */
  background:
    linear-gradient(115deg, transparent 18%, #ff8f8f10 36%, transparent 54%, #0000002a 80%, transparent),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 0.7  0 0 0 0 0.7  0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(var(--p-velvet), var(--p-velvet-2));
  border: 1px solid var(--p-brass); border-radius: 0;
  outline: 1px solid var(--p-brass-lo); outline-offset: -7px; padding-top: 1.8rem;
}
.modal .orn-crown { width: 90px; margin: -8px auto 6px; }
.modal > img { border-radius: 0; box-shadow: var(--p-glow); } /* same glow as the marquee sign */
.modal .title { color: var(--p-brass); font-size: 1.45rem; }
.modal .meta { letter-spacing: 0.06em; }
.modal-genres span { border-radius: 0; border-color: var(--p-brass-lo); color: var(--p-brass); }
.modal-cast { border-top-color: var(--p-brass-lo); }
.modal button { border-radius: 0; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; }
.modal button.btn-close { background: transparent; border: 1px solid var(--p-brass-lo); color: var(--text); }
.btn-remove { border-color: #c4524a !important; color: #f09a90; }
.modal .genre-edit-chips button, .modal .genre-suggestions button { border-radius: 0; }
.format-choices, .modal .format-choices button { border-radius: 0; }
.modal .format-choices button[aria-checked="true"] { color: #1b1210; }

/* one-line text that clips its overflow: give descenders room below the centered capitals */
.autocomplete-item .info .title, .autocomplete-item .known, .mini-item .cap .role { line-height: 1.3; }

/* ============ CARDS, BUTTONS, ACTOR ROWS ============ */
.confirm-card, .spotlight, .actor-row, .status-bar, .result { border-radius: 0; }
.confirm-card, .actor-row { border-color: var(--p-brass-lo); }
.spotlight { border-color: var(--p-brass); box-shadow: var(--p-glow); }
.btn, .confirm-card .actions button, .show-more, .count-badge, .format-switch, .format-switch button, .season-chip { border-radius: 0; }
.btn, .confirm-card .actions button, .show-more { text-transform: uppercase; letter-spacing: 0.08em; }
.btn-primary, .btn-confirm, .format-switch button[aria-checked="true"], .season-chip.selected, .count-badge { color: #1b1210; }
.btn-quiet, .btn-cancel { background: transparent; border: 1px solid var(--p-brass-lo); color: var(--text); }
.count-badge.muted { border-color: var(--p-brass-lo); }
.actor-row .rank { color: var(--p-brass); }