/* ============================================================
   ARSOUM — the writing and the glossary
   ------------------------------------------------------------
   One stylesheet, worn by every generated page under /blog and
   /glossary. index.html keeps its single-file arrangement; these
   pages cannot, because there will eventually be two hundred of
   them and two hundred inline copies of this would drift apart
   within a month.

   The tokens below are the same tokens as the main page. They are
   repeated rather than imported so that a blog page is one CSS
   request, not two — but if a colour changes in
   src/styles/00-tokens-and-base.css it has to change here too.
   ============================================================ */

:root{
  --navy:        #1B3A5C;
  --navy-deep:   #14293F;
  --green:       #1F4438;
  --sandstone:   #D9C4A3;
  --linen:       #F4EFE6;
  --ivory:       #FBF8F2;
  --terracotta:  #B5562E;
  --amber:       #C8912F;
  --honey:       #E9CE99;
  --brown-deep:  #4A2112;
  --toffee:      #8E3F21;
  --spark:       #E8C170;
  --charcoal:    #2E2E2C;
  --ink-on-dark: #F4EFE6;
  --muted-dark:  rgba(244,239,230,.74);

  --serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  --r-xs:5px; --r-sm:7px; --r-md:12px; --r-lg:18px; --r-pill:999px;
  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1240px;
  --narrow: 720px;
  --header-h: 76px;

  --ease: cubic-bezier(.2,.7,.3,1);
}
html[data-lang="bn"]{
  --serif:"Noto Serif Bengali", Georgia, serif;
  --sans:"Noto Sans Bengali","Jost",Arial,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--ivory); color:var(--charcoal);
  font-family:var(--sans); font-weight:300; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

/* The bilingual switch, identical to the main page's, and carrying
   the same !important for the same reason: an ordinary component
   rule outranks .bn and would show both languages at once. */
.bn{ display:none !important; }
html[data-lang="bn"] .en{ display:none !important; }
html[data-lang="bn"] .bn{ display:revert !important; }

.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy); color:var(--ink-on-dark);
  padding:12px 20px; border-radius:0 0 var(--r-sm) 0; font-size:14px;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--terracotta); outline-offset:3px; border-radius:2px; }

.c-wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
.c-wrap-narrow{ max-width:calc(var(--narrow) + var(--gutter) * 2); }
[id]{ scroll-margin-top:calc(var(--header-h) + 20px); }


/* ============================================================
   HEADER
   Slimmer than the main page's. A reader who has arrived on an
   article wants the article, not the whole school in the way.
   ============================================================ */
.c-header{
  position:sticky; top:0; z-index:60;
  background:rgba(251,248,242,.88);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
          backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(27,58,92,.1);
}
.c-header-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);
  height:var(--header-h);
  display:flex; align-items:center; gap:clamp(16px,3vw,40px);
}
/* The mark is an outline, not a silhouette: the arch is stroked and
   only the keystone is filled. The stroke widths come from the markup
   itself, as they do on the main page, so the two can never be set to
   different numbers in two places.

   ARSOUM stays in Libre Baskerville in both language modes. It is a
   name, not a piece of copy, and it is not translated — so it must not
   pick up the Bengali serif with var(--serif). */
.c-lockup{ display:flex; align-items:center; gap:14px; margin-right:auto; }
.c-lockup svg{
  width:38px; height:auto; flex:0 0 auto; display:block; overflow:visible;
}
.c-lockup svg path{ fill:none; stroke:var(--navy); }
.c-lockup svg polygon{ fill:var(--navy); stroke:var(--navy); }

.c-lockup-type{ display:block; line-height:1; }
.c-lockup-name{
  font-family:"Libre Baskerville", Georgia, serif;
  font-size:19px; font-weight:700; letter-spacing:.15em; color:var(--navy);
  display:block; text-indent:.15em;
}
.c-lockup-desc{
  font-family:"Jost",Arial,sans-serif; font-size:8.5px; font-weight:500;
  letter-spacing:.3em; text-transform:uppercase;
  color:rgba(27,58,92,.55);
  display:block; margin-top:5px; text-indent:.3em;
  border-top:1px solid rgba(27,58,92,.16); padding-top:5px;
}
html[data-lang="bn"] .c-lockup-desc{ letter-spacing:.06em; text-transform:none; }

