/* ==========================================================================
   HAFEZ TARIQUL ISLAM — Personal Portfolio
   Midnight navy · terracotta sand · cream. Editorial serif display,
   hairline rules, offset frames.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Night */
  --night:    #231E18;
  --night-2:  #17120E;
  --slate:    #3C3229;

  /* Warm accent */
  --sand:      #DC9A63;
  --sand-2:    #C8854E;
  --sand-soft: #F0D2B6;

  /* Paper */
  --cream:    #FBF7F1;
  --cream-2:  #F2EADF;
  --cream-3:  #E7DBCB;
  --white:    #FFFFFF;

  /* Text */
  --ink:      #241F1A;
  --body:     #56493F;
  --muted:    #8C8077;
  --on-night: #EFEAE2;
  --on-night-2: #B5A89B;

  /* Rules */
  --line:      rgba(36, 31, 26, .14);
  --line-2:    rgba(36, 31, 26, .26);
  --line-night:rgba(239, 234, 226, .17);

  /* Type */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-calligraphy: 'Amiri', serif;
  --display-weight: 500;
  --display-track: -.02em;

  /* Opaque card fills for the dark bands — a translucent overlay let the
     texture read through the cards and muddied them. */
  --panel-light:      #FFFFFF;
  --panel-light-alt:  #EFE7DC;
  --panel-light-hover:#EDE2D3;
  --sand-wash:        #F7E7D6;
  --strip:            #322B23;
  --card-night:       #2E2924;
  --card-night-hover: #3A342C;
  --card-mid:         #473C33;
  --card-mid-hover:   #52473C;

  /* Geometric texture — one tile, laid at 5% over every band */
  --pattern-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23FBF7F1' stroke-width='1.2'%3E%3Cpath d='M40 3 51 14 66 14 66 29 77 40 66 51 66 66 51 66 40 77 29 66 14 66 14 51 3 40 14 29 14 14 29 14Z'/%3E%3Crect x='22' y='22' width='36' height='36' transform='rotate(45 40 40)'/%3E%3Ccircle cx='40' cy='40' r='9'/%3E%3C/g%3E%3C/svg%3E");
  --pattern-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23231E18' stroke-width='1.2'%3E%3Cpath d='M40 3 51 14 66 14 66 29 77 40 66 51 66 66 51 66 40 77 29 66 14 66 14 51 3 40 14 29 14 14 29 14Z'/%3E%3Crect x='22' y='22' width='36' height='36' transform='rotate(45 40 40)'/%3E%3Ccircle cx='40' cy='40' r='9'/%3E%3C/g%3E%3C/svg%3E");

  /* Metrics */
  --maxw:   1240px;
  --gutter: clamp(22px, 5vw, 64px);
  --sec-y:  clamp(76px, 10vw, 136px);
  --radius: 6px;
  --radius-lg: 10px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Fraunces has no Bengali or Arabic; each script gets its own pairing. */
html[data-lang="bn"] {
  --font-display: 'Hind Siliguri', sans-serif;
  --font: 'Hind Siliguri', sans-serif;
  --display-weight: 600;
  --display-track: 0;
}
html[data-lang="ar"] {
  --font-display: 'Reem Kufi', sans-serif;
  --font: 'IBM Plex Sans Arabic', sans-serif;
  --display-weight: 600;
  --display-track: 0;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 94px; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--body);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.74;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video, iframe { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  line-height: 1.1;
  color: var(--ink);
  font-optical-sizing: auto;
}
html[data-lang="bn"] h1, html[data-lang="bn"] h2, html[data-lang="bn"] h3,
html[data-lang="ar"] h1, html[data-lang="ar"] h2, html[data-lang="ar"] h3 { line-height: 1.4; }
html[data-lang="bn"] body, html[data-lang="ar"] body { line-height: 1.95; }
html[data-lang="ar"] { direction: rtl; }
html[data-lang="ar"] body { font-size: 17px; }

:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--sand); color: var(--night); }

/* ---------- 3. Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--sec-y); background: var(--cream); }
.section--alt  { background: var(--cream-2); }
.section--mid  { background: var(--slate); color: var(--on-night-2); }
.section--deep { background: var(--night); color: var(--on-night-2); }
.section--mid h2, .section--mid h3,
.section--deep h2, .section--deep h3 { color: var(--white); }
.subsection { margin-top: clamp(68px, 9.5vw, 120px); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; inset-inline-start: 50%; top: -64px; transform: translateX(-50%);
  background: var(--sand); color: var(--night); padding: 12px 24px; z-index: 200;
  font-weight: 600; border-radius: 0 0 var(--radius) var(--radius); transition: top .2s;
}
.skip-link:focus { top: 0; }

/* ---------- 3b. Geometric texture ---------- */
.hero, .section, .footer { position: relative; }
.hero::before,
.section::before,
.footer::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--pattern-dark);
  background-size: 80px 80px;
  opacity: .05;
}
.hero::before,
.section--deep::before,
.section--mid::before,
.footer::before { background-image: var(--pattern-light); }
/* Keep every band's own content above the texture. The hero's wrap is left
   unpositioned on purpose, so the absolutely positioned photo still resolves
   against .hero and can bleed past the wrap; its children carry z-index instead. */
.section > .wrap, .footer > .wrap { position: relative; z-index: 1; }

/* ---------- 4. Header ---------- */
.header {
  position: fixed; top: 0; inset-inline: 0; z-index: 100;
  background: var(--night); border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.header.is-stuck {
  border-bottom-color: var(--line-night);
  box-shadow: 0 2px 18px rgba(23, 18, 14, .3);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 82px; }

.brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.brand__mark { width: 30px; height: 30px; flex: none; }
.brand__mark path { stroke: var(--sand); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.brand__name {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: 16px; letter-spacing: .015em;
  color: var(--white); white-space: nowrap;
}
.brand__role {
  font-family: var(--font); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sand); font-weight: 600; white-space: nowrap;
}
html[data-lang="bn"] .brand__role, html[data-lang="ar"] .brand__role { text-transform: none; letter-spacing: .02em; font-size: 11.5px; }

.nav { display: flex; align-items: center; gap: 1px; flex: 1 1 auto; justify-content: flex-end; }
.nav__link {
  font-size: 13px; font-weight: 500; color: var(--on-night-2);
  padding: 8px 10px; white-space: nowrap; position: relative; transition: color .2s;
}
.nav__link::after {
  content: ''; position: absolute; inset-inline: 10px; bottom: 2px; height: 1px;
  background: var(--sand); transform: scaleX(0); transition: transform .28s var(--ease);
}
.nav__link:hover { color: var(--white); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--sand); }

.header__actions { display: flex; align-items: center; gap: 10px; }

