/* ─── CSS Custom Properties ─────────────────────────────── */
    :root {
      /* Brand — sampled from the logo: royal blue wordmark, red ECG pulse.
         The --navy/--teal names are historical; the values below are what
         matters, so every existing rule picks up the new palette. */
      --brand:      #004AAD;
      --brand-deep: #00368A;
      --brand-lite: #2E7BE0;
      --accent:     #ED1C24;

      --navy:       #0B1B34;
      --navy-mid:   #12294D;
      --teal:       #004AAD;
      --teal-light: #2E7BE0;
      --red:        #ED1C24;

      --bg:         #F7F9FC;
      --bg-card:    #FFFFFF;
      --bg-section: #EDF2F9;
      --text:       #0B1B34;
      --text-body:  #33455F;
      --text-muted: #61738D;
      --border:     #C9D5E5;
      --border-light:#E3EAF4;

      --shadow-sm:  0 1px 3px rgba(0,54,138,0.08), 0 1px 2px rgba(0,54,138,0.04);
      --shadow-md:  0 4px 16px rgba(0,54,138,0.10), 0 2px 4px rgba(0,54,138,0.06);
      --shadow-lg:  0 12px 40px rgba(0,54,138,0.16);
      --shadow-brand: 0 10px 30px rgba(0,74,173,0.28);

      --radius:     8px;
      --radius-lg:  16px;
      --radius-xl:  24px;
      --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
      --font-serif: 'Playfair Display', Georgia, serif;
      --font-sans:  'Atkinson Hyperlegible', system-ui, sans-serif;
    }

    [data-theme="dark"] {
      --brand:      #4E93F5;
      --brand-deep: #2E7BE0;
      --brand-lite: #7FB4FF;
      --accent:     #FF5C63;

      --navy:        #E6EDF9;
      --navy-mid:    #C6D5EA;
      --teal:        #4E93F5;
      --teal-light:  #7FB4FF;
      --red:         #FF5C63;

      --bg:          #060D1A;
      --bg-card:     #0D1729;
      --bg-section:  #091223;
      --text:        #EEF3FB;
      --text-body:   #C2D0E4;
      --text-muted:  #8CA0BC;
      --border:      #1C3050;
      --border-light:#131F35;
      --shadow-sm:   0 1px 3px rgba(0,0,0,0.45);
      --shadow-md:   0 4px 16px rgba(0,0,0,0.55);
      --shadow-lg:   0 12px 40px rgba(0,0,0,0.65);
      --shadow-brand: 0 10px 30px rgba(0,0,0,0.5);
    }

    /* ─── Reset & Base ──────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; font-size: 16px; }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    }

    body {
      font-family: var(--font-sans);
      background: var(--bg);
      color: var(--text-body);
      line-height: 1.6;
      transition: background var(--transition), color var(--transition);
      -webkit-font-smoothing: antialiased;
    }

    img { display: block; max-width: 100%; height: auto; }
    a { color: inherit; text-decoration: none; }
    button { cursor: pointer; border: none; background: none; font-family: inherit; }
    ul, ol { list-style: none; }

    /* ─── Skip Link ─────────────────────────────────────────── */
    .skip-link {
      position: absolute;
      top: -100%;
      left: 1rem;
      padding: 0.5rem 1rem;
      background: var(--teal);
      color: #fff;
      font-weight: 700;
      z-index: 9999;
      border-radius: var(--radius);
      transition: top 0.2s;
    }
    .skip-link:focus { top: 1rem; }

    /* ─── Typography Helpers ────────────────────────────────── */
    .serif { font-family: var(--font-serif); }

    h1, h2, h3, h4 {
      font-family: var(--font-serif);
      color: var(--text);
      line-height: 1.2;
      letter-spacing: -0.01em;
    }

    /* ─── Layout ─────────────────────────────────────────────── */
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1.5rem;
    }

    .section { padding: 4rem 0; }
    .section--alt { background: var(--bg-section); }

    .section-label {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--teal);
      margin-bottom: 0.75rem;
    }
    .section-label::before {
      content: '';
      display: block;
      width: 24px;
      height: 2px;
      background: var(--teal);
      flex-shrink: 0;
    }

    .section-heading {
      font-size: clamp(1.6rem, 3vw, 2.2rem);
      font-weight: 700;
      color: var(--text);
      margin-bottom: 2rem;
    }

    /* ─── Tags / Badges ─────────────────────────────────────── */
    .tag {
      display: inline-block;
      padding: 0.2rem 0.6rem;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      border-radius: 3px;
      white-space: nowrap;
    }
    .tag--teal    { background: rgba(13,148,136,0.12); color: var(--teal); }
    .tag--navy    { background: rgba(15,31,61,0.1); color: #1B3060; }
    .tag--red     { background: rgba(192,57,43,0.1); color: var(--red); }
    .tag--purple  { background: rgba(124,58,237,0.1); color: #7C3AED; }
    .tag--orange  { background: rgba(234,88,12,0.1); color: #EA580C; }
    .tag--green   { background: rgba(5,150,105,0.1); color: #059669; }

    [data-theme="dark"] .tag--navy { background: rgba(30,58,95,0.4); color: #93C5FD; }

    /* ─── Buttons ────────────────────────────────────────────── */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.6rem 1.4rem;
      font-size: 0.875rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      border-radius: var(--radius);
      transition: background var(--transition), color var(--transition),
                  transform var(--transition), box-shadow var(--transition);
      cursor: pointer;
    }
    .btn:focus-visible {
      outline: 3px solid var(--teal);
      outline-offset: 3px;
    }
    .btn--primary {
      background: var(--teal);
      color: #fff;
    }
    .btn--primary:hover {
      background: var(--teal-light);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(13,148,136,0.35);
    }
    .btn--outline {
      background: transparent;
      color: var(--text);
      border: 1.5px solid var(--border);
    }
    .btn--outline:hover {
      border-color: var(--teal);
      color: var(--teal);
      transform: translateY(-1px);
    }
    .btn--ghost {
      background: transparent;
      color: var(--teal);
      padding: 0.4rem 0;
      font-size: 0.8rem;
      letter-spacing: 0.04em;
    }
    .btn--ghost:hover { color: var(--teal-light); }
    .btn--ghost svg { transition: transform var(--transition); }
    .btn--ghost:hover svg { transform: translateX(3px); }

    /* ─── Navigation ─────────────────────────────────────────── */
    .nav {
      position: sticky;
      top: 0;
      z-index: 100;
      background: var(--bg-card);
      border-bottom: 1px solid var(--border-light);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      transition: background var(--transition), box-shadow var(--transition);
    }
    .nav.scrolled { box-shadow: var(--shadow-md); }

    .nav__inner {
      display: flex;
      align-items: center;
      gap: 1rem;
      min-height: 86px;
    }

    .nav__brand {
      display: inline-flex;
      align-items: center;
      flex-shrink: 0;
      transition: transform var(--transition);
      white-space: nowrap;
    }
    .nav__brand:hover {
      transform: translateY(-1px);
    }
    .nav__brand:focus-visible {
      outline: 3px solid var(--teal);
      outline-offset: 3px;
    }

    .brand-mark {
      display: block;
      height: 72px;
      width: auto;
      filter: saturate(1.05) contrast(1.02);
    }

    .nav__brand .brand-mark {
      height: 72px;
    }

    .nav__links {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      margin-left: 1.5rem;
    }
    .nav__links a {
      padding: 0.4rem 0.65rem;
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--text-muted);
      border-radius: var(--radius);
      transition: color var(--transition), background var(--transition);
      white-space: nowrap;
    }
    .nav__links a:hover,
    .nav__links a.active { color: var(--text); background: var(--bg-section); }
    .nav__links a:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

    .nav__right {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-left: auto;
      flex-shrink: 0;
    }

    /* Search */
    .nav__search {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.35rem 0.75rem;
      background: var(--bg-section);
      border: 1px solid var(--border-light);
      border-radius: 20px;
      transition: border-color var(--transition), box-shadow var(--transition);
    }
    .nav__search:focus-within {
      border-color: var(--teal);
      box-shadow: 0 0 0 3px rgba(13,148,136,0.15);
    }
    .nav__search svg { flex-shrink: 0; color: var(--text-muted); }
    .nav__search input {
      border: none;
      background: none;
      font-family: var(--font-sans);
      font-size: 0.8rem;
      color: var(--text);
      width: 140px;
      outline: none;
    }
    .nav__search input::placeholder { color: var(--text-muted); }

    /* Dark mode toggle */
    .theme-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--bg-section);
      border: 1px solid var(--border-light);
      color: var(--text-muted);
      transition: color var(--transition), background var(--transition);
      flex-shrink: 0;
    }
    .theme-toggle:hover { color: var(--text); background: var(--border-light); }
    .theme-toggle:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
    .icon-sun, .icon-moon { width: 16px; height: 16px; }
    [data-theme="light"] .icon-moon { display: none; }
    [data-theme="dark"]  .icon-sun  { display: none; }

    /* Submit button */
    .nav__submit {
      padding: 0.4rem 0.9rem;
      font-size: 0.78rem;
      font-weight: 700;
      background: var(--teal);
      color: #fff;
      border-radius: var(--radius);
      transition: background var(--transition), transform var(--transition);
      white-space: nowrap;
    }
    .nav__submit:hover { background: var(--teal-light); transform: translateY(-1px); }
    .nav__submit:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

    /* Hamburger */
    .nav__burger {
      display: none;
      flex-direction: column;
      gap: 5px;
      padding: 8px;
      margin-left: auto;
      border-radius: var(--radius);
    }
    .nav__burger span {
      display: block;
      width: 20px;
      height: 2px;
      background: var(--text);
      border-radius: 2px;
      transition: transform var(--transition), opacity var(--transition);
    }
    .nav__burger:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
    .nav__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav__burger.open span:nth-child(2) { opacity: 0; }
    .nav__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Mobile nav */
    .nav__mobile {
      display: none;
      flex-direction: column;
      padding: 0.75rem 1.5rem 1rem;
      border-top: 1px solid var(--border-light);
      gap: 0.1rem;
    }
    .nav__mobile.open { display: flex; }
    .nav__mobile a {
      padding: 0.5rem 0.5rem;
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--text-muted);
      border-radius: var(--radius);
      transition: color var(--transition);
    }
    .nav__mobile a:hover { color: var(--text); }

    /* ─── Hero ───────────────────────────────────────────────── */
    .hero {
      background: var(--navy);
      background: linear-gradient(135deg, #0A1525 0%, #0F1F3D 50%, #0D2847 100%);
      padding: 5rem 0 4rem;
      position: relative;
      overflow: hidden;
    }
    .hero::before {
      content: '';
      position: absolute;
      top: -120px;
      right: -80px;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(13,148,136,0.12) 0%, transparent 65%);
      pointer-events: none;
    }
    .hero::after {
      content: '';
      position: absolute;
      bottom: -100px;
      left: -60px;
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(13,148,136,0.07) 0%, transparent 65%);
      pointer-events: none;
    }

    .hero__inner {
      display: grid;
      grid-template-columns: 1fr 420px;
      gap: 4rem;
      align-items: center;
      position: relative;
      z-index: 1;
    }

    .hero__label {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.3rem 0.8rem;
      background: rgba(13,148,136,0.15);
      border: 1px solid rgba(13,148,136,0.3);
      border-radius: 20px;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--teal-light);
      margin-bottom: 1.25rem;
    }
    .hero__label::before {
      content: '';
      width: 6px;
      height: 6px;
      background: var(--teal);
      border-radius: 50%;
      animation: pulse-dot 2s infinite;
    }
    @keyframes pulse-dot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.8); }
    }

    .hero__title {
      font-size: clamp(2rem, 5vw, 3.2rem);
      font-weight: 900;
      color: #F1F5F9;
      line-height: 1.1;
      margin-bottom: 1.25rem;
      letter-spacing: -0.02em;
    }
    .hero__title em {
      font-style: italic;
      color: var(--teal-light);
    }

    .hero__abstract {
      font-size: 1rem;
      line-height: 1.75;
      color: #94A3B8;
      max-width: 520px;
      margin-bottom: 2rem;
    }

    .hero__meta {
      display: flex;
      align-items: center;
      gap: 1rem;
      font-size: 0.78rem;
      color: #64748B;
      margin-bottom: 1.5rem;
      flex-wrap: wrap;
    }
    .hero__meta-item {
      display: flex;
      align-items: center;
      gap: 0.3rem;
    }
    .hero__meta-item svg { flex-shrink: 0; color: var(--teal); }

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

    .hero__image-wrap {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: 0 24px 64px rgba(0,0,0,0.5);
      aspect-ratio: 4/3;
      background: #1B3060;
    }
    .hero__image-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.85;
    }
    .hero__image-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(8,16,30,0.7) 0%, transparent 50%);
    }
    .hero__image-badge {
      position: absolute;
      bottom: 1rem;
      left: 1rem;
      background: var(--teal);
      color: #fff;
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 0.25rem 0.6rem;
      border-radius: 3px;
    }

    /* ─── Medical Review Forum ─────────────────────────────── */
    .forum {
      position: relative;
      overflow: hidden;
    }
    .forum::before {
      content: '';
      position: absolute;
      inset: auto -120px 18% auto;
      width: 320px;
      height: 320px;
      background: radial-gradient(circle, rgba(13,148,136,0.08) 0%, transparent 70%);
      pointer-events: none;
    }

    .forum__lead {
      max-width: 760px;
      font-size: 1rem;
      line-height: 1.75;
      color: var(--text-muted);
      margin-bottom: 2rem;
    }

    .forum__grid {
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
      gap: 1.5rem;
      align-items: start;
    }

    .forum__video,
    .forum__panel,
    .forum__closing {
      background: var(--bg-card);
      border: 1px solid var(--border-light);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
    }

    .forum__video {
      padding: 1rem;
    }

    .forum__video-frame {
      position: relative;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      border-radius: calc(var(--radius-lg) - 4px);
      background: #0A1525;
    }

    .forum__video-frame iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }

    .forum__video-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      align-items: center;
      margin-top: 0.9rem;
    }

    .forum__video-note {
      font-size: 0.84rem;
      color: var(--text-muted);
    }

    .forum__panel {
      padding: 1.25rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .forum__topic-grid {
      display: grid;
      gap: 0.75rem;
    }

    .forum__topic-card {
      display: flex;
      align-items: flex-start;
      gap: 0.9rem;
      padding: 1rem;
      border-radius: var(--radius);
      background: var(--bg-section);
      border: 1px solid var(--border-light);
    }

    .forum__topic-marker {
      width: 12px;
      height: 12px;
      margin-top: 0.2rem;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--teal), var(--teal-light));
      flex-shrink: 0;
      box-shadow: 0 0 0 4px rgba(13,148,136,0.12);
    }

    .forum__topic-title {
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 0.25rem;
    }

    .forum__topic-text {
      font-size: 0.84rem;
      line-height: 1.6;
      color: var(--text-muted);
    }

    .forum__closing {
      padding: 1.25rem;
      border-left: 4px solid var(--teal);
      background: linear-gradient(180deg, rgba(13,148,136,0.06) 0%, transparent 100%), var(--bg-card);
    }

    .forum__closing-label {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--teal);
      margin-bottom: 0.5rem;
    }

    .forum__closing p {
      font-size: 0.9rem;
      line-height: 1.7;
      color: var(--text-body);
    }

    .forum__winners {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-top: 1rem;
    }

    .forum__winner {
      padding: 0.4rem 0.7rem;
      border-radius: 20px;
      background: rgba(15,31,61,0.08);
      color: var(--text);
      font-size: 0.76rem;
      font-weight: 700;
    }

    [data-theme="dark"] .forum__winner {
      background: rgba(30,58,95,0.45);
      color: #DBEAFE;
    }

    /* ─── Ticker / Issue Info ────────────────────────────────── */
    .ticker {
      background: #0A1525;
      border-top: 1px solid rgba(13,148,136,0.2);
    }
    .ticker__inner {
      display: flex;
      align-items: center;
      gap: 2rem;
      height: 40px;
      font-size: 0.75rem;
      color: #64748B;
      letter-spacing: 0.04em;
    }
    .ticker__item {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      white-space: nowrap;
    }
    .ticker__item strong { color: #94A3B8; }
    .ticker__divider {
      width: 1px;
      height: 14px;
      background: #1E3A5F;
      flex-shrink: 0;
    }
    /* On narrow screens the items are wider than the bar. Wrap them onto
       more lines rather than letting the overflow be clipped and unreachable. */
    @media (max-width: 900px) {
      .ticker__inner {
        flex-wrap: wrap;
        height: auto;
        min-height: 40px;
        padding: 0.55rem 0;
        gap: 0.4rem 0.9rem;
      }
      .ticker__divider { display: none; }
    }

    /* ─── Article Cards ──────────────────────────────────────── */
    .articles-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }

    .articles-status {
      margin: -0.5rem 0 1.5rem;
      font-size: 0.84rem;
      color: var(--text-muted);
    }

    .articles-status--error {
      color: var(--red);
    }

    .article-card {
      background: var(--bg-card);
      border: 1px solid var(--border-light);
      border-radius: var(--radius-lg);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
      box-shadow: var(--shadow-sm);
    }
    .article-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
      border-color: var(--border);
    }

    .article-card__image {
      width: 100%;
      aspect-ratio: 16/9;
      object-fit: cover;
      background: var(--bg-section);
      transition: transform 400ms ease;
    }
    .article-card:hover .article-card__image { transform: scale(1.03); }
    .article-card__image-wrap { overflow: hidden; }

    .article-card__body {
      padding: 1.25rem;
      display: flex;
      flex-direction: column;
      flex: 1;
      gap: 0.5rem;
    }

    .article-card__tags {
      display: flex;
      gap: 0.4rem;
      flex-wrap: wrap;
    }

    .article-card__title {
      font-size: 1.05rem;
      font-weight: 700;
      line-height: 1.3;
      color: var(--text);
      transition: color var(--transition);
    }
    .article-card:hover .article-card__title { color: var(--teal); }

    .article-card__summary {
      font-size: 0.84rem;
      line-height: 1.65;
      color: var(--text-muted);
      flex: 1;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .article-card__footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 0.75rem;
      border-top: 1px solid var(--border-light);
      margin-top: 0.25rem;
    }

    .article-card__author {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .article-card__avatar {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      object-fit: cover;
      background: var(--bg-section);
      flex-shrink: 0;
    }
    .article-card__author-name {
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--text-body);
    }

    .article-card__read-time {
      font-size: 0.72rem;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 0.3rem;
    }
    .article-card__read-time svg { flex-shrink: 0; }

    /* ─── Filter Bar ─────────────────────────────────────────── */
    .filter-bar {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      margin-bottom: 2rem;
    }
    .filter-btn {
      padding: 0.35rem 0.9rem;
      font-size: 0.78rem;
      font-weight: 600;
      border: 1.5px solid var(--border);
      border-radius: 20px;
      color: var(--text-muted);
      background: var(--bg-card);
      transition: all var(--transition);
      cursor: pointer;
    }
    .filter-btn:hover,
    .filter-btn.active {
      background: var(--navy);
      border-color: var(--navy);
      color: #fff;
    }
    [data-theme="dark"] .filter-btn:hover,
    [data-theme="dark"] .filter-btn.active {
      background: var(--teal);
      border-color: var(--teal);
      color: #fff;
    }
    .filter-btn:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

    /* ─── Research Spotlight ─────────────────────────────────── */
    .spotlight__inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: start;
    }

    .spotlight__label { color: var(--red); }
    .spotlight__label::before { background: var(--red); }

    .spotlight__title {
      font-size: clamp(1.75rem, 3vw, 2.4rem);
      font-weight: 900;
      line-height: 1.15;
      margin-bottom: 1rem;
    }

    .spotlight__lead {
      font-size: 1rem;
      line-height: 1.75;
      color: var(--text-muted);
      margin-bottom: 1.5rem;
    }

    .spotlight__findings {
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
      margin-bottom: 1.75rem;
    }

    .spotlight__finding {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      font-size: 0.88rem;
      line-height: 1.55;
      color: var(--text-body);
    }
    .spotlight__finding::before {
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--teal);
      flex-shrink: 0;
      margin-top: 0.4rem;
    }

    .spotlight__matters {
      background: var(--bg-card);
      border: 1px solid var(--border-light);
      border-left: 4px solid var(--teal);
      border-radius: 0 var(--radius) var(--radius) 0;
      padding: 1rem 1.25rem;
    }
    .spotlight__matters-label {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--teal);
      margin-bottom: 0.4rem;
    }
    .spotlight__matters p {
      font-size: 0.88rem;
      line-height: 1.6;
      color: var(--text-body);
    }

    /* Infographic / diagram placeholder */
    .spotlight__diagram {
      background: var(--bg-card);
      border: 1px solid var(--border-light);
      border-radius: var(--radius-lg);
      padding: 2rem;
      box-shadow: var(--shadow-md);
    }

    .diagram__title {
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 1.5rem;
      text-align: center;
    }

    .diagram__steps {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .diagram__step {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      position: relative;
    }
    .diagram__step:not(:last-child) { padding-bottom: 1.5rem; }
    .diagram__step:not(:last-child) .diagram__connector {
      position: absolute;
      left: 20px;
      top: 40px;
      bottom: 0;
      width: 2px;
      background: linear-gradient(to bottom, var(--teal), var(--border-light));
    }

    .diagram__num {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--teal), var(--teal-light));
      color: #fff;
      font-size: 0.85rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      z-index: 1;
      box-shadow: 0 2px 8px rgba(13,148,136,0.35);
    }

    .diagram__content { flex: 1; }
    .diagram__step-title {
      font-weight: 700;
      font-size: 0.9rem;
      color: var(--text);
      margin-bottom: 0.2rem;
    }
    .diagram__step-desc {
      font-size: 0.8rem;
      color: var(--text-muted);
      line-height: 1.5;
    }

    .diagram__stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.75rem;
      margin-top: 1.5rem;
      padding-top: 1.5rem;
      border-top: 1px solid var(--border-light);
    }

    .diagram__stat {
      text-align: center;
      padding: 0.75rem;
      background: var(--bg-section);
      border-radius: var(--radius);
    }
    .diagram__stat-value {
      font-family: var(--font-serif);
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--teal);
      display: block;
    }
    .diagram__stat-label {
      font-size: 0.72rem;
      color: var(--text-muted);
      margin-top: 0.1rem;
    }

    /* ─── Student Perspectives ───────────────────────────────── */
    .perspectives-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }

    .perspective-card {
      background: var(--bg-card);
      border: 1px solid var(--border-light);
      border-radius: var(--radius-lg);
      padding: 1.5rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      transition: transform var(--transition), box-shadow var(--transition);
      box-shadow: var(--shadow-sm);
    }
    .perspective-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-md);
    }

    .perspective-card__quote {
      font-family: var(--font-serif);
      font-size: 0.95rem;
      font-style: italic;
      line-height: 1.7;
      color: var(--text-body);
      flex: 1;
      position: relative;
      padding-left: 1rem;
    }
    .perspective-card__quote::before {
      content: '\201C';
      position: absolute;
      left: -0.25rem;
      top: -0.5rem;
      font-size: 3rem;
      color: var(--teal);
      opacity: 0.3;
      font-family: var(--font-serif);
      line-height: 1;
    }

    .perspective-card__author {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding-top: 0.75rem;
      border-top: 1px solid var(--border-light);
    }

    .perspective-card__photo {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      object-fit: cover;
      background: var(--bg-section);
      flex-shrink: 0;
    }

    .perspective-card__name {
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--text);
    }
    .perspective-card__bio {
      font-size: 0.75rem;
      color: var(--text-muted);
      margin-top: 0.1rem;
    }

    .perspectives-empty {
      padding: 1.5rem;
      border: 1px dashed var(--border);
      border-radius: var(--radius-lg);
      background: var(--bg-card);
      color: var(--text-muted);
      text-align: center;
      font-size: 0.92rem;
    }

    .expert-empty {
      padding: 1.5rem;
      border: 1px dashed var(--border);
      border-radius: var(--radius-lg);
      background: var(--bg-card);
      color: var(--text-muted);
      text-align: center;
      font-size: 0.92rem;
    }

    /* ─── Interview / Expert Voices ──────────────────────────── */
    .interview__inner {
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: 3rem;
      align-items: start;
    }

    .interview__profile {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .interview__expert {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      padding: 1.25rem;
      background: var(--bg-card);
      border: 1px solid var(--border-light);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
    }
    .interview__photo {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      object-fit: cover;
      background: var(--bg-section);
      flex-shrink: 0;
      border: 3px solid var(--teal);
    }
    .interview__expert-name {
      font-weight: 700;
      font-size: 1rem;
      color: var(--text);
      margin-bottom: 0.2rem;
    }
    .interview__expert-role {
      font-size: 0.8rem;
      color: var(--text-muted);
      line-height: 1.4;
    }

    .interview__qa { display: flex; flex-direction: column; gap: 1.5rem; }

    .qa-item { display: flex; flex-direction: column; gap: 0.5rem; }

    .qa-q {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
    }
    .qa-q-mark {
      width: 24px;
      height: 24px;
      border-radius: 4px;
      background: var(--teal);
      color: #fff;
      font-size: 0.78rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 0.15rem;
    }
    .qa-q-text {
      font-weight: 700;
      font-size: 0.9rem;
      color: var(--text);
      line-height: 1.4;
    }

    .qa-a {
      font-size: 0.88rem;
      line-height: 1.7;
      color: var(--text-body);
      padding-left: 2.25rem;
    }

    /* Pull quote */
    .pull-quote {
      background: linear-gradient(135deg, var(--navy-mid), #0D2847);
      border-radius: var(--radius-lg);
      padding: 2rem 1.75rem;
      color: #E2E8F0;
      position: sticky;
      top: 80px;
    }
    [data-theme="dark"] .pull-quote { background: linear-gradient(135deg, #0F1A2E, #162033); }

    .pull-quote__text {
      font-family: var(--font-serif);
      font-size: 1.15rem;
      font-style: italic;
      line-height: 1.65;
      color: #F1F5F9;
      margin-bottom: 1rem;
      position: relative;
    }
    .pull-quote__text::before {
      content: '\201C';
      position: absolute;
      top: -1.5rem;
      left: -0.25rem;
      font-size: 4rem;
      color: var(--teal);
      opacity: 0.4;
      font-family: var(--font-serif);
      line-height: 1;
    }

    .pull-quote__attribution {
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      color: var(--teal-light);
      text-transform: uppercase;
    }

    .pull-quote__meta {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-top: 1.25rem;
      padding-top: 1rem;
      border-top: 1px solid rgba(255,255,255,0.1);
      font-size: 0.75rem;
      color: #64748B;
    }
    .pull-quote__meta svg { color: var(--teal); flex-shrink: 0; }

    /* ─── CTA Section ────────────────────────────────────────── */
    .cta {
      background: linear-gradient(135deg, #0A1525 0%, #0F1F3D 100%);
      padding: 5rem 0;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .cta::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 800px;
      height: 400px;
      background: radial-gradient(ellipse, rgba(13,148,136,0.1) 0%, transparent 70%);
      pointer-events: none;
    }

    .cta__inner { position: relative; z-index: 1; }

    .cta__label {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--teal-light);
      margin-bottom: 1rem;
    }

    .cta__title {
      font-size: clamp(1.8rem, 4vw, 2.8rem);
      font-weight: 900;
      color: #F1F5F9;
      margin-bottom: 1rem;
      line-height: 1.15;
    }

    .cta__desc {
      font-size: 1rem;
      color: #94A3B8;
      max-width: 540px;
      margin: 0 auto 2rem;
      line-height: 1.7;
    }

    .cta__actions {
      display: flex;
      gap: 0.75rem;
      justify-content: center;
      flex-wrap: wrap;
    }

    .cta__guidelines {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2rem;
      margin-top: 2.5rem;
      flex-wrap: wrap;
    }
    .cta__guideline {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.8rem;
      color: #64748B;
    }
    .cta__guideline svg { color: var(--teal); flex-shrink: 0; }

    /* ─── Newsletter ─────────────────────────────────────────── */
    .newsletter {
      background: var(--bg-section);
      padding: 3rem 0;
      border-top: 1px solid var(--border-light);
      border-bottom: 1px solid var(--border-light);
    }

    .newsletter__inner {
      display: flex;
      align-items: center;
      gap: 3rem;
    }

    .newsletter__text { flex: 1; }
    .newsletter__title {
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 0.3rem;
    }
    .newsletter__sub {
      font-size: 0.875rem;
      color: var(--text-muted);
    }

    .newsletter__form {
      display: flex;
      gap: 0.5rem;
      flex-shrink: 0;
    }
    .newsletter__input {
      padding: 0.6rem 1rem;
      font-family: var(--font-sans);
      font-size: 0.875rem;
      background: var(--bg-card);
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      color: var(--text);
      width: 260px;
      transition: border-color var(--transition), box-shadow var(--transition);
    }
    .newsletter__input:focus {
      outline: none;
      border-color: var(--teal);
      box-shadow: 0 0 0 3px rgba(13,148,136,0.15);
    }
    .newsletter__input::placeholder { color: var(--text-muted); }

    .newsletter__status {
      margin-top: 0.75rem;
      font-size: 0.82rem;
      color: var(--text-muted);
    }
    .newsletter__status--success { color: #059669; }
    .newsletter__status--error { color: var(--red); }

    /* ─── Footer ─────────────────────────────────────────────── */
    .footer {
      background: #050D1A;
      padding: 4rem 0 2rem;
      color: #64748B;
    }

    .footer__top {
      display: grid;
      grid-template-columns: 260px 1fr 1fr 1fr;
      gap: 3rem;
      padding-bottom: 3rem;
      border-bottom: 1px solid #0F1E35;
    }

    .footer__brand-name {
      display: inline-flex;
      align-items: center;
      margin-bottom: 1rem;
    }

    .footer__brand-name .brand-mark {
      height: 94px;
      filter: brightness(1.2) saturate(1.05) contrast(1.02);
    }

    .footer__about {
      font-size: 0.82rem;
      line-height: 1.65;
      color: #475569;
      margin-bottom: 1.25rem;
    }

    .footer__social {
      display: flex;
      gap: 0.5rem;
    }
    .footer__social-link {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid #1E3A5F;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #64748B;
      transition: color var(--transition), border-color var(--transition), background var(--transition);
    }
    .footer__social-link:hover {
      color: var(--teal);
      border-color: var(--teal);
      background: rgba(13,148,136,0.08);
    }
    .footer__social-link:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

    .footer__col-title {
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #94A3B8;
      margin-bottom: 1rem;
    }

    .footer__links {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    .footer__links a {
      font-size: 0.82rem;
      color: #475569;
      transition: color var(--transition);
    }
    .footer__links a:hover { color: var(--teal); }
    .footer__links a:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 2px; }

    .footer__contact-item {
      display: flex;
      align-items: flex-start;
      gap: 0.5rem;
      font-size: 0.82rem;
      color: #475569;
      margin-bottom: 0.5rem;
    }
    .footer__contact-item svg { flex-shrink: 0; color: var(--teal); margin-top: 1px; }

    .footer__bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 2rem;
      flex-wrap: wrap;
      gap: 0.75rem;
    }
    .footer__copy {
      font-size: 0.78rem;
      color: #334155;
    }
    .footer__copy a { color: var(--teal); transition: color var(--transition); }
    .footer__copy a:hover { color: var(--teal-light); }
    .footer__ref-note {
      font-size: 0.75rem;
      color: #334155;
    }

    /* ─── Scroll Reveal ──────────────────────────────────────── */
    .reveal {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 500ms ease, transform 500ms ease;
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ─── Back to Top ────────────────────────────────────────── */
    .back-top {
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--teal);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 16px rgba(13,148,136,0.4);
      transition: opacity var(--transition), transform var(--transition), background var(--transition);
      z-index: 50;
      opacity: 0;
      transform: translateY(12px);
      pointer-events: none;
    }
    .back-top.visible {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    .back-top:hover { background: var(--teal-light); }
    .back-top:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

    /* ─── Section with sidebar layout ───────────────────────── */
    .with-sidebar {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2.5rem;
      align-items: start;
    }
    /* The class promises a sidebar but only ever declared one column, so the
       aside stacked underneath at full width on every screen size. */
    @media (min-width: 900px) {
      .with-sidebar { grid-template-columns: minmax(0, 1fr) 21rem; gap: 3rem; }
    }

    /* ─── Responsive ─────────────────────────────────────────── */

    /* Between the phone menu (<=768px) and a full desktop bar there is a band
       where the links, search box and Submit button together are wider than
       the viewport. Drop the optional items before the bar can overflow. */
    @media (max-width: 1150px) {
      .nav__search { display: none; }
    }
    @media (max-width: 1000px) {
      .nav__submit { display: none; }
      .nav__links { gap: 0.15rem; }
      .nav__links a { padding-left: 0.5rem; padding-right: 0.5rem; }
    }

    @media (max-width: 1024px) {
      .hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
      .hero__image-wrap { max-width: 540px; }
      .forum__grid { grid-template-columns: 1fr; }
      .spotlight__inner { grid-template-columns: 1fr; gap: 2.5rem; }
      .interview__inner { grid-template-columns: 1fr; }
      .pull-quote { position: static; }
      .footer__top { grid-template-columns: 1fr 1fr; }
    }

    @media (max-width: 768px) {
      .section { padding: 3rem 0; }
      .articles-grid { grid-template-columns: 1fr; }
      .perspectives-grid { grid-template-columns: 1fr; }
      .nav__inner { min-height: 74px; }
      .brand-mark { height: 56px; }
      .nav__brand .brand-mark { height: 56px; }
      .footer__brand-name .brand-mark { height: 72px; }
      .nav__links { display: none; }
      .nav__search { display: none; }
      .nav__submit { display: none; }
      .nav__burger { display: flex; }
      .newsletter__inner { flex-direction: column; gap: 1.5rem; }
      .newsletter__form { width: 100%; }
      .newsletter__input { flex: 1; min-width: 0; }
      .footer__top { grid-template-columns: 1fr; gap: 2rem; }
      .footer__bottom { flex-direction: column; align-items: flex-start; }
      .hero { padding: 3.5rem 0 3rem; }
      .hero__actions { flex-direction: column; }
      .cta { padding: 3.5rem 0; }
      .cta__guidelines { gap: 1rem; }
    }

    @media (max-width: 480px) {
      .container { padding: 0 1rem; }
      .hero__title { font-size: 1.75rem; }
      .articles-grid { grid-template-columns: 1fr; }
    }

    /* ─── Utility ────────────────────────────────────────────── */
    .text-center { text-align: center; }
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0,0,0,0);
      white-space: nowrap;
      border: 0;
    }

    /* Divider */
    .divider {
      border: none;
      border-top: 1px solid var(--border-light);
      margin: 0;
    }

/* ─────────────────────────────────────────────────────────────────────────
   Additions for the PHP site: new page types, forms, cards and utilities.
   The variables above are reused throughout so light and dark both work.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Flash messages ─────────────────────────────────────── */
.flash-stack { padding: 1rem 0 0; }
.flash {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 0.85rem 1rem; margin-bottom: 0.75rem;
  border: 1px solid var(--border); border-left-width: 3px;
  border-radius: var(--radius); background: var(--bg-card);
  font-size: 0.9rem; color: var(--text-body); box-shadow: var(--shadow-sm);
}
.flash--success { border-left-color: var(--teal); }
.flash--error   { border-left-color: var(--red); }
.flash--warning { border-left-color: #D97706; }
.flash--info    { border-left-color: var(--navy-mid); }
.flash a { color: var(--teal); }
.flash__close {
  background: none; border: 0; cursor: pointer; font-size: 1.25rem; line-height: 1;
  color: var(--text-muted); padding: 0;
}
.flash__close:hover { color: var(--text); }

/* ── Page headers ───────────────────────────────────────── */
.page-head { padding: 3rem 0 1.5rem; border-bottom: 1px solid var(--border-light); background: var(--bg-section); }
.page-head__title { font-family: var(--font-serif); font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.15; color: var(--text); margin: 0.5rem 0 0; }
.page-head__meta { color: var(--text-muted); font-size: 0.95rem; margin-top: 0.75rem; }
.page-head--profile { padding-bottom: 2.5rem; }

.profile-head { display: flex; gap: 1.75rem; align-items: center; flex-wrap: wrap; }
.profile-head__avatar { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 3px solid var(--bg-card); box-shadow: var(--shadow-md); }
.profile-head__avatar--initials {
  display: grid; place-items: center; background: var(--navy-mid); color: #fff;
  font-family: var(--font-serif); font-size: 2rem;
}
.profile-head__role { font-size: 1.05rem; color: var(--teal); margin-top: 0.4rem; }
.profile-head__affil { color: var(--text-muted); font-size: 0.9rem; }
.profile-head__links { display: flex; gap: 0.75rem; margin-top: 0.9rem; flex-wrap: wrap; }
.profile-head__links a { font-size: 0.85rem; color: var(--text-body); border-bottom: 1px solid var(--border); }
.profile-head__links a:hover { color: var(--teal); border-color: var(--teal); }

.container.narrow { max-width: 760px; }
.section-lead { color: var(--text-muted); max-width: 62ch; margin-top: 0.5rem; }
.section-cta { margin-top: 2rem; text-align: center; }
.empty-note {
  padding: 2.5rem 1.5rem; text-align: center; color: var(--text-muted);
  background: var(--bg-section); border: 1px dashed var(--border); border-radius: var(--radius-lg);
}
.empty-note a { color: var(--teal); }

/* ── Prose (article bodies and page content) ────────────── */
.prose { font-size: 1.06rem; line-height: 1.8; color: var(--text-body); }
.prose > * + * { margin-top: 1.2em; }
.prose h2 { font-family: var(--font-serif); font-size: 1.6rem; color: var(--text); margin-top: 2.2em; line-height: 1.25; }
.prose h3 { font-family: var(--font-serif); font-size: 1.25rem; color: var(--text); margin-top: 1.8em; }
.prose a { color: var(--teal); border-bottom: 1px solid currentColor; }
/* The global reset strips list markers for nav menus, so editor-written lists
   have to get them back explicitly — otherwise every bulleted list in a page or
   article renders as unmarked indented text. */
.prose ul, .prose ol { padding-left: 1.5em; }
.prose ul { list-style: disc outside; }
.prose ol { list-style: decimal outside; }
.prose ul ul { list-style: circle outside; }
.prose ol ol { list-style: lower-alpha outside; }
.prose li { list-style: inherit; }
.prose li::marker { color: var(--brand); }
.prose li + li { margin-top: 0.5em; }
.prose li > ul, .prose li > ol { margin-top: 0.5em; }
.prose blockquote {
  border-left: 3px solid var(--teal); padding: 0.4em 0 0.4em 1.4em;
  font-family: var(--font-serif); font-size: 1.15rem; font-style: italic; color: var(--text);
}
.prose img { border-radius: var(--radius); }
.prose figure figcaption { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.6em; }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; background: var(--bg-section); padding: 0.15em 0.4em; border-radius: 4px; }
.prose pre { background: var(--bg-section); padding: 1rem; border-radius: var(--radius); overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.prose th, .prose td { border: 1px solid var(--border-light); padding: 0.6rem 0.75rem; text-align: left; }
.prose--sm { font-size: 0.95rem; }

/* ── Single article ─────────────────────────────────────── */
.article-hero { padding: 3rem 0 2rem; background: var(--bg-section); border-bottom: 1px solid var(--border-light); }
.article-hero__inner { max-width: 820px; }
.article-hero__tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.article-hero__title { font-family: var(--font-serif); font-size: clamp(2rem, 4.5vw, 3.1rem); line-height: 1.12; color: var(--text); }
.article-hero__subtitle { font-size: 1.15rem; color: var(--text-muted); margin-top: 0.9rem; line-height: 1.6; }
.article-hero__meta { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; margin-top: 1.5rem; font-size: 0.85rem; color: var(--text-muted); }
.article-hero__author { display: inline-flex; gap: 0.6rem; align-items: center; color: var(--text-body); }
.article-hero__author img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.article-hero__author strong { display: block; font-size: 0.9rem; color: var(--text); }
.article-hero__author em { font-style: normal; font-size: 0.78rem; color: var(--text-muted); }

.article-cover { margin: 0; padding: 2rem 0 0; }
.article-cover img { width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--radius-lg); }
.article-cover figcaption { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.7rem; }

.article-body-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 3.5rem; padding: 3rem 0; align-items: start; }
.article-body { max-width: 72ch; }
.article-aside { position: sticky; top: 90px; display: grid; gap: 1.25rem; }

.article-citation {
  margin-top: 2.5rem; padding: 1.25rem 1.5rem; background: var(--bg-section);
  border-left: 3px solid var(--teal); border-radius: var(--radius); font-size: 0.92rem;
}
.article-citation h2 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin: 0 0 0.6rem; font-family: var(--font-sans); }
.article-citation__ref { font-style: italic; }

.article-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 2.5rem; }
.article-share { display: flex; gap: 1rem; align-items: center; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border-light); font-size: 0.85rem; color: var(--text-muted); }
.article-share a { color: var(--text-body); border-bottom: 1px solid var(--border); }
.article-share a:hover { color: var(--teal); border-color: var(--teal); }

