/* ==========================================================================
   ALEX CÁRDENAS PORTFOLIO v4.1 — BRUTAL ARCHITECTURE EDITION
   Direction: Brutalism × Tadao Ando × Virgil Abloh
   Palette: Monochrome + Ultramarine Blue Accent
   v4.1: Light mode token overhaul + cursor blend-mode fix
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Space+Grotesk:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap');

/* ─── DARK MODE TOKENS (default) ──────────────────────────────────────────── */
:root {
  --void:        #080808;
  --deep:        #111111;
  --carbon:      #1A1A1A;
  --surface:     #242424;
  --muted-line:  #2E2E2E;
  --bone:        #F5F5F0;
  --white:       #FAFAF8;
  --ghost:       rgba(245,245,240,0.07);

  --ultra:       #1A1AFF;
  --ultra-text:  #5555FF;   /* softer blue for small text in dark */
  --ultra-mid:   rgba(26,26,255,0.15);
  --ultra-dim:   rgba(26,26,255,0.07);

  --text-primary:   #F5F5F0;
  --text-secondary: rgba(245,245,240,0.62);  /* was .52 — raised for WCAG AA on dark bg */
  --text-dim:       rgba(245,245,240,0.36);  /* was .28 — slightly more visible */

  --img-filter:     grayscale(25%) contrast(108%);
  --img-filter-lab: grayscale(50%) contrast(112%);
  --header-bg:      rgba(8,8,8,0.85);
  --header-blend:   normal;
  --cursor-blend:   difference;

  --font-display: 'Syne', sans-serif;
  --font-body:    'Space Grotesk', sans-serif;
  --font-mono:    'Fira Code', monospace;
  --max-w: 1440px;
  --gutter: clamp(24px,4vw,80px);
  --ease-out-expo: cubic-bezier(0.16,1,0.3,1);
  --ease-in-out-q: cubic-bezier(0.76,0,0.24,1);
  --dur-fast: 0.25s;
  --dur-med:  0.55s;
  --dur-slow: 1.1s;
}

/* ─── LIGHT MODE TOKENS ───────────────────────────────────────────────────── */
:root.light-mode {
  --void:        #F2F2EE;
  --deep:        #E8E8E4;
  --carbon:      #D8D8D4;
  --surface:     #FFFFFF;
  --muted-line:  #C0C0BC;
  --bone:        #0C0C0C;
  --white:       #111111;
  --ghost:       rgba(12,12,12,0.08);

  /* Ultramarine stays, but we darken for text legibility on white */
  --ultra:       #0000E0;
  --ultra-text:  #0000C0;
  --ultra-mid:   rgba(0,0,224,0.12);
  --ultra-dim:   rgba(0,0,224,0.05);

  --text-primary:   #0C0C0C;
  --text-secondary: rgba(12,12,12,0.72);  /* was .58 — needs ≥4.5:1 on light bg */
  --text-dim:       rgba(12,12,12,0.50);  /* was .35 — unreadable on light */

  /* Images look better with less desaturation in light */
  --img-filter:     grayscale(10%) contrast(102%);
  --img-filter-lab: grayscale(20%) contrast(105%);

  /* Header: solid background in light (blend-mode: difference looks bad on light) */
  --header-bg:    rgba(242,242,238,0.92);
  --header-blend: normal;
  --cursor-blend: normal;
}

/* ─── RESET ────────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html {
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:16px;
  cursor:none;
}
body {
  background:var(--void);
  color:var(--text-primary);
  font-family:var(--font-body);
  line-height:1.6;
  overflow-x:hidden;
}
a { color:inherit; text-decoration:none }
img, video { display:block; max-width:100% }
button { background:none; border:none; cursor:none; font:inherit; color:inherit }
ul, ol { list-style:none }

/* ─── CUSTOM CURSOR ─────────────────────────────────────────────────────────── */
#cursor-dot {
  position:fixed; top:0; left:0;
  width:8px; height:8px;
  background:var(--ultra);
  border-radius:50%;
  pointer-events:none;
  z-index:99999;
  transform:translate(-50%,-50%);
  mix-blend-mode:var(--cursor-blend);
  transition:width .2s var(--ease-out-expo), height .2s var(--ease-out-expo);
}

