/* ===================================================================
   GAKU - public education site
   Light education hero, then a paper-and-navy education surface system.
   Brand colours: GAKU navy #3066ab, GAKU light blue #abd6f6, white.
   =================================================================== */
:root {
  /* Hero-only cinematic dark */
  --ink: #04050d;
  --ink-soft: #0b0d18;

  /* Public-site brand palette */
  --navy: #3066ab;
  --navy-deep: #234d85;
  --navy-ink: #0d1c3a;
  --sky: #abd6f6;
  --sky-soft: #d6ebfa;
  --paper: #ffffff;
  --paper-soft: #f4f7fc;

  /* Text on light surfaces */
  --text-ink: #0d1c3a;
  --text-body: #1f2c47;
  --text-muted: #4a5b7d;

  /* Lines/borders, light and dark contexts */
  --line-light: rgba(13, 28, 58, 0.12);
  --line-light-strong: rgba(13, 28, 58, 0.26);
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.26);

  /* Per-surface tokens. Sections override these for theme switches. */
  --surface-bg: var(--paper);
  --surface-fg: var(--text-ink);
  --surface-body: var(--text-body);
  --surface-muted: var(--text-muted);
  --surface-accent: var(--navy);
  --surface-line: var(--line-light);

  --type-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --type-body: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --type-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --pad-x: clamp(20px, 5vw, 96px);
  --max: 1320px;
  --t-fast: 220ms cubic-bezier(0.22, 1, 0.36, 1);
  --t-mid:  600ms cubic-bezier(0.22, 1, 0.36, 1);
  --t-slow: 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Section theme switches */
.theme-paper {
  --surface-bg: var(--paper);
  --surface-fg: var(--text-ink);
  --surface-body: var(--text-body);
  --surface-muted: var(--text-muted);
  --surface-accent: var(--navy);
  --surface-line: var(--line-light);
}
.theme-paper-soft {
  --surface-bg: var(--paper-soft);
  --surface-fg: var(--text-ink);
  --surface-body: var(--text-body);
  --surface-muted: var(--text-muted);
  --surface-accent: var(--navy);
  --surface-line: var(--line-light);
}
.theme-sky {
  --surface-bg: var(--sky);
  --surface-fg: var(--navy-ink);
  --surface-body: var(--navy-ink);
  --surface-muted: var(--navy-deep);
  --surface-accent: var(--navy);
  --surface-line: rgba(13, 28, 58, 0.18);
}
.theme-navy {
  --surface-bg: var(--navy);
  --surface-fg: #ffffff;
  --surface-body: rgba(255,255,255,0.92);
  --surface-muted: rgba(255,255,255,0.72);
  --surface-accent: var(--sky);
  --surface-line: rgba(255, 255, 255, 0.22);
}
.theme-ink {
  --surface-bg: var(--ink);
  --surface-fg: #ffffff;
  --surface-body: rgba(255,255,255,0.88);
  --surface-muted: rgba(255,255,255,0.62);
  --surface-accent: var(--sky);
  --surface-line: rgba(255, 255, 255, 0.12);
}

/* Region-specific CJK display + body stacks. Latin glyphs still resolve to
   Fraunces/Inter; CJK glyphs fall through to the matching Noto variant for
   the active language so JP, KR, and SC each render with native-correct forms
   instead of a Japanese-biased fallback. */
