/* NIBB 50th 本物デザイン束ね: tokens + components + kit.css */

/* ===== tokens/colors.css ===== */
/* ==========================================================================
   NIBB 50th — Color Tokens
   Midnight deep-blue base, champagne-gold + platinum accents, off-white support.
   ========================================================================== */

:root {
  /* --- Midnight Deep Blue (base) -------------------------------------------
     The institutional ground. Softened from near-black to a deep, readable
     navy (#0A2740 anchor) so large background fields feel less heavy. */
  --midnight-950: #04141f;
  --midnight-900: #0a2740; /* brand anchor */
  --midnight-850: #0d2e49;
  --midnight-800: #123653;
  --midnight-700: #1a4360;
  --midnight-600: #1f5072;
  --midnight-500: #265d80;
  --midnight-400: #35779c;

  /* --- Champagne Gold (primary accent) -------------------------------------
     Celebration, prestige, hairlines, CTAs. #D4AF37 is gold-500. */
  --gold-200: #f1e3b0;
  --gold-300: #e7d28a;
  --gold-400: #ddc163;
  --gold-500: #d4af37; /* champagne gold anchor */
  --gold-600: #b8932b;
  --gold-700: #937420;
  --gold-800: #6b541518;

  /* --- Platinum Silver (secondary accent) ----------------------------------
     Cool, quiet, supporting rules and metadata. */
  --platinum-100: #eef0f3;
  --platinum-200: #dde1e6;
  --platinum-300: #c9ced5; /* platinum anchor */
  --platinum-400: #a7adb7;
  --platinum-500: #828a96;

  /* --- Off-White (light support) ------------------------------------------- */
  --offwhite: #f8f9fa;
  --offwhite-dim: #eceef1;

  /* --- Pure / alpha helpers ------------------------------------------------ */
  --gold-rgb: 212, 175, 55;       /* @kind other */
  --midnight-rgb: 10, 39, 64;      /* @kind other */
  --offwhite-rgb: 248, 249, 250;   /* @kind other */

  /* ======================================================================
     SEMANTIC ALIASES — author UI against these.
     ====================================================================== */

  /* Surfaces */
  --surface-base: var(--midnight-900);      /* page ground */
  --surface-raised: var(--midnight-850);    /* panels over the ground */
  --surface-card: var(--midnight-800);      /* cards on dark */
  --surface-card-hover: var(--midnight-700);
  --surface-inverse: var(--offwhite);       /* light sections */
  --surface-inverse-dim: var(--offwhite-dim);

  /* Text on dark ground */
  --text-display: var(--offwhite);          /* serif headings */
  --text-body: rgba(248, 249, 250, 0.82);   /* body copy */
  --text-muted: rgba(248, 249, 250, 0.72);  /* captions, meta */
  --text-faint: rgba(248, 249, 250, 0.34);  /* hairline labels */
  --text-gold: var(--gold-500);

  /* Text on light ground */
  --text-on-light: var(--midnight-900);
  --text-on-light-muted: rgba(8, 34, 54, 0.62);

  /* Lines & borders */
  --line-gold: var(--gold-500);
  --line-gold-soft: rgba(var(--gold-rgb), 0.32);
  --line-hairline: rgba(248, 249, 250, 0.12);
  --line-hairline-strong: rgba(248, 249, 250, 0.22);
  --line-on-light: rgba(8, 34, 54, 0.12);

  /* Interaction */
  --accent: var(--gold-500);
  --accent-hover: var(--gold-400);
  --accent-press: var(--gold-600);
  --focus-ring: rgba(var(--gold-rgb), 0.55);
}

/* ===== tokens/typography.css ===== */
/* ==========================================================================
   NIBB 50th — Typography Tokens
   Headings: Noto Serif JP (明朝体) — dignified, luxuriously letter-spaced.
   Body:     Noto Sans JP (ゴシック体) — high legibility.
   ========================================================================== */

