/* Readymag landscape iframe: 100% width × 480px height.
   Graphik is referenced, NOT redistributed. Add a licensed @font-face
   yourself if the page should render Graphik without fallback. */
:root {--yellow:#FFE600;--black:#080808;--blue:#0057FF;--orange:#B83700;--muted:#4A4A4A;--white:#fff;--font:'Graphik','Inter','Arial',sans-serif}
*,*::before,*::after{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--white);color:var(--black)}
body{font-family:var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,select{font:inherit}
button:focus-visible,select:focus-visible{outline:3px solid var(--yellow);outline-offset:-4px;z-index:3}
[hidden]{display:none!important}
.sr-only{position:absolute;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.module{width:100%;height:100%;overflow:hidden;border:1px solid #141414;background:white}
.cover{display:flex;flex-direction:column;justify-content:space-between;text-align:left;width:100%;height:100%;padding:clamp(21px,4.3vw,51px);gap:18px;border:0;border-radius:0;background:var(--yellow);color:var(--black);cursor:pointer}
.cover:focus-visible{outline:5px solid var(--blue);outline-offset:-8px}
.cover-kicker{font-size:clamp(10px,.95vw,13px);line-height:1.4;font-weight:700;letter-spacing:.045em}
.cover-main{display:block;margin:auto 0;font-size:clamp(48px,7.2vw,104px);line-height:.96;letter-spacing:-.064em;font-weight:200}
.cover-main span,.cover-main strong{display:block}.cover-main strong{font-weight:900}
.cover-bottom{display:flex;align-items:end;justify-content:space-between;gap:30px;font-size:clamp(13px,1.2vw,16px);line-height:1.45}
.cover-bottom>span:first-child{max-width:39ch}
.cover-hint{white-space:nowrap;font-weight:700;border-bottom:2px solid var(--black);padding-bottom:6px;display:flex;gap:16px;align-items:center}
.cover-hint span{font-size:24px;line-height:.9;transition:transform .2s ease}
.cover:hover .cover-hint span{transform:translate(4px,-4px)}
.explorer{height:100%;display:grid;grid-template-rows:52px minmax(0,1fr)}
.topline{background:var(--yellow);border-bottom:1px solid var(--black);padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.topline-name{font-size:clamp(11px,.9vw,13px);letter-spacing:.04em;font-weight:900;white-space:nowrap}
.topline-name span{display:inline-block;padding:0 14px;color:#242424}
.go-back{background:transparent;border:0;border-bottom:1px solid var(--black);padding:5px 0;flex-shrink:0;font-size:12px;line-height:1.1;font-weight:700;cursor:pointer;color:var(--black)}
.go-back:focus-visible{outline-color:var(--blue)}
.explorer-body{height:100%;min-height:0;display:grid;grid-template-columns:minmax(244px,24.5%) minmax(290px,33%) minmax(0,1fr)}
.course-index{display:flex;flex-direction:column;background:#101010;min-width:0;min-height:0}
.course-tab{flex:1;min-height:0;display:grid;grid-template-columns:31px minmax(0,1fr) 12px;gap:11px;align-items:center;text-align:left;background:#101010;color:#fff;border:0;border-bottom:1px solid #464646;border-radius:0;padding:5px 13px;cursor:pointer;transition:background .16s ease}
.course-tab:hover{background:#242424}.course-tab.active{background:var(--blue)}
.course-number{font-size:clamp(12px,1.05vw,15px);font-weight:400;color:#F3F3F3;align-self:center}
.course-tab-title{font-size:clamp(12.5px,1.12vw,15px);font-weight:400;line-height:1.25}
.course-tab.active .course-tab-title{font-weight:700}
.course-arrow{color:#E8E8E8;font-size:20px;text-align:right}
.course-visual{min-width:0;min-height:0;margin:0;overflow:hidden;background:#121212;border-right:1px solid #212121}
.course-visual img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block}
.course-content{min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:clamp(21px,3.05vw,39px) clamp(19px,3vw,43px);display:flex;flex-direction:column;justify-content:center;gap:clamp(12px,1.65vw,19px)}
.section-label{margin:0;font-size:11px;font-weight:700;letter-spacing:.08em;color:#666}
h1{font-size:clamp(26px,2.95vw,43px);font-weight:900;line-height:1.035;letter-spacing:-.056em;margin:0;overflow-wrap:break-word}
h2{font-size:clamp(17px,1.6vw,23px);font-weight:700;line-height:1.24;letter-spacing:-.025em;margin:0}
#course-description{font-size:clamp(13.5px,1.17vw,16.5px);font-weight:400;line-height:1.49;margin:0;overflow-wrap:normal}
.tags{display:flex;flex-wrap:wrap;gap:7px;padding-top:13px;border-top:1px solid #BEBEBE}
.tag{font-size:clamp(10px,.85vw,11.5px);font-weight:700;line-height:1.22;text-transform:uppercase;letter-spacing:.014em;color:var(--orange);border:1.4px solid var(--orange);padding:8px 10px}
.compressed-selector{display:none}
@media(max-width:1130px){
 .explorer-body{grid-template-columns:minmax(215px,28%) minmax(230px,32%) minmax(0,1fr)}
 .course-content{padding:21px 19px;gap:13px}
 .course-tab{padding:4px 10px;grid-template-columns:24px minmax(0,1fr) 10px;gap:7px}
 .course-tab-title{font-size:12.5px}
 h1{font-size:clamp(24px,2.8vw,35px)}h2{font-size:17px}
 #course-description{font-size:13.4px;line-height:1.44}
 .tag{font-size:10px;padding:6px 7px}
}
/* Within a narrower Readymag column, replace cramped seven-row navigation
   with one native course chooser and a larger two-column content panel. */
@media(max-width:1000px){
 .explorer{grid-template-rows:42px minmax(0,1fr)}
 .topline{padding:0 15px}.topline-name{font-size:10.5px}
 .explorer-body{display:grid;grid-template-columns:minmax(190px,35%) minmax(0,1fr);grid-template-rows:46px minmax(0,1fr)}
 .course-index{display:none}
 .compressed-selector{display:flex;grid-column:1/-1;align-items:center;gap:13px;background:#101010;color:white;padding:6px 13px;min-width:0}
 .compressed-selector label{font-size:10px;line-height:1.3;font-weight:700;max-width:130px;flex:0 1 auto}
 .compressed-selector select{flex:1;min-width:0;max-width:100%;padding:6px 8px;border:1px solid #777;border-radius:0;background:#161616;color:white;font-size:13px;font-weight:600}
 .course-visual{grid-column:1;grid-row:2}
 .course-content{grid-column:2;grid-row:2;gap:9px;padding:14px 19px}
 h1{font-size:clamp(22px,3.45vw,30px)}h2{font-size:clamp(16px,2.25vw,19px)}
 #course-description{font-size:clamp(12.8px,1.74vw,14.5px);line-height:1.4}
 .section-label{font-size:10px}.tags{padding-top:8px;gap:5px}.tag{font-size:9.5px;padding:5px 6px}
}
@media(max-width:550px){
 .cover{padding:25px 19px}.cover-kicker{font-size:10px}.cover-main{font-size:clamp(39px,10vw,57px)}.cover-bottom{display:grid;gap:12px;font-size:13px}
 .cover-hint{justify-self:start}
 .explorer-body{grid-template-columns:minmax(135px,34%) minmax(0,1fr)}
 .topline-name{font-size:9px;white-space:normal}.topline-name span{padding:0 4px}.go-back{font-size:10px}
 .compressed-selector label{display:none}.compressed-selector select{font-size:12px}
 .course-content{padding:12px;gap:8px}
 h1{font-size:22px}.section-label{font-size:9px}h2{font-size:15px}
 #course-description{font-size:12px;line-height:1.35}.tag{font-size:9px;padding:4px 5px}
}
@media(max-height:380px){.cover-main{font-size:clamp(37px,6vw,75px)}.course-content{justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* Fitted editorial rhythm at full landscape size: all expertise tags stay visible. */
@media(min-width:1131px){
 .course-content{padding:18px clamp(20px,2.4vw,33px);gap:12px}
 h1{font-size:clamp(30px,2.65vw,39px)}
 h2{font-size:clamp(17px,1.5vw,21px)}
 #course-description{font-size:clamp(13.5px,1.12vw,15.8px);line-height:1.43}
 .tags{padding-top:10px;gap:6px}
 .tag{padding:6px 8px;font-size:10.5px}
}