.c-nav{ display:flex; align-items:center; gap:clamp(14px,2vw,28px); }
.c-nav > a:not(.c-btn){
  font-size:13.5px; letter-spacing:.05em; color:var(--navy);
  padding-bottom:3px; border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
.c-nav > a:not(.c-btn):hover{ border-bottom-color:var(--terracotta); }

.c-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 21px; border-radius:var(--r-md);
  background:var(--navy); color:var(--ink-on-dark);
  font-size:13px; font-weight:400; letter-spacing:.06em;
  border:1px solid var(--navy); white-space:nowrap;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.c-btn:hover{ background:var(--navy-deep); transform:translateY(-1px); }
.c-btn-ghost{
  background:transparent; color:var(--navy);
  border-color:rgba(27,58,92,.34);
}
.c-btn-ghost:hover{ background:rgba(27,58,92,.06); color:var(--navy); }

.c-lang{
  display:inline-flex; padding:3px; border-radius:var(--r-pill);
  background:rgba(27,58,92,.07); flex:0 0 auto;
}
.c-lang button{
  padding:5px 13px; border-radius:var(--r-pill);
  font-size:12px; letter-spacing:.04em; color:rgba(27,58,92,.66);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.c-lang button[aria-pressed="true"]{ background:var(--ivory); color:var(--navy); }


/* ============================================================
   MASTHEAD — the top of an index page
   ============================================================ */
.c-masthead{
  background:var(--linen);
  padding:clamp(52px,7vw,94px) 0 clamp(40px,5vw,62px);
  border-bottom:1px solid rgba(27,58,92,.08);
}
.c-eyebrow{
  margin:0 0 18px;
  font-size:11.5px; font-weight:500; letter-spacing:.24em;
  text-transform:uppercase; color:var(--terracotta);
}
html[data-lang="bn"] .c-eyebrow{ letter-spacing:.06em; text-transform:none; font-size:13.5px; }

.c-title{
  margin:0; max-width:17ch;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(32px,5.2vw,62px); line-height:1.1; letter-spacing:-.02em;
  color:var(--navy); text-wrap:balance;
}
html[data-lang="bn"] .c-title{ font-size:clamp(27px,4.2vw,48px); line-height:1.36; letter-spacing:0; }

.c-standfirst{
  margin:clamp(20px,2.4vw,30px) 0 0; max-width:62ch;
  font-size:clamp(15.5px,1.4vw,18px); line-height:1.72;
  color:rgba(46,46,44,.78); text-wrap:pretty;
}
html[data-lang="bn"] .c-standfirst{ line-height:1.92; }


/* ============================================================
   THE FILTER BAR
   Client-side, because five posts and eventually a hundred is
   still a small enough number that a round trip to a server for
   a category would be slower than doing it here. The chips are
   real buttons, so the keyboard reaches them.
   ============================================================ */
.c-filter{
  position:sticky; top:var(--header-h); z-index:50;
  background:rgba(251,248,242,.94);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
          backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(27,58,92,.1);
  padding:15px 0;
}
.filter-bar{
  display:flex; gap:9px; flex-wrap:wrap; align-items:center;
}
.filter-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 15px; border-radius:var(--r-pill);
  border:1px solid rgba(27,58,92,.18);
  font-size:13px; letter-spacing:.03em; color:rgba(27,58,92,.78);
  background:transparent; white-space:nowrap;
  transition:background .28s var(--ease), color .28s var(--ease),
             border-color .28s var(--ease);
}
.filter-chip:hover{ border-color:rgba(27,58,92,.42); background:rgba(27,58,92,.04); }
.filter-chip.is-on{
  background:var(--navy); border-color:var(--navy); color:var(--ink-on-dark);
}
.filter-n{
  font-size:10.5px; font-variant-numeric:tabular-nums;
  padding:2px 6px; border-radius:var(--r-pill);
  background:rgba(27,58,92,.1); color:inherit; opacity:.8;
}
.filter-chip.is-on .filter-n{ background:rgba(244,239,230,.18); }

.filter-count{
  margin:12px 0 0; font-size:12.5px; letter-spacing:.04em;
  color:rgba(46,46,44,.52); min-height:1em;
}


/* ============================================================
   THE CARDS
   ------------------------------------------------------------
   The roll-over is horizontal on purpose: a wash in the pillar's
   own colour sweeps left to right across the cover, the arch
   drifts against it, and the arrow runs out to meet it. One
   gesture, one direction, and it reads as the page turning
   rather than as four unrelated things animating at once.

   Everything moved is transform or opacity, so nothing reflows
   and nothing costs a frame. Reduced motion gets the colour
   change and none of the travel.
   ============================================================ */
.c-cards{ padding:clamp(44px,5.6vw,80px) 0 clamp(64px,8vw,116px); }

.card-grid{
  display:grid; gap:clamp(20px,2.4vw,34px);
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
}

.post-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--ivory); border-radius:var(--r-lg); overflow:hidden;
  border:1px solid rgba(27,58,92,.12);
  box-shadow:0 1px 2px rgba(20,41,63,.04);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease),
             border-color .5s var(--ease);
}
.post-card:hover,
.post-card:focus-visible{
  transform:translateY(-5px);
  border-color:rgba(27,58,92,.2);
  box-shadow:0 20px 44px -16px rgba(20,41,63,.24),
             0 3px 10px rgba(20,41,63,.06);
}