#cursor-ring {
  position:fixed; top:0; left:0;
  width:36px; height:36px;
  border:1.5px solid var(--bone);
  border-radius:50%;
  pointer-events:none;
  z-index:99998;
  transform:translate(-50%,-50%);
  mix-blend-mode:var(--cursor-blend);
  transition:
    width .3s var(--ease-out-expo),
    height .3s var(--ease-out-expo),
    border-color .3s ease,
    border-radius .3s ease;
}

/* In light mode, override the bone-colored ring to ultramarine directly */
:root.light-mode #cursor-ring {
  border-color: var(--ultra);
  mix-blend-mode: normal;
}

:root.light-mode #cursor-dot {
  mix-blend-mode: normal;
}

#cursor-ring.hover {
  width:64px; height:64px;
  border-color:var(--ultra);
  mix-blend-mode:normal;
  border-radius:4px;
}

#cursor-label {
  position:fixed; top:0; left:0;
  pointer-events:none;
  z-index:99997;
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--ultra);
  opacity:0;
  transform:translate(28px,-50%);
  transition:opacity .2s ease;
  white-space:nowrap;
}
#cursor-label.visible { opacity:1 }

/* ─── SKIP / FOCUS ──────────────────────────────────────────────────────────── */
.skip-link {
  position:fixed; top:-100px; left:20px;
  z-index:9999;
  background:var(--ultra);
  color:#fff;
  padding:8px 16px;
  font-family:var(--font-mono);
  font-size:13px;
  transition:top .2s ease;
}
.skip-link:focus { top:20px }
a:focus-visible, button:focus-visible {
  outline:2px solid var(--ultra);
  outline-offset:4px;
  border-radius:2px;
}

/* ─── LAYOUT ────────────────────────────────────────────────────────────────── */
.wrap { max-width:var(--max-w); margin-inline:auto; padding-inline:var(--gutter) }

/* ─── SCROLL REVEAL ─────────────────────────────────────────────────────────── */
.reveal {
  opacity:0;
  transform:translateY(48px);
  transition:
    opacity var(--dur-slow) var(--ease-out-expo),
    transform var(--dur-slow) var(--ease-out-expo);
}
.reveal.visible { opacity:1; transform:translateY(0) }

/* ─── HEADER ────────────────────────────────────────────────────────────────── */
.site-header {
  position:fixed; top:0; left:0; right:0;
  z-index:1000;
  padding:18px var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(8,8,8,0.85);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,0.08);
  transition:background .3s ease, backdrop-filter .3s ease, border-color .3s ease, padding .3s ease;
}
:root.light-mode .site-header {
  background:rgba(242,242,238,0.92);
  border-bottom:1px solid rgba(0,0,0,0.08);
}

/* Scrolled state — slightly more solid with thinner padding */
.site-header.scrolled {
  padding:12px var(--gutter);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--muted-line);
}
:root:not(.light-mode) .site-header.scrolled {
  background:rgba(8,8,8,0.96);
}
:root.light-mode .site-header.scrolled {
  background:rgba(242,242,238,0.98);
}

.logo-mark {
  font-family:var(--font-display);
  font-size:15px;
  font-weight:800;
  letter-spacing:-.5px;
  color:var(--bone);
  text-transform:uppercase;
}
.logo-mark sup { font-size:8px; letter-spacing:1px; opacity:.5; vertical-align:super; margin-left:3px }

.nav-list { display:flex; gap:40px; align-items:center }
.nav-link {
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--bone);
  opacity:.6;
  transition:opacity .2s ease;
  position:relative;
}
.nav-link::after {
  content:'';
  position:absolute; bottom:-2px; left:0;
  width:0; height:1px;
  background:var(--ultra);
  transition:width .3s var(--ease-out-expo);
}
.nav-link:hover { opacity:1 }
.nav-link:hover::after { width:100% }
.nav-link.active { opacity:1 }
.nav-link.active::after { width:100% }

.nav-controls { display:flex; align-items:center; gap:20px }
.nav-ctrl-btn {
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:1px;
  color:var(--bone);
  opacity:.5;
  transition:opacity .2s ease;
  padding:6px 12px;
  border:1px solid rgba(245,245,240,.15);
}
:root.light-mode .nav-ctrl-btn { border-color:rgba(12,12,12,.18) }
.nav-ctrl-btn:hover { opacity:1 }

