/* =================================================================
   THE HUNGER — A Field Study of Aedes aegypti
   Design system: specimen-paper & ink-teal field guide
   ================================================================= */

:root{
  /* palette */
  --paper:       #efe9dd;   /* specimen paper */
  --paper-warm:  #e6ddca;   /* aged card */
  --ink:         #12312e;   /* deep ink-teal, near black */
  --ink-soft:    #24534d;   /* mid teal */
  --teal:        #2f7c72;   /* live teal */
  --teal-bright: #4fb3a4;   /* highlight teal */
  --amber:       #d98a2b;   /* hazard amber accent */
  --amber-deep:  #b5651a;
  --blood:       #8a2f2f;   /* deep engorged red, used rarely */
  --line:        rgba(18,49,46,.18);
  --line-strong: rgba(18,49,46,.4);
  --paper-shadow: rgba(18,49,46,.10);

  /* type */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body:    "Spectral", Georgia, serif;
  --mono:    "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  --measure: 66ch;
  --pad: clamp(1.2rem, 5vw, 5rem);
}

/* ---- reset ---- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem,.55rem + .7vw,1.15rem);
  line-height:1.7;
  font-weight:400;
  overflow-x:hidden;
  /* faint specimen-paper grain */
  background-image:
    radial-gradient(circle at 20% 30%, rgba(18,49,46,.025) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(18,49,46,.02) 0 1px, transparent 1px);
  background-size: 7px 7px, 11px 11px;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

/* =================================================================
   Loading veil
   ================================================================= */
#veil{
  position:fixed; inset:0; z-index:200;
  background:var(--ink);
  color:var(--paper);
  display:grid; place-items:center;
  transition:opacity .8s ease, visibility .8s ease;
}
#veil.gone{ opacity:0; visibility:hidden; }
#veil .veil-inner{ text-align:center; }
#veil .wing{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.4em;
  text-transform:uppercase; color:var(--teal-bright);
  margin-bottom:1.4rem;
}
#veil .binomial{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(1.4rem,4vw,2.4rem);
}
#veil .proboscis{
  width:2px; height:0; margin:1.6rem auto 0; background:var(--amber);
  animation:drill 1.6s ease forwards;
}
@keyframes drill{ to{ height:64px; } }

/* =================================================================
   Fixed nav
   ================================================================= */
.topnav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem var(--pad);
  background:rgba(239,233,221,.82);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  transition:transform .4s ease;
}
.topnav.hide{ transform:translateY(-105%); }
.topnav .brand{
  font-family:var(--display); font-weight:600; font-size:1.05rem;
  letter-spacing:.01em; text-decoration:none;
}
.topnav .brand em{ font-style:italic; color:var(--teal); }
.topnav nav{ display:flex; gap:1.4rem; }
.topnav nav a{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; text-decoration:none; color:var(--ink-soft);
  padding-bottom:2px; border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.topnav nav a:hover, .topnav nav a:focus-visible{ color:var(--ink); border-color:var(--amber); }
.topnav .navtoggle{ display:none; background:none; border:0; font-family:var(--mono);
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; cursor:pointer; color:var(--ink); }
@media(max-width:820px){
  .topnav nav{
    position:absolute; top:100%; right:0; left:0;
    flex-direction:column; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .35s ease;
  }
  .topnav nav.open{ max-height:60vh; }
  .topnav nav a{ padding:.9rem var(--pad); border-bottom:1px solid var(--line); }
  .topnav .navtoggle{ display:block; }
}

/* =================================================================
   Layout helpers
   ================================================================= */
.wrap{ padding-inline:var(--pad); }
section{ position:relative; }
.stage-label{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--teal);
  display:flex; align-items:center; gap:.8rem;
}
.stage-label::before{
  content:""; width:36px; height:1px; background:var(--amber);
}
h2.head{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.9rem,1rem + 3.4vw,3.4rem);
  line-height:1.05; letter-spacing:-.01em; margin:.6rem 0 1.4rem;
}
h2.head em{ font-style:italic; color:var(--teal); }
h3{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.15rem,.9rem + 1vw,1.5rem); line-height:1.15;
  margin-bottom:.5rem;
}
h3 em{ font-style:italic; font-weight:400; color:var(--teal); }
p{ max-width:var(--measure); }
p + p{ margin-top:1rem; }
.lede{ font-size:1.12em; }
strong{ font-weight:600; }
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s ease; }
.reveal.in{ opacity:1; transform:none; }

