/* ============================================================
   VARIABLES
   ============================================================ */
:root {
  --bg:           #050a0e;
  --cyan:         #00e5ff;
  --cyan-dim:     rgba(0,229,255,0.55);
  --cyan-border:  rgba(0,229,255,0.18);
  --orange:       #ff6b35;
  --orange-dim:   rgba(255,107,53,0.13);
  --white:        #ffffff;
  --text:         #c0d4e0;
  --muted:        #4a6070;
  --border:       rgba(0,229,255,0.13);
  --font:         'Space Mono', 'Courier New', monospace;
  --nav-h:        52px;
  --bar-h:        30px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html,body {
  width:100%; height:100%;
  overflow:hidden;
  background:var(--bg);
  font-family:var(--font);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}

/* ============================================================
   LOADER
   ============================================================ */
#loader {
  position:fixed; inset:0; z-index:1000;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .7s ease, visibility .7s ease;
}
#loader.hidden { opacity:0; visibility:hidden; pointer-events:none; }

.loader-content { text-align:center; }

.loader-brand {
  font-size:clamp(52px,8vw,84px);
  font-weight:700;
  color:var(--cyan);
  letter-spacing:.35em;
  margin-bottom:28px;
  text-shadow:0 0 40px rgba(0,229,255,.4);
}

.loader-line {
  width:220px; height:2px;
  background:rgba(0,229,255,.1);
  margin:0 auto 14px;
  overflow:hidden;
}
#loader-bar {
  height:100%; width:0%;
  background:var(--cyan);
  transition:width .25s ease;
  box-shadow:0 0 10px var(--cyan);
}

.loader-label {
  font-size:10px;
  letter-spacing:.3em;
  color:var(--muted);
}

/* ============================================================
   NAV
   ============================================================ */
#main-nav {
  position:fixed; top:0; left:0; right:0;
  height:var(--nav-h);
  z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(14px,3vw,44px);
  background:linear-gradient(180deg,rgba(5,10,14,.96) 0%,rgba(5,10,14,0) 100%);
  border-bottom:1px solid var(--border);
}

.nav-left {
  display:flex; align-items:center; gap:8px;
  flex-shrink:0;
}
.nav-brand {
  font-size:17px; font-weight:700;
  color:var(--cyan); letter-spacing:.12em;
}
.nav-sep { color:var(--muted); font-size:11px; }
.nav-brand-full {
  font-size:10px; letter-spacing:.22em;
  color:var(--muted);
}

.nav-center {
  display:flex; align-items:center;
  gap:clamp(10px,2.2vw,32px);
}

.nav-link {
  background:none; border:none; cursor:pointer;
  font-family:var(--font);
  font-size:clamp(9px,0.85vw,11px);
  letter-spacing:.22em;
  color:var(--muted);
  padding:4px 0; position:relative;
  transition:color .2s ease;
}
.nav-link::after {
  content:'';
  position:absolute; bottom:0; left:0; right:0;
  height:1px; background:var(--cyan);
  transform:scaleX(0);
  transition:transform .25s ease;
}
.nav-link:hover,.nav-link.active { color:var(--cyan); }
.nav-link.active::after,.nav-link:hover::after { transform:scaleX(1); }

.nav-right {
  display:flex; align-items:center; gap:10px;
  flex-shrink:0;
}

.nav-social {
  display:flex; align-items:center; gap:6px;
}

.social-btn {
  font-family:var(--font);
  font-size:8px; letter-spacing:.22em;
  text-decoration:none;
  padding:4px 11px;
  border:1px solid;
  transition:color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}
.social-btn--linkedin {
  color:#4a9eff;
  border-color:rgba(74,158,255,.35);
  background:rgba(74,158,255,.06);
}
.social-btn--linkedin:hover {
  color:#fff;
  border-color:#4a9eff;
  background:rgba(74,158,255,.15);
  box-shadow:0 0 12px rgba(74,158,255,.25);
}
.social-btn--github {
  color:#00e5a0;
  border-color:rgba(0,229,160,.35);
  background:rgba(0,229,160,.06);
}
.social-btn--github:hover {
  color:#fff;
  border-color:#00e5a0;
  background:rgba(0,229,160,.15);
  box-shadow:0 0 12px rgba(0,229,160,.25);
}
.social-btn--resume {
  color:var(--orange);
  border-color:rgba(255,107,53,.35);
  background:rgba(255,107,53,.06);
}
.social-btn--resume:hover {
  color:#fff;
  border-color:var(--orange);
  background:rgba(255,107,53,.15);
  box-shadow:0 0 12px rgba(255,107,53,.25);
}

