/* ==========================================================================
   Dr Soumya Ghosh — Uttarbanga Clinic, Cooch Behar
   Design system: "Ink & Ochre"
   Petrol-navy ink · warm paper · one burnt-ochre accent.
   Zero JS dependencies. WCAG 2.2 AA. Built for 4G on a budget Android.
   ========================================================================== */

/* ---------- Fonts ------------------------------------------------------- */
/* Latin: Newsreader (display, opsz pinned 40) + Anek Latin (UI/body).
   Bengali: Anek Bangla, unicode-range gated so English pages never fetch it.
   U+200C/200D (ZWNJ/ZWJ) and U+25CC are mandatory or conjuncts break. */

@font-face{
  font-family:"Newsreader";
  src:url(/fonts/newsreader.woff2) format("woff2-variations");
  font-weight:400 600; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0100-017F,U+2010-2015,U+2018-201F,U+2026,U+2030,U+20B9,U+2122;
}
@font-face{
  font-family:"Anek";
  src:url(/fonts/anek.woff2) format("woff2-variations");
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0100-017F,U+2010-2015,U+2018-201F,U+2026,U+2030,U+20B9,U+2122;
}
@font-face{
  font-family:"Anek";
  src:url(/fonts/anek-bn.woff2) format("woff2-variations");
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0980-09FF,U+0964-0965,U+200C-200D,U+25CC;
}
/* Metric-matched fallback: kills font-swap CLS without waiting on the webfont */
@font-face{
  font-family:"Anek-fallback";
  src:local("Arial"),local("Helvetica"),local("Roboto");
  size-adjust:97%; ascent-override:92%; descent-override:24%; line-gap-override:0%;
}

/* ---------- Tokens ------------------------------------------------------ */
:root{
  /* Ground */
  --paper:#FBFAF8;          /* page                        */
  --paper-sunk:#F3F0EB;     /* alternating bands           */
  --surface:#FFFFFF;        /* raised blocks               */

  /* Ink — petrol navy, blue-leaning. Never green-leaning. */
  --ink-900:#0F2233;        /* headings, footer field      */
  --ink-700:#1C3A52;        /* body text                   */
  --ink-500:#2E6187;        /* links, icons                */
  --ink-300:#8CA6B8;        /* muted text on dark          */
  --ink-100:#DCE7EF;        /* tints, borders              */

  /* Accent — burnt ochre. Rules, marks, one button. <5% of page area. */
  --ochre-600:#B25E28;
  --ochre-700:#8F4A1E;      /* text-safe on paper (6.4:1)  */
  --ochre-400:#D98E52;      /* text-safe on ink-900 (5.7:1) */
  --ochre-100:#F6E8DA;

  /* Status only. Never brand colours. */
  --ok:#0E7A4F;
  --alert:#B3261E;
  /* Darker sibling of --alert, for text. #B3261E on the tinted triage
     background is around 4.4:1; this is around 7.1:1, so the triage
     headline and its links clear AA comfortably at any weight. */
  --alert-ink:#8C1D18;

  /* Structure */
  --hair:1px solid color-mix(in oklab, var(--ink-900) 13%, transparent);
  --hair-strong:1px solid color-mix(in oklab, var(--ink-900) 22%, transparent);
  --shadow:0 1px 2px color-mix(in oklab, var(--ink-900) 7%, transparent),
           0 4px 14px color-mix(in oklab, var(--ink-900) 5%, transparent);
  --r:10px; --r-lg:16px;

  /* 8pt spacing scale */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem; --s6:4rem; --s7:6rem;

  /* Fluid type */
  --t-xs:.78rem; --t-sm:.875rem; --t-base:1rem;
  --t-lg:clamp(1.06rem,.99rem + .3vw,1.19rem);
  --t-xl:clamp(1.3rem,1.16rem + .6vw,1.6rem);
  --t-2xl:clamp(1.6rem,1.35rem + 1.1vw,2.15rem);
  --t-3xl:clamp(2rem,1.55rem + 2vw,3.1rem);

  --measure:34rem;          /* ~68ch reading measure       */
  --wrap:min(100% - 2.5rem, 68rem);
  --wrap-narrow:min(100% - 2.5rem, 48rem);
}

/* ---------- Reset ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  font-family:"Anek","Anek-fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:var(--t-base); line-height:1.65;
  color:var(--ink-700); background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-variant-numeric:proportional-nums;
  overflow-wrap:break-word;
}
img,picture,svg{display:block; max-width:100%; height:auto}
input,button,textarea,select{font:inherit; color:inherit}

/* Bengali needs optical compensation — it reads smaller and denser than Latin
   at the same pt size, and its conjuncts need more leading.
   Applied to inline runs only. A descendant selector here would compound 1.06×
   at every nesting level on a Bengali page. */
span[lang="bn"],small[lang="bn"],.bn{font-size:1.06em; line-height:1.8}