.lang { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line-night); border-radius: var(--radius); }
.lang__btn {
  font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 3px;
  background: var(--card-night); color: var(--on-night-2); transition: background .2s, color .2s;
}
.lang__btn:hover { background: var(--card-night-hover); color: var(--sand); }
.lang__btn[aria-pressed="true"] { background: var(--sand); color: var(--night); }

.menu-btn {
  display: none; width: 42px; height: 42px; align-items: center; justify-content: center;
  background: var(--card-night); border: 1px solid var(--line-night); border-radius: var(--radius);
  transition: background .2s, border-color .2s;
}
.menu-btn:hover { background: var(--card-night-hover); border-color: var(--sand); }
.menu-btn span { display: block; width: 22px; height: 1.5px; background: var(--on-night); position: relative; transition: background .2s; }
.menu-btn span::before, .menu-btn span::after {
  content: ''; position: absolute; inset-inline-start: 0; width: 22px; height: 1.5px;
  background: var(--on-night); transition: transform .28s var(--ease), top .28s var(--ease);
}
.menu-btn span::before { top: -7px; }
.menu-btn span::after  { top: 7px; }
.menu-btn[aria-expanded="true"] span { background: transparent; }
.menu-btn[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* ---------- 5. Hero — full-bleed split with a credential strip ---------- */
.hero {
  position: relative; background: var(--night); color: var(--on-night-2);
  padding-block: clamp(84px, 7.5vw, 112px) 0;
  overflow: hidden;
}
.hero::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--sand), transparent 62%); z-index: 3;
}
.hero__inner {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  grid-template-rows: auto auto; column-gap: clamp(40px, 5vw, 76px);
}
.hero__head { grid-column: 1; grid-row: 1; position: relative; z-index: 2; }
.hero__body { grid-column: 1; grid-row: 2; position: relative; z-index: 2; }
.hero__body { padding-bottom: clamp(56px, 7vw, 92px); }

/* Photographs fill the trailing column and drift past on a loop. No frame:
   the rail is masked at both edges so pictures fade in and out of the band. */
.hero__media {
  grid-column: 2; grid-row: 1 / span 2; align-self: stretch;
  margin: 0; position: relative; z-index: 2; overflow: hidden;
  display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
/* Wide layout: the photograph is the right edge of the page. It breaks out of
   the centred wrap and runs to the viewport, so only its inner edge is
   feathered — that edge still has to melt into the column of text beside it.
   .hero clips its overflow, so an overshoot from a classic scrollbar is eaten. */
@media (min-width: 921px) {
  .hero__media {
    margin-inline-end: calc(-1 * ((100vw - min(100vw, var(--maxw))) / 2 + var(--gutter)));
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%);
            mask-image: linear-gradient(90deg, transparent, #000 14%);
  }
  /* Mirrored, the photograph sits on the left, so the feather changes sides. */
  html[dir="rtl"] .hero__media {
    -webkit-mask-image: linear-gradient(270deg, transparent, #000 14%);
            mask-image: linear-gradient(270deg, transparent, #000 14%);
  }
}

.hero__rail { position: absolute; inset: 0; }
/* Each photograph is stacked in the same box; only the current one is opaque.
   It drifts a little as it fades, so the change reads as a turn rather than a blink. */
.hero__shot {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  opacity: 0; transform: translateX(3%) scale(1.02);
  transition: opacity 1.1s var(--ease), transform 1.4s var(--ease);
}
html[dir="rtl"] .hero__shot { transform: translateX(-3%) scale(1.02); }
.hero__shot.is-on { opacity: 1; transform: none; z-index: 1; }
/* Until the script runs, the first photograph is simply there. */
.hero__rail:not(.is-live) .hero__shot:first-child { opacity: 1; transform: none; }

.hero__dots {
  position: absolute; z-index: 2; inset-inline: 0; bottom: 16px;
  display: flex; justify-content: center; gap: 8px;
}
.hero__dot {
  width: 28px; height: 3px; border-radius: 2px; padding: 0;
  background: rgba(239, 234, 226, .28); border: 0; cursor: pointer;
  transition: background .3s;
}
.hero__dot.is-on { background: var(--sand); }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--sand); margin-bottom: 12px;
}
.hero__eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--sand); }
html[data-lang="bn"] .hero__eyebrow, html[data-lang="ar"] .hero__eyebrow {
  text-transform: none; letter-spacing: .04em; font-size: 13.5px;
}
.hero__name {
  font-size: clamp(2.7rem, 7vw, 5.2rem); line-height: 1.02;
  color: var(--white); margin-bottom: 10px;
}
.hero__roles {
  font-size: clamp(.86rem, 1.5vw, .98rem); letter-spacing: .09em; text-transform: uppercase;
  color: var(--sand-soft); font-weight: 500;
  padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px solid var(--line-night);
}
html[data-lang="bn"] .hero__roles, html[data-lang="ar"] .hero__roles {
  text-transform: none; letter-spacing: .01em; font-size: 1.04rem;
}
.hero__lead { color: var(--on-night-2); font-size: 1rem; max-width: 58ch; }
.hero__lead + .hero__lead { margin-top: 14px; }
.hero__lead strong { color: var(--sand-soft); font-weight: 600; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 36px; }

/* Credential strip across the foot of the hero */
.hero__strip {
  position: relative; z-index: 2; background: var(--strip);
  border-block: 1px solid var(--line-night);
}
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-row .stat { padding-block: clamp(22px, 2.6vw, 32px); padding-inline: 0 22px; background: none; }
.stat-row .stat + .stat { border-inline-start: 1px solid var(--line-night); padding-inline-start: 22px; }
.stat-row .stat b { color: var(--sand); }
.stat-row .stat span { color: var(--on-night-2); }


