/* BRISA v2 — brand taken from the mini-symposium poster (Sept 2026).
   Palette sampled directly off the poster artwork. */

:root{
  --aqua:#a0d2dc;        /* dominant poster field */
  --aqua-lt:#c8e6e6;
  --aqua-pale:#e2f1f4;
  --mint:#96e6be;        /* poster footer band */
  --mint-lt:#c4f0da;
  --navy:#00466e;        /* headline + line art */
  --teal:#46a0b4;
  --blue:#008cf0;        /* bright accent */
  --ink:#141414;
  --ink-soft:#3e4a52;
  --ink-faint:#6b7a83;
  --white:#fff;
  --hair:#00466e1f;

  /* Poster sets PP Neue Machina + Disket Mono, both commercial licences.
     ponytail: Archivo (wide axis) + JetBrains Mono are the closest free stand-ins.
     Swap these two lines if the real licences land. */
  --display:"Archivo",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --body:"Inter",system-ui,sans-serif;

  --tbd:#d98324;
  --wrap:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--aqua-pale);color:var(--ink);
  font:400 17px/1.65 var(--body);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:2rem}
@media(max-width:640px){.wrap{padding-inline:1.25rem}}

h1,h2,h3{
  font-family:var(--display);font-weight:700;
  font-stretch:125%;                 /* the poster's wide techno caps */
  letter-spacing:-.01em;line-height:1.02;margin:0;
  color:var(--navy);text-transform:uppercase;
}
h1{font-size:clamp(2.6rem,6.4vw,5.1rem)}
h2{font-size:clamp(1.9rem,3.6vw,3rem)}
/* Long single words ("BREATHALYSER") outrun narrow screens at 125% stretch.
   Relax the width axis and the floor together below 560px. */
@media(max-width:560px){
  h1{font-size:clamp(1.75rem,7.6vw,2.6rem);font-stretch:100%}
  h2{font-size:clamp(1.5rem,6.2vw,1.9rem);font-stretch:105%}
}
h3{font-size:1.15rem;font-stretch:110%;letter-spacing:.01em}
p{margin:0 0 1.1rem}

.eyebrow{
  font-family:var(--mono);font-size:.74rem;font-weight:500;
  letter-spacing:.19em;text-transform:uppercase;color:var(--navy);
  background:var(--aqua);display:inline-block;padding:.34rem .7rem;margin:0 0 1.3rem;
}
.lede{font-size:1.14rem;color:var(--ink-soft);max-width:56ch}

/* ============ header ============ */
header{
  position:sticky;top:0;z-index:20;background:#e2f1f4e6;
  backdrop-filter:blur(10px);border-bottom:1px solid var(--hair);
}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-block:1rem}
.wordmark{
  font-family:var(--display);font-weight:700;font-stretch:125%;font-size:1.12rem;
  letter-spacing:.05em;text-decoration:none;color:var(--navy);
  display:flex;align-items:center;gap:.5rem;text-transform:uppercase;
}
.wordmark small{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;color:var(--teal);font-weight:400}
/* the mark is white lettering knocked out of a pale wave, so it needs some size
   on the header's aqua before the letters separate from the background */
.wordmark img{display:block;height:52px;width:auto}
@media(max-width:820px){.wordmark img{height:44px}}
nav.main{display:flex;gap:1.6rem;flex-wrap:wrap}
nav.main a{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;color:var(--navy);opacity:.72;padding-block:.2rem;
}
nav.main a:hover{opacity:1}
nav.main a.current{opacity:1;box-shadow:inset 0 -2px 0 var(--blue)}
@media(max-width:820px){.hdr{flex-direction:column;align-items:flex-start;gap:.8rem}nav.main{gap:1.1rem}}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:50;background:var(--navy);color:#fff;padding:.7rem 1rem}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ============ hero ============ */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(168deg,var(--aqua-lt) 0%,var(--aqua) 46%,var(--mint) 100%);
  padding:5.5rem 0 4rem;
}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.hero h1{margin-bottom:1.4rem}
.hero h1 em{font-style:normal;color:var(--white)}
.hero .lede{color:#123c50;max-width:44ch}
.hero-ctas{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.9rem}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:2.5rem}}

