/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* ==========================================================================
   Design tokens — SWU PDX dark theme (specs/002-site-reskin)
   ========================================================================== */
:root {
  --bg: #0A0D16;
  --panel: #121729;
  --panel-2: #171D34;
  --line: #2A3355;
  --ink: #E9ECF6;
  --ink-dim: #98A0BE;
  --ink-faint: #5C6488;
  --cyan: #4FD8FF;
  --amber: #FFB13D;
  --red: #FF5C6C;
  --green: #6DE39A;
  --font-display: "Rajdhani", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;
}

/* ==========================================================================
   Base
   ========================================================================== */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
  background-image:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(79, 216, 255, 0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(255, 177, 61, 0.07), transparent 60%);
  background-repeat: no-repeat;
}

.stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(1px 1px at 20px 30px, #ffffff55, transparent),
    radial-gradient(1px 1px at 140px 90px, #ffffff33, transparent),
    radial-gradient(1px 1px at 300px 40px, #ffffff44, transparent),
    radial-gradient(1px 1px at 400px 180px, #ffffff33, transparent),
    radial-gradient(1px 1px at 520px 60px, #ffffff55, transparent),
    radial-gradient(1px 1px at 620px 220px, #ffffff33, transparent),
    radial-gradient(1px 1px at 760px 120px, #ffffff44, transparent),
    radial-gradient(1px 1px at 900px 40px, #ffffff33, transparent);
  background-repeat: repeat;
  background-size: 950px 260px;
}

a {
  color: var(--cyan);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
}

hr {
  border: none;
  border-top: 1px solid var(--line);
}

/* ==========================================================================
   Layout / grid compatibility layer
   (re-implements the Bootstrap grid + container class names already used
   throughout app/views, powered by the tokens above — see research.md §3)
   ========================================================================== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.row > .col,
.row > [class*="col-"] {
  padding: 0 10px;
}

.col { flex: 1 0 0%; }
.col-3 { flex: 0 0 auto; width: 25%; }
.col-4 { flex: 0 0 auto; width: 33.3333%; }
.col-8 { flex: 0 0 auto; width: 66.6667%; }
.col-md-2 { flex: 0 0 auto; width: 100%; }
.col-md-10 { flex: 0 0 auto; width: 100%; }

@media (min-width: 768px) {
  .col-md-2 { width: 16.6667%; }
  .col-md-10 { width: 83.3333%; }
}

.row-cols-1 > * { flex: 0 0 auto; width: 100%; }

@media (min-width: 768px) {
  .row-cols-md-2 > * { flex: 0 0 auto; width: 50%; }
  .row-cols-md-3 > * { flex: 0 0 auto; width: 33.3333%; }
}

@media (min-width: 992px) {
  .row-cols-lg-3 > * { flex: 0 0 auto; width: 33.3333%; }
  .row-cols-lg-6 > * { flex: 0 0 auto; width: 16.6667%; }
}

.g-0 { margin: 0; }
.g-0 > * { padding: 0; }
.g-3 { margin: 0 -8px; }
.g-3 > * { padding: 0 8px; margin-bottom: 16px; }
.g-4 { margin: 0 -12px; }
.g-4 > * { padding: 0 12px; margin-bottom: 24px; }

.d-grid { display: grid; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-sm-flex { display: block; }

@media (min-width: 576px) {
  .d-sm-flex { display: flex; }
}

.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-sm-row { flex-direction: column; }

@media (min-width: 576px) {
  .flex-sm-row { flex-direction: row; }
}

.align-items-center { align-items: center; }
.align-items-start { align-items: flex-start; }
.justify-content-between { justify-content: space-between; }
.justify-content-center { justify-content: center; }
.justify-content-end { justify-content: flex-end; }
.justify-content-sm-end { justify-content: flex-start; }

@media (min-width: 576px) {
  .justify-content-sm-end { justify-content: flex-end; }
}

.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }

.min-vh-100 { min-height: 100vh; }
.h-100 { height: 100%; }
.w-auto { width: auto; }
.w-100 { width: 100%; }
.d-block { display: block; }
.d-inline-flex { display: inline-flex; }
.stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.text-body { color: var(--ink); }
.text-decoration-none { text-decoration: none; }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.img-fluid { max-width: 100%; height: auto; }
.object-fit-cover { object-fit: cover; }
.ratio { position: relative; width: 100%; }
.ratio::before { display: block; padding-top: var(--ratio-pt, 100%); content: ""; }
.ratio > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ratio-1x1 { --ratio-pt: 100%; }
.rounded-start { border-radius: 4px 0 0 4px; }
.bg-light { background: var(--panel-2); }
.mw-400 { max-width: 400px !important; }
.mw-600 { max-width: 600px !important; }
.mw-800 { max-width: 800px !important; }
.mh-40vh { max-height: 40vh; }

/* Spacing scale — mirrors Bootstrap's 0–5 scale (0, .25, .5, 1, 1.5, 3rem) */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 16px; }
.mt-4 { margin-top: 24px; }
.mt-5 { margin-top: 48px; }
.mt-auto { margin-top: auto; }
.mt-sm-0 { margin-top: 16px; }

@media (min-width: 576px) {
  .mt-sm-0 { margin-top: 0; }
}

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 24px; }
.mb-5 { margin-bottom: 48px; }
.mb-md-4 { margin-bottom: 16px; }

@media (min-width: 768px) {
  .mb-md-4 { margin-bottom: 24px; }
}

.my-4 { margin-top: 24px; margin-bottom: 24px; }
.me-2 { margin-right: 8px; }
.me-auto { margin-right: auto; }
.ms-auto { margin-left: auto; }
.ms-sm-3 { margin-left: 0; }

@media (min-width: 576px) {
  .ms-sm-3 { margin-left: 16px; }
}

.p-2 { padding: 8px; }
.pb-2 { padding-bottom: 8px; }
.pb-md-0 { padding-bottom: 8px; }

@media (min-width: 768px) {
  .pb-md-0 { padding-bottom: 0; }
}

.pt-md-4 { padding-top: 0; }

@media (min-width: 768px) {
  .pt-md-4 { padding-top: 24px; }
}

.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: 4px; padding-right: 4px; }
.px-md-2 { padding-left: 0; padding-right: 0; }

@media (min-width: 768px) {
  .px-md-2 { padding-left: 8px; padding-right: 8px; }
}

.py-3 { padding-top: 16px; padding-bottom: 16px; }
.py-5 { padding-top: 48px; padding-bottom: 48px; }
.py-sm-4 { padding-top: 16px; padding-bottom: 16px; }

@media (min-width: 576px) {
  .py-sm-4 { padding-top: 24px; padding-bottom: 24px; }
}

.rounded { border-radius: 4px; }
.border { border: 1px solid var(--line); }
.border-1 { border-width: 1px; }
.border-top { border-top: 1px solid var(--line); }
.border-secondary { border-color: var(--line); }
.border-opacity-50 { opacity: 0.7; }
.bg-body-tertiary { background: var(--panel); }
.bg-light-subtle { background: var(--panel-2); }
.bg-secondary { background: var(--ink-faint); color: var(--bg); }
.bg-success { background: var(--green); color: #052014; }

.vr {
  display: inline-block;
  align-self: stretch;
  width: 1px;
  background: var(--line);
}

/* ==========================================================================
   Typography utilities
   ========================================================================== */
.display-5 { font-size: 2.5rem; line-height: 1.1; }
.lead { font-size: 1.15rem; color: var(--ink-dim); font-family: var(--font-body); text-transform: none; }
.small { font-size: 0.85em; }
h3.h4, .h4 { font-size: 1.4rem; }
.h5 { font-size: 1.15rem; }
.fw-medium { font-weight: 600; }
.fw-semibold { font-weight: 700; }
.fs-4 { font-size: 1.25rem; }
.text-muted, .text-secondary, .text-body-secondary { color: var(--ink-dim); }
.text-warning-emphasis { color: var(--amber); }
.text-center { text-align: center; }
.text-end { text-align: right; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 3px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--panel-2);
  color: var(--ink);
  transition: border-color .15s ease, color .15s ease;
}

.btn:hover {
  text-decoration: none;
  border-color: var(--cyan);
}

.btn-lg { padding: 13px 22px; font-size: 14px; }
.btn-sm { padding: 6px 12px; font-size: 11px; }

.btn-primary {
  background: var(--cyan);
  color: #04222b;
  border-color: var(--cyan);
}

.btn-primary:hover {
  color: #04222b;
  opacity: 0.9;
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-dark {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-dark:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

.btn-outline-danger {
  background: transparent;
  border-color: var(--red);
  color: var(--red);
}

.btn-outline-danger:hover {
  background: var(--red);
  color: var(--bg);
}

.btn-outline-success {
  background: transparent;
  border-color: var(--green);
  color: var(--green);
}

.btn-outline-success:hover {
  background: var(--green);
  color: #052014;
}

.btn-check {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Active-filter indicator (event type chips on the Events page) */
.btn-check:checked + .btn {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(79, 216, 255, 0.08);
}

.btn-secondary {
  background: var(--cyan);
  color: #04222b;
  border-color: var(--cyan);
}

/* ==========================================================================
   Cards → bracket-card treatment
   ========================================================================== */
.card,
.bracket-card {
  position: relative;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 2px;
}

.card::before, .card::after,
.bracket-card::before, .bracket-card::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
}

.card::before, .bracket-card::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid var(--cyan);
  border-left: 2px solid var(--cyan);
}

.card::after, .bracket-card::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid var(--cyan);
  border-right: 2px solid var(--cyan);
}

.card-body { padding: 18px; }
.card-img-top { width: 100%; display: block; border-bottom: 1px solid var(--line); }
.card-title { font-size: 16px; margin-bottom: 8px; }
.card-text { font-size: 13px; color: var(--ink-dim); }

/* ==========================================================================
   Badges / tags
   ========================================================================== */
.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  border: 1px solid currentColor;
  background: transparent;
}

.text-bg-primary { color: var(--cyan); }
.text-bg-success { color: var(--green); }
.text-bg-danger { color: var(--amber); }
.text-bg-secondary { color: var(--ink-dim); }

/* Bespoke tag component (used by hero/next-up panel, mirrors reference design) */
.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 2px;
  border: 1px solid currentColor;
}

/* Matches event_type_badge_class's mapping exactly (app/helpers/application_helper.rb)
   so an event type reads the same color everywhere it's shown on the site. */
.tag.weekly { color: var(--ink-dim); }
.tag.qualifier { color: var(--amber); }
.tag.prerelease { color: var(--green); }
.tag.showdown { color: var(--cyan); }

/* News/Post category tag (post_category_class helper) */
.news-cat {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 2px;
  border: 1px solid currentColor;
}

.news-cat.release { color: var(--cyan); }
.news-cat.store { color: var(--amber); }
.news-cat.community { color: var(--green); }
.news-cat.results { color: var(--red); }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-control,
.form-select {
  font-family: var(--font-body);
  font-size: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 9px 12px;
  border-radius: 3px;
  width: 100%;
}

.form-control:focus,
.form-select:focus {
  outline: none;
  border-color: var(--cyan);
}

.form-select-sm { padding: 6px 10px; font-size: 12.5px; }
.form-select.is-active,
.form-control.is-active { border-color: var(--cyan); color: var(--cyan); }
.form-control-sm { padding: 6px 10px; font-size: 12.5px; }
.form-check { display: flex; align-items: center; gap: 8px; }
.form-check-input {
  accent-color: var(--cyan);
  width: 16px;
  height: 16px;
}
.form-check-label {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: normal;
  font-size: 14px;
  color: var(--ink);
}
.form-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 4px;
}
.form-text { color: var(--ink-faint); font-size: 12px; }
.input-group { display: flex; }
.input-group-text { background: var(--panel-2); border: 1px solid var(--line); color: var(--ink-dim); padding: 9px 12px; }

label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 4px;
}

