:root{
  --paper:#F5ECC2; --card:#FBF6E4; --sand:#EBD3A2;
  --carmine:#A62C37; --carmine-dark:#7C1F28;
  --ink:#1E0E3F; --deep:#17092E;
  --rule:rgba(30,14,63,.16); --muted:rgba(30,14,63,.70);
  --display:'Bodoni Moda',Georgia,'Times New Roman',serif;
  --body:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --wrap:1440px;
  --hdr:72px;
}
*{box-sizing:border-box}
/* .card sets display:grid, which outranks the browser's own [hidden] rule and
   left the colour filter doing nothing at all. Author-level and !important so
   no component style can win against it again. */
[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.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--carmine);text-decoration:none}
a:hover{color:var(--carmine-dark)}
::selection{background:var(--carmine);color:var(--paper)}
:focus-visible{outline:2px solid var(--carmine);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:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--carmine)}
.rule{border:0;border-top:1px solid var(--rule);margin:0}

/* header */
.hdr{position:sticky;top:0;z-index:40;background:var(--paper);
  border-bottom:1px solid var(--rule)}
.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;background:var(--ink);width:22px;
  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)}
.hdr .wrap{height:72px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.hdr .nav{justify-content:flex-end}
.mark{font-family:var(--display);font-size:18px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink)}
.mark:hover{color:var(--carmine)}
.nav{display:flex;gap:clamp(12px,2vw,30px);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;flex-wrap:wrap}
.nav a{color:var(--muted)}
.nav a:hover{color:var(--carmine)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--body);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  padding:13px 22px;border:1px solid var(--carmine);cursor:pointer;white-space:nowrap;
  transition:background .16s ease,color .16s ease,border-color .16s ease}
.btn-fill{background:var(--carmine);color:var(--paper)}
.btn-fill:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-line{background:transparent;color:var(--carmine)}
.btn-line:hover{background:var(--carmine);color:var(--paper)}
.btn-sm{padding:10px 15px;font-size:10.5px;letter-spacing:.14em}
.hdr .btn{padding:12px 20px;font-size:11.5px}

/* hero.
   BASE (also the no-script fallback): three plain stacked blocks, picture then
   the wine's own data. Every layout below is layered on top of this.
   WITH SCRIPT, NARROW: each wine gets its own screen. The name stands alone,
   then the bottle runs in from the left, then the wine's card fades up.
   WITH SCRIPT, WIDE: one sticky stage the three wines hand over between.
   Each wine is ONE .hero-item carrying its own picture and its own data, which
   is what lets the same markup do all three. */
.hero{position:relative;background:var(--paper);padding:0 clamp(10px,2.2vw,30px)}
.hero-item{position:relative}
.hero-inner{display:flex;flex-direction:column;gap:clamp(10px,1.4vh,20px);
  padding:clamp(10px,1.8vh,24px) 0}
.hero-stage{position:relative;background:var(--deep);overflow:hidden;
  aspect-ratio:4/5;max-height:64vh}
.hero-stage:before{content:"";position:absolute;inset:0;
  background:radial-gradient(62% 72% at 50% 48%,rgba(166,44,55,.34),rgba(23,9,46,0) 72%)}
.hero-meta{position:absolute;z-index:3;top:clamp(14px,2.6vh,34px);left:clamp(14px,2.6vw,40px);
  right:clamp(14px,2.6vw,40px);display:flex;justify-content:space-between;gap:16px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,236,194,.8)}
.roll-word{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--body);font-weight:700;font-size:clamp(38px,12vw,220px);line-height:.84;
  letter-spacing:-.02em;text-transform:uppercase;color:var(--carmine);white-space:nowrap;
  user-select:none;pointer-events:none}
.roll-bottle{position:absolute;left:50%;top:50%;width:64%;height:80%;
  transform:translate(-50%,-50%);transform-origin:50% 50%;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  filter:drop-shadow(0 22px 36px rgba(0,0,0,.5))}
.hero-dots{display:none;position:absolute;z-index:3;left:50%;bottom:clamp(12px,2.4vh,30px);
  transform:translateX(-50%);gap:8px;align-items:center}
