:root {
  color-scheme: light;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #111;
  background: #f8f7f5;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.site-header {
  background: #1f2937;
  color: #fff;
  padding: 1rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand h1,
.brand h2 {
  margin: 0;
}

.admin-portal-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: linear-gradient(135deg, #1d4ed8 0%, #0f172a 100%);
  color: #fff;
  padding: 2rem 1.5rem;
  border-radius: 1rem;
  margin: 1.5rem auto 0;
  max-width: 90rem;
}

.admin-portal-banner h1 {
  margin: 0.25rem 0 0.5rem;
  font-size: clamp(1.75rem, 2.5vw, 2.5rem);
}

.admin-portal-banner p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  max-width: 34rem;
}

.admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.admin-portal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.admin-summary {
  max-width: 90rem;
  margin: 1rem auto 0;
  padding: 0;
}

.admin-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
}

.admin-summary-card {
  background: #fff;
  padding: 1.25rem;
  border-radius: 1rem;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

.admin-summary-card span {
  display: block;
  color: #6b7280;
  margin-bottom: 0.75rem;
}

.admin-summary-card strong {
  font-size: 2rem;
  display: block;
  margin-top: 0.25rem;
}

.admin-completion-overview {
  margin-top: 1.5rem;
  background: #fff;
  padding: 1.25rem 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

.admin-completion-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.admin-completion-label span {
  color: #2563eb;
  font-weight: 700;
}

.admin-progress-bar {
  background: #e5e7eb;
  border-radius: 999px;
  height: 1rem;
  overflow: hidden;
}

.admin-progress-fill {
  background: #2563eb;
  height: 100%;
  border-radius: 999px 0 0 999px;
}

.admin-quick-actions {
  max-width: 90rem;
  margin: 1.5rem auto 0;
}

.admin-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

.admin-card {
  display: block;
  padding: 1.5rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, border-color 0.2s ease;
  border: 1px solid transparent;
}

.admin-card:hover {
  transform: translateY(-2px);
  border-color: rgba(37, 99, 235, 0.16);
}

.card-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  background: #eff6ff;
  border-radius: 0.75rem;
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.admin-card h3 {
  margin: 0 0 0.5rem;
}

.admin-card p {
  margin: 0;
  color: #4b5563;
}

.section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {

  .admin-portal-banner,
  .admin-summary-grid,
  .admin-card-grid,
  .section-header-row {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .admin-portal-banner {
    flex-direction: column;
  }

  .admin-portal-actions {
    justify-content: flex-start;
  }
}

.brand p {
  margin: 0.5rem 0 0;
  max-width: 44rem;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.site-nav a,
.site-footer a,
.button {
  color: #fff;
  text-decoration: none;
}

.site-nav a {
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}

.menu-toggle {
  display: none;
  background: #f9fafb;
  color: #111;
  border: none;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  cursor: pointer;
}

.hero-section {
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
  color: #fff;
  padding: 4rem 1.5rem;
  text-align: center;
}

.hero-copy {
  max-width: 50rem;
  margin: 0 auto;
}

.hero-section h2 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: 1rem;
}

.hero-section p {
  max-width: 42rem;
  margin: 0 auto 1.5rem;
}

.section-block {
  padding: 3rem 1.5rem;
  max-width: 90rem;
  margin: 0 auto;
}

.section-alt {
  background: #fff;
}

.grid-list,
.logo-grid,
.gallery-grid,
#faq-list {
  display: grid;
  gap: 1rem;
}

.grid-list,
#faq-list {
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.logo-grid {
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  align-items: center;
}

.gallery-grid {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.logo-card,
.competition-card,
.faq-card,
.schedule-card,
.gallery-card,
.article-card {
  border-radius: 1rem;
  background: #fff;
  padding: 1.5rem;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

.logo-card img,
.gallery-card img,
.article-card img {
  width: 100%;
  display: block;
  border-radius: 0.75rem;
}

.article-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.article-card h3 {
  margin: 0;
}

.article-card .button {
  margin-top: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

.admin-table th,
.admin-table td {
  padding: 1rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

.admin-table th {
  background: #f9fafb;
}

.admin-table tr:last-child td {
  border-bottom: none;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.2rem;
  border-radius: 999px;
  background: #2563eb;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.button:hover {
  background: #1d4ed8;
}

.button.secondary {
  background: #111827;
}

.form-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

fieldset {
  border: 1px solid #d1d5db;
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  background: #ffffff;
}

legend {
  padding: 0 0.5rem;
  font-weight: 700;
}

label {
  display: block;
  margin-top: 1rem;
  font-weight: 600;
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid #d1d5db;
  margin-top: 0.5rem;
  resize: vertical;
}

textarea {
  min-height: 6rem;
}

.form-actions {
  margin-top: 1.5rem;
}

.status-message {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 0.75rem;
}

.status-message.success {
  background: #d1fae5;
  color: #065f46;
}

.status-message.error {
  background: #fee2e2;
  color: #991b1b;
}

.editor-row textarea {
  width: 100%;
  min-height: 42rem;
  font-family: monospace;
  font-size: 0.95rem;
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid #d1d5db;
  background: #f9fafb;
}

.editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}

.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.dashboard-card {
  padding: 1.25rem;
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}

.dashboard-card span {
  display: block;
  font-size: 0.95rem;
  color: #6b7280;
}

.dashboard-card strong {
  display: block;
  margin-top: 0.75rem;
  font-size: 2rem;
  color: #111827;
}

.admin-main {
  padding: 2rem 1.5rem;
  max-width: 90rem;
  margin: 0 auto;
}

.admin-login {
  max-width: 40rem;
  margin: 0 auto;
}

.login-form fieldset {
  border: 1px solid #d1d5db;
  padding: 1.5rem;
  border-radius: 1rem;
  background: #ffffff;
}

.login-form label {
  display: block;
  margin-top: 1rem;
}

.site-footer {
  background: #111827;
  color: #d1d5db;
  padding: 2rem 1.5rem;
  text-align: center;
}

.site-footer p {
  margin: 0.5rem 0;
}

@media (max-width: 900px) {
  .site-header {
    flex-direction: column;
    align-items: stretch;
  }

  .site-nav {
    justify-content: center;
  }
}

@media (max-width: 720px) {
  .site-nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
  }

  .site-nav.open {
    display: flex;
  }

  .menu-toggle {
    display: inline-flex;
  }

  /* Dropdowns can't rely on :hover on touch devices. Inside the open mobile
     menu, expand them inline and statically so their items (e.g. Logout under
     Admin) stay reachable by tap and by screen readers. */
  .site-nav .nav-item.has-dropdown {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .site-nav .dropdown-menu {
    /* !important so a focused item (:focus-within, higher specificity) can't
       re-apply the desktop absolute-position transform on mobile. */
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    min-width: 0;
    margin-left: 0.5rem;
    padding: 0.25rem 0 !important;
    border-left: 1px solid var(--icf-border);
    box-shadow: none;
  }

  /* Hide the desktop hover bridge so it doesn't add dead space in the column. */
  .site-nav .has-dropdown::after {
    display: none;
  }
}

/* Adult editorial homepage redesign */
:root {
  --icf-bg: #07060a;
  --icf-panel: #110e15;
  --icf-panel-2: #17111a;
  --icf-border: #2a222e;
  --icf-gold: #dfba73;
  --icf-gold-2: #c5a059;
  --icf-burgundy: #7b112b;
  --icf-burgundy-2: #4d0818;
  --icf-text: #f5efe6;
  --icf-muted: #a79fac;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  background: var(--icf-bg);
  color: var(--icf-text);
}

h1,
h2,
h3,
.footer-brand {
  font-family: "Playfair Display", Georgia, serif;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: rgba(7, 6, 10, 0.88);
  border-bottom: 1px solid var(--icf-border);
  backdrop-filter: blur(18px);
  display: block;
}

.header-inner {
  width: 100%;
  max-width: 86rem;
  margin: 0 auto;
  padding: 1rem clamp(1.25rem, 4vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: inherit;
  text-decoration: none;
}

.site-logo {
  height: clamp(3.0rem, 6vw, 4.2rem);
  width: auto;
  display: block;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--icf-burgundy), var(--icf-gold-2));
  color: #fff;
  font-weight: 900;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.brand h1 {
  color: #fff;
  font-size: 1.1rem;
  letter-spacing: 0.16em;
  line-height: 1;
}

.brand p {
  margin: 0.35rem 0 0;
  color: var(--icf-muted);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.site-nav {
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.8rem);
}

.site-nav a {
  background: transparent;
  border-radius: 0;
  color: var(--icf-muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  padding: 0;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.site-nav a:hover {
  color: #fff;
}

/* Dropdown Logic */
.has-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.dropdown-trigger::after {
  content: '▾';
  font-size: 0.6rem;
  margin-left: 0.4rem;
  opacity: 0.5;
  transition: transform 0.3s ease;
}

.has-dropdown:hover .dropdown-trigger::after,
.has-dropdown:focus-within .dropdown-trigger::after {
  transform: rotate(180deg);
  opacity: 1;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 1rem);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 14rem;
  padding: 1rem 0 !important;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Invisibility bridge to prevent menu from closing when moving mouse to it */
.has-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 1rem;
}

.dropdown-menu a {
  padding: 0.8rem 1.5rem !important;
  font-size: 0.72rem !important;
  display: block !important;
  text-align: left;
  border-radius: 0 !important;
  background: transparent !important;
  letter-spacing: 0.08em !important;
  white-space: nowrap;
  text-transform: none !important;
  font-weight: 500 !important;
  color: var(--icf-text) !important;
}

.dropdown-menu a:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--icf-gold) !important;
}

/* Fully solid dropdown panels — override the translucent/blurred .glass-panel
   look so nav menu items sit on a 100% opaque surface. The theme-light selector
   is intentionally more specific than `body.theme-light .glass-panel` so it wins
   in the light theme too. --icf-panel is opaque in both themes (#110e15 / #fff). */
.dropdown-menu.glass-panel,
body.theme-light .dropdown-menu.glass-panel {
  background: var(--icf-panel) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.menu-toggle {
  background: var(--icf-gold);
  border-radius: 2px;
  color: #07060a;
  font-weight: 900;
}

main {
  background: var(--icf-bg);
}

.adult-hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding-top: 5.75rem;
}

.hero-media,
.hero-slide,
.hero-scrim {
  position: absolute;
  inset: 0;
}

.hero-slide {
  background-position: center;
  background-size: cover;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 1.1s ease;
}

.hero-slide.active {
  opacity: 1;
}

.hero-scrim {
  /* Previous Opacity:
     90deg: rgba(7, 6, 10, 0.96), 0.78, 0.34, 0.82
     0deg: rgba(7, 6, 10, 1), 0.28, 0.9
     90deg (pre left+5%/right-5%): 0.77, 0.62, 0.27, 0.66
     90deg (pre right-10%): 0.82, 0.67, 0.22, 0.61
  */
  background:
    linear-gradient(90deg, rgba(7, 6, 10, 0.82) 0%, rgba(7, 6, 10, 0.67) 42%, rgba(7, 6, 10, 0.12) 72%, rgba(7, 6, 10, 0.51) 100%),
    linear-gradient(0deg, rgba(7, 6, 10, 0.8) 0%, rgba(7, 6, 10, 0.22) 44%, rgba(7, 6, 10, 0.72) 100%);
}

.adult-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 86rem;
  min-height: calc(100vh - 5.75rem);
  margin: 0 auto;
  padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 4vw, 2rem);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(20rem, 0.92fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

.eyebrow {
  color: var(--icf-gold);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.28em;
  margin: 0 0 1rem;
  text-transform: uppercase;
}

/* Keep the eyebrow's orange/gold text when using the white hug background. */
.eyebrow .hero-lede-hug {
  color: inherit;
}

/* Shared 40% white hug for inner-page hero ledes (mirrors the About lede). */
.lede-hug {
  background: rgba(255, 255, 255, 0.4);
  padding: 0.12em 0.45em;
  border-radius: 0.25rem;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Shared inner-page hero badge — mirrors the About hero badge so every
   secondary-page hero (sponsors / vendors / volunteers / etc.) matches. */
.hero-badge {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--icf-gold);
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(223, 186, 115, 0.4);
  padding: 0.495rem 0.55rem;
  border-radius: 2px;
  margin-top: 1.5rem;
  margin-bottom: 0.8rem;
}

.adult-hero h1 {
  max-width: 52rem;
  margin: 0;
  color: #fff;
  font-size: clamp(4rem, 8vw, 7.8rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.94;
}

.adult-hero h1 span {
  font-style: italic;
  font-weight: 400;
  font-size: 0.7em;
}

.hero-lede {
  max-width: 42rem;
  margin: 2rem 0 0;
  color: #d5ced8;
  font-size: clamp(1rem, 2vw, 1.18rem);
  line-height: 1.8;
}

.hero-lede-hug {
  background: rgba(255, 255, 255, 0.1);
  color: var(--icf-text);
  padding: 0.18em 0.5em;
  border-radius: 0.3rem;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Hero lead paragraph hug uses a 40% white background (the eyebrow kicker
   above keeps the lighter 10% hug from the base rule). */
.hero-lede .hero-lede-hug {
  background: rgba(255, 255, 255, 0.4);
}

.reel-hug {
  background: rgba(255, 255, 255, 0.8);
  padding: 0.12em 0.4em;
  border-radius: 0.25rem;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.4rem;
}

.hero-presented {
  margin: 1.75rem 0 0;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Darker than --icf-muted for legibility against the translucent-white
     "hug" background behind this line. */
  color: #33303a;
}

/* White 40% background that hugs tightly around the "Presented by…" text,
   wrapping per-line like the hero lede hug. */
.hero-presented span.hero-presented-hug {
  background: rgba(255, 255, 255, 0.4);
  padding: 0.2em 0.5em;
  border-radius: 0.3rem;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.hero-presented a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.hero-presented a:hover {
  color: var(--icf-gold);
}

.button,
.button.secondary,
.button.premium,
.button.outline {
  border-radius: 2px;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  padding: 1rem 1.45rem;
  text-transform: uppercase;
}

.button.premium {
  background: var(--icf-burgundy);
  color: #fff;
}

.button.outline {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}

.hero-stat-panel {
  background: rgba(9, 7, 12, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  padding: clamp(1rem, 3vw, 1.5rem);
  backdrop-filter: blur(18px);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.stat-grid div {
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid var(--icf-border);
  padding: 1.25rem;
}

.stat-grid span {
  display: block;
  color: var(--icf-muted);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.stat-grid strong {
  display: block;
  margin-top: 0.45rem;
  color: #fff;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.65rem, 3vw, 2rem);
  line-height: 1;
}

.hero-stat-panel p {
  border-top: 1px solid var(--icf-border);
  color: var(--icf-muted);
  font-size: 0.92rem;
  line-height: 1.8;
  margin: 1.25rem 0 0;
  padding-top: 1.25rem;
}

.adult-section {
  max-width: 86rem;
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 6rem) clamp(1.25rem, 4vw, 2rem);
}

.dark-section {
  max-width: none;
  padding-left: max(1.25rem, calc((100vw - 86rem) / 2 + 2rem));
  padding-right: max(1.25rem, calc((100vw - 86rem) / 2 + 2rem));
  background: #07060a;
}

.panel-section {
  max-width: none;
  border-block: 1px solid var(--icf-border);
  background: var(--icf-panel-2);
  padding-left: max(1.25rem, calc((100vw - 86rem) / 2 + 2rem));
  padding-right: max(1.25rem, calc((100vw - 86rem) / 2 + 2rem));
}

.compact-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.section-heading {
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
}

.section-heading.split {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 2rem;
  align-items: end;
}

.section-heading.centered {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.section-heading h2 {
  color: #fff;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.02;
  margin: 0;
}

.section-heading p:not(.eyebrow) {
  color: var(--icf-muted);
  line-height: 1.8;
  margin: 0;
}

.feature-grid,
.participate-grid,
.reel-grid {
  display: grid;
  gap: 1.25rem;
}

.feature-grid {
  grid-template-columns: repeat(4, 1fr);
}

.feature-grid.two-col {
  grid-template-columns: repeat(2, 1fr);
}

.feature-card,
.action-card {
  background: #0b090f;
  border: 1px solid var(--icf-border);
  padding: clamp(1.3rem, 3vw, 1.7rem);
}

.feature-icon {
  color: var(--icf-gold);
  font-size: 2rem;
}

.feature-card h3,
.action-card h3,
.reel-card h3 {
  color: #fff;
  font-size: 1.55rem;
  line-height: 1.1;
  margin: 1.8rem 0 0;
}

.feature-card p,
.action-card p {
  color: var(--icf-muted);
  font-size: 0.94rem;
  line-height: 1.75;
  margin: 1rem 0 0;
}

/* Article card thumbnail. The glyph sits underneath as the placeholder, so an
   article with no image — or one whose image fails to load — shows the same
   frame instead of a broken-image icon. */
.article-card-media {
  position: relative;
  width: 100%;
  height: 200px;
  margin-bottom: 1rem;
  border-radius: 8px;
  overflow: hidden;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 48px;
}

.article-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reel-grid,
.participate-grid {
  grid-template-columns: repeat(3, 1fr);
}

.reel-card {
  aspect-ratio: 9 / 16;
  border: 1px solid var(--icf-border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 1.5rem;
  position: relative;
}

.reel-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 35%, rgba(223, 186, 115, 0.15), transparent 34%);
}

.reel-card.performance {
  background: linear-gradient(0deg, #050407, #2a101b);
}

.reel-card.culinary {
  background: linear-gradient(0deg, #050407, #2a2111);
}

.reel-card.music {
  background: linear-gradient(0deg, #050407, #162436);
}

.reel-mark {
  color: rgba(223, 186, 115, 0.16);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 9rem;
  font-weight: 900;
  line-height: 1;
  position: relative;
}

.reel-card>div:last-child {
  position: relative;
}

.reel-card p {
  color: var(--icf-gold);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  margin: 0;
  text-transform: uppercase;
}

.action-card {
  min-height: 18rem;
}

.action-card.featured {
  border: 2px solid var(--icf-burgundy);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.action-card.featured>span {
  background: var(--icf-gold);
  color: #07060a;
  display: inline-flex;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  padding: 0.35rem 0.6rem;
  text-transform: uppercase;
}

.text-link {
  color: var(--icf-gold);
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  margin-top: 1.8rem;
  text-decoration: none;
  text-transform: uppercase;
}

.text-link:hover {
  color: #fff;
}

.sponsor-marquee {
  overflow: hidden;
  padding: 3.5rem clamp(1.25rem, 4vw, 2rem);
}

.sponsor-marquee>p {
  color: var(--icf-muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.28em;
  text-align: center;
  text-transform: uppercase;
}

.marquee-window {
  border-block: 1px solid var(--icf-border);
  margin: 2rem auto 0;
  max-width: 86rem;
  overflow: hidden;
  padding: 1.8rem 0;
}

.marquee-track {
  animation: sponsorMarquee 28s linear infinite;
  display: flex;
  gap: 3rem;
  width: max-content;
}

.marquee-track span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}

@keyframes sponsorMarquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.site-footer {
  background: var(--icf-panel);
  border-top: 1px solid var(--icf-border);
  color: var(--icf-muted);
}

.footer-brand {
  color: #fff;
  font-size: 1.6rem;
}

.site-footer a {
  color: var(--icf-gold);
  margin: 0 0.5rem;
}

.footer-presented {
  font-size: 0.85rem;
  opacity: 0.85;
}

.footer-presented a {
  margin: 0;
}

@media (max-width: 980px) {

  .adult-hero-inner,
  .section-heading.split,
  .feature-grid,
  .feature-grid.two-col,
  .participate-grid,
  .reel-grid {
    grid-template-columns: 1fr;
  }

  .adult-hero h1 {
    font-size: clamp(3.6rem, 14vw, 6rem);
  }

  .reel-grid {
    max-width: 28rem;
    margin-inline: auto;
  }
}

@media (max-width: 720px) {
  .site-header {
    align-items: stretch;
  }

  .site-nav {
    background: var(--icf-panel);
    border: 1px solid var(--icf-border);
    padding: 1rem;
  }

  .site-nav.open {
    display: flex;
  }

  .adult-hero {
    padding-top: 7.5rem;
  }

  .adult-hero-inner {
    padding-top: 3rem;
  }

  .hero-actions {
    flex-direction: column;
  }

  .button,
  .button.secondary,
  .button.premium,
  .button.outline {
    justify-content: center;
    width: 100%;
  }

  .stat-grid {
    grid-template-columns: 1fr;
  }
}

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

  .hero-slide,
  .marquee-track {
    animation: none;
    transition: none;
  }
}

/* --- Enhanced Visuals (v2) --- */

.noise-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.04;
  /* Inlined grain (was a third-party fetch to grainy-gradients.vercel.app,
     which sat on the critical path over the whole viewport). Same feTurbulence
     noise, now self-contained — no network request, works offline. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.adult-hero.v2 {
  background: var(--icf-bg);
}

.kinetic-text {
  transition: transform 0.1s ease-out;
  will-change: transform;
}

.hero-stat-panel.glass-panel {
  background: rgba(17, 14, 21, 0.1) !important;
  backdrop-filter: blur(4px) !important;
}

.glass-panel {
  backdrop-filter: blur(24px) saturate(180%);
  background: rgba(17, 14, 21, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

.glass-btn {
  backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.glass-btn:hover::after {
  transform: translateX(100%);
}

.glass-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.tactile-card {
  position: relative;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid var(--icf-border) !important;
}

.tactile-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: var(--icf-gold) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

/* --- President's Welcome --- */
#welcome {
  padding-top: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.president-welcome {
  display: grid;
  grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.president-portrait {
  margin: 0 0 0 clamp(1rem, 2.5vw, 2rem);
}

.president-portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 15;
  object-fit: cover;
  border: 1px solid var(--icf-gold);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.president-message h2 {
  color: #fff;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.08;
  margin: 0.75rem 0 0;
}

.president-message>p:not(.eyebrow):not(.president-signature) {
  color: var(--icf-muted);
  font-size: 1.05rem;
  line-height: 1.85;
  margin: 1rem 0 0;
}

.president-message p a {
  color: var(--icf-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.president-message p a:hover {
  color: var(--icf-gold-2);
}

.president-signature {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 2rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--icf-border);
}

.president-signature strong {
  color: var(--icf-gold);
  font-size: 1.15rem;
}

.president-signature span {
  color: var(--icf-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

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

  .president-portrait {
    max-width: 22rem;
  }
}

body.theme-light .president-message h2 {
  color: var(--icf-text);
}

body.theme-light .president-portrait img {
  box-shadow: 0 30px 80px rgba(25, 20, 20, 0.14);
}

.sponsor-marquee.v2 .marquee-window {
  border-radius: 4px;
  padding: 2.5rem 0;
}

/* Scroll Reveal Animations */
[data-reveal] {
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.21, 0.45, 0.15, 1.0);
}

[data-reveal="fade-up"] {
  transform: translateY(40px);
}

[data-reveal="fade-left"] {
  transform: translateX(40px);
}

[data-reveal].revealed {
  opacity: 1;
  transform: translate(0);
}


/* Final Choice: Option 2: Cinematic Bloom Animation */
.cinematic-bloom.kinetic-text {
  font-size: clamp(3.58rem, 7.95vw, 7.15rem);
  font-weight: 900;
  font-style: normal;
  letter-spacing: -0.05em;
  line-height: 0.95;
  color: #e6e6e6;
  margin-bottom: 2.0rem;
  opacity: 0;
  filter: blur(15px);
  transform: scale(1.08);
  animation: cinematicBloom 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes cinematicBloom {
  0% {
    opacity: 0;
    filter: blur(15px);
    transform: scale(1.08);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1.0);
  }
}

/* Premium Admin Login Overhaul */
.admin-login-screen {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* Move to top */
  padding-top: 150px;
  /* Specific user-requested offset */
  position: relative;
  overflow: hidden;
  background: #09070c;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 3rem;
}

.login-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../img/slides/slide1.jpg') center/cover no-repeat;
  filter: blur(40px) brightness(0.4);
  z-index: 1;
}

.login-noise {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.15;
  pointer-events: none;
  z-index: 2;
}

.login-container {
  position: relative;
  z-index: 100;
  width: 100%;
  max-width: 420px;
  padding: 3rem 2.5rem;
  text-align: center;
}

.login-logo {
  height: 60px;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.2));
}

.stylish-form {
  text-align: left;
  margin-top: 2rem;
}

.input-group {
  margin-bottom: 1.5rem;
}

.input-group label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  opacity: 0.7;
  margin-bottom: 0.5rem;
}

.stylish-form input {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1rem;
  border-radius: 8px;
  color: #fff;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.stylish-form input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 200px rgba(255, 255, 255, 0.05);
}

.login-footer {
  margin-top: 2rem;
  text-align: center;
}

.back-link {
  color: #fff;
  opacity: 0.5;
  text-decoration: none;
  font-size: 0.85rem;
  transition: opacity 0.3s ease;
}

.back-link:hover {
  opacity: 1;
}

.admin-login-screen [data-reveal] {
  opacity: 0;
  transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.admin-login-screen [data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

.hero-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 1;
}

.blurred-bg {
  filter: blur(30px) brightness(0.5);
  transform: scale(1.1);
}

.sponsors-title {
  font-size: clamp(3rem, 8vw, 6rem) !important;
  font-weight: 900;
  letter-spacing: -0.04em;
  margin: 1.5rem 0;
  line-height: 0.9;
}

.hero-backdrop.blurred-bg {
  filter: blur(20px) brightness(0.6);
  z-index: 0;
}

/* Premium Admin Dashboard Overhaul */
.admin-portal-screen {
  min-height: 100vh;
  position: relative;
  background: #09070c;
  padding: 4rem 1.5rem;
}

.admin-dashboard-container {
  max-width: 78rem;
  margin: 0 auto;
  position: relative;
  z-index: 10;
  opacity: 0;
  transition: all 1s ease;
}

.admin-dashboard-container.revealed {
  opacity: 1;
}

.admin-portal-banner.glass-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3rem;
  margin-bottom: 2rem;
}

.admin-summary.glass-panel {
  margin-bottom: 2rem;
}

.admin-summary-card.glass-panel.silver {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 2rem;
  transition: all 0.3s ease;
}

.admin-summary-card.glass-panel.silver:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  transform: translateY(-5px);
}

.admin-summary-card strong {
  display: block;
  font-size: 2.5rem;
  font-weight: 900;
  color: #fff;
  margin-top: 0.5rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  letter-spacing: -0.02em;
}

.admin-progress-bar {
  background: rgba(255, 255, 255, 0.05);
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 1rem;
}

.shimmer-gradient {
  background: linear-gradient(90deg, #d4af37, #f1c40f, #d4af37);
  background-size: 200% 100%;
  animation: shimmer 3s infinite linear;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.admin-card.glass-panel.interactive {
  padding: 2.5rem;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.admin-card.glass-panel.interactive:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  transform: scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.admin-card h3 {
  font-size: 1.25rem;
  margin: 1rem 0 0.5rem;
}

.admin-card p {
  font-size: 0.9rem;
  opacity: 0.7;
}

/* Form refinement */
.glass-panel.inset {
  background: rgba(0, 0, 0, 0.2) !important;
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

legend.slate-white {
  padding: 0 1rem;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

/* Architectural Table */
.table-container.glass-panel.inset {
  padding: 0;
  overflow: hidden;
  overflow-x: auto;
  /* scroll wide tables instead of clipping them on narrow widths */
}

.admin-table.architectural {
  width: 100%;
  border-collapse: collapse;
  /* Neutralize the light-theme .admin-table base (white bg) so the dark glass
     container shows through and the light row text stays readable. */
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.admin-table.architectural th {
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
  text-align: left;
  padding: 1.25rem 1.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-table.architectural td {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #fff;
  opacity: 0.9;
  font-size: 0.95rem;
}

.admin-table.architectural tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.status-tag {
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.status-tag.published {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

.status-tag.draft {
  background: rgba(255, 255, 255, 0.1);
  color: #ccc;
}

.status-tag.pending_review {
  background: rgba(234, 179, 8, 0.2);
  color: #facc15;
}

.button.mini {
  padding: 0.4rem 0.8rem;
  font-size: 0.75rem;
}

/* =====================================================================
   Admin dashboard — dark-theme polish (scoped to body.view-admin)
   -------------------------------------------------------------------
   Fixes light-theme components that leaked onto the dark glass
   dashboard (white completion box, invisible dark numbers, low-contrast
   labels) and adds editorial hierarchy. Glassmorphism is preserved —
   these only correct colour/contrast/spacing on top of .glass-panel.
   ===================================================================== */

/* #1 — the completion overview was a solid white card on dark glass. */
.view-admin .admin-completion-overview {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
  padding: 1.5rem 1.75rem;
}

/* #2 — contrast fixes for text that was dark/blue on dark glass. */
.view-admin .admin-completion-label strong {
  color: #fff;
}

.view-admin .admin-completion-label span {
  color: var(--icf-gold);
  /* was #2563eb blue — near-invisible on dark */
}

.view-admin .dashboard-card strong {
  color: #fff;
  /* was #111827 — the "empty" Article Registry numbers */
}

.view-admin .dashboard-card span {
  color: var(--icf-muted);
}

.view-admin .admin-card p {
  opacity: 1;
  color: var(--icf-muted);
  /* solid muted reads better than opacity:0.7 */
}

.view-admin .admin-table.architectural td {
  opacity: 1;
  color: var(--icf-text);
}

/* #5 — editorial gold accent on section headings. */
.view-admin .section-block h2 {
  font-size: 1.4rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 1.5rem;
  padding-left: 0.9rem;
  border-left: 3px solid var(--icf-gold);
}

.view-admin .section-header-row h2 {
  margin-bottom: 0;
}

/* #6 — 5 quick-action cards no longer orphan one on its own row. */
.view-admin .admin-quick-actions .admin-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.view-admin .admin-card.glass-panel.interactive {
  padding: 2rem;
}

/* =====================================================================
   Admin sub-pages — shared glass chrome (.admin-cms)
   Content, Articles, Schedule, FAQ, Sponsors, Gallery
   -------------------------------------------------------------------
   Brings the plainer CMS sub-pages up to the dashboard's glass look so
   the admin area reads as one product. Scoped to their body view class
   so nothing here touches public pages or the dashboard itself.
   ===================================================================== */

.admin-cms main {
  width: 100%;
  max-width: 78rem;
  margin: 0 auto;
  padding: 2.75rem clamp(1rem, 4vw, 2.5rem) 5rem;
}

.admin-cms .admin-page-header h1 {
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 0.4rem;
}

.admin-cms .admin-page-header p {
  color: var(--icf-muted);
  margin: 0 0 1.75rem;
}

/* Alerts */
.admin-cms .admin-alert {
  padding: 0.9rem 1.1rem;
  border-radius: 8px;
  margin-bottom: 1.25rem;
  font-weight: 600;
}

.admin-cms .admin-alert.success {
  background: rgba(80, 170, 110, 0.15);
  border: 1px solid rgba(80, 170, 110, 0.5);
  color: #cbe9d3;
}

.admin-cms .admin-alert.error {
  background: rgba(200, 80, 80, 0.15);
  border: 1px solid rgba(200, 80, 80, 0.5);
  color: #efc9c9;
}

/* Action rows */
.admin-cms .admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

/* Sections as glass panels */
.admin-cms .admin-section {
  backdrop-filter: blur(24px) saturate(180%);
  background: rgba(17, 14, 21, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 3px solid var(--icf-gold);
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  padding: 1.75rem 2rem;
  margin-bottom: 1.5rem;
}

.admin-cms .admin-section h2 {
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
}

.admin-cms .muted {
  color: var(--icf-muted);
  font-size: 0.85rem;
}

.admin-cms .section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.admin-cms .section-header-row h2 {
  margin: 0;
}

/* Forms */
.admin-cms .admin-form label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--icf-muted);
  margin: 1rem 0 0.35rem;
}

.admin-cms .admin-form input,
.admin-cms .admin-form textarea,
.admin-cms .admin-form select {
  width: 100%;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--icf-text);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 0.65rem 0.8rem;
  box-sizing: border-box;
  transition: border-color 0.2s, background 0.2s;
}

.admin-cms .admin-form input:focus,
.admin-cms .admin-form textarea:focus,
.admin-cms .admin-form select:focus {
  outline: none;
  border-color: var(--icf-gold);
  background: rgba(0, 0, 0, 0.35);
}

.admin-cms .admin-form textarea {
  resize: vertical;
  min-height: 6rem;
  line-height: 1.6;
}

/* Two-column layouts */
.admin-cms .admin-grid.two-column,
.admin-cms .admin-section.two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.5rem;
}

@media (max-width: 680px) {

  .admin-cms .admin-grid.two-column,
  .admin-cms .admin-section.two-column {
    grid-template-columns: 1fr;
  }
}

/* Buttons */
.admin-cms .admin-button {
  display: inline-block;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  color: var(--icf-bg);
  background: var(--icf-gold);
  border: 1px solid var(--icf-gold);
  border-radius: 6px;
  padding: 0.6rem 1.05rem;
  transition: opacity 0.2s, border-color 0.2s;
}

.admin-cms .admin-form .admin-button {
  margin-top: 1.25rem;
}

.admin-cms .admin-button:hover {
  opacity: 0.85;
}

.admin-cms .admin-button.secondary {
  color: var(--icf-text);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.18);
}

.admin-cms .admin-button.secondary:hover {
  border-color: var(--icf-gold);
  opacity: 1;
}

/* Tables */
.admin-cms .admin-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
  /* Override the light-theme .admin-table base (white bg + shadow). */
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.admin-cms .admin-table th {
  text-align: left;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--icf-muted);
  padding: 0.65rem 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.admin-cms .admin-table td {
  padding: 0.8rem 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.9rem;
  color: var(--icf-text);
  vertical-align: top;
}

.admin-cms .admin-table td a {
  color: var(--icf-gold);
  font-weight: 700;
  text-decoration: none;
}

/* Cards on sub-pages (override the white light-theme .admin-card). */
.admin-cms .admin-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1rem;
}

.admin-cms .admin-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 1.25rem;
  color: var(--icf-text);
  box-shadow: none;
}

.admin-cms .admin-card h3 {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
  color: var(--icf-muted);
  font-weight: 700;
}

/* =====================================================================
   Light theme — "2026 flyer" sync (scoped to body.theme-light)
   -------------------------------------------------------------------
   Recolors the dark editorial design to the flyer's bright,
   orange-on-white identity. Applied to all public-facing views via the
   theme-light body class (see layout.php); admin + login keep the dark
   theme. Achieved mostly by redefining the --icf-* custom properties,
   plus targeted overrides for rules that hard-coded dark colors.
   The shared chrome (header, footer, buttons, .glass-panel cards) and
   the homepage-specific blocks below are followed by a cross-page
   override layer that handles the per-page hero/card/form styling.
   ===================================================================== */
body.theme-light {
  --icf-bg: #f6f5f3;
  /* near-white page background */
  --icf-panel: #ffffff;
  /* cards / footer surface */
  --icf-panel-2: #ffffff;
  /* panel-section surface */
  --icf-border: rgba(25, 20, 20, 0.12);
  --icf-gold: #f1650e;
  /* primary accent — flyer orange */
  --icf-gold-2: #d2570b;
  --icf-burgundy: #eb4b00;
  /* featured / premium accent — hot red-orange */
  --icf-burgundy-2: #c23d00;
  --icf-text: #1c1619;
  /* charcoal headings + text */
  --icf-muted: #6b6470;
  /* muted body text */
  background: var(--icf-bg);
  color: var(--icf-text);
}

/* --- Header --- */
body.theme-light .site-header {
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid var(--icf-border);
}

body.theme-light .brand h1 {
  color: var(--icf-text);
}

body.theme-light .site-nav a:hover {
  color: var(--icf-gold);
}

body.theme-light .menu-toggle {
  background: var(--icf-gold);
  color: #fff;
}

body.theme-light .dropdown-menu a:hover {
  background: rgba(241, 101, 14, 0.08) !important;
}

/* --- Hero --- */
body.theme-light main {
  background: var(--icf-bg);
}

body.theme-light .hero-scrim {
  /* Two same-color (#f6f5f3) layers composite multiplicatively:
     net = 1 - (1-a1)(1-a2). Tuned so the headline side stays ~95% opaque
     while the right-center band drops to ~25% (photo shows through most). */
  background:
    /* Far-left stop lowered to 0.80 to reveal more photo behind the headline
       (original was 0.95). To revert, set the 0% stop below back to 0.95. */
    linear-gradient(90deg, rgba(246, 245, 243, 0.80) 0%, rgba(246, 245, 243, 0.80) 42%, rgba(246, 245, 243, 0.20) 72%, rgba(246, 245, 243, 0.03) 100%),
    linear-gradient(0deg, rgba(246, 245, 243, 0.80) 0%, rgba(246, 245, 243, 0.07) 44%, rgba(246, 245, 243, 0.70) 100%);
}

body.theme-light .adult-hero h1,
body.theme-light .cinematic-bloom.kinetic-text {
  color: var(--icf-text);
}

body.theme-light .hero-lede {
  color: var(--icf-muted);
}

body.theme-light .button.outline {
  background: #fff;
  border: 1px solid var(--icf-border);
  color: var(--icf-text);
}

/* Hero stat panel + any glass panels on the homepage -> clean white cards */
body.theme-light .glass-panel,
body.theme-light .hero-stat-panel,
body.theme-light .hero-stat-panel.glass-panel {
  background: rgba(255, 255, 255, 0.627) !important;
  border: #050407;
  border: 1px solid var(--icf-border) !important;
  box-shadow: 0 24px 60px rgba(25, 20, 20, 0.16) !important;
}

body.theme-light .stat-grid div {
  background: rgba(241, 101, 14, 0.035);
}

body.theme-light .stat-grid strong {
  color: var(--icf-text);
}

/* =====================================================================
   CINEMATIC DARK HERO (homepage) — overrides the theme-light hero wash.
   A deliberate dark entrance on the otherwise-light site: one dark scrim
   that clears to the right ~37% so the photo pops, bright premium type,
   and the stats panel as the single frosted-glass accent.
   Fully reversible — delete this block to fall back to the light hero.
   ===================================================================== */

/* One dark gradient: heavy on the left behind the text, fully clear from
   63% onward (the right ~37% of the photo shows through), plus a bottom
   vignette to ground the CTAs. */
body.theme-light .adult-hero .hero-scrim {
  background:
    linear-gradient(90deg,
      rgba(7, 6, 10, 0.94) 0%,
      rgba(7, 6, 10, 0.86) 26%,
      rgba(7, 6, 10, 0.42) 50%,
      rgba(7, 6, 10, 0) 63%,
      rgba(7, 6, 10, 0) 100%),
    linear-gradient(0deg,
      rgba(7, 6, 10, 0.72) 0%,
      rgba(7, 6, 10, 0) 42%);
}

/* Slow Ken-Burns drift on whichever slide is active (restarts each swap). */
body.theme-light .adult-hero .hero-slide {
  transform: scale(1.05);
  transform-origin: 62% 50%;
}

body.theme-light .adult-hero .hero-slide.active {
  animation: heroKenBurns 9s ease-out forwards;
}

@keyframes heroKenBurns {
  from { transform: scale(1.05); }
  to   { transform: scale(1.16); }
}

/* Bright, premium type on the dark scrim (hugs removed in the markup). */
body.theme-light .adult-hero .cinematic-bloom.kinetic-text,
body.theme-light .adult-hero h1 {
  color: #f5efe6;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.55);
}

/* Accessibility + robustness: the headline is invisible (opacity:0) until its
   bloom animation runs. For reduced-motion users, skip straight to the final
   visible state so it never depends on the animation. */
@media (prefers-reduced-motion: reduce) {
  .cinematic-bloom.kinetic-text {
    animation: none;
    opacity: 1;
    filter: none;
    transform: none;
  }

  body.theme-light .adult-hero .hero-slide.active {
    animation: none;
  }
}

body.theme-light .adult-hero .eyebrow {
  color: var(--icf-gold);
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.5);
}

body.theme-light .adult-hero .hero-lede {
  color: #e7e2ee;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}

body.theme-light .adult-hero .hero-presented,
body.theme-light .adult-hero .hero-presented a {
  color: rgba(245, 239, 230, 0.72);
}

/* The one frosted-glass accent: dark, blurred, hairline border, gold numbers. */
body.theme-light .adult-hero .hero-stat-panel,
body.theme-light .adult-hero .hero-stat-panel.glass-panel {
  background: rgba(14, 11, 18, 0.42) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55),
              inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(22px) saturate(140%);
}

body.theme-light .adult-hero .stat-grid div {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.theme-light .adult-hero .stat-grid span {
  color: rgba(245, 239, 230, 0.68);
}

body.theme-light .adult-hero .stat-grid strong {
  color: #f5efe6;
}

body.theme-light .adult-hero .hero-stat-panel p {
  color: rgba(245, 239, 230, 0.75);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Keep the premium orange CTA; give the outline/countdown a glass look. */
body.theme-light .adult-hero .button.outline {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #f5efe6;
}

/* --- Section headings + cards --- */
body.theme-light .section-heading h2 {
  color: var(--icf-text);
}

body.theme-light .feature-card,
body.theme-light .action-card {
  background: #fff;
}

body.theme-light .feature-card h3,
body.theme-light .action-card h3,
body.theme-light .reel-card h3 {
  color: var(--icf-text);
}

/* Section band backgrounds */
body.theme-light .dark-section {
  background: #f0ede9;
}

/* --- Reels -> light cards --- */
body.theme-light .reel-card {
  border: 1px solid var(--icf-border);
}

body.theme-light .reel-card.performance,
body.theme-light .reel-card.culinary,
body.theme-light .reel-card.music {
  background: #fff;
}

body.theme-light .reel-mark {
  color: rgba(241, 101, 14, 0.16);
}

body.theme-light .reel-card::before {
  background: radial-gradient(circle at 50% 35%, rgba(241, 101, 14, 0.08), transparent 40%);
}

/* --- Misc accents tuned for light bg --- */
body.theme-light .text-link:hover {
  color: var(--icf-text);
}

body.theme-light .tactile-card:hover {
  box-shadow: 0 20px 40px rgba(25, 20, 20, 0.12);
}

/* --- Footer --- */
body.theme-light .site-footer {
  background: #f0ede9;
}

body.theme-light .footer-brand {
  color: var(--icf-text);
}

/* =====================================================================
   Cross-page light overrides — sponsors / become-a-sponsor / our-vendors
   / vendors / volunteers / vendor-success / article.
   These pages ship bespoke inline <style> blocks that hard-code dark
   values. The rules below use [class$="-hero"]-style selectors so they
   apply uniformly across every page's prefixed classes (.sp-*, .bas-*,
   .ov-*, .vendors-*, .vol-*, .vs-*) without listing each one. The
   homepage uses .adult-hero / .hero-scrim (different suffixes) and is
   handled by the block above, so it is unaffected here.
   ===================================================================== */

/* Inner-page hero shells: dark bg -> light, photo backdrop brightened,
   scrim flipped to a light wash so charcoal text stays readable. */
body.theme-light [class$="-hero"] {
  background: var(--icf-bg);
}

body.theme-light [class$="-hero-backdrop"] {
  filter: blur(22px) brightness(1.08) saturate(1.05);
}

body.theme-light [class$="-hero-scrim"] {
  background:
    linear-gradient(0deg, rgba(246, 245, 243, 0.92) 0%, rgba(246, 245, 243, 0.78) 50%, rgba(246, 245, 243, 0.92) 100%);
}

/* All headings + inner-page titles/ledes -> charcoal / muted. */
body.theme-light h1,
body.theme-light h2,
body.theme-light h3,
body.theme-light h4,
body.theme-light [class$="-title"] {
  color: var(--icf-text);
}

body.theme-light [class$="-lede"] {
  color: var(--icf-muted);
}

/* White-text literals scattered through the page-specific styles. */
body.theme-light .sp-name,
body.theme-light .sp-community-name,
body.theme-light .ov-stat-value,
body.theme-light .glance-value,
body.theme-light .vol-glance-value,
body.theme-light .contact-value,
body.theme-light .vs-row-value,
body.theme-light .booth-features strong,
body.theme-light .req-list strong,
body.theme-light .vs-step-body strong,
body.theme-light .faq-question,
body.theme-light .vapp-radio-card strong,
body.theme-light .vapp-checkbox-card strong,
body.theme-light .vol-author-name,
body.theme-light .bas-success-head,
body.theme-light .vol-success-head {
  color: var(--icf-text);
}

/* Keep the intentional accent on the "amount paid" value. */
body.theme-light .vs-row-value.gold {
  color: var(--icf-gold);
}

/* Muted marquee names + divider that relied on white-on-dark. */
body.theme-light .sp-marquee-track span,
body.theme-light .marquee-track span {
  color: var(--icf-muted);
}

body.theme-light .sp-tier-divider {
  background: linear-gradient(90deg, rgba(25, 20, 20, 0.18), transparent);
}

/* White-alpha fills that vanish on a light background. */
body.theme-light .ov-vendor-badge {
  background: rgba(25, 20, 20, 0.05);
}

body.theme-light .vs-row-total {
  background: rgba(25, 20, 20, 0.03);
}

/* Card hovers that flipped to a darker panel -> stay light. */
body.theme-light .ov-vendor-card:hover,
body.theme-light .booth-card:hover,
body.theme-light .vol-role-card:hover,
body.theme-light .faq-item[open],
body.theme-light .sp-card:hover {
  background: #fff !important;
  box-shadow: 0 12px 32px rgba(25, 20, 20, 0.08) !important;
}

/* Sponsor logos display in full color by default; on hover they pop forward
   with a soft drop-shadow and a slight saturation boost. */
body.theme-light .sp-logo {
  filter: none;
}

body.theme-light .sp-card:hover .sp-logo {
  filter: saturate(1.2) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.28));
}

/* Gold accents -> flyer orange where they were hard-coded literals. */
body.theme-light .sp-badge,
body.theme-light .bas-badge {
  color: var(--icf-gold);
  border-color: rgba(241, 101, 14, 0.45);
}

/* Form fields: dark inputs -> white with charcoal text. */
body.theme-light .vapp-field input,
body.theme-light .vapp-field textarea,
body.theme-light .bas-field input,
body.theme-light .bas-field textarea,
body.theme-light .vol-form-input,
body.theme-light .vol-form-select,
body.theme-light .vol-form-textarea {
  background: #fff;
  color: var(--icf-text);
  border-color: var(--icf-border);
}

body.theme-light .vol-form-select option {
  background: #fff;
  color: var(--icf-text);
}

body.theme-light input::placeholder,
body.theme-light textarea::placeholder {
  color: rgba(25, 20, 20, 0.4) !important;
}

/* Selected radio/checkbox/size states -> orange tint instead of gold. */
body.theme-light .vapp-radio-card.selected,
body.theme-light .vapp-checkbox-card.selected,
body.theme-light .vol-size-option input:checked+span {
  border-color: var(--icf-gold);
  background: rgba(241, 101, 14, 0.08);
}

/* --- Admin login screen --- */
body.theme-light .admin-login-screen {
  background: var(--icf-bg);
}

/* Blurred festival photo backdrop: brighten it for the light theme. */
body.theme-light .login-backdrop {
  filter: blur(40px) brightness(1.1) saturate(1.02);
}

body.theme-light .login-noise {
  opacity: 0.05;
}

/* White ICF logo glow was for the dark bg; not needed on white. */
body.theme-light .login-logo {
  filter: none;
}

body.theme-light .input-group label {
  color: var(--icf-text);
  opacity: 0.85;
}

body.theme-light .stylish-form input {
  background: #fff;
  border: 1px solid var(--icf-border);
  color: var(--icf-text);
}

body.theme-light .stylish-form input:focus {
  background: #fff;
  border-color: var(--icf-gold);
  box-shadow: 0 0 0 3px rgba(241, 101, 14, 0.15);
}

body.theme-light .back-link {
  color: var(--icf-muted);
  opacity: 1;
}

body.theme-light .back-link:hover {
  color: var(--icf-gold);
}