/* ============================================
   DESIGN TOKENS — dark theme, near-black gritty bg, cream text, resume red accent
   ============================================ */
:root {
  --bg: #070606;
  --bg-raised: #131110;
  --text: #ebebe7;
  --text-dim: #a39d9a;
  --text-faint: #5e5957;
  --accent: #ebebe7;
  --accent-text: #ebebe7;
  --hairline: #322e2c;

  --font: 'Open Sauce One', 'Helvetica Neue', Arial, sans-serif;

  --tracking: 0.06em;
  --tracking-wide: 0.14em;

  --nav-h: 110px;
  --gutter: 14px;
  --max-w: 1760px;
  --ease: cubic-bezier(0.45, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Open Sauce One — matches the resume's embedded font exactly (SIL OFL licensed) */
@font-face {
  font-family: 'Open Sauce One';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/open-sauce-one@latest/latin-300-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Open Sauce One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/open-sauce-one@latest/latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Open Sauce One';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/open-sauce-one@latest/latin-500-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Open Sauce One';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/open-sauce-one@latest/latin-700-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Open Sauce One';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/open-sauce-one@latest/latin-400-italic.woff2) format('woff2');
}

html {
  background: var(--bg);
  scroll-behavior: smooth;
  /* Firefox custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--text-faint) var(--bg);
}

/* Chrome / Safari / Edge custom scrollbar — visible, draggable */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background-color: var(--text-faint);
  border-radius: 999px;
  border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background-color: var(--accent); }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 300;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  position: relative;
}

/* gritty film grain — visible texture, not just a faint hint */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; background: none; border: none; color: inherit; cursor: pointer; }

a:focus-visible, button:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}

.film-row-frame:focus-visible,
.uniform-tile:focus-visible,
.video-tile:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}

::selection { background: var(--accent); color: var(--bg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================
   TYPE — everything uppercase, Oswald, light tracking
   ============================================ */
.eyebrow {
  font-family: var(--font);
  font-weight: 300;
  font-size: 0.62rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-dim);
}

h1 {
  font-family: var(--font);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: var(--tracking);
}

h2, h3 {
  font-family: var(--font);
  font-weight: 700;
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: var(--tracking);
}

/* ============================================
   HEADER — single centered row, all items evenly spaced (incl. name).
   Hides on scroll down, reveals on scroll up. Small, dainty uppercase links.
   ============================================ */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 clamp(20px, 4vw, 56px) 22px;
  background: linear-gradient(to bottom, rgba(7,6,6,0.94) 0%, rgba(7,6,6,0) 100%);
  pointer-events: none;
  transition: transform 0.4s var(--ease-out), background 0.3s var(--ease);
}

.site-nav * { pointer-events: auto; }

.site-nav.is-solid {
  background: rgba(7,6,6,0.97);
  border-bottom: 1px solid var(--hairline);
  backdrop-filter: blur(10px);
}

/* Hide on scroll down, reveal on scroll up */
.site-nav.is-hidden {
  transform: translateY(-100%);
}

/* Name pinned to true window center via absolute positioning.
   Film+Music and About+Contact are each grouped into a single <li>
   (.nav-group-left / .nav-group-right) using internal flex with a real
   `gap` — this is what makes Film-to-Music spacing and About-to-Contact
   spacing exact and reliable, regardless of text length, since flex gap
   doesn't require knowing any element's width in advance.

   Each group's OUTER edge (Music's right edge inside the left group;
   About's left edge inside the right group) is then pinned a fixed,
   identical distance from true center (50%) using right/left
   positioning — guaranteeing Music and About sit exactly equidistant
   from the name, with zero dependency on "Film"+"Music" vs
   "About"+"Contact" being different lengths. */
.nav-row {
  position: relative;
  width: 100%;
  height: 1.2em;
  list-style: none;
  margin: 0; padding: 0;
}

.nav-row > li { position: absolute; bottom: 0; }

/* Name: pinned to exact horizontal center of the window */
.nav-row > li:nth-child(2) {
  left: 50%;
  transform: translateX(-50%);
}

/* Left group (Film, Music): positioned by its own RIGHT edge (Music's
   right edge), a fixed distance left of true center. Film sits to the
   left of Music inside the group via flex + gap — exact spacing,
   independent of either word's rendered width. */
.nav-group-left {
  display: flex;
  align-items: baseline;
  gap: clamp(24px, 3.5vw, 56px);
  right: calc(50% + clamp(48px, 6.5vw, 104px));
}

/* Right group (About, Contact): mirrors the left group exactly —
   positioned by its own LEFT edge (About's left edge), the same fixed
   distance right of true center. */
.nav-group-right {
  display: flex;
  align-items: baseline;
  gap: clamp(24px, 3.5vw, 56px);
  left: calc(50% + clamp(48px, 6.5vw, 104px));
}

.nav-row a {
  font-family: var(--font);
  font-weight: 300;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  position: relative;
  padding-bottom: 4px;
  transition: color 0.25s var(--ease);
  white-space: nowrap;
}

.nav-row a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width 0.3s var(--ease);
}

.nav-row a:hover, .nav-row a.is-active { color: var(--text); }
.nav-row a:hover::after, .nav-row a.is-active::after { width: 100%; }

