/* =========================================================================
   elevate.css — v4 "wow" layer over style.css: atmosphere, motion, dark mode.
   Loaded AFTER style.css so it can retune tokens and add depth without
   touching the stable base. All motion respects prefers-reduced-motion.
   ========================================================================= */

/* ---------- dark theme tokens ---------- */
@media (prefers-color-scheme: dark){
  :root{
    --paper:#10141a; --paper-2:#161c24; --paper-3:#1c232c;
    --ink:#f0f1ee; --ink-2:#c6ccd3; --muted:#98a2ad; --faint:#8d97a3;
    --line:#232b35; --line-2:#323b47; --ctl:#626e7f;
    --acc:#3cbfa4; --acc-deep:#2ea88f; --acc-bright:#5ad9c0;
    --acc-wash:#0f261f; --acc-ring:#3cbfa455;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 40px -16px rgba(0,0,0,.7);
    --shadow-soft:0 1px 2px rgba(0,0,0,.35),0 8px 22px -14px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --paper:#10141a; --paper-2:#161c24; --paper-3:#1c232c;
  --ink:#f0f1ee; --ink-2:#c6ccd3; --muted:#98a2ad; --faint:#8d97a3;
  --line:#232b35; --line-2:#323b47; --ctl:#626e7f;
  --acc:#3cbfa4; --acc-deep:#2ea88f; --acc-bright:#5ad9c0;
  --acc-wash:#0f261f; --acc-ring:#3cbfa455;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 40px -16px rgba(0,0,0,.7);
  --shadow-soft:0 1px 2px rgba(0,0,0,.35),0 8px 22px -14px rgba(0,0,0,.6);
}
:root[data-theme="light"]{
  --paper:#f6f2ea; --paper-2:#fbf8f2; --paper-3:#fffdf8;
  --ink:#191d24; --ink-2:#3c424b; --muted:#515a66; --faint:#555e6a;
  --line:#e2ddd0; --line-2:#d6d0c0;
  --acc:#0e5f51; --acc-deep:#0a4a3f; --acc-bright:#12796a;
  --acc-wash:#e6efe9; --acc-ring:#0e5f5133;
  --shadow:0 1px 2px rgba(24,20,10,.05),0 10px 34px -14px rgba(24,20,10,.14);
  --shadow-soft:0 1px 2px rgba(24,20,10,.04),0 6px 18px -12px rgba(24,20,10,.12);
}
html{background:var(--paper)}
body,.site-head,.card,.btn,.nav-toggle,.hero::after{
  transition:background-color .5s ease,border-color .5s ease,color .5s ease}

/* ---------- atmosphere: fine paper grain + viridian hero glow ---------- */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
:root[data-theme="dark"] body::before{mix-blend-mode:overlay;opacity:.05}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body::before{mix-blend-mode:overlay;opacity:.05}}
/* keep .site-head's base position:sticky (z-index:40 already clears the z-index:1 grain);
   only main + footer need the relative lift above the atmosphere layer */
main, .site-foot{position:relative;z-index:2}
.hero{isolation:isolate}
.hero::after{
  content:"";position:absolute;z-index:-1;top:50%;right:6%;width:min(60vw,720px);height:min(60vw,720px);
  transform:translateY(-50%);pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--acc) 24%,transparent),transparent 60%);
  opacity:.9;filter:blur(4px);
}
:root[data-theme="dark"] .hero::after{opacity:.7}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero::after{opacity:.7}}
@media(max-width:860px){.hero::after{right:50%;transform:translate(50%,-30%);top:32%;width:90vw;height:90vw;opacity:.5}}

/* ---------- scroll-reveal choreography (gated on .js so no-JS shows all) ---------- */
@media (prefers-reduced-motion:no-preference){
  html.js .io{opacity:0;transform:translateY(22px);
    transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
  html.js .io.in{opacity:1;transform:none}
}

/* ---------- micro-interactions ---------- */
/* animated underline for body/footer/pub links */
main p a:not(.btn):not(.email-lg):not(.doi), .foot-nav a{
  background-image:linear-gradient(var(--acc),var(--acc));
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .3s ease,color .2s ease;text-decoration:none;padding-bottom:1px}
main p a:not(.btn):not(.email-lg):not(.doi):hover, .foot-nav a:hover{background-size:100% 1px}
/* cards: viridian top-edge on hover */
.card{position:relative;overflow:hidden}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--acc),var(--acc-bright));
  transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.card:hover::before{transform:scaleX(1)}
