:root {
    --wine: #7b1125;
    --wine-deep: #4a0714;
    --gold: #a79457;
    --ink: #3b3b38;
    --muted-ink: #67615d;
    --paper: #efeae7;
    --soft-white: #fbfaf8;
    --hairline: #cfc7c1;
    --shadow: rgba(28, 19, 18, 0.28);
    --display: "Cormorant Garamond", Georgia, serif;
    --sans: "Raleway", Arial, sans-serif;
    --print-scale: 0.985;
}

* {
    box-sizing: border-box;
}

html,
body,
.sheet,
.sheet * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

html {
    min-height: 100%;
    background: #2f2c2b;
}

body {
    min-height: 100%;
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(
            circle at 16% 18%,
            rgba(123, 17, 37, 0.28),
            transparent 24rem
        ),
        linear-gradient(135deg, #2f2c2b 0%, #171514 100%);
    font-family: var(--sans);
}

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

.loading-message,
.load-error {
    width: min(100%, 8.5in);
    padding: 0.35in;
    color: var(--paper);
    font-size: 11pt;
    line-height: 1.5;
    text-align: center;
}

.load-error {
    color: var(--ink);
    background: var(--paper);
}

.load-error h1 {
    margin-bottom: 0.12in;
    font-size: 24pt;
}

.stage {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 40px 20px;
}

.sheet {
    position: relative;
    width: 8.5in;
    height: 11in;
    overflow: hidden;
    background: var(--paper);
    display: grid;
    grid-template-rows: minmax(0, 1fr) 1.14in;
    box-shadow: 0 24px 70px var(--shadow);
}

.sheet-main {
    position: relative;
    z-index: 2;
    min-height: 0;
    display: grid;
    grid-template-columns: 2.38in minmax(0, 1fr);
    gap: 0.34in;
    padding: 0.4in 0.42in 0.2in;
}

.product-rail {
    min-width: 0;
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    border-right: 1px solid rgba(167, 148, 87, 0.42);
    padding-right: 0.28in;
}

.logo-stack {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 0.13in;
}

.producer-logo {
    width: 1.55in;
}

.grettel-logo {
    width: 1.28in;
}

.logo-rule {
    display: none;
}

.bottle-figure {
    position: absolute;
    z-index: 3;
    left: -0.24in;
    right: -0.02in;
    bottom: 0.3in;
    margin: 0;
    display: grid;
    justify-items: center;
}

.bottle.bulles-dorelie,
.bottle.almond-pearls {
    width: 2.2in;
}

.bottle.orelie-rouge {
    width: 1.9in;
}

.bottle.orelie-pink {
    width: 2.2in;
}

.bottle.orelie-blanc {
    width: 1.9in;
}

.bottle.effet-papillon-white {
    width: 2.2in;
}

.bottle.effet-papillon-rose {
    width: 2.2in;
}

.bottle.effet-papillon-red {
    width: 2.2in;
}

.bottle.amandier {
    width: 2.6in;
}

.bottle.sarrasine {
    width: 2.4in;
}

.bottle.montjau {
    width: 2.5in;
}

.bottle.mithra {
    width: 2.2in;
}

.bottle.grand-aven-red {
    width: 2.4in;
}

.bottle.grand-aven-white {
    width: 2.4in;
}

.bottle.vendanges-octobre {
    width: 2.35in;
}

.bottle.cellier-pinot-noir {
    width: 2.3in;
}

.bottle.cellier-sauvignon-blanc {
    width: 2.55in;
}

.bottle.classiques-cabernet {
    width: 2.3in;
}

.bottle.classiques-chardonnay {
    width: 2.3in;
}

.bottle.classiques-sauvignon-blanc {
    width: 2.3in;
}

.bottle.classiques-gamay {
    width: 2.3in;
}

.bottle.classiques-gris-cabernet {
    width: 2.3in;
}

.bottle.classiques-merlot {
    width: 2.3in;
}

.bottle.classiques-pinot-noir {
    width: 2.4in;
}

.bottle.classiques-syrah {
    width: 2.25in;
}

.bottle.classiques-viognier {
    width: 2.35in;
}

.bottle.terrasses-blanc {
    width: 2.2in;
}

.bottle.terrasses-rose {
    width: 2.3in;
}

.bottle.terrasses-rouge {
    width: 2.35in;
}

.bottle.terra-noe-rouge {
    width: 2.3in;
}

.bottle.terra-noe-white {
    width: 2.3in;
}

.bottle.cote-a-bras {
    width: 2.55in;
}

.bottle.cuvee-royale-brut {
    width: 2.4in;
}

.bottle.cuvee-royale-brut-rose {
    width: 2.35in;
}

.bottle {
    width: 2.55in;
    /*filter: drop-shadow(0 0.12in 0.11in rgba(33, 23, 20, 0.28));*/
}

.bottle-figure figcaption {
    width: 1.86in;
    margin-top: 0.02in;
    padding-top: 0.08in;
    border-top: 1px solid rgba(167, 148, 87, 0.52);
    color: var(--muted-ink);
    font-size: 6.4pt;
    line-height: 1.25;
    text-align: center;
}

.bottle-figure strong,
.bottle-figure span {
    display: block;
}

.bottle-figure strong {
    color: var(--wine);
    font-weight: 800;
}

.content-panel {
    min-width: 0;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, auto) 1fr;
}