.author-card { padding: 1.5rem; background: var(--bg-section); border-radius: var(--radius-lg); text-align: center; }
.author-card__avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin-bottom: 0.75rem; }
.author-card__name { font-family: var(--font-serif); font-size: 1.05rem; color: var(--text); }
.author-card__creds { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.9rem; }

.aside-box { padding: 1.25rem; background: var(--bg-section); border-radius: var(--radius-lg); font-size: 0.9rem; }
.aside-box__label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 0.6rem; }
.aside-box p + p { margin-top: 0.5rem; }
.aside-box a { color: var(--teal); }
.aside-heading { font-family: var(--font-serif); font-size: 1.05rem; margin-bottom: 1rem; color: var(--text); }

.pull-quote--inline { border-left: 3px solid var(--teal); padding-left: 1.5rem; margin: 2rem 0; }

/* ── Cards: video, resource, member ─────────────────────── */
.videos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.75rem; }
.video-card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); overflow: hidden; transition: var(--transition); }
.video-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.video-card__thumb { position: relative; display: block; aspect-ratio: 16/9; background: var(--bg-section); }
.video-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-card__play {
  position: absolute; inset: 0; margin: auto; width: 48px; height: 48px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(15,31,61,0.82); color: #fff; transition: var(--transition);
}
.video-card:hover .video-card__play { background: var(--teal); transform: scale(1.08); }
.video-card__duration { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,0.78); color: #fff; font-size: 0.72rem; padding: 0.15rem 0.4rem; border-radius: 3px; }
.video-card__body { padding: 1.1rem 1.25rem 1.35rem; }
.video-card__title { font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.35; margin: 0.5rem 0 0.4rem; }
.video-card__title a { color: var(--text); }
.video-card__title a:hover { color: var(--teal); }
.video-card__excerpt { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; }

