/* =========================================================
   FATE BRAND
   HOME V3
   ========================================================= */

:root {
  --black: #070707;
  --white: #f4f3ef;
  --gray: #777;
  --line: rgba(7, 7, 7, 0.18);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.22, 1, .36, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--white);
  color: var(--black);
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}

body.loading {
  overflow: hidden;
}

body.menu-open {
  overflow: hidden;
}

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

button {
  font: inherit;
}


/* =========================================================
   FATE INTRO
   ========================================================= */

.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
  color: #fff;
  transition: opacity 1.1s var(--ease), visibility 1.1s var(--ease);
}

.loading-screen.exit {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.enter-screen {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  transition: opacity .45s var(--ease), visibility .45s var(--ease);
}

.enter-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.enter-button {
  padding: 14px 18px;
  border: 1px solid rgba(255,255,255,.6);
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  transition: color .25s ease, background .25s ease, transform .25s var(--ease);
}

.enter-button:hover,
.enter-button:focus-visible {
  background: #fff;
  color: #000;
  outline: none;
  transform: translateY(-3px);
}

.neon-brand {
  font-size: clamp(3.25rem, 10vw, 10rem);
  font-weight: 800;
  letter-spacing: -.07em;
  line-height: .8;
  opacity: 0;
  white-space: nowrap;
  text-shadow: 0 0 3px rgba(255,255,255,.9), 0 0 12px rgba(255,255,255,.55), 0 0 30px rgba(255,255,255,.25);
  transition: opacity .2s ease, text-shadow .2s ease;
}

.neon-brand.powered { opacity: 1; }

.neon-center {
  position: absolute;
  top: calc(50% + clamp(4.5rem, 9vw, 8rem));
  left: 50%;
  transform: translateX(-50%);
}

.neon-slogan {
  font-size: clamp(.7rem, 1.4vw, 1.05rem);
  font-weight: 700;
  letter-spacing: .23em;
  opacity: 0;
  white-space: nowrap;
  text-shadow: 0 0 4px rgba(255,255,255,.8), 0 0 14px rgba(255,255,255,.3);
  transition: opacity .45s ease, text-shadow .2s ease;
}

.neon-slogan.powered { opacity: 1; }
.neon-brand.flicker, .neon-slogan.flicker { opacity: .12; text-shadow: 0 0 2px rgba(255,255,255,.3); }
.neon-brand.flicker-hard, .neon-slogan.flicker-hard { opacity: 0; text-shadow: none; }


/* =========================================================
   MAIN SITE
   ========================================================= */

.site {
  opacity: 0;
  transform: scale(1.025);

  transition:
    opacity 1.4s var(--ease),
    transform 1.7s var(--ease);

  visibility: hidden;
}

.site.visible {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;

  z-index: 50;

  display: grid;
  grid-template-columns: 1fr auto 1fr;

  align-items: center;

  padding: 30px 42px;

  font-size: 10px;

  letter-spacing: .15em;
}

.brand-logo {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;

  transition: transform .5s var(--ease);
}

.brand-logo:hover {
  transform: translateX(5px);
}

.header-location {
  color: #777;
}

.desktop-nav {
  display: flex;
  justify-content: flex-end;
  gap: 28px;
}

.desktop-nav a,
.header-cart {
  position: relative;
}

.desktop-nav a::after,
.header-cart::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -5px;

  width: 100%;
  height: 1px;

  background: var(--black);

  transform: scaleX(0);
  transform-origin: right;

  transition: transform .5s var(--ease);
}

.desktop-nav a:hover::after,
.header-cart:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-cart {
  display: none;
}

.menu-button {
  display: none;

  border: 0;
  background: none;

  cursor: pointer;

  letter-spacing: .15em;
}


/* =========================================================
   MOBILE MENU
   ========================================================= */

.mobile-menu {
  position: fixed;
  inset: 0;

  z-index: 100;

  background: var(--black);
  color: var(--white);

  clip-path: inset(0 0 100% 0);

  transition: clip-path .9s var(--ease);

  pointer-events: none;
}

.mobile-menu.open {
  clip-path: inset(0);
  pointer-events: auto;
}

