@import url("../fonts/fonts.css");

/* ============================================================
   LBN — Laboratory of Bio-Physio Sensors & Nanobioengineering
   Design system
   ============================================================ */

:root{
  /* ---- type ---- */
  --font-display:"Oswald", "Helvetica Neue", Arial, sans-serif;
  --font-body:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif:"Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ---- palette: dark (default) ---- */
  --ink:#05070b;
  --bg:#070910;
  --bg-2:#0b0e17;
  --bg-3:#111524;
  --surface:rgba(255,255,255,.035);
  --surface-2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.17);
  --fg:#eef1f8;
  --fg-2:#b3bccf;
  --fg-3:#7d879e;
  --accent:#4f9bff;
  --accent-2:#25e0d0;
  --accent-3:#a78bfa;
  --warn:#ffb454;
  --glow:rgba(79,155,255,.42);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 40px -12px rgba(0,0,0,.75);
  --shadow-lg:0 2px 4px rgba(0,0,0,.5), 0 40px 80px -24px rgba(0,0,0,.85);
  --ring:0 0 0 1px rgba(255,255,255,.09);
  --grid-line:rgba(255,255,255,.045);
  --photo-filter:saturate(1.02) contrast(1.02);
  --scrim:linear-gradient(180deg,rgba(7,9,16,0) 0%,rgba(7,9,16,.72) 60%,rgba(7,9,16,.95) 100%);

  /* ---- metrics ---- */
  --page:1240px;
  --page-wide:1480px;
  --gut:clamp(20px,4.4vw,64px);
  --r-xs:6px; --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:34px;
  --nav-h:70px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --dur:.62s;
}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 24px);
  color-scheme:light;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv05" 1,"ss01" 1;
  overflow-x:hidden;
}

img,svg,video{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:var(--accent);color:#fff}

/* ---------- typography ---------- */
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.028em;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.6rem,6.4vw,5.2rem)}
h2{font-size:clamp(1.9rem,3.9vw,3.1rem)}
h3{font-size:clamp(1.22rem,2vw,1.62rem);letter-spacing:-.02em}
h4{font-size:1.02rem;letter-spacing:-.01em;font-weight:600}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.eyebrow{
  font-family:var(--font-display);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--accent);
  display:flex;
  align-items:center;
  gap:.7em;
  margin:0 0 1.1rem;
}
.eyebrow::before{
  content:"";width:26px;height:1px;flex:none;
  background:linear-gradient(90deg,var(--accent),transparent);
}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{content:"";width:26px;height:1px;background:linear-gradient(270deg,var(--accent),transparent)}

.lede{font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.65;color:var(--fg-2);max-width:66ch;text-wrap:pretty}
.muted{color:var(--fg-3)}
.serif{font-family:var(--font-serif);font-weight:400;letter-spacing:0}
.mono{font-family:var(--font-mono);font-size:.82em;letter-spacing:-.01em}

/* ---------- layout ---------- */
.wrap{width:min(100% - var(--gut)*2, var(--page));margin-inline:auto}
.wrap-wide{width:min(100% - var(--gut)*2, var(--page-wide));margin-inline:auto}
.section{padding-block:clamp(64px,9vw,132px);position:relative}
.section-head{max-width:72ch;margin-bottom:clamp(34px,4.4vw,60px)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head h2 + .lede{margin-top:1.1rem}

.grid{display:grid;gap:clamp(16px,2vw,26px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.auto-260{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.auto-300{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.auto-340{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

.rule{height:1px;background:var(--line);border:0;margin:0}

/* fine technical grid backdrop */
.grid-bg{position:relative;isolation:isolate}
.grid-bg::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 25%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 25%,transparent 78%);
}

/* ============================================================
   Nav
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto;z-index:120;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .45s var(--ease),backdrop-filter .45s var(--ease),border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:color-mix(in oklab,var(--bg) 82%,transparent);
  backdrop-filter:saturate(1.6) blur(18px);
  -webkit-backdrop-filter:saturate(1.6) blur(18px);
  border-bottom-color:var(--line);
}
.nav-inner{width:min(100% - var(--gut)*2,var(--page-wide));margin-inline:auto;display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center;gap:12px;flex:none;color:var(--fg)}
.brand svg{height:30px;width:auto;transition:transform .5s var(--ease)}
.brand:hover svg{transform:translateY(-1px) scale(1.02)}
.brand-txt{display:none;line-height:1.12}
.brand-txt b{font-family:var(--font-display);font-size:.79rem;font-weight:600;letter-spacing:.02em;display:block}
.brand-txt span{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
@media(min-width:1120px){.brand-txt{display:block}}

.nav-links{display:none;align-items:center;gap:2px;margin-left:auto}
@media(min-width:1000px){.nav-links{display:flex}}
.nav-links a{
  position:relative;padding:8px 12px;border-radius:var(--r-xs);
  font-size:.845rem;font-weight:500;color:var(--fg-2);
  transition:color .3s var(--ease),background .3s var(--ease);
}
.nav-links a:hover{color:var(--fg);background:var(--surface)}
.nav-links a.active{color:var(--fg)}
.nav-links a.active::after{
  content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
}
.nav-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
@media(min-width:1000px){.nav-actions{margin-left:0}}

.icon-btn{
  width:38px;height:38px;display:grid;place-items:center;flex:none;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  cursor:pointer;transition:.3s var(--ease);
}
.icon-btn:hover{background:var(--surface-2);border-color:var(--line-2);transform:translateY(-1px)}
.icon-btn svg{width:17px;height:17px}
.menu-btn{display:grid}
@media(min-width:1000px){.menu-btn{display:none}}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:130;display:grid;
  background:color-mix(in oklab,var(--bg) 96%,transparent);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
  overflow-y:auto;
}
.drawer.open{opacity:1;visibility:visible}
.drawer-inner{width:min(100% - 40px,520px);margin:auto;padding:96px 0 56px}
.drawer a{
  display:flex;align-items:baseline;gap:14px;padding:13px 4px;border-bottom:1px solid var(--line);
  font-family:var(--font-display);font-size:1.42rem;font-weight:500;letter-spacing:-.02em;
  opacity:0;transform:translateY(14px);
}
.drawer.open a{animation:drawerIn .6s var(--ease) forwards;animation-delay:calc(var(--i)*38ms + 90ms)}
.drawer a i{font-style:normal;font-family:var(--font-mono);font-size:.66rem;color:var(--accent);letter-spacing:.1em}
@keyframes drawerIn{to{opacity:1;transform:none}}
.drawer-close{position:absolute;top:16px;right:max(20px,var(--gut))}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  --bh:0;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:.82em 1.4em;border-radius:100px;border:1px solid transparent;
  font-family:var(--font-display);font-size:.87rem;font-weight:600;letter-spacing:-.005em;
  cursor:pointer;position:relative;overflow:hidden;isolation:isolate;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease),color .35s var(--ease);
}
.btn svg{width:15px;height:15px;transition:transform .4s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 8px 26px -10px var(--glow)}
.btn-primary:hover{box-shadow:0 14px 38px -10px var(--glow)}
.btn-primary::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:linear-gradient(135deg,var(--accent-2),var(--accent));
  transition:opacity .45s var(--ease);
}
.btn-primary:hover::before{opacity:1}
.btn-ghost{background:var(--surface);border-color:var(--line);color:var(--fg)}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--line-2)}
.btn-line{background:transparent;border-color:var(--line-2);color:var(--fg)}
.btn-line:hover{background:var(--surface)}
.btn:hover svg.arr{transform:translateX(3px)}
.btn-sm{padding:.6em 1.05em;font-size:.79rem}

/* text link with animated underline */
.tlink{
  display:inline-flex;align-items:center;gap:.45em;
  font-family:var(--font-display);font-weight:600;font-size:.87rem;color:var(--accent);
  position:relative;
}
.tlink::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease);
}
.tlink:hover::after{transform:scaleX(1);transform-origin:left}
.tlink svg{width:13px;height:13px;transition:transform .4s var(--ease)}
.tlink:hover svg{transform:translateX(3px)}

/* ============================================================
   Cards + surfaces
   ============================================================ */
.card{
  position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:transform .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease);
}
.card:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:var(--shadow)}
.card-pad{padding:clamp(18px,2.1vw,26px)}

