/* =====================================================================
   MSST Conference — shared stylesheet
   One file styles every page and every year. Edit here to restyle the
   whole site. Built to be fully self-contained; the only external call
   is the Google Fonts import below (remove it to go 100% offline — the
   system-font fallbacks will take over automatically).
   ===================================================================== */

/* ---- Self-hosted fonts (files live in assets/fonts/) -----------------
   Run scripts/mirror-history.sh once to download the .woff2 files. If they
   are missing, the system-font fallbacks in --sans / --display take over. */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/inter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/space-grotesk-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/space-grotesk-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/space-grotesk-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family:'Overpass'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/overpass-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family:'Overpass'; font-style:normal; font-weight:800; font-display:swap;
  src:url('fonts/overpass-latin-800-normal.woff2') format('woff2'); }

:root {
  /* Brand palette — Santa Clara University red (Pantone 187, #A6192E) */
  --maroon:        #a6192e;  /* SCU red */
  --maroon-dark:   #871320;
  --maroon-deep:   #5f0c16;
  --gold:          #c69749;
  --gold-soft:     #ecd9b5;

  /* Neutrals */
  --ink:           #1a1410;
  --body:          #3d3733;
  --muted:         #6b6460;
  --line:          #e9e4dc;
  --bg:            #ffffff;
  --bg-soft:       #faf7f2;
  --bg-tint:       #f4eee5;

  --radius:        14px;
  --radius-sm:     9px;
  --shadow:        0 1px 2px rgba(28,16,8,.04), 0 8px 24px rgba(28,16,8,.06);
  --shadow-lg:     0 12px 40px rgba(28,16,8,.14);
  --max:           1060px;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--body);
  background:
    radial-gradient(1200px 600px at 50% -200px, var(--bg-tint), transparent 70%),
    var(--bg);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--maroon); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--maroon-dark); text-decoration: underline; text-underline-offset: 2px; }

img { max-width: 100%; height: auto; }

/* ----------------------------- Masthead ---------------------------- */
.site-header {
  background:
    linear-gradient(180deg, var(--maroon-deep), var(--maroon) 120%);
  color: #fff;
  text-align: center;
  padding: 1.6rem 1rem 1.3rem;
  position: relative;
}
.site-header::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
/* Masthead lockup: the MSST + SCU Engineering logos sit on a white plaque to
   the LEFT of the title/tagline. The white plaque keeps both logos legible on
   the red bar whatever their own colours are. Degrades gracefully (alt text)
   if the logo files haven't been downloaded yet. */
.masthead {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.9rem, 3vw, 1.9rem);
  flex-wrap: wrap;
}
.masthead-logos {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  background: #fff;
  padding: 10px 16px;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.20);
}
.masthead-logos .logo-link { display: flex; align-items: center; }
.masthead-logos .logo-link:hover { text-decoration: none; }
.logo-msst { height: 66px; width: auto; display: block; }
.logo-eng  { height: 46px; width: auto; display: block; }
.logo-ssl  { height: 46px; width: auto; display: block; }
.masthead-text { text-align: left; }
@media (max-width: 600px) {
  .masthead-text { text-align: center; }
  .logo-msst { height: 52px; }
  .logo-eng  { height: 38px; }
}
/* MSST wordmark: Overpass (clean Highway-Gothic-derived sans), a nod to the
   conference's NASA/national-labs heritage. Falls back to Space Grotesk, then
   system sans, if the self-hosted font file isn't present. */
