/*
Theme Name: By Andrea Funk
Author: Andrea Funk
Description: SEO-friendly photographer portfolio theme with WordPress-rendered markup and progressive CSS/JS enhancements.
Version: 1.0.0
Text Domain: by-andrea-funk
Template: kadence
*/

@font-face {
  font-display: swap;
  font-family: 'Big Caslon';
  font-style: normal;
  font-weight: 400;
  /* Subset (pyftsubset, --layout-features='*') to Basic Latin + Latin-1 Supplement + Latin
     Extended-A (U+0000-017F) plus the punctuation/quotes/dashes the site's copy uses
     (U+2013-2014, U+2018-201E, U+2026), so current English copy and planned German translations
     render identically with no fallback mid-word. Unsubsetted originals
     are kept alongside, unused, in assets/fonts/. */
  src:
    url('assets/fonts/big-caslon-regular-subset.woff2') format('woff2'),
    url('assets/fonts/big-caslon-regular-subset.woff') format('woff');
}

@property --contact-chrome-ink {
  inherits: true;
  initial-value: #111;
  syntax: '<color>';
}

@property --contact-chrome-surface {
  inherits: true;
  initial-value: #ebe6de;
  syntax: '<color>';
}

@property --contact-chrome-progress {
  inherits: true;
  initial-value: 0;
  syntax: '<number>';
}

@property --contact-chip-ink {
  inherits: true;
  initial-value: #fff;
  syntax: '<color>';
}

@property --contact-chip-surface {
  inherits: true;
  initial-value: #111;
  syntax: '<color>';
}

@font-face {
  font-display: swap;
  font-family: 'Big Caslon';
  font-style: italic;
  font-weight: 400;
  src:
    url('assets/fonts/big-caslon-italic.woff2') format('woff2'),
    url('assets/fonts/big-caslon-italic.woff') format('woff');
}

@font-face {
  font-display: swap;
  font-family: "Suisse Int'l";
  font-style: normal;
  font-weight: 400;
  /* Subset — see the Big Caslon @font-face above for the covered character set and rationale. */
  src:
    url('assets/fonts/suisse-intl-regular-subset.woff2') format('woff2'),
    url('assets/fonts/suisse-intl-regular-subset.woff') format('woff');
}

@font-face {
  font-display: swap;
  font-family: "Suisse Int'l";
  font-style: normal;
  font-weight: 500;
  /* Subset — see the Big Caslon @font-face above for the covered character set and rationale. */
  src:
    url('assets/fonts/suisse-intl-medium-subset.woff2') format('woff2'),
    url('assets/fonts/suisse-intl-medium-subset.woff') format('woff');
}

/* Metric-compatible fallbacks so the font-display: swap flash from Georgia/Helvetica Neue to the
   real webfont doesn't reflow the page (the sticky gallery heading is set at up to 17rem, so a
   few percent of advance-width mismatch moves whole lines). Numbers were measured, not guessed:
   scratchpad e3/measure-font-metrics.mjs loaded the live site, read the real faces' Canvas
   TextMetrics (measureText().width over a 62-char mixed-case+digit sample at 300px for
   size-adjust; fontBoundingBoxAscent/Descent at the same size for the vertical overrides) against
   each local() candidate. line-gap-override is set to 0% for both — TextMetrics has no direct
   line-gap accessor and 0 is the common default for this recipe when the OS/2 table isn't parsed
   directly.
   Big Caslon vs Georgia: size-adjust 98.872%, ascent-override 89.667%, descent-override 30.333%.
   Suisse Int'l vs Helvetica Neue: size-adjust 102.178%, ascent-override 98.667%,
   descent-override 31.000% (chosen over the Arial candidate — Helvetica Neue's size-adjust left
   real sentence samples within ~0.4%, Arial's within ~2%; Arial stays as the src fallback for
   platforms without Helvetica Neue, where an imperfect match is still far better than none). */
@font-face {
  ascent-override: 89.667%;
  descent-override: 30.333%;
  font-display: swap;
  font-family: 'Big Caslon Fallback';
  line-gap-override: 0%;
  size-adjust: 98.872%;
  src: local('Georgia');
}

@font-face {
  ascent-override: 98.667%;
  descent-override: 31%;
  font-display: swap;
  font-family: 'Suisse Fallback';
  line-gap-override: 0%;
  size-adjust: 102.178%;
  src: local('Helvetica Neue'), local('Arial');
}

:root {
  --color-accent: #ff5a1f;
  --color-background: #ebe6de;
  --font-display: 'Big Caslon', 'Big Caslon Fallback', Georgia, serif;
  --font-body: "Suisse Int'l", 'Suisse Fallback', system-ui, sans-serif;
  --site-top-offset: 0px;
  --site-center-offset: 0px;
  --section-space: clamp(6rem, 14svh, 10rem);
  --site-footer-height: 1.75rem;
  --site-gutter: clamp(1rem, 4vw, 3rem);
}

* {
  box-sizing: border-box;
}

html,
body {
  background: var(--color-background);
  color: #111;
  font-family: var(--font-body);
  line-height: 1.5;
  overflow-x: clip;
  overscroll-behavior: none;
}

html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

html.fonts-loading,
html.fonts-loading body {
  overflow: hidden;
}

html.fonts-loading body *:not(.site-loader) {
  visibility: hidden;
}

body {
  margin: 0;
  padding-block-end: var(--site-footer-height);
}

body::before {
  -webkit-backdrop-filter: blur(18.75rem);
  backdrop-filter: blur(18.75rem);
  background: rgb(235 230 222 / 0.2);
  content: '';
  inset: 0;
  opacity: var(--scroll-shortcut-veil, 0);
  pointer-events: none;
  position: fixed;
  z-index: 7;
}

@supports (backdrop-filter: url('#baf-scroll-shortcut-distortion')) {
  body::before {
    backdrop-filter: url('#baf-scroll-shortcut-distortion');
  }
}

body[data-scroll-shortcut-active] :is(.site-header, .site-footer) {
  z-index: 8;
}

.site-filter-defs {
  block-size: 0;
  inline-size: 0;
  position: absolute;
}

#main {
  margin-inline: auto;
  max-width: 1600px;
}

.site-loader {
  background: rgb(17 17 17);
  height: 4px;
  inset: 0 auto auto 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transform: scaleY(0.25);
  transform-origin: top;
  transition:
    opacity 400ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  width: 100vw;
  z-index: 100000;
}

body[aria-busy='true'] .site-loader {
  box-shadow: 0 2px 1rem rgb(17 17 17 / 0.3);
  opacity: 1;
  transform: scaleY(1);
}

body:has(.portfolio-hero)::after {
  animation: scroll-cue-float 1.6s ease-in-out infinite;
  block-size: 0.65rem;
  border-block-end: 1px solid rgb(17 17 17 / 0.7);
  border-inline-end: 1px solid rgb(17 17 17 / 0.7);
  bottom: calc(var(--site-footer-height) + 1.25rem);
  content: '';
  inline-size: 0.65rem;
  inset-inline-start: 50%;
  opacity: 1;
  pointer-events: none;
  position: fixed;
  rotate: 45deg;
  translate: -50% 0;
  z-index: 6;
}

@keyframes scroll-cue-float {
  0%,
  100% {
    translate: -50% -0.2rem;
  }

  50% {
    translate: -50% 0.35rem;
  }
}

@keyframes scroll-cue-dismiss {
  to {
    opacity: 0;
  }
}

.admin-bar .portfolio-hero {
  min-height: calc(100svh - 32px);
}

:is(.portfolio-hero, [data-hero-state='complete']) .hero-copy {
  color: var(--contact-chrome-ink);
  font-family: var(--font-body);
  font-size: clamp(0.7rem, 1vw, 1rem);
  max-width: min(55rem, 72vw);
  text-align: right;
  text-transform: uppercase;
  transition: color 200ms cubic-bezier(0.22, 1, 0.36, 1);
  view-transition-name: site-intro;
  width: 100%;
}

.portfolio-hero .hero-copy {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, min(6.25vw, 6.25rem));
}

.portfolio-hero .hero-copy > p {
  transform: translateX(var(--hero-description-shift, 0px));
}

[data-hero-state='complete'] .hero-copy {
  left: 50%;
  position: fixed;
  top: calc(var(--site-top-offset) + 1rem);
  transform: translateX(-50%);
  z-index: 5;
}

[data-hero-state='complete'] .hero-copy > p {
  transform: translateX(calc(50vw - 50% - var(--site-gutter)));
}

[data-hero-state='complete'] .hero-copy baf-split-text {
  display: none;
}

.portfolio-hero .hero-copy baf-split-text {
  bottom: 100%;
  font-family: var(--font-display);
  font-size: min(12.5vw, 12.5rem);
  font-style: normal;
  font-weight: 400;
  inset-inline-end: 0;
  letter-spacing: clamp(-0.5rem, -0.4vw, -0.1rem);
  line-height: 1;
  position: absolute;
  text-align: right;
  text-transform: none;
  white-space: nowrap;
  width: 100%;
}

.portfolio-hero .hero-copy baf-split-text .split-text__visual {
  display: block;
  inset: auto 50% 0 auto;
  position: absolute;
  translate: calc(50% - var(--hero-description-shift, 0px)) 0;
  width: max-content;
}

:is(.portfolio-hero, [data-hero-state='complete']) .hero-copy strong {
  color: var(--contact-chip-ink);
  display: inline-block;
  font-size: 0.78em;
  font-weight: 500;
  letter-spacing: 0.14em;
  margin-inline-end: 0.45em;
  overflow: hidden;
  padding: 0.12em 1.2em;
  position: relative;
  text-decoration: none;
  transition: color 200ms cubic-bezier(0.22, 1, 0.36, 1);
  vertical-align: middle;
}

.hero-copy__about-link {
  /* Resolve the animated ink on the outer badge; visited links inherit that color. */
  color: inherit;
  text-decoration: none;
}

.hero-copy__about-link::after {
  content: '';
  inset: 0;
  position: absolute;
}

:is(.portfolio-hero, [data-hero-state='complete']) .hero-copy strong::before {
  background-color: var(--contact-chip-surface);
  block-size: 100%;
  content: '';
  inset: 0 0 auto;
  position: absolute;
  transition: background-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
}

