/* srilankan family, light sites (guide, info, directory): paper body, deep green frame, per-site accent */
:root{--paper:#ffffff;--card:#fff;--ink:#0a120d;--mut:#26342c;--line:#c9d3cd;--green:#0b2a1c;--green2:#061a12;--gmut:#a9c0b3;--gink:#e8ecea;--radius:14px;--max:1120px;--read:720px}
*{box-sizing:border-box}[hidden]{display:none!important}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 "Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--d)}img{max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 16px}
h1,h2,h3,.brand{font-family:"Comfortaa","Nunito",system-ui,sans-serif;line-height:1.25}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:99}
/* network strip */
.netbar{background:var(--green2);color:var(--gmut);font-size:.8rem;border-bottom:1px solid rgba(255,255,255,.07)}
.netbar .wrap{display:flex;align-items:center;gap:4px 14px;overflow-x:auto;white-space:nowrap;min-height:34px}
.netbar b{color:var(--gink);font-family:"Comfortaa",sans-serif;font-size:.82rem;margin-right:2px}
.netbar a{color:var(--gmut);text-decoration:none;padding:6px 2px}.netbar a:hover{color:#fff}
.netbar a[aria-current]{color:var(--b);font-weight:800}
/* header */
header.site{background:var(--green);color:var(--gink);position:sticky;top:0;z-index:20}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:8px 18px;min-height:64px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--gink)}
.logo img{width:40px;height:40px}.logo .brand{display:block;font-weight:700;font-size:1.28rem;line-height:1.05}
.logo .slogan{display:block;font-size:.72rem;color:var(--gmut);font-weight:600;margin-top:2px}
nav.top{display:flex;gap:18px;font-weight:700;font-size:.93rem;flex-wrap:wrap;align-items:center}
nav.top a{color:var(--gmut);text-decoration:none}nav.top a:hover,nav.top a[aria-current]{color:#fff}
nav.top a[aria-current]{box-shadow:0 2px 0 var(--b)}
nav.top .ne{margin-right:5px;font-size:.95em}.nsep{width:1px;height:18px;background:rgba(255,255,255,.15)}
nav.top a.hwa{display:inline-flex;align-items:center;gap:6px;background:#25d366;color:#05210f;font-weight:800;border-radius:999px;padding:6px 12px;font-size:.86rem;white-space:nowrap}
nav.top a.hwa svg{width:16px;height:16px}
@media(max-width:620px){nav.top{gap:12px;font-size:.86rem;width:100%;justify-content:space-between}nav.top .ne{margin-right:3px}nav.top a.hwa span{display:none}nav.top a.hwa{padding:7px}.nsep{display:none}}
/* draft banner */
.draft{background:#fff3cd;color:#5a4300;text-align:center;font-size:.85rem;font-weight:700;padding:6px 12px;border-bottom:1px solid #e8d48a}
/* hero */
.herob{background:linear-gradient(135deg,var(--t) 0%,var(--t2) 70%,#fff 100%);border-bottom:5px solid var(--b)}.herogrid{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:center}.heroart svg{width:100%;height:auto;max-height:300px;display:block;border-radius:24px;background:#fff;filter:drop-shadow(0 10px 18px rgba(10,18,13,.12))}@media(max-width:760px){.herogrid{grid-template-columns:1fr;gap:0}.heroart{max-width:320px;margin:0 auto 22px}}.hero{padding:44px 0 30px}.hero h1{font-size:clamp(1.8rem,5vw,2.7rem);margin:0 0 12px;max-width:820px}
.hero p.lead{font-size:1.15rem;color:var(--mut);max-width:680px;margin:0 0 20px}
.btn{display:inline-block;line-height:1.4;margin:0 8px 10px 0;background:var(--d);color:#fff;font-weight:800;border-radius:999px;padding:10px 22px;text-decoration:none;font-size:.98rem}
.btn:hover{filter:brightness(1.1)}.btn.ghost{background:none;color:var(--d);border:1.5px solid var(--d);margin-left:0;padding:8.5px 20px}
/* sections / cards */
.sec{padding:30px 0 34px}.sec h2{font-size:1.45rem;margin:0}.sec.alt{background:var(--t2);border-top:1px solid var(--t);border-bottom:1px solid var(--t)}.sec.family{padding-top:34px}.family h2{margin:0 0 16px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-top:5px solid var(--b);border-radius:var(--radius);padding:16px 18px;box-shadow:0 1px 3px rgba(10,18,13,.06);text-decoration:none;color:var(--ink);display:block}
a.card:hover{box-shadow:0 6px 22px rgba(20,40,30,.1);transform:translateY(-1px)}
.card h3{margin:0 0 6px;font-size:1.05rem}.card p{margin:0 0 8px;color:var(--mut);font-size:.92rem;line-height:1.5}
.card .more{color:var(--d);font-weight:800;font-size:.88rem}
.card.soon{background:#f3f6f4;border:1px dashed #aebbb4;border-top:5px solid #c5d0ca}.card.soon h3{color:var(--mut)}.card .badge{display:inline-block;background:#e3e9e5;color:var(--mut);font-size:.72rem;font-weight:800;border-radius:999px;padding:2px 10px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.chip{border:1px solid #b9c5be;background:#fff;color:var(--mut);border-radius:999px;padding:5px 14px;font:700 .85rem "Nunito",sans-serif;text-decoration:none;cursor:pointer}
.chip.on,.chip[aria-pressed=true]{background:var(--d);color:#fff;border-color:var(--d)}
.family .card{border-top-color:var(--line)}
/* article */
.crumbs{font-size:.85rem;color:var(--mut);padding:18px 0 0}.crumbs a{color:var(--mut)}
article.post{max-width:var(--read);margin:0 auto;padding:10px 16px 40px}
article.post h1{font-size:clamp(1.7rem,4.6vw,2.4rem);margin:10px 0 12px}
article.post .intro{font-size:1.2rem;color:var(--mut);margin:0 0 16px}
.tag{display:inline-flex;gap:6px;align-items:center;font-size:.84rem;font-weight:800;color:var(--d);background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 12px;margin:0 8px 8px 0}
.disc{background:#fff;border:1px solid var(--line);border-left:5px solid var(--b);border-radius:10px;padding:12px 16px;font-size:.92rem;color:var(--mut);margin:18px 0}
.toc{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 18px;margin:18px 0;font-size:.95rem}.toc b{font-family:"Comfortaa",sans-serif}.toc ul{margin:6px 0 0;padding-left:18px}
article.post h2{font-size:1.45rem;margin:36px 0 10px}article.post h3{font-size:1.15rem;margin:26px 0 8px}
article.post p,article.post li{max-width:var(--read)}article.post ul,article.post ol{padding-left:22px}
article.post table{border-collapse:collapse;width:100%;font-size:.95rem;margin:14px 0}article.post th,article.post td{border:1px solid var(--line);padding:8px 10px;text-align:left}article.post th{background:var(--t2)}
.src{font-size:.9rem;color:var(--mut)}.src ul{margin:6px 0}
.related{margin-top:34px}
/* footer */
footer.site{background:var(--green);color:var(--gmut);padding:30px 0 22px;margin-top:30px;font-size:.9rem}
footer.site a{color:var(--gink)}footer.site .cols{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
footer.site .brandline{display:flex;gap:10px;align-items:center;color:var(--gink);margin-bottom:16px;font-family:"Comfortaa",sans-serif}
footer.site .fine{margin-top:20px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);font-size:.8rem}
/* share menu */
.sharemenu{position:fixed;z-index:90;min-width:190px;padding:6px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 40px rgba(0,0,0,.25);display:flex;flex-direction:column;gap:2px}
.sharemenu a,.sharemenu button{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;border:0;background:none;color:var(--ink);font:700 .9rem "Nunito",sans-serif;text-decoration:none;cursor:pointer;text-align:left;width:100%}
.sharemenu a:hover,.sharemenu button:hover{background:#f3eee2}.sharemenu svg{width:18px;height:18px}

/* section heads, article band, images */
.sechead{display:flex;gap:14px;align-items:center;margin:0 0 18px}.sechead .note{margin:2px 0 0;color:var(--mut);font-size:.98rem}
.ico{flex:none;width:50px;height:50px;border-radius:15px;background:var(--b);display:flex;align-items:center;justify-content:center;font-size:1.65rem;box-shadow:0 4px 10px rgba(10,18,13,.15)}
.pband{background:linear-gradient(135deg,var(--t) 0%,var(--t2) 75%,#fff 100%);border-bottom:5px solid var(--b);display:grid;grid-template-columns:minmax(0,var(--read)) 260px;justify-content:center;gap:34px;align-items:center;padding:14px 16px 22px}
.pband .crumbs{padding:6px 0 0}.pband h1{font-size:clamp(1.7rem,4.6vw,2.4rem);margin:10px 0 12px}.pband .intro{font-size:1.2rem;color:var(--mut);margin:0 0 14px}
.part svg{width:100%;height:auto;display:block}@media(max-width:860px){.pband{grid-template-columns:1fr}.part{display:none}}
article.post figure,.heroimg{margin:22px 0}article.post img{max-width:100%;height:auto;border-radius:14px;display:block}article.post figcaption{font-size:.85rem;color:var(--mut);margin-top:6px}
.card .thumb{display:block;width:calc(100% + 36px);margin:-16px -18px 12px;height:150px;object-fit:cover;border-radius:9px 9px 0 0}

/* photo slots */
figure.ph{margin:0}.ph img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;border-radius:24px;box-shadow:0 0 0 1px var(--line),0 10px 18px rgba(0,0,0,.10)}
.ph figcaption{font-size:.78rem;color:var(--mut);margin-top:6px;text-align:right}
.part:has(.ph){display:block}@media(max-width:860px){.part:has(.ph){max-width:420px}}
.card .thumb{display:block;width:calc(100% + 36px);margin:-16px -18px 12px;height:150px;object-fit:cover;border-radius:0}
.heroart{padding:28px 0}@media(max-width:760px){.heroart{padding:0}}
/* pure black on brilliant white (matches deployed previews) */
:root{--paper:#fff;--ink:#000;--mut:#141a17;--line:#dde4e0}
body{background:#fff;color:#000}h1,h2,h3,h4,p,li,td,th{color:#000}.note,.intro,.pband .intro,figcaption{color:var(--mut)}
.herob,.pband{background:#fff;border-bottom:1px solid var(--line);box-shadow:inset 0 -6px 0 var(--b)}
.sec.alt{background:#fff;border-top:0;border-bottom:0}.sec{border-top:1px solid var(--line)}.herob+.sec{border-top:0}
.card{background:#fff;border:1px solid var(--line);border-top:5px solid var(--b);box-shadow:0 2px 8px rgba(0,0,0,.07)}
.card.soon{background:#fafbfa;border-top:5px solid #c9d2cd}
/* ---------- hero film ---------- */
.film{position:relative;background:#0b2a1c;border-bottom:6px solid var(--b)}
.film-stick{position:relative;height:min(56.25vw,100vh);min-height:480px;overflow:hidden;display:flex;align-items:center}
.film picture,.film-p,.film-v,.film-fx{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film-p{animation:kb 22s ease-in-out infinite alternate;transform-origin:60% 45%}
.film-v{opacity:0;transition:opacity .9s}
.film.ready .film-v{opacity:1}
.film-fx{pointer-events:none;mix-blend-mode:screen}
.film-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.70) 0%,rgba(0,0,0,.45) 42%,rgba(0,0,0,.05) 75%),linear-gradient(0deg,rgba(0,0,0,.35),rgba(0,0,0,0) 30%)}
.film-copy{position:relative;z-index:2;width:100%}
.film .hero{padding:40px 0;max-width:640px;transform:translateY(calc(var(--p,0)*-60px));opacity:calc(1 - var(--p,0)*.9)}
.film .hero h1,.film .hero p.lead{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.film .hero p.lead{color:#f2f6f4}
.film .btn{background:var(--b);color:#00131c}.film .btn.ghost{background:rgba(0,0,0,.25);color:#fff;border-color:#fff}
.film-credit{position:absolute;right:14px;bottom:10px;z-index:2;color:#fff;opacity:.8;font-size:.72rem;text-shadow:0 1px 4px #000}
.film-credit{display:none}
.film-cue{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:2;color:#fff;font-weight:700;font-size:.85rem;animation:bob 2s ease-in-out infinite;opacity:calc(1 - var(--p,0)*5)}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.12) translate(-1.5%,-1%)}}
@keyframes bob{50%{transform:translate(-50%,6px)}}
@media(max-width:760px){.film-stick{height:82vh;min-height:480px;align-items:flex-end}.film-shade{background:linear-gradient(0deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.45) 55%,rgba(0,0,0,.10) 100%)}.film .hero{padding:24px 0 44px}.film-p,.film-v{object-position:60% center}.film-cue{display:none}}
@media(prefers-reduced-motion:reduce){.film-p,.film-cue{animation:none}}
/* gentle scroll reveals (modern browsers only) */
@supports (animation-timeline: view()){@media(prefers-reduced-motion:no-preference){
.sec .card,.sechead{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 35%}}}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.card{transition:transform .2s,box-shadow .2s}a.card:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.12)}
.ico{transition:transform .25s}.sechead:hover .ico{transform:rotate(-6deg) scale(1.06)}
/* phone: WhatsApp button sits on the logo row (top right) */
@media(max-width:620px){header.site .wrap{position:relative}nav.top a.hwa{position:absolute;right:16px;top:12px}header.site .logo{padding-right:52px}}
@media(max-width:400px){nav.top{gap:6px;font-size:.8rem}nav.top .ne{margin-right:2px}}

/* hero film v2: no particle overlay, lighter shade, slightly brighter footage */
.film-fx{display:none}
.film-v,.film-p{filter:brightness(1.1) saturate(1.06)}
.film-shade{background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.30) 38%,rgba(0,0,0,0) 62%)}
.film .hero{max-width:760px}
.film .hero h1,.film .hero p.lead{text-shadow:0 2px 6px rgba(0,0,0,.55),0 0 22px rgba(0,0,0,.35)}
@media(max-width:760px){.film-shade{background:linear-gradient(0deg,rgba(0,0,0,.75) 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,0) 70%)}}
.film .hero h1,.film .hero p.lead{text-wrap:balance}
/* ---------- split hero: copy panel + 16:9 film that feathers into it ---------- */
.film.split{--panel:#0b2a1c;background:var(--panel)}
.film.split.light{--panel:#ffffff}
.film.split .film-stick{height:auto;min-height:0;aspect-ratio:2.75/1;max-height:640px;display:flex;align-items:center}
.film.split .film-media{position:absolute;top:0;right:0;height:100%;aspect-ratio:16/9;max-width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 14%,#000 32%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 14%,#000 32%)}
.film.split .film-media .film-p,.film.split .film-media .film-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film.split .film-copy{position:relative;z-index:2}
.film.split .hero{max-width:min(46%,560px);transform:none;opacity:1;padding:28px 0}
.film.split .hero h1{font-size:clamp(1.7rem,3.2vw,2.6rem)}
.film.split .film-credit{right:10px;bottom:8px}
.film.split.light .hero h1,.film.split.light .hero p.lead{color:#000;text-shadow:none}
.film.split.light .hero p.lead{color:var(--mut)}
.film.split.light .btn{background:var(--d);color:#fff}.film.split.light .btn.ghost{background:none;color:var(--d);border-color:var(--d)}
@media(max-width:760px){
 .film.split .film-stick{aspect-ratio:auto;max-height:none;display:block}
 .film.split .film-media{position:relative;width:100%;height:auto;aspect-ratio:16/9;
   -webkit-mask-image:linear-gradient(0deg,transparent 0%,rgba(0,0,0,.6) 14%,#000 34%);mask-image:linear-gradient(0deg,transparent 0%,rgba(0,0,0,.6) 14%,#000 34%)}
 .film.split .film-credit{top:8px;bottom:auto}
 .film.split .hero{max-width:none;padding:0 0 30px;margin-top:-18px}
}
/* ---------- section pages: white strip header ---------- */
.film.split.strip .film-stick{aspect-ratio:3.4/1;max-height:440px}
.film.split.strip .hero{padding:18px 0}
.film.split.strip .hero h1{font-size:clamp(1.7rem,3.4vw,2.5rem);margin:6px 0 10px}
.film.split.strip .hero p.lead{font-size:1.06rem;margin:0}
.film.split.strip .crumbs{padding:0;font-size:.9rem}
.film.split.light{border-bottom:1px solid var(--line);box-shadow:inset 0 -5px 0 var(--b)}
.sechead{flex-wrap:wrap}.sechead h2 a{color:inherit;text-decoration:none}.sechead h2 a:hover{color:var(--d)}
.seeall{margin-left:auto;font-weight:800;color:var(--d);text-decoration:none;white-space:nowrap}.seeall:hover{text-decoration:underline}
.chips{display:flex;flex-wrap:wrap;gap:10px}.chips .chip{display:inline-block;padding:9px 16px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:#000;font-weight:700;background:#fff}.chips .chip:hover{border-color:var(--b)}
.card.soon .thumb{filter:saturate(.9)}
article.post table{width:100%;border-collapse:collapse;font-size:.92rem}article.post td,article.post th{border-bottom:1px solid var(--line);padding:8px 6px;text-align:left;vertical-align:top}
@media(max-width:760px){.film.split.strip .film-media{aspect-ratio:16/9}.film.split.strip .hero{margin-top:-14px;padding-bottom:22px}}
.card .thumb{max-width:none;width:calc(100% + 36px);height:160px}
.sechead>div{flex:1;min-width:0}
@media(max-width:760px){.film.split.strip .film-stick{aspect-ratio:auto;max-height:none}.seeall{display:none}.sechead h2 a::after{content:" →";color:var(--d)}}
/* ---------- v9 layout fixes ---------- */
/* landing: full-screen dark hero, 16:9 film fitted to the height, anchored right */
.film.split.dark .film-stick{aspect-ratio:auto;height:calc(100svh - 98px);min-height:520px;max-height:none}
.film.split .film-media{top:0;height:100%;width:auto;max-width:none}
.film.split.dark .film-cue{display:block}
/* section strips: full width, video stops above the accent line */
.film.split.strip .film-stick{aspect-ratio:auto;height:min(29.4vw,440px);min-height:300px;max-height:none}
.film.split.light .film-media{height:calc(100% - 6px)}
/* article / page bands line up with the logo */
.pband{grid-template-columns:minmax(0,1fr) 280px;justify-content:stretch;padding-left:max(16px,calc((100% - var(--max))/2 + 16px));padding-right:max(16px,calc((100% - var(--max))/2 + 16px))}
.pband .pin{max-width:760px}
@media(max-width:760px){
 .film.split.dark .film-stick,.film.split.strip .film-stick{height:auto;min-height:0}
 .film.split .film-media,.film.split.light .film-media{height:auto;width:100%}
 .film.split.dark .film-cue{display:none}
 .netbar b{display:none}.netbar .wrap{gap:4px 12px}
}
/* v10: film ends in line with the Share button (same margin as the left side) */
.film.split{--edge:max(16px,calc((100% - var(--max))/2 + 16px))}
.film.split .film-media{right:var(--edge);max-width:calc(100% - var(--edge))}
@media(max-width:760px){.film.split .film-media{right:auto;max-width:none}}
.film.split.dark .film-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.35) 35%,rgba(0,0,0,0) 60%);pointer-events:none}
@media(max-width:760px){.film.split.dark .film-media::after{display:none}}
/* v11: landing film stays inside the content width on both sides, 16:9 uncropped */
.film.split.dark .film-stick{height:min(calc(100svh - 98px),calc((min(100vw,var(--max)) - 32px)*.5625))}
.film.split .film-media{max-width:calc(100% - 2*var(--edge))}
@media(max-width:760px){.film.split.dark .film-stick{height:auto}.film.split .film-media{max-width:none}}
/* top family bar centred on wider screens */
@media(min-width:761px){.netbar .wrap{justify-content:center}}
/* callout boxes in articles */
article.post .callout{border-radius:12px;padding:14px 18px;margin:20px 0;border:1px solid var(--line);border-left:5px solid var(--b);background:var(--t2)}
article.post .callout .ct{font-weight:800;margin:0 0 6px}
article.post .callout ul{margin:0;padding-left:20px}article.post .callout li{margin:4px 0}
article.post .callout.warn{border-left-color:#d9822b;background:#fff6ec}
article.post .callout.exp{border-left-color:#0b2a1c;background:#f1f6f3}
article.post .callout.exp .ct::before{content:"💡 "}article.post .callout.warn .ct::before{content:"⚠️ "}
article.post table{display:block;overflow-x:auto}
@media(max-width:860px){.pband{grid-template-columns:1fr}.pband .part:has(.ph){max-width:420px}}
/* article text lines up with the logo and page title */
article.post{margin-left:max(0px,calc((100% - var(--max))/2));margin-right:auto}

/* footer brand: slogan on its own line under the name (fits any slogan length) */
footer.site .brandline .bt{display:flex;flex-direction:column;line-height:1.2}
footer.site .brandline .sl{font-size:.8rem;opacity:.85;font-family:"Nunito",sans-serif;font-weight:600}
/* ---------- explore carousels (home) ---------- */
.sec.explore{padding-top:34px}
.xhead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.xhead h2{margin:0;font-size:1.6rem}.xhead .note{margin:4px 0 0;color:var(--mut)}
.xnav{display:flex;gap:8px}
.xbtn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:1.6rem;line-height:1;cursor:pointer;color:#000;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.xbtn:hover:not(:disabled){border-color:var(--b);color:var(--d)}.xbtn:disabled{opacity:.35;cursor:default}
.noscroll .xnav,.noscroll .xdots{visibility:hidden}
.xtrack{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:2px;padding:4px 2px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.xtrack::-webkit-scrollbar{display:none}
.scard{position:relative;flex:0 0 340px;height:440px;border-radius:22px;overflow:hidden;scroll-snap-align:start;cursor:pointer;background:#0b2a1c;color:#fff;box-shadow:0 10px 24px rgba(0,0,0,.18);transition:transform .3s,box-shadow .3s}
.scard:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(0,0,0,.25)}
.sc-bg,.sc-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 6s ease,opacity .6s}
.scard:hover .sc-bg{transform:scale(1.08)}
.sc-v{opacity:0}.scard.playing .sc-v{opacity:1}
.sc-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.25) 40%,rgba(0,0,0,.82) 100%)}
.sc-body{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:22px}
.sc-ico{position:absolute;top:18px;left:18px;width:48px;height:48px;border-radius:14px;background:var(--b);display:flex;align-items:center;justify-content:center;font-size:1.5rem;box-shadow:0 4px 10px rgba(0,0,0,.25)}
.sc-count{position:absolute;top:26px;right:18px;margin:0;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);padding:4px 10px;border-radius:999px;font-size:.78rem;font-weight:700;color:#fff}
.scard h3{margin:0 0 6px;font-size:1.7rem;color:#fff}.scard h3 a{color:#fff;text-decoration:none}
.sc-blurb{margin:0 0 10px;color:#e8efea;font-size:.95rem}
.sc-list{list-style:none;margin:0 0 14px;padding:0}.sc-list li{margin:4px 0}
.sc-list a{color:#fff;font-size:.9rem;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}.sc-list a:hover{border-color:#fff}
.sc-list li::before{content:"→ ";color:var(--b)}
.sc-btn{align-self:flex-start;background:var(--b);color:#00131c;font-weight:800;padding:9px 16px;border-radius:999px;font-size:.92rem;transition:transform .2s}
.scard:hover .sc-btn{transform:translateX(4px)}
.xdots{display:flex;justify-content:center;gap:6px;margin-top:6px}.xdots span{width:8px;height:8px;border-radius:50%;background:#c9d2cd;transition:all .25s}.xdots span.on{width:22px;border-radius:5px;background:var(--b)}
.lcard{flex:0 0 260px;scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-top:5px solid var(--b);border-radius:var(--radius);padding:16px 18px;text-decoration:none;color:#000;box-shadow:0 2px 8px rgba(0,0,0,.07);transition:transform .2s,box-shadow .2s}
.lcard:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.12)}
.lcard .thumb{display:block;width:calc(100% + 36px);max-width:none;margin:-16px -18px 12px;height:150px;object-fit:cover}
.lc-sec{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--d)}
.lcard h3{font-size:1.05rem;margin:4px 0 8px}
@media(max-width:760px){.scard{flex-basis:82%;height:420px}.lcard{flex-basis:72%}.xnav{display:none}.xhead h2{font-size:1.35rem}}
/* ---------- 'More in this section' at the end of articles ---------- */
.moresec{margin:34px 0 10px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.ms-card{display:flex;align-items:stretch;text-decoration:none;color:#000}
.ms-card img{width:42%;max-width:260px;object-fit:cover;border-radius:0}
.ms-txt{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:16px 20px}
.ms-txt small{color:var(--mut);font-weight:700;text-transform:uppercase;font-size:.72rem;letter-spacing:.05em}.ms-txt b{font-size:1.3rem}.ms-txt span{color:var(--d);font-weight:800}
.ms-card:hover .ms-txt span{text-decoration:underline}
.ms-list{margin:0;padding:10px 20px 14px 38px;border-top:1px solid var(--line)}
/* breadcrumbs more visible */
.crumbs a{font-weight:700}
.sc-count{position:static;align-self:flex-start;margin:0 0 10px}
@media(max-width:760px){.scard{height:460px}.sc-list li:nth-child(n+3){display:none}.scard h3{font-size:1.5rem}}
.ms-card img{border-radius:0!important}
/* v18: edge arrows, drag, compact cards with title at the top */
.xwrap{position:relative}
.xwrap .xbtn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:52px;height:52px;font-size:2rem;background:rgba(255,255,255,.92);box-shadow:0 6px 18px rgba(0,0,0,.22)}
.xwrap .xbtn.prev{left:-22px}.xwrap .xbtn.next{right:-22px}
.xwrap .xbtn:disabled{opacity:0;pointer-events:none}
.xtrack{cursor:grab;user-select:none}.xtrack.drag{cursor:grabbing;scroll-snap-type:none}.xtrack.drag .scard,.xtrack.drag .lcard{pointer-events:none}
.xtrack img{-webkit-user-drag:none}
.sc-body{justify-content:space-between;padding:18px}
.sc-top{display:flex;gap:12px;align-items:center}
.sc-top .sc-ico{position:static;flex:none;width:42px;height:42px;border-radius:12px;font-size:1.3rem}
.scard h3{font-size:1.35rem;margin:0;line-height:1.15;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.sc-top .sc-count{margin:4px 0 0;padding:2px 9px;font-size:.72rem}
.sc-shade{background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 48%,rgba(0,0,0,.82) 100%)}
.sc-blurb{font-size:.84rem;line-height:1.35;margin:0 0 6px}
.sc-list{margin:0 0 10px}.sc-list li{margin:2px 0;line-height:1.3}.sc-list a{font-size:.8rem}
.sc-btn{padding:7px 14px;font-size:.84rem}
@media(max-width:760px){.xwrap .xbtn{display:none}.scard{height:440px}}
.sc-list li{color:#fff;font-size:.8rem}
/* icon tiles: centre emoji glyphs exactly */
.ico,.sc-ico{line-height:1}
.sc-top .sc-ico{display:flex;align-items:center;justify-content:center;padding:0}
.sc-top{align-items:flex-start}