/* =========================================================
   Rosie's Sidekick — theme styles
   Tokens live in theme.json; this file is the parts of the
   prototype's design system that CSS still has to do.
   ========================================================= */

:root{
  /* The same two wave masks as the prototype (1440x48, stretched).
     --wave-top keeps what is below the curve; --wave-bottom keeps what is above it. */
  --wave-top:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0,48 L0,20 C240,48 480,48 720,28 C960,8 1200,8 1440,28 L1440,48 Z'/%3E%3C/svg%3E");
  --wave-bottom:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1440 V28 C1200,8 960,8 720,28 C480,48 240,48 0,20 Z'/%3E%3C/svg%3E");
}

body{
  /* Bebas Neue has one weight; never let the browser fake-bold it. */
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}

h1 em{color:var(--wp--preset--color--pink);font-style:normal}

/* ---------- top bar & header ---------- */
.rosie-topbar{font-family:var(--wp--preset--font-family--small)}
.rosie-topbar p{margin:0}
@media (width <= 980px){ .rosie-topbar{display:none} }

/*
 * The bar's height comes from the navigation, and the badge is lifted out of
 * the flow so it hangs past the bottom edge and over the hero — the way the
 * demo sets it. Without this the logo sits inside the bar and pushes it to
 * 140px tall, which is the gap between the header and the page.
 */
/*
 * The template part puts the topbar and the header inside one wrapper div, and
 * a sticky element can only travel as far as its parent — so the bar scrolled
 * away with it. Dissolving the wrapper hands .rosie-header straight to the
 * page flow, the way the demo has it as a child of <body>.
 */
.rosie-header-slot{display:contents}
.rosie-header{position:sticky;top:0;z-index:60;overflow:visible;border-bottom:1px solid rgba(232,48,146,.38);box-shadow:0 4px 18px -10px rgba(0,0,0,.5)}
.rosie-header > .wp-block-group{position:relative;align-items:center}
/* Signed in, the admin bar is fixed over the top of the window, so the
 * sticky header has to start below it instead of sliding underneath. */
.admin-bar .rosie-header{top:32px}
@media screen and (max-width:782px){.admin-bar .rosie-header{top:46px}}
@media screen and (max-width:600px){.admin-bar .rosie-header{top:0}}
/*
 * The navigation, at the size the design sets it — 1.3rem of condensed caps,
 * not the 13px the block's "small" preset was giving it — with the pink rule
 * that grows under a link on hover.
 */
.rosie-header .wp-block-navigation{font-family:var(--wp--preset--font-family--condensed);text-transform:uppercase;letter-spacing:.05em}
.rosie-header .wp-block-navigation .wp-block-navigation__container{gap:1.6rem}
.rosie-header .wp-block-navigation a{position:relative;display:inline-block;font-weight:400;font-size:1.3rem;line-height:1.1;color:#fff;padding-block:.3rem;text-decoration:none}
.rosie-header .wp-block-navigation a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--wp--preset--color--pink);transition:width .2s ease}
.rosie-header .wp-block-navigation a:hover::after,
.rosie-header .wp-block-navigation a:focus-visible::after,
.rosie-header .wp-block-navigation .current-menu-item a::after{width:100%}
@media (prefers-reduced-motion:reduce){ .rosie-header .wp-block-navigation a::after{transition:none} }

/* The logo, the links and the button only fit side by side above ~1180px. */
@media (981px <= width <= 1180px){
  .rosie-header .wp-block-navigation .wp-block-navigation__container{gap:1rem}
  .rosie-header .wp-block-navigation a{font-size:1.15rem}
}
/* In the mobile overlay the links are bigger and the rule is pointless. */
.rosie-header .wp-block-navigation__responsive-container.is-menu-open a{font-size:1.45rem}
.rosie-header .wp-block-navigation__responsive-container.is-menu-open a::after{display:none}

.rosie-header .wp-block-site-logo{--rosie-badge:150px;position:relative;flex:0 0 auto;align-self:stretch;width:calc(var(--rosie-badge) * 1357 / 2000)}
.rosie-header .wp-block-site-logo img{position:absolute;left:0;top:calc(12px - .6rem);height:var(--rosie-badge);width:auto;max-width:none;display:block}
@media (width <= 980px){ .rosie-header .wp-block-site-logo{--rosie-badge:112px} }