/* ---------- 6. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 24px; border-radius: var(--radius);
  font-family: var(--font); font-size: 14px; font-weight: 600;
  border: 1px solid transparent; transition: background .22s, border-color .22s, color .22s;
  white-space: nowrap;
}
.btn svg { width: 15px; height: 15px; flex: none; }
html[data-lang="ar"] .btn svg { transform: scaleX(-1); }
.btn--solid { background: var(--sand); color: var(--night); }
.btn--solid:hover { background: var(--sand-soft); }
.btn--line { background: var(--card-night); border-color: var(--line-night); color: var(--on-night); }
.btn--line:hover { background: var(--card-night-hover); border-color: var(--sand); color: var(--sand); }
.btn--spaced { margin-top: 32px; }
.section:not(.section--deep):not(.section--mid) .btn--solid { background: var(--night); color: var(--on-night); }
.section:not(.section--deep):not(.section--mid) .btn--solid:hover { background: var(--slate); }
.section:not(.section--deep):not(.section--mid) .btn--line { background: var(--white); border-color: var(--line-2); color: var(--ink); }
.section:not(.section--deep):not(.section--mid) .btn--line:hover { background: var(--cream-2); border-color: var(--sand-2); color: var(--sand-2); }
.section:not(.section--deep):not(.section--mid) .btn--line:hover { border-color: var(--sand-2); color: var(--sand-2); }

/* ---------- 7. Section headings ---------- */
.sec-head { margin-bottom: clamp(42px, 5.4vw, 70px); max-width: 74ch; }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--sub { margin-top: clamp(68px, 9.5vw, 120px); }
.sec-num {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font); font-size: 11.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--sand-2); margin-bottom: 20px;
}
.sec-num::after { content: ''; flex: 1 1 auto; max-width: 80px; height: 1px; background: currentColor; opacity: .4; }
.sec-head--center .sec-num { justify-content: center; }
.sec-head--center .sec-num::after { display: none; }
html[data-lang="bn"] .sec-num, html[data-lang="ar"] .sec-num { text-transform: none; letter-spacing: .04em; font-size: 13px; }
.section--deep .sec-num, .section--mid .sec-num { color: var(--sand); }
.sec-title { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.sec-sub { margin-top: 18px; color: var(--muted); font-size: 1.02rem; max-width: 66ch; }
.sec-head--center .sec-sub { margin-inline: auto; }
.section--deep .sec-sub, .section--mid .sec-sub { color: var(--on-night-2); }

.label {
  font-family: var(--font); font-size: 11.5px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted);
  margin-top: clamp(46px, 5.8vw, 70px); margin-bottom: 20px;
}
.label:first-child { margin-top: 0; }
.label--center { text-align: center; }
.section--deep .label, .section--mid .label { color: var(--sand); }
html[data-lang="bn"] .label, html[data-lang="ar"] .label { text-transform: none; letter-spacing: .04em; font-size: 13.5px; }
.lead { font-size: 1.06rem; color: var(--body); max-width: 60ch; }
.section--deep .lead, .section--mid .lead { color: var(--on-night-2); }

/* ---------- 8. About ---------- */
.about { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(38px, 6vw, 92px); align-items: start; }
.about__aside { position: sticky; top: 118px; }
.about__aside .sec-title { margin-bottom: clamp(30px, 4vw, 42px); }
/* Fills the space the sticky heading leaves beside the long body copy.
   The Mushaf is a cut-out, so it sits straight on the page with only its own
   shadow — no card, no border. */
.about__art {
  display: block; width: min(100%, 340px); height: auto;
  filter: drop-shadow(0 4px 4px rgba(36, 31, 26, .30))
          drop-shadow(0 14px 18px rgba(36, 31, 26, .18))
          drop-shadow(0 30px 44px rgba(36, 31, 26, .10));
}
.about__body > p + p { margin-top: 18px; }
.about__mission { margin-top: 40px; padding: 30px 32px; background: var(--night); border-radius: var(--radius-lg); color: var(--on-night-2); }
.about__mission h3 {
  font-family: var(--font); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sand); font-weight: 600; margin-bottom: 14px;
}
html[data-lang="bn"] .about__mission h3, html[data-lang="ar"] .about__mission h3 { text-transform: none; letter-spacing: .04em; font-size: 13.5px; }
.about__mission p { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.3rem; line-height: 1.5; color: var(--white); }

.stat b {
  display: block; font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: 2.2rem; line-height: 1; color: var(--sand-2); letter-spacing: -.02em;
}
.stat span { display: block; margin-top: 8px; font-size: 12.5px; color: var(--muted); }

/* ---------- 9. Pills ---------- */
.pill {
  /* Long status labels ("… — Result Awaited") must wrap inside their card, not run past it. */
  display: inline-block; max-width: 100%; text-align: center;
  font-size: 11.5px; font-weight: 600; line-height: 1.5; padding: 4px 11px; border-radius: 3px;
  border: 1px solid var(--line-2); color: var(--muted); text-wrap: balance;
  background: var(--panel-light);
}
.pill--achieved  { border-color: var(--sand-2); color: var(--sand-2); background: var(--sand-wash); }
.pill--completed { border-color: var(--line-2); color: var(--body); }
.pill--ongoing   { border-color: var(--line-2); color: var(--ink); }
.section--deep .pill, .section--mid .pill { background: var(--card-mid); }
.section--deep .pill--achieved, .section--mid .pill--achieved { border-color: var(--sand); color: var(--sand); background: var(--card-night-hover); }
.section--deep .pill--ongoing, .section--mid .pill--ongoing { color: var(--on-night); }

