/* Course visuals — pairs with course-visuals.js. Cached immutable: bump ?v= on every <link> when this changes. */
.kv{container-type:size;position:relative;width:100%;margin:2rem 0 0;aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:#0C0D0F;color:#F4F1EA;border:1px solid rgba(217,55,50,.3);box-shadow:0 0 50px -12px rgba(217,55,50,.32),0 24px 60px -22px rgba(0,0,0,.8);contain:layout paint;isolation:isolate}
.kv[data-kv="graphic-design"]{background:#F4F1EA}
.kv-fallback{position:absolute;inset:0;display:block}
.kv-fallback img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.kv-on .kv-fallback{display:none}
/* layers fill the box at 16:10, centred, matching the stage transform in course-visuals.js */
.kv-layer{position:absolute;left:50%;top:50%;width:max(160cqh,min(100cqw,188.2cqh));height:auto;aspect-ratio:16/10;transform:translate(-50%,-50%);display:block;z-index:1}
.kv-chrome{z-index:6;pointer-events:none}
.kv-stage{position:absolute;left:0;top:0;width:1600px;height:1000px;transform-origin:0 0;z-index:1;font-family:Inter,'Noto Sans Ethiopic',sans-serif}
.kv svg text{font-family:Inter,'Noto Sans Ethiopic',sans-serif}
.kv svg text.kv-m{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
/* No-JS poster for the language pages, which have no photo to fall back on. */
.kv-poster{display:flex;align-items:center;justify-content:center;font:800 clamp(3rem,14vw,9rem)/1 Inter,'Noto Sans SC','Noto Sans Arabic',sans-serif;color:#F4F1EA}
/* Small labels would fall below ~11px on a phone: drop them rather than shrink them. */
.kv[data-narrow] .kv-sm{display:none}

/* Each course page opens on its visual as a full-bleed cinema banner: letterbox bars
   part like a film starting, under viewfinder corners and a blinking REC. */
.ph:has(> .kv){display:flex;flex-direction:column;padding-top:0}
.ph > .kv{order:-1;align-self:stretch;width:auto;margin:0 -4vw 2.4rem;border-radius:0;border-width:0 0 1px;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.ph > .kv::before{content:"";position:absolute;inset:0;z-index:7;pointer-events:none;--c:rgba(244,241,234,.85);
  background:
    linear-gradient(var(--c),var(--c)) left 28px top 28px/46px 3px,linear-gradient(var(--c),var(--c)) left 28px top 28px/3px 46px,
    linear-gradient(var(--c),var(--c)) right 28px top 28px/46px 3px,linear-gradient(var(--c),var(--c)) right 28px top 28px/3px 46px,
    linear-gradient(var(--c),var(--c)) left 28px bottom 28px/46px 3px,linear-gradient(var(--c),var(--c)) left 28px bottom 28px/3px 46px,
    linear-gradient(var(--c),var(--c)) right 28px bottom 28px/46px 3px,linear-gradient(var(--c),var(--c)) right 28px bottom 28px/3px 46px,
    linear-gradient(90deg,var(--kv-bg,#0C0D0F) 2%,transparent 16%,transparent 84%,var(--kv-bg,#0C0D0F) 98%),
    radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(12,13,15,.45));
  background-repeat:no-repeat;box-shadow:inset 0 0 0 #0C0D0F,inset 0 0 0 #0C0D0F;animation:kvShutter 1.8s cubic-bezier(.75,0,.2,1) .25s both}
.ph > .kv::after{content:"REC";position:absolute;z-index:8;top:30px;left:88px;padding-left:20px;font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.3em;color:var(--kv-c,#F4F1EA);
  background:radial-gradient(circle at 6px 50%,#E63946 5px,transparent 5.6px) no-repeat;animation:kvRec 1s steps(1) infinite}
.ph > .kv[data-kv="graphic-design"]::before{--c:rgba(12,13,15,.75)}
.ph > .kv[data-kv="graphic-design"]{--kv-c:#0C0D0F;--kv-bg:#F4F1EA}
@keyframes kvShutter{from{box-shadow:inset 0 50vh 0 #0C0D0F,inset 0 -50vh 0 #0C0D0F}}
@keyframes kvRec{50%{opacity:.35}}
/* wide screens get a 21:9 strip with its own corners; phones keep 16:10 and the drawn viewfinder */
@media (min-width:760px){
  .ph > .kv{aspect-ratio:21/9;max-height:70vh}
  .ph > .kv .kv-chrome{display:none}
}
@media (max-width:759px){.ph > .kv::before{background:none}.ph > .kv::after{display:none}}
@media (prefers-reduced-motion:reduce){.ph > .kv::before,.ph > .kv::after{animation:none}}