/* landscape illustration, floated on the hero gradient */
.device{position:relative;display:grid;place-items:center;min-height:clamp(300px,36vw,440px)}
.device img{
  /* ponytail: 470px is ~1.5x the source's native 308px, so it softens a little.
     Raise the cap once a larger export or an SVG lands. */
  width:clamp(260px,38vw,470px);height:auto;position:relative;z-index:2;
  filter:drop-shadow(0 18px 30px #00466e2e);
}

.btn{
  display:inline-block;font-family:var(--mono);font-size:.79rem;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;text-decoration:none;
  background:var(--navy);color:#fff;padding:.86rem 1.5rem;border:1.5px solid var(--navy);
  transition:background .16s,color .16s;
}
.btn:hover{background:transparent;color:var(--navy)}
.btn.ghost{background:transparent;color:var(--navy)}
.btn.ghost:hover{background:var(--navy);color:#fff}
.btn.on-navy{background:var(--mint);border-color:var(--mint);color:var(--navy)}
.btn.on-navy:hover{background:transparent;color:var(--mint)}

/* ============ affiliation strip ============ */
.affil{background:var(--navy);color:#fff;padding:2.4rem 0}
.affil .wrap{display:flex;align-items:center;justify-content:space-between;gap:2.5rem;flex-wrap:wrap}
.affil .lbl{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mint);margin:0;
}
.logo-row{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap}
/* white tiles rather than knocking the logos out to white: two of the three are
   dark artwork and one is full colour, so an invert filter would flatten them */
.logo-row img{
  height:34px;width:auto;display:block;
  background:#fff;padding:.4rem .65rem;border-radius:2px;
}
.logo-slot{
  display:grid;place-items:center;min-width:150px;height:44px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:#ffffff9c;
}

/* ============ sections ============ */
section{padding:5.5rem 0}
.on-white{background:var(--white)}
.fieldnote{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--teal);margin:0 0 .9rem;display:flex;align-items:center;gap:.7rem;
}
.fieldnote::before{content:"";width:26px;height:1.5px;background:var(--teal)}

/* ============ the studies (signature) ============ */
/* same two-column shape as the About roadmap; the left column is a .route */
.phases{display:grid;grid-template-columns:230px 1fr;gap:3.2rem;margin-top:3rem;align-items:start}
.phases>*{min-width:0}
.phase{
  background:var(--white);border:1px solid var(--hair);border-left:4px solid var(--aqua);
  padding:2.3rem 2.4rem;margin-bottom:1.6rem;transition:border-left-color .25s;
}
.phase.on{border-left-color:var(--blue)}
.phase .num{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.15em;color:var(--teal);
  display:block;margin-bottom:.5rem;
}
.phase h3{margin-bottom:.8rem;color:var(--navy)}
.phase p{font-size:.97rem;color:var(--ink-soft);margin-bottom:.9rem}
.status{
  display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--navy);
  background:var(--aqua-lt);padding:.3rem .65rem;
}
@media(max-width:900px){
  /* the curve is dropped here, same as the roadmap; see the .route rules below */
  .phases{grid-template-columns:1fr;gap:1.5rem}
  .phase{padding:1.8rem 1.5rem}
}

/* ============ cards / grids ============ */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:2.6rem}
@media(max-width:820px){.grid2{grid-template-columns:1fr}}
.card{background:var(--white);border:1px solid var(--hair);padding:1.9rem 1.8rem}
.card .kind{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal);display:block;margin-bottom:.5rem;
}
.card h3{margin-bottom:.6rem}
.card p{font-size:.94rem;color:var(--ink-soft);margin-bottom:.9rem}
.read{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue);text-decoration:none;border-bottom:1px solid currentColor;
}

/* ============ event ============ */
.event{background:linear-gradient(150deg,var(--mint-lt),var(--mint));padding:5rem 0}
.event-card{
  background:var(--white);border:1.5px solid var(--navy);
  display:grid;grid-template-columns:1.3fr .7fr;gap:0;
}
/* Column with no bottom padding, so the space under the CTA row is governed by
   the row's own margins rather than by padding the row cannot see. That, the
   dropped margin on the last paragraph, and margin-block:auto below are what
   make the gap above the row equal the gap beneath it. */
.event-body{padding:2.8rem 2.6rem 0;display:flex;flex-direction:column}
.event-body>p:last-of-type{margin-bottom:0}
.event-cta{
  display:flex;align-items:center;flex-wrap:wrap;
  /* auto on both sides splits the leftover height evenly above and below;
     padding-block keeps a floor under it when there is no leftover */
  margin-block:auto;padding-block:2rem;
  /* column-gap stays 0: it would sit outside the illustration's auto margins and
     throw the centring off by its own width. Row-gap is for the wrapped case. */
  gap:1.4rem 0;
}
/* the button holds the left edge at its own width */
.event-cta .btn{margin:0;flex:none}
/* auto side margins eat the leftover space evenly, so the illustration centres
   in whatever the button leaves rather than sitting against either edge.
   ponytail: capped near the source's native 308px so the line art stays crisp */