.video-single { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 3rem; align-items: start; }
.video-single__frame { position: relative; aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; background: #000; }
.video-single__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-single__meta { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: 1.25rem; font-size: 0.85rem; color: var(--text-muted); }
.video-single__title { font-family: var(--font-serif); font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0.6rem 0 1.25rem; color: var(--text); }
.video-single__source { margin-top: 1.5rem; font-size: 0.88rem; }
.video-single__source a { color: var(--teal); }
.video-single__aside { position: sticky; top: 90px; }
.video-mini { display: grid; grid-template-columns: 96px 1fr; gap: 0.75rem; align-items: center; margin-bottom: 1rem; font-size: 0.85rem; color: var(--text-body); line-height: 1.4; }
.video-mini img { width: 96px; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius); }
.video-mini:hover { color: var(--teal); }

.resources-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }
.resource-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center;
  padding: 1.25rem; background: var(--bg-card);
  border: 1px solid var(--border-light); border-radius: var(--radius-lg); transition: var(--transition);
}
.resource-card:hover { border-color: var(--teal); box-shadow: var(--shadow-sm); }
.resource-card__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius); background: var(--bg-section); color: var(--teal); }
.resource-card__cat { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.resource-card__title { font-size: 1rem; line-height: 1.35; margin: 0.2rem 0; }
.resource-card__title a { color: var(--text); }
.resource-card__title a:hover { color: var(--teal); }
.resource-card__desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.55; }
.resource-card__meta { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.4rem; display: flex; gap: 0.4rem; }
.resource-card__action {
  font-size: 0.82rem; font-weight: 700; color: var(--teal);
  padding: 0.45rem 0.9rem; border: 1px solid var(--border); border-radius: var(--radius); white-space: nowrap;
}
.resource-card__action:hover { background: var(--teal); border-color: var(--teal); color: #fff; }
.resource-detail { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; margin-top: 2rem; padding: 1.5rem; background: var(--bg-section); border-radius: var(--radius-lg); }
.resource-detail__facts { display: flex; gap: 2rem; flex-wrap: wrap; margin: 0; }
.resource-detail__facts dt { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.resource-detail__facts dd { margin: 0.2rem 0 0; font-size: 0.95rem; color: var(--text); }

.members-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.75rem; }
.member-card { text-align: center; padding: 1.5rem 1rem; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); transition: var(--transition); }
.member-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.member-card__avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; margin: 0 auto 0.9rem; display: block; }
.member-card__avatar--initials { display: grid; place-items: center; background: var(--navy-mid); color: #fff; font-family: var(--font-serif); font-size: 1.5rem; }
.member-card__name { font-family: var(--font-serif); font-size: 1.05rem; color: var(--text); }
.member-card__link:hover .member-card__name { color: var(--teal); }
.member-card__role { font-size: 0.82rem; color: var(--teal); margin-top: 0.25rem; }
.member-card__affil { font-size: 0.78rem; color: var(--text-muted); }
.member-card__bio { font-size: 0.82rem; color: var(--text-muted); line-height: 1.55; margin-top: 0.7rem; }

/* ── Forms ──────────────────────────────────────────────── */
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 3rem; align-items: start; }
.form-card { padding: 2rem; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); }
.form-aside { display: grid; gap: 1.25rem; position: sticky; top: 90px; }