:lang(ja) {
  --type-display: "Fraunces", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "Iowan Old Style", Georgia, serif;
  --type-body: "Inter", "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
:lang(ko) {
  --type-display: "Fraunces", "Noto Serif KR", "AppleMyungjo", "Nanum Myeongjo", "Iowan Old Style", Georgia, serif;
  --type-body: "Inter", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
:lang(zh) {
  --type-display: "Fraunces", "Noto Serif SC", "Songti SC", "STSong", "Source Han Serif SC", "Iowan Old Style", Georgia, serif;
  --type-body: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--paper);
  color: var(--text-ink);
  font-family: var(--type-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  overflow-x: hidden;
}
main > section,
.federation-strip {
  scroll-margin-top: 96px;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
section:focus { outline: none; }
::selection { background: var(--navy); color: #fff; }

.skip-link {
  position: absolute; left: -9999px;
}
.skip-link:focus { left: 16px; top: 16px; background: #fff; color: var(--navy-ink); padding: 8px 12px; }

/* ============================================
   NAV
   Hero state: navy text on a light education-facing hero.
   Solid state: navy text on white once scrolled past hero.
   ============================================ */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(16px, 4vw, 48px);
  padding: 18px var(--pad-x);
  color: var(--navy-ink);
  border-bottom: 1px solid transparent;
  transition: background var(--t-mid), border-color var(--t-mid), color var(--t-mid), padding var(--t-mid);
}
.site-nav[data-state="solid"] {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line-light);
  color: var(--navy-ink);
  padding: 14px var(--pad-x);
}
.site-nav[data-state="hero"] {
  color: var(--navy-ink);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--type-mono);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.brand-mark {
  display: block;
  width: 46px;
  height: 28px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 8px 18px rgba(48, 102, 171, 0.16));
}
.brand-symbol {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 24px;
  color: currentColor;
  flex: 0 0 auto;
  transform: rotate(-22deg);
  filter: drop-shadow(0 8px 18px rgba(171, 214, 246, 0.18));
}
.brand-symbol i {
  position: absolute;
  display: block;
  background: currentColor;
  border-radius: 999px;
}
.brand-symbol i:nth-child(1) { width: 7px; height: 7px; left: 0; top: 13px; }
.brand-symbol i:nth-child(2) { width: 9px; height: 15px; left: 9px; top: 7px; }
.brand-symbol i:nth-child(3) { width: 10px; height: 20px; left: 21px; top: 2px; }
.brand-symbol i:nth-child(4) { width: 8px; height: 8px; right: -1px; top: 0; }
.site-nav nav {
  display: flex;
  justify-content: center;
  gap: clamp(14px, 2.5vw, 36px);
  font-family: var(--type-mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.site-nav nav a {
  position: relative;
  padding: 4px 0;
  color: rgba(13, 28, 58, 0.74);
  transition: color var(--t-fast);
}
.site-nav nav a:hover { color: var(--navy); }
.site-nav[data-state="solid"] nav a { color: rgba(13, 28, 58, 0.78); }
.site-nav[data-state="solid"] nav a:hover { color: var(--navy); }
.site-nav nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 -2px 0;
  height: 1px;
  background: var(--sky);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--t-fast), background var(--t-fast);
}
.site-nav[data-state="solid"] nav a::after { background: var(--navy); }
.site-nav nav a:hover::after { transform: scaleX(1); }
.nav-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.nav-cta {
  font-family: var(--type-mono);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid rgba(13, 28, 58, 0.24);
  padding: 9px 14px 8px;
  border-radius: 999px;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}
.nav-cta:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.site-nav[data-state="solid"] .nav-cta {
  border-color: var(--navy);
  color: var(--navy);
  background: transparent;
}
.site-nav[data-state="solid"] .nav-cta:hover {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

/* Language switcher
   Pairs flag + native label always (research: flags alone do not equal
   languages). Label stays visible on mobile so the cue is unambiguous. */
.lang-select {
  position: relative;
}
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--type-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy-ink);
  border: 1px solid rgba(13, 28, 58, 0.26);
  background: rgba(255, 255, 255, 0.62);
  padding: 8px 11px 7px;
  border-radius: 999px;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  cursor: pointer;
  min-height: 34px;
  white-space: nowrap;
}
.lang-toggle:hover,
.lang-toggle[aria-expanded="true"] {
  border-color: var(--navy);
  color: var(--navy);
  background: rgba(171, 214, 246, 0.34);
}
.site-nav[data-state="solid"] .lang-toggle {
  color: var(--navy-ink);
  border-color: rgba(13, 28, 58, 0.30);
  background: rgba(255, 255, 255, 0.0);
}
.site-nav[data-state="solid"] .lang-toggle:hover,
.site-nav[data-state="solid"] .lang-toggle[aria-expanded="true"] {
  border-color: var(--navy);
  color: var(--navy);
  background: rgba(48, 102, 171, 0.08);
}
.lang-flag {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lang-label {
  font-family: var(--type-body);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: none;
  font-weight: 500;
}
.lang-caret { opacity: 0.7; transition: transform var(--t-fast); }
.lang-toggle[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  list-style: none;
  margin: 0;
  padding: 6px;
  min-width: 172px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--line-light-strong);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(13, 28, 58, 0.22);
  display: grid;
  gap: 2px;
  z-index: 40;
  color: var(--navy-ink);
}
.lang-menu[hidden] { display: none; }
.lang-menu li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--type-body);
  font-size: 14px;
  color: var(--navy-ink);
  transition: background var(--t-fast), color var(--t-fast);
}
.lang-menu li:hover,
.lang-menu li:focus,
.lang-menu li[aria-selected="true"] {
  background: rgba(48, 102, 171, 0.10);
  color: var(--navy);
  outline: none;
}
@media (max-width: 900px) {
  .site-nav { grid-template-columns: auto auto; gap: 12px; padding: 14px 18px; }
  .site-nav nav { display: none; }
  .nav-actions { gap: 8px; }
}
@media (max-width: 540px) {
  .brand { gap: 7px; font-size: 10.5px; letter-spacing: 0.16em; }
  .brand-mark { width: 38px; height: 24px; }
  .nav-cta { padding: 7px 11px 6px; font-size: 10.5px; letter-spacing: 0.14em; }
  .lang-toggle { padding: 7px 9px 6px; gap: 6px; }
  .lang-label { font-size: 11px; }
  .lang-menu { right: 0; min-width: 156px; }
}
@media (max-width: 380px) {
  .site-nav { padding-inline: 14px; }
  .brand span { display: none; }
  .brand-mark { width: 34px; }
  .nav-actions { gap: 6px; }
  .nav-cta { padding: 6px 9px 5px; font-size: 10px; letter-spacing: 0.12em; }
  .lang-toggle { padding: 7px 8px 6px; }
}

/* ============================================
   HERO  Constellation
   ============================================ */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  background:
    radial-gradient(62% 62% at 74% 34%, rgba(171, 214, 246, 0.78) 0%, rgba(214, 235, 250, 0.44) 42%, transparent 72%),
    radial-gradient(52% 46% at 88% 10%, rgba(48, 102, 171, 0.14) 0%, transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #f6fbff 48%, #e9f5fd 100%);
}
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  opacity: 1;
  transition: opacity 240ms ease-out;
}
/* On the held Logo state the dust cloud fades out so the lockup reads clean.
   Quick fade-back-in when the user moves to Comet or Orbit. */
.hero[data-logo-resolved="true"] .hero-canvas {
  opacity: 0;
  transition: opacity 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-logo-resolve {
  position: absolute;
  left: var(--hero-logo-x, 70%);
  top: var(--hero-logo-y, 38%);
  width: var(--hero-logo-size, min(42vw, 460px));
  height: var(--hero-logo-size, min(42vw, 460px));
  z-index: 2;
  object-fit: contain;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.985);
  filter: drop-shadow(0 24px 60px rgba(48, 102, 171, 0.16));
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hero[data-logo-resolved="true"] .hero-logo-resolve {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Readability veil sits above the particle canvas, below the text.
   Carves a clean reading lane in the bottom-left for the headline while
   letting the resolved GAKU mark sit in the light-blue field. */
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(74% 70% at 0% 100%, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.88) 34%, rgba(255,255,255,0.34) 64%, transparent 84%),
    linear-gradient(90deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.30) 43%, transparent 78%);
}

.hero-eyebrow {
  position: absolute;
  top: clamp(78px, 12vh, 110px);
  left: var(--pad-x);
  margin: 0;
  font-family: var(--type-mono);
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(13,28,58,0.62);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  z-index: 4;
}
.hero-eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--navy);
  box-shadow: 0 0 0 4px rgba(48, 102, 171, 0.14);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(48, 102, 171, 0.24); }
  50%      { box-shadow: 0 0 0 10px rgba(48, 102, 171, 0); }
}

.hero-content {
  position: absolute;
  left: var(--pad-x);
  bottom: clamp(150px, 22vh, 220px);
  max-width: min(720px, 56vw);
  z-index: 4;
  pointer-events: none;
}

.hero-title {
  font-family: var(--type-display);
  font-weight: 350;
  font-size: clamp(56px, 11vw, 168px);
  font-variation-settings: "opsz" 144, "SOFT" 50;
  line-height: 0.92;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
  color: var(--navy-ink);
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(255,255,255,0.8);
}
:lang(ja) .hero-title,
:lang(ko) .hero-title,
:lang(zh) .hero-title {
  font-weight: 400;
  letter-spacing: -0.005em;
  font-size: clamp(44px, 8.5vw, 128px);
}
.hero-title em {
  font-style: italic;
  font-weight: 350;
  color: var(--navy);
}
.hero-title .line { display: block; }

