/* ============================================================
   Do Quantum - chapter pages (uva.html, later umd.html / ucla.html)
   Layers on styles.css (tokens, header, buttons, sections, cred-strip,
   three-col, track cards, chapters-trio, impact, CTA, footer).
   Responsive at 320 / 768 / 1024. No hover states on cards that
   are not links; only real controls (buttons, links) respond.
   ============================================================ */

/* Header: same fix as partnership.css. The brand name must not wrap: the
   header is fixed, so a second line would push --header-h and the page down. */
.brand-name { white-space: nowrap; }

/* Keep nav labels on one line between the 900px drawer breakpoint and the
   point where the row has room; the gap takes the squeeze instead. */
@media (min-width: 901px) {
  .nav-menu { gap: clamp(18px, 2.4vw, 34px); }
  .nav-menu a { white-space: nowrap; }
}

/* Vertical rhythm inherits styles.css untouched (same .section padding and
   .section-head margins as the home page), so the two pages read as one site.
   The hero is the home page's own furniture end to end: chapter pages reuse
   .hero / .hero-grid / .hero-copy / .hero-title / .hero-sub / .hero-actions /
   .hero-note / .hero-visual / .orbits from styles.css, so typography and the
   atom's size and position are identical on every page by construction. The
   constellation's interactive orbit-* classes live in styles.css too. */

/* ---------- Sub-block inside a section (as on the partnership page) ---------- */
.ch-subhead { margin-top: clamp(48px, 6vw, 70px); padding-top: 34px; border-top: 1px solid var(--line); }
.ch-subhead h3 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); }
.ch-subhead p { margin-top: 12px; color: var(--gray); max-width: 64ch; }

/* ---------- Fact grid ---------- */
/* Hairline grid: 1px gaps over the divider colour, so cells must match the
   section background and the count must stay even. Not interactive: no hover. */
.ch-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 30px; }
.ch-fact { background: var(--white); padding: 28px 26px; margin: 0; }
.section-alt .ch-fact { background: var(--paper); }
.ch-fact dt { font-size: .76rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--purple-600); }
.ch-fact dd { margin: 11px 0 0; color: var(--gray); }
.ch-fact dd strong { color: var(--heading); font-weight: 600; }

/* ---------- The year: interactive stepper ---------- */
/* Desktop: a horizontal rail of eight numbered steps over one shared detail
   panel. Phone/tablet (<=920): the rail turns vertical and each step opens
   as an accordion directly beneath its button, so the detail is never a
   screen away from the tap that asked for it. Steps are real <button>s:
   hover states are allowed here because every one of them is clickable. */
.ch-rail { display: grid; grid-template-columns: repeat(8, 1fr); margin-top: 10px; }
.ch-step { position: relative; }
/* Connector between dots. The dot sits above it (z-index). is-done segments
   tint purple to read as progress. --purple-200 stays light in dark mode,
   the same precedent as the partnership page's arc rail. */
.ch-step:not(:last-child)::before { content: ""; position: absolute; top: 17px; left: 36px; right: 0; height: 2px; background: var(--line); }
.ch-step.is-done:not(:last-child)::before, .ch-step.is-active:not(:last-child)::before { background: var(--purple-200); }
.ch-step-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  width: 100%; padding: 0 12px 0 0; background: none; border: 0; cursor: pointer;
  font-family: var(--sans); text-align: left;
}
.ch-step-dot {
  position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 600; font-size: 1rem;
  background: var(--purple-50); border: 1px solid var(--line-strong); color: var(--gray);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.ch-step-label { font-size: .9rem; font-weight: 600; color: var(--gray); transition: color .2s ease; }
.ch-step-btn:hover .ch-step-dot { border-color: var(--purple-500); color: var(--purple-700); }
.ch-step-btn:hover .ch-step-label { color: var(--purple-700); }
.ch-step-btn:focus-visible { outline: none; }
.ch-step-btn:focus-visible .ch-step-dot { outline: 2px solid var(--purple-500); outline-offset: 3px; }
.ch-step.is-done .ch-step-dot { background: transparent; border-color: var(--purple-500); color: var(--purple-700); }
/* --white flips with the theme, so the numeral stays legible in dark mode
   (near-black on lilac), same pattern as the partnership TRL scale. */
.ch-step.is-active .ch-step-dot { background: var(--purple-600); border-color: var(--purple-600); color: var(--white); }
.ch-step.is-active .ch-step-label { color: var(--purple-700); }

/* Per-step content. Hidden on desktop (the shared panel shows it); the
   accordion styles at <=920 reveal it in place. Spacing is margins, not
   padding, so the 0fr-collapsed accordion row closes to a clean zero. */
.ch-step-body { display: none; }
.ch-step-tag { display: block; font-size: .74rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--purple-500); }
.ch-step-inner h3 { font-size: 1.5rem; margin: 10px 0 12px; }
.ch-step-inner p { color: var(--gray); max-width: 68ch; }
.ch-step-inner a { color: var(--purple-600); border-bottom: 1px solid var(--purple-200); transition: border-color .2s ease; }
.ch-step-inner a:hover { border-color: var(--purple-600); }