/* ---------- 10. Awards ---------- */
.awards { background: var(--panel-light); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.award {
  border-bottom: 1px solid var(--line); padding: clamp(28px, 3.6vw, 44px) clamp(20px, 2.6vw, 32px);
  display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: clamp(18px, 3vw, 36px);
  align-items: start; transition: background .22s;
}
.award:last-child { border-bottom: 0; }
.award:hover { background: var(--panel-light-hover); }
.award--primary { position: relative; }
.award--primary::before {
  content: ''; position: absolute; inset-block: 0; inset-inline-start: -16px;
  width: 2px; background: var(--sand);
}
.award--primary .award__rank { color: var(--sand-2); }
.award__flag { font-size: 1.8rem; line-height: 1.3; }
.award__meta { min-width: 0; }
.award__year { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.award__title { font-size: clamp(1.4rem, 2.8vw, 2rem); margin-bottom: 14px; }
.award__cats { display: flex; flex-wrap: wrap; gap: 14px 44px; margin-top: 22px; }
.award__cat { display: flex; flex-direction: column; gap: 3px; }
.award__rank {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: 1.28rem; color: var(--ink); letter-spacing: -.015em;
  display: flex; align-items: center; gap: 8px;
}
.award__catname { font-size: 13px; color: var(--muted); }
.award__note { margin-top: 20px; font-size: .96rem; color: var(--muted); max-width: 62ch; }
.award__side { display: none; }
/* "Read more" — only ever shown on phones, where a long note is clamped */
.readmore {
  display: none; margin-top: 12px; padding: 7px 15px; cursor: pointer;
  background: var(--sand-wash); border: 1px solid var(--sand-soft); border-radius: var(--radius);
  font-family: var(--font); font-size: 12.5px; font-weight: 600;
  color: var(--sand-2); letter-spacing: .01em;
  transition: background .22s, border-color .22s;
}
.readmore:hover { background: var(--sand-soft); border-color: var(--sand-2); }
.readmore[hidden] { display: none; }
.readmore__off { display: none; }
.readmore.is-open .readmore__on { display: none; }
.readmore.is-open .readmore__off { display: inline; }

/* ---------- 10b. Organisation marks ---------- */
/* Always on a light tile, so the same file reads on a cream card and on the
   slate band. The image is placed absolutely against the tile's definite box,
   which is what keeps a tall logo from overflowing it. */
.orglogo {
  position: relative; overflow: hidden; flex: none;
  display: block; width: 96px; height: 62px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
}
.orglogo img {
  position: absolute; inset: 0; margin: auto;
  width: auto; height: auto;
  max-width: calc(100% - 16px); max-height: calc(100% - 16px);
}
.orglogo--sm { width: 72px; height: 46px; }
.orglogo--sm img { max-width: calc(100% - 12px); max-height: calc(100% - 12px); }
.orglogo--lg { width: 116px; height: 78px; }
.orglogo--lg img { max-width: calc(100% - 20px); max-height: calc(100% - 20px); }
.study .orglogo { width: min(100%, 240px); height: 86px; margin-bottom: 4px; }
.study .orglogo img { max-width: calc(100% - 22px); max-height: calc(100% - 18px); }

.award__mark { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.record__lead, .xp__lead { display: flex; align-items: center; gap: 14px; min-width: 0; }
.aspire__head .orglogo { margin-bottom: 4px; }

@media (max-width: 640px) {
  .award__mark { flex-direction: row; justify-content: flex-start; gap: 14px; }
  .orglogo { width: 82px; height: 54px; }
  .orglogo--lg { width: 94px; height: 64px; }
  .orglogo--sm { width: 64px; height: 42px; }
}

/* ---------- 11. Row lists ---------- */
.records, .edu, .xp { background: var(--panel-light); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.record, .edu__row, .xp__row {
  padding: 20px clamp(18px, 2.4vw, 28px); border-bottom: 1px solid var(--line);
  display: grid; gap: 8px 26px; align-items: baseline; transition: background .22s;
}
.record:last-child, .edu__row:last-child, .xp__row:last-child { border-bottom: 0; }
.record:hover, .edu__row:hover, .xp__row:hover { background: var(--panel-light-hover); }
.record { grid-template-columns: 78px minmax(0, 1fr) auto; }
.edu__row, .xp__row { grid-template-columns: minmax(0, 1fr) auto; }
.record__year { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.1rem; color: var(--sand-2); }
.record__name, .edu__deg, .xp__name { font-weight: 600; color: var(--ink); font-size: 1.02rem; }
.record__org, .edu__inst, .xp__loc { display: block; font-size: .92rem; color: var(--muted); font-weight: 400; margin-top: 3px; }
.record__rank { font-size: 13px; font-weight: 600; color: var(--sand-2); white-space: nowrap; }
.edu__yrs, .xp__yrs { font-size: 13px; color: var(--muted); white-space: nowrap; }

/* ---------- 12. Timeline ---------- */
.timeline { position: relative; padding-inline-start: 34px; }
.timeline::before { content: ''; position: absolute; inset-block: 10px; inset-inline-start: 4px; width: 1px; background: var(--line-2); }
.tl-item { position: relative; padding-bottom: 40px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ''; position: absolute; inset-inline-start: -34px; top: 9px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--cream); border: 1px solid var(--sand-2); transition: background .25s;
}
.section--alt .tl-item::before { background: var(--cream-2); }
.tl-item:hover::before { background: var(--sand); }
.tl-item__year { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.3rem; color: var(--sand-2); margin-bottom: 6px; letter-spacing: -.02em; }
.tl-item__title { font-family: var(--font); font-size: 1.08rem; font-weight: 600; color: var(--ink); margin-bottom: 5px; line-height: 1.5; letter-spacing: 0; }
.tl-item__desc { color: var(--muted); font-size: .97rem; }
.tl-item__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ---------- 13. Cards ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; }

.study, .level, .country, .aspire {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(26px, 3.2vw, 36px); transition: border-color .22s, background .22s;
}
.section--alt .study, .section--alt .level, .section--alt .country, .section--alt .aspire { background: var(--cream); }
.study:hover, .level:hover, .country:hover, .aspire:hover { border-color: var(--sand-2); }
.section--deep .study, .section--deep .level, .section--deep .country, .section--deep .aspire {
  background: var(--card-night); border-color: var(--line-night); color: var(--on-night-2);
}
.section--mid .study, .section--mid .level, .section--mid .country, .section--mid .aspire {
  background: var(--card-mid); border-color: var(--line-night); color: var(--on-night-2);
}
.section--deep .study:hover, .section--deep .country:hover, .section--deep .aspire:hover {
  border-color: var(--sand); background: var(--card-night-hover);
}
.section--mid .study:hover, .section--mid .country:hover, .section--mid .aspire:hover {
  border-color: var(--sand); background: var(--card-mid-hover);
}

.study__icon { width: 30px; height: 30px; stroke: var(--sand-2); fill: none; stroke-width: 1.4; margin-bottom: 22px; }
.section--deep .study__icon, .section--mid .study__icon { stroke: var(--sand); }
.study__title { font-size: 1.46rem; margin-bottom: 6px; }
.study__place { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.section--deep .study__place, .section--mid .study__place { color: var(--on-night-2); }
.study__focus { font-weight: 600; font-size: .97rem; color: var(--ink); margin-bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.section--deep .study__focus, .section--mid .study__focus { color: var(--white); }
.study__desc { color: var(--muted); font-size: .96rem; }
.section--deep .study__desc, .section--mid .study__desc { color: var(--on-night-2); }

/* ---------- 14. Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-size: 13px; padding: 7px 15px; border-radius: var(--radius);
  border: 1px solid var(--line); color: var(--body); background: var(--white);
  transition: border-color .22s, color .22s;
}
.section--alt .chip { background: var(--cream); }
.chip { transition: background .22s, border-color .22s, color .22s; }
/* A chip that opens its own page carries the same arrow as the profile cards. */
.chip--link { display: inline-flex; align-items: center; gap: 8px; }
.chip--link svg { width: 13px; height: 13px; flex: none; opacity: .4; transition: opacity .22s; }
.chip--link:hover svg { opacity: 1; }
html[data-lang="ar"] .chip--link svg { transform: scaleX(-1); }

/* The Arabic name of a topic, above its heading on the topic page. */
.focus__arabic {
  font-family: var(--font-calligraphy); font-size: clamp(1.9rem, 5vw, 2.8rem);
  line-height: 1.5; color: var(--sand-2); direction: rtl; font-weight: 400; margin-bottom: 2px;
}
.chip:hover { background: var(--cream-2); border-color: var(--sand-2); color: var(--sand-2); }
.section--deep .chip { background: var(--card-night); border-color: var(--line-night); color: var(--on-night-2); }
.section--mid .chip { background: var(--card-mid); border-color: var(--line-night); color: var(--on-night-2); }
.section--deep .chip:hover { background: var(--card-night-hover); border-color: var(--sand); color: var(--sand); }
.section--mid .chip:hover { background: var(--card-mid-hover); border-color: var(--sand); color: var(--sand); }

/* ---------- 15. Qira'at ---------- */
.qiraat { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(34px, 5vw, 76px); align-items: center; }
/* An illuminated Mushaf frontispiece border sits behind the panel; the Arabic
   itself stays live text in Amiri, so the script is always correctly shaped. */
.qiraat__panel {
  background: var(--night) url('../assets/qiraat-frame.png?v=1') center / cover no-repeat;
  border-radius: var(--radius-lg); position: relative; overflow: hidden;
  display: grid; place-content: center; text-align: center;
  min-height: clamp(230px, 30vw, 360px);
  padding: clamp(46px, 8vw, 96px) clamp(40px, 8vw, 104px);
}
/* Keeps the calligraphy readable wherever the gold falls behind it. */
.qiraat__panel::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(35,30,24,.92) 38%, rgba(35,30,24,.55) 70%, transparent 100%);
}
.qiraat__panel > * { position: relative; z-index: 1; }
.qiraat__arabic {
  font-family: var(--font-calligraphy); font-size: clamp(2rem, 5.2vw, 3.8rem);
  line-height: 1.5; color: var(--sand); direction: rtl; margin-bottom: 14px; font-weight: 400;
}
.qiraat__caption { font-size: 13px; color: var(--on-night-2); letter-spacing: .04em; }
.objective { margin-top: 36px; padding-inline-start: 22px; border-inline-start: 2px solid var(--sand); }
.objective h3 { font-family: var(--font); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 12px; }
html[data-lang="bn"] .objective h3, html[data-lang="ar"] .objective h3 { text-transform: none; letter-spacing: .04em; font-size: 13.5px; }
.objective p { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.24rem; line-height: 1.55; color: var(--ink); }
.section--deep .objective p, .section--mid .objective p { color: var(--white); }

/* ---------- 16. Aspirations (slate band) ---------- */
.aspire__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 18px; }
.aspire__head .pill { text-align: start; }
.aspire__name { font-size: 1.6rem; }
.aspire__body { color: var(--on-night-2); font-size: .98rem; }
.aspire__body + .aspire__body { margin-top: 14px; }

.path { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.path__node {
  background: var(--card-mid); border: 1px solid var(--line-night); border-radius: var(--radius);
  padding: 9px 17px; font-size: 13px; color: var(--on-night);
}
.path__node--end { background: var(--card-mid-hover); border-color: var(--sand); color: var(--sand); }
.path__arrow { color: var(--sand); font-size: 13px; opacity: .55; }
html[data-lang="ar"] .path__arrow { transform: scaleX(-1); }

/* ---------- 17. Teaching levels ---------- */
.level__tag {
  display: block; font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: 1.32rem; color: var(--ink); letter-spacing: -.015em;
  padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--sand);
}
.level li { display: flex; align-items: flex-start; gap: 11px; padding: 6px 0; color: var(--body); font-size: .96rem; }
.level li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--sand); margin-top: 11px; flex: none; }

