@font-face{
  font-family:"Gambarino";
  src:url("fonts/Gambarino-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Cabinet";
  src:url("fonts/CabinetGrotesk-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Cabinet";
  src:url("fonts/CabinetGrotesk-Medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Cabinet";
  src:url("fonts/CabinetGrotesk-Bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}

:root{
  --orange:#C8481E;
  --ink:#20140C;
  --cream:#EFE0BF;
  --cream-2:#E7D4A9;
  --oxblood:#7A1A10;
  --bottle:#2C4632;   /* the slightly-wrong green, for the crest */
  --edge:.14rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"Cabinet",system-ui,sans-serif;
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.filters{position:absolute;width:0;height:0}

/* paper grain over everything */
body::after{
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;
  filter:url(#grain);opacity:.5;mix-blend-mode:multiply;
}
/* aged blotching on the paper */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 50% at 80% 8%, #00000014, #0000 60%),
    radial-gradient(70% 60% at 12% 92%, #00000018, #0000 60%),
    radial-gradient(40% 30% at 30% 40%, #ffffff20, #0000 70%);
}

a{color:inherit}

/* ---- the bottle / poster field ---- */
.bottle{
  position:relative;
  min-height:100svh;
  padding:clamp(14px,5vw,40px);
  display:flex;
  align-items:stretch;
  z-index:1;
}

.label{
  position:relative;
  flex:1;
  background:var(--orange);
  color:var(--cream);
  border:var(--edge) solid var(--ink);
  outline:2px solid var(--orange);
  outline-offset:calc(var(--edge) * -1 - 4px);
  box-shadow:0 0 0 1px #00000040, 6px 8px 0 #00000030;
  padding:clamp(22px,7vw,48px) clamp(14px,4.5vw,54px) clamp(20px,6vw,40px);
  overflow:hidden;
  isolation:isolate;
}
/* engraved inner rule frame */
.label::before{
  content:"";position:absolute;inset:8px;
  border:1px solid #00000055;
  box-shadow:inset 0 0 0 3px var(--orange), inset 0 0 0 4px #00000040;
  pointer-events:none;z-index:2;
}
/* faint ink wash so the orange looks printed, not digital */
.label::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, #ffffff22, #0000 55%),
    radial-gradient(120% 90% at 50% 120%, #4a140055, #0000 55%);
  mix-blend-mode:multiply;opacity:.8;
}
.label>*{position:relative;z-index:3}

/* ---- top line ---- */
.topline{
  margin:0 0 .3em;
  text-align:center;
  font-weight:500;
  letter-spacing:.42em;
  text-transform:uppercase;
  font-size:clamp(9px,2.9vw,13px);
  padding-left:.42em;
  color:var(--cream);
}
.topline::before,.topline::after{content:"\2014 ";opacity:.7} /* decorative dashes only, not em-dash copy */
/* use small ornaments instead of em dashes in text: */
.topline::before{content:"\273B  "}
.topline::after{content:"  \273B"}

/* ---- brand wordmark ---- */
.brand{
  margin:.1em 0 0;
  text-align:center;
  font-family:"Gambarino",serif;
  font-weight:400;
  font-size:clamp(34px,12.5vw,66px);
  line-height:.9;
  letter-spacing:-.01em;
  color:var(--cream);
  text-shadow:2px 2px 0 var(--oxblood);
}

/* ---- hero product noun ---- */
.product{
  margin:.04em 0 0;
  text-align:center;
  line-height:.82;
}
.product__word{
  display:block;
  font-family:"Gambarino",serif;
  font-weight:400;
  font-size:clamp(52px,17vw,150px);
  letter-spacing:-.045em;
  text-transform:uppercase;
  color:var(--cream);
  /* riso misregistration */
  text-shadow:
    .04em .045em 0 var(--bottle),
    -.02em -.02em 0 var(--oxblood);
  text-wrap:balance;
}

/* ---- aged 26 years ---- */
.aged{
  margin:.15em auto 0;
  width:max-content;
  max-width:100%;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.28em;
  padding-left:.28em;
  font-size:clamp(11px,3.6vw,16px);
  font-weight:500;
  color:var(--ink);
  background:var(--cream);
  padding:.5em 1em .42em;
  border:1.5px solid var(--ink);
  box-shadow:3px 3px 0 var(--oxblood);
  transform:rotate(-1.2deg);
}
.aged em{
  font-style:normal;
  font-family:"Gambarino",serif;
  font-size:1.55em;
  letter-spacing:0;
  color:var(--oxblood);
  vertical-align:-.06em;
}

/* ---- crest, overlapping top-left, off-axis ---- */
.crest{
  position:absolute;
  top:clamp(168px,48vw,230px);right:-6px;left:auto;
  width:clamp(56px,16vw,104px);height:auto;
  z-index:4;
  transform:rotate(8deg);
  filter:url(#rough);
}
.crest__shield{fill:var(--bottle);stroke:var(--cream);stroke-width:3}
.crest__cutlery{fill:none;stroke:var(--cream);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.crest__word{
  fill:var(--cream);font-family:"Cabinet";font-weight:700;
  font-size:12px;letter-spacing:.02em;text-anchor:middle;
}

/* ---- directions ---- */
.directions{
  margin:clamp(26px,8vw,44px) 0 0;
  max-width:34ch;
}
.directions h2{
  margin:0 0 .5em;
  font-family:"Cabinet";
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:clamp(15px,4.6vw,20px);
  color:var(--ink);
  border-bottom:2px solid var(--ink);
  padding-bottom:.25em;
}
.directions p{
  margin:0;
  font-size:clamp(15px,4.4vw,18px);
  line-height:1.5;
  color:var(--cream);
  text-align:justify;
  hyphens:auto;
}
.directions .contains{
  margin-top:.9em;
  font-style:italic;
  font-size:clamp(13px,3.8vw,15px);
  color:var(--ink);
  text-align:left;
  hyphens:manual;
}

/* ---- guarantee / rsvp ---- */
.guarantee{
  position:relative;
  margin:clamp(26px,8vw,42px) 0 0;
  border-top:1px dashed #00000066;
  padding-top:clamp(18px,5vw,26px);
}
.guarantee__line{
  margin:0 0 .6em;
  max-width:26ch;
  font-size:clamp(13px,3.8vw,15px);
  color:var(--cream);
}
.sign{
  display:inline-flex;
  flex-direction:column;
  gap:.1em;
  min-height:52px;
  padding:.25em .7em .35em .2em;
  text-decoration:none;
  border-bottom:3px solid var(--oxblood);
  transition:transform .18s ease;
}
.sign__hand{
  font-family:"Gambarino",serif;
  font-size:clamp(30px,10vw,62px);
  line-height:.8;
  color:var(--oxblood);
  transform:rotate(-4deg);
  transform-origin:left bottom;
}
.sign__sub{
  align-self:flex-start;
  text-transform:uppercase;
  letter-spacing:.24em;
  padding-left:.24em;
  font-size:clamp(10px,3vw,12px);
  font-weight:700;
  color:var(--ink);
  margin-top:.35em;
}
.sign:hover,.sign:focus-visible{transform:translateX(4px) rotate(-.5deg)}
.sign:focus-visible{outline:3px solid var(--ink);outline-offset:6px}

/* wax seal */
.seal{
  position:absolute;
  right:clamp(-2px,1vw,10px);top:clamp(-34px,-9vw,-22px);
  width:clamp(54px,15vw,86px);height:clamp(54px,15vw,86px);
  display:grid;place-items:center;
  background:radial-gradient(circle at 38% 34%, #9a281a, var(--oxblood) 62%, #5e130c);
  color:var(--cream);
  border-radius:48% 52% 55% 45% / 52% 46% 54% 48%;
  transform:rotate(11deg);
  box-shadow:2px 3px 6px #0000004d, inset 0 0 0 2px #ffffff26, inset 0 0 12px #00000055;
  text-align:center;
  font-family:"Cabinet";font-weight:700;
  font-size:clamp(11px,3.2vw,14px);
  letter-spacing:.04em;line-height:1;
  text-transform:uppercase;
}

/* ---- small print footer ---- */
.smallprint{
  margin-top:clamp(22px,6vw,34px);
  display:flex;flex-wrap:wrap;gap:.4em 1.4em;
  align-items:baseline;
  font-size:clamp(11px,3vw,12.5px);
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--ink);
}
.smallprint a{
  color:var(--cream);
  text-decoration:none;
  border-bottom:1.5px solid var(--cream);
  padding-bottom:1px;
  min-height:24px;display:inline-flex;align-items:center;
}
.smallprint a:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* ---- diagonal neck wrap, bleeds off top-right corner ---- */
.wrap{
  position:absolute;
  top:clamp(4px,3vw,22px);right:clamp(-58px,-14vw,-30px);left:auto;z-index:20;
  width:min(60vw,246px);
  transform:rotate(41deg);
  transform-origin:center center;
  background:var(--cream-2);
  color:var(--ink);
  border:1.5px solid var(--ink);
  box-shadow:0 3px 10px #00000040;
  padding:.55em 3.2em;
  text-align:center;
  filter:url(#rough);
}
.wrap span{display:block;line-height:1.05}
.wrap__a{
  font-family:"Gambarino",serif;
  font-size:clamp(17px,5vw,26px);
}
.wrap__b{
  text-transform:uppercase;
  letter-spacing:.22em;padding-left:.22em;
  font-size:clamp(8px,2.4vw,11px);
  font-weight:700;
  margin-top:.1em;
}

/* ---- shake well stamp, overlapping bottom, rotated ---- */
.stamp{
  position:absolute;
  z-index:21;
  right:clamp(6px,4vw,40px);
  bottom:clamp(2px,3vw,26px);
  width:clamp(74px,22vw,120px);height:clamp(74px,22vw,120px);
  display:grid;place-items:center;
  border:3px double var(--oxblood);
  border-radius:50%;
  color:var(--oxblood);
  transform:rotate(-16deg);
  opacity:.9;
  filter:url(#rough);
  background:radial-gradient(circle, #efe0bf00 40%, #efe0bf22 100%);
}
.stamp span{
  font-family:"Gambarino",serif;
  font-size:clamp(18px,5.6vw,30px);
  line-height:.85;text-align:center;
  text-transform:uppercase;
}

/* =================== DESKTOP =================== */
@media (min-width:820px){
  .bottle{align-items:center;padding:clamp(30px,4vw,64px)}
  .label{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    grid-template-areas:
      "top      top"
      "brand    brand"
      "hero     hero"
      "aged     aged"
      "dir      guar"
      "foot     foot";
    column-gap:clamp(30px,4vw,60px);
    row-gap:0;
    align-items:start;
    max-width:1120px;margin:0 auto;
    min-height:min(86svh,760px);
  }
  .topline{grid-area:top;text-align:left;padding-left:0}
  .topline::before{content:"\273B  "}
  .brand{grid-area:brand;text-align:left;font-size:clamp(60px,7vw,104px);margin-top:.12em}
  .product{grid-area:hero;text-align:left;margin-top:-.02em}
  .product__word{font-size:clamp(120px,15.5vw,215px)}
  .aged{grid-area:aged;margin:.2em 0 0;transform:rotate(-1.4deg)}
  .directions{grid-area:dir;margin-top:clamp(30px,4vw,50px);align-self:end}
  .guarantee{grid-area:guar;margin-top:clamp(30px,4vw,50px);border-top:none;padding-top:0;align-self:end}
  .guarantee::before{
    content:"";position:absolute;left:calc(-1 * clamp(15px,2vw,30px));top:0;bottom:10%;
    border-left:1px dashed #00000066;
  }
  .smallprint{grid-area:foot;margin-top:clamp(30px,4vw,48px);border-top:1px solid #00000055;padding-top:1em}
  .crest{top:auto;bottom:clamp(150px,20vw,210px);left:auto;right:clamp(24px,4vw,56px);width:clamp(90px,9vw,120px)}
  .seal{top:auto;bottom:100%;right:0;transform:translateY(40%) rotate(11deg)}
  .stamp{right:auto;left:clamp(30px,20vw,300px);bottom:clamp(30px,5vw,60px)}
  .wrap{width:min(30vw,360px)}
}

/* =================== REDUCED MOTION =================== */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}
/* entrance settle, disabled above when reduced */
@media (prefers-reduced-motion:no-preference){
  .wrap{animation:settle .9s cubic-bezier(.2,.9,.25,1) both}
  .stamp{animation:thud .6s .35s ease-out both}
  @keyframes settle{
    from{transform:rotate(49deg)}
    60%{transform:rotate(38deg)}
    to{transform:rotate(41deg)}
  }
  @keyframes thud{
    from{opacity:0;transform:rotate(-16deg) scale(1.5)}
    to{opacity:.9;transform:rotate(-16deg) scale(1)}
  }
}