@@ Line 50: / Line 50: @@
 #ship-article
 {
+	overflow: auto;
 	/*background-color: #111111;*/
      /*color: #CCCCCC;*/
@@ Line 648: / Line 649: @@
          width: 25%;
      }
+}
+/* Main page CSS */
+/* === Main Page Layout (scoped) === */
+.mainpage-wrapper .main-banner {
+    text-align: center;
+}
+.mainpage-wrapper .search-area {
+    border-radius: var(--border-radius-base);
+    cursor: pointer;
+    transition: background 0.2s ease;
+    text-align: center;
+}
+.mainpage-wrapper .search-area:hover {
+  background: var(--color-surface-3);
+}
+.mainpage-wrapper .intro-text {
+    text-align: center;
+}
+.mainpage-wrapper .info-row {
+    display: flex;
+    gap: 1em;
+    margin: 1em;
+}
+.mainpage-wrapper .info-box {
+  flex: 1 1 32%;
+  display: flex;
+  flex-direction: column;
+  margin: 0 !important;
+}
+.mainpage-wrapper pre{
+  white-space: pre-wrap;   /* wrap long lines */
+  word-wrap: break-word;   /* break long words if needed */
+  min-width:250px;
+}
+.mainpage-wrapper .info-box,.about-box,.intro-text,.search-area{
+	color: var(--color-emphasized);
+    background-color: var(--color-surface-2);
+    border: var(--border-width-base) solid var(--border-color-base);
+    overflow: auto;
+    border-radius: var(--border-radius-large);
+    padding: 1em;
+    margin: 1em;
+}
+/* The banner box */
+.main-banner {
+    position: relative;
+    height: 450px;
+    max-width: 2440px;          /* stop growing beyond image width */
+    margin: 1em auto;           /* centre the container */
+    overflow: hidden;           /* crop sides */
+    background-color: var(--color-surface-2);
+    border: var(--border-width-base) solid var(--border-color-base);
+    border-radius: var(--border-radius-large);
+    color: var(--color-emphasized);
+    padding: 0;
+}
+/* centre ANY img inside (not just mw-file-element) */
+.main-banner img {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    height: 100%;
+    width: auto;
+    max-width: none;
+}
+.main-banner > a { display:block; height:100%; }
+.mainpage-wrapper .lower-row {
+	display: flex;
+    gap: 1em;
+    margin: 1em;
+}
+.mainpage-wrapper .about-box {
+    flex: 1 1 31.3%;
+    margin: 0 !important;
+}
+.mainpage-wrapper .link-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5em;
+    flex: 1 1 65%;
+    justify-content: center;
+}
+.mainpage-wrapper .link-tile {
+	width: 200px;
+    height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    background-color: var(--color-surface-2);
+    border: var(--border-width-base) solid var(--border-color-base);
+}
+.mainpage-wrapper .link-tile {
+  position: relative;
+  width: 200px;
+  height: 200px;
+  overflow: hidden;
+  background: var(--color-surface-2);
+  border: var(--border-width-base) solid var(--border-color-base);
+}
+.mainpage-wrapper .tile-inner {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.mainpage-wrapper .tile-inner img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.mainpage-wrapper .tile-label {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.6);
+  text-align: center;
+  padding: 0.3em;
+  font-weight: bold;
+  font-size: 1em;
+}
+.mainpage-wrapper .tile-label a {
+  color: white;
+  text-decoration: none;
+}
+.mainpage-wrapper .tile-label a:hover {
+  text-decoration: underline;
+}
+/* === Mobile responsiveness === */
+@media (max-width: 1200px) {
+  .mainpage-wrapper .info-row {
+    flex-direction: column;
+  }
+  .mainpage-wrapper .info-box {
+    flex: 1 1 auto;
+  }
+  .mainpage-wrapper .lower-row {
+    flex-direction: column;
+  }
+}
+.github-badge-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 1em;
+}
+.github-badge-title {
+  white-space: nowrap;
+}
+/* Light mode (default) */
+.patreon-logo-dark {
+  display: none;
+}
+.patreon-logo-light {
+  display: inline;
+}
+/* Dark mode (activated via root class) */
+:root.skin-theme-clientpref-night .patreon-logo-light {
+  display: none;
+}
+:root.skin-theme-clientpref-night .patreon-logo-dark {
+  display: inline;
 }