/* ==========================================================================
   Alerts / flash
   ========================================================================== */
.alert {
  padding: 14px 16px;
  border-radius: 3px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.alert-primary { border-color: var(--cyan); color: var(--ink); }
.alert-danger { border-color: var(--red); color: var(--ink); }
.alert-heading { font-family: var(--font-mono); text-transform: uppercase; font-size: 12px; letter-spacing: 0.06em; color: var(--red); }

/* ==========================================================================
   Tables / lists
   ========================================================================== */
table.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.table th, .table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.table thead th {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.list-group { border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.list-group-item { background: var(--panel); padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--ink); }
.list-group-item:last-child { border-bottom: none; }
.list-group-item-action:hover { background: var(--panel-2); }

/* ==========================================================================
   Nav (legacy Bootstrap navbar class names — see _navbar.html.erb for the
   bespoke reskinned header; these remain for any nav-* usage elsewhere)
   ========================================================================== */
.nav { display: flex; list-style: none; margin: 0; padding: 0; }
.nav-item { list-style: none; }
.nav-link {
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  padding: 8px 12px;
  display: inline-block;
}

.nav-link:hover { color: var(--ink); text-decoration: none; }

/* ==========================================================================
   Misc utilities carried over from the pre-reskin stylesheets
   ========================================================================== */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   Bespoke design-system components (reference design vocabulary)
   ========================================================================== */
.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 1;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
  display: flex;
  align-items: center;
  gap: 10px;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--cyan);
}