.content-awards {
    align-self: end;
    display: flex;
    align-items: center;
    gap: 0.42in;
    min-height: 0.76in;
    padding: 0.12in 0 0.06in 0.36in;
}

.content-award {
    display: block;
    object-fit: contain;
}

.content-award-medal {
    width: 0.64in;
}

.content-award-wide {
    width: 0.88in;
}

.content-awards-three {
    gap: 0.28in;
}

.hero {
    padding-bottom: 0.15in;
    border-bottom: 1px solid var(--hairline);
}

.collection-label {
    margin: 0 0 0.02in;
    color: var(--gold);
    font-size: 7.2pt;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

h1,
h2,
p {
    margin-block: 0;
}

h1 {
    color: var(--wine);
    font-family: var(--display);
    font-size: 38pt;
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: 0;
    text-transform: uppercase;
    text-wrap: balance;
}

.producer-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.07in;
    margin-top: 0.04in;
    color: var(--muted-ink);
    font-size: 10.5pt;
    line-height: 1.2;
}

.producer-line strong {
    color: var(--wine);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fact-row {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) 0.74in 0.92in;
    gap: 0.14in;
    padding: 0.21in 0 0.21in;
}

.fact-row--bordered {
    border-bottom: 1px solid rgba(167, 148, 87, 0.48);
    margin-bottom: 0.22in;
}

.fact {
    min-width: 0;
}

.fact p {
    color: var(--wine);
    font-family: var(--display);
    font-size: 12.5pt;
    font-weight: 700;
    line-height: 1;
}

.fact strong {
    display: block;
    margin-top: 0.02in;
    color: var(--ink);
    font-size: 8.8pt;
    font-weight: 800;
    line-height: 1.12;
}

.status-line {
    margin-bottom: 0.22in;
    display: flex;
    align-items: center;
    gap: 0.14in;
    color: var(--ink);
    font-size: 7.2pt;
    font-weight: 800;
    letter-spacing: 0.24em;
    line-height: 1.35;
    text-transform: uppercase;
}

.status-line::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: rgba(167, 148, 87, 0.48);
}

.aging-value {
    display: block;
    margin-top: 0.02in;
    color: var(--ink);
    font-size: 8.8pt;
    font-weight: 800;
    line-height: 1.12;
}

.content-grid {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.08in;
    gap: 0.26in;
}

.story-column,
.technical-column {
    min-width: 0;
}

.copy-block + .copy-block,
.analysis-block + .copy-block {
    margin-top: 0.18in;
}

h2 {
    margin-bottom: 0.052in;
    color: var(--wine);
    font-family: var(--display);
    font-size: 15.2pt;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.copy-block p {
    color: var(--ink);
    font-size: 8.35pt;
    font-weight: 500;
    line-height: 1.22;
    text-wrap: pretty;
}

.copy-block p + p {
    margin-top: 0.06in;
}

.copy-block strong {
    font-weight: 800;
}

.detail-line {
    font-size: 7.85pt;
}

.analysis-list {
    display: grid;
    gap: 0.07in;
    margin: 0;
}

.analysis-list div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.1in;
    min-height: 0.25in;
    padding: 0.052in 0.12in;
    background: rgba(251, 250, 248, 0.78);
    border: 1px solid rgba(103, 97, 93, 0.42);
    border-radius: 0.055in;
}

.analysis-list dt,
.analysis-list dd {
    margin: 0;
    font-size: 7.4pt;
    line-height: 1.1;
}

.analysis-list dt {
    color: var(--muted-ink);
    font-weight: 600;
    text-transform: uppercase;
}

.analysis-list dd {
    color: var(--ink);
    font-weight: 800;
    text-align: right;
}

.analysis-list sub {
    font-size: 68%;
    line-height: 0;
}

.side-copy p {
    font-size: 8.15pt;
}

.photo-band {
    position: absolute;
    bottom: 0;
    z-index: 1;
    grid-column: 1 / -1;
    align-self: end;
    width: 125%;
    height: 0.3in;
    overflow: hidden;
}

