:root {
  --ink: #061722;
  --ink-soft: #0b2231;
  --ink-lift: #102c3e;
  --paper: #f4f6f7;
  --white: #ffffff;
  --blue: #65b8f7;
  --blue-deep: #135b8c;
  --muted-dark: rgba(6, 23, 34, .62);
  --muted-light: rgba(255, 255, 255, .62);
  --line-dark: rgba(6, 23, 34, .2);
  --line-light: rgba(255, 255, 255, .22);
  --font: "roc-grotesk-wide", Arial, Helvetica, sans-serif;
  --gutter: clamp(1.25rem, 3.25vw, 3.75rem);
  --content: 100rem;
  --header-height: 5.75rem;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 20rem;
  scroll-behavior: smooth;
  background: var(--ink);
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a,
button,
summary {
  color: inherit;
  font: inherit;
}

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

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 1rem;
  left: 1rem;
  padding: .75rem 1rem;
  color: var(--ink);
  background: var(--white);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* PERMANENT MASTHEAD */

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  min-height: var(--header-height);
  color: var(--white);
  background: rgba(6, 23, 34, .98);
  border-bottom: 1px solid var(--line-light);
  box-shadow: 0 10px 35px rgba(0, 0, 0, .12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: var(--header-height);
  padding: 0 var(--gutter);
}

.site-brand {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  color: var(--white);
  line-height: 1;
  text-decoration: none;
}

.brand-name {
  font-size: clamp(1.45rem, 2.05vw, 2rem);
  font-weight: 300;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.brand-role {
  margin-top: .35rem;
  font-size: .83rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 2.7vw, 3.4rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list > li > a,
.nav-work summary {
  position: relative;
  display: inline-block;
  color: var(--white);
  font-size: clamp(.9rem, 1.1vw, 1.05rem);
  font-weight: 400;
  letter-spacing: .045em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.nav-list > li > a::after,
.nav-work summary::after {
  position: absolute;
  right: 0;
  bottom: -.65rem;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s ease;
}

.nav-list > li > a:hover::after,
.nav-list > li > a:focus-visible::after,
.nav-work summary:hover::after,
.nav-work summary:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-list > li > a.active,
.nav-work summary.active {
  color: var(--blue);
}

.nav-work {
  position: relative;
}

.nav-work details {
  position: relative;
}

.nav-work summary {
  cursor: pointer;
  list-style: none;
}

.nav-work summary::-webkit-details-marker {
  display: none;
}

.menu-caret {
  display: inline-block;
  width: .46rem;
  height: .46rem;
  margin: 0 0 .2rem .55rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform .25s ease;
}

.nav-work details[open] .menu-caret {
  transform: translateY(.18rem) rotate(225deg);
}

.work-submenu {
  position: absolute;
  top: calc(100% + 1.35rem);
  left: 50%;
  min-width: 8.5rem;
  margin: 0;
  padding: .55rem 0;
  border: 1px solid var(--line-light);
  background: rgba(6, 23, 34, .99);
  box-shadow: 0 20px 45px rgba(0, 0, 0, .24);
  list-style: none;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -.45rem);
  transition: opacity .22s ease, transform .22s ease;
}

.nav-work details[open] .work-submenu,
.nav-work:hover .work-submenu,
.nav-work:focus-within .work-submenu {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.work-submenu a {
  display: block;
  padding: .72rem 1.15rem;
  color: var(--white);
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .2s ease, background .2s ease;
}

.work-submenu a:hover,
.work-submenu a:focus-visible,
.work-submenu a.active {
  color: var(--blue);
  background: rgba(255, 255, 255, .06);
}

/* LETTER-BY-LETTER PAGE TITLES */

.title-mask {
  display: block;
  overflow: hidden;
  padding: .08em 0 .14em;
}

.motion-title {
  margin: 0;
  font-size: clamp(2.4rem, 5vw, 5.25rem);
  font-weight: 300;
  letter-spacing: 0;
  line-height: .96;
  text-transform: uppercase;
}

.motion-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(112%);
  transition:
    transform .82s cubic-bezier(.16, 1, .3, 1),
    opacity .46s ease;
  transition-delay: var(--char-delay, 0s);
}

.is-revealed .motion-char {
  opacity: 1;
  transform: translateY(0);
}

/* HOME */

.home-page {
  color: var(--white);
  background: var(--ink);
}

.home-page .header-inner {
  justify-content: flex-start;
}

.home-page .site-brand {
  display: none;
}

.home-page .site-header {
  position: absolute;
  right: 0;
  left: 0;
  min-height: var(--header-height);
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.home-page .site-header::before {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: min(49rem, 76vw);
  height: 9.5rem;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(ellipse at 14% 12%, rgba(2, 12, 19, .72) 0%, rgba(2, 12, 19, .42) 34%, rgba(2, 12, 19, 0) 76%);
}

.home-page .header-inner {
  position: relative;
  z-index: 1;
}

.home-page .nav-list {
  text-shadow: 0 2px 16px rgba(0, 0, 0, .72), 0 1px 2px rgba(0, 0, 0, .45);
}

.home-page .nav-list > li > a,
.home-page .nav-work summary {
  font-weight: 500;
}

.home-hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: var(--ink);
}

.home-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform-origin: 66% center;
  animation: home-drift 18s cubic-bezier(.2, .6, .2, 1) both;
}

@keyframes home-drift {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.035);
  }
}

.home-hero::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(3, 14, 22, .72) 0%, rgba(3, 14, 22, .18) 52%, rgba(3, 14, 22, .03) 100%),
    linear-gradient(0deg, rgba(3, 14, 22, .62) 0%, transparent 44%);
}

.home-identity {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  bottom: clamp(3.5rem, 7vw, 7rem);
}

.home-name {
  margin: 0;
  font-size: clamp(2.2rem, 3.65vw, 3.8rem);
  font-weight: 300;
  letter-spacing: .005em;
  line-height: .96;
  text-transform: uppercase;
  overflow: hidden;
  padding-bottom: .08em;
}

.home-role {
  margin: .85rem 0 0 .08rem;
  font-size: clamp(.8rem, 1vw, .95rem);
  font-weight: 400;
  letter-spacing: .24em;
  line-height: 1;
  text-transform: uppercase;
  overflow: hidden;
  padding-bottom: .14em;
}

.home-current {
  position: absolute;
  z-index: 2;
  top: auto;
  bottom: clamp(16.75rem, calc(25vh + 3.25rem), 21.25rem);
  left: var(--gutter);
  display: block;
  max-width: min(31rem, 42vw);
  color: var(--white);
  text-align: left;
  text-shadow: none;
}

.home-current-copy {
  display: grid;
  justify-items: start;
}

.home-current-label-row {
  display: flex;
  align-items: center;
  gap: .58rem;
  min-height: .65rem;
  margin-bottom: .58rem;
  opacity: 0;
  filter: blur(.35rem);
  transform: translateY(.7rem);
  animation: current-copy 1.05s 1.58s cubic-bezier(.16, 1, .3, 1) forwards;
}

.home-current-beacon {
  display: block;
  width: .46rem;
  height: .46rem;
  flex: 0 0 .46rem;
  border-radius: 50%;
  background: var(--blue);
  animation: pd-beacon 8.5s 3.1s ease-in-out infinite;
}

.home-current-label {
  color: var(--white);
  font-size: .62rem;
  font-weight: 400;
  letter-spacing: .2em;
  line-height: 1;
  text-transform: uppercase;
  animation: pd-label-siren 8.5s 3.1s ease-in-out infinite;
}