/* ---------- 18. Countries ---------- */
.country { text-align: start; }
.country__flag { font-size: 1.7rem; line-height: 1; margin-bottom: 16px; }
.country__name { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.22rem; color: var(--ink); margin-bottom: 7px; letter-spacing: -.015em; }
.section--deep .country__name, .section--mid .country__name { color: var(--white); }
.country__event { color: var(--muted); font-size: .92rem; }
.section--deep .country__event, .section--mid .country__event { color: var(--on-night-2); }
.country__year { display: block; margin-top: 14px; font-size: 12.5px; font-weight: 600; letter-spacing: .12em; color: var(--sand-2); }
.section--deep .country__year, .section--mid .country__year { color: var(--sand); }

/* ---------- 19. Media ---------- */
/* The broadcasters' logos, drifting past. Each sits on a light tile so a dark
   logo and a light one read the same against the section's dark background. */
.tvstrip { margin-top: clamp(46px, 6vw, 76px); }
.tvstrip__win {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tvstrip__rail {
  display: flex; width: max-content;
  animation: tv-rail 46s linear infinite;
}
.tvstrip__win:hover .tvstrip__rail { animation-play-state: paused; }
@keyframes tv-rail { from { transform: translateX(0); } to { transform: translateX(-50%); } }
html[dir="rtl"] .tvstrip__rail { animation-name: tv-rail-rtl; }
@keyframes tv-rail-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }

/* Spacing is a margin, not a flex gap, so one set is exactly half the rail. */
.tv {
  flex: none; margin-inline-end: 14px; position: relative; overflow: hidden;
  width: 172px; height: 100px;
  background: var(--cream); border-radius: var(--radius);
  transition: transform .25s;
}
.tv img {
  position: absolute; inset: 0; margin: auto;
  width: auto; height: auto;
  max-width: calc(100% - 36px); max-height: calc(100% - 28px);
}
.tv--name {
  display: grid; place-items: center; padding: 14px 18px;
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: 1.05rem; color: var(--ink); text-align: center; letter-spacing: -.01em;
}
.tvstrip__win:hover .tv { transform: translateY(-2px); }

/* Two across, so the four tiles read as one block and "See more" adds a full row. */
.videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 46px; }
.video {
  position: relative; aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line-night); background: var(--card-night);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  text-align: center; padding: 20px; transition: border-color .25s, background .25s;
}
.video:hover { border-color: var(--sand); background: var(--card-night-hover); }
.video--embed { padding: 0; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__play { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--sand); display: grid; place-items: center; }
.video__play svg { width: 15px; height: 15px; fill: var(--sand); margin-inline-start: 3px; }
html[data-lang="ar"] .video__play svg { transform: scaleX(-1); margin-inline-start: 0; margin-inline-end: 3px; }
.video__label { font-size: 13.5px; color: var(--on-night-2); }

/* ---------- 19b. The Qur'an, juz by juz ---------- */
.player {
  position: sticky; top: 88px; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px;
  margin-bottom: 30px; padding: 16px 20px;
  background: var(--night); border-radius: var(--radius-lg);
  box-shadow: 0 12px 28px rgba(35, 30, 24, .16);
}
.player[hidden] { display: none; }
.player__now { min-width: 0; }
.player__k {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--sand);
}
html[data-lang="bn"] .player__k, html[data-lang="ar"] .player__k { text-transform: none; letter-spacing: .04em; font-size: 13px; }
.player__title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.15rem; color: var(--white); }
.player__audio { flex: 1 1 260px; height: 38px; min-width: 0; }

