/* ==========================================================================
   TRIN — public site design system
   Plain CSS, no build step. Loaded from resources/views/basic.blade.php.
   --------------------------------------------------------------------------
   The palette comes from the logo: seven figures ringing a broadcast tower.
   Those seven are used as marks and signals, not as full-width washes — a
   page of tinted blocks read as decoration rather than as structure.

   Type: Newsreader (display), Atkinson Hyperlegible (body — drawn for
   low-vision readers, which earns its place on a mental health site),
   IBM Plex Mono (register: counts, grant ids, labels), Noto Serif Bengali
   (the blog is mostly Bangla and was falling back to a broken face).
   ========================================================================== */

:root {
    /* the logo's seven figures, unmodified */
    --f1: #FEDF00;  --f2: #F8941D;  --f3: #F25929;  --f4: #8CC73F;
    --f5: #39B64A;  --f6: #24ABE2;  --f7: #0E75BC;

    --ink:       #0C1A26;
    --ink-2:     #23343F;
    --muted:     #5C6E79;
    --faint:     #8A9BA4;
    --paper:     #F7F9F8;
    --card:      #FFFFFF;
    --wash:      #EDF2F1;
    --rule:      #D5DEDA;
    --rule-soft: #E7EDEA;

    --accent: var(--f7);

    --display: 'Newsreader', Georgia, 'Times New Roman', serif;
    --body:    'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --reg:     'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --bn:      'Noto Serif Bengali', 'Newsreader', serif;

    --wrap: 1200px;
    --nav-h: 74px;
    --ease: cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

body.trin-page {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 16.5px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
}

/* `:where()` keeps this at zero specificity so a section modifier can always
   recolour a heading. The bare `.trin-page h1` form outranked `.thero__title`
   and painted the hero headline dark-on-dark. */
.trin-page :where(h1, h2, h3, h4) {
    font-family: var(--display);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -.015em;
    margin: 0;
    color: var(--ink);
    text-wrap: balance;
}

.trin-page :where(p) { margin: 0; }

.trin-page :focus-visible { outline: 2px solid var(--f2); outline-offset: 3px; }

.twrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }

.tskip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: 12px 20px; z-index: 9999; }
.tskip:focus { left: 0; }
.tsr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Bangla needs more leading than Latin at the same size. */
:lang(bn) { font-family: var(--bn); line-height: 1.8; letter-spacing: 0; }

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.tnav {
    position: sticky;
    top: 0;
    z-index: 200;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    background: rgba(247, 249, 248, .9);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--rule);
}
/* Three tracks: logo, menu, button. Grid rather than flex because the menu
   has to hold the middle regardless of how wide the logo and the button are —
   with flex the bar just packed to one side. The outer tracks are `auto` (not
   1fr) so a wide menu shrinks the gaps instead of overflowing the wrap.
   The burger is display:none up here, so it claims no track. */
.tnav__in {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    width: min(100% - 40px, var(--wrap));
    margin-inline: auto;
}

.tnav__logo { display: flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.tnav__logo img { height: 42px; width: auto; display: block; }

/* The auto margin that used to be here did nothing: this <ul> lives inside a
   <nav> that is itself a content-sized flex child, so there was no free space
   for it to absorb — the bar packed left and left a gap at the right. The
   layout is now the grid on .tnav__in, and the items centre in their track. */
.tnav__menu {
    display: flex; align-items: center; justify-content: center;
    gap: 2px; list-style: none; margin: 0; padding: 0;
    flex-wrap: wrap;
}
.tnav__item { position: relative; }
.tnav__link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    font-family: var(--body);
    font-size: 14.5px;
    color: var(--ink-2);
    text-decoration: none;
    white-space: nowrap;
    transition: color .16s var(--ease), background .16s var(--ease);
}
.tnav__link:hover { color: var(--ink); background: var(--wash); }

/* The active page gets a rule in the logo blue rather than a filled pill —
   it states position without shouting. */
.tnav__item.is-active > .tnav__link { color: var(--ink); font-weight: 700; }
.tnav__item.is-active > .tnav__link::after {
    content: '';
    position: absolute;
    left: 12px; right: 12px; bottom: -1px;
    height: 2px;
    background: var(--f7);
}
.tnav__caret { width: 9px; height: 9px; flex: 0 0 9px; opacity: .55; transition: transform .18s var(--ease); }
.tnav__item:hover .tnav__caret { transform: rotate(180deg); }

.tnav__drop {
    position: absolute;
    top: calc(100% + 4px);
    left: 2px;
    min-width: 212px;
    background: var(--card);
    border: 1px solid var(--rule);
    box-shadow: 0 14px 40px rgba(12, 26, 38, .14);
    padding: 6px;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.tnav__item:hover .tnav__drop,
.tnav__item:focus-within .tnav__drop { opacity: 1; visibility: visible; transform: translateY(0); }
.tnav__drop a {
    display: block;
    padding: 9px 12px;
    font-size: 14px;
    color: var(--ink-2);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: background .14s var(--ease), border-color .14s var(--ease);
}
.tnav__drop a:hover { background: var(--wash); border-left-color: var(--f6); color: var(--ink); }

.tnav__cta {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    min-height: 42px;
    /* Sits in the grid's last track, hard against the right edge of the wrap
       so it lines up with the content below. */
    justify-self: end;
    background: var(--ink);
    color: var(--paper);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid var(--ink);
    white-space: nowrap;
    transition: background .16s var(--ease), color .16s var(--ease);
}
.tnav__cta:hover { background: transparent; color: var(--ink); }

.tnav__burger {
    display: none;
    margin-left: auto;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--ink);
    cursor: pointer;
}
.tnav__burger svg { width: 20px; height: 20px; }

/* ---- mobile drawer (ids kept so the layout's existing script still binds) ---- */
.tnav__overlay {
    position: fixed; inset: 0;
    background: rgba(12, 26, 38, .5);
    opacity: 0; visibility: hidden;
    transition: opacity .22s var(--ease), visibility .22s;
    z-index: 300;
}
.tnav__overlay.trin__active { opacity: 1; visibility: visible; }

.tdrawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(340px, 86vw);
    background: var(--paper);
    z-index: 310;
    transform: translateX(100%);
    transition: transform .26s var(--ease);
    display: flex; flex-direction: column;
    overflow-y: auto;
}
.tdrawer.trin__active { transform: translateX(0); }
.tdrawer__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 20px;
    border-bottom: 1px solid var(--rule);
}
.tdrawer__head img { height: 34px; }
.tdrawer__close {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    background: transparent; border: 1px solid var(--rule);
    color: var(--ink); cursor: pointer;
}
.tdrawer__menu { list-style: none; margin: 0; padding: 8px 0 26px; }
.tdrawer__menu > li { border-bottom: 1px solid var(--rule-soft); }
.tdrawer__menu a, .tdrawer__toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    padding: 14px 20px;
    min-height: 50px;
    font-family: var(--body); font-size: 15.5px;
    color: var(--ink-2); text-decoration: none;
    background: transparent; border: 0; cursor: pointer; text-align: left;
}
.tdrawer__menu > li.is-active > a { color: var(--ink); font-weight: 700; box-shadow: inset 3px 0 0 var(--f7); }
.tdrawer__toggle i { transition: transform .2s var(--ease); font-size: 12px; }
.tdrawer__toggle.trin__active i { transform: rotate(180deg); }
.tdrawer__sub { max-height: 0; overflow: hidden; background: var(--wash); transition: max-height .26s var(--ease); }
.tdrawer__sub.trin__active { max-height: 340px; }
.tdrawer__sub a { padding-left: 34px; font-size: 14.5px; }

@media (max-width: 1150px) {
    .tnav__menu, .tnav__cta { display: none; }
    /* The <nav> wrapper has to go too, not just the <ul> inside it: hiding
       only the list left an empty grid item still holding the middle track,
       which pushed the burger onto a second row. */
    .tnav__in > nav { display: none; }
    /* Two items left, so two tracks. The burger keeps the right edge via its
       own auto margin inside the second one. */
    .tnav__in { grid-template-columns: auto minmax(0, 1fr); }
    .tnav__burger { display: flex; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.thero {
    position: relative;
    z-index: 0;
    background: #0A1620;
    color: #EAF1F4;
    padding: clamp(37px, 4.1vw, 60px) 0 0;
    overflow: hidden;
    isolation: isolate;
}
/* Colour in the ground, drawn from the mark's own blues, so the band is not
   a flat rectangle of navy. */
.thero::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(72% 92% at 6% 8%,   rgba(14, 117, 188, .46), transparent 60%),
        radial-gradient(58% 78% at 95% 92%, rgba(36, 171, 226, .26), transparent 62%);
    z-index: -1;
}
.thero__in {
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    gap: clamp(24px, 3.2vw, 50px);
    align-items: end;
}
/* The organisation's name, set in the display face at a size that can be
   read across the room. It sits well below the headline in the hierarchy
   (30px against 62px) so the two do not compete. */
.thero__masthead {
    font-family: var(--display);
    font-size: clamp(19px, 2.2vw, 29px);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -.005em;
    color: #C8DEEC;
    margin: 0;
    text-wrap: balance;
}
/* The four initials the acronym is built from. */
.thero__ini {
    color: #7FD0F5;
    font-weight: 600;
}
/* An explicit space element: without it the inline spans would let a browser
   collapse the gap between "Research" and "&" at some widths. */
.thero__gap { display: inline; white-space: pre; }

.thero__place {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--reg);
    font-size: 11px; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase;
    color: #7C9AAC;
    margin: 12px 0 clamp(24px, 3.2vw, 40px);
}
.thero__place__mark {
    width: 26px; height: 3px; flex: 0 0 26px;
    background: linear-gradient(to right,
        var(--f1) 0 14.2%, var(--f2) 14.2% 28.5%, var(--f3) 28.5% 42.8%,
        var(--f4) 42.8% 57.1%, var(--f5) 57.1% 71.4%, var(--f6) 71.4% 85.7%,
        var(--f7) 85.7% 100%);
}

