/* Skin "hollywood" (setting skin = hollywood): "After Hours", the oxblood, ivory and brass look of Hollywood Prediction
   Markets (Catie's Lovable design, Brand & Design build spec hub/handoffs/cms/2026-10-20-hollywood-build-spec.md,
   logo final 20 Oct). One mode: dark. Like the California skin it sets tokens, fonts and a few decorations on top of
   the designed layout in site.css; the home page is templates/partials/home/showcase-hollywood.php. */

/* Fonts (SIL Open Font License 1.1, licence texts in public/assets/fonts/): Playfair Display (wordmark, h1-h3; one
   variable file, 400-900) and Inter (text, labels, buttons). The latin range carries Spanish (ñ, á, ¿, ¡). */
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../../fonts/playfair-display-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../../fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* size-adjust measured 26 Oct in Chrome: Playfair 600/700 runs 88-89% of Georgia bold on the same text (400: 100%); Inter 106% of Arial */
@font-face { font-family: "HW Serif Fallback"; font-weight: 400 900; src: local("Georgia"), local("Times New Roman"); size-adjust: 88%; }
@font-face { font-family: "HW Sans Fallback"; font-weight: 400 700; src: local("Arial"), local("Helvetica Neue"), local("Roboto"); size-adjust: 106%; }

/* Tokens (spec section 1; contrast measured by Brand: ink 16.2:1 on bg, brass 8.5:1, sand 10.4:1) */
body.skin-hollywood {
  --hw-bg: #120b0d; --hw-panel: #1b1114; --hw-ink: #f4e9d2; --hw-brass: #c8a66a; --hw-sand: #c9bca9; --hw-oxblood: #5b2028; --hw-line: #49363a;
  --wrap: 1200px; --gutter: 24px; --radius: 4px;
  --sans: "Inter", "HW Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Playfair Display", "HW Serif Fallback", "Georgia", "Times New Roman", serif;
  --serif-text: var(--serif); --serif-display: var(--serif); --display: var(--sans); --sc-ui: var(--sans);
  font-family: var(--sans); font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
@media (max-width: 359px) { body.skin-hollywood { --gutter: 16px; } }
@media (min-width: 768px) { body.skin-hollywood { font-size: 17px; } }
body.skin-hollywood.theme-dark {
  --paper: var(--hw-bg); --paper-2: var(--hw-panel); --sc-card: var(--hw-panel); --ink: var(--hw-ink); --ink-2: var(--hw-sand); --muted: var(--hw-sand); --line: var(--hw-line);
  --accent: var(--hw-brass); --accent-text: var(--hw-brass); --on-accent: var(--hw-bg); --focus: var(--hw-brass);
  --sc-gold: var(--hw-brass); --sc-hair: var(--hw-line); --sc-wordmark: var(--hw-ink);
  background: var(--hw-bg); color: var(--hw-ink);
}

/* Type (spec section 2): Playfair for h1-h3, Inter for the rest; labels 12px uppercase */
body.skin-hollywood :is(h1, h2, h3, .article-title, .card-title, .sc-title) { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; }
body.skin-hollywood h4, body.skin-hollywood .prose h4 { font-family: var(--sans); font-weight: 600; }
body.skin-hollywood :is(h1, .article-title) { font-size: 2.5rem; line-height: 1.1; }
body.skin-hollywood h2, body.skin-hollywood .prose h2 { font-size: 1.75rem; line-height: 1.2; }
body.skin-hollywood h3, body.skin-hollywood .prose h3 { font-size: 1.25rem; line-height: 1.3; }
@media (min-width: 768px) {
  body.skin-hollywood :is(h1, .article-title) { font-size: 4rem; }
  body.skin-hollywood h2, body.skin-hollywood .prose h2 { font-size: 2rem; }
  body.skin-hollywood h3, body.skin-hollywood .prose h3 { font-size: 1.375rem; }
}
body.skin-hollywood :is(.prose, .standfirst, .card-excerpt, .faq) { font-family: var(--sans); }
body.skin-hollywood :is(.standfirst, .sc-standfirst) { font-size: 1.125rem; line-height: 1.5; color: var(--hw-ink); }
@media (min-width: 768px) { body.skin-hollywood :is(.standfirst, .sc-standfirst) { font-size: 1.25rem; } }
body.skin-hollywood :is(.prose .label, .kicker, .sc-kicker, .eyebrow) { font-family: var(--sans); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--hw-brass); }
body.skin-hollywood :is(.meta, .byline, .breadcrumbs, .disclosure, .sc-disclosure, .rg-notice) { color: var(--hw-sand); font-size: max(.75rem, 12px); }

