Tighten mission/makima top space and use highlighted nav state

The CTA row is now a top navbar, so the old 'Close' label on the
active panel button is redundant — the button itself should look
like the current page. Two fixes here:

1. Replace 'Close' with a persistent active highlight.
   - LandingPage.tsx: button keeps its label ('Mission' / 'MAKIMA')
     and gains an is-active class + aria-current="page" when its
     panel is open. heisei.css renders the active state as a solid
     amber underline + amber text — same visual language as the
     hover indicator, just persistent.
   - The button still toggles the panel closed when clicked again,
     so the interaction is unchanged; only the labelling moved.

2. Remove the white-space band above mission content.
   - The legacy .modern-landing-page wrapper from pc98.css pinned
     itself at top: 120px and height: calc(100vh - 120px), matching
     the original 120px-tall floating header. The new header is
     72px (56px on mobile), which left ~50px of dead space below
     the navbar before the mission/makima content started.
   - Override the wrapper to top: 72px / height: calc(100vh - 72px)
     on desktop and 56px on mobile so it sits flush under the
     header.
   - Cover-content padding-top retuned for the new wrapper origin:
     desktop default 84px, mission-mode 72px (navbar 52 + 20 gap).
     Mobile default 76px, mission-mode 64px (navbar 48 + 16 gap).

Verified at 1280x720:
  navbar y=72-124 · mission headline starts y=144 · 20px gap ✓
  active Mission button: 'taisho-cta is-active', aria-current=page ✓

npm run build passes (CSS 92.6 kB / 18.1 kB gzip). Screenshots in
docs/heisei-screenshots/after-*.jpg refreshed against the tightened
layout.

2 files changed, 65 insertions, 18 deletions

diff --git a/frontend/src/components/LandingPage.tsx b/frontend/src/components/LandingPage.tsx
index f126d6f..931fe68 100644
--- a/frontend/src/components/LandingPage.tsx
+++ b/frontend/src/components/LandingPage.tsx
@@ -192,23 +192,31 @@ export function LandingPage({ onLogin }: LandingPageProps) {
               <div className="hero" />
             )}
 
-            {/* CTA row spanning full width: left Mission/MAKIMA, right Login */}
-            <div className="cta-area">
-              <div className="cta-left">
-                <button className="taisho-cta" onClick={handleMission}>
-                  <span className="cta-text">{activePanel === 'mission' ? 'Close' : 'Mission'}</span>
-                </button>
-                <button className="taisho-cta" onClick={handleMakimaPanel}>
-                  <span className="cta-text">{activePanel === 'makima' ? 'Close' : 'MAKIMA'}</span>
-                </button>
-              </div>
-              <div className="cta-right">
-                <button className="taisho-cta" onClick={handleLogin}>
-                  <span className="cta-icon">▶</span>
-                  <span className="cta-text">Login</span>
-                </button>
-              </div>
+          {/* CTA row spanning full width: left Mission/MAKIMA, right Login */}
+          <div className="cta-area">
+            <div className="cta-left">
+              <button
+                className={`taisho-cta${activePanel === 'mission' ? ' is-active' : ''}`}
+                aria-current={activePanel === 'mission' ? 'page' : undefined}
+                onClick={handleMission}
+              >
+                <span className="cta-text">Mission</span>
+              </button>
+              <button
+                className={`taisho-cta${activePanel === 'makima' ? ' is-active' : ''}`}
+                aria-current={activePanel === 'makima' ? 'page' : undefined}
+                onClick={handleMakimaPanel}
+              >
+                <span className="cta-text">MAKIMA</span>
+              </button>
             </div>
+            <div className="cta-right">
+              <button className="taisho-cta" onClick={handleLogin}>
+                <span className="cta-icon">▶</span>
+                <span className="cta-text">Login</span>
+              </button>
+            </div>
+          </div>
           </div>
         </div>
 
diff --git a/frontend/src/styles/heisei.css b/frontend/src/styles/heisei.css
index e12481d..356080e 100644
--- a/frontend/src/styles/heisei.css
+++ b/frontend/src/styles/heisei.css
@@ -34,6 +34,19 @@
 
 body { background: var(--hz-night); color: var(--hz-ink); }
 
+/* Reset the legacy 120px top offset (was matched to the old 120px header).
+   New header is 72px / 56px on mobile, so claim the full remaining viewport. */
+.modern-landing-page {
+  top: 72px !important;
+  height: calc(100vh - 72px) !important;
+}
+@media (max-width: 768px) {
+  .modern-landing-page {
+    top: 56px !important;
+    height: calc(100vh - 56px) !important;
+  }
+}
+
 .modern-landing-page.manga-style {
   background:
     /* horizon glow */
@@ -162,16 +175,27 @@ body { background: var(--hz-night); color: var(--hz-ink); }
   grid-template-rows: 1fr;          /* CTA is no longer in this grid */
   grid-template-areas: "masthead hero";
   gap: 40px;
-  padding: 156px 56px 64px;         /* 72 header + 52 nav + 32 breathing */
+  /* 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 */
+.modern-landing-page.manga-style .taisho-cover.mission-mode .cover-content {
+  padding: 72px 56px 48px;          /* 52 nav + 20 breathing */
+  gap: 32px;
 }
 
 @media (max-width: 1024px) {
   .modern-landing-page.manga-style .taisho-cover .cover-content {
     grid-template-columns: 1fr;
     grid-template-areas: "masthead" "hero";
-    padding: 140px 24px 48px;
+    padding: 76px 24px 40px;        /* 48 nav + 28 breathing */
     gap: 28px;
   }
+  .modern-landing-page.manga-style .taisho-cover.mission-mode .cover-content {
+    padding: 64px 20px 28px;        /* 48 nav + 16 breathing */
+    gap: 16px;
+  }
 }
 
 /* ----------------------------------------------------------------
@@ -449,6 +473,21 @@ body { background: var(--hz-night); color: var(--hz-ink); }
 }
 .taisho-cta:hover::before { left: 16px; right: 16px; }
 
+/* Active panel button — persistent highlight (replaces "Close" label) */
+.cta-left .taisho-cta.is-active,
+.cta-left .taisho-cta[aria-current="page"] {
+  color: var(--hz-amber);
+  opacity: 1;
+}
+.cta-left .taisho-cta.is-active::before,
+.cta-left .taisho-cta[aria-current="page"]::before {
+  left: 16px;
+  right: 16px;
+  height: 2px;
+  background: var(--hz-amber);
+  box-shadow: 0 0 12px rgba(232, 184, 122, 0.35);
+}
+
 /* Login keeps a primary-action treatment, but compact for the bar */
 .cta-right .taisho-cta {
   background: linear-gradient(180deg, rgba(232, 184, 122, 0.95) 0%, rgba(217, 106, 138, 0.85) 100%);