:root {
  --ink: #211d1d;
  --muted: #6f6762;
  --paper: #f3eee5;
  --paper-deep: #e7ded1;
  --wine: #9b0038;
  --wine-dark: #72002a;
  --line: rgba(33, 29, 29, 0.18);
  --white: #fff;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); color-scheme: light; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--paper); font-family: var(--sans); text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; }
a { color: inherit; }

.skip-link {
  position: fixed;
  z-index: 50;
  top: 1rem;
  left: 1rem;
  padding: .75rem 1rem;
  color: var(--white);
  background: var(--wine);
  border-radius: 999px;
  font-weight: 750;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform 160ms ease;
}
.skip-link:focus { transform: translateY(0); }

.holding {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(28rem, 45%) 1fr;
  background: var(--paper);
}

.holding__content {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  padding: clamp(1.6rem, 3.4vw, 3.75rem) clamp(1.4rem, 4.8vw, 5.6rem) clamp(1.5rem, 3vw, 3rem);
  display: grid;
  grid-template-rows: auto 1fr auto;
  box-shadow: 24px 0 70px rgba(38, 25, 28, .16);
}

.brand { display: flex; align-items: center; gap: 1.2rem; }
.brand__mark { width: clamp(10.8rem, 15vw, 14.5rem); height: auto; }
.brand__descriptor {
  max-width: 10rem;
  margin: 0;
  padding-left: 1.1rem;
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-size: .66rem;
  font-weight: 760;
  letter-spacing: .14em;
  line-height: 1.5;
  text-transform: uppercase;
}

.message { width: min(100%, 40rem); align-self: center; padding-block: clamp(4rem, 9vh, 7rem); }
.eyebrow {
  margin: 0 0 1.5rem;
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--wine);
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.eyebrow span { width: 2rem; height: 1px; display: inline-block; background: currentColor; }

h1 {
  max-width: 10ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.4rem, 6.7vw, 7.1rem);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .94;
  text-wrap: balance;
}

.lede {
  max-width: 39rem;
  margin: clamp(1.8rem, 4vw, 2.6rem) 0 0;
  color: var(--muted);
  font-family: var(--serif);
  font-size: clamp(1.12rem, 1.55vw, 1.35rem);
  line-height: 1.65;
}

.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(2rem, 4vw, 2.8rem); }
.button {
  min-height: 3.35rem;
  padding: .95rem 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 820;
  letter-spacing: .075em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 160ms ease, background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.button--primary { color: var(--white); background: var(--wine); box-shadow: 0 14px 34px rgba(114, 0, 42, .21); }
.button--secondary { color: var(--ink); border-color: var(--line); background: rgba(255,255,255,.22); }
.button:hover { transform: translateY(-2px); }
.button--primary:hover { background: var(--wine-dark); }
.button--secondary:hover { border-color: rgba(33,29,29,.5); background: rgba(255,255,255,.65); }
.button:focus-visible, .skip-link:focus-visible { outline: 3px solid var(--wine); outline-offset: 4px; }

.shop-note { max-width: 34rem; margin: 1rem 0 0; color: #817771; font-size: .75rem; line-height: 1.55; }

.holding-footer {
  padding-top: 1.2rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  border-top: 1px solid var(--line);
  color: #817771;
  font-size: .71rem;
  letter-spacing: .04em;
  line-height: 1.5;
}
.holding-footer p { margin: 0; }

.holding__visual { position: relative; min-height: 100svh; overflow: hidden; background: #37232a; }
.holding__visual picture, .holding__visual picture img { width: 100%; height: 100%; }
.holding__visual picture img { object-fit: cover; object-position: 57% center; }
.visual__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,8,12,.07), rgba(20,8,12,.24) 60%, rgba(20,8,12,.68));
}
.visual__caption {
  position: absolute;
  right: clamp(1.5rem, 4vw, 4rem);
  bottom: clamp(1.5rem, 3vw, 3rem);
  display: flex;
  gap: 1rem;
  color: rgba(255,255,255,.82);
  font-size: .67rem;
  font-weight: 720;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.visual__caption span + span { padding-left: 1rem; border-left: 1px solid rgba(255,255,255,.45); }
.visual__bottle {
  position: absolute;
  z-index: 2;
  left: clamp(1.25rem, 3vw, 3.5rem);
  bottom: -7.5rem;
  width: clamp(8rem, 16vw, 13rem);
  height: auto;
  filter: drop-shadow(0 24px 34px rgba(0,0,0,.42));
  transform: rotate(-2deg);
}

@media (max-width: 74rem) {
  .holding { grid-template-columns: minmax(25rem, 51%) 1fr; }
  .visual__bottle { width: 9rem; bottom: -5rem; }
}

@media (max-width: 47.99rem) {
  .holding { min-height: 100svh; display: flex; flex-direction: column; }
  .holding__visual { order: -1; min-height: clamp(18rem, 42svh, 29rem); }
  .holding__visual picture img { object-position: 61% center; }
  .visual__bottle { width: 7.4rem; bottom: -3.8rem; left: auto; right: 1rem; }
  .visual__caption { left: 1.2rem; right: auto; bottom: 1.15rem; }
  .holding__content { min-height: auto; padding: 1.4rem 1.25rem 1.4rem; box-shadow: 0 -20px 60px rgba(38,25,28,.12); }
  .brand__mark { width: 10.4rem; }
  .brand__descriptor { font-size: .58rem; }
  .message { padding-block: 3.75rem 3.5rem; }
  h1 { max-width: 11ch; font-size: clamp(3.05rem, 14vw, 5.2rem); }
  .lede { font-size: 1.08rem; }
  .actions, .button { width: 100%; }
  .holding-footer { align-items: flex-start; flex-direction: column; gap: .35rem; }
}

@media (max-width: 24rem) {
  .brand__descriptor { display: none; }
  .message { padding-top: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}