/* HEBÉA Homepage v2 — the rest of the stylesheet (loaded as a file), generated by wp/tools/split_css.py from assets/css/site.css (the single source; edit that, then rebuild) */
html.is-docked .mega{top:0;height:100svh;max-height:none;padding-top:calc(1rem + 3rem + 2 * max(1vw,.5rem) + 1rem + env(safe-area-inset-top))}
html.is-docked .mega{border-top:0}
html.film-full .dock,html.film-full .intro__dust,html.film-full .fx{visibility:hidden}
html.film-on .intro__dust,html.film-on .fx{visibility:hidden}
/* r41 — the mega menu is "the four hours": the four lines (name + hour), the products of the line that is on, its still
   (r44: hero-<line> inside .mega__cover in the line's link, so the cover is the category link; the clip plays over it when it can — site.js), behind everything the same still blurred.
   One line is on at a time — desktop: hover or focus; phones: a tap opens the line under its name. One effect: the worlds cross-fade (--mega-t).
   r42 (Ivo, after r41 in Chrome): the still at the left edge, full height; names and products at the right (the pointer stays near the pill);
   the lists start level with the first name; a gold hairline draws in before the name / product under the pointer and the text slides right;
   the menu's own gold dust over the whole menu (.mega__dust, site.js); the menu fades in .25 s; cart and account as icons (.ico). */
.mega{position:fixed;left:0;right:0;top:calc(var(--nav-h) + var(--nav-offset));height:calc(100svh - var(--nav-h) - var(--nav-offset));overflow:auto;background:var(--navy);border-top:1px solid rgba(214,171,145,.14);box-shadow:0 1.875rem 3.75rem rgba(0,0,0,.5);will-change:opacity;--mega-t:.4s;--mega-top:calc(var(--nav-h) + var(--nav-offset));--names-w:clamp(12rem,20vw,17rem);--mega-gap:clamp(3rem,5vw,5rem);--list-w:20rem;--cover-w:45vw;--inner-left:50vw;opacity:0;transition:opacity .5s var(--ease)}   /* r45: the cover is 45 % (≤ 48rem), the block of names + lists is centred in the rest; --list-w, --cover-w and --inner-left are set by site.js (fitMega) on every open and resize */
.mega.is-in{opacity:1}
.mega.is-out{opacity:0;transition-duration:.35s}   /* r49: the exit is quicker than the entrance, as the film's */
html.is-docked .mega{--mega-top:0px}
.mega__bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}   /* site.js clones the four <picture>s in here on the first open */
.mega__bg picture{position:absolute;left:-1%;top:-1%;width:14.5%;height:14.5%;transform:scale(8);transform-origin:0 0;will-change:transform;opacity:0;visibility:hidden;transition:opacity var(--mega-t) var(--ease),visibility 0s linear var(--mega-t)}   /* r46: blurred small (3px at 1/8 = 24px), scaled up by the compositor */
.mega__bg picture.is-on{opacity:1;visibility:visible;transition-delay:0s}
.mega__bg img{width:100%;height:100%;object-fit:cover;filter:blur(3px) saturate(.9);opacity:.4}
.mega__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgb(var(--navy-rgb) / .55),rgb(var(--navy-rgb) / .85))}   /* r42: the veil is thickest at the right, under the names and the lists */
.mega__dust{position:fixed;left:0;top:var(--mega-top);width:100%;height:calc(100% - var(--mega-top));pointer-events:none;z-index:1}   /* r42: the menu's own dust, drawn by site.js while the menu is open */
.mega__inner{position:relative;min-height:100%;display:flex;flex-direction:column;justify-content:center;margin-left:var(--inner-left);width:calc(var(--names-w) + var(--mega-gap) + var(--list-w) + var(--gutter));padding:1.75rem var(--gutter) 1.375rem 0}   /* r45: the block is as wide as its text (the widest link + its slide) and centred between the cover and the pill's edge */
.mega__lines{position:relative;display:flex;flex-direction:column;gap:clamp(1rem,3vh,2rem);min-height:22rem;margin:0}
.mega__line{display:flex;flex:0 0 auto;justify-content:flex-end}   /* r46 (Ivo): the names at the right, the products at the left, next to the cover */
.mega__tile{position:relative;display:flex;align-items:center;width:var(--names-w);margin-left:var(--mega-gap);padding:0;color:var(--ivory)}   /* the margin is the names–products gap (site.js reads it) */
.mega__cover{position:fixed;left:0;top:var(--mega-top);bottom:0;width:var(--cover-w);overflow:hidden;background:var(--navy-2);visibility:hidden;pointer-events:none}   /* r44: the cover (the hero still, or the line's clip) — it switches with a cut, no fade (Ivo) */
.mega__cover img,.mega__cover video{display:block;width:100%;height:100%;object-fit:cover}
.mega__cover video{position:absolute;inset:0;opacity:0}
.mega__cover.is-clip picture{visibility:hidden}   /* a clip is on its way: no still under it (it is not the clip's first frame) — navy until the first frame */
.mega__cover.has-frame video{opacity:1}
.mega__line.is-on .mega__cover{visibility:visible;pointer-events:auto}
.mega__meta{position:relative;display:flex;flex-direction:column;gap:.375rem;transform:translateX(0);transition:transform var(--mega-t) var(--ease)}
.mega__line.is-on .mega__meta{transform:translateX(.75rem)}   /* r43: the vertical hairline (1px) stands where the name stood, .75rem before the text */
.mega__meta::before{content:"";position:absolute;left:-.75rem;top:0;bottom:0;width:1px;background:var(--gold);transform:scaleY(0);transform-origin:top;transition:transform var(--mega-t) var(--ease)}
.mega__line.is-on .mega__meta::before{transform:scaleY(1)}
.mega__name{position:relative;font:300 clamp(1.77rem,2.42vw,2.33rem)/1 var(--display);opacity:.7;transition:opacity var(--mega-t) var(--ease),color var(--mega-t) var(--ease)}
.mega__cat{font:500 .6rem/1.3 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);opacity:.75;transition:opacity var(--mega-t) var(--ease)}
.mega__line.is-on .mega__name,.mega__tile:hover .mega__name,.mega__line.is-on .mega__cat{opacity:1}
.mega__tile:hover .mega__name{color:var(--gold-hover)}
.mega__list{position:absolute;top:var(--list-top,.25rem);bottom:0;left:0;width:var(--list-w);display:flex;flex-direction:column;justify-content:flex-start;margin:0;overflow:auto;font-size:1rem;white-space:nowrap;line-height:2.1;color:var(--ivory-2);opacity:0;visibility:hidden;transition:opacity var(--mega-t) var(--ease),visibility 0s linear var(--mega-t)}
.mega__line.is-on .mega__list{opacity:1;visibility:visible;transition-delay:0s}
.mega__list a{position:relative;display:inline-block;padding:.45em 0;margin:-.45em 0;transform:translateX(0);transition:transform var(--mega-t) var(--ease),color .3s}   /* the hit area is ≈ 47px on phones, the layout does not move (the r40 № 6 trick) */
.mega__list a::after{content:"";position:absolute;left:-1.25rem;top:50%;width:.75rem;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform var(--mega-t) var(--ease)}
.mega__list a:hover,.mega__list a:focus-visible{color:var(--gold-hover);transform:translateX(1.25rem)}
.mega__list a:hover::after,.mega__list a:focus-visible::after{transform:scaleX(1)}
.mega__all{color:var(--gold)}
/* r43: the archive link of a list ("All …") — the "[+]" comes from CSS (the label stays clean for WordPress; hidden from screen readers) and breathes on hover instead of a line; the same in the footer */
.mega__all::before,.footer__all::before{content:"[+]" / "";display:inline-block;margin-right:.4em;letter-spacing:0;transition:letter-spacing var(--mega-t,.4s) var(--ease)}
.mega__all:hover::before,.mega__all:focus-visible::before,.footer__all:hover::before,.footer__all:focus-visible::before{letter-spacing:.3em}
.mega__all::after{display:none}
.mega__list .mega__all:hover,.mega__list .mega__all:focus-visible{transform:none}   /* beats .mega__list a:hover */
.mega__foot{display:flex;flex-wrap:wrap;align-items:center;gap:1.375rem;margin-top:1.375rem;padding-top:1rem;border-top:1px solid rgba(214,171,145,.14);font:500 .72rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase}
.mega__foot a{padding:.8em 0}
.mega__foot .nav__cart{margin-left:auto}
.mega__foot .nav__account,.mega__foot .nav__cart{padding:.25em 0}