.post-card-cover{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:8 / 5; background:var(--linen);
}
.cover-art{ width:100%; height:100%; display:block; }

/* the arch drifts right, a little further than the wash */
.post-card-cover .cover-art > g{
  transition:transform .85s var(--ease);
}
.post-card:hover .cover-art > g{ transform:translateX(16px) scale(1.035); }

/* the horizontal wash — a sheet of the pillar's own ink that
   runs across the cover from the left edge */
.post-card-cover::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,
    rgba(27,58,92,.34) 0%, rgba(27,58,92,.14) 46%, rgba(27,58,92,0) 78%);
  transform:translateX(-101%);
  transition:transform .8s var(--ease);
  pointer-events:none;
}
.post-card:hover .post-card-cover::after{ transform:translateX(0); }

.post-card-pillar{
  position:absolute; left:16px; top:16px; z-index:2;
  display:inline-block; padding:6px 13px; border-radius:var(--r-pill);
  background:rgba(251,248,242,.93);
  font-size:10.5px; font-weight:500; letter-spacing:.17em;
  text-transform:uppercase; color:var(--ink, var(--navy));
  box-shadow:0 1px 5px rgba(20,41,63,.1);
  transition:transform .6s var(--ease);
}
html[data-lang="bn"] .post-card-pillar{
  letter-spacing:.04em; text-transform:none; font-size:12.5px;
}
.post-card-pillar.on-dark{ background:rgba(20,41,63,.82); color:var(--spark); }
.post-card:hover .post-card-pillar{ transform:translateX(5px); }

.post-card-body{
  display:flex; flex-direction:column; flex:1;
  padding:clamp(20px,2vw,27px) clamp(20px,2vw,27px) clamp(18px,1.8vw,24px);
}
.post-card-date{
  font-size:11px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(46,46,44,.46); margin-bottom:12px;
}
html[data-lang="bn"] .post-card-date{ letter-spacing:.04em; text-transform:none; font-size:12.5px; }

.post-card-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(18px,1.55vw,21.5px); line-height:1.3; letter-spacing:-.012em;
  color:var(--navy); text-wrap:pretty; margin-bottom:11px;
}
html[data-lang="bn"] .post-card-title{ font-size:clamp(17px,1.4vw,20px); line-height:1.5; letter-spacing:0; }

.post-card-standfirst{
  font-size:14.5px; line-height:1.68; color:rgba(46,46,44,.72);
  text-wrap:pretty; margin-bottom:20px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
html[data-lang="bn"] .post-card-standfirst{ font-size:15px; line-height:1.84; }

.post-card-more{
  margin-top:auto; display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--terracotta);
}
html[data-lang="bn"] .post-card-more{ letter-spacing:.04em; text-transform:none; font-size:13.5px; }
.post-card-more svg{ width:22px; height:11px; overflow:visible;
  transition:transform .55s var(--ease); }
.post-card:hover .post-card-more svg{ transform:translateX(7px); }

/* The glossary card is the one object on the wall that is not an
   article, so it is given the navy ground and left there — a
   parent should be able to see at a glance that it behaves
   differently before they click it. */
.post-card.is-glossary{ border-color:rgba(20,41,63,.3); }
.post-card.is-glossary .post-card-cover::after{
  background:linear-gradient(90deg,
    rgba(232,193,112,.22) 0%, rgba(232,193,112,.08) 50%, rgba(232,193,112,0) 80%);
}