/* spotlight follows pointer */
.spot{position:relative}
.spot::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .45s var(--ease);
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),color-mix(in oklab,var(--accent) 16%,transparent),transparent 62%);
}
.spot:hover::before{opacity:1}

.tag{
  display:inline-flex;align-items:center;gap:.4em;
  padding:.3em .68em;border-radius:100px;border:1px solid var(--line);
  background:var(--surface);font-size:.7rem;font-weight:600;letter-spacing:.04em;
  color:var(--fg-2);font-family:var(--font-display);white-space:nowrap;
}
.tag-accent{color:var(--accent);border-color:color-mix(in oklab,var(--accent) 34%,transparent);background:color-mix(in oklab,var(--accent) 11%,transparent)}
.tag-warn{color:var(--warn);border-color:color-mix(in oklab,var(--warn) 34%,transparent);background:color-mix(in oklab,var(--warn) 11%,transparent)}

/* ============================================================
   Reveal on scroll
   ============================================================ */
[data-rv]{opacity:0;will-change:opacity,transform}
[data-rv="up"]{transform:translate3d(0,26px,0)}
[data-rv="fade"]{transform:none}
[data-rv="left"]{transform:translate3d(-26px,0,0)}
[data-rv="right"]{transform:translate3d(26px,0,0)}
[data-rv="zoom"]{transform:scale(.965)}
[data-rv].in{
  opacity:1;transform:none;
  transition:opacity .85s var(--ease),transform .95s var(--ease);
  transition-delay:var(--d,0ms);
}
.stagger > *{opacity:0;transform:translate3d(0,22px,0)}
.stagger.in > *{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .9s var(--ease)}
.stagger.in > *:nth-child(1){transition-delay:.02s}
.stagger.in > *:nth-child(2){transition-delay:.08s}
.stagger.in > *:nth-child(3){transition-delay:.14s}
.stagger.in > *:nth-child(4){transition-delay:.2s}
.stagger.in > *:nth-child(5){transition-delay:.26s}
.stagger.in > *:nth-child(6){transition-delay:.32s}
.stagger.in > *:nth-child(7){transition-delay:.38s}
.stagger.in > *:nth-child(8){transition-delay:.44s}
.stagger.in > *:nth-child(n+9){transition-delay:.5s}

/* line-by-line headline reveal.

   overflow:hidden is the mask each line slides up through, and overflow clips at the
   PADDING box — which is the line box, 1.06em tall at the heading line-height. Oswald
   puts its ink bottom 1.18em below the line-box top, so the mask was shearing ~0.12em
   off the foot of every heading: the g in "Sensing", the p in "spark.", the comma in
   "Sensing technology,". Nothing about the leading was wrong; the mask was just drawn
   to the wrong box.

   So pad the mask down past the deepest the face can draw (Oswald's declared descent
   bottoms out at 1.27em, i.e. 0.21em below the line box) and take the same amount back
   with a negative margin, leaving the leading and the h1's height exactly as they were.
   The start transform has to carry the pad too — translateY(105%) is 105% of the line
   box alone, which no longer reaches the bottom of the padded mask, and the line would
   sit in the pad as a visible sliver before its turn to animate. */
.split{--split-pad:.22em;display:block;overflow:hidden;padding-bottom:var(--split-pad);margin-bottom:calc(-1*var(--split-pad))}
.split > span{display:block;transform:translateY(calc(105% + var(--split-pad)));transition:transform 1.05s var(--ease);transition-delay:var(--d,0ms)}
.split.in > span{transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  [data-rv],.stagger > *{opacity:1 !important;transform:none !important}
  .split > span{transform:none !important}
}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;min-height:min(100svh,940px);display:flex;align-items:center;
  padding-top:calc(var(--nav-h) + 40px);padding-bottom:clamp(56px,7vw,96px);
  overflow:hidden;isolation:isolate;
}
#field{position:absolute;inset:0;z-index:-2;width:100%;height:100%}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 70% at 12% 8%, color-mix(in oklab,var(--accent) 15%,transparent), transparent 58%),
    radial-gradient(90% 60% at 88% 100%, color-mix(in oklab,var(--accent-2) 12%,transparent), transparent 60%),
    linear-gradient(180deg,transparent 55%, var(--bg) 100%);
}
.hero-grid{display:grid;gap:clamp(34px,5vw,72px);grid-template-columns:1fr;align-items:center}
@media(min-width:1000px){.hero-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}}

