/* ZYRATH — editorial typography and visual continuity */

:root {
  --editorial-ivory: #f4ecdc;
  --editorial-muted: #b4aa9b;
  --editorial-gold: #d4ad68;
  --editorial-line: rgba(212, 173, 104, 0.22);
}

/* Keep anchored sections fully visible below the fixed navigation bar. */
#story,
#collections,
#contact {
  scroll-margin-top: 86px;
}

.section,
.site-footer,
.collection-hero,
.poster-gallery,
.archive-empty {
  width: min(calc(100% - clamp(72px, 6vw, 160px)), 2200px);
}

.story {
  position: relative;
  isolation: isolate;
  width: min(calc(100% - clamp(72px, 6vw, 160px)), 2200px);
  margin-top: -1px;
  padding-top: clamp(104px, 13vw, 178px);
  background:
    radial-gradient(ellipse at 50% 26%, rgba(179, 126, 53, 0.11), transparent 43%),
    linear-gradient(180deg, #070706 0%, #0b0907 48%, #070707 100%);
}

.story::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 16% 12%, rgba(212, 173, 104, 0.12), transparent 38%),
    linear-gradient(90deg, transparent 49.96%, rgba(212, 173, 104, 0.055) 50%, transparent 50.04%);
  mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
}

.collections {
  background:
    linear-gradient(90deg, #090909 0%, rgba(9, 9, 9, 0.97) 42%, rgba(9, 9, 9, 0.72) 100%),
    linear-gradient(180deg, transparent 0%, #090909 650px),
    url("assets/posters/football-heritage/zinedine-zidane-art.jpg") right -90px / min(42vw, 760px) auto no-repeat,
    radial-gradient(circle at 18% 12%, rgba(164, 114, 47, 0.12), transparent 27%),
    #090909;
}

.story .section-heading {
  display: grid;
  grid-template-columns: minmax(160px, 0.42fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(28px, 7vw, 100px);
  max-width: none;
  margin-bottom: clamp(60px, 9vw, 112px);
}

.story .section-heading .eyebrow {
  padding-bottom: 0.65em;
}

.story .section-heading h2 {
  max-width: 1120px;
  color: var(--editorial-ivory);
  font-size: clamp(44px, 7vw, 92px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.story-artworks {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.78fr 1.07fr;
  gap: clamp(12px, 1.3vw, 28px);
  min-height: clamp(340px, 28vw, 590px);
  padding: clamp(12px, 1.2vw, 24px);
  border: 1px solid rgba(212, 173, 104, 0.28);
  background: rgba(3, 3, 3, 0.76);
  box-shadow: 0 36px 100px rgba(0, 0, 0, 0.52), inset 0 0 80px rgba(212, 173, 104, 0.025);
}

.story-artworks::before,
.story-artworks::after {
  content: "";
  position: absolute;
  z-index: 3;
  width: 72px;
  height: 72px;
  pointer-events: none;
}

.story-artworks::before {
  top: -1px;
  left: -1px;
  border-top: 1px solid var(--editorial-gold);
  border-left: 1px solid var(--editorial-gold);
}

.story-artworks::after {
  right: -1px;
  bottom: -1px;
  border-right: 1px solid var(--editorial-gold);
  border-bottom: 1px solid var(--editorial-gold);
}

.story-artwork {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(244, 236, 220, 0.13);
  background: #0b0a08;
}

.story-artwork::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(3, 3, 3, 0.9) 100%);
}

.story-artwork img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.78) contrast(1.08) brightness(0.82);
  transform: scale(1.015);
  transition: transform 900ms cubic-bezier(.18,.76,.22,1), filter 600ms ease;
}

.story-artwork--heritage img { object-position: center 38%; }
.story-artwork--automotive img { object-position: center 42%; }
.story-artwork--sport img { object-position: center 28%; }

.story-artwork figcaption {
  position: absolute;
  z-index: 2;
  right: 22px;
  bottom: 20px;
  left: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--editorial-ivory);
  font: 500 11px/1 var(--font-body);
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.story-artwork figcaption span {
  color: var(--editorial-gold);
  font-family: var(--font-display);
}

.story-artwork:hover img {
  filter: saturate(0.95) contrast(1.06) brightness(0.94);
  transform: scale(1.055);
}

.story-layout {
  grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1fr);
  gap: clamp(52px, 10vw, 150px);
  margin-top: clamp(48px, 6vw, 82px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top-color: var(--editorial-line);
}

.statement {
  max-width: 560px;
  color: var(--editorial-gold);
  font-size: clamp(27px, 3.1vw, 43px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.story-copy {
  max-width: 760px;
  gap: 32px;
  color: var(--editorial-muted);
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.95;
}

.story-copy p:first-child::first-letter {
  float: left;
  margin: 0.1em 0.16em 0 0;
  color: var(--editorial-ivory);
  font: 500 3.7em/0.75 var(--font-display);
}

.collections .section-heading h2 {
  color: var(--editorial-ivory);
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.012em;
}

.collections-heading {
  width: 100%;
  max-width: none;
  grid-template-columns: minmax(200px, 0.32fr) minmax(0, 1.5fr);
}

.collections-heading h2 {
  max-width: 24ch;
}

.manifesto {
  position: relative;
  overflow: hidden;
  min-height: clamp(420px, 57vw, 650px);
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.9), rgba(5, 5, 5, 0.7) 50%, rgba(5, 5, 5, 0.9)),
    linear-gradient(180deg, rgba(7, 7, 7, 0.62), rgba(7, 7, 7, 0.86)),
    url("assets/posters/moroccan-memories/ame-marrakech.jpg") center 42% / cover no-repeat;
  border-block-color: var(--editorial-line);
}

.manifesto::before,
.manifesto::after {
  content: "";
  position: absolute;
  top: 50%;
  width: min(18vw, 220px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--editorial-line));
}

