/* ============ NAV ============ */

.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* above .liquid-wipe (1500) and .overlay-menu (1600) — a positioned ancestor's z-index
     traps its whole subtree at its own stacking level, so the menu button needs its PARENT
     raised, not just itself, or it disappears behind the open overlay with no way to close it */
  z-index: 1700;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--container-pad);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 400ms var(--ease-out), border-color 400ms var(--ease-out);
}
.site-nav.is-scrolled {
  background: var(--cream);
  border-bottom-color: var(--ink-faint);
}
.nav-logo img { height: 32px; width: auto; transition: opacity 200ms var(--ease-out); }
.site-nav.nav-open .nav-logo { opacity: 0; pointer-events: none; }

.nav-menu-btn {
  width: 32px; height: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  position: relative;
}
.nav-menu-btn span {
  display: block;
  width: 24px; height: 2px;
  background: var(--black);
  transition: transform 400ms var(--ease-inout), opacity 200ms var(--ease-inout), background 400ms var(--ease-inout);
}
.nav-menu-btn[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.nav-menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
.nav-menu-btn[aria-expanded="true"] span { background: var(--white); }

/* ============ LIQUID WIPE (shared by overlay menu + route transitions) ============ */

.liquid-wipe {
  position: fixed;
  inset: 0;
  z-index: 1500;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ============ OVERLAY MENU ============ */
/* backdrop is the .liquid-wipe SVG (above); this is just the link content sitting on top */

.overlay-menu {
  position: fixed;
  inset: 0;
  z-index: 1600;
  color: var(--white);
  pointer-events: none;
}
.overlay-menu[aria-hidden="false"] { pointer-events: auto; }

.overlay-links {
  position: absolute;
  left: var(--container-pad);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.overlay-links a {
  font-family: var(--font-display);
  font-size: clamp(40px, 9vw, 88px);
  font-weight: 500;
  line-height: 1.05;
  overflow: hidden;
  display: block;
}
.overlay-links a span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 500ms var(--ease-inout);
}
.overlay-menu.is-open .overlay-links a span {
  transform: translateY(0);
  transition: transform 600ms var(--ease-out);
}
.overlay-links a:nth-child(1) span { transition-delay: 200ms; }
.overlay-links a:nth-child(2) span { transition-delay: 260ms; }
.overlay-links a:nth-child(3) span { transition-delay: 320ms; }

.overlay-footer {
  position: absolute;
  left: var(--container-pad);
  bottom: 40px;
  font-size: 14px;
  opacity: 0.7;
}

/* ============ HERO ============ */

.hero {
  position: relative;
  height: min(100vh, 1000px);
  width: 100%;
  background: var(--white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* The video and the text share ONE fixed budget (the hero's height above) — flexbox gives
   the text exactly what it needs and the video everything left over, so they can never
   overlap AND never push each other off-screen. Shrinking the text's own footprint (below)
   is what leaves more of that shared budget for the video. */
.hero-visual {
  position: relative;
  flex: 1 1 auto;
  min-height: 200px;
}
@media (max-height: 700px) and (min-width: 640px) {
  /* short/landscape viewports: a fixed vh-based hero would be cramped here — let it size to content */
  .hero { height: auto; }
  .hero-visual { flex: none; height: 44vh; min-height: 240px; max-height: 380px; }
}
.hero-video, .hero-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  mix-blend-mode: multiply;
  display: none;
}
.hero[data-mode="video"] .hero-video { display: block; }
.hero[data-mode="poster"] .hero-poster { display: block; }

.hero-copy {
  flex: 0 0 auto;
  width: 100%;
  padding: var(--container-pad);
  padding-top: 12px;
  padding-bottom: 28px;
  text-align: center;
}
.hero-microcopy {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  margin-bottom: 6px;
}
.hero-word {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 7.5vw, 104px);
  line-height: 1;
  overflow: hidden;
  height: 1.1em;
}
.hero-word .word-inner {
  display: inline-block;
}

/* ============ WORK / GRID ============ */

.work-section {
  padding: 120px var(--container-pad) 80px;
}
.work-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 48px;
}
@media (min-width: 768px) {
  .work-header { flex-direction: row; align-items: baseline; justify-content: space-between; }
}
.section-label {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 500;
}
.filter-tabs {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.filter-tab {
  position: relative;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.35;
  transition: opacity 300ms linear;
  padding-bottom: 4px;
}
.filter-tab.is-selected { opacity: 1; }
.filter-tab.is-selected::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--black);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 640px) {
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .portfolio-grid > .grid-card:nth-child(2n) { margin-top: 10vh; }
}
@media (min-width: 1024px) {
  .portfolio-grid { grid-template-columns: repeat(3, 1fr); }
  .portfolio-grid > .grid-card:nth-child(2n) { margin-top: 0; }
  .portfolio-grid > .grid-card:nth-child(3n+2) { margin-top: 8vh; }
  .portfolio-grid > .grid-card:nth-child(3n) { margin-top: 16vh; }
}

/* JS-enhanced desktop columnized layout (progressive enhancement over the grid above) */
.portfolio-grid.is-columnized {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}
.grid-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
  will-change: transform;
}
.grid-column:nth-child(2) { margin-top: 8vh; }
.grid-column:nth-child(3) { margin-top: 16vh; }

.grid-card { opacity: 0; transform: translateY(40px); }
.grid-card.is-visible { opacity: 1; transform: translateY(0); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.grid-card.is-filter-hidden { opacity: 0; transform: scale(0.98); pointer-events: none; transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out); }

.grid-card-link { display: block; }
.grid-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cream);
}
.grid-card-media img { width: 100%; height: 100%; object-fit: cover; }