.hero h1{letter-spacing:-.04em}
.hero h1 .thin{font-weight:400;color:var(--fg-2)}
.hero h1 em{
  font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-.01em;
  background:linear-gradient(100deg,var(--accent),var(--accent-2) 55%,var(--accent-3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-right:.06em;
}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

.hero-card{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-lg);
  background:var(--bg-2);
}
.hero-card img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:var(--photo-filter)}
.hero-card figcaption{
  position:absolute;inset:auto 0 0;padding:26px 22px 20px;
  background:var(--scrim);
}
.hero-card figcaption b{display:block;font-family:var(--font-display);font-size:1.02rem;letter-spacing:-.02em}
.hero-card figcaption span{font-size:.78rem;color:var(--fg-2)}

/* scroll cue */
.cue{
  position:absolute;left:50%;bottom:24px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;z-index:2;
  font-family:var(--font-display);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-3);
}
.cue i{width:1px;height:38px;background:linear-gradient(180deg,var(--accent),transparent);animation:cue 2.4s var(--ease-io) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============================================================
   Stat counters
   ============================================================ */
.stats{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stat{background:var(--bg-2);padding:clamp(18px,2.3vw,30px);position:relative;overflow:hidden}
.stat b{
  display:block;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.85rem,4vw,2.9rem);line-height:1;letter-spacing:-.045em;
  background:linear-gradient(160deg,var(--fg),color-mix(in oklab,var(--accent) 62%,var(--fg)));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;
}
.stat span{display:block;margin-top:.5em;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-3);font-weight:600}
.stat::after{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:linear-gradient(90deg,var(--accent),transparent);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.stat.in::after{transform:scaleX(1)}

/* ============================================================
   People
   ============================================================ */
.person{display:flex;flex-direction:column}
.person-ph{
  position:relative;aspect-ratio:1/1.12;overflow:hidden;border-radius:var(--r);
  background:var(--bg-3);border:1px solid var(--line);
}
.person-ph img{width:100%;height:100%;object-fit:cover;filter:var(--photo-filter);transition:transform 1.1s var(--ease),filter .6s var(--ease)}
.person:hover .person-ph img{transform:scale(1.055)}
.person-ph::after{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease);
  background:linear-gradient(180deg,transparent 40%,color-mix(in oklab,var(--accent) 30%,transparent));
  mix-blend-mode:overlay;
}
.person:hover .person-ph::after{opacity:1}
.person-body{padding-top:14px}
.person-body h4{font-size:.98rem;line-height:1.25}
.person-role{font-size:.79rem;color:var(--accent);font-weight:600;margin-top:3px}
.person-meta{font-size:.79rem;color:var(--fg-3);line-height:1.5;margin-top:5px}
.person-meta em{font-style:normal;color:var(--fg-2)}
.socials{display:flex;gap:6px;margin-top:11px;flex-wrap:wrap}
.socials a{
  width:28px;height:28px;display:grid;place-items:center;border-radius:8px;
  border:1px solid var(--line);background:var(--surface);color:var(--fg-3);
  transition:.3s var(--ease);
}
.socials a:hover{color:var(--accent);border-color:color-mix(in oklab,var(--accent) 45%,transparent);background:color-mix(in oklab,var(--accent) 12%,transparent);transform:translateY(-2px)}
.socials svg{width:13px;height:13px}

/* group heading */
.group-head{display:flex;align-items:baseline;gap:14px;margin:clamp(38px,5vw,64px) 0 26px}
.group-head:first-child{margin-top:0}
.group-head h3{white-space:nowrap}
.group-head i{flex:1;height:1px;background:var(--line);font-style:normal}
.group-head b{font-family:var(--font-mono);font-size:.72rem;color:var(--fg-3);font-weight:500}

/* ============================================================
   Publications
   ============================================================ */
.filters{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  position:sticky;top:var(--nav-h);z-index:40;padding:14px 0;
  background:color-mix(in oklab,var(--bg) 88%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);margin-bottom:26px;
}
.search{
  position:relative;flex:1 1 240px;min-width:200px;max-width:420px;
}
.search input{
  width:100%;padding:.68em 1em .68em 2.5em;border-radius:100px;
  background:var(--surface);border:1px solid var(--line);color:var(--fg);
  font:inherit;font-size:.87rem;outline:none;transition:.3s var(--ease);
}
.search input::placeholder{color:var(--fg-3)}
.search input:focus{border-color:color-mix(in oklab,var(--accent) 55%,transparent);background:var(--surface-2);box-shadow:0 0 0 4px color-mix(in oklab,var(--accent) 13%,transparent)}
.search svg{position:absolute;left:.95em;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--fg-3);pointer-events:none}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  padding:.46em .95em;border-radius:100px;border:1px solid var(--line);background:var(--surface);
  font-family:var(--font-display);font-size:.78rem;font-weight:600;color:var(--fg-2);cursor:pointer;
  transition:.3s var(--ease);white-space:nowrap;
}
.chip:hover{border-color:var(--line-2);color:var(--fg)}
.chip[aria-pressed="true"]{background:linear-gradient(135deg,var(--accent),var(--accent-2));border-color:transparent;color:#fff;box-shadow:0 6px 18px -8px var(--glow)}

/* ---------- tabs ----------
   Written in tokens only, so the rail/canvas layer further down rebinds them with
   everything else and this needs no second copy there. The tablist deliberately does NOT
   go sticky: .filters inside a panel already sticks to var(--nav-h), and two sticky bars
   in one scroller either overlap or need the tablist's height as a magic number that a
   wrapped label on a narrow screen immediately makes wrong. */
.tablist{
  display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,32px);
  border-bottom:1px solid var(--line);margin-bottom:clamp(20px,3vw,32px);
}
.tab{
  position:relative;appearance:none;background:none;border:0;
  padding:0 0 13px;margin:0;cursor:pointer;white-space:nowrap;
  font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;
  font-size:clamp(.92rem,1.5vw,1.06rem);color:var(--fg-3);
  transition:color .3s var(--ease);
}
/* Sits ON the tablist's border rather than above it, so the two never double up. */
.tab::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.tab:hover{color:var(--fg-2)}
.tab[aria-selected="true"]{color:var(--fg)}
.tab[aria-selected="true"]::after{transform:scaleX(1)}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:5px;border-radius:3px}
/* The browser default would do this, but .tabpanel is a grid/flex child on some pages and
   a display declaration there would beat it. */
.tabpanel[hidden]{display:none}

