/* =============================================================
 * 東京女子大学 理論物理研究室 公式サイト
 * Single stylesheet, organized in @layer for cascade control.
 * Dark mode via prefers-color-scheme. Mobile-first responsive.
 * ============================================================= */

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

/* ---------------------------------------------------------------
 * RESET
 * --------------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
  body { min-height: 100vh; line-height: 1.7; }
  img, picture, svg, video { display: block; max-width: 100%; height: auto; }
  h1, h2, h3, h4, h5, h6 { line-height: 1.2; text-wrap: balance; }
  p { text-wrap: pretty; }
  button, input, textarea, select { font: inherit; color: inherit; }
  a { color: inherit; }
}

/* ---------------------------------------------------------------
 * DESIGN TOKENS
 * --------------------------------------------------------------- */
@layer tokens {
  :root {
    /* Fluid type scale (16–19 px base) */
    --fs-xs:   clamp(0.72rem, 0.68rem + 0.2vw, 0.80rem);
    --fs-sm:   clamp(0.83rem, 0.80rem + 0.2vw, 0.92rem);
    --fs-base: clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
    --fs-md:   clamp(1.13rem, 1.05rem + 0.4vw, 1.30rem);
    --fs-lg:   clamp(1.33rem, 1.20rem + 0.6vw, 1.60rem);
    --fs-xl:   clamp(1.60rem, 1.40rem + 1.0vw, 2.10rem);
    --fs-2xl:  clamp(2.00rem, 1.70rem + 1.5vw, 3.00rem);
    --fs-3xl:  clamp(2.60rem, 2.10rem + 2.5vw, 4.20rem);

    /* Spacing (fluid, in rem) */
    --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
    --space-4: 1rem;   --space-5: 1.5rem; --space-6: 2rem;
    --space-7: 3rem;   --space-8: 4rem;   --space-9: 6rem;

    /* Layout */
    --container: min(72rem, 100% - 2rem);
    --container-narrow: min(42rem, 100% - 2rem);
    --radius: 4px;
    --radius-lg: 10px;

    /* Fonts */
    --font-serif: 'Merriweather', 'Noto Serif JP', 'Hiragino Mincho ProN',
                  '游明朝', 'Yu Mincho', serif;
    --font-sans: system-ui, -apple-system, 'Helvetica Neue',
                 'Hiragino Sans', 'Yu Gothic', sans-serif;
    --font-mono: 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace;

    /* Motion */
    --easing: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-short: 150ms;
    --dur-mid: 250ms;
  }

  /* Light theme (default) */
  :root {
    --color-bg: #fbf9f3;
    --color-bg-alt: #f2ede0;
    --color-surface: #ffffff;
    --color-text: #1d1c18;
    --color-text-muted: #6a6557;
    --color-accent: #8a6a3a;
    --color-accent-strong: #6d5129;
    --color-link: #2a5a90;
    --color-link-hover: #8a6a3a;
    --color-rule: #e1d9c3;
    --color-shadow: 24 20 10;
  }

  /* Dark theme */
  @media (prefers-color-scheme: dark) {
    :root {
      --color-bg: #141310;
      --color-bg-alt: #1d1b16;
      --color-surface: #242118;
      --color-text: #ece6d4;
      --color-text-muted: #a8a08b;
      --color-accent: #d4a969;
      --color-accent-strong: #e9c489;
      --color-link: #85b4e8;
      --color-link-hover: #d4a969;
      --color-rule: #3a362b;
      --color-shadow: 0 0 0;
    }
  }
}

/* ---------------------------------------------------------------
 * BASE
 * --------------------------------------------------------------- */
