* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  height: 100%;
}

/* ------------------------- Scaling System by Osmo [https://osmo.supply/] -------------------------  */

/* Desktop */
:root {
  --size-unit: 16; /* body font-size in design - no px */
  --size-container-ideal: 1440; /* screen-size in design - no px */
  --size-container-min: 992px;
  --size-container-max: 1920px;
  --size-container: clamp(
    var(--size-container-min),
    100vw,
    var(--size-container-max)
  );
  --size-font: calc(
    var(--size-container) / (var(--size-container-ideal) / var(--size-unit))
  );
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 834; /* screen-size in design - no px */
    --size-container-min: 768px;
    --size-container-max: 991px;
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 550; /* screen-size in design - no px */
    --size-container-min: 480px;
    --size-container-max: 767px;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 390; /* screen-size in design - no px */
    --size-container-min: 320px;
    --size-container-max: 479px;
  }
}

/** LENIS **/
html.lenis {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: visible;
}
.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

body {
  margin: 0;
  min-height: 100%;
  background-color: #000;
  color: var(--swatch--white);
  font-family: var(--gotham);
  font-size: var(--size-font);
  font-weight: 500;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.6s var(--transition--ease);

  &.overflow-hidden {
    overflow: hidden;
  }

  /* Themes come from data-page-theme on <main>, which applyThemeFrom
   * mirrors onto the body at the start of every Barba transition */
  &[data-page-theme="charcoal"] {
    background-color: var(--swatch--black);
  }
}

main {
  display: grid;
  min-height: 100svh;
}

/*** FONT RESET ***/
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  margin: 0;
  font-family: var(--gotham);
}
/*** FONT SIZES ****/

h1,
.h1 {
  font-family: var(--baskerville);
  font-size: var(--fs--h1);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
}

