@font-face {
  font-family: "Cowboy Outlaw";
  src: url("../fonts/Cowboy%20Outlaw.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --color-ink: #010101;
  --color-paper: #f7f1e8;
  --color-clay: #f80406;
}

html {
  background-color: var(--color-ink);
  scroll-behavior: smooth;
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

body {
  background-color: var(--color-paper);
  height: 100vh;
  overflow: hidden;
}

body.dark-mobile-chrome {
  background-color: var(--color-ink) !important;
  color-scheme: dark;
}

body.dark-mobile-chrome::after {
  background: var(--color-ink);
  bottom: 0;
  content: "";
  height: env(safe-area-inset-bottom, 0);
  left: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  z-index: 60;
}

.bg-ink {
  background-color: var(--color-ink) !important;
}

.text-ink {
  color: var(--color-ink) !important;
}

.border-ink {
  border-color: var(--color-ink) !important;
}

.bg-paper,
.bg-\[\#fbf8f2\] {
  background-color: var(--color-paper) !important;
}

.text-paper {
  color: var(--color-paper) !important;
}

.border-paper\/15 {
  border-color: rgb(247 241 232 / 0.15) !important;
}

.border-paper\/20 {
  border-color: rgb(247 241 232 / 0.2) !important;
}

.border-paper\/70 {
  border-color: rgb(247 241 232 / 0.7) !important;
}

.text-paper\/60 {
  color: rgb(247 241 232 / 0.6) !important;
}

.text-paper\/70 {
  color: rgb(247 241 232 / 0.7) !important;
}

.text-paper\/80 {
  color: rgb(247 241 232 / 0.8) !important;
}

.bg-clay,
.hover\:bg-clay:hover {
  background-color: var(--color-clay) !important;
}

.text-clay,
.hover\:text-clay:hover {
  color: var(--color-clay) !important;
}

.border-clay,
.hover\:border-clay:hover,
.focus\:border-clay:focus {
  border-color: var(--color-clay) !important;
}

.from-ink\/80 {
  --tw-gradient-from: rgb(1 1 1 / 0.8) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(1 1 1 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

body .font-serif,
body h1,
body h2 {
  font-family: "Cowboy Outlaw", "Cormorant Garamond", Georgia, serif;
}

.brand-morph {
  color: var(--color-paper);
  font-family: "Cowboy Outlaw", "Cormorant Garamond", Georgia, serif;
  font-size: clamp(3.6rem, 11.7vw, 12rem);
  font-weight: 400;
  left: 1.25rem;
  line-height: 1;
  max-width: calc(100vw - 2.5rem);
  pointer-events: none;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  transform-origin: left top;
  transition:
    color 110ms ease,
    font-size 280ms cubic-bezier(0.33, 1, 0.68, 1),
    left 280ms cubic-bezier(0.33, 1, 0.68, 1),
    line-height 280ms cubic-bezier(0.33, 1, 0.68, 1),
    max-width 280ms cubic-bezier(0.33, 1, 0.68, 1),
    transform 280ms cubic-bezier(0.33, 1, 0.68, 1),
    top 280ms cubic-bezier(0.33, 1, 0.68, 1);
  white-space: nowrap;
  z-index: 45;
}

.brand-morph-nav {
  font-size: 1.875rem;
  left: 1.25rem;
  line-height: 1;
  max-width: 18rem;
  top: 1.58rem;
  transform: translateY(0);
}

.brand-morph-on-light {
  color: var(--color-ink);
}

.brand-morph-mobile-panel-open {
  color: var(--color-paper);
}

.nav-panel-open {
  background-color: var(--color-ink) !important;
  border-color: transparent !important;
  top: 0 !important;
}

.artist-panel {
  -webkit-overflow-scrolling: touch;
  height: calc(100vh - 5rem);
  height: calc(100dvh - 5rem);
  overflow-y: scroll !important;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

@media (min-width: 768px) {
  .artist-panel {
    height: calc(100vh - 4.75rem);
    height: calc(100dvh - 4.75rem);
  }
}

.brand-morph-home {
  color: var(--color-paper);
  left: 50%;
  max-width: calc(100vw - 2.5rem);
  text-align: center;
  top: calc(100% - clamp(2.5rem, 8vh, 5rem) - 8.75rem - (clamp(3.6rem, 11.7vw, 12rem) / 2));
  transform: translate(-50%, -50%);
  transform-origin: center;
}

.hero-title-placeholder {
  font-size: clamp(3.6rem, 11.7vw, 12rem);
}

.home-support {
  bottom: clamp(2.5rem, 8vh, 5rem);
  left: 50%;
  max-width: calc(100vw - 2.5rem);
  position: fixed;
  transform: translateX(-50%);
  width: max-content;
  z-index: 46;
}

.home-intro {
  position: relative;
}

.home-book-now {
  position: relative;
}

.landscape-break {
  display: none;
}

.route-stage {
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.route-slide,
.route-slide > .ng-scope {
  min-height: 100vh;
}

.story-panel {
  min-height: 100vh;
}

.about-panel {
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.about-panel::-webkit-scrollbar {
  width: 10px;
}

.about-panel::-webkit-scrollbar-track {
  background: rgb(1 1 1 / 0.08);
}

.about-panel::-webkit-scrollbar-thumb {
  background: rgb(1 1 1 / 0.45);
}

.about-shell {
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: clamp(2rem, 6vh, 4rem);
  padding-top: clamp(6rem, 11vh, 7rem);
}

@media (min-width: 1024px) {
  .about-shell {
    align-items: center;
  }
}

.booking-panel {
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.booking-panel::-webkit-scrollbar {
  width: 10px;
}

.booking-panel::-webkit-scrollbar-track {
  background: rgb(1 1 1 / 0.08);
}

.booking-panel::-webkit-scrollbar-thumb {
  background: rgb(1 1 1 / 0.45);
}

.booking-shell {
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: clamp(1.25rem, 3vh, 2rem);
  padding-top: clamp(5.75rem, 9vh, 6.75rem);
}

.booking-input {
  min-height: 2.55rem;
  padding-bottom: 0.55rem;
  padding-top: 0.55rem;
}

.booking-textarea {
  min-height: 4.75rem;
  padding-bottom: 0.65rem;
  padding-top: 0.65rem;
}

.booking-textarea-short {
  min-height: 3.65rem;
}

.field-error {
  color: var(--color-clay);
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}

@media (min-width: 1024px) and (min-height: 760px) {
  .booking-shell {
    align-items: center;
  }
}

@media (min-width: 1024px) and (max-height: 760px) {
  .booking-shell {
    padding-top: 4.75rem;
  }

  .booking-copy h2 {
    font-size: clamp(3rem, 6.5vw, 5.25rem);
  }

  .booking-copy p:not(:first-child),
  .booking-form-card > p {
    line-height: 1.45;
  }
}

.home-hero::before,
.home-hero::after {
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.home-hero::before {
  background-image: url("../images/portrait_wp.jpeg");
  background-position: center;
  background-size: cover;
  opacity: 0.78;
  z-index: 0;
}

.home-hero::after {
  background:
    linear-gradient(
      to bottom,
      rgb(1 1 1 / 0.72) 0%,
      rgb(1 1 1 / 0.34) 12%,
      rgb(1 1 1 / 0) 32%
    ),
    linear-gradient(
      to top,
      rgb(1 1 1 / 0.96) 0%,
      rgb(1 1 1 / 0.88) 24%,
      rgb(1 1 1 / 0.42) 54%,
      rgb(1 1 1 / 0.08) 78%,
      rgb(1 1 1 / 0) 100%
    );
  z-index: 1;
}

@media (orientation: landscape), (min-aspect-ratio: 4 / 3) {
  .home-hero::before {
    background-image: url("../images/landscape_wp.jpeg");
  }

  .landscape-break {
    display: block;
  }
}

.route-slide {
  animation: slideIn 300ms cubic-bezier(0.33, 1, 0.68, 1) both;
}

.route-back .route-slide {
  animation-name: slideBackIn;
}

.reveal {
  animation: revealIn 260ms ease both;
}

.image-reveal {
  animation: imageReveal 300ms ease both;
}

.nav-link.is-active::after {
  transform: scaleX(1);
}

.nav-link::after {
  background: currentColor;
  bottom: -7px;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
  width: 100%;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(18%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideBackIn {
  from {
    opacity: 0;
    transform: translateX(-18%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes revealIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes imageReveal {
  from {
    clip-path: inset(5% 4% 5% 4%);
    filter: saturate(0.88);
    transform: scale(1.02);
  }

  to {
    clip-path: inset(0 0 0 0);
    filter: saturate(1);
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .route-slide,
  .route-back .route-slide,
  .reveal,
  .image-reveal {
    animation: none;
  }

  .brand-morph {
    transition: none;
  }
}

@media (min-width: 640px) {
  .brand-morph {
    left: 2rem;
    max-width: calc(100vw - 4rem);
  }

  .brand-morph-nav {
    left: 2rem;
  }

  .brand-morph-home {
    left: 50%;
    max-width: calc(100vw - 4rem);
    top: calc(100% - clamp(2.5rem, 8vh, 5rem) - 8rem - (clamp(3.6rem, 11.7vw, 12rem) / 2));
    transform: translate(-50%, -50%);
  }
}

@media (min-width: 1024px) {
  .brand-morph {
    left: 2.5rem;
  }

  .brand-morph-nav {
    left: 2.5rem;
    top: 1.62rem;
  }

  .brand-morph-home {
    left: 50%;
    top: calc(100% - clamp(2.5rem, 8vh, 5rem) - 8rem - (clamp(3.6rem, 11.7vw, 12rem) / 2));
    transform: translate(-50%, -50%);
  }
}