/* The Sweetest Spot Cafe, v3 (13 Oct 2026). Shared by index.html and menu.html.
   Everything comes from the room: the pink flower wall (blossom bands), the teal velvet bench (the dark colour,
   with its buttoned tufts), the pink neon script, the gold table legs (fine lines), and doily-scalloped edges.
   v2's discipline stays: a short page, one filled button per screen, plain words. */
:root{
  --bg:#FFF7F8;          /* blush white: the pale walls */
  --surface:#FFFFFF;
  --soft:#FBE3EB;        /* blossom pink: the flower wall */
  --petal:#F6BED2;       /* deeper petal, for the blossom circles */
  --ink:#1E3D3B;         /* teal-green: the script in their logo, the velvet bench */
  --night:#163130;       /* the bench in shadow */
  --muted:#5D5A5C;
  --line:#EBD3DA;
  --accent:#B0306A;      /* deep rose: buttons and prices */
  --accent-dk:#962657;
  --on-accent:#FFFFFF;
  --neon:#FF4FA3;        /* the neon signs */
  --gold:#C9A15B;        /* the gold table legs: fine lines only */
  --display:"Gloock",Georgia,"Times New Roman",serif;
  --body:"Mulish",system-ui,-apple-system,"Segoe UI",sans-serif;
  --script:"Yellowtail","Brush Script MT",cursive;
  --r:18px;
  --sc:12px;             /* scallop size */
  --gut:20px;
  --max:1120px;
  --glow:0 0 1px #fff,0 0 6px var(--neon),0 0 16px var(--neon),0 0 34px rgba(255,79,163,.7);
}
@media (min-width:640px){:root{--gut:32px}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
figure,p{margin:0}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.06;margin:0;text-wrap:balance}
h1{font-size:clamp(40px,6.4vw,70px);letter-spacing:-.01em}
h2{font-size:clamp(32px,4.6vw,52px);letter-spacing:-.005em}
.small{font-size:14px;color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Textures from the shop */
.blossom{background:
  radial-gradient(circle at 6% 10%,rgba(255,255,255,.6) 0 64px,transparent 65px),
  radial-gradient(circle at 96% 6%,rgba(246,190,210,.75) 0 110px,transparent 111px),
  radial-gradient(circle at 92% 70%,rgba(255,255,255,.5) 0 80px,transparent 81px),
  radial-gradient(circle at 2% 82%,rgba(246,190,210,.6) 0 96px,transparent 97px),
  radial-gradient(circle at 50% 40%,rgba(255,255,255,.35) 0 140px,transparent 141px),
  var(--soft)}
/* the buttoned velvet bench: a diamond of tufts, very faint */
.velvet{background-color:var(--night);background-image:
  radial-gradient(circle,rgba(0,0,0,.35) 0 1.6px,transparent 2.4px),
  radial-gradient(circle,rgba(0,0,0,.35) 0 1.6px,transparent 2.4px),
  radial-gradient(ellipse 60% 50% at 50% 50%,rgba(255,255,255,.035),transparent 70%),
  radial-gradient(ellipse 60% 50% at 50% 50%,rgba(255,255,255,.035),transparent 70%);
  background-size:34px 34px;background-position:0 0,17px 17px,17px 0,0 17px}

/* Doily-scalloped edges, cut with a mask so they work over photos and colour alike */
.edge-b,.edge-t{-webkit-mask-repeat:no-repeat,repeat-x;mask-repeat:no-repeat,repeat-x}
.edge-b{
  -webkit-mask-image:linear-gradient(#000 0 0),radial-gradient(circle at 50% 0,#000 calc(var(--sc) - .6px),#0000 var(--sc));
          mask-image:linear-gradient(#000 0 0),radial-gradient(circle at 50% 0,#000 calc(var(--sc) - .6px),#0000 var(--sc));
  -webkit-mask-size:100% calc(100% - var(--sc)),calc(var(--sc)*2) var(--sc);mask-size:100% calc(100% - var(--sc)),calc(var(--sc)*2) var(--sc);
  -webkit-mask-position:top,bottom;mask-position:top,bottom}
.edge-t{
  -webkit-mask-image:linear-gradient(#000 0 0),radial-gradient(circle at 50% 100%,#000 calc(var(--sc) - .6px),#0000 var(--sc));
          mask-image:linear-gradient(#000 0 0),radial-gradient(circle at 50% 100%,#000 calc(var(--sc) - .6px),#0000 var(--sc));
  -webkit-mask-size:100% calc(100% - var(--sc)),calc(var(--sc)*2) var(--sc);mask-size:100% calc(100% - var(--sc)),calc(var(--sc)*2) var(--sc);
  -webkit-mask-position:bottom,top;mask-position:bottom,top}

/* Neon script */
.neon{font-family:var(--script);font-size:clamp(40px,8.6vw,60px);line-height:1;color:#FFE4F1;text-shadow:var(--glow)}
@media (prefers-reduced-motion:no-preference){
  .walk-in .neon{animation:switch-on 1.6s .3s both}
  @keyframes switch-on{0%,12%,20%{opacity:.25;text-shadow:none}10%,16%,24%,100%{opacity:1;text-shadow:var(--glow)}}
}

/* Buttons: one filled style (pill, like v1), a quiet one, and a link */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:14px 30px;border-radius:999px;border:0;
  font:700 17px/1.2 var(--body);text-decoration:none;cursor:pointer;background:var(--accent);color:var(--on-accent);transition:background-color .15s,transform .1s ease-out;
  box-shadow:0 12px 26px -14px rgba(176,48,106,.8)}
.btn:hover{background:var(--accent-dk)}
.btn:active{transform:scale(.97)}
.btn-quiet{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-quiet:hover{background:var(--soft)}
.more{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:10px 22px;border-radius:999px;font-weight:700;color:var(--ink);text-decoration:none;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--ink)}
.more::after{content:"→";color:var(--accent)}
.more:hover{background:var(--ink);color:#fff}

/* Header: their logo as a wordmark (THE / script / CAFE) */
.site-head{position:sticky;top:0;z-index:30;background:var(--bg);box-shadow:0 1px 0 transparent;transition:box-shadow .2s}
.site-head.scrolled{box-shadow:0 1px 0 var(--line)}
.site-head .wrap{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.site-head nav{display:flex;gap:4px 22px;font-weight:700;font-size:15.5px}
.site-head nav a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.site-head nav a:hover{color:var(--accent)}
@media (max-width:520px){.site-head nav .hide-sm{display:none}}
.wordmark{display:inline-grid;justify-items:center;line-height:1;text-decoration:none;color:var(--ink);padding:4px 0}
.wordmark small{font:700 12px/1 var(--body);letter-spacing:.22em;padding-left:.22em;color:var(--accent);text-transform:uppercase}
.wordmark span{font-family:var(--script);font-size:27px;line-height:1.05;padding:0 4px 2px}

/* 1. Walking in: the room, then the velvet panel with the neon line */
.walk-in{color:#fff;background:var(--soft)}
.room{position:relative;background:var(--night)}
.room img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:62% 40%}
.room::after{content:"";position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(transparent,var(--night))}
.panel{position:relative;padding-bottom:var(--sc)}
.panel-in{padding:22px var(--gut) 48px;display:grid;gap:14px;justify-items:start;max-width:600px;position:relative}
.walk-in .neon{margin:-14px 0 2px;transform:rotate(-4deg);transform-origin:0 100%}
.walk-in h1{color:#fff;max-width:11em}
.walk-in .lede{color:rgba(255,255,255,.86);max-width:30em}
.walk-in .btn{margin-top:8px}
.walk-in .open-now{color:rgba(255,255,255,.86);font-size:15px}
.walk-in :focus-visible{outline-color:#fff}
@media (min-width:900px){
  .walk-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);background:var(--night)}
  .room img{height:100%;aspect-ratio:auto;min-height:640px;object-position:60% 40%}
  .room::after{inset:0 0 0 auto;width:30%;height:auto;background:linear-gradient(90deg,transparent,var(--night))}
  .panel{display:flex;align-items:center;padding-bottom:0;-webkit-mask:none;mask:none}
  .panel-in{padding:72px 56px 72px 40px}
  .walk-in .neon{margin:0 0 6px}
}

/* 2. The counter on the flower-wall pink */
.counter{padding:56px 0 64px}
.counter-head p{margin-top:10px;color:var(--muted);max-width:30em}
.picks{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.picks a{display:grid;height:100%;grid-template-rows:auto 1fr;text-decoration:none;background:var(--surface);border-radius:var(--r);overflow:hidden;
  box-shadow:0 22px 40px -28px rgba(176,48,106,.55);transition:transform .2s ease-out}
.picks a:hover{transform:translateY(-3px)}
.picks a:hover b{color:var(--accent)}
/* product panels: crops of their flower wall, the item named in neon. Ready to take a food photo later. */
.ph{position:relative;display:grid;place-items:center;aspect-ratio:1/1;padding:12px;text-align:center;overflow:hidden;
  background-image:linear-gradient(180deg,rgba(22,49,48,.05),rgba(22,49,48,.5)),url(img/booth-flower-wall.webp);background-size:cover,260%;background-color:var(--night)}
.ph span{font-family:var(--script);font-size:clamp(27px,7.2vw,38px);line-height:1;color:#FFE4F1;text-shadow:var(--glow);transform:rotate(-5deg)}
.ph-1{background-size:cover,330%;background-position:0 0,0 0}
.ph-2{background-size:cover,330%;background-position:0 0,100% 0}
.ph-3{background-image:linear-gradient(180deg,rgba(22,49,48,.05),rgba(22,49,48,.5)),url(img/interior.jpg);background-size:cover,300%;background-position:0 0,96% 6%}
.ph-4{background-size:cover,330%;background-position:0 0,60% 9%}
.picks img{width:100%;aspect-ratio:1/1;object-fit:cover}
.pb{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;padding:14px 14px 16px;align-content:start}
.pb b{font-weight:700;font-size:16.5px;line-height:1.3}
.pb .p{font:400 19px/1.2 var(--display);color:var(--accent);font-variant-numeric:tabular-nums}
.pb .d{grid-column:1/-1;color:var(--muted);font-size:14.5px;line-height:1.45;margin-top:2px}
.pb small{grid-column:1/-1;margin-top:8px;padding-top:8px;border-top:1px dotted var(--gold);font-size:12.5px;font-weight:700;color:var(--accent)}
@media (max-width:420px){.pb{grid-template-columns:1fr}.pb .d{display:none}}
.counter-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:28px}
.how{color:var(--muted);max-width:28em}
@media (min-width:900px){
  .counter{padding:104px 0 112px}
  .counter-head{display:flex;justify-content:space-between;align-items:end;gap:32px}
  .counter-head h2{flex:none}
  .counter-head p{margin:0;text-align:right;max-width:24em}
  .picks{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:40px}
  .counter-foot{justify-content:space-between;margin-top:36px}
}

/* 3. One customer, under "I got you babe" */
.said{color:#fff;padding:calc(48px + var(--sc)) 0 64px;margin-top:calc(var(--sc) * -1);position:relative}
.said-in{display:grid;gap:0}
.booth{border-radius:200px 200px var(--r) var(--r);overflow:hidden;box-shadow:0 0 0 1px rgba(201,161,91,.6),0 0 0 8px var(--night),0 0 0 9px rgba(201,161,91,.5);max-width:440px;width:100%;justify-self:center}
.booth img{width:100%;aspect-ratio:4/4.4;object-fit:cover;object-position:30% 30%}
.quote{position:relative;margin-top:28px}
.quote::before{content:"\201C";position:absolute;top:-34px;left:-4px;font:400 96px/1 var(--display);color:var(--neon);text-shadow:0 0 18px rgba(255,79,163,.6);opacity:.9}
.said blockquote{margin:0;padding-top:28px;font:400 clamp(24px,3.2vw,34px)/1.3 var(--display);max-width:22em}
.said .who{margin-top:16px;font-size:15px;color:rgba(255,255,255,.78);font-weight:700}
.said .stars{color:var(--gold);letter-spacing:2px;margin-right:6px}
@media (min-width:900px){
  .said{padding:calc(96px + var(--sc)) 0 104px}
  .said-in{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:80px;align-items:center}
  .quote{margin:0}
}

/* 4. The cake cabinet */
.cakes{padding:calc(48px + var(--sc)) 0 64px;margin-top:calc(var(--sc) * -1);position:relative}
.cakes-in{display:grid;gap:28px}
.cakes-copy{position:relative}
.cakes-copy h2{max-width:8em;padding-right:118px}
.cakes-copy p{margin-top:14px;max-width:30em}
.doily{position:absolute;top:-14px;right:-6px;width:126px;aspect-ratio:1;display:grid;place-content:center;justify-items:center;transform:rotate(8deg);margin:0}
.doily svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 14px 18px rgba(22,49,48,.3))}
.doily small{position:relative;font:400 22px/1 var(--script);color:#FFE4F1;text-shadow:0 0 8px var(--neon)}
.doily span{position:relative;font:400 40px/1 var(--display);color:#fff;letter-spacing:-.01em}
.form{display:grid;gap:16px;max-width:580px;background:var(--surface);border-radius:var(--r);padding:24px 20px;
  box-shadow:inset 0 0 0 8px var(--surface),inset 0 0 0 9px rgba(201,161,91,.7),0 30px 60px -36px rgba(176,48,106,.6)}
.form label{display:grid;gap:6px;font-size:15px;font-weight:700}
.form input,.form textarea{font:400 16px/1.4 var(--body);padding:12px 14px;border:1.5px solid #E8CCD5;border-radius:12px;background:var(--bg);color:var(--ink);width:100%}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(176,48,106,.18)}
.form textarea{min-height:96px;resize:vertical}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form .btn{justify-self:start}
.form-status{font-size:15px}
.form-status:empty{display:none}
.form-status.err{color:#B3261E}
.preview-tag{display:block;margin-top:4px;font-weight:700;color:var(--accent)}
.sent h3{font-size:30px}
.sent p{margin-top:8px}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
@media (max-width:359px){.form .row2{grid-template-columns:1fr}}
@media (min-width:640px){.form{padding:32px}}
@media (min-width:900px){
  .cakes{padding:calc(104px + var(--sc)) 0 112px}
  .cakes-in{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:72px;align-items:start}
  .cakes-copy{padding-top:140px}
  .cakes-copy h2{padding-right:0}
  .doily{top:-10px;left:0;right:auto;width:170px;transform:rotate(-8deg)}
  .doily small{font-size:28px}.doily span{font-size:56px}
}

/* 5. The way out to the plaza */
.visit{padding-bottom:72px;background:var(--bg)}
.plaza{background:var(--soft)}
.plaza img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 58%}
.visit-in{display:grid;gap:28px;padding-top:32px}
.neon-sm{font-size:40px;color:var(--accent);text-shadow:0 0 1px #fff,0 0 10px rgba(255,79,163,.45);transform:rotate(-4deg);transform-origin:0 100%;margin-bottom:6px}
.visit address{font-style:normal;font-size:18px;margin-top:14px}
.visit iframe.map{display:block;width:calc(100% - 2*var(--gut,20px));max-width:1100px;height:280px;margin:8px auto 0;border:0;border-radius:18px;background:var(--surface)}
.ways{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.ways a{display:inline-flex;align-items:center;min-height:48px;padding:10px 20px;border-radius:999px;font-weight:700;text-decoration:none;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--ink)}
.ways a:hover{background:var(--ink);color:#fff}
.open-now{font-weight:700;display:inline-flex;align-items:center;gap:8px}
.open-now::before{content:"";width:9px;height:9px;border-radius:50%;background:#3DBE7A;box-shadow:0 0 0 4px rgba(61,190,122,.22)}
.open-now.closed::before{background:#B9A6AD;box-shadow:0 0 0 4px rgba(185,166,173,.25)}
.hours-card{background:var(--surface);border-radius:var(--r);padding:20px 22px;box-shadow:inset 0 0 0 1px var(--line),0 24px 50px -36px rgba(176,48,106,.5);max-width:460px}
.hours{width:100%;border-collapse:collapse;font-size:16px;font-variant-numeric:tabular-nums;margin-top:10px}
.hours td{padding:8px 0;border-bottom:1px dotted #E2BFCB}
.hours tr:last-child td{border-bottom:0}
.hours td:last-child{text-align:right}
.hours tr.today td{font-weight:700;color:var(--accent)}
@media (min-width:900px){
  .visit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-bottom:0;align-items:stretch}
  .plaza{-webkit-mask:none;mask:none}
  .plaza img{height:100%;aspect-ratio:auto;min-height:600px}
  .visit-in{padding:80px 48px 96px 64px;margin:0;align-content:center}
}

/* Footer: the bench teal, scalloped */
.site-foot{background:var(--night);color:rgba(255,255,255,.78);padding:calc(40px + var(--sc)) 0 48px;font-size:14.5px;margin-top:calc(var(--sc) * -1);position:relative}
.site-foot .wrap{display:grid;gap:16px;justify-items:start}
.site-foot p{display:flex;flex-wrap:wrap;gap:4px 24px}
.site-foot a{color:#fff}
.site-foot p a{display:inline-block;padding:10px 0;margin:-10px 0}
.site-foot .wordmark{color:#fff}
.site-foot .wordmark small{color:#FFC2DC}
.site-foot :focus-visible{outline-color:#fff}
@media (min-width:780px){.site-foot .wrap{grid-template-columns:auto 1fr;align-items:center}.site-foot p{justify-content:flex-end}}

/* Phone bar: appears once the hero button has scrolled away (kit.js) */
.mbar{display:none}
@media (max-width:640px){
  .mbar:not([hidden]){display:grid;grid-template-columns:1fr auto;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--bg);box-shadow:0 -1px 0 var(--line)}
  .mbar .btn{min-height:48px;padding:10px 20px}
  .mbar.off{display:none!important}
  body{padding-bottom:76px}
}

/* Specials banner: the owner sets it in my.sitesbyleo.com.au; hidden until they do (Leo, 14 Oct 2026). */
.special{background:var(--accent);color:var(--on-accent);font-size:15px;font-weight:600;line-height:1.4;padding:10px 0;text-align:center}
.special[hidden]{display:none}.special .wrap{max-width:1120px;margin:0 auto;padding-inline:20px}.special p{margin:0;max-width:none}