Center hero on homepage, image-left text-right on mission/makima

- Default homepage now uses single-column grid; the SORYU masthead is
  absolutely positioned in the upper-left of the cover frame, so the
  hero typewriter is genuinely centered on the page (verified
  taglineCenterX === pageCenter at 1280px).
- Mission/MAKIMA on desktop (>=1025px) switch to a flex layout with
  the image absolutely positioned in a 360px left gutter and all body
  text (badge -> headline -> paragraphs) flowing on the right.
- Mobile and tablet (<=1024px) keep the stacked layout; masthead
  returns to inline flow under the navbar.
- MAKIMA badge uses flex `order: -1` so it appears above the headline
  visually, even though the JSX renders headline first.

1 files changed, 90 insertions, 6 deletions

diff --git a/frontend/src/styles/heisei.css b/frontend/src/styles/heisei.css
index 4017f83..2500ff8 100644
--- a/frontend/src/styles/heisei.css
+++ b/frontend/src/styles/heisei.css
@@ -186,29 +186,59 @@ body { background: var(--hz-night); color: var(--hz-ink); }
    3. Cover layout — breathe (top padding accounts for header + navbar)
    ---------------------------------------------------------------- */
 
-.modern-landing-page.manga-style .taisho-cover .cover-content {
-  grid-template-columns: 200px 1fr;
+/* Default homepage: single column so the hero is genuinely page-centered.
+   The masthead is overlaid in the top-left corner of the cover frame. */
+.modern-landing-page.manga-style .taisho-cover:not(.mission-mode) .cover-content {
+  grid-template-columns: 1fr;
   grid-template-rows: 1fr;          /* CTA is no longer in this grid */
-  grid-template-areas: "masthead hero";
-  gap: 40px;
+  grid-template-areas: "hero";
+  gap: 0;
+  position: relative;               /* anchor for absolutely-positioned masthead */
   /* wrapper is now top: 72px, so we only clear the 52px navbar + breathing */
   padding: 84px 56px 56px;
 }
 
-/* Mission / MAKIMA panels: hug the navbar — no big void above the headline */
+/* Hero spans the whole row in default mode */
+.modern-landing-page.manga-style .taisho-cover:not(.mission-mode) .hero {
+  grid-area: hero;
+}
+
+/* Masthead: float above the hero in the upper-left corner of the frame */
+.modern-landing-page.manga-style .taisho-cover:not(.mission-mode) .masthead {
+  position: absolute;
+  top: 84px;                        /* matches cover-content padding-top */
+  left: 56px;                       /* matches cover-content padding-left */
+  z-index: 5;
+  pointer-events: auto;
+}
+
+/* Mission / MAKIMA panels: keep the 2-col grid (masthead column + hero column)
+   so the SORYU branding column doesn't overlap the panel content. */
 .modern-landing-page.manga-style .taisho-cover.mission-mode .cover-content {
+  grid-template-columns: 200px 1fr;
+  grid-template-rows: 1fr;
+  grid-template-areas: "masthead hero";
   padding: 72px 56px 48px;          /* 52 nav + 20 breathing */
   gap: 32px;
 }
 
 @media (max-width: 1024px) {
-  .modern-landing-page.manga-style .taisho-cover .cover-content {
+  /* Restore stacked layout on tablet/phone: masthead above hero, in flow */
+  .modern-landing-page.manga-style .taisho-cover:not(.mission-mode) .cover-content {
     grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
     grid-template-areas: "masthead" "hero";
     padding: 76px 24px 40px;        /* 48 nav + 28 breathing */
     gap: 28px;
   }
+  .modern-landing-page.manga-style .taisho-cover:not(.mission-mode) .masthead {
+    position: static;
+    top: auto;
+    left: auto;
+  }
   .modern-landing-page.manga-style .taisho-cover.mission-mode .cover-content {
+    grid-template-columns: 1fr;
+    grid-template-areas: "masthead" "hero";
     padding: 64px 20px 28px;        /* 48 nav + 16 breathing */
     gap: 16px;
   }
@@ -418,6 +448,60 @@ body { background: var(--hz-night); color: var(--hz-ink); }
   display: block;
 }
 
+/* ----- Desktop (≥1025px): image on the left, copy on the right ----- */
+@media (min-width: 1025px) {
+  .mission-screen {
+    /* Override pc98's grid; use flex-column for the right-column text flow.
+       Image is absolutely positioned in the reserved left gutter. */
+    display: flex !important;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0;
+    position: relative;
+    max-width: 980px;
+    padding-left: calc(360px + 32px) !important;
+    border-left: 0 !important;
+    min-height: clamp(220px, 44vh, 420px);
+  }
+  .mission-screen .mission-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 360px;
+    height: clamp(220px, 44vh, 420px);
+    object-fit: cover;
+    /* Pc98 sets `grid-area: hero` etc — clear leftover row hints */
+    grid-area: auto;
+  }
+  /* Right-column text: each block owns its own accent rule */
+  .mission-screen .mission-headline,
+  .mission-screen .mission-paragraph {
+    padding-left: 18px;
+    border-left: 2px solid var(--hz-amber);
+    margin: 0;
+  }
+  .mission-screen .mission-headline + .mission-paragraph {
+    margin-top: 14px;
+  }
+  .mission-screen .mission-paragraph + .mission-paragraph {
+    margin-top: 8px;
+  }
+  /* Makima — magenta rule */
+  .mission-screen.makima-screen .mission-headline,
+  .mission-screen.makima-screen .mission-paragraph {
+    border-left-color: var(--hz-mag);
+  }
+  /* Badge: align with the rule's left edge, sit above the headline.
+     JSX order is headline→badge→…; reorder visually with flex order. */
+  .mission-screen.makima-screen .makima-badge {
+    align-self: flex-start;
+    margin: 0 0 12px 18px;
+    order: -1;
+  }
+  .mission-screen.makima-screen .mission-headline { order: 0; }
+  .mission-screen.makima-screen .mission-paragraph { order: 1; }
+}
+
 .mission-paragraph {
   font-family: 'Inter', 'Noto Sans JP', system-ui, sans-serif;
   font-size: 14px;