.field { margin-bottom: 1.25rem; }
.field label { display: block; font-size: 0.85rem; font-weight: 700; color: var(--text); margin-bottom: 0.4rem; }
.field input[type="text"], .field input[type="email"], .field input[type="url"],
.field input[type="password"], .field input[type="search"], .field input[type="number"],
.field input[type="date"], .field input[type="datetime-local"], .field input[type="file"],
.field select, .field textarea {
  width: 100%; padding: 0.6rem 0.75rem; font: inherit; font-size: 0.92rem;
  color: var(--text); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius); transition: var(--transition);
}
.field textarea { resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(13,148,136,0.15);
}
.field input:disabled, .field select:disabled, .field textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.field__hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.35rem; line-height: 1.5; }
.field__hint a { color: var(--teal); }
.field__hint--warn { color: #B45309; }
.field__error { font-size: 0.78rem; color: var(--red); margin-top: 0.35rem; font-weight: 700; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.field__counter { font-size: 0.72rem; color: var(--text-muted); float: right; font-weight: 400; }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.search-form { display: flex; gap: 0.75rem; max-width: 560px; margin-top: 1.25rem; }
.search-form input { flex: 1; padding: 0.7rem 0.9rem; font: inherit; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); color: var(--text); }

.filter-form { margin-bottom: 2rem; }
.filter-form__row { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.filter-form__row input, .filter-form__row select {
  padding: 0.5rem 0.7rem; font: inherit; font-size: 0.88rem; color: var(--text);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
}
.filter-form__row input[type="search"] { flex: 1; min-width: 200px; }

.faq-list { display: grid; gap: 0.75rem; }
.faq { border: 1px solid var(--border-light); border-radius: var(--radius); background: var(--bg-card); }
.faq summary { padding: 0.9rem 1.1rem; cursor: pointer; font-weight: 700; font-size: 0.92rem; color: var(--text); }
.faq summary::marker { color: var(--teal); }
.faq__answer { padding: 0 1.1rem 1.1rem; font-size: 0.9rem; color: var(--text-body); line-height: 1.7; }
.faq-list--compact .faq { border: 0; border-bottom: 1px solid var(--border-light); border-radius: 0; background: none; }

/* ── Pagination ─────────────────────────────────────────── */
.pagination { display: flex; gap: 0.4rem; justify-content: center; align-items: center; margin-top: 3rem; flex-wrap: wrap; }
.pagination__link {
  min-width: 38px; padding: 0.45rem 0.7rem; text-align: center; font-size: 0.85rem;
  color: var(--text-body); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius); transition: var(--transition);
}
.pagination__link:hover { border-color: var(--teal); color: var(--teal); }
.pagination__link--current { background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 700; }
.pagination__gap { color: var(--text-muted); padding: 0 0.2rem; }

/* ── Spotlight media, misc ──────────────────────────────── */
.spotlight__media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.spotlight__source { margin-top: 1.25rem; font-size: 0.85rem; color: var(--text-muted); display: flex; gap: 1rem; flex-wrap: wrap; }
.spotlight__source a { color: var(--teal); }
.btn--sm { padding: 0.4rem 0.85rem; font-size: 0.82rem; }
.btn--block { display: flex; width: 100%; justify-content: center; }
a.filter-btn { display: inline-flex; align-items: center; text-decoration: none; }

.maintenance { min-height: 100vh; display: grid; place-items: center; padding: 2rem; background: var(--bg-section); }
.maintenance__card { max-width: 460px; text-align: center; padding: 3rem 2rem; background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.maintenance__card h1 { font-family: var(--font-serif); font-size: 1.8rem; color: var(--text); margin-bottom: 1rem; }
.maintenance__card p { color: var(--text-muted); line-height: 1.7; margin-bottom: 1.5rem; }

@media (max-width: 900px) {
  .article-body-wrap, .form-layout, .video-single { grid-template-columns: 1fr; gap: 2rem; }
  .article-aside, .form-aside, .video-single__aside { position: static; }
  .field-row { grid-template-columns: 1fr; }
}

/* Wordmark fallback when no logo image has been uploaded */
.brand-word {
  font-family: var(--font-serif); font-size: 1.35rem; font-weight: 700;
  letter-spacing: -0.01em; color: var(--text); white-space: nowrap;
}
.brand-word--light { color: #fff; }
[data-theme="dark"] .brand-word--light { color: var(--text); }

/* ═══════════════════════════════════════════════════════════════════════════
   FORUM REDESIGN — components that carry the page without photography.
   Graphics, counters and typography do the work; photo slots are optional.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared ─────────────────────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--brand);
}
.eyebrow::before {
  content: ''; width: 24px; height: 2px; background: var(--accent); border-radius: 2px;
}
.section-title {
  font-family: var(--font-serif); font-weight: 700; color: var(--text);
  font-size: clamp(1.75rem, 3.4vw, 2.6rem); line-height: 1.14;
  letter-spacing: -0.02em; margin: 0.6rem 0 0.75rem;
}
.section-lead {
  font-size: 1.02rem; line-height: 1.75; color: var(--text-body); max-width: 62ch;
}
.section-head { margin-bottom: 2.5rem; }
.section-head--center { text-align: center; }
.section-head--center .section-lead { margin-inline: auto; }
.section-head--center .eyebrow::before { display: none; }

/* ── Forum hero ─────────────────────────────────────────────────────────── */
.fhero {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(150deg, #00265F 0%, var(--brand-deep) 45%, #0A4FB5 100%);
  padding: clamp(2.25rem, 4.5vw, 3.75rem) 0 0;
}
/* The headline block sits above the drifting circles, never behind them. */
.fhero .container { position: relative; z-index: 2; }
.fhero__glow {
  position: absolute; inset: -30% -10% auto auto; width: 60vw; height: 60vw;
  background: radial-gradient(circle, rgba(46,123,224,0.45), transparent 62%);
  filter: blur(10px); z-index: -1; pointer-events: none;
}
.fhero__grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
/* The two columns are never the same height. Centring the shorter one splits
   the slack evenly instead of leaving a hole in one corner. */
.fhero__grid:has(.hero-side) { align-items: center; }
.fhero__badge {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22);
  color: #fff; padding: 0.42rem 0.9rem; border-radius: 999px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.fhero__badge .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 rgba(237,28,36,0.7); animation: pulseDot 2.4s infinite;
}
@keyframes pulseDot {
  70%  { box-shadow: 0 0 0 9px rgba(237,28,36,0); }
  100% { box-shadow: 0 0 0 0 rgba(237,28,36,0); }
}
.fhero__title {
  font-family: var(--font-serif); color: #fff; font-weight: 700;
  font-size: clamp(2.1rem, 5.2vw, 3.9rem); line-height: 1.06;
  letter-spacing: -0.025em; margin: 1.1rem 0 0.9rem;
}
.fhero__title em { font-style: italic; color: #9FC6FF; }
.fhero__lead {
  color: #C9DCF7; font-size: clamp(1rem, 1.5vw, 1.14rem); line-height: 1.7; max-width: 54ch;
}
.fhero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.9rem; }
.fhero__meta {
  display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 2.4rem;
  padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,0.16);
}
.fhero__meta-item { color: #A8C6EC; font-size: 0.82rem; }
.fhero__meta-item strong { display: block; color: #fff; font-size: 1.05rem; font-weight: 700; margin-bottom: 0.15rem; }

/* Countdown */
.countdown { display: flex; gap: 0.6rem; margin-top: 1.6rem; }
.countdown__unit {
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius); padding: 0.7rem 0.9rem; min-width: 72px; text-align: center;
  backdrop-filter: blur(6px);
}
.countdown__num {
  display: block; font-family: var(--font-serif); font-size: 1.9rem;
  font-weight: 700; color: #fff; line-height: 1; font-variant-numeric: tabular-nums;
}
.countdown__label {
  font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: #9FC0E8;
  margin-top: 0.3rem; display: block;
}

/* ── The two parts ──────────────────────────────────────────────────────── */
.parts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.part-card {
  position: relative; overflow: hidden; background: var(--bg-card);
  border: 1px solid var(--border-light); border-radius: var(--radius-lg);
  padding: 2.2rem 2rem; transition: transform var(--transition), box-shadow var(--transition);
}
.part-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--brand), var(--brand-lite));
}
.part-card--journal::before { background: linear-gradient(90deg, var(--accent), #FF7A80); }
.part-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.part-card__icon {
  width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(0,74,173,0.08); color: var(--brand); margin-bottom: 1.1rem;
}
.part-card--journal .part-card__icon { background: rgba(237,28,36,0.08); color: var(--accent); }
.part-card__n {
  position: absolute; top: 1.4rem; right: 1.6rem;
  font-family: var(--font-serif); font-size: 3.4rem; font-weight: 700;
  color: var(--border-light); line-height: 1; user-select: none;
}
.part-card__title { font-family: var(--font-serif); font-size: 1.45rem; font-weight: 700; color: var(--text); margin-bottom: 0.6rem; }
.part-card__text { color: var(--text-body); line-height: 1.7; font-size: 0.95rem; }
.part-card__link {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.2rem;
  font-weight: 700; font-size: 0.88rem; color: var(--brand); text-decoration: none;
}
.part-card__link:hover { gap: 0.7rem; }
.part-card--journal .part-card__link { color: var(--accent); }

/* ── Impact counters ────────────────────────────────────────────────────── */
.impact {
  background: linear-gradient(135deg, var(--brand-deep), var(--brand) 60%, #0A57C0);
  color: #fff; border-radius: var(--radius-xl); padding: clamp(2rem, 4vw, 3rem);
  position: relative; overflow: hidden;
}
.impact::after {
  content: ''; position: absolute; right: -60px; bottom: -60px; width: 260px; height: 260px;
  border-radius: 50%; background: rgba(255,255,255,0.06);
}
.impact__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.6rem; position: relative;
}
.impact__stat { text-align: center; }
.impact__value {
  font-family: var(--font-serif); font-size: clamp(2.1rem, 4.6vw, 3.1rem);
  font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.impact__label {
  margin-top: 0.5rem; font-size: 0.76rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: #B9D3F2;
}

/* ── Timeline ───────────────────────────────────────────────────────────── */
.timeline { position: relative; display: grid; gap: 0; }
.timeline::before {
  content: ''; position: absolute; left: 21px; top: 12px; bottom: 12px; width: 2px;
  background: linear-gradient(180deg, var(--brand), var(--accent));
  opacity: 0.28;
}
.tl-step { position: relative; padding: 0 0 2rem 4rem; }
.tl-step:last-child { padding-bottom: 0; }
.tl-step__dot {
  position: absolute; left: 8px; top: 2px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--brand); color: var(--brand);
  display: grid; place-items: center; font-size: 0.78rem; font-weight: 700;
  box-shadow: 0 0 0 5px var(--bg);
}
.tl-step:last-child .tl-step__dot { border-color: var(--accent); color: var(--accent); }
.tl-step__title { font-weight: 700; color: var(--text); margin-bottom: 0.3rem; font-size: 1.02rem; }
.tl-step__text { color: var(--text-body); font-size: 0.93rem; line-height: 1.65; }

/* ── Achievement cards ──────────────────────────────────────────────────── */
.awards-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 1.2rem;
}
.award-card {
  position: relative; background: var(--bg-card); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); padding: 1.5rem 1.4rem 1.3rem;
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex; flex-direction: column; gap: 0.55rem;
}
.award-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* In the flow as a header row: absolute positioning let long team names run
   underneath the label. */
