:root{
  /* Ground and ink measured off her own menu card (img/menu-card.jpg):
     field #FAF3EB, ink #4C4E31 olive, saturated accent #F2482E melon.
     Plane structure from the Spark colour pass; the hues are hers. */
  --cream:#FAF3EB; --cream-2:#F2EAE0; --wood:#DCCBAA;
  --char:#1B2A41; --char-2:#0F1A2E;
  --ink:#16243A; --ink-2:#4F5C70; --brass:#BA924E;
  --olive:#4C4E31; --olive-2:#6A6C4E;
  --rose:#C8543A; --rose-deep:#A8442E;
  --line:#E3D8C8; --line-dark:#2A3B54;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E");
  --display:"Bodoni Moda",Didot,"Playfair Display",Georgia,serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --gut:clamp(20px,5vw,64px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;background-image:var(--grain);
  pointer-events:none;z-index:9999;mix-blend-mode:multiply}

/* furniture: a slat rule under the H2s, drawn from the bar front and her card */
.slat{display:block;width:78px;height:5px;margin:1.15rem 0 0;
  background:linear-gradient(180deg,var(--line) 0 1px,transparent 1px 2px,
    var(--brass) 2px 3px,transparent 3px 4px,var(--line) 4px 5px)}
.slat.on-dark{background:linear-gradient(180deg,var(--line-dark) 0 1px,transparent 1px 2px,
    var(--brass) 2px 3px,transparent 3px 4px,var(--line-dark) 4px 5px)}
/* her botanical sprig, the one motif that is already on her printed card */
.sprig{display:block;width:74px;height:26px;margin:0 0 .9rem;opacity:.62}
.sprig path{stroke:var(--olive);stroke-width:1.1;fill:none;stroke-linecap:round}
/* blind-debossed monogram, sits behind the folio and in the footer */
.mono-wm{position:absolute;pointer-events:none;font-family:var(--display);
  line-height:1;letter-spacing:.04em;color:var(--ink);opacity:.035;user-select:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gut)}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.06;letter-spacing:-0.015em}
h1{font-size:clamp(2.7rem,6.4vw,5rem)}
h2{font-size:clamp(2.1rem,4.4vw,3.5rem)}
h3{font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.2}
p{max-width:62ch}
.eyebrow{font-family:var(--body);font-size:.72rem;font-weight:600;letter-spacing:.19em;
  text-transform:uppercase;color:var(--brass);margin-bottom:1.1rem}
.eyebrow.light{color:var(--brass)}
.eyebrow .num-br{color:var(--brass)}
.section-lede{color:var(--ink-2);margin-top:1rem;font-size:1.06rem}
.hair{border:0;border-top:1px solid var(--line)}

/* nav: her logo, five links, one action */
/* S15, 2026-09-18: the header mark is HER LOGO, not type. His order, "can you change this to her
   logo?", pointing at the set wordmark in the header. img/logo-rs.png is the PNG she texted on
   2026-09-14 (RS monogram, ROSIEROSECREATIONZ tracked across the midline), the same file the home
   hero uses. Nav vertical padding drops 14px -> 10px so the bar reads ~62px rather than ~72px. */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:10px var(--gut);background:rgba(250,243,235,.94);backdrop-filter:blur(12px) saturate(140%);
  border-bottom:1px solid var(--line)}
