/* ============================================================================
 * shared.css — IBER-Kotosaka shared design system.
 *
 * Loaded on every page (root + /news/). Organised via @layer so that page-
 * level <style> blocks always win over base, and component overrides win
 * over tokens. The cascade order is:
 *
 *   reset  →  tokens  →  base  →  layout  →  components  →  utilities  →  page
 *
 * Key non-obvious choices:
 *   - All typography sizes use clamp() so PC ↔ tablet ↔ mobile transitions
 *     are continuous rather than stepped.
 *   - Mobile primary nav is a <details>-driven hamburger so it works without
 *     JS and is a11y-correct out of the box.
 *   - Container queries (@container) drive .track, .news-row, .related-item
 *     so the same components react to the column they sit in, not the
 *     viewport. Falls back gracefully on browsers that don't support CQ.
 *   - prefers-color-scheme: dark provides a calibrated dark mode that only
 *     remaps tokens (not layout). Disabled with [data-theme="light"] on html.
 *   - prefers-reduced-motion turns off hover transitions and view transitions.
 * ========================================================================= */

@layer reset, tokens, base, layout, components, utilities, page;

/* ----------------------------------------------------------------------
 * @layer reset
 * ---------------------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  img, picture, video, svg { max-width: 100%; height: auto; display: block; }
  button, input, select, textarea { font: inherit; color: inherit; }
  a { color: inherit; text-decoration: none; }
  a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--keio-yellow);
    outline-offset: 2px;
    border-radius: 2px;
  }
}

/* ----------------------------------------------------------------------
 * @layer tokens — design tokens (palette, type, spacing).
 * ---------------------------------------------------------------------- */