.juz {
  list-style: none; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 248px), 1fr));
}
.juz__btn {
  width: 100%; display: flex; align-items: center; gap: 14px; text-align: start;
  padding: 14px 16px; border-radius: var(--radius); font-family: var(--font);
  background: var(--white); border: 1px solid var(--line); color: var(--ink);
  transition: background .2s, border-color .2s, transform .2s;
}
.section--alt .juz__btn { background: var(--cream); }
.juz__btn:hover:not([disabled]) { background: var(--panel-light-hover); border-color: var(--sand-2); }
.juz__btn[disabled] { cursor: default; opacity: .6; }
.juz__btn.is-playing { background: var(--night); border-color: var(--night); color: var(--on-night); }
.juz__btn.is-broken { border-color: #B4462F; }
.juz__n {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: 1.05rem; color: var(--sand-2); flex: none; min-width: 26px;
}
.juz__btn.is-playing .juz__n { color: var(--sand); }
.juz__meta { min-width: 0; flex: 1 1 auto; }
.juz__name { display: block; font-size: .96rem; font-weight: 600; }
.juz__note { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.juz__btn.is-playing .juz__note { color: var(--on-night-2); }
.juz__play {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--sand-2); display: grid; place-items: center;
}
.juz__play svg { width: 11px; height: 11px; fill: var(--sand-2); margin-inline-start: 2px; }
html[data-lang="ar"] .juz__play svg { transform: scaleX(-1); margin-inline-start: 0; margin-inline-end: 2px; }
.juz__btn.is-playing .juz__play { border-color: var(--sand); }
.juz__btn.is-playing .juz__play svg { fill: var(--sand); }
.juz__soon {
  flex: none; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: 3px 8px;
}
html[data-lang="bn"] .juz__soon, html[data-lang="ar"] .juz__soon { text-transform: none; letter-spacing: .02em; font-size: 12px; }
@media (max-width: 640px) {
  .player { top: 78px; padding: 14px 16px; }
  .juz { grid-template-columns: 1fr; }
}

/* ---------- 20. Gallery — caption beneath the frame ---------- */
.gal-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 44px; }
.gal-filter {
  font-size: 13px; font-weight: 600; padding: 9px 17px; border-radius: var(--radius);
  border: 1px solid var(--line); color: var(--muted); background: var(--white); transition: all .22s;
}
.section--alt .gal-filter { background: var(--cream); }
.gal-filter:hover { background: var(--cream-2); border-color: var(--sand-2); color: var(--sand-2); }
.gal-filter.is-active:hover { background: var(--slate); border-color: var(--slate); color: var(--on-night); }
.gal-filter.is-active { background: var(--night); border-color: var(--night); color: var(--on-night); }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr)); gap: 22px 18px; }
.gal-item { position: relative; background: none; }
.gal-item img,
.gal-item__ph {
  /* One ratio for every tile, so the grid stays even whatever is dropped in. */
  aspect-ratio: 4/3; width: 100%; border-radius: var(--radius-lg);
  border: 1px solid var(--line); background: var(--cream-3); overflow: hidden;
}
.gal-item img { object-fit: cover; transition: opacity .25s; }
.gal-item:hover img { opacity: .88; }
.gal-item__ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 18px; text-align: center;
}
.gal-item__ph svg { width: 26px; height: 26px; stroke: var(--muted); fill: none; stroke-width: 1.3; opacity: .6; }
.gal-item__ph span { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.gal-item__cap { padding-top: 14px; }
.gal-item__cap b {
  display: block; font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: 1rem; color: var(--ink); line-height: 1.32; letter-spacing: -.01em;
}
.gal-item__cap span { display: block; margin-top: 3px; font-size: .84rem; color: var(--sand-2); }
/* "See more" — only ever shown on phones, where the grids are collapsed */
.more {
  display: block; margin: 22px auto 0; padding: 12px 26px;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--panel-light); color: var(--ink);
  font-family: var(--font); font-size: 14px; font-weight: 600;
  transition: border-color .22s, color .22s;
}
.more { transition: background .22s, border-color .22s, color .22s; }
.more:hover { background: var(--cream-2); border-color: var(--sand-2); color: var(--sand-2); }
.more[hidden] { display: none; }
.more__off { display: none; }
.more.is-open .more__on { display: none; }
.more.is-open .more__off { display: inline; }
.section--deep .more, .section--mid .more {
  background: var(--card-night); border-color: var(--line-night); color: var(--on-night);
}
.section--mid .more { background: var(--card-mid); }
.section--deep .more:hover { background: var(--card-night-hover); border-color: var(--sand); color: var(--sand); }
.section--mid .more:hover { background: var(--card-mid-hover); border-color: var(--sand); color: var(--sand); }

.gal-note { margin-top: 40px; text-align: center; font-size: .9rem; color: var(--muted); }
.gal-note--start { text-align: start; margin-top: 22px; }

/* ---------- 20b. Blog ---------- */
/* Pages under /blog/ start below the fixed header instead of behind a hero. */
.section--page { padding-block: clamp(120px, 12vw, 170px) var(--sec-y); }
.wrap--reading { max-width: 760px; }

.posts { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.post-card {
  display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 24px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: border-color .22s, background .22s, transform .22s;
}
.section--alt .post-card { background: var(--cream); }
.post-card:hover { border-color: var(--sand-2); background: var(--panel-light-hover); transform: translateY(-3px); }
.post-card__cover { display: block; margin: -26px -26px 4px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; }
.post-card__cover img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.post-card__date, .post__date {
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
html[data-lang="bn"] .post-card__date, html[data-lang="ar"] .post-card__date,
html[data-lang="bn"] .post__date, html[data-lang="ar"] .post__date { text-transform: none; letter-spacing: .03em; font-size: 13px; }
.post-card__title { font-size: 1.3rem; line-height: 1.3; color: var(--ink); }
.post-card__excerpt { font-size: .96rem; color: var(--body); }
.post-card__go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px;
  font-size: 13.5px; font-weight: 600; color: var(--sand-2);
}
.post-card__go svg { width: 15px; height: 15px; }
html[data-lang="ar"] .post-card__go svg { transform: scaleX(-1); }
.posts__all { display: flex; width: fit-content; margin-inline: auto; }

.post__back {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 28px;
  font-size: 13.5px; font-weight: 600; color: var(--sand-2);
}
.post__back svg { width: 16px; height: 16px; }
html[data-lang="ar"] .post__back svg { transform: scaleX(-1); }
.post__title { font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.12; margin: 12px 0 18px; }
.post__lead { font-size: 1.12rem; color: var(--body); margin-bottom: 34px; }
.post__cover { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: 38px; }
.post__body > p + p { margin-top: 20px; }
.post__body p { font-size: 1.05rem; line-height: 1.78; }

/* ---------- 21. Vision ---------- */
.vision-lead { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(1.7rem, 4vw, 2.9rem); line-height: 1.16; color: var(--white); max-width: 24ch; letter-spacing: -.025em; }
html[data-lang="bn"] .vision-lead, html[data-lang="ar"] .vision-lead { font-size: clamp(1.3rem, 3vw, 1.9rem); line-height: 1.55; letter-spacing: 0; }
.vision-sub { margin-top: 20px; color: var(--on-night-2); max-width: 56ch; }
.vision-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 16px; margin-top: clamp(46px, 6vw, 74px); }
.vision-cell { background: var(--card-night); border: 1px solid var(--line-night); border-radius: var(--radius-lg); padding: clamp(26px, 3.2vw, 34px); transition: border-color .25s, background .25s; }
.vision-cell:hover { border-color: var(--sand); background: var(--card-night-hover); }
.vision-cell__num { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1rem; color: var(--sand); display: block; margin-bottom: 20px; }
.vision-cell__title { font-size: 1.28rem; margin-bottom: 12px; color: var(--white); }
.vision-cell p { color: var(--on-night-2); font-size: .95rem; }