.mark{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
.mark img{display:block;height:42px;width:auto}
@media (max-width:900px){.nav{padding:9px var(--gut)}.mark img{height:36px}}
.links{display:flex;align-items:center;gap:26px}
.links a{font-size:.9rem;text-decoration:none;color:var(--ink-2)}
.links a:hover{color:var(--rose)}
.links a.cta{padding:9px 17px;border:1px solid var(--rose);color:var(--rose);font-weight:500}
.links a.cta:hover{background:var(--rose);color:var(--cream)}
.burger{display:none;background:0;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:22px;height:1.5px;background:var(--ink);margin:5px 0}

/* hero: 40/60, the bar dominant, one action */
.hero{position:relative;display:flex;align-items:flex-end;isolation:isolate;
  min-height:min(88vh,900px);background:var(--char);overflow:hidden}
.hero-shot{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-shot img,.hero-shot video{width:100%;height:100%;object-fit:cover;display:block}
.hero-still{object-position:center 95%;transform:rotate(-1.5deg) scale(1.07);
  transform-origin:center}
/* The carved ROSIEROSECREATIONZ lettering runs 1.5deg down to the right in the source frame
   (measured off the letter band: y1350 at x315, y1384 at x1585). Rotated -1.5deg so the carved
   words sit level with the H1. scale(1.07) covers the corners the rotation exposes; both .hero
   and .hero-shot clip. His order, 2026-09-14 13:49 EDT. */
/* HERO IS THE STILL AND IT DOES NOT MOVE. His call, 2026-09-14 13:44 EDT, after looking at the
   video hero live: "the hero is just a bad video of it zooming in and out teribly, just make it
   the photo for now". The video element was removed from the hero rather than hidden, so the
   1.4MB clip is not downloaded. The three clips still run in the "in action" band below. */

.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(27,42,65,.58) 0%,rgba(27,42,65,.52) 26%,rgba(27,42,65,.74) 62%,rgba(27,42,65,.93) 100%)}
.hero-copy{position:relative;z-index:2;width:100%;max-width:1180px;margin:0 auto;
  padding:clamp(88px,16vw,180px) var(--gut) clamp(46px,6vw,78px)}
.hero-copy h1{margin-bottom:1.4rem;color:#FBF6EF;max-width:19ch;
  text-shadow:0 1px 26px rgba(0,0,0,.3)}
.hero .eyebrow{color:var(--brass)}
.lede{font-size:1.12rem;color:#CBD3DE;max-width:44ch}
.btns{margin-top:2.3rem}
.btn{display:inline-block;padding:15px 30px;background:var(--rose);color:#FFF9F4;text-decoration:none;
  font-size:.94rem;letter-spacing:.02em;border:1px solid var(--rose)}
.btn:hover{background:var(--rose-deep);border-color:var(--rose-deep);color:#FFF9F4}
.btn.light{background:var(--rose);color:#FFF9F4;border-color:var(--rose)}
.btn.light:hover{background:var(--rose-deep);border-color:var(--rose-deep)}
.btn.wide{width:100%;text-align:center;padding:17px;font-size:1rem;cursor:pointer;font-family:inherit}

/* trust ledger: one hairline band, not four boxes */
.ledger{background:var(--cream-2);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);box-shadow:inset 0 3px 0 -2px var(--line),inset 0 -3px 0 -2px var(--line)}
.ledger ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 28px;
  padding:18px 0;font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.ledger li{display:flex;align-items:center;gap:14px}
.ledger li+li::before{content:"";width:5px;height:5px;background:var(--brass);flex:0 0 5px;
  transform:rotate(45deg)}

/* sections: the padding changes with the section */
section{padding:clamp(56px,8vw,112px) 0}
.hero,.ledger{padding:0}
.services{padding-bottom:clamp(64px,9vw,128px);background:var(--cream)}
/* the proof stretch: one booking, three loops, five reviews, read as one run */
.booked{background:var(--cream-2);padding:clamp(48px,6vw,84px) 0 clamp(40px,5vw,64px);
  border-top:1px solid var(--line)}
.menus{padding:clamp(72px,10vw,150px) 0;background:var(--cream)}
.work{padding:clamp(48px,6vw,80px) 0 clamp(64px,8vw,112px);background:var(--cream-2)}
.about{padding:clamp(56px,8vw,112px) 0;background:var(--cream-2)}

/* services register: numbered rows on hairlines */
.register{margin-top:clamp(36px,5vw,64px);border-top:1px solid var(--line)}
.reg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) 300px;gap:clamp(20px,3vw,48px);
  align-items:center;padding:clamp(26px,3vw,44px) 0;border-bottom:1px solid var(--line)}
.reg .num{font-family:var(--body);font-size:.72rem;font-weight:600;color:var(--brass);
  letter-spacing:.2em;text-transform:uppercase;margin-bottom:.5rem}
.reg{transition:background 150ms ease}
.reg:hover{background:var(--cream-2)}
.reg h3{margin:0;font-size:clamp(1.5rem,2.4vw,2rem)}
.reg-head{max-width:22ch}
.reg p{color:var(--ink-2);font-size:1rem;max-width:none}
.reg-shot img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line);background:var(--cream-2)}
.addons{margin-top:clamp(48px,6vw,86px);padding-top:36px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,56px)}
.addons h3{margin-bottom:1.1rem}
.addon-list{list-style:none;display:grid;grid-template-columns:1fr;gap:10px 28px}
.addon-list li{font-size:.96rem;color:var(--ink-2);padding-left:18px;position:relative}
.addon-list li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:1px;background:var(--brass)}
.addon-list.incl li::before{width:7px;height:7px;top:.62em;background:var(--olive)}