/*
 * The hero starts against the bar; nothing sits between them. Written
 * broadly on purpose: the block gap puts 1.6rem above every top-level block,
 * and a hero that slips through — the catering cover had no page-header
 * class — shows it as a white band under the navigation.
 */
.wp-block-post-content > *:first-child,
main > *:first-child,
.rosie-page-header,
.rosie-hero{margin-block-start:0}

/*
 * And the three things .wp-site-blocks holds: the header part, main, and the
 * footer part. The block gap put 1.6rem above each of them — a white band
 * under the navigation on every hero, and another above the footer. The site
 * is three stacked regions; nothing belongs between them.
 */
.wp-site-blocks > *{margin-block-start:0}

/* ---------- section styles ---------- */
/* Tan sections carry the wave on both edges, cut into the tan so the white page
   shows through the curve. Above a dark band the bottom edge stays straight,
   because cutting there would expose white between the two. */
.is-style-tan{
  -webkit-mask:var(--wave-top) top/100% var(--wp--custom--wave-height) no-repeat,
    linear-gradient(#000 0 0) center/100% calc(100% - (var(--wp--custom--wave-height) * 2)) no-repeat,
    var(--wave-bottom) bottom/100% var(--wp--custom--wave-height) no-repeat;
  mask:var(--wave-top) top/100% var(--wp--custom--wave-height) no-repeat,
    linear-gradient(#000 0 0) center/100% calc(100% - (var(--wp--custom--wave-height) * 2)) no-repeat,
    var(--wave-bottom) bottom/100% var(--wp--custom--wave-height) no-repeat;
}
.is-style-tan-top{
  -webkit-mask:var(--wave-top) top/100% var(--wp--custom--wave-height) no-repeat,
    linear-gradient(#000 0 0) bottom/100% calc(100% - (var(--wp--custom--wave-height) - 1px)) no-repeat;
  mask:var(--wave-top) top/100% var(--wp--custom--wave-height) no-repeat,
    linear-gradient(#000 0 0) bottom/100% calc(100% - (var(--wp--custom--wave-height) - 1px)) no-repeat;
}
/* The catering band is tan with a wash of gold across the top corner, not a
   slab of pink; the demo keeps pink for the topbar and the accents only. */
.is-style-catering{background:
  radial-gradient(110% 120% at 100% 0,rgba(224,161,46,.16),transparent 50%),
  var(--wp--preset--color--cream)}
.is-style-dark{background:var(--wp--preset--color--dark);color:var(--wp--preset--color--white)}

/* ---------- cards & notes ---------- */
.is-style-card{
  background:var(--wp--preset--color--white);
  border:1px solid var(--wp--preset--color--line);
  border-radius:var(--wp--custom--radius);
  padding:1.5rem;
  box-shadow:var(--wp--custom--shadow-small);
}
.is-style-note{
  background:var(--wp--preset--color--cream);
  border:1px solid var(--wp--preset--color--line);
  border-left:4px solid var(--wp--preset--color--pink);
  border-radius:var(--wp--custom--radius-small);
  padding:1.1rem 1.3rem;
  color:var(--wp--preset--color--ink-soft);
}

/* ---------- images ---------- */
.is-style-framed img{border-radius:var(--wp--custom--radius);box-shadow:var(--wp--custom--shadow)}
/*
 * Mama Rosie's panel: she stands on the bottom edge of a pink card and her
 * head breaks out the top, with a chip naming her in the corner. The cutout is
 * 384x450 with no transparent margin, so at 88% of the panel's width she is
 * ~1.03 widths tall — a 4:3 panel leaves ~28% of the width poking out above.
 */
.rosie-panel{position:relative;border-radius:var(--wp--custom--radius);aspect-ratio:4/3;margin-top:28%;
  background:radial-gradient(85% 80% at 50% 18%,var(--wp--preset--color--pink-hilite),var(--wp--preset--color--pink));
  box-shadow:var(--wp--custom--shadow)}
.rosie-panel::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:.14;
  background-image:radial-gradient(circle at 1px 1px,#fff 1px,transparent 0);background-size:20px 20px}
.rosie-panel .wp-block-image{position:absolute;z-index:1;bottom:0;left:50%;transform:translateX(-50%);
  width:88%;margin:0}
.rosie-panel .wp-block-image img{width:100%;height:auto;max-width:none}
.rosie-chip{position:absolute;z-index:2;left:1.2rem;bottom:1.2rem;margin:0;
  background:var(--wp--preset--color--white);color:var(--wp--preset--color--pink-dark);
  font-family:var(--wp--preset--font-family--condensed);font-weight:400;text-transform:uppercase;
  letter-spacing:.08em;font-size:1.05rem;padding:.4em 1em .3em;border-radius:999px;
  box-shadow:var(--wp--custom--shadow-small)}

/* The Rosie illustration stands on the bottom edge of her panel and breaks out the top. */
.is-style-popout img{
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.35));
  clip-path:inset(-20% -20% 0 -20%);
}
.is-style-snapshots figure{background:#fff;padding:.5rem .5rem .6rem;border-radius:10px;box-shadow:var(--wp--custom--shadow-small)}
.is-style-snapshots figure:nth-child(odd){transform:rotate(-1.5deg)}
.is-style-snapshots figure:nth-child(even){transform:rotate(1.5deg)}
.is-style-snapshots img{aspect-ratio:1/1;object-fit:cover;border-radius:6px;display:block;width:100%}
/* Core lays a gallery caption over the picture in a dark bar; the demo prints
   it under the print, in pink. The selector has to out-weigh core's own. */
.wp-block-gallery.is-style-snapshots figure.wp-block-image figcaption{
  font-family:var(--wp--preset--font-family--small);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:.8rem;
  color:var(--wp--preset--color--pink-dark);text-align:center;
  position:static;background:none;padding:0;margin:.5rem 0 0;max-height:none;
  flex-grow:0;text-shadow:none}
.wp-block-gallery.is-style-snapshots figure.wp-block-image{display:block}

/* ---------- quotes ---------- */
/*
 * Two quote treatments, because the demo has two: a pull quote ruled down the
 * side, set inside running copy, and a statement — bigger, unruled — that
 * opens a section under its heading.
 */
.is-style-pullquote{
  font-family:var(--wp--preset--font-family--sub);
  font-weight:700;
  font-size:clamp(1.15rem,1rem + 1vw,1.55rem);
  line-height:1.28;
  color:var(--wp--preset--color--pink-dark);
  border-left:4px solid var(--wp--preset--color--pink);
  padding-left:1.2rem;
  margin:1.4rem 0;
}
.is-style-statement{
  font-family:var(--wp--preset--font-family--sub);
  font-weight:700;
  font-size:clamp(1.3rem,1rem + 1.6vw,1.8rem);
  line-height:1.3;
  color:var(--wp--preset--color--pink-dark);
  border:0;
  padding:0;
  margin:.5em 0 1.4rem;
}
.is-style-pullquote p,
.is-style-statement p{margin:0;font-size:inherit;line-height:inherit}

/* Freddy's panel: the photographs, what he does, and what he says about it,
   on one dark card washed with pink — the demo's .freddy-panel. */
.rosie-freddy{
  background:radial-gradient(80% 80% at 75% 12%,rgba(232,48,146,.5),transparent 60%),
    var(--wp--preset--color--dark);
  color:var(--wp--preset--color--white);
  border-radius:var(--wp--custom--radius);
  padding:clamp(1.6rem,4vw,2.4rem);
  box-shadow:var(--wp--custom--shadow);
  position:relative;
  overflow:hidden;
}
.rosie-freddy .rosie-slideshow{margin-bottom:1.4rem;border-radius:10px}
.rosie-freddy__quote{
  font-family:var(--wp--preset--font-family--sub);font-weight:400;color:var(--wp--preset--color--white);
  font-size:clamp(1.2rem,1rem + 1.1vw,1.6rem);line-height:1.3;border:0;padding:0;margin:.6rem 0 0;
}
.rosie-freddy__quote p{margin:0;font-size:inherit;line-height:inherit}
.rosie-freddy__quote cite{display:block;margin-top:1rem;font-style:normal;
  font-family:var(--wp--preset--font-family--small);text-transform:uppercase;letter-spacing:.08em;
  font-size:.85rem;color:var(--wp--preset--color--tan)}

/* The line under Freddy's photographs, and the key over each value card. */
.rosie-kicker{font-family:var(--wp--preset--font-family--condensed);text-transform:uppercase;
  letter-spacing:.08em;font-weight:400;font-size:1.08rem;margin:0}
.rosie-cards .rosie-kicker + .wp-block-heading{margin-top:.25rem}

/* ---------- buttons ---------- */
.is-style-ghost .wp-block-button__link{
  background:transparent;
  color:currentColor;
  box-shadow:inset 0 0 0 2px currentColor;
}
.is-style-ghost .wp-block-button__link:hover{background:var(--wp--preset--color--pink);color:var(--wp--preset--color--white);box-shadow:none}
.is-style-light .wp-block-button__link{background:var(--wp--preset--color--white);color:var(--wp--preset--color--ink)}
.is-style-light .wp-block-button__link:hover{background:var(--wp--preset--color--tan)}

/* Cap-height trimming keeps Bebas labels optically centered in the pill. */
@supports (text-box:trim-both cap alphabetic){
  .wp-block-button__link{text-box:trim-both cap alphabetic;padding-block:.9em}
}

/* ---------- footer ---------- */
/*
 * The wave above the footer, which the demo has on every page and we had on
 * none. Two cases, as the demo sets them: over the plain page the curve is cut
 * out of the footer so the page shows through, and over a tan or pink band
 * cutting would expose a white seam, so the curve is painted in that band's
 * color over the top of the footer instead. The band in question is the last
 * section in <main> — one level down on templated pages, two on pages whose
 * sections come out of post-content.
 */
/* The footer badge. An SVG with no intrinsic size needs an explicit height,
   or the block's width attribute leaves it collapsed. */
.rosie-footer .wp-block-site-logo{width:auto;margin-bottom:.8rem}
.rosie-footer .wp-block-site-logo img{height:150px;width:auto;max-width:none;display:block}
@media (max-width:560px){.rosie-footer .wp-block-site-logo img{height:130px}}
.rosie-footer{font-family:var(--wp--preset--font-family--small);position:relative;
  padding-top:calc(var(--wp--preset--spacing--60) + var(--wp--custom--wave-height));
  -webkit-mask:var(--wave-top) top/100% var(--wp--custom--wave-height) no-repeat,
    linear-gradient(#000 0 0) bottom/100% calc(100% - (var(--wp--custom--wave-height) - 1px)) no-repeat;
  mask:var(--wave-top) top/100% var(--wp--custom--wave-height) no-repeat,
    linear-gradient(#000 0 0) bottom/100% calc(100% - (var(--wp--custom--wave-height) - 1px)) no-repeat}

.wp-site-blocks:has(main > :last-child.is-style-tan) .rosie-footer,
.wp-site-blocks:has(main > :last-child > :last-child.is-style-tan) .rosie-footer,
.wp-site-blocks:has(main > :last-child.is-style-tan-top) .rosie-footer,
.wp-site-blocks:has(main > :last-child > :last-child.is-style-tan-top) .rosie-footer,
.wp-site-blocks:has(main > :last-child.is-style-catering) .rosie-footer,
.wp-site-blocks:has(main > :last-child > :last-child.is-style-catering) .rosie-footer{
  -webkit-mask:none;mask:none}

.wp-site-blocks:has(main > :last-child.is-style-tan) .rosie-footer::before,
.wp-site-blocks:has(main > :last-child > :last-child.is-style-tan) .rosie-footer::before,
.wp-site-blocks:has(main > :last-child.is-style-tan-top) .rosie-footer::before,
.wp-site-blocks:has(main > :last-child > :last-child.is-style-tan-top) .rosie-footer::before,
.wp-site-blocks:has(main > :last-child.is-style-catering) .rosie-footer::before,
.wp-site-blocks:has(main > :last-child > :last-child.is-style-catering) .rosie-footer::before{
  content:"";position:absolute;left:0;right:0;top:0;height:var(--wp--custom--wave-height);
  background:var(--wp--preset--color--cream);pointer-events:none;
  -webkit-mask:var(--wave-bottom) top/100% var(--wp--custom--wave-height) no-repeat;
  mask:var(--wave-bottom) top/100% var(--wp--custom--wave-height) no-repeat}

.wp-site-blocks:has(main > :last-child.is-style-catering) .rosie-footer::before,
.wp-site-blocks:has(main > :last-child > :last-child.is-style-catering) .rosie-footer::before{
  background:var(--wp--preset--color--pink)}

/* Full-width bands sit flush against each other, as the demo's sections do;
   the block gap between them left a stripe of page color in the seam. */
.alignfull + .alignfull{margin-block-start:0}

/*
 * A tan or catering band running straight into a dark band gets the same
 * treatment as the footer: the curve is painted in the band's own color over
 * the top of the dark one, because cutting it would show the white page.
 */
.is-style-tan + .is-style-dark,
.is-style-tan-top + .is-style-dark,
.is-style-catering + .is-style-dark{position:relative;
  padding-top:calc(var(--wp--preset--spacing--60) + var(--wp--custom--wave-height)) !important}
.is-style-tan + .is-style-dark::before,
.is-style-tan-top + .is-style-dark::before,
.is-style-catering + .is-style-dark::before{
  content:"";position:absolute;left:0;right:0;top:0;height:var(--wp--custom--wave-height);
  background:var(--wp--preset--color--cream);pointer-events:none;
  -webkit-mask:var(--wave-bottom) top/100% var(--wp--custom--wave-height) no-repeat;
  mask:var(--wave-bottom) top/100% var(--wp--custom--wave-height) no-repeat}
/* The tan band above it keeps a flat bottom edge, for the same reason. */
.is-style-tan:has(+ .is-style-dark){
  -webkit-mask:var(--wave-top) top/100% var(--wp--custom--wave-height) no-repeat,
    linear-gradient(#000 0 0) bottom/100% calc(100% - (var(--wp--custom--wave-height) - 1px)) no-repeat;
  mask:var(--wave-top) top/100% var(--wp--custom--wave-height) no-repeat,
    linear-gradient(#000 0 0) bottom/100% calc(100% - (var(--wp--custom--wave-height) - 1px)) no-repeat}

/* A dark band runs straight into the footer: both are near-black, so the join
   needs no curve at all, and cutting one would show the white page between
   them. The demo does the same on Our Story and Rewards. */
.wp-site-blocks:has(main > :last-child.is-style-dark) .rosie-footer,
.wp-site-blocks:has(main > :last-child > :last-child.is-style-dark) .rosie-footer{
  -webkit-mask:none;mask:none;padding-top:var(--wp--preset--spacing--60)}

/* A tan band that runs straight into the footer keeps a flat bottom edge; the
   painted curve above supplies the shape. */
.wp-site-blocks main > :last-child.is-style-tan,
.wp-site-blocks main > :last-child > :last-child.is-style-tan{
  -webkit-mask:var(--wave-top) top/100% var(--wp--custom--wave-height) no-repeat,
    linear-gradient(#000 0 0) bottom/100% calc(100% - (var(--wp--custom--wave-height) - 1px)) no-repeat;
  mask:var(--wave-top) top/100% var(--wp--custom--wave-height) no-repeat,
    linear-gradient(#000 0 0) bottom/100% calc(100% - (var(--wp--custom--wave-height) - 1px)) no-repeat}
.rosie-footer h4{font-family:var(--wp--preset--font-family--condensed);text-transform:uppercase;letter-spacing:.06em}
.rosie-footer__legal{opacity:.7;margin-top:var(--wp--preset--spacing--50)}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- the small pink label above a heading ---------- */
.rosie-eyebrow{
  font-family:var(--wp--preset--font-family--condensed);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:.2rem;
}

/* Page headers: the wave is cut out of the bottom so the page shows through. */
.rosie-page-header,
.rosie-post-header,
.rosie-hero{
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - (var(--wp--custom--wave-height) - 1px)) no-repeat,
    var(--wave-bottom) bottom/100% var(--wp--custom--wave-height) no-repeat;
  mask:linear-gradient(#000 0 0) top/100% calc(100% - (var(--wp--custom--wave-height) - 1px)) no-repeat,
    var(--wave-bottom) bottom/100% var(--wp--custom--wave-height) no-repeat;
  padding-bottom:var(--wp--custom--wave-height);
}

/* The About page alternates which side the photos sit on. */
@media (width >= 760px){
  .rosie-person-rev{flex-direction:row-reverse}
}

/* ---------- the hero's photographs ----------
   On a wide screen the photos sit behind the words and fade out to the left,
   so the headline stays readable over them. On a phone they become a band
   above the words instead, because text over a photo at 390px is a gamble. */
/*
 * The demo does not darken the hero with a flat scrim; it lays two soft pink
 * glows over a near-black ground and lets the photograph's own mask do the
 * fading, with a fine dot screen over the lot. Copied from the demo's values
 * rather than approximated.
 */
.rosie-hero{position:relative;overflow:hidden;
  background:
    radial-gradient(95% 80% at 82% -5%, rgba(232,48,146,.55), transparent 58%),
    radial-gradient(70% 60% at 0% 110%, rgba(232,48,146,.28), transparent 60%),
    var(--wp--preset--color--dark)}
.rosie-hero > *:not(.rosie-hero__photos){position:relative;z-index:2}
.rosie-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:.08;mix-blend-mode:overlay;
  background-image:radial-gradient(circle at 1px 1px, #fff 1px, transparent 0);background-size:22px 22px}

/* A scrim between the photos and the words. The slideshow can hold any photo
   the shop likes, including a bright one, and the headline still reads. */
.rosie-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  /* A whisper of darkening over the photo, as the demo has it — the heavy
     left-to-right scrim was ours, and it flattened the pink out of the hero. */
  background:rgba(17,17,17,.12);
}
@media (width <= 980px){
  /* On a phone the photo is a band above the words, so no scrim is wanted. */
  .rosie-hero::after{display:none}
}

.rosie-hero__photos{
  margin:0 0 1.6rem;
  aspect-ratio:3/2;
  border-radius:var(--wp--custom--radius-small);
}

@media (width > 980px){
  .rosie-hero__photos{
    position:absolute;
    inset:0 0 0 30%;
    margin:0;
    aspect-ratio:auto;
    border-radius:0;
    z-index:1;
    /* The photo stays well clear of the words: nothing of it is more than a
       suggestion until past the halfway mark, so the lead never sits on a
       bright bun. */
    -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.03) 8%,rgba(0,0,0,.1) 16%,rgba(0,0,0,.22) 24%,rgba(0,0,0,.4) 32%,rgba(0,0,0,.6) 40%,rgba(0,0,0,.78) 48%,rgba(0,0,0,.91) 56%,rgba(0,0,0,.98) 64%,#000 72%),
      linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.5) 8%,rgba(0,0,0,.9) 16%,#000 24%,#000 64%,rgba(0,0,0,.9) 74%,rgba(0,0,0,.5) 86%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.03) 8%,rgba(0,0,0,.1) 16%,rgba(0,0,0,.22) 24%,rgba(0,0,0,.4) 32%,rgba(0,0,0,.6) 40%,rgba(0,0,0,.78) 48%,rgba(0,0,0,.91) 56%,rgba(0,0,0,.98) 64%,#000 72%),
      linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.5) 8%,rgba(0,0,0,.9) 16%,#000 24%,#000 64%,rgba(0,0,0,.9) 74%,rgba(0,0,0,.5) 86%,transparent 100%);
    mask-composite:intersect;
  }
  .rosie-hero > *:not(.rosie-hero__photos){max-width:52%}
}


/* The three stars under the hero buttons, as the demo sets them. */
.rosie-hero__badges{display:flex;flex-wrap:wrap;gap:1.1rem;list-style:none;margin:1.1rem 0 0;padding:0;
  font-family:var(--wp--preset--font-family--condensed);text-transform:uppercase;letter-spacing:.04em;font-size:.84rem}
.rosie-hero__badges li{margin:0}
.rosie-hero__badges li::before{content:"\2605";color:var(--wp--preset--color--pink);margin-right:.45em}


/*
 * A lead is set to a reading measure and centered under its headline, the way
 * the demo sets it — 60ch on a page header, 56ch in the home hero. Without
 * this they run the full 1180px column and read as a wall.
 */
.rosie-page-header .wp-block-cover__inner-container > p{max-width:60ch;margin-inline:auto}
.rosie-page-header .wp-block-cover__inner-container > p.rosie-eyebrow{max-width:none}
.rosie-hero > p.has-large-font-size{max-width:56ch}

/* Catering is the exception the demo makes: its intro runs the full column. */
.page-catering-chicago .rosie-page-header .wp-block-cover__inner-container > p{max-width:none}


/*
 * The feature grids are cards in the demo — a white panel with a hairline, a
 * soft shadow and a lift on hover — not bare columns of text. Used by the
 * catering overview, the About ingredient grid and the home catering strip.
 */
.rosie-cards{gap:1.2rem;margin-top:2.4rem}
.rosie-cards > .wp-block-column{background:var(--wp--preset--color--white);border:1px solid var(--wp--preset--color--line);
  border-radius:16px;padding:1.3rem 1.5rem 1.6rem;box-shadow:0 6px 22px -14px rgba(33,28,23,.5);
  transition:transform .18s ease,box-shadow .2s ease}
.rosie-cards > .wp-block-column:hover{transform:translateY(-4px);box-shadow:0 18px 50px -24px rgba(33,28,23,.45)}
.rosie-cards > .wp-block-column > h3{margin:.2rem 0 .4rem;font-size:1.15rem;
  font-family:var(--wp--preset--font-family--display);font-weight:800;text-transform:uppercase;letter-spacing:-.005em}
.rosie-cards > .wp-block-column > p{font-size:.92rem;color:var(--wp--preset--color--ink-soft);margin:0}
@media (prefers-reduced-motion:reduce){ .rosie-cards > .wp-block-column{transition:none} }


/*
 * A place is a card on the Locations and Contact pages: white panel, hairline,
 * a pill for the neighborhood and the hours set off by a dashed rule. The
 * footer keeps its plain stacked layout.
 */
.rosie-places.is-full .rosie-place,
.rosie-places.is-contact .rosie-place,
.rosie-places.is-cards .rosie-place{background:var(--wp--preset--color--white);
  border:1px solid var(--wp--preset--color--line);border-radius:16px;padding:1.7rem;
  box-shadow:0 6px 22px -14px rgba(33,28,23,.5)}
.rosie-places:not(.is-footer) .rosie-place__label{display:inline-block;align-self:flex-start;
  font-family:var(--wp--preset--font-family--condensed);font-size:1rem;font-weight:400;letter-spacing:.08em;
  text-transform:uppercase;color:var(--wp--preset--color--pink-dark);background:var(--wp--preset--color--pink-soft);
  border:1px solid #f6c8e0;padding:.3em .8em;border-radius:999px}
.rosie-places:not(.is-footer) .rosie-place__name{margin:.9rem 0 .3rem}
.rosie-places:not(.is-footer) .rosie-place__address{color:var(--wp--preset--color--ink-soft);font-size:.95rem;margin:0}

/* Hours are lines, not a bulleted list. */
.rosie-place__facts{list-style:none;margin:.9rem 0 1.3rem;padding:.9rem 0 0;
  border-top:1px dashed var(--wp--preset--color--line);font-size:.86rem;color:var(--wp--preset--color--ink-soft)}
.rosie-place__facts li{margin:0}


/* The rewards steps: a pink disc with the number in it, as the demo sets it. */
.rosie-steps{gap:1.2rem;margin-top:2.4rem}
.rosie-step-n{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:var(--wp--preset--color--pink);color:#fff;font-family:var(--wp--preset--font-family--callout);
  font-size:1.5rem;line-height:1;padding-top:.1em;margin:0 0 .7rem}
.rosie-steps h3{margin:.1rem 0 .4rem;font-size:1.2rem}
.rosie-steps p:not(.rosie-step-n){margin:0;color:var(--wp--preset--color--ink-soft);font-size:.94rem}


/* The footer's Explore column is a list of links, not a bulleted list. */
.rosie-footer__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.rosie-footer__links li{margin:0}
.rosie-footer__links a{text-decoration:none}
.rosie-footer__links a:hover{text-decoration:underline}
.rosie-footer__social{gap:.6rem}
.rosie-footer__legal{border-top:1px solid rgba(255,255,255,.14);margin-top:2.2rem;padding-top:1.2rem}


/* Contact sets the shops beside the form, as the demo does. */
.rosie-contact-grid{gap:clamp(1.6rem,4vw,3rem);align-items:flex-start}
.rosie-contact-grid .rosie-places{display:grid;gap:1.2rem}


/*
 * The curved edge. The demo cuts a wave out of the bottom of every photo
 * header with a mask, so the page below shows through the curve rather than a
 * shape being drawn over it. 1440x48, stretched; the 47px keeps a sub-pixel
 * hairline of the photo from showing under the curve on 3x screens.
 */
/* The hero takes the same curved bottom edge as the page headers. */

/*
 * The home hero's text sits at the content gutter in a column about half the
 * measure, with the photograph filling the rest — measured off the demo at
 * 1792px wide, where the text starts at 346px and runs 596px.
 *
 * The !important matches WordPress's own: its constrained-layout rule centers
 * every child with margin-left:auto !important, so a plain declaration cannot
 * move them. Left to itself the lead floated 130px right of the headline.
 */
@media (width >= 981px){
  .rosie-hero > *:not(.rosie-hero__photos){
    margin-inline:max(40px, calc((100% - 1180px) / 2 + 40px)) auto !important;
    max-width:min(52%, 600px);
  }
}


/* The featured post leads in the display face, in pink, as the demo sets it. */
.rosie-post.is-lead .rosie-post__title{font-family:var(--wp--preset--font-family--display);font-weight:800;
  color:var(--wp--preset--color--pink-dark);text-transform:uppercase;letter-spacing:-.005em}
.rosie-post__meta{margin:0 0 .3rem;font-family:var(--wp--preset--font-family--condensed);
  text-transform:uppercase;letter-spacing:.06em;font-size:.9rem;color:var(--wp--preset--color--pink-dark)}
.rosie-post__meta time{font:inherit;color:inherit}


/* The catering request: words on the left, the form card on the right. */
.rosie-request{gap:clamp(1.6rem,4vw,3.4rem);align-items:flex-start}
.rosie-ticks{list-style:none;margin:1.2rem 0;padding:0;display:grid;gap:.5rem}
.rosie-ticks li{margin:0;padding-left:1.6em;position:relative}
.rosie-ticks li::before{content:"\2713";position:absolute;left:0;color:var(--wp--preset--color--pink-dark);font-weight:700}
.rosie-request .rosie-form{background:var(--wp--preset--color--white);border:1px solid var(--wp--preset--color--line);
  border-radius:16px;padding:1.6rem;box-shadow:0 6px 22px -14px rgba(33,28,23,.5)}


/* The catering strip: plain lines, not cards. */
.is-style-catering .rosie-cater-cards{gap:1rem;margin-top:1.4rem}
.is-style-catering .rosie-cater-cards p{margin:0}
/* The inquiry form sits on the band as a white card, as the demo sets it. */
.is-style-catering .rosie-form{background:var(--wp--preset--color--white);
  border:1px solid var(--wp--preset--color--line);border-radius:var(--wp--custom--radius);
  padding:clamp(1.4rem,3vw,2.2rem);box-shadow:var(--wp--custom--shadow)}


/*
 * A news post, set the way the demo sets it: the photograph runs full width
 * as a banner with nothing written over it, and the story sits under it in a
 * 740px column. The title used to be laid over the picture, which is a
 * different page entirely.
 */
.rosie-post-cover img{width:100%;max-height:460px;object-fit:cover;display:block}
.rosie-article > *{max-width:740px;margin-inline:auto}
.rosie-article__meta{gap:.4em;font-family:var(--wp--preset--font-family--condensed);
  text-transform:uppercase;letter-spacing:.08em;color:var(--wp--preset--color--pink);margin-bottom:.6rem}
.rosie-article__meta p,.rosie-article__meta time,.rosie-article__meta .wp-block-post-date{margin:0;font:inherit;color:inherit}
.rosie-article .wp-block-post-title{text-wrap:balance;margin:0 0 1.2rem;
  font-size:clamp(1.7rem,1.2rem + 2.4vw,2.7rem)}
.rosie-prose{font-size:1.08rem;line-height:1.75}
.rosie-prose p{margin:0 0 1.2rem}
.rosie-prose h2{font-family:var(--wp--preset--font-family--sub);text-transform:none;font-weight:700;letter-spacing:0;
  font-size:clamp(1.35rem,1.1rem + 1.1vw,1.75rem);margin:2.2rem 0 .7rem;color:var(--wp--preset--color--pink-dark)}
.rosie-prose h3{font-size:1.2rem;margin:1.6rem 0 .5rem}
.rosie-prose ul,.rosie-prose ol{margin:0 0 1.2rem;padding-left:1.3rem}
.rosie-prose li{margin:.35rem 0}
.rosie-prose a{color:var(--wp--preset--color--pink-dark);text-decoration:underline;text-underline-offset:.15em}
.rosie-prose figure{margin:2rem 0}
.rosie-prose figure img,.rosie-prose video{width:100%;height:auto;border-radius:12px;display:block}
.rosie-prose img{height:auto}
.rosie-prose blockquote{border-left:4px solid var(--wp--preset--color--pink);margin:1.4rem 0;padding-left:1.1rem;
  font-family:var(--wp--preset--font-family--sub);font-weight:700;color:var(--wp--preset--color--pink-dark)}
.rosie-prose blockquote p:last-child{margin-bottom:0}
.rosie-article__terms a{color:inherit;text-decoration:none}