.hero-sub {
  margin: 0;
  font-size: clamp(15px, 1.15vw, 19px);
  line-height: 1.55;
  max-width: 56ch;
  color: var(--text-body);
  text-shadow: 0 1px 16px rgba(255,255,255,0.78);
}

.hero-shape-label {
  position: absolute;
  right: var(--pad-x);
  bottom: clamp(176px, 25vh, 250px);
  z-index: 4;
  font-family: var(--type-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(13,28,58,0.58);
  display: grid;
  gap: 6px;
  text-align: right;
  border-right: 1px solid var(--sky);
  padding-right: 16px;
  min-width: 220px;
}
.hero-shape-num { color: var(--navy); }
.hero-shape-name { font-family: var(--type-display); font-style: italic; font-size: 16px; letter-spacing: -0.005em; color: var(--navy-ink); text-transform: none; }

.hero-controls {
  position: absolute;
  right: var(--pad-x);
  bottom: clamp(98px, 16vh, 140px);
  z-index: 4;
  display: flex;
  gap: 8px;
  pointer-events: auto;
}
.hero-shape {
  display: inline-grid;
  grid-template-rows: auto auto;
  gap: 1px;
  padding: 8px 12px;
  border: 1px solid rgba(13,28,58,0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--type-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(13,28,58,0.72);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.hero-shape:hover, .hero-shape[data-active="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.hero-shape span { font-size: 9px; color: var(--navy); }
.hero-shape[data-active="true"] span,
.hero-shape:hover span { color: #fff; }
.hero-shape b { font-size: 12.5px; font-weight: 500; letter-spacing: 0.18em; }

.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(36px, 6vh, 60px);
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--type-mono);
  font-size: 10.5px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(13,28,58,0.46);
  transition: opacity var(--t-mid), transform var(--t-mid);
}
.hero-scroll-cue[data-hidden="true"] {
  opacity: 0;
  transform: translateX(-50%) translateY(12px);
}
.hero-scroll-cue::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -22px;
  width: 1px;
  height: 18px;
  background: var(--navy);
  transform: translateX(-50%);
  animation: hero-cue-line 1.8s ease-in-out infinite;
}
.hero-scroll-line {
  display: inline-block;
  width: clamp(36px, 6vw, 56px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(48, 102, 171, 0.58), transparent);
}
@keyframes hero-cue-line {
  0%, 100% { transform: translateX(-50%) scaleY(0.4); opacity: 0.4; }
  50%      { transform: translateX(-50%) scaleY(1.1); opacity: 1; }
}

@media (max-width: 1100px) {
  .hero-content { max-width: min(560px, 60vw); }
}
@media (max-width: 920px), (max-height: 820px) {
  /* Mobile/tablet hero AND any short window (incl. short desktop, e.g.
     1366x768-class laptops): the headline + shape controls flow as a single
     bottom-anchored stack (position:relative flex items) so they keep a
     guaranteed gap and can never overlap the eyebrow/each other, regardless
     of viewport height or copy length (JA runs taller). The hero grows on
     short screens instead of colliding. The canvas is sized to the viewport
     (100svh) to match the WebGL render (fitHero uses window.innerHeight), so
     the globe is round — no more 52%-height squish. */
  .hero {
    height: auto;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* reserve space for the absolute eyebrow at the top so tall copy (JA) that
       fills/grows the hero starts below it instead of colliding */
    padding-top: clamp(108px, 14vh, 150px);
    padding-bottom: clamp(72px, 11vh, 104px);
  }
  .hero-canvas {
    height: 100svh;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 44%, transparent 66%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 44%, transparent 66%);
  }
  .hero-logo-resolve {
    left: 50%;
    top: 28%;
    width: min(74vw, 330px);
    height: min(74vw, 330px);
  }
  .hero-veil {
    background:
      radial-gradient(120% 56% at 50% 100%, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.88) 34%, rgba(255,255,255,0.32) 68%, transparent 84%),
      linear-gradient(180deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.08) 32%, rgba(255,255,255,0.9) 57%, rgba(255,255,255,0.98) 100%);
  }
  .hero-eyebrow { top: 80px; font-size: 10.5px; }
  .hero-content {
    position: relative;
    inset: auto;
    margin: 0 22px;
    max-width: 620px;
  }
  .hero-title { font-size: clamp(44px, 10vw, 92px); }
  .hero-sub { font-size: 14.5px; max-width: 42ch; }
  .hero-shape-label { display: none; }
  .hero-controls {
    position: relative;
    inset: auto;
    margin: 22px 22px 0;
    flex-wrap: wrap;
  }
  .hero-shape { padding: 7px 10px; }
  .hero-shape b { font-size: 11px; }
  .hero-scroll-cue { font-size: 9.5px; letter-spacing: 0.28em; gap: 10px; bottom: 22px; }
  .hero-scroll-line { width: 24px; }
}
@media (max-width: 380px) {
  .hero-title { font-size: clamp(40px, 11vw, 60px); }
  .hero-scroll-cue { bottom: 18px; }
}

/* ============================================
   SHARED kickers
   The numbered badge always uses --surface-accent (navy on light surfaces,
   sky on dark surfaces). The label uses --surface-muted so the eye lands
   on the badge first.
   ============================================ */
.kicker {
  font-family: var(--type-mono);
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--surface-muted);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.kicker > span:first-child {
  display: inline-block;
  border: 1.4px solid var(--surface-accent);
  color: var(--surface-accent);
  border-radius: 999px;
  padding: 4px 9px 3px;
  font-size: 10.5px;
  font-weight: 500;
}
.kicker--accent { color: var(--surface-accent); }
.kicker--accent > span:first-child { color: var(--surface-accent); }

/* ============================================
   MISSION  (paper surface)
   ============================================ */
