:root {
  --bg: #ffffff;
  --panel: #ffffff;
  --ink: #20272b;
  --muted: #5c676d;
  --line: #d7dcde;
  --soft: #eef1f1;
  --datavis: #a94f32;
  --datavis-soft: #f8eee9;
  --computing: #176b72;
  --computing-soft: #e9f3f3;
  --link: #8d3e23;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: var(--link); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
.skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 100; background: #fff; padding: .6rem .8rem; }
.skip-link:focus { top: 1rem; }

.site-header { border-bottom: 1px solid var(--line); background: #fff; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 980px; margin: 0 auto; padding: .7rem 1.25rem; }
.brand { color: var(--ink); font-weight: 750; line-height: 1.05; text-decoration: none; }
.brand small { display: block; margin-top: .25rem; color: var(--muted); font-size: .68rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.nav-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .3rem .8rem; font-size: .9rem; font-weight: 650; }
.nav-links a { color: var(--muted); text-decoration: none; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); text-decoration: underline; }

.wrap { max-width: 980px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
h1, h2, h3 { margin: 0; line-height: 1.18; }
h1 { max-width: 28ch; font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.4rem, 2.5vw, 1.8rem); letter-spacing: -.01em; }
h3 { font-size: 1.08rem; }
p { margin: .7rem 0 0; }
.eyebrow, .kicker, .course-code, .lesson-number, .phase-label { margin: 0 0 .45rem; color: var(--muted); font-size: .72rem; font-weight: 750; letter-spacing: .065em; text-transform: uppercase; }
.lede, .section-note, .muted { color: var(--muted); }

.hero, .course-hero, .intro { border: 0; border-bottom: 1px solid var(--line); background: #fff; padding: 1.25rem 0 1.5rem; }
.hero { min-height: 0; }
.hero::before, .hero::after { display: none; }
.hero-grid, .course-hero, .intro { display: block; min-height: 0; padding: 1.25rem 0 1.5rem; }
.hero h1 { max-width: none; margin: 0; color: var(--ink); font-size: clamp(2rem,4vw,2.8rem); line-height: 1.08; }
.hero h1 em { color: inherit; font-style: normal; }
.hero-copy { max-width: 46rem; color: var(--muted); font-size: 1.05rem; }
.hero-aside { max-width: 48rem; margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .75rem; }
.hero-aside strong { display: block; margin-bottom: .35rem; }
.hero-aside p { margin: 0; color: var(--muted); }
.course-hero.datavis, .course-hero.computing, .course-hero.neutral { background: #fff; }
.course-hero .lede, .intro .lede { max-width: 48rem; color: var(--muted); font-size: 1.05rem; }
.notice { max-width: 52rem; margin-top: 1rem; border-left: 3px solid var(--ink); padding-left: .85rem; color: var(--muted); }

.button-row { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-top: .8rem; }
.button, .button-primary, .button-datavis, .hero .button, .hero .button-primary { display: inline; min-height: 0; border: 0; border-radius: 0; background: none; color: var(--link); padding: 0; font-size: .9rem; font-weight: 650; text-decoration: underline; }

.semester-strip { display: grid; grid-template-columns: 1fr .45fr 1fr .55fr; margin-top: 1rem; border-block: 1px solid var(--line); background: #fff; }
.semester-strip > div { padding: .8rem 1rem; }
.semester-strip > div + div { border-left: 1px solid var(--line); }
.semester-strip strong { display: block; font-size: .9rem; }
.semester-strip span { color: var(--muted); font-size: .82rem; }
.semester-strip .mini-one, .semester-strip .mini-two, .semester-strip .break, .semester-strip .finals { background: #fff; }

.section, .wrap > section:not(.hero):not(.course-hero):not(.intro):not(.section) { padding: 1.6rem 0; }
.section + .section, .wrap > section + section { border-top: 1px solid var(--line); }
.section-head { display: block; margin-bottom: .8rem; }
.section-head > p { max-width: 52rem; }
.section-head p { color: var(--muted); }

.course-pair, .calendar-columns, .project-grid, .resource-grid, .cards, .final-grid, .lesson-grid { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: .8rem; }
.course-panel, .project-card, .resource-card, .card, .lesson-card, .setup-summary, .source-credit { border: 0; border-top: 1px solid var(--line); background: #fff; padding: .85rem 0; }
.course-panel { min-height: 0; }
.course-panel::after { display: none; }
.course-panel.datavis, .course-panel.computing { border-top: 1px solid var(--line); }
.course-panel h3 { max-width: none; font-size: 1.55rem; }
.course-panel .tagline, .resource-card p, .card p, .project-card p { color: var(--muted); }
.fact-list { display: grid; gap: .4rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.fact-list li { display: grid; grid-template-columns: 6rem 1fr; gap: .5rem; border-top: 1px solid var(--line); padding-top: .4rem; }
.fact-list strong { font-size: .72rem; text-transform: uppercase; }

.bridge { display: block; border: 0; background: #fff; color: var(--ink); padding: 0; }
.bridge h2 { color: var(--ink); }
.bridge p, .pipeline-step small { color: var(--muted); }
.pipeline-line { display: grid; gap: .45rem; margin-top: 1rem; }
.pipeline-step { display: grid; grid-template-columns: 2.5rem 1fr; gap: .35rem; align-items: start; }
.pipeline-step span { width: auto; height: auto; color: var(--muted); font-size: .72rem; font-weight: 700; }
.pipeline-step strong { display: block; }

.mini-calendar { overflow: hidden; border-top: 1px solid var(--line); background: #fff; }
.mini-calendar header { padding: .85rem 0; color: var(--ink); }
.mini-calendar.datavis header, .mini-calendar.computing header { background: #fff; }
.mini-calendar header p { margin: .15rem 0 0; color: var(--muted); font-size: .88rem; }
.session-row { display: grid; grid-template-columns: 7.25rem 1fr; gap: .8rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.session-row time { color: var(--muted); font-size: .78rem; }
.session-row strong { display: block; font-size: .92rem; }
.session-row span { color: var(--muted); font-size: .86rem; }
.session-row.break-row { background: var(--soft); }

.project-grid { grid-template-columns: 1fr; }
.project-card { display: flex; min-height: 0; flex-direction: column; }
.project-card.datavis, .project-card.computing { border-top: 1px solid var(--line); }
.project-card .project-number { color: var(--muted); font-size: .72rem; }
.project-card h3 { margin-top: .6rem; font-size: 1.25rem; }
.project-card .button-row { margin-top: auto; padding-top: .75rem; }
.resource-grid, .cards { grid-template-columns: 1fr; }

.source-credit { border-block: 1px solid var(--line); background: #fff; }
.source-credit p { max-width: 60rem; color: var(--muted); }
.lesson-grid { grid-template-columns: 1fr; }
.lesson-card, .lesson-card.advanced { border-left: 0; }
.lesson-card h3 { min-height: 0; }
.lesson-card p:last-child { color: var(--muted); font-size: .9rem; }
.lesson-number { color: var(--computing); }
.lesson-card.advanced .lesson-number { color: var(--datavis); }

.weekly-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2rem; margin-top: 1rem; }
.weekly-card { border-top: 2px solid var(--line); padding-top: .85rem; }
.weekly-card h3 { font-size: 1.2rem; }
.weekly-items { margin: .7rem 0 0; padding-left: 1.15rem; }
.weekly-items li { margin: .45rem 0; }
.weekly-items .due-item { color: var(--ink); }
.weekly-items .due-item::marker { color: var(--datavis); }
.release-gate { white-space: nowrap; }
.release-status { color: var(--muted); font-size: .88rem; }
.release-status::before { content: "🔒 "; }

.homework-shortcuts { padding: 1.35rem 0 1.5rem; border-bottom: 1px solid var(--line); }
.homework-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.homework-heading h2 { white-space: nowrap; }
.homework-heading p:last-child { margin: 0; color: var(--muted); font-size: .9rem; text-align: right; }
.homework-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; margin-top: 1rem; }
.homework-gate { display: block; min-width: 0; white-space: normal; }
.homework-gate .release-files { display: block; }
.homework-format-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; min-width: 0; }
.homework-gate .release-files.homework-format-links { display: grid; }
.homework-format-links .homework-tab { padding-inline: .55rem; }
.homework-tab { display: block; min-height: 4.25rem; border: 1px solid var(--line); background: #fff; color: var(--ink); padding: .65rem .75rem; text-decoration: none; }
.homework-tab:hover { border-color: currentColor; background: var(--soft); text-decoration: none; }
.homework-tab strong, .homework-tab small { display: block; }
.homework-tab strong { font-size: .95rem; }
.homework-tab small { margin-top: .2rem; color: var(--muted); font-size: .75rem; line-height: 1.3; }
.homework-tab.is-locked { background: var(--soft); color: var(--muted); cursor: default; }
.homework-tab.is-locked::before { display: block; float: right; content: "🔒"; font-size: .75rem; }
.homework-shortcuts .release-status::before { content: none; }
.course-datavis .homework-tab:not(.is-locked) { border-top: 3px solid var(--datavis); }
.course-computing .homework-tab:not(.is-locked) { border-top: 3px solid var(--computing); }
.homework-tab-index { background: var(--soft); }

.week-list, .calendar { display: grid; gap: 0; margin-top: 1rem; }
.week-card { display: grid; grid-template-columns: 8.5rem minmax(0,1fr); gap: 1rem; border: 0; border-top: 1px solid var(--line); background: #fff; padding: .85rem 0; }
.week-label { color: var(--muted); font-size: .75rem; text-transform: uppercase; }
.week-label strong { display: block; color: var(--ink); font-size: 1.2rem; line-height: 1.1; text-transform: none; }
.week-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.course-block { border-left: 4px solid var(--accent); padding-left: .8rem; }
.course-block h3 { color: var(--accent); }
.course-block ul, .plain-list { margin: .5rem 0 0; padding-left: 1.1rem; }
.course-block li, .plain-list li { margin: .2rem 0; }

.final-project { margin-top: 0; border: 0; background: #fff; color: var(--ink); padding: 0; }
.final-project p { color: var(--muted); }
.final-project .card { color: var(--ink); }
.final-grid { grid-template-columns: 1fr; }

.graphics-hero { padding-bottom: 1rem; }
.graphics-hero h1 { max-width: 22ch; }
.graphics-hero .lede { margin-bottom: .4rem; }
.wild-back { margin-top: .55rem; font-size: .88rem; }
.wild-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; border-top: 2px solid var(--datavis); }
.wild-pick { min-width: 0; padding: 1rem 0 1.1rem; border-bottom: 1px solid var(--line); }
.wild-pick h3 { max-width: 33ch; font-size: clamp(1.08rem, 2vw, 1.35rem); line-height: 1.22; }
.wild-pick h3 a { color: var(--ink); }
.wild-pick p { margin-top: .55rem; }
.wild-byline, .wild-links { color: var(--muted); font-size: .79rem; line-height: 1.45; }
.wild-summary { font-size: .94rem; }
.wild-cue { border-left: 3px solid var(--datavis); padding-left: .65rem; color: #55372c; font-size: .88rem; }
.wild-original { font-weight: 750; }
.wild-lens { margin: .35rem 0 1rem; border-block: 1px solid var(--line); padding: .8rem 0; color: var(--muted); font-size: .88rem; }
.wild-lens strong { color: var(--ink); }
.wild-archive-week { margin-top: 1.25rem; }
.wild-archive-week > h3 { margin-bottom: .45rem; font-size: 1rem; }
.wild-updated { color: var(--muted); font-size: .78rem; }
.wild-course-strip { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .8rem 0 .2rem; border-left: 5px solid var(--datavis); background: var(--datavis-soft); padding: .8rem 1rem; color: var(--ink); text-decoration: none; }
.wild-course-strip strong, .wild-course-strip span { display: block; }
.wild-course-strip small { display: block; margin-top: .14rem; color: #684032; font-size: .82rem; }
.wild-course-strip .wild-course-action { flex: 0 0 auto; color: var(--datavis); font-weight: 750; font-size: .88rem; }

.article-wrap { max-width: 980px; }
.article-intro { grid-template-columns: minmax(0,1.35fr) minmax(240px,.65fr); }
.article-body { max-width: 780px; }
.article-body h2 { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line); scroll-margin-top: 4.5rem; font-size: 1.75rem; }
.article-body h3.subhead { margin-top: 1.75rem; }
.page-toc { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: 1rem 0 2rem; border-block: 1px solid var(--line); padding: .75rem 0; font-size: .88rem; }
.page-toc strong { width: 100%; }
.setup-summary { border-top: 4px solid var(--computing); }
.setup-summary p, .small-note { color: var(--muted); }
.step-badge { display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin-right: .35rem; border-radius: 50%; background: var(--computing); color: #fff; font-size: 1rem; vertical-align: .12em; }
.steps { margin: 1rem 0 0; padding-left: 1.4rem; }
.steps > li { margin: .7rem 0; }
.steps ul { margin-top: .35rem; }

.connection-card { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; overflow: hidden; margin-top: 1rem; border: 1px solid var(--line); background: var(--line); }
.connection-card div { min-width: 0; background: var(--panel); padding: .8rem; }
.connection-card span, .extension-id span { display: block; margin-bottom: .2rem; color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.connection-card code, .extension-id code { overflow-wrap: anywhere; }
.callout, .success-box { margin-top: 1.1rem; border-left: 4px solid var(--computing); background: var(--computing-soft); padding: .9rem; }
.callout.warning { border-left-color: #9a671c; background: #f7f0e3; }
.callout.help-box { border-left-color: var(--ink); background: var(--soft); }
.callout p { color: #3f5357; }
.extension-id { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; border: 1px solid var(--line); background: var(--soft); padding: .9rem; }
.table-scroll { overflow-x: auto; margin-top: 1rem; border: 1px solid var(--line); background: var(--panel); }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { padding: .65rem .7rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: var(--soft); }
tbody tr:last-child td { border-bottom: 0; }
code, kbd, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
code { font-size: .9em; }
kbd { display: inline-block; border: 1px solid #b8bfc1; border-bottom-width: 2px; background: var(--panel); padding: .05rem .3rem; font-size: .8em; }
.code-panel { overflow: hidden; margin-top: 1rem; border: 1px solid #2b3b43; background: #17232b; color: #f8f5ee; }
.code-label { border-bottom: 1px solid #394951; padding: .4rem .75rem; color: #a8c9cc; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.code-panel pre { overflow-x: auto; margin: 0; padding: .9rem; font-size: .86rem; line-height: 1.55; }
.code-panel code { font-size: inherit; }
.check-list { margin: .6rem 0 0; padding: 0; list-style: none; }
.check-list li { position: relative; margin: .3rem 0; padding-left: 1.5rem; }
.check-list li::before { position: absolute; left: 0; content: "✓"; color: var(--computing); font-weight: 900; }
.resource-list li { margin: .4rem 0; }

.document-wrap { max-width: 900px; margin: 0 auto; padding: 1.25rem 1.25rem 4rem; }
.document-tools { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--line); padding-bottom: .75rem; font-size: .85rem; }
.document-tools a { color: var(--muted); }
.document-content { max-width: 780px; }
.document-content > h1:first-child { max-width: none; margin-bottom: 1rem; }
.document-content h2 { margin-top: 2.25rem; border-top: 1px solid var(--line); padding-top: .85rem; }
.document-content h3 { margin-top: 1.5rem; }
.document-content h4 { margin: 1.25rem 0 0; font-size: 1rem; }
.document-content p, .document-content ul, .document-content ol, .document-content blockquote, .document-content table, .document-content pre { margin-top: .8rem; }
.document-content li + li { margin-top: .25rem; }
.document-content blockquote { margin-left: 0; border-left: 3px solid var(--line); color: var(--muted); padding: .15rem 0 .15rem 1rem; }
.document-content pre { overflow-x: auto; border: 1px solid var(--line); background: #f7f8f8; padding: .85rem; line-height: 1.5; }
.document-content code { overflow-wrap: anywhere; }
.document-content pre code { overflow-wrap: normal; }
.document-content table { display: block; overflow-x: auto; }
.document-content hr { margin: 2rem 0; border: 0; border-top: 1px solid var(--line); }
.document-content img { max-width: 100%; height: auto; }
.document-content input[type="checkbox"] { margin-right: .4rem; }
.computing-document .document-content > h1:first-child { border-left: 4px solid var(--computing); padding-left: .8rem; }
.datavis-document .document-content > h1:first-child { border-left: 4px solid var(--datavis); padding-left: .8rem; }

.site-footer { margin-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); padding: 1.25rem; }
.site-footer > div { display: flex; justify-content: space-between; gap: 1rem; max-width: 980px; margin: 0 auto; }
.footer-credit { font-size: .84rem; }

@media (max-width: 840px) {
  .hero-grid, .course-hero, .intro, .section-head, .bridge, .course-pair, .calendar-columns, .week-grid, .weekly-grid, .cards, .project-grid, .resource-grid, .final-grid, .lesson-grid, .connection-card { grid-template-columns: 1fr; }
  .semester-strip { grid-template-columns: 1fr 1fr; }
  .semester-strip > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .semester-strip > div:nth-child(4) { border-top: 1px solid var(--line); }
  .homework-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wild-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .nav { align-items: flex-start; flex-direction: column; }
  .nav-links { justify-content: flex-start; }
  .semester-strip { grid-template-columns: 1fr; }
  .semester-strip > div + div { border-top: 1px solid var(--line); border-left: 0; }
  .week-card, .session-row, .fact-list li { grid-template-columns: 1fr; }
  .extension-id, .site-footer > div { align-items: stretch; flex-direction: column; }
  .homework-heading { align-items: flex-start; flex-direction: column; }
  .homework-heading p:last-child { text-align: left; }
  .homework-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wild-course-strip { align-items: flex-start; flex-direction: column; }
}