/* Type direction E, her pick on 3 Nov 2026: Cabinet Grotesk headlines and text, Tangerine on the accent word.
   Loaded last, so this file is the one source for faces, the micro style, the film rail and the glass nav.
   Spec: _design/ui-pass-2026-10-24/UI-PASS.md · plan: BUILD-PLAN-type-1.md */
:root{
 --micro-size:11px;--micro-track:.14em;--micro-ink:#5b3b2c;
 --small-size:13px;--display-track:-.01em;
 --cocoa:#543525;--hairline-ink:rgb(84 53 37 / .22);
 /* the edge every section starts on: the copy column, centred once the page is wider than the container */
 --edge:calc(max(0px,(100vw - var(--container-max)) / 2) + var(--margin));
}
html{font-synthesis-weight:none;font-synthesis-style:none}
em,i{font-style:normal}
.rava-site{font-family:var(--font-sans)}

/* ---------- Display: every headline in the serif, at its true weight ----------
   The older layers carry about 30 Quicksand-era weight and tracking rules (600 to 700, -.035em to -.04em),
   several more specific than this file. !important pins the serif to its one weight and its own tracking. */
.rava-site :is(h1,h2,h3),.rava-site .hero-motto,#bakery-menu nav a,.rava-site .standards-title{font-family:var(--font-display);font-weight:800!important;letter-spacing:var(--display-track)!important}
.rava-site :is(h1,h2,h3) :is(em,i),.rava-site .hero-motto em,.intro-title h1 span,.occasion-editorial h2 span{font-family:var(--font-accent);font-style:normal;font-weight:700;font-size:1.35em;line-height:1}

.intro-title h1{font-size:clamp(64px,8.2vw,124px);line-height:.9}
.intro-title h1 span{margin-left:.5em}
.intro-title .hero-motto{font-size:clamp(30px,3.2vw,48px);line-height:1.02}
.hero-motto em{border-bottom-width:1px;padding-bottom:2px}
.intro-title .hero-offering{font-size:15px;line-height:1.55}

.rava-site .scene-copy h2{font-size:clamp(48px,6.6vw,96px);line-height:.98}
.rava-site .scene-copy .lede{font-size:17px;line-height:1.5}

.rava-site :is(.collection-heading h2,.occasion-editorial h2,.nature-statement h2,.visit-heading h2){font-size:clamp(46px,5.6vw,84px);line-height:1}
.rava-site .menu-heading h3{font-size:clamp(38px,3.8vw,56px);line-height:1}
.rava-site .order-faq h3{font-size:clamp(30px,2.8vw,40px);line-height:1.05}
.rava-site .order-steps strong{font:400 clamp(22px,1.9vw,28px)/1.15 var(--font-display);letter-spacing:0}
#bakery-menu nav a{font-size:clamp(34px,3.4vw,44px);line-height:1.1}
.rava-site .menu-entry dt{font-size:16px}

/* ---------- One micro style for every small label ---------- */
.rava-site :is(.hero-category,.intro-footer>span,.intro-footer>a,.scene-copy .eyebrow,.scene-bottom>span,.brand-lockup>span,#bakery-menu .menu-intro,.product-kind,.menu-caption span,.collection-heading>div>p,.nature-statement>p,.visit-details h3,.rava-footer>div:first-child>span,.standards-detail,.shop-eyebrow,#cake-notes>p:first-of-type,.basket-heading span){
 font:400 var(--micro-size)/1.4 var(--font-sans);letter-spacing:var(--micro-track);text-transform:uppercase;font-style:normal;color:var(--micro-ink)}
.rava-site .scene-copy .eyebrow{margin-bottom:18px}
.rava-site .visit-details h3{margin-bottom:14px}
.rava-site .collection-heading>div>p,.rava-site .nature-statement>p{margin-bottom:20px}

/* Fine print: sentence case, one size */
.rava-site :is(.bespoke-note,.concept-detail,.product-action>span,.bakery-place figcaption,.contact-concept,.menu-footer span,.menu-motion>span,.shop-small,.planner-note,.shop-ingredients-note,.shop-demo-note){font-size:var(--small-size);line-height:1.5;letter-spacing:0;text-transform:none}

