/* Course page: the teaching plate on top, then a calm reference page in four sections. Builds on plate.css. */
.course-hero header { min-height: min(34rem, 72vh); }
.course-hero .who a { color: var(--on-navy); }
.course-hero .who span { margin-inline: .35rem; opacity: .6; }
.course-hero .kind { font: 600 .9rem var(--sans); color: #F5A878; margin: 0 0 .75rem; }
.course-hero h1.course-title { font: 600 clamp(2.2rem, 4.4vw, 3.4rem)/1.06 var(--serif); letter-spacing: -.015em; margin: 0 0 1.25rem; }

/* In-page menu, pinned while reading. */
.course-nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: rgba(250,251,253,.92);
              backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.course-nav .wrap { display: flex; gap: .25rem 1.75rem; flex-wrap: wrap; }
.course-nav a { display: inline-block; padding-block: .9rem; font-weight: 500; font-size: .95rem; color: var(--ink-2); text-decoration: none; border-bottom: 2px solid transparent; }
.course-nav a:hover { color: var(--ink); border-bottom-color: var(--ece-orange); }
.course section { scroll-margin-top: 3.5rem; }
.course h2 { font: 600 2rem/1.15 var(--serif); margin: 0 0 1rem; }

/* Overview: prose beside the facts. */
.overview { display: grid; grid-template-columns: 3fr 2fr; gap: 3.5rem; padding-block: 4rem; }
.ov-text p { font: 400 1.1rem/1.75 var(--serif); margin: 0 0 1rem; max-width: 40rem; }
.facts { margin: 0; border-top: 2px solid var(--ece-navy); }
.facts div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding-block: .85rem; border-bottom: 1px solid var(--rule); }
.facts dt { color: var(--ink-2); font-size: .92rem; }
.facts dd { margin: 0; font-weight: 500; }

/* Course content: a scroll story. The chapters are an ordered list on the left; a pinned
   figure on the right (heroes/stack.js) follows one packet down the protocol stack. Without
   the script the list stands alone, in one column. */