/* ---------- hero ---------- */
/* ivory field with the same margin on all four sides (--hx left/right, --htop above, --hbot below the cards) */
.hero{position:relative;background:var(--ivory);overflow:clip;isolation:isolate;--hx:clamp(.875rem,2.2vw,2.625rem);--htop:var(--hx);--hbot:var(--hx)}
.hero__stage{position:sticky;top:0;height:100svh;min-height:35rem;overflow:hidden}
/* narrow screens: a scroll-stop section; the vertical scroll walks through the four panels (site.js adds .is-pinned) */
.hero.is-pinned{height:calc(100svh + 3 * 70svh)}
.hero.is-pinned .hero__panels{scroll-snap-type:none}
.hero__dots{display:none;position:absolute;left:0;right:0;top:calc(var(--htop) + 1rem);z-index:4;justify-content:center;gap:.625rem;pointer-events:none}
.hero__dots span{width:.375rem;height:.375rem;border-radius:50%;background:rgba(247,238,233,.45);transition:background .3s,transform .3s}
.hero__dots span.is-on{background:var(--gold);transform:scale(1.35)}
.hero.is-pinned .hero__dots,.hero.has-dots .hero__dots{display:flex}
.hero__panels{position:absolute;top:var(--htop);left:var(--hx);right:var(--hx);bottom:var(--hbot);display:flex;gap:.375rem}
.panel{position:relative;flex:1 1 0;min-width:0;overflow:hidden;cursor:default;transition:flex var(--cards-t) var(--ease-soft);background:var(--navy-2)}
.panel::after{content:"";position:absolute;inset:0;background:rgb(var(--navy-rgb) / 0);transition:background var(--cards-t) var(--ease-soft);pointer-events:none}
.hero__panels.has-active .panel:not(.is-active)::after{background:rgb(var(--navy-rgb) / .5)}
.hero__panels.has-active .panel.is-active{flex:2.4 1 0}
.panel__still,.panel__secret,.panel__clip{position:absolute;inset:0}
/* the four stills are requested after the page has loaded (they sit in the first screen below the film and must not
   compete with its LCP image) and fade in */
.panel__still{opacity:0;transition:opacity .7s var(--ease)}
.panel__still.is-in{opacity:1}
.panel__still img,.panel__secret img,.panel__clip{width:100%;height:100%;object-fit:cover}
.panel__still img{transform:none}   /* r38a: no slow settle on load (Ivo) */
.panel__clip{opacity:0}   /* r38a: a hard cut from the still to the clip — the motion covers it (Ivo); the Aura panel's second still keeps its fade (no motion to cover a cut) */
.panel.is-playing .panel__clip{opacity:1}
.panel__secret{opacity:0;transition:opacity .5s var(--ease)}   /* r39: only Aura keeps a second still (its hover image); the hold-to-reveal is gone (Ivo) — see handoff/ideas/hold-to-reveal.md */
.panel__cap{position:absolute;inset:0;padding:0 clamp(.875rem,2.2vw,1.875rem) var(--cap-pb,clamp(10.5rem,23vh,14.5rem));display:flex;flex-direction:column;justify-content:flex-end;gap:.25rem;color:var(--ivory);background:linear-gradient(180deg,rgb(var(--navy-rgb) / 0) 0%,rgb(var(--navy-rgb) / .06) 18%,rgb(var(--navy-rgb) / .24) 36%,rgb(var(--navy-rgb) / .5) 50%,rgb(var(--navy-rgb) / .72) 60%,rgb(var(--navy-rgb) / .84) 70%,rgb(var(--navy-rgb) / .9) 85%,rgb(var(--navy-rgb) / .92) 100%);pointer-events:none}
.panel__text{display:flex;flex-direction:column;gap:.25rem;align-self:flex-start;max-width:100%;pointer-events:auto;cursor:pointer;color:inherit;text-decoration:none;border-radius:2px}
/* each card is one link: the caption link (name, hour, legend · price, Explore) reaches over the whole card with its
   ::after (the card clips it); the keyboard focus ring is drawn round the card */
.panel__text::after{content:"";position:absolute;left:0;right:0;bottom:0;height:300vh}
.panel__text:focus-visible{outline:none}
.panel::before{content:"";position:absolute;inset:.4375rem;border:2px solid var(--gold);opacity:0;pointer-events:none;z-index:4;transition:opacity .2s}   /* r40 (№ 10): Chrome paints a parent's inset outline under its positioned children — the ring is a layer of its own */
.panel:has(.panel__text:focus-visible)::before{opacity:1}
.panel__text:hover{color:inherit}
/* r39b (Ivo): on hover the name and the hour lift a little and "Explore …" fades in under them; on touch the active panel of the walk does the same */
.panel__text{transition:transform .45s var(--ease)}
.panel__link{display:block;height:0;overflow:visible;padding-top:.45rem;font:500 .66rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);white-space:nowrap;opacity:0;transform:translateY(.3rem);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.panel__link::after{content:"→";margin-left:.6em}
.panel.is-media .panel__text{transform:translateY(-1.15rem)}
.panel.is-media .panel__link{opacity:1;transform:none;transition-delay:.08s}
@media (hover:none){.panel.is-current .panel__text{transform:translateY(-1.15rem)}.panel.is-current .panel__link{opacity:1;transform:none;transition-delay:.08s}
}

