/* Shared by every "lecture plate" mockup: the ECE 4436 deck tokens, unchanged. */
:root {
  --ece-navy: #151D4B;
  --ece-deep: #022E7F;
  --ece-orange: #E97132;
  --paper: #FAFBFD;
  --ink: #1C2340;
  --ink-2: #545B77;
  --rule: #DDE1EC;
  --cell: #E7EAF3;
  --on-navy: #D6DCF0;
  --sans: 'Inter', system-ui, sans-serif;
  --serif: 'Source Serif 4', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.65 var(--sans); }
a { color: var(--ece-deep); text-underline-offset: .18em; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--ece-orange); outline-offset: 3px; }
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }

/* ---------- The plate (hero) ---------- */
.plate { position: relative; overflow: hidden; color: #fff;
         background: linear-gradient(104deg, var(--ece-navy) 0%, var(--ece-deep) 75%); }
.plate .stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Scrim keeps the headline readable over the live figure. */
.plate::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(21,29,75,.94) 0%, rgba(21,29,75,.78) 36%, rgba(21,29,75,0) 62%); }
.plate > .wrap { position: relative; z-index: 2; pointer-events: none; }
.plate > .wrap a, .plate > .wrap button { pointer-events: auto; }
.plate header { min-height: min(46rem, 86vh); display: flex; flex-direction: column; justify-content: center; padding-block: 3rem 5rem; max-width: 34rem; }
.plate h1 { font: 600 clamp(2.4rem, 5.2vw, 4.1rem)/1.04 var(--serif); letter-spacing: -.015em; margin: 0 0 1.5rem; }
.plate h1::after { content: ""; display: block; width: 5rem; height: 4px; background: var(--ece-orange); margin-top: 1.5rem; }
.plate header p { font-size: 1.12rem; color: var(--on-navy); margin: 0 0 1rem; }
.readout { position: absolute; z-index: 2; right: 1.5rem; bottom: 1.25rem; max-width: 26rem; text-align: right;
           font: 400 .85rem/1.5 var(--sans); color: var(--on-navy); }
.readout strong { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.readout button { font: inherit; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.3);
                  border-radius: 4px; padding: .3rem .7rem; margin-left: .5rem; cursor: pointer; }
.readout button:hover { background: rgba(255,255,255,.16); }

/* ---------- Sections ---------- */
main section { padding-block: 4rem; }
main section + section { border-top: 1px solid var(--rule); }
h2 { font: 600 1.9rem/1.2 var(--serif); margin: 0 0 .5rem; }
.lede { color: var(--ink-2); margin: 0 0 2.5rem; max-width: 44rem; }
.lede strong { color: var(--ink); }