.card-empty, .az-empty{
  margin:clamp(30px,4vw,54px) auto; text-align:center;
  font-size:15.5px; color:rgba(46,46,44,.6);
}

@media (prefers-reduced-motion: reduce){
  .post-card,
  .post-card-cover::after,
  .post-card .cover-art > g,
  .post-card-pillar,
  .post-card-more svg{ transition:none !important; transform:none !important; }
  .post-card:hover{ transform:none; }
  .post-card:hover .post-card-cover::after{ transform:translateX(0); }
}


/* ============================================================
   THE ARTICLE
   ============================================================ */
.crumbs{ padding:20px 0 0; }
.crumbs .c-wrap{ display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  font-size:12px; letter-spacing:.08em; color:rgba(46,46,44,.5); }
.crumbs a{ color:rgba(27,58,92,.72); border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease); }
.crumbs a:hover{ border-bottom-color:var(--terracotta); }
.crumbs-now{ color:rgba(46,46,44,.44); }

.post-head{ padding:clamp(26px,3.4vw,44px) 0 clamp(22px,2.6vw,34px); }
.post-kicker{
  margin:0 0 16px; font-size:11.5px; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink, var(--terracotta));
}
html[data-lang="bn"] .post-kicker{ letter-spacing:.05em; text-transform:none; font-size:13.5px; }

.post-title{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(30px,4.3vw,50px); line-height:1.14; letter-spacing:-.021em;
  color:var(--navy); text-wrap:balance;
}
html[data-lang="bn"] .post-title{ font-size:clamp(26px,3.6vw,41px); line-height:1.38; letter-spacing:0; }

.post-meta{
  margin:clamp(18px,2vw,26px) 0 0;
  display:flex; gap:11px; align-items:center; flex-wrap:wrap;
  font-size:12px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(46,46,44,.5);
}
html[data-lang="bn"] .post-meta{ letter-spacing:.04em; text-transform:none; font-size:13.5px; }

.post-cover{ padding:0 0 clamp(30px,4vw,52px); }
.post-cover .cover-art{
  width:100%; height:auto; aspect-ratio:21 / 8;
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid rgba(27,58,92,.1);
}

.post-body-wrap{ padding-bottom:clamp(56px,7vw,100px); }

/* The two-line Bengali summary that opens every post. It is the
   cheapest thing on this site that the chains cannot copy, so it
   is given a real object rather than an italic line — and it is
   shown in both language modes deliberately, because a Bengali
   reader arriving at an English post is exactly who it is for. */
.post-bn{
  margin:0 0 clamp(32px,4vw,48px);
  padding:clamp(20px,2.2vw,28px) clamp(22px,2.4vw,32px);
  background:var(--linen); border-radius:var(--r-md);
  border-left:3px solid var(--terracotta);
}
.post-bn-h{
  margin:0 0 9px; font-family:"Noto Sans Bengali",Arial,sans-serif;
  font-size:12px; letter-spacing:.06em; color:var(--toffee);
}
.post-bn p:last-child{
  margin:0; font-family:"Noto Serif Bengali",Georgia,serif;
  font-size:16px; line-height:1.92; color:rgba(27,58,92,.9);
  text-wrap:pretty;
}

/* ---------- the prose ---------- */
.prose{ font-size:17.5px; line-height:1.82; color:rgba(46,46,44,.9); }
html[data-lang="bn"] .prose{ line-height:1.98; }

.prose > p{ margin:0 0 1.35em; text-wrap:pretty; }
.prose > p:last-child{ margin-bottom:0; }

/* The opening paragraph carries a little more weight, so the eye
   has somewhere to land after the title. No drop cap — a drop cap
   in Bengali is a different typographic problem and this page has
   to work in both. */
.prose > p:first-child{
  font-size:19.5px; line-height:1.74; color:rgba(46,46,44,.96);
}

.prose h2{
  margin:clamp(40px,4.4vw,62px) 0 .7em;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(22px,2.2vw,29px); line-height:1.26; letter-spacing:-.014em;
  color:var(--navy); text-wrap:balance;
}
html[data-lang="bn"] .prose h2{ font-size:clamp(20px,1.9vw,26px); line-height:1.5; letter-spacing:0; }

/* A hairline above every heading, so a long read has visible
   joints when it is scrolled past quickly. */