.mobile-menu-inner {
  height: 100%;

  display: flex;
  flex-direction: column;

  padding: 100px 30px 30px;
}

.mobile-menu-label {
  font-size: 9px;
  letter-spacing: .2em;
  color: #777;
}

.mobile-menu nav {
  display: flex;
  flex-direction: column;

  margin-top: 70px;
}

.mobile-menu nav a {
  font-size: clamp(40px, 12vw, 80px);
  font-weight: 700;

  letter-spacing: -.06em;

  transform: translateX(-30px);
  opacity: 0;

  transition:
    transform .8s var(--ease),
    opacity .8s var(--ease);
}

.mobile-menu.open nav a {
  transform: translateX(0);
  opacity: 1;
}

.mobile-menu.open nav a:nth-child(2) {
  transition-delay: .06s;
}

.mobile-menu.open nav a:nth-child(3) {
  transition-delay: .12s;
}

.mobile-menu.open nav a:nth-child(4) {
  transition-delay: .18s;
}

.mobile-menu-footer {
  margin-top: auto;

  font-size: 9px;
  letter-spacing: .2em;

  color: #777;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
  position: relative;

  min-height: 100svh;

  padding: 130px 42px 40px;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border-bottom: 1px solid var(--line);
}

.hero-background-word {
  position: absolute;

  left: -3vw;
  bottom: -7vw;

  font-size: 35vw;

  line-height: .7;

  font-weight: 800;

  letter-spacing: -.09em;

  color: rgba(0,0,0,.035);

  user-select: none;

  pointer-events: none;

  transition: transform 1.8s var(--ease);
}

.hero:hover .hero-background-word {
  transform: translateX(2vw);
}

.hero-top {
  position: relative;
  z-index: 2;

  display: flex;
  justify-content: space-between;

  font-size: 9px;

  letter-spacing: .2em;

  color: #777;
}

.hero-main {
  position: relative;
  z-index: 2;

  margin: auto 0;

  width: 100%;
}

.hero-kicker {
  margin-bottom: 10px;

  font-size: 10px;

  letter-spacing: .25em;

  color: #777;
}

.hero-title {
  display: flex;

  font-size: clamp(120px, 25vw, 360px);

  line-height: .72;

  font-weight: 800;

  letter-spacing: -.1em;
}

.hero-title span {
  display: block;

  transform: translateY(100%);
  opacity: 0;

  animation: heroLetter 1.4s var(--ease) forwards;
}

.hero-title span:nth-child(1) {
  animation-delay: .15s;
}

.hero-title span:nth-child(2) {
  animation-delay: .22s;
}

.hero-title span:nth-child(3) {
  animation-delay: .29s;
}

.hero-title span:nth-child(4) {
  animation-delay: .36s;
}

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

.hero-slogan {
  margin-top: 30px;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: .22em;
}

.hero-bottom {
  position: relative;
  z-index: 2;

  display: flex;
  justify-content: space-between;
  align-items: center;

  font-size: 9px;

  letter-spacing: .18em;

  color: #777;
}

.editorial-link {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: var(--black);

  font-size: 10px;

  letter-spacing: .15em;

  font-weight: 700;
}

.editorial-link span {
  transition: transform .5s var(--ease);
}

.editorial-link:hover span {
  transform: translate(5px, -5px);
}

.hero-scroll {
  position: absolute;

  right: 42px;
  top: 50%;

  display: flex;

  align-items: center;

  gap: 10px;

  transform: rotate(90deg) translateX(50%);

  transform-origin: right center;

  font-size: 8px;

  letter-spacing: .25em;

  color: #777;
}

.hero-scroll div {
  width: 50px;
  height: 1px;

  background: #777;

  position: relative;
  overflow: hidden;
}

.hero-scroll div::after {
  content: "";

  position: absolute;

  inset: 0;

  background: var(--black);

  animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
  0% {
    transform: translateX(-100%);
  }

  50% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(100%);
  }
}


/* =========================================================
   INTRO
   ========================================================= */

.intro {
  min-height: 85vh;

  display: grid;

  grid-template-columns: 20% 80%;

  padding: 130px 42px;

  border-bottom: 1px solid var(--line);
}

.section-number {
  font-size: 9px;

  letter-spacing: .2em;

  color: #777;
}

