/* Approved standalone menu + hero, integrated with WordPress 1.1.0. */

@font-face{font-family:HrabiaMastheadUI;src:url('../fonts/masthead-ui.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:HrabiaMastheadSerif;src:url('../fonts/masthead-serif.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
:root{
--hh-paper:#f3e7d2;--hh-header-paper:#f3edde;--hh-ink:#18130f;--hh-red:#b81724;
--hh-blue:#184875;--hh-max-width:1392px;--hh-gutter:clamp(18px,4vw,56px);
--hh-header-height:88px;--hh-logo-width:clamp(112px,10vw,152px);
}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hh-header-height) + var(--hh-admin-offset,0px) + 20px)}
.hh-site-header :where(img,svg),.hh-hero :where(img,svg){display:block;max-width:100%;height:auto}
.hh-site-header a,.hh-hero a{color:inherit;text-decoration:none}
.hh-site-header button{font:inherit;color:inherit}
.hh-site-header button,.hh-site-header a,.hh-hero a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
[hidden]{display:none!important}
.hh-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.hh-skip-link{position:fixed;z-index:1000;inset:12px auto auto 12px;transform:translateY(-180%);padding:14px 20px;background:var(--hh-ink);color:#fff;font:600 14px HrabiaMastheadUI,Arial,sans-serif}
.hh-skip-link:focus{transform:none}
.hh-frame{width:min(calc(100% - 2 * var(--hh-gutter)),var(--hh-max-width));margin-inline:auto}
.hh-shell{isolation:isolate;overflow-x:clip}
.hh-site-header{position:sticky;top:var(--hh-admin-offset,0px);z-index:20;background:var(--hh-header-paper);border-bottom:1px solid #382a191f}
html:not(.hh-js) .hh-site-header{position:relative}
.hh-site-header.hh-is-scrolled,.hh-site-header[data-menu-open="true"]{z-index:100;box-shadow:0 5px 22px #2c190f14}
.hh-header-inner{min-height:var(--hh-header-height);display:grid;grid-template-columns:auto minmax(0,1fr) clamp(120px,12vw,175px) auto;align-items:center;gap:20px}
.hh-brand-lockup{display:flex;align-items:center;gap:16px;width:max-content;min-height:48px}
.hh-brand-lockup__hrabia{position:relative;width:var(--hh-logo-width);height:calc(var(--hh-logo-width) * .368571);overflow:hidden;mix-blend-mode:multiply}
.hh-brand-lockup__hrabia img{position:absolute;width:calc(var(--hh-logo-width) * 1.462857);max-width:none;left:calc(var(--hh-logo-width) * -.231429);top:calc(var(--hh-logo-width) * -.232143)}
.hh-brand-lockup__divider{width:1px;height:44px;background:#42362555}
.hh-brand-lockup__baron{width:var(--hh-logo-width);filter:brightness(0) saturate(100%) invert(19%) sepia(48%) saturate(1650%) hue-rotate(184deg) brightness(88%) contrast(94%)}
.hh-site-nav{grid-column:2;grid-row:1}
.hh-site-nav > ul{display:flex;align-items:center;justify-content:center;gap:clamp(12px,1.8vw,28px);list-style:none;margin:0;padding:0}
.hh-site-nav a{position:relative;display:flex;align-items:center;min-height:48px;font:600 12px/1.2 HrabiaMastheadUI,Arial,sans-serif;text-transform:uppercase;letter-spacing:.025em;white-space:nowrap}
.hh-site-nav li a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;background:var(--hh-red);transform:scaleX(0);transform-origin:left;transition:transform .18s ease}
.hh-site-nav a:hover::after,.hh-site-nav a:focus-visible::after{transform:scaleX(1)}
.hh-brewery{grid-column:4;grid-row:1;display:flex;align-items:center;gap:12px;min-height:48px;padding-left:22px;border-left:1px solid #382a1940}
.hh-brewery img{width:clamp(142px,10vw,162px);height:auto}
.hh-arrow{width:22px;height:22px;flex:0 0 auto;transition:transform .18s ease}
.hh-brewery .hh-arrow{width:17px;height:17px;transform:rotate(-45deg)}
.hh-brewery:hover .hh-arrow{transform:translate(2px,-2px) rotate(-45deg)}
.hh-menu-toggle{display:none;width:48px;height:48px;border:1px solid #382a192e;background:transparent;cursor:pointer;align-items:center;justify-content:center}
.hh-menu-toggle svg{width:24px;height:24px}
.hh-menu-toggle[aria-expanded="true"] .hh-menu-line--one{transform:translateY(5px) rotate(45deg)}
.hh-menu-toggle[aria-expanded="true"] .hh-menu-line--two{transform:translateY(-5px) rotate(-45deg)}
.hh-menu-line{transform-box:fill-box;transform-origin:center;transition:transform .16s ease}
.hh-brewery--mobile{display:none!important}

/* Global layers: paper 0; scene 30; copy 40; open/scrolled navigation 100. */
.hh-hero{position:relative;background:var(--hh-paper);border-bottom:1px solid #382a1924}
/* Clip only the backdrop: the character must still extend over the header.
Keep the skyline proportional and cover the right edge on wide screens. */
.hh-city-backdrop{--hh-city-base-height:600px;position:absolute;z-index:0;inset:0;overflow:hidden;pointer-events:none}
.hh-city{position:absolute;left:0;bottom:0;width:max(100%,calc(var(--hh-city-base-height) * 3000 / 1026));height:auto;max-width:none}
.hh-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:30px;align-items:stretch}
.hh-hero-copy{position:relative;z-index:40;align-self:start;padding-block:38px 50px}
.hh-hero-copy h1{width:86%;max-width:516px;margin:0}
.hh-hero-copy h1 svg{width:100%;aspect-ratio:830/326}
.hh-hero-copy p{position:relative;isolation:isolate;width:fit-content;max-width:100%;margin:20px 0 22px;font:700 clamp(24px,2vw,33px)/1.08 HrabiaMastheadSerif,Georgia,serif;letter-spacing:-.015em;text-shadow:0 1px 3px var(--hh-paper)}
.hh-hero-copy p::before{content:"";position:absolute;z-index:-1;inset:-12px -20px;background:var(--hh-paper);opacity:.94;filter:blur(14px);pointer-events:none}
.hh-hero-copy p span{display:block}
.hh-hero-actions{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px}
.hh-cta{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:58px;padding:18px 26px;background:var(--hh-red);color:#fff;border:1px solid #fff3;font:600 clamp(12px,.88vw,14px)/1.2 HrabiaMastheadUI,Arial,sans-serif;text-transform:uppercase;letter-spacing:.035em;box-shadow:0 8px 18px #89121b15;transition:background-color .18s ease}
.hh-cta:hover{background:#9f1120}
.hh-cta:hover .hh-arrow{transform:translateX(4px)}
/* The reference places this lettering beside the red claim, above the bottles.
   Anchor it to the same centered copy column, not to the viewport or CTA.
   Narrow screens return it to normal flow before the description. */
.hh-slogan-people-wrap{position:absolute;left:calc(min(86%,516px) + 8px);top:104px;isolation:isolate;display:block;width:clamp(140px,calc(30vw - 280px),190px);max-width:100%;pointer-events:none}
.hh-slogan-people-wrap::before{content:"";position:absolute;z-index:-1;inset:-10px -8px;background:radial-gradient(ellipse,var(--hh-paper) 48%,#f3e7d2ed 66%,#f3e7d200 82%);filter:blur(6px);pointer-events:none}
.hh-slogan-people{width:100%;height:auto;filter:brightness(.4)}
.hh-hero-title--text ~ .hh-slogan-people-wrap{position:relative;left:auto;top:auto;margin-block:18px}
.hh-scene{--hh-scene-height:clamp(510px,41vw,600px);position:relative;z-index:30;container-type:inline-size;margin:0;min-width:0;height:var(--hh-scene-height);align-self:end;clip-path:inset(calc(-1 * var(--hh-header-height)) -100vw 0);pointer-events:none}
/* Inside the centered scene: fabric 10, lettering 15, figure 20,
oak platform 30, bottles 40, wax seal 50. */
.hh-curtain{position:absolute;z-index:10;left:calc(86% - var(--hh-scene-height) * 1.182266);top:0;width:auto;height:100%;max-width:none}
.hh-slogan-tradition{position:absolute;z-index:15;width:20%;max-width:144px;right:-6%;top:2%;filter:brightness(.94)}
.hh-character{position:absolute;z-index:20;left:0;top:-62px;width:86%;max-width:none;filter:drop-shadow(7px 7px 4px #2112081a)}
/* The platform is the shared coordinate system for wood and bottles.
   Its intrinsic height follows the 2162 x 423 artwork. The bottle baseline
   meets the lower wooden shelf at source y=270, regardless of scene height.
   Keep this wrapper without a z-index: wood 30 and bottles 40 retain their layers. */
.hh-platform{position:absolute;left:-14%;bottom:-3px;width:140%}
.hh-foreground{position:relative;z-index:30;width:100%;max-width:none}
.hh-bottles{position:absolute;z-index:40;left:calc(14 / 140 * 100%);bottom:calc(153 / 423 * 100%);width:calc(36 / 140 * 100%);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:3%}
/* Three short contact shadows, centered directly under the bottle bases.
   The artwork keeps its own shading; an offset shadow on the whole group
   would separate the bases from the wood again. */
.hh-bottles::before{--hh-contact-shadow:radial-gradient(ellipse at center,#1d0d07b3 0%,#1d0d0766 28%,#1d0d0700 72%);content:"";position:absolute;z-index:0;left:0;right:0;bottom:0;height:3%;min-height:4px;transform:translateY(50%);background:var(--hh-contact-shadow) left center / 31.333333% 100% no-repeat,var(--hh-contact-shadow) center / 33% 100% no-repeat,var(--hh-contact-shadow) right center / 31.333333% 100% no-repeat}
.hh-bottle{position:relative;z-index:1;width:100%;aspect-ratio:403/1537}
.hh-bottle--honey{transform:scale(1.055);transform-origin:center bottom}
.hh-seal{position:absolute;z-index:50;left:54%;bottom:7%;width:18%;max-width:126px;transform:rotate(8deg);filter:drop-shadow(3px 5px 3px #4c0b1538)}
/* Fade only beyond the source artwork's 3000 px width. */
@media (min-width:3001px){
.hh-city{width:3000px;mask-image:linear-gradient(90deg,#000 91%,transparent)}
}
@media (max-width:1399px){
.hh-slogan-people-wrap{position:relative;left:auto;top:auto;width:172px;margin:18px 0}
}
@media (max-width:1199px){
:root{--hh-header-height:84px;--hh-logo-width:130px}
.hh-header-inner{grid-template-columns:1fr auto auto;gap:20px}
.hh-brewery{grid-column:2}
.hh-menu-toggle{grid-column:3;grid-row:1}
.hh-js .hh-menu-toggle{display:flex}
.hh-site-nav{grid-column:1/-1;grid-row:2;padding-bottom:16px}
.hh-js .hh-site-nav{max-height:calc(100vh - var(--hh-header-height) - var(--hh-admin-offset,0px));max-height:calc(100dvh - var(--hh-header-height) - var(--hh-admin-offset,0px));overflow-y:auto;overscroll-behavior:contain;display:none;position:absolute;left:0;right:0;top:100%;padding:20px var(--hh-gutter) 24px;background:var(--hh-header-paper);border-top:1px solid #382a191a;box-shadow:0 14px 18px #27160717}
.hh-js .hh-site-nav[data-open="true"]{display:block}
.hh-site-nav > ul{justify-content:center;gap:32px}
.hh-site-nav a{font-size:13px}
.hh-scene{clip-path:inset(0 -100vw 0)}
.hh-character{top:0}
.hh-curtain{top:0;height:100%}
.hh-hero-copy{padding-top:38px}
.hh-hero-actions{column-gap:18px}
.hh-cta{padding-inline:20px;gap:16px}
}
@media (max-width:999px){
.hh-hero-grid{grid-template-columns:minmax(0,1fr);gap:0}
.hh-hero-copy{justify-self:center;text-align:center;width:min(100%,590px);padding-block:32px 22px}
.hh-hero-copy h1{margin-inline:auto}
.hh-hero-copy p{font-size:30px;margin:18px auto}
.hh-hero-actions{justify-content:center;gap:18px 28px}
.hh-slogan-people-wrap{margin-inline:auto}
.hh-scene{--hh-scene-height:580px;width:min(100%,690px);justify-self:center;margin-top:8px}
.hh-character{top:24px;width:86%;left:1%}
.hh-curtain{left:calc(78% - var(--hh-scene-height) * 1.182266)}
.hh-slogan-tradition{top:1%;right:0;width:21%}
.hh-platform{width:132%;left:-16%}
.hh-bottles{left:calc(25 / 132 * 100%);width:calc(36 / 132 * 100%)}
.hh-seal{left:59%}
.hh-city-backdrop{--hh-city-base-height:610px}
}
@media (max-width:600px){
:root{--hh-header-height:76px;--hh-logo-width:clamp(94px,25vw,118px)}
.hh-header-inner{grid-template-columns:1fr auto;gap:12px}
.hh-brand-lockup{gap:12px}
.hh-brand-lockup__divider{height:34px}
.hh-brewery--desktop{display:none}
.hh-menu-toggle{grid-column:2;width:46px;height:46px}
.hh-site-nav > ul{display:block}
.hh-site-nav li a{min-height:50px;justify-content:center;font-size:14px}
.hh-site-nav li a::after{left:35%;right:35%;bottom:6px}
.hh-brewery--mobile{display:flex!important;justify-content:center;border-left:0;border-top:1px solid #382a192a;padding:20px 0 0;margin:14px auto 0;min-height:58px}
.hh-brewery--mobile img{width:166px}
.hh-hero-copy{padding-block:26px 20px}
.hh-hero-copy p{font-size:24px;line-height:1.12;margin-block:18px}
.hh-hero-actions{gap:16px 14px}
.hh-cta{min-height:54px;padding:17px 18px;gap:14px;font-size:12px}
.hh-slogan-people-wrap{width:152px;margin-block:14px}
.hh-scene{--hh-scene-height:clamp(360px,110vw,580px);margin-top:4px}
.hh-character{width:100%;left:0;top:12px}
.hh-curtain{left:calc(73% - var(--hh-scene-height) * 1.182266)}
.hh-slogan-tradition{top:0;right:-1%;width:24%;max-width:110px}
.hh-platform{width:164%;left:-33%}
.hh-bottles{left:calc(37 / 164 * 100%);width:calc(50 / 164 * 100%)}
.hh-seal{left:71%;bottom:8%;width:23%}
.hh-city-backdrop{--hh-city-base-height:490px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
@media (forced-colors:active){.hh-cta,.hh-menu-toggle{border:1px solid ButtonText}.hh-brand-lockup__baron{filter:none}}

/* WordPress integration: scope typography and link colors to this masthead. */
.hh-site-header,.hh-hero{color:var(--hh-ink);font-family:Georgia,serif;line-height:normal}
.hh-site-header :focus-visible,.hh-hero :focus-visible{outline:3px solid var(--hh-blue);outline-offset:5px}
.hh-hero .hh-cta{color:#fff}
.hh-hero-copy .hh-hero-title--text{color:var(--hh-red);font-family:"Hrabia Slab",Georgia,serif;font-size:clamp(48px,4.5vw,82px);line-height:.96;text-transform:uppercase;overflow-wrap:anywhere}
.hh-site-header .current-menu-item > a::after,.hh-site-header .current-menu-ancestor > a::after{transform:scaleX(1)}
.hh-site-nav li{position:relative;margin:0}
.hh-site-nav .sub-menu{display:none;position:absolute;top:100%;left:0;z-index:1;min-width:210px;margin:0;padding:8px 14px;list-style:none;background:var(--hh-header-paper);box-shadow:0 10px 20px #27160720}
.hh-site-nav li:hover > .sub-menu,.hh-site-nav li:focus-within > .sub-menu{display:block}
.hh-site-nav .sub-menu .sub-menu{top:0;left:100%}
.hh-site-nav .sub-menu a{min-height:44px;white-space:normal}
@media (min-width:1200px){
.hh-site-header--inner .hh-header-inner{grid-template-columns:auto minmax(0,1fr) auto}
.hh-site-header--inner .hh-brewery--desktop{grid-column:3}
}
@media (max-width:1199px){
.hh-site-nav > ul{flex-wrap:wrap}
.hh-site-nav .sub-menu,.hh-site-nav .sub-menu .sub-menu{display:block;position:static;min-width:0;padding:0 0 0 14px;border-left:1px solid #382a192a;box-shadow:none}
}
body.admin-bar .hh-site-header{top:var(--hh-admin-offset,32px)}
body.admin-bar .hh-skip-link{top:calc(var(--hh-admin-offset,32px) + 12px)}
@media (max-width:782px){
body.admin-bar .hh-site-header{top:var(--hh-admin-offset,46px)}
body.admin-bar .hh-skip-link{top:calc(var(--hh-admin-offset,46px) + 12px)}
}