.storefront-page {
  background: var(--paper);
}

.storefront-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(calc(100% - 96px), var(--content));
  margin: auto;
  padding: 34px 0;
  border-bottom: 1px solid var(--rule);
}

.storefront-header nav a[aria-current="page"] {
  border-bottom-color: var(--gold);
}

.collection-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .55fr);
  gap: clamp(48px, 8vw, 140px);
  align-items: end;
  width: min(calc(100% - 96px), var(--content));
  margin: auto;
  padding: 130px 0 150px;
}

.collection-hero h1,
.detail-copy h1,
.pack-detail-copy h1 {
  font-size: clamp(64px, 8vw, 122px);
}

.collection-hero > p {
  margin: 0 0 12px;
  color: var(--muted);
  font: 19px/1.75 var(--serif);
}

.pack-section,
.products-section,
.suite-contents {
  width: min(calc(100% - 96px), var(--content));
  margin: auto;
  padding: 140px 0;
}

.pack-section {
  border-top: 1px solid var(--ink);
}

.storefront-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .36fr);
  gap: 60px;
  align-items: end;
  margin-bottom: 66px;
}

.storefront-section-heading h2,
.selection-note h2,
.detail-information h2 {
  font-size: clamp(46px, 5.4vw, 82px);
  line-height: 1.02;
  letter-spacing: -.025em;
}

.storefront-section-heading > p {
  margin: 0 0 7px;
  color: var(--muted);
  font: 17px/1.7 var(--serif);
}

.pack-grid {
  display: grid;
  gap: 28px;
}

.pack-card {
  display: grid;
  grid-template-columns: minmax(330px, .72fr) minmax(0, 1.28fr);
  min-height: 650px;
  background: var(--ink);
  color: #f8f4ec;
  text-decoration: none;
}

.pack-card__art {
  min-height: 620px;
  overflow: hidden;
  background: #e9e2d8;
}

.pack-card__art picture,
.pack-card__art img {
  width: 100%;
  height: 100%;
}

.pack-card__art img {
  object-fit: cover;
  object-position: center 43%;
  transition: transform 500ms cubic-bezier(.2,.65,.3,1);
}

.pack-card__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(56px, 8vw, 128px);
}

.card-kicker,
.product-formats {
  color: var(--gold-light);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  line-height: 1.6;
  text-transform: uppercase;
}

.pack-card h3 {
  margin-top: 30px;
  font-size: clamp(48px, 6vw, 88px);
  line-height: .98;
}

.pack-card__copy > p:not(.card-kicker) {
  max-width: 670px;
  margin: 32px 0 48px;
  color: #c7beb1;
  font: 18px/1.75 var(--serif);
}

.pack-card__copy > span,
.product-card__copy > span {
  align-self: flex-start;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.pack-card:hover .pack-card__art img,
.pack-card:focus-visible .pack-card__art img {
  transform: scale(1.025);
}

.products-section {
  padding-top: 20px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
}

.product-card {
  display: grid;
  grid-template-columns: minmax(170px, .56fr) minmax(0, 1fr);
  min-height: 410px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
}

.product-card:nth-child(odd) {
  border-right: 1px solid var(--rule);
}

.product-card__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  overflow: hidden;
  background: #eee8df;
}

.product-card:nth-child(4n+2) .product-card__visual,
.product-card:nth-child(4n+3) .product-card__visual {
  background: #e2d9cd;
}

.product-card__visual > span {
  position: absolute;
  top: 28px;
  left: 28px;
  color: var(--gold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
}

.miniature-card {
  position: relative;
  display: grid;
  width: 52%;
  aspect-ratio: 5 / 7;
  place-items: center;
  border: 1px solid #ba9b5e;
  background: #fbfaf6;
  box-shadow: 0 18px 45px rgba(45, 36, 24, .14);
  transition: transform 260ms ease;
}

.miniature-card::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid #1b1916;
}

.miniature-card__castle {
  color: #b69555;
  font: 600 10px/1 var(--serif);
  letter-spacing: .25em;
}

.miniature-card__line {
  position: absolute;
  bottom: 24%;
  width: 28%;
  height: 1px;
  background: var(--ink);
}

.product-card__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 48px clamp(30px, 4vw, 66px);
}

.product-card__copy .card-kicker {
  margin: 0 0 22px;
  color: var(--gold);
}

.product-card h3 {
  font-size: clamp(32px, 3vw, 48px);
  line-height: 1.05;
}

.product-card__copy > p:not(.card-kicker):not(.product-formats) {
  margin: 22px 0;
  color: var(--muted);
  font: 16px/1.65 var(--serif);
}

.product-formats {
  margin: 0 0 34px;
  color: var(--gold);
}

.product-card:hover .miniature-card,
.product-card:focus-visible .miniature-card {
  transform: translateY(-6px) rotate(-1deg);
}

.catalog-empty {
  padding: 90px clamp(28px, 7vw, 100px);
  border: 1px solid var(--rule);
  background: var(--ivory);
  text-align: center;
}