.hero-dot{width:8px;height:3px;background:rgba(245,236,194,.35)}
.hero-dot.on{width:34px;background:var(--paper)}
.blurb{flex:0 0 auto;transition:opacity .22s linear,transform .22s linear}
.blurb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:clamp(14px,3vw,44px);align-items:start;max-width:var(--wrap);margin:0 auto;
  padding:0 clamp(6px,1vw,14px)}
.blurb h1{font-size:clamp(23px,2.9vw,44px);line-height:1.06;margin:9px 0 0;max-width:20ch}
.blurb .note{font-size:clamp(13.5px,1.1vw,16px);line-height:1.6;margin:0;
  color:var(--muted);max-width:46ch}
.blurb-facts{display:flex;gap:clamp(13px,2vw,28px);flex-wrap:wrap}
.blurb-facts dt{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.8}
.blurb-facts dd{margin:4px 0 0;font-size:14px}
.blurb-cta{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.blurb-side{display:grid;gap:12px}

/* narrow + script: one screen per wine. The picture is STUCK to the full screen
   and the wine's card scrolls up from under it, rather than the card reserving
   a blank half screen it only fills once you scroll. */
.js .hero-item{min-height:175vh}
.js .hero-inner{display:block;height:auto;padding:0}
.js .hero-stage{position:sticky;top:var(--hdr);height:calc(100vh - var(--hdr));
  aspect-ratio:auto;max-height:none}
.js .roll-bottle{width:clamp(104px,25vh,170px);height:clamp(360px,94vw,520px);
  transform:translate(-50%,-50%) translateX(-110vw) rotate(76deg)}
.js .blurb{position:relative;z-index:2;background:var(--paper);
  padding:clamp(16px,5vw,22px) clamp(12px,4vw,18px) clamp(22px,6vw,32px)}

/* wide + script: the three wines share one sticky stage */
@media (min-width:861px){
  .js .hero{height:360vh;padding:0 clamp(10px,2.2vw,30px)}
  .js .hero-sticky{position:sticky;top:var(--hdr);height:calc(100vh - var(--hdr));
    min-height:430px;display:block}
  .js .hero-item{position:absolute;inset:0;height:auto;min-height:0;pointer-events:none}
  .js .hero-inner{display:flex;position:static;height:100%;padding:clamp(10px,1.8vh,24px) 0}
  .js .hero-stage{position:relative;top:auto;height:auto;opacity:0;
    flex:1 1 auto;min-height:0;transition:opacity .2s linear}
  .js .blurb{opacity:0;position:static;z-index:auto;background:none}
  .js .roll-bottle{width:clamp(150px,30vh,330px);height:clamp(520px,82vw,1500px);
    transform:translate(-50%,-50%) translateX(-96vw) rotate(76deg)}
  .js .hero-dots{display:flex}
  .roll-word{font-size:clamp(58px,13vw,220px)}
  .hero-stage{aspect-ratio:auto;max-height:none}
}

/* logo */
.mark{display:inline-flex;align-items:center}
.mark img{height:46px;width:auto}
.ftr .mark img{height:52px}

/* badges */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:6px 10px;background:var(--carmine);color:var(--paper)}
.chip-line{background:transparent;color:var(--muted);border:1px solid var(--rule)}
.chip-loyto{background:var(--ink);color:var(--paper)}
.stars{font-size:12px;letter-spacing:.08em;color:var(--carmine)}

/* sections */
.sec{padding:clamp(54px,7vw,104px) 0}
.sec-sand{background:var(--sand)}
.sec-deep{background:var(--deep);color:var(--paper)}
.sec-carmine{background:var(--carmine);color:var(--paper)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  flex-wrap:wrap;padding-bottom:24px;border-bottom:1px solid var(--rule)}
.sec-deep .sec-head{border-color:rgba(245,236,194,.22)}
.sec-head h2{font-size:clamp(30px,3.4vw,52px);line-height:1.08;margin:14px 0 0}
.sec-count{font-size:14px;color:var(--muted)}
.sec-deep .sec-count{color:rgba(245,236,194,.6)}
.sec-deep .eyebrow{color:var(--sand)}

/* talo */
.talo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(30px,5vw,72px);align-items:start}
.talo p{font-size:clamp(15.5px,1.2vw,18px);line-height:1.7;margin:0;max-width:58ch}
.talo .sub{font-size:15px;color:var(--muted)}
.stats{display:flex;gap:clamp(22px,4vw,54px);flex-wrap:wrap;padding-top:18px;
  border-top:1px solid rgba(30,14,63,.22);margin-top:8px}