.content { --navh: 3.2rem; background: #fff; border-block: 1px solid var(--rule); padding-block: 4rem 0; }
.content-head .lede { margin-bottom: 1rem; }
.story { position: relative; }
.story-stage { display: none; }
.story-text { position: relative; padding: 2rem 0 4rem 2.25rem; max-width: 40rem; }
.story-rail { position: absolute; left: .45rem; top: 2.6rem; bottom: 5rem; width: 2px; margin-left: -1px; background: var(--rule); border-radius: 1px; }
.story-fill { display: block; width: 100%; height: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(233,113,50,.3), var(--ece-orange)); }
.chapters { list-style: none; margin: 0; padding: 0; }
.chapter { position: relative; padding-block: 2.5rem; scroll-margin-top: calc(var(--navh) + 1rem); }
.ch-num { position: relative; margin: 0 0 .45rem; font: 500 .85rem/1.2 var(--mono); color: var(--ece-deep); }
.ch-num::before { content: ""; position: absolute; left: -2.25rem; top: 50%; width: 12px; height: 12px; margin-left: calc(.45rem - 6px);
  transform: translateY(-50%); border-radius: 50%; background: #fff; border: 2px solid #B9C1D8; transition: all .35s; }
.chapter h3 { font: 600 1.05rem/1.35 var(--sans); color: var(--ink-2); margin: 0 0 .5rem; }
.ch-q { font: 600 clamp(1.55rem, 2.3vw, 1.95rem)/1.22 var(--serif); letter-spacing: -.01em; color: var(--ece-navy); margin: 0 0 .75rem; text-wrap: balance; }
.ch-gist { font: 400 1.08rem/1.6 var(--serif); color: var(--ink-2); margin: 0 0 1.35rem; }
.ch-oh { font: 600 .88rem/1.3 var(--sans); color: var(--ink); margin: 0 0 .5rem; }
.outcomes { list-style: none; margin: 0 0 1.35rem; padding: 0; display: grid; gap: .45rem; color: var(--ink-2); font-size: .96rem; line-height: 1.55; }
.outcomes li { position: relative; padding-left: 1.1rem; }
.outcomes li::before { content: ""; position: absolute; left: 0; top: .68em; width: .45rem; height: 2px; background: #B9C1D8; transition: background .35s; }
.outcomes strong { color: var(--ink); font-weight: 600; }
.chapter.is-past .ch-num::before { background: var(--ece-deep); border-color: var(--ece-deep); }
.chapter.is-current .ch-num { color: #B8531D; }
.chapter.is-current .ch-num::before { background: var(--ece-orange); border-color: #fff; width: 15px; height: 15px; margin-left: calc(.45rem - 7.5px); box-shadow: 0 0 0 4px rgba(233,113,50,.22); }
.chapter.is-current .outcomes li::before { background: var(--ece-orange); }
.ch-slides, .signin { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; text-decoration: none; border-radius: 6px; }
.ch-slides { font-size: .9rem; color: var(--ece-navy); border: 1px solid var(--rule); padding: .5rem .85rem; min-height: 2.5rem; }
.ch-slides:hover { border-color: var(--ece-navy); }
.ch-slides svg, .signin svg { width: .95rem; height: .95rem; fill: currentColor; }

/* The figure: a navy plate pinned beside the text on wide screens. */
.story.is-live .story-stage { display: block; }
.story-card { position: relative; height: 100%; border-radius: 14px; overflow: hidden; color: var(--on-navy);
  background: radial-gradient(120% 80% at 70% 10%, #1B2A78 0%, rgba(27,42,120,0) 60%), linear-gradient(165deg, #151D4B 0%, #0F1A55 55%, #0A2466 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 18px 40px -24px rgba(21,29,75,.55); }
.story-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.story-cap { position: relative; z-index: 1; margin: 0; padding: 1.1rem 1.35rem 0; display: flex; flex-direction: column; gap: .2rem; }
.sc-n { font: 500 .78rem/1.2 var(--mono); color: #F5A878; }
.sc-t { font: 600 1.05rem/1.35 var(--serif); color: #fff; max-width: 30rem; }

@media (min-width: 801px) {
  .story.is-live { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 3.5rem; }
  .story.is-live .story-stage { order: 2; position: sticky; top: calc(var(--navh) + 1.25rem); height: calc(100vh - var(--navh) - 2.5rem);
    height: calc(100svh - var(--navh) - 2.5rem); max-height: 46rem; margin-block: 2rem 4rem; }
  .story.is-live .story-text { order: 1; padding-bottom: 6rem; }
  .story.is-live .chapter { min-height: 64vh; }
}
@media (max-width: 800px) {
  .content { padding-top: 3rem; }
  /* A band pinned under the section menu; the chapters scroll beneath it. */
  .story.is-live .story-stage { position: sticky; top: var(--navh); z-index: 5; height: 44vh; height: 44svh; margin-inline: -1.5rem; }
  .story.is-live .story-card { border-radius: 0; }
  .story.is-live .chapter { scroll-margin-top: calc(var(--navh) + 44svh + .5rem); }
  .story-text { padding-left: 1.75rem; padding-bottom: 3rem; }
  .story-rail { left: .3rem; }
  .ch-num::before { left: -1.75rem; margin-left: calc(.3rem - 6px); }
  .chapter.is-current .ch-num::before { margin-left: calc(.3rem - 7.5px); }
  .story-cap { padding: .7rem 1rem 0; gap: .1rem; }
  .sc-n { font-size: .7rem; }
  .sc-t { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-num::before, .outcomes li::before { transition: none; }
}

/* Slides: the one door that needs a sign-in. */
.slides-band { background: linear-gradient(104deg, var(--ece-navy) 0%, var(--ece-deep) 80%); color: #fff; padding-block: 3.5rem; }
.slides-band .wrap { display: grid; grid-template-columns: 2fr 1fr; gap: 3rem; align-items: center; }
.slides-band h2 { color: #fff; }
.slides-band p { color: var(--on-navy); margin: 0; max-width: 40rem; }
.signin { justify-self: end; background: var(--ece-orange); color: var(--ece-navy); padding: .85rem 1.3rem; min-height: 2.75rem; }
.signin:hover { background: #D6621F; }

/* Reading. */
.reading { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 3.5rem; padding-block: 4rem; }
.reading h2 { grid-column: 1 / -1; }
.res-label { font-size: .85rem; font-weight: 600; color: #B8531D; margin: 0 0 .5rem; }
.book h3 { font: 600 1.45rem/1.25 var(--serif); margin: 0 0 .25rem; }
.by { color: var(--ink-2); margin: 0 0 .75rem; font-size: .95rem; }
.book p:last-child { max-width: 34rem; }
.also { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.also h4 { font: 600 1.05rem var(--serif); margin: 0; }
.also .by { margin: 0 0 .2rem; }
.also p:last-child { margin: 0; color: var(--ink-2); font-size: .95rem; }

@media (max-width: 900px) {
  .overview, .reading, .slides-band .wrap { grid-template-columns: 1fr; gap: 2rem; }
  .signin { justify-self: start; }
}

/* Slides entry in the banner, so students do not have to scroll for it. */
.course-hero .hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.course-hero .hero-actions a { pointer-events: auto; }
.course-hero .hero-actions .signin { justify-self: auto; }
.course-hero .ghost { display: inline-flex; align-items: center; font-weight: 600; color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.4); border-radius: 6px; padding: .85rem 1.3rem; min-height: 2.75rem; }
.course-hero .ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }