/*
 * Research site, round 3 (the set Jay chose on 2026-10-16: main A, area page B, article). The header and article page reuse docs.css (docs.oraclizer.io as deployed);
 * everything here follows the oraclizer.io design language (Web/Home/src/app/globals.css): small blue
 * uppercase eyebrows, Space Grotesk headings at weight 520 with tight tracking, night sections on a 72px blue
 * grid, white cards with a 1px line and a boxed status label, uppercase buttons and text links.
 * Variants A, B and C share this file; they differ only in which sections a page carries and in what order.
 */
:root {
  --rs-shell: min(1440px, calc(100vw - 48px));
  --rs-cyan-glow: 0 0 18px rgba(91, 220, 243, 0.75);
}

body {
  background: var(--paper);
}

.rs-shell {
  width: var(--rs-shell);
  margin-inline: auto;
}

/* ---------- header: docs header + centre menu ---------- */
.site-header__inner.rs-header {
  grid-template-columns: auto 1fr auto;
}
.rs-nav {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: clamp(16px, 1.9vw, 32px);
}
.rs-nav a {
  position: relative;
  padding-block: 16px;
  color: #aeb8c8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  transition: color 160ms ease;
}
.rs-nav a::after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}
.rs-nav a:hover,
.rs-nav a[aria-current="page"] {
  color: #fff;
}
.rs-nav a:hover::after,
.rs-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}
.rs-menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 40px;
  padding: 0;
  border: 1px solid #e7f1ff38;
  background: #ffffff0d;
  color: #aeb8c8;
  cursor: pointer;
}
.rs-menu svg {
  width: 18px;
  height: 18px;
}
.rs-menu-panel {
  display: grid;
  border-top: 1px solid #e7f1ff1f;
  background: #05080df5;
}
.rs-menu-panel[hidden] {
  display: none;
}
.rs-menu-panel a {
  width: var(--rs-shell);
  margin-inline: auto;
  padding: 15px 0;
  border-bottom: 1px solid #e7f1ff14;
  color: #c9d2df;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rs-menu-panel a[aria-current="page"] {
  color: #fff;
  box-shadow: inset 2px 0 0 var(--cyan);
  padding-left: 12px;
}
@media (min-width: 1025px) {
  .rs-menu-panel {
    display: none !important;
  }
}

/* ---------- shared pieces ---------- */
.rs-eyebrow {
  margin: 0 0 22px;
  color: var(--blue-text);
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.4;
  text-transform: uppercase;
}
.rs-eyebrow--dot {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #90b7ff;
}
.rs-eyebrow--dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: var(--rs-cyan-glow);
}
.rs-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid currentColor;
  color: #536178;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}
.rs-label--blue {
  color: var(--blue-text);
}
.rs-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-width: 200px;
  min-height: 54px;
  padding: 0 19px;
  border: 0;
  font: 800 11px/1 var(--body);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.rs-button svg {
  flex: none;
  width: 16px;
  height: 16px;
}
.rs-button:hover {
  transform: translateY(-2px);
}
.rs-button--primary {
  background: var(--blue);
  color: #fff;
}
.rs-button--primary:hover {
  background: #4387ff;
}
.rs-button--ghost {
  border: 1px solid rgba(231, 241, 255, 0.25);
  background: transparent;
  color: #f1f7ff;
}
.rs-button--ghost:hover {
  border-color: rgba(231, 241, 255, 0.65);
}
.rs-button--ink {
  background: var(--ink);
  color: #fff;
}
.rs-textlink {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  color: var(--blue-text);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rs-textlink svg {
  width: 16px;
  height: 16px;
}
.rs-textlink--light {
  color: var(--cyan);
}

/* night sections share the homepage hero grid */
.rs-night {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(36, 115, 255, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(36, 115, 255, 0.07) 1px, transparent 1px),
    var(--night);
  background-size: 72px 72px;
  color: #f7fbff;
}
.rs-ambient {
  position: absolute;
  top: 0;
  right: -180px;
  width: 820px;
  height: 720px;
  background: radial-gradient(circle, rgba(36, 115, 255, 0.2), transparent 65%);
  filter: blur(24px);
  pointer-events: none;
}

/* ---------- hero ---------- */
.rs-hero {
  padding: calc(var(--header-height) + 88px) 0 96px;
}
.rs-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: end;
}
.rs-hero h1 {
  max-width: 900px;
  margin: 0 0 36px;
  font-family: var(--display);
  font-size: clamp(52px, 5.6vw, 92px);
  font-weight: 520;
  letter-spacing: -0.06em;
  line-height: 0.92;
}
.rs-hero__body {
  max-width: 640px;
  margin: 0;
  color: #c0cad8;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.78;
}
.rs-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 38px;
}
.rs-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 44px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--line-dark);
}
.rs-stats div {
  display: grid;
  gap: 6px;
}
.rs-stats b {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 520;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rs-stats span {
  color: #7f8ca0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* latest panel in the A hero */
.rs-feed {
  border: 1px solid var(--line-dark);
  background: rgba(11, 17, 27, 0.72);
}
.rs-feed__head {
  display: flex;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line-dark);
  color: #7f8ca0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rs-feed a {
  display: grid;
  gap: 10px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line-dark);
  transition: background 160ms ease;
}
.rs-feed a:last-child {
  border-bottom: 0;
}
.rs-feed a:hover {
  background: rgba(36, 115, 255, 0.08);
}
.rs-feed a span {
  color: #7aa3ed;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rs-feed a strong {
  color: #f1f6ff;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 520;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

/* ---------- sections ---------- */
/* A link to a section (the hero's Browse the research, #latest) lands on its heading 24px under the header on every
   width: the jump skips the section's own top padding (2026-10-19, the landing sat 150 to 220px lower before). */
.rs-section {
  --rs-section-pad: clamp(96px, 9vw, 150px);
  position: relative;
  padding-block: var(--rs-section-pad);
  scroll-margin-top: calc(-1 * var(--rs-section-pad));
}
@media (max-width: 960px) {
  /* docs.css adds 69px + 16px under the header for the article contents bar; main and area pages have no such bar. */
  html:has(> body[data-page="main"]),
  html:has(> body[data-page="area"]) {
    --anchor-offset: calc(var(--header-height) + 24px);
  }
}
.rs-section--white {
  background: var(--white);
}
.rs-section--blue {
  background: #e8edf5;
}
.rs-heading {
  margin-bottom: clamp(48px, 6vw, 84px);
}
.rs-heading--split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.7fr);
  gap: 80px;
  align-items: end;
}
.rs-heading h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(42px, 4.6vw, 76px);
  font-weight: 520;
  letter-spacing: -0.055em;
  line-height: 0.98;
}
.rs-heading > p,
.rs-heading--split > p {
  max-width: 620px;
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.78;
}
.rs-night .rs-heading .rs-eyebrow {
  color: #86adff;
}
.rs-night .rs-heading > p {
  color: #aab6c6;
}

