:root {
  --page: #071018;
  --paper: #101a21;
  --paper-2: #16252e;
  --paper-3: #20333d;
  --ink: #f4efe4;
  --ink-2: #d1d9d8;
  --ink-3: #8aa4ad;
  --ink-4: #55727b;
  --rule: #2b4651;
  --rule-2: #496773;
  --teal: #16a085;
  --teal-2: rgba(22, 160, 133, 0.18);
  --rust: #c0392b;
  --rust-2: rgba(192, 57, 43, 0.18);
  --green: #65c843;
  --green-2: rgba(101, 200, 67, 0.18);
  --gold: #f0b323;
  --gold-2: rgba(240, 179, 35, 0.18);
  --violet: #7b57b6;
  --violet-2: rgba(123, 87, 182, 0.2);
  --blue: #00a5ff;
  --blue-2: rgba(0, 165, 255, 0.18);
  --brass: #c49a6c;
  --brass-2: rgba(196, 154, 108, 0.22);
  --shadow: 0 22px 60px rgba(0, 0, 0, 0.35);
  --radius: 7px;
  --sans: "Manrope", "Inter", system-ui, sans-serif;
  --serif: "Lora", Georgia, serif;
  --mono: "JetBrains Mono", Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
}

body {
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  background:
    linear-gradient(90deg, rgba(0, 165, 255, 0.04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(0, 165, 255, 0.035) 1px, transparent 1px),
    var(--page);
  background-size: 56px 56px, 56px 56px, auto;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid #00d5c6;
  outline-offset: 3px;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
  padding: 24px 20px 28px;
  border-right: 1px solid var(--rule);
  background: #08121a;
}

.brand {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: center;
}

.brand-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 2px solid var(--brass);
  color: var(--brass);
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.brand-name {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 800;
  line-height: 0.98;
  color: var(--ink);
}

.brand-line,
.eyebrow,
.meta,
.label {
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

.brand-line {
  margin-top: 4px;
}

.side-section {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

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

.nav-list,
.legend-list,
.stack {
  display: grid;
  gap: 8px;
}

.nav-button {
  width: 100%;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-2);
  text-align: left;
}

.nav-button:hover,
.nav-button.is-active {
  border-color: var(--rule);
  background: #0f2029;
  color: var(--ink);
}

.nav-index {
  color: var(--ink-4);
  font-family: var(--mono);
  font-size: 11px;
}

.nav-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--brass);
  border-radius: 50%;
  color: var(--brass);
  font-family: var(--mono);
  font-size: 12px;
}

.side-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mini-stat {
  min-height: 86px;
  padding: 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: #0c1820;
}

.mini-number {
  display: block;
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
}

.mini-text {
  display: block;
  margin-top: 7px;
  color: var(--ink-3);
  font-size: 12px;
}

.legend-item {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  color: var(--ink-2);
  font-size: 13px;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: var(--tone-bg);
  color: var(--tone);
}

.main {
  min-width: 0;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 34px;
  border-bottom: 1px solid var(--rule);
  background: rgba(7, 16, 24, 0.92);
  backdrop-filter: blur(14px);
}

.template-topbar {
  min-height: 96px;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  align-items: center;
  padding: 10px 34px;
  border-bottom-color: rgba(244, 239, 228, 0.22);
  background:
    linear-gradient(90deg, rgba(0, 165, 255, 0.06) 1px, transparent 1px),
    rgba(7, 16, 24, 0.96);
  background-size: 56px 56px, auto;
}

.home-topbar {
  min-height: 72px;
  grid-template-columns: minmax(0, 1fr);
  padding-top: 8px;
  padding-bottom: 8px;
}

.top-logo {
  width: 300px;
  height: 76px;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
}

.top-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.template-menu {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: clamp(16px, 2.6vw, 38px);
}

.template-nav-link {
  position: relative;
  min-height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-transform: none;
  font-variant-numeric: oldstyle-nums;
}

.template-nav-link.is-active {
  font-style: italic;
  font-weight: 600;
}

.template-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--teal);
  transition: transform 150ms ease;
}

.template-nav-link:hover::after,
.template-nav-link.is-active::after {
  transform: scaleX(1);
}

.template-nav-link.is-active {
  color: #00d5c6;
  font-style: italic;
  font-weight: 600;
}

/* ============================================================
   PUBLIC SUMMARY PANEL — plain-language layer on each review.
   Lives at the TOP of every review page, before the technical content,
   so non-scientists can engage with the review's central conclusion
   before encountering causal-evidence taxonomies and falsifiability
   tables.
   ============================================================ */