/* =================================================================
   HERO
   ================================================================= */
.hero{
  min-height:100svh; padding:6rem var(--pad) 3rem;
  display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center;
  border-bottom:1px solid var(--line);
  position:relative; overflow:hidden;
}
.hero .contour{
  position:absolute; inset:0; z-index:0; opacity:.5; pointer-events:none;
}
.hero > *{ position:relative; z-index:1; }
.hero .eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--teal); margin-bottom:1.4rem;
}
.hero h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.6rem,1.2rem + 6vw,5.6rem);
  line-height:.98; letter-spacing:-.02em; margin-bottom:1.6rem;
}
.hero h1 em{ font-style:italic; color:var(--teal); }
.hero h1 .blood{ color:var(--blood); }
.hero p.deck{ max-width:46ch; font-size:1.1rem; color:var(--ink-soft); margin-bottom:2rem; }
.hero .stat-row{ display:flex; gap:2rem; flex-wrap:wrap; margin-bottom:2.2rem; }
.hero .stat{ }
.hero .stat b{
  display:block; font-family:var(--display); font-size:clamp(1.4rem,3vw,2.1rem);
  font-weight:600; line-height:1; color:var(--ink);
}
.hero .stat span{ font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
.cta{
  display:inline-block; font-family:var(--mono); font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; text-decoration:none;
  background:var(--ink); color:var(--paper);
  padding:.95rem 1.7rem; border:1px solid var(--ink);
  transition:background .25s, color .25s, transform .25s;
}
.cta:hover, .cta:focus-visible{ background:transparent; color:var(--ink); transform:translateY(-2px); }
.hero-figure{
  position:relative; aspect-ratio:4/5;
  background:var(--paper-warm); border:1px solid var(--line-strong);
  display:grid; place-items:center;
}
.hero-figure .specimen-tag{
  position:absolute; top:1rem; left:1rem;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft);
  border:1px solid var(--line-strong); padding:.35rem .55rem; background:rgba(239,233,221,.7);
}
.hero-figure .scalebar{
  position:absolute; bottom:1rem; right:1rem;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.12em; color:var(--ink-soft);
  text-align:right;
}
.hero-figure .scalebar span{ display:block; width:60px; height:5px; border:1px solid var(--ink-soft); border-top:0; margin-top:2px; }

/* image placeholder shared */
.ph{
  width:100%; height:100%; min-height:180px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; color:var(--ink-soft);
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(18,49,46,.05) 14px 15px);
}
.ph svg{ width:44px; height:44px; opacity:.55; }
.ph .ph-label{ font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; text-align:center; padding:0 1rem; }

@media(max-width:820px){
  .hero{ grid-template-columns:1fr; padding-top:5rem; }
  .hero-figure{ order:-1; aspect-ratio:3/2; }
}

/* =================================================================
   Generic section rhythm
   ================================================================= */
.band{ padding:clamp(3.5rem,7vw,7rem) 0; border-bottom:1px solid var(--line); }
.band.ink{ background:var(--ink); color:var(--paper); }
.band.ink .stage-label{ color:var(--teal-bright); }
.band.ink h2.head em{ color:var(--teal-bright); }
.band.ink p{ color:rgba(239,233,221,.85); }
.band.ink .ph{ color:rgba(239,233,221,.6);
  background:repeating-linear-gradient(45deg, transparent 0 14px, rgba(239,233,221,.06) 14px 15px); }