.stat b{font-family:var(--display);font-size:clamp(28px,3vw,42px);font-weight:400;display:block}
.stat span{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.62;
  margin-top:4px;display:block}

/* talon video: klikkaamalla ladattava, ei upotettua soitinta.
   Ennen klikkausta sivulta ei lähde yhtään pyyntöä Vimeoon, joten sivu pysyy
   yhtä jäljittämättömänä kuin muu estate ja latautuu kevyempänä. */
.talo-video{margin-top:clamp(22px,3vw,34px)}
.video-facade{display:block;position:relative;width:100%;padding:0;border:0;
  background:var(--deep);cursor:pointer;aspect-ratio:16/9;overflow:hidden;
  font-family:var(--body);color:var(--paper);text-align:left}
.video-facade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .45s ease,filter .3s ease}
.video-facade:hover img,.video-facade:focus-visible img{transform:scale(1.03);filter:brightness(1.06)}
.video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(54px,7vw,78px);height:clamp(54px,7vw,78px);border-radius:50%;
  background:var(--carmine);display:flex;align-items:center;justify-content:center;
  transition:background .16s ease,transform .16s ease}
.video-facade:hover .video-play,.video-facade:focus-visible .video-play{
  background:var(--ink);transform:translate(-50%,-50%) scale(1.06)}
.video-play svg{width:34%;height:34%;fill:var(--paper);margin-left:9%}
.video-cap{position:absolute;left:0;right:0;bottom:0;padding:16px;
  background:linear-gradient(to top,rgba(23,9,46,.85),rgba(23,9,46,0));
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}
.video-frame{width:100%;aspect-ratio:16/9;border:0;display:block;background:var(--deep)}
.video-note{font-size:12px;line-height:1.5;color:var(--muted);margin:10px 0 0;max-width:44ch}

/* filters */
.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(--muted);
  font-family:var(--body);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:10px 16px;cursor:pointer;transition:all .16s ease}
.filter[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.filter:hover{border-color:var(--carmine);color:var(--carmine)}
.filter[aria-pressed="true"]:hover{color:var(--paper)}

/* wine cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),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:104px minmax(0,1fr);gap:18px;
  transition:border-color .18s ease,transform .18s ease}
.card:hover{border-color:var(--carmine);transform:translateY(-3px)}
.card-img{display:flex;align-items:center;justify-content:center;height:210px}
.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:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.card h3{font-size:19px;line-height:1.22;margin:0}
.card h3 a{color:var(--ink)}
.card h3 a:hover{color:var(--carmine)}
.card-tags{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.card-note{font-size:13.5px;line-height:1.55;margin:0;color:var(--muted)}
.card-foot{margin-top:auto;padding-top:12px;border-top:1px solid rgba(30,14,63,.12);
  display:flex;flex-direction:column;gap:12px}
.price{font-family:var(--display);font-size:21px;line-height:1}
.price small{font-family:var(--body);font-size:11px;letter-spacing:.08em;opacity:.6;
  margin-left:6px;font-weight:400}
.avail{font-size:10.5px;letter-spacing:.1em;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}

/* awards */
.awards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:0;margin-top:clamp(26px,4vw,44px)}
.award{border:1px solid rgba(245,236,194,.18);margin:-.5px;padding:clamp(22px,2.8vw,34px) clamp(16px,2vw,26px);
  min-height:196px;display:flex;flex-direction:column;justify-content:space-between;gap:18px}
.award .src{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--sand)}
.award .score{font-family:var(--display);font-size:clamp(24px,2.6vw,34px);line-height:1.1;margin-top:14px}
.award .wine{font-size:14.5px;line-height:1.4}
.award .wine a{color:var(--paper);border-bottom:1px solid rgba(245,236,194,.3)}
.award .wine a:hover{border-color:var(--paper)}
.award .detail{font-size:12.5px;line-height:1.5;color:rgba(245,236,194,.62);margin-top:6px}