/* Links in text: brass and underlined (colour alone is not enough) */
body.skin-hollywood .prose a:not(.button), body.skin-hollywood .faq-answer a, body.skin-hollywood .breadcrumbs a { color: var(--hw-brass); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
body.skin-hollywood .prose a:not(.button):hover { color: var(--hw-ink); }
body.skin-hollywood a:hover { color: var(--hw-brass); }
body.skin-hollywood :focus-visible { outline: 2px solid var(--hw-brass); outline-offset: 2px; }

/* One partner button style everywhere: filled brass, dark text (8.5:1), 44px. :where() keeps the base strength. */
:where(body.skin-hollywood) :is(.prose a.button, .promo-button, .lo-book, .button-primary, .sc-btn, .newsletter-row button, .search-big button, .sticky-cta .button) {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--hw-brass); border-radius: 4px;
  background: var(--hw-brass); color: var(--hw-bg); font-family: var(--sans); font-size: 1rem; font-weight: 500; text-decoration: none;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
:where(body.skin-hollywood) :is(.prose a.button, .promo-button, .sc-btn, .button-primary, .sticky-cta .button):hover { background: var(--hw-ink); border-color: var(--hw-ink); color: var(--hw-bg); }
body.skin-hollywood .copy-code { min-height: 44px; border: 1px solid var(--hw-sand); border-radius: 4px; background: transparent; color: var(--hw-ink); }
body.skin-hollywood .copy-code.is-copied { background: var(--hw-brass); border-color: var(--hw-brass); color: var(--hw-bg); }
body.skin-hollywood code.promo-code { color: var(--hw-ink); background: var(--hw-oxblood); border-radius: 4px; padding: 2px 6px; }

/* Inputs and search: a sand border (10:1), never the decorative line colour */
body.skin-hollywood :is(.search-form input, .search-big input, .newsletter-row input) { background: var(--hw-panel); color: var(--hw-ink); border: 1px solid var(--hw-sand); border-radius: 4px; }
body.skin-hollywood :is(.search-form input, .search-big input, .newsletter-row input)::placeholder { color: var(--hw-sand); opacity: 1; }

/* Cards, boxes, tables: panel, 1px line, radius 6px for cards and 4px for tables and panels */
body.skin-hollywood .prose :is(.box, .market-box) { background: var(--hw-panel); border: 1px solid var(--hw-line); border-radius: 4px; }
body.skin-hollywood :is(.card, .sc-platform) { background: var(--hw-panel); border: 1px solid var(--hw-line); border-radius: 6px; }
body.skin-hollywood .card { padding: 16px; }
body.skin-hollywood .prose table { border-radius: 4px; }
body.skin-hollywood .prose :is(th, td) { border-color: var(--hw-line); }
body.skin-hollywood.theme-dark .prose th { background: var(--hw-panel); color: var(--hw-ink); }
/* the short-answer box at the top of an article: oxblood tint (ivory on it 10.4:1) */
body.skin-hollywood.t-article .prose > .box:first-child { background: color-mix(in srgb, var(--hw-oxblood) 55%, var(--hw-panel)); border-color: var(--hw-oxblood); }
/* callouts ("Keep in mind") */
body.skin-hollywood .prose blockquote { border-inline-start: 2px solid var(--hw-brass); padding-inline-start: 16px; color: var(--hw-ink); font-style: normal; }

/* Star motif (LOGO FINAL, used sparingly): an 18px brass star before section titles on the home page and the hubs,
   never in article body headings; a 40px star tile on text-only cards. */
body.skin-hollywood:is(.t-home, .t-page) :is(.sc-sections, .prose) > h2::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-inline-end: 10px; vertical-align: .05em; background: url("../../img/skins/hollywood/star.svg") center / contain no-repeat; }
body.skin-hollywood .card:not(:has(img))::before { content: ""; display: block; width: 40px; height: 40px; margin-bottom: 12px; background: url("../../img/skins/hollywood/star-tile.svg") center / contain no-repeat; }
body.skin-hollywood .hw-featured { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 10px; border: 1px solid var(--hw-brass); border-radius: 999px; color: var(--hw-brass); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* Header: panel background, one-line wordmark (logo A) that never wraps; about 22px on phones so it fits 375 with
   the menu and search buttons */
body.skin-hollywood.theme-dark .site-header { background: var(--hw-panel); border-bottom: 1px solid var(--hw-line); }
/* Logo A2 (Brand 25 Oct 16:16, measured at 375): on phones "Hollywood ★" with the rest of the name as a small-caps
   line under it, as on Manhattan; one line from 768px. The words are Catie's pick (settings wordmark, wordmark_sub). */
body.skin-hollywood .hw-brand { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: .3em; row-gap: 2px; max-width: 100%; font-family: var(--serif); font-weight: 600; font-size: 1.375rem; line-height: 1; letter-spacing: -.005em; color: var(--hw-ink); }
body.skin-hollywood .hw-brand > span { white-space: nowrap; }
body.skin-hollywood .hw-star { width: .7em; height: .7em; flex: none; transform: translateY(-.05em); }
@media (max-width: 767px) {
  body.skin-hollywood .hw-brand > span:last-child:not(:first-child) { flex-basis: 100%; font-family: var(--sans); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--hw-sand); }
}
@media (max-width: 359px) { body.skin-hollywood .hw-brand { font-size: 1.25rem; } }
@media (min-width: 768px) { body.skin-hollywood .hw-brand { flex-wrap: nowrap; } }
@media (min-width: 1024px) { body.skin-hollywood .hw-brand { font-size: 1.625rem; } }
body.skin-hollywood.theme-dark .nav-list a { color: var(--hw-ink); font-weight: 500; }
body.skin-hollywood.theme-dark .nav-list a:hover, body.skin-hollywood.theme-dark .nav-list a[aria-current] { color: var(--hw-brass); }
body.skin-hollywood.theme-dark :is(.search-form button, .menu-toggle) { min-height: 44px; min-width: 44px; border-color: var(--hw-sand); color: var(--hw-ink); }
body.skin-hollywood .brand-tagline { font-family: var(--sans); font-size: .75rem; color: var(--hw-sand); }
@media (max-width: 1023px) { body.skin-hollywood .site-header .brand-tagline { display: none; } }
body.skin-hollywood.theme-dark .language-switcher a[aria-current] { background: var(--hw-brass); border-color: var(--hw-brass); color: var(--hw-bg); }

