:root{
  --red:#C8210C; --bone:#E9E6D6; --ink:#111111; --paper:#F4F2E8;
  --display:'Anton',Impact,'Arial Narrow',sans-serif;
  --body:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --wrap:1440px; --hdr:68px;
}
*{box-sizing:border-box}
/* Inputs are 16px on purpose: below that iOS Safari zooms the page on focus
   and leaves it panned sideways. The clip is the second lock, and it is clip
   rather than hidden so position:sticky keeps working. */
html,body{overflow-x:clip;max-width:100%}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.6;font-weight:600;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--red);text-decoration:none}
a:hover{color:var(--ink)}
::selection{background:var(--red);color:var(--bone)}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-transform:uppercase;
  letter-spacing:.01em;line-height:.92}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(18px,3.5vw,56px)}
.kicker{font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.24em;
  text-transform:uppercase}

.hdr{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent;
  color:var(--ink);transition:background .3s ease,color .3s ease}
.hdr.on-red{color:var(--bone)}
.hdr.solid{background:var(--ink);color:var(--bone)}
.hdr .nav a,.hdr .mark{color:currentColor}
.hdr .nav a[aria-current="true"]{text-decoration:underline;text-underline-offset:5px}
.hdr .nav .sep{opacity:.45}
.hdr .wrap{height:var(--hdr);display:flex;align-items:center;justify-content:space-between;gap:16px}
.mark{font-family:var(--display);font-size:clamp(19px,2vw,26px);letter-spacing:.02em;
  text-transform:uppercase;
  background:none;border:0;padding:0;cursor:pointer}
.mark:hover{color:var(--red)}
.hdr.on-red .mark:hover{color:var(--ink)}
.nav{display:flex;gap:clamp(12px,2vw,30px);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;flex-wrap:wrap}
.nav a:hover{color:var(--red)}
.hdr.on-red .nav a:hover{color:var(--ink)}
.burger{display:none;background:none;border:0;padding:10px 2px;cursor:pointer;
  color:inherit;-webkit-text-fill-color:currentColor;
  flex-direction:column;justify-content:center;gap:5px;width:34px}
.burger span{display:block;height:2px;width:23px;background:currentColor;
  transition:transform .2s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* The hero is a slider, not a fade: four panels sit side by side on one track
   and the track slides. The giant word does the work, so there is no small
   eyebrow above it, and the only link out of a panel points further down this
   page. Buying happens in the pour sections. */
.hero{position:relative;overflow:hidden;background:var(--bone);
  height:clamp(560px,100svh,1000px)}
.track{display:flex;height:100%;width:400%;
  transition:transform .72s cubic-bezier(.65,.02,.25,1)}
.panel{width:25%;height:100%;flex:0 0 25%;position:relative;display:flex;
  flex-direction:column;justify-content:flex-start;overflow:hidden;
  padding:calc(var(--hdr) + clamp(6px,2vh,22px) + 50px) clamp(18px,3.5vw,56px) clamp(60px,8vh,86px)}
.panel.red{background:var(--red);color:var(--bone)}
.panel.bone{background:var(--bone);color:var(--ink)}
.panel-word{font-family:var(--display);font-size:clamp(70px,15.2vw,268px);line-height:.82;
  letter-spacing:-.01em;white-space:nowrap;transform:scaleY(1.28);transform-origin:50% 42%;
  text-align:center;color:var(--red);pointer-events:none;user-select:none}
.panel.red .panel-word{color:var(--bone)}
.panel.on .panel-word{animation:wb-word .92s cubic-bezier(.18,1.5,.3,1) both}
/* Overshoot in the easing, so the word lands and settles instead of sliding
   to a stop. That bounce is what the draft had and what was missing. */
@keyframes wb-word{
  0%{transform:scale(1.9) scaleY(1.28)}
  62%{transform:scale(.955) scaleY(1.28)}
  100%{transform:scale(1) scaleY(1.28)}}
.panel-mid{position:relative;z-index:2;flex:1 1 auto;min-height:0;display:flex;
  flex-direction:column;align-items:center;justify-content:flex-start;gap:clamp(14px,3vh,30px);
  margin-top:clamp(-190px,-15vh,-70px)}
.panel-art{height:clamp(180px,42vh,430px);width:auto;max-width:none;object-fit:contain}
.panel.on .panel-mid{animation:wb-in .62s .1s cubic-bezier(.2,.7,.2,1) both}
.panel-foot{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(18px,4vw,60px);
  align-items:start;padding-top:clamp(14px,2.4vh,26px);border-top:2px solid currentColor}
.panel-foot p{font-size:clamp(13.5px,1.05vw,16px);line-height:1.5;margin:0;max-width:52ch}
.panel-foot .right{text-align:right}
.panel-foot .right p{margin-left:auto}
.panel.on .panel-foot{animation:wb-in .62s .2s cubic-bezier(.2,.7,.2,1) both}
@keyframes wb-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.hero-dots{position:absolute;z-index:5;right:clamp(10px,1.4vw,22px);top:50%;
  transform:translateY(-50%);display:flex;flex-direction:column;gap:9px}
.dot{width:11px;height:11px;padding:0;cursor:pointer;background:transparent;
  border:2px solid currentColor;color:inherit}
.dot[aria-selected="true"]{background:currentColor;height:26px}
.hero-arrows{position:absolute;z-index:5;left:50%;bottom:clamp(12px,2.4vh,26px);
  transform:translateX(-50%);display:flex;gap:10px}
.arrow{width:46px;height:34px;border:2px solid currentColor;background:transparent;
  color:inherit;font-size:17px;line-height:1;cursor:pointer;font-family:var(--body)}
.arrow:hover{background:currentColor}
.arrow:hover span{color:var(--bone);mix-blend-mode:difference}

.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--body);
  font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  padding:16px 26px;border:2px solid var(--red);cursor:pointer;white-space:nowrap;
  transition:background .16s ease,color .16s ease,border-color .16s ease}
