@@ Line 365: / Line 365: @@
          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 #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-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-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: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