/* ==========================================================================
   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 masthead video.
   Patterned on rti.org, which runs a muted loop behind its headline. The
   still underneath is the same frame: it shows while the file is loading,
   and it is all that shows when the reader has asked for reduced motion or
   the browser will not play the file. The video sits over it rather than
   replacing it, so there is never a navy rectangle in between. */
.hero-video{z-index:0}
.hero-video-still{z-index:0}

/* Anybody who has asked the system for less movement gets the frame, not the
   loop. The video is hidden rather than merely paused, because a paused
   video with a dead pause button beside it is a control that lies about
   what it does. */
@media(prefers-reduced-motion:reduce){.hero-video{display:none}}
@media(prefers-reduced-motion:no-preference){.hero-video-still{display:none}}

/* The pause control. Anything that moves for more than five seconds without
   one fails WCAG 2.2.2, and a masthead loop is the textbook case: it is
   decorative, it never stops, and for some readers it makes the headline in
   front of it unreadable. */
.hero-pause{position:absolute;z-index:3;right:16px;top:16px;
  display:inline-flex;align-items:center;gap:7px;padding:7px 13px;
  border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.55);
  background:rgba(0,12,45,.45);color:#fff;font:700 var(--t-xs)/1 var(--font);
  letter-spacing:.04em;cursor:pointer;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.hero-pause:hover{background:rgba(0,12,45,.72);border-color:#fff}
.hero-pause:focus-visible{outline:3px solid #fff;outline-offset:2px}
.hero-pause::before{content:"";width:9px;height:10px;background:currentColor;
  clip-path:polygon(0 0,33% 0,33% 100%,0 100%,0 0,67% 0,100% 0,100% 100%,67% 100%)}
.hero-pause[data-state="paused"]::before{clip-path:polygon(0 0,100% 50%,0 100%)}
.hero-pause[hidden]{display:none}
@media(max-width:620px){.hero-pause{right:10px;top:10px;padding:6px 10px}}
/* 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}

/* Role listings — /careers and /volunteer.
   A role is a .row like any other, but its right-hand column carries facts
   somebody decides on before they read the duties: the money, the hours, the
   place. Those are a definition list rather than prose, so the eye can run
   down the labels across several roles and compare them, which is what a
   reader with five roles in front of them is actually doing. */
.rolefacts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0;margin-bottom:12px}
.rolefacts dt{font:700 var(--t-xs)/1.5 var(--font);color:var(--ink-3);
  padding:7px 16px 7px 0;border-top:1px solid var(--line-2);white-space:nowrap}
.rolefacts dd{font-size:var(--t-s);padding:7px 0;border-top:1px solid var(--line-2);
  overflow-wrap:anywhere}
.rolefacts>dt:first-of-type,.rolefacts>dt:first-of-type+dd{border-top:0;padding-top:0}

/* The pay schedule, the probation period, the fact that a stipend carries no
   academic credit. Small because it is detail, present because leaving it to
   the offer letter is how somebody finds out too late. */
.fineprint{font-size:var(--t-xs);color:var(--ink-3);line-height:1.6;
  margin-bottom:12px;max-width:74ch}

.duties{margin:0;padding-left:1.1em;max-width:74ch}
.duties li{font-size:var(--t-s);line-height:1.65;margin-bottom:5px}
.duties li:last-child{margin-bottom:0}

/* ==========================================================================
   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}

/* ==========================================================================
   Contact survey
   ========================================================================== */
.survey{background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-card);
  padding:clamp(20px,3vw,32px)}
.survey h2{margin-bottom:6px}
.survey>p{font-size:var(--t-s);color:var(--ink-2);margin-bottom:22px;max-width:70ch}
.field-grid{display:grid;gap:16px 20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.field{display:flex;flex-direction:column;gap:6px}
.field-wide{grid-column:1/-1}
.field label{font:700 var(--t-s)/1.4 var(--font)}
.field label .opt{font-weight:400;color:var(--ink-3);margin-left:5px}
.field input,.field select,.field textarea{
  font:400 var(--t-body)/1.5 var(--font);color:var(--ink);
  background:var(--page);border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;width:100%;transition:border-color .15s,background .15s}
.field textarea{min-height:140px;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#BFBFBF}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;background:var(--white);border-color:var(--blue-br);
  box-shadow:0 0 0 3px rgba(0,59,222,.12)}
.field input:invalid:not(:placeholder-shown){border-color:var(--alert)}
/* Bots fill every field they can see; this one is not rendered. */
.field-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.survey-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px}
.survey-note{font-size:var(--t-s);color:var(--ink-2);line-height:1.6}
.survey-status{margin-top:18px;padding:14px 18px;border-radius:var(--r-card);
  font-size:var(--t-s);line-height:1.6;display:none}
.survey-status.is-shown{display:block}
.survey-status.is-ok{background:var(--blue-tint);color:var(--ink)}

/* Quick apply. A dialog rather than a page, because an application started
   from a job card should not lose the job card. */
/* The global reset zeroes every margin, which takes the browser's own
   `margin:auto` off a modal dialog with it and drops the box in the top-left
   corner. Put it back, and cap the height so a form taller than the window
   scrolls inside a centred box rather than growing out of the top of it. */
.applyd{border:0;padding:0;max-width:min(760px,calc(100vw - 32px));width:100%;
  margin:auto;max-height:min(88dvh,900px);
  border-radius:var(--r-card);background:var(--white);color:var(--ink);
  box-shadow:0 24px 70px rgba(0,12,45,.28)}
.applyd[open]{display:flex;flex-direction:column}
.applyd>h2,.applyd-b{flex:0 0 auto}
.applyf{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain}
.applyd::backdrop{background:rgba(0,12,45,.55)}
.applyd>h2{font:700 clamp(21px,2.2vw,27px)/1.2 var(--font);color:var(--blue);
  padding:26px 28px 0}