.btn-fill{background:var(--red);color:var(--bone);border-color:var(--red)}
.btn-fill:hover{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.btn-line{background:transparent;color:currentColor;border-color:currentColor}
.btn-line:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}

/* the four pours */
.pour{padding:clamp(44px,6vw,92px) 0;border-top:4px solid var(--ink)}
.pour.red{background:var(--red);color:var(--bone)}
/* Vermilion on vermilion read as a line of text, not a control. On the red
   panels the buy button goes black. */
.pour.red .btn-fill{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.pour.red .btn-fill:hover{background:var(--bone);border-color:var(--bone);color:var(--ink)}
.pour.red .btn-line{border-color:var(--bone);color:var(--bone)}
.pour.red .btn-line:hover{background:var(--bone);color:var(--red)}
.pour.bone{background:var(--bone)}
.pour .wrap{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr);
  gap:clamp(24px,4vw,68px);align-items:center}
.pour-shot{display:flex;align-items:center;justify-content:center;position:relative}
.pour-shot img{height:clamp(300px,52vh,500px);width:auto;max-width:none;object-fit:contain;
  filter:drop-shadow(0 20px 36px rgba(17,17,17,.3))}
.pour h2{font-size:clamp(34px,5.4vw,88px);margin:12px 0 0}
.pour .meta{font-family:var(--body);font-weight:700;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;margin-top:16px;opacity:.85}
.pour p.body{font-size:clamp(15.5px,1.25vw,19px);line-height:1.55;margin:18px 0 0;max-width:50ch}
.pour blockquote{margin:22px 0 0;padding-left:18px;border-left:4px solid currentColor;
  font-size:clamp(14px,1.05vw,16px);line-height:1.5;max-width:52ch;font-weight:600;opacity:.9}
.pour blockquote cite{display:block;font-style:normal;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;margin-top:10px;opacity:.8}
.facts{display:flex;gap:clamp(16px,2.4vw,38px);flex-wrap:wrap;margin-top:24px;
  padding-top:18px;border-top:2px solid currentColor}
.fact b{font-family:var(--display);font-size:clamp(22px,2.4vw,34px);font-weight:400;display:block}
.fact span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.75;
  margin-top:3px;display:block}
.tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px}
.tag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  padding:7px 11px;border:2px solid currentColor}
.loyto{position:absolute;right:0;top:4px;transform:rotate(-4deg);text-align:center;
  border:3px solid currentColor;padding:9px 14px;background:transparent}
.loyto b{display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(19px,2.2vw,30px);line-height:1;letter-spacing:.01em}
.loyto span{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  margin-top:5px;opacity:.85}

/* Terms page. Long-form reading, so the measure is short and the type is set
   in the body face rather than the poster face. */
