/* Small overrides that are easier as plain CSS than SCSS.
   Most styling lives in theme.scss (Bootstrap variables). */

/* Let full-bleed sections escape Quarto's grid container */
#quarto-content { padding-left: 0; padding-right: 0; }
.page-columns { display: block; }

/* utility spacing */
.mt-tight { margin-top: .6rem; }
.stack > * + * { margin-top: 1.1rem; }
.center { text-align: center; }

/* two-column prose helper */
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); }
@media (max-width: 760px) { .cols-2 { grid-template-columns: 1fr; } }

/* portrait figure on About */
.portrait { border: 1px solid var(--hair); }
.portrait figcaption { font-size: .75rem; color: var(--muted-dim); margin-top: .6rem; letter-spacing: .04em; }

/* About: photo-first header (no big title) */
.about-head{ display:grid; grid-template-columns:minmax(240px,360px) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3.5rem); align-items:center; }
.about-head img{ width:100%; border:1px solid var(--hair); }
@media (max-width:720px){ .about-head{ grid-template-columns:1fr; } .about-head img{ max-width:320px; } }

/* About: journey map (generated by tools/build-journey-map.py) + stop tabs */
.jmap{ position:relative; }
.jmap img{ width:100%; height:auto; display:block; }
.jbadge{ position:absolute; transform:translate(-50%,-50%); width:32px; height:32px;
  border-radius:50%; background:var(--cave); border:1.5px solid var(--lamp); color:var(--lamp);
  font:700 .82rem/1 "Archivo",sans-serif; cursor:pointer; transition:.2s ease; padding:0; }
.jbadge:hover{ background:var(--cave-2); transform:translate(-50%,-50%) scale(1.12); }
.jbadge.on{ background:var(--lamp); color:var(--on-accent); }
@media (max-width:640px){ .jbadge{ width:26px; height:26px; font-size:.72rem; } }

.jtabs{ display:flex; gap:.55rem; flex-wrap:wrap; margin-top:1.8rem; }
.jtab{ font:600 .76rem/1 "Archivo",sans-serif; letter-spacing:.06em; text-transform:uppercase;
  padding:.6rem .85rem; background:none; border:1px solid var(--hair); color:var(--text);
  cursor:pointer; transition:.2s ease; }
.jtab:hover{ border-color:var(--lamp); color:var(--heading); }
.jtab.on{ background:var(--lamp); border-color:var(--lamp); color:var(--on-accent); }

.jpanel{ display:none; margin-top:1rem; border:1px solid var(--line);
  background:rgba(233,225,210,.03); padding:1.5rem 1.6rem 1.6rem; }
.jpanel.on{ display:block; }
.jpanel h3{ font-family:"Newsreader",Georgia,serif; font-weight:400; font-size:1.3rem;
  color:var(--heading); margin:0 0 .6rem; }
.jpanel h3 span{ font-family:"Archivo",sans-serif; font-size:.76rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--lamp); margin-left:.4rem; }
.jpanel p{ color:var(--muted); max-width:66ch; margin:0; }

/* inline keyword underline (non-interactive emphasis) */
.klink-static { border-bottom: 3px solid var(--clay); padding-bottom: 2px; }

/* homepage featured photo strip */
.home-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; margin-top: 2.6rem; }
.home-strip .hs { position: relative; overflow: hidden; aspect-ratio: 4 / 5; display: block; }
.home-strip .hs img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.home-strip .hs:hover img { transform: scale(1.07); }
.home-strip .hs span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem .7rem .6rem; color: #fff;
  font-size: .74rem; font-weight: 600; letter-spacing: .02em;
  background: linear-gradient(0deg, rgba(10,7,5,.88), transparent);
}
@media (max-width: 720px) { .home-strip { grid-template-columns: repeat(2, 1fr); } }

/* blog listing sits on the cream body */
.quarto-listing { max-width: 900px; margin: 0 auto; padding: 2.5rem clamp(1.3rem,4vw,2.6rem) 4rem; }


/* ============================================================
   THEME RULES — "After Dark" palette. Every color is named for
   its referent in the bats' world; nothing is here because it
   "looks modern".
   Plain CSS (kept out of theme.scss so Quarto's css-vars
   scanner does not choke on @media / @keyframes).
   ============================================================ */