.section-label {
  font-size: 9px;

  letter-spacing: .2em;

  color: #777;
}

.intro-content {
  max-width: 900px;
}

.intro-label {
  margin-bottom: 60px;

  font-size: 10px;

  letter-spacing: .2em;

  color: #777;
}

.intro h2 {
  font-size: clamp(55px, 9vw, 140px);

  line-height: .86;

  letter-spacing: -.075em;
}

.intro h2 span {
  color: transparent;

  -webkit-text-stroke: 1px var(--black);

  transition: color .6s var(--ease);
}

.intro:hover h2 span {
  color: var(--black);
}

.intro-copy {
  max-width: 410px;

  margin-top: 80px;
  margin-left: auto;

  font-size: 14px;

  line-height: 1.7;

  color: #555;
}


/* =========================================================
   COLLECTIONS
   ========================================================= */

.collections {
  padding: 100px 42px 140px;
}

.section-heading {
  display: flex;

  justify-content: space-between;
  align-items: center;

  margin-bottom: 60px;
}

.section-heading > div {
  display: flex;
  gap: 30px;
}

.featured-grid {
  display: grid;

  grid-template-columns: 1.5fr 1fr;

  gap: 25px;
}

.product-image {
  position: relative;

  overflow: hidden;

  background: #deddd8;

  aspect-ratio: 4 / 5;
}

.product-image-large {
  aspect-ratio: 1 / 1.05;
}

.product-image::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      135deg,
      transparent 40%,
      rgba(0,0,0,.07) 100%
    );

  pointer-events: none;
}

.image-placeholder {
  position: absolute;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  font-size: clamp(45px, 8vw, 120px);

  font-weight: 800;

  letter-spacing: -.08em;

  color: rgba(0,0,0,.12);
}

.image-index {
  position: absolute;

  top: 20px;
  right: 20px;

  font-size: 9px;

  letter-spacing: .15em;
}

.product-info {
  display: flex;

  justify-content: space-between;

  padding-top: 16px;

  font-size: 11px;

  letter-spacing: .08em;
}

.product-info small {
  display: block;

  margin-top: 5px;

  font-size: 8px;

  color: #777;

  letter-spacing: .15em;
}

.product-info strong {
  font-size: 11px;
}

.product-stack {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 25px;

  align-items: end;
}

.mini-product:nth-child(1) {
  transform: translateY(60px);
}

.mini-product:nth-child(2) {
  transform: translateY(-20px);
}

.reveal-image {
  overflow: hidden;

  opacity: 0;

  transform: translateY(60px);

  transition:
    opacity 1.2s var(--ease),
    transform 1.2s var(--ease);
}

.reveal-image.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-image .product-image {
  transition: transform 1.2s var(--ease);
}

.reveal-image:hover .product-image {
  transform: scale(1.035);
}


/* =========================================================
   ROCKSTAR
   ========================================================= */

.rockstar {
  position: relative;

  min-height: 100vh;

  background: var(--black);

  color: var(--white);

  display: flex;
  align-items: center;

  padding: 120px 42px;

  overflow: hidden;
}

.rockstar-background {
  position: absolute;

  right: -7vw;
  bottom: -5vw;

  font-size: 29vw;

  font-weight: 800;

  line-height: .7;

  letter-spacing: -.1em;

  color: rgba(255,255,255,.035);

  transition: transform 1.5s var(--ease);
}

.rockstar:hover .rockstar-background {
  transform: translateX(-3vw);
}

.rockstar-content {
  position: relative;
  z-index: 2;

  width: 100%;

  display: grid;

  grid-template-columns: 20% 80%;
}

.rockstar h2 {
  margin-top: 20px;

  font-size: clamp(80px, 14vw, 210px);

  line-height: .76;

  letter-spacing: -.09em;
}

.rockstar p {
  max-width: 300px;

  margin-top: 50px;

  font-size: 13px;

  line-height: 1.7;

  color: #aaa;
}

.editorial-button {
  display: inline-flex;

  margin-top: 50px;

  padding-bottom: 8px;

  border-bottom: 1px solid #777;

  gap: 15px;

  font-size: 10px;

  letter-spacing: .16em;
}