.prose h2::before{
  content:""; display:block; width:46px; height:2px;
  background:var(--terracotta); opacity:.8;
  margin-bottom:clamp(16px,1.6vw,22px);
}

.prose h3{
  margin:clamp(30px,3vw,40px) 0 .6em;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(18px,1.5vw,21px); line-height:1.34; color:var(--navy);
}

.prose ul{ margin:0 0 1.35em; padding-left:0; list-style:none; }
.prose li{
  position:relative; padding-left:26px; margin-bottom:.7em; text-wrap:pretty;
}
.prose li::before{
  content:""; position:absolute; left:4px; top:.72em;
  width:7px; height:7px; border-radius:50%;
  background:var(--terracotta); opacity:.62;
}
.prose ol{ margin:0 0 1.35em; padding-left:22px; }
.prose ol li{ padding-left:6px; }
.prose ol li::before{ content:none; }
.prose ol li::marker{ color:var(--terracotta); font-weight:500; }

/* A pull quote is the writer raising their voice once. It is set
   large, on nothing, with the arch's own rule beside it. */
.prose blockquote{
  margin:clamp(34px,3.8vw,52px) 0;
  padding-left:clamp(22px,2.6vw,34px);
  border-left:2px solid var(--terracotta);
}
.prose blockquote p{
  margin:0; font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(19px,1.9vw,25px); line-height:1.5; letter-spacing:-.01em;
  color:var(--navy); text-wrap:pretty;
}
html[data-lang="bn"] .prose blockquote p{
  font-style:normal; font-size:clamp(18px,1.7vw,22px); line-height:1.7;
}

.prose strong{ font-weight:500; color:var(--charcoal); }
.prose em{ font-style:italic; }

.prose a{
  color:var(--navy); border-bottom:1px solid rgba(181,86,46,.5);
  transition:border-color .28s var(--ease), background .28s var(--ease);
}
.prose a:hover{ border-bottom-color:var(--terracotta); background:rgba(181,86,46,.07); }

/* A link into the glossary looks different from a link out of the
   site, because it promises something different: a sixty-word
   definition and a way straight back. */
.prose a.g-link{
  color:var(--toffee); font-weight:400;
  border-bottom:1px dotted rgba(142,63,33,.62);
  padding:0 2px; margin:0 -2px; border-radius:3px;
}
.prose a.g-link:hover{ background:rgba(142,63,33,.09); border-bottom-style:solid; }


/* ---------- terms used in this post ---------- */
.post-terms{
  margin:clamp(44px,5vw,66px) 0 0;
  padding:clamp(22px,2.4vw,30px) clamp(24px,2.6vw,34px);
  background:var(--linen); border-radius:var(--r-md);
}
.post-terms-h, .term-block-h{
  margin:0 0 16px; font-size:11.5px; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--toffee);
}
html[data-lang="bn"] .post-terms-h,
html[data-lang="bn"] .term-block-h{ letter-spacing:.05em; text-transform:none; font-size:13.5px; }

.post-terms ul, .term-links{ margin:0; padding:0; list-style:none; }
.post-terms li{ border-top:1px solid rgba(27,58,92,.12); }
.post-terms li:first-child{ border-top:0; }
.post-terms li a{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:11px 0; transition:padding-left .3s var(--ease);
}
.post-terms li a:hover{ padding-left:7px; }
.t-term{
  font-family:var(--serif); font-size:16px; color:var(--navy); line-height:1.35;
}
.t-bn{ font-family:"Noto Sans Bengali",Arial,sans-serif;
  font-size:13.5px; color:rgba(46,46,44,.56); }
.t-gloss{ font-size:14px; line-height:1.6; color:rgba(46,46,44,.66);
  flex:1 1 100%; text-wrap:pretty; }


