:root{
  /* the descent — five steps of light, three thin seams, two of depth */
  --l1:#F4F1EA; --l2:#EEE9E2; --l3:#E7E2DA; --l4:#DFDBD3; --l5:#D6D2CB;
  --seam1:#BDB9B3; --seam2:#8E8C8B; --seam3:#5B6068;
  --d1:#39414A; --d2:#252C33;

  --ink:#0F172A;
  --ink-soft:#334155;
  --muted:#475569;
  --accent:#6B5877;
  --accent-pale:#B8A6C4;
  --marker:#B45309;
  --title:#0F2744;
  --rule:rgba(35,32,31,.16);

  --d-ink:#EAE6E0;
  --d-soft:#C6C0BD;
  --d-muted:#9E9896;
  --d-rule:rgba(234,230,224,.17);

  --portrait:url(/assets/hossain.jpg);
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Karla","Helvetica Neue",Arial,sans-serif;
  --fa:"Vazirmatn","Karla",Tahoma,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light}
body{
  margin:0;background:var(--l1);color:var(--ink);
  font-family:var(--serif);font-size:18.5px;line-height:1.72;font-weight:380;
  -webkit-font-smoothing:antialiased;
}
p{margin:0 0 1.1em}
a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(107,88,119,.3)}
a:hover{border-bottom-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button,a{-webkit-tap-highlight-color:rgba(107,88,119,.14)}
.q{font-style:italic}

/* ---------- masthead ---------- */
.masthead{background:var(--l1);border-bottom:1px solid var(--rule)}
.mast-in{max-width:1080px;margin:0 auto;padding:24px 30px;display:flex;flex-wrap:wrap;gap:16px 30px;align-items:baseline}
a.wordmark{color:var(--ink);text-decoration:none;border-bottom:0;font-family:var(--serif);font-size:21px;font-weight:400}
.wordmark .amp{color:var(--accent);font-style:italic;padding:0 .12em}
.wordmark .becoming{font-style:italic}
nav{margin-left:auto;display:flex;gap:28px;align-items:baseline}
nav a{text-decoration:none;display:inline-block;text-decoration:none;border-bottom:1px solid transparent;display:inline-block;
  font-family:var(--sans);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:500;
  background:none;border:0;padding:0 0 4px;cursor:pointer;color:var(--muted);border-bottom:1px solid transparent;
}
nav a:hover{color:var(--ink)}
nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}