.editorial-button span {
  transition: transform .5s var(--ease);
}

.editorial-button:hover span {
  transform: translate(5px, -5px);
}


/* =========================================================
   FATE LIVE
   ========================================================= */

.fate-live {
  min-height: 90vh;

  padding: 100px 42px;

  display: flex;
  flex-direction: column;

  border-bottom: 1px solid var(--line);
}

.live-top {
  display: flex;

  justify-content: space-between;
}

.live-status {
  display: flex;

  align-items: center;

  gap: 9px;

  font-size: 9px;

  letter-spacing: .2em;
}

.live-status span {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #111;

  animation: livePulse 1.6s infinite;
}

@keyframes livePulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.7);
    opacity: .3;
  }
}

.live-main {
  margin: auto 0;
}

.live-main h2 {
  font-size: clamp(80px, 15vw, 230px);

  line-height: .76;

  letter-spacing: -.09em;
}

.live-main h2 span {
  color: transparent;

  -webkit-text-stroke: 1px var(--black);
}

.live-main p {
  max-width: 300px;

  margin-top: 50px;

  font-size: 13px;

  line-height: 1.7;

  color: #666;
}

.live-link {
  align-self: flex-end;

  font-size: 10px;

  letter-spacing: .16em;

  border-bottom: 1px solid var(--black);

  padding-bottom: 7px;
}


/* =========================================================
   ABOUT
   ========================================================= */

.about {
  min-height: 80vh;

  display: grid;

  grid-template-columns: 20% 80%;

  padding: 130px 42px;

  border-bottom: 1px solid var(--line);
}

.about-left {
  display: flex;

  flex-direction: column;

  gap: 15px;
}

.about-right {
  max-width: 900px;
}

.about h2 {
  font-size: clamp(65px, 11vw, 170px);

  line-height: .8;

  letter-spacing: -.085em;
}

.about h2 span {
  color: transparent;

  -webkit-text-stroke: 1px var(--black);
}

.about-right p {
  max-width: 390px;

  margin-top: 60px;

  font-size: 14px;

  line-height: 1.8;

  color: #555;
}

.about-right p + p {
  margin-top: 20px;
}


/* =========================================================
   CONTACT
   ========================================================= */

.contact {
  padding: 150px 42px;

  border-bottom: 1px solid var(--line);

  text-align: center;
}

.contact-label {
  margin-bottom: 40px;

  font-size: 9px;

  letter-spacing: .25em;

  color: #777;
}

.contact > a {
  display: inline-block;

  font-size: clamp(25px, 4vw, 60px);

  font-weight: 700;

  letter-spacing: -.045em;

  border-bottom: 1px solid var(--black);

  padding-bottom: 8px;

  transition:
    transform .6s var(--ease);
}

.contact > a:hover {
  transform: skewX(-8deg);
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
  min-height: 300px;

  padding: 40px 42px 25px;

  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  align-content: space-between;

  background: var(--black);

  color: var(--white);
}

.footer-brand {
  font-size: 13px;

  font-weight: 700;

  letter-spacing: .13em;
}

.footer-location {
  font-size: 9px;

  color: #777;

  letter-spacing: .2em;

  text-align: center;
}

.footer-links {
  display: flex;

  justify-content: flex-end;

  gap: 20px;

  font-size: 8px;

  letter-spacing: .15em;

  color: #aaa;
}

.footer-bottom {
  grid-column: 1 / -1;

  display: flex;

  justify-content: space-between;

  padding-top: 30px;

  border-top: 1px solid rgba(255,255,255,.15);

  font-size: 8px;

  letter-spacing: .15em;

  color: #777;
}


/* =========================================================
   SCROLL REVEALS
   ========================================================= */

.section-reveal {
  opacity: 0;

  transform: translateY(80px);

  transition:
    opacity 1.1s var(--ease),
    transform 1.2s var(--ease);
}