.pub{
  display:grid;grid-template-columns:auto 1fr;gap:16px;
  padding:18px 2px;border-bottom:1px solid var(--line);
  transition:background .35s var(--ease);
}
.pub:hover{background:var(--surface)}
.pub-n{
  font-family:var(--font-mono);font-size:.72rem;color:var(--fg-3);
  padding-top:.35em;min-width:2.6em;font-variant-numeric:tabular-nums;
}
.pub h4{font-size:.99rem;line-height:1.38;font-weight:600;letter-spacing:-.012em;text-wrap:pretty}
.pub h4 a:hover{color:var(--accent)}
.pub-src{font-size:.82rem;color:var(--fg-3);margin-top:6px;line-height:1.5}
.pub-src b{color:var(--fg-2);font-weight:600}
.pub-foot{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px;align-items:center}

.book{display:flex;flex-direction:column;height:100%}
.book-cover{
  aspect-ratio:3/4;border-radius:var(--r-sm);overflow:hidden;background:var(--bg-3);
  border:1px solid var(--line);box-shadow:var(--shadow);
}
.book-cover img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.book:hover .book-cover img{transform:scale(1.05)}
.book h4{font-size:.9rem;line-height:1.35;margin-top:13px}
.book .meta{font-size:.76rem;color:var(--fg-3);margin-top:5px;line-height:1.5}

.patent{padding:18px 2px;border-bottom:1px solid var(--line);transition:background .35s var(--ease)}
.patent:hover{background:var(--surface)}

/* ============================================================
   Gallery
   ============================================================ */
.masonry{columns:4;column-gap:14px}
@media(max-width:1100px){.masonry{columns:3}}
@media(max-width:760px){.masonry{columns:2}}
@media(max-width:460px){.masonry{columns:1}}
.mitem{
  break-inside:avoid;margin-bottom:14px;border-radius:var(--r-sm);overflow:hidden;
  border:1px solid var(--line);background:var(--bg-3);cursor:zoom-in;position:relative;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .4s;
  opacity:0;transform:translateY(18px);
}
.mitem.in{opacity:1;transform:none;transition:opacity .7s var(--ease) var(--d,0ms),transform .8s var(--ease) var(--d,0ms)}
.mitem:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-2);z-index:2}
.mitem img{width:100%;display:block;filter:var(--photo-filter);transition:transform 1.1s var(--ease)}
.mitem:hover img{transform:scale(1.045)}
.mitem::after{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .45s var(--ease);
  background:linear-gradient(180deg,transparent 55%,rgba(5,7,11,.55));
}
.mitem:hover::after{opacity:1}

.lightbox{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(14px,4vw,54px);
  background:rgba(4,6,10,.93);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:100%;max-height:82vh;border-radius:var(--r-sm);box-shadow:0 40px 120px -30px #000;transform:scale(.96);transition:transform .5s var(--ease)}
.lightbox.open img{transform:none}
.lb-bar{position:absolute;inset:auto 0 0;display:flex;justify-content:center;align-items:center;gap:12px;padding:20px;color:#e8ecf5}
.lb-count{font-family:var(--font-mono);font-size:.78rem;color:#9aa4bb;min-width:5em;text-align:center}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;cursor:pointer;transition:.3s var(--ease)}
.lb-nav:hover{background:rgba(255,255,255,.18);transform:translateY(-50%) scale(1.06)}
.lb-prev{left:clamp(8px,2vw,26px)}.lb-next{right:clamp(8px,2vw,26px)}
.lb-close{position:absolute;top:clamp(12px,2vw,26px);right:clamp(12px,2vw,26px)}

/* ============================================================
   News / posts
   ============================================================ */
.post{display:flex;flex-direction:column;height:100%}
.post-img{aspect-ratio:16/10;overflow:hidden;background:var(--bg-3)}
.post-img img{width:100%;height:100%;object-fit:cover;filter:var(--photo-filter);transition:transform 1.1s var(--ease)}
.card:hover .post-img img{transform:scale(1.055)}
.post-body{padding:20px;display:flex;flex-direction:column;gap:9px;flex:1}
.post-date{font-family:var(--font-mono);font-size:.71rem;color:var(--fg-3);letter-spacing:.03em}
.post h3{font-size:1.04rem;line-height:1.3}
.post p{font-size:.85rem;color:var(--fg-3);line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post .tlink{margin-top:auto;padding-top:6px}

.clip{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.clip-img{width:clamp(96px,13vw,168px);border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);background:var(--bg-3)}
.clip-img img{width:100%;filter:var(--photo-filter)}
@media(max-width:560px){.clip{grid-template-columns:1fr}.clip-img{width:100%;max-width:280px}}

/* logo strip */
.logos{display:flex;flex-wrap:wrap;gap:clamp(20px,3.4vw,54px);align-items:center;justify-content:center}
.logos img{
  height:clamp(26px,3.2vw,42px);width:auto;object-fit:contain;
  opacity:.55;filter:grayscale(1);transition:.45s var(--ease);
}
.logos img:hover{opacity:1;filter:none;transform:scale(1.05)}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:clamp(28px,4vw,64px);width:max-content;animation:marq 46s linear infinite;align-items:center}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}

/* ============================================================
   Timeline / lists
   ============================================================ */
.tl{position:relative;padding-left:26px}
.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:linear-gradient(180deg,var(--accent),var(--line) 30%,var(--line))}
.tl li{position:relative;list-style:none;padding:0 0 20px}
.tl li::before{
  content:"";position:absolute;left:-25px;top:.55em;width:11px;height:11px;border-radius:50%;
  background:var(--bg);border:2px solid var(--accent);transition:.4s var(--ease);
}
.tl li:hover::before{box-shadow:0 0 0 5px color-mix(in oklab,var(--accent) 18%,transparent)}
.tl b{display:block;font-family:var(--font-display);font-size:.95rem;font-weight:600;letter-spacing:-.012em}
.tl span{font-size:.84rem;color:var(--fg-3)}
.tl .yr{font-family:var(--font-mono);font-size:.72rem;color:var(--accent);letter-spacing:.04em}

.dl{display:grid;gap:0;margin:0}
.dl > div{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:13px 2px;border-bottom:1px solid var(--line);align-items:baseline}
.dl dt{font-family:var(--font-mono);font-size:.72rem;color:var(--fg-3);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.dl dd{margin:0;font-size:.92rem;color:var(--fg-2)}
@media(max-width:560px){.dl > div{grid-template-columns:1fr;gap:4px}}

.bullets{margin:0;padding:0;list-style:none;display:grid;gap:11px}
.bullets li{position:relative;padding-left:22px;font-size:.9rem;color:var(--fg-2);line-height:1.6}
.bullets li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:2px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));transform:rotate(45deg);
}
.bullets li b{color:var(--fg);font-weight:600}