.public-summary {
  margin: 0 0 36px;
  padding: 32px 36px;
  background: linear-gradient(180deg, rgba(40,210,255,0.07), rgba(40,210,255,0.02));
  border: 1px solid rgba(40,210,255,0.25);
  border-radius: 10px;
  position: relative;
}
.public-summary::before {
  content: "";
  position: absolute;
  left: 0; top: 22px; bottom: 22px;
  width: 3px;
  background: linear-gradient(180deg,
    #ff4040 0%, #ff9a2a 16%, #ffd23f 32%, #5ee48a 50%,
    #28d2ff 68%, #4b7cff 84%, #a25cff 100%);
  border-radius: 2px;
}
.public-summary .ps-eyebrow {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal, #28d2ff);
  margin-bottom: 10px;
}
.public-summary .ps-headline {
  margin: 0 0 22px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
  font-style: italic;
}
.public-summary .ps-row {
  margin: 18px 0;
}
.public-summary .ps-row .ps-label {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: 6px;
}
.public-summary .ps-row p {
  margin: 0;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}
.public-summary .ps-analogy p {
  font-style: italic;
  color: var(--ink-2);
  border-left: 2px solid rgba(40,210,255,0.4);
  padding-left: 14px;
}
.public-summary .ps-foot {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(40,210,255,0.18);
  text-align: right;
}
.public-summary .ps-jump {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  font-weight: 600;
}
.public-summary .ps-jump:hover {
  color: var(--teal, #28d2ff);
}

.search-mark {
  width: 22px;
  height: 22px;
  position: relative;
  display: inline-block;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: transparent;
}

.search-mark::after {
  content: "";
  position: absolute;
  right: -8px;
  bottom: -5px;
  width: 10px;
  height: 2px;
  transform: rotate(45deg);
  background: var(--ink);
}

.topbar-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.05;
}

.topbar-sub {
  margin-top: 3px;
  color: var(--ink-3);
  font-size: 13px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.mobile-select {
  display: none;
  height: 42px;
  min-width: 180px;
  padding: 0 10px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}

.page {
  width: min(1320px, 100%);
  padding: 34px 34px 86px;
}

.landing-page {
  width: 100%;
  padding: 0 0 86px;
}

.landing-page > .section {
  width: min(1320px, calc(100% - 68px));
  margin-left: auto;
  margin-right: auto;
}

.template-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid rgba(244, 239, 228, 0.22);
  background: #02080d;
}

.template-hero img {
  width: 100%;
  min-height: 300px;
  display: block;
  object-fit: cover;
}

.hero-mark-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 28px;
  padding: 22px 40px 26px;
  border-bottom: 1px solid var(--rule, #2b4651);
  background: radial-gradient(ellipse at 20% 50%, rgba(196,154,108,0.10), transparent 65%);
}

.template-hero img.hero-logo-png {
  flex: 0 0 205px;
  width: 205px !important;
  min-height: 0 !important;
  height: auto !important;
  display: block;
  margin: 0;
  border-radius: 6px;
  align-self: center;
  object-fit: contain;
}

.hero-tagline-strip-row {
  width: 100%;
  overflow-x: auto;
  background: #02080d;
  border-bottom: 1px solid rgba(244, 239, 228, 0.14);
}

.template-hero img.hero-tagline-strip {
  display: block;
  width: 100%;
  min-width: 640px;
  max-width: 1536px;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 auto;
  object-fit: contain;
}

.hero-slogan {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hero-slogan {
  padding-left: 4px;
}

.hero-slogan .eyebrow {
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3, #8aa4ad);
  margin-bottom: 4px;
}

.hero-tagline {
  font-family: "Lora", Georgia, serif;
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.05;
  color: var(--ink, #f4efe4);
  letter-spacing: -0.01em;
  margin: 0;
}

.hero-subtagline {
  font-family: "Manrope", sans-serif;
  font-size: clamp(13px, 1vw, 14px);
  line-height: 1.35;
  color: var(--ink-2, #d1d9d8);
  margin: 2px 0 0;
  max-width: 560px;
}

@media (max-width: 760px) {
  .hero-mark-row {
    flex-direction: column;
    gap: 12px;
    padding: 14px 24px 16px;
    text-align: center;
  }
  .template-hero img.hero-logo-png { flex: 0 0 auto; width: 150px !important; margin: 0 auto; }
  .hero-slogan { padding-left: 0; align-items: center; }
  .hero-tagline br { display: none; }
}

.hero-prism-scene-removed { display: none !important; }

.hero-logo-row {
  display: none;
}

.hero-logo-mark {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-logo-mark svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,0.45));
}

.hero-prism-scene {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: stretch;
}

.hero-prism-scene svg {
  width: 100%;
  height: auto;
  max-height: 320px;
  display: block;
  filter: drop-shadow(0 4px 24px rgba(0,0,0,0.55));
}

@media (max-width: 880px) {
  .hero-logo-row {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 40px 24px;
  }
  .hero-logo-mark { max-width: 240px; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-prism-scene animate { display: none; }
}

.hero-live-copy {
  width: min(1320px, calc(100% - 68px));
  margin: 0 auto;
  padding: 18px 0 22px;
  color: var(--ink-2);
}

.hero-live-copy h1 {
  margin: 5px 0 3px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(34px, 4vw, 62px);
  font-weight: 800;
  line-height: 0.98;
}

.hero-live-copy p {
  max-width: 720px;
  margin: 0;
  color: var(--ink-2);
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.35;
}

.template-directory {
  position: relative;
  display: block;
  padding: 22px 34px;
  border-bottom: 1px solid rgba(244, 239, 228, 0.25);
  background: rgba(9, 19, 26, 0.94);
}

.directory-card-grid {
  width: min(1320px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid rgba(244, 239, 228, 0.22);
  border-radius: var(--radius);
  overflow: hidden;
  background: #071018;
}

.directory-tile {
  min-height: 164px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 9px;
  padding: 18px 14px;
  border: 0;
  border-right: 1px solid rgba(244, 239, 228, 0.18);
  background: transparent;
  text-align: center;
}

.directory-tile:last-child {
  border-right: 0;
}

.directory-tile:hover {
  background: rgba(0, 213, 198, 0.08);
}

.tile-icon {
  width: 82px;
  height: 72px;
  display: grid;
  place-items: center;
  color: var(--teal);
  font-family: var(--mono);
  font-size: 42px;
  line-height: 1;
}

.tile-red .tile-icon,
.tile-red .tile-cta {
  color: #ff3030;
}

.tile-blue .tile-icon,
.tile-blue .tile-cta {
  color: var(--blue);
}

.tile-brass .tile-icon,
.tile-brass .tile-cta {
  color: var(--brass);
}

.tile-title {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 17px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tile-cta {
  color: var(--teal);
  font-size: 18px;
}

.tile-icon-plot::before {
  content: "E\2197M";
  font-size: 27px;
}

.tile-icon-play::before {
  content: "\25B6";
  width: 82px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 3px solid currentColor;
  border-radius: 17px;
}

.tile-icon-scope::before {
  content: "\2695";
}

.tile-icon-doc::before {
  content: "\21E9";
  width: 58px;
  height: 70px;
  display: grid;
  place-items: center;
  border: 3px solid currentColor;
  border-radius: 6px;
}

.tile-icon-folder::before {
  content: "\25B1";
  transform: rotate(-2deg);
  font-size: 64px;
}

.tile-icon-mark::before {
  content: "\03A9";
  font-size: 64px;
  font-weight: 800;
}

.brand-tagline {
  padding: 22px 34px;
  border-bottom: 1px solid rgba(244, 239, 228, 0.25);
  background: #071018;
}

.tagline-grid {
  width: min(1320px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid rgba(244, 239, 228, 0.18);
  border-radius: var(--radius);
  overflow: hidden;
}

.tagline-panel {
  min-height: 132px;
  padding: 20px;
  border-right: 1px solid rgba(244, 239, 228, 0.18);
  background: rgba(7, 16, 24, 0.72);
}

.tagline-panel:last-child {
  border-right: 0;
}

.tagline-panel h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.08;
}

.tagline-panel h2 span {
  color: #ff4b42;
}

.tagline-panel p {
  margin: 12px 0 0;
  color: var(--ink-3);
  font-size: 13px;
}

.template-metrics {
  margin-top: 0;
  padding: 24px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
}

.btn {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--blue);
  color: #061018;
  font-weight: 800;
  text-decoration: none;
}

.btn:hover {
  border-color: var(--brass);
  background: var(--brass);
}

.btn-secondary {
  border-color: var(--rule-2);
  background: var(--paper);
  color: var(--ink);
}

.btn-secondary:hover {
  border-color: var(--blue);
  background: var(--blue-2);
  color: var(--ink);
}

.btn-small {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 13px;
}

.docket-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(380px, 0.88fr);
  gap: 24px;
  align-items: stretch;
}

.briefing {
  min-height: 560px;
  display: grid;
  align-content: space-between;
  padding: 34px;
  position: relative;
  overflow: hidden;
  border: 1px solid #385765;
  border-radius: var(--radius);
  background:
    linear-gradient(115deg, rgba(192, 57, 43, 0.16), transparent 16%),
    linear-gradient(120deg, rgba(240, 179, 35, 0.12), transparent 24%),
    linear-gradient(130deg, rgba(101, 200, 67, 0.12), transparent 32%),
    linear-gradient(140deg, rgba(0, 165, 255, 0.14), transparent 42%),
    #09131a;
  box-shadow: var(--shadow);
}

.briefing::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(196, 154, 108, 0.22);
  border-radius: inherit;
}

.briefing h1,
.page-title,
.review-title,
.section-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 800;
  line-height: 0.98;
}

.briefing h1 {
  max-width: 760px;
  margin-top: 18px;
  font-size: 70px;
  color: var(--ink);
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.55);
}

