/* Umar YouTube Videos. Override colours via --umar-yt-* variables on :root or a wrapper. */
.umar-yt{--yc:var(--umar-yt-cream,#FBF7F0);--ys:var(--umar-yt-sand,#F0E8D8);--yi:var(--umar-yt-ink,#1F2A27);--yt:var(--umar-yt-teal,#0F5B4D);--ya:var(--umar-yt-amber,#D98A2B);--yr:var(--umar-yt-radius,20px);--yh:var(--umar-yt-heading,"Fraunces",Georgia,serif);--ym:var(--umar-yt-muted,#4A5754);font-family:inherit;color:var(--yi);margin:0 0 1.5em;position:relative}
.umar-yt *{box-sizing:border-box}
.umar-yt-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.umar-yt__list{list-style:none;margin:0;padding:0;display:grid;gap:28px 24px;grid-template-columns:1fr}
@media (min-width:600px){.umar-yt__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.umar-yt__list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.umar-yt__item{position:relative;margin:0;padding:0;min-width:0}
.umar-yt--carousel .umar-yt__list{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding:4px 4px 14px;scrollbar-width:thin}
.umar-yt--carousel .umar-yt__item{flex:0 0 min(82%,340px);scroll-snap-align:start}
.umar-yt__card{display:flex;flex-direction:column;gap:12px;margin:0}
.umar-yt .umar-yt__open,.umar-yt .umar-yt__open:hover,.umar-yt .umar-yt__open:focus{display:block;width:100%;margin:0;padding:0;border:0;border-radius:var(--yr);background:none;box-shadow:none;color:inherit;font:inherit;text-align:left;text-transform:none;letter-spacing:normal;text-decoration:none;cursor:pointer;container-type:inline-size}
.umar-yt .umar-yt__open:focus-visible{outline:3px solid var(--yt);outline-offset:3px}
.umar-yt__media{--bg:var(--yc);--fg:var(--yt);display:block;position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--yr);background:var(--ys)}
.umar-yt__img,.umar-yt .umar-yt__media .umar-yt__img{display:block;position:absolute;top:0;left:0;width:100%!important;height:100%!important;max-width:none!important;margin:0;object-fit:cover;object-position:50% 50%}
.umar-yt__play{position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--bg);color:var(--fg);box-shadow:0 2px 10px rgba(0,0,0,.3)}
.umar-yt__play svg{margin-left:2px}
.umar-yt__media--t{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(14px,6cqi,26px);background:var(--bg);color:var(--fg)}
.umar-yt__media--t .umar-yt__play{background:var(--fg);color:var(--bg)}
.umar-yt__label{font-size:.75rem;font-weight:600;line-height:1;letter-spacing:.12em;text-transform:uppercase}
.umar-yt__ttl{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden;max-width:calc(100% - 60px);font-family:var(--yh);font-weight:700;font-size:clamp(1.15rem,8cqi,1.7rem);line-height:1.15;letter-spacing:-.01em;overflow-wrap:anywhere}
.umar-yt__c1{--bg:var(--yc);--fg:var(--yt);box-shadow:inset 0 0 0 2px var(--ys)}
.umar-yt__c2{--bg:var(--yt);--fg:var(--yc)}
.umar-yt__c3{--bg:var(--ya);--fg:var(--yi)}
.umar-yt__c4{--bg:var(--yi);--fg:var(--ya)}
.umar-yt__c5{--bg:var(--ys);--fg:var(--yt)}
.umar-yt__c4 .umar-yt__ttl{color:var(--yc)}
.umar-yt__title{margin:0;font-size:1.0625rem;line-height:1.35;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.umar-yt__title.umar-yt-sr{display:block}
.umar-yt__meta{margin:-6px 0 0;font-size:.875rem;color:var(--ym)}
.umar-yt__more{margin:22px 0 0;font-weight:600}
.umar-yt__more a{color:var(--yt);text-underline-offset:4px}
.umar-yt__more a:hover{text-decoration-thickness:2px}
.umar-yt__empty{margin:0 0 8px}
@media (prefers-reduced-motion:no-preference){
.umar-yt__img{transition:transform .35s ease}
.umar-yt__open:hover .umar-yt__img{transform:scale(1.04)}
.umar-yt__play{transition:transform .2s ease}
.umar-yt__open:hover .umar-yt__play{transform:scale(1.1)}
.umar-yt--carousel .umar-yt__list{scroll-behavior:smooth}
.umar-yt-modal:not([hidden]){animation:umar-yt-in .2s ease}
}
@keyframes umar-yt-in{from{opacity:0}}
.umar-yt-lock{overflow:hidden!important}
.umar-yt-modal{position:fixed;inset:0;z-index:999999;display:grid;place-items:center;padding:56px 16px 16px;background:rgba(15,25,22,.9)}
.umar-yt-modal[hidden]{display:none}
.umar-yt-modal__box{position:relative;width:min(100%,960px)}
.umar-yt-modal__frame{aspect-ratio:16/9;background:#000;border-radius:var(--umar-yt-radius,20px);overflow:hidden}
.umar-yt-modal__frame iframe{display:block;width:100%;height:100%;border:0}
.umar-yt-modal .umar-yt-modal__x{position:absolute;right:0;bottom:calc(100% + 8px);display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:var(--umar-yt-cream,#FBF7F0);color:var(--umar-yt-ink,#1F2A27);font:400 28px/1 Arial,sans-serif;cursor:pointer;box-shadow:none}
.umar-yt-modal .umar-yt-modal__x:hover,.umar-yt-modal .umar-yt-modal__x:focus{background:var(--umar-yt-amber,#D98A2B);color:var(--umar-yt-ink,#1F2A27)}
.umar-yt-modal .umar-yt-modal__x:focus-visible{outline:3px solid #fff;outline-offset:2px}