.home-current-title {
  color: transparent;
  background: linear-gradient(100deg, var(--blue) 0%, var(--blue) 43%, #fff 50%, var(--blue) 57%, var(--blue) 100%);
  background-position: 160% 50%;
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  font-size: clamp(1rem, 1.3vw, 1.22rem);
  font-weight: 300;
  letter-spacing: .035em;
  line-height: 1.2;
  text-transform: uppercase;
  opacity: 0;
  filter: blur(.4rem);
  transform: translateY(1rem);
  animation:
    current-copy 1.05s 1.78s cubic-bezier(.16, 1, .3, 1) forwards,
    pd-sheen 8s 3.2s ease-in-out infinite;
}

.home-current-detail {
  margin-top: .28rem;
  color: rgba(255, 255, 255, .84);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 1.35;
  text-transform: uppercase;
  opacity: 0;
  filter: blur(.35rem);
  transform: translateY(.8rem);
  animation: current-copy 1.05s 2.02s cubic-bezier(.16, 1, .3, 1) forwards;
}

@keyframes current-copy {
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes pd-sheen {
  0%, 68% {
    background-position: 160% 50%;
  }

  88%, 100% {
    background-position: -60% 50%;
  }
}

@keyframes pd-beacon {
  0%, 68%, 100% {
    background: var(--blue);
    box-shadow: 0 0 0 0 rgba(101, 184, 247, 0);
    opacity: .72;
    transform: scale(.84);
  }

  72%, 78% {
    background: var(--white);
    box-shadow: 0 0 0 .38rem rgba(101, 184, 247, .16);
    opacity: 1;
    transform: scale(1.12);
  }

  75% {
    background: #ee7382;
    box-shadow: 0 0 0 .28rem rgba(238, 115, 130, .12);
    opacity: .94;
    transform: scale(.95);
  }
}

@keyframes pd-label-siren {
  0%, 68%, 100% {
    color: var(--white);
  }

  72%, 78% {
    color: var(--white);
  }

  75% {
    color: #ee9aa5;
  }
}

/* INTERIOR PAGE FRAME */

.dark-page {
  min-height: calc(100svh - var(--header-height));
  color: var(--white);
  background:
    radial-gradient(circle at 86% 8%, rgba(64, 151, 214, .14), transparent 34rem),
    linear-gradient(145deg, var(--ink-soft), var(--ink) 62%);
}

.page-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: end;
  max-width: var(--content);
  margin: 0 auto;
  padding: clamp(5rem, 9vw, 9rem) var(--gutter) clamp(3rem, 5vw, 5rem);
  border-bottom: 1px solid var(--line-light);
}

.page-intro--minimal {
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  padding-top: clamp(.55rem, 1vw, .9rem);
  padding-bottom: clamp(.2rem, .55vw, .5rem);
  border-bottom: 0;
  text-align: center;
}

.page-intro--minimal .motion-title {
  font-size: clamp(1.15rem, 1.58vw, 1.55rem);
  letter-spacing: .09em;
}

.page-kicker {
  margin: 0 0 .85rem;
  color: var(--blue);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* TV + FILM */

.work-gallery {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(3rem, 5vw, 5.5rem) clamp(1.5rem, 3vw, 3.25rem);
  width: 100%;
  max-width: var(--content);
  margin: 0 auto;
  padding: clamp(.35rem, .7vw, .7rem) var(--gutter) clamp(6rem, 10vw, 10rem);
}

.project {
  position: relative;
  grid-column: 1 / -1;
  display: block;
  min-width: 0;
  margin: 0;
  scroll-margin-top: calc(var(--header-height) + 1rem);
  padding: clamp(.38rem, .55vw, .58rem);
  border: 1px solid rgba(255, 255, 255, .3);
  color: inherit;
  background: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .016));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05), 0 30px 90px rgba(0, 0, 0, .2);
  transition: border-color .45s ease, background .45s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}

.project--wide {
  grid-column: 1 / -1;
}

.project-frame {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 2.15 / 1;
  overflow: hidden;
  background: #02090e;
}

.project-frame picture,
.project-hero-frame picture {
  display: block;
  width: 100%;
  height: 100%;
}

.project-frame::after {
  position: absolute;
  inset: .42rem;
  border: 1px solid rgba(255, 255, 255, .3);
  content: "";
  pointer-events: none;
}

.project-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(.92) contrast(1.02);
  transition: filter .6s ease;
}

.project-frame--ahs img {
  object-position: center top;
}

.project-frame--night-agent img {
  object-position: center 36%;
}

.project-frame--fbimw img {
  object-position: center top;
}

.project--organized-crime .project-title,
.project--raising-kanan .project-title {
  font-size: clamp(1.125rem, 1.45vw, 1.65rem);
}

.organized-crime-page .project-detail-intro .motion-title,
.raising-kanan-page .project-detail-intro .motion-title {
  max-width: none;
  font-size: clamp(1.8rem, 3.4vw, 3.5rem);
  line-height: 1.12;
}

.organized-crime-page .media-dialog-close,
.raising-kanan-page .media-dialog-close {
  flex-shrink: 0;
}

.project-frame--elsbeth img,
.project-frame--griselda img {
  object-position: center top;
}

.project:hover .project-frame img {
  filter: saturate(1) contrast(1.03);
}

.project:hover {
  border-color: rgba(101, 184, 247, .58);
  background: linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(101, 184, 247, .025));
  transform: translateY(-.18rem);
}

.project-caption {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) max-content max-content;
  gap: clamp(1rem, 2vw, 2.25rem);
  align-items: center;
  padding: clamp(.78rem, 1vw, 1rem) clamp(.7rem, 1.2vw, 1.2rem) clamp(.76rem, 1vw, .95rem);
  border-top: 1px solid rgba(255, 255, 255, .16);
  background: linear-gradient(90deg, rgba(1, 9, 14, .3), rgba(255, 255, 255, .018));
}

