/* ISNA-21 album.
   Palette sampled from the symposium's own banner: the blue-to-magenta sweep and the
   cube logo's yellow and green. Chrome stays quiet so the photographs carry the
   colour; the brand gradient appears only where the page speaks for the conference
   itself — the hero, the primary action, an active filter. */

:root {
  /* brand, sampled from the official banner */
  --brand-blue:    #0B84C7;
  --brand-purple:  #7B3FA8;
  --brand-magenta: #F0377B;
  --brand-yellow:  #FFC83D;
  --brand-grad: linear-gradient(115deg, var(--brand-blue) 0%, var(--brand-purple) 52%, var(--brand-magenta) 100%);

  --bg:        #FAFBFC;
  --surface:   #FFFFFF;
  --surface-2: #EFF2F6;
  --ink:       #14181F;
  --ink-2:     #4A5361;
  --ink-3:     #7C8694;
  --rule:      #E1E6EC;
  --accent:    #1B5EA6;
  --accent-ink:#FFFFFF;
  --accent-soft:#E8F1FA;
  --good:      #14794F;
  --good-soft: #E6F4EC;

  --shadow-sm: 0 1px 2px rgba(23,20,32,.05), 0 3px 10px -5px rgba(23,20,32,.14);
  --shadow-md: 0 2px 6px rgba(23,20,32,.07), 0 14px 30px -14px rgba(23,20,32,.22);
  --shadow-lg: 0 2px 8px rgba(23,20,32,.10), 0 30px 60px -24px rgba(23,20,32,.34);

  --topbar-h: 62px;
  --filter-h: 52px;
  --r-md: 14px;
  --r-lg: 22px;

  --display: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
          "Noto Sans SC", "PingFang SC", "Microsoft YaHei UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0B0F16;
    --surface:   #12171F;
    --surface-2: #1A212B;
    --ink:       #EEF2F7;
    --ink-2:     #A6B0BD;
    --ink-3:     #79838F;
    --rule:      #242C37;
    --accent:    #7FB6E8;
    --accent-ink:#0A1526;
    --accent-soft:#132234;
    --good:      #5FCB98;
    --good-soft: #12291E;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.5), 0 3px 10px -5px rgba(0,0,0,.7);
    --shadow-md: 0 2px 6px rgba(0,0,0,.55), 0 14px 30px -14px rgba(0,0,0,.8);
    --shadow-lg: 0 2px 8px rgba(0,0,0,.6), 0 30px 60px -24px rgba(0,0,0,.9);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg:#0B0F16; --surface:#12171F; --surface-2:#1A212B;
  --ink:#EEF2F7; --ink-2:#A6B0BD; --ink-3:#79838F; --rule:#242C37;
  --accent:#7FB6E8; --accent-ink:#0A1526; --accent-soft:#132234;
  --good:#5FCB98; --good-soft:#12291E;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5), 0 3px 10px -5px rgba(0,0,0,.7);
  --shadow-md: 0 2px 6px rgba(0,0,0,.55), 0 14px 30px -14px rgba(0,0,0,.8);
  --shadow-lg: 0 2px 8px rgba(0,0,0,.6), 0 30px 60px -24px rgba(0,0,0,.9);
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* component rules below set display:flex; without this the hidden attribute loses */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-y: scroll;
}

button, input, a { font: inherit; }
button { cursor: pointer; border: 0; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.02em; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 5px; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 100;
        background: var(--accent); color: var(--accent-ink); padding: 8px 14px; border-radius: 6px; }
.skip:focus { left: 12px; }

/* ---------------------------------------------------------------- topbar */
.topbar {
  position: sticky; top: 0; z-index: 40;
  /* An opaque bar rather than a blurred one: backdrop-filter on a full-width sticky
     element forces the compositor to re-read the page behind it on every scroll
     frame, which is expensive on phones and broke painting outright in one embedded
     renderer. The bar reads just as well solid. */
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}
.topbar-in {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 18px;
  padding: 0 22px; max-width: 2100px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 0 0 auto; padding: 4px 6px 4px 0; }
