/* Agent Bauer — public site.
   Editorial monochrome: white paper, black ink, Helvetica, generous air.
   The work is the colour; the chrome stays out of its way. */

:root {
  --ink: #111;
  --mute: #8a8a86;
  --line: #e6e4e0;
  --bg: #fff;
  --pad: clamp(20px, 4vw, 56px);
  --display-font: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* One face for everything — Open Sans, variable weight 300–800. Round and
   humanist; the big headings use it at 800. Self-hosted latin subset. */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/fonts/open-sans-var-latin.woff2") format("woff2");
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Short pages keep the scrollbar's space so the header never shifts. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a,
button {
  -webkit-tap-highlight-color: transparent;
}

/* On-brand selection: black chip, white text. On the difference-blended
   headings this comes out as the exact inverse (white chip, black text),
   instead of the muddy brown the default blue selection produced. */
::selection {
  background: #111;
  color: #fff;
}

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

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

.no-scroll {
  overflow: hidden;
}

/* ---- Header ------------------------------------------------------------- */

.site-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 14px var(--pad);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  z-index: 40;
}

.wordmark {
  display: block;
  flex-shrink: 0;
}

.wordmark img {
  display: block;
  height: 17px;
  width: auto;
}

.wordmark .logo-white {
  display: none;
}

.site-nav {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  justify-content: center;
}

.site-nav a,
.contact-link,
.footer-nav a {
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}

/* Header links: fat and black, inverting to a black chip on hover — the
   same hover language as the contact rows and category name lists. */
.site-nav a,
.contact-link {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
}

.contact-link {
  grid-column: 3;
  justify-self: end;
}

.site-nav a:hover,
.contact-link:hover {
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 0 0 6px var(--ink);
}

.footer-nav a:hover {
  color: var(--ink);
}

/* Desktop shows Contact on the far right; the copy inside the nav is for
   the mobile overlay only. */
.nav-contact-mobile {
  display: none;
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  width: 42px;
  height: 42px;
  position: relative;
  padding: 0;
  cursor: pointer;
}

.nav-toggle span {
  position: absolute;
  left: 11px;
  right: 11px;
  top: calc(50% - 1px);
  height: 2px;
  background: var(--ink);
  transform: translateY(-5px);
  transition: transform 0.3s ease, background 0.3s ease;
}

.nav-toggle span:last-child {
  transform: translateY(5px);
}