/* ─── HERO ──────────────────────────────────────────────────────────────────── */
.hero-section {
  min-height:100svh;
  display:grid;
  grid-template-rows:1fr auto;
  padding:0 var(--gutter);
  padding-top:120px;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--muted-line);
}

.hero-visual {
  position:absolute; top:0; right:0;
  width:50%; height:100%;
  pointer-events:none; z-index:0; overflow:hidden;
}
.hero-visual img {
  width:100%; height:100%;
  object-fit:cover;
  filter:var(--img-filter) opacity(0.35);
  transform:scale(1.04);
}
.hero-visual::after {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(to right, var(--void) 0%, transparent 60%);
}

.hero-body { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:clamp(40px,5vw,80px) }

.hero-index {
  font-family:var(--font-mono);
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  color:var(--ultra-text);
  margin-bottom:32px;
  display:flex; align-items:center; gap:12px;
}
.hero-index::before { content:''; display:block; width:40px; height:1px; background:var(--ultra) }

.hero-headline {
  font-family:var(--font-display);
  font-size:clamp(4rem,10.5vw,13rem);
  font-weight:800; line-height:.9; letter-spacing:-.04em;
  color:var(--bone);
  text-transform:uppercase;
  margin-bottom:clamp(32px,4vw,64px);
}
.hero-headline .line { display:block; overflow:hidden }
.hero-headline .line-inner {
  display:block;
  transform:translateY(110%);
  transition:transform 1.2s var(--ease-out-expo);
}
.hero-headline .line-inner.visible { transform:translateY(0) }

.hero-sub-row {
  display:grid; grid-template-columns:1fr 1fr 1fr;
  gap:1px; background:var(--muted-line);
  border-top:1px solid var(--ultra-mid);
  margin:0 calc(-1 * var(--gutter));
  position:relative; z-index:1;
}
.hero-sub-col {
  padding:32px var(--gutter);
  background:var(--carbon);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  display:flex; flex-direction:column; gap:10px;
  transition:background .25s ease;
}
.hero-sub-col:hover { background:var(--surface) }
.hero-sub-label {
  font-family:var(--font-mono); font-size:9px;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--ultra-text);
}
.hero-sub-val { font-size:clamp(13px,1.2vw,15px); color:var(--text-secondary); line-height:1.6 }
.hero-sub-val strong { color:var(--text-primary); font-weight:600; letter-spacing:-.01em }

.hero-status-badge {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:9px;
  letter-spacing:1.5px; text-transform:uppercase;
  color:#22C55E;
}
.hero-status-badge::before {
  content:''; display:block;
  width:6px; height:6px; border-radius:50%;
  background:#22C55E; box-shadow:0 0 8px #22C55E;
  animation:blink 2s infinite;
}
@keyframes blink { 0%,100%{opacity:1}50%{opacity:.3} }

/* ─── MARQUEE ───────────────────────────────────────────────────────────────── */
.marquee-track {
  overflow:hidden; padding:18px 0;
  background:var(--deep);
  border-bottom:1px solid var(--muted-line);
}
.marquee-inner { display:flex; gap:0; width:max-content; animation:marquee 30s linear infinite }
.marquee-item {
  display:inline-flex; align-items:center; gap:32px; padding-right:32px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:2px;
  text-transform:uppercase; color:var(--text-dim); white-space:nowrap;
}
.marquee-sep { width:4px; height:4px; border-radius:50%; background:var(--ultra); flex-shrink:0 }
@keyframes marquee { 0%{transform:translateX(0)}100%{transform:translateX(-50%)} }

/* ─── SECTION HEADER ────────────────────────────────────────────────────────── */
.section-header {
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:baseline; gap:24px;
  padding:32px 0 40px;
  border-bottom:1px solid var(--muted-line);
}
.section-num {
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:2px; text-transform:uppercase; color:var(--ultra-text);
}
.section-title {
  font-family:var(--font-display); font-size:clamp(1.8rem,3.5vw,3.5rem);
  font-weight:800; letter-spacing:-.03em; color:var(--bone);
  text-transform:uppercase; line-height:1;
}
.section-meta {
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:1px; text-transform:uppercase;
  color:var(--text-dim); text-align:right;
}

