:root {
  --cardinal: #990000;
  --cardinal-dark: #790000;
  --gold: #ffcc00;
  --ink: #292929;
  --muted: #666;
  --line: #e3dfd9;
  --paper: #fff;
  --background: #f7f5f2;
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--background);
}
* { box-sizing: border-box; }
html { scroll-padding-top: 24px; }
body { margin: 0; line-height: 1.6; }
a { color: var(--cardinal); text-underline-offset: 3px; }
a:hover { color: var(--cardinal-dark); }
a:focus-visible, summary:focus-visible { outline: 3px solid #9a7900; outline-offset: 5px; }
img { max-width: 100%; height: auto; }
.container { max-width: 1480px; padding: 0 32px; margin: 0 auto; }
.skip-link { position: absolute; left: 18px; top: -100px; z-index: 20; padding: 10px 18px; background: white; }
.skip-link:focus { top: 12px; }
.site-header { background: linear-gradient(110deg, #990000, #7f0000); color: white; border-bottom: 5px solid var(--gold); }
.masthead { padding-top: 34px; padding-bottom: 34px; }
.masthead-top { display: flex; align-items: center; gap: 22px; }
.usc-shield { width: 78px; flex: 0 0 78px; }
.eyebrow { margin: 0 0 9px; font-size: 14px; letter-spacing: 1.2px; font-weight: 700; text-transform: uppercase; color: var(--gold); }
h1 { font-size: clamp(25px, 2.8vw, 40px); line-height: 1.24; font-weight: 700; margin: 0; }
.course-label { margin: 13px 0 0; font-size: 18px; color: #fff; }
.semester-badges { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 25px; }
.semester-badges span { display: inline-block; background: #ffffff25; border: 1px solid #ffffff50; border-radius: 999px; padding: 6px 16px; font-size: 16px; line-height: 1.45; }
.site-nav { background: #222; position: relative; z-index: 10; }
.nav-inner { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; align-items: stretch; }
.site-nav a, .site-nav summary { display: block; color: white; text-decoration: none; padding: 17px 14px; font-size: 16px; font-weight: 400; line-height: 1.4; white-space: nowrap; }
.site-nav a:hover, .site-nav a[aria-current="page"], .site-nav summary:hover { background: #ffffff12; color: white; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 6px; }
.nav-dropdown { position: relative; }
.nav-dropdown > summary { list-style: none; cursor: pointer; }
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown > summary::after { content: ''; display: inline-block; margin-left: 8px; vertical-align: middle; border: 5px solid transparent; border-bottom: 0; border-top-color: currentColor; }
.dropdown-links { position: absolute; top: 100%; right: 0; min-width: 210px; background: #292929; border: 1px solid #555; box-shadow: 0 8px 20px #0002; border-radius: 0 0 10px 10px; overflow: hidden; }
.dropdown-links a { padding: 12px 18px; font-size: 15px; }
.dropdown-links a:last-child { border-top: 1px solid #555; }
main { min-height: 65vh; }
.course-section { padding: 20px 0; }
.section-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
h2 { color: var(--cardinal); font-size: 29px; line-height: 1.25; margin: 0 0 18px; font-weight: 700; position: relative; padding-left: 20px; }
h2::before { content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 7px; border-radius: 5px; background: var(--gold); }
.section-top h2 { margin: 0; }
h3 { font-size: 21px; line-height: 1.35; margin: 0 0 7px; }
h4 { font-size: 16px; margin: 18px 0 6px; }
p { margin: 0 0 15px; }
p:last-child { margin-bottom: 0; }
.section-note { font-size: 13px; color: var(--muted); }
.overview-copy { font-size: 16px; }
.course-facts { display: flex; gap: 24px; flex-wrap: wrap; padding-top: 17px; margin-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.course-facts strong { color: var(--cardinal); font-size: 16px; }
.people-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.person-card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line); border-radius: 13px; padding: 18px; background: var(--paper); text-align: left; }
.person-top { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.person-top > div { min-width: 0; }
.person-photo, .profile-photo { border: 4px solid var(--gold); border-radius: 50%; object-fit: cover; object-position: center; }
.person-photo { display: block; width: 96px; height: 96px; flex: 0 0 96px; margin: 0; }
.person-top h3 { font-size: 21px; margin-bottom: 3px; }
.person-top h3 a { text-decoration: none; }
.person-top h3 a:hover { text-decoration: underline; }
.person-role { color: var(--muted); font-size: 17px; margin: 2px 0 0; line-height: 1.45; }
.person-card .person-role { font-size: 15px; }
.person-card > p { font-size: 15px; line-height: 1.55; margin: 0; }
.person-actions { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 4px 16px; margin-top: 8px; font-size: 14px; }
.person-actions a { white-space: nowrap; }
.person-link { font-size: 14px; font-weight: 700; margin: 0; }
.subsection-heading { margin-top: 24px; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 15px; background: white; }
table { width: 100%; border-collapse: collapse; font-size: 16px; }
th { background: #222; color: white; text-align: left; font-size: 16px; padding: 14px 13px; line-height: 1.4; }
td { padding: 15px 13px; border-top: 1px solid #dddfe2; vertical-align: middle; }
.hours-table { min-width: 900px; }
.hours-table tbody tr:nth-child(odd) { background: #f1f1f1; }
.hours-table th:first-child { width: 24%; }
.hours-table th:last-child { width: 32%; }
.schedule-modules { display: grid; gap: 18px; }
.module-card { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: white; }
.module-heading { margin: 0; background: var(--cardinal); color: white; padding: 15px 20px; font-size: 19px; font-weight: 700; }
.module-label { display: inline-block; color: var(--gold); text-transform: uppercase; margin-right: 7px; font-size: 17px; }
.week-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: start; gap: 17px; padding: 17px 20px; }
.week-row + .week-row { border-top: 1px solid var(--line); }
.week-number { text-align: center; line-height: 1.25; }
.week-number span { display: block; text-transform: uppercase; color: var(--muted); font-size: 12px; font-weight: 700; }
.week-number strong { display: block; color: var(--cardinal); font-size: 27px; }
.week-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 10px; }
.week-title { font-size: 19px; margin: 0; line-height: 1.4; }
summary { cursor: pointer; color: var(--cardinal); font-weight: 700; }
.week-details summary { font-size: 16px; }
.week-details ul { padding-left: 20px; color: #444; font-size: 15px; margin: 12px 0 0; }
.topic-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.topic-group h5 { margin: 0 0 5px; color: var(--muted); font-size: 12px; line-height: 1.4; font-weight: 700; }
.topic-group ul { margin: 0; padding-left: 18px; color: #444; font-size: 14px; line-height: 1.45; }
.topic-group li + li { margin-top: 4px; }
.deliverable { align-self: center; font-size: 15px; }
.assignment-badge { display: inline-block; padding: 4px 13px; border: 1px solid #efcc58; border-radius: 999px; background: #fff7d7; color: #65500b; font-weight: 700; }
.none-deliverable { display: block; min-width: 20px; color: var(--muted); text-align: center; }
.archive-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.archive-card { background: white; border: 1px solid var(--line); border-radius: 15px; padding: 24px; }
.archive-card h3 { color: var(--cardinal); font-size: 22px; margin-bottom: 14px; }
.archive-links { display: flex; flex-direction: column; gap: 9px; font-size: 17px; }
.site-footer { color: #dedede; background: #222; padding: 23px 0; font-size: 13px; margin-top: 36px; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 15px; }
.site-footer a { color: white; }
.page-intro { padding: 32px 0 24px; }
.page-intro h2 { margin-bottom: 14px; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.gallery-card { background: white; border: 1px solid var(--line); border-radius: 15px; overflow: hidden; }
.gallery-card img { display: block; width: 100%; height: 185px; object-fit: contain; background: #eee; }
.gallery-copy { padding: 22px; }
.gallery-copy p { font-size: 14px; color: var(--muted); }
.gallery-copy .person-link { font-size: 15px; }
.profile-layout { padding: 28px; border: 1px solid var(--line); background: white; border-radius: 15px; }
.profile-top { display: flex; align-items: center; gap: 28px; }
.profile-photo { width: 144px; height: 144px; flex: 0 0 144px; }
h2.profile-name { padding: 0; margin: 0 0 2px; font-size: 24px; }
h2.profile-name::before { display: none; }
.profile-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 16px; margin-top: 13px; }
.profile-meta:empty { display: none; }
.profile-body { margin-top: 24px; font-size: 16px; }
.profile-body h3 { margin-top: 24px; font-size: 19px; }
.profile-body ul { padding-left: 20px; }
.directory-member { scroll-margin-top: 20px; }
.directory-member + .directory-member { margin-top: 25px; }
.course-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.pillar-card { border: 1px solid var(--line); border-top: 3px solid var(--cardinal); background: white; border-radius: 10px; padding: 18px; }
.pillar-number { color: var(--cardinal); font-weight: 700; font-size: 13px; margin-bottom: 5px; }
.pillar-card h3 { font-size: 18px; margin-bottom: 8px; }
.pillar-card h3 a { text-decoration: none; }
.pillar-card h3 a:hover { text-decoration: underline; }
.pillar-card p { font-size: 14px; margin-bottom: 9px; }
.pillar-card .pillar-timing { font-size: 12px; color: var(--muted); }
.activity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.activity-card { border: 1px solid var(--line); border-radius: 10px; padding: 18px; background: white; }
.activity-card h3 { font-size: 18px; margin-bottom: 10px; }
.activity-card p { font-size: 14px; }
.milestone-line { color: #65500b; background: #fff7d7; border: 1px solid #efcc58; border-radius: 9px; padding: 9px 13px; font-size: 14px; }
.product-progression { display: flex; flex-wrap: wrap; gap: 7px 12px; padding: 13px 16px; margin: 15px 0; border-radius: 10px; background: #eee8e1; font-size: 14px; font-weight: 700; color: var(--cardinal); }
.product-roadmap { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: white; }
.roadmap-phase { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 20px; padding: 18px; }
.roadmap-phase + .roadmap-phase { border-top: 1px solid var(--line); }
.phase-timing strong, .phase-timing span { display: block; }
.phase-timing strong { color: var(--cardinal); font-size: 15px; }
.phase-timing span { color: var(--muted); font-size: 13px; }
.roadmap-phase h3 { font-size: 18px; margin-bottom: 7px; }
.roadmap-phase p { font-size: 14px; }
.roadmap-download { font-size: 14px; }
.class-photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; width: 100%; margin: 0; }
.class-photo { margin: 0; background: white; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.class-photo a { display: block; }
.class-photo img { display: block; width: 100%; height: 320px; object-fit: contain; background: #eceae6; }
.class-photo figcaption { padding: 10px 15px; font-size: 18px; font-weight: 700; color: var(--cardinal); }
.class-photo-featured { grid-column: 1 / -1; }
.class-photo-featured img { height: clamp(420px, 46vw, 680px); }
.class-photo-featured figcaption { font-size: 24px; }
@media (max-width: 1000px) {
  .site-nav a, .site-nav summary { font-size: 14px; padding: 14px 10px; }
  .container { padding-left: 24px; padding-right: 24px; }
  .week-row { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
  .assignment-badge { max-width: 165px; }
}
@media (max-width: 900px) {
  .people-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .container { padding-left: 18px; padding-right: 18px; }
  .masthead { padding-top: 24px; padding-bottom: 25px; }
  .masthead-top { gap: 15px; align-items: flex-start; }
  .usc-shield { width: 45px; flex-basis: 45px; margin-top: 5px; }
  .eyebrow { font-size: 10px; letter-spacing: .8px; }
  h1 { font-size: 25px; }
  .course-label { font-size: 15px; margin-top: 10px; }
  .semester-badges { gap: 7px; margin-top: 20px; }
  .semester-badges span { padding: 5px 11px; font-size: 13px; }
  .site-nav a, .site-nav summary { padding: 12px 8px; font-size: 13px; }
  .nav-inner { padding-left: 8px; padding-right: 8px; gap: 0; }
  .dropdown-links { right: 0; min-width: 190px; }
  .people-grid, .gallery-grid, .archive-list, .course-pillars, .activity-grid, .class-photo-grid { grid-template-columns: 1fr; }
  .course-section { padding-top: 16px; padding-bottom: 16px; }
  h2 { font-size: 26px; }
  .person-card { padding: 15px; }
  .person-top { gap: 12px; }
  .person-top h3 { font-size: 19px; }
  .person-photo { width: 80px; height: 80px; flex-basis: 80px; }
  .person-role { font-size: 16px; }
  .course-facts { gap: 12px 20px; }
  .week-row { grid-template-columns: 37px minmax(0, 1fr); gap: 10px; padding: 17px 13px; }
  .week-number strong { font-size: 25px; }
  .week-number span { font-size: 10px; }
  .week-title { font-size: 17px; }
  .week-heading { flex-direction: column; gap: 7px; }
  .topic-columns { grid-template-columns: 1fr; gap: 12px; }
  .deliverable { align-self: flex-start; font-size: 13px; }
  .none-deliverable { display: none; }
  .module-heading { padding: 14px 16px; font-size: 17px; }
  .module-label { font-size: 15px; }
  .profile-layout { padding: 23px; }
  .profile-top { flex-direction: column; align-items: flex-start; gap: 18px; }
  .profile-photo { flex-basis: auto; width: 130px; height: 130px; }
  .profile-meta { font-size: 15px; gap: 8px 15px; overflow-wrap: anywhere; }
  .person-actions { font-size: 13px; gap: 4px 13px; }
  .person-actions .person-link { font-size: 13px; }
  .roadmap-phase { grid-template-columns: 1fr; gap: 8px; padding: 15px; }
  .phase-timing { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
  .class-photo img { height: 300px; }
  .class-photo-featured img { height: 420px; }
}
@media print {
  .site-header { background: white; color: black; }
  .site-nav, .skip-link, .site-footer { display: none; }
  .people-grid { display: block; }
  .person-card { break-inside: avoid; margin-bottom: 20px; }
  .table-scroll { overflow: visible; }
  .module-card { break-inside: avoid; }
}

/* Approved course styles. All topic content is visible before JavaScript runs. */
.overview-component { margin-bottom: 12px; }
.overview-component strong { color: var(--cardinal); }
.course-label { max-width: 70ch; line-height: 1.45; font-size: 21px; }
.topic-toolbar { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.topics-toggle { background: var(--cardinal); color: white; border: 1px solid var(--cardinal); border-radius: 7px; padding: 8px 13px; font: 600 14px/1.4 Arial, sans-serif; cursor: pointer; }
.topics-toggle:hover { background: var(--cardinal-dark); }
.topics-toggle:focus-visible { outline: 3px solid #9a7900; outline-offset: 4px; }
.week-topics[hidden], .topics-toggle[hidden] { display: none; }
.course-facts, .course-facts strong { font-size: 16px; font-weight: 700; }
.course-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.module-heading-deliverables { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.module-title-copy { min-width: 0; }
.module-deliverables-label { flex: 0 0 auto; font-size: 16px; }
.capstone-roadmap { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: white; }
.capstone-roadmap-heading { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); margin: 0; background: var(--cardinal); color: white; font-size: 19px; font-weight: 700; }
.capstone-roadmap-heading span { padding: 15px 20px; }
.capstone-roadmap-heading .capstone-column-label { border-left: 1px solid #ffffff40; font-size: inherit; }
.capstone-roadmap-heading a { color: inherit; font-size: .85em; font-weight: 400; }
.capstone-roadmap .product-roadmap { border: 0; border-radius: 0; }
.capstone-week-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); }
.capstone-week-row + .capstone-week-row { border-top: 1px solid var(--line); }
.capstone-deliverables { padding: 17px 18px; background: #f7f4ed; border-left: 1px solid var(--line); }
.capstone-deliverables h4 { margin: 0 0 8px; color: var(--cardinal); font-size: 15px; }
.capstone-deliverables ul, .capstone-submission ul { margin: 0; padding-left: 18px; font-size: 14px; }
.capstone-deliverables li + li, .capstone-submission li + li { margin-top: 7px; }
.capstone-deliverables .capstone-deadline-note { margin: 9px 0 0; color: var(--muted); font-size: 12px; }
.capstone-due-date { background: #ffe184; color: #4d3200; padding: 1px 4px; border-radius: 3px; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.capstone-deliverables .capstone-no-upload { margin: 10px 0 0; color: #3d4d3e; font-size: 14px; font-weight: 700; }
.capstone-resource { margin: 10px 0 0; font-size: 14px; }
.capstone-resource a { display: inline-block; padding: 3px 0; font-weight: 700; overflow-wrap: anywhere; }
.capstone-week-work { padding: 17px 20px; }
.capstone-week-work .capstone-week-dates { margin: 0 0 5px; color: var(--cardinal); font-size: 14px; font-weight: 700; }
.capstone-week-work h3 { font-size: 18px; margin: 0 0 7px; }
.capstone-week-work p { font-size: 14px; margin-bottom: 0; }
.capstone-submission { margin-top: 14px; padding: 15px 18px; border: 1px solid #efcc58; border-radius: 10px; background: #fff7d7; }
.capstone-submission h3 { color: var(--cardinal); font-size: 18px; margin: 0 0 8px; }
#schedules { width: 62.5%; padding: 12px 0; }
#schedules .table-scroll { padding: 0; border-radius: 8px; }
#schedules .hours-table { min-width: 0; table-layout: fixed; font-size: 14px; }
#schedules .hours-table th, #schedules .hours-table td { padding: 7px 9px; line-height: 1.4; overflow-wrap: anywhere; }
#schedules .hours-table th { font-size: 14px; }
#schedules .hours-table th:nth-child(1) { width: 34%; }
#schedules .hours-table th:nth-child(2) { width: 34%; }
#schedules .hours-table th:nth-child(3) { width: 18%; }
#schedules .hours-table th:nth-child(4) { width: 14%; }
@media (max-width: 700px) {
  .capstone-roadmap-heading { grid-template-columns: 1fr; font-size: 17px; }
  .capstone-roadmap-heading .capstone-column-label { display: none; }
  .capstone-week-row { grid-template-columns: 1fr; }
  #schedules { width: 100%; }
  .capstone-deliverables { border-left: 0; border-top: 1px solid var(--line); }
  .module-heading-deliverables { gap: 12px; }
  .module-deliverables-label { font-size: 14px; }
}
@media (max-width: 680px) {
  .course-label { font-size: 15px; }
  .course-label .subtitle-detail { display: block; }
  .semester-badges { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr) minmax(0, 1.2fr); gap: 6px; }
  .semester-badges span { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 6px 4px; text-align: center; font-size: clamp(10px, 2.8vw, 12px); line-height: 1.35; white-space: normal; }
  .semester-badges span:first-child { white-space: nowrap; }
  .course-facts { gap: 10px 12px; }
}