.nav-divider {
  width:1px; height:16px;
  background:var(--border);
  flex-shrink:0;
}

.status-dot {
  width:6px; height:6px; border-radius:50%;
  background:#00ff88;
  box-shadow:0 0 7px #00ff88;
  animation:blink 2.4s ease infinite;
  flex-shrink:0;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.35} }

.status-text { font-size:9px; letter-spacing:.2em; color:var(--muted); }

.nav-progress-bar {
  position:absolute; bottom:0; left:0; right:0;
  height:1px; background:rgba(0,229,255,.06);
}
#nav-progress-fill {
  height:100%; width:0%;
  background:var(--cyan);
  box-shadow:0 0 8px var(--cyan);
  transition:width .12s linear;
}

/* ============================================================
   VIDEO WRAPPER
   ============================================================ */
#video-wrapper {
  position:fixed; inset:0; overflow:hidden;
}

#bg-video {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:100%; height:100%;
  object-fit:contain;
  background:var(--bg);
}

#reading-vignette {
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(
    90deg,
    transparent 0%,
    transparent 30%,
    rgba(5,10,14,.45) 48%,
    rgba(5,10,14,.82) 62%,
    rgba(5,10,14,.93) 78%,
    rgba(5,10,14,.97) 100%
  );
  transition:opacity .5s ease;
}

/* Intro, experience, research, and project sub-panels — hide vignette, they manage their own overlays */
#video-wrapper[data-section="0"] #reading-vignette,
#video-wrapper[data-section="1"] #reading-vignette,
#video-wrapper[data-section="2"] #reading-vignette,
#video-wrapper[data-section="3"] #reading-vignette,
#video-wrapper[data-section="4"] #reading-vignette,
#video-wrapper[data-section="5"] #reading-vignette,
#video-wrapper[data-section="6"] #reading-vignette,
#video-wrapper[data-section="7"] #reading-vignette {
  opacity:0;
}

/* ============================================================
   EXPERIENCE PANEL (panel-1)
   ============================================================ */

/* Two-class selector beats the single-class .content-panel rules */
.content-panel.exp-panel {
  position:absolute;
  inset:0;
  width:100%;
  padding:0;
  align-items:unset;
}

/* "WORK EXPERIENCE" big heading — top-left, above the eBay box */
.exp-section-heading {
  position:absolute;
  top:calc(var(--nav-h) + clamp(14px,2vh,28px));
  left:clamp(20px,3vw,56px);
  z-index:1;
  pointer-events:none;
}
.exp-heading-text {
  font-size:clamp(24px,3.1vw,43px);
  font-weight:700;
  color:var(--white);
  line-height:.92;
  letter-spacing:.04em;
}
.exp-heading-text span { color:var(--cyan); }