.award-card__head { display: flex; align-items: center; gap: 0.6rem; }
.award-card__tier {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.07em;
  text-transform: uppercase; padding: 0.26rem 0.62rem; border-radius: 999px;
}
.award-card__tier--gold    { color: #8A6400; background: rgba(227,179,65,0.18); }
.award-card__tier--silver  { color: #59616D; background: rgba(138,148,163,0.20); }
.award-card__tier--bronze  { color: #8A4B24; background: rgba(205,139,93,0.20); }
.award-card__tier--commend { color: var(--brand); background: rgba(0,74,173,0.10); }
.award-card__name { font-weight: 700; color: var(--text); font-size: 1.02rem; }
.award-card__school { font-size: 0.8rem; color: var(--text-muted); }
.award-card__project {
  font-size: 0.9rem; color: var(--text-body); line-height: 1.55;
  border-top: 1px solid var(--border-light); padding-top: 0.7rem; margin-top: 0.2rem;
}
.award-card__project a { color: inherit; text-decoration: none; }
.award-card__project a:hover { color: var(--brand); text-decoration: underline; }

/* ── Edition cards ──────────────────────────────────────────────────────── */
.editions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 1.2rem; }
.edition-card {
  display: block; text-decoration: none; background: var(--bg-card);
  border: 1px solid var(--border-light); border-radius: var(--radius-lg);
  padding: 1.5rem; transition: transform var(--transition), box-shadow var(--transition);
}
.edition-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand); }
.edition-card__year {
  font-family: var(--font-serif); font-size: 2.2rem; font-weight: 700;
  color: var(--brand); line-height: 1;
}
.edition-card__theme { color: var(--text); font-weight: 700; margin: 0.5rem 0 0.4rem; }
.edition-card__meta { font-size: 0.82rem; color: var(--text-muted); }
.edition-card__stats { display: flex; gap: 1.1rem; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--border-light); }
.edition-card__stat { font-size: 0.78rem; color: var(--text-muted); }
.edition-card__stat strong { display: block; color: var(--text); font-size: 1.05rem; }