.nav-mark {
  font-weight: 500 !important;
  color: var(--text) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.14em !important;
}

/* Persistent mobile-only name mark — hidden on desktop, shown via media query below */
.nav-mark-mobile {
  display: none;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 24px;
  z-index: 200;
}

.nav-toggle span {
  display: block;
  height: 1px;
  background: var(--text);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 820px) {
  /* Shrink the header bar on mobile (was sized for desktop's larger
     centered layout, leaving too much empty black space above the name).
     Overriding the variable here means every other rule that uses
     var(--nav-h) for spacing below the header automatically adjusts too. */
  :root {
    --nav-h: 64px;
  }

  .nav-toggle { display: flex; position: absolute; right: clamp(20px, 4vw, 56px); bottom: 26px; z-index: 250; }

  /* Header only shows at the very top of the page on mobile; hides as
     soon as the user scrolls down, and only returns by scrolling back
     to the top (JS toggles .is-hidden based on scroll position). No
     border-bottom on mobile — header should blend straight into black. */
  .site-nav,
  .site-nav.is-solid {
    background: rgba(7,6,6,0.97);
    border-bottom: none;
    backdrop-filter: blur(10px);
  }

  /* Persistent centered name bar — visible while the header bar itself is
     visible, but hidden the moment the full-screen menu opens so it can't
     visually collide with the drawer's own content. */
  .nav-mark-mobile {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    font-family: var(--font);
    font-weight: 500;
    font-size: 1.02rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text);
    white-space: nowrap;
    z-index: 150;
  }

  body.nav-open .nav-mark-mobile { display: none; }

  /* Full-screen blackout menu — same fade-in lightbox pattern as the
     image lightbox elsewhere on the site, rather than a slide-in drawer.
     Fully opaque, sits above everything including the persistent header. */
  .nav-row {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    z-index: 220;
    opacity: 0;
    pointer-events: none;
    transform: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 32px;
    background: #070606;
    transition: opacity 0.3s var(--ease);
    gap: 28px;
  }

  .nav-row.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  .nav-row a { font-size: 1.1rem; }
  .nav-mark { display: none; }

  /* Reset desktop absolute-positioning trick. The Film/Music and
     About/Contact groups use display:contents so their wrapping <li>
     disappears from layout — each link becomes its own item in the
     vertical stack below, rather than staying paired side-by-side. */
  .nav-row > li {
    position: static;
    top: auto; bottom: auto; left: auto; right: auto;
    transform: none;
  }

  .nav-group-left,
  .nav-group-right {
    display: contents;
  }
}

body.nav-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
  border-top: 1px solid var(--hairline);
  padding: 44px clamp(20px, 4vw, 56px) 32px;
}

.footer-row {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
}

.footer-social {
  display: flex;
  gap: 20px;
  align-items: center;
}

.footer-social a {
  color: var(--text-dim);
  transition: color 0.25s var(--ease), transform 0.25s var(--ease);
  display: flex;
}

.footer-social a:hover {
  color: var(--accent);
  transform: translateY(-2px);
}

.footer-social svg { width: 17px; height: 17px; }

.footer-meta {
  font-family: var(--font);
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: var(--tracking);
  color: var(--text-faint);
  text-transform: uppercase;
}

/* ============================================
   SCROLL REVEAL
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ============================================
   CONTACT PAGE — same visual format as the old popup, now a standalone page
   ============================================ */
.contact-wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 64px) clamp(20px, 4vw, 56px) 100px;
}

.contact-wrap h1 {
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  margin-bottom: 8px;
  font-weight: 300;
}

.contact-wrap .eyebrow { display: block; margin-bottom: 14px; }

.contact-wrap p.modal-sub {
  color: var(--text-dim);
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 32px;
  max-width: 44ch;
}

.form-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }

.form-row label {
  font-family: var(--font);
  font-weight: 300;
  font-size: 0.66rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-dim);
}

.form-row input, .form-row textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline);
  color: var(--text);
  font-family: var(--font);
  font-weight: 300;
  font-size: 0.95rem;
  padding: 9px 2px;
  resize: vertical;
  transition: border-color 0.25s var(--ease);
}

.form-row input:focus, .form-row textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.form-row input::placeholder, .form-row textarea::placeholder {
  color: var(--text-faint);
  text-transform: none;
}

.modal-submit {
  width: 100%;
  font-family: var(--font);
  font-weight: 400;
  font-size: 0.74rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--bg);
  background: var(--text);
  padding: 14px;
  margin-top: 6px;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.modal-submit:hover { background: var(--accent); color: var(--bg); }
.modal-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.modal-status {
  margin-top: 16px;
  font-family: var(--font);
  font-weight: 300;
  font-size: 0.74rem;
  color: var(--text-dim);
  text-align: center;
  text-transform: none;
  display: none;
}
.modal-status.is-visible { display: block; }

.modal-divider { margin: 36px 0 28px; height: 1px; background: var(--hairline); }

.modal-social { display: flex; gap: 22px; justify-content: flex-start; }
.modal-social a { color: var(--text-dim); transition: color 0.25s var(--ease); }
.modal-social a:hover { color: var(--accent); }
.modal-social svg { width: 19px; height: 19px; }