.briefing-lede {
  max-width: 760px;
  margin: 20px 0 0;
  color: var(--ink-2);
  font-family: var(--serif);
  font-size: 23px;
  line-height: 1.35;
}

.hero-logo-frame {
  width: min(438px, 100%);
  margin-bottom: 26px;
  overflow: hidden;
  border: 1px solid rgba(196, 154, 108, 0.5);
  border-radius: var(--radius);
  background: #03090e;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.hero-logo-frame img {
  width: 100%;
  display: block;
}

.briefing-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 42px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}

.metric-value {
  display: block;
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
}

.metric-label {
  display: block;
  margin-top: 8px;
  color: var(--ink-3);
  font-size: 13px;
}

.latest-panel {
  min-height: 560px;
  display: grid;
  grid-template-rows: 260px 1fr;
  overflow: hidden;
  border: 1px solid #385765;
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.latest-image,
.review-image,
.card-image {
  position: relative;
  overflow: hidden;
  background: var(--paper-3);
}

.review-image-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.latest-image img,
.review-image img,
.card-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.review-image img {
  object-fit: contain;
  background: #f7f3e9;
}

.latest-body {
  padding: 24px;
}

.latest-title {
  margin: 12px 0 12px;
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 800;
  line-height: 1.04;
}

.latest-copy,
.section-copy,
.body-copy {
  color: var(--ink-2);
}

.image-chip {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 5px 8px;
  border: 1px solid rgba(196, 154, 108, 0.45);
  border-radius: var(--radius);
  background: rgba(7, 16, 24, 0.78);
  color: var(--brass);
  font-size: 12px;
  font-weight: 800;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 14px;
  align-items: center;
}

.spaced {
  justify-content: space-between;
}

.section {
  margin-top: 36px;
}

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

.section-title {
  font-size: 36px;
}

.section-copy {
  max-width: 780px;
  margin: 7px 0 0;
}

.mission-grid,
.domain-grid,
.review-grid,
.governance-grid {
  display: grid;
  gap: 16px;
}

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

.mission-panel,
.domain-panel,
.method-panel,
.content-panel,
.aside-panel,
.person-panel,
.policy-panel {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
}

.mission-panel,
.domain-panel,
.method-panel,
.policy-panel {
  padding: 18px;
}

.mission-panel h3,
.domain-panel h3,
.method-panel h3,
.policy-panel h3,
.content-panel h2,
.aside-panel h3,
.person-panel h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 800;
  line-height: 1.08;
}