.thero__text { padding-bottom: clamp(39px, 4.6vw, 62px); }
.thero__title {
    font-family: var(--display);
    font-size: clamp(35px, 4.9vw, 62px);
    font-weight: 300;
    line-height: 1.03;
    letter-spacing: -.035em;
    color: #fff;
}
.thero__title b { font-weight: 400; color: #7FD0F5; }
.thero__lede {
    font-size: clamp(15.5px, 1.25vw, 17.5px);
    line-height: 1.62;
    color: #B4C8D4;
    max-width: 42ch;
    margin-top: 20px;
}
.thero__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* The photograph carries the band, so it takes the larger half of the grid
   and a wide frame rather than a portrait sliver. */
.thero__media { position: relative; align-self: end; margin: 0; }

.thero__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 7 / 5;      /* was 16/10; ~15% taller at the same width */
    overflow: hidden;
    /* Feathered at the sides so the frame dissolves into the band rather than
       ending on a hard rectangular edge. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.thero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .85s var(--ease);
    pointer-events: none;
}
.thero__slide.is-on { opacity: 1; pointer-events: auto; }

/* A magnified, blurred copy of the same photograph fills the frame, so the
   photograph itself can be shown whole without letterbox bars. */
.thero__blur {
    position: absolute;
    inset: -10%;
    background-size: cover;
    background-position: center;
    filter: blur(30px) saturate(1.15) brightness(.62);
    transform: scale(1.06);
}
.thero__slide picture { display: block; position: absolute; inset: 0; }
.thero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;   /* never crops, whatever the source ratio */
}

.thero__strip {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-top: 12px;
}
.thero__cap {
    font-family: var(--reg);
    font-size: 10.5px;
    color: #7C9AAC;
    line-height: 1.6;
    max-width: 62ch;
    margin: 0;
}
.thero__dots { display: flex; gap: 7px; flex: 0 0 auto; padding-top: 3px; }
.thero__dots button {
    position: relative;
    width: 26px; height: 4px;
    padding: 0;
    border: 0;
    background: rgba(255,255,255,.24);
    cursor: pointer;
    transition: background .2s var(--ease);
}
.thero__dots button:hover { background: rgba(255,255,255,.5); }
.thero__dots button.is-on { background: var(--f6); }
/* the bar is 4px tall, so the hit area is padded out to a 44px target */
.thero__dots button::before {
    content: '';
    position: absolute;
    top: -20px; left: -4px;
    width: 34px; height: 44px;
}
.thero__signal {
    position: absolute;
    left: -7%; bottom: -19%;
    width: min(38%, 380px);
    opacity: .32;
    pointer-events: none;
    z-index: -1;
}
.thero__signal svg { display: block; width: 100%; height: auto; }
.thero__ring { display: flex; margin-top: clamp(30px, 3.7vw, 48px); }
.thero__ring i { flex: 1 1 0; height: 7px; display: block; }

@media (prefers-reduced-motion: no-preference) {
    .arc { animation: sig 5.5s ease-out infinite; opacity: 0; }
    @keyframes sig {
        0%   { opacity: 0;  transform: scale(.82); }
        18%  { opacity: 1; }
        70%  { opacity: .5; }
        100% { opacity: 0;  transform: scale(1.06); }
    }
}

/* ==========================================================================
   SECTIONS
   Grounds alternate between paper and a faint wash, and each section lays a
   very low-alpha tint of its own logo colour over the top. Every band reads
   distinctly without turning the page into a row of coloured blocks.
   ========================================================================== */
.tsec {
    position: relative;
    padding: clamp(48px, 5.6vw, 82px) 0;
    background: var(--paper);
}
.tsec--wash { background: var(--wash); }
.tsec::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(62% 78% at 88% 3%, var(--tone, transparent), transparent 66%);
    pointer-events: none;
    z-index: 0;
}
.tsec > * { position: relative; z-index: 1; }
.tsec + .tsec { border-top: 1px solid var(--rule-soft); }

/* One horizontal line of true metadata above each section. */
.thead {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding-bottom: 13px;
    margin-bottom: clamp(22px, 3vw, 34px);
    border-bottom: 1px solid var(--rule);
}
.thead__mark { width: 26px; height: 4px; flex: 0 0 26px; background: var(--mark, var(--accent)); }
.thead__key {
    font-family: var(--reg);
    font-size: 11px; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--ink);
}
.thead__meta {
    font-family: var(--reg);
    font-size: 11.5px;
    color: var(--faint);
    margin-left: auto;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.thead__meta b { color: var(--muted); font-weight: 500; }

.ttitle { font-size: clamp(28px, 3.6vw, 42px); }
.tlede {
    font-family: var(--display);
    font-size: clamp(18px, 1.75vw, 22px);
    line-height: 1.45;
    font-weight: 300;
    color: var(--ink-2);
    max-width: 60ch;
    margin-top: 16px;
}
.tsectop { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 30px; }

.tmore {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--reg); font-size: 12.5px; font-weight: 600;
    color: var(--ink); text-decoration: none;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 2px;
    transition: border-color .16s var(--ease), gap .16s var(--ease);
}
.tmore:hover { border-bottom-color: var(--ink); color: var(--ink); gap: 11px; }

.tbtn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px 22px; min-height: 46px;
    font-family: var(--body); font-size: 15px; font-weight: 700;
    text-decoration: none; cursor: pointer;
    border: 1px solid var(--ink);
    transition: background .16s var(--ease), color .16s var(--ease), transform .16s var(--ease);
}
.tbtn svg { width: 16px; height: 16px; flex: 0 0 16px; }
/* written with the `a.` twin so the site's older global stylesheets cannot
   repaint a button's own label */
.tbtn--solid, a.tbtn--solid { background: var(--ink); color: var(--paper); }
.tbtn--solid:hover, a.tbtn--solid:hover { transform: translateY(-2px); color: var(--paper); }
.tbtn--line, a.tbtn--line { background: transparent; color: var(--ink); }
.tbtn--line:hover, a.tbtn--line:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.thero .tbtn--solid, .thero a.tbtn--solid { background: #fff; color: #0A1620; border-color: #fff; }
.thero .tbtn--line,  .thero a.tbtn--line  { color: #fff; border-color: rgba(255,255,255,.45); }
.thero .tbtn--line:hover, .thero a.tbtn--line:hover { background: #fff; color: #0A1620; border-color: #fff; }

/* ---------- Strands ---------- */
.tstrands {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    margin-top: 30px;
    border-top: 1px solid var(--rule);
}
.tstrand { padding: 22px 22px 24px 0; border-right: 1px solid var(--rule-soft); }
.tstrand:last-child { border-right: 0; }
.tstrand + .tstrand { padding-left: 22px; }
.tstrand__n {
    font-family: var(--reg); font-size: 10.5px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--sm); margin-bottom: 12px;
}
.tstrand h3 { font-size: 21px; margin-bottom: 8px; }
.tstrand p { font-size: 14.5px; color: var(--muted); margin-bottom: 14px; }

/* ---------- Research ---------- */
.tfeature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(22px, 3vw, 44px);
    align-items: center;
    margin-bottom: 32px;
}
/* The ratio lives on the frame, not on the picture: x-img fit="contain"
   absolutely positions the image inside the frame, so the frame is the only
   thing left that can hold a shape. */
.tfeature__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--wash); }
.tfeature__img picture { display: block; width: 100%; height: 100%; }
.tfeature__img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.93); }
.tfeature h3 { font-size: clamp(23px, 2.3vw, 31px); line-height: 1.16; margin-bottom: 12px; }
.tfeature p { color: var(--muted); font-size: 15.5px; margin-bottom: 14px; }

.tstamp {
    display: inline-block;
    font-family: var(--reg); font-size: 10.5px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    border: 1px solid var(--f5); color: var(--f5);
    padding: 4px 10px; margin-bottom: 14px;
}

/* Cards, not a bare list — every research row carries a photograph. */
.tprojects { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
.tproject {
    display: flex; flex-direction: column;
    background: var(--card);
    border: 1px solid var(--rule-soft);
    text-decoration: none;
    transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.tproject:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(12,26,38,.10); border-color: var(--rule); }
.tproject__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--wash); }
.tproject__img picture { display: block; width: 100%; height: 100%; }
.tproject__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.tproject:hover .tproject__img img { transform: scale(1.045); }
.tproject__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 9px; flex: 1 1 auto; }
.tproject__tag {
    display: flex; align-items: center; gap: 7px;
    font-family: var(--reg); font-size: 10px; font-weight: 600;
    letter-spacing: .13em; text-transform: uppercase; color: var(--faint);
}
.tproject__tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--dot); flex: 0 0 7px; display: block; }
.tproject h3 { font-size: 18px; line-height: 1.3; color: var(--ink); }
.tproject p { font-size: 14px; color: var(--muted); }

/* ---------- Founder ---------- */
.tfounder {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: clamp(26px, 4vw, 58px);
    align-items: start;
}
/* The source is 369x300 — landscape. Forcing it into a 4:5 portrait cut his
   head off; 6:5 is within a hair of the native ratio, so nothing is lost. */
.tfounder__portrait { margin: 0; position: relative; }
.tfounder__portrait { aspect-ratio: 6 / 5; overflow: hidden; background: var(--wash); }
.tfounder__portrait picture { display: block; width: 100%; height: 100%; }
.tfounder__portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
/* a rule in the founder colour, tying the block to its section mark */
.tfounder__portrait::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 4px;
    background: var(--f2);
}
/* Four registers, each visually distinct: name in large serif, role in mono
   caps, credentials in serif italic behind a rule, biography in the body
   face. Previously all four ran together at nearly the same weight. */
