/* Horrorscape — a late-night film guide: bone paper, ink bands and dried-blood red, set in a fat
   Didone (Abril Fatface). Light pages with dark header, heroes and footer (the .dark scope swaps
   the tokens). Structure is ../_engine/base.css; the guide's own components are below. */
:root {
  --bg: #ede6da;
  --bg-rgb: 237, 230, 218;
  --bg-2: #e4dbcc;
  --panel: #f8f3ea;
  --panel-2: #efe6d6;
  --footer-bg: #140e0d;
  --line: rgba(25, 18, 16, 0.16);
  --text: #1b1412;
  --muted: #4c403a;
  --dim: #74665d;
  --red: #a8121b;
  --red-deep: #7f0b12;
  --ochre: #a8121b;
  --ochre-soft: #8e0f17;
  --gum: #5a6b4f;
  --display: "Abril Fatface", "Didot", "Bodoni 72", Georgia, serif;
  --body: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 4px;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
}
.dark {
  --bg: #140e0d;
  --bg-rgb: 20, 14, 13;
  --bg-2: #1d1513;
  --panel: #221917;
  --panel-2: #2c211e;
  --line: rgba(237, 230, 218, 0.15);
  --text: #ede6da;
  --muted: #cbbfb1;
  --dim: #9c8f84;
  --ochre: #e0313b;
  --ochre-soft: #ff8f86;
  background: var(--bg);
  color: var(--text);
}
a:hover { color: var(--red-deep); }
.dark a:hover { color: #fff; }
h1, h2, h3, h4 { letter-spacing: 0; line-height: 1.08; }
h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.btn { border-radius: 2px; font: 900 .95rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; padding: 14px 22px; }
.btn.sm { font-size: .8rem; padding: 10px 14px; }
.btn.ghost { color: var(--text) !important; border-color: currentColor; }
.btn.ghost:hover { background: rgba(127, 11, 18, .08); border-color: var(--red); }
.dark .btn.ghost { color: var(--text) !important; border-color: rgba(237, 230, 218, .55); }
.eyebrow { letter-spacing: .26em; }
section { padding-block: clamp(48px, 7vw, 92px); }
.band { background: var(--bg-2); }

/* header */
.site-header.dark { background: rgba(20, 14, 13, .97); border-bottom: 3px solid var(--red); }
.site-header .brand img { height: 34px; width: auto; }
.nav a { color: var(--text); }
@media (max-width: 960px) { .dark .nav { background: #140e0d; } }

/* page hero */
.page-hero { padding-block: 72px 48px; border-bottom: 0; }
.page-hero .bg img { opacity: .3; filter: grayscale(.4) contrast(1.1); }
.page-hero h1 { color: var(--text); max-width: 900px; }
.page-hero .tldr { background: rgba(237, 230, 218, .07); }
.hero-with-side { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: end; }
.hero-poster-card img, .hero-poster-card .poster-blank { width: 300px; height: 300px; object-fit: cover; box-shadow: 0 30px 60px -20px #000; outline: 1px solid rgba(237, 230, 218, .25); outline-offset: 6px; transform: rotate(2deg); }
@media (max-width: 820px) { .hero-with-side { grid-template-columns: 1fr; } .hero-poster-card img { width: 200px; height: 200px; } }

/* home hero: logo + a wall of posters */
.hero-guide { padding-block: 56px 64px; position: relative; overflow: hidden; }
.hero-guide::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 2px, transparent 2px 4px); pointer-events: none; }
.hero-guide .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center; position: relative; }
.hero-guide .hero-logo { width: min(560px, 100%); height: auto; margin: 0 0 22px; }
.hero-guide h1 { font-size: clamp(1.9rem, 4vw, 3.1rem); margin-bottom: 10px; }
.hero-guide .strap { font: 700 .82rem/1.5 var(--body); letter-spacing: .24em; text-transform: uppercase; color: var(--ochre-soft); margin-bottom: 26px; }
.hero-guide .presents { flex-direction: row; align-items: center; gap: 12px; margin-top: 30px; color: var(--dim); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; }
.hero-guide .presents img { width: 130px; }
.poster-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; transform: rotate(-3deg); }
.poster-wall a { display: block; box-shadow: 0 18px 30px -16px #000; transition: transform .2s; }
.poster-wall a:nth-child(3n+2) { transform: translateY(18px); }
.poster-wall a:hover { transform: scale(1.04); z-index: 2; }
.poster-wall img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
@media (max-width: 860px) { .hero-guide .wrap { grid-template-columns: 1fr; } .poster-wall { transform: none; } }
.home-facts { margin-top: 28px; }

/* stats as ledger tiles */
.ledger-tiles .stat { background: var(--panel); border: 0; border-top: 4px solid var(--red); border-radius: 0; }
.ledger-tiles .stat .n { font-size: clamp(1.9rem, 3.4vw, 2.7rem); color: var(--text); }

/* sub-genre index: numbered like a programme */
.genre-index { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--text); }
.genre-index li { border-bottom: 1px solid var(--line); }
.genre-index a { display: grid; grid-template-columns: 70px minmax(200px, 1fr) 1.4fr; gap: 6px 24px; padding: 20px 0; color: var(--text); text-decoration: none; align-items: baseline; }
.genre-index a:hover { background: var(--panel); }
.genre-index .num { font: 400 1.6rem/1 var(--display); color: var(--red); }
.genre-index .g-name { font: 400 1.6rem/1.1 var(--display); }
.genre-index .g-line { color: var(--muted); }
.genre-index .g-rooms { grid-column: 2 / -1; font: 700 .74rem/1.4 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
@media (max-width: 700px) { .genre-index a { grid-template-columns: 44px 1fr; } .genre-index .g-line, .genre-index .g-rooms { grid-column: 2; } }

/* verdict cards */
.card { border-radius: 0; }
.verdict { border-top: 4px solid var(--red); }
.verdict h3 a { color: var(--text); text-decoration: none; }
.big-rate { font: 400 3.4rem/1 var(--display); color: var(--red); margin: 6px 0 4px; }

/* cities */
.city-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0; border: 2px solid var(--text); }
.city-col { padding: 26px; border-right: 1px solid var(--line); background: var(--panel); }
.city-col:last-child { border-right: 0; }
.city-col h3 { font-size: 2rem; }
.city-col h3 a { color: var(--text); text-decoration: none; }
.city-col ul { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 6px; }
.city-col li a { font-weight: 700; color: var(--text); }
.dim { color: var(--dim); font-size: .88em; }
.soon-line { font: 700 .82rem/1.4 var(--body); color: var(--red); letter-spacing: .04em; }
.dark .soon-line { color: var(--ochre-soft); }

