/* =========================================================================
   Class 3 — Interdisciplinary Research Fundamentals II of STM
   Distribution microsite — design system

   Concept: "technical journal" — the cover and table of contents of a
   well-set engineering lecture-note series, not a generic web dashboard.
   - warm paper ground, flat surfaces, hairline + heavy editorial rules
   - IBM Plex system (Serif display / Sans text / Mono meta) with
     IBM Plex Sans JP for Japanese — one coherent bilingual voice
   - a single deep-teal accent used sparingly; rust red reserved for PDF
   - ruled index rows instead of floating cards

   Accessibility: all text tokens meet WCAG 2.1 AA on their grounds
   (ink 14.9:1, ink-soft 6.9:1, ink-faint 5.3:1, accent 6.9:1, rust 6.3:1,
   white-on-accent 7.6:1, warn-ink-on-warn-bg 6.6:1); visible focus rings;
   reduced-motion respected; type/affordances never rely on colour alone.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans+JP:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Serif:wght@500;600;700&display=swap');

:root {
  /* surfaces */
  --paper:     #f5f3ee;
  --surface:   #fcfbf8;
  --tint:      #eceade;   /* hover wash */

  /* ink — contrast vs paper noted */
  --ink:       #1c1f21;   /* 14.9:1 */
  --ink-soft:  #4d545a;   /*  6.9:1 */
  --ink-faint: #5f666c;   /*  5.3:1 */

  /* brand */
  --accent:    #0e5e54;   /* deep teal — 6.9:1 on paper */
  --accent-dk: #0a4a42;   /* 9.1:1 */
  --rust:      #9a3b1e;   /* PDF marker — 6.3:1 */

  /* rules */
  --line:      #d9d4c8;   /* hairline */
  --line-mid:  #b9b3a4;
  --rule:      #1c1f21;   /* heavy editorial rule */

  /* placeholder warning */
  --warn-ink:  #7a4a00;   /* 6.6:1 on warn-bg */
  --warn-bg:   #faf0dc;
  --warn-line: #e4c990;

  /* type */
  --font:    "IBM Plex Sans", "IBM Plex Sans JP", "Hiragino Kaku Gothic ProN",
             "Yu Gothic", "Meiryo", system-ui, sans-serif;
  --display: "IBM Plex Serif", "Iowan Old Style", Georgia,
             "IBM Plex Sans JP", "Yu Mincho", serif;
  --mono:    "IBM Plex Mono", "Consolas", "SF Mono", ui-monospace, monospace;

  /* shape */
  --radius:    4px;
  --maxw: 1120px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-size: 16px;
  font-feature-settings: "ss01" off;
}

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

