:root {
        --white: #ffffff;
        --ink: #080808;
        --muted: #666666;
        --line: #dedede;
        --soft: #f5f5f3;
        --red: #ff313a;
        --deep-red: #bd0714;
        --shadow: 0 18px 50px rgba(8, 8, 8, 0.1);
        --font-main: "Arial Narrow Bold", "Arial Narrow", Arial, sans-serif;
        --font-gothic: "BU Gothic Hybrid", "Gothic Hybrid", "Arial Narrow Bold", "Arial Narrow", Impact, sans-serif;
      }

      * {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        margin: 0;
        color: var(--ink);
        background: var(--white);
        font-family: var(--font-main);
        font-weight: 700;
        letter-spacing: 0;
      }

      .brand-lockup strong,
      .hero-copy h1,
      .section-heading h2,
      .editorial-copy h2,
      .campaign-copy h2,
      .archive-heading h2,
      .dossier-copy h2,
      .newsletter h2 {
        font-family: var(--font-gothic);
        font-weight: 900;
        text-transform: uppercase;
      }

      .lower-rd {
        text-transform: lowercase;
      }

      button,
      input {
        font: inherit;
      }

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

      img {
        display: block;
        max-width: 100%;
      }

      .announcement {
        display: flex;
        min-height: 34px;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 7px 16px;
        background: var(--ink);
        color: var(--white);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
      }

      .announcement span {
        color: var(--red);
      }

      .site-header {
        position: sticky;
        top: 0;
        z-index: 20;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        min-height: 72px;
        padding: 0 28px;
        border-bottom: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.94);
        backdrop-filter: blur(14px);
      }

      .nav,
      .header-actions {
        display: flex;
        align-items: center;
        gap: 22px;
      }

      .header-actions {
        justify-content: flex-end;
      }

      .nav a,
      .currency {
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
      }

      .brand-lockup {
        display: inline-grid;
        place-items: center;
        min-width: 210px;
        text-align: center;
      }

      .brand-lockup strong {
        font-size: clamp(18px, 2vw, 25px);
        line-height: 0.9;
      }

      .brand-lockup small {
        margin-top: 5px;
        color: var(--red);
        font-size: 10px;
        font-weight: 900;
        text-transform: uppercase;
      }

      .icon-button {
        display: inline-grid;
        width: 36px;
        height: 36px;
        place-items: center;
        border: 1px solid transparent;
        border-radius: 50%;
        background: transparent;
        color: var(--ink);
        cursor: pointer;
      }

      .icon-button:hover,
      .icon-button:focus-visible {
        border-color: var(--ink);
        outline: none;
      }

      .cart-button {
        position: relative;
      }

      .cart-count {
        position: absolute;
        right: -1px;
        bottom: -3px;
        display: grid;
        width: 17px;
        height: 17px;
        place-items: center;
        border-radius: 50%;
        background: var(--red);
        color: var(--white);
        font-size: 10px;
        font-weight: 900;
      }

      .hero {
        min-height: auto;
        display: grid;
        grid-template-rows: auto auto;
        border-bottom: 1px solid var(--line);
        overflow: hidden;
      }

      .hero-stage {
        position: relative;
        display: grid;
        place-items: center;
        min-height: 44svh;
        padding: clamp(28px, 5vw, 64px) 28px clamp(120px, 12vw, 180px);
      }

      .hero-logo {
        width: min(78vw, 900px);
        filter: drop-shadow(0 26px 32px rgba(255, 49, 58, 0.18));
      }

      .hero-copy {
        position: absolute;
        left: 28px;
        bottom: 28px;
        max-width: 410px;
      }

      .hero-copy h1 {
        margin: 0;
        font-size: clamp(38px, 8vw, 112px);
        line-height: 0.83;
      }

      .hero-copy p {
        max-width: 310px;
        margin: 15px 0 0;
        color: var(--muted);
        font-size: 13px;
        font-weight: 700;
        line-height: 1.45;
        text-transform: uppercase;
      }

      .hero-panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        gap: 18px;
        padding: 20px 28px;
        border-top: 1px solid var(--line);
      }

      .hero-panel p {
        margin: 0;
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
      }

      .drop-tag {
        justify-self: center;
        padding: 9px 14px;
        border: 1px solid var(--ink);
        background: var(--white);
        color: var(--ink);
        font-size: 12px;
        font-weight: 950;
        text-transform: uppercase;
      }

      .hero-panel .right {
        justify-self: end;
        text-align: right;
      }

      .section-heading {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: end;
        gap: 24px;
        padding: 54px 28px 18px;
      }

      .section-heading h2 {
        margin: 0;
        font-size: clamp(30px, 5vw, 74px);
        line-height: 0.9;
      }

      .section-heading a {
        border-bottom: 2px solid var(--red);
        color: var(--deep-red);
        font-size: 12px;
        font-weight: 950;
        text-transform: uppercase;
      }

      .products {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
      }

      .product-card {
        display: grid;
        min-height: 520px;
        border-right: 1px solid var(--line);
        background: var(--white);
      }