/* Home hero (logo B, stacked): "Hollywood" / star / "Prediction Markets", the tagline under it; the picture slot
   (setting home_hero_media_id) sits behind on phones and fills the band on wide screens. */
body.skin-hollywood .sc-hero::before { background: linear-gradient(180deg, color-mix(in srgb, var(--hw-bg) 75%, transparent), transparent); }
body.skin-hollywood .sc-hero-art { filter: saturate(.9) brightness(.62); }
body.skin-hollywood .sc-wordmark { font-family: var(--serif); font-style: normal; font-weight: 600; font-size: 2.75rem; line-height: 1; color: var(--hw-ink); }
body.skin-hollywood .sc-wordmark::after { content: ""; display: block; width: .5em; height: .5em; margin: .12em auto; background: url("../../img/skins/hollywood/star.svg") center / contain no-repeat; }
body.skin-hollywood .sc-wordmark-sub { margin-top: 0; font-family: var(--serif); font-size: 1.375rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--hw-ink); }
body.skin-hollywood .sc-wordmark-sub::before, body.skin-hollywood .sc-wordmark-sub::after { display: none; }
body.skin-hollywood .hw-hero-tagline { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--hw-brass); font-family: var(--sans); font-size: .875rem; color: var(--hw-sand); }
@media (min-width: 640px) { body.skin-hollywood .sc-wordmark { font-size: 4rem; } body.skin-hollywood .sc-wordmark-sub { font-size: 2rem; } }
@media (min-width: 1024px) { body.skin-hollywood .sc-wordmark { font-size: 5.5rem; } body.skin-hollywood .sc-wordmark-sub { font-size: 2.75rem; } body.skin-hollywood .hw-hero-tagline { font-size: 1rem; } }
body.skin-hollywood .sc-title { line-height: 1.05; }
body.skin-hollywood .sc-title-accent { font-style: normal; color: var(--hw-brass); }
body.skin-hollywood .sc-chips li { border: 1px solid var(--hw-line); border-radius: 4px; color: var(--hw-sand); font-size: .75rem; }