/* nav underline grow */
.navlinks a{--u:0}
.navlinks a::before{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:100%;
  background:var(--acc);transform:scaleX(var(--u));transform-origin:left;
  transition:transform .28s cubic-bezier(.2,.7,.2,1);border-radius:2px}
@media(min-width:901px){.navlinks a:hover{--u:1}.navlinks a.active{--u:1}.navlinks a.active::after{display:none}}
/* tag pills lift */
.tag-pill{transition:background .2s,border-color .2s,transform .2s}
.tag-pill:hover{transform:translateY(-2px);border-color:var(--acc)}
/* button sheen */
.btn-1{position:relative;overflow:hidden}
.btn-1::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .6s ease}
.btn-1:hover::after{transform:translateX(120%)}

/* ---------- living emblem ---------- */
@media (prefers-reduced-motion:no-preference){
  /* sensor-core pulse (the innermost filled dot) */
  .hero-emblem svg > g > circle:last-child{transform-box:fill-box;transform-origin:center;
    animation:pulse 3.6s ease-in-out infinite 1.2s}
  @keyframes pulse{0%,100%{opacity:.9}50%{opacity:.4}}
}
.hero-emblem svg{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
/* heavier emblem rings so the signature mark leads in the default light theme */
.hero-emblem svg circle:not([stroke]){stroke-width:2}
.hero-emblem svg line{stroke-width:1.7}
:root[data-theme="dark"] .hero-emblem svg circle:not([stroke]){stroke-width:1.5}
:root[data-theme="dark"] .hero-emblem svg line{stroke-width:1.3}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero-emblem svg circle:not([stroke]){stroke-width:1.5}
  :root:not([data-theme="light"]) .hero-emblem svg line{stroke-width:1.3}}

/* ---------- theme toggle ---------- */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border:1px solid var(--ctl);border-radius:9px;background:none;
  color:var(--muted);cursor:pointer;transition:.2s;flex:none}
.theme-toggle:hover{color:var(--acc-deep);border-color:var(--acc)}
.theme-toggle svg{width:17px;height:17px;display:block}
.theme-toggle .moon{display:block}.theme-toggle .sun{display:none}
:root[data-theme="dark"] .theme-toggle .moon{display:none}
:root[data-theme="dark"] .theme-toggle .sun{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .moon{display:none}
  :root:not([data-theme="light"]) .theme-toggle .sun{display:block}
}
.nav-right{display:flex;align-items:center;gap:1rem}
@media(max-width:900px){.nav-right{gap:.6rem}}

