/* ==========================================================================
   CS 598 course site — page layout.

   Everything specific to index.html lives here. Colors, fonts and spacing all
   come from the tokens in classical.css — if you need a new value, reach for a
   `var(--…)` first rather than typing a hex or a raw pixel size.

   Sections below match the sections of index.html, in order.
   ========================================================================== */

html { scroll-behavior: smooth; }

body { font-family: var(--font-body); }

a {
  color: var(--color-accent-700);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--color-accent-600); }

/* Tabular figures. Applied to anything that reads as a number rather than as
   prose — kickers, week labels, module numerals, fact rows. */
.tnum { font-feature-settings: 'tnum'; }

/* The one page measure. Every band of the page is centred in this. */
.container {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: var(--space-8);
}

/* Skip link — visible only when tabbed to. */
.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  background: var(--color-bg); color: var(--color-text);
  border: 1px solid var(--color-accent); border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3); text-decoration: none;
}
.skip-link:focus { top: var(--space-3); }


/* ── Navigation ─────────────────────────────────────────────────────────── */

.site-nav {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-divider);
}
.site-nav .container {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-6); flex-wrap: wrap;
  padding-block: var(--space-3);
}
.site-nav__brand {
  font-family: var(--font-heading); font-size: 20px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-text); text-decoration: none;
}
.site-nav__links {
  display: flex; flex-wrap: wrap; gap: var(--space-6);
  font-size: 13.5px; letter-spacing: 0.08em; text-transform: uppercase;
}
.site-nav__links a { color: var(--color-neutral-700); text-decoration: none; }
.site-nav__links a:hover { color: var(--color-accent-700); }


/* ── Header / hero ──────────────────────────────────────────────────────── */

.hero { padding-top: 88px; padding-bottom: var(--space-8); }

.hero__kicker {
  font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--color-accent-700);
  margin-bottom: var(--space-6);
}
.hero__title {
  font-family: var(--font-heading); font-weight: 400;
  font-size: clamp(40px, 7.2vw, 104px);
  line-height: 1.02; letter-spacing: -0.015em;
  margin: 0 0 var(--space-6);
  text-wrap: balance;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-6);
}
.hero__lede {
  margin: 0; max-width: 46ch;
  font-size: 21px; line-height: 1.62; font-style: italic;
  color: var(--color-neutral-800);
}

/* The "Level / Length / Toolchain" rail. Add or remove <div class="fact">
   blocks in index.html; this stays a single column at any count. */
.hero__facts {
  display: flex; flex-direction: column; gap: var(--space-3);
  font-size: 15px; line-height: 1.5;
  color: var(--color-neutral-700);
  border-left: 1px solid var(--color-divider);
  padding-left: var(--space-6);
}
.fact__label {
  display: block;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-neutral-600);
}


/* ── Hero plate (the figure under the header) ───────────────────────────── */

.hero-plate { padding-bottom: var(--space-8); }
.hero-plate .plate { width: 100%; display: block; }
.hero-plate img {
  width: 100%; height: 460px;
  object-fit: cover;
}
.hero-plate figcaption {
  margin-top: var(--space-3);
  font-size: 13.5px; font-style: italic;
  color: var(--color-neutral-600);
  text-align: center;
}

/* Opt out of the plate's warm archival grade. Worth adding to false-colour
   figures (gradient maps, heatmaps) where the sepia would misrepresent the
   data: <div class="plate plate--raw">. */
.plate--raw { filter: none; }


/* ── Generic content section ────────────────────────────────────────────── */

.section {
  padding-block: var(--space-8);
  border-top: 1px solid var(--color-divider);
}

/* Two-column section: a small uppercase label on the left, content on the
   right. Used by Overview, Prerequisites and Objectives. */
.section__grid {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}
.section__label {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-neutral-700);
  margin: 0; padding-top: 8px;
}


/* ── Overview ───────────────────────────────────────────────────────────── */

.prose-columns {
  columns: 2;
  column-gap: var(--space-8);
  column-rule: 1px solid var(--color-divider);
}
.prose-columns p {
  margin: 0 0 var(--space-4);
  font-size: 17px; line-height: 1.72;
  text-align: justify; hyphens: auto;
}
.prose-columns p:last-child { margin-bottom: 0; }


/* ── Prerequisites ──────────────────────────────────────────────────────── */

.prereqs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-6);
}
.prereq { border-top: 2px solid var(--color-accent); padding-top: var(--space-3); }
.prereq__title { font-family: var(--font-heading); font-size: 24px; font-weight: 600; }
.prereq__body {
  margin: var(--space-2) 0 0;
  font-size: 15px; line-height: 1.6;
  color: var(--color-neutral-700);
}


/* ── Objectives ─────────────────────────────────────────────────────────── */

