:root{
  --burnt:#BF5700;
  --burnt-700:#a34700;
  --panel:#F5E8DE;        /* light UT orange */
  --ink:#1f1f1f;
  --paper:#ffffff;
  --muted:#6b6b6b;
  --border:#e6e6e6;

  --radius:14px;
  --shadow-sm:0 2px 10px rgba(0,0,0,.06);
  --shadow-md:0 14px 42px rgba(0,0,0,.10);
  --max:1060px;

  --btn-h:44px; --btn-minw:160px; --btn-pad-x:16px; --btn-radius:12px;
}

/* ===== Base / layout ===== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
body{
  font-family:"Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, "Segoe UI", sans-serif;
  color:var(--ink); line-height:1.65; background:var(--paper);
}
.container{max-width:var(--max); margin:0 auto; padding:0 1.25rem}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:static;width:auto;height:auto;padding:.5rem 1rem;background:#000;color:#fff}

/* ===== Header ===== */
.hero{background:var(--burnt); color:#fff; box-shadow:0 1px 0 rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06)}
.brand{display:flex; align-items:center; gap:1rem; padding:1rem 0}
/* smaller site title */
.site-title{margin:0; font-weight:800; letter-spacing:.2px; font-size:clamp(1.05rem, 0.9rem + 1.1vw, 1.6rem)}

/* ===== Intro / hero title area ===== */
.intro{padding:1.75rem 0 1rem; text-align:center}
.intro-inner{display:flex; flex-direction:column; align-items:center}
.tagline{
  font-size:clamp(2rem, 1.4rem + 2.1vw, 2.8rem);
  font-weight:900; line-height:1.18; letter-spacing:.1px;
  margin:0 0 1rem; text-wrap:balance;
}
.meta-actions{display:flex; flex-direction:column; gap:.9rem; align-items:center; justify-content:center}

/* ===== Nav (centered pills) ===== */
.navwrap{
  background:#fff; position:sticky; top:0; z-index:60;
  border-top:1px solid #f2f2f2;
  box-shadow:0 1px 0 rgba(0,0,0,.06);   /* softer than a hard border */
}
nav ul{display:flex; justify-content:center; gap:.25rem; list-style:none; margin:0; padding:.5rem .25rem; overflow-x:auto}
nav a{display:block; padding:.65rem 1rem; border-radius:12px; text-decoration:none; color:#2b2b2b; font-weight:700; letter-spacing:.15px; transition:background-color .2s,color .2s,box-shadow .2s}
nav a:hover{background:#f7efe7; color:var(--burnt)}
nav a[aria-current="page"]{background:var(--panel); color:var(--burnt); box-shadow:var(--shadow-sm)}

/* ===== Buttons / pill ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  height:var(--btn-h); min-width:var(--btn-minw); padding:0 var(--btn-pad-x);
  border-radius:var(--btn-radius); border:1px solid var(--border);
  background:#fff; color:var(--ink); text-decoration:none; font-weight:600; line-height:1;
  box-shadow:var(--shadow-sm); cursor:pointer;
  transition:transform .18s, box-shadow .18s, border-color .18s, background-color .18s, color .18s;
}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow-md); border-color:#ddd}
.btn:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(191,87,0,.25)}
.btn.primary{background:var(--burnt); color:#fff; border-color:transparent}
.btn.primary:hover{background:var(--burnt-700)}
.pill{
  background:rgba(245,232,222,.9); border:1px solid var(--border); border-radius:16px;
  padding:.85rem 1.1rem; box-shadow:var(--shadow-sm); min-width:280px; backdrop-filter:saturate(1.05) blur(4px);
}

/* ===== Content ===== */
main section{margin:2rem 0}
/* fix: correct CSS var usage */
main h2{font-size:1.25rem; margin:0 0 .75rem; letter-spacing:.2px; border-left:6px solid var(--burnt); padding-left:.6rem}
/* fix: remove global paragraph width cap */
main p{max-width:none}
ul{padding-left:1.25rem; margin:.5rem 0}
.badge{display:inline-block; padding:.15rem .45rem; border-radius:8px; background:var(--panel); border:1px solid var(--border); margin-left:.35rem; font-weight:700; font-size:.85em}

/* ===== Staff cards — uniform size, centered content ===== */
.staff-grid{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  align-items:stretch;          /* <-- make items in each row equal height */
  justify-items:stretch;
}

.card{
  display:flex;                 /* let content stack and fill full height */
  flex-direction:column;
  height:100%;                  /* <-- stretch to the row height */
  text-align:center;

  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.25rem;
  background:#fff;
  box-shadow:var(--shadow-sm);
  transition:transform .18s, box-shadow .18s;
}
.card:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}

.avatar{
  width:120px; height:120px; border-radius:50%;
  object-fit:cover; display:block; margin:0 auto .9rem;
}

.card h3{margin:.4rem 0 .4rem}
.card p{max-width:42ch; margin:.25rem auto}

/* ===== Links ===== */
main a, footer a{color:var(--burnt); text-decoration:underline; text-underline-offset:2px}
main a:hover, footer a:hover{color:var(--burnt-700)}

/* ===== Footer ===== */
.site-footer{text-align:center; font-size:.9rem; color:#666; margin:2rem 0 1rem}

/* ===== Schedule table (clean, sticky head) ===== */
.table-scroll{overflow:auto; -webkit-overflow-scrolling:touch; border:1px solid #e2e2e2; border-radius:8px}
table.schedule{width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; min-width:820px}
table.schedule thead th{
  background:var(--panel); font-weight:700;
  position:sticky; top:0; z-index:1;
}
.table-scroll thead th:first-child{border-top-left-radius:8px}
.table-scroll thead th:last-child{border-top-right-radius:8px}

table.schedule th, table.schedule td{border:1px solid #e2e2e2; padding:.7rem .8rem; vertical-align:top; background:#fff}
table.schedule th:first-child, table.schedule td:first-child{width:56px; text-align:left}
table.schedule th:nth-child(2), table.schedule td:nth-child(2){width:120px; white-space:nowrap}
table.schedule td .dow{display:block; color:#666; margin-top:.15rem; font-size:.9em}

/* bullets inside cells */
table.schedule ul{margin:.35rem 0 .35rem 1.2rem}
table.schedule li{margin:0 0 .25rem 0; line-height:1.45}
table.schedule li:last-child{margin-bottom:0}

/* Full-width break rows (e.g., Thanksgiving) */
table.schedule tr.schedule-break td{
  text-align:center; font-weight:800; letter-spacing:.3px; color:var(--burnt);
  background:#faf6f2; border-top:2px solid #ead8c8; border-bottom:2px solid #ead8c8;
}

/* ===== Motion & print ===== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}
@media print{
  .hero,.navwrap,.site-footer{display:none}
  .container{max-width:100%; padding:0}
  a{text-decoration:none; color:inherit}
}

/* ===== Mobile polish (small phones like iPhone SE) ===== */
@media (max-width: 420px){
  /* tighter container padding */
  .container{ padding: 0 .75rem; }

  /* site title + header bar */
  .brand{ justify-content:center; }
  .site-title{ font-size: 1.05rem; }

  /* course hero */
  .tagline{
    /* smaller headline so it never wraps awkwardly */
    font-size: clamp(1.35rem, 3.8vw + 1rem, 2rem);
    line-height: 1.15;
    margin-bottom: .75rem;
  }
  .pill{
    width: min(100%, 20rem);
    padding: .7rem .9rem;
  }
  .meta-actions{ gap: .6rem; }
  .btn{
    height: 40px;
    min-width: auto;           /* allow smaller buttons */
    padding: 0 .75rem;
    border-radius: 10px;
  }

  /* top tabs: left-align + shrink + horizontal scroll with momentum */
  .navwrap nav ul{
    justify-content: flex-start;     /* don't force centering on tiny widths */
    gap: .35rem;
    padding: .35rem .5rem;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;   /* nice snapping UX */
  }
  nav a{
    font-size: .95rem;
    padding: .5rem .75rem;
    border-radius: 10px;
    white-space: nowrap;
    scroll-snap-align: center;
  }
}

@media (max-width: 340px){
  /* ultra-narrow safeguard */
  nav a{ font-size: .9rem; padding: .45rem .6rem; }
  .btn{ height: 38px; padding: 0 .6rem; }
}

/* ==== Tabs (Assignments) ==== */
.tabs{ margin-top:.5rem }
.tablist{
  display:flex; gap:.35rem; overflow-x:auto; padding:.35rem .25rem;
  -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory;
}
.tab{
  scroll-snap-align:center;
  padding:.55rem .9rem; border-radius:12px; border:1px solid var(--border);
  background:#fff; color:#2b2b2b; font-weight:700; letter-spacing:.15px;
  box-shadow:var(--shadow-sm); cursor:pointer;
}
.tab[aria-selected="true"]{ background:var(--panel); color:var(--burnt) }

.tabpanel{
  border:1px solid var(--border); border-radius:12px; background:#fff;
  padding:1rem 1rem 1.1rem; margin-top:.6rem; box-shadow:var(--shadow-sm);
}
.tabpanel.is-hidden{ display:none }

.meta-grid{
  display:flex; flex-wrap:wrap; gap:.4rem .5rem; margin:.35rem 0 .6rem 0;
}
.chip{
  display:inline-block; padding:.2rem .55rem; border-radius:999px;
  background:var(--panel); border:1px solid var(--border); font-weight:700; font-size:.9rem;
}

.btn-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.6rem }