:root{
  --paper:#F2EFE4; --card:#FBF8EC; --gold:#C19F2C; --gold-dark:#8A6F1F;
  --ink:#111314; --olive:#44380C; --mint:#B5DECC;
  --h1:#FBF3D6; --h2:#F2E1A8; --h3:#DCC173;
  --rule:rgba(17,19,20,.16); --muted:rgba(17,19,20,.68);
  --display:'Prata',Georgia,'Times New Roman',serif;
  --body:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --wrap:1440px; --hdr:70px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--gold-dark);text-decoration:none}
a:hover{color:var(--gold)}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold-dark);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(18px,3.5vw,52px)}
.eyebrow{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-dark)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:60;background:rgba(242,239,228,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.hdr .wrap{height:var(--hdr);display:flex;align-items:center;
  justify-content:space-between;gap:18px}
.mark{font-family:var(--display);font-size:clamp(15px,1.4vw,19px);letter-spacing:.42em;
  text-transform:uppercase;color:var(--ink)}
.mark:hover{color:var(--gold-dark)}
.nav{display:flex;gap:clamp(14px,2.4vw,40px);font-size:11px;letter-spacing:.28em;
  text-transform:uppercase}
.nav a{color:var(--ink)}
.nav a:hover{color:var(--gold-dark)}
.burger{display:none;background:none;border:0;padding:10px 2px;cursor:pointer;
  flex-direction:column;justify-content:center;gap:5px;width:34px}
.burger span{display:block;height:1.5px;width:22px;background:var(--ink);
  transition:transform .2s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- hero: the bottle wall ---------- */
.hero{position:relative;height:calc(100vh - var(--hdr));min-height:460px;
  overflow:hidden;background:var(--h2)}
.hero-bg{position:absolute;inset:0;overflow:hidden;
  background:radial-gradient(68% 58% at 50% 44%,var(--h1) 0%,var(--h2) 52%,var(--h3) 100%)}
.hero-bg:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(84,64,12,.16) 0%,rgba(84,64,12,0) 34%,
    rgba(84,64,12,.03) 62%,rgba(84,64,12,.24) 100%)}
.bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.bubble{position:absolute;bottom:-12vh;border-radius:50%;
  border:1px solid rgba(255,253,240,.85);
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.78),rgba(255,255,255,.04));
  animation-name:pz-rise;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes pz-rise{
  0%{transform:translate(0,12vh) scale(.65);opacity:0}
  14%{opacity:.7}
  50%{transform:translate(10px,-50vh) scale(1)}
  100%{transform:translate(-8px,-112vh) scale(1.2);opacity:0}}

.wall{position:absolute;inset:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));
  gap:clamp(14px,3vh,34px) clamp(8px,1.6vw,22px);
  padding:clamp(40px,6vh,70px) clamp(20px,4vw,72px) clamp(236px,38vh,300px);
  transform:scale(var(--wall-scale,1));transform-origin:var(--wall-origin,50% 50%);
  transition:transform 620ms cubic-bezier(.3,.8,.2,1)}
.tile{position:relative;display:block;min-height:0;cursor:pointer;background:none;
  border:0;padding:0;font-family:inherit;color:var(--olive);
  transition:opacity 520ms ease,transform 620ms cubic-bezier(.3,.8,.2,1)}
/* Nothing on the wall but glass. No style word, no name, no price: the wall is
   a shelf you look at, and every one of those answers arrives when the bottle
   is opened. */
.tile-shot{position:absolute;left:50%;top:calc(42% + var(--row-shift,0px));transform:translate(-50%,-50%);
  height:118%;width:auto;max-width:none;object-fit:contain;
  filter:drop-shadow(0 18px 30px rgba(84,64,12,.32));
  transition:transform 420ms cubic-bezier(.3,.8,.2,1),filter 420ms ease}
