@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,500..700&family=DM+Sans:opsz,wght@9..40,300..1000&display=swap");

:root {
  --black: #050505;
  --white: #fff;
  --ink: #101010;
  --muted: rgba(255, 255, 255, 0.72);
  --sans: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --intro-logo-font: var(--sans);
  --fashion-serif: "Bodoni Moda", Didot, "Bodoni 72", "Bodoni MT", serif;
  --serif: var(--sans);
  --display-serif: var(--sans);
  --home-title-font-size: clamp(8.4px, 1.71vw, 32.7px);

  /* The row the menu button sits on. The gallery label in the opposite corner
     hangs off the same two values, so the two stay level at every width
     instead of drifting apart as their separate clamps hit their bounds. */
  --chrome-row-top: calc(clamp(14px, 2vw, 34px) - 20px - 4px);
  --chrome-row-height: clamp(30px, 2.72vw, 48px);
}

@media (max-width: 980px) {
  :root {
    --chrome-row-height: clamp(38px, 3.4vw, 60px);
  }
}

@media (max-width: 640px) {
  :root {
    --chrome-row-top: calc(clamp(14px, 2vw, 34px) - 20px + 8px);
  }
}

* {
  box-sizing: border-box;
}

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

html {
  background: var(--white);
  color-scheme: light;
  scroll-behavior: smooth;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

html[data-active-gallery="films"] {
  background: var(--black);
  color-scheme: light;
}

body {
  margin: 0;
  color: var(--black);
  background: var(--white);
  font-family: var(--sans);
  font-weight: 600;
  overflow-x: hidden;
  transition: background-color 336ms ease, color 336ms ease;
  -webkit-user-select: none;
  user-select: none;
}

input,
select,
textarea,
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

/* The site-wide user-select: none protects the gallery UI; the pricing guide
   is reading material, so clients can copy prices and lists from it. Buttons
   inside keep their own user-select: none from the button reset. */
.pricing-panel {
  -webkit-user-select: text;
  user-select: text;
}

body[data-active-gallery="films"] {
  color: var(--white);
  background: var(--black);
}

body.project-open,
body.project-transitioning,
body.project-closing,
body.editor-open,
body.menu-open,
body.menu-closing,
body.inquiry-open,
body.inquiry-closing,
body.submissions-open,
body.site-deleted-open,
body.pricing-open,
body.pricing-closing,
body.intro-pending,
body.intro-playing,
body.intro-cards-playing,
body.intro-exiting {
  overflow: hidden;
}

/* Locking the body is enough for Chrome, but WebKit still hands the document
   to trackpad momentum, so the home page keeps scrolling behind an open menu.
   The root has to carry the lock as well. */
html:has(body.menu-open),
html:has(body.menu-closing) {
  overflow: hidden;
  overscroll-behavior: none;
}

body.intro-scroll-released {
  overflow-x: hidden;
  overflow-y: auto;
}

@media (min-width: 641px) {
  body.desktop-photo-home-scroll-released.project-open.project-closing {
    overflow-x: hidden;
    overflow-y: auto;
  }
}

@media (min-width: 641px) {
  body.inquiry-closing {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .menu-mounted .menu-overlay,
  .inquiry-mounted .inquiry-panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    filter: none;
    animation: none;
    transition: none;
  }
}

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

a {
  text-decoration: none;
}

a[href],
[role="button"] {
  cursor: pointer;
}

button {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  outline: 0;
  user-select: none;
  -webkit-user-select: none;
}

button:focus,
button:active,
a:focus,
a:active {
  outline: 0;
}

.site-chrome {
  position: fixed;
  inset: 0;
  z-index: 20;
  mix-blend-mode: difference;
  pointer-events: none;
}

body.brand-returning .site-chrome {
  z-index: 140;
  opacity: 1;
  visibility: visible;
}

@media (min-width: 641px) {
  body.brand-returning .rail-menu,
  body.brand-returning .rail-write {
    z-index: 141;
    transition: none;
    will-change: transform, opacity, filter;
    backface-visibility: hidden;
    transform: translateZ(0) translateY(var(--gallery-chrome-y)) scaleX(var(--gallery-chrome-scale-x));
  }

}

@media (max-width: 640px) {
  body.brand-returning .rail-menu,
  body.brand-returning .rail-write {
    z-index: 141;
    transition: none;
    will-change: transform, opacity, filter;
    backface-visibility: hidden;
    transform: translateZ(0) translateY(var(--gallery-chrome-y)) scaleX(var(--gallery-chrome-scale-x));
  }
}

body.mobile-home-chrome-delaying .site-intro,
body.mobile-home-chrome-delaying .site-chrome > .brand {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.gallery-switch-chrome-hidden .site-intro,
body.gallery-switch-chrome-hidden .site-chrome > .brand,
body.gallery-switch-chrome-hidden .rail-menu,
body.gallery-switch-chrome-hidden .rail-write,
body.gallery-switch-chrome-hidden .rail-back,
body.gallery-switch-chrome-hidden .rail-project-switch,
body.gallery-switch-chrome-hidden .layout-edit-toggle,
body.gallery-switch-chrome-hidden .site-publish-button,
body.gallery-switch-chrome-hidden .site-add-card-button {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none;
}

body.mobile-gallery-chrome-suppressed .rail-menu,
body.mobile-gallery-chrome-suppressed .rail-write,
body.mobile-gallery-chrome-suppressed .rail-back,
body.mobile-gallery-chrome-suppressed .rail-project-switch {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
}

body.gallery-switch-preparing .portfolio-view {
  pointer-events: none;
}

body.intro-cards-playing .tile,
body.intro-cards-settling .tile,
body.intro-revealing .tile,
body.films-direct-revealing .tile,
body.gallery-switch-preparing .tile,
body.gallery-switch-staging .tile,
body.gallery-switch-flying .tile {
  pointer-events: none;
}

body.intro-home-ready.intro-cards-playing .tile,
body.intro-home-ready.intro-cards-settling .tile {
  pointer-events: auto;
}

body.overlay-home-scroll-released.films-direct-revealing .tile {
  pointer-events: auto;
}

body.films-direct-revealing:not(.overlay-home-scroll-released) .site-chrome > .brand,
body.films-direct-revealing:not(.overlay-home-scroll-released) .rail-menu,
body.films-direct-revealing:not(.overlay-home-scroll-released) .rail-write,
body.films-direct-revealing:not(.overlay-home-scroll-released) .layout-edit-toggle,
body.films-direct-revealing:not(.overlay-home-scroll-released) .site-publish-button,
body.films-direct-revealing:not(.overlay-home-scroll-released) .site-add-card-button {
  pointer-events: none;
}

body.gallery-switch-preparing .tile {
  --gallery-switch-exit-delay: 0ms;
  opacity: 0;
  transform: translate3d(0, -190vh, 0) scale(0.86);
  filter: blur(6px);
  transition:
    opacity 760ms cubic-bezier(0.32, 0, 0.67, 0) var(--gallery-switch-exit-delay),
    transform 820ms cubic-bezier(0.4, 0, 0.68, 0.06) var(--gallery-switch-exit-delay),
    filter 740ms cubic-bezier(0.4, 0, 0.68, 0.06) var(--gallery-switch-exit-delay);
}

body.gallery-switch-preparing .tile img,
body.gallery-switch-preparing .tile video {
  opacity: 0.92;
  transform: scale(1.08);
  filter: brightness(1.08) saturate(0.9);
  transition:
    opacity 660ms cubic-bezier(0.32, 0, 0.67, 0) var(--gallery-switch-exit-delay),
    transform 820ms cubic-bezier(0.4, 0, 0.68, 0.06) var(--gallery-switch-exit-delay),
    filter 740ms cubic-bezier(0.4, 0, 0.68, 0.06) var(--gallery-switch-exit-delay);
}

body.gallery-switch-preparing .tile:nth-of-type(2) {
  --gallery-switch-exit-delay: 20ms;
}

body.gallery-switch-preparing .tile:nth-of-type(3) {
  --gallery-switch-exit-delay: 40ms;
}

body.gallery-switch-preparing .tile:nth-of-type(4) {
  --gallery-switch-exit-delay: 60ms;
}

body.gallery-switch-preparing .tile:nth-of-type(5) {
  --gallery-switch-exit-delay: 80ms;
}

body.gallery-switch-preparing .tile:nth-of-type(6) {
  --gallery-switch-exit-delay: 100ms;
}

body.gallery-switch-preparing .tile:nth-of-type(7) {
  --gallery-switch-exit-delay: 120ms;
}

body.gallery-switch-preparing .tile:nth-of-type(8) {
  --gallery-switch-exit-delay: 140ms;
}

.brand {
  position: fixed;
  top: calc(var(--chrome-row-top) + 5px);
  right: auto;
  bottom: auto;
  left: calc(clamp(8px, 1.4vw, 32px) + 7px);
  display: inline-grid;
  grid-template-columns: auto;
  align-items: start;
  color: #fff;
  font-family: var(--sans);
  font-size: var(--home-title-font-size);
  font-weight: 1000;
  line-height: 0.8;
  letter-spacing: 0;
  mix-blend-mode: normal;
  pointer-events: auto;
  z-index: 25;
}

/* Swapped corners: the gallery label sits in the centre and STROE moves to the
   left. Centring is done by stretching the brand and centring its content,
   never by a transform — the brand's entrance animation rewrites transform and
   would drop the centring mid-flight. */
@media (min-width: 641px) {
  /* STROE is sized by the scale its settled state lands on, not by a font
     size, so the 20% comes off there. The intro animation ends on the same
     two values, so it keeps landing exactly where the corner logo sits. */
  body:not(.admin-page) {
    /* 11.4vw scaled to 0.15 is 1.71vw, the size WRITE US draws at on home */
    --admin-intro-logo-scale-x: 0.15;
    --admin-intro-logo-scale-y: 0.153;
    --brand-logo-target-left: calc(clamp(8px, 1.4vw, 32px) + 7px);
    --brand-logo-target-top: calc(
      var(--chrome-row-top) + 5px + var(--chrome-row-height) / 2 - 0.744vw
    );
  }

  body:not(.admin-page).intro-exiting .site-intro-word {
    position: fixed;
    top: var(--brand-logo-target-top);
    left: var(--brand-logo-target-left);
    max-width: none;
    transform-origin: left top;
    animation: homeIntroWordToCornerLogo 1024ms cubic-bezier(0.33, 1, 0.68, 1) 1520ms both !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body:not(.admin-page).intro-exiting .intro-title,
  body:not(.admin-page).intro-exiting .intro-title .intro-letter {
    animation: none !important;
    opacity: 1 !important;
  }

  body:not(.admin-page).brand-title-returning.intro-brand-settled .site-intro-word {
    animation: brandTitleReturnIn 416ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
    will-change: opacity, transform, filter;
  }

  body:not(.admin-page).brand-title-returning.intro-brand-settled .site-intro {
    opacity: 1;
    visibility: visible;
  }

  .brand {
    left: 0;
    right: 0;
    display: grid;
    justify-items: center;
    /* STROE draws at 11.4vw scaled to 0.24, which is 2.736vw; the label matches
       it outright rather than sitting at half as it used to. */
    --brand-word-box: clamp(125px, 9.92vw, 205px);
    font-size: clamp(13.44px, 2.736vw, 52.32px);
  }

  .brand button {
    width: var(--brand-word-box);
  }

  /* The hover marks grow with the word, but only to 1.5×: at the word's full
     2× the triangle draws 59px tall and breaks out of a 48px row, while 1.5×
     lands at 44px and still reads as the bigger label's peer. */
  .brand-play-symbol {
    width: clamp(94px, 7.44vw, 154px);
    height: calc(clamp(94px, 7.44vw, 154px) * 0.875);
  }

  .brand-photo-frame {
    width: clamp(41px, 3.36vw, 65px);
    height: clamp(29px, 2.4vw, 46px);
  }

  /* the label is centred in a fixed-width box, so centre the word inside it
     too, and take the logo's weight and its 4% vertical stretch */
  .brand-play-word,
  .brand-photo-word {
    justify-content: center;
    font-weight: 1000;
    transform: scaleY(1.0404);
  }

  body:not(.admin-page).intro-brand-settled .site-intro-word {
    position: fixed;
    /* The label hangs off the shared chrome row, whose two clamps bend at
       different widths, while STROE's glyphs ride pure vw — so a fixed top
       only lines them up at one width. Anchoring STROE to the same row and
       backing out the 1.19vw its glyph centre sits below its own top keeps
       them level everywhere. */
    top: var(--brand-logo-target-top);
    left: var(--brand-logo-target-left);
    max-width: none;
    transform:
      translate3d(0, 0, 0)
      scale(var(--admin-intro-logo-scale-x), var(--admin-intro-logo-scale-y));
    transform-origin: left top;
  }
}

body.brand-returning .site-chrome > .brand {
  visibility: visible;
  animation: brandSlideDown 416ms cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: opacity, transform, filter;
}

body.brand-returning .rail-menu {
  visibility: visible;
  opacity: 1;
  animation: none;
}

body.brand-returning .rail-write {
  visibility: visible;
  animation: galleryChromeIn 416ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.brand-returning .layout-edit-toggle,
body.brand-returning .site-publish-button,
body.brand-returning .site-add-card-button {
  visibility: visible;
  animation: galleryChromeIn 416ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes brandSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-58px);
    filter: blur(8px);
  }

  58% {
    opacity: 1;
    filter: blur(2px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes brandTitleReturnIn {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform:
      translate3d(0, -58px, 0)
      scale(0.15, 0.153);
  }

  58% {
    opacity: 1;
    filter: blur(2px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform:
      translate3d(0, 0, 0)
      scale(0.15, 0.153);
  }
}

.brand-stack {
  display: grid;
  align-self: center;
  gap: clamp(28px, 3vw, 56px);
}

.brand button {
  position: relative;
  display: flex;
  align-items: center;
  order: 1;
  justify-self: start;
  width: clamp(78px, 6.2vw, 128px);
  min-height: var(--chrome-row-height);
  padding: 0;
  font-size: 1em;
  font-weight: 1000;
  line-height: 0.86;
  letter-spacing: 0;
  text-align: left;
  text-transform: uppercase;
  writing-mode: horizontal-tb;
  transition: font-size 176ms ease, opacity 144ms ease, filter 208ms ease, transform 256ms cubic-bezier(0.16, 1, 0.3, 1);
}

.brand button.is-gallery-active {
  display: none;
}

.brand button::after {
  content: "";
  position: absolute;
  inset: -18px -22px;
}

.brand button::before {
  content: "";
  position: absolute;
  top: 52%;
  left: -0.08em;
  width: calc(100% + 0.16em);
  height: 1px;
  background: currentColor;
  opacity: 0;
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  transition:
    opacity 180ms ease,
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.brand button:not(.is-gallery-active) {
  font-size: 1em;
  opacity: 1;
}

.brand button:hover {
  opacity: 1;
  filter: blur(0);
  transform: translateX(-2px) scaleX(0.96);
}

.brand button:hover::before {
  opacity: 0.62;
  transform: translateY(-50%) scaleX(1);
}

.brand button:active {
  transform: translateX(-1px) scaleX(0.9);
}

.brand button:active::before {
  opacity: 0.9;
  transform: translateY(-50%) scaleX(0.22);
}

.brand button[data-play-morph="true"],
.brand button[data-photo-morph="true"] {
  width: clamp(78px, 6.2vw, 128px);
  min-height: var(--chrome-row-height);
}

.brand button[data-play-morph="true"]::before,
.brand button[data-photo-morph="true"]::before {
  display: none;
}

.brand-play-mark,
.brand-photo-mark {
  position: relative;
  display: block;
  width: max-content;
  min-height: var(--chrome-row-height);
  transform-origin: center;
  transition: transform 1264ms cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-play-word,
.brand-photo-word {
  position: relative;
  display: flex;
  width: max-content;
  min-height: var(--chrome-row-height);
  align-items: center;
  justify-content: flex-start;
  font-size: 1em;
  font-weight: 1000;
  line-height: 0.86;
  letter-spacing: 0;
  white-space: nowrap;
  transform-origin: left center;
  transition:
    opacity 780ms ease,
    filter 1280ms ease,
    transform 1780ms cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-photo-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(34px, 2.8vw, 54px);
  height: clamp(24px, 2vw, 38px);
  opacity: 0;
  transform: translate(-50%, -50%) translateX(-18px) scale(0.68) rotate(-2deg);
  transform-origin: center;
  transition:
    opacity 680ms ease,
    transform 1780ms cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-photo-sheet {
  position: absolute;
  width: 78%;
  height: 72%;
  border: clamp(2.5px, 0.2vw, 3.8px) solid currentColor;
  border-radius: 2px;
  opacity: 0;
  transform-origin: center;
  transition:
    opacity 720ms ease,
    transform 1780ms cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-photo-sheet-back {
  left: 14%;
  top: 4%;
  transform: translate(-12px, 10px) rotate(-9deg) scale(0.5);
}

.brand-photo-sheet-front {
  left: 0;
  bottom: 0;
  transform: translate(16px, -8px) rotate(7deg) scale(0.52);
}

.brand-play-symbol {
  position: absolute;
  left: 50%;
  top: 50%;
  /* The mark's own width, at the viewBox's 64:56 ratio — the size the symbol
     drew at before it was given its class and shrank to the values above */
  width: clamp(78px, 6.2vw, 128px);
  height: calc(clamp(78px, 6.2vw, 128px) * 0.875);
  opacity: 0;
  transform: translate(-50%, -50%) translateX(-18px) scaleX(0.58);
  transform-origin: center;
  overflow: visible;
  transition:
    opacity 680ms ease,
    transform 1780ms cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-play-path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 128;
  stroke-dashoffset: 128;
  opacity: 0;
  transform: translateX(-7px) scale(0.42);
  transform-origin: 15px 28px;
  transition:
    opacity 560ms ease,
    stroke-dashoffset 1680ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1780ms cubic-bezier(0.16, 1, 0.3, 1);
}

.brand button[data-play-morph="true"]:is(:hover, :focus-visible),
.brand button[data-play-morph="true"].is-touch-morphing {
  transform: scaleX(1);
}

.brand button[data-play-morph="true"]:is(:hover, :focus-visible) .brand-play-mark,
.brand button[data-play-morph="true"].is-touch-morphing .brand-play-mark {
  transform: rotate(-1deg) scale(1);
}

.brand button[data-play-morph="true"]:is(:hover, :focus-visible) .brand-play-word,
.brand button[data-play-morph="true"].is-touch-morphing .brand-play-word {
  opacity: 0;
  filter: blur(8px);
  transform: translateX(22px) scaleX(0.52);
}

.brand button[data-play-morph="true"]:is(:hover, :focus-visible) .brand-play-symbol,
.brand button[data-play-morph="true"].is-touch-morphing .brand-play-symbol {
  opacity: 1;
  transform: translate(-50%, -50%) translateX(0) scaleX(1);
}

.brand button[data-play-morph="true"]:is(:hover, :focus-visible) .brand-play-path,
.brand button[data-play-morph="true"].is-touch-morphing .brand-play-path {
  opacity: 1;
  stroke-dashoffset: 0;
  /* The origin above is the triangle's left vertex, which is what makes it
     unfold from its point — but it also means the shrink drags the shape
     leftwards, landing it 8.5px left of the word. The extra 5 user units put
     it back over the middle, and being in user units it holds at any width. */
  transform: translateX(8.1px) scale(0.58);
}

.brand button[data-play-morph="true"]:active .brand-play-mark {
  transform: translateX(0) rotate(-0.8deg) scale(0.96);
}

.brand button[data-photo-morph="true"]:is(:hover, :focus-visible),
.brand button[data-photo-morph="true"].is-touch-morphing {
  transform: scaleX(1);
}

.brand button[data-photo-morph="true"]:is(:hover, :focus-visible) .brand-photo-mark,
.brand button[data-photo-morph="true"].is-touch-morphing .brand-photo-mark {
  transform: rotate(-0.7deg) scale(1);
}

.brand button[data-photo-morph="true"]:is(:hover, :focus-visible) .brand-photo-word,
.brand button[data-photo-morph="true"].is-touch-morphing .brand-photo-word {
  opacity: 0;
  filter: blur(8px);
  transform: translateX(22px) scaleX(0.52);
}

.brand button[data-photo-morph="true"]:is(:hover, :focus-visible) .brand-photo-frame,
.brand button[data-photo-morph="true"].is-touch-morphing .brand-photo-frame {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
}

.brand button[data-photo-morph="true"]:is(:hover, :focus-visible) .brand-photo-sheet,
.brand button[data-photo-morph="true"].is-touch-morphing .brand-photo-sheet {
  opacity: 1;
}

.brand button[data-photo-morph="true"]:is(:hover, :focus-visible) .brand-photo-sheet-back,
.brand button[data-photo-morph="true"].is-touch-morphing .brand-photo-sheet-back {
  transform: translate(7px, 0) rotate(-6deg) scale(1);
  transition-delay: 144ms;
}

.brand button[data-photo-morph="true"]:is(:hover, :focus-visible) .brand-photo-sheet-front,
.brand button[data-photo-morph="true"].is-touch-morphing .brand-photo-sheet-front {
  transform: translate(0, 4px) rotate(1deg) scale(1);
  transition-delay: 304ms;
}

@media (max-width: 640px) {
  .brand button.is-touch-morphing .brand-play-mark,
  .brand button.is-touch-morphing .brand-photo-mark {
    transition-duration: 368ms;
  }

  .brand button.is-touch-morphing .brand-play-word,
  .brand button.is-touch-morphing .brand-photo-word {
    transition:
      opacity 180ms ease,
      filter 320ms ease,
      transform 440ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .brand button.is-touch-morphing .brand-play-symbol,
  .brand button.is-touch-morphing .brand-photo-frame {
    transition:
      opacity 160ms ease,
      transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .brand button.is-touch-morphing .brand-play-path {
    transition:
      opacity 120ms ease,
      stroke-dashoffset 420ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .brand button.is-touch-morphing .brand-photo-sheet {
    transition:
      opacity 160ms ease,
      transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .brand button.is-touch-morphing .brand-photo-sheet-back {
    transition-delay: 40ms;
  }

  .brand button.is-touch-morphing .brand-photo-sheet-front {
    transition-delay: 88ms;
  }
}

.brand button[data-photo-morph="true"]:active .brand-photo-mark {
  transform: translateX(0) rotate(-0.8deg) scale(0.96);
}

@media (min-width: 641px) {
  .brand .brand-stack > button {
    justify-self: center;
    justify-content: center;
  }
}

.adaptive-letter {
  display: inline-block;
  color: inherit;
  transition: color 96ms linear, opacity 96ms linear;
}

.brand-letter {
  display: inline-block;
  line-height: 1;
  transform-origin: center;
  transition:
    filter 520ms ease,
    opacity 320ms ease,
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
  vertical-align: top;
}

.brand button:hover .brand-letter {
  animation: brandLensFocus 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.brand button:hover .brand-letter:nth-child(1) {
  animation-delay: 0ms;
}

.brand button:hover .brand-letter:nth-child(2) {
  animation-delay: 30ms;
}

.brand button:hover .brand-letter:nth-child(3) {
  animation-delay: 61ms;
}

.brand button:hover .brand-letter:nth-child(4) {
  animation-delay: 91ms;
}

.brand button:hover .brand-letter:nth-child(5) {
  animation-delay: 122ms;
}

.brand button:hover .brand-letter:nth-child(6) {
  animation-delay: 152ms;
}

.brand button:active .brand-letter {
  filter: blur(1px);
  opacity: 0.78;
  transform: scaleX(0.66);
}

.brand button .brand-letter,
.rail-menu .brand-letter,
.rail-write .brand-letter {
  margin-inline-end: -0.035em;
}

.brand button .brand-letter:last-child,
.rail-menu .brand-letter:last-child,
.rail-write .brand-letter:last-child {
  margin-inline-end: 0;
}

@keyframes brandLensFocus {
  0% {
    filter: blur(0);
    transform: translateY(0) scaleX(1);
  }

  34% {
    filter: blur(2.6px);
    transform: translateY(-0.03em) scaleX(0.72);
  }

  68% {
    filter: blur(0.6px);
    transform: translateY(0.02em) scaleX(1.08);
  }

  100% {
    filter: blur(0);
    transform: translateY(0) scaleX(1);
  }
}

.rail-write .adaptive-space {
  min-height: 0.34em;
}

.brand small {
  font-family: var(--sans);
  font-size: clamp(7px, 0.55vw, 11px);
  font-weight: 600;
  line-height: 1;
}

.rail {
  position: fixed;
  --gallery-chrome-scale-x: 1;
  z-index: 26;
  font-size: clamp(20.8px, 2.4vw, 43.2px);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: 0;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  pointer-events: auto;
}

/* Mobile-only layout switch for photo albums; shown from the phone media query */
.rail-layout-toggle {
  display: none;
}

.rail-menu {
  --gallery-chrome-y: -4px;
  --menu-hit-pad: clamp(14px, 1.4vw, 24px);
  --menu-mark-width: clamp(48px, 4.4vw, 82px);
  --menu-mark-height: clamp(38px, 3.4vw, 60px);
  top: calc(clamp(14px, 2vw, 34px) - 10px - var(--menu-hit-pad));
  right: calc(clamp(12px, 1.7vw, 30px) + 5px - var(--menu-hit-pad));
  color: #fff;
  font-family: var(--sans);
  font-size: var(--home-title-font-size);
  font-weight: 800;
  inline-size: calc(var(--menu-mark-width) + var(--menu-hit-pad) * 2);
  block-size: calc(var(--menu-mark-height) + var(--menu-hit-pad) * 2);
  mix-blend-mode: normal;
  padding: var(--menu-hit-pad);
  transform: translateY(var(--gallery-chrome-y)) scaleX(var(--gallery-chrome-scale-x));
  transition: opacity 176ms ease, transform 176ms ease, visibility 176ms ease;
  text-transform: uppercase;
  writing-mode: horizontal-tb;
}

.menu-mark {
  position: relative;
  display: block;
  width: var(--menu-mark-width);
  height: var(--menu-mark-height);
  transform-origin: center;
  transition: transform 496ms cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-mark-line {
  position: absolute;
  right: 0;
  display: block;
  height: 3px;
  background: transparent;
  border-radius: 999px;
  transform-origin: right center;
  transition:
    width 720ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 420ms ease 80ms;
}

@media (min-width: 641px) {
  .menu-mark-line {
    height: 4px;
  }
}

.menu-mark-line::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  border-radius: inherit;
  transform: scaleX(1);
  transform-origin: right center;
  will-change: transform, opacity;
}

.menu-mark-line:nth-child(1) {
  top: 22%;
  width: 84%;
}

.menu-mark-line:nth-child(2) {
  top: 50%;
  width: 84%;
  transform: translateY(-50%);
}

.menu-mark-line:nth-child(3) {
  bottom: 22%;
  width: 84%;
}

.menu-morph-word {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(1px, 0.2vw, 4px);
  font-size: var(--home-title-font-size);
  font-weight: 1000;
  line-height: 1;
  letter-spacing: -0.08em;
  opacity: 0;
  transform: translateX(16px) scaleX(0.58);
  transform-origin: right center;
  transition:
    opacity 260ms ease,
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-morph-word span {
  display: inline-block;
  opacity: 0;
  filter: blur(9px);
  transform: translateY(18px) scaleX(0.24);
  transform-origin: center;
  transition:
    opacity 240ms ease,
    filter 420ms ease,
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-morph-word span:nth-child(1) {
  transition-delay: 0ms;
}

.menu-morph-word span:nth-child(2) {
  transition-delay: 24ms;
}

.menu-morph-word span:nth-child(3) {
  transition-delay: 48ms;
}

.menu-morph-word span:nth-child(4) {
  transition-delay: 72ms;
}

.rail-menu:hover .menu-mark {
  transform: translateX(-8px) rotate(-1.5deg) scale(1.08);
}

.rail-menu:hover .menu-mark-line:nth-child(1) {
  transition:
    width 720ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 260ms ease 470ms;
  width: 92%;
  transform: translateX(-3%) translateY(13px) rotate(0deg) scaleY(0.52);
  opacity: 0;
}

.rail-menu:hover .menu-mark-line:nth-child(2) {
  transition:
    width 720ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 260ms ease 420ms;
  width: 100%;
  transform: translateY(-50%) scaleY(0.5);
  opacity: 0;
}

.rail-menu:hover .menu-mark-line:nth-child(3) {
  transition:
    width 720ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 260ms ease 520ms;
  width: 92%;
  transform: translateX(-3%) translateY(-13px) rotate(0deg) scaleY(0.52);
  opacity: 0;
}

.rail-menu:hover .menu-morph-word {
  transition:
    opacity 340ms ease 180ms,
    transform 860ms cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 1;
  transform: translateX(0) scaleX(1);
}

.rail-menu:hover .menu-morph-word span {
  transition:
    opacity 340ms ease,
    filter 700ms ease,
    transform 860ms cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scaleX(1);
}

.rail-menu:hover .menu-morph-word span:nth-child(1) {
  transition-delay: 168ms;
}

.rail-menu:hover .menu-morph-word span:nth-child(2) {
  transition-delay: 236ms;
}

.rail-menu:hover .menu-morph-word span:nth-child(3) {
  transition-delay: 304ms;
}

.rail-menu:hover .menu-morph-word span:nth-child(4) {
  transition-delay: 372ms;
}

.rail-menu:active .menu-mark {
  transform: translateX(-2px) rotate(-1deg) scale(0.96);
}

body.brand-returning .rail-menu .menu-mark-line::before,
.project-open:not(.project-transitioning):not(.project-closing) .rail-menu .menu-mark-line::before,
body.mobile-gallery-chrome-opened.project-open:not(.project-transitioning):not(.project-closing) .rail-menu .menu-mark-line::before {
  animation: menuLineRevealRight 544ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

body.brand-returning .rail-menu .menu-mark-line:nth-child(1)::before,
.project-open:not(.project-transitioning):not(.project-closing) .rail-menu .menu-mark-line:nth-child(1)::before,
body.mobile-gallery-chrome-opened.project-open:not(.project-transitioning):not(.project-closing) .rail-menu .menu-mark-line:nth-child(1)::before {
  animation-delay: 72ms;
}

body.brand-returning .rail-menu .menu-mark-line:nth-child(2)::before,
.project-open:not(.project-transitioning):not(.project-closing) .rail-menu .menu-mark-line:nth-child(2)::before,
body.mobile-gallery-chrome-opened.project-open:not(.project-transitioning):not(.project-closing) .rail-menu .menu-mark-line:nth-child(2)::before {
  animation-delay: 0ms;
}

body.brand-returning .rail-menu .menu-mark-line:nth-child(3)::before,
.project-open:not(.project-transitioning):not(.project-closing) .rail-menu .menu-mark-line:nth-child(3)::before,
body.mobile-gallery-chrome-opened.project-open:not(.project-transitioning):not(.project-closing) .rail-menu .menu-mark-line:nth-child(3)::before {
  animation-delay: 144ms;
}

body.intro-brand-settled:not(.brand-returning):not(.gallery-switch-chrome-hidden):not(.project-open) .rail-menu .menu-mark-line::before {
  animation: none;
}

.rail-project-edit {
  --gallery-chrome-y: -4px;
  --menu-hit-pad: clamp(14px, 1.4vw, 24px);
  top: calc(clamp(14px, 2vw, 34px) + clamp(88px, 7.6vw, 142px) - var(--menu-hit-pad));
  right: calc(clamp(12px, 1.7vw, 30px) - var(--menu-hit-pad));
  color: #fff;
  font-family: var(--sans);
  font-size: var(--home-title-font-size);
  font-weight: 800;
  mix-blend-mode: normal;
  padding: var(--menu-hit-pad);
  transform: translateY(var(--gallery-chrome-y)) scaleX(var(--gallery-chrome-scale-x));
  text-transform: uppercase;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.rail-project-switch {
  --gallery-chrome-y: -4px;
  --menu-hit-pad: clamp(14px, 1.4vw, 24px);
  --project-switch-width: clamp(72px, 6vw, 116px);
  --project-switch-height: clamp(38px, 3.2vw, 58px);
  top: calc(clamp(14px, 2vw, 34px) + clamp(88px, 7.6vw, 142px) - var(--menu-hit-pad));
  right: calc(clamp(12px, 1.7vw, 30px) - var(--menu-hit-pad));
  color: #fff;
  font-family: var(--sans);
  font-size: var(--home-title-font-size);
  font-weight: 800;
  inline-size: calc(var(--project-switch-width) + var(--menu-hit-pad) * 2);
  block-size: calc(var(--project-switch-height) + var(--menu-hit-pad) * 2);
  mix-blend-mode: normal;
  padding: var(--menu-hit-pad);
  transform: translateY(var(--gallery-chrome-y)) scaleX(var(--gallery-chrome-scale-x));
  text-transform: uppercase;
  writing-mode: horizontal-tb;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.project-switch-mark {
  position: relative;
  display: block;
  width: var(--project-switch-width);
  height: var(--project-switch-height);
  transform-origin: center;
  transition: transform 608ms cubic-bezier(0.16, 1, 0.3, 1);
}

.project-switch-word {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: clamp(18px, 1.35vw, 28px);
  font-weight: 1000;
  line-height: 1;
  letter-spacing: -0.035em;
  transform-origin: right center;
  transition:
    opacity 420ms ease,
    filter 680ms ease,
    transform 960ms cubic-bezier(0.16, 1, 0.3, 1);
}

.project-switch-play {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(18px) scaleX(0.62);
  transform-origin: right center;
  transition:
    opacity 300ms ease,
    transform 960ms cubic-bezier(0.16, 1, 0.3, 1);
}

.project-switch-play-line {
  position: absolute;
  left: 18%;
  display: block;
  height: clamp(3px, 0.22vw, 4px);
  background: currentColor;
  border-radius: 999px;
  transform-origin: left center;
  transition:
    width 960ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 520ms ease,
    transform 960ms cubic-bezier(0.16, 1, 0.3, 1);
}

.project-switch-play-line:nth-child(1) {
  top: 24%;
  width: 34%;
  transform: translateX(58%) rotate(0deg) scaleX(0.36);
}

.project-switch-play-line:nth-child(2) {
  top: 50%;
  width: 78%;
  transform: translateY(-50%) translateX(18%) scaleX(0.32);
}

.project-switch-play-line:nth-child(3) {
  bottom: 24%;
  width: 46%;
  transform: translateX(48%) rotate(0deg) scaleX(0.36);
}

.rail-project-switch[data-target-gallery="films"]:is(:hover, :focus-visible) .project-switch-mark {
  transform: translateX(-7px) rotate(-1deg) scale(1.08);
}

.rail-project-switch[data-target-gallery="films"]:is(:hover, :focus-visible) .project-switch-word {
  opacity: 0;
  filter: blur(8px);
  transform: translateX(-22px) scaleX(0.54);
}

.rail-project-switch[data-target-gallery="films"]:is(:hover, :focus-visible) .project-switch-play {
  opacity: 1;
  transform: translateX(0) scaleX(1);
}

.rail-project-switch[data-target-gallery="films"]:is(:hover, :focus-visible) .project-switch-play-line:nth-child(1) {
  width: 62%;
  transform: translateX(14%) translateY(4px) rotate(29deg) scaleX(1);
}

.rail-project-switch[data-target-gallery="films"]:is(:hover, :focus-visible) .project-switch-play-line:nth-child(2) {
  width: 42%;
  transform: translateX(2%) translateY(-50%) rotate(90deg) scaleX(1);
}

.rail-project-switch[data-target-gallery="films"]:is(:hover, :focus-visible) .project-switch-play-line:nth-child(3) {
  width: 62%;
  transform: translateX(14%) translateY(-4px) rotate(-29deg) scaleX(1);
}

.rail-project-switch:active .project-switch-mark {
  transform: translateX(-2px) rotate(-0.8deg) scale(0.96);
}

body.admin-page .rail-project-switch {
  top: calc(clamp(14px, 2vw, 34px) + clamp(168px, 14vw, 270px) - var(--menu-hit-pad));
}

.rail-write {
  --gallery-chrome-y: 0px;
  --menu-hit-pad: clamp(14px, 1.4vw, 24px);
  --write-envelope-width: clamp(39px, 3.8vw, 68px);
  --write-envelope-height: clamp(25px, 2.35vw, 42px);
  right: calc(clamp(12px, 1.7vw, 30px) - var(--menu-hit-pad));
  bottom: calc(clamp(16px, 2.4vw, 48px) - var(--menu-hit-pad));
  color: #fff;
  font-family: var(--sans);
  font-size: var(--home-title-font-size);
  font-weight: 800;
  mix-blend-mode: normal;
  padding: var(--menu-hit-pad);
  transform: translateY(var(--gallery-chrome-y)) scaleX(var(--gallery-chrome-scale-x));
  transition: opacity 176ms ease, visibility 176ms ease;
  text-transform: uppercase;
}

.rail-write .adaptive-letter {
  transition:
    opacity 620ms ease,
    filter 760ms ease,
    transform 980ms cubic-bezier(0.16, 1, 0.3, 1);
}

.write-envelope-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--write-envelope-width);
  height: var(--write-envelope-height);
  color: currentColor;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(90deg) scaleX(0.78) scaleY(0.9);
  transform-origin: center;
  transition:
    opacity 620ms ease,
    transform 1180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.write-envelope-line {
  position: absolute;
  display: block;
  background: currentColor;
  border-radius: 999px;
  opacity: 0;
  transform-origin: center;
  transition:
    opacity 520ms ease,
    transform 1180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.write-envelope-top,
.write-envelope-bottom {
  left: 0;
  width: 100%;
  height: clamp(2.6px, 0.18vw, 3.8px);
  transform: scaleX(0.12);
}

.write-envelope-top {
  top: 0;
}

.write-envelope-bottom {
  bottom: 0;
}

.write-envelope-left,
.write-envelope-right {
  top: 0;
  width: clamp(2.6px, 0.18vw, 3.8px);
  height: 100%;
  transform: scaleY(0.12);
}

.write-envelope-left {
  left: 0;
}

.write-envelope-right {
  right: 0;
}

.write-envelope-fold-left,
.write-envelope-fold-right {
  top: 0;
  width: 61%;
  height: clamp(2.6px, 0.18vw, 3.8px);
  transform: rotate(0deg) scaleX(0.08);
}

.write-envelope-fold-left {
  left: 0;
  transform-origin: left center;
}

.write-envelope-fold-right {
  right: 0;
  transform-origin: right center;
}

.rail-write:is(:hover, :focus-visible) .adaptive-letter {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(-0.06em) scaleX(0.64);
}

.rail-write:is(:hover, :focus-visible) .write-envelope-mark {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(90deg) scaleX(1) scaleY(1);
}

.rail-write:is(:hover, :focus-visible) .write-envelope-line {
  opacity: 1;
}

.rail-write:is(:hover, :focus-visible) .write-envelope-top,
.rail-write:is(:hover, :focus-visible) .write-envelope-bottom {
  transform: scaleX(1);
}

.rail-write:is(:hover, :focus-visible) .write-envelope-left,
.rail-write:is(:hover, :focus-visible) .write-envelope-right {
  transform: scaleY(1);
}

.rail-write:is(:hover, :focus-visible) .write-envelope-fold-left {
  transform: rotate(32deg) scaleX(1);
}

.rail-write:is(:hover, :focus-visible) .write-envelope-fold-right {
  transform: rotate(-32deg) scaleX(1);
}

.rail-write:active .write-envelope-mark {
  transform: translate(-50%, -50%) rotate(90deg) scaleX(0.94) scaleY(0.96);
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  .brand button:hover,
  .brand button:active {
    filter: none;
    transform: none;
  }

  .brand button:hover::before,
  .brand button:active::before {
    opacity: 0;
    transform: translateY(-50%) scaleX(0);
  }

  .brand button[data-play-morph="true"]:is(:hover, :focus-visible),
  .brand button[data-photo-morph="true"]:is(:hover, :focus-visible) {
    transform: none;
  }

  .brand button[data-play-morph="true"]:is(:hover, :focus-visible) .brand-play-mark,
  .brand button[data-photo-morph="true"]:is(:hover, :focus-visible) .brand-photo-mark,
  .brand button[data-play-morph="true"]:active .brand-play-mark,
  .brand button[data-photo-morph="true"]:active .brand-photo-mark {
    transform: none;
  }

  .brand button[data-play-morph="true"]:is(:hover, :focus-visible) .brand-play-word,
  .brand button[data-photo-morph="true"]:is(:hover, :focus-visible) .brand-photo-word {
    opacity: 1;
    filter: none;
    transform: none;
  }

  .brand button[data-play-morph="true"]:is(:hover, :focus-visible) .brand-play-symbol {
    opacity: 0;
    transform: translate(-50%, -50%) translateX(-18px) scaleX(0.58);
  }

  .brand button[data-play-morph="true"]:is(:hover, :focus-visible) .brand-play-path {
    opacity: 0;
    stroke-dashoffset: 128;
    transform: translateX(-7px) scale(0.42);
  }

  .brand button[data-photo-morph="true"]:is(:hover, :focus-visible) .brand-photo-frame {
    opacity: 0;
    transform: translate(-50%, -50%) translateX(-18px) scale(0.68) rotate(-2deg);
  }

  .brand button[data-photo-morph="true"]:is(:hover, :focus-visible) .brand-photo-sheet {
    opacity: 0;
  }

  .brand button[data-photo-morph="true"]:is(:hover, :focus-visible) .brand-photo-sheet-back {
    transform: translate(-12px, 10px) rotate(-9deg) scale(0.5);
    transition-delay: 0ms;
  }

  .brand button[data-photo-morph="true"]:is(:hover, :focus-visible) .brand-photo-sheet-front {
    transform: translate(16px, -8px) rotate(7deg) scale(0.52);
    transition-delay: 0ms;
  }

  .rail-menu:hover .menu-mark,
  .rail-menu:active .menu-mark {
    transform: none;
  }

  /* Touch keeps :hover latched on whatever was last tapped, so these have to
     restate the resting bars rather than a morph step — otherwise the mark is
     left mid-morph after the menu is used, the way the word rules below already
     guard against */
  .rail-menu:hover .menu-mark-line:nth-child(1) {
    width: 84%;
    transform: none;
    opacity: 1;
  }

  .rail-menu:hover .menu-mark-line:nth-child(2) {
    width: 84%;
    transform: translateY(-50%);
    opacity: 1;
  }

  .rail-menu:hover .menu-mark-line:nth-child(3) {
    width: 84%;
    transform: none;
    opacity: 1;
  }

  .rail-menu:hover .menu-morph-word {
    opacity: 0;
    transform: translateX(16px) scaleX(0.58);
  }

  .rail-menu:hover .menu-morph-word span {
    opacity: 0;
    filter: blur(9px);
    transform: translateY(18px) scaleX(0.24);
    transition-delay: 0ms;
  }

  .rail-project-switch[data-target-gallery="films"]:is(:hover, :focus-visible) .project-switch-mark,
  .rail-project-switch:active .project-switch-mark {
    transform: none;
  }

  .rail-project-switch[data-target-gallery="films"]:is(:hover, :focus-visible) .project-switch-word {
    opacity: 1;
    filter: none;
    transform: none;
  }

  .rail-project-switch[data-target-gallery="films"]:is(:hover, :focus-visible) .project-switch-play {
    opacity: 0;
    transform: translateX(18px) scaleX(0.62);
  }

  .rail-project-switch[data-target-gallery="films"]:is(:hover, :focus-visible) .project-switch-play-line:nth-child(1) {
    width: 34%;
    transform: translateX(58%) rotate(0deg) scaleX(0.36);
  }

  .rail-project-switch[data-target-gallery="films"]:is(:hover, :focus-visible) .project-switch-play-line:nth-child(2) {
    width: 78%;
    transform: translateY(-50%) translateX(18%) scaleX(0.32);
  }

  .rail-project-switch[data-target-gallery="films"]:is(:hover, :focus-visible) .project-switch-play-line:nth-child(3) {
    width: 46%;
    transform: translateX(48%) rotate(0deg) scaleX(0.36);
  }

  .rail-write:is(:hover, :focus-visible) .adaptive-letter {
    opacity: 1;
    filter: none;
    transform: none;
  }

  .rail-write:is(:hover, :focus-visible) .write-envelope-mark,
  .rail-write:active .write-envelope-mark {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg) scaleX(0.78) scaleY(0.9);
  }

  .rail-write:is(:hover, :focus-visible) .write-envelope-line {
    opacity: 0;
  }

  .rail-write:is(:hover, :focus-visible) .write-envelope-top,
  .rail-write:is(:hover, :focus-visible) .write-envelope-bottom {
    transform: scaleX(0.12);
  }

  .rail-write:is(:hover, :focus-visible) .write-envelope-left,
  .rail-write:is(:hover, :focus-visible) .write-envelope-right {
    transform: scaleY(0.12);
  }

  .rail-write:is(:hover, :focus-visible) .write-envelope-fold-left,
  .rail-write:is(:hover, :focus-visible) .write-envelope-fold-right {
    transform: rotate(0deg) scaleX(0.08);
  }
}

.layout-edit-toggle {
  position: fixed;
  top: calc(clamp(14px, 2vw, 34px) + clamp(300px, 22vw, 430px));
  right: clamp(12px, 1.7vw, 30px);
  z-index: 26;
  color: var(--white);
  font-family: var(--sans);
  font-size: clamp(13px, 1.15vw, 20px);
  font-weight: 600;
  line-height: 0.92;
  mix-blend-mode: normal;
  padding: 0;
  pointer-events: auto;
  text-align: right;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transition: opacity 144ms ease, transform 176ms ease, visibility 176ms ease;
}

.layout-edit-toggle[aria-pressed="true"] {
  color: var(--white);
}

.layout-edit-toggle:hover {
  transform: translateY(-2px);
}

.site-publish-button {
  --gallery-chrome-x: -50%;
  position: fixed;
  left: 50%;
  bottom: clamp(14px, 2vw, 34px);
  z-index: 26;
  color: var(--white);
  font-family: var(--sans);
  font-size: clamp(18px, 1.9vw, 36px);
  font-weight: 600;
  line-height: 0.9;
  mix-blend-mode: difference;
  padding: 0;
  pointer-events: auto;
  text-transform: uppercase;
  transform: translateX(-50%);
  transition: opacity 144ms ease, transform 176ms ease, visibility 144ms ease;
}

.site-publish-button:hover {
  transform: translateX(-50%) translateY(-2px);
}

.site-add-card-button {
  position: fixed;
  right: calc(clamp(12px, 1.7vw, 30px) + 16px);
  bottom: calc(clamp(10px, 1.6vw, 28px) + 16px);
  z-index: 26;
  color: var(--white);
  font-family: var(--sans);
  font-size: clamp(58px, 6vw, 112px);
  font-weight: 600;
  line-height: 0.72;
  mix-blend-mode: difference;
  padding: 0;
  pointer-events: auto;
  transition: opacity 144ms ease, transform 176ms ease, visibility 144ms ease;
}

.site-add-card-button:hover {
  transform: translateY(-3px);
}

.rail-back {
  --gallery-chrome-y: -10px;
  --gallery-chrome-scale-x: 1;
  --back-mark-width: clamp(62px, 5.6vw, 112px);
  --back-mark-height: clamp(36px, 3.1vw, 58px);
  top: clamp(14px, 2vw, 34px);
  left: clamp(12px, 1.7vw, 30px);
  color: #fff;
  font-family: var(--sans);
  font-size: var(--home-title-font-size);
  font-weight: 800;
  opacity: 0;
  visibility: hidden;
  inline-size: var(--back-mark-width);
  block-size: var(--back-mark-height);
  mix-blend-mode: normal;
  writing-mode: horizontal-tb;
  transform: translateY(var(--gallery-chrome-y)) scaleX(var(--gallery-chrome-scale-x));
  transition: opacity 176ms ease, transform 176ms ease, visibility 176ms ease;
  text-transform: uppercase;
}

.back-mark {
  position: relative;
  display: block;
  width: var(--back-mark-width);
  height: var(--back-mark-height);
  transform-origin: left center;
  transition: transform 496ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Desktop: menu burger and back arrow scaled down 20% */
@media (min-width: 981px) {
  .rail-menu {
    --menu-mark-width: clamp(38px, 3.52vw, 66px);
    --menu-mark-height: clamp(30px, 2.72vw, 48px);
  }

  .rail-back {
    --back-mark-width: clamp(50px, 4.48vw, 90px);
    --back-mark-height: clamp(29px, 2.48vw, 46px);
  }
}

.back-mark::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 72%;
  background: currentColor;
  clip-path: polygon(
    0 50%,
    29% 8%,
    34% 23%,
    16% 42%,
    100% 42%,
    100% 58%,
    16% 58%,
    38% 88%,
    32% 100%
  );
  transform: translateY(-50%);
  transition:
    clip-path 720ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 260ms ease;
}

.back-mark-line {
  display: none;
}

.rail-back:hover .back-mark {
  transform: translateX(-7px) scaleX(1.06);
}

.rail-back:hover .back-mark::before {
  clip-path: polygon(
    0 50%,
    33% 10%,
    38% 24%,
    18% 42%,
    92% 42%,
    92% 58%,
    18% 58%,
    42% 86%,
    36% 98%
  );
  opacity: 0.86;
}

.rail-back:active .back-mark {
  transform: translateX(-7px) scaleX(1.06);
  transition: none;
}

.rail-back:active .back-mark::before {
  clip-path: polygon(
    0 50%,
    33% 10%,
    38% 24%,
    18% 42%,
    92% 42%,
    92% 58%,
    18% 58%,
    42% 86%,
    36% 98%
  );
  opacity: 0.86;
  transition: none;
}

.project-open:not(.project-closing):not(.desktop-project-opening):not(.mobile-project-opening):not(.mobile-gallery-chrome-opening):not(.mobile-project-closing):not(.mobile-back-closing) .rail-back {
  opacity: 1;
  visibility: visible;
  transform: translateY(var(--gallery-chrome-y)) scaleX(var(--gallery-chrome-scale-x));
}

body.admin-page.project-open:not(.project-transitioning):not(.project-closing) .rail-project-edit {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.project-transitioning .rail-menu,
.project-transitioning .rail-write,
.project-transitioning .rail-back,
.project-transitioning .rail-project-edit,
.project-transitioning .rail-project-switch,
.project-transitioning .layout-edit-toggle,
.project-transitioning .site-publish-button,
.project-transitioning .site-add-card-button,
.project-closing .rail-menu,
.project-closing .rail-write,
.project-closing .rail-back,
.project-closing .rail-project-edit,
.project-closing .rail-project-switch,
.project-closing .layout-edit-toggle,
.project-closing .site-publish-button,
.project-closing .site-add-card-button,
.project-open .layout-edit-toggle,
.project-open .site-publish-button,
.project-open .site-add-card-button,
.editor-open .layout-edit-toggle,
.editor-open .site-publish-button,
.editor-open .site-add-card-button,
.editor-open .rail-write,
.editor-open .rail-project-edit,
.editor-open .rail-project-switch,
.project-open .rail-write,
.menu-open .site-chrome > .brand,
.menu-closing .site-chrome > .brand,
.inquiry-open .site-chrome > .brand,
.inquiry-closing .site-chrome > .brand,
.about-mounted .site-chrome > .brand,
.site-deleted-open .site-chrome > .brand,
.menu-open .rail-menu,
.menu-open .rail-write,
.menu-open .rail-back,
.menu-open .rail-project-edit,
.menu-open .rail-project-switch,
.menu-closing .rail-menu,
.menu-closing .rail-write,
.menu-closing .rail-project-edit,
.menu-closing .rail-project-switch,
.inquiry-open .rail-menu,
.inquiry-open .rail-write,
.inquiry-open .rail-project-edit,
.inquiry-open .rail-project-switch,
.inquiry-closing .rail-menu,
.inquiry-closing .rail-write,
.inquiry-closing .rail-project-edit,
.inquiry-closing .rail-project-switch,
.about-mounted .rail-menu,
.about-mounted .rail-write,
.about-mounted .rail-back,
.about-mounted .rail-project-edit,
.about-mounted .rail-project-switch,
.site-deleted-open .rail-menu,
.site-deleted-open .rail-write,
.site-deleted-open .rail-back,
.site-deleted-open .rail-project-edit,
.site-deleted-open .rail-project-switch,
.menu-closing .layout-edit-toggle,
.menu-closing .site-publish-button,
.menu-closing .site-add-card-button,
.menu-open .layout-edit-toggle,
.menu-open .site-publish-button,
.menu-open .site-add-card-button,
.inquiry-open .site-publish-button,
.inquiry-open .site-add-card-button,
.site-deleted-open .layout-edit-toggle,
.site-deleted-open .site-publish-button,
.site-deleted-open .site-add-card-button,
.about-mounted .layout-edit-toggle,
.about-mounted .site-publish-button,
.about-mounted .site-add-card-button,
.intro-pending .site-publish-button,
.intro-pending .site-add-card-button,
.intro-playing .site-publish-button,
.intro-playing .site-add-card-button,
.intro-cards-playing .site-publish-button,
.intro-cards-playing .site-add-card-button,
.intro-exiting .site-publish-button,
.intro-exiting .site-add-card-button {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.about-mounted main {
  display: none;
}

body.about-mounted .site-chrome > .brand,
body.about-open .site-chrome > .brand,
body.about-panel-closing .site-chrome > .brand,
body.about-mounted .rail-menu,
body.about-open .rail-menu,
body.about-panel-closing .rail-menu,
body.about-mounted .rail-write,
body.about-open .rail-write,
body.about-panel-closing .rail-write,
body.about-mounted .rail-back,
body.about-open .rail-back,
body.about-panel-closing .rail-back,
body.about-mounted .rail-project-edit,
body.about-open .rail-project-edit,
body.about-panel-closing .rail-project-edit,
body.about-mounted .rail-project-switch,
body.about-open .rail-project-switch,
body.about-panel-closing .rail-project-switch {
  display: none !important;
}

body.intro-brand-settled:not(.brand-returning):not(.menu-open):not(.menu-closing):not(.about-mounted):not(.about-open):not(.about-panel-closing):not(.inquiry-mounted):not(.inquiry-open):not(.inquiry-closing):not(.pricing-mounted):not(.pricing-open):not(.pricing-closing):not(.submissions-open):not(.site-deleted-open):not(.editor-open):not(.project-open):not(.project-closing):not(.gallery-switch-chrome-hidden):not(.gallery-switch-staging):not(.gallery-switch-flying):not(.mobile-home-returning):not(.mobile-home-chrome-delaying) .rail-menu {
  opacity: 1;
  visibility: visible;
  animation: none;
}

body.about-mounted .rail-menu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.about-mounted .rail-project-switch,
body.about-open .rail-project-switch,
body.about-panel-closing .rail-project-switch {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
}

body.brand-returning .rail-back,
body.mobile-home-returning .rail-back,
body.mobile-home-chrome-delaying .rail-back,
body.mobile-gallery-chrome-suppressed .rail-back,
body:not(.project-open) .rail-back {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
}

body.menu-open .rail-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  animation: none;
}

body.menu-closing .rail-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
}

body.menu-open .rail-menu .menu-mark-line::before {
  animation: menuLineExitRight 416ms cubic-bezier(0.55, 0, 0.15, 1) both;
}

body.menu-open .rail-menu .menu-mark-line:nth-child(1)::before {
  animation-delay: 0ms;
}

body.menu-open .rail-menu .menu-mark-line:nth-child(2)::before {
  animation-delay: 56ms;
}

body.menu-open .rail-menu .menu-mark-line:nth-child(3)::before {
  animation-delay: 112ms;
}

body.project-closing.brand-returning .site-chrome > .brand,
body.project-closing.brand-returning .rail-menu,
body.project-closing.brand-returning .rail-write {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}

body.project-closing.brand-returning .rail-menu,
body.project-closing.brand-returning .rail-write {
  animation: galleryChromeIn 416ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.site-deleted-open .site-chrome,
body.site-deleted-open .rail-menu,
body.site-deleted-open .rail-write,
body.site-deleted-open .rail-back,
body.site-deleted-open .rail-project-edit,
body.site-deleted-open .rail-project-switch,
body.site-deleted-open .layout-edit-toggle,
body.site-deleted-open .site-publish-button,
body.site-deleted-open .site-add-card-button {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
}

.project-open:not(.project-transitioning):not(.project-closing) .rail-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: galleryChromeIn 416ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.mobile-gallery-chrome-opened.project-open:not(.project-transitioning):not(.project-closing) .rail-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: galleryChromeIn 416ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.project-open .rail-project-switch,
body.project-transitioning .rail-project-switch,
body.project-closing .rail-project-switch {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
}

.project-open:not(.project-transitioning):not(.project-closing):not(.desktop-project-opening):not(.mobile-project-opening):not(.mobile-gallery-chrome-opening):not(.mobile-project-closing):not(.mobile-back-closing) .rail-back,
body.mobile-gallery-chrome-opened.project-open:not(.project-transitioning):not(.project-closing):not(.mobile-project-closing):not(.mobile-back-closing) .rail-back,
body.mobile-back-revealing.project-open .rail-back {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: galleryBackInFromRight 576ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.mobile-back-hidden .rail-back,
body.desktop-project-opening .rail-back,
body.mobile-gallery-chrome-opening .rail-back,
body.mobile-back-hidden .rail-project-switch,
body.mobile-project-preopening .rail-back,
body.mobile-project-preopening .rail-project-switch {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
}

body.mobile-back-revealing.project-open .rail-back {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: galleryBackInFromRight 576ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.mobile-project-opening.project-open .rail-menu,
body.mobile-project-closing.project-open .rail-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: none;
}

body.mobile-gallery-chrome-opening.project-open .rail-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: galleryChromeSoftIn 784ms cubic-bezier(0.16, 1, 0.3, 1) 184ms both;
  will-change: transform, opacity, filter;
}

body.mobile-back-closing.project-open .rail-back {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  animation: galleryBackExitLeft 416ms cubic-bezier(0.5, 0, 0.32, 1) both;
}

.project-closing .rail-back {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  animation: galleryBackExitLeft 416ms cubic-bezier(0.5, 0, 0.32, 1) both;
}

.project-closing .rail-back .back-mark,
body.mobile-back-closing.project-open .rail-back .back-mark {
  transform: translateX(-7px) scaleX(1.06) !important;
  transition: none !important;
}

.project-closing .rail-back .back-mark::before,
body.mobile-back-closing.project-open .rail-back .back-mark::before {
  clip-path: polygon(
    0 50%,
    33% 10%,
    38% 24%,
    18% 42%,
    92% 42%,
    92% 58%,
    18% 58%,
    42% 86%,
    36% 98%
  ) !important;
  opacity: 0.86;
  transition: none !important;
}

.project-open.project-transitioning .site-chrome > .brand,
.project-transitioning .rail-menu,
.project-transitioning .layout-edit-toggle,
.project-transitioning .site-publish-button,
.project-transitioning .site-add-card-button {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  animation: homeChromeOut 368ms cubic-bezier(0.55, 0, 0.15, 1) both;
}

@keyframes homeChromeOut {
  0% {
    opacity: 1;
    transform:
      translateX(var(--gallery-chrome-x, 0))
      translateY(var(--gallery-chrome-y, 0px))
      scaleX(var(--gallery-chrome-scale-x, 1));
    filter: blur(0);
  }

  100% {
    opacity: 0;
    visibility: hidden;
    transform:
      translateX(var(--gallery-chrome-x, 0))
      translateY(calc(var(--gallery-chrome-y, 0px) - 44px))
      scaleX(var(--gallery-chrome-scale-x, 1));
    filter: none;
  }
}

@keyframes galleryChromeIn {
  0% {
    opacity: 0;
    transform:
      translateX(var(--gallery-chrome-x, 0))
      translateY(calc(var(--gallery-chrome-y, 0px) - 48px))
      scaleX(var(--gallery-chrome-scale-x, 1));
    filter: blur(7px);
  }

  58% {
    opacity: 1;
    filter: blur(2px);
  }

  100% {
    opacity: 1;
    transform:
      translateX(var(--gallery-chrome-x, 0))
      translateY(var(--gallery-chrome-y, 0px))
      scaleX(var(--gallery-chrome-scale-x, 1));
    filter: blur(0);
  }
}

@keyframes galleryBackInFromRight {
  0% {
    opacity: 0;
    transform:
      translateX(58px)
      translateY(var(--gallery-chrome-y, 0px))
      scaleX(0.86);
    filter: blur(4px);
  }

  42% {
    opacity: 0.88;
    filter: blur(1.2px);
  }

  100% {
    opacity: 1;
    transform:
      translateX(0)
      translateY(var(--gallery-chrome-y, 0px))
      scaleX(var(--gallery-chrome-scale-x, 1));
    filter: blur(0);
  }
}

@keyframes galleryBackExitLeft {
  0% {
    opacity: 1;
    transform:
      translateX(0)
      translateY(var(--gallery-chrome-y, 0px))
      scaleX(var(--gallery-chrome-scale-x, 1));
    filter: blur(0);
  }

  100% {
    opacity: 0;
    transform:
      translateX(-116px)
      translateY(var(--gallery-chrome-y, 0px))
      scaleX(var(--gallery-chrome-scale-x, 1));
    filter: blur(2px);
  }
}

@keyframes menuLineRevealRight {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }

  28% {
    opacity: 1;
  }

  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes menuLineExitRight {
  0% {
    transform: scaleX(1);
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  100% {
    transform: scaleX(0);
    opacity: 0;
  }
}

@keyframes galleryChromeSoftIn {
  0% {
    opacity: 0;
    transform:
      translateX(var(--gallery-chrome-x, 0))
      translateY(calc(var(--gallery-chrome-y, 0px) - 62px))
      scaleX(var(--gallery-chrome-scale-x, 1));
    filter: blur(10px);
  }

  42% {
    opacity: 0.72;
    filter: blur(5px);
  }

  76% {
    opacity: 1;
    filter: blur(1.5px);
  }

  100% {
    opacity: 1;
    transform:
      translateX(var(--gallery-chrome-x, 0))
      translateY(var(--gallery-chrome-y, 0px))
      scaleX(var(--gallery-chrome-scale-x, 1));
    filter: blur(0);
  }
}

@keyframes galleryChromeTitleFlyIn {
  0% {
    opacity: 0;
    transform:
      translateX(var(--gallery-chrome-x, 0))
      translateY(calc(var(--gallery-chrome-y, 0px) + 108svh))
      scaleX(var(--gallery-chrome-scale-x, 1))
      scale(0.76);
    filter: blur(10px);
  }

  42% {
    opacity: 1;
    filter: blur(2px);
  }

  100% {
    opacity: 1;
    transform:
      translateX(var(--gallery-chrome-x, 0))
      translateY(var(--gallery-chrome-y, 0px))
      scaleX(var(--gallery-chrome-scale-x, 1))
      scale(1);
    filter: blur(0);
  }
}

.project-open .site-chrome > .brand {
  opacity: 0;
  visibility: hidden;
}

.project-open .portfolio-view {
  opacity: 0;
  pointer-events: none;
}

.project-transitioning .portfolio-view {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.project-closing .portfolio-view {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.project-open.project-closing .portfolio-view {
  opacity: 0;
}

.project-open .project-view {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.project-transitioning .project-view {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}

.project-closing .project-view {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}

.project-open:not(.project-transitioning) .project-view {
  animation: none;
  transform: none;
}

.project-open:not(.project-transitioning) .project-copy > * {
  animation: none;
}

.project-open:not(.project-transitioning) .project-image {
  animation: none;
}

@media (min-width: 641px) {
  body.desktop-project-opening.project-transitioning .portfolio-view,
  body.project-closing .portfolio-view {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
  }

  body.desktop-project-opening.project-transitioning .portfolio-view .tile {
    --home-card-flow-delay: 0ms;
    animation:
      homeCardFlowExitUp 1040ms cubic-bezier(0.4, 0, 0.68, 0.06)
      var(--home-card-flow-delay) both;
    will-change: opacity, transform, filter;
  }

  body.project-closing .portfolio-view .tile {
    --home-card-flow-delay: 0ms;
    animation:
      homeCardFlowReturnFromTop 1180ms cubic-bezier(0.16, 1, 0.3, 1)
      var(--home-card-flow-delay) both;
    will-change: opacity, transform, filter;
  }

  body.desktop-project-opening.project-transitioning .portfolio-view .tile:nth-of-type(2),
  body.project-closing .portfolio-view .tile:nth-of-type(7) {
    --home-card-flow-delay: 24ms;
  }

  body.desktop-project-opening.project-transitioning .portfolio-view .tile:nth-of-type(3),
  body.project-closing .portfolio-view .tile:nth-of-type(6) {
    --home-card-flow-delay: 48ms;
  }

  body.desktop-project-opening.project-transitioning .portfolio-view .tile:nth-of-type(4),
  body.project-closing .portfolio-view .tile:nth-of-type(5) {
    --home-card-flow-delay: 72ms;
  }

  body.desktop-project-opening.project-transitioning .portfolio-view .tile:nth-of-type(5),
  body.project-closing .portfolio-view .tile:nth-of-type(4) {
    --home-card-flow-delay: 96ms;
  }

  body.desktop-project-opening.project-transitioning .portfolio-view .tile:nth-of-type(6),
  body.project-closing .portfolio-view .tile:nth-of-type(3) {
    --home-card-flow-delay: 120ms;
  }

  body.desktop-project-opening.project-transitioning .portfolio-view .tile:nth-of-type(7),
  body.project-closing .portfolio-view .tile:nth-of-type(2) {
    --home-card-flow-delay: 144ms;
  }

  body.desktop-project-opening.project-transitioning .portfolio-view .tile:nth-of-type(8),
  body.project-closing .portfolio-view .tile:nth-of-type(1) {
    --home-card-flow-delay: 168ms;
  }
}

.portfolio-view {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  min-height: 100vh;
  transition: opacity 208ms ease, background-color 336ms ease;
}

body[data-active-gallery="films"]:not(.project-open):not(.project-transitioning):not(.project-closing) .portfolio-view {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--black);
}

@media (min-width: 641px) {
  body[data-active-gallery="films"].desktop-project-opening.project-transitioning .portfolio-view,
  body[data-active-gallery="films"].project-closing .portfolio-view {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.home-seo-footer {
  position: relative;
  display: grid;
  gap: clamp(28px, 4.5vw, 78px);
  padding: clamp(54px, 7vw, 118px) clamp(18px, 1.8vw, 34px) clamp(10px, 1.2vw, 24px);
  color: var(--black);
  background: var(--white);
  overflow: hidden;
  transition: opacity 208ms ease, background-color 336ms ease, color 336ms ease;
}

body[data-active-gallery="films"] .home-seo-footer {
  color: var(--white);
  background: var(--black);
}

.project-open .home-seo-footer,
.project-transitioning .home-seo-footer,
.project-closing .home-seo-footer,
.gallery-switch-preparing .home-seo-footer,
.menu-open .home-seo-footer,
.menu-closing .home-seo-footer,
.inquiry-open .home-seo-footer,
.inquiry-closing .home-seo-footer,
.about-mounted .home-seo-footer,
.submissions-open .home-seo-footer,
.site-deleted-open .home-seo-footer,
.pricing-open .home-seo-footer,
.pricing-closing .home-seo-footer,
.editor-open .home-seo-footer {
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 641px) {
  body.project-open.project-closing .home-seo-footer {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    animation:
      homeFooterFlowReturn 1180ms cubic-bezier(0.16, 1, 0.3, 1)
      192ms both;
    will-change: opacity, transform, filter;
  }
}

.home-seo-footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, auto) minmax(0, 1fr);
  align-items: start;
  gap: clamp(22px, 4vw, 86px);
}

.home-seo-contact,
.home-seo-meta {
  display: grid;
  gap: 6px;
  color: currentColor;
  font-size: clamp(10px, 0.78vw, 15px);
  font-weight: 700;
  line-height: 0.98;
  text-transform: uppercase;
}

.home-seo-contact a {
  width: max-content;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
}

/* The email reads as an address, so it stays lowercase */
.home-seo-contact .home-seo-email {
  text-transform: lowercase;
}

.home-seo-footer p {
  max-width: min(760px, 100%);
  margin: 0;
  justify-self: center;
  color: rgba(0, 0, 0, 0.54);
  font-size: clamp(14px, 1vw, 20px);
  font-weight: 600;
  line-height: 1.08;
  text-align: center;
  white-space: nowrap;
}

body[data-active-gallery="films"] .home-seo-footer p {
  color: rgba(255, 255, 255, 0.58);
}

.home-seo-meta {
  justify-self: end;
  justify-items: start;
  margin-right: clamp(34px, 4.8vw, 92px);
  padding-left: 0;
  text-align: left;
}

.home-seo-footer h2 {
  width: 100vw;
  margin: 0 0 0 50%;
  color: currentColor;
  font-family: var(--sans);
  font-size: var(--home-seo-brand-size, calc(100vw / 6.35));
  font-weight: 1000;
  line-height: 0.86;
  letter-spacing: var(--home-seo-brand-tracking, 0px);
  text-align: center;
  text-transform: uppercase;
  transform: translateX(calc(-50% + var(--home-seo-brand-shift, 0px)));
  white-space: nowrap;
}

.site-intro {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  gap: clamp(18px, 3vw, 42px);
  align-content: center;
  color: #fff;
  background: transparent;
  mix-blend-mode: difference;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.intro-pending main,
.intro-pending .site-chrome {
  opacity: 0;
  visibility: visible;
  pointer-events: none;
  will-change: opacity;
}

.intro-pending .portfolio-view .tile:nth-of-type(-n + 6) {
  will-change: opacity, transform, filter;
}

.intro-pending .site-intro,
.intro-playing .site-intro {
  opacity: 1;
  visibility: visible;
}

.intro-cards-playing .site-intro {
  z-index: 120;
  background: transparent;
  mix-blend-mode: difference;
}

.intro-exiting .site-intro {
  background: transparent;
  mix-blend-mode: difference;
  opacity: 1;
  visibility: visible;
}

.intro-brand-settled .site-intro {
  z-index: 24;
  opacity: 1;
  visibility: visible;
  mix-blend-mode: difference;
  background: transparent;
}

.intro-brand-settled.project-open .site-intro,
.intro-brand-settled.menu-open .site-intro,
.intro-brand-settled.editor-open .site-intro,
.intro-brand-settled.inquiry-open .site-intro {
  opacity: 0;
  visibility: hidden;
}

.intro-cards-playing .site-intro-word {
  color: #fff;
  mix-blend-mode: normal;
  opacity: 1;
  animation: none;
  filter: none;
}

.site-intro-word {
  --intro-title-spacing: 0;
  max-width: calc(100vw - clamp(32px, 5vw, 96px));
  position: relative;
  display: grid;
  justify-content: center;
  align-items: center;
  font-family: var(--intro-logo-font);
  font-size: clamp(56px, 11.4vw, 218px);
  font-weight: 1000;
  line-height: 0.86;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  opacity: 1;
  pointer-events: none;
  transform: scaleX(1) scaleY(1.02);
  transform-origin: center;
  clip-path: inset(0 0 0 0);
  z-index: 1;
}

.site-intro-word > * {
  grid-area: 1 / 1;
}

.site-intro-word > .intro-subtitle {
  grid-area: 2 / 1;
}

.intro-title {
  display: inline-flex;
  justify-content: center;
  align-items: baseline;
  justify-self: center;
  white-space: nowrap;
  letter-spacing: 0;
  font-weight: 1000;
  opacity: 0;
  backface-visibility: hidden;
  transform: scaleX(1) scaleY(1.02) translateZ(0);
  will-change: opacity, transform;
}

.intro-subtitle {
  --intro-subtitle-edge-bleed: 0px;
  --intro-subtitle-width-trim: 12px;
  --intro-subtitle-shift-x: 0px;
  --intro-subtitle-reveal-bleed: 8px;
  display: flex;
  width: calc(var(--intro-subtitle-width, 100%) - var(--intro-subtitle-width-trim) + var(--intro-subtitle-edge-bleed) * 2);
  max-width: calc(100% - var(--intro-subtitle-width-trim) + var(--intro-subtitle-edge-bleed) * 2);
  justify-self: center;
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(2px, 0.42vw, 8px);
  color: currentColor;
  font-family: var(--sans);
  font-size: clamp(8px, 0.78vw, 14px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  opacity: 0;
  transform: translate3d(var(--intro-subtitle-shift-x), 13px, 0) scaleX(1);
  transform-origin: center;
  clip-path: inset(100% calc(-1 * var(--intro-subtitle-reveal-bleed)) 0 calc(-1 * var(--intro-subtitle-reveal-bleed)));
  overflow: visible;
  white-space: nowrap;
  will-change: opacity, transform, filter, clip-path;
}

.intro-subtitle-letter,
.intro-subtitle-space {
  display: block;
  flex: 0 0 auto;
}

.intro-subtitle-space {
  width: 0.42em;
}

.site-intro-word .intro-letter,
.site-intro-word .intro-space {
  display: inline-block;
}

.site-intro-word .intro-letter {
  --intro-letter-scale-x: 1;
  margin-inline-end: -0.035em;
  opacity: 1;
  transform: scaleX(var(--intro-letter-scale-x));
  transform-origin: center bottom;
  filter: none;
  backface-visibility: hidden;
  will-change: opacity, transform;
}

.site-intro-word .intro-letter:last-child {
  margin-inline-end: 0;
}

.site-intro-word .intro-space {
  width: 0.34em;
}

.intro-playing .intro-title {
  letter-spacing: var(--intro-title-spacing);
  animation: introTitleLayer 1024ms linear 96ms both;
}

.intro-playing .intro-title .intro-letter {
  animation: introLetterExpand 1024ms cubic-bezier(0.33, 1, 0.68, 1) 96ms both;
}

.intro-playing .intro-subtitle {
  animation:
    introSubtitleAppear 1ms linear 1320ms both,
    introSubtitleRise 380ms cubic-bezier(0.16, 1, 0.3, 1) 1320ms both;
}

.intro-title-hiding .site-intro-word {
  color: #fff;
  animation: none;
  filter: none;
}

.intro-exiting .site-intro-word {
  color: #fff;
  animation: introWordExitInPlace 1024ms cubic-bezier(0.33, 1, 0.68, 1) both;
  animation-delay: 1520ms;
  will-change: opacity, filter;
}

.intro-brand-settled .site-intro-word {
  color: #fff;
  animation: none;
  opacity: 0;
  visibility: hidden;
  filter: none;
  cursor: default;
  pointer-events: none;
  transform:
    translate3d(
      calc(-50vw + clamp(64px, 7.5vw, 154px)),
      calc(-50vh + clamp(18px, 2.5vw, 46px)),
      0
    )
    scale(0.15, 0.153);
}

body.brand-title-returning.intro-brand-settled .site-intro-word {
  animation: none;
}

.intro-title-hiding .intro-title {
  letter-spacing: var(--intro-title-spacing);
  opacity: 1;
  animation: none;
}

.intro-exiting .intro-title {
  letter-spacing: var(--intro-title-spacing);
  opacity: 1;
  animation: introTitleExitInPlace 1024ms cubic-bezier(0.33, 1, 0.68, 1) both;
  animation-delay: 1520ms;
}

.intro-title-hiding .intro-subtitle {
  opacity: 0.72;
  filter: blur(0);
  transform: translate3d(var(--intro-subtitle-shift-x), 0, 0) scaleX(1);
  clip-path: inset(0 calc(-1 * var(--intro-subtitle-reveal-bleed)) 0 calc(-1 * var(--intro-subtitle-reveal-bleed)));
  animation: none;
}

.intro-exiting .intro-subtitle {
  opacity: 0.72;
  animation: introSubtitleOut 1024ms cubic-bezier(0.33, 1, 0.68, 1) 1520ms both;
}

.intro-brand-settled .intro-title {
  letter-spacing: 0;
  opacity: 1;
}

.intro-brand-settled .intro-subtitle {
  opacity: 0;
  visibility: hidden;
}

.intro-title-hiding .intro-title .intro-letter,
.intro-exiting .intro-title .intro-letter {
  opacity: 1;
  transform: scaleX(var(--intro-letter-scale-x));
}

.intro-exiting .intro-title .intro-letter {
  animation: introLetterCollapseOut 1024ms cubic-bezier(0.33, 1, 0.68, 1) 1520ms both;
}

.intro-brand-settled .intro-title .intro-letter {
  opacity: 1;
  transform: scaleX(var(--intro-letter-scale-x));
  animation: none;
}

.site-intro-loader {
  display: none;
}

/* The couple story lives on the gallery title page — never on the home card */
body[data-active-gallery="photography"] .tile-copy span {
  display: none;
}

.intro-cards-playing main {
  position: relative;
  z-index: 95;
  opacity: 1;
  visibility: visible;
}

.intro-cards-playing .site-chrome {
  opacity: 0;
  visibility: visible;
  pointer-events: none;
  will-change: opacity;
}

.intro-cards-playing .portfolio-view {
  pointer-events: none;
}

body.intro-home-ready.intro-cards-playing .portfolio-view,
body.intro-home-ready.intro-cards-settling .portfolio-view {
  pointer-events: auto;
}

.intro-cards-playing .tile:nth-of-type(-n + 6) {
  animation:
    gallerySwitchIntroCardFlyIn var(--intro-card-duration, 1750ms)
    cubic-bezier(0.16, 1, 0.3, 1) var(--intro-card-delay, 0ms) both;
  transform-origin: center;
  will-change: opacity, transform, filter;
  z-index: var(--intro-card-z, 1);
}

@media (min-width: 641px) {
  body[data-active-gallery="films"].intro-cards-playing .tile:nth-of-type(-n + 6) {
    --gallery-switch-start-y: 112vh;
    --intro-card-duration: 1650ms;
    animation:
      filmsDirectCardFlyIn var(--intro-card-duration)
      cubic-bezier(0.16, 1, 0.3, 1) var(--intro-card-delay, 0ms) both;
  }

  body[data-active-gallery="films"].intro-cards-playing .tile:nth-of-type(-n + 6) img,
  body[data-active-gallery="films"].intro-cards-playing .tile:nth-of-type(-n + 6) video {
    animation:
      filmsDirectMediaSettle var(--intro-card-duration)
      cubic-bezier(0.16, 1, 0.3, 1) var(--intro-card-delay, 0ms) both;
  }

  body[data-active-gallery="films"].intro-cards-playing .tile:nth-of-type(n + 7) {
    --intro-card-duration: 1650ms;
    animation:
      filmsDirectCardFlyIn var(--intro-card-duration)
      cubic-bezier(0.16, 1, 0.3, 1) 420ms both;
    transform-origin: center;
    will-change: opacity, transform, filter;
  }

  body[data-active-gallery="films"].intro-cards-playing .tile:nth-of-type(n + 7) img,
  body[data-active-gallery="films"].intro-cards-playing .tile:nth-of-type(n + 7) video {
    animation:
      filmsDirectMediaSettle var(--intro-card-duration)
      cubic-bezier(0.16, 1, 0.3, 1) 420ms both;
  }
}

.intro-cards-playing.intro-cards-settling .tile:nth-of-type(-n + 6) {
  animation:
    introRealCardSettle 1600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.intro-cards-playing .tile:nth-of-type(1) {
  --intro-card-stack-x: 32vw;
  --intro-card-stack-y: 24vh;
  --intro-card-page-x: -150px;
  --intro-card-page-y: 0px;
  --intro-card-delay: 0ms;
  --intro-card-duration: 2600ms;
  --intro-card-start-x: 0px;
  --intro-card-start-y: 105vh;
  --intro-card-drift-x: 0px;
  --intro-card-drift-y: 0px;
  --intro-card-scale: 0.8;
  --intro-card-z: 1;
}

.intro-cards-playing .tile:nth-of-type(2) {
  --intro-card-stack-x: 0px;
  --intro-card-stack-y: 23vh;
  --intro-card-page-x: -90px;
  --intro-card-page-y: 0px;
  --intro-card-delay: 150ms;
  --intro-card-duration: 2560ms;
  --intro-card-start-x: 0px;
  --intro-card-start-y: 105vh;
  --intro-card-drift-x: 0px;
  --intro-card-drift-y: 0px;
  --intro-card-scale: 0.55;
  --intro-card-z: 2;
}

.intro-cards-playing .tile:nth-of-type(3) {
  --intro-card-stack-x: -32vw;
  --intro-card-stack-y: 24vh;
  --intro-card-page-x: -30px;
  --intro-card-page-y: 0px;
  --intro-card-delay: 300ms;
  --intro-card-duration: 2520ms;
  --intro-card-start-x: 0px;
  --intro-card-start-y: 105vh;
  --intro-card-drift-x: 0px;
  --intro-card-drift-y: 0px;
  --intro-card-scale: 0.78;
  --intro-card-z: 3;
}

.intro-cards-playing .tile:nth-of-type(4) {
  --intro-card-stack-x: 32vw;
  --intro-card-stack-y: -18vh;
  --intro-card-page-x: 30px;
  --intro-card-page-y: 0px;
  --intro-card-delay: 450ms;
  --intro-card-duration: 2480ms;
  --intro-card-start-x: 0px;
  --intro-card-start-y: 105vh;
  --intro-card-drift-x: 0px;
  --intro-card-drift-y: 0px;
  --intro-card-scale: 0.6;
  --intro-card-z: 4;
}

.intro-cards-playing .tile:nth-of-type(5) {
  --intro-card-stack-x: 0px;
  --intro-card-stack-y: -20vh;
  --intro-card-page-x: 90px;
  --intro-card-page-y: 0px;
  --intro-card-delay: 600ms;
  --intro-card-duration: 2440ms;
  --intro-card-start-x: 0px;
  --intro-card-start-y: 105vh;
  --intro-card-drift-x: 0px;
  --intro-card-drift-y: 0px;
  --intro-card-scale: 0.5;
  --intro-card-z: 5;
}

.intro-cards-playing .tile:nth-of-type(6) {
  --intro-card-stack-x: -32vw;
  --intro-card-stack-y: -18vh;
  --intro-card-page-x: 150px;
  --intro-card-page-y: 0px;
  --intro-card-delay: 750ms;
  --intro-card-duration: 2400ms;
  --intro-card-start-x: 0px;
  --intro-card-start-y: 105vh;
  --intro-card-drift-x: 0px;
  --intro-card-drift-y: 0px;
  --intro-card-scale: 0.64;
  --intro-card-z: 6;
}

.intro-pending .tile {
  opacity: 0;
  transform: translateY(16vh) scale(0.98);
}

.tile {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  isolation: isolate;
  background: var(--white);
  cursor: pointer;
  transition: background-color 336ms ease;
}

body[data-active-gallery="films"] .tile {
  aspect-ratio: 9 / 16;
  background: var(--black);
}

.tile.tile-empty {
  background: rgba(0, 0, 0, 0.06);
}

body.admin-page .tile.tile-empty {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.045), rgba(0, 0, 0, 0.1)),
    rgba(0, 0, 0, 0.055);
}

body[data-active-gallery="films"] .tile.tile-empty {
  background: rgba(255, 255, 255, 0.08);
}

.tile.tile-empty::after {
  display: none;
}

.layout-edit-active .tile {
  cursor: grab;
  outline: 1px solid rgba(255, 255, 255, 0.82);
  outline-offset: -10px;
}

.layout-edit-active .tile::before {
  content: "DRAG";
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  color: var(--white);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  opacity: 0.86;
  pointer-events: none;
}

.layout-edit-active .tile.is-layout-dragging {
  cursor: grabbing;
  opacity: 0.44;
}

.layout-drag-surface {
  display: none;
}

.layout-edit-active .tile .layout-drag-surface {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: block;
  cursor: grab;
  touch-action: none;
}

.layout-edit-active .tile.is-layout-dragging .layout-drag-surface {
  cursor: grabbing;
}

.layout-edit-active .tile img,
.layout-edit-active .tile video,
.layout-edit-active .tile iframe,
.layout-edit-active .tile .project-youtube-player,
.layout-edit-active .tile .project-youtube-play,
.layout-edit-active .tile .project-youtube-pause,
.layout-edit-active .tile .tile-copy {
  pointer-events: none !important;
}

.intro-revealing .tile {
  animation: tileReveal 880ms cubic-bezier(0.19, 1, 0.22, 1) both;
}

.intro-revealing .tile img,
.intro-revealing .tile video {
  animation: tileImageSettle 1000ms cubic-bezier(0.19, 1, 0.22, 1) both;
}

.intro-revealing .tile-copy {
  animation: tileCopyRise 560ms cubic-bezier(0.19, 1, 0.22, 1) both;
}

.intro-revealing .tile:nth-of-type(1) {
  animation-delay: 0ms;
}

.intro-revealing .tile:nth-of-type(1) img,
.intro-revealing .tile:nth-of-type(1) video {
  animation-delay: 0ms;
}

.intro-revealing .tile:nth-of-type(1) .tile-copy {
  animation-delay: 288ms;
}

.intro-revealing .tile:nth-of-type(2) {
  animation-delay: 64ms;
}

.intro-revealing .tile:nth-of-type(2) img,
.intro-revealing .tile:nth-of-type(2) video {
  animation-delay: 64ms;
}

.intro-revealing .tile:nth-of-type(2) .tile-copy {
  animation-delay: 344ms;
}

.intro-revealing .tile:nth-of-type(3) {
  animation-delay: 128ms;
}

.intro-revealing .tile:nth-of-type(3) img,
.intro-revealing .tile:nth-of-type(3) video {
  animation-delay: 128ms;
}

.intro-revealing .tile:nth-of-type(3) .tile-copy {
  animation-delay: 400ms;
}

.intro-revealing .tile:nth-of-type(4) {
  animation-delay: 192ms;
}

.intro-revealing .tile:nth-of-type(4) img,
.intro-revealing .tile:nth-of-type(4) video {
  animation-delay: 192ms;
}

.intro-revealing .tile:nth-of-type(4) .tile-copy {
  animation-delay: 456ms;
}

.intro-revealing .tile:nth-of-type(5) {
  animation-delay: 256ms;
}

.intro-revealing .tile:nth-of-type(5) img,
.intro-revealing .tile:nth-of-type(5) video {
  animation-delay: 256ms;
}

.intro-revealing .tile:nth-of-type(5) .tile-copy {
  animation-delay: 512ms;
}

.intro-revealing .tile:nth-of-type(6) {
  animation-delay: 320ms;
}

.intro-revealing .tile:nth-of-type(6) img,
.intro-revealing .tile:nth-of-type(6) video {
  animation-delay: 320ms;
}

.intro-revealing .tile:nth-of-type(6) .tile-copy {
  animation-delay: 568ms;
}

.films-direct-revealing .tile {
  --gallery-switch-start-y: calc(100dvh + 240px);
  animation: filmsDirectCardFlyIn 1320ms cubic-bezier(0.16, 1, 0.3, 1) both;
  transform-origin: center;
  will-change: opacity, transform, filter;
}

@media (min-width: 641px) {
  .films-direct-revealing .tile:nth-of-type(-n + 6) {
    animation:
      filmsDirectCardFlyIn var(--intro-card-duration, 1650ms)
      cubic-bezier(0.16, 1, 0.3, 1) var(--intro-card-delay, 0ms) both;
    z-index: var(--intro-card-z, 1);
  }

  .films-direct-revealing .tile:nth-of-type(-n + 6) img,
  .films-direct-revealing .tile:nth-of-type(-n + 6) video {
    animation:
      filmsDirectMediaSettle var(--intro-card-duration, 1650ms)
      cubic-bezier(0.16, 1, 0.3, 1) var(--intro-card-delay, 0ms) both;
  }

  .films-direct-revealing .tile:nth-of-type(7) {
    --gallery-switch-delay: 360ms;
    --intro-card-delay: 360ms;
    --intro-card-duration: 1650ms;
    animation:
      filmsDirectCardFlyIn var(--intro-card-duration)
      cubic-bezier(0.16, 1, 0.3, 1) var(--intro-card-delay) both;
  }

  .films-direct-revealing .tile:nth-of-type(8) {
    --gallery-switch-delay: 420ms;
    --intro-card-delay: 420ms;
    --intro-card-duration: 1650ms;
    animation:
      filmsDirectCardFlyIn var(--intro-card-duration)
      cubic-bezier(0.16, 1, 0.3, 1) var(--intro-card-delay) both;
  }

  .films-direct-revealing .tile:nth-of-type(7) img,
  .films-direct-revealing .tile:nth-of-type(7) video,
  .films-direct-revealing .tile:nth-of-type(8) img,
  .films-direct-revealing .tile:nth-of-type(8) video {
    animation:
      filmsDirectMediaSettle var(--intro-card-duration)
      cubic-bezier(0.16, 1, 0.3, 1) var(--intro-card-delay) both;
  }
}

.films-direct-revealing .tile img,
.films-direct-revealing .tile video {
  animation: filmsDirectMediaSettle 1400ms cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: opacity, transform, filter;
}

.films-direct-revealing .tile-copy {
  opacity: 0;
  visibility: hidden;
  animation: none;
}

.gallery-switch-staging .tile {
  --gallery-switch-delay: 0ms;
  opacity: 0;
  transform: translate3d(0, var(--gallery-switch-start-y, 112vh), 0) scale(0.74);
  filter: blur(10px);
  animation: none;
  transition: none;
  transform-origin: center;
  will-change: opacity, transform, filter;
}

.gallery-switch-staging .tile img,
.gallery-switch-staging .tile video {
  opacity: 0.92;
  transform: scale(1.08);
  filter: brightness(1.08) saturate(0.9);
  animation: none;
  transition: none;
  will-change: opacity, transform, filter;
}

.gallery-switch-staging.gallery-switch-flying .tile {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  transition:
    opacity 420ms ease var(--gallery-switch-delay),
    transform 1420ms cubic-bezier(0.16, 1, 0.3, 1) var(--gallery-switch-delay),
    filter 820ms cubic-bezier(0.16, 1, 0.3, 1) var(--gallery-switch-delay);
}

.gallery-switch-staging.gallery-switch-flying .tile img,
.gallery-switch-staging.gallery-switch-flying .tile video {
  opacity: 1;
  transform: scale(1.01);
  filter: var(--tile-filter, saturate(0.93) contrast(1.06));
  transition:
    opacity 420ms ease var(--gallery-switch-delay),
    transform 1500ms cubic-bezier(0.16, 1, 0.3, 1) var(--gallery-switch-delay),
    filter 1500ms cubic-bezier(0.16, 1, 0.3, 1) var(--gallery-switch-delay);
}

.films-direct-revealing .tile:nth-of-type(1) {
  --gallery-switch-delay: 0ms;
  --intro-card-stack-x: 32vw;
  --intro-card-stack-y: 24vh;
  --intro-card-delay: 0ms;
  --intro-card-duration: 1800ms;
  --intro-card-start-x: 0px;
  --intro-card-start-y: 105vh;
  --intro-card-scale: 0.8;
  --intro-card-z: 1;
  animation-delay: 0ms;
}

.films-direct-revealing .tile:nth-of-type(1) img,
.films-direct-revealing .tile:nth-of-type(1) video {
  animation-delay: 0ms;
}

.films-direct-revealing .tile:nth-of-type(1) .tile-copy {
  animation-delay: 528ms;
}

.films-direct-revealing .tile:nth-of-type(2) {
  --gallery-switch-delay: 60ms;
  --intro-card-stack-x: 0px;
  --intro-card-stack-y: 23vh;
  --intro-card-delay: 150ms;
  --intro-card-duration: 1780ms;
  --intro-card-start-x: 0px;
  --intro-card-start-y: 105vh;
  --intro-card-scale: 0.55;
  --intro-card-z: 2;
  animation-delay: 48ms;
}

.films-direct-revealing .tile:nth-of-type(2) img,
.films-direct-revealing .tile:nth-of-type(2) video {
  animation-delay: 48ms;
}

.films-direct-revealing .tile:nth-of-type(2) .tile-copy {
  animation-delay: 576ms;
}

.films-direct-revealing .tile:nth-of-type(3) {
  --gallery-switch-delay: 120ms;
  --intro-card-stack-x: -32vw;
  --intro-card-stack-y: 24vh;
  --intro-card-delay: 300ms;
  --intro-card-duration: 1760ms;
  --intro-card-start-x: 0px;
  --intro-card-start-y: 105vh;
  --intro-card-scale: 0.78;
  --intro-card-z: 3;
  animation-delay: 96ms;
}

.films-direct-revealing .tile:nth-of-type(3) img,
.films-direct-revealing .tile:nth-of-type(3) video {
  animation-delay: 96ms;
}

.films-direct-revealing .tile:nth-of-type(3) .tile-copy {
  animation-delay: 624ms;
}

.films-direct-revealing .tile:nth-of-type(4) {
  --gallery-switch-delay: 180ms;
  --intro-card-stack-x: 32vw;
  --intro-card-stack-y: -18vh;
  --intro-card-delay: 450ms;
  --intro-card-duration: 1740ms;
  --intro-card-start-x: 0px;
  --intro-card-start-y: 105vh;
  --intro-card-scale: 0.6;
  --intro-card-z: 4;
  animation-delay: 144ms;
}

.films-direct-revealing .tile:nth-of-type(4) img,
.films-direct-revealing .tile:nth-of-type(4) video {
  animation-delay: 144ms;
}

.films-direct-revealing .tile:nth-of-type(4) .tile-copy {
  animation-delay: 672ms;
}

.films-direct-revealing .tile:nth-of-type(5) {
  --gallery-switch-delay: 240ms;
  --intro-card-stack-x: 0px;
  --intro-card-stack-y: -20vh;
  --intro-card-delay: 600ms;
  --intro-card-duration: 1720ms;
  --intro-card-start-x: 0px;
  --intro-card-start-y: 105vh;
  --intro-card-scale: 0.5;
  --intro-card-z: 5;
  animation-delay: 192ms;
}

.films-direct-revealing .tile:nth-of-type(5) img,
.films-direct-revealing .tile:nth-of-type(5) video {
  animation-delay: 192ms;
}

.films-direct-revealing .tile:nth-of-type(5) .tile-copy {
  animation-delay: 720ms;
}

.films-direct-revealing .tile:nth-of-type(6) {
  --gallery-switch-delay: 300ms;
  --intro-card-stack-x: -32vw;
  --intro-card-stack-y: -18vh;
  --intro-card-delay: 750ms;
  --intro-card-duration: 1700ms;
  --intro-card-start-x: 0px;
  --intro-card-start-y: 105vh;
  --intro-card-scale: 0.64;
  --intro-card-z: 6;
  animation-delay: 240ms;
}

.films-direct-revealing .tile:nth-of-type(6) img,
.films-direct-revealing .tile:nth-of-type(6) video {
  animation-delay: 240ms;
}

.films-direct-revealing .tile:nth-of-type(6) .tile-copy {
  animation-delay: 768ms;
}

.tile img,
.tile video,
.tile .project-youtube-player {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: var(--tile-position, 50% 50%);
  transform: scale(1.01);
  filter: var(--tile-filter, saturate(0.93) contrast(1.06));
  transition: transform 720ms ease, filter 400ms ease;
}

.tile:nth-of-type(1) {
  --tile-position: 82% 13%;
}

.tile:nth-of-type(2) {
  --tile-position: 47% 10%;
}

.tile:nth-of-type(3) {
  --tile-position: 88% 4%;
}

.tile:nth-of-type(4) {
  --tile-position: 6% 98%;
}

.tile:nth-of-type(5) {
  --tile-position: 52% 94%;
}

.tile:nth-of-type(6) {
  --tile-position: 100% 100%;
}

.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.38) 100%);
  opacity: 0;
  transition: opacity 240ms ease;
}

.tile:hover img {
  transform: scale(1.045);
  filter: var(--tile-hover-filter, saturate(1.05) contrast(1.08));
}

.tile:hover video,
.tile:hover .project-youtube-player {
  transform: scale(1.045);
  filter: var(--tile-hover-filter, saturate(1.05) contrast(1.08));
}

.tile .project-youtube-pause {
  display: none;
}

.tile:hover::after,
.tile:focus-within::after {
  opacity: 1;
}

.tile-copy {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 3vw, 54px);
  z-index: 2;
  display: grid;
  gap: 3px;
  justify-items: center;
  color: var(--white);
  font-family: var(--serif);
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity 208ms ease, transform 288ms cubic-bezier(0.19, 1, 0.22, 1);
  pointer-events: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

.tile:hover .tile-copy,
.tile:focus-within .tile-copy {
  opacity: 1;
  transform: translate(-50%, 0);
}

body.admin-page .tile.tile-empty .tile-copy {
  color: rgba(0, 0, 0, 0.72);
  opacity: 0.72;
  transform: translate(-50%, 0);
}

.tile-copy strong {
  font-family: var(--serif);
  font-size: clamp(11.52px, 0.928vw, 18.56px);
  font-weight: 600;
  line-height: 0.95;
}

.tile-copy span {
  font-family: var(--serif);
  font-size: clamp(6.656px, 0.5632vw, 10.752px);
  font-weight: 600;
  text-transform: none;
}

.tile-admin-actions {
  position: absolute;
  /* Above the play mark: half the mark plus a gap, anchored by their own
     bottom edge so the boxes never meet */
  top: auto;
  bottom: calc(50% + clamp(74px, 7vw, 138px) / 2 + clamp(12px, 1.4vw, 24px));
  left: 50%;
  z-index: 5;
  display: flex;
  gap: clamp(22px, 2vw, 38px);
  color: var(--white);
  mix-blend-mode: difference;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 176ms ease;
  white-space: nowrap;
}

.tile:hover .tile-admin-actions,
.tile-admin-actions:hover,
.tile:focus-within .tile-admin-actions {
  opacity: 1;
  pointer-events: auto;
}

body.admin-page .tile.tile-empty .tile-admin-actions {
  opacity: 0.58;
  pointer-events: auto;
}

.tile-admin-actions button {
  min-height: 56px;
  padding: 0 4px;
  color: inherit;
  border-bottom: 0;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: clamp(18px, 1.35vw, 26px);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: none;
  transition: opacity 144ms ease, transform 176ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tile-admin-actions button:hover,
.tile-admin-actions button:focus-visible {
  opacity: 0.58;
  transform: translateY(-1px);
}

.tile-admin-actions button:disabled {
  cursor: default;
  opacity: 0.22;
  transform: none;
}

.tile-copy-dark {
  left: 50%;
  right: auto;
  align-items: center;
  text-align: center;
  font-family: var(--display-serif);
  font-weight: 600;
  letter-spacing: 0;
}

.tile-copy-dark strong {
  font-family: var(--display-serif);
  font-size: clamp(16.64px, 1.728vw, 32px);
  font-weight: 600;
}

.tile-copy-dark span {
  font-size: clamp(3.584px, 0.3584vw, 6.144px);
}

.press-word {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: start center;
  padding-top: clamp(18px, 2vw, 34px);
  color: var(--black);
  font-family: var(--display-serif);
  font-weight: 600;
  font-size: clamp(64px, 9vw, 180px);
  line-height: 0.8;
  transform: scaleX(1.08);
  pointer-events: none;
}

@keyframes introTitleLayer {
  0% {
    opacity: 1;
    transform: scaleX(1) scaleY(1.02) translateZ(0);
  }

  100% {
    opacity: 1;
    transform: scaleX(1) scaleY(1.02) translateZ(0);
  }
}

@keyframes introLetterExpand {
  0% {
    opacity: 0;
    transform: translate3d(var(--intro-letter-from, 0), 0, 0) scaleX(calc(var(--intro-letter-scale-x) * 0.52));
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scaleX(var(--intro-letter-scale-x));
  }
}

@keyframes introSubtitleAppear {
  0%,
  100% {
    opacity: 0.72;
    filter: blur(0);
  }
}

@keyframes introSubtitleRise {
  0% {
    clip-path: inset(100% calc(-1 * var(--intro-subtitle-reveal-bleed)) 0 calc(-1 * var(--intro-subtitle-reveal-bleed)));
    transform: translate3d(var(--intro-subtitle-shift-x), 13px, 0) scaleX(1);
  }

  100% {
    clip-path: inset(0 calc(-1 * var(--intro-subtitle-reveal-bleed)) 0 calc(-1 * var(--intro-subtitle-reveal-bleed)));
    transform: translate3d(var(--intro-subtitle-shift-x), 0, 0) scaleX(1);
  }
}

@keyframes introSubtitleOut {
  0% {
    opacity: 0.72;
    filter: blur(0);
    clip-path: inset(0 calc(-1 * var(--intro-subtitle-reveal-bleed)) 0 calc(-1 * var(--intro-subtitle-reveal-bleed)));
    transform: translate3d(var(--intro-subtitle-shift-x), 0, 0) scaleX(1);
  }

  100% {
    opacity: 0;
    filter: blur(8px);
    clip-path: inset(0 calc(-1 * var(--intro-subtitle-reveal-bleed)) 100% calc(-1 * var(--intro-subtitle-reveal-bleed)));
    transform: translate3d(var(--intro-subtitle-shift-x), -8px, 0) scaleX(0.84);
  }
}

@keyframes introWordExitInPlace {
  0% {
    opacity: 1;
    filter: blur(0);
  }

  100% {
    opacity: 0;
    filter: blur(8px);
  }
}

@keyframes introTitleExitInPlace {
  0% {
    opacity: 1;
    letter-spacing: var(--intro-title-spacing);
  }

  100% {
    opacity: 0;
    letter-spacing: var(--intro-title-spacing);
  }
}

@keyframes introLetterCollapseOut {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scaleX(var(--intro-letter-scale-x));
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--intro-letter-from, 0), 0, 0) scaleX(calc(var(--intro-letter-scale-x) * 0.52));
  }
}

@keyframes introTitleSpacingCollapse {
  0% {
    letter-spacing: var(--intro-title-spacing);
  }

  8% {
    letter-spacing: calc(var(--intro-title-spacing) * 0.86);
  }

  16% {
    letter-spacing: calc(var(--intro-title-spacing) * 0.72);
  }

  24% {
    letter-spacing: calc(var(--intro-title-spacing) * 0.58);
  }

  32% {
    letter-spacing: calc(var(--intro-title-spacing) * 0.45);
  }

  40% {
    letter-spacing: calc(var(--intro-title-spacing) * 0.34);
  }

  48% {
    letter-spacing: calc(var(--intro-title-spacing) * 0.25);
  }

  56% {
    letter-spacing: calc(var(--intro-title-spacing) * 0.18);
  }

  64% {
    letter-spacing: calc(var(--intro-title-spacing) * 0.12);
  }

  72% {
    letter-spacing: calc(var(--intro-title-spacing) * 0.075);
  }

  80% {
    letter-spacing: calc(var(--intro-title-spacing) * 0.04);
  }

  88% {
    letter-spacing: calc(var(--intro-title-spacing) * 0.018);
  }

  94% {
    letter-spacing: calc(var(--intro-title-spacing) * 0.006);
  }

  100% {
    letter-spacing: 0;
  }
}

@keyframes introWordFlyToHeader {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: scaleX(1) scaleY(1.02);
  }

  8% {
    transform:
      translate3d(
        calc(-9vw + clamp(11.52px, 1.35vw, 27.72px)),
        calc(-9vh + clamp(3.24px, 0.45vw, 8.28px)),
        0
      )
      scale(0.847, 0.864);
  }

  16% {
    transform:
      translate3d(
        calc(-17vw + clamp(21.76px, 2.55vw, 52.36px)),
        calc(-17vh + clamp(6.12px, 0.85vw, 15.64px)),
        0
      )
      scale(0.711, 0.725);
  }

  24% {
    transform:
      translate3d(
        calc(-24.5vw + clamp(31.36px, 3.675vw, 75.46px)),
        calc(-24.5vh + clamp(8.82px, 1.225vw, 22.54px)),
        0
      )
      scale(0.584, 0.595);
  }

  32% {
    transform:
      translate3d(
        calc(-31vw + clamp(39.68px, 4.65vw, 95.48px)),
        calc(-31vh + clamp(11.16px, 1.55vw, 28.52px)),
        0
      )
      scale(0.473, 0.482);
  }

  40% {
    transform:
      translate3d(
        calc(-36.5vw + clamp(46.72px, 5.475vw, 112.42px)),
        calc(-36.5vh + clamp(13.14px, 1.825vw, 33.58px)),
        0
      )
      scale(0.38, 0.387);
  }

  48% {
    filter: blur(0);
    transform:
      translate3d(
        calc(-40.5vw + clamp(51.84px, 6.075vw, 124.74px)),
        calc(-40.5vh + clamp(14.58px, 2.025vw, 37.26px)),
        0
      )
      scale(0.312, 0.318);
  }

  56% {
    transform:
      translate3d(
        calc(-43.75vw + clamp(56px, 6.5625vw, 134.75px)),
        calc(-43.75vh + clamp(15.75px, 2.1875vw, 40.25px)),
        0
      )
      scale(0.256, 0.261);
  }

  64% {
    transform:
      translate3d(
        calc(-46.25vw + clamp(59.2px, 6.9375vw, 142.45px)),
        calc(-46.25vh + clamp(16.65px, 2.3125vw, 42.55px)),
        0
      )
      scale(0.214, 0.218);
  }

  72% {
    transform:
      translate3d(
        calc(-48vw + clamp(61.44px, 7.2vw, 147.84px)),
        calc(-48vh + clamp(17.28px, 2.4vw, 44.16px)),
        0
      )
      scale(0.184, 0.188);
  }

  80% {
    transform:
      translate3d(
        calc(-49.1vw + clamp(62.848px, 7.365vw, 151.228px)),
        calc(-49.1vh + clamp(17.676px, 2.455vw, 45.172px)),
        0
      )
      scale(0.165, 0.168);
  }

  88% {
    transform:
      translate3d(
        calc(-49.7vw + clamp(63.616px, 7.455vw, 153.076px)),
        calc(-49.7vh + clamp(17.892px, 2.485vw, 45.724px)),
        0
      )
      scale(0.155, 0.158);
  }

  94% {
    transform:
      translate3d(
        calc(-49.95vw + clamp(63.936px, 7.4925vw, 153.846px)),
        calc(-49.95vh + clamp(17.982px, 2.4975vw, 45.954px)),
        0
      )
      scale(0.151, 0.154);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform:
      translate3d(
        calc(-50vw + clamp(64px, 7.5vw, 154px)),
        calc(-50vh + clamp(18px, 2.5vw, 46px)),
        0
      )
      scale(0.15, 0.153);
  }
}

@keyframes introWordFlyToHeaderMobile {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: rotate(-90deg) scaleX(1) scaleY(1.02);
  }

  8% {
    transform:
      translate3d(calc(-9vw + 15.48px), calc(-9svh + 5.76px), 0)
      rotate(-73.8deg)
      scale(0.894, 0.912);
  }

  16% {
    transform:
      translate3d(calc(-17vw + 29.24px), calc(-17svh + 10.88px), 0)
      rotate(-59.4deg)
      scale(0.799, 0.815);
  }

  24% {
    transform:
      translate3d(calc(-24.5vw + 42.14px), calc(-24.5svh + 15.68px), 0)
      rotate(-45.9deg)
      scale(0.711, 0.725);
  }

  32% {
    transform:
      translate3d(calc(-31vw + 53.32px), calc(-31svh + 19.84px), 0)
      rotate(-34.2deg)
      scale(0.634, 0.647);
  }

  40% {
    transform:
      translate3d(calc(-36.5vw + 62.78px), calc(-36.5svh + 23.36px), 0)
      rotate(-24.3deg)
      scale(0.569, 0.581);
  }

  48% {
    filter: blur(0);
    transform:
      translate3d(calc(-40.5vw + 69.66px), calc(-40.5svh + 25.92px), 0)
      rotate(-17.1deg)
      scale(0.522, 0.533);
  }

  56% {
    transform:
      translate3d(calc(-43.75vw + 75.25px), calc(-43.75svh + 28px), 0)
      rotate(-11.25deg)
      scale(0.484, 0.493);
  }

  64% {
    transform:
      translate3d(calc(-46.25vw + 79.55px), calc(-46.25svh + 29.6px), 0)
      rotate(-6.75deg)
      scale(0.454, 0.463);
  }

  72% {
    transform:
      translate3d(calc(-48vw + 82.56px), calc(-48svh + 30.72px), 0)
      rotate(-3.6deg)
      scale(0.434, 0.442);
  }

  80% {
    transform:
      translate3d(calc(-49.1vw + 84.452px), calc(-49.1svh + 31.424px), 0)
      rotate(-1.62deg)
      scale(0.421, 0.429);
  }

  88% {
    transform:
      translate3d(calc(-49.7vw + 85.484px), calc(-49.7svh + 31.808px), 0)
      rotate(-0.54deg)
      scale(0.414, 0.422);
  }

  94% {
    transform:
      translate3d(calc(-49.95vw + 85.914px), calc(-49.95svh + 31.968px), 0)
      rotate(-0.09deg)
      scale(0.411, 0.419);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform:
      translate3d(calc(-50vw + 86px), calc(-50svh + 32px), 0)
      rotate(0deg)
      scale(0.41, 0.4182);
  }
}

@keyframes introLetterHeaderSettle {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scaleX(1);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scaleX(1);
  }
}

@keyframes introWordBehindCards {
  0% {
    opacity: 1;
    transform: scaleX(1) scaleY(1.02);
  }

  100% {
    opacity: 0;
    transform: scaleX(1) scaleY(1.02);
  }
}

@keyframes introRealCardStackIn {
  0% {
    opacity: 1;
    transform:
      translate3d(
        calc(var(--intro-card-stack-x, 0px) + var(--intro-card-start-x, 0vw)),
        calc(var(--intro-card-stack-y, 0px) + var(--intro-card-start-y, 78vh)),
        0
      )
      rotate(0deg)
      scale(var(--intro-card-scale, 0.82));
  }

  66% {
    opacity: 1;
    transform:
      translate3d(
        calc(var(--intro-card-stack-x, 0px) + var(--intro-card-drift-x, 0vw)),
        calc(var(--intro-card-stack-y, 0px) + var(--intro-card-drift-y, -18vh)),
        0
      )
      rotate(0deg)
      scale(var(--intro-card-scale, 0.82));
  }

  100% {
    opacity: 1;
    transform:
      translate3d(
        calc(var(--intro-card-stack-x, 0px) + var(--intro-card-drift-x, 0vw)),
        calc(var(--intro-card-stack-y, 0px) + var(--intro-card-drift-y, -18vh)),
        0
      )
      rotate(0deg)
      scale(var(--intro-card-scale, 0.82));
  }
}

@keyframes introRealCardSettle {
  0% {
    opacity: 1;
    transform:
      translate3d(
        calc(var(--intro-card-stack-x, 0px) + var(--intro-card-drift-x, 0vw)),
        calc(var(--intro-card-stack-y, 0px) + var(--intro-card-drift-y, -18vh)),
        0
      )
      rotate(0deg)
      scale(var(--intro-card-scale, 0.82));
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

@keyframes tileReveal {
  0% {
    opacity: 0;
    transform: translate3d(0, 18vh, 0) scale(0.965);
    filter: blur(14px);
  }

  38% {
    opacity: 1;
    filter: blur(5px);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes filmsDirectCardFlyIn {
  0% {
    opacity: 0;
    transform: translate3d(0, var(--gallery-switch-start-y, 112vh), 0) scale(0.74);
    filter: blur(10px);
  }

  /* Blur must be gone by mid-flight: the chrome returns at ~1072ms and a
     lingering sub-2px blur on the nearly-settled cards reads as a glitch */
  42% {
    opacity: 1;
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes gallerySwitchIntroCardFlyIn {
  0% {
    opacity: 1;
    transform:
      translate3d(
        calc(var(--intro-card-stack-x, 0px) + var(--intro-card-start-x, 0px)),
        calc(var(--intro-card-stack-y, 0px) + var(--intro-card-start-y, 105vh)),
        0
      )
      rotate(0deg)
      scale(var(--intro-card-scale, 0.82));
    filter: blur(10px);
  }

  42% {
    opacity: 1;
    filter: blur(3px);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    filter: blur(0);
  }
}

@keyframes filmsDirectMediaSettle {
  0% {
    opacity: 0.92;
    transform: scale(1.08);
    filter: brightness(1.08) saturate(0.9);
  }

  100% {
    opacity: 1;
    transform: scale(1.01);
    filter: var(--tile-filter, saturate(0.93) contrast(1.06));
  }
}

@keyframes homeCardFlowExitUp {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }

  52% {
    opacity: 0.88;
    filter: blur(1.4px);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, -150vh, 0) scale(0.88);
    filter: blur(7px);
  }
}

@keyframes homeCardFlowReturnFromTop {
  0% {
    opacity: 0;
    transform: translate3d(0, -120vh, 0) scale(0.9);
    filter: blur(7px);
  }

  /* Blur must be gone by mid-flight: the brand returns at ~644ms and a
     lingering sub-2px blur on the nearly-settled cards reads as a glitch */
  46% {
    opacity: 1;
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes homeFooterFlowReturn {
  0% {
    opacity: 0;
    transform: translate3d(0, 42vh, 0) scale(0.98);
    filter: blur(7px);
  }

  44% {
    opacity: 1;
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes tileImageSettle {
  0% {
    opacity: 0;
    transform: scale(1.12) translateY(5vh);
    filter: blur(12px) brightness(1.12) saturate(0.8);
  }

  45% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: scale(1.01) translateY(0);
    filter: var(--tile-filter, saturate(0.93) contrast(1.06));
  }
}

@keyframes tileCopyRise {
  0% {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(8px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-revealing .tile,
  .intro-revealing .tile img,
  .intro-revealing .tile video,
  .intro-revealing .tile-copy,
  .films-direct-revealing .tile,
  .films-direct-revealing .tile img,
  .films-direct-revealing .tile video,
  .films-direct-revealing .tile-copy,
  .project-open:not(.project-transitioning) .project-view,
  .project-open:not(.project-transitioning) .project-image,
  .project-open:not(.project-transitioning) .project-copy > *,
  body.mobile-project-opening.project-open .project-view,
  body.mobile-project-opening.project-open .project-copy,
  body.mobile-project-opening.project-open .project-image,
  .project-carousel-track {
    animation: none;
  }

  .intro-revealing .tile {
    transform: none;
    filter: none;
  }

  .films-direct-revealing .tile {
    transform: none;
    filter: none;
  }

}

.project-view {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: block;
  height: 100vh;
  min-height: 100vh;
  color: var(--ink);
  background: var(--white);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: auto;
  scrollbar-width: none;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  transition: opacity 208ms ease, visibility 208ms ease;
}

body[data-active-gallery="films"] .project-view {
  color: var(--white);
  background: var(--black);
}

.project-view::-webkit-scrollbar {
  display: none;
}

.project-copy {
  position: relative;
  z-index: 6;
  flex: 0 0 min(42vw, 560px);
  width: min(42vw, 560px);
  min-height: 100vh;
  display: grid;
  align-content: end;
  justify-items: start;
  padding: 0 clamp(28px, 4.6vw, 82px) clamp(96px, 7.8vw, 150px);
  color: #fff;
  background: var(--white);
  mix-blend-mode: difference;
}

.project-copy .adaptive-letter {
  color: inherit;
  mix-blend-mode: normal;
}

body[data-active-gallery="films"] .project-copy {
  color: var(--white);
  background: var(--black);
}

.project-location {
  position: absolute;
  left: clamp(28px, 4.6vw, 82px);
  top: 43.8%;
  transform: translateY(-50%);
  margin: 0;
  display: grid;
  justify-items: start;
  gap: 1px;
  text-align: left;
}

.project-location strong {
  font-size: clamp(16px, 1.15vw, 24px);
  line-height: 1;
}

.project-location span {
  font-family: var(--serif);
  font-size: clamp(15px, 1.05vw, 23px);
  font-weight: 600;
  line-height: 1;
}

.project-copy h1 {
  max-width: min(100%, 13.5ch);
  margin: 0;
  font-family: var(--display-serif);
  font-size: clamp(82px, 8.9vw, 178px);
  font-style: normal;
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: 0;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
}

.project-copy h1 span {
  display: inline-block;
  font-size: 0.58em;
  transform: translateY(-0.03em);
}

.project-copy h1 em {
  font-style: normal;
}

.project-image {
  --rail-gap: clamp(1.5px, 0.12vw, 2.5px);
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  margin: -100vh 0 0;
  height: auto;
  min-height: 0;
  display: block;
  padding: 0 var(--rail-gap) var(--rail-gap);
  overflow: visible;
  direction: ltr;
}

.project-carousel-track {
  height: auto;
  display: block;
  column-count: 3;
  column-gap: var(--rail-gap);
  width: 100%;
  padding-top: calc(100vh + var(--rail-gap));
  contain: layout paint style;
}

.project-carousel-item {
  --project-media-aspect: 3 / 4;
  width: 100%;
  height: auto;
  margin: 0 0 var(--rail-gap);
  aspect-ratio: var(--project-media-aspect);
  min-height: 0;
  overflow: hidden;
  break-inside: avoid;
  page-break-inside: avoid;
  direction: ltr;
  contain: layout paint;
  transform: translateZ(0);
  backface-visibility: hidden;
}

body[data-active-gallery="films"] .project-carousel-item {
  background: var(--black);
}

@media (min-width: 981px) {
  body[data-active-gallery="photography"] .project-carousel-track {
    display: block;
    column-count: auto;
    column-gap: normal;
  }

  body[data-active-gallery="photography"] .project-carousel-track .project-carousel-item:not(.is-project-intro-media) {
    width: 100%;
    margin: 0;
    break-inside: auto;
    page-break-inside: auto;
  }

  body[data-active-gallery="films"] .project-carousel-track {
    --rail-gap: clamp(1.5px, 0.12vw, 2.5px);

    display: grid;
    column-count: auto;
    column-gap: normal;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rail-gap);
    row-gap: var(--rail-gap);
    column-gap: var(--rail-gap);
    align-items: start;
    padding-top: calc(100vh + var(--rail-gap));
  }

  body[data-active-gallery="films"] .project-carousel-track .project-carousel-item:not(.is-project-intro-media) {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
    break-inside: auto;
    page-break-inside: auto;
  }
}

.project-masonry-columns {
  display: grid;
  grid-template-columns: repeat(var(--project-masonry-columns, 4), minmax(0, 1fr));
  gap: var(--rail-gap);
  align-items: start;
}

.project-masonry-column {
  display: flex;
  flex-direction: column;
  gap: var(--rail-gap);
  min-width: 0;
}

@media (min-width: 981px) {
  /* The name + details moved onto the white title page (first wagon of the
     train), so the overlay copy column is hidden on desktop photography */
  body[data-active-gallery="photography"] .project-copy {
    display: none;
  }

  /* Without the copy column's 100vh of flow, the figure's -100vh pull-up trick
     would drag the carousel above the viewport */
  body[data-active-gallery="photography"] .project-image {
    margin-top: 0;
  }

  body[data-active-gallery="photography"] .project-hero-title-wagon {
    background: var(--white);
  }

  body[data-active-gallery="photography"] .project-hero-title-card {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: clamp(26px, 4.6vh, 56px);
    padding: 0 clamp(20px, 2.4vw, 48px);
    text-align: center;
    color: var(--black);
  }

  /* The couple story: a small gray italic passage ABOVE the name */
  body[data-active-gallery="photography"] .project-hero-title-details {
    order: -1;
    max-width: 40ch;
    margin: 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(14px, 1vw, 18px);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.01em;
    color: rgba(17, 17, 17, 0.55);
    text-transform: none;
  }

  /* The name carries the page: oversized display italic */
  body[data-active-gallery="photography"] .project-hero-title-name {
    font-family: var(--display-serif);
    font-size: clamp(56px, 6.2vw, 128px);
    font-style: normal;
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: -0.01em;
    max-width: 100%;
    text-wrap: balance;
    overflow-wrap: normal;
  }

  body[data-active-gallery="photography"] .project-copy > * {
    transition: opacity 360ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  body[data-active-gallery="photography"].project-photo-copy-hidden .project-copy > * {
    opacity: 0;
    pointer-events: none;
  }

  body[data-active-gallery="photography"] .project-carousel-track.has-project-thumbnail-picker {
    display: block;
    column-count: auto;
    column-gap: normal;
  }

  body[data-active-gallery="photography"] .project-carousel-item.is-project-intro-media.has-project-hero-wagons {
    --project-hero-wagon-gap: clamp(48px, 7vw, 150px);
    --project-hero-wagon-step: calc(50vw + var(--project-hero-wagon-gap));
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    padding: 0;
    box-sizing: border-box;
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* Centered loading bar shown while the whole gallery force-loads */
  body[data-active-gallery="photography"] .project-gallery-progress {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    background: var(--white);
  }

  body[data-active-gallery="photography"] .project-gallery-progress-bar {
    width: min(240px, 40vw);
    height: 2px;
    background: rgba(17, 17, 17, 0.14);
    border-radius: 999px;
    overflow: hidden;
  }

  body[data-active-gallery="photography"] .project-gallery-progress-bar span {
    display: block;
    width: 0%;
    height: 100%;
    background: var(--black);
    border-radius: inherit;
    transition: width 100ms linear;
  }

  body[data-active-gallery="photography"] .project-hero-wagon-stage {
    position: relative;
    z-index: 1;
    width: max-content;
    height: min(84vh, 1200px);
    display: flex;
    gap: var(--project-hero-wagon-gap);
    align-items: center;
  }

  body[data-active-gallery="photography"] .project-hero-wagon-stage.is-auto-gliding {
    animation: projectHeroWagonTrain var(--project-hero-wagon-duration, 6800ms) linear both;
    will-change: transform;
  }

  body[data-active-gallery="photography"] .project-hero-wagon {
    flex: 0 0 auto;
    width: auto;
    height: min(84vh, 1200px);
    aspect-ratio: var(--project-media-aspect, 3 / 4);
    display: grid;
    place-items: center;
    overflow: hidden;
    opacity: 1;
    transform: translateZ(0) scale(1);
    transition:
      opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 680ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  body[data-active-gallery="photography"] .project-hero-wagon.is-active {
    height: min(84vh, 1200px);
    opacity: 1;
    transform: translateZ(0) scale(1);
  }

  body[data-active-gallery="photography"] .project-hero-wagon img,
  body[data-active-gallery="photography"] .project-hero-wagon video,
  body[data-active-gallery="photography"] .project-hero-wagon .project-youtube-poster {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain !important;
    object-position: center !important;
    background: transparent;
  }

  @keyframes projectHeroWagonTrain {
    0% {
      transform: translate3d(0, 0, 0);
    }

    100% {
      transform: translate3d(calc(-1 * var(--project-hero-wagon-step)), 0, 0);
    }
  }

  .project-hero-carousel-nav {
    position: absolute;
    inset: 0;
    z-index: 4;
    height: 100vh;
    /* Arrows are hidden visually but stay in the DOM: keyboard navigation
       clicks these buttons programmatically */
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(16px, 2.4vw, 42px);
    pointer-events: none;
  }

  .project-hero-carousel-button {
    position: relative;
    width: clamp(42px, 3.2vw, 58px);
    aspect-ratio: 1;
    border: 1px solid rgba(17, 17, 17, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.42);
    color: rgba(17, 17, 17, 0.82);
    cursor: pointer;
    pointer-events: auto;
    opacity: 0.72;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition:
      opacity 220ms ease,
      transform 360ms cubic-bezier(0.16, 1, 0.3, 1),
      background 220ms ease,
      border-color 220ms ease;
  }

  .project-hero-carousel-button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(11px, 0.92vw, 16px);
    aspect-ratio: 1;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
  }

  .project-hero-carousel-button.is-prev::before {
    transform: translate(-36%, -50%) rotate(225deg);
  }

  .project-hero-carousel-button.is-next::before {
    transform: translate(-64%, -50%) rotate(45deg);
  }

  .project-hero-carousel-button:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.68);
    border-color: rgba(17, 17, 17, 0.28);
    transform: scale(1.06);
  }

  .project-hero-carousel-button:active {
    transform: scale(0.96);
  }

  .project-thumbnail-strip {
    position: absolute;
    /* The strip starts at the right of the thumbs toggle and clips there —
       scrolled thumbnails never slide underneath the button */
    left: clamp(64px, 6vw, 110px);
    right: 0;
    bottom: 10px;
    z-index: 3;
    width: auto;
    max-width: none;
    display: flex;
    gap: clamp(4px, 0.5vw, 9px);
    align-items: center;
    /* Vertical breathing room so the outer blue outline isn't clipped */
    padding: 4px clamp(12px, 1.7vw, 30px) 4px 4px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Hidden until the corner toggle opens it */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 12px, 0);
    transition:
      opacity 420ms ease,
      transform 680ms cubic-bezier(0.16, 1, 0.3, 1),
      visibility 420ms ease;
  }

  .project-thumbnail-strip::-webkit-scrollbar {
    display: none;
  }

  .project-thumbnail-button {
    position: relative;
    /* As tall as the white band under the large photos allows (tiny kiss of the
       photo edge tolerated on short windows) */
    flex: 0 0 auto;
    height: clamp(56px, calc((100vh - min(84vh, 1200px)) / 2 - 12px), 120px);
    width: auto;
    aspect-ratio: 3 / 4;
    display: block;
    padding: 0;
    border: 0;
    border-radius: 5px;
    overflow: hidden;
    background: transparent;
    cursor: pointer;
    transform: translateZ(0);
  }

  .project-thumbnail-button img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    filter: saturate(0.96) contrast(1.02);
    transform: scale(1.012);
    transition:
      opacity 220ms ease,
      transform 520ms cubic-bezier(0.16, 1, 0.3, 1),
      filter 520ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .project-thumbnail-button::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(17, 17, 17, 0);
    border-radius: inherit;
    pointer-events: none;
    transition:
      border-color 220ms ease,
      inset 220ms ease;
  }

  .project-thumbnail-button:hover img {
    filter: saturate(1) contrast(1.04);
    transform: scale(1.045);
  }

  .project-thumbnail-button.is-active img {
    opacity: 0.68;
  }

  /* Selected thumb: blue frame drawn OUTSIDE the thumbnail */
  .project-thumbnail-button.is-active {
    outline: 2px solid #2f6bff;
    outline-offset: 2px;
  }
}

.project-carousel-item.is-project-intro-media {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: calc(100vw - min(42vw, 560px));
  height: 100vh;
  aspect-ratio: auto;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.04) 5%,
    rgba(0, 0, 0, 0.16) 10%,
    rgba(0, 0, 0, 0.36) 18%,
    rgba(0, 0, 0, 0.62) 29%,
    rgba(0, 0, 0, 0.84) 42%,
    rgba(0, 0, 0, 0.96) 54%,
    #000 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.04) 5%,
    rgba(0, 0, 0, 0.16) 10%,
    rgba(0, 0, 0, 0.36) 18%,
    rgba(0, 0, 0, 0.62) 29%,
    rgba(0, 0, 0, 0.84) 42%,
    rgba(0, 0, 0, 0.96) 54%,
    #000 100%
  );
}

@media (min-width: 981px) {
  body[data-active-gallery="photography"] .project-carousel-item.is-project-intro-media {
    right: auto;
    left: 0;
    width: 100vw;
  }

  body[data-active-gallery="photography"] .project-carousel-item.is-project-intro-media img,
  body[data-active-gallery="photography"] .project-carousel-item.is-project-intro-media video,
  body[data-active-gallery="photography"] .project-carousel-item.is-project-intro-media .project-youtube-poster {
    object-fit: contain;
    object-position: center;
    background: transparent;
  }

  .project-carousel-item.is-project-intro-media.is-project-video-vertical video {
    width: min(50vw, 76vh);
    max-width: 100%;
    height: 100%;
    margin-left: auto;
    object-fit: cover;
    object-position: center;
    background: transparent;
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.01) 4%,
      rgba(0, 0, 0, 0.03) 8%,
      rgba(0, 0, 0, 0.07) 12%,
      rgba(0, 0, 0, 0.13) 16%,
      rgba(0, 0, 0, 0.22) 20%,
      rgba(0, 0, 0, 0.34) 25%,
      rgba(0, 0, 0, 0.48) 30%,
      rgba(0, 0, 0, 0.62) 36%,
      rgba(0, 0, 0, 0.74) 42%,
      rgba(0, 0, 0, 0.84) 48%,
      rgba(0, 0, 0, 0.92) 54%,
      rgba(0, 0, 0, 0.97) 61%,
      #000 70%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.01) 4%,
      rgba(0, 0, 0, 0.03) 8%,
      rgba(0, 0, 0, 0.07) 12%,
      rgba(0, 0, 0, 0.13) 16%,
      rgba(0, 0, 0, 0.22) 20%,
      rgba(0, 0, 0, 0.34) 25%,
      rgba(0, 0, 0, 0.48) 30%,
      rgba(0, 0, 0, 0.62) 36%,
      rgba(0, 0, 0, 0.74) 42%,
      rgba(0, 0, 0, 0.84) 48%,
      rgba(0, 0, 0, 0.92) 54%,
      rgba(0, 0, 0, 0.97) 61%,
      #000 70%
    );
    transform: translate3d(0, 5vh, 0) scale(1.38);
  }
}

body[data-active-gallery="films"] .project-carousel-item.is-project-intro-media::after {
  content: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: transparent;
}

.project-image img,
.project-image video,
.project-image iframe,
.project-youtube-player,
.project-youtube-poster {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.project-image img,
.project-image video,
.project-youtube-poster {
  object-fit: cover;
  object-position: center;
  filter: saturate(0.98) contrast(1.03);
}

.project-carousel-item .project-youtube-poster {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center;
}

.project-youtube-player {
  position: relative;
  overflow: hidden;
  background: #000;
  color: var(--white);
  isolation: isolate;
}

.project-youtube-player iframe {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  opacity: 0;
  animation: youtubeFrameIn 416ms cubic-bezier(0.16, 1, 0.3, 1) 72ms both;
}

.project-youtube-player:not(.is-playing) iframe {
  opacity: 0;
  pointer-events: none;
  animation: none;
}

.project-youtube-poster {
  transition:
    opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 740ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 740ms cubic-bezier(0.16, 1, 0.3, 1);
}

.project-youtube-player::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.34) 72%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.28));
  opacity: 0.78;
  pointer-events: none;
  transition: opacity 416ms cubic-bezier(0.16, 1, 0.3, 1);
}

body[data-active-gallery="films"] .tile:has(> .project-youtube-player)::after,
body[data-active-gallery="films"] .tile > .project-youtube-player::after {
  display: none;
}

.project-youtube-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: clamp(74px, 7vw, 138px);
  aspect-ratio: 1;
  height: auto;
  padding: 0;
  color: var(--white);
  border: 0;
  background: transparent;
  transform: translate3d(-50%, -50%, 0);
  transition:
    opacity 360ms ease,
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1),
    color 240ms ease;
}

.project-youtube-play::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28%;
  height: 34%;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: translate3d(-38%, -50%, 0);
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  filter: drop-shadow(0 2px 16px rgba(0, 0, 0, 0.42));
  transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover answers the way the rest of the site does: the mark takes a step the
   way it points and grows a touch, rather than a control lighting up */
.project-youtube-play:hover::before,
.project-youtube-play:focus-visible::before {
  transform: translate3d(-26%, -50%, 0) scale(1.14);
}

.project-youtube-play:focus-visible {
  outline: 0;
}

.project-youtube-pause {
  position: absolute;
  left: clamp(10px, 1.1vw, 18px);
  bottom: clamp(9px, 0.9vw, 16px);
  z-index: 4;
  width: clamp(46px, 4vw, 62px);
  height: clamp(34px, 3vw, 44px);
  display: grid;
  place-items: center;
  color: transparent;
  border: 0;
  border-radius: 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 4px, 0);
  transition:
    opacity 180ms ease,
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
    color 180ms ease;
}

.project-youtube-pause::before,
.project-youtube-pause::after {
  content: none;
}

.project-youtube-pause::before {
  transform: translateX(-70%);
}

.project-youtube-pause::after {
  transform: translateX(70%);
}

.project-youtube-pause:hover {
  color: transparent;
  transform: translate3d(0, 0, 0);
}

.project-youtube-player.is-playing .project-youtube-poster {
  opacity: 0;
  transform: scale(1.045);
  filter: saturate(0.9) contrast(1.04) blur(8px);
}

.project-youtube-player.is-playing::after,
.project-youtube-player.is-playing .project-youtube-play {
  opacity: 0;
  pointer-events: none;
}

.project-youtube-player[data-linked-video-started="1"]:not(.is-linked-video-paused):hover .project-youtube-pause {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}

.project-youtube-player.is-linked-video-paused iframe {
  opacity: 0;
  pointer-events: none;
  animation: none;
}

.project-youtube-player.is-linked-video-paused .project-youtube-poster {
  opacity: 1;
  transform: none;
  filter: saturate(0.98) contrast(1.03);
}

.project-youtube-player.is-linked-video-paused::after {
  opacity: 0.78;
}

.project-youtube-player.is-linked-video-paused .project-youtube-play {
  z-index: 5;
  opacity: 1;
  pointer-events: auto;
}

.project-youtube-player.is-linked-video-paused .project-youtube-pause {
  opacity: 0;
  pointer-events: none;
}

@keyframes youtubeFrameIn {
  0% {
    opacity: 0;
    transform: scale(1.012);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes youtubeTallCardFrameIn {
  0% {
    opacity: 0;
    transform: scale(0.506);
  }

  100% {
    opacity: 1;
    transform: scale(0.5);
  }
}

.project-youtube-fallback {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  padding: 9px 11px;
  color: var(--white);
  background: rgba(0, 0, 0, 0.62);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 208ms ease;
}

.is-youtube-playing .project-youtube-fallback {
  opacity: 1;
  pointer-events: auto;
}

.menu-overlay {
  --menu-control-color: #050505;
  --menu-control-muted-color: rgba(5, 5, 5, 0.52);
  --menu-photo-accent-color: #f2c9d4;
  --menu-film-accent-color: #c9e8dd;
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  color: var(--black);
  background: var(--white);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  contain: layout paint style;
  isolation: isolate;
  transition: opacity 192ms ease, transform 240ms ease, visibility 192ms ease;
}

body[data-active-gallery="films"] .menu-overlay {
  --menu-control-color: #fff;
  --menu-control-muted-color: rgba(255, 255, 255, 0.52);
  color: var(--white);
  background: var(--black);
}

.menu-mounted .menu-overlay {
  display: block;
}

.menu-open.menu-mounted .menu-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  animation: mobileMenuOpenIn 608ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.menu-closing.menu-mounted .menu-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transform: none;
  animation: mobileMenuCloseOut 896ms cubic-bezier(0.7, 0, 0.84, 0) both;
}

.menu-open.menu-mounted .rail-close,
.menu-open.menu-mounted .menu-language,
.menu-open.menu-mounted .contact-word,
.menu-open.menu-mounted .menu-links a,
.menu-open.menu-mounted .menu-gallery-pair,
.menu-open.menu-mounted .menu-links button:not(.menu-gallery-link),
.menu-open.menu-mounted .social-picker,
.menu-open.menu-mounted .menu-app-promo,
.menu-open.menu-mounted .social-links a {
  animation: mobileMenuItemFlyIn 1024ms cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: transform, opacity, filter;
}

.menu-closing.menu-mounted .rail-close,
.menu-closing.menu-mounted .menu-language,
.menu-closing.menu-mounted .contact-word,
.menu-closing.menu-mounted .menu-links a,
.menu-closing.menu-mounted .menu-gallery-pair,
.menu-closing.menu-mounted .menu-links button:not(.menu-gallery-link),
.menu-closing.menu-mounted .social-picker,
.menu-closing.menu-mounted .menu-app-promo,
.menu-closing.menu-mounted .social-links a {
  animation: mobileMenuItemFlyOut 784ms cubic-bezier(0.7, 0, 0.84, 0) both;
  will-change: transform, opacity, filter;
}

.menu-open.menu-mounted .rail-close {
  animation-delay: 0ms;
}

.menu-open.menu-mounted .menu-language {
  animation-delay: 0ms;
}

.menu-open.menu-mounted .contact-word {
  animation-delay: 56ms;
}

.menu-open.menu-mounted .menu-links a:nth-child(1) {
  animation-delay: 112ms;
}

.menu-open.menu-mounted .menu-links a:nth-child(2) {
  animation-delay: 168ms;
}

.menu-open.menu-mounted .menu-gallery-pair {
  animation-delay: 168ms;
}

.menu-open.menu-mounted .menu-links button:not(.menu-gallery-link) {
  animation-delay: 224ms;
}

.menu-open.menu-mounted .social-picker {
  animation-delay: 280ms;
}

.menu-open.menu-mounted .menu-app-promo {
  animation-delay: 336ms;
}

.menu-open.menu-mounted .social-links > a:nth-of-type(1) {
  animation-delay: 392ms;
}

.menu-open.menu-mounted .social-links > a:nth-of-type(2) {
  animation-delay: 448ms;
}

.menu-closing.menu-mounted .rail-close,
.menu-closing.menu-mounted .menu-language,
.menu-closing.menu-mounted .contact-word,
.menu-closing.menu-mounted .menu-links a,
.menu-closing.menu-mounted .menu-gallery-pair,
.menu-closing.menu-mounted .menu-links button:not(.menu-gallery-link),
.menu-closing.menu-mounted .social-picker,
.menu-closing.menu-mounted .menu-app-promo,
.menu-closing.menu-mounted .social-links a {
  animation-delay: 0ms;
}

@keyframes mobileMenuOpenIn {
  0% {
    opacity: 0;
    filter: blur(6px);
  }

  64% {
    opacity: 1;
    filter: blur(1px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes mobileMenuCloseOut {
  0% {
    opacity: 1;
    filter: blur(0);
  }

  52% {
    opacity: 1;
    filter: blur(1px);
  }

  100% {
    opacity: 0;
    filter: blur(7px);
  }
}

@keyframes mobileMenuItemFlyIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 108svh, 0) scale(0.76);
    filter: blur(10px);
  }

  42% {
    opacity: 1;
    filter: blur(2px);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes mobileMenuItemFlyOut {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }

  48% {
    opacity: 1;
    filter: blur(2px);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, 96svh, 0) scale(0.82);
    filter: blur(10px);
  }
}

.menu-language {
  position: absolute;
  top: clamp(26px, 3.1vw, 56px);
  left: clamp(18px, 2.4vw, 42px);
  z-index: 3;
  color: var(--black);
  font-family: var(--sans);
  font-size: clamp(18px, 1.55vw, 30px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

body[data-active-gallery="films"] .menu-overlay .menu-language {
  color: var(--white);
}

.rail-close {
  top: clamp(26px, 3.1vw, 56px);
  right: clamp(18px, 2.4vw, 42px);
  color: var(--black);
}


.menu-overlay .rail-close[data-menu-close] {
  --menu-close-size: clamp(52px, 4.4vw, 82px);
  --menu-close-stroke: clamp(3.4px, 0.28vw, 4.8px);
  z-index: 8;
  top: calc(clamp(26px, 3.1vw, 56px) - 8px);
  right: clamp(22px, 3vw, 56px);
  width: var(--menu-close-size);
  height: var(--menu-close-size);
  display: grid;
  place-items: center;
  padding: 0;
  writing-mode: horizontal-tb;
  transform-origin: center;
  transition:
    opacity 220ms ease,
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 520ms ease;
}

@media (min-width: 641px) {
  .menu-overlay .rail-close[data-menu-close] {
    top: calc(clamp(26px, 3.1vw, 56px) - 5px);
    right: calc(clamp(22px, 3vw, 56px) - 5px);
  }
}

.menu-overlay .rail-close[data-menu-close] span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.menu-overlay .rail-close[data-menu-close]::before,
.menu-overlay .rail-close[data-menu-close]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 88%;
  height: var(--menu-close-stroke);
  background: currentColor;
  border-radius: 999px;
  transform-origin: center;
  transition:
    width 960ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 960ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 420ms ease;
}

.menu-overlay .rail-close[data-menu-close]::before {
  transform: translate(-50%, -50%) rotate(43deg) scaleX(0.92);
}

.menu-overlay .rail-close[data-menu-close]::after {
  width: 64%;
  transform: translate(-50%, -50%) rotate(-43deg) translateX(8%) scaleX(1);
}

.menu-overlay .rail-close[data-menu-close]:is(:hover, :focus-visible) {
  transform: rotate(-1.5deg) scale(1.08);
}

.menu-overlay .rail-close[data-menu-close]:is(:hover, :focus-visible)::before {
  width: 78%;
  transform: translate(-50%, -50%) rotate(38deg) translateX(-3%) scaleX(1);
}

.menu-overlay .rail-close[data-menu-close]:is(:hover, :focus-visible)::after {
  width: 92%;
  transform: translate(-50%, -50%) rotate(-48deg) translateX(2%) scaleX(0.94);
}

.menu-overlay .rail-close[data-menu-close]:active {
  transform: rotate(0deg) scale(0.94);
}

body[data-active-gallery="films"] .menu-overlay .rail-close {
  color: var(--white);
}

.menu-main {
  min-height: 100vh;
  display: grid;
  align-content: center;
  justify-items: end;
  gap: clamp(26px, 3.1vw, 56px);
  padding: clamp(90px, 8vw, 150px) clamp(112px, 7.8vw, 160px) clamp(94px, 7vw, 140px) clamp(40px, 4vw, 80px);
}

@media (min-width: 641px) {
  body:not(.admin-page) .menu-main {
    align-content: stretch;
    /* the slack pools in the third track instead of being spread across every
       auto row, which drops the WRITE US group onto the bottom edge */
    grid-template-rows: auto auto 1fr auto auto auto;
    gap: 0;
    padding-top: clamp(150px, 17vh, 226px);
    padding-bottom: clamp(52px, 4.8vh, 82px);
  }

  body:not(.admin-page) .contact-word {
    grid-row: 1;
    align-self: start;
    justify-self: end;
  }

  body:not(.admin-page) .menu-links {
    display: contents;
  }

  body:not(.admin-page) .menu-links a {
    grid-row: 2;
    align-self: start;
    justify-self: end;
    font-size: clamp(52px, 5.2vw, 104px);
    line-height: 0.82;
    margin-top: clamp(14px, 1.7vh, 26px);
  }

  body:not(.admin-page) .menu-gallery-pair {
    grid-row: 2;
    align-self: start;
    justify-self: end;
    margin-top: clamp(14px, 1.7vh, 26px);
  }

  /* WRITE US and the social links sit bottom-left, opposite the portfolio
     column, with WRITE US given the same weight as PORTFOLIO */
  body:not(.admin-page) .menu-links button {
    grid-row: 4;
    align-self: end;
    justify-self: start;
    margin-bottom: clamp(8px, 1.2vh, 18px);
    font-size: clamp(52px, 5.2vw, 104px);
    line-height: 0.82;
    text-align: left;
  }

  body:not(.admin-page) .social-links {
    grid-row: 5;
    align-self: start;
    justify-self: start;
    justify-content: start;
    margin-top: clamp(12px, 1.5vh, 24px);
  }

  /* the child combinator keeps this off the links inside the picker dropdown,
     which carry their own smaller size */
  body:not(.admin-page) .social-links > a,
  body:not(.admin-page) .social-picker-trigger {
    font-size: clamp(14px, 1.4vw, 26.6px);
  }

  /* the pickers open under their own edge now that they hang on the left */
  body:not(.admin-page) .social-links .social-picker-options {
    right: auto;
    left: 0;
    justify-items: start;
  }

  body:not(.admin-page) .menu-app-promo {
    grid-row: 6;
    align-self: start;
    justify-self: end;
    margin-top: calc(clamp(16px, 1.8vh, 30px) + 18px);
  }
}

/* PORTFOLIO gave way to the two galleries, each its own target. They share the
   row the single link used to hold, so the wrapper is the grid item and the two
   words sit inside it. */
.menu-gallery-pair {
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 1vw, 24px);
  line-height: 0.82;
}

.menu-gallery-link {
  padding: 0;
  color: inherit;
  font: inherit;
  line-height: 0.82;
  letter-spacing: 0;
  text-transform: uppercase;
  background: none;
  border: 0;
  cursor: pointer;
}

/* `.menu-links button` and its desktop override both set a size and a weight,
   and both outrank a bare class, so the pair has to be named through the body
   to hold its own size and the heavier weight it is meant to have. */
body:not(.admin-page) .menu-gallery-pair .menu-gallery-link {
  font-size: clamp(52px, 5.2vw, 104px);
  font-weight: 800;
}

.contact-word {
  display: block;
  font-size: clamp(86px, 12vw, 236px);
  font-weight: 600;
  line-height: 0.76;
  letter-spacing: 0;
  text-transform: uppercase;
}

body.admin-page {
  --admin-menu-item-font: clamp(21px, 2.4vw, 44px);
  --admin-menu-social-font: clamp(16.8px, 1.904vw, 35px);
}

body.admin-page .contact-word,
body.admin-page .menu-links a,
body.admin-page .menu-links button,
body.admin-page .social-picker-trigger {
  display: block;
  margin: 0;
  padding: 0;
  font-size: var(--admin-menu-item-font);
  line-height: 0.92;
}

body.admin-page .contact-word {
  transform: none;
}

body.admin-page .social-picker-trigger,
body.admin-page .social-links > a {
  font-size: var(--admin-menu-social-font);
  /* identical line boxes: the trigger inherited a different line-height and
     its baseline sat a hair off from Instagram/Facebook */
  line-height: 1;
}

body.admin-page .menu-main {
  justify-items: end;
}

body.admin-page .admin-menu-stack,
body.admin-page .admin-menu-group,
body.admin-page .admin-menu-items {
  display: grid;
  justify-items: end;
}

body.admin-page .admin-menu-stack {
  gap: clamp(20px, 2vw, 38px);
}

body.admin-page .admin-menu-group {
  gap: clamp(8px, 0.72vw, 14px);
}

body.admin-page .admin-menu-label {
  margin: 0;
  color: currentColor;
  font-size: clamp(9px, 0.68vw, 13px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  opacity: 0.42;
  text-transform: uppercase;
}

body.admin-page .admin-menu-items {
  gap: clamp(7px, 0.72vw, 14px);
}

body.admin-page .menu-links,
body.admin-page .social-links {
  justify-items: end;
  justify-content: end;
  align-items: flex-end;
}

body.admin-page .menu-links a,
body.admin-page .menu-links button,
body.admin-page .social-picker,
body.admin-page .social-picker-trigger {
  text-align: right;
  justify-items: end;
}

body.admin-page,
body.admin-page * {
  scroll-behavior: auto !important;
  animation: none !important;
  animation-duration: 0ms !important;
  animation-delay: 0ms !important;
  transition: none !important;
  transition-duration: 0ms !important;
  transition-delay: 0ms !important;
}

body.admin-page.project-transitioning .project-view,
body.admin-page.project-closing .project-view,
body.admin-page.menu-open.menu-mounted .menu-overlay,
body.admin-page.menu-closing.menu-mounted .menu-overlay,
body.admin-page.about-open.about-mounted .about-panel,
body.admin-page.about-panel-closing.about-mounted .about-panel,
body.admin-page.pricing-open .pricing-panel,
body.admin-page.pricing-closing .pricing-panel,
body.admin-page.inquiry-open .inquiry-panel,
body.admin-page.inquiry-closing .inquiry-panel {
  animation: none !important;
}

.menu-links {
  display: grid;
  justify-items: end;
  gap: clamp(13px, 1.2vw, 24px);
}

.menu-links a,
.menu-links button {
  font-size: clamp(34px, 3.15vw, 68px);
  font-weight: 600;
  line-height: 0.9;
  justify-self: end;
  padding: 0;
  text-transform: uppercase;
  transition: opacity 144ms ease, transform 144ms ease;
  text-align: right;
}

.social-links {
  display: flex;
  align-items: flex-start;
  gap: clamp(18px, 2.5vw, 52px);
  flex-wrap: nowrap;
  justify-content: end;
  max-width: none;
}

.social-links a,
.social-picker-trigger {
  /* The trigger is a <button>: without this it keeps the browser's default
     1px 6px padding and WHATSAPP sits lower than its siblings */
  padding: 0;
  border: 0;
  font-size: clamp(20px, 2vw, 38px);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

.social-picker {
  position: relative;
  display: grid;
  justify-items: end;
  gap: clamp(8px, 0.8vw, 14px);
}

.social-picker-trigger {
  color: inherit;
}

.social-picker-options {
  position: absolute;
  top: calc(100% + clamp(8px, 0.8vw, 14px));
  right: 0;
  z-index: 2;
  display: grid;
  justify-items: end;
  gap: clamp(7px, 0.62vw, 12px);
  min-width: max-content;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, -8px, 0);
  transition: opacity 176ms ease, visibility 176ms ease, transform 288ms cubic-bezier(0.16, 1, 0.3, 1);
}

.social-picker.is-open .social-picker-options {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}

.social-picker-options a {
  font-size: clamp(11.2px, 0.84vw, 16.8px);
  line-height: 1;
  white-space: nowrap;
  opacity: 0.68;
}

/* The App Store link. The icon carries it now, so the bordered card is gone
   and only the name and the store line stay beside it. */
.menu-app-promo {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 0.86vw, 16px);
  max-width: max-content;
  padding: 0;
  color: currentColor;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
}

.menu-app-copy {
  display: grid;
  justify-items: start;
  gap: clamp(3px, 0.3vw, 6px);
  min-width: 0;
}

.menu-app-promo strong {
  display: block;
  font-size: clamp(15px, 1.08vw, 24px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 0.94;
}

.menu-app-store {
  display: inline-flex;
  align-items: center;
  gap: clamp(4px, 0.36vw, 7px);
  font-size: clamp(8.4px, 0.62vw, 11px);
  font-weight: 600;
  letter-spacing: 0.09em;
  line-height: 1;
  opacity: 0.5;
  transition: opacity 184ms ease;
}

.menu-app-arrow {
  width: clamp(8px, 0.6vw, 11px);
  height: clamp(8px, 0.6vw, 11px);
  overflow: visible;
  transition: transform 224ms cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-app-icon {
  display: block;
  flex: 0 0 auto;
  width: clamp(24.5px, 1.89vw, 35.2px);
  aspect-ratio: 1;
  /* the corner iOS uses, so it reads as the app icon it is */
  border-radius: 22.5%;
  object-fit: cover;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition:
    filter 320ms cubic-bezier(0.37, 0, 0.63, 1),
    opacity 320ms cubic-bezier(0.37, 0, 0.63, 1),
    transform 224ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 224ms ease;
}


body.admin-page .admin-menu-creator {
  margin-top: clamp(20px, 1.5vw, 30px);
}

body.admin-page .admin-menu-creator .menu-app-promo {
  max-width: min(320px, 70vw);
}

.menu-app-promo:is(:hover, :focus-visible, :active) .menu-app-icon {
  filter: grayscale(0.38);
  opacity: 0.62;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.26);
}

.menu-app-promo:is(:hover, :focus-visible, :active) .menu-app-store {
  opacity: 0.82;
}

.menu-app-promo:is(:hover, :focus-visible, :active) .menu-app-arrow {
  transform: translate(2px, -2px);
}

.menu-credit {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 2.2vw, 38px);
  z-index: 2;
  margin: 0;
  color: currentColor;
  font-family: var(--sans);
  font-size: clamp(10px, 0.78vw, 14px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  opacity: 0.42;
  pointer-events: none;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
  white-space: nowrap;
}

.menu-open.menu-mounted .social-picker-options a {
  animation: none;
  opacity: 0.68;
  transform: none;
  filter: none;
}

/* Menu entrance animations own opacity and filter, so selection colour lives
   on `color`. That lets every control ease both in and out after its entrance
   animation, instead of snapping when animation-fill-mode is still active. */
.menu-main :is(.contact-word, .menu-links a, .menu-links button, .social-links > a, .social-picker-trigger, .menu-app-promo) {
  color: var(--menu-control-color);
  transition: color 320ms cubic-bezier(0.37, 0, 0.63, 1);
}

.menu-main :is(.contact-word, .menu-links a, .menu-links button:not(.menu-gallery-link), .social-links > a, .social-picker-trigger, .menu-app-promo):is(:hover, :focus-visible, :active) {
  color: var(--menu-control-muted-color);
}

.menu-main .menu-gallery-link[data-gallery="photography"]:is(:hover, :focus-visible, :active) {
  color: var(--menu-photo-accent-color);
}

.menu-main .menu-gallery-link[data-gallery="films"] {
  color: var(--menu-control-muted-color);
}

.menu-main .menu-gallery-link[data-gallery="films"]:is(:hover, :focus-visible, :active) {
  color: var(--menu-film-accent-color);
}

.about-panel {
  --about-open-duration: 1040ms;
  --about-close-duration: 896ms;
  position: relative;
  display: none;
  min-height: 100svh;
  color: var(--black);
  background: #ffffff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 112vh, 0) scale(0.74);
  filter: blur(10px);
  overflow: visible;
  transform-origin: center top;
  transition: visibility 0ms linear var(--about-close-duration);
}

.about-mounted .about-panel {
  display: block;
}

.about-open.about-mounted .about-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  filter: none;
  animation: aboutPanelOpenIn var(--about-open-duration) cubic-bezier(0.16, 1, 0.3, 1) backwards;
  transition-delay: 0ms;
}

.about-panel-closing.about-mounted .about-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transform: none;
  animation: mobileMenuCloseOut var(--about-close-duration) cubic-bezier(0.7, 0, 0.84, 0) both;
  transition-delay: 0ms;
}

/* Coming into About from FILMS keeps the room dark: the panel turns over with
   the gallery instead of flashing a white page over a black one. Photography's
   About stays on paper. */
body[data-active-gallery="films"] .about-panel {
  color: var(--white);
  background: var(--black);
}

body[data-active-gallery="films"] .about-split p,
body[data-active-gallery="films"] .about-editorial p {
  color: rgba(255, 255, 255, 0.72);
}

body[data-active-gallery="films"] .about-split span,
body[data-active-gallery="films"] .about-editorial span {
  color: rgba(255, 255, 255, 0.44);
}

body[data-active-gallery="films"] .about-closing button {
  color: var(--white);
}

body[data-active-gallery="films"] .about-story p,
body[data-active-gallery="films"] .about-closing p {
  color: rgba(255, 255, 255, 0.55);
}

/* Portrait slots with no photo yet read as a lift out of the dark */
body[data-active-gallery="films"] .about-portrait {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
    #141414;
}

body[data-active-gallery="films"] .about-portrait:not(.is-filled)::after {
  color: rgba(255, 255, 255, 0.22);
}

.about-shell {
  display: grid;
  gap: clamp(78px, 10vw, 180px);
  width: min(1500px, calc(100vw - clamp(34px, 7vw, 134px)));
  margin: 0 auto;
  padding: clamp(42px, 5vw, 96px) 0 clamp(96px, 11vw, 190px);
}

.about-open.about-mounted .about-kicker,
.about-open.about-mounted .about-hero h2,
.about-open.about-mounted .about-portrait,
.about-open.about-mounted .about-story p,
.about-open.about-mounted .about-split div,
.about-open.about-mounted .about-editorial div,
.about-open.about-mounted .about-closing p,
.about-open.about-mounted .about-closing button {
  animation: aboutItemRiseIn 640ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.about-panel-closing.about-mounted .about-kicker,
.about-panel-closing.about-mounted .about-hero h2,
.about-panel-closing.about-mounted .about-portrait,
.about-panel-closing.about-mounted .about-story p,
.about-panel-closing.about-mounted .about-split div,
.about-panel-closing.about-mounted .about-editorial div,
.about-panel-closing.about-mounted .about-closing p,
.about-panel-closing.about-mounted .about-closing button {
  animation: none;
}

.about-open.about-mounted .about-close {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: none;
  filter: none;
}

.about-open.about-mounted .about-kicker {
  animation-delay: 40ms;
}

.about-open.about-mounted .about-hero h2 {
  animation-delay: 80ms;
}

.about-open.about-mounted .about-portrait-hero {
  animation-delay: 120ms;
}

.about-open.about-mounted .about-story p {
  animation-delay: 160ms;
}

.about-open.about-mounted .about-split:nth-of-type(3) .about-portrait,
.about-open.about-mounted .about-split:nth-of-type(3) div {
  animation-delay: 200ms;
}

.about-open.about-mounted .about-split:nth-of-type(4) .about-portrait,
.about-open.about-mounted .about-split:nth-of-type(4) div {
  animation-delay: 240ms;
}

.about-open.about-mounted .about-editorial .about-portrait,
.about-open.about-mounted .about-editorial div {
  animation-delay: 280ms;
}

.about-open.about-mounted .about-closing p,
.about-open.about-mounted .about-closing button {
  animation-delay: 320ms;
}

@keyframes aboutPanelOpenIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 112vh, 0) scale(0.74);
    filter: blur(10px);
  }

  42% {
    opacity: 1;
    filter: blur(2px);
  }

  100% {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* The panel itself makes the big move; each item only needs a short lift on
   top of it. Repeating the panel's whole 112vh per item, staggered out to
   448ms, is what made opening feel slack next to the closing sweep. */
@keyframes aboutItemRiseIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 46px, 0) scale(0.984);
    filter: blur(6px);
  }

  58% {
    opacity: 1;
    filter: blur(0.6px);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

.about-close {
  --menu-close-size: clamp(52px, 4.4vw, 82px);
  --menu-close-stroke: clamp(3.4px, 0.28vw, 4.8px);
  position: sticky !important;
  top: calc(max(clamp(14px, 2.2vw, 38px), calc(env(safe-area-inset-top, 0px) + 10px)) - 10px);
  right: auto;
  z-index: 999;
  display: grid;
  place-items: center;
  width: var(--menu-close-size);
  height: var(--menu-close-size);
  margin-right: calc(clamp(10px, 2.2vw, 34px) + 3px);
  margin-bottom: calc(var(--menu-close-size) * -1);
  margin-left: auto;
  padding: 0;
  color: var(--white);
  mix-blend-mode: difference;
  transform-origin: center;
  transition:
    opacity 220ms ease,
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 520ms ease;
}

.about-close span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.about-close::before,
.about-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 88%;
  height: var(--menu-close-stroke);
  background: currentColor;
  border-radius: 999px;
  transform-origin: center;
  transition:
    width 960ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 960ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 420ms ease;
}

.about-close::before {
  transform: translate(-50%, -50%) rotate(43deg) scaleX(0.92);
}

.about-close::after {
  width: 64%;
  transform: translate(-50%, -50%) rotate(-43deg) translateX(8%) scaleX(1);
}

.about-close:hover {
  transform: rotate(-1.5deg) scale(1.08);
}

.about-close:hover::before {
  width: 78%;
  transform: translate(-50%, -50%) rotate(38deg) translateX(-3%) scaleX(1);
}

.about-close:hover::after {
  width: 92%;
  transform: translate(-50%, -50%) rotate(-48deg) translateX(2%) scaleX(0.94);
}

.about-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.62fr);
  align-items: end;
  gap: clamp(34px, 6vw, 110px);
  min-height: min(840px, calc(100svh - 90px));
}

.about-kicker,
.about-split span,
.about-editorial span {
  color: rgba(0, 0, 0, 0.44);
  font-size: clamp(11px, 0.86vw, 15px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.about-hero h2 {
  max-width: 920px;
  margin: clamp(22px, 3vw, 46px) 0 0;
  font-size: clamp(58px, 8.4vw, 156px);
  font-weight: 600;
  line-height: 0.86;
  letter-spacing: 0;
}

.about-portrait {
  position: relative;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.015)),
    #f3f1ec;
}

.about-portrait::before {
  content: "";
  display: block;
  aspect-ratio: 4 / 5.6;
}

.about-portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 208ms ease;
}

.about-portrait.is-filled img {
  opacity: 1;
}

.about-portrait:not(.is-filled)::after {
  content: "PORTRAIT";
  position: absolute;
  left: 50%;
  top: 50%;
  color: rgba(0, 0, 0, 0.22);
  font-size: clamp(10px, 0.9vw, 14px);
  font-weight: 700;
  letter-spacing: 0.12em;
  transform: translate(-50%, -50%);
}

.about-portrait-hero::before {
  aspect-ratio: 4 / 5.8;
}

@media (min-width: 981px) {
  .about-shell {
    width: min(1500px, calc(100vw - clamp(34px, 7vw, 134px)));
    padding-top: 0;
  }

  .about-hero {
    position: relative;
    left: 50%;
    display: block;
    width: 100vw;
    min-height: 200svh;
    margin-left: -50vw;
    overflow: hidden;
  }

  .about-hero .about-kicker {
    position: absolute;
    top: clamp(24px, 3vw, 58px);
    left: 0;
    right: 0;
    z-index: 2;
    width: 100%;
    padding: 0 clamp(24px, 4vw, 72px);
    color: rgba(255, 255, 255, 0.72);
    text-align: center;
    transform: none;
  }

  .about-hero h2 {
    position: absolute;
    left: clamp(30px, 7vw, 134px);
    bottom: clamp(70px, 10svh, 160px);
    z-index: 2;
    max-width: min(1060px, 68vw);
    color: #ffffff;
    text-shadow: 0 24px 72px rgba(0, 0, 0, 0.36);
  }

  .about-portrait-hero {
    width: 100%;
    min-height: 200svh;
  }

  .about-portrait-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(0, 0, 0, 0.52) 0%, rgba(0, 0, 0, 0.24) 34%, rgba(0, 0, 0, 0.08) 66%, rgba(0, 0, 0, 0.18) 100%),
      linear-gradient(0deg, rgba(0, 0, 0, 0.54) 0%, rgba(0, 0, 0, 0.12) 38%, rgba(0, 0, 0, 0.04) 100%);
    pointer-events: none;
  }

  .about-portrait-hero::before {
    aspect-ratio: auto;
    min-height: 200svh;
  }
}

.about-story {
  display: grid;
  justify-items: end;
}

.about-story p,
.about-closing p {
  max-width: 980px;
  margin: 0;
  color: rgba(17, 17, 17, 0.55);
  font-size: clamp(30px, 4.2vw, 76px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: 0;
}

.about-split,
.about-editorial {
  display: grid;
  grid-template-columns: minmax(280px, 0.62fr) minmax(0, 0.78fr);
  align-items: center;
  gap: clamp(36px, 7vw, 128px);
}

.about-split-reverse {
  grid-template-columns: minmax(0, 0.78fr) minmax(280px, 0.62fr);
}

.about-split-reverse figure {
  grid-column: 2;
  grid-row: 1;
}

.about-split-reverse div {
  grid-column: 1;
  grid-row: 1;
}

.about-split h3,
.about-editorial h3 {
  max-width: 720px;
  margin: clamp(14px, 1.8vw, 28px) 0 clamp(18px, 2vw, 36px);
  font-size: clamp(42px, 5.6vw, 102px);
  font-weight: 600;
  line-height: 0.88;
}

.about-split p,
.about-editorial p {
  max-width: 660px;
  margin: 0;
  color: rgba(0, 0, 0, 0.72);
  font-size: clamp(18px, 1.75vw, 30px);
  font-weight: 500;
  line-height: 1.16;
}

.about-editorial {
  grid-template-columns: minmax(320px, 0.74fr) minmax(0, 0.76fr);
}

.about-editorial .about-portrait::before {
  aspect-ratio: 4 / 6.4;
}

.about-closing {
  display: grid;
  justify-items: center;
  gap: clamp(28px, 4vw, 70px);
  padding: clamp(42px, 6vw, 116px) 0 0;
  text-align: center;
}

.about-closing button {
  color: var(--black);
  font-size: clamp(24px, 3vw, 54px);
  font-weight: 700;
  line-height: 0.9;
  text-transform: uppercase;
}

.about-closing button:hover {
  opacity: 0.58;
}

@media (max-width: 640px) {
  .about-shell {
    gap: clamp(56px, 16vw, 92px);
    width: calc(100vw - 28px);
    padding: 24px 0 86px;
  }

  .about-hero,
  .about-split,
  .about-split-reverse,
  .about-editorial {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .about-hero {
    position: relative;
    left: 50%;
    display: flex;
    width: 100vw;
    min-height: min(760px, 92svh);
    margin-left: -50vw;
    padding: max(88px, calc(env(safe-area-inset-top, 0px) + 68px)) 22px 54px;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    background: #111;
  }

  .about-kicker,
  .about-split span,
  .about-editorial span {
    font-size: 10px;
  }

  .about-close {
    top: calc(max(clamp(14px, 2.2vw, 38px), calc(env(safe-area-inset-top, 0px) + 10px)) + 13px);
    margin-right: clamp(10px, 2.2vw, 34px);
  }

  .about-hero h2 {
    position: relative;
    z-index: 2;
    max-width: min(86vw, 600px);
    font-size: clamp(35.7px, 11.9vw, 62.9px);
    line-height: 0.88;
    color: #ffffff;
    text-shadow: 0 18px 58px rgba(0, 0, 0, 0.42);
  }

  .about-hero .about-kicker {
    position: absolute;
    top: max(18px, calc(env(safe-area-inset-top, 0px) + 14px));
    left: 0;
    right: 0;
    z-index: 2;
    width: 100%;
    padding: 0 22px;
    color: rgba(255, 255, 255, 0.72);
    text-align: center;
    transform: none;
  }

  .about-portrait-hero {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    justify-self: auto;
  }

  .about-portrait-hero::before {
    display: none;
  }

  .about-portrait-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.08) 38%, rgba(0, 0, 0, 0.54) 100%),
      linear-gradient(90deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.08) 56%, rgba(0, 0, 0, 0.18) 100%);
    pointer-events: none;
  }

  .about-story {
    justify-items: start;
  }

  .about-story p,
  .about-closing p {
    max-width: none;
    font-size: clamp(28px, 9.8vw, 54px);
  }

  .about-split-reverse figure,
  .about-split-reverse div {
    grid-column: auto;
    grid-row: auto;
  }

  .about-split h3,
  .about-editorial h3 {
    font-size: clamp(36px, 12vw, 64px);
  }

  .about-split p,
  .about-editorial p {
    font-size: clamp(17px, 5vw, 23px);
  }

  .about-split .about-portrait,
  .about-editorial .about-portrait {
    width: min(82vw, 380px);
  }

  .about-split-reverse .about-portrait {
    justify-self: end;
  }

  .about-closing {
    justify-items: start;
    text-align: left;
  }
}

.editor-panel {
  position: fixed;
  inset: 0;
  z-index: 70;
  padding: clamp(10px, 1.5vw, 24px);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 224ms ease, visibility 224ms ease;
}

.submissions-panel,
.site-deleted-panel {
  position: fixed;
  inset: 0;
  z-index: 180;
  padding: 0;
  background: #ffffff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 208ms ease, visibility 208ms ease;
}

.pricing-panel {
  position: fixed;
  inset: 0;
  z-index: 74;
  display: none;
  padding: 0;
  color: var(--black);
  background: #ffffff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transform: translateY(10px);
  contain: layout paint style;
  isolation: isolate;
  transition: opacity 336ms cubic-bezier(0.16, 1, 0.3, 1), filter 336ms cubic-bezier(0.16, 1, 0.3, 1), visibility 176ms ease;
}

.inquiry-panel {
  --inquiry-frame-width: min(1920px, calc(100vw - clamp(30px, 4vw, 76px)));
  position: fixed;
  inset: 0;
  z-index: 72;
  display: none;
  padding: clamp(72px, 8vw, 154px) clamp(18px, 3vw, 56px) clamp(18px, 3vw, 56px);
  align-content: start;
  justify-items: center;
  gap: clamp(16px, 2vw, 34px);
  background: #ffffff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  transform: translateY(10px);
  transition: opacity 192ms ease, transform 240ms ease, visibility 192ms ease;
}

body[data-active-gallery="films"] .inquiry-panel {
  color: var(--white);
  background: var(--black);
}

.inquiry-mounted .inquiry-panel {
  display: grid;
}

.editor-open .editor-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.submissions-open .submissions-panel,
.site-deleted-open .site-deleted-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.pricing-mounted .pricing-panel {
  display: block;
}

body.pricing-page {
  min-height: 100vh;
  background: #ffffff;
}

.pricing-page-home {
  display: none;
}

body.pricing-page .pricing-panel {
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.pricing-public-preload body {
  background: #ffffff;
}

.pricing-public-preload .site-intro,
.pricing-public-preload .site-chrome,
.pricing-public-preload main,
.pricing-public-preload .menu-overlay,
.pricing-public-preload .inquiry-panel {
  visibility: hidden;
}

.pricing-public-preload .pricing-panel {
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  animation: none;
}

.pricing-public-preload .pricing-header > div {
  visibility: hidden;
}

.pricing-public-preload.pricing-public-ready .pricing-header > div {
  visibility: visible;
}

.pricing-open .pricing-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  animation: mobileMenuOpenIn 608ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.pricing-standalone .pricing-panel {
  overscroll-behavior-x: none;
  touch-action: pan-y;
}

body.pricing-standalone.pricing-open .pricing-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  animation: none;
  transition: none;
}

body.pricing-standalone [data-pricing-close] {
  display: none;
}

.pricing-public-pdf {
  display: none;
}

body.pricing-standalone .pricing-public-pdf {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 38px;
  padding: 10px 14px;
  color: var(--black);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  transition: border-color 144ms ease, opacity 144ms ease, transform 144ms ease;
}

body.pricing-standalone .pricing-public-pdf svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.pricing-standalone .pricing-public-pdf:hover {
  border-color: rgba(0, 0, 0, 0.42);
  opacity: 0.72;
  transform: translateY(-1px);
}

.pricing-closing .pricing-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transform: none;
  animation: mobileMenuCloseOut 896ms cubic-bezier(0.7, 0, 0.84, 0) both;
}

.pricing-open.pricing-mounted .pricing-header,
.pricing-open.pricing-mounted .pricing-library,
.pricing-open.pricing-mounted .pricing-detail,
.pricing-open.pricing-mounted .pricing-guide-board {
  animation: mobileMenuItemFlyIn 1024ms cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: transform, opacity, filter;
}

/* The info board reveals in place on toggle — same fly-in family, but scaled
   to an accordion: short travel, no giant 108svh flight, no delay */
.pricing-open.pricing-mounted .pricing-info-board {
  animation: pricingInfoReveal 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: transform, opacity, filter;
}

@keyframes pricingInfoReveal {
  0% {
    opacity: 0;
    transform: translate3d(0, 44px, 0);
    filter: blur(6px);
  }

  55% {
    opacity: 1;
    filter: blur(1px);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

.pricing-closing.pricing-mounted .pricing-header,
.pricing-closing.pricing-mounted .pricing-library,
.pricing-closing.pricing-mounted .pricing-detail,
.pricing-closing.pricing-mounted .pricing-guide-board,
.pricing-closing.pricing-mounted .pricing-info-board {
  animation: mobileMenuItemFlyOut 784ms cubic-bezier(0.7, 0, 0.84, 0) both;
  will-change: transform, opacity, filter;
}

.pricing-open.pricing-mounted .pricing-header {
  animation-delay: 0ms;
}

.pricing-open.pricing-mounted .pricing-guide-board {
  animation-delay: 72ms;
}

.pricing-open.pricing-mounted .pricing-library,
.pricing-open.pricing-mounted .pricing-detail {
  animation-delay: 72ms;
}

.pricing-open.pricing-mounted .pricing-info-board {
  animation-delay: 0ms;
}

.pricing-closing.pricing-mounted .pricing-header,
.pricing-closing.pricing-mounted .pricing-library,
.pricing-closing.pricing-mounted .pricing-detail,
.pricing-closing.pricing-mounted .pricing-guide-board,
.pricing-closing.pricing-mounted .pricing-info-board {
  animation-delay: 0ms;
}

.editor-open .editor-shell {
  animation: editorShellIn 496ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.submissions-open .submissions-shell,
.site-deleted-open .site-deleted-shell {
  animation: panelContentIn 416ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes editorShellIn {
  0% {
    opacity: 0;
    transform: translateY(-18px);
    filter: blur(8px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes panelContentIn {
  0% {
    opacity: 0;
    filter: blur(6px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}

.inquiry-open .inquiry-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  animation: mobileMenuOpenIn 608ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.inquiry-closing .inquiry-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transform: none;
  animation: mobileMenuCloseOut 896ms cubic-bezier(0.7, 0, 0.84, 0) both;
}

.inquiry-open.inquiry-mounted .inquiry-close,
.inquiry-open.inquiry-mounted .inquiry-header p,
.inquiry-open.inquiry-mounted .inquiry-form label,
.inquiry-open.inquiry-mounted .inquiry-actions {
  animation: mobileMenuItemFlyIn 1024ms cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: transform, opacity, filter;
}

.inquiry-closing.inquiry-mounted .inquiry-close,
.inquiry-closing.inquiry-mounted .inquiry-header p,
.inquiry-closing.inquiry-mounted .inquiry-form label,
.inquiry-closing.inquiry-mounted .inquiry-actions {
  animation: mobileMenuItemFlyOut 784ms cubic-bezier(0.7, 0, 0.84, 0) both;
  will-change: transform, opacity, filter;
}

.inquiry-open.inquiry-mounted .inquiry-close {
  animation-delay: 0ms;
}

.inquiry-open.inquiry-mounted .inquiry-header p {
  animation-delay: 504ms;
}

.inquiry-open.inquiry-mounted .inquiry-form label:nth-of-type(1) {
  animation-delay: 168ms;
}

.inquiry-open.inquiry-mounted .inquiry-form label:nth-of-type(2) {
  animation-delay: 196ms;
}

.inquiry-open.inquiry-mounted .inquiry-form label:nth-of-type(3) {
  animation-delay: 224ms;
}

.inquiry-open.inquiry-mounted .inquiry-form label:nth-of-type(4) {
  animation-delay: 252ms;
}

.inquiry-open.inquiry-mounted .inquiry-form label:nth-of-type(5) {
  animation-delay: 280ms;
}

.inquiry-open.inquiry-mounted .inquiry-form label:nth-of-type(6) {
  animation-delay: 308ms;
}

.inquiry-open.inquiry-mounted .inquiry-form label:nth-of-type(7) {
  animation-delay: 336ms;
}

.inquiry-open.inquiry-mounted .inquiry-form label:nth-of-type(8) {
  animation-delay: 364ms;
}

.inquiry-open.inquiry-mounted .inquiry-form label:nth-of-type(9) {
  animation-delay: 392ms;
}

.inquiry-open.inquiry-mounted .inquiry-form label:nth-of-type(10) {
  animation-delay: 420ms;
}

.inquiry-open.inquiry-mounted .inquiry-form label:nth-of-type(11) {
  animation-delay: 448ms;
}

.inquiry-open.inquiry-mounted .inquiry-actions {
  animation-delay: 476ms;
}

.inquiry-closing.inquiry-mounted .inquiry-close,
.inquiry-closing.inquiry-mounted .inquiry-header p,
.inquiry-closing.inquiry-mounted .inquiry-form label,
.inquiry-closing.inquiry-mounted .inquiry-actions {
  animation-delay: 0ms;
}

.editor-shell {
  --editor-shell-pad-x: clamp(22px, 3.4vw, 62px);
  --editor-shell-pad-y: clamp(22px, 3.4vw, 62px);
  --editor-header-pad-y: clamp(8px, 1vw, 14px);
  --editor-header-pad-bottom: clamp(8px, 1vw, 14px);
  height: 100%;
  overflow: auto;
  color: var(--black);
  background: #ffffff;
  border: 0;
  border-radius: 0;
  padding: var(--editor-shell-pad-y) var(--editor-shell-pad-x);
  box-shadow: none;
}

.inquiry-shell {
  width: var(--inquiry-frame-width);
  max-height: none;
  overflow: visible;
  overscroll-behavior: contain;
  touch-action: auto;
  margin: auto;
  color: var(--black);
  background: #ffffff;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  position: relative;
}

body[data-active-gallery="films"] .inquiry-shell {
  color: var(--white);
  background: var(--black);
}

.inquiry-shell::before {
  content: "";
  position: sticky;
  top: 0;
  z-index: -1;
  display: block;
  height: 1px;
  margin-bottom: -1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.86), transparent);
  pointer-events: none;
}

.submissions-shell,
.site-deleted-shell {
  height: 100%;
  overflow: auto;
  color: var(--black);
  background: #ffffff;
  padding: clamp(22px, 3.4vw, 62px);
}

.pricing-shell {
  min-height: 100%;
  overflow: visible;
  color: var(--black);
  background: #ffffff;
  padding: clamp(22px, 3.4vw, 62px);
}

.editor-header {
  position: sticky;
  top: calc(-1 * var(--editor-shell-pad-y));
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 54px);
  margin: calc(-1 * var(--editor-shell-pad-y)) calc(-1 * var(--editor-shell-pad-x)) clamp(16px, 1.8vw, 30px);
  padding: var(--editor-header-pad-y) var(--editor-shell-pad-x) var(--editor-header-pad-bottom);
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.editor-header > * {
  transform: none;
}

.inquiry-header {
  width: var(--inquiry-frame-width);
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 0;
  padding: 0;
  background: #ffffff;
  border-bottom: 0;
}

body[data-active-gallery="films"] .inquiry-header {
  background: var(--black);
}

.submissions-header,
.site-deleted-header,
.pricing-header {
  position: sticky;
  top: calc(-1 * clamp(22px, 3.4vw, 62px));
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 54px);
  margin: calc(-1 * clamp(22px, 3.4vw, 62px)) calc(-1 * clamp(22px, 3.4vw, 62px)) clamp(28px, 3vw, 52px);
  padding: clamp(16px, 2vw, 32px) clamp(22px, 3.4vw, 62px);
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.pricing-header {
  position: static;
  top: auto;
  margin: calc(-1 * clamp(22px, 3.4vw, 62px)) calc(-1 * clamp(22px, 3.4vw, 62px)) clamp(28px, 3vw, 52px);
}

.submissions-header p,
.site-deleted-header p,
.pricing-header p {
  margin: 0 0 8px;
  color: var(--black);
  font-size: clamp(32px, 4.6vw, 94px);
  font-weight: 600;
  line-height: 0.86;
  text-transform: uppercase;
}

/* The Recently Deleted and Submissions titles run much smaller than the
   pricing header — 20px on phones, ~37px on a desktop viewport — and sit on
   ONE row with the action pills; the count keeps them company inline */
.site-deleted-header,
.submissions-header {
  align-items: center;
}

.site-deleted-header > div:first-child,
.submissions-header > div:first-child {
  display: flex;
  align-items: baseline;
  gap: clamp(8px, 1vw, 14px);
  min-width: 0;
}

.site-deleted-header > div:first-child span,
.submissions-header > div:first-child span {
  white-space: nowrap;
}

/* No titles in Recently Deleted and Submissions — the count IS the header,
   sized to hold its own next to the bin and the X */
.site-deleted-header [data-site-deleted-status],
.submissions-header [data-submissions-status] {
  color: var(--black);
  font-size: clamp(16px, 1.6vw, 24px);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

.site-deleted-header p,
.submissions-header p {
  margin: 0;
  font-size: clamp(20px, 2.6vw, 54px);
}

.submissions-header span,
.site-deleted-header span,
.pricing-header > div > span {
  display: block;
  color: rgba(0, 0, 0, 0.42);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

.site-deleted-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* A line-drawn bin instead of the DELETE ALL wording */
.site-deleted-delete-all {
  display: grid;
  place-items: center;
  width: clamp(34px, 2.6vw, 44px);
  height: clamp(34px, 2.6vw, 44px);
  padding: 0;
  color: rgba(0, 0, 0, 0.62);
  transition: color 144ms ease, transform 144ms ease;
}

.site-deleted-delete-all svg {
  width: 74%;
  height: 74%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-deleted-delete-all:hover {
  color: var(--black);
  transform: translateY(-1px);
}

/* The about-us X, scaled down, in ink instead of blend-white */
.site-deleted-close-x {
  --deleted-close-size: clamp(34px, 2.6vw, 44px);
  --deleted-close-stroke: clamp(2.2px, 0.18vw, 3px);
  position: relative;
  display: grid;
  place-items: center;
  width: var(--deleted-close-size);
  height: var(--deleted-close-size);
  padding: 0;
  color: var(--black);
  transform-origin: center;
  transition: opacity 220ms ease, transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
}

.site-deleted-close-x span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.site-deleted-close-x::before,
.site-deleted-close-x::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 88%;
  height: var(--deleted-close-stroke);
  background: currentColor;
  border-radius: 999px;
  transform-origin: center;
  transition:
    width 960ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 960ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 420ms ease;
}

.site-deleted-close-x::before {
  transform: translate(-50%, -50%) rotate(43deg) scaleX(0.92);
}

.site-deleted-close-x::after {
  width: 64%;
  transform: translate(-50%, -50%) rotate(-43deg) translateX(8%) scaleX(1);
}

.site-deleted-close-x:hover {
  transform: rotate(-1.5deg) scale(1.08);
}

.site-deleted-close-x:hover::before {
  width: 78%;
  transform: translate(-50%, -50%) rotate(38deg) translateX(-3%) scaleX(1);
}

.site-deleted-close-x:hover::after {
  width: 92%;
  transform: translate(-50%, -50%) rotate(-48deg) translateX(2%) scaleX(0.94);
}

.site-deleted-delete-all:disabled {
  color: rgba(0, 0, 0, 0.24);
  cursor: default;
  transform: none;
}

.pricing-panel.is-library-open .pricing-header p {
  font-size: clamp(32px, 5vw, 92px);
}

.pricing-panel.is-detail-open .pricing-header > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pricing-panel.is-detail-open .pricing-header p {
  order: 2;
  margin: 0;
  color: rgba(0, 0, 0, 0.42);
  font-size: clamp(14px, 1.45vw, 28px);
  line-height: 0.96;
}

.pricing-panel.is-detail-open .pricing-header > div > span {
  order: 1;
  color: var(--black);
  font-size: clamp(20px, 2.8vw, 56px);
  line-height: 0.86;
}

@media (min-width: 641px) {
  /* Desktop guide header: guide name sits under "Ghid prețuri", small and
     quiet; STROE takes the far right of the title row */
  .pricing-panel.is-detail-open .pricing-header p {
    font-size: clamp(12px, 1.05vw, 19px);
  }
}

.pricing-library {
  display: grid;
  gap: 0;
}

/* Guides are grouped by season; the label reuses the quiet 11px eyebrow from
   the detail header so the list keeps its flat, hairline-divided look */
.pricing-guide-group + .pricing-guide-group {
  margin-top: clamp(34px, 4vw, 72px);
}

.pricing-guide-group-label {
  margin: 0;
  /* 6px mirrors the UA inline padding on .pricing-guide-open so the label
     lines up with the guide names beneath it, not the hairline */
  padding: 0 0 clamp(4px, 0.5vw, 10px) 6px;
  color: rgba(0, 0, 0, 0.42);
  font-size: clamp(18px, 2vw, 38px);
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  text-transform: none;
}

.pricing-guide-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 54px);
  width: 100%;
  padding: clamp(18px, 2.2vw, 38px) 0;
  color: var(--black);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  text-align: left;
}

.pricing-guide-open {
  display: flex;
  flex: 1;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 54px);
  min-width: 0;
  color: inherit;
  text-align: left;
  transition: opacity 144ms ease;
}

.pricing-guide-open:hover,
.pricing-guide-message:hover,
.pricing-guide-copy:hover,
.pricing-guide-pdf:hover {
  opacity: 0.58;
}

.pricing-detail-header p {
  color: rgba(0, 0, 0, 0.42);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

.pricing-guide-card strong {
  margin-top: 0;
  flex: 0 1 auto;
  color: var(--black);
  font-size: clamp(14px, 1.55vw, 30px);
  font-weight: 600;
  line-height: 1.22;
  text-transform: none;
}

.pricing-guide-actions {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.4vw, 28px);
  flex: 0 0 auto;
}

.pricing-guide-copy,
.pricing-guide-message,
.pricing-guide-pdf {
  flex: 0 0 auto;
  color: var(--black);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  transition: opacity 144ms ease;
}

.pricing-guide-copy,
.pricing-guide-message {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-radius: 999px;
}

.pricing-guide-copy svg,
.pricing-guide-message svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.pricing-toast {
  position: fixed;
  left: 50%;
  bottom: clamp(22px, 5vh, 54px);
  z-index: 2800;
  padding: 10px 14px;
  color: var(--black);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.12);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, 10px, 0);
  transition: opacity 180ms ease, transform 180ms ease;
}

.pricing-toast.is-visible {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
}

.pricing-share-composer {
  position: fixed;
  inset: 0;
  z-index: 2700;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 240ms ease, visibility 240ms ease;
}

.pricing-share-composer[hidden] {
  display: none;
}

.pricing-share-composer.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.pricing-share-dialog {
  width: min(620px, calc(100vw - 48px));
  max-height: min(820px, calc(100svh - 48px));
  overflow: auto;
  overscroll-behavior: contain;
  padding: clamp(22px, 3vw, 36px);
  color: var(--black);
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 24px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(0.985);
  transition: opacity 240ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pricing-share-composer.is-open .pricing-share-dialog {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.pricing-share-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.pricing-share-eyebrow {
  margin: 0 0 8px;
  color: rgba(0, 0, 0, 0.48);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
}

.pricing-share-header h2 {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 650;
  line-height: 1;
}

.pricing-share-close {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 999px;
  transition: border-color 180ms ease, transform 220ms ease;
}

.pricing-share-close span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17px;
  height: 1.5px;
  background: currentColor;
  border-radius: 999px;
}

.pricing-share-close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.pricing-share-close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.pricing-share-close:hover {
  border-color: rgba(0, 0, 0, 0.42);
  transform: scale(1.06);
}

.pricing-share-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 24px;
}

.pricing-share-fields label,
.pricing-share-message-field {
  display: grid;
  gap: 8px;
  min-width: 0;
  color: rgba(0, 0, 0, 0.58);
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
  text-transform: uppercase;
}

.pricing-share-fields input,
.pricing-share-message-field textarea {
  width: 100%;
  color: var(--black);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 6px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  text-transform: none;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.pricing-share-fields input {
  min-height: 46px;
  padding: 10px 12px;
}

.pricing-share-fields input:focus,
.pricing-share-message-field textarea:focus {
  border-color: rgba(0, 0, 0, 0.48);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.pricing-share-message-field {
  margin-top: 18px;
}

.pricing-share-message-field textarea {
  min-height: 230px;
  padding: 14px;
  resize: vertical;
}

.pricing-share-message-field textarea[readonly] {
  background: rgba(0, 0, 0, 0.025);
  cursor: default;
  resize: none;
}

.pricing-share-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.pricing-share-edit,
.pricing-share-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 11px 16px;
  color: #fff;
  background: #111;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  transition: opacity 160ms ease, transform 160ms ease;
}

.pricing-share-edit svg,
.pricing-share-copy svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pricing-share-edit:hover,
.pricing-share-copy:hover {
  opacity: 0.78;
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .pricing-share-composer {
    place-items: end center;
    padding: 0 10px;
  }

  .pricing-share-dialog {
    width: 100%;
    max-width: 430px;
    max-height: min(78svh, 650px);
    padding: 18px 16px max(10px, env(safe-area-inset-bottom));
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    transform: translate3d(0, 42px, 0);
  }

  .pricing-share-fields {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 18px;
  }

  .pricing-share-header {
    padding-bottom: 16px;
  }

  .pricing-share-header h2 {
    font-size: 22px;
  }

  .pricing-share-message-field {
    margin-top: 14px;
  }

  .pricing-share-message-field textarea {
    min-height: 145px;
  }

  .pricing-share-footer {
    margin-top: 14px;
  }

  .pricing-share-edit,
  .pricing-share-copy {
    flex: 1 1 0;
    min-width: 0;
    padding-right: 10px;
    padding-left: 10px;
  }
}

.pricing-guide-language-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  color: var(--black);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  transition: opacity 144ms ease;
}

.pricing-guide-language-toggle:hover {
  opacity: 0.58;
}

.pricing-guide-language-toggle input {
  width: 18px;
  height: 18px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  border: 1.4px solid rgba(0, 0, 0, 0.72);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background-color 144ms ease, border-color 144ms ease, transform 144ms ease;
}

.pricing-guide-language-toggle input::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  background: #fff;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 144ms ease, transform 144ms ease;
}

.pricing-guide-language-toggle input:checked {
  border-color: var(--black);
  background: var(--black);
}

.pricing-guide-language-toggle input:checked::after {
  opacity: 1;
  transform: scale(1);
}

.pricing-guide-language-toggle input:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.32);
  outline-offset: 3px;
}

.pricing-detail[hidden],
.pricing-library[hidden] {
  display: none;
}

.pricing-detail:not([hidden]) {
  display: block;
  animation: editorShellIn 416ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.pricing-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 54px);
  padding: 0 0 clamp(22px, 2.8vw, 48px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.pricing-detail-header button {
  color: var(--black);
  font-size: clamp(18px, 1.7vw, 30px);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  transition: opacity 144ms ease;
}

.pricing-detail-header button:hover {
  opacity: 0.58;
}

.pricing-detail-header > div {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.pricing-detail-header p,
.pricing-detail-header h2 {
  margin: 0;
}

.pricing-detail-header h2 {
  color: var(--black);
  font-size: clamp(44px, 6vw, 124px);
  font-weight: 600;
  line-height: 0.82;
}

.pricing-guide-board {
  --pricing-section-gap: clamp(28px, 4vw, 78px);

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pricing-section-gap);
}

.pricing-guide-board article {
  display: grid;
  align-content: start;
  gap: clamp(12px, 1.4vw, 24px);
  min-height: clamp(360px, 36vw, 620px);
  padding: clamp(22px, 3vw, 56px);
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}

.pricing-guide-board .pricing-package-featured {
  position: relative;
  min-height: 0;
  grid-template-columns: minmax(380px, 0.7fr) minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(60px, 8vw, 170px);
  row-gap: 0;
  border-right: 0;
  border-bottom: 0;
}

.pricing-guide-board .pricing-package-featured + .pricing-package-featured::before {
  content: "";
  position: absolute;
  top: calc(var(--pricing-section-gap) / -2);
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
}

.pricing-package-featured .pricing-package-heading {
  grid-column: 1;
  transform: translateY(clamp(10px, 1vw, 22px));
}

.pricing-package-featured .pricing-package-meta {
  grid-column: 2;
  grid-row: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-self: start;
  width: min(100%, 520px);
  align-self: start;
  transform: translateY(clamp(12px, 1.2vw, 26px));
}

.pricing-package-featured .pricing-package-meta div {
  padding: 0;
}

.pricing-package-featured .pricing-package-list {
  grid-column: 2;
  grid-row: 2;
}

.pricing-guide-board article:last-child {
  border-right: 0;
  border-bottom: 0;
}

.pricing-guide-board span {
  color: rgba(0, 0, 0, 0.38);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

.pricing-guide-board h2 {
  max-width: 9ch;
  margin: 0;
  color: var(--black);
  font-size: clamp(68px, 11vw, 220px);
  font-weight: 600;
  line-height: 0.72;
  text-transform: uppercase;
}

.pricing-guide-board h2.pricing-package-white-title {
  color: #b9b9b9;
  font-weight: 500;
}

.pricing-guide-board h2.pricing-package-small-title {
  max-width: none;
  font-size: clamp(30px, 3.4vw, 64px);
  line-height: 1;
}

/* A short heading no longer pushes the featured list clear of the meta row */
.pricing-package-featured:has(.pricing-package-small-title) .pricing-package-list {
  margin-top: clamp(30px, 3.2vw, 60px);
}

.pricing-package-heading {
  display: grid;
  align-content: start;
  gap: clamp(18px, 2vw, 36px);
}

.pricing-package-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
}

.pricing-package-meta div {
  display: grid;
  gap: 8px;
  padding: clamp(14px, 1.6vw, 28px) 0;
}

.pricing-package-meta div + div {
  padding-left: clamp(18px, 2vw, 36px);
}

.pricing-package-meta dt,
.pricing-package-meta dd {
  margin: 0;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

.pricing-package-meta dt {
  color: rgba(0, 0, 0, 0.4);
  font-size: 11px;
}

.pricing-package-meta dd {
  color: var(--black);
  font-size: clamp(16px, 1.35vw, 25px);
}

.pricing-package-list {
  display: grid;
  gap: clamp(10px, 1vw, 18px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pricing-package-list li {
  position: relative;
  padding-left: 1.35em;
  color: rgba(0, 0, 0, 0.64);
  font-size: clamp(14px, 1.18vw, 22px);
  font-weight: 600;
  line-height: 1.18;
}

.pricing-package-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--black);
}

/* STROE wordmark in pricing guides — same heavy mark as the settled home
   brand: far right on the title row (desktop), top-right on phones. Shown
   only inside an open guide, not on the guide library */
.pricing-brand {
  display: none;
  color: var(--black);
  font-family: var(--intro-logo-font);
  font-size: clamp(26px, 2.9vw, 42px);
  font-weight: 1000;
  line-height: 0.9;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  transform: scaleY(1.02);
  transition: color 144ms ease;
}

/* STROE and the hover word share one grid cell, right-aligned, so the mark is
   as wide as the longer word and the roll never shifts the header */
.pricing-panel.is-detail-open .pricing-brand {
  display: inline-grid;
}

.pricing-brand-word,
.pricing-brand-morph {
  grid-area: 1 / 1;
  justify-self: end;
  display: inline-flex;
  align-items: baseline;
  font: inherit;
  white-space: nowrap;
  transform: scaleY(1.02);
  transform-origin: center;
}

.pricing-brand-letter,
.pricing-brand-morph span {
  display: inline-block;
  margin-inline-end: -0.035em;
}

.pricing-brand-letter:last-child,
.pricing-brand-morph span:last-child {
  margin-inline-end: 0;
}

.pricing-brand:hover,
.pricing-brand:focus-visible {
  outline: 0;
}

@media (min-width: 641px) {
  /* Hover: a split-flap roll. Each STROE letter rolls up out of a slit while
     the matching WEBSITE letter rolls in from below, in lockstep, staggered
     from the right edge so the longer word unrolls into the header's empty
     middle. The clip is padded a touch so the heavy caps are never shaved. */
  .pricing-brand {
    clip-path: inset(-0.12em -0.04em);
    /* The width reserved for WEBSITE must not catch the pointer at rest:
       only STROE is live, and once hovered the whole mark stays live so
       sliding onto the longer word does not drop the hover */
    pointer-events: none;
  }

  .pricing-brand-word,
  .pricing-brand:is(:hover, :focus-visible) {
    pointer-events: auto;
  }

  .pricing-brand-letter,
  .pricing-brand-morph span {
    transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .pricing-brand-morph span {
    transform: translateY(130%);
  }

  .pricing-brand-letter:nth-last-child(2) {
    transition-delay: 30ms;
  }

  .pricing-brand-letter:nth-last-child(3) {
    transition-delay: 60ms;
  }

  .pricing-brand-letter:nth-last-child(4) {
    transition-delay: 90ms;
  }

  .pricing-brand-letter:nth-last-child(5) {
    transition-delay: 120ms;
  }

  .pricing-brand-morph span:nth-last-child(2) {
    transition-delay: 30ms;
  }

  .pricing-brand-morph span:nth-last-child(3) {
    transition-delay: 60ms;
  }

  .pricing-brand-morph span:nth-last-child(4) {
    transition-delay: 90ms;
  }

  .pricing-brand-morph span:nth-last-child(5) {
    transition-delay: 120ms;
  }

  .pricing-brand-morph span:nth-last-child(6) {
    transition-delay: 150ms;
  }

  .pricing-brand-morph span:nth-last-child(7) {
    transition-delay: 180ms;
  }

  .pricing-brand:is(:hover, :focus-visible) .pricing-brand-letter {
    transform: translateY(-130%);
  }

  .pricing-brand:is(:hover, :focus-visible) .pricing-brand-morph span {
    transform: translateY(0);
  }
}

@media (max-width: 640px) {
  .pricing-brand {
    position: absolute;
    left: auto;
    /* Centered on the "GHID DE PREȚURI" title row (fixed metrics on phones) */
    top: 25px;
    right: clamp(22px, 3.4vw, 62px);
    font-size: 24px;
    transform: translateY(-50%) scaleY(1.02);
  }

  /* Touch latches :hover on the last thing tapped (see .rail-menu), so phones
     skip the roll and keep the plain colour dim — via color, not opacity,
     which would re-raster the glyphs and make the letters shimmer */
  .pricing-brand-morph {
    display: none;
  }

  .pricing-brand:hover,
  .pricing-brand:focus-visible {
    color: rgba(17, 17, 17, 0.55);
  }
}

.pricing-info-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: clamp(28px, 4vw, 82px);
  padding: clamp(24px, 3vw, 56px) 0;
  color: var(--black);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-size: clamp(20px, 2.6vw, 52px);
  font-weight: 600;
  line-height: 0.86;
  text-align: left;
  text-transform: uppercase;
  transition: opacity 144ms ease;
}

.pricing-info-toggle::after {
  content: "+";
  font-size: clamp(18px, 2.2vw, 42px);
  font-weight: 500;
  line-height: 1;
}

.pricing-info-toggle[aria-expanded="true"]::after {
  content: "-";
}

.pricing-info-toggle:hover {
  opacity: 0.58;
}

.pricing-info-board {
  --pricing-info-gap: clamp(28px, 3.4vw, 68px);

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pricing-info-gap);
}

.pricing-info-board[hidden] {
  display: none;
}

.pricing-info-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: clamp(18px, 2vw, 34px);
  padding: clamp(22px, 3vw, 56px);
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 0;
}

.pricing-info-card:nth-child(2n) {
  border-right: 0;
}

.pricing-info-card-wide {
  grid-column: 1 / -1;
  border-right: 0;
  border-bottom: 0;
}

.pricing-info-card-wide::before {
  content: "";
  position: absolute;
  top: calc(var(--pricing-info-gap) / -2);
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
}

.pricing-info-card h2 {
  max-width: 12ch;
  margin: 0;
  color: var(--black);
  font-size: clamp(15px, 1.35vw, 26px);
  font-weight: 600;
  line-height: 0.96;
  text-transform: uppercase;
}

.pricing-check-list {
  display: grid;
  gap: clamp(10px, 1vw, 18px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pricing-check-list li {
  position: relative;
  padding-left: 1.55em;
  color: rgba(0, 0, 0, 0.64);
  font-size: clamp(14px, 1.18vw, 22px);
  font-weight: 600;
  line-height: 1.18;
}

.pricing-check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--black);
}

.pricing-guide-board p {
  max-width: 34ch;
  margin: 0;
  color: rgba(0, 0, 0, 0.48);
  font-size: clamp(13px, 1vw, 17px);
  font-weight: 600;
  line-height: 1.25;
  text-transform: uppercase;
}

.editor-header p {
  margin: 0 0 8px;
  color: rgba(0, 0, 0, 0.46);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.inquiry-header p {
  margin: -22px 0 0;
  color: var(--black);
  font-size: clamp(68px, 8.4vw, 164px);
  font-weight: 600;
  line-height: 0.78;
  text-transform: uppercase;
}

body[data-active-gallery="films"] .inquiry-header p {
  color: var(--black);
}

.editor-gallery-switch {
  display: inline-flex;
  gap: clamp(12px, 1.2vw, 20px);
  flex-wrap: wrap;
  margin-top: 0;
}

.editor-gallery-switch button {
  min-height: 0;
  padding: 0 0 6px;
  color: rgba(0, 0, 0, 0.38);
  border-bottom: 1px solid transparent;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
  transition: color 176ms ease, border-color 176ms ease;
}

.editor-gallery-switch button.is-selected {
  color: var(--black);
  background: transparent;
  border-color: currentColor;
}

.inquiry-header h2 {
  max-width: 12ch;
  margin: 0;
  font-family: var(--display-serif);
  font-size: clamp(48px, 6.2vw, 112px);
  font-weight: 600;
  line-height: 0.86;
}

.editor-close {
  position: relative;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  min-height: 36px;
  padding: 8px 12px;
  color: rgba(0, 0, 0, 0.72);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 0.9;
  text-transform: uppercase;
  cursor: pointer;
  isolation: isolate;
  transition: color 144ms ease, background 144ms ease, border-color 144ms ease, transform 144ms ease;
}

.editor-close:hover {
  color: var(--black);
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.26);
  transform: translateY(-1px);
}

.inquiry-close {
  --menu-close-size: clamp(52px, 4.4vw, 82px);
  --menu-close-stroke: clamp(3.4px, 0.28vw, 4.8px);
  top: calc(clamp(18px, 2.5vw, 46px) - 9px);
  z-index: 8;
  color: var(--black);
  width: var(--menu-close-size);
  height: var(--menu-close-size);
  display: grid;
  place-items: center;
  padding: 0;
  mix-blend-mode: normal;
  writing-mode: horizontal-tb;
  transform-origin: center;
  transition:
    opacity 220ms ease,
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 520ms ease;
}

body.admin-page .inquiry-close {
  top: calc(clamp(18px, 2.5vw, 46px) - 9px);
  right: max(8px, calc(clamp(18px, 2.4vw, 42px) - 18px));
}

body[data-active-gallery="films"] .inquiry-close {
  color: var(--white);
}

.inquiry-close span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.inquiry-close::before,
.inquiry-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 88%;
  height: var(--menu-close-stroke);
  background: currentColor;
  border-radius: 999px;
  transform-origin: center;
  transition:
    width 960ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 960ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 420ms ease;
}