.block {
  position: relative;
  padding: clamp(96px, 14vh, 180px) var(--pad-x);
  overflow: hidden;
  background: var(--surface-bg);
  color: var(--surface-fg);
}
.block-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(54% 48% at 84% 18%, rgba(48, 102, 171, 0.07), transparent 72%),
    radial-gradient(46% 52% at 8% 82%, rgba(171, 214, 246, 0.18), transparent 70%);
  pointer-events: none;
}
.block-grid {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "kicker kicker"
    "title  title"
    "body   meta";
  gap: 40px clamp(40px, 6vw, 96px);
}
.block-grid > .kicker { grid-area: kicker; }
.block-title {
  grid-area: title;
  margin: 0;
  font-family: var(--type-display);
  font-weight: 360;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-size: clamp(36px, 5.4vw, 88px);
  line-height: 1.0;
  letter-spacing: -0.022em;
  text-wrap: balance;
  max-width: 22ch;
  color: var(--surface-fg);
}
.block-title em { font-style: italic; color: var(--surface-accent); }
.block-body {
  grid-area: body;
  font-size: clamp(15.5px, 1.1vw, 18.5px);
  line-height: 1.65;
  color: var(--surface-body);
  max-width: 56ch;
}
.block-body p + p { margin-top: 1.1em; }
.block-meta {
  grid-area: meta;
  border-left: 1px solid var(--surface-line);
  padding-left: clamp(20px, 2.4vw, 36px);
  display: grid;
  gap: 14px;
  align-content: start;
  font-family: var(--type-mono);
  font-size: 12px;
  color: var(--surface-body);
}
.meta-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  margin: 0;
  align-items: baseline;
}
.meta-row > span:first-child {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--surface-muted);
  font-size: 10.5px;
}
.meta-row .meta-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--surface-accent);
  font-weight: 500;
}
.meta-row .meta-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--surface-accent);
  box-shadow: 0 0 0 3px rgba(48, 102, 171, 0.18);
  animation: pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@media (max-width: 860px) {
  .block-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "kicker" "title" "body" "meta";
    gap: 28px;
  }
  .block-meta {
    border-left: 0;
    border-top: 1px solid var(--surface-line);
    padding-left: 0;
    padding-top: 24px;
  }
  .meta-row { grid-template-columns: 120px 1fr; }
}

/* ============================================
   PROGRAMMES  (paper-soft surface)
   ============================================ */
.programmes {
  padding: clamp(96px, 12vh, 160px) var(--pad-x);
  background: var(--surface-bg);
  color: var(--surface-fg);
  display: grid;
  gap: clamp(88px, 12vh, 140px);
}
.programmes-head {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  gap: 24px;
}
.programmes-title {
  margin: 0;
  font-family: var(--type-display);
  font-weight: 360;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-size: clamp(34px, 5.2vw, 80px);
  line-height: 1.0;
  letter-spacing: -0.022em;
  max-width: 22ch;
  color: var(--surface-fg);
}
.programmes-title em { font-style: italic; color: var(--surface-accent); }
.programmes-lede {
  max-width: 58ch;
  color: var(--surface-body);
  font-size: clamp(15.5px, 1.05vw, 18px);
  line-height: 1.6;
  margin: 0;
}

.programme {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.programme--reverse .programme-figure { order: 2; }
.programme-frame {
  display: grid;
  gap: 22px;
  align-content: center;
}
.programme-num {
  font-family: var(--type-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--surface-accent);
  margin: 0;
  font-weight: 500;
}
.programme-title {
  margin: 0;
  font-family: var(--type-display);
  font-weight: 380;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-size: clamp(32px, 4.4vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--surface-fg);
}
.programme-tag {
  margin: 0;
  font-family: var(--type-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(19px, 1.7vw, 26px);
  color: var(--surface-accent);
  letter-spacing: -0.005em;
}
.programme-body {
  font-size: clamp(15px, 1.0vw, 17px);
  line-height: 1.65;
  color: var(--surface-body);
  max-width: 56ch;
}
.programme-spec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
  margin: 8px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--surface-line);
  font-family: var(--type-mono);
  font-size: 12px;
  color: var(--surface-body);
}
.programme-spec div { display: grid; gap: 4px; }
.programme-spec dt {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--surface-muted);
  font-size: 10.5px;
}
.programme-spec dd { margin: 0; }

.programme-figure {
  position: relative;
  margin: 0;
}
.programme-figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 4px;
  filter: contrast(1.02) saturate(1.04);
  box-shadow: 0 24px 60px rgba(13, 28, 58, 0.12);
}
.programme-figure figcaption {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--type-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--surface-muted);
}
.programme-figure figcaption .rule {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: currentColor;
}

@media (max-width: 860px) {
  .programme { grid-template-columns: 1fr; gap: 24px; }
  .programme--reverse .programme-figure { order: 0; }
  .programme-figure img { aspect-ratio: 4 / 3; }
  .programme-spec { grid-template-columns: 1fr 1fr; }
}

/* ============================================
   WHERE  (navy band, white text)
   ============================================ */
.where {
  position: relative;
  padding: clamp(96px, 14vh, 180px) var(--pad-x);
  background: var(--surface-bg);
  color: var(--surface-fg);
  overflow: hidden;
}
.where-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.82;
}
.where-head, .where-list {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
}
.where-head { display: grid; gap: 24px; margin-bottom: clamp(56px, 8vh, 84px); }
.where-title {
  margin: 0;
  font-family: var(--type-display);
  font-weight: 360;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-size: clamp(36px, 5.4vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.022em;
  text-wrap: balance;
  max-width: 22ch;
  color: var(--surface-fg);
}
.where-title em { font-style: italic; color: var(--surface-accent); }
.where-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: clamp(28px, 4vw, 48px);
}
.where-list li {
  display: grid;
  grid-template-columns: minmax(160px, 0.8fr) minmax(220px, 1.4fr) 1.6fr;
  gap: clamp(20px, 3vw, 48px);
  padding: 26px 0;
  border-top: 1px solid var(--surface-line);
  align-items: start;
}
.where-list li:last-child { border-bottom: 1px solid var(--surface-line); }
.where-meta {
  display: grid;
  gap: 4px;
  margin: 0;
  font-family: var(--type-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--surface-muted);
}
.where-meta > span:first-child { color: var(--surface-accent); font-weight: 500; }
.where-name {
  margin: 0;
  font-family: var(--type-display);
  font-weight: 380;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.0;
  letter-spacing: -0.018em;
  text-wrap: balance;
  color: var(--surface-fg);
}
.where-body {
  margin: 0;
  font-size: clamp(14px, 1vw, 16px);
  color: var(--surface-body);
  line-height: 1.6;
}
.where-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
  grid-column: 3 / 4;
}
.where-tags span {
  font-family: var(--type-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--surface-body);
  border: 1px solid var(--surface-line);
  border-radius: 999px;
  padding: 4px 10px 3px;
}
@media (max-width: 860px) {
  .where-list li { grid-template-columns: 1fr; gap: 8px; }
  .where-tags { grid-column: auto; }
}

/* ============================================
   PROOF (recent programme work, paper surface)
   ============================================ */