.band.warm{ background:var(--paper-warm); }

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,4rem); align-items:center; }
@media(max-width:820px){ .grid2{ grid-template-columns:1fr; } }
.figure{
  position:relative; aspect-ratio:4/3;
  border:1px solid var(--line-strong); background:var(--paper-warm);
}
.band.ink .figure{ border-color:rgba(239,233,221,.25); background:rgba(239,233,221,.05); }
.figure .cap{
  position:absolute; bottom:0; left:0; right:0;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em;
  padding:.5rem .7rem; background:rgba(18,49,46,.72); color:var(--paper);
}

/* =================================================================
   Timeline (Evolution / History)
   ================================================================= */
.timeline{ position:relative; margin-top:2.5rem; padding-left:1.5rem; }
.timeline::before{
  content:""; position:absolute; left:0; top:.4rem; bottom:.4rem; width:2px;
  background:linear-gradient(var(--teal), var(--amber));
}
.tl-item{ position:relative; padding:0 0 2.2rem 1.8rem; }
.tl-item::before{
  content:""; position:absolute; left:-5px; top:.4rem; width:12px; height:12px;
  border-radius:50%; background:var(--paper); border:2px solid var(--teal);
}
.tl-item.hazard::before{ border-color:var(--amber); background:var(--amber); }
.tl-when{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--amber-deep);
}
.tl-item h3{ margin:.25rem 0 .35rem; }

/* =================================================================
   Stat callout strip
   ================================================================= */
.factstrip{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-strong); border:1px solid var(--line-strong); margin-top:2.5rem; }
.factstrip .cell{ background:var(--paper); padding:1.4rem 1.2rem; }
.band.ink .factstrip{ background:rgba(239,233,221,.25); border-color:rgba(239,233,221,.25); }
.band.ink .factstrip .cell{ background:var(--ink); }
.factstrip b{ display:block; font-family:var(--display); font-weight:600; font-size:clamp(1.4rem,3vw,2rem); line-height:1; }
.factstrip .amber{ color:var(--amber); }
.factstrip span{ font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.band.ink .factstrip span{ color:rgba(239,233,221,.65); }
@media(max-width:720px){ .factstrip{ grid-template-columns:1fr 1fr; } }

/* =================================================================
   Range / spread — risk meter
   ================================================================= */
.rangewrap{ margin-top:2.5rem; }
.riskbars{ display:grid; gap:1rem; margin-top:1.5rem; }
.riskrow{ display:grid; grid-template-columns:130px 1fr 46px; align-items:center; gap:1rem; }
.riskrow .rlabel{ font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; }
.riskrow .track{ height:12px; background:rgba(18,49,46,.1); position:relative; overflow:hidden; }
.riskrow .fill{ position:absolute; inset:0 100% 0 0; background:linear-gradient(90deg,var(--teal),var(--amber)); transition:right 1.2s cubic-bezier(.2,.7,.2,1); }
.riskrow .rval{ font-family:var(--mono); font-size:.7rem; text-align:right; color:var(--ink-soft); }

/* =================================================================
   Virus cards (Deadly Viruses)
   ================================================================= */
.viruscards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.4rem; margin-top:2.5rem; }
.vcard{
  border:1px solid var(--line-strong); background:var(--paper);
  padding:1.6rem 1.5rem 1.5rem; position:relative;
  transition:transform .3s ease, box-shadow .3s ease;
}
.vcard:hover{ transform:translateY(-4px); box-shadow:0 14px 30px -18px var(--paper-shadow); }
.vcard .vtag{
  position:absolute; top:0; right:0;
  font-family:var(--mono); font-size:.56rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.3rem .55rem; color:var(--paper);
}
.vtag.high{ background:var(--blood); }
.vtag.med{ background:var(--amber-deep); }
.vtag.watch{ background:var(--ink-soft); }
.vcard h3{ padding-right:5.5rem; }
.vcard .latin{ font-family:var(--display); font-style:italic; color:var(--teal); font-size:.9rem; margin-bottom:.9rem; display:block; }
.vcard p{ font-size:.96rem; }
.vcard dl{ margin-top:1rem; display:grid; grid-template-columns:auto 1fr; gap:.3rem 1rem; font-size:.82rem; }
.vcard dt{ font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); align-self:center; }
.vcard dd{ font-weight:600; }