.project-title {
  min-width: 0;
  margin: 0;
  font-size: clamp(1.35rem, 1.8vw, 2.25rem);
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-title a {
  position: relative;
  color: inherit;
  text-decoration: none;
}

.project-title a::after {
  position: absolute;
  right: 0;
  bottom: -.28rem;
  left: 0;
  height: 1px;
  background: var(--blue);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}

.project-title a:hover::after,
.project-title a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.project-credit {
  display: flex;
  flex-wrap: nowrap;
  gap: .65rem;
  align-items: baseline;
  min-width: 0;
  padding-top: 0;
  white-space: nowrap;
}

.project-credit-label {
  color: var(--blue);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.project-credit-value {
  margin: 0;
  color: var(--white);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  font-weight: 300;
  letter-spacing: .01em;
  line-height: 1.35;
}

.project-media-dock {
  position: absolute;
  z-index: 3;
  right: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  display: flex;
  gap: .65rem;
}

.media-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.15rem;
  height: 3.15rem;
  overflow: visible;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 50%;
  color: var(--white);
  background: rgba(3, 13, 20, .48);
  box-shadow: 0 10px 32px rgba(0, 0, 0, .22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  transition: color .3s ease, background .3s ease, border-color .3s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
  text-decoration: none;
}

.media-icon svg,
.media-dialog-close svg,
.stills-arrow svg {
  flex: 0 0 auto;
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.media-icon:first-child svg {
  fill: currentColor;
  stroke: none;
}

.media-icon::after {
  position: absolute;
  right: 50%;
  bottom: calc(100% + .7rem);
  padding: .48rem .68rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 1rem;
  color: var(--white);
  background: rgba(3, 13, 20, .82);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .2);
  content: attr(data-label);
  opacity: 0;
  font-size: .76rem;
  font-weight: 400;
  letter-spacing: .1em;
  white-space: nowrap;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
  transform: translate(50%, .35rem);
  transition: opacity .25s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
}

.media-icon:hover,
.media-icon:focus-visible {
  border-color: rgba(255, 255, 255, .86);
  color: var(--ink);
  background: rgba(255, 255, 255, .94);
  transform: translateY(-.16rem) scale(1.035);
}

.media-icon:hover::after,
.media-icon:focus-visible::after {
  opacity: 1;
  transform: translate(50%, 0);
}

/* INTERNAL MEDIA OVERLAYS */

.media-dialog {
  width: min(92vw, 76rem);
  max-width: none;
  max-height: 90dvh;
  margin: auto;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .24);
  color: var(--white);
  background: #030b10;
  box-shadow: 0 45px 140px rgba(0, 0, 0, .72);
  opacity: 0;
  transform: translateY(2.4rem) scale(.965);
  transition:
    opacity .48s ease,
    transform .72s cubic-bezier(.16, 1, .3, 1),
    overlay .48s allow-discrete,
    display .48s allow-discrete;
}

.media-dialog[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  opacity: 1;
  transform: translateY(0) scale(1);
}

.media-dialog.is-closing {
  opacity: 0;
  transform: translateY(1.25rem) scale(.985);
}

@starting-style {
  .media-dialog[open] {
    opacity: 0;
    transform: translateY(2.4rem) scale(.965);
  }
}

.media-dialog::backdrop {
  background: rgba(2, 8, 12, .84);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transition:
    opacity .48s ease,
    overlay .48s allow-discrete,
    display .48s allow-discrete;
}

.media-dialog[open]::backdrop {
  opacity: 1;
}

.media-dialog.is-closing::backdrop {
  opacity: 0;
}

@starting-style {
  .media-dialog[open]::backdrop {
    opacity: 0;
  }
}

.media-dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.media-dialog-title {
  margin: 0;
  font-size: clamp(1rem, 1.7vw, 1.35rem);
  font-weight: 300;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.media-dialog-title span {
  margin-left: .7rem;
  color: var(--blue);
  font-size: .72em;
  letter-spacing: .14em;
}

.media-dialog-close {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  color: rgba(255, 255, 255, .76);
  background: transparent;
  cursor: pointer;
  transition: color .3s ease, background .3s ease, transform .4s cubic-bezier(.16, 1, .3, 1);
}

.media-dialog-close:hover,
.media-dialog-close:focus-visible {
  color: var(--ink);
  background: var(--white);
  transform: rotate(90deg);
}

.media-player {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
  background: #000;
}

.media-player video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

.media-dialog--video[open] {
  height: min(88dvh, 50rem);
}

.video-controls {
  display: grid;
  grid-template-columns: auto auto auto minmax(5rem, 1fr) auto auto;
  gap: .55rem;
  align-items: center;
  min-height: 3.6rem;
  padding: .68rem .85rem;
  border-top: 1px solid rgba(255, 255, 255, .2);
  background: linear-gradient(90deg, #071722, #0b2231);
}

.video-control {
  display: inline-grid;
  min-width: 2.45rem;
  height: 2.25rem;
  padding: 0 .62rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 2rem;
  color: rgba(255, 255, 255, .84);
  background: rgba(255, 255, 255, .025);
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .06em;
  line-height: 1;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}

.video-control--primary {
  min-width: 2.65rem;
  color: var(--ink);
  background: var(--white);
}

.video-control:hover,
.video-control:focus-visible {
  border-color: var(--blue);
  color: var(--ink);
  background: var(--blue);
}

.video-progress {
  width: 100%;
  height: 1rem;
  margin: 0;
  accent-color: var(--blue);
  cursor: pointer;
}

.video-time {
  min-width: 6.2rem;
  color: rgba(255, 255, 255, .64);
  font-size: .68rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  text-align: right;
  white-space: nowrap;
}

.media-dialog--stills {
  width: min(94vw, 86rem);
}

.media-dialog--stills[open] {
  height: min(88dvh, 54rem);
  padding: .42rem;
  background:
    radial-gradient(circle at 50% 0%, rgba(101, 184, 247, .08), transparent 38rem),
    #030b10;
}

.stills-stage {
  position: relative;
  min-height: 0;
  margin: .55rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .26);
  background: #010609;
  box-shadow: inset 0 0 0 .45rem rgba(255, 255, 255, .025), 0 24px 70px rgba(0, 0, 0, .28);
}

.stills-stage::after {
  position: absolute;
  z-index: 1;
  inset: .45rem;
  border: 1px solid rgba(255, 255, 255, .11);
  content: "";
  pointer-events: none;
}

.stills-track {
  display: flex;
  width: 100%;
  height: 100%;
  transform: translateX(calc(var(--still-index, 0) * -100%));
  transition: transform .85s cubic-bezier(.16, 1, .3, 1);
}

.stills-track.is-resetting {
  transition: none;
}

.still-slide {
  display: grid;
  position: relative;
  flex: 0 0 100%;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: .75rem;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: .85rem 4.75rem .8rem;
  place-items: center;
}

.still-slide img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .36);
}

/* The legacy fallback adds a picture wrapper around stills. Keep that wrapper
   as the first grid row so the caption remains a separate, visible row in
   Chrome, Edge, Firefox, Safari, and Safari 14. */
.still-slide picture {
  display: grid;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  overflow: hidden;
  place-items: center;
}

.still-slide figcaption {
  position: relative;
  z-index: 2;
  color: rgba(255, 255, 255, .72);
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .11em;
  line-height: 1.35;
  text-align: center;
  text-transform: uppercase;
}

.stills-arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: grid;
  width: 3.15rem;
  height: 3.15rem;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .44);
  border-radius: 50%;
  color: var(--white);
  background: rgba(3, 13, 20, .35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transform: translateY(-50%);
  transition: color .3s ease, background .3s ease, border-color .3s ease;
}

.stills-arrow:hover,
.stills-arrow:focus-visible {
  border-color: var(--white);
  color: var(--ink);
  background: var(--white);
}

.stills-arrow--previous {
  left: 1rem;
}

.stills-arrow--next {
  right: 1rem;
}

/* INDIVIDUAL PROJECTS */

.project-page {
  min-height: calc(100svh - var(--header-height));
  color: var(--white);
  background:
    radial-gradient(circle at 88% 4%, rgba(101, 184, 247, .12), transparent 30rem),
    linear-gradient(145deg, var(--ink-soft), var(--ink) 66%);
}

.project-detail-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: end;
  max-width: var(--content);
  margin: 0 auto;
  padding: clamp(2.5rem, 4.5vw, 4.5rem) var(--gutter) clamp(1.5rem, 2.5vw, 2.5rem);
}

.project-detail-intro .motion-title {
  max-width: 15ch;
}

.project-detail-back {
  margin: 0 0 .55rem;
  color: var(--muted-light);
  font-size: .76rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .2s ease;
}

.project-detail-back:hover,
.project-detail-back:focus-visible {
  color: var(--blue);
}

.project-hero {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.project-hero-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #02090e;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .24);
}

.project-hero-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.project-hero-frame--cinema {
  aspect-ratio: 16 / 9;
}

.project-hero-frame--cinema img {
  object-position: center;
}

.project-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(5rem, 9vw, 9rem);
}

.project-meta-item {
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--line-light);
}

.project-meta-item + .project-meta-item {
  padding-left: clamp(1.5rem, 3vw, 3.5rem);
  border-left: 1px solid var(--line-light);
}