/* ── Status pill ────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.28rem 0.7rem;
  border-radius: 999px; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.pill--open    { background: rgba(0,74,173,0.1);  color: var(--brand); }
.pill--past    { background: var(--bg-section);   color: var(--text-muted); }
.pill--running { background: rgba(237,28,36,0.1); color: var(--accent); }

/* ── FAQ accordion ──────────────────────────────────────────────────────── */
.faq-list { display: grid; gap: 0.7rem; }
.faq-item {
  background: var(--bg-card); border: 1px solid var(--border-light);
  border-radius: var(--radius); overflow: hidden;
}
.faq-item summary {
  cursor: pointer; padding: 1rem 1.2rem; font-weight: 700; color: var(--text);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  list-style: none; font-size: 0.97rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; font-size: 1.3rem; color: var(--brand); font-weight: 400;
  transition: transform var(--transition); flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item__body { padding: 0 1.2rem 1.1rem; color: var(--text-body); line-height: 1.7; font-size: 0.94rem; }
.faq-item summary:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .fhero__grid { grid-template-columns: 1fr; }
  .parts { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .countdown__unit { min-width: 60px; padding: 0.55rem 0.6rem; }
  .countdown__num { font-size: 1.5rem; }
  .tl-step { padding-left: 3.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fhero__badge .dot { animation: none; }
}

/* ── Award placings ─────────────────────────────────────────────────────── */
.award-card__award {
  font-size: 0.82rem; color: var(--text-muted); font-weight: 600;
  margin-top: -0.2rem;
}
[data-theme="dark"] [data-theme="dark"] [data-theme="dark"] 
/* ── The countdown, carrying the hero on its own ────────────────────────────
   With the two cards gone this is the whole right column, so it is sized and
   spaced to hold that weight rather than sit as a footnote. */
.hero-side { display: grid; align-content: center; }

.countdown-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, rgba(3,28,76,0.90), rgba(0,58,146,0.78));
  border: 1px solid rgba(255,255,255,0.24); border-radius: var(--radius-xl);
  padding: 2.1rem 2.2rem 1.9rem;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 30px 70px rgba(0,14,44,0.42);
}
.countdown-hero::after {
  content: ''; position: absolute; right: -90px; top: -110px; width: 280px; height: 280px;
  border-radius: 50%; background: rgba(255,255,255,0.05); pointer-events: none;
}