:root {
  /* Families */
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --font-mono: "DM Mono", "SFMono-Regular", ui-monospace, monospace;

  /* Weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 900;

  /* ---- Type scale (desktop-first, fluid where it counts) ---------------- */
  --text-hero: clamp(3.5rem, 7vw, 7rem);     /* "50th" numeral / hero */
  --text-display: clamp(2.5rem, 4.5vw, 4rem);
  --text-h1: clamp(2rem, 3vw, 3rem);
  --text-h2: clamp(1.625rem, 2.2vw, 2.25rem);
  --text-h3: 1.5rem;
  --text-h4: 1.25rem;
  --text-lead: 1.25rem;     /* intros, deck copy */
  --text-base: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;
  --text-overline: 0.6875rem; /* tracked-out labels */

  /* ---- Line heights ----------------------------------------------------- */
  --leading-tight: 1.12;     /* serif display */
  --leading-snug: 1.35;
  --leading-normal: 1.7;     /* JP body needs air */
  --leading-relaxed: 2;      /* vertical / message copy */

  /* ---- Letter spacing (tracking) ---------------------------------------
     Mincho headings are set with generous, deliberate tracking. */
  --tracking-display: 0.12em;  /* luxurious heading tracking */
  --tracking-heading: 0.06em;
  --tracking-body: 0.02em;
  --tracking-overline: 0.34em; /* widely-spaced eyebrow labels */
  --tracking-tight: 0;
}

/* ===== tokens/spacing.css ===== */
/* ==========================================================================
   NIBB 50th — Spacing, Radius & Layout Tokens
   4px base rhythm. Restrained radii — this is an institutional, formal system.
   ========================================================================== */

:root {
  /* Spacing scale (4px base) */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */
  --space-11: 12rem;   /* 192 — section breathing room */

  /* Radii — kept tight; formality over friendliness */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* Layout */
  --container-max: 1200px;
  --container-wide: 1440px;
  --container-prose: 720px;
  --gutter: clamp(1.25rem, 5vw, 5rem); /* @kind spacing */

  /* Fixed chrome */
  --nav-height: 76px;
  --z-nav: 100;        /* @kind other */
  --z-overlay: 200;    /* @kind other */
  --z-modal: 300;      /* @kind other */
}

/* ===== tokens/effects.css ===== */
/* ==========================================================================
   NIBB 50th — Effects: shadows, gradients, hairlines, motion
   ========================================================================== */

:root {
  /* ---- Elevation (cool, deep — shadows read as void, not gray) ---------- */
  --shadow-sm: 0 1px 2px rgba(0, 6, 13, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 6, 13, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 6, 13, 0.55);
  --shadow-gold: 0 0 0 1px rgba(var(--gold-rgb), 0.25), 0 12px 40px rgba(0, 6, 13, 0.5);

  /* ---- Gold glow (used sparingly on hero numerals / CTAs) -------------- */
  --glow-gold: 0 0 24px rgba(var(--gold-rgb), 0.35);

  /* ---- Gradients ------------------------------------------------------- */
  /* Deep vertical ground for hero / sections */
  --grad-ground: linear-gradient(180deg, #04141f 0%, #0a2740 45%, #0d2e49 100%); /* @kind other */
  /* Vignette to seat full-bleed imagery into the dark */
  --grad-vignette: radial-gradient(120% 90% at 50% 0%, rgba(10,39,64,0) 40%, rgba(4,20,31,0.88) 100%); /* @kind other */
  /* Protection scrim under nav / over images, top→down */
  --grad-scrim-top: linear-gradient(180deg, rgba(4,20,31,0.85) 0%, rgba(4,20,31,0) 100%); /* @kind other */
  --grad-scrim-bottom: linear-gradient(0deg, rgba(4,20,31,0.9) 0%, rgba(4,20,31,0) 100%); /* @kind other */
  /* Champagne metallic for headline accents / rules */
  --grad-gold: linear-gradient(100deg, #937420 0%, #d4af37 35%, #f1e3b0 50%, #d4af37 65%, #937420 100%); /* @kind other */
  /* Hairline rule that fades at both ends */
  --grad-rule-gold: linear-gradient(90deg, transparent, rgba(var(--gold-rgb),0.6) 20%, rgba(var(--gold-rgb),0.6) 80%, transparent); /* @kind other */

  /* ---- Blur (used for nav-on-scroll glass) ----------------------------- */
  --blur-nav: saturate(140%) blur(14px); /* @kind other */

  /* ---- Motion: slow, weighted, refined. No bounce. --------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);     /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast: 180ms;   /* @kind other */
  --dur-base: 320ms;   /* @kind other */
  --dur-slow: 640ms;   /* @kind other */
  --dur-reveal: 900ms; /* @kind other */
}

/* ===== component CSS (ds_runtime_fallback) ===== */

/* --- component block 1 --- */

.nibb-btn{
  --_bg: transparent; --_fg: var(--midnight-900); --_bd: transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--font-sans); font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; white-space:nowrap; cursor:pointer;
  border:1px solid var(--_bd); background:var(--_bg); color:var(--_fg);
  border-radius:var(--radius-sm); text-decoration:none; box-sizing:border-box;
  transition: background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.nibb-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--focus-ring); }