h2,
.h2 {
  font-size: var(--fs--h2);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
h3,
.h3 {
  font-size: var(--fs--h3);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
h4,
.h4 {
  font-size: var(--fs--h4);
  letter-spacing: -0.01em;
}
h5,
.h5 {
  font-size: var(--fs--h5);
  line-height: 1;
}

p {
  margin: 0 0 1em;
  font-size: var(--fs--body);
  line-height: 1.3;
}

.p {
  margin: 0;
  font-size: var(--fs--body);
  line-height: 1.3;
}

.display {
  font-size: var(--fs--display);
  line-height: 1;
}

.p-lrg {
  font-size: var(--fs--body-lrg);
}

.p-sml {
  font-size: var(--fs--body-sml);
  overflow-wrap: anywhere;
}

ul,
ol {
  margin: 1em 0;
  padding-left: 1.2em;
  font-size: var(--fs--body);
  line-height: 1.5;
}

img {
  height: auto;
  width: 100%;
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
}

svg {
  width: 100%;
  height: auto;
}

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

input {
  -webkit-appearance: none;
  border-radius: 0;
}

.img-absolute,
.img-absolute img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.relative {
  position: relative;
}

.t-center {
  text-align: center;
}

/** GRID CLASSES **/
.grid-2,
.grid-3,
.grid-4,
.grid-5 {
  display: grid;
  grid-template-rows: auto;
  width: 100%;
  grid-gap: var(--padd--side);
}
.grid-2 {
  grid-template-columns: 1fr 1fr;

  @media all and (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.grid-3 {
  grid-template-columns: 1fr 1fr 1fr;
  @media all and (max-width: 768px) {
    grid-template-columns: 1fr;
    grid-gap: 3em;
  }
}

.grid-4 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  @media all and (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.grid-5 {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  @media all and (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

/*** LINKS ****/

.underline,
.blog-content a,
.content a {
  position: relative;
  padding-bottom: 0em;
  line-height: 1.4;
  outline: none !important;
}

.underline::before,
.blog-content a::before,
.content a::before {
  content: "";
  position: absolute;
  bottom: 0em;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}

.underline:hover::before,
.blog-content a:hover::before,
.content a:hover::before {
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}
/*** FORMS ****/

.grecaptcha-badge {
  visibility: hidden !important;
}

.form-section {
  position: relative;
  margin: var(--padd--140) -4em;
  padding: 0 var(--padd--side);

  .container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    padding: var(--padd--side);
    border: 10px solid var(--swatch--black);
    border-radius: 2em;
    margin: 0 var(--padd--side);
    grid-gap: 7em;
    align-items: center;
  }
}

.form-wrapper {
  width: 100%;
  .wpforms-field-text,
  .wpforms-field-email,
  .wpforms-field-textarea {
    margin-bottom: 0.75em;

    label {
      display: none;
    }
  }

  input[type="text"],
  input[type="email"],
  textarea {
    border: 1px solid var(--swatch--black);
    font-size: var(--fs--body);
    height: auto;
    padding: 0.7em;
    line-height: 1;
    border-radius: 0.8em;
    width: 100%;
    box-shadow: 0 0.15em 1px 0 rgba(0, 0, 0, 0.1);

    &::placeholder {
      opacity: 1;
      color: var(--swatch--black);
    }
  }

  textarea {
    min-height: 10em;
  }

  .wpforms-submit-container {
    position: relative;

    .wpforms-hidden {
      display: none !important;
      visibility: hidden !important;
    }

    img {
      position: absolute;
      right: 0.5em;
      width: 1.25em;
      object-fit: contain;
    }
  }
}

/***** PROJECT TEMPLATE *****/

.project-hero {
  position: relative;
  height: 100svh;
  overflow: hidden;
}

.project-intro {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: var(--padd--side);
  padding: var(--padd--side) var(--padd--side) var(--padd--170);

  @media all and (max-width: 768px) {
    grid-template-columns: 1fr;
    grid-gap: var(--padd--90);
  }

  /* The h1 and the description share this column */
  .intro {
    grid-column: 1 / span 2;
    max-width: 34em;

    @media all and (max-width: 768px) {
      grid-column: 1;
    }

    /* Matches the awards title rather than the site h1 */
    h1 {
      margin: 0 0 1em;
      font-family: var(--gotham);
      font-size: var(--fs--body);
      line-height: 1.3;
      text-transform: uppercase;
    }
  }

  .content {
    font-weight: 400;
    color: var(--swatch--grey);

    p:last-child {
      margin-bottom: 0;
    }
  }

  .project-awards {
    grid-column: 4;
    font-size: var(--fs--body-sml);

    p {
      font-weight: 400;
    }

    strong,
    .title {
      font-weight: 500;
    }

    @media all and (max-width: 768px) {
      grid-column: 1;
    }

    .title {
      text-transform: uppercase;
    }

    p:last-child {
      margin-bottom: 0;
    }
  }
}

/* Shared by the hero and the next-project block so Flip carries the image
   and its overlay across as one element */
.hero-media {
  position: absolute;
  inset: 0;

  .overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: var(--swatch--black);
  }
}

.project-hero .overlay {
  opacity: 0;
}

.project-next {
  display: block;
  padding: var(--padd--30) 0 0;
  color: inherit;
  text-decoration: none;

  .media {
    position: relative;
    height: 50svh;
    overflow: hidden;
  }

  img {
    filter: blur(12px);
    transition: all 1s ease;

    @media all and (max-width: 768px) {
      filter: blur(0px);
    }
  }

  .overlay {
    background-color: #000;
    opacity: 0.7;
    transition: opacity 1s ease;
    backdrop-filter: blur(31px);
  }

  &:hover {
    img {
      filter: blur(0px);
    }

    .overlay {
      opacity: 0.5;
    }
  }

  .label {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2em;
    text-transform: uppercase;
    white-space: nowrap;
  }
}

/* Hovering anywhere in the block wipes the underline */
.project-next:hover .label::before {
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}

.project-images {
  display: flex;
  flex-direction: column;
  grid-gap: var(--padd--side);
  padding: var(--padd--side);
}

.project-image {
  img {
    display: block;
    width: 100%;
    height: auto;
  }

  &.dual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--padd--side);

    @media all and (max-width: 768px) {
      grid-template-columns: 1fr;
    }
  }
}

/***** HOME SLIDER *****/

.home-slider {
  position: relative;
  /* Own stacking context — the slides set their own z-index and would
     otherwise compete with the fixed nav in the root context */
  z-index: 0;
  height: 100svh;
  overflow: clip;
  user-select: none;
  -webkit-user-select: none;
}

.home-slider__item {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Match the state initLayeredSlider renders at progress 0, so a freshly
     swapped container never paints the stack before the script runs */
  opacity: 0;

  img {
    user-select: none;
    -webkit-user-select: none;
  }
}

.home-slider__item:first-child {
  opacity: 1;
}

/* Only the centred slide is clickable */
.home-slider__item[data-active] {
  pointer-events: auto;
}

/***** NAVIGATION *****/

.nav {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}

.nav__bar {
  position: absolute;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--padd--side);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
}

/* Hidden until the first-load timeline brings it in, and only where the
   loader exists — every other page renders the bar normally */
body:has([data-loader]) .nav__bar {
  opacity: 0;
  visibility: hidden;
}

.nav__logo {
  pointer-events: auto;
  color: var(--swatch--white);
  font-size: var(--fs--body);
  text-transform: uppercase;
  text-decoration: none;

  .mark {
    font-size: 70%;
    vertical-align: top;
    padding-left: 0.3em;
  }
}

/* Toggle — two bars that swap places on hover and cross when open */

.nav__toggle {
  pointer-events: auto;
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2em;
  height: 2.5em;
  padding: 0;
  border: none;
  font: inherit;
  color: var(--swatch--white);
  background-color: transparent;
}

.nav__toggle-bar {
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0, 1);
  transform: translateY(-0.25em) scaleX(1) rotate(0.001deg);
}

.nav__toggle-bar:nth-child(2) {
  transform: translateY(0.15em) scaleX(1) rotate(0.001deg);
}

/* Closed — hovering shortens both bars */
[data-navigation-status="not-active"] .nav__toggle:hover .nav__toggle-bar {
  transform: translateY(-0.25em) scaleX(0.8) rotate(0.001deg);
}

[data-navigation-status="not-active"]
  .nav__toggle:hover
  .nav__toggle-bar:nth-child(2) {
  transform: translateY(0.15em) scaleX(0.8) rotate(0.001deg);
}

/* Open — full width so the cross stays even, hover included */
[data-navigation-status="active"] .nav__toggle-bar {
  transform: translateY(0em) scaleX(1) rotate(45deg);
}

[data-navigation-status="active"] .nav__toggle-bar:nth-child(2) {
  transform: translateY(0em) scaleX(1) rotate(-45deg);
}

/* Tile — wipes down from the top */

.nav__tile {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 100%;

  /* The blur is fixed — fading the whole layer is what reads as a blur in,
     and it composites on the GPU instead of re-filtering every frame */
  background-color: rgb(0 0 0 / 0%);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(0px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  /* Closing waits for the links to drop away first */
  transition: all 1s cubic-bezier(0.4946, 0.0547, 0, 1);
  padding: 2em var(--padd--side);
}

[data-navigation-status="active"] .nav__tile {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  /* Opening starts straight away */
  transition: all 1s cubic-bezier(0.4946, 0.0547, 0, 1);
  background-color: rgb(0 0 0 / 100%);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
}

.nav__contact {
  position: absolute;
  left: var(--padd--side);
  bottom: var(--padd--side);
  display: flex;
  flex-direction: column;
  font-size: var(--fs--body);
  grid-gap: 0.3em;
  font-weight: 400;

  /* Mask each line so it can rise in with the menu */
  .line {
    display: block;
    overflow: hidden;
    padding-bottom: 0.1em;
    margin-bottom: -0.1em;
  }

  /* Hidden until showContact runs — no transform here, GSAP owns that.
     GSAP animates this wrapper rather than the links themselves, so the
     inline opacity it leaves behind can't block the hover below */
  [data-nav-contact-line] {
    display: block;
    visibility: hidden;
  }

  .socials {
    display: flex;
    grid-gap: 1.5em;
    margin-top: 1em;
  }

  a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.3s ease;

    &:hover {
      opacity: 0.6;
    }
  }
}

/* Click to copy — three stacked states rolling behind a mask */

.copy-email {
  /* Safari gives buttons their own intrinsic box and centring, and an
     inline-block button also picks up the line box's descender space —
     both add height that only shows on a real iOS device */
  -webkit-appearance: none;
  appearance: none;
  display: block;
  height: 1.2em;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  font: inherit;
  line-height: inherit;
  color: inherit;
  background: none;
  text-align: left;
  cursor: pointer;
}

.copy-email__wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 1.2em;
  line-height: 1.2;
  overflow: hidden;
}