.proof {
  padding: clamp(96px, 14vh, 180px) var(--pad-x);
  background: var(--surface-bg);
  color: var(--surface-fg);
}
.proof-head {
  max-width: var(--max);
  margin: 0 auto clamp(56px, 8vh, 96px);
  display: grid;
  gap: 24px;
}
.proof-title {
  margin: 0;
  font-family: var(--type-display);
  font-weight: 380;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  font-size: clamp(34px, 5vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.018em;
  text-wrap: balance;
  max-width: 22ch;
  color: var(--surface-fg);
}
.proof-title em {
  font-style: normal;
  color: var(--surface-accent);
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.proof-lede {
  margin: 0;
  max-width: 56ch;
  color: var(--surface-muted);
  font-size: 14.5px;
  line-height: 1.6;
}
.proof-filters {
  max-width: var(--max);
  margin: 0 auto clamp(28px, 4vh, 44px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.proof-filter {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 12px 6px;
  border: 1px solid var(--surface-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper-soft) 70%, transparent);
  color: var(--surface-muted);
  font-family: var(--type-mono);
  font-size: 10.5px;
  font-weight: 520;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.proof-filter:hover,
.proof-filter[aria-pressed="true"] {
  border-color: var(--surface-accent);
  background: color-mix(in srgb, var(--surface-accent) 10%, var(--paper-soft));
  color: var(--surface-accent);
}
.proof-showcase {
  max-width: var(--max);
  margin: 0 auto clamp(36px, 5vh, 64px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3.5vw, 48px);
}
.proof-grid,
.proof-paired-grid {
  max-width: var(--max);
  margin: 0 auto clamp(36px, 5vh, 64px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3.5vw, 48px);
}
.proof-filtered-grid {
  max-width: var(--max);
  margin: 0 auto clamp(36px, 5vh, 64px);
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 2.4vw, 36px);
}
.proof[data-proof-filtered="true"] .proof-filtered-grid {
  display: grid;
}
.proof[data-proof-filtered="true"] .proof-showcase,
.proof[data-proof-filtered="true"] .proof-grid,
.proof[data-proof-filtered="true"] .proof-paired-grid {
  display: none;
}
.proof-filtered-grid .card {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--surface-line);
}
.proof-filtered-grid .card-fig {
  aspect-ratio: 16 / 10;
}
.proof-filtered-grid .card-title {
  font-size: clamp(24px, 2.2vw, 34px);
  max-width: 14ch;
}
.proof-filtered-grid .card-body {
  max-width: 42ch;
}
.proof-filtered-grid .card--proof-wide {
  grid-column: auto;
  width: 100%;
}
@media (max-width: 1040px)  { .proof-filtered-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .proof-showcase, .proof-grid, .proof-paired-grid, .proof-filtered-grid { grid-template-columns: 1fr; } }
.card {
  display: grid;
  gap: 14px;
  align-content: start;
  transition: transform var(--t-fast);
}
.card:hover { transform: translateY(-3px); }
.card[data-proof-hidden="true"],
.proof-row[data-proof-hidden="true"] {
  display: none;
}
.proof-showcase[data-proof-group-hidden="true"],
.proof-grid[data-proof-group-hidden="true"],
.proof-paired-grid[data-proof-group-hidden="true"] {
  display: none;
}
.card-fig {
  margin: 0;
  overflow: hidden;
  background: var(--paper-soft);
  aspect-ratio: 4 / 3;
  border: 1px solid var(--surface-line);
  border-radius: 4px;
}
.card-fig img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-mid);
  filter: saturate(1.05);
}
.card-fig--contain {
  padding: clamp(16px, 2.4vw, 32px);
  background:
    radial-gradient(circle at 20% 18%, rgba(171, 214, 246, 0.28), transparent 42%),
    linear-gradient(180deg, #ffffff, var(--paper-soft));
}
.card-fig--contain img {
  object-fit: contain;
  transform: none !important;
}
.card-fig--logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 2.4vw, 32px);
  background: #fff;
}
.card-fig--logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none !important;
  filter: saturate(1.02) contrast(1.01);
}
.card-fig--ernc {
  background:
    linear-gradient(180deg, #ffffff, #ffffff),
    var(--paper-soft);
}
.card:hover .card-fig img { transform: scale(1.04); }
.card--anchor {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--surface-line);
}
.card--anchor .card-fig,
.proof-grid .card-fig {
  aspect-ratio: 16 / 10;
}
.card--anchor .card-title,
.proof-grid .card-title {
  font-size: clamp(28px, 3vw, 44px);
  max-width: 13ch;
}
.card--anchor .card-body,
.proof-grid .card-body {
  max-width: 46ch;
  font-size: clamp(15px, 1.15vw, 17px);
}
.proof-grid .card {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--surface-line);
}
.card--proof-large {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--surface-line);
}
.card--proof-large .card-fig {
  aspect-ratio: 16 / 10;
}
.card--proof-large .card-title {
  font-size: clamp(28px, 3vw, 44px);
  max-width: 13ch;
}
.card--proof-large .card-body {
  max-width: 46ch;
  font-size: clamp(15px, 1.15vw, 17px);
}
.card--proof-wide {
  grid-column: 1 / -1;
  width: min(100%, 760px);
}
.card--proof-wide .card-title {
  max-width: 16ch;
}
.proof-filtered-grid .card.card--anchor .card-title,
.proof-filtered-grid .card.card--proof-large .card-title,
.proof-filtered-grid .card .card-title {
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.12;
  max-width: 14ch;
}
.proof-filtered-grid .card.card--anchor .card-body,
.proof-filtered-grid .card.card--proof-large .card-body,
.proof-filtered-grid .card .card-body {
  font-size: clamp(15px, 1.15vw, 17px);
  max-width: 42ch;
}
.card-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--type-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--surface-accent);
  margin: 6px 0 0;
  font-weight: 500;
}
.card-meta .card-meta-loc {
  color: var(--surface-accent);
}
.card-meta .card-meta-kind {
  position: relative;
  padding-left: 14px;
  color: var(--surface-muted);
  font-weight: 400;
  letter-spacing: 0.18em;
}
.card-meta .card-meta-kind::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  transform: translateY(-50%);
}
.card-title {
  margin: 0;
  font-family: var(--type-display);
  font-weight: 420;
  font-variation-settings: "opsz" 36, "SOFT" 20;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--surface-fg);
}
.card-body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--surface-body);
  max-width: 36ch;
}
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 0;
}
.card-tags span {
  font-family: var(--type-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 4px 9px 3px;
  border: 1px solid var(--surface-line);
  border-radius: 999px;
  color: var(--surface-muted);
}
.card-actions {
  margin: 2px 0 0;
}
.card-link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px 6px;
  border: 1px solid color-mix(in srgb, var(--surface-accent) 52%, transparent);
  border-radius: 999px;
  color: var(--surface-accent);
  font-family: var(--type-mono);
  font-size: 10.5px;
  font-weight: 560;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.card-link:hover {
  background: color-mix(in srgb, var(--surface-accent) 10%, transparent);
  border-color: var(--surface-accent);
  color: var(--navy-deep);
}
.card--feature {
  grid-column: 1 / -1;
  grid-template-columns: minmax(280px, 0.74fr) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(72px, 7vw, 150px);
  row-gap: clamp(24px, 4vw, 56px);
  padding-top: clamp(12px, 2vw, 22px);
  border-top: 1px solid var(--surface-line);
  border-bottom: 1px solid var(--surface-line);
  padding-bottom: clamp(20px, 3vw, 34px);
}
.card--feature .card-fig {
  width: 100%;
  min-width: 0;
  min-height: clamp(260px, 34vw, 440px);
}
.card--feature .card-copy {
  display: grid;
  align-content: center;
  gap: 14px;
  padding-left: 0;
}
.card--feature .card-title {
  font-size: clamp(28px, 4vw, 56px);
  max-width: 11ch;
}
.card--feature .card-body {
  max-width: 48ch;
  font-size: clamp(15px, 1.2vw, 18px);
}
.proof-feature-row {
  max-width: var(--max);
  margin: 0 auto clamp(36px, 5vh, 64px);
}
.proof-index {
  max-width: var(--max);
  margin: 0 auto;
  border-top: 1px solid var(--surface-line);
}
.proof-row {
  display: grid;
  grid-template-columns: 72px minmax(112px, 0.2fr) minmax(190px, 0.28fr) minmax(0, 1fr);
  gap: 18px clamp(18px, 3vw, 42px);
  align-items: center;
  min-height: 106px;
  padding: 22px 0;
  border-bottom: 1px solid var(--surface-line);
}
.proof-row-thumb {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 18px 42px rgba(48, 102, 171, 0.16);
  font-family: var(--type-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
}
.proof-row-thumb--photo {
  overflow: hidden;
  background: var(--paper-soft);
  border: 1px solid var(--surface-line);
  box-shadow: 0 18px 42px rgba(48, 102, 171, 0.14);
}
.proof-row-thumb--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.04) contrast(0.98);
}
.proof-row-region {
  font-family: var(--type-mono);
  font-size: 11px;
  font-weight: 560;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--surface-accent);
}
.proof-row h3 {
  margin: 0;
  font-family: var(--type-display);
  font-weight: 420;
  font-size: clamp(19px, 1.8vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--surface-fg);
}
.proof-row p {
  margin: 0;
  color: var(--surface-body);
  line-height: 1.55;
  font-size: 14.5px;
}
.proof-inline-tags {
  grid-column: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: -6px !important;
}
.proof-inline-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px 2px;
  border: 1px solid var(--surface-line);
  border-radius: 999px;
  color: var(--surface-muted);
  font-family: var(--type-mono);
  font-size: 9.5px;
  font-weight: 540;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.federation-strip {
  max-width: var(--max);
  margin: clamp(48px, 7vh, 88px) auto 0;
  padding-top: clamp(28px, 4vh, 48px);
  border-top: 1px solid var(--surface-line);
  display: grid;
  grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.federation-copy {
  display: grid;
  gap: 16px;
}
.federation-copy .kicker {
  margin: 0;
}
.federation-copy h3 {
  margin: 0;
  font-family: var(--type-display);
  font-size: clamp(26px, 3vw, 44px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--surface-fg);
  max-width: 14ch;
}
.federation-copy p:not(.kicker) {
  margin: 0;
  color: var(--surface-body);
  max-width: 44ch;
  font-size: 14.5px;
  line-height: 1.62;
}
.federation-logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.federation-logos li {
  min-height: 168px;
  padding: 18px 16px;
  border: 1px solid var(--surface-line);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(244, 247, 252, 0.72)),
    radial-gradient(circle at 50% 0%, rgba(171, 214, 246, 0.30), transparent 58%);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
  text-align: center;
  color: var(--surface-muted);
  font-family: var(--type-mono);
  font-size: 10px;
  line-height: 1.45;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  overflow: hidden;
}
.fed-logo-img {
  display: block;
  width: min(100%, 160px);
  max-height: 74px;
  object-fit: contain;
  filter: saturate(1.02) contrast(1.02);
}
.federation-logos li:nth-child(3) .fed-logo-img {
  width: min(100%, 172px);
  max-height: 68px;
}
.federation-logos li:nth-child(5) .fed-logo-img {
  width: min(100%, 176px);
  max-height: 76px;
}
.federation-logos li.fed-more {
  grid-column: 1 / -1;
  min-height: 96px;
  gap: 0;
  font-size: 12.5px;
  letter-spacing: 0.22em;
  color: var(--surface-muted);
}
.fed-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 154px);
  min-height: 52px;
  color: var(--navy);
  font-family: var(--type-body);
  font-weight: 720;
  font-size: clamp(20px, 2vw, 30px);
  letter-spacing: -0.015em;
  text-transform: none;
  line-height: 1;
}
.fed-logo--jesu { font-style: italic; letter-spacing: 0.015em; }
.fed-logo--kespa { letter-spacing: -0.04em; }
.fed-logo--sef,
.fed-logo--nef {
  border: 1px solid rgba(48, 102, 171, 0.30);
  border-radius: 999px;
  font-family: var(--type-mono);
  font-size: clamp(16px, 1.5vw, 22px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.proof-note {
  max-width: var(--max);
  margin: clamp(32px, 5vw, 68px) auto 0;
  padding: clamp(18px, 2.4vw, 28px) 0 0;
  border-top: 1px solid var(--surface-line);
  display: grid;
  grid-template-columns: minmax(180px, 0.28fr) minmax(0, 1fr);
  gap: 16px clamp(24px, 4vw, 56px);
  color: var(--surface-body);
}
.proof-note span {
  font-family: var(--type-mono);
  font-size: 11px;
  font-weight: 560;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--surface-accent);
}
.proof-note p {
  margin: 0;
  max-width: 72ch;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.65;
}
@media (max-width: 760px) {
  .card--feature {
    grid-template-columns: 1fr;
  }
  .card--feature .card-copy {
    padding-left: 0;
  }
  .card--feature .card-fig {
    min-height: 0;
  }
  .card--feature .card-title {
    max-width: 100%;
  }
  .proof-note {
    grid-template-columns: 1fr;
  }
  .proof-row {
    grid-template-columns: 58px 1fr;
  }
  .federation-strip {
    grid-template-columns: 1fr;
  }
  .federation-copy h3 {
    max-width: 22ch;
  }
  .federation-logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .card--proof-wide {
    width: 100%;
  }
  .proof-row-region,
  .proof-row p {
    grid-column: 2;
  }
  .proof-inline-tags {
    grid-column: 2;
    margin-top: 0 !important;
  }
}
@media (max-width: 520px) {
  .card-meta {
    display: grid;
    gap: 7px;
    font-size: 10px;
    letter-spacing: 0.17em;
  }
  .card-meta .card-meta-kind {
    padding-left: 0;
    letter-spacing: 0.14em;
  }
  .card-meta .card-meta-kind::before {
    display: none;
  }
  .proof-filters {
    gap: 8px;
  }
  .proof-filter {
    font-size: 9px;
    letter-spacing: 0.13em;
    padding-inline: 10px;
  }
  .federation-logos {
    grid-template-columns: 1fr;
  }
  .federation-logos li {
    min-height: 112px;
  }
}

/* ============================================
   TEAM  (paper-soft surface)
   ============================================ */
.team {
  padding: clamp(96px, 14vh, 180px) var(--pad-x);
  background: var(--surface-bg);
  color: var(--surface-fg);
  border-top: 1px solid var(--surface-line);
}
.team-head {
  max-width: var(--max);
  margin: 0 auto clamp(48px, 7vh, 84px);
  display: grid;
  gap: 24px;
}
.team-title {
  margin: 0;
  font-family: var(--type-display);
  font-weight: 380;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-size: clamp(28px, 4vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 26ch;
  color: var(--surface-fg);
}
.team-title em { font-style: italic; color: var(--surface-accent); }
.team-list {
  max-width: var(--max);
  margin: 0 auto;
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--surface-line);
}
.team-list li {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) 2fr minmax(180px, 0.8fr);
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--surface-line);
  align-items: baseline;
}
.team-name {
  font-family: var(--type-display);
  font-weight: 400;
  font-size: clamp(22px, 2.3vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--surface-fg);
}
.team-role {
  color: var(--surface-body);
  font-size: 15px;
  line-height: 1.55;
}
.team-loc {
  font-family: var(--type-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--surface-muted);
  text-align: right;
}
@media (max-width: 760px) {
  .team-list li { grid-template-columns: 1fr; gap: 8px; }
  .team-loc { text-align: left; }
}