.mission-panel h3,
.domain-panel h3,
.method-panel h3,
.policy-panel h3 {
  font-size: 24px;
}

.mission-panel p,
.domain-panel p,
.method-panel p,
.policy-panel p,
.content-panel p,
.aside-panel p,
.person-panel p {
  color: var(--ink-2);
}

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

.case-card {
  min-height: 390px;
  display: grid;
  grid-template-rows: 148px 1fr;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  transition: border-color 150ms ease, transform 150ms ease;
}

.case-card:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
}

.case-body {
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.case-title {
  margin: 10px 0;
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 800;
  line-height: 1.12;
}

.case-copy {
  margin: 0 0 18px;
  color: var(--ink-2);
  font-size: 14px;
}

.card-foot {
  margin-top: auto;
}

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

.domain-panel-link {
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.domain-panel-link:hover,
.domain-panel-link:focus-visible {
  border-color: var(--teal);
  transform: translateY(-2px);
  background: linear-gradient(180deg, var(--paper) 0%, rgba(40, 210, 255, 0.04) 100%);
  outline: none;
}

.domain-panel-link:focus-visible {
  box-shadow: 0 0 0 2px var(--teal);
}

.domain-cta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--teal);
  text-transform: uppercase;
  font-weight: 700;
}

.progress {
  height: 9px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--paper-3);
}

.progress-fill {
  height: 100%;
  width: var(--progress);
  background: linear-gradient(90deg, var(--green), var(--gold), var(--rust));
}

.domain-foot {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
  color: var(--ink-3);
  font-size: 13px;
}

.badge {
  --tone: var(--ink-3);
  --tone-bg: var(--paper-2);
  --badge-text: var(--ink);
  display: inline-flex;
  min-height: 27px;
  align-items: center;
  gap: 7px;
  width: fit-content;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--tone) 55%, transparent);
  border-radius: var(--radius);
  background: var(--tone-bg);
  color: var(--badge-text);
  font-size: 12px;
  font-weight: 800;
}

.badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tone);
}