/* Whole-page Bengali: bump once at the root, and switch headings to Anek —
   Newsreader has no Bengali coverage, so headings would otherwise fall back to
   an arbitrary system font at the wrong optical size. */
html[lang^="bn"] body{font-size:1.06rem; line-height:1.8}
html[lang^="bn"] h1,
html[lang^="bn"] h2,
html[lang^="bn"] h3,
html[lang^="bn"] h4,
html[lang^="bn"] .brand{
  font-family:"Anek","Anek-fallback",system-ui,sans-serif;
  font-weight:600; line-height:1.35; letter-spacing:0;
}
html[lang^="bn"] p[lang="en"],html[lang^="bn"] [lang="en"]{font-size:.95em}

/* ---------- Typography -------------------------------------------------- */
h1,h2,h3,h4{
  font-family:"Newsreader",Georgia,"Times New Roman",serif;
  font-weight:400; color:var(--ink-900);
  line-height:1.15; text-wrap:balance;
  font-variant-numeric:lining-nums;
}
h1{font-size:var(--t-3xl); letter-spacing:-.015em}
h2{font-size:var(--t-2xl); letter-spacing:-.01em}
h3{font-size:var(--t-xl)}
h4{font-size:var(--t-lg)}
p,li{text-wrap:pretty}
p{max-width:var(--measure)}
.lede{font-size:var(--t-lg); color:var(--ink-700); max-width:38rem}
strong,b{font-weight:600; color:var(--ink-900)}

a{color:var(--ink-500); text-underline-offset:.18em; text-decoration-thickness:1px}
a:hover{color:var(--ochre-700)}

/* NHS-derived focus indicator: guaranteed 3:1 against light AND dark surfaces,
   which a single-colour ring cannot achieve. */
:focus-visible{
  outline:3px solid #FFEB3B; outline-offset:0;
  box-shadow:0 0 0 5px var(--ink-900); border-radius:2px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink-900); color:#fff; padding:var(--s2) var(--s3);
  font-weight:600; border-radius:0 0 var(--r) 0;
}
.skip:focus{left:0}

/* ---------- Layout ------------------------------------------------------ */
.wrap{width:var(--wrap); margin-inline:auto}
.wrap-narrow{width:var(--wrap-narrow); margin-inline:auto}
.sec{padding-block:var(--s6)}
/* Sticky header must not swallow the heading when an anchor is followed */
:target,section[id],h2[id],li[id]{scroll-margin-top:5rem}
.sec-sunk{background:var(--paper-sunk); border-block:var(--hair)}
@media(max-width:40rem){.sec{padding-block:var(--s5)}}

/* Below-the-fold sections skip layout/paint until scrolled near */
.defer{content-visibility:auto; contain-intrinsic-size:auto 700px}

/* The one restraint that does all the "premium" work:
   a single ochre rule under section headings, and nowhere else. */
.sec-head{margin-bottom:var(--s4)}
.eyebrow{
  font-size:var(--t-xs); font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ochre-700); margin-bottom:var(--s1);
}
.sec-head h2{max-width:26ch}
.sec-head h2::after{
  content:""; display:block; width:3.5rem; height:2px;
  background:var(--ochre-600); margin-top:var(--s2);
}
.sec-head .lede{margin-top:var(--s3)}

/* ---------- Header ------------------------------------------------------ */
.masthead{
  background:var(--paper); border-bottom:var(--hair);
  position:sticky; top:0; z-index:50;
}
.masthead .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); min-height:3.75rem;
}
.brand{font-family:"Newsreader",serif; font-size:1.06rem; color:var(--ink-900); text-decoration:none; line-height:1.2}
.brand span{display:block; font-family:"Anek",sans-serif; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-500); font-weight:600}
.nav{display:flex; gap:var(--s3); align-items:center}
.nav a{font-size:var(--t-sm); color:var(--ink-700); text-decoration:none; font-weight:500; padding-block:.5rem}
.nav a:hover{color:var(--ochre-700); text-decoration:underline}
.nav a[aria-current]{color:var(--ochre-700); font-weight:600}
.nav a[aria-current]::after{
  content:""; display:block; height:2px; margin-top:.25rem;
  background:var(--ochre-600); border-radius:2px;
}

/* Mobile navigation.
   This rule used to be `.nav a:not(.nav-cta){display:none}` — every nav link
   hidden below 52rem with nothing offered in its place. On a phone, which is
   how most people here read this site, the header contained a logo and a
   WhatsApp button and no way to reach any other page; the only navigation was
   the footer, at the bottom of a 2,800-word guide.

   No hamburger, because that needs JavaScript or a `details` display override
   that behaves inconsistently. Instead the nav wraps onto its own full-width
   line and the header stops being sticky, so every destination is visible with
   no interaction and the taller header simply scrolls away. Contact actions
   stay permanently available in the fixed bottom callbar, which is what a
   sticky header was providing anyway. */