/* booked for: proof, read as a fact */
.booked-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,64px);align-items:center}
.booked-copy h2{margin-bottom:1rem;font-size:clamp(1.7rem,3.2vw,2.4rem)}
.booked-copy p{color:var(--ink-2);max-width:46ch}
.booked-shot img{width:100%;aspect-ratio:3/2;object-fit:cover;border:1px solid var(--line);background:var(--cream)}
.booked-shot figcaption{font-size:.82rem;color:var(--ink-2);margin-top:.6rem;letter-spacing:.02em}

/* menu folio: the printed card on the left, the drinks typed out on the right */
.folio{margin-top:clamp(36px,5vw,64px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
.folio-side{position:relative}
.mat{padding:12px;border:1px solid var(--line);background:#FAF5EE;
  box-shadow:0 12px 32px -10px rgba(22,36,58,.10)}
.mat img{width:100%;aspect-ratio:5/4;object-fit:cover;border:1px solid var(--line)}
.roster{border-top:1px solid var(--line);position:relative}
.roster .mono-wm{right:-6px;top:38%;font-size:11rem;opacity:.038}
.roster-h{font-size:.72rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--brass);padding:16px 0 4px;position:relative;z-index:1}
.pour{position:relative;z-index:1}
.pour{padding:22px 0;border-bottom:1px solid var(--line)}
.pour h3{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:.4rem}
.pour p{color:var(--ink-2);max-width:40ch}
.roster-h-2{margin-top:2rem}
.pour-name{padding:14px 0}
.pour-name h3{margin-bottom:0}
.printed{margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);align-items:start}
.printed a{display:block}
.printed img{width:100%;height:auto;border:1px solid var(--line)}
.printed figcaption{margin-top:12px;color:var(--ink-2);font-size:.9rem}

/* gallery: an uneven mosaic, no equal tiles */
.slides-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.slide-nav{display:flex;gap:8px}
.slide-nav button{width:42px;height:42px;border:1px solid var(--line);background:transparent;
  cursor:pointer;font-size:1.1rem;color:var(--ink);line-height:1;transition:all 150ms ease}
.slide-nav button:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.slide-nav button:disabled{opacity:.3;cursor:default;background:transparent;color:var(--ink);border-color:var(--line)}
.rail{margin-top:clamp(24px,3vw,40px);display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
.rail::-webkit-scrollbar{display:none}
.rail .tile{flex:0 0 clamp(240px,27vw,340px);scroll-snap-align:start;margin:0}
.rail .tile img{aspect-ratio:4/5}
.mosaic{margin-top:clamp(30px,4vw,52px);display:grid;grid-template-columns:repeat(12,1fr);gap:14px;align-items:start}
.tile img{width:100%;object-fit:cover;background:var(--cream);border:1px solid var(--line);
  padding:7px;background-clip:content-box;box-shadow:0 0 0 1px var(--line) inset;transition:transform 200ms ease}
.tile{background:#FBF7F1;padding:0}
.tile a:hover img,.tile:hover img{transform:scale(1.015)}
.tile figcaption{margin-top:.55rem;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.t1{grid-column:1/6}.t1 img{aspect-ratio:4/5}
.t2{grid-column:6/13}.t2 img{aspect-ratio:3/2}
.t3{grid-column:1/5}.t3 img{aspect-ratio:1/1}
.t4{grid-column:5/9}.t4 img{aspect-ratio:3/4}
.t5{grid-column:9/13}.t5 img{aspect-ratio:1/1}
.t6{grid-column:1/8}.t6 img{aspect-ratio:16/10}
.t7{grid-column:8/13}.t7 img{aspect-ratio:4/5}

.venues{background:var(--cream);border-top:1px solid var(--line)}
.venues h2{margin-bottom:clamp(20px,2.5vw,32px)}
.venues p{color:var(--ink-2)}
.v-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(28px,3.5vw,52px);
  border-top:1px solid var(--line);margin-top:clamp(26px,3.5vw,44px)}
.v-item{padding:clamp(22px,2.6vw,32px) 0;border-bottom:1px solid var(--line)}
.v-item h3{margin-bottom:.6rem;color:var(--ink)}
.v-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:2.6rem}
.v-tel{color:var(--ink-2);text-decoration:none;font-size:.95rem;border-bottom:1px solid var(--line)}
.v-tel:hover{color:var(--rose);border-color:var(--rose)}

.about-grid{display:grid;grid-template-columns:0.8fr 1.2fr;gap:clamp(28px,5vw,80px);align-items:center}
.about-shot img{width:100%;aspect-ratio:3/4;object-fit:cover;border:1px solid var(--line);background:var(--cream-2)}
.about-copy h2{margin-bottom:1.1rem}
.about-copy p{color:var(--ink-2);margin-bottom:1rem}
.sig-line{font-family:var(--display);color:var(--ink)!important;font-size:1.05rem;padding-top:1rem;border-top:1px solid var(--line)}

/* form: unchanged fields, square edges */
.quote{background:var(--cream);border-top:1px solid var(--line)}
.quote-wrap{max-width:820px}
.quote form{background:#FDFAF5;border:1px solid var(--line);padding:clamp(22px,3.4vw,44px);
  box-shadow:0 12px 32px -4px rgba(22,36,58,.05);position:relative}
.quote form::before,.quote form::after{content:"";position:absolute;width:9px;height:9px;
  border:1px solid var(--brass)}
.quote form::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.quote form::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.quote form{margin-top:clamp(30px,4vw,46px)}
.reg{scroll-margin-top:80px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{margin-bottom:20px}
.field label,.field .lbl{display:block;font-size:.86rem;font-weight:600;letter-spacing:.02em;margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);
  background:var(--cream);border:1px solid var(--line);padding:13px 14px}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--brass);outline-offset:-2px;background:#FFFDF9}