/* =================================================================
   Control methods (accordion-ish cards)
   ================================================================= */
.methods{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.4rem; margin-top:2.5rem; }
.method{ border:1px solid rgba(239,233,221,.25); padding:1.5rem; background:rgba(239,233,221,.04); }
.method .mnum{ font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; color:var(--teal-bright); }
.method h3{ color:var(--paper); margin:.4rem 0 .6rem; }
.method h3 em{ color:var(--teal-bright); }
.method p{ font-size:.94rem; }

/* =================================================================
   Interactive: bite-risk estimator
   ================================================================= */
.tool{ border:1px solid var(--line-strong); background:var(--paper); padding:clamp(1.5rem,3vw,2.5rem); margin-top:2.5rem; }
.tool .toolgrid{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:start; }
@media(max-width:720px){ .tool .toolgrid{ grid-template-columns:1fr; } }
.control{ margin-bottom:1.6rem; }
.control label{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.6rem; }
.control label b{ color:var(--amber-deep); }
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:3px; background:var(--line-strong); outline:none; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%; background:var(--ink); border:3px solid var(--amber); cursor:pointer; }
input[type=range]::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:var(--ink); border:3px solid var(--amber); cursor:pointer; }
.seg{ display:flex; border:1px solid var(--line-strong); }
.seg button{ flex:1; font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; padding:.6rem .4rem; background:transparent; border:0; border-right:1px solid var(--line-strong); cursor:pointer; color:var(--ink-soft); }
.seg button:last-child{ border-right:0; }
.seg button.on{ background:var(--ink); color:var(--paper); }
.readout{ background:var(--ink); color:var(--paper); padding:1.8rem; }
.readout .rbig{ font-family:var(--display); font-size:clamp(2.4rem,6vw,3.6rem); font-weight:600; line-height:1; }
.readout .rbig .unit{ font-size:1rem; font-family:var(--mono); letter-spacing:.1em; color:var(--teal-bright); }
.readout .rmeta{ font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(239,233,221,.65); margin-top:.4rem; }
.readout .gauge{ height:8px; background:rgba(239,233,221,.18); margin:1.4rem 0 .6rem; position:relative; overflow:hidden; }
.readout .gauge i{ position:absolute; inset:0 100% 0 0; background:linear-gradient(90deg,var(--teal-bright),var(--amber),var(--blood)); transition:right .5s ease; }
.readout .rnote{ font-size:.85rem; color:rgba(239,233,221,.8); margin-top:1rem; }
.disc{ font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; color:var(--ink-soft); margin-top:1.4rem; line-height:1.6; }

/* =================================================================
   Character explainers (the "specimen consultants")
   ================================================================= */
.consultants{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; margin-top:2.5rem; }
.consult{
  border:1px solid var(--line-strong); background:var(--paper); padding:1.2rem 1rem;
  text-align:center; cursor:pointer; transition:transform .25s, border-color .25s;
  font:inherit;
}
.consult:hover, .consult:focus-visible{ transform:translateY(-4px); border-color:var(--amber); }
.consult .avatar{ width:64px; height:64px; margin:0 auto .7rem; border-radius:50%; overflow:hidden; border:1px solid var(--line-strong); background:var(--paper-warm); }
.consult .avatar .ph{ min-height:0; }
.consult .cname{ font-family:var(--display); font-weight:600; font-size:.95rem; }
.consult .crole{ font-family:var(--mono); font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-top:.2rem; }

