/* Palette taken from the LaTeX CV (altacv): heading #00394d, accent #005c99, body #333 */
:root {
  --heading: #00394d;
  --accent: #005c99;
  --body: #333333;
  --muted: #6b7378;
  --rule: #d9dee1;
  --bg: #ffffff;
  --wall: #f4f2ee;
  --paper: #ffffff;
  --code-bg: #f7f8f9;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 12px 32px rgba(0,30,50,.10);
  --work: #005c99;
  --education: #00394d;
  --project: #7a8a93;
  --sans: "Lato", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --heading: #9cc7dc; --accent: #5aa9e0; --body: #d5d9dc; --muted: #8b959b;
    --rule: #2b3439; --bg: #121619; --wall: #171c20; --paper: #1d2328; --code-bg: #1a2025;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.45);
    --work: #5aa9e0; --education: #9cc7dc; --project: #8b959b;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--body); font: 400 17px/1.6 var(--sans); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.sep { margin: 0 .6em; color: var(--rule); }
.wrap { max-width: 860px; margin: 0 auto; padding: 0 24px; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px 24px; background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule);
}
.nav-name { font-weight: 700; color: var(--heading); letter-spacing: .02em; }
.nav-links { display: flex; gap: 20px; font-size: 15px; }
.nav-links a { color: var(--body); }
.nav-links a:hover { color: var(--accent); text-decoration: none; }

/* ---------- Hero ---------- */
.hero { padding-top: 18vh; padding-bottom: 10vh; }
.hero h1 {
  margin: 0; color: var(--heading); font-weight: 700;
  font-size: clamp(40px, 7vw, 68px); letter-spacing: .01em; line-height: 1.05;
}
.tagline { margin: 10px 0 0; color: var(--accent); font-size: clamp(18px, 2.4vw, 22px); }
.meta { margin-top: 28px; font-size: 15px; color: var(--muted); }

/* ---------- Sections (altacv style headings) ---------- */
.section { padding-top: 56px; padding-bottom: 56px; }
.section-title {
  margin: 0 0 24px; color: var(--heading); font-size: 22px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding-bottom: 6px; border-bottom: 1.5px solid var(--heading);
}
.summary { max-width: 64ch; margin: 0 0 20px; }
.tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tag { display: inline-block; border: 1px solid var(--muted); border-radius: 3px; padding: 1px 9px; font-size: 14px; color: var(--body); }
.tag sup { font-size: 10px; margin-left: 3px; color: var(--muted); }
a.tag.linked { border-color: var(--accent); color: var(--accent); transition: background .15s, color .15s; }
a.tag.linked:hover, a.tag.linked.active { background: var(--accent); color: var(--bg); text-decoration: none; }
a.tag.linked:hover sup, a.tag.linked.active sup { color: inherit; }
.tags.small { gap: 6px; margin-top: 8px; }
.tags.small .tag { font-size: 12px; padding: 0 7px; }

/* ---------- Timeline ---------- */
.legend { display: flex; gap: 20px; font-size: 14px; color: var(--muted); margin-bottom: 28px; }
.legend span::before {
  content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 7px; background: var(--k);
}
.k-work { --k: var(--work); }
.k-education { --k: var(--education); }
.k-project { --k: var(--project); }

.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 170px; top: 6px; bottom: 6px; width: 1px; background: var(--rule);
}
.tl-item { display: grid; grid-template-columns: 170px 1fr; padding-bottom: 32px; position: relative; }
.tl-item::before {
  content: ""; position: absolute; left: 165px; top: 8px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--bg); border: 2px solid var(--k);
}
.tl-item.k-work::before { background: var(--k); }
.tl-date { font-size: 14px; color: var(--muted); padding-right: 24px; padding-top: 2px; }
.tl-body { padding-left: 28px; }
.tl-body h3 { margin: 0; font-size: 18px; color: var(--heading); }
.tl-place { margin: 0; color: var(--accent); font-size: 15px; }
.tl-body ul { margin: 6px 0 0; padding-left: 18px; font-size: 15px; }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 640px) {
  .timeline::before { left: 5px; }
  .tl-item { grid-template-columns: 1fr; padding-left: 26px; }
  .tl-item::before { left: 0; }
  .tl-body { padding-left: 0; }
  .tl-date { padding: 0; }
  .nav-links { gap: 12px; font-size: 13px; }
  .nav-name { display: none; }
}