:root{
  --cave:#161210;         /* unlit roost interior — main background */
  --cave-2:#211a16;       /* lamplit rock — lifted panels */
  --band-a:#1f1814;       /* roost wall, upper — accent section (top) */
  --band-b:#171210;       /* roost wall, shadow — accent section (bottom) */
  --text:#cfc5b4;         /* moonlit parchment — body text */
  --heading:#e9e1d2;      /* limestone at the cave mouth — headings */
  --lamp:#c9964b;         /* headlamp amber — primary accent */
  --lamp-strong:#dcae63;  /* amber turned up (hover) */
  --blood:#9c2b33;        /* the meal itself — sharing pulses, emphasis */
  --membrane:#8a6a54;     /* wing membrane, backlit — network nodes */
  --muted:#a89d8c;        /* muted body */
  --muted-dim:#84796a;    /* dimmer captions */
  --hair:rgba(233,225,210,.24);  /* limestone hairline */
  --line:rgba(233,225,210,.13);  /* subtle divider on cave */
  --on-accent:#1c1510;    /* dark text on filled amber */
  --maxw:1180px;
  /* legacy aliases so older selectors keep resolving */
  --paper:var(--cave); --paper-2:var(--cave-2);
  --green:var(--lamp); --green-strong:var(--lamp-strong);
  --clay:var(--blood);
  --ink:var(--cave); --ink-2:var(--cave-2);
  --cyan:var(--lamp); --cyan-bright:var(--lamp-strong);
}
body{
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:var(--paper); color:var(--text); letter-spacing:.005em;
}
::selection{ background:var(--green); color:var(--on-accent); }
h1,h2,h3,h4{ letter-spacing:-.018em; line-height:1.04; text-wrap:balance; color:var(--heading); }
p{ line-height:1.72; }
strong{ font-weight:700; color:var(--heading); }
a{ text-decoration:none; }
img{ display:block; max-width:100%; }
.full-bleed{ width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; }
/* 100vw includes the scrollbar, so full-bleed sections overhang the viewport
   by the scrollbar's width and every page grows a useless horizontal
   scrollbar; clip it at the root (nothing legitimate scrolls sideways —
   wide tables scroll inside their own overflow-x:auto wrappers) */
html, body{ overflow-x:clip; }

/* kill Quarto's default article padding so sections can go full-bleed */
#quarto-content > *{ padding-top:0; }
main.content{ margin-top:0; padding:0 !important; }
#quarto-document-content{ max-width:none; }

/* ---------- NAVBAR (deep forest green bar) ---------- */
.navbar{
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.10);
  font-size:.86rem;
}
.navbar-brand{
  font-family:"Newsreader",Georgia,serif; font-weight:500; letter-spacing:.01em;
  font-size:1.3rem; color:#f3ecdd !important;
}
.navbar .navbar-nav .nav-link{
  text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; font-weight:600;
  color:rgba(247,243,232,.78) !important; padding:.35rem .85rem; position:relative;
}
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active{ color:#fff !important; }
.navbar .navbar-nav .nav-link::after{
  content:""; position:absolute; left:.85rem; right:.85rem; bottom:.05rem; height:1px;
  background:var(--lamp); transform:scaleX(0); transform-origin:left; transition:transform .28s ease;
}
.navbar .navbar-nav .nav-link:hover::after,
.navbar .navbar-nav .nav-link.active::after{ transform:scaleX(1); }

/* ============================================================ */
/*  SECTION SYSTEM */
/* ============================================================ */
.section{ position:relative; padding:clamp(4rem,10vh,8rem) 0; overflow:hidden; }
.section .inner{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.3rem,4vw,2.6rem); position:relative; z-index:2; }
.section--purple{ background:linear-gradient(155deg, var(--band-a) 0%, var(--band-b) 100%); }  /* lamplit rock band */
.section--black{ background:var(--paper); }
.section--panel{ background:var(--paper-2); }
.section-divider{ border-top:1px solid var(--line); }