@layer tokens {
  :root {
    color-scheme: light dark;

    --bg: #FAFAF7;
    --bg-2: #F2F1EC;
    --bg-3: #EAE8E0;
    --ink: #141413;
    --ink-2: #2E2E2B;
    --ink-3: #5E5E58;
    --ink-4: #8F8F88;
    --rule: #D8D6CE;
    --rule-2: #BFBDB5;
    --accent: oklch(0.38 0.09 255);

    --rule-keio: #F0F0F7;
    --keio-yellow: #FFE524;
    --ink-keio: #141442;
    --sfc-navy: #2D444D;
    --footer-navy: #192553;

    --serif-en: "Source Serif 4", Georgia, serif;
    --serif-jp: "Noto Serif JP", "Source Serif 4", serif;
    --sans: "Inter", system-ui, sans-serif;
    --sans-jp: "Hiragino Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
    --accent-en: "Outfit", "Inter", sans-serif;
    --mono: "JetBrains Mono", ui-monospace, monospace;

    /* Fluid type scale — min: mobile / max: desktop. Driven by viewport width. */
    --fs-body:        clamp(14px, 0.85rem + 0.18vw, 15.5px);
    --fs-body-jp:     clamp(13.5px, 0.82rem + 0.15vw, 14.5px);
    --fs-lede:        clamp(15.5px, 0.95rem + 0.4vw, 18px);
    --fs-h1:          clamp(28px, 1.5rem + 2.5vw, 48px);
    --fs-h2:          clamp(22px, 1.3rem + 1.6vw, 32px);
    --fs-h3:          clamp(18px, 1.05rem + 0.6vw, 22px);
    --fs-mono:        clamp(10px, 0.65rem + 0.05vw, 11px);
    --fs-meta:        clamp(11px, 0.7rem + 0.08vw, 12px);

    /* Spacing scale */
    --pad-page-x:     clamp(16px, 2vw, 40px);
    --pad-section-y:  clamp(40px, 3.5vw, 80px);
    --max-content:    1400px;
    --max-prose:      72ch;

    --radius:         2px;
    --transition:     0.15s ease;
  }

  /* Dark mode — only tokens are remapped; layout & components stay identical. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg:        #15161B;
      --bg-2:      #1D1F26;
      --bg-3:      #262932;
      --ink:       #F2F1EC;
      --ink-2:     #D4D2C9;
      --ink-3:     #9D9B92;
      --ink-4:     #6B6962;
      --rule:      #2E313A;
      --rule-2:    #424651;
      --rule-keio: #2A2D38;
      --footer-navy: #0E1530;
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #15161B; --bg-2: #1D1F26; --bg-3: #262932;
    --ink: #F2F1EC; --ink-2: #D4D2C9; --ink-3: #9D9B92; --ink-4: #6B6962;
    --rule: #2E313A; --rule-2: #424651; --rule-keio: #2A2D38;
    --footer-navy: #0E1530;
  }
}

/* ----------------------------------------------------------------------
 * @layer base — typography baseline.
 * ---------------------------------------------------------------------- */
@layer base {
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--fs-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
}

/* ----------------------------------------------------------------------
 * @layer layout — page chrome (topbar, page-head, sections, footer).
 * ---------------------------------------------------------------------- */
@layer layout {
  /* Topbar */
  .topbar {
    border-bottom: 1px solid var(--rule);
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 50;
    view-transition-name: topbar;
  }
  .topbar-inner {
    max-width: var(--max-content);
    margin: 0 auto;
    padding: 14px var(--pad-page-x);
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: clamp(16px, 2vw, 40px);
  }
  .brand { display: flex; align-items: center; gap: 18px; min-width: 0; }
  .brand-logo {
    height: clamp(48px, 4vw + 32px, 72px);
    width: auto;
    display: block;
  }
  .brand-sub-jp {
    font-family: var(--serif-jp);
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.5;
    padding-left: 16px;
    border-left: 1px solid var(--rule);
    white-space: nowrap;
  }
  .brand-mark {
    width: 38px; height: 38px;
    border: 1.5px solid var(--ink);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--serif-en); font-weight: 600; font-size: 16px;
    background: repeating-linear-gradient(135deg, var(--bg-2) 0 6px, var(--bg) 6px 12px);
    color: var(--ink-3);
  }
  .brand-text { font-family: var(--serif-en); font-size: 17px; line-height: 1.1; }
  .brand-text .sub { display: block; font-family: var(--serif-jp); font-size: 11px; color: var(--ink-3); margin-top: 2px; }

  nav.primary {
    display: flex;
    justify-content: center;
    gap: clamp(20px, 2.5vw, 36px);
  }
  nav.primary a {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-2);
    padding: 6px 2px;
    border-bottom: 1.5px solid transparent;
    transition: border-bottom-color var(--transition);
  }
  nav.primary a.active { border-bottom-color: var(--ink); color: var(--ink); }
  nav.primary a:hover { border-bottom-color: var(--keio-yellow); }
  nav.primary a > [lang="en"] { display: inline; }
  nav.primary a .jp {
    display: block;
    font-family: var(--serif-jp);
    font-size: 10.5px;
    color: var(--ink-4);
    font-weight: 400;
    margin-top: 1px;
  }

  /* Mobile hamburger — JS-free <details> pattern */
  details.nav-mobile {
    display: none;
    position: relative;
  }
  details.nav-mobile > summary {
    list-style: none;
    cursor: pointer;
    padding: 6px 8px;
    border: 1px solid var(--rule-2);
    border-radius: var(--radius);
    color: var(--ink-2);
    background: transparent;
  }
  details.nav-mobile > summary::-webkit-details-marker { display: none; }
  details.nav-mobile > summary:hover { border-color: var(--ink); color: var(--ink); }
  .hamburger {
    display: inline-block;
    width: 18px;
    height: 12px;
    background:
      linear-gradient(to bottom, currentColor 0 1.5px, transparent 1.5px 5.5px,
      currentColor 5.5px 7px, transparent 7px 10.5px,
      currentColor 10.5px 12px);
    vertical-align: middle;
  }
  details.nav-mobile[open] .hamburger {
    background: linear-gradient(45deg, transparent 5.5px, currentColor 5.5px 7px, transparent 7px),
                linear-gradient(-45deg, transparent 5.5px, currentColor 5.5px 7px, transparent 7px);
  }
  details.nav-mobile > nav.primary-mobile {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: 0 12px 30px -10px rgb(0 0 0 / 0.15);
    padding: 12px;
    min-width: 220px;
    display: grid;
    gap: 4px;
    z-index: 60;
  }
  details.nav-mobile > nav.primary-mobile a {
    padding: 10px 12px;
    border-radius: var(--radius);
    color: var(--ink);
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
  }
  details.nav-mobile > nav.primary-mobile a:hover { background: var(--bg-2); }
  details.nav-mobile > nav.primary-mobile a.active { background: var(--ink); color: var(--bg); }
  details.nav-mobile > nav.primary-mobile a.active .jp { color: rgb(255 255 255 / 0.6); }
  details.nav-mobile > nav.primary-mobile .jp {
    font-family: var(--serif-jp);
    font-size: 11.5px;
    color: var(--ink-3);
  }

  .topbar-actions { display: flex; gap: 10px; align-items: center; }
  .btn-ghost {
    font-family: var(--mono);
    font-size: 11px;
    padding: 7px 12px;
    border: 1px solid var(--rule-2);
    color: var(--ink-2);
    letter-spacing: 0.05em;
    border-radius: var(--radius);
    transition: border-color var(--transition), color var(--transition);
  }
  .btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
  .btn-solid {
    font-size: 12px;
    font-weight: 500;
    padding: 8px 14px;
    border: 1px solid var(--footer-navy);
    background: var(--footer-navy);
    color: #FAFAF7;
    border-radius: var(--radius);
  }
  .btn-solid .jp { font-family: var(--serif-jp); font-size: 10px; color: rgb(250 250 247 / 0.7); margin-left: 6px; }

  /* Page header */
  .page-head {
    max-width: var(--max-content);
    margin: 0 auto;
    padding: clamp(36px, 4vw, 64px) var(--pad-page-x) clamp(28px, 3vw, 48px);
    border-bottom: 1px solid var(--rule);
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: clamp(16px, 2vw, 40px);
    align-items: end;
  }
  .page-kicker {
    font-family: var(--mono);
    font-size: var(--fs-mono);
    letter-spacing: 0.15em;
    color: var(--ink-3);
    text-transform: uppercase;
  }
  .page-title {
    margin: 0;
    font-family: var(--serif-en);
    font-weight: 400;
    font-size: var(--fs-h1);
    line-height: 1.05;
    letter-spacing: -0.02em;
  }
  .page-title em { font-style: italic; font-weight: 300; color: var(--ink-2); }
  .page-title .jp {
    display: block;
    font-family: var(--serif-jp);
    font-size: clamp(15px, 0.9rem + 0.5vw, 20px);
    color: var(--ink-2);
    margin-top: 14px;
    font-weight: 400;
  }

  /* Section */
  section.content {
    max-width: var(--max-content);
    margin: 0 auto;
    padding: var(--pad-section-y) var(--pad-page-x);
    border-bottom: 1px solid var(--rule);
  }
  .sec-grid {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: clamp(16px, 2vw, 40px);
  }
  .sec-kicker {
    font-family: var(--mono);
    font-size: var(--fs-mono);
    letter-spacing: 0.15em;
    color: var(--ink-3);
    text-transform: uppercase;
    padding-top: 4px;
  }
  .sec-kicker .n { color: var(--ink); margin-right: 8px; }
  .sec-body h2 {
    margin: 0 0 24px;
    font-family: var(--serif-en);
    font-weight: 400;
    font-size: var(--fs-h2);
    line-height: 1.15;
    letter-spacing: -0.01em;
  }
  .sec-body h2 .jp {
    display: block;
    font-family: var(--serif-jp);
    font-size: clamp(13px, 0.8rem + 0.3vw, 14px);
    color: var(--ink-2);
    margin-top: 6px;
  }
  .sec-body h3 {
    margin: 32px 0 10px;
    font-family: var(--serif-en);
    font-weight: 400;
    font-size: var(--fs-h3);
  }
  .sec-body h3 .jp {
    display: block;
    font-family: var(--serif-jp);
    font-size: 14px;
    color: var(--ink-3);
    margin-top: 2px;
  }
  .sec-body p {
    margin: 0 0 12px;
    font-family: var(--serif-en);
    font-size: var(--fs-lede);
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 64ch;
  }
  .sec-body p.jp { font-family: var(--serif-jp); font-size: var(--fs-body-jp); color: var(--ink-3); }
  .sec-body p.lede { font-size: var(--fs-lede); line-height: 1.5; color: var(--ink); max-width: 48ch; }
  .sec-body p.lede.jp { font-size: var(--fs-body-jp); color: var(--ink-2); }

  /* Footer */
  footer.foot {
    background: var(--footer-navy);
    color: #FAFAF7;
    padding: clamp(36px, 4vw, 56px) var(--pad-page-x) 32px;
    margin-top: 0;
    view-transition-name: footer;
  }
  .foot-inner {
    max-width: var(--max-content);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.6fr;
    gap: clamp(20px, 2vw, 40px);
    align-items: start;
  }
  .foot-logo { display: flex; align-items: flex-start; justify-content: flex-end; }
  .foot-logo img { max-width: 220px; width: 100%; height: auto; display: block; }
  .foot-brand { font-family: var(--serif-en); font-size: 22px; line-height: 1.2; }
  .foot-brand .jp { display: block; font-family: var(--serif-jp); font-size: 14px; color: rgb(250 250 247 / 0.6); margin-top: 4px; }
  .foot-brand p { font-size: 13px; color: rgb(250 250 247 / 0.65); line-height: 1.5; margin: 16px 0 0; max-width: 40ch; }
  .foot h5 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; color: rgb(250 250 247 / 0.5); text-transform: uppercase; margin: 0 0 14px; font-weight: 500; }
  .foot ul { list-style: none; margin: 0; padding: 0; }
  .foot li { padding: 5px 0; font-size: 13px; color: rgb(250 250 247 / 0.8); display: flex; justify-content: space-between; }
  .foot li .jp { font-family: var(--serif-jp); font-size: 11px; color: rgb(250 250 247 / 0.45); }
  .foot a { transition: color var(--transition); }
  .foot a:hover { color: var(--keio-yellow); }
  .foot-bottom {
    max-width: var(--max-content);
    margin: 48px auto 0;
    padding-top: 24px;
    border-top: 1px solid rgb(250 250 247 / 0.15);
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 11px;
    color: rgb(250 250 247 / 0.5);
  }
}