.product-card:last-child {
  border-right: 0;
}

.product-link {
  color: inherit;
}

      .product-art {
        position: relative;
        display: grid;
        min-height: 390px;
        place-items: center;
        overflow: hidden;
        background:
          linear-gradient(135deg, rgba(255, 49, 58, 0.08), transparent 36%),
          var(--soft);
      }

      .product-card:nth-child(2) .product-art {
        background:
          linear-gradient(150deg, rgba(8, 8, 8, 0.07), transparent 40%),
          #fafafa;
      }

      .product-card:nth-child(3) .product-art {
        background:
          linear-gradient(145deg, rgba(189, 7, 20, 0.1), transparent 42%),
          #f7f7f7;
      }

      .garment {
        position: relative;
        width: min(76%, 330px);
        aspect-ratio: 0.78;
        filter: drop-shadow(0 24px 34px rgba(8, 8, 8, 0.13));
      }

      .tee,
      .hoodie,
      .pants {
        position: absolute;
        inset: 9% 14% 5%;
        border: 1px solid #d9d9d9;
        background: var(--white);
      }

      .tee {
        clip-path: polygon(25% 0, 38% 9%, 62% 9%, 75% 0, 100% 19%, 84% 43%, 78% 34%, 78% 100%, 22% 100%, 22% 34%, 16% 43%, 0 19%);
      }

      .hoodie {
        inset: 6% 9% 4%;
        border-color: #101010;
        background: #111111;
        clip-path: polygon(34% 0, 66% 0, 76% 11%, 100% 25%, 88% 58%, 80% 50%, 80% 100%, 20% 100%, 20% 50%, 12% 58%, 0 25%, 24% 11%);
      }

      .hoodie::before {
        content: "";
        position: absolute;
        left: 35%;
        top: 0;
        width: 30%;
        height: 18%;
        border: 1px solid #333333;
        border-top: 0;
        border-radius: 0 0 40px 40px;
        background: #050505;
      }

      .pants {
        inset: 7% 22% 3%;
        border-color: #d6d6d6;
        background: var(--white);
        clip-path: polygon(7% 0, 93% 0, 88% 100%, 56% 100%, 50% 38%, 44% 100%, 12% 100%);
      }

.pants::after {
  content: "";
  position: absolute;
  left: 48%;
        top: 4%;
        width: 4%;
        height: 74%;
  background: #e9e9e9;
}

.product-photo {
  width: 100%;
  height: 100%;
  max-height: 390px;
  object-fit: contain;
  padding: 22px;
}

