/* ============ Touch Heaven — daylight ============ */
:root {
  --sky:#DCE9F5; --sky-2:#EAF1F7; --paper:#F6F1E8; --paper-2:#EFE8DB; --ink:#0B1B2B; --blue:#085996; --orange:#F17910;
  --mute:#5A6977; --line:rgba(11,27,43,.14);
  --serif:'Zodiak', Georgia, serif; --sans:'Switzer', system-ui, sans-serif;
  --ease:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --pad:clamp(20px,4vw,60px);
}
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { margin:0; color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  background:linear-gradient(180deg, var(--sky) 0, var(--sky-2) 520px, var(--paper) 1100px) no-repeat, var(--paper); }
img, video { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; }
::selection { background:var(--orange); color:#fff; }
.wrap { max-width:1440px; margin:0 auto; padding:0 var(--pad); }
.sec { padding:clamp(90px,11vw,160px) 0; }
.serif { font-family:var(--serif); }
.eyebrow { font-family:var(--serif); font-style:italic; font-size:18px; color:var(--orange); }
.big { font-family:var(--serif); font-weight:300; letter-spacing:-.035em; line-height:.92; margin:0; }
.big b, .big strong { font-weight:700; color:var(--blue); }
.muted { color:var(--mute); }

/* ---- buttons: rectangular, sentence case ---- */
.btn { display:inline-flex; align-items:center; gap:14px; padding:16px 24px; border:1.5px solid var(--ink); font-size:15px; font-weight:500; cursor:pointer; background:none; transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.btn.fill { background:var(--ink); color:#fff; }
.btn.fill:hover { background:var(--orange); border-color:var(--orange); }
.btn:not(.fill):hover { background:var(--ink); color:#fff; }
.btn svg { transition:transform .45s var(--ease); } .btn:hover svg { transform:translateX(4px); }
.link { display:inline-flex; align-items:center; gap:10px; font-weight:500; border-bottom:1.5px solid currentColor; padding-bottom:3px; transition:color .3s, gap .4s var(--ease); }
.link:hover { color:var(--orange); gap:14px; }

/* ---- nav ---- */
.nav { position:sticky; top:0; z-index:50; transition:background .5s var(--ease), box-shadow .5s var(--ease); }
.nav .inner { max-width:1440px; margin:0 auto; padding:20px var(--pad); display:flex; align-items:center; justify-content:space-between; gap:20px; }
.nav .logo img { height:40px; width:auto; }
.nav ul { list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:clamp(18px,2.4vw,36px); }
.nav ul a { font-size:15px; color:var(--mute); position:relative; transition:color .3s; }
.nav ul a:hover, .nav ul a.active { color:var(--ink); }
.nav ul a.active::before { content:""; position:absolute; left:-12px; top:50%; width:5px; height:5px; margin-top:-2.5px; border-radius:50%; background:var(--orange); }
.nav ul a.contact { color:var(--orange); }
/* the frosted bar lives on a pseudo-element: backdrop-filter on .nav itself would become the containing
   block of the fixed mobile menu and leave menu items showing through the scrolled header */
.nav::before { content:""; position:absolute; inset:0; z-index:-1; background:rgba(246,241,232,.9); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--line); opacity:0; transition:opacity .5s var(--ease); pointer-events:none; }
.nav.solid::before { opacity:1; }
.nav-toggle { display:none; background:none; border:0; cursor:pointer; padding:4px; }
@media (max-width: 860px) {
  .nav-toggle { display:block; position:relative; z-index:3; }
  .nav ul { position:fixed; inset:0; flex-direction:column; justify-content:center; gap:26px; background:var(--paper); transform:translateY(-100%); transition:transform .7s var(--ease); }
  .nav ul.open { transform:none; }
  .nav ul a { font-family:var(--serif); font-size:34px; color:var(--ink); }
  .nav .logo img { height:34px; }
}

/* ---- reveal (clip up, not the default fade) ---- */
.rv { opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1.2s var(--ease); }
.rv.in { opacity:1; transform:none; }
.d1 { transition-delay:.08s; } .d2 { transition-delay:.16s; } .d3 { transition-delay:.24s; } .d4 { transition-delay:.32s; }
.line-mask { display:block; overflow:hidden; padding-bottom:.08em; }
.line-mask > span { display:block; transform:translateY(102%); transition:transform 1.25s var(--ease); }
.in .line-mask > span, .line-mask.in > span { transform:none; }

/* ---- orbit (the logo): two arcs + travelling star ---- */
.orbit { position:absolute; pointer-events:none; overflow:visible; }
.orbit .arc { fill:none; stroke-linecap:round; stroke-dasharray:0 100; transition:stroke-dasharray 2.4s var(--ease-io); }
.orbit .arc.b { stroke:var(--blue); } .orbit .arc.o { stroke:var(--orange); stroke-dashoffset:-50; transition-delay:.3s; }
.orbit.in .arc { stroke-dasharray:42 58; }
.orbit .star { fill:var(--orange); opacity:0; transition:opacity .8s ease 1.6s; } .orbit.in .star { opacity:1; }

/* ============ HOME HERO ============ */
.hero { position:relative; padding:clamp(30px,5vh,60px) 0 clamp(40px,6vh,80px); }
.hero .place { font-family:var(--serif); font-style:italic; color:var(--orange); font-size:19px; }
.hero h1 { font-size:clamp(84px,14.5vw,232px); margin-top:10px; }
.hero h1 .w { position:relative; display:inline-block; }
.hero h1 .w .orbit { left:-17%; top:-20%; width:134%; height:148%; }
.hero .row { display:grid; grid-template-columns:1fr 1.25fr; gap:5vw; align-items:end; margin-top:clamp(28px,4vh,56px); }
.hero .lede { font-size:clamp(18px,1.55vw,22px); line-height:1.5; max-width:34ch; margin:0; }
.hero .ctas { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.arc { position:relative; height:clamp(200px,17vw,260px); }
.arc > svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.arc .dotted { fill:none; stroke:var(--blue); stroke-width:1.4; stroke-dasharray:3 6; }
.pin { position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:8px; }
.pin .ph { width:clamp(64px,6vw,90px); aspect-ratio:1; border-radius:50%; overflow:hidden; border:3px solid #fff; box-shadow:0 18px 30px -14px rgba(11,27,43,.45); transition:transform .6s var(--ease); }
.pin .ph img { width:100%; height:100%; object-fit:cover; }
.pin:hover .ph { transform:scale(1.14); }
.pin span { font-size:13px; font-weight:500; }
@media (max-width: 900px) { .hero .row { grid-template-columns:1fr; } .arc { height:220px; margin-top:20px; } }

/* ============ LETTER (mission statement) ============ */
.letter { display:grid; grid-template-columns:2.2fr 1fr; gap:clamp(30px,6vw,110px); align-items:start; }
.letter .big { font-size:clamp(46px,6.2vw,104px); }
.letter .big em { font-style:italic; font-weight:300; color:var(--orange); }
.letter aside { padding-top:14px; border-top:1.5px solid var(--ink); font-size:17px; }
.letter aside p { margin:0 0 1em; color:#27333F; }
@media (max-width: 900px) { .letter { grid-template-columns:1fr; } }

/* ============ PATHWAYS — hover list ============ */
.paths-head { display:flex; justify-content:space-between; align-items:end; gap:30px; flex-wrap:wrap; margin-bottom:28px; }
.paths-head .big { font-size:clamp(40px,5vw,80px); }
.plist { border-top:1.5px solid var(--ink); position:relative; }
.prow { display:grid; grid-template-columns:90px 1fr 1.15fr; gap:30px; align-items:baseline; padding:26px 0; border-bottom:1px solid var(--line); cursor:default; }
.prow .n { font-family:var(--serif); font-style:italic; font-size:22px; color:var(--mute); }
.prow h3 { font-family:var(--serif); font-weight:400; font-size:clamp(40px,5vw,78px); letter-spacing:-.035em; line-height:1; margin:0; transition:color .35s, transform .6s var(--ease); }
.prow p { margin:0; color:#2c3844; max-width:48ch; }
.prow:hover h3 { color:var(--blue); transform:translateX(10px); }
.prow .thumb { display:none; }
.float-img { position:fixed; left:0; top:0; width:300px; aspect-ratio:4/3; pointer-events:none; z-index:40; opacity:0; transform:translate(-50%,-50%) scale(.85) rotate(-3deg); transition:opacity .35s ease, transform .5s var(--ease); box-shadow:0 30px 60px -30px rgba(11,27,43,.6); }
.float-img.on { opacity:1; transform:translate(-50%,-50%) scale(1) rotate(-3deg); }
.float-img img { width:100%; height:100%; object-fit:cover; }
.paths-note { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-top:34px; align-items:center; color:var(--mute); font-size:15.5px; }
.paths-note p { margin:0; max-width:70ch; }
@media (max-width: 860px) {
  .prow { grid-template-columns:1fr; gap:10px; }
  .prow .thumb { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; margin-top:8px; }
}

/* ============ FIELD — nations photo strip ============ */
.field { background:var(--ink); color:#fff; overflow:hidden; }
.field .top { display:grid; grid-template-columns:1.3fr 1fr; gap:5vw; align-items:end; }
.field .big { font-size:clamp(48px,6.4vw,110px); }
.field .big b { color:var(--orange); }
.field .top p { margin:0; color:rgba(255,255,255,.72); max-width:42ch; }
.strip { display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; margin-top:clamp(40px,5vw,70px); padding:0 var(--pad) 10px; scrollbar-width:none; cursor:grab; }
.strip::-webkit-scrollbar { display:none; }
.strip a { flex:0 0 auto; scroll-snap-align:start; width:clamp(260px,27vw,420px); }
.strip a:nth-child(even) { margin-top:60px; }
.strip .ph { overflow:hidden; aspect-ratio:4/5; }
.strip a:nth-child(3n) .ph { aspect-ratio:4/4.4; }
.strip img { width:100%; height:100%; object-fit:cover; transition:transform 1.3s var(--ease); }
.strip a:hover img { transform:scale(1.05); }
.strip .cap { display:flex; justify-content:space-between; align-items:baseline; padding-top:14px; border-top:1px solid rgba(255,255,255,.2); margin-top:14px; }
.strip .cap b { font-family:var(--serif); font-weight:400; font-size:30px; letter-spacing:-.02em; }
.strip .cap span { font-size:13px; color:rgba(255,255,255,.55); }
.strip .cap p { flex-basis:100%; }
.strip-foot { display:flex; justify-content:space-between; align-items:center; margin-top:30px; color:rgba(255,255,255,.6); font-size:14px; }
.field .link { color:#fff; }

/* ============ FOUNDERS ============ */
.founders { display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(34px,6vw,110px); align-items:center; }
.founders .ph { position:relative; }
.founders .ph img { width:100%; aspect-ratio:1; object-fit:cover; }
.founders .ph figcaption { font-family:var(--serif); font-style:italic; color:var(--mute); margin-top:10px; font-size:16px; }
.founders .big { font-size:clamp(44px,5.4vw,90px); margin-bottom:26px; }
.founders p { color:#27333F; margin:0 0 1em; }
.founders .quote { font-family:var(--serif); font-weight:300; font-size:clamp(24px,2.2vw,32px); line-height:1.25; letter-spacing:-.015em; color:var(--blue); border-left:2px solid var(--orange); padding-left:22px; margin:30px 0; }
@media (max-width: 900px) { .founders { grid-template-columns:1fr; } }

/* ============ TEACHINGS — feature + list ============ */
.tabs { display:flex; flex-wrap:wrap; gap:4px 26px; margin-bottom:26px; border-bottom:1px solid var(--line); }
.tabs button { background:none; border:0; padding:0 0 12px; cursor:pointer; font-size:16px; color:var(--mute); position:relative; }
.tabs button.on { color:var(--ink); }
.tabs button.on::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--orange); }
.watch { display:grid; grid-template-columns:1.45fr 1fr; gap:clamp(24px,3vw,48px); align-items:start; transition:opacity .25s; }
.watch.out { opacity:0; }
.feat { display:block; width:100%; padding:0; border:0; background:none; text-align:left; cursor:pointer; }
.feat .ph { position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--ink); }
.feat .ph img { width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.feat:hover .ph img { transform:scale(1.04); }
.feat h3 { font-family:var(--serif); font-weight:400; font-size:clamp(26px,2.4vw,36px); letter-spacing:-.02em; line-height:1.1; margin:18px 0 6px; }
.feat .meta { color:var(--mute); font-size:14px; }
.play { position:absolute; left:24px; bottom:24px; display:inline-flex; align-items:center; gap:10px; padding:12px 18px; background:#fff; color:var(--ink); font-size:14px; font-weight:500; transition:background .3s, color .3s; }
.feat:hover .play { background:var(--orange); color:#fff; }
.vlist { list-style:none; margin:0; padding:0; border-top:1.5px solid var(--ink); }
.vlist li button { display:grid; grid-template-columns:104px 1fr auto; gap:16px; align-items:center; width:100%; padding:14px 0; border:0; border-bottom:1px solid var(--line); background:none; text-align:left; cursor:pointer; }
.vlist img { width:104px; aspect-ratio:16/9; object-fit:cover; }
.vlist .t { font-family:var(--serif); font-size:18px; line-height:1.2; letter-spacing:-.01em; transition:color .3s; }
.vlist .d { font-size:13px; color:var(--mute); }
.vlist li button:hover .t { color:var(--blue); }
.vfoot { display:flex; gap:24px; margin-top:22px; flex-wrap:wrap; }
@media (max-width: 900px) { .watch { grid-template-columns:1fr; } }

/* ============ COURSE band ============ */
.course { position:relative; background:linear-gradient(180deg, var(--sky) 0%, var(--sky-2) 100%); overflow:hidden; }
.course .inner { display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,90px); align-items:center; }
.course .big { font-size:clamp(42px,5vw,84px); }
.course video, .course img.poster { width:100%; aspect-ratio:16/9; object-fit:cover; box-shadow:0 40px 80px -40px rgba(11,27,43,.5); }
.course p { color:#27333F; max-width:44ch; }
.course .orbit { right:-10%; top:-30%; width:70%; opacity:.5; }
@media (max-width: 900px) { .course .inner { grid-template-columns:1fr; } }

/* ============ CONTACT ============ */
.contact .inner { display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(34px,6vw,110px); align-items:start; }
.contact .big { font-size:clamp(50px,6vw,100px); }
.contact dl { margin:34px 0 0; display:grid; grid-template-columns:auto 1fr; gap:10px 24px; }
.contact dt { color:var(--mute); font-family:var(--serif); font-style:italic; }
.contact dd { margin:0; }
.contact dd a:hover { color:var(--orange); }
.form .row { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.field-i { margin-bottom:22px; }
.field-i label { display:block; font-size:14px; color:var(--mute); margin-bottom:4px; }
.field-i input, .field-i textarea { width:100%; border:0; border-bottom:1.5px solid rgba(11,27,43,.3); background:transparent; padding:10px 0; font:inherit; color:var(--ink); border-radius:0; transition:border-color .3s; }
.field-i input:focus, .field-i textarea:focus { outline:none; border-color:var(--blue); }
.field-i textarea { min-height:110px; resize:vertical; }
.form .note { margin:12px 0 0; font-size:14px; min-height:1.4em; }
@media (max-width: 900px) { .contact .inner { grid-template-columns:1fr; } }
@media (max-width: 480px) { .form .row { grid-template-columns:1fr; gap:0; } }

/* ============ FOOTER ============ */
.footer { background:var(--ink); color:rgba(255,255,255,.7); padding:70px 0 30px; overflow:hidden; }
.footer .top { display:flex; flex-wrap:wrap; justify-content:space-between; gap:30px; }
.footer .logo img { height:46px; }
.footer ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:12px 30px; }
.footer a:hover { color:#fff; }
.footer .social { display:flex; gap:18px; }
.footer .word { font-family:var(--serif); font-weight:300; font-size:clamp(60px,12.5vw,210px); letter-spacing:-.05em; line-height:.8; color:rgba(255,255,255,.08); margin:60px 0 0; white-space:nowrap; }
.footer .base { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:26px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); font-size:13px; color:rgba(255,255,255,.45); }

/* ============ INNER PAGES ============ */
.phead { padding:clamp(40px,7vh,90px) 0 clamp(40px,6vw,80px); position:relative; }
.phead .big { font-size:clamp(66px,10.5vw,176px); }
.phead .big .w { position:relative; display:inline-block; }
.phead .big .w .orbit { left:-12%; top:-18%; width:124%; height:140%; }
.phead .lede { font-size:clamp(18px,1.5vw,21px); max-width:44ch; margin:26px 0 0; }
.phead .cols { display:grid; grid-template-columns:1.2fr 1fr; gap:5vw; align-items:end; }
@media (max-width: 900px) { .phead .cols { grid-template-columns:1fr; } }

/* about */
.story { display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(34px,6vw,110px); align-items:start; }
.story .stick { position:sticky; top:110px; }
.story .stick img { width:100%; }
.story .stick figcaption { font-family:var(--serif); font-style:italic; color:var(--mute); margin-top:10px; }
.chapter { padding-bottom:50px; margin-bottom:50px; border-bottom:1px solid var(--line); }
.chapter:last-child { border-bottom:0; }
.chapter .n { font-family:var(--serif); font-style:italic; color:var(--orange); font-size:18px; }
.chapter h2 { font-family:var(--serif); font-weight:400; font-size:clamp(34px,3.6vw,54px); letter-spacing:-.03em; line-height:1.05; margin:6px 0 18px; }
.chapter p { color:#27333F; margin:0 0 1em; font-size:18px; }
.years { display:grid; grid-template-columns:repeat(4,1fr); border-top:1.5px solid var(--ink); }
.years div { padding:22px 18px 0 0; }
.years strong { display:block; font-family:var(--serif); font-weight:300; font-size:clamp(44px,5vw,80px); letter-spacing:-.04em; line-height:1; color:var(--blue); }
.years span { display:block; margin-top:8px; color:var(--mute); font-size:15px; }
@media (max-width: 860px) { .story { grid-template-columns:1fr; } .story .stick { position:static; } .years { grid-template-columns:1fr 1fr; gap:24px 0; } }
.duo { display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(30px,5vw,90px); align-items:center; }
.duo img { width:100%; }
@media (max-width: 860px) { .duo { grid-template-columns:1fr; } }

/* nations */
.nav-nations { display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:26px; }
.nav-nations a { font-family:var(--serif); font-size:22px; border-bottom:1.5px solid transparent; transition:border-color .3s, color .3s; }
.nav-nations a:hover { color:var(--blue); border-color:var(--blue); }
.nation { padding:clamp(60px,8vw,110px) 0; border-top:1px solid var(--line); }
.nation .ntop { display:grid; grid-template-columns:1fr 1fr; gap:5vw; align-items:end; margin-bottom:36px; }
.nation .ntop .big { font-size:clamp(60px,8.5vw,140px); }
.nation .region { font-family:var(--serif); font-style:italic; color:var(--orange); font-size:19px; }
.nation h3 { font-family:var(--serif); font-weight:400; font-size:clamp(22px,2vw,28px); margin:0 0 12px; letter-spacing:-.01em; color:var(--blue); }
.nation p { margin:0; color:#27333F; }
.gallery { columns:4 230px; column-gap:12px; }
.gallery button { display:block; width:100%; margin:0 0 12px; padding:0; border:0; cursor:zoom-in; background:var(--paper-2); break-inside:avoid; overflow:hidden; }
.gallery img { width:100%; height:auto; transition:transform 1.2s var(--ease); }
.gallery button:hover img { transform:scale(1.04); }
.gallery .more { display:none; } .gallery.open .more { display:block; }
.nation .foot { display:flex; flex-wrap:wrap; gap:26px; align-items:center; margin-top:18px; }
.mission-film { display:grid; grid-template-columns:260px 1fr; gap:22px; align-items:center; margin-top:34px; max-width:720px; }
.mission-film button { padding:0; border:0; cursor:pointer; position:relative; background:var(--ink); }
.mission-film img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.mission-film .play { left:10px; bottom:10px; padding:8px 12px; font-size:13px; }
.mission-film b { font-family:var(--serif); font-weight:400; font-size:24px; display:block; }
@media (max-width: 860px) { .nation .ntop { grid-template-columns:1fr; } .mission-film { grid-template-columns:1fr; } }

/* ---- modal / lightbox ---- */
.modal { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:clamp(14px,4vw,48px); background:rgba(8,16,26,.9); animation:fade .3s ease; }
@keyframes fade { from { opacity:0; } }
.modal .box { width:100%; max-width:1000px; }
.modal .bar { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:12px; color:#fff; }
.modal .bar h6 { margin:0; font-family:var(--serif); font-weight:400; font-size:20px; }
.modal .close { width:44px; height:44px; border:1px solid rgba(255,255,255,.4); background:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.modal .frame { aspect-ratio:16/9; background:#000; }
.modal .frame iframe { width:100%; height:100%; border:0; }
.modal .yt { display:block; text-align:right; margin-top:10px; font-size:13px; color:rgba(255,255,255,.7); }
.modal.lb .box { max-width:min(1200px,92vw); display:flex; flex-direction:column; align-items:center; }
.modal.lb img { max-height:80vh; width:auto; }
.modal.lb .nav-btn { position:fixed; top:50%; transform:translateY(-50%); width:52px; height:52px; border:1px solid rgba(255,255,255,.4); background:rgba(8,16,26,.5); color:#fff; font-size:22px; cursor:pointer; }
.modal.lb .prev { left:18px; } .modal.lb .next { right:18px; }
html:has(body.locked) { overflow:hidden; } /* lock on html: overflow on body would break the sticky nav */

@media (prefers-reduced-motion: reduce) {
  .rv, .line-mask > span { opacity:1 !important; transform:none !important; transition:none !important; }
  .orbit .arc { stroke-dasharray:42 58 !important; transition:none; } .orbit .star { opacity:1; }
}

/* fixes */
.footer .logo img { width:auto; }
.footer .word { font-size:clamp(52px,10.4vw,176px); }
.course .orbit { right:-8%; top:-18%; width:56%; height:136%; opacity:.45; }
@media (max-width: 900px) { .course .orbit { display:none; } }
@media (max-width: 900px) { .field .top { grid-template-columns:1fr; gap:22px; } }
@media (max-width: 600px) {
  .hero h1 { font-size:17vw; } .phead .big { font-size:15.5vw; }
  .pin .ph { width:52px; } .pin span { font-size:12.5px; } .arc { height:180px; }
  .letter .big { font-size:11vw; } .prow h3 { font-size:12vw; }
}

/* ============ motion layer (motion.js) ============ */
/* masks must not cut descenders (g, y, p): pad the box, pull the next line back up */
.line-mask { padding-bottom:.22em; margin-bottom:-.22em; }
html.lenis, html.lenis body { height:auto; } html.lenis { scroll-behavior:auto; }
.lenis.lenis-stopped { overflow:hidden; }
.wd { display:inline-block; will-change:opacity; }
.plist .rail { position:absolute; left:-22px; top:0; bottom:0; width:2px; background:var(--orange); transform-origin:top; }
@media (max-width: 700px) { .plist .rail { left:-12px; } }
.strip.pinned { overflow:visible; scroll-snap-type:none; cursor:default; width:max-content; }
.strip.pinned .ph { overflow:hidden; }
.field { will-change:auto; }
.field:has(.strip.pinned) { padding-top:clamp(70px,9vh,110px); padding-bottom:clamp(40px,6vh,70px); }
.strip.pinned a { width:auto; }
.strip.pinned a:nth-child(even) { margin-top:5vh; }
.strip.pinned .ph, .strip.pinned a:nth-child(3n) .ph { height:48vh; aspect-ratio:4/5; width:auto; }
.strip.pinned a:nth-child(3n) .ph { aspect-ratio:1/1; }
.field:has(.strip.pinned) .top .big { font-size:clamp(44px,5.2vw,88px); }

/* ============ the ORIGINAL logo mark — background orbit (assets/js/orbit.js) ============ */
/* rebuilt from the logo's own geometry; sits on the right, behind the content, orbiting continuously */
.hero, .phead { overflow-x:clip; }
.hero > .wrap, .phead > .wrap { position:relative; z-index:1; }
.orbit-bg { position:absolute; z-index:0; pointer-events:none; right:-5vw; top:max(96px,8.2vw); width:42vw; aspect-ratio:483/318; opacity:.9; }
.orbit-bg svg { display:block; width:100%; height:100%; overflow:visible; animation:orbit-float 11s ease-in-out infinite alternate; }
@keyframes orbit-float { from { transform:translate3d(0,-2.5%,0) rotate(-1.5deg); } to { transform:translate3d(0,2.5%,0) rotate(1.5deg); } }
/* page heads: the lede drops under the title so the right side belongs to the orbit */
.phead .cols { grid-template-columns:minmax(0,56%); }
.phead .orbit-bg { right:1vw; top:54%; translate:0 -50%; width:38vw; }
@media (max-width: 900px) {
  /* phones: no free column — the orbit gets its own band above the title, bleeding off the right edge */
  .orbit-bg, .phead .orbit-bg { position:relative; top:auto; right:auto; translate:none; width:72vw; margin:0 -9vw 2vw auto; }
  .phead .cols { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) { .orbit-bg svg { animation:none; } }
.mark-deco { position:absolute; right:-6%; top:50%; width:min(760px,56vw); transform:translateY(-50%); opacity:.14; pointer-events:none; max-width:none; }
@media (max-width: 900px) { .mark-deco { display:none; } }
.line-mask.open { overflow:visible; }

/* ============ CURSOR — Word Bubble (assets/js/cursor.js) ============ */
html { --cb-dot:var(--orange); --cb-ring:var(--ink); --cb-fill:rgba(11,27,43,.06); --cb-bg:var(--ink); --cb-fg:#fff; --cb-edge:rgba(255,255,255,.95); --cb-shadow:rgba(11,27,43,.3); }
html[data-csurf="dark"]  { --cb-dot:var(--orange); --cb-ring:#fff; --cb-fill:rgba(255,255,255,.1); --cb-bg:#fff; --cb-fg:var(--ink); --cb-edge:rgba(11,27,43,.6); --cb-shadow:rgba(0,0,0,.45); }
html[data-csurf="media"] { --cb-dot:var(--orange); --cb-ring:#fff; --cb-fill:rgba(11,27,43,.25); --cb-bg:var(--orange); --cb-fg:#fff; --cb-edge:rgba(255,255,255,.95); --cb-shadow:rgba(0,0,0,.5); }
.has-cursor body, .has-cursor a, .has-cursor button, .has-cursor [role="tab"], .has-cursor label, .has-cursor .strip { cursor:none; }
.has-cursor input, .has-cursor textarea { cursor:text; }
.th-cursor { position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:0; transition:opacity .35s ease; }
.th-cursor.on { opacity:1; }
.c-text .th-cursor { opacity:0 !important; }
.th-cursor .cb { position:fixed; left:0; top:0; display:flex; align-items:center; justify-content:center; overflow:hidden; width:11px; height:11px; border-radius:50%;
  background:var(--cb-dot); border:0 solid transparent; box-shadow:0 0 0 2px var(--cb-edge), 0 4px 12px -2px var(--cb-shadow); will-change:transform;
  transition:width .5s var(--ease), height .5s var(--ease), background .3s, border-color .3s, box-shadow .3s; }
.th-cursor .cb span { font-family:var(--sans); font-size:12px; font-weight:500; color:var(--cb-fg); white-space:nowrap; opacity:0; transform:scale(.6); transition:opacity .25s, transform .4s var(--ease), color .3s; }
.c-hover .th-cursor .cb { width:44px; height:44px; background:var(--cb-fill); border:2px solid var(--cb-ring); box-shadow:0 0 0 1.5px var(--cb-edge), 0 8px 20px -8px var(--cb-shadow); }
.c-hover.c-label .th-cursor .cb { width:86px; height:86px; background:var(--cb-bg); border:1.5px solid var(--cb-edge); box-shadow:0 0 0 1px var(--cb-shadow), 0 18px 40px -14px var(--cb-shadow); }
.c-hover.c-label .th-cursor .cb span { opacity:1; transform:none; transition-delay:.08s; }
.c-down .th-cursor .cb { width:8px; height:8px; } .c-down.c-hover .th-cursor .cb { width:36px; height:36px; } .c-down.c-label .th-cursor .cb { width:74px; height:74px; }
.phead { padding-bottom:clamp(70px,9vw,120px); }

/* motion transforms (pathway slides, image curtains) must never widen the page on phones */
html, body { overflow-x:clip; }

/* About: soft rounded photos instead of hard square edges (the curtain reveal keeps the radius — motion.js) */
[data-page="about"] { --photo-r:clamp(18px,1.9vw,30px); }
[data-page="about"] .story .stick img, [data-page="about"] .duo > img { border-radius:var(--photo-r); }

/* ============ TEACHINGS — library: each series is a chapter (site.js initLibrary) ============ */
.library { --photo-r:clamp(14px,1.4vw,22px); }
.series { padding-block:clamp(30px,5vw,70px) clamp(50px,7vw,110px); border-top:1px solid var(--line); }
.series:first-child { border-top:0; padding-top:0; }
.series-head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:30px 6vw; align-items:end; margin-bottom:clamp(34px,4vw,60px); }
.series-head .big { font-size:clamp(50px,7.4vw,124px); margin-top:8px; }
.series-meta { text-align:right; padding-bottom:1.2em; }
.series-meta p { margin:0 0 16px; color:var(--mute); line-height:1.5; }
.series-meta b { font-family:var(--serif); font-weight:700; font-size:30px; color:var(--blue); margin-right:4px; }
.eps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(34px,3.6vw,56px) clamp(20px,2.2vw,34px); }
.eps.clamped:not(.open) li:nth-child(n+7) { display:none; }
.ep { display:block; width:100%; padding:0; border:0; background:none; text-align:left; cursor:pointer; color:inherit; font:inherit; }
.ep .ph { position:relative; display:block; aspect-ratio:16/9; overflow:hidden; border-radius:var(--photo-r); background:var(--ink); isolation:isolate; }
.ep .ph img { width:100%; height:100%; object-fit:cover; transition:scale 1.1s var(--ease), filter .6s; } /* GSAP owns transform (drift); hover uses the scale property */
.ep .pl { position:absolute; left:50%; top:50%; width:58px; height:58px; margin:-29px 0 0 -29px; border-radius:50%; display:grid; place-items:center; background:var(--orange); color:#fff;
  transform:scale(.4); opacity:0; transition:transform .6s var(--ease), opacity .35s; }
.ep .pl svg { width:16px; height:16px; margin-left:3px; }
.ep .tag { position:absolute; left:14px; top:14px; padding:6px 12px; border-radius:99px; background:var(--paper); color:var(--ink); font-size:12.5px; font-weight:500; }
.ep .t { display:block; margin-top:18px; font-family:var(--serif); font-size:clamp(19px,1.45vw,23px); line-height:1.25; text-wrap:pretty; transition:color .3s; }
.ep .m { display:block; margin-top:8px; font-size:14px; color:var(--mute); font-variant-numeric:tabular-nums; }
.ep:hover .ph img, .ep:focus-visible .ph img { scale:1.06; filter:brightness(.82); }
.ep:hover .pl, .ep:focus-visible .pl { transform:none; opacity:1; }
.ep:hover .t { color:var(--blue); }
.has-cursor .ep .pl { display:none; } /* the Word Bubble cursor already says "Play" */
.series > .more { margin-top:clamp(40px,4.5vw,64px); }
.lib-foot { margin:10px 0 0; color:var(--mute); }
@media (max-width: 1000px) { .eps { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 640px) {
  .eps { grid-template-columns:1fr; }
  .eps.clamped:not(.open) li:nth-child(n+5) { display:none; }
  .series-head { grid-template-columns:1fr; } .series-meta { text-align:left; padding-bottom:0; }
}

/* ============ NATIONS — atlas (assets/js/atlas.js) ============ */
.atlas-sec { padding-block:0 clamp(70px,9vw,130px); }
.atlas-view { position:relative; }
.atlas { position:relative; width:100%; aspect-ratio:360/138; }
.atlas canvas { position:absolute; inset:0; width:100%; height:100%; }
.atlas .routes { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
/* no vector-effect:non-scaling-stroke here — it breaks pathLength dashes (routes stop short); width is set per breakpoint instead */
.atlas { --route:1.1; --route-hot:1.9; }
.atlas .routes path { fill:none; stroke:var(--blue); stroke-width:var(--route); stroke-dasharray:100; stroke-dashoffset:100; opacity:.55;
  transition:stroke-dashoffset 1.8s var(--ease-io), stroke .3s, opacity .3s, stroke-width .3s; }
.atlas.in .routes path { stroke-dashoffset:0; }
.atlas .routes path.hot { stroke:var(--orange); opacity:1; stroke-width:var(--route-hot); }
/* pins */
.npin, .home-pin { position:absolute; left:var(--x); top:var(--y); width:44px; height:44px; margin:-22px 0 0 -22px; padding:0; border:0; background:none; z-index:2; }
.npin { cursor:pointer; }
.npin i, .home-pin i { position:absolute; left:14px; top:14px; width:16px; height:16px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 4px rgba(246,241,232,.9), 0 6px 14px -4px rgba(11,27,43,.5); transition:transform .5s var(--ease); }
.npin i::after { content:""; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid var(--orange); animation:pin-pulse 2.6s var(--ease) infinite; }
.home-pin i { background:var(--blue); }
.home-pin i::after { content:""; position:absolute; inset:5px; border-radius:50%; background:#fff; }
@keyframes pin-pulse { 0% { transform:scale(.6); opacity:.9; } 100% { transform:scale(2.6); opacity:0; } }
.npin span, .home-pin span { position:absolute; top:8px; display:flex; flex-direction:column; white-space:nowrap; text-align:left; pointer-events:none; }
.npin.r span, .home-pin span { left:40px; } .npin.l span { right:40px; text-align:right; align-items:flex-end; }
.npin span, .home-pin span { text-shadow:0 0 3px var(--paper), 0 0 6px var(--paper), 0 0 10px var(--paper), 0 0 14px var(--paper); }
.npin b, .home-pin b { font-family:var(--serif); font-weight:400; font-size:clamp(17px,1.5vw,22px); color:var(--ink); line-height:1.1; transition:color .3s; }
.npin small, .home-pin small { font-size:12px; color:var(--mute); margin-top:3px; }
.home-pin b { color:var(--blue); }
.npin:hover i, .npin.hot i, .npin.on i, .npin:focus-visible i { transform:scale(1.35); }
.npin:hover b, .npin.hot b, .npin.on b { color:var(--orange); }
.atlas .npin, .atlas .home-pin { opacity:0; transition:opacity .8s var(--ease); }
.atlas.in .npin, .atlas.in .home-pin { opacity:1; transition-delay:1.1s; }
/* list under the map */
.atlas-list { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); border-top:1px solid var(--line); margin-top:clamp(20px,3vw,40px); }
.atlas-list button { display:flex; flex-direction:column; gap:4px; padding:20px 16px 22px 0; border:0; background:none; text-align:left; cursor:pointer; font-family:var(--serif); font-size:clamp(20px,1.7vw,26px); color:var(--ink); position:relative; transition:color .3s; }
.atlas-list button::before { content:""; position:absolute; left:0; right:16px; top:-1px; height:2px; background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease); }
.atlas-list button:hover, .atlas-list button.on { color:var(--blue); }
.atlas-list button:hover::before, .atlas-list button.on::before { transform:none; }
.atlas-list .i { font-family:var(--sans); font-size:12px; color:var(--orange); }
.atlas-list small { font-family:var(--sans); font-size:13px; color:var(--mute); }
/* drawer */
.drawer { position:fixed; inset:0; z-index:90; pointer-events:none; }
.drawer-scrim { position:absolute; inset:0; background:rgba(11,27,43,.35); opacity:0; transition:opacity .6s var(--ease); }
.drawer-panel { position:absolute; top:0; right:0; bottom:0; width:min(640px,50vw); background:var(--paper); overflow-y:auto; overscroll-behavior:contain;
  padding:0 clamp(24px,3vw,48px) 60px; transform:translateX(104%); transition:transform .8s var(--ease); box-shadow:-30px 0 60px -30px rgba(11,27,43,.35); }
.drawer.open { pointer-events:auto; }
.drawer.open .drawer-scrim { opacity:1; }
.drawer.open .drawer-panel { transform:none; }
.drawer-bar { position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:center; padding:18px 0; background:var(--paper); border-bottom:1px solid var(--line); }
.drawer-bar .count { font-size:13px; color:var(--mute); font-variant-numeric:tabular-nums; }
.drawer-bar .ctrl { display:flex; gap:8px; }
.drawer-bar button { width:44px; height:44px; display:grid; place-items:center; border:1.5px solid var(--line); border-radius:50%; background:none; color:var(--ink); cursor:pointer; transition:background .3s, color .3s, border-color .3s; }
.drawer-bar button:hover { background:var(--ink); border-color:var(--ink); color:#fff; }
.ncard { padding-top:clamp(26px,3vw,40px); --photo-r:clamp(12px,1.2vw,18px); }
.ncard > * { opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .9s var(--ease); }
.ncard.show > * { opacity:1; transform:none; }
.ncard.show > :nth-child(2) { transition-delay:.06s; } .ncard.show > :nth-child(3) { transition-delay:.12s; } .ncard.show > :nth-child(4) { transition-delay:.18s; } .ncard.show > :nth-child(n+5) { transition-delay:.26s; }
.ncard .region { font-family:var(--serif); font-style:italic; color:var(--orange); font-size:19px; }
.ncard h2 { font-family:var(--serif); font-weight:400; font-size:clamp(54px,6vw,96px); line-height:.95; letter-spacing:-.02em; margin:6px 0 22px; }
.ncard h3 { font-family:var(--serif); font-weight:400; font-size:clamp(22px,1.9vw,27px); color:var(--blue); margin:0 0 12px; line-height:1.25; }
.ncard p { margin:0; color:#27333F; }
.ncard .mission-film { grid-template-columns:200px 1fr; margin-top:28px; }
.ncard .mission-film button, .ncard .mission-film img { border-radius:var(--photo-r); overflow:hidden; }
.ngal.gallery { columns:auto; display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:30px; }
.ngal.gallery button { margin:0; border-radius:var(--photo-r); aspect-ratio:4/5; }
.ngal.gallery button:first-child { grid-column:1 / -1; aspect-ratio:16/10; }
.ngal.gallery img { height:100%; object-fit:cover; }
@media (max-width: 900px) {
  /* phones: crop to the band that holds every nation (lon -100…100) and let the list lead */
  .atlas-view { overflow:hidden; }
  .atlas { width:163.6%; margin-left:-31.8%; --route:1.9; --route-hot:3; }  /* lon -110…110 */
  .npin.mb span { left:50%; right:auto; top:36px; transform:translateX(-50%); align-items:center; text-align:center; }
  .npin small, .home-pin small { display:none; }
  .npin b, .home-pin b { font-size:14px; }
  .npin i, .home-pin i { left:16px; top:16px; width:12px; height:12px; box-shadow:0 0 0 3px rgba(246,241,232,.9); }
  .npin span, .home-pin span { top:13px; } .npin.r span, .home-pin span { left:34px; } .npin.l span { right:34px; }
  .atlas-list { grid-template-columns:1fr 1fr; }
  .drawer-panel { width:100%; }
  .ncard .mission-film { grid-template-columns:140px 1fr; gap:16px; } .ncard .mission-film b { font-size:19px; }
}
@media (prefers-reduced-motion: reduce) { .npin i::after { animation:none; } }

/* ============ HOME — nations as postcards from the field ============ */
.postcards { overflow-x:clip; }
.pc-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:5vw; align-items:end; }
.pc-head .big { font-size:clamp(52px,7vw,118px); }
.pc-head p { margin:0; color:var(--mute); max-width:42ch; }
.pc-table { position:relative; height:clamp(480px,39vw,600px); margin-top:clamp(10px,2vw,30px); }
.pc { position:absolute; left:var(--x); top:var(--y); width:clamp(200px,19vw,290px); padding:10px 10px 16px; background:#fff; border-radius:14px; color:var(--ink);
  box-shadow:0 30px 50px -30px rgba(11,27,43,.45), 0 2px 6px rgba(11,27,43,.08);
  transform:translate(-50%,-50%) rotate(var(--r)); translate:0 var(--py,0px); transition:transform .9s var(--ease), box-shadow .5s, opacity .9s; } /* parallax rides `translate` (untransitioned) */
.pc .ph { display:block; aspect-ratio:4/5; border-radius:8px; overflow:hidden; background:var(--paper-2); }
.pc .ph img { width:100%; height:100%; object-fit:cover; }
.pc .cap { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-top:12px; padding:0 4px; }
.pc .cap b { font-family:var(--serif); font-weight:400; font-size:clamp(20px,1.7vw,25px); }
.pc .cap small { font-size:12px; color:var(--mute); white-space:nowrap; }
.pc .stamp { position:absolute; right:-26px; top:-26px; width:104px; height:104px; color:var(--orange); mix-blend-mode:multiply; transform:rotate(var(--sr)); opacity:.92; pointer-events:none; font-family:var(--sans); }
.pc-table:not(.in) .pc { transform:translate(-50%,40%) rotate(0deg) scale(.9); opacity:0; }
.pc-table.in .pc { transition-delay:calc(var(--i) * .09s); }
.pc:hover, .pc:focus-visible { transform:translate(-50%,-54%) rotate(0deg) scale(1.06); z-index:10 !important; box-shadow:0 50px 70px -35px rgba(11,27,43,.55); transition-delay:0s !important; }
.pc-foot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; margin-top:clamp(20px,3vw,40px); padding-top:22px; border-top:1px solid var(--line); color:var(--mute); }
@media (max-width: 860px) {
  .pc-head { grid-template-columns:1fr; gap:18px; }
  .pc-table { height:auto; display:flex; gap:18px; overflow-x:auto; padding:34px 6vw 44px; margin-inline:calc(var(--pad) * -1); scroll-snap-type:x mandatory; scrollbar-width:none; }
  .pc-table::-webkit-scrollbar { display:none; }
  .pc { position:relative; left:auto; top:auto; flex:0 0 72%; transform:rotate(calc(var(--r) * .6)); scroll-snap-align:center; }
  .pc-table:not(.in) .pc { transform:rotate(calc(var(--r) * .6)); opacity:1; }
  .pc:hover { transform:rotate(0deg); }
  .pc .stamp { right:-8px; top:-20px; width:84px; height:84px; }
}
@media (prefers-reduced-motion: reduce) { .pc-table:not(.in) .pc { transform:translate(-50%,-50%) rotate(var(--r)); opacity:1; } }
.form .hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; } /* honeypot */

/* ============ COURSES — Deep Calls 2 Deep University (tools/build.py COURSES) ============ */
.course-row { margin-top:clamp(50px,6vw,90px); position:relative; z-index:1; }
.course-row-head { display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap; padding-bottom:18px; margin-bottom:26px; border-bottom:1px solid rgba(11,27,43,.14); }
.course-row-head span { font-family:var(--serif); font-style:italic; color:var(--orange); font-size:19px; }
.ccards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(22px,2.4vw,36px); }
.ccard { display:flex; flex-direction:column; color:var(--ink); --photo-r:clamp(14px,1.4vw,20px); }
.ccard .ph { display:block; aspect-ratio:16/9; border-radius:var(--photo-r); overflow:hidden; background:var(--paper-2); box-shadow:0 26px 44px -30px rgba(11,27,43,.5); }
.ccard .ph img { width:100%; height:100%; object-fit:cover; transition:scale 1s var(--ease); }
.ccard .meta { display:flex; flex-direction:column; gap:6px; padding-top:18px; font-family:var(--sans); line-height:1.55; }
.ccard .topic { font-size:12.5px; letter-spacing:.02em; color:var(--orange); font-weight:500; }
.ccard .t { font-family:var(--serif); font-weight:400; font-size:clamp(21px,1.7vw,26px); line-height:1.2; color:var(--ink); transition:color .3s; }
.ccard .by { font-size:14px; color:var(--mute); }
.ccard .blurb { display:none; font-size:15px; color:#27333F; margin-top:4px; }
.ccard .go { margin-top:10px; font-size:14px; font-weight:500; color:var(--blue); }
.ccard:hover .ph img { scale:1.05; } .ccard:hover .t { color:var(--blue); }
/* the full catalogue on /courses: two big cards per row, blurbs shown, the first one wide */
.ccards.big { grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(40px,4vw,64px) clamp(26px,3vw,48px); }
.ccards.big .blurb { display:block; max-width:52ch; }
.ccards.big .ccard .t { font-size:clamp(23px,1.9vw,30px); }
.ccards.big .ccard:first-child { grid-column:1 / -1; display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(26px,4vw,64px); align-items:center; }
.ccards.big .ccard:first-child .meta { padding-top:0; }
.ccards.big .ccard:first-child .t { font-size:clamp(34px,3.6vw,58px); line-height:1.05; }
.ccards.big .ccard .go { display:inline-flex; align-self:flex-start; margin-top:16px; padding:14px 20px; border:1.5px solid var(--ink); color:var(--ink); transition:background .3s, color .3s; }
.ccards.big .ccard:hover .go { background:var(--ink); color:#fff; }
.how { background:linear-gradient(180deg, var(--sky-2), var(--paper)); }
.how-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(26px,4vw,64px); border-top:1px solid var(--line); padding-top:34px; }
.how-grid .n { font-size:13px; color:var(--orange); }
.how-grid h3 { font-family:var(--serif); font-weight:400; font-size:clamp(24px,2vw,30px); margin:10px 0 10px; }
.how-grid p { margin:0; color:#27333F; }
@media (max-width: 900px) {
  .ccards { grid-template-columns:1fr 1fr; }
  .ccards.big { grid-template-columns:1fr; } .ccards.big .ccard:first-child { grid-template-columns:1fr; }
  .how-grid { grid-template-columns:1fr; }
}
@media (max-width: 600px) { .ccards { grid-template-columns:1fr; } }

/* ============ MOBILE polish (touch) ============ */
html { overflow-x:hidden; } @supports (overflow:clip) { html { overflow-x:clip; } }   /* older iOS has no overflow:clip */
@media (hover: none), (pointer: coarse) {
  /* text links keep their look but get a finger-sized touch area */
  .link, .footer ul a, .footer .social a, .contact dd a, .nav-nations a { position:relative; }
  .link::after, .footer ul a::after, .footer .social a::after, .contact dd a::after { content:""; position:absolute; inset:-10px -6px; }
  .footer ul { row-gap:18px; }
  /* map pins: neighbours (India/Pakistan, Kenya/Burundi) overlap at phone size — atlas.js opens the pin nearest the tap */
  .atlas .npin { pointer-events:none; }
}
/* menu button: the two lines turn into an X while the phone menu is open */
.nav-toggle path { transform-box:fill-box; transform-origin:center; transition:transform .5s var(--ease); }
.nav-toggle[aria-expanded="true"] .l1 { transform:translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .l2 { transform:translateY(-4px) rotate(-45deg); }