.copy-email__el {
  white-space: nowrap;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0, 1);
}

@media (hover: hover) {
  .copy-email:hover .copy-email__el {
    transform: translate(0, -100%);
  }
}

.copy-email:focus-visible .copy-email__el {
  transform: translate(0, -100%);
}

[data-copy-button="copied"] .copy-email__el {
  transform: translate(0, -200%) !important;
}

.nav__ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  font-size: var(--fs--body);

  li {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    overflow: hidden;
    transition: opacity 0.5s ease;
  }

  /* Dim the rest while one item is hovered */
  &:has(li:hover) li {
    opacity: 0.15;
  }

  &:has(li:hover) li:hover {
    opacity: 1;
  }
}

.nav__link {
  display: block;
  padding: 0;
  color: var(--swatch--white);
  font-size: calc(4vw + 4vh);
  line-height: 1.1;
  letter-spacing: -0.04em;
  text-decoration: none;
  opacity: 0;
  transform: translateY(100%) rotate(5deg);

  /* Closing — all links fade out together, then the position resets
     once they are already out of sight */
  transition:
    opacity 0.5s ease,
    transform 0s linear 0.5s;
}

/* Opening — each link rises in turn */
[data-navigation-status="active"] .nav__link {
  opacity: 1;
  transform: translateY(0%) rotate(0.001deg);
  transition:
    opacity 0.75s cubic-bezier(0.7, 0, 0.3, 1),
    transform 0.75s cubic-bezier(0.7, 0, 0.3, 1);
}