.exp-box {
  position:absolute;
  /* width is overridden per-box so margin:auto centering works */
  background:rgba(5,10,14,.9);
  border:1px solid var(--border);
  padding:clamp(22px,3vh,36px) clamp(24px,2.8vw,40px);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

/* eBay box — left half, vertical position set by translateY
   translateY(-100%) = sits exactly above center line
   translateY(-50%)  = centered on screen
   increase the number toward 0 to move it DOWN */
.exp-box-ebay {
  top:50%;
  transform:translateY(-90%);
  left:0;
  right:50%;
  width:clamp(320px,44vw,640px);
  margin:0 auto;
}

/* Multiply Labs box — right half, vertical position set by translateY
   translateY(100%) = sits exactly below center line
   translateY(50%)  = centered on screen
   decrease the number toward 0 to move it UP */
.exp-box-multiply {
  bottom:50%;
  transform:translateY(120%);
  left:50%;
  right:0;
  width:clamp(320px,44vw,640px);
  margin:0 auto;
}

/* "// eBay_ML.ENGINEERING" label above company name */
.exp-box-eyebrow {
  font-size:12px; letter-spacing:.26em;
  color:var(--muted); margin-bottom:12px;
}

/* Company name — e.g. "eBay Inc." */
.exp-box-company {
  font-size:clamp(18px,2.3vw,36px);
  font-weight:700; color:var(--white);
  letter-spacing:.05em; margin-bottom:6px;
}

/* Role line — e.g. "Machine Learning Engineer · Intern · Summer 2024" */
.exp-box-role {
  font-size:clamp(9px,1vw,13px); letter-spacing:.13em;
  color:var(--cyan); margin-bottom:16px;
}

/* Bullet points */
.exp-box-bullets {
  list-style:none; margin-bottom:16px;
}
.exp-box-bullets li {
  font-size:clamp(11px,1.1vw,13px);
  color:var(--text); line-height:1.65;
  padding-left:18px; position:relative;
  margin-bottom:7px;
}
.exp-box-bullets li::before {
  content:'►'; position:absolute; left:0;
  color:var(--muted); font-size:8px; top:4px;
}
.exp-box-bullets li strong { color:var(--white); }

/* Tag pills at the bottom of each box — e.g. "PATENT HOLDER"
   NOTE: .exp-box-tags .tag.small selector is needed because .tag.small
   (defined later in this file) has equal specificity and would otherwise win */
.exp-box-tags { display:flex; gap:6px; flex-wrap:wrap; }
.exp-box-tags .tag,
.exp-box-tags .tag.small {
  font-size:9px;
  padding:3px 9px;
  letter-spacing:.15em;
}

/* ============================================================
   RESEARCH PANELS (panels 2-4) — spotlight blur layouts
   ============================================================ */

/* Two-class selector beats the single-class .content-panel rules */
.content-panel.research-panel {
  position:absolute;
  inset:0;
  width:100%;
  padding:0;
  align-items:unset;
}

/* "RESEARCH & PATENTS" big heading — always top-left */
.rp-header {
  position:absolute;
  top:calc(var(--nav-h) + clamp(14px,2vh,28px));
  left:clamp(20px,3vw,56px);
  z-index:3;
  pointer-events:none;
}
.rp-section-title {
  font-size:clamp(24px,3.1vw,43px);
  font-weight:700;
  color:var(--white);
  line-height:.92;
  letter-spacing:.03em;
}
.rp-section-title .title-accent { color:var(--cyan); }

/* Research content box — same dark container as exp-box */
.rp-box {
  position:absolute;
  background:rgba(5,10,14,.9);
  border:1px solid var(--border);
  padding:clamp(22px,3vh,36px) clamp(24px,2.8vw,40px);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:2;
}

/* Panel 2: box centered in right half */
.rp-box--right {
  top:50%; transform:translateY(-50%);
  left:50%; right:0;
  width:clamp(360px,48vw,700px);
  margin:0 auto;
}

/* Panel 3: box centered in left half */
.rp-box--left {
  top:50%; transform:translateY(-50%);
  left:0; right:50%;
  width:clamp(360px,48vw,700px);
  margin:0 auto;
}

/* Panel 4: box centered across full screen width */
.rp-box--center {
  top:50%; transform:translateY(-50%);
  left:0; right:0;
  width:clamp(360px,48vw,700px);
  margin:0 auto;
}

/* Full-height blur strips — visual context behind each research box */
.rp-blur {
  position:absolute; top:0; bottom:0;
  background:rgba(0,0,0,0.9);
  z-index:1;
}
.rp-blur--right-half    { right:0; width:50%; }
/* Panel 2: blur right half (behind the box) */
.rp-blur--right-half   { right:0; width:50%; }
/* Panel 2 alt / Panel 3: blur left half */
.rp-blur--left-half    { left:0; width:50%; }
/* Panel 3: blur right quarter */
.rp-blur--right-quarter { right:0; width:25%; }
/* Panel 4: blur left three-quarters */
.rp-blur--left-3q      { left:0; width:75%; }

/* Research item text — nearly doubled for readability */
.rp-badge {
  font-size:11px; letter-spacing:.22em;
  color:var(--cyan); margin-bottom:14px;
}
.rp-item-title {
  font-size:clamp(18px,2.3vw,34px);
  font-weight:700; color:var(--white);
  letter-spacing:.02em; margin-bottom:12px;
  line-height:1.1;
}
.rp-venue {
  font-size:clamp(9px,1vw,12px);
  letter-spacing:.12em; color:var(--cyan-dim);
  margin-bottom:20px;
}
.rp-desc {
  font-size:clamp(11px,1.1vw,13px);
  color:var(--text); line-height:1.75;
  margin-bottom:22px;
}
/* mobile-only bullet lists for research panels (shown only in portrait mobile query) */
.rp-mobile-bullets { display: none; }
/* shared tag row */
.research-tags { display:flex; gap:5px; flex-wrap:wrap; }
/* Tag size override — same cascade fix as exp-box-tags */
.research-tags .tag,
.research-tags .tag.small {
  font-size:9px; padding:3px 9px; letter-spacing:.15em;
}

/* ============================================================
   PROJECT PANELS (panels 5-7)
   ============================================================ */

.content-panel.proj-panel {
  position:absolute; inset:0; width:100%; padding:0; align-items:unset;
}

/* "SELECTED PROJECTS" heading — upper RIGHT (unlike exp which is upper left) */
.proj-header {
  position:absolute;
  top:calc(var(--nav-h) + clamp(14px,2vh,28px));
  right:clamp(20px,3vw,56px);
  z-index:3; pointer-events:none; text-align:right;
}
.proj-section-title {
  font-size:clamp(24px,3.1vw,43px);
  font-weight:700; color:var(--white); line-height:.92; letter-spacing:.03em;
}
.proj-section-title .title-accent { color:var(--cyan); }

/* Frosted blur strip covering one side of the screen */
.proj-blur {
  position:absolute; top:0; bottom:0;
  background:rgba(0, 0, 0, 0.8);
  z-index:1;
}
.proj-blur--left  { left:0; width:50%; }
.proj-blur--right { right:0; width:50%; }

/* Project content box — identical style to exp-box */
.proj-box {
  position:absolute;
  background:rgba(5,10,14,.9);
  border:1px solid var(--border);
  padding:clamp(22px,3vh,36px) clamp(24px,2.8vw,40px);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  z-index:2;
}

/* Box centered in left half — for panels 5 and 7 */
.proj-box--left {
  top:50%; transform:translateY(-50%);
  left:0; right:50%;
  width:clamp(320px,44vw,640px); margin:0 auto;
}

/* Box centered in right half — for panel 6 (Skeye) */
.proj-box--right {
  top:50%; transform:translateY(-50%);
  left:50%; right:0;
  width:clamp(320px,44vw,640px); margin:0 auto;
}

/* Box in upper-right corner — for panel 7 (Reflex, no blur) */
.proj-box--top-right {
  top:calc(var(--nav-h) + clamp(120px,18vh,200px));
  right:clamp(80px,10vw,180px);
  width:clamp(320px,44vw,640px);
}

/* Project box text — same sizes as exp-box */
.proj-box-eyebrow { font-size:9px; letter-spacing:.26em; color:var(--muted); margin-bottom:12px; }
.proj-box-title   { font-size:clamp(18px,2.3vw,34px); font-weight:700; color:var(--white); letter-spacing:.05em; margin-bottom:6px; }
.proj-box-role    { font-size:clamp(9px,1vw,13px); letter-spacing:.13em; color:var(--cyan); margin-bottom:16px; }
.proj-box-bullets { list-style:none; margin-bottom:16px; }
.proj-box-bullets li {
  font-size:clamp(11px,1.1vw,13px); color:var(--text); line-height:1.65;
  padding-left:18px; position:relative; margin-bottom:7px;
}
.proj-box-bullets li::before { content:'►'; position:absolute; left:0; color:var(--muted); font-size:8px; top:4px; }
.proj-box-bullets li strong { color:var(--white); }
.proj-box-tags { display:flex; gap:6px; flex-wrap:wrap; }
/* Same tag override as exp-box to beat .tag.small cascade */
.proj-box-tags .tag,
.proj-box-tags .tag.small {
  font-size:9px; padding:3px 9px; letter-spacing:.15em;
}

/* ============================================================
   CONTENT PANELS
   ============================================================ */
.content-panel {
  position:absolute;
  top:var(--nav-h);
  right:0;
  bottom:var(--bar-h);
  width:clamp(380px,50vw,720px);
  display:flex;
  align-items:center;
  padding:0 clamp(20px,3.5vw,56px);
  /* opacity, transform, pointer-events are all set by JS — no CSS transition */
  opacity:0;
  pointer-events:none;
  transform:translateY(18px);
  will-change:opacity, transform;
}

.panel-inner {
  width:100%;
  max-height:calc(100vh - var(--nav-h) - var(--bar-h) - 28px);
  overflow-y:auto;
  padding-right:6px;
  scrollbar-width:thin;
  scrollbar-color:var(--cyan-border) transparent;
}
.panel-inner::-webkit-scrollbar { width:3px; }
.panel-inner::-webkit-scrollbar-track { background:transparent; }
.panel-inner::-webkit-scrollbar-thumb { background:var(--cyan-border); }

.section-eyebrow {
  font-size:9px; letter-spacing:.32em;
  color:var(--muted); margin-bottom:10px;
}

/* ============================================================
   PANEL 0 — INTRO
   ============================================================ */
.hero-name { line-height:.9; margin-bottom:10px; }
.name-line-1 {
  display:block;
  font-size:clamp(34px,5.2vw,70px);
  font-weight:700; color:var(--white);
  letter-spacing:.03em;
}
.name-line-2 {
  display:block;
  font-size:clamp(34px,5.2vw,70px);
  font-weight:700; color:var(--cyan);
  letter-spacing:.03em;
  text-shadow:0 0 30px rgba(0,229,255,.3);
}
.hero-subtitle {
  font-size:clamp(8px,.85vw,10px);
  letter-spacing:.22em; color:var(--muted);
  margin-bottom:14px;
}

.tag-row { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:16px; }
.tag {
  font-size:8px; letter-spacing:.16em;
  padding:3px 9px;
  border:1px solid var(--border);
  color:var(--muted);
  white-space:nowrap;
}
.tag.tag-accent {
  border-color:rgba(255,107,53,.45);
  color:var(--orange);
  background:var(--orange-dim);
}
.tag.small { font-size:7.5px; padding:2px 7px; }

.bio-text {
  font-size:clamp(10px,1vw,12px);
  line-height:1.75; color:var(--text);
  margin-bottom:18px;
}
.bio-text strong { color:var(--white); }

.stats-row {
  display:flex; align-items:stretch;
  border:1px solid var(--border);
  margin-bottom:18px;
}
.stat-item { flex:1; padding:10px 14px; text-align:center; }
.stat-divider { width:1px; background:var(--border); }
.stat-value {
  font-size:clamp(16px,2.4vw,26px);
  font-weight:700; color:var(--cyan);
  letter-spacing:.05em;
}
.stat-label {
  font-size:7.5px; letter-spacing:.2em;
  color:var(--muted); margin-top:3px;
}

.two-col { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.col-label {
  font-size:8px; letter-spacing:.26em; color:var(--muted);
  border-bottom:1px solid var(--border);
  padding-bottom:5px; margin-bottom:8px;
}
.list-item {
  font-size:clamp(8px,.85vw,10px);
  color:var(--text); margin-bottom:5px;
  letter-spacing:.04em;
}

.stack-row { display:flex; align-items:baseline; gap:8px; margin-bottom:5px; flex-wrap:wrap; }
.stack-cat {
  font-size:8.5px; color:var(--cyan-dim);
  letter-spacing:.1em; white-space:nowrap; min-width:68px;
}
.stack-items { font-size:8.5px; color:var(--muted); letter-spacing:.04em; }

/* ============================================================
   SHARED SECTION TITLE
   ============================================================ */
.section-title {
  font-size:clamp(26px,3.8vw,50px);
  font-weight:700; color:var(--white);
  line-height:.96; letter-spacing:.02em;
  margin-bottom:22px;
}
.title-accent { color:var(--cyan); }

/* ============================================================
   PANEL 5 — PROJECTS
   ============================================================ */
.project-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.project-item {
  border:1px solid var(--border);
  padding:12px; display:flex; gap:10px;
  transition:border-color .2s ease;
}
.project-item:hover { border-color:rgba(0,229,255,.3); }
.project-item.featured { grid-column:1/-1; border-color:rgba(0,229,255,.28); }
.project-number { font-size:10px; font-weight:700; color:var(--cyan); opacity:.4; flex-shrink:0; }
.project-title { font-size:clamp(9.5px,1vw,12px); font-weight:700; color:var(--white); letter-spacing:.05em; margin-bottom:5px; }
.project-award { margin-bottom:5px; }
.project-desc { font-size:clamp(8.5px,.82vw,10.5px); color:var(--text); line-height:1.65; margin-bottom:6px; }
.project-stack { font-size:8.5px; color:var(--cyan-dim); letter-spacing:.1em; }

/* ============================================================
   PANEL 6 — CONTACT
   ============================================================ */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:22px; }
.contact-item {
  border:1px solid var(--border);
  padding:14px; display:flex; flex-direction:column; gap:5px;
  text-decoration:none;
  transition:border-color .2s ease, background .2s ease;
}
a.contact-item:hover { border-color:var(--cyan-dim); background:rgba(0,229,255,.04); }
.contact-label { font-size:7.5px; letter-spacing:.3em; color:var(--muted); }
.contact-value { font-size:clamp(9px,.95vw,12px); color:var(--cyan); letter-spacing:.05em; }
.contact-footer {
  display:flex; align-items:center; gap:10px;
  font-size:10px; color:var(--text);
  border-top:1px solid var(--border); padding-top:14px;
}

/* ============================================================
   PANEL LINK BUTTONS (research + project boxes)
   Intentionally different from .tag pills:
   — taller padding, SVG icon, glow on hover, separator line above
   ============================================================ */
.panel-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.panel-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 8.5px;
  letter-spacing: .18em;
  color: var(--text);
  text-decoration: none;
  padding: 8px 14px 8px 11px;
  border: 1px solid rgba(0,229,255,.22);
  background: rgba(0,229,255,.04);
  white-space: nowrap;
  transition: color .2s, border-color .2s, background .2s, box-shadow .2s;
}
.panel-link svg {
  width: 12px; height: 12px;
  flex-shrink: 0;
  color: var(--cyan);
  transition: color .2s;
}
.panel-link:hover {
  color: var(--white);
  border-color: var(--cyan);
  background: rgba(0,229,255,.10);
  box-shadow: 0 0 14px rgba(0,229,255,.14);
}
.panel-link:hover svg { color: var(--white); }