.size-picker {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.size-picker select {
  min-width: 62px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  padding: 6px 8px;
  font: inherit;
}

.stock-status {
  display: block;
  margin-top: 8px;
  color: var(--deep-red);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

      .garment-shape {
        position: absolute;
        inset: 9% 14% 5%;
        border: 1px solid #d9d9d9;
        background: var(--white);
        clip-path: polygon(25% 0, 38% 9%, 62% 9%, 75% 0, 100% 19%, 84% 43%, 78% 34%, 78% 100%, 22% 100%, 22% 34%, 16% 43%, 0 19%);
      }

      .garment-shape.hoodie {
        inset: 6% 9% 4%;
        border-color: #101010;
        background: #111111;
        clip-path: polygon(34% 0, 66% 0, 76% 11%, 100% 25%, 88% 58%, 80% 50%, 80% 100%, 20% 100%, 20% 50%, 12% 58%, 0 25%, 24% 11%);
      }

      .garment-shape.pants {
        inset: 7% 22% 3%;
        border-color: #d6d6d6;
        background: var(--white);
        clip-path: polygon(7% 0, 93% 0, 88% 100%, 56% 100%, 50% 38%, 44% 100%, 12% 100%);
      }

      .garment-logo {
        position: absolute;
        left: 50%;
        top: 45%;
        width: 50%;
        transform: translate(-50%, -50%);
      }

      .hoodie + .garment-logo {
        width: 47%;
        filter: drop-shadow(0 0 0 transparent);
      }

      .product-meta {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 16px;
        align-items: center;
        padding: 18px;
        border-top: 1px solid var(--line);
      }

      .product-meta h3,
      .product-meta p {
        margin: 0;
      }

      .product-meta h3 {
        font-family: var(--font-main);
        font-size: 16px;
        font-weight: 900;
        letter-spacing: 0;
        text-transform: uppercase;
      }

      .product-meta h3 a {
        color: inherit;
      }

      .product-meta p {
        margin-top: 6px;
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
      }

      .add-button {
        width: 42px;
        height: 42px;
        border: 1px solid var(--ink);
        border-radius: 50%;
        background: var(--white);
        color: var(--ink);
        cursor: pointer;
      }

.add-button:disabled,
.place-order:disabled {
  border-color: var(--line);
  background: var(--soft);
  color: var(--muted);
  cursor: not-allowed;
}

.product-detail-page {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.65fr);
  min-height: calc(100svh - 106px);
  border-bottom: 1px solid var(--line);
}

.product-detail-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  border-right: 1px solid var(--line);
  background: var(--soft);
}

.product-detail-photo,
.product-detail-fallback {
  width: 100%;
  min-height: 520px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--soft);
}

.product-detail-photo {
  height: 72svh;
  object-fit: contain;
  padding: 22px;
}

.product-detail-fallback {
  display: grid;
  place-items: center;
}

.product-detail-info {
  position: sticky;
  top: 0;
  display: grid;
  align-content: center;
  gap: 18px;
  min-height: calc(100svh - 106px);
  padding: 48px 28px;
  background: var(--white);
}

.back-link {
  width: max-content;
  border-bottom: 2px solid var(--red);
  color: var(--deep-red);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.product-detail-info h1,
.product-detail-missing h1 {
  margin: 0;
  font-family: var(--font-main);
  font-size: clamp(34px, 5.5vw, 76px);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 0.92;
  text-transform: uppercase;
}

.product-detail-price {
  margin: 0;
  color: var(--deep-red);
  font-size: 18px;
  font-weight: 950;
  text-transform: uppercase;
}

.product-detail-copy {
  max-width: 460px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.5;
  text-transform: uppercase;
}

.product-detail-size {
  margin: 8px 0 4px;
}

.product-detail-size select {
  min-width: 92px;
  padding: 10px 12px;
}

.product-detail-stock {
  margin: -4px 0 0;
}

.size-chart-section {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.size-chart-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}

.size-chart-heading h2 {
  margin: 0;
  font-family: var(--font-gothic);
  font-size: 22px;
  line-height: 0.9;
  text-transform: uppercase;
}

.size-chart-heading span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-align: right;
  text-transform: uppercase;
}

.size-chart-image {
  width: 100%;
  max-height: 360px;
  border: 1px solid var(--line);
  background: var(--soft);
  object-fit: contain;
}