/* modal */
.modal-backdrop{
  position:fixed; inset:0; z-index:150; background:rgba(18,49,46,.55);
  backdrop-filter:blur(3px); display:none; place-items:center; padding:1.2rem;
}
.modal-backdrop.open{ display:grid; }
.modal{
  background:var(--paper); max-width:560px; width:100%; max-height:88vh; overflow:auto;
  border:1px solid var(--line-strong); position:relative;
  animation:pop .35s ease;
}
@keyframes pop{ from{ opacity:0; transform:translateY(18px) scale(.98);} to{opacity:1;transform:none;} }
.modal .mhead{ display:flex; gap:1rem; align-items:center; padding:1.5rem; border-bottom:1px solid var(--line); }
.modal .mhead .avatar{ width:56px; height:56px; border-radius:50%; overflow:hidden; border:1px solid var(--line-strong); flex:none; background:var(--paper-warm); }
.modal .mhead .cname{ font-family:var(--display); font-weight:600; font-size:1.1rem; }
.modal .mhead .crole{ font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); }
.modal .mbody{ padding:1.5rem; }
.modal .mbody h4{ font-family:var(--display); font-style:italic; font-weight:400; font-size:1.3rem; margin-bottom:.8rem; }
.modal .mbody h4 em{ color:var(--teal); font-style:normal; }
.modal .mbody p{ font-size:.98rem; }
.modal .close{
  position:absolute; top:1rem; right:1rem; width:34px; height:34px;
  border:1px solid var(--line-strong); background:var(--paper); cursor:pointer;
  font-family:var(--mono); font-size:1rem; line-height:1;
}

/* =================================================================
   Footer
   ================================================================= */
footer{ background:var(--ink); color:var(--paper); padding:clamp(3rem,6vw,5rem) var(--pad); }
footer .fgrid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:2.5rem; }
@media(max-width:720px){ footer .fgrid{ grid-template-columns:1fr; gap:1.8rem; } }
footer h4{ font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--teal-bright); margin-bottom:1rem; }
footer .fbrand{ font-family:var(--display); font-size:1.5rem; font-weight:400; }
footer .fbrand em{ font-style:italic; color:var(--teal-bright); }
footer p{ color:rgba(239,233,221,.7); font-size:.9rem; }
footer ul{ list-style:none; }
footer ul li{ margin-bottom:.5rem; }
footer ul a{ text-decoration:none; color:rgba(239,233,221,.8); font-size:.9rem; border-bottom:1px solid transparent; }
footer ul a:hover{ border-color:var(--amber); }
footer .refs{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid rgba(239,233,221,.2); font-family:var(--mono); font-size:.62rem; letter-spacing:.04em; color:rgba(239,233,221,.5); line-height:1.9; }
footer .disclaim{ margin-top:1.2rem; font-family:var(--mono); font-size:.62rem; color:rgba(239,233,221,.45); }

/* selection */
::selection{ background:var(--amber); color:var(--ink); }

/* =================================================================
   Inline "ask the field team" keyword triggers
   ================================================================= */
.ask{
  font:inherit; display:inline; color:var(--teal); background:none;
  border:0; padding:0; margin:0; cursor:pointer;
  border-bottom:1.5px dashed var(--teal);
  transition:color .2s, border-color .2s, background .2s;
}
.ask em{ font-style:italic; color:inherit; }
.ask::after{
  content:"✦"; font-family:var(--mono); font-size:.6em; line-height:0;
  vertical-align:.5em; margin-left:.18em; color:var(--amber-deep);
}
.ask:hover, .ask:focus-visible{ color:var(--amber-deep); border-color:var(--amber); outline:none; }
.band.ink .ask{ color:var(--teal-bright); border-color:var(--teal-bright); }
.band.ink .ask:hover, .band.ink .ask:focus-visible{ color:var(--amber); border-color:var(--amber); }
.ask-hint{ color:var(--teal); border-bottom:1.5px dashed var(--teal); font-style:italic; }

/* =================================================================
   Field-team roster -> 3D character cards
   ================================================================= */