.panel-link--accent {
  border-color: rgba(255,107,53,.32);
  background: rgba(255,107,53,.05);
}
.panel-link--accent svg { color: var(--orange); }
.panel-link--accent:hover {
  color: var(--white);
  border-color: var(--orange);
  background: rgba(255,107,53,.12);
  box-shadow: 0 0 14px rgba(255,107,53,.16);
}
.panel-link--accent:hover svg { color: var(--white); }

/* ============================================================
   SECTION INDICATORS
   ============================================================ */
#section-indicators {
  position:fixed;
  right:clamp(10px,1.6vw,20px);
  top:50%; transform:translateY(-50%);
  z-index:50;
  display:flex; flex-direction:column;
  align-items:center; gap:14px;
}
.indicator { display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer; }
.indicator-dot {
  width:5px; height:5px; border-radius:50%;
  border:1px solid var(--muted);
  transition:background .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.indicator.active .indicator-dot {
  background:var(--cyan); border-color:var(--cyan);
  box-shadow:0 0 8px var(--cyan);
}
.indicator-label {
  font-size:6.5px; letter-spacing:.2em;
  color:transparent;
  transition:color .25s ease;
}
.indicator:hover .indicator-label,
.indicator.active .indicator-label { color:var(--muted); }

/* ============================================================
   STATUS BAR
   ============================================================ */
#status-bar {
  position:fixed; bottom:0; left:0; right:0;
  height:var(--bar-h); z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(14px,3vw,44px);
  background:linear-gradient(0deg,rgba(5,10,14,.96) 0%,rgba(5,10,14,0) 100%);
  border-top:1px solid var(--border);
  font-size:8.5px; letter-spacing:.16em; color:var(--muted);
}
#scroll-hint {
  position: fixed;
  top: 135px;
  right: 64px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  color: var(--cyan);
  font-family: var(--font);
  font-size: 14px;
  letter-spacing: .22em;
  opacity: 1;
  pointer-events: none;
  z-index: 90;
  text-shadow: 0 0 18px rgba(0,229,255,.5);
  animation: scroll-hint-fade-in 0.5s ease forwards, scroll-hint-flash 2s ease-in-out 1.4s infinite;
  transition: opacity .6s ease;
}
#scroll-hint svg {
  width: 30px;
  height: 30px;
  align-self: flex-end;
  filter: drop-shadow(0 0 8px rgba(0,229,255,.6));
  animation: scroll-hint-bounce 1.6s ease-in-out infinite;
}
#scroll-hint.hidden { animation: scroll-hint-fade-out 0.6s ease forwards; }
@keyframes scroll-hint-bounce {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}
@keyframes scroll-hint-fade-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scroll-hint-flash {
  0%,100% { opacity: 1; text-shadow: 0 0 18px rgba(0,229,255,.5); }
  50%      { opacity: .25; text-shadow: none; }
}
@keyframes scroll-hint-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ============================================================
   SCAN-LINE TEXTURE (subtle)
   ============================================================ */