.applyd-b{font-size:var(--t-s);line-height:1.65;color:var(--ink-2);
  padding:8px 28px 0;max-width:68ch}
.applyf{padding:20px 28px 28px}
.applyd-x{position:absolute;top:10px;right:12px;margin:0}
.applyd-x button{border:0;background:transparent;font:400 26px/1 var(--font);
  color:var(--ink-3);cursor:pointer;padding:6px 10px;border-radius:8px}
.applyd-x button:hover{background:var(--blue-tint);color:var(--ink)}
.field-hint{font-size:var(--t-xs);line-height:1.5;color:var(--ink-3)}
.field input[type=file]{padding:9px 11px;font-size:var(--t-s);cursor:pointer}
.field input[type=file]::file-selector-button{
  font:700 var(--t-xs)/1 var(--font);margin-right:11px;padding:8px 12px;
  border:1px solid var(--line);border-radius:7px;background:var(--page);
  color:var(--ink);cursor:pointer}
.field input[type=file]:hover::file-selector-button{border-color:var(--ink-3)}
.survey-status.is-bad{background:#FCEDE9;color:#7A2E18}

/* A button that reads as a link, for the one inside a paragraph. */
.lnk-btn{border:0;background:transparent;padding:0;font:inherit;font-weight:700;
  color:var(--blue-br);cursor:pointer;text-decoration:underline;
  text-underline-offset:2px}
.lnk-btn:hover{color:var(--ink)}

@media(max-width:620px){
  .applyd{max-width:100vw;width:100vw;height:100dvh;max-height:100dvh;
    margin:0;border-radius:0}
  .applyf{padding:18px 18px 28px}
  .applyd>h2,.applyd-b{padding-left:18px;padding-right:18px}
}
.survey-status.is-bad{background:#FDECE8;color:#7A2415}
.survey button[disabled]{opacity:.6;cursor:progress}


/* ==========================================================================
   Home — the publication-feed layout
   Patterned on pewresearch.org: everything on the page is a typed item, and
   the type is stated before the headline rather than inferred from where it
   sits. Built from the tokens above, so it is this site's colours and type
   doing a different arrangement, not a second design.
   ========================================================================== */

/* The kicker. Kind in the brand blue, then the place — or, where one
   genuinely exists, the date. Pew runs KIND · DATE here; eight of the nine
   field records have no date, so place carries the slot instead. */
.kicker{display:block;margin-bottom:8px;font-size:var(--t-xs);line-height:1.4;
  text-transform:uppercase;letter-spacing:.09em}
.kicker b{font-weight:800;color:var(--blue-br)}
/* The tail wraps as one unit. Allowed to break mid-value, "OUR NEWSPAPER ·
   5 October 2026" put the 5 at the end of the first line and the month on
   the second, which reads as issue 5 of a newspaper called October. */
.kicker span{color:var(--ink-3);font-weight:600;display:inline-block;
  white-space:nowrap}
.kicker span::before{content:"·";margin:0 .5em;color:var(--line)}

/* Five across: a column of two, one large, a column of two. Below 1040px the
   large one leads and the other four follow it in a single column, which is
   the order they would be read in anyway. */
/* Six equal cards. The grid was 1fr / 1.55fr / 1fr with a wider panel in the
   middle, which made one item on the page look unlike every other item on
   the page. Equal columns, equal cards, and the eye can compare them. */
.leadwrap{padding:28px 0 4px}
/* Stretch, not start: cards in a row end level with each other even when one
   description runs a line longer, so the row reads as one band rather than
   as three cards of three different lengths. */
.leadgrid{display:grid;gap:20px;grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch}
.leadgrid .pubcard{display:flex;flex-direction:column}
.leadgrid .pubcard-b{flex:1}
@media(max-width:1040px){.leadgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.leadgrid{grid-template-columns:1fr}}

.pubcard{display:block;background:var(--white);border:1px solid var(--line-2);
  border-radius:var(--r-card);overflow:hidden;color:inherit;text-decoration:none;
  transition:border-color .15s}
.pubcard:hover{border-color:var(--blue-br)}
.pubcard img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.pubcard-b{padding:16px 18px 18px}
.pubcard-b h3{font:700 var(--t-h3)/1.3 var(--font);margin-bottom:7px}
.pubcard-b p{font-size:var(--t-s);line-height:1.6;color:var(--ink-2)}




/* The one sentence about the foundation, under the lead rather than over it. */
.standfirst{max-width:78ch;margin:22px auto 0;padding:0 2px;
  font:300 var(--t-lead)/1.65 var(--font);color:var(--ink-2)}
.standfirst a{color:var(--blue-br)}

/* A ruled section head, which is what gives a feed page its newspaper feel:
   the rule says "a new run of items starts here" without a box around it. */
.sec-head--rule{border-top:3px solid var(--ink);padding-top:12px}
.sec-head--rule h2{font:800 var(--t-h2)/1.2 var(--font);letter-spacing:-.01em}

/* Feed beside a sidebar. */
.split{display:grid;gap:36px;grid-template-columns:minmax(0,1fr) minmax(0,300px);
  align-items:start}
@media(max-width:980px){.split{grid-template-columns:1fr;gap:28px}}

.pubfeed{background:var(--white);border:1px solid var(--line-2);
  border-radius:var(--r-card);padding:4px 22px}
.pubrow{display:grid;gap:18px;grid-template-columns:minmax(0,1fr) 150px;
  align-items:start;padding:18px 0;border-bottom:1px solid var(--line-2);
  color:inherit;text-decoration:none}
.pubrow:last-child{border-bottom:0}
.pubrow:hover h3{color:var(--blue-br)}
.pubrow-t h3{font:700 var(--t-h3)/1.3 var(--font);margin-bottom:6px}
.pubrow-t p{font-size:var(--t-s);line-height:1.6;color:var(--ink-2);max-width:62ch}
.pubrow-i img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;
  border-radius:10px}
@media(max-width:620px){
  .pubrow{grid-template-columns:1fr}
  .pubrow-i{order:-1}
}

/* Pew's "Most Popular" slot. A ranked list there is read off analytics; this
   site collects none, so the slot carries the figures and each one states the
   period it covers. */
.figlist{list-style:none;background:var(--white);border:1px solid var(--line-2);
  border-radius:var(--r-card);padding:4px 20px}
.figlist li{display:grid;gap:2px;padding:14px 0;border-bottom:1px solid var(--line-2)}
.figlist li:last-child{border-bottom:0}
.figlist-n{font:800 26px/1.1 var(--font);color:var(--blue);
  font-variant-numeric:tabular-nums}
.figlist-k{font-size:var(--t-s);line-height:1.45}
.figlist-p{font-size:var(--t-xs);color:var(--ink-3)}
/* The issue list in the same slot: a title rather than a number, so the two
   share the frame without pretending an issue is a finding. */
.figlist--issues li{padding:13px 0}
.figlist--issues .figlist-k{font-size:var(--t-xs);text-transform:uppercase;
  letter-spacing:.08em;font-weight:800;color:var(--blue-br)}
.figlist-t{font:700 var(--t-s)/1.45 var(--font);margin-top:3px}
.figlist-note{font-size:var(--t-xs);color:var(--ink-3);line-height:1.6;padding:12px 2px 0}

/* Subject blocks: one item given weight, the rest listed under it. */
.subjects{display:grid;gap:24px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.subjects{grid-template-columns:1fr}}
.subject{background:var(--white);border:1px solid var(--line-2);
  border-radius:var(--r-card);padding:18px 20px 16px}
.subject-h{font:800 var(--t-h3)/1.3 var(--font);padding-bottom:10px;
  border-bottom:2px solid var(--ink);margin-bottom:14px}
.subject-lead{display:block;color:inherit;text-decoration:none}
.subject-lead b{font:700 var(--t-body)/1.35 var(--font);display:block}
.subject-dek{display:block;margin-top:6px;font-size:var(--t-s);line-height:1.6;
  color:var(--ink-2)}
.subject-lead:hover b{color:var(--blue-br)}
.subject-list{list-style:none;margin-top:14px;border-top:1px solid var(--line-2)}
.subject-list li{border-bottom:1px solid var(--line-2)}
.subject-list li:last-child{border-bottom:0}
.subject-list a{display:block;padding:9px 0;font-size:var(--t-s);line-height:1.5;
  color:var(--ink);text-decoration:none}
.subject-list a:hover{color:var(--blue-br)}


/* ==========================================================================
   Citations — /aissr
   A bibliography, set as one. The title carries the link because the title is
   what somebody is looking for; the authors and the journal sit under it in
   the order a reference list puts them, so the block scans like the thing it
   is rather than like a row of cards pretending to be scholarship.
   ========================================================================== */
/* The licence, stated rather than assumed. "Open access" and "CC BY" are not
   the same permission, and a reader deciding whether they may reuse a figure
   needs the second one. */
.cite-lic{border:1px solid var(--line);border-radius:var(--r-pill);
  padding:1px 8px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap}


/* ==========================================================================
   The figure panel — /aissr
   A chart is a figure: it gets a caption above it, the plot, the numbers it
   was drawn from, and the query that produced them. The table is collapsed
   rather than absent, because the numbers are the point and a reader who
   cannot use the picture still needs them.
   ========================================================================== */
.fig-panel{background:var(--white);border:1px solid var(--line-2);
  border-radius:var(--r-card);padding:22px 24px 18px}
.fig-head{margin-bottom:14px}
.fig-head h2{font:800 var(--t-h2)/1.2 var(--font);letter-spacing:-.01em;
  margin-bottom:7px}
.fig-head p{font-size:var(--t-s);line-height:1.6;color:var(--ink-2);max-width:78ch}
.chart{display:block;width:100%;height:auto;margin:2px 0 6px;
  font-family:var(--font)}
.fig-src{font-size:var(--t-xs);line-height:1.6;color:var(--ink-3);
  padding-top:10px;border-top:1px solid var(--line-2);max-width:86ch}

.figtable summary{font-size:var(--t-xs);color:var(--blue-br);cursor:pointer;
  padding:7px 0;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.figtable table{width:100%;border-collapse:collapse;margin-bottom:8px}
.figtable th,.figtable td{text-align:right;padding:6px 10px;
  font-size:var(--t-xs);border-bottom:1px solid var(--line-2);
  font-variant-numeric:tabular-nums}
.figtable th:first-child,.figtable td:first-child{text-align:left}
.figtable th{color:var(--ink-3);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em}

/* The reading groups carry a photograph now, like every other section on the
   site. It sits above the rule so the heading still starts the list. */
/* A figure lifted out of a paper. It is set as a figure, not as a card
   image: full width, on the panel's own ground, with the citation under it.
   The citation is the licence condition, so it is never truncated or hidden
   behind a hover. */
.paperfig{margin-bottom:16px}
.paperfig img{width:100%;height:auto;display:block;border:1px solid var(--line-2);
  border-radius:10px;background:var(--white)}
.paperfig figcaption{font-size:var(--t-xs);line-height:1.65;color:var(--ink-2);
  padding-top:9px;max-width:92ch}
.paperfig figcaption b{color:var(--ink)}
.paperfig-src{display:block;color:var(--ink-3);padding-top:3px}
.paperfig-src a{color:var(--blue-br);overflow-wrap:anywhere}


/* ==========================================================================
   /aissr — the front-page grid, after pewresearch.org
   Main column of subject sections, right rail of methods and people. The
   rail is narrow and sticky-free: it is reference material, not navigation.
   ========================================================================== */
@media(max-width:1000px){.pewgrid{grid-template-columns:1fr;gap:28px}}

/* One row: thumbnail left, the rest right — Pew's proportions, 230px of
   picture against the text. A row without a picture closes the gap rather
   than leaving a hole where one would be. */
@media(max-width:700px){
  .story{grid-template-columns:1fr;gap:12px}
}
/* The licence sits on the picture's own line. Under CC BY the credit is the
   condition of use, so it cannot be left to a caption elsewhere. */


/* ==========================================================================
   AISSR — the institute's own pages
   Scoped to .aissr so the palette, the type and the spacing apply to the
   institute and to nothing else on this site: the APYCF masthead, footer and
   brand above and below it are untouched, which is the point — AISSR is an
   institute inside the foundation, not a separate organisation with its own
   shell.
   The tokens are redefined rather than added to, so every component inherited
   from the main site arrives in the institutional palette without being
   restyled one by one.
   ========================================================================== */
.aissr{
  --blue:#102A43;        /* deep navy — headings, rules */
  --blue-br:#174A7E;     /* academic blue — links, accents */
  --teal:#167D8D;        /* muted teal — the one accent, used sparingly */
  --blue-tint:#F5F7FA;   /* section ground */
  --ink:#243447;         /* dark charcoal body */
  --ink-2:#425366;
  --ink-3:#5B6B7D;
  --line:#D7DEE6;
  --line-2:#E6EBF1;
  --page:#FFFFFF;
  --r-card:4px;          /* restrained, not a marketing radius */
  --font:'Source Sans 3','Inter','Nunito Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  color:var(--ink);
  font-family:var(--font);
}
.aissr .shell{max-width:1240px}

/* Section rhythm: a rule and a generous gap, no shadows and no tinted cards
   floating on a tinted ground. */
.aissr .sec{padding:52px 0}
.aissr .sec-white{background:var(--page)}
.aissr .sec-tint{background:var(--blue-tint)}
.a-head{max-width:78ch;margin-bottom:28px}
.a-head h2{font:700 clamp(23px,2.3vw,30px)/1.22 var(--font);color:var(--blue);
  letter-spacing:-.01em;padding-bottom:12px;border-bottom:2px solid var(--blue)}
.a-head .a-sub{font:600 var(--t-lead)/1.5 var(--font);color:var(--teal);padding-top:14px}
.a-head p{font-size:var(--t-body);line-height:1.68;color:var(--ink-2);padding-top:12px}

.aissr .prose p{font:400 17px/1.75 var(--font);color:var(--ink);
  margin-bottom:1.1em;max-width:none}
.aissr .prose p:last-child{margin-bottom:0}
.aissr .prose{border:1px solid var(--line-2);border-radius:var(--r-card);
  background:var(--page);padding:clamp(22px,2.6vw,34px)}
@media(max-width:620px){.aissr .prose p{font-size:16px;line-height:1.7}}

/* Institutional profile: a definition list, ruled, no card chrome. */
.a-profile{border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--page);padding:20px 22px}
.a-profile h3{font:700 var(--t-xs)/1.4 var(--font);text-transform:uppercase;
  letter-spacing:.1em;color:var(--teal);padding-bottom:12px;
  border-bottom:1px solid var(--line);margin-bottom:4px}
.a-profile dl{display:grid;grid-template-columns:1fr;gap:0}
.a-profile dt{font:700 var(--t-xs)/1.5 var(--font);color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.06em;padding:13px 0 2px;
  border-top:1px solid var(--line-2)}
.a-profile dl>dt:first-of-type{border-top:0}
.a-profile dd{font-size:var(--t-s);line-height:1.55;padding-bottom:3px;
  overflow-wrap:anywhere}

/* Research-area cards: four across, equal, a thin rule and a mark — no
   illustration, because a stock picture of a laboratory would imply one. */
.a-cards{display:grid;gap:18px;grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1040px){.a-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.a-cards{grid-template-columns:1fr}}
.a-card{display:flex;flex-direction:column;background:var(--page);
  border:1px solid var(--line);border-top:3px solid var(--teal);
  border-radius:var(--r-card);padding:20px 20px 16px}
.a-card h3{font:700 var(--t-h3)/1.3 var(--font);color:var(--blue);margin:12px 0 8px}
.a-card p{font-size:var(--t-s);line-height:1.6;color:var(--ink-2);flex:1}
.a-card a{font-size:var(--t-xs);font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--blue-br);text-decoration:none;padding-top:14px}
.a-card a:hover{text-decoration:underline}
.a-card svg{width:26px;height:26px;stroke:var(--teal);fill:none;stroke-width:1.5}

