@import url("official-preview.css");

.shop-page { background: #090908; color: #fffaf0; }
.shop-main { padding: clamp(55px, 7vw, 110px) clamp(18px, 5vw, 80px) 100px; }
.shop-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: end; padding-bottom: clamp(55px, 7vw, 105px); }
.shop-intro .eyebrow { margin: 0 0 18px; }
.shop-intro h1 { max-width: 9ch; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(4rem, 8vw, 9rem); font-weight: 400; line-height: .88; letter-spacing: -.04em; }
.shop-intro-copy { max-width: 520px; justify-self: end; color: rgb(255 250 240 / .7); font-size: .95rem; line-height: 1.7; }
.shop-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.shop-actions a { padding: 13px 17px; border: 1px solid #fffaf0; color: inherit; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.shop-actions a:first-child { background: #fffaf0; color: #111; }
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.shop-grid figure { margin: 0; overflow: hidden; background: #181816; }
.shop-grid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shop-grid figure:nth-child(1), .shop-grid figure:nth-child(5) { grid-row: span 2; aspect-ratio: 2 / 3; }
.shop-grid figure:not(:nth-child(1)):not(:nth-child(5)) { aspect-ratio: 4 / 3; }
.prints-page .shop-main { padding: 0; }
.prints-hero { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(330px, .7fr); min-height: clamp(520px, 68vh, 760px); margin: 0; overflow: hidden; background: #090908; }
.prints-hero::after { display: none; }
.prints-hero img { display: block; width: 100%; height: 100%; max-height: 760px; object-fit: contain; object-position: center; background: #11110f; }
.prints-hero-copy { display: flex; position: static; width: auto; padding: clamp(34px, 5vw, 76px); transform: none; flex-direction: column; justify-content: center; color: #fffaf0; font-size: clamp(.95rem, 1.15vw, 1.15rem); line-height: 1.6; background: linear-gradient(rgb(9 9 8 / .62), rgb(9 9 8 / .8)), url("assets/prints/img-7270-panel.jpg") 68% center / cover no-repeat; }
.prints-hero-copy p { margin: 0; text-wrap: balance; }
.prints-room-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.046fr) minmax(0, 1fr); gap: 0; align-items: start; }
.prints-room-lane { display: flex; min-width: 0; flex-direction: column; }
.prints-room-grid figure,
.prints-room-grid figure:nth-child(1),
.prints-room-grid figure:nth-child(5),
.prints-room-grid figure:not(:nth-child(1)):not(:nth-child(5)) { display: block; break-inside: avoid; grid-row: auto; aspect-ratio: auto; overflow: visible; background: transparent; }
.prints-room-grid img { width: 100%; height: auto; object-fit: contain; }
.print-details { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(180px, .7fr) minmax(0, 1.3fr); gap: clamp(30px, 8vw, 150px); align-items: start; margin-top: -4px; padding: clamp(52px, 5vw, 78px) clamp(22px, 7vw, 120px) clamp(44px, 4vw, 64px); background: #090908; color: #fffaf0; }
.print-details .eyebrow { margin: .45em 0 0; }
.print-details > p:last-child { max-width: 760px; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.8rem, 3.2vw, 4rem); line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; }
.preset-page-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 9px; }
.preset-page-grid figure { margin: 0; background: #181816; }
.preset-page-grid figure:first-child { grid-row: span 2; }
.preset-page-grid img { width: 100%; height: 100%; object-fit: cover; }
.presets-page .shop-main { padding: 0; }
.presets-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr); min-height: calc(100svh - var(--header-height)); overflow: hidden; background: #fefaf1; }
.presets-hero > img { position: static; width: 100%; height: calc(100svh - var(--header-height)); object-fit: contain; object-position: left center; background: #fefaf1; filter: none; }
.presets-hero::after { content: none; }
.presets-hero-copy { position: relative; z-index: 1; display: flex; min-height: calc(100svh - var(--header-height)); padding: clamp(40px, 7vw, 110px); transform: translateX(-8vw); flex-direction: column; align-items: center; justify-content: center; color: #171715; text-align: center; text-shadow: none; }
.presets-hero-copy h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.5rem, 8vw, 8.5rem); font-weight: 400; line-height: .9; letter-spacing: -.04em; }
.presets-hero-copy p { max-width: 650px; margin: 24px 0 0; font-size: clamp(.95rem, 1.35vw, 1.2rem); line-height: 1.65; text-wrap: balance; }
.presets-hero-copy .shop-actions { justify-content: center; }
.presets-hero-copy .shop-actions a { border-color: #171715; }
.presets-hero-copy .shop-actions a:first-child { background: #171715; color: #fffaf0; }
@media (max-width: 700px) {
  .shop-main { padding-inline: 16px; }
  .shop-intro { grid-template-columns: 1fr; gap: 36px; }
  .shop-intro-copy { justify-self: start; }
  .shop-grid { grid-template-columns: 1fr 1fr; }
  .prints-room-grid { grid-template-columns: 1fr; }
  .print-details { grid-template-columns: 1fr; gap: 24px; padding: 52px 20px 70px; }
  .prints-hero { grid-template-columns: 1fr; min-height: 0; }
  .prints-hero img { height: auto; max-height: none; }
  .prints-hero-copy { padding: 34px 20px 42px; }
  .preset-page-grid { grid-template-columns: 1fr; }
  .presets-hero { display: block; min-height: 0; background: #090908; }
  .presets-hero > img { position: static; width: 100%; height: auto; object-fit: contain; object-position: center; background: #090908; }
  .presets-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; background: rgb(4 8 8 / .38); }
  .presets-hero-copy { position: absolute; inset: 0; min-height: 0; padding: 34px 20px; transform: none; color: #fffaf0; text-shadow: 0 2px 18px rgb(0 0 0 / .5); }
  .presets-hero-copy h1 { font-size: clamp(3.25rem, 17vw, 5.5rem); }
  .presets-hero-copy .shop-actions a { border-color: #fffaf0; }
  .presets-hero-copy .shop-actions a:first-child { background: #fffaf0; color: #111; }
}