.countdown-hero__eyebrow {
  display: flex; align-items: center; gap: 0.55rem; position: relative;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.19em;
  text-transform: uppercase; color: #DCEAFB; margin-bottom: 1.6rem;
}
.countdown-hero__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 rgba(237,28,36,0.65); animation: pulseDot 2.4s infinite; flex-shrink: 0;
}

.countdown-hero__units {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0.3rem; align-items: end;
}
.countdown-hero__unit { position: relative; text-align: center; padding: 0 0.2rem; }
/* Hairline separators instead of boxes — lighter, and lets the numerals lead. */
.countdown-hero__unit + .countdown-hero__unit::before {
  content: ''; position: absolute; left: 0; top: 12%; bottom: 26%;
  width: 1px; background: rgba(255,255,255,0.16);
}
.countdown-hero__num {
  display: block; font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(2.4rem, 4.4vw, 3.5rem); line-height: 0.95; color: #fff;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.countdown-hero__num[data-unit="seconds"] { color: #9EC6FF; }
.countdown-hero__cap {
  display: block; margin-top: 0.6rem; font-size: 0.57rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: #A9C4E6;
}

.countdown-hero__foot {
  position: relative; margin-top: 1.75rem; padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.16);
}
.countdown-hero__date {
  font-family: var(--font-serif); font-size: 1.12rem; font-weight: 700;
  color: #fff; letter-spacing: -0.01em;
}
.countdown-hero__where {
  margin-top: 0.3rem; font-size: 0.83rem; color: #A9C4E6;
}

@media (max-width: 900px) { .countdown-hero { margin-top: 2rem; } }
@media (max-width: 560px) {
  .countdown-hero { padding: 1.5rem 1.4rem 1.35rem; }
  .countdown-hero__num { font-size: 2rem; }
  .countdown-hero__cap { font-size: 0.52rem; letter-spacing: 0.1em; }
}

/* ── Abstract hero motion: drifting circles, sliding lines, breathing dots ──
   Decorative only. Transform/opacity animations, so it stays off the main
   thread and costs nothing to composite. */
