/* Barlow + Barlow Semi Condensed, self-hosted (2026-09-17): the two Google
   Fonts <link>s this replaced meant a third-party stylesheet fetch plus a
   font-file fetch from a second host, on every first visit. These are the
   same files that stylesheet named (latin + latin-ext only — this site
   never shows cyrillic/vietnamese text, and Slovene needs latin-ext for
   č š ž), with the exact unicode-range values it gave kept, so the browser
   still loads only the subset a page actually needs. */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/barlow-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/barlow-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/barlow-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/barlow-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/barlow-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/barlow-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/barlow-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/barlow-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/barlow-semi-condensed-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/barlow-semi-condensed-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/barlow-semi-condensed-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/barlow-semi-condensed-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/barlow-semi-condensed-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/barlow-semi-condensed-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/*  E5 — "Field Lab" hybrid (B). Shared across index3 + detail pages.
    Concise front page links to detail tabs. Barlow + Barlow Semi Condensed.
    Blues taken from the homepage hero picture (maj 2026-10-02); the token
    names still say "teal" — they are the site's accent, whatever its hue. */
:root{
  --bg:#ffffff;--alt:#0a3d6c;--ink:#172420;--muted:#53615b;--faint:#656e68;
  --line:#e0e6e3;--teal:#0d5d9c;--teal-d:#0a3d6c;--teal-l:#e6f0fa;--sand:#926329;
  --sans:"Barlow",system-ui,-apple-system,sans-serif;--cond:"Barlow Semi Condensed",var(--sans);
  --gutter:20px;
}
/* Phone first: the rules without a media query are the phone layout, and
   min-width queries add the wider ones (561px: tablet, 901px: desktop with
   the menu in a row). */
@media(min-width:561px){:root{--gutter:30px}}
*{box-sizing:border-box;margin:0;padding:0}
/* only for a visitor who hasn't asked the OS for reduced motion — smooth
   scrolling (in-page anchors, the skip link) can trigger vestibular
   discomfort otherwise */
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--teal-d);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gutter)}
/* a long URL or word in a post wraps instead of widening the page */
main{overflow-wrap:break-word}

/* skip link (#37/a11y): the page's first focusable element, invisible
   until a keyboard user tabs to it */
.skip-link{position:absolute;left:8px;top:-60px;z-index:200;background:var(--teal);color:#fff;padding:10px 16px;border-radius:0 0 8px 8px;font-family:var(--cond);font-weight:600;font-size:14px;text-decoration:none;transition:top .15s ease}
.skip-link:focus{top:0}

/* visible focus ring for keyboard users on every interactive element,
   without drawing one on an ordinary mouse click (:focus-visible) */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,
[tabindex]:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:2px}

header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
/* header, phone and tablet: one 60px row (logo, search, menu button); the
   menu is a drawer under it that scrolls on its own and carries the
   language switch. Each parent has a button that opens its children. */