.panel__name{font:300 clamp(1.4rem,2.42vw,2.42rem)/1 var(--display);text-shadow:0 2px 1.125rem rgba(0,0,0,.6);color:var(--ivory);transition:color var(--cards-t) var(--ease-soft)}
.panel.is-active .panel__name{color:var(--gold)}
.panel.is-active .panel__hour{color:var(--ivory)}
.hero__panels.has-active .panel:not(.is-active) .panel__hour{opacity:0}   /* r40 (№ 12): a narrowed column would cut its hour line with an ellipsis — it fades while a neighbour is wide */
/* Aura has no clip: its second picture is the emblem, slowly closing in (demo) */
.panel--secret.is-media .panel__secret{opacity:1}   /* r38: was .panel--kenburns; the slow zoom and the candle glow are gone (Ivo), the hover image stays */
.panel--secret .panel__secret img{transition:transform 9s linear}
.panel--secret.is-media .panel__secret img{transform:scale(1.1)}
.panel__hour{font:500 .62rem/1.4 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);transition:color var(--cards-t) var(--ease-soft),opacity .4s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero__copy{position:absolute;left:0;right:0;bottom:calc(var(--hbot) + clamp(1.125rem,4.5vh,2.75rem));z-index:3;text-align:center;padding:0 var(--gutter);pointer-events:none}
/* one navy gradient across the bottom of all four cards (inside the outer white frame, over the gaps between cards): the backdrop of the headline and the button */
/* no shared gradient over the cards any more: each card has its own (r8) */
.hero__headline{font:300 clamp(1.86rem,1.02rem + 2.98vw,3.91rem)/1.05 var(--display);color:var(--ivory);text-shadow:0 2px 1.875rem rgba(0,0,0,.75),0 0 3.75rem rgb(var(--navy-rgb) / .6);margin-bottom:clamp(.75rem,2vh,1.375rem);pointer-events:auto;cursor:default}
.hero__actions{display:inline-flex;gap:.875rem;align-items:center;pointer-events:auto}
/* while held, a gold line runs once round the frame (clockwise from the top left) and a soft glow grows with it */
/* a one-time hint of the gesture: the line starts round the button and runs back (site.js teaseHold) */
/* the gold line as a comet, like the scroll cue under the film (r20): the run so far, dim; a brighter tail; a bright head; a soft glow */
/* gold dust canvas over the plate (site.js dust); drawn only while the line moves */
/* "press and hold" starts the hold too */
/* revealed: the button steps aside and Shop All takes its place; on phones the headline steps aside too */
.hero__headline{max-height:2.4em;transition:opacity .6s var(--ease),transform .7s var(--ease),max-height .6s var(--ease),margin .6s var(--ease),visibility 0s}
/* phones fold the headline away on reveal; on desktop it stays in the plate (Ivo, r8) */
/* the headline stays after the reveal on phones too (r22: it sits on the plate) */
/* Shop All: navy-3 with white text (Ivo r16); hover deep gold (5.3:1) */
.hero__shop{background:var(--navy-3);border-color:var(--navy-3);color:#fff}
@media (hover:hover){.hero__shop:hover{background:var(--navy);border-color:var(--navy-3);color:var(--gold)}
}
   /* r59 (Ivo): hovered like every button — the page's navy, gold text, the navy-3 frame with the comet (r58: its rest colours; r22–r57: gold-deep) */   /* no sticky hover after a tap (r22) */
.scrollcue{position:absolute;left:50%;bottom:.875rem;z-index:2;width:1px;height:1.75rem;margin-left:-.5px;overflow:hidden;opacity:.7}
.scrollcue span{display:block;width:100%;height:100%;background:linear-gradient(180deg,transparent,var(--gold))}
html.is-loaded .scrollcue span{animation:cue 2.4s ease-in-out infinite}

/* ---------- film ---------- */
.film{position:relative;height:85svh;min-height:30rem;background:var(--navy);overflow:hidden;isolation:isolate;transition:height .8s var(--ease),min-height .8s var(--ease)}
/* 75svh so the Four Worlds already show below; the stage opens to the full screen while the film plays */
.film.is-playing{height:100svh;min-height:37.5rem}
.film__stage{position:absolute;inset:0}
.film__still,.film__loop{position:absolute;inset:0}
.film__still img,.film__loop{width:100%;height:100%;object-fit:cover}
.film__loop{opacity:0;transition:opacity 1.2s}
.film.is-looping .film__loop{opacity:1}
.film__scrim{position:absolute;inset:0;background:rgba(1,15,33,.55);transition:opacity .6s}
/* the copy sits in a centred dark panel; the film shows round it (Ivo, r10) */
.film__copy{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:80%;max-width:45rem;min-height:75%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem var(--gutter);background:rgba(7,11,31,.81);transition:opacity .5s,visibility 0s;z-index:0}
/* no glow behind the copy: the even overlay carries it (Ivo, r8) */
.film__title{font:300 clamp(2.23rem,1.49rem + 2.05vw,4.09rem)/1.05 var(--display);letter-spacing:.015em;color:var(--gold);text-shadow:0 2px 1.875rem rgba(0,0,0,.6);margin:0 0 .42em}
.film__lede{font:300 clamp(1.2rem,.95rem + .65vw,1.7rem)/1.14 var(--body);color:var(--ivory);text-shadow:0 1px 1.125rem rgba(0,0,0,.6);margin:0 0 .7em}
.film__line{font-weight:300;font-size:clamp(.95rem,.82rem + .35vw,1.2rem);color:var(--ivory);max-width:44ch;margin-bottom:1.6rem;text-shadow:0 1px .875rem rgba(0,0,0,.6)}
.film__playicon{width:0;height:0;border-left:.7em solid currentColor;border-top:.42em solid transparent;border-bottom:.42em solid transparent;margin-left:.1em}
.film.is-playing .film__copy{opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s linear .5s}
.film.is-playing .film__scrim,.film.is-playing .film__still,.film.is-playing .film__loop{opacity:0}
.film.is-playing .scrollcue{display:none}
/* player: a 16:9 frame at 75 % of the viewport height (desktop), centred; tools under its right edge */
.film__player{--fmaxw:92vw;--fh:min(calc(var(--fmaxw) * 9 / 16),75svh);position:absolute;inset:0;background:var(--navy)}
.film__frame{position:absolute;left:50%;top:50%;width:calc(var(--fh) * 16 / 9);height:var(--fh);transform:translate(-50%,-50%);background:#000;box-shadow:0 1.875rem 5.625rem rgba(0,0,0,.55)}
.film__video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
/* ambience (r26): a soft glow in the colours of the frame playing, behind the player (a tiny canvas, scaled and blurred) */
.film__ambient{position:absolute;left:50%;top:50%;width:calc(var(--fh) * 16 / 9 * 1.3);height:calc(var(--fh) * 1.45);transform:translate(-50%,-50%);
  filter:blur(5rem) saturate(1.1);opacity:0;transition:opacity 1.6s var(--ease-soft);pointer-events:none}
.film__ambient.is-on{opacity:.28}   /* a faint glow: the navy stays the main colour (Ivo, r26) */
.film__player:fullscreen .film__ambient,.film.is-landscape .film__ambient{display:none}
.film__video::cue{font:400 clamp(1.15rem,1.75vw,1.6rem)/1.75 var(--body);color:var(--ivory);background:rgb(var(--navy-rgb) / .72)}   /* r32: a little larger; the cues sit one line above the bottom (line:-2 in the .vtt); ::cue takes no padding, so the line height gives the vertical air and a no-break space at both ends of each line (in the .vtt) the horizontal */
.film__tools{position:absolute;top:calc(50% + var(--fh) / 2 + .875rem);right:calc(50% - var(--fh) * 8 / 9);display:flex;gap:.625rem;transition:opacity .4s}
.film__tool,.film__close{min-height:2.75rem;border:1px solid var(--gold);color:var(--gold);border-radius:0;background:rgb(var(--navy-rgb) / .6);transition:background .3s,color .3s}
.film__tool{width:2.75rem;display:grid;place-items:center}
.film__close{padding:.7em 1.3em;font:500 .7rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase}
.film__tool:hover,.film__close:hover{background:var(--gold);color:var(--navy)}
.film__icon{width:1.25rem;height:1.25rem}
.film__icon--collapse{display:none}
.film__player:fullscreen .film__icon--expand,.film__player.is-fs .film__icon--expand{display:none}
.film__player:fullscreen .film__icon--collapse,.film__player.is-fs .film__icon--collapse{display:block}
/* end card: over the last frame, leads to the Four Worlds */
.film__end{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.875rem,2.4vh,1.5rem);padding:0 var(--gutter);text-align:center;background:radial-gradient(ellipse at 50% 50%,rgb(var(--navy-rgb) / .78) 0%,rgb(var(--navy-rgb) / .9) 70%);opacity:0;transition:opacity .7s var(--ease)}
.film__end.is-on{opacity:1}
.film__end-lines{font:300 clamp(1.4rem,0.93rem + 2.05vw,2.79rem)/1.1 var(--display);color:var(--ivory)}
.film__end-go{gap:.8em}
.film__end-arrow{width:.875rem;height:.875rem}
html.is-loaded .film__end.is-on .film__end-arrow{animation:endarrow 1.8s ease-in-out 3}   /* r38: three pulses, then still (Ivo) */
@keyframes endarrow{0%,100%{transform:translateY(-1px)}50%{transform:translateY(3px)}}
.film__end-again{min-height:2.75rem;padding:.6em 1em;font:500 .66rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--ivory);opacity:.85;text-decoration:underline;text-underline-offset:.4em;text-decoration-color:rgba(214,171,145,.6)}
.film__end-again:hover{color:var(--gold-hover);opacity:1}
.film.is-phone:not(.is-landscape) .film__end-lines{font-size:1.07rem}
.film.is-phone:not(.is-landscape) .film__end{gap:.625rem}
.film.is-phone:not(.is-landscape) .film__end-go{min-height:2.5rem;padding:.7em 1.2em;font-size:.68rem}
.film.is-phone:not(.is-landscape) .film__end-again{min-height:2.25rem}
.film.is-ended .film__rotate{visibility:hidden}
/* r33: the rotate hint is a button — a tap enters full screen for phones whose auto-rotate is off */
.film__rotate{background:none;border:0;padding:.5rem .75rem;cursor:pointer;pointer-events:auto;text-align:center;color:inherit;font:inherit}
.film__rotate-or{display:block;margin-top:.1rem;color:var(--gold);text-decoration:underline;text-underline-offset:.2em}
/* browser full screen (the icon) */
.film__player:fullscreen{--fmaxw:100vw;--fh:min(calc(100vw * 9 / 16),100vh);background:#000}
.film__player:fullscreen .film__frame{box-shadow:none}
.film__player:fullscreen .film__tools{top:1rem;right:1rem}
.film__player:fullscreen.is-idle{cursor:none}
.film__player:fullscreen.is-idle .film__tools{opacity:0;pointer-events:none}
/* phones: rotate hint in portrait, the whole screen in landscape */
.film__rotate{display:none;position:absolute;left:0;right:0;top:calc(50% + var(--fh) / 2 + 4.75rem);flex-direction:column;align-items:center;gap:.625rem;color:var(--ivory);font:500 .66rem/1.3 var(--body);letter-spacing:.2em;text-transform:uppercase;text-align:center;padding:0 var(--gutter)}
.film__rotate-icon{width:3.5rem;height:3.5rem;color:var(--gold)}
.film__rotate-phone{transform-origin:2rem 2rem;animation:rotatephone 2.8s var(--ease) 3}   /* r38: three turns, then still (Ivo) */
.film__rotate-arrow{animation:rotatearrow 2.8s ease-in-out 3}
@keyframes rotatephone{0%,18%{transform:rotate(0)}48%,78%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
@keyframes rotatearrow{0%,18%{opacity:1}40%,100%{opacity:0}}
.film.is-phone .film__player{--fmaxw:100vw}
.film.is-phone.is-playing:not(.is-landscape) .film__rotate{display:flex}
.film.is-phone.is-playing:not(.is-landscape) .film__tools{right:1rem}
.film.is-phone.is-landscape.is-playing{isolation:auto}
.film.is-phone.is-landscape .film__player{position:fixed;inset:0;z-index:300;--fh:min(calc(100vw * 9 / 16),100dvh);background:#000}
.film.is-phone.is-landscape .film__frame{box-shadow:none}
.film.is-phone.is-landscape .film__tools{top:calc(.625rem + env(safe-area-inset-top));right:calc(.625rem + env(safe-area-inset-right))}
.film.is-phone.is-landscape .film__player.is-idle .film__tools{opacity:0;pointer-events:none}
html.film-full,html.film-full body{overflow:hidden}
html.film-full .nav,html.film-full .rail,html.film-full .skip{visibility:hidden}

/* ---------- lines ---------- */
.line,.legend-intro{content-visibility:auto;contain-intrinsic-size:auto 56.25rem}   /* below-the-fold sections skip layout until near: LCP 3.0 s → 2.5 s on Lighthouse mobile */
.legend-intro{contain-intrinsic-size:auto 15.5rem}   /* r37: honest placeholders (content box: the legend is ≈252 px of text on the desktop, 260 on a phone); with 56.25rem the page below jumped 648 px up when the section rendered */
@media (max-width:899px){.line{contain-intrinsic-size:auto 335svh}
}
   /* r37: a phone's category section with its pinned stage is ≈2560 px at 760 px of height; 56.25rem left a 1660 px jump per section */
/* category sections (r17): the photo fills its column at 9:16 and runs the full height of the section; each section after the
   first rises --line-overlap into the one above (its top strip is transparent), so its photo overlaps the upper field */
.line{--line-x:clamp(1rem,3.5vw,4rem);--line-gap:clamp(1.75rem,4.5vw,5rem);--line-col:.38;--line-overlap:2.5rem;--line-bg:var(--ivory);
  position:relative;padding:0;overflow:hidden;background:var(--line-bg)}
.line + .line{margin-top:calc(var(--line-overlap) * -1);background:linear-gradient(to bottom,transparent calc(var(--line-overlap) - 1.5px),var(--line-bg) calc(var(--line-overlap) - 1.5px))}   /* the fill starts 1.5px early so a sub-pixel row never shows the navy body as a line */
/* r35e (desktop): the stills sit in a layer above every section background (z-index 2 inside sections that are not stacking contexts), so each photo hangs over the next section's colour and rises over the previous one's; the next section's clear strip is one overlap tall, so the previous colour ends exactly at its box and the next colour starts right there */
@media (min-width:900px){.line{content-visibility:visible;contain:none}.line__still{position:relative;z-index:2}
}

.line--light{--line-bg:var(--ivory);color:var(--ink)}
.line--dusk{--line-bg:var(--navy);color:var(--ivory)}   /* Aura on the same navy as Ambrosia (Ivo, r27) */
.line--night{--line-bg:var(--navy);color:var(--ivory)}
.line__inner{display:grid;grid-template-columns:calc(var(--line-col) * 100%) 1fr;gap:var(--line-gap);align-items:stretch;max-width:none;margin:0;padding:0 var(--line-x)}
.line--flip .line__inner{grid-template-columns:1fr calc(var(--line-col) * 100%)}
.line--flip .line__still{order:2}
/* the photo is at least 9:16 of its column and stretches if the text is taller; the text sits in the middle beside it */
.line__still{min-height:calc((100vw - 2 * var(--line-x)) * var(--line-col) * 16 / 9);overflow:hidden;border-radius:3px}
.line__body{align-self:center;padding:calc(var(--line-overlap) + clamp(3rem,8vh,6rem)) 0 clamp(3rem,8vh,6rem)}
.line__still img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.8s var(--ease-out)}
.line.is-in .line__still img{transform:none}
/* r35b: the still overhangs its section below as well as above (the next section's clear strip shows it); the parallax is gone (Ivo: too much) */
@media (min-width:900px){.line{overflow:visible}.line__still{margin-bottom:calc(var(--line-overlap) * -1)}.line:not(:has(+ .line)) .line__still{margin-bottom:0}
}

.line__title{font:300 clamp(2.42rem,1.49rem + 3.16vw,4.65rem)/1 var(--display);margin-bottom:.12em}
.line__lead{max-width:52ch;font-size:clamp(1rem,.9rem+.4vw,1.2rem);line-height:1.6;margin-bottom:clamp(3rem,8vh,4.25rem)}   /* spacing as in Ivo's screenshots (r17) */
.line--light .line__lead{color:var(--ink-2);font-weight:300}
.line--dusk .line__lead,.line--night .line__lead{color:var(--ivory)}
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:.375rem;margin-bottom:clamp(3.5rem,9.5vh,5.5rem)}   /* r54 (Ivo): three per line, 265 px cards at 1518 (four were 197) */   /* more air above "Explore …" (Ivo, r17) */
.product a{display:block}
.product picture{aspect-ratio:1;overflow:hidden;border-radius:2px;background:var(--ivory);margin-bottom:1.1rem}
.product img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.product a:hover img,.product.is-peek img{transform:scale(1.05)}
/* the quick-look card over the product (desktop; on touch a tap goes to the product page) */
.pcard{position:absolute;left:0;top:0;z-index:45;width:clamp(17rem,21vw,21rem);background:#fff;border-radius:4px;overflow:hidden;
  box-shadow:0 1.5rem 3.5rem -1rem rgb(var(--navy-rgb) / .45),0 .25rem .75rem rgb(var(--navy-rgb) / .15);opacity:0;transform:translateY(.75rem) scale(.985);transform-origin:50% 0;
  transition:opacity .25s ease,transform .3s ease;pointer-events:none}
/* a soft entrance (r19): long fade and rise on an ease-out curve, the photo settles, the text arrives in a short stagger; quick exit */
.pcard.is-open{opacity:1;transform:none;pointer-events:auto;transition:opacity .55s var(--ease-out),transform .75s var(--ease-out)}
.pcard__media img{transform:scale(1.05);transition:transform .3s ease}
.pcard.is-open .pcard__media img{transform:none;transition:transform 1.2s var(--ease-out)}
.pcard__body > *{opacity:0;transform:translateY(.6rem);transition:opacity .2s ease,transform .2s ease}
/* the text, price and buttons drift in slowly, one after another (Ivo, r19: smoother) */
.pcard.is-open .pcard__body > *{opacity:1;transform:none;transition:opacity .9s cubic-bezier(.33,0,.2,1),transform 1.1s cubic-bezier(.22,1,.36,1)}
.pcard.is-open .pcard__name{transition-delay:.05s}.pcard.is-open .pcard__excerpt{transition-delay:.1s}
.pcard.is-open .pcard__price,.pcard.is-open .pcard__actions{transition:opacity .25s ease,transform .25s ease;transition-delay:0s}   /* r38a (Ivo): the price and Add to Cart are there at once; the name and the excerpt keep the soft fade that softens the entrance */
.pcard__go{opacity:0;transform:none;transition:opacity .2s ease}
.pcard.is-open .pcard__go{opacity:1;transform:none;transition:opacity .55s cubic-bezier(.33,0,.2,1);transition-delay:.4s}   /* r38f (Ivo): More comes last, a fade only — smooth, not sluggish; in by ≈1 s */
.pcard__name{font:400 1.23rem/1.15 var(--display);font-style:italic;color:var(--gold-deep);margin:0 0 .45rem}   /* the legendary name (r26) */
.pcard__media{display:block;aspect-ratio:1;background:#f8ede8}   /* r36: a link to the product (Ivo: on a short screen the buttons are below the fold) */
.pcard__media picture,.pcard__media img{display:block;width:100%;height:100%;object-fit:cover}
.pcard__body{padding:1.1rem 1.25rem 1.25rem;color:var(--ink)}
.pcard__excerpt{font:300 .9rem/1.55 var(--body);color:var(--ink-2);margin:0 0 .85rem}
.pcard__price{font:500 1.05rem/1 var(--body);font-variant-numeric:tabular-nums;color:var(--navy-3);margin:0 0 1rem}
.pcard__actions{display:flex;gap:.5rem}
.pcard__add,.pcard__go{flex:1;min-height:2.75rem;display:inline-flex;align-items:center;justify-content:center;font:500 .68rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--navy-3);border-radius:0;transition:background .3s,color .3s,border-color .3s}
.pcard__add{background:var(--navy-3);color:#fff}
.pcard__add:hover{background:var(--navy);border-color:var(--navy-3);color:var(--gold)}   /* r59 (Ivo): hovered like every button — navy, gold text, the comet in the frame (r58: its rest colours; r27–r57: gold-deep) */
.pcard__go{background:transparent;color:var(--navy-3)}
.pcard__go:hover{background:var(--gold);border-color:var(--gold);color:var(--navy)}   /* gold, unlike Add to Cart (r27) */
.product__name{display:block;font:400 .82rem/1.35 var(--body)}   /* r54 (Ivo): the legendary name comes first, the product name under it */
.product__name,.product__legend{padding-right:.75rem}   /* the photos sit 6px apart (r26); the labels keep room */
.product__legend{display:block;font:400 1.27rem/1.2 var(--display);font-style:italic;color:var(--gold-deep);margin-bottom:.15rem}
.product__price{display:none;font:500 .82rem/1.3 var(--body);letter-spacing:.04em;color:var(--ink);margin-top:.35rem}   /* r35: shown on phones, where there is no hover card */
.products__dots{display:none;justify-content:center;gap:.625rem;margin:-1.9rem 0 1.4rem}
.products__dots span{width:.375rem;height:.375rem;border-radius:50%;background:rgb(var(--navy-rgb) / .22);transition:background .3s,transform .3s}
.products__dots span.is-on{background:var(--gold-deep);transform:scale(1.35)}
.line--dusk .products__dots span,.line--night .products__dots span{background:rgba(247,238,233,.35)}
.line--dusk .products__dots span.is-on,.line--night .products__dots span.is-on{background:var(--gold)}
.line--dusk .product__legend,.line--night .product__legend{color:var(--gold)}
/* entrances */

/* ---------- legend intro ---------- */
.legend-intro{background:var(--navy);padding:clamp(4.5rem,12vh,8.75rem) 0 clamp(3rem,8vh,6rem);text-align:center}
.legend-intro__inner{max-width:45rem;margin:0 auto;padding:0 var(--gutter)}
.legend-intro__title{font:300 clamp(2.23rem,1.49rem + 2.79vw,4.28rem)/1 var(--display);margin-bottom:.5em}
.legend-intro__body{font:400 1.05rem/1.7 var(--body);color:var(--ivory);max-width:62ch;margin:0 auto}

/* ---------- svs chapters (scroll-driven, markup-compatible with scroll-video-section 1.5.1) ---------- */
.svs{position:relative;height:calc(var(--svs-length,150) * 1svh);background:var(--svs-bg1,var(--navy));color:var(--svs-ink,var(--ivory))}
.svs__stage{position:sticky;top:0;height:100svh;overflow:hidden}
.svs__media{position:absolute;inset:0}
.svs__poster,.svs__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--svs-pos,50% 50%)}
.svs__video{opacity:0;transition:opacity .4s}
.svs.is-ready .svs__video{opacity:1}
/* frames mode on touch (r34): the frames are drawn on a canvas, the video stays hidden */
.svs__canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .4s}
.svs.is-ready .svs__canvas{opacity:1}
.svs.is-frames .svs__video{opacity:0!important}
.svs__harvest{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}   /* the hidden second video that yields the frames */
.svs__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgb(var(--navy-rgb) / 0) 0%,rgb(var(--navy-rgb) / 0) 32%,rgb(var(--navy-rgb) / .5) 58%,rgb(var(--navy-rgb) / .8) 80%,rgb(var(--navy-rgb) / .92) 100%)}   /* r35: one soft gradient from the bottom, as in the Four Worlds (Ivo) */
.svs__inner{position:absolute;inset:0;display:flex;padding:calc(var(--nav-h) + 1.5rem) var(--gutter) clamp(7rem,17vh,10.5rem)}   /* r37e: the block sits higher off the section's bottom edge (Ivo: +2rem again) */
.svs--pos-bottom-center .svs__inner{align-items:flex-end;justify-content:center;text-align:center}
.svs--close{--svs-pos:50% 20%}   /* r40 (№ 3): the gold ring fills rows 36–708 of the 900 px frame; at 1518×692 cover crops 162 px — with 20 % the ring's top stays on screen (+2 px) and the water is cut instead */
.svs--pos-bottom-right .svs__inner{align-items:flex-end;justify-content:flex-end;text-align:right}
.svs--pos-bottom-left .svs__inner{align-items:flex-end;justify-content:flex-start;text-align:left}
.svs__content{max-width:min(90vw,53.75rem);position:relative;z-index:0}
/* r35: the radial plate behind the lines is gone (its clipped edge showed as a line); the bottom gradient and the text shadow carry the legibility */
.svs__chap{display:inline-block;font:500 .72rem/1 var(--body);letter-spacing:.26em;text-transform:uppercase;color:var(--ivory);text-shadow:0 1px 1rem rgba(0,0,0,.75),0 0 .4rem rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.6);margin-bottom:1rem}   /* r38: a touch more shadow — the chapter word measured 4.37:1 over the brightest frame at 1280×600 */   /* r36: the plate behind the chapter word is gone (Ivo: it weighed too much with the button); the shadow carries it */
.svs__chap--big{font:300 clamp(2.42rem,1.49rem + 3.35vw,5.02rem)/1 var(--display);letter-spacing:0;text-transform:none;color:var(--ivory);text-shadow:0 2px 1.875rem rgba(0,0,0,.6);margin-bottom:1.4rem}
.svs__line{font:300 clamp(1.58rem,1.02rem + 2.23vw,3.35rem)/1.15 var(--display);color:var(--ivory);text-shadow:0 2px 1.5rem rgba(0,0,0,.65);opacity:0;transform:translateY(1rem);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.svs__line.is-on{opacity:1;transform:none}
.svs__line + .svs__line{margin-top:.3em}
.svs__cta{margin-top:2rem;opacity:0;transform:translateY(.625rem);transition:opacity .5s,transform .5s var(--ease-out),background .3s,color .3s;background:var(--gold);color:var(--navy);border-color:transparent}   /* r37g (Ivo): the standard for the scroll-stop video sections — gold, no border; on hover navy with a gold label */
.svs__cta:hover,.svs__cta:focus-visible{background:var(--navy);color:var(--gold);border-color:var(--navy-3)}   /* r56: the frame is the comet's channel */
.svs__cta.is-on{opacity:1;transform:none}
.svs__cta:not(.is-on){pointer-events:none}   /* r37: no glow from a pointer that happens to rest where the button will appear (Ivo) */
.svs.is-static{height:100svh}
.svs.is-static .svs__line,.svs.is-static .svs__cta{opacity:1;transform:none}
.svs.is-static .svs__cta{pointer-events:auto}   /* r40 (№ 1): the static chapter never sets .is-on — the button must still take the click */
.svs__loader{position:absolute;right:var(--gutter);top:calc(var(--nav-h) + 1rem);width:1.375rem;height:1.375rem;border-radius:50%;border:1px solid rgba(214,171,145,.35);border-top-color:var(--gold);opacity:0;transition:opacity .3s}
.svs.is-loading .svs__loader{opacity:1;animation:spin 1s linear infinite}

/* ---------- footer ---------- */
/* ---------- footer (r37b, Ivo): the live site's footer — same order, same texts — in flat navy, revealed from behind the last section: the page is painted above it,
   the footer is stuck to the screen (its top at the top when it is taller than the screen, its bottom at the bottom when it is not) and the medallion scene lifts off it like a curtain; once the page is gone the footer scrolls on as usual ---------- */
main{position:relative;z-index:1;background:var(--navy)}
/* r37c (Ivo): two rows. The top row (the four categories) is stuck to the screen and revealed first; only when it is fully out does the page scroll on to the bottom row.
   A sticky child cannot leave its parent's box, so the footer starts --fth above its place (a spacer under the page, which is painted over it) to give the top row that room. */
.footer{position:relative;z-index:0;background:var(--navy);color:var(--ivory-2);font-size:.9rem;margin-top:calc(-1 * var(--fth,0px))}
.footer::before{content:"";display:block;height:var(--fth,0px)}
.footer__top{position:sticky;bottom:min(0px,calc(100svh - var(--fth,100svh)));background:var(--navy);padding:clamp(8rem,20vh,12rem) 0 clamp(2rem,5vh,3.5rem)}   /* r54 (Ivo: too close to the last section): 138 px at 692 high, was 83 (r37d: clamp(5rem,12vh,8rem)) */   /* --fth = the top row's height, set by site.js */
.footer__bottom{position:relative;background:var(--navy);padding:clamp(2.5rem,6vh,4rem) 0 calc(2.5rem + env(safe-area-inset-bottom))}
.footer__inner{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);display:flex;flex-direction:column;align-items:center;gap:1.125rem;text-align:center}
.footer__cols{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem clamp(1.5rem,4vw,4rem);text-align:left}
.footer__col ul{list-style:none;margin:0;padding:0}
.footer__col li{margin:0}
.footer__col-title{display:block;margin-bottom:1rem;color:var(--gold);text-decoration:none}
.footer__col-title strong{display:block;font:400 1.35rem/1.1 var(--display);letter-spacing:.06em;text-transform:uppercase}
.footer__col-title span{display:block;font:400 0.88rem/1.3 var(--display);margin-top:.2rem}
.footer__col-title:hover{color:var(--gold-hover)}
.footer__col li a{display:inline-flex;align-items:center;min-height:2.25rem;padding:.15em 0;font:400 .9rem/1.3 var(--body);color:var(--ivory)}
.footer__col li a:hover{color:var(--gold-hover)}
.footer__logo{display:flex;flex-direction:column;align-items:center}   /* r37f: the medallion and the wordmark share one centre (the wordmark sat left, Ivo) */
.footer__medal{display:block;width:7.5rem;height:auto;margin:0 0 .75rem}   /* r37c: the new 2D medallion (SVG, light gold) */
.footer__wordmark img{width:6.5rem;height:auto}
.footer__brand{color:var(--ivory);line-height:1.5;margin:0}
.footer__social{display:flex;gap:.5rem;list-style:none;margin:.25rem 0 0;padding:0}
.footer__social a{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;color:var(--gold)}
.footer__social a:hover{color:var(--gold-hover)}
.footer__social svg{width:1.4rem;height:1.4rem;fill:currentColor}
.footer__links{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem 0;font:400 .9rem/1 var(--body);margin-top:.75rem}
.footer__links a{padding:.9em 1rem;display:inline-flex;align-items:center;min-height:2.75rem;color:var(--ivory);border-left:1px solid rgba(214,171,145,.35)}
.footer__links a:first-child{border-left:0}
.footer__links a:hover{color:var(--gold-hover)}
.footer__legal{line-height:1.7;margin:0}
.footer__legal strong{color:var(--ivory)}
.footer__legal a,.footer__dns a{color:var(--ivory);text-decoration:underline;text-underline-offset:.2em;display:inline-block;padding:.95em 0;margin:-.95em 0}   /* r40 (№ 6): a 44 px target without moving the line */
.footer__legal a:hover,.footer__dns a:hover{color:var(--gold-hover)}
.footer__dns{margin-top:.75rem}
@media (max-width:899px){.footer__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:539px){.footer__cols{gap:1.75rem 1.25rem}.footer__links a{padding:.9em .6rem}
}