.chip {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  cursor: pointer;
  display: inline-block;
  background: transparent;
}

.chip.active,
.chip[aria-current="true"] {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(79, 216, 255, 0.08);
}

/* ==========================================================================
   Header / primary navigation
   ========================================================================== */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 13, 22, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  position: relative;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.logo:hover { text-decoration: none; color: var(--ink); }

.logo-mark { width: 30px; height: 30px; flex: none; }
.logo-mark svg { width: 100%; height: 100%; }

.logo-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--cyan);
  letter-spacing: 0.18em;
  display: block;
  margin-top: 1px;
}

nav.primary { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

.navlink {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 9px 14px;
  border-radius: 3px;
  transition: all .15s ease;
  position: relative;
  display: inline-block;
}

.navlink:hover { color: var(--ink); background: var(--panel-2); text-decoration: none; }
.navlink.active { color: var(--cyan); }
.navlink.active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 2px;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

.discord-btn {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--amber);
  color: #181104;
  padding: 9px 16px;
  border-radius: 3px;
  font-weight: 700;
  margin-left: 8px;
  white-space: nowrap;
  display: inline-block;
}

.discord-btn:hover { text-decoration: none; opacity: 0.9; }

.mobile-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 7px 10px;
  border-radius: 3px;
  cursor: pointer;
}

