/* MAE-6291 course site — page styles only.
   Brand tokens come from tokens.css; element defaults from base.css.
   Every var() carries a fallback that mirrors the barba-brand values, so the
   page still renders sensibly if a token name differs or the brand files have
   not been copied in yet. When tokens.css is present, its values win. */

body {
  background: var(--color-paper, #ffffff);
  color: var(--color-ink, #181712);
  font-family: var(--font-sans, "Source Sans 3", system-ui, sans-serif);
  margin: 0;
}

.wrap {
  max-width: 56rem;
  margin-inline: auto;
  padding-inline: var(--space-8, 2rem);
}

/* Header / wordmark */
.site-header { padding-block: var(--space-12, 3rem) var(--space-8, 2rem); border-bottom: 1px solid var(--color-hairline, #EAEBE6); }
.mark {
  font-family: var(--font-serif, Merriweather, Georgia, serif);
  font-size: 1.5rem;
  line-height: 1.1;
  text-decoration: none;
  display: inline-block;
  margin-bottom: var(--space-8, 2rem);
}
.mark .first { color: var(--color-red, #CE2406); font-weight: 400; }
.mark .rest  { color: var(--color-ink, #181712); font-weight: 700; }

.course-meta {
  color: var(--color-muted, #787876);
  margin: 0 0 var(--space-3, .75rem);
}
.site-header h1 {
  font-family: var(--font-serif, Merriweather, Georgia, serif);
  font-size: var(--text-h1, 2.5rem);
  line-height: 1.15;
  margin: 0 0 var(--space-4, 1rem);
}
.tagline {
  font-size: var(--text-h3, 1.25rem);
  line-height: 1.4;
  margin: 0;
  max-width: none;
}

/* Sections */
main section { padding-block: var(--space-8, 2rem); }
section > h2,
.schedule caption {
  font-family: var(--font-serif, Merriweather, Georgia, serif);
  font-size: var(--text-h2, 1.5rem);
  font-weight: 700;
  text-align: left;
  margin: 0 0 var(--space-4, 1rem);
}
.about p { max-width: 40rem; margin: 0; }

/* Details */
.details dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2, .5rem) var(--space-6, 1.5rem);
  margin: 0;
  max-width: 44rem;
  border: 1px solid var(--color-hairline, #EAEBE6);
  padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
}
.details dt {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps, .08em);
  font-size: var(--text-meta, .8125rem);
  color: var(--color-muted, #787876);
  padding-top: .25em;
}
.details dd { margin: 0; }

/* Schedule table */
.table-wrap { overflow-x: auto; }
.schedule table {
  border-collapse: collapse;
  width: 100%;
  min-width: 46rem;            /* below this, the wrapper scrolls horizontally */
}
.schedule caption { caption-side: top; }
.caption-sub {
  display: block;
  font-family: var(--font-sans, "Source Sans 3", system-ui, sans-serif);
  font-size: var(--text-meta, .875rem);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-muted, #787876);
  margin-top: var(--space-2, .5rem);
}
.schedule th,
.schedule td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-3, .75rem) var(--space-4, 1rem);
  border-bottom: 1px solid var(--color-hairline, #EAEBE6);
}
.schedule thead th {
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps, .08em);
  font-size: var(--text-meta, .8125rem);
  font-weight: 700;
  color: var(--color-ink, #181712);
  border-bottom: 2px solid var(--color-ink, #181712);
  white-space: nowrap;
}
.schedule tbody th { font-weight: 400; }   /* class number marks structure: ink, never red */
.schedule tbody th.col-class {
  font-family: var(--font-serif, Merriweather, Georgia, serif);
  font-weight: 700;
  font-size: 1.375rem;
}
.col-class { width: 3.5rem; white-space: nowrap; }
.col-date  { white-space: nowrap; }
.schedule .col-date { color: var(--color-muted, #787876); }
.schedule th:nth-child(4),
.schedule th:nth-child(5),
.schedule td:nth-child(4),
.schedule td:nth-child(5) {
  width: 5.5rem;
  white-space: nowrap;
}
.schedule a { text-decoration: none; }
.schedule tbody td:nth-child(4) a,
.schedule tbody td:nth-child(5) a { font-weight: 400; }
.schedule a::after { content: " ↗"; font-size: .7em; vertical-align: .3em; }
.schedule a:hover,
.schedule a:focus-visible { text-decoration: underline; }
.schedule .topic-main { max-width: none; }
.schedule .topic-detail {
  margin: .5rem 0 0;
  max-width: none;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--color-muted, #787876);
}
.schedule .topic-label {
  color: var(--color-ink, #181712);
  font-weight: 700;
  margin-right: .35rem;
}
.muted { color: var(--color-muted, #787876); }
.schedule tr.no-class th,
.schedule tr.no-class td { color: var(--color-muted, #787876); }
.journey-figure {
  margin: 0;
  border: 1px solid var(--color-hairline, #EAEBE6);
  padding: var(--space-4, 1rem);
  background: var(--color-paper, #ffffff);
}
.journey-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--color-hairline, #EAEBE6);
  margin-top: var(--space-8, 2rem);
  padding-block: var(--space-8, 2rem) var(--space-16, 4rem);
  font-size: var(--text-meta, .8125rem);
  color: var(--color-muted, #787876);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-4, 1rem);
}
.site-footer p { margin: 0; }

/* Quality floor */
a { color: var(--color-red, #CE2406); }
a:focus-visible { outline: 2px solid var(--color-red, #CE2406); outline-offset: 2px; }
.table-wrap:focus-visible { outline: 2px solid var(--color-red, #CE2406); outline-offset: 2px; }

@media (max-width: 36rem) {
  .wrap { padding-inline: var(--space-6, 1.5rem); }
  .site-header { padding-block: var(--space-8, 2rem) var(--space-6, 1.5rem); }
}