/* Desktop: brand | nav | WhatsApp, on one line. */
.masthead .wrap > .nav-cta{order:3}
.masthead .nav{order:2; margin-left:auto; margin-right:var(--s3)}

@media(max-width:52rem){
  .masthead{position:static}
  .masthead .wrap{flex-wrap:wrap; row-gap:.3rem; padding-block:.55rem; min-height:0}
  .brand{flex:1 1 auto; order:1}
  .masthead .wrap > .nav-cta{order:2; flex:0 0 auto; padding:.45rem .9rem}
  /* The links take their own full-width row beneath the brand and the call to
     action, so nothing is hidden and nothing needs to be tapped to reveal it. */
  .masthead .nav{
    order:3; flex-basis:100%; flex-wrap:wrap;
    margin:0; gap:0 1.15rem;
    padding-top:.2rem; border-top:var(--hair);
  }
  .masthead .nav a{
    min-height:40px; display:flex; align-items:center;
    font-size:.82rem;
  }
  .nav a[aria-current]::after{margin-top:0}
}
.nav-cta{
  background:var(--ink-900); color:#fff !important; padding:.55rem 1.1rem;
  border-radius:100px; font-weight:600; font-size:var(--t-sm) !important;
}
.nav-cta:hover{background:var(--ochre-700); text-decoration:none !important}

/* ---------- Hero -------------------------------------------------------- */
.hero{padding-block:var(--s6) var(--s5); border-bottom:var(--hair)}
.hero-grid{display:grid; gap:var(--s5); align-items:center}
@media(min-width:56rem){
  .hero-grid{grid-template-columns:1.05fr .95fr; gap:var(--s6)}
}
.hero h1{margin-bottom:var(--s2)}
.hero .cred{
  font-size:var(--t-lg); color:var(--ochre-700); font-weight:600;
  margin-bottom:var(--s1);
}
.hero .reg{font-size:var(--t-sm); color:var(--ink-500); margin-bottom:var(--s3)}
.hero .lede{margin-bottom:var(--s2)}
.hero .lede-bn{color:var(--ink-500); font-size:var(--t-base); margin-bottom:var(--s4); max-width:38rem}

.hero-figure{position:relative}
.hero-figure img{
  border-radius:var(--r-lg); box-shadow:var(--shadow);
  border:var(--hair); width:100%; object-fit:cover;
}
.hero-figure figcaption{
  font-size:var(--t-xs); color:var(--ink-500); margin-top:var(--s2);
  padding-left:var(--s2); border-left:2px solid var(--ochre-600);
}