@layer base {
  html { color-scheme: light dark; }

  body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    color: var(--color-text);
    background: var(--color-bg);
    /* subtle paper texture (gradient only, no image) */
    background-image:
      radial-gradient(at top left, rgb(from var(--color-accent) r g b / 0.05), transparent 40%),
      radial-gradient(at bottom right, rgb(from var(--color-accent) r g b / 0.04), transparent 50%);
    background-attachment: fixed;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 700;
    color: var(--color-accent-strong);
    letter-spacing: 0.01em;
  }
  h1 { font-size: var(--fs-3xl); font-weight: 900; }
  h2 { font-size: var(--fs-xl); margin-top: var(--space-7); }
  h3 { font-size: var(--fs-lg); margin-top: var(--space-5); }
  h4 { font-size: var(--fs-md); margin-top: var(--space-4); }

  p + p { margin-top: var(--space-3); }

  a {
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
    text-decoration-color: rgb(from var(--color-link) r g b / 0.4);
    transition: color var(--dur-short), text-decoration-color var(--dur-short);
  }
  a:hover {
    color: var(--color-link-hover);
    text-decoration-color: currentColor;
    text-decoration-thickness: 2px;
  }

  ::selection { background: var(--color-accent); color: var(--color-bg); }

  hr {
    border: none;
    border-top: 1px solid var(--color-rule);
    margin: var(--space-6) 0;
  }
  code {
    font-family: var(--font-mono);
    font-size: 0.92em;
    padding: 0.1em 0.3em;
    background: var(--color-bg-alt);
    border-radius: 3px;
  }

  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ---------------------------------------------------------------
 * LAYOUT
 * --------------------------------------------------------------- */
@layer layout {
  .container { width: var(--container); margin-inline: auto; }
  .container-narrow { width: var(--container-narrow); margin-inline: auto; }

  /* Site header */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(12px) saturate(1.1);
    background: rgb(from var(--color-bg) r g b / 0.85);
    border-bottom: 1px solid var(--color-rule);
  }
  .site-header__inner {
    width: var(--container);
    margin-inline: auto;
    padding-block: var(--space-3);
    display: flex;
    gap: var(--space-5);
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .brand {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--color-text);
    line-height: 1.2;
  }
  .brand:hover { text-decoration: none; color: var(--color-accent); }
  .brand__en {
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }
  .brand__ja {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: var(--fs-md);
  }
  .nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-size: var(--fs-sm);
  }
  .nav a {
    color: var(--color-text);
    text-decoration: none;
    padding-block: 0.4em;
    border-bottom: 2px solid transparent;
    transition: border-color var(--dur-short), color var(--dur-short);
  }
  .nav a:hover, .nav a[aria-current="page"] {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
  }
  .nav__lang {
    margin-inline-start: var(--space-2);
    padding-inline: 0.6em !important;
    border: 1px solid var(--color-border, #ccc);
    border-radius: 999px;
    font-size: 0.85em;
  }
  .nav__lang:hover {
    background: var(--color-accent);
    color: #fff !important;
    border-color: var(--color-accent);
  }

  /* Hero (reused on all pages, size varies) */
  .hero {
    position: relative;
    min-height: 320px;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
  }
  .hero--lg { min-height: min(80vh, 700px); }
  .hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center 65%;
    filter: brightness(0.85);
  }
  .hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
      rgb(from var(--color-bg) r g b / 0.0) 0%,
      rgb(from var(--color-bg) r g b / 0.05) 60%,
      rgb(from var(--color-bg) r g b / 0.4) 100%);
  }
  .hero__content {
    text-align: center;
    padding: var(--space-6) var(--space-4);
    color: #fff;
    text-shadow: 0 2px 16px rgb(0 0 0 / 0.4);
  }
  .hero__title {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 900;
    font-size: var(--fs-3xl);
    color: #fff;
    margin: 0;
  }
  .hero__subtitle {
    margin-top: var(--space-3);
    font-size: var(--fs-md);
    font-style: italic;
    color: rgb(255 255 255 / 0.92);
  }
  .hero__cta {
    margin-top: var(--space-5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
  }
  .hero__cta .btn {
    background: rgb(255 255 255 / 0.15);
    backdrop-filter: blur(8px);
    color: #fff;
    border: 1px solid rgb(255 255 255 / 0.3);
    text-shadow: none;
  }
  .hero__cta .btn:hover {
    background: rgb(255 255 255 / 0.25);
    border-color: rgb(255 255 255 / 0.5);
  }

  /* Main content container */
  main { padding-block: var(--space-7) var(--space-8); }
  main > .container > * + * { margin-top: var(--space-5); }
  main > .container > h2:first-child { margin-top: 0; }

  /* Two-column split (text/media) */
  .split {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr;
  }
  @media (min-width: 48rem) {
    .split { grid-template-columns: 1fr 1fr; }
  }

  /* Section divider */
  .section + .section { margin-top: var(--space-7); }

  /* Footer */
  .site-footer {
    margin-top: var(--space-9);
    padding-block: var(--space-6) var(--space-7);
    border-top: 1px solid var(--color-rule);
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
  }
  .site-footer__inner {
    width: var(--container);
    margin-inline: auto;
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr;
  }
  @media (min-width: 40rem) {
    .site-footer__inner { grid-template-columns: 2fr 1fr 1fr; }
  }
  .site-footer h3 {
    font-size: var(--fs-sm);
    font-style: normal;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: var(--space-3);
    color: var(--color-text);
  }
  .site-footer address { font-style: normal; line-height: 1.7; }
  .site-footer ul { list-style: none; padding: 0; }
  .site-footer li { margin-bottom: var(--space-2); }
  .site-footer a { color: var(--color-text-muted); }
  .site-footer a:hover { color: var(--color-accent); }
}