@media (max-width: 1200px) {
  .nav-toggle {
    display: block;
    grid-column: 3;
    justify-self: end;
    /* Above the overlay and the recoloured header — always tappable. */
    position: relative;
    z-index: 60;
  }
  .contact-link {
    display: none;
  }
  .nav-contact-mobile {
    display: block;
  }

  /* The header fades between its white and black states instead of snapping,
     and the two logo colourways crossfade in place. Solid background, no
     blur: backdrop-filter would make the header the containing block for the
     position:fixed overlay, re-anchoring it mid-retract (the menu visibly
     jumped and shifted sideways while closing on every page but home). */
  .site-header {
    background: var(--bg);
    backdrop-filter: none;
    transition: background-color 0.4s ease, border-color 0.4s ease;
  }
  .wordmark {
    position: relative;
    /* The overlay nav is a child of the header and paints above its
       siblings — lift the logo over it, like the toggle's z-index: 60. */
    z-index: 60;
  }
  .wordmark img {
    transition: opacity 0.3s ease;
  }
  html body .wordmark .logo-white {
    display: block;
    position: absolute;
    inset: 0;
    margin: auto;
    opacity: 0;
  }
  html body.nav-open .wordmark .logo-white {
    opacity: 1;
  }
  html body.nav-open .wordmark .logo-black {
    opacity: 0;
  }

  /* Landing page: no white bar — the photo runs to the very top and the
     hamburger sits on its own small white plate (echoing the wordmark plate)
     so it reads over any image. */
  body.home:not(.nav-open) .site-header {
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
  }
  body.home:not(.nav-open) .nav-toggle {
    background: #fff;
  }
  /* The logo gets the same white plate as the hamburger so it reads over
     the photo running under the transparent landing header. Padding stays
     in both states so nothing shifts when the menu opens. */
  body.home .wordmark {
    padding: 10px 12px;
  }
  body.home:not(.nav-open) .wordmark {
    background: #fff;
  }
  body.home .hero {
    min-height: 100svh;
    margin-top: -71px;
  }

  /* The menu is a full-screen black canvas that drops in from the top
     and slides back up on close. Kept in the DOM (no display toggling)
     so both directions animate. */
  .site-nav {
    display: flex;
    position: fixed;
    inset: 0;
    background: #0c0c0c;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding: max(96px, 16svh) var(--pad) 48px;
    z-index: 30;
    overflow-y: auto;
    transform: translate3d(0, -102%, 0);
    visibility: hidden;
    will-change: transform;
    backface-visibility: hidden;
    /* Closing: ease-in-out, and the links (below) hold still until the
       panel has fully left — no double motion on the way up. */
    transition:
      transform 0.5s cubic-bezier(0.65, 0, 0.35, 1),
      visibility 0s linear 0.5s;
  }
  body.nav-open .site-nav {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    /* Opening: a long decelerating tail lands the panel softly. */
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  html body .site-nav a {
    font-size: clamp(21px, 6vw, 28px);
    font-weight: 300;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.2;
    color: #fff;
    padding: 10px 0;
    border: 0;
    opacity: 0;
    transform: translateY(12px);
    /* On close the links stay put and only reset (instantly) once the
       panel is hidden — fading them mid-slide looked broken. */
    transition: opacity 0s linear 0.5s, transform 0s linear 0.5s;
  }
  html body.nav-open .site-nav a {
    color: #fff;
    opacity: 1;
    transform: none;
    transition: opacity 0.35s ease 0.15s, transform 0.35s ease 0.15s;
  }
  html body.nav-open .site-nav a:active {
    color: #8a8a86;
  }
  /* The desktop chip hover doesn't belong in the overlay — a tap leaves the
     link stuck :hover, and the near-black chip reads as a ghost band. */
  html body .site-nav a:hover {
    background: transparent;
    box-shadow: none;
  }
  /* Studio + Contact set apart from the categories. */
  html body .site-nav a:nth-last-child(2) {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #2a2a2a;
    width: 100%;
  }

  /* While open, the header sits solid black on top with the X. It stays
     sticky — flipping to position:fixed made the page content jump by the
     header's height every time the menu opened or closed. */
  html body.nav-open {
    overflow: hidden;
  }
  html body.nav-open .site-header {
    mix-blend-mode: normal;
    background: #0c0c0c;
    border-color: transparent;
    backdrop-filter: none;
  }
  html body.nav-open .nav-toggle span {
    background: #fff;
  }
  .nav-open .nav-toggle span:first-child {
    transform: rotate(45deg);
  }
  .nav-open .nav-toggle span:last-child {
    transform: rotate(-45deg);
  }
}

/* ---- Home hero ---------------------------------------------------------- */

/* The landing page shows the header wordmark like every other page. */

.hero {
  /* Fill the viewport minus the (sticky, white) header above. */
  min-height: calc(100svh - 48px);
  position: relative;
  display: flex;
  align-items: flex-end;
  background-image: url("/agentbauer-hero-image.avif"), linear-gradient(160deg, #f4f2ee 0%, #e8e5df 55%, #f4f2ee 100%);
  background-size: cover;
  background-position: center;
  color: var(--ink);
}



/* Solid white plate behind the wordmark + tagline so they pop off any photo. */
.hero-inner {
  background: #fff;
  padding: clamp(14px, 1.6vw, 24px);
  margin: var(--pad);
  margin-bottom: clamp(32px, 5vh, 56px);
  width: fit-content;
  max-width: calc(100% - 2 * var(--pad));
}

.hero h1 {
  margin: 0;
}

.hero-logo {
  display: block;
  width: clamp(170px, 24vw, 340px);
  height: auto;
}

.hero-tag {
  margin: 10px 0 0;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}

/* The whole hero photo opens the artist: an invisible link stretched over
   the section. The wordmark plate ignores the pointer so clicks anywhere on
   the photo (plate included) land on the link. */
.hero-link {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

.hero-inner {
  position: relative;
  pointer-events: none;
}

/* Photo credit, bottom right — links to the artist behind the hero image. */
.hero-credit {
  position: absolute;
  right: var(--pad);
  bottom: var(--pad);
  background: #fff;
  color: var(--ink);
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background 0.15s ease, color 0.15s ease;
}

.hero-credit .credit-arrow {
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.15s ease;
}

/* Hovering anywhere on the photo answers back: the credit chip inverts and
   its arrow leans forward — the whole hero reads as one clickable surface. */
.hero-credit:hover,
.hero:has(.hero-link:hover) .hero-credit {
  background: var(--ink);
  color: #fff;
}

.hero-credit:hover .credit-arrow,
.hero:has(.hero-link:hover) .credit-arrow {
  transform: translateX(3px);
}

/* Phones: the landing page is only the photo — no credit chip, no footer.
   The whole hero is still a link to the artist, and the hamburger is the
   only way onward (everyone knows what it means). */
@media (max-width: 700px) {
  .hero-credit {
    display: none;
  }
  body.home .site-footer {
    display: none;
  }
  .hero-inner {
    margin-bottom: 24px;
  }
}

/* ---- Page furniture ----------------------------------------------------- */

main {
  min-height: 55vh;
}

/* Studio & contact: on wide screens the content stops growing at 1520px and
   centers — the gutter takes over from --pad. */
body.studio,
body.contact {
  --gx: max(var(--pad), (100% - 1520px) / 2);
}

body.studio .page-head,
body.contact .page-head,
body.studio .prose,
body.contact .prose,
body.studio .studio-photo,
body.contact .contact-row {
  padding-inline: var(--gx);
}

/* .prose's 640px cap is border-box — with the wide gutter padding it would
   squeeze the text; move the cap onto the paragraphs instead. */
body.studio .prose,
body.contact .prose {
  max-width: none;
}

body.studio .prose > *,
body.contact .prose > * {
  max-width: 640px;
}

body.studio .studio-stats,
body.studio .studio-line {
  margin-inline: var(--gx);
}

body.contact .contact-row:hover {
  padding-left: calc(var(--gx) + 10px);
}

.page-head {
  padding: clamp(40px, 7vh, 88px) var(--pad) 28px;
}

.page-head h1 {
  margin: 0;
  font-family: var(--display-font);
  font-size: clamp(28px, 5vw, 54px);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.lede {
  max-width: 560px;
  margin: 18px 0 0;
  color: var(--mute);
}

.lede a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.empty {
  color: var(--mute);
}

/* ---- Category page: big centered names, hover reveals starred work ------ */

.category-head {
  padding: clamp(48px, 10vh, 110px) var(--pad) clamp(20px, 4vh, 44px);
  text-align: center;
}

.category-head h1 {
  margin: 0;
  /* Trailing letter-space would off-centre the last glyph — pull it back. */
  margin-right: -0.02em;
  font-family: var(--display-font);
  font-size: clamp(40px, 9vw, 120px);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.05;
  /* White + difference: black on the bare page, inverts over the full-screen
     hover preview so it stays legible either way. */
  position: relative;
  z-index: 2;
  color: #fff;
  mix-blend-mode: difference;
}

/* A category page always fills the viewport, however short the list — the
   footer must start below the fold, not ride up over the hover image. The
   name list centres in whatever room is left under the title. */
main:has(.name-stack) {
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - 49px);
}

@media (max-width: 1200px) {
  main:has(.name-stack) {
    min-height: calc(100svh - 71px);
  }
}

.name-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(16px, 4vh, 48px) var(--pad) clamp(90px, 16vh, 180px);
  min-height: 42vh;
  flex: 1;
  justify-content: center;
  text-align: center;
}

.name-link {
  position: relative;
  z-index: 2;
  font-size: clamp(21px, 3.6vw, 40px);
  font-weight: 450;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.7;
  color: #fff;
  mix-blend-mode: difference;
  /* Only opacity animates. The black chip (background + ring below) must
     snap on and off in one frame — transitioning it leaves a hollow border
     hanging on the previous name when the mouse moves down the list. */
  transition: opacity 0.25s ease;
}

/* Hovering one NAME (not the whole container) lets it own the room; the
   rest step back. :has() scopes the dim to an actual name being hovered. */
.name-stack:has(.name-link:hover) .name-link:not(:hover) {
  mix-blend-mode: normal;
  color: #fff;
  opacity: 0.92;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}

/* Bold black highlight on the hovered name — box-shadow gives the padding
   without reflowing the list. :not(:hover) above keeps this one at full
   opacity (the :has rule out-specificities plain :hover otherwise). */
.name-stack .name-link:hover {
  opacity: 1;
  mix-blend-mode: normal;
  color: #fff;
  background: #000;
  box-shadow: 0 0 0 0.16em #000;
}

/* The hovered artist's starred image or film — a compact panel floating to
   the right, not a full-screen wash. */
.name-preview {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.name-preview.show {
  opacity: 1;
}

.name-preview img,
.name-preview video,
.name-preview iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  background: #000;
}

/* Hover previews stack as slides: the new one fades in over the old one
   (which the script removes once the fade is done), so switching artists is
   a true image-over-image crossfade. Image slides keep no black backdrop —
   the previous picture stays visible underneath until the new one paints. */
.name-preview .pv-slide {
  position: absolute;
  inset: 0;
  animation: pv-ease-in 0.45s ease;
}

.name-preview .pv-slide img {
  background: transparent;
}

@keyframes pv-ease-in {
  from {
    opacity: 0;
  }
}

/* The poster paints first; the Stream player fades in over it when ready. */
.name-preview .pv-under {
  background: transparent;
}

.name-preview iframe {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.name-preview iframe.pv-on {
  opacity: 1;
}

@media (hover: none) {
  /* Touchscreens: no hover, so an automatic spotlight (class set by JS)
     cycles down the list — same black chip and full-screen image as the
     desktop hover, advancing every few seconds. */
  .name-stack .name-link.auto {
    opacity: 1;
    mix-blend-mode: normal;
    color: #fff;
    background: #000;
    box-shadow: 0 0 0 0.16em #000;
  }
  .name-stack:has(.name-preview.show) .name-link:not(.auto) {
    mix-blend-mode: normal;
    color: #fff;
    opacity: 0.92;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
  }
  .name-stack:hover .name-link {
    opacity: 1;
  }
}

.empty {
  color: var(--mute);
}

/* ---- Artist project grid (client-named tiles) --------------------------- */

.project-grid {
  columns: 3;
  column-gap: 14px;
  padding: 8px var(--pad) 70px;
}

@media (max-width: 1000px) {
  .project-grid {
    columns: 2;
  }
}

@media (max-width: 560px) {
  .project-grid {
    columns: 1;
  }
}

/* Layout switch: large editorial masonry ↔ uniform overview grid. */
.view-toggle {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 0 var(--pad) 10px;
}

.vt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  color: var(--mute);
  cursor: pointer;
  background: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.vt-btn:hover {
  color: var(--ink);
}

.vt-btn.active {
  color: var(--ink);
  border-color: var(--ink);
}

.project-grid.compact {
  columns: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}

@media (max-width: 560px) {
  .project-grid.compact {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
}

.project-grid.compact .project-tile {
  margin-bottom: 0;
  /* Beats the inline per-cover aspect ratio in overview mode. */
  aspect-ratio: 1 !important;
}

.project-grid.compact .project-tile img,
.project-grid.compact .project-blank {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-grid.compact .project-client {
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 22px 10px 9px;
}

.project-tile {
  display: block;
  position: relative;
  margin-bottom: 14px;
  break-inside: avoid;
  overflow: hidden;
  background: #f3f2f0;
}

.project-tile img {
  width: 100%;
  display: block;
  transition: transform 0.5s ease;
}

.project-tile:hover img {
  transform: scale(1.03);
}

.project-blank {
  display: block;
  aspect-ratio: 4 / 3;
  background: #161616;
}

.project-client {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 34px 16px 16px;
  color: #fff;
  font-size: clamp(15px, 1.7vw, 21px);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.62));
}

/* Client names stay hidden until the tile is hovered — the work leads.
   Touch screens have no hover, so there the label stays visible. */
@media (hover: hover) {
  .project-client {
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  .project-tile:hover .project-client,
  .project-tile:focus-visible .project-client {
    opacity: 1;
  }
}

.project-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute);
  transition: color 0.15s ease;
}

.project-back .back-arrow {
  font-size: 15px;
  line-height: 1;
  /* Optically centers the arrow against the small caps. */
  margin-top: -1px;
  transition: transform 0.15s ease;
}

.project-back:hover {
  color: var(--ink);
}

.project-back:hover .back-arrow {
  transform: translateX(-3px);
}

/* On a project page the artist's name is the headline; the client sits
   under it as a quieter subtitle. */
.project-client-sub {
  margin-top: 10px;
  font-size: clamp(14px, 1.6vw, 18px);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}

/* ---- Artist portfolio --------------------------------------------------- */

.artist-head .discipline {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--mute);
}

.artist-head .bio {
  max-width: 560px;
  margin: 20px 0 0;
  color: var(--mute);
}

.contact-block {
  margin-top: 24px;
}

.contact-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 0.95;
}