.tile:hover .tile-shot,.tile:focus-visible .tile-shot{
  transform:translate(-50%,-50%) scale(1.07);
  filter:drop-shadow(0 24px 38px rgba(84,64,12,.42))}
/* The click cue is a drop, not an arrow and not a cursor: it belongs to wine.
   It breathes so the wall reads as touchable without a word of instruction. */
.tile-drop{position:absolute;left:50%;bottom:calc(0px - var(--row-shift,0px));transform:translateX(-50%);
  width:clamp(16px,1.6vw,23px);height:auto;color:var(--olive);opacity:.5;
  filter:drop-shadow(0 0 5px rgba(255,252,236,.95));
  animation:pz-drop 2.6s ease-in-out infinite;
  transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.tile:hover .tile-drop,.tile:focus-visible .tile-drop{opacity:1;
  transform:translateX(-50%) scale(1.22)}
@keyframes pz-drop{
  0%,100%{transform:translateX(-50%) translateY(0);opacity:.45}
  50%{transform:translateX(-50%) translateY(-6px);opacity:.9}}

.focus{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%) scale(.82);
  display:flex;flex-direction:column;align-items:center;opacity:0;pointer-events:none;
  transition:opacity 520ms ease,transform 620ms cubic-bezier(.3,.8,.2,1)}
.hero.zoom .focus{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
.focus-year{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  font-family:var(--display);font-size:clamp(64px,13vw,220px);line-height:1;
  color:rgba(68,56,12,.22);white-space:nowrap;pointer-events:none}
.focus-shot{position:relative;display:flex;align-items:center;justify-content:center}
.focus-shot img{height:clamp(240px,42vh,470px);width:auto;max-width:none;object-fit:contain;
  filter:drop-shadow(0 26px 40px rgba(84,64,12,.35))}
.focus-meta{text-align:center;margin-top:clamp(14px,2.5vh,30px);color:var(--olive)}
.focus-meta .sub{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase}
.focus-meta .name{font-family:var(--display);font-size:clamp(19px,2.4vw,34px);
  letter-spacing:.2em;text-transform:uppercase;margin-top:12px}
.focus-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:18px}

.hero-chips{position:absolute;top:clamp(14px,4vh,30px);left:clamp(18px,3.5vw,52px);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;z-index:3}
.hero-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;
  border:1px solid rgba(68,56,12,.4);border-radius:999px;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--olive)}
.overline{position:absolute;left:50%;bottom:clamp(46px,8vh,64px);transform:translateX(-50%);
  text-align:center;width:min(92%,820px);padding:clamp(18px,3vh,30px) clamp(16px,3vw,34px);
  text-shadow:0 2px 16px rgba(255,250,225,.95),0 1px 2px rgba(255,250,225,.9);
  pointer-events:none;transition:opacity .22s linear;z-index:2}
.hero.zoom .overline{opacity:0}
.overline .kicker{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--olive)}
.overline h1{font-size:clamp(22px,3.2vw,50px);line-height:1.12;letter-spacing:.04em;
  color:var(--olive);margin-top:12px}
.hero-foot{position:absolute;bottom:clamp(16px,3vh,32px);left:clamp(18px,3.5vw,52px);
  right:clamp(18px,3.5vw,52px);display:flex;align-items:center;justify-content:space-between;
  gap:16px;color:var(--olive);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;z-index:3}
.hero-foot a{color:var(--olive)}
.hero-foot a:hover{color:var(--gold-dark)}
.backwall{font-family:var(--body);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--olive);background:transparent;border:1px solid rgba(68,56,12,.42);
  padding:10px 16px;cursor:pointer}
.backwall:hover{border-color:var(--gold-dark);color:var(--gold-dark)}

/* The drop says a bottle is touchable, but nothing says what happens next. So
   once, a moment after the page settles, a cursor glides to the best seller and
   opens it. It runs only if the visitor has not already done something, and only
   once per session. */
