@@ Line 1: / Line 1: @@
-/* BezelBase — clean reference site with deep green accents */
+/* Rolexopedia — clean reference site with deep green accents */
 /* ===== Typography ===== */
 body, .mw-body, .mw-body-content {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-     line-height: 1.7;
+     line-height: 1.5;
      color: #1a1a1a;
+}
+/* Override Vector 2022's 0.875rem (14px) body text */
+.vector-body,
+.mw-parser-output,
+.mw-body-content {
+    font-size: 1rem !important;
+}
+/* Tighten paragraph spacing */
+.mw-body-content p {
+    margin: 0.4em 0;
 }
 /* ===== Page title ===== */
 .mw-page-title-main,
-.mw-first-heading {
+.mw-first-heading,
-     font-weight: 700;
+.mw-body h1.firstHeading,
-     font-size: 2em;
+.vector-body h1 {
-     letter-spacing: -0.02em;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
+     font-weight: 800;
+     font-size: 2.3em;
+     letter-spacing: -0.03em;
+    line-height: 1.1;
      border-bottom: none !important;
      color: #1b3a2d;
+    margin-bottom: 0.2em;
+}
+/* Vector draws a grey hairline under the title bar via ::after; the
+   breadcrumb + spacing does that job here. */
+.vector-page-titlebar::after,
+.mw-body-header::after {
+    display: none !important;
 }
-/* ===== Headings — deep green accents ===== */
+/* ===== Headings — sans, deep green, light rule ===== */
 .mw-body-content h2 {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      font-size: 1.5em;
-     font-weight: 600;
+     font-weight: 700;
-     border-bottom: 2px solid #2d5e3f;
+    letter-spacing: -0.01em;
-     padding-bottom: 0.3em;
+     border-bottom: 1px solid #d4e0d8;
-     margin-top: 2em;
+     padding-bottom: 0.25em;
+     margin-top: 1.4em;
+    margin-bottom: 0.4em;
      color: #1b3a2d;
 }
 .mw-body-content h3 {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      font-size: 1.2em;
-     font-weight: 600;
+     font-weight: 650;
-     border-bottom: 1px solid #d4e0d8;
+     border-bottom: none;
-     padding-bottom: 0.2em;
+     padding-bottom: 0;
-     margin-top: 1.5em;
+     margin-top: 1.1em;
+    margin-bottom: 0.25em;
      color: #1b3a2d;
+}
+.mw-body-content h4 {
+    margin-top: 0.6em;
+    margin-bottom: 0.15em;
 }
@@ Line 79: / Line 110: @@
 }
-/* ===== Content area — centered ===== */
+/* ===== Content area — centered, TOC as left sidebar ===== */
+/* Let Vector 2022 keep its grid but widen + center it */
+.mw-page-container {
+    max-width: 1240px !important;
+    margin: 0 auto !important;
+    padding: 0 1em !important;
+}
 .mw-body {
-     max-width: 960px;
+     padding: 0.8em 0;
-     margin: 0 auto !important;
+}
-    padding: 1.5em 2em;
+/* Disable the limited-width feature that offsets content */
+.vector-feature-limited-width-clientpref-1 .mw-content-container,
+.vector-feature-limited-width-content-enabled .mw-content-container {
+     max-width: none !important;
 }