/* ---------- the block that closes every page ---------- */
.post-cta{
  margin:clamp(48px,5.6vw,76px) 0 0;
  padding:clamp(30px,3.4vw,44px) clamp(26px,3vw,42px);
  border-radius:var(--r-lg); background:var(--navy);
  color:var(--ink-on-dark); position:relative; overflow:hidden;
}
/* the mark's own arch, very quietly, behind the text */
.post-cta::before{
  content:""; position:absolute; right:-40px; bottom:-72px;
  width:280px; height:280px; pointer-events:none;
  background:var(--spark); opacity:.085;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 122'%3E%3Cpath d='M 10 114 A 90 90 0 0 1 190 114 L 162 114 A 62 62 0 0 0 38 114 Z' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 122'%3E%3Cpath d='M 10 114 A 90 90 0 0 1 190 114 L 162 114 A 62 62 0 0 0 38 114 Z' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
}
.post-cta > *{ position:relative; z-index:1; }
.post-cta-h{
  margin:0 0 12px; font-family:var(--serif); font-weight:400;
  font-size:clamp(21px,2.1vw,28px); line-height:1.26; color:var(--ink-on-dark);
}
.post-cta-p{
  margin:0 0 clamp(22px,2.4vw,30px); max-width:52ch;
  font-size:15.5px; line-height:1.74; color:var(--muted-dark); text-wrap:pretty;
}
.post-cta-row{ margin:0; display:flex; gap:12px; flex-wrap:wrap; }
.post-cta .c-btn{
  background:var(--spark); border-color:var(--spark); color:var(--navy-deep);
  font-weight:500;
}
.post-cta .c-btn:hover{ background:var(--honey); border-color:var(--honey); }
.post-cta .c-btn-ghost{
  background:transparent; color:var(--ink-on-dark);
  border-color:rgba(244,239,230,.4);
}
.post-cta .c-btn-ghost:hover{ background:rgba(244,239,230,.1); color:var(--ink-on-dark); }


/* ---------- read next ---------- */
.post-related{
  background:var(--linen); border-top:1px solid rgba(27,58,92,.09);
  padding:clamp(46px,5.6vw,80px) 0 clamp(56px,6.6vw,96px);
}
.post-related-h{
  margin:0 0 clamp(24px,2.8vw,36px);
  font-size:11.5px; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--terracotta);
}
html[data-lang="bn"] .post-related-h{ letter-spacing:.05em; text-transform:none; font-size:13.5px; }
.post-related .post-card{ background:var(--ivory); }


/* ============================================================
   THE GLOSSARY A–Z
   ------------------------------------------------------------
   A hundred terms is too many to scroll and too few to paginate,
   so the page carries two ways in: the letter rail, and a search
   that filters as you type. Both are conveniences over a list
   that is already complete and already in the page — nothing is
   hidden behind JavaScript, so the whole A–Z is indexable and
   readable with scripting off.
   ============================================================ */
.az-rail-wrap .c-wrap{
  display:flex; align-items:center; gap:clamp(14px,2vw,28px); flex-wrap:wrap;
}
.az-rail{ display:flex; gap:2px; flex-wrap:wrap; margin-right:auto; }
.az-key{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:28px; height:28px; padding:0 5px; border-radius:var(--r-sm);
  font-family:var(--serif); font-size:14px; color:var(--navy);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.az-key:hover{ background:var(--navy); color:var(--ink-on-dark); }
.az-key.is-off{ color:rgba(46,46,44,.2); pointer-events:none; }

.az-search{
  position:relative; display:inline-flex; align-items:center;
  flex:0 1 240px;
}
.az-search svg{
  position:absolute; left:12px; width:16px; height:16px;
  color:rgba(27,58,92,.42); pointer-events:none;
}
.az-search input{
  width:100%; padding:9px 14px 9px 36px;
  border:1px solid rgba(27,58,92,.2); border-radius:var(--r-pill);
  background:var(--ivory); font-family:var(--sans); font-size:14px;
  color:var(--charcoal);
  transition:border-color .25s var(--ease);
}
.az-search input:focus{ outline:none; border-color:var(--terracotta); }
.az-search input::placeholder{ color:rgba(46,46,44,.42); }

.az-wrap{ padding-top:clamp(36px,4.4vw,60px); }
.az-block{ margin-bottom:clamp(38px,4.4vw,62px); }
.az-block[hidden]{ display:none; }

.az-letter{
  margin:0 0 clamp(14px,1.6vw,22px);
  padding-bottom:12px; border-bottom:1px solid rgba(27,58,92,.16);
  font-family:var(--serif); font-weight:400; font-size:clamp(26px,3vw,40px);
  line-height:1; color:var(--terracotta); opacity:.9;
}

.az-list{ margin:0; padding:0; list-style:none;
  display:grid; gap:0; grid-template-columns:repeat(auto-fill, minmax(340px,1fr)); }
.az-list li[hidden]{ display:none; }

.az-term{
  display:block; padding:16px 18px 16px 0;
  border-top:1px solid rgba(27,58,92,.1);
  position:relative;
  transition:padding-left .35s var(--ease), background .35s var(--ease);
}
.az-term::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--terracotta);
  transform:scaleY(0); transform-origin:top;
  transition:transform .35s var(--ease);
}
.az-term:hover{ padding-left:16px; background:rgba(244,239,230,.62); }
.az-term:hover::after{ transform:scaleY(1); }