.ghost{position:absolute;z-index:6;width:26px;height:26px;left:0;top:0;opacity:0;
  pointer-events:none;color:var(--olive);
  filter:drop-shadow(0 2px 6px rgba(255,252,236,.9));
  transition:opacity .35s ease,transform 1.15s cubic-bezier(.35,.75,.3,1)}
.ghost.on{opacity:.72}
.ghost.tap{transform:scale(.86) translate(var(--gx),var(--gy))}
.ghost-ring{position:absolute;z-index:5;width:16px;height:16px;margin:-8px 0 0 -8px;
  border-radius:50%;border:1.5px solid var(--olive);opacity:0;pointer-events:none}
.ghost-ring.go{animation:pz-ring .62s ease-out forwards}
@keyframes pz-ring{
  0%{opacity:.75;transform:scale(.4)}
  100%{opacity:0;transform:scale(3.4)}}

/* Row stagger. The offset rides on a custom property rather than the tile's
   own transform, because the zoom script owns that transform. */
@media (min-width:861px){
  .wall .tile:nth-child(-n+4){--row-shift:60px}
  .wall .tile:nth-child(n+5){--row-shift:90px}
  .overline{transform:translateX(-50%) translateY(70px)}
}

/* ---------- buttons and chips ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--body);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  padding:13px 22px;border:1px solid var(--ink);cursor:pointer;white-space:nowrap;
  transition:background .16s ease,color .16s ease,border-color .16s ease}
.btn-fill{background:var(--ink);color:var(--paper)}
.btn-fill:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn-line{background:transparent;color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn-sm{padding:10px 14px;font-size:10px;letter-spacing:.16em}
.chip{display:inline-flex;align-items:center;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;padding:6px 10px;border:1px solid var(--rule);color:var(--muted)}
.chip-gold{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.chip-mint{background:var(--mint);border-color:var(--mint);color:var(--ink)}

/* ---------- sections ---------- */
.sec{padding:clamp(48px,6vw,96px) 0}
.sec-dark{background:var(--ink);color:var(--paper)}
.sec-dark .eyebrow{color:var(--gold)}
.sec-gold{background:var(--gold);color:var(--ink)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(26px,3.2vw,48px);line-height:1.1;margin:14px 0 0}
.sec-count{font-size:13px;color:var(--muted)}
.sec-dark .sec-count{color:rgba(242,239,228,.6)}
.luomu{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:clamp(24px,4vw,60px);align-items:start}
.luomu p{font-size:clamp(15px,1.15vw,17px);line-height:1.7;margin:0;
  color:rgba(242,239,228,.82);max-width:52ch}
.facts{display:grid;gap:1px;background:rgba(242,239,228,.2)}
.facts div{background:var(--ink);display:flex;justify-content:space-between;gap:16px;
  padding:14px 2px;font-size:13px}
.facts dt{letter-spacing:.16em;text-transform:uppercase;font-size:11px;
  color:rgba(242,239,228,.7);margin:0}
.facts dd{margin:0}