.product-detail-missing {
  display: grid;
  align-content: center;
  gap: 18px;
  min-height: calc(100svh - 106px);
  padding: 54px 28px;
  border-bottom: 1px solid var(--line);
}

      .add-button:hover,
      .add-button:focus-visible {
        background: var(--red);
        color: var(--white);
        outline: none;
      }

      .editorial {
        display: grid;
        grid-template-columns: 0.95fr 1.05fr;
        min-height: 560px;
        border-bottom: 1px solid var(--line);
      }

      .editorial-copy {
        display: grid;
        align-content: center;
        gap: 22px;
        padding: 56px 28px;
      }

      .eyebrow {
        margin: 0;
        color: var(--red);
        font-size: 12px;
        font-weight: 950;
        text-transform: uppercase;
      }

      .editorial-copy h2 {
        max-width: 620px;
        margin: 0;
        font-size: clamp(35px, 6vw, 88px);
        line-height: 0.86;
      }

      .editorial-copy p:not(.eyebrow) {
        max-width: 480px;
        margin: 0;
        color: var(--muted);
        font-size: 14px;
        font-weight: 700;
        line-height: 1.55;
        text-transform: uppercase;
      }

      .text-link {
        width: max-content;
        border-bottom: 2px solid var(--ink);
        font-size: 12px;
        font-weight: 950;
        text-transform: uppercase;
      }

      .editorial-visual {
        position: relative;
        display: grid;
        place-items: center;
        min-height: 500px;
        overflow: hidden;
        background: var(--ink);
      }

      .red-block {
        position: absolute;
        width: 82%;
        height: 56%;
        background: var(--red);
        transform: skewY(-5deg);
      }

      .editorial-visual img {
        position: relative;
        width: min(78%, 650px);
        filter: drop-shadow(0 34px 26px rgba(0, 0, 0, 0.3));
      }

.campaign-home-video {
  background: var(--ink);
}

.campaign-home-video video {
  width: 100%;
  height: 100%;
  min-height: 500px;
  object-fit: cover;
}

.social-policy {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  border-bottom: 1px solid var(--line);
}

.social-block,
.policy-block {
  display: grid;
  align-content: center;
  gap: 14px;
  padding: 46px 28px;
}

.social-block {
  border-right: 1px solid var(--line);
}

.social-block a {
  width: max-content;
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-gothic);
  font-size: clamp(28px, 4vw, 56px);
  line-height: 0.9;
  text-transform: uppercase;
}

.policy-block p:not(.eyebrow) {
  max-width: 820px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.5;
  text-transform: uppercase;
}

.contact-page {
  border-bottom: 1px solid var(--line);
}

.contact-heading {
  display: grid;
  gap: 16px;
  padding: 54px 28px 24px;
  border-bottom: 1px solid var(--line);
}

.contact-heading h1 {
  margin: 0;
  font-family: var(--font-gothic);
  font-size: clamp(48px, 11vw, 152px);
  line-height: 0.82;
  text-transform: uppercase;
}