/* accordion */
.acc{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg-2)}
.acc + .acc{margin-top:10px}
.acc summary{
  cursor:pointer;list-style:none;padding:16px 20px;display:flex;align-items:center;gap:14px;
  font-family:var(--font-display);font-weight:600;font-size:.98rem;letter-spacing:-.015em;
  transition:background .3s var(--ease);
}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{background:var(--surface)}
.acc summary .cnt{margin-left:auto;font-family:var(--font-mono);font-size:.72rem;color:var(--fg-3);font-weight:500}
.acc summary .chev{width:15px;height:15px;color:var(--fg-3);transition:transform .4s var(--ease);flex:none}
.acc[open] summary .chev{transform:rotate(90deg)}
.acc .acc-body{padding:2px 20px 20px;animation:accIn .5s var(--ease)}
@keyframes accIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ============================================================
   Feature blocks
   ============================================================ */
.feat{
  position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  background:var(--bg-2);display:grid;
}
.feat-media{position:relative;overflow:hidden;background:var(--bg-3);min-height:230px}
.feat-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--photo-filter);transition:transform 1.3s var(--ease)}
.feat:hover .feat-media img{transform:scale(1.06)}
.feat-body{padding:clamp(22px,3vw,40px);display:flex;flex-direction:column;justify-content:center;gap:12px}
@media(min-width:860px){
  .feat{grid-template-columns:1fr 1fr}
  .feat.rev .feat-media{order:2}
}

.num-card{position:relative;padding:clamp(20px,2.4vw,30px);border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);overflow:hidden}
.num-card .idx{
  position:absolute;right:14px;top:2px;font-family:var(--font-display);font-weight:700;
  font-size:4.2rem;line-height:1;color:var(--fg);opacity:.055;letter-spacing:-.05em;
}
.num-card h3{font-size:1.08rem;margin-bottom:9px}
.num-card p{font-size:.88rem;color:var(--fg-3);line-height:1.6}

/* quote */
.quote{
  font-family:var(--font-serif);font-size:clamp(1.35rem,2.8vw,2.15rem);line-height:1.32;
  letter-spacing:-.015em;color:var(--fg);text-wrap:balance;
}
.quote-mark{font-size:3em;line-height:0;color:var(--accent);opacity:.4;vertical-align:-.32em;margin-right:.05em}

/* ============================================================
   Footer + CTA
   ============================================================ */
.cta{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  border:1px solid var(--line);background:var(--bg-2);
  padding:clamp(34px,5.5vw,76px);text-align:center;isolation:isolate;
}
.cta::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(70% 100% at 20% 0%,color-mix(in oklab,var(--accent) 22%,transparent),transparent 62%),
    radial-gradient(60% 100% at 85% 100%,color-mix(in oklab,var(--accent-2) 20%,transparent),transparent 60%);
}
.cta h2{margin-bottom:.5em}

.footer{border-top:1px solid var(--line);padding-block:clamp(44px,5.5vw,72px) 30px;background:var(--bg-2)}
.foot-grid{display:grid;gap:34px;grid-template-columns:1fr}
@media(min-width:760px){.foot-grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr}}
.foot-col h5{font-family:var(--font-display);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);margin:0 0 14px;font-weight:600}
.foot-col ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.foot-col a{font-size:.87rem;color:var(--fg-2);transition:color .3s var(--ease)}
.foot-col a:hover{color:var(--accent)}
.foot-brand svg{height:38px;width:auto;margin-bottom:14px}
.foot-bot{
  margin-top:clamp(32px,4vw,52px);padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
  font-size:.78rem;color:var(--fg-3);
}
.foot-social{display:flex;gap:8px}

/* scroll progress */
.progress{position:fixed;inset:0 0 auto;height:2px;z-index:140;background:linear-gradient(90deg,var(--accent),var(--accent-2));transform:scaleX(0);transform-origin:left;will-change:transform}

/* back to top */
.totop{
  position:fixed;right:max(18px,calc(var(--gut) - 18px));bottom:22px;z-index:100;
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:color-mix(in oklab,var(--bg-2) 88%,transparent);border:1px solid var(--line);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;
  transition:.45s var(--ease);box-shadow:var(--shadow);
}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{border-color:var(--line-2);transform:translateY(-2px)}

/* page header (interior pages) */
.phead{
  position:relative;padding-top:calc(var(--nav-h) + clamp(52px,7vw,96px));
  padding-bottom:clamp(30px,4.4vw,56px);overflow:hidden;isolation:isolate;
}
.phead::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(90% 120% at 8% 0%,color-mix(in oklab,var(--accent) 16%,transparent),transparent 58%),
    radial-gradient(70% 100% at 95% 10%,color-mix(in oklab,var(--accent-2) 11%,transparent),transparent 62%);
}
.phead h1{font-size:clamp(2.3rem,5.4vw,4.2rem)}
.phead .lede{margin-top:1.1rem}
.crumb{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.72rem;color:var(--fg-3);margin-bottom:18px;letter-spacing:.04em}
.crumb a:hover{color:var(--accent)}

/* misc utilities */
.center{text-align:center}
.flex{display:flex}
.wrapf{flex-wrap:wrap}
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}
.mt-0{margin-top:0}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-48{margin-top:48px}
.mb-0{margin-bottom:0}
.hide{display:none !important}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* skip link */
.skip{position:absolute;left:12px;top:-60px;z-index:300;padding:10px 16px;border-radius:8px;background:var(--accent);color:#fff;font-weight:600;font-size:.85rem;transition:top .25s var(--ease)}
.skip:focus{top:12px}

/* empty state */
.empty{padding:56px 20px;text-align:center;color:var(--fg-3);font-size:.9rem}

/* ============================================================================
   REIMAGINE LAYER
   Type moved to IBM Plex; the flat single-tone canvas that made every section
   read the same is replaced with banded rhythm and warmer depth.
   ========================================================================== */

/* ---- section rhythm: bands break up the endless single-tone scroll ---- */
main > .section{ position:relative; }
main > .section:nth-of-type(even)::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--band);
  border-block:1px solid var(--line);
}
main > .section:nth-of-type(4n)::before{ background:var(--band-2); }

/* a hairline accent tick on every section head, so heads read as landmarks */
.section-head > h2{ position:relative; }
main > .section:not(.hero) .section-head:not(.center) > h2::before{
  content:''; position:absolute; left:-18px; top:.18em; bottom:.22em; width:3px;
  border-radius:2px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  opacity:.85;
}
@media (max-width:900px){ main > .section .section-head:not(.center) > h2::before{ display:none } }