.nibb-btn:active{ transform: translateY(1px); }
.nibb-btn[disabled]{ opacity:.4; pointer-events:none; }
.nibb-btn .nibb-btn__ic{ display:inline-flex; width:1.1em; height:1.1em; }

/* sizes */
.nibb-btn--sm{ font-size:11px; padding:8px 16px; }
.nibb-btn--md{ font-size:12px; padding:13px 26px; }
.nibb-btn--lg{ font-size:13px; padding:17px 38px; }

/* variants */
.nibb-btn--primary{ --_bg:var(--gold-500); --_fg:var(--midnight-950); --_bd:var(--gold-500); }
.nibb-btn--primary:hover{ --_bg:var(--gold-400); --_bd:var(--gold-400); box-shadow:var(--glow-gold); }
.nibb-btn--primary:active{ --_bg:var(--gold-600); --_bd:var(--gold-600); }

.nibb-btn--secondary{ --_bg:transparent; --_fg:var(--gold-400); --_bd:var(--line-gold-soft); }
.nibb-btn--secondary:hover{ --_fg:var(--gold-300); --_bd:var(--gold-500); background:rgba(var(--gold-rgb),.06); }

.nibb-btn--ghost{ --_bg:transparent; --_fg:var(--text-body); --_bd:transparent; letter-spacing:.16em; }
.nibb-btn--ghost:hover{ --_fg:var(--offwhite); }

.nibb-btn--onlight{ --_bg:var(--midnight-900); --_fg:var(--offwhite); --_bd:var(--midnight-900); }
.nibb-btn--onlight:hover{ --_bg:var(--midnight-700); --_bd:var(--midnight-700); }


/* --- component block 2 --- */

.nibb-iconbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--radius-pill);
  background:transparent; color:var(--text-body); cursor:pointer;
  border:1px solid var(--line-hairline); box-sizing:border-box;
  transition: color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard);
}
.nibb-iconbtn svg, .nibb-iconbtn img{ width:20px; height:20px; display:block; }
.nibb-iconbtn:hover{ color:var(--gold-400); border-color:var(--line-gold-soft); background:rgba(var(--gold-rgb),.05); }
.nibb-iconbtn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--focus-ring); }
.nibb-iconbtn:active{ transform:translateY(1px); }
.nibb-iconbtn[disabled]{ opacity:.4; pointer-events:none; }
.nibb-iconbtn--solid{ background:var(--gold-500); color:var(--midnight-950); border-color:var(--gold-500); }
.nibb-iconbtn--solid:hover{ background:var(--gold-400); color:var(--midnight-950); }
.nibb-iconbtn--plain{ border-color:transparent; }


/* --- component block 3 --- */

.nibb-sectiontitle{ display:flex; flex-direction:column; gap:var(--space-4); }
.nibb-sectiontitle--center{ align-items:center; text-align:center; }
.nibb-sectiontitle__eyebrow{
  display:inline-flex; align-items:center; gap:.8em;
  font-family:var(--font-sans); font-weight:500; font-size:var(--text-overline);
  letter-spacing:var(--tracking-overline); text-transform:uppercase;
  color:var(--gold-500); margin:0;
}
.nibb-sectiontitle__eyebrow::before{
  content:""; width:28px; height:1px; background:var(--gold-500); display:inline-block;
}
.nibb-sectiontitle--center .nibb-sectiontitle__eyebrow::after{
  content:""; width:28px; height:1px; background:var(--gold-500); display:inline-block;
}
.nibb-sectiontitle__title{
  font-family:var(--font-serif); font-weight:600; color:var(--text-display);
  font-size:var(--text-h1); line-height:var(--leading-tight);
  letter-spacing:var(--tracking-heading); margin:0; text-wrap:balance;
}
.nibb-sectiontitle__sub{
  font-family:var(--font-sans); font-weight:400; color:var(--text-muted);
  font-size:var(--text-base); line-height:var(--leading-normal);
  letter-spacing:var(--tracking-body); margin:0; max-width:56ch;
}
.nibb-sectiontitle--onlight .nibb-sectiontitle__title{ color:var(--text-on-light); }
.nibb-sectiontitle--onlight .nibb-sectiontitle__sub{ color:var(--text-on-light-muted); }
.nibb-sectiontitle--onlight .nibb-sectiontitle__eyebrow{ color:var(--gold-700); }
.nibb-sectiontitle--onlight .nibb-sectiontitle__eyebrow::before,
.nibb-sectiontitle--onlight .nibb-sectiontitle__eyebrow::after{ background:var(--gold-600); }


/* --- component block 4 --- */