[data-navigation-status="active"] .nav__ul li:nth-child(1) .nav__link {
  transition-delay: 0.3s;
}
[data-navigation-status="active"] .nav__ul li:nth-child(2) .nav__link {
  transition-delay: 0.35s;
}
[data-navigation-status="active"] .nav__ul li:nth-child(3) .nav__link {
  transition-delay: 0.4s;
}
[data-navigation-status="active"] .nav__ul li:nth-child(4) .nav__link {
  transition-delay: 0.45s;
}
[data-navigation-status="active"] .nav__ul li:nth-child(5) .nav__link {
  transition-delay: 0.5s;
}
[data-navigation-status="active"] .nav__ul li:nth-child(6) .nav__link {
  transition-delay: 0.55s;
}
[data-navigation-status="active"] .nav__ul li:nth-child(7) .nav__link {
  transition-delay: 0.6s;
}
[data-navigation-status="active"] .nav__ul li:nth-child(8) .nav__link {
  transition-delay: 0.65s;
}

/* Navigating away from an open menu — every link clears together, with the
   per-item delays overridden so nothing trails behind */
[data-navigation-status="active"][data-navigation-leaving]
  .nav__ul
  li
  .nav__link {
  opacity: 0;
  transition: opacity 0.4s ease;
}

/***** STUDIO TEMPLATE *****/