/* ----------------------------------------------------------------------
 * @layer components — chips, buttons, etc.
 * ---------------------------------------------------------------------- */
@layer components {
  .news-cat {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 8px;
    background: var(--bg-2);
    color: var(--ink-2);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    justify-self: start;
  }
  .news-cat.research    { background: oklch(0.95 0.02 255); color: oklch(0.35 0.08 255); border-color: oklch(0.85 0.03 255); }
  .news-cat.press       { background: oklch(0.95 0.025 60); color: oklch(0.38 0.08 60); border-color: oklch(0.85 0.03 60); }
  .news-cat.event       { background: oklch(0.95 0.02 145); color: oklch(0.38 0.06 145); border-color: oklch(0.85 0.03 145); }
  .news-cat.publication { background: oklch(0.95 0.02 300); color: oklch(0.38 0.08 300); border-color: oklch(0.85 0.03 300); }
  .news-cat.admission   { background: oklch(0.95 0.025 200); color: oklch(0.36 0.08 200); border-color: oklch(0.85 0.04 200); }
  .news-cat.news        { background: var(--footer-navy); color: #FAFAF7; border-color: var(--footer-navy); }

  /* Dark mode adjustments for chips */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .news-cat {
      background: oklch(0.22 0.01 260);
      color: var(--ink-2);
      border-color: var(--rule-2);
    }
    :root:not([data-theme="light"]) .news-cat.research    { background: oklch(0.25 0.04 255); color: oklch(0.85 0.06 255); border-color: oklch(0.35 0.05 255); }
    :root:not([data-theme="light"]) .news-cat.press       { background: oklch(0.26 0.04 60);  color: oklch(0.86 0.06 60);  border-color: oklch(0.35 0.05 60);  }
    :root:not([data-theme="light"]) .news-cat.event       { background: oklch(0.26 0.04 145); color: oklch(0.86 0.06 145); border-color: oklch(0.35 0.05 145); }
    :root:not([data-theme="light"]) .news-cat.publication { background: oklch(0.26 0.04 300); color: oklch(0.86 0.06 300); border-color: oklch(0.35 0.05 300); }
    :root:not([data-theme="light"]) .news-cat.admission   { background: oklch(0.26 0.04 200); color: oklch(0.86 0.06 200); border-color: oklch(0.35 0.05 200); }
  }

  /* Container queries — used by .tracks / .related-grid / news rows */
  .tracks { container-type: inline-size; }
  .related-grid { container-type: inline-size; }
  .news-list { container-type: inline-size; }
}