/* ---------- Gallery ---------- */
.gallery { position: relative; background: var(--wall); }
.gallery-stage { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
.gallery-head { position: relative; z-index: 3; padding-top: 72px; }
.gallery-head .section-title { margin-bottom: 4px; }
.gallery-sub { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.filter-chip {
  font: inherit; font-size: 13px; cursor: pointer; border: 0; border-radius: 3px;
  background: var(--accent); color: var(--bg); padding: 2px 10px;
}
.filter-chip[hidden] { display: none; }
.room-label { margin: 0; font-size: 14px; color: var(--muted); letter-spacing: .04em; min-height: 1.6em; }

.layer { position: absolute; top: 0; left: 0; height: 100%; will-change: transform; }
.scroller {
  position: absolute; inset: 0; z-index: 2;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: none;
}
.scroller::-webkit-scrollbar { display: none; }
.scroller:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.layer { pointer-events: none; }
.layer-back { z-index: 0; }
.layer-back::after { /* wainscot */
  content: ""; position: absolute; left: 0; right: 0; bottom: 14%; height: 1px; background: var(--rule);
}
.wall-num {
  position: absolute; top: 18%; font-size: clamp(160px, 30vh, 320px); font-weight: 300;
  color: var(--heading); opacity: .05; line-height: 1;
}
.layer-front { z-index: 4; }
.pillar {
  position: absolute; bottom: 0; top: 0; width: 46px;
  background: linear-gradient(90deg, var(--rule), color-mix(in srgb, var(--wall) 70%, var(--rule)) 40%, var(--rule));
  opacity: .85; box-shadow: 0 0 40px rgba(0,0,0,.08);
}
.floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 14%; z-index: 1;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--wall) 85%, #000), var(--wall));
  opacity: .5;
}

.track {
  display: flex; align-items: center; width: max-content; height: 100%;
  padding: 120px 0 8vh 12vw;
}
.room { display: flex; align-items: center; gap: clamp(60px, 10vw, 140px); padding-right: clamp(120px, 18vw, 260px); height: 100%; }
.room-sign {
  flex: none; width: 160px; color: var(--heading); font-size: 15px; letter-spacing: .05em; text-transform: uppercase;
  border-left: 2px solid var(--heading); padding-left: 14px;
}
.room-num { display: block; font-size: 34px; font-weight: 300; letter-spacing: 0; text-transform: none; }
.room-end { padding-right: 20vw; color: var(--muted); }

.exhibit {
  --focus: 1;
  flex: none; margin: 0; width: min(78vw, 440px);
  display: flex; flex-direction: column; gap: 18px;
  transform: scale(calc(.9 + .1 * var(--focus)));
  opacity: calc(.45 + .55 * var(--focus));
  transition: transform .15s linear, opacity .3s linear, filter .3s;
  scroll-snap-align: center;
}
.filtering .exhibit:not(.match) { opacity: .18; filter: grayscale(1); }
.filtering .exhibit.match .frame { outline: 2px solid var(--accent); }
.frame {
  height: min(46vh, 420px); background: var(--paper); box-shadow: var(--shadow);
  display: flex; align-items: stretch; justify-content: center; overflow: hidden;
  border: 10px solid var(--paper); outline: 1px solid var(--rule);
}
.ex-pdf .frame { width: calc(min(46vh, 420px) * .72); align-self: center; }

.cartel {
  font-size: 14px; line-height: 1.5; border-top: 1px solid var(--rule); padding-top: 10px; max-width: 360px;
}
.cartel h3 { margin: 0; font-size: 16px; color: var(--heading); }
.cartel-meta { margin: 0 0 6px; color: var(--muted); font-style: italic; }
.cartel p { margin: 0 0 6px; }
.cartel a { display: inline-block; margin-right: 14px; }