@media (max-width: 860px) {
  nav.primary {
    display: none;
  }

  nav.primary.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    padding: 8px;
    gap: 0;
  }

  .mobile-toggle {
    display: block;
  }
}

/* ==========================================================================
   Homepage — hero, next-up panel, week strip, sector grid
   ========================================================================== */
.hero { padding: 72px 0 56px; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}

.hero h1 {
  font-size: 56px;
  line-height: 1.02;
  letter-spacing: 0.005em;
  margin: 18px 0 20px;
}

.hero h1 .accent { color: var(--cyan); }

@media (max-width: 640px) {
  .hero h1 { font-size: 38px; }
}

.hero .lede { color: var(--ink-dim); font-size: 17px; max-width: 46ch; margin-bottom: 30px; text-transform: none; font-family: var(--font-body); }

.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

.btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }

.clock-panel { padding: 22px; }
.clock-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.clock-head .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
}

@media (prefers-reduced-motion: no-preference) {
  .pulse-dot { animation: pulse 1.6s infinite; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.next-event-link { display: block; color: inherit; text-decoration: none; }
.next-event-link:hover { text-decoration: none; }
.next-event-link:hover .next-event .name { color: var(--cyan); }
.next-event-link + .next-event-link { border-top: 1px dashed var(--line); }

.next-event { padding: 14px 0; }
.next-event .row1 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.next-event .name { font-weight: 600; font-size: 14.5px; }
.next-event .time { font-family: var(--font-mono); font-size: 12px; color: var(--amber); white-space: nowrap; }
.next-event .venue { font-size: 12.5px; color: var(--ink-faint); margin-top: 3px; }

section.block { padding: 64px 0; border-top: 1px solid var(--line); }
.block-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px; gap: 20px; flex-wrap: wrap; }
.block-head h2 { font-size: 30px; margin-top: 10px; }
.block-head p { color: var(--ink-dim); font-size: 14.5px; max-width: 50ch; font-family: var(--font-body); text-transform: none; }

.week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }

@media (max-width: 900px) {
  .week-strip { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 560px) {
  .week-strip { grid-template-columns: repeat(2, 1fr); }
}

.day-card { padding: 16px 14px; min-height: 150px; display: flex; flex-direction: column; }
.day-card .day-name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.day-card .venue-line { font-size: 12.5px; margin-bottom: 8px; }
.day-card .venue-line b { display: block; color: var(--ink); font-weight: 600; }
.day-card .venue-line span { color: var(--ink-faint); font-family: var(--font-mono); font-size: 11px; }
.day-card.today { border-color: var(--cyan); }
.day-card.today .day-name { color: var(--cyan); }

.sector-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

@media (max-width: 900px) {
  .sector-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .sector-grid { grid-template-columns: 1fr; }
}

.sector-card { padding: 20px; }
.sector-card .sector-name { font-weight: 700; font-size: 15px; }
.sector-card .sector-name a { color: var(--ink); }
.sector-card .sector-name a:hover { color: var(--cyan); }
.sector-card .sector-list { color: var(--ink-faint); font-size: 12px; margin-top: 8px; line-height: 1.7; }

.venue-line-link { display: block; color: inherit; text-decoration: none; }
.venue-line-link:hover { text-decoration: none; }
.venue-line-link:hover .venue-line b { color: var(--cyan); }