.hero-motion {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
}
.hero-motion svg { width: 100%; height: 100%; display: block; }

.hm-drift { transform-box: fill-box; transform-origin: center; will-change: transform; }
.hm-drift--a { animation: hmFloat 26s ease-in-out infinite; }
.hm-drift--b { animation: hmFloat 34s ease-in-out infinite reverse; }
.hm-drift--c { animation: hmFloatWide 38s ease-in-out infinite; }
.hm-drift--d { animation: hmFloat 30s ease-in-out infinite 3s; }
.hm-drift--e { animation: hmFloatWide 44s ease-in-out infinite reverse; }
.hm-drift--f { animation: hmFloat 22s ease-in-out infinite 1.5s; }

@keyframes hmFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(26px, -22px) scale(1.05); }
}
@keyframes hmFloatWide {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-38px, 26px) scale(0.95); }
}

.hm-slide { will-change: transform; }
.hm-slide--1 { animation: hmSweep 19s linear infinite; }
.hm-slide--2 { animation: hmSweep 26s linear infinite 4s; }
.hm-slide--3 { animation: hmSweep 22s linear infinite 9s; }
.hm-slide--4 { animation: hmSweep 31s linear infinite 2s; }
@keyframes hmSweep {
  from { transform: translateX(0); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  to   { transform: translateX(1640px); opacity: 0; }
}

.hm-pulse { transform-box: fill-box; transform-origin: center; }
.hm-pulse--1 { animation: hmBreathe 7s ease-in-out infinite; }
.hm-pulse--2 { animation: hmBreathe 9s ease-in-out infinite 2s; }
.hm-pulse--3 { animation: hmBreathe 6s ease-in-out infinite 4s; }
.hm-pulse--4 { animation: hmBreathe 11s ease-in-out infinite 1s; }
@keyframes hmBreathe {
  0%, 100% { transform: scale(1);   opacity: 0.35; }
  50%      { transform: scale(1.9); opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-drift, .hm-slide, .hm-pulse { animation: none; }
  .hm-slide { opacity: 0.7; }
}

[data-theme="dark"] .award-card__tier--gold   { color: #E3B341; }
[data-theme="dark"] .award-card__tier--silver { color: #C7CDD6; }
[data-theme="dark"] .award-card__tier--bronze { color: #CD8B5D; }

/* ── Team entries on the award card ─────────────────────────────────────── */
.award-card__people { display: grid; gap: 0.18rem; }
.award-card__team {
  display: inline-block; margin-top: 0.25rem; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
}
.award-card__name { line-height: 1.35; }

/* ── Forum "at a glance" panel ──────────────────────────────────────────────
   Replaces the decorative ECG in the forum hero with the facts a visitor is
   actually looking for: when it is, where, and how big it has become. */
.facts-panel {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, rgba(2,26,72,0.88), rgba(0,54,138,0.80));
  border: 1px solid rgba(255,255,255,0.22); border-radius: var(--radius-lg);
  padding: 1.6rem 1.7rem 1.5rem;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 20px 50px rgba(0,16,50,0.34);
}
.facts-panel::after {
  content: ''; position: absolute; right: -70px; top: -70px; width: 210px; height: 210px;
  border-radius: 50%; background: rgba(255,255,255,0.05);
}
.facts-panel__title {
  position: relative; font-family: var(--font-serif); font-size: 1.15rem; font-weight: 700;
  color: #fff; margin-bottom: 1.1rem; letter-spacing: -0.01em;
}
.facts-panel__list { position: relative; display: grid; gap: 0; margin: 0; }
.facts-panel__row {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.75rem; align-items: baseline;
  padding: 0.6rem 0; border-top: 1px solid rgba(255,255,255,0.12);
}
.facts-panel__row:first-child { border-top: 0; padding-top: 0; }
.facts-panel__row dt {
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.13em;
  text-transform: uppercase; color: #9FC0E8;
}
.facts-panel__row dd { margin: 0; color: #fff; font-size: 0.94rem; font-weight: 600; line-height: 1.4; }
.facts-panel__stats {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem;
  margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,0.16);
}
.facts-panel__stat {
  text-align: center; background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; padding: 0.65rem 0.3rem 0.55rem;
}
.facts-panel__value {
  display: block; font-family: var(--font-serif); font-size: 1.55rem; font-weight: 700;
  color: #fff; line-height: 1; font-variant-numeric: tabular-nums;
}
.facts-panel__label {
  display: block; margin-top: 0.35rem; font-size: 0.55rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: #A9C4E6;
}
@media (max-width: 560px) {
  .facts-panel__row { grid-template-columns: 1fr; gap: 0.15rem; }
  .facts-panel { padding: 1.3rem 1.35rem; }
}

/* ── Styles for classes introduced in the newer partials ────────────────────
   These were referenced in markup but never defined, so they had been falling
   back to inherited defaults. */
.article-card__excerpt {
  color: var(--text-body); font-size: 0.92rem; line-height: 1.65; margin-top: 0.5rem;
}
.article-card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem;
  margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--border-light);
  font-size: 0.79rem; color: var(--text-muted);
}
.article-card__meta-dot { opacity: 0.55; }

.article-single { max-width: 760px; margin-inline: auto; }
.article-single > * + * { margin-top: 1.1rem; }

.page-hero { color: #fff; }
.page-hero .fhero__title { margin-top: 0.9rem; }

.empty-state {
  text-align: center; padding: 3rem 1.5rem; color: var(--text-muted);
  background: var(--bg-card); border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}
.empty-state h2 {
  font-family: var(--font-serif); font-size: 1.25rem; color: var(--text); margin-bottom: 0.5rem;
}
.empty-state p { font-size: 0.94rem; }

.footer__legal { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.footer__legal a { color: inherit; text-decoration: none; }
.footer__legal a:hover { text-decoration: underline; }

.resource-card__body { display: grid; gap: 0.4rem; }

/* Full-width variants used on the standalone listing pages */
.videos-grid--full,
.resources-grid--full { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* A note beside the submission form, distinct from the guidance box */
.aside-box--note {
  background: rgba(0,74,173,0.06); border-left: 4px solid var(--brand);
}
.aside-box--note p + p { margin-top: 0.6rem; }

/* ── Forum day: running order ───────────────────────────────────────────── */
.runsheet { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.runsheet__item {
  display: grid; grid-template-columns: 6.5rem 1fr; gap: 1.2rem;
  padding: 1.05rem 0; border-top: 1px solid var(--border-light); position: relative;
}
.runsheet__item:first-child { border-top: 0; }
.runsheet__time { text-align: right; padding-top: 0.1rem; }
.runsheet__time strong {
  display: block; font-family: var(--font-serif); font-size: 1.05rem;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.runsheet__time span { font-size: 0.78rem; color: var(--text-muted); }
.runsheet__body { border-left: 3px solid var(--brand); padding-left: 1.1rem; }
.runsheet__item--break    .runsheet__body { border-left-color: var(--border); }
.runsheet__item--ceremony .runsheet__body { border-left-color: var(--accent); }
.runsheet__item--talk     .runsheet__body { border-left-color: var(--brand-lite); }
.runsheet__title { font-weight: 700; color: var(--text); font-size: 1.02rem; }
.runsheet__desc { color: var(--text-body); font-size: 0.9rem; line-height: 1.6; margin-top: 0.25rem; }
.runsheet__where {
  display: inline-block; margin-top: 0.45rem; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
  background: var(--bg-section); padding: 0.2rem 0.5rem; border-radius: 999px;
}

/* ── Forum day: judging panel ───────────────────────────────────────────── */
.judges__heading {
  font-family: var(--font-serif); font-size: 1.15rem; color: var(--text); margin-bottom: 1rem;
}
.judges { display: grid; gap: 1.1rem; }
.judge { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start; }
.judge__face {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--brand), var(--brand-lite));
  color: #fff; font-weight: 700; font-size: 0.92rem; overflow: hidden; flex-shrink: 0;
}
.judge__face img { width: 100%; height: 100%; object-fit: cover; }
.judge__name { font-weight: 700; color: var(--text); line-height: 1.3; }
.judge__role { font-size: 0.85rem; color: var(--brand); font-weight: 600; }
.judge__org  { font-size: 0.8rem; color: var(--text-muted); }
.judge__bio  { font-size: 0.85rem; color: var(--text-body); line-height: 1.55; margin-top: 0.35rem; }

@media (max-width: 560px) {
  .runsheet__item { grid-template-columns: 4.6rem 1fr; gap: 0.8rem; }
  .runsheet__time strong { font-size: 0.92rem; }
}

/* ── Judge photo field in the admin ─────────────────────────────────────── */
.judge-photo-field { display: flex; align-items: flex-start; gap: 0.75rem; }
.judge-photo-field__preview {
  width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: var(--bg-section); border: 1px solid var(--border-light);
  display: grid; place-items: center;
}
.judge-photo-field__preview img { width: 100%; height: 100%; object-fit: cover; }
.judge-photo-field__empty { color: var(--text-muted); font-size: 1.1rem; }
.judge-photo-field__controls { flex: 1; min-width: 0; display: grid; gap: 0.35rem; }
.judge-photo-field__controls input[type="file"] { font-size: 0.85rem; }
.check--mini { font-size: 0.78rem; color: var(--text-muted); }