/* IBM Plex sets tighter than Space Grotesk did; restore optical spacing */
h1,h2,h3{ letter-spacing:-.021em }
.eyebrow{ letter-spacing:.19em }
.serif{ font-style:italic }

/* ---- Collaborate, relocated into the top bar ---- */
.nav-cta{
  display:inline-flex; align-items:center; gap:.5rem;
  height:38px; padding:0 15px; border-radius:999px;
  font-family:var(--font-display); font-size:.83rem; font-weight:600; letter-spacing:-.005em;
  color:#04121f; text-decoration:none; white-space:nowrap;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 6px 20px -8px var(--glow);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease);
}
.nav-cta:hover{ transform:translateY(-1px); filter:saturate(1.1) brightness(1.04);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 12px 28px -10px var(--glow); }
.nav-cta:active{ transform:translateY(0) }
.nav-cta svg{ width:15px; height:15px }
@media (max-width:1080px){ .nav-cta span{ display:none } .nav-cta{ padding:0; width:38px; justify-content:center } }
@media (max-width:640px){ .nav-cta{ display:none } }

.drawer-cta{
  display:flex !important; align-items:center; gap:.6rem;
  margin-bottom:18px; padding:13px 16px; border-radius:12px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#04121f !important; font-family:var(--font-display); font-weight:600; font-size:1rem !important;
  letter-spacing:-.01em; text-decoration:none;
}
.drawer-cta svg{ width:17px; height:17px }

/* ---- footer credit ---- */
.foot-credit{ color:var(--fg-3) }
.foot-credit a{
  color:var(--fg-2); text-decoration:none;
  border-bottom:1px solid var(--line-2); padding-bottom:1px;
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.foot-credit a:hover{ color:var(--accent); border-color:var(--accent) }
.foot-bot{ flex-wrap:wrap; gap:.5rem 1.4rem }

/* ============================================================================
   RAIL + CANVAS LAYER — chandraslab content in the hemishthanki.com sidebar UI.
   One pale-rail / dark-canvas pairing, layered over the base design system above
   so every existing component keeps working without being restyled.
   ========================================================================== */

/* ---- palette. Only 'ink' survives; every colour below derives from these six. ---- */
:root{ --rail-bg:#e8e8e8; --rail-ink:#1a1c20; --canvas:#16181c; --canvas-2:#101216; --canvas-3:#0b0c0f; --on-canvas:#ececec; }

/* ---- map the base design system onto whichever palette is active ---- */
:root{
  --font-display:"Oswald", "Helvetica Neue", Arial, sans-serif;
  --font-body:"Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-serif:"Inter", ui-sans-serif, system-ui, sans-serif;

  --bg:var(--canvas); --bg-2:var(--canvas-2); --bg-3:var(--canvas-3);
  --band:var(--canvas-2); --band-2:var(--canvas-3);
  --surface:color-mix(in srgb, var(--on-canvas) 10%, transparent);
  --surface-2:color-mix(in srgb, var(--on-canvas) 16%, transparent);
  --line:color-mix(in srgb, var(--on-canvas) 20%, transparent);
  --line-2:color-mix(in srgb, var(--on-canvas) 34%, transparent);
  --fg:var(--on-canvas);
  /* The base alphas were tuned against a near-black canvas. On a mid-tone canvas the
     same values collapse toward the background, so muted text needs more weight. */
  --fg-2:color-mix(in srgb, var(--on-canvas) 90%, transparent);
  --fg-3:color-mix(in srgb, var(--on-canvas) 74%, transparent);
  --accent:var(--on-canvas);
  --accent-2:color-mix(in srgb, var(--on-canvas) 78%, var(--canvas));
  --accent-3:var(--on-canvas);
  --glow:color-mix(in srgb, var(--on-canvas) 30%, transparent);
  --grid-line:color-mix(in srgb, var(--on-canvas) 7%, transparent);
  --ring:0 0 0 1px color-mix(in srgb, var(--on-canvas) 16%, transparent);
  --shadow:0 1px 2px rgba(0,0,0,.14), 0 10px 30px -14px rgba(0,0,0,.34);
  --shadow-lg:0 2px 6px rgba(0,0,0,.16), 0 34px 70px -28px rgba(0,0,0,.44);
  --scrim:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--canvas) 72%,transparent) 60%,color-mix(in srgb,var(--canvas) 96%,transparent) 100%);
  --rail-w:268px; --r:16px;
  color-scheme:light;
}
html{ color-scheme:light }
body{ background:var(--canvas); color:var(--on-canvas); padding-left:var(--rail-w) }

h1,h2,h3,h4,h5{ font-family:var(--font-display); font-weight:700; letter-spacing:.02em }
h1{ letter-spacing:.04em }
.eyebrow{ font-family:var(--font-display); font-weight:500; letter-spacing:.2em }
.serif{ font-family:var(--font-body); font-style:normal }

/* ---- neutralise the base .drawer reveal that .rail inherits ---- */
.rail{ backdrop-filter:none; -webkit-backdrop-filter:none; overflow:visible; opacity:1; visibility:visible }
.rail a{
  opacity:1; transform:none; border-bottom:0; animation:none !important;
  font-family:var(--font-display); font-size:.9rem; font-weight:500;
  letter-spacing:.03em; align-items:center; gap:11px; padding:9px 10px;
}
.rail a i{ font-family:inherit; font-size:inherit; color:inherit; letter-spacing:0 }

/* ---- the rail ---- */
.rail{
  position:fixed; inset:0 auto 0 0; width:var(--rail-w); z-index:60;
  display:flex; flex-direction:column;
  background:var(--rail-bg); color:var(--rail-ink);
}
.rail-brand{
  display:flex; align-items:center; gap:11px;
  padding:18px !important; margin:10px 10px 4px; border-radius:12px;
  background:color-mix(in srgb, var(--canvas) 10%, transparent);
  text-decoration:none; color:var(--rail-ink);
}
.rail-brand img{ width:30px; height:auto; flex:none }
.rail-brand b{ display:block; font-family:var(--font-display); font-weight:700; font-size:.94rem; letter-spacing:.02em; line-height:1.15 }
.rail-brand em{ display:block; font-family:var(--font-display); font-style:normal; font-size:.58rem; letter-spacing:.14em; color:color-mix(in srgb,var(--rail-ink) 62%,transparent); margin-top:2px }