.site-header .title {
  font-family: 'Overpass', var(--display), sans-serif;
  font-size: clamp(2rem, 4.5vw, 2.8rem);
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
  margin: 0;
}
.site-header .title a { color: #fff; }
.site-header .title a:hover { text-decoration: none; color: var(--gold-soft); }
.site-header .tagline {
  font-size: clamp(.85rem, 2vw, 1.02rem);
  font-weight: 400;
  margin: .45rem 0 0;
  color: var(--gold-soft);
  letter-spacing: .01em;
}

/* ---------------------------- Navigation --------------------------- */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(60, 0, 12, .92);
  backdrop-filter: saturate(160%) blur(8px);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid rgba(198,151,73,.35);
}
.site-nav ul {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: var(--max);
  display: flex; flex-wrap: wrap; justify-content: center;
}
.site-nav li a {
  display: block; color: #f3e7d8;
  padding: .8rem 1.05rem;
  font-size: .9rem; font-weight: 500; letter-spacing: .02em;
  border-bottom: 2px solid transparent;
}
.site-nav li a:hover { color: #fff; text-decoration: none; border-bottom-color: rgba(198,151,73,.6); }
.site-nav li a.active { color: #fff; border-bottom-color: var(--gold); }

/* -------------------------- Archive banner ------------------------- */
.archive-banner {
  background: var(--bg-tint);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  text-align: center;
  padding: .65rem 1rem;
  font-size: .9rem;
}
.archive-banner strong { color: var(--maroon-dark); }

/* ------------------------------- Hero ------------------------------ */
/* Works with: <a><img class="hero-img"></a> followed by <h1>.
   Also supports an explicit <section class="hero"> block (see pages). */
.hero {
  position: relative;
  max-width: var(--max);
  margin: 1.6rem auto 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  isolation: isolate;
  /* Fallback so the hero is a readable maroon block even if the photo
     hasn't loaded (offline, cache miss, asset not yet mirrored). */
  background: linear-gradient(135deg, var(--maroon-deep), var(--maroon));
  min-height: 240px;
}
.hero img { width: 100%; display: block; object-fit: cover; max-height: 420px; }
/* No colour tint over the photo — only a soft neutral shadow along the bottom
   so the white hero text stays legible. The campus image shows at full brightness. */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
}
.hero-content {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 1.8rem clamp(1.2rem, 4vw, 2.6rem);
  color: #fff;
}
.hero-eyebrow {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  font-size: .72rem; color: var(--gold-soft);
  background: rgba(0,0,0,.25);
  padding: .3rem .7rem; border-radius: 999px;
  margin-bottom: .7rem;
}
.hero-content h1 {
  font-family: var(--display);
  color: #fff; margin: 0 0 .3rem;
  font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.04; letter-spacing: -.01em;
}
.hero-content .hero-sub { margin: 0; font-size: clamp(1rem, 2.4vw, 1.25rem); color: #f3e7d8; font-weight: 500; }
.hero-cta { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: .6rem; }

/* Legacy plain hero image (kept for any page not using .hero) */
.hero-img { width: 100%; border-radius: var(--radius); margin: 1.4rem 0; box-shadow: var(--shadow); }

/* ------------------------------ Buttons ---------------------------- */
.btn {
  display: inline-block;
  font-weight: 600; font-size: .95rem;
  padding: .6rem 1.15rem; border-radius: 999px;
  background: var(--gold); color: var(--maroon-deep) !important;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow); background: #d8a955; }
.btn.btn-ghost {
  background: transparent; color: #fff !important;
  border-color: rgba(255,255,255,.5);
}
.btn.btn-ghost:hover { background: rgba(255,255,255,.12); }

/* ------------------------------ Layout ----------------------------- */
main { max-width: var(--max); margin: 0 auto; padding: 2.4rem clamp(1.1rem, 4vw, 1.6rem) 3.5rem; }

h1, h2, h3 { font-family: var(--display); color: var(--ink); line-height: 1.18; }
main > h1 { font-size: clamp(1.9rem, 4.5vw, 2.5rem); color: var(--maroon); margin: .2rem 0 1rem; letter-spacing: -.01em; }
h2 {
  font-size: 1.5rem; color: var(--maroon-dark);
  margin: 2.4rem 0 .8rem; padding-bottom: .35rem;
  border-bottom: 2px solid var(--line);
}
h3 { font-size: 1.16rem; margin: 1.6rem 0 .5rem; color: var(--ink); }

p { margin: 0 0 1.05rem; }
main ul:not(.papers):not(.site-nav ul) { padding-left: 1.2rem; }
main ul:not(.papers) li { margin: .25rem 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.4rem 0; }
del { color: #a99f97; }
code { background: var(--bg-tint); padding: .1rem .4rem; border-radius: 5px; font-size: .9em; }

/* Lead paragraph (first paragraph after main h1) */
main > p:first-of-type { font-size: 1.1rem; color: var(--ink); }

/* ----------------------------- Agenda ------------------------------ */
.day-block {
  margin: 1.8rem 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); background: var(--bg);
}
.day-head {
  background: linear-gradient(180deg, var(--maroon), var(--maroon-dark));
  color: #fff; padding: .9rem 1.3rem;
  font-family: var(--display); font-size: 1.15rem; font-weight: 600; letter-spacing: .01em;
}
.day-body { padding: .6rem 1.3rem 1.1rem; }
.slot {
  padding: .55rem 0; border-bottom: 1px solid var(--bg-tint);
  display: flex; flex-wrap: wrap; gap: .2rem .9rem;
}
.slot:last-child { border-bottom: 0; }
.slot .time {
  font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--maroon); min-width: 9rem; flex: 0 0 auto;
}
.session-title {
  font-family: var(--display); font-weight: 600;
  margin: 1.1rem 0 .3rem; color: var(--maroon-deep);
  background: var(--bg-tint); padding: .5rem .8rem; border-radius: var(--radius-sm);
  border-left: 4px solid var(--gold);
}

/* ------------------------- Papers / program ------------------------ */
.papers { list-style: none; padding: 0; margin: 1rem 0; }
.papers li {
  padding: .95rem 1.1rem; margin: .6rem 0;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg); box-shadow: var(--shadow);
}
.papers .ptitle { font-weight: 600; color: var(--ink); }
.papers .authors { color: var(--muted); font-size: .92rem; display: block; margin-top: .25rem; }
.papers a { font-weight: 600; }