/* ----------------------------------------------------------------------
 * @layer utilities
 * ---------------------------------------------------------------------- */
@layer utilities {
  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  /* Used by news.js search to hide rows without affecting other filters */
  [data-search-hide] { display: none !important; }

  /* For long news lists — skip rendering off-screen rows */
  .cv-auto { content-visibility: auto; contain-intrinsic-size: auto 80px; }
}

/* ============================================================================
 * Responsive — collapse sidebar grids, swap nav for hamburger.
 * ========================================================================= */
@layer layout {
  @media (max-width: 1100px) {
    .topbar-inner { grid-template-columns: 1fr auto auto; }
    nav.primary { display: none; }
    details.nav-mobile { display: block; }
    .brand-sub-jp { display: none; }
  }
  @media (max-width: 1000px) {
    .page-head, .sec-grid, .foot-inner { grid-template-columns: 1fr; gap: 16px; }
    .foot-logo { justify-content: flex-start; margin-top: 12px; }
    .foot-logo img { max-width: 220px; }
  }
  @media (max-width: 600px) {
    body { line-height: 1.6; }
    .topbar-inner { padding: 10px var(--pad-page-x); gap: 12px; }
    .btn-ghost { padding: 6px 10px; font-size: 10px; }
    .btn-solid { padding: 7px 12px; font-size: 11px; }
    .btn-solid .jp { display: none; }
    .foot-inner { gap: 28px; grid-template-columns: 1fr; }
    .foot-logo img { max-width: 200px; }
    .foot-brand { font-size: 18px; }
    .foot-bottom {
      flex-direction: column; gap: 6px; align-items: flex-start;
      margin-top: 32px; padding-top: 20px;
    }
  }
}

/* ============================================================================
 * Motion — reduced-motion takes precedence (no CSS layer; max-specificity).
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
.reduced-motion *,
.reduced-motion *::before,
.reduced-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

/* ============================================================================
 * View Transitions — same-origin nav crossfade with subtle slide.
 * ========================================================================= */
@view-transition { navigation: auto; }
::view-transition-old(root) {
  animation: 180ms cubic-bezier(0.4, 0, 0.2, 1) both fade-out;
}
::view-transition-new(root) {
  animation: 220ms cubic-bezier(0.4, 0, 0.2, 1) both fade-in;
}
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in  { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* ============================================================================
 * <noscript> fallback nav — visible only when JavaScript is disabled or the
 * Web Components registry is not yet populated. Keeps search engines / legacy
 * crawlers / accessibility tools from seeing a blank shell.
 * ========================================================================= */
.ns-nav {
  padding: 12px 24px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.05em;
}
.ns-nav a {
  color: var(--ink-2);
  text-decoration: none;
  padding: 0 4px;
}
.ns-nav a:hover { color: var(--ink); text-decoration: underline; }