.manifesto::before { left: 0; }
.manifesto::after { right: 0; transform: rotate(180deg); }

.manifesto blockquote {
  max-width: 960px;
  color: var(--editorial-ivory);
  font-size: clamp(32px, 5.5vw, 66px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.contact-panel {
  position: relative;
  overflow: hidden;
  border-color: var(--editorial-line);
  background:
    radial-gradient(circle at 50% -25%, rgba(212, 173, 104, 0.2), transparent 48%),
    linear-gradient(145deg, #0d0c0a, #080807);
}

.contact-panel::before {
  content: "";
  position: absolute;
  inset: 18px;
  pointer-events: none;
  border: 1px solid rgba(212, 173, 104, 0.08);
}

.contact-panel h2 {
  color: var(--editorial-ivory);
  font-size: clamp(42px, 6vw, 72px);
  line-height: 1.06;
  letter-spacing: -0.015em;
}

.contact-intro {
  color: var(--editorial-muted) !important;
}

/* Compact, persistent cart control — behavior remains owned by script.js. */
.cart-fab {
  right: clamp(16px, 2.2vw, 30px);
  bottom: clamp(16px, 2.2vw, 30px);
  gap: 10px;
  min-height: 50px;
  padding: 0 10px 0 16px;
  color: var(--editorial-gold);
  background: linear-gradient(135deg, rgba(17, 16, 14, 0.96), rgba(5, 5, 5, 0.94));
  border: 1px solid rgba(212, 173, 104, 0.58);
  border-radius: 999px;
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.52), inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(14px);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.cart-fab::before {
  content: "";
  width: 17px;
  height: 19px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 8V7a5 5 0 0 1 10 0v1h2.2a1.8 1.8 0 0 1 1.8 1.8v10.4a1.8 1.8 0 0 1-1.8 1.8H4.8A1.8 1.8 0 0 1 3 20.2V9.8A1.8 1.8 0 0 1 4.8 8H7Zm2 0h6V7a3 3 0 0 0-6 0v1Zm-4 2v10h14V10H5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 8V7a5 5 0 0 1 10 0v1h2.2a1.8 1.8 0 0 1 1.8 1.8v10.4a1.8 1.8 0 0 1-1.8 1.8H4.8A1.8 1.8 0 0 1 3 20.2V9.8A1.8 1.8 0 0 1 4.8 8H7Zm2 0h6V7a3 3 0 0 0-6 0v1Zm-4 2v10h14V10H5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cart-fab > span {
  color: var(--editorial-ivory);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
}

.cart-fab strong {
  min-width: 30px;
  height: 30px;
  color: #090807;
  background: linear-gradient(135deg, #efd58d, #c89b4d);
  border: 1px solid rgba(255, 238, 190, 0.46);
  font-size: 11px;
  box-shadow: 0 5px 18px rgba(204, 161, 74, 0.2);
}

.cart-fab:hover,
.cart-fab:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(239, 213, 141, 0.92);
  background: linear-gradient(135deg, rgba(24, 21, 16, 0.98), rgba(8, 7, 6, 0.97));
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.62), 0 0 24px rgba(204, 161, 74, 0.1);
}

/* Immersive artwork product sheet. */
.artwork-viewer {
  width: min(94vw, 1320px);
  height: min(90vh, 850px);
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: hidden;
  color: var(--editorial-ivory);
  background: #080807;
  border: 1px solid rgba(212, 173, 104, 0.42);
  box-shadow: 0 40px 140px rgba(0, 0, 0, 0.78);
}

.artwork-viewer[open] {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
}

.artwork-viewer::backdrop {
  background: rgba(2, 2, 2, 0.9);
  backdrop-filter: blur(12px);
}

.artwork-viewer > img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  padding: clamp(20px, 3vw, 42px);
  background:
    radial-gradient(circle at 50% 40%, rgba(212, 173, 104, 0.09), transparent 45%),
    #040404;
  border-right: 1px solid rgba(212, 173, 104, 0.15);
}

.artwork-viewer .viewer-close {
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  color: var(--editorial-ivory);
  background: rgba(5, 5, 5, 0.82);
  border-color: rgba(212, 173, 104, 0.3);
  border-radius: 50%;
}

.viewer-details {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(54px, 5vw, 82px) clamp(28px, 4vw, 62px) clamp(28px, 3vw, 46px);
  background:
    radial-gradient(circle at 100% 0%, rgba(212, 173, 104, 0.12), transparent 34%),
    linear-gradient(145deg, #10100e, #080807 68%);
}

.artwork-viewer .viewer-kicker {
  padding: 0;
  color: var(--editorial-gold);
  font: 600 9px/1.4 var(--font-body);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.artwork-viewer .viewer-title {
  margin: 24px 0 15px;
  padding: 0;
  color: var(--editorial-ivory);
  font: 500 clamp(30px, 3.4vw, 52px)/1.04 var(--font-display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.artwork-viewer .viewer-collection {
  padding: 0;
  color: var(--editorial-gold);
  font: 500 10px/1.5 var(--font-body);
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.artwork-viewer .viewer-description {
  margin-top: 26px;
  padding: 0;
  color: var(--editorial-muted);
  font: 300 14px/1.8 var(--font-body);
  letter-spacing: 0;
}

.viewer-purchase {
  margin-top: auto;
  padding-top: 32px;
}

.artwork-viewer .viewer-option-label {
  margin-bottom: 12px;
  padding: 0;
  color: var(--editorial-muted);
  font: 500 9px/1 var(--font-body);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.viewer-format-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.viewer-format-options button {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 14px;
  cursor: pointer;
  text-align: left;
  color: var(--editorial-muted);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(212, 173, 104, 0.18);
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.viewer-format-options button[aria-pressed="true"] {
  color: var(--editorial-ivory);
  background: rgba(212, 173, 104, 0.1);
  border-color: var(--editorial-gold);
}

.viewer-format-options button[aria-pressed="true"]::after {
  content: "✓";
  position: absolute;
  top: 10px;
  right: 11px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: #080807;
  background: var(--editorial-gold);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}

.viewer-format-options span { font-size: 11px; letter-spacing: 0.08em; }
.viewer-format-options strong { color: var(--editorial-gold); font-size: 12px; }

.viewer-buy-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 20px;
  margin-top: 18px;
}

.viewer-buy-row > div { display: grid; gap: 5px; }
.viewer-buy-row > div span { color: var(--editorial-muted); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; }
.viewer-buy-row > div strong { color: var(--editorial-ivory); font: 500 21px/1 var(--font-display); white-space: nowrap; }
.viewer-add-to-cart { width: 100%; min-height: 50px; cursor: pointer; }

.viewer-navigation {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(212, 173, 104, 0.16);
}

.viewer-navigation button {
  padding: 8px 0;
  cursor: pointer;
  color: var(--editorial-muted);
  background: transparent;
  border: 0;
  font: 500 9px/1 var(--font-body);
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.viewer-navigation button:last-child { text-align: right; }
.artwork-viewer .viewer-navigation p { padding: 0; color: var(--editorial-gold); font: 500 10px/1 var(--font-display); letter-spacing: 0.12em; }

.collection-hero {
  min-height: 610px;
  border-bottom-color: var(--editorial-line);
}

.back-link {
  color: var(--editorial-gold);
  transition: color 220ms ease, gap 220ms ease;
}

.back-link:hover,
.back-link:focus-visible {
  gap: 24px;
  color: var(--editorial-ivory);
}

.collection-hero-content {
  max-width: 1180px;
}

.collection-hero-content h1 {
  max-width: 1160px;
  margin-bottom: clamp(32px, 4.5vw, 48px);
  font-size: clamp(58px, 10.2vw, 132px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: 0.025em;
  text-wrap: balance;
}

.collection-hero-content > p:not(.eyebrow) {
  width: min(600px, 100%);
  padding-left: 25px;
  color: var(--editorial-muted);
  border-left: 1px solid var(--editorial-gold);
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.85;
}

.collection-count {
  border-left-color: var(--editorial-line);
}

.collection-count strong {
  color: var(--editorial-ivory);
}

.poster-title,
.game-card-copy h2,
.archive-empty h2 {
  color: var(--editorial-ivory);
  letter-spacing: 0.025em;
}

.poster-subtitle,
.game-subtitle,
.game-description,
.archive-empty p:last-child {
  color: var(--editorial-muted);
}

@media (prefers-reduced-motion: no-preference) {
  .story .section-heading,
  .story-layout,
  .collection-hero-content {
    animation: editorial-rise 850ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
  }

  .story-layout { animation-delay: 100ms; }

  @keyframes editorial-rise {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (min-width: 1500px) {
  .story .section-heading {
    grid-template-columns: minmax(220px, 0.38fr) minmax(0, 1.25fr);
    gap: clamp(72px, 8vw, 160px);
  }

  .story-layout {
    grid-template-columns: minmax(360px, 0.85fr) minmax(620px, 1.25fr);
    gap: clamp(90px, 9vw, 190px);
  }

  .story .section-heading h2 {
    font-size: clamp(72px, 5.5vw, 108px);
  }

  .statement {
    font-size: clamp(34px, 2.3vw, 48px);
  }

  .story-copy {
    font-size: clamp(17px, 1vw, 20px);
  }

  .collections-heading {
    grid-template-columns: minmax(250px, 0.36fr) minmax(720px, 1.65fr);
    gap: clamp(80px, 9vw, 190px);
  }

  .collections-heading h2 {
    max-width: 22ch;
    font-size: clamp(56px, 4vw, 78px);
  }

  .collections .collection-grid {
    gap: clamp(22px, 1.5vw, 34px);
  }
}

@media (max-width: 760px) {
  #story,
  #collections,
  #contact {
    scroll-margin-top: 72px;
  }

  .section,
  .site-footer,
  .collection-hero,
  .poster-gallery,
  .archive-empty {
    width: min(calc(100% - 34px), 1320px);
  }

  .story {
    width: min(calc(100% - 34px), 1320px);
    padding-top: 88px;
    background:
      radial-gradient(ellipse at 50% 18%, rgba(179, 126, 53, 0.12), transparent 38%),
      linear-gradient(180deg, #070706, #0a0806 48%, #070707);
  }

  .story-artworks {
    grid-template-columns: 1fr 1fr;
    min-height: 0;
    padding: 8px;
    gap: 8px;
  }

  .story-artwork { aspect-ratio: 4 / 5; }
  .story-artwork:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .story-artwork figcaption { right: 14px; bottom: 14px; left: 14px; font-size: 9px; }

  .collections {
    background:
      linear-gradient(180deg, rgba(9, 9, 9, 0.78), #090909 540px),
      url("assets/posters/football-heritage/zinedine-zidane-art.jpg") right top / 88% auto no-repeat,
      #090909;
  }

  .collections-heading {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin-bottom: 38px;
    padding-bottom: 28px;
  }

  .collections-heading > * {
    min-width: 0;
  }

  .collections-heading h2,
  .collections .section-heading h2 {
    width: 100%;
    max-width: 12ch;
    font-size: clamp(31px, 9.6vw, 42px);
    line-height: 1.1;
    overflow-wrap: normal;
    word-break: normal;
  }

  .story .section-heading {
    display: block;
    margin-bottom: 54px;
  }

  .story .section-heading .eyebrow { margin-bottom: 22px; }

  .story .section-heading h2 {
    max-width: 11ch;
    font-size: clamp(40px, 13vw, 59px);
    line-height: 1.01;
  }

  .story-layout {
    grid-template-columns: 1fr;
    gap: 38px;
    padding-top: 34px;
  }

  .statement {
    max-width: 12ch;
    font-size: clamp(27px, 8.8vw, 36px);
    line-height: 1.38;
  }

  .story-copy { gap: 25px; line-height: 1.82; }

  .manifesto { min-height: 450px; padding-inline: 28px; }
  .manifesto::before,
  .manifesto::after { display: none; }
  .manifesto blockquote { font-size: clamp(31px, 9vw, 44px); line-height: 1.36; }

  .contact-panel { padding: 58px 20px; }
  .contact-panel::before { inset: 10px; }

  .cart-fab {
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    min-height: 46px;
    gap: 8px;
    padding: 0 8px 0 13px;
  }

  .cart-fab::before { width: 15px; height: 17px; }
  .cart-fab > span { font-size: 9px; letter-spacing: 0.16em; }
  .cart-fab strong { min-width: 28px; height: 28px; font-size: 10px; }

  .artwork-viewer {
    width: calc(100vw - 20px);
    height: min(92svh, 900px);
    overflow-y: auto;
  }

  .artwork-viewer[open] { display: block; }

  .artwork-viewer > img {
    height: auto;
    max-height: 51svh;
    padding: 16px;
    border-right: 0;
    border-bottom: 1px solid rgba(212, 173, 104, 0.15);
  }

  .viewer-details { padding: 36px 20px 24px; }
  .artwork-viewer .viewer-title { font-size: clamp(28px, 9vw, 40px); }
  .artwork-viewer .viewer-description { margin-top: 18px; font-size: 13px; }
  .viewer-purchase { margin-top: 28px; padding-top: 0; }
  .viewer-buy-row { grid-template-columns: 1fr; align-items: stretch; gap: 14px; }
  .viewer-navigation button span { display: none; }

  .collection-hero {
    width: min(calc(100% - 34px), 1760px);
    min-height: 570px;
    padding-top: 120px;
  }

  .collection-hero-content h1 {
    font-size: clamp(44px, 13vw, 68px);
    line-height: 0.96;
    letter-spacing: 0.015em;
    overflow-wrap: normal;
    word-break: normal;
  }

  .collection-hero-content > p:not(.eyebrow) {
    padding-left: 18px;
    font-size: 16px;
    line-height: 1.75;
  }
}

@media (max-width: 420px) {
  .collection-hero-content h1 { font-size: clamp(42px, 12.6vw, 56px); }
  .collection-count { position: static; margin-top: 42px; }
}

/* Language and mobile readability refinement */
@media (max-width: 1024px) {
  .collection-hero-content > p:not(.eyebrow) {
    max-width: 48ch;
    font-size: clamp(16px, 2vw, 18px);
    line-height: 1.75;
  }

  .poster-item h2 {
    font-size: clamp(20px, 2.7vw, 27px);
    line-height: 1.25;
  }

  .poster-item > p {
    font-size: 12px;
    line-height: 1.45;
    letter-spacing: 0.16em;
  }

  .ready-add,
  .ready-bundle {
    font-size: 12px;
  }
}

@media (max-width: 760px) {
  body { font-size: 16px; }

  .navigation a,
  .nav-cart {
    min-height: 48px;
    font-size: 14px;
  }

  .eyebrow {
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: 0.24em;
  }

  .hero-kicker {
    font-size: 10px !important;
    line-height: 1.5;
  }

  .hero.hero-cinematic .slogan {
    font-size: 12px !important;
    line-height: 1.55;
  }

  .hero.hero-cinematic .hero-description {
    font-size: 15px !important;
    line-height: 1.6;
    letter-spacing: 0.03em;
  }

  .hero-cta,
  .ready-add,
  .ready-bundle,
  .collections .collection-cta,
  .add-to-cart,
  .button {
    min-height: 48px;
    font-size: 12px !important;
    line-height: 1.35;
  }

  .ready-copy,
  .collections .collection-description,
  .story-copy,
  .contact-intro,
  .contact-panel > p:not(.eyebrow),
  .collection-hero-content > p:not(.eyebrow),
  .archive-empty p:last-child {
    font-size: 16px;
    line-height: 1.75;
  }

  .ready-index,
  .ready-content label,
  .ready-unit span,
  .poster-order label,
  .viewer-kicker,
  .viewer-collection,
  .viewer-option-label {
    font-size: 11px;
    line-height: 1.5;
  }

  .ready-content select,
  .poster-order select,
  .checkout-form input,
  .checkout-form textarea {
    font-size: 16px;
    line-height: 1.4;
  }

  .poster-gallery { gap: clamp(52px, 14vw, 72px); }

  .poster-item > p {
    font-size: 12px;
    line-height: 1.5;
  }

  .poster-item h2 {
    font-size: clamp(21px, 6vw, 27px);
    line-height: 1.28;
    overflow-wrap: anywhere;
  }

  .artwork-viewer .viewer-description {
    font-size: 15px;
    line-height: 1.7;
  }

  .viewer-format-options button { min-height: 58px; }
  .viewer-format-options span { font-size: 13px; }
  .viewer-format-options strong { font-size: 14px; }

  .cart-drawer {
    max-height: 100dvh;
    overflow-y: auto;
    padding-bottom: max(30px, env(safe-area-inset-bottom));
  }

  .cart-item p,
  .cart-item span {
    font-size: 12px;
    line-height: 1.45;
  }

  .cart-item h3 {
    font-size: 17px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .checkout-form label {
    font-size: 12px;
    line-height: 1.45;
  }

  .checkout-note {
    font-size: 14px;
    line-height: 1.65;
  }

  .cart-item button {
    min-width: 88px;
    min-height: 44px;
    margin-left: -12px;
    padding-inline: 12px;
  }

  .ready-unit strong,
  .ready-bundle strong,
  .cart-item strong,
  .cart-summary strong {
    font-size: 15px;
  }

  .contact-instagram span,
  .contact-email span,
  .copyright {
    font-size: 12px;
    line-height: 1.55;
  }

  .cart-fab > span { font-size: 10px; }
}

.cart-fab.has-cart-update,
.nav-cart.has-cart-update {
  animation: cart-confirmation 520ms ease;
}

@keyframes cart-confirmation {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .cart-fab.has-cart-update,
  .nav-cart.has-cart-update { animation: none; }
}

@media (max-width: 430px) {
  .section,
  .site-footer,
  .collection-hero,
  .poster-gallery,
  .archive-empty {
    width: min(calc(100% - 28px), 1320px);
  }

  .collection-hero {
    min-height: auto;
    padding-top: 108px;
  }

  .collection-hero-content h1 {
    max-width: 100%;
    font-size: clamp(40px, 13vw, 56px);
    line-height: 1;
    overflow-wrap: normal;
  }

  .collection-hero-content > p:not(.eyebrow) { padding-left: 15px; }
  .ready-heading h2 { font-size: clamp(36px, 12vw, 52px); }
  .ready-content h3 { font-size: clamp(24px, 8vw, 33px); }
  .collections-heading h2 { font-size: clamp(30px, 9vw, 40px); }
  .cart-drawer { padding-inline: 16px; }
  .artwork-viewer { width: calc(100vw - 12px); }
}

@media (max-width: 340px) {
  .brand-name {
    font-size: 13px;
    letter-spacing: 0.28em;
  }

  .site-header { padding-inline: 14px; }
  .collection-hero-content h1 { font-size: clamp(37px, 12.5vw, 46px); }
  .ready-bundle strong { white-space: normal; }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 900px) {
  .hero.hero-cinematic {
    height: auto;
    min-height: 620px;
    padding-top: 100px;
  }

  .artwork-viewer { height: 96dvh; }
}