:root {
  --paper: #000;
  --ink: #ecebe6;
  --muted: #7a7a74;
  --rule: #222;
  --wash: #0e0e0e;
  --accent: #2fd6c3;          /* teal — used sparingly */
  --title: "Oswald", "Arial Narrow", sans-serif;                               /* left-side headings */
  --page-title: "Anton", Impact, "Arial Narrow", sans-serif;               /* right-side page titles */
  --sub: Arial, "Helvetica Neue", Helvetica, sans-serif;                     /* subheadings */
  --sans: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --index-w: 34%;
  --strip-h: 520px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

/* Faint film grain over everything */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 20;
  pointer-events: none;
  opacity: .11;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -4%); }
  60%  { transform: translate(-4%, -1%); }
  80%  { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
figure { margin: 0; }

/* Small mono labels used throughout */
.label,
.role, .filters, .work-year,
.detail-meta, .back, .credits dt, .pager, .contact, figcaption {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Layout ---------- */

.site {
  display: grid;
  grid-template-columns: var(--index-w) 1fr;
  height: 100vh;
}

.index {
  display: flex;
  flex-direction: column;
  padding: 44px 40px 32px 44px;
  border-right: 1px solid var(--rule);
  overflow-y: auto;
}

.detail {
  overflow-y: auto;
  padding: 64px 72px 160px;
  outline: none;
}

/* ---------- Index column ---------- */

.masthead { margin-bottom: 48px; }

/* Menus (under your name, and in the footer): condensed caps in light grey,
   so they read differently from the small typewriter-style subheading */
.topnav,
.contact-row {
  font-family: var(--title);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #a9a8a2;
}
.topnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin-top: 20px;
}
.topnav a, .contact-row a { text-decoration: none; transition: color .15s; }
.topnav a:hover, .contact-row a:hover { color: var(--ink); }
.topnav a[aria-current="true"], .contact-row a[aria-current="true"] { color: var(--accent); }
.topnav .ig { display: inline-flex; }

.name {
  font-family: var(--title);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
}
.name a { text-decoration: none; }

.role {
  margin: 10px 0 0;
  color: var(--muted);
}
.role::before { content: "/ "; color: var(--accent); }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 16px;
}
.filter { color: var(--muted); text-transform: inherit; letter-spacing: inherit; transition: color .15s; }
.filter[hidden] { display: none; }
.filter:hover { color: var(--ink); }
.filter.is-active { color: var(--ink); }
.filter.is-active::before { content: "["; color: var(--accent); margin-right: 2px; }
.filter.is-active::after  { content: "]"; color: var(--accent); margin-left: 2px; }

.works {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

.work { border-top: 1px solid var(--rule); }
.work:last-child { border-bottom: 1px solid var(--rule); }
.work[hidden] { display: none; }

.work-link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 8px;
  width: 100%;
  padding: 12px 0;
  text-align: left;
  text-decoration: none;
  transition: color .15s;
}
.work-title {
  font-family: var(--title);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.work-year { color: var(--muted); font-variant-numeric: tabular-nums; }

.works:hover .work-link { color: var(--muted); }
.works .work-link:hover,
.works .work-link:focus-visible { color: var(--ink); outline: none; }
.work-link[aria-current="true"] { color: var(--ink) !important; }
.work-link[aria-current="true"] .work-title::before { content: "→ "; color: var(--accent); }

.contact {
  margin-top: 48px;
  color: var(--muted);
}
.contact-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}
.contact .company-link {
  display: inline-block;
  margin-bottom: 14px;
  font-family: var(--title);
  font-size: 18px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
}
.contact .company-link::after { content: " →"; color: var(--accent); }
.contact .company-link:hover { color: var(--accent); }
.contact .company-link[aria-current="true"] { color: var(--accent); }
.company-cols { grid-template-columns: 1fr; margin-bottom: 40px; }
.contact a { text-decoration: none; }
.contact a:hover { color: var(--accent); }
.ig { display: inline-flex; margin-left: auto; }

/* ---------- Detail column ---------- */