/* ─── WORKS ─────────────────────────────────────────────────────────────────── */
.works-section { border-bottom:1px solid var(--muted-line) }

.work-featured {
  display:grid; grid-template-columns:1fr 1fr;
  min-height:80vh;
  border-bottom:1px solid var(--muted-line);
  position:relative; overflow:hidden;
}
.work-featured-image { position:relative; overflow:hidden; background:var(--carbon) }
.work-featured-image img {
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.05);
  transition:transform 1.2s var(--ease-out-expo);
  filter:var(--img-filter);
}
.work-featured:hover .work-featured-image img { transform:scale(1) }

.work-featured-info {
  padding:64px clamp(32px,5vw,80px);
  display:flex; flex-direction:column; justify-content:space-between;
  border-left:1px solid var(--muted-line);
}
.work-category {
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:2px; text-transform:uppercase; color:var(--ultra-text);
}
.work-num {
  font-family:var(--font-display);
  font-size:clamp(5rem,10vw,11rem); font-weight:800;
  color:var(--ghost); line-height:1; letter-spacing:-.05em; margin-top:8px;
}
.work-title {
  font-family:var(--font-display);
  font-size:clamp(2rem,3.5vw,4rem); font-weight:800;
  letter-spacing:-.03em; line-height:1.05;
  text-transform:uppercase; color:var(--bone);
}
.work-desc { font-size:14px; color:var(--text-secondary); line-height:1.7; max-width:380px }
.work-metrics { display:flex; gap:32px; flex-wrap:wrap }
.metric-block .val {
  font-family:var(--font-display);
  font-size:clamp(1.6rem,2.5vw,2.4rem); font-weight:800;
  color:var(--bone); letter-spacing:-.04em; line-height:1;
}
.metric-block .lbl {
  font-family:var(--font-mono); font-size:9px;
  letter-spacing:1.5px; text-transform:uppercase;
  color:var(--text-dim); margin-top:4px;
}
.work-link-row {
  display:flex; align-items:center; justify-content:space-between;
  padding-top:24px; border-top:1px solid var(--muted-line);
}
.work-cta {
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--ultra-text);
  display:flex; align-items:center; gap:8px;
  transition:gap .3s var(--ease-out-expo);
}
.work-cta:hover { gap:16px }
.work-cta .arrow { font-size:16px; transition:transform .3s var(--ease-out-expo) }
.work-cta:hover .arrow { transform:translateX(4px) }

