/* ==========================================================
   Usama Rafid: Swiss (International Typographic Style)
   Black on white, one red accent, 12 column grid, hairline rules.
   No web fonts, no blur, no shadows, no gradients.
   ========================================================== */

:root{
  --white:#fff;
  --black:#000;
  --red:#e30613;
  --grey:#5c5c5c;
  --grey-light:#ededed;
  --rule:1px solid var(--black);
  --hair:1px solid #cfcfcf;
  --gutter:24px;
  --margin:24px;
  --max:1360px;
  --t-acad:#e30613; --t-ulab:#000; --t-roar:#2b2b2b; --t-tbs:#555; --t-coastal:#777; --t-bigd:#999; --t-pib:#bbb;
  --on-acad:#fff; --on-ulab:#fff; --on-roar:#fff; --on-tbs:#fff; --on-coastal:#fff; --on-bigd:#000; --on-pib:#000;
  --sans:"Helvetica Neue",Helvetica,Arial,"Liberation Sans","Noto Sans Bengali","Nirmala UI","Shonar Bangla",sans-serif;
}
@media(min-width:900px){ :root{ --margin:48px; } }

/* ---------- Dark theme ---------- */
:root[data-theme="dark"]{
  --white:#0c0c0c; --black:#f2f2f2; --red:#ff3b47; --grey:#a6a6a6; --grey-light:#1c1c1c;
  --hair:1px solid #3a3a3a;
  --t-acad:#ff3b47; --t-ulab:#fff; --t-roar:#d0d0d0; --t-tbs:#adadad; --t-coastal:#8a8a8a; --t-bigd:#686868; --t-pib:#4a4a4a;
  --on-acad:#000; --on-ulab:#000; --on-roar:#000; --on-tbs:#000; --on-coastal:#000; --on-bigd:#fff; --on-pib:#fff;
  color-scheme:dark;
}
:root[data-theme="dark"] .cover{ background:#1a1a1a; color:#fff; border:1px solid #444; }
:root[data-theme="dark"] .cover .label{ color:#fff; }
:root[data-theme="dark"] .cover.red{ background:#c4000f; border-color:#c4000f; }
:root[data-theme="dark"] .cover.white{ background:#0c0c0c; border-color:#f2f2f2; }
:root[data-theme="dark"] .cover.grey{ background:#2a2a2a; }
:root[data-theme="dark"] .btn.red,:root[data-theme="dark"] .tag.redfill{ color:#000; }
:root[data-theme="dark"] .grid-line{ border-color:#444; }
:root[data-theme="dark"] .timeline-item:hover{ background:#2a2a2a; }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:72px; }
body{
  margin:0; background:var(--white); color:var(--black);
  font-family:var(--sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--red); }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--red); color:var(--white); }
:focus-visible{ outline:3px solid var(--red); outline-offset:2px; }
.skip{ position:absolute; left:-9999px; top:0; background:var(--black); color:var(--white); padding:8px 12px; z-index:200; }
.skip:focus{ left:0; }

/* ---------- Grid ---------- */
.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--margin); }
.grid{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gutter); }
.span-12{ grid-column:1 / -1; }
@media(min-width:900px){
  .c-1-5{ grid-column:1 / span 5; }
  .c-1-6{ grid-column:1 / span 6; }
  .c-1-7{ grid-column:1 / span 7; }
  .c-1-8{ grid-column:1 / span 8; }
  .c-1-3{ grid-column:1 / span 3; }
  .c-1-4{ grid-column:1 / span 4; }
  .c-4-9{ grid-column:4 / span 9; }
  .c-5-8{ grid-column:5 / span 8; }
  .c-6-7{ grid-column:6 / span 7; }
  .c-7-6{ grid-column:7 / span 6; }
  .c-8-5{ grid-column:8 / span 5; }
  .c-9-4{ grid-column:9 / span 4; }
  .c-3-8{ grid-column:3 / span 8; }
}
@media(max-width:899px){ .grid > *{ grid-column:1 / -1; } }

/* ---------- Type ---------- */
.label{ font-size:12px; line-height:1.3; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.label.grey{ color:var(--grey); font-weight:400; }
.red{ color:var(--red); }
.display{ font-weight:700; letter-spacing:-.045em; line-height:.9; font-size:clamp(3.4rem,12.5vw,11rem); }
.h1{ font-weight:700; letter-spacing:-.04em; line-height:.95; font-size:clamp(2.8rem,8vw,6.5rem); }
.h2{ font-weight:700; letter-spacing:-.03em; line-height:1; font-size:clamp(2rem,4.6vw,3.75rem); }
.h3{ font-weight:700; letter-spacing:-.015em; line-height:1.15; font-size:1.25rem; }
.lead{ font-size:clamp(1.25rem,2.4vw,1.9rem); line-height:1.25; letter-spacing:-.015em; }
.body-l{ font-size:1.0625rem; line-height:1.6; }
.small{ font-size:14px; line-height:1.55; }
.grey{ color:var(--grey); }
.measure{ max-width:62ch; }

/* ---------- Header / nav ---------- */
.nav{ position:sticky; top:0; z-index:100; background:var(--white); border-bottom:var(--rule); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:56px; }
.brand{ font-weight:700; letter-spacing:-.02em; font-size:1.0625rem; }
.brand span{ color:var(--red); }
.nav-links{ display:none; gap:28px; }
.nav-links a{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:6px 0; border-bottom:2px solid transparent; }
.nav-links a:hover{ color:var(--black); border-color:var(--red); }
.nav-links a[aria-current="page"]{ border-color:var(--black); }
.nav-tools{ display:flex; gap:8px; align-items:center; }
.theme-btn{ background:none; border:var(--rule); padding:8px 12px; cursor:pointer; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; min-width:68px; }
.theme-btn:hover{ background:var(--black); color:var(--white); }
.menu-btn{ background:none; border:var(--rule); padding:8px 12px; cursor:pointer; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.mobile-menu{ display:none; border-top:var(--rule); background:var(--white); }
.mobile-menu.open{ display:block; }
.mobile-menu a{ display:flex; gap:16px; align-items:baseline; padding:16px var(--margin); border-bottom:var(--hair); font-size:1.75rem; font-weight:700; letter-spacing:-.03em; }
.mobile-menu a span{ font-size:12px; color:var(--red); letter-spacing:.08em; }
@media(min-width:760px){ .nav-links{ display:flex; } .menu-btn,.mobile-menu{ display:none !important; } }

/* ---------- Sections ---------- */
section,.band{ border-top:var(--rule); }
.sec{ padding:56px 0 72px; }
@media(min-width:900px){ .sec{ padding:72px 0 96px; } }
.sec-head{ margin-bottom:48px; align-items:end; row-gap:16px; }
.sec-head .num{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--red); display:block; margin-bottom:12px; }
.page-head{ padding:56px 0 64px; }
@media(min-width:900px){ .page-head{ padding:88px 0 96px; } }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border:var(--rule); background:var(--black); color:var(--white); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:background .15s, color .15s, border-color .15s; }
.btn:hover{ background:var(--red); border-color:var(--red); color:var(--white); }
.btn.ghost{ background:var(--white); color:var(--black); }
.btn.ghost:hover{ background:var(--black); border-color:var(--black); color:var(--white); }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }
.tlink{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; border-bottom:2px solid var(--black); padding-bottom:2px; }
.tlink:hover{ color:var(--red); border-color:var(--red); }

/* ---------- Tags / chips (flat) ---------- */
.tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tag{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--black); padding:4px 8px; line-height:1.2; }
.tag.fill{ background:var(--black); color:var(--white); }
.tag.red{ border-color:var(--red); color:var(--red); }
.tag.redfill{ background:var(--red); border-color:var(--red); color:var(--white); }

/* ---------- Home: hero ---------- */
.hero{ padding:48px 0 0; }
.hero-meta{ display:flex; justify-content:space-between; gap:24px; margin-bottom:40px; flex-wrap:wrap; }
.hero .display{ margin-bottom:32px; }
.hero-sub{ font-size:clamp(1.5rem,3vw,2.5rem); letter-spacing:-.025em; line-height:1.1; margin-bottom:32px; }
.portrait{ border:var(--rule); background:var(--grey-light); aspect-ratio:4/5; overflow:hidden; }
.portrait img{ width:100%; height:100%; object-fit:cover; }
.roles{ margin-top:16px; border-top:var(--rule); }
.roles li{ padding:10px 0; border-bottom:var(--hair); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; display:flex; justify-content:space-between; }
.topics{ margin-top:64px; border-top:var(--rule); border-bottom:var(--rule); overflow-x:auto; }
.topics ul{ display:flex; white-space:nowrap; }
.topics li{ padding:16px 24px 16px 0; margin-right:24px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; border-right:var(--hair); }
.topics li:last-child{ border-right:0; }

/* ---------- Statement ---------- */
.statement{ font-size:clamp(1.6rem,3.6vw,3rem); line-height:1.15; letter-spacing:-.03em; font-weight:700; }
.statement em{ font-style:normal; color:var(--red); }

/* ---------- Cards (flat, ruled) ---------- */
.cards{ display:grid; grid-template-columns:1fr; column-gap:var(--gutter); border-top:var(--rule); }
@media(min-width:760px){ .cards.c3{ grid-template-columns:repeat(3,1fr); } .cards.c2{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:760px){ .cards.c3x{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1100px){ .cards.c3x{ grid-template-columns:repeat(3,1fr); } }
.card{ display:flex; flex-direction:column; padding:24px 0 28px; border-bottom:var(--rule); }
a.card:hover{ color:inherit; }
a.card:hover .h3{ color:var(--red); }
.card .thumb{ aspect-ratio:16/10; background:var(--grey-light); overflow:hidden; margin-bottom:20px; border:1px solid var(--black); }
.card .thumb img{ width:100%; height:100%; object-fit:cover; }
.card .kicker{ margin-bottom:12px; }
.card .body{ margin-top:12px; color:var(--grey); font-size:14px; }
.card .foot{ margin-top:auto; padding-top:20px; }

/* Cover panels (replace gradient art) */
.cover{ aspect-ratio:16/9; background:var(--black); color:var(--white); padding:20px; display:flex; flex-direction:column; justify-content:space-between; margin-bottom:20px; }
.cover .label{ color:var(--white); opacity:.75; }
.cover strong{ font-size:clamp(1.8rem,3vw,2.4rem); line-height:.95; letter-spacing:-.04em; font-weight:700; }
.cover.red{ background:var(--red); }
.cover.white{ background:var(--white); color:var(--black); border:1px solid var(--black); }
.cover.white .label{ color:var(--black); opacity:1; }
.cover.grey{ background:#2a2a2a; }

/* ---------- Stat band ---------- */
.stats{ display:grid; grid-template-columns:repeat(2,1fr); border-top:var(--rule); border-bottom:var(--rule); }
@media(min-width:900px){ .stats{ grid-template-columns:repeat(4,1fr); } }
.stat{ padding:32px 24px 32px 0; border-right:var(--hair); }
.stat:last-child{ border-right:0; }
@media(min-width:900px){ .stat{ padding-left:24px; } .stat:first-child{ padding-left:0; } }
@media(max-width:899px){ .stat:nth-child(2){ border-right:0; } .stat:nth-child(-n+2){ border-bottom:var(--hair); } .stat{ padding-left:0; } .stat:nth-child(2n){ padding-left:24px; } }
.stat .n{ font-size:clamp(3rem,8vw,6.5rem); font-weight:700; letter-spacing:-.05em; line-height:.9; color:var(--red); display:block; margin-bottom:16px; }

/* ---------- Definition rows (credentials, lists) ---------- */
.rows{ border-top:var(--rule); }
.row{ display:grid; grid-template-columns:1fr; gap:8px; padding:20px 0; border-bottom:var(--hair); }
@media(min-width:900px){ .row{ grid-template-columns:repeat(12,1fr); column-gap:var(--gutter); padding:24px 0; } .row > .k{ grid-column:1 / span 4; } .row > .v{ grid-column:5 / span 8; } }
.row .k{ font-weight:700; }

/* ---------- Footer ---------- */
.footer{ border-top:var(--rule); padding:40px 0 48px; }
.footer .grid{ row-gap:24px; align-items:start; }
.footer ul{ display:flex; flex-wrap:wrap; gap:8px 24px; }
.footer a{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.totop{ background:none; border:var(--rule); padding:8px 14px; cursor:pointer; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.totop:hover{ background:var(--black); color:var(--white); }

/* ---------- Contact blocks ---------- */
.mail{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:20px 0; border-bottom:var(--rule); flex-wrap:wrap; }
.mail:first-of-type{ border-top:var(--rule); }
.mail .addr{ font-size:clamp(1.15rem,2.6vw,1.9rem); font-weight:700; letter-spacing:-.025em; word-break:break-all; }

/* ---------- About: timeline ---------- */
.legend{ display:flex; flex-wrap:wrap; gap:8px 20px; padding:14px 0; border-top:var(--rule); border-bottom:var(--hair); margin-bottom:16px; }
.legend span{ display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.sw{ width:12px; height:12px; display:inline-block; background:var(--black); }
.tl-hint{ margin-bottom:12px; }
.timeline-scroll-container{ overflow-x:auto; overflow-y:hidden; border:var(--rule); padding:12px; -webkit-overflow-scrolling:touch; background:var(--white); }
.timeline-scroll-container::-webkit-scrollbar{ height:10px; }
.timeline-scroll-container::-webkit-scrollbar-thumb{ background:var(--black); }
.timeline-scroll-container::-webkit-scrollbar-track{ background:var(--grey-light); }
#timeline-canvas{ position:relative; display:flex; flex-direction:column; gap:12px; padding:4px 0; }
.timeline-grid{ display:grid; grid-template-columns:repeat(var(--timeline-columns,132),minmax(18px,1fr)); position:relative; }
.grid-line{ position:absolute; top:0; bottom:0; width:0; border-left:1px dotted #bdbdbd; pointer-events:none; z-index:1; }
#timeline-grid-lines{ position:absolute; inset:0; pointer-events:none; }
#timeline-year-ruler{ background:var(--black); color:var(--white); height:36px; align-items:center; position:relative; z-index:2; }
#timeline-year-ruler span{ font-size:11px; font-weight:700; letter-spacing:.08em; text-align:left; padding:4px 0 4px 10px; border-right:1px solid #444; }
.track-tag{ position:sticky; left:0; z-index:5; display:flex; align-items:center; }
.track-tag .tag:not(.fill){ background:var(--white); }
.timeline-item,.timeline-label{ font:inherit; color:inherit; }
.timeline-item{ cursor:pointer; height:28px; align-self:center; position:relative; z-index:3; background:var(--grey-light); border:1px solid var(--black); border-left:6px solid var(--bar,var(--black)); display:flex; align-items:center; gap:8px; padding:0 8px; overflow:hidden; transition:background .12s; }
.timeline-item:hover{ background:#d8d8d8; }
.timeline-item.active{ background:var(--black); color:var(--white); }
.timeline-item small{ font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.timeline-item span.t{ font-size:11px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.timeline-label{ text-align:left; background:none; border:0; padding:0 6px 0 0; cursor:pointer; position:relative; z-index:3; align-self:start; }
.timeline-label:hover{ color:var(--red); }
.timeline-label .d{ display:block; font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.timeline-label .r{ display:block; font-size:11px; font-weight:700; line-height:1.2; }
.timeline-label .o{ display:block; font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--grey); margin-top:2px; }
.detail{ border:var(--rule); border-top:0; padding:24px; }
.detail .head{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; padding-bottom:20px; border-bottom:var(--rule); margin-bottom:20px; }
.detail ul.duties li{ padding:12px 0 12px 28px; border-bottom:var(--hair); position:relative; }
.detail ul.duties li::before{ content:""; position:absolute; left:0; top:20px; width:12px; height:2px; background:var(--red); }
.detail .skills{ display:flex; flex-wrap:wrap; gap:8px; }
.detail-grid{ display:grid; grid-template-columns:1fr; gap:32px; }
@media(min-width:900px){ .detail-grid{ grid-template-columns:2fr 1fr; } }
.hidden{ display:none !important; }

/* ---------- Academic ---------- */
details.course{ border-bottom:var(--rule); }
details.course:first-of-type{ border-top:var(--rule); }
details.course summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:20px 0; }
details.course summary::-webkit-details-marker{ display:none; }
details.course summary .plus{ font-size:1.5rem; line-height:1; font-weight:400; }
details.course[open] summary .plus{ transform:rotate(45deg); }
details.course summary:hover .h3{ color:var(--red); }
details.course .inner{ padding:0 0 28px; }
.themes{ display:grid; grid-template-columns:1fr; gap:0; margin-top:16px; border-top:var(--hair); }
@media(min-width:600px){ .themes{ grid-template-columns:1fr 1fr; column-gap:24px; } }
.themes li{ padding:8px 0; border-bottom:var(--hair); font-size:13px; font-weight:700; }
.pub{ padding:28px 0; border-bottom:var(--rule); }
.pub:first-of-type{ border-top:var(--rule); }
.abstract{ display:none; border-left:6px solid var(--red); padding:4px 0 4px 16px; margin-top:16px; }
.abstract.open{ display:block; }
.pipeline{ border:var(--rule); }
.pipeline .row2{ display:grid; grid-template-columns:1fr 1fr; }
.pipeline .row2 > div{ padding:28px 24px; }
.pipeline .row2 > div + div{ border-left:var(--rule); }
.feature{ display:grid; grid-template-columns:1fr; border-top:var(--rule); }
@media(min-width:900px){ .feature{ grid-template-columns:7fr 5fr; } }
.feature figure{ margin:0; aspect-ratio:16/9; background:var(--grey-light); overflow:hidden; }
.feature figure img{ width:100%; height:100%; object-fit:cover; }
.feature .txt{ padding:24px 0 32px; }
@media(min-width:900px){ .feature .txt{ padding:0 0 0 32px; } }
.feature + .feature{ margin-top:48px; }

/* ---------- Projects ---------- */
.proj-status{ display:inline-block; }

/* ---------- Reportage ---------- */
.strip{ display:flex; gap:0; overflow-x:auto; border-top:var(--rule); border-bottom:var(--rule); -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; }
.strip a{ flex:0 0 280px; padding:20px 20px 24px 0; margin-right:20px; border-right:var(--hair); scroll-snap-align:start; }
@media(min-width:760px){ .strip a{ flex-basis:320px; } }
.strip a:hover{ color:inherit; }
.strip a:hover h3{ color:var(--red); }
.strip .thumb{ aspect-ratio:16/10; background:var(--grey-light); border:1px solid var(--black); overflow:hidden; margin-bottom:14px; }
.strip .thumb img{ width:100%; height:100%; object-fit:cover; }
.filters{ position:sticky; top:56px; z-index:50; background:var(--white); border-top:var(--rule); border-bottom:var(--rule); padding:16px 0; margin-bottom:0; }
.filters input[type=search], .filters select{ width:100%; font:inherit; font-size:15px; padding:10px 12px; border:var(--rule); border-radius:0; background:var(--white); color:var(--black); appearance:none; -webkit-appearance:none; }
.filters select{ background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:32px; }
.filters .selects{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:12px; }
@media(min-width:760px){ .filters .selects{ grid-template-columns:repeat(4,1fr); } }
.filters label span{ display:block; margin-bottom:4px; }
.filters .meta{ display:flex; justify-content:space-between; align-items:center; margin-top:12px; }
.linkbtn{ background:none; border:0; border-bottom:2px solid var(--black); padding:0 0 2px; cursor:pointer; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.linkbtn:hover{ color:var(--red); border-color:var(--red); }
.arow{ display:grid; grid-template-columns:1fr; gap:12px; padding:24px 0; border-bottom:var(--hair); }
@media(min-width:900px){ .arow{ grid-template-columns:160px 1fr 132px; column-gap:var(--gutter); } }
.arow:hover{ color:inherit; }
.arow:hover h2{ color:var(--red); }
.arow time{ font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; display:block; }
.arow h2{ font-size:1.3rem; line-height:1.2; letter-spacing:-.015em; font-weight:700; margin:8px 0; }
.arow .thumb{ display:none; }
@media(min-width:900px){ .arow .thumb{ display:block; width:132px; height:88px; border:1px solid var(--black); overflow:hidden; background:var(--grey-light); } .arow .thumb img{ width:100%; height:100%; object-fit:cover; } }
.dot{ display:inline-block; width:8px; height:8px; margin-right:6px; background:var(--black); }
.empty{ text-align:center; padding:96px 0; }

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; } }
@media print{ .nav,.filters,.totop,.menu-btn{ display:none; } }

/* ---------- Dark hover on every photo ---------- */
.thumb,.portrait,.feature figure{ position:relative; }
.thumb::after,.portrait::after,.feature figure::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.6); opacity:0; transition:opacity .2s; pointer-events:none; }
.portrait:hover::after,.feature figure:hover::after,a.card:hover .thumb::after,.arow:hover .thumb::after,.strip a:hover .thumb::after,.thumb:hover::after{ opacity:1; }

/* ---------- Feature (talks, workshops) ---------- */
.feature .txt{ display:flex; flex-direction:column; justify-content:center; padding:24px 0 36px; }
@media(min-width:900px){ .feature .txt{ padding:0 0 0 32px; } }
.feature .ft{ font-size:clamp(1.6rem,2.6vw,2.2rem); line-height:1.05; letter-spacing:-.03em; font-weight:700; }
.feature .ft-sub{ margin-top:14px; font-size:1.2rem; line-height:1.25; letter-spacing:-.01em; color:var(--grey); }
.feature .ft-venue{ margin-top:28px; font-style:italic; }
.feature .ft-date{ margin-top:12px; }
.feature .ft-desc{ margin-top:20px; }
.feature .ft-btns{ margin-top:28px; }
.feature .ft + .ft-venue{ margin-top:28px; }
.feature + .feature{ margin-top:64px; }
.plist{ margin-top:16px; border-top:var(--hair); }
.plist li{ padding:8px 0; border-bottom:var(--hair); font-size:14px; font-weight:700; }

a.card:hover .btn{ background:var(--red); border-color:var(--red); color:var(--white); }
a.card:hover .cover{ opacity:.9; }

/* ---------- Topic marquee ---------- */
.topics{ overflow:hidden; }
.topics ul.marquee-track{ display:flex; width:max-content; align-items:center; animation:marquee 28s linear infinite; }
.topics:hover ul.marquee-track{ animation-play-state:paused; }
.topics li{ padding:18px 32px; margin:0; border-right:0; display:flex; align-items:center; line-height:1; }
.topics li::after{ content:"/"; color:var(--red); margin-left:64px; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){
  .topics ul.marquee-track{ animation:none; width:auto; flex-wrap:wrap; justify-content:center; }
  .topics li[aria-hidden="true"]{ display:none; }
}

/* Professional track: one colour */
:root{ --t-roar:var(--black); --t-tbs:var(--black); --t-coastal:var(--black); --t-bigd:var(--black); --t-pib:var(--black); --t-ulab:var(--black); --on-roar:var(--white); --on-tbs:var(--white); --on-coastal:var(--white); --on-bigd:var(--white); --on-pib:var(--white); --on-ulab:var(--white); }
:root[data-theme="dark"]{ --t-roar:var(--black); --t-tbs:var(--black); --t-coastal:var(--black); --t-bigd:var(--black); --t-pib:var(--black); --t-ulab:var(--black); --on-roar:var(--white); --on-tbs:var(--white); --on-coastal:var(--white); --on-bigd:var(--white); --on-pib:var(--white); --on-ulab:var(--white); }
#timeline-lanes .timeline-item:not(:has(small)){ background:var(--black); }
#timeline-lanes .timeline-item.active:not(:has(small)){ background:var(--red); border-color:var(--red); }

.timeline-label .o{ color:var(--black); font-weight:700; margin-top:1px; }
.timeline-label .d{ color:var(--grey); margin-top:1px; }
:root[data-theme="dark"] #timeline-lanes .timeline-grid{ border-color:#3a3a3a !important; }

/* Professional bars with the label directly above */
.pro{ background:none; border:0; padding:0; margin:0; text-align:left; cursor:pointer; font:inherit; color:inherit; display:block; position:relative; z-index:3; min-width:0; }
.pro .pl{ display:flex; align-items:baseline; gap:8px; white-space:nowrap; padding:0 0 4px; position:sticky; left:0; width:max-content; max-width:none; }
.pro.rt{ direction:rtl; }
.pro.rt .pl{ direction:ltr; }
.pro .pl b{ font-size:12px; font-weight:700; }
.pro .pl i{ font-style:normal; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--grey); }
.pro .pbar{ display:block; height:14px; width:100%; padding:0; border-left-width:1px; }
.pro:hover .pl b,.pro:has(.pbar.active) .pl b{ color:var(--red); }
.pro:hover .pbar{ background:var(--red); }
.pro.rt .pl{ position:relative; }

.pro{ display:grid; text-align:left; }
.pro .pl{ grid-column:1 / -1; grid-row:1; position:sticky; left:0; width:max-content; justify-self:start; }
.pro .pbar{ grid-row:2; width:auto; }
.pro.rt,.pro.rt .pl{ direction:ltr; }

/* Detail header: date block pinned right */
.detail .head{ flex-wrap:nowrap; align-items:flex-start; }
.detail .head > div:first-child{ flex:1 1 0; min-width:0; }
.detail .head > div:last-child{ flex:0 0 auto; text-align:right; white-space:nowrap; }
@media (max-width:700px){
  .detail .head{ flex-wrap:wrap; }
  .detail .head > div:first-child{ flex:1 1 100%; }
  .detail .head > div:last-child{ flex:1 1 100%; }
}
/* Equal height timeline rows */
#timeline-lanes .timeline-grid{ min-height:56px; box-sizing:border-box; }
#timeline-lanes .timeline-grid:has(.track-tag){ min-height:30px; }

/* Compact timeline */
#timeline-lanes .timeline-grid{ min-height:0; padding-top:2px !important; padding-bottom:3px !important; }
#timeline-lanes .timeline-grid:has(.track-tag){ height:22px; min-height:0; padding:0 !important; margin-top:4px !important; }
.pro .pl{ padding-bottom:2px; }
.pro .pl b{ font-size:11px; }
.pro .pl i{ font-size:9px; }
.pro .pbar{ height:10px; }
.timeline-scroll-container{ padding:8px 12px; }
.detail .head{ padding-bottom:12px; margin-bottom:12px; }
.pro .pl{ line-height:1.1; padding-bottom:1px; }
#timeline-lanes .timeline-grid{ padding-top:1px !important; padding-bottom:2px !important; }
#timeline-lanes .timeline-grid:has(.track-tag){ height:20px; margin-top:2px !important; }
.timeline-header,.timeline-years{ line-height:1; }

/* Subtle timeline grid */
.grid-line{ border-left:1px solid rgba(0,0,0,.07); }
#timeline-lanes .timeline-grid{ border-bottom-color:rgba(0,0,0,.07) !important; }
:root[data-theme="dark"] .grid-line{ border-color:rgba(255,255,255,.09); }
:root[data-theme="dark"] #timeline-lanes .timeline-grid{ border-color:rgba(255,255,255,.09) !important; }

/* Awards */
.award{ border-top:var(--rule); padding:32px 0 40px; row-gap:20px; align-items:start; }
.award:last-child{ border-bottom:var(--rule); }
.award figure{ margin:0; position:relative; overflow:hidden; background:var(--grey-light); }
.award figure img{ display:block; width:100%; height:auto; }
.award figure::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.6); opacity:0; transition:opacity .2s; pointer-events:none; }
.award figure:hover::after{ opacity:1; }
.award figure{ aspect-ratio:4/3; }
.award figure img{ height:100%; object-fit:cover; object-position:50% 40%; }
.award figure{ aspect-ratio:5/4; }
.award figure{ aspect-ratio:3/2; }

/* Footer columns */
.footer .fcols{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.footer .fcols ul{ display:flex; flex-direction:column; flex-wrap:nowrap; gap:10px; }

/* Two features per row */
.pair{ display:grid; grid-template-columns:1fr; gap:48px 32px; }
@media(min-width:900px){ .pair{ grid-template-columns:1fr 1fr; } }
.pair .feature{ grid-template-columns:1fr; margin-top:0; align-content:start; }
.pair .feature + .feature{ margin-top:0; }
.pair .feature .txt{ padding:20px 0 0; justify-content:flex-start; }

/* Three-stat band */
@media(min-width:900px){ .stats.s3{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:899px){ .stats.s3{ grid-template-columns:1fr; } .stats.s3 .stat{ border-right:0; border-bottom:var(--hair); padding-left:0; } .stats.s3 .stat:last-child{ border-bottom:0; } }

/* Affiliation logos: grey by default, full colour on hover */
.affil-wrap{ margin-top:32px; display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:flex-start; gap:24px 56px; }
.affil-group .affil{ gap:16px 32px; }
.affil{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 40px; margin-top:12px; }
.affil a,.affil .tile{ display:flex; align-items:center; justify-content:center; height:56px; }
.affil img{ display:block; height:56px; width:auto; max-width:160px; object-fit:contain; filter:grayscale(1); opacity:.5; transition:filter .25s ease, opacity .25s ease; }
.affil a:hover img,.affil a:focus-visible img{ filter:none; opacity:1; }
:root[data-theme="dark"] .affil img{ filter:grayscale(1) invert(1); opacity:.55; }
:root[data-theme="dark"] .affil a:hover img,:root[data-theme="dark"] .affil a:focus-visible img{ filter:none; opacity:1; }
@media(hover:none){ .affil img{ opacity:.8; } }
@media (prefers-reduced-motion:reduce){ .affil img{ transition:none; } }

/* Homepage hero: portrait and roles at 85% width, right aligned on desktop only */
@media(min-width:900px){ .hero .c-9-4 .portrait,.hero .c-9-4 .roles{ width:85%; margin-left:auto; } }

/* Homepage name: 95% of the base display size on desktop */
.hero .display.home-name{ font-size:clamp(3.23rem,11.875vw,10.45rem); }
/* Mobile: first screen holds the name, buttons and logos; the portrait starts just below the fold */
@media(max-width:899px){
  .hero .c-1-8{ min-height:calc(100vh - 56px - 48px); min-height:calc(100svh - 56px - 48px); display:flex; flex-direction:column; justify-content:space-between; }
  .hero .display.home-name{ font-size:clamp(4rem,27vw,8rem); margin-bottom:0; }
  .hero .c-1-8 .hero-sub{ margin-bottom:0; }
  .hero .affil-wrap{ margin-top:0; padding-bottom:8px; }
}

/* ---------- Project cover motifs ---------- */
.cover{ position:relative; overflow:hidden; }
.cover .motif{ position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.5; opacity:.22; pointer-events:none; }
.cover .motif *{ vector-effect:non-scaling-stroke; }
.cover > .label,.cover > strong{ position:relative; z-index:1; }
.cover.white .motif{ opacity:.35; }
.tag .dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; margin-right:6px; vertical-align:middle; animation:dotpulse 2.4s ease-in-out infinite; }
@keyframes dotpulse{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
@media(prefers-reduced-motion:reduce){ .tag .dot{ animation:none; } }