.contact-social-policy {
  border-bottom: 0;
}

      .archive {
        border-bottom: 1px solid var(--line);
        background: var(--white);
      }

      .archive-heading {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(260px, 430px);
        gap: 28px;
        align-items: end;
        padding: 58px 28px 22px;
      }

      .archive-heading h2 {
        margin: 0;
        font-size: clamp(36px, 6vw, 88px);
        line-height: 0.86;
      }

      .archive-heading p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        font-weight: 900;
        line-height: 1.5;
        text-transform: uppercase;
      }

      .archive-strip {
        display: flex;
        min-height: 42px;
        align-items: center;
        gap: 18px;
        overflow: hidden;
        border-top: 1px solid var(--ink);
        border-bottom: 1px solid var(--ink);
        background: var(--ink);
        color: var(--white);
        font-size: 12px;
        font-weight: 950;
        text-transform: uppercase;
        white-space: nowrap;
      }

      .archive-strip span {
        padding-left: 18px;
      }

      .archive-strip b {
        color: var(--red);
      }

      .archive-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        border-bottom: 1px solid var(--line);
      }

      .archive-item {
        display: grid;
        min-height: 430px;
        border-right: 1px solid var(--line);
        background: var(--white);
      }

      .archive-item:last-child {
        border-right: 0;
      }

      .archive-art {
        position: relative;
        display: grid;
        min-height: 300px;
        place-items: center;
        overflow: hidden;
        background:
          repeating-linear-gradient(90deg, transparent 0 18px, rgba(255, 49, 58, 0.08) 18px 19px),
          #f7f7f5;
      }

      .archive-item:nth-child(even) .archive-art {
        background:
          repeating-linear-gradient(0deg, transparent 0 16px, rgba(8, 8, 8, 0.08) 16px 17px),
          #111111;
      }

      .archive-number {
        position: absolute;
        left: 14px;
        top: 14px;
        z-index: 1;
        padding: 5px 8px;
        border: 1px solid currentColor;
        background: var(--white);
        color: var(--ink);
        font-size: 11px;
        font-weight: 950;
        text-transform: uppercase;
      }

      .archive-item:nth-child(even) .archive-number {
        background: var(--ink);
        color: var(--white);
      }

      .archive-piece {
        position: relative;
        width: min(68%, 210px);
        aspect-ratio: 0.75;
        filter: drop-shadow(0 20px 26px rgba(8, 8, 8, 0.16));
      }

      .piece-blazer,
      .piece-longsleeve,
      .piece-tie,
      .piece-cap {
        position: absolute;
        inset: 8% 15% 5%;
        border: 1px solid var(--ink);
        background: var(--white);
      }

      .piece-blazer {
        clip-path: polygon(22% 0, 42% 10%, 58% 10%, 78% 0, 94% 100%, 55% 100%, 50% 44%, 45% 100%, 6% 100%);
      }

      .piece-blazer::after {
        content: "";
        position: absolute;
        left: 49%;
        top: 7%;
        width: 2px;
        height: 88%;
        background: var(--ink);
      }

      .piece-longsleeve {
        inset: 14% 7% 8%;
        border-color: var(--white);
        background: var(--ink);
        clip-path: polygon(28% 0, 72% 0, 100% 22%, 86% 48%, 76% 38%, 76% 100%, 24% 100%, 24% 38%, 14% 48%, 0 22%);
      }

      .piece-longsleeve::after {
        content: "TRIAL";
        position: absolute;
        left: 50%;
        top: 43%;
        color: var(--red);
        font-size: 18px;
        font-weight: 950;
        transform: translate(-50%, -50%) rotate(-8deg);
      }

      .piece-tie {
        inset: 7% 37% 7%;
        border-color: var(--red);
        background: var(--red);
        clip-path: polygon(50% 0, 75% 18%, 63% 100%, 37% 100%, 25% 18%);
      }

      .piece-tie::after {
        content: "";
        position: absolute;
        inset: 9% 44%;
        background: var(--ink);
      }

      .piece-cap {
        inset: 25% 8% 30%;
        border-color: var(--white);
        background: var(--ink);
        border-radius: 120px 120px 28px 28px;
      }

      .piece-cap::after {
        content: "";
        position: absolute;
        right: -24%;
        bottom: 7%;
        width: 40%;
        height: 25%;
        border: 1px solid var(--white);
        background: var(--ink);
        transform: skewX(-24deg);
      }

      .archive-meta {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 14px;
        align-items: center;
        padding: 16px;
        border-top: 1px solid var(--line);
      }

      .archive-meta h3,
      .archive-meta p {
        margin: 0;
      }

      .archive-meta h3 {
        font-family: var(--font-gothic);
        font-size: 14px;
        font-weight: 900;
        text-transform: uppercase;
      }

      .archive-meta p {
        margin-top: 6px;
        color: var(--muted);
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
      }

      .dossier {
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
        border-bottom: 1px solid var(--line);
        background: var(--ink);
        color: var(--white);
      }

      .dossier-copy {
        display: grid;
        align-content: center;
        gap: 22px;
        min-height: 520px;
        padding: 58px 28px;
        background:
          linear-gradient(90deg, rgba(255, 49, 58, 0.16), transparent 38%),
          var(--ink);
      }

      .dossier-copy h2 {
        max-width: 720px;
        margin: 0;
        font-size: clamp(38px, 7vw, 96px);
        line-height: 0.84;
      }

      .dossier-copy p {
        max-width: 520px;
        margin: 0;
        color: #d8d8d8;
        font-size: 13px;
        font-weight: 900;
        line-height: 1.55;
        text-transform: uppercase;
      }

      .dossier-stamp {
        width: max-content;
        border: 2px solid var(--red);
        padding: 9px 12px;
        color: var(--red);
        font-size: 12px;
        font-weight: 950;
        text-transform: uppercase;
        transform: rotate(-3deg);
      }

      .dossier-list {
        display: grid;
        align-content: stretch;
        border-left: 1px solid rgba(255, 255, 255, 0.22);
      }

      .dossier-line {
        display: grid;
        grid-template-columns: 82px 1fr;
        gap: 18px;
        align-items: center;
        padding: 28px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.22);
      }

      .dossier-line:last-child {
        border-bottom: 0;
      }

      .dossier-line b {
        color: var(--red);
        font-size: 14px;
        font-weight: 950;
      }

      .dossier-line span {
        font-size: 13px;
        font-weight: 950;
        line-height: 1.4;
        text-transform: uppercase;
      }

      .campaign-film {
        position: relative;
        display: grid;
        min-height: 100svh;
        overflow: hidden;
        border-bottom: 1px solid var(--line);
        background: var(--ink);
        color: var(--white);
      }

      .campaign-film video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        background: var(--ink);
      }

      .campaign-film::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(90deg, rgba(8, 8, 8, 0.74), rgba(8, 8, 8, 0.12) 52%, rgba(8, 8, 8, 0.62)),
          linear-gradient(0deg, rgba(8, 8, 8, 0.62), transparent 34%, rgba(8, 8, 8, 0.36));
        pointer-events: none;
      }

      .campaign-copy {
        position: relative;
        z-index: 1;
        display: grid;
        align-content: end;
        gap: 10px;
        min-height: 100svh;
        padding: 58px 28px;
      }

      .campaign-copy h2 {
        max-width: 520px;
        margin: 0;
        font-size: clamp(28px, 4vw, 56px);
        line-height: 0.9;
      }

      .campaign-copy p:not(.eyebrow) {
        max-width: 520px;
        margin: 0;
        color: #eeeeee;
        font-size: 13px;
        font-weight: 900;
        line-height: 1.55;
        text-transform: uppercase;
      }

      .campaign-notes {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .campaign-notes span {
        border: 1px solid rgba(255, 255, 255, 0.34);
        background: rgba(8, 8, 8, 0.24);
        padding: 7px 9px;
        color: var(--white);
        font-size: 11px;
        font-weight: 950;
        text-transform: uppercase;
      }

      .newsletter {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(280px, 520px);
        gap: 28px;
        padding: 48px 28px;
        border-bottom: 1px solid var(--line);
      }

      .newsletter h2 {
        margin: 0;
        font-size: clamp(31px, 5vw, 70px);
        line-height: 0.9;
      }

      .newsletter form {
        display: grid;
        align-self: end;
        grid-template-columns: 1fr auto;
        border-bottom: 2px solid var(--ink);
      }

      .newsletter input {
        min-width: 0;
        border: 0;
        padding: 14px 0;
        outline: none;
        text-transform: uppercase;
      }

      .newsletter button {
        border: 0;
        background: transparent;
        font-size: 12px;
        font-weight: 950;
        text-transform: uppercase;
        cursor: pointer;
      }

      .site-footer {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 24px;
        padding: 26px 28px 38px;
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
      }

      .footer-links {
        display: flex;
        flex-wrap: wrap;
        gap: 18px;
        justify-content: flex-end;
      }

      .drawer {
        position: fixed;
        inset: 0 0 0 auto;
        z-index: 40;
        display: grid;
        width: min(410px, 100%);
        grid-template-rows: auto 1fr auto;
        background: var(--white);
        box-shadow: var(--shadow);
        transform: translateX(104%);
        transition: transform 180ms ease;
      }

      .drawer.open {
        transform: translateX(0);
      }

      .drawer-header,
      .drawer-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px;
        border-bottom: 1px solid var(--line);
      }

      .drawer-footer {
        display: grid;
        gap: 14px;
        border-top: 1px solid var(--line);
        border-bottom: 0;
      }

      .drawer h2 {
        margin: 0;
        font-size: 15px;
        font-weight: 950;
        text-transform: uppercase;
      }

      .cart-lines {
        display: grid;
        align-content: start;
        gap: 14px;
        padding: 18px;
        overflow: auto;
      }

      .cart-line {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--line);
        font-size: 13px;
        font-weight: 900;
        text-transform: uppercase;
      }

      .cart-line small {
        display: block;
        margin-top: 5px;
        color: var(--muted);
      }

      .checkout-button {
        min-height: 48px;
        border: 1px solid var(--ink);
        background: var(--ink);
        color: var(--white);
        font-size: 12px;
        font-weight: 950;
        text-transform: uppercase;
      }

      .search-bar {
        position: fixed;
        inset: 34px 0 auto;
        z-index: 35;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 18px;
        padding: 18px 28px;
        border-bottom: 1px solid var(--line);
        background: var(--white);
        transform: translateY(-130%);
        transition: transform 180ms ease;
      }

      .search-bar.open {
        transform: translateY(0);
      }

      .search-bar input {
        min-width: 0;
        border: 0;
        border-bottom: 2px solid var(--ink);
        padding: 12px 0;
        outline: none;
        font-size: 22px;
        font-weight: 900;
        text-transform: uppercase;
      }

      @media (max-width: 860px) {
        .site-header {
          grid-template-columns: 1fr auto;
          min-height: 64px;
          padding: 0 16px;
        }

        .nav {
          display: none;
        }

        .brand-lockup {
          justify-items: start;
          min-width: 0;
        }

        .currency {
          display: none;
        }

        .hero-stage {
          place-items: start center;
          min-height: auto;
          padding: 22px 16px 150px;
        }

        .hero-logo {
          width: min(100%, 520px);
        }

        .hero-copy {
          left: 16px;
          right: 16px;
          bottom: 24px;
        }

        .hero-panel {
          grid-template-columns: 1fr;
          padding: 16px;
        }

        .drop-tag,
        .hero-panel .right {
          justify-self: start;
          text-align: left;
        }

        .section-heading {
          grid-template-columns: 1fr;
          padding: 38px 16px 16px;
        }

        .products,
        .editorial,
        .social-policy,
        .campaign-film,
        .archive-heading,
        .archive-grid,
        .dossier,
        .newsletter {
          grid-template-columns: 1fr;
        }

        .social-block {
          border-right: 0;
          border-bottom: 1px solid var(--line);
        }

        .product-card {
          min-height: 470px;
          border-right: 0;
          border-bottom: 1px solid var(--line);
        }

        .product-art {
          min-height: 330px;
        }

        .editorial-copy,
        .campaign-copy,
        .archive-heading,
        .dossier-copy,
        .newsletter,
        .site-footer {
          padding-right: 16px;
          padding-left: 16px;
        }

        .archive-item {
          min-height: 390px;
          border-right: 0;
          border-bottom: 1px solid var(--line);
        }

        .archive-art {
          min-height: 270px;
        }

        .dossier-list {
          border-left: 0;
          border-top: 1px solid rgba(255, 255, 255, 0.22);
        }

        .dossier-line {
          grid-template-columns: 58px 1fr;
          padding: 22px 16px;
        }

        .site-footer {
          grid-template-columns: 1fr;
        }

        .footer-links {
          justify-content: flex-start;
        }
      }
    