header.nav .wrap{display:flex;align-items:center;gap:4px;height:60px;padding-right:8px;max-width:1320px}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto;min-width:0}
.brand .mk{width:42px;height:42px;background:var(--teal);color:#fff;border-radius:9px;display:grid;place-items:center;font-family:var(--cond);font-weight:700;font-size:19px}
.brand .nm{font-family:var(--cond);font-weight:700;font-size:18px;line-height:1.05;letter-spacing:.01em;text-transform:uppercase}
.brand .nm small{display:none;font-family:var(--sans);font-weight:500;text-transform:none;font-size:11.5px;color:var(--faint);letter-spacing:0}
#siteNav{display:none;position:absolute;top:100%;left:0;right:0;height:calc(100vh - 60px);height:calc(100dvh - 60px);
  overflow-y:auto;overscroll-behavior:contain;background:#fff;border-top:1px solid var(--line);padding:6px 0 24px;font-size:17px;font-weight:500}
header.nav.nav-open #siteNav{display:block}
#siteNav a{display:flex;align-items:center;min-height:50px;padding:0 var(--gutter);color:var(--ink)}
#siteNav a:hover{background:var(--teal-l);color:var(--teal-d);text-decoration:none}
#siteNav a.active,#siteNav .menu.has-active>a{color:var(--teal);font-weight:700}
#siteNav>a,#siteNav .menu{border-bottom:1px solid var(--line)}
#siteNav .menu{display:flex;flex-wrap:wrap}
#siteNav .menu>a{flex:1 1 0;min-width:0}
.sub-toggle{flex:none;width:56px;display:grid;place-items:center;background:none;border:0;border-left:1px solid var(--line);color:var(--muted);cursor:pointer}
.sub-toggle svg{transition:transform .15s}
#siteNav .menu.open .sub-toggle svg{transform:rotate(180deg)}
#siteNav .sub{display:none;flex-basis:100%;padding:0 0 8px;background:#f6f9fb}
#siteNav .menu.open .sub{display:block}
#siteNav .sub a{min-height:44px;padding:0 var(--gutter) 0 calc(var(--gutter) + 16px);font-size:16px;color:var(--muted)}
#siteNav .sub a:hover{color:var(--teal-d)}
#siteNav .sub a.active{color:var(--teal)}
.nav-lang{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px var(--gutter) 0;font-size:14px;color:var(--muted)}
.nav-lang .seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
#siteNav .nav-lang a{width:56px;min-height:44px;justify-content:center;padding:0;font-size:15px}
#siteNav .nav-lang a.on{background:var(--teal);color:#fff;font-weight:700}
.lang{display:none;margin-left:6px;font-size:13px;color:var(--faint);border-left:1px solid var(--line);padding-left:14px}
.lang a{color:var(--faint);text-decoration:none;font:inherit;padding:2px}
.lang a.on{color:var(--teal);font-weight:700}
@media(min-width:561px){.brand .nm small{display:block}}

/* header, desktop: the menu is a row with dropdowns on hover; from 901 to
   1240px it takes its own row under the logo */
@media(min-width:901px){
  header.nav .wrap{gap:18px;height:68px;padding-right:var(--gutter)}
  .brand{margin-right:0}
  /* .nav-open and .open can be left over from a drawer opened before the
     window was widened or the tablet turned; they change nothing here */
  #siteNav,header.nav.nav-open #siteNav{display:flex;position:static;height:auto;overflow:visible;background:none;border-top:0;padding:0;
           margin-left:auto;align-items:center;gap:1px;font-size:14px}
  #siteNav a{display:block;min-height:0;padding:9px 11px;border-radius:7px;white-space:nowrap}
  #siteNav>a,#siteNav .menu{border-bottom:0}
  #siteNav .menu{position:relative;flex-wrap:nowrap;align-items:center}
  #siteNav .menu>a{flex:0 1 auto;min-width:auto}
  #siteNav .menu>a::after{content:" ▾";font-size:.75em;opacity:.6}
  .sub-toggle{display:none}
  #siteNav .sub{position:absolute;top:100%;left:0;min-width:200px;padding:6px 0;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.08);z-index:60}
  #siteNav .sub a{min-height:0;padding:8px 14px;font-size:inherit;color:var(--ink)}
  #siteNav .menu.open .sub{display:none}
  #siteNav .menu:hover .sub,#siteNav .menu:focus-within .sub{display:block}
  .nav-lang{display:none}
  .lang{display:block}
}
@media(min-width:901px) and (max-width:1240px){
  header.nav .wrap{flex-wrap:wrap;height:auto;padding-top:8px;padding-bottom:8px}
  #siteNav{order:3;flex-basis:100%;margin-left:0;flex-wrap:wrap}
}
/* a touch screen at desktop width has no hover either: the parent's
   button opens its dropdown, as on a phone */
