/* ==========================================================================
   MECH KU — one design system for public site + admin.
   Palette is taken from the department logo: slate square + crimson bar.
   ========================================================================== */
:root {
  --ink: #1b2227;
  --slate: #5c6872;
  --slate-deep: #323b42;
  --slate-ink: #262d33;
  --crimson: #7f1618;
  --crimson-deep: #5f1012;
  --paper: #ffffff;
  --mist: #f3f5f6;
  --mist-2: #e9edef;
  --line: #d8dee2;
  --muted: #5d6870;
  --ok: #1f6b46;
  --warn: #8a5a00;
  --radius: 2px;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --font: "Kanit", "Noto Sans Thai", "Leelawadee UI", "Tahoma", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 300 1rem/1.8 var(--font);
  -webkit-font-smoothing: antialiased;
  /* lines break between words (the browser knows Thai words as well as English ones); a single word longer than the line,
     such as a long e-mail or web address, is split only then. Never "anywhere" / "break-all": they cut Thai words in half. */
  word-break: normal; overflow-wrap: break-word;
}
b, strong, th { font-weight: 500; }
/* a person's title, first name and surname each stay whole (i18n.pname_html): lines break between them only */
.np { white-space: nowrap; }
/* a long word (a web address, an e-mail) wraps instead of widening the page: a grid or flex item may be narrower than its longest word */
.layout > *, .article-layout > *, .lab-page > *, .lab-facts, .lab-facts dl > *, .labs > li, .labs > li > *, .contact-layout > *, .contact-cards > *, .contact-cards > * > *,
.contact-list li > *, .site-footer .wrap > *, .foot-list li > *, .profile > *, .profile-card > *, .topbar .links > *, .ext-list li > * { min-width: 0; }
/* buttons and form boxes do not take the page font by themselves: every one is Kanit, also those added later */
button, input, select, textarea { font-family: inherit; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--crimson); text-underline-offset: 3px; }
a:hover { color: var(--crimson-deep); }
h1, h2, h3, h4 { font-weight: 500; line-height: 1.35; margin: 0 0 .5em; }
h1 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
h2 { font-size: clamp(1.35rem, 2.2vw, 1.6rem); }
h3 { font-size: 1.12rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--crimson); outline-offset: 2px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--crimson); color: #fff; padding: .6rem 1rem; z-index: 100; }
.skip:focus { left: 0; }
.muted { color: var(--muted); }

