:root {
  --ink: #655d26;
  --ink-soft: #81764a;
  --paper: #f6efdf;
  --paper-deep: #e8dcc0;
  --line: #746b30;
  --font-display: "P22 Art Nouveau", "Amarante", "Aubrey", fantasy;
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-small-caps: "Cormorant SC", "Cormorant Garamond", Georgia, serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  background: #b6a16f;
  color: var(--ink);
  font-family: var(--font-serif);
}

.page {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(14px, 2vw, 30px);
}

.scene,
.scene__half,
.scene__paper {
  position: absolute;
  inset: 0;
}

.scene {
  z-index: -2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #c8b37d;
}

.scene__half {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
}

.scene__half--left {
  background-image: url("assets/scene-left.webp");
  background-position: left center;
}

.scene__half--right {
  background-image: url("assets/scene-right.webp");
  background-position: right center;
}

.scene__paper {
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(circle at 30% 20%, rgb(255 247 222 / 0.12), transparent 28%),
    repeating-linear-gradient(0deg, rgb(84 69 30 / 0.025) 0 1px, transparent 1px 4px),
    linear-gradient(rgb(242 224 177 / 0.08), rgb(93 73 31 / 0.08));
  box-shadow:
    inset 0 0 0 clamp(6px, 1vw, 15px) rgb(95 79 33 / 0.55),
    inset 0 0 0 clamp(8px, 1.25vw, 19px) rgb(236 218 166 / 0.45),
    inset 0 0 0 clamp(10px, 1.48vw, 23px) rgb(95 79 33 / 0.35);
  mix-blend-mode: multiply;
}

.label {
  width: min(42vw, 650px);
  min-width: 480px;
  max-height: calc(100svh - clamp(28px, 4vw, 60px));
  aspect-ratio: 0.69;
  padding: clamp(12px, 1.2vw, 18px);
  background:
    radial-gradient(circle at 50% 5%, rgb(255 255 255 / 0.7), transparent 35%),
    linear-gradient(135deg, var(--paper), #f9f3e7 55%, var(--paper-deep));
  border: clamp(2px, 0.22vw, 4px) solid var(--line);
  border-radius: 46% 46% 32% 32% / 13% 13% 10% 10%;
  box-shadow:
    0 0 0 clamp(5px, 0.55vw, 8px) rgb(244 235 215 / 0.92),
    0 0 0 clamp(7px, 0.78vw, 12px) var(--line),
    0 24px 60px rgb(46 39 18 / 0.28);
}

.label__inner {
  height: 100%;
  border: 1px solid rgb(116 107 48 / 0.65);
  border-radius: 45% 45% 31% 31% / 13% 13% 9% 9%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8.5% 8% 5%;
  text-align: center;
}

.brand__ornament {
  display: block;
  margin-bottom: 0.1em;
  font-size: clamp(1.2rem, 1.9vw, 2rem);
}

.brand h1,
.brand p,
.product h2,
.details p {
  margin: 0;
}

.brand h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.65vw, 4.15rem);
  line-height: 0.95;
  font-weight: 400;
  letter-spacing: -0.025em;
}

.brand p {
  margin-top: 0.55em;
  font-family: var(--font-small-caps);
  font-size: clamp(0.56rem, 0.82vw, 0.84rem);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.divider {
  width: 100%;
  margin: 3.5% 0 4%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ink-soft);
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
}

.divider::after {
  background: linear-gradient(90deg, currentColor, transparent);
}

.divider span {
  font-size: clamp(0.8rem, 1.2vw, 1.25rem);
}

.product h2 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.2vw, 4.95rem);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.018em;
  text-transform: uppercase;
}

.floral-rule {
  width: 78%;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 5.5% auto 4.5%;
  color: #8f6d70;
}

.floral-rule i {
  flex: 1;
  height: 1px;
  background: currentColor;
  position: relative;
}

.floral-rule i:first-child::before,
.floral-rule i:last-child::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-50%);
}

.floral-rule i:first-child::before { left: 0; }
.floral-rule i:last-child::after { right: 0; }
.floral-rule span { font-size: clamp(1.05rem, 1.6vw, 1.7rem); }

.details {
  width: 100%;
  font-family: var(--font-small-caps);
  font-size: clamp(0.72rem, 1.08vw, 1.12rem);
  font-weight: 500;
  line-height: 1.48;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.short-rule {
  display: block;
  width: 38%;
  margin: 3% auto;
  border-top: 1px dotted var(--ink-soft);
}

.details .batch {
  margin-top: 2%;
  word-spacing: 0.45em;
}

.details .batch span {
  color: #8f6d70;
}

.label__footer {
  width: 100%;
  margin-top: auto;
  padding-top: 4.5%;
  border-top: 2px dotted rgb(101 93 38 / 0.75);
  display: grid;
  grid-template-columns: 0.9fr 1.25fr;
  gap: 4%;
  font-family: var(--font-small-caps);
  font-size: clamp(0.58rem, 0.8vw, 0.84rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
}

.label__footer > div {
  min-width: 0;
  display: flex;
  align-items: end;
  gap: 0.4em;
}

.label__footer > div + div {
  border-left: 2px solid var(--line);
  padding-left: 8%;
}

.label__footer b {
  min-width: 42px;
  flex: 1;
  border-bottom: 1px dotted var(--ink-soft);
  transform: translateY(-0.25em);
}

@media (max-aspect-ratio: 4 / 5) {
  .scene__half--left {
    background-position: 9% center;
  }

  .scene__half--right {
    background-position: 91% center;
  }

  .label {
    width: min(88vw, 470px);
    min-width: 0;
    max-height: calc(100svh - 34px);
  }

  .label__inner {
    padding-inline: 7%;
  }
}

@media (max-height: 760px) {
  .label {
    width: min(38vw, 520px);
    min-width: 390px;
  }

  .label__inner {
    padding-top: 7%;
  }

  .brand h1 {
    font-size: clamp(1.8rem, 3vw, 3rem);
  }

  .product h2 {
    font-size: clamp(1.9rem, 3.5vw, 3.7rem);
  }

  .divider {
    margin-block: 2.2%;
  }

  .floral-rule {
    margin-block: 3.5%;
  }

  .details {
    line-height: 1.38;
  }
}

@media (max-width: 520px) {
  .page {
    padding: 14px;
  }

  .scene__paper {
    box-shadow:
      inset 0 0 0 6px rgb(95 79 33 / 0.55),
      inset 0 0 0 9px rgb(236 218 166 / 0.45),
      inset 0 0 0 11px rgb(95 79 33 / 0.35);
  }

  .label {
    width: min(86vw, 390px);
    max-height: calc(100svh - 40px);
    border-radius: 42% 42% 27% 27% / 10% 10% 8% 8%;
  }

  .label__inner {
    border-radius: 41% 41% 26% 26% / 10% 10% 8% 8%;
    padding-top: 8%;
  }

  .brand h1 {
    font-size: clamp(2rem, 10.5vw, 3rem);
  }

  .product h2 {
    font-size: clamp(2rem, 10.8vw, 3.15rem);
  }

  .brand p {
    font-size: 0.48rem;
  }

  .details {
    font-size: clamp(0.57rem, 2.65vw, 0.72rem);
    letter-spacing: 0.05em;
  }

  .label__footer {
    font-size: 0.5rem;
  }
}