.module-tile{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;color:inherit;text-decoration:none}.module-slides{position:absolute;inset:0}.module-slides .module-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:grayscale(1);transition:opacity 1.2s ease,filter .7s ease;transform:scale(1)}.module-slides .module-media.active{opacity:1}.module-slides .module-media.zooming{animation:module-zoom 8s linear forwards}.module-tile:hover .module-media,.module-tile:focus-visible .module-media{filter:grayscale(0)}.module-tile>span{position:absolute;left:22px;bottom:22px;padding:8px 12px;background:#1117;color:#fff;font-size:clamp(18px,2vw,28px);font-weight:300;z-index:2}@keyframes module-zoom{to{transform:scale(1.06)}}@media(prefers-reduced-motion:reduce){.module-slides .module-media{animation:none!important;transition:none!important}}
.module-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.module-tile>span{background:#1114;font-size:clamp(17px,1.7vw,25px);font-weight:300}.module-placeholder{background:linear-gradient(145deg,#30302e,#191919)}.module-placeholder:hover{background:linear-gradient(145deg,#393833,#202020)}.module-placeholder small{position:absolute;left:22px;top:22px;color:#888;font-size:10px;letter-spacing:.08em}.module-placeholder>span{line-height:1.4;right:16px;background:none;padding:0}@media(max-width:1000px){.module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:550px){.module-grid{grid-template-columns:1fr}}

/* Compact course overview with generous side margins. */
.module-section{width:100%;max-width:1080px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}.module-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.module-tile>span{font-size:clamp(15px,1.2vw,20px);left:16px;bottom:16px;padding:7px 9px}.module-placeholder>span{padding:0;right:14px}.module-placeholder small{left:16px;top:16px;font-size:9px}@media(max-width:1100px){.module-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:750px){.module-section{padding-left:8px;padding-right:8px}.module-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}@media(max-width:420px){.module-tile>span{font-size:14px;left:12px;bottom:12px}.module-placeholder small{left:12px;top:12px;font-size:8px}}

.teaching-introduction{max-width:850px;margin:0 auto 3rem}.teaching-introduction p{line-height:1.7;margin-bottom:1.2rem}#classes{scroll-margin-top:90px}

/* Readable course labels and aligned teaching introduction. */
.module-tile>span{background:#000;color:#fff;opacity:1}.module-tile>small{background:#000;color:#fff;padding:5px 7px}.teaching-page .page-head{width:100%;max-width:850px;margin-left:auto;margin-right:auto}.teaching-page .page-head p{max-width:none}

.module-tile>span{left:0;right:0;padding:12px 16px;background:#000}.collaborator-logos a{color:inherit}.logo-surface:has(img[src*="raffles"]){padding:5px}

/* Uniform, compact ribbons for course and workshop tiles. */
.module-tile>span{box-sizing:border-box;left:0;right:0;bottom:14px;height:56px;padding:8px 12px;display:flex;align-items:center;justify-content:flex-start;font-size:13px;line-height:1.35;font-weight:300;background:#000}.module-tile>small{font-size:8px;padding:3px 5px}.workshops-intro{max-width:850px;line-height:1.75;margin:0 0 28px;color:#ddd}@media(max-width:750px){.module-tile>span{height:56px;font-size:11px;padding:7px 9px;bottom:12px}}

/* Local review: square school logos and edge-aligned ribbons. */
.module-tile>span{bottom:0}.collaborator-logos{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1080px;margin-left:auto;margin-right:auto}.collaborator-logos figure{margin:0}.collaborator-logos .logo-surface{aspect-ratio:1;height:auto;width:100%;box-sizing:border-box;padding:30px}.collaborator-logos .logo-surface:has(img[src*="raffles"]){padding:18px}@media(max-width:650px){.collaborator-logos{grid-template-columns:repeat(2,minmax(0,1fr))}.collaborator-logos .logo-surface{padding:18px}}

/* Keep the education heading and logo grid on the same column. */
#education-organizations{max-width:1080px;margin-left:auto;margin-right:auto}
#education-organizations .collaborator-logos{max-width:none;margin-left:0;margin-right:0}