/* ==========================================================================
   Mehdi Hosseinzadeh — personal academic site
   Design language: quiet, print-adjacent typography over a soft "liquid glass"
   surface system. Restrained palette: cool greys, ink navy, one steel-blue accent.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --ink:           #0e1b2b;
  --ink-soft:      #33455c;
  --muted:         #63748a;
  --muted-light:   #8798ac;

  --accent:        #235d8c;
  --accent-deep:   #163f61;
  --accent-soft:   #e5eef6;

  --bg:            #eef1f6;
  --bg-tint:       #e7ecf3;

  --glass-fill:    rgba(255, 255, 255, 0.62);
  --glass-fill-lo: rgba(255, 255, 255, 0.44);
  --glass-edge:    rgba(255, 255, 255, 0.75);
  --glass-line:    rgba(14, 27, 43, 0.09);

  --shadow-sm: 0 1px 2px rgba(14, 27, 43, 0.05), 0 4px 12px rgba(14, 27, 43, 0.05);
  --shadow-md: 0 2px 4px rgba(14, 27, 43, 0.05), 0 12px 32px rgba(14, 27, 43, 0.08);
  --shadow-lg: 0 4px 8px rgba(14, 27, 43, 0.06), 0 24px 60px rgba(14, 27, 43, 0.12);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;

  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1080px;
  --nav-h: 66px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 18px); }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); font-weight: 500; line-height: 1.24; margin: 0; letter-spacing: -0.012em; }
p { margin: 0 0 1.05em; }
ul, ol { margin: 0; padding: 0; }
svg { width: 1em; height: 1em; fill: currentColor; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

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

/* ---------- Ambient background: the light the glass refracts ---------- */
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.blob { position: absolute; display: block; border-radius: 50%; filter: blur(90px); opacity: 0.5; }
.blob-a { width: 620px; height: 620px; top: -180px; left: -140px;
          background: radial-gradient(circle, #9db9d6 0%, rgba(157,185,214,0) 70%); }
.blob-b { width: 720px; height: 720px; top: 48%; right: -260px;
          background: radial-gradient(circle, #a8c4c9 0%, rgba(168,196,201,0) 70%); }
.blob-c { width: 560px; height: 560px; bottom: -160px; left: 22%;
          background: radial-gradient(circle, #b3bfd8 0%, rgba(179,191,216,0) 70%); }

/* ---------- The glass primitive ---------- */
.glass {
  position: relative;
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
/* Specular top edge — the detail that makes it read as glass rather than as a panel */
.glass::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, var(--glass-edge), rgba(255,255,255,0) 42%, rgba(255,255,255,0) 62%, rgba(255,255,255,0.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.section { padding: 76px 0; position: relative; }
.section-tint { background: linear-gradient(180deg, rgba(226,233,242,0) 0%, rgba(224,232,242,0.62) 12%, rgba(224,232,242,0.62) 88%, rgba(226,233,242,0) 100%); }

.section-title {
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.05rem);
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 10px;
}
.section-title .rule { width: 30px; height: 2px; background: var(--accent); border-radius: 2px; flex: none; }
.section-note { color: var(--muted); max-width: 68ch; margin: 0 0 30px; font-size: 0.96rem; }
.section-title + .about-grid, .section-title + .pubs, .section-title + .timeline,
.section-title + .news, .section-title + .teach-grid, .section-title + .robocup,
.section-title + .rec-grid { margin-top: 30px; }

.sub-title {
  font-size: 1.12rem; font-family: var(--sans); font-weight: 600; color: var(--ink);
  letter-spacing: 0.02em; text-transform: uppercase; font-size: 0.82rem;
  margin: 34px 0 16px;
}
.sub-title-standalone { margin-top: 52px; }

/* ---------- Navigation ---------- */
.nav-wrap { position: sticky; top: 0; z-index: 100; padding: 12px 24px 0; }
.nav {
  max-width: var(--wrap); margin: 0 auto;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 18px;
  padding: 0 10px 0 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow: var(--shadow-md);
}
.nav-brand { display: flex; align-items: center; gap: 11px; color: var(--ink); flex: none; }
.nav-brand:hover { text-decoration: none; }
.nav-mark {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 10px;
  background: linear-gradient(140deg, var(--accent), var(--accent-deep));
  color: #fff; font-family: var(--serif); font-size: 0.85rem; letter-spacing: 0.04em;
  box-shadow: 0 2px 8px rgba(35, 93, 140, 0.35);
}
.nav-name { font-family: var(--serif); font-size: 1.02rem; color: var(--ink); white-space: nowrap; }

.nav-links { list-style: none; display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-links a {
  display: block; padding: 8px 12px; border-radius: 999px;
  font-size: 0.875rem; font-weight: 500; color: var(--muted); white-space: nowrap;
  transition: color 0.16s ease, background-color 0.16s ease;
}
.nav-links a:hover { color: var(--ink); background: rgba(14, 27, 43, 0.05); text-decoration: none; }
.nav-links a.active { color: var(--accent-deep); background: var(--accent-soft); }
.nav-links .nav-cta {
  margin-left: 6px; color: #fff;
  background: linear-gradient(140deg, var(--accent), var(--accent-deep));
  box-shadow: 0 2px 8px rgba(35, 93, 140, 0.3);
}
.nav-links .nav-cta:hover { color: #fff; background: var(--accent-deep); }

.nav-toggle { display: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  margin-top: calc(-1 * var(--nav-h) - 12px);
  min-height: min(94vh, 820px);
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.hero-media {
  position: absolute; inset: 0;
  /* Gradient is the base layer, so the hero still reads well if the photo is absent.
     The tint is kept light on the left, where the subject is, and deepens to the
     right so the card has something dark to sit against. */
  background-color: #16283c;
  background-image:
    linear-gradient(100deg, rgba(10, 22, 38, 0.16) 0%, rgba(10, 22, 38, 0.24) 40%, rgba(10, 22, 38, 0.44) 100%),
    url("../assets/img/hero.jpg"),
    radial-gradient(120% 100% at 78% 34%, #40699a 0%, #24425f 42%, #13253a 100%);
  background-size: cover, cover, cover;
  background-position: center, center center, center;
  background-repeat: no-repeat;
  transform: scale(1.02);
}
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 22, 36, 0.38) 0%, rgba(10, 22, 36, 0.04) 26%, rgba(10, 22, 36, 0.14) 70%, rgba(238, 241, 246, 0.92) 100%);
}
.hero-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--wrap); margin: 0 auto;
  padding: 0 24px 70px;
  /* Card sits to the right so it covers the robot's body rather than the subject's
     face, and the subject's eyeline leads into it. */
  display: flex; justify-content: flex-end;
}
.hero-card {
  max-width: 660px;
  padding: 34px 38px 32px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.80);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
  box-shadow: var(--shadow-lg);
}
.hero-eyebrow {
  font-size: 0.73rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 14px;
}
.hero-title {
  font-size: clamp(2.2rem, 1.5rem + 3.1vw, 3.35rem);
  letter-spacing: -0.025em; margin-bottom: 8px;
}
.hero-role { font-family: var(--serif); font-size: 1.22rem; color: var(--ink); margin: 0 0 3px; }
.hero-affil { font-size: 0.95rem; color: var(--muted); margin: 0 0 18px; }
.hero-blurb { font-size: 1.02rem; color: var(--ink-soft); margin: 0 0 24px; max-width: 56ch; }

.hero-links { display: flex; flex-wrap: wrap; gap: 9px; }

/* ---------- Buttons & pills ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  font-size: 0.875rem; font-weight: 550;
  color: var(--ink); background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--glass-line);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}
.btn:hover { text-decoration: none; color: var(--accent-deep); background: #fff; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn svg { width: 1.02em; height: 1.02em; opacity: 0.8; }
.btn-primary {
  color: #fff; background: linear-gradient(140deg, var(--accent), var(--accent-deep));
  border-color: transparent; box-shadow: 0 2px 10px rgba(35, 93, 140, 0.3);
}
.btn-primary:hover { color: #fff; background: var(--accent-deep); }

.pill {
  display: inline-flex; align-items: center;
  padding: 5px 13px; border-radius: 999px;
  font-size: 0.79rem; font-weight: 550; letter-spacing: 0.01em;
  color: var(--accent-deep); background: var(--accent-soft);
  border: 1px solid rgba(35, 93, 140, 0.14);
  transition: background-color 0.16s ease, color 0.16s ease;
}
.pill:hover { text-decoration: none; color: #fff; background: var(--accent); border-color: transparent; }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: 258px 1fr; gap: 42px; align-items: start; }
.about-aside { position: sticky; top: calc(var(--nav-h) + 26px); display: grid; gap: 18px; }

.portrait { padding: 9px; border-radius: var(--r-lg); overflow: hidden; }
.portrait img { border-radius: calc(var(--r-lg) - 9px); aspect-ratio: 1; object-fit: cover; }

.fact-card { padding: 20px 22px; }
.facts { margin: 0; display: grid; gap: 13px; }
.facts div { display: grid; gap: 1px; }
.facts dt { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted-light); }
.facts dd { margin: 0; font-size: 0.885rem; color: var(--ink); line-height: 1.45; }

.about-body .lead { font-size: 1.1rem; color: var(--ink); line-height: 1.62; }
.about-body p { max-width: 72ch; }

.streams { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.stream { padding: 22px 22px 18px; }
.stream-icon {
  display: grid; place-items: center;
  width: 38px; height: 38px; margin-bottom: 14px;
  border-radius: 11px; color: var(--accent);
  background: var(--accent-soft);
}
.stream-icon svg { width: 20px; height: 20px; }
.stream h4 { font-size: 1.03rem; margin-bottom: 7px; }
.stream p { font-size: 0.88rem; color: var(--muted); margin: 0; line-height: 1.6; }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  padding: 6px 13px; border-radius: 999px;
  font-size: 0.82rem; color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid var(--glass-line);
}
.chips-sm { margin-top: 12px; }
.chips-sm li { font-size: 0.76rem; padding: 4px 11px; background: rgba(255,255,255,0.5); }

/* ---------- News ---------- */
.news { list-style: none; padding: 8px 8px; }
.news li {
  display: grid; grid-template-columns: 112px 1fr; gap: 18px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--glass-line);
}
.news li:last-child { border-bottom: 0; }
.news-date {
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--accent); padding-top: 3px;
}
.news-text { font-size: 0.94rem; color: var(--ink-soft); }
.news-text strong { color: var(--ink); font-weight: 600; }

/* ---------- Publications ---------- */
.pubs { display: grid; gap: 18px; }
.pub {
  display: grid; grid-template-columns: 268px 1fr;
  gap: 0;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pub:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.pub-thumb {
  display: block; overflow: hidden;
  background: #dfe6ee;
  border-right: 1px solid var(--glass-line);
}
/* In the two-column layout the thumb stretches to the card's height; the source
   images are 3:2, which is close to the resulting box, so cover crops very little. */
.pub-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.pub:hover .pub-thumb img { transform: scale(1.035); }

.pub-body { padding: 20px 24px 19px; min-width: 0; }
.pub-venue { margin-bottom: 9px; }
.venue {
  display: inline-block; padding: 3px 11px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase;
  color: #fff; background: linear-gradient(140deg, var(--accent), var(--accent-deep));
}
.venue-review { color: var(--muted); background: rgba(14, 27, 43, 0.07); }
.pub-title { font-size: 1.11rem; line-height: 1.36; margin-bottom: 6px; }
.pub-title a { color: var(--ink); }
.pub-title a:hover { color: var(--accent); text-decoration: none; }
.pub-authors { font-size: 0.855rem; color: var(--muted); margin: 0 0 8px; }
.pub-authors strong { color: var(--ink); font-weight: 600; }
.pub-summary { font-size: 0.885rem; color: var(--muted); margin: 0 0 14px; line-height: 1.58; max-width: 68ch; }
.pub-links { display: flex; flex-wrap: wrap; gap: 7px; }


/* ---------- Experience timeline ---------- */
.timeline { list-style: none; position: relative; display: grid; gap: 20px; padding-left: 30px; }
.timeline::before {
  content: ""; position: absolute; left: 6px; top: 12px; bottom: 12px;
  width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), rgba(35, 93, 140, 0.12));
}
.tl-item { position: relative; }
.tl-marker {
  position: absolute; left: -30px; top: 24px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 3px solid var(--accent);
  box-shadow: 0 0 0 4px rgba(238, 241, 246, 0.9);
}
.tl-card { padding: 22px 26px 20px; }
.tl-period {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 5px;
}
.tl-role { font-size: 1.15rem; margin-bottom: 3px; }
.tl-org { font-size: 0.9rem; color: var(--muted); margin: 0 0 13px; }
.tl-points { list-style: none; display: grid; gap: 8px; }
.tl-points li {
  position: relative; padding-left: 18px;
  font-size: 0.89rem; color: var(--muted); line-height: 1.58;
}
.tl-points li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%; background: rgba(35, 93, 140, 0.4);
}
.tl-points strong { color: var(--ink); font-weight: 600; }


/* ---------- Teaching ---------- */
.teach-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.teach { padding: 22px 24px 20px; }
.teach-period { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin: 0 0 6px; }
.teach h3 { font-size: 1.05rem; margin-bottom: 3px; }
.teach-org { font-size: 0.87rem; color: var(--ink-soft); margin: 0 0 10px; }
.teach p { font-size: 0.875rem; color: var(--muted); margin: 0; line-height: 1.58; }

.superv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.superv { padding: 20px 22px; }
.superv h4 { font-size: 0.99rem; margin-bottom: 4px; }
.superv-student { font-size: 0.79rem; color: var(--accent); font-weight: 550; margin: 0 0 8px; }
.superv p:last-child { font-size: 0.865rem; color: var(--muted); margin: 0; line-height: 1.58; }

/* ---------- RoboCup ---------- */
.robocup { display: grid; grid-template-columns: 320px 1fr; gap: 0; overflow: hidden; }
.robocup-fig { margin: 0; display: flex; flex-direction: column; border-right: 1px solid var(--glass-line); }
.robocup-fig img { width: 100%; height: 100%; object-fit: cover; flex: 1; }
.robocup-fig figcaption {
  font-size: 0.76rem; color: var(--muted); padding: 11px 18px;
  background: rgba(255, 255, 255, 0.45); border-top: 1px solid var(--glass-line);
}
.robocup-body { padding: 26px 28px 24px; }
.robocup-lead { font-size: 0.97rem; color: var(--ink-soft); }
.robocup-lead strong { color: var(--ink); font-weight: 600; }
.robocup-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 20px; }
.robocup-cols h4 {
  font-family: var(--sans); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted-light);
  margin-bottom: 11px;
}
.tick-list { list-style: none; display: grid; gap: 9px; }
.tick-list li {
  position: relative; padding-left: 18px;
  font-size: 0.865rem; color: var(--muted); line-height: 1.55;
}
.tick-list li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 5px; height: 5px; border-radius: 50%; background: rgba(35, 93, 140, 0.4);
}
.tick-list strong { color: var(--ink); font-weight: 600; }