.project-meta-label {
  display: block;
  margin-bottom: .45rem;
  color: var(--muted-light);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.project-meta-value {
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  font-weight: 300;
}

/* The Work listing can stay expansive on a laptop because only the listing
   image window becomes shallower as the viewport gets shorter. */

@media (min-width: 981px) and (max-height: 840px) {
  .work-gallery .project-frame {
    aspect-ratio: 2.32 / 1;
  }
}

@media (min-width: 981px) and (max-height: 720px) {
  .work-gallery .project-frame {
    aspect-ratio: 2.48 / 1;
  }
}

/* The Shed's supplied widescreen poster keeps its full composition. */
.project--shed .project-frame,
.the-shed-page .project-hero-frame {
  aspect-ratio: 2047 / 853;
}

/* BIO — continuous navy, a generous reading column, and a softly blended portrait. */

.bio-page {
  color: var(--white);
  background: var(--ink);
  color-scheme: dark;
}

.bio-page .nav-list > li > a.active::after {
  transform: scaleX(1);
}

.about-page {
  min-height: calc(100svh - var(--header-height));
  color: #dde5eb;
  background:
    radial-gradient(ellipse at 84% 32%, rgba(27, 52, 68, .48), transparent 62%),
    var(--ink);
}

.about-grid {
  --bio-space: clamp(1.25rem, 3.2svh, 2.25rem);
  --portrait-height: min(43rem, max(20rem, calc(100svh - var(--header-height) - 2 * var(--bio-space) - 1rem)));
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: start;
  column-gap: clamp(1.5rem, 3.25vw, 3.5rem);
  max-width: 92rem;
  margin: 0 auto;
  padding: var(--bio-space) var(--gutter);
}

.about-image {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  width: min(100%, calc(var(--portrait-height) * 1579 / 2048));
  margin: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.about-image picture {
  display: block;
  width: 100%;
  border: 0;
  /* Feather the backdrop and jacket into the page, keeping the face opaque. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 94%, transparent);
}

.about-image img {
  width: 100%;
  height: auto;
  /* The oval preserves the top of the head while the studio edges fade. */
  -webkit-mask-image:
    radial-gradient(ellipse 32% 50% at 57% 35%, #000 85%, transparent),
    linear-gradient(to bottom, transparent, #000 9%, #000 86%, transparent);
  mask-image:
    radial-gradient(ellipse 32% 50% at 57% 35%, #000 85%, transparent),
    linear-gradient(to bottom, transparent, #000 9%, #000 86%, transparent);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

.about-content {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  max-width: none;
  padding: .1rem 0 0;
}

.about-heading {
  display: block;
  margin-bottom: clamp(1rem, 2.3svh, 1.5rem);
}

.about-heading .motion-title {
  flex: 0 0 auto;
  overflow: hidden;
  padding: .1em 0;
  font-size: clamp(1.85rem, 2.4vw, 2.5rem);
  color: var(--white);
  letter-spacing: .025em;
  line-height: 1;
}

.about-copy {
  margin: 0;
  font-family: "roc-grotesk", Arial, Helvetica, sans-serif;
  font-size: clamp(1rem, 1.22vw, 1.125rem);
  font-weight: 400;
  letter-spacing: .005em;
  line-height: 1.55;
}

.about-copy p {
  margin: 0 0 .85em;
  text-wrap: pretty;
}

.about-copy p:last-child {
  margin-bottom: 0;
}

/* CONTACT */

.contact-page {
  min-height: calc(100svh - var(--header-height));
  color: var(--white);
  background:
    radial-gradient(circle at 12% 82%, rgba(101, 184, 247, .18), transparent 32rem),
    linear-gradient(145deg, var(--ink-soft), var(--ink));
}

.contact-inner {
  max-width: var(--content);
  margin: 0 auto;
  padding: clamp(1.75rem, 3.8svh, 3rem) var(--gutter) clamp(1.25rem, 2.5svh, 2rem);
}

.contact-page .motion-title {
  font-size: clamp(1.85rem, 2.4vw, 2.5rem);
}

.contact-list {
  margin-top: clamp(1.25rem, 2.75svh, 2rem);
  border-top: 1px solid var(--line-light);
}

.contact-row {
  display: grid;
  grid-template-columns: .7fr 1.65fr .8fr;
  gap: 1.5rem;
  align-items: baseline;
  padding: clamp(1.3rem, 2.9svh, 1.6rem) 0;
  border-bottom: 1px solid var(--line-light);
}

.contact-city,
.contact-phone {
  color: var(--muted-light);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.contact-agency {
  font-size: clamp(1.125rem, 1.8vw, 1.65rem);
  font-weight: 300;
}

.contact-phone {
  text-align: right;
  text-decoration: none;
}

.contact-email-copy {
  justify-self: end;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--muted-light);
  background: transparent;
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-align: right;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s ease;
}

.contact-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: end;
  margin-top: clamp(3rem, 5.5svh, 4rem);
}

.contact-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(9rem, 1fr));
  max-width: 48rem;
  border-top: 1px solid rgba(255, 255, 255, .22);
  border-bottom: 1px solid rgba(255, 255, 255, .22);
}

.contact-links a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
  color: var(--white);
  font-size: clamp(.92rem, 1.25vw, 1.08rem);
  font-weight: 300;
  letter-spacing: .04em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .3s ease, background .3s ease;
}

.contact-links a + a {
  border-left: 1px solid rgba(255, 255, 255, .22);
}

.contact-link-mark {
  color: var(--blue);
  font-size: .9em;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}

.contact-links a:hover .contact-link-mark,
.contact-links a:focus-visible .contact-link-mark {
  transform: translate(.18rem, -.18rem);
}

.copyright {
  color: var(--muted-light);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.contact-links a:hover,
.contact-links a:focus-visible,
.contact-phone:hover,
.contact-phone:focus-visible,
.contact-email-copy:hover,
.contact-email-copy:focus-visible {
  color: var(--blue);
}

.contact-links a:hover,
.contact-links a:focus-visible {
  background: rgba(255, 255, 255, .045);
}

.copyright {
  margin: 0;
}

@media (min-width: 761px) {
  .contact-phone {
    cursor: default;
  }
}

/* RESPONSIVE */

@media (max-width: 980px) {
  :root {
    --header-height: 5.4rem;
  }

  .page-intro {
    grid-template-columns: 1fr;
  }

  .page-intro--minimal {
    grid-template-columns: 1fr;
  }

  .project-caption {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .project-title {
    grid-column: 1 / -1;
    font-size: clamp(1.3rem, 2.5vw, 1.65rem);
  }

  .project-credit {
    grid-column: auto;
  }

  .project-detail-intro {
    grid-template-columns: 1fr;
  }

  .project-frame {
    height: auto;
    min-height: 0;
  }

  .about-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
    max-width: 43rem;
    padding-top: 1.75rem;
    padding-bottom: 3rem;
  }

  .about-content {
    display: contents;
  }

  .about-heading {
    grid-row: 1;
    margin: 0;
  }

  .about-image {
    position: static;
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    width: min(100%, 25rem);
  }

  .about-copy {
    grid-row: 3;
    font-size: 1.0625rem;
  }

}

@media (max-width: 760px) {
  :root {
    --header-height: 7.4rem;
  }

  .header-inner {
    display: grid;
    grid-template-columns: 1fr;
    align-content: center;
    gap: .65rem;
    padding-top: .7rem;
    padding-bottom: .7rem;
  }

  .brand-name {
    font-size: 1.25rem;
  }

  .brand-role {
    margin-top: .2rem;
    font-size: .67rem;
  }

  .site-nav,
  .nav-list {
    width: 100%;
  }

  .nav-list {
    justify-content: space-between;
    gap: .65rem;
  }

  .nav-list > li > a,
  .nav-work summary {
    font-size: .7rem;
  }

  .menu-caret {
    width: .35rem;
    height: .35rem;
    margin-left: .3rem;
  }

  .work-submenu {
    top: calc(100% + .9rem);
    min-width: 7rem;
  }

  .work-submenu a {
    padding: .7rem .85rem;
    font-size: .7rem;
  }

  .home-hero img {
    object-position: 58% center;
  }

  .home-name {
    font-size: clamp(2.1rem, 10vw, 3rem);
  }

  .home-identity {
    bottom: 3rem;
  }

  .home-current {
    top: auto;
    right: auto;
    bottom: 14.75rem;
    left: var(--gutter);
    max-width: calc(100vw - (2 * var(--gutter)));
    text-align: left;
  }

  .page-intro {
    padding-top: 4.5rem;
  }

  .page-intro--minimal {
    padding-top: .75rem;
    padding-bottom: .35rem;
  }

  .page-intro--minimal .motion-title {
    font-size: 1.05rem;
  }

  .motion-title {
    font-size: clamp(2.25rem, 11vw, 3.6rem);
  }

  .work-gallery {
    grid-template-columns: 1fr;
    padding-top: 1.5rem;
  }

  .project,
  .project--wide {
    grid-column: 1;
  }

  .project-frame {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .project-caption {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    padding: 1.35rem .65rem 1.65rem;
  }

  .project-title {
    grid-column: 1 / -1;
  }

  .project-credit {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
  }

  .project--wide .project-title,
  .project-title {
    font-size: clamp(1.25rem, 6.5vw, 1.8rem);
    white-space: normal;
  }

  .media-dialog {
    width: 96vw;
    max-height: 91dvh;
  }

  .media-dialog-head {
    padding: .8rem .9rem;
  }

  .media-dialog-title {
    font-size: .9rem;
  }

  .media-dialog--video[open] {
    height: 82dvh;
  }

  .video-controls {
    grid-template-columns: auto auto auto minmax(2.5rem, 1fr) auto auto;
    gap: .35rem;
    padding: .55rem .5rem;
  }

  .video-control {
    min-width: 2.15rem;
    height: 2.1rem;
    padding: 0 .42rem;
    font-size: .61rem;
  }

  .video-time {
    min-width: 4.9rem;
    font-size: .58rem;
  }

  .project-media-dock {
    right: .8rem;
    bottom: .8rem;
  }

  .media-icon {
    width: 2.85rem;
    height: 2.85rem;
    padding: 0;
  }

  .media-icon::after {
    display: none;
  }

  .stills-arrow {
    width: 2.8rem;
    height: 2.8rem;
  }

  .media-dialog--stills[open] {
    width: 97vw;
    height: 88dvh;
    padding: .2rem;
  }

  .stills-stage {
    margin: .3rem;
  }

  .still-slide {
    gap: .5rem;
    padding: .65rem 3.5rem .55rem;
  }

  .still-slide figcaption {
    font-size: .64rem;
    letter-spacing: .08em;
  }

  .project-meta {
    grid-template-columns: 1fr;
  }

  .project-meta-item + .project-meta-item {
    padding-left: 0;
    border-left: 0;
  }

  .contact-row {
    grid-template-columns: 1fr;
    gap: .35rem;
  }

  .contact-phone {
    text-align: left;
  }

  .contact-email-copy {
    justify-self: start;
    text-align: left;
  }

  .contact-bottom {
    display: block;
  }

  .contact-links {
    grid-template-columns: 1fr;
  }

  .contact-links a + a {
    border-top: 1px solid rgba(255, 255, 255, .22);
    border-left: 0;
  }

  .copyright {
    margin-top: 2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .motion-char,
  .project-frame img,
  .project,
  .project-title a::after,
  .media-icon,
  .media-icon span,
  .media-dialog,
  .media-dialog::backdrop,
  .stills-track {
    transition: none !important;
  }

  .motion-char {
    opacity: 1;
    transform: none;
  }

  .home-hero img {
    animation: none;
  }

  .home-current {
    animation: none;
  }

  .home-current-title,
  .home-current-detail,
  .home-current-label-row {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none;
  }

  .home-current-label,
  .home-current-beacon {
    animation: none;
  }

  .home-current-beacon {
    opacity: 1;
    transform: none;
  }
}

/* V18 — larger video windows, optional full screen, and gallery sections. */
.media-dialog--video[open] {
  width: 96vw;
  height: 94dvh;
  max-height: 94dvh;
}

.video-controls {
  grid-template-columns: auto minmax(5rem, 1fr) auto auto;
  gap: .75rem;
  padding: .65rem .8rem;
}

.video-transport,
.video-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  min-width: 0;
}

.video-controls .video-control {
  display: inline-grid;
  min-width: 2.5rem;
  height: 2.6rem;
  padding: 0 .7rem;
  font-size: .875rem;
  letter-spacing: 0;
  white-space: nowrap;
}

.video-controls .video-control--fullscreen {
  min-width: 8rem;
}

.video-controls .video-time {
  min-width: 6.25rem;
  font-size: .8125rem;
  letter-spacing: 0;
}

.video-quality {
  min-width: 4.4rem;
  height: 2.6rem;
  padding: 0 .5rem;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: .25rem;
  color: #fff;
  background: #0b2231;
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  color-scheme: dark;
}

.video-quality:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.video-quality:disabled,
.video-progress:disabled {
  opacity: .45;
  cursor: wait;
}

.video-status {
  position: absolute;
  top: .8rem;
  left: .8rem;
  right: .8rem;
  z-index: 2;
  margin: 0;
  padding: .75rem 1rem;
  border-radius: .25rem;
  color: #fff;
  background: rgba(3, 13, 20, .9);
  font-size: 1rem;
  line-height: 1.5;
}

.video-status[hidden] { display: none; }

.media-player:fullscreen {
  width: 100vw;
  height: 100dvh;
  margin: 0;
  border: 0;
  background: #000;
}

.media-player:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  margin: 0;
  border: 0;
  background: #000;
}

.media-player:fullscreen video,
.media-player:fullscreen .video-controls {
  min-width: 0;
}

.media-dialog-head--sections {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .65rem 1rem;
  padding-bottom: .4rem;
}

.stills-sections {
  grid-column: 1 / -1;
  display: flex;
  gap: clamp(.65rem, 2vw, 1.65rem);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.stills-sections button {
  flex-shrink: 0;
  min-height: 2.5rem;
  padding: .45rem 0;
  border: 0;
  border-bottom: 2px solid transparent;
  color: rgba(255, 255, 255, .6);
  background: transparent;
  font: inherit;
  font-size: .875rem;
  line-height: 1.25;
  white-space: nowrap;
  cursor: pointer;
}

.stills-sections button[aria-pressed="true"] {
  color: #fff;
  border-bottom-color: var(--blue);
}

.stills-sections button:hover,
.stills-sections button:focus-visible {
  color: var(--blue);
}

@media (max-width: 1050px) {
  .video-controls {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .65rem;
  }
  .video-progress { grid-column: 1 / -1; grid-row: 1; }
  .video-transport { grid-column: 1; grid-row: 2; }
  .video-time { grid-column: 2; grid-row: 2; }
  .video-options {
    grid-column: 3;
    grid-row: 2;
  }
  .video-control--fullscreen { margin-left: auto; }
}

@media (max-width: 760px) {
  .media-dialog--video[open] {
    height: min(94dvh, calc(96vw / var(--video-aspect, 1.777778) + 14rem));
  }
  .video-controls {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: .55rem;
    gap: .5rem;
  }
  .video-options {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-content: space-between;
  }
  .video-controls .video-control {
    min-width: 2.2rem;
    padding-right: .45rem;
    padding-left: .45rem;
  }
  .video-transport { gap: .25rem; }
  .video-controls .video-time { min-width: 0; font-size: .75rem; }
  .media-dialog-head--sections .media-dialog-title span { display: none; }
}

/* SAFARI COMPATIBILITY — isolated WebKit layout and type adjustments. */

html.is-safari .about-copy {
  line-height: 1.6;
}

html.is-safari .about-copy p {
  margin-bottom: .68em;
}

html.is-safari .media-player {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

html.is-safari .media-player video {
  flex: 1 1 0;
  width: 100%;
  height: auto;
  min-height: 0;
  pointer-events: none;
}

html.is-safari .video-controls {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  width: 100%;
  overflow: visible;
}

html.is-safari .video-control,
html.is-safari .video-progress,
html.is-safari .video-quality {
  position: relative;
  z-index: 5;
}

@supports not (height: 100dvh) {
  html.is-safari .media-dialog--video[open] {
    height: min(88vh, 50rem);
    max-height: 90vh;
  }

  @media (max-width: 760px) {
    html.is-safari .media-dialog--video[open] {
      height: min(94vh, calc(96vw / var(--video-aspect, 1.777778) + 14rem));
      max-height: 94vh;
    }
  }
}

/* V28 — phone presentation. All preceding laptop styles are preserved. */
@media (max-width: 760px), (max-width: 1000px) and (max-height: 500px) and (pointer: coarse) {
  .nav-list > li > a,
  .nav-work summary {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-size: .875rem;
    letter-spacing: .025em;
  }

  .nav-list > li > a::after,
  .nav-work summary::after {
    bottom: .2rem;
  }

  .work-submenu {
    top: calc(100% + .35rem);
  }

  .work-submenu a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    font-size: .875rem;
  }

  .home-page .site-header {
    background: linear-gradient(180deg, rgba(6, 23, 34, .88), rgba(6, 23, 34, .45) 65%, transparent);
  }

  .media-dialog--stills[open] {
    width: calc(100vw - 1rem);
    height: auto;
    max-height: calc(100vh - 1rem);
    max-height: calc(100dvh - 1rem);
    padding: 0;
    grid-template-rows: auto auto;
    overflow-y: auto;
  }

  .media-dialog--stills .media-dialog-head {
    gap: .5rem .75rem;
    padding: .65rem .75rem;
  }

  .media-dialog--stills .media-dialog-title {
    min-width: 0;
    font-size: .875rem;
    line-height: 1.35;
  }

  .media-dialog--stills .media-dialog-head:not(.media-dialog-head--sections) .media-dialog-title span {
    display: block;
    margin: .3rem 0 0;
    font-size: .75rem;
    letter-spacing: .06em;
  }

  .media-dialog--stills .media-dialog-close {
    flex: 0 0 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
  }

  .media-dialog--stills .stills-sections {
    gap: 1rem;
  }

  .media-dialog--stills .stills-stage {
    margin: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  .media-dialog--stills .stills-stage::after {
    display: none;
  }

  .media-dialog--stills .stills-track {
    height: var(--phone-slide-height, auto);
    align-items: flex-start;
  }

  .media-dialog--stills .still-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    height: auto;
    padding: .5rem 0 0;
  }

  .media-dialog--stills .still-slide img {
    width: 100%;
    height: auto;
    max-height: var(--phone-photo-max-height, calc(100vh - 14rem));
    object-fit: contain;
    box-shadow: none;
  }

  .media-dialog--stills .still-slide figcaption {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3.5rem;
    padding: .6rem 3.65rem;
    font-size: .8125rem;
    line-height: 1.4;
    letter-spacing: .045em;
  }

  .media-dialog--stills .stills-arrow {
    top: auto;
    bottom: .375rem;
    width: 2.75rem;
    height: 2.75rem;
    transform: none;
  }

  .media-dialog--stills .stills-arrow--previous { left: .45rem; }
  .media-dialog--stills .stills-arrow--next { right: .45rem; }
}

@media (max-width: 760px) and (orientation: portrait) {
  .home-hero img {
    height: min(calc(100vh - 6rem), 180vw);
    height: min(calc(100svh - 6rem), 180vw);
    object-position: 69% top;
  }

  .home-hero::after {
    background: linear-gradient(0deg, rgba(3, 14, 22, .72), transparent 65%);
  }
}

/* V34 LAPTOP STILL CONTAINMENT — keep non-wide photographs fully visible in
   the laptop/desktop viewer. This deliberately begins at 981px so it cannot
   alter the approved phone or tablet compositions. */
@media (min-width: 981px) {
  .media-dialog--stills .still-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    min-height: 0;
  }

  .media-dialog--stills .still-slide picture {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .media-dialog--stills .still-slide picture img {
    display: block;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
  }

  /* Keep the fallback path safe if a still is ever not picture-wrapped. */
  .media-dialog--stills .still-slide > img {
    flex: 1 1 0;
    align-self: center;
    min-width: 0;
    min-height: 0;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
  }
}

/* V29 — phone-only refinements. The V28 stylesheet above is unchanged. */
@media (max-width: 760px), (max-width: 1000px) and (max-height: 500px) and (pointer: coarse) {
  /* Match the working Safari player in other iOS browsers. Keep Safari's
     existing player layout, and all laptop player rules, as they were. */
  html.is-ios:not(.is-safari) .media-dialog--video[open] {
    height: min(calc(var(--phone-viewport-height, 100vh) - 1rem), calc(96vw / var(--video-aspect, 1.777778) + 14rem));
    max-height: calc(var(--phone-viewport-height, 100vh) - 1rem);
  }

  html.is-ios:not(.is-safari) .media-player {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  html.is-ios:not(.is-safari) .media-player video {
    flex: 1 1 0;
    width: 100%;
    height: auto;
    min-height: 0;
    pointer-events: none;
  }

  html.is-ios:not(.is-safari) .video-controls {
    position: relative;
    z-index: 4;
    flex: 0 0 auto;
    width: 100%;
    overflow: visible;
  }

  html.is-ios:not(.is-safari) .video-control,
  html.is-ios:not(.is-safari) .video-progress,
  html.is-ios:not(.is-safari) .video-quality {
    position: relative;
    z-index: 5;
  }

  .home-page .site-header,
  .home-page .header-inner {
    min-height: 3.25rem;
  }

  .home-page .site-header {
    background: var(--ink);
  }

  .home-page .site-header::before {
    display: none;
  }

  .home-page .header-inner {
    display: flex;
    padding-top: .25rem;
    padding-bottom: .25rem;
  }

  .home-page .site-nav,
  .home-page .nav-list {
    width: 100%;
  }

  .home-page .nav-list {
    justify-content: space-between;
    gap: .5rem;
  }

  /* Explicit flex sizing prevents the heading from stretching to fill spare
     grid space. Images and their captions always stay inside the dialog. */
  .media-dialog--stills[open] {
    display: flex;
    flex-direction: column;
    width: calc(100vw - 1rem);
    height: calc(var(--phone-viewport-height, 100vh) - 1rem);
    height: calc(var(--phone-viewport-height, 100dvh) - 1rem);
    max-height: calc(var(--phone-viewport-height, 100vh) - 1rem);
    max-height: calc(var(--phone-viewport-height, 100dvh) - 1rem);
    overflow: hidden;
  }

  .media-dialog--stills .media-dialog-head {
    flex: 0 0 auto;
    align-content: start;
    gap: .25rem .75rem;
    padding: .5rem .75rem;
  }

  .media-dialog--stills .stills-stage {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
  }

  .media-dialog--stills .stills-track {
    height: 100%;
    align-items: stretch;
  }

  .media-dialog--stills .still-slide {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: .25rem;
    height: 100%;
    min-height: 0;
    padding: .25rem 0 0;
  }

  .media-dialog--stills .still-slide img {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    object-fit: contain;
  }

  .media-dialog--stills .still-slide figcaption {
    min-height: 3.5rem;
    max-height: 10rem;
    overflow-y: auto;
    padding: .65rem 3.65rem;
  }

  .media-dialog--stills .stills-sections button {
    min-height: 2.75rem;
    font-size: .8125rem;
  }
}

@media (max-width: 760px) and (orientation: portrait) {
  .home-hero {
    min-height: 38rem;
    height: 100vh;
    height: 100svh;
  }

  .home-hero img {
    top: 3.25rem;
    bottom: auto;
    height: calc(100% - 10rem);
    object-position: 69% top;
    transform-origin: 69% top;
    -webkit-mask-image: linear-gradient(#000 85%, transparent 100%);
    mask-image: linear-gradient(#000 85%, transparent 100%);
  }

  .home-hero::after {
    background: linear-gradient(0deg, var(--ink) 0%, rgba(6, 23, 34, .12) 35%, transparent 65%);
  }

  .home-identity {
    right: var(--gutter);
    bottom: 1.25rem;
  }

  .home-name {
    font-size: clamp(1.8rem, 9.6vw, 3rem);
    white-space: nowrap;
  }

  .home-current {
    bottom: 9rem;
  }

  .media-dialog--stills .still-slide img[data-phone-crop] {
    height: min(100%, calc((100vw - 1rem - 2px) / var(--phone-photo-ratio)));
    object-fit: cover;
    object-position: var(--phone-photo-position, center);
  }
}

@media (max-width: 760px) and (orientation: landscape), (max-width: 1000px) and (max-height: 500px) and (pointer: coarse) and (orientation: landscape) {
  .home-hero {
    min-height: 22rem;
    height: 100vh;
    height: 100svh;
  }

  .home-hero img {
    top: 3.25rem;
    bottom: auto;
    height: calc(100% - 3.25rem);
    object-position: 69% top;
  }

  .home-hero::after {
    background: linear-gradient(90deg, var(--ink), rgba(6, 23, 34, .8) 35%, transparent 70%);
  }

  .home-identity { bottom: 1.15rem; }
  .home-name { font-size: clamp(2rem, 4vw, 2.8rem); }
  .home-current { bottom: 6.75rem; max-width: 48vw; }

  /* On a horizontal phone the photo uses the entire viewer. Slim overlays
     keep the title, sections, caption and 44px controls within easy reach. */
  .media-dialog--stills[open] {
    width: calc(100vw - .5rem);
    height: calc(var(--phone-viewport-height, 100vh) - .5rem);
    height: calc(var(--phone-viewport-height, 100dvh) - .5rem);
    max-height: calc(var(--phone-viewport-height, 100vh) - .5rem);
    max-height: calc(var(--phone-viewport-height, 100dvh) - .5rem);
  }

  .media-dialog--stills .media-dialog-head {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 3rem;
    padding: .125rem .5rem;
    border: 0;
    background: linear-gradient(rgba(3, 11, 16, .94), rgba(3, 11, 16, .58) 75%, transparent);
  }

  .media-dialog--stills .media-dialog-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .75rem;
  }

  .media-dialog--stills .media-dialog-head--sections .media-dialog-title {
    flex: 0 1 auto;
    max-width: 25%;
  }

  .media-dialog--stills .media-dialog-head .media-dialog-title span {
    display: none;
  }

  .media-dialog--stills .media-dialog-close {
    order: 3;
    margin-left: auto;
  }

  .media-dialog--stills .stills-sections {
    flex: 1 1 0;
    gap: .85rem;
  }

  .media-dialog--stills .stills-sections button {
    font-size: .75rem;
  }

  .media-dialog--stills .still-slide {
    display: block;
    padding: 0;
  }

  .media-dialog--stills .still-slide figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 3.25rem;
    max-height: 30%;
    padding: .65rem 3.75rem .45rem;
    color: #fff;
    font-size: .75rem;
    letter-spacing: .025em;
    background: linear-gradient(transparent, rgba(3, 11, 16, .8) 35%);
  }
}

/* V30 — desktop Bio comfort and large-display scale. These rules deliberately
   exclude phones and coarse-pointer tablets so the approved mobile treatment
   remains unchanged. */
@media (min-width: 981px) and (pointer: fine) {
  .about-copy p {
    margin-bottom: .92em;
  }

  /* Safari's earlier compatibility rule used tighter paragraph separation.
     Restore comfortable desktop spacing without changing Safari mobile. */
  html.is-safari .about-copy p {
    margin-bottom: .88em;
  }
}

/* A 27-inch-class desktop has enough room to use the page more fully. The
   high-width/high-height gate leaves the 13-inch laptop and tablet layouts
   on their existing measurements. */
@media (min-width: 1800px) and (min-height: 900px) and (pointer: fine) {
  .about-grid {
    --bio-space: clamp(2rem, 4vh, 3.5rem);
    --portrait-height: min(60rem, max(28rem, calc(100svh - var(--header-height) - 2 * var(--bio-space) - 1.5rem)));
    max-width: min(150rem, calc(100vw - 6rem));
    column-gap: clamp(3rem, 4vw, 6rem);
  }

  .about-content {
    max-width: 66rem;
    padding-top: .35rem;
  }

  .about-heading {
    margin-bottom: clamp(1.25rem, 2.5svh, 2rem);
  }

  .about-heading .motion-title {
    font-size: clamp(2.5rem, 2.35vw, 3.4rem);
  }

  .about-copy {
    font-size: clamp(1.125rem, 1.15vw, 1.45rem);
    line-height: 1.58;
  }
}

/* V31A — modern desktop Bio refinement. This remains outside all phone and
   coarse-pointer tablet ranges; V30 remains the rollback baseline. */
@media (min-width: 981px) and (pointer: fine) {
  .about-copy p {
    margin-bottom: .96em;
  }

  /* Safari's laptop Bio needed a little more line and paragraph breathing
     room than the V30 desktop override provided. */
  html.is-safari .about-copy {
    line-height: 1.63;
  }

  html.is-safari .about-copy p {
    margin-bottom: .98em;
  }
}

/* V31A large-display tuning. The 27-inch-class gate is unchanged, so the
   approved laptop, phone, and tablet presentations keep their V30 rules. */
@media (min-width: 1800px) and (min-height: 900px) and (pointer: fine) {
  .about-grid {
    --bio-space: clamp(2.5rem, 4.5vh, 4rem);
    --portrait-height: min(66rem, max(30rem, calc(100svh - var(--header-height) - 2 * var(--bio-space) - 1rem)));
    max-width: min(170rem, calc(100vw - 4rem));
    column-gap: clamp(4rem, 5vw, 7rem);
  }

  .about-content {
    max-width: 72rem;
    padding-top: .5rem;
  }

  .about-heading {
    margin-bottom: clamp(1.5rem, 2.8svh, 2.4rem);
  }

  .about-heading .motion-title {
    font-size: clamp(2.7rem, 2.45vw, 3.6rem);
  }

  .about-copy {
    font-size: clamp(1.2rem, 1.25vw, 1.6rem);
    line-height: 1.62;
  }

  html.is-safari .about-copy {
    line-height: 1.64;
  }
}

/* V31B — Safari 14 on macOS Mojave. Safari 14 does not understand the
   newer viewport units and does not provide native modal <dialog> behavior.
   These rules are activated only after site.js positively identifies that
   combination, so current Safari and every other browser retain V31A. */
html.is-legacy-safari .home-hero {
  min-height: 100vh;
}

html.is-legacy-safari .dark-page,
html.is-legacy-safari .project-page,
html.is-legacy-safari .about-page,
html.is-legacy-safari .contact-page {
  min-height: calc(100vh - var(--header-height));
}

html.is-legacy-safari .about-grid {
  --bio-space: clamp(1.25rem, 3.2vh, 2.25rem);
  --portrait-height: min(43rem, max(20rem, calc(100vh - var(--header-height) - 2 * var(--bio-space) - 1rem)));
}

html.is-legacy-safari .about-heading {
  margin-bottom: clamp(1rem, 2.3vh, 1.5rem);
}

html.is-legacy-safari .contact-inner {
  padding-top: clamp(1.75rem, 3.8vh, 3rem);
  padding-bottom: clamp(1.25rem, 2.5vh, 2rem);
}

html.is-legacy-safari .contact-list {
  margin-top: clamp(1.25rem, 2.75vh, 2rem);
}

html.is-legacy-safari .contact-row {
  padding-top: clamp(1.3rem, 2.9vh, 1.6rem);
  padding-bottom: clamp(1.3rem, 2.9vh, 1.6rem);
}

@media (min-width: 1800px) and (min-height: 900px) and (pointer: fine) {
  html.is-legacy-safari .about-grid {
    --bio-space: clamp(2.5rem, 4.5vh, 4rem);
    --portrait-height: min(66rem, max(30rem, calc(100vh - var(--header-height) - 2 * var(--bio-space) - 1rem)));
    max-width: calc(100vw - 4rem);
    column-gap: 5vw;
  }

  html.is-legacy-safari .about-content {
    max-width: 72rem;
    padding-top: .5rem;
  }

  html.is-legacy-safari .about-heading {
    margin-bottom: clamp(1.5rem, 2.8vh, 2.4rem);
  }

  html.is-legacy-safari .about-copy {
    font-size: clamp(1.2rem, 1.25vw, 1.6rem);
    line-height: 1.62;
  }

  html.is-legacy-safari .about-copy p {
    margin-bottom: .96em;
  }
}

/* Legacy modal shell. The old browser treats <dialog> as an ordinary
   unknown element, so the open attribute needs an explicit fixed layout and
   a page-level dimmer. */
html.is-legacy-safari body.has-media-dialog {
  overflow: hidden;
}

html.is-legacy-safari body.has-media-dialog::before {
  position: fixed;
  z-index: 150;
  inset: 0;
  content: "";
  background: rgba(2, 8, 12, .84);
}

html.is-legacy-safari .media-dialog {
  position: fixed;
  z-index: 200;
  top: 50%;
  left: 50%;
  display: none;
  width: 96vw;
  max-width: none;
  max-height: 90vh;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.965);
  transition: opacity .48s ease, transform .48s ease;
}

html.is-legacy-safari .media-dialog[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 90vh;
  max-height: 90vh;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

html.is-legacy-safari .media-dialog.is-closing {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.985);
}

html.is-legacy-safari .media-dialog::backdrop {
  display: none;
}

html.is-legacy-safari .media-dialog--video[open] {
  width: 96vw;
  height: 90vh;
  max-height: 90vh;
}

html.is-legacy-safari .media-dialog--stills[open] {
  width: 96vw;
  height: 90vh;
  max-height: 90vh;
}

html.is-legacy-safari .media-player {
  min-height: 0;
  overflow: hidden;
}

@media (max-width: 760px) {
  html.is-legacy-safari .media-dialog {
    width: calc(100vw - 1rem);
    max-height: calc(100vh - 1rem);
  }

  html.is-legacy-safari .media-dialog[open],
  html.is-legacy-safari .media-dialog--video[open],
  html.is-legacy-safari .media-dialog--stills[open] {
    width: calc(100vw - 1rem);
    height: calc(100vh - 1rem);
    max-height: calc(100vh - 1rem);
  }
}

/* V32 TABLET PORTRAIT CLEARANCE — tested tablet-only refinements. These rules are
   deliberately limited to the tablet ranges below. They do not alter the
   approved phone rules (760px and below), laptop rules (981px and above),
   or the wide iMac rules. The broader cross-device Bio/photo repositioning
   is intentionally deferred to a separate revision. */
@media (min-width: 761px) and (max-width: 980px) and (orientation: portrait) {
  /* The tablet screenshots showed that the persistent navigation needs a
     modest increase, without changing the phone or laptop navigation. */
  .nav-list > li > a,
  .nav-work summary {
    font-size: 1rem;
  }

  /* The tall tablet viewport otherwise centers the very wide banner source
     on the middle of the street, leaving Drew too close to the right edge. */
  .home-hero img {
    object-position: 68% center;
    transform-origin: 68% center;
  }

  /* Keep the photograph directly beneath the header. BIO sits in the dark
     page margin outside the image and shares the copy's left alignment. */
  .about-grid {
    --tablet-bio-image-width: min(100%, 25rem);
    position: relative;
    grid-template-rows: auto auto;
    gap: 0;
    padding-top: 0;
  }

  .about-heading {
    position: absolute;
    z-index: 2;
    top: clamp(1rem, 2.5vw, 1.5rem);
    left: var(--gutter);
    width: auto;
    margin: 0;
    padding: 0;
    transform: none;
    pointer-events: none;
  }

  .about-image {
    grid-row: 1;
    width: var(--tablet-bio-image-width);
    margin: 0 auto;
  }

  /* Firefox showed too little clearance between the header and the top of
     the portrait. Keep the dark photo field attached to the header while
     giving the image itself a small, shared breathing buffer. */
  .about-image picture {
    padding-top: clamp(.7rem, 1.8vw, 1rem);
  }

  .about-copy {
    grid-row: 2;
    margin-top: clamp(1.5rem, 3.5vw, 2rem);
  }
}

/* The tested tablet landscape viewport is wider than the portrait gate.
   The coarse-pointer condition keeps this from touching an ordinary laptop
   or desktop window of the same CSS width. */
@media (min-width: 981px) and (max-width: 1400px) and (max-height: 1100px) and (orientation: landscape) and (pointer: coarse) {
  .nav-list > li > a,
  .nav-work summary {
    font-size: 1rem;
  }
}

/* Safari Responsive Design Mode can retain the Mac pointer classification
   while still identifying the emulated iPad. The class-based companion keeps
   the same tablet adjustment without widening the laptop breakpoint. */
@media (min-width: 981px) and (max-width: 1400px) and (max-height: 1100px) and (orientation: landscape) {
  html.is-ios .nav-list > li > a,
  html.is-ios .nav-work summary {
    font-size: 1rem;
  }
}

/* V33 PHONE PORTRAIT BIO — reuse the successful tablet composition without
   changing the approved tablet, laptop, desktop, or iMac rules. */
@media (max-width: 760px) and (orientation: portrait) {
  .about-grid {
    --phone-bio-image-width: min(100%, 25rem);
    position: relative;
    grid-template-rows: auto auto;
    gap: 0;
    padding-top: 0;
  }

  .about-heading {
    position: absolute;
    z-index: 2;
    top: clamp(.85rem, 3.5vw, 1.25rem);
    left: var(--gutter);
    width: auto;
    margin: 0;
    padding: 0;
    transform: none;
    pointer-events: none;
  }

  .about-image {
    grid-row: 1;
    width: var(--phone-bio-image-width);
    margin: 0 auto;
  }

  /* Preserve the full upper portrait/background while keeping the head
     below the mobile header. */
  .about-image picture {
    padding-top: clamp(.65rem, 2.5vw, .9rem);
  }

  .about-copy {
    grid-row: 2;
    margin-top: clamp(1.25rem, 4vw, 1.75rem);
  }
}

/* V34 PHONE PORTRAIT POLISH — preserve V33's approved composition while
   adding the requested Bio breathing room and making the still-photo content
   explicitly centered within the phone viewer. */
@media (max-width: 760px) and (orientation: portrait) {
  /* Move the entire Bio composition a few pixels farther below the header.
     This moves the BIO label and portrait together; padding on the picture
     alone could not create the requested gap above both elements. */
  .about-grid {
    grid-template-rows: auto auto auto;
    padding-top: calc(1.75rem + 6px);
  }

  /* On phones, make BIO its own row immediately above the portrait. This
     keeps its left edge aligned with the copy below instead of placing the
     label over the portrait's dark upper field. */
  .about-heading {
    position: static;
    grid-row: 1;
    justify-self: stretch;
    width: auto;
    margin: 0 0 .35rem;
    padding: 0;
    transform: none;
  }

  .about-image {
    grid-row: 2;
    margin: 0 auto;
  }

  /* Add approximately 6–10px between the phone header/BIO composition and
     the top of the portrait without changing the image or its framing. */
  .about-image picture {
    padding-top: clamp(
      calc(.65rem + 6px),
      calc(2.5vw + 6px),
      calc(.9rem + 10px)
    );
  }

  /* Add approximately 8–12px between the portrait and the Bio copy. */
  .about-copy {
    grid-row: 3;
    margin-top: clamp(
      calc(1.25rem + 8px),
      calc(4vw + 8px),
      calc(1.75rem + 12px)
    );
    padding-top: clamp(8px, 2.5vw, 12px);
  }

  /* Give the still viewer a definite flex height before positioning its
     image frame. The earlier grid-only and auto-height overrides allowed the
     image wrapper to collapse toward the bottom in some mobile layouts. */
  .media-dialog--stills .stills-stage {
    flex: 1 1 0;
    height: 0;
    min-height: 0;
  }

  .media-dialog--stills .stills-track {
    height: 100%;
  }

  .media-dialog--stills .still-slide {
    display: block;
    position: relative;
    height: 100%;
    min-height: 0;
    padding: 0;
  }

  .media-dialog--stills .still-slide picture {
    position: absolute;
    top: .25rem;
    right: 0;
    bottom: 3.75rem;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    overflow: hidden;
  }

  .media-dialog--stills .still-slide picture img {
    display: block;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
  }

  .media-dialog--stills .still-slide > img {
    position: absolute;
    top: .25rem;
    right: 0;
    bottom: 3.75rem;
    left: 0;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    object-fit: contain;
    object-position: center center;
  }

  .media-dialog--stills .still-slide figcaption {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3.5rem;
    max-height: 10rem;
    overflow-y: auto;
    padding: .65rem 3.65rem;
  }
}