.section-reveal.visible {
  opacity: 1;

  transform: translateY(0);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 800px) {

  .loading-screen {
    padding: 25px;
  }

  .loading-index {
    bottom: 25px;
    right: 25px;
  }

  .site-header {
    padding: 24px 22px;

    display: flex;

    justify-content: space-between;
  }

  .header-location,
  .desktop-nav {
    display: none;
  }

  .menu-button {
    display: block;
  }

  .hero {
    padding: 110px 22px 30px;
  }

  .hero-title {
    font-size: 28vw;
  }

  .hero-scroll {
    display: none;
  }

  .hero-bottom {
    font-size: 8px;
  }

  .intro,
  .about {
    display: block;

    padding: 100px 22px;
  }

  .intro-content,
  .about-right {
    margin-top: 50px;
  }

  .intro-label {
    margin-bottom: 40px;
  }

  .intro h2 {
    font-size: 16vw;
  }

  .intro-copy {
    margin-top: 60px;
  }

  .collections {
    padding: 80px 22px 100px;
  }

  .featured-grid {
    grid-template-columns: 1fr;
  }

  .product-stack {
    grid-template-columns: 1fr 1fr;
  }

  .mini-product:nth-child(1),
  .mini-product:nth-child(2) {
    transform: none;
  }

  .rockstar {
    min-height: 80vh;

    padding: 100px 22px;
  }

  .rockstar-content {
    display: block;
  }

  .rockstar-content .section-number {
    display: block;

    margin-bottom: 50px;
  }

  .rockstar h2 {
    font-size: 20vw;
  }

  .fate-live {
    min-height: 75vh;

    padding: 80px 22px;
  }

  .live-main h2 {
    font-size: 20vw;
  }

  .about h2 {
    font-size: 18vw;
  }

  .contact {
    padding: 110px 22px;
  }

  .contact > a {
    font-size: 6vw;
  }

  .site-footer {
    min-height: 360px;

    padding: 35px 22px 22px;

    grid-template-columns: 1fr 1fr;
  }

  .footer-location {
    text-align: right;
  }

  .footer-links {
    grid-column: 1 / -1;

    justify-content: flex-start;

    flex-wrap: wrap;
  }

  .footer-bottom {
    grid-column: 1 / -1;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

}

/* =========================================================
   SHOP + PRODUCT PAGES
   ========================================================= */

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 42px;
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  letter-spacing: .15em;
}

.brand { font-size: 13px; font-weight: 700; letter-spacing: .12em; }
.nav { display: flex; gap: 24px; }
.cart { font-weight: 700; }
.cart-count { margin-left: 5px; }
.close-menu { position: absolute; top: 24px; right: 22px; border: 0; background: transparent; color: inherit; font-size: 34px; cursor: pointer; }

