:root {
  --nav: #3e4b8e;
  --nav-muted: rgba(62, 75, 142, 0.42);
  --ease: cubic-bezier(0.76, 0, 0.24, 1);
  --loader-logo-h: clamp(58px, 7vw, 96px);
  --loader-window-w: clamp(168px, 18vw, 264px);
  --loader-window-h: clamp(124px, 14vw, 196px);
  --loader-gap: clamp(12px, 1.7vw, 22px);
}


* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  scroll-behavior: auto;
}

body {
  margin: 0;
  min-height: 100%;
  background: #17120f;
  color: var(--nav);
  font-family: "Doner", Arial, sans-serif;
  letter-spacing: 0;
}

body.is-loading {
  overflow: hidden;
}

body.is-menu-open {
  overflow: hidden;
}

button {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

figure {
  margin: 0;
}

.svg-filters {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("assets/img/card-grain.png");
  background-size: 320px 320px;
  mix-blend-mode: overlay;
}

.preloader {
  position: fixed;
  inset: 0;
  z-index: 220;
  overflow: hidden;
  background: var(--cream);
  color: #12100e;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: paint;
  will-change: opacity;
  transition: opacity 1150ms ease;
}

.preloader.phase-reveal {
  pointer-events: none;
  opacity: 0;
}

.preloader.phase-final {
  pointer-events: none;
  opacity: 0;
}

.loader-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  transition:
    opacity 420ms var(--out),
    filter 420ms ease;
}

.loader-note {
  position: absolute;
  top: 50%;
  z-index: 4;
  color: rgba(17, 17, 17, 0.62);
  font-size: clamp(12px, 0.9vw, 15px);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(calc(-50% + 8px));
  transition:
    opacity 420ms ease,
    transform 620ms var(--out);
}

.loader-note--left {
  right: calc(100% + clamp(16px, 2vw, 28px));
}

.loader-note--right {
  left: calc(100% + clamp(16px, 2vw, 28px));
}

.preloader.phase-brand .loader-note,
.preloader.phase-open .loader-note,
.preloader.phase-close .loader-note,
.preloader.phase-label .loader-note,
.preloader.phase-hold .loader-note {
  opacity: 1;
  transform: translateY(-50%);
}

.preloader.phase-reveal .loader-note,
.preloader.phase-final .loader-note {
  opacity: 0;
  transform: translateY(calc(-50% - 6px));
}

.preloader.phase-reveal .loader-logo {
  opacity: 0.28;
  filter: blur(2px);
  transform: translate(-50%, -51%) scale(0.995);
}

.preloader.phase-final .loader-logo {
  opacity: 0;
  filter: blur(5px);
  transform: translate(-50%, -52%) scale(0.985);
}

.loader-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  transition: gap 680ms var(--ease);
}

.preloader.phase-open .loader-mark {
  gap: var(--loader-gap);
}

.loader-piece {
  position: relative;
  height: var(--loader-logo-h);
  overflow: visible;
  opacity: 0;
  filter: blur(2px);
  transform: translateY(12px) scale(0.985);
  transition:
    opacity 420ms ease,
    filter 360ms ease,
    transform 520ms var(--out);
}

.loader-crop {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.loader-crop img {
  display: block;
  width: auto;
  max-width: none;
  height: calc(var(--loader-logo-h) * 1.24);
  object-fit: contain;
  object-position: left top;
}

.loader-piece--bi {
  width: calc(var(--loader-logo-h) * 0.71);
}

.loader-piece--bo {
  width: calc(var(--loader-logo-h) * 1.1);
}

.loader-piece--bo .loader-crop img {
  transform: translateX(calc(var(--loader-logo-h) * -0.71));
}

.preloader.phase-brand .loader-piece,
.preloader.phase-open .loader-piece,
.preloader.phase-close .loader-piece,
.preloader.phase-label .loader-piece,
.preloader.phase-hold .loader-piece,
.preloader.phase-reveal .loader-piece,
.preloader.phase-final .loader-piece {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}

.loader-window {
  position: relative;
  width: 0;
  height: 0;
  overflow: hidden;
  background: rgba(243, 234, 223, 0.6);
  box-shadow: 0 28px 72px rgba(67, 44, 30, 0.14);
  opacity: 0;
  clip-path: inset(0 50% 0 50%);
  transition:
    width 520ms var(--ease),
    height 520ms var(--ease),
    opacity 240ms ease,
    clip-path 520ms var(--ease);
}

.preloader.phase-open .loader-window {
  width: var(--loader-window-w);
  height: var(--loader-window-h);
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

.preloader.phase-close .loader-window,
.preloader.phase-label .loader-window,
.preloader.phase-hold .loader-window,
.preloader.phase-reveal .loader-window,
.preloader.phase-final .loader-window {
  width: 0;
  height: 0;
  opacity: 0;
  clip-path: inset(0 50% 0 50%);
}

.loader-window__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0);
  clip-path: inset(0 0 0 0);
  transition: clip-path 180ms var(--ease);
}

