Merge remote-tracking branch 'origin/makima/soryu-co-soryu---soryu--polish--typography--motion-a8244f24' into makima/directive-soryu-co-soryu---soryu-227826d9-v1777591352makima/directive-soryu-co-soryu---soryu-227826d9-v1777591352

2 files changed, 154 insertions, 1 deletions

diff --git a/frontend/src/components/LandingPage.tsx b/frontend/src/components/LandingPage.tsx
index 5390ef7..b85f6bf 100644
--- a/frontend/src/components/LandingPage.tsx
+++ b/frontend/src/components/LandingPage.tsx
@@ -83,6 +83,9 @@ export function LandingPage({ onLogin }: LandingPageProps) {
 
   return (
     <div className={`soryu-home ${visibilityClass}`}>
+      <a href="#main" className="home-skip-link">
+        Skip to content
+      </a>
       <header
         className={`home-header ${visibilityClass}`}
         role="banner"
@@ -95,7 +98,7 @@ export function LandingPage({ onLogin }: LandingPageProps) {
           >
             <img
               src="/logo/crane-logo-transparent.png"
-              alt="Soryu crane mark"
+              alt="Soryu"
               width={36}
               height={36}
               className="home-header__brand-mark"
@@ -188,6 +191,8 @@ export function LandingPage({ onLogin }: LandingPageProps) {
                   src="/PC98Doukuusei.webp"
                   alt="PC-98 era interface composition referenced in soryu's visual language"
                   className="home-mission__media"
+                  width={3200}
+                  height={2000}
                   loading="lazy"
                   decoding="async"
                 />
@@ -211,6 +216,8 @@ export function LandingPage({ onLogin }: LandingPageProps) {
                 src="/logo/makima-logo.svg"
                 alt=""
                 aria-hidden="true"
+                width={28}
+                height={28}
                 className="home-makima__mark"
                 loading="lazy"
                 decoding="async"
@@ -333,6 +340,8 @@ export function LandingPage({ onLogin }: LandingPageProps) {
             src="/logo/crane-logo-transparent.png"
             alt=""
             aria-hidden="true"
+            width={24}
+            height={24}
             loading="lazy"
             decoding="async"
             onError={handleCraneFallback}
diff --git a/frontend/src/styles/pc98.css b/frontend/src/styles/pc98.css
index 34e029e..4d02ee0 100644
--- a/frontend/src/styles/pc98.css
+++ b/frontend/src/styles/pc98.css
@@ -5687,4 +5687,148 @@ button:focus-visible {
   }
 }
 
+/* ============================================================
+   STEP 4 — Polish pass (typography, motion, accessibility,
+   asset cleanup). No layout changes. Sits at the end of the
+   block so it overrides earlier home-* declarations where
+   needed, without touching the established structure.
+   ============================================================ */
+
+/* ----- Skip-to-content link --------------------------------- */
+/* Visually hidden until focused, then snaps into view at the
+   top-left.  Anchors to <main id="main">. */
+.home-skip-link {
+  position: absolute;
+  top: var(--home-sp-2);
+  left: var(--home-sp-2);
+  z-index: 100;
+  padding: var(--home-sp-2) var(--home-sp-4);
+  background: var(--home-accent);
+  color: #ffffff;
+  font-family: 'DotGothic16', 'MS Gothic', monospace;
+  font-size: var(--home-fs-mono);
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  text-decoration: none;
+  border: 2px solid var(--home-cyan);
+  transform: translateY(-200%);
+  transition: transform 160ms ease;
+}
+
+.home-skip-link:focus,
+.home-skip-link:focus-visible {
+  transform: translateY(0);
+  outline: 2px solid var(--home-cyan);
+  outline-offset: 2px;
+}
+
+/* ----- Visible focus rings on every interactive element ----- */
+/* Earlier rules used `outline: none` on a few hover/focus
+   states — re-introduce explicit, high-contrast focus-visible
+   rings so keyboard users always see where they are. These
+   rules sit after the originals so they win on cascade. */
+.home-header__brand:focus-visible,
+.home-header__nav a:focus-visible,
+.home-header__login:focus-visible,
+.home-contact__email:focus-visible,
+.home-footer__links a:focus-visible,
+.home-cta:focus-visible,
+.home-cta--ghost:focus-visible {
+  outline: 2px solid var(--home-cyan);
+  outline-offset: 2px;
+}
+
+/* ----- Nav-link underline grows from the left --------------- */
+/* Replaces the static border-bottom for a more deliberate
+   hover/focus reveal.  The crimson rule slides in from left:0
+   to width:100%. */
+.home-header__nav a {
+  position: relative;
+  border-bottom: none;
+  padding-bottom: 4px;
+}
+
+.home-header__nav a::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 0;
+  height: 1px;
+  background: var(--home-accent);
+  transition: width 200ms ease;
+}
+
+.home-header__nav a:hover::after,
+.home-header__nav a:focus-visible::after {
+  width: 100%;
+}
+
+/* ----- Mission image: constrain decode size ----------------- */
+/* The source webp is 3200x2000 (~1.4MB). We render it small
+   on the page; cap the rendered box and let the browser drop
+   the rest via object-fit: cover so it stops decoding the full
+   3200×2000 frame for a 280-wide thumbnail. */
+.home-mission__media {
+  max-height: 220px;
+  object-fit: cover;
+  object-position: center;
+  aspect-ratio: 16 / 10;
+}
+
+/* ----- Header brand link: visible focus surface ------------- */
+.home-header__brand {
+  border-radius: 2px;
+}
+
+/* ----- Typography hierarchy reinforcement ------------------- */
+/* The display/h1 gap is 72→44 (1.64×) which reads correctly,
+   but the `.home-section__title` inherited `letter-spacing:
+   normal` left h1 looking close to h2 (24px) on dense
+   screens.  A small negative tracking sharpens it without
+   changing size. */
+.home-section__title {
+  letter-spacing: -0.005em;
+}
+
+/* Tighten body line-height comment: hero subhead loosened to
+   1.6 reads easier on a wider measure (was 1.55). */
+.home-hero__subhead {
+  line-height: 1.6;
+}
+
+/* Mono captions: confirm +0.04em min tracking on card labels
+   so they don't visually merge with body copy at the same
+   x-height. */
+.home-card__eyebrow,
+.home-kpi__label {
+  letter-spacing: 0.18em;
+}
+
+/* ----- Reduced-motion: extend coverage ---------------------- */
+/* Disable the additional transitions/animations introduced by
+   step 3 + step 4 (fade-in opacity, header-fade, ghost CTA,
+   nav-link underline, footer/email anchor color, login button
+   chrome).  The earlier reduce block already covers
+   .home-rays-idle, .home-cta, .home-card, .home-panel. */
+@media (prefers-reduced-motion: reduce) {
+  .soryu-home,
+  .home-header,
+  .home-skip-link,
+  .home-cta--ghost,
+  .home-footer__links a,
+  .home-contact__email,
+  .home-header__login,
+  .home-header__nav a {
+    transition: none !important;
+  }
+  .home-header__nav a::after {
+    transition: none !important;
+  }
+  .home-cta--ghost:hover,
+  .home-cta--ghost:active {
+    transform: none;
+  }
+}
+
 /* === END SORYU HOME REDESIGN block ============================ */