/* The empty state. A research institute with no projects yet says so in the
   place the projects would be, in the same frame they will use — not with an
   apology and not with a placeholder project. */
.a-empty{border:1px dashed var(--line);border-radius:var(--r-card);
  background:var(--page);padding:30px 26px;text-align:left}
.a-empty h3{font:700 var(--t-h3)/1.35 var(--font);color:var(--blue);margin-bottom:8px}
.a-empty p{font-size:var(--t-s);line-height:1.65;color:var(--ink-2);max-width:74ch}
.a-empty .a-empty-m{font-size:var(--t-xs);color:var(--ink-3);padding-top:12px;
  border-top:1px solid var(--line-2);margin-top:16px}

/* Rows used for publication categories, ethics topics and researcher ranks. */
.a-rows{border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--page);padding:2px 22px}
.a-row{display:grid;gap:10px 30px;grid-template-columns:minmax(0,24ch) minmax(0,1fr);
  padding:16px 0;border-bottom:1px solid var(--line-2)}
.a-row:last-child{border-bottom:0}
@media(max-width:700px){.a-row{grid-template-columns:1fr;gap:5px}}
.a-row h3{font:700 var(--t-s)/1.45 var(--font);color:var(--blue)}
.a-row p{font-size:var(--t-s);line-height:1.62;color:var(--ink-2);max-width:74ch}
/* A row whose right half runs to two paragraphs: without this they set as
   one block with a line break in it, which reads as a typo rather than as a
   second thought. */