@media (max-width:359px){.footer__cols{grid-template-columns:minmax(0,1fr)}
}
   /* two columns down to small phones, so the top row fits one screen and is revealed whole */

/* ---------- progress rail ---------- */
.rail{position:fixed;right:.625rem;top:50%;transform:translateY(-50%);width:2px;height:min(42vh,20rem);background:rgba(214,171,145,.2);z-index:40;pointer-events:none;opacity:0;transition:opacity .5s}
.rail.is-on{opacity:1}
.rail__fill{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--gold);transform-origin:top;transform:scaleY(var(--p,0))}

/* ---------- responsive ---------- */
/* the plate's colours, shared by desktop and phone (r22): deep-gold headline, navy-3 button and hint, the comet line on the border */
.hero__copy .hero__headline{color:var(--gold-deep);text-shadow:none}
.hero__copy .hero__headline{text-shadow:none}
/* ---------- the plate (desktop): headline + button + hint on solid navy, across the edge into the next section ---------- */
@media (min-width:900px){
  .hero{overflow:visible;z-index:2}
  .hero__stage{overflow:visible}
  /* the captions stay at least 2rem clear of the part of the plate that lies over the cards */
  .hero{--cap-pb:calc(var(--plate-h) - var(--plate-out) - var(--hbot) + 2rem)}
  .hero__copy{left:50%;right:auto;bottom:calc(var(--plate-out) * -1);width:clamp(36rem,53vw,62rem);height:var(--plate-h);padding:1.5rem 2rem;
    display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:auto;transform:translateX(-50%);
    /* the ivory field rises into the cards: same colour, all four corners rounded (r17: its foot lies over the Nectar photo) */
    background:var(--ivory);border-radius:2rem}
  /* smaller headline and more air round the content (Ivo, r13) */
  .hero__copy .hero__headline{font-size:clamp(1.63rem,.93rem + 2.05vw,3.02rem);margin-bottom:clamp(2.75rem,6vh,4rem)}   /* r39c: more air before the button (Ivo) */
  .hero + .line{padding-top:clamp(5rem,11.5vh,7.5rem)}   /* r39c: the first category starts lower — ≈40 px of air under the plate's overhang (Ivo) */
  .hero + .line .line__body{padding-top:calc(clamp(3rem,8vh,6rem) + var(--plate-out))}
}