.field textarea{min-height:112px;resize:vertical;line-height:1.55}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:9px}
.check{display:flex;align-items:center;gap:10px;padding:11px 13px;background:var(--cream);border:1px solid var(--line);cursor:pointer;font-size:.93rem}
.check input{width:17px;height:17px;flex:0 0 17px;accent-color:var(--rose)}
.check:has(input:checked){border-color:var(--rose);background:#FDF4F0}
.terms{margin-top:1.1rem;font-size:.85rem;color:var(--ink-2);max-width:none}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}

.faq-list{margin-top:clamp(28px,3.5vw,44px);border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;padding:20px 0;font-size:1.05rem;font-weight:500;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--display);font-size:1.4rem;color:var(--rose);flex:0 0 auto}
details[open]{background:var(--cream-2)}
details[open] summary,details[open] p{padding-left:14px;padding-right:14px}
details[open] summary::after{content:"\2013"}
details p{padding:0 0 22px;color:var(--ink-2)}

.foot{background:var(--char);color:var(--cream);padding:clamp(48px,6vw,80px) 0 34px;
  position:relative;overflow:hidden;border-top:1px solid var(--line-dark)}
.foot .mono-wm{color:#FBF8F3;opacity:.04;right:4%;top:50%;transform:translateY(-50%);font-size:15rem}
.foot-grid,.foot-credit,.foot-legal{position:relative;z-index:1}
.foot-grid{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:flex-start}
.foot-mark{font-family:var(--display);font-size:1.5rem;letter-spacing:.06em}
.foot-sub{color:#99A3B4;font-size:.9rem;margin-top:.3rem}
.foot-contact{display:flex;flex-direction:column;gap:9px}
.foot-contact a{color:var(--cream);text-decoration:none;font-size:.96rem}
.foot-contact a:hover{color:var(--brass)}
.foot-credit{font-size:.8rem;color:#949FB0;margin-top:1.4rem}
.foot-legal{max-width:1180px;margin:38px auto 0;padding:22px var(--gut) 0;border-top:1px solid var(--line-dark);color:#7E8899;font-size:.8rem}
.foot-sub{color:#949FB0}

/* reviews: her Thumbtack reviews, set as text. The screenshots were pulled 2026-09-14 (S11):
   reproducing the marketplace UI chrome is a separate exposure from quoting the reviewers words.
   Every word below is the reviewer verbatim, parsed out of the screenshots own alt text. */
.reviews{padding:clamp(48px,6vw,80px) 0 clamp(64px,8vw,112px);background:var(--cream-2);
  border-bottom:1px solid var(--line)}
.review-grid{margin-top:clamp(30px,4vw,52px);columns:2;column-gap:18px}
.review{break-inside:avoid;margin:0 0 18px;background:#FBF7F1;border:1px solid var(--line);
  padding:clamp(18px,2.2vw,26px) clamp(18px,2.2vw,26px) clamp(16px,2vw,22px);
  box-shadow:0 8px 24px -12px rgba(22,36,58,.14);position:relative}
.review::before{content:"\201C";position:absolute;top:-2px;right:14px;font-family:var(--display);
  font-size:4.6rem;line-height:1;color:var(--line);pointer-events:none}
.stars{display:block;color:var(--brass);font-size:.95rem;letter-spacing:.22em;margin-bottom:.7rem}
.review blockquote{font-size:1rem;line-height:1.6;color:var(--ink);margin:0 0 .9rem;position:relative;z-index:1}
.review figcaption{font-size:.76rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-2);display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding-top:.7rem;border-top:1px solid var(--line)}
.r-when{font-weight:400;letter-spacing:.1em;color:var(--brass)}
@media (max-width:700px){.review-grid{columns:1}}
/* in action: three short vertical loops, muted, no controls */
.action{padding:clamp(52px,7vw,92px) 0 clamp(56px,7vw,96px);background:var(--char);position:relative}
.action::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 28%,rgba(186,146,78,.11) 0%,rgba(27,42,65,0) 72%)}
.action .wrap{position:relative;z-index:1}
.action h2{color:#FBF6EF}
.action .eyebrow{color:var(--brass)}
.reels{margin-top:clamp(30px,4vw,52px);display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.reel{padding:8px;border:1px solid var(--line-dark);background:var(--char-2)}
.reel video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block;background:#0A1020;
  border:1px solid var(--line-dark)}
.reel figcaption{font-size:.78rem;color:#949FB0;margin-top:.7rem;letter-spacing:.09em;
  text-transform:uppercase;text-align:center}
@media (max-width:700px){
  .reels{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .reels::-webkit-scrollbar{display:none}
  .reel{flex:0 0 68%;scroll-snap-align:start}
}
@media (max-width:900px){
  .links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--cream);border-bottom:1px solid var(--line);padding:8px var(--gut) 18px;display:none}
  .hero{min-height:0}
  .hero-copy{padding:clamp(150px,44vw,300px) var(--gut) clamp(34px,7vw,52px)}
  .links.open{display:flex}
  .links a{padding:13px 0;font-size:1rem;border-bottom:1px solid var(--line)}
  .links a.cta{margin-top:12px;text-align:center;border:1px solid var(--ink)}
  .burger{display:block}
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-shot{order:-1;aspect-ratio:16/10;border-left:0;border-bottom:1px solid var(--line)}
  .hero-shot img{object-position:center 45%}
  .hero-copy{padding:36px var(--gut) 48px}
  .ledger ul{justify-content:flex-start;gap:10px 22px;font-size:.7rem}
  .reg{grid-template-columns:1fr;row-gap:14px}
  .reg-shot{max-width:100%}
  .addons{grid-template-columns:1fr;gap:32px}
  .booked-grid,.folio,.about-grid{grid-template-columns:1fr;gap:24px}
  .printed{grid-template-columns:1fr 1fr;gap:14px}
  .mosaic{grid-template-columns:1fr 1fr;gap:12px}
  .t1{grid-column:1/3}.t2{grid-column:1/3}.t3{grid-column:1/2}.t4{grid-column:2/3}
  .t5{grid-column:1/3}.t5 img{aspect-ratio:3/2}.t6{grid-column:1/2}.t6 img{aspect-ratio:3/4}.t7{grid-column:2/3}.t7 img{aspect-ratio:3/4}
  .v-grid{grid-template-columns:1fr}
  .row{grid-template-columns:1fr;gap:0}
}
@media (max-width:480px){
  body{font-size:16px}
  .ledger li+li::before{display:none}
  .ledger ul{flex-direction:column;gap:8px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* S12, his order 2026-09-14 13:58 EDT: "she sent me an image of the logo, make it the new hero,
   mov the cart". The hero is now HER OWN WORDMARK on her ivory ground, and the bar photo moved
   off the page entirely, his call at 14:02. The logo is the PNG she texted at
   13:57, background keyed out to alpha and re-inked to --ink so it is her mark, not a gray box. */
.hero{background:var(--cream);min-height:0;display:block;overflow:visible}
.hero::after{display:none}
.hero .hero-copy{text-align:center;max-width:960px;
  padding:clamp(52px,7vw,88px) var(--gut) clamp(38px,5vw,60px)}
.hero-mark{display:block;width:min(72vw,340px);height:auto;margin:0 auto clamp(24px,3.4vw,38px)}
.hero .hero-copy h1{color:var(--ink);max-width:21ch;margin-left:auto;margin-right:auto;text-shadow:none}
.hero .lede{color:var(--ink-2);max-width:50ch;margin-left:auto;margin-right:auto}
/* S12: from the ChatGPT critique he endorsed 2026-09-14, and Spark's reply to it. Three things
   only, the ones that are structure and space rather than his wording: a self-selection row so a
   visitor names their own event before reading service packages, more air between sections, and
   a section heading that carries the brand instead of "What she does". The page split into
   /services, /planners, /menus, /quote is the bigger recommendation and is NOT taken here. */
section{padding:clamp(72px,10vw,148px) 0}
.hero,.ledger,.kinds{padding:0}
.kinds{background:var(--cream);border-top:1px solid var(--line);
  padding:clamp(30px,4vw,46px) 0 clamp(26px,3.4vw,40px)}
.kinds .eyebrow{margin-bottom:.95rem}
.kinds ul{list-style:none;display:flex;flex-wrap:wrap;gap:12px 14px;padding:0;margin:0}
.kinds li{margin:0}
.kinds a{display:inline-block;text-decoration:none;color:var(--ink);
  font-size:.92rem;letter-spacing:.02em;padding:9px 17px;border:1px solid var(--line);
  border-radius:999px;background:var(--cream-2);transition:border-color .16s,color .16s}
.kinds a:hover{border-color:var(--rose);color:var(--rose)}
@media (max-width:640px){.kinds a{font-size:.87rem;padding:8px 14px}}

/* ============================================================================
   S13, 2026-09-15. THE PAGE SPLIT.
   Everything above this line is the S12 single-page stylesheet, copied byte for
   byte so the split changes structure and not appearance. Everything below is
   only what six pages need that one page did not: a nav that marks the page you
   are on, four short service cards on the home page, a tight selection of work,
   and one closing call to action band. ChatGPT's headline finding was that the
   home page was too long; the lever is editing, so nothing here adds a look.
   ========================================================================== */

/* nav: four links and the action, and the wordmark goes home from every page */
.links a[aria-current="page"]{color:var(--ink);border-bottom:1px solid var(--brass);padding-bottom:2px}
.links a.cta[aria-current="page"]{border:1px solid var(--rose);color:var(--rose);padding:9px 17px}

/* an interior page leads with an h1 set at the old section h2 size */
h1.ph{font-size:clamp(2.1rem,4.4vw,3.5rem)}

/* home: the four services as short cards, the full rows live on /services */
.svc-cards{margin-top:clamp(32px,4vw,56px);display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2vw,26px)}
.svc-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:#FBF7F1;border:1px solid var(--line);padding:10px 10px 18px;
  transition:border-color .16s ease,transform .2s ease}
.svc-card:hover{border-color:var(--brass);transform:translateY(-2px)}
.svc-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line)}
.svc-card .num{font-family:var(--body);font-size:.7rem;font-weight:600;color:var(--brass);
  letter-spacing:.2em;text-transform:uppercase;margin:16px 4px .4rem}