/* Numbers are generated by CSS from the <ol>, so reordering or inserting an
   <li> renumbers everything automatically — nothing to renumber by hand. */
.objectives {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-4);
  counter-reset: objective;
}
.objectives > li {
  counter-increment: objective;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: baseline;
  border-bottom: 1px solid var(--color-divider);
  padding-bottom: var(--space-4);
  font-size: 18px; line-height: 1.6;
}
.objectives > li:last-child { border-bottom: 0; padding-bottom: 0; }
.objectives > li::before {
  content: counter(objective, decimal-leading-zero);
  font-family: var(--font-heading); font-size: 34px; font-weight: 400;
  color: var(--color-accent);
  font-feature-settings: 'tnum';
}


/* ── Syllabus ───────────────────────────────────────────────────────────── */

.syllabus { padding-bottom: 96px; }

.syllabus__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-6); flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.syllabus__title { font-family: var(--font-heading); font-weight: 400; font-size: 46px; margin: 0; }
.syllabus__note { margin: 0; font-size: 14px; font-style: italic; color: var(--color-neutral-600); }

/* A module: big roman numeral in the left gutter, weeks stacked on the right. */
.module {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 0 var(--space-6);
  align-items: start;
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-neutral-800);
}
.module__numeral {
  font-family: var(--font-heading); font-size: 44px; font-weight: 400;
  color: var(--color-accent-300);
  font-feature-settings: 'tnum';
  line-height: 1;
}
.module__title { font-family: var(--font-heading); font-weight: 600; font-size: 27px; margin: 0 0 4px; }
.module__span {
  margin: 0 0 var(--space-4);
  font-size: 15px; font-style: italic;
  color: var(--color-neutral-600);
}

/* A week is a native <details>. No JavaScript involved — the browser opens and
   closes it. Add `open` to the tag to have a week start expanded. */
.week { border-top: 1px solid var(--color-divider); }
.week:last-child { border-bottom: 1px solid var(--color-divider); }

.week__row {
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 24px;
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-3);
}
.week__row::-webkit-details-marker { display: none; }
.week__row::marker { content: ""; }
.week__row:hover { background: var(--color-neutral-200); }
.week[open] .week__row { background: var(--color-accent-100); }

.week__num {
  font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-neutral-600);
  font-feature-settings: 'tnum';
}
.week__title { font-family: var(--font-heading); font-size: 22px; font-weight: 600; }
.week__chev {
  color: var(--color-accent); font-size: 15px;
  justify-self: end;
  transition: transform 160ms ease;
}
.week[open] .week__chev { transform: rotate(90deg); }

.week__body {
  margin: 0;
  padding: 0 var(--space-3) var(--space-4) calc(74px + var(--space-4) + var(--space-3));
  font-size: 16px; line-height: 1.7;
  color: var(--color-neutral-800);
  max-width: 72ch;
}


/* ── Footer ─────────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--color-divider);
  background: var(--color-surface);
}
.site-footer .container {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-6); flex-wrap: wrap;
  padding-block: var(--space-8);
  font-size: 14px; color: var(--color-neutral-700);
}
.site-footer__brand {
  font-family: var(--font-heading); font-size: 19px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-text);
}
.site-footer__tagline { font-style: italic; }


/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  /* Label-left sections stack: the label becomes a heading above its content. */
  .section__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .section__label { padding-top: 0; }

  .prose-columns { columns: 1; }
  .prose-columns p { max-width: 68ch; }

  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__facts {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--color-divider); padding-top: var(--space-4);
  }
}

@media (max-width: 700px) {
  .container { padding-inline: var(--space-4); }
  .hero { padding-top: var(--space-8); }
  .site-nav__links { gap: var(--space-4); font-size: 12.5px; }
  .hero-plate img { height: 260px; }
  .syllabus__title { font-size: 34px; }

  .module { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .module__numeral { font-size: 32px; }

  /* Week number moves onto its own line above the title. */
  .week__row { grid-template-columns: minmax(0, 1fr) 24px; gap: var(--space-2); }
  .week__num { grid-column: 1 / -1; }
  .week__title { font-size: 19px; }
  .week__body { padding-left: var(--space-3); }

  .objectives > li { grid-template-columns: 44px minmax(0, 1fr); font-size: 16px; }
  .objectives > li::before { font-size: 28px; }
}

/* Respect a reduced-motion preference for the smooth scroll and chevron. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .week__chev { transition: none; }
}

/* ── Print ──────────────────────────────────────────────────────────────── */

@media print {
  .site-nav, .skip-link { display: none; }
  /* Print every week's topics, whether or not the row was expanded on screen.
     content-visibility is needed alongside display for current Chrome, which
     hides a closed <details> body that way rather than with display:none. */
  .week__body { display: block !important; content-visibility: visible !important; }
  .week__chev { display: none; }
  .section, .module { break-inside: avoid; }
}