/* Interaction layer. Original content, palette and desktop grid are retained. */
html { scroll-behavior: auto; }
:root { --ease: cubic-bezier(.5, 0, .1, 1); }
body { min-width: 0; font-size: .65rem; background: var(--black); }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; border-radius: 3px; }
section[tabindex="-1"]:focus, footer[tabindex="-1"]:focus { outline: none; }
.intro { animation: none; opacity: 1; visibility: visible; pointer-events: auto; }
.intro .intro__frame, .intro .intro__brush { animation-duration: 5s; }
.intro:not(.is-brush-playing) .intro__frame, .intro:not(.is-brush-playing) .intro__brush { animation: none; }
.intro.is-brush-playing { animation: intro-out 5s var(--ease) forwards; }
body.theme-red { background: var(--black) !important; color: var(--pale); }
.s-bg__mark { --mark-width-scale: .7; color: #9b9793; opacity: .6; }
.brush-active .wrapper { pointer-events: none; }
.intro[hidden] { display: none; }
.intro__paper { max-height: 85svh; width: min(47vw, 760px); }
.reactive-mark { position: absolute; inset: 0; width: 100%; height: 100vh; height: 100svh; pointer-events: none; transition: opacity 1s var(--ease); }
.s-bg__mark, body.is-scrolled .s-bg__mark { transform: translateX(-4vw) scaleX(var(--mark-width-scale)); transform-origin: left center; transition: none; }
.has-reactive-mark .s-bg__mark { opacity: 0 !important; }
body.is-not-ready .reactive-mark { opacity: 0; }
body.is-not-ready .s-bg__svg { translate: none; }
.s-bg { overflow: visible; }
.wrapper { transition: opacity .3s ease, filter .3s ease; }
.is-leaving .wrapper { opacity: 0; filter: blur(3px); pointer-events: none; }
[data-scroll="splitText"] > span > span { transition-duration: 1s; transition-delay: var(--word-delay, 0s) !important; }
.m-work__detail span, .m-stats__number div span { transition-delay: var(--item-delay, 0s); }
.m-stats__item .m-stats__label { transition: opacity .7s .15s, transform .7s var(--ease) .15s; }
.m-stats__item.is-below .m-stats__label { opacity: 0; transform: translateY(.625rem); transition: none; }
/* Scope text states to the original animated blocks, independently of panels. */
.motion-enabled [data-text-motion="words"] > span > span {
  transform: translateY(0) scale(1);
  transition: transform 1s var(--ease);
  transition-delay: var(--word-delay, 0s) !important;
}
.motion-enabled [data-text-motion="words"].is-text-out > span > span {
  transform: translateY(110%) scale(.9);
  transition: none;
}
.motion-enabled [data-text-motion="number"] strong:first-of-type span {
  transform: translateY(0);
  transition: transform 1s var(--ease);
}
.motion-enabled [data-text-motion="number"] strong:first-of-type span:nth-child(2) { transition-delay: .1s; }
.motion-enabled [data-text-motion="number"].is-text-out strong:first-of-type span { transform: translateY(100%); transition: none; }
.motion-enabled [data-text-motion="details"] > span {
  opacity: 1; transform: translateY(0);
  transition: opacity .7s, transform .7s var(--ease);
  transition-delay: var(--item-delay, 0s);
}
.motion-enabled [data-text-motion="details"].is-text-out > span { opacity: 0; transform: translateY(.625rem); transition: none; }
.motion-enabled [data-text-motion="stats"] .m-stats__number div span {
  transform: translateY(0);
  transition: transform 1s var(--ease);
  transition-delay: var(--item-delay, 0s);
}
.motion-enabled [data-text-motion="stats"].is-text-out .m-stats__number div span { transform: translateY(100%); transition: none; }
.motion-enabled [data-text-motion="stats"] .icon-plus {
  opacity: 1; transform: scale(1) rotate(0);
  transition: transform .8s var(--ease) .4s, opacity .2s .4s;
}
.motion-enabled [data-text-motion="stats"].is-text-out .icon-plus { opacity: 0; transform: scale(.8) rotate(-90deg); transition: none; }
.motion-enabled [data-text-motion="stats"] .m-stats__label { opacity: 1; transform: translateY(0); transition: opacity .7s .15s, transform .7s var(--ease) .15s; }
.motion-enabled [data-text-motion="stats"].is-text-out .m-stats__label { opacity: 0; transform: translateY(.625rem); transition: none; }
.m-work__tile[data-observe], .project-gallery__tile { transform-origin: 50% 65%; }
.motion-enabled .m-work__tile--image[data-observe] img, .project-gallery__tile img {
  transform: translate3d(var(--photo-x, 0px), calc(var(--photo-scroll, 0px) + var(--photo-y, 0px)), 0) scale(1.045);
  transition: opacity .8s .15s, transform .8s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .motion-enabled .m-work__tile--image[data-observe]:hover img, .project-gallery__tile:hover img, .project-card:focus-visible img {
    transform: translate3d(var(--photo-x, 0px), calc(var(--photo-scroll, 0px) + var(--photo-y, 0px)), 0) scale(1.075);
  }
}
.project-card:focus-visible { outline-offset: -5px; outline-color: var(--paper); }
.project-card:active img { scale: .99; }
[data-cssanimate] { overflow: hidden; }
[data-cssanimate] span, [data-cssanimate]::after { transition-duration: .6s; }
.s-trigger { overflow: visible; transition-delay: 0s; }
.s-trigger__btn { overflow: hidden; }
.s-trigger__btn::after { left: .75rem; height: 100%; display: flex; align-items: center; }
.s-trigger__btn .svg-globe { transition: rotate .8s var(--ease); }
.s-trigger__btn:hover .svg-globe, .s-trigger__btn:focus-visible .svg-globe { rotate: 180deg; }
.at-footer .s-trigger { opacity: 0; transform: scale(0); pointer-events: none; }
.s-trigger:focus-within { opacity: 1 !important; transform: scale(1) !important; pointer-events: auto !important; }
.s-trigger__btn, .m-hero__scroll, .project-back, .link__icon {
  translate: var(--magnet-x, 0px) var(--magnet-y, 0px);
  transition: translate .45s var(--ease), transform .45s var(--ease), opacity .4s;
}
.link__icon svg path { transition: transform .5s var(--ease); }
.link__box { transition: border-radius .5s var(--ease), transform .5s var(--ease); }
.link:hover .link__box, .link:focus-visible .link__box { border-radius: calc(var(--radius) * 1.6); transform: translateY(-3px); }
.s-footer__lead a { overflow-wrap: anywhere; }
.s-footer__lead a::after { transform: scaleX(1); transition: transform .5s var(--ease); transform-origin: right; }
.s-footer__lead a:hover::after, .s-footer__lead a:focus-visible::after { translate: none; scale: 1; transform: scaleX(0); }
.m-hero__scroll { font-size: max(0.4875rem, 9.1px); }

/* Same reading order and original material on touch screens. */
@media (max-width: 1000px) {
  html { font-size: 16px; }
  :root { --grid-margin: 18px; --radius: 16px; }
  .s-header__logo { grid-column: 1 / span 7; }
  .svg-wordmark { width: min(100%, 330px); }
  .s-header__nav { grid-column: 8 / span 5; gap: 1rem; }
  .s-header__socials { grid-column: 13 / span 2; }
  .m-hero, .project-hero, .s-bg__wrap { min-height: 580px; max-height: none; height: 78svh; }
  .m-hero__text, .project-hero__title, .m-work__title, .m-text__lead, .s-footer__lead { font-size: clamp(23.4px, 3.38vw, 36.4px); }
  .s-bg__svg { height: 51vw; grid-column: 8 / span 7; }
  .s-bg__mark { font-size: 66vw; }
  .m-work__number strong:first-of-type { font-size: 18.2vw; }
  .m-work__number strong:last-of-type { font-size: 11.05vw; }
  .m-work__number i { width: 7vw; }
  .m-work__number i::after { height: 22vw; }
  .m-work__number div:first-child, .m-work__detail div:first-child { min-height: 4rem; }
  .description__paragraph, .m-stats__label, .m-text__col { font-size: 13px; line-height: 1.15; }
  .m-stats__number { font-size: 10.4vw; gap: .5rem; }
  .m-text__grid { margin-block: 7rem; }
  .s-footer__main { grid-column: 1 / span 10; }
}
@media (max-width: 640px) {
  :root { --grid-margin: 14px; --radius: 13px; }
  .grid-wrap, .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
  .s-header { margin-top: 16px; row-gap: 14px; }
  .s-header__logo { grid-column: 1 / span 5; }
  .svg-wordmark { width: min(76vw, 320px); margin-top: .6rem; }
  .s-header__nav { grid-column: 1 / span 5; grid-row: 2; justify-content: flex-start; margin-top: 0; gap: 22px; }
  .s-header__nav-item { font-size: 10.4px; padding-block: 5px; }
  .s-header > .s-header__socials { grid-column: 6; grid-row: 1 / span 2; flex-direction: column; align-items: flex-end; gap: 13px; margin-top: 12px; }
  .s-header__social-item { font-size: 9.1px; padding: 4px 0; }
  .m-hero, .project-hero, .s-bg__wrap { height: 84svh; min-height: 580px; max-height: 830px; }
  .m-hero, .project-hero { padding-top: 130px; padding-bottom: 45px; }
  .m-hero__text, .project-hero__title { grid-column: 1 / span 5; font-size: clamp(23.4px, 6.045vw, 35.75px); position: relative; z-index: 1; }
  .m-hero__scroll, .project-hero__scroll { grid-column: 1 / -1; justify-self: start; margin-left: 0; position: absolute; bottom: 8px; padding-block: 8px; }
  .s-bg__wrap { padding-bottom: 235px; }
  .s-bg__svg { grid-column: 3 / span 4; height: 66vw; }
  .s-bg__mark { font-size: 83vw; bottom: -.1em; right: -.07em; }
  .intro__paper { width: min(76vw, 400px); }
  .module { min-height: auto; }
  .module--hero, .module--project-hero { min-height: 94svh; }
  .m-work__header { grid-template-rows: auto auto auto; row-gap: 28px; }
  .m-work__number { grid-column: 1 / -1; grid-row: 1; }
  .m-work__number div:first-child { min-height: 42px; }
  .m-work__number strong:first-of-type { font-size: 30.55vw; }
  .m-work__number strong:last-of-type { font-size: 19.5vw; }
  .m-work__number i { width: 10vw; }
  .m-work__number i::after { height: 36vw; left: 0; }
  .m-work__detail { grid-column: span 3; grid-row: 2; }
  .m-work__detail div:first-child { min-height: 30px; }
  .m-work__title { grid-column: 1 / -1; grid-row: 3; font-size: 26px; padding: 0; text-wrap: initial; max-width: 15ch; }
  .m-work__tile--image, .m-work__tile--description, .m-work__tile--link, .project-gallery__tile--wide, .project-gallery__tile--side { grid-column: 1 / -1; }
  .m-work__tiles { row-gap: 28px; }
  .m-work__tile--image { aspect-ratio: 702 / 438; }
  .m-work__tile--gap-wide { display: none; }
  .description { margin: 0; }
  .description__title { grid-column: span 1; text-align: left; }
  .description__paragraph { grid-column: span 5; font-size: 13.65px; text-wrap: initial; }
  .m-work { padding-bottom: 3rem; }
  .m-work__tile--link { max-width: 240px; margin-left: auto; width: 100%; }
  .link__box { padding: 15px; aspect-ratio: 2 / 1; }
  .m-text__grid { margin-block: 5rem; row-gap: 30px; }
  .m-text__lead { grid-column: 1 / -1; font-size: 24.05px; }
  .m-text__col { grid-column: 2 / -1; }
  .m-stats__grid { margin-top: 4rem; row-gap: 52px; }
  .m-stats__item { grid-column: 1 / -1; }
  .m-stats__number { font-size: 22.75vw; }
  .m-stats__label { max-width: 25ch; font-size: 13.65px; }
  .m-stats { padding-bottom: 6rem; }
  .s-footer { height: 85svh; min-height: 600px; }
  .s-footer__main { grid-column: 1 / -1; }
  .s-footer__lead { font-size: clamp(19.5px, 5.2vw, 27.3px); max-width: 100%; }
  .s-footer__cta { padding-bottom: 150px; }
  .s-footer__bottom { bottom: 30px; }
  .s-footer__colophon { font-size: 9.75px; }
  .s-trigger { margin: 16px; }
  .s-trigger__btn { height: 42px; }
  .project-back { grid-column: 1 / span 3; font-size: 10.4px; padding-block: 10px; }
  .project-kicker { grid-column: 4 / span 3; font-size: 9.1px; text-align: right; }
  .project-gallery__grid { row-gap: 14px; }
  .project-gallery { padding-bottom: 6rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .intro { display: none; }
  [data-observe], .module__wrap, [data-scroll="splitText"] > span > span, .m-work__header, .m-work__detail span, .m-work__number span, .m-stats__number div span { transform: none !important; opacity: 1 !important; }
  .m-work__tile--image img, .project-gallery__tile img { transform: none !important; }
  .s-trigger__btn, .m-hero__scroll, .project-back, .link__icon { translate: none !important; }
  .m-stats__item .m-stats__label, .m-stats__number .icon-plus { transform: none !important; opacity: 1 !important; }
  [data-text-motion] span, [data-text-motion] .m-stats__label { transform: none !important; opacity: 1 !important; }
}