.az-term-en{
  display:block; font-family:var(--serif); font-size:17px; line-height:1.34;
  color:var(--navy); text-wrap:pretty;
}
.az-term-bn{
  display:block; margin-top:4px;
  font-family:"Noto Sans Bengali",Arial,sans-serif; font-size:13.5px;
  color:rgba(142,63,33,.82);
}
.az-term-gloss{
  display:block; margin-top:7px; font-size:14px; line-height:1.62;
  color:rgba(46,46,44,.66); text-wrap:pretty;
}

@media (prefers-reduced-motion: reduce){
  .az-term, .az-term::after, .post-terms li a{ transition:none; }
}


/* ============================================================
   A SINGLE TERM
   ============================================================ */
.term-head{
  position:relative; padding:clamp(26px,3.4vw,46px) 0 clamp(20px,2.4vw,32px);
}
/* The letter, set enormous and nearly invisible behind the term —
   the one place on these pages where the alphabet is allowed to
   be decorative, because that is what an A–Z is. */
.term-letter{
  position:absolute; left:var(--gutter); top:-8px; margin:0;
  font-family:var(--serif); font-size:clamp(130px,17vw,220px); line-height:1;
  color:var(--navy); opacity:.055; pointer-events:none; user-select:none;
}
.term-head .c-wrap{ position:relative; }
.term-title{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(30px,4.2vw,48px); line-height:1.14; letter-spacing:-.02em;
  color:var(--navy); text-wrap:balance; position:relative;
}
.term-bn{
  margin:14px 0 0; position:relative;
  font-family:"Noto Serif Bengali",Georgia,serif; font-size:clamp(17px,1.7vw,21px);
  color:var(--toffee);
}

.term-prose > p:first-child{ font-size:19.5px; }