.tfounder__name {
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.05;
    letter-spacing: -.02em;
}
.tfounder__role {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--reg); font-size: 10.5px; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase;
    color: #9F5600;
    margin-top: 14px;
}
.tfounder__role::before { content: ''; width: 18px; height: 3px; background: var(--f2); }
.tfounder__creds {
    font-family: var(--display);
    font-style: italic;
    font-size: 18.5px;
    line-height: 1.4;
    color: var(--muted);
    margin-top: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--rule);
}
.tfounder__bio {
    font-size: 16.5px;
    line-height: 1.72;
    color: var(--ink-2);
    margin-top: 20px;
    max-width: 58ch;
}
.tfounder__quote {
    font-family: var(--display);
    font-size: clamp(19px, 1.85vw, 23px);
    line-height: 1.45;
    color: var(--ink);
    margin-top: 20px;
    padding: 2px 0 2px 20px;
    border-left: 3px solid var(--f1);
    text-wrap: pretty;
}
.tfounder__links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.tchip {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--reg); font-size: 12px;
    min-height: 42px; padding: 9px 14px;
    color: var(--ink); text-decoration: none;
    border: 1px solid var(--rule);
    background: var(--card);
    transition: border-color .16s var(--ease);
}
.tchip:hover { border-color: var(--ink); color: var(--ink); }

/* ---------- Recent work ----------
   Three long-form blocks rather than a row of thumbnails. A programme that
   ran for two years cannot be explained in a 115-character excerpt, so each
   one gets a photograph, a paragraph, what was actually delivered, and a
   register strip of where / with whom / when.

   Rows alternate: the photograph sits left on 01 and 03 and right on 02, so
   three full-width blocks do not stack into one long column of images. */
.tworks { display: grid; gap: clamp(46px, 6.5vw, 88px); }

.twork {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
}
.twork--flip .twork__media { order: 2; }

.twork__media { margin: 0; min-width: 0; }
/* Each block sets --ar to its own photograph. That now shapes the frame
   rather than the image inside it. */
.twork__frame { display: block; overflow: hidden; background: var(--wash); aspect-ratio: var(--ar, 3 / 2); }
.twork__frame picture { display: block; width: 100%; height: 100%; }
/* Each block sets --ar to its own photograph's shape. A fixed frame ratio
   cropped the sides off the Sylhet group photo and clipped the people
   standing at either end of it; 3:2 is only the fallback. */
.twork__frame img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: saturate(.93); transition: transform .5s var(--ease), filter .3s;
}
a.twork__frame:hover img { transform: scale(1.03); filter: saturate(1.03); }
.twork__cap {
    font-family: var(--reg); font-size: 11px; line-height: 1.55;
    color: var(--faint);
    margin-top: 12px; padding-left: 13px;
    border-left: 3px solid var(--mark, var(--rule));
}

.twork__body { min-width: 0; }
.twork__n {
    display: flex; align-items: center; gap: 11px;
    font-family: var(--reg); font-size: 10.5px; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--mark, var(--accent));
    margin-bottom: 13px;
}
.twork__n i { display: block; width: 28px; height: 3px; flex: 0 0 28px; background: var(--mark, var(--accent)); }
.twork h3 { font-size: clamp(25px, 2.7vw, 36px); line-height: 1.13; margin-bottom: 15px; }
/* Block 03 carries its full project title verbatim. At the size above a
   180-character title runs to five lines and swamps the block, so a long
   title steps down instead of being cut. */
.twork h3.twork__long { font-size: clamp(21px, 1.9vw, 26px); line-height: 1.22; }
.twork__lede { font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.twork__lede + p { margin-top: 13px; font-size: 15.5px; color: var(--muted); }

/* What was actually delivered. Squares rather than disc bullets, to echo the
   section header marks instead of borrowing a list style from nowhere. */
.twork__did { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 9px; }
.twork__did li { position: relative; padding-left: 21px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.twork__did li::before {
    content: ''; position: absolute; left: 0; top: 8px;
    width: 9px; height: 9px; background: var(--mark, var(--accent));
}

/* Auto-fit rather than flex-wrap: three even columns divided by hairlines,
   so "Where / With / Framework" lands as a rule under the block instead of
   as a ragged second row. */
.twork__reg {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin: 22px 0 0; padding: 0;
    border-top: 1px solid var(--rule-soft);
}
.twork__reg > div { padding: 13px 20px 0; border-left: 1px solid var(--rule-soft); }
.twork__reg > div:first-child { padding-left: 0; border-left: 0; }
.twork__reg dt { font-family: var(--reg); font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--faint); }
.twork__reg dd { margin: 5px 0 0; font-size: 14px; line-height: 1.4; color: var(--ink-2); }

.twork .tmore { margin-top: 22px; }
/* No public page stands behind this one yet, so it says so rather than
   offering a link that goes nowhere. */
.twork__soon {
    display: inline-block; margin-top: 22px;
    font-family: var(--reg); font-size: 11px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--faint);
}

/* ---------- Publications ----------
   No cover images exist for these, so the design has to carry them: a large
   register numeral, the title, and the author string set small. */
.tpubs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 1px;
    background: var(--rule-soft);
    border: 1px solid var(--rule-soft);
}
.tpub {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 16px;
    background: var(--card);
    padding: 22px 22px 24px;
    text-decoration: none;
    transition: background .16s var(--ease);
}
.tpub:hover { background: #FBFCFD; }
.tpub__n {
    font-family: var(--display);
    font-size: 34px;
    font-weight: 300;
    line-height: 1;
    color: var(--f6);
    font-variant-numeric: tabular-nums;
}
.tpub h3 { font-size: 17.5px; line-height: 1.35; color: var(--ink); }
.tpub__authors { font-family: var(--reg); font-size: 11.5px; color: var(--faint); margin-top: 9px; line-height: 1.6; }
.tpub__go { font-family: var(--reg); font-size: 11.5px; font-weight: 600; color: var(--f7); margin-top: 12px; display: inline-block; }
.tpub:hover .tpub__go { text-decoration: underline; }

/* ---------- Notes ---------- */
.tnotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border-top: 1px solid var(--rule); }
.tnote { padding: 20px 20px 24px 0; border-right: 1px solid var(--rule-soft); text-decoration: none; display: block; }
.tnote:last-child { border-right: 0; }
.tnote + .tnote { padding-left: 20px; }
.tnote__img { display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--wash); margin-bottom: 15px; }
.tnote__img picture { display: block; width: 100%; height: 100%; }
.tnote__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.tnote:hover .tnote__img img { transform: scale(1.045); }
.tnote__lang { font-family: var(--reg); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--f3); margin-bottom: 9px; }
.tnote h3 { font-size: 18px; line-height: 1.35; color: var(--ink); }
.tnote h3:lang(bn) { font-size: 19px; font-weight: 600; }
.tnote p { font-size: 13.5px; color: var(--muted); margin-top: 8px; }
.tnote__by { font-family: var(--reg); font-size: 11px; color: var(--faint); margin-top: 12px; }
.tnote__by:lang(bn) { font-family: var(--bn); }

/* ---------- Support ---------- */
.tsupport { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 1px; background: var(--rule-soft); border: 1px solid var(--rule-soft); }
.tsupport__c { background: var(--card); padding: 22px 20px; }
.tsupport__k { font-family: var(--reg); font-size: 10px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--faint); margin-bottom: 9px; }
.tsupport__c p { font-size: 15px; line-height: 1.5; }
.tsupport__c a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.tsupport__c a:hover { border-bottom-color: var(--ink); }
.tsupport__id { font-family: var(--reg); font-size: 12px; color: var(--f5); margin-top: 6px; }

/* ---------- Join ---------- */
.tjoin { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(24px, 4vw, 54px); align-items: start; }
.tjoin__list { list-style: none; margin: 24px 0 0; padding: 0; }
.tjoin__list li + li { margin-top: 8px; }
.tjoin__list a {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap;
    background: var(--card); border: 1px solid var(--rule);
    padding: 15px 18px; text-decoration: none; color: var(--ink);
    transition: border-color .16s var(--ease), transform .16s var(--ease);
}
.tjoin__list a:hover { border-color: var(--f7); transform: translateX(3px); }
.tjoin__list strong { font-size: 16px; font-weight: 700; }
.tjoin__list span { font-family: var(--reg); font-size: 12.5px; color: var(--muted); }
.tjoin__box { border: 1px solid var(--rule); background: var(--card); padding: 24px; }
.tjoin__box h3 { font-size: 19px; margin-bottom: 14px; }
.tjoin__box p { font-size: 15px; margin-bottom: 9px; }
.tjoin__box a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); font-weight: 700; }
.tjoin__box a:hover { border-bottom-color: var(--ink); }
.tjoin__box address { font-style: normal; font-size: 14.5px; color: var(--muted); line-height: 1.6; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule-soft); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.tfoot {
    position: relative;
    /* Was #0A1620 — the same near-black as the hero band, which made the
       footer read as a hole at the bottom of the page. Lifted to a navy that
       still separates from the paper but has some light in it. */
    background: #132837;
    color: #B9CCD8;
    padding: clamp(32px, 3.2vw, 44px) 0 0;
    z-index: 0;
    isolation: isolate;
}
.tfoot::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(60% 90% at 4% 0%, rgba(14,117,188,.26), transparent 62%);
    z-index: -1;
}
.tfoot__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 2.4vw, 38px);
    padding-bottom: clamp(20px, 2.4vw, 30px);
}
/* No filter. `brightness(0) invert(1)` painted every pixel white, which threw
   away the seven colours the whole design is built on. This variant is drawn
   for a dark ground already. */