/* ---------- 22. Contact ---------- */
.contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(38px, 6vw, 84px); }
.contact > * { display: flex; flex-direction: column; min-width: 0; }
.contact .btn--spaced { margin-top: auto; align-self: flex-start; }
.contact-name { font-size: 1.9rem; margin-bottom: 8px; }
.contact-roles { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--sand-2); margin-bottom: 30px; font-weight: 600; }
html[data-lang="bn"] .contact-roles, html[data-lang="ar"] .contact-roles { text-transform: none; letter-spacing: .01em; font-size: 14px; }
.contact-lines {
  background: var(--sand-wash); border: 1px solid var(--sand-soft);
  border-radius: var(--radius-lg); padding: 4px 22px; margin-top: 4px;
}
/* Only needed if a button is ever put back under the panel. */
.contact-lines + .btn { margin-top: 26px; }
.contact-line { display: flex; align-items: flex-start; gap: 14px; padding: 18px 0; border-bottom: 1px solid rgba(200, 133, 78, .22); }
.contact-line:last-child { border-bottom: 0; }
.contact-line svg { width: 18px; height: 18px; stroke: var(--sand-2); fill: none; stroke-width: 1.6; margin-top: 5px; flex: none; }
.contact-line__k { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 3px; }
html[data-lang="bn"] .contact-line__k, html[data-lang="ar"] .contact-line__k { text-transform: none; letter-spacing: .02em; font-size: 13px; }
.contact-line__v { font-size: 1.04rem; font-weight: 500; color: var(--ink); word-break: break-word; }
a.contact-line__v:hover { color: var(--sand-2); }

.socials { display: grid; gap: 10px; }
.social {
  display: flex; align-items: center; gap: 14px; padding: 16px 20px;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white);
  transition: border-color .22s, transform .22s;
}
.section--alt .social { background: var(--cream); }
.social:hover { border-color: var(--sand-2); transform: translateX(4px); }
html[data-lang="ar"] .social:hover { transform: translateX(-4px); }
/* The logos carry their own brand colours — don't repaint them. */
.social__logo { width: 22px; height: 22px; flex: none; object-fit: contain; }
.social__k { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: block; }
html[data-lang="bn"] .social__k, html[data-lang="ar"] .social__k { text-transform: none; letter-spacing: .02em; font-size: 13px; }
.social__v { font-weight: 600; color: var(--ink); }
.social__ext { margin-inline-start: auto; opacity: .3; }
html[data-lang="ar"] .social__ext svg { transform: scaleX(-1); }

/* ---------- 23. Footer ---------- */
.footer { background: var(--night-2); color: var(--on-night-2); padding-block: clamp(62px, 8vw, 98px) 32px; }
.footer__top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(38px, 6vw, 74px); align-items: start; }
.footer__name { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(1.8rem, 4vw, 2.7rem); color: var(--white); margin-bottom: 14px; letter-spacing: -.025em; }
.footer__roles { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--sand); margin-bottom: 14px; font-weight: 600; }
html[data-lang="bn"] .footer__roles, html[data-lang="ar"] .footer__roles { text-transform: none; letter-spacing: .01em; font-size: 14px; }
.footer__tag { color: var(--on-night-2); max-width: 44ch; font-size: .95rem; }
.footer__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 28px; }
.footer__col h4 { font-family: var(--font); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--sand); font-weight: 600; margin-bottom: 14px; }
html[data-lang="bn"] .footer__col h4, html[data-lang="ar"] .footer__col h4 { text-transform: none; letter-spacing: .04em; font-size: 13.5px; }
.footer__col a { display: block; padding: 5px 0; font-size: .93rem; color: var(--on-night-2); transition: color .2s; }
.footer__col a:hover { color: var(--sand); }
.footer__bottom {
  margin-top: clamp(46px, 6vw, 70px); padding-top: 26px; border-top: 1px solid var(--line-night);
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
  font-size: .85rem;
}
.footer__bottom a:hover { color: var(--sand); }
.footer__credit { color: var(--on-night-2); opacity: .8; }

/* ---------- 24. Reveal & motion ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .06s; }
.reveal[data-delay="2"] { transition-delay: .12s; }
.reveal[data-delay="3"] { transition-delay: .18s; }
.reveal[data-delay="4"] { transition-delay: .24s; }
.reveal[data-delay="5"] { transition-delay: .3s; }

/* Children of a marked grid arrive one after another rather than all at once.
   main.js sets --i on each child; nothing happens without it. */
.stagger > * {
  opacity: 0; transform: translateY(18px);
  transition: opacity .62s var(--ease), transform .62s var(--ease);
  transition-delay: calc(var(--i, 0) * 65ms);
}
.stagger.is-in > * { opacity: 1; transform: none; }

/* How far the visitor has read, drawn across the top of the header. */
.progress {
  position: fixed; inset-inline: 0; top: 0; height: 2px; z-index: 120;
  transform: scaleX(var(--p, 0)); transform-origin: left center;
  background: linear-gradient(90deg, var(--sand-2), var(--sand));
  pointer-events: none;
}
html[dir="rtl"] .progress { transform-origin: right center; }

/* The rule beside a section number draws itself in. */
.sec-num::after { transform: scaleX(0); transform-origin: left center; transition: transform .8s var(--ease) .15s; }
.reveal.is-in .sec-num::after, .is-in .sec-num::after { transform: scaleX(1); }
html[dir="rtl"] .sec-num::after { transform-origin: right center; }

/* The hero portrait breathes, very slightly. */
@keyframes float-soft { from { transform: translateY(0); } to { transform: translateY(-10px); } }
/* The band holds its shape before the pictures load, so nothing jumps. */
.hero__media { min-height: clamp(380px, 58vh, 620px); }

/* A counting figure holds its width so the row never jitters as digits change. */
.stat b { font-variant-numeric: tabular-nums; }