a { color: var(--accent); text-decoration-color: var(--line-mid); }
a:hover { color: var(--accent-dk); }

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

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.mono { font-family: var(--mono); }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff;
  padding: 10px 18px; font-size: 14px; z-index: 100;
  text-decoration: none;
}
.skip-link:focus { left: 0; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* =========================================================================
   MASTHEAD
   ========================================================================= */

.topbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  padding-top: 18px; padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.topbar .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.topbar .brand::before {
  content: ""; width: 9px; height: 9px; background: var(--accent);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 28px 64px;
  align-items: center;
  padding-top: 64px; padding-bottom: 56px;
}

.kicker {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 22px;
  display: flex; align-items: center; gap: 14px;
}
.kicker::before { content: ""; width: 34px; height: 1px; background: var(--accent); }

.title-en {
  font-family: var(--display);
  font-size: clamp(32px, 4.8vw, 54px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 18px;
  max-width: 18ch;
  text-wrap: balance;
}
.title-jp {
  font-size: clamp(14.5px, 2vw, 17px);
  color: var(--ink-soft);
  font-weight: 500;
  letter-spacing: .04em;
  margin: 0;
}

/* ---- hero figure: framed plate with registration marks ---- */
.hero-art {
  margin: 0;
  position: relative;
  border: 1px solid var(--line-mid);
  background: var(--paper);
  padding: 14px;
}
.hero-art::before, .hero-art::after {
  /* registration crosses */
  content: "+";
  position: absolute;
  font-family: var(--mono); font-size: 13px; line-height: 1;
  color: var(--ink-faint);
}
.hero-art::before { top: -7px; left: -5px; }
.hero-art::after  { bottom: -6px; right: -5px; }
.hero-art img {
  display: block; width: 100%; height: auto;
  mix-blend-mode: multiply;   /* line art sits on the paper, not in a box */
}
.hero-art figcaption {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---- spec strip ---- */
.spec {
  border-top: 1px solid var(--line);
}
.spec dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 32px;
  margin: 0; padding: 18px 0 22px;
}
.spec .spec-item { min-width: 0; }
.spec dt {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 3px;
}
.spec dd { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.45; }

/* =========================================================================
   MAIN — ruled lecture index
   ========================================================================= */
main { padding: 64px 0 96px; }

.section-head {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  margin: 0 0 0;
  padding-bottom: 12px;
}
.section-head h2 {
  font-family: var(--mono);
  font-size: 12px; margin: 0; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink);
}
.section-head .hint {
  margin-left: auto;
  font-family: var(--mono); font-size: 11px; color: var(--ink-faint);
  letter-spacing: .08em; text-transform: uppercase;
}

.lectures {
  list-style: none;
  margin: 0; padding: 0;
  border-top: 3px solid var(--rule);
}

.lec-row {
  display: grid;
  grid-template-columns: 96px minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 8px 40px;
  padding: 30px 0 34px;
  border-bottom: 1px solid var(--line);
  transition: background-color .15s ease;
}
.lec-row:hover { background:
  linear-gradient(90deg, transparent, var(--surface) 6%, var(--surface) 94%, transparent); }

.lr-no {
  font-family: var(--display);
  font-size: 44px; font-weight: 500; line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.lr-no::after { content: "."; color: var(--accent); }

.lr-head { min-width: 0; }
.lr-title {
  font-family: var(--display);
  font-size: 25px; font-weight: 600; letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0 0 2px;
}
.lr-jp { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 12px; letter-spacing: .03em; }

.lr-ph {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--warn-ink); background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  padding: 3px 9px; border-radius: 999px; font-weight: 600;
}

/* ---- material links ---- */
.lr-materials {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 8px;
  align-content: start;
}

.mat {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.mat:hover { color: var(--ink); border-color: var(--line-mid); background: #fff; }
.mat:hover .m-title { text-decoration: underline; text-underline-offset: 3px; }
.mat:hover .m-arrow { color: var(--ink); }

.mat .tag {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 10px; font-weight: 600; letter-spacing: .08em;
  padding: 4px 8px; border-radius: 3px;
  min-width: 44px; text-align: center;
}
.mat.pdf .tag { color: var(--rust); border: 1px solid currentColor; background: transparent; }
.mat.app .tag { color: #fff; background: var(--accent); border: 1px solid var(--accent); }

.mat .m-text { min-width: 0; flex: 1; }
.mat .m-title { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.mat .m-sub {
  display: block;
  font-family: var(--mono);
  font-size: 11px; color: var(--ink-faint); letter-spacing: .03em;
}
.mat .m-arrow {
  color: var(--ink-faint);
  font-family: var(--mono); font-size: 15px;
  flex: 0 0 auto;
}

.material-empty {
  font-size: 12.5px; color: var(--ink-faint);
  border: 1px dashed var(--line-mid); border-radius: var(--radius);
  padding: 13px; text-align: center;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.ai-colophon {
  border-top: 1px solid var(--line);
  padding: 22px 0;
  font-size: 12.5px; color: var(--ink-faint);
  font-style: italic;
}
.ai-colophon p { margin: 0; max-width: 64ch; }
.ai-colophon p + p { margin-top: 6px; }

.site-footer {
  border-top: 1px solid var(--line);
  padding: 26px 0 34px;
  font-size: 12.5px; color: var(--ink-faint);
}
.site-footer .wrap {
  display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap;
}
.site-footer .mono { font-size: 11.5px; letter-spacing: .06em; }

/* shared placeholder note */
.ph-note {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  color: var(--warn-ink);
  border-radius: var(--radius);
  padding: 12px 16px; font-size: 13px;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 880px) {
  .hero-grid {
    grid-template-columns: 1fr;
    padding-top: 44px; padding-bottom: 44px;
  }
  .hero-art { max-width: 460px; }
  .spec dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }

  .lec-row {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 4px 18px;
    padding: 24px 0 26px;
  }
  .lr-no { font-size: 30px; }
  .lr-materials { grid-column: 1 / -1; margin-top: 14px; }
}