.brand-mark { display: flex; filter: drop-shadow(0 2px 6px rgba(123,63,168,.28)); }
.brand-text { display: flex; flex-direction: column; line-height: 1.24; min-width: 0; text-align: left; }
.brand-text b { font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.brand-text small { font-size: 11.5px; color: var(--ink-3); white-space: nowrap;
                    overflow: hidden; text-overflow: ellipsis; max-width: 40ch; }

.tabs { display: flex; gap: 3px; margin-left: auto; }
.tab {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 9px;
  color: var(--ink-2); font-weight: 500; font-size: 14px; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.tab svg { width: 17px; height: 17px; fill: currentColor; }
.tab svg.stroke { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tab:hover { background: var(--surface-2); color: var(--ink); }
.tab[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); }
.tab .count { font-style: normal; font-family: var(--mono); font-size: 11px;
              color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tab[aria-selected="true"] .count { color: inherit; opacity: .7; }

.topbar-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* the language switcher shows a globe AND the language written out, so it reads as a
   language control rather than an unlabelled glyph */
.langwrap { position: relative; }
.langbtn {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 11px; border-radius: 9px;
  border: 1px solid var(--rule); background: var(--surface);
  color: var(--ink-2); font-size: 13.5px; font-weight: 500;
}
.langbtn:hover { background: var(--surface-2); color: var(--ink); }
.langbtn svg { width: 16px; height: 16px; }
.langbtn .caret { width: 11px; height: 11px; opacity: .6; }
.langmenu {
  position: absolute; right: 0; top: calc(100% + 6px);
  list-style: none; margin: 0; padding: 5px;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg); min-width: 172px; z-index: 50;
}
.langmenu button { display: block; width: 100%; text-align: left;
                   padding: 9px 12px; border-radius: 7px; font-size: 14px; color: var(--ink-2); }
.langmenu button:hover { background: var(--surface-2); color: var(--ink); }
.langmenu button[aria-current="true"] { color: var(--accent); font-weight: 600; background: var(--accent-soft); }

/* ---------------------------------------------------------------- filters */
.filterbar {
  height: var(--filter-h); display: flex; align-items: center; gap: 16px;
  padding: 0 22px; border-top: 1px solid var(--rule);
  max-width: 2100px; margin: 0 auto;
}
.chips { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 13px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--rule); color: var(--ink-2); font-size: 13.5px;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip[aria-pressed="true"] {
  background: var(--accent); border-color: transparent; color: var(--surface); font-weight: 500;
}
.chip .n { font-family: var(--mono); font-size: 11px; opacity: .68; font-variant-numeric: tabular-nums; }

.ghost, .primary {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 9px; font-size: 13.5px; font-weight: 500;
  transition: background .15s ease, opacity .15s ease, transform .12s ease;
}
.ghost { border: 1px solid var(--rule); color: var(--ink-2); background: var(--surface); }
.ghost:hover { background: var(--surface-2); color: var(--ink); }
.ghost[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.primary { background: var(--accent); color: var(--surface); }
.primary:hover { opacity: .92; transform: translateY(-1px); }
.ghost svg, .primary svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- layout */
main { max-width: 2100px; margin: 0 auto; padding: 18px 22px 120px; }
#view-home { padding: 0; margin: -18px -22px 0; }
.view { animation: fade .2s ease; }
@keyframes fade { from { opacity: .5; } to { opacity: 1; } }

.section-head { margin: 4px 0 22px; }
.section-head h2 { font-size: 24px; font-weight: 600; margin: 0 0 6px; }
.section-head h3 { font-size: 17px; font-weight: 600; margin: 0 0 4px; }
.section-head p { margin: 0; color: var(--ink-2); font-size: 14.5px; max-width: 68ch; }
.section-head.tier { margin-top: 46px; padding-top: 24px; border-top: 1px solid var(--rule); }
.empty { color: var(--ink-3); padding: 60px 0; text-align: center; }

/* ------------------------------------------------------------------ hero */
/* One screen: everything a visitor needs to decide where to go is above the fold,
   with the chemistry backdrop and the photo wall filling the half of the page that
   was previously empty. */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 100% at 12% 0%, #14304F 0%, transparent 55%),
    radial-gradient(90% 110% at 100% 100%, #2A1738 0%, transparent 55%),
    #080C13;
  min-height: calc(100vh - var(--topbar-h));
  display: flex; align-items: center;
  padding: 26px 22px;
}
.hero-chem { position: absolute; inset: 0; width: 100%; height: 100%;
             z-index: 1; pointer-events: none; }
.hero-grid {
  position: relative; z-index: 2;
  width: 100%; max-width: 1320px; margin: 0 auto;
  /* Two tracks. The copy does not fill its column, and the buckyball turns in the
     space it leaves - behind the text, clear of the photo wall. */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: 46px; align-items: center;
}
.hero-left { color: #fff; display: flex; flex-direction: column; align-items: flex-start; }

.hero-banner {
  width: min(100%, 470px); border-radius: 12px; display: block;
  box-shadow: 0 10px 36px -14px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.1);
  margin-bottom: 22px;
}
.kicker { margin: 0 0 9px; font-family: var(--mono); font-size: 11px;
          letter-spacing: .2em; text-transform: uppercase; color: #7FC0EE; }
.hero-title { margin: 0 0 10px; font-size: clamp(25px, 2.7vw, 38px); line-height: 1.16;
              font-weight: 600; max-width: 18ch; text-wrap: balance; }
.hero-meta { margin: 0 0 18px; display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
             font-size: 13.5px; color: rgba(255,255,255,.68); }
.hero-meta i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.35); }
.hero-lead { margin: 0 0 7px; font-size: clamp(15px, 1.25vw, 17.5px); font-weight: 600; max-width: 42ch; }
.hero-sub { margin: 0 0 26px; font-size: 13px; color: rgba(255,255,255,.6);
            letter-spacing: .04em; max-width: 46ch; }

.cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
.cta { display: inline-flex; align-items: center; gap: 8px;
       padding: 11px 19px; border-radius: 999px; font-size: 14.5px; font-weight: 600;
       font-family: var(--display);
       transition: transform .14s ease, box-shadow .14s ease, background .14s ease; }
.cta svg { width: 17px; height: 17px; }
.cta svg.stroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cta.solid { background: #fff; color: #12171F; box-shadow: 0 8px 22px -12px rgba(0,0,0,.8); }
.cta.solid:hover { transform: translateY(-2px); }
.cta.outline { border: 1.5px solid rgba(255,255,255,.32); color: #fff; }
.cta.outline:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); }

.hero-stats { display: flex; gap: 28px; flex-wrap: wrap; padding-top: 20px;
              border-top: 1px solid rgba(255,255,255,.14); width: 100%; max-width: 560px; }
.hero-stats .hs b { display: block; font-family: var(--display); font-size: 23px; font-weight: 700;
                    color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hero-stats .hs span { display: block; margin-top: 3px; font-size: 11.5px; color: rgba(255,255,255,.55); }

/* the photo wall: three columns creeping past at different speeds */
.hero-right { position: relative; height: min(72vh, 620px); }
/* No mask-image here. A mask over a container whose children animate has to be
   re-composited every frame; the same fade painted as an overlay is free. */
.wall { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr);
        gap: 10px; overflow: hidden; border-radius: 16px; contain: paint; }
.wall-col {
  display: flex; flex-direction: column; gap: 10px;
  will-change: transform; transform: translate3d(0, 0, 0); backface-visibility: hidden;
}
.wall-col.a { animation: creep 78s linear infinite; }
.wall-col.b { animation: creep 104s linear infinite reverse; }
.wall-col.c { animation: creep 90s linear infinite; }
.wall img { width: 100%; border-radius: 9px; display: block; object-fit: cover; }
/* translate3d keeps the column on its own compositor layer for the whole cycle */
@keyframes creep {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -50%, 0); }
}
.wall-fade {
  position: absolute; inset: 0; pointer-events: none; border-radius: 16px;
  background:
    linear-gradient(180deg, #0A1018 0%, rgba(10,16,24,0) 14%,
                    rgba(10,16,24,0) 86%, #0A1018 100%),
    radial-gradient(72% 58% at 50% 50%, transparent 38%, rgba(8,12,19,.5) 100%);
}
.chem-note { margin: 14px 0 0; font-family: var(--mono); font-size: 10.5px;
             letter-spacing: .05em; color: rgba(255,255,255,.34); }
.hero-fineprint { margin: 7px 0 0; font-size: 11px; line-height: 1.55;
                  color: rgba(255,255,255,.3); max-width: 62ch; }

/* The home screen is meant to be exactly one screen: the hero already carries the
   fine print, so the page chrome around it stands down. */
/* the view's negative margins existed to cancel main's padding; with the padding
   gone they would pull the hero outside the page box instead */
body.on-home main { padding: 0; }
body.on-home #view-home { margin: 0; }
body.on-home .foot { display: none; }

@media (prefers-reduced-motion: reduce) {
  .wall-col { animation: none; }
  .view { animation: none; }
  .cta:hover, .primary:hover { transform: none; }
}

/* ---------------------------------------------------------------- grid */
.grid { display: flex; flex-direction: column; gap: 5px; }
.grow { display: flex; gap: 5px; }
.cell { position: relative; overflow: hidden; border-radius: 6px;
        background: var(--surface-2); flex: 0 0 auto; cursor: zoom-in; }
.cell img { width: 100%; height: 100%; object-fit: cover; display: block;
            opacity: 0; transition: opacity .32s ease, transform .32s ease; }
.cell img.on { opacity: 1; }
.cell::after { content: ""; position: absolute; inset: 0; pointer-events: none;
               box-shadow: inset 0 0 0 1px rgba(128,128,128,.13); border-radius: 6px; }
.cell:hover img { transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) { .cell:hover img { transform: none; } }

.cell .tick {
  position: absolute; top: 8px; left: 8px; width: 22px; height: 22px;
  border-radius: 50%; border: 2px solid rgba(255,255,255,.9);
  background: rgba(0,0,0,.22); backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center; z-index: 2;
}
body.selecting .cell { cursor: pointer; }
body.selecting .cell .tick { display: flex; }
.cell[aria-selected="true"] .tick { background: var(--accent); border-color: var(--accent); }
.cell[aria-selected="true"] .tick svg { opacity: 1; }
.cell .tick svg { width: 13px; height: 13px; opacity: 0; fill: none;
                  stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cell[aria-selected="true"]::after { box-shadow: inset 0 0 0 3px var(--accent); }

/* ---------------------------------------------------------------- people */
.people-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.person { display: flex; flex-direction: column; align-items: center; gap: 8px;
          padding: 10px 6px 12px; border-radius: var(--r-md); transition: background .15s ease; }
.person:hover { background: var(--surface-2); }
.person img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover;
              background: var(--surface-2); box-shadow: var(--shadow-sm); }
.person b { font-size: 13px; font-weight: 600; }
.person span { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.person-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
               margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.back { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2);
        font-size: 14px; padding: 7px 11px; border-radius: 8px; }
.back:hover { background: var(--surface-2); color: var(--ink); }
.back svg { width: 16px; height: 16px; }
.person-id { display: flex; align-items: center; gap: 14px; margin-right: auto; }
.person-id img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
                 background: var(--surface-2); box-shadow: var(--shadow-sm); }
