/* ==========================================================
   KANAGAWA SPACE CAREER PROGRAM — Landing Page Styles
   LIGHT BLUE THEME — no black/near-black surfaces anywhere
   ========================================================== */
:root{
  /* color */
  --bg-page:#eef6fc;
  --bg-panel:#ffffff;
  --bg-panel-alt:#e4f1fb;
  --line:#d6e6f3;
  --line-soft:rgba(13,42,74,0.12);
  --text-primary:#0d2a4a;
  --text-secondary:#37516d;
  --text-tertiary:#3c5168;
  --accent-blue:#184e92;
  --accent-blue-hover:#164a8c;
  --accent-blue-deep:#0d3f74;
  --accent-blue-soft:rgba(28,90,168,0.10);
  --accent-sky:#3fb6d3;
  --accent-gold:#c98a2d;
  --accent-gold-deep:#69481a;
  --accent-gold-soft:rgba(201,138,45,0.14);
  --focus-ring:#0d2a4a;

  /* legacy aliases so both themes share the same HTML classes */
  --bg-void: var(--bg-page);
  --bg-light: var(--bg-page);
  --bg-light-panel: var(--bg-panel);
  --text-on-light: var(--text-primary);
  --text-on-light-secondary: var(--text-secondary);
  --text-muted-ondark: var(--text-tertiary);
  --accent-cyan: var(--accent-blue);
  --accent-gold: var(--accent-gold);

  /* type */
  --font-display: -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --font-label: -apple-system, "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --font-mono: "Yu Gothic", "Hiragino Sans", monospace;

  /* layout */
  --content-width: 1120px;
  --radius-sm: 6px;
  --radius-md: 12px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight:400;
  line-height:1.75;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3{
  font-family: var(--font-display);
  font-weight:900;
  line-height:1.35;
  margin:0 0 .6em;
  letter-spacing: .01em;
}

p{ margin:0 0 1em; }

a{ color:inherit; text-decoration:none; }

img,svg{ display:block; max-width:100%; }

:focus-visible{
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.skip-link{
  position:absolute;
  left:12px;
  top:-60px;
  z-index:1000;
  background: var(--accent-blue);
  color: #fff;
  padding:10px 18px;
  border-radius: var(--radius-sm);
  font-family: var(--font-label);
  font-weight:600;
  font-size:.85rem;
  transition: top .2s ease;
}
.skip-link:focus{ top:12px; }

.section-inner{
  width:100%;
  max-width: var(--content-width);
  margin:0 auto;
  padding: 0 24px;
}

.eyebrow{
  font-family: var(--font-label);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--accent-blue-deep);
  margin:0 0 1.1em;
  line-height:1.6;
}
.eyebrow--dark{ color: var(--accent-gold-deep); }

.section-title{ font-size: clamp(1.7rem, 3.2vw, 2.4rem); color: var(--text-primary); }
.section-title--light{ color: var(--text-primary); }
.section-sub{ color: var(--text-secondary); max-width: 640px; }

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding: 14px 26px;
  border-radius: var(--radius-sm);
  font-family: var(--font-label);
  font-weight:600;
  font-size:.92rem;
  letter-spacing:.02em;
  border:1px solid transparent;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
  cursor:pointer;
}
.btn[aria-disabled="true"]{
  cursor:not-allowed;
  color: var(--text-tertiary);
  border-color: var(--line);
  background: var(--bg-panel);
}
.btn[aria-disabled="true"]:hover{ transform:none; }
.btn--primary{
  background: var(--accent-blue);
  color: #fff;
}
.btn--primary:hover{ transform: translateY(-2px); background: var(--accent-blue-hover); }

.btn--ghost{
  background: var(--bg-panel);
  color: var(--text-primary);
  border-color: var(--line);
}
.btn--ghost:hover{ border-color: var(--accent-blue); color: var(--accent-blue); transform: translateY(-2px); }

.btn--outline{
  background: var(--bg-panel);
  color: var(--accent-gold-deep);
  border-color: rgba(138,95,34,.35);
  margin-top: .5em;
}
.btn--outline:hover{ background: #f7efe2; transform: translateY(-2px); }

.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin: 1.8em 0 1em; }

/* ============ HEADER ============ */
.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 100;
  background: var(--bg-page);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.site-header.is-scrolled{
  border-bottom-color: var(--line);
}
.header-inner{
  max-width: var(--content-width);
  margin:0 auto;
  padding: 14px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 24px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-logo{ height:30px; width:auto; flex-shrink:0; }
.brand-divider{ width:1px; height:26px; background: var(--line); flex-shrink:0; }
.brand-text{ display:flex; flex-direction:column; line-height:1.2; }
.brand-jp{ font-weight:700; font-size:.95rem; color: var(--text-primary); }
.brand-en{ font-family: var(--font-label); font-size:.6rem; letter-spacing:.1em; color: var(--text-tertiary); }

.main-nav{ display:flex; align-items:center; gap: 26px; font-size:.88rem; }
.main-nav a{ color: var(--text-secondary); transition: color .2s ease; white-space:nowrap; }
.main-nav a:hover{ color: var(--accent-blue); }

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:34px; height:34px;
  background:none; border:none;
  cursor:pointer;
}
.nav-toggle span{ display:block; height:2px; background: var(--text-primary); border-radius:2px; }

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height: 100vh;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  padding: 140px 24px 80px;
  max-width: var(--content-width);
  margin: 0 auto;
  gap: 56px;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background: linear-gradient(160deg, #dcefff 0%, #eef6fc 45%, #ffffff 85%);
}