.a-row p + p{margin-top:10px}

/* The numbered section head. The front page is a sequence and the numbers
   say so: a reader who lands halfway down knows where they are without
   having to reconstruct the order from the typography. */
.a-sec-h{display:grid;gap:4px 22px;grid-template-columns:auto minmax(0,1fr);
  align-items:start;padding-bottom:26px;margin-bottom:28px;
  border-bottom:2px solid var(--blue)}
.a-sec-n{font:700 clamp(28px,3.4vw,44px)/1 var(--font);color:var(--teal);
  letter-spacing:-.02em;opacity:.92}
.a-sec-h h2{font:700 clamp(22px,2.5vw,32px)/1.18 var(--font);color:var(--blue);
  letter-spacing:-.01em}
.a-sec-zh{font:400 var(--t-s)/1.5 var(--font);color:var(--teal);padding-top:3px;
  letter-spacing:.04em}
.a-sec-b{font-size:var(--t-s);line-height:1.65;color:var(--ink-2);max-width:78ch;
  padding-top:10px}
@media(max-width:620px){.a-sec-h{gap:2px 14px}}

/* A subhead inside a section, where one section holds two lists. */
.aissr .a-subh{font:700 var(--t-h3)/1.3 var(--font);color:var(--blue);
  margin:34px 0 6px}
