From 27d8b9e2aa07bc38a134d0d3c9a6488ec423bfb1 Mon Sep 17 00:00:00 2001
From: soryu-co <bot@soryu.co>
Date: Wed, 6 May 2026 15:24:01 +0000
Subject: Remove vertical accent rule from Mission/MAKIMA text columns

The 2px amber/magenta border-left + 18px indent on the right-column
text was reading as another border running parallel to the SVG image
on the left. The animated SVG already supplies all the framing the
panels need, so the rule is now redundant noise.

Removed in three places:
- .mission-screen wrapper (base + .makima-screen variant)
- desktop (>=1025px) per-block rule on headline + paragraph
- mobile (<=768px) leftover padding-left: 14px on headline

Verified: borderLeft = 0 on wrapper, headline, and paragraph(s) on
both Mission and MAKIMA. Headline + body now sit flush with the badge
at the same column edge (x=680 at 1280px).
---
 frontend/src/styles/heisei.css | 28 +++++++++++-----------------
 1 file changed, 11 insertions(+), 17 deletions(-)

diff --git a/frontend/src/styles/heisei.css b/frontend/src/styles/heisei.css
index e90e492..3ccec4d 100644
--- a/frontend/src/styles/heisei.css
+++ b/frontend/src/styles/heisei.css
@@ -407,16 +407,15 @@ body { background: var(--hz-night); color: var(--hz-ink); }
    7. Mission / Makima screens — Heisei magazine column
    ---------------------------------------------------------------- */
 
-/* Move the accent rule + indent onto the wrapper so headline, image,
-   and body share one consistent column edge */
+/* No more wrapper-level accent rule — body text sits flat without a
+   coloured indent line (the SVG owns the only visible frame on the page) */
 .mission-screen {
   gap: 20px;
-  padding-left: 18px;
-  border-left: 2px solid var(--hz-amber);
+  padding-left: 0;
+  border-left: 0;
   max-width: 720px;
 }
 .mission-screen.makima-screen {
-  border-left-color: var(--hz-mag);
   gap: 14px;
 }
 
@@ -485,11 +484,12 @@ body { background: var(--hz-night); color: var(--hz-ink); }
     /* SVG owns its frame — keep only the soft drop-shadow for elevation */
     box-shadow: 0 24px 60px -24px rgba(8, 10, 24, 0.85);
   }
-  /* Right-column text: each block owns its own accent rule */
+  /* Right-column text: no accent rule — keep the layout clean.
+     The SVG image on the left supplies all the framing. */
   .mission-screen .mission-headline,
   .mission-screen .mission-paragraph {
-    padding-left: 18px;
-    border-left: 2px solid var(--hz-amber);
+    padding-left: 0;
+    border-left: 0;
     margin: 0;
   }
   .mission-screen .mission-headline + .mission-paragraph {
@@ -498,16 +498,10 @@ body { background: var(--hz-night); color: var(--hz-ink); }
   .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. */
+  /* Badge: align with the rest of the right-column flow (no indent). */
   .mission-screen.makima-screen .makima-badge {
     align-self: flex-start;
-    margin: 0 0 12px 18px;
+    margin: 0 0 12px 0;
     order: -1;
   }
   .mission-screen.makima-screen .mission-headline { order: 0; }
@@ -820,7 +814,7 @@ body { background: var(--hz-night); color: var(--hz-ink); }
   .modern-landing-page.manga-style .masthead-vertical .jp { font-size: 24px; }
   .modern-landing-page.manga-style .masthead-vertical .en { font-size: 8px; }
 
-  .mission-headline { font-size: 22px; padding-left: 14px; }
+  .mission-headline { font-size: 22px; padding-left: 0; }
   .mission-paragraph { font-size: 13px; }
 
   .modern-landing-page.manga-style .hero::after { font-size: 9px; letter-spacing: 0.2em; }
-- 
cgit v1.2.3