/* Teaching record: one row per subject, a cell per term. */
.record-scroll { overflow-x: auto; }
.record { width: 100%; min-width: 46rem; border-collapse: collapse; }
.record th, .record td { text-align: left; padding: 1rem .5rem; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.record thead th { font: 500 .8rem var(--sans); color: var(--ink-2); border-bottom-color: var(--ink); padding-block: .5rem; }
.record thead th.t { text-align: center; width: 3.2rem; }
.record .subj a { font: 600 1.18rem/1.3 var(--serif); color: var(--ink); text-decoration: none; }
.record .subj a:hover { color: var(--ece-deep); text-decoration: underline; }
.record .codes { display: block; margin-top: .2rem; font-size: .88rem; color: var(--ink-2); }
.record code { font: 500 .85rem var(--mono); color: var(--ece-deep); }
.record .note { display: inline-block; margin-left: .5rem; font-size: .78rem; font-weight: 600; color: var(--ece-orange); }
.record td.t { text-align: center; padding-inline: 0; }
.record td.t span { display: inline-block; width: 1.5rem; height: 1.5rem; border-radius: 3px; background: var(--cell); vertical-align: middle; }
.record td.t span.on { background: var(--ece-deep); }
.record td.t span.now { background: var(--ece-orange); }
.record-key { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1rem; font-size: .88rem; color: var(--ink-2); }
.record-key i { display: inline-block; width: .9rem; height: .9rem; border-radius: 2px; vertical-align: -.1rem; margin-right: .4rem; }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.two h3 { font: 600 1.15rem var(--serif); margin: 0 0 .4rem; }
.two p { margin: 0 0 1.2rem; color: var(--ink-2); }

/* Footer: who he is and how to reach him, the pages, and his academic profiles. */
footer { background: var(--ece-navy); color: #B9C1E0; padding-block: 3.25rem 1.75rem; border-top: 3px solid var(--ece-orange); }
footer .wrap { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, .8fr) minmax(0, 1fr); gap: 2.5rem 3rem; }
footer a { color: #fff; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
footer ul a { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; margin-block: -.5rem; text-decoration: none; color: var(--on-navy); }
footer ul a:hover { color: #fff; text-decoration: underline; text-underline-offset: .2em; }
footer .si { width: 1rem; height: 1rem; opacity: .85; }
.ft-name { font: 600 1.4rem/1.2 var(--serif); text-decoration: none; letter-spacing: -.005em; }
.ft-id p { margin: .6rem 0 1.4rem; font-size: .92rem; line-height: 1.6; max-width: 34ch; }
.ft-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.15rem; border: 1px solid rgba(214,220,240,.4); border-radius: 999px; font-size: .92rem; font-weight: 500; text-decoration: none; transition: background-color .2s, border-color .2s, color .2s; }
.ft-cta:hover { background: var(--ece-orange); border-color: var(--ece-orange); color: var(--ece-navy); }
.ft-h { margin: .3rem 0 1rem; font-size: .82rem; color: #8E97BD; }
footer .copy { grid-column: 1 / -1; margin: .5rem 0 0; padding-top: 1.25rem; border-top: 1px solid rgba(214,220,240,.14); font-size: .82rem; color: #8E97BD; }
footer a:focus-visible { outline: 2px solid var(--ece-orange); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 720px) {
  footer { padding-block: 2.5rem 1.5rem; }
  footer .wrap { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .ft-id { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .ft-cta { transition: none; } }
/* Brand marks for LinkedIn, ORCID and GitHub, drawn in the link's colour. */
.si { width: 1.05em; height: 1.05em; flex: none; fill: currentColor; }

@media (max-width: 800px) {
  .two { grid-template-columns: 1fr; }
  .plate::before { background: linear-gradient(180deg, rgba(21,29,75,.92) 0%, rgba(21,29,75,.7) 55%, rgba(21,29,75,.35) 100%); }
  .readout { left: 1.5rem; text-align: left; }
}

/* On phones the news-bar banners (Teaching, Research) give each figure its own band under the
   site header, with the text below it, instead of hiding the figure behind the text. */
@media (max-width: 800px) {
  .plate:has(.slides) { --band-top: 4.75rem; --band: clamp(15rem, 78vw, 26rem); padding-top: calc(var(--band-top) + var(--band)); }
  .plate:has(.slides) .stage { top: var(--band-top); bottom: auto; height: var(--band); }
  .plate:has(.slides) .stage-overlay { top: var(--band-top) !important; bottom: auto !important; height: var(--band) !important; }
  .plate:has(.slides)::before { background: linear-gradient(180deg, rgba(21,29,75,0) calc(var(--band-top) + var(--band) - 2.5rem), rgba(21,29,75,.96) calc(var(--band-top) + var(--band))); }
  .plate:has(.slides) header { min-height: 0; padding-block: 1.25rem; }
  .plate:has(.slides) .readout { position: relative; left: auto; right: auto; bottom: auto; max-width: none; margin: 0; padding: 0 1.5rem 2rem; min-height: 5.5rem; }
  .plate:has(.slides) .slides .who { margin-bottom: 1.25rem; }
}

/* ---------- Rotating banner ---------- */
.plate .stage { opacity: 0; pointer-events: none; transition: opacity .9s ease; }
.plate .stage[data-active] { opacity: 1; pointer-events: auto; }
.switch { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.switch button { position: relative; overflow: hidden; cursor: pointer; font: 500 .85rem var(--sans);
                 color: var(--on-navy); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.22);
                 border-radius: 4px; padding: .5rem .85rem; min-height: 2.5rem; }
.switch button:hover { background: rgba(255,255,255,.12); }
.switch button[aria-pressed="true"] { color: #fff; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.1); }
.switch button i { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--ece-orange); }
@media (prefers-reduced-motion: reduce) { .plate .stage { transition: none; } }

/* ---------- Teaching groups and research ---------- */
.record tr.group th { font: 600 .95rem var(--sans); color: var(--ece-deep); padding: 2rem .5rem .6rem; border-bottom: 1px solid var(--ink); }
.record tbody tr.group:first-child th { padding-top: 1.25rem; }
.themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-bottom: 2.5rem; }
.themes h3, h3.sub { font: 600 1.15rem var(--serif); margin: 0 0 .4rem; }
.themes div { border-top: 3px solid var(--ece-deep); padding-top: .9rem; }
.themes p { margin: 0; color: var(--ink-2); }
.pubs { margin: .75rem 0 0; padding-left: 1.25rem; display: grid; gap: .8rem; max-width: 52rem; }
.pubs a { color: var(--ink); font-weight: 500; }
.pubs span { color: var(--ink-2); }
.more { color: var(--ink-2); margin: 1.25rem 0 0; }
@media (max-width: 800px) { .themes { grid-template-columns: 1fr; } }

/* ---------- News-bar banner ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.plate .slides { justify-content: center; }
.slides .who { font-size: .95rem; color: var(--on-navy); margin: 0 0 2rem; }
.slide .kind { font: 600 .9rem var(--sans); color: #F5A878; margin: 0 0 .75rem; }
.slide h2 { font: 600 clamp(2.2rem, 4.8vw, 3.7rem)/1.06 var(--serif); letter-spacing: -.015em; color: #fff; margin: 0 0 1.25rem; }
.slide h2::after { content: ""; display: block; width: 5rem; height: 4px; background: var(--ece-orange); margin-top: 1.25rem; }
.slide p { font-size: 1.08rem; color: var(--on-navy); margin: 0 0 1.25rem; }
.slide .go { display: inline-block; color: #fff; font-weight: 600; text-underline-offset: .25em; padding-block: .8rem; margin-block: -.8rem; }
.slide:not([hidden]) { animation: slide-in .6s ease both; }
@keyframes slide-in { from { opacity: 0; transform: translateY(8px); } }
.pager { display: flex; align-items: center; gap: .25rem; margin-top: 2.5rem; margin-left: -.5rem; }
.pager button { background: none; border: 0; cursor: pointer; color: #fff; min-width: 2.75rem; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; padding: 0 .4rem; }
.pager .pause { width: 2.75rem; margin-right: .35rem; }
.pager .dot { min-width: 1.5rem; padding: 0 .3rem; }
.pager .pause svg { width: 1.9rem; height: 1.9rem; padding: .45rem; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; fill: currentColor; }
.pager .pause:hover svg { border-color: #fff; background: rgba(255,255,255,.08); }
.pager .pause .i-play, .pager .pause.is-paused .i-pause { display: none; }
.pager .pause.is-paused .i-play { display: inline; }
.pager .dot i { display: block; width: .6rem; height: .6rem; border-radius: .3rem; background: rgba(255,255,255,.38); overflow: hidden; transition: width .45s ease, background .3s; }
.pager .dot:hover i { background: rgba(255,255,255,.7); }
.pager .dot[aria-pressed="true"] i { width: 3.5rem; background: rgba(255,255,255,.22); }
.pager .dot b { display: block; height: 100%; width: 0; background: var(--ece-orange); border-radius: inherit; }
@media (prefers-reduced-motion: reduce) { .pager .dot i { transition: none; } }
.globe-labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.globe-labels span { position: absolute; left: 0; top: 0; font: 600 .8rem var(--sans); color: #fff; white-space: nowrap;
                     background: rgba(11,20,82,.75); border: 1px solid rgba(233,113,50,.6); border-radius: 3px; padding: .1rem .4rem; }
@media (prefers-reduced-motion: reduce) { .slide:not([hidden]) { animation: none; } }

.intro h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); max-width: 40rem; }
.intro .lede { margin-bottom: 0; }