.tfoot__logo { height: 52px; width: auto; display: block; margin-bottom: 14px; }
.tfoot__blurb { font-size: 14.5px; color: #97AFBE; margin-top: 0; max-width: 40ch; }
.tfoot h4 {
    font-family: var(--reg); font-size: 10.5px; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase;
    color: #7593A5; margin-bottom: 12px;
}
.tfoot__links { list-style: none; margin: 0; padding: 0; }
.tfoot__links li + li { margin-top: 7px; }
.tfoot__links a, .tfoot__c a {
    color: #C6D8E2; text-decoration: none; font-size: 14.5px;
    border-bottom: 1px solid transparent;
    transition: color .15s var(--ease), border-color .15s var(--ease);
}
.tfoot__links a:hover, .tfoot__c a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.4); }
.tfoot__c p { font-size: 14.5px; margin-bottom: 7px; }
.tfoot__c address { font-style: normal; font-size: 14px; color: #97AFBE; line-height: 1.6; margin-top: 10px; }
/* Sits in .tfoot__bottom now, beside the copyright. Smaller, because on one
   line with 11.5px type a 40px button was the tallest thing there and set the
   height of the whole strip. */
.tfoot__social { display: flex; gap: 7px; }
.tfoot__social a {
    width: 32px; height: 32px; font-size: 13px;
    display: grid; place-items: center;
    border: 1px solid rgba(255,255,255,.2);
    color: #C6D8E2; text-decoration: none;
    transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.tfoot__social a:hover { background: #fff; color: #132837; border-color: #fff; }
.tfoot__bottom {
    display: flex; justify-content: space-between; align-items: center;
    gap: 14px 22px; flex-wrap: wrap;
    padding: 12px 0 16px;
    border-top: 1px solid rgba(255,255,255,.12);
}
/* margin-right:auto rather than space-between doing the work: with three
   children, space-between would strand the social icons in the middle of the
   line. This keeps the copyright left and groups the icons and the mark on
   the right. */
.tfoot__bottom p { font-family: var(--reg); font-size: 11.5px; color: #7593A5; margin-right: auto; }
.tfoot__ring { display: flex; gap: 4px; }
.tfoot__ring i { width: 22px; height: 5px; display: block; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
    .thero__in, .tfeature, .tfounder, .tjoin, .twork { grid-template-columns: minmax(0, 1fr); }
    /* Order is reset so every block reads photograph-then-text in one column. */
    .twork--flip .twork__media { order: 0; }
    .thero__text { padding-bottom: 30px; }
    .thero__stage { aspect-ratio: 4 / 3; }
    .thero__signal { display: none; }
    .thead__meta { margin-left: 0; flex-basis: 100%; text-align: left; }
    .tstrand, .tnote { border-right: 0; border-bottom: 1px solid var(--rule-soft); padding-right: 0; }
    .tstrand + .tstrand, .tnote + .tnote { padding-left: 0; }
    .tfounder__portrait { max-width: 250px; }
    .tfoot__grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}
@media (max-width: 560px) {
    .twrap, .tnav__in { width: calc(100% - 32px); }
    .thero__acts .tbtn, .tjoin .tbtn { width: 100%; }
    .thero__place { font-size: 9.5px; letter-spacing: .12em; }
    .tfoot__grid { grid-template-columns: minmax(0, 1fr); }
    .tpub { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 18px; }
    .tpub__n { font-size: 27px; }
    .twork__reg { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
    .twork__reg > div { border-left: 0; padding-left: 0; padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .trin-page *, .trin-page *::before, .trin-page *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ==========================================================================
   INNER PAGES
   --------------------------------------------------------------------------
   The homepage established the vocabulary: a navy band, a mono register line
   with a coloured mark, a serif title, square corners, hairline rules and the
   seven logo figures used as signals rather than as washes. Everything below
   carries that vocabulary onto the rest of the site, so a page is built by
   composing these instead of writing another per-page stylesheet.
   ========================================================================== */

/* ---------- Page hero ----------
   The homepage hero is a photographic band with a slideshow; an inner page
   does not need that weight, so this is the same ground and the same register
   line at roughly half the height. */
.tphero {
    position: relative;
    background: #0A1620;
    color: #fff;
    padding: clamp(44px, 5.2vw, 74px) 0 0;
    overflow: hidden;
    isolation: isolate;
}
.tphero::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(52% 78% at 6% 0%, rgba(14,117,188,.42), transparent 60%),
        radial-gradient(46% 74% at 96% 8%, rgba(36,171,226,.24), transparent 62%);
    z-index: -1;
}
.tphero .twrap { position: relative; z-index: 1; }

.tphero__key {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    font-family: var(--reg); font-size: 10.5px; font-weight: 600;
    letter-spacing: .19em; text-transform: uppercase;
    color: rgba(255,255,255,.62);
    margin-bottom: 18px;
}
.tphero__key i { width: 26px; height: 4px; flex: 0 0 26px; background: var(--mark, var(--f6)); display: block; }
.tphero__key a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); }
.tphero__key a:hover { color: #fff; border-bottom-color: #fff; }

.tphero__title {
    font-size: clamp(31px, 4.4vw, 54px);
    line-height: 1.06;
    color: #fff;
    max-width: 20ch;
}
/* A database title runs far longer than a written headline, so a page that
   prints one asks for the smaller size rather than being clipped. */
.tphero__title--long { font-size: clamp(24px, 2.7vw, 36px); line-height: 1.16; max-width: 34ch; }

.tphero__lede {
    margin-top: 18px;
    font-size: clamp(15.5px, 1.35vw, 17.5px);
    line-height: 1.62;
    color: rgba(255,255,255,.78);
    max-width: 62ch;
}
.tphero__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

/* The same white-on-navy treatment the homepage hero gives its buttons. */
.tphero .tbtn--solid, .tphero a.tbtn--solid { background: #fff; color: #0A1620; border-color: #fff; }
.tphero .tbtn--line,  .tphero a.tbtn--line  { color: #fff; border-color: rgba(255,255,255,.45); background: transparent; }
.tphero .tbtn--line:hover, .tphero a.tbtn--line:hover { background: #fff; color: #0A1620; border-color: #fff; }

/* Counts and dates, set as a register rather than as pills. */
.tphero__reg { display: flex; flex-wrap: wrap; margin-top: clamp(26px, 3vw, 38px); }
.tphero__reg > div { padding: 0 24px; border-left: 1px solid rgba(255,255,255,.18); }
.tphero__reg > div:first-child { padding-left: 0; border-left: 0; }
.tphero__reg dt, .tphero__reg__k {
    display: block;
    font-family: var(--reg); font-size: 9.5px; letter-spacing: .15em;
    text-transform: uppercase; color: rgba(255,255,255,.5);
}
.tphero__reg dd, .tphero__reg__v {
    display: block; margin: 6px 0 0;
    font-family: var(--display); font-size: 24px; line-height: 1.1; color: #fff;
    font-variant-numeric: tabular-nums;
}
.tphero__reg__v--sm { font-family: var(--body); font-size: 14.5px; line-height: 1.4; }

/* A photograph beside the words, on the pages that have one worth showing. */
.tphero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .78fr); gap: clamp(26px, 4vw, 58px); align-items: end; }
.tphero__media { margin: 0; align-self: end; aspect-ratio: 4 / 3; overflow: hidden; }
.tphero__media picture { display: block; width: 100%; height: 100%; }
.tphero__media img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.9); }
.tphero__cap { font-family: var(--reg); font-size: 10.5px; line-height: 1.5; color: rgba(255,255,255,.55); padding-top: 10px; }

/* Closes the band the way the homepage does. */
.tphero__ring { display: flex; margin-top: clamp(28px, 3.4vw, 46px); }
.tphero__ring i { flex: 1 1 0; height: 7px; display: block; }

/* ---------- Back link ---------- */
.tback {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--reg); font-size: 11px; font-weight: 600;
    letter-spacing: .13em; text-transform: uppercase;
    color: var(--muted); text-decoration: none;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 3px;
    transition: color .16s var(--ease), border-color .16s var(--ease), gap .16s var(--ease);
}
.tback:hover { color: var(--ink); border-bottom-color: var(--ink); gap: 12px; }
.tphero .tback { color: rgba(255,255,255,.66); border-bottom-color: rgba(255,255,255,.3); }
.tphero .tback:hover { color: #fff; border-bottom-color: #fff; }

/* ---------- Cards ----------
   Generalised from the homepage research cards, then rebuilt around the
   register idiom the rest of the site uses.

   The old card was a bordered box with a round dot beside its kicker. This
   one leads with the mark itself — the same 26x4 bar that opens every section
   header and every `.twork` block — so a grid of cards reads as a row of the
   logo's seven figures rather than as a row of generic tiles. The kicker sits
   on a hairline strip at the top of the body, the call to action sits on
   another at the foot, and the middle is left to the words. */
.tcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 20px; }
.tcards--wide { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }

.tcard {
    display: flex; flex-direction: column;
    background: var(--card);
    border: 1px solid var(--rule-soft);
    text-decoration: none; color: inherit;
    transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.tcard:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(12,26,38,.13);
    border-color: var(--rule);
    color: inherit;
}

.tcard__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--wash); }
.tcard__img picture { display: block; width: 100%; height: 100%; }
.tcard__img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: saturate(.92);
    transition: transform .5s var(--ease), filter .3s var(--ease);
}
.tcard:hover .tcard__img img { transform: scale(1.05); filter: saturate(1); }
/* Placeholder for rows with no photograph — the seven-bar mark, not an icon. */
.tcard__img--none { display: flex; align-items: flex-end; }
.tcard__img--none i { flex: 1 1 0; height: 7px; display: block; }

/* Sits on the photograph rather than cutting its corner off: a translucent
   plate reads as a label on the image instead of a sticker over it. */
.tcard__flag {
    position: absolute; left: 12px; bottom: 12px;
    font-family: var(--reg); font-size: 9.5px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    background: rgba(10,22,32,.82); color: #fff;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    padding: 5px 10px;
}
.tcard__flag--open { background: var(--f5); }
.tcard__flag--shut { background: var(--faint); }