/* ============================================
   CONTACT  (navy band, end-of-page)
   ============================================ */
.contact {
  position: relative;
  padding: clamp(96px, 16vh, 200px) var(--pad-x);
  background: var(--surface-bg);
  color: var(--surface-fg);
  overflow: hidden;
}
.contact-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.38;
}
.contact > .kicker, .contact-title, .contact-grid { position: relative; z-index: 1; }

.contact-title {
  margin: 24px 0 64px;
  font-family: var(--type-display);
  font-weight: 360;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-size: clamp(34px, 5vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  text-wrap: balance;
  max-width: 22ch;
  color: var(--surface-fg);
}
.contact-title em { font-style: italic; color: var(--surface-accent); }
html[lang="ja"] .contact-title em { font-style: normal; }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2vw, 36px);
  border-top: 1px solid var(--surface-line);
}
.contact-link {
  display: grid;
  gap: 14px;
  padding: 28px 0 18px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.contact-link:hover {
  border-bottom-color: var(--surface-accent);
  transform: translateY(-2px);
}
.contact-link-label {
  font-family: var(--type-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--surface-muted);
}
.contact-link-target {
  font-family: var(--type-display);
  font-weight: 400;
  font-size: clamp(20px, 1.7vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--surface-fg);
  word-break: break-word;
}
@media (max-width: 760px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* ============================================
   FOOTER  (navy)
   ============================================ */
.site-foot {
  padding: 36px var(--pad-x) 40px;
  background: var(--surface-bg);
  color: var(--surface-fg);
  font-family: var(--type-mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.foot-row {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
}
.foot-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--surface-fg);
}
.foot-brand .brand-mark {
  width: 46px;
  height: 28px;
  filter: drop-shadow(0 8px 18px rgba(171, 214, 246, 0.18));
}
.foot-locs {
  display: flex;
  gap: 22px;
  margin: 0;
  justify-self: center;
  color: var(--surface-muted);
}
.foot-locs span:not(:last-child)::after {
  content: "·";
  margin-left: 22px;
  color: var(--surface-line);
}
.foot-line {
  display: grid;
  gap: 4px;
  margin: 0;
  text-align: right;
  color: var(--surface-body);
}
.foot-line span:last-child {
  color: var(--surface-muted);
  text-transform: none;
  letter-spacing: 0.04em;
  font-family: var(--type-body);
  font-size: 12px;
}

.foot-thin {
  max-width: var(--max);
  margin: 28px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--surface-line);
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  color: var(--surface-muted);
  font-size: 10.5px;
  letter-spacing: 0.18em;
}
.foot-thin a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.34em;
  transition: color var(--t-fast);
}
.foot-thin a:hover {
  color: var(--surface-fg);
}
@media (max-width: 760px) {
  .foot-row { grid-template-columns: 1fr; text-align: left; }
  .foot-locs { justify-self: start; }
  .foot-line { text-align: left; }
}