/* halftone / dot texture overlay (faint limestone speckle) */
.halftone::before{
  content:""; position:absolute; inset:-20% -10%; z-index:1; pointer-events:none;
  background-image:radial-gradient(rgba(233,225,210,.09) 1.1px, transparent 1.3px);
  background-size:18px 18px; transform:skewY(-8deg); opacity:.55;
  -webkit-mask-image:linear-gradient(120deg, #000 0%, transparent 55%);
          mask-image:linear-gradient(120deg, #000 0%, transparent 55%);
}
.halftone--r::before{
  -webkit-mask-image:linear-gradient(240deg, #000 0%, transparent 55%);
          mask-image:linear-gradient(240deg, #000 0%, transparent 55%);
}

/* ---------- eyebrow + dotted separators ---------- */
.eyebrow{
  text-transform:uppercase; letter-spacing:.16em; font-size:.76rem; font-weight:600;
  color:var(--lamp); margin:0 0 1.2rem; font-family:"Archivo",sans-serif;
}
.eyebrow--center{ text-align:center; }
.dotsep{ display:flex; gap:8px; margin:1.4rem 0; }
.dotsep span{ width:5px; height:5px; border-radius:50%; background:var(--green); opacity:.8; }
.dotsep--center{ justify-content:center; }

/* ---------- headings scale (Newsreader: documentary serif) ---------- */
.h-xl, .h-lg, .h-md{ font-family:"Newsreader",Georgia,serif; letter-spacing:0; }
.h-xl{ font-size:clamp(2.3rem,5.4vw,4.4rem); font-weight:400; line-height:1.08; color:var(--heading); }
.h-lg{ font-size:clamp(1.9rem,4vw,3rem); font-weight:400; line-height:1.14; color:var(--heading); }
.h-md{ font-size:clamp(1.45rem,2.8vw,2.1rem); font-weight:400; line-height:1.2; color:var(--heading); }
.lead{ font-size:clamp(1.1rem,1.6vw,1.35rem); color:#d9d0bf; font-weight:400; line-height:1.55; }
.muted{ color:var(--muted); }
.cyan{ color:var(--green); }
.measure{ max-width:62ch; } .measure-sm{ max-width:48ch; }

/* keyword underline links */
.klink{ color:var(--green); border-bottom:2px solid var(--green); padding-bottom:1px; font-weight:700; }
.klink:hover{ background:var(--green); color:var(--on-accent); }

/* ---------- buttons ---------- */
.btn-row{ display:flex; gap:.9rem; flex-wrap:wrap; margin-top:2rem; }
.btnx{
  display:inline-flex; align-items:center; gap:.6rem; cursor:pointer;
  text-transform:uppercase; letter-spacing:.18em; font-size:.74rem; font-weight:700;
  padding:.95rem 1.7rem; transition:.22s ease; border:1px solid var(--green); color:var(--green);
  background:transparent;
}
.btnx:hover{ background:var(--green); color:var(--on-accent); }
.btnx--solid{ background:var(--green); color:var(--on-accent); border-color:var(--green); }
.btnx--solid:hover{ background:var(--green-strong); border-color:var(--green-strong); }
.btnx--ghost{ border-color:rgba(255,255,255,.65); color:#fff; }         /* over hero photo */
.btnx--ghost:hover{ background:#fff; color:var(--heading); border-color:#fff; }

/* ============================================================ */
/*  HERO (stays photo-driven: light text over a scrimmed image) */
/* ============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  background:#05060a; overflow:hidden;
}
.hero__img{ position:absolute; inset:0; background-size:cover; background-position:center 42%; z-index:0;
  transform:scale(1.04); }
.hero__scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,14,8,.5) 0%, rgba(10,14,8,.05) 26%, rgba(10,14,8,.15) 52%, rgba(8,12,6,.85) 100%); }
.hero__inner{ position:relative; z-index:3; max-width:var(--maxw); margin:0 auto; width:100%;
  padding:0 clamp(1.3rem,4vw,2.6rem) clamp(3.2rem,9vh,6rem); }
.hero__inner .eyebrow{ color:#d9ead0; }        /* pale green, readable on photo */
.hero h1{ font-size:clamp(2.5rem,6.6vw,5.4rem); font-weight:900; color:#fff; max-width:17ch;
  text-shadow:0 2px 40px rgba(0,0,0,.4); }
.hero .lead{ margin-top:1.6rem; max-width:46ch; color:#f2f5ec; }
.hero__credit{ position:absolute; right:clamp(1.3rem,4vw,2.6rem); bottom:1rem; z-index:3;
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.scroll-cue{ position:absolute; left:50%; bottom:1.4rem; transform:translateX(-50%); z-index:3;
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.65);
  display:flex; flex-direction:column; align-items:center; gap:.5rem; animation:bob 2.4s ease-in-out infinite; }
.scroll-cue::after{ content:""; width:1px; height:34px; background:linear-gradient(rgba(255,255,255,.85),transparent); }
@keyframes bob{ 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,6px)} }

/* ============================================================ */
/*  IMAGE + TEXT "BAND" (overlapping frame pattern) */
/* ============================================================ */
.band{ display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:0; }
.band--flip{ grid-template-columns:.95fr 1.05fr; }
.band__media{ position:relative; z-index:1; }
.band__media img{ width:100%; height:100%; object-fit:cover; min-height:340px; }
.band__text{ position:relative; z-index:2; }
.frame{ border:1px solid var(--hair); background:rgba(24,19,15,.9); backdrop-filter:blur(3px);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.8); padding:clamp(1.6rem,3vw,2.6rem); }
.band--flip .frame{ margin-left:-14%; }
.band:not(.band--flip) .frame{ margin-right:-14%; }
@media (max-width:820px){
  .band, .band--flip{ grid-template-columns:1fr; }
  .band .frame, .band--flip .frame{ margin:-2.4rem 1rem 0 !important; }
}

/* ============================================================ */
/*  RESEARCH LIST (big numbered entries) */
/* ============================================================ */
.rlist{ margin-top:2.5rem; border-top:1px solid var(--line); }
.ritem{ display:grid; grid-template-columns:auto 1fr auto; gap:clamp(1rem,3vw,2.6rem); align-items:start;
  padding:clamp(1.8rem,3.5vw,2.8rem) 0; border-bottom:1px solid var(--line);
  transition:background .3s; }
.ritem:hover{ background:rgba(201,150,75,.05); }
.ritem__num{ font-family:"Archivo Narrow",sans-serif; font-weight:700; font-size:clamp(1.6rem,3vw,2.4rem);
  color:var(--clay); line-height:1; }
.ritem__body h3{ font-size:clamp(1.3rem,2.2vw,1.8rem); font-weight:800; color:var(--heading); margin:0 0 .6rem; }
.ritem__body p{ color:var(--muted); max-width:60ch; margin:0; }
.ritem__tags{ margin-top:1rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.tag{ font-size:.66rem; text-transform:uppercase; letter-spacing:.13em; font-weight:700; color:var(--green);
  border:1px solid var(--hair); padding:.28rem .6rem; }
.ritem__meta{ font-size:.74rem; color:var(--muted-dim); text-align:right; min-width:8ch; }
@media (max-width:720px){ .ritem{ grid-template-columns:auto 1fr; } .ritem__meta{ display:none; } }

/* ============================================================ */
/*  FEATURE CARDS */
/* ============================================================ */
.cardgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2.5rem; }
@media(max-width:820px){ .cardgrid{ grid-template-columns:1fr; } }
.cardx{ border:1px solid var(--line); padding:1.8rem 1.6rem; background:rgba(233,225,210,.04);
  transition:.25s; }
.cardx:hover{ border-color:var(--lamp); transform:translateY(-4px); box-shadow:0 18px 44px -28px rgba(0,0,0,.7); }
.cardx h3{ font-size:1.15rem; color:var(--heading); margin:.4rem 0 .5rem; font-weight:800; }
.cardx p{ color:var(--muted); font-size:.94rem; margin:0; }

/* ============================================================ */
/*  PHOTOGRAPHY GALLERY (captions sit on the photo -> stay light) */
/* ============================================================ */
/* "Contact Sheet": tight reading-order grid, no frames, captions live in the
   lightbox only. Masonry row-spans (from site-js.html) still keep the odd
   aspect ratios packed without cropping anything. */
.photo-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  grid-auto-rows:10px; gap:7px; margin-top:2rem; }
.photo{ margin:0; grid-row-end:span 24; position:relative; cursor:zoom-in; overflow:hidden; outline:none; }
.photo img{ width:100%; height:auto; display:block; transition:filter .25s ease; }
.photo:hover img, .photo:focus img{ filter:brightness(.8); }
.photo figcaption{ display:none; }  /* species + location appear in the lightbox */
.photo:focus{ box-shadow:0 0 0 2px var(--lamp); }

/* region filter chips above the gallery */
.gfilter{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.8rem; }
.gfilter .gf{ font:600 .76rem/1 "Archivo",sans-serif; letter-spacing:.08em; text-transform:uppercase;
  padding:.6rem .95rem; background:none; border:1px solid var(--hair); color:var(--text); cursor:pointer;
  transition:.2s ease; }
.gfilter .gf:hover{ border-color:var(--lamp); color:var(--heading); }
.gfilter .gf.on{ background:var(--lamp); border-color:var(--lamp); color:var(--on-accent); }
.gcount{ font-size:.78rem; color:var(--muted-dim); letter-spacing:.06em; margin-top:.9rem; }

/* ---------- lightbox (kept dark so photos pop) ---------- */
.lb{ position:fixed; inset:0; z-index:2000; background:rgba(10,8,6,.97); display:none;
  align-items:center; justify-content:center; flex-direction:column; }
.lb.open{ display:flex; }
.lb img{ max-width:92vw; max-height:80vh; object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.lb__cap{ margin-top:1.1rem; text-align:center; color:#fff; }
.lb__cap .lc-common{ font-weight:700; } .lb__cap .lc-sci{ font-style:italic; color:#d9c9a6; margin-left:.4rem; font-family:"Newsreader",Georgia,serif; }
.lb__cap .lc-loc{ display:block; color:rgba(255,255,255,.72); font-size:.82rem; margin-top:.2rem; }
.lb__x, .lb__nav{ position:absolute; color:#fff; background:none; border:1px solid rgba(255,255,255,.35);
  width:46px; height:46px; cursor:pointer; font-size:1.3rem; transition:.2s; display:flex; align-items:center; justify-content:center; }
.lb__x:hover, .lb__nav:hover{ background:var(--green); color:var(--on-accent); border-color:var(--green); }
.lb__x{ top:1.2rem; right:1.2rem; }
.lb__nav{ top:50%; transform:translateY(-50%); }
.lb__prev{ left:1.2rem; } .lb__next{ right:1.2rem; }
/* phones: the photo needs the whole width, so the arrows move off the image
   into a control row along the bottom edge */
@media (max-width:640px){
  .lb img{ max-width:100vw; max-height:64vh; }
  .lb__cap{ padding:0 1.1rem; }
  .lb__nav{ top:auto; bottom:1.1rem; transform:none; }
  .lb__prev{ left:calc(50% - 58px); }
  .lb__next{ right:calc(50% - 58px); }
}

/* ============================================================ */
/*  CV */
/* ============================================================ */
.cv{ max-width:860px; margin:0 auto; }
.cv-head{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:1rem;
  border-bottom:1px solid var(--hair); padding-bottom:1.2rem; margin-bottom:2.2rem; }
.cv-block{ margin:2.4rem 0; }
.cv-block > h3{ font-size:.8rem; text-transform:uppercase; letter-spacing:.2em; color:var(--green);
  border-bottom:1px solid var(--line); padding-bottom:.5rem; margin-bottom:1.2rem; font-weight:700; }
.cv-entry{ display:grid; grid-template-columns:1fr auto; gap:.4rem 1.5rem; margin-bottom:1.1rem; }
.cv-entry .role{ font-weight:700; color:var(--heading); }
.cv-entry .place{ color:var(--muted); font-size:.94rem; }
.cv-entry .when{ color:var(--muted-dim); font-size:.85rem; white-space:nowrap; text-align:right; }
.cv-entry ul{ grid-column:1/-1; margin:.4rem 0 0; padding-left:1.1rem; color:var(--muted); }
@media(max-width:620px){ .cv-entry{ grid-template-columns:1fr; } .cv-entry .when{ text-align:left; } }

/* ---------- publications ---------- */
.pub{ padding:1.3rem 0; border-bottom:1px solid var(--line); display:grid;
  grid-template-columns:auto 1fr; gap:1.3rem; }
.pub__status{ font-size:.66rem; text-transform:uppercase; letter-spacing:.12em; font-weight:700;
  color:var(--green); border:1px solid var(--hair); padding:.28rem .55rem; height:max-content; white-space:nowrap; }
.pub p{ margin:0; color:var(--muted); } .pub .authors b{ color:var(--heading); } .pub .venue{ font-style:italic; color:var(--text); }
@media(max-width:620px){ .pub{ grid-template-columns:1fr; } }

/* ============================================================ */
/*  BLOG LISTING */
/* ============================================================ */
.quarto-listing{ margin-top:2.5rem; }
div.quarto-post{ border-bottom:1px solid var(--line); padding:1.6rem 0; }
div.quarto-post .listing-title{ color:var(--heading); font-weight:800; font-size:1.3rem; }
div.quarto-post .listing-title:hover{ color:var(--green); }
div.quarto-post .listing-subtitle, div.quarto-post .listing-description{ color:var(--muted); }
.listing-date, .listing-category{ color:var(--green) !important; }
.quarto-category{ border-color:var(--hair) !important; color:var(--green) !important; background:transparent !important; }

/* article body (blog posts) readable column */
.post-body, .page-prose{ max-width:720px; margin:0 auto; }
.page-prose h2{ margin-top:2.4rem; }
blockquote{ border-left:3px solid var(--clay); padding-left:1.1rem; color:var(--text); font-style:italic; }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1 !important; transform:none !important; } .scroll-cue{ animation:none; } }

/* ---------- footer (deep green bar) ---------- */
.nav-footer{ border-top:1px solid rgba(255,255,255,.10); color:rgba(247,243,232,.72); font-size:.85rem; }
.nav-footer a{ color:rgba(247,243,232,.9); }
.nav-footer a:hover{ color:#fff; }
/* phones: Quarto's three footer regions stack with big stray gaps —
   collapse them into one tight centered column */
@media (max-width:640px){
  .nav-footer{ display:flex; flex-direction:column; align-items:center; gap:.15rem;
    padding:1.2rem 1rem 1.4rem; }
  .nav-footer .nav-footer-left, .nav-footer .nav-footer-center,
  .nav-footer .nav-footer-right{ flex:none; width:auto; margin:0; text-align:center; order:0; }
  .nav-footer p{ margin:0; }
}

/* ---------- image skeletons (photo gallery + home strip) ----------
   the boxes already have the right shape before a photo streams in (masonry
   spans come from data-ar), so give them a faint limestone wash that breathes
   until the image fades in over it. site-js adds .skel-on to <body>, so
   no-JS visitors just get plain images. */
.photo img, .home-strip .hs img{ transition:opacity .5s ease; }
.skel-on .photo, .skel-on .home-strip .hs{ background:rgba(233,225,210,.05); }
.skel-on .photo::before, .skel-on .home-strip .hs::before{
  content:""; position:absolute; inset:0; background:rgba(233,225,210,.05);
  animation:skel-breathe 1.7s ease-in-out infinite;
}
.skel-on .photo:not(.ld) img, .skel-on .home-strip .hs:not(.ld) img{ opacity:0; }
.skel-on .photo.ld::before, .skel-on .home-strip .hs.ld::before{ content:none; }
@keyframes skel-breathe{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }
@media (prefers-reduced-motion:reduce){
  .skel-on .photo::before, .skel-on .home-strip .hs::before{ animation:none; }
}

/* ---------- "more below" cue (injected by site-js on pages that
   continue past the first screen; fades out on the first scroll) ---------- */
.scroll-cue--page{ position:fixed; left:50%; bottom:1.2rem; transform:translateX(-50%);
  z-index:900; pointer-events:none; color:var(--muted-dim);
  transition:opacity .5s ease; }
.scroll-cue--page::after{ background:linear-gradient(currentColor, transparent); }
.scroll-cue--page.is-gone{ opacity:0; }
/* phones: hug the bottom edge, skip the descender line — the first screen is
   full and the cue must not sit on the copy */
@media (max-width:759px){
  .scroll-cue--page{ bottom:.5rem; }
  .scroll-cue--page::after{ display:none; }
}

/* ============================================================
   NETWORK HERO — plain cream field with a social-network motif
   (replaces the wildlife photo on the home page).
   ============================================================ */
.hero--net{
  display:flex; align-items:center;
  /* fill exactly the first screen below the navbar; --navh is measured from
     the real navbar by site-js.html (57px is only the fallback) */
  min-height:calc(100svh - var(--navh, 57px));
  background:radial-gradient(130% 120% at 78% 10%, #231b15 0%, #191410 55%, #14100e 100%);
}
/* the live network fills the hero as a background layer; the build script
   leaves a gap around .hero__copy so the title sits in clear space */
.hero-net-bg{ position:absolute; inset:0; z-index:1; }
.hero-net-bg svg{ width:100%; height:100%; display:block; }
/* Quarto inserts a title-block header above the hero on pages whose hero
   already serves as the title (home + the field-to-lab page); drop it so the
   hero sits flush under the navbar and the title isn't shown twice */
body:has(.hero--net) #title-block-header,
body:has(.hero--lab) #title-block-header{ display:none; }
.hero--net .eyebrow{ color:var(--lamp); }
.hero--net h1{ color:var(--heading); text-shadow:none;
  font-family:"Newsreader",Georgia,serif; font-weight:300; line-height:1.12;
  font-size:clamp(2.2rem,4.6vw,3.9rem); max-width:21ch; }
.hero--net h1 b{ font-weight:500; color:#fff; }
.hero--net .blood-em{ font-style:italic; font-family:"Newsreader",Georgia,serif; color:#c4525c; } /* fresh blood, lifted for AA on cave */
.hero--net .lead{ color:var(--text); font-size:clamp(1rem,1.3vw,1.15rem); max-width:50ch; margin-top:1.4rem; }

/* text-only hero block + plain text links (no button wall) */
.hero__solo{ position:relative; z-index:3; width:100%; max-width:var(--maxw); margin:0 auto;
  padding:clamp(3rem,8vh,5.5rem) clamp(1.3rem,4vw,2.6rem); }
.hero__copy{ max-width:680px; }   /* measured by the network script as the no-node zone */
.hero-links{ margin-top:2.1rem; display:flex; gap:2rem; flex-wrap:wrap; font-size:.9rem; }
.hero-links a{ color:var(--heading); font-weight:600; border-bottom:1.5px solid var(--lamp);
  padding-bottom:3px; transition:color .2s ease, border-color .2s ease; }
.hero-links a:hover{ color:var(--lamp-strong); border-color:var(--lamp-strong); }

/* caption for the background network */
.hero__cap{ position:absolute; right:clamp(1.3rem,4vw,2.6rem); bottom:.9rem; z-index:2; margin:0;
  font-family:"Newsreader",Georgia,serif; font-style:italic; font-size:.85rem; color:var(--muted-dim);
  text-align:right; max-width:44ch; }

/* the background network fills the whole hero */
#hero-net{ width:100%; height:100%; }
#hero-net svg{ display:block; width:100%; height:100%; overflow:visible; }
@media (max-height:760px){
  .hero--net h1{ font-size:clamp(1.9rem,3.2vw,2.7rem); }
}

/* animated network elements (built by site-js.html)
   nodes = wing-membrane brown roost-mates; pulses = blood */
.hero-net-edge{ stroke:var(--membrane); stroke-opacity:.30; stroke-width:1.1;
  transition:stroke-opacity .3s ease, stroke-width .3s ease, stroke .3s ease; }
.hero-net-edge.lit{ stroke:#c4525c; stroke-opacity:.95; stroke-width:2.2; }
.hero-net-node{ fill:var(--membrane); fill-opacity:.9; }
.hero-net-node.clay{ fill:var(--lamp); fill-opacity:.85; }
.hero-net-pulse{ fill:#c4525c; filter:drop-shadow(0 0 5px rgba(156,43,51,.8)); }
.hero-net-ring{ fill:none; stroke:#c4525c; stroke-width:2; opacity:.75;
  transform-box:fill-box; transform-origin:center;
  transition:transform .6s ease-out, opacity .6s ease-out; }

/* research hero: bond strength decays with depth (classes set by site-js) */
.hero-net-edge.e-strong{ stroke-opacity:.55; stroke-width:2; }
.hero-net-edge.e-frail{ stroke-opacity:.22; stroke-dasharray:3 6; }
.hero-net-edge.e-lost{ stroke-opacity:.12; stroke-dasharray:2 9; }
.hero-net-node.dim{ fill-opacity:.45; }
/* research hero doesn't need the full first screen */
.hero--short{ min-height:calc(86svh - var(--navh, 57px)); }
/* centered title so the falling dyads mirror on both sides */
.hero--centered .hero__copy{ margin:0 auto; text-align:center; }
/* phones can't flank the title, so the research hero keeps a slim band above
   it (everything still fits the first screen) where one bat sits parked and a
   second passes by, bonding at the closest point */
@media (max-width:759px){
  body:has(#research-net) .hero--centered .hero__copy{ margin-top:30px; }
  /* home only: narrow the centered copy so the colony network can run down
     both gutters beside the text (site-js plants rails there); the research
     copy keeps its full width so everything fits the first screen */
  body:has(#hero-net) .hero__copy{ max-width:76vw; }
  /* the caption fights the copy for the little space there is — drop it */
  .hero__cap{ display:none; }
  /* hero links: one tight block instead of a sprawling row */
  .hero-links{ margin-top:1.5rem; gap:.8rem 1.2rem; font-size:.84rem; }
}
.hero--centered h1{ margin-left:auto; margin-right:auto; }
.hero--centered .lead, .hero--centered .hero__copy .muted{ margin-left:auto; margin-right:auto; max-width:56ch; }
.hero--centered .hero-links{ justify-content:center; }

/* ============================================================
   DYAD ANIMATION — food sharing, defection & responsiveness in a
   non-kin vs. kin pair (research: interdependence). Built by site-js.html.
   ============================================================ */
.dyad-scene{ --defect:#c3402f; margin-top:3rem; }  /* alarm red, hotter than blood */
.dyad-scene__head{ margin-bottom:1.3rem; }
.dyad-scene__head .eyebrow{ color:var(--clay); }
.dyad-scene__head .muted{ margin-top:.5rem; }

.dyad-legend{ display:flex; flex-wrap:wrap; gap:1.3rem; margin-bottom:1.3rem;
  font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.dyad-key{ display:inline-flex; align-items:center; gap:.5rem; }
.dyad-dot{ display:inline-block; width:11px; height:11px; border-radius:50%; }
.dyad-dot--share{ background:#c4525c; }
.dyad-dot--groom{ background:#96b57c; }
.dyad-dot--defect{ background:var(--defect); }
.dyad-dot--bond{ width:17px; height:4px; border-radius:2px; background:var(--membrane);
  position:relative; top:-2px; }  /* optically center the bar against the text */

/* per-project visual, embedded under a research list item */
.pviz{ margin-top:1.8rem; max-width:680px; }
.pviz .dyad-legend{ margin-bottom:1rem; }
.pviz__cap{ font-family:"Newsreader",Georgia,serif; font-style:italic; font-size:.88rem;
  color:var(--muted-dim); margin-top:.7rem; }
.pviz video{ border:1px solid var(--line); }

.dyad-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,3vw,2.2rem); }
@media (max-width:680px){ .dyad-grid{ grid-template-columns:1fr; } }
.dyad{ margin:0; }
.dyad__card{ background:rgba(233,225,210,.05); border:1px solid var(--hair); border-radius:14px;
  overflow:hidden; display:flex; flex-direction:column; }
.dyad__label{ margin:0; text-align:center; font-weight:700; font-size:1.05rem; letter-spacing:.005em;
  color:var(--heading); padding:.8rem 1rem .72rem; background:rgba(201,150,75,.08);
  border-bottom:1px solid var(--hair); }
.dyad__viz{ overflow:hidden; }
.dyad-svg{ display:block; width:100%; height:auto; }
.dyad__status{ margin:auto 0 0; text-align:center; padding:.35rem 1rem 1rem;
  font-size:.85rem; color:var(--muted); min-height:1.2em; transition:color .3s ease; }
.dyad__status.is-defect{ color:var(--defect); font-weight:600; }
.dyad__status.is-withdraw{ color:var(--muted-dim); }
.dyad__status.is-hold{ color:var(--green-strong); font-weight:600; }

/* svg primitives — bats are membrane brown; the shared meal is blood */
.dyad-edge{ stroke:var(--membrane); stroke-opacity:.55; stroke-width:5; stroke-linecap:round;
  transition:stroke .5s ease, stroke-opacity .5s ease, stroke-width .5s ease; }
.dyad-edge.is-lit{ stroke:#c4525c; stroke-opacity:.95; }
.dyad-edge.is-warn{ stroke:var(--defect); stroke-opacity:.9; }
.dyad-edge.is-weak{ stroke:var(--muted-dim); stroke-opacity:.28; stroke-width:2; }
.dyad-edge.is-strong{ stroke:var(--lamp); stroke-opacity:.85; stroke-width:6; }
.dyad-node{ fill:var(--membrane); transition:fill .3s ease; }
.dyad-node.is-defect{ fill:var(--defect); }
.dyad-node-label{ fill:var(--muted); font-size:11px; letter-spacing:.05em;
  text-transform:uppercase; text-anchor:middle; font-weight:600; }
.dyad-pulse{ fill:#c4525c; filter:drop-shadow(0 0 4px rgba(156,43,51,.6)); }
.dyad-defect-x line{ stroke:#fff; stroke-width:3; stroke-linecap:round; }
.dyad-ring{ fill:none; stroke:#c4525c; stroke-width:2.5; opacity:.8;
  transform-box:fill-box; transform-origin:center;
  transition:transform .6s ease-out, opacity .6s ease-out; }

/* ============================================================ */
/*  FAQ accordion (About page) */
/* ============================================================ */
.faqx{ border:1px solid var(--line); background:rgba(233,225,210,.04); margin-bottom:.7rem; }
.faqx summary{ cursor:pointer; padding:1rem 1.3rem; font-weight:700; color:var(--heading); list-style:none; }
.faqx summary::-webkit-details-marker{ display:none; }
.faqx summary::after{ content:"+"; float:right; color:var(--muted-dim); font-weight:700; }
.faqx[open] summary::after{ content:"–"; }
.faqx-body{ padding:0 1.3rem 1.1rem; color:var(--muted); max-width:72ch; }