.event-img{display:block;width:100%;max-width:200px;height:auto;margin:0 auto}
/* QR sits on the navy panel, so it needs its own white tile to stay scannable */
.qr{
  display:grid;justify-items:center;gap:.55rem;justify-self:start;
  background:var(--white);padding:.75rem .75rem .65rem;text-decoration:none;
}
/* 57 modules + quiet zone: below ~160px a phone camera starts to struggle */
.qr img{display:block;width:168px;height:auto}
.qr span{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--navy);
}
@media(max-width:820px){.qr{justify-self:center}}
.event-meta{
  background:var(--navy);color:#fff;padding:2.8rem 2rem;display:grid;
  align-content:center;gap:1.3rem;
}
.event-meta dl{margin:0;display:grid;gap:1.2rem}
.event-meta dt{
  font-family:var(--mono);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mint);margin-bottom:.25rem;
}
.event-meta dd{margin:0;font-size:.98rem;line-height:1.45}
.event .kicker{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  background:var(--navy);color:#fff;display:inline-block;padding:.3rem .7rem;margin-bottom:1.1rem;
}
@media(max-width:820px){.event-card{grid-template-columns:1fr}.event-body{padding:2rem 1.6rem 0}}
/* they stop fitting on one line just under 420px, so only centre the stack from
   there down; above it the auto margins are doing the centring instead */
@media(max-width:415px){
  .event-cta{justify-content:center;text-align:center}
  .event-cta .btn{margin-inline:auto}
  .event-img{max-width:170px}
}