.person-id h2 { margin: 0; font-size: 21px; font-weight: 600; }
.person-id p { margin: 2px 0 0; color: var(--ink-3); font-size: 13.5px; }

/* ---------------------------------------------------------------- findme */
.findme { max-width: 760px; margin: max(4vh, 26px) auto 0; text-align: center; }
.findme .section-head { margin-bottom: 26px; }
.findme .section-head p { margin-left: auto; margin-right: auto; }
.drop { border: 2px dashed var(--rule); border-radius: var(--r-lg);
        padding: 46px 28px 32px; text-align: center; background: var(--surface);
        transition: border-color .18s ease, background .18s ease; }
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop-ico { width: 52px; height: 52px; color: var(--accent); margin-bottom: 10px; }
.drop-main { margin: 0; font-family: var(--display); font-size: 17px; font-weight: 600; }
.drop-sub { margin: 6px 0 0; color: var(--ink-3); font-size: 13.5px; }
.drop-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.drop-actions .primary, .drop-actions .ghost { padding: 10px 20px; font-size: 14.5px; border-radius: 999px; }
.drop-privacy { display: inline-flex; align-items: center; gap: 7px; margin-top: 20px;
                padding: 7px 14px; border-radius: 999px;
                background: var(--good-soft); color: var(--good); font-size: 12.5px; font-weight: 500; }