.loader-window__img:nth-child(1) {
  z-index: 10;
}

.loader-window__img:nth-child(2) {
  z-index: 9;
}

.loader-window__img:nth-child(3) {
  z-index: 8;
}

.loader-window__img:nth-child(4) {
  z-index: 7;
}

.loader-window__img:nth-child(5) {
  z-index: 6;
}

.loader-window__img:nth-child(6) {
  z-index: 5;
}

.loader-window__img:nth-child(7) {
  z-index: 4;
}

.loader-window__img:nth-child(8) {
  z-index: 3;
}

.loader-window__img:nth-child(9) {
  z-index: 2;
}

.loader-window__img:nth-child(10) {
  z-index: 1;
}

.loader-window__img.is-cleared {
  clip-path: inset(0 0 100% 0);
}

.loader-estudio {
  position: absolute;
  left: 50%;
  top: calc(var(--loader-logo-h) * 1.1);
  width: calc(var(--loader-logo-h) * 0.31);
  height: auto;
  opacity: 0;
  transform: translate(-50%, 8px);
  clip-path: inset(0 0 100% 0);
  transition:
    opacity 360ms ease,
    transform 520ms var(--out),
    clip-path 520ms var(--out);
}

.preloader.phase-label .loader-estudio,
.preloader.phase-hold .loader-estudio,
.preloader.phase-reveal .loader-estudio,
.preloader.phase-final .loader-estudio {
  opacity: 1;
  transform: translate(-50%, 0);
  clip-path: inset(0 0 0 0);
}

/* Doubled class beats bibo-header.css's `.site-head` color, which loads later. */
.site-head.site-head--layer {
  z-index: 220;
  color: var(--layer-nav);
  pointer-events: none;
  transition: none;
}

.site-head.site-head--layer .brand img {
  filter: var(--layer-logo-filter);
  transition: none;
}

body.is-projects-mega-open .site-head.site-head--layer {
  opacity: 0;
  visibility: hidden;
  background: transparent;
}

@media (min-width: 821px) {
  .site-head--base {
    pointer-events: none;
  }

  .site-head--base > :not(.projects-mega) {
    opacity: 0;
  }

  body.is-projects-mega-open .site-head--base > :not(.projects-mega) {
    opacity: 1 !important;
  }

  .site-head--base a,
  .site-head--base button {
    pointer-events: auto;
  }

  .site-head--base .projects-mega,
  .site-head--base .projects-mega a {
    pointer-events: auto;
  }
}

.scene,
.image-rail {
  position: fixed;
  inset: 0;
}

.scene {
  z-index: 1;
  overflow: hidden;
  background: #17120f;
  opacity: 1;
  transition: opacity 1150ms ease;
  will-change: opacity;
}

body.is-loading .scene {
  opacity: 0;
}

.image-rail {
  position: fixed;
  overflow: hidden;
}

.image-rail--left {
  inset: 0;
  z-index: 1;
  width: 100vw;
  height: 100svh;
}

.image-rail--right {
  left: clamp(70px, 7vw, 128px);
  top: clamp(130px, 14vh, 190px);
  z-index: 30;
  width: min(32vw, 520px);
  height: min(62vh, 680px);
  box-shadow: 0 28px 90px rgba(25, 20, 12, 0.16);
}

.project-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  clip-path: inset(100% 0 0 0);
  transform: translate3d(0, 0, 0);
  contain: paint;
  backface-visibility: hidden;
  will-change: clip-path;
}

.image-rail--right .project-slide {
  clip-path: inset(0 0 100% 0);
}

.project-slide img {
  transform: translate3d(0, 0, 0) scale(1.015);
  backface-visibility: hidden;
}

.image-rail--left .project-slide img {
  object-position: 50% 50%;
}

.image-rail--right .project-slide img {
  object-position: 50% 50%;
}

.scene::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.02) 34%, rgba(0, 0, 0, 0.02) 66%, rgba(0, 0, 0, 0.22)),
    linear-gradient(0deg, rgba(0, 0, 0, 0.2), transparent 42%);
}

.card-stack {
  position: fixed;
  right: clamp(34px, 5vw, 78px);
  top: 50%;
  z-index: 50;
  width: clamp(174px, 12.5vw, 222px);
  height: clamp(414px, 54vh, 528px);
  transform: translateY(-48%);
  pointer-events: auto;
}