.contact-rep {
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mute);
}

.contact-inline {
  margin-top: 6px;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.contact-inline a {
  color: var(--ink);
}

.contact-inline a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-sep {
  margin: 0 8px;
  color: var(--mute);
}

.work-grid {
  columns: 2;
  column-gap: 14px;
  padding: 20px var(--pad) 90px;
}

@media (max-width: 700px) {
  .work-grid {
    columns: 1;
  }
}

/* Overview layout — every work the same size (inline aspect-ratio from the
   markup needs the !important to yield). */
.work-grid.compact {
  columns: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
  padding-top: 10px;
}

@media (max-width: 560px) {
  .work-grid.compact {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
}

.work-grid.compact .work-item {
  margin-bottom: 0;
  aspect-ratio: 1 / 1 !important;
}

.work-grid.compact .work-item img,
.work-grid.compact .video-blank {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-item.is-hidden {
  display: none;
}

/* Placeholder boxes carry a faint centered wordmark until their image
   arrives (the loaded image paints over it — isolation + negative z keep
   the watermark strictly beneath the content). */
.project-tile,
.work-item {
  isolation: isolate;
}

.project-tile::before,
.work-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/agt_b_logo_short_black.svg") no-repeat center / clamp(70px, 30%, 130px);
  opacity: 0.09;
  pointer-events: none;
}

/* While a tile's cover is still loading, the client label sits plainly in
   ink — the black gradient wash only appears once there is a photo under it. */
.project-tile:has(img:not(.img-ok)) .project-client {
  background: none;
  color: var(--ink);
}

/* Grid and tile images fade in over their reserved placeholder box once
   loaded. (No opacity:0 resting state — Chrome refuses to lazy-load
   invisible images, which would deadlock the load.) */
.work-grid img.img-ok,
.project-grid img.img-ok {
  animation: img-fade 0.18s ease;
}

@keyframes img-fade {
  from {
    opacity: 0;
  }
}

/* Tiles and works rise into place on scroll (class set by JS, so content
   stays visible without it; skipped for reduced motion). */
@media (prefers-reduced-motion: no-preference) {
  .will-reveal {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .will-reveal.in-view {
    opacity: 1;
    transform: none;
  }
}

/* Soft cross-fade between page loads in browsers that support it. */
@view-transition {
  navigation: auto;
}

.show-more-wrap {
  display: flex;
  justify-content: center;
  padding: 8px var(--pad) 90px;
}

.show-more {
  background: none;
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 13px 40px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.show-more:hover {
  background: var(--ink);
  color: var(--bg);
}

.work-item {
  display: block;
  width: 100%;
  margin-bottom: 14px;
  break-inside: avoid;
  position: relative;
  border: 0;
  padding: 0;
  background: #f3f2f0;
  cursor: zoom-in;
  font: inherit;
}

.work-item img {
  width: 100%;
  display: block;
}

.video-blank {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #161616;
}

.play-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* Drawn triangle — a unicode ▶ renders as the blue emoji on iOS. */
.play-badge::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #fff;
  margin-left: 3px;
}

/* ---- Project view ------------------------------------------------------- */

.project-view {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(8, 8, 8, 0.93);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vmin, 48px);
  cursor: zoom-out;
}

.project-frame {
  /* Fixed width (not shrink-to-image): the caption, counter and download
     button hold the exact same spot for every work; only the image varies. */
  width: min(1100px, 94vw);
  display: flex;
  flex-direction: column;
  gap: 16px;
  cursor: auto;
}

.project-frame img,
.project-frame video {
  max-width: 100%;
  max-height: 76vh;
  object-fit: contain;
  background: #000;
}

.project-frame .stream-frame {
  width: min(1100px, 94vw);
  aspect-ratio: 16 / 9;
  max-height: 76vh;
  border: 0;
  background: #000;
}

.project-bar {
  display: flex;
  align-items: center;
  gap: 14px;
}

.dl-btn {
  display: inline-block;
  padding: 12px 30px;
  border: 1px solid #fff;
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  transition: background 0.15s ease, color 0.15s ease;
}

.dl-btn:hover {
  background: #fff;
  color: #111;
}

.pv-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: #fff;
  font-size: 44px;
  line-height: 1;
  cursor: pointer;
  padding: 20px;
  opacity: 0.7;
  transition: opacity 0.15s ease;
  z-index: 2;
}

.pv-nav:hover {
  opacity: 1;
}

.pv-prev {
  left: max(8px, 2vw);
}

.pv-next {
  right: max(8px, 2vw);
}

.pv-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* Fixed stage height — the caption/download bar never jumps between
     differently-sized works or while the next one loads. */
  height: 76vh;
}