.aissr .a-subh-b{font-size:var(--t-s);line-height:1.6;color:var(--ink-2);
  max-width:76ch;margin-bottom:16px}

/* The ten subjects, as cards: the picture on top, the study's number above
   the heading, the question under it. The picture is of a place or a thing —
   a face under "Care nobody pays for" would be a claim about that person,
   and nothing here has been measured yet. */
.a-issues{display:grid;gap:26px 24px;
  grid-template-columns:repeat(auto-fit,minmax(262px,1fr))}
.aissr .a-issue{display:flex;flex-direction:column;background:var(--page);
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.aissr .a-issue .row-ph{width:100%;max-width:none;padding:0;margin:0}
.aissr .a-issue .row-ph img{width:100%;height:auto;aspect-ratio:16/9;
  object-fit:cover;object-position:center;display:block;border-radius:0}
.aissr .a-issue .row-ph-cc{display:block;padding:6px 16px 0}
.a-issue-b{padding:12px 18px 20px}
.aissr .a-issue .kicker{padding-bottom:6px}
.a-issue h3{font:700 clamp(16px,1.3vw,18px)/1.35 var(--font);color:var(--blue);
  margin-bottom:7px}
.a-issue p{font-size:var(--t-s);line-height:1.6;color:var(--ink-2)}

/* The featured study: the same row, given more room. */
.a-feat{border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--page);padding:4px 24px}
.a-feat .story{border-bottom:0}
.a-feat .story h3{font:700 clamp(19px,1.9vw,25px)/1.3 var(--font)}

/* Methods: a stage on the left, who answers for it under the name. */
.a-row-who{font-size:var(--t-xs);line-height:1.45;color:var(--teal);
  font-weight:600;padding-top:3px}
.a-ul{margin:0;padding-left:18px}
.a-ul li{font-size:var(--t-s);line-height:1.62;color:var(--ink-2);
  max-width:72ch;padding-bottom:5px}
.a-ul li:last-child{padding-bottom:0}

/* Proposed studies. The stage sits in the left column, beside the title and
   not under it, because the stage is the thing a reader most needs to not
   miss: ten research titles on an institute's page read as work under way,
   and none of this is under way. */
.aissr .a-proj{display:grid;gap:6px 30px;
  grid-template-columns:minmax(0,15ch) minmax(0,1fr);
  padding:22px 0;border-bottom:1px solid var(--line-2)}
.aissr .a-proj:last-child{border-bottom:0}
.a-proj-id{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.a-proj-no{font:700 var(--t-xs)/1.2 var(--font);letter-spacing:.08em;
  color:var(--blue-br)}
.a-proj-geo{font-size:var(--t-xs);line-height:1.35;color:var(--ink-3)}
.a-proj-st{font:700 11px/1 var(--font);letter-spacing:.09em;text-transform:uppercase;
  color:var(--teal);border:1px solid var(--teal);border-radius:3px;padding:4px 7px}
.a-proj-b h3{font:700 clamp(16px,1.35vw,18px)/1.4 var(--font);color:var(--blue)}
.a-proj-b p{font-size:var(--t-s);line-height:1.62;color:var(--ink-2);
  max-width:72ch;margin-top:7px}
.aissr .a-proj--c{padding:15px 0;align-items:baseline}
.a-proj--c .a-proj-id{flex-direction:row;gap:10px;align-items:baseline}
@media(max-width:700px){
  .aissr .a-proj{grid-template-columns:1fr;gap:9px}
  .a-proj-id{flex-direction:row;gap:10px;align-items:center}
}

/* A note that is not a quotation and not an empty state: the page telling the
   reader what the list above is, and what it is not. */
.a-note{border-left:3px solid var(--teal);background:var(--blue-tint);
  padding:20px 24px;border-radius:0 var(--r-card) var(--r-card) 0;margin-bottom:26px}
.a-note p{font-size:var(--t-s);line-height:1.68;color:var(--ink-2);max-width:78ch}
.a-note p + p{margin-top:10px}
.a-note b{color:var(--blue)}
.a-note--ask{margin:34px 0 0;border-left-color:var(--blue-br)}
/* Flush on both edges — and the box is cut to the text rather than the text
   left stranded in a box twice its width, which is what a 78ch cap inside a
   full-width note looks like. Hyphenation is on with it: justified English
   without it opens rivers of white down the middle of a measure this narrow. */
.a-note--just{max-width:600px}
.a-note--just p{text-align:justify;hyphens:auto;max-width:none}
/* The same heading treatment wherever a note carries one. It was written
   only for the --ask variant, so the first note to use a heading outside it
   sat flush against its own first line. */
.a-note h3,
.a-note--ask h3{font:700 var(--t-h3)/1.3 var(--font);color:var(--blue);
  margin-bottom:10px}
.a-note-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  margin-top:16px!important}
.a-note-cta span{font-size:var(--t-s);color:var(--ink-3)}
.a-note-m{font-size:var(--t-xs)!important;color:var(--ink-3)!important;
  margin-top:14px!important;padding-top:12px;border-top:1px solid var(--line-2)}
