/* ==========================================================================
   ECE 498 — AI Systems & Engineering · Fall 2026
   Structure ported from research.ece.cornell.edu/retrieve/ (flat typographic
   layout, one shared stylesheet across four pages); palette from
   platformxlab.github.io; Inter + IBM Plex Mono.

   Contrast rule: --accent (#EF6603) is 3.19:1 on white — fills, rules,
   borders, marks ONLY. Every accent-colored word and the primary button
   fill use --accent-dark (#BD5102, 4.84:1); primary hover fill #8F3D01.
   ========================================================================== */

:root{
  --bg:#F4F5F7;
  --bg2:#EBEBED;
  --surface:#FFFFFF;
  --ink:#1B1D26;
  --ink-2:#4A4E5C;
  --muted:#71757F;
  --muted-2:#9096A0;
  --line:#E2E4E9;
  --accent:#EF6603;
  --accent-dark:#BD5102;
  --accent-tint:rgba(239,102,3,0.08);

  --f-body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --wrap:1080px;
  --gutter:clamp(20px, 5vw, 40px);
  --sec-y:clamp(3.5rem, 8vw, 6rem);
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:inherit;}
img{max-width:100%;display:block;}

.tbd{color:var(--muted-2);}

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

/* ---------- layout ---------- */
.wrap{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.band-light{ border-top:1px solid var(--line); }
.sec-pad{ padding-block:var(--sec-y); }
section{ scroll-margin-top:1.5rem; }

/* ---------- header / nav ---------- */
.site-header{
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:.6rem 1.6rem;
  min-height:64px; padding-block:.9rem;
}
.brand{
  font-weight:800;
  font-size:1.05rem;
  letter-spacing:-0.02em;
  text-decoration:none;
  display:inline-flex; align-items:baseline; gap:.5ch;
}
.brand .yr{
  font-family:var(--f-mono); font-weight:500; font-size:.72rem;
  color:var(--accent-dark); letter-spacing:.05em;
}
.nav-toggle{
  display:none;
  background:var(--surface);
  border:1px solid var(--line);
  padding:.5rem .6rem;
  cursor:pointer;
}
.nav-toggle span{
  display:block; width:20px; height:2px;
  background:var(--ink); margin:4px 0;
}
.nav-links{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.5rem 1.6rem; list-style:none; margin:0; padding:0;
}
.nav-links a{
  font-size:.9rem; color:var(--ink-2); text-decoration:none; padding:.2rem 0;
}
.nav-links a:hover{ color:var(--accent-dark); }
.nav-links a[aria-current="page"]{ color:var(--ink); font-weight:600; }

/* ---------- kicker / section heads ---------- */
.kicker{
  font-family:var(--f-mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.kicker::before{
  content:"";
  width:9px; height:9px;
  background:var(--accent);
  display:inline-block;
  flex:none;
}

.sec-head{ margin-bottom:2.4rem; max-width:60ch; }
.sec-head h2{ margin:.8rem 0 0; }
.sec-head p{ color:var(--ink-2); margin:.9rem 0 0; }

h2{
  font-weight:800;
  font-size:clamp(1.55rem, 3.2vw, 2.05rem);
  letter-spacing:-0.02em;
  line-height:1.15;
}
h3{ font-weight:700; letter-spacing:-0.02em; }

/* ---------- hero ---------- */
.hero{ padding-top:clamp(3rem,7vw,5rem); padding-bottom:var(--sec-y); }
.hero h1{
  font-weight:800;
  font-size:clamp(2.3rem, 5.5vw, 3.9rem);
  line-height:.96;
  letter-spacing:-0.02em;
  margin:1.6rem 0 0;
}
.hero h1 .h1-sub{
  display:block;
  font-size:.42em;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--ink-2);
  margin-top:.35em;
}
.hero-meta{
  font-family:var(--f-mono); font-size:.82rem; color:var(--muted);
  margin:1.7rem 0 0; letter-spacing:.02em;
}
.hero-meta a{ color:var(--accent-dark); text-decoration:underline; }
.hero-cta{ display:flex; gap:.9rem; margin-top:2rem; flex-wrap:wrap; }

/* ---------- prose ---------- */
.about-body p{ margin:0 0 1.15rem; color:var(--ink-2); }
.about-body a{ color:var(--accent-dark); text-decoration:underline; }
.about-body section{ margin:0 0 2.6rem; }
.about-body h2{ font-size:1.35rem; letter-spacing:-0.01em; margin:0 0 .9rem; }

/* ---------- buttons ---------- */
.btn{
  font-family:var(--f-body); font-size:.92rem; font-weight:600;
  text-decoration:none; padding:.72rem 1.3rem; border:1.5px solid var(--accent-dark);
  display:inline-flex; align-items:center; gap:.5ch;
}
.btn-primary{ background:var(--accent-dark); color:#fff; }
.btn-primary:hover{ background:#8F3D01; border-color:#8F3D01; }
.btn-secondary{ background:var(--ink-2); border-color:var(--ink-2); color:#fff; }
.btn-secondary:hover{ background:var(--ink); border-color:var(--ink); }
.btn-ghost{ color:var(--accent-dark); background:var(--bg2); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--accent); }

/* platform brand buttons — white text, all bases pass AA (≥4.5:1) */
.btn-piazza{ background:#356FA2; border-color:#356FA2; color:#fff; }
.btn-piazza:hover{ background:#2A5A86; border-color:#2A5A86; }
.btn-gradescope{ background:#126577; border-color:#126577; color:#fff; }
.btn-gradescope:hover{ background:#0D5061; border-color:#0D5061; }
.btn-canvas{ background:#C2341B; border-color:#C2341B; color:#fff; }
.btn-canvas:hover{ background:#A52F18; border-color:#A52F18; }

/* platform link popup (Piazza signup / access code) */
.has-popup{ position:relative; display:flex; }
.popup{
  position:absolute; top:calc(100% + .45rem); left:50%; transform:translateX(-50%);
  background:var(--surface); color:var(--ink); border:1px solid var(--line);
  border-radius:.35rem; padding:.55rem .75rem; font-size:.82rem;
  white-space:nowrap; box-shadow:0 4px 12px rgba(0,0,0,.12);
  opacity:0; visibility:hidden; transition:opacity .15s, visibility .15s;
  z-index:10;
}
.has-popup:hover .popup,
.has-popup:focus-within .popup{ opacity:1; visibility:visible; }
.popup a{ color:var(--accent-dark); text-decoration:underline; display:block; margin-bottom:.25rem; }
.popup .code{ font-family:var(--f-mono); font-size:.76rem; color:var(--muted); display:block; }
.popup::before{
  content:""; position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
  border-width:6px; border-style:solid; border-color:transparent transparent var(--line) transparent;
}
@media (max-width:520px){
  .has-popup{ align-items:stretch; }
  .has-popup .btn{ width:100%; justify-content:center; }
}

.cfp-note{ margin-top:1.6rem; color:var(--muted); font-size:.9rem; }
.cfp-note a{ color:var(--accent-dark); text-decoration:underline; }

/* ---------- dates / definition rows ---------- */
.dates{
  background:var(--surface); border:1px solid var(--line); padding:1.7rem 1.7rem 1.4rem;
}
.dates h3{
  font-family:var(--f-mono); font-size:.74rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin:0 0 1.1rem;
}
.date-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.7rem 0; border-top:1px solid var(--line);
}
.date-row:first-of-type{ border-top:0; }
.date-row .lab{ font-size:.94rem; color:var(--ink-2); }
.date-row .val{
  font-family:var(--f-mono); font-size:.86rem; color:var(--ink);
  white-space:nowrap; text-align:right;
}
.dates-foot{
  margin-top:1rem; font-family:var(--f-mono); font-size:.72rem;
  color:var(--muted-2); letter-spacing:.02em;
}

/* ---------- people ---------- */
.org-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.1rem; }
.org{
  background:var(--surface); border:1px solid var(--line); padding:1.4rem 1.5rem;
  display:flex; align-items:flex-start; gap:1rem;
}
.mono-badge{
  position:relative; overflow:hidden;
  font-family:var(--f-mono); font-weight:600; font-size:1.05rem;
  color:var(--accent-dark); background:var(--accent-tint);
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  letter-spacing:.02em; flex:none;
}
.mono-badge img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:1;
}
.mono-badge .fallback{ position:relative; z-index:0; }
.org .meta{ min-width:0; }
.org .nm{ font-weight:700; font-size:1.08rem; letter-spacing:-0.02em; }
.org .nm a{ text-decoration:underline; color:var(--ink); }
.org .nm a:hover{ color:var(--accent-dark); }
.org .in,
.org .role{ font-family:var(--f-mono); font-size:.78rem; line-height:1.45; margin-top:.15rem; }
.org .in{ color:var(--muted); }
.org .role{ color:var(--accent-dark); font-weight:600; }

/* ---------- calendar embed ---------- */
.cal-frame{
  border:1px solid var(--line); background:var(--surface);
  padding:8px; line-height:0;
}
.cal-frame iframe{ width:100%; height:620px; border:0; display:block; }

/* ---------- tables ---------- */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.ctable{
  width:100%; border-collapse:collapse; background:var(--surface);
  border:1px solid var(--line); font-size:.94rem;
}
.ctable th{
  font-family:var(--f-mono); text-align:left; font-weight:500;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); padding:.85rem 1rem;
  border-bottom:1px solid var(--line); white-space:nowrap;
}
.ctable td{
  padding:.85rem 1rem; border-top:1px solid var(--line);
  color:var(--ink-2); vertical-align:top;
}
.ctable td.date{
  font-family:var(--f-mono); font-size:.86rem;
  color:var(--ink); white-space:nowrap;
}
.ctable td.wk{
  font-family:var(--f-mono); font-size:.86rem; color:var(--muted);
  border-left:3px solid var(--accent); font-weight:500;
}
.ctable tr.off td{ color:var(--muted); background:var(--bg); }
.ctable tr.off td.wk{ border-left-color:var(--line); }
/* A week whose .wk cell spans an off row AND a normal row (e.g. week 11)
   keeps the normal surface + accent bar; only a fully-off week (fall
   break, no rowspan) gets the muted bar. */
.ctable tr.off td.wk[rowspan]{ background:var(--surface); border-left-color:var(--accent); }
.ctable tr.cp td{ color:var(--muted); }
.ctable tr.cp td:first-child{ padding-left:2.2rem; }
.ctable a{ color:var(--accent-dark); text-decoration:underline; }
.ctable .col-week{ width:8%; }
.ctable .col-date{ width:12%; }
.ctable .col-lecture{ width:50%; }
.ctable .col-mp{ width:30%; }

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--line);
  padding-block:clamp(2.5rem, 5vw, 3.5rem);
  margin-top:var(--sec-y);
}
.foot-grid{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; }
.foot-brand{ font-weight:800; font-size:1.3rem; letter-spacing:-0.02em; }
.foot-sub{ font-family:var(--f-mono); font-size:.78rem; color:var(--muted); margin-top:.5rem; }
.foot-links{ font-family:var(--f-mono); font-size:.82rem; color:var(--ink-2); text-align:right; line-height:2; }
.foot-links a{ text-decoration:underline; }
.foot-links a:hover{ color:var(--accent-dark); }

/* ---------- focus ---------- */
a:focus-visible, .btn:focus-visible, button:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px;
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .org-grid{ grid-template-columns:1fr 1fr; max-width:720px; }
}
@media (max-width:760px){
  .org-grid{ grid-template-columns:1fr; max-width:480px; }
  .nav-toggle{ display:block; }
  .nav-links{
    display:none; width:100%;
    flex-direction:column; align-items:flex-start; gap:.2rem 0;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ display:block; padding:.45rem 0; }
  .cal-frame iframe{ height:520px; }
  .dates{ padding:1.3rem 1.3rem 1.1rem; }
  .ctable{ font-size:.88rem; }
  .ctable th, .ctable td{ padding:.7rem .8rem; }
}
@media (max-width:520px){
  :root{ --sec-y:2.75rem; }
  .hero{ padding-top:2.4rem; }
  .sec-head{ margin-bottom:1.7rem; }
  .hero-cta{ flex-direction:column; align-items:stretch; gap:.7rem; }
  .hero-cta .btn{ justify-content:center; }
  .foot-grid{ align-items:flex-start; }
  .foot-links{ text-align:left; }
  .date-row{ flex-direction:column; align-items:flex-start; gap:.15rem; }
  .date-row .val{ white-space:normal; text-align:left; }
}