body::after {
  content:'';
  position:fixed; inset:0;
  background:repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 3px,
    rgba(0,0,0,.025) 3px,
    rgba(0,0,0,.025) 4px
  );
  pointer-events:none;
  z-index:200;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px) {
  .two-col { grid-template-columns:1fr; }
  .project-grid { grid-template-columns:1fr; }
  .project-item.featured { grid-column:1; }
  .nav-brand-full { display:none; }
}

@media (max-width:900px) {
  .content-panel {
    width:100%;
    align-items:flex-end;
    padding-bottom:36px;
  }
  #reading-vignette {
    background:linear-gradient(
      180deg,
      transparent 0%,
      rgba(5,10,14,.85) 45%,
      rgba(5,10,14,.96) 100%
    );
  }
  .panel-inner { max-height:58vh; }
  .stats-row { flex-wrap:wrap; }
  .stat-item { min-width:40%; }
}

@media (max-width:680px) {
  .nav-center { gap:10px; }
  .nav-link { font-size:8px; letter-spacing:.14em; }
  .contact-grid { grid-template-columns:1fr; }
  .status-right { display:none; }
}

@media (min-width:1800px) {
  .content-panel { width:44vw; }
}

/* Mobile-only panels are invisible on desktop/landscape */
.content-panel.mobile-only { display: none !important; }