.nibb-badge{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-sans); font-weight:600; font-size:var(--text-overline);
  letter-spacing:var(--tracking-overline); text-transform:uppercase;
  padding:5px 11px; border-radius:var(--radius-pill); white-space:nowrap;
  border:1px solid transparent; box-sizing:border-box;
}
.nibb-badge--gold{ color:var(--gold-300); border-color:var(--line-gold-soft); background:rgba(var(--gold-rgb),.07); }
.nibb-badge--solid{ color:var(--midnight-950); background:var(--gold-500); }
.nibb-badge--outline{ color:var(--text-muted); border-color:var(--line-hairline-strong); }
.nibb-badge--era{ color:var(--gold-400); border:0; padding-left:0; font-family:var(--font-mono); letter-spacing:.18em; }
.nibb-badge--era::before{ content:""; width:18px; height:1px; background:var(--gold-500); display:inline-block; }


/* --- component block 5 --- */

.nibb-rule{ display:flex; align-items:center; gap:var(--space-4); width:100%; }
.nibb-rule__line{ flex:1; height:1px; background:var(--grad-rule-gold); }
.nibb-rule__mark{ flex:none; width:6px; height:6px; transform:rotate(45deg); background:var(--gold-500); }
.nibb-rule--solid .nibb-rule__line{ background:var(--line-gold-soft); }
.nibb-rule--metal .nibb-rule__line{ height:2px; background:var(--grad-gold); }
.nibb-rule__label{
  flex:none; font-family:var(--font-sans); font-weight:500; font-size:var(--text-overline);
  letter-spacing:var(--tracking-overline); text-transform:uppercase; color:var(--gold-500);
}
.nibb-rule--vertical{ flex-direction:column; width:1px; height:100%; }
.nibb-rule--vertical .nibb-rule__line{ width:1px; height:auto; background:var(--grad-rule-gold); }


/* --- component block 6 --- */

.nibb-card{
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  background:var(--surface-card); border:1px solid var(--line-hairline);
  border-radius:var(--radius-md); text-decoration:none; color:inherit;
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-standard);
}
a.nibb-card{ cursor:pointer; }
a.nibb-card:hover{ transform:translateY(-4px); border-color:var(--line-gold-soft);
  box-shadow:var(--shadow-lg); background:var(--surface-card-hover); }
a.nibb-card:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--focus-ring); }

.nibb-card__media{ position:relative; aspect-ratio:16/10; overflow:hidden;
  background:var(--grad-ground); border-bottom:1px solid var(--line-hairline); }
.nibb-card__media > img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--dur-slow) var(--ease-out); }
a.nibb-card:hover .nibb-card__media > img{ transform:scale(1.05); }
.nibb-card__media::after{ content:""; position:absolute; inset:0; background:var(--grad-scrim-bottom); opacity:.5; }
.nibb-card__badge{ position:absolute; top:14px; left:14px; z-index:2; }

.nibb-card__body{ display:flex; flex-direction:column; gap:var(--space-3);
  padding:var(--space-5) var(--space-5) var(--space-6); }
.nibb-card__kicker{ font-family:var(--font-sans); font-weight:500; font-size:var(--text-overline);
  letter-spacing:var(--tracking-overline); text-transform:uppercase; color:var(--gold-500); margin:0; }
.nibb-card__title{ font-family:var(--font-serif); font-weight:600; font-size:var(--text-h4);
  line-height:var(--leading-snug); letter-spacing:var(--tracking-body); color:var(--text-display); margin:0; text-wrap:balance; }
.nibb-card__excerpt{ font-family:var(--font-sans); font-size:var(--text-sm); line-height:var(--leading-normal);
  color:var(--text-muted); margin:0; text-wrap:pretty; }
.nibb-card__more{ display:inline-flex; align-items:center; gap:.5em; margin-top:var(--space-2);
  font-family:var(--font-sans); font-weight:600; font-size:var(--text-overline);
  letter-spacing:var(--tracking-overline); text-transform:uppercase; color:var(--gold-400); }
.nibb-card__more::after{ content:"→"; transition:transform var(--dur-base) var(--ease-out); }
a.nibb-card:hover .nibb-card__more::after{ transform:translateX(5px); }


/* --- component block 7 --- */