.tcard__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 0 20px 0; }

/* The register strip: the mark, then the kicker, on its own hairline. */
.tcard__key {
    display: flex; align-items: center; gap: 11px;
    padding: 15px 0 14px;
    border-bottom: 1px solid var(--rule-soft);
    margin-bottom: 15px;
    font-family: var(--reg); font-size: 10px; font-weight: 600;
    letter-spacing: .15em; text-transform: uppercase; color: var(--faint);
}
/* Was a 7px dot. Now the section-header bar, in the card's own colour, and it
   lengthens on hover — the one piece of movement the card makes on its own. */
.tcard__key i {
    width: 26px; height: 4px; flex: 0 0 26px;
    background: var(--dot, var(--f6)); display: block;
    transition: width .3s var(--ease), flex-basis .3s var(--ease);
}
.tcard:hover .tcard__key i { width: 40px; flex-basis: 40px; }

.tcard h3 { font-size: 19px; line-height: 1.28; color: var(--ink); }
.tcard h3:lang(bn) { font-size: 19.5px; font-weight: 600; line-height: 1.5; }
.tcard p { font-size: 14px; color: var(--muted); margin-top: 9px; }

/* The foot, hairlined off the body and pushed down so every card in a row
   ends on the same line however short its excerpt is. */
.tcard__go {
    margin-top: auto;
    padding: 14px 0 16px;
    border-top: 1px solid var(--rule-soft);
    font-family: var(--reg); font-size: 11px; font-weight: 600;
    letter-spacing: .06em;
    color: var(--f7);
}
.tcard:hover .tcard__go { color: var(--ink); }
/* The excerpt and the byline need clearing above the foot; a bare margin on
   .tcard__go would collapse against `margin-top: auto`. */
.tcard__body > :nth-last-child(2) { margin-bottom: 16px; }

/* Label/value rows under a card title — vacancy, location, deadline. */
.tcard__rows { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.tcard__rows li { display: flex; gap: 9px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.tcard__rows b {
    font-family: var(--reg); font-size: 10px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
    flex: 0 0 74px; padding-top: 3px;
}

/* ---------- Feature row ----------
   One item given the width of the grid: photograph on one side, words on the
   other. The same shape as the homepage lead research card. */
.tlead { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(24px, 3.6vw, 52px); align-items: center; margin-bottom: clamp(30px, 3.6vw, 44px); }
.tlead__img { display: block; overflow: hidden; background: var(--wash); aspect-ratio: 4 / 3; }
.tlead__img picture { display: block; width: 100%; height: 100%; }
.tlead__img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.93); transition: transform .4s var(--ease); }
a.tlead__img:hover img { transform: scale(1.03); }
.tlead h3 { font-size: clamp(23px, 2.3vw, 31px); line-height: 1.16; margin-bottom: 12px; }
.tlead p { color: var(--muted); font-size: 15.5px; margin-bottom: 14px; }

/* ---------- Tabs ---------- */
.ttabs {
    display: flex; flex-wrap: wrap;
    border-bottom: 1px solid var(--rule);
    margin-bottom: clamp(28px, 3.4vw, 40px);
}
.ttab {
    appearance: none; background: none; border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    padding: 13px 20px 12px;
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--reg); font-size: 11.5px; font-weight: 600;
    letter-spacing: .13em; text-transform: uppercase;
    color: var(--muted); cursor: pointer; text-decoration: none;
    transition: color .16s var(--ease), border-color .16s var(--ease);
}
.ttab:first-child { padding-left: 0; }
.ttab:hover { color: var(--ink); }
.ttab.is-on { color: var(--ink); border-bottom-color: var(--f7); }
.ttab__n {
    font-size: 11px; font-weight: 500; letter-spacing: 0;
    background: var(--wash); color: var(--muted);
    padding: 2px 8px; font-variant-numeric: tabular-nums;
}
.ttab.is-on .ttab__n { background: var(--f7); color: #fff; }

/* ---------- Empty state ---------- */
.tempty {
    border: 1px dashed var(--rule);
    background: var(--card);
    padding: clamp(40px, 6vw, 72px) 26px;
    text-align: center;
}
.tempty__mark { display: flex; width: 84px; margin: 0 auto 22px; }
.tempty__mark i { flex: 1 1 0; height: 6px; display: block; }
.tempty h2, .tempty h3 { font-size: 21px; margin-bottom: 9px; }
.tempty p { color: var(--muted); font-size: 15px; max-width: 48ch; margin-inline: auto; }
.tempty a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.tempty a:hover { border-bottom-color: var(--ink); }

/* ---------- Long-form body ----------
   Editor HTML and hand-written copy both land here, so every element a
   contributor can produce is given a size rather than inheriting a default. */
.tprose { font-size: 16.5px; line-height: 1.75; color: var(--ink-2); max-width: 72ch; }
.tprose > * + * { margin-top: 18px; }
.tprose :where(h2) { font-size: clamp(21px, 2vw, 27px); margin-top: 38px; margin-bottom: -4px; }
.tprose :where(h3) { font-size: 19px; margin-top: 30px; margin-bottom: -6px; }
.tprose :where(h4) { font-size: 17px; margin-top: 26px; margin-bottom: -8px; }
.tprose :where(ul) { list-style: none; padding-left: 0; display: grid; gap: 8px; }
.tprose :where(ul) > li { position: relative; padding-left: 21px; }
.tprose :where(ul) > li::before {
    content: ''; position: absolute; left: 0; top: .62em;
    width: 7px; height: 7px; background: var(--mark, var(--f6));
}
.tprose :where(ol) { list-style: decimal; padding-left: 22px; display: grid; gap: 8px; }
.tprose :where(ol) > li::marker { font-family: var(--reg); font-size: 13px; color: var(--faint); }
.tprose :where(a) { color: var(--f7); text-decoration: none; border-bottom: 1px solid var(--rule); }
.tprose :where(a):hover { border-bottom-color: var(--f7); }
.tprose :where(strong, b) { font-weight: 700; color: var(--ink); }
.tprose :where(img) { max-width: 100%; height: auto; display: block; }
.tprose :where(blockquote) {
    margin-left: 0; padding: 4px 0 4px 20px;
    border-left: 3px solid var(--f2);
    font-family: var(--display); font-size: 19px; line-height: 1.5; color: var(--ink);
}
.tprose :where(table) { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tprose :where(th, td) { border: 1px solid var(--rule-soft); padding: 9px 12px; text-align: left; }
.tprose :where(th) { font-family: var(--reg); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.tprose :where(hr) { border: 0; border-top: 1px solid var(--rule-soft); margin: 30px 0; }
.tprose--wide { max-width: none; }

/* ---------- Article blocks ----------
   A page built from named database columns — objective, method, result —
   reads as a register rather than as a run of anonymous headings. */
.tblocks { display: grid; gap: clamp(30px, 3.6vw, 46px); }
.tblock { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); }
.tblock__k {
    font-family: var(--reg); font-size: 10.5px; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
    padding-top: 6px;
    border-top: 3px solid var(--mark, var(--f6));
    align-self: start;
}
.tblock h2 { font-size: clamp(20px, 1.9vw, 25px); margin-bottom: 12px; }

/* ---------- Register / facts grid ---------- */
.tfacts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin: 0;
    border-top: 1px solid var(--rule);
}
.tfacts > div { padding: 14px 20px 16px; border-left: 1px solid var(--rule-soft); }
.tfacts > div:first-child { padding-left: 0; border-left: 0; }
.tfacts dt { font-family: var(--reg); font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--faint); }
.tfacts dd { margin: 6px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }

/* ---------- Sidebar layouts ---------- */
.twith { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: clamp(28px, 4vw, 58px); align-items: start; }
.twith--left { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); }
.tstick { position: sticky; top: calc(var(--nav-h) + 20px); }

.tbox { border: 1px solid var(--rule); background: var(--card); padding: 22px 22px 24px; }
.tbox + .tbox { margin-top: 20px; }
.tbox h3, .tbox h4 {
    font-family: var(--reg); font-size: 10.5px; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
    padding-bottom: 12px; margin-bottom: 14px;
    border-bottom: 1px solid var(--rule-soft);
}
.tbox p { font-size: 14.5px; color: var(--muted); }
.tbox__pts { list-style: none; margin: 0; padding: 0; }
.tbox__pts li { position: relative; padding: 9px 0 9px 20px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); border-bottom: 1px solid var(--rule-soft); }
.tbox__pts li:last-child { border-bottom: 0; padding-bottom: 0; }
.tbox__pts li::before { content: ''; position: absolute; left: 0; top: 1.05em; width: 7px; height: 7px; background: var(--mark, var(--f5)); }

/* Recent-posts list: thumbnail, title, nothing else. */
.tmini { list-style: none; margin: 0; padding: 0; }
.tmini li + li { margin-top: 14px; border-top: 1px solid var(--rule-soft); padding-top: 14px; }
.tmini a { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 13px; align-items: start; text-decoration: none; color: var(--ink); }
.tmini__img { display: block; overflow: hidden; aspect-ratio: 1 / 1; background: var(--wash); }
.tmini__img picture { display: block; width: 100%; height: 100%; }
.tmini__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tmini span { font-size: 14px; line-height: 1.4; }
.tmini a:hover span { color: var(--f7); }

/* ---------- Side rail ----------
   The reading companion on a post. It replaced a plain "recent posts" box,
   which listed rows from one editorial category and called them recent.

   Three things, sticky beside the article: how far through the post you are,
   a way to take the link with you, and where to go next. The progress bar is
   the reason it is sticky at all — without it the rail is just a list that
   happens to follow you down the page. */
.trail { position: sticky; top: calc(var(--nav-h) + 20px); display: grid; gap: 26px; }