-/* Center the content container in Vector 2022 */
+/* Header centered */
-.mw-page-container {
+.vector-header-container {
-     max-width: 1200px;
+     max-width: 1240px !important;
      margin: 0 auto !important;
 }
+/* ===== TOC sidebar — clean, no overlap ===== */
 .vector-column-start {
-     /* Keep TOC but don't push content off-center */
+     width: 200px !important;
+    min-width: 200px !important;
+}
+/* Prevent TOC from overlapping content */
+.vector-toc {
+    position: sticky;
+    top: 1em;
 }
-/* When TOC is hidden, content should still be centered */
+.vector-sidebar-container-no-toc ~ .mw-content-container {
-.mw-content-container {
+     margin-left: 0 !important;
-     max-width: 960px;
-    margin: 0 auto !important;
 }
-/* ===== Tables ===== */
+/* ===== Tables — horizontal rules only, rounded frame ===== */
 .wikitable {
-     border-collapse: collapse;
+     border-collapse: separate;
+    border-spacing: 0;
      border: 1px solid #d4e0d8;
+    border-radius: 8px;
+    overflow: hidden;
      background: #fff;
      font-size: 0.92em;
+    margin: 0.6em 0 1em;
 }
 .wikitable th {
      background: #eef3ef;
      font-weight: 600;
-     padding: 0.5em 0.8em;
+    font-size: 0.82em;
-     border: 1px solid #d4e0d8;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+     padding: 0.55em 0.9em;
+    border: none;
+     border-bottom: 1px solid #d4e0d8;
      text-align: left;
-     color: #1b3a2d;
+     color: #2f5541;
+    vertical-align: bottom;
 }
 .wikitable td {
-     padding: 0.5em 0.8em;
+     padding: 0.5em 0.9em;
-     border: 1px solid #e8ede9;
+     border: none;
+    border-bottom: 1px solid #eef3ef;
+    vertical-align: top;
 }
-.wikitable tr:nth-child(even) {
+.wikitable tr:last-child td {
+    border-bottom: none;
+}
+.wikitable tr:nth-child(even) td {
      background: #fafcfa;
+}
+/* Core-facts table on reference pages: key/value card. The class is set
+   by import_reference.py and by the 2026-09-05 backfill pass. */
+.wikitable.rp-facts {
+    width: auto;
+    min-width: min(100%, 480px);
+    max-width: 640px;
+    font-size: 0.95em;
+}
+.wikitable.rp-facts td:first-child {
+    white-space: nowrap;
+}
+.wikitable.rp-facts th {
+    display: none;
+}
+.wikitable.rp-facts td:first-child {
+    width: 32%;
+    font-size: 0.8em;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: #5a7a63;
+    font-weight: 600;
+    background: #f7faf8 !important;
+    padding-top: 0.7em;
+}
+.wikitable.rp-facts td:last-child {
+    font-weight: 500;
+    color: #1a1a1a;
+    background: #fff !important;
 }
@@ Line 127: / Line 217: @@
      background: none !important;
 }
-.thumbinner {
+.thumbinner,
+figure[typeof~="mw:File/Thumb"],
+figure[typeof~="mw:File/Frame"] {
      border: 1px solid #d4e0d8 !important;
+    border-radius: 8px;
+    background: #fafcfa !important;
+    padding: 6px !important;
+    overflow: hidden;
+}
+figure[typeof~="mw:File/Thumb"] > a > img,
+figure[typeof~="mw:File/Frame"] > a > img {
      border-radius: 4px;
-     background: #fafcfa !important;
+     background: #fff;
-     padding: 4px !important;
+}
+.thumbcaption,
+figure[typeof~="mw:File/Thumb"] > figcaption,
+figure[typeof~="mw:File/Frame"] > figcaption {
+    font-size: 0.82em;
+    color: #5a6b60;
+    padding: 6px 4px 2px;
+    line-height: 1.4;
+}
+/* ===== Table of contents =====
+   Vector 2022 drops the sidebar table of contents below 1120px and replaces it
+   with a dropdown in the title bar, which on a reference article means losing
+   the one control that makes a long dial timeline navigable. The left column
+   is still 200px wide and empty at those widths, so keep the real TOC down to
+px and hide the title-bar fallback that would otherwise double it. */
+@media screen and (min-width: 1000px) and (max-width: 1119px) {
+    .client-js .mw-table-of-contents-container.vector-toc-landmark,
+    .client-js #vector-toc-pinned-container,
+    .client-js .vector-sticky-pinned-container {
+        display: block;
+    }
+    #vector-page-titlebar-toc,
+    .vector-page-titlebar .vector-page-titlebar-toc {
+        display: none;
+    }
+}
+/* ===== Lead image =====
+   A reader arriving from a search result confirms one thing first: is this the
+   watch I am looking at. A 220px crop floated into the margin answers that
+   badly, so references lead with the hero shot at column width. Placed by
+   scripts/place_hero.py as <div class="rp-lead"> wrapping a centered thumb,
+   which keeps the caption and keeps MultimediaViewer's click-to-enlarge. */
+.rp-lead {
+    margin: 0.2em 0 1.4em;
+    clear: both;
+}
+/* Keep a section's figures inside that section. A tall right-floated thumb
+   near the end of one section otherwise overhangs the next heading and its
+   first paragraphs, which is where the "images interfering with each other"
+   messiness comes from. Scoped to parser output so it never touches the
+   skin's own headings. */
+.mw-parser-output h2,
+.mw-parser-output h3,
+.mw-parser-output .mw-heading2,
+.mw-parser-output .mw-heading3 {
+    clear: both;
+}
+.rp-lead .thumb,
+.rp-lead .thumbinner,
+.rp-lead figure {
+    width: 100% !important;
+    max-width: 100% !important;
+    margin: 0 !important;
+    float: none !important;
+    border: none !important;
+    background: none !important;
+    padding: 0 !important;
+    /* Centring has to happen here, not on the image. MediaWiki wraps the file
+       in an inline <a>, so `margin: 0 auto` on the img centres it inside an
+       anchor that has already shrunk to fit — which left a height-capped
+       portrait lead 342px wide sitting flush against the left margin of a
+px column. Centre the inline flow instead. */
+    text-align: center;
+}
+.rp-lead a {
+    display: inline-block;
+}
+.rp-lead img {
+    /* Landscape heroes fill the column, which is the look we want. Most of the
+       corpus is not landscape yet (27 landscape, 90 square, 83 portrait), and
+       at full column width a 2:3 portrait renders about 1140px tall — it buries
+       the intro instead of introducing it. Capping the height keeps a landscape
+       hero untouched (a 3:2 at this width is ~507px) while a portrait one
+       becomes a tall centered figure rather than a wall. Height, not a crop:
+       nothing is cut off a watch photograph. */
+    max-height: 520px;
+    width: auto;
+    max-width: 100%;
+    height: auto;
+    display: inline-block;
+    border: 1px solid #d4e0d8;
+    border-radius: 8px;
+    background: #fff;
+}
+.rp-lead .thumbcaption,
+.rp-lead figcaption {
+    text-align: center;
+    font-size: 0.82em;
+    color: #5a6b60;
+     padding: 8px 2px 0 !important;
+    border-top: 1px solid #e3eae5;
+    margin-top: 8px;
+}
+/* The magnify pointer is redundant when the whole image opens the lightbox. */
+.rp-lead .magnify {
+    display: none;
+}
+@media (max-width: 640px) {
+    .rp-lead {
+        margin-bottom: 1.1em;
+    }
+    .rp-lead img {
+        border-radius: 6px;
+    }
+}
+/* ===== Galleries =====
+   MediaWiki ships galleries as grey-bordered boxes with a byte count under
+   each cell, which is the single least pristine thing on a watch page. The
+   rules below strip the chrome back to the photograph: uniform tiles, one
+   consistent gutter, captions that read as labels, and a hover state that
+   signals the MultimediaViewer lightbox is there. */
+ul.gallery {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 14px;
+    margin: 1.2em 0 1.6em;
+    padding: 0;
+    background: none;
+    border: none;
+    /* A gallery is a full-width comparison plate and must never share a line
+       with a floated figure. Without this, packed mode measures the narrowed
+       gutter beside the float and lays out ragged rows at inconsistent sizes —
+       seen live on Reference:5513, where a 250px right float bled 348px down
+       from the previous section and broke the Special-branches plate into a
+-then-2 stagger. */
+    clear: both;
+}
+li.gallerybox {
+    margin: 0 !important;
+    border: none !important;
+    background: none !important;
+    vertical-align: top;
+}
+li.gallerybox div.thumb {
+    margin: 0 !important;
+    padding: 0 !important;
+    border: 1px solid #d4e0d8 !important;
+    border-radius: 8px;
+    background: #fff !important;
+    overflow: hidden;
+    transition: box-shadow 0.18s ease, transform 0.18s ease,
+                border-color 0.18s ease;
+}
+li.gallerybox div.thumb img {
+    display: block;
+    border-radius: 7px;
+}
+/* The lightbox is the point of a gallery — say so on hover. */
+li.gallerybox div.thumb:hover {
+    border-color: #1b5e3b !important;
+    box-shadow: 0 6px 18px rgba(27, 94, 59, 0.16);
+    transform: translateY(-2px);
+}
+li.gallerybox div.thumb a {
+    cursor: zoom-in;
+}
+li.gallerybox .gallerytext {
+    padding: 7px 2px 0 !important;
+    font-size: 0.8em;
+    line-height: 1.4;
+    color: #5a6b60;
+    text-align: center;
+}
+li.gallerybox .gallerytext p {
+    margin: 0;
+}
+/* Byte counts and pixel dimensions belong on a File: page, not under a
+   photograph of a 5513. $wgGalleryOptions suppresses them server-side; this
+   is the belt-and-braces for galleries written with explicit attributes. */
+li.gallerybox .gallerytext .bytes,
+li.gallerybox .gallerytext .fileinfo {
+    display: none;
+}
+/* Packed mode sets its own inline widths — don't fight them, just keep the
+   rhythm consistent. */
+ul.mw-gallery-packed li.gallerybox,
+ul.mw-gallery-packed-hover li.gallerybox,
+ul.mw-gallery-packed-overlay li.gallerybox {
+    margin: 0 !important;
+}
+ul.mw-gallery-packed li.gallerybox div.thumb {
+    background: #fff !important;
 }
-.thumbcaption {
+@media (max-width: 600px) {
-     font-size: 0.85em;
+    ul.gallery {
-    color: #666;
+        gap: 8px;
-     padding: 4px 6px;
+    }
+     li.gallerybox .gallerytext {
+        font-size: 0.75em;
+     }
 }
 /* ===== Breadcrumb ===== */
-.mw-parser-output > small:first-of-type {
+.mw-parser-output > small:first-of-type,
+.mw-parser-output > p:first-of-type > small:first-child {
      display: block;
-     margin-bottom: 0.8em;
+     margin: 0 0 0.9em;
-     font-size: 0.85em;
+     font-size: 0.82em;
+    letter-spacing: 0.03em;
+    text-transform: uppercase;
      color: #5a7a63;
 }
-.mw-parser-output > small:first-of-type a {
+.mw-parser-output > small:first-of-type a,
+.mw-parser-output > p:first-of-type > small:first-child a {
      color: #1b5e3b;
+    font-weight: 600;
+}
+.mw-parser-output > small:first-of-type b,
+.mw-parser-output > p:first-of-type > small:first-child b {
+    color: #1b3a2d;
 }
-/* ===== TOC ===== */
+/* ===== TOC — dark green links ===== */
 .vector-toc {
      font-size: 0.88em;
+    border-left: 1px solid #e3ebe5;
+    padding-left: 0.8em !important;
 }
-.vector-toc .vector-toc-link:hover {
+.vector-toc .vector-pinnable-header-label {
-     color: #1b5e3b;
+    color: #5a7a63 !important;
+    font-size: 0.8em;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+}
+.vector-toc a,
+.vector-toc .vector-toc-link,
+.vector-toc-text,
+.sidebar-toc a,
+.sidebar-toc .sidebar-toc-link {
+    color: #1b5e3b !important;
+}
+.vector-toc a:hover,
+.vector-toc .vector-toc-link:hover,
+.sidebar-toc a:hover {
+    color: #0f3d25 !important;
+}
+/* Active TOC item */
+.vector-toc .vector-toc-list-item-active > .vector-toc-link,
+.sidebar-toc .sidebar-toc-list-item-active > a {
+     color: #1b3a2d !important;
+    font-weight: 600;
 }
@@ Line 165: / Line 484: @@
      padding: 0.5em 1em;
      font-size: 0.85em;
-     margin-top: 2em;
+     margin-top: 1.2em;
 }
 /* ===== Strip wiki UI ===== */
+/* Hide "Reference:" namespace prefix from h1 on Reference pages.
+   Wiki URL stays /wiki/Reference:5513; visible h1 is just "5513".
+   ns-3000 = NS_REFERENCE (custom namespace defined in LocalSettings.php). */
+body.ns-3000 .mw-page-title-namespace,
+body.ns-3000 .mw-page-title-separator {
+    display: none !important;
+}
 /* Hide Discussion tab */
@@ Line 213: / Line 540: @@
 }
-/* Hide Tools dropdown for anonymous */
+/* Hide Tools dropdown */
-body:not(.mw-user-logged-in) #vector-page-tools {
+#vector-page-tools {
+    display: none !important;
+}
+/* Hide the entire page toolbar row (empty after removing all tabs) */
+.vector-page-toolbar {
      display: none !important;
 }
@@ Line 238: / Line 569: @@
      border-top: 1px solid #d4e0d8;
      text-align: center;
-     padding: 1.5em 0;
+     padding: 1em 0;
      color: #999;
      font-size: 0.82em;
@@ Line 265: / Line 596: @@
 /* ===== Lists ===== */
 .mw-body-content ul, .mw-body-content ol {
-     margin: 0.5em 0;
+     margin: 0.3em 0;
      padding-left: 1.5em;
 }
 .mw-body-content li {
-     margin: 0.3em 0;
+     margin: 0.15em 0;
+}
+/* ===== Remove extra spacing from pandoc span anchors ===== */
+/* Only target empty span anchors, not headline spans */
+.mw-body-content > span[id]:empty,
+.mw-body-content p + span[id]:empty {
+    display: block;
+    margin: 0;
+    padding: 0;
+    line-height: 0;
+    font-size: 0;
+}
+/* ===== Reference-page sections ===== */
+/* Sources footer: long external-link list → two quiet columns. */
+.mw-body-content h2:has(> #Sources) ~ ul {
+    columns: 2;
+    column-gap: 2.5em;
+    font-size: 0.88em;
+    color: #444;
+    padding-left: 1.2em;
+}
+.mw-body-content h2:has(> #Sources) ~ ul li {
+    break-inside: avoid;
+    margin: 0 0 0.35em;
+}
+/* Related references: link + one-line gloss, as a light list. */
+.mw-body-content h2:has(> #Related_references) + ul,
+.mw-body-content h2:has(> #Related_references) + p + ul {
+    list-style: none;
+    padding: 0;
+    margin: 0.4em 0 1em;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.4em 1.4em;
+}
+.mw-body-content h2:has(> #Related_references) + ul li,
+.mw-body-content h2:has(> #Related_references) + p + ul li {
+    padding: 0.45em 0;
+    border-top: 1px solid #eef3ef;
+    font-size: 0.95em;
+    line-height: 1.45;
+}
+@media (max-width: 720px) {
+    .mw-body-content h2:has(> #Sources) ~ ul {
+        columns: 1;
+    }
+    .mw-body-content h2:has(> #Related_references) + ul,
+    .mw-body-content h2:has(> #Related_references) + p + ul {
+        grid-template-columns: 1fr;
+    }
+}
+/* Sub-family / era wrapper headings on family pages read better with air. */
+.mw-body-content h2 + p {
+    margin-top: 0.5em;
 }
@@ Line 275: / Line 661: @@
 .mw-body-content blockquote {
      border-left: 3px solid #2d5e3f;
-     margin: 1em 0;
+     margin: 0.6em 0;
      padding: 0.5em 1em;
      color: #444;
      font-style: italic;
+}
+/* ===== Responsive tables (mobile) ===== */
+/* The multi-column serial-range and generation grids are wider than a phone
+   screen, which made the whole page scroll horizontally (content-wider-than-
+   screen — a mobile-usability fail under mobile-first indexing). Below the
+   tablet breakpoint, let a wide table scroll inside its own box instead of
+   pushing the page. display:block is what makes overflow-x take effect on a
+   <table>; desktop layout is untouched. */
+@media (max-width: 720px) {
+    .mw-parser-output .wikitable {
+        display: block;
+        width: 100%;
+        max-width: 100%;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+}
+/* =====================================================================
+   Main Page — layout system (classes prefixed rp-). Scoped so article
+   pages are unaffected. Grid falls back to one column on phones.
+   ===================================================================== */
+body.page-Main_Page .mw-first-heading,
+body.page-Main_Page .vector-page-titlebar,
+body.page-Main_Page #siteSub,
+body.page-Main_Page .vector-body-before-content,
+body.page-Main_Page #contentSub {
+    display: none !important;
+}
+body.page-Main_Page .mw-body {
+    padding-top: 0;
+}
+body.page-Main_Page .mw-body-content h2 {
+    border-bottom: none;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    font-size: 1.45em;
+    font-weight: 700;
+    letter-spacing: -0.01em;
+    margin: 2em 0 0.7em;
+    padding: 0;
+}
+body.page-Main_Page .mw-body-content h2 .mw-editsection {
+    display: none;
+}
+/* Hero */
+.rp-hero {
+    padding: 2.2em 0 1.8em;
+    border-bottom: 1px solid #e3ebe5;
+}
+.rp-hero-title {
+    font-size: 2.6em;
+    font-weight: 800;
+    letter-spacing: -0.03em;
+    line-height: 1.05;
+    color: #1b3a2d;
+    margin: 0 0 0.35em;
+}
+.rp-hero-lede {
+    font-size: 1.15em;
+    line-height: 1.55;
+    max-width: 62ch;
+    color: #2b2b2b;
+}
+.rp-hero-lede p {
+    margin: 0 0 0.6em !important;
+}
+.rp-stats {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2.2em;
+    margin-top: 1.4em;
+}
+.rp-stat b {
+    display: block;
+    font-size: 1.7em;
+    font-weight: 700;
+    color: #1b3a2d;
+    line-height: 1.1;
+}
+.rp-stat span {
+    font-size: 0.85em;
+    color: #5a7a63;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+}
+/* Eyebrow label */
+.rp-eyebrow {
+    display: block;
+    font-size: 0.75em;
+    font-weight: 600;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: #5a7a63;
+    margin-bottom: 0.3em;
+}
+/* Card grid */
+.rp-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 1.1em;
+    margin: 0.6em 0 0.4em;
+}
+.rp-grid.rp-grid-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+.rp-card {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid #d4e0d8;
+    border-radius: 10px;
+    background: #fff;
+    overflow: hidden;
+    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
+}
+.rp-card:hover {
+    border-color: #9fb8a8;
+    box-shadow: 0 8px 22px rgba(27, 58, 45, 0.12);
+    transform: translateY(-2px);
+}
+.rp-card-img {
+    aspect-ratio: 4 / 3;
+    background: #f3f7f4;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+.rp-card-img a,
+.rp-card-img span {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+.rp-card-img img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    display: block;
+}
+.rp-card-img.rp-cover img {
+    object-fit: cover;
+}
+.rp-card-img.rp-cover-top img {
+    object-position: center top;
+}
+.rp-card-body {
+    padding: 0.85em 1em 1em;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25em;
+}
+.rp-card-title {
+    font-size: 1.1em;
+    font-weight: 700;
+    color: #1b3a2d;
+    line-height: 1.2;
+}
+.rp-card-title a {
+    color: #1b3a2d !important;
+}
+.rp-card-meta {
+    font-size: 0.82em;
+    color: #5a7a63;
+}
+.rp-card-text {
+    font-size: 0.92em;
+    color: #333;
+    line-height: 1.45;
+}
+.rp-card-text p {
+    margin: 0 !important;
+}
+/* Featured (from the archive) */
+.rp-featured {
+    display: grid;
+    grid-template-columns: 280px minmax(0, 1fr);
+    gap: 1.6em;
+    align-items: center;
+    padding: 1.4em;
+    border: 1px solid #d4e0d8;
+    border-radius: 10px;
+    background: #fff;
+}
+.rp-featured-img {
+    aspect-ratio: 1 / 1;
+    background: #f3f7f4;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+.rp-featured-img a,
+.rp-featured-img span {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+.rp-featured-img img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    display: block;
+}
+.rp-featured-title {
+    font-size: 1.5em;
+    font-weight: 700;
+    color: #1b3a2d;
+    letter-spacing: -0.01em;
+    margin-bottom: 0.4em;
+}
+.rp-featured-body {
+    font-size: 1em;
+    line-height: 1.55;
+}
+.rp-featured-body p {
+    margin: 0 0 0.6em !important;
+}
+.rp-button {
+    display: inline-block;
+    margin-top: 0.4em;
+    padding: 0.5em 1em;
+    border-radius: 6px;
+    background: #1b5e3b;
+    color: #fff !important;
+    font-weight: 600;
+    font-size: 0.92em;
+    text-decoration: none !important;
+}
+.rp-button a,
+.rp-button a:not(.new) {
+    color: #fff !important;
+    text-decoration: none !important;
+}
+.rp-button:hover {
+    background: #0f3d25;
+}
+/* Reference index — one block per family, eras as rows, refs as chips */
+.rp-index {
+    border: 1px solid #d4e0d8;
+    border-radius: 10px;
+    background: #fff;
+    padding: 1em 1.2em 0.6em;
+    margin: 0 0 0.9em;
+}
+.rp-index-head {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    gap: 1em;
+    margin-bottom: 0.4em;
+}
+.rp-index-title {
+    font-size: 1.15em;
+    font-weight: 700;
+    color: #1b3a2d;
+}
+.rp-index-title a {
+    color: #1b3a2d !important;
+}
+.rp-index-more {
+    font-size: 0.85em;
+    white-space: nowrap;
+}
+.rp-era {
+    display: grid;
+    grid-template-columns: 190px minmax(0, 1fr);
+    gap: 0.3em 1em;
+    padding: 0.55em 0;
+    border-top: 1px solid #eef3ef;
+    align-items: start;
+}
+.rp-era-name {
+    font-size: 0.92em;
+    font-weight: 600;
+    color: #1b3a2d;
+    line-height: 1.3;
+}
+.rp-era-name small {
+    display: block;
+    font-weight: 400;
+    color: #5a7a63;
+    font-size: 0.88em;
+}
+.rp-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.35em;
+}
+.rp-chips a {
+    display: inline-block;
+    padding: 0.18em 0.65em;
+    border: 1px solid #cfdcd3;
+    border-radius: 999px;
+    background: #f7faf8;
+    font-size: 0.88em;
+    line-height: 1.5;
+    color: #1b5e3b !important;
+    text-decoration: none !important;
+    transition: background 0.1s ease, color 0.1s ease;
+}
+.rp-chips a:hover {
+    background: #1b5e3b;
+    border-color: #1b5e3b;
+    color: #fff !important;
+}
+/* Recently updated */
+.rp-recent ul {
+    list-style: none;
+    padding: 0 !important;
+    margin: 0 !important;
+}
+.rp-recent li {
+    padding: 0.55em 0;
+    border-top: 1px solid #eef3ef;
+    margin: 0 !important;
+    line-height: 1.6;
+}
+.rp-recent li:last-child {
+    border-bottom: 1px solid #eef3ef;
+}
+.rp-recent li b {
+    display: inline-block;
+    min-width: 9.5em;
+    color: #5a7a63;
+    font-weight: 600;
+    font-size: 0.85em;
+    letter-spacing: 0.02em;
+}
+/* Footnote */
+.rp-footnote {
+    margin-top: 2.5em;
+    padding-top: 1em;
+    border-top: 1px solid #e3ebe5;
+    font-size: 0.85em;
+    color: #666;
+}
+@media (max-width: 960px) {
+    .rp-grid,
+    .rp-grid.rp-grid-4 {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    .rp-featured {
+        grid-template-columns: 200px minmax(0, 1fr);
+    }
+}
+@media (max-width: 600px) {
+    .rp-hero-title {
+        font-size: 2em;
+    }
+    .rp-grid,
+    .rp-grid.rp-grid-4 {
+        grid-template-columns: 1fr;
+    }
+    .rp-featured {
+        grid-template-columns: 1fr;
+    }
+    .rp-era {
+        grid-template-columns: 1fr;
+        gap: 0.25em;
+    }
+    .rp-recent li b {
+        display: block;
+        min-width: 0;
+    }
 }

MediaWiki:Common.css: Difference between revisions