.inquiry-close:is(:hover, :focus-visible)::before,
.inquiry-close:is(:hover, :focus-visible)::after {
  opacity: 1;
}

.inquiry-close::before {
  transform: translate(-50%, -50%) rotate(43deg) scaleX(0.92);
}

.inquiry-close::after {
  width: 64%;
  transform: translate(-50%, -50%) rotate(-43deg) translateX(8%) scaleX(1);
}

.inquiry-close:is(:hover, :focus-visible) {
  color: var(--black);
  transform: rotate(-1.5deg) scale(1.08);
}

.inquiry-close:is(:hover, :focus-visible)::before {
  width: 78%;
  transform: translate(-50%, -50%) rotate(38deg) translateX(-3%) scaleX(1);
}

.inquiry-close:is(:hover, :focus-visible)::after {
  width: 92%;
  transform: translate(-50%, -50%) rotate(-48deg) translateX(2%) scaleX(0.94);
}

body[data-active-gallery="films"] .inquiry-close:is(:hover, :focus-visible) {
  color: var(--white);
}

.editor-layout {
  display: grid;
  grid-template-columns: minmax(210px, 0.3fr) minmax(0, 1fr);
  gap: clamp(26px, 4.2vw, 76px);
  align-items: start;
}

.editor-single-card .editor-gallery-switch,
.editor-single-card .editor-card-panel {
  display: none;
}

