/* Bakehouse & Co. v5: a cozy family bakery on a sunny morning (design-brief.md).
   Warm cream page (~70%), blush only for afternoon tea, sage for small accents, warm brown text, dusty rose buttons.
   Fraunces for headings, DM Sans for everything else. Soft rounded buttons, real photos, subtle transitions only. */

@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/fraunces-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dm-sans-400.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/dm-sans-500.woff2) format("woff2")}
/* metric-matched fallbacks (Capsize) so the swap doesn't shift the layout */
@font-face{font-family:"Fraunces Fallback";src:local("Georgia");ascent-override:92.96%;descent-override:24.24%;size-adjust:105.2%}
@font-face{font-family:"DM Sans Fallback";src:local("Arial"),local("ArialMT");ascent-override:94.9%;descent-override:29.66%;line-gap-override:0%;size-adjust:104.53%}

:root{
  /* brief palette */
  --cream:#faf7f0; --blush:#f3dfdc; --sage:#a6ad92; --brown:#59483d; --rose:#b87878; --white:#fff;
  /* AA-safe partners: brief rose with white text is 3.5:1, so buttons use a deeper dusty rose (4.75:1) */
  --rose-btn:#a06262; --rose-btn-hover:#8e5252; --rose-ink:#874b4b;   /* rose text on cream 6.2:1, on blush 5.2:1 */
  --brown-soft:#6a594e;                                               /* secondary text: 6.2:1 cream, 5.2:1 blush */
  --cream-2:#f4efe5; --line:#e6dccf; --line-rose:#e2c4be; --sage-wash:#eef0e6; --gold:#c99a3e;
  --font-head:"Fraunces","Fraunces Fallback",Georgia,serif;
  --font:"DM Sans","DM Sans Fallback",Arial,sans-serif;
  --step--1:clamp(.875rem,.85rem + .1vw,.9375rem);     /* 14-15  small print, nav */
  --step-0:clamp(1rem,.96rem + .2vw,1.125rem);         /* 16-18  body */
  --step-1:clamp(1.125rem,1.07rem + .25vw,1.25rem);    /* 18-20  lede */
  --step-2:clamp(1.3rem,1.2rem + .45vw,1.5rem);        /* 21-24  card titles */
  --step-3:clamp(1.875rem,1.7rem + .75vw,2.25rem);     /* 30-36  section titles */
  --step-4:clamp(2.25rem,1.8rem + 1.9vw,3.5rem);       /* 36-56  page titles */
  --gut:clamp(16px,4vw,48px); --max:1200px; --r-btn:8px; --r:14px;
  --shadow:0 1px 2px rgba(89,72,61,.05),0 8px 24px -12px rgba(89,72,61,.14);
  --shadow-up:0 2px 4px rgba(89,72,61,.06),0 14px 32px -14px rgba(89,72,61,.2);
  --ease:cubic-bezier(.22,1,.36,1);   /* motion-brief.md §2: one easing for everything that moves */
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--cream);color:var(--brown);font:400 var(--step-0)/1.65 var(--font);overflow-x:clip}
img,svg,video,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--font-head);font-weight:400;line-height:1.15;letter-spacing:0;text-wrap:balance;color:var(--brown)}
h1{font-size:var(--step-4);line-height:1.08}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-2);font-weight:450}
p{margin:0 0 1em}
p,li,dd,blockquote{text-wrap:pretty}
strong{font-weight:500}
a[href^="tel:"]{white-space:nowrap}
:focus-visible{outline:2px solid var(--rose-ink);outline-offset:3px;border-radius:2px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--brown);color:var(--cream);padding:.6rem 1rem;border-radius:var(--r-btn)}
.skip:focus{top:12px}
.wrap{width:min(100% - 2*var(--gut),var(--max));margin-inline:auto}
.center{text-align:center;justify-content:center;margin-inline:auto}
.eyebrow{margin:0 0 .6rem;color:var(--rose-ink);font:500 var(--step--1)/1.3 var(--font)}
.lede{font-size:var(--step-1);line-height:1.55;color:var(--brown-soft);max-width:52ch}
.price{font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- buttons: soft and rounded, no gradients, no bounce ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.75em 1.4em;border-radius:var(--r-btn);
  font:500 1rem/1.2 var(--font);text-decoration:none;white-space:nowrap;cursor:pointer;border:1px solid transparent;transition:background-color .2s ease-out,color .2s ease-out,border-color .2s ease-out,translate .2s ease-out}