.studio-intro {
  padding: var(--padd--220) var(--padd--side) var(--padd--140);

  .content {
    max-width: 37em;
    font-size: var(--fs--body-lrg);
    color: var(--swatch--grey);

    p {
      font-size: var(--fs--body-lrg);
      font-weight: 400;
    }

    p:last-child {
      margin-bottom: 0;
    }
  }
}

/***** AWARDS TEMPLATE *****/

.awards-template {
  padding: var(--padd--220) var(--padd--side) var(--padd--140);
}

.awards-grid {
  margin-top: var(--padd--90);
  /* Wider gap between rows than between columns */
  row-gap: var(--padd--90);

  .item {
    align-self: start;
    font-size: var(--fs--body);
    line-height: 1.4;
  }

  .inner {
    display: flex;
    flex-direction: column;
  }

  .award {
    text-transform: uppercase;
  }

  .project,
  .extra-line,
  .year {
    font-weight: 400;
  }

  .year {
    color: var(--swatch--grey);
  }
}

/***** WORK TEMPLATE *****/

.work-template {
  padding: var(--padd--220) var(--padd--side) var(--padd--140);
}

.work-grid {
  /* Wider gap between rows than between columns */
  row-gap: var(--padd--90);

  .item {
    display: flex;
    flex-direction: column;
    grid-gap: 1em;
    color: inherit;
    text-decoration: none;

    &:hover {
      img {
        transform: scale(1);
      }
    }
  }

  img {
    display: block;
    width: 100%;
    height: auto;
    transition: ease transform 0.5s;
    transform: scale(1.02);
  }

  /* Hidden until initWorkReveal runs */
  [data-work-media] {
    visibility: hidden;
    overflow: hidden;
  }

  .details {
    display: flex;
    flex-direction: column;
    grid-gap: 0.1em;
    font-size: var(--fs--body-sml);
    line-height: 1.4;
  }

  .title {
    text-transform: uppercase;
  }

  .description {
    font-weight: 400;
    color: var(--swatch--grey);
  }
}

/***** FOOTER *****/

.footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: flex-end;
  padding: var(--padd--side);
  font-size: var(--fs--body-micro);
  text-transform: uppercase;
}

.footer__logo {
  width: 13em;

  svg {
    display: block;
    width: 100%;
    height: auto;
    color: var(--swatch--white);
  }
}

.footer__menu {
  display: flex;
  justify-content: flex-end;
  grid-gap: 2em;
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;

  li {
    list-style: none;
    text-box: trim-both cap alphabetic;
  }

  a {
    transition: opacity 0.3s ease;

    &:hover {
      opacity: 0.6;
    }
  }
}

@media all and (max-width: 768px) {
  .footer {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    grid-gap: 2em;
  }

  .footer__copyright {
    display: none;
  }

  .footer__menu {
    justify-content: space-between;
    width: 100%;
  }

  .footer__logo {
    width: 100vw;
    display: flex;
    padding: 20px;
    margin: -20px;
    grid-row-start: 3;
  }

  .project-next .label {
    font-size: 1.5em;
  }
}

/***** TEXT REVEAL *****/

/* Hidden until the split is built, then revealed by gsap.set */
[data-split="heading"] {
  visibility: hidden;
}

/***** FIRST LOAD *****/

.loader {
  position: fixed;
  inset: 0;
  /* Below the nav at 100, so the header can drop in over it */
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background-color: #000;
  padding-bottom: var(--padd--side);
}

.loader__inner {
  /* cqw sizes against this box, so the type fills the padded container */
  container-type: inline-size;
  width: 100%;
  padding: 0 var(--padd--side);
}

.loader__logo {
  width: 100%;

  /* Hidden until the once timeline fades it in, or it paints first */
  opacity: 0;
  visibility: hidden;

  svg {
    display: block;
    width: 100%;
    height: auto;
  }
}