.award-list { list-style: none; display: grid; gap: 9px; }
.award-list li { font-size: 0.865rem; color: var(--muted); line-height: 1.5; display: flex; gap: 10px; }
.award-year {
  flex: none; min-width: 54px;
  font-size: 0.76rem; font-weight: 650; color: var(--accent); padding-top: 2px;
}

/* ---------- Talks, awards & service ---------- */
.rec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rec { padding: 24px 26px 22px; }
.rec h3 {
  font-family: var(--sans); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted-light);
  margin-bottom: 15px;
}
.talk-list { list-style: none; display: grid; gap: 16px; }
.talk-title { font-size: 0.95rem; color: var(--ink); font-weight: 500; margin: 0 0 3px; }
.talk-meta { font-size: 0.83rem; color: var(--muted); margin: 0; line-height: 1.5; }
/* Label above body — the card is a half-width column, too narrow for a label gutter. */
.serve-line { display: grid; gap: 3px; margin: 0 0 14px; }
.serve-line:last-child { margin-bottom: 0; }
.serve-label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); }
.serve-body { font-size: 0.89rem; color: var(--muted); }

/* ---------- Footer ---------- */
.footer { padding: 40px 0 46px; }
.footer-card {
  display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center;
  padding: 34px 38px; border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.footer-title { font-size: 1.5rem; margin-bottom: 8px; }
.footer-text { font-size: 0.94rem; color: var(--muted); margin: 0 0 14px; max-width: 52ch; }
.footer-address { font-size: 0.85rem; color: var(--muted-light); margin: 0; line-height: 1.6; }
.footer-links { display: grid; gap: 16px; justify-items: end; }
.footer-social { display: flex; gap: 8px; }
.footer-social a {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 11px;
  color: var(--muted); background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--glass-line);
  transition: color 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}