.photo-band::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(74, 7, 20, 0.18),
        rgba(74, 7, 20, 0.02) 42%,
        rgba(74, 7, 20, 0.22)
    );
}

.photo-band img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sheet-footer {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 2.38in minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 0.3in;
    align-items: center;
    justify-items: center;
    column-gap: 0.04in;
    padding: 0.12in 0.46in 0.13in 0.42in;
    background: var(--paper);
    text-align: center;
}

.sheet-footer::before {
    content: none;
}

.footer-brand-pair {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    width: 1.85in;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.18in;
}

.footer-grettel-logo {
    width: 0.82in;
}

.footer-uvicaland-logo {
    width: 0.82in;
}

.footer-copy {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.018in;
    transform: translateY(0.025in);
}

.footer-copy p {
    color: var(--gold);
    font-size: 5.9pt;
    font-weight: 600;
    letter-spacing: 0.24em;
    line-height: 1.3;
    text-transform: uppercase;
}

.footer-copy address {
    color: var(--muted-ink);
    font-size: 6.3pt;
    font-style: normal;
    font-weight: 600;
    line-height: 1.25;
}

.footer-copy address span::before {
    content: " / ";
    color: var(--gold);
}

@page {
    size: Letter;
    margin: 0;
}

@media print {
    :root {
        --print-scale: 0.972;
    }

    html,
    body {
        width: 8.5in;
        min-height: 11in;
        background: var(--paper);
    }

    .stage {
        width: 8.5in;
        min-height: 0;
        background: var(--paper);
    }

    .stage {
        display: block;
        padding: 0;
        overflow: hidden;
    }

    .sheet {
        width: 8.5in;
        height: 11in;
        box-shadow: none;
        transform: scale(var(--print-scale));
        transform-origin: top left;
        break-after: page;
        page-break-after: always;
    }

    .sheet:last-child {
        break-after: auto;
        page-break-after: auto;
    }

    .photo-band {
        position: relative;
        grid-row: 2;
        width: 100%;
    }

    .photo-band img {
        object-position: center center;
    }
}

@media (max-width: 880px) {
    body {
        background: #2f2c2b;
    }

    .stage {
        align-items: flex-start;
        padding: 24px 14px;
        overflow-x: auto;
    }
}

@media (max-width: 620px) {
    .stage {
        display: block;
    }

    .sheet {
        width: min(100%, 8.5in);
        height: auto;
        min-height: 0;
        grid-template-rows: auto auto;
    }

    .sheet-main {
        display: block;
        padding: 28px 22px 20px;
    }

    .product-rail {
        min-height: 390px;
        border-right: 0;
        border-bottom: 1px solid rgba(167, 148, 87, 0.42);
        padding: 0 0 20px;
        margin-bottom: 24px;
    }

    .logo-stack {
        gap: 12px;
    }

    .producer-logo {
        width: 150px;
    }

    .grettel-logo {
        width: 136px;
    }

    .bottle-figure {
        left: 16%;
        right: 11%;
        bottom: 18px;
    }

    .bottle {
        width: 360px;
    }

    .photo-band {
        position: relative;
        bottom: auto;
        height: 0.3in;
    }

    .content-panel {
        display: block;
    }

    .content-awards {
        min-height: 0;
        padding: 22px 0 0;
        gap: 24px;
        justify-content: center;
    }

    .content-award-medal {
        width: 66px;
    }

    .content-award-wide {
        width: 90px;
    }

    h1 {
        font-size: 46px;
    }

    .fact-row,
    .content-grid {
        grid-template-columns: 1fr;
    }

    .fact-row {
        gap: 14px;
    }

    .status-line {
        letter-spacing: 0.12em;
    }

    .status-line::after {
        display: none;
    }

    .content-grid {
        display: block;
    }

    .technical-column {
        margin-top: 24px;
    }

    .copy-block p,
    .side-copy p {
        font-size: 13px;
        line-height: 1.45;
    }

    .detail-line {
        font-size: 12px;
    }

    .analysis-list dt,
    .analysis-list dd {
        font-size: 12px;
    }

    .sheet-footer {
        grid-template-columns: 1fr;
        padding: 26px 22px 18px;
    }

    .sheet-footer::before {
        content: none;
    }

    .footer-brand-pair,
    .footer-copy {
        grid-column: 1;
        transform: none;
    }

    .footer-brand-pair {
        grid-row: auto;
        width: 210px;
    }

    .footer-grettel-logo,
    .footer-uvicaland-logo {
        width: 94px;
    }

    .footer-copy address span {
        display: block;
    }

    .footer-copy address span::before {
        content: "";
    }
}