/* cards */
.rs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.rs-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rs-card {
  display: flex;
  flex-direction: column;
  min-height: 360px;
  padding: clamp(26px, 3vw, 44px);
  border: 1px solid var(--line);
  background: var(--panel);
  transition: border-color 160ms ease;
}
.rs-card:hover {
  border-color: var(--line-strong);
}
.rs-card__top {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.rs-card__date {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rs-card h3 {
  margin: auto 0 18px;
  padding-top: 56px;
  font-family: var(--display);
  font-size: clamp(23px, 1.9vw, 31px);
  font-weight: 520;
  letter-spacing: -0.04em;
  line-height: 1.08;
}
.rs-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.75;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rs-card .rs-textlink {
  margin-top: 26px;
}
.rs-card--lead {
  grid-column: span 2;
  min-height: 420px;
  background: var(--paper-blue);
  border-color: #cdd8ea;
}
.rs-card--lead h3 {
  font-size: clamp(30px, 3vw, 48px);
  letter-spacing: -0.05em;
}

/* standards-style dark grid */
.rs-std {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
  border-left: 1px solid var(--line-dark);
}
.rs-std__item {
  display: flex;
  flex-direction: column;
  min-height: 460px;
  padding: clamp(28px, 3.4vw, 52px);
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.rs-std__index {
  margin-bottom: 30px;
  color: #617491;
  font-family: var(--display);
  font-size: 11px;
}
.rs-std__item .rs-label {
  align-self: flex-start;
  color: #7aa3ed;
}
.rs-std__item h3 {
  margin: 64px 0 18px;
  font-family: var(--display);
  font-size: clamp(30px, 2.7vw, 44px);
  font-weight: 520;
  letter-spacing: -0.04em;
  line-height: 1.04;
}
.rs-std__item p {
  margin: 0;
  color: #a9b5c6;
  font-size: 14px;
  line-height: 1.75;
}
.rs-std__latest {
  display: grid;
  gap: 6px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line-dark);
  color: #dbe5f4;
  font-size: 14px;
  line-height: 1.45;
}
.rs-std__latest span {
  color: #7f8ca0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rs-std__item .rs-textlink {
  margin-top: auto;
  padding-top: 26px;
}

/* outputs (published elsewhere) */
.rs-output {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: clamp(26px, 3vw, 44px);
  border: 1px solid var(--line);
  background: var(--panel);
}
.rs-output h3 {
  margin: 48px 0 16px;
  font-family: var(--display);
  font-size: clamp(22px, 1.8vw, 28px);
  font-weight: 520;
  letter-spacing: -0.035em;
  line-height: 1.12;
}
.rs-output p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.75;
}
.rs-output .rs-textlink {
  margin-top: auto;
  padding-top: 26px;
}

/* subscribe panel (the homepage research-next block) */
.rs-panel {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: start;
  padding: clamp(34px, 5vw, 68px);
  border: 1px solid #cdd8ea;
  background: var(--paper-blue);
}
.rs-panel h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(34px, 3.8vw, 60px);
  font-weight: 520;
  letter-spacing: -0.05em;
  line-height: 0.98;
}
.rs-panel p {
  margin: 0 0 22px;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.75;
}
.rs-form {
  display: flex;
  gap: 10px;
}
.rs-form input {
  flex: 1;
  min-width: 0;
  min-height: 54px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--ink);
  font: 500 15px var(--body);
}
.rs-form input:focus {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.rs-panel small {
  display: block;
  margin-top: 14px;
  color: #536178;
  font-size: 12px;
  line-height: 1.65;
}
.rs-panel small a {
  color: var(--blue-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* rows and index table */
.rs-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.rs-rows a {
  display: grid;
  grid-template-columns: 140px 130px minmax(0, 1fr) 80px;
  gap: 24px;
  align-items: baseline;
  padding: 18px 4px;
  border-bottom: 1px solid var(--line);
  transition: background 160ms ease;
}
.rs-rows a:hover {
  background: rgba(36, 115, 255, 0.04);
}
.rs-rows__date,
.rs-rows__read {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rs-rows__read {
  text-align: right;
}
.rs-rows__area {
  color: var(--blue-text);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rs-rows__title {
  color: var(--ink);
  font-family: var(--display);
  font-size: 19px;
  font-weight: 520;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.rs-rows--compact a {
  grid-template-columns: 120px minmax(0, 1fr) 70px;
}
.rs-year {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  margin-top: 64px;
}
.rs-year:first-child {
  margin-top: 0;
}
.rs-year__head {
  position: sticky;
  top: calc(var(--header-height) + 24px);
  align-self: start;
}
.rs-year__head b {
  display: block;
  font-family: var(--display);
  font-size: 56px;
  font-weight: 520;
  letter-spacing: -0.05em;
  line-height: 1;
}
.rs-year__head span {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* filter chips (static in the drafts) and search field */
.rs-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rs-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rs-chip span {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.rs-chip[aria-current="page"] {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}
.rs-chip[aria-current="page"] span {
  color: #aeb8c8;
}
.rs-night .rs-chip {
  border-color: rgba(231, 241, 255, 0.22);
  background: transparent;
  color: #dbe5f4;
}
.rs-night .rs-chip span {
  color: #7f8ca0;
}
.rs-night .rs-chip[aria-current="page"] {
  border-color: var(--cyan);
  color: #fff;
}
.rs-search {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 760px;
  min-height: 64px;
  margin-top: 40px;
  padding: 0 20px;
  border: 1px solid rgba(231, 241, 255, 0.28);
  background: rgba(255, 255, 255, 0.04);
  color: #aeb8c8;
  font-size: 16px;
}
.rs-search svg {
  width: 20px;
  height: 20px;
}
.rs-search span {
  flex: 1;
}
.rs-search kbd {
  padding: 3px 7px;
  border: 1px solid #e7f1ff42;
  color: #8f9bb0;
  font: 500 11px var(--body);
}

/* reading path (start here) */
.rs-path {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.rs-path a {
  display: flex;
  flex-direction: column;
  min-height: 240px;
  padding: clamp(24px, 2.6vw, 38px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  transition: background 160ms ease;
}
.rs-path a:hover {
  background: var(--paper-blue);
}
.rs-path--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.rs-path__step {
  color: var(--blue-text);
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.rs-path h3 {
  margin: auto 0 14px;
  padding-top: 36px;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 520;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.rs-path p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

/* area page hero */
.rs-area-hero {
  padding: calc(var(--header-height) + 72px) 0 80px;
}
.rs-area-hero h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(72px, 10vw, 168px);
  font-weight: 520;
  letter-spacing: -0.07em;
  line-height: 0.86;
}
.rs-area-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.75fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: end;
}
.rs-area-hero__body {
  margin: 0;
  color: #c0cad8;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.78;
}
.rs-area-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 48px;
}

/* light area header (variant C) */
.rs-area-head {
  padding: calc(var(--header-height) + 64px) 0 56px;
  border-bottom: 1px solid var(--line);
  background: var(--white);
}
.rs-area-head h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(56px, 7vw, 120px);
  font-weight: 520;
  letter-spacing: -0.065em;
  line-height: 0.9;
}
.rs-area-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.7fr);
  gap: 64px;
  align-items: end;
}
.rs-area-head p:not(.rs-eyebrow) {
  margin: 0;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.75;
}

/* area chapters on the B home */
.rs-chapter {
  padding-block: clamp(80px, 8vw, 128px);
  border-top: 1px solid var(--line);
}
.rs-chapter:nth-of-type(even) {
  background: var(--white);
}
.rs-chapter__grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(40px, 6vw, 96px);
}
.rs-chapter__intro {
  position: sticky;
  top: calc(var(--header-height) + 32px);
  align-self: start;
}
.rs-chapter__intro h2 {
  margin: 0 0 22px;
  font-family: var(--display);
  font-size: clamp(52px, 5.6vw, 92px);
  font-weight: 520;
  letter-spacing: -0.06em;
  line-height: 0.9;
}
.rs-chapter__intro p:not(.rs-eyebrow) {
  margin: 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.78;
}
.rs-chapter__meta {
  display: flex;
  gap: 28px;
  margin-top: 28px;
}
.rs-chapter__meta div {
  display: grid;
  gap: 6px;
}
.rs-chapter__meta b {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 520;
  letter-spacing: -0.04em;
  line-height: 1;
}
.rs-chapter__meta span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rs-chapter__outputs {
  margin-top: 14px;
  padding: 22px 26px;
  border: 1px solid #cdd8ea;
  background: var(--paper-blue);
}
.rs-chapter__outputs > span {
  display: block;
  margin-bottom: 12px;
  color: var(--blue-text);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rs-chapter__outputs a {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 0;
  border-top: 1px solid #cdd8ea;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}
.rs-chapter__outputs a small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* areas index strip inside the B hero */
.rs-area-tiles {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 64px;
  border-top: 1px solid var(--line-dark);
  border-left: 1px solid var(--line-dark);
}
.rs-area-tiles a {
  display: grid;
  gap: 18px;
  min-height: 170px;
  padding: 22px 20px;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  transition: background 160ms ease;
}
.rs-area-tiles a:hover {
  background: rgba(36, 115, 255, 0.08);
}
.rs-area-tiles span {
  color: #617491;
  font-family: var(--display);
  font-size: 11px;
}
.rs-area-tiles strong {
  align-self: end;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 520;
  letter-spacing: -0.04em;
}
.rs-area-tiles small {
  color: #7f8ca0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- article (docs layout, info rail on the left) ---------- */
.docs.rs-article {
  grid-template-columns: 280px minmax(0, 1fr) 232px;
}
.docs.rs-article .docs__article,
.docs.rs-article .docs-prose {
  min-width: 0;
  max-width: 100%;
}
.docs.rs-article .docs-prose {
  overflow-x: clip;
  /* The clip edge sits 6px outside the text column: an italic letter that ends a line leans past its advance width,
     and at the old edge it lost its top ("Harvard" read "Harvaro", W7 writer report 2026-10-18). The text column
     keeps its width: the negative margin and the wider cap give the padding back. overflow-clip-margin would be the
     plain fix but Chrome ignores it while only the x axis clips (tested 2026-10-18). */
  padding-right: 6px;
  margin-right: -6px;
  max-width: calc(100% + 6px);
}
.rs-info {
  display: grid;
  align-content: start;
  gap: 26px;
}
.rs-info__back {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.rs-info__back:hover {
  color: var(--ink);
}
.rs-info dl {
  display: grid;
  gap: 14px;
  margin: 0;
}
.rs-info dt {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rs-info dd {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rs-info dd a {
  color: var(--blue-text);
}
.rs-react {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.rs-react button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--ink);
  font: 700 13px var(--body);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease;
}
.rs-react button:hover {
  border-color: var(--blue);
}
.rs-react svg {
  width: 17px;
  height: 17px;
}
.rs-react button[aria-pressed="true"] {
  border-color: var(--blue);
  color: var(--blue-text);
}
.rs-tools {
  display: grid;
  gap: 2px;
}
.rs-tools a {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
}
.rs-tools a:hover {
  color: var(--blue-text);
}
.rs-meta-inline {
  display: none;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.docs-prose a {
  overflow-wrap: anywhere;
}
.rs-standfirst {
  max-width: 820px;
  margin: 18px 0 0;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.7;
}
.rs-resources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.rs-resources a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
}
.rs-resources a:hover {
  border-color: var(--blue);
  color: var(--blue-text);
}
.rs-resources svg {
  width: 12px;
  height: 12px;
}

/* WordPress body markup set in the docs prose language */
.docs-prose h2 {
  margin: 56px 0 18px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(26px, 2.2vw, 32px);
  font-weight: 560;
  letter-spacing: -0.04em;
  line-height: 1.15;
}
.docs-prose > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.docs-prose h3 {
  margin: 36px 0 12px;
  color: var(--ink);
  font-family: var(--display);
  font-size: 21px;
  font-weight: 560;
  letter-spacing: -0.025em;
  line-height: 1.25;
}
.docs-prose > p,
.docs-prose > ul,
.docs-prose > ol {
  margin: 0 0 20px;
}
.docs-prose > ul {
  padding-left: 22px;
}
.docs-prose li {
  margin-bottom: 8px;
  padding-left: 4px;
}
.docs-prose li::marker {
  color: var(--blue);
}
.docs-prose strong {
  color: var(--ink);
  font-weight: 700;
}
.docs-prose a {
  color: var(--blue-text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--link-line);
  text-underline-offset: 3px;
}
.docs-prose code:not(pre code) {
  padding: 1px 5px;
  border: 1px solid var(--code-border);
  background: var(--code-bg);
  color: var(--code-text);
  font-family: var(--mono);
  font-size: 0.86em;
  /* A long identifier in prose wraps instead of running past a 360px column (2026-10-17). */
  overflow-wrap: anywhere;
}
/* Manrope's standard ligatures turn "(c)" into a copyright sign; lists written (a) (b) (c) must stay letters
   (2026-10-17, Economy 3.4). */
body {
  font-variant-ligatures: no-common-ligatures;
}
.docs-prose hr {
  margin: 48px 0 44px;
  border: 0;
  border-top: 1px solid var(--line);
}
.docs-prose figure.wp-block-table {
  max-width: 100%;
  margin: 0 0 24px;
  overflow-x: auto;
  border: 1px solid var(--line);
}
.docs-prose table {
  min-width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.docs-prose th {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: left;
  vertical-align: bottom;
  /* Headings wrap at every width: the article column is narrowest (about 666px) at 1280, beside the sidebar, so
     a no-wrap heading row pushed five-column tables past it (2026-10-17, Proofs at 1024 and 1280). */
  white-space: normal;
  overflow-wrap: break-word;
}
.docs-prose td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-soft);
  line-height: 1.6;
  vertical-align: top;
  overflow-wrap: break-word;
}
.docs-prose .rs-responsive-table {
  width: 100%;
}
.docs-prose tr:last-child td {
  border-bottom: 0;
}

/* Preserved WordPress data tables must remain fully readable without a nested horizontal
   scroller. Tablet widths wrap columns; phones turn each row into a labelled record. */
@media (max-width: 840px) {
  .docs-prose figure.wp-block-table {
    overflow: visible;
  }
  .docs-prose .rs-responsive-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }
  .docs-prose .rs-responsive-table th,
  .docs-prose .rs-responsive-table td {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
    /* A plain word longer than its fixed column breaks at a syllable with a hyphen before the last-resort break
       anywhere ("Charac-teristic", not "Characteristi / c", W7 writer report 2026-10-18, also on paper). */
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

@media (max-width: 640px) {
  .docs-prose figure.wp-block-table:has(.rs-responsive-table) {
    overflow: visible;
    border: 0;
  }
  .docs-prose .rs-responsive-table,
  .docs-prose .rs-responsive-table tbody,
  .docs-prose .rs-responsive-table tr,
  .docs-prose .rs-responsive-table td {
    display: block;
    width: 100%;
  }
  .docs-prose .rs-responsive-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .docs-prose .rs-responsive-table tbody {
    display: grid;
    gap: 12px;
  }
  .docs-prose .rs-responsive-table tr {
    border: 1px solid var(--line);
    background: var(--paper);
  }
  .docs-prose .rs-responsive-table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--line-soft);
  }
  .docs-prose .rs-responsive-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--blue);
    font-family: var(--display);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.06em;
    line-height: 1.35;
    text-transform: uppercase;
  }
  /* A heading with a formula keeps its case: uppercasing would turn ω into Ω (site.js prepareResponsiveTables). */
  .docs-prose .rs-responsive-table td[data-label-math]::before {
    text-transform: none;
  }
}
.docs-prose .code-block {
  position: relative;
  max-width: 100%;
  margin: 0 0 24px;
  overflow: hidden;
  border: 1px solid var(--code-line);
  background: var(--codeblock-bg);
}
.docs-prose .code-block::before {
  content: attr(data-lang);
  display: block;
  padding: 8px 16px;
  border-bottom: 1px solid var(--code-line);
  color: #9aa8bd;
  font-family: var(--mono);
  font-size: 12px;
}
.docs-prose .code-block pre {
  margin: 0;
  padding: 18px 18px 20px;
  overflow-x: auto;
  background: transparent !important;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.7;
}
.docs-prose figure.wp-block-image {
  margin: 8px 0 12px;
}
.docs-prose figure.wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
}
.docs-prose p.has-text-align-center {
  margin: 0 0 30px;
  text-align: center;
}
.docs-prose p.has-text-align-center em {
  color: var(--muted) !important;
  font-size: 13.5px;
}
.docs-prose > div[class$="-wrap"] {
  margin: 8px 0 10px;
}
.rs-figure-note {
  margin: 0 0 30px;
  padding: 10px 14px;
  border-left: 3px solid var(--cyan);
  background: var(--paper);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}
.rs-after {
  padding: 0 0 clamp(80px, 8vw, 120px);
}
.rs-after .rs-heading h2 {
  font-size: clamp(34px, 3.4vw, 52px);
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .rs-nav {
    gap: 14px;
  }
  .rs-nav a {
    letter-spacing: 0.05em;
  }
  .rs-area-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .rs-path {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .docs.rs-article {
    grid-template-columns: 250px minmax(0, 1fr);
  }
}

@media (max-width: 960px) {
  /* Stacked article: title and body first, the article rail (likes, share, cite) after the body. */
  .docs.rs-article {
    display: flex;
    flex-direction: column;
  }
  .docs.rs-article .docs__article {
    order: 1;
  }
  .docs.rs-article .docs__sidebar.rs-info {
    order: 2;
    position: static;
    top: auto;
    z-index: auto;
    height: auto;
    margin: 0 20px 56px;
    padding: 28px 24px;
    border: 1px solid var(--line);
    background: var(--panel);
  }
  .rs-meta-inline {
    display: block;
  }
}

@media (max-width: 1024px) {
  .rs-nav {
    display: none;
  }
  .site-header__inner.rs-header {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }
  .rs-menu {
    display: inline-flex;
  }
  .rs-hero__grid,
  .rs-heading--split,
  .rs-area-hero__grid,
  .rs-area-head__grid,
  .rs-panel,
  .rs-chapter__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .rs-chapter__intro {
    position: static;
  }
  .rs-grid,
  .rs-std {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rs-card--lead {
    grid-column: span 2;
  }
  .rs-year {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .rs-year__head {
    position: static;
    display: flex;
    align-items: baseline;
    gap: 14px;
  }
  .rs-rows a {
    grid-template-columns: 110px 110px minmax(0, 1fr) 64px;
    gap: 16px;
  }
}

@media (max-width: 760px) {
  :root {
    --rs-shell: calc(100vw - 32px);
  }
  .rs-hero {
    padding: calc(var(--header-height) + 48px) 0 64px;
  }
  .rs-hero h1 {
    font-size: clamp(44px, 12vw, 60px);
  }
  .rs-button {
    min-width: 0;
    width: 100%;
  }
  .rs-grid,
  .rs-grid--2,
  .rs-std,
  .rs-path,
  .rs-area-tiles {
    grid-template-columns: minmax(0, 1fr);
  }
  .rs-card--lead {
    grid-column: auto;
  }
  .rs-card,
  .rs-output,
  .rs-path a {
    min-height: 0;
  }
  .rs-path h3 {
    margin-top: 0;
    padding-top: 18px;
  }
  .rs-card h3 {
    padding-top: 36px;
  }
  .rs-std__item {
    min-height: 0;
  }
  .rs-std__item h3 {
    margin-top: 36px;
  }
  .rs-area-tiles a {
    min-height: 0;
    grid-template-columns: 40px 1fr auto;
    align-items: baseline;
  }
  .rs-rows a,
  .rs-rows--compact a {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .rs-rows__read {
    text-align: left;
  }
  .rs-form {
    flex-direction: column;
  }
  .rs-area-hero h1 {
    font-size: clamp(56px, 18vw, 96px);
  }
  .rs-chapter__intro h2 {
    font-size: 52px;
  }
  .rs-search {
    min-height: 54px;
    font-size: 14px;
  }
  .rs-search kbd {
    display: none;
  }
  .docs.rs-article .docs__sidebar {
    position: static;
  }
  .rs-react {
    max-width: 320px;
  }
}

/* company footer markup from ../assets/chrome.js */
.site-footer .footer-wordmark {
  display: block;
  width: 168px;
  height: auto;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* phone header: search, theme and the area menu next to the wordmark */
@media (max-width: 640px) {
  .site-header__inner.rs-header .site-header__actions {
    gap: 6px;
  }
  .site-header__inner.rs-header .docs-search-trigger,
  .site-header__inner.rs-header .theme-switch,
  .site-header__inner.rs-header .rs-menu {
    width: 40px;
  }
  .site-header__inner.rs-header .wordmark {
    width: 104px;
  }
}
@media (max-width: 374px) {
  .site-header__inner.rs-header .docs-search-trigger,
  .site-header__inner.rs-header .theme-switch,
  .site-header__inner.rs-header .rs-menu {
    width: 36px;
  }
  .site-header__inner.rs-header .wordmark {
    width: 92px;
  }
}

/* ==========================================================================
   Round 3 additions (Jay 2026-10-16): hero object, Latest with Updates, external publications list,
   image cards on area pages, Learn more, article tools, disclaimer, stronger table heads, subscribe band.
   ========================================================================== */
:root {
  --rs-th-bg: #e4edfc;
  --rs-th-ink: #0b1f44;
  --rs-th-line: #c6d5ef;
}
html[data-theme="dark"] {
  --rs-th-bg: #15233d;
  --rs-th-ink: #e6eefb;
  --rs-th-line: #2b4066;
}

/* stronger table heads (Jay: "컬럼헤드 색이 너무 죽어 있지 않나") */
.docs-prose th {
  border-bottom: 1px solid var(--rs-th-line);
  background: var(--rs-th-bg);
  color: var(--rs-th-ink);
  font-size: 12.5px;
}

/* hero with the research machine on the right */
.rs-hero__grid--object {
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  align-items: center;
}
.rs-object {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 340px;
}
.rs-object svg {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
}
.rs-object--pending span {
  padding: 10px 14px;
  border: 1px solid var(--line-dark);
  color: #7f8ca0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rs-area-head .rs-object--pending span {
  border-color: var(--line);
  color: var(--muted);
}

/* Latest: research on the left, Updates beside it */
.rs-latest {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
  gap: 14px;
  align-items: stretch;
}
.rs-latest__research {
  display: grid;
  gap: 14px;
}
.rs-latest__research .rs-card--lead {
  grid-column: auto;
  min-height: 330px;
}
.rs-latest__research .rs-card {
  min-height: 300px;
}
.rs-updates {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.6vw, 36px);
  border: 1px solid var(--line);
  background: var(--panel);
}
.rs-updates .rs-eyebrow {
  margin-bottom: 14px;
}
.rs-updates h3 {
  margin: 0 0 22px;
  font-family: var(--display);
  font-size: clamp(26px, 2.2vw, 32px);
  font-weight: 520;
  letter-spacing: -0.04em;
  line-height: 1.05;
}
.rs-updates ul {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.rs-updates li a {
  display: grid;
  gap: 6px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.rs-updates li span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rs-updates li strong {
  color: var(--ink);
  font-family: var(--display);
  font-size: 17px;
  font-weight: 520;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.rs-updates li a:hover strong {
  color: var(--blue-text);
}
.rs-updates .rs-textlink {
  margin-top: auto;
}

/* external publications: one row each, newest first, more open in place */
.rs-ext {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.rs-ext a {
  display: grid;
  grid-template-columns: 96px 190px minmax(0, 1fr) auto;
  gap: 24px;
  align-items: baseline;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line);
  transition: background 160ms ease;
}
.rs-ext a:hover {
  background: rgba(36, 115, 255, 0.04);
}
.rs-ext__date {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rs-ext__main strong {
  display: block;
  color: var(--ink);
  font-family: var(--display);
  font-size: 20px;
  font-weight: 520;
  letter-spacing: -0.025em;
  line-height: 1.25;
}
.rs-ext__main small {
  display: block;
  max-width: 760px;
  margin-top: 7px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
}
.rs-ext__ref {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--blue-text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rs-ext__ref svg {
  width: 12px;
  height: 12px;
}
.rs-more {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  margin-top: 20px;
  padding: 0 20px;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--ink);
  font: 800 11px var(--body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.rs-more:hover {
  border-color: var(--blue);
  color: var(--blue-text);
}

/* area page header with the machine */
.rs-area-head--object {
  padding-bottom: clamp(48px, 5vw, 72px);
}
/* The text starts at the same height on every area page, whatever the length of its introduction
   (Jay 2026-10-17); the machine stays centred in its own column. */
.rs-area-head--object .rs-area-head__grid {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.95fr);
  align-items: start;
}
.rs-area-head--object .rs-area-head__grid > :not(.rs-area-head__text) {
  align-self: center;
}
/* That common start sits a little lower, so the empty band under the numbers is not much larger than the one above
   the eyebrow (Jay 2026-10-17): 0 up to 1140px wide, then 1px for every 8px of width, at most 28px. It stays inside
   the room the machine leaves under the text, so the hero height and the machine do not move; where the text is
   taller than the machine (narrow desktops) and where the columns stack (1024px and below) it is 0. */
.rs-area-head--object .rs-area-head__text {
  margin-top: clamp(0px, (100vw - 1140px) / 8, 28px);
}
.rs-area-head--object h1 {
  margin-bottom: 24px;
}
.rs-area-head__text p:not(.rs-eyebrow) {
  max-width: 560px;
}

/* image cards (area pages, Learn more) */
.rs-igrid {
  display: grid;
  gap: 14px;
}
.rs-igrid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.rs-igrid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rs-icard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--panel);
  transition: border-color 160ms ease;
}
.rs-icard:hover {
  border-color: var(--line-strong);
}
.rs-icard__img {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--paper-blue);
}
.rs-icard__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 320ms ease;
}
.rs-icard:hover .rs-icard__img img {
  transform: scale(1.025);
}
.rs-icard__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 24px 26px;
}
.rs-icard strong {
  color: var(--ink);
  font-family: var(--display);
  font-size: 21px;
  font-weight: 520;
  letter-spacing: -0.03em;
  line-height: 1.18;
}
.rs-icard--wide strong {
  font-size: clamp(24px, 2.1vw, 31px);
  letter-spacing: -0.04em;
}
.rs-icard__text {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.7;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* rows with a small picture (area page, every article) */
.rs-rows--thumb a {
  grid-template-columns: 112px 104px minmax(0, 1fr) 60px;
  align-items: center;
  padding-block: 14px;
}
.rs-rows__thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper-blue);
}
.rs-rows__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Learn more after the article */
.rs-learn {
  background: var(--white);
  border-top: 1px solid var(--line);
}
.rs-learn__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.rs-lcard {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 210px;
  padding: 28px;
  border: 1px solid var(--line);
  background: var(--panel);
  transition: border-color 160ms ease;
}
.rs-lcard:hover {
  border-color: var(--line-strong);
}
.rs-lcard .rs-label {
  align-self: flex-start;
}
.rs-lcard strong {
  color: var(--ink);
  font-family: var(--display);
  font-size: 22px;
  font-weight: 520;
  letter-spacing: -0.03em;
  line-height: 1.2;
}
.rs-lcard .rs-textlink {
  margin-top: auto;
}

/* article rail tools (buttons) */
.rs-tools button {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: none;
  color: var(--ink);
  font: 700 13px var(--body);
  text-align: left;
  cursor: pointer;
}
.rs-tools button:hover {
  color: var(--blue-text);
}
.rs-tools button svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--blue-text);
}
.rs-tools small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
}

/* fixed disclaimer at the end of every research article */
.rs-disclaimer {
  max-width: 820px;
  margin: 48px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.rs-disclaimer p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}
.rs-disclaimer strong {
  color: var(--ink-soft);
}

/* subscribe band on the footer's dark ground */
.rs-subscribe {
  --rs-subscribe-pad: clamp(44px, 5vw, 64px);
  padding: var(--rs-subscribe-pad) 0;
  /* the hero's Subscribe (#subscribe) lands with the band's top edge, where the dark ground starts, right under the
     header (2026-10-19), not on its heading: the jump cancels the page's anchor gap instead of the band's padding */
  scroll-margin-top: calc(var(--header-height) - var(--anchor-offset));
  border-bottom: 1px solid var(--line-dark);
  background: var(--night);
  color: #f7fbff;
}
.rs-subscribe__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}
.rs-subscribe .rs-eyebrow {
  margin-bottom: 14px;
}
.rs-subscribe h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 520;
  letter-spacing: -0.045em;
  line-height: 1;
}
.rs-subscribe .rs-form input {
  border-color: rgba(224, 237, 255, 0.24);
  background: var(--night-soft);
  color: #f7fbff;
}
.rs-subscribe .rs-form input::placeholder {
  color: #8f9bb0;
}
.rs-subscribe__notes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  color: #9aa6b8;
  font-size: 12.5px;
}
.rs-subscribe__notes a {
  color: #9fc0ff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rs-subscribe + .site-footer {
  border-top: 0;
}

@media (max-width: 1180px) {
  .rs-latest {
    grid-template-columns: minmax(0, 1fr);
  }
  .rs-igrid--3,
  .rs-learn__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rs-ext a {
    grid-template-columns: 90px 150px minmax(0, 1fr);
  }
  .rs-ext__ref {
    grid-column: 3;
  }
}
@media (max-width: 1024px) {
  .rs-hero__grid--object,
  .rs-area-head--object .rs-area-head__grid,
  .rs-subscribe__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .rs-object {
    min-height: 0;
    max-width: 560px;
  }
}
@media (max-width: 760px) {
  .rs-igrid--3,
  .rs-igrid--2,
  .rs-learn__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .rs-ext a {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .rs-ext__ref {
    grid-column: auto;
  }
  .rs-rows--thumb a {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 6px 14px;
  }
  .rs-rows--thumb .rs-rows__thumb {
    grid-row: span 3;
    align-self: start;
  }
  .rs-rows--thumb .rs-rows__read {
    text-align: left;
  }
  .rs-subscribe .rs-form {
    flex-direction: column;
  }
}

/* Display equations keep normal paragraph rhythm. A wide equation keeps its published lines; the article runtime
   fits it to the column (smaller type, then the article's narrow variant, conversion guide 8). A scroll inside the
   equation's own box is the last resort (data-fit="scroll"), and check-article-dom fails it. */
.docs-prose .katex-display,
.docs-prose mjx-container[display="true"] {
  max-width: 100%;
  margin: 0.9em 0;
  padding: 0;
  overflow: visible;
}
.docs-prose .math[data-fit="scroll"] > .katex-display,
.docs-prose .orz-math-line__item[data-fit="scroll"] {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

/* ---------- round 4 (Jay 2026-10-16) ---------- */

/* Area page header: a light drafting surface under the machine instead of plain white. A fine blueprint grid
   is strongest behind the machine and fades out toward the text; a soft blue light pools under the drawing. */
.rs-area-head--object {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.rs-area-head--object::before,
.rs-area-head--object::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.rs-area-head--object::before {
  inset: 0;
  background:
    linear-gradient(90deg, rgba(36, 115, 255, 0.11) 1px, transparent 1px),
    linear-gradient(rgba(36, 115, 255, 0.1) 1px, transparent 1px);
  background-size: 36px 36px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 58% 88% at 77% 56%, #000 0%, rgba(0, 0, 0, 0.6) 42%, transparent 80%);
  mask-image: radial-gradient(ellipse 58% 88% at 77% 56%, #000 0%, rgba(0, 0, 0, 0.6) 42%, transparent 80%);
}
.rs-area-head--object::after {
  top: 6%;
  right: -10%;
  width: 66%;
  height: 100%;
  background: radial-gradient(closest-side, rgba(36, 115, 255, 0.16), rgba(91, 220, 243, 0.06) 55%, transparent);
}
html[data-theme="dark"] .rs-area-head--object::before {
  background:
    linear-gradient(90deg, rgba(143, 180, 251, 0.085) 1px, transparent 1px),
    linear-gradient(rgba(143, 180, 251, 0.075) 1px, transparent 1px);
  background-size: 36px 36px;
  background-position: center top;
}
html[data-theme="dark"] .rs-area-head--object::after {
  background: radial-gradient(closest-side, rgba(36, 115, 255, 0.2), rgba(91, 220, 243, 0.05) 55%, transparent);
}
@media (max-width: 1024px) {
  .rs-area-head--object::before {
    -webkit-mask-image: radial-gradient(ellipse 85% 48% at 50% 76%, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 82%);
    mask-image: radial-gradient(ellipse 85% 48% at 50% 76%, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 82%);
  }
  .rs-area-head--object::after {
    top: auto;
    right: -15%;
    bottom: -5%;
    width: 130%;
    height: 60%;
  }
}

/* Latest on area pages: four cards with a short summary */
.rs-igrid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.rs-igrid--4 .rs-icard strong,
.rs-learn__grid .rs-icard strong {
  font-size: 20px;
}
@media (max-width: 1180px) {
  .rs-igrid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .rs-igrid--4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Featured image under the title */
.rs-featured {
  margin: 30px 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  background: var(--paper-blue);
}
.rs-featured img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Learn more cards: a summary under each title, cut after three lines */
.rs-lcard__text {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.7;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* ---------- round 5 (Jay 2026-10-16) ---------- */

/* Subscribe messages in the site's own style; the browser's bubble is turned off (subscribe.js). */
.rs-subscribe .orz-subscribe-error {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 12px 0 0;
  color: #ffb3a1;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}
.rs-subscribe .orz-subscribe-error::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  background: currentColor;
}
.rs-subscribe .rs-form input[aria-invalid="true"] {
  border-color: #ff9a84;
  box-shadow: 0 0 0 1px #ff9a84;
}
.rs-subscribe .orz-subscribe-done {
  border-color: rgba(224, 237, 255, 0.24);
  background: var(--night-soft);
}
.rs-subscribe .orz-subscribe-done strong {
  color: #f7fbff;
}
.rs-subscribe .orz-subscribe-done span {
  color: #b8c4d6;
}

/* Footer: the wordmark sits at the end of the legal line (data-footer-brand="legal" in chrome.js). Its right
   edge lines up with the link columns above, which end 26px inside the frame (chrome.css .footer-links > div)
   (Jay 2026-10-16 round 6: off the right wall). */
.site-footer .footer-legal__brand {
  display: inline-flex;
  align-items: center;
  margin-right: 26px;
  opacity: 0.88;
  transition: opacity 160ms ease;
}
@media (max-width: 720px) {
  .site-footer .footer-legal__brand {
    margin-right: 0;
  }
}

/* Main hero numbers: where the four wrap into two rows, a two-column grid keeps the second column in line
   (Jay 2026-10-16 round 6; a wrapping flex row started each second item after its neighbour's width). */
@media (max-width: 760px) {
  .rs-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 24px;
  }
}
.site-footer .footer-legal__brand:hover {
  opacity: 1;
}
.site-footer .footer-legal__brand img {
  display: block;
  width: 112px;
  height: auto;
  /* the docs footer's correction for the ring under the O, so the letters sit on the copyright line */
  transform: translateY(10.5%);
}

/* Footer sizes follow the docs footer (Web/Docs/src/app/globals.css, footer rules; Jay 2026-10-18): the rule above the
   links, no bottom padding on wide screens, a 68px legal line with everything centred in it, and on a phone the
   offices on their own line. docs.css above is the older deployed copy, so these rules override it. */
.site-footer {
  padding-bottom: 0;
}
.site-footer .footer-links {
  border-top: 1px solid rgba(226, 239, 255, 0.13);
}
.site-footer .footer-legal {
  align-items: center;
  gap: 32px;
  min-height: 68px;
  padding-top: 0;
}
.site-footer .footer-legal__places .nw {
  white-space: nowrap;
}
@media (max-width: 720px) {
  .site-footer {
    padding-bottom: 30px;
  }
  .site-footer .footer-legal {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    padding-top: 26px;
  }
  .site-footer .footer-legal__sep {
    display: none;
  }
  .site-footer .footer-legal__places {
    display: block;
    margin-top: 4px;
  }
}

/* Area pages: the introduction under the area name is a short paragraph, not one line. */
.rs-area-head__text p.rs-area-intro {
  max-width: 600px;
  font-size: 17px;
  line-height: 1.75;
}

/* Hyphenated identifiers in titles stay on one line (site.js titleHtml, 2026-10-17). The span looks exactly like the
 * title around it: label rules that style every span in a link (the pager's "Previous", the feed's date) must not reach
 * it, so it resets to inherit with a specificity above those rules. */
.rs-nobr.rs-nobr.rs-nobr {
  all: unset;
  white-space: nowrap;
}

/* The way back to the article's area list, under previous and next on every article (2026-10-17). */
.rs-area-return {
  align-items: center;
  border: 1px solid var(--line);
  display: grid;
  gap: 6px 18px;
  grid-template-columns: auto 1fr auto;
  margin-top: 14px;
  padding: 16px 20px;
  transition: border-color 0.16s;
}
.rs-area-return:hover {
  border-color: var(--blue);
}
.rs-area-return__text {
  display: grid;
  gap: 2px;
}
.rs-area-return__text strong {
  color: var(--ink);
  font-family: var(--display);
  font-size: 17px;
  font-weight: 560;
}
.rs-area-return__text small {
  color: var(--muted);
  font-size: 12.5px;
}
.rs-area-return__go {
  align-items: center;
  color: var(--blue-text);
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  gap: 8px;
  white-space: nowrap;
}
.rs-area-return__go svg {
  height: 14px;
  width: 14px;
}
@media (max-width: 640px) {
  .rs-area-return {
    grid-template-columns: 1fr;
  }
  .rs-area-return .rs-label {
    justify-self: start;
  }
}

/* Image captions (Jay 2026-10-17: second design approved and applied to every article; the framed strip was
 * rejected). The image is left as it is. Its caption (WordPress
 * kept captions as a centred italic paragraph after the image) takes the figure caption's language without a number:
 * left-aligned under the image, upright, a size up and darker, led by a small blue square like the blue label of a
 * figure caption. CSS only, so body text, search index and caption checks keep the paragraph as it is. */
#article-body.docs-prose figure.wp-block-image:has(+ p.has-text-align-center) {
  margin-bottom: 12px;
}
#article-body.docs-prose figure.wp-block-image + p.has-text-align-center {
  margin: 0 0 40px;
  max-width: 720px;
  text-align: left;
}
#article-body.docs-prose figure.wp-block-image + p.has-text-align-center em {
  color: var(--ink) !important;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.6;
}
#article-body.docs-prose figure.wp-block-image + p.has-text-align-center em::before {
  background: var(--blue);
  content: "";
  display: inline-block;
  height: 7px;
  margin: 0 10px 0 1px;
  vertical-align: 0.12em;
  width: 7px;
}
@media (max-width: 640px) {
  #article-body.docs-prose figure.wp-block-image + p.has-text-align-center em {
    font-size: 14.5px;
  }
}

/* arXiv Learn More card (Jay 2026-10-17): a picture slot with arXiv's own logo files used unaltered, on a neutral
 * ground (white in the light theme, a dark neutral in the dark theme; a blue pastel ground clashed with the logo). */
.rs-lcard__mark {
  aspect-ratio: 16 / 9;
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: grid;
  margin: -28px -28px 4px;
  place-items: center;
}
.rs-lcard__logo {
  display: block;
  height: auto;
  width: 46%;
}
.rs-lcard__logo--dark {
  display: none;
}
html[data-theme="dark"] .rs-lcard__mark {
  background: #11161d;
}
html[data-theme="dark"] .rs-lcard__logo--light {
  display: none;
}
html[data-theme="dark"] .rs-lcard__logo--dark {
  display: block;
}
/* Ethereum Research card: ethresear.ch's logo is a white-ground PNG, so its slot stays white in both themes. The
 * Ethereum Magicians logo (transparent PNG, no dark-theme version) sits on the forum's own white ground the same way. */
html[data-theme="dark"] .rs-lcard__mark--white,
.rs-lcard__mark--white {
  background: #fff;
}
.rs-lcard__logo--wide {
  width: 64%;
}
/* Docs card: the docs social card fills the slot like an article picture. */
.rs-lcard__mark--cover {
  background: #05080d;
  overflow: hidden;
}
.rs-lcard__mark--cover img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}