/* ── Fonts ──────────────────────────────────────── */

@font-face {
  font-family: 'Metropolis';
  src: url('../assets/fonts/Metropolis-Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('../assets/fonts/Metropolis-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('../assets/fonts/Metropolis-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('../assets/fonts/Metropolis-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts/JetBrainsMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts/JetBrainsMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* ── Reset ──────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
}

/* ── Accessibility utilities ─────────────────────────
   .visually-hidden / .sr-only — present in the a11y tree (read by screen
   readers) but visually removed. Used for the mode-switch live region and
   any visually-hidden headings (#3/#10 a11y audit). */
.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip-to-content link: off-screen until focused, then slides into view as the
   first focusable element on the page (#2 a11y audit). */
.skip-link {
  position: absolute;
  left: 8px;
  top: -64px;
  z-index: 10000;
  padding: 10px 16px;
  background: #000;
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  border-radius: 4px;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 8px;
  outline: 2px solid #58a6ff;
  outline-offset: 2px;
}

body {
  font-family: var(--body-font);
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  transition: background-color 0.3s ease, color 0.3s ease;
}

body.modal-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img, video {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
  font-size: inherit;
}

/* ── Layout shell ──────────────────────────────── */

.site-wrapper {
  display: flex;
  min-height: 100vh;
}

.main-content {
  flex: 1;
  max-width: var(--page-max-width, 1200px);
  margin: 0 auto;
  padding: var(--page-padding, 36px 24px 80px);
  width: 100%;
}

/* ── Shared components ──────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: var(--btn-radius, 999px);
  border: 1px solid var(--line);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
}

.btn:hover {
  transform: translateY(-1px);
  text-decoration: none;
}

.btn.primary {
  background: var(--ink);
  color: var(--bg);
  border-color: transparent;
}

.btn.ghost {
  background: transparent;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}

.pill {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--pill-bg, rgba(128,128,128,0.12));
  font-size: 12px;
  font-weight: 500;
}

.pill.link {
  background: var(--link-pill-bg, rgba(46, 111, 228, 0.15));
  color: var(--accent-2, #2e6fe4);
  font-weight: 600;
}

/* ── Focus indicators (keyboard) ─────────────────────
   A single visible :focus-visible ring for every interactive control, in both
   themes (#6 a11y audit). Scoped to :focus-visible so mouse clicks don't draw
   the ring, only keyboard focus. The eng accent-2 (#58a6ff, 7.66:1 on the dark
   bg) and a near-black ink for art (high contrast on #fafafa) both clear the
   3:1 non-text-contrast bar (WCAG 1.4.11). */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.mode-toggle:focus-visible,
.gallery-trigger:focus-visible,
.project-card:focus-visible,
.art-thumb:focus-visible,
.sidebar-project-link:focus-visible,
.resume-btn:focus-visible,
.skip-link:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring, #58a6ff);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Video tile affordance ──────────────────────────────────────────
   Video gallery tiles render a poster, so they look identical to image
   tiles. A centered play badge marks them as playable. The universal
   dark-circle / white-triangle reads on both themes; the badge is inert
   (clicks are handled by the .gallery-trigger that wraps it). */
.gallery-trigger { position: relative; }
.play-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
  transition: background 0.15s ease, transform 0.15s ease;
}
.play-badge::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent #fff;
  margin-left: 3px; /* optical centering of the triangle in the circle */
}
.gallery-trigger:hover .play-badge {
  background: rgba(0, 0, 0, 0.66);
  transform: translate(-50%, -50%) scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
  .play-badge { transition: none; }
  .gallery-trigger:hover .play-badge { transform: translate(-50%, -50%); }
}

/* Engineering: blue accent ring on the dark bg. */
[data-mode="engineering"] { --focus-ring: #58a6ff; }
/* Art: near-black ring — #1a1a1a is ~17:1 on #fafafa, well past 3:1. */
[data-mode="art"] { --focus-ring: #1a1a1a; }

/* Don't draw the big page-level ring on #mainContent when it receives
   programmatic focus (skip link / post-render reset) — it's a structural
   focus target, not an interactive control. */
#mainContent:focus,
#mainContent:focus-visible { outline: none; }

/* ── Footer ──────────────────────────────────────── */

.footer {
  padding: 48px 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  border-top: 1px solid var(--line);
  margin-top: 48px;
  font-size: 16px;
}

.footer h2 {
  font-family: var(--heading-font);
  font-size: clamp(24px, 3vw, 36px);
  margin-bottom: 10px;
}

.footer-links {
  display: flex;
  gap: 16px;
  color: var(--muted);
}

.contact-list {
  display: grid;
  gap: 6px;
  color: var(--muted);
}

/* ── Contact page ────────────────────────────────────── */

.contact-page {
  padding: 40px 0;
}

.contact-heading {
  font-family: var(--heading-font);
  font-size: clamp(20px, 2.5vw, 32px);
  margin-bottom: 24px;
  font-weight: 400;
}

.contact-page .contact-list {
  display: grid;
  gap: 12px;
  font-size: 16px;
}

.contact-page .contact-list a {
  text-decoration: underline;
}

/* ── Lightbox — full-bleed viewer, edge-positioned chevron nav ─── */

.media-viewer {
  position: fixed;
  inset: 0;
  background: #ffffff;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

/* Engineering mode uses a dark lightbox */
[data-mode="engineering"] .media-viewer { background: #000; }

.media-viewer[hidden] {
  display: none !important;
}

.media-viewer-panel {
  position: static;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Shared circular button style — slim 1px stroke, subtle gray */
.media-viewer-close,
.media-viewer-nav {
  position: fixed;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  /* Contrast (#8 a11y audit): border #c9c9c9 (1.66:1) → #8a8a8a (3.54:1 on
     #fff) and icon stroke #9a9a9a (2.81:1) → #6b6b6b (4.74:1) so the light-mode
     lightbox controls meet WCAG 1.4.11 (3:1 UI) / 1.4.3 (4.5:1). */
  border: 1px solid #8a8a8a;
  background: transparent;
  color: #6b6b6b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  font-family: inherit;
  transition: color 0.15s ease, border-color 0.15s ease;
  z-index: 1001;
}

.media-viewer-close:hover,
.media-viewer-nav:hover {
  color: #333;
  border-color: #888;
}

.media-viewer-close {
  top: 24px;
  right: 24px;
  font-size: 16px;
}

.media-viewer-nav {
  top: 50%;
  transform: translateY(-50%);
}

.media-viewer-nav.prev { left: 28px; }
.media-viewer-nav.next { right: 28px; }

/* SVG chevrons render more crisply than glyph characters */
.media-viewer-nav svg,
.media-viewer-close svg {
  width: 14px;
  height: 14px;
  display: block;
  pointer-events: none;
}

.media-viewer-media {
  background: transparent;
  border-radius: 0;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: calc(100vw - 180px);
  max-height: calc(100vh - 120px);
}

.media-viewer-image,
.media-viewer-video {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 120px);
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Caption & counter — subtle, under the image, only when present */
.media-viewer-footer {
  position: fixed;
  bottom: 32px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 24px;
  /* Contrast (#8 a11y audit): caption #9a9a9a (2.81:1) → #6b6b6b (4.74:1 on
     #fff) for the light-mode lightbox caption (WCAG 1.4.3). */
  color: #6b6b6b;
  font-size: 13px;
  font-family: var(--body-font);
  pointer-events: none;
  padding: 0 80px;
}

.media-viewer-caption { opacity: 0.85; }
.media-viewer-counter { opacity: 0.55; white-space: nowrap; }
.media-viewer-caption:empty,
.media-viewer-counter:empty { display: none; }

/* Engineering lightbox: solid white caption for contrast against the black bg */
[data-mode="engineering"] .media-viewer-caption {
  color: #ffffff;
  opacity: 1;
}
[data-mode="engineering"] .media-viewer-counter {
  color: #ffffff;
  opacity: 0.7;
}

/* Also lighten the circular nav/close buttons on the dark bg */
[data-mode="engineering"] .media-viewer-close,
[data-mode="engineering"] .media-viewer-nav {
  border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.7);
}
[data-mode="engineering"] .media-viewer-close:hover,
[data-mode="engineering"] .media-viewer-nav:hover {
  border-color: #ffffff;
  color: #ffffff;
}

@media (max-width: 640px) {
  .media-viewer { padding: 16px; }
  .media-viewer-close { top: 12px; right: 12px; }
  .media-viewer-nav.prev { left: 10px; }
  .media-viewer-nav.next { right: 10px; }
  .media-viewer-media { max-width: calc(100vw - 100px); }
}

/* ── Mode toggle — Terminal prompt ─────────────────
   Reads as a CLI command: `> cd ~/engineering|`
   Click = "execute" the mode switch.
-------------------------------------------------- */

.mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border: 1px solid currentColor;
  border-radius: 3px;
  background: transparent;
  color: inherit;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
  line-height: 1;
  white-space: nowrap;
}

.mode-toggle .mt-prompt {
  color: var(--accent, #3fb950);
  font-weight: 700;
  margin-right: 1px;
}

.mode-toggle .mt-cmd {
  opacity: 0.85;
}

.mode-toggle .mt-path {
  color: var(--accent, #3fb950);
  font-weight: 700;
  letter-spacing: 0.4px;
}

.mode-toggle .mt-cursor {
  display: inline-block;
  width: 0.5ch;
  height: 1em;
  background: currentColor;
  margin-left: 3px;
  vertical-align: middle;
  transform: translateY(1px);
  animation: mt-blink 1.1s steps(1) infinite;
}

.mode-toggle:hover {
  background: rgba(127, 127, 127, 0.08);
}

.mode-toggle:hover .mt-cursor {
  animation-duration: 0.55s;
}

@keyframes mt-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mode-toggle .mt-cursor { animation: none; opacity: 0.8; }
}

/* Mobile floating variant — only shown in art mode on small screens.
   Engineering mode already has a visible top-nav, so the regular
   in-nav toggle is enough there. */
.mode-toggle-mobile { display: none; }

/* ── Responsive ──────────────────────────────────── */

@media (max-width: 960px) {
  .footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .media-viewer { padding: 10px; }

  .media-viewer-panel {
    grid-template-columns: 40px 1fr 40px;
    gap: 6px;
  }

  .media-viewer-nav {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }

  .media-viewer-footer {
    flex-direction: column;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  /* The global animation/transition override doesn't touch scroll-behavior;
     disable smooth scrolling explicitly for reduced-motion users (#13). */
  html { scroll-behavior: auto; }
}