/* ---------- bands: theme-independent dark punctuation ---------- */
.band-ink{background:#0e1218}
.band-acc{background:#0b3f36}
/* varied closer: heading left, CTA right — breaks the repeated centered-band pattern */
.band-split .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.3rem 2.5rem;flex-wrap:wrap;text-align:left;max-width:var(--wrap)}
.band-split .cta-h{flex:1 1 22ch;min-width:min(100%,20ch)}
.band-split h2{margin:0!important}
.band-split .eyebrow{justify-content:flex-start!important;margin-bottom:.7rem}
.band-split .btn{flex:none}
/* dark mode: band-ink can't go darker than the page (near-black on near-black reads as
   invisible), so render the closing punctuation as a raised, edge-defined panel a few tones
   up — the CTA still lands as a deliberate full-bleed moment, distinct from the green band-acc. */
:root[data-theme="dark"] .band-acc{border-block:1px solid var(--line-2)}
:root[data-theme="dark"] .band-ink{
  background:linear-gradient(180deg,#2f3a49,#1a232f);
  border-block:1px solid #3d4a58;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 -18px 42px -24px rgba(0,0,0,.55),0 18px 42px -24px rgba(0,0,0,.5);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .band-acc{border-block:1px solid var(--line-2)}
  :root:not([data-theme="light"]) .band-ink{
    background:linear-gradient(180deg,#2f3a49,#1a232f);
    border-block:1px solid #3d4a58;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 -18px 42px -24px rgba(0,0,0,.55),0 18px 42px -24px rgba(0,0,0,.5);
  }
}

/* dark-mode: lift cards, soften sticky header */
:root[data-theme="dark"] .card{background:var(--paper-2)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .card{background:var(--paper-2)}}
:root[data-theme="dark"] .site-head{background:color-mix(in srgb,var(--paper) 82%,transparent)}
/* dark: the filled primary CTA — white on the retuned mid-teal --acc-deep is only 2.78:1 (fails AA).
   Invert to a bright-teal fill + near-black text (~10.9:1), like the in-band buttons. Scoped to .hero so
   the closing-band .btn-1s (which already invert to light-bg/dark-text) are untouched. */
:root[data-theme="dark"] .hero .btn-1{background:var(--acc-bright);color:#06130f}
:root[data-theme="dark"] .hero .btn-1:hover{background:#7be9d3;color:#06130f}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero .btn-1{background:var(--acc-bright);color:#06130f}
  :root:not([data-theme="light"]) .hero .btn-1:hover{background:#7be9d3;color:#06130f}
}
/* dark: selected text — #fff on the bright-teal --acc is only 2.29:1; near-black text -> ~9:1
   (mirrors the .btn-1 dark inversion; light ::selection stays #fff on deep viridian at 7.6:1) */
:root[data-theme="dark"] ::selection{background:var(--acc);color:#06130f}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) ::selection{background:var(--acc);color:#06130f}}

/* ---------- portrait ---------- */
.portrait{border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);
  background:var(--paper-2);position:relative;line-height:0}
.portrait img{display:block;width:100%;height:auto}
.portrait figcaption{line-height:1.5;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);padding:.7rem .9rem;border-top:1px solid var(--line);
  background:var(--paper-3);display:flex;justify-content:space-between;gap:1rem}
.portrait figcaption b{color:var(--acc);font-weight:500}
.portrait-sm{max-width:230px}

/* ---------- scholarly identity links (ORCID etc.) ---------- */
.idlinks{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center;
  font-family:var(--mono);font-size:.82rem;letter-spacing:.01em;margin-top:1.2rem}
.idlinks a{display:inline-flex;align-items:center;gap:.5rem;color:var(--muted);padding:.4rem 0}
.idlinks a:hover{color:var(--acc-deep);text-decoration:none}
.idlinks a:hover .orcid-id{color:var(--acc-bright)}
.idlinks .orcid{width:17px;height:17px;flex:none;display:block}
.idlinks .cvico{width:15px;height:15px;flex:none}
.orcid-id{color:var(--acc-deep);font-weight:500;transition:color .2s}
/* ORCID mark in the site's viridian instead of its brand chartreuse, to hold the palette */
.orcid circle{fill:var(--acc-deep)}
.orcid path{fill:var(--paper-3)}
/* small science schematics that give the "Fig 0N" legends a real referent */
.sci-fig{width:250px;max-width:74%;height:auto;display:block;margin:.5rem 0 1.4rem}
.sci-fig text,.hero-emblem svg text{fill:var(--muted);font-family:'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.01em;opacity:.9}
/* the in-development tool rendered as a deliberate full-width "what's next" strip (not an orphaned 5th card) */
.tool-next{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:.5rem 2.8rem;align-items:center}
.tool-next .tool-h{margin:0}
@media(max-width:640px){.tool-next{grid-template-columns:minmax(0,1fr);gap:.7rem}}
/* small phones: declutter + enlarge the label-dense home-hero figure so every label stays crisp */
@media(max-width:480px){
  .hero-emblem:not(.hero-emblem-sm) svg{max-width:360px}
  .hero-emblem .hero-field{display:none}
}
.foot-ids{display:flex;gap:1.5rem;flex-wrap:wrap;align-items:center;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.04em;margin-top:1rem}
.foot-ids a{display:inline-flex;align-items:center;gap:.45rem;color:var(--faint)}
.foot-ids a:hover{color:var(--acc-deep);text-decoration:none}
.foot-ids a + a{border-left:1px solid var(--line-2);padding-left:1.5rem}
.foot-ids .orcid{width:14px;height:14px}

/* ---------- CV page ---------- */
.cv-lead{color:var(--ink-2);font-size:1.1rem;max-width:70ch;margin-top:1.2rem}
.cv-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1.3rem;font-family:var(--mono);
  font-size:.8rem;color:var(--muted)}
.cv-meta a{color:var(--muted)}.cv-meta a:hover{color:var(--acc-deep);text-decoration:none}
.cv-actions{margin-top:1.7rem;display:flex;gap:.8rem;flex-wrap:wrap}
.cv-sec{padding:clamp(1.8rem,3.5vw,2.8rem) 0}
.cv-entry{display:grid;grid-template-columns:1fr auto;gap:.15rem 1.5rem;padding:.95rem 0;border-top:1px solid var(--line)}
.cv-entry:first-of-type{border-top:none}
.cv-entry .t{font-family:var(--display);font-weight:600;color:var(--ink);font-size:1.1rem;line-height:1.25}
.cv-entry .sub{color:var(--ink-2);font-size:1rem}
.cv-entry .place{color:var(--muted);font-size:.92rem;font-family:var(--mono);letter-spacing:.01em}
.cv-entry .when{font-family:var(--mono);font-size:.78rem;color:var(--muted);text-align:right;white-space:nowrap;padding-top:.2rem}
.cv-entry .desc{grid-column:1/-1;color:var(--ink-2);font-size:.97rem;margin-top:.35rem;max-width:80ch}
@media(max-width:640px){.cv-entry{grid-template-columns:1fr}.cv-entry .when{text-align:left;padding-top:.2rem}}
.cv-pubs{counter-reset:cvp;margin-top:.4rem}
.cv-pub{padding:.7rem 0 .7rem 2.2rem;border-top:1px solid var(--line);font-size:.95rem;color:var(--ink-2);position:relative;line-height:1.5}
.cv-pub:first-child{border-top:none}
.cv-pub::before{counter-increment:cvp;content:counter(cvp);position:absolute;left:0;top:.7rem;font-family:var(--mono);font-size:.78rem;color:var(--faint)}
.cv-pub .me{color:var(--acc-deep);font-weight:600}
.cv-pub em{color:var(--ink);font-style:italic}
.cv-pub a{color:var(--acc)}
.cv-grid2{display:grid;grid-template-columns:1fr 1fr;gap:.2rem 2.5rem}
@media(max-width:640px){.cv-grid2{grid-template-columns:1fr}}
@media print{
  html.js .io,.io,.reveal{opacity:1!important;transform:none!important}   /* never hide content in print */
  .site-head,.site-foot,.cv-actions,.theme-toggle,.nav-toggle,.skip,.cv-toc{display:none!important}
  .cv-body{display:block}   /* drop the screen-only 2-col grid so the CV prints full-width */
  .band-ink,.band-acc,.hero-emblem{display:none!important}
  body::before,.hero::after{display:none!important}
  :root{--paper:#fff;--paper-2:#fff;--paper-3:#fff;--ink:#111;--ink-2:#222;--muted:#555;--faint:#6b6b6b;--line:#ccc}
  body{background:#fff;font-size:10.5pt}
  .wrap{max-width:100%;padding:0}
  .hero{padding:.3rem 0 1rem!important;border:none!important;overflow:visible}
  .cv-lead{font-size:11pt!important}
  .cv-sec{padding:.6rem 0}
  .cv-sec .eyebrow{margin-bottom:.5rem}
  .cv-entry,.cv-pub,.cv-grid2 .cv-entry{break-inside:avoid}
  h1{font-size:24pt!important}
  a{color:#111;text-decoration:none}
  h1,h2,h3{color:#000}
}