/* Mobile nav icons hidden on desktop */
.mobile-nav-icons { display: none; }
/* Mobile contact strip hidden on desktop */
.mobile-contact-strip { display: none; }

/* ============================================================
   MOBILE PORTRAIT — phone vertical only
   Horizontal / square displays are entirely unaffected.
   ============================================================ */
@media (orientation: portrait) and (max-width: 800px) {

  /* Video fills the portrait screen */
  #bg-video { object-fit: cover; }

  /* Remove all blur/vignette overlays */
  #reading-vignette,
  .rp-blur,
  .proj-blur { display: none !important; }

  /* ── NAV ── */
  .nav-brand-full,
  .nav-social,
  .nav-center,
  .nav-divider,
  .status-dot,
  .status-text { display: none; }

  /* Icon-only social strip replaces the text nav on mobile */
  .mobile-nav-icons {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
  }
  .mobile-icon-btn {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border: 1px solid var(--border);
    color: var(--muted);
    text-decoration: none;
    flex-shrink: 0;
    transition: color .2s, border-color .2s, background .2s;
  }
  .mobile-icon-btn svg { width: 14px; height: 14px; }
  .mobile-icon-btn:hover { color: var(--cyan); border-color: var(--cyan-border); background: rgba(0,229,255,.06); }

  /* ── STATUS BAR ── */
  .status-right { display: none; }

  /* ── SCROLL HINT — bottom centre, left-pointing arrow ── */
  #scroll-hint {
    top: auto;
    right: auto;
    bottom: calc(var(--bar-h) + 80px);
    left: 50%;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    white-space: nowrap;
    /* Override the base animation: include translateX(-50%) so the fill
       doesn't clobber the centering transform */
    animation: scroll-hint-fade-in-mobile 0.5s ease forwards,
               scroll-hint-flash 2s ease-in-out 1.4s infinite;
  }
  @keyframes scroll-hint-fade-in-mobile {
    from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
  }
  #scroll-hint svg {
    width: 20px;
    height: 20px;
    transform: rotate(-90deg);
    animation: scroll-hint-bounce-left 1.6s ease-in-out infinite;
  }
  @keyframes scroll-hint-bounce-left {
    0%,100% { transform: rotate(-90deg) translateY(0); }
    50%      { transform: rotate(-90deg) translateY(5px); }
  }

  /* ── SECTION INDICATORS — horizontal row at bottom ── */
  #section-indicators {
    top: auto;
    right: auto;
    bottom: calc(var(--bar-h) + 10px);
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
    gap: 12px;
  }
  .indicator-label { display: none; }

  /* Mobile-only panels shown on mobile */
  .content-panel.mobile-only { display: flex !important; }

  /* ── SECTION HEADING OVERLAYS — hidden, video has its own ── */
  .rp-header,
  .proj-header,
  .exp-section-heading { display: none; }

  /* ── EXPERIENCE PANEL ── */
  /* Hide Multiply Labs from panel-1 on mobile (it gets its own panel-1b) */
  #panel-1 .exp-box-multiply { display: none; }

  /* Full-screen single-box layout used by both panel-1 (eBay) and panel-1b (Multiply) */
  .content-panel.exp-panel {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    overflow: hidden;
    padding: calc(var(--nav-h) + 8px) 10px calc(var(--bar-h) + 8px);
    gap: 8px;
  }
  .content-panel.exp-panel .exp-box,
  .content-panel.exp-panel .exp-box-mobile-single {
    position: relative;
    top: auto; bottom: auto; left: auto; right: auto;
    transform: none;
    width: 100%;
    margin: 0;
    padding: 14px 16px;
  }
  /* Single-box variant used in panel-1b: top-aligned */
  .content-panel.exp-panel {
    justify-content: flex-start;
  }
  .exp-box-eyebrow  { font-size: 7px; margin-bottom: 5px; }
  .exp-box-company  { font-size: 16px; margin-bottom: 3px; }
  .exp-box-role     { font-size: 8px; margin-bottom: 6px; }
  /* Show all bullets on mobile */
  .exp-box-bullets  { display: block; margin-bottom: 8px; }
  .exp-box-bullets li { font-size: 9px; line-height: 1.45; padding-left: 14px; margin-bottom: 2px; }
  .exp-box-tags     { gap: 4px; }
  .exp-box-tags .tag,
  .exp-box-tags .tag.small { font-size: 7px; padding: 2px 6px; }

  /* ── RESEARCH PANELS ── */
  .content-panel.research-panel {
    display: flex !important;
    align-items: flex-start;
    justify-content: flex-start;
    overflow-y: auto;
    padding: calc(var(--nav-h) + 8px) 10px calc(var(--bar-h) + 8px);
  }
  .content-panel.research-panel .rp-box {
    position: relative;
    top: auto; left: auto; right: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 12px;
  }
  /* Strip badge and tags; show venue + 2-line clamped description */
  .rp-badge,
  .research-tags { display: none; }
  .rp-item-title { font-size: 16px; margin-bottom: 4px; line-height: 1.2; }
  .rp-venue      { font-size: 8px; margin-bottom: 7px; }
  .rp-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 9px;
    line-height: 1.5;
    margin-bottom: 10px;
  }
  /* All research panels: hide clamped prose, show bullet list instead */
  .content-panel.research-panel .rp-desc { display: none; }

  .content-panel.research-panel .rp-mobile-bullets {
    display: block;
    margin: 0 0 10px 0;
    padding-left: 14px;
    font-size: 9px;
    color: var(--text);
    line-height: 1.6;
    list-style: disc;
  }
  .content-panel.research-panel .rp-mobile-bullets li { margin-bottom: 4px; }

  /* Give research boxes a bit more vertical room */
  .content-panel.research-panel .rp-box { padding: 14px 14px 16px; }

  /* ── PROJECT PANELS ── */
  .content-panel.proj-panel {
    display: flex !important;
    align-items: flex-start;
    justify-content: flex-start;
    overflow-y: auto;
    padding: calc(var(--nav-h) + 8px) 10px calc(var(--bar-h) + 8px);
  }
  .content-panel.proj-panel .proj-box {
    position: relative;
    top: auto; left: auto; right: auto; bottom: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 12px;
  }
  .proj-box-eyebrow { font-size: 7px; margin-bottom: 5px; }
  .proj-box-title   { font-size: 16px; margin-bottom: 3px; }
  .proj-box-role    { font-size: 8px; margin-bottom: 6px; }
  /* Show all bullets on mobile */
  .proj-box-bullets { display: block; margin-bottom: 10px; }
  .proj-box-bullets li { font-size: 9px; line-height: 1.45; padding-left: 14px; margin-bottom: 2px; }
  .proj-box-tags    { display: none; }

  /* ── CONTACT PANEL ── */
  .content-panel {
    width: 100%;
    right: 0;
    left: 0;
    padding: 0 12px;
    align-items: flex-start;
    justify-content: flex-start;
  }
  /* Hide desktop contact content on mobile */
  .contact-grid,
  .contact-footer,
  #panel-8 .section-eyebrow { display: none; }
  #panel-8 .section-title { font-size: 20px; margin-bottom: 14px; }

  /* Frosted panel-inner backdrop */
  .panel-inner {
    max-height: none;
    padding: 18px 16px;
    padding-right: 16px;
    background: rgba(5,10,14,.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border);
  }

  /* Mobile contact icon strip */
  .mobile-contact-strip {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  .mc-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 14px;
    border: 1px solid var(--border);
    background: rgba(0,229,255,.04);
    text-decoration: none;
    color: var(--text);
    transition: border-color .2s, background .2s;
  }
  .mc-tile svg { width: 18px; height: 18px; color: var(--cyan); flex-shrink: 0; }
  .mc-tile:hover { border-color: var(--cyan-border); background: rgba(0,229,255,.09); }
  .mc-tile-label { font-size: 7px; letter-spacing: .28em; color: var(--muted); margin-bottom: 2px; }
  .mc-tile-value { font-size: 11px; color: var(--cyan); letter-spacing: .04em; }

  /* ── PANEL LINKS ── */
  .panel-links { gap: 4px; margin-top: 10px; padding-top: 8px; }
  .panel-link  { font-size: 7.5px; padding: 5px 9px 5px 8px; }
  .panel-link svg { width: 10px; height: 10px; }

  /* ── BOTTOM-PINNED PANELS ── */
  /* Multiply Labs (panel-1b) and Skeye (panel-6) sit near the bottom */
  #panel-1b { justify-content: flex-end; padding-bottom: calc(var(--bar-h) + 48px); }
  #panel-6  { align-items: flex-end; }
}