.catalog-empty h3 {
  max-width: 700px;
  margin: auto;
  font-size: clamp(40px, 5vw, 66px);
}

.catalog-empty > p:not(.eyebrow) {
  max-width: 590px;
  margin: 28px auto 38px;
  color: var(--muted);
  font: 18px/1.7 var(--serif);
}

.selection-note {
  padding: 140px 48px;
  background: var(--gold);
  text-align: center;
}

.selection-note .eyebrow {
  color: var(--ink);
}

.selection-note > p:not(.eyebrow) {
  max-width: 640px;
  margin: 30px auto;
  font: 18px/1.7 var(--serif);
}

.detail-breadcrumb {
  width: min(calc(100% - 96px), var(--content));
  margin: auto;
  padding: 42px 0 28px;
}

.detail-breadcrumb a {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-decoration: none;
  text-transform: uppercase;
}

.detail-breadcrumb a span {
  margin-right: 8px;
  color: var(--gold);
}

.detail-hero {
  display: grid;
  grid-template-columns: minmax(400px, .9fr) minmax(0, 1.1fr);
  width: min(calc(100% - 96px), var(--content));
  min-height: 760px;
  margin: 0 auto 140px;
}

.detail-art {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  background: #ece6dc;
}

.detail-art picture,
.detail-art img {
  width: 100%;
  height: 100%;
}

.detail-art img {
  object-fit: cover;
  object-position: center 43%;
}

.detail-art__frame {
  position: absolute;
  z-index: 1;
  inset: 18px;
  border: 1px solid rgba(255,255,255,.78);
  pointer-events: none;
}

.detail-copy {
  align-self: center;
  padding: 80px clamp(54px, 7vw, 124px);
}

.detail-copy h1 {
  max-width: 760px;
  line-height: .94;
  letter-spacing: -.035em;
}

.detail-intro {
  max-width: 650px;
  margin: 34px 0;
  color: var(--muted);
  font: 19px/1.72 var(--serif);
}

.detail-formats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 30px;
}

.detail-formats span {
  padding: 9px 12px;
  border: 1px solid var(--rule);
  color: var(--gold);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
}

.availability-note {
  max-width: 520px;
  margin: 0 0 34px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.detail-information {
  display: grid;
  grid-template-columns: 1.1fr .85fr .85fr;
  gap: clamp(40px, 7vw, 110px);
  width: min(calc(100% - 96px), 1320px);
  margin: auto;
  padding: 0 0 150px;
}

.detail-information > div:not(:first-child) {
  padding-top: 53px;
}

.detail-information > div > p {
  margin-top: 0;
  color: var(--muted);
  font: 17px/1.7 var(--serif);
}

.field-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  margin: 28px 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
  list-style: none;
}

.field-list li {
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
  color: #4f4941;
  font-size: 11px;
  letter-spacing: .04em;
}

.detail-specs dt {
  color: var(--gold);
  font: 10px/1.4 var(--sans);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.detail-specs dd {
  color: var(--muted);
}

.storefront-header--dark {
  position: absolute;
  inset: 0 0 auto;
  color: #faf6ee;
  border-bottom-color: rgba(255,255,255,.16);
}

.pack-detail-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(450px, 1.1fr);
  min-height: 920px;
  overflow: hidden;
  background: var(--ink);
  color: #faf6ee;
}

.pack-detail-hero .detail-breadcrumb {
  position: absolute;
  z-index: 2;
  top: 95px;
  left: 50%;
  width: min(calc(100% - 96px), var(--content));
  transform: translateX(-50%);
}

.detail-breadcrumb--dark a {
  color: #faf6ee;
}

.pack-detail-copy {
  position: relative;
  z-index: 1;
  align-self: center;
  padding: 190px 8vw 110px max(48px, calc((100vw - var(--content)) / 2));
}

.pack-detail-copy h1 {
  max-width: 740px;
  line-height: .92;
}

.pack-detail-copy > p:not(.eyebrow) {
  max-width: 620px;
  margin: 36px 0 46px;
  color: #c9c0b3;
  font: 19px/1.72 var(--serif);
}

.pack-detail-button {
  border-color: var(--gold-light);
  background: transparent;
  color: #faf6ee;
}

.pack-detail-button:hover,
.pack-detail-button:focus-visible {
  background: var(--gold);
  color: var(--ink);
}

.pack-detail-art {
  position: relative;
  display: grid;
  min-width: 0;
  place-items: end center;
  overflow: hidden;
  background: radial-gradient(circle at center, #2d2821, #0e0d0b 70%);
}

.pack-detail-art::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 22px;
  border: 1px solid rgba(213,189,139,.34);
}

.pack-detail-art picture {
  display: contents;
}

.pack-detail-art img {
  width: 125%;
  max-width: none;
  filter: sepia(1) saturate(.55) brightness(1.7);
  opacity: .92;
}

.suite-contents {
  padding-top: 150px;
}