/* ---------- the strata ---------- */
.band{background:var(--l1)}
.b1{background:linear-gradient(to bottom,#F4F1EA 0px,#F4F1EA calc(100% - 80px),#F4F0E9 calc(100% - 60px),#F2EFE8 calc(100% - 40px),#F1EEE7 calc(100% - 20px),#F1EDE6 100%)}
.b2{background:linear-gradient(to bottom,#F1EDE6 0px,#F1ECE5 20px,#F0EBE4 40px,#EEEAE3 60px,#EEE9E2 80px,#EEE9E2 calc(100% - 80px),#EDE8E1 calc(100% - 60px),#ECE7E0 calc(100% - 40px),#EBE6DF calc(100% - 20px),#EAE6DE 100%)}
.b3{background:linear-gradient(to bottom,#EAE6DE 0px,#EAE5DD 20px,#E9E4DC 40px,#E8E3DB 60px,#E7E2DA 80px,#E7E2DA calc(100% - 80px),#E6E1D9 calc(100% - 60px),#E5E0D8 calc(100% - 40px),#E4DFD7 calc(100% - 20px),#E3DED6 100%)}
.b4{background:linear-gradient(to bottom,#E3DED6 0px,#E2DED6 20px,#E1DDD5 40px,#E0DCD4 60px,#DFDBD3 80px,#DFDBD3 calc(100% - 80px),#DEDAD2 calc(100% - 60px),#DDD9D1 calc(100% - 40px),#DBD7D0 calc(100% - 20px),#DAD6CF 100%)}
.b5{background:linear-gradient(to bottom,#DAD6CF 0px,#DAD6CE 20px,#D8D4CD 40px,#D7D3CC 60px,#D6D2CB 80px,#D6D2CB 100%)}
.band.deep{background:var(--d1);color:var(--d-ink)}

/* the seam — three compressing steps down into the dark, no content */
.seam-1{height:30px;background:var(--seam1)}
.seam-2{height:22px;background:var(--seam2)}
.seam-3{height:16px;background:var(--seam3)}

.wrap{max-width:1080px;margin:0 auto;padding:0 30px}
.page{display:none}
.page.on{display:block;animation:rise .5s ease both}
@keyframes rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* ---------- hero ---------- */
.hero{position:relative;padding:92px 0 78px}
.hero-band{position:relative;overflow:hidden}
.hero-in{position:relative;z-index:2;max-width:780px}
.ripple{position:absolute;top:-190px;right:-170px;width:600px;height:600px;color:var(--accent);opacity:.7;pointer-events:none;z-index:1}
.hero.small .ripple{width:430px;top:-160px;right:-140px;opacity:.42}
.kicker{font-family:var(--sans);font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 28px}
.hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(2.1rem,5.8vw,3.9rem);line-height:1.1;letter-spacing:-.018em;margin:0 0 26px;max-width:15ch}
.lede{font-size:clamp(1.1rem,2.1vw,1.3rem);font-weight:300;color:var(--ink-soft);max-width:46ch;line-height:1.62;margin:0}
.lede .amp{color:var(--accent);font-style:italic}
.facts{display:flex;flex-wrap:wrap;gap:7px 22px;margin:36px 0 0;padding:0;list-style:none;font-family:var(--sans);font-size:13px;letter-spacing:.04em;color:var(--muted)}
.facts li{position:relative;padding-right:22px}
.facts li::after{content:"";position:absolute;right:0;top:.72em;width:6px;height:1px;background:var(--accent-pale)}
.facts li:last-child{padding-right:0}
.facts li:last-child::after{display:none}

/* ---------- threaded sections ---------- */
.sec{padding:44px 0}
.sec-in{display:grid;grid-template-columns:150px 1fr;gap:46px;align-items:start}
.eyebrow{font-family:var(--sans);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-weight:600;padding-top:.75em}
.body{border-left:1px solid var(--rule);padding-left:46px;max-width:660px}
.sec h2{font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.22;letter-spacing:-.012em;margin:0 0 20px;max-width:24ch}
.sec h3{font-family:var(--sans);font-weight:600;font-size:13.5px;letter-spacing:.03em;margin:0 0 5px;color:var(--ink)}
.quiet{color:var(--ink-soft)}
.more{display:inline-block;margin-top:8px;font-family:var(--sans);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;border-bottom:1px solid var(--accent-pale)}

.strand{list-style:none;margin:0;padding:0}
.strand li{padding:19px 0;border-top:1px solid var(--rule)}
.strand li:first-child{border-top:0;padding-top:0}
.strand p{margin:0;color:var(--ink-soft);font-size:17px}

.pull{font-style:italic;font-weight:300;font-size:clamp(1.2rem,2.5vw,1.55rem);line-height:1.48;color:var(--accent);margin:0;max-width:31ch}

.portrait{aspect-ratio:4/5;max-width:280px;margin:0;border:1px solid var(--rule);background-image:var(--portrait);background-size:cover;background-position:50% 28%}
.vidbox{aspect-ratio:16/9;background:rgba(35,32,31,.07);border:1px solid var(--rule);display:flex;align-items:flex-end;padding:18px;font-family:var(--sans);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:600}
.with-portrait{display:grid;grid-template-columns:280px 1fr;gap:46px;align-items:start}

.spec{margin:0;font-family:var(--sans);font-size:15.5px}
.spec div{display:flex;gap:18px;padding:12px 0;border-top:1px solid var(--rule)}
.spec div:first-child{border-top:0;padding-top:0}
.spec dt{width:132px;flex:none;color:var(--muted);font-size:13px;letter-spacing:.05em;padding-top:.12em}
.spec dd{margin:0}

.fa{font-family:var(--fa);direction:rtl;text-align:right;font-size:16.5px;line-height:2.05;color:var(--ink-soft)}
.fa-mark{font-family:var(--sans);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 12px}

.field{margin:0 0 22px;max-width:470px}
.field label{display:block;font-family:var(--sans);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--muted);margin:0 0 8px}
.field input,.field textarea{width:100%;font-family:var(--serif);font-size:17px;background:rgba(255,255,255,.5);border:1px solid var(--rule);border-radius:2px;padding:12px 14px;color:var(--ink)}
.field textarea{min-height:132px;resize:vertical;line-height:1.6}
.field input:focus,.field textarea:focus{border-color:var(--accent-pale);background:#fff}
.hint{font-size:16px;color:var(--muted);margin:-10px 0 24px;max-width:470px;line-height:1.6}
.send{font-family:var(--sans);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;background:var(--d2);color:var(--l1);border:0;padding:14px 28px;border-radius:2px;cursor:pointer}
.send:hover{background:var(--accent)}

/* ---------- inside the deep ---------- */
.band.deep .body{border-left-color:var(--d-rule)}
.band.deep .eyebrow,.band.deep .spec dt{color:var(--d-muted)}
.band.deep h2,.band.deep h3{color:var(--d-ink)}
.band.deep .quiet,.band.deep p{color:var(--d-soft)}
.band.deep .pull{color:var(--accent-pale)}
.band.deep .more{color:var(--accent-pale);border-bottom-color:rgba(184,166,196,.5)}
.band.deep .strand li,.band.deep .spec div{border-top-color:var(--d-rule)}
.deep-open{padding:74px 0 20px}
.deep-close{padding:20px 0 80px}

.urgent{border-left:2px solid var(--accent-pale);padding-left:20px;max-width:560px}
.urgent .h{font-family:var(--sans);font-size:11px;letter-spacing:.15em;text-transform:uppercase;font-weight:600;color:var(--d-muted);margin:0 0 10px}
.urgent strong{font-weight:600;color:var(--d-ink)}

/* ---------- footer — the last step down ---------- */
footer{background:var(--d2);color:var(--d-ink);padding:46px 0 54px}
.foot-in{max-width:1080px;margin:0 auto;padding:0 30px;display:grid;grid-template-columns:1.15fr 1fr;gap:46px}
footer p{font-size:16px;color:var(--d-soft);margin:0 0 .55em;line-height:1.62}
.foot-name{font-size:19px;color:var(--d-ink);margin-bottom:.6em}
.foot-name .amp{color:var(--accent-pale);font-style:italic;padding:0 .12em}
.foot-name .becoming{font-style:italic}
.fine{font-family:var(--sans);font-size:12.5px;color:var(--d-muted);margin-top:34px;padding-top:20px;border-top:1px solid var(--d-rule)}

@media (min-width:881px) and (max-width:1080px){
  .sec-in{grid-template-columns:118px 1fr;gap:32px}
  .body{padding-left:32px}
  .with-portrait{grid-template-columns:220px 1fr;gap:32px}
}

/* tablet and phone — single column */
@media (max-width:880px){
  .sec-in{grid-template-columns:1fr;gap:14px}
  .body{border-left:0;padding-left:0}
  .eyebrow{padding-top:0}
  .with-portrait{grid-template-columns:1fr;gap:26px}
  .foot-in{grid-template-columns:1fr;gap:30px}
  .hero{padding:62px 0 52px}
  .ripple{display:none}
  nav{width:100%;margin-left:0;gap:0 22px;flex-wrap:wrap}
  nav a{text-decoration:none;display:inline-block;text-decoration:none;border-bottom:1px solid transparent;display:inline-block;padding:14px 0 12px}
  .more{padding:9px 0}
  .portrait{max-width:320px}
}

/* tablets have room for the ripple even though the layout has stacked */
@media (min-width:600px) and (max-width:880px){
  .ripple{display:block;width:400px;top:-140px;right:-130px;opacity:.5}
  .hero.small .ripple{width:330px;top:-120px;right:-110px;opacity:.34}
}

/* phones — the ripple stays, sized to the viewport so it scales with the screen */
@media (max-width:599px){
  .ripple{display:block;width:84vw;height:84vw;top:-29vw;right:-25vw;opacity:.55}
  .hero.small .ripple{width:70vw;height:70vw;top:-24vw;right:-21vw;opacity:.4}
}

/* any touch device, at any width — iPad landscape is 1024px wide but still a finger */
@media (pointer:coarse){
  nav a{text-decoration:none;display:inline-block;text-decoration:none;border-bottom:1px solid transparent;display:inline-block;padding:14px 0 12px}
  .more{padding:9px 0}
  .send{padding:16px 30px}
}

/* phones — tighter margins, and the spec rows stack rather than squeeze */
@media (max-width:560px){
  .wrap,.foot-in{padding-left:22px;padding-right:22px}
  .mast-in{padding:18px 22px}
    .hero{padding:52px 0 44px}
  .sec{padding:34px 0}
  .spec div{display:block;padding:13px 0}
  .spec dt{width:auto;margin-bottom:3px}
  .deep-open{padding:58px 0 16px}
  .deep-close{padding:16px 0 62px}
}
@media (prefers-reduced-motion:reduce){.page.on{animation:none}}

/* consent checkbox on the enquiry form */
.consent{display:flex;gap:11px;align-items:flex-start;max-width:470px;margin:0 0 24px;font-size:16px;color:var(--ink-soft);line-height:1.55}
.consent input{margin:6px 0 0;width:17px;height:17px;flex:none;accent-color:var(--accent)}
.skip{position:absolute;left:-9999px}
.skip:focus{position:static;display:inline-block;margin:8px 0 0 30px;font-family:var(--sans);font-size:13px}
/* crisis numbers — one tappable row each, so a tap can only ever reach the number it is on */
.lines{list-style:none;margin:12px 0 0;padding:0;max-width:420px}
.lines li{border-top:1px solid var(--d-rule)}
.lines li:first-child{border-top:0}
.lines a,.lines .row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-height:48px;padding:12px 0;
  color:var(--d-soft);text-decoration:none;border-bottom:0;font-size:16px;line-height:1.45}
.lines strong{color:var(--d-ink);font-weight:600}
.lines .num{font-family:var(--sans);font-weight:600;font-size:17px;letter-spacing:.03em;color:var(--d-ink)}
.lines a .num{border-bottom:1px solid var(--accent-pale);padding-bottom:1px}
.lines .note{font-size:15px;color:var(--d-soft)}
.lines a:hover .num,.lines a:active .num{border-bottom-width:2px}
.lines a:active{background:rgba(234,230,224,.06)}
.urgent a:focus-visible{outline:2px solid var(--accent-pale);outline-offset:2px;border-radius:2px}

/* sections with no label keep their column on wide screens, and collapse on phones */
@media (max-width:880px){ .eyebrow:empty{display:none} }

/* section marker: a short rule above each section label */
.eyebrow:not(:empty)::before{content:"";display:block;width:2rem;margin-bottom:8px;border-top:3px solid var(--marker)}

/* titles in navy; the dark band keeps its light titles through .band.deep h2/h3 */
.hero h1,.sec h2,.sec h3{color:var(--title)}