.a-row .a-row-n{font-size:var(--t-xs);color:var(--ink-3);padding-top:3px}

/* The registration block. Deliberately plain: a number in a box with a seal
   would read as a credential it is not. */
.a-reg{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr));
  margin-bottom:18px}
@media(max-width:600px){.a-reg{grid-template-columns:1fr}}
.a-reg div{border:1px solid var(--line);border-left:3px solid var(--blue);
  border-radius:var(--r-card);padding:16px 18px;background:var(--page)}
.a-reg dt{font:700 var(--t-xs)/1.4 var(--font);text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-3);margin-bottom:5px}
.a-reg dd{font:700 20px/1.2 var(--font);color:var(--blue);
  font-variant-numeric:tabular-nums}
.a-caveat{background:var(--blue-tint);border:1px solid var(--line);
  border-radius:var(--r-card);padding:16px 20px;font-size:var(--t-s);
  line-height:1.65;color:var(--ink-2);max-width:88ch}

.aissr .btn{border-radius:var(--r-card);font-weight:700}
.aissr .btn-line{border-color:var(--line)}
.a-actions{display:flex;flex-wrap:wrap;gap:10px;padding-top:18px}


/* The institute's own second navigation row, under the foundation's masthead.
   Flush against it, so the two read as one chrome with a section bar rather
   than as two sites stacked. */