@media (hover:hover){.btn:hover{translate:0 -1px}}
.btn:active{translate:0 0}
.btn-primary{background:var(--rose-btn);color:var(--white)}
.btn-primary:hover{background:var(--rose-btn-hover)}
.btn-secondary{background:transparent;color:var(--brown);border-color:var(--brown)}
.btn-secondary:hover{background:#fbefed;border-color:#3f332b}
.link{display:inline-flex;align-items:center;gap:.4em;min-height:44px;color:var(--rose-ink);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.link:hover,.link:focus-visible{text-decoration-thickness:2px}
.link svg{width:1em;height:1em;flex:none;transition:translate .2s ease-out}
.link:hover svg{translate:3px 0}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1rem}

/* ---------- header ---------- */
.site-h{position:sticky;top:0;z-index:100;background:var(--cream);box-shadow:0 1px 0 var(--line);transition:box-shadow .3s var(--ease)}
.site-h.scrolled{box-shadow:0 1px 0 var(--line),0 6px 18px -12px rgba(89,72,61,.25)}
.site-h .wrap{display:flex;align-items:center;gap:1.4rem;min-height:76px}
.brand{display:flex;align-items:center;gap:.7rem;margin-right:auto;text-decoration:none;font:450 1.2rem/1.1 var(--font-head)}
.brand img{width:52px;height:52px;border-radius:10px}
.nav{display:flex;gap:1.6rem}
.nav a{padding:.6rem 0;font-size:var(--step--1);font-weight:500;text-decoration:none;background:linear-gradient(var(--rose),var(--rose)) 0 calc(100% - .3rem)/0 1px no-repeat;transition:background-size .2s ease-out}
.nav a:hover,.nav a:focus-visible,.nav a[aria-current]{background-size:100% 1px}
.site-h .btn{min-height:44px;padding:.6em 1.15em;font-size:var(--step--1)}
.menu-btn{display:none;width:44px;height:44px;border:1px solid var(--brown);border-radius:var(--r-btn);background:transparent;cursor:pointer;place-items:center}
.menu-btn span{display:block;width:18px;height:1.5px;background:var(--brown);box-shadow:0 -6px var(--brown),0 6px var(--brown)}
.menu-btn[aria-expanded=true] span{box-shadow:none;background:transparent;position:relative}
.menu-btn[aria-expanded=true] span::before,.menu-btn[aria-expanded=true] span::after{content:"";position:absolute;inset:0;background:var(--brown);rotate:45deg}
.menu-btn[aria-expanded=true] span::after{rotate:-45deg}
.m-panel{position:absolute;left:0;right:0;top:100%;height:calc(100svh - 76px);overflow-y:auto;overscroll-behavior:contain;background:var(--cream);border-top:1px solid var(--line)}
.m-panel ul{list-style:none;margin:0;padding:.5rem var(--gut) 1.5rem;min-height:100%;display:flex;flex-direction:column}
.m-panel li a{display:block;padding:.95rem 0;border-bottom:1px solid var(--line);font:400 var(--step-2)/1.2 var(--font-head);text-decoration:none}
.m-panel li a[aria-current]{color:var(--rose-ink)}
.m-panel .m-ctas{margin-top:auto;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;align-items:center;padding-top:1.4rem}
.m-panel .m-ctas .btn{display:flex;flex-basis:100%;min-height:52px;font:500 1.0625rem/1 var(--font);border-bottom:0}
.m-panel .m-ctas .link{display:inline-flex;border:0;padding:.4rem 0;font:500 var(--step-0)/1.2 var(--font)}
.m-panel .m-hours{flex-basis:100%;margin:.6rem 0 0;color:var(--brown-soft);font-size:var(--step--1)}
@media (max-width:960px){.nav{display:none}.menu-btn{display:grid}.site-h .wrap{gap:.8rem}}
@media (max-width:440px){.brand span{display:none}}

/* ---------- hero: the whole photo, never cropped (fix-brief §3). Text 43% / photo 57%, page up to 1320px ---------- */
.hero{padding:clamp(28px,4.5vw,64px) 0 clamp(8px,1.5vw,24px)}
.hero-grid{width:min(100% - 2*var(--gut),1320px);display:grid;grid-template-columns:minmax(0,43fr) minmax(0,57fr);grid-template-areas:"text photo" "actions photo";
  column-gap:clamp(28px,4.5vw,72px);align-items:center}
.hero-text{grid-area:text;align-self:end}
.hero-actions{grid-area:actions;align-self:start;margin-top:1.4rem}
.hero h1{max-width:12ch;margin-bottom:.45em}
.hero-lede{margin:0;font-size:var(--step-1);line-height:1.55;color:var(--brown-soft);max-width:34ch}
.hero-photo{grid-area:photo;margin:0;border-radius:16px;overflow:hidden;background:var(--cream);box-shadow:var(--shadow)}
.hero-media{position:relative}
.hero-media img{display:block;width:100%;height:auto}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease)}
.hero-video.playing{opacity:1}
/* the hours note: a line, a sage leaf from her logo, a dotted sage underline. No pill. */
.hours-note{display:inline-flex;align-items:center;gap:.5rem;margin:.6rem 0 0;padding-bottom:.35rem;font:400 .875rem/1.4 var(--font);color:var(--brown);
  background:radial-gradient(circle,var(--sage) 0 1px,transparent 1.4px) 0 100%/6px 3px repeat-x}