/* ---------- filters and cards ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:clamp(20px,3vw,32px) 0 0}
.filter{background:transparent;border:1px solid var(--rule);color:var(--ink);
  font-family:var(--body);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  padding:11px 16px;cursor:pointer;transition:all .18s ease}
.filter[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.filter:hover{border-color:var(--gold-dark);color:var(--gold-dark)}
.filter[aria-pressed="true"]:hover{color:var(--paper)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));
  gap:clamp(14px,1.6vw,22px);margin-top:clamp(22px,3vw,34px)}
.card{background:var(--card);border:1px solid var(--rule);padding:20px;
  display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;
  transition:border-color .18s ease,transform .18s ease}
.card:hover{border-color:var(--gold);transform:translateY(-3px)}
.card-img{position:relative;display:flex;align-items:center;justify-content:center;height:200px}
.card-img img{max-height:100%;width:auto;object-fit:contain}
.card-body{display:flex;flex-direction:column;gap:9px;min-width:0}
.card-brand{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.card h3{font-size:18px;line-height:1.25;margin:0}
.card h3 a{color:var(--ink)}
.card h3 a:hover{color:var(--gold-dark)}
.card-tags{display:flex;gap:7px;flex-wrap:wrap}
.card-note{font-size:13px;line-height:1.55;margin:0;color:var(--muted)}
.card-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--rule);
  display:flex;flex-direction:column;gap:12px}
.price{font-family:var(--display);font-size:20px;line-height:1}
.price small{font-family:var(--body);font-size:11px;letter-spacing:.08em;opacity:.6;margin-left:6px}
.avail{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.card-cta{display:flex;gap:8px;flex-wrap:wrap}
.card-cta .btn{flex:1 1 auto}

/* ---------- mistä saa ---------- */
.mista{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:clamp(24px,4vw,60px);align-items:center}
.mista h2{font-size:clamp(26px,3.2vw,48px);line-height:1.1;margin:14px 0 16px}
.mista p{font-size:15px;line-height:1.65;margin:0;max-width:46ch}
.links{display:grid;gap:12px}
.link-row{display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:22px 24px;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid rgba(17,19,20,.5);color:var(--ink);transition:all .16s ease}
.link-row:hover{background:rgba(17,19,20,.08);color:var(--ink)}
.link-row.solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.link-row.solid:hover{background:var(--paper);color:var(--ink)}

/* ---------- wine page ---------- */
.crumb{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:22px 0 0}
.crumb a{color:var(--muted)}
.detail{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr);
  gap:clamp(28px,4.5vw,72px);align-items:start;padding:clamp(24px,3.5vw,44px) 0 clamp(48px,6vw,88px)}
.detail-img{position:sticky;top:calc(var(--hdr) + 24px);background:var(--h1);
  display:flex;align-items:center;justify-content:center;padding:clamp(24px,3vw,44px)}
.detail-img img{max-height:min(62vh,560px);width:auto;object-fit:contain;
  filter:drop-shadow(0 22px 34px rgba(68,56,12,.25))}
.detail h1{font-size:clamp(27px,3.3vw,46px);line-height:1.12;margin:12px 0 0;max-width:22ch}
.detail .lead{font-size:clamp(16px,1.3vw,19px);line-height:1.6;margin:18px 0 0;max-width:52ch}
.detail .body{font-size:15px;line-height:1.75;margin:16px 0 0;max-width:60ch;color:var(--muted)}
.tagrow{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px}
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px 26px;
  margin:28px 0 0;padding-top:22px;border-top:1px solid var(--rule)}