.consultants{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1.2rem; margin-top:2.5rem; }
.consult{
  border:1px solid var(--line-strong); background:var(--paper);
  padding:1rem .8rem 1.2rem; text-align:center; cursor:pointer; font:inherit;
  display:flex; flex-direction:column; align-items:center;
  transition:transform .25s, border-color .25s, box-shadow .25s;
}
.consult:hover, .consult:focus-visible{
  transform:translateY(-6px); border-color:var(--amber);
  box-shadow:0 18px 34px -22px var(--paper-shadow); outline:none;
}
.consult .cfig{ height:172px; width:100%; display:flex; align-items:flex-end; justify-content:center; margin-bottom:.7rem; }
.consult .cfig img{
  height:100%; width:auto; max-width:100%; object-fit:contain;
  filter:drop-shadow(0 10px 12px rgba(18,49,46,.22));
  transition:transform .25s;
}
.consult:hover .cfig img, .consult:focus-visible .cfig img{ transform:scale(1.04); }
.consult .cname{ font-family:var(--display); font-weight:600; font-size:1rem; }
.consult .crole{ font-family:var(--mono); font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-top:.25rem; }

/* =================================================================
   Consultant slide-in stage (character from left, panel from right)
   ================================================================= */
.cstage{ position:fixed; inset:0; z-index:150; pointer-events:none; visibility:hidden; }
.cstage.open{ visibility:visible; pointer-events:auto; }
.cstage-scrim{
  position:absolute; inset:0; background:rgba(18,49,46,.5);
  backdrop-filter:blur(3px); opacity:0; transition:opacity .5s ease;
}
.cstage.open .cstage-scrim{ opacity:1; }
.cstage-fig{
  position:absolute; left:clamp(0px,2vw,3rem); bottom:0; z-index:2;
  height:min(88vh,780px); width:auto; pointer-events:none;
  transform:translateX(-130%); opacity:0;
  transition:transform .6s cubic-bezier(.2,.85,.25,1), opacity .5s ease;
  filter:drop-shadow(0 20px 28px rgba(18,49,46,.4));
}
.cstage.open .cstage-fig{ transform:translateX(0); opacity:1; }
.cstage-panel{
  position:absolute; top:0; right:0; z-index:3;
  width:min(560px,92vw); height:100%; overflow-y:auto;
  background:var(--paper); border-left:1px solid var(--line-strong);
  padding:clamp(2rem,4vw,3.4rem) clamp(1.4rem,3vw,2.6rem);
  transform:translateX(110%); transition:transform .55s cubic-bezier(.2,.85,.25,1);
  box-shadow:-30px 0 60px -30px rgba(18,49,46,.5);
}
.cstage.open .cstage-panel{ transform:translateX(0); }
.cstage-close{
  position:absolute; top:1rem; right:1rem; width:36px; height:36px;
  border:1px solid var(--line-strong); background:var(--paper); cursor:pointer;
  font-family:var(--mono); font-size:1.1rem; line-height:1; color:var(--ink);
}
.cstage-close:hover{ border-color:var(--amber); }
.cs-eyebrow{ font-family:var(--mono); font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; color:var(--teal); margin-bottom:1.4rem; }
.cs-name{ font-family:var(--display); font-weight:600; font-size:clamp(1.5rem,1rem + 1.6vw,2rem); line-height:1.05; }
.cs-role{ font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--amber-deep); margin-top:.4rem; }
.cs-q{ font-family:var(--display); font-style:italic; font-weight:400; font-size:1.3rem; margin:1.3rem 0 1rem; padding-top:1.2rem; border-top:1px solid var(--line); }
.cs-q em{ color:var(--teal); font-style:normal; }
.cs-a p{ font-size:.98rem; max-width:none; }
.cs-a p + p{ margin-top:1rem; }
.cs-a em{ font-style:italic; color:var(--teal); }

@media(max-width:720px){
  .cstage-fig{ height:40vh; left:4vw; }
  .cstage-panel{
    width:100%; height:auto; max-height:76vh; top:auto; bottom:0;
    border-left:0; border-top:1px solid var(--line-strong);
    transform:translateY(110%); box-shadow:0 -30px 60px -30px rgba(18,49,46,.5);
  }
  .cstage.open .cstage-panel{ transform:translateY(0); }
}