/* 2-up card row */
.work-grid-row {
  display:grid; grid-template-columns:1fr 1fr;
  border-bottom:1px solid var(--muted-line);
}
.work-card {
  position:relative; overflow:hidden;
  border-right:1px solid var(--muted-line);
  display:flex; flex-direction:column;
  text-decoration:none; color:inherit;
}
.work-card:last-child { border-right:none }
.work-card-image { position:relative; overflow:hidden; background:var(--carbon); aspect-ratio:16/9 }
.work-card-image img {
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.04);
  transition:transform 1s var(--ease-out-expo);
  filter:var(--img-filter);
}
.work-card:hover .work-card-image img { transform:scale(1); filter:grayscale(0%) }
.work-card-body {
  padding:32px; flex-grow:1;
  display:flex; flex-direction:column; gap:12px;
  border-top:1px solid var(--muted-line);
}
.work-card-eyebrow {
  font-family:var(--font-mono); font-size:9px;
  letter-spacing:2px; text-transform:uppercase; color:var(--ultra-text);
}
.work-card-title {
  font-family:var(--font-display);
  font-size:clamp(1.3rem,2vw,2rem); font-weight:800;
  letter-spacing:-.03em; line-height:1.1;
  text-transform:uppercase; color:var(--bone);
}
.work-card-desc { font-size:13px; color:var(--text-secondary); line-height:1.6 }
.work-card-bottom {
  display:flex; align-items:center; justify-content:space-between;
  padding-top:16px; border-top:1px solid var(--muted-line); margin-top:auto;
}
.work-tag-list { display:flex; gap:8px; flex-wrap:wrap }
.work-tag {
  font-family:var(--font-mono); font-size:9px; letter-spacing:1px;
  text-transform:uppercase; color:var(--text-dim);
  border:1px solid var(--muted-line); padding:4px 8px;
}
.work-arrow-icon {
  width:32px; height:32px; border:1px solid var(--muted-line);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; color:var(--ultra-text);
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.work-card:hover .work-arrow-icon { background:var(--ultra); color:#fff; border-color:var(--ultra) }

/* ─── STATEMENT ─────────────────────────────────────────────────────────────── */
.statement-section {
  padding:clamp(80px,12vw,160px) 0;
  border-bottom:1px solid var(--muted-line);
  position:relative; overflow:hidden;
}
.statement-section::before {
  content:'"'; position:absolute; top:-60px; left:-20px;
  font-family:var(--font-display);
  font-size:clamp(200px,30vw,400px); font-weight:800;
  color:var(--ghost); line-height:1;
  user-select:none; pointer-events:none;
}
.statement-text {
  font-family:var(--font-display);
  font-size:clamp(1.8rem,4vw,5rem); font-weight:800;
  letter-spacing:-.04em; line-height:1.08;
  text-transform:uppercase; color:var(--bone);
  max-width:1100px; position:relative; z-index:1;
}
.statement-text .accent { color:var(--ultra) }
.statement-byline {
  margin-top:40px; display:flex; align-items:center; gap:24px;
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:2px; text-transform:uppercase; color:var(--text-dim);
}
.statement-byline::before { content:''; display:block; width:40px; height:1px; background:var(--ultra) }

/* ─── METRICS ───────────────────────────────────────────────────────────────── */
.metrics-section {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--muted-line);
  border-bottom:1px solid var(--muted-line);
}
.metric-cell {
  background:var(--void); padding:48px 40px;
  display:flex; flex-direction:column; gap:8px;
  transition:background .3s ease;
}
.metric-cell:hover { background:var(--ultra-dim) }
.metric-cell .big-val {
  font-family:var(--font-display);
  font-size:clamp(2.5rem,4.5vw,5rem); font-weight:800;
  letter-spacing:-.04em; color:var(--bone); line-height:1;
}
.metric-cell .big-val .accent { color:var(--ultra) }
.metric-cell .big-lbl {
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--text-dim);
}
.metric-cell .big-desc { font-size:12px; color:var(--text-secondary); line-height:1.5; margin-top:4px }

/* ─── LAB SECTION ───────────────────────────────────────────────────────────── */
.lab-section { border-bottom:1px solid var(--muted-line) }
.lab-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:1px; background:var(--muted-line) }
.lab-cell { background:var(--void); overflow:hidden; position:relative }
.lab-cell-image { width:100%; aspect-ratio:4/3; overflow:hidden }
.lab-cell-image img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease-out-expo), filter .8s ease;
  filter:var(--img-filter-lab);
}
.lab-cell:hover .lab-cell-image img { transform:scale(1.04); filter:grayscale(0%) }
.lab-cell-info { padding:24px }
.lab-cell-label {
  font-family:var(--font-mono); font-size:9px;
  letter-spacing:2px; text-transform:uppercase; color:var(--ultra-text); margin-bottom:8px;
}
.lab-cell-title {
  font-family:var(--font-display);
  font-size:clamp(1rem,1.5vw,1.4rem); font-weight:700;
  letter-spacing:-.02em; text-transform:uppercase; color:var(--bone); line-height:1.2;
}
.lab-cell-desc { font-size:12px; color:var(--text-secondary); line-height:1.6; margin-top:8px }

