/* Divino Urban Cellar — the parts every page shares: brand tokens and fonts,
   top strip, header (menu centred around the logo), mobile menu, footer,
   buttons, booking window and cookie banner.
   Loaded by the new pages (with site.css) and by the Magazine / blog pages
   (with blog.css), so everything here is scoped and safe to share. */

@font-face{font-family:'Cormorant Garamond';src:url(fonts/cormorant-garamond-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url(fonts/cormorant-garamond-400-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url(fonts/cormorant-garamond-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url(fonts/cormorant-garamond-500-italic.woff2) format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url(fonts/cormorant-garamond-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'EB Garamond';src:url(fonts/eb-garamond-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'EB Garamond';src:url(fonts/eb-garamond-400-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'EB Garamond';src:url(fonts/eb-garamond-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* Brand board (final): Ivory, Sand, Sage, Wine, Cocoa, Divino green.
   Lavender only for "Coming soon" labels and review stars. */
:root{
  --ivory:#F5F3ED; --sand:#E9DECC; --sage:#A6AD8A; --wine:#6E2A34; --cocoa:#4A3730;
  --green:#4B5320; --lavender:#6E5B9A; --white:#FFFFFF; --muted:#7B6458; --line:#E9DECC;
  --display:"Cormorant Garamond",Georgia,serif;
  --body:"EB Garamond",Georgia,serif;
  --gutter:40px;
}
.strip,:where(.dvh,.dvh *,.drawer,.drawer *,.dvf,.dvf *,.bk,.bk *,.cookie,.cookie *){box-sizing:border-box;margin:0;padding:0}
:where(.dvh a,.dvf a,.drawer a,.bk a,.cookie a){text-decoration:none;color:inherit}
:where(.dvh button,.dvf button,.drawer button,.bk button,.cookie button){font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-80px;z-index:200;background:var(--wine);color:#fff;padding:10px 16px;font-family:var(--body)}
.skip:focus{top:12px}
body.locked{overflow:hidden}

/* "Still to come" placeholders: build the space, Sandra sends the content. */
.tbc{background:#F3E9C9;color:var(--green);padding:0 6px;border-radius:3px;font-style:normal}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:8px;line-height:1.2;background:var(--wine);color:#fff;border:1px solid var(--wine);border-radius:2px;padding:15px 28px;font:500 12.5px var(--body);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:#59202A;border-color:#59202A;color:#fff}
.btn.o{background:transparent;color:var(--wine)}
.btn.o:hover{background:var(--wine);color:#fff}
.btn.sm{padding:11px 20px}

/* ---------- Top strip (green) ---------- */
.strip{display:block;background:var(--green);color:var(--ivory);text-align:center;font:400 13.5px/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;padding:10px 16px;text-decoration:none}
.strip:hover{color:var(--ivory);text-decoration:underline;text-underline-offset:3px}

/* ---------- Logo: DIV + wine glass + NO, URBAN CELLAR between two lines ---------- */
.wm{display:inline-flex;flex-direction:column;align-items:center;color:var(--green);line-height:1}
.wm .w{display:flex;align-items:flex-end;font-family:var(--display);font-weight:500;letter-spacing:.12em;font-size:var(--s,46px)}
.wm .w svg{height:calc(var(--s,46px)*.95);width:auto;margin:0 .06em .04em .02em}
.wm .u{display:flex;align-items:center;gap:8px;font-family:var(--body);font-size:calc(var(--s,46px)*.2);letter-spacing:.42em;margin-top:6px;padding-left:.42em;white-space:nowrap}
.wm .u:before,.wm .u:after{content:"";width:calc(var(--s,46px)*.55);height:1px;background:currentColor}

/* ---------- Header ---------- */
.dvh{position:relative;z-index:50;background:var(--ivory);border-bottom:1px solid var(--line);font-family:var(--body);color:var(--cocoa)}
.hdr{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:20px var(--gutter);min-height:104px}
.hdr .logo{margin:0 34px;display:block}
.nav{display:flex;align-items:center;gap:28px}
.nav.l{justify-content:flex-end}
.nav.r{justify-content:flex-start}
.nav>a,.dd>button{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--cocoa);white-space:nowrap;padding:6px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;line-height:1.4}
.nav>a.btn{color:#fff;padding:11px 20px;border-bottom:1px solid var(--wine)}
.nav>a:not(.btn):hover,.dd>button:hover,.dd.open>button{color:var(--wine)}
.nav>a[aria-current="page"],.dd.cur>button{color:var(--green);border-bottom-color:var(--green)}
.dd{position:relative}
.dd>button:after{content:" ▾";font-size:10px}
.dd .sub{position:absolute;left:50%;top:calc(100% + 14px);transform:translateX(-50%);min-width:250px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 34px rgba(74,55,48,.13);opacity:0;visibility:hidden;transition:opacity .18s,visibility .18s;z-index:60}
.dd .sub:before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.dd.open .sub{opacity:1;visibility:visible}
@media (hover:hover){.dd:hover .sub,.dd:focus-within .sub{opacity:1;visibility:visible}}
.dd .sub a{display:block;padding:14px 20px;border-top:1px solid var(--line);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cocoa);line-height:1.4}
.dd .sub a:first-child{border-top:0}
.dd .sub a:hover,.dd .sub a[aria-current="page"]{background:var(--ivory);color:var(--wine)}
.soon-dot{display:inline-block;margin-left:6px;background:var(--lavender);color:#fff;font-size:9.5px;letter-spacing:.14em;padding:2px 6px;vertical-align:1px}
.lang{position:absolute;left:var(--gutter);top:50%;transform:translateY(-50%);font-size:12px;letter-spacing:.2em;color:var(--muted)}
.lang a,.lang span{padding:4px 2px}
.lang .on{color:var(--wine);font-weight:500}
.lang .off{opacity:.5;cursor:default}
.lang a:hover{color:var(--wine)}
.menu-btn,.mbook{display:none}
.drawer{display:none}
@media (max-width:1180px){
  .hdr{min-height:84px;padding:14px 20px}
  .nav,.lang{display:none}
  .hdr .logo{margin:0;grid-column:2;grid-row:1}
  .hdr .logo .wm{--s:36px!important}
  .menu-btn{display:flex;grid-column:1;grid-row:1;justify-self:start;align-items:center;gap:10px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--cocoa);padding:8px 4px}
  .menu-btn svg{width:24px;height:24px}
  .mbook{display:inline-flex;grid-column:3;grid-row:1;justify-self:end}
  .drawer{display:block;position:fixed;inset:0;z-index:120;visibility:hidden;font-family:var(--body)}
  .drawer.open{visibility:visible}
  .drawer .scrim{position:absolute;inset:0;background:rgba(74,55,48,.35);opacity:0;transition:opacity .25s}
  .drawer.open .scrim{opacity:1}
  .drawer .panel{position:absolute;left:0;top:0;bottom:0;width:min(88vw,400px);background:var(--ivory);transform:translateX(-102%);transition:transform .28s ease;overflow-y:auto;padding:22px 26px 40px;display:flex;flex-direction:column}
  .drawer.open .panel{transform:none}
  .drawer .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
  .drawer .close{font-size:32px;line-height:1;color:var(--wine);padding:4px 8px}
  .drawer .grp{border-top:1px solid var(--line);padding:12px 0}
  .drawer .grp>a:not(.s),.drawer .grp>p{display:block;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--cocoa);padding:6px 0}
  .drawer .grp>p{color:var(--green)}
  .drawer .grp .s{display:block;letter-spacing:.01em;text-transform:none;font:400 21px/1.3 var(--display);color:var(--wine);padding:6px 0 6px 12px}
  .drawer a[aria-current="page"]{color:var(--green)}
  .drawer .dl{margin-top:18px;font-size:13px;letter-spacing:.2em;color:var(--muted)}
  .drawer .dl .on{color:var(--wine);font-weight:500}
  .drawer .dl .off{opacity:.5}
  .drawer .btn{margin-top:22px}
}
@media (max-width:480px){
  .menu-btn span{display:none}
  .mbook.btn{padding:10px 14px}
  .hdr .logo .wm{--s:30px!important}
}

/* ---------- Footer ---------- */
.dvf{background:#fff;border-top:1px solid var(--line);padding:70px 0 34px;font-family:var(--body);color:var(--cocoa)}
.dvf .fw{max-width:1200px;margin:0 auto;padding:0 var(--gutter)}
.fgrid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:40px}
.fgrid h4{font:500 13px var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--wine);margin-bottom:14px}
.fgrid p,.fgrid a{display:block;font-size:16px;line-height:1.85;color:var(--cocoa)}
.fgrid p{margin-bottom:8px}
.fgrid a:hover{color:var(--wine)}
.fgrid .wm{margin-bottom:16px}
.fgrid .ul{color:var(--wine);text-decoration:underline;text-underline-offset:3px}
.legal{margin-top:50px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:14px;color:var(--muted)}
.legal a,.legal button{font-size:14px;color:var(--muted)}
.legal a:hover,.legal button:hover{color:var(--wine)}
.legal .on{color:var(--wine);font-weight:500}
.legal .off{opacity:.5}
@media (max-width:1024px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:760px){:root{--gutter:16px}.fgrid{grid-template-columns:1fr;gap:30px}}

/* ---------- Booking window ---------- */
.bk{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;padding:20px;visibility:hidden;opacity:0;transition:opacity .2s,visibility .2s;font-family:var(--body);color:var(--cocoa)}
.bk.open{visibility:visible;opacity:1}
.bk .scrim{position:absolute;inset:0;background:rgba(74,55,48,.45)}
.bk .box{position:relative;width:min(520px,100%);max-height:calc(100vh - 40px);overflow-y:auto;background:var(--ivory);border-top:3px solid var(--sage);box-shadow:0 30px 70px rgba(74,55,48,.3);padding:44px 40px 34px;text-align:center}
.bk .x{position:absolute;right:10px;top:6px;font-size:34px;line-height:1;color:var(--wine);padding:6px 10px}
.bk .kick{display:block;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--green)}
.bk h2{font:400 38px/1.1 var(--display);color:var(--wine);margin-top:10px}
.bk .when{font-size:16.5px;line-height:1.5;margin-top:12px}
.bk .q{font:italic 400 22px var(--display);color:var(--green);margin-top:24px}
.stepper{display:flex;align-items:center;justify-content:center;gap:26px;margin-top:14px}
.stepper button{width:52px;height:52px;border-radius:50%;border:1px solid var(--wine);color:var(--wine);font:300 30px/1 var(--display);display:flex;align-items:center;justify-content:center;padding-bottom:4px}
.stepper button:disabled{opacity:.3;cursor:not-allowed}
.stepper output{min-width:70px;font:500 54px/1 var(--display);color:var(--wine)}
.bk .total{margin-top:12px;font-size:17px;color:var(--muted)}
.bk .btn{margin-top:24px;width:100%}
.bk .alt{margin-top:18px;font-size:15.5px;color:var(--muted)}
.bk .alt a{color:var(--wine);text-decoration:underline;text-underline-offset:3px}
.bk .err{margin-top:16px;color:var(--wine);font-size:16px}
@media (max-width:760px){.bk .box{padding:40px 22px 28px}}

/* ---------- Cookie banner ---------- */
.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:140;max-width:780px;margin:0 auto;background:#fff;border:1px solid var(--line);border-top:3px solid var(--sage);box-shadow:0 18px 44px rgba(74,55,48,.18);padding:22px 24px;display:none;gap:20px;align-items:center;font-family:var(--body);color:var(--cocoa)}
.cookie.show{display:flex}
.cookie p{font-size:15.5px;line-height:1.5}
.cookie p b{display:block;font-weight:500;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--wine);margin-bottom:4px}
.cookie .acts{display:flex;gap:10px;flex-shrink:0}
@media (max-width:760px){.cookie{flex-direction:column;align-items:stretch}.cookie .acts .btn{flex:1}}

/* ---------- Sticky "Book a tasting" on phones ---------- */
.sbook{display:none}
@media (max-width:760px){
  .sbook{display:flex;position:fixed;left:16px;right:16px;bottom:14px;z-index:100;background:var(--green);border-color:var(--green);color:var(--ivory);padding:16px 20px;box-shadow:0 10px 28px rgba(74,55,48,.28)}
  .sbook:hover{background:#3C4319;border-color:#3C4319;color:var(--ivory)}
  body{padding-bottom:84px}
  body.locked .sbook,.cookie.show~.sbook{display:none}
}