.shop-intro { padding: 150px 42px 90px; border-bottom: 1px solid var(--line); }
.eyebrow, .shop-description, .product-category { font-size: 10px; letter-spacing: .18em; color: #777; }
.shop-intro h1 { margin-top: 24px; font-size: clamp(70px, 15vw, 220px); line-height: .75; letter-spacing: -.09em; }
.shop-description { margin-top: 35px; }
.products { padding: 70px 42px 130px; }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 24px; }
.product-card .product-image { display: block; }
.product-placeholder, .product-detail-placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: rgba(0,0,0,.13); font-size: clamp(42px, 9vw, 130px); font-weight: 800; letter-spacing: -.08em; }
.product-card .product-info h2 { max-width: 240px; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: .08em; }
.product-card .product-info p { margin-top: 5px; color: #777; font-size: 8px; letter-spacing: .15em; }
.footer { min-height: 180px; display: flex; flex-wrap: wrap; align-content: space-between; justify-content: space-between; gap: 24px; padding: 34px 42px 24px; background: var(--black); color: var(--white); font-size: 9px; letter-spacing: .16em; }
.footer-brand { flex-basis: 100%; }

.product-page { padding: 80px 42px 130px; }
.product-detail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: clamp(40px, 8vw, 130px); }
.product-detail-image { aspect-ratio: 4 / 5; background: #deddd8; }
.product-detail-info { padding-top: 15px; }
.product-detail-info h1 { margin-top: 24px; font-size: clamp(38px, 5vw, 74px); line-height: .9; letter-spacing: -.065em; }
.product-detail-price { margin-top: 30px; font-size: 13px; font-weight: 700; }
.product-detail-description { max-width: 360px; margin-top: 32px; color: #555; font-size: 14px; line-height: 1.7; }
.size-section, .quantity-section { margin-top: 45px; border-top: 1px solid var(--line); padding-top: 16px; }
.size-header, .quantity-section { display: flex; justify-content: space-between; gap: 16px; font-size: 10px; letter-spacing: .15em; }
.size-options { display: flex; gap: 8px; margin-top: 18px; }
.size-button, .quantity-control button { min-width: 42px; min-height: 40px; border: 1px solid var(--line); background: transparent; cursor: pointer; font-size: 11px; }
.size-button.selected, .size-button:hover, .quantity-control button:hover { background: var(--black); color: var(--white); }
.quantity-control { display: flex; align-items: center; gap: 12px; }
.add-cart-button { width: 100%; margin-top: 45px; padding: 17px; border: 1px solid var(--black); background: var(--black); color: var(--white); cursor: pointer; font-size: 10px; font-weight: 700; letter-spacing: .18em; }
.back-shop { display: inline-block; margin-top: 24px; border-bottom: 1px solid var(--black); padding-bottom: 5px; font-size: 10px; letter-spacing: .15em; }

.cart-page { min-height: calc(100svh - 80px); padding: 120px 42px; }
.cart-page h1 { margin-top: 24px; font-size: clamp(80px, 16vw, 230px); line-height: .72; letter-spacing: -.1em; }
.cart-items { max-width: 850px; margin: 80px 0 40px; border-top: 1px solid var(--line); }
.cart-item { display: grid; grid-template-columns: 1fr auto auto; gap: 30px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--line); font-size: 11px; letter-spacing: .08em; }
.cart-item small { display: block; margin-top: 7px; color: #777; font-size: 9px; letter-spacing: .14em; }
.cart-item button { border: 0; background: transparent; cursor: pointer; font-size: 9px; letter-spacing: .14em; text-decoration: underline; }
.empty-cart { padding: 40px 0; font-size: 12px; letter-spacing: .12em; }
.empty-cart a { margin-left: 12px; border-bottom: 1px solid var(--black); }
.cart-summary { max-width: 850px; display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: center; font-size: 11px; letter-spacing: .12em; }
.cart-summary .add-cart-button { grid-column: 1 / -1; margin-top: 0; cursor: default; opacity: .55; }

@media (max-width: 800px) {
  .header { padding: 22px; }
  .header .nav, .header .cart { display: none; }
  .header .menu-button { display: block; }
  .mobile-menu .mobile-nav { margin-top: 70px; }
  .shop-intro, .products, .product-page { padding-left: 22px; padding-right: 22px; }
  .shop-intro { padding-top: 125px; }
  .product-grid, .product-detail { grid-template-columns: 1fr; }
  .product-detail { gap: 38px; }
  .cart-page { padding: 100px 22px; }
  .cart-item { grid-template-columns: 1fr auto; gap: 14px; }
  .cart-item button { grid-column: 1 / -1; justify-self: start; }
  .footer { padding: 30px 22px 22px; }
}

/* =========================================================
   NEW FATE BRAND PAGES
========================================================= */
.collection-duo{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.collection-feature{min-height:55vh;background:var(--white);position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:35px 40px;overflow:hidden}
.collection-feature-outline{background:#0a0a0a;color:#f4f3ef}.collection-card-word{font-size:clamp(90px,15vw,220px);font-weight:800;letter-spacing:-.1em;line-height:.72;opacity:.09}.collection-card-content{display:flex;flex-direction:column;gap:16px;position:relative;z-index:1}.collection-card-content span{font-size:9px;letter-spacing:.18em}.collection-card-content h3{font-size:clamp(34px,5vw,74px);line-height:.9;letter-spacing:-.06em}.story-quote{font-size:clamp(26px,3vw,48px)!important;max-width:760px!important;line-height:1.08!important;color:var(--black)!important}.about-right .editorial-button{margin-top:35px}.site-footer .footer-links a{white-space:nowrap}.story-page{padding:140px 42px 160px}.story-layout{display:grid;grid-template-columns:20% 80%;gap:0}.story-label{font-size:10px;letter-spacing:.16em;position:sticky;top:120px;align-self:start}.story-main{max-width:900px}.story-main h1{font-size:clamp(70px,11vw,170px);line-height:.78;letter-spacing:-.09em;margin-bottom:90px}.story-main h1 span{color:transparent;-webkit-text-stroke:1px var(--black)}.story-main h2{font-size:clamp(34px,5vw,72px);line-height:.9;letter-spacing:-.05em;margin:90px 0 30px}.story-main h3{font-size:12px;letter-spacing:.18em;margin:65px 0 18px}.story-main p{max-width:760px;font-size:18px;line-height:1.75;margin-bottom:24px}.story-main hr{border:0;border-top:1px solid var(--line);margin:90px 0}.story-main blockquote{margin:55px 0;padding-left:28px;border-left:1px solid var(--line);font-size:clamp(30px,4vw,60px);line-height:1.05;letter-spacing:-.03em}.media-page{padding:130px 42px 150px}.media-hero{max-width:950px}.media-hero h1{font-size:clamp(80px,14vw,200px);line-height:.72;letter-spacing:-.1em}.media-hero p{max-width:650px;margin-top:40px;font-size:18px;line-height:1.7}.media-grid{margin-top:90px;display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.media-card{border:1px solid var(--line);padding:24px;background:var(--white)}.media-card h2{font-size:30px;letter-spacing:-.04em;margin-bottom:12px}.video-frame{aspect-ratio:16/9;background:#111;display:grid;place-items:center;color:#fff;margin-bottom:20px}.video-frame iframe{width:100%;height:100%;border:0}.social-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);margin-top:80px}.social-link{background:var(--white);padding:45px;min-height:180px;display:flex;flex-direction:column;justify-content:space-between}.social-link strong{font-size:clamp(30px,4vw,60px);letter-spacing:-.05em}.policy-page{max-width:900px;margin:0 auto;padding:140px 42px}.policy-page h1{font-size:clamp(70px,11vw,150px);line-height:.78;letter-spacing:-.09em;margin-bottom:80px}.policy-page h2{font-size:26px;margin:55px 0 18px;letter-spacing:-.02em}.policy-page p,.policy-page li{font-size:16px;line-height:1.8;color:#444}.policy-page ul{padding-left:22px}.policy-meta{font-size:9px;letter-spacing:.18em;color:#777}.contact-page{min-height:70vh;padding:150px 42px;display:grid;place-items:center;text-align:center}.contact-page h1{font-size:clamp(70px,14vw,190px);line-height:.72;letter-spacing:-.1em}.contact-page a{display:inline-block;margin-top:50px;font-size:clamp(22px,3vw,44px);border-bottom:1px solid var(--black);padding-bottom:10px}.maintenance-page{min-height:100svh;background:#070707;color:#f4f3ef;display:grid;place-items:center;padding:30px;text-align:center}.maintenance-box{max-width:620px;width:100%}.maintenance-box h1{font-size:clamp(60px,12vw,150px);line-height:.75;letter-spacing:-.09em}.maintenance-box p{margin-top:30px;color:#aaa;line-height:1.7}.maintenance-box form{margin:40px auto 0;display:flex;max-width:420px}.maintenance-box input{flex:1;padding:16px;background:transparent;color:#fff;border:1px solid #555}.maintenance-box button{padding:16px 20px;border:1px solid #fff;background:#fff;color:#000;cursor:pointer}.maintenance-status{margin-top:16px;font-size:10px;letter-spacing:.14em}.team-panel{margin-top:45px;padding-top:25px;border-top:1px solid #333}.team-panel a{color:#fff;text-decoration:underline}
@media(max-width:800px){.collection-duo,.media-grid,.social-list{grid-template-columns:1fr}.collection-feature{min-height:48vh;padding:28px 22px}.story-page,.media-page,.policy-page{padding-left:22px;padding-right:22px}.story-layout{grid-template-columns:1fr}.story-label{position:static;margin-bottom:55px}.story-main h1{font-size:18vw}.story-main p{font-size:16px}.contact-page{padding:110px 22px}.maintenance-box form{display:grid;gap:10px}.maintenance-box button{width:100%}}

.cart-svg{width:18px;height:18px;display:inline-block;vertical-align:-4px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.cart-icon{display:inline-flex;align-items:center}