@media(min-width:901px) and (hover:none){
  #siteNav .menu>a{padding-right:2px}
  #siteNav .menu>a::after{content:none}
  .sub-toggle{display:grid;width:30px;align-self:stretch;border-left:0;border-radius:7px;color:var(--faint)}
  .sub-toggle svg{width:14px;height:14px}
  #siteNav .menu:hover .sub,#siteNav .menu:focus-within .sub{display:none}
  #siteNav .menu.open .sub{display:block}
}
.notfound{padding:80px var(--gutter) 90px;text-align:center;max-width:640px}
.notfound .code{font-family:var(--cond);font-weight:700;font-size:96px;line-height:1;color:var(--teal-l);letter-spacing:.02em}
.notfound h1{margin:6px 0 14px}
.notfound p{color:var(--muted);max-width:52ch;margin:0 auto 10px}
.notfound .back{margin-top:22px}
.notfound .back a{font-family:var(--cond);font-weight:600;font-size:15px;color:#fff;background:var(--teal);padding:10px 18px;border-radius:8px;text-decoration:none}
.notfound .back a:hover{background:var(--teal-d)}
.notfound-rule{border:0;border-top:1px solid var(--line);margin:34px auto}
.nav-burger{display:grid;place-items:center;width:44px;height:44px;flex:none;background:none;border:0;cursor:pointer;color:var(--ink);padding:0;border-radius:8px}
.nav-burger:hover{background:var(--teal-l);color:var(--teal-d)}
.nav-burger .i-close,header.nav.nav-open .nav-burger .i-open{display:none}
header.nav.nav-open .nav-burger .i-close{display:block}
header.nav.nav-open .nav-burger{background:var(--teal-l)}
@media(min-width:901px){.nav-burger{display:none}}

.hero{position:relative;min-height:440px;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero .bg{position:absolute;inset:0;background:linear-gradient(120deg,rgba(5,39,75,.72),rgba(13,93,156,.45)),var(--hero,none) center/cover}
.hero .bg::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(125deg,transparent 0 22px,rgba(255,255,255,.04) 22px 44px)}
.hero .ph-note{position:absolute;top:14px;right:16px;font-size:11px;color:rgba(255,255,255,.6);font-family:var(--cond);letter-spacing:.04em}
.hero .wrap{position:relative;padding:54px var(--gutter)}
.hero .kk{font-family:var(--cond);font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.12em;color:#96dffc}
.hero h1{font-family:var(--cond);font-weight:700;font-size:clamp(36px,5.6vw,62px);line-height:1.02;margin-top:12px;max-width:18ch;text-transform:uppercase;letter-spacing:.005em}
.hero p{font-size:19px;max-width:56ch;margin-top:18px;color:rgba(255,255,255,.92)}
.hero.hero-img{display:block;min-height:0;background:#0b2545}
.hero.hero-img h1{margin:0;max-width:none}
.hero.hero-img img{display:block;width:100%;height:auto}
.hero.hero-img .wrap{padding:18px var(--gutter) 24px}
.hero.hero-img p{margin-top:0}

/* inner-page header (detail pages) */
.pagehead{background:var(--alt);color:#fff;border-bottom:1px solid var(--alt)}
.pagehead .wrap{padding:40px var(--gutter) 34px}
.pagehead .crumb{font-family:var(--cond);font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.7);font-weight:600;margin-bottom:12px}
.pagehead .crumb a{color:rgba(255,255,255,.7)}
.pagehead h1{font-family:var(--cond);font-weight:700;font-size:clamp(32px,5vw,50px);text-transform:uppercase;letter-spacing:.005em;line-height:1.02;hyphens:auto}
@media(min-width:561px){.pagehead h1{hyphens:manual}}
.pagehead p{font-size:18px;color:rgba(255,255,255,.85);margin-top:12px;max-width:70ch}
.pagehead a{color:#96dffc}

section{padding:56px 0}
.alt{background:var(--alt)}
.alt .stitle{color:#fff}
.alt .stitle .all{color:#96dffc}
.alt .prose p,.alt .prose li,.alt .prose h2,.alt .prose h3,.alt .prose .ppart{color:#fff}
.alt .prose a{color:#96dffc}
.skk{font-family:var(--cond);font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.1em;color:var(--teal);margin-bottom:8px}
.stitle{font-family:var(--cond);font-weight:700;font-size:30px;text-transform:uppercase;letter-spacing:.01em;margin-bottom:24px;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 14px}
.stitle .all{margin-left:auto;font-family:var(--sans);font-weight:600;font-size:14px;text-transform:none;letter-spacing:0;padding:10px 0}
@media(min-width:561px){
  .stitle{flex-wrap:nowrap;gap:14px}
  .stitle .all{white-space:nowrap;padding:0}
}

.intro{font-size:18px;line-height:1.55;max-width:74ch;color:var(--ink)}
@media(min-width:561px){.intro{font-size:21px}}
.intro b{color:var(--teal-d)}
.lead-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--cond);font-weight:600;font-size:15px;text-transform:uppercase;letter-spacing:.03em;padding:11px 20px;border-radius:8px}
.btn.p{background:var(--teal);color:#fff}.btn.p:hover{background:var(--teal-d);text-decoration:none}
.btn.s{border:1px solid var(--line);color:var(--ink)}.btn.s:hover{border-color:var(--teal);color:var(--teal-d);text-decoration:none}

/* compact research cards (front page summary) */
.rcards{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media(min-width:561px){.rcards{grid-template-columns:1fr}}
@media(min-width:901px){.rcards{grid-template-columns:repeat(2,1fr)}}
.rc{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:22px 24px;border-top:3px solid var(--teal)}
.rc .n{font-family:var(--cond);font-weight:700;font-size:14px;color:var(--sand);letter-spacing:.04em}
.rc h3{font-family:var(--cond);font-weight:700;font-size:21px;text-transform:uppercase;margin:6px 0 7px}
.rc p{font-size:14.5px;color:var(--muted)}

/* detail research rows */
/* research rows carry no pictures — the areas have none and never will, so
   the row is text only rather than half a filler band. Same typography as
   before; the prose is width-capped like .pagehead p so full-bleed lines
   stay readable. */
.rrow{display:block;padding:24px 0;border-top:1px solid var(--line)}
.rrow:first-of-type{border-top:0}
.rrow .n{font-family:var(--cond);font-weight:700;font-size:15px;color:var(--sand);letter-spacing:.05em}
.rrow h3{font-family:var(--cond);font-weight:700;font-size:26px;text-transform:uppercase;margin:5px 0 8px}
.rrow p{color:var(--muted);font-size:16px;max-width:70ch}
.rrow .tags{font-family:var(--cond);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--sand);margin-top:12px}

.ngrid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
@media(min-width:561px){.ngrid{grid-template-columns:1fr 1fr}}
@media(min-width:901px){.ngrid{grid-template-columns:repeat(3,1fr)}}
.ncard{background:var(--bg);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.ncard .ph{height:160px}
.ncard .body{padding:18px 20px 20px}
.ncard .meta{font-family:var(--cond);font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);margin-bottom:7px}
.ncard .meta .c{color:#fff;background:var(--teal);padding:2px 8px;border-radius:4px;font-weight:600}
.ncard h3{font-size:18px;font-weight:600;line-height:1.3}
.ncard h3 a{color:var(--ink)}
.ncard p{font-size:14px;color:var(--muted);margin-top:6px}
/* a post with no picture drops the image slot rather than showing a filler
   band; everything else about the card is unchanged, so it sits in the grid
   as the same card minus the photo. Publication posts drafted from SICRIS
   records never carry an image, so this is the ordinary shape for them. */

.pgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media(min-width:561px){.pgrid{grid-template-columns:1fr}}
@media(min-width:901px){.pgrid{grid-template-columns:repeat(2,1fr)}}
/* on a phone the programme label goes above the name instead of beside it */
.pitem{display:flex;flex-direction:column;gap:4px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:18px 20px}
.pitem .nm{font-family:var(--cond);font-weight:700;font-size:19px;text-transform:uppercase}
.pitem .pg{order:-1;font-size:12.5px;font-weight:700;color:var(--sand);text-transform:uppercase;letter-spacing:.04em}
@media(min-width:561px){
  .pitem{flex-direction:row;gap:16px;align-items:baseline;justify-content:space-between}
  .pitem .pg{order:0;white-space:nowrap}
}
.pitem .d{font-size:14.5px;color:var(--muted);margin-top:3px}

.resgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media(min-width:561px){.resgrid{grid-template-columns:1fr 1fr}}
@media(min-width:901px){.resgrid{grid-template-columns:repeat(4,1fr)}}
.rescard{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:18px 20px;border-top:3px solid var(--teal)}
.rescard .nm{font-family:var(--cond);font-weight:700;font-size:17px;text-transform:uppercase}
.rescard .d{font-size:13.5px;color:var(--muted);margin-top:5px}

/* people: two to a row on a phone, the photo keeps a portrait shape */
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.person{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px}
.person .ph{aspect-ratio:3/4;border-radius:7px;margin-bottom:11px}
.person .ph img{object-position:center 20%}
.person .nm{font-family:var(--cond);font-weight:700;font-size:17px}
.person .role{font-size:12.5px;color:var(--sand);font-weight:600;text-transform:uppercase;letter-spacing:.03em;margin-top:2px}
.person .mail{font-size:12.5px;color:var(--muted);margin-top:6px;overflow-wrap:anywhere}
@media(min-width:561px){
  .people{grid-template-columns:1fr 1fr;gap:14px}
  .person{padding:15px 17px}
  .person .ph{aspect-ratio:auto;height:210px}
  .person .mail{overflow-wrap:normal}
}
@media(min-width:901px){.people{grid-template-columns:repeat(4,1fr)}}

.band{background:var(--teal-d);color:#fff}
.band .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;padding:50px var(--gutter)}
@media(min-width:561px){.band .wrap{grid-template-columns:1fr}}
@media(min-width:901px){.band .wrap{grid-template-columns:1.3fr 1fr}}
.band h2{font-family:var(--cond);font-weight:700;font-size:30px;text-transform:uppercase}
.band p{color:rgba(255,255,255,.85);margin-top:12px;max-width:48ch}
.band address{font-style:normal;line-height:1.9;color:rgba(255,255,255,.85)}
.band address a{color:#fff}
.band h3{font-family:var(--cond);text-transform:uppercase;letter-spacing:.06em;font-size:14px;margin-bottom:10px;color:#96dffc}
.band .btn.p{background:#fff;color:var(--teal-d);margin-top:8px}
.band .lab{display:block;width:200px;max-width:100%;height:auto;border-radius:8px;margin-bottom:16px}

.prose p{font-size:17px;color:var(--ink);max-width:70ch;margin-bottom:16px}
.prose h2{font-family:var(--cond);font-weight:700;font-size:22px;text-transform:uppercase;margin:28px 0 10px}
.prose h3{font-family:var(--cond);font-weight:700;font-size:20px;text-transform:uppercase;margin:26px 0 10px}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:36px;align-items:start}
@media(min-width:561px){.contact-grid{grid-template-columns:1fr}}
@media(min-width:901px){.contact-grid{grid-template-columns:1.2fr 1fr}}
.cbox{background:var(--alt);color:#fff;border:1px solid var(--alt);border-radius:12px;padding:22px 24px}
.cbox h4{font-family:var(--cond);text-transform:uppercase;letter-spacing:.05em;font-size:14px;color:#96dffc;margin-bottom:12px}
.cbox address{font-style:normal;line-height:1.9}
.cbox p,.cbox address{color:rgba(255,255,255,.85)}
.cbox a{color:#fff}
.mapph{height:340px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.mapph iframe{width:100%;height:100%;border:0;display:block}
.maplinks{font-size:14px;color:var(--muted);margin-top:10px}

/* publications */
.pubyear{font-family:var(--cond);font-weight:700;font-size:30px;color:var(--teal);letter-spacing:.01em;margin:38px 0 4px;padding-bottom:8px;border-bottom:2px solid var(--teal-l)}
.pubyear:first-of-type{margin-top:0}
.publist{list-style:none}
.publist li{padding:14px 0;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.5}
.publist li:last-child{border-bottom:0}
.publist .au{font-weight:600;color:var(--ink)}
.publist .ti{color:var(--ink)}
.publist .ve{color:var(--muted);font-style:italic}
.publist .doi{font-family:var(--cond);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--teal-d);border:1px solid var(--line);border-radius:5px;padding:1px 7px;margin-left:6px;white-space:nowrap}
.publist .doi:hover{border-color:var(--teal);text-decoration:none}
.pubnote{font-size:14px;color:var(--faint);margin-top:24px;max-width:70ch}

footer{background:#05274b;color:rgba(255,255,255,.6);font-size:13px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:20px var(--gutter)}
footer a{color:rgba(255,255,255,.78)}

.ph{position:relative;background:repeating-linear-gradient(135deg,#d6e4f0 0 14px,#e3edf6 14px 28px);display:grid;place-items:center}
.ph span{font-family:var(--cond);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#4f6478;background:rgba(255,255,255,.8);padding:4px 11px;border-radius:20px}

/* linked cards — person/project/research rows became <a> */
a.person,a.pitem,a.rrow,a.rc{text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s}
a.person:hover,a.pitem:hover,a.rc:hover{border-color:var(--teal);box-shadow:0 2px 10px rgba(0,0,0,.05)}
a.rrow:hover h3,a.rc:hover h3{color:var(--teal)}
.person .meta{font-family:var(--cond);font-weight:600;font-size:11.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.03em;margin-top:6px}
.pubyear a{color:inherit;text-decoration:none}
.pubyear a:hover{text-decoration:underline}
/* year jump / archive navigation */
.yearnav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 26px}
.yearnav a{font-family:var(--cond);font-weight:600;font-size:14px;color:var(--teal);text-decoration:none;padding:8px 12px;border:1px solid var(--line);border-radius:6px;white-space:nowrap}
.yearnav a:hover{border-color:var(--teal);background:var(--teal-l);color:var(--teal-d)}
.yearnav a.active{background:var(--teal);color:#fff;border-color:var(--teal);font-weight:700}
@media(min-width:561px){.yearnav a{padding:2px 9px}}

/* per-person local sub-nav (CV / Projects / Teaching / Publications) */
.subnav{display:flex;flex-wrap:wrap;align-items:center;gap:2px;margin:0 0 30px;border-bottom:1px solid var(--line)}
.subnav a{font-family:var(--cond);font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);padding:10px 12px;border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:7px;white-space:nowrap}
.subnav a:hover{color:var(--teal-d);text-decoration:none;background:var(--teal-l)}
.subnav a.active{color:var(--teal);border-bottom-color:var(--teal);font-weight:700}
@media(min-width:561px){.subnav a{padding:9px 15px}}
/* bilingual rich blocks: each page is ONE language now (2026-09-04),
   so nothing is hidden — the SL/EN control is a link to the twin. */
/* .l-sl/.l-en are gone (2026-09-04): each page is one language now, so
   nothing has to be hidden. The SL/EN control is a link, not a toggle. */

.plinks{font-size:14.5px;margin-top:10px}
.pagehead .ptitle{font-size:17px;color:#fff;font-weight:500;margin-top:8px;max-width:70ch}
.pagehead .pmeta{font-size:14px;color:rgba(255,255,255,.8);margin-top:12px}
.prose .ppart{font-size:14.5px;color:var(--muted)}
/* lists inside prose blocks (CV / projects / teaching) */
.prose ul{margin:0 0 16px;padding-left:20px}
.prose li{font-size:16px;color:var(--ink);margin-bottom:5px;max-width:74ch}
.prose li p{margin:0}

/* member portraits (image ingest #12) — img fills the .ph placeholder box */
.ph{overflow:hidden}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* aspect-ratio reserves the box before the image loads (CLS) — object-fit
   crops whatever the source's real proportions are to fit it */
.portrait{display:block;width:180px;max-width:45%;aspect-ratio:3/4;border-radius:10px;margin:6px 0 18px;object-fit:cover}

/* --- search --- */
/* phone and tablet: a 44px icon button; desktop keeps the small glyph.
   On a phone the box spans the screen just under the 60px header. */
.search-wrap{position:relative;flex:none}
.search-toggle{display:grid;place-items:center;width:44px;height:44px;background:none;border:0;cursor:pointer;color:var(--ink);padding:0;border-radius:8px}
.search-toggle .glyph{display:none}
.search-toggle:hover{background:var(--teal-l);color:var(--teal-d)}
.search-box{position:fixed;left:16px;right:16px;top:64px;width:auto;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 34px rgba(0,0,0,.14);padding:14px;z-index:60;max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px);overflow-y:auto;overscroll-behavior:contain;
  --pagefind-ui-primary:var(--teal-d);--pagefind-ui-text:var(--ink);--pagefind-ui-background:#fff;
  --pagefind-ui-border:var(--line);--pagefind-ui-border-width:1px;--pagefind-ui-border-radius:8px;
  --pagefind-ui-font:var(--sans)}
@media(min-width:561px){
  .search-box{position:absolute;left:auto;right:0;top:calc(100% + 12px);width:380px;max-width:calc(100vw - 40px);max-height:calc(100vh - 120px);max-height:calc(100dvh - 120px)}
}
@media(min-width:901px){
  .search-wrap{margin-left:6px;padding-left:14px;border-left:1px solid var(--line)}
  .search-toggle{display:inline-block;width:auto;height:auto;color:var(--faint);font-size:19px;line-height:1;padding:4px 6px;border-radius:7px}
  .search-toggle .glyph{display:inline}
  .search-toggle svg{display:none}
}