@media (min-width:900px) and (max-height:680px){.hero__copy .hero__headline{margin-bottom:1.5rem}.panel__hour{display:none}.panel__name{font-size:1.4rem}.hero__headline{font-size:1.86rem;margin-bottom:.5rem}
}
   /* r39: restored after the clean-up (the hint rule it carried is gone) */
/* r41: the product lists and the foot links show at every width (the r40 № 23 rule is folded into the base rules) */
@media (min-width:900px) and (max-width:1100px){.panel__hour{white-space:normal}
}
   /* r40 (№ 11): the hour line wraps where the columns are narrow */
@media (max-width:899px){
  .mega{top:calc(var(--nav-h));height:calc(100svh - var(--nav-h) - var(--nav-offset));max-height:none;padding-bottom:env(safe-area-inset-bottom);overflow:hidden;--band:calc(100vw * 9 / 21)}   /* r50: the band is 21:9 of the width (174px at 406); the inner scrolls under it, if it has to */
  html.is-docked .mega{padding-top:0;top:0;bottom:0;height:auto}   /* r50: the band runs from 0 under the pill, as the cover does on desktop; r52: to the bottom edge whatever Chrome's address bar does (100svh left a 56px strip on the real phone with the bar hidden) */
  /* r41 phones: the four lines stack; a tap opens the line's products under its name (site.js). r50: the on line's hero still is a 21:9 band at the top (the face and the product: --band-y per line),
     a clean edge over the navy; a cut between lines, no clip; the band is not a link on phones ("[+] All …" is). r51: the menu opens with every line closed and the band's room kept empty — the first tap brings the band */
  .mega__cover{display:block;position:fixed;left:0;right:0;top:var(--mega-top);bottom:auto;width:100%;height:var(--band)}   /* r51 (Ivo): a clean edge — the r50 mask read as a smeared edge */
  .mega__line.is-on .mega__cover{pointer-events:none}
  .mega__cover picture{height:100%}   /* the img's 100 % needs a height to resolve: object-fit / object-position work only then */
  .mega__cover img{object-position:50% var(--band-y,30%)}
  .mega__line[data-line="nectar"]{--band-y:27%}.mega__line[data-line="bath"]{--band-y:31%}.mega__line[data-line="aura"]{--band-y:26%}.mega__line[data-line="ambrosia"]{--band-y:28%}
  .mega__lines{display:block;height:auto}
  .mega__line{display:block;border-top:1px solid rgba(214,171,145,.14)}
  .mega__line:first-child{border-top:0}
  .mega__tile{width:auto;min-height:3.5rem;margin-left:0;padding:.5rem 0}   /* r51: 60px tiles again (r50 had squeezed them to 56 to avoid a scroll; the scroll is accepted, the air is not negotiable) */
  .mega__list a:hover,.mega__list a:focus-visible{transform:none}
  .mega__list a::after{display:none}
  .mega__list{white-space:normal}
  .mega__dust{display:none}
  .mega__inner{min-height:0;display:block;margin-top:var(--band);height:calc(100% - var(--band));overflow:auto;overscroll-behavior:contain;padding:1.5rem var(--gutter) 2rem}   /* r50: the text starts under the band and scrolls under it only if it must; r51: 1.5rem under the band, 2rem under the icons */
  .mega__lines{min-height:0}
  .mega__inner{width:auto;margin-left:0}
  .mega__name{font-size:1.49rem}
  .mega__list{position:static;display:none;padding:0 0 .75rem;overflow:visible;font-size:.95rem;line-height:2.9;opacity:1;visibility:visible;transition:none}   /* r53 (Ivo: a finger, not a mouse): 44px rows — the distance, not only the hit box (r51: 1.95 = 29.6px rows with overlapping 44.8px boxes); .75rem before the next hairline */
  .mega__line.is-on .mega__list{display:block}
  .mega__list a{padding:0;margin:0}   /* the row is the hit box: 44.1px */
  .mega__foot{display:grid;grid-template-columns:1fr 1fr;justify-items:center;gap:.625rem 2rem;margin-top:1.25rem;padding-top:1.25rem;text-align:center}   /* r51 (Ivo): the three links centred, one per row; the icons side by side under them; air between everything (Ivo: nothing crammed) */
  .mega__foot a{grid-column:1 / -1}
  .mega__foot .nav__cart,.mega__foot .nav__account{grid-column:auto;margin-top:2rem;padding:.25em 0}
  .mega__foot .nav__cart{margin-left:0;justify-self:end}
  .mega__foot .nav__account{justify-self:start}
  /* hero: horizontal snap carousel */
  .hero{--hx:0px;--htop:.875rem;--hbot:.875rem}
  .hero__panels{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .hero__panels::-webkit-scrollbar{display:none}
  .panel{flex:0 0 82vw;scroll-snap-align:center;scroll-snap-stop:always;transition:none}
  .panel:first-child{margin-left:9vw}.panel:last-child{margin-right:9vw}
  .hero__panels.has-active .panel.is-active{flex:0 0 82vw}
  .hero__panels.has-active .panel:not(.is-active)::after{background:rgb(var(--navy-rgb) / .25)}
  .panel__hour{white-space:normal}
  /* the ivory plate on phones (r22): the width of the card in view, flush with its foot, rounded top corners */
  /* r23: like desktop — all corners rounded, reaching --mplate-out into the Nectar section; while the section is pinned that foot is
     below the screen, so the content sits in the part that is on screen (padding-bottom) */
  .hero{--mplate-h:13.5rem;--mplate-out:3.25rem;--cap-pb:calc(var(--mplate-h) - var(--mplate-out) - var(--hbot) + 1.75rem);overflow:visible;z-index:2}
  .hero__stage{overflow:visible}
  .hero__copy{left:9vw;right:9vw;bottom:calc(var(--mplate-out) * -1);height:var(--mplate-h);padding:1.1rem 1rem calc(var(--mplate-out) + .9rem);display:flex;flex-direction:column;align-items:center;justify-content:center;
    pointer-events:auto;background:var(--ivory);border-radius:1.5rem}
  .hero__copy .hero__headline{font-size:clamp(1.44rem,1.07rem + 1.86vw,1.91rem);margin-bottom:1.6rem}   /* r39c */
  .hero + .line{padding-top:2.5rem}   /* r39c: the plate still overlaps the photo a little (≈26 px of its 52 px overhang), the eye stays clear (Ivo: not entirely on the ivory) */
  .hero__dots{top:auto;bottom:calc(var(--mplate-h) - var(--mplate-out) + .9rem)}
  /* categories on phones (r22): the photo edge to edge, the title over its foot, the sections overlapping as on desktop,
     products in a swipe strip, Explore full width */
  .line{padding:0 0 clamp(3.5rem,8vh,5rem)}
  .line__inner,.line--flip .line__inner{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"img" "pin";gap:0;max-width:none;margin:0;padding:0}
  .line__body{display:contents}
  .line__still,.line--flip .line__still{grid-area:img;order:0;position:relative;width:100%;height:72svh;min-height:26rem;max-height:none;border-radius:0}
  /* r27: the eyebrow and title open the product stage, above the lead; the photo stays clean */
  .line__head{padding:2.25rem var(--gutter) 0}
  .line__head .line__title{margin:0}
  .line__lead{margin:1rem var(--gutter) 1.75rem}
  .products-pin{grid-area:pin}
  .products-pin .products{margin:0 0 3.25rem}   /* more air above Explore (r27) */
  .product__price{display:block}
  .products__dots.has-dots{display:flex}
  .products{display:flex;gap:.875rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gutter);padding:0 var(--gutter);margin:0;scrollbar-width:none}
  /* r25: the lead, the strip and Explore pinned together as one full-screen stage (JS sets the wrapper height) */
  .products-pin.is-pinned .products-pin__in{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start;padding:2.25rem 0 1.5rem}
  .products-pin.is-pinned .line__head{padding-top:2.5rem}   /* clear of the menu pill while the stage holds the screen */
  .products-pin.is-pinned .products{scroll-snap-type:none}
  .products-pin.is-own .products{scroll-snap-type:x mandatory}   /* the finger has it: snap again */
  .line{overflow:hidden;overflow:clip}   /* clip, not a scroll container, so the strip can stick to the screen */
  .products::-webkit-scrollbar{display:none}
  .products.is-linked{scroll-snap-type:none}   /* while the page scroll drives it; a touch hands it back to the finger (r23) */
  .product{flex:0 0 min(58%,16rem);scroll-snap-align:start}   /* about 1.6 in view on phones, capped on tablets: the strip shows it goes on */
  .line .cta--line{display:flex;margin:0 var(--gutter)}
}