.checkout-page {
  min-height: calc(100svh - 106px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
  border-bottom: 1px solid var(--line);
}

.cart-line {
  grid-template-columns: 1fr auto auto;
  align-items: center;
}

.checkout-button {
  display: grid;
  place-items: center;
}

.checkout-form,
.checkout-summary {
  padding: 54px 28px;
}

.checkout-form {
  border-right: 1px solid var(--line);
}

.checkout-form h1,
.checkout-summary h2 {
  margin: 0 0 26px;
  font-family: var(--font-gothic);
  font-size: clamp(34px, 6vw, 84px);
  line-height: 0.88;
  text-transform: uppercase;
}

.checkout-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.checkout-grid label,
.checkout-full {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.checkout-full {
  grid-column: 1 / -1;
}

.checkout-grid input,
.checkout-grid select,
.checkout-grid textarea {
  width: 100%;
  border: 1px solid var(--line);
  padding: 13px 12px;
  background: var(--white);
  color: var(--ink);
  outline: none;
}

.checkout-grid textarea {
  min-height: 92px;
  resize: vertical;
}

.checkout-grid input:focus,
.checkout-grid select:focus,
.checkout-grid textarea:focus {
  border-color: var(--ink);
}

.order-list {
  display: grid;
  gap: 14px;
}

.order-item,
.order-total {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
}

.order-item small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
}

.order-total {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 2px solid var(--ink);
  border-bottom: 0;
  font-size: 16px;
}

.place-order {
  width: 100%;
  min-height: 52px;
  margin-top: 20px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--white);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  cursor: pointer;
}