.drop-privacy svg { width: 14px; height: 14px; }

.findme-status { display: flex; align-items: center; gap: 12px; margin-top: 22px;
                 padding: 15px 18px; border-radius: var(--r-md); background: var(--surface-2); font-size: 14px; }
.spinner { width: 17px; height: 17px; border-radius: 50%; flex: 0 0 auto;
           border: 2px solid var(--rule); border-top-color: var(--accent); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }

#findResults { margin-top: 12px; }
.tierhead { display: flex; align-items: baseline; gap: 10px; margin: 32px 0 12px; }
.tierhead h3 { margin: 0; font-size: 17px; font-weight: 600; }
.tierhead .pill { font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
                  background: var(--accent); color: var(--surface); }
.tierhead .pill.soft { background: var(--surface-2); color: var(--ink-3); }

/* ---------------------------------------------------------------- selbar */
.selbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 22px; z-index: 45;
          display: flex; align-items: center; gap: 18px;
          padding: 11px 14px 11px 20px; border-radius: 999px;
          background: var(--surface); border: 1px solid var(--rule);
          box-shadow: var(--shadow-lg); font-size: 14px; font-weight: 500; }
.selbar-actions { display: flex; gap: 8px; }

/* -------------------------------------------------------------- lightbox */
.lightbox { position: fixed; inset: 0; z-index: 60;
            background: color-mix(in srgb, #08060C 95%, transparent);
            display: flex; align-items: center; justify-content: center; }
.lb-stage { margin: 0; display: flex; flex-direction: column; align-items: center;
            max-width: 100vw; max-height: 100vh; padding: 20px 20px 0; }
.lb-imgwrap { position: relative; display: flex; min-height: 0; }
.lb-imgwrap img { max-width: min(1500px, calc(100vw - 150px)); max-height: calc(100vh - 132px);
                  object-fit: contain; display: block; border-radius: 4px; }
.lb-faces { position: absolute; inset: 0; pointer-events: none; }
.lb-faces .fbox { position: absolute; border: 2px solid rgba(255,255,255,.85); border-radius: 4px;
                  box-shadow: 0 0 0 1px rgba(0,0,0,.4); pointer-events: auto; cursor: pointer;
                  transition: border-color .12s ease, box-shadow .12s ease; }
.lb-faces .fbox.focus { border-color: var(--brand-yellow);
                        box-shadow: 0 0 0 2px rgba(255,200,61,.5), 0 0 18px rgba(255,200,61,.35); }
.lb-faces .fbox.dim { border-color: rgba(255,255,255,.42); border-style: dashed; }
.lb-faces .fbox:hover { border-color: var(--brand-magenta); box-shadow: 0 0 0 2px var(--brand-magenta); }
.lb-faces .fbox span {
  position: absolute; left: 50%; transform: translateX(-50%); top: 100%; margin-top: 5px;
  font-size: 11px; white-space: nowrap; padding: 3px 8px; border-radius: 5px;
  background: rgba(0,0,0,.8); color: #fff; opacity: 0; transition: opacity .12s; font-weight: 500;
}
.lb-faces .fbox:hover span, .lb-faces .fbox.focus span { opacity: 1; }

.lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px;
          width: 100%; padding: 14px 4px; color: rgba(255,255,255,.8); font-size: 13px; }