.tone-supported {
  --tone: var(--green);
  --tone-bg: var(--green-2);
}

.tone-caveats {
  --tone: var(--gold);
  --tone-bg: var(--gold-2);
}

.tone-contested,
.tone-contradicted {
  --tone: #ff766b;
  --tone-bg: rgba(255, 118, 107, 0.16);
}

.tone-incomplete,
.tone-unfalsifiable {
  --tone: #c6a8ff;
  --tone-bg: rgba(198, 168, 255, 0.16);
}

.tone-pending {
  --tone: var(--ink-3);
  --tone-bg: var(--paper-2);
}

.tone-supported .legend-dot,
.tone-caveats .legend-dot,
.tone-contested .legend-dot,
.tone-contradicted .legend-dot,
.tone-incomplete .legend-dot,
.tone-unfalsifiable .legend-dot,
.tone-pending .legend-dot {
  background: var(--tone-bg);
  color: var(--tone);
}

.page-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}

.page-title {
  margin-top: 6px;
  font-size: 56px;
}

.archive-controls {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 10px;
  margin: 22px 0;
}

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

.field label {
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 800;
}

.field input,
.field select {
  width: 100%;
  height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}

.archive-list {
  display: grid;
  gap: 8px;
}

.archive-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1.6fr) 168px 168px 116px;
  gap: 14px;
  align-items: center;
  min-height: 78px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
}

.archive-row:hover {
  border-color: var(--teal);
}

.archive-num {
  color: var(--ink-4);
  font-family: var(--mono);
  font-size: 13px;
}

.archive-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.12;
}

.archive-sub,
.source-venue {
  margin-top: 3px;
  color: var(--ink-3);
  font-size: 13px;
}

.status-pill {
  display: inline-flex;
  min-height: 29px;
  align-items: center;
  width: fit-content;
  padding: 4px 9px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.status-pill.is-live {
  border-color: color-mix(in srgb, var(--green) 35%, transparent);
  background: var(--green-2);
  color: var(--green);
}

.review-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
  gap: 24px;
  align-items: stretch;
}

.review-cover {
  min-height: 480px;
  display: grid;
  align-content: space-between;
  padding: 30px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
}

.review-title {
  margin: 16px 0;
  font-size: 58px;
}

.hypothesis-statement {
  padding-left: 16px;
  border-left: 4px solid var(--teal);
  color: var(--ink-2);
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.35;
}

.review-visual {
  display: grid;
  grid-template-rows: 290px auto;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
}

.score-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--rule);
}

.score-cell {
  min-height: 108px;
  padding: 16px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.score-cell:nth-child(2n) {
  border-right: 0;
}

.score-cell:nth-last-child(-n+2) {
  border-bottom: 0;
}

.score-value {
  margin-top: 6px;
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 800;
  line-height: 1.08;
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 318px;
  gap: 24px;
  margin-top: 24px;
}

.review-jumpbar {
  display: none;
  gap: 8px;
  margin-top: 18px;
  padding: 10px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: rgba(16, 26, 33, 0.96);
  overflow-x: auto;
}

.review-jumpbar a {
  flex: 0 0 auto;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  color: var(--ink-2);
  font-size: 13px;
  text-decoration: none;
}

.review-jumpbar a:hover {
  border-color: var(--teal);
  color: var(--ink);
}

.article-main {
  display: grid;
  gap: 18px;
}

.content-panel {
  padding: 24px;
}

.content-panel h2 {
  font-size: 34px;
}

.content-panel h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.15;
}

.content-panel p {
  margin-bottom: 0;
}

.aside {
  position: sticky;
  top: 92px;
  align-self: start;
  display: grid;
  gap: 14px;
}

.aside-panel {
  padding: 16px;
}

.toc {
  display: grid;
  gap: 4px;
}

.toc a {
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: 13px;
  text-decoration: none;
}

.toc a:hover {
  color: var(--teal);
}

.evidence-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.evidence-list,
.gap-list,
.experiment-list,
.source-list,
.person-grid {
  display: grid;
  gap: 12px;
}

.source-item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: 14px;
}

.evidence-item,
.gap-item,
.experiment-item,
.synthesis-row {
  padding: 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--page);
}

.evidence-class {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 3px 7px;
  border-radius: var(--radius);
  background: var(--teal-2);
  color: var(--teal);
  font-size: 12px;
  font-weight: 800;
}

.evidence-detail,
.small-copy {
  color: var(--ink-2);
  font-size: 14px;
}

.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.comparison-table,
.source-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 14px;
}

.comparison-table th,
.comparison-table td,
.source-table th,
.source-table td {
  padding: 11px 10px;
  border: 1px solid var(--rule);
  vertical-align: top;
  text-align: left;
}

