@font-face { font-family: "Plex Mono"; font-weight: 200; font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-latin-200-normal.woff2") format("woff2"); }
@font-face { font-family: "Plex Mono"; font-weight: 400; font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Plex Mono"; font-weight: 600; font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); }

:root {
  --ink: #231f20;    /* the label's black, from the print file */
  --paper: #dad3bf;  /* average of the Martelle Ivory sample */
  --page: #f1ecdf;   /* a calm surface for the label to sit on */
  --red: #c9281d;    /* the tablecloth, darkened enough for text on top */
  --stock: var(--paper) url("assets/paper.webp") 0 0 / 640px;
}

* { box-sizing: border-box; }

html { background: var(--page); }

body {
  margin: 0;
  color: var(--ink);
  font: 400 16px / 1.55 "Plex Mono", ui-monospace, monospace;
}

/* Wide screens: the label on the left, the invitation beside it. */
.page {
  min-height: 100svh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(56px, 8vw, 120px);
  padding: 32px;
}

/* The label is laid out in printed points: --u is one point on the 206.93pt wide
   (73 mm) trim, so the whole thing scales together like the printed sticker. */
.label {
  flex: none;
  container-type: inline-size;
  width: clamp(320px, calc((100svh - 64px) * 0.455), 460px);
}

.sheet {
  --u: calc(100cqw / 206.93);
  overflow: hidden;
  border-radius: calc(var(--u) * 5.85);
  padding-top: calc(var(--u) * 17.9);
  padding-bottom: calc(var(--u) * 14);
  background: var(--stock);
  box-shadow: 0 1px 2px rgb(60 50 30 / .25), 0 14px 36px rgb(60 50 30 / .18);
  font-size: calc(var(--u) * 8);
  line-height: calc(var(--u) * 10.4);
  text-align: center;
}

:where(.sheet p, .logo, .order h2, .order p, .sizes) { margin: 0; }

.origin { letter-spacing: .07em; }

.logo { margin-top: calc(var(--u) * 18.5); }
.logo img { display: block; width: calc(var(--u) * 151.2); height: auto; margin: 0 auto; }

.kind {
  margin-top: calc(var(--u) * 15.8);
  line-height: calc(var(--u) * 10);
  font-weight: 600;
  letter-spacing: .194em;
}

.motto { margin-top: calc(var(--u) * 5); line-height: calc(var(--u) * 11); }

/* No white ink on the real label: the white of the art is the paper itself. */
.art {
  display: block;
  width: 100%;
  height: auto;
  margin-top: calc(var(--u) * 3.84);
  mix-blend-mode: multiply;
}

.grove { margin-top: calc(var(--u) * 10.2); line-height: calc(var(--u) * 11); }

/* The invitation */
.order { flex: 0 1 400px; }

.order h2 {
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.lede { margin-top: 20px; font-size: 17px; }

.sizes {
  display: flex;
  margin-top: 36px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  letter-spacing: .12em;
}
.sizes li { padding-right: 28px; }
.sizes li + li { padding-left: 28px; border-left: 1px solid var(--ink); }
.vol {
  display: block;
  font-size: 44px;
  font-weight: 200;
  line-height: 1.1;
  letter-spacing: -.1em;
}

.cta {
  display: block;
  margin-top: 36px;
  padding: 18px 24px;
  border-radius: 6px;
  background: var(--red);
  color: #f8f3e7;
  font-weight: 600;
  letter-spacing: .16em;
  text-align: center;
  text-decoration: none;
  transition: background-color .15s;
}
.cta:hover { background: #a92017; }
.cta:focus-visible, .address a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.address { margin-top: 18px; font-size: 15px; text-align: center; }
.address a { color: inherit; font-weight: 600; overflow-wrap: anywhere; }

/* Narrow screens: label, then invitation, with the button always in reach. */
@media (max-width: 819px) {
  .page {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    padding: 32px 0 0;
  }
  .label { width: min(420px, calc(100% - 32px)); }
  .order { display: contents; }

  .order h2, .lede, .sizes, .address { padding-inline: 24px; text-align: center; }
  .order h2 { margin-top: 48px; }
  .lede { max-width: 440px; }
  .sizes { justify-content: center; }

  .cta {
    position: sticky;
    bottom: 0;
    z-index: 1;
    align-self: stretch;
    border-radius: 0;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }
  .address { margin-block: 24px 32px; }
}

/* Phones: the screen is the label. */
@media (max-width: 480px) {
  html { background: var(--stock); }
  .page { padding-top: 0; }
  .label { width: 100%; }
  .sheet { border-radius: 0; box-shadow: none; background: none; }
}