.hours-note .leaf{width:18px;height:18px;flex:none}
.hours-note.is-open .leaf{rotate:-8deg}
@media (max-width:860px){
  .hero{padding-top:20px}
  .hero-grid{grid-template-columns:1fr;grid-template-areas:"text" "photo" "actions";row-gap:20px}
  .hero h1{max-width:none}
  .hero-photo{border-radius:14px}
  .hero-actions{margin-top:0}
}
/* ---------- sections ---------- */
.sec{padding-block:clamp(56px,8vw,112px)}
.sec-head{margin-bottom:clamp(28px,4vw,48px);max-width:640px}
.sec-head.center{text-align:center}
.sec-head h2{margin-bottom:.4em}
.sec-head .lede{margin:0}
.sec-head.center .lede{margin-inline:auto}

/* our favorites: photo, name, one line, a way in (like Magnolia's product rows) */
.favs{list-style:none;margin:0 0 clamp(32px,4vw,48px);padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.fav{display:flex;flex-direction:column}
.fav figure{margin:0 0 1rem;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;background:var(--cream-2)}
.fav img{width:100%;height:100%;object-fit:cover;transition:scale .35s var(--ease)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.fav:hover img{scale:1.035}.fav:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--rose)}}
.fav h3{margin-bottom:.35rem}
.fav p{margin:0 0 .6rem;color:var(--brown-soft);font-size:var(--step--1);line-height:1.6}
.fav .fav-foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.2rem 1rem;color:var(--brown);font-size:var(--step--1)}
@media (max-width:1000px){.favs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.favs{grid-template-columns:1fr}.fav figure{aspect-ratio:4/3}}

/* our story */
.story{background:var(--cream-2)}
.story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,6vw,96px);align-items:center}
.story-photo{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:1}
.story-photo picture,.story-photo img{width:100%;height:100%}
.story-photo img{object-fit:cover;object-position:50% 18%}
.story-copy{max-width:56ch}
.story-copy h2{margin-bottom:.6em}
.story-copy p{color:var(--brown)}
.story-copy .btn{margin-top:.6rem}
@media (max-width:860px){.story-grid{grid-template-columns:1fr}.story-photo{aspect-ratio:4/3}}