.project-card {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1px 1fr auto 1px auto auto;
  gap: clamp(18px, 2.1vh, 26px);
  padding: clamp(23px, 1.85vw, 32px);
  overflow: hidden;
  color: #f4eadc;
  text-decoration: none;
  cursor: pointer;
  --card-render: url("assets/renders/card-substance-leather-blank.png");
  background:
    linear-gradient(var(--card-leather-tint, rgba(166, 100, 52, 0.48)), var(--card-leather-tint, rgba(166, 100, 52, 0.48))),
    var(--card-render);
  background-size:
    cover,
    cover;
  background-position:
    center,
    center;
  background-blend-mode:
    var(--card-blend, color),
    normal;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.26),
    inset 1px 1px 0 rgba(255, 244, 225, 0.38),
    inset -1px -1px 0 rgba(46, 24, 12, 0.24),
    inset 0 0 26px rgba(65, 34, 17, 0.16);
  clip-path: inset(100% 0 0 0);
  transform: translate3d(0, 0, 0);
  contain: paint;
  backface-visibility: hidden;
  will-change: clip-path;
}

.project-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.16), transparent 32%, rgba(49, 24, 10, 0.18) 100%);
  opacity: var(--card-sheen-opacity, 0.55);
  mix-blend-mode: soft-light;
}

.project-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.16), transparent 10%, transparent 88%, rgba(39, 18, 8, 0.24)),
    url("assets/img/card-grain.png");
  background-size:
    auto,
    118px 118px;
  mix-blend-mode: overlay;
  opacity: var(--card-grain-opacity, 0.14);
}

.emboss-mark {
  position: absolute;
  left: 50%;
  top: 19%;
  z-index: 1;
  width: 70%;
  height: 24%;
  pointer-events: none;
  opacity: 0.62;
  transform: translateX(-50%);
  mix-blend-mode: normal;
}

.emboss-mark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.9;
  filter: url("#bibo-card-emboss");
}

.project-card--dark .emboss-mark img {
  opacity: 0.82;
  filter: url("#bibo-card-emboss");
}

.card-rule {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 2px;
  background:
    linear-gradient(to bottom, rgba(255, 244, 225, 0.28), rgba(255, 244, 225, 0.02) 45%, rgba(45, 22, 10, 0.34));
  opacity: 0.42;
  box-shadow:
    0 -1px 0 rgba(255, 244, 225, 0.08),
    0 1px 1px rgba(48, 22, 9, 0.28);
  mix-blend-mode: soft-light;
}

.project-card h1,
.project-card p,
.project-card .card-more {
  position: relative;
  z-index: 2;
}

.project-card h1 {
  align-self: end;
  margin: 0;
  max-width: 100%;
  font-size: clamp(17px, 1.2vw, 24px);
  font-weight: 500;
  line-height: 1.02;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.project-card p {
  margin: 0;
  max-width: 100%;
  font-size: clamp(9.5px, 0.62vw, 11px);
  font-weight: 500;
  line-height: 1.28;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  opacity: 0.82;
}

.project-card .meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  opacity: 0.9;
}

.card-more {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  justify-self: center;
  min-width: 122px;
  min-height: 14px;
  color: inherit;
  font-family: "Doner", Arial, sans-serif;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  opacity: 0.86;
  transition: opacity 220ms ease;
}

.card-more__label {
  display: inline-block;
  transition:
    transform 240ms var(--out);
}

.card-more__bracket {
  display: inline-block;
  opacity: 0;
  transform: translateY(2px);
  transition:
    opacity 180ms ease,
    transform 240ms var(--out);
}

.project-card:hover .card-more,
.project-card:focus-visible .card-more {
  opacity: 1;
}

.project-card:hover .card-more__bracket,
.project-card:focus-visible .card-more__bracket {
  opacity: 1;
  transform: translateY(0);
}

.project-card:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -4px;
}

.project-index {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 120;
  display: none;
  gap: 24px;
  color: var(--nav);
  transform: translateX(-50%);
  transition: color 420ms ease;
}

.project-index button {
  position: relative;
  padding-bottom: 9px;
  opacity: 0.38;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  transition: opacity 300ms ease;
}

.project-index button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--ease);
}

.project-index button.is-active {
  opacity: 1;
}

.project-index button.is-active::after {
  transform: scaleX(1);
}

.project-index span {
  margin-left: 8px;
}

.scroll-spacer {
  width: 1px;
  height: 100vh;
}