.spec dt{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.spec dd{margin:5px 0 0;font-size:15px}
.buybox{margin-top:30px;padding:24px;background:var(--card);border:1px solid var(--rule);
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.buybox .price{font-size:27px}
.more{padding:0 0 clamp(54px,7vw,96px)}
.more h2{font-size:clamp(22px,2.4vw,32px);margin-bottom:22px}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:var(--paper)}
.ftr .wrap{padding:clamp(40px,5vw,72px) clamp(18px,3.5vw,52px);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:30px}
.ftr .mark{color:var(--paper)}
.ftr p{font-size:13px;line-height:1.6;margin:14px 0 0;color:rgba(242,239,228,.75)}
.ftr a{color:rgba(242,239,228,.82);display:block;font-size:13px;line-height:2}
.ftr a:hover{color:var(--gold)}
.legal{font-size:12px;line-height:1.6;color:rgba(242,239,228,.58);max-width:36ch}

/* A short laptop has no room for the headline under two rows of tall glass, so
   the wall gives some height back rather than letting the bottles collide. */
@media (max-height:760px){
  .wall{padding:clamp(42px,7vh,72px) clamp(20px,4vw,72px) clamp(176px,32vh,236px)}
  .tile-shot{height:100%;top:42%}
}
@media (max-width:860px){
  /* Button text was too small to read comfortably on a phone. Two points up. */
  .btn{font-size:13px}
  .btn-sm{font-size:12px}
  /* Three across, two rows. The bottle is tall and narrow, so a narrower cell
     with more height in it gives a BIGGER bottle, not a smaller one. */
  .wall{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));
    gap:clamp(8px,2vh,20px) 4px;
    padding:clamp(40px,6vh,68px) clamp(8px,3vw,20px) clamp(196px,34vh,250px)}
  .tile:nth-child(n+7){display:none}
  .tile-shot{height:116%;top:42%}
  .tile-drop{width:15px;bottom:0}
  .detail{grid-template-columns:1fr}
  .detail-img{position:static}
  .card{grid-template-columns:84px minmax(0,1fr);gap:14px;padding:16px}
  .card-img{height:170px}
  /* The chips are decoration: the real filters are in the Viinit section a
     screen below. On a phone they only collided with the headline. */
  .hero-chips{display:none}
  /* Both buttons on one line, at the level of Osta Alkosta. */
  .focus-cta{flex-wrap:nowrap;gap:8px}
  .focus-cta .btn{padding:12px 13px;font-size:12px;letter-spacing:.1em}
  /* The line about the range belongs in the middle of the foot, and the back
     control is a word, not a boxed button, on a screen this narrow. */
  .hero-foot{gap:10px;font-size:9.5px;letter-spacing:.18em}
  .hero-foot > span{flex:1 1 auto;text-align:center}
  .backwall{border:0;padding:10px 0;font-size:9.5px;letter-spacing:.18em}
  .hero-foot{bottom:calc(clamp(16px,3vh,32px) + 15px)}
  section[id],div[id]{scroll-margin-top:calc(var(--hdr) + 16px)}
}
@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(--paper);
    border-bottom:1px solid var(--rule);box-shadow:0 14px 26px rgba(17,19,20,.10)}
  .hdr .nav.open{display:flex}
  .hdr .nav a{padding:15px clamp(18px,5vw,26px);font-size:13px;letter-spacing:.16em;
    border-bottom:1px solid var(--rule)}
  .hdr .nav a:last-child{border-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

/* K-18. Laki edellyttaa sen, joten se ei ole koriste. Vastaus jaa tahan
   selaimeen: ei evastetta, ei tunnistetta, ei pyyntoa meille. */
.gate{position:fixed;inset:0;z-index:200;background:var(--paper);color:var(--ink);
  display:flex;align-items:center;justify-content:center;padding:clamp(20px,5vw,60px)}
.gate-in{max-width:620px}
.gate h2{font-size:clamp(30px,5vw,58px);margin:12px 0 0;line-height:1.05}
.gate p{font-size:clamp(15px,1.2vw,18px);line-height:1.6;margin:16px 0 0;max-width:46ch}
.gate .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.gate small{display:block;font-size:12px;line-height:1.6;margin-top:22px;max-width:48ch;
  color:var(--muted)}
html.gated body{overflow:hidden}

/* Kayttoehdot ja tietosuoja. One column, reading width, no cards. */
.terms{padding:clamp(38px,5vw,80px) 0 clamp(56px,7vw,104px)}
.terms .wrap{max-width:840px}
.terms h1{font-size:clamp(32px,5vw,64px);margin:10px 0 0}
.terms h2{font-size:clamp(18px,1.9vw,25px);margin:40px 0 0}
.terms p{font-size:16px;line-height:1.75;margin:12px 0 0;color:var(--muted)}
.terms .lead{font-size:clamp(16.5px,1.5vw,19px);color:var(--ink);margin-top:18px}
.terms ul{margin:12px 0 0;padding-left:20px}
.terms li{font-size:16px;line-height:1.75;margin:8px 0;color:var(--muted)}
.terms a{text-decoration:underline}
.terms b{color:var(--ink);font-weight:600}