/* The Mushaf lifts a little as it comes into view. */
.about__art { transition: transform .9s var(--ease); }
.about__aside.is-in .about__art { transform: translateY(-6px); }

/* ---------- 24b. Back to top ---------- */
/* It waits in the trailing corner — the right on an English page, the left on
   an Arabic one — and only appears once the header has scrolled away. */
.totop {
  position: fixed; z-index: 90;
  inset-block-end: max(20px, env(safe-area-inset-bottom));
  inset-inline-end: max(18px, env(safe-area-inset-right));
  width: 46px; height: 46px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line-night);
  border-radius: 50%;
  background: rgba(35, 30, 24, .86);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--sand); cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
  opacity: 0; transform: translateY(10px) scale(.94);
  transition: opacity .28s var(--ease), transform .28s var(--ease),
              background .2s, border-color .2s;
}
.totop svg {
  width: 19px; height: 19px; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.totop.is-in { opacity: 1; transform: none; }
.totop:hover { background: var(--sand); color: var(--night); border-color: var(--sand); }
.totop:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }
/* Hidden until the script decides otherwise, so it never flashes on a short page. */
.totop[hidden] { display: none; }

@media (max-width: 640px) {
  .totop { width: 42px; height: 42px; inset-block-end: max(16px, env(safe-area-inset-bottom)); }
  .totop svg { width: 17px; height: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .totop { transition: opacity .01s; transform: none; }
}

/* ---------- 25. Responsive ---------- */
@media (max-width: 1180px) { .nav__link { padding: 8px 8px; font-size: 12.5px; } .nav__link::after { inset-inline: 8px; } }
@media (max-width: 1040px) {
  .nav { display: none; }
  .menu-btn { display: flex; }
  .nav.is-open {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: fixed; inset: 82px 0 auto 0; background: var(--night);
    border-bottom: 1px solid var(--line-night);
    padding: 8px var(--gutter) 24px; max-height: calc(100svh - 82px); overflow-y: auto;
  }
  .nav.is-open .nav__link { padding: 14px 2px; font-size: 15px; border-bottom: 1px solid var(--line-night); }
  .nav.is-open .nav__link::after { display: none; }
}
@media (max-width: 920px) {
  .about__art { width: min(100%, 240px); margin-inline: auto; }
  /* Stacked order: name, photograph, the four figures, then the copy.
     .hero__inner drops its own box so the strip can sit between its children. */
  .hero { display: flex; flex-direction: column; padding-bottom: 0; }
  .hero__inner { display: contents; }
  .hero__head { order: 1; padding: 0 var(--gutter) clamp(12px, 2.2vw, 18px); }
  /* Stacked, the photograph is the page itself: it runs edge to edge, so the
     side fade that blends it into the dark panel beside it is dropped. */
  .hero__media {
    order: 2; width: 100%;
    -webkit-mask-image: none; mask-image: none;
  }
  .hero__strip { order: 3; margin-top: clamp(22px, 4vw, 36px); }
  .hero__body { order: 4; padding: clamp(24px, 4vw, 38px) var(--gutter) clamp(30px, 5vw, 48px); }
  .about { grid-template-columns: 1fr; }
  .about__aside { position: static; }
}
@media (max-width: 640px) {
  /* Three short columns beat two with a third stranded underneath — the Connect
     block was sitting alone below the fold with dead space beside it. auto-fit
     falls back to two columns on a phone too narrow for three, and a word with
     no break in it wraps rather than spilling its track. */
  .footer__nav { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 14px 12px; }
  .footer__col a { font-size: .88rem; overflow-wrap: break-word; }
  .header__inner { height: 70px; }
  .nav.is-open { inset-block-start: 70px; }
  .hero { padding-block: 104px 0; }
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .stat-row .stat { padding-inline-end: 16px; }
  .stat-row .stat:nth-child(2n) { border-inline-start: 1px solid var(--line-night); padding-inline-start: 16px; }
  .stat-row .stat:nth-child(2n+1) { border-inline-start: 0; padding-inline-start: 0; }
  .stat-row .stat:nth-child(n+3) { border-top: 1px solid var(--line-night); }
  .record { grid-template-columns: 1fr; }
  .record__rank, .edu__yrs, .xp__yrs { justify-self: start; }
  .edu__row, .xp__row { grid-template-columns: 1fr; }
  .videos { grid-template-columns: 1fr; margin-top: 34px; }
  /* Two cards abreast on a phone leaves ~160px each, so the card gets tighter
     padding, smaller type and a two-line cap on the summary. */
  .contact-lines { padding-inline: 16px; }
  .contact-line { gap: 12px; }
  .contact-line__v { font-size: .94rem; }
  .posts { gap: 12px; }
  .post-card { padding: 14px 14px 13px; gap: 7px; }
  .post-card__cover { margin: -14px -14px 2px; }
  .post-card__date { font-size: 10px; letter-spacing: .1em; }
  .post-card__title { font-size: 1rem; }
  .post-card__go { font-size: 12px; padding-top: 6px; gap: 6px; }
  .post-card__go svg { width: 13px; height: 13px; }
  .tv { width: 98px; height: 62px; margin-inline-end: 10px; }
  .tv img { max-width: calc(100% - 20px); max-height: calc(100% - 16px); }
  .tv--name { padding: 8px 10px; font-size: .84rem; }
  .award { grid-template-columns: 1fr; gap: 10px; padding: 24px 18px; }
  .award--primary::before { inset-inline-start: -12px; }
  .award__flag { font-size: 1.45rem; }
  .award__year { margin-bottom: 6px; }
  .award__title { font-size: 1.22rem; margin-bottom: 10px; }
  .award__cats { gap: 12px 26px; margin-top: 16px; }
  .award__rank { font-size: 1.1rem; }
  .award__catname { font-size: 12px; }
  .award__note { margin-top: 14px; font-size: .92rem; }
  .award__note.is-clamped {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  }
  .readmore { display: inline-block; }
}
@media (max-width: 430px) {
  .header__inner { gap: 10px; }
  .brand__mark { width: 26px; height: 26px; }
  .brand__name { font-size: 14px; letter-spacing: .01em; }
  .brand__role { display: none; }
  .header__actions { gap: 6px; }
  .lang__btn { padding: 5px 8px; font-size: 11px; }
  .menu-btn { width: 38px; height: 38px; }
}

/* ---------- 26. Motion / print ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .stagger > * { opacity: 1; transform: none; }
  .sec-num::after { transform: scaleX(1); }
  .hero__shot { transition: none; }
  .tvstrip__rail { animation: none; }
  .progress { display: none; }
}
@media print {
  .header, .gal-filters, .menu-btn, .lang { display: none !important; }
  body { background: #fff; color: #000; }
  .section--deep, .section--mid, .hero, .footer { background: #fff !important; color: #000 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}