/* -- hero space thumbnail -- */
.hero-thumb{
  flex: 0 0 auto;
  width: clamp(260px, 34vw, 440px);
  margin-left: auto;
}
.thumb-card{
  background: #fff;
  border-radius: 24px;
  padding: 22px;
  border: 1px solid var(--line);
  box-shadow: 0 24px 50px rgba(13,42,74,.14);
}
.thumb-img{
  width:100%;
  height:auto;
  display:block;
}

.hero-copy{ position:relative; z-index:2; max-width: 620px; flex: 1 1 380px; }
.hero-title{ font-size: 2.7rem; color: var(--text-primary); }
.hero-title span{ color: var(--accent-blue); }
.hero-lead{ color: var(--text-secondary); font-size:1.02rem; max-width: 560px; }
.hero-lead strong{ color: var(--text-primary); }
.hero-badges{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 1.4em 0 0;
  padding:0;
}
.hero-badges li{
  font-family: var(--font-label);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.02em;
  color: var(--accent-blue-deep);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 16px;
  box-shadow: 0 4px 14px rgba(13,42,74,.08);
}
.hero-note{ font-family: var(--font-mono); font-size:.78rem; color: var(--text-tertiary); margin-top: 1.4em; }

/* ============ SECTIONS ============ */
.section{ padding: 100px 0; }
.section--audience,
.section--operation{
  background: var(--bg-page);
  color: var(--text-primary);
}
.section--programs,
.section--why{
  background: var(--bg-panel-alt);
  color: var(--text-primary);
}
.section--why h2, .section--programs h2, .section--audience h2, .section--operation h2{
  color: var(--text-primary);
}
.section--why p, .section--operation p{ color: var(--text-secondary); }

.grid-2{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 60px; align-items:start; }

.why-stats{ display:flex; flex-direction:column; gap:18px; }
.stat-card{
  background: var(--bg-panel);
  border:1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  box-shadow: 0 6px 20px rgba(13,42,74,.06);
}
.stat-label{ margin:.3em 0 0; font-size:.85rem; color: var(--text-secondary); }
.stat-card--feature{
  background: var(--bg-panel);
  border-color: var(--line);
}
.stat-label--chart{
  font-weight:700;
  color: var(--text-primary);
  font-size:.9rem;
  margin-bottom: .8em;
}
.growth-chart{
  width:100%;
  padding-top: 2.2rem; /* room for value labels above the tallest bar */
}
.growth-bars{
  display:flex;
  align-items:flex-end;
  gap: 14px;
  height: 12.5rem;
  border-bottom: 1.5px solid var(--line);
  padding: 0 4px;
}
.growth-years{
  display:flex;
  gap: 14px;
  padding: 0 4px;
  margin-top: .6em;
}
.growth-bar-wrap{
  flex: 1 1 0;
  min-width: 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  height:100%;
}
.growth-bar-wrap--gap{ flex: 0 1 24px; }
.growth-bar{
  width:100%;
  max-width: 70px;
  border-radius: 4px 4px 0 0;
}
.growth-bar--actual{ background: var(--accent-blue); }
.growth-bar--forecast{ background: var(--accent-gold-deep); }
.growth-value{
  font-family: var(--font-label);
  font-size: .9375rem;
  font-weight:700;
  color: var(--text-primary);
  margin-bottom: .4em;
  white-space:nowrap;
}
.growth-year{
  flex: 1 1 0;
  min-width: 0;
  font-size:.8125rem;
  font-weight:500;
  color: var(--text-secondary);
  text-align:center;
}
.growth-year-wrap--gap{ flex: 0 1 24px; }
.growth-year-sub{
  display:block;
  font-size:.6875rem;
  color: var(--accent-gold-deep);
}
.growth-source{ margin: 1em 0 0; font-size:.72rem; color: var(--text-tertiary); }