/* ---- signature: the drafting ruler used under every section title ---- */
.ruler {
  position: relative; height: 10px; margin: .35rem 0 1.5rem;
  background:
    linear-gradient(var(--crimson), var(--crimson)) left top / 56px 3px no-repeat,
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 12px) left bottom / 100% 6px no-repeat,
    linear-gradient(var(--line), var(--line)) left 1px / 100% 1px no-repeat;
}
/* padding-block only: "wrap section" elements keep the side gutter of .wrap (so content lines up with the page head) */
.section { padding-block: clamp(40px, 6vw, 72px); }
.page-head + .section, .page-head + .wrap.section { padding-top: clamp(26px, 3.5vw, 44px); }
.section.tint { background: var(--mist); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.more-link { font-weight: 500; text-decoration: none; border-bottom: 2px solid var(--crimson); padding-bottom: 2px; white-space: nowrap; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; justify-content: center;
  font: 500 1rem/1.2 var(--font); padding: .7rem 1.15rem; border-radius: var(--radius);
  background: var(--crimson); color: #fff; border: 1px solid var(--crimson); text-decoration: none; cursor: pointer;
  transition: background-color .15s, color .15s;
  vertical-align: middle;   /* side by side in a line of text: a button with an icon would otherwise sit higher than one without */
}
.btn:hover { background: var(--crimson-deep); color: #fff; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--slate); }
.btn.ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.small { padding: .4rem .75rem; font-size: .9rem; }
.btn.danger { background: #fff; color: #a10d12; border-color: #a10d12; }
.btn.danger:hover { background: #a10d12; color: #fff; }

/* ==========================================================================
   Header
   ========================================================================== */
.topbar { background: var(--slate-ink); color: #cfd6db; font-size: .9rem; }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 40px; }
.topbar a { color: #e8edf0; text-decoration: none; }
.topbar a:hover { color: #fff; text-decoration: underline; }
.topbar .links { display: flex; gap: 1.25rem; flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere; }
/* search: one rounded box (field + button); the focus ring goes around the whole box, not half of it */
.topbar form { display: flex; border: 1px solid #4d5961; border-radius: 999px; overflow: hidden; background: #3a444b; transition: border-color .15s, box-shadow .15s; }
.topbar form:focus-within { border-color: #c9d1d6; box-shadow: 0 0 0 2px rgba(255,255,255,.18); }
.topbar input[type=search] {
  background: transparent; border: 0; color: #fff; padding: .3rem .4rem .3rem .95rem; width: 12rem;
  font: inherit; font-size: .9rem; border-radius: 0 !important; outline: none;
}
.topbar input[type=search]::-webkit-search-cancel-button { filter: invert(1); opacity: .6; }
.topbar input::placeholder { color: #a9b3ba; }
.topbar button { background: transparent; border: 0; color: #fff; padding: 0 .9rem 0 .6rem; border-radius: 0; cursor: pointer; font: inherit; font-size: .9rem; }
.topbar button:hover, .topbar button:focus-visible { background: var(--crimson); outline: none; }

.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 76px; }
.brand img { height: 52px; width: auto; }
.nav { display: flex; align-items: center; gap: .15rem; }
.nav li, .nav > a { list-style: none; position: relative; }
.nav, .nav ul { margin: 0; padding: 0; }
.nav a.top, .nav button.top {
  display: block; padding: .7rem .8rem; color: var(--ink); font: 500 1rem/1.2 var(--font); text-decoration: none;
  background: none; border: 0; cursor: pointer; border-bottom: 3px solid transparent;
}
.nav a.top:hover, .nav button.top:hover, .nav li:focus-within > .top, .nav a.top[aria-current] { border-bottom-color: var(--crimson); }
.nav .sub {
  display: none; position: absolute; top: 100%; left: 0; min-width: 16rem; background: var(--paper);
  border: 1px solid var(--line); border-top: 3px solid var(--crimson); padding: .4rem 0; z-index: 60;
  box-shadow: 0 12px 24px -12px rgba(27, 34, 39, .35);
}
.nav li:hover > .sub, .nav li.open > .sub { display: block; animation: dd .2s var(--ease); }
@keyframes dd { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.nav .sub a { display: block; padding: .5rem 1.1rem; color: var(--ink); text-decoration: none; font-size: .98rem; line-height: 1.45; }
.nav .sub a:hover { background: var(--mist); color: var(--crimson); }
@media (min-width: 981px) { .nav > li:nth-last-child(-n+3) > .sub { left: auto; right: 0; } }   /* the last menus open inwards: they ran off the screen */
.menu-toggle { display: none; background: none; border: 1px solid var(--slate); border-radius: var(--radius); padding: .5rem .8rem; font: 500 1rem var(--font); cursor: pointer; }

.nav .nav-mobile { display: none; }
@media (max-width: 980px) {
  .topbar { display: none; }
  .nav .nav-mobile { display: block; border-top: 1px solid var(--line); margin-top: .5rem; padding-top: .6rem; }
  .nav-mobile a { display: block; padding: .5rem .2rem; color: var(--ink); text-decoration: none; }
  .nav-mobile form { display: flex; margin-bottom: .4rem; }
  .nav-mobile input { flex: 1; min-width: 0; padding: .55rem .7rem; font: inherit; border: 1px solid var(--slate); border-radius: var(--radius) 0 0 var(--radius); }
  .nav-mobile button { background: var(--slate-ink); color: #fff; border: 0; padding: 0 1rem; font: inherit; border-radius: 0 var(--radius) var(--radius) 0; }
  .menu-toggle { display: inline-block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); flex-direction: column; align-items: stretch;
         border-bottom: 1px solid var(--line); padding: .5rem var(--gutter) 1rem; max-height: calc(100vh - 120px); overflow: auto; }
  .nav.open { display: flex; animation: menu-in .22s var(--ease); box-shadow: 0 18px 30px -22px rgba(0, 0, 0, .45); }
  @keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .menu-toggle[aria-expanded="true"] { background: var(--slate-ink); color: #fff; border-color: var(--slate-ink); }
  .nav .sub, .nav li:hover > .sub { display: none; position: static; box-shadow: none; border: 0; border-left: 3px solid var(--line); margin: 0 0 .4rem .5rem; padding: 0; }
  .nav li.open > .sub { display: block; }
  .nav a.top, .nav button.top { padding: .7rem .2rem; border-bottom: 0; width: 100%; text-align: left; display: flex; justify-content: space-between; }
  .nav button.top::after { content: "+"; font-weight: 400; }
  .nav li.open > button.top::after { content: "–"; }
  .topbar input[type=search] { width: 8rem; }
  .brand img { height: 44px; }
}

/* ==========================================================================
   Home — hero
   ========================================================================== */
.hero { background: var(--mist); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0; padding-top: 0; padding-bottom: 0; }
.hero-panel {
  position: relative; background: var(--slate); color: #fff; padding: clamp(24px, 3.5vw, 44px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 32px 32px;
}
.hero-panel::after { content: ""; position: absolute; left: clamp(24px, 3.5vw, 44px); right: clamp(24px, 3.5vw, 44px); bottom: 0; height: 8px; background: var(--crimson); }
.hero-panel .dept { font-size: .98rem; opacity: .9; margin: 0 0 .5rem; }
.hero-panel h1 { font-size: clamp(1.5rem, 2.6vw, 2rem); color: #fff; margin-bottom: .8rem; }
.hero-panel p { color: #eef2f4; max-width: 30rem; }
.quick { list-style: none; margin: 0 0 .75rem; padding: 0; border-top: 1px solid rgba(255,255,255,.35); }
.quick a { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); font-weight: 500; }
.quick a::after { content: "›"; font-size: 1.3rem; line-height: 1; }
.quick a:hover { background: rgba(255,255,255,.1); padding-left: .5rem; padding-right: .5rem; }
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; padding: 0; }
}

/* ---- news list rows ---- */
.news-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); }
@media (max-width: 900px) { .news-split { grid-template-columns: 1fr; } }
.news-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.news-rows li { border-bottom: 1px solid var(--line); }
.news-rows a { display: grid; grid-template-columns: 7.2rem 1fr; gap: 1rem; padding: 1rem 0; text-decoration: none; color: var(--ink); }
.news-rows a:hover h3 { color: var(--crimson); }
.news-rows time { color: var(--muted); font-size: .95rem; }
.news-rows h3 { font-size: 1.05rem; margin: 0 0 .2rem; font-weight: 500; transition: color .15s; }
.news-rows .cat { font-size: .88rem; color: var(--slate); }
@media (max-width: 520px) { .news-rows a { grid-template-columns: 1fr; gap: .2rem; } }

/* ---- news cards ---- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }
.cards.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }       /* beside the news list on the home page */
@media (max-width: 560px) { .cards.cards-2 { grid-template-columns: 1fr; } }
.card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--line); text-decoration: none; color: var(--ink);
  transition: border-top-color .15s, transform .3s var(--ease), box-shadow .3s var(--ease); }
.card:hover { border-top-color: var(--crimson); transform: translateY(-4px); box-shadow: 0 16px 28px -18px rgba(27, 34, 39, .45); }
.card:active { transform: translateY(-1px); transition-duration: .08s; }
.card:hover h3 { color: var(--crimson); }
.card .thumb { aspect-ratio: 16 / 10; background: var(--mist-2); overflow: hidden; }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card:hover .thumb img { transform: scale(1.06); }
@media (hover: none) { .card:hover { transform: none; box-shadow: none; } .card:hover .thumb img { transform: none; } }
.card .body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.card h3 { font-size: 1.08rem; margin: 0; font-weight: 500; transition: color .15s; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card .meta { font-size: .9rem; color: var(--muted); margin-top: auto; padding-top: .4rem; }
.thumb-ph { width: 100%; height: 100%; display: grid; place-items: center; background: var(--mist-2); }
.thumb-ph img { width: 38%; opacity: .25; }

.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; }
.filters a { padding: .35rem .9rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink); font-size: .95rem; overflow-wrap: anywhere; }
.filters a:hover { border-color: var(--slate); }
.filters a[aria-current] { background: var(--ink); color: #fff; border-color: var(--ink); }
.pager { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: 2rem; }
.pager a, .pager span { min-width: 2.5rem; text-align: center; padding: .45rem .7rem; border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.pager a:hover { border-color: var(--crimson); color: var(--crimson); }
.pager [aria-current] { background: var(--crimson); color: #fff; border-color: var(--crimson); }

/* ==========================================================================
   Page head + prose
   ========================================================================== */
.page-head { background: var(--mist); border-bottom: 1px solid var(--line); padding: clamp(28px, 4vw, 48px) 0 0; }
.page-head .crumbs { font-size: .92rem; color: var(--muted); margin-bottom: .6rem; }
.page-head .crumbs a { color: var(--muted); display: inline-block; padding: .2rem 0; }       /* a 24px+ target for a finger */
.page-head h1 { margin-bottom: 0; }
.page-head .lead { color: var(--muted); font-size: 1.1rem; max-width: 46rem; margin-top: .6rem; }
.page-head .ruler { margin: 1.2rem 0 0; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: clamp(24px, 5vw, 64px); padding: clamp(28px, 4vw, 48px) 0 clamp(48px, 6vw, 80px); }
.layout.no-side { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }
.side-nav { align-self: start; position: sticky; top: 100px; border-top: 3px solid var(--crimson); background: var(--mist); }
.side-nav h2 { font-size: 1rem; padding: .8rem 1rem .2rem; margin: 0; color: var(--muted); font-weight: 500; }
.side-nav ul { list-style: none; margin: 0; padding: .3rem 0 .6rem; }
.side-nav a { display: block; padding: .45rem 1rem; color: var(--ink); text-decoration: none; font-size: .98rem; line-height: 1.45; border-left: 3px solid transparent; }
.side-nav a:hover { background: var(--mist-2); }
.side-nav a[aria-current] { border-left-color: var(--crimson); font-weight: 600; background: #fff; }

.prose { max-width: 46rem; }
.prose.wide { max-width: none; }
.prose h2 { margin-top: 2em; font-size: 1.5rem; }
/* Heading 1 in the editor: a section title like the home page's, text after its first space on the right (util._section_heads) */
.prose .content-head { margin-top: 2.4rem; }
.prose .content-head:first-child { margin-top: 0; }
.prose .content-head h2, .page-body .content-head h2 { margin: 0; padding: 0; border-left: 0; }   /* not the bar of Heading 2 */
.prose .content-head .more-link { color: var(--crimson); text-decoration: none; }
.prose .content-head .more-link:hover { color: var(--ink); }
.prose .content-head .more-text { color: var(--muted); font-weight: 500; }
.prose .content-head > * { min-width: 0; overflow-wrap: anywhere; }
.prose pre { max-width: 100%; overflow-x: auto; }            /* a long line of code scrolls in its box, not the whole page */
.prose .content-head + .ruler { margin-bottom: 1.2rem; }
.prose h3 { margin-top: 1.6em; }
.prose img { margin: 1.2rem 0; border: 1px solid var(--line); }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li { margin-bottom: .35em; }
.prose table { border-collapse: collapse; width: 100%; margin: 1.2rem 0; font-size: .98rem; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--line); padding: .5rem .7rem; text-align: left; vertical-align: top; }
.prose th { background: var(--mist); }
.prose blockquote { margin: 1.2rem 0; padding: .2rem 1.2rem; border-left: 4px solid var(--crimson); color: var(--slate-deep); background: var(--mist); }
.prose iframe { max-width: 100%; border: 0; aspect-ratio: 16 / 9; width: 100%; height: auto; }
.prose figure { margin: 1.2rem 0; }
.prose .ql-align-center { text-align: center; } .prose .ql-align-right { text-align: right; }
/* a picture sized and placed in the editor (width as a share of the column, like Word) */
/* (the :not() chain matches the plain figure rule below, so these win over it) */
.prose figure.sized:not(.pcard):not(.gal-slide) > img, .prose figure.sized:not(.pcard):not(.gal-slide) > a > img { max-height: none; }
.prose figure.img-left:not(.pcard):not(.gal-slide) > img, .prose figure.img-left:not(.pcard):not(.gal-slide) > a > img { margin-inline: 0 auto; }
.prose figure.img-right:not(.pcard):not(.gal-slide) > img, .prose figure.img-right:not(.pcard):not(.gal-slide) > a > img { margin-inline: auto 0; }
.prose figure.img-center:not(.pcard):not(.gal-slide) > img, .prose figure.img-center:not(.pcard):not(.gal-slide) > a > img { margin-inline: auto; }
.prose figure.sized > a, .prose figure[class*="img-"] > a { display: block; }

.article-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; color: var(--muted); font-size: .98rem; margin-top: .75rem; }
.article-cover { margin: 0 0 2rem; border: 1px solid var(--line); }
.article-cover img { width: 100%; }
.attach { list-style: none; padding: 0; margin: 2rem 0; border-top: 1px solid var(--line); }
.attach li { border-bottom: 1px solid var(--line); }
.attach a { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem .2rem; text-decoration: none; color: var(--ink); }
.attach a:hover { background: var(--mist); color: var(--crimson); }
.attach small { color: var(--muted); white-space: nowrap; }

/* ==========================================================================
   People
   ========================================================================== */
.people-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; }
@media (max-width: 1000px) { .people-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; } }
.person-card { display: block; text-decoration: none; color: var(--ink); }
.person-card .portrait { aspect-ratio: 4 / 5; background: var(--mist-2); border-bottom: 4px solid var(--line); overflow: hidden; transition: border-color .15s; }
.person-card:hover .portrait { border-color: var(--crimson); }
.person-card .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform .6s var(--ease); }
.person-card:hover .portrait img { transform: scale(1.05); }
.person-card h3 { font-size: 1.02rem; font-weight: 600; margin: .75rem 0 .15rem; line-height: 1.35; }
.person-card:hover h3 { color: var(--crimson); }
.person-card .pos { font-size: .93rem; color: var(--muted); line-height: 1.45; }
/* responsibilities: a short rule under the position, then one task per line, each with a small crimson dash */
.person-card .duty { list-style: none; margin: .6rem 0 0; padding: .6rem 0 0; border-top: 1px solid var(--line);
  font-size: .88rem; color: var(--slate); line-height: 1.45; }
.person-card .duty li { position: relative; padding-left: .95rem; margin: 0 0 .3rem; }
.person-card .duty li::before { content: ""; position: absolute; left: 0; top: .68em; width: .45rem; height: 2px; background: var(--crimson); }
.badge-new { display: inline-block; font-size: .8rem; background: var(--crimson); color: #fff; padding: 0 .5rem; margin-left: .4rem; vertical-align: middle; }
/* no photo yet: a light silhouette instead of a dark block */
.initials { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(180deg, var(--mist) 0%, var(--mist-2) 100%); color: #b4bdc4; font-size: 0; }
.initials::before { content: ""; width: 46%; aspect-ratio: 1; background: currentColor;
  -webkit-mask: url("../img/icons/person.svg") center bottom / contain no-repeat; mask: url("../img/icons/person.svg") center bottom / contain no-repeat; align-self: end; width: 62%; }

.exec-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 900px) { .exec-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.exec-row .role { font-size: .9rem; color: var(--crimson); font-weight: 600; margin-top: .75rem; }

.profile { display: grid; grid-template-columns: 19rem minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); padding: clamp(28px, 4vw, 48px) 0 clamp(48px, 6vw, 80px); }
@media (max-width: 860px) { .profile { grid-template-columns: 1fr; } }
.profile-card { align-self: start; position: sticky; top: 100px; }
@media (max-width: 860px) { .profile-card { position: static; display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.2rem; align-items: start; } }
@media (max-width: 360px) { .profile-card { grid-template-columns: 6.5rem minmax(0, 1fr); gap: .9rem; } }
/* phones, a person with titles (รองอธิการบดี ...): the photo on the left over two rows, the titles and then the contact
   details on the right (otherwise the contact details fell into the narrow column under the photo) */
@media (max-width: 860px) {
  .profile-card:has(> .profile-titles) { grid-template-areas: "pic titles" "pic info"; grid-template-rows: auto 1fr; row-gap: .9rem; }
  .profile-card:has(> .profile-titles) > .portrait { grid-area: pic; }
  .profile-card > .profile-titles { grid-area: titles; margin-top: 0; }
  .profile-card:has(> .profile-titles) > .contact-list { grid-area: info; margin-top: 0; }
}
.profile-card .portrait { aspect-ratio: 4 / 5; background: var(--mist-2); border-bottom: 6px solid var(--crimson); overflow: hidden; }
.profile-card .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.contact-list { list-style: none; margin: 1.1rem 0 0; padding: 0; border-top: 1px solid var(--line); font-size: .98rem; }
.contact-list li { padding: .6rem 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1.6rem 1fr; gap: .5rem; }
.contact-list b { font-weight: 500; color: var(--muted); }
.contact-list a { overflow-wrap: break-word; min-width: 0; }
.profile-main h2 { font-size: 1.25rem; margin: 2.2em 0 .6em; padding-bottom: .4rem; border-bottom: 1px solid var(--line); position: relative; }
.profile-main h2::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 48px; height: 3px; background: var(--crimson); }
.profile-main h2:first-of-type { margin-top: 0; }
.tick-list { list-style: none; margin: 0; padding: 0; }
.tick-list li { position: relative; padding: .3rem 0 .3rem 1.3rem; }
.tick-list li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: .6rem; height: 2px; background: var(--crimson); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; list-style: none; }
.chips li { background: var(--mist); border: 1px solid var(--line); padding: .25rem .8rem; font-size: .97rem; }
.forest { border: 1px solid var(--line); border-top: 4px solid var(--crimson); background: #fff; }
.forest iframe { display: block; width: 100%; height: 900px; border: 0; }
@media (max-width: 700px) { .forest iframe { height: 700px; } }
.contact-list a[href^="tel:"] { text-decoration: none; border-bottom: 1px dotted var(--crimson); }
.contact-list a[href^="tel:"]:hover { border-bottom-style: solid; }
.docs { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.docs li { border-bottom: 1px solid var(--line); }
.docs a { display: grid; grid-template-columns: 2.6rem 1fr auto; gap: 1rem; align-items: center; padding: .85rem .2rem; text-decoration: none; color: var(--ink); }
.docs a:hover { background: var(--mist); }
.docs a:hover .t { color: var(--crimson); }
.docs .ext { width: 2.6rem; height: 3rem; display: grid; place-items: center; background: var(--slate); color: #fff; font-size: .72rem; font-weight: 600; border-bottom: 4px solid var(--crimson); text-transform: uppercase; }
.docs .t { font-weight: 500; }
.docs .d { color: var(--muted); font-size: .92rem; display: block; }
.docs small { color: var(--muted); white-space: nowrap; }

/* ---- partners strip ---- */
.partners { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.partners-track { display: flex; gap: 56px; align-items: center; width: max-content; padding: 22px 0; animation: slide 60s linear infinite; }
.partners:hover .partners-track { animation-play-state: paused; }
.partners-track img { height: 46px; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1); opacity: .8; }
.partners-track .plogo { display: block; cursor: default; }
.partners-track a.plogo { cursor: pointer; }
.partners-track a.plogo:hover img { filter: none; opacity: 1; }
@keyframes slide { to { transform: translateX(-50%); } }
/* moved by site.js instead (and draggable with a mouse or a finger); a vertical swipe still scrolls the page */
.partners.drag-ready { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.partners.drag-ready .partners-track { animation: none; will-change: transform; }
.partners.dragging { cursor: grabbing; }
.partners.dragging a.plogo { cursor: grabbing; }
.partners-track img { -webkit-user-drag: none; }

/* ---- scroll reveal (classes are added by site.js; nothing is hidden unless JS runs) ---- */
/* small and quick: blocks rise 14px and fade in; site.js drops the classes when done so hover effects work as usual */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .ruler.reveal { opacity: 1; transform: none; background-size: 0 3px, 0 6px, 0 1px; }
.js .ruler.reveal.in { background-size: 56px 3px, 100% 6px, 100% 1px; transition: background-size .9s var(--ease); }
@media print { .js .reveal { opacity: 1 !important; transform: none !important; } .to-top { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .partners-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .ruler.reveal { background-size: 56px 3px, 100% 6px, 100% 1px !important; }
}

/* back-to-top button (added by site.js on every page) */
.to-top { position: fixed; right: clamp(14px, 2.4vw, 28px); bottom: clamp(14px, 2.4vw, 28px); z-index: 60; width: 46px; height: 46px; border-radius: 50%;
  border: 0; background: var(--slate-ink); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5);
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s, visibility .25s, transform .25s var(--ease), background-color .2s; }
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover, .to-top:focus-visible { background: var(--crimson); }
.to-top .ico { width: 1.2rem; height: 1.2rem; transform: rotate(-90deg); vertical-align: 0; }

/* a hidden page, opened by staff with ?preview=1 */
.preview-note { margin: 0; padding: .55rem 0; background: var(--heat); color: #1d1300; font-size: .95rem; font-weight: 500; }
.preview-note .wrap { display: block; }

/* signed-in staff: to the editor of what is on screen, in the corner; above the back-to-top button once that has appeared */
.admin-float { --edge: clamp(14px, 2.4vw, 28px); position: fixed; right: var(--edge); bottom: calc(var(--edge) + env(safe-area-inset-bottom, 0px)); z-index: 60;
  display: flex; align-items: stretch; border-radius: 10px; overflow: hidden; background: var(--slate-ink); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .55); font-size: .92rem; transition: bottom .25s var(--ease); }
body:has(.to-top.show) .admin-float { bottom: calc(var(--edge) + 46px + 10px + env(safe-area-inset-bottom, 0px)); }
.admin-float a { display: inline-flex; align-items: center; gap: .45rem; min-height: 42px; padding: 0 .85rem; color: #e8edf0; text-decoration: none; white-space: nowrap; transition: background-color .15s; }
.admin-float a:hover, .admin-float a:focus-visible { background: var(--slate); color: #fff; }
.admin-float a.edit { background: var(--crimson); color: #fff; font-weight: 500; }
.admin-float a.edit:hover, .admin-float a.edit:focus-visible { background: var(--crimson-deep); }
@media print { .admin-float { display: none !important; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--slate-ink); color: #d4dbe0; margin-top: 0; border-top: 8px solid var(--crimson); }
.site-footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(24px, 4vw, 56px); padding-top: 48px; padding-bottom: 40px; }
@media (max-width: 800px) { .site-footer .wrap { grid-template-columns: 1fr; } }
.site-footer img { height: 56px; width: auto; margin-bottom: 1rem; }
.site-footer h2 { font-size: 1rem; color: #fff; font-weight: 600; margin-bottom: .8rem; }
.site-footer a { color: #e8edf0; text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .35rem; }
.site-footer address { font-style: normal; line-height: 1.8; }
.copyright { border-top: 1px solid #3f4a52; padding: 1rem 0; font-size: .9rem; color: #aeb8bf; }
.copyright .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0 var(--gutter); }

.search-big { display: flex; gap: .5rem; max-width: 36rem; margin-bottom: 2rem; }
.search-big input { flex: 1; min-width: 0; padding: .7rem 1rem; font: inherit; border: 1px solid var(--slate); border-radius: var(--radius); }
.result-group h2 { font-size: 1.15rem; margin-top: 2rem; }
.result-group ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.result-group li { border-bottom: 1px solid var(--line); padding: .7rem 0; }
.result-group a { font-weight: 500; text-decoration: none; }
.result-group p { margin: .15rem 0 0; color: var(--muted); font-size: .95rem; }

.error-page { padding-block: clamp(60px, 12vw, 140px); }
.error-page .code { font-size: clamp(4rem, 12vw, 8rem); font-weight: 700; color: var(--slate); line-height: 1; margin: 0; }
.error-page .code span { color: var(--crimson); }
.contact-box { border: 1px solid var(--line); border-top: 4px solid var(--crimson); padding: 1.4rem 1.5rem; }
.contact-box h2 { font-size: 1.1rem; }
.contact-box dl { margin: 0; display: grid; grid-template-columns: 5.5rem 1fr; gap: .5rem 1rem; }
.contact-box dt { color: var(--muted); } .contact-box dd { margin: 0; overflow-wrap: break-word; min-width: 0; }

/* ==========================================================================
   Icons: SVG files in /static/img/icons, tinted with currentColor via CSS mask
   ========================================================================== */
.ico { display: inline-block; flex: none; width: 1.2em; height: 1.2em; vertical-align: -.22em; background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ico-phone { --ico: url("../img/icons/phone.svg"); } .ico-mail { --ico: url("../img/icons/mail.svg"); }
.ico-room { --ico: url("../img/icons/room.svg"); } .ico-pin { --ico: url("../img/icons/pin.svg"); }
.ico-fax { --ico: url("../img/icons/fax.svg"); } .ico-globe { --ico: url("../img/icons/globe.svg"); }
.ico-link { --ico: url("../img/icons/link.svg"); } .ico-calendar { --ico: url("../img/icons/calendar.svg"); }
.ico-file { --ico: url("../img/icons/file.svg"); } .ico-download { --ico: url("../img/icons/download.svg"); }
.ico-image { --ico: url("../img/icons/image.svg"); } .ico-edit { --ico: url("../img/icons/edit.svg"); }
.ico-user { --ico: url("../img/icons/user.svg"); } .ico-search { --ico: url("../img/icons/search.svg"); }
.ico-arrow { --ico: url("../img/icons/arrow.svg"); } .ico-scholar { --ico: url("../img/icons/scholar.svg"); }
.ico-external { --ico: url("../img/icons/external.svg"); } .ico-clock { --ico: url("../img/icons/clock.svg"); }
.ico-facebook { --ico: url("../img/icons/facebook.svg"); } .ico-youtube { --ico: url("../img/icons/youtube.svg"); }
.ico-instagram { --ico: url("../img/icons/instagram.svg"); } .ico-tiktok { --ico: url("../img/icons/tiktok.svg"); }
.badge-ico { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; background: var(--slate); color: #fff; border-bottom: 3px solid var(--crimson); flex: none; }
.badge-ico .ico { width: 1.3rem; height: 1.3rem; vertical-align: 0; }

/* contact list (profile + footer) */
.contact-list li { grid-template-columns: 1.6rem 1fr; align-items: start; }
.contact-list .ico { color: var(--crimson); margin-top: .22em; }
.social { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .4rem; }
.social a { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid rgba(255,255,255,.35); color: #fff; transition: background-color .2s, border-color .2s; }
.social a:hover { background: var(--crimson); border-color: var(--crimson); }
.social .ico { width: 1.15rem; height: 1.15rem; vertical-align: 0; }
.site-footer address .ico, .foot-list .ico { color: #e7a9ab; margin-right: .5rem; }
.foot-list { list-style: none; padding: 0; margin: 0; }
.foot-list li { display: flex; gap: .2rem; margin-bottom: .55rem; line-height: 1.6; }
.foot-list .ico { margin-top: .22em; }

/* ==========================================================================
   Content pages (about, education, research, ...)
   ========================================================================== */
.page-body { max-width: 50rem; font-size: 1.02rem; line-height: 1.9; }
.page-body > p:first-child, .page-body > figure:first-child + p { font-size: 1.12rem; color: #2a343b; }
.page-body h2 { font-size: 1.45rem; margin: 2.6em 0 .8em; padding: .1rem 0 .1rem 1rem; border-left: 4px solid var(--crimson); }
.page-body h2:first-child { margin-top: 0; }
.page-body h3 { font-size: 1.15rem; margin: 2em 0 .5em; color: var(--slate-deep); }
.page-body h4, .page-body h5 { font-size: 1rem; margin: 1.6em 0 .4em; color: var(--slate); }
.page-body a { text-decoration-thickness: 1px; }
.page-body ul { list-style: none; padding: 0; }
.page-body ul > li { position: relative; padding-left: 1.3rem; }
.page-body ul > li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: .6rem; height: 2px; background: var(--crimson); }
.page-body ol { padding-left: 1.4rem; } .page-body ol > li::marker { color: var(--crimson); font-weight: 500; }
.page-body li > ul { margin-top: .3em; }
.page-body table { display: table; width: 100%; font-size: .96rem; }
.page-body th { background: var(--slate); color: #fff; font-weight: 500; }
.page-body tbody tr:nth-child(even) td { background: var(--mist); }
.page-body td, .page-body th { padding: .6rem .8rem; }
.table-scroll { overflow-x: auto; margin: 1.4rem 0; border: 1px solid var(--line); }
.table-scroll table { margin: 0; min-width: 32rem; }
.page-body figure, .prose figure { margin: 1.8rem 0; }
.page-body figure img, .prose figure img { width: 100%; margin: 0; border: 0; border-bottom: 4px solid var(--crimson); }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 14px; margin: 1.8rem 0; }
.gallery figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mist-2); border-bottom: 4px solid var(--crimson); }
.gallery figure img { height: 100%; object-fit: cover; border: 0; transition: transform .6s var(--ease); }
.gallery figure:hover img { transform: scale(1.05); }
.gallery.pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .gallery.pair { grid-template-columns: 1fr; } }

/* info cards (buildings, camps, service lists ...) */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 24px; margin: 1.6rem 0 2.4rem; }
.info-card { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--crimson); display: flex; flex-direction: column; }
.info-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin: 0; border: 0; }
.info-card .in { padding: 1.1rem 1.3rem 1.4rem; }
.info-card h3 { margin: 0 0 .3rem; font-size: 1.15rem; color: var(--ink); }
.info-card p { margin: 0 0 .5rem; color: var(--muted); font-size: .98rem; line-height: 1.7; }
.info-card ul, .info-card ol { margin: .4rem 0 .5rem; padding-left: 1.3rem; color: var(--muted); font-size: .98rem; line-height: 1.7; }
.info-card .in > :last-child { margin-bottom: 0; }
/* a card whose title is a link: the whole card is the link (other links inside stay clickable on their own) */
.info-card.linked { position: relative; transition: transform .2s ease, box-shadow .2s ease; }
.info-card.linked h3 a { color: var(--crimson); text-decoration: none; }      /* a link colour: the card can be clicked */
.info-card.linked h3 .ico-external { width: .8em; height: .8em; margin-left: .35em; vertical-align: .05em; opacity: .75; }
.info-card.linked h3 a::after { content: ""; position: absolute; inset: 0; }
.info-card.linked .in a:not(h3 a) { position: relative; z-index: 1; }
.info-card.linked:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(30, 20, 20, .12); }
.info-card.linked:hover h3 a, .info-card.linked h3 a:focus-visible { color: var(--crimson-deep); text-decoration: underline; }
.info-card.linked:focus-within { outline: 2px solid var(--crimson); outline-offset: 3px; }
.info-card.linked h3 a:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) { .info-card.linked, .info-card.linked:hover { transition: none; transform: none; } }
.callout { margin: 1.8rem 0; padding: 1.1rem 1.4rem; background: var(--mist); border-left: 4px solid var(--slate); }
.callout p:last-child { margin-bottom: 0; }

/* contact page */
.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 24px; }
.ccard { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--crimson); padding: 1.4rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .9rem; }
.ccard h2 { font-size: 1.1rem; margin: 0; }
.ccard .row { display: flex; gap: .9rem; align-items: flex-start; }
.ccard .row b { display: block; font-weight: 500; font-size: .85rem; color: var(--muted); line-height: 1.4; }
.ccard .row span.v { display: block; overflow-wrap: break-word; min-width: 0; }
.ccard a { text-underline-offset: 3px; }
.ccard .social a { border-color: var(--line); color: var(--ink); }
.ccard .social a:hover { color: #fff; }


/* ---- header v2: balanced logo, language switch, search button ---- */
.site-header .wrap { min-height: 84px; }
.brand img { height: 54px; width: auto; }
.brand img.en { height: 46px; }
.site-footer img { height: 62px; width: auto; margin-bottom: 1.2rem; }
.topbar .tools { display: flex; align-items: center; gap: 1rem; }
.langsw { display: inline-flex; border: 1px solid #56626b; font-size: .85rem; line-height: 1; }
.langsw a, .langsw span { padding: .42rem .7rem; text-decoration: none; color: #cfd6db; }
.langsw span[aria-current] { background: #fff; color: var(--slate-ink); font-weight: 500; }
.langsw a:hover { background: #3a444b; color: #fff; }
.topbar button .ico { width: 1.05rem; height: 1.05rem; vertical-align: -.15em; }
.langsw.mob { margin-top: .8rem; border-color: var(--slate); }
.langsw.mob a, .langsw.mob span { padding: .55rem 1rem; color: var(--ink); font-size: .95rem; }
.langsw.mob span[aria-current] { background: var(--slate-ink); color: #fff; }
.langsw.mob a:hover { background: var(--mist); color: var(--ink); }
@media (max-width: 980px) { .brand img { height: 44px; } .brand img.en { height: 38px; } }

.cat-tabs { margin: 0 0 1.6rem; }
.page-head + .wrap > .cat-tabs:first-child { margin-top: clamp(26px, 3.5vw, 44px); }   /* same gap under the page title as other pages */
/* link tabs written in a page body ("+ แถบลิงก์"): the same pills as the category tabs; this page's tab is dark */
.prose .link-tabs { margin: 0 0 1.8rem; }
.prose .link-tabs:not(:first-child) { margin-top: 1.4rem; }
.prose .link-tabs a { text-decoration: none; color: var(--ink); transition: border-color .15s ease, background-color .15s ease; }
.prose .link-tabs a:hover { background: var(--mist-2); }
.prose .link-tabs a[aria-current] { color: #fff; background: var(--ink); }
/* "+ ปุ่ม": a row of buttons in a page body (first one filled, the rest outlined) */
.prose .btn-row { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.4rem 0; }
.prose .btn-row .btn { text-decoration: none; }
.prose .btn-row .btn:not(.ghost) { color: #fff; }
/* "+ แกลเลอรี": the news gallery look inside a page body */
.prose .content-gal { margin: 1.8rem 0; }
.prose .gal-cell img, .prose .gal-thumbs img { max-height: none; }
/* "@" + a file's address in a page body: the file itself (picture, PDF, player, 3D) above a bar with its name and a download button */
.prose .file-embed { margin: 1.6rem 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; }
.prose .file-embed > img { display: block; width: 100%; height: auto; max-height: min(72vh, 640px); object-fit: contain; margin: 0; border: 0; background: var(--mist-2); }
.prose .file-embed .fe-pdf { display: block; width: 100%; height: min(78vh, 760px); border: 0; background: var(--mist-2); }
/* phones: the PDF drawn page by page by pdf.js (js/site.js), fitted to the width, scrolled inside the box */
.prose .file-embed .fe-pdfjs { max-height: min(78vh, 760px); min-height: 6rem; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: .5rem; background: var(--mist-2); color: var(--muted); font-size: .9rem; }
.prose .file-embed .fe-pdfjs .fe-page { background: #fff; margin: 0 0 .5rem; box-shadow: 0 1px 3px rgba(31, 36, 40, .18); }
.prose .file-embed .fe-pdfjs .fe-page:last-child { margin-bottom: 0; }
.prose .file-embed .fe-pdfjs canvas { display: block; width: 100%; height: auto; }
.prose .file-embed .fe-video { display: block; width: 100%; max-height: 72vh; background: #000; }
.prose .file-embed .fe-video-frame { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; background: #000; }
.prose .file-embed.external.k-other .fe-bar { border-top: 0; }
/* --nogui: just the file (no name bar) */
.prose .file-embed.bare > img, .prose .file-embed.bare > iframe, .prose .file-embed.bare > video { display: block; }
.prose .file-embed .fe-audio { display: block; width: calc(100% - 2rem); margin: 1rem; }
.prose .file-embed .fe-model { height: min(60vh, 460px); background: radial-gradient(circle at 50% 35%, #ffffff, #dfe4e8); cursor: grab; }
.prose .file-embed .fe-model.failed { display: none; }
.prose .fe-bar { display: flex; align-items: center; gap: .9rem; padding: .7rem .9rem; border-top: 1px solid var(--line); }
.prose .file-embed.k-document:not(:has(.fe-pdf, .fe-pdfjs)) .fe-bar, .prose .file-embed.k-cad:not(:has(.fe-model)) .fe-bar,
.prose .file-embed.k-other .fe-bar { border-top: 0; }
.prose .fe-badge { flex: none; display: grid; place-items: center; min-width: 3.2rem; height: 2.6rem; padding: 0 .5rem; border-radius: 8px;
  background: var(--mist-2); color: var(--ink); font-weight: 600; font-size: .9rem; }
.prose .k-document .fe-badge { color: #1f4e8c; } .prose .k-cad .fe-badge { color: #0f6b5c; } .prose .k-video .fe-badge { color: #5b2f8c; }
.prose .fe-info { flex: 1; min-width: 0; display: grid; line-height: 1.35; }
.prose .fe-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.prose .fe-info small { color: var(--muted); }
.prose .fe-bar .btn { flex: none; text-decoration: none; color: #fff; }
/* a card without a picture: the coloured top edge carries it */
.info-card.no-pic .in { padding-top: 1.3rem; }
/* "--hidden" title: not shown, but still read out and still the link of the whole card (its ::after covers the card) */
.info-card h3.t-hidden { font-size: 0; line-height: 0; height: 0; margin: 0; }
.info-card .in:has(> h3.t-hidden:only-child) { padding: 0; }      /* nothing else to show under the picture */
.cat-tabs .count { display: inline-block; margin-left: .35rem; min-width: 1.5rem; padding: 0 .4rem; text-align: center; background: var(--mist-2); border-radius: 999px; font-size: .82rem; line-height: 1.5; }
.cat-tabs a[aria-current] .count { background: rgba(255,255,255,.25); }
.callout[lang=en] { font-size: .95rem; }

/* ==========================================================================
   Rounded corners + one portrait ratio (4:5) everywhere
   ========================================================================== */
:root { --r: 16px; --r-sm: 10px; --portrait: 4 / 5; }
.btn { border-radius: var(--r-sm); }
.person-card .portrait, .profile-card .portrait {
  aspect-ratio: var(--portrait); border-bottom: 0; border-radius: var(--r); overflow: hidden; position: relative; background: var(--mist-2);
}
.person-card .portrait img, .profile-card .portrait img, .person-card .portrait .initials { width: 100%; height: 100%; aspect-ratio: var(--portrait); object-fit: cover; object-position: center 15%; }
.person-card .portrait::after, .profile-card .portrait::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--line); transition: background-color .15s; }
.person-card:hover .portrait::after { background: var(--crimson); }
.profile-card .portrait::after { background: var(--crimson); height: 6px; }
.card { border-radius: var(--r); overflow: hidden; }
.info-card, .ccard, .contact-box { border-radius: var(--r); overflow: hidden; }
.gallery figure { border-radius: var(--r); border-bottom: 0; }
.page-body figure img, .prose figure img, .article-cover img { border-bottom: 0; border-radius: var(--r); }
.article-cover { border-radius: var(--r); overflow: hidden; }
.forest, .callout, .side-nav, .table-scroll { border-radius: var(--r); overflow: hidden; }
.table-scroll { border-radius: var(--r-sm); }
.partners { border-radius: 0; }
.hero { padding: 26px 0; }
.hero .wrap { padding-top: 0; padding-bottom: 0; }
@media (max-width: 900px) {
  .hero .wrap { padding: 0 var(--gutter); }
}
.search-big input, .topbar input[type=search] { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.docs .ext { border-radius: 8px 8px 0 0; }
.badge-ico { border-radius: 10px; border-bottom: 0; }

/* person byline at the top of a page (message from the head, etc.): photo left, details right */
.byline { display: grid; grid-template-columns: minmax(180px, 250px) 1fr; gap: clamp(20px, 3.5vw, 40px); align-items: center;
  background: var(--mist); border-radius: var(--r); padding: clamp(16px, 2.5vw, 28px); margin: 0 0 2.2rem; border-left: 5px solid var(--crimson); }
.byline-photo { aspect-ratio: var(--portrait); border-radius: var(--r-sm); overflow: hidden; background: var(--mist-2); }
.byline-photo img, .byline-photo .initials { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; border: 0 !important; margin: 0 !important; border-radius: 0 !important; }
.byline-info h2 { margin: 0 0 .25rem !important; padding: 0 !important; border: 0 !important; font-size: 1.45rem; }
.byline-info p { margin: 0 0 .2rem; }
.byline-rank { color: var(--ink); font-weight: 400; }
.byline-role { color: var(--crimson); font-weight: 500; margin-bottom: .6rem !important; }
.byline-info .contact-list { margin: .8rem 0 1.1rem; max-width: 26rem; }
@media (max-width: 620px) { .byline { grid-template-columns: 1fr; } .byline-photo { max-width: 240px; } }

/* ==========================================================================
   Home banner carousel
   - a designed banner (news.banner, 1920x520) fills the strip
   - a news photo ("is-photo") is shown whole on the right and the headline has its own dark panel on the left,
     so text never runs over the picture; on phones the picture comes first and the headline below it
   - the active dot fills up while a slide is shown (pauses with the carousel)
   ========================================================================== */
.banner { position: relative; background: var(--slate-ink); overflow: hidden; }
/* width: 100% keeps the strip inside the screen when min-height makes it taller than 1920:520 (tablets) */
.banner-viewport { display: grid; width: 100%; aspect-ratio: 1920 / 520; min-height: 280px; }
.banner-slide { grid-area: 1 / 1; position: relative; display: block; overflow: hidden; background: var(--slate-deep); color: #fff; text-decoration: none;
  opacity: 0; visibility: hidden; transition: opacity .7s var(--ease), visibility .7s; }
.banner-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.banner-slide > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* a designed banner is shown whole on every screen (never cropped): text in the picture stays readable */
.banner-slide:not(.is-photo) { background: var(--slate-ink); }
.banner-slide:not(.is-photo) > img { object-fit: contain; }
.banner-slide:focus-visible { outline-offset: -5px; }
.banner-blur { position: absolute; inset: -30px; background-size: cover; background-position: center; filter: blur(26px) brightness(.5); transform: scale(1.1); }
.banner-slide.is-photo > img { left: auto; width: 54%; object-fit: contain; z-index: 1; }
.banner-slide.is-photo::after { content: ""; position: absolute; inset: 0 46% 0 0; z-index: 1;
  background: linear-gradient(90deg, rgba(24, 29, 33, .94) 0%, rgba(24, 29, 33, .86) 72%, rgba(24, 29, 33, 0) 100%); }
.banner-caption { position: absolute; z-index: 2; left: clamp(64px, 7vw, 104px); right: 54%; top: 50%; transform: translateY(-50%);
  padding-right: clamp(16px, 3vw, 44px); display: grid; gap: .55rem; }
.banner-caption strong { font-weight: 500; font-size: clamp(1.15rem, 2vw, 1.7rem); line-height: 1.42;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.banner-caption .tag { justify-self: start; background: var(--crimson); padding: .1rem .7rem; font-size: .85rem; border-radius: 6px; }
.banner-caption .date { font-size: .92rem; opacity: .85; }
.banner-caption .more { justify-self: start; margin-top: .35rem; font-size: .95rem; padding-bottom: .1rem; border-bottom: 1px solid rgba(255, 255, 255, .55); transition: border-color .2s; }
/* the whole slide is one link: its text stays white (the red of ordinary links is unreadable on the dark picture);
   pointing at it underlines the headline instead. Only where there is a mouse, so a tap on a phone leaves nothing behind. */
.banner-slide:hover, .banner-slide:active, .banner-slide:focus-visible { color: #fff; }
.banner-slide { -webkit-tap-highlight-color: transparent; }
.banner-caption strong { text-decoration: underline 2px transparent; text-underline-offset: .22em; transition: text-decoration-color .2s; }
@media (hover: hover) {
  .banner-slide:hover .banner-caption strong { text-decoration-color: rgba(255, 255, 255, .85); }
  .banner-slide:hover .more { border-color: #fff; }
}
.banner-slide:focus-visible .banner-caption strong { text-decoration-color: rgba(255, 255, 255, .85); }
.banner-slide:focus-visible .more { border-color: #fff; }
/* the headline of the slide that comes in slides up a little (not on the first paint) */
.banner.moved .banner-slide.is-active .banner-caption > * { animation: cap-in .55s var(--ease) both; }
.banner.moved .banner-slide.is-active .banner-caption > :nth-child(2) { animation-delay: .07s; }
.banner.moved .banner-slide.is-active .banner-caption > :nth-child(3) { animation-delay: .14s; }
.banner.moved .banner-slide.is-active .banner-caption > :nth-child(4) { animation-delay: .21s; }
@keyframes cap-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.banner-nav { position: absolute; top: 50%; z-index: 3; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .22); color: #fff; display: grid; place-items: center; backdrop-filter: blur(3px); transition: background-color .2s, transform .15s; }
.banner-nav:hover, .banner-nav:focus-visible { background: rgba(127, 22, 24, .9); }
.banner-nav:active { transform: translateY(-50%) scale(.94); }
.banner-nav .ico { width: 1.3rem; height: 1.3rem; vertical-align: 0; }
.banner-nav.prev { left: clamp(8px, 1.6vw, 22px); }
.banner-nav.prev .ico { transform: rotate(180deg); }
.banner-nav.next { right: clamp(8px, 1.6vw, 22px); }
/* each dot is a 24px button (a finger can hit it) holding the small dot that is seen */
.banner-dots { position: absolute; z-index: 3; left: 0; right: 0; bottom: 6px; display: flex; justify-content: center; gap: 0; }
.banner-dots button { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px; border: 0; background: none; cursor: pointer; border-radius: 999px; }
.banner-dots button > span { position: relative; display: block; overflow: hidden; width: 9px; height: 9px; border-radius: 999px; background: rgba(255, 255, 255, .5);
  transition: width .3s var(--ease), background-color .3s; }
.banner-dots button[aria-current="true"] > span { width: 34px; background: rgba(255, 255, 255, .35); }
.banner-dots button[aria-current="true"] > span::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: dot-fill 6s linear both; }
.banner.paused .banner-dots button > span::after { animation-play-state: paused; }
.banner.static .banner-dots button > span::after { animation: none; }
@keyframes dot-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.banner-dots button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

@media (max-width: 900px) {
  .banner-nav { width: 38px; height: 38px; }
  .banner-caption { left: 60px; }
}
/* phones: picture on top, headline underneath on its own band; swipe and dots instead of arrows */
@media (max-width: 700px) {
  .banner-viewport { aspect-ratio: auto; min-height: 0; }
  .banner-slide { display: flex; flex-direction: column; }
  .banner-slide > img { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
  .banner-slide:not(.is-photo) { justify-content: center; }
  .banner-slide:not(.is-photo) > img { aspect-ratio: 1920 / 520; }
  .banner-slide.is-photo > img { width: 100%; }
  .banner-slide.is-photo::after { display: none; }
  .banner-caption { position: relative; left: auto; right: auto; top: auto; transform: none; padding: 14px var(--gutter) 40px; background: var(--slate-ink); gap: .4rem; }
  .banner-caption strong { font-size: 1.05rem; -webkit-line-clamp: 2; }
  .banner-caption .more { display: none; }
  .banner-nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .banner-slide { transition: none; }
  .banner.moved .banner-slide.is-active .banner-caption > * { animation: none; }
  .banner-dots button > span::after { animation: none !important; transform: none; }
}

/* intro band under the banner */
.hero .wrap { display: block; }
.hero-panel { border-radius: 20px; display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(20px, 4vw, 56px); align-items: center; padding-bottom: clamp(28px, 4vw, 48px); }
.hero-panel .quick { margin: 0; }
@media (max-width: 900px) { .hero-panel { grid-template-columns: 1fr; border-radius: 20px; } .hero .wrap { padding: 0 var(--gutter); } }


/* contact page: details + extension list on the left, map beside them on the right */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "cards map" "dir map"; gap: 28px 34px; align-items: start; }
.contact-layout.no-map { grid-template-columns: 1fr; grid-template-areas: "cards" "dir"; }
.contact-layout .contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.contact-layout .ccard { padding: 1.2rem 1.3rem 1.3rem; }
.contact-layout .ccard.wide { grid-column: 1 / -1; }
.contact-layout .ccard.wide .social { align-items: center; }
.social a.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: auto; height: auto; padding: .55rem 1.1rem; white-space: nowrap; color: #fff; border: 0; }
.social a.btn:hover { color: #fff; }
.contact-map { position: sticky; top: 100px; }
.map-frame { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); border-top: 4px solid var(--crimson); background: var(--mist); height: min(620px, calc(100vh - 140px)); min-height: 380px; }
.map-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.contact-dir h2 { margin-bottom: .3rem; }
.contact-dir .ruler { margin-bottom: 1rem; }
.ext-list { list-style: none; padding: 0; margin: 0; }
.ext-list li { display: grid; grid-template-columns: 4.2rem 1fr; gap: .8rem; padding: .55rem 0; border-bottom: 1px solid var(--line); padding-left: 0; }
.ext-list li::before { display: none; }
.ext-list a { font-weight: 500; text-decoration: none; background: var(--mist); border: 1px solid var(--line); border-radius: 8px; text-align: center; padding: .1rem 0; align-self: start; }
.ext-list a:hover { background: var(--crimson); color: #fff; border-color: var(--crimson); }
.ext-list span { color: var(--ink); line-height: 1.7; font-size: .98rem; }
@media (max-width: 960px) {
  .contact-layout, .contact-layout.no-map { grid-template-columns: 1fr; grid-template-areas: "cards" "map" "dir"; }
  .contact-map { position: static; }
  .map-frame { height: 360px; min-height: 0; }
}
@media (max-width: 560px) { .contact-layout .contact-cards { grid-template-columns: 1fr; } }

/* ==========================================================================
   News photo gallery: grid or slider, with a lightbox
   ========================================================================== */
.news-gallery { margin: 2.6rem 0 1rem; }
.news-gallery h2 { margin-bottom: 1rem; }
.gal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
.gal-cell { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-sm); background: var(--mist-2); }
.gal-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); margin: 0; border: 0; }
.gal-cell:hover img, .gal-cell:focus-visible img { transform: scale(1.06); }
.gal-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem .8rem .6rem; color: #fff; font-size: .88rem; line-height: 1.4; background: linear-gradient(transparent, rgba(0,0,0,.7)); }

.gal-slider { position: relative; border-radius: var(--r); overflow: hidden; background: var(--slate-ink); }
.gal-viewport { display: grid; grid-template-rows: minmax(0, 1fr); aspect-ratio: 3 / 2; max-height: 78vh; overflow: hidden; }
.gal-slide { grid-area: 1 / 1; min-height: 0; overflow: hidden; margin: 0 !important; position: relative; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s; background: #11161a; }
.gal-slide.is-active { opacity: 1; visibility: visible; }
.gal-slide a { display: block; height: 100%; cursor: zoom-in; }
.gal-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; margin: 0 !important; border: 0 !important; border-radius: 0 !important; }
.gal-slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.8rem 1.2rem .8rem; color: #fff; text-align: center; font-size: .95rem; background: linear-gradient(transparent, rgba(0,0,0,.72)); }
.gal-nav { position: absolute; top: calc(50% - 26px); width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255,255,255,.3); color: #fff; display: grid; place-items: center; backdrop-filter: blur(3px); transition: background-color .2s; z-index: 2; }
.gal-nav:hover, .gal-nav:focus-visible { background: rgba(127, 22, 24, .92); }
.gal-nav .ico { width: 1.2rem; height: 1.2rem; vertical-align: 0; }
.gal-nav.prev { left: 12px; } .gal-nav.prev .ico { transform: rotate(180deg); } .gal-nav.next { right: 12px; }
.gal-count { position: absolute; top: 12px; right: 12px; z-index: 2; background: rgba(0,0,0,.55); color: #fff; font-size: .85rem; padding: .15rem .7rem; border-radius: 999px; }
.gal-thumbs { display: flex; gap: 6px; padding: 8px; overflow-x: auto; background: #1a2025; scrollbar-width: thin; }
.gal-thumbs button { flex: none; width: 72px; height: 48px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; opacity: .6; background: none; transition: opacity .2s, border-color .2s; }
.gal-thumbs button[aria-current="true"] { opacity: 1; border-color: #fff; }
.gal-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; border: 0; border-radius: 0; }

.lightbox { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; background: rgba(10, 14, 17, .93); }
.lightbox.open { display: grid; }
.lightbox img { max-width: 94vw; max-height: 84vh; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.lightbox .lb-cap { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; color: #e6ebee; padding: 0 70px; font-size: .95rem; }
.lightbox button { position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; cursor: pointer; font-size: 1.4rem; display: grid; place-items: center; }
.lightbox button:hover, .lightbox button:focus-visible { background: rgba(127, 22, 24, .95); }
.lightbox .lb-close { top: 16px; right: 16px; } .lightbox .lb-prev { left: 16px; top: calc(50% - 23px); } .lightbox .lb-next { right: 16px; top: calc(50% - 23px); }
@media (prefers-reduced-motion: reduce) { .gal-slide, .gal-cell img { transition: none; } }

/* ---- images inside page / news text: never taller than the screen; lists of portraits become a card grid ---- */
.prose img { max-width: 100%; height: auto; }
.prose figure:not(.pcard):not(.gal-slide) > img, .prose figure:not(.pcard):not(.gal-slide) > a > img { display: block; width: auto; max-width: 100%; max-height: min(72vh, 640px); margin-inline: auto; object-fit: contain; }
.prose .gallery figure img { width: 100%; max-height: none; object-fit: cover; }
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 26px 20px; margin: 2rem 0; }
.prose .pcard { margin: 0; }
.prose .pcard img { display: block; width: 100%; aspect-ratio: var(--portrait, 4 / 5); height: auto; object-fit: cover; object-position: top center; margin: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--mist-2); }
.pcard figcaption { margin-top: .75rem; text-align: center; line-height: 1.45; }
.pcard figcaption strong { display: block; font-weight: 500; font-size: .95rem; color: var(--ink); }
.pcard figcaption span { display: block; margin-top: .15rem; font-size: .85rem; color: var(--muted); }
@media (max-width: 560px) { .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; } }

/* extra titles / ranks under a profile photo */
.profile-titles { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .4rem; }
.profile-titles li { padding: .1rem 0 .1rem .8rem; border-left: 3px solid var(--crimson); line-height: 1.45; font-size: .95rem; color: var(--ink); }
.profile-titles li::before { display: none; }

/* news story: text on the left, a slim side panel (jump links, share, back) on the right */
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.article-layout > .prose { max-width: 50rem; }
.article-layout > .prose > :first-child { margin-top: 0; }
.article-aside { position: sticky; top: 100px; display: grid; gap: 1rem; }
.aside-box { border: 1px solid var(--line); border-top: 3px solid var(--crimson); border-radius: var(--r); padding: 1rem 1.1rem 1.1rem; background: var(--paper); display: grid; gap: .45rem; }
.aside-box h2 { font-size: 1rem; margin: 0 0 .2rem; }
.aside-box > a { color: var(--ink); text-decoration: none; padding: .3rem 0; border-bottom: 1px solid var(--line); }
.aside-box > a:last-child { border-bottom: 0; }
.aside-box > a:hover { color: var(--crimson); }
.share { display: grid; gap: .45rem; }
.share-btn { display: flex; align-items: center; gap: .5rem; padding: .5rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink);
  font: inherit; font-size: .95rem; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.share-btn:hover, .share-btn:focus-visible { border-color: var(--slate); background: var(--mist); }
.share-btn.fb:hover { background: #1877f2; border-color: #1877f2; color: #fff; }
.share-btn.line { font-weight: 600; }
.share-btn.line:hover { background: #06c755; border-color: #06c755; color: #fff; }
.share-btn.done { background: var(--slate-ink); border-color: var(--slate-ink); color: #fff; }
.back-link { display: inline-flex; align-items: center; gap: .4rem; color: var(--slate); text-decoration: none; font-size: .95rem; }
.back-link .ico { transform: rotate(180deg); }
.back-link:hover { color: var(--crimson); }
.news-gallery, #files { scroll-margin-top: 100px; }
@media (max-width: 980px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-aside { position: static; }
  .share { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .share-btn { justify-content: center; }
}


/* ==========================================================================
   Home page (2026-11): full-screen research animation, tiles, labs.
   Blueprint ink behind the animation; KU crimson stays the colour of actions; amber is the "heat" of the motion.
   ========================================================================== */
:root { --stage: #0d2630; --stage-2: #123845; --blueprint: #8fd0d4; --heat: #ffb547; }
.chrome { display: contents; }

/* the header lies over the picture on the home page, and becomes the usual white bar once the picture has gone */
.is-home .chrome { display: block; position: absolute; top: 0; left: 0; right: 0; z-index: 50; }
.is-home .topbar { background: transparent; }
.is-home .topbar form { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .25); }
.is-home .site-header { position: relative; background: transparent; border-bottom-color: rgba(255, 255, 255, .14); }
.is-home .brand img.on-dark { display: none; }
.is-home .chrome:not(.stuck) .brand img:not(.on-dark) { display: none; }
.is-home .chrome:not(.stuck) .brand img.on-dark { display: block; }
.is-home .chrome:not(.stuck) .nav > li > .top { color: #fff; }
.is-home .chrome:not(.stuck) .menu-toggle { color: #fff; border-color: rgba(255, 255, 255, .55); }
.is-home .chrome.stuck .topbar { display: none; }
.is-home .chrome.stuck .site-header { position: fixed; top: 0; left: 0; right: 0; background: var(--paper); border-bottom-color: var(--line);
  box-shadow: 0 10px 24px -20px rgba(0, 0, 0, .6); animation: drop-in .28s var(--ease); }
@keyframes drop-in { from { transform: translateY(-100%); } to { transform: none; } }
/* the apply button of the white bar: pushed to the right, next to the menu */
.header-action { display: none; margin-left: auto; margin-right: -.5rem; padding: .5rem 1.05rem; white-space: nowrap; flex: none; }
.is-home .chrome.stuck .header-action { display: inline-flex; }
@media (max-width: 980px) { .header-action { margin-right: -.6rem; padding: .5rem .8rem; font-size: .95rem; } }
/* a small phone: the logo gives way to the button in proportion, not squeezed; the longer English label does not fit at all at 320px */
@media (max-width: 420px) {
  .is-home .chrome.stuck .brand { min-width: 0; }
  .is-home .chrome.stuck .brand img { max-width: 100%; object-fit: contain; object-position: left center; }
}
@media (max-width: 340px) { html[lang="en"] .is-home .chrome.stuck .header-action { display: none; } }
@media (max-width: 980px) {
  .is-home .chrome:not(.stuck) .nav > li > .top { color: var(--ink); }     /* the opened phone menu is white */
}

/* ---- full screen ---- */
.stage { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; color: #fff;
  background: radial-gradient(120% 90% at 85% 10%, var(--stage-2), var(--stage) 60%); isolation: isolate; }
.stage-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; }
.stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; }
.stage-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(13, 38, 48, .88) 0%, rgba(13, 38, 48, .55) 45%, rgba(13, 38, 48, .1) 100%),
              linear-gradient(0deg, rgba(13, 38, 48, .7), transparent 35%); }
.stage-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem;
  padding-top: 150px; padding-bottom: clamp(84px, 11vh, 120px); width: 100%; pointer-events: none; }
.stage-body a, .stage-body button { pointer-events: auto; }
.stage-text { max-width: 54rem; }
.stage-kicker { margin: 0 0 1rem; font-size: clamp(.95rem, 1.2vw, 1.1rem); color: var(--blueprint); letter-spacing: .01em; display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: center; }
.stage-kicker .tag { background: var(--heat); color: #1d1300; padding: .1rem .7rem; border-radius: 999px; font-weight: 500; }
.stage-title { margin: 0; font-weight: 600; font-size: clamp(2.3rem, 7.2vw, 6.4rem); line-height: 1.06; letter-spacing: -.012em; color: #fff; }
.stage-title span { display: block; }
@media (min-width: 701px) { .stage-title { font-size: clamp(2.3rem, 5.6vw, 6.2rem); } .stage-title span { white-space: nowrap; } }   /* each | line stays one line */
.stage-rotate { margin: 1.1rem 0 0; font-size: clamp(1.25rem, 2.6vw, 2.1rem); font-weight: 300; line-height: 1.3; min-height: 1.3em; }
.stage-rotate .lead { color: rgba(255, 255, 255, .78); }
.stage-rotate .rot { color: var(--heat); font-weight: 500; display: inline-block; }
.stage-rotate .rot.out { animation: rot-out .32s var(--ease) forwards; }
.stage-rotate .rot.in { animation: rot-in .45s var(--ease) both; }
@keyframes rot-out { to { opacity: 0; transform: translateY(-.4em); } }
@keyframes rot-in { from { opacity: 0; transform: translateY(.45em); } to { opacity: 1; transform: none; } }
.stage-intro { margin: 1.2rem 0 0; max-width: 40rem; font-size: clamp(1rem, 1.35vw, 1.15rem); color: rgba(255, 255, 255, .86); font-weight: 300; }
.stage-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }
.stage-actions .btn { padding: .8rem 1.4rem; font-size: 1.02rem; }
.btn.line { background: transparent; border-color: rgba(255, 255, 255, .6); color: #fff; }
.btn.line:hover, .btn.line:focus-visible { background: #fff; color: var(--stage); border-color: #fff; }
.stage-event { pointer-events: auto; display: grid; gap: .35rem; justify-self: end; width: 22rem; max-width: 100%; padding: 1.1rem 1.2rem; border-radius: var(--r); text-decoration: none; color: #fff;
  background: rgba(13, 38, 48, .72); border: 1px solid rgba(255, 255, 255, .2); border-left: 5px solid var(--heat); backdrop-filter: blur(6px); }
.stage-event .tag { color: var(--heat); font-size: .88rem; font-weight: 500; }
.stage-event b { font-size: 1.15rem; font-weight: 500; line-height: 1.35; }
.stage-event span:not(.tag) { font-size: .95rem; color: rgba(255, 255, 255, .85); }
.stage-event small { color: var(--blueprint); }
a.stage-event:hover, a.stage-event:focus-visible { color: #fff; }   /* not the site's dark link colour: this box is dark */
a.stage-event:hover b { text-decoration: underline; text-underline-offset: .2em; }
.stage-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 1rem 1.6rem; flex-wrap: wrap; padding: 0 var(--gutter) 18px; max-width: var(--wrap); margin: 0 auto; width: 100%;
  font-size: .9rem; color: rgba(255, 255, 255, .7); }
.stage-down { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; }
.stage-down::after { content: ""; width: .55rem; height: .55rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px);
  animation: nudge 2.2s var(--ease) infinite; }
@keyframes nudge { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 0 4px; } }
.stage-note { margin-left: auto; }
.stage-pause { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; padding: .35rem .9rem; font: inherit; font-size: .88rem; cursor: pointer; }
.stage-pause:hover, .stage-pause:focus-visible { background: rgba(255, 255, 255, .22); }
@media (max-width: 980px) {
  .stage-body { grid-template-columns: 1fr; padding-top: 110px; padding-bottom: 96px; }
  .stage-event { justify-self: start; }
  .stage-note { display: none; }
  .stage-shade { background: linear-gradient(0deg, rgba(13, 38, 48, .92) 10%, rgba(13, 38, 48, .45) 65%, rgba(13, 38, 48, .25)); }
}
@media (max-width: 520px) {
  .stage-actions .btn { flex: 1 1 auto; text-align: center; }
  .stage-foot { justify-content: space-between; }
}

/* ---- sections ---- */
.home-sec { padding-block: clamp(40px, 4.6vw, 68px); scroll-margin-top: 90px; }
#explore { scroll-margin-top: 0; }
/* two sections of one colour side by side read as one page: one gap between them, not both of theirs added up */
:is(.news-sec, .labs-sec, .partners-sec) + :is(.news-sec, .labs-sec, .partners-sec) { padding-top: 0; scroll-margin-top: 116px; }
:is(.board-sec, .leaders-sec) + :is(.board-sec, .leaders-sec) { padding-top: 0; scroll-margin-top: 116px; }
.home-head { display: flex; align-items: end; justify-content: space-between; gap: .6rem 2rem; flex-wrap: wrap; margin-bottom: clamp(22px, 3vw, 36px); }
.home-head h2 { margin: 0; font-size: clamp(1.7rem, 3.6vw, 2.8rem); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
.home-head p { margin: 0; color: var(--muted); max-width: 32rem; }

/* tiles: four columns of square cells; a tile is 1x1 (s), 2x1 (w), 1x2 (t) or 2x2 (l); gaps are filled by later tiles */
.board-sec { background: var(--mist); }
.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(13rem, auto); grid-auto-flow: dense; gap: 14px; }
.tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: .35rem; overflow: hidden; border-radius: var(--r);
  padding: 1.1rem 1.15rem; text-decoration: none; color: #fff; background: var(--slate-ink); isolation: isolate;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
a.tile:hover, a.tile:focus-visible { color: #fff; transform: translateY(-3px); box-shadow: 0 18px 30px -22px rgba(0, 0, 0, .7); }   /* color: not the site's dark link colour on a dark tile */
a.tile-news:hover, a.tile-news:focus-visible { color: var(--ink); }
.tile.size-w { grid-column: span 2; }
.tile.size-t { grid-row: span 2; }
.tile.size-l { grid-column: span 2; grid-row: span 2; }
.tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s var(--ease); }
a.tile:hover > img { transform: scale(1.04); }
.tile b { font-weight: 500; font-size: 1.1rem; line-height: 1.35; }
.tile.size-l b { font-size: clamp(1.3rem, 2.2vw, 1.8rem); }
.tile-more { margin-top: .5rem; padding-top: .55rem; border-top: 1px dashed rgba(255, 255, 255, .45); font-size: .88rem; }

.tile-person::before, .tile-video::before, .tile-event::before, .tile-lab:has(> img)::before, .tile-link.has-pic::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10, 20, 26, .86), rgba(10, 20, 26, .1) 55%); }
.tile-person > img { object-position: center 18%; }
.tile-cap { display: grid; gap: .1rem; }
.tile-cap span { font-size: .9rem; color: rgba(255, 255, 255, .82); }
.tile-news { background: var(--paper); color: var(--ink); padding: 0; justify-content: flex-start; border: 1px solid var(--line); }
.tile-news .tile-pic { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.tile-news .tile-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.tile-news:hover .tile-pic img { transform: scale(1.04); }
.tile-news .tile-text { display: grid; gap: .3rem; padding: 1rem 1.15rem 0; flex: 1; min-height: 0; align-content: start; }   /* start: a stretched title would show part of a line past its three */
.tile-news small { color: var(--muted); }
.tile-news b { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tile-news .tile-more { margin: 0 1.15rem 1rem; color: var(--crimson); border-top-color: var(--line); }
.tile-news.size-w { flex-direction: row; }
.tile-news.size-w .tile-pic { aspect-ratio: auto; width: 48%; flex: none; }
.tile-news.size-w .tile-text { padding-bottom: 3rem; }
.tile-news.size-w .tile-more { position: absolute; left: 48%; right: 0; bottom: 0; }
.tile-news.size-s .tile-pic { display: none; }
.tile-news.size-s .tile-text { padding-top: 1.15rem; }
.tile-lab { background: var(--area); }
.tile-lab:not(:has(> img)) { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 14px) var(--area); }
.tile-kicker { font-size: .85rem; color: rgba(255, 255, 255, .85); }
.tile-code { font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 600; line-height: 1; letter-spacing: .02em; margin-bottom: auto; order: -1; opacity: .95; }
.tile-link { background: var(--crimson); justify-content: space-between; }
.tile-link:nth-child(3n) { background: var(--stage); }
.tile-link b { font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 600; }
.tile-sub { font-size: .95rem; color: rgba(255, 255, 255, .86); }
.tile-arrow { display: none !important; align-self: flex-end; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .6); display: grid; place-items: center; transition: background-color .2s; }
.tile-link:hover .tile-arrow { background: #fff; color: var(--crimson); }
.tile-video { background: var(--stage); }
.tile-video .play { position: absolute; top: 50%; left: 50%; width: 4.4rem; height: 4.4rem; margin: -2.9rem 0 0 -2.2rem; border-radius: 50%; border: 3px solid #fff; }
.tile-video .play::after { content: ""; position: absolute; left: 1.65rem; top: 1.25rem; border-style: solid; border-width: .95rem 0 .95rem 1.5rem; border-color: transparent transparent transparent #fff; }
.tile-event { background: var(--stage); border-left: 6px solid var(--heat); }
.tile-event .tile-kicker { color: var(--heat); }
@media (max-width: 980px) { .board { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(11rem, auto); gap: 10px; }
  .tile { padding: .9rem; }
  .tile.size-l, .tile-news.size-w { grid-column: span 2; }
  .tile.size-t { grid-row: span 2; }
}
@media (max-width: 420px) { .tile-news.size-w { flex-direction: column; } .tile-news.size-w .tile-pic { width: auto; aspect-ratio: 16 / 9; } .tile-news.size-w .tile-more { position: static; } .tile-news.size-w .tile-text { padding-bottom: 0; } }

/* labs: area buttons, then the cards; the first card is larger */
.lab-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
.lab-filter button { font: inherit; font-size: .95rem; padding: .45rem 1rem; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; }
.lab-filter button::before { content: ""; display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--area, var(--slate)); margin-right: .45rem; vertical-align: .05em; }
.lab-filter button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.labs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.lab > a { display: flex; flex-direction: column; height: 100%; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--paper);
  color: var(--ink); text-decoration: none; transition: border-color .2s, transform .25s var(--ease); }
.lab > a:hover { border-color: var(--area); transform: translateY(-3px); }
.lab-pic { display: block; aspect-ratio: 16 / 9; background: var(--area); overflow: hidden; position: relative; }
.lab-pic img { width: 100%; height: 100%; object-fit: cover; }
.lab-pattern { background: radial-gradient(circle at 80% 30%, rgba(255, 255, 255, .22) 0 18%, transparent 19%),
  repeating-linear-gradient(0deg, rgba(255, 255, 255, .1) 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .1) 0 1px, transparent 1px 22px) var(--area); }
.lab-pattern span { position: absolute; left: 1rem; bottom: .6rem; color: #fff; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 600; letter-spacing: .02em; }
.lab-body { display: grid; gap: .35rem; padding: 1rem 1.15rem 1.2rem; align-content: start; }
.lab-body small { color: var(--area); font-weight: 500; filter: brightness(.8); }
.lab-body b { font-weight: 500; font-size: 1.08rem; line-height: 1.4; }
.lab-body span { color: var(--muted); font-size: .95rem; }
.lab-body .lab-people { font-size: .86rem; border-top: 1px solid var(--line); padding-top: .55rem; margin-top: .25rem; }
.lab.spotlight { grid-column: span 2; }
.lab.spotlight > a { display: grid; grid-template-columns: 1.1fr 1fr; }
.lab.spotlight .lab-body { align-content: center; padding: 1.4rem 1.6rem; }
.lab.spotlight .lab-pic { aspect-ratio: auto; min-height: 15rem; height: 100%; }
.lab.spotlight .lab-body b { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.lab[hidden] { display: none; }
@media (max-width: 900px) { .labs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lab.spotlight > a { grid-template-columns: 1fr; } .lab.spotlight .lab-pic { min-height: 0; aspect-ratio: 16 / 8; } }
@media (max-width: 560px) { .labs { grid-template-columns: 1fr; } .lab.spotlight { grid-column: auto; } }

/* numbers on blueprint */
.stats-sec { background: repeating-linear-gradient(0deg, rgba(143, 208, 212, .07) 0 1px, transparent 1px 28px),
  repeating-linear-gradient(90deg, rgba(143, 208, 212, .07) 0 1px, transparent 1px 28px) var(--stage); color: #fff; }
.numbers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.6rem; }
.numbers li { border-left: 3px solid var(--heat); padding-left: 1.1rem; display: grid; }
.numbers b { font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 600; line-height: 1.05; font-variant-numeric: tabular-nums; }
.numbers span { color: var(--blueprint); font-size: 1.05rem; }

/* news of the home page: one story large on the left, the others in rows with a small picture on the right */
.news-feature { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(24px, 3.4vw, 52px); }
.news-feature > li { min-width: 0; }
.news-feature > li.lead { grid-column: 1; grid-row: 1 / span 5; }
.news-feature > li:not(.lead) { grid-column: 2; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.news-feature > li:nth-child(2) { align-items: flex-start; }
.news-feature > li:last-child:not(.lead) { border-bottom: 0; align-items: flex-end; }
.news-feature a { display: grid; grid-template-columns: clamp(6.4rem, 11vw, 9.5rem) minmax(0, 1fr); gap: 1rem; align-items: start; width: 100%; padding: .9rem 0; text-decoration: none; color: var(--ink); }
.news-feature > li:nth-child(2) a { padding-top: 0; }
.news-feature > li:last-child:not(.lead) a { padding-bottom: 0; }
.news-feature .lead a { display: block; padding: 0; }
.news-pic { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r-sm); background: var(--stage); }
.news-pic .pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: transform .6s var(--ease); }
.news-feature a:hover .pic { transform: scale(1.04); }
.news-feature a:hover h3 { color: var(--crimson); }
.news-pic.none { background: repeating-linear-gradient(135deg, rgba(143, 208, 212, .09) 0 2px, transparent 2px 14px) var(--stage); }
.news-pic .mark { position: absolute; left: 50%; top: 50%; width: 62%; max-width: 15rem; height: auto; transform: translate(-50%, -50%); opacity: .85; }
.news-feature .lead .news-pic { aspect-ratio: 16 / 10; border-radius: var(--r); }
.news-pic .back { position: absolute; inset: -8%; width: 116%; height: 116%; max-width: none; object-fit: cover; filter: blur(22px) brightness(.62); }
.news-feature .lead .pic { object-fit: contain; object-position: center; }
.news-feature .lead a:hover .pic { transform: none; }
.news-meta { display: flex; flex-wrap: wrap; gap: .1rem .8rem; margin: 0 0 .25rem; font-size: .86rem; line-height: 1.5; color: var(--muted); }
.news-meta .cat { color: var(--slate); }
.news-feature h3 { margin: 0; font-size: 1rem; font-weight: 500; line-height: 1.5; color: var(--ink); transition: color .15s;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.news-feature .lead .news-text { padding-top: 1rem; }
.news-feature .lead .news-meta { font-size: .95rem; }
.news-feature .lead h3 { font-size: clamp(1.3rem, 2.1vw, 1.75rem); line-height: 1.4; }
.news-excerpt { margin: .55rem 0 0; color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
@media (max-width: 800px) {
  .news-feature { grid-template-columns: minmax(0, 1fr); }
  .news-feature > li.lead { grid-column: 1; grid-row: auto; margin-bottom: 1.1rem; }
  .news-feature > li:not(.lead) { grid-column: 1; }
  .news-feature > li:nth-child(2) { border-top: 1px solid var(--line); }
  .news-feature > li:nth-child(2) a { padding-top: .9rem; }
  .news-feature > li:last-child:not(.lead) a { padding-bottom: .9rem; }
}
@media (prefers-reduced-motion: reduce) { .news-pic .pic { transition: none; } }
.partners-sec { padding-bottom: clamp(32px, 4vw, 56px); }
.leaders-sec { background: var(--mist); }

/* the full screen arrives: each time a slide is shown its words come up one after another, and the picture fades in.
   Only "backwards" fill: when it ends nothing stays, so hover effects and the rotating words work as usual. */
@keyframes rise-in { from { opacity: 0; transform: translateY(var(--rise, 26px)); } }
@keyframes fade-in { from { opacity: 0; } }
.slide.is-active .stage-kicker,
.slide.is-active .stage-title span,
.slide.is-active .stage-rotate,
.slide.is-active .stage-intro,
.slide.is-active .stage-actions,
.slide.is-active .stage-event,
.slide.is-active .slide-title,
.slide.is-active .slide-box { animation: rise-in .8s var(--ease) backwards; }
.slide.is-active .stage-title span:nth-child(1), .slide.is-active .slide-title { animation-delay: .1s; }
.slide.is-active .stage-title span:nth-child(2) { animation-delay: .2s; }
.slide.is-active .stage-title span:nth-child(n+3) { animation-delay: .3s; }
.slide.is-active .stage-rotate, .slide.is-active .slide-box { animation-delay: .34s; }
.slide.is-active .stage-intro { animation-delay: .44s; }
.slide.is-active .stage-actions, .slide.is-active .stage-event { animation-delay: .54s; }
.slide.is-active .stage-canvas { animation: fade-in 1.4s ease-out backwards; }
.stage-foot { animation: fade-in .8s ease-out .8s backwards; }
@media (max-width: 700px) { .stage { --rise: 16px; } }
/* other pages come in gently when opened (the home page has its own arrival above) */
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }
body:not(.is-home):not(.admin) #main { animation: page-in .4s var(--ease) backwards; }
@media (prefers-reduced-motion: reduce) {
  .slide.is-active *, .stage-foot, #main { animation: none !important; }
}
/* no room beside or above the words (a phone on its side): the moving picture stays faint behind them */
@media (max-height: 480px) and (min-width: 701px) { .stage-canvas { opacity: .35; } }

/* clip in a window over the page */
.video-dialog { position: fixed; inset: 0; z-index: 200; background: rgba(5, 12, 16, .82); display: grid; place-items: center; padding: var(--gutter); }
.video-dialog[hidden] { display: none; }
.video-box { width: min(1100px, 100%); display: grid; gap: .6rem; }
.video-close { justify-self: end; font: inherit; background: #fff; color: var(--ink); border: 0; border-radius: 999px; padding: .4rem 1rem; cursor: pointer; }
.video-slot { aspect-ratio: 16 / 9; background: #000; border-radius: var(--r-sm); overflow: hidden; }
.video-slot iframe, .video-slot video { width: 100%; height: 100%; border: 0; display: block; }

/* a lab's own page */
.lab-page { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(28px, 4vw, 56px); padding-block: clamp(28px, 4vw, 48px) clamp(48px, 6vw, 80px); align-items: start; }
.lab-cover { margin: 0 0 1.6rem; }
.lab-facts { position: sticky; top: 100px; border: 1px solid var(--line); border-top: 5px solid var(--area); border-radius: var(--r); padding: 1.1rem 1.2rem 1.3rem; display: grid; gap: .8rem; }
.lab-facts dl { margin: 0; display: grid; gap: .2rem; }
.lab-facts dt { color: var(--muted); font-size: .9rem; margin-top: .5rem; }
.lab-facts dd { margin: 0; }
.lab-dot { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; background: var(--area); margin-right: .45rem; }
.lab-facts h2 { font-size: 1rem; margin: .6rem 0 0; }
.lab-facts ul { margin: 0; padding-left: 1.1rem; }
@media (max-width: 900px) { .lab-page { grid-template-columns: 1fr; } .lab-facts { position: static; } }

@media (prefers-reduced-motion: reduce) {
  .tile, .tile > img, .lab > a, .stage-down::after, .stage-rotate .rot { transition: none !important; animation: none !important; }
}

/* slides of the full screen: layers on top of each other, the shown one fades in */
.slide { position: absolute; inset: 0; z-index: 0; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end;
  opacity: 0; visibility: hidden; transition: opacity .8s var(--ease), visibility .8s; }
.slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
/* the shown slide is in the flow, so on a short screen the picture grows with its text instead of the text running up under the header */
.slide.is-active { position: relative; min-height: 100vh; min-height: 100svh; }
.stage-shade.photo { background: linear-gradient(0deg, rgba(10, 20, 26, .85) 0%, rgba(10, 20, 26, .25) 45%, rgba(10, 20, 26, .05) 70%, rgba(10, 20, 26, .45) 100%); }
.slide-cap { max-width: 52rem; display: grid; justify-items: start; gap: 0; }
.slide-title { margin: 0; font-size: clamp(1.8rem, 4.4vw, 3.6rem); font-weight: 500; line-height: 1.32; color: #fff; }
.slide-title, .slide-title a { background: var(--crimson); padding: .08em .45em .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.slide-title a { color: #fff; text-decoration: none; padding: 0; }
.slide-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; }
.slide-box { display: flex; align-items: center; gap: 1.2rem 1.6rem; max-width: 46rem; padding: 1rem 1.3rem; background: rgba(10, 20, 26, .82); }
.slide-box p { margin: 0; font-size: clamp(1rem, 1.3vw, 1.12rem); font-weight: 300; color: rgba(255, 255, 255, .92); }
.slide-watch { flex: none; display: grid; justify-items: center; gap: .35rem; color: #fff; text-decoration: none; font-size: .85rem; font-weight: 500; }
.slide-watch .play { position: relative; width: 3.2rem; height: 3.2rem; border: 2px solid #fff; border-radius: 50%; transition: background-color .2s; }
.slide-watch .play::after { content: ""; position: absolute; left: 1.2rem; top: .9rem; border-style: solid; border-width: .65rem 0 .65rem 1.05rem; border-color: transparent transparent transparent #fff; }
.slide-watch:hover, .slide-watch:focus-visible { color: #fff; }   /* not the site's dark link colour: this box is dark */
.slide-watch:hover .play { background: var(--crimson); border-color: var(--crimson); }
.stage-dots { display: flex; gap: 2px; }
.stage-dots button { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 3px; border: 0; background: none; cursor: pointer; }
.stage-dots button > span { position: relative; display: block; overflow: hidden; width: 26px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .35); }
.stage-dots button[aria-current="true"] > span { width: 44px; }
.stage-dots button[aria-current="true"] > span::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: dot-fill 7s linear both; }
.stage.paused .stage-dots span::after, .stage.static .stage-dots span::after { animation: none !important; transform: none; }
.stage-dots button:focus-visible { outline: 2px solid #fff; outline-offset: 0; }
.stage:not(:has(.slide-anim.is-active)) .stage-note { visibility: hidden; }
@media (max-width: 700px) {
  .slide-box { flex-direction: column; align-items: flex-start; padding: .9rem 1rem; }
  .stage-foot { gap: .4rem 1rem; justify-content: space-between; }
  .stage-dots { order: -1; }
}
/* A phone: the words are a compact group at the bottom and the picture has the room above them, never under them
   (home.js fits the drawing to that room; --zone is where it ends). An event is a slim strip: its full text is on the
   large tile further down. With an event the line above the heading (the logo says the same) and the paragraph give way;
   on a small phone the paragraph gives way anyway. */
@media (max-width: 700px) {
  .stage-body { padding-bottom: 58px; gap: .85rem; }
  .slide-anim .stage-body { padding-top: 230px; padding-top: calc(86px + clamp(128px, 24svh, 240px)); }
  .slide-anim .stage-shade { background: linear-gradient(180deg, rgba(13, 38, 48, .85) 0, rgba(13, 38, 48, .85) 70px, rgba(13, 38, 48, .08) 112px, rgba(13, 38, 48, .08) calc(var(--zone, 42%) - 48px), rgba(13, 38, 48, .94) var(--zone, 42%)); }
  .has-event .stage-kicker, .has-event .stage-intro, .stage.short .stage-intro { display: none; }
  .stage-title { font-size: clamp(1.85rem, 9.4vw, 2.6rem); }
  .stage-rotate { margin-top: .55rem; font-size: 1.12rem; }
  body:has(.admin-float) .stage-down { visibility: hidden; }      /* signed in: the edit button sits on this corner of the row */
  .stage-actions { margin-top: 1rem; }
  .stage-actions .btn { flex: 1 1 calc(50% - .35rem); min-width: 0; padding: .65rem .7rem; text-align: center; }
  .stage-event { width: 100%; justify-self: stretch; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: .1rem .6rem; padding: .6rem .85rem;
    border: 0; border-left: 3px solid var(--heat); border-radius: var(--r-sm); background: rgba(255, 255, 255, .07); backdrop-filter: none; }
  .stage-event span:not(.tag) { display: none; }
  .stage-event b { grid-column: 1 / 3; grid-row: 2; font-size: 1.02rem; }
  .stage-event small { font-size: .85rem; }
  /* it opens something: shown by an arrow, as a phone has no hover */
  a.stage-event { grid-template-columns: auto minmax(0, 1fr) auto; }
  a.stage-event::after { content: ""; grid-column: 3; grid-row: 1 / 3; align-self: center; width: .5rem; height: .5rem; margin-right: .2rem;
    border: solid rgba(255, 255, 255, .7); border-width: 2px 2px 0 0; transform: rotate(45deg); }
}
/* shortcuts under the full screen */
.quickbar { background: var(--crimson); }
.quickbar .quick { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; }
.quickbar .quick a { display: block; padding: .95rem 1.1rem; color: #fff; text-decoration: none; font-weight: 500; font-size: .98rem; }
.quickbar .quick a:hover, .quickbar .quick a:focus-visible { background: rgba(0, 0, 0, .2); }
@media (max-width: 700px) {
  .quickbar .quick { display: grid; grid-template-columns: 1fr 1fr; }
  .quickbar .quick a { padding: .8rem .4rem; text-align: center; font-size: .92rem; border-bottom: 1px solid rgba(255, 255, 255, .15); }
}

/* phones: the picture reaches both edges of the screen.
   Safari colours the status bar from the page's background, so the home page's background is the picture's colour until
   the white header takes over. The picture is as tall as the screen with the browser's bars hidden (100lvh), and what
   must stay readable is lifted by the height of those bars (--bar is 0 on a computer). */
.is-home { background: var(--stage); }
.is-home:has(.chrome.stuck) { background: var(--paper); }
.is-home #main { background: var(--paper); }
/* viewport-fit=cover: keep the logo, the text and the footer clear of the status bar and home indicator */
.is-home .chrome { padding-top: env(safe-area-inset-top); }
.is-home .chrome.stuck .site-header { padding-top: env(safe-area-inset-top); }
.is-home .slide { padding-top: env(safe-area-inset-top); }
.is-home .site-footer { padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
@supports (height: 100lvh) {
  .stage, .slide.is-active { min-height: var(--full, 100lvh); }   /* --full: set by home.js on phones */
  .stage { --bar: calc(var(--full, 100lvh) - 100svh); }
  .slide { padding-bottom: var(--bar); }
  .stage-foot { padding-bottom: calc(18px + var(--bar)); }
}
/* what follows the picture can rise over its empty bottom part (home.js), so it paints on top and is never see-through;
   :where keeps this weaker than the sections' own backgrounds. #explore stays where that section ends up. */
.is-home { overflow-anchor: none; }   /* Chrome would otherwise undo that rise by moving the scroll position */
.is-home .stage ~ :not(.video-dialog), .is-home .site-footer { position: relative; }   /* the clip's window stays fixed over the screen */
:where(.is-home .stage ~ *) { background: var(--paper); }
#explore { position: absolute; left: 0; bottom: var(--bar, 0px); }

.quickbar .quick a::after { content: none; }      /* plain words, no arrow */