.trail__sec { border-top: 2px solid var(--ink); padding-top: 14px; }
.trail__k {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    font-family: var(--reg); font-size: 10px; font-weight: 600;
    letter-spacing: .17em; text-transform: uppercase; color: var(--faint);
}
.trail__k b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Reading position. The track is a hairline until it has something to show. */
.trail__prog { height: 4px; background: var(--rule-soft); margin-top: 12px; overflow: hidden; }
.trail__prog i {
    display: block; height: 100%; width: 0;
    background: var(--mark, var(--f3));
    transition: width .1s linear;
}

/* Actions — copy link, and whatever else a post carries. */
.trail__acts { display: grid; gap: 8px; margin-top: 14px; }
.trail__act {
    appearance: none; -webkit-appearance: none;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; text-align: left;
    background: none; border: 1px solid var(--rule);
    padding: 11px 14px; cursor: pointer;
    font-family: var(--reg); font-size: 11px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink); text-decoration: none;
    transition: border-color .16s var(--ease), background .16s var(--ease), color .16s var(--ease);
}
.trail__act:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.trail__act span:last-child { color: var(--faint); font-size: 13px; line-height: 1; }
.trail__act:hover span:last-child { color: var(--paper); }
.trail__act.is-done { border-color: var(--f5); color: var(--f5); background: none; }

/* Where to go next. Numbered rather than thumbnailed: at 68px a cover photo
   is a smudge, and the numerals give the rail the same register the rest of
   the page is set in. The mark appears on the left edge on hover. */
.trail__list { list-style: none; margin: 0; padding: 0; }
.trail__list li { border-bottom: 1px solid var(--rule-soft); }
.trail__list li:last-child { border-bottom: 0; }
.trail__list a {
    display: grid; grid-template-columns: 3px 26px minmax(0, 1fr); gap: 0 12px;
    align-items: start;
    padding: 13px 0; text-decoration: none; color: var(--ink);
    transition: padding-left .18s var(--ease);
}
.trail__list a:hover { padding-left: 6px; }
.trail__list a::before {
    content: ''; align-self: stretch;
    background: var(--dot, var(--f6));
    transform: scaleY(0); transform-origin: top;
    transition: transform .2s var(--ease);
}
.trail__list a:hover::before { transform: scaleY(1); }
.trail__n {
    font-family: var(--reg); font-size: 11px; color: var(--faint);
    font-variant-numeric: tabular-nums; padding-top: 2px;
}
.trail__t { font-size: 14.5px; line-height: 1.4; }
.trail__t:lang(bn) { font-size: 15px; line-height: 1.65; }
.trail__list a:hover .trail__t { color: var(--f7); }
.trail__meta {
    display: block; margin-top: 5px;
    font-family: var(--reg); font-size: 9.5px; letter-spacing: .13em;
    text-transform: uppercase; color: var(--faint);
}

@media (max-width: 900px) {
    .trail { position: static; }
    /* The bar tracks a column that is no longer beside the text. */
    .trail__prog, .trail__sec--prog { display: none; }
}

/* Vertical page navigation — clinical services, team categories. */
.tsidenav { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.tsidenav li { border-bottom: 1px solid var(--rule-soft); }
.tsidenav a, .tsidenav button {
    appearance: none; background: none; border: 0; width: 100%; text-align: left;
    display: flex; align-items: center; gap: 12px;
    padding: 14px 4px 14px 0;
    font-family: var(--body); font-size: 15px; color: var(--muted);
    text-decoration: none; cursor: pointer;
    transition: color .16s var(--ease), padding .16s var(--ease);
}
.tsidenav a:hover, .tsidenav button:hover { color: var(--ink); padding-left: 6px; }
.tsidenav i { width: 4px; height: 18px; flex: 0 0 4px; background: transparent; display: block; }
.tsidenav .is-on { color: var(--ink); font-weight: 700; }
.tsidenav .is-on i { background: var(--mark, var(--f7)); }

/* ---------- Citations ----------
   The publications page, grouped by project. */
.tcitegroup + .tcitegroup { margin-top: clamp(34px, 4vw, 48px); }
.tcitegroup__h {
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
}
.tcitegroup__k { font-family: var(--reg); font-size: 10px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--f2); }
.tcitegroup__h h2 { font-size: 19px; line-height: 1.3; flex: 1 1 260px; min-width: 0; }
.tcitegroup__n { font-family: var(--reg); font-size: 11.5px; color: var(--faint); white-space: nowrap; }

.tcites { list-style: none; margin: 0; padding: 0; }
.tcite {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 18px;
    padding: 22px 0 24px;
    border-bottom: 1px solid var(--rule-soft);
}
.tcite--img { grid-template-columns: 54px 118px minmax(0, 1fr); }
.tcite__n { font-family: var(--display); font-size: 32px; font-weight: 300; line-height: 1; color: var(--f6); font-variant-numeric: tabular-nums; }
.tcite__thumb { border: 1px solid var(--rule-soft); background: var(--wash); align-self: start; }
.tcite__thumb picture, .tcite__thumb img { display: block; width: 100%; height: auto; }
.tcite h3 { font-size: 17.5px; line-height: 1.38; }
.tcite h3 a { color: inherit; text-decoration: none; }
.tcite h3 a:hover { color: var(--f7); }
.tcite__by { font-family: var(--reg); font-size: 11.5px; line-height: 1.6; color: var(--faint); margin-top: 9px; }
.tcite__desc { font-size: 14.5px; line-height: 1.65; color: var(--muted); margin-top: 10px; }
.tcite .tmore { margin-top: 13px; }

/* ---------- People ---------- */
/* These were 92px circles: a portrait shrunk to a chat avatar, and cropped
   square on the way. The photograph is the point of a team card, so it now
   takes the full width of the card at portrait proportions and the words sit
   underneath it. */
.tpeople {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 1px;
    background: var(--rule-soft);
    border: 1px solid var(--rule-soft);
}
.tperson {
    background: var(--card);
    display: flex; flex-direction: column;
    padding: 0 20px 22px;
    text-decoration: none; color: inherit;
    transition: background .16s var(--ease);
}
.tperson:hover { background: #FBFCFD; color: inherit; }

/* display:block is load-bearing. This is a <span>, so without it the box is
   inline and width, height and overflow are ignored outright — the portraits
   rendered at their intrinsic size and ran into one another.

   The negative inline margin bleeds the photograph to the card edges while
   the text below keeps the card's padding, so the picture gets every pixel
   the column has without needing a wrapper element around the words. */
.tperson__photo {
    display: block;
    margin: 0 -20px 18px;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--wash);
}
.tperson__photo picture { display: block; width: 100%; height: 100%; }
.tperson__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* No portrait on file: the initials fill the same frame rather than leaving a
   hole where a face should be. */
.tperson__photo--initials {
    display: grid; place-items: center;
    font-family: var(--display); font-size: clamp(38px, 5vw, 54px);
    font-weight: 300; letter-spacing: .04em;
    color: var(--faint);
}

.tperson h3 { font-size: 18px; line-height: 1.25; }
.tperson__role { font-family: var(--reg); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--f7); margin-top: 9px; line-height: 1.5; }
.tperson__aff { font-size: 13.5px; color: var(--muted); margin-top: 9px; line-height: 1.5; }
.tperson__go { font-family: var(--reg); font-size: 11px; font-weight: 600; color: var(--faint); margin-top: auto; padding-top: 14px; display: inline-block; }
.tperson:hover .tperson__go { color: var(--f7); }