/* Exhibit contents */
.paper { all: unset; cursor: zoom-in; display: block; width: 100%; height: 100%; position: relative; }
.paper iframe { width: 100%; height: 100%; border: 0; pointer-events: none; }
.paper-ph { cursor: default; padding: 22px 18px; display: flex; flex-direction: column; gap: 9px; }
.paper-title { font-weight: 700; color: var(--heading); font-size: 14px; margin-bottom: 10px; text-align: center; }
.paper-ph i { display: block; height: 6px; background: var(--rule); border-radius: 2px; }
.paper-ph i:nth-of-type(3n) { width: 70%; }
.ph-tag { margin-top: auto; font-size: 12px; color: var(--muted); text-align: center; }

.ph { flex: 1; display: grid; place-items: center; color: var(--muted); font-size: 14px;
  background: repeating-linear-gradient(45deg, transparent 0 10px, color-mix(in srgb, var(--rule) 40%, transparent) 10px 11px); }
.ex-video .frame video, model-viewer { width: 100%; height: 100%; background: #000; }
model-viewer { background: transparent; }

.code { margin: 0; padding: 18px; flex: 1; overflow: auto; background: var(--code-bg); font: 13px/1.55 var(--mono); color: var(--body); }
.tok-k { color: var(--accent); font-weight: 400; }
.tok-s { color: #4d7a3a; }
.tok-c { color: var(--muted); font-style: italic; }
.tok-n { color: #a35a00; }
.tok-t { color: var(--heading); }

.ph-3d { place-items: center; grid-template-rows: 1fr auto; padding-bottom: 20px; perspective: 600px; }
.cube { width: 90px; height: 90px; position: relative; transform-style: preserve-3d; animation: spin 14s linear infinite; }
.cube i { position: absolute; inset: 0; border: 1.5px solid var(--heading); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.cube i:nth-child(1) { transform: translateZ(45px); }
.cube i:nth-child(2) { transform: rotateY(180deg) translateZ(45px); }
.cube i:nth-child(3) { transform: rotateY(90deg) translateZ(45px); }
.cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(45px); }
.cube i:nth-child(5) { transform: rotateX(90deg) translateZ(45px); }
.cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(45px); }
@keyframes spin { to { transform: rotateX(-20deg) rotateY(360deg); } from { transform: rotateX(-20deg) rotateY(0); } }

.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 5; background: var(--rule); }
.progress span { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }

@media (max-height: 640px) {
  .gallery-head { padding-top: 60px; }
  .frame { height: 40vh; }
  .ex-pdf .frame { width: calc(40vh * .72); }
}

.nav-btn {
  position: absolute; top: 50%; z-index: 6; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 90%, transparent); color: var(--heading);
  font: 20px/1 var(--sans); cursor: pointer; box-shadow: var(--shadow);
  transition: opacity .2s, background .15s;
}
.nav-btn:hover { background: var(--heading); color: var(--bg); }
.nav-btn:disabled { opacity: 0; pointer-events: none; }
.nav-btn.prev { left: 20px; }
.nav-btn.next { right: 20px; }
@media (max-width: 640px) {
  .nav-btn { top: auto; bottom: 18px; transform: none; width: 42px; height: 42px; }
}

/* ---------- Viewer ---------- */
.viewer { width: min(92vw, 960px); height: 90vh; padding: 0; border: 0; background: var(--paper); box-shadow: var(--shadow); }
.viewer::backdrop { background: rgba(0, 20, 30, .6); }
.viewer [data-viewer-body], .viewer iframe { width: 100%; height: 100%; border: 0; }
.viewer-close {
  position: absolute; top: 8px; right: 12px; z-index: 1; border: 0; background: var(--paper);
  font-size: 28px; line-height: 1; cursor: pointer; color: var(--body);
}

.footer { padding-bottom: 96px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .cube { animation: none; transform: rotateX(-20deg) rotateY(30deg); }
  .layer-front { display: none; }
}