/* ---------- Buttons ----------------------------------------------------- */
.actions{display:flex; flex-wrap:wrap; gap:var(--s2)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:48px; padding:.75rem 1.5rem; border-radius:100px;
  font-weight:600; font-size:var(--t-base); text-decoration:none;
  border:1.5px solid transparent; cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary{background:var(--ochre-600); color:#fff}
.btn-primary:hover{background:var(--ochre-700); color:#fff}
.btn-outline{background:transparent; color:var(--ink-900); border-color:var(--ink-100)}
.btn-outline:hover{background:var(--ink-100); color:var(--ink-900); border-color:var(--ink-500)}
.btn-ghost{background:transparent; color:var(--ink-500); padding-inline:0}
.btn-ghost:hover{color:var(--ochre-700)}
@media(max-width:26rem){.actions{flex-direction:column; align-items:stretch}}

/* ---------- Trust bar --------------------------------------------------- */
/* Externally verifiable facts, not adjectives. */
.trustbar{background:var(--ink-900); color:var(--ink-300); padding-block:var(--s3)}
.trustbar ul{
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; gap:var(--s1) var(--s3);
  font-size:var(--t-sm);
}
.trustbar li{display:flex; align-items:center; gap:.5rem; max-width:none}
.trustbar li:not(:last-child)::after{
  content:""; width:3px; height:3px; border-radius:50%;
  background:var(--ochre-600); margin-left:var(--s2);
}
.trustbar strong{color:#fff; font-weight:600}
.trustbar a{color:#fff}

/* ---------- Fact / key-detail block ------------------------------------- */
.facts{
  background:var(--surface); border:var(--hair); border-left:3px solid var(--ochre-600);
  border-radius:var(--r); padding:var(--s3) var(--s3);
}
.facts dl{display:grid; gap:var(--s2) var(--s3); margin:0}
@media(min-width:34rem){.facts dl{grid-template-columns:auto 1fr}}
.facts dt{
  font-size:var(--t-xs); font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-500); align-self:start; padding-top:.2rem;
}
.facts dd{margin:0; color:var(--ink-900); font-weight:500}
.facts dd small{display:block; font-weight:400; color:var(--ink-700); font-size:var(--t-sm)}

/* ---------- Answer block (retrieval anchor) ----------------------------- */
/* First 40–60 words under a heading, self-contained and entity-named, so the
   chunk stands alone wherever a retriever splits it. */
.answer{
  background:var(--ochre-100); border-radius:var(--r);
  padding:var(--s3); margin-block:var(--s3);
  border-left:3px solid var(--ochre-600);
}
.answer p{max-width:46rem; color:var(--ink-900)}
.answer p+p{margin-top:var(--s2)}
.answer .label{
  display:block; font-size:var(--t-xs); font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ochre-700); margin-bottom:var(--s1);
}

/* ---------- Definition block (+57% LLM absorption) ---------------------- */
.define{
  border-top:var(--hair-strong); border-bottom:var(--hair);
  padding-block:var(--s3); margin-block:var(--s3);
}
.define dl{margin:0; display:grid; gap:var(--s2)}
.define dt{font-weight:600; color:var(--ink-900); font-family:"Newsreader",serif; font-size:var(--t-lg)}
.define dd{margin:0; max-width:var(--measure)}

/* ---------- Prose ------------------------------------------------------- */
.prose>*+*{margin-top:var(--s3)}
.prose h2{margin-top:var(--s6)}
.prose h3{margin-top:var(--s4)}
.prose ul,.prose ol{padding-left:1.3rem; max-width:var(--measure)}
.prose li+li{margin-top:.4rem}
.prose li::marker{color:var(--ochre-600)}
.prose h2::after{
  content:""; display:block; width:3rem; height:2px;
  background:var(--ochre-600); margin-top:var(--s2);
}

/* ---------- Service list (not an icon-card grid) ------------------------ */
.services{display:grid; gap:0; margin-top:var(--s3)}
@media(min-width:44rem){.services{grid-template-columns:1fr 1fr; column-gap:var(--s5)}}
.svc{padding-block:var(--s3); border-bottom:var(--hair)}
.svc h3{font-size:var(--t-lg); margin-bottom:.15rem}
.svc .bn{display:block; font-size:var(--t-sm); color:var(--ink-500); margin-bottom:.4rem}
.svc p{font-size:var(--t-sm); color:var(--ink-700); max-width:32rem}

/* ---------- Cards / grids ----------------------------------------------- */
.grid{display:grid; gap:var(--s3)}
.grid-2{grid-template-columns:1fr}
@media(min-width:44rem){.grid-2{grid-template-columns:1fr 1fr}}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
/* Guide pages: the narrow reading column shares the left edge of the header
   grid instead of being centred, so nothing appears to shift mid-page. */
.guide .wrap-narrow{width:var(--wrap)}
.guide .wrap-narrow>*{max-width:48rem}

/* Two-column editorial split: content left, supporting figure right */
.split{display:grid; gap:var(--s4)}
@media(min-width:60rem){.split{grid-template-columns:1.15fr .85fr; gap:var(--s6); align-items:start}}
.split figure{margin:0}
.split figure img{border-radius:var(--r-lg); border:var(--hair); box-shadow:var(--shadow); width:100%}
.split figcaption{font-size:var(--t-xs); color:var(--ink-500); margin-top:var(--s2); padding-left:var(--s2); border-left:2px solid var(--ochre-600)}
@media(min-width:60rem){.split figure{position:sticky; top:6rem}}
.card{
  background:var(--surface); border:var(--hair); border-radius:var(--r);
  padding:var(--s3); display:flex; flex-direction:column; gap:.4rem;
}
.card h3{font-size:var(--t-lg)}
.card p{font-size:var(--t-sm); max-width:none}
a.card{text-decoration:none; color:inherit; transition:border-color .18s ease}
a.card:hover{border-color:var(--ochre-600)}
a.card .more{margin-top:auto; padding-top:var(--s2); font-size:var(--t-sm); font-weight:600; color:var(--ochre-700)}

/* ---------- Numbered timeline ("what to expect") ------------------------ */
.steps{list-style:none; padding:0; counter-reset:step; display:grid; gap:var(--s3)}
.steps li{
  position:relative; padding-left:3.25rem; counter-increment:step; max-width:44rem;
}
.steps li::before{
  content:counter(step); position:absolute; left:0; top:0;
  width:2.25rem; height:2.25rem; border-radius:50%;
  background:var(--ochre-600); color:#fff;
  display:grid; place-items:center; font-weight:600; font-size:var(--t-sm);
  font-variant-numeric:lining-nums;
}
.steps h3{font-size:var(--t-lg); margin-bottom:.2rem}
.steps p{font-size:var(--t-sm)}

/* ---------- Tables (+55% LLM absorption) -------------------------------- */
/* tabindex is injected at build time so the horizontally scrollable region is
   reachable by keyboard — WCAG 2.1 SC 2.1.1. */
.tbl-wrap{overflow-x:auto; margin-block:var(--s3); border:var(--hair); border-radius:var(--r)}
.tbl-wrap:focus-visible{outline:3px solid #FFEB3B; box-shadow:0 0 0 5px var(--ink-900)}
table{width:100%; border-collapse:collapse; font-size:var(--t-sm); min-width:32rem}
caption{
  text-align:left; padding:var(--s2) var(--s3); font-size:var(--t-xs);
  color:var(--ink-500); border-bottom:var(--hair); background:var(--paper-sunk);
}
th,td{text-align:left; padding:.7rem var(--s3); vertical-align:top}
thead th{
  background:var(--paper-sunk); color:var(--ink-900); font-weight:600;
  font-size:var(--t-xs); letter-spacing:.05em; text-transform:uppercase;
  border-bottom:var(--hair-strong);
}
tbody tr+tr{border-top:var(--hair)}
tbody th{font-weight:600; color:var(--ink-900)}
td .num{font-variant-numeric:tabular-nums lining-nums}

/* ---------- FAQ — native <details>, zero JS ----------------------------- */
.faq{display:grid; gap:0; margin-top:var(--s3); border-top:var(--hair)}
.faq details{border-bottom:var(--hair)}
.faq summary{
  display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s3);
  padding:var(--s3) 0; cursor:pointer; list-style:none;
  font-weight:600; color:var(--ink-900); font-size:var(--t-base);
  min-height:48px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; flex:0 0 auto; font-size:1.35rem; line-height:1;
  color:var(--ochre-600); font-weight:400;
}
.faq details[open] summary::after{content:"\2013"}
.faq summary:hover{color:var(--ochre-700)}
.faq .ans{padding-bottom:var(--s3); max-width:46rem}
.faq .ans>*+*{margin-top:var(--s2)}
.faq .ans p{font-size:var(--t-sm)}

/* Bengali summary block on English guide pages */
.bn-summary{
  background:var(--paper-sunk); border:var(--hair); border-left:3px solid var(--ochre-600);
  border-radius:var(--r); padding:var(--s3); margin-block:var(--s4);
}
.bn-summary p{max-width:46rem; font-size:1.06rem; line-height:1.85; color:var(--ink-900)}
.bn-summary .eyebrow{color:var(--ochre-700)}

/* ---------- Author / review byline -------------------------------------- */
.byline{
  display:flex; gap:var(--s3); align-items:flex-start;
  background:var(--paper-sunk); border:var(--hair); border-radius:var(--r);
  padding:var(--s3); margin-block:var(--s4);
}
.byline picture{flex:0 0 auto}
.byline img{
  width:64px; height:64px; border-radius:50%; object-fit:cover;
  object-position:50% 20%; flex:0 0 auto; border:2px solid var(--surface);
}
.byline .nm{font-weight:600; color:var(--ink-900)}
.byline .rl{font-size:var(--t-sm); color:var(--ink-700)}
.byline .rv{font-size:var(--t-xs); color:var(--ink-500); margin-top:.4rem}
@media(max-width:32rem){.byline{flex-direction:column}}

/* ---------- Photo strip ------------------------------------------------- */
.strip{display:grid; gap:var(--s2); grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.strip figure{margin:0}
.strip img{border-radius:var(--r); border:var(--hair); width:100%; aspect-ratio:3/2; object-fit:cover}
.strip figcaption{font-size:var(--t-xs); color:var(--ink-500); margin-top:.5rem}

/* ---------- Photo gallery ---------------------------------------------- */
.gal{display:grid; gap:var(--s3); grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.gal figure{margin:0}
.gal img{width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--r); border:var(--hair); background:var(--paper-sunk)}
.gal figcaption{font-size:var(--t-sm); color:var(--ink-700); margin-top:.6rem; padding-left:.75rem; border-left:2px solid var(--ochre-600)}

/* ---------- Anchored headings ------------------------------------------- */
/* Every h2/h3 gets an id at build time (see build.py _anchor_headings) so that
   Search can offer "read more" deep links into sections and a citation can
   land on the relevant heading rather than the top of the page. Without
   scroll-margin the heading lands flush against the viewport edge and reads as
   though the section above it is missing. */
h2[id],h3[id]{scroll-margin-top:var(--s4)}

/* ---------- Emergency triage block -------------------------------------- */
/* Sits high on the symptom pages. Deliberately the loudest thing on the page
   after the h1, because the detailed danger-signs section it summarises was
   measured sitting ~3,300 words down /fever/ and ~2,500 down /chest-pain/.
   Uses --alert rather than the ochre accent so it reads as a different KIND of
   information, not just an emphasised version of the same kind. Not
   dismissible, not collapsible. */
.triage{
  border:2px solid var(--alert); border-left-width:6px;
  border-radius:var(--r); padding:var(--s3);
  background:color-mix(in oklab, var(--alert) 5%, var(--surface));
}
.triage-hd{
  font-family:"Anek","Noto Sans Bengali",sans-serif; font-weight:700;
  font-size:var(--t-lg); line-height:1.3; color:var(--alert-ink);
  max-width:none; margin-bottom:var(--s2);
}
.triage ul{padding-left:1.2rem; display:grid; gap:.45rem; margin:0}
.triage li{max-width:none; font-size:var(--t-sm)}
.triage-cta{
  margin-top:var(--s3); padding-top:var(--s2);
  border-top:1px solid color-mix(in oklab, var(--alert) 35%, transparent);
  max-width:none;
}
.triage-cta a{color:var(--alert-ink); text-decoration-thickness:2px}
.triage-note{margin-top:var(--s2); font-size:var(--t-sm); color:var(--ink-700); max-width:none}
@media print{ .triage{border-color:#000; background:#fff} }

/* ---------- On-page contents -------------------------------------------- */
/* The guides carry 11 to 19 sections each and had no jump list, while
   /services/ and /questions/ did. Generated from the heading ids, so it cannot
   drift out of sync with the page. Two columns on wide screens because a
   nineteen-item single column pushes the article itself below the fold. */
.toc{
  margin:0; padding-left:1.4rem; display:grid; gap:.35rem;
  font-size:var(--t-sm); color:var(--ink-700);
}
@media(min-width:44rem){.toc{grid-template-columns:1fr 1fr; column-gap:var(--s4)}}
.toc li{max-width:none}
.toc a{color:var(--ink-700); text-decoration-color:var(--ink-300)}
.toc a:hover{color:var(--ochre-700)}

/* ---------- Service list (/services/) ----------------------------------- */
/* Two columns on wide screens, but each entry is a self-contained block with
   its own heading — a retriever splitting mid-page still gets a whole item.
   The Bengali line sits between the name and the description deliberately:
   it is the search term, so it should be scannable without reading prose. */
.svc-list{display:grid; gap:var(--s3)}
@media(min-width:52rem){.svc-list{grid-template-columns:1fr 1fr; gap:var(--s3) var(--s4)}}
.svc{border-top:var(--hair-strong); padding-top:var(--s2); break-inside:avoid}
.svc h3{font-size:var(--t-lg); line-height:1.25; max-width:none}
.svc h3 a{color:inherit; text-decoration-color:var(--ochre-400)}
.svc h3 a:hover{color:var(--ochre-700)}
.svc-bn{font-size:var(--t-sm); color:var(--ink-500); margin-top:.2rem}
.svc p:last-child{font-size:var(--t-sm); color:var(--ink-700); margin-top:.5rem; max-width:none}

/* ---------- Question bank (/questions/) --------------------------------- */
/* Deliberately not <details>. A collapsed answer is in the DOM, but the arXiv
   absorption study found Q&A is the only content genre with NEGATIVE lift
   (−5.74%), and hiding every answer one interaction deep makes that worse for
   the readers who matter most here: someone on a phone, in Bengali, looking
   for one specific thing. Everything is open and flat. */
.qbank{display:grid; gap:var(--s4)}
.qa{border-left:2px solid var(--ochre-100); padding-left:var(--s3); scroll-margin-top:var(--s4)}
.qa:target{border-left-color:var(--ochre-600)}
.qa h3{font-size:var(--t-lg); line-height:1.35; max-width:none}
.qa p{margin-top:.6rem}
.qa .qa-en{font-size:var(--t-sm); color:var(--ink-700)}
.qtoc{display:flex; flex-wrap:wrap; gap:.5rem; padding:0; list-style:none; margin-top:var(--s3)}
.qtoc li{max-width:none}
.qtoc a{display:inline-block; background:var(--surface); border:var(--hair);
  border-radius:100px; padding:.4rem 1rem; font-size:var(--t-sm); color:var(--ink-700);
  text-decoration:none; min-height:24px}
.qtoc a:hover{border-color:var(--ochre-600); color:var(--ochre-700)}

/* ---------- Tags -------------------------------------------------------- */
.tags{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:var(--s3); padding:0; list-style:none}
.tags li{
  background:var(--surface); border:var(--hair); border-radius:100px;
  padding:.35rem .9rem; font-size:var(--t-sm); color:var(--ink-700); max-width:none;
}
/* Chips that lead somewhere. Five of the twenty-three complaints on the home
   page have a full guide behind them; they were rendered as inert text, which
   is worse than not listing them — the reader is told their symptom is
   recognised and given nowhere to go. The border weight is the affordance;
   an underline inside a pill reads as a mistake. */
.tags li.tag-link{padding:0; border-color:var(--ochre-400); background:var(--paper)}
.tags li.tag-link > a{
  display:block; padding:.35rem .9rem; border-radius:100px;
  color:var(--ink-900); text-decoration:none; font-weight:500;
}
.tags li.tag-link > a::after{content:" \2192"; color:var(--ochre-700)}
.tags li.tag-link:hover{background:var(--surface)}
/* WCAG 2.2 target-size (minimum) is met at the default 34px, but these are
   tapped by people who are unwell, on a phone, one-handed. Give the linked
   chips the full 44px enhanced target on small screens. */
@media(max-width:44rem){.tags li.tag-link > a{min-height:44px; display:flex; align-items:center}}
.tags li.tag-link > a:focus-visible{outline:2px solid var(--ochre-700); outline-offset:2px}

/* Sub-heading inside a card grid. Used on the home page to separate the
   symptom-first guides from the diagnosis-first ones — the distinction is the
   whole point of the section, so it needs to be visible without a second h2. */
.grid-sub{
  font-size:var(--t-sm); font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-500);
  margin:var(--s4) 0 var(--s2); padding-bottom:.4rem; border-bottom:var(--hair);
}
.grid-sub:first-of-type{margin-top:var(--s3)}

/* Symptom hub cards. The Bengali label is the load-bearing part for a good
   share of readers, so it sits on the heading line rather than in a footnote. */
.card.sym h3{display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem}
.sym-bn{font-size:var(--t-sm); font-weight:400; color:var(--ink-500)}

/* ======================================================================
   Smartphone type scale.

   Measured at 320, 360 and 390px: the main prose was 16px, but everything
   around it inherited --t-sm (14px) or --t-xs (12.5px) — the emergency triage
   list, the contents list, FAQ answers, the 72 service descriptions including
   their Bengali, the reference list and the disclaimer. On a desktop those
   sizes read as hierarchy; on a phone held at arm's length by a patient in
   their sixties they read as unreadable, and the smallest text on the page was
   the emergency block.

   Raising the two tokens rather than patching individual rules keeps the
   hierarchy intact and fixes every one of them at once.
   ====================================================================== */
@media(max-width:52rem){
  :root{
    --t-xs:.875rem;   /* 12.5px -> 14px */
    --t-sm:1rem;      /* 14px   -> 16px */
  }
  /* The nav sets its own size; leave it compact so the links still fit
     two rows rather than four. */
  .masthead .nav a{font-size:.82rem}
  /* Chips would grow enough to reflow awkwardly at 320px. */
  .tags li{font-size:.9rem}
  /* Tables carry the most text per pixel, so they stay one step down and
     lose some horizontal padding instead. */
  table{font-size:.9rem; min-width:26rem}
  th,td{padding:.6rem .7rem}
  caption{padding:.7rem .8rem}
  /* min-width above is 26rem — wider than any phone — so every table on this
     breakpoint scrolls. The edge shadows alone were too quiet to be noticed,
     and a column the reader never discovers is a column that does not exist.
     Say it in words, only where it is true. */
  caption::after{
    content:" \2014 scroll sideways to see all columns";
    font-style:italic; color:var(--ochre-700); white-space:normal;
  }
  /* Safety-critical text goes the other way: bigger than body, not smaller. */
  .triage ul{font-size:1.05rem}
  .triage-hd{font-size:1.08rem}
  .triage-cta{font-size:1.05rem}
}

/* ======================================================================
   Smartphone tap targets.

   WCAG 2.2 SC 2.5.8 asks for 24x24 CSS px. Measured on a phone, the contents
   list, the service titles, the /services/ jump list, the breadcrumb and the
   reference links were all 13 to 17px tall and stacked directly against each
   other — 220 pairs of adjacent links with no gap between them at all. Links
   inside a sentence are exempt from the rule and are left alone; lists of
   links are not, and are what people actually navigate with.
   ====================================================================== */
@media(max-width:52rem){
  .toc li a,
  .facts ul li a,
  .svc h3 a,
  .refs ol li > a,
  .crumb a,
  .foot-grid a{
    display:inline-block; padding-block:.45rem; min-height:24px;
  }
  .toc{gap:.15rem}
  .toc li{padding-block:.1rem}
  .foot-grid li{margin-block:.15rem}
  /* Citation markers are exempt as inline text, but they are 16x12 and sit in
     the middle of a paragraph, so give them a larger hit area without moving
     any surrounding text. */
  .cite a{
    position:relative; padding:.55rem .5rem; margin:-.55rem -.5rem;
    display:inline-block; min-width:24px; text-align:center;
  }
  /* An inline link inside a section heading is a navigation target, not prose,
     so it gets the same treatment as a list of links. */
  .grid-sub a{display:inline-block; padding-block:.35rem}
}

/* Horizontal scroll on a table needs to be visible or it will not be found.
   A gradient on the right edge, painted only while the wrapper can still be
   scrolled further. */
.tbl-wrap{
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) left / 2.5rem 100% no-repeat,
    linear-gradient(to left, var(--surface) 30%, transparent) right / 2.5rem 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, color-mix(in oklab,var(--ink-900) 16%,transparent), transparent) left / .8rem 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, color-mix(in oklab,var(--ink-900) 16%,transparent), transparent) right / .8rem 100% no-repeat;
  background-attachment:local, local, scroll, scroll;
}

/* ---------- Callouts ---------------------------------------------------- */
.note{
  border-left:3px solid var(--ink-500); background:var(--surface);
  padding:var(--s3); border-radius:0 var(--r) var(--r) 0; margin-block:var(--s3);
  font-size:var(--t-sm);
}
.note-alert{border-left-color:var(--alert)}
.note-alert strong{color:var(--alert)}
.disclaimer{
  font-size:var(--t-xs); color:var(--ink-500);
  border-top:var(--hair); padding-top:var(--s2); margin-top:var(--s4);
  max-width:46rem;
}
.status-open{display:inline-flex; align-items:center; gap:.4rem; font-weight:600; color:var(--ok)}
.status-open::before{content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--ok)}

/* ---------- Breadcrumb -------------------------------------------------- */
.crumb{font-size:var(--t-xs); color:var(--ink-500); padding-block:var(--s3) 0}
.crumb ol{list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:.4rem}
.crumb li{max-width:none}
.crumb li+li::before{content:"/"; margin-right:.4rem; color:var(--ink-100)}
.crumb a{color:var(--ink-500)}

/* ---------- References -------------------------------------------------- */
.refs{border-top:2px solid var(--ink-100); margin-top:var(--s5); padding-top:var(--s3)}
.refs ol{font-size:var(--t-xs); color:var(--ink-500); line-height:1.7; padding-left:1.2rem}
.refs li{max-width:46rem}
sup.cite a{color:var(--ochre-700); font-weight:600; text-decoration:none; padding-inline:.1em}

/* ---------- Footer ------------------------------------------------------ */
.site-foot{background:var(--ink-900); color:var(--ink-300); padding-block:var(--s5) var(--s6); margin-top:var(--s6)}
.site-foot a{color:#fff}
/* Phone links are the most-tapped thing in the footer on mobile. Stacked on
   separate lines they were 16px tall — below the WCAG 2.2 SC 2.5.8 minimum of
   24×24 and genuinely fiddly to hit. */
.site-foot a[href^="tel:"]{display:inline-block; padding-block:.3rem; min-height:24px}
.site-foot h2,.site-foot h3{color:#fff}
.foot-grid{display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.foot-grid h3{font-family:"Anek",sans-serif; font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--ochre-400); font-weight:600; margin-bottom:var(--s2)}
.foot-grid ul{list-style:none; padding:0; display:grid; gap:.45rem; font-size:var(--t-sm)}
.foot-grid li{max-width:none}
.foot-grid p{font-size:var(--t-sm); max-width:none}
.colophon{
  border-top:1px solid color-mix(in oklab,#fff 12%,transparent);
  margin-top:var(--s5); padding-top:var(--s3); font-size:var(--t-xs); color:var(--ink-300);
}
.colophon p{max-width:none}
.colophon p+p{margin-top:.4rem}

/* ---------- Sticky mobile action bar ------------------------------------ */
/* Two actions maximum. 48px targets. Respects the home-indicator inset.
   Must not obscure focused elements — WCAG 2.2 SC 2.4.11. */
.callbar{
  position:fixed; inset-inline:0; bottom:0; z-index:40;
  display:none; gap:1px; background:color-mix(in oklab,var(--ink-900) 22%,transparent);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -2px 12px color-mix(in oklab,var(--ink-900) 14%,transparent);
}
.callbar a{
  flex:1; display:flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:52px; font-weight:600; font-size:var(--t-base); text-decoration:none;
}
.callbar .call{background:var(--ink-900); color:#fff}
.callbar .wa{background:var(--ochre-600); color:#fff}
@media(max-width:52rem){
  .callbar{display:flex}
  body{padding-bottom:calc(52px + env(safe-area-inset-bottom))}
}

/* ---------- Utilities --------------------------------------------------- */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.stack-1>*+*{margin-top:var(--s1)}
.stack-2>*+*{margin-top:var(--s2)}
.stack-3>*+*{margin-top:var(--s3)}
.stack-4>*+*{margin-top:var(--s4)}
.muted{color:var(--ink-500)}
.small{font-size:var(--t-sm)}
.mt-4{margin-top:var(--s4)}
.center{text-align:center}

/* ---------- Motion ------------------------------------------------------ */
/* Scroll-driven reveal. Not Baseline (Firefox has not shipped it), so it is
   gated twice and the default state is the FINAL state — non-supporting
   browsers see finished content, never a blank page. */
@media(prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .reveal{
      animation:rise linear both;
      animation-timeline:view();
      animation-range:entry 5% cover 22%;
    }
    /* Transform only — deliberately NOT opacity. Fading text in on scroll
       means that for part of the scroll it sits below AA contrast, and if the
       animation never completes (bot render at scroll 0, print, an element
       taller than the viewport) it can stay there. Measured: fading this block
       gave 1.53:1 against paper. Motion is worth having; illegible body text
       is not. */
    @keyframes rise{
      from{transform:translateY(14px)}
      to{transform:none}
    }
  }
}

@media print{
  .callbar,.masthead,.nav{display:none}
  body{background:#fff; color:#000}
}