.suite-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ink);
  list-style: none;
}

.suite-list li {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  gap: 34px;
  align-items: center;
  padding: 30px 0;
  border-bottom: 1px solid var(--rule);
}

.suite-list > li > span {
  color: var(--gold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
}

.suite-list h3 {
  font-size: clamp(28px, 3vw, 42px);
}

.suite-list h3 a,
.suite-list > li > a {
  text-decoration: none;
}

.suite-list p {
  margin: 9px 0 0;
  color: var(--muted);
  font: 15px/1.6 var(--serif);
}

.suite-list > li > a {
  border-bottom: 1px solid var(--gold);
  padding-bottom: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

@media (max-width: 1020px) {
  .collection-hero,
  .pack-section,
  .products-section,
  .suite-contents,
  .detail-breadcrumb,
  .detail-hero,
  .detail-information {
    width: calc(100% - 56px);
  }

  .collection-hero {
    padding: 100px 0 120px;
  }

  .pack-card {
    grid-template-columns: .8fr 1.2fr;
    min-height: 560px;
  }

  .pack-card__art {
    min-height: 560px;
  }

  .product-card {
    grid-template-columns: 150px minmax(0, 1fr);
  }

  .detail-hero {
    grid-template-columns: .82fr 1.18fr;
  }

  .detail-copy {
    padding: 60px 48px;
  }

  .detail-information {
    grid-template-columns: 1fr 1fr;
  }

  .detail-information > div:last-child {
    grid-column: 2;
  }

  .pack-detail-copy {
    padding-left: 28px;
  }
}

@media (max-width: 720px) {
  .storefront-header {
    width: calc(100% - 40px);
    padding: 24px 0;
  }

  .collection-hero {
    display: block;
    width: calc(100% - 48px);
    padding: 78px 0 90px;
  }

  .collection-hero h1,
  .detail-copy h1,
  .pack-detail-copy h1 {
    font-size: clamp(50px, 15vw, 72px);
  }

  .collection-hero > p {
    margin-top: 36px;
    font-size: 17px;
  }

  .pack-section,
  .products-section,
  .suite-contents {
    width: calc(100% - 48px);
    padding: 90px 0;
  }

  .storefront-section-heading {
    display: block;
    margin-bottom: 44px;
  }

  .storefront-section-heading > p {
    margin-top: 28px;
  }

  .pack-card {
    display: block;
    min-height: 0;
  }

  .pack-card__art {
    height: 112vw;
    min-height: 0;
    max-height: 620px;
  }

  .pack-card__copy {
    padding: 54px 28px 62px;
  }

  .pack-card h3 {
    font-size: 48px;
  }

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

  .product-card {
    grid-template-columns: 126px minmax(0, 1fr);
    min-height: 340px;
    border-right: 0 !important;
  }

  .product-card__visual > span {
    top: 18px;
    left: 18px;
  }

  .miniature-card {
    width: 60%;
  }

  .product-card__copy {
    padding: 36px 22px;
  }

  .product-card h3 {
    font-size: 31px;
  }

  .product-card__copy > p:not(.card-kicker):not(.product-formats) {
    font-size: 14px;
  }

  .selection-note {
    padding: 96px 24px;
  }

  .detail-breadcrumb {
    width: calc(100% - 48px);
    padding: 32px 0 24px;
  }

  .detail-hero {
    display: flex;
    width: 100%;
    margin-bottom: 90px;
    flex-direction: column;
  }

  .detail-art {
    height: min(126vw, 650px);
    min-height: 0;
  }

  .detail-art__frame {
    inset: 12px;
  }

  .detail-copy {
    padding: 66px 24px 0;
  }

  .detail-information {
    display: block;
    width: calc(100% - 48px);
    padding-bottom: 96px;
  }

  .detail-information > div:not(:first-child) {
    padding-top: 48px;
  }

  .field-list {
    grid-template-columns: 1fr;
  }

  .storefront-header--dark {
    position: absolute;
  }

  .pack-detail-hero {
    display: flex;
    min-height: auto;
    flex-direction: column;
    padding-top: 80px;
  }

  .pack-detail-hero .detail-breadcrumb {
    position: relative;
    top: auto;
    left: auto;
    order: 0;
    width: calc(100% - 48px);
    transform: none;
  }

  .pack-detail-copy {
    order: 1;
    padding: 60px 24px 72px;
  }

  .pack-detail-art {
    order: 2;
    min-height: 460px;
  }

  .pack-detail-art::before {
    inset: 12px;
  }

  .pack-detail-art img {
    width: 165%;
  }

  .suite-list li {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 16px;
    padding: 26px 0;
  }

  .suite-list > li > a {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 390px) {
  .product-card {
    grid-template-columns: 106px minmax(0, 1fr);
  }

  .product-card__copy {
    padding-right: 16px;
    padding-left: 18px;
  }

  .product-card h3 {
    font-size: 27px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pack-card__art img,
  .miniature-card {
    transition: none;
  }
}