.detail-inner {
  max-width: 860px;
}
/* The text slides in when a page opens. Photos don't animate: anything mid-animation
   is drawn underneath the film grain, so photos appear instantly, already clear. */
.detail-inner > :not(.strip):not(.video) {
  animation: rise .5s cubic-bezier(.2,.7,.2,1) backwards;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.back {
  display: none;
  margin-bottom: 24px;
  color: var(--muted);
  text-decoration: none;
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  color: var(--muted);
  margin-bottom: 28px;
}
.detail-meta span + span::before { content: "//"; margin: 0 10px; color: #444; }
.detail-meta span:first-child { color: var(--accent); }

.detail-title {
  font-family: var(--page-title);
  font-weight: 400;
  font-size: clamp(38px, 5.6vw, 84px);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 40px;
}

.detail-summary {
  font-family: var(--sub);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.45;
  letter-spacing: 0;
  max-width: 44em;
  margin: 0 0 56px;
  color: #c9c8c2;
}

/* Filmstrip: one photo at a time, in its original shape (nothing is cropped).
   Arrows, swiping or the trackpad move to the next one. */
.strip { margin: 0 0 88px; }
.strip-track {
  display: flex;
  align-items: stretch;        /* every frame is the same height, so the arrows never move */
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.strip-track::-webkit-scrollbar { display: none; }
/* one photo per frame */
.strip figure {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;               /* each photo sits in the middle of its frame */
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;    /* ... and sits on the bottom edge, right above the arrows */
  height: var(--frame-h, var(--strip-h));   /* set per work from its tallest photo */
}
.strip figcaption { text-align: center; }
.strip .media { width: 100%; display: flex; justify-content: center; align-items: center; }   /* the photo is centered inside a full-width frame */
.strip .media img { flex: none; width: auto; height: auto; max-width: 100%; max-height: var(--strip-h); }   /* never stretched or squeezed, only scaled evenly */
.strip .media:has(.placeholder) { height: min(var(--frame-h, var(--strip-h)), var(--strip-h)); width: min(100%, calc(var(--strip-h) * 1.5)); aspect-ratio: auto; }

.strip-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}
.strip-btn { font-family: var(--mono); font-size: 14px; line-height: 1; padding: 4px 2px; color: var(--ink); transition: color .15s; }
.strip-btn:hover { color: var(--accent); }
.strip-btn:disabled { color: #3a3a3a; cursor: default; }
.strip-at { color: var(--accent); }


/* Photos are shown exactly as exported: no color effects, and they sit above the film grain */
.media {
  position: relative;
  z-index: 21;
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: crosshair;
}
/* only the stand-in box (before a photo exists) has a fixed shape */
.media:has(.placeholder) { width: min(860px, 100%); aspect-ratio: 3 / 2; background: var(--wash); }
.media img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 82vh;
  display: block;
}

/* Shown until a real image file exists */
.placeholder {
  position: absolute; inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: #555;
  background:
    radial-gradient(90% 70% at var(--px, 30%) var(--py, 70%), #1c1c1c, transparent 70%),
    var(--wash);
}

figcaption {
  margin-top: 8px;
  color: var(--muted);
  text-transform: none;
}

.video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  margin: 0 0 88px;
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.body-cols {
  margin-top: 0;
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 56px;
  border-top: 1px solid var(--rule);
  padding-top: 32px;
}

.detail-text p { margin: 0 0 1em; max-width: 38em; color: #cfcec8; }

.credits { margin: 0; font-size: 13px; }
.credits dt { color: var(--muted); }
.credits dd { margin: 2px 0 16px; }

.pager {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 120px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
}
.pager a { text-decoration: none; transition: color .15s; }
.pager a:hover { color: var(--accent); }

/* About / empty state */
.about-text {
  font-family: var(--sub);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  max-width: 24em;
}
.about-text p { margin: 0 0 1em; }

/* CV */
.cv-section {
  border-top: 1px solid var(--rule);
  padding: 20px 0 8px;
}
.cv-heading {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
.cv-list {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 8px 16px;
  margin: 0 0 12px;
}
.cv-list dt { font-family: var(--mono); font-size: 12px; color: var(--muted); padding-top: 2px; }
.cv-list dd { margin: 0; max-width: 40em; }
.row-link { text-decoration: none; border-bottom: 1px solid #3a3a3a; transition: color .15s, border-color .15s; }
.row-link:hover { color: var(--accent); border-color: var(--accent); }
.row-note, .ext { color: var(--muted); }
.press-outlet {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted);
}
.press-list { row-gap: 18px; }
.cv-entries { row-gap: 20px; }
.cv-title { display: block; color: var(--ink); }
.cv-kind { margin-left: 4px; font-size: 13.5px; color: #8f8e88; }   /* e.g. "short film" after a title */
.cv-line { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: #a3a29c; }
.work-links { margin-top: 1.5em; }
.cv-pdf {
  display: inline-block;
  margin-top: 32px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
}
.cv-pdf:hover { color: var(--accent); }

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed; inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: rgba(0, 0, 0, .96);
  cursor: zoom-out;
  animation: fade .2s both;
}
.lightbox[hidden] { display: none; }
.lightbox figure { max-width: 100%; max-height: 100%; }
.lightbox-media { position: relative; }
.lightbox-media:has(.placeholder) { width: min(90vw, 1400px); aspect-ratio: 3 / 2; }
.lightbox-media img { display: block; max-width: min(90vw, 1600px); max-height: 82vh; width: auto; height: auto; }
.lightbox-close {
  position: absolute; top: 18px; right: 26px;
  font-family: var(--mono);
  font-size: 24px; line-height: 1;
}
.lightbox-close:hover { color: var(--accent); }
@keyframes fade { from { opacity: 0; } }

/* ---------- Small screens ---------- */

@media (max-width: 820px) {
  .site { display: block; height: auto; }
  .index { padding: 28px 16px; border-right: 0; min-height: 100vh; }
  .detail { padding: 28px 16px 64px; }
  .masthead { margin-bottom: 40px; }

  /* One view at a time: the list, or a work */
  body.has-selection .index { display: none; }
  body:not(.has-selection) .detail { display: none; }
  .back { display: inline-block; }

  .detail-summary { font-size: 17px; }
  .about-text { font-size: 22px; }
  :root { --strip-h: 360px; }
  .detail-summary { margin-bottom: 40px; }
  .body-cols { grid-template-columns: 1fr; gap: 24px; }
  .lightbox { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Hover preview: a work's first photo, shown beside the list ---------- */

.hover-preview {
  position: fixed;
  z-index: 22;                 /* above the film grain */
  padding: 10px 10px 9px;
  background: #070707;
  border: 1px solid #2f2f2f;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .7);
  pointer-events: none;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .2s ease, transform .3s cubic-bezier(.2,.7,.2,1);
}
.hover-preview.is-on { opacity: 1; transform: none; }
.hover-preview img {
  display: block;
  width: auto;     /* exact size is set by the script from the photo’s shape */
  height: auto;
}
.hover-label {
  display: block;
  margin-top: 9px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hover-preview:has(img:not([src])) { display: none; }

/* the right side steps back while a preview is showing */
/* No fade here on purpose: anything mid-fade is drawn under the film grain, which would
   cover the photos for a moment when you click a work */
body.is-previewing .detail { visibility: hidden; }

@media (hover: none), (max-width: 820px) {
  .hover-preview { display: none; }
  body.is-previewing .detail { visibility: visible; }
}


/* ---------- Filmstrip: click the right half of a photo for the next one, the left half for the previous ---------- */

.strip .media.is-next {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M6 16h18M17 9l7 7-7 7' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 16h18M17 9l7 7-7 7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, e-resize;
}
.strip .media.is-prev {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M26 16H8M15 9l-7 7 7 7' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M26 16H8M15 9l-7 7 7 7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, w-resize;
}
.strip-full {
  margin-left: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .15s;
}
.strip-full:hover { color: var(--accent); }