/* ==========================================================================
   APYCF — main site
   Typographic system and layout patterned on frontiersin.org.
   Frontiers sets MuseoSans, which is a licensed face; Nunito Sans is the
   closest freely available substitute and is used here throughout.
   ========================================================================== */

:root{
  --page:#F7F7F7;          /* Frontiers page ground */
  --white:#FFFFFF;
  --ink:#0B0B0B;
  --ink-2:#545454;         /* secondary text */
  /* #767676 gives only 4.24:1 on the #F7F7F7 ground, below AA for small text. */
  --ink-3:#6B6B6B;
  --line:#E3E3E3;
  --line-2:#EFEFEF;

  --blue:#001991;          /* brand, deep */
  --blue-br:#003BDE;       /* links, accents */
  --blue-tint:#EEF1FF;
  --alert:#B4432B;

  --font:'Nunito Sans','Helvetica Neue',Helvetica,Arial,sans-serif;

  --r-card:16px;
  --r-lg:32px;
  --r-pill:999px;

  --t-xs:12px;
  --t-s:14px;
  --t-body:16px;
  --t-lead:clamp(17px,1.5vw,19px);
  --t-h3:19px;
  --t-h2:clamp(22px,2.2vw,28px);
  --t-h1:clamp(28px,3.4vw,40px);
  --t-hero:clamp(30px,4vw,50px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:100px;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{background:var(--page);color:var(--ink);font:400 var(--t-body)/1.55 var(--font);
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
/* With display:contents the <source> elements also become grid/flex items,
   which pushes the <img> out of its intended column. */
picture{display:contents}
source{display:none}
a{color:var(--blue-br);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:where(a,button,summary,input):focus-visible{outline:2px solid var(--blue-br);outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--blue);color:#fff;
  padding:12px 20px;border-radius:0 0 var(--r-card) 0;font:700 var(--t-s)/1 var(--font)}
.skip:focus{left:0}

.shell{width:min(100% - 44px,1220px);margin-inline:auto}

/* --- type: Frontiers keeps headings small and light ------------------- */
h1,h2,h3,h4{font-family:var(--font);line-height:1.18;color:var(--ink)}
h1{font-size:var(--t-h1);font-weight:600;letter-spacing:-.015em}
h2{font-size:var(--t-h2);font-weight:400;letter-spacing:-.01em}
h3{font-size:var(--t-h3);font-weight:600}
h4{font-size:var(--t-s);font-weight:700}
.lead{font:300 var(--t-lead)/1.5 var(--font);color:var(--ink-2)}
.meta{font-size:var(--t-s);color:var(--ink-3)}
.eyebrow{font:700 var(--t-xs)/1.4 var(--font);letter-spacing:.09em;text-transform:uppercase;
  color:var(--blue);display:block;margin-bottom:9px}

/* ==========================================================================
   Header
   ========================================================================== */
.top{background:var(--white);border-bottom:1px solid var(--line)}
.top .shell{width:min(100% - 44px,1500px);display:flex;align-items:center;gap:24px;
  justify-content:space-between;padding-block:14px}
.brandmark{display:flex;align-items:center}
.brandmark:hover{text-decoration:none}
.bm-logo{height:36px;width:auto}
.nav{display:flex;align-items:center;gap:clamp(12px,1.5vw,22px);margin-left:auto}
.nav a{font:600 14px/1 var(--font);color:var(--ink);white-space:nowrap}
.nav a:hover{color:var(--blue-br);text-decoration:none}
.nav a[aria-current=page]{color:var(--blue-br)}
.nav-ext::after{content:"↗";font-size:.78em;margin-left:3px;vertical-align:2px;color:var(--ink-3)}
.top-act{display:flex;align-items:center;gap:8px}
.menu{display:none;font:600 var(--t-s)/1 var(--font);background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:10px 16px;cursor:pointer}
@media(max-width:1020px){
  .menu{display:block}
  .top{position:relative}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;z-index:120;flex-direction:column;
    align-items:stretch;gap:0;background:var(--white);border-bottom:1px solid var(--line);
    padding:4px 22px 16px}
  .nav.open{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid var(--line-2)}
}
@media(max-width:620px){.top-act .btn-line{display:none}}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{display:inline-block;border-radius:var(--r-pill);font:700 15px/1.5 var(--font);
  padding:10px 24px;background:var(--blue);color:#fff;border:1px solid var(--blue);
  transition:background .15s,border-color .15s}
.btn:hover{background:#00126B;border-color:#00126B;color:#fff;text-decoration:none}
.btn-line{background:transparent;color:var(--ink);border-color:#BFBFBF;font-weight:600;
  font-size:var(--t-s);padding:9px 18px}
.btn-line:hover{background:var(--white);border-color:var(--ink);color:var(--ink)}
.btn-onphoto{background:var(--white);color:var(--blue);border-color:var(--white)}
.btn-onphoto:hover{background:#E9ECFF;border-color:#E9ECFF;color:var(--blue)}
.btn-alert{background:var(--alert);border-color:var(--alert)}
.btn-alert:hover{background:#95361F;border-color:#95361F}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}

.tabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:26px 0 0}
.tab{border-radius:var(--r-pill);padding:9px 22px;font:600 14px/1.5 var(--font);
  color:var(--ink);background:var(--white);border:1px solid var(--line)}
.tab:hover{border-color:var(--ink-3);text-decoration:none}
.tab[aria-current=true]{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ==========================================================================
   Hero — full-bleed photograph, dark veil, stats bar (the Frontiers opening)
   ========================================================================== */
/* A negative z-index child paints behind its parent's background, so the
   ground colour lives on the veil, not on .hero itself. */
.hero{position:relative;color:#fff;overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(0,12,45,.86) 0%,rgba(0,12,45,.68) 42%,rgba(0,12,45,.32) 78%,rgba(0,12,45,.18) 100%)}
.hero>.shell{position:relative;z-index:2}
/* The horizontal veil leaves the right edge almost clear, which is fine on a
   wide screen and unreadable on a narrow one. */
@media(max-width:860px){
  .hero::after{background:linear-gradient(180deg,rgba(0,12,45,.72) 0%,rgba(0,12,45,.80) 45%,rgba(0,12,45,.90) 100%)}
  .pagehead::after{background:linear-gradient(180deg,rgba(0,12,45,.74) 0%,rgba(0,12,45,.88) 100%)}
}
.hero-in{padding-block:clamp(52px,9vh,104px) clamp(26px,4vh,40px)}
.hero h1{font-size:var(--t-hero);font-weight:600;color:#fff;max-width:19ch;letter-spacing:-.02em}
.hero p{font:300 clamp(16px,1.6vw,19px)/1.5 var(--font);color:rgba(255,255,255,.88);
  max-width:56ch;margin-top:16px}
.hero .btns .btn-line{color:#fff;border-color:rgba(255,255,255,.55)}
.hero .btns .btn-line:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
.hero-figc{font-size:var(--t-xs);color:rgba(255,255,255,.62);padding-bottom:20px}

.hero-stats{border-top:1px solid rgba(255,255,255,.22);display:flex;gap:clamp(24px,5vw,72px);
  flex-wrap:wrap;padding-block:20px}
.hero-stat b{display:block;font:600 clamp(22px,2.6vw,32px)/1.1 var(--font);color:#fff}
.hero-stat span{font-size:var(--t-s);color:rgba(255,255,255,.75)}

/* Compact page header for inner pages */
/* The veil is semi-transparent, so without a photograph behind it the header
   needs a ground of its own. */
.pagehead{position:relative;color:#fff;overflow:hidden;
  background:linear-gradient(100deg,#0A1636 0%,#10255E 58%,#17327E 100%)}
.pagehead--plain::after{content:none}
.pagehead .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.pagehead::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(0,12,45,.88) 0%,rgba(0,12,45,.72) 52%,rgba(0,12,45,.4) 100%)}
.pagehead>.shell{position:relative;z-index:2}
.pagehead .shell{padding-block:clamp(38px,6vh,66px)}
.pagehead h1{color:#fff;max-width:22ch}
.pagehead .eyebrow{color:#9FB2FF}
.pagehead .lead{color:rgba(255,255,255,.86);max-width:68ch;margin-top:12px}

/* ==========================================================================
   Sections
   ========================================================================== */
.sec{padding-block:clamp(30px,4.2vh,46px)}
.sec-white{background:var(--white)}
.sec-head{margin-bottom:22px}
.sec-head p{margin-top:8px;max-width:76ch;font-size:var(--t-s);color:var(--ink-2)}

/* ==========================================================================
   Cards
   ========================================================================== */
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.card{background:var(--white);border-radius:var(--r-card);overflow:hidden;
  display:flex;flex-direction:column;color:var(--ink);border:1px solid var(--line-2)}
a.card:hover{text-decoration:none;border-color:#C9CFE8}
a.card:hover h3{color:var(--blue-br)}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.card-b{padding:15px 17px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.card p{font-size:var(--t-s);color:var(--ink-2);line-height:1.55}

/* Horizontal card: photograph left, text right — the Frontiers row */
.hcard{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:0;
  background:var(--white);border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--line-2);color:var(--ink)}
.hcard img{width:100%;height:100%;min-height:190px;object-fit:cover}
.hcard-b{padding:20px 22px;display:flex;flex-direction:column;gap:7px;justify-content:center}
.hcard p{font-size:var(--t-s);color:var(--ink-2);line-height:1.6}
a.hcard:hover{text-decoration:none;border-color:#C9CFE8}
a.hcard:hover h3{color:var(--blue-br)}
@media(max-width:720px){.hcard{grid-template-columns:1fr}.hcard img{aspect-ratio:16/9;min-height:0}}
.hcards{display:grid;gap:18px}

/* ==========================================================================
   Figures
   ========================================================================== */
.figs{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(195px,1fr))}
.fig{background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-card);
  padding:24px 20px 22px;text-align:center}
.fig-p{max-width:26ch;margin-inline:auto}
.fig-n{font:600 clamp(28px,3.2vw,38px)/1 var(--font);color:var(--blue);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.fig-k{font:700 var(--t-s)/1.4 var(--font);margin-top:9px}
.fig-p{font:400 var(--t-xs)/1.5 var(--font);color:var(--ink-3);margin-top:5px}

/* ==========================================================================
   Rows / article / panel
   ========================================================================== */
.rows{background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-card);
  padding:4px 22px}
.row{display:grid;gap:8px 32px;grid-template-columns:minmax(0,20ch) minmax(0,1fr);
  padding:19px 0;border-bottom:1px solid var(--line-2)}
.row:last-child{border-bottom:0}
@media(max-width:760px){.row{grid-template-columns:1fr;gap:6px}}
.row .where{font-size:var(--t-xs);color:var(--ink-3);margin-top:4px}
.row p{font-size:var(--t-s);line-height:1.65;max-width:74ch}
.row p+p{margin-top:9px}

.article{display:grid;gap:32px;grid-template-columns:minmax(0,1fr) minmax(0,320px);
  align-items:start}
/* Where the panel carries long values — addresses, e-mail — a 290px column
   forced every row onto two lines. */
.article-wide{grid-template-columns:minmax(0,1fr) minmax(0,430px)}
@media(max-width:980px){.article,.article-wide{grid-template-columns:1fr}}
.prose{background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-card);
  padding:clamp(20px,3vw,34px)}
.prose p{font:300 var(--t-lead)/1.72 var(--font);margin-bottom:1.05em;max-width:70ch}
.prose h2{margin-bottom:.5em}
.prose figure{margin-bottom:24px}
.prose figure img{width:100%;border-radius:var(--r-card)}
.prose figcaption{font-size:var(--t-xs);color:var(--ink-3);padding-top:9px}

.panel{background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-card);
  padding:18px 20px}
.panel h4{margin-bottom:12px;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.09em;
  color:var(--blue)}
.panel dl{display:grid;grid-template-columns:auto 1fr;gap:0}
.panel dt{font:700 var(--t-xs)/1.5 var(--font);color:var(--ink-3);padding:8px 16px 8px 0;
  border-top:1px solid var(--line-2)}
.panel dd{font-size:var(--t-s);padding:8px 0;border-top:1px solid var(--line-2);
  overflow-wrap:anywhere}
.panel dt{white-space:nowrap}
.panel dl>dt:first-of-type,.panel dl>dt:first-of-type+dd{border-top:0;padding-top:0}
.panel figure{margin:-18px -20px 16px}
.panel figure img{width:100%;border-radius:var(--r-card) var(--r-card) 0 0}

.note{background:var(--blue-tint);border-radius:var(--r-card);padding:16px 20px;margin-top:24px;
  font-size:var(--t-s);line-height:1.65;max-width:84ch}

/* ==========================================================================
   Board / members
   ========================================================================== */
.board{background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-card);
  padding:clamp(18px,2.4vw,26px);margin-bottom:18px}
.board-head{display:flex;justify-content:space-between;align-items:start;gap:18px;
  flex-wrap:wrap;margin-bottom:10px}
.board-lead{font-size:var(--t-s);color:var(--ink-2);line-height:1.65;max-width:80ch;
  margin-bottom:18px}
.board-inner>h4{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.09em;
  color:var(--blue);margin-bottom:15px}
.members{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(205px,1fr))}
.member{background:var(--page);border-radius:var(--r-card);padding:20px 16px 18px;
  text-align:center;display:flex;flex-direction:column;gap:4px;color:var(--ink)}
a.member:hover{background:var(--blue-tint);text-decoration:none}
.member-ph{width:80px;height:80px;border-radius:50%;overflow:hidden;margin:0 auto 12px;
  background:#E6E6E6}
.member-ph img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.member-name{font:700 15px/1.35 var(--font)}
a.member:hover .member-name{color:var(--blue-br)}
.member-role{font:400 var(--t-xs)/1.5 var(--font);color:var(--ink-3)}
.member-blurb{font:400 var(--t-xs)/1.6 var(--font);color:var(--ink-2);margin-top:8px;text-align:left}
.member-now{font:700 var(--t-xs)/1.5 var(--font);color:var(--blue);margin-top:10px;
  padding-top:10px;border-top:1px solid var(--line)}
.member-more{font:700 var(--t-xs)/1 var(--font);color:var(--blue-br);margin-top:auto;padding-top:12px}

/* ==========================================================================
   Footer — deep blue band, as Frontiers closes
   ========================================================================== */
.foot{background:var(--blue);color:#DDE3FF;padding-block:46px 26px;margin-top:34px}
.foot-grid{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(155px,1fr))}
.foot h4{font:700 var(--t-xs)/1.4 var(--font);letter-spacing:.09em;text-transform:uppercase;
  color:#fff;margin-bottom:13px}
.foot ul{list-style:none;display:grid;gap:9px}
.foot a{font-size:var(--t-s);color:#DDE3FF}
.foot a:hover{color:#fff}
.foot-org{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));
  border-top:1px solid rgba(255,255,255,.2);margin-top:32px;padding-top:24px}
.foot-org p{font-size:var(--t-s);line-height:1.6;color:#C6CFFF}
.foot-note{border-top:1px solid rgba(255,255,255,.2);margin-top:24px;padding-top:18px;
  font-size:var(--t-xs);color:#B6C1FF;display:flex;gap:16px;justify-content:space-between;
  flex-wrap:wrap}

/* ==========================================================================
   Attribution for openly licensed illustrations. CC-BY requires it, so the
   credit is part of the component rather than tucked away on a credits page.
   ========================================================================== */
.credit{font:400 11px/1.45 var(--font);color:var(--ink-3);padding-top:6px}
.credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.credit a:hover{color:var(--blue-br)}
.card .credit,.hcard .credit{margin-top:auto;padding-top:10px}
.hero-credit{font:400 11px/1.5 var(--font);color:rgba(255,255,255,.62);padding-bottom:18px}
.hero-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.illus-note{font:400 var(--t-xs)/1.5 var(--font);color:var(--ink-3);margin-top:10px}