.grid-card-meta {
  padding-top: 14px;
}
.grid-card-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
}
.grid-card-tags {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-dim);
}

.grid-empty { opacity: 0.5; padding: 40px 0; }

/* ============ FOOTER ============ */

.site-footer {
  background: var(--cream);
  padding: 80px var(--container-pad) 24px;
  margin-top: 80px;
}
.footer-inner {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
  padding-bottom: 48px;
}
@media (min-width: 768px) {
  .footer-inner { grid-template-columns: 1.4fr 1fr 1fr; }
}
.footer-anim {
  position: relative;
  width: 150px;
  max-width: 55vw;
  aspect-ratio: 408 / 532; /* matches the cropped source exactly — no letterboxing */
  margin-bottom: 20px;
}
@media (min-width: 640px) {
  .footer-anim { width: 190px; }
}
@media (min-width: 1024px) {
  .footer-anim { width: 260px; }
}
.footer-video, .footer-anim-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  mix-blend-mode: multiply;
}
.footer-anim-poster { display: none; }
@media (prefers-reduced-motion: reduce) {
  .footer-video { display: none; }
  .footer-anim-poster { display: block; }
}
.footer-tagline {
  font-family: var(--font-display);
  font-size: 20px;
  max-width: 32ch;
}
.footer-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.5; margin-bottom: 8px; }
.footer-email { font-size: 18px; }
.footer-socials { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
@media (min-width: 768px) {
  .footer-socials { align-items: flex-end; text-align: right; }
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--ink-faint);
  padding-top: 24px;
  font-size: 13px;
  opacity: 0.6;
}
.back-to-top {
  width: 36px; height: 36px;
  border: 1px solid var(--ink-faint);
  opacity: 1;
  transition: background 250ms var(--ease-out), color 250ms var(--ease-out);
}
.back-to-top:hover { background: var(--black); color: var(--white); }

/* ============ PROJECT DETAIL PAGE ============ */

.pj-header {
  padding: 160px var(--container-pad) 40px;
  max-width: 900px;
}
.pj-eyebrow { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-dim); margin-bottom: 12px; }
.pj-title { font-family: var(--font-display); font-size: clamp(36px, 6vw, 72px); font-weight: 500; line-height: 1.05; }
.pj-summary { margin-top: 20px; font-size: 18px; color: var(--ink-dim); max-width: 60ch; }

.pj-cover { padding-inline: var(--container-pad); margin-bottom: 60px; }
.pj-cover img { width: 100%; border-radius: 4px; }

.pj-sections { display: flex; flex-direction: column; gap: 100px; padding-bottom: 100px; }
.pj-section[data-reveal] { opacity: 0; transform: translateY(40px); }
.pj-section.is-visible { opacity: 1; transform: translateY(0); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }

.pj-media-full { padding-inline: var(--container-pad); }
.pj-media-frame img, .pj-media-frame video { width: 100%; border-radius: 4px; }
.pj-height-tall .pj-media-frame { min-height: 90vh; }
.pj-height-tall .pj-media-frame img, .pj-height-tall .pj-media-frame video { height: 90vh; object-fit: cover; }
.pj-caption { margin-top: 12px; font-size: 13px; opacity: 0.5; }

.pj-split {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-inline: var(--container-pad);
}
@media (min-width: 900px) {
  .pj-split { flex-direction: row; align-items: center; gap: 80px; }
  .pj-split.pj-media-left { flex-direction: row-reverse; }
}
.pj-split-media, .pj-split-text { flex: 1; min-width: 0; }
.pj-split-media img, .pj-split-media video { width: 100%; border-radius: 4px; }
.pj-split-text h3 { font-family: var(--font-display); font-size: 28px; margin-bottom: 16px; }
.pj-body p { margin-bottom: 1em; line-height: 1.6; color: var(--ink-dim); }
.pj-body p:last-child { margin-bottom: 0; }

.pj-gallery { padding-inline: var(--container-pad); }
.pj-gallery-grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .pj-gallery-two .pj-gallery-grid { grid-template-columns: 1fr 1fr; }
  .pj-gallery-three .pj-gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
.pj-gallery-item img { width: 100%; border-radius: 4px; aspect-ratio: 4/5; object-fit: cover; }

.pj-quote {
  padding: 0 var(--container-pad);
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}
.pj-quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 500;
  line-height: 1.25;
}
.pj-quote cite { display: block; margin-top: 24px; font-style: normal; font-size: 14px; opacity: 0.5; }

.pj-stats { padding-inline: var(--container-pad); }
.pj-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
@media (min-width: 700px) {
  .pj-stats-grid { grid-template-columns: repeat(var(--stat-count, 4), 1fr); }
}
.pj-stat { display: flex; flex-direction: column; gap: 8px; }
.pj-stat-value { font-family: var(--font-display); font-size: clamp(32px, 5vw, 56px); font-weight: 500; }
.pj-stat-label { font-size: 13px; color: var(--ink-dim); }

.pj-text { padding-inline: var(--container-pad); }
.pj-width-narrow { max-width: 65ch; margin-inline: auto; }
.pj-width-wide { max-width: 1100px; margin-inline: auto; }
.pj-text h3 { font-family: var(--font-display); font-size: 28px; margin-bottom: 16px; }

.pj-next { padding: 40px var(--container-pad) 100px; }
.pj-next a { font-size: 14px; }

/* ============ MISC PAGES ============ */

.not-found {
  padding: 200px var(--container-pad);
  text-align: center;
}
.not-found h1 { font-family: var(--font-display); font-size: 120px; }