/* ---------- The film rail: one hairline, chapter left, scroll hint centre, place right ---------- */
.rava-site .scene-bottom{left:0;right:0;bottom:30px;width:auto;margin-inline:auto;padding-top:14px;display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;gap:16px}
.rava-site .scene-bottom::before{content:"";position:absolute;top:0;left:var(--margin);right:var(--margin);height:1px;background:var(--hairline-ink)}
.rava-site .scene-bottom #beat-name{display:block;max-width:none;justify-self:start;white-space:nowrap}
.rava-site .scene-bottom .scroll-hint{display:inline-flex;gap:6px;justify-self:center;white-space:nowrap}
.rava-site .scene-bottom .scroll-hint span{font:inherit;letter-spacing:inherit;color:inherit}
.rava-site .scene-bottom .scroll-hint>span[aria-hidden]{font-size:12px;letter-spacing:0;color:var(--cocoa)}
.rava-site .scene-bottom .diet-label{display:block;justify-self:end;white-space:nowrap}

/* ---------- Glass nav: thinner, rose-tinted, glossy. Values tuned by her with ?dials, 24 Oct ---------- */
.rava-site .rava-header{
 --glass-tint:243 200 210;--glass-alpha:.2;--glass-blur:40px;--glass-gloss:.79;--glass-sat:135%;--nav-h:44px;--nav-pad:22px;
 position:fixed;z-index:35;inset:10px max(12px,calc(var(--edge) - var(--nav-pad))) auto;
 display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:16px;
 min-height:0;height:var(--nav-h);padding:0 var(--nav-pad);border-radius:18px;color:var(--cocoa);
 border:1px solid rgb(255 255 255 / .46);
 background:linear-gradient(180deg,rgb(255 255 255 / var(--glass-gloss)) 0%,rgb(255 255 255 / calc(var(--glass-gloss) * .28)) 46%,rgb(255 255 255 / 0) 54%,rgb(255 255 255 / .06) 100%),rgb(var(--glass-tint) / var(--glass-alpha));
 box-shadow:inset 0 1px 0 rgb(255 255 255 / .8),inset 0 -1px 0 rgb(140 62 88 / .16),0 12px 32px -14px rgb(84 53 37 / .32);
 -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat))}