/* ============================================
   BRAND ASSETS  (paper surface)
   ============================================ */
.brand-kit {
  padding: clamp(96px, 14vh, 180px) var(--pad-x);
  background: var(--surface-bg);
  color: var(--surface-fg);
  border-top: 1px solid var(--surface-line);
  position: relative;
}
.brand-head {
  max-width: var(--max);
  margin: 0 auto clamp(48px, 7vh, 80px);
  display: grid;
  gap: 24px;
}
.brand-title {
  margin: 0;
  font-family: var(--type-display);
  font-weight: 380;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 22ch;
  color: var(--surface-fg);
}
.brand-title em { font-style: italic; color: var(--surface-accent); }
.brand-lede {
  margin: 0;
  max-width: 56ch;
  color: var(--surface-body);
  font-size: clamp(14.5px, 1vw, 16.5px);
  line-height: 1.65;
}
.brand-grid {
  max-width: var(--max);
  margin: 0 auto clamp(40px, 6vh, 64px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
}
.swatch {
  margin: 0;
  display: grid;
  gap: 14px;
}
.swatch-stage {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: clamp(18px, 3vw, 48px);
  border: 1px solid var(--surface-line);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.swatch--feature {
  grid-column: span 2;
}
.swatch--feature .swatch-stage {
  aspect-ratio: 16 / 9;
}
.swatch--navy .swatch-stage  { background: var(--navy); border-color: var(--navy-deep); }
.swatch--paper .swatch-stage { background: var(--paper); border-color: var(--line-light-strong); }
.swatch--square .swatch-stage { background: var(--paper); border-color: var(--line-light-strong); }
.swatch--mark-light .swatch-stage { background: var(--paper); border-color: var(--line-light-strong); }
.swatch--sky .swatch-stage { background: var(--sky); border-color: rgba(48, 102, 171, 0.28); }
.swatch--clear .swatch-stage {
  background:
    radial-gradient(circle at 25% 22%, rgba(171, 214, 246, 0.26), transparent 34%),
    linear-gradient(135deg, var(--navy-ink), var(--navy));
  border-color: rgba(48, 102, 171, 0.38);
}
.swatch--photo .swatch-stage {
  background: var(--navy);
  border-color: var(--line-light-strong);
}
.swatch-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(0.94) brightness(0.72);
}
.swatch--photo .swatch-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(13, 28, 58, 0.58), rgba(48, 102, 171, 0.22));
}
.swatch-logo-img {
  display: block;
  width: min(76%, 360px);
  max-height: 76%;
  object-fit: contain;
  position: relative;
  z-index: 1;
}
.swatch--feature .swatch-logo-img {
  width: min(64%, 390px);
  max-height: 76%;
}
.swatch-logo-img--square-asset {
  width: min(72%, 340px);
  max-height: 72%;
}
.swatch-logo-img--mark {
  width: min(54%, 180px);
  max-height: 44%;
}
.swatch-square-lockup {
  width: min(72%, 250px);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
}
.swatch-square-lockup .swatch-logo-img {
  width: 72%;
  max-height: 72%;
}
.swatch figcaption {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 12px;
  align-items: center;
  font-family: var(--type-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--surface-muted);
}
.swatch-num { color: var(--surface-accent); font-weight: 500; }
.swatch-name {
  font-family: var(--type-display);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--surface-fg);
}
.swatch-spec {
  grid-column: 1 / -1;
  color: var(--surface-muted);
}
.asset-download {
  grid-column: 1 / -1;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin-top: 2px;
  padding: 6px 11px 5px;
  border: 1px solid color-mix(in srgb, var(--surface-accent) 48%, transparent);
  border-radius: 999px;
  color: var(--surface-accent);
  font-size: 9.5px;
  font-weight: 620;
  letter-spacing: 0.14em;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.asset-download:hover {
  background: color-mix(in srgb, var(--surface-accent) 9%, transparent);
  border-color: var(--surface-accent);
  color: var(--navy-deep);
}

.brand-spec {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px clamp(20px, 3vw, 36px);
  padding-top: clamp(32px, 4vh, 48px);
  border-top: 1px solid var(--surface-line);
  font-family: var(--type-mono);
  font-size: 12.5px;
  color: var(--surface-body);
}
.brand-spec div { display: grid; gap: 6px; }
.brand-spec dt {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--surface-muted);
  font-size: 10.5px;
}
.brand-spec dd {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-feature-settings: "tnum";
  color: var(--surface-fg);
}
.dot-color {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(13, 28, 58, 0.15);
  flex-shrink: 0;
}
.brand-foot {
  max-width: var(--max);
  margin: clamp(32px, 4vh, 48px) auto 0;
  font-family: var(--type-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--surface-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.brand-foot a {
  color: var(--surface-accent);
  border-bottom: 1px solid rgba(48, 102, 171, 0.4);
  padding-bottom: 1px;
  transition: color var(--t-fast), border-color var(--t-fast);
  text-transform: none;
  font-family: var(--type-body);
  letter-spacing: 0;
}
.brand-foot a:hover { color: var(--navy-deep); border-bottom-color: var(--navy-deep); }
@media (max-width: 900px) {
  .brand-grid { grid-template-columns: 1fr 1fr; }
  .swatch--feature { grid-column: span 1; }
  .swatch--feature .swatch-stage { aspect-ratio: 1 / 1; }
  .brand-spec { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .brand-grid { grid-template-columns: 1fr; }
  .swatch-stage { aspect-ratio: 16 / 9; }
}

/* ============================================
   REVEAL ANIMATIONS
   ============================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--t-slow), transform var(--t-slow);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal][data-reveal-state="in"] {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero-eyebrow .dot { animation: none; }
  .hero-canvas { opacity: 0 !important; }
  .hero-logo-resolve {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }
}

/* === Japanese phrase-aware line breaking (Sayo feedback 2026-06-19): keep katakana / loanwords (ゲーム, パートナー...) intact and wrap consistently across iPhone / iPad / laptop. Unsupported browsers fall back to default wrapping. === */
/* Japanese line-breaking (Sayo feedback): BudouX phrase boundaries (U+200B zero-width spaces) are baked into the JA strings in main.js; keep-all makes the browser break ONLY at those word boundaries, so katakana/loanwords never split mid-word, consistently across iPhone / iPad / laptop. */
html[lang="ja"] :is(p, h1, h2, h3, h4, li, dd, dt, blockquote, figcaption,
  .hero-eyebrow, .hero-sub, .card-title, .card-body, .card-meta, .card-tags span, .kicker, .lang-label) {
  word-break: keep-all;
  line-break: strict;
}
/* Brand Kit headline/lede: the only place a single word can still exceed its content-sized box on very narrow (<=360px) screens; allow that one word to break instead of clipping. */
html[lang="ja"] :is(.brand-title, .brand-lede) {
  overflow-wrap: anywhere;
}
/* On <=360px the single long heading word ブランドアイデンティティ is wider than the line; trim the JA heading size so it fits cleanly without breaking mid-word. */
@media (max-width: 360px) {
  html[lang="ja"] .brand-title { font-size: 22px; }
}

/* Keep the long partner-logo captions from clipping at tablet widths (break only when needed) */
.federation-logos li span {
  overflow-wrap: break-word;
}