.lb-meta { font-family: var(--mono); font-size: 12px; }
.lb-tools { display: flex; gap: 8px; }
.lb-bar .ghost { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff; }
.lb-bar .ghost:hover { background: rgba(255,255,255,.2); color: #fff; }
.lb-bar .ghost[aria-pressed="true"] { background: rgba(255,200,61,.2);
                                      border-color: var(--brand-yellow); color: var(--brand-yellow); }

.lb-close, .lb-nav { position: absolute; z-index: 2; color: rgba(255,255,255,.85);
                     width: 44px; height: 44px; border-radius: 50%;
                     display: flex; align-items: center; justify-content: center;
                     background: rgba(255,255,255,.09); }
.lb-close:hover, .lb-nav:hover { background: rgba(255,255,255,.2); color: #fff; }
.lb-close { top: 18px; right: 20px; }
.lb-close svg, .lb-nav svg { width: 22px; height: 22px; }
.lb-nav.prev { left: 18px; top: 50%; margin-top: -22px; }
.lb-nav.next { right: 18px; top: 50%; margin-top: -22px; }

/* ---------------------------------------------------------------- misc */
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 84px; z-index: 70;
         background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 999px;
         font-size: 13.5px; font-weight: 500; box-shadow: var(--shadow-lg); }

.foot { max-width: 2100px; margin: 0 auto; padding: 30px 22px 60px;
        border-top: 1px solid var(--rule); color: var(--ink-3); font-size: 12.5px; }
.foot p { margin: 0 0 5px; max-width: 80ch; }
.foot-meta { font-family: var(--mono); font-variant-numeric: tabular-nums; }

@media (max-width: 1040px) {
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .hero-right { height: 300px; }
  .hero { min-height: 0; padding: 30px 22px 46px; }
  .chem-note { position: static; text-align: left; margin-top: 10px; }
}
@media (max-width: 940px) {
  .about { grid-template-columns: 1fr; gap: 26px; }
  .brand-text small { display: none; }
}
@media (max-width: 900px) {
  .topbar-in { flex-wrap: wrap; height: auto; padding: 10px 14px; gap: 10px; }
  .tabs { order: 3; width: 100%; margin-left: 0; overflow-x: auto; scrollbar-width: none; gap: 2px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 8px 10px; gap: 5px; }
  .tab span { font-size: 13px; }
  main { padding: 14px 14px 130px; }
  #view-home { margin: -14px -14px 0; }
  .filterbar { padding: 0 14px; }
  .hero { padding: 26px 16px 40px; }
  .hero-right { height: 240px; }
  .hero-stats { gap: 18px; }
  .stats { margin-top: -26px; }
  .lb-imgwrap img { max-width: 100vw; max-height: calc(100vh - 152px); }
  .lb-nav { display: none; }
  .lb-stage { padding: 10px 0 0; }
  .people-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
  .person img { width: 72px; height: 72px; }
  .hero-mosaic img { height: 108px; }
}