/* Extracted from reference/index.html — keep in sync when reference UI changes. */

:root {
      --ink: #15202b;
      --ink-2: #243241;
      --muted: #607080;
      --line: #d8dedc;
      --line-strong: #c4cecc;
      --paper: #f5f7f6;
      --paper-2: #eef3f1;
      --surface: #ffffff;
      --surface-soft: #f9fbfa;
      --blue: #1f5f8b;
      --blue-strong: #17435f;
      --green: #0f766e;
      --green-soft: #e5f3ef;
      --gold: #b7791f;
      --gold-soft: #fbf1dc;
      --plum: #55417a;
      --sky-soft: #e7f1f7;
      --steel: #314458;
      --red: #9b2c2c;
      --shadow: 0 16px 34px rgba(17, 29, 42, 0.08);
      --shadow-soft: 0 8px 22px rgba(17, 29, 42, 0.06);
      --shadow-lg: 0 30px 70px rgba(17, 29, 42, 0.14);
      --radius: 8px;
      --content: 1480px;
      --font-sans: "Segoe UI", "Aptos", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
      --font-serif: Georgia, "Times New Roman", serif;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      min-height: 100vh;
      color: var(--ink);
      font-family: var(--font-sans);
      background:
        linear-gradient(90deg, rgba(31,95,139,0.045) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, rgba(31,95,139,0.04) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, rgba(255,255,255,0.92), rgba(245,247,246,0.98) 320px),
        var(--paper);
      background-size: 48px 48px, 48px 48px, auto, auto;
      letter-spacing: 0;
    }

    body,
    button,
    input,
    textarea {
      font: 15px/1.55 var(--font-sans);
      letter-spacing: 0;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button,
    input,
    textarea {
      border: 0;
      color: inherit;
    }

    button {
      padding: 0;
      background: none;
      cursor: pointer;
    }

    img {
      display: block;
      max-width: 100%;
    }

    h1,
    h2,
    h3,
    h4,
    p,
    ul,
    figure {
      margin: 0;
    }

    ul {
      padding: 0;
      list-style: none;
    }

    :focus-visible {
      outline: 3px solid rgba(31, 95, 139, 0.28);
      outline-offset: 3px;
    }

    .skip-link {
      position: absolute;
      left: 20px;
      top: -48px;
      z-index: 20;
      padding: 10px 14px;
      border-radius: 6px;
      background: var(--ink);
      color: white;
      transition: top 160ms ease;
    }

    .skip-link:focus {
      top: 16px;
    }

    .site {
      width: min(var(--content), calc(100% - 32px));
      margin: 0 auto;
      padding: 18px 0 32px;
    }

    .top-strip {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 10px 0 14px;
      color: var(--muted);
      font-size: 13px;
    }

    .top-strip__group,
    .inline-list,
    .meta-row,
    .chip-row,
    .button-row,
    .footer-links,
    .social-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
    }

    .top-strip a {
      color: var(--blue-strong);
      font-weight: 650;
    }

    .site-header {
      position: relative;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background:
        linear-gradient(135deg, rgba(255,255,255,0.98), rgba(249,251,250,0.94)),
        var(--surface);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .site-header::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 4px;
      background: linear-gradient(90deg, var(--blue-strong), var(--green), var(--gold), var(--plum));
    }

    .masthead {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 22px;
      align-items: center;
      padding: 26px 28px 24px;
      border-bottom: 1px solid var(--line);
      background:
        linear-gradient(120deg, rgba(31,95,139,0.08), transparent 42%),
        linear-gradient(270deg, rgba(15,118,110,0.07), transparent 34%);
    }

    .brand {
      display: flex;
      gap: 16px;
      align-items: center;
      min-width: 0;
    }

    .brand-mark {
      flex: 0 0 128px;
      width: 128px;
      height: 74px;
      display: block;
      object-fit: contain;
      object-position: left center;
      padding: 8px 10px;
      border-radius: 10px;
      background: #ffffff;
      border: 1px solid rgba(188, 201, 213, 0.9);
      box-shadow: 0 10px 22px rgba(16, 20, 24, 0.06);
    }

    .brand-kicker,
    .section-kicker,
    .card-kicker,
    .small-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--blue-strong);
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0;
    }

    .section-kicker::before,
    .card-kicker::before,
    .small-label::before {
      content: "";
      width: 18px;
      height: 2px;
      border-radius: 999px;
      background: currentColor;
      opacity: 0.45;
    }

    .brand h1 {
      margin-top: 2px;
      color: var(--ink);
      font-family: var(--font-serif);
      font-size: clamp(30px, 4vw, 48px);
      line-height: 1.04;
      font-weight: 700;
    }

    .brand p {
      max-width: 780px;
      margin-top: 8px;
      color: var(--muted);
      font-size: 16px;
    }

    .header-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 10px;
    }

    .primary-btn,
    .secondary-btn,
    .text-link,
    .download-btn {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 40px;
      padding: 9px 14px;
      border-radius: 6px;
      font-size: var(--type-button);
      font-weight: 750;
      transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
    }

    .primary-btn {
      background:
        linear-gradient(135deg, var(--blue-strong), var(--green));
      color: white;
      box-shadow: 0 12px 24px rgba(23, 67, 95, 0.2);
    }

    .secondary-btn {
      border: 1px solid var(--line-strong);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(249,251,250,0.92));
      color: var(--ink);
    }

    .download-btn {
      min-height: 34px;
      padding: 7px 10px;
      border: 1px solid var(--line);
      background: var(--surface-soft);
      color: var(--blue-strong);
      font-size: calc(var(--type-button) - 2px);
    }

    .text-link {
      min-height: auto;
      padding: 0;
      color: var(--blue-strong);
    }

    .text-link::after {
      content: "";
      width: 18px;
      height: 1px;
      background: currentColor;
      transform-origin: left;
      transition: transform 160ms ease;
    }

    .primary-btn:hover,
    .primary-btn:focus-visible,
    .secondary-btn:hover,
    .secondary-btn:focus-visible,
    .download-btn:hover,
    .download-btn:focus-visible {
      transform: translateY(-1px);
      box-shadow: var(--shadow-soft);
    }

    .text-link:hover::after,
    .text-link:focus-visible::after {
      transform: scaleX(1.6);
    }

    .site-nav {
      display: flex;
      overflow-x: auto;
      gap: 0;
      padding: 4px 8px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.78), rgba(238,243,241,0.58));
      scrollbar-width: thin;
    }

    .site-nav button,
    .site-nav a {
      position: relative;
      flex: 0 0 auto;
      min-height: 50px;
      padding: 0 12px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 760;
      white-space: nowrap;
    }

    .site-nav button::after,
    .site-nav a::after {
      content: "";
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 0;
      height: 3px;
      background: transparent;
      border-radius: 999px 999px 0 0;
    }

    .site-nav button:hover,
    .site-nav button:focus-visible,
    .site-nav button.active,
    .site-nav a:hover,
    .site-nav a:focus-visible {
      color: var(--ink);
    }

    .site-nav button.active::after {
      background: var(--green);
    }

    .workbench {
      display: grid;
      grid-template-columns: 320px minmax(0, 1fr) 340px;
      gap: 18px;
      align-items: start;
      margin-top: 18px;
    }

    .side-nav,
    .event-rail {
      position: sticky;
      top: 16px;
      align-self: start;
    }

    .side-nav {
      display: grid;
      gap: 12px;
    }

    .workbench-sidebar {
      display: grid;
      gap: 18px;
      position: sticky;
      top: 16px;
      align-self: start;
    }

    .home-shell {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 18px;
      align-items: start;
    }

    .home-main-stack,
    .home-sidebar {
      display: grid;
      gap: 18px;
    }

    .home-sidebar {
      position: sticky;
      top: 16px;
      align-self: start;
    }

    .home-side-box {
      display: grid;
      gap: 14px;
      padding: 18px;
    }

    .home-guide {
      display: grid;
      gap: 10px;
      padding: 22px;
    }

    .home-guide h3 {
      font-size: 24px;
      line-height: 1.2;
    }

    .home-guide p {
      color: var(--muted);
      line-height: 1.6;
    }

    .event-rail {
      display: none;
    }

    .side-box,
    .rail-box {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.94), rgba(249,251,250,0.88)),
        var(--surface);
      box-shadow: var(--shadow-soft);
    }

    .side-box {
      position: relative;
      overflow: hidden;
      padding: 14px;
    }

    .side-box::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 3px;
      background: linear-gradient(90deg, var(--blue), var(--green));
    }

    .side-title {
      margin-bottom: 10px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
    }

    .section-button {
      display: grid;
      width: 100%;
      gap: 4px;
      position: relative;
      padding: 12px 12px;
      border: 1px solid transparent;
      border-radius: 8px;
      color: var(--muted);
      text-align: left;
      transition: background 160ms ease, color 160ms ease, transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
    }

    .section-button::before {
      display: none;
    }

    .section-button strong {
      color: var(--ink);
      font-size: 18px;
      line-height: 1.18;
    }

    .section-button span {
      font-size: 14px;
      line-height: 1.45;
    }

    .brand-link {
      width: 100%;
      border-radius: 8px;
      text-align: left;
      transition: none;
    }

    .brand-link:hover,
    .brand-link:focus-visible {
      transform: none;
      box-shadow: none;
      background: transparent;
    }

    .section-button:hover,
    .section-button:focus-visible {
      background: rgba(15, 118, 110, 0.08);
      border-color: rgba(15, 118, 110, 0.26);
      color: var(--ink);
      transform: translateX(1px);
    }

    .section-button.active {
      background: rgba(15, 118, 110, 0.14);
      border-color: rgba(15, 118, 110, 0.5);
      color: var(--ink);
      box-shadow: inset 0 0 0 2px rgba(15, 118, 110, 0.18);
      transform: translateX(1px);
    }

    .side-note {
      color: var(--muted);
      font-size: 13px;
    }

    .main {
      min-width: 0;
    }

    .screen {
      display: none;
    }

    .screen.active {
      display: grid;
      gap: 18px;
      animation: screenIn 260ms ease both;
    }

    @keyframes screenIn {
      from {
        opacity: 0;
        transform: translateY(8px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .page-band {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background:
        linear-gradient(135deg, rgba(255,255,255,0.98), rgba(231,241,247,0.58) 55%, rgba(229,243,239,0.7)),
        var(--surface);
      box-shadow: var(--shadow);
    }

    .page-band::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 6px;
      background: linear-gradient(180deg, var(--blue-strong), var(--green), var(--gold));
    }

    .page-band::after {
      content: "";
      position: absolute;
      right: 22px;
      top: 22px;
      width: 132px;
      height: 132px;
      border: 1px solid rgba(31,95,139,0.12);
      border-radius: 50%;
      opacity: 0.8;
    }

    .page-intro {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 12px;
      padding: 28px 30px;
    }

.page-intro h2,
.hero-copy h2 {
  max-width: 880px;
  font-family: var(--font-serif);
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.08;
  font-weight: 700;
}

#screen-governance .page-intro h2 {
  font-size: clamp(24px, 3vw, 38px);
}

    .page-intro p,
    .hero-copy p,
    .lead-text {
      max-width: 860px;
      color: var(--muted);
      font-size: 17px;
    }

    .hero {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
      gap: 0;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background:
        linear-gradient(135deg, rgba(255,255,255,0.98), rgba(231,241,247,0.42)),
        var(--surface);
      box-shadow: var(--shadow-lg);
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 5px;
      background: linear-gradient(90deg, var(--blue-strong), var(--green), var(--gold));
    }

    .hero-copy {
      display: grid;
      align-content: center;
      gap: 16px;
      padding: clamp(24px, 4vw, 42px);
      border-right: 1px solid var(--line);
      background:
        linear-gradient(120deg, rgba(255,255,255,0.66), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,0.9), rgba(249,251,250,0.82));
    }

    .hero-visual {
      min-height: 360px;
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(135deg, rgba(23,67,95,0.94), rgba(15,118,110,0.88) 62%, rgba(183,121,31,0.7)),
        linear-gradient(45deg, #dfe9ee 0 25%, transparent 25% 50%, #dfe9ee 50% 75%, transparent 75%);
    }

    .hero-visual::before {
      content: "";
      position: absolute;
      inset: 30px;
      border: 1px solid rgba(255,255,255,0.28);
      background:
        linear-gradient(90deg, rgba(255,255,255,0.16) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, rgba(255,255,255,0.14) 0 1px, transparent 1px 100%);
      background-size: 44px 44px;
    }

    .hero-visual::after {
      content: "LEX";
      position: absolute;
      right: 28px;
      bottom: 22px;
      color: rgba(255,255,255,0.84);
      font-family: var(--font-serif);
      font-size: 82px;
      font-weight: 700;
    }

    .hero-caption {
      position: absolute;
      left: 28px;
      bottom: 28px;
      max-width: 260px;
      padding: 12px;
      border-radius: 6px;
      background: rgba(255,255,255,0.92);
      color: var(--ink);
      font-size: 13px;
      font-weight: 700;
    }

    .grid-1,
    .grid-2,
    .grid-3,
    .grid-4,
    .news-layout,
    .docs-layout,
    .contact-layout,
    .discussion-layout {
      display: grid;
      gap: 14px;
    }

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

    .grid-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

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

    .news-layout {
      grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    }

    .docs-layout {
      grid-template-columns: minmax(0, 1fr) 300px;
    }

    .contact-layout {
      grid-template-columns: minmax(0, 1.22fr) minmax(380px, 0.9fr);
      align-items: start;
      gap: 16px;
    }

    .contact-layout > .grid-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-content: start;
      gap: 12px;
    }

    .contact-layout .form-grid {
      align-self: start;
      max-width: 460px;
      gap: 10px;
    }

    .contact-layout > form.card {
      width: min(100%, 460px);
      justify-self: stretch;
    }

    .discussion-layout {
      grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
    }

    .insight-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .insight-card {
      position: relative;
      overflow: hidden;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 12px;
      align-items: start;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background:
        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(231,241,247,0.58)),
        var(--surface);
      box-shadow: var(--shadow-soft);
    }

    .insight-card::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 4px;
      background: linear-gradient(90deg, var(--blue), var(--green), var(--gold));
    }

    .insight-number {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border-radius: 6px;
      background:
        linear-gradient(135deg, var(--blue-strong), var(--green));
      color: white;
      font-family: var(--font-serif);
      font-size: 19px;
      font-weight: 700;
    }

    .insight-card strong {
      display: block;
      color: var(--ink);
      line-height: 1.2;
    }

    .insight-card p {
      margin-top: 4px;
      color: var(--muted);
      font-size: 13px;
    }

    .card,
    .article-card,
    .person-card,
    .document-row,
    .topic-card,
    .comment-card,
    .institution-card,
    .collective-card,
    .contact-card,
    .event-card {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(249,251,250,0.94)),
        var(--surface);
      box-shadow: var(--shadow-soft);
      transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
    }

    .card::before,
    .article-card::before,
    .person-card::before,
    .document-row::before,
    .topic-card::before,
    .comment-card::before,
    .institution-card::before,
    .collective-card::before,
    .contact-card::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 4px;
      z-index: 1;
      background: linear-gradient(90deg, var(--blue), var(--green), var(--gold));
      opacity: 0.92;
    }

    .card > *,
    .article-card > *,
    .person-card > *,
    .document-row > *,
    .topic-card > *,
    .comment-card > *,
    .institution-card > *,
    .collective-card > *,
    .contact-card > *,
    .event-card > * {
      position: relative;
      z-index: 2;
    }

    .card:hover,
    .article-card:hover,
    .person-card:hover,
    .document-row:hover,
    .topic-card:hover,
    .comment-card:hover,
    .institution-card:hover,
    .collective-card:hover,
    .contact-card:hover,
    .event-card:hover {
      transform: translateY(-2px);
      border-color: var(--line-strong);
      box-shadow: var(--shadow-lg);
    }

    .card {
      display: grid;
      gap: 10px;
      min-height: 100%;
      padding: 20px;
    }

    .card::after,
    .institution-card::after,
    .collective-card::after,
    .contact-card::after {
      content: "";
      position: absolute;
      right: -28px;
      bottom: -34px;
      width: 96px;
      height: 96px;
      border: 1px solid rgba(31,95,139,0.12);
      border-radius: 50%;
      background: rgba(231,241,247,0.38);
      z-index: 0;
      pointer-events: none;
    }

    .card h3,
    .article-card h3,
    .person-card h3,
    .topic-card h3,
    .contact-card h3 {
      color: var(--ink);
      font-size: 20px;
      line-height: 1.2;
    }

    .card h4,
    .collective-card h3,
    .institution-card h3,
    .event-card h3 {
      color: var(--ink);
      font-size: 17px;
      line-height: 1.25;
    }

    .card p,
    .article-card p,
    .person-card p,
    .document-row p,
    .topic-card p,
    .comment-card p,
    .institution-card p,
    .collective-card p,
    .contact-card p,
    .event-card p {
      color: var(--muted);
    }

    .article-card {
      overflow: hidden;
      display: grid;
    }

    .article-card__body,
    .person-card__body,
    .topic-card,
    .comment-card,
    .institution-card,
    .collective-card,
    .contact-card,
    .event-card {
      display: grid;
      gap: 12px;
      padding: 18px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(249,251,250,0.9));
    }

    .article-card.featured .article-card__body {
      padding: 22px;
    }

    .article-card.featured h3 {
      font-family: var(--font-serif);
      font-size: clamp(26px, 3vw, 36px);
      line-height: 1.1;
    }

    .article-card.featured .photo {
      min-height: 320px;
    }

    .photo {
      min-height: 190px;
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid var(--line);
      background: var(--paper-2);
    }

    .photo::before,
    .photo::after {
      content: "";
      position: absolute;
      inset: 0;
    }

    .photo::before {
      background:
        linear-gradient(135deg, rgba(21,32,43,0.18), transparent 38%),
        linear-gradient(90deg, rgba(255,255,255,0.2) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, rgba(255,255,255,0.18) 0 1px, transparent 1px 100%);
      background-size: auto, 36px 36px, 36px 36px;
    }

    .photo::after {
      inset: auto 18px 18px auto;
      width: 80px;
      height: 80px;
      border: 2px solid rgba(255,255,255,0.65);
      border-radius: 50%;
    }

    .photo-label::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 0 4px rgba(15,118,110,0.12);
    }

    .photo-roundtable {
      background:
        linear-gradient(135deg, rgba(23,67,95,0.96), rgba(15,118,110,0.76)),
        repeating-linear-gradient(90deg, transparent 0 28px, rgba(255,255,255,0.08) 28px 29px);
    }

    .photo-docs {
      background:
        linear-gradient(135deg, rgba(36,50,65,0.92), rgba(31,95,139,0.72)),
        linear-gradient(45deg, transparent 0 35%, rgba(255,255,255,0.18) 35% 36%, transparent 36%);
    }

    .photo-education {
      background:
        linear-gradient(135deg, rgba(183,121,31,0.82), rgba(23,67,95,0.8)),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.09) 0 2px, transparent 2px 18px);
    }

    .photo-event {
      background:
        linear-gradient(135deg, rgba(15,118,110,0.9), rgba(183,121,31,0.66)),
        repeating-linear-gradient(45deg, transparent 0 20px, rgba(255,255,255,0.1) 20px 21px);
    }

    .photo-label {
      position: absolute;
      left: 14px;
      bottom: 14px;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      max-width: calc(100% - 28px);
      padding: 8px 10px;
      border-radius: 6px;
      background: rgba(255,255,255,0.94);
      color: var(--ink);
      font-size: 12px;
      font-weight: 800;
    }

    .tag,
    .status,
    .date-chip {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      min-height: 28px;
      padding: 5px 9px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
    }

    .tag {
      border: 1px solid rgba(31,95,139,0.12);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.72), rgba(238,243,241,0.86)),
        var(--paper-2);
      color: var(--ink-2);
    }

    .status {
      background: var(--green-soft);
      color: #0c514c;
    }

    .status.gold {
      background: var(--gold-soft);
      color: #7a4a12;
    }

    .status.red {
      background: #f8e7e7;
      color: var(--red);
    }

    .date-chip {
      background:
        linear-gradient(135deg, var(--blue-strong), var(--green));
      color: white;
      box-shadow: 0 8px 16px rgba(23,67,95,0.14);
    }

    .meta-row {
      color: var(--muted);
      font-size: 13px;
    }

    .metric-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .metric {
      position: relative;
      overflow: hidden;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.92), rgba(231,241,247,0.56)),
        var(--surface-soft);
    }

    .metric::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 4px;
      background: var(--green);
    }

    .metric strong {
      display: block;
      color: var(--ink);
      font-size: 24px;
      line-height: 1;
    }

    .metric span {
      display: block;
      margin-top: 5px;
      color: var(--muted);
      font-size: 13px;
    }

    .document-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background:
        linear-gradient(135deg, rgba(23,67,95,0.06), rgba(15,118,110,0.08)),
        var(--surface);
      box-shadow: var(--shadow-soft);
    }

    .filter {
      min-height: 38px;
      padding: 8px 12px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: rgba(255,255,255,0.78);
      color: var(--muted);
      font-weight: 700;
    }

    .filter:first-child {
      border-color: transparent;
      background:
        linear-gradient(135deg, var(--blue-strong), var(--green));
      color: white;
      box-shadow: 0 8px 18px rgba(23,67,95,0.16);
    }

    .document-list {
      display: grid;
      gap: 10px;
    }

    .docs-layout--single {
      grid-template-columns: minmax(0, 1fr);
    }

    .document-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 150px 110px 150px;
      gap: 14px;
      align-items: center;
      min-height: 106px;
      padding: 18px 16px 18px 76px;
      background:
        linear-gradient(90deg, rgba(231,241,247,0.66), rgba(255,255,255,0.96) 34%),
        var(--surface);
    }

    .document-row > div:first-child::before {
      content: "";
      position: absolute;
      left: -58px;
      top: 0;
      width: 38px;
      height: 48px;
      border: 1px solid rgba(31,95,139,0.2);
      border-radius: 7px;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.86), rgba(231,241,247,0.92));
      box-shadow: inset -10px 10px 0 rgba(15,118,110,0.08);
    }

    .document-row > div:first-child::after {
      content: "";
      position: absolute;
      left: -48px;
      top: 15px;
      width: 18px;
      height: 2px;
      border-radius: 999px;
      background: rgba(23,67,95,0.42);
      box-shadow:
        0 8px 0 rgba(23,67,95,0.26),
        0 16px 0 rgba(23,67,95,0.18);
    }

    .document-row strong {
      display: block;
      color: var(--ink);
      line-height: 1.3;
    }

    .document-row p {
      margin-top: 4px;
      font-size: 13px;
    }

    .document-actions {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
    }

    .person-card {
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(231,241,247,0.48)),
        var(--surface);
    }

    .person-photo {
      min-height: 180px;
      display: grid;
      place-items: center;
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid var(--line);
      background:
        linear-gradient(135deg, rgba(23,67,95,0.14), rgba(15,118,110,0.14)),
        linear-gradient(180deg, var(--paper-2), #ffffff);
      color: var(--blue-strong);
      font-family: var(--font-serif);
      font-size: 48px;
      font-weight: 700;
    }

    .person-photo::before {
      content: "";
      position: absolute;
      width: 118px;
      height: 118px;
      border: 1px solid rgba(23,67,95,0.12);
      border-radius: 50%;
      background: rgba(255,255,255,0.46);
    }

    .person-photo::after {
      content: "";
      position: absolute;
      right: 18px;
      bottom: 18px;
      width: 42px;
      height: 6px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--blue), var(--green), var(--gold));
    }

    .person-role {
      color: var(--blue-strong);
      font-size: 13px;
      font-weight: 800;
    }

    .topic-card {
      border-left: 0;
      padding-left: 22px;
      background:
        linear-gradient(90deg, rgba(229,243,239,0.92), rgba(255,255,255,0.96) 42%),
        var(--surface);
    }

    .topic-card::after {
      content: "";
      position: absolute;
      left: 0;
      top: 4px;
      bottom: 0;
      width: 6px;
      background: linear-gradient(180deg, var(--green), var(--blue), var(--gold));
    }

    .comment-card {
      border-left: 0;
      padding-top: 24px;
      background:
        linear-gradient(135deg, rgba(231,241,247,0.82), rgba(255,255,255,0.96) 48%),
        var(--surface-soft);
    }

    .comment-card::after {
      content: "“";
      position: absolute;
      right: 18px;
      top: 2px;
      color: rgba(31,95,139,0.16);
      font-family: var(--font-serif);
      font-size: 86px;
      line-height: 1;
    }

    .comment-card blockquote {
      margin: 0;
      color: var(--ink);
      font-family: var(--font-serif);
      font-size: 18px;
      line-height: 1.35;
    }

    .topic-card .chip-row {
      padding-top: 10px;
      border-top: 1px solid rgba(31,95,139,0.1);
    }

    .form-grid {
      display: grid;
      gap: 10px;
      max-width: 520px;
      padding: 14px;
      align-content: start;
    }

    .field {
      display: grid;
      gap: 3px;
    }

    .field span {
      color: var(--ink);
      font-family: var(--font-sans);
      font-size: var(--type-label);
      font-weight: 700;
      line-height: 1.35;
      margin-bottom: 0;
    }

    html[data-theme="dark"] .field span {
      color: rgba(255,255,255,0.92);
    }

    .field input,
    .field textarea {
      width: 100%;
      min-height: 38px;
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: var(--surface-soft);
    }

    .field textarea {
      min-height: 88px;
      resize: vertical;
    }

    .rail-box {
      display: grid;
      gap: 16px;
      padding: 16px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(238,243,241,0.92)),
        var(--surface);
    }

    .rail-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: -16px -16px 0;
      padding: 16px;
      border-bottom: 0;
      background:
        linear-gradient(135deg, var(--blue-strong), var(--steel) 58%, var(--green));
      color: white;
    }

    .rail-heading h2 {
      font-size: 18px;
      line-height: 1.2;
    }

    .rail-heading .status {
      background: rgba(255,255,255,0.16);
      color: white;
    }

    .rail-section {
      display: grid;
      gap: 10px;
    }

    .rail-section h3 {
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0;
    }

    .event-card {
      padding-left: 18px;
      box-shadow: none;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.98), rgba(251,241,220,0.58)),
        var(--surface);
    }

    .event-card h3 {
      font-size: 15px;
    }

    .event-card .date-chip {
      margin-bottom: 2px;
    }

    .event-card::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 5px;
      background: linear-gradient(180deg, var(--gold), var(--green));
    }

    .event-list,
    .quick-list,
    .update-list {
      display: grid;
      gap: 10px;
    }

    .quick-list a,
    .update-list li {
      position: relative;
      display: grid;
      gap: 2px;
      padding: 12px 34px 12px 12px;
      border-top: 1px solid var(--line);
      border-radius: 6px;
      background: rgba(255,255,255,0.5);
      transition: background 160ms ease, transform 160ms ease;
    }

    .quick-list a::after {
      content: "";
      position: absolute;
      right: 12px;
      top: 50%;
      width: 12px;
      height: 12px;
      border-top: 2px solid var(--blue-strong);
      border-right: 2px solid var(--blue-strong);
      transform: translateY(-50%) rotate(45deg);
      opacity: 0.55;
    }

    .quick-list a:hover,
    .quick-list a:focus-visible {
      background: var(--sky-soft);
      transform: translateX(2px);
    }

    .quick-list a:first-child,
    .update-list li:first-child {
      border-top: 0;
    }

    .quick-list strong,
    .update-list strong {
      color: var(--ink);
      font-size: 14px;
    }

    .quick-list span,
    .update-list span {
      color: var(--muted);
      font-size: 13px;
    }

    .footer {
      margin-top: 18px;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background:
        linear-gradient(135deg, #111b26, #19314a 54%, #173f3d),
        var(--ink);
      color: white;
      box-shadow: var(--shadow-lg);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: minmax(0, 4.2fr) minmax(260px, 0.92fr) minmax(260px, 0.92fr);
      gap: 32px;
    }

    .footer h2,
    .footer h3 {
      line-height: 1.2;
    }

    .footer .brand-kicker {
      color: rgba(255,255,255,0.72);
      font-size: 10px !important;
    }

    .footer-brand {
      display: grid;
      gap: 0;
      align-content: start;
    }

    .footer-brand-head {
      display: grid;
      grid-template-columns: 128px minmax(0, 1fr);
      gap: 18px;
      align-items: center;
    }

    .footer-logo {
      width: 128px;
      height: 128px;
      object-fit: contain;
      padding: 10px;
      border-radius: 10px;
      background: transparent;
      filter: invert(1) brightness(1.18) contrast(1.02);
    }

    .footer-brand-copy {
      display: grid;
      gap: 8px;
      align-content: center;
    }

    .footer-brand-copy p {
      margin: 0;
      max-width: 540px;
    }

    .footer h2 {
      font-family: var(--font-serif);
      font-size: 30px;
    }

    .footer h3 {
      font-size: 15px;
    }

    .footer p,
    .footer a,
    .footer span {
      color: rgba(255,255,255,0.76);
    }

    .footer-list {
      display: grid;
      gap: 8px;
      margin-top: 10px;
    }

    .footer-list a {
      width: fit-content;
    }

    .plain-list {
      display: grid;
      gap: 10px;
      padding-left: 18px;
      color: var(--muted);
    }

    .plain-list li {
      line-height: 1.6;
    }

    .plain-list a {
      color: inherit;
    }

    .footer-bottom {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 12px;
      margin-top: 22px;
      padding-top: 16px;
      border-top: 1px solid rgba(255,255,255,0.18);
      color: rgba(255,255,255,0.64);
      font-size: 13px;
    }

    /* 2026 design refresh: quiet premium legal portal */
    :root {
      --ink: #101418;
      --ink-2: #2b3440;
      --muted: #697586;
      --line: #e5e9ee;
      --line-strong: #cfd7df;
      --paper: #f7f8f7;
      --paper-2: #eef3f4;
      --surface: #ffffff;
      --surface-soft: #f5f7f8;
      --blue: #235b86;
      --blue-strong: #143d5a;
      --green: #167569;
      --green-soft: #e8f4f1;
      --gold: #a66a1f;
      --gold-soft: #f8efe1;
      --plum: #68548e;
      --steel: #334155;
      --shadow: 0 1px 2px rgba(16, 20, 24, 0.05), 0 16px 42px rgba(16, 20, 24, 0.08);
      --shadow-soft: 0 1px 2px rgba(16, 20, 24, 0.04), 0 8px 24px rgba(16, 20, 24, 0.06);
      --shadow-lg: 0 2px 8px rgba(16, 20, 24, 0.08), 0 26px 70px rgba(16, 20, 24, 0.12);
      --radius: 8px;
      --font-sans: "Aptos", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
      --font-serif: "Aptos Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
      --type-h1: 56px;
      --type-h2: 42px;
      --type-h3: 32px;
      --type-h4: 24px;
      --type-body-lg: 18px;
      --type-body: 15px;
      --type-label: 16px;
      --type-meta: 12px;
      --type-sidebar: 18px;
      --type-kicker: 11px;
      --type-button: 15px;
      /* Tailwind-like semantic tokens mapped to current palette */
      --tw-bg: #f7f8f7;
      --tw-bg-muted: #eef3f4;
      --tw-surface: #ffffff;
      --tw-surface-soft: #f5f7f8;
      --tw-surface-glass: rgba(255,255,255,0.78);
      --tw-border: #e5e9ee;
      --tw-border-strong: #cfd7df;
      --tw-text: #101418;
      --tw-text-muted: #667485;
      --tw-text-subtle: #7b8794;
      --tw-primary: #143d5a;
      --tw-primary-soft: #235b86;
      --tw-accent: #167569;
      --tw-accent-soft: #e8f4f1;
      --tw-neutral-900: #101418;
      --tw-neutral-800: #171d24;
      --tw-neutral-700: #4b5866;
      --tw-overlay-dark: rgba(16,20,24,0.72);
      --tw-shadow-hover: 0 16px 36px rgba(16,20,24,0.08);
      --tw-hero-bg: #101418;
      --tw-hero-surface: #14202a;
      --tw-surface-glass-strong: rgba(255,255,255,0.64);
      --tw-side-title: #8a94a3;
      --tw-accent-hover: #eef7f4;
      --tw-accent-active: #dff3ee;
      --tw-accent-active-border: #168777;
      --tw-accent-active-text: #0b5f54;
      --tw-insight-surface: rgba(255,255,255,0.72);
      --tw-card-surface: rgba(255,255,255,0.74);
      --tw-photo-surface: #e8edf0;
      --tw-tag-surface: #f3f6f7;
      --tw-status-text: #12645b;
      --tw-ink-strong: #0b1117;
      --tw-brand-mark-bg: #101418;
      --tw-brand-mark-fg: #f8efe1;
      --tw-brand-mark-border: rgba(248,239,225,0.52);
      --tw-brand-subtext: #5f6b7a;
      --tw-button-secondary-bg: rgba(255,255,255,0.72);
      --tw-button-secondary-border: rgba(207,215,223,0.9);
      --tw-button-hover-shadow: 0 10px 24px rgba(16,20,24,0.1);
      --tw-hero-copy-muted: rgba(255,255,255,0.72);
      --tw-hero-chip-bg: rgba(255,255,255,0.08);
      --tw-hero-chip-border: rgba(255,255,255,0.18);
      --tw-hero-caption-bg: rgba(255,255,255,0.1);
      --tw-hero-caption-text: rgba(255,255,255,0.82);
      --tw-hero-caption-border: rgba(255,255,255,0.16);
      --tw-hero-metric-border: rgba(255,255,255,0.13);
      --tw-hero-metric-label: rgba(255,255,255,0.68);
      --tw-dark-side-box-border: #2b3946;
      --tw-dark-side-box-bg: linear-gradient(180deg, rgba(20, 30, 39, 0.96), rgba(15, 23, 32, 0.94));
      --tw-dark-side-box-accent: linear-gradient(90deg, #3c7ea7, #3fb8a8);
      --tw-dark-event-surface: #1c1a14;
      --tw-dark-event-border: #3a3326;
      --tw-dark-control-surface: #0f1720;
      --tw-dark-control-border: #32414f;
      --tw-dark-divider: #2a3844;
      --tw-dark-input-bg: #0f1720;
      --tw-dark-input-border: #293845;
      --tw-dark-primary-bg: #0f766e;
      --tw-dark-primary-text: #f2fffd;
      --tw-dark-primary-shadow: 0 14px 30px rgba(15,118,110,0.24);
      --tw-dark-toolbar-bg: #17384a;
      --tw-dark-toolbar-text: #e8f6ff;
      --tw-record-meta-border: #e7ebef;
      --tw-record-meta-bg: #f8faf9;
      --tw-list-item-border: #e7ebef;
      --tw-list-item-bg: #fbfcfc;
      --tw-input-border: #dfe6eb;
      --tw-input-bg: #ffffff;
      --tw-filter-bg: #f4f7f8;
      --tw-filter-text: #5d6978;
      --tw-filter-border: #e2e8ed;
      --tw-doc-icon-bg: #f6f8f9;
      --tw-doc-icon-line: #91a0ad;
      --tw-doc-icon-line-2: #c5ced6;
      --tw-doc-icon-line-3: #d8dfe5;
      --tw-site-nav-bg: rgba(247,248,247,0.78);
      --tw-surface-border-soft: rgba(229,233,238,0.92);
      --tw-surface-border-header: rgba(229, 233, 238, 0.82);
      --tw-dark-theme-icon-bg: #f5d37b;
      --tw-dark-theme-icon-ring: rgba(245,211,123,0.16);
      --tw-dark-hero-border: #1c2b36;
      --tw-dark-hero-visual: linear-gradient(135deg, #0f2f47 0%, #10594f 58%, #6d4f18 100%);
      --tw-dark-inline-player-bg: #091017;
      --tw-dark-contrast-text: #ffffff;
      --tw-dark-selection-bg: rgba(45, 212, 191, 0.34);
      --tw-dark-selection-text: #f3f7fa;
      --tw-dark-action-border: rgba(45,212,191,0.5);
      --tw-dark-action-border-active: rgba(45,212,191,0.54);
      --tw-dark-primary-hover-border: rgba(98, 220, 205, 0.46);
      --tw-dark-primary-hover-border-soft: rgba(98, 220, 205, 0.36);
      --tw-dark-theme-toggle-border: rgba(255,255,255,0.14);
      --tw-dark-muted-alt: #97a8b6;
      --tw-dark-bg-alt: #0e151d;
      --tw-nav-sticky-bg: rgba(17,26,34,0.9);
      --tw-nav-sticky-shadow: 0 10px 26px rgba(0,0,0,0.22);
      --tw-theme-toggle-border: rgba(255,255,255,0.14);
      --tw-theme-toggle-bg: rgba(17,26,34,0.92);
      --tw-theme-toggle-shadow: 0 8px 18px rgba(0,0,0,0.18);
      --tw-theme-toggle-hover-border: rgba(154,200,230,0.34);
      --tw-theme-icon-bg: #f5d37b;
      --tw-theme-icon-cutout: #05090d;
      --tw-panel-border: #293845;
      --tw-panel-bg: #111a22;
      --tw-panel-shadow: 0 14px 34px rgba(0,0,0,0.22);
      --tw-event-card-border: #3a3326;
      --tw-event-card-overlay: linear-gradient(145deg, rgba(28,26,20,0.98), rgba(33,30,22,0.9));
      --tw-event-card-hover-border: rgba(98,220,205,0.36);
      --tw-event-card-hover-shadow: 0 16px 30px rgba(0,0,0,0.22);
      --tw-action-text: #9ac8e6;
      --tw-action-border: #293845;
      --tw-action-border-hover: rgba(98,220,205,0.46);
      --tw-action-bg: #0f1720;
      --tw-action-bg-hover: #16232d;
      --tw-pagination-text: #b5c4d0;
      --tw-pagination-active-bg: #0f766e;
      --tw-pagination-active-text: #f2fffd;
      --tw-compact-bg: #0f1720;
      --tw-divider-soft: #2a3844;
      --tw-accent-border-soft: rgba(45,212,191,0.36);
      --tw-divider-faint: rgba(154,200,230,0.14);
      --tw-swatch-inner-ring: rgba(255,255,255,0.08);
      --tw-nav-sticky-bg: rgba(255,255,255,0.9);
      --tw-nav-sticky-shadow: 0 10px 26px rgba(16,20,24,0.06);
      --tw-theme-toggle-border: rgba(21,32,43,0.12);
      --tw-theme-toggle-bg: rgba(255,255,255,0.82);
      --tw-theme-toggle-shadow: 0 8px 18px rgba(16,20,24,0.06);
      --tw-theme-toggle-hover-border: rgba(20,61,90,0.28);
      --tw-theme-icon-bg: var(--tw-ink-strong);
      --tw-theme-icon-cutout: #ffffff;
      --tw-panel-border: rgba(229,233,238,0.94);
      --tw-panel-bg: rgba(255,255,255,0.86);
      --tw-panel-shadow: 0 14px 34px rgba(16,20,24,0.055);
      --tw-event-card-border: #e6ecef;
      --tw-event-card-overlay: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(233,242,245,0.78));
      --tw-event-card-hover-border: rgba(20,61,90,0.25);
      --tw-event-card-hover-shadow: 0 16px 36px rgba(16,20,24,0.08);
      --tw-action-text: #143d5a;
      --tw-action-border: rgba(20,61,90,0.16);
      --tw-action-border-hover: rgba(20,61,90,0.28);
      --tw-action-bg: #f4f8f8;
      --tw-action-bg-hover: #eaf3f2;
      --tw-pagination-text: #526172;
      --tw-pagination-active-bg: var(--tw-ink-strong);
      --tw-pagination-active-text: #ffffff;
      --tw-compact-bg: rgba(255,255,255,0.86);
      --tw-divider-soft: rgba(31,95,139,0.12);
      --tw-accent-border-soft: rgba(22, 117, 105, 0.18);
      --tw-divider-faint: rgba(20, 61, 90, 0.08);
      --tw-swatch-inner-ring: rgba(255,255,255,0.25);
    }

    body {
      background:
        linear-gradient(180deg, #fafbf9 0, #f4f6f5 420px, #f7f8f7 100%);
      color: var(--ink);
      text-rendering: geometricPrecision;
      -webkit-font-smoothing: antialiased;
    }

    .site {
      width: min(1520px, calc(100% - 40px));
      padding-top: 14px;
    }

    .top-strip {
      padding: 7px 2px 12px;
      color: var(--tw-text-subtle);
      font-size: 12px;
    }

    .site-header {
      position: sticky;
      top: 12px;
      z-index: 20;
      border-color: var(--tw-surface-border-header);
      background: var(--tw-surface-glass);
      backdrop-filter: blur(20px) saturate(1.25);
      -webkit-backdrop-filter: blur(20px) saturate(1.25);
      box-shadow: 0 10px 30px rgba(16,20,24,0.07);
    }

    .site-header::before,
    .page-band::after,
    .card::after,
    .institution-card::after,
    .collective-card::after,
    .contact-card::after,
    .photo::after,
    .person-photo::before,
    .brand-mark::after {
      display: none;
    }

    .masthead {
      grid-template-columns: minmax(0, 1fr) auto;
      padding: 20px 22px;
      background:
        linear-gradient(90deg, rgba(20,61,90,0.05), rgba(22,117,105,0.04) 45%, transparent);
    }

    .brand {
      gap: 14px;
    }

    .brand-mark {
      width: 52px;
      height: 52px;
      flex-basis: 52px;
      border-radius: 8px;
      background: var(--tw-brand-mark-bg);
      color: var(--tw-brand-mark-fg);
      box-shadow: none;
      font-size: 18px;
    }

    .brand-mark::before {
      inset: 8px;
      border-color: var(--tw-brand-mark-border);
      border-radius: 4px;
    }

    .brand h1,
    .page-intro h2,
    .hero-copy h2,
    .article-card.featured h3,
    .footer h2 {
      font-family: var(--font-serif);
      letter-spacing: 0;
    }

    .brand h1 {
      font-size: var(--type-h1);
      line-height: 1.02;
    }

    .brand p {
      max-width: 740px;
      margin-top: 7px;
      color: var(--tw-brand-subtext);
      font-size: 15px;
    }

    .brand-kicker,
    .section-kicker,
    .card-kicker,
    .small-label {
      color: var(--green);
      font-size: var(--type-kicker);
      font-weight: 850;
    }

    .section-kicker::before,
    .card-kicker::before,
    .small-label::before {
      width: 14px;
      height: 1px;
      opacity: 0.6;
    }

    .primary-btn,
    .secondary-btn,
    .download-btn {
      border-radius: 8px;
      min-height: 38px;
      padding: 8px 13px;
      font-weight: 760;
      box-shadow: none;
    }

    .primary-btn {
      background: var(--tw-neutral-900);
      color: white;
    }

    .secondary-btn,
    .download-btn {
      border-color: var(--tw-button-secondary-border);
      background: var(--tw-button-secondary-bg);
    }

    .primary-btn:hover,
    .primary-btn:focus-visible,
    .secondary-btn:hover,
    .secondary-btn:focus-visible,
    .download-btn:hover,
    .download-btn:focus-visible {
      transform: translateY(-1px);
      box-shadow: var(--tw-button-hover-shadow);
    }

    .site-nav {
      padding: 0 10px;
      background: var(--tw-site-nav-bg);
    }

    .site-nav button,
    .site-nav a {
      min-height: 48px;
      padding: 0 12px;
      font-size: 13px;
      font-weight: 780;
    }

    .site-nav button::after,
    .site-nav a::after {
      left: 12px;
      right: 12px;
      height: 2px;
      background: transparent;
    }

    .site-nav button.active::after {
      background: var(--tw-neutral-900);
    }

    .workbench {
      grid-template-columns: 320px minmax(0, 1fr) 340px;
      gap: 18px;
      margin-top: 18px;
    }

    .side-nav {
      display: grid;
    }

    .side-box,
    .rail-box,
    .page-band,
    .hero,
    .card,
    .article-card,
    .person-card,
    .document-row,
    .topic-card,
    .comment-card,
    .institution-card,
    .collective-card,
    .contact-card,
    .event-card,
    .document-toolbar,
    .insight-card {
      border-color: var(--tw-surface-border-soft);
      background: var(--tw-surface-glass);
      box-shadow: none;
    }

    .side-box,
    .rail-box,
    .page-band,
    .hero,
    .card,
    .article-card,
    .person-card,
    .document-row,
    .topic-card,
    .comment-card,
    .institution-card,
    .collective-card,
    .contact-card,
    .document-toolbar,
    .insight-card {
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .side-box::before,
    .card::before,
    .article-card::before,
    .person-card::before,
    .document-row::before,
    .topic-card::before,
    .comment-card::before,
    .institution-card::before,
    .collective-card::before,
    .contact-card::before,
    .insight-card::before {
      height: 1px;
      background: linear-gradient(90deg, rgba(20,61,90,0.22), rgba(22,117,105,0.18), transparent);
    }

    .side-box {
      padding: 12px;
      background: var(--tw-surface-glass-strong);
    }

    .side-title {
      color: var(--tw-side-title);
      font-size: 11px;
    }

    .section-button {
      padding: 12px 14px;
      color: var(--tw-text-subtle);
    }

    .section-button::before {
      display: none;
    }

    .section-button strong {
      font-size: var(--type-sidebar);
      font-weight: 800;
      line-height: 1.2;
    }

    .section-button span {
      font-size: 14px;
      line-height: 1.45;
    }

    .section-button:hover,
    .section-button:focus-visible {
      background: var(--tw-accent-hover);
      transform: none;
    }

    .section-button.active {
      background: var(--tw-accent-active);
      border-color: var(--tw-accent-active-border);
      box-shadow: inset 0 0 0 2px rgba(22, 135, 119, 0.22);
      transform: none;
    }

    .section-button.active strong {
      color: var(--tw-accent-active-text);
    }

    .screen.active {
      gap: 16px;
    }

    .page-band {
      background:
        linear-gradient(135deg, rgba(255,255,255,0.86), rgba(248,250,250,0.78)),
        var(--surface);
    }

    .page-band::before {
      width: 1px;
      background: linear-gradient(180deg, var(--green), transparent);
    }

    .page-intro {
      padding: 26px;
      gap: 10px;
    }

    .page-intro h2,
    .hero-copy h2 {
      font-size: var(--type-h2);
      line-height: 1.05;
      font-weight: 760;
      max-width: 920px;
    }

    .page-intro p,
    .hero-copy p,
    .lead-text {
      color: var(--tw-text-muted);
      font-size: 16px;
      line-height: 1.65;
    }

    .hero {
      grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
      background: var(--tw-hero-bg);
      color: white;
      box-shadow: var(--shadow-lg);
    }

    .hero::before {
      height: 1px;
      background: linear-gradient(90deg, rgba(255,255,255,0.28), rgba(248,239,225,0.38), transparent);
    }

    .hero-copy {
      border-right-color: rgba(255,255,255,0.12);
      background:
        linear-gradient(135deg, rgba(22,117,105,0.22), transparent 48%),
        var(--tw-hero-bg);
      padding: 48px;
    }

    .hero-copy .section-kicker,
    .hero-copy h2,
    .hero-copy p {
      color: white;
    }

    .hero-copy p {
      color: var(--tw-hero-copy-muted);
    }

    .hero-copy .secondary-btn {
      background: var(--tw-hero-chip-bg);
      color: white;
      border-color: var(--tw-hero-chip-border);
    }

    .hero-visual {
      min-height: 460px;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.10), transparent 46%),
        linear-gradient(90deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 100%),
        var(--tw-hero-surface);
      background-size: auto, 52px 52px, 52px 52px, auto;
    }

    .hero-visual::before {
      inset: 28px;
      border-color: rgba(255,255,255,0.14);
      background: transparent;
    }

    .hero-visual::after {
      content: "СПУ";
      right: 30px;
      bottom: 26px;
      color: rgba(255,255,255,0.12);
      font-family: var(--font-serif);
      font-size: 124px;
      line-height: 1;
    }

    .hero-caption {
      left: 26px;
      bottom: 26px;
      background: var(--tw-hero-caption-bg);
      color: var(--tw-hero-caption-text);
      border: 1px solid var(--tw-hero-caption-border);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .metric {
      border-color: var(--tw-hero-metric-border);
      background: var(--tw-hero-chip-bg);
    }

    .metric::before {
      width: 1px;
      background: rgba(248,239,225,0.7);
    }

    .metric strong,
    .metric span {
      color: white;
    }

    .metric span {
      color: var(--tw-hero-metric-label);
    }

    .insight-strip {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .insight-card {
      padding: 16px;
      background: var(--tw-insight-surface);
    }

    .insight-number {
      width: 38px;
      height: 38px;
      border-radius: 8px;
      background: var(--tw-neutral-900);
      color: #f8efe1;
      font-family: var(--font-sans);
      font-size: 13px;
    }

    .news-layout {
      grid-template-columns: minmax(0, 1.18fr) minmax(280px, 0.82fr);
    }

    .article-card,
    .person-card,
    .card,
    .institution-card,
    .collective-card,
    .contact-card,
    .topic-card,
    .comment-card {
      background: var(--tw-card-surface);
    }

    .article-card:hover,
    .person-card:hover,
    .card:hover,
    .document-row:hover,
    .topic-card:hover,
    .comment-card:hover,
    .institution-card:hover,
    .collective-card:hover,
    .contact-card:hover,
    .event-card:hover,
    .stat:hover {
      transform: translateY(-2px);
      box-shadow: var(--tw-shadow-hover);
    }

    .article-card__body,
    .person-card__body,
    .topic-card,
    .comment-card,
    .institution-card,
    .collective-card,
    .contact-card,
    .event-card {
      padding: 18px;
      background: transparent;
    }

    .article-card.featured h3 {
      font-size: 34px;
      font-weight: 760;
    }

    .card h3,
    .article-card h3,
    .person-card h3,
    .topic-card h3,
    .contact-card h3 {
      font-size: 19px;
      font-weight: 780;
      color: var(--tw-neutral-800);
    }

    .card p,
    .article-card p,
    .person-card p,
    .document-row p,
    .topic-card p,
    .comment-card p,
    .institution-card p,
    .collective-card p,
    .contact-card p,
    .event-card p {
      color: var(--tw-text-muted);
      line-height: 1.6;
    }

    .photo {
      background: var(--tw-photo-surface);
      border-bottom-color: rgba(229,233,238,0.9);
    }

    .photo::before {
      background:
        linear-gradient(135deg, rgba(16,20,24,0.22), transparent 44%),
        linear-gradient(90deg, rgba(255,255,255,0.18) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, rgba(255,255,255,0.16) 0 1px, transparent 1px 100%);
      background-size: auto, 48px 48px, 48px 48px;
    }

    .photo-label {
      background: var(--tw-overlay-dark);
      color: white;
      border: 1px solid rgba(255,255,255,0.16);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .tag,
    .status,
    .date-chip {
      min-height: 26px;
      padding: 5px 9px;
      font-size: 11px;
      font-weight: 820;
    }

    .tag {
      background: var(--tw-tag-surface);
      color: var(--tw-neutral-700);
      border-color: #e4eaee;
    }

    .status {
      background: var(--tw-accent-soft);
      color: var(--tw-status-text);
    }

    .date-chip {
      background: var(--tw-neutral-900);
      color: white;
      box-shadow: none;
    }

    .document-toolbar {
      padding: 12px;
      background: rgba(255,255,255,0.72);
    }

    .filter,
    .filter:first-child {
      background: var(--tw-filter-bg);
      color: var(--tw-filter-text);
      border-color: var(--tw-filter-border);
      box-shadow: none;
    }

    .filter:first-child {
      background: #101418;
      color: white;
    }

    .document-list {
      gap: 12px;
    }

    .document-row {
      grid-template-columns: minmax(0, 1fr) 132px 92px 136px;
      min-height: 96px;
      padding: 16px 16px 16px 68px;
      background: rgba(255,255,255,0.74);
    }

    .document-row > div:first-child::before {
      left: -50px;
      top: 2px;
      width: 34px;
      height: 44px;
      border-radius: 6px;
      background: var(--tw-doc-icon-bg);
      border-color: var(--tw-input-border);
      box-shadow: none;
    }

    .document-row > div:first-child::after {
      left: -41px;
      top: 16px;
      width: 15px;
      background: var(--tw-doc-icon-line);
      box-shadow:
        0 7px 0 var(--tw-doc-icon-line-2),
        0 14px 0 var(--tw-doc-icon-line-3);
    }

    .person-photo {
      min-height: 168px;
      background:
        linear-gradient(180deg, #101418, #263744);
      color: #f8efe1;
      font-size: 42px;
    }

    .person-photo::after {
      right: 18px;
      bottom: 18px;
      height: 2px;
      background: #f8efe1;
      opacity: 0.65;
    }

    .topic-card {
      padding-left: 20px;
      background: rgba(255,255,255,0.76);
    }

    .topic-card::after {
      top: 1px;
      width: 2px;
      background: #101418;
    }

    .comment-card {
      background: #f8fafb;
    }

    .comment-card::after {
      color: rgba(16,20,24,0.08);
      font-size: 76px;
    }

    .comment-card blockquote {
      font-family: var(--font-serif);
      font-size: 18px;
      font-weight: 520;
      color: #252d36;
    }

    .rail-box {
      padding: 12px;
      background: rgba(255,255,255,0.64);
    }

    .rail-heading {
      margin: -12px -12px 0;
      padding: 14px;
      background: #101418;
    }

    .rail-heading .status {
      background: rgba(255,255,255,0.12);
      color: rgba(255,255,255,0.86);
    }

    .rail-section h3 {
      color: #838f9d;
      font-size: 11px;
    }

    .event-card {
      padding: 15px;
      background: #fffaf2;
      border-color: #f0e4d2;
    }

    .event-card::before {
      width: 2px;
      background: var(--gold);
    }

    .quick-list a,
    .update-list li {
      padding: 12px 34px 12px 12px;
      border-top: 0;
      background: rgba(255,255,255,0.72);
      border: 1px solid #edf1f4;
    }

    .quick-list a::after {
      width: 9px;
      height: 9px;
      border-color: #7b8794;
    }

    .footer {
      background: #101418;
      box-shadow: none;
    }

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

      .workbench-sidebar {
        position: static;
      }

      .event-rail {
        position: static;
      }

      .rail-box {
        grid-template-columns: 1fr 1fr 1fr;
        align-items: start;
      }

      .rail-heading {
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 960px) {
      .site {
        width: min(100% - 20px, var(--content));
        padding-top: 10px;
      }

      .top-strip,
      .masthead,
      .hero,
      .insight-strip,
      .news-layout,
      .docs-layout,
      .contact-layout,
      .discussion-layout,
      .footer-grid,
      .home-shell {
        grid-template-columns: 1fr;
      }

      .top-strip,
      .masthead {
        display: grid;
      }

      .header-actions {
        justify-content: flex-start;
      }

      .hero-copy {
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }

      .hero-visual {
        min-height: 280px;
      }

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

      .side-nav {
        position: static;
      }

      .workbench-sidebar {
        position: static;
      }

      .grid-2,
      .grid-3,
      .grid-4,
      .metric-row,
      .rail-box,
      .index-grid,
      .category-layout {
        grid-template-columns: 1fr;
      }

      .document-row {
        grid-template-columns: 1fr;
      }

      .category-record {
        grid-template-columns: 1fr;
        grid-template-areas:
          "body"
          "meta"
          "actions";
      }

      .document-actions {
        justify-content: flex-start;
      }

      .category-record__actions {
        justify-content: flex-start;
      }
    }

    @media (max-width: 620px) {
      body,
      button,
      input,
      textarea {
        font-size: 14px;
      }

      .brand {
        align-items: flex-start;
      }

      .brand-mark {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        font-size: 17px;
      }

      .masthead,
      .page-intro,
      .hero-copy,
      .footer {
        padding: 16px;
      }

      .site-nav button,
      .site-nav a {
        min-height: 48px;
        padding-inline: 10px;
        font-size: 13px;
      }

      .article-card.featured h3,
      .page-intro h2,
      .hero-copy h2 {
        font-size: 28px;
      }

      .photo {
        min-height: 160px;
      }
    }

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

    /* Final 2026 polish layer */
    body {
      background: #f8faf9 !important;
    }

    .brand h1,
    .page-intro h2,
    .hero-copy h2,
    .article-card.featured h3,
    .footer h2,
    .comment-card blockquote,
    .hero-visual::after {
      font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif !important;
    }

    .brand h1 {
      font-size: 38px !important;
      font-weight: 780 !important;
    }

    #screen-governance .page-intro h2 {
      font-size: clamp(24px, 3vw, 36px) !important;
      max-width: 980px;
    }

    .site-header {
      background: rgba(255,255,255,0.86) !important;
    }

    .masthead {
      background:
        linear-gradient(90deg, rgba(20,61,90,0.04), rgba(22,117,105,0.05) 58%, rgba(166,106,31,0.035)) !important;
    }

    .hero {
      background: var(--tw-ink-strong) !important;
      border-color: rgba(11,17,23,0.9) !important;
      box-shadow: 0 24px 80px rgba(11,17,23,0.16) !important;
    }

    .hero-copy {
      background-color: var(--tw-ink-strong) !important;
      background-image: none !important;
      color: var(--tw-surface) !important;
    }

    .hero-copy .section-kicker {
      color: #9de2d9 !important;
    }

    .hero-copy h2 {
      color: var(--tw-surface) !important;
      font-size: 42px !important;
      font-weight: 820 !important;
      line-height: 1.04 !important;
    }

    .hero-copy p,
    .hero-copy .metric span {
      color: rgba(255,255,255,0.76) !important;
    }

    .hero-copy .primary-btn {
      background: var(--tw-surface) !important;
      color: var(--tw-ink-strong) !important;
    }

    .hero-copy .secondary-btn {
      background: rgba(255,255,255,0.09) !important;
      color: var(--tw-surface) !important;
      border-color: rgba(255,255,255,0.2) !important;
    }

    .hero-visual {
      background:
        linear-gradient(135deg, rgba(255,255,255,0.13), transparent 38%),
        linear-gradient(90deg, rgba(255,255,255,0.12) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, rgba(255,255,255,0.1) 0 1px, transparent 1px 100%),
        linear-gradient(135deg, #143d5a 0%, #167569 58%, #a66a1f 100%) !important;
      background-size: auto, 52px 52px, 52px 52px, auto !important;
    }

    .hero-visual::after {
      color: rgba(255,255,255,0.16) !important;
      font-weight: 850 !important;
    }

    .hero-caption {
      background: rgba(11,17,23,0.45) !important;
      color: rgba(255,255,255,0.88) !important;
    }

    .metric {
      background: rgba(255,255,255,0.1) !important;
      border-color: rgba(255,255,255,0.18) !important;
    }

    .metric strong {
      color: var(--tw-surface) !important;
    }

    .insight-card,
    .article-card,
    .card,
    .page-band,
    .document-row,
    .topic-card,
    .comment-card,
    .contact-card,
    .person-card,
    .institution-card,
    .collective-card {
      background: var(--tw-surface) !important;
    }

    .rail-box {
      background: var(--tw-surface) !important;
      border-color: #e7ebef !important;
    }

    .event-card {
      background: #fffaf2 !important;
    }

    @media (max-width: 960px) {
      .hero-copy {
        padding: 28px !important;
      }

      .hero-copy h2 {
        font-size: 34px !important;
      }

      .hero-visual {
        min-height: 300px !important;
      }
    }

    @media (max-width: 620px) {
      .brand h1 {
        font-size: 30px !important;
      }

      .hero-copy {
        padding: 20px !important;
      }

      .hero-copy h2 {
        font-size: 28px !important;
      }
    }

    /* Comment fixes: compact masthead, sticky nav only, sticky event rail */
    .site-header {
      position: relative !important;
      top: auto !important;
      z-index: 1 !important;
      border-bottom-left-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
      box-shadow: 0 8px 28px rgba(16,20,24,0.045) !important;
    }

    .masthead {
      min-height: 0 !important;
      padding: 14px 18px !important;
      grid-template-columns: minmax(0, 1fr) auto !important;
      gap: 14px !important;
    }

    .brand {
      gap: 11px !important;
    }

    .brand-mark {
      width: 146px !important;
      height: 84px !important;
      flex-basis: 146px !important;
      padding: 8px 10px !important;
      border-radius: 10px !important;
      background: var(--tw-surface) !important;
      border: 1px solid rgba(188, 201, 213, 0.9) !important;
    }

    .brand h1 {
      font-size: 56px !important;
      line-height: 1.02 !important;
    }

    .brand p {
      display: none !important;
    }

    .brand-kicker {
      font-size: 20px !important;
      line-height: 1.1 !important;
    }

    .header-actions .secondary-btn {
      min-height: 34px !important;
      padding: 7px 12px !important;
      font-size: 13px !important;
    }

    .site-nav {
      position: sticky !important;
      top: 0 !important;
      z-index: 40 !important;
      margin: 0 0 18px !important;
      border: 1px solid var(--tw-surface-border-soft) !important;
      border-top: 0 !important;
      border-bottom-left-radius: 8px !important;
      border-bottom-right-radius: 8px !important;
      background: var(--tw-nav-sticky-bg) !important;
      backdrop-filter: blur(18px) saturate(1.2) !important;
      -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
      box-shadow: var(--tw-nav-sticky-shadow) !important;
    }

    .site-nav button,
    .site-nav a {
      min-height: 44px !important;
    }

    .workbench {
      margin-top: 20px !important;
    }

    .event-rail {
      position: sticky !important;
      top: 62px !important;
      z-index: 5 !important;
      align-self: start !important;
      max-height: calc(100vh - 78px) !important;
      overflow: auto !important;
      scrollbar-width: thin;
    }

    @media (max-width: 1220px) {
      .event-rail {
        position: static !important;
        max-height: none !important;
        overflow: visible !important;
      }
    }

    /* Comment round 2: anchors, detail pages, pagination, theme */
    .screen {
      scroll-margin-top: 96px;
    }

    .theme-toggle {
      width: 36px;
      height: 36px;
      display: inline-grid;
      place-items: center;
      flex: 0 0 36px;
      border: 1px solid var(--tw-theme-toggle-border);
      border-radius: 999px;
      background: var(--tw-theme-toggle-bg);
      box-shadow: var(--tw-theme-toggle-shadow);
      transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
    }

    .theme-toggle:hover {
      transform: translateY(-1px);
      border-color: var(--tw-theme-toggle-hover-border);
    }

    .theme-icon {
      width: 17px;
      height: 17px;
      border-radius: 50%;
      background: var(--tw-theme-icon-bg);
      box-shadow: inset -5px -3px 0 var(--tw-theme-icon-cutout);
    }

    .home-events,
    .record-panel,
    .record-sidebar,
    .comment-thread,
    .pagination {
      border: 1px solid var(--tw-panel-border);
      border-radius: 8px;
      background: var(--tw-panel-bg);
      box-shadow: var(--tw-panel-shadow);
    }

    .home-events {
      display: grid;
      gap: 18px;
      padding: 22px;
      margin-top: 18px;
    }

    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 18px;
    }

    .section-head h2 {
      max-width: 760px;
      color: var(--ink);
      font-size: 26px;
      line-height: 1.15;
      font-weight: 780;
    }

    .home-event-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .home-event-card,
    .event-card {
      width: 100%;
      text-align: left;
      font: inherit;
    }

    .home-event-card {
      min-height: 178px;
      display: grid;
      align-content: start;
      gap: 12px;
      padding: 18px;
      border: 1px solid var(--tw-event-card-border);
      border-radius: 8px;
      background:
        var(--tw-event-card-overlay),
        var(--surface);
      transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
    }

    .home-event-card:hover,
    .home-event-card:focus-visible {
      transform: translateY(-2px);
      border-color: var(--tw-event-card-hover-border);
      box-shadow: var(--tw-event-card-hover-shadow);
    }

    .home-event-card strong {
      color: var(--ink);
      font-size: 17px;
      line-height: 1.25;
    }

    .home-event-card p {
      color: var(--tw-text-muted);
      line-height: 1.55;
    }

    .card-action {
      justify-self: start;
      min-height: 36px;
      margin-top: 2px;
      padding: 8px 12px;
      border: 1px solid var(--tw-action-border);
      border-radius: 8px;
      background: var(--tw-action-bg);
      color: var(--tw-action-text);
      font-weight: 760;
      transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
    }

    .card-action:hover,
    .card-action:focus-visible {
      transform: translateY(-1px);
      border-color: var(--tw-action-border-hover);
      background: var(--tw-action-bg-hover);
    }

    .topic-card[data-open-discussion] {
      cursor: pointer;
    }

    .pagination {
      width: max-content;
      display: flex;
      gap: 6px;
      padding: 8px;
      margin-top: 16px;
    }

    .pagination button {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 7px;
      color: var(--tw-pagination-text);
      font-weight: 800;
    }

    .pagination button.active {
      background: var(--tw-pagination-active-bg);
      color: var(--tw-pagination-active-text);
    }

    .docs-pagination {
      margin-inline: auto;
    }

    .index-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    .index-card {
      display: grid;
      gap: 10px;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(238,243,241,0.72)),
        var(--surface);
      box-shadow: var(--shadow-soft);
    }

    .index-card h3 {
      font-size: 20px;
      line-height: 1.2;
    }

    .index-card p {
      color: var(--muted);
      line-height: 1.6;
    }

    .compact-stack {
      display: grid;
      gap: 12px;
    }

    .compact-item {
      display: grid;
      gap: 8px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--tw-compact-bg);
    }

    .compact-item strong {
      color: var(--ink);
      line-height: 1.25;
    }

    .compact-item p {
      color: var(--muted);
      line-height: 1.55;
    }

    .category-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 14px;
    }

    .category-list {
      display: grid;
      gap: 18px;
    }

    .category-record {
      display: grid;
      gap: 16px;
      align-items: start;
      padding: 30px 34px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(239,244,245,0.62)),
        var(--surface);
      box-shadow: var(--shadow-soft);
    }

    .category-record__head {
      display: grid;
      grid-template-columns: 1fr;
      justify-items: start;
      gap: 0;
      padding-bottom: 0;
      border-bottom: 0;
    }

    .category-record__head-main {
      display: none;
    }

    .category-record__eyebrow {
      display: none;
    }

    .category-record__body {
      display: grid;
      gap: 12px;
    }

    .category-record__body h3 {
      color: var(--ink);
      font-size: clamp(23px, 1.8vw, 31px);
      line-height: 1.2;
    }

    .category-record__body p {
      color: var(--muted);
      font-size: 16px;
      line-height: 1.72;
    }

    .category-record__meta {
      display: flex;
      align-items: center;
      gap: 10px;
      justify-items: start;
      text-align: left;
    }

    .category-record__date {
      color: var(--muted);
      font-size: var(--type-meta);
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: 0;
      text-transform: none;
    }

    .category-record__meta-label {
      display: none !important;
    }

    .category-record__actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: center;
      gap: 8px;
      padding-top: 2px;
    }

    .category-record__actions .download-btn,
    .category-record__actions .secondary-btn {
      white-space: nowrap;
      flex: 0 0 auto;
    }

    .category-record__expand {
      display: grid;
      gap: 12px;
      padding-top: 14px;
      border-top: 1px solid var(--tw-divider-soft);
    }

    .category-record--post {
      gap: 20px;
      padding: 24px 26px;
      border-left: 3px solid var(--tw-accent-border-soft);
    }

    .category-record--post .category-record__meta {
      margin-bottom: 0;
    }

    .token-list,
    .type-scale-list {
      display: grid;
      gap: 12px;
      margin-top: 6px;
    }

    .token-row,
    .type-row {
      display: grid;
      grid-template-columns: minmax(130px, 0.75fr) minmax(0, 1fr);
      gap: 14px;
      align-items: start;
      padding-top: 12px;
      border-top: 1px solid var(--tw-divider-faint);
    }

    .token-row:first-child,
    .type-row:first-child {
      padding-top: 0;
      border-top: 0;
    }

    .token-row strong,
    .type-row strong {
      display: block;
      color: var(--ink);
      font-size: 14px;
    }

    .token-row code,
    .type-row code {
      color: var(--blue-strong);
      font-size: 13px;
      font-weight: 700;
    }

    .token-inline-value,
    .type-inline-value {
      color: var(--ink);
      font-weight: 700;
    }

    .swatch-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 8px;
    }

    .swatch {
      display: grid;
      gap: 6px;
      min-width: 112px;
    }

    .swatch-chip {
      height: 40px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--swatch, var(--surface));
      box-shadow: inset 0 0 0 1px var(--tw-swatch-inner-ring);
    }

    .swatch span {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .swatch-note {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
    }

    .category-record__expand[hidden] {
      display: none;
    }

    .expand-panel {
      display: grid;
      gap: 10px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: rgba(248, 251, 252, 0.92);
    }

    .expand-panel h4 {
      color: var(--ink);
      font-size: 16px;
      line-height: 1.3;
    }

    .expand-panel > p {
      color: var(--muted);
      font-size: 15px;
      line-height: 1.65;
    }

    .document-inline-list {
      display: grid;
      gap: 10px;
    }

    .document-inline-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
    }

    .document-inline-copy {
      display: grid;
      gap: 4px;
    }

    .document-inline-row strong {
      color: var(--ink);
      font-size: 15px;
      line-height: 1.4;
    }

    .document-inline-copy p {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.55;
    }

    .document-inline-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
    }

    .inline-player {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #0f1720;
    }

    .inline-player iframe {
      width: 100%;
      min-height: 320px;
      border: 0;
      display: block;
    }

    .inline-player-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .inline-player-note {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.55;
    }

    .category-side {
      display: none;
    }

    .category-side ul {
      margin: 0;
      padding-left: 18px;
      color: var(--muted);
      line-height: 1.7;
    }

    .category-pagination {
      margin-inline: auto;
    }

    .service-box {
      display: grid;
      gap: 10px;
    }

    .service-box a {
      min-height: 44px;
      display: flex;
      align-items: center;
      padding: 0 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255,255,255,0.8);
      color: var(--ink);
      font-weight: 700;
    }

    ::selection {
      background: rgba(15, 118, 110, 0.22);
      color: var(--ink);
    }

    [data-document-list] .document-row {
      grid-template-columns: minmax(0, 1fr) 96px 196px;
    }

    [data-document-list] .document-row .document-date {
      color: var(--ink);
      font-weight: 700;
      text-align: center;
    }

    [data-document-list] .document-actions .download-btn {
      white-space: nowrap;
      flex: 0 0 auto;
    }

    .is-hidden {
      display: none !important;
    }

    .record-screen {
      display: grid;
      gap: 18px;
    }

    .screen[hidden] {
      display: none !important;
    }

    .record-screen.active {
      display: grid;
    }

    .record-hero {
      display: grid;
      gap: 14px;
    }

    .back-link {
      justify-self: start;
      color: #143d5a;
    }

    .record-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
      gap: 18px;
      align-items: start;
    }

    .record-panel,
    .record-sidebar,
    .comment-thread {
      display: grid;
      gap: 16px;
      padding: 22px;
    }

    .record-panel h3,
    .record-sidebar h3,
    .comment-thread h3 {
      color: var(--ink);
      font-size: 20px;
      line-height: 1.2;
    }

    .record-panel p,
    .record-sidebar p,
    .comment-item p,
    .agenda-list li,
    .attachment-list li {
      color: var(--tw-text-muted);
      line-height: 1.65;
    }

    .record-meta {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      padding-top: 6px;
    }

    .record-meta div {
      padding: 14px;
      border: 1px solid var(--tw-record-meta-border);
      border-radius: 8px;
      background: var(--tw-record-meta-bg);
    }

    .record-meta dt {
      color: #7a8795;
      font-size: 11px;
      font-weight: 850;
      text-transform: uppercase;
    }

    .record-meta dd {
      margin: 4px 0 0;
      color: var(--ink);
      font-weight: 760;
    }

    .agenda-list,
    .attachment-list {
      display: grid;
      gap: 10px;
      padding: 0;
      list-style: none;
    }

    .agenda-list li,
    .attachment-list li,
    .comment-item {
      padding: 14px;
      border: 1px solid var(--tw-list-item-border);
      border-radius: 8px;
      background: var(--tw-list-item-bg);
    }

    .comment-item {
      display: grid;
      gap: 8px;
    }

    .comment-item strong {
      color: var(--ink);
    }

    .comment-form {
      display: grid;
      gap: 14px;
      padding: 18px;
      border: 1px solid var(--tw-list-item-border);
      border-radius: 8px;
      background: var(--tw-list-item-bg);
    }

    .comment-form h3 {
      color: var(--ink);
      font-size: 18px;
    }

    .comment-form .field {
      display: grid;
      gap: 7px;
    }

    .comment-form input,
    .comment-form textarea {
      width: 100%;
      border: 1px solid var(--tw-input-border);
      border-radius: 8px;
      background: var(--tw-input-bg);
    }

    .event-card:focus-visible,
    .home-event-card:focus-visible,
    .card-action:focus-visible,
    .pagination button:focus-visible,
    .theme-toggle:focus-visible {
      outline: 3px solid rgba(31, 95, 139, 0.28);
      outline-offset: 3px;
    }

    html[data-theme="dark"] {
      color-scheme: dark;
      --ink: #edf4f7;
      --ink-2: #d5e0e7;
      --muted: #a8b7c5;
      --line: #293845;
      --line-strong: #3b4d5d;
      --paper: #0b1117;
      --paper-2: #0f1720;
      --surface: #111a22;
      --surface-soft: #151f28;
      --blue-strong: #9ac8e6;
      --green: #6bd3c5;
      --green-soft: #12362f;
      --gold-soft: #332617;
      --tw-bg: #0b1117;
      --tw-bg-muted: #0f1720;
      --tw-surface: #111a22;
      --tw-surface-soft: #151f28;
      --tw-surface-glass: rgba(17,26,34,0.9);
      --tw-border: #293845;
      --tw-border-strong: #3b4d5d;
      --tw-text: #edf4f7;
      --tw-text-muted: #a8b7c5;
      --tw-text-subtle: #8ea3b5;
      --tw-primary: #9ac8e6;
      --tw-primary-soft: #7fa8c3;
      --tw-accent: #6bd3c5;
      --tw-accent-soft: #12362f;
      --tw-neutral-900: #05090d;
      --tw-neutral-800: #f3f7fa;
      --tw-neutral-700: #b5c4d0;
      --tw-overlay-dark: rgba(9,16,23,0.9);
      --tw-shadow-hover: 0 12px 24px rgba(0,0,0,0.18);
      --tw-hero-bg: #05090d;
      --tw-hero-surface: #0f2f47;
      --tw-surface-glass-strong: rgba(17,26,34,0.92);
      --tw-side-title: #8ea3b5;
      --tw-accent-hover: #16232d;
      --tw-accent-active: linear-gradient(180deg, rgba(15, 118, 110, 0.34), rgba(21, 37, 47, 0.98));
      --tw-accent-active-border: rgba(45, 212, 191, 0.58);
      --tw-accent-active-text: #f4fbff;
      --tw-insight-surface: #111a22;
      --tw-card-surface: #111a22;
      --tw-photo-surface: #0f1720;
      --tw-tag-surface: #0f1720;
      --tw-status-text: #a8b7c5;
      --tw-ink-strong: #05090d;
      --tw-text-bright: #eef6fb;
      --tw-text-strong: #f3f7fa;
      --tw-muted-strong: #9eb0bf;
      --tw-brand-mark-bg: #05090d;
      --tw-brand-mark-fg: #f8efe1;
      --tw-brand-mark-border: rgba(248,239,225,0.52);
      --tw-brand-subtext: #a8b7c5;
      --tw-button-secondary-bg: #0f1720;
      --tw-button-secondary-border: #32414f;
      --tw-button-hover-shadow: 0 12px 24px rgba(0,0,0,0.18);
      --tw-hero-copy-muted: #a8b7c5;
      --tw-hero-chip-bg: rgba(255,255,255,0.08);
      --tw-hero-chip-border: rgba(255,255,255,0.18);
      --tw-hero-caption-bg: rgba(255,255,255,0.1);
      --tw-hero-caption-text: rgba(255,255,255,0.82);
      --tw-hero-caption-border: rgba(255,255,255,0.16);
      --tw-hero-metric-border: rgba(255,255,255,0.13);
      --tw-hero-metric-label: rgba(255,255,255,0.68);
      --tw-dark-side-box-border: #2b3946;
      --tw-dark-side-box-bg: linear-gradient(180deg, rgba(20, 30, 39, 0.96), rgba(15, 23, 32, 0.94));
      --tw-dark-side-box-accent: linear-gradient(90deg, #3c7ea7, #3fb8a8);
      --tw-dark-event-surface: #1c1a14;
      --tw-dark-event-border: #3a3326;
      --tw-dark-control-surface: #0f1720;
      --tw-dark-control-border: #32414f;
      --tw-dark-divider: #2a3844;
      --tw-dark-input-bg: #0f1720;
      --tw-dark-input-border: #293845;
      --tw-dark-primary-bg: #0f766e;
      --tw-dark-primary-text: #f2fffd;
      --tw-dark-primary-shadow: 0 14px 30px rgba(15,118,110,0.24);
      --tw-dark-toolbar-bg: #17384a;
      --tw-dark-toolbar-text: #e8f6ff;
      --tw-record-meta-border: #293845;
      --tw-record-meta-bg: #0f1720;
      --tw-list-item-border: #293845;
      --tw-list-item-bg: #0f1720;
      --tw-input-border: #293845;
      --tw-input-bg: #0f1720;
      --tw-filter-bg: #0f1720;
      --tw-filter-text: #b5c4d0;
      --tw-filter-border: #32414f;
      --tw-doc-icon-bg: #0f1720;
      --tw-doc-icon-line: #7f91a0;
      --tw-doc-icon-line-2: #5d6f7f;
      --tw-doc-icon-line-3: #4b5b69;
      --tw-site-nav-bg: rgba(17,26,34,0.9);
      --tw-surface-border-soft: #293845;
      --tw-surface-border-header: #293845;
      --tw-dark-theme-icon-bg: #f5d37b;
      --tw-dark-theme-icon-ring: rgba(245,211,123,0.16);
      --tw-dark-hero-border: #1c2b36;
      --tw-dark-hero-visual: linear-gradient(135deg, #0f2f47 0%, #10594f 58%, #6d4f18 100%);
      --tw-dark-inline-player-bg: #091017;
      --tw-dark-contrast-text: #ffffff;
      --tw-dark-selection-bg: rgba(45, 212, 191, 0.34);
      --tw-dark-selection-text: #f3f7fa;
      --tw-dark-action-border: rgba(45,212,191,0.5);
      --tw-dark-action-border-active: rgba(45,212,191,0.54);
      --tw-dark-primary-hover-border: rgba(98, 220, 205, 0.46);
      --tw-dark-primary-hover-border-soft: rgba(98, 220, 205, 0.36);
      --tw-dark-theme-toggle-border: rgba(255,255,255,0.14);
      --tw-dark-muted-alt: #97a8b6;
      --tw-dark-bg-alt: #0e151d;
    }

    html[data-theme="dark"] body {
      background:
        linear-gradient(90deg, rgba(154,200,230,0.045) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, rgba(154,200,230,0.035) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, var(--tw-bg), var(--tw-dark-bg-alt) 360px),
        var(--tw-bg) !important;
      color: var(--ink) !important;
    }

    html[data-theme="dark"] .theme-toggle {
      border-color: var(--tw-dark-theme-toggle-border);
      background: var(--tw-surface-glass-strong);
    }

    html[data-theme="dark"] .theme-icon {
      background: var(--tw-dark-theme-icon-bg);
      box-shadow: 0 0 0 4px var(--tw-dark-theme-icon-ring);
    }

    html[data-theme="dark"] .top-strip,
    html[data-theme="dark"] .top-strip a,
    html[data-theme="dark"] .brand p,
    html[data-theme="dark"] .hero-copy p,
    html[data-theme="dark"] .hero-copy .metric span,
    html[data-theme="dark"] .home-event-card p,
    html[data-theme="dark"] .record-panel p,
    html[data-theme="dark"] .record-sidebar p,
    html[data-theme="dark"] .comment-item p,
    html[data-theme="dark"] .agenda-list li,
    html[data-theme="dark"] .attachment-list li,
    html[data-theme="dark"] .event-card p,
    html[data-theme="dark"] .card p,
    html[data-theme="dark"] .article-card p,
    html[data-theme="dark"] .page-intro p,
    html[data-theme="dark"] .document-row p,
    html[data-theme="dark"] .topic-card p,
    html[data-theme="dark"] .comment-card p,
    html[data-theme="dark"] .contact-card p,
    html[data-theme="dark"] .person-card p,
    html[data-theme="dark"] .institution-card p,
    html[data-theme="dark"] .collective-card p {
      color: var(--muted) !important;
    }

    html[data-theme="dark"] .site-header,
    html[data-theme="dark"] .site-nav,
    html[data-theme="dark"] .home-events,
    html[data-theme="dark"] .side-box,
    html[data-theme="dark"] .workbench-sidebar .side-box,
    html[data-theme="dark"] .record-panel,
    html[data-theme="dark"] .record-sidebar,
    html[data-theme="dark"] .comment-thread,
    html[data-theme="dark"] .pagination,
    html[data-theme="dark"] .rail-box,
    html[data-theme="dark"] .insight-card,
    html[data-theme="dark"] .article-card,
    html[data-theme="dark"] .card,
    html[data-theme="dark"] .page-band,
    html[data-theme="dark"] .document-row,
    html[data-theme="dark"] .topic-card,
    html[data-theme="dark"] .comment-card,
    html[data-theme="dark"] .contact-card,
    html[data-theme="dark"] .person-card,
    html[data-theme="dark"] .institution-card,
    html[data-theme="dark"] .collective-card,
    html[data-theme="dark"] .document-toolbar {
      border-color: var(--tw-border) !important;
      background: var(--tw-surface) !important;
      box-shadow: 0 16px 38px rgba(0,0,0,0.24) !important;
    }

    html[data-theme="dark"] .masthead,
    html[data-theme="dark"] .site-nav {
      background: var(--tw-surface-glass) !important;
    }

    html[data-theme="dark"] .side-box,
    html[data-theme="dark"] .workbench-sidebar .side-box {
      background: var(--tw-dark-side-box-bg) !important;
      border-color: var(--tw-dark-side-box-border) !important;
      box-shadow: 0 16px 34px rgba(0,0,0,0.22) !important;
    }

    html[data-theme="dark"] .side-box::before {
      background: var(--tw-dark-side-box-accent) !important;
    }

    html[data-theme="dark"] .side-title {
      color: var(--tw-text-subtle) !important;
    }

    html[data-theme="dark"] .section-button {
      color: var(--tw-neutral-700) !important;
      background: transparent !important;
    }

    html[data-theme="dark"] .section-button strong {
      color: var(--tw-text-bright) !important;
    }

    html[data-theme="dark"] .section-button span {
      color: var(--tw-dark-muted-alt) !important;
    }

    html[data-theme="dark"] .section-button:hover,
    html[data-theme="dark"] .section-button:focus-visible {
      background: var(--tw-accent-hover) !important;
      color: var(--tw-text-bright) !important;
    }

    html[data-theme="dark"] .section-button.active {
      background: var(--tw-accent-active) !important;
      border-color: var(--tw-accent-active-border) !important;
      box-shadow: inset 0 0 0 2px rgba(45, 212, 191, 0.28) !important;
    }

    html[data-theme="dark"] .section-button.active strong {
      color: var(--tw-accent-active-text) !important;
    }

    html[data-theme="dark"] .service-box a {
      border-color: var(--tw-dark-control-border) !important;
      background: var(--tw-dark-control-surface) !important;
      color: var(--tw-text-bright) !important;
      box-shadow: none !important;
    }

    html[data-theme="dark"] .service-box a:hover,
    html[data-theme="dark"] .service-box a:focus-visible {
      border-color: var(--tw-dark-primary-hover-border) !important;
      background: var(--tw-accent-hover) !important;
      color: var(--tw-dark-contrast-text) !important;
    }

    html[data-theme="dark"] .hero {
      background: var(--tw-neutral-900) !important;
      border-color: var(--tw-dark-hero-border) !important;
    }

    html[data-theme="dark"] .hero-copy {
      background-color: var(--tw-neutral-900) !important;
    }

    html[data-theme="dark"] .hero-visual {
      background:
        linear-gradient(135deg, rgba(255,255,255,0.11), transparent 38%),
        linear-gradient(90deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 100%),
        var(--tw-dark-hero-visual) !important;
      background-size: auto, 52px 52px, 52px 52px, auto !important;
    }

    html[data-theme="dark"] .home-event-card,
    html[data-theme="dark"] .event-card {
      border-color: var(--tw-dark-event-border) !important;
      background: var(--tw-dark-event-surface) !important;
    }

    html[data-theme="dark"] .quick-list a,
    html[data-theme="dark"] .update-list li,
    html[data-theme="dark"] .photo,
    html[data-theme="dark"] .compact-item {
      border-color: var(--tw-dark-input-border) !important;
      background: var(--tw-dark-input-bg) !important;
      color: var(--ink) !important;
    }

    html[data-theme="dark"] .quick-list a span,
    html[data-theme="dark"] .update-list li span,
    html[data-theme="dark"] .compact-item .meta-row,
    html[data-theme="dark"] .compact-item p {
      color: var(--muted) !important;
    }

    html[data-theme="dark"] .compact-item strong {
      color: var(--tw-neutral-800) !important;
    }

    html[data-theme="dark"] button.compact-item:hover,
    html[data-theme="dark"] button.compact-item:focus-visible {
      background: var(--tw-accent-hover) !important;
      border-color: var(--tw-dark-primary-hover-border-soft) !important;
      box-shadow: var(--tw-shadow-hover) !important;
    }

    html[data-theme="dark"] .category-record {
      border-color: var(--tw-dark-divider) !important;
      background: var(--tw-dark-side-box-bg) !important;
      box-shadow: 0 16px 34px rgba(0,0,0,0.22) !important;
    }

    html[data-theme="dark"] .category-record__body h3 {
      color: var(--tw-neutral-800) !important;
    }

    html[data-theme="dark"] .category-record__body p,
    html[data-theme="dark"] .category-record__meta-label {
      color: var(--tw-muted-strong) !important;
    }

    html[data-theme="dark"] .category-record__date {
      color: var(--tw-primary-soft) !important;
    }

    html[data-theme="dark"] .category-record__expand {
      border-top-color: var(--tw-dark-divider) !important;
    }

    html[data-theme="dark"] .expand-panel,
    html[data-theme="dark"] .document-inline-row {
      border-color: var(--tw-dark-divider) !important;
      background: var(--tw-dark-control-surface) !important;
      box-shadow: none !important;
    }

    html[data-theme="dark"] .document-inline-row strong,
    html[data-theme="dark"] .expand-panel h4 {
      color: var(--tw-neutral-800) !important;
    }

    html[data-theme="dark"] .inline-player {
      border-color: var(--tw-dark-divider) !important;
      background: var(--tw-dark-inline-player-bg) !important;
    }

    html[data-theme="dark"] .category-record__actions .secondary-btn {
      border-color: var(--tw-dark-control-border) !important;
      background: var(--tw-dark-control-surface) !important;
      color: var(--tw-text-bright) !important;
      box-shadow: none !important;
    }

    html[data-theme="dark"] .category-record__actions .secondary-btn:hover,
    html[data-theme="dark"] .category-record__actions .secondary-btn:focus-visible {
      border-color: var(--tw-dark-primary-hover-border) !important;
      background: var(--tw-accent-hover) !important;
      color: var(--tw-dark-contrast-text) !important;
    }

    html[data-theme="dark"] h1,
    html[data-theme="dark"] h2,
    html[data-theme="dark"] h3,
    html[data-theme="dark"] h4,
    html[data-theme="dark"] strong,
    html[data-theme="dark"] blockquote,
    html[data-theme="dark"] .brand h1,
    html[data-theme="dark"] .article-card h3,
    html[data-theme="dark"] .article-card.featured h3,
    html[data-theme="dark"] .card h3,
    html[data-theme="dark"] .document-row h3,
    html[data-theme="dark"] .topic-card h3,
    html[data-theme="dark"] .comment-card blockquote,
    html[data-theme="dark"] .comment-card h3,
    html[data-theme="dark"] .person-card h3,
    html[data-theme="dark"] .contact-card h3,
    html[data-theme="dark"] .record-panel h3,
    html[data-theme="dark"] .record-sidebar h3,
    html[data-theme="dark"] .comment-thread h3,
    html[data-theme="dark"] .comment-thread h2,
    html[data-theme="dark"] .comment-item strong {
      color: var(--tw-neutral-800) !important;
    }

    html[data-theme="dark"] .header-actions .secondary-btn,
    html[data-theme="dark"] .record-sidebar .secondary-btn,
    html[data-theme="dark"] .comment-form .primary-btn {
      border-color: var(--tw-dark-action-border) !important;
      background: var(--tw-dark-primary-bg) !important;
      color: var(--tw-dark-primary-text) !important;
      box-shadow: var(--tw-dark-primary-shadow) !important;
    }

    html[data-theme="dark"] .download-btn,
    html[data-theme="dark"] .document-toolbar button {
      border-color: rgba(154,200,230,0.34) !important;
      background: var(--tw-dark-toolbar-bg) !important;
      color: var(--tw-dark-toolbar-text) !important;
    }

    html[data-theme="dark"] ::selection {
      background: var(--tw-dark-selection-bg);
      color: var(--tw-dark-selection-text);
    }

    html[data-theme="dark"] .document-toolbar button.active {
      border-color: var(--tw-dark-action-border-active) !important;
      background: var(--tw-dark-primary-bg) !important;
      color: var(--tw-dark-primary-text) !important;
    }

    html[data-theme="dark"] .record-meta div,
    html[data-theme="dark"] .agenda-list li,
    html[data-theme="dark"] .attachment-list li,
    html[data-theme="dark"] .comment-item,
    html[data-theme="dark"] .comment-form,
    html[data-theme="dark"] .card-action {
      border-color: var(--tw-list-item-border) !important;
      background: var(--tw-list-item-bg) !important;
    }

    html[data-theme="dark"] .card-action,
    html[data-theme="dark"] .back-link,
    html[data-theme="dark"] .text-link {
      color: var(--tw-primary) !important;
    }

    html[data-theme="dark"] .primary-btn {
      border-color: var(--tw-dark-action-border) !important;
      background: var(--tw-dark-primary-bg) !important;
      color: var(--tw-dark-primary-text) !important;
      box-shadow: var(--tw-dark-primary-shadow) !important;
    }

    html[data-theme="dark"] input,
    html[data-theme="dark"] textarea {
      border-color: var(--tw-dark-input-border) !important;
      background: var(--tw-dark-input-bg) !important;
      color: var(--ink) !important;
    }

    @media (max-width: 960px) {
      .home-event-grid,
      .record-grid,
      .contact-layout {
        grid-template-columns: 1fr;
      }

      .contact-layout > .grid-2 {
        grid-template-columns: 1fr;
      }

      .section-head {
        align-items: start;
        flex-direction: column;
      }

      .category-record__head {
        grid-template-columns: 1fr;
        display: grid;
      }

      .category-record__meta {
        justify-items: start;
        text-align: left;
      }

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

      .footer-brand-head {
        grid-template-columns: 104px minmax(0, 1fr);
        gap: 14px;
        align-items: center;
      }

      .footer-logo {
        width: 104px;
        height: 104px;
      }
    }

    @media (max-width: 620px) {
      .masthead {
        padding: 12px 14px !important;
      }

      .brand h1 {
        font-size: 24px !important;
      }

      .brand p {
        font-size: 12px !important;
      }

      .header-actions {
        display: none !important;
      }
    }