/* ============ contact ============ */
.contact{background:var(--navy);color:#fff}
.contact h2{color:#fff}
.contact p{color:#ffffffc7}
.contact .fieldnote{color:var(--mint)}
.contact .fieldnote::before{background:var(--mint)}

/* ============ footer ============ */
footer{background:var(--ink);color:#ffffffad;padding:3.5rem 0 2rem;font-size:.88rem}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.5rem}
footer h4{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mint);margin:0 0 .9rem;font-weight:500;
}
footer nav{display:grid;gap:.5rem}
footer a{color:#ffffffad;text-decoration:none}
footer a:hover{color:#fff}
/* a consortium entry with no website: same look as the links beside it, not clickable */
footer .partner-name{color:#ffffffad}
footer .fm{
  font-family:var(--display);font-weight:700;font-stretch:125%;text-transform:uppercase;
  color:#fff;letter-spacing:.05em;margin-bottom:.7rem;
}
.colophon{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid #ffffff1f;font-size:.78rem;color:#ffffff70}
@media(max-width:820px){footer .cols{grid-template-columns:1fr;gap:2rem}}

/* ============ interior page head ============ */
.pagehead{
  background:linear-gradient(168deg,var(--aqua-lt),var(--aqua));
  padding:4.5rem 0 4rem;border-bottom:1px solid var(--hair);
}
.pagehead h1{font-size:clamp(2.1rem,4.6vw,3.7rem);margin-bottom:1.2rem}
.pagehead .lede{color:#123c50}

/* ============ prose ============ */
.prose{max-width:66ch}
.prose p{color:var(--ink-soft)}
.prose strong{color:var(--ink)}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:3.2rem;align-items:center}
.split.flip .fig{order:-1}
/* illustration on a transparent ground, so no frame and no need to fill the
   column edge to edge */
.fig img{display:block;width:100%;max-width:420px;margin-inline:auto}
.fig figcaption{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--ink-faint);margin-top:.6rem}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:2rem}.split.flip .fig{order:0}}

.pullquote{
  margin:2rem 0;padding-left:1.4rem;border-left:3px solid var(--blue);
  font-family:var(--display);font-stretch:110%;font-size:1.18rem;line-height:1.35;
  color:var(--navy);text-transform:none;
}
.deliver{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.75rem}
/* ponytail: padding + absolute marker, NOT grid on the li. Grid would promote
   every text node and <strong> to its own grid item and shatter the sentence. */
.deliver li{
  position:relative;padding-left:1.7rem;
  font-size:.97rem;line-height:1.55;color:var(--ink-soft);
}
.deliver li::before{
  content:"";position:absolute;left:0;top:.52em;
  width:9px;height:9px;background:var(--blue);
}

/* ============ signal map (About, "our goal") ============ */
.goal-prose .prose{max-width:70ch}
.smap{margin:3.2rem 0 0}
/* the drawing needs its width to stay readable, so let it pan on narrow screens
   rather than shrinking the labels into illegibility */
.smap-scroll{overflow-x:auto;overflow-y:hidden}
.smap svg{display:block;width:100%;min-width:860px;height:auto}
/* white, not a tinted panel: the circles illustration carries a white ground of
   its own and would otherwise sit in a visible box */
.smap-bg{fill:#fff}
.band-rapid{fill:#e6f2fb}
.band-slow{fill:#cbe5f7}
.band-static{fill:#a7d4ef}
/* the figure is artwork with its own outline and fill, so nothing to colour here */
.chip rect{stroke:#fff;stroke-width:2}
.chip text{
  font-family:var(--body);font-size:17px;font-weight:500;fill:#fff;
  text-anchor:middle;
}
.s-static rect{fill:#2f8fd0}
.s-slow rect{fill:#69bce6}
.s-rapid rect{fill:var(--navy)}
/* Craving straddles two bands: the halves carry no stroke of their own, or the
   white outline would draw a seam down the middle of the chip */
.s-split .half-slow{fill:#69bce6;stroke:none}
.s-split .half-rapid{fill:var(--navy);stroke:none}
.s-split .chip-edge{fill:none}
.band-label text{
  font-family:var(--body);font-size:26px;font-weight:700;fill:var(--navy);
  text-anchor:middle;opacity:.85;
}
.smap-arrow path{fill:var(--blue)}
.smap figcaption{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--ink-faint);
  margin-top:.9rem;
}
/* SVG children transform in user units, so the default 22px nudge is a 22-unit
   nudge here; scale it back to something proportionate to the 1120-wide canvas */
.smap .rv{transform:translateY(14px)}
.smap .rv.in{transform:none}

/* the figure rides along while the column beside it scrolls */
.fig.sticky-fig{position:sticky;top:calc(50vh - 200px);align-self:start}
@media(max-width:860px){
  .fig.sticky-fig{position:relative;top:auto;margin-bottom:1rem}
}

/* ============ roadmap: route rail + work packages ============ */
/* same two-column shape as the home page's .phases rail */
.roadmap{display:grid;grid-template-columns:230px 1fr;gap:3.2rem;margin-top:2.6rem;align-items:start}
.roadmap>*{min-width:0}

/* ============ scroll-drawn route ============ */
/* no card behind it: the curve sits straight on the section background */
.route{position:sticky;top:7rem;margin:0}
.route svg{
  width:100%;height:auto;display:block;overflow:visible;
  /* the curve is deliberately tall, so cap it on short viewports rather than
     letting the pinned rail run off the bottom of the screen */
  max-height:calc(100vh - 12rem);
}
.route .under{fill:none;stroke:var(--navy);stroke-opacity:.16;stroke-width:3;stroke-dasharray:7 9;stroke-linecap:round}
.route .draw{fill:none;stroke:var(--blue);stroke-width:3.5;stroke-linecap:round}
.route .cp circle{fill:var(--white);stroke:var(--navy);stroke-opacity:.3;stroke-width:2.5;transition:fill .3s,stroke .3s}
.route .cp text{
  font-family:var(--mono);font-size:13px;fill:var(--ink-faint);
  text-anchor:middle;transition:fill .3s;
}
/* .lbl text-anchor and dx are set in app.js, from each node's side of the curve */
.route .cp .n{font-size:12px;fill:var(--ink-faint);font-weight:500;transition:fill .3s}
.route .cp.on circle{fill:var(--blue);stroke:var(--blue)}
.route .cp.on .n{fill:#fff}
.route .cp.on text{fill:var(--navy)}
.route figcaption{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--ink-faint);
  margin-top:1rem;text-align:center;
}
@media(max-width:900px){
  /* No left column to pin to. The curve is 760 units tall, so any width that
     keeps its labels legible costs most of a phone screen before the reader
     reaches a single card, and the cards already carry the same numbers on their
     badges. Drop the route on both sections. */
  .roadmap{grid-template-columns:1fr;gap:1.2rem}
  .route{display:none}
}
@media(max-width:700px){
  .route{padding:1.6rem .8rem 1rem}
  .route .cp text{font-size:15px}
  .route .cp .n{font-size:14px}
}

/* ============ work packages ============ */
.wp{
  background:var(--white);border:1px solid var(--hair);border-left:4px solid var(--aqua);
  padding:2rem 2.1rem;margin-bottom:1.3rem;display:grid;grid-template-columns:auto 1fr;gap:1.6rem;
  transition:border-left-color .25s;
}
.wp.on{border-left-color:var(--blue)}
.wp .badge{
  width:48px;height:48px;display:grid;place-items:center;background:var(--navy);color:#fff;
  font-family:var(--mono);font-size:.86rem;
}
.wp .tag,.job .tag{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal);display:block;margin-bottom:.35rem;
}
.wp p{font-size:.95rem;color:var(--ink-soft);margin-bottom:0}
/* the illustrations carry their own white ground, so a frame around them just
   draws a box in mid-air; centred in the card's text column instead */
.wp-fig{margin:1.6rem auto .3rem;max-width:300px}
.wp-fig img{display:block;width:100%}
@media(max-width:600px){.wp{grid-template-columns:1fr;gap:1rem}}

/* ============ open position ============ */
.job{
  background:var(--white);border:1px solid var(--hair);border-left:4px solid var(--blue);
  padding:2.3rem 2.4rem;margin-bottom:1.3rem;
}
.job h3{margin-bottom:.8rem;color:var(--navy)}
.job>p{font-size:.97rem;color:var(--ink-soft);max-width:68ch}
/* the practical details, so a candidate can rule themselves in or out fast */
.job-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.1rem 1.6rem;
  margin:1.8rem 0;padding:1.3rem 0;border-block:1px solid var(--hair);
}
.job-facts dt{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal);margin-bottom:.3rem;
}
.job-facts dd{margin:0;font-size:.93rem;color:var(--ink-soft)}
.job-sub{font-weight:600;color:var(--ink);margin-bottom:.8rem}
.job-cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2rem}
@media(max-width:600px){.job{padding:1.8rem 1.5rem}}

/* ============ team ============ */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:2.6rem}
.member{background:var(--white);border:1px solid var(--hair);padding:1.6rem 1.5rem}
.member .avatar{
  width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  background:var(--navy);color:#fff;font-family:var(--mono);font-size:.9rem;margin-bottom:1rem;
}
img.avatar{object-fit:cover;object-position:50% 20%}
.member h3{font-size:1.02rem;margin-bottom:.3rem;text-transform:none;font-stretch:105%}
.member .role{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue);margin-bottom:.5rem;
}
.member p{font-size:.9rem;color:var(--ink-soft);margin:0}
@media(max-width:860px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.team-grid{grid-template-columns:1fr}}

/* ============ empty state ============ */
.empty{
  border:1.5px dashed var(--hair);background:var(--white);
  padding:3.2rem 2rem;text-align:center;margin-top:2.4rem;
}
.empty h3{margin-bottom:.6rem;text-transform:none}
.empty p{color:var(--ink-faint);font-size:.95rem;margin:0 auto;max-width:44ch}

/* full reference under a publication: small and quiet, but selectable so it can
   be copied straight into a reference manager */
.citation{
  font-family:var(--mono);font-size:.72rem;line-height:1.7;color:var(--ink-faint);
  border-top:1px solid var(--hair);padding-top:.9rem;margin-top:1.2rem;
  overflow-wrap:anywhere;
}
.citation a{color:var(--teal);text-decoration:none;border-bottom:1px solid #46a0b459}
.citation a:hover{border-bottom-color:var(--teal)}

/* ============ contact ============ */
.people{margin-top:2.6rem}
.person-card{
  display:grid;grid-template-columns:auto 1fr;gap:1.8rem;align-items:center;
  background:#ffffff14;border:1px solid #ffffff2e;padding:1.9rem 2rem;
}
.person-card img{
  width:118px;height:118px;border-radius:50%;object-fit:cover;object-position:50% 20%;
  border:2px solid #ffffff40;
}
.person-card .kind{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mint);display:block;margin-bottom:.45rem;
}
.person-card h3{color:#fff;font-size:1.08rem;text-transform:none;margin-bottom:.5rem}
.person-card p{color:#ffffffb5;font-size:.93rem;margin:0 0 .9rem;max-width:42ch}
.person-card .mail{
  color:var(--mint);font-family:var(--mono);font-size:.85rem;
  text-decoration:none;border-bottom:1px solid #96e6be59;padding-bottom:2px;
  overflow-wrap:anywhere;
}
.person-card .mail:hover{border-bottom-color:var(--mint)}
@media(max-width:560px){
  .person-card{grid-template-columns:1fr;gap:1.2rem;justify-items:start}
}

/* ============ reveal ============ */
.rv{
  opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--d,0ms);
}
.rv.in{opacity:1;transform:none}
/* siblings in a group cascade instead of snapping in together; app.js sets --d */
.rv-blur{filter:blur(6px);transition:opacity .7s ease,transform .7s ease,filter .7s ease}
.rv-blur.in{filter:none}

@media(prefers-reduced-motion:reduce){
  .rv,.rv-blur{opacity:1;transform:none;filter:none;transition:none}
  .sticky-fig{position:static}
}