/* ============ PROGRAM CARDS ============ */
.program-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 46px;
}
.program-card{
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 34px 32px;
  display:flex;
  flex-direction:column;
  box-shadow: 0 6px 20px rgba(13,42,74,.06);
}
.program-tag{
  font-family: var(--font-label);
  font-size:1.4rem;
  letter-spacing:.02em;
  color: var(--accent-gold-deep);
  margin:0 0 .3em;
}
.program-card h3{ font-size:1.4rem; color: var(--text-primary); }
.program-desc{ color: var(--text-secondary); }
.program-note{ font-size:.8rem; color: var(--text-tertiary); margin:-0.6em 0 1.2em; }
.program-schedule{
  list-style:none;
  margin: 1.3em 0;
  padding:0;
  border-top: 1px solid var(--line);
}
.program-schedule-item{
  display:flex;
  gap:14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.program-schedule-date{
  flex:0 0 auto;
  width:64px;
  font-family: var(--font-label);
  font-weight:700;
  font-size:.95rem;
  color: var(--accent-blue-deep);
  line-height:1.3;
}
.program-schedule-unit{ display:block; font-size:.68rem; font-weight:500; }
.program-schedule-body{ flex:1; min-width:0; }
.program-schedule-title{ font-weight:700; font-size:.88rem; color: var(--text-primary); margin:0 0 .25em; }
.program-schedule-text{ font-size:.82rem; color: var(--text-secondary); margin:0; }
.program-schedule-text + .program-schedule-text{ margin-top:.4em; }
.program-card .btn--outline{ align-self:flex-start; margin-top:auto; }

/* ============ AUDIENCE ============ */
.audience-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 46px;
}
.audience-card{
  background: var(--bg-panel);
  border:1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 28px 26px;
  box-shadow: 0 6px 20px rgba(13,42,74,.06);
}
.audience-kicker{
  font-family: var(--font-label);
  font-size:.68rem;
  letter-spacing:.12em;
  color: var(--text-tertiary);
  margin-bottom:.6em;
}
.audience-card h3{ font-size:1.1rem; color: var(--text-primary); }
.audience-card p{ color: var(--text-secondary); font-size:.92rem; margin:0; }
.audience-card--muted{
  background: var(--bg-panel);
  border-style: dashed;
  border-color: rgba(28,90,168,.4);
  box-shadow: none;
}

/* ============ OPERATION ============ */
.operation-text{
  margin-top: 24px;
  color: var(--text-secondary);
  font-size: .95rem;
  line-height: 1.9;
}

/* ============ FOOTER ============ */
.site-footer{
  background: var(--bg-panel-alt);
  padding: 50px 0 34px;
  border-top: 1px solid var(--line);
}
.footer-inner{ text-align:center; }
.footer-title{ font-family: var(--font-label); letter-spacing:.1em; font-size:.8rem; color: var(--accent-blue-deep); margin:0 0 .8em; }
.footer-text{ color: var(--text-secondary); font-size:.85rem; margin:0 0 1em; }
.footer-contact{ color: var(--text-secondary); font-size:.85rem; margin:0 0 1.2em; line-height:1.7; }
.footer-contact a{ color: var(--accent-blue); text-decoration:underline; }
.footer-policy-link{ margin:0 0 1.2em; }
.footer-policy-link a{ color: var(--text-secondary); font-size:.85rem; text-decoration:underline; }
.footer-policy-link a:hover{ color: var(--accent-blue); }
.footer-accessibility{
  max-width:520px;
  margin:0 auto 18px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.footer-accessibility-title{ font-size:.8rem; font-weight:700; color: var(--text-primary); margin:0 0 .5em; }
.footer-accessibility-text{ font-size:.78rem; color: var(--text-tertiary); margin:0; line-height:1.7; }
.footer-accessibility-text a{ color: var(--accent-blue); text-decoration:underline; }
.footer-copy{ color: var(--text-tertiary); font-size:.78rem; margin:0; }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px){
  .grid-2{ grid-template-columns: 1fr; }
  .program-grid{ grid-template-columns: 1fr; }
  .audience-grid{ grid-template-columns: 1fr; }
}

/* Side-by-side hero (photo + heading sharing a row) is only safe on
   genuinely wide screens. Below this, stack them so the heading always
   gets the full column width instead of a width that depends on how
   much room the photo happens to leave it — that dependency was the
   root cause of the mid-phrase wrap. Font sizes below are fixed
   (not fluid) and each is checked against the narrowest width in its
   own bucket, with a healthy safety margin, rather than a continuous
   vw formula that can be squeezed thinner than expected. */
@media (max-width: 1024px){
  .hero{ flex-direction:column; text-align:left; }
  .hero-thumb{ width: min(70%, 380px); margin: 0 auto 10px; }
  .hero-title{ font-size: 2.6rem; }
}

@media (max-width: 760px){
  .main-nav{
    position:absolute;
    top: 100%;
    left:0; right:0;
    background: var(--bg-page);
    flex-direction:column;
    align-items:flex-start;
    gap: 4px;
    padding: 18px 24px 24px;
    border-bottom: 1px solid var(--line);
    display:none;
  }
  .main-nav.is-open{ display:flex; }
  .main-nav a{ padding: 10px 0; width:100%; }
  .nav-toggle{ display:flex; }
  .hero{ padding-top: 120px; }
  .hero-thumb{ width: min(84%, 380px); margin: 0 auto 30px; }
  .hero-title{ font-size: 2rem; }
  .section{ padding: 70px 0; }
}

@media (max-width: 480px){
  .hero-actions{ flex-direction:column; align-items:flex-start; }
  .btn{ width:100%; }
  .brand-logo{ height:22px; }
  .brand-en{ display:none; }
  .hero-title{ font-size: 1.5rem; }
}

@media (max-width: 380px){
  .hero-title{ font-size: 1.2rem; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .btn, .main-nav a{ transition:none; }
}