@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,500&family=IBM+Plex+Mono:wght@300;400&family=Manrope:wght@300;400;500&display=swap');

:root {
    --ivory: #f3eee5;
    --paper: #faf7f1;
    --ink: #171410;
    --muted: #726b62;
    --gold: #b78a43;
    --line: rgba(23, 20, 16, .17);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Manrope, sans-serif; font-weight: 300; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.product-nav {
    position: relative;
    z-index: 10;
    min-height: 80px;
    padding: 0 clamp(24px, 4vw, 68px);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    border-bottom: 1px solid var(--line);
    background: rgba(250, 247, 241, .92);
}
.product-nav__brand img { width: 164px; height: auto; }
.product-nav__back, .product-nav__viewing, .eyebrow, .breadcrumb, .product-facts dt, .product-footer {
    font-family: "IBM Plex Mono", monospace;
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.product-nav__back { justify-self: center; }
.product-nav__viewing { justify-self: end; border-bottom: 1px solid var(--gold); padding-bottom: 5px; }

.breadcrumb { padding: 22px clamp(24px, 4vw, 68px); color: var(--muted); }
.breadcrumb a:hover { color: var(--ink); }

.product-main {
    min-height: calc(100vh - 124px);
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
}
.product-gallery {
    position: relative;
    min-height: 720px;
    display: grid;
    place-items: center;
    padding: clamp(38px, 7vw, 110px);
    overflow: hidden;
    background: linear-gradient(145deg, #ebe1d2 0%, #f5ede2 52%, #d8c2aa 100%);
}
.product-gallery::before {
    content: "";
    position: absolute;
    width: 65%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, .52);
    filter: blur(70px);
}
.product-gallery img { position: relative; z-index: 1; width: min(100%, 680px); max-height: 650px; object-fit: contain; mix-blend-mode: multiply; transition: transform .8s cubic-bezier(.2,.75,.2,1); }
.product-gallery:hover img { transform: scale(1.025); }
.product-gallery__number { position: absolute; left: 34px; bottom: 28px; z-index: 2; font: 10px "IBM Plex Mono", monospace; letter-spacing: .16em; }

.product-details { padding: clamp(56px, 8vw, 120px) clamp(28px, 6vw, 90px); display: flex; flex-direction: column; justify-content: center; background: var(--paper); }
.eyebrow { color: var(--gold); margin: 0 0 28px; }
.product-details h1 { max-width: 660px; margin: 0; font-family: "Bodoni Moda", serif; font-size: clamp(46px, 5.4vw, 86px); font-weight: 400; line-height: .98; letter-spacing: -.04em; }
.product-details__intro { max-width: 540px; margin: 34px 0 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
.product-facts { margin: 48px 0 0; border-top: 1px solid var(--line); }
.product-facts div { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.product-facts dt { color: var(--muted); }
.product-facts dd { margin: 0; text-align: right; font-size: 13px; }
.product-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 42px; }
.button { min-height: 52px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; font: 10px "IBM Plex Mono", monospace; letter-spacing: .13em; text-transform: uppercase; border: 1px solid var(--ink); transition: .25s ease; }
.button--dark { background: var(--ink); color: var(--paper); }
.button--dark:hover { background: var(--gold); border-color: var(--gold); }
.button--line:hover { background: var(--ink); color: var(--paper); }

.product-note { padding: clamp(72px, 10vw, 150px) clamp(24px, 8vw, 120px); display: grid; grid-template-columns: .8fr 1.2fr; gap: 12vw; background: var(--ink); color: var(--paper); }
.product-note h2 { margin: 0; font: 400 clamp(42px, 6vw, 86px)/1 "Bodoni Moda", serif; letter-spacing: -.04em; }
.product-note__copy { max-width: 590px; align-self: end; }
.product-note__copy p { margin: 0 0 32px; color: rgba(250,247,241,.7); line-height: 1.8; }
.product-note__copy a { font: 10px "IBM Plex Mono", monospace; letter-spacing: .15em; text-transform: uppercase; border-bottom: 1px solid var(--gold); padding-bottom: 7px; }

.product-pagination { min-height: 130px; padding: 0 clamp(24px, 6vw, 90px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.product-pagination a { font-family: "Bodoni Moda", serif; font-size: clamp(20px, 2vw, 30px); }
.product-pagination span { display: block; margin-bottom: 7px; color: var(--muted); font: 9px "IBM Plex Mono", monospace; letter-spacing: .15em; text-transform: uppercase; }
.product-pagination__next { text-align: right; }
.product-footer { min-height: 86px; padding: 0 clamp(24px, 4vw, 68px); display: flex; align-items: center; justify-content: space-between; color: var(--muted); }

@media (max-width: 800px) {
    .product-nav { min-height: 68px; grid-template-columns: 1fr auto; }
    .product-nav__brand img { width: 137px; }
    .product-nav__back { display: none; }
    .product-nav__viewing { font-size: 8px; }
    .breadcrumb { padding-block: 16px; font-size: 8px; }
    .product-main { display: block; }
    .product-gallery { min-height: min(72vh, 620px); padding: 50px 24px; }
    .product-gallery img { max-height: 510px; }
    .product-gallery__number { left: 22px; bottom: 20px; }
    .product-details { padding: 60px 24px 76px; }
    .product-details h1 { font-size: clamp(44px, 13vw, 64px); }
    .product-note { grid-template-columns: 1fr; gap: 46px; padding: 80px 24px; }
    .product-pagination { min-height: 112px; padding-inline: 24px; gap: 24px; }
    .product-pagination a { font-size: 20px; }
    .product-footer { min-height: 100px; padding-block: 24px; gap: 20px; font-size: 8px; }
}