.terms{padding:clamp(34px,5vw,72px) 0 clamp(50px,7vw,96px)}
.terms h1{font-size:clamp(32px,5.4vw,76px);margin:14px 0 0}
.terms h2{font-family:var(--body);font-weight:700;font-size:15px;letter-spacing:.14em;
  text-transform:uppercase;margin:34px 0 0;color:var(--red)}
.terms .lead{font-size:clamp(15.5px,1.3vw,18px);line-height:1.6;margin:20px 0 0;max-width:58ch}
.terms p{font-size:15.5px;line-height:1.7;margin:12px 0 0;max-width:66ch;font-weight:400}
.terms ul{margin:12px 0 0;padding-left:20px;max-width:66ch}
.terms li{font-size:15.5px;line-height:1.7;margin:8px 0 0;font-weight:400}

/* Signup. Double opt-in, so the address is not stored until the confirmation
   mail is answered, and the form says so rather than implying instant entry. */
.signup{margin-top:20px;max-width:520px}
.signup-row{display:flex;gap:10px;flex-wrap:wrap}
.signup input[type=email]{flex:1 1 220px;min-width:0;font-family:var(--body);
  font-weight:600;font-size:16px;padding:15px 16px;border:2px solid currentColor;
  background:var(--bone);color:var(--ink)}
.signup input[type=email]::placeholder{color:rgba(17,17,17,.45)}
.signup-ok{display:flex;gap:10px;align-items:flex-start;margin-top:14px;
  font-size:13.5px;line-height:1.45;cursor:pointer}
.signup-ok input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--red);margin:1px 0 0}
.signup-out{margin:12px 0 0;font-size:13.5px;line-height:1.5;min-height:1px}

/* Nearest Alko. Fed by our own store scan, so it answers with the shops that
   actually have the bottle on the shelf, not a link into a search that errors. */
.finder{margin-top:22px;max-width:520px}
.finder-row{display:flex;gap:10px;flex-wrap:wrap}
.finder input{font-family:var(--body);font-weight:700;font-size:16px;letter-spacing:.16em;
  width:120px;padding:15px 16px;border:2px solid currentColor;background:var(--bone);
  color:var(--ink)}
.finder input::placeholder{color:rgba(17,17,17,.45)}
.finder-out{margin-top:14px;font-size:14px;line-height:1.5}
.finder-out ol{margin:0;padding:0;list-style:none}
.finder-out li{padding:9px 0;border-bottom:2px solid currentColor}
.finder-out li:last-child{border-bottom:0}
.finder-out b{display:block;font-size:15px}
.finder-out em{font-style:normal;opacity:.8;font-size:13px}
.finder-note{font-size:12px;line-height:1.5;opacity:.75;margin-top:10px}

/* Age gate. K-18 is a legal requirement, not decoration; the answer lives in
   this browser and goes nowhere else. */
.gate{position:fixed;inset:0;z-index:200;background:var(--bone);color:var(--ink);
  display:flex;align-items:center;justify-content:center;padding:clamp(20px,5vw,60px)}
.gate-in{max-width:640px}
.gate .kicker{color:var(--red)}
.gate h2{font-size:clamp(34px,6vw,84px);margin:14px 0 0}
.gate p{font-size:clamp(15px,1.3vw,18px);line-height:1.5;margin:18px 0 0;max-width:48ch}
.gate .cta{margin-top:28px}
.gate small{display:block;font-size:12.5px;line-height:1.5;opacity:.7;margin-top:22px;
  max-width:48ch}
html.gated body{overflow:hidden}

/* what's up */
.sec{padding:clamp(44px,6vw,92px) 0;border-top:4px solid var(--ink)}
.sec-ink{background:var(--ink);color:var(--bone)}
.sec h2{font-size:clamp(30px,4.4vw,70px);margin:12px 0 0}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:clamp(24px,4vw,60px);align-items:start;margin-top:clamp(22px,3vw,38px)}
.two p{font-size:clamp(15.5px,1.2vw,18px);line-height:1.6;margin:0;max-width:52ch}
.rows{display:grid;gap:0;margin-top:8px}
.row{display:flex;justify-content:space-between;gap:18px;padding:15px 0;
  border-bottom:2px solid rgba(233,230,214,.25);font-size:14.5px}
.row b{font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:12px;opacity:.8}
.arvonta{border:4px solid currentColor;padding:clamp(22px,3vw,38px);margin-top:clamp(24px,3vw,40px)}
.arvonta h3{font-size:clamp(24px,3vw,44px)}
.arvonta p{margin-top:14px;max-width:56ch}
.small{font-size:12.5px;line-height:1.55;opacity:.75;margin-top:14px;max-width:56ch;font-weight:600}