.nibb-stat{ display:flex; flex-direction:column; gap:var(--space-2); }
.nibb-stat--center{ align-items:center; text-align:center; }
.nibb-stat__value{
  font-family:var(--font-serif); font-weight:600; line-height:1;
  font-size:clamp(2.75rem,5vw,4.25rem); letter-spacing:.01em;
  color:transparent; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text;
  display:inline-flex; align-items:baseline; gap:.08em;
}
.nibb-stat__suffix{ font-size:.42em; font-weight:500; -webkit-text-fill-color:var(--gold-400); color:var(--gold-400); letter-spacing:.04em; }
.nibb-stat__label{
  font-family:var(--font-sans); font-weight:500; font-size:var(--text-overline);
  letter-spacing:var(--tracking-overline); text-transform:uppercase; color:var(--text-muted); margin:0;
}
.nibb-stat--plain .nibb-stat__value{ background:none; -webkit-background-clip:initial; background-clip:initial; color:var(--text-display); }


/* ===== site/kit.css ===== */
/* ==========================================================================
   NIBB 50th Anniversary site — UI-kit layout styles (built on design tokens)
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--midnight-900); color: var(--text-body);
  font-family: var(--font-sans); -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(var(--gold-rgb), .3); color: var(--offwhite); }
a { color: inherit; }
img { max-width: 100%; }

/* scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--midnight-950); }
::-webkit-scrollbar-thumb { background: var(--midnight-600); border-radius: 99px; }

.kit-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -.12em; }

/* subpages: clear the fixed nav */
.page-sub { padding-top: var(--nav-height); }

/* ---- Layout primitives -------------------------------------------------- */
.container { max-width: var(--container-max); margin: 0 auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: clamp(5rem, 11vh, 9rem); }
.section--light { background: var(--surface-inverse); color: var(--text-on-light); }
.section--deep { background: var(--midnight-900); }
.eyebrow-num { font-family: var(--font-mono); color: var(--gold-500); font-size: var(--text-sm); letter-spacing: .2em; }

/* scroll reveal — transform-only so a throttled/frozen transition never traps
   content at opacity:0. Worst case the element rests a few px low but visible. */
.reveal { transform: translateY(20px); transition: transform var(--dur-reveal) var(--ease-out); will-change: transform; }
.reveal.is-in { transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { .reveal { transform: none; transition: none; } }

/* ======================= NAV ======================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height); z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--gutter);
  transition: background var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard), backdrop-filter var(--dur-base);
  border-bottom: 1px solid transparent;
}
.nav--scrolled {
  background: rgba(6, 26, 42, .72); -webkit-backdrop-filter: var(--blur-nav); backdrop-filter: var(--blur-nav);
  border-bottom-color: var(--line-gold-soft);
}
.nav__brand { display: flex; align-items: center; gap: 14px; cursor: pointer; text-decoration: none; }
.nav__brand-mark { font-family: var(--font-serif); font-weight: 600; font-size: 24px; letter-spacing: .14em; color: var(--offwhite); }
.nav__brand-sep { width: 1px; height: 26px; background: var(--gold-600); }
.nav__brand-sub { display: flex; flex-direction: column; line-height: 1.15; }
.nav__brand-50 { font-family: var(--font-serif); font-weight: 600; font-size: 15px; color: var(--gold-400); letter-spacing: .08em; }
.nav__brand-tag { font-size: 9px; letter-spacing: .28em; color: var(--text-muted); text-transform: uppercase; }
.nav__links { display: flex; align-items: center; gap: 8px; }
.nav__link {
  position: relative; background: rgba(var(--gold-rgb), .05); border: 1px solid rgba(var(--gold-rgb), .18);
  border-radius: 999px; cursor: pointer; color: var(--text-muted); text-decoration: none;
  font-family: var(--font-sans); font-weight: 500; font-size: 14px; letter-spacing: .16em;
  text-transform: uppercase; padding: 10px 16px; transition: color var(--dur-base), background var(--dur-base), border-color var(--dur-base);
}
.nav__link:hover { color: var(--offwhite); background: rgba(var(--gold-rgb), .14); border-color: rgba(var(--gold-rgb), .4); }
.nav__link--active { color: var(--gold-400); background: rgba(var(--gold-rgb), .12); border-color: rgba(var(--gold-rgb), .5); }
.nav__menu-btn { display: none; }
.nav__drawer { position: fixed; inset: var(--nav-height) 0 0; z-index: calc(var(--z-nav) - 1);
  background: rgba(5, 22, 37, .96); -webkit-backdrop-filter: var(--blur-nav); backdrop-filter: var(--blur-nav);
  display: none; flex-direction: column; padding: 16px var(--gutter); overflow-y: auto; }
.nav__drawer.is-open { display: flex; }
.nav__drawer-link { display: flex; align-items: baseline; gap: 16px; background: none; border: 0;
  border-bottom: 1px solid var(--line-hairline); padding: 22px 4px; cursor: pointer; text-align: left; text-decoration: none; }
.nav__drawer-link.is-active .nav__drawer-jp { color: var(--gold-400); }
.nav__drawer-jp { font-family: var(--font-serif); font-size: 20px; color: var(--offwhite); letter-spacing: .1em; }
.nav__drawer-en { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-500); margin-left: auto; }

/* ======================= HERO ======================= */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.hero__bg::after { content: ""; position: absolute; inset: 0;
  background: var(--grad-vignette), radial-gradient(80% 60% at 70% 40%, rgba(10,39,64,0) 0%, rgba(4,20,31,.82) 100%); }
.hero__motif { position: absolute; inset: 0; z-index: 1; background: url(../cellular-motif.svg); background-size: 720px; opacity: .5;
  animation: motif-drift 60s linear infinite; }
@keyframes motif-drift { to { background-position: 720px 360px; } }
.hero__inner { position: relative; z-index: 2; padding-top: var(--nav-height); }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 14px; color: var(--gold-400);
  font-size: var(--text-overline); letter-spacing: var(--tracking-overline); text-transform: uppercase; margin-bottom: 30px; }