/* ---------- afternoon tea: the prettiest part of the site ---------- */
.tea{background:var(--blush);padding-block:clamp(64px,9vw,128px);position:relative}
.tea::before{content:"";position:absolute;inset:clamp(10px,1.4vw,18px);border:1px solid var(--line-rose);border-radius:calc(var(--r) + 6px);pointer-events:none}
.tea-head{text-align:center;max-width:640px;margin:0 auto clamp(32px,4.5vw,56px)}
.tea-logo img{width:88px;height:88px;margin:0 auto 1rem;border-radius:50%;box-shadow:0 0 0 6px rgba(255,255,255,.55)}
.tea-head h2{font-size:clamp(2rem,1.7rem + 1.4vw,2.9rem);margin-bottom:.4em}
.tea-head .lede{margin-inline:auto;color:var(--brown)}
.tea-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(20px,3vw,40px);align-items:start}
.tea-info{display:grid;gap:clamp(16px,2vw,24px)}
.tea-photo{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:20/11;background:#3c4a35}
.tea-photo picture,.tea-photo img{width:100%;height:100%}
.tea-photo img{object-fit:cover}
.tea-card,.tea-form{background:var(--white);border:1px solid var(--line-rose);border-radius:var(--r);padding:clamp(22px,3vw,40px);box-shadow:var(--shadow)}
.tea-card h3{margin-bottom:.8rem}
.tea-list{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.45rem 1.4rem}
.tea-list li{position:relative;padding-left:1.1rem;font-size:var(--step--1);line-height:1.5}
.tea-list li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--sage)}
.tea-list li:nth-child(2){grid-column:span 2}
.tea-facts{margin:0 0 1.2rem;display:grid;gap:0;border-top:1px solid var(--line)}
.tea-facts div{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;padding:.65rem 0;border-bottom:1px solid var(--line);font-size:var(--step--1)}
.tea-facts dt{color:var(--brown-soft)}
.tea-facts dd{margin:0;font-weight:500}
.next-label{margin:0 0 .5rem;font-size:var(--step--1);color:var(--brown-soft)}
.next-dates{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0 0 .8rem;padding:0}
.next-dates li{padding:.35rem .8rem;border-radius:999px;background:var(--blush);color:var(--brown);font-weight:500;font-size:var(--step--1)}
.tea-form{display:grid;gap:1.05rem;align-content:start}
.tea-form h3,.tea-form h2{font-size:clamp(1.5rem,1.35rem + .6vw,1.85rem)}
.form-intro{margin:-.4rem 0 .2rem;color:var(--brown-soft);font-size:var(--step--1)}
.tea-form label{display:block;font-weight:500;font-size:var(--step--1)}
.tea-form small{font-weight:400;color:var(--brown-soft)}
.tea-form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.tea-form input,.tea-form select,.tea-form textarea{display:block;width:100%;min-height:48px;margin-top:.4rem;padding:.65rem .8rem;border:1px solid #cdbfb2;border-radius:var(--r-btn);background:var(--white);font:400 1rem/1.3 var(--font);color:var(--brown);transition:border-color .2s,box-shadow .2s}
.tea-form select{appearance:none;padding-right:2.4rem;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2359483d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right .8rem center/1rem no-repeat}
.tea-form textarea{min-height:96px;resize:vertical}
.tea-form input:focus-visible,.tea-form select:focus-visible,.tea-form textarea:focus-visible{outline:0;border-color:var(--rose-ink);box-shadow:0 0 0 3px rgba(184,120,120,.28)}
.tea-form .check{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;font-weight:400;line-height:1.5}
.tea-form .check input{width:24px;height:24px;min-height:0;margin:0;accent-color:var(--rose-btn)}
.tea-form .hp{position:absolute;left:-9999px}
.tea-form .submit{width:100%;min-height:54px;font-size:1.0625rem}
.req-note{margin:0;padding:.85rem 1rem;border-radius:var(--r-btn);background:var(--cream);font-size:var(--step--1);line-height:1.55}
.status{margin:0;font-weight:500}
.status:empty{display:none}
.status.ok{padding:1rem 1.1rem;border-radius:var(--r-btn);background:var(--sage-wash);color:#3f4a2f}
.status.err{color:var(--rose-ink)}
.status a{text-decoration:underline}
@media (max-width:900px){.tea-grid{grid-template-columns:1fr}.tea-form{order:0}}
@media (max-width:520px){.tea-form .row,.tea-list{grid-template-columns:1fr}.tea-list li:nth-child(2){grid-column:auto}.tea-facts div{grid-template-columns:6.5rem 1fr}}

/* ---------- custom cakes: on the cream page; the form is the tea form's sibling (shares .tea-form) ---------- */
.cake-info{display:grid;gap:clamp(16px,2vw,24px);align-content:start}
.cake-info .lede{margin:0}
.cake-photo{margin:0;max-width:440px;border-radius:var(--r);overflow:hidden;background:var(--cream-2)}
.cake-photo img{width:100%;height:auto}   /* her whole photo, never cropped */
.events{padding-left:16px;border-left:3px solid var(--sage)}
.events h3{margin-bottom:.4rem}
.events p{margin:0}
.events .link{margin-top:.2rem}
.field-hint{margin:-.55rem 0 0;color:var(--brown-soft);font-size:var(--step--1);line-height:1.5}
.photo-field{display:grid;gap:1.05rem}
.tea-form input[type=file]{padding:.5rem .6rem;font-size:var(--step--1);cursor:pointer}
.tea-form input[type=file]::file-selector-button{margin-right:.8rem;padding:.45rem .9rem;border:1px solid var(--brown);border-radius:var(--r-btn);background:transparent;color:var(--brown);font:500 var(--step--1)/1.2 var(--font);cursor:pointer}
.photo-preview{display:flex;align-items:center;gap:.9rem;padding:.6rem;border:1px solid var(--line);border-radius:var(--r-btn);background:var(--cream)}
.photo-preview[hidden]{display:none}
.photo-preview img{width:64px;height:64px;flex:none;border-radius:6px;object-fit:cover}
.photo-preview span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--step--1);color:var(--brown-soft)}
.photo-preview .link{flex:none;border:0;background:none;padding:0;cursor:pointer;font:500 var(--step--1)/1.2 var(--font)}
.cake-teaser .cake-photo{justify-self:center}
@media (min-width:901px){.cake-form{grid-column:2;grid-row:1 / span 2}.cakes .events{grid-column:1}}   /* phones: name, form, then the events note */