/* Loader: the wordmark fills with white, left to right, and repeats. */
.pv-stage.pv-loading::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: min(190px, 40vw);
  height: 34px;
  -webkit-mask: url("/agt_bauer_logo_primary_black.svg") no-repeat center / contain;
  mask: url("/agt_bauer_logo_primary_black.svg") no-repeat center / contain;
  background: linear-gradient(90deg, #fff 50%, rgba(255, 255, 255, 0.18) 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  animation: logo-fill 1.4s ease-in-out infinite;
}

@keyframes logo-fill {
  to {
    background-position: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pv-stage.pv-loading::after {
    animation: none;
    background: rgba(255, 255, 255, 0.5);
  }
}

.pv-caption {
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pv-count {
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  letter-spacing: 0.12em;
  margin: 0 auto 0 14px;
}

@media (max-width: 640px) {
  .pv-nav { font-size: 32px; padding: 10px; }
}

.pv-close {
  position: absolute;
  top: 18px;
  right: 22px;
  background: none;
  border: 0;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 10px;
}

/* ---- Contact ------------------------------------------------------------ */

/* Bold editorial contact: full-width rows, oversized names, black invert on hover. */
.contact-list {
  margin-top: clamp(20px, 3vh, 40px);
}

.contact-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(14px, 2.4vh, 26px) var(--pad);
  transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.25s ease;
}

.contact-row:hover {
  background: var(--ink);
  color: var(--bg);
  padding-left: calc(var(--pad) + 10px);
}

.contact-name {
  /* Same scale and weight as the CONTACT page title. */
  font-size: clamp(28px, 5vw, 54px);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 0.95;
  white-space: nowrap;
}

.contact-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  text-align: right;
  flex-shrink: 0;
}