.rail-scroll{ flex:1; overflow-y:auto; padding:10px 10px 16px; scrollbar-width:thin }
.rail-label{
  margin:16px 0 6px; padding-left:10px;
  font-family:var(--font-display); font-weight:500; font-size:.62rem;
  letter-spacing:.2em; text-transform:uppercase;
  color:color-mix(in srgb,var(--rail-ink) 52%,transparent);
}
.rail-group{ display:flex; flex-direction:column; gap:1px }
.rail-item{ border-radius:9px; color:var(--rail-ink); text-decoration:none; line-height:1.3;
  transition:background .16s var(--ease), color .16s var(--ease) }
.rail-item span{ flex:1; min-width:0 }
.rail-ico{ display:grid; place-items:center; width:20px; height:20px; flex:none; opacity:.7 }
.rail-ico svg{ width:20px; height:20px; display:block }
.rail-out{ width:14px; height:14px; opacity:0; flex:none; transition:opacity .16s var(--ease) }
.rail-out svg{ width:14px; height:14px; display:block }
.rail-item:hover{ background:color-mix(in srgb,var(--canvas) 12%,transparent) }
.rail-item:hover .rail-out{ opacity:.5 }
.rail-item.on{ background:var(--canvas); color:var(--on-canvas) }
.rail-item.on .rail-ico{ opacity:1 }
.rail-foot{ padding:10px; border-top:1px solid color-mix(in srgb,var(--rail-ink) 14%,transparent) }
/* pinned primary action — the sidebar layout has no top bar to carry it */
.rail-cta{
  display:flex; align-items:center; gap:11px;
  padding:11px 12px !important; border-radius:10px;
  background:var(--canvas); color:var(--on-canvas) !important; text-decoration:none;
  font-family:var(--font-display); font-size:.92rem; font-weight:500; letter-spacing:.04em;
  transition:filter .16s var(--ease), transform .16s var(--ease);
}
.rail-cta:hover{ filter:brightness(1.12); transform:translateY(-1px) }
.rail-cta .rail-ico{ opacity:1 }

/* secondary, deliberately quieter than the CTA above it: the content admin is an
   operator door, not something a visitor should be drawn to. */
.rail-admin{
  display:flex; align-items:center; gap:11px;
  margin-top:6px; padding:8px 12px !important; border-radius:10px;
  color:color-mix(in srgb,var(--rail-ink) 72%,transparent) !important; text-decoration:none;
  font-family:var(--font-display); font-size:.8rem; font-weight:500; letter-spacing:.06em;
  transition:background .16s var(--ease), color .16s var(--ease);
}
.rail-admin:hover{
  background:color-mix(in srgb,var(--canvas) 12%,transparent);
  color:var(--rail-ink) !important;
}
.rail-admin .rail-ico{ width:17px; height:17px; opacity:.75 }
.rail-admin .rail-ico svg{ width:17px; height:17px }
.rail-admin:hover .rail-ico{ opacity:1 }

/* mobile app bar: hamburger + brand, replaces the rail below 1040px */
.mbar{ display:none }
.mbar-brand{ display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--rail-ink) }
.mbar-brand img{ width:24px; height:auto }
.mbar-brand b{ font-family:var(--font-display); font-weight:700; font-size:1rem; letter-spacing:.04em }
.rail-toggle{
  display:none; width:40px; height:40px; flex:none;
  border:0; border-radius:10px; cursor:pointer;
  background:transparent; color:var(--rail-ink); place-items:center;
}
.rail-toggle:hover{ background:color-mix(in srgb, var(--canvas) 12%, transparent) }
.rail-toggle svg{ width:22px; height:22px }
.rail-scrim{ display:none }
.nav, .progress, .nav-cta, .drawer-cta{ display:none !important }

/* ---- surfaces ---- */
.card, .cta, .panel, .box{
  background:var(--rail-bg) !important; color:var(--rail-ink) !important;
  border-color:color-mix(in srgb,var(--rail-ink) 14%,transparent) !important; border-radius:var(--r);
}
.card a{ color:var(--canvas) }
.card p, .card li, .card span{ color:color-mix(in srgb,var(--rail-ink) 82%,transparent) }
.chip, .tag, .pill{ background:var(--surface) !important; border-color:var(--line) !important; color:var(--fg-2) !important }
.btn-primary{ background:var(--rail-bg); color:var(--canvas); border-color:transparent }
.btn-primary:hover{ filter:brightness(1.06) }
.btn-ghost{ color:var(--on-canvas); border-color:var(--line-2) }
.btn-ghost:hover{ background:var(--surface) }
.footer{ background:var(--canvas-3); border-top:1px solid var(--line) }
.foot-credit a{ color:var(--on-canvas) }
main > .section:nth-of-type(even)::before, main > .section:nth-of-type(4n)::before{ display:none }
.section-head:not(.center) > h2::before{ display:none !important }
.logos img{ filter:none !important; opacity:.9 }

/* A pale card sits on a dark canvas, so every base rule inside it that reaches for
   var(--fg) / var(--bg-2) / var(--line) would resolve to canvas colours: light text on a
   light card, i.e. invisible. Rebind the tokens on .card itself — custom properties
   inherit, so every descendant rule is corrected at once without enumerating selectors. */
.card, .cta, .panel, .box{
  --fg:var(--rail-ink);
  --fg-2:color-mix(in srgb, var(--rail-ink) 80%, transparent);
  --fg-3:color-mix(in srgb, var(--rail-ink) 56%, transparent);
  --accent:var(--canvas);
  --accent-2:var(--canvas-2);
  --accent-3:var(--canvas);
  --line:color-mix(in srgb, var(--rail-ink) 14%, transparent);
  --line-2:color-mix(in srgb, var(--rail-ink) 26%, transparent);
  --surface:color-mix(in srgb, var(--rail-ink) 6%, transparent);
  --surface-2:color-mix(in srgb, var(--rail-ink) 11%, transparent);
  --bg-2:color-mix(in srgb, var(--rail-ink) 6%, transparent);
  --bg-3:color-mix(in srgb, var(--rail-ink) 10%, transparent);
  --glow:color-mix(in srgb, var(--canvas) 30%, transparent);
}

/* the skip link is white-on-pale until focused */

.skip{ background:var(--canvas) !important; color:var(--on-canvas) !important }

/* the hero portrait is a photo with a scrim caption, not a light panel */
.hero-card{ background:var(--canvas-2); border-color:var(--line) }
.hero-card figcaption{ background:var(--scrim); color:var(--on-canvas) }
.hero-card figcaption b{ color:var(--on-canvas); font-family:var(--font-display); letter-spacing:.01em }
.hero-card figcaption span{ color:var(--fg-2) }