@media (max-width:599px){
  .film__copy{width:calc(100% - 2rem);min-height:0;padding:2.25rem 1.25rem}
}

@media (hover:none){.panel__still img{transition:none}
}

@media (max-width:899px) and (orientation:landscape) and (max-height:430px){   /* r40 (№ 24) → r41: the four names in a row, the open line's products under them in two columns, all inside 310px */
  .mega{--band:0px}   /* r50: no band in landscape (21:9 of 816 would be 350px) */
  .mega__cover{display:none}
  .mega__inner{padding:.25rem var(--gutter)}
  .mega__cat{min-height:1.56rem}   /* r50: two rows reserved for the hour line — even tiles (r50 step 1 measured 61 / 61 / 48 / 61) */
  .mega__list a{padding:.65em 0;margin:-.65em 0}   /* r50: hit box 44.6px (was 40.3) */
  .mega__lines{display:flex;flex-direction:row;gap:.75rem;padding-bottom:7.25rem}
  .mega__line{flex:1;border-top:0}
  .mega__tile{min-height:0;padding:.25rem 0}
  .mega__name{font-size:1.26rem}
  .mega__line.is-on .mega__list{position:absolute;left:0;right:0;top:3.75rem;width:auto;columns:2;column-gap:1.5rem;padding:0;font-size:.9rem;line-height:1.8}   /* r50: width:auto — the desktop's 20rem list width wrapped the names in the two columns */
  .mega__foot{display:flex;flex-wrap:wrap;gap:1.375rem;margin-top:.5rem;padding-top:.5rem;text-align:left}   /* r51: landscape keeps the one-row foot */
  .mega__foot .nav__cart,.mega__foot .nav__account{margin-top:0}
  .mega__foot .nav__cart{margin-left:auto}
  html.is-docked .mega{padding-top:calc(.75rem + 3rem + 1rem + env(safe-area-inset-top))}
}