/* ------------------------------ Tables ----------------------------- */
.agenda { width: 100%; border-collapse: collapse; margin: 1.1rem 0; font-size: .96rem; box-shadow: var(--shadow); border-radius: var(--radius); overflow: hidden; }
.agenda th, .agenda td { padding: .6rem .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.agenda thead th { background: var(--maroon); color: #fff; font-family: var(--display); font-weight: 600; letter-spacing: .03em; }
.agenda tbody tr:nth-child(even) { background: var(--bg-soft); }
.agenda tbody tr:hover { background: var(--bg-tint); }
.agenda td:first-child { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--maroon-dark); white-space: nowrap; }

/* ----------------------------- Sponsors ---------------------------- */
.sponsors { display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: center; margin: 1.6rem 0; }
.sponsors img { max-height: 84px; width: auto; filter: saturate(1.02); }
.sponsors .logo-hammerspace { max-height: 44px; }

/* Centered notice (e.g. registration closed) */
.notice {
  max-width: 560px; margin: 2.5rem auto;
  text-align: center;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 2.5rem 2rem;
}
.notice h1 { color: var(--maroon); margin-top: 0; }
.notice p { font-size: 1.1rem; color: var(--body); }

/* --------------------------- Year cards ---------------------------- */
.year-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.1rem; margin: 1.6rem 0; }
.year-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.3rem; background: var(--bg); box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.year-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--gold-soft); }
.year-card h3 { margin: 0 0 .25rem; color: var(--maroon); }
.year-card .meta { color: var(--muted); font-size: .9rem; }

/* ------------------------------ Footer ----------------------------- */
.site-footer {
  background: linear-gradient(180deg, var(--maroon-dark), var(--maroon-deep));
  color: #e9d9c4; text-align: center;
  padding: 2rem 1rem; margin-top: 2rem;
  font-size: .9rem;
  border-top: 3px solid var(--gold);
}
.site-footer a { color: var(--gold-soft); }
.site-footer p { margin: .3rem 0; }

/* --------------------------- Responsive ---------------------------- */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .slot .time { min-width: 0; flex-basis: 100%; }
  .hero-content { padding: 1.2rem; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}