.ftr{background:var(--ink);color:var(--bone);border-top:4px solid var(--red)}
.ftr .wrap{padding:clamp(34px,4.5vw,64px) clamp(18px,3.5vw,56px);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:28px}
.ftr a{color:var(--bone);display:block;font-size:14px;line-height:1.9}
.ftr a:hover{color:var(--red)}
.ftr p{font-size:13px;line-height:1.6;margin:12px 0 0;color:rgba(233,230,214,.7);font-weight:600}
.legal{font-size:12px;line-height:1.6;color:rgba(233,230,214,.6);max-width:38ch;font-weight:600}

@media (max-width:900px){
  /* The panel keeps more room above the word and gives half of it back from
     under the button, so the word drops to about the stem of the glass. */
  .panel{padding:calc(var(--hdr) + clamp(46px,8vh,78px)) clamp(16px,4vw,28px)
         clamp(30px,4.5vh,46px)}
  /* The word belongs OVER the art here, crossing it low. Stacked above it the
     art simply covered it. */
  /* Each word wants a different height against its own drawing. The first
     three rise by about one letter-height; the glass keeps its place. */
  .panel-word{position:absolute;left:0;right:0;top:46%;z-index:1;
    font-size:clamp(54px,17vw,120px);
    transform:scaleY(1.28) translateY(-50%);transform-origin:50% 0}
  .panel.on .panel-word{animation:wb-word-m .92s cubic-bezier(.18,1.5,.3,1) both}
  @keyframes wb-word-m{
    0%{transform:scale(1.9) scaleY(1.28) translateY(-50%)}
    62%{transform:scale(.955) scaleY(1.28) translateY(-50%)}
    100%{transform:scale(1) scaleY(1.28) translateY(-50%)}}
  .panel:nth-child(-n+3) .panel-word{top:calc(46% - .92em)}
  .panel:nth-child(4) .panel-word{top:calc(46% + 10px)}
  .panel-mid{margin-top:0;z-index:2;justify-content:center;flex:1 1 auto;
    gap:clamp(16px,3.5vh,34px)}
  .panel-art{height:clamp(170px,34vh,300px)}
  .panel-foot{grid-template-columns:1fr 1fr;gap:14px}
  .panel-foot p{font-size:13px}
  .pour .wrap{grid-template-columns:1fr;gap:24px}
  .pour-shot{min-height:clamp(240px,36vh,340px)}
  .pour-shot img{height:clamp(240px,36vh,340px)}
  /* A bottle lying at an angle reads as a poster, not a catalogue shot. */
  .pour:nth-of-type(1) .pour-shot img{transform:rotate(-42deg)}
  .pour:nth-of-type(2) .pour-shot img{transform:rotate(-38deg)}
  .pour:nth-of-type(3) .pour-shot img{transform:rotate(42deg)}
  .pour:nth-of-type(4) .pour-shot img{transform:rotate(90deg)}
  /* A bottle on its side puts the badge over the neck, where it vanishes.
     It goes to the top right instead, and the shot gets padding so the
     rotated bottle stops touching the left edge. */
  .pour-shot{padding:0 clamp(14px,5vw,30px)}
  .loyto{position:absolute;right:clamp(6px,3vw,18px);top:0;left:auto;
    transform:rotate(4deg);padding:7px 11px;border-width:2px}
  .loyto b{font-size:clamp(16px,4.6vw,24px)}
  .loyto span{font-size:9px;letter-spacing:.12em}
  .btn{font-size:13px;padding:15px 22px}
  section[id],div[id]{scroll-margin-top:calc(var(--hdr) + 12px)}
}
@media (max-width:760px){
  .burger{display:flex}
  .hdr .nav{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;
    align-items:stretch;gap:0;padding:4px 0;background:var(--ink)}
  .hdr .nav.open{display:flex}
  /* The panel is ink, but the links inherit the header's colour, which is ink
     on a bone panel. They were black on black. Force the bone here. */
  .hdr .nav a,.hdr.on-red .nav a{padding:16px clamp(18px,5vw,26px);font-size:14px;
    color:var(--bone);border-bottom:2px solid rgba(233,230,214,.2)}
  .hdr .nav a:hover,.hdr.on-red .nav a:hover{color:var(--red)}
  .hdr .nav a:last-child{border-bottom:0}
  .hdr .nav .sep{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}