.svc-card h3{margin:0 4px .5rem;font-size:clamp(1.12rem,1.6vw,1.3rem)}
.svc-card p{margin:0 4px;color:var(--ink-2);font-size:.93rem;max-width:none}

/* a link that reads as a link and not as a button: the secondary action */
.more{display:inline-block;margin-top:clamp(26px,3vw,40px);font-size:.95rem;text-decoration:none;
  color:var(--ink);border-bottom:1px solid var(--brass);padding-bottom:3px}
.more:hover{color:var(--rose);border-color:var(--rose)}
.after-cta{margin-top:clamp(30px,3.6vw,48px)}

/* home: a tight selection of work, four frames, no rail and no slider */
.selected{margin-top:clamp(28px,3.5vw,48px);display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.selected .tile img{aspect-ratio:4/5}

/* three reviews on the home page, five on /work */
.review-grid.trio{columns:3}
@media (max-width:900px){.review-grid.trio{columns:2}}
@media (max-width:700px){.review-grid.trio{columns:1}}

/* the closing band: one primary action, repeated at the end of a page */
.cta-band{background:var(--char);color:var(--cream);position:relative;overflow:hidden;
  padding:clamp(56px,7vw,96px) 0}
.cta-band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 30%,rgba(186,146,78,.12) 0%,rgba(27,42,65,0) 74%)}
.cta-band .wrap{position:relative;z-index:1;text-align:center}
.cta-band h2{color:#FBF6EF}
.cta-band .slat{margin-left:auto;margin-right:auto}
.cta-band p{color:#CBD3DE;margin:1.1rem auto 0;max-width:50ch}
.cta-band .btns{margin-top:2rem;display:flex;flex-wrap:wrap;gap:16px 22px;justify-content:center;align-items:center}
.cta-band .more{color:#CBD3DE;margin-top:0}
.cta-band .more:hover{color:var(--brass);border-color:var(--brass)}

/* /services: the pricing philosophy line, no figures */
.pricing-note{margin-top:1.6rem;padding:16px 20px;border-left:2px solid var(--brass);
  background:var(--cream-2);color:var(--ink);font-size:1rem;max-width:56ch}

/* the footer carries About and the rest of the map */
.foot-nav{display:flex;flex-direction:column;gap:9px}
.foot-nav a{color:#CBD3DE;text-decoration:none;font-size:.96rem}
.foot-nav a:hover{color:var(--brass)}
.foot-credit-wrap{position:relative;z-index:1}

@media (max-width:900px){
  .svc-cards{grid-template-columns:1fr 1fr}
  .selected{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .svc-cards{grid-template-columns:1fr}
  .cta-band .btns{flex-direction:column;gap:14px}
  .cta-band .btn{width:100%;text-align:center}
}
.after-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.after-cta .more{margin-top:0}

/* S14, 2026-09-16: bar-slat wallpaper, council verdict (Opus seat; see
   CLIENTS/rosierose-mobile-bar/COUNCIL-VERDICT-background-2026-09-16.md). Her real bar front:
   blond oak slats, dark gaps; gaps drawn in her card's olive. Static, pure CSS, faded at edges. */
.hero,.work,.about,.booked,.reviews{position:relative;isolation:isolate}
.hero::before,.work::before,.about::before,.booked::before,.reviews::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.16;
  background:repeating-linear-gradient(90deg,#DCCBAA 0 26px,rgba(76,78,49,.55) 26px 28px);
  -webkit-mask-image:linear-gradient(transparent,#000 72px,#000 calc(100% - 72px),transparent);
          mask-image:linear-gradient(transparent,#000 72px,#000 calc(100% - 72px),transparent)}
.hero::before{opacity:.10}
@media (max-width:600px){
  .hero::before,.work::before,.about::before,.booked::before,.reviews::before{
    background:repeating-linear-gradient(90deg,#DCCBAA 0 18px,rgba(76,78,49,.55) 18px 20px)}
}


/* S14 background OPTIONS, switched by ?bg= (see script in each page head). Default = slats. */
/* stars: her menu card's four-point stars and olive sprig as a light wallpaper on every light section, sitewide */
html.bg-stars .hero::before,html.bg-stars .work::before,html.bg-stars .about::before,
html.bg-stars .booked::before,html.bg-stars .reviews::before{display:none}
html.bg-stars section:not(.cta-band):not(.action),html.bg-stars .ledger{
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'><g fill='%234C4E31' fill-opacity='.13'><path transform='translate(34 40) scale(.9)' d='M10 0C10.7 6.6 13.4 9.3 20 10C13.4 10.7 10.7 13.4 10 20C9.3 13.4 6.6 10.7 0 10C6.6 9.3 9.3 6.6 10 0Z'/><path transform='translate(190 150) scale(.55)' d='M10 0C10.7 6.6 13.4 9.3 20 10C13.4 10.7 10.7 13.4 10 20C9.3 13.4 6.6 10.7 0 10C6.6 9.3 9.3 6.6 10 0Z'/><path transform='translate(60 200) scale(.4)' d='M10 0C10.7 6.6 13.4 9.3 20 10C13.4 10.7 10.7 13.4 10 20C9.3 13.4 6.6 10.7 0 10C6.6 9.3 9.3 6.6 10 0Z'/></g><g fill='none' stroke='%234C4E31' stroke-opacity='.14' stroke-width='1.1' stroke-linecap='round'><path d='M150 60c14 10 30 14 52 10'/><path d='M165 67c2-8 8-12 15-12c-3 7-8 11-15 12z'/><path d='M182 71c4-7 10-10 17-9c-4 6-10 9-17 9z'/><path d='M170 69c-6 6-8 12-6 18c5-4 7-10 6-18z'/></g></svg>");background-size:260px 260px}
/* photo: the closing band WAS her own bar under an olive wash (bar-room.jpg at 80/88% olive).
   S16, 2026-09-18, his order: "can you change this to her logo?" pointing at this band. Under that
   wash the only thing readable in the photo was the RS mounted on her slat front, so the band was a
   murky photograph OF her logo. It is now the logo itself: flat olive ground, her mark centred as a
   cream watermark. img/logo-rs-cream.png is her own logo-rs.png with its alpha kept and the ink
   filled cream (#FBF6EF) so it reads on olive; nothing was redrawn. 392x265, 7,905 bytes.
   bar-room.jpg stays on disk and is still shown as a real photo on /index and /services. */
html.bg-photo .cta-band{background:var(--olive)}
html.bg-photo .cta-band::before{display:block;
  background:url(img/logo-rs-cream.png) center/min(440px,62%) no-repeat;opacity:.17}

/* S14, his order 2026-09-16: "make these quote boxes softer, rounded edges, think apple ui/ux".
   Pill buttons, soft depth, gentle press. Default background is now stars + olive photo band. */
.btn,.links a.cta,.links a.cta[aria-current="page"]{border-radius:999px}
.btn{padding:15px 32px;font-weight:500;letter-spacing:.01em;
  box-shadow:0 1px 2px rgba(22,36,58,.08),0 6px 18px -6px rgba(168,68,46,.45);
  transition:background-color .2s ease,box-shadow .2s ease,transform .12s ease}
.btn:hover{box-shadow:0 2px 4px rgba(22,36,58,.10),0 10px 24px -8px rgba(168,68,46,.55)}
.btn:active{transform:scale(.97)}
.btn.wide{border-radius:14px}
.links a.cta{padding:9px 20px;transition:background-color .2s ease,color .2s ease}
@media (max-width:600px){.links a.cta{border-radius:999px}}

/* S14, his note 2026-09-16: olive band sitting on the navy footer looks bad, and two dark bands of
   different colours stacked is the problem. Fix: ONE dark colour on the site, her olive. The footer
   goes light (Apple-style: a quiet light footer under the last band); the work-page video section
   goes olive so no navy remains anywhere. */
.foot{background:var(--cream-2);color:var(--ink);border-top:1px solid var(--line)}
.foot .mono-wm{color:var(--olive);opacity:.05}
.foot-sub,.foot-credit{color:var(--ink-2)}
.foot-nav a,.foot-contact a{color:var(--ink)}
.foot-nav a:hover,.foot-contact a:hover{color:var(--rose)}
.foot-legal{border-top:1px solid var(--line);color:var(--ink-2)}
.action{background:#3E4028}
.reel{background:#2F311E;border-color:rgba(250,243,235,.14)}
html:not(.bg-photo) .cta-band{background:var(--olive)}

/* S14, his order 2026-09-16: Saxon Foundry credit in her footer, linked to our site.
   Wordmark in Darker Grotesque 700 (his typeface pick, 2026-09-05), subset to those letters only. */
.foot-legal{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:baseline}
.sf-credit{color:var(--ink-2);text-decoration:none;font-size:.8rem}
.sf-mark{font-family:"Darker Grotesque",var(--body);font-weight:700;font-size:1.08rem;letter-spacing:.01em;
  color:var(--ink);margin-left:3px;transition:color .2s ease}
.sf-credit:hover .sf-mark{color:var(--rose)}

/* S18: showpiece band, dark for the luxury section */
.showpiece{background:var(--ink);color:var(--cream);padding:clamp(64px,9vw,128px) 0}
.showpiece h2{color:var(--cream)}
.showpiece .section-lede{color:#C9CFD8}
.show-grid{margin-top:clamp(32px,4vw,56px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,22px)}
.show-grid figure{margin:0}
.show-grid img{width:100%;aspect-ratio:5/4;object-fit:cover;display:block;border:1px solid var(--line-dark)}
.show-grid figcaption{margin-top:.7rem;font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
@media (max-width:900px){.show-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.show-grid{grid-template-columns:1fr}}