.editor-single-card .editor-layout {
  grid-template-columns: minmax(0, 1080px);
  justify-content: center;
}

.editor-card-panel {
  display: grid;
  gap: clamp(18px, 2vw, 32px);
}

.editor-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.editor-add-card {
  width: max-content;
  padding: 0 0 8px;
  color: var(--black);
  border-bottom: 1px solid currentColor;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

.editor-card-list {
  display: grid;
  align-content: start;
  gap: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.editor-card-list button {
  min-height: 0;
  padding: 15px 0;
  color: rgba(0, 0, 0, 0.42);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 0.94;
  text-align: left;
  text-transform: uppercase;
  transition: color 144ms ease, padding-left 176ms ease;
}

.editor-card-list button.is-selected {
  color: var(--black);
  background: transparent;
  border-color: rgba(0, 0, 0, 0.22);
  padding-left: 14px;
}

.editor-form {
  display: grid;
  gap: clamp(30px, 3.6vw, 64px);
}

.inquiry-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  align-items: start;
  background: #ffffff;
}

.submissions-list,
.site-deleted-list {
  display: grid;
  gap: 0;
}

.submissions-empty {
  margin: 0;
  color: rgba(0, 0, 0, 0.42);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

.submission-card {
  display: grid;
  gap: 0;
  padding: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.submission-card summary {
  list-style: none;
}

.submission-card summary::-webkit-details-marker {
  display: none;
}

.submission-summary,
.submission-card footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.submission-summary {
  cursor: pointer;
  padding: clamp(16px, 1.7vw, 28px) 0;
  transition: opacity 144ms ease;
}

.submission-summary:hover {
  opacity: 0.58;
}

.submission-card[open] .submission-summary {
  opacity: 1;
}

.submission-summary > div:first-child {
  min-width: 0;
}

.submission-summary-meta {
  display: grid;
  justify-items: end;
  gap: 8px;
  flex: 0 0 auto;
}

.submission-card[open] .submission-summary-meta em {
  color: var(--black);
}

.submission-card[open] .submission-summary-meta em::before {
  content: "Close";
}

.submission-card[open] .submission-summary-meta em {
  font-size: 0;
}

.submission-card[open] .submission-summary-meta em::before {
  font-size: 11px;
}

.submission-summary span,
.submission-summary i,
.submission-summary em,
.submission-row span {
  color: rgba(0, 0, 0, 0.42);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

.submission-card h3 {
  margin: 7px 0 0;
  color: var(--black);
  font-size: clamp(18px, 1.8vw, 34px);
  font-weight: 600;
  line-height: 0.98;
  text-transform: uppercase;
}

.submission-summary p {
  margin: 8px 0 0;
  max-width: min(640px, 72vw);
  overflow: hidden;
  color: rgba(0, 0, 0, 0.5);
  font-size: clamp(12px, 0.9vw, 15px);
  font-weight: 600;
  line-height: 1.15;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.submission-body {
  display: grid;
  gap: clamp(14px, 1.5vw, 24px);
  padding: 0 0 clamp(20px, 2.4vw, 40px);
}

.submission-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.submission-row {
  display: grid;
  gap: 8px;
  min-width: 0;
  min-height: 74px;
  padding: 16px 18px 18px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.submission-row:nth-child(odd) {
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}

.submission-row:nth-child(even) {
  padding-left: 18px;
}

.submission-row strong {
  color: var(--black);
  /* Only the card title keeps the big bold treatment — the submission's own
     content reads smaller and unbolded so the two never compete */
  font-size: clamp(13px, 0.95vw, 16px);
  font-weight: 400;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.submission-card footer {
  justify-content: flex-start;
}

.submission-card footer button {
  color: rgba(0, 0, 0, 0.52);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  transition: color 144ms ease;
}

.submission-card footer button:hover {
  color: var(--black);
}

@media (max-width: 640px) {
  .submissions-panel,
  .submissions-shell {
    max-width: 100%;
    overflow-x: hidden;
  }

  .submission-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
  }

  .submission-summary > div:first-child,
  .submission-summary-meta,
  .submission-body,
  .submission-fields,
  .submission-row {
    min-width: 0;
  }

  .submission-summary p {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .submission-card h3,
  .submission-row strong {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .submission-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .submission-row,
  .submission-row:nth-child(even) {
    padding-left: 0;
  }

  .submission-row:nth-child(odd) {
    border-right: 0;
  }

  .submission-card footer {
    flex-wrap: wrap;
  }
}

.site-deleted-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(18px, 1.9vw, 32px) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.site-deleted-card > div {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.site-deleted-card > .site-deleted-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  gap: 18px;
}

.site-deleted-card span,
.site-deleted-card em {
  color: rgba(0, 0, 0, 0.42);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

.site-deleted-card strong {
  color: var(--black);
  font-size: clamp(18px, 1.8vw, 34px);
  font-weight: 600;
  line-height: 0.98;
  text-transform: uppercase;
}

.site-deleted-card button {
  flex: 0 0 auto;
  color: rgba(0, 0, 0, 0.52);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  transition: color 144ms ease;
}

.site-deleted-card button:hover {
  color: var(--black);
}

.editor-form label {
  display: grid;
  align-content: center;
  gap: 12px;
  min-height: 86px;
  padding: 18px 22px 20px 0;
  color: rgba(0, 0, 0, 0.42);
  border-bottom: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.15;
  text-transform: uppercase;
}

.editor-section {
  display: grid;
  align-content: start;
  gap: clamp(14px, 1.5vw, 24px);
}

.editor-section h3 {
  margin: 0;
  color: rgba(0, 0, 0, 0.42);
  font-family: var(--sans);
  font-size: clamp(13px, 0.95vw, 16px);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

/* Share block sits lower, separated from the upload section by a rule */
.editor-section-share {
  margin-top: clamp(14px, 1.6vw, 26px);
  padding-top: clamp(24px, 2.6vw, 40px);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.editor-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.055);
}

.editor-section-home .editor-section-grid {
  grid-template-columns: minmax(320px, 1fr) minmax(420px, 1.15fr);
}

.editor-section-grid label:nth-child(odd) {
  border-right: 1px solid rgba(0, 0, 0, 0.055);
}

.editor-section-grid label:nth-child(even) {
  padding-left: 22px;
}

.editor-toggle-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(0, 0, 0, 0.055);
}

.editor-section-grid .editor-toggle-field {
  padding-top: 18px;
  padding-left: 0;
  border-right: 0;
  cursor: pointer;
  pointer-events: auto;
}

.editor-toggle-field + .editor-toggle-field {
  padding-left: 22px;
  border-left: 1px solid rgba(0, 0, 0, 0.055);
}

.editor-toggle-row {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  color: var(--black);
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
  pointer-events: auto;
}

.editor-toggle-row input {
  position: relative;
  width: 42px;
  height: 22px;
  margin: 0;
  border: 1px solid currentColor;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}

.editor-toggle-row input::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-50%);
  transition: transform 176ms cubic-bezier(0.16, 1, 0.3, 1);
}

.editor-toggle-row input:checked::after {
  transform: translate(20px, -50%);
}

body[data-active-gallery="films"] .editor-panel {
  background: rgba(255, 255, 255, 0.92);
}

body[data-active-gallery="films"] .editor-shell,
body[data-active-gallery="films"] .editor-header {
  color: var(--black);
  background: #ffffff;
}

body[data-active-gallery="films"] .editor-toggle-grid {
  border-top-color: rgba(0, 0, 0, 0.055);
}

body[data-active-gallery="films"] .editor-toggle-field {
  color: rgba(0, 0, 0, 0.42);
}

body[data-active-gallery="films"] .editor-toggle-field + .editor-toggle-field {
  border-left-color: rgba(0, 0, 0, 0.055);
}

body[data-active-gallery="films"] .editor-toggle-row {
  color: var(--black);
}

body[data-active-gallery="films"] .editor-toggle-row input {
  color: var(--black);
  opacity: 1;
  pointer-events: auto;
}

.inquiry-form label {
  display: grid;
  align-content: center;
  grid-template-rows: auto minmax(clamp(18px, 1.6vw, 32px), auto);
  gap: clamp(5px, 0.55vw, 10px);
  min-height: clamp(82px, 7.4vw, 112px);
  padding: clamp(18px, 2vw, 34px) clamp(24px, 2.7vw, 48px);
  color: rgba(0, 0, 0, 0.22);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-size: clamp(18px, 1.65vw, 34px);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 0.92;
  text-transform: uppercase;
}

body[data-active-gallery="films"] .inquiry-form label {
  color: rgba(255, 255, 255, 0.3);
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.inquiry-form label:nth-child(odd) {
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}

body[data-active-gallery="films"] .inquiry-form label:nth-child(odd) {
  border-right-color: rgba(255, 255, 255, 0.14);
}

.inquiry-form label:nth-last-of-type(1),
.inquiry-form label:nth-last-of-type(2) {
  grid-column: span 1;
}

.inquiry-field-title {
  display: block;
  position: relative;
  z-index: 1;
  transform: translate3d(0, clamp(19px, 1.65vw, 34px), 0) scale(1);
  transform-origin: left top;
  transition:
    color 220ms ease,
    opacity 220ms ease,
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.inquiry-form label.is-inquiry-field-active .inquiry-field-title,
.inquiry-form label.is-inquiry-field-filled .inquiry-field-title {
  color: rgba(0, 0, 0, 0.72);
  opacity: 0.82;
  transform: translate3d(0, 0, 0) scale(0.54);
}

body[data-active-gallery="films"] .inquiry-form label.is-inquiry-field-active .inquiry-field-title,
body[data-active-gallery="films"] .inquiry-form label.is-inquiry-field-filled .inquiry-field-title {
  color: rgba(255, 255, 255, 0.78);
}

.inquiry-form .inquiry-details-field {
  grid-column: 1 / -1;
}

.editor-form input[type="text"],
.editor-form input[type="url"],
.editor-form input[type="file"],
.editor-form textarea {
  width: 100%;
  min-height: 52px;
  padding: 0;
  color: var(--black);
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  outline: none;
  transition: border-color 144ms ease;
}

.editor-form input[type="text"]:focus,
.editor-form input[type="url"]:focus,
.editor-form input[type="file"]:focus,
.editor-form textarea:focus {
  color: var(--black);
}

/* Detalii holds a sentence now, so it wraps and shows what is there instead of
   scrolling it past the edge one character at a time. */
.editor-form textarea {
  min-height: 96px;
  padding: 6px 0 0;
  line-height: 1.36;
  resize: vertical;
  overflow-y: auto;
}

.editor-form input[type="file"] {
  padding-top: 10px;
  font-size: 14px;
}

.editor-form input[type="file"]::file-selector-button {
  margin-right: 14px;
  padding: 0;
  color: var(--black);
  border: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.inquiry-form input,
.inquiry-form select,
.inquiry-form textarea {
  width: 100%;
  min-height: 0;
  padding: 0;
  color: var(--black);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--sans);
  font-size: clamp(16px, 1.28vw, 27px);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 0.98;
  opacity: 0;
  outline: none;
  transform: translate3d(0, 8px, 0);
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    opacity 260ms ease,
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
}

body[data-active-gallery="films"] .inquiry-form input,
body[data-active-gallery="films"] .inquiry-form select,
body[data-active-gallery="films"] .inquiry-form textarea {
  color: var(--white);
}

.inquiry-form label.is-inquiry-field-active input,
.inquiry-form label.is-inquiry-field-active select,
.inquiry-form label.is-inquiry-field-active textarea,
.inquiry-form label.is-inquiry-field-filled input,
.inquiry-form label.is-inquiry-field-filled select,
.inquiry-form label.is-inquiry-field-filled textarea {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.inquiry-form input:focus,
.inquiry-form select:focus,
.inquiry-form textarea:focus {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.inquiry-form input,
.inquiry-form select {
  height: auto;
}

.inquiry-form textarea {
  min-height: clamp(74px, 5.8vw, 104px);
  line-height: 1.25;
  resize: vertical;
}

.inquiry-form input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.inquiry-form input[type="number"]::-webkit-inner-spin-button,
.inquiry-form input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.inquiry-form select {
  appearance: auto;
}

.inquiry-form input::placeholder,
.inquiry-form textarea::placeholder {
  color: rgba(0, 0, 0, 0.18);
}

body[data-active-gallery="films"] .inquiry-form input::placeholder,
body[data-active-gallery="films"] .inquiry-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.24);
}

.editor-media-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(14px, 1.6vw, 28px);
  padding-bottom: clamp(12px, 1.2vw, 20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.editor-media-header h3 {
  flex: 0 0 auto;
}

.editor-upload {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: clamp(12px, 1.2vw, 22px);
  width: 100%;
}

.editor-upload-primary,
.editor-upload-secondary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(12px, 1.1vw, 20px);
}

.editor-upload-secondary {
  justify-content: flex-start;
}

.editor-media-toolbar {
  margin-left: auto;
  align-self: flex-start;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.editor-media-count {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 0 10px;
  color: rgba(0, 0, 0, 0.48);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.editor-media-action {
  min-height: 34px;
  padding: 0 14px;
  color: var(--black);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
}

.editor-media-action:hover,
.editor-media-action:focus-visible {
  background: rgba(255, 255, 255, 0.94);
  outline: 0;
}

.editor-media-action:disabled {
  opacity: 0.34;
  cursor: default;
}

.site-assets-upload-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 12px;
  width: 100%;
}

.editor-share-settings {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  width: 100%;
}

.editor-share-settings label {
  display: grid;
  gap: 6px;
  color: rgba(0, 0, 0, 0.48);
  font-size: clamp(9px, 0.68vw, 11px);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

.editor-share-settings input,
.editor-form .editor-share-settings input[type="text"],
.editor-share-settings textarea {
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
  padding: 10px 11px;
  color: var(--black);
  background: rgba(0, 0, 0, 0.035);
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: none;
}

.editor-share-settings textarea {
  min-height: 58px;
  resize: vertical;
}

.editor-share-settings input:focus,
.editor-form .editor-share-settings input[type="text"]:focus,
.editor-share-settings textarea:focus {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.22);
  outline: 0;
}

.site-assets-upload-grid label {
  justify-self: stretch;
  width: 100%;
  font-size: clamp(9px, 0.68vw, 11px);
  line-height: 1.08;
  text-align: center;
}

.editor-upload label {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-height: 0;
  padding: 0 0 6px;
  color: var(--black);
  border-bottom: 1px solid rgba(0, 0, 0, 0.22);
  font-size: clamp(12px, 0.82vw, 14px);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
}

.editor-upload label:hover {
  border-bottom-color: var(--black);
}

.editor-upload input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

.editor-youtube-field {
  min-height: 0;
  padding-right: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.055);
}

.editor-youtube-field > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(12px, 1.5vw, 22px);
}

.editor-link-actions {
  display: grid;
  justify-items: end;
  gap: 10px;
}

.editor-link-thumbnail {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: max-content;
  padding: 0 0 6px;
  color: var(--black);
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
}

.editor-link-thumbnail input {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}

.editor-youtube-field button {
  width: max-content;
  padding: 0 0 6px;
  color: var(--black);
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

.editor-media-manager {
  display: grid;
  gap: 0;
  padding-top: 0;
}

.editor-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 12px;
  padding-top: 0;
  border-top: 0;
}

.editor-media-item {
  position: relative;
  aspect-ratio: 3 / 4;
  margin: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.08);
  transition: opacity 128ms ease, outline-color 128ms ease, transform 128ms ease;
}

.editor-media-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border: 0 solid transparent;
  transition: border-color 128ms ease;
}

.editor-media-item.is-editor-media-draggable {
  cursor: grab;
}

.editor-media-item.is-editor-media-draggable:active {
  cursor: grabbing;
}

.editor-media-item.is-editor-media-dragging {
  opacity: 0.42;
  transform: scale(0.96);
}

.editor-media-item.is-editor-media-drop-target {
  outline: 2px solid rgba(0, 0, 0, 0.72);
  outline-offset: -2px;
}

.editor-media-item.is-editor-media-cover {
  outline: 0;
}

.editor-media-item.is-editor-cover-crop-ready {
  cursor: grab;
  touch-action: none;
}

.editor-media-item.is-editor-cover-cropping,
.editor-media-item.is-editor-cover-cropping * {
  cursor: grabbing !important;
}

.editor-media-item.is-editor-media-cover::before {
  border-width: 3px;
  border-color: #ff2a2a;
}

.editor-media-item img,
.editor-media-item video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  cursor: zoom-in;
}

/* Share preview and favicon are square crops; drag to reframe the window */
[data-site-assets-list] .editor-media-item[data-site-asset-slot="shareImage"],
[data-site-assets-list] .editor-media-item[data-site-asset-slot="appleTouchIcon"],
[data-site-assets-list] .editor-media-item[data-site-asset-slot="favicon"] {
  aspect-ratio: 1 / 1;
}

[data-site-assets-list] .editor-media-item[data-site-asset-slot="shareImage"] img,
[data-site-assets-list] .editor-media-item[data-site-asset-slot="appleTouchIcon"] img,
[data-site-assets-list] .editor-media-item[data-site-asset-slot="favicon"] img {
  cursor: move;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.editor-media-item.is-editor-cover-crop-ready img,
.editor-media-item.is-editor-cover-crop-ready video {
  cursor: grab;
  user-select: none;
}

.editor-media-item.is-editor-youtube-item::after {
  content: "VIDEO LINK";
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 1;
  padding: 5px 7px;
  color: var(--white);
  background: rgba(0, 0, 0, 0.68);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

.editor-media-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--black);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  transition: background 128ms ease, transform 128ms ease;
}

.editor-media-delete:hover {
  background: var(--white);
  transform: scale(1.08);
}

.editor-media-actions {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: grid;
  gap: 5px;
}

.editor-media-cover,
.editor-media-thumbnail {
  position: relative;
  min-height: 30px;
  display: grid;
  place-items: center;
  color: var(--black);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(0, 0, 0, 0.2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
  transition: background 128ms ease, opacity 128ms ease;
  cursor: pointer;
  overflow: hidden;
}

.editor-media-thumbnail {
  min-height: 24px;
  padding: 0 9px;
  font-size: 10px;
  font-weight: 600;
}

.editor-form .editor-media-thumbnail {
  min-height: 24px;
  padding: 0 9px;
  align-content: center;
  gap: 0;
}

.editor-media-thumbnail input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.editor-media-preview {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: block !important;
  box-sizing: border-box;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  padding: 0 !important;
  background: var(--white);
  overflow: hidden !important;
  overscroll-behavior: contain;
}

/* Lightbox chrome: bin + artful X, both riding the top-right corner */
.editor-media-preview-close,
.editor-media-preview-delete {
  position: fixed;
  top: clamp(12px, 1.3vw, 20px);
  z-index: 12;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.editor-media-preview-close {
  right: clamp(18px, 2vw, 34px);
}

.editor-media-preview-delete {
  right: calc(clamp(18px, 2vw, 34px) + clamp(34px, 2.6vw, 44px) + 10px);
}

.editor-media-preview-frame {
  position: fixed !important;
  top: 50vh !important;
  left: 50vw !important;
  width: min(76vw, 1040px) !important;
  height: min(84vh, 860px) !important;
  display: block !important;
  min-width: 0;
  min-height: 0;
  margin: 0 !important;
  overflow: hidden !important;
  transform: translate3d(-50%, -50%, 0) !important;
}

.editor-media-preview-frame img,
.editor-media-preview-frame video {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
}

.editor-media-preview-nav {
  position: fixed;
  top: 50%;
  z-index: 2;
  width: clamp(38px, 4.4vw, 58px);
  height: clamp(38px, 4.4vw, 58px);
  display: grid;
  place-items: center;
  color: var(--black);
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  font-family: var(--sans);
  font-size: clamp(30px, 3.8vw, 48px);
  font-weight: 400;
  line-height: 0.8;
  transform: translateY(-50%);
  cursor: pointer;
}

.editor-media-preview-prev {
  left: clamp(16px, 2.6vw, 42px);
}

.editor-media-preview-next {
  right: clamp(16px, 2.6vw, 42px);
}

.editor-media-preview-nav:hover,
.editor-media-preview-nav:focus-visible {
  background: #ffffff;
  outline: 0;
}

@media (min-width: 641px) {
  .editor-media-preview-frame {
    width: min(76vw, 1040px) !important;
    height: min(84vh, 860px) !important;
  }
}

.editor-media-cover:hover,
.editor-media-thumbnail:hover {
  background: var(--white);
}

.editor-media-cover:disabled {
  cursor: default;
  opacity: 0.78;
}

.editor-media-empty {
  margin: 0;
  padding: 28px 0 8px;
  color: rgba(0, 0, 0, 0.34);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 13px;
  text-transform: uppercase;
}

.editor-media-grid > .editor-media-empty {
  border-top: 0;
}

.editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: clamp(10px, 1.4vw, 22px);
  margin-top: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.editor-actions button {
  min-height: 0;
  padding: 0 0 6px;
  color: var(--black);
  border-bottom: 1px solid currentColor;
  background: transparent;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.editor-actions span {
  color: rgba(0, 0, 0, 0.44);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.editor-progress {
  min-width: min(240px, 42vw);
  display: grid;
  gap: 7px;
  justify-items: stretch;
}

.editor-progress[hidden] {
  display: none;
}

.editor-progress span {
  color: rgba(0, 0, 0, 0.54);
  font-size: 11px;
  line-height: 1;
  text-align: right;
}

.editor-progress-track {
  height: 2px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.14);
}

.editor-progress-track i {
  width: 0%;
  height: 100%;
  display: block;
  background: rgba(0, 0, 0, 0.46);
  transition: width 128ms linear;
}

.inquiry-actions {
  grid-column: 1 / -1;
  display: grid;
  align-items: start;
  justify-content: stretch;
  gap: 12px;
  margin-top: 0;
  padding: clamp(22px, 2.4vw, 42px) clamp(26px, 3vw, 54px);
  border-top: 0;
}

.inquiry-action-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.inquiry-actions button {
  position: relative;
  width: auto;
  min-width: clamp(250px, 22vw, 430px);
  min-height: clamp(54px, 5.2vw, 92px);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(14px, 1.4vw, 28px);
  padding: clamp(12px, 1.2vw, 22px) 0;
  color: var(--black);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: clamp(30px, 2.55vw, 58px);
  font-weight: 600;
  line-height: 0.92;
  text-transform: uppercase;
  overflow: hidden;
  contain: layout paint;
  isolation: isolate;
  transform: translate3d(0, 0, 0);
  transition: color 144ms ease, border-color 144ms ease, opacity 144ms ease, transform 336ms cubic-bezier(0.16, 1, 0.3, 1);
}

body[data-active-gallery="films"] .inquiry-actions button {
  color: var(--white);
}

.inquiry-actions button::before,
.inquiry-actions button::after {
  content: "";
  display: block;
  flex: 0 0 auto;
  background: currentColor;
  transition: transform 336ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.inquiry-actions button::before {
  display: none;
  content: none;
}

.inquiry-actions button::after {
  order: 2;
  width: clamp(82px, 8.6vw, 174px);
  height: clamp(38px, 4vw, 78px);
  clip-path: polygon(0 39%, 62% 39%, 62% 17%, 100% 50%, 62% 83%, 62% 61%, 0 61%);
  transform-origin: 18% 50%;
  pointer-events: none;
}

.inquiry-actions button span {
  order: 1;
  display: inline-block;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  transition: transform 336ms cubic-bezier(0.16, 1, 0.3, 1);
}

.inquiry-actions button:hover {
  color: rgba(0, 0, 0, 0.58);
}

.inquiry-actions button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.inquiry-actions button.is-sending span {
  animation: inquirySendText 920ms cubic-bezier(0.45, 0, 0.55, 1) infinite both;
}

.inquiry-actions button.is-sending::after {
  background-image: linear-gradient(90deg, currentColor 0%, currentColor 36%, rgba(255, 255, 255, 0.98) 46%, rgba(255, 255, 255, 0.98) 54%, currentColor 64%, currentColor 100%);
  background-repeat: no-repeat;
  background-size: 240% 100%;
  animation: inquirySendArrow 920ms cubic-bezier(0.45, 0, 0.55, 1) infinite both, inquirySendArrowProgress 1380ms linear infinite;
}

.inquiry-actions button.is-sent span {
  animation: inquirySentText 608ms linear both;
}

.inquiry-actions button.is-sent::after {
  animation: inquirySentArrowMerge 608ms linear both;
}

@keyframes inquirySendText {
  0% {
    transform: translate3d(0, 0, 0);
  }

  10% {
    transform: translate3d(0.006em, -0.012em, 0);
  }

  20% {
    transform: translate3d(0.012em, -0.026em, 0);
  }

  30% {
    transform: translate3d(0.016em, -0.038em, 0);
  }

  40% {
    transform: translate3d(0.012em, -0.046em, 0);
  }

  50% {
    transform: translate3d(0.004em, -0.048em, 0);
  }

  60% {
    transform: translate3d(-0.004em, -0.04em, 0);
  }

  70% {
    transform: translate3d(-0.006em, -0.028em, 0);
  }

  80% {
    transform: translate3d(-0.004em, -0.016em, 0);
  }

  90% {
    transform: translate3d(-0.001em, -0.006em, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes inquirySendArrow {
  0% {
    transform: translate3d(0, 0, 0) scaleX(1);
  }

  8% {
    transform: translate3d(0.04em, 0, 0) scaleX(1.006);
  }

  16% {
    transform: translate3d(0.12em, 0, 0) scaleX(1.014);
  }

  24% {
    transform: translate3d(0.22em, 0, 0) scaleX(1.022);
  }

  32% {
    transform: translate3d(0.32em, 0, 0) scaleX(1.028);
  }

  42% {
    transform: translate3d(0.42em, 0, 0) scaleX(1.032);
  }

  52% {
    transform: translate3d(0.48em, 0, 0) scaleX(1.026);
  }

  62% {
    transform: translate3d(0.42em, 0, 0) scaleX(1.016);
  }

  72% {
    transform: translate3d(0.28em, 0, 0) scaleX(1.006);
  }

  84% {
    transform: translate3d(0.12em, 0, 0) scaleX(0.998);
  }

  92% {
    transform: translate3d(0.028em, 0, 0) scaleX(0.998);
  }

  100% {
    transform: translate3d(0, 0, 0) scaleX(1);
  }
}

@keyframes inquirySendArrowProgress {
  0% {
    background-position: 120% 0;
  }

  100% {
    background-position: -120% 0;
  }
}

@keyframes inquirySentText {
  0% {
    opacity: 0;
    transform: translate3d(0.22em, 0, 0) scale(0.985);
  }

  12% {
    opacity: 0.16;
    transform: translate3d(0.19em, 0, 0) scale(0.988);
  }

  24% {
    opacity: 0.38;
    transform: translate3d(0.145em, 0, 0) scale(0.992);
  }

  36% {
    opacity: 0.62;
    transform: translate3d(0.096em, 0, 0) scale(0.997);
  }

  48% {
    opacity: 0.82;
    transform: translate3d(0.05em, 0, 0) scale(1.002);
  }

  60% {
    opacity: 0.94;
    transform: translate3d(0.016em, 0, 0) scale(1.004);
  }

  72% {
    opacity: 1;
    transform: translate3d(-0.006em, 0, 0) scale(1.003);
  }

  86% {
    opacity: 1;
    transform: translate3d(0.002em, 0, 0) scale(1.001);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes inquirySentArrowMerge {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scaleX(1);
  }

  10% {
    opacity: 0.98;
    transform: translate3d(-0.045em, 0, 0) scaleX(0.94);
  }

  20% {
    opacity: 0.94;
    transform: translate3d(-0.12em, 0, 0) scaleX(0.84);
  }

  32% {
    opacity: 0.84;
    transform: translate3d(-0.23em, 0, 0) scaleX(0.7);
  }

  44% {
    opacity: 0.68;
    transform: translate3d(-0.36em, 0, 0) scaleX(0.54);
  }

  56% {
    opacity: 0.48;
    transform: translate3d(-0.5em, 0, 0) scaleX(0.38);
  }

  68% {
    opacity: 0.3;
    transform: translate3d(-0.63em, 0, 0) scaleX(0.24);
  }

  82% {
    opacity: 0.12;
    transform: translate3d(-0.76em, 0, 0) scaleX(0.12);
  }

  100% {
    opacity: 0;
    transform: translate3d(-0.92em, 0, 0) scaleX(0);
  }
}

.inquiry-actions [data-inquiry-status] {
  color: rgba(0, 0, 0, 0.48);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
}

.inquiry-actions [data-inquiry-status]:empty {
  display: none;
}

@media (max-width: 980px) {
  .portfolio-view {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-view {
    display: flex;
    align-items: stretch;
    height: 100svh;
    min-height: 100svh;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    touch-action: pan-x;
  }

  .project-copy {
    flex-basis: 52vw;
    width: 52vw;
    min-height: 100svh;
    padding: 112px 52px 58px;
  }

  .project-location {
    top: 36%;
  }

  .project-copy h1 {
    font-size: clamp(62px, 13vw, 128px);
  }

  .project-image {
    --rail-gap: clamp(1px, 0.3vw, 1.5px);
    position: static;
    flex: 0 0 auto;
    width: max-content;
    min-width: 78vw;
    margin: 0;
    height: 100svh;
    min-height: 100svh;
    padding: 0.6cm 28px 0.6cm 0;
  }

  .project-carousel-track {
    height: 100%;
    display: flex;
    column-count: auto;
    column-gap: normal;
    align-items: flex-start;
    gap: var(--rail-gap);
    width: max-content;
    padding-top: 0;
  }

  .project-carousel-item {
    flex-basis: auto;
    width: auto;
    height: calc(100svh - 1.2cm);
    margin: 0;
    min-height: 0;
    break-inside: auto;
  }

  .project-carousel-item.is-project-intro-media {
    position: relative;
    top: auto;
    right: auto;
    z-index: auto;
    width: auto;
    height: calc(100svh - 1.2cm);
    aspect-ratio: var(--project-media-aspect);
  }

}

@media (max-width: 640px) {
  :root {
    --home-title-font-size: 22px;
    --home-gallery-switch-font-size: 25.3px;
  }

  /* In an open mobile gallery the controls stay fixed individually, while
     their shared wrapper no longer creates a fullscreen Safari layer. */
  body.project-open .site-chrome,
  body.project-transitioning .site-chrome,
  body.project-closing .site-chrome {
    display: contents;
  }

  body.project-open .site-chrome > *,
  body.project-transitioning .site-chrome > *,
  body.project-closing .site-chrome > * {
    mix-blend-mode: difference;
  }


  body[data-active-gallery="films"]:not(.project-open):not(.project-transitioning):not(.project-closing) .portfolio-view {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-active-gallery="films"]:not(.project-open):not(.project-transitioning):not(.project-closing) .tile > .project-youtube-player.is-playing:not(.is-linked-video-paused) {
    transform: scale(1.01) !important;
  }

  /* Shorts remain 9:16 cards, but YouTube receives a wider internal viewport
     so its native controls do not disappear at half-column mobile widths. */
  body[data-active-gallery="films"]:not(.project-open):not(.project-transitioning):not(.project-closing) .tile.is-film-tall > .project-youtube-player.is-playing:not(.is-linked-video-paused) iframe[data-project-linked-player="youtube"] {
    inset: 0 auto auto 0;
    width: 200%;
    height: 200%;
    transform: scale(0.5);
    transform-origin: top left;
    animation: youtubeTallCardFrameIn 416ms cubic-bezier(0.16, 1, 0.3, 1) 72ms both;
  }

  body[data-active-gallery="films"] .tile.is-film-tall iframe[data-project-linked-player="youtube"]:fullscreen,
  body[data-active-gallery="films"] .tile.is-film-tall iframe[data-project-linked-player="youtube"]:-webkit-full-screen {
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    opacity: 1;
    transform: none !important;
    animation: none !important;
  }

  .site-chrome,
  .site-chrome *,
  .portfolio-view,
  .portfolio-view * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  .portfolio-view img,
  .portfolio-view video {
    -webkit-user-drag: none;
    user-drag: none;
  }

  body[data-active-gallery="films"] .portfolio-view {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-seo-footer {
    gap: 42px;
    padding: 58px 16px 8px;
  }

  .home-seo-footer-top {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .home-seo-contact,
  .home-seo-meta {
    justify-items: center;
    font-size: 12px;
    line-height: 1;
    text-align: center;
  }

  .home-seo-contact a {
    justify-self: center;
  }

  .home-seo-footer p {
    max-width: 310px;
    justify-self: center;
    font-size: 15px;
    line-height: 1.08;
    text-align: center;
    white-space: normal;
  }

  .home-seo-meta {
    justify-self: center;
    justify-items: center;
    margin-right: 0;
    padding-left: 0;
    text-align: center;
  }

  .home-seo-footer h2 {
    justify-self: center;
    line-height: 0.9;
  }

  .films-direct-revealing .tile {
    --gallery-switch-start-y: 112vh;
  }

  body[data-active-gallery="films"].intro-cards-playing .tile:nth-of-type(-n + 6) {
    --gallery-switch-start-y: 112vh;
    --intro-card-duration: 1600ms;
    animation:
      filmsDirectCardFlyIn var(--intro-card-duration)
      cubic-bezier(0.22, 0.9, 0.28, 1) var(--intro-card-delay, 0ms) both;
  }

  body[data-active-gallery="films"].intro-cards-playing .tile:nth-of-type(-n + 6) img,
  body[data-active-gallery="films"].intro-cards-playing .tile:nth-of-type(-n + 6) video {
    animation:
      filmsDirectMediaSettle var(--intro-card-duration)
      cubic-bezier(0.22, 0.9, 0.28, 1) var(--intro-card-delay, 0ms) both;
  }

  html.project-scroll-snap[data-active-gallery="photography"],
  body.project-scroll-snap.project-open[data-active-gallery="photography"] {
    scroll-snap-type: y mandatory;
    /* No rubber band at the ends of the album. A short pull down at the cover
       used to bounce back, and the bounce made the mandatory snap resolve
       again on a scroll that was heading upward — it read that as a flick
       into the album and landed on the next photo. With the pull absorbed
       there is nothing to resolve, and the cover stays put. It also keeps
       pull-to-refresh out of an album that fills the screen, where reaching
       for it is always an accident. Only this layout: the grid layout and
       every other page never carry this class. */
    overscroll-behavior-y: none;
  }

  html.project-scroll-snap.project-scroll-snap-suspended[data-active-gallery="photography"],
  body.project-scroll-snap.project-scroll-snap-suspended.project-open[data-active-gallery="photography"] {
    scroll-snap-type: none;
    overflow-anchor: none;
  }

  body.project-scroll-snap-suspended.mobile-project-closing .project-view {
    touch-action: none;
    overscroll-behavior: none;
  }

  .site-intro-word {
    --intro-title-spacing: 0;
    max-width: calc(100svh - 64px);
    font-size: clamp(61.6px, 12.54vw, 239.8px);
    clip-path: none;
    transform: rotate(-90deg) scaleX(1) scaleY(1.02);
  }

  .intro-subtitle {
    --intro-subtitle-edge-bleed: 0px;
    --intro-subtitle-width-trim: 8px;
    --intro-subtitle-shift-x: 0px;
    box-sizing: border-box;
    padding-inline: 0;
    margin-top: clamp(6px, 1.6svw, 12px);
    font-size: clamp(7px, 2.1svw, 10px);
    letter-spacing: 0;
    overflow: visible;
  }

  .intro-exiting .site-intro-word {
    transform-origin: center;
  }

  .intro-brand-settled .site-intro-word {
    position: fixed;
    top: 32px;
    left: 86px;
    width: max-content;
    max-width: none;
    transform:
      translate3d(-50%, -50%, 0)
      rotate(0deg)
      scale(0.41, 0.4182);
    transform-origin: center;
  }

  body.brand-title-returning.intro-brand-settled .site-intro-word {
    animation-name: brandTitleReturnInMobile;
  }

  @keyframes brandTitleReturnInMobile {
    0% {
      opacity: 0;
      filter: blur(8px);
      transform:
        translate3d(-50%, calc(-50% - 44px), 0)
        rotate(0deg)
        scale(0.41, 0.4182);
    }

    100% {
      opacity: 1;
      filter: blur(0);
      transform:
        translate3d(-50%, -50%, 0)
        rotate(0deg)
        scale(0.41, 0.4182);
    }
  }

  .brand {
    /* Phones keep their own anchor: it already lands on the menu row, and the
       shared one sits 4px high once the label's own metrics are in play */
    top: clamp(8px, 2.8vw, 17px);
    right: auto;
    bottom: auto;
    left: calc(clamp(30px, 7.4vw, 42px) - 15px);
    column-gap: 7px;
    font-family: var(--intro-logo-font);
    font-size: var(--home-gallery-switch-font-size);
    font-weight: 1000;
  }

  .brand button {
    font-size: 1em;
    font-weight: 1000;
  }

  .brand-play-word,
  .brand-photo-word {
    font-family: var(--intro-logo-font);
    font-weight: 1000;
    transform: scaleY(1.0404);
  }

  .brand button[data-play-morph="true"] {
    margin-top: -3px;
  }

  .brand button[data-photo-morph="true"] {
    /* Same offset as the films label, so both sit in one spot */
    margin-top: -3px;
  }

  .brand button:not(.is-gallery-active) {
    font-size: 1em;
  }

  .rail {
    font-size: 26px;
  }

  .rail-menu {
    --menu-hit-pad: 20px;
    --gallery-chrome-y: 8px;
    font-size: var(--home-title-font-size);
  }

  .rail-project-edit {
    --menu-hit-pad: 20px;
    --gallery-chrome-y: 8px;
    top: calc(clamp(14px, 2vw, 34px) + 126px - var(--menu-hit-pad));
    font-size: var(--home-title-font-size);
  }

  .rail-project-switch {
    --menu-hit-pad: 20px;
    --gallery-chrome-y: 8px;
    top: calc(clamp(14px, 2vw, 34px) + 126px - var(--menu-hit-pad));
    font-size: var(--home-title-font-size);
  }

  body.admin-page .rail-project-switch {
    top: calc(clamp(14px, 2vw, 34px) + 230px - var(--menu-hit-pad));
  }

  .rail-write {
    --menu-hit-pad: 20px;
    bottom: calc(clamp(16px, 2.4vw, 48px) - var(--menu-hit-pad) + 5px);
    font-size: var(--home-title-font-size);
  }

  /* Bottom-left switch between full-screen pages and the 2-up grid.
     It sits in the difference-blended chrome, so it inverts over the photos
     exactly like the menu button. */
  .rail-layout-toggle {
    --layout-toggle-hit-pad: 16px;
    top: auto;
    left: calc(clamp(12px, 1.7vw, 30px) + 10px - var(--layout-toggle-hit-pad));
    bottom: calc(clamp(16px, 2.4vw, 48px) - var(--layout-toggle-hit-pad) + 5px);
    display: block;
    padding: var(--layout-toggle-hit-pad);
    color: #fff;
    writing-mode: horizontal-tb;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 176ms ease, visibility 176ms ease;
  }

  /* Photo-frame glyph: four outlined frames drawing the 2-up grid, which
     fuse into one single full-bleed frame — the page layout */
  .layout-toggle-mark {
    position: relative;
    display: block;
    width: 30px;
    height: 37px;
    transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .rail-layout-toggle:active .layout-toggle-mark {
    transform: scale(0.85);
    transition-duration: 140ms;
  }

  /* Transform-only morph (buttery on GPU): the four frames gather into a
     little stack of photographs — one up front, two peeking rotated behind,
     the fourth tucks away — and scatter back out into the grid */
  /* The grid glyph is a mini masonry — two columns with unequal frames, the
     way the real 2-up layout flows */
  .layout-toggle-tile {
    position: absolute;
    width: 46%;
    background: transparent;
    border: 2px solid #fff;
    border-radius: 4px;
    transition:
      transform 560ms cubic-bezier(0.34, 1.56, 0.64, 1),
      opacity 300ms ease,
      top 560ms cubic-bezier(0.22, 1, 0.36, 1),
      left 560ms cubic-bezier(0.22, 1, 0.36, 1),
      width 560ms cubic-bezier(0.22, 1, 0.36, 1),
      height 560ms cubic-bezier(0.22, 1, 0.36, 1),
      border-radius 560ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .layout-toggle-tile:nth-child(1) { top: 0; left: 0; height: 54%; z-index: 1; }
  .layout-toggle-tile:nth-child(2) { top: 0; left: 54%; height: 34%; transition-delay: 40ms; }
  .layout-toggle-tile:nth-child(3) { top: 62%; left: 0; height: 38%; transition-delay: 80ms; }
  .layout-toggle-tile:nth-child(4) { top: 42%; left: 54%; height: 58%; transition-delay: 120ms; }

  /* Toggled: the lead frame grows into the single full-screen photo while
     the other three tuck into it and vanish; on the way back they spring
     back out into the masonry */
  .rail-layout-toggle.is-grid-layout .layout-toggle-tile:nth-child(1) {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 5px;
  }

  .rail-layout-toggle.is-grid-layout .layout-toggle-tile:nth-child(2) {
    transform: translate(-8.1px, 12.2px) scale(0.4) rotate(-10deg);
    opacity: 0;
  }

  .rail-layout-toggle.is-grid-layout .layout-toggle-tile:nth-child(3) {
    transform: translate(8.1px, -11.5px) scale(0.4) rotate(8deg);
    opacity: 0;
  }

  .rail-layout-toggle.is-grid-layout .layout-toggle-tile:nth-child(4) {
    transform: translate(-8.1px, -7.8px) scale(0.4) rotate(-6deg);
    opacity: 0;
  }

  body[data-active-gallery="photography"].project-open:not(.project-transitioning):not(.project-closing):not(.desktop-project-opening):not(.mobile-project-opening):not(.mobile-gallery-chrome-opening):not(.mobile-project-closing):not(.mobile-back-closing) .rail-layout-toggle,
  body[data-active-gallery="photography"].mobile-gallery-chrome-opened.project-open:not(.project-transitioning):not(.project-closing):not(.mobile-project-closing):not(.mobile-back-closing) .rail-layout-toggle,
  body[data-active-gallery="photography"].mobile-back-revealing.project-open .rail-layout-toggle {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    animation: layoutToggleSoftIn 784ms cubic-bezier(0.16, 1, 0.3, 1) 184ms both;
  }

  body.menu-open .rail-layout-toggle,
  body.inquiry-open .rail-layout-toggle,
  body.about-mounted .rail-layout-toggle,
  body.site-deleted-open .rail-layout-toggle,
  body.mobile-gallery-chrome-suppressed .rail-layout-toggle,
  body.gallery-switch-chrome-hidden .rail-layout-toggle,
  body.is-mobile-gallery-preloading .rail-layout-toggle,
  body.mobile-back-hidden .rail-layout-toggle,
  body.mobile-back-dismissed .rail-layout-toggle,
  body.mobile-project-preopening .rail-layout-toggle {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    animation: none !important;
  }

  @keyframes layoutToggleSoftIn {
    0% {
      opacity: 0;
      transform: translateY(46px);
      filter: blur(10px);
    }

    58% {
      opacity: 0.82;
      filter: blur(3px);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }
  }

  body.project-open:not(.project-transitioning):not(.project-closing) .rail-menu {
    opacity: 1;
    visibility: visible;
    animation: none;
  }

  body.mobile-home-returning:not(.gallery-switch-chrome-hidden) .rail-menu,
  body.mobile-home-returning:not(.gallery-switch-chrome-hidden) .rail-write {
    opacity: 1;
    visibility: visible;
    animation: none;
    transition: none;
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0) translateY(var(--gallery-chrome-y)) scaleX(var(--gallery-chrome-scale-x));
  }

  body.mobile-back-closing.mobile-project-closing.project-open:not(.project-transitioning):not(.project-closing) .rail-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    animation: homeChromeOut 416ms cubic-bezier(0.55, 0, 0.15, 1) both !important;
    will-change: transform, opacity;
  }

  body.mobile-gallery-chrome-opening.project-open .rail-menu,
  body.mobile-gallery-chrome-opening.project-open .rail-project-switch {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    animation: none !important;
  }

  body.mobile-gallery-chrome-opened.project-open:not(.project-transitioning):not(.project-closing) .rail-back,
  body.mobile-back-revealing.project-open .rail-back {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    animation: galleryBackInFromRight 576ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
  }

  body.mobile-back-closing.mobile-project-closing.project-open:not(.project-transitioning):not(.project-closing) .rail-back,
  body.mobile-back-closing.project-open .rail-back {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    animation: galleryBackExitLeft 416ms cubic-bezier(0.55, 0, 0.15, 1) both !important;
  }

  body.mobile-back-dismissed .rail-back,
  body.mobile-back-dismissed.mobile-back-closing.project-open .rail-back,
  body.mobile-back-dismissed.mobile-back-closing.mobile-project-closing.project-open:not(.project-transitioning):not(.project-closing) .rail-back {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    animation: none !important;
  }

  body.mobile-gallery-chrome-suppressed .rail-menu,
  body.mobile-gallery-chrome-suppressed .rail-back,
  body.mobile-gallery-chrome-suppressed .rail-project-switch {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    animation: none !important;
  }

  .rail-back {
    --gallery-chrome-y: 3px;
    font-size: var(--home-title-font-size);
  }

  .layout-edit-toggle {
    top: calc(clamp(14px, 2vw, 34px) + 304px);
    font-size: 14px;
  }

  .project-view {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    flex-direction: column;
    width: 100%;
    height: auto;
    min-height: 100svh;
    overflow-x: clip;
    overflow-y: visible;
    overscroll-behavior: auto;
    touch-action: pan-y;
  }

  body.project-open,
  body.project-transitioning,
  body.project-closing {
    overflow-x: hidden;
    overflow-y: auto;
  }

  body.project-open .portfolio-view {
    position: absolute;
    inset: 0 0 auto;
    width: 100%;
  }

  body.project-open:not(.mobile-project-closing):not(.project-closing) .portfolio-view {
    height: 0;
    min-height: 0;
    overflow: hidden;
  }

  body.mobile-project-preopening .portfolio-view {
    opacity: 0;
    pointer-events: none;
  }

  body.mobile-project-opening.project-open .portfolio-view {
    opacity: 0;
    pointer-events: none;
  }

  body.mobile-project-closing.project-open .portfolio-view {
    opacity: 1;
    pointer-events: none;
  }

  body.mobile-home-scroll-restoring .portfolio-view {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
    transition: none !important;
  }

  body.project-open:not(.project-transitioning):not(.project-closing) {
    overflow-x: hidden;
    overflow-y: auto;
  }

  body.project-open .home-seo-footer,
  body.project-transitioning .home-seo-footer,
  body.project-closing .home-seo-footer {
    position: absolute;
    width: 100%;
    height: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    visibility: hidden;
  }

  body.project-open .project-view {
    display: flex;
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    height: auto;
    min-height: 100svh;
    max-height: none;
    overflow-x: clip;
    overflow-y: visible;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: auto;
  }

  body.project-open:not(.project-transitioning):not(.project-closing) .project-view {
    overflow-y: visible;
    pointer-events: auto;
  }

  body.project-transitioning .project-view,
  body.project-closing .project-view {
    overflow-y: hidden;
  }

  .project-open:not(.project-transitioning) .project-view {
    animation: none;
    transform: none;
  }

  body.mobile-project-paint-lock.project-open .project-carousel-item {
    opacity: 0;
    visibility: hidden;
  }

  body.mobile-project-opening.project-open .project-view {
    animation: mobileProjectOpenIn 1008ms cubic-bezier(0.16, 1, 0.3, 1) both;
    overflow: hidden;
    background: var(--white);
    isolation: isolate;
    contain: paint;
    transform-origin: center;
    will-change: opacity, filter;
  }

  body[data-active-gallery="films"].mobile-project-opening.project-open .project-view {
    background: var(--black);
  }

  body.mobile-project-opening.project-open .project-copy {
    animation: none;
  }

  body.mobile-project-opening.project-open .project-copy > * {
    animation: mobileProjectCopyIn 784ms cubic-bezier(0.16, 1, 0.3, 1) 32ms both;
    transform-origin: center;
    will-change: transform, opacity, filter;
  }

  body.mobile-project-opening.project-open .project-copy h1 {
    animation: mobileProjectTitleIn 784ms cubic-bezier(0.16, 1, 0.3, 1) 32ms both;
  }

  body.mobile-project-opening.project-open .project-copy .project-location {
    animation: mobileProjectDetailsIn 784ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  body.mobile-project-opening.project-open .project-image {
    animation: none;
  }

  body.mobile-project-opening.project-open .project-carousel-item {
    animation: mobileProjectPhotoFlyIn 1056ms cubic-bezier(0.16, 1, 0.3, 1) both;
    transform-origin: center;
    will-change: transform, opacity, filter;
  }

  body.mobile-project-opening.project-open .project-carousel-item:nth-child(1) {
    animation-delay: 0ms;
  }

  body.mobile-project-opening.project-open .project-carousel-item:nth-child(2) {
    animation-delay: 0ms;
  }

  body.mobile-project-opening.project-open .project-carousel-item:nth-child(3) {
    animation-delay: 0ms;
  }

  body.mobile-project-opening.project-open .project-carousel-item:nth-child(4) {
    animation-delay: 0ms;
  }

  body.mobile-project-opening.project-open .project-carousel-item:nth-child(5) {
    animation-delay: 0ms;
  }

  body.mobile-project-opening.project-open .project-carousel-item:nth-child(6) {
    animation-delay: 0ms;
  }

  body[data-active-gallery="films"].mobile-project-opening.project-open .project-view {
    animation: mobileProjectOpenIn 1120ms cubic-bezier(0.2, 0.88, 0.22, 1) both;
  }

  body[data-active-gallery="films"].mobile-project-opening.project-open .project-copy > * {
    animation-duration: 920ms;
    animation-timing-function: cubic-bezier(0.2, 0.88, 0.22, 1);
  }

  body[data-active-gallery="films"].mobile-project-opening.project-open .project-carousel-item {
    animation-duration: 1160ms;
    animation-timing-function: cubic-bezier(0.2, 0.88, 0.22, 1);
  }

  body.mobile-project-closing.project-open .project-view {
    animation: mobileProjectCloseOut 1008ms cubic-bezier(0.7, 0, 0.84, 0) both;
    transform-origin: center;
    will-change: opacity, filter;
    pointer-events: none;
  }

  body.mobile-project-closing.project-open .project-copy {
    animation: none;
  }

  body.mobile-project-closing.project-open .project-copy > * {
    animation: mobileProjectCopyOut 784ms cubic-bezier(0.7, 0, 0.84, 0) 32ms both;
    transform-origin: center;
    will-change: transform, opacity, filter;
  }

  body.mobile-project-closing.project-open .project-copy .project-location {
    animation-delay: 0ms;
  }

  body.mobile-project-closing.project-open .project-carousel-item {
    animation: mobileProjectPhotoFlyOut 1056ms cubic-bezier(0.7, 0, 0.84, 0) both;
    transform-origin: center;
    will-change: transform, opacity, filter;
  }

  body.mobile-project-closing.project-open .project-carousel-item:nth-child(1) {
    animation-delay: 0ms;
  }

  body.mobile-project-closing.project-open .project-carousel-item:nth-child(2) {
    animation-delay: 0ms;
  }

  body.mobile-project-closing.project-open .project-carousel-item:nth-child(3) {
    animation-delay: 0ms;
  }

  body.mobile-project-closing.project-open .project-carousel-item:nth-child(4) {
    animation-delay: 0ms;
  }

  body.mobile-project-closing.project-open .project-carousel-item:nth-child(5) {
    animation-delay: 0ms;
  }

  body.mobile-project-closing.project-open .project-carousel-item:nth-child(6) {
    animation-delay: 0ms;
  }

  @keyframes mobileProjectOpenIn {
    0% {
      opacity: 0;
      filter: blur(6px);
    }

    64% {
      opacity: 1;
      filter: blur(1px);
    }

    100% {
      opacity: 1;
      filter: blur(0);
    }
  }

  @keyframes mobileProjectCloseOut {
    0% {
      opacity: 1;
      filter: blur(0);
    }

    100% {
      opacity: 0;
      filter: blur(6px);
    }
  }

  @keyframes mobileProjectCopyIn {
    0% {
      opacity: 0;
      transform: translate3d(0, 108svh, 0) scale(0.76);
      filter: blur(10px);
    }

    42% {
      opacity: 1;
      filter: blur(2px);
    }

    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      filter: blur(0);
    }
  }

  @keyframes mobileProjectTitleIn {
    0% {
      opacity: 0;
      transform: translate3d(0, 108svh, 0) scale(0.76);
      filter: blur(10px);
    }

    42% {
      opacity: 1;
      filter: blur(2px);
    }

    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
      filter: blur(0);
    }
  }

  @keyframes mobileProjectDetailsIn {
    0% {
      opacity: 0;
      transform: translate3d(0, 108svh, 0) scale(0.76);
      filter: blur(10px);
    }

    42% {
      opacity: 1;
      filter: blur(2px);
    }

    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
      filter: blur(0);
    }
  }

  @keyframes mobileProjectImageIn {
    0% {
      opacity: 0;
      transform: translate3d(0, 22px, 0) scale(1.015);
      filter: blur(8px);
    }

    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
      filter: blur(0);
    }
  }

  @keyframes mobileProjectCopyOut {
    0% {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      filter: blur(0);
    }

    58% {
      opacity: 1;
      filter: blur(2px);
    }

    100% {
      opacity: 0;
      transform: translate3d(0, 108svh, 0) scale(0.76);
      filter: blur(10px);
    }
  }

  @keyframes mobileProjectPhotoFlyIn {
    0% {
      opacity: 0;
      transform: translate3d(0, 108svh, 0) scale(0.76);
      filter: blur(10px);
    }

    42% {
      opacity: 1;
      filter: blur(2px);
    }

    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
      filter: blur(0);
    }
  }

  @keyframes mobileProjectPhotoFlyOut {
    0% {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
      filter: blur(0);
    }

    58% {
      opacity: 1;
      filter: blur(2px);
    }

    100% {
      opacity: 0;
      transform: translate3d(0, 108svh, 0) scale(0.76);
      filter: blur(10px);
    }
  }

  .tile-copy {
    left: 50%;
    right: auto;
    bottom: 14px;
  }

  .tile:hover img,
  .tile:hover video {
    transform: none;
    filter: var(--tile-filter, saturate(0.93) contrast(1.06));
  }

  .tile:hover::after,
  .tile:focus-within::after {
    opacity: 0;
  }

  .tile:hover .tile-copy,
  .tile:focus-within .tile-copy {
    opacity: 0;
    transform: translate(-50%, 12px);
  }

  .tile-copy strong {
    font-size: 8.96px;
  }

  .tile-copy span {
    font-size: 5.632px;
  }

  .tile-copy-dark {
    right: auto;
  }

  .tile-copy-dark strong {
    font-size: 13.44px;
  }

  .press-word {
    font-size: 82px;
  }

  .project-copy {
    position: absolute;
    inset: 0 0 auto;
    z-index: 3;
    flex: none;
    width: 100%;
    height: 100svh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 96px 22px 76px;
    color: var(--black);
    background: transparent;
    pointer-events: none;
    text-align: center;
    scroll-snap-align: start;
  }

  body[data-active-gallery="films"] .project-view {
    color: var(--white);
    background:
      linear-gradient(
        to bottom,
        var(--black) 0,
        var(--black) 100svh,
        var(--black) 100svh,
        var(--black) 100%
      );
  }

  body[data-active-gallery="films"] .project-copy {
    color: var(--white);
    background: transparent;
  }

  .project-location {
    position: static;
    order: 2;
    transform: none;
    justify-items: center;
    text-align: center;
  }

  .project-copy h1 {
    order: 1;
    max-width: min(86vw, 10ch);
    text-align: center;
    font-size: clamp(56px, 17vw, 96px);
  }

  .project-image {
    --rail-gap: clamp(1px, 0.3vw, 1.5px);
    position: relative;
    width: 100%;
    min-width: 0;
    margin-top: 0;
    height: auto;
    min-height: 0;
    padding: 0 var(--rail-gap);
    box-sizing: border-box;
  }

  .project-carousel-track {
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: var(--rail-gap);
    transform: none;
    padding-top: calc(100svh + var(--rail-gap));
  }

  /* Phones: equal 7px breathing room around and between the photos */
  body[data-active-gallery="photography"] .project-image {
    --rail-gap: 7px;
  }

  /* Mobile gallery loader: a quiet progress bar centered on the first screen —
     never a fixed overlay (that pins Safari's collapsing bars) */
  .project-gallery-progress.is-mobile-gallery-progress {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: grid;
    place-items: center;
    pointer-events: none;
  }

  /* The developing-name loader styles live at the end of the stylesheet —
     they are shared between the phone and desktop album preloaders */

  /* Phones: the first screen is the cover photo, full-bleed, with the
     name/details overlaid — a soft scrim keeps the copy readable */
  body[data-active-gallery="photography"] .project-carousel-item.is-project-intro-media img,
  body[data-active-gallery="photography"] .project-carousel-item.is-project-intro-media video {
    transition: opacity 640ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  body[data-active-gallery="photography"] .project-carousel-item.is-project-intro-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.34),
      rgba(0, 0, 0, 0.18) 42%,
      rgba(0, 0, 0, 0.42)
    );
    transition: opacity 640ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* The copy sits on the photo, so it reads in white */
  body[data-active-gallery="photography"].project-open .project-copy {
    color: var(--white);
    mix-blend-mode: normal;
    transition: opacity 640ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  body[data-active-gallery="photography"].project-open .project-masonry-columns {
    transition: opacity 640ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* While the album loads, only the white page and its progress bar show —
     the content is hidden in place (never covered by a fixed overlay) */
  body.is-mobile-gallery-preloading[data-active-gallery="photography"] .project-copy,
  body.is-mobile-gallery-preloading[data-active-gallery="photography"] .project-masonry-columns,
  body.is-mobile-gallery-preloading[data-active-gallery="photography"] .project-carousel-item.is-project-intro-media img,
  body.is-mobile-gallery-preloading[data-active-gallery="photography"] .project-carousel-item.is-project-intro-media video {
    opacity: 0 !important;
    transition: none;
  }

  body.is-mobile-gallery-preloading[data-active-gallery="photography"] .project-carousel-item.is-project-intro-media::after {
    opacity: 0;
    transition: none;
  }

  /* The couple story: same italic passage as on desktop, lightened for the photo */
  body[data-active-gallery="photography"].project-open .project-copy .project-location strong {
    display: block;
    max-width: min(40ch, 82vw);
    margin: 0 auto;
    font-family: var(--serif);
    font-style: italic;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.82);
    text-transform: none;
  }

  body[data-active-gallery="photography"] .project-carousel-track {
    display: block;
    column-count: auto;
    column-gap: normal;
  }

  .project-carousel-track.has-single-project-media {
    position: relative;
    height: 100svh;
    min-height: 100svh;
    padding-top: 0;
  }

  .project-carousel-item {
    flex-basis: auto;
    width: 100%;
    height: auto;
    aspect-ratio: var(--project-media-aspect);
    display: block;
    background: var(--white);
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }

  .project-carousel-item.is-project-intro-media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
    z-index: 1;
    width: 68vw;
    height: 100svh;
    margin: 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.08) 18%,
      rgba(0, 0, 0, 0.34) 44%,
      rgba(0, 0, 0, 0.72) 72%,
      #000 100%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.08) 18%,
      rgba(0, 0, 0, 0.34) 44%,
      rgba(0, 0, 0, 0.72) 72%,
      #000 100%
    );
  }

  body[data-active-gallery="photography"] .project-carousel-item.is-project-intro-media {
    left: 0;
    right: auto;
    width: 100vw;
    /* The album pages below start at 100lvh — the cover must reach that far,
       otherwise a white strip shows once Safari collapses its bars */
    height: 100lvh;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .project-image img,
  .project-image video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: var(--white);
  }

  body[data-active-gallery="photography"] .project-carousel-item:not(.is-project-intro-media) {
    aspect-ratio: var(--project-media-aspect);
    overflow: hidden;
    background: transparent;
    break-inside: auto;
    page-break-inside: auto;
    margin: 0;
  }

  body[data-active-gallery="photography"] .project-carousel-item:not(.is-project-intro-media) img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Mobile Photography keeps the document as its only scroller. The title is
     the first page, followed by one edge-to-edge, cropped photo per viewport.
     Pages are sized to the large viewport (100lvh): Safari collapses its bars
     after the first swipe, so a 100svh page left a strip of the next photo at
     the bottom and put the last photo's snap point past the end of the
     scroll range (it stopped short, then jumped once the bars came back). */
  body.project-scroll-snap.project-open[data-active-gallery="photography"] .project-image {
    --rail-gap: 0px;
    padding: 0;
  }

  body.project-scroll-snap.project-open[data-active-gallery="photography"] .project-carousel-track {
    padding-top: 100lvh;
    /* A blank band after the last photo keeps its snap point clear of the
       document end. Reaching the end makes Safari bring its bars back, the
       viewport resizes and the snap gets re-evaluated, so the last photo was
       pulled around after landing; now a fling settles on the photo without
       touching the end, and the band only shows while overscrolling. */
    padding-bottom: calc(100lvh - 100svh + 64px);
  }

  body.project-scroll-snap.project-open[data-active-gallery="photography"] .project-masonry-columns {
    grid-template-columns: 100%;
    gap: 0;
    padding: 0;
  }

  body.project-scroll-snap.project-open[data-active-gallery="photography"] .project-masonry-column {
    gap: 0;
  }

  body.project-scroll-snap.project-open[data-active-gallery="photography"] .project-copy,
  body.project-scroll-snap.project-open[data-active-gallery="photography"] .project-carousel-item {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  body.project-scroll-snap.project-open[data-active-gallery="photography"] .project-carousel-item:not(.is-project-intro-media) {
    width: 100%;
    height: 100lvh;
    min-height: 100lvh;
    aspect-ratio: auto;
  }

  body.project-scroll-snap.project-open[data-active-gallery="photography"] .project-carousel-item:not(.is-project-intro-media) img,
  body.project-scroll-snap.project-open[data-active-gallery="photography"] .project-carousel-item:not(.is-project-intro-media) video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 2-up grid layout, toggled from the bottom-left layout button. The cover
     page stays as the first viewport, the photos re-flow beneath it. */
  body.mobile-photo-grid-layout.project-open[data-active-gallery="photography"] .project-image {
    --rail-gap: 0px;
    padding: 0;
  }

  body.mobile-photo-grid-layout.project-open[data-active-gallery="photography"] .project-carousel-track {
    padding-top: 100lvh;
    padding-bottom: 72px;
  }

  body.mobile-photo-grid-layout.project-open[data-active-gallery="photography"] .project-masonry-columns {
    grid-template-columns: repeat(var(--project-masonry-columns, 2), minmax(0, 1fr));
    gap: 3px;
    padding: 3px 3px 0;
  }

  body.mobile-photo-grid-layout.project-open[data-active-gallery="photography"] .project-masonry-column {
    gap: 3px;
  }

  body.mobile-photo-grid-layout.project-open[data-active-gallery="photography"] .project-carousel-item:not(.is-project-intro-media) {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: var(--project-media-aspect, 3 / 4);
  }

  body.mobile-photo-grid-layout.project-open[data-active-gallery="photography"] .project-carousel-item:not(.is-project-intro-media) img,
  body.mobile-photo-grid-layout.project-open[data-active-gallery="photography"] .project-carousel-item:not(.is-project-intro-media) video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Layout switch: the photo in view flies between the two layouts as a
     fixed clone, the rest fall away and then bloom back radially around it */
  /* Opacity only: transforms would move the scroll-snap geometry mid-switch
     and the mandatory snap would re-settle the page afterwards as a nudge */
  body[data-active-gallery="photography"] .project-masonry-columns.is-layout-switch-fading .project-carousel-item {
    opacity: 0;
    transition: opacity 180ms cubic-bezier(0.55, 0, 0.55, 0.2);
  }

  /* The anchored photo must not fade at takeoff: on iOS the clone can paint
     a frame late, and the photo dimming underneath it reads as a blink */
  body[data-active-gallery="photography"] .project-masonry-columns.is-layout-switch-fading .project-carousel-item.is-layout-flight-target {
    opacity: 1;
    transition: none;
    will-change: auto;
  }

  body[data-active-gallery="photography"] .project-masonry-columns.is-layout-switch-entering .project-carousel-item {
    animation: mobileLayoutSwitchIn 560ms cubic-bezier(0.16, 1, 0.3, 1) var(--layout-anim-delay, 0ms) both;
  }

  /* Landing on the pages layout, only the anchored photo is on screen, so the
     others re-enter with short plain fades, no stagger — bloom transforms
     would disturb the snap points, and long fades made an immediate scroll
     show half-transparent pages */
  body.project-scroll-snap[data-active-gallery="photography"] .project-masonry-columns.is-layout-switch-entering .project-carousel-item {
    animation-name: mobileLayoutSwitchInSoft;
    animation-duration: 320ms;
    animation-delay: 0ms;
  }

  @keyframes mobileLayoutSwitchInSoft {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  /* The tile the flying photo lands on never animates — the clone covers it
     until it settles */
  body[data-active-gallery="photography"] .project-masonry-columns.is-layout-switch-entering .project-carousel-item.is-layout-flight-target {
    animation: none;
  }

  /* No scale in the bloom: scaled tiles get re-rasterized when the animation
     ends, which reads as one hard full-grid refresh on real devices */
  @keyframes mobileLayoutSwitchIn {
    0% {
      opacity: 0;
      transform: translateY(16px);
    }

    62% {
      opacity: 1;
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* While the layouts trade places, scrolling is locked: a scroll landing in
     the middle of the choreography read as the layout still arranging itself.
     It unlocks the moment the switch has fully settled. */
  html.mobile-layout-switching,
  body.mobile-layout-switching {
    touch-action: none;
    overscroll-behavior: none;
  }

  /* The fixed clone that carries the anchored photo between layouts. It is
     sized to its landing box and flown with compound transforms only (the
     photo counter-scales inside), so nothing lays out or paints mid-flight. */
  .mobile-layout-flight {
    position: fixed;
    z-index: 15;
    overflow: hidden;
    pointer-events: none;
    /* Transparent: if the cloned photo paints a frame late, the real photo
       shows through instead of a white flash */
    background: transparent;
    transform-origin: 0 0;
    will-change: transform, opacity;
    backface-visibility: hidden;
  }

  .mobile-layout-flight img,
  .mobile-layout-flight video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center;
    will-change: transform;
  }

  /* Composited stand-in for the photo-focus brightness: animating the real
     CSS filter re-rasterizes the photo every frame on WebKit (flicker) */
  .mobile-layout-flight-shade {
    position: absolute;
    inset: 0;
    background: #000;
    pointer-events: none;
  }

  /* Keep the tiles on compositor layers for the whole switch, so their fades
     start and finish without repaint flashes; both classes come off at
     cleanup, dropping the layers again */
  body[data-active-gallery="photography"] .project-masonry-columns.is-layout-switch-fading .project-carousel-item,
  body[data-active-gallery="photography"] .project-masonry-columns.is-layout-switch-entering .project-carousel-item {
    will-change: opacity, transform;
  }

  body[data-active-gallery="films"] .project-image img,
  body[data-active-gallery="films"] .project-image video {
    background: var(--black);
  }

  .project-carousel-item.is-project-intro-media img,
  .project-carousel-item.is-project-intro-media video,
  .project-carousel-item.is-project-intro-media .project-youtube-poster {
    object-fit: cover;
    opacity: 0.36;
    filter: saturate(0.96) contrast(1.02);
  }

  body[data-active-gallery="photography"] .project-carousel-item.is-project-intro-media img,
  body[data-active-gallery="photography"] .project-carousel-item.is-project-intro-media video,
  body[data-active-gallery="photography"] .project-carousel-item.is-project-intro-media .project-youtube-poster {
    opacity: 1;
  }

  body[data-active-gallery="films"] .project-carousel-item.is-project-intro-media {
    left: 0;
    right: auto;
    width: 100vw;
    background: transparent;
    -webkit-mask-image: none;
    mask-image: none;
  }

  body[data-active-gallery="films"] .project-carousel-item.is-project-intro-media::after {
    background: transparent;
  }

  body[data-active-gallery="films"] .project-carousel-item.is-project-intro-media img,
  body[data-active-gallery="films"] .project-carousel-item.is-project-intro-media video,
  body[data-active-gallery="films"] .project-carousel-item.is-project-intro-media .project-youtube-poster {
    opacity: 1;
  }

  body[data-active-gallery="films"] .project-carousel-item.is-project-intro-media video[data-project-intro-video="true"] {
    opacity: 0;
  }

  body[data-active-gallery="films"] .project-carousel-item.is-project-intro-media video[data-project-intro-video="true"].is-intro-video-ready {
    animation: mobileFilmIntroVideoFadeIn 1080ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  @keyframes mobileFilmIntroVideoFadeIn {
    0% {
      opacity: 0;
      filter: saturate(0.96) contrast(1.02) blur(5px);
    }

    45% {
      opacity: 0.62;
      filter: saturate(0.96) contrast(1.02) blur(2px);
    }

    100% {
      opacity: 1;
      filter: saturate(0.96) contrast(1.02) blur(0);
    }
  }

  .menu-main {
    min-height: 100svh;
    align-content: end;
    justify-items: start;
    padding: 124px 24px 112px;
  }

  body:not(.admin-page) .menu-main {
    align-content: stretch;
    /* the last track takes slack too, so the promo can ride the bottom of the
       page down next to the credit line instead of trailing the socials */
    grid-template-rows: auto auto 1fr auto auto 1fr;
    gap: 0;
    padding: clamp(132px, 20svh, 190px) 24px clamp(44px, 6.4svh, 68px);
  }

  body:not(.admin-page) .contact-word {
    grid-row: 1;
    align-self: start;
    justify-self: start;
    transform: none;
  }

  body[data-language="ro"]:not(.admin-page) .contact-word {
    font-size: clamp(40px, 12.2vw, 78px);
    font-weight: 800;
    line-height: 0.9;
    white-space: nowrap;
  }

  body:not(.admin-page) .menu-links {
    display: contents;
  }

  body:not(.admin-page) .menu-links a {
    grid-row: 2;
    align-self: start;
    justify-self: start;
    font-size: clamp(40px, 12.2vw, 78px);
    line-height: 0.82;
    margin-top: clamp(18px, 3svh, 34px);
  }

  body:not(.admin-page) .menu-gallery-pair {
    grid-row: 2;
    align-self: start;
    justify-self: start;
    /* ABOUT US carries a tall line box under its letters here, so a positive
       margin left 55px of white against the 25px desktop shows. Pulling up by
       roughly 8vw puts the two at the same distance relative to their size. */
    margin-top: clamp(-34px, -6.5vw, -18px);
  }

  body:not(.admin-page) .menu-gallery-pair .menu-gallery-link {
    font-size: clamp(40px, 12.2vw, 78px);
  }

  body:not(.admin-page) .menu-links a[href="#portfolio"] {
    margin-top: clamp(26px, 4svh, 44px);
  }

  body:not(.admin-page) .menu-links button {
    grid-row: 4;
    align-self: end;
    justify-self: start;
    margin-top: clamp(18px, 4.8svh, 42px);
  }

  body:not(.admin-page) .social-links {
    grid-row: 5;
    align-self: start;
    margin-top: clamp(10px, 1.9svh, 20px);
  }

  body:not(.admin-page) .menu-app-promo {
    grid-row: 6;
    align-self: end;
    justify-self: start;
    margin-top: 0;
  }

  .menu-overlay {
    position: relative;
    inset: auto;
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
    transform: none;
    transition: opacity 336ms cubic-bezier(0.16, 1, 0.3, 1), filter 336ms cubic-bezier(0.16, 1, 0.3, 1), visibility 176ms ease;
    touch-action: auto;
  }

  .menu-mounted .menu-overlay {
    display: none;
  }

  .menu-open.menu-mounted .menu-overlay {
    display: block;
    animation: mobileMenuOpenIn 608ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .menu-closing.menu-mounted .menu-overlay {
    display: block;
    visibility: visible;
    pointer-events: none;
    animation: mobileMenuCloseOut 896ms cubic-bezier(0.7, 0, 0.84, 0) both;
  }

  body.menu-open .portfolio-view,
  body.menu-open .project-view,
  body.mobile-project-preopening .home-seo-footer,
  body.project-open .home-seo-footer,
  body.project-transitioning .home-seo-footer,
  body.project-closing .home-seo-footer,
  body.inquiry-mounted .home-seo-footer,
  body.inquiry-open .home-seo-footer,
  body.inquiry-closing .home-seo-footer,
  body.about-mounted .home-seo-footer,
  body.menu-mounted .home-seo-footer,
  body.menu-open .home-seo-footer,
  body.menu-closing .home-seo-footer {
    display: none;
  }

  body.gallery-switch-staging .home-seo-footer {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  body.gallery-switch-staging.gallery-switch-flying .home-seo-footer {
    opacity: 1;
    visibility: visible;
    animation:
      homeFooterFlowReturn 920ms cubic-bezier(0.16, 1, 0.3, 1)
      360ms both;
    will-change: opacity, transform, filter;
  }

  .menu-open.menu-mounted .rail-close,
  .menu-open.menu-mounted .menu-language,
  .menu-open.menu-mounted .contact-word,
  .menu-open.menu-mounted .menu-links a,
  .menu-open.menu-mounted .menu-gallery-pair,
  .menu-open.menu-mounted .menu-links button:not(.menu-gallery-link),
  .menu-open.menu-mounted .social-picker,
  .menu-open.menu-mounted .menu-app-promo,
  .menu-open.menu-mounted .social-links a {
    animation: mobileMenuItemFlyIn 1024ms cubic-bezier(0.16, 1, 0.3, 1) both;
    will-change: transform, opacity, filter;
  }

  .menu-closing.menu-mounted .rail-close,
  .menu-closing.menu-mounted .menu-language,
  .menu-closing.menu-mounted .contact-word,
  .menu-closing.menu-mounted .menu-links a,
  .menu-closing.menu-mounted .menu-gallery-pair,
  .menu-closing.menu-mounted .menu-links button:not(.menu-gallery-link),
  .menu-closing.menu-mounted .social-picker,
  .menu-closing.menu-mounted .menu-app-promo,
  .menu-closing.menu-mounted .social-links a {
    animation: mobileMenuItemFlyOut 784ms cubic-bezier(0.7, 0, 0.84, 0) both;
    will-change: transform, opacity, filter;
  }

  .menu-open.menu-mounted .rail-close {
    animation-delay: 0ms;
  }

  .menu-open.menu-mounted .menu-language {
    animation-delay: 0ms;
  }

  .menu-open.menu-mounted .contact-word {
    animation-delay: 56ms;
  }

  .menu-open.menu-mounted .menu-links a:nth-child(1) {
    animation-delay: 112ms;
  }

  .menu-open.menu-mounted .menu-links a:nth-child(2) {
    animation-delay: 168ms;
  }

  .menu-open.menu-mounted .menu-gallery-pair {
    animation-delay: 168ms;
  }

  .menu-open.menu-mounted .menu-links button:not(.menu-gallery-link) {
    animation-delay: 224ms;
  }

  .menu-open.menu-mounted .social-picker {
    animation-delay: 280ms;
  }

  .menu-open.menu-mounted .menu-app-promo {
    animation-delay: 336ms;
  }

  .menu-open.menu-mounted .social-links > a:nth-of-type(1) {
    animation-delay: 392ms;
  }

  .menu-open.menu-mounted .social-links > a:nth-of-type(2) {
    animation-delay: 448ms;
  }

  .menu-closing.menu-mounted .rail-close,
  .menu-closing.menu-mounted .menu-language,
  .menu-closing.menu-mounted .contact-word,
  .menu-closing.menu-mounted .menu-links a,
  .menu-closing.menu-mounted .menu-gallery-pair,
  .menu-closing.menu-mounted .menu-links button:not(.menu-gallery-link),
  .menu-closing.menu-mounted .social-picker,
  .menu-closing.menu-mounted .menu-app-promo,
  .menu-closing.menu-mounted .social-links a {
    animation-delay: 0ms;
  }

  @keyframes mobileMenuOpenIn {
    0% {
      opacity: 0;
      filter: blur(6px);
    }

    64% {
      opacity: 1;
      filter: blur(1px);
    }

    100% {
      opacity: 1;
      filter: blur(0);
    }
  }

  @keyframes mobileMenuCloseOut {
    0% {
      opacity: 1;
      filter: blur(0);
    }

    52% {
      opacity: 1;
      filter: blur(1px);
    }

    100% {
      opacity: 0;
      filter: blur(7px);
    }
  }

  @keyframes mobileMenuItemFlyIn {
    0% {
      opacity: 0;
      transform: translate3d(0, 108svh, 0) scale(0.76);
      filter: blur(10px);
    }

    42% {
      opacity: 1;
      filter: blur(2px);
    }

    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
      filter: blur(0);
    }
  }

  @keyframes mobileMenuItemFlyOut {
    0% {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
      filter: blur(0);
    }

    48% {
      opacity: 1;
      filter: blur(2px);
    }

    100% {
      opacity: 0;
      transform: translate3d(0, 96svh, 0) scale(0.82);
      filter: blur(10px);
    }
  }

  .contact-word {
    font-size: clamp(62px, 18vw, 116px);
    transform: translateY(-52px);
  }

  .menu-links {
    justify-items: start;
  }

  .menu-links a,
  .menu-links button {
    font-size: clamp(32px, 10vw, 58px);
    justify-self: start;
    text-align: left;
  }

  body:not(.admin-page) .contact-word {
    margin-left: -0.055em;
    text-align: left;
  }

  /* The three sit on one line rather than stacked, which is what the smaller
     size is for — all three have to clear the narrowest phone. */
  .social-links {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: start;
    max-width: 100%;
    gap: clamp(8px, 2.8vw, 15px);
  }

  body:not(.admin-page) .social-links > a,
  body:not(.admin-page) .social-picker-trigger {
    font-size: clamp(11.5px, 3.5vw, 16px);
    white-space: nowrap;
  }

  .social-picker {
    justify-items: start;
  }

  /* Opening sideways worked off a column; on a row it would leave the screen,
     so the list drops under its own word instead. */
  .social-picker-options {
    top: calc(100% + 12px);
    right: auto;
    left: 0;
    justify-items: start;
    gap: 12px;
    max-width: min(60vw, 240px);
    transform: translate3d(0, -6px, 0);
  }

  .social-picker.is-open .social-picker-options {
    transform: translate3d(0, 0, 0);
  }

  .social-picker-options a {
    font-size: clamp(10.5px, 3vw, 14px);
    white-space: normal;
  }

  .menu-app-promo {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    gap: clamp(7px, 2.1vw, 11px);
    max-width: min(210px, 56vw);
    margin-top: 34px;
    touch-action: manipulation;
    user-select: none;
  }

  .menu-app-copy {
    justify-items: start;
  }

  .menu-app-icon {
    width: clamp(19.9px, 5.97vw, 27.5px);
  }

  .menu-app-promo strong {
    font-size: clamp(11.5px, 3.3vw, 16px);
  }

  .menu-app-store {
    font-size: clamp(7px, 1.9vw, 8.5px);
  }

  .menu-app-arrow {
    width: clamp(6.5px, 1.8vw, 8px);
    height: clamp(6.5px, 1.8vw, 8px);
  }

  body.admin-page {
    --admin-menu-item-font: clamp(18.5px, 5.55vw, 28px);
    --admin-menu-social-font: clamp(11.5px, 3.5vw, 16px);
  }

  body.admin-page .menu-main {
    gap: clamp(18px, 4.8vw, 28px);
    justify-items: start;
    padding-top: clamp(76px, 14svh, 122px);
    padding-bottom: clamp(34px, 8svh, 72px);
  }

  body.admin-page .admin-menu-stack,
  body.admin-page .admin-menu-group,
  body.admin-page .admin-menu-items {
    justify-items: start;
  }

  body.admin-page .admin-menu-stack {
    gap: clamp(18px, 5vw, 30px);
    transform: translateY(-60px);
  }

  body.admin-page .admin-menu-group:not(.admin-menu-creator) {
    transform: translateY(-60px);
  }

  body.admin-page .admin-menu-creator {
    margin-top: 40px;
  }

  body.admin-page .admin-menu-label {
    font-size: clamp(9px, 2.8vw, 12px);
  }

  body.admin-page .contact-word,
  body.admin-page .menu-links a,
  body.admin-page .menu-links button,
  body.admin-page .social-picker-trigger {
    font-size: var(--admin-menu-item-font);
    line-height: 0.95;
  }

  body.admin-page .contact-word {
    transform: none;
  }

  body.admin-page .social-picker-trigger {
    font-size: var(--admin-menu-social-font);
    /* same line box as the Instagram/Facebook anchors beside it */
    line-height: 1;
  }

  body.admin-page .menu-links,
  body.admin-page .social-links {
    justify-items: start;
    justify-content: start;
    align-items: flex-start;
    gap: clamp(14px, 3.8vw, 22px);
  }

  body.admin-page .menu-links a,
  body.admin-page .menu-links button,
  body.admin-page .social-picker,
  body.admin-page .social-picker-trigger {
    text-align: left;
    justify-items: start;
  }

  .editor-layout,
  .editor-form,
  .editor-section-grid,
  .editor-section-home .editor-section-grid,
  .editor-toggle-grid,
  .pricing-guide-board {
    grid-template-columns: 1fr;
  }

  .editor-media-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .editor-upload {
    width: 100%;
    justify-content: space-between;
  }

  .editor-upload-secondary {
    justify-content: flex-start;
  }

  .pricing-guide-board {
    --pricing-section-gap: clamp(44px, 13vw, 78px);
  }

  .pricing-guide-board article {
    min-height: 0;
    border-right: 0;
    border-bottom: 0;
  }

  .pricing-guide-board article:last-child {
    border-bottom: 0;
  }

  .pricing-guide-board .pricing-package-featured,
  .pricing-package-featured .pricing-package-heading,
  .pricing-package-featured .pricing-package-meta,
  .pricing-package-featured .pricing-package-list {
    grid-column: 1;
    grid-row: auto;
  }

  .pricing-guide-board .pricing-package-featured {
    grid-template-columns: 1fr;
  }

  .pricing-package-featured .pricing-package-heading,
  .pricing-package-featured .pricing-package-meta {
    transform: none;
  }

  .pricing-package-featured .pricing-package-heading {
    margin-bottom: clamp(20px, 7vw, 38px);
  }

  .pricing-detail-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .pricing-guide-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(14px, 4vw, 22px);
  }

  .pricing-guide-open {
    align-items: center;
    width: 100%;
  }

  .pricing-guide-actions {
    align-self: center;
    justify-self: end;
  }

  .pricing-guide-copy {
    white-space: nowrap;
  }

  .pricing-detail-header > div {
    justify-items: start;
  }

  .pricing-info-board {
    --pricing-info-gap: clamp(44px, 13vw, 78px);

    grid-template-columns: 1fr;
  }

  .pricing-info-card,
  .pricing-info-card:nth-child(2n) {
    border-right: 0;
  }

  .pricing-info-card-wide {
    grid-column: 1;
  }

  .pricing-package-meta {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .pricing-package-featured .pricing-package-meta {
    grid-template-columns: 1fr;
  }

  .pricing-package-meta div,
  .pricing-package-featured .pricing-package-meta div {
    gap: 4px;
    padding: 5px 0;
  }

  .pricing-package-meta div + div,
  .pricing-package-featured .pricing-package-meta div + div {
    padding-left: 0;
  }

  .editor-section-grid label:nth-child(odd) {
    border-right: 0;
  }

  .editor-section-grid label:nth-child(even) {
    padding-left: 0;
  }

  .editor-toggle-field + .editor-toggle-field {
    padding-left: 0;
    border-left: 0;
  }

  .editor-upload label {
    padding-right: 0;
  }

  .editor-upload label + label {
    padding-left: 0;
    border-left: 0;
  }

  .editor-shell {
    --editor-shell-pad-x: 20px;
    --editor-shell-pad-y: 24px;
    --editor-header-pad-y: 6px;
    --editor-header-pad-bottom: 8px;
    padding: var(--editor-shell-pad-y) var(--editor-shell-pad-x) 34px;
  }

  .editor-header {
    display: grid;
    gap: 8px;
  }

  .editor-youtube-field > span {
    grid-template-columns: 1fr;
  }

  .editor-link-actions {
    justify-items: start;
  }

  .editor-section h3 {
    font-size: 14px;
  }

  .editor-gallery-switch {
    gap: 16px;
    margin-top: 0;
  }

  .editor-gallery-switch button,
  .editor-close {
    font-size: 16px;
  }

  .editor-card-list button {
    padding: 13px 0;
    font-size: 14px;
  }

  .editor-add-card {
    font-size: 14px;
  }

  .editor-form input[type="text"] {
    min-height: 44px;
    font-size: 18px;
  }

  .editor-actions {
    display: grid;
    justify-items: start;
  }

  .inquiry-header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 18px;
  }

  .inquiry-header h2 {
    font-size: clamp(44px, 13vw, 78px);
  }

  .inquiry-header p {
    margin-top: -24px;
    font-size: clamp(58px, 17vw, 96px);
  }

  .inquiry-close {
    top: 15px;
    color: var(--black);
  }

  body.admin-page .inquiry-close {
    top: 15px;
    right: 8px;
  }

  .inquiry-form label {
    min-height: 78px;
    padding: 20px 18px;
    border-right: 0;
    font-size: clamp(20px, 6vw, 30px);
    letter-spacing: 0;
    line-height: 1.08;
  }

  .inquiry-form label:nth-child(odd) {
    border-right: 0;
  }

  .inquiry-form {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .inquiry-form input,
  .inquiry-form select,
  .inquiry-form textarea {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    appearance: none;
    -webkit-appearance: none;
    min-height: 0;
    border-radius: 0;
    background-color: transparent;
    font-size: clamp(16px, 4.8vw, 23px);
    line-height: 1.18;
  }

  .inquiry-form label,
  .inquiry-actions button,
  .inquiry-close {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }

  .inquiry-form input:focus,
  .inquiry-form input:active,
  .inquiry-form select:focus,
  .inquiry-form select:active,
  .inquiry-form textarea:focus,
  .inquiry-form textarea:active,
  .inquiry-actions button:focus,
  .inquiry-actions button:active,
  .inquiry-close:focus,
  .inquiry-close:active {
    background-color: transparent;
    box-shadow: none;
    outline: 0;
  }

  .inquiry-form input,
  .inquiry-form select {
    height: auto;
  }

  .inquiry-form textarea {
    min-height: 96px;
  }

  .inquiry-shell {
    border-radius: 0;
    width: 100%;
    max-height: none;
    height: auto;
    min-height: 0;
    overflow: visible;
    overscroll-behavior: contain;
    padding: max(10px, env(safe-area-inset-top)) 0 max(10px, env(safe-area-inset-bottom));
    background: #ffffff;
  }

  .inquiry-actions {
    display: grid;
    justify-items: stretch;
  }

  .editor-panel,
  .pricing-panel {
    padding: 0;
  }

  .inquiry-panel {
    --inquiry-frame-width: 100%;
    position: relative;
    inset: auto;
    display: none;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
    justify-items: stretch;
    gap: 14px;
    min-height: 100svh;
    height: 100svh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: clamp(48px, 11svh, 104px) 0 0;
    place-items: stretch;
    background: var(--white);
    transform: none;
    contain: layout paint style;
    isolation: isolate;
    overscroll-behavior: contain;
    touch-action: pan-y;
    transition: opacity 336ms cubic-bezier(0.16, 1, 0.3, 1), filter 336ms cubic-bezier(0.16, 1, 0.3, 1), visibility 176ms ease;
  }

  .inquiry-mounted .inquiry-panel {
    display: grid;
  }

  body.inquiry-open.menu-mounted .menu-overlay {
    display: none;
  }

  .inquiry-open.inquiry-mounted .inquiry-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    animation: mobileMenuOpenIn 608ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .inquiry-closing.inquiry-mounted .inquiry-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    animation: mobileMenuCloseOut 896ms cubic-bezier(0.7, 0, 0.84, 0) both;
  }

  body.inquiry-open .portfolio-view,
  body.inquiry-open .project-view {
    display: none;
  }

  body.pricing-open .portfolio-view,
  body.pricing-open .project-view {
    display: none;
  }
}

body[data-active-gallery="films"] .inquiry-panel,
body[data-active-gallery="films"] .inquiry-shell,
body[data-active-gallery="films"] .inquiry-header,
body[data-active-gallery="films"] .inquiry-form {
  color: var(--white);
  background: var(--black);
}

body[data-active-gallery="films"] .inquiry-close,
body[data-active-gallery="films"] .inquiry-actions button {
  color: var(--white);
}

body[data-active-gallery="films"] .inquiry-header p {
  color: var(--black);
}

body[data-active-gallery="films"] .inquiry-form label {
  color: rgba(255, 255, 255, 0.34);
  border-bottom-color: rgba(255, 255, 255, 0.16);
}

body[data-active-gallery="films"] .inquiry-form label:nth-child(odd) {
  border-right-color: rgba(255, 255, 255, 0.16);
}

body[data-active-gallery="films"] .inquiry-form label.is-inquiry-field-active .inquiry-field-title,
body[data-active-gallery="films"] .inquiry-form label.is-inquiry-field-filled .inquiry-field-title {
  color: rgba(255, 255, 255, 0.82);
}

body[data-active-gallery="films"] .inquiry-form input,
body[data-active-gallery="films"] .inquiry-form select,
body[data-active-gallery="films"] .inquiry-form textarea {
  color: var(--white);
  background: transparent;
}

body[data-active-gallery="films"] .inquiry-form input::placeholder,
body[data-active-gallery="films"] .inquiry-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.28);
}

body[data-active-gallery="films"] .inquiry-actions [data-inquiry-status] {
  color: rgba(255, 255, 255, 0.58);
}

html[data-active-gallery="films"],
body[data-active-gallery="films"] {
  color-scheme: light;
  color: var(--white);
  background: var(--black);
}

body[data-active-gallery="films"]:not(.project-open):not(.project-transitioning):not(.project-closing) .portfolio-view,
body[data-active-gallery="films"] .portfolio-view,
body[data-active-gallery="films"] .home-seo-footer,
body[data-active-gallery="films"] .project-view,
body[data-active-gallery="films"] .project-copy,
body[data-active-gallery="films"] .project-carousel-item,
body[data-active-gallery="films"] .menu-overlay,
body[data-active-gallery="films"] .inquiry-panel,
body[data-active-gallery="films"] .inquiry-shell,
body[data-active-gallery="films"] .inquiry-header,
body[data-active-gallery="films"] .inquiry-form {
  color: var(--white);
  background: var(--black);
}

body[data-active-gallery="films"] .tile {
  color: var(--white);
  background: var(--black);
}

/* Film captions carry actual writing, so they run the width of the card and
   read as a line of copy rather than a label */
body[data-active-gallery="films"] .tile-copy {
  left: 0;
  right: auto;
  width: 100%;
  padding: 0 clamp(16px, 1.8vw, 34px);
  transform: translateY(12px);
}

body[data-active-gallery="films"] .tile:hover .tile-copy,
body[data-active-gallery="films"] .tile:focus-within .tile-copy {
  transform: translateY(0);
}

/* The title belongs to the poster, not over a running film. The pointer is
   still on the card after you press play, so hover would otherwise keep it
   there. Pausing keeps the playing class but adds the paused one, which is
   what brings the caption back. */
body[data-active-gallery="films"] .tile:has(.project-youtube-player[data-linked-video-started="1"]:not(.is-linked-video-paused)) .tile-copy {
  opacity: 0;
  transform: translateY(12px);
}

/* Film cards carry no darkening of their own — the rule further up switches it
   off so the frame reads clean — which left the caption sitting straight on
   whatever the poster happens to be. A scrim just under the text, fading in
   with it, keeps the picture untouched at rest and the words readable over a
   bright frame. */
body[data-active-gallery="films"] .tile:has(> .project-youtube-player)::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 62%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.28) 46%, rgba(0, 0, 0, 0.68) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 344ms cubic-bezier(0.16, 1, 0.3, 1);
}

body[data-active-gallery="films"] .tile:is(:hover, :focus-within):has(> .project-youtube-player)::before {
  opacity: 1;
}

/* nothing over a running film, same as the caption */
body[data-active-gallery="films"] .tile:has(.project-youtube-player[data-linked-video-started="1"]:not(.is-linked-video-paused))::before {
  opacity: 0;
}

/* Hover leaves the colour alone on films. The card still answers — it scales,
   the caption and its scrim arrive — but the frame keeps the tone it had. */
body[data-active-gallery="films"] .tile:is(:hover, :focus-within) img,
body[data-active-gallery="films"] .tile:is(:hover, :focus-within) video,
body[data-active-gallery="films"] .tile:is(:hover, :focus-within) .project-youtube-player {
  filter: var(--tile-filter, saturate(0.96) contrast(1.05));
}

body[data-active-gallery="films"] .tile-copy span {
  width: 100%;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(10px, 0.82vw, 16px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.24;
  text-wrap: balance;
}

/* A film taking the floor. While one is actually running the chrome steps out
   and everything else drops to 40%, so the only lit thing on screen is the
   clip. Pausing keeps the playing class but adds the paused one, which is what
   brings the page back — the same pair the caption reads. */
body[data-active-gallery="films"]:has(.portfolio-view .project-youtube-player[data-linked-video-started="1"]:not(.is-linked-video-paused)) :is(.brand, .site-intro-word, .rail-menu, .rail-write, .rail-project-switch, .home-seo-footer) {
  /* STROE and the burger are each pinned visible by an !important of their
     own, so hiding them takes one too */
  opacity: 0 !important;
  pointer-events: none;
}

body[data-active-gallery="films"]:has(.portfolio-view .project-youtube-player[data-linked-video-started="1"]:not(.is-linked-video-paused)) .portfolio-view .tile:not(:has(.project-youtube-player[data-linked-video-started="1"]:not(.is-linked-video-paused))) {
  opacity: 0.4;
}

/* Kept clear of the reveal, which drives opacity itself and would be fought. */
body[data-active-gallery="films"]:not(.films-direct-revealing):not(.gallery-switch-preparing):not(.intro-revealing) .portfolio-view .tile {
  transition: opacity 344ms ease;
}

body[data-active-gallery="films"] :is(.brand, .site-intro-word, .rail-write, .rail-project-switch, .home-seo-footer) {
  transition: opacity 296ms ease;
}

body[data-active-gallery="films"] .tile.tile-empty {
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}

/* Landscape films and vertical reels each get their own band, so no row ever
   mixes the two and leaves a gap under the wide ones.
   Films run two to a row on desktop and one on a phone; reels four and two. */
body[data-active-gallery="films"] .tile.is-film-wide {
  grid-column: span 2;
  aspect-ratio: 16 / 9;
  order: 1;
}

body[data-active-gallery="films"] .tile.is-film-tall {
  grid-column: span 1;
  aspect-ratio: 9 / 16;
  order: 2;
}

/* A film left alone takes the full row rather than sitting beside a gap */
body[data-active-gallery="films"] .tile.is-film-wide.is-film-full {
  grid-column: 1 / -1;
}

/* The first reel opens the second band rather than filling the films' last row */
body[data-active-gallery="films"] .tile.is-film-reels-start {
  grid-column-start: 1;
}

@media (max-width: 640px) {
  body[data-active-gallery="films"] .tile.is-film-wide {
    grid-column: span 2;
  }

  body[data-active-gallery="films"] .tile.is-film-tall {
    grid-column: span 1;
  }
}

body.admin-page[data-active-gallery="films"] .tile.tile-empty {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.1)),
    rgba(255, 255, 255, 0.055);
}


body[data-active-gallery="films"] .home-seo-footer p,
body[data-active-gallery="films"] .inquiry-actions [data-inquiry-status] {
  color: rgba(255, 255, 255, 0.54);
}

body[data-active-gallery="films"] .inquiry-header p {
  color: var(--white);
}

body[data-active-gallery="films"] .inquiry-close,
body[data-active-gallery="films"] .inquiry-actions button {
  color: var(--white);
}

body[data-active-gallery="films"] .inquiry-form label {
  color: rgba(255, 255, 255, 0.38);
  border-bottom-color: rgba(255, 255, 255, 0.16);
}

body[data-active-gallery="films"] .inquiry-form label:nth-child(odd) {
  border-right-color: rgba(255, 255, 255, 0.16);
}

body[data-active-gallery="films"] .inquiry-form label.is-inquiry-field-active .inquiry-field-title,
body[data-active-gallery="films"] .inquiry-form label.is-inquiry-field-filled .inquiry-field-title,
body[data-active-gallery="films"] .inquiry-form input,
body[data-active-gallery="films"] .inquiry-form select,
body[data-active-gallery="films"] .inquiry-form textarea {
  color: var(--white);
}

body[data-active-gallery="films"] .inquiry-form input::placeholder,
body[data-active-gallery="films"] .inquiry-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 980px) {
  body[data-active-gallery="films"] .project-view,
  body[data-active-gallery="films"].mobile-project-opening.project-open .project-view {
    background: var(--black);
  }

  body[data-active-gallery="films"] .project-copy {
    color: var(--white);
    background: transparent;
  }

  body[data-active-gallery="films"] .project-image img,
  body[data-active-gallery="films"] .project-image video {
    background: var(--black);
  }

  body[data-active-gallery="films"] .project-carousel-item.is-project-intro-media::after {
    background: transparent;
  }
}

@media (max-width: 640px) {
  body.project-open .project-copy,
  body.mobile-project-opening.project-open .project-copy {
    color: #fff;
    background: transparent;
    mix-blend-mode: difference;
  }

  body.project-open .project-copy .project-mobile-chrome-text,
  body.mobile-project-opening.project-open .project-copy .project-mobile-chrome-text {
    color: inherit;
    mix-blend-mode: normal;
  }

  body.project-open .project-copy .project-mobile-chrome-text .adaptive-letter,
  body.mobile-project-opening.project-open .project-copy .project-mobile-chrome-text .adaptive-letter {
    color: inherit;
  }
}

body.admin-page,
body.admin-page * {
  scroll-behavior: auto !important;
  animation: none !important;
  animation-duration: 0ms !important;
  animation-delay: 0ms !important;
  transition: none !important;
  transition-duration: 0ms !important;
  transition-delay: 0ms !important;
}

body.admin-page .rail-menu,
body.admin-page .rail-write,
body.admin-page .rail-back,
body.admin-page .rail-project-edit,
body.admin-page .rail-project-switch,
body.admin-page .layout-edit-toggle,
body.admin-page .site-publish-button,
body.admin-page .site-add-card-button {
  animation: none !important;
  transition: none !important;
}

body.admin-page.about-mounted .rail-menu {
  display: none !important;
}

body {
  --admin-intro-logo-scale-x: 0.15;
  --admin-intro-logo-scale-y: 0.153;
  --admin-intro-logo-center-y: clamp(28px, 2.8vw, 54px);
  --admin-intro-logo-shift-y: calc(-50vh + var(--admin-intro-logo-center-y));
}

@media (min-width: 641px) {
  body.admin-page {
    --brand-logo-shift-x: calc(
      clamp(8px, 1.4vw, 32px) + 7px - 50vw + 0.2228 * clamp(56px, 11.4vw, 218px)
    );
    --brand-logo-shift-y: calc(
      var(--chrome-row-top) + 5px + var(--chrome-row-height) / 2
      - var(--admin-intro-logo-center-y) + 2px
    );
  }

  body.admin-page.intro-exiting .site-intro-word {
    animation: homeIntroWordToTopLogo 1024ms cubic-bezier(0.33, 1, 0.68, 1) 1520ms both !important;
    color: #fff;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none;
  }

  body.admin-page.intro-playing .intro-title,
  body.admin-page.intro-title-hiding .intro-title,
  body.admin-page.intro-playing .intro-title .intro-letter,
  body.admin-page.intro-title-hiding .intro-title .intro-letter {
    animation: none !important;
    opacity: 1 !important;
  }

  body.admin-page.intro-exiting .intro-title,
  body.admin-page.intro-exiting .intro-title .intro-letter {
    animation: none !important;
    opacity: 1 !important;
  }

  body.admin-page.intro-playing .intro-subtitle,
  body.admin-page.intro-title-hiding .intro-subtitle {
    animation: none !important;
    opacity: 0.72 !important;
    visibility: visible !important;
    transform: translate3d(var(--intro-subtitle-shift-x), 0, 0) scaleX(1) !important;
    clip-path: inset(0 calc(-1 * var(--intro-subtitle-reveal-bleed)) 0 calc(-1 * var(--intro-subtitle-reveal-bleed))) !important;
  }

  body.intro-brand-settled .site-intro-word {
    position: fixed;
    top: calc(var(--chrome-row-top) + 5px + var(--chrome-row-height) / 2 - 0.744vw);
    left: calc(clamp(8px, 1.4vw, 32px) + 7px);
    max-width: none;
    opacity: 1;
    visibility: visible;
    transform:
      translate3d(0, 0, 0)
      scale(var(--admin-intro-logo-scale-x), var(--admin-intro-logo-scale-y));
    transform-origin: left top;
  }

  body.intro-brand-settled:is(.about-mounted, .about-open, .about-panel-closing) .site-intro-word {
    position: fixed;
    /* 40px lower on the About page */
    top: calc(clamp(-4px, 0.2vw, 4px) + 35px);
    left: calc(clamp(8px, 1.4vw, 32px) + 22px);
    max-width: none;
    transform:
      translate3d(0, 0, 0)
      scale(var(--admin-intro-logo-scale-x), var(--admin-intro-logo-scale-y)) !important;
    transform-origin: left top;
  }

  body.intro-brand-settled .intro-title {
    opacity: 1 !important;
  }

  body.intro-brand-settled .intro-subtitle {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  body.admin-page.brand-title-returning.intro-brand-settled .site-intro-word {
    animation: none !important;
  }
}

@keyframes adminIntroWordToTopLogo {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: scaleX(1) scaleY(1.02);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform:
      translate3d(0, var(--admin-intro-logo-shift-y), 0)
      scale(var(--admin-intro-logo-scale-x), var(--admin-intro-logo-scale-y));
  }
}

/* Same landing as the admin one, but ending in the left corner where the home
   page now keeps STROE, so the settled rule takes over without a jump. */
@keyframes homeIntroWordToTopLogo {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: scaleX(1) scaleY(1.02);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform:
      translate3d(
        var(--brand-logo-shift-x),
        calc(var(--admin-intro-logo-shift-y) + var(--brand-logo-shift-y)),
        0
      )
      scale(var(--admin-intro-logo-scale-x), var(--admin-intro-logo-scale-y));
  }
}

/* Public home: animate from the centred intro directly into the same fixed
   coordinates used by the settled logo, so there is no positional handoff. */
@keyframes homeIntroWordToCornerLogo {
  0% {
    opacity: 1;
    filter: blur(0);
    transform:
      translate3d(
        calc(50vw - var(--brand-logo-target-left) - 50%),
        calc(50vh - var(--brand-logo-target-top) - 51%),
        0
      )
      scaleX(1)
      scaleY(1.02);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform:
      translate3d(0, 0, 0)
      scale(var(--admin-intro-logo-scale-x), var(--admin-intro-logo-scale-y));
  }
}

@keyframes adminIntroLogoReturnIn {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform:
      translate3d(0, calc(var(--admin-intro-logo-shift-y) - 42px), 0)
      scale(var(--admin-intro-logo-scale-x), var(--admin-intro-logo-scale-y));
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform:
      translate3d(0, var(--admin-intro-logo-shift-y), 0)
      scale(var(--admin-intro-logo-scale-x), var(--admin-intro-logo-scale-y));
  }
}

@media (max-width: 640px) {
  body {
    --admin-intro-logo-scale-x: 0.714;
    --admin-intro-logo-scale-y: 0.728;
    --admin-intro-logo-center-y: 34px;
    --admin-intro-logo-shift-y: calc(-50svh + var(--admin-intro-logo-center-y));
  }

  body.intro-brand-settled .site-intro-word {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.intro-brand-settled:is(.about-mounted, .about-open, .about-panel-closing) .site-intro-word {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.brand-title-returning.intro-brand-settled .site-intro-word {
    animation: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media print {
  @page {
    size: A4 portrait;
    margin: 11mm;
  }

  html,
  body {
    width: auto;
    min-height: auto;
    color: #000;
    background: #fff !important;
  }

  body * {
    visibility: hidden !important;
  }

  .pricing-panel,
  .pricing-panel * {
    visibility: visible !important;
  }

  .pricing-panel {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: auto !important;
    padding: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    animation: none !important;
    contain: none !important;
    background: #fff !important;
  }

  .pricing-shell {
    min-height: auto !important;
    padding: 0 !important;
    background: #fff !important;
  }

  .pricing-header,
  .pricing-detail,
  .pricing-guide-board,
  .pricing-info-board,
  .pricing-package,
  .pricing-info-card {
    overflow: visible !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }

  .pricing-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16mm !important;
    margin: 0 0 10mm !important;
    padding: 0 0 7mm !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.16);
  }

  .pricing-panel.is-detail-open .pricing-header > div {
    display: grid !important;
    gap: 3mm !important;
  }

  .pricing-panel.is-detail-open .pricing-header > div > span {
    order: 1 !important;
    max-width: 150mm !important;
    color: #000 !important;
    font-size: 19pt !important;
    line-height: 1 !important;
  }

  .pricing-panel.is-detail-open .pricing-header p {
    order: 2 !important;
    margin: 0 !important;
    color: rgba(0, 0, 0, 0.46) !important;
    font-size: 10pt !important;
    line-height: 1.1 !important;
  }

  .pricing-library,
  .editor-close,
  .pricing-public-pdf,
  .pricing-info-toggle,
  .site-intro,
  .site-chrome,
  main,
  .menu-overlay,
  .inquiry-panel,
  .submissions-panel,
  .site-deleted-panel,
  .editor-panel {
    display: none !important;
  }

  .pricing-detail:not([hidden]) {
    display: block !important;
    gap: 8mm;
  }

  .pricing-info-board:not([hidden]) {
    display: block !important;
  }

  .pricing-guide-board {
    display: block !important;
    gap: 8mm !important;
  }

  .pricing-guide-board .pricing-package-featured {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 5mm !important;
    margin: 0 0 9mm !important;
    padding: 7mm 0 9mm !important;
    min-height: 0 !important;
    break-inside: auto !important;
    page-break-inside: auto !important;
  }

  .pricing-guide-board h2 {
    max-width: none !important;
    font-size: 30pt !important;
    line-height: 0.86 !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .pricing-guide-board h2.pricing-package-white-title {
    color: #777 !important;
    font-weight: 600 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .pricing-package-featured .pricing-package-heading,
  .pricing-package-featured .pricing-package-meta {
    grid-column: auto !important;
    grid-row: auto !important;
    transform: none !important;
  }

  .pricing-package-featured .pricing-package-heading {
    gap: 3mm !important;
  }

  .pricing-package-featured .pricing-package-meta {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4mm !important;
  }

  .pricing-package-featured .pricing-package-list {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .pricing-package-meta div,
  .pricing-package-featured .pricing-package-meta div {
    padding: 0 !important;
  }

  .pricing-package-meta div + div,
  .pricing-package-featured .pricing-package-meta div + div {
    padding-left: 0 !important;
  }

  .pricing-package-meta dt {
    font-size: 7.5pt !important;
  }

  .pricing-package-meta dd {
    font-size: 12pt !important;
  }

  .pricing-package-list li,
  .pricing-check-list li {
    font-size: 9pt !important;
    line-height: 1.24 !important;
  }

  .pricing-info-board {
    display: block !important;
    grid-template-columns: none !important;
    gap: 8mm !important;
  }

  .pricing-info-card {
    break-inside: auto !important;
    page-break-inside: auto !important;
    padding: 6mm !important;
  }

  .pricing-info-card h2 {
    font-size: 12pt !important;
    line-height: 1 !important;
  }
}

/* The couple's name develops like a photograph while an album loads: each
   letter inks in from a faint grey to full black. Shared by the phone and
   desktop preloaders. */
.project-gallery-progress .mobile-preload-name {
  margin: 0;
  max-width: min(72vw, 900px);
  font-family: var(--sans);
  font-size: clamp(26px, 3.4vw, 58px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: 0.01em;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--black);
}

.project-gallery-progress .mobile-preload-letter {
  opacity: 0.12;
  transition: opacity 300ms cubic-bezier(0.33, 0, 0.2, 1);
}

.project-gallery-progress .mobile-preload-letter.is-inked {
  opacity: 1;
}

@media (max-width: 640px) {
  .project-gallery-progress .mobile-preload-name {
    max-width: 84vw;
    font-size: clamp(26px, 8vw, 40px);
  }
}

/* Name + percentage stacked, and the finished loader dissolves away
   instead of cutting */
.project-gallery-progress .mobile-preload-progress {
  display: grid;
  justify-items: center;
  gap: clamp(10px, 1.4vw, 18px);
}

.project-gallery-progress .mobile-preload-percent {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(11px, 0.95vw, 14px);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: rgba(17, 17, 17, 0.42);
  font-variant-numeric: tabular-nums;
}

.project-gallery-progress {
  transition: opacity 560ms ease;
}

.project-gallery-progress.is-preload-fading {
  opacity: 0;
  pointer-events: none;
}

/* The progress block recedes — a soft zoom-out — while the veil fades away */
.project-gallery-progress .mobile-preload-progress {
  transform-origin: center;
  transition: transform 560ms cubic-bezier(0.33, 0, 0.2, 1);
}

.project-gallery-progress.is-preload-fading .mobile-preload-progress {
  transform: scale(0.88);
}

/* While the album-close transition classes drop, the always-visible chrome is
   pinned: an intermediate class combination re-targeted its opacity to 0 for
   a beat and the brand / menu / write-us blinked ~2s after the close */
body.chrome-swap-hold .brand,
body.chrome-swap-hold .rail-menu,
body.chrome-swap-hold .rail-write {
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
  animation: none !important;
}

/* One row: the number carries the header font, the saved-word is the small grey label */
.site-deleted-header [data-site-deleted-status] b,
.submissions-header [data-submissions-status] b {
  color: var(--black);
  font-size: inherit;
  font-weight: 600;
  letter-spacing: normal;
}

.site-deleted-header [data-site-deleted-status] span,
.submissions-header [data-submissions-status] span {
  display: inline;
  margin-left: 2px;
  color: rgba(0, 0, 0, 0.42);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* Backup block: sits under the share block, separated by the same rule */
.editor-section-backup {
  margin-top: clamp(14px, 1.6vw, 26px);
  padding-top: clamp(24px, 2.6vw, 40px);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.editor-backup-note {
  max-width: 64ch;
  margin: 0;
  color: rgba(0, 0, 0, 0.54);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  text-transform: none;
}

.editor-backup-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
}

.editor-backup-summary {
  color: rgba(0, 0, 0, 0.44);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.editor-backup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* The restore control is a label wrapped around an invisible file input, so
   it wears the pill button look instead of the editor's field-label look */
.editor-form label.editor-backup-restore {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-height: 34px;
  padding: 0 14px;
  color: var(--black);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.editor-form label.editor-backup-restore:focus-within {
  background: rgba(255, 255, 255, 0.94);
}

.editor-form .editor-backup-restore input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.editor-form .editor-backup-restore input[type="file"]:disabled {
  cursor: default;
}

.editor-form label.editor-backup-restore:has(input:disabled) {
  opacity: 0.34;
  cursor: default;
}

.editor-backup-progress {
  max-width: 360px;
}

.editor-backup-status {
  min-height: 1em;
  color: rgba(0, 0, 0, 0.6);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}