.contact-role {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 6px;
}

.contact-row:hover .contact-role {
  color: rgba(255, 255, 255, 0.55);
}

.contact-line {
  color: inherit;
  font-size: clamp(13px, 1.1vw, 15px);
  transition: opacity 0.15s ease;
}

.contact-line:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 700px) {
  .contact-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .contact-name {
    font-size: clamp(28px, 8vw, 44px);
    white-space: normal;
  }
  .contact-meta {
    align-items: flex-start;
    text-align: left;
  }
  .contact-role {
    margin-bottom: 2px;
  }
}

/* Studio: the room, then the measurement band — the three numbers that
   matter, set at wordmark weight between hairlines. */
.studio-photo {
  margin: 0;
  padding: 12px var(--pad) 0;
}

.studio-photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72svh;
  object-fit: cover;
}

.studio-stats {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin: clamp(28px, 5vh, 56px) var(--pad) 0;
  padding: clamp(24px, 3.5vh, 40px) 0;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stat-value {
  font-weight: 800;
  font-size: clamp(46px, 7vw, 108px);
  line-height: 0.9;
  letter-spacing: -0.015em;
}

.stat-unit {
  font-size: 0.36em;
  letter-spacing: 0.02em;
  margin-left: 0.18em;
}

.stat-label {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mute);
}

.studio-line {
  margin: clamp(20px, 3vh, 30px) var(--pad) 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

@media (max-width: 700px) {
  .studio-stats {
    flex-direction: column;
    gap: 26px;
  }
}

.prose {
  padding: 40px var(--pad) 90px;
  max-width: 640px;
  color: var(--ink);
}

.prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Footer ------------------------------------------------------------- */

/* Studio booking button — solid ink plate, same language as the hover chips. */
.studio-cta {
  display: inline-block;
  background: var(--ink);
  color: var(--bg);
  padding: 15px 28px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: opacity 0.15s ease;
}

.studio-cta:hover {
  opacity: 0.82;
}

.site-footer {
  border-top: 1px solid var(--line);
  padding: 48px var(--pad) 64px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px 64px;
  justify-content: space-between;
  /* Above the fixed full-screen hover/spotlight preview (z-index: 1) — the
     footer slides over the image instead of disappearing behind it. */
  position: relative;
  z-index: 2;
  background: var(--bg);
}

.footer-name img {
  display: block;
  height: 15px;
  width: auto;
}

.footer-meta {
  font-size: 12px;
  line-height: 1.8;
  color: var(--mute);
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, auto));
  gap: 8px 40px;
}