/* ---------- Gallery ---------- */
.tgal { display: grid; gap: 14px; }
.tgal__main { background: #0A1620; overflow: hidden; }
.tgal__main img { width: 100%; display: block; max-height: 620px; object-fit: contain; }
.tgal__cap { font-family: var(--reg); font-size: 11px; line-height: 1.55; color: var(--faint); }
.tgal__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.tgal__thumb {
    appearance: none; padding: 0; border: 1px solid var(--rule-soft); background: var(--wash);
    aspect-ratio: 4 / 3; overflow: hidden; cursor: pointer;
    transition: border-color .16s var(--ease), opacity .16s var(--ease);
    opacity: .72;
}
.tgal__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tgal__thumb:hover { opacity: 1; }
.tgal__thumb.is-on { opacity: 1; border-color: var(--f7); }

/* A plain grid, for pages that only need to show every photograph. */
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.tgrid figure { margin: 0; }
.tgrid__f { display: block; overflow: hidden; background: var(--wash); aspect-ratio: 4 / 3; }
.tgrid__f picture { display: block; width: 100%; height: 100%; }
.tgrid__f img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.tgrid figure:hover .tgrid__f img { transform: scale(1.05); }
.tgrid figcaption { font-family: var(--reg); font-size: 10.5px; line-height: 1.5; color: var(--faint); padding-top: 8px; }

/* ---------- Notice ---------- */
.tnotice {
    border: 1px solid var(--rule-soft);
    border-left: 3px solid var(--mark, var(--f2));
    background: var(--card);
    padding: 16px 20px;
    font-size: 14.5px; line-height: 1.6; color: var(--ink-2);
}

/* ---------- Modal ----------
   Used where a card's full text has no page of its own to live on. */
.tmodal {
    position: fixed; inset: 0; z-index: 1200;
    display: grid; place-items: center;
    padding: 24px;
    background: rgba(10,22,32,.72);
    opacity: 0; visibility: hidden;
    transition: opacity .2s var(--ease), visibility .2s var(--ease);
}
.tmodal.is-on { opacity: 1; visibility: visible; }
.tmodal__d {
    background: var(--card);
    width: min(100%, 680px);
    max-height: 88vh; overflow: auto;
    transform: translateY(14px);
    transition: transform .24s var(--ease);
    position: relative;
}
.tmodal.is-on .tmodal__d { transform: none; }
.tmodal__img { width: 100%; height: 230px; object-fit: contain; display: block; background: #0F2029; }
.tmodal__x {
    position: absolute; top: 12px; right: 12px;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    background: rgba(10,22,32,.8); color: #fff;
    border: 0; cursor: pointer; font-size: 17px; line-height: 1;
}
.tmodal__x:hover { background: var(--ink); }
.tmodal__b { padding: 26px 28px 30px; }
.tmodal__b h3 { font-size: clamp(21px, 2.2vw, 27px); line-height: 1.18; margin-bottom: 14px; }
.tmodal__b p { font-size: 15.5px; line-height: 1.7; color: var(--muted); }
.tmodal__b p + p { margin-top: 14px; }
.tmodal__b iframe { width: 100%; height: 70vh; border: 0; display: block; }
body.tlocked { overflow: hidden; }

/* ---------- Floating action ---------- */
.tfab {
    position: fixed; right: 22px; bottom: 22px; z-index: 900;
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--ink); color: var(--paper);
    padding: 14px 20px;
    font-family: var(--reg); font-size: 11.5px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(12,26,38,.26);
    transition: transform .16s var(--ease), background .16s var(--ease), opacity .2s var(--ease);
}
.tfab:hover { background: var(--f7); color: #fff; transform: translateY(-2px); }

/* ---------- Inner-page responsive ---------- */
@media (max-width: 900px) {
    .tphero__in, .twith, .twith--left, .tlead { grid-template-columns: minmax(0, 1fr); }
    .tstick { position: static; }
    .tblock { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .tcite--img { grid-template-columns: 40px minmax(0, 1fr); }
    .tcite--img .tcite__thumb { grid-column: 2; max-width: 190px; }
    .tphero__reg > div { border-left: 0; padding-left: 0; padding-right: 26px; }
}
@media (max-width: 560px) {
    .tphero__title { font-size: clamp(26px, 8vw, 34px); }
    .tphero__acts .tbtn { width: 100%; }
    .tcite { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
    .tcite__n { font-size: 25px; }
    .tfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tfacts > div { border-left: 0; padding-left: 0; padding-right: 16px; }
    .ttab { padding: 12px 14px; }
    .ttab:first-child { padding-left: 0; }
    .tfab { right: 14px; bottom: 14px; padding: 12px 16px; }
    .tmodal { padding: 0; }
    .tmodal__d { max-height: 100vh; height: 100%; width: 100%; }
}

/* `hidden` has to win over the display value a component sets, or a
   filtered-out card and a closed tab panel both stay on screen. */
.trin-page [hidden] { display: none !important; }

/* Links inside a register cell, which otherwise fall back to the site's older
   global stylesheets for their colour. */
.tfacts dd a, .tbox__pts a, .tcard__rows a {
    color: var(--f7); text-decoration: none;
    border-bottom: 1px solid var(--rule);
}
.tfacts dd a:hover, .tbox__pts a:hover, .tcard__rows a:hover { border-bottom-color: var(--f7); }

/* A card that is a <button> inherits none of the font or reset a link gets. */
button.tcard, button.tbtn, button.ttab, button.tgal__thumb, button.tsidenav {
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}
button.tcard { padding: 0; border: 1px solid var(--rule-soft); cursor: pointer; }

/* `p` and `body` are sized by the layout's own inline <style> block, which
   still ships with the old theme. Anything inside a section of the new design
   takes its size from the component instead. */
.trin-page :where(.tsec, .tphero, .tfoot) p { text-align: left; }

/* The layout's inline `p { font-size: 20px }` is a direct element match, so it
   outranks inheritance from .tprose. Restated here with class specificity. */
.tprose p, .tprose li { font-size: 16.5px; line-height: 1.75; }
.tprose li { line-height: 1.6; }

/* ==========================================================================
   CONTAINED PHOTOGRAPHS
   --------------------------------------------------------------------------
   Emitted by <x-img fit="contain">. A frame has one shape and the photographs
   put into it have many — 4:3 scans, 16:9 workshop shots, near-square phone
   pictures, banner PNGs. `cover` resolved that by cutting: the ends came off
   group photos, the tops off banners, and the caption under them described
   people who were no longer in the picture.

   So the photograph is shown whole and the frame is filled behind it with a
   magnified, blurred copy of the same file — the treatment the homepage hero
   has used since it was built, lifted out so every frame can use it.

   These selectors are deliberately more specific than the frame rules they
   override (.tcard__img img and friends), so this block works wherever it
   sits in the file.
   ========================================================================== */
.tfit {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #0F2029;
}
.tfit__blur {
    position: absolute;
    inset: -12%;
    background-size: cover;
    background-position: center;
    filter: blur(26px) saturate(1.15) brightness(.68);
    transform: scale(1.06);
}
.tfit > picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}
.tfit > picture > img,
.tfit > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;   /* never crops, whatever the source ratio */
    object-position: center;
}

/* A frame that is contained has nothing to gain from a saturation shift on
   the photograph and a static plate behind it, so the two move together. */
.tcard:hover .tcard__img .tfit__blur,
a.tlead__img:hover .tfit__blur,
a.twork__frame:hover .tfit__blur { transform: scale(1.1); }
.tfit__blur { transition: transform .5s var(--ease); }

/* On a light section the dark plate is the point — it separates the picture
   from the page. Inside the navy hero band it would disappear, so it lifts. */
.tphero .tfit { background: #16303F; }

/* ==========================================================================
   MASTHEADS
   --------------------------------------------------------------------------
   There was one page hero — .tphero — and it was stamped on seventeen pages:
   navy band, mono kicker, serif title, lede, stat row, seven-colour bar. The
   silhouette was identical every time, so the pages read as the same page with
   the words swapped, however different their contents were.

   Coherence is not supposed to come from repeating a shape. It comes from the
   type system underneath: Newsreader for display, the mono register, the seven
   logo marks, hairline rules, square corners. That is shared here by every
   masthead below.

   What differs is the material. A listing page opens with the thing it lists;
   a page with no pictures opens with type; a bilingual page opens bilingually;
   a document opens like a document. Each archetype is picked for what the page
   IS, and built from what the page HAS.

   The navy band survives, but only on About and Clinical care. Two pages, not
   seventeen — which is what makes it read as a statement rather than as
   wallpaper. The homepage keeps the photographic hero to itself.
   ========================================================================== */

.tmast {
    position: relative;
    background: var(--paper);
    padding-top: clamp(30px, 4vw, 54px);
}
/* The page's own mark, as one rule across the foot of the masthead. On the
   navy band this job is done by all seven colours; here it is one, and it is
   a different one on every page. */
.tmast::after {
    content: '';
    display: block;
    height: 3px;
    background: var(--mark, var(--f7));
    margin-top: clamp(24px, 3vw, 38px);
}
.tmast--flush::after { margin-top: 0; }

.tmast__key {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    font-family: var(--reg); font-size: 10.5px; font-weight: 600;
    letter-spacing: .19em; text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 20px;
}
.tmast__key i { width: 26px; height: 4px; flex: 0 0 26px; background: var(--mark, var(--f7)); display: block; }
.tmast__key a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--rule); }
.tmast__key a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* Bigger and tighter than a section title: this is the largest type on the
   page and it is doing the work the navy band used to do. */
.tmast__h {
    font-size: clamp(40px, 6.4vw, 86px);
    line-height: .95;
    letter-spacing: -.032em;
    text-wrap: balance;
}
.tmast__h em { font-style: normal; color: var(--mark, var(--f7)); }

.tmast__lede {
    margin-top: 20px;
    font-size: clamp(15.5px, 1.4vw, 18px);
    line-height: 1.6;
    color: var(--muted);
    max-width: 54ch;
}

/* One hairline strip of real facts. Replaces the stat row that the old
   template asked every page to fill whether or not it had anything to say. */
.tmast__rail {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: 8px 30px;
    margin-top: clamp(24px, 3vw, 36px);
    padding-top: 14px;
    border-top: 1px solid var(--rule);
    font-family: var(--reg); font-size: 11px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
.tmast__rail b {
    font-family: var(--display); font-size: 21px; font-weight: 400;
    letter-spacing: 0; text-transform: none; color: var(--ink);
    font-variant-numeric: tabular-nums;
    margin-right: 7px;
}
/* Not nowrap. One of these carries the whole funder list — "Funded by NIH ·
   NIHR · Wellcome Trust · IBRO · Grand Challenges Canada" — which on a phone
   is far wider than the screen, and an unbreakable box widens the page rather
   than being clipped: the whole layout scrolled sideways and the nav's burger
   ended up off-screen. Only the short count pairs are held on one line. */
.tmast__rail span { min-width: 0; }
.tmast__rail span:has(b) { white-space: nowrap; }
.tmast__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }


/* --------------------------------------------------------------------------
   INDEX — Research, Capacity building
   The title on the left, a contact sheet of the page's own photographs on the
   right. It says "this is a body of work" before a word is read, and it is
   made of the work itself rather than of a stock banner.
   -------------------------------------------------------------------------- */
.tmast__in {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(28px, 4.5vw, 64px);
    align-items: end;
}

.tsheet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tsheet span {
    display: block; aspect-ratio: 1; overflow: hidden;
    background: var(--wash);
    position: relative;
}
/* The middle column drops, so the block reads as a contact sheet rather than
   as a tidy 3x2 grid of thumbnails. */
.tsheet span:nth-child(3n+2) { transform: translateY(16px); }
.tsheet img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.9); }
.tsheet span:last-child::after {
    /* the mark, dropped into the last cell like a colour swatch on a sheet */
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
    background: var(--mark, var(--f7));
}


/* --------------------------------------------------------------------------
   TYPOGRAPHIC — Publications
   This page has no photographs at all and never will; a paper is a citation,
   not a picture. So the masthead is type: the count set at poster scale, and
   the journals as a running line. It reads like the cover of a bibliography.
   -------------------------------------------------------------------------- */