.term-blocks{
  display:grid; gap:clamp(18px,2vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin-top:clamp(40px,4.6vw,62px);
}
.term-block{
  padding:clamp(20px,2.2vw,28px) clamp(22px,2.4vw,30px);
  background:var(--linen); border-radius:var(--r-md);
}
.term-links li{ border-top:1px solid rgba(27,58,92,.12); }
.term-links li:first-child{ border-top:0; }
.term-links li a{
  display:block; padding:12px 0;
  transition:padding-left .3s var(--ease);
}
.term-links li a:hover{ padding-left:7px; }
.term-links .t-gloss{ display:block; margin-top:4px; }

.term-steps{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  margin-top:clamp(40px,4.6vw,60px);
}
.step{
  display:block; padding:18px 20px; border-radius:var(--r-md);
  border:1px solid rgba(27,58,92,.14);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.step:hover{ border-color:rgba(27,58,92,.32); background:var(--linen); }
.step.is-off{ border:0; }
.step-next{ text-align:right; }
.step-l{
  display:block; font-size:10.5px; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--terracotta); margin-bottom:7px;
}
html[data-lang="bn"] .step-l{ letter-spacing:.05em; text-transform:none; font-size:12.5px; }
.step-t{
  display:block; font-family:var(--serif); font-size:16px; line-height:1.34;
  color:var(--navy); text-wrap:pretty;
}


/* ============================================================
   FOOTER
   ============================================================ */
.c-footer{
  background:var(--navy-deep); color:var(--ink-on-dark);
  padding:clamp(52px,6.4vw,88px) 0 clamp(26px,3vw,38px);
}
.c-foot-grid{
  display:grid; gap:clamp(30px,4vw,60px);
  grid-template-columns:1.5fr 1fr 1fr;
  padding-bottom:clamp(34px,4vw,54px);
  border-bottom:1px solid rgba(244,239,230,.14);
}
/* Same mark as the header and as the main page's footer: stroked
   arch, filled keystone, in linen on the navy. It was filled solid in
   amber here, which turned the arch into a slab and put a colour on it
   that the school's own footer does not use. */
.c-foot-lockup{ display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.c-foot-lockup svg{ width:40px; height:auto; overflow:visible; }
.c-foot-lockup path{ fill:none; stroke:var(--linen); stroke-width:9; }
.c-foot-lockup polygon{ fill:var(--linen); stroke:var(--linen); stroke-width:9; }

.c-foot-lockup > span{ display:block; line-height:1; }
.c-foot-name{
  font-family:"Libre Baskerville", Georgia, serif;
  font-size:19px; font-weight:700; letter-spacing:.15em;
  color:var(--ink-on-dark); display:block; text-indent:.15em;
}
.c-foot-desc{
  font-family:"Jost",Arial,sans-serif; font-size:8.5px; font-weight:500;
  letter-spacing:.3em; text-transform:uppercase;
  color:rgba(244,239,230,.6); display:block; margin-top:5px; text-indent:.3em;
}
html[data-lang="bn"] .c-foot-desc{ letter-spacing:.06em; text-transform:none; }
html[data-lang="bn"] .c-foot-desc{ letter-spacing:.06em; text-transform:none; }

.c-foot-address{
  margin:0; font-size:14.5px; line-height:1.82; color:var(--muted-dark);
}
.c-foot-address a{
  border-bottom:1px solid rgba(232,193,112,.42);
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.c-foot-address a:hover{ color:var(--spark); border-bottom-color:var(--spark); }

.c-foot-h{
  margin:0 0 15px; font-size:10.5px; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--spark);
}
html[data-lang="bn"] .c-foot-h{ letter-spacing:.05em; text-transform:none; font-size:13px; }
.c-foot-nav{ margin:0; padding:0; list-style:none; }
.c-foot-nav li{ margin-bottom:10px; }
.c-foot-nav a{
  font-size:14.5px; color:var(--muted-dark);
  border-bottom:1px solid transparent;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.c-foot-nav a:hover{ color:var(--ink-on-dark); border-bottom-color:var(--spark); }

.c-foot-bottom{
  padding-top:clamp(20px,2.4vw,30px);
  display:flex; gap:18px; flex-wrap:wrap; justify-content:space-between;
  font-size:12.5px; color:rgba(244,239,230,.55);
}


/* ============================================================
   BREAKPOINTS
   Loaded last, as on the main page, so nothing has to fight a
   later rule to win.
   ============================================================ */
@media (max-width: 900px){
  .c-foot-grid{ grid-template-columns:1fr 1fr; }
  .c-foot-grid > :first-child{ grid-column:1 / -1; }
  .post-cover .cover-art{ aspect-ratio:16 / 9; }
}

@media (max-width: 760px){
  :root{ --header-h:64px; }
  .c-lockup-desc{ display:none; }
  .c-nav > a:not(.c-btn){ display:none; }
  .c-lang{ display:none; }
  .c-header-inner{ gap:14px; }

  .card-grid{ grid-template-columns:1fr; }
  .az-list{ grid-template-columns:1fr; }

  /* The filter bar becomes one horizontally scrolling row rather
     than four wrapped lines of chips eating the first screen. */
  .c-filter{ padding:11px 0; }
  .filter-bar{
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    -ms-overflow-style:none;
    margin:0 calc(var(--gutter) * -1); padding:0 var(--gutter);
    scroll-snap-type:x proximity;
  }
  .filter-bar::-webkit-scrollbar{ display:none; }
  .filter-chip{ scroll-snap-align:start; }
  .filter-count{ display:none; }

  .az-rail-wrap .c-wrap{ flex-direction:column; align-items:stretch; }
  .az-search{ flex:1 1 auto; }

  .prose{ font-size:16.5px; }
  .prose > p:first-child, .term-prose > p:first-child{ font-size:18px; }
  .term-steps{ grid-template-columns:1fr; }
  .step-next{ text-align:left; }
  .c-foot-grid{ grid-template-columns:1fr; }
  .c-foot-bottom{ flex-direction:column; gap:8px; }
}

@media (max-width: 420px){
  .post-cta-row{ flex-direction:column; align-items:stretch; }
  .post-cta-row .c-btn{ width:100%; }
}

@media print{
  .c-header, .c-filter, .post-cta, .post-related, .term-steps, .skip{ display:none; }
  body{ background:#fff; }
  .prose{ font-size:11pt; }
}