/* Skin "california" (setting skin = california): the late-night navy and gold look of California Prediction Markets.
   Loaded after site.css on every page of a site that names this skin. A skin only sets tokens, fonts and
   decorations; the layout lives in site.css. To make another site's skin, copy this file to skins/<name>.css,
   change the tokens and the hero decorations, list the fonts to preload in skins/<name>.json and set the site's
   "skin" setting. */

/* The fonts of the original design, self-hosted (SIL Open Font License 1.1, licence texts in public/assets/fonts/):
   Space Grotesk (headings, buttons, labels), Source Serif Pro (wordmark, headline, serif text), Inter (plain text),
   JetBrains Mono (codes, prices). Latin ranges only: other scripts use the system fonts. As on the original site there
   is one italic (400); bolder italics are drawn from it by the browser. */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../../fonts/space-grotesk-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: "Space Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../../fonts/space-grotesk-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../../fonts/space-grotesk-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303, U+0309, U+0323, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Source Serif Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../fonts/source-serif-pro-400-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: "Source Serif Pro"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("../../fonts/source-serif-pro-700-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: "Source Serif Pro"; font-style: italic; font-weight: 400; font-display: swap; src: url("../../fonts/source-serif-pro-400-italic-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; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../../fonts/jetbrains-mono-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; }

/* Stand-ins while the fonts load: local fonts scaled to the same text width (measured), so lines do not re-wrap and
   nothing jumps when the real font arrives. */
@font-face { font-family: "CA Serif Fallback"; font-weight: 400; src: local("Iowan Old Style"); size-adjust: 98%; }
@font-face { font-family: "CA Serif Fallback"; font-weight: 600 700; src: local("Iowan Old Style Bold"), local("Iowan Old Style"); size-adjust: 96%; }
@font-face { font-family: "CA Serif Fallback G"; font-weight: 400; src: local("Georgia"); size-adjust: 99%; }
@font-face { font-family: "CA Serif Fallback G"; font-weight: 600 700; src: local("Georgia Bold"), local("Georgia"); size-adjust: 89%; }
@font-face { font-family: "CA Display Fallback"; font-weight: 400 700; src: local("Arial"), local("Helvetica Neue"), local("Roboto"); }
@font-face { font-family: "CA Sans Fallback"; font-weight: 400 700; src: local("Arial"), local("Helvetica Neue"), local("Roboto"); size-adjust: 106%; }
/* Tokens (hex values measured on the original site) */
body.skin-california {
  --wrap: 1280px; --gutter: 20px;
  --sans: "Inter", "CA Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Space Grotesk", "CA Display Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif Pro", "CA Serif Fallback", "CA Serif Fallback G", "Iowan Old Style", "Charter", "Georgia", "Cambria", "Times New Roman", serif;
  --serif-text: var(--serif); --serif-display: var(--serif);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-family: var(--sans); font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
body.skin-california.theme-dark {
  --paper: #0b1828; --paper-2: #111f32; --sc-card: #111f32; --ink: #f6f4ee; --ink-2: #c7c9cc; --muted: #8895aa; --line: #223043;
  --accent: #f3bc44; --accent-text: #f3bc44; --on-accent: #08111f; --focus: #f3bc44;
  background: radial-gradient(ellipse 120% 900px at 50% 0, #111f32 0%, #0b1828 55%) no-repeat #0b1828;
}

/* Site-wide pieces in the skin's fonts and colours */
body.skin-california h1, body.skin-california .article-title { font-family: var(--serif); }
:where(body.skin-california) h1, :where(body.skin-california) .article-title { letter-spacing: -.02em; }
body.skin-california h2, body.skin-california h3, body.skin-california h4, body.skin-california .card-title, body.skin-california .section-title, body.skin-california .nav-list a,
body.skin-california .kicker, body.skin-california .meta, body.skin-california .breadcrumbs, body.skin-california .byline, body.skin-california .side-box, body.skin-california .prose .label,
body.skin-california .prose a.button, body.skin-california .copy-code, body.skin-california .menu-toggle, body.skin-california .search-form input, body.skin-california .disclosure { font-family: var(--display); }
:where(body.skin-california) h2, :where(body.skin-california) h3, :where(body.skin-california) .card-title { letter-spacing: -.02em; }
body.skin-california .prose, body.skin-california .standfirst, body.skin-california .card-excerpt { font-family: var(--serif); }
body.skin-california .prose h2, body.skin-california .prose h3 { font-family: var(--display); }
body.skin-california .prose code.promo-code, body.skin-california .lo-odds td { font-family: var(--mono); }
body.skin-california .nav-list a { position: relative; font-weight: 500; font-size: .875rem; transition: color .15s ease; }
body.skin-california.theme-dark .site-header { background: color-mix(in srgb, #0b1828 85%, transparent); border-bottom-color: rgba(246, 244, 238, .1); }
body.skin-california.theme-dark .nav-list a { color: rgba(246, 244, 238, .72); }
body.skin-california.theme-dark .nav-list a:hover { color: var(--ink); }
body.skin-california.theme-dark .search-form input { border-color: rgba(246, 244, 238, .42); }
body.skin-california.theme-dark .search-form button, body.skin-california.theme-dark .menu-toggle { border-color: rgba(246, 244, 238, .14); }
body.skin-california.theme-dark .section-title { border-top-color: var(--accent); }
/* :where() keeps these as weak as the base rules, so the partner colours of the home page still win. */
:where(body.skin-california.theme-dark) .prose a.button, :where(body.skin-california.theme-dark) .promo-button, :where(body.skin-california.theme-dark) .lo-book,
:where(body.skin-california.theme-dark) .button-primary, :where(body.skin-california.theme-dark) .newsletter-row button, :where(body.skin-california.theme-dark) .search-big button { background: var(--accent); color: var(--on-accent); }
:where(body.skin-california.theme-dark) .prose a.button:hover { color: var(--on-accent); }
body.skin-california.theme-dark .copy-code.is-copied { color: var(--on-accent); }
body.skin-california.theme-dark .language-switcher a[aria-current] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
@media (min-width: 1024px) {
  body.skin-california.header-inline .site-header { position: sticky; top: 0; z-index: 40; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  html:has(body.skin-california.header-inline) { scroll-padding-top: 80px; }
}
@media (min-width: 1200px) {
  body.skin-california.header-inline .nav-list { gap: 2px 14px; }
}
@media (min-width: 1024px) {
  body.skin-california .nav-list > li > a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 8px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
  body.skin-california .nav-list > li > a:hover::after, body.skin-california .nav-list > li > a:focus-visible::after { transform: scaleX(1); }
}
@media (max-width: 767px) {
  body.skin-california .menu-toggle { border: 0; padding: 0 4px; }
  body.skin-california .menu-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.skin-california .menu-toggle-bars, body.skin-california .menu-toggle-bars::before, body.skin-california .menu-toggle-bars::after { width: 22px; }
  .js body.skin-california .nav-list { counter-reset: nav; padding-block: 8px 20px; }
  .js body.skin-california .nav-list > li > a { counter-increment: nav; display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 16px; padding: 18px 0; border-bottom-color: rgba(246, 244, 238, .1); font-family: var(--serif); font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; color: rgba(246, 244, 238, .88); }
  .js body.skin-california .nav-list > li > a::before { content: counter(nav, decimal-leading-zero); font-family: var(--mono); font-size: .6875rem; font-weight: 400; letter-spacing: 0; color: var(--accent); }
}

/* Footer: deeper navy, wordmark, links in columns */
body.skin-california.theme-dark .site-footer { margin-top: 0; background: #091422; border-top: 1px solid rgba(246, 244, 238, .1); font-size: .875rem; }
body.skin-california .footer-grid { gap: 32px 40px; padding-block: 56px 32px; }
body.skin-california .footer-brand .brand--wordmark .brand-bottom { font-size: 1.125rem; }
body.skin-california .footer-brand .brand-name { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 1.125rem; letter-spacing: -.02em; }
body.skin-california .footer-brand .muted { margin: 12px 0 0; max-width: 24rem; font-family: var(--serif); font-size: .875rem; line-height: 1.625; color: rgba(246, 244, 238, .6); }
body.skin-california .footer-links { display: block; columns: 2; column-gap: 40px; }
body.skin-california .footer-links li { break-inside: avoid; }
body.skin-california .footer-cols .footer-links { display: grid; columns: auto; }
body.skin-california .footer-head a { color: var(--accent-text, var(--accent)); }
body.skin-california .footer-links a, body.skin-california .footer-social a { min-height: 32px; color: rgba(246, 244, 238, .7); transition: color .15s ease; }
body.skin-california .footer-links a:hover, body.skin-california .footer-social a:hover { color: var(--accent); text-decoration: none; }
body.skin-california .language-switcher ul { padding: 20px 0; border-top-color: rgba(246, 244, 238, .1); }
body.skin-california .language-switcher a { min-height: 32px; border-color: rgba(246, 244, 238, .16); color: rgba(246, 244, 238, .75); font-family: var(--display); font-size: .8125rem; transition: border-color .15s ease, color .15s ease; }
body.skin-california .language-switcher a:hover { border-color: var(--accent); color: var(--accent); }
body.skin-california .rg-notice, body.skin-california .footer-bottom { font-family: var(--serif); font-size: .75rem; line-height: 1.625; color: rgba(246, 244, 238, .58); opacity: 1; }
body.skin-california .footer-bottom { border-top-color: rgba(246, 244, 238, .1); }
body.skin-california .footer-bottom a { color: inherit; }
@media (min-width: 768px) { body.skin-california .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } body.skin-california .footer-links { columns: 3; } }

/* Sticky phone bar on the dark skin */
@media (max-width: 767px) {
  body.skin-california.theme-dark .sticky-cta:not([hidden]) { left: 12px; right: 12px; bottom: 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 14px; background: color-mix(in srgb, #111f32 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ink); box-shadow: 0 12px 32px rgba(0, 0, 0, .5); font-family: var(--display); font-size: .8125rem; }
  body.skin-california.theme-dark .sticky-cta .button { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 8px; background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; }
  body.skin-california.theme-dark .sticky-terms, body.skin-california.theme-dark .sticky-close { color: var(--muted); }
}

/* Home page hero: poppies in the corners and a butterfly, as in the original design. Small WebP files that are
   positioned inside the hero box, so they cannot move the layout. */
.skin-california .sc-hero-art { animation: ca-parallax 12s ease-in-out infinite; }
.skin-california .sc-hero-mark { animation: ca-drift 9s ease-in-out infinite; }
.skin-california .sc-deco { display: block; }
.skin-california .sc-deco-1 { left: -2%; bottom: -2%; width: clamp(140px, 28%, 320px); aspect-ratio: 1; background-image: url("../../img/skins/california/poppies.webp"); background-position: bottom; transform-origin: bottom; animation: ca-sway 7s ease-in-out infinite; filter: drop-shadow(0 8px 16px rgba(4, 10, 18, .6)); }
.skin-california .sc-deco-2 { right: 2%; bottom: -4%; width: clamp(120px, 22%, 260px); aspect-ratio: 1; background-image: url("../../img/skins/california/poppies.webp"); background-position: bottom; transform: scaleX(-1); transform-origin: bottom; animation: ca-sway-soft 5s ease-in-out infinite; opacity: .9; filter: drop-shadow(0 8px 16px rgba(4, 10, 18, .6)); }
.skin-california .sc-deco-3 { left: 14%; top: 30%; width: clamp(44px, 8%, 110px); aspect-ratio: 1; background-image: url("../../img/skins/california/butterfly.webp"); animation: ca-butterfly 26s ease-in-out infinite; filter: drop-shadow(0 4px 12px rgba(240, 170, 30, .35)); }
@keyframes ca-parallax { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes ca-drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes ca-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2.5deg); } }
@keyframes ca-sway-soft { 0%, 100% { transform: scaleX(-1) rotate(-1deg); } 50% { transform: scaleX(-1) rotate(1deg) translateY(-3px); } }
@keyframes ca-butterfly { 0%, 100% { transform: translate(0, 0) rotate(-4deg); } 20% { transform: translate(-18%, -30%) rotate(8deg); } 40% { transform: translate(-32%, -10%) rotate(-6deg); } 55% { transform: translate(-48%, -38%) rotate(10deg); } 70% { transform: translate(-30%, -55%) rotate(-8deg); } 85% { transform: translate(-12%, -25%) rotate(6deg); } }

/* Phones: 44px tap targets in the footer */
@media (max-width: 767px) { body.skin-california .footer-links a, body.skin-california .footer-social a, body.skin-california .language-switcher a { min-height: 44px; } }