/* room cards */
.room-list { display: grid; gap: 22px; }
.room-card { display: grid; grid-template-columns: 200px 1fr; gap: 26px; padding: 22px; background: var(--panel); border-left: 5px solid var(--red); }
.room-card.alt { border-left-color: var(--gum); }
.room-poster img, .room-poster .poster-blank { width: 200px; height: 200px; object-fit: cover; display: block; }
.room-body h3 { font-size: 1.9rem; margin: 6px 0 6px; }
.room-body h3 a { color: var(--text); text-decoration: none; }
.room-tag { color: var(--muted); font-style: italic; }
.room-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.room-where { list-style: none; padding: 0; margin: 10px 0; border-top: 1px solid var(--line); }
.room-where li { display: grid; grid-template-columns: 130px 1fr auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.room-where li span:first-child { font-weight: 900; }
.room-where li span:last-child { font-weight: 700; color: var(--red); }
.room-site { font-size: .9rem; margin: 6px 0 0; }
@media (max-width: 700px) { .room-card { grid-template-columns: 1fr; } .room-poster img { width: 100%; height: auto; } .room-where li { grid-template-columns: 1fr auto; } .room-where li span:nth-child(2) { grid-column: 1 / -1; order: 3; color: var(--muted); } }
.tag { display: inline-block; padding: 5px 9px; background: var(--red); color: #fff; font: 900 .68rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.tag.alt { background: var(--gum); }
.chip { display: inline-block; padding: 4px 9px; border: 1px solid var(--line); font: 700 .72rem/1.2 var(--body); letter-spacing: .06em; color: var(--muted); text-decoration: none; background: var(--panel); }
.chip:hover { border-color: var(--red); }
.poster-blank { display: grid; place-items: center; background: #2a201e; color: #ede6da; font: 400 1.3rem var(--display); text-align: center; padding: 10px; aspect-ratio: 1; }

/* genres index */
.genre-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 22px; }
.genre-card { background: var(--panel); padding: 24px; border-top: 4px solid var(--text); }
.genre-card h2 { font-size: 1.7rem; }
.genre-card h2 a { color: var(--text); text-decoration: none; }
.poster-row { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.poster-row li a { display: grid; gap: 6px; width: 110px; color: var(--text); text-decoration: none; font: 700 .78rem/1.2 var(--body); }
.poster-row img, .poster-row .poster-blank { width: 110px; height: 110px; object-fit: cover; }
.poster-row.big li a { width: 160px; }
.poster-row.big img { width: 160px; height: 160px; }

/* tables */
table.scare td a { color: var(--text); font-weight: 700; text-decoration-color: var(--red); }
table.scare tr.alt-row td { background: rgba(90, 107, 79, .1); }
.table-wrap { border-radius: 0; background: var(--panel); }
th { background: var(--panel-2); }
.rank-list { margin: 10px 0 0; padding-left: 22px; display: grid; gap: 6px; }
.rank-list strong { color: var(--red); }
.factsheet { border-radius: 0; background: var(--panel); }
.factsheet dt { background: var(--panel-2); }
.keyfacts { border-radius: 0; border-left: 4px solid var(--red); }

/* official-site callout */
.official { margin-top: 26px; padding: 22px; background: #140e0d; color: #ede6da; }
.official .eyebrow { color: #ff8f86; }
.official p { color: #cbbfb1; font-size: 1rem; }
.story .official p:first-child::first-letter { all: unset; }

/* reviews as slips of paper */
.review.slip { border-radius: 0; background: #fbf8f1; border: 1px solid var(--line); box-shadow: 3px 3px 0 rgba(27, 20, 18, .08); }
.review footer a { color: var(--muted); }
.rating-hero .big { color: var(--red); }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.jump a { padding: 7px 12px; border: 1px solid var(--line); background: var(--panel); text-decoration: none; color: var(--text); font: 700 .8rem var(--body); }

/* producer band */
.producer-band { background: #140e0d; color: #ede6da; --text: #ede6da; --muted: #cbbfb1; --dim: #9c8f84; --line: rgba(237,230,218,.15); --ochre: #e0313b; --ochre-soft: #ff8f86; }
.producer-band .awards { grid-template-columns: repeat(2, minmax(0, 160px)); justify-content: center; }
.producer-band .story p:first-child::first-letter { color: #e0313b; }

/* Q&A */
.qa-section { background: var(--bg); }
.qa h3 a { font-family: var(--body); }
.toc { border-radius: 0; }
.toc .toc-h { font-size: 1.3rem; }

/* footer */
.site-footer.dark { border-top: 3px solid var(--red); }
.site-footer.dark a { color: var(--muted); }
.footer-logo { height: 40px; width: auto; }
.legal { color: var(--dim); }
.booker { border-radius: 0; }
.soon-card { margin-top: 18px; padding: 18px 20px; border: 1px dashed var(--red); border-radius: 10px; }
.soon-card h3 { margin: 6px 0 8px; }
.soon-card p { margin: 0 0 8px; }