.checkout-note {
  margin-top: 12px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.45;
  text-transform: uppercase;
}

.payment-waiting {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.7fr);
  min-height: calc(100svh - 106px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.payment-waiting.hidden {
  display: none;
}

.payment-copy,
.kbz-card {
  display: grid;
  align-content: center;
  gap: 18px;
  padding: 54px 28px;
}

.payment-copy {
  border-right: 1px solid var(--line);
}

.payment-copy h1 {
  margin: 0;
  font-family: var(--font-gothic);
  font-size: clamp(38px, 7vw, 98px);
  line-height: 0.86;
  text-transform: uppercase;
}

.payment-copy p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.5;
  text-transform: uppercase;
}

.payment-copy strong {
  color: var(--ink);
}

.proof-form {
  display: grid;
  max-width: 520px;
  gap: 14px;
}

.proof-form label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.proof-form input {
  width: 100%;
  border: 1px solid var(--line);
  padding: 13px 12px;
  background: var(--white);
  color: var(--ink);
  outline: none;
}

.proof-form input:focus {
  border-color: var(--ink);
}

.kbz-card {
  justify-items: center;
  background: #075aaa;
  color: var(--white);
  text-align: center;
}

.kbz-card img {
  width: min(100%, 430px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: var(--white);
}

.kbz-card strong {
  font-size: clamp(26px, 4vw, 52px);
  line-height: 1;
}

.kbz-card span {
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.track-page,
.approval-page {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.7fr);
  min-height: calc(100svh - 106px);
  border-bottom: 1px solid var(--line);
}

.track-form,
.track-result,
.approval-copy {
  display: grid;
  align-content: center;
  gap: 18px;
  padding: 54px 28px;
}

.track-form,
.approval-copy {
  border-right: 1px solid var(--line);
}

.track-form h1,
.track-result h2,
.approval-copy h1 {
  margin: 0;
  font-family: var(--font-gothic);
  font-size: clamp(36px, 7vw, 92px);
  line-height: 0.86;
  text-transform: uppercase;
}

.track-form label {
  display: grid;
  max-width: 520px;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.track-form input {
  width: 100%;
  border: 1px solid var(--line);
  padding: 13px 12px;
  background: var(--white);
  color: var(--ink);
  outline: none;
}

.track-id-fallback {
  display: grid;
  gap: 14px;
  max-width: 520px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.track-id-fallback summary {
  cursor: pointer;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.track-id-fallback label {
  margin-top: 12px;
}

.track-match {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.track-result {
  background: var(--soft);
}

.track-result p,
.track-result li {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.5;
  text-transform: uppercase;
}

.track-result ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.approval-message {
  max-width: 620px;
  color: var(--muted);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 950;
  line-height: 1.15;
  text-transform: uppercase;
}

.confirmed-page .approval-copy {
  background: var(--ink);
  color: var(--white);
}

.confirmed-page .approval-copy .checkout-note,
.confirmed-page .approval-message {
  color: rgba(255, 255, 255, 0.76);
}

.confirmed-page .checkout-button {
  border-color: var(--white);
  background: var(--white);
  color: var(--ink);
}

.track-badge {
  display: inline-grid;
  width: max-content;
  place-items: center;
  border: 1px solid var(--ink);
  padding: 7px 10px;
  background: var(--white);
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .checkout-page {
    grid-template-columns: 1fr;
  }

  .product-detail-page,
  .product-detail-gallery {
    grid-template-columns: 1fr;
  }

  .product-detail-gallery {
    border-right: 0;
  }

  .product-detail-photo,
  .product-detail-fallback {
    height: auto;
    min-height: 420px;
    border-right: 0;
  }

  .product-detail-info {
    position: static;
    min-height: auto;
    border-top: 1px solid var(--line);
    padding: 38px 16px;
  }

  .payment-waiting {
    grid-template-columns: 1fr;
  }

  .track-page,
  .approval-page {
    grid-template-columns: 1fr;
  }

  .checkout-form {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .payment-copy {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .track-form,
  .approval-copy {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .checkout-form,
  .checkout-summary,
  .payment-copy,
  .kbz-card,
  .track-form,
  .track-result,
  .approval-copy {
    padding: 38px 16px;
  }

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