.hero__eyebrow::before { content: ""; width: 46px; height: 1px; background: var(--gold-500); }
.hero__num { font-family: var(--font-serif); font-weight: 600; line-height: .92;
  font-size: clamp(5rem, 13vw, 12rem); letter-spacing: .02em; margin: 0;
  background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__num sup { font-size: .28em; vertical-align: super; -webkit-text-fill-color: var(--gold-400); }
.hero__title { font-family: var(--font-serif); font-weight: 500; color: var(--offwhite);
  font-size: clamp(1.6rem, 3vw, 2.9rem); letter-spacing: .12em; line-height: 1.5; margin: 8px 0 0; text-wrap: balance; }
.hero__sub { color: var(--text-body); font-size: var(--text-lead); line-height: var(--leading-normal);
  max-width: 46ch; margin: 28px 0 40px; }
.hero__cta { display: flex; gap: 16px; flex-wrap: wrap; }
.hero__scroll { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text-muted);
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase; }
.hero__scroll-line { width: 1px; height: 46px; background: linear-gradient(var(--gold-500), transparent); position: relative; overflow: hidden; }
.hero__scroll-line::after { content: ""; position: absolute; top: -50%; left: 0; width: 100%; height: 50%;
  background: var(--offwhite); animation: scroll-fall 2.2s var(--ease-in-out) infinite; }
@keyframes scroll-fall { 0% { top: -50%; } 60%,100% { top: 110%; } }

/* hero stat strip */
.hero__stats { display: flex; gap: clamp(28px, 5vw, 72px); margin-top: 64px; flex-wrap: wrap; }

/* ======================= MESSAGE ======================= */
.message { position: relative; background: var(--midnight-900); overflow: hidden; }
.message__motif { position: absolute; right: -120px; top: 50%; transform: translateY(-50%);
  width: 520px; height: 520px; opacity: .35; }
.message__grid { display: grid; grid-template-columns: 1fr auto; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.message__tate { writing-mode: vertical-rl; font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(1.3rem, 2vw, 1.9rem); line-height: 2.1; letter-spacing: .16em; color: var(--offwhite);
  height: 60vh; max-height: 560px; }
.message__tate .gold { color: var(--gold-400); }
.message__body { max-width: 52ch; }
.message__p { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--text-body); margin: 0 0 1.4em; text-wrap: pretty; }
.message__sign { margin-top: 40px; display: flex; align-items: center; gap: 18px; }
.message__sign-name { font-family: var(--font-serif); font-size: 22px; color: var(--offwhite); letter-spacing: .1em; }
.message__sign-role { font-size: 12px; color: var(--text-muted); letter-spacing: .1em; }

/* ======================= HISTORY / TIMELINE ======================= */
.timeline { position: relative; max-width: 920px; margin: 0 auto; padding-left: 8px; }
.timeline__spine { position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--line-hairline); }
.timeline__progress { position: absolute; left: 0; top: 6px; width: 1px; background: var(--grad-gold);
  height: 0; box-shadow: var(--glow-gold); transition: height .15s linear; }
.tl-item { position: relative; padding: 0 0 clamp(3rem, 6vh, 5rem) clamp(2.5rem, 6vw, 5rem); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item__dot { position: absolute; left: -5px; top: 4px; width: 11px; height: 11px; transform: rotate(45deg);
  background: var(--midnight-900); border: 1px solid var(--gold-600); transition: background var(--dur-base), box-shadow var(--dur-base); }
.tl-item.is-in .tl-item__dot { background: var(--gold-500); box-shadow: var(--glow-gold); }
.tl-item__year { font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.28rem, 2.16vw, 1.92rem);
  color: transparent; background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; line-height: 1; }