/* The shared detail panel (desktop). min-height fits the longest step so the
   page does not jump between steps. */
.ch-detail { margin-top: 34px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--white); padding: clamp(26px, 3vw, 40px); min-height: 15rem; display: flex; flex-direction: column; align-items: flex-start; }
.ch-detail.is-in .ch-detail-body { animation: chIn .35s ease both; }
@keyframes chIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ch-detail-body { margin-bottom: 20px; }
/* margin-top:auto pins the button to the panel's bottom-left, so it sits in
   the same spot for every step (the panel's min-height absorbs the one-vs-two
   line difference in the text above) and repeated clicking never has to chase it. */
.ch-detail-next {
  margin-top: auto; padding: 0; background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-weight: 600; font-size: .96rem; color: var(--purple-600);
}
.ch-detail-next span { transition: transform .2s ease; }
.ch-detail-next:hover { color: var(--purple-700); }
.ch-detail-next:hover span { transform: translateX(5px); }
.ch-detail-next:focus-visible { outline: 2px solid var(--purple-500); outline-offset: 3px; border-radius: 2px; }

/* ---------- The network ---------- */
/* .chapters-trio / .chapter come from styles.css. The page's own chapter is
   marked, mirroring the home page's .path-feature treatment. Cards are not
   links (yet), so none of them respond to hover. */
.chapter.is-here { border-color: var(--purple-500); background: linear-gradient(180deg, var(--purple-50), var(--white)); box-shadow: var(--shadow); }
.ch-here { display: inline-block; font-size: .7rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; background: var(--purple-600); color: var(--white); padding: 4px 11px; border-radius: 999px; margin-bottom: 14px; }

/* ---------- FAQs ---------- */
.ch-faq { display: grid; border-top: 1px solid var(--line); }
.ch-q { display: grid; grid-template-columns: 280px 1fr; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--line); align-items: start; }
.ch-q h3 { font-size: 1.15rem; }
.ch-q p { color: var(--gray); max-width: 68ch; }
.ch-q p a { color: var(--purple-600); border-bottom: 1px solid var(--purple-200); }

/* ---------- Footer ---------- */
/* The full site footer (.footer-grid / .footer-nav) from styles.css, same as
   the home page; chapter pages are not standalone, so no "back to" layout. */

/* ============================================================
   Responsive: 1024 tablet-landscape / 768 tablet / 320 phone
   ============================================================ */

/* Tablet landscape and below: the site's own grids collapse at 920. */
@media (max-width: 920px) {
  /* The hero collapse comes from styles.css, same as the home page. */

  /* The rail turns vertical; each step opens in place as an accordion. */
  .ch-rail { grid-template-columns: 1fr; }
  .ch-step-btn { flex-direction: row; align-items: center; gap: 14px; padding: 10px 0; }
  .ch-step-dot { width: 32px; height: 32px; font-size: .95rem; }
  .ch-step-label { font-size: 1.02rem; }
  .ch-step:not(:last-child)::before { top: 46px; bottom: -4px; left: 15px; right: auto; width: 2px; height: auto; }
  .ch-detail { display: none; }
  .ch-step-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.2, .7, .2, 1); }
  .ch-step.is-active .ch-step-body { grid-template-rows: 1fr; }
  .ch-step-inner { overflow: hidden; min-height: 0; margin-left: 46px; }
  .ch-step-inner > :first-child { margin-top: 4px; }
  .ch-step-inner > :last-child { margin-bottom: 20px; }
  .ch-step-inner h3 { font-size: 1.2rem; margin: 8px 0 8px; }
}

/* Tablet portrait (768) */
@media (max-width: 768px) {
  .ch-facts { grid-template-columns: 1fr; }
  .ch-q { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
}

/* Phone (320 - 480) */
@media (max-width: 480px) {
  .ch-fact { padding: 22px 20px; }
}