.rava-site .rava-header::before{content:"";display:block;position:absolute;inset:0;border-radius:inherit;pointer-events:none;
 background:radial-gradient(120% 140% at 12% -40%,rgb(255 255 255 / .38),transparent 46%),radial-gradient(90% 120% at 92% 140%,rgb(255 214 226 / .22),transparent 50%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.rava-site .rava-header{background:#efc9d1f2}}
.rava-site .brand-menu-button{display:flex;flex-direction:row;align-items:center;gap:14px;min-height:44px}
.rava-site .brand-lockup{flex-direction:row;align-items:center;gap:16px}
.rava-site .brand-logo{width:auto;height:24px;margin:0}
.rava-site .brand-lockup>span{margin:0;padding-top:2px}
.rava-site .rava-header nav{display:flex;align-items:center;gap:8px;width:auto;padding:0}
.rava-site .rava-header .shop-open{font:400 14px/1.2 var(--font-sans);gap:10px;min-height:44px}
.rava-site .basket-count{min-width:24px;height:24px;font-size:11px;border-color:rgb(84 53 37 / .45);background:rgb(255 255 255 / .22)}

/* ---------- Tablet ---------- */
@media(max-width:900px){.rava-site .brand-lockup>span{display:none}}

/* ---------- Phone ---------- */
@media(max-width:639px){
 .rava-site .rava-header{--nav-pad:16px;inset:8px 8px auto;border-radius:16px}
 .rava-site .brand-logo{height:21px}
 .rava-site .rava-header .shop-open{font-size:13px;gap:8px}
 .intro-title .hero-category{max-width:none}
 .intro-title h1{font-size:clamp(48px,13.5vw,68px)}
 .intro-title .hero-motto{font-size:clamp(22px,6vw,30px)}
 .intro-title .hero-offering{font-size:12px}
 .rava-site .scene-copy h2{font-size:clamp(40px,11.2vw,52px);line-height:1}
 .rava-site .scene-copy .lede{font-size:15px}
 .rava-site :is(.collection-heading h2,.occasion-editorial h2,.nature-statement h2,.visit-heading h2){font-size:clamp(40px,11.5vw,54px)}
 .rava-site .menu-heading h3{font-size:40px}
 #bakery-menu nav a{font-size:36px}
 .rava-site .scene-bottom{bottom:24px;grid-template-columns:1fr auto;gap:12px}
 .rava-site .scene-bottom .hint-more,.rava-site .scene-bottom .diet-label{display:none}
 .rava-site .scene-bottom .scroll-hint{justify-self:end}
}

/* ---------- Rose mosaic behind the visit section (rose-mosaic.js) ----------
   Partial and see-through on purpose: strongest top right, gone before the text. Fades in slowly, never flashes. */
.rava-site .visit-section{position:relative;isolation:isolate;overflow:hidden}
.rava-site .visit-section>:not(.rose-mosaic){position:relative;z-index:1}
.rose-mosaic{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;opacity:0!important;transition:opacity 1.8s ease;
 -webkit-mask-image:radial-gradient(ellipse 72% 92% at 94% 6%,#000 0%,rgb(0 0 0 / .72) 34%,rgb(0 0 0 / .24) 62%,transparent 84%);
 mask-image:radial-gradient(ellipse 72% 92% at 94% 6%,#000 0%,rgb(0 0 0 / .72) 34%,rgb(0 0 0 / .24) 62%,transparent 84%)}
.rose-mosaic.is-ready{opacity:var(--mosaic-opacity,.5)!important}
@media(max-width:639px){.rose-mosaic{-webkit-mask-image:radial-gradient(ellipse 120% 55% at 100% 0%,#000 0%,rgb(0 0 0 / .6) 40%,transparent 80%);mask-image:radial-gradient(ellipse 120% 55% at 100% 0%,#000 0%,rgb(0 0 0 / .6) 40%,transparent 80%)}}

/* "Find us in Amsterdam" gets real presence over the mosaic (her note, 24 Oct: "more boom there") */
.rava-site .visit-heading>p{font:400 clamp(30px,2.8vw,42px)/1.06 var(--font-display);font-style:normal;letter-spacing:-.005em;color:var(--cocoa);text-align:right;max-width:none;margin:0}
@media(max-width:760px){.rava-site .visit-heading>p{text-align:left;font-size:clamp(26px,7.6vw,32px);max-width:none;margin-top:8px}}

/* ---------- Phone pass, 25 Oct (her phone notes) ----------
   Hero: one left edge. Eyebrow on one line, headline left with the motto
   level and right aligned beside "bakery.", the offering under both, so the
   raspberry has its own space. No tilt.
   Film: no rail (chapter + scroll hint) on phones. */
@media(max-width:639px){
 .rava-site .stage>.intro-title{top:84px;left:24px;right:24px;display:grid;grid-template-columns:1fr auto;grid-template-areas:"cat cat" "h1 motto" "offer offer";align-items:end;gap:0 12px}
 .rava-site .hero-editorial-main,.rava-site .hero-editorial-aside{display:contents}
 .rava-site .intro-title .hero-category{grid-area:cat;max-width:none;margin:0 0 14px;white-space:nowrap}
 .rava-site #intro-title{grid-area:h1;font-size:clamp(46px,12.6vw,60px)}
 .rava-site .intro-title .hero-motto{grid-area:motto;transform:none;text-align:right;font-size:clamp(19px,5.4vw,24px);line-height:1.08;margin:0 0 .3em}
 .rava-site .intro-title .hero-offering{grid-area:offer;position:static;width:auto;max-width:none;margin:16px 0 0;font-size:13px;line-height:1.5}
 .rava-site .scene-bottom{display:none}
}
/* When the browser bar slides away, the stage grows to the full screen
   (100lvh) so no empty band shows under the film. Everything that must be
   seen with the bar showing stays inside the small viewport (100svh); the
   film reads the same height from a probe in scene.js. */
@supports (height:100lvh){
 @media(max-width:639px){
  .rava-site .stage{height:var(--puur-lvh,100lvh)}
  .rava-site .stage>.rava-masthead{bottom:calc(var(--puur-lvh,100lvh) - var(--puur-svh,100svh)*.9)}
  .rava-site .stage>.intro-footer{bottom:calc(var(--puur-lvh,100lvh) - var(--puur-svh,100svh) + 48px)}
  .rava-site .stage>.chocolate-fall{-webkit-mask-image:linear-gradient(180deg,transparent 68px,#000 88px,#000 calc(var(--puur-svh,100svh)*.78),transparent calc(var(--puur-svh,100svh)*.92));mask-image:linear-gradient(180deg,transparent 68px,#000 88px,#000 calc(var(--puur-svh,100svh)*.78),transparent calc(var(--puur-svh,100svh)*.92))}
 }
}
/* Phone pass, round 2 (25 Oct): no hero scroll hint on phones (everyone scrolls),
   a longer film so a single flick no longer races through a shot, and menu
   photos square so the whole cake, croissants and rolls show (3:2 cut them). */
@media(max-width:639px){
 .rava-site .stage>.intro-footer{display:none}
 .rava-site .bakery-menu-row .menu-photo{aspect-ratio:1/1}
 .rava-site .bakery-menu-row .menu-photo img{object-position:50% 50%}
}
@media(max-width:639px) and (prefers-reduced-motion:no-preference){
 .rava-site .journey{height:1000svh}
}
/* Breathing rail (25 Oct, her ask): the chapter label breathes with the scroll hint,
   a beat behind it, light only (no movement), so the rail reads as one slow breath. */
@keyframes puur-breathe-soft{0%,100%{opacity:.62}50%{opacity:1}}
.hint-breathe .scene-bottom #beat-name{animation:puur-breathe-soft 2.4s ease-in-out .5s 3}
@media (prefers-reduced-motion:reduce){.hint-breathe .scene-bottom #beat-name{animation:none}}

/* ---------- Phone pass, round 3 (25 Oct, her notes) ---------- */
/* No sideways wobble on phones: nothing may pan the page horizontally.
   clip, not hidden, so the sticky film stage keeps working. */
@supports (overflow-x:clip){html,body{overflow-x:clip}}
/* "Before you order" reads as something to open: a + that turns into ×,
   and the answer eases in. Clear on every screen size, not only phones. */
.rava-site .order-faq summary{list-style:none;display:flex;align-items:baseline;gap:14px;cursor:pointer}
.rava-site .order-faq summary::-webkit-details-marker{display:none}
.rava-site .order-faq summary::before{content:"+";flex:0 0 auto;display:inline-block;width:1ch;font:300 22px/1 var(--font-sans);color:var(--cocoa,#543525);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.rava-site .order-faq details[open]>summary::before{transform:rotate(45deg)}
.rava-site .order-faq summary:hover::before{transform:scale(1.12)}
.rava-site .order-faq details[open]>summary:hover::before{transform:rotate(45deg) scale(1.12)}
.rava-site .order-faq details[open]>p{animation:puur-faq-open .45s ease-out both}
@keyframes puur-faq-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.rava-site .order-faq details>p{padding-left:calc(1ch + 14px)}
@media (prefers-reduced-motion:reduce){.rava-site .order-faq details[open]>p{animation:none}.rava-site .order-faq summary::before{transition:none}}
@media(max-width:639px){
 /* Tighter rhythm between the order steps and "Our bakery" */
 .rava-site .occasion-editorial{padding-bottom:40px}
 .rava-site .nature-statement{padding-top:40px}
 .rava-site .order-steps li{padding:16px 0}
 .rava-site .order-steps li:first-child{padding-top:16px}
 /* The rose tiles run through the whole visit section, fading out at the bottom */
 .rose-mosaic{-webkit-mask-image:linear-gradient(180deg,#000 0%,rgb(0 0 0 / .85) 45%,rgb(0 0 0 / .5) 80%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,rgb(0 0 0 / .85) 45%,rgb(0 0 0 / .5) 80%,transparent 100%)}
 /* Footer: neatly stacked, about 40% shorter; tap targets stay 44px+ */
 .rava-site .rava-footer{padding:32px 24px 20px;gap:20px}
 .rava-site .rava-footer .wordmark img{width:180px}
 .rava-site .rava-footer>div:first-child{gap:8px}
 .rava-site .rava-footer>div:nth-child(2){gap:0 24px}
 .rava-site .site-standards button{min-height:56px;padding:10px 16px}
 .rava-site .site-standards button:nth-child(odd){padding-inline-start:0}
}

/* ---------- Micro-interactions (micro.js, 25 Oct, her picks 1, 3, 4, 6) ----------
   Each moves its own way: a line fills, a row warms, an arrow nudges, a dot breathes. */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 1 · Progress line along the bottom of the glass nav */
.rava-site .rava-header .page-progress{position:absolute;left:18px;right:18px;bottom:1.5px;height:1.5px;border-radius:2px;background:rgb(84 53 37 / .10);pointer-events:none;overflow:hidden}
.rava-site .rava-header .page-progress>i{display:block;height:100%;background:rgb(84 53 37 / .58);transform-origin:0 50%;transform:scaleX(var(--page-progress,0))}
/* 3 · Flavour rows: the whole row is the button; a quiet + shows it can be tapped */
.rava-site .menu-entry{position:relative;isolation:isolate;padding-right:28px}
.rava-site .menu-entry::after{content:"+";position:absolute;right:4px;top:50%;font:300 18px/1 var(--font-sans);color:var(--cocoa);opacity:.42;transform:translateY(-52%);transition:opacity .3s ease,transform .35s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.rava-site .menu-entry::before{content:"";position:absolute;inset:0 -8px;z-index:-1;border-radius:6px;background:linear-gradient(90deg,rgb(230 143 168 / .30),rgb(230 143 168 / .14));transform-origin:0 50%;transform:scaleX(0);opacity:0;pointer-events:none}
.rava-site .entry-add{position:absolute;inset:0;width:100%;margin:0;padding:0;border:0;background:transparent;cursor:pointer;border-radius:6px}
.rava-site .entry-add:focus-visible{outline:2px solid var(--cocoa);outline-offset:2px}
@media (hover:hover){.rava-site .menu-entry:hover::after{opacity:1;transform:translateY(-52%) scale(1.25)}}
.rava-site .menu-entry.is-added::before{animation:puur-row-warm 1.5s cubic-bezier(.2,.7,.2,1) both}
.rava-site .menu-entry.is-added::after{content:"✓";opacity:1;font-size:15px}
@keyframes puur-row-warm{0%{transform:scaleX(0);opacity:1}35%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
.rava-site .basket-count.is-beat{animation:puur-basket-beat .62s cubic-bezier(.3,.7,.3,1)}
@keyframes puur-basket-beat{0%,100%{transform:scale(1)}30%{transform:scale(1.22);background:rgb(230 143 168 / .45)}60%{transform:scale(.96)}}
/* 4 · Arrow links: the arrow nudges the way it points and back, the underline draws across */
.rava-site .text-link{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size .55s cubic-bezier(.2,.7,.2,1)}
.rava-site .text-link.is-nudge{background-size:100% 1px}
@media (hover:hover){.rava-site .text-link:hover{background-size:100% 1px}}
.rava-site .text-link:focus-visible{background-size:100% 1px}
.rava-site .link-arrow{display:inline-block}
.rava-site .text-link.is-nudge .link-arrow[data-way="ne"]{animation:puur-nudge-ne .6s cubic-bezier(.3,.7,.3,1)}
.rava-site .text-link.is-nudge .link-arrow[data-way="se"]{animation:puur-nudge-se .6s cubic-bezier(.3,.7,.3,1)}
.rava-site .text-link.is-nudge .link-arrow[data-way="s"]{animation:puur-nudge-s .6s cubic-bezier(.3,.7,.3,1)}
.rava-site .text-link.is-nudge .link-arrow[data-way="e"]{animation:puur-nudge-e .6s cubic-bezier(.3,.7,.3,1)}
.rava-site .text-link.is-nudge .link-arrow[data-way="turn"]{animation:puur-nudge-turn .7s cubic-bezier(.3,.7,.3,1)}
@keyframes puur-nudge-ne{45%{transform:translate(4px,-4px)}}
@keyframes puur-nudge-se{45%{transform:translate(4px,4px)}}
@keyframes puur-nudge-s{45%{transform:translateY(4px)}}
@keyframes puur-nudge-e{45%{transform:translateX(5px)}}
@keyframes puur-nudge-turn{to{transform:rotate(-360deg)}}
/* 6 · Opening hours: today's row glows, a status line says whether we are open */
.rava-site .hours-status{display:flex;align-items:center;gap:10px;margin:0 0 12px;font:500 14px/1.4 var(--font-sans);color:var(--cocoa)}
.rava-site .hours-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:rgb(84 53 37 / .35)}
.rava-site .hours-status.is-open .hours-dot{background:#7f9a4e;box-shadow:0 0 0 0 rgb(127 154 78 / .35)}
.rava-site .hours-status.is-open.is-visible .hours-dot{animation:puur-dot-breathe 2.8s ease-in-out infinite}
@keyframes puur-dot-breathe{0%,100%{box-shadow:0 0 0 0 rgb(127 154 78 / .35);opacity:.8}50%{box-shadow:0 0 0 6px rgb(127 154 78 / 0);opacity:1}}
.rava-site .opening-hours div{border-radius:6px;transition:background-color .6s ease}
.rava-site .opening-hours div.is-today{background:rgb(255 255 255 / .5);margin-inline:-8px;padding-inline:8px;font-weight:500}
@media (prefers-reduced-motion:reduce){
 .rava-site .menu-entry.is-added::before,.rava-site .basket-count.is-beat,.rava-site .text-link.is-nudge .link-arrow,.rava-site .hours-status.is-open.is-visible .hours-dot{animation:none}
 .rava-site .text-link{transition:none}
}

/* ---------- Calm pass, 27 Oct (her go: "just give me your best, a very exclusive kind of site") ----------
   One display voice at a time. Hero: no eyebrow, one italic word ("sweet."), a quieter headline under the
   wordmark, one label on the rail. (The nav stays whole in the hero: her note, "it doesn't feel like a real website".) */
.intro-title .hero-category{display:none}
.intro-title h1 span{font-style:normal}
.intro-title h1{font-size:clamp(56px,6vw,88px)}
.intro-footer>span{visibility:hidden}
.rava-site .rava-header .brand-lockup{transition:opacity .7s ease}
.hero-door{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:10px;font:400 15px/1.2 var(--font-sans);color:var(--cocoa);text-decoration:none}
@media (max-width:639px){.intro-title h1{font-size:clamp(44px,12vw,56px)}.hero-door{font-size:14px;margin-top:4px}}
/* Long in-page jumps happen behind a soft fade, never a drag through the film (atelier.js) */
.jump-veil{position:fixed;inset:0;z-index:60;background:#f7e4df;opacity:0;pointer-events:none;transition:opacity .32s ease}
.jump-veil.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){.rava-site .rava-header .brand-lockup,.jump-veil{transition:none}}
/* In the hero the whole glass bar rests with the logo, leaving the menu and the bag; it returns as the film starts.
   The glass is repainted on ::after so it can fade (a gradient background cannot). Same values and dials as above. */
.rava-site .rava-header{background:none;box-shadow:none;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.rava-site .rava-header::after{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;pointer-events:none;
 border:1px solid rgb(255 255 255 / .46);
 background:linear-gradient(180deg,rgb(255 255 255 / var(--glass-gloss)) 0%,rgb(255 255 255 / calc(var(--glass-gloss) * .28)) 46%,rgb(255 255 255 / 0) 54%,rgb(255 255 255 / .06) 100%),rgb(var(--glass-tint) / var(--glass-alpha));
 box-shadow:inset 0 1px 0 rgb(255 255 255 / .8),inset 0 -1px 0 rgb(140 62 88 / .16),0 12px 32px -14px rgb(84 53 37 / .32);
 -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
 transition:opacity .7s ease}
.rava-site .rava-header::before{transition:opacity .7s ease}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.rava-site .rava-header{background:none}.rava-site .rava-header::after{background:#efc9d1f2}}
@media (prefers-reduced-motion:reduce){.rava-site .rava-header::after,.rava-site .rava-header::before{transition:none}}
.rava-site .page-progress{transition:opacity .7s ease}
/* The hero text layer lets clicks pass to the film; only the door link takes them, and only while the hero shows */
.rava-site[data-view="intro"] .intro-title .hero-door{pointer-events:auto;position:relative;z-index:4}
/* Phone: the eyebrow is gone, so the door link gets its own row under the offering */
@media(max-width:639px){
 .rava-site .stage>.intro-title{grid-template-areas:"h1 motto" "offer offer" "door door"}
 .rava-site .intro-title .hero-door{grid-area:door;justify-self:start}
}

/* The film rail (chapter · scroll to unfold · place) is gone on every screen size (her note, 27 Oct) */
.rava-site .scene-bottom{display:none!important}

/* ---------- A real shop nav (her note, 27 Oct: "the nav bar feels a bit empty") ----------
   Logo and glass stay in the hero; four quiet links sit before the bag on laptop. Phone keeps menu, logo, bag. */
.rava-site .rava-header .nav-link{display:inline-flex;align-items:center;min-height:44px;font:400 14px/1.2 var(--font-sans);color:var(--cocoa);text-decoration:none;
 background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 calc(50% + 11px);background-size:0 1px;transition:background-size .5s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.rava-site .rava-header .nav-link:hover{background-size:100% 1px}}
.rava-site .rava-header .nav-link:focus-visible{background-size:100% 1px;outline:none}
@media (min-width:900px){.rava-site .rava-header nav{gap:26px}.rava-site .rava-header .nav-link:last-of-type{margin-right:6px}}
@media (max-width:1180px){.rava-site .brand-lockup>span{display:none}}
@media (max-width:899px){.rava-site .rava-header .nav-link{display:none}}

/* ---------- Scroll cue: one word and a raspberry drop of light (her note: "just Scroll, a subtle movement") ----------
   The drop slides down a hairline five times after a short pause, then rests. Reduced Motion: it simply sits. */
.intro-footer a.scroll-cue{display:inline-flex;flex-direction:column;align-items:center;gap:9px;font:400 10px/1 var(--font-sans);letter-spacing:.26em;text-transform:uppercase;color:var(--cocoa);text-decoration:none;padding:6px 10px}
.hint-breathe .intro-footer a.scroll-cue{animation:none}
.scroll-cue .scroll-track{position:relative;display:block;width:1px;height:30px;background:rgb(84 53 37 / .18)}
.scroll-cue .scroll-drop{position:absolute;left:50%;top:0;width:5px;height:7px;margin-left:-2.5px;border-radius:50% 50% 50% 50% / 42% 42% 58% 58%;background:#c4163f;box-shadow:0 0 7px 1px rgb(196 22 63 / .32);opacity:0;animation:puur-drop 2.8s cubic-bezier(.45,0,.25,1) 1.6s 5 both}
@keyframes puur-drop{0%{transform:translateY(-2px);opacity:0}20%{opacity:.85}72%{opacity:.85}100%{transform:translateY(25px);opacity:0}}
@media (prefers-reduced-motion:reduce){.scroll-cue .scroll-drop{animation:none;opacity:.8;transform:translateY(11px)}}

/* ---------- The tile band (her idea, 27 Oct): the rose tiles from the visit section as a divider ----------
   Between "Your occasion" and "Our bakery": a breathing moment between two text sections, and it covers the seam
   where their two pinks met. Same wall, same rest rules (rose-mosaic.js); here it fades in and out at its top and bottom. */
.tile-band{position:relative;height:clamp(280px,40vh,380px);background:linear-gradient(90deg,#e4bac3 0%,#e4bac3 42%,#e8c5ca 100%);overflow:hidden;isolation:isolate}
/* Wide and barely there (her note): long soft fades top and bottom, softer at the sides, low opacity, like the wall by the footer */
.tile-band .rose-mosaic{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 50%,#000 66%,transparent 92%),linear-gradient(90deg,rgb(0 0 0 / .35) 0%,#000 28%,#000 72%,rgb(0 0 0 / .35) 100%);-webkit-mask-composite:source-in;
 mask-image:linear-gradient(180deg,transparent 0%,#000 50%,#000 66%,transparent 92%),linear-gradient(90deg,rgb(0 0 0 / .35) 0%,#000 28%,#000 72%,rgb(0 0 0 / .35) 100%);mask-composite:intersect}
.tile-band .rose-mosaic.is-ready{opacity:.26!important}
/* Breathing room after "Book a tasting" (the tiles sit low in the band), and "Our bakery" follows close below (her note) */
.tile-band+.nature-statement{padding-top:56px}
@media(max-width:639px){.tile-band{height:220px}.tile-band .rose-mosaic{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 50%,#000 66%,transparent 92%);mask-image:linear-gradient(180deg,transparent 0%,#000 50%,#000 66%,transparent 92%)}.tile-band .rose-mosaic.is-ready{opacity:.2!important}.tile-band+.nature-statement{padding-top:40px}}