.tl-item__head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.tl-item__title { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-h3); color: var(--offwhite); margin: 0; letter-spacing: .04em; }
.tl-item__body { color: var(--text-muted); font-size: var(--text-base); line-height: var(--leading-normal); margin: 8px 0 0; }

/* ======================= NEWS / お知らせ ======================= */
.news { background: var(--midnight-900); }
.news__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(2rem, 4vh, 3rem); }
.news-list { display: flex; flex-direction: column; }
.news-row { display: grid; grid-template-columns: 140px 120px 1fr auto; gap: clamp(.75rem, 2.5vw, 2rem); align-items: center;
  padding: clamp(1.1rem, 2.2vh, 1.5rem) 4px; border-top: 1px solid var(--line-hairline);
  text-decoration: none; transition: background var(--dur-base), padding-left var(--dur-base) var(--ease-out); }
.news-row:last-child { border-bottom: 1px solid var(--line-hairline); }
.news-row:hover { background: linear-gradient(90deg, rgba(var(--gold-rgb),.05), transparent); padding-left: 14px; }
.news-row:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
.news-row__date { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--gold-400); letter-spacing: .08em; white-space: nowrap; }
.news-row__tag { justify-self: start; }
.news-row__title { font-family: var(--font-sans); font-size: var(--text-base); color: var(--text-body); margin: 0; letter-spacing: .02em;
  display: flex; align-items: center; gap: 12px; transition: color var(--dur-base); }
.news-row:hover .news-row__title { color: var(--offwhite); }
.news-row__new { flex: none; font-family: var(--font-sans); font-weight: 700; font-size: 9px; letter-spacing: .18em;
  color: var(--midnight-950); background: var(--gold-500); padding: 2px 7px; border-radius: var(--radius-sm); }
.news-row__arrow { color: var(--text-faint); transition: color var(--dur-base), transform var(--dur-base) var(--ease-out); }
.news-row:hover .news-row__arrow { color: var(--gold-400); transform: translateX(4px); }

/* ======================= RESEARCH ======================= */
.research-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.4vw, 2rem); }

/* ======================= EVENTS ======================= */
.events-list { display: flex; flex-direction: column; }
.event-row { display: grid; grid-template-columns: 160px 1fr auto; gap: clamp(1rem, 4vw, 3rem); align-items: center;
  padding: clamp(1.6rem, 3vh, 2.4rem) 0; border-top: 1px solid var(--line-hairline); transition: background var(--dur-base); }
.event-row:last-child { border-bottom: 1px solid var(--line-hairline); }
.event-row:hover { background: linear-gradient(90deg, rgba(var(--gold-rgb),.04), transparent); }
.event-row__date { font-family: var(--font-mono); font-size: var(--text-lead); color: var(--gold-400); letter-spacing: .1em; }
.event-row__title { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-h3); color: var(--offwhite); margin: 8px 0 8px; letter-spacing: .04em; }
.event-row__body { color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-normal); margin: 0; }
.event-row__place { font-size: var(--text-xs); color: var(--text-faint); margin-top: 10px; letter-spacing: .08em; }
.event-row__meta { text-align: right; white-space: nowrap; }

/* ======================= GIVING ======================= */
.giving { background: var(--midnight-900); }
.giving-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.4vw, 1.75rem); align-items: stretch; }
.give-card { display: flex; flex-direction: column; background: var(--surface-card); border: 1px solid var(--line-hairline);
  border-radius: var(--radius-md); padding: clamp(1.75rem, 3vw, 2.5rem); transition: border-color var(--dur-base), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); }
.give-card:hover { transform: translateY(-4px); border-color: var(--line-gold-soft); box-shadow: var(--shadow-lg); }
.give-card--featured { border-color: var(--line-gold); box-shadow: var(--shadow-gold); }
.give-card__tier { font-family: var(--font-serif); font-size: var(--text-h3); color: var(--offwhite); letter-spacing: .1em; }
.give-card__amount { font-family: var(--font-mono); color: var(--gold-400); font-size: var(--text-base); margin: 10px 0 22px; letter-spacing: .04em; }
.give-card__rule { height: 1px; background: var(--line-gold-soft); margin-bottom: 22px; }
.give-card__benefits { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 13px; flex: 1; }
.give-card__benefits li { display: flex; gap: 11px; align-items: flex-start; color: var(--text-body); font-size: var(--text-sm); line-height: 1.5; }
.give-card__benefits li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: 7px; transform: rotate(45deg); background: var(--gold-500); }
.give-card__badge { align-self: flex-start; margin-bottom: 16px; }