/* ---------- reviews: a native scroll-snap row (fix-brief §4). Three cards and a peek on desktop, one and a peek on phones ---------- */
.reviews{--gap:20px;--peek:52px;--wrapw:min(100vw - 2*var(--gut),var(--max));overflow:hidden}
.rv-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1rem 2rem;margin-bottom:clamp(20px,2.6vw,30px)}
.rv-head h2{margin-bottom:.35em}
.rating{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem;margin:0;color:var(--brown-soft)}
.rating strong{color:var(--brown)}
.stars{display:inline-flex;gap:2px;color:#c99843}
.stars svg{width:16px;height:16px}
.star-part{position:relative;width:16px;height:16px}
.star-part svg{position:absolute;inset:0}
.star-part svg:first-child{color:#e3d6bf}
.star-part svg:last-child{clip-path:inset(0 calc(100% - var(--f) * 10%) 0 0)}
.rv-controls{display:flex;align-items:center;gap:10px}
.rv-pos{margin-right:.4rem;font-size:13px;color:var(--brown-soft);font-variant-numeric:tabular-nums}
.rv-arrow{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid #d8c8ba;background:var(--cream);color:var(--brown);cursor:pointer;transition:background-color .2s ease-out,border-color .2s ease-out}
.rv-arrow svg{width:18px;height:18px}
.rv-arrow:hover:not(:disabled){background:var(--blush)}
.rv-arrow:disabled{opacity:.35;cursor:default}
.rv-track{list-style:none;margin:0;display:flex;gap:var(--gap);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  padding:12px calc((100% - var(--wrapw)) / 2) 24px;scroll-padding-inline:calc((100% - var(--wrapw)) / 2);overscroll-behavior-x:contain;scrollbar-width:none}
.rv-track::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:no-preference){.rv-track{scroll-behavior:smooth}}
.rv-track:focus-visible,.rv-arrow:focus-visible{outline:3px solid var(--rose-btn);outline-offset:3px}
.rv{flex:0 0 calc((var(--wrapw) - 2 * var(--gap) - var(--peek)) / 3);min-width:0;scroll-snap-align:start;display:flex}
.rv figure{display:flex;flex-direction:column;width:100%;min-height:300px;margin:0;padding:24px 26px;background:var(--white);border:1px solid #e5d7c9;border-radius:16px;
  box-shadow:0 4px 12px rgba(89,72,61,.04);transition:border-color .2s ease-out,box-shadow .2s ease-out}
@media (hover:hover){.rv figure:hover{border-color:#d8c3b0;box-shadow:0 8px 20px -6px rgba(89,72,61,.12)}}
.rv blockquote{flex:1;margin:.8rem 0 0;font:400 1.0625rem/1.55 var(--font-head);color:var(--brown)}
.rv blockquote p{margin:0}
.rv-more{align-self:flex-start;margin-top:.6rem;font-size:14px;color:var(--rose-ink);text-underline-offset:3px}
.rv figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;margin-top:18px;padding-top:14px;border-top:1px solid #e5d7c9}
.rv figcaption strong{font-size:14px}
.rv .src{font-size:13px;color:var(--brown-soft)}
.rv-foot{margin-top:.4rem}
@media (max-width:1024px){.rv{flex-basis:calc((var(--wrapw) - var(--gap) - var(--peek)) / 2)}}
@media (max-width:640px){
  .reviews{--gap:14px;--peek:48px}
  .rv{flex-basis:calc(var(--wrapw) - var(--peek))}
  .rv figure{min-height:270px;padding:22px}
  .rv-arrow,.rv-pos{display:none}
}

/* ---------- visit: the bakery postcard (fix-brief §6). Photo + details on the cream, no white box ---------- */
.visit-intro{text-align:center;max-width:640px;margin:0 auto clamp(32px,4vw,48px)}
.visit-intro h2{font-size:clamp(2.25rem,1.6rem + 2vw,3.375rem);line-height:1.1;margin-bottom:.3em}
.visit-intro .lede{margin:0 auto;color:var(--brown)}
.visit-grid{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:clamp(32px,5.5vw,72px);align-items:center}
.visit-photo{margin:0}
.visit-frame{border-radius:16px;overflow:hidden;aspect-ratio:5/4;background:var(--cream-2)}
.visit-frame picture,.visit-frame img{width:100%;height:100%}
.visit-frame img{object-fit:cover;object-position:50% 55%}
.visit-photo figcaption{margin-top:.7rem;font:italic 400 .9375rem/1.4 var(--font-head);color:var(--brown-soft);text-align:center}
.visit-details{color:var(--brown)}
.today-hours{display:grid;gap:.25rem;margin:0 0 1.8rem;padding-left:16px;border-left:3px solid var(--sage)}
.today-hours strong{font:400 var(--step-2)/1.25 var(--font-head)}
.today-hours span{color:var(--brown-soft)}
.visit-details address{font-style:normal;line-height:1.8;margin-bottom:1.6rem}
.visit-details address a{color:var(--rose-ink);text-underline-offset:3px}
.weekly-hours{margin-top:1.4rem}
.weekly-hours summary{display:inline-block;padding:.5rem 0;cursor:pointer;color:var(--rose-ink);text-decoration:underline;text-underline-offset:4px;list-style:none}
.weekly-hours summary::-webkit-details-marker{display:none}
.weekly-hours summary::after{content:" +"}
.weekly-hours[open] summary::after{content:" −"}
.weekly-hours .hours{margin-top:.6rem}
.hours{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1.2rem;margin:0}
.hours dt{font-weight:500}.hours dd{margin:0}
.hours .today,.hours .today + dd{color:var(--rose-ink);font-weight:500}
.note{font-size:var(--step--1);color:var(--brown-soft);margin:.8rem 0 0}
.note a{color:var(--rose-ink)}
.map-slot{margin-top:.4rem}
.map-slot.on{position:relative;width:100%;height:clamp(280px,26vw,360px);border-radius:16px;overflow:hidden;background:var(--line)}
.map-slot.on::before{content:"Loading map…";position:absolute;inset:0;display:grid;place-items:center;color:var(--brown-soft)}
.map-slot iframe{position:relative;width:100%;height:100%;border:0}
.map-btn{background:none;border:0;padding:0;cursor:pointer;font:inherit}
@media (max-width:860px){.visit-grid{grid-template-columns:1fr;gap:28px}.visit-frame{aspect-ratio:4/3}}

/* ---------- footer: light, with her logo ---------- */
.site-f{padding:clamp(48px,6vw,80px) 0 24px;background:var(--cream);border-top:1px solid var(--line)}
.f-grid{display:grid;grid-template-columns:1.3fr 1fr .9fr 1.25fr .9fr;gap:1.8rem 2rem}
.f-grid p{text-wrap:nowrap}
.f-brand p{text-wrap:pretty}
.f-brand img{width:104px;height:104px;border-radius:14px;margin-bottom:.8rem}
.f-brand p{max-width:28ch;color:var(--brown-soft);font-size:var(--step--1)}
.f-grid h2{font:500 var(--step--1)/1.3 var(--font);color:var(--brown-soft);margin-bottom:.6rem}
.f-grid p{margin:0}
.f-grid a{text-decoration:none}
.f-grid a:hover{text-decoration:underline}
.social{display:flex;gap:.6rem;list-style:none;margin:0;padding:0}
.social a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--brown);transition:background-color .2s}
.social a:hover{background:var(--white)}
.social svg{width:20px;height:20px}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.4rem 1.6rem;margin-top:clamp(36px,4vw,56px);padding-top:1rem;border-top:1px solid var(--line);font-size:var(--step--1);color:var(--brown-soft)}
.legal nav{display:flex;flex-wrap:wrap;gap:.1rem 1.3rem}
.legal a{display:inline-block;padding:.4rem 0;color:var(--brown);text-underline-offset:3px}
.legal a[aria-current]{font-weight:500;color:var(--rose-ink)}
@media (max-width:1000px){.f-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.f-brand{grid-column:span 2}}
@media (max-width:420px){.f-grid{grid-template-columns:1fr}.f-brand{grid-column:auto}}

/* ---------- inner pages ---------- */
.page-h{padding:clamp(40px,6vw,88px) 0 clamp(24px,3.5vw,44px)}
.page-h h1{margin-bottom:.35em}
.page-h h1 em,.doc h1 em{font-style:normal}
.page-h .lede a{color:var(--rose-ink)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:1.6rem 0;padding:0}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:.45rem 1rem;border-radius:999px;background:var(--white);border:1px solid var(--line);text-decoration:none;font-weight:500;font-size:var(--step--1);transition:border-color .2s}
.chip:hover,.chip:focus-visible{border-color:var(--rose)}
.msec{padding-block:clamp(36px,5vw,64px);border-top:1px solid var(--line)}
.msec:nth-of-type(even){background:var(--cream-2)}
.msec-grid{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start}
.msec-side h2{margin-bottom:.4rem}
.msec-note{color:var(--brown-soft);font-size:var(--step--1)}
.msec-photo{margin:1rem 0 0;border-radius:var(--r);overflow:hidden;aspect-ratio:1}
.msec-photo picture,.msec-photo img{width:100%;height:100%}
.msec-photo img{object-fit:cover}
.mlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,3vw,48px)}
.mitem{padding:1rem 0;border-bottom:1px solid var(--line)}
.mitem h3{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;font-size:var(--step-1)}
.mitem .price{font:500 var(--step-0)/1 var(--font);color:var(--rose-ink)}
.mitem p{margin:.35rem 0 0;color:var(--brown-soft);font-size:var(--step--1);line-height:1.55}
.menu-end{padding:clamp(48px,6vw,80px) 0;text-align:center}
.menu-end p{font:400 var(--step-3)/1.2 var(--font-head);margin-bottom:1.2rem}
@media (max-width:1000px){.mlist{grid-template-columns:1fr}}
@media (max-width:760px){.msec-grid{grid-template-columns:1fr}.msec-photo{aspect-ratio:16/9;max-width:520px}}
.gal{columns:3 280px;column-gap:clamp(12px,1.6vw,20px);padding-bottom:clamp(56px,7vw,96px)}
.gal figure{margin:0 0 clamp(12px,1.6vw,20px);break-inside:avoid;border-radius:var(--r);overflow:hidden;background:var(--cream-2)}
.gal img{width:100%}
@media (max-width:560px){.gal{columns:2}}
.doc{max-width:760px;padding-bottom:clamp(56px,7vw,96px)}
.doc h1{margin-bottom:.5em}
.doc h2{font-size:var(--step-2);margin:2.2rem 0 .7rem}
.doc .updated{font-size:var(--step--1);color:var(--brown-soft)}
.doc ul{padding-left:1.2rem}.doc li{margin:.4rem 0}
.doc a{color:var(--rose-ink);text-decoration:underline;text-underline-offset:3px}
.todo{display:inline;padding:.05rem .4rem;border-radius:4px;background:var(--blush);color:var(--brown);font-weight:500}
.nf{padding:clamp(56px,10vw,140px) 0;max-width:720px;min-height:calc(100svh - 76px - 420px)}
.nf h1{margin-bottom:.4em}