.comparison-table th,
.source-table th {
  background: var(--paper-2);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

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

.method-panel {
  min-height: 190px;
}

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

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

.resource-card {
  min-height: 132px;
  display: grid;
  align-content: space-between;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
}

.resource-card:hover {
  border-color: var(--teal);
}

.resource-card span:last-child {
  color: var(--ink-3);
  font-size: 13px;
}

.resource-type {
  width: fit-content;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--blue) 45%, transparent);
  border-radius: var(--radius);
  background: var(--blue-2);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

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

.person-panel {
  padding: 20px;
}

.empty {
  padding: 42px;
  border: 1px dashed var(--rule-2);
  border-radius: var(--radius);
  color: var(--ink-3);
  text-align: center;
}

.footer {
  margin-top: 60px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  color: var(--ink-3);
  font-size: 13px;
}

@media (max-width: 1240px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: none;
  }

  .mobile-select {
    display: block;
  }

  .topbar {
    padding: 12px 20px;
  }

  .page {
    padding: 26px 20px 70px;
  }

  .docket-grid,
  .review-hero,
  .article-layout {
    grid-template-columns: 1fr;
  }

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

  .review-jumpbar {
    display: flex;
    position: sticky;
    top: 96px;
    z-index: 20;
  }

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

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

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

@media (max-width: 860px) {
  .topbar {
    align-items: start;
    flex-direction: column;
  }

  .template-topbar {
    min-height: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px 20px 16px;
  }

  .home-topbar {
    padding: 12px 20px;
  }

  .top-logo {
    width: min(100%, 320px);
    height: 78px;
    aspect-ratio: auto;
  }

  .template-menu {
    display: none;
  }

  .template-hero img {
    height: auto;
    min-height: 0;
    object-fit: contain;
    object-position: center;
  }

  .hero-live-copy {
    width: calc(100% - 40px);
    padding: 16px 0 18px;
  }

  .hero-live-copy h1 {
    font-size: 40px;
  }

  .hero-live-copy p {
    font-size: 18px;
  }

  .template-directory,
  .brand-tagline {
    padding: 16px 20px;
  }

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

  .directory-tile {
    min-height: 112px;
    grid-template-columns: 64px minmax(0, 1fr);
    justify-items: start;
    text-align: left;
    border-right: 0;
    border-bottom: 1px solid rgba(244, 239, 228, 0.18);
  }

  .directory-tile:last-child {
    border-bottom: 0;
  }

  .tile-icon {
    width: 54px;
    height: 54px;
    font-size: 32px;
    grid-row: span 2;
  }

  .tile-icon-folder::before,
  .tile-icon-mark::before {
    font-size: 42px;
  }

  .tile-icon-doc::before {
    width: 42px;
    height: 50px;
    border-width: 2px;
  }

  .tile-cta {
    font-size: 17px;
  }

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

  .tagline-panel {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(244, 239, 228, 0.18);
  }

  .tagline-panel:last-child {
    border-bottom: 0;
  }

  .landing-page > .section {
    width: calc(100% - 40px);
  }

  .topbar-actions {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .topbar-actions .btn {
    display: none;
  }

  .briefing,
  .latest-body,
  .review-cover,
  .content-panel {
    padding: 20px;
  }

  .briefing h1,
  .review-title,
  .page-title {
    font-size: 42px;
  }

  .briefing-lede,
  .hypothesis-statement {
    font-size: 19px;
  }

  .briefing-metrics,
  .mission-grid,
  .domain-grid,
  .review-grid,
  .archive-controls,
  .evidence-grid,
  .split-grid,
  .score-grid,
  .method-grid,
  .governance-grid,
  .resource-grid,
  .person-grid,
  .aside {
    grid-template-columns: 1fr;
  }

  .latest-panel {
    grid-template-rows: 190px 1fr;
  }

  .review-visual {
    grid-template-rows: 230px auto;
  }

  .review-jumpbar {
    top: 145px;
    margin-top: 12px;
  }

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

  .archive-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .archive-row > :nth-child(n+3) {
    grid-column: 2;
  }
}


/* ===== Plain-language ("For everyone") explainer pages ===== */
.lay-page{max-width:780px;margin:0 auto;padding:34px 24px 90px;box-sizing:border-box}
.lay-eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal,#16a085);font-weight:700;margin-bottom:14px}
.lay-title{font-family:"Lora",Georgia,serif;font-weight:700;font-size:34px;line-height:1.14;color:var(--ink,#f4efe4);margin:0 0 16px;letter-spacing:-.01em;text-wrap:pretty}
.lay-metarow{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:22px}
.lay-verdict{display:inline-block;padding:5px 13px;border:1px solid var(--brass,#c49a6c);color:var(--brass,#c49a6c);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.lay-mins{font-size:12px;color:var(--ink3,#8aa4ad);letter-spacing:.02em}
.lay-tech-link,.lay-page .cta{margin-left:auto;background:none;border:1px solid var(--teal,#16a085);color:var(--teal,#16a085);font:inherit;font-weight:700;font-size:13px;letter-spacing:.02em;padding:9px 16px;cursor:pointer;border-radius:2px}
.lay-tech-link:hover,.lay-page .cta:hover{background:rgba(22,160,133,.12)}
.lay-lede{font-size:19px;line-height:1.55;color:var(--ink,#f4efe4);margin:0 0 20px;text-wrap:pretty}
.lay-disclaimer{font-size:13px;line-height:1.5;color:var(--ink2,#d1d9d8);background:rgba(196,154,108,.08);border:1px solid rgba(196,154,108,.35);border-radius:4px;padding:12px 16px;margin:0 0 30px}
.lay-disclaimer strong{color:var(--brass,#c49a6c)}
.lay-block{margin:0 0 30px}
.lay-block>h2{font-family:"Lora",Georgia,serif;font-weight:600;font-size:13px;letter-spacing:.15em;text-transform:uppercase;color:var(--teal,#16a085);margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--rule,#2b4651)}
.lay-block p{font-size:16px;line-height:1.62;color:var(--ink2,#d1d9d8);margin:0 0 14px;text-wrap:pretty}
.lay-list{margin:0;padding:0;list-style:none}
.lay-list li{position:relative;font-size:15.5px;line-height:1.55;color:var(--ink2,#d1d9d8);padding:6px 0 6px 22px;border-bottom:1px solid rgba(43,70,81,.5)}
.lay-list li:last-child{border-bottom:none}
.lay-list li:before{content:"";position:absolute;left:2px;top:13px;width:7px;height:7px;border-radius:50%;background:var(--ink3,#8aa4ad)}
.lay-evgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
@media(max-width:640px){.lay-evgrid{grid-template-columns:1fr}}
.lay-ev{border:1px solid var(--rule,#2b4651);border-radius:5px;padding:14px 16px;background:var(--paper,#101a21)}
.lay-ev-h{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin-bottom:8px}
.lay-ev-yes{border-top:3px solid #16a085}
.lay-ev-yes .lay-ev-h{color:#3cc8a6}
.lay-ev-yes .lay-list li:before{background:#16a085}
.lay-ev-no{border-top:3px solid #c0623a}
.lay-ev-no .lay-ev-h{color:#e08a5f}
.lay-ev-no .lay-list li:before{background:#c0623a}
.lay-evsum{font-size:16px;line-height:1.6;color:var(--ink,#f4efe4);font-style:italic;border-left:2px solid var(--brass,#c49a6c);padding-left:16px;margin:0}
.lay-redflags .lay-list li:before{content:"!";background:none;color:#e08a5f;font-weight:800;top:6px;left:0;width:auto;height:auto;border-radius:0}
.lay-redflags .lay-list li{padding-left:20px}
.lay-analogy p{font-family:"Lora",Georgia,serif;font-style:italic;font-size:17px;color:var(--ink,#f4efe4)}
.lay-faq{margin:0 0 16px}
.lay-faq h3{font-size:16px;font-weight:700;color:var(--ink,#f4efe4);margin:0 0 5px}
.lay-faq p{font-size:15px;line-height:1.58;color:var(--ink2,#d1d9d8);margin:0}
.lay-terms{display:flex;flex-wrap:wrap;gap:8px}
.lay-term{display:inline-block;font-size:12.5px;color:var(--ink2,#d1d9d8);background:rgba(138,164,173,.1);border:1px solid var(--rule,#2b4651);border-radius:999px;padding:5px 12px}
.lay-foot{margin-top:34px;padding-top:20px;border-top:1px solid var(--rule,#2b4651)}
.lay-foot .cta{margin-left:0;display:inline-block}
/* link from the short inline summary out to the full explainer */
.ps-foot-lay{margin-top:14px}
.ps-full{background:rgba(22,160,133,.1);border:1px solid var(--teal,#16a085);color:var(--teal,#16a085);font:inherit;font-weight:700;font-size:13.5px;letter-spacing:.02em;padding:11px 18px;cursor:pointer;border-radius:3px}
.ps-full:hover{background:rgba(22,160,133,.2)}

/* lay-version accent button */
.btn-lay{background:rgba(22,160,133,.14)!important;border-color:#16a085!important;color:#3cc8a6!important}
.btn-lay:hover{background:rgba(22,160,133,.26)!important;color:#5dd6b8!important}

/* ---------------------------------------------------------------------------
   New-evidence watch
   Literature published since a review was scored. Preprints are always shown
   with a visible not-peer-reviewed marker and a muted left rule, so a reader
   can never mistake tentative work for settled evidence.
   --------------------------------------------------------------------------- */

.news-run {
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 10px 0;
  margin-bottom: 18px;
}

.news-list {
  display: grid;
  gap: 14px;
}

.news-card {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--brass);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 18px 20px;
}

.news-card.is-tentative {
  border-left-color: var(--ink-4);
  background: transparent;
}

.news-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}

.news-impact { color: var(--brass); font-weight: 700; }

.news-tentative {
  color: var(--ink-3);
  border: 1px solid var(--rule);
  border-radius: 100px;
  padding: 2px 9px;
  letter-spacing: .08em;
}

.news-mover {
  color: var(--rust);
  font-weight: 700;
  border: 1px solid var(--rust);
  border-radius: 100px;
  padding: 2px 9px;
}

.news-title {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 700;
}

.news-source { font-size: 13px; color: var(--ink-3); margin-bottom: 10px; }
.news-note { margin: 0 0 10px; }
.news-bearing { margin: 0 0 14px; color: var(--ink-2); font-size: 14px; }
.news-foot { display: flex; flex-wrap: wrap; gap: 8px; }

.news-panel { margin-bottom: 26px; }
.news-panel .panel-lede { color: var(--ink-3); margin-bottom: 14px; }
.news-panel .news-card { margin-bottom: 12px; }

@media (max-width: 720px) {
  .news-card { padding: 15px 16px; }
  .news-meta { font-size: 10px; }
}

/* Independent relative-fit axis: one neutral accent across all categories.
   HSEF level and verdict colors remain defined by the existing ladder styles. */
.relative-fit-badge {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  width: fit-content;
  max-width: 100%;
  padding: 7px 10px;
  color: #c4e4ec;
  border: 1px solid #466773;
  background: rgba(138, 164, 173, .08);
  font: 600 12px/1.4 var(--display, sans-serif);
  overflow-wrap: anywhere;
}

.relative-fit-badge .relative-fit-axis {
  color: var(--ink-3);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.relative-fit-badge[data-relative-fit-status^="comparison_"] {
  border-style: dashed;
}

.lad-item .relative-fit-badge.is-compact {
  display: block;
  width: auto;
  margin-top: 7px;
  padding: 4px 5px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.3;
  border-color: #466773;
}

.relative-fit-summary {
  margin: 16px 0;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  background: rgba(138, 164, 173, .04);
}

.relative-fit-summary > p {
  margin: 9px 0 0;
  color: var(--ink-2);
  line-height: 1.5;
}

.v5-card-fit {
  display: grid;
  gap: 7px;
  padding: 10px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.v5-card-body .relative-fit-rank,
.relative-fit-summary .relative-fit-rank,
.relative-fit-scope-note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3);
}

.relative-fit-guide {
  margin: 20px 0;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.6;
}

.relative-fit-guide strong {
  color: var(--ink);
}

.critic-guide .relative-fit-guide {
  margin-top: 8px;
  font-size: 13px;
}

.critic-guide .relative-fit-guide::before {
  display: none;
}

.relative-fit-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 24px 0;
}

.relative-fit-controls .field,
.relative-fit-controls input,
.relative-fit-controls select {
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

.relative-fit-results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 18px;
  margin: 26px 0 18px;
}

.relative-fit-results-head p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-3);
}

.relative-fit-level-group {
  margin: 0 0 42px;
}

.relative-fit-level-heading {
  margin: 0 0 18px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font: 500 23px/1.4 var(--display, sans-serif);
}

.relative-fit-level-heading > span {
  display: block;
  margin-top: 3px;
  color: var(--ink-3);
  font: 400 14px/1.5 var(--display, sans-serif);
}

.relative-fit-category-group {
  margin: 0 0 30px;
}

.relative-fit-category-group > h3 {
  margin: 0 0 14px;
  font: 600 17px/1.4 var(--display, sans-serif);
  color: #c4e4ec;
}

.relative-fit-category-group > h3 > span {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  border: 1px solid var(--rule);
  font-size: 12px;
}

.relative-fit-rank-group {
  margin: 0 0 24px;
}

.relative-fit-rank-group > h4 {
  margin: 0 0 12px;
  color: var(--ink-2);
  font: 500 14px/1.5 var(--display, sans-serif);
}

.relative-fit-rank-group > h4 > span {
  display: block;
  color: var(--ink-3);
  font-size: 12px;
}

.relative-fit-empty {
  padding: 24px;
  border: 1px dashed var(--rule);
  color: var(--ink-2);
}

.lad-model-leader + .lad-model-leader {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}

@media (max-width: 760px) {
  .relative-fit-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .relative-fit-controls { grid-template-columns: minmax(0, 1fr); }
  .relative-fit-guide,
  .relative-fit-summary { padding: 12px; }
  .relative-fit-level-heading { font-size: 21px; }
}