.portfolio-hero > :is(.eyebrow, h1, h2) {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

a {
  color: currentColor;
}

/* No focus ring for pointer/programmatic focus (e.g. the flash when the photo sheet returns
   focus to a card); keyboard focus keeps its indicator via :focus-visible. */
:focus:not(:focus-visible) {
  outline: none;
}

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

baf-split-text {
  display: inline;
}

.split-text__word {
  white-space: nowrap;
}

.split-text__fragment {
  display: inline-block;
}

.portfolio-hero {
  margin-block-end: 100svh;
  min-height: 100svh;
  position: relative;
  view-timeline-axis: block;
  view-timeline-name: --home-hero;
}

body {
  timeline-scope: --contact-transition, --home-gallery, --home-hero;
}

.portfolio-hero .hero-copy .split-text__fragment,
.gallery-heading .split-text__fragment {
  transform-origin: 50% 70%;
  /* no will-change: the scroll-linked animations promote these only while in range; permanent
     promotion of every glyph multiplied layers on a page that is already layer-budget-bound */
}

@supports (animation-timeline: view()) {
  body:has(.portfolio-hero)::after {
    animation-duration: 1.6s, 1ms;
    animation-fill-mode: both;
    animation-iteration-count: infinite, 1;
    animation-name: scroll-cue-float, scroll-cue-dismiss;
    animation-range:
      normal,
      entry 24% entry 34%;
    animation-timeline: auto, --home-gallery;
    animation-timing-function: ease-in-out, linear;
  }

  .portfolio-hero .hero-copy {
    animation-duration: 1ms;
    animation-fill-mode: both;
    animation-name: hero-copy-stick;
    animation-range-end: exit 100%;
    animation-range-start: exit 0%;
    animation-timeline: --home-hero;
    animation-timing-function: linear;
    position: fixed;
    top: calc(var(--site-top-offset) + 1rem);
    transform: translateX(-50%);
    z-index: 5;
  }

  @media (prefers-reduced-motion: no-preference) {
    .portfolio-hero .hero-copy > p {
      animation-duration: 1ms;
      animation-fill-mode: both;
      animation-name: hero-copy-shift-right;
      animation-range-end: entry 100%;
      animation-range-start: entry 0%;
      animation-timeline: --home-gallery;
      animation-timing-function: linear;
    }

    .portfolio-hero .hero-copy strong,
    .portfolio-hero .hero-copy__name {
      animation-duration: 1ms;
      animation-fill-mode: both;
      animation-name: hero-name-reveal;
      animation-range-end: exit 44%;
      animation-range-start: exit 32%;
      animation-timeline: --home-hero;
      animation-timing-function: linear;
    }

    .portfolio-hero .hero-copy__name {
      animation-name: hero-name-ink-reveal;
    }

    .portfolio-hero .hero-copy strong::before {
      animation-duration: 1ms, 1ms;
      animation-fill-mode: both, both;
      animation-name: hero-name-box-reveal, hero-name-box-fill;
      animation-range-end:
        exit 28%,
        exit 44%;
      animation-range-start:
        exit 18%,
        exit 32%;
      animation-timeline: --home-hero, --home-hero;
      animation-timing-function: linear, linear;
      transform-origin: 100% 50%;
    }

    .portfolio-hero .hero-copy .split-text__fragment {
      animation-duration: 1ms;
      animation-fill-mode: both;
      animation-name: hero-fragment-disappear;
      animation-range-end: exit calc(26% + var(--split-index-reverse, var(--split-index)) * 2.2%);
      animation-range-start: exit calc(var(--split-index-reverse, var(--split-index)) * 2.2%);
      animation-timeline: --home-hero;
      animation-timing-function: linear;
    }

    .gallery-heading .split-text__fragment {
      animation-direction: reverse;
      animation-duration: 1ms;
      animation-fill-mode: both;
      animation-name: hero-fragment-disappear;
      animation-range-end: entry calc(70% - var(--split-index-reverse, 0) * 2.8%);
      animation-range-start: entry calc(52% - var(--split-index-reverse, 0) * 2.8%);
      animation-timeline: --portfolio-gallery;
      animation-timing-function: linear;
    }

    .gallery-heading .eyebrow {
      animation-duration: 1ms;
      animation-fill-mode: both;
      animation-name: gallery-eyebrow-presence;
      animation-range: entry 30% entry 100%;
      animation-timeline: --portfolio-gallery;
      animation-timing-function: linear;
    }

    body:has(.portfolio-hero) :is(.site-brand, #primary-menu > li),
    body:has(.portfolio-hero) .site-footer p {
      --header-reveal-index: 0;

      animation-duration: 1ms;
      animation-fill-mode: both;
      animation-name: site-header-reveal;
      animation-range-end: entry calc(18% + var(--header-reveal-index) * 3%);
      animation-range-start: entry calc(2% + var(--header-reveal-index) * 3%);
      animation-timeline: --home-gallery;
      animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    }

    body:has(.portfolio-hero) #primary-menu > li:nth-child(1) {
      --header-reveal-index: 1;
    }

    body:has(.portfolio-hero) #primary-menu > li:nth-child(2) {
      --header-reveal-index: 2;
    }

    body:has(.portfolio-hero) #primary-menu > li:nth-child(3) {
      --header-reveal-index: 3;
    }

    body:has(.portfolio-hero) #primary-menu > li:nth-child(4) {
      --header-reveal-index: 4;
    }

    body:has(.portfolio-hero) .site-footer p {
      --header-reveal-index: 8;
    }

    /* a11y fix: guarantee a visible, focused state the instant keyboard focus reaches the logo
       link or a primary-nav link, regardless of how far the site-header-reveal timeline has
       progressed (see the keyframe comment above). `!important` matches the reduced-motion kill
       switch's own precedent for winning against a running scroll-driven animation. */
    body:has(.portfolio-hero) .site-brand:focus-visible,
    body:has(.portfolio-hero) #primary-menu > li:focus-within {
      filter: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
  }
}