/* ---------------------------------------------------------------
 * COMPONENTS
 * --------------------------------------------------------------- */
@layer components {

  /* Card (seminar / news / research) */
  .card {
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    transition: border-color var(--dur-short), box-shadow var(--dur-short), transform var(--dur-short);
  }
  .card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 6px 24px -12px rgb(from var(--color-shadow) r g b / 0.35);
  }

  /* Seminar card (list item) */
  .seminar-card {
    display: block;
    padding: var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--color-rule);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: transform var(--dur-mid) var(--easing),
                box-shadow var(--dur-mid) var(--easing),
                background-color var(--dur-mid) var(--easing);
  }
  .seminar-card:hover {
    text-decoration: none;
    transform: translateY(-2px);
    background: var(--color-bg-alt);
    box-shadow: 0 4px 16px rgb(var(--color-shadow) / 0.08);
  }
  .seminar-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
  }
  .seminar-card__date { color: var(--color-accent); font-weight: 700; }
  .seminar-card__title {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-2);
  }
  .seminar-card__speaker {
    color: var(--color-text);
    font-size: var(--fs-sm);
  }
  .seminar-card__speaker strong { color: var(--color-accent-strong); }

  /* Seminar detail (individual seminar page) */
  .seminar-detail__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    padding: var(--space-4);
    background: var(--color-bg-alt);
    border-left: 3px solid var(--color-accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    margin-block: var(--space-4);
    font-size: var(--fs-sm);
  }
  .seminar-detail__meta dt {
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .seminar-detail__meta dd { margin: 0; font-weight: 600; }

  .seminar-detail__abstract {
    max-width: 44rem;
    line-height: 1.9;
  }
  .seminar-detail__abstract p + p { margin-top: 1em; }

  .seminar-posters {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-block: var(--space-5);
  }
  .seminar-posters img {
    max-width: 280px;
    border-radius: var(--radius);
    border: 1px solid var(--color-rule);
  }

  .pdf-embed {
    width: 100%;
    aspect-ratio: 8.5 / 11;
    max-height: 90vh;
    border: 1px solid var(--color-rule);
    border-radius: var(--radius);
    margin-block: var(--space-4);
    background: var(--color-bg-alt);
  }

  /* Member cards */
  .member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-5);
    margin-block: var(--space-5);
  }
  .member {
    text-align: center;
  }
  .member__photo {
    aspect-ratio: 1;
    object-fit: cover;
    width: 100%;
    border-radius: var(--radius);
    background: var(--color-bg-alt);
    transition: transform var(--dur-mid);
  }
  .member:hover .member__photo { transform: scale(1.02); }
  .member__name {
    margin-top: var(--space-2);
    font-weight: 700;
    font-size: var(--fs-base);
  }
  .member__name a {
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
  }
  .member__name a:hover { color: var(--color-accent); }
  .member__role {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
  }
  .member__email {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    word-break: break-all;
    margin-top: var(--space-1);
  }
  .member__link {
    font-size: var(--fs-xs);
    margin-top: var(--space-1);
  }

  /* Emeritus */
  .emeritus-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-3);
    font-size: var(--fs-sm);
  }
  .emeritus-list li {
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius);
  }
  .emeritus-list .period {
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    margin-left: 0.4em;
  }

  /* Graduation scenes strip */
  .grad-scenes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-2);
    margin-block: var(--space-4);
  }
  .grad-scenes img {
    aspect-ratio: 4/5;
    object-fit: cover;
    border-radius: var(--radius);
    filter: sepia(0.2);
  }

  /* News feed */
  .news-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .news-list li {
    padding: var(--space-4);
    border-left: 3px solid var(--color-accent);
    background: var(--color-surface);
    border-radius: 0 var(--radius) var(--radius) 0;
  }
  .news-list__meta {
    display: flex;
    gap: var(--space-3);
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-1);
  }

  /* Papers list */
  .papers-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .papers-list li {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-rule);
  }
  .paper-year {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    min-width: 3.5em;
  }

  /* Button */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.6em 1.2em;
    background: var(--color-accent);
    color: var(--color-bg);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 700;
    font-size: var(--fs-sm);
    transition: background var(--dur-short), transform var(--dur-short);
  }
  .btn:hover {
    background: var(--color-accent-strong);
    border-color: var(--color-accent-strong);
    color: var(--color-bg);
    text-decoration: none;
    transform: translateY(-1px);
  }
  .btn--ghost {
    background: transparent;
    color: var(--color-accent);
  }
  .btn--ghost:hover {
    background: rgb(from var(--color-accent) r g b / 0.1);
    color: var(--color-accent-strong);
  }

  /* Year filter pills for seminars page */
  .filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block: var(--space-4);
  }
  .filter-bar__search {
    flex: 1 1 240px;
    padding: 0.55em 0.9em;
    font-size: var(--fs-sm);
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius);
    color: var(--color-text);
  }
  .filter-bar__search:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: -1px;
    border-color: transparent;
  }
  .filter-pill {
    padding: 0.45em 0.9em;
    font-size: var(--fs-xs);
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: 999px;
    cursor: pointer;
    color: var(--color-text);
    transition: all var(--dur-short);
  }
  .filter-pill[aria-pressed="true"] {
    background: var(--color-accent);
    color: var(--color-bg);
    border-color: var(--color-accent);
  }
  .filter-pill:hover { border-color: var(--color-accent); }

  /* Pagination / section heading */
  .section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    margin-block: var(--space-6) var(--space-3);
  }
  .section-head__link {
    font-size: var(--fs-sm);
    font-style: italic;
  }

  /* External link marker */
  a[href^="http"]:not([href*="twcu-phys"]):not(.btn):not(.nav a):not(.brand):not(.member__name a)::after {
    content: '↗';
    display: inline-block;
    margin-left: 0.15em;
    font-size: 0.8em;
    opacity: 0.6;
  }

  /* Mobile hamburger menu */
  .nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
    color: var(--color-text);
  }
  .nav-toggle svg { width: 24px; height: 24px; }

  @media (max-width: 40rem) {
    .nav-toggle { display: block; }
    .nav {
      display: none;
      flex-direction: column;
      width: 100%;
      gap: 0;
      padding-top: var(--space-3);
      border-top: 1px solid var(--color-rule);
    }
    .nav.is-open { display: flex; }
    .nav a {
      padding: var(--space-3) 0;
      border-bottom: 1px solid var(--color-rule);
      font-size: var(--fs-base);
    }
    .nav a:last-child { border-bottom: none; }
    .site-header__inner { padding-block: var(--space-2); }
  }
}

/* ---------------------------------------------------------------
 * UTILITIES
 * --------------------------------------------------------------- */
@layer utilities {
  .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); border: 0;
  }
  .muted { color: var(--color-text-muted); }
  .center { text-align: center; }
  .mt-0 { margin-top: 0; }
  .stack > * + * { margin-top: var(--space-3); }
  .stack-lg > * + * { margin-top: var(--space-5); }
  .is-hidden { display: none !important; }
}