.footer-social a:hover { color: var(--accent-deep); background: #fff; transform: translateY(-1px); }
.footer-social svg { width: 17px; height: 17px; }
.colophon { text-align: center; font-size: 0.79rem; color: var(--muted-light); margin: 26px 0 0; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .about-grid { grid-template-columns: 210px 1fr; gap: 30px; }
  .pub { grid-template-columns: 220px 1fr; }
  .robocup { grid-template-columns: 260px 1fr; }
}

@media (max-width: 860px) {
  .nav-toggle {
    display: grid; place-content: center; gap: 4.5px;
    margin-left: auto; width: 40px; height: 40px;
    background: none; border: 0; cursor: pointer; padding: 0;
  }
  .nav-toggle span { display: block; width: 19px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 0.2s ease, opacity 0.2s ease; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .nav { border-radius: var(--r-lg); }
  .nav-links {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    margin: 0; padding: 10px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    backdrop-filter: blur(22px) saturate(170%);
    border: 1px solid var(--glass-line);
    box-shadow: var(--shadow-md);
    display: none;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: 11px 14px; border-radius: var(--r-sm); font-size: 0.95rem; }
  .nav-links .nav-cta { margin-left: 0; margin-top: 4px; text-align: center; }

  .about-grid { grid-template-columns: 1fr; gap: 26px; }
  .about-aside { position: static; grid-template-columns: 190px 1fr; }
  .rec-grid { grid-template-columns: 1fr; }
  .robocup { grid-template-columns: 1fr; }
  .robocup-fig { border-right: 0; border-bottom: 1px solid var(--glass-line); }
  .robocup-fig img { max-height: 300px; }
  .footer-card { grid-template-columns: 1fr; gap: 26px; }
  .footer-links { justify-items: start; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .section { padding: 56px 0; }
  .nav-wrap { padding: 10px 14px 0; }
  .nav { padding-left: 14px; }
  .nav-name { display: none; }
  .wrap { padding: 0 18px; }

  /* A full-bleed 16:9 photo behind a portrait viewport crops to an unreadable
     sliver, so on phones the photo becomes a banner band and the card sits under
     it, overlapping just enough to keep the glass-over-photo effect. */
  .hero { min-height: 0; display: block; }
  .hero-media, .hero-scrim { height: 330px; bottom: auto; }
  /* The 1.02 zoom would push the band's bottom edge past the scrim and leave a
     dark seam, so drop it here. */
  .hero-media { background-position: center, 34% center, center; transform: none; }
  .hero-scrim {
    background: linear-gradient(180deg, rgba(10, 22, 36, 0.40) 0%, rgba(10, 22, 36, 0.02) 38%,
                rgba(238, 241, 246, 0.55) 80%, rgba(238, 241, 246, 1) 100%);
  }
  .hero-inner { display: block; padding: 268px 18px 40px; }
  .hero-card { padding: 26px 24px 24px; border-radius: var(--r-md); }
  .hero-blurb { font-size: 0.96rem; }
  .btn { padding: 8px 14px; font-size: 0.83rem; }

  .about-aside { grid-template-columns: 1fr; }
  .portrait { max-width: 210px; }

  .pub { grid-template-columns: 1fr; }
  /* Stacked: no card height to fill, so pin the box to the source ratio. */
  .pub-thumb { border-right: 0; border-bottom: 1px solid var(--glass-line); aspect-ratio: 3 / 2; }
  .pub-body { padding: 18px 20px 17px; }
  .pub-title { font-size: 1.04rem; }

  .news li { grid-template-columns: 1fr; gap: 4px; padding: 13px 14px; }
  .timeline { padding-left: 22px; }
  .tl-marker { left: -22px; width: 12px; height: 12px; }
  .tl-card { padding: 20px 20px 18px; }
  .robocup-cols { grid-template-columns: 1fr; gap: 22px; }
  .robocup-body { padding: 22px 20px 20px; }
  .footer-card { padding: 26px 22px; }
}

/* ---------- Motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .nav-wrap, .hero-media, .hero-scrim, .ambient, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; }
  .glass { background: #fff; box-shadow: none; border: 1px solid #ccc; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .glass::before { display: none; }
  .hero { min-height: auto; margin-top: 0; }
  .section { padding: 24px 0; break-inside: avoid; }
}