/*
 * Approved October 22 additions on top of styles.css: return navigation, the magenta corner circle,
 * the living hero photograph, the manifesto heat fill, the My world order and opening hours.
 * Motion is scoped to html.sj-fx, which is only set when the visitor has not asked for reduced motion.
 */
:root{--fx-ease:cubic-bezier(.2,.75,.1,1)}

/* ---------------------------------------------------------------- Magenta corner circle */
/* The Spanish skin waits in the corner of the English page; switching language grows it to fill the page. */
/* The circle is sized from the hero itself (container units), so its whole lower curve always
   fits above the hero's bottom edge; only the top and right bleed off the page. */
.hero-circle{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;container-type:size;
  --circle-x:calc(96cqw - 35px);--circle-y:58px;--circle-r:max(0px,min(52.8cqw,730px,calc(100cqh - 58px - 28px)))}
.hero-circle::before{content:'';position:absolute;left:calc(var(--circle-x) - var(--circle-r));top:calc(var(--circle-y) - var(--circle-r));width:calc(var(--circle-r) * 2);height:calc(var(--circle-r) * 2);border-radius:50%;background:url('assets/print-grain.svg'),linear-gradient(155deg,#842553 0%,#962653 45%,#a42a4c 100%);background-size:240px 240px,100% 100%}
html:not([lang|="es"]) .site-header .desktop-nav a{color:var(--cream)}
html:not([lang|="es"]) body:not(.mobile-menu-open) .site-header .menu-toggle span{background:var(--cream)}
/* Spanish mirrors it: the English page's cream-tan waits in the same corner of the magenta page. */
html[lang|="es"] .hero-circle::before{background:url('assets/print-grain.svg'),linear-gradient(155deg,#f6efdd 0%,#efe4ca 55%,#e8dbbb 100%);background-size:240px 240px,100% 100%}
html[lang|="es"] .site-header .desktop-nav a{color:var(--ink)}
html[lang|="es"] .site-header .desktop-nav a:hover{color:#aa2850;border-color:#aa2850}
html[lang|="es"] body:not(.mobile-menu-open) .site-header .menu-toggle span{background:var(--ink)}
@media(max-width:800px){.hero-circle{--circle-x:calc(100cqw - 60px);--circle-y:20px;--circle-r:125px}}
/* Switching language is a quiet crossfade. The header (logo), the hero photo card and the circle
   each fade in place on their own layer, so nothing sweeps across them or doubles up. */
html.fx-vt-fade .site-header{view-transition-name:sj-header}
html.fx-vt-fade .hero-visual{view-transition-name:sj-hero-card}
html.fx-vt-fade .hero-circle{view-transition-name:sj-circle}
html.fx-vt-fade::view-transition-group(*){animation-duration:.6s;animation-timing-function:ease}
html.fx-vt-fade::view-transition-old(*),html.fx-vt-fade::view-transition-new(*){animation-duration:.6s;animation-timing-function:ease}
html.fx-vt-fade::view-transition-group(sj-header),html.fx-vt-fade::view-transition-group(sj-hero-card),html.fx-vt-fade::view-transition-group(sj-circle){animation:none}

/* ---------------------------------------------------------------- Living hero photograph */
.fx-heat{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .9s ease}
.fx-heat.is-live{opacity:1}

/* ---------------------------------------------------------------- Return navigation (desktop) */
.fx-nav{display:none}
@media(min-width:801px){
  html.sj-fx-ready .fx-nav:not([hidden]){display:block}
  .fx-nav{position:fixed;top:14px;left:50%;z-index:45;width:min(1140px,calc(100% - 40px));translate:-50% calc(-100% - 40px);opacity:0;pointer-events:none;transition:translate .6s var(--fx-ease),opacity .35s}
  .fx-nav.is-shown{translate:-50% 0;opacity:1;pointer-events:auto}
  html.sj-fx-ready{scroll-padding-top:100px}
}
.fx-nav-bar{display:flex;align-items:center;gap:16px;padding:7px 7px 7px 16px;border:1px solid #201f1917;border-radius:999px;background:rgb(248 243 230 / 96%);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);box-shadow:0 18px 40px -22px #201f1999,inset 0 1px 0 #fffdf6aa}
.fx-nav-logo{display:block;flex:0 0 auto;line-height:0;border-radius:12px}
.fx-nav-logo img{width:auto;height:38px}
.fx-nav-logo .fx-logo-cream{display:none}
.fx-nav-links{position:relative;display:flex;align-items:center;gap:2px;margin-left:auto}
.fx-nav-links a{position:relative;z-index:1;padding:12px 16px;border-radius:999px;color:var(--ink);font:700 12px/1 var(--body);letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;transition:color .3s}
.fx-nav-links a:hover{color:#cd301f}
.fx-nav-links a.is-active,.fx-nav-links a.is-active:hover{color:var(--ink)}
.fx-nav-indicator{position:absolute;left:0;top:0;width:var(--fx-w,0px);height:100%;border-radius:999px;background:var(--lime);opacity:var(--fx-o,0);translate:var(--fx-x,0px) 0;transition:translate .55s var(--fx-ease),width .55s var(--fx-ease),opacity .3s}
.fx-nav-language{min-width:62px;min-height:40px;padding:0 12px;border:1px solid #201f1933;border-radius:999px;background:transparent;color:var(--ink);font:500 12px/1 var(--body);letter-spacing:.08em}
.fx-nav-language strong{font-weight:800}
.fx-nav-language:hover{border-color:var(--ink)}
.fx-nav-cta{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 20px;border-radius:999px;background:var(--ink);color:var(--cream);font:700 12px/1 var(--body);letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;transition:background .3s}
.fx-nav-cta svg{width:13px;height:13px}
.fx-nav-cta:hover{background:#cd301f}
.fx-nav a:focus-visible,.fx-nav button:focus-visible{outline:2px solid #cd301f;outline-offset:3px}
.fx-nav-progress{position:absolute;left:34px;right:34px;bottom:-1px;height:2px;overflow:hidden;border-radius:2px;pointer-events:none}
.fx-nav-progress span{display:block;height:100%;transform-origin:0 50%;scale:var(--fx-p,0) 1;background:linear-gradient(90deg,#cd301f,#f07a2a 60%,var(--lime))}
html[lang|="es"] .fx-nav-bar{border-color:#f3edd924;background:rgb(41 18 34 / 92%);box-shadow:0 18px 40px -22px #12050c,inset 0 1px 0 #f3edd91c}
html[lang|="es"] .fx-nav-logo .fx-logo-ink{display:none}
html[lang|="es"] .fx-nav-logo .fx-logo-cream{display:block}
html[lang|="es"] .fx-nav-links a,html[lang|="es"] .fx-nav-language{color:var(--cream)}
html[lang|="es"] .fx-nav-links a:hover{color:var(--lime)}
html[lang|="es"] .fx-nav-links a.is-active{color:var(--ink)}
html[lang|="es"] .fx-nav-language{border-color:#f3edd940}
html[lang|="es"] .fx-nav-cta{background:var(--lime);color:var(--ink)}
html[lang|="es"] .fx-nav-cta:hover{background:var(--cream)}
html[lang|="es"] .fx-nav a:focus-visible,html[lang|="es"] .fx-nav button:focus-visible{outline-color:var(--lime)}
@media(min-width:801px) and (max-width:1100px){.fx-nav-links a{padding:12px 11px;letter-spacing:.07em}.fx-nav-bar{gap:10px}.fx-nav-logo img{height:32px}}
html.sj-calm .fx-nav,html.sj-calm .fx-nav-indicator{transition:none}

/* ---------------------------------------------------------------- My world, then the manifesto */
/* MORE THAN THE APRON introduces the photographs; FLAVOR YOU REMEMBER leads into the brewery. */
html body .life-section>.life-intro{margin:0 0 clamp(18px,2.4vw,36px)}
.chef-section+.life-section{padding-top:clamp(56px,7vw,110px)}
.life-section+.manifesto{padding-top:clamp(28px,4vw,64px)}
@media(max-width:800px){html body .life-section>.life-intro{margin-bottom:22px}}

/* ---------------------------------------------------------------- Manifesto heat fill */
/* The outline fills left to right as it passes; it reads clearly at every point. */
html.sj-fx .manifesto{overflow:hidden}
html.sj-fx .manifesto .manifesto-top{display:inline-block;translate:calc(var(--fx-drift,0) * -3vw) 0}
html.sj-fx .manifesto .last-line{translate:calc(var(--fx-drift,0) * 2vw) 0}
html.sj-fx .manifesto .manifesto-last-word{background:linear-gradient(90deg,#cd301f 0 50%,transparent 50.4%) no-repeat;background-size:200% 100%;background-position:calc((1 - var(--fx-fill,0)) * 100%) 0;-webkit-background-clip:text;background-clip:text}
html.sj-fx[lang|="es"] .manifesto .manifesto-last-word{background-image:linear-gradient(90deg,var(--cream) 0 50%,transparent 50.4%)}

/* ---------------------------------------------------------------- Opening hours */
.brewery-details address:has(+ .visit-hours){margin-bottom:16px}
.visit-hours{margin:0 0 28px}
.visit-hours .eyebrow{margin:0 0 8px;opacity:.85}
.visit-hours dl{display:grid;grid-template-columns:auto 1fr;gap:2px 22px;margin:0;font-size:16px;line-height:1.6}
.visit-hours dt{font-weight:700}
.visit-hours dd{margin:0}
@media(max-width:540px){.visit-hours dl{font-size:15px}}

@media print{.fx-nav,.fx-heat,.hero-circle{display:none!important}}