.video-panel{height:auto!important;min-height:232px!important;max-width:100%;overflow:visible!important}
.learning-video{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#302820;color:#fffdf8;border-radius:2px}
.video-panel>.learning-video{flex:none;align-self:stretch}
.action:disabled{background:#e2d8c9!important;color:#72665a!important;cursor:not-allowed}
.action:disabled p{color:#72665a!important}
.response-field{min-height:25px;line-height:25px;overflow:auto}
.response-field[readonly]{opacity:.8}
.content>.node,.content .node{height:auto}
.content .video-panel .node{width:100%!important}

/* Extend only the navigation background; keep its existing content alignment. */
.navigation{position:relative;width:100%!important;box-shadow:0 0 0 100vmax #302820;clip-path:inset(0 -100vmax)}

/* The smaller course artwork gives the introduction room to wrap into two lines. */
@media(min-width:761px){
 .n-13-12{width:100%;gap:40px}
 .n-13-13{width:auto;flex:1 1 0}
 .n-13-14{width:100%;min-height:140px}
 .n-13-18{width:36%;height:240px!important;min-height:0!important;flex:0 1 36%;align-self:center}
}
@media(min-width:761px) and (max-height:950px){
 .n-13-9{padding:28px 48px!important;gap:16px!important}
 .n-13-13{gap:16px}
 .n-13-18{height:220px!important}
}
@media(min-width:761px) and (max-height:800px){
 .n-13-9{padding:20px 40px!important;gap:12px!important}
 .n-13-13{gap:12px}
 .n-13-18{height:190px!important}
 .courses>.course-card{padding:16px!important;gap:12px!important}
}

/* Fluid shared layout, recalculated by CSS whenever the viewport changes. */
.screen{width:100%!important;max-width:100%!important}
.screen>.content{width:100%!important;max-width:1440px!important;align-self:center;padding-left:clamp(24px,4.45vw,64px)!important;padding-right:clamp(24px,4.45vw,64px)!important}
.navigation{display:grid!important;grid-template-columns:minmax(180px,2fr) repeat(4,minmax(0,1fr));gap:clamp(12px,2.2vw,32px)!important;height:auto!important;padding-left:max(clamp(24px,4.45vw,64px),calc((100vw - 1312px)/2))!important;padding-right:max(clamp(24px,4.45vw,64px),calc((100vw - 1312px)/2))!important}
.navigation>a,.navigation>p{width:100%!important;min-width:0!important;text-align:center;justify-self:stretch;white-space:normal}
.navigation>a:first-child,.navigation>p:first-child{width:100%!important;min-width:0!important;text-align:left}
.courses{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));width:100%!important;align-items:stretch!important;gap:clamp(16px,1.67vw,24px)!important}
.courses>.course-card{width:100%!important;height:100%!important}
.course-card>.action{margin-top:auto}
.editorial{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%!important;gap:clamp(24px,2.8vw,40px)!important;align-items:center!important}
.editorial>div,.editorial>.artwork{width:100%!important;min-width:0!important}
.n-13-12.editorial{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}
@media(max-width:900px){
 .navigation{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:18px!important}
 .navigation>a:first-child,.navigation>p:first-child{grid-column:1/-1;text-align:center}
}
@media(max-width:760px){
 .editorial,.n-13-12.editorial{grid-template-columns:minmax(0,1fr)}
 .courses{grid-template-columns:minmax(0,1fr)}
 .navigation{padding:20px 24px!important;column-gap:12px!important}
}
@media(max-width:480px){
 .navigation{grid-template-columns:repeat(2,minmax(0,1fr))}
 .navigation>a:not(:first-child),.navigation>p:not(:first-child){padding:8px 0}
}

/* Match the portrait height to the existing text column without moving that column. */
.screen[data-view="intro"] .n-13-45{align-items:start!important}
.screen[data-view="intro"] .n-13-47{align-self:start}
.screen[data-view="intro"] .n-13-46{height:var(--intro-height,300px)!important;min-height:0!important;width:auto!important;max-width:100%!important;object-fit:contain;align-self:start;justify-self:center}
@media(max-width:760px){.screen[data-view="intro"] .n-13-46{height:auto!important;width:100%!important;max-height:360px;aspect-ratio:440/380;object-fit:contain}}

/* Both home headings share a type scale and stay inside the left grid column. */
.n-13-13>h1,.n-13-13>.hero-title{font-family:Lora,serif;font-size:clamp(28px,3.2vw,44px)!important;line-height:1.2!important;width:100%!important;min-height:0!important;overflow-wrap:break-word}
.n-13-13{min-width:0;gap:clamp(14px,1.5vw,22px)!important}
.home-role-gateway{position:relative;display:block;width:100%;min-width:0;height:clamp(190px,20vw,280px);padding:0;background:transparent;border:0;overflow:hidden;align-self:center;cursor:pointer}
.home-role-gateway:disabled{cursor:not-allowed;opacity:1}
.home-role-gateway .n-13-18{display:block;width:100%!important;height:100%!important;min-height:0!important;object-fit:cover}
.home-role-gateway.is-unlocked img{filter:brightness(.35)}
.role-gateway-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;color:#fffdf8;font:600 clamp(22px,2vw,30px)/1.35 Arimo,Arial,sans-serif;text-align:center}
.role-gateway-label[hidden]{display:none}
.learning-completed .completion-message{font:400 clamp(18px,1.8vw,24px)/1.5 Lora,serif;font-size:clamp(18px,1.8vw,24px)!important;line-height:1.5!important;color:#fffdf8;width:100%;min-height:0}
.reflection-form{display:flex;flex-direction:column;gap:16px;width:100%;max-width:1000px}
.reflection-form[hidden]{display:none}
.reflection-form label{font:400 20px/1.4 Arimo,Arial,sans-serif}
.reflection-form textarea{display:block;width:100%;max-width:100%;min-height:180px;padding:18px;border:1px solid #8a7966;border-radius:2px;resize:vertical;background:#fffdf8;color:#302821;line-height:1.6}
.reflection-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.reflection-actions [role="status"]{font:400 18px/1.5 Arimo,Arial,sans-serif;color:#355843}
.navigation [aria-disabled="true"]{opacity:.6}
@media(max-width:760px){.home-role-gateway{height:auto;aspect-ratio:1.875}.reflection-form textarea{min-height:200px}.video-panel{padding:24px!important}}

/* Match the shared save-and-leave confirmation actions. */
.screen[data-screen="14:144"] .action > p {
  color: #fffdf8;
  font: 400 14px/20px Arimo, Arial, sans-serif;
  text-align: center;
}
.reflection-form textarea::placeholder { color: #92958d; opacity: 1; }