@keyframes hero-copy-stick {
  from {
    transform: translate(
      -50%,
      calc(50svh + var(--site-center-offset) - var(--site-top-offset) - 1rem + min(6.25vw, 6.25rem))
    );
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes hero-copy-shift-right {
  to {
    transform: translateX(calc(50vw - 50% - var(--site-gutter)));
  }
}

@keyframes gallery-eyebrow-presence {
  0% {
    opacity: 0;
    translate: 0 1rem;
  }

  20%,
  60% {
    opacity: 1;
    translate: 0 0;
  }

  100% {
    opacity: 0;
    translate: 0 -1rem;
  }
}

@keyframes hero-name-reveal {
  from {
    clip-path: inset(calc(50% - 0.5px) 0);
  }

  to {
    clip-path: inset(0);
  }
}

/* Keep reveal opacity separate from the live footer palette; finished color keyframes
   override the shared ink and can cache inherited custom properties in Firefox. */
@keyframes hero-name-ink-reveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes hero-name-box-reveal {
  from {
    scale: 0 1;
  }

  to {
    scale: 1;
  }
}

@keyframes hero-name-box-fill {
  from {
    block-size: 1px;
    inset-block-start: calc(50% - 0.5px);
  }

  to {
    block-size: 100%;
    inset-block-start: 0;
  }
}

@keyframes hero-fragment-disappear {
  from {
    filter: blur(0);
    opacity: 1;
    transform: none;
  }

  to {
    filter: blur(0.14em);
    opacity: 0;
    transform: translateY(-0.28em) rotate(-2deg);
  }
}

@keyframes site-header-reveal {
  /* No `visibility` step here on purpose (a11y fix): this animation's timeline only starts
     once the section after the hero begins entering the viewport (animation-range below), so a
     `visibility: hidden` "from" state left the site logo, primary nav links, and footer
     copyright completely unreachable by keyboard Tab and absent from the accessibility tree for
     the entire time the page sits at/near the top — even though they occupy real, visually
     stable space in the fixed header/footer. `opacity: 0` already renders them invisible to
     sighted users identically; dropping `visibility` only restores keyboard/AT reachability
     before the reveal fires. The :focus-visible/:focus-within overrides below force full
     visibility the instant one of these is focused, regardless of scroll position. */
  from {
    filter: blur(0.55rem);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.45rem);
  }

  to {
    filter: blur(0);
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
}

h1,
h2,
h3,
p {
  margin-block: 0;
}

h1,
h2,
h3,
.site-title {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1;
}

.skip-link {
  left: 1rem;
  position: fixed;
  top: -6rem;
  z-index: 10;
}

.skip-link:focus {
  top: 1rem;
}

.site-header,
.site-footer {
  align-items: center;
  color: var(--contact-chrome-ink);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.site-header {
  inset: 0 0 auto;
  padding: 1rem var(--site-gutter) 0.75rem;
  pointer-events: none;
  position: fixed;
  width: 100%;
  z-index: 4;
}

.site-header::before {
  background: linear-gradient(
    to bottom,
    var(--color-background) 0%,
    var(--color-background) 42%,
    rgb(235 230 222 / 0.72) 62%,
    rgb(235 230 222 / 0.38) 78%,
    rgb(235 230 222 / 0.14) 90%,
    rgb(235 230 222 / 0) 100%
  );
  block-size: calc(var(--site-top-offset) + clamp(6rem, 12svh, 8rem));
  content: '';
  inset: 0 0 auto;
  opacity: calc(1 - var(--contact-chrome-progress));
  pointer-events: none;
  /* absolute within the fixed header, not independently fixed — saves a composited layer */
  position: absolute;
  z-index: -1;
}

.admin-bar {
  --site-top-offset: 32px;
  --site-center-offset: 16px;
}

.admin-bar .site-header {
  top: var(--site-top-offset);
}

.site-brand {
  display: block;
  inline-size: clamp(2.5rem, 4vw, 3.75rem);
  line-height: 0;
  pointer-events: auto;
  position: relative;
  view-transition-name: site-brand;
  z-index: 1;
}

.site-brand svg {
  block-size: auto;
  display: block;
  fill: currentColor;
  inline-size: 100%;
}

.site-footer {
  background: var(--contact-chrome-surface);
  inset: auto 0 0;
  min-block-size: var(--site-footer-height);
  padding: 0.125rem var(--site-gutter);
  position: fixed;
  width: 100vw;
  z-index: 4;
}

.site-footer::before {
  background: linear-gradient(
    to top,
    var(--color-background) 0%,
    rgb(235 230 222 / 0.72) 20%,
    rgb(235 230 222 / 0.38) 50%,
    rgb(235 230 222 / 0.14) 75%,
    rgb(235 230 222 / 0) 100%
  );
  block-size: clamp(0.5rem, 1.5svh, 1rem);
  bottom: 100%;
  content: '';
  inset-inline: 0;
  opacity: calc(1 - var(--contact-chrome-progress));
  pointer-events: none;
  position: absolute;
}

.site-footer p,
.site-footer a {
  font-size: 0.75rem;
  line-height: 1;
}

.site-footer p {
  white-space: nowrap;
}

.gallery-section,
.portfolio-story {
  padding-block: var(--section-space);
  position: relative;
  view-timeline-axis: block;
  view-timeline-name: --portfolio-gallery;
}

.portfolio-hero + :is(.gallery-section, .portfolio-story) {
  view-timeline-name: --home-gallery, --portfolio-gallery;
}

.portfolio-story-section {
  min-height: 100svh;
}

:is(.gallery-section, .portfolio-story) {
  --gallery-gutter: var(--site-gutter);

  padding-inline: var(--gallery-gutter);
}

.gallery-heading {
  margin-inline: calc(0px - var(--gallery-gutter));
  margin-block: 0;
  max-width: none;
  pointer-events: none;
  position: sticky;
  text-align: center;
  top: 50svh;
  transform: translateY(-50%);
  width: auto;
  z-index: 0;
}

.gallery-heading .eyebrow {
  bottom: calc(100% + 2rem);
  font-size: 0.78rem;
  inset-inline: 0;
  letter-spacing: 0.02em;
  position: absolute;
  text-transform: uppercase;
}

.gallery-heading :is(h1, h2) {
  font-size: clamp(6rem, 18vw, 17rem);
  line-height: 0.72;
  white-space: nowrap;
}

.portfolio-mosaic {
  position: relative;
  z-index: 1;
}

.portfolio-mosaic__column {
  display: block;
  min-width: 0;
}

/* Keep desktop masonry in the server-rendered tracks. Native multicolumn layout can rebalance
   cards after first paint in Firefox when only the viewport height changes, even though the
   mosaic width is unchanged. Stable tracks also give every engine the same visual ordering. */
@media (min-width: 781px) {
  .portfolio-mosaic {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.portfolio-card {
  --tile-scale: 1.06;
  --tile-turn: 0deg;
  --scatter-y: 0rem;

  break-inside: avoid;
  container-type: inline-size;
  display: inline-block;
  margin-block: 0 1rem;
  width: 100%;
}

.portfolio-card__link {
  color: currentColor;
  display: block;
  text-decoration: none;
}

.portfolio-card__figure {
  aspect-ratio: var(--tile-ratio, 3 / 4);
  background: #7e7c78;
  isolation: isolate;
  margin: 0;
  overflow: clip;
  position: relative;
}

.portfolio-card__figure:has(.portfolio-card__image[data-baf-image-state='pending']),
.portfolio-card__figure:has(.portfolio-card__image[data-baf-image-state='error']) {
  animation: portfolio-loader-field var(--loader-cycle) cubic-bezier(0.45, 0, 0.55, 1)
    var(--loader-delay) infinite;
}

.portfolio-card__image-reveal {
  clip-path: inset(var(--parallax-distance, 0rem) 0);
  display: block;
  inset: 0;
  position: absolute;
  transition: clip-path 760ms cubic-bezier(0.65, 0, 0.35, 1);
}

.portfolio-card__image-reveal:has(.portfolio-card__image[data-baf-image-state='pending']) {
  clip-path: inset(50% 50%);
}

/* The resting saturate(0.92)/contrast(1.02) grade used to live here as a permanent CSS filter on
   every gallery image, which kept ~104 filter render surfaces alive at once (docs/
   60fps-performance-plan.md §4 B1). It is now baked into the generated derivative sizes instead
   (functions.php require of inc/image-grade.php — see that file for the GD/Imagick baking and
   its calibration against the exact CSS filter matrix), so this rule carries no resting filter
   without a permanent filter surface. */
.portfolio-card__image {
  height: calc(118% + 2 * var(--parallax-distance, 0rem));
  inset-block-start: calc(-9% - var(--parallax-distance, 0rem));
  inset-inline-start: 0;
  max-width: none;
  object-fit: scale-down;
  position: absolute;
  transform: scale(var(--tile-scale)) rotate(var(--tile-turn));
  width: 100%;
}

.baf-hover-webgl {
  display: block;
  max-width: none;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.category-preview,
.category-preview__frame {
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.category-preview {
  /* Cover only the visible window. With scroll parallax the figure is oversized by
     --parallax-distance above and below and clipped back; a mask centred on that taller box
     reached the visible top/bottom long before the sides, leaving strips of the previous photo
     at the left/right edges through the end of each reveal. */
  inset-block: var(--parallax-distance, 0rem);
  z-index: 1;
}

/* A parallax image must not become Firefox's scroll anchor when a preview starts painting. */
.portfolio-card[data-category-preview] {
  overflow-anchor: none;
}

.category-preview__frame {
  clip-path: inset(50% 50%);
}

.category-preview__frame img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.portfolio-card__image[data-baf-image-state='error'] {
  visibility: hidden;
}

@keyframes portfolio-loader-field {
  0%,
  100% {
    background-position:
      20% 20%,
      50% 50%;
    background-size:
      220% 220%,
      165% 165%;
  }

  48% {
    background-position:
      calc(20% + var(--loader-drift-x)) calc(20% + var(--loader-drift-y)),
      calc(50% - var(--loader-drift-y)) calc(50% + var(--loader-drift-x));
    background-size:
      220% 220%,
      165% 165%;
  }

  76% {
    background-position:
      calc(20% + var(--loader-drift-y)) calc(20% + var(--loader-drift-x)),
      calc(50% + var(--loader-drift-x)) calc(50% - var(--loader-drift-y));
    background-size:
      220% 220%,
      165% 165%;
  }
}

@media (scripting: none), (prefers-reduced-motion: reduce) {
  .portfolio-card__figure {
    animation: none !important;
  }

  .portfolio-card__image-reveal,
  .portfolio-card__image {
    transition-duration: 1ms;
  }
}

/* --- Single-layer outline headline (docs/60fps-performance-plan.md §4 A5) ---
   ONE absolutely positioned overlay per gallery section (template-parts/outline-overlay.php)
   paints the beige outline headline over the card photos; site.js clips it to the card figure
   rects with clip-path: path() measured once per layout. Its sticky text child lands on
   exactly the dark .gallery-heading's pixels (measured coincidence — same font/line box,
   full-width centered nowrap, top: 50svh + translateY(-50%), containing-block padding
   mirroring the section's), so the stroke reads as the heading's continuation over images.
   This replaced ~104 per-card anchor-positioned fixed copies whose anchor layout starved the
   compositor (§1.1); no anchor positioning remains, so the outline also renders in engines
   without it (Firefox). Until site.js applies the clip, the overlay stays hidden — no-JS and
   no-clip-path browsers degrade to the dark sticky heading alone. */
.portfolio-outline-overlay {
  inset: 0;
  /* Mirror the section's block padding so the sticky text's containing-block travel matches
     the in-flow heading's exactly (same start offset, same bottom clamp). */
  padding-block: var(--section-space);
  pointer-events: none;
  position: absolute;
  /* visibility, not display: the clip measurement needs the overlay's real geometry while it
     is still hidden (display: none would zero every getBoundingClientRect). */
  visibility: hidden;
  z-index: 2;
}

.portfolio-outline-overlay[data-outline-clip-ready] {
  visibility: visible;
}

.portfolio-outline-overlay__text {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: clamp(1px, 0.12vw, 2px) #ebe6de;
  color: transparent;
  display: block;
  font-family: var(--font-display);
  font-size: clamp(6rem, 18vw, 17rem);
  font-weight: 400;
  line-height: 0.72;
  position: sticky;
  text-align: center;
  top: 50svh;
  transform: translateY(-50%);
  user-select: none;
  white-space: nowrap;
}

.portfolio-card__label {
  display: none;
}

.portfolio-card__description {
  display: none;
}

.card-meta {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .portfolio-card__figure {
      --parallax-distance: clamp(2.5rem, 5svh, 4rem);
      --parallax-distance: min(12svh, var(--tile-parallax-limit, 4rem), 8rem);

      /* the clip + negative-margin oversize exists only for the parallax travel; without
         parallax it computed to inset(0)/margin 0 while still forcing per-card clip work */
      clip-path: inset(var(--parallax-distance) 0);
      margin: calc(-1 * var(--parallax-distance)) 0;
    }

    .portfolio-card__link:has(.portfolio-card__figure) {
      clip-path: inset(min(12svh, var(--tile-parallax-limit, 4rem), 8rem) 0);
    }

    .portfolio-card__image {
      animation-duration: 1ms;
      animation-fill-mode: both;
      animation-name: portfolio-figure-parallax;
      animation-range: entry 0% exit 100%;
      animation-timeline: view(block);
      animation-timing-function: linear;
    }

    .portfolio-card.is-square .portfolio-card__image {
      animation-name: portfolio-figure-parallax-square;
    }

    .portfolio-card.is-landscape .portfolio-card__image {
      animation-name: portfolio-figure-parallax-landscape;
    }

    .portfolio-card.is-wide .portfolio-card__image {
      animation-name: portfolio-figure-parallax-wide;
    }

    .gallery-heading :is(h1, h2),
    .portfolio-outline-overlay__text {
      animation-duration: 1ms;
      animation-fill-mode: both;
      animation-name: portfolio-title-outline-fade;
      animation-range: exit 0% exit 22%;
      animation-timeline: --portfolio-gallery;
      animation-timing-function: linear;
    }
  }
}

/* One keyframe set per orientation class, mirroring the quantized --tile-parallax-limit that
   functions.php emits (baf_image_layout). Keyframes must stay var()-free: a var() reference
   forces the scroll-driven animation onto the main thread every frame, which was the last
   source of dropped frames during hover. The style-time clip (--parallax-distance) uses the
   same quantized limit, so clip and travel remain equal by construction. */
@keyframes portfolio-figure-parallax {
  from {
    translate: 0 calc(-1 * min(12svh, 30cqi, 8rem));
  }

  to {
    translate: 0 min(12svh, 30cqi, 8rem);
  }
}

@keyframes portfolio-figure-parallax-square {
  from {
    translate: 0 calc(-1 * min(12svh, 20cqi, 8rem));
  }

  to {
    translate: 0 min(12svh, 20cqi, 8rem);
  }
}

@keyframes portfolio-figure-parallax-landscape {
  from {
    translate: 0 calc(-1 * min(12svh, 15cqi, 8rem));
  }

  to {
    translate: 0 min(12svh, 15cqi, 8rem);
  }
}

@keyframes portfolio-figure-parallax-wide {
  from {
    translate: 0 calc(-1 * min(12svh, 13.3333cqi, 8rem));
  }

  to {
    translate: 0 min(12svh, 13.3333cqi, 8rem);
  }
}

@keyframes portfolio-title-outline-fade {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.portfolio-media-zone {
  display: block;
  margin-block-start: var(--section-space);
  position: relative;
  z-index: 1;
}

body.tax-portfolio_category .portfolio-story > .portfolio-media-zone {
  margin-block-start: max(
    var(--section-space),
    calc(50svh - var(--section-space) - clamp(0.72rem, 2.16vw, 2.04rem) + clamp(1rem, 2svh, 1.5rem))
  );
}

.contact-section {
  --contact-black-runway: 12svh;
  --contact-transition-travel: 120svh;

  background: #050505;
  color: var(--color-background);
  inline-size: 100vw;
  inset-inline-start: 50%;
  isolation: isolate;
  position: relative;
  translate: -50% 0;
}

.contact-section__panel {
  align-content: center;
  background: #050505;
  display: grid;
  gap: clamp(2rem, 6vw, 6rem);
  grid-template-columns: minmax(0, clamp(22rem, 28vw, 24rem)) minmax(18rem, 30rem);
  inline-size: 100%;
  justify-content: center;
  min-height: 100svh;
  padding: clamp(1.25rem, 4vw, 4rem);
  position: relative;
  z-index: 1;
}

.contact-section__panel {
  margin-block-start: calc(-100svh + var(--contact-black-runway));
}

.contact-transition {
  background: linear-gradient(to bottom, var(--color-background), #050505);
  height: calc(100svh + var(--contact-transition-travel));
  inline-size: 100%;
  position: relative;
  view-timeline-axis: block;
  view-timeline-name: --contact-transition;
}

.js .contact-transition {
  background: #050505;
}

.contact-transition__sticky {
  height: 100svh;
  inset-block-start: 0;
  overflow: hidden;
  position: sticky;
}

.contact-transition__canvas {
  display: block;
  height: 100%;
  width: 100%;
}

.contact-section__header {
  align-self: center;
  justify-self: end;
  text-align: right;
  width: 100%;
}

.contact-section__header :is(h1, h2) {
  letter-spacing: -0.065em;
  font-size: clamp(5rem, 15vw, 14rem);
  line-height: 0.7;
  margin-inline-start: auto;
  max-width: 5ch;
}

.contact-section__copy {
  color: rgb(235 230 222 / 48%);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  margin-block-start: 2rem;
  max-width: 30rem;
  text-transform: uppercase;
}

.contact-section__form .ff-default .ff-el-form-control,
.contact-section__form .ff-default .ff-btn-submit:not(.ff_btn_no_style) {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgb(235 230 222 / 42%);
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  outline: none;
}

.contact-section__form .ff-default .ff-el-form-control {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.2;
  padding: 0 0 0.8rem;
  resize: vertical;
  width: 100%;
}

.contact-section__form {
  align-self: center;
  justify-self: start;
  max-width: 30rem;
  width: 100%;
}

.contact-section__form .ff-default .ff-el-form-control::placeholder {
  color: rgb(235 230 222 / 72%);
  opacity: 1;
}

.contact-section__form .ff-default .ff-el-form-control:focus {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}

.contact-section__form .ff-default .ff-btn-submit:not(.ff_btn_no_style) {
  cursor: pointer;
  font: inherit;
  padding: 0.7rem 0;
}

.contact-section__form .ff-default .ff-btn-submit:not(.ff_btn_no_style):is(:hover, :focus) {
  border-color: currentColor;
  opacity: 1;
}

.contact-section__form .fluentform .ff-el-group {
  margin-block-end: 1.25rem;
}

.contact-section__form .fluentform .ff-el-input--label {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.contact-section__form .ff-default .ff-el-input--label label {
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
}

.contact-section__form .fluentform .ff-el-input--content {
  display: grid;
  gap: 0.25rem;
  grid-template-rows: auto 1.25rem;
}

.contact-section__form .fluentform .ff-el-input--content > .error {
  align-self: end;
  font-size: 0.68rem;
  line-height: 1.2;
  margin: 0;
}

.contact-section__form
  .fluentform
  .ff-el-input--label.ff-el-is-required.asterisk-right
  label::after {
  color: currentColor;
}

@supports (animation-timeline: view()) {
  body:has(.contact-section),
  body:has(.contact-section) .site-footer {
    animation-duration: 1ms;
    animation-fill-mode: both;
    animation-name: contact-chrome-darken;
    animation-timeline: --contact-transition;
    animation-timing-function: linear;
  }

  body:has(.contact-section) {
    animation-range: contain 70% contain 92%;
  }

  body:has(.contact-section) .site-footer {
    animation-range: contain 4% contain 20%;
  }

  .contact-section__panel {
    animation-duration: 1ms;
    animation-fill-mode: both;
    animation-name: contact-panel-reveal;
    animation-range: contain 78% contain 100%;
    animation-timeline: --contact-transition;
    animation-timing-function: linear;
  }
}

@keyframes contact-chrome-darken {
  to {
    --contact-chip-ink: #050505;
    --contact-chip-surface: #ebe6de;
    --contact-chrome-ink: #ebe6de;
    --contact-chrome-progress: 1;
    --contact-chrome-surface: #050505;
  }
}

@keyframes contact-panel-reveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (max-width: 782px) {
  .admin-bar {
    --site-top-offset: 46px;
    --site-center-offset: 23px;
  }
}

/* LH-99: Lighthouse's "font-size" audit measured .hero-copy at 11.2px covering 86% of
   /portfolio/people/'s text, and .hero-copy strong (0.78em of that) at 8.736px — both below its
   12px legibility floor. The cause is the base rule's clamp(0.7rem, 1vw, 1rem): 1vw only clears
   the 0.7rem (11.2px) floor above a 1120px viewport, so every viewport this breakpoint covers was
   pinned to the floor anyway. Bumping the floor to exactly 12px here (rather than editing the
   base clamp()) keeps every viewport above 780px, including the 1512px golden-screenshot width,
   byte-for-byte unaffected — at 1512px, 1vw (15.12px) was already well clear of either floor, so
   this change is invisible there and the goldens stay 8/8. .hero-copy strong gets the same flat
   12px rather than a relative em, so it can't fall back below the floor once its parent's
   clamp() eventually grows past it again inside this breakpoint's own narrower widths. */
@media (max-width: 780px) {
  :is(.portfolio-hero, [data-hero-state='complete']) .hero-copy,
  :is(.portfolio-hero, [data-hero-state='complete']) .hero-copy strong {
    font-size: 0.75rem;
  }
}

@media (max-width: 780px) {
  .contact-section__panel {
    align-content: center;
    grid-template-columns: 1fr;
  }

  .contact-section__header :is(h1, h2) {
    font-size: clamp(5rem, 26vw, 9rem);
  }
}

@media (min-width: 781px) {
  .contact-section__panel {
    align-content: center;
  }
}

html:has(.contact-section--standalone),
body:has(.contact-section--standalone) {
  --contact-chip-ink: #050505;
  --contact-chip-surface: #ebe6de;
  --contact-chrome-ink: #ebe6de;
  --contact-chrome-progress: 1;
  --contact-chrome-surface: #050505;

  background: #050505;
}

html:has(.about-page),
body:has(.about-page) {
  --contact-chrome-ink: #111;
  --contact-chrome-progress: 0;
  --contact-chrome-surface: #ebe6de;

  background: #ebe6de;
  color: #111;
}

body:has(.about-page) {
  container-type: inline-size;
}

body:has(.about-page) .site-loader {
  background: var(--contact-chrome-ink);
}

body:has(.about-page) .site-header::before {
  display: none;
}

body:has(.about-page) :is(.site-header, .site-footer) {
  /* difference(#fcf7ef, #111) = #ebe6de; difference(#fcf7ef, #ebe6de) = #111 */
  color: #fcf7ef;
  mix-blend-mode: difference;
}

body:has(.about-page) .site-footer {
  background: transparent;
}

body:has(.about-page) .site-footer::before {
  display: none;
}

@property --about-copy-progress {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@property --about-cube-blur {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

@property --about-shade-peak {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@property --about-shade-stop {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 100%;
}

@property --about-shade-tail {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@property --about-title-progress {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.about-page {
  --about-cream: #ebe6de;
  --about-gutter: var(--site-gutter);
  --about-header-clearance: calc(var(--site-top-offset) + clamp(7rem, 13svh, 9rem));
  --about-ink: #111;

  background: var(--about-cream);
  color: var(--about-ink);
  line-height: normal;
  min-block-size: 100svh;
}

.about-page :is(h2, h3, p, figure) {
  margin: 0;
}

.about-page picture {
  display: contents;
}

.about-page__image-zone {
  display: contents;
}

.about-page__image-field {
  --loader-angle: 224deg;
  --loader-color-a: #111;
  --loader-color-b: #555451;
  --loader-color-c: #b9b5af;
  --loader-color-d: var(--about-cream);
  --loader-cycle: 2900ms;
  --loader-delay: -700ms;
  --loader-drift-x: 9%;
  --loader-drift-y: 7%;
  --loader-origin-x: -22%;
  --loader-origin-y: 118%;

  background:
    linear-gradient(
      calc(var(--loader-angle) + 90deg) in oklab,
      color-mix(in oklab, var(--loader-color-a) 24%, transparent),
      transparent 46%,
      color-mix(in oklab, var(--loader-color-d) 20%, transparent)
    ),
    radial-gradient(
      circle at var(--loader-origin-x) var(--loader-origin-y) in oklab,
      var(--loader-color-a),
      color-mix(in oklab, var(--loader-color-b) 88%, var(--loader-color-a)) 34%,
      color-mix(in oklab, var(--loader-color-c) 86%, var(--loader-color-b)) 68%,
      var(--loader-color-d)
    );
  background-blend-mode: soft-light, normal;
  background-position:
    20% 20%,
    50% 50%;
  background-repeat: no-repeat;
  background-size:
    220% 220%,
    165% 165%;
  box-shadow:
    inset 0 0 clamp(3rem, 18cqw, 7rem) rgb(17 17 17 / 0.08),
    inset 0 0 0 1px rgb(17 17 17 / 0.12);
  isolation: isolate;
  overflow: clip;
}

.about-page__image-field:has(img[data-baf-image-state='pending']),
.about-page__image-field:has(img[data-baf-image-state='error']) {
  animation: portfolio-loader-field var(--loader-cycle) cubic-bezier(0.45, 0, 0.55, 1)
    var(--loader-delay) infinite;
}

.about-page__image-reveal {
  block-size: 100%;
  clip-path: inset(0);
  display: block;
  transition: clip-path 760ms cubic-bezier(0.65, 0, 0.35, 1);
}

.about-page__image-reveal:has(img[data-baf-image-state='pending']) {
  clip-path: inset(50% 50%);
}

.about-page__image-field img[data-baf-image-state='error'] {
  visibility: hidden;
}

.about-page__opening-transition,
.about-page__opening {
  background: var(--about-ink);
  color: var(--about-cream);
  position: relative;
}

.about-page__opening {
  --about-portrait-padding: clamp(0.45rem, 0.8vw, 0.85rem);
  --about-cube-depth: calc(var(--about-front-height) * 1.5);
  --about-cube-half-front: calc(var(--about-cube-depth) / 2);
  --about-cube-half-side: calc(var(--about-front-width) / 2);
  --about-cube-turn: -90deg;
  --about-front-height: calc(
    (var(--about-front-width) - 2 * var(--about-portrait-padding)) * 2000 / 1325 + 2 *
      var(--about-portrait-padding)
  );
  --about-front-width: min(30rem, 32vw, calc(78svh * 1325 / 2000));
  --about-target-height: var(--about-front-height);
  --about-target-width: calc(var(--about-front-height) * 1.5);
}

.js.has-about-scroll-motion .about-page__opening-transition {
  block-size: 500vh;
  block-size: 500svh;
}

.js.has-about-scroll-motion .about-page__opening {
  block-size: 100vh;
  block-size: 100svh;
  inline-size: 100vw;
  inset-block-start: 0;
  margin-inline: calc(50% - 50vw);
  overflow: clip;
  position: sticky;
}

.about-page__cube-stage {
  align-items: center;
  block-size: 100vh;
  block-size: 100svh;
  display: grid;
  inline-size: 100vw;
  justify-items: center;
  margin-inline: calc(50% - 50vw);
  perspective: 2400px;
  position: relative;
  z-index: 5;
}

.js.has-about-scroll-motion .about-page__cube-stage {
  inset: 0;
  position: absolute;
}

.about-page__cube-fit,
.about-page__cube {
  block-size: 0;
  inline-size: 0;
  transform-style: preserve-3d;
}

.about-page__cube-fit {
  will-change: transform;
}

.about-page__cube {
  position: relative;
  transform: translateZ(calc(-1 * var(--about-cube-half-front)));
  will-change: transform;
}

.js.has-about-scroll-motion .about-page__cube {
  transform: none;
}

.about-page__cube-face {
  backface-visibility: hidden;
  filter: blur(var(--about-cube-blur, 0));
  inset-block-start: 0;
  inset-inline-start: 0;
  overflow: hidden;
  position: absolute;
}

.about-page .about-page__cube-face--front {
  block-size: var(--about-front-height);
  inline-size: var(--about-front-width);
  margin-block-start: calc(var(--about-front-height) / -2);
  margin-inline-start: calc(var(--about-front-width) / -2);
}

.about-page .about-page__cube-face--right {
  block-size: var(--about-front-height);
  inline-size: var(--about-cube-depth);
  margin-block-start: calc(var(--about-front-height) / -2);
  margin-inline-start: calc(var(--about-cube-depth) / -2);
}

.about-page .about-page__cube-face--bottom {
  block-size: var(--about-cube-depth);
  inline-size: var(--about-front-width);
  margin-block-start: calc(var(--about-cube-depth) / -2);
  margin-inline-start: calc(var(--about-front-width) / -2);
}

.about-page__cube-face--front {
  transform: translateZ(var(--about-cube-half-front));
}

.about-page__cube-face--right {
  background: var(--about-cream);
  transform: rotateY(90deg) translateZ(calc(var(--about-front-width) / 2));
}

.about-page__cube-face--front::after,
.about-page__cube-face--right::after,
.about-page__cube-face--bottom::after {
  background: linear-gradient(
    var(--about-shade-direction),
    rgb(0 0 0 / var(--about-shade-peak, 0)) 0%,
    rgb(0 0 0 / var(--about-shade-tail, 0)) var(--about-shade-stop, 100%)
  );
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.about-page__cube-face--front {
  --about-shade-direction: to right;
}

.about-page__cube-face--right {
  --about-shade-direction: to left;
}

.about-page__cube-face--bottom {
  background: #080808;
  transform: rotateX(-90deg) translateZ(calc(var(--about-front-height) / 2));
}

.about-page__opening-portrait {
  background: var(--about-cream);
  color: var(--about-ink);
  padding: var(--about-portrait-padding);
  width: var(--about-front-width);
}

.about-page__opening-portrait img {
  aspect-ratio: 1325 / 2000;
  display: block;
  height: auto;
  inline-size: 100%;
  object-fit: contain;
}

.about-page__statement-reveal {
  background: var(--about-cream);
  color: var(--about-ink);
}

.js.has-about-scroll-motion .about-page__statement-reveal {
  --about-content-travel: 0px;
  --about-copy-progress: 0;
  --about-title-progress: 0;

  clip-path: inset(
    max(0px, calc((100svh - var(--about-target-height)) / 2))
      max(0px, calc((100vw - var(--about-target-width)) / 2))
  );
  inset: 0;
  inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  opacity: 0;
  overflow: hidden;
  position: absolute;
  will-change: clip-path;
  z-index: 6;
}

@media (orientation: portrait) {
  .about-page__opening {
    --about-cube-depth: calc(var(--about-front-width) / 1.5);
    --about-cube-half-front: calc(var(--about-cube-depth) / 2);
    --about-cube-half-side: calc(var(--about-front-height) / 2);
    --about-cube-turn: 90deg;
    --about-target-height: calc(var(--about-front-width) / 1.5);
    --about-target-width: var(--about-front-width);
  }

  .about-page__cube-face--right {
    display: none;
  }

  .about-page__cube-face--bottom {
    --about-shade-direction: to top;

    background: var(--about-cream);
  }

  .about-page__cube-face--front {
    --about-shade-direction: to bottom;
  }
}

@media (orientation: landscape) {
  .about-page__cube-face--bottom {
    display: none;
  }
}

.js.has-about-scroll-motion .about-page__statement-window {
  --about-window-release-progress: clamp(
    0,
    calc((var(--about-copy-progress, 0) - 0.58) * 7.143),
    1
  );

  block-size: 100%;
  clip-path: inset(
    calc(var(--about-header-clearance) * (1 - var(--about-window-release-progress))) 0 0
  );
}

.about-page__statement,
.about-page__reader {
  background: var(--about-cream);
  box-shadow: 0 0 0 100vmax var(--about-cream);
  clip-path: inset(0 -100vmax);
  color: var(--about-ink);
  padding: 0 var(--about-gutter) clamp(7rem, 14vw, 15rem);
  position: relative;
  z-index: 1;
}

.about-page__statement {
  inline-size: min(100%, 1600px);
  margin-inline: auto;
  min-block-size: 100svh;
  will-change: transform;
}

.about-page__statement-heading {
  align-items: center;
  display: grid;
  justify-items: center;
  min-block-size: 100vh;
  min-block-size: 100svh;
}

.about-page__reader {
  display: grid;
  grid-template-areas: 'spread';
  grid-template-columns: minmax(0, 1fr);
  inline-size: min(100%, 1600px);
  margin-inline: auto;
  min-block-size: max(56rem, 100svh);
  padding-block-end: 0;
}

.about-page__statement-heading h2,
.about-page__reader-heading h2 {
  letter-spacing: -0.05em;
  line-height: 0.84;
  position: relative;
  text-align: start;
  text-wrap: balance;
}

.about-page__statement-heading h2 {
  font-size: clamp(4.75rem, 7.1vw, 8.25rem);
  inline-size: min(100%, 8.5ch);
  max-inline-size: 8.5ch;
}

.about-page__statement-heading h2::after,
.about-page__reader-heading h2::after {
  border-block-start: 1px solid;
  content: '';
  display: block;
  inline-size: clamp(2.75rem, 4vw, 4rem);
  margin-block-start: clamp(2rem, 3vw, 3rem);
}

.about-page__statement-heading em {
  font-style: italic;
  font-weight: 400;
}

.about-page__statement-heading .split-text__word:last-child {
  font-style: italic;
}

.js.has-about-scroll-motion .about-page__statement-heading h2::after {
  --about-rule-progress: clamp(0, calc((var(--about-title-progress, 0) - 0.9) * 10), 1);

  transform: scaleX(var(--about-rule-progress));
  transform-origin: left center;
}

.js.has-about-scroll-motion .about-page__statement-heading .split-text__fragment {
  --about-fragment-progress: clamp(
    0,
    calc((var(--about-title-progress, 0) - var(--split-ratio, 0) * 0.66) * 2.9412),
    1
  );

  filter: blur(calc((1 - var(--about-fragment-progress)) * 0.14em));
  opacity: var(--about-fragment-progress);
  transform: translateY(calc((1 - var(--about-fragment-progress)) * 0.28em))
    rotate(calc((1 - var(--about-fragment-progress)) * -2deg));
  transform-origin: 50% 70%;
}

:is(.about-page__statement-body, .about-page__reader-body) {
  border-block-start: 1px solid rgb(17 17 17 / 0.62);
  column-gap: clamp(1rem, 2vw, 2rem);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin-inline: 0;
  padding-block: clamp(1rem, 1.5vw, 1.5rem) clamp(6rem, 10vw, 10rem);
}

.js.has-about-scroll-motion .about-page__statement-body {
  --about-body-progress: clamp(0, calc((var(--about-copy-progress, 0) - 0.62) * 3.85), 1);

  opacity: var(--about-body-progress);
  transform: translateY(calc((1 - var(--about-body-progress)) * 1.25rem));
}

.about-page__reader-body {
  align-self: stretch;
  border-block-start: 0;
  grid-area: spread;
  grid-template-rows: auto 1fr auto auto;
  min-block-size: max(56rem, 100svh);
  padding-block: 0 clamp(7rem, 11vw, 11rem);
  row-gap: clamp(1.5rem, 2.5vw, 2.5rem);
}

:is(.about-page__statement-body, .about-page__reader-body) p {
  font-family: var(--font-body);
  font-size: clamp(0.82rem, 0.92vw, 0.95rem);
  letter-spacing: 0.012em;
  line-height: 1.5;
  text-wrap: pretty;
}

.about-page__statement-body p:first-child {
  grid-column: 1 / span 4;
  max-inline-size: 39ch;
}

.about-page__statement-body p:nth-child(2) {
  border-inline-start: 1px solid rgb(17 17 17 / 0.42);
  grid-column: 7 / span 3;
  max-inline-size: 34ch;
  padding-inline-start: clamp(1rem, 2vw, 2rem);
}

.about-page__reader-body p:first-child {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.75vw, 1.9rem);
  grid-column: 8 / -1;
  grid-row: 1;
  letter-spacing: -0.018em;
  line-height: 1.13;
  margin-block-start: max(var(--about-header-clearance), clamp(10rem, 17vw, 15rem));
  max-inline-size: 30ch;
}

.about-page__reader-body p:not(:first-child) {
  border-block-start: 1px solid rgb(17 17 17 / 0.45);
  max-inline-size: 36ch;
  padding-block-start: 0.75rem;
}

.about-page__reader-body p:nth-child(2) {
  grid-column: 5 / span 4;
  grid-row: 3;
}

.about-page__reader-body p:nth-child(3) {
  grid-column: 9 / -1;
  grid-row: 3;
}

.about-page__reader-body p:nth-child(4) {
  grid-column: 5 / span 4;
  grid-row: 4;
}

.about-page__reader-body p:nth-child(5) {
  grid-column: 9 / -1;
  grid-row: 4;
}

.about-page__reader-heading {
  align-self: start;
  grid-area: spread;
  padding-block-start: max(var(--about-header-clearance), clamp(9rem, 14vw, 12rem));
}

.about-page__reader-heading h2 {
  font-size: clamp(4.75rem, 7.1vw, 8.25rem);
  inline-size: min(100%, 6.6ch);
  margin-inline-start: clamp(1rem, 6vw, 6rem);
  max-inline-size: 6.6ch;
}

.about-split-scroll {
  --about-split-span: calc(142vmax + 4px);

  block-size: 500svh;
  inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  position: relative;
  view-timeline-axis: block;
  view-timeline-name: --about-split;
}

.about-page + .portfolio-section {
  margin-block-start: var(--section-space);
}

.about-split-stage {
  background: var(--about-cream);
  block-size: 100svh;
  contain: paint;
  inset-block-start: 0;
  isolation: isolate;
  overflow: clip;
  position: sticky;
  will-change: transform;
}

.about-split-plane {
  backface-visibility: hidden;
  block-size: var(--about-split-span);
  inline-size: var(--about-split-span);
  inset-block-start: 50%;
  inset-inline-start: 50%;
  margin-block-start: calc(var(--about-split-span) / -2);
  overflow: hidden;
  position: absolute;
  transform-origin: 0 50%;
}

.about-split-photo-mask,
.about-split-divider {
  transform: rotate(0deg);
}

.about-split-pile,
.about-split-copy-half {
  backface-visibility: hidden;
  block-size: 100svh;
  inline-size: 100vw;
  inset-block-start: calc((var(--about-split-span) - 100svh) / 2);
  inset-inline-start: -50vw;
  position: absolute;
  transform-origin: 50% 50%;
}

.about-split-pile {
  isolation: isolate;
}

.about-split-plate {
  backface-visibility: hidden;
  background-image: var(--about-split-image);
  background-position: var(--about-split-position, 50% 50%);
  background-repeat: no-repeat;
  background-size: cover;
  filter: brightness(0.69) contrast(1.1) saturate(0.92);
  inset: 0;
  position: absolute;
}

.about-split-divider {
  background: rgb(17 17 17 / 0.47);
  backface-visibility: hidden;
  block-size: var(--about-split-span);
  inline-size: 1px;
  inset-block-start: 50%;
  inset-inline-start: calc(50% - 0.5px);
  margin-block-start: calc(var(--about-split-span) / -2);
  position: absolute;
  transform-origin: 50% 50%;
}

.about-split-copy {
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.about-split-copy--ink .about-split-plane {
  transform: rotate(180deg);
}

.about-split-copy--ink .about-split-copy-half {
  color: var(--about-ink);
  transform: rotate(-180deg);
}

.about-split-copy--paper .about-split-copy-half {
  color: var(--about-cream);
  text-shadow:
    0 1px 1px rgb(17 17 17 / 0.7),
    0 0 13px rgb(17 17 17 / 0.34);
  transform: rotate(0deg);
}

.about-split-copy-half {
  display: grid;
  padding: clamp(1.25rem, 4vw, 4rem);
  place-items: center;
}

@supports (-webkit-text-stroke: 1px currentColor) {
  .about-split-copy--paper .about-split-headline {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: clamp(1px, 0.12vw, 2px) var(--about-cream);
    color: transparent;
    filter: drop-shadow(0 1px 1px rgb(17 17 17 / 0.55)) drop-shadow(0 0 10px rgb(17 17 17 / 0.35));
    text-shadow: none;
  }
}

.about-split-stack {
  block-size: 100%;
  inline-size: 100%;
  position: relative;
}

.about-split-card {
  display: grid;
  inline-size: min(100%, 76rem);
  inset: 0;
  margin: auto;
  opacity: 0;
  place-content: center;
  position: absolute;
  text-align: center;
  transform-origin: 50% 50%;
}

.about-split-card--out-01 {
  opacity: 1;
}

.about-page .about-split-eyebrow {
  font-size: clamp(0.61rem, 0.62vw, 0.72rem);
  font-weight: 500;
  letter-spacing: 0.19em;
  line-height: 1;
  margin-block-end: clamp(1rem, 2.1vw, 1.7rem);
  text-transform: uppercase;
}

.about-split-headline {
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 8.85vw, 8.8rem);
  font-weight: 400;
  letter-spacing: -0.047em;
  line-height: 0.84;
  margin-inline: auto;
  max-inline-size: 11.25ch;
  text-wrap: balance;
}

.about-split-headline em {
  font-style: italic;
}

.about-page .about-split-standfirst {
  font-size: clamp(0.82rem, 0.93vw, 1rem);
  line-height: 1.48;
  margin: clamp(1.45rem, 2.7vw, 2.55rem) auto 0;
  max-inline-size: 37ch;
}

.availability-tunnel {
  --tunnel-ink: #111111;
  --tunnel-resize-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --tunnel-turn-ease: cubic-bezier(0.34, 1.3, 0.64, 1);
  --rotor-ms: 650ms;
  background: var(--color-background);
  color: var(--tunnel-ink);
  block-size: 100svh;
  inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  isolation: isolate;
  position: relative;
  touch-action: pan-y;

  margin-block-start: 50vh;
  margin-block-end: clamp(3rem, 8vw, 7.5rem);
}

canvas.availability-tunnel__field {
  --edge-fade: clamp(4rem, 14svh, 9rem);
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 var(--edge-fade),
    #000 calc(100% - var(--edge-fade)),
    transparent
  );
  mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 var(--edge-fade),
    #000 calc(100% - var(--edge-fade)),
    transparent
  );
}
canvas.availability-tunnel__field {
  display: block;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.availability-tunnel__copy {
  display: grid;
  place-content: center;
  text-align: center;
}
.availability-tunnel__eyebrow {
  font-size: clamp(0.61rem, 0.62vw, 0.72rem);
  font-weight: 500;
  letter-spacing: 0.19em;
  line-height: 1;
  margin: 0 0 clamp(1rem, 2.1vw, 1.7rem);
  text-transform: uppercase;
}
.availability-tunnel__headline {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.4vw, 8.8rem);
  font-weight: 400;
  letter-spacing: -0.047em;
  line-height: 0.84;
  margin: 0 auto;
  max-inline-size: 11.25ch;
  text-wrap: balance;
}
.availability-tunnel__headline em {
  font-style: italic;
}
.availability-tunnel__standfirst {
  font-size: clamp(0.82rem, 0.93vw, 1rem);
  line-height: 1.48;
  margin: clamp(1.45rem, 2.7vw, 2.55rem) auto 0;
  max-inline-size: 37ch;
}

.availability-tunnel__copy {
  inline-size: max-content;
  inset: 50% auto auto 50%;
  /* Keep the 16px clearance even at the minimum permitted fog depth (1.05). */
  max-inline-size: min(92vw, calc(100% / 1.05 - 32px));
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.availability-tunnel__copy .availability-tunnel__headline {
  max-inline-size: none;
}

.availability-tunnel__rotor {
  block-size: var(--rotor-h, 1em);
  display: grid;
  inline-size: var(--rotor-w, 6em);
  margin: 0.08em auto 0;
  perspective: 1100px;
  place-items: center;
  transition:
    inline-size var(--rotor-ms) var(--tunnel-resize-ease),
    block-size var(--rotor-ms) var(--tunnel-resize-ease);
}
.availability-tunnel__rotor-cube {
  display: block;
  height: 0;
  position: relative;
  transform-style: preserve-3d;
  transition: transform var(--rotor-ms) var(--tunnel-turn-ease);
  width: 0;
  will-change: transform;
}
.availability-tunnel__rotor-face {
  align-items: center;
  backface-visibility: hidden;
  background: var(--tunnel-ink);
  color: var(--color-background);
  display: flex;
  font-style: italic;
  inset-block-start: 0;
  inset-inline-start: 0;
  justify-content: center;
  line-height: 1;
  padding: 0.05em 0.2em 0.09em;
  position: absolute;
  transform-style: preserve-3d;
  white-space: nowrap;
  transition:
    height var(--rotor-ms) var(--tunnel-resize-ease),
    margin-left var(--rotor-ms) var(--tunnel-resize-ease),
    margin-top var(--rotor-ms) var(--tunnel-resize-ease),
    transform var(--rotor-ms) var(--tunnel-resize-ease),
    width var(--rotor-ms) var(--tunnel-resize-ease);
}
.availability-tunnel__rotor-face[data-face='back'] {
  background: rgb(9 9 9);
}
.availability-tunnel__rotor-face[data-face='top'] {
  background: rgb(25 25 25);
}
.availability-tunnel__rotor-face--structural {
  background: rgb(24 24 24);
  pointer-events: none;
}
.availability-tunnel__rotor[data-still],
.availability-tunnel__rotor[data-still]
  :is(
    .availability-tunnel__rotor,
    .availability-tunnel__rotor-cube,
    .availability-tunnel__rotor-face
  ) {
  transition: none;
}

.availability-tunnel__rotor-label {
  display: block;
  opacity: 1;
  transition: opacity 240ms linear;
}
.availability-tunnel__rotor-label[data-off] {
  opacity: 0;
  transition: opacity 200ms linear calc(var(--rotor-ms) * 0.1);
}

.availability-tunnel__tile {
  background: var(--color-background);
  block-size: var(--tile, 72px);
  inline-size: var(--tile, 72px);
  inset: 0 auto auto 0;
  mix-blend-mode: difference;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 180ms linear;
  will-change: transform;
  z-index: 3;
}
.availability-tunnel__tile[data-on] {
  opacity: 1;
}

.availability-tunnel__tile[data-morph] {
  background: var(--tunnel-ink);
  mix-blend-mode: normal;
  transform-origin: 0 0;
  transition: none;
}

.availability-tunnel__footnote {
  color: rgb(17 17 17 / 0.62);
  font-size: clamp(0.68rem, 0.76vw, 0.8rem);
  letter-spacing: 0.02em;
  line-height: 1.45;
  margin: clamp(1.45rem, 2.7vw, 2.55rem) auto 0;
  max-inline-size: 40ch;
}

.availability-tunnel__copy .availability-tunnel__footnote {
  font-size: min(clamp(0.68rem, 0.76vw, 0.8rem), 2.5vw);
  max-inline-size: none;
  white-space: nowrap;
}
.availability-tunnel__hello {
  display: block;
  margin-block-start: 0.9em;
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.22em;
  white-space: nowrap;
}
.availability-tunnel__footnote + .availability-tunnel__standfirst {
  margin-block-start: clamp(0.9rem, 1.6vw, 1.5rem);
}

.availability-tunnel__hello {
  pointer-events: auto;
  color: inherit;
}
.availability-tunnel__hello:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 5px;
}
.availability-tunnel__fallback {
  background: var(--tunnel-ink);
  color: var(--color-background);
  font-style: italic;
  padding: 0.05em 0.2em 0.09em;
}
@media (max-width: 480px) {
  .availability-tunnel__footnote {
    letter-spacing: 0;
  }
}
.availability-tunnel__field[hidden],
.availability-tunnel__tile[hidden] {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .availability-tunnel__rotor,
  .availability-tunnel__rotor * {
    transition: none !important;
  }
}

@supports (animation-timeline: scroll()) {
  .about-split-photo-mask,
  .about-split-divider,
  .about-split-copy--paper .about-split-plane {
    animation: about-split-turn 1ms both;
  }

  .about-split-pile,
  .about-split-copy--paper .about-split-copy-half {
    animation: about-split-turn-back 1ms both;
  }

  .about-split-copy--ink .about-split-plane {
    animation: about-split-turn-ink 1ms both;
  }

  .about-split-copy--ink .about-split-copy-half {
    animation: about-split-turn-ink-back 1ms both;
  }

  .about-split-plate--base {
    animation: about-split-plate-base 1ms both;
  }

  .about-split-plate--out-01 {
    animation: about-split-plate-01 1ms both;
  }

  .about-split-plate--out-02 {
    animation: about-split-plate-02 1ms both;
  }

  .about-split-plate--out-03 {
    animation: about-split-plate-03 1ms both;
  }

  .about-split-plate--out-04 {
    animation: about-split-plate-04 1ms both;
  }

  .about-split-card--base {
    animation: about-split-copy-base 1ms both;
  }

  .about-split-card--out-01 {
    animation: about-split-copy-01 1ms both;
  }

  .about-split-card--out-02 {
    animation: about-split-copy-02 1ms both;
  }

  .about-split-card--out-03 {
    animation: about-split-copy-03 1ms both;
  }

  .about-split-card--out-04 {
    animation: about-split-copy-04 1ms both;
  }

  :is(
    .about-split-photo-mask,
    .about-split-divider,
    .about-split-copy--paper .about-split-plane,
    .about-split-pile,
    .about-split-copy--paper .about-split-copy-half,
    .about-split-copy--ink .about-split-plane,
    .about-split-copy--ink .about-split-copy-half,
    .about-split-plate,
    .about-split-card
  ) {
    animation-fill-mode: both;
    animation-range: contain 0% contain 100%;
    animation-timeline: --about-split;
  }
}

@supports not (animation-timeline: scroll()) {
  html:not(.has-scripted-scroll-motion) .about-split-scroll {
    block-size: 100svh;
  }

  html:not(.has-scripted-scroll-motion) .about-split-plate {
    display: none;
  }

  html:not(.has-scripted-scroll-motion) .about-split-plate--out-01 {
    display: block;
  }
}

@keyframes about-split-turn {
  0%,
  4% {
    transform: rotate(0deg);
  }
  25%,
  29% {
    transform: rotate(90deg);
  }
  50%,
  54% {
    transform: rotate(180deg);
  }
  75%,
  79% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes about-split-turn-back {
  0%,
  4% {
    transform: rotate(0deg);
  }
  25%,
  29% {
    transform: rotate(-90deg);
  }
  50%,
  54% {
    transform: rotate(-180deg);
  }
  75%,
  79% {
    transform: rotate(-270deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

@keyframes about-split-turn-ink {
  0%,
  4% {
    transform: rotate(180deg);
  }
  25%,
  29% {
    transform: rotate(270deg);
  }
  50%,
  54% {
    transform: rotate(360deg);
  }
  75%,
  79% {
    transform: rotate(450deg);
  }
  100% {
    transform: rotate(540deg);
  }
}

@keyframes about-split-turn-ink-back {
  0%,
  4% {
    transform: rotate(-180deg);
  }
  25%,
  29% {
    transform: rotate(-270deg);
  }
  50%,
  54% {
    transform: rotate(-360deg);
  }
  75%,
  79% {
    transform: rotate(-450deg);
  }
  100% {
    transform: rotate(-540deg);
  }
}

@keyframes about-split-plate-base {
  0%,
  100% {
    opacity: 1;
  }
}

@keyframes about-split-plate-01 {
  0%,
  10% {
    opacity: 1;
  }
  21.25%,
  100% {
    opacity: 0;
  }
}

@keyframes about-split-plate-02 {
  0%,
  35% {
    opacity: 1;
  }
  46.25%,
  100% {
    opacity: 0;
  }
}

@keyframes about-split-plate-03 {
  0%,
  60% {
    opacity: 1;
  }
  71.25%,
  100% {
    opacity: 0;
  }
}

@keyframes about-split-plate-04 {
  0%,
  85% {
    opacity: 1;
  }
  96.25%,
  100% {
    opacity: 0;
  }
}

@keyframes about-split-copy-base {
  0%,
  88.75% {
    opacity: 0;
    transform: scale(1);
  }
  94.5%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes about-split-copy-01 {
  0%,
  10% {
    opacity: 1;
    transform: scale(1);
  }
  15.5%,
  100% {
    opacity: 0;
    transform: scale(1.22);
  }
}

@keyframes about-split-copy-02 {
  0%,
  13.75% {
    opacity: 0;
    transform: scale(1);
  }
  19.5%,
  35% {
    opacity: 1;
    transform: scale(1);
  }
  40.5%,
  100% {
    opacity: 0;
    transform: scale(1.22);
  }
}

@keyframes about-split-copy-03 {
  0%,
  38.75% {
    opacity: 0;
    transform: scale(1);
  }
  44.5%,
  60% {
    opacity: 1;
    transform: scale(1);
  }
  65.5%,
  100% {
    opacity: 0;
    transform: scale(1.22);
  }
}

@keyframes about-split-copy-04 {
  0%,
  63.75% {
    opacity: 0;
    transform: scale(1);
  }
  69.5%,
  85% {
    opacity: 1;
    transform: scale(1);
  }
  90.5%,
  100% {
    opacity: 0;
    transform: scale(1.22);
  }
}

/* One shared frame clock seeks the existing visual keyframes without duplicating their values. */
html.has-scripted-scroll-motion body:has(.portfolio-hero)::after {
  animation-duration: 1.6s, 1000ms;
  animation-fill-mode: none, both;
  animation-iteration-count: infinite, 1;
  animation-name: scroll-cue-float, scroll-cue-dismiss;
  animation-play-state: running, paused;
  animation-timeline: auto, auto;
  animation-timing-function: ease-in-out, linear;
}

html.has-scripted-scroll-motion .portfolio-hero .hero-copy {
  animation: hero-copy-stick 1000ms linear both paused;
  animation-timeline: auto;
  position: fixed;
  top: calc(var(--site-top-offset) + 1rem);
  transform: translateX(-50%);
  z-index: 5;
}

html.has-scripted-scroll-motion .portfolio-hero .hero-copy > p {
  animation: hero-copy-shift-right 1000ms linear both paused;
  animation-timeline: auto;
}

html.has-scripted-scroll-motion .portfolio-hero .hero-copy strong {
  animation: hero-name-reveal 1000ms linear both paused;
  animation-timeline: auto;
}

html.has-scripted-scroll-motion .portfolio-hero .hero-copy__name {
  animation: hero-name-ink-reveal 1000ms linear both paused;
  animation-timeline: auto;
}

html.has-scripted-scroll-motion .portfolio-hero .hero-copy strong::before {
  animation-duration: 1000ms, 1000ms;
  animation-fill-mode: both, both;
  animation-name: hero-name-box-reveal, hero-name-box-fill;
  animation-play-state: paused, paused;
  animation-timeline: auto, auto;
  animation-timing-function: linear, linear;
  transform-origin: 100% 50%;
}

html.has-scripted-scroll-motion .portfolio-hero .hero-copy .split-text__fragment {
  animation: hero-fragment-disappear 1000ms linear both paused;
  animation-timeline: auto;
}

html.has-scripted-scroll-motion .gallery-heading .split-text__fragment {
  animation: hero-fragment-disappear 1000ms linear both paused reverse;
  animation-timeline: auto;
}

html.has-scripted-scroll-motion .gallery-heading .eyebrow {
  animation: gallery-eyebrow-presence 1000ms linear both paused;
  animation-timeline: auto;
}

html.has-scripted-scroll-motion body:has(.portfolio-hero) :is(.site-brand, #primary-menu > li),
html.has-scripted-scroll-motion body:has(.portfolio-hero) .site-footer p {
  animation: site-header-reveal 1000ms cubic-bezier(0.16, 1, 0.3, 1) both paused;
  animation-timeline: auto;
}

html.has-scripted-scroll-motion .portfolio-card__figure {
  --parallax-distance: min(12svh, var(--tile-parallax-limit, 4rem), 8rem);

  clip-path: inset(var(--parallax-distance) 0);
  margin: calc(-1 * var(--parallax-distance)) 0;
}

html.has-scripted-scroll-motion .portfolio-card__link:has(.portfolio-card__figure) {
  clip-path: inset(min(12svh, var(--tile-parallax-limit, 4rem), 8rem) 0);
}

html.has-scripted-scroll-motion .portfolio-card__image {
  animation: portfolio-figure-parallax 1000ms linear both paused;
  animation-timeline: auto;
}

html.has-scripted-scroll-motion .portfolio-card.is-square .portfolio-card__image {
  animation-name: portfolio-figure-parallax-square;
}

html.has-scripted-scroll-motion .portfolio-card.is-landscape .portfolio-card__image {
  animation-name: portfolio-figure-parallax-landscape;
}

html.has-scripted-scroll-motion .portfolio-card.is-wide .portfolio-card__image {
  animation-name: portfolio-figure-parallax-wide;
}

html.has-scripted-scroll-motion
  :is(.gallery-heading :is(h1, h2), .portfolio-outline-overlay__text) {
  animation: portfolio-title-outline-fade 1000ms linear both paused;
  animation-timeline: auto;
}

html.has-scripted-scroll-motion body:has(.contact-section),
html.has-scripted-scroll-motion body:has(.contact-section) .site-footer {
  animation: contact-chrome-darken 1000ms linear both paused;
  animation-timeline: auto;
}

html.has-scripted-scroll-motion .contact-section__panel {
  animation: contact-panel-reveal 1000ms linear both paused;
  animation-timeline: auto;
}

html.has-scripted-scroll-motion
  :is(.about-split-photo-mask, .about-split-divider, .about-split-copy--paper .about-split-plane) {
  animation: about-split-turn 1000ms linear both paused;
  animation-timeline: auto;
}

html.has-scripted-scroll-motion
  :is(.about-split-pile, .about-split-copy--paper .about-split-copy-half) {
  animation: about-split-turn-back 1000ms linear both paused;
  animation-timeline: auto;
}

html.has-scripted-scroll-motion .about-split-copy--ink .about-split-plane {
  animation: about-split-turn-ink 1000ms linear both paused;
  animation-timeline: auto;
}

html.has-scripted-scroll-motion .about-split-copy--ink .about-split-copy-half {
  animation: about-split-turn-ink-back 1000ms linear both paused;
  animation-timeline: auto;
}

html.has-scripted-scroll-motion .about-split-plate--base {
  animation: about-split-plate-base 1000ms linear both paused;
}

html.has-scripted-scroll-motion .about-split-plate--out-01 {
  animation: about-split-plate-01 1000ms linear both paused;
}

html.has-scripted-scroll-motion .about-split-plate--out-02 {
  animation: about-split-plate-02 1000ms linear both paused;
}

html.has-scripted-scroll-motion .about-split-plate--out-03 {
  animation: about-split-plate-03 1000ms linear both paused;
}

html.has-scripted-scroll-motion .about-split-plate--out-04 {
  animation: about-split-plate-04 1000ms linear both paused;
}

html.has-scripted-scroll-motion .about-split-card--base {
  animation: about-split-copy-base 1000ms linear both paused;
}

html.has-scripted-scroll-motion .about-split-card--out-01 {
  animation: about-split-copy-01 1000ms linear both paused;
}

html.has-scripted-scroll-motion .about-split-card--out-02 {
  animation: about-split-copy-02 1000ms linear both paused;
}

html.has-scripted-scroll-motion .about-split-card--out-03 {
  animation: about-split-copy-03 1000ms linear both paused;
}

html.has-scripted-scroll-motion .about-split-card--out-04 {
  animation: about-split-copy-04 1000ms linear both paused;
}

@media (max-width: 640px) {
  .about-split-copy-half {
    padding: 1.2rem;
  }

  .about-split-headline {
    font-size: clamp(3.15rem, 15.1vw, 4.6rem);
    line-height: 0.86;
    max-inline-size: 10.8ch;
  }

  .about-split-standfirst {
    font-size: 0.78rem;
    line-height: 1.47;
    max-inline-size: 31ch;
  }
}

@media (min-width: 761px) {
  .about-page__statement,
  .about-page__reader {
    inline-size: min(80%, 1600px);
  }
}

@media (max-width: 760px) {
  .about-page {
    --about-gutter: 1rem;
  }

  .about-page__opening-portrait {
    width: min(69vw, 19rem, calc(74svh * 1325 / 2000));
  }

  .about-page__statement {
    padding-block-end: 6rem;
  }

  .about-page__statement-heading {
    padding-block-start: max(var(--about-header-clearance), 7rem);
  }

  .about-page__statement-heading h2 {
    font-size: clamp(3.5rem, 15vw, 4.5rem);
    line-height: 0.84;
    margin-inline-start: 0;
    max-inline-size: 100%;
  }

  .about-page__statement-body {
    column-gap: 1.25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-block-end: 4.5rem;
  }

  .about-page__statement-body p:first-child,
  .about-page__statement-body p:nth-child(2) {
    font-size: 0.84rem;
    grid-column: auto;
    max-inline-size: none;
  }

  .about-page__statement-body p:nth-child(2) {
    padding-inline-start: 1.25rem;
  }

  .about-page__reader {
    display: block;
    min-block-size: 0;
    padding-block-end: 7rem;
  }

  .about-page__reader-heading {
    padding-block: max(var(--about-header-clearance), 7rem) 9rem;
  }

  .about-page__reader-heading h2 {
    font-size: clamp(3.5rem, 15vw, 4.5rem);
    line-height: 0.84;
    margin-inline-start: 0;
    max-inline-size: 100%;
  }

  .about-page__reader-body {
    border-block-start: 1px solid rgb(17 17 17 / 0.62);
    column-gap: 1.25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    min-block-size: 0;
    padding-block: 1rem 0;
    row-gap: 3rem;
  }

  .about-page__reader-body p:first-child {
    font-family: var(--font-body);
    font-size: 0.95rem;
    grid-column: 1 / -1;
    grid-row: auto;
    letter-spacing: 0.006em;
    line-height: 1.5;
    margin-block-start: 0;
    max-inline-size: 34ch;
  }

  .about-page__reader-body p:not(:first-child) {
    font-size: 0.8rem;
    grid-column: auto;
    grid-row: auto;
    max-inline-size: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .about-page__opening-transition {
    block-size: auto;
  }

  .js .about-page__opening {
    block-size: auto;
    overflow: visible;
    position: relative;
  }

  .js .about-page__cube-stage {
    position: relative;
  }

  .js .about-page__statement-reveal {
    clip-path: none !important;
    opacity: 1 !important;
    position: relative;
  }

  .js .about-page__statement-window {
    block-size: auto;
    clip-path: none;
    overflow: visible;
  }

  .js .about-page__statement-heading .split-text__fragment,
  .js .about-page__statement-body {
    filter: none;
    opacity: 1;
    transform: none;
  }
}

.contact-section--standalone .contact-section__panel {
  margin-block-start: 0;
}

[data-scroll-shortcut-hidden] {
  opacity: 0 !important;
  pointer-events: none !important;
}

.portfolio-story .entry-content {
  max-width: none;
}

.menu {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (prefers-reduced-motion: reduce) {
  html::view-transition-group(site-intro),
  html::view-transition-old(site-intro),
  html::view-transition-new(site-intro),
  html:active-view-transition-type(descend)::view-transition-old(root),
  html:active-view-transition-type(descend)::view-transition-new(root),
  html:active-view-transition-type(ascend)::view-transition-old(root),
  html:active-view-transition-type(ascend)::view-transition-new(root) {
    animation-duration: 1ms !important;
  }

  body:has(.portfolio-hero)::after {
    display: none;
  }

  .contact-transition {
    height: 35svh;
  }

  .contact-transition__sticky {
    height: 35svh;
  }

  .contact-transition__canvas {
    display: none;
  }

  .contact-section__panel {
    margin-block-start: 0;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

@media (max-width: 780px) {
  body.tax-portfolio_category .portfolio-story > .portfolio-media-zone {
    margin-block-start: max(
      var(--section-space),
      calc(
        46svh - var(--section-space) - clamp(0.72rem, 2.16vw, 2.04rem) + clamp(1rem, 2svh, 1.5rem)
      )
    );
  }

  .gallery-heading,
  .portfolio-outline-overlay__text {
    top: 46svh;
  }

  .portfolio-mosaic {
    display: block;
    min-height: 0;
  }

  .portfolio-mosaic__column {
    display: contents;
  }

  .portfolio-card,
  .portfolio-card:nth-child(n) {
    --scatter-y: 0rem;
    --tile-turn: 0deg;

    width: 100%;
  }
}