.header-nav button[aria-pressed=true]{color:var(--blue);font-weight:600}
#courseMain{grid-template-columns:245px minmax(0,1fr)}
#courseMain aside h1{font-size:18px}
#courseNav{display:grid;gap:8px;margin-top:28px}
#courseNav button{padding:12px;text-align:left;font-size:14px}
#courseNav button[aria-pressed=true]{background:var(--blue);color:white}
.course-content{min-width:0;min-height:0;display:flex;flex-direction:column}
#courseScroll{overflow:auto;padding:24px 28px 32px}
.course-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.course-cover{padding:0;background:white;text-align:left;overflow:hidden;display:flex;flex-direction:column}
.course-cover img,.course-placeholder{width:100%;height:300px;object-fit:contain;background:#e8edf0}
.course-placeholder{display:grid;place-items:center;background:linear-gradient(135deg,#e8edf0,#f9faf7);color:#637385;font-size:14px}
.course-cover-copy{padding:18px;display:grid;gap:10px}
.course-cover strong{font-size:16px;font-weight:600}
.course-cover-copy>span{font-size:12px;color:var(--muted)}
.course-cover small{font-size:12px;color:var(--blue)}
.course-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.course-image{padding:12px;background:white;min-width:0;text-align:left}
.course-image img{display:block;width:100%;height:340px;object-fit:contain;background:#f2f4f1}
.course-image span{display:block;font-size:11px;color:var(--muted);padding:12px 2px 2px}
.course-gallery.feedback img{height:440px}
.course-empty{grid-column:1/-1;padding:70px 20px;text-align:center;color:var(--muted);font-size:14px;border:1px dashed var(--line)}
#courseMore{display:block;margin:28px auto 0;padding:12px 24px;font-size:14px}
#courseBack{padding:9px 14px;font-size:12px}
#courseViewer{background:#252a30;color:white;width:min(1100px,94vw)}
#courseViewer .close{color:#25282b}
.course-view-head{padding:20px 64px 16px 24px;display:flex;gap:20px;align-items:center}
#courseImageTitle{font-size:18px;margin:0}#coursePosition{font-size:12px;color:#c5ced8}
#courseFull{display:block;width:100%;height:70dvh;object-fit:contain}
.course-view-controls{display:flex;justify-content:center;align-items:center;gap:20px;padding:18px;font-size:12px}
.course-view-controls button{color:white;padding:8px 16px}.course-view-controls a{color:#c8d8ed}
@media(max-width:1100px){.header-nav{gap:20px}.course-overview{grid-template-columns:1fr}.course-cover{display:grid;grid-template-columns:1.2fr 1fr}.course-cover img,.course-placeholder{height:260px}.course-cover-copy{align-content:center}}
@media(max-width:720px){header{height:auto;min-height:85px;flex-wrap:wrap;padding-top:16px;padding-bottom:12px}.header-nav{width:100%;justify-content:space-between;gap:12px;margin-top:10px}.header-nav button,.header-nav #aboutHeader{font-size:12px;padding:7px 0}.header-nav button i{font-size:10px;border:0;padding:0;margin-right:5px}.header-nav button:after{display:none}#courseMain{display:flex}#courseMain aside{order:0;padding:20px 18px}#courseMain aside h1,#courseMain aside .intro,#courseMain aside .eyebrow{display:none}#courseNav{display:flex;flex-wrap:wrap;gap:8px;margin:0}#courseNav button{padding:9px;font-size:12px}.course-content{order:1}#courseScroll{overflow:visible;padding:20px 16px}.course-overview,.course-gallery{grid-template-columns:1fr}.course-cover{display:flex}.course-cover img,.course-placeholder{height:300px}.course-image img{height:340px}.course-gallery.feedback img{height:440px}.course-view-controls{gap:12px}#courseFull{height:65dvh}}
@media(max-width:720px){.course-placeholder{height:120px}}

/* Full-width content after removing both index sidebars. */
#portfolioMain, #courseMain { grid-template-columns: minmax(0, 1fr); }

/* Compact navigation and section chrome keep the images primary. */
header { height:72px; min-height:0; gap:22px; }
.header-nav { gap:24px; font-size:12px; }
.header-nav button, .header-nav #aboutHeader { font-size:12px; line-height:1.4; padding:7px 0; }
.header-nav i { font-size:10px; margin-right:6px; }
.brand-symbol { width:30px; height:30px; }
.brand { gap:12px; }
.brand-wordmark strong { font-size:16px; }
.brand-wordmark { gap:3px; }
.edition { font-size:9px; gap:3px; }
.edition b { font-size:14px; }
#portfolioMain, #courseMain { height:calc(100dvh - 120px); }
.view-head { padding:12px 20px 11px; gap:12px; }
.view-head .small-label { font-size:9px; letter-spacing:.8px; }
.view-head .surface-title { font-size:18px; line-height:1.4; margin:4px 0; }
.view-head p { font-size:11px; line-height:1.6; margin-top:3px; }
.segmented { padding:2px; }
.segmented button { font-size:12px; padding:7px 11px; }
#courseBack { font-size:11px; padding:7px 10px; }
#courseScroll { padding-top:18px; }
.course-cover-copy { padding:13px 16px; gap:6px; }
.course-cover strong { font-size:14px; }
.course-cover-copy>span, .course-cover small { font-size:11px; }
.collection-content { padding-top:28px; }
.collection-content > .eyebrow { padding-bottom:8px; }
.collection-content h2 { font-size:18px; margin:10px 0 6px; }
.collection-content > p { font-size:11px; margin:4px 0; }
.group-header { padding:26px 32px 18px; }
.group-header .dialog-brand { margin-bottom:12px; font-size:11px; }
.group-header h2 { font-size:18px; margin:8px 0; }
.group-header>p { font-size:12px; margin:6px 0; line-height:1.65; }
#aboutDialog { max-width:660px; }
.about-content { padding:34px 30px 28px; }
.about-content h2 { font-size:18px; margin:12px 0; }
.about-content p { font-size:13px; line-height:1.8; margin:12px 0; }
.course-view-head { padding:16px 60px 12px 22px; }
#courseImageTitle { font-size:16px; }
@media(max-width:720px) {
  header { height:auto; padding:12px 18px 9px; gap:8px; }
  .brand-wordmark strong { font-size:14px; }
  .brand-symbol { width:26px; height:26px; }
  .header-nav { justify-content:flex-start; gap:24px; margin-top:4px; }
  .header-nav button, .header-nav #aboutHeader { font-size:11px; padding:6px 0; }
  .header-nav button i { font-size:9px; margin-right:4px; }
  #portfolioMain, #courseMain { height:auto; }
  .view-head { padding:11px 0 10px; gap:10px; }
  .view-head .surface-title { font-size:17px; }
  .segmented button { font-size:11px; padding:7px 9px; }
  .collection-content { padding-top:40px; }
  .collection-content h2 { font-size:17px; }
  .group-header { padding:40px 22px 16px; }
  .group-header h2 { font-size:17px; }
  .about-content { padding:40px 22px 24px; }
  .about-content h2 { font-size:17px; }
}

/* Dense, natural-ratio student thumbnails and readable feedback excerpts. */
#courseGrid.students{display:block;columns:190px;column-gap:10px}
#courseGrid.students .course-image{display:inline-block;width:100%;padding:0;margin:0 0 10px;break-inside:avoid;vertical-align:top;border:0;background:transparent}
#courseGrid.students .course-image img{display:block;width:100%;height:auto;object-fit:contain;border-radius:2px}
#courseGrid.students .course-image span{font-size:11px;padding:5px 2px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#courseGrid.feedback{display:block;max-width:860px;margin:auto}
.feedback-entry{padding:22px 0;border-bottom:1px solid var(--line)}
.feedback-entry h3{font-size:17px;line-height:1.5;margin:0 0 13px;color:var(--blue);font-weight:500}
.feedback-entry p{font-size:15px;line-height:1.95;margin:0 0 12px;color:#3d4650}
.feedback-source{font-size:12px;color:var(--orange);padding:3px 0}
.feedback-cover{min-height:220px;display:flex;align-items:center;padding:32px;background:#f1eee7;color:var(--orange);font-size:23px;line-height:1.7}
#courseGrid.scenes .course-image img{height:auto;max-height:440px;object-fit:contain}
@media(max-width:720px){#courseGrid.students{columns:2;column-gap:8px}#courseGrid.students .course-image{margin-bottom:8px}.feedback-entry{padding:18px 0}.feedback-entry p{font-size:14px}.feedback-cover{min-height:160px;font-size:21px}}