/* Scary Theme — dark-first, accessible, logical properties for RTL. */
@font-face { font-family: 'Rubik'; src: url('fonts/Rubik-Variable.woff2') format('woff2-variations'); font-weight: 300 900; font-display: swap; }
@font-face { font-family: 'RubikGlitch'; src: url('fonts/RubikGlitch.woff2') format('woff2'); font-weight: 400; font-display: swap; }
:root {
  /* Footprint of the fixed accessibility button, so every rule that has to
     clear it reads from one place instead of re-deriving the number. */
  --st-a11y-size: 52px;
  --st-a11y-gutter: calc(1rem + var(--st-a11y-size) + 0.5rem);
  --st-bg: #07080c; --st-bg-2: #0e131b; --st-border: #243040; --st-text: #d8e8f0; --st-muted: #8ba0b3;
  --st-accent: #ff2e6b; --st-signal: #2ecbe0; --st-bone: #d8e8f0; --st-surface: #161c26; --st-focus: #ffd166;
  --st-font: 'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, 'Heebo', Arial, sans-serif; --st-radius: 0.75rem; --st-max: 72rem;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--st-bg); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--st-font); font-size: 1rem; line-height: 1.6; color: var(--st-text); background: var(--st-bg); min-block-size: 100vh; display: flex; flex-direction: column; }
img, video { max-inline-size: 100%; block-size: auto; }
a { color: #ff8fb0; }
a:hover { color: #fff; }
:focus-visible { outline: 3px solid var(--st-focus); outline-offset: 2px; }
.screen-reader-text { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); inline-size: 1px; block-size: 1px; overflow: hidden; white-space: nowrap; }
.screen-reader-text:focus { clip: auto; clip-path: none; inline-size: auto; block-size: auto; inset-block-start: 0.5rem; inset-inline-start: 0.5rem; background: #000; color: #fff; padding: 0.5rem 1rem; z-index: 100000; }
.skip-link { position: absolute; inset-inline-start: -999px; inset-block-start: 0; background: var(--st-accent); color: #fff; padding: 0.75rem 1rem; z-index: 100001; }
.skip-link:focus { inset-inline-start: 0.5rem; inset-block-start: 0.5rem; }
.wrap { inline-size: min(100% - 2rem, var(--st-max)); margin-inline: auto; }
.site-main { flex: 1; padding-block: 1.5rem 3rem; }
/* #content is the skip-link target and spans the whole page — a focus ring around
   the entire viewport is bad UX no matter what triggers it (skip-link, VoiceOver,
   Full Keyboard Access, or a browser's own focus heuristics). The skip-link itself
   already gives clear visual feedback when activated, and screen readers get the
   accessible name/landmark announcement regardless — so this one landmark opts out
   of the global focus ring. Every other interactive element keeps it. */
#content:focus-visible { outline: none; }

/* Header */
.site-header { position: sticky; inset-block-start: 0; z-index: 50; background: rgba(11, 11, 13, 0.92); backdrop-filter: blur(8px); border-block-end: 1px solid var(--st-border); }
.header-inner { display: flex; align-items: center; gap: 1rem; min-block-size: 64px; flex-wrap: wrap; }
.site-title { display: flex; align-items: center; gap: 0.5rem; font-weight: 900; font-size: 1.35rem; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; text-decoration: none; }
.site-title span { font-family: 'RubikGlitch', var(--st-font); font-weight: 400; color: var(--st-accent); letter-spacing: 0.01em; }
.site-title span .tld { color: var(--st-bone); }
.site-logo-mark { inline-size: 1.7rem; block-size: 1.7rem; flex: none; }
body.season-october .site-logo-mark, body.season-friday13 .site-logo-mark { display: none; }
body.season-october .site-title::before { content: '🎃 '; }
body.season-friday13 .site-title::before { content: '🔪 '; }
.custom-logo { max-block-size: 48px; inline-size: auto; }
.menu-toggle { margin-inline-start: auto; background: none; border: 1px solid var(--st-border); color: #fff; font-size: 1.4rem; inline-size: 44px; block-size: 44px; border-radius: 0.5rem; cursor: pointer; }
.primary-nav { display: none; flex-basis: 100%; padding-block: 0.5rem 1rem; }
.primary-nav.is-open {
  display: block;
  /* Whatever is left between the header and the bottom tab bar. */
  max-block-size: calc(100dvh - 8rem - env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-block-end: calc(4.5rem + env(safe-area-inset-bottom) + 0.75rem + 52px);
}
/* dvh is not everywhere yet; vh is close enough as a floor. */
@supports not (max-block-size: 100dvh) {
  .primary-nav.is-open { max-block-size: calc(100vh - 8rem); }
}
.primary-nav .menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.primary-nav .menu a { display: block; padding: 0.7rem 0.75rem; color: var(--st-text); text-decoration: none; border-radius: 0.5rem; min-block-size: 44px; }
.primary-nav .menu a:hover, .primary-nav .current-menu-item > a { background: var(--st-bg-2); color: #fff; }
/* The bell lives in the header at every width — .member-links is hidden below
   900px and the tab bar has no notifications entry, so this is the only place
   it can be reached on a phone. */
.header-quick { display: flex; align-items: center; gap: 0.25rem; margin-inline-start: auto; }
.header-quick + .menu-toggle { margin-inline-start: 0; }
.site-header .ss-bell { color: var(--st-text); text-decoration: none; }
@media (min-width: 900px) { .header-quick { margin-inline-end: 0.25rem; } }
.member-links { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-block-start: 0.75rem; }
@media (min-width: 900px) {
  .menu-toggle { display: none; }
  .primary-nav { display: flex; flex-basis: auto; flex: 1; align-items: center; justify-content: space-between; padding: 0; }
  .primary-nav .menu { flex-direction: row; gap: 0.15rem; }
  .member-links { margin: 0; }
}
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-block-size: 40px; padding: 0.5rem 1rem; border-radius: 0.5rem; background: var(--st-accent); color: #fff; text-decoration: none; font-weight: 700; border: 1px solid transparent; cursor: pointer; font: inherit; }
.btn:hover { background: var(--st-accent); color: #fff; }
.btn-ghost { background: transparent; border-color: var(--st-border); color: var(--st-text); }
.btn-ghost:hover { background: var(--st-bg-2); }
.btn-blood { background: var(--st-surface); }
.btn-lg { font-size: 1.15rem; padding: 0.85rem 1.6rem; min-block-size: 52px; }

/* Content */
.page-title { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0 0 1rem; color: #fff; }
.entry, .page-content, .single-post { max-inline-size: 48rem; margin-inline: auto; }
.entry :is(h2, h3) { color: #fff; margin-block: 1.5em 0.5em; }
.entry :is(table) { border-collapse: collapse; inline-size: 100%; }
.entry :is(th, td) { border: 1px solid var(--st-border); padding: 0.5rem; text-align: start; }
.hero { text-align: center; padding: 3rem 1rem 2rem; }
.hero h1 { font-size: clamp(2.2rem, 7vw, 4.5rem); margin: 0; text-transform: uppercase; letter-spacing: 0.06em; color: #fff; text-shadow: 0 0 40px rgba(193, 18, 31, 0.5); }
.hero-tagline { color: var(--st-muted); font-size: 1.2rem; }
.post-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1rem; }
.card { background: var(--st-bg-2); border: 1px solid var(--st-border); border-radius: var(--st-radius); padding: 1rem; }
.card-title { margin: 0.5rem 0; font-size: 1.2rem; }
.card-title a { color: #fff; text-decoration: none; }
.meta { color: var(--st-muted); font-size: 0.9rem; }
.featured { border-radius: var(--st-radius); margin-block: 1rem; }
.pagination .nav-links { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-block: 1.5rem; }
.pagination .page-numbers { padding: 0.5rem 0.9rem; border: 1px solid var(--st-border); border-radius: 0.5rem; text-decoration: none; min-block-size: 40px; display: inline-flex; align-items: center; }
.search-form { display: flex; gap: 0.5rem; max-inline-size: 30rem; }
.search-field { flex: 1; min-block-size: 44px; background: var(--st-bg-2); color: var(--st-text); border: 1px solid var(--st-border); border-radius: 0.5rem; padding: 0.5rem 0.8rem; font: inherit; }
.not-found { text-align: center; padding-block: 3rem; }
.nf-code { font-size: 6rem; font-weight: 900; color: var(--st-border); margin: 0; line-height: 1; }
.not-found .search-form { margin: 1.5rem auto; }

/* Comments (blog posts only) */
.comment-list { list-style: none; padding: 0; }
.comment-list .comment { border-block-start: 1px solid var(--st-border); padding-block: 1rem; }
.comment-form textarea, .comment-form input:not([type="checkbox"]):not([type="submit"]) { inline-size: 100%; background: var(--st-bg-2); color: var(--st-text); border: 1px solid var(--st-border); border-radius: 0.5rem; padding: 0.6rem; font: inherit; }
.comment-form .submit { background: var(--st-accent); color: #fff; border: 0; border-radius: 0.5rem; padding: 0.6rem 1.2rem; min-block-size: 44px; font: inherit; font-weight: 700; }

/* Footer */
.site-footer { border-block-start: 1px solid var(--st-border); background: var(--st-bg); padding-block: 2rem; color: var(--st-muted); font-size: 0.9rem; }
/* The accessibility button and back-to-top are fixed overlays. Without reserved
   space the last rows of any page (menu items, the language switcher, footer
   links) sit underneath them and become unreadable/untappable. */

body.has-tabbar .site-footer { padding-block-end: calc(2rem + 4.5rem + env(safe-area-inset-bottom)); }
.ss-lang-footer { padding-inline: var(--st-a11y-gutter); }
/* The accessibility button is fixed to the bottom-inline-start of the viewport,
   so any footer row the user scrolls past it gets covered. Reserving the gutter
   on the whole footer is the only thing that holds for rows in the middle of it,
   not just the last one. */
@media (max-width: 899px) {
  .site-footer { padding-inline-start: var(--st-a11y-gutter); }
}
.footer-widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.5rem; margin-block-end: 1.5rem; }
.footer-nav .menu { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.footer-nav a { color: var(--st-text); }
.footer-note { margin: 0; }

/* Age gate */
body.has-age-gate { overflow: hidden; }
.age-gate { position: fixed; inset: 0; z-index: 99999; background: rgba(0, 0, 0, 0.96); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.age-gate-box { max-inline-size: 30rem; background: var(--st-bg-2); border: 1px solid var(--st-accent); border-radius: var(--st-radius); padding: 2rem; text-align: center; }
.age-gate-box h2 { margin-block-start: 0; color: #fff; font-size: 1.8rem; }
.age-gate-box form { display: flex; flex-direction: column; gap: 0.75rem; margin-block: 1.25rem; }
.age-gate-legal { font-size: 0.85rem; color: var(--st-muted); }

.to-top { position: fixed; inset-block-end: calc(4.5rem + env(safe-area-inset-bottom) + 0.75rem); inset-inline-end: 1rem; z-index: 60; inline-size: 44px; block-size: 44px; border-radius: 999px; background: var(--st-accent); border: 2px solid var(--st-bg); box-shadow: 0 4px 16px rgba(0,0,0,0.6); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; opacity: 0.75; transition: opacity 0.15s ease; }
.to-top:hover, .to-top:focus-visible { opacity: 1; }
.to-top[hidden] { display: none; }
body:not(.has-tabbar) .to-top { inset-block-end: calc(1rem + env(safe-area-inset-bottom)); }

.consent-banner { position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 99998; background: rgba(11, 11, 13, 0.98); border-block-start: 1px solid var(--st-border); padding: 1rem; padding-block-end: calc(1rem + env(safe-area-inset-bottom)); }
.consent-inner { max-inline-size: 48rem; margin-inline: auto; }
.consent-text h2 { margin: 0 0 0.4rem; font-size: 1.1rem; color: #fff; }
.consent-text p { margin: 0 0 0.75rem; font-size: 0.9rem; color: var(--st-muted); line-height: 1.5; }
.consent-detail { display: flex; flex-direction: column; gap: 0.6rem; margin-block-end: 0.75rem; }
.consent-row { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.85rem; color: var(--st-muted); }
.consent-row input { margin-block-start: 0.2rem; flex: none; inline-size: 1.2rem; block-size: 1.2rem; }
.consent-row strong { color: var(--st-text); }
.consent-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
@media (max-width: 640px) { .consent-actions .btn, .consent-actions .ss-button { flex: 1 1 auto; } }

/* Accessibility widget */
.a11y { position: fixed; inset-block-end: 1rem; inset-inline-start: 1rem; z-index: 9999; }
/* Dimmed while the page scrolls (see theme.js). Opacity only — the button stays
   in the layout, in the tab order and clickable throughout, so this never
   removes an accessibility control, it only stops it hiding text mid-scroll. */
.a11y { transition: opacity 0.2s ease; }
.a11y.is-dimmed { opacity: 0.25; }
.a11y:focus-within, .a11y:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .a11y { transition: none; }
  .a11y.is-dimmed { opacity: 1; }
}
.a11y-toggle { inline-size: 52px; block-size: 52px; border-radius: 50%; background: #1d4ed8; color: #fff; border: 2px solid #fff; font-size: 1.5rem; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); }
.a11y-panel { position: absolute; inset-block-end: 60px; inset-inline-start: 0; inline-size: 16rem; background: #fff; color: #111; border-radius: 0.75rem; padding: 1rem; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; gap: 0.5rem; }
.a11y-title { margin: 0 0 0.25rem; font-size: 1.1rem; color: #111; }
.a11y-row { display: flex; justify-content: space-between; align-items: center; }
.a11y-row button, .a11y-opt { min-block-size: 40px; border: 1px solid #999; background: var(--st-bone); color: #111; border-radius: 0.4rem; padding: 0.4rem 0.75rem; font: inherit; cursor: pointer; }
.a11y-row button { margin-inline-start: 0.25rem; }
.a11y-opt[aria-pressed="true"] { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }
.a11y-link { color: #1d4ed8; font-size: 0.9rem; }
html.a11y-contrast { --st-bg: #000; --st-bg-2: #000; --st-border: #fff; --st-text: #fff; --st-muted: #fff; --st-accent: #ffff00; }
html.a11y-contrast .btn { color: #000; }
html.a11y-contrast a { color: #ffff00; text-decoration: underline; }
html.a11y-links a { text-decoration: underline !important; outline: 1px dashed currentColor; outline-offset: 2px; }
html.a11y-font body, html.a11y-font * { font-family: Arial, Helvetica, sans-serif !important; letter-spacing: 0.02em; }
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; } }
@media (forced-colors: active) { .btn, .a11y-toggle { border: 1px solid ButtonText; } }
@media print { .site-header, .site-footer, .a11y, .age-gate { display: none !important; } body { background: #fff; color: #000; } }

/* Front page */
.hero-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin-block: 2rem; }
.feature-icon { font-size: 2rem; margin: 0; }
.member-home { display: grid; gap: 2rem; }
@media (min-width: 1100px) { .member-home { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; } .member-side { position: sticky; inset-block-start: 5rem; } }
.page-content-full, .entry-full { max-inline-size: none; }

.btn-icon { position: relative; padding-inline: 0.6rem; font-size: 1.1rem; }
.dm-badge { position: absolute; inset-block-start: -4px; inset-inline-end: -4px; background: var(--st-accent); color: #fff; font-size: 0.7rem; min-inline-size: 18px; block-size: 18px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding-inline: 4px; }

/* ===== Nightfall ===== */
.hero { position: relative; overflow: hidden; isolation: isolate; padding: 4rem 1rem 2.5rem; }
.fog { position: absolute; inset: -20% -10%; z-index: -1; background: radial-gradient(60% 50% at 30% 40%, rgba(193, 18, 31, 0.18), transparent 60%), radial-gradient(50% 40% at 75% 60%, rgba(120, 10, 20, 0.14), transparent 65%); filter: blur(30px); animation: st-fog 18s ease-in-out infinite alternate; }
@keyframes st-fog { from { transform: translate3d(-2%, 0, 0) scale(1); } to { transform: translate3d(2%, -3%, 0) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .fog { animation: none; } }
.eyebrow { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.75rem; color: var(--st-muted); margin: 0 0 0.5rem; }
.pulse { list-style: none; padding: 0; margin: 2rem auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; }
.pulse li { display: flex; flex-direction: column; align-items: center; min-inline-size: 5.5rem; }
.pulse strong { font-size: 1.4rem; color: #fff; font-variant-numeric: tabular-nums; }
.pulse span { color: var(--st-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; }
.member-side .pulse { justify-content: flex-start; margin: 0 0 1rem; }
.tonight { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; background: linear-gradient(135deg, var(--st-bg-2), var(--st-bg)); border: 1px solid var(--st-border); border-radius: var(--st-radius); padding: 1rem; margin-block: 1.5rem; }
.tonight .eyebrow { grid-column: 1 / -1; margin: 0; color: #ff8fb0; }
.tonight-poster { inline-size: 7rem; border-radius: 0.5rem; }
.tonight h2 { margin: 0 0 0.25rem; font-size: 1.3rem; }
.tonight h2 a { color: #fff; text-decoration: none; }
@media (max-width: 600px) { .tonight { grid-template-columns: 1fr; } .tonight-poster { inline-size: 40%; } }
.ecosystem { margin-block: 2.5rem; }
.eco-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.eco-card { text-decoration: none; color: var(--st-text); display: flex; flex-direction: column; gap: 0.35rem; }
.eco-card:hover { border-color: var(--st-accent); }
.pact-cta { text-align: center; background: var(--st-bg-2); border: 1px solid var(--st-border); border-radius: var(--st-radius); padding: 2rem 1rem; margin-block: 2rem; }
.pact-cta h2 { margin-top: 0; }
/* Mobile tab bar */
.tabbar { display: none; }
@media (max-width: 899px) {
  body.has-tabbar { padding-block-end: 4.5rem; }
  .tabbar { position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 60; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; background: rgba(11, 11, 13, 0.96); backdrop-filter: blur(10px); border-block-start: 1px solid var(--st-border); padding-block-end: env(safe-area-inset-bottom); }
  .tabbar::-webkit-scrollbar { display: none; }
  .tabbar a { flex: 0 0 20%; scroll-snap-align: start; position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.5rem 0.25rem; color: var(--st-muted); text-decoration: none; font-size: 0.65rem; min-block-size: 48px; }
  .tabbar a span:first-child { font-size: 1.3rem; }
  .tabbar a svg { display: block; }
  .tabbar a[aria-current="page"] { color: #fff; }
  .tabbar a[aria-current="page"]::after { content: ''; position: absolute; inset-block-start: 0; inline-size: 2rem; block-size: 2px; background: var(--st-signal); border-radius: 2px; }
  .tabbar .dm-badge { inset-block-start: 4px; inset-inline-end: 22%; }
  .a11y { inset-block-end: calc(4.5rem + env(safe-area-inset-bottom) + 0.75rem); }
  .member-links { display: none; }
}
/* Seasons */
body.season-october { --st-accent: #e36414; }
body.season-october .site-title::before { content: '🎃 '; }
body.season-friday13 .site-title::before { content: '🔪 '; }
/* Card polish */
.card { transition: border-color 0.2s, transform 0.2s; }
.card:hover { border-color: var(--st-border); transform: translateY(-1px); }
.feature .card-title a { color: #fff; }
.member-feed { min-block-size: 20rem; }

/* Responsive hardening — never let a child force horizontal scroll */
html, body { overflow-x: clip; max-inline-size: 100%; }
.site-main, .wrap, .header-inner { min-inline-size: 0; max-inline-size: 100%; box-sizing: border-box; }
img, video, iframe, svg, table { max-inline-size: 100%; }
pre, code { overflow-wrap: anywhere; }
@media (max-width: 40rem) {
  .wrap { padding-inline: 0.75rem; }
  h1 { font-size: 1.6rem; }
  .btn, .ss-button { max-inline-size: 100%; }
}

/* The accessibility button sits at z-index 9999 and floats over everything,
   including the open menu — it was covering the last item and the one the
   reader was reaching for. It stays reachable: the menu is open, and closing it
   brings the button straight back. Hiding beats overlapping, because an
   invisible tap target is worse than an absent one. */
body:has(.primary-nav.is-open) .a11y,
body:has(.primary-nav.is-open) .to-top {
  display: none;
}