/* ---------- pop-up: one reusable invitation card ---------- */
.promo{width:min(100% - 32px,420px);max-height:calc(100svh - 32px);overflow:auto;padding:0;border:0;border-radius:16px;background:var(--blush);color:var(--brown);box-shadow:0 2px 4px rgba(89,72,61,.06),0 24px 60px -20px rgba(89,72,61,.35)}
.promo::backdrop{background:rgba(89,72,61,.28)}
.promo-in{margin:10px;padding:clamp(40px,7vw,48px) clamp(20px,5vw,32px) clamp(22px,4vw,30px);border:1px solid var(--line-rose);border-radius:10px;text-align:center;background:var(--cream)}
.promo-logo img{width:96px;height:96px;margin:0 auto .9rem;border-radius:50%}
.promo h2{font-size:clamp(1.7rem,1.5rem + 1vw,2.05rem);margin-bottom:.45em}
.promo-text{margin:0 0 .9rem;color:var(--brown)}
.promo-date{margin:0 0 1.1rem;font-weight:500;color:var(--rose-ink)}
.promo .btn{width:100%}
.promo-extra{margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--line-rose)}
.promo-extra p{margin:0 0 .7rem;font-size:var(--step--1)}
.promo-x{position:absolute;top:20px;right:20px;z-index:1;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line-rose);border-radius:50%;background:var(--white);color:var(--brown);cursor:pointer}
.promo-x svg{width:18px;height:18px}
.promo-x:hover{border-color:var(--brown)}
@media (prefers-reduced-motion:no-preference){
  .promo[open]{animation:promo-in .35s var(--ease)}
  .promo[open]::backdrop{animation:fade .2s ease-out}
}
@keyframes promo-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- motion (motion-brief.md + fix-brief.md §2) ----------
   Reveals are progressive enhancement: everything is visible by default. js/site.js adds html.motion-ready once it is running,
   marks whatever is already on screen as .in, and only then can anything below the fold start hidden. Each [data-reveal]
   fades and rises once when it is well inside the viewport. Tunables: --y (default 18px), --t (650ms), --d (delay), --s (scale).
   The hero has its own entrance on page load (html.hero-motion, set in <head>), never tied to scrolling. */
.motion-ready [data-reveal]{transition:opacity var(--t,650ms) var(--ease) var(--d,0ms),translate var(--t,650ms) var(--ease) var(--d,0ms),scale var(--t,650ms) var(--ease) var(--d,0ms)}
.motion-ready [data-reveal]:not(.in){opacity:0;translate:0 var(--y,18px);scale:var(--s,1)}
@keyframes rise{from{opacity:0;translate:0 var(--y,14px)}to{opacity:1;translate:0 0}}
@keyframes settle{from{scale:1.025}to{scale:1}}
.hero-motion .hero h1{--y:14px;animation:rise .75s var(--ease) .1s both}
.hero-motion .hero-lede{--y:12px;animation:rise .65s var(--ease) .25s both}
.hero-motion .hero-actions{--y:8px;animation:rise .55s var(--ease) .4s both}
.hero-motion .hero-media{animation:settle 1.1s var(--ease) .15s both}
@media (prefers-reduced-motion:reduce){
  .motion-ready [data-reveal]{opacity:1!important;translate:none!important;scale:1!important;transition:none!important}
  .hero-motion .hero *{animation:none!important}
}
@media print{.motion-ready [data-reveal]{opacity:1;translate:none;scale:1}}