.a-subnav{background:var(--blue);color:#fff}
.a-subnav .shell{display:flex;flex-wrap:wrap;align-items:center;gap:0 26px;
  min-height:46px}
.a-subnav-b{font:700 var(--t-xs)/1 var(--font);letter-spacing:.14em;
  text-transform:uppercase;color:#fff;opacity:.72;padding-right:6px}
.a-subnav-l{display:flex;flex-wrap:wrap;gap:0 22px}
.a-subnav a{font:600 var(--t-xs)/1 var(--font);letter-spacing:.05em;
  text-transform:uppercase;color:#fff;opacity:.84;text-decoration:none;
  padding:15px 0;border-bottom:3px solid transparent}
.a-subnav a:hover{opacity:1}
.a-subnav a[aria-current=page]{opacity:1;border-bottom-color:var(--teal)}

/* The hero, on the institute. The veil is heavier than the foundation's:
   there is more type over it and it has to stay readable at the smallest
   width. */
.a-hero{padding:34px 0 30px}
.a-hero::after{background:linear-gradient(100deg,rgba(16,42,67,.93) 0%,
  rgba(16,42,67,.84) 46%,rgba(16,42,67,.6) 100%)}
.a-hero h1{font:700 clamp(25px,2.9vw,36px)/1.15 var(--font);letter-spacing:-.015em;
  max-width:22ch}
.a-hero .eyebrow{color:#fff;opacity:.76;letter-spacing:.18em}
.a-hero-zh{font:400 var(--t-lead)/1.35 var(--font);color:#fff;opacity:.82;
  padding-top:5px}
.a-hero-tag{font:700 clamp(14px,1.3vw,17px)/1.45 var(--font);color:#fff;
  padding-top:13px;max-width:30ch}
.a-hero .lead{max-width:70ch;padding-top:10px;opacity:.93}
.a-hero .btns{padding-top:16px}


/* Researchers. A list of people, not a wall of portraits: the photograph is
   small and square-ish, the title sits under the name, and the description is
   the person's own. Three columns at full width, one on a phone. */
.a-group{margin-bottom:30px}
.a-group:last-child{margin-bottom:0}
.a-group-h{font:700 var(--t-h3)/1.3 var(--font);color:var(--blue);
  padding-bottom:9px;border-bottom:1px solid var(--line)}
.a-group-l{font-size:var(--t-s);line-height:1.6;color:var(--ink-2);
  padding:11px 0 18px;max-width:80ch}
.a-people{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1000px){.a-people{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.a-people{grid-template-columns:1fr}}
.a-person{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;
  background:var(--page);border:1px solid var(--line);border-radius:var(--r-card);
  padding:16px;color:inherit;text-decoration:none;align-items:start}
.a-person:hover{border-color:var(--blue-br)}
.a-person img{width:72px;height:72px;object-fit:cover;border-radius:2px;display:block}
.a-person-b{display:grid;gap:3px;min-width:0}
.a-person-b b{font:700 var(--t-s)/1.35 var(--font);color:var(--blue)}
.a-person-r{font-size:var(--t-xs);color:var(--teal);font-weight:600;line-height:1.4}
.a-person-n{font-size:var(--t-xs);color:var(--ink-3);line-height:1.45}
.a-person-d{font-size:var(--t-xs);line-height:1.55;color:var(--ink-2);padding-top:4px}
.a-person-m{font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  font-weight:700;color:var(--blue-br);padding-top:7px}


/* Publications by a person. A reference list under a name, with the grounds
   on which the papers were attributed printed under the role — because on a
   page like this, how a citation got here is part of the citation. */
.a-pubgroup{border:1px solid var(--line);border-left:3px solid var(--teal);
  border-radius:var(--r-card);background:var(--page);padding:18px 20px;
  margin-bottom:14px}
.a-pubgroup h3{font:700 var(--t-h3)/1.3 var(--font);color:var(--blue)}
.a-pub-role{font-size:var(--t-xs);color:var(--teal);font-weight:600;padding-top:2px}
.a-pub-basis{font-size:var(--t-xs);color:var(--ink-3);line-height:1.5;
  padding:7px 0 4px;border-bottom:1px solid var(--line-2);margin-bottom:4px}
.a-pub-basis a{color:var(--blue-br)}
.a-pubs{list-style:none;counter-reset:apub}
.a-pub{display:grid;gap:3px;padding:11px 0 11px 30px;position:relative;
  border-bottom:1px solid var(--line-2)}
.a-pub:last-child{border-bottom:0}
.a-pub::before{counter-increment:apub;content:counter(apub);position:absolute;
  left:0;top:11px;font:700 var(--t-xs)/1.6 var(--font);color:var(--blue-br);
  font-variant-numeric:tabular-nums}
.a-pub>a{font:600 var(--t-s)/1.45 var(--font);color:var(--ink);text-decoration:none}
.a-pub>a:hover{color:var(--blue-br);text-decoration:underline}
.a-pub-m{font-size:var(--t-xs);color:var(--ink-3);line-height:1.5;
  display:flex;flex-wrap:wrap;align-items:center;gap:7px}


/* ==========================================================================
   Paper rows — /aissr
   Picture left, then kind, date, headline, opening. The arrangement a
   research organisation's front page uses. Inside .aissr it inherits the
   institutional palette, so it is the same layout in the Institute's colours
   rather than a second design.
   ========================================================================== */
.aissr .topic{margin-bottom:38px}
.aissr .topic:last-child{margin-bottom:0}
.aissr .topic-h{font:700 clamp(21px,2.1vw,27px)/1.2 var(--font);color:var(--blue);
  letter-spacing:-.01em;padding-bottom:11px;border-bottom:2px solid var(--blue)}
.aissr .topic-b{font-size:var(--t-s);line-height:1.6;color:var(--ink-2);
  padding:12px 0 6px;max-width:88ch}
.aissr .topic-b em{color:var(--teal);font-style:normal;font-weight:600}

.aissr .story{display:grid;gap:22px;grid-template-columns:230px minmax(0,1fr);
  align-items:start;padding:20px 0;border-bottom:1px solid var(--line-2)}
.aissr .story--notext{grid-template-columns:1fr}
.aissr .story:last-of-type{border-bottom:0}
@media(max-width:760px){.aissr .story{grid-template-columns:1fr;gap:12px}}
.aissr .row-ph img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  display:block;border:1px solid var(--line-2);border-radius:2px;
  background:var(--page)}
/* A figure out of a paper is usually a tall portrait plate. Cropping it to a
   16/9 thumbnail from the centre cuts the top off the diagram, which is the
   part that says what it is, so these anchor to the top instead. */
.aissr .row-ph--fig img{object-position:top;background:#fff}
.aissr .row-ph-cc{display:block;font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);padding-top:5px;font-weight:700}
.aissr .story-b h3{font:700 var(--t-h3)/1.32 var(--font);margin:3px 0 8px}
.aissr .story-b h3 a{color:var(--blue);text-decoration:none}
.aissr .story-b h3 a:hover{text-decoration:underline}
.aissr .story-d{font-size:var(--t-s);line-height:1.62;color:var(--ink-2);max-width:74ch}
.aissr .story-m{font-size:var(--t-xs);color:var(--ink-3);padding-top:8px;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.aissr .kicker b{color:var(--teal)}
.aissr .kicker span{color:var(--ink-3)}

/* What a role needs, under what it involves. Separated because a reader
   rules themselves in or out on this list, not on the duties. */
.rolereq-h{font:700 var(--t-xs)/1.4 var(--font);text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-3);margin:16px 0 7px}
.duties.rolereq li{color:var(--ink-2)}

/* The board's statement, with its numbers in the column beside it. The
   paragraphs fill their box rather than stopping two thirds across it, which
   is what a 78ch cap did inside a panel this wide. */
.aissr .a-irb{padding:clamp(20px,2.6vw,32px)}
.aissr .a-irb p{font:400 17px/1.75 var(--font);color:var(--ink);max-width:none;
  margin-bottom:1.1em}
.aissr .a-irb p:last-child{margin-bottom:0}
@media(max-width:620px){.aissr .a-irb p{font-size:16px;line-height:1.7}}
/* The two numbers, then the ask. The column ends where its content ends:
   stretching it to match the prose beside it only pushed the button away
   from the sentence it belongs to. */
.a-reg--side{display:grid;grid-template-columns:1fr;gap:16px;
  align-content:start;margin-bottom:0}
.a-reg--side .a-reg-ask{border-left:1px solid var(--line);
  background:var(--blue-tint)}
.a-reg-ask p{font-size:var(--t-s);line-height:1.6;color:var(--ink-2);
  margin-bottom:14px}
.a-reg-ask .btn{width:100%;text-align:center}


/* ─── ways to give ──────────────────────────────────────────────────────
   One panel per way. Closed, the list reads as a menu of choices; open,
   it is the details for that one way and a short note underneath. They
   are <details name>, so a browser that knows the attribute closes the
   last one when you open the next, and a browser that does not simply
   leaves them both open — a worse version of the page, not a broken one. */
.give{display:grid;gap:10px;margin-top:4px}
.giveway{border:1px solid var(--line);border-radius:var(--r-s);background:var(--white);
  overflow:hidden}
.giveway[open]{border-color:var(--blue);box-shadow:0 1px 0 var(--blue) inset}
.giveway summary{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:16px 18px;cursor:pointer;list-style:none;font-weight:700}
.giveway summary::-webkit-details-marker{display:none}
/* The arrow is drawn rather than left to the browser, so it turns and so it
   sits where the eye looks for it. */
.giveway summary::after{content:"";margin-left:auto;width:9px;height:9px;flex:0 0 auto;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s ease}
.giveway[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.giveway summary:hover{background:var(--blue-tint)}
.giveway-n{font-size:var(--t-h4,17px)}
.giveway-s{color:var(--ink-3);font-weight:400;font-size:13.5px}
.giveway-b{padding:2px 18px 18px;border-top:1px solid var(--line-2)}
.giveway-p{margin:14px 0 12px;font-size:14.5px;line-height:1.65;color:var(--ink-2)}
.giveway-note{margin:14px 0 0;padding:12px 14px;background:var(--blue-tint);
  border-radius:var(--r-s);font-size:13.5px;line-height:1.6}

/* The details themselves. A label and a value, with the value in a face
   where a 0 and an O are not the same shape — these get retyped into a
   banking app, and a routing number copied wrong is a payment that goes
   nowhere and takes a fortnight to come back. */
.givedl{margin:0;display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2);
  border-radius:var(--r-s);overflow:hidden}
.givedl>div{display:grid;grid-template-columns:minmax(120px,170px) 1fr;gap:12px;
  background:var(--white);padding:10px 14px;align-items:center}
.givedl dt{color:var(--ink-3);font-size:13px}
.givedl dd{margin:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font:600 15px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all}
.givecopy{flex:0 0 auto;border:1px solid var(--line);background:var(--white);
  border-radius:var(--r-pill);padding:3px 11px;font:600 12px/1.5 var(--font);
  color:var(--ink-3);cursor:pointer}
.givecopy:hover{border-color:var(--blue);color:var(--blue)}
.givecopy.is-done{border-color:var(--blue);color:var(--blue);background:var(--blue-tint)}
.give-addr{display:inline-block;font:600 15px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace}
/* The bank panel carries three rails. Without a line between them somebody
   sending from Frankfurt reads the ACH number first, because it is first. */
.give-sub{margin:16px 0 8px;font:700 12px/1.4 var(--font);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
/* The methods are names to recognise, not numbers to retype, so they are set
   in the page's own face rather than the monospace the account details use. */
/* The wallets, in the summary row. Small chips rather than running text:
   they are names to recognise at a glance, and a glance is all a summary
   gets. They push to their own line on a narrow screen rather than squeeze
   the heading. */
.giveway-pays{display:flex;flex-wrap:wrap;gap:5px;margin-left:auto;
  padding-right:14px;font-weight:400}
.giveway-pays span{border:1px solid var(--line);border-radius:var(--r-pill);
  padding:2px 9px;font-size:11.5px;color:var(--ink-3);white-space:nowrap;
  background:var(--white)}
.giveway[open] .giveway-pays span{border-color:var(--blue-tint);color:var(--blue)}
@media(max-width:760px){
  .giveway-pays{margin-left:0;flex-basis:100%;padding-right:0;margin-top:2px}
}
.give-pays dd{font:400 14px/1.6 var(--font)}
.give-pays-note{margin:10px 0 0;font-size:13.5px;color:var(--ink-3)}

.give-split{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:start}
.giveqr{margin:0;text-align:center}
.giveqr img{display:block;width:170px;height:170px;border:1px solid var(--line-2);
  border-radius:var(--r-s);background:var(--white)}
.giveqr figcaption{margin-top:6px;font-size:12px;color:var(--ink-3)}
@media(max-width:620px){.give-split{grid-template-columns:1fr}
  .giveqr img{margin:0 auto}
  .givedl>div{grid-template-columns:1fr;gap:3px}}

/* The note underneath. Set apart from the details above it, because one is
   what the giver needs and the other is what we would like. */
.givef{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line)}
.givef-h{margin:0 0 12px;font-weight:700;font-size:14.5px}
/* .opt is styled only inside a field label elsewhere, so here it ran
   straight into the sentence: "…or a receiptevery box optional". */
.givef-h .opt{font-weight:400;color:var(--ink-3)}
.givef-h .opt::before{content:" \00b7 "}
.givef .field-grid{margin:0}


/* ─── giving by card ────────────────────────────────────────────────────
   The amount is chosen with four chips or typed into the box beside them,
   and whichever way it was chosen it ends up in the box: what is about to
   be charged is written down somewhere rather than implied by which button
   looks pressed. */
.card-when{display:flex;gap:8px;margin:14px 0 12px}
.card-when label{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;
  border:1px solid var(--line);border-radius:var(--r-pill);cursor:pointer;
  font-size:14px;background:var(--white)}
.card-when input{accent-color:var(--blue)}
.card-when label:has(input:checked){border-color:var(--blue);background:var(--blue-tint);
  color:var(--blue);font-weight:600}
.card-amts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.card-amt{border:1px solid var(--line);background:var(--white);border-radius:var(--r-pill);
  padding:9px 18px;font:600 15px/1.4 var(--font);color:var(--ink);cursor:pointer}
.card-amt:hover{border-color:var(--blue);color:var(--blue)}
.card-amt.is-on{border-color:var(--blue);background:var(--blue);color:var(--white)}
.card-other{display:inline-flex;align-items:center;gap:0;border:1px solid var(--line);
  border-radius:var(--r-pill);padding:0 14px 0 14px;background:var(--white)}
.card-other:focus-within{border-color:var(--blue)}
.card-cur{color:var(--ink-3);font-weight:600}
.card-other input{border:0;padding:9px 4px;width:96px;font:600 15px/1.4 var(--font);
  background:transparent}
.card-other input:focus{outline:none}
/* Chrome and Safari put steppers on a number input, which here are a way to
   arrive at a figure nobody meant to give. */
.card-other input::-webkit-outer-spin-button,
.card-other input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.card-other input{-moz-appearance:textfield;appearance:textfield}
.cardf .field-grid{margin:0}

.gift-thanks{border:1px solid var(--blue);border-radius:var(--r-s);
  background:var(--blue-tint);padding:22px 24px}
.gift-thanks h2{margin:0 0 10px}
.gift-thanks p{margin:0 0 8px;font-size:15px;line-height:1.65}
.gift-thanks p:last-child{margin-bottom:0}