/* ---- responsive ---- */
@media (max-width:1040px){
  body{ padding-left:0 }
  /* !important: the base .drawer rules fight this at equal specificity */
  .rail{ transform:translateX(-100%) !important; transition:transform .34s var(--ease); box-shadow:0 0 60px rgba(0,0,0,.4) }
  .rail.open{ transform:translateX(0) !important }
  .rail-toggle{ display:grid }
  .mbar{
    display:flex; align-items:center; gap:6px;
    position:fixed; inset:0 0 auto 0; height:56px; z-index:70; padding:0 10px;
    background:var(--rail-bg); color:var(--rail-ink);
    box-shadow:0 2px 14px -4px rgba(0,0,0,.35);
  }
  .rail-scrim{ display:block; position:fixed; inset:0; z-index:55;
    background:rgba(20,26,22,.5); opacity:0; pointer-events:none; transition:opacity .3s var(--ease) }
  .rail.open ~ .rail-scrim{ opacity:1; pointer-events:auto }
  main{ padding-top:56px }
  /* start the rail below the fixed app bar so its brand block is not clipped */
  .rail{ top:56px }
}
@media (min-width:1041px){
  .rail{ transform:none !important }
}

/* ============================================================================
   GENERATED-PAGE COMPONENTS
   The classes admin/lib/pages.js emits where the twelve hand-written pages used
   to carry an inline style. Every declaration below is transcribed from
   admin/tools/baseline/*.html and the line it came from is quoted above it;
   nothing here is a new design decision.

   THIS SECTION STAYS LAST IN THE FILE. `.card p, .card li, .card span` above
   recolours every paragraph inside a card at the same specificity these rules
   have, and the inline styles they replace used to outrank it by being inline.
   Reproducing that outcome is a question of source order, not of !important.
   ========================================================================== */

/* ---- callout card — cards variant="callout" (§2.3-6) ---- */

/* index.html:100  style="border-color:color-mix(in oklab,var(--warn) 32%,transparent)".
   Deliberately not !important: `.card, .cta, .panel, .box` above already wins the border
   with one, and won it against the inline style too. The tone is recorded here for the day
   that layer is scoped; escalating would paint a border the baseline never showed. */
.card-callout-warn{border-color:color-mix(in oklab,var(--warn) 32%,transparent)}
.card-callout-accent{border-color:color-mix(in oklab,var(--accent) 32%,transparent)}
/* index.html:103  style="flex:1;min-width:260px;font-size:.94rem;color:var(--fg-2);margin:0" */
.card-callout p{flex:1;min-width:260px;font-size:.94rem;color:var(--fg-2);margin:0}
/* index.html:104-105  three <b style="color:var(--fg)"> inside that paragraph */
.card-callout p b{color:var(--fg)}

/* ---- full-bleed imagery band — image-band (§2.3-13) ---- */

/* index.html:152  style="position:relative;overflow:hidden" */
.band{position:relative;overflow:hidden}
/* index.html:153  style="position:relative;height:clamp(180px,26vw,340px);overflow:hidden".
   pages.js writes the height inline from the `height` enum; this is that enum's `band`
   value, so the class on its own still crops the way the baseline did. */
.band-inner{position:relative;height:clamp(180px,26vw,340px);overflow:hidden}
/* index.html:155  style="position:absolute;inset:0;width:100%;height:100%;
   object-fit:cover;object-position:center". No var(--photo-filter): unlike .feat-media
   img, the baseline band image carried none. */
.band-inner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
/* index.html:156  background:linear-gradient(180deg,var(--bg),transparent 22%,transparent 78%,var(--bg)) */
.band-scrim{position:absolute;inset:0;background:linear-gradient(180deg,var(--bg),transparent 22%,transparent 78%,var(--bg))}

/* ---- info-card intro — info-card (§2.3-10) ---- */

/* contact.html:143, 154, 162  style="color:var(--fg-2);font-size:.92rem;margin-top:8px" */
.card-note{font-size:.92rem;color:var(--fg-2);margin-top:8px}
/* `.card p` above outranks a lone class, so the colour needs a second class to land where
   the inline style used to. */
.card .card-note{color:var(--fg-2)}

/* ---- columns stackGap — columns (§2.3-12) ---- */

/* contact.html:140  style="display:grid;gap:16px"; 12 and 24 are the other two enum
   values, and exist so that stackGap has something to key off. */
.stack-12{display:grid;gap:12px}
.stack-16{display:grid;gap:16px}
.stack-24{display:grid;gap:24px}

/* ---- feature framed as a card — feature frameStyle="card" (§2.3-5) ---- */

/* research.html:123  style="font-size:1.2rem;line-height:1.32;margin-top:6px". Scoped to
   the heading that follows the single pinned tag — the citation card at research.html:
   122-123, and nothing else on the site. A bare `.card .feat-body h3` would also catch
   research.html:188 and :220, two headings the baseline leaves at the h3 default of
   clamp(1.22rem,2vw,1.62rem), and shrink them by a third at desktop widths. */
.card .feat-body > .tag + h3{font-size:1.2rem;line-height:1.32;margin-top:6px}
/* research.html:189, 221  the .94rem the product card bodies carry. contact.html:89 reads
   .95rem and renders at the inherited 16px without this rule, so .94rem leaves it 0.16px
   from its baseline instead of 0.8px. The two exclusions are load-bearing: a feat-body's
   eyebrow and its mono author line are direct <p> children too, and this selector outranks
   both .eyebrow (.7rem) and .mono (.82em). */
.card .feat-body > p:not(.eyebrow):not(.mono){font-size:.94rem}
/* research.html:129  <b style="color:var(--fg-2)"> on the PI name in the author line */
.feat-body p.mono b{color:var(--fg-2)}

/* ---- prose tone — prose tone="muted" (§2.3-3) ---- */

/* about.html:53 and :60  style="color:var(--fg-2)" on the two profile paragraphs, the
   site's only `prose` block. NOT .muted (site.css:113): that is var(--fg-3), a further
   step down, and swaps one wrong colour for another. The two exclusions are load-bearing —
   the block's own eyebrow is a direct <p> child whose var(--accent) this selector would
   outrank at (0,1,1) against (0,1,0), and its lede sets colour inline. */
.prose-muted > p:not(.eyebrow):not(.lede){color:var(--fg-2)}