/* ─── ARCHIVE ───────────────────────────────────────────────────────────────── */
.archive-section { border-bottom:1px solid var(--muted-line) }
.archive-row {
  display:grid; grid-template-columns:80px 1fr 1fr auto;
  align-items:center; gap:32px; padding:20px 0;
  border-bottom:1px solid var(--muted-line);
  position:relative; text-decoration:none; color:inherit;
}
.archive-row::before {
  content:''; position:absolute;
  left:calc(-1 * var(--gutter)); right:calc(-1 * var(--gutter));
  top:0; bottom:0;
  background:var(--ultra-dim); opacity:0; transition:opacity .2s ease;
}
.archive-row:hover::before { opacity:1 }
.archive-row.header { opacity:.4; pointer-events:none }
.archive-row.header::before { display:none }
.archive-year { font-family:var(--font-mono); font-size:11px; letter-spacing:1px; color:var(--text-dim) }
.archive-name { font-size:clamp(14px,1.5vw,18px); font-weight:600; color:var(--text-primary) }
.archive-type {
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:1px; text-transform:uppercase; color:var(--text-secondary);
}
.archive-arrow {
  width:28px; height:28px; border:1px solid var(--muted-line);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; color:var(--text-dim);
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.archive-row:hover .archive-arrow { border-color:var(--ultra); color:#fff; background:var(--ultra) }

/* ─── FOOTER ────────────────────────────────────────────────────────────────── */
.site-footer { border-top:1px solid var(--muted-line) }
.footer-top {
  padding:clamp(40px,6vw,80px) 0;
  display:grid; grid-template-columns:1fr 1fr; gap:80px;
  border-bottom:1px solid var(--muted-line);
}
.footer-headline {
  font-family:var(--font-display);
  font-size:clamp(2rem,5vw,6rem); font-weight:800;
  letter-spacing:-.04em; line-height:1; text-transform:uppercase; color:var(--bone);
}
.footer-headline .accent { color:var(--ultra) }
.footer-nav-col h4 {
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:2px; text-transform:uppercase; color:var(--text-dim); margin-bottom:20px;
}
.footer-link-list { display:flex; flex-direction:column; gap:12px }
.footer-link { font-size:14px; color:var(--text-secondary); display:inline-flex; align-items:center; gap:8px; transition:color .2s ease }
.footer-link:hover { color:var(--ultra) }
.footer-cta-primary {
  display:inline-flex; align-items:center; gap:12px;
  background:var(--ultra); color:#fff;
  padding:16px 32px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  transition:background .2s ease, transform .2s ease;
}
.footer-cta-primary:hover { background:#0000C0; transform:translateY(-2px) }
.footer-cta-secondary {
  display:inline-flex; align-items:center; gap:12px;
  border:1px solid var(--muted-line); color:var(--text-secondary);
  padding:15px 32px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  transition:border-color .2s ease, color .2s ease;
}
.footer-cta-secondary:hover { border-color:var(--ultra); color:var(--ultra) }
.footer-bottom {
  padding:24px 0;
  display:flex; align-items:center; justify-content:space-between;
}
.footer-copy { font-family:var(--font-mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--text-dim) }
.footer-legal { display:flex; gap:24px }
.footer-legal-link { font-family:var(--font-mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--text-dim); transition:color .2s ease }
.footer-legal-link:hover { color:var(--ultra) }

/* ─── QUICK PASS ────────────────────────────────────────────────────────────── */
.qp-trigger {
  position:fixed; bottom:32px; right:32px; z-index:900;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--deep); border:1px solid var(--muted-line);
  color:var(--text-primary); padding:12px 20px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:1.5px; text-transform:uppercase;
  transition:border-color .2s ease, background .2s ease;
}
.qp-trigger:hover { border-color:var(--ultra); background:var(--ultra-dim) }
.qp-dot { width:6px; height:6px; border-radius:50%; background:#22C55E; box-shadow:0 0 8px #22C55E; animation:blink 2s infinite }
.qp-overlay {
  position:fixed; inset:0; z-index:9100;
  background:rgba(8,8,8,.85); backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .3s ease;
  display:flex; align-items:flex-end; justify-content:flex-end; padding:32px;
}
/* ─── LIGHT MODE: HERO SUB CONTRAST OVERRIDES ──────────────────────────── */
:root.light-mode .hero-sub-col {
  background:var(--surface);       /* white — clean contrast base */
  border-right:1px solid var(--muted-line);
}
:root.light-mode .hero-sub-col:hover { background:var(--deep) }
:root.light-mode .hero-sub-row {
  background:var(--muted-line);
  border-top:1px solid var(--ultra-mid);
}

:root.light-mode .qp-overlay { background:rgba(200,200,196,.7) }
.qp-overlay.open { opacity:1; pointer-events:auto }
.qp-panel {
  background:var(--deep); border:1px solid var(--muted-line);
  width:100%; max-width:460px; padding:40px;
  transform:translateY(40px);
  transition:transform .4s var(--ease-out-expo);
  display:flex; flex-direction:column; gap:28px;
}
.qp-overlay.open .qp-panel { transform:translateY(0) }
.qp-header { display:flex; align-items:flex-start; justify-content:space-between }
.qp-title { font-family:var(--font-display); font-size:1.8rem; font-weight:800; letter-spacing:-.04em; text-transform:uppercase; color:var(--bone) }
.qp-close { font-family:var(--font-mono); font-size:10px; letter-spacing:1px; color:var(--text-dim); transition:color .2s ease }
.qp-close:hover { color:var(--ultra) }
.qp-data-row { font-family:var(--font-mono); font-size:12px; color:var(--text-secondary); border-top:1px solid var(--muted-line); padding-top:16px; display:flex; flex-direction:column; gap:10px }
.qp-data-item { display:flex; justify-content:space-between }
.qp-data-item strong { color:var(--bone); font-weight:600 }
.qp-actions { display:flex; flex-direction:column; gap:10px }

/* ─── LIGHTBOX ──────────────────────────────────────────────────────────────── */
.lb-overlay {
  position:fixed; inset:0; z-index:9900;
  background:rgba(8,8,8,.95); backdrop-filter:blur(20px);
  opacity:0; pointer-events:none; transition:opacity .3s ease;
  display:flex; align-items:center; justify-content:center; padding:32px;
}
:root.light-mode .lb-overlay { background:rgba(230,230,226,.96) }
.lb-overlay.open { opacity:1; pointer-events:auto }
.lb-inner {
  position:relative; max-width:90vw; max-height:88vh;
  display:flex; flex-direction:column; align-items:center; gap:16px;
  transform:scale(.92); transition:transform .4s var(--ease-out-expo);
}
.lb-overlay.open .lb-inner { transform:scale(1) }
.lb-img { max-height:80vh; width:auto; max-width:90vw; object-fit:contain; border:1px solid var(--muted-line) }
.lb-caption { font-family:var(--font-mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-dim) }
.lb-close { position:absolute; top:-48px; right:0; font-family:var(--font-mono); font-size:11px; letter-spacing:1px; color:var(--text-secondary); transition:color .2s ease }
.lb-close:hover { color:var(--ultra) }

/* ─── RESPONSIVE ────────────────────────────────────────────────────────────── */
@media(max-width:1024px){
  .work-featured { grid-template-columns:1fr; min-height:auto }
  .work-featured-info { border-left:none; border-top:1px solid var(--muted-line) }
  .metrics-section { grid-template-columns:repeat(2,1fr) }
  .lab-grid { grid-template-columns:1fr 1fr }
  .footer-top { grid-template-columns:1fr; gap:48px }
}
@media(max-width:768px){
  .site-header {
    mix-blend-mode:normal !important;
    background:var(--void) !important;
    border-bottom:1px solid var(--muted-line);
    padding:16px var(--gutter);
  }
  .nav-list { display:none }
  .hero-visual { width:100%; opacity:.15 }
  .hero-sub-row { grid-template-columns:1fr }
  .work-featured,.work-grid-row { grid-template-columns:1fr }
  .work-card { border-right:none; border-bottom:1px solid var(--muted-line) }
  .metrics-section { grid-template-columns:repeat(2,1fr) }
  .lab-grid { grid-template-columns:1fr }
  .section-header { grid-template-columns:auto 1fr }
  .section-meta { display:none }
  .archive-row { grid-template-columns:60px 1fr auto }
  .archive-type { display:none }
  #cursor-dot,#cursor-ring,#cursor-label { display:none }
  html,body { cursor:auto }
  .qp-trigger { right:16px; bottom:16px }
}
@media(max-width:500px){
  .metrics-section { grid-template-columns:1fr 1fr }
}

/* ─── THEME TRANSITION ──────────────────────────────────────────────────────── */
.theme-transition * {
  transition:
    background-color .4s ease,
    color .4s ease,
    border-color .4s ease,
    filter .4s ease !important;
}