/* ======================= FOOTER ======================= */
.footer { background: var(--midnight-950); border-top: 1px solid var(--line-gold-soft); padding-block: clamp(3rem, 7vh, 5rem); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; align-items: start; }
.footer__emblem { width: 132px; margin-bottom: 22px; }
.footer__tagline { color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-normal); max-width: 36ch; }
.footer__col h5 { font-size: var(--text-overline); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--gold-500); margin: 0 0 18px; }
.footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer__col a { color: var(--text-muted); font-size: var(--text-sm); text-decoration: none; transition: color var(--dur-base); letter-spacing: .04em; }
.footer__col a:hover { color: var(--gold-400); }
.footer__base { margin-top: clamp(2.5rem, 5vh, 4rem); padding-top: 24px; border-top: 1px solid var(--line-hairline);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--text-faint); font-size: var(--text-xs); letter-spacing: .06em; }
.footer__social { display: inline-flex; gap: .9rem; align-items: center; }
.footer__social-link { display: inline-flex; width: 20px; height: 20px; color: rgba(255,255,255,.75); transition: color var(--dur-base); }
.footer__social-link:hover { color: var(--gold-400); }
.footer__social-link svg { width: 100%; height: 100%; fill: currentColor; }

/* ======================= DOC TOC（階層目次） ======================= */
.doc-toc__title { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-h3); color: var(--offwhite);
  margin: 0 0 14px; letter-spacing: .04em; }
.doc-toc { border: 1px solid var(--line-hairline); border-radius: 6px; overflow: hidden; background: rgba(255,255,255,.015); }
.doc-toc__list { list-style: none; margin: 0; padding: 0; }
.doc-toc__item { display: flex; align-items: center; gap: 12px; padding: 9px 28px; border-bottom: 1px solid var(--line-hairline);
  color: var(--text-body); font-size: var(--text-sm); text-decoration: none; transition: background var(--dur-base); }
.doc-toc__item::before { content: ""; width: 5px; height: 5px; background: var(--gold-500); transform: rotate(45deg); flex: none; }
.doc-toc__item:hover { background: rgba(var(--gold-rgb), .04); }
.doc-toc__group { border-bottom: 1px solid var(--line-hairline); }
.doc-toc__group-title { display: flex; align-items: center; gap: 12px; padding: 11px 28px; font-weight: 600; color: var(--gold-400);
  font-size: var(--text-sm); letter-spacing: .04em; background: rgba(var(--gold-rgb), .06); }
.doc-toc__group-title::before { content: ""; width: 5px; height: 5px; background: var(--gold-500); transform: rotate(45deg); flex: none; }
.doc-toc__children { list-style: none; margin: 0; padding: 0 0 0 48px; }
.doc-toc__entry { position: relative; display: block; padding: 9px 28px 9px 22px; line-height: 1.5;
  border-top: 1px solid var(--line-hairline); text-decoration: none; transition: background var(--dur-base); }
.doc-toc__entry::before { content: "\2013"; position: absolute; left: 0; top: 9px; line-height: 1.5;
  color: var(--gold-500); font-weight: 700; }
.doc-toc__entry:hover { background: linear-gradient(90deg, rgba(var(--gold-rgb),.05), transparent); }
.doc-toc__entry-title { color: var(--text-body); font-size: var(--text-sm); line-height: 1.5; }
.doc-toc__entry-author { color: var(--text-faint); font-size: var(--text-xs); letter-spacing: .06em; margin-left: 14px; }

/* ======================= RESPONSIVE ======================= */
@media (max-width: 960px) {
  .nav__links { display: none; }
  .nav__menu-btn { display: inline-flex; }
  .message__grid { grid-template-columns: 1fr; }
  .message__tate { height: auto; max-height: none; writing-mode: horizontal-tb; }
  .research-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .event-row { grid-template-columns: 1fr; gap: 8px; }
  .event-row__meta { text-align: left; }
  .research-grid, .giving-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__stats { gap: 24px 36px; }
  .news-row { grid-template-columns: auto 1fr; gap: 8px 16px; }
  .news-row__title { grid-column: 1 / -1; }
  .news-row__arrow { display: none; }
  .doc-toc__item { padding-left: 18px; }
  .doc-toc__group-title { padding-left: 18px; }
  .doc-toc__children { padding-left: 28px; }
  .doc-toc__entry { padding: 9px 12px 9px 18px; }
}