/* mista */
.mista{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(26px,4vw,60px);align-items:center}
.mista h2{font-size:clamp(28px,3.2vw,50px);line-height:1.08;margin:14px 0 16px}
.mista p{font-size:15.5px;line-height:1.65;margin:0;max-width:46ch;opacity:.92}
.links{display:grid;gap:12px}
.link-row{display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:22px 24px;font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid rgba(245,236,194,.45);color:var(--paper);transition:all .16s ease}
.link-row:hover{background:rgba(245,236,194,.12);border-color:var(--paper);color:var(--paper)}
.link-row.solid{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.link-row.solid:hover{background:var(--deep);color:var(--paper);border-color:var(--deep)}

/* wine page */
.crumb{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  padding:22px 0 0}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--carmine)}
.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{background:var(--sand);display:flex;align-items:center;justify-content:center;
  padding:clamp(24px,3vw,44px);position:sticky;top:96px}
.detail-img img{max-height:min(62vh,560px);width:auto;object-fit:contain;
  filter:drop-shadow(0 22px 34px rgba(30,14,63,.28))}
.detail h1{font-size:clamp(30px,3.6vw,52px);line-height:1.06;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:15.5px;line-height:1.75;margin:16px 0 0;max-width:60ch;color:var(--muted)}
.tagrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.facts{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)}
.facts dt{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.facts 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:28px}
.buybox .cta{display:flex;gap:10px;flex-wrap:wrap}
.more{padding:0 0 clamp(54px,7vw,96px)}
.more h2{font-size:clamp(24px,2.6vw,34px);margin-bottom:22px}

/* footer */
.ftr{background:var(--deep);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);font-size:20px}
.ftr p{font-size:13px;line-height:1.6;margin:14px 0 0;color:rgba(245,236,194,.75)}
.ftr a{color:rgba(245,236,194,.82);display:block;font-size:13px;line-height:2}
.ftr a:hover{color:var(--paper)}
.legal{font-size:12px;line-height:1.6;color:rgba(245,236,194,.58);max-width:36ch}

@media (max-width:820px){
  .hero-grid{grid-template-columns:1fr}
  .hero-word{font-size:clamp(54px,18vw,120px)}
  .detail{grid-template-columns:1fr}
  .detail-img{position:static}
  .card{grid-template-columns:88px minmax(0,1fr);gap:14px;padding:16px}
  .card-img{height:180px}
}
/* Phone. The hero card has to earn its space: on one screen it was taking more
   than half and squeezing the picture into a letterbox. Same fields, denser. */
@media (max-width:860px){
  section[id],div[id]{scroll-margin-top:calc(var(--hdr) + 16px)}
  /* The name and the bottle sat dead centre, which is exactly where the card
     scrolls up to. Both move into the empty top of the panel so the bottle is
     fully seen before the card reaches it, and the name clears the bottle
     instead of hiding behind it the way it can on a wide screen. */
  .js .hero-stage{min-height:44vh}
  .roll-word{top:30%;font-size:clamp(40px,13vw,92px)}
  .js .roll-bottle{top:57%}
  .blurb-grid{grid-template-columns:1fr;gap:9px}
  .blurb h1{font-size:clamp(19px,5.2vw,27px);margin-top:5px}
  .blurb .note{font-size:13px;line-height:1.45}
  .blurb-side{gap:8px}
  .blurb-facts{display:grid;grid-template-columns:1fr 1fr;gap:7px 14px}
  .blurb-facts dt{font-size:9.5px;letter-spacing:.16em}
  .blurb-facts dd{margin-top:2px;font-size:13px}
  .blurb-cta{margin-top:8px;gap:7px}
  .blurb-cta .btn{flex:1 1 auto;padding:11px 10px;font-size:10.5px;letter-spacing:.12em}
  .blurb .chip{font-size:9.5px;padding:5px 8px}
}
/* Header. Four nav items plus a button do not fit one phone line, and wrapping
   them pushed the header down over the hero. The links become one quiet
   scrollable row of their own instead. */
/* Phone header: logo left, menu right. Four letterspaced links plus anything
   else never fitted one phone line, and wrapping them pushed the header down
   over the hero. */
@media (max-width:760px){
  .hdr .wrap{height:62px;flex-wrap:nowrap;justify-content:space-between;gap:12px}
  .mark img{height:34px}
  .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(30,14,63,.10)}
  .hdr .nav.open{display:flex}
  .hdr .nav a{padding:15px clamp(18px,5vw,26px);font-size:13px;letter-spacing:.14em;
    color:var(--ink);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}
}