@media (max-width: 820px) {
  html,
  body {
    overscroll-behavior: none;
  }

  .scene {
    touch-action: none;
  }

  :root {
    --loader-logo-h: 50px;
    --loader-window-w: 138px;
    --loader-window-h: 108px;
    --loader-gap: 10px;
  }

  .loader-note {
    display: none;
  }

  .site-head--layer {
    display: none;
  }

  .image-rail {
    width: 100vw;
  }

  .image-rail--left {
    inset: 0;
    height: 100svh;
  }

  .image-rail--right {
    left: 20px;
    top: 18svh;
    width: min(46vw, 178px);
    height: 34svh;
    box-shadow: 0 18px 58px rgba(20, 15, 10, 0.2);
  }

  .project-slide {
    width: 100%;
    height: 100%;
  }

  .card-stack {
    right: 28px;
    left: 28px;
    top: auto;
    bottom: 34px;
    width: auto;
    height: 154px;
    transform: none;
  }

  .project-card {
    grid-template-rows: 1px 1fr auto;
    grid-template-columns: 1fr auto;
    gap: 10px 16px;
    padding: 16px 18px;
    color: var(--card-mobile-ink, var(--card-ink));
    --card-render: url("assets/renders/card-substance-leather-mobile.png");
    background:
      linear-gradient(var(--card-mobile-tint, rgba(157, 103, 70, 0.26)), var(--card-mobile-tint, rgba(157, 103, 70, 0.26))),
      var(--card-render);
    background-size:
      100% 100%,
      cover;
    background-position:
      center,
      center 48%;
    background-blend-mode:
      var(--card-mobile-blend, soft-light),
      normal;
    box-shadow:
      0 18px 52px rgba(0, 0, 0, 0.18),
      inset 1px 1px 0 rgba(255, 244, 225, 0.18),
      inset -1px -1px 0 rgba(46, 24, 12, 0.12),
      inset 0 0 26px rgba(65, 34, 17, 0.05);
  }

  .project-card::before {
    opacity: 0.28;
  }

  .project-card::after {
    opacity: 0.06;
    background-size:
      auto,
      96px 96px;
  }

  .card-more {
    display: none;
  }

  .emboss-mark {
    display: block;
    left: auto;
    top: 50%;
    right: 20px;
    width: 88px;
    height: 50px;
    transform: translateY(-50%);
    opacity: 0.24;
    mix-blend-mode: normal;
  }

  .emboss-mark img,
  .project-card--dark .emboss-mark img {
    opacity: 0.9;
    filter: url("#bibo-card-emboss");
  }

  .card-rule {
    display: block;
    grid-column: 1 / -1;
    opacity: 0;
  }

  .project-card h1 {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: end;
    max-width: 12ch;
    font-size: clamp(18px, 5.8vw, 23px);
    line-height: 0.98;
  }

  .project-card .meta {
    grid-column: 1 / 2;
    grid-row: 3;
    align-self: start;
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    text-align: left;
  }

  .project-card .type {
    grid-column: 1 / 2;
  }

  .project-card p {
    font-size: 9px;
    line-height: 1.18;
  }

  .project-card > p:last-of-type {
    grid-column: 2 / 3;
    align-self: end;
    text-align: right;
  }

  .project-index {
    display: none;
  }

  .project-cursor {
    display: none;
  }
}

/* Mobile: one photograph, one project card, one automatic swipe transition. */
@media (max-width: 820px) {
  .image-rail--right { display: none; }
  .scene::after { display: none; }
  .card-stack {
    left: 20px;
    right: 20px;
    bottom: max(24px, env(safe-area-inset-bottom));
    height: 164px;
  }
  .project-card {
    padding: 18px 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  }
  .project-card h1 { font-size: clamp(23px, 6.5vw, 29px); max-width: 13ch; }
  .project-card .emboss-mark {
    right: 18px;
    width: 92px;
    height: 64px;
    opacity: 1;
  }
  .project-card .emboss-mark img {
    opacity: 1;
    filter: url("#bibo-card-pressed");
  }
  .project-card h1 { max-width: calc(100% - 94px); }
  .project-card p { font-size: 10px; line-height: 1.3; }
  .project-card::after { opacity: .025; }
  .project-slide img { transform: none; }
}

/* Keep every line inside the mobile card, including narrow 320 px screens. */
@media (max-width: 820px) {
  .project-card { grid-template-rows: minmax(0,1fr) auto auto; }
  .project-card .card-rule { display: none; }
  .project-card h1 { grid-row: 1; }
  .project-card .meta { grid-row: 2; }
  .project-card .type, .project-card > p:last-of-type { grid-row: 3; }
}
@media (max-width: 360px) {
  .project-card h1 { font-size: 20px; }
  .project-card { padding: 16px; gap: 8px 12px; }
  .project-card .emboss-mark { width: 80px; right: 16px; }
  .project-card h1 { max-width: calc(100% - 84px); }
}