/* Footer: deeper than the page, stacked wordmark with the star, the tagline, links in columns */
body.skin-hollywood.theme-dark .site-footer { margin-top: 0; background: #0c0709; border-top: 1px solid var(--hw-line); font-size: .875rem; }
body.skin-hollywood .footer-brand .brand--wordmark { display: inline-flex; flex-direction: column; align-items: flex-start; font-family: var(--serif); font-weight: 600; line-height: 1; color: var(--hw-ink); }
body.skin-hollywood .footer-brand .brand-top { font-size: 1.5rem; }
body.skin-hollywood .footer-brand .brand-top::after { content: ""; display: block; width: .5em; height: .5em; margin: .12em 0; background: url("../../img/skins/hollywood/star.svg") center / contain no-repeat; }
body.skin-hollywood .footer-brand .brand-bottom { font-size: 1.125rem; }
body.skin-hollywood .footer-brand .muted { margin: 12px 0 0; max-width: 24rem; color: var(--hw-sand); }
body.skin-hollywood .footer-head a { color: var(--hw-brass); }
body.skin-hollywood :is(.footer-links a, .footer-social a) { min-height: 32px; color: var(--hw-sand); }
body.skin-hollywood :is(.footer-links a, .footer-social a):hover { color: var(--hw-brass); text-decoration: none; }
body.skin-hollywood .language-switcher a { border-color: var(--hw-sand); color: var(--hw-ink); }
body.skin-hollywood :is(.rg-notice, .footer-bottom) { color: var(--hw-sand); opacity: 1; }
body.skin-hollywood .footer-bottom { border-top-color: var(--hw-line); }
@media (max-width: 767px) { body.skin-hollywood :is(.footer-links a, .footer-social a, .language-switcher a) { min-height: 44px; } }

/* Sticky phone bar: the network bar, restyled (panel, brass Claim with dark text, 44px close). Its label stays
   "21+ · T&Cs apply · Terms" (Catie d84). It fades in (180ms) instead of the network slide. */
@media (max-width: 767px) {
  body.skin-hollywood.theme-dark .sticky-cta:not([hidden]) { background: var(--hw-panel); border-top: 1px solid var(--hw-line); color: var(--hw-ink); animation: hw-fade .18s ease-out; }
  body.skin-hollywood.theme-dark :is(.sticky-terms, .sticky-close) { color: var(--hw-sand); }
  body.skin-hollywood .sticky-close { min-width: 44px; min-height: 44px; }
}

/* FAQ: brass markers, the answer opens with a short fade (180ms) */
body.skin-hollywood .faq details { border-color: var(--hw-line); }
body.skin-hollywood .faq summary { font-family: var(--sans); font-weight: 600; color: var(--hw-ink); }
body.skin-hollywood .faq summary::marker { color: var(--hw-brass); }
body.skin-hollywood .faq details[open] .faq-answer { animation: hw-fade .18s ease-out; }
body.skin-hollywood .faq-answer { color: var(--hw-sand); }

/* Motion (spec section 4): hero title and lead fade in on first paint (220ms, from .01 so the h1 still counts for
   LCP); buttons 140ms; FAQ and sticky bar 180ms. Cards and timelines don't move. */
body.skin-hollywood :is(.sc-hero-mark, .sc-title, .sc-standfirst) { animation: hw-fade .22s ease-out both; }
@keyframes hw-fade { from { opacity: .01; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  body.skin-hollywood *, body.skin-hollywood *::before, body.skin-hollywood *::after { animation: none !important; transition: none !important; }
}
/* 12px floor (night check 26 Oct): the shared showcase sets these at 10-11px; Hollywood launches with none under 12px (network fix in bundle 3) */
body.skin-hollywood :is(.sc-kicker, .sc-copy, .sc-terms, .sc-terms *, .sticky-terms, .sticky-terms *, .sc-disclosure, .sc-strip-venues, .sc-strip-label, .sc-strip-change, .sc-strip-title, .sc-platform-rating, .sc-platform-note, .sc-platform-offer, .sc-platform-code, .sc-prose .label, .sc-prose .sc-start > h2, .sc-prose .sc-cardlist a > p:first-child, .sc-note, .promo-code, .copy-code) { font-size: max(.75rem, 12px); }
/* BD-073: on phones the hero offer sits on its own row, then the code and a 44px Copy button on the next (no orphaned words) */
@media (max-width: 767px) {
  body.skin-hollywood .sc-offer { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 4px; }
  body.skin-hollywood .sc-offer > span[aria-hidden="true"] { display: none; }
  body.skin-hollywood .sc-offer :is(.sc-offer-text, .sc-offer-note) { order: -1; flex-basis: 100%; }
  body.skin-hollywood .sc-offer .sc-copy { min-height: 44px; padding-inline: 8px; margin-inline-start: 0; }
}
/* Hero cap (Brand 26 Oct sign-off item 5): on wide screens the art band stops at min(60vh, 520px) so the h1 starts in the first screen */
body.skin-hollywood { --sc-hero-max: min(60vh, 520px); }
/* Footer lockup A2 (Catie d156, 25 Oct; Brand 27 Oct list): as in the header on phones, "Hollywood" with the brass
   star after it on one line, and "PREDICTION MARKETS" as a small-caps line under it. */
body.skin-hollywood .footer-brand .brand--wordmark { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: .3em; row-gap: 4px; }
body.skin-hollywood .footer-brand .brand-top { display: inline-flex; align-items: center; gap: .3em; font-size: 1.5rem; }
body.skin-hollywood .footer-brand .brand-top::after { display: inline-block; width: .7em; height: .7em; margin: 0; transform: translateY(-.05em); }
body.skin-hollywood .footer-brand .brand-bottom { flex-basis: 100%; font-family: var(--sans); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--hw-sand); }
/* the 16:9 hero under the 520px cap would shrink below full width at 1280 (Brand 28 Oct on Politics): fixed height instead */
@media (min-width: 768px) { body.skin-hollywood .sc-hero { aspect-ratio: auto; height: min(60vh, 520px); } }