.tmast--type .tmast__h { max-width: 16ch; }
.tnum {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(18px, 3vw, 40px);
    align-items: center;
}
.tnum__fig {
    font-family: var(--display); font-weight: 300;
    font-size: clamp(88px, 16vw, 210px);
    line-height: .78;
    letter-spacing: -.05em;
    color: var(--mark, var(--f6));
    font-variant-numeric: tabular-nums;
}
.tnum__say { font-size: clamp(16px, 1.6vw, 20px); line-height: 1.45; color: var(--ink-2); max-width: 22ch; }
.tnum__say b { display: block; font-family: var(--reg); font-size: 10.5px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--faint); margin-bottom: 10px; }

/* The journals, as a masthead rule the way a journal prints its own. */
.tbib {
    display: flex; flex-wrap: wrap; gap: 6px 16px;
    margin-top: clamp(26px, 3vw, 38px);
    padding: 15px 0;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--rule);
    font-family: var(--reg); font-size: 11.5px;
    letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
}
.tbib i { color: var(--rule); font-style: normal; }


/* The FILMSTRIP archetype that used to sit here was removed with the markup
   it served. It ran six photographs cropped to slivers across the top of the
   activities page, which read as a texture rather than as a statement, and
   nothing else on the site used it. */

/* --------------------------------------------------------------------------
   BILINGUAL SPLIT — Blog
   Most of what is written here is in Bangla. That is the single most
   distinctive fact about the page, so the masthead states it in the script
   itself: Noto Serif Bengali at display scale, set as the graphic element,
   with the English beside it.
   -------------------------------------------------------------------------- */
.tsplit {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(22px, 4vw, 56px);
    align-items: center;
}
.tsplit__bn {
    font-family: var(--bn);
    font-size: clamp(56px, 10vw, 132px);
    line-height: 1.05;
    color: var(--mark, var(--f3));
    letter-spacing: -.01em;
}
.tsplit__en { border-left: 1px solid var(--rule); padding-left: clamp(22px, 4vw, 56px); }
.tsplit__en .tmast__h { font-size: clamp(30px, 4vw, 54px); }
@media (max-width: 760px) {
    .tsplit { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .tsplit__en { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 20px; }
}


/* --------------------------------------------------------------------------
   LIVE LIST — Careers
   The openings are the reason anyone is on the page, so they are the masthead.
   Nothing decorative: a count, then the roles at the size of headlines.
   -------------------------------------------------------------------------- */
.tvac { list-style: none; margin: clamp(24px, 3vw, 34px) 0 0; padding: 0; border-top: 2px solid var(--ink); }
.tvac li { border-bottom: 1px solid var(--rule-soft); }
.tvac a {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px; align-items: baseline;
    padding: 15px 0; text-decoration: none; color: var(--ink);
    transition: padding-left .18s var(--ease), color .18s var(--ease);
}
.tvac a:hover { padding-left: 10px; color: var(--f7); }
.tvac__t { font-family: var(--display); font-size: clamp(19px, 2.1vw, 27px); line-height: 1.15; }
.tvac__m { font-family: var(--reg); font-size: 11px; letter-spacing: .11em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.tvac__m em { font-style: normal; color: var(--f5); }
.tvac__m em.is-shut { color: var(--faint); }


/* --------------------------------------------------------------------------
   FACES — Team
   A team page's material is people. The portraits overlap into one row at the
   top, the way a group stands for a photograph.
   -------------------------------------------------------------------------- */
.tfaces { display: flex; align-items: center; flex-wrap: wrap; row-gap: 10px; }
.tfaces span {
    display: block;
    width: clamp(56px, 7.4vw, 92px);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: var(--wash);
    border: 3px solid var(--paper);
    margin-left: -16px;
    position: relative;
}
.tfaces span:first-child { margin-left: 0; }
.tfaces img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tfaces__n {
    display: grid; place-items: center;
    font-family: var(--reg); font-size: 12px; font-weight: 600;
    color: var(--muted); background: var(--wash);
}


/* --------------------------------------------------------------------------
   DOCUMENT — a single project, post, job, activity or programme
   Not a band at all. An editorial masthead: the kicker rule, the title, a
   hairline of who and when, and then the photograph running the full width
   underneath rather than boxed in beside the words. A detail page should not
   look like an index page, and this is what separates them.
   -------------------------------------------------------------------------- */
.tmast--doc { padding-top: clamp(26px, 3.4vw, 44px); }
.tmast--doc::after { display: none; }
.tmast--doc .tmast__h {
    font-size: clamp(30px, 4vw, 56px);
    line-height: 1.03;
    max-width: 21ch;
}
/* A database title is long prose, not a headline. */
.tmast--doc .tmast__h--long { font-size: clamp(25px, 2.9vw, 40px); line-height: 1.12; max-width: 30ch; letter-spacing: -.022em; }
.tmast--doc .tmast__lede { max-width: 62ch; font-size: clamp(15.5px, 1.35vw, 17.5px); color: var(--ink-2); }

.tmast__by {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px;
    margin-top: clamp(20px, 2.4vw, 30px);
    padding: 13px 0;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--rule-soft);
    font-family: var(--reg); font-size: 11px;
    letter-spacing: .11em; text-transform: uppercase; color: var(--faint);
}
.tmast__by b { color: var(--ink-2); font-weight: 600; }
.tmast__by em { font-style: normal; color: var(--mark, var(--f7)); }

/* The lead photograph, wide and full width. Contained over its own blurred
   copy, so a portrait source is not cropped to a letterbox. */
.tmast__lead {
    display: block;
    margin-top: clamp(24px, 3vw, 36px);
    aspect-ratio: 16 / 7;
    overflow: hidden;
    background: var(--wash);
}
@media (max-width: 700px) { .tmast__lead { aspect-ratio: 4 / 3; } }
.tmast__leadcap {
    font-family: var(--reg); font-size: 10.5px; line-height: 1.55;
    color: var(--faint);
    margin-top: 10px; padding-left: 13px;
    border-left: 3px solid var(--mark, var(--rule));
}


/* --------------------------------------------------------------------------
   QUIET — the retired pages that only redirect
   No lede, no counts, no invented copy. It says what it is and sends you on.
   -------------------------------------------------------------------------- */
.tmast--quiet { padding-top: clamp(34px, 4.5vw, 60px); }
.tmast--quiet .tmast__h { font-size: clamp(26px, 3vw, 38px); line-height: 1.1; max-width: 24ch; }
.tmast--quiet::after { margin-top: clamp(28px, 3.4vw, 42px); }


/* --------------------------------------------------------------------------
   Shared responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .tmast__in { grid-template-columns: minmax(0, 1fr); }
    /* The contact sheet stops being a supporting note and starts being a
       second hero, so it is dropped rather than stacked under the title. */
    .tmast__in .tsheet { display: none; }
    .tnum { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* The vacancy list, inverted for the navy band on Clinical care. */
.tvac--dark { border-top-color: rgba(255,255,255,.55); }
.tvac--dark li { border-bottom-color: rgba(255,255,255,.14); }
.tvac--dark a { color: #fff; }
.tvac--dark a:hover { color: #fff; padding-left: 10px; }
.tvac--dark .tvac__m { color: rgba(255,255,255,.5); }

/* ==========================================================================
   ACTIVITY MOSAIC
   --------------------------------------------------------------------------
   The activities listing was a uniform grid of identical cards, which read as
   a set of exactly three things rather than as an open archive — and it was
   going to keep reading that way at four, at nine, at forty.

   This is a rhythm rather than a layout. Every fourth card takes two columns
   and a wider photograph; the rest take one. `grid-auto-flow: dense` backfills
   whatever hole that leaves, so the wall stays gapless at any number of items.
   Nothing here counts the activities or is tuned to today's three: add a
   fourth and it slots into the rhythm on its own.
   ========================================================================== */
.tacts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 20px;
}
/* The wide one. `4n+1` rather than a hardcoded first child, so the emphasis
   repeats down the page instead of happening once at the top. */
.tacts > :nth-child(4n+1) { grid-column: span 2; }
.tacts > :nth-child(4n+1) .tcard__img { aspect-ratio: 16 / 9; }
.tacts > :nth-child(4n+1) h3 { font-size: 22px; }
.tacts > :nth-child(4n+1) p { font-size: 14.5px; }

@media (max-width: 900px) {
    .tacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* At two columns "span 2" is the full width, which keeps the rhythm
       legible instead of flattening it. */
    .tacts > :nth-child(4n+1) .tcard__img { aspect-ratio: 2 / 1; }
}
@media (max-width: 620px) {
    .tacts { grid-template-columns: minmax(0, 1fr); }
    .tacts > :nth-child(4n+1) { grid-column: span 1; }
    .tacts > :nth-child(4n+1) .tcard__img { aspect-ratio: 16 / 10; }
    .tacts > :nth-child(4n+1) h3 { font-size: 19px; }
}

/* ---------- Earlier activities ----------
   Past the first handful the photographs stop earning their space: forty
   thumbnails is a wall, not an archive. Everything older collapses to a line
   each — title, strand, year — which stays readable however long it gets. */
.tarchive { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.tarchive li { border-bottom: 1px solid var(--rule-soft); }
.tarchive a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 20px; align-items: baseline;
    padding: 14px 0; text-decoration: none; color: var(--ink);
    transition: padding-left .18s var(--ease), color .18s var(--ease);
}
.tarchive a:hover { padding-left: 9px; color: var(--f7); }
.tarchive__t { font-family: var(--display); font-size: clamp(17px, 1.8vw, 21px); line-height: 1.25; }
.tarchive__m {
    font-family: var(--reg); font-size: 10.5px;
    letter-spacing: .13em; text-transform: uppercase;
    color: var(--faint); white-space: nowrap;
}
.tarchive__m em { font-style: normal; color: var(--mark, var(--f5)); }
@media (max-width: 560px) {
    .tarchive a { grid-template-columns: minmax(0, 1fr); }
    .tarchive__m { white-space: normal; }
}