/* ============================================================
   Shorebreak Coffee: theme. Sea glass, deep-sea ink and crema,
   under a striped, scalloped awning. Syne for the loud bits,
   Figtree for reading. Soft, sun-bleached, a bit loose: stickers,
   a printed menu card, a cup that fills.
   ============================================================ */
@layer theme {
:root{
  --canvas:#E3EEEA; --surface:#F1F6F3; --ink:#13302D; --muted:#46605B; --line:#C2D5CE; --line-strong:#8EA9A1;
  --primary:#13302D; --primary-hover:#1E4440; --on-primary:#EFF6F3;
  --accent:#D9772A; --accent-hover:#E48A42; --on-accent:#0E2422; --accent-text:#A4511A;
  --focus:#1F6E66; --focus-ring:rgb(31 110 102/.22); --error:#A3261B; --ph-bg:#CFE0D9;
  --header-bg:#E3EEEA; --footer-bg:#13302D; --on-footer:#DCEAE5;
  /* the cup */
  --c-coffee:#4B2E1F; --c-black:#2E1A12; --c-crema:#A86B3C; --c-latte:#C8996B; --c-foam:#F3EBDD; --c-milk:#EFE6D8; --c-cocoa:#6E3F22; --c-ice:#DDEFF0;
  --font-display:'Syne',system-ui,sans-serif; --font-body:'Figtree',system-ui,sans-serif;
  --radius:14px; --radius-sm:10px; --radius-lg:22px; --radius-btn:999px;
  --header-h:4.5rem;
  --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313302D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
body[data-texture="sand"]{background-image:radial-gradient(color-mix(in srgb,var(--line-strong) 40%,transparent) 1px,transparent 1.2px);background-size:22px 22px}
h1,h2,h3{font-weight:800;letter-spacing:-.03em}
h2{font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1}
h3{font-size:1.3rem}
.sec-head{display:grid;gap:.6rem;margin-bottom:clamp(2rem,4vw,3rem)}
.sec-head p{color:var(--muted);font-size:1.1rem}

/* ---------- the awning ---------- */
.awning{height:30px;background:repeating-linear-gradient(90deg,var(--accent) 0 34px,var(--ink) 34px 68px);
  -webkit-mask:linear-gradient(#000 0 0) top/100% 13px no-repeat,radial-gradient(17px at 17px 13px,#000 98%,transparent) 0 0/34px 30px repeat-x;
  mask:linear-gradient(#000 0 0) top/100% 13px no-repeat,radial-gradient(17px at 17px 13px,#000 98%,transparent) 0 0/34px 30px repeat-x}
.site-header{border-bottom:1px solid var(--line)}
.brand{font-weight:800;font-size:1.45rem;letter-spacing:-.03em}
.brand-mark{background:var(--accent);color:var(--on-accent);border-radius:50%}
@media (min-width:900px){ .site-nav a{font-weight:600} }

/* ---------- open sign ---------- */
.open-sign{display:inline-flex;align-items:center;gap:.6rem;padding:.5rem .95rem;border-radius:999px;background:var(--surface);border:1.5px solid var(--line-strong);
  font-weight:700;font-size:.92rem;max-width:100%}
.sign-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--line-strong)}
.open-sign.is-open{border-color:var(--ink);background:var(--ink);color:var(--on-primary)}
.open-sign.is-open .sign-dot{background:var(--accent)}
@media (prefers-reduced-motion:no-preference){ .open-sign.is-open .sign-dot{animation:ping 2.2s ease-out infinite} }
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 70%,transparent)}70%,100%{box-shadow:0 0 0 9px transparent}}

/* ---------- hero ---------- */
.hero{padding-top:clamp(2rem,5vw,4rem)}
.hero-grid{display:grid;gap:2.5rem;align-items:center}
.hero-copy{display:grid;gap:1.4rem;justify-items:start}
.hero h1{font-size:clamp(2.6rem,4.9vw,4.5rem);font-weight:700;line-height:.95;letter-spacing:-.04em}
.hero h1 span{color:var(--accent-text)}
.hero-lede{font-size:1.2rem;color:var(--muted);max-width:30rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.hero-photos{position:relative;display:grid;grid-template-columns:1fr .5fr;gap:1rem;align-items:end}
.hp-main{border-radius:200px 200px var(--radius-lg) var(--radius-lg)}
.hp-side{border-radius:var(--radius-lg);margin-bottom:-2rem}
@media (min-width:900px){ .hero-grid{grid-template-columns:1.2fr .8fr;gap:3.5rem} }
.notes{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:clamp(3rem,6vw,4.5rem)}
.notes li{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .95rem;border-radius:999px;background:var(--surface);border:1.5px solid var(--ink);font-weight:700;font-size:.92rem;
  transform:rotate(var(--r,0deg));transition:transform var(--dur-mid) var(--ease-out)}
.notes li:nth-child(3n+1){--r:-1.5deg}
.notes li:nth-child(3n+2){--r:1.2deg;background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.notes .ico{width:1.05rem;height:1.05rem}
@media (hover:hover){ .notes li:hover{transform:rotate(0) translateY(-2px)} }

/* ---------- order builder ---------- */
.order{padding-top:clamp(2.5rem,5vw,4rem)}
.order-grid{display:grid;gap:2.5rem;padding:clamp(1.5rem,4vw,3.25rem);border-radius:var(--radius-lg);background:var(--ink);color:var(--on-primary)}
.order h2{color:var(--on-primary)}
.order-copy > p{margin-top:.75rem;opacity:.85;font-size:1.1rem;max-width:30rem}
.order-form{display:grid;gap:1.4rem;margin-top:1.75rem}
.order-form fieldset{border:0;padding:0}
.order-form legend{font-family:var(--font-display);font-weight:800;font-size:1.05rem;margin-bottom:.6rem}
.picks{display:flex;flex-wrap:wrap;gap:.45rem}
.pick{position:relative}
.pick input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%}
.pick span{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;padding:.5rem .95rem;border-radius:999px;border:1.5px solid color-mix(in srgb,var(--on-primary) 35%,transparent);
  font-weight:700;font-size:.95rem;transition:background-color var(--dur-fast) linear,color var(--dur-fast) linear,border-color var(--dur-fast) linear,transform var(--dur-fast) var(--ease-out)}
.pick small{font-weight:500;opacity:.8}
@media (hover:hover){ .pick:hover span{border-color:var(--on-primary)} }
.pick input:checked + span{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pick input:active + span{transform:scale(.96)}
.pick input:focus-visible + span{outline:3px solid var(--on-primary);outline-offset:2px}
.order-form fieldset[disabled]{display:none}
.order-out{display:grid;gap:1.25rem;justify-items:center;align-content:center}
.cupviz{width:min(100%,19rem);overflow:visible;transform-origin:50% 100%;transition:transform var(--dur-slow) var(--ease-out)}
.cupviz[data-size="large"]{transform:scale(1.1)}
.lyr{transform:translateY(var(--y,300px));transition:transform .7s var(--ease-out),fill var(--dur-mid) linear}
.lyr-foam{transition-delay:.18s}
.lyr-milk{transition-delay:.1s}
.dust{fill:none;stroke:var(--c-cocoa);stroke-width:6;stroke-linecap:round;stroke-dasharray:1 7;display:none;transform:translateY(var(--y,300px))}
.cupviz[data-dust] .dust{display:inline}
.ice rect{fill:var(--c-ice);opacity:.75;stroke:var(--surface);stroke-opacity:.7;stroke-width:2}
.ice{opacity:0;transition:opacity var(--dur-mid) linear}
.cupviz[data-iced] .ice{opacity:1}
.steam path{fill:none;stroke:var(--on-primary);stroke-width:4;stroke-linecap:round;opacity:.45}
.cupviz[data-iced] .steam{display:none}
@media (prefers-reduced-motion:no-preference){ .steam path{animation:steam 3s ease-in-out infinite} .steam path:nth-child(2){animation-delay:.6s} .steam path:nth-child(3){animation-delay:1.2s} }
@keyframes steam{0%,100%{opacity:.08;transform:translateY(6px)}50%{opacity:.5;transform:translateY(-4px)}}
.cup{display:none}
.cupviz[data-cup="here"] .cup--here,.cupviz[data-cup="away"] .cup--away,.cupviz[data-cup="own"] .cup--own{display:inline}
.cup-body{fill:none;stroke:var(--on-primary);stroke-width:6;stroke-linejoin:round}
.cup-handle,.saucer{fill:none;stroke:var(--on-primary);stroke-width:6;stroke-linecap:round}
.lid{fill:var(--on-primary);stroke:var(--on-primary);stroke-width:3;stroke-linejoin:round}
.lid--own{fill:var(--accent);stroke:var(--accent)}
.sleeve{fill:var(--accent);opacity:.9}
.band{stroke:var(--accent);stroke-width:8}
.cupviz[data-cup="away"] .steam,.cupviz[data-cup="own"] .steam{display:none}
@media (prefers-reduced-motion:reduce){ .lyr,.dust,.cupviz{transition:none} }
.docket{width:min(100%,22rem);padding:1.1rem 1.25rem;background:var(--surface);color:var(--ink);border-radius:6px;
  -webkit-mask:radial-gradient(7px at 50% 0,#0000 98%,#000) 0 0/16px 51% repeat-x,radial-gradient(7px at 50% 100%,#0000 98%,#000) 0 100%/16px 51% repeat-x;
  mask:radial-gradient(7px at 50% 0,#0000 98%,#000) 0 0/16px 51% repeat-x,radial-gradient(7px at 50% 100%,#0000 98%,#000) 0 100%/16px 51% repeat-x}
.docket-label{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.docket-order{margin-top:.35rem;font-family:var(--font-display);font-weight:800;font-size:1.25rem;line-height:1.15}
.docket-price{margin-top:.5rem;font-family:var(--font-display);font-weight:800;font-size:2rem;color:var(--accent-text)}
.docket-note{font-size:.9rem;color:var(--muted)}
.docket-note:empty{display:none}
@media (min-width:900px){ .order-grid{grid-template-columns:1.15fr .85fr;gap:3rem} }

/* ---------- the menu card ---------- */
.menu-head{display:grid;gap:1.5rem;margin-bottom:2rem}
.menu-head p{color:var(--muted);font-size:1.1rem;margin-top:.5rem}
.diet{display:grid;gap:.5rem}
.diet > p{font-weight:800;font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.diet-btns{display:flex;flex-wrap:wrap;gap:.4rem}
.diet-btns button{min-height:44px;padding:.5rem 1rem;border-radius:999px;border:1.5px solid var(--ink);font-weight:700;
  transition:background-color var(--dur-fast) linear,color var(--dur-fast) linear,transform var(--dur-fast) var(--ease-out)}
@media (hover:hover){ .diet-btns button:hover{background:var(--surface)} }
.diet-btns button:active{transform:scale(.96)}
.diet-btns button[aria-pressed="true"]{background:var(--ink);color:var(--on-primary)}
.m-card{display:grid;gap:2.5rem;padding:clamp(1.5rem,4vw,3rem);background:var(--surface);border-radius:var(--radius-lg);border:1.5px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.m-col h2,.m-col h3{display:flex;align-items:center;gap:.6rem;font-size:1.6rem;margin-bottom:1rem;padding-bottom:.6rem;border-bottom:3px solid var(--accent)}
.m-col h2 .ico,.m-col h3 .ico{color:var(--accent-text)}
.m-col ul{display:grid;gap:1rem}
.m-col li{transition:opacity var(--dur-mid) linear}
.m-col li.is-out{opacity:.28}
.m-line{display:flex;align-items:baseline;gap:.5rem;font-weight:700;font-size:1.05rem}
.m-dots{flex:1;border-bottom:2px dotted var(--line-strong);transform:translateY(-.3em)}
.m-price{font-family:var(--font-display);font-weight:800;white-space:nowrap}
.m-meta{display:flex;flex-wrap:wrap;gap:.3rem .6rem;align-items:baseline;margin-top:.2rem;font-size:.92rem;color:var(--muted)}
.m-meta abbr{text-decoration:none;font-size:.7rem;font-weight:800;padding:.1rem .4rem;border-radius:999px;background:var(--canvas);border:1px solid var(--line-strong);color:var(--ink)}
.m-key{margin-top:1.25rem;font-size:.92rem;color:var(--muted)}
@media (min-width:900px){ .menu-head{grid-template-columns:1fr auto;align-items:end} .m-card{grid-template-columns:repeat(3,1fr);gap:3rem} }

/* ---------- counter ---------- */
.counter-grid{display:grid;gap:2.5rem;align-items:center}
.counter-photos{display:grid;grid-template-columns:1.1fr .9fr;gap:1rem;align-items:start}
.cp-1{border-radius:var(--radius-lg) var(--radius-lg) var(--radius-lg) 120px}
.cp-2{margin-top:4rem;border-radius:120px var(--radius-lg) var(--radius-lg) var(--radius-lg)}
.counter-copy{display:grid;gap:1rem}
.counter-copy p{font-size:1.15rem;color:var(--muted);max-width:30rem}
@media (min-width:900px){ .counter-grid{grid-template-columns:1.1fr .9fr;gap:4rem} }

/* ---------- reviews ---------- */
.reviews{background:var(--surface);border-block:1px solid var(--line)}
.rv-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.25rem}
.rv-card{display:grid;gap:1.25rem;align-content:space-between;padding:1.6rem;background:var(--canvas);border-radius:var(--radius-lg)}
.rv-card blockquote p{font-size:1.1rem;font-weight:500}
.rv-card figcaption{display:grid;font-size:.92rem;color:var(--muted)}
.rv-card figcaption strong{font-family:var(--font-display);font-size:1.15rem;color:var(--ink)}

/* ---------- about ---------- */
.about-grid{display:grid;gap:2.5rem;align-items:center}
.about-copy{display:grid;gap:1rem}
.about-copy p{font-size:1.15rem;max-width:34rem}
@media (min-width:900px){ .about-grid{grid-template-columns:.9fr 1.1fr;gap:4rem} .about-photo{order:2} }

/* ---------- the one crema band ---------- */
.quote-band{background:var(--accent);color:var(--on-accent);padding-block:clamp(3.5rem,8vw,6rem)}
.quote-band blockquote p{font-family:var(--font-display);font-weight:800;font-size:clamp(1.9rem,4.6vw,3.6rem);line-height:1.02;letter-spacing:-.03em;max-width:54rem}
.quote-band figcaption{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;font-weight:600}
.quote-band .sample-tag{color:var(--on-accent)}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;gap:2rem}
.faq summary .ico{color:var(--accent-text)}
@media (min-width:900px){ .faq-grid{grid-template-columns:.7fr 1.3fr;gap:4rem} .faq-grid h2{position:sticky;top:calc(var(--header-h) + 2rem);align-self:start} }

/* ---------- catering enquiry ---------- */
.enquiry{background:var(--surface);border-top:1px solid var(--line)}
.enquiry-grid{display:grid;gap:2.5rem}
.enquiry-grid > div > p{margin-top:1rem;color:var(--muted);font-size:1.1rem;max-width:30rem}
.call-line a{font-weight:700;color:var(--ink)}
.form{display:grid;gap:1.25rem;padding:clamp(1.25rem,3vw,2rem);background:var(--canvas);border-radius:var(--radius-lg);border:1.5px solid var(--ink)}
.form-row{display:grid;gap:1.25rem}
.hint{margin-top:-.75rem;font-size:.9rem;color:var(--muted)}
@media (min-width:600px){ .form-row{grid-template-columns:1fr 1fr} }
@media (min-width:900px){ .enquiry-grid{grid-template-columns:.85fr 1.15fr;gap:4rem;align-items:start} }

/* ---------- find us ---------- */
.visit-grid{display:grid;gap:2.5rem}
.visit-copy{display:grid;gap:1.4rem;align-content:start;justify-items:start}
.hours{width:100%;max-width:28rem}
.hours th,.hours td{padding:.85rem 0;border-bottom:1.5px dashed var(--line-strong);text-align:left;font-size:1.05rem}
.hours td{text-align:right;font-family:var(--font-display);font-weight:800}
.where{display:flex;gap:.6rem;align-items:flex-start;font-size:1.05rem}
.where .ico{color:var(--accent-text);margin-top:.15rem}
.contact-list{display:grid;gap:.7rem}
.contact-list li{display:flex;gap:.6rem;align-items:center}
.contact-list a{font-weight:700}
.contact-list .ico{color:var(--accent-text)}
.visit-side{display:grid;gap:1rem}
.map-block{border:1.5px solid var(--ink);background:var(--surface)}
.map-title{display:grid;gap:.25rem;max-width:26rem}
.map-title strong{font-family:var(--font-display);font-size:1.4rem}
.map-actions{display:flex;flex-wrap:wrap;gap:.6rem}
@media (min-width:900px){ .visit-grid{grid-template-columns:.8fr 1.2fr;gap:4rem} .visit-side{grid-template-columns:.75fr 1.25fr;align-items:stretch} .visit-side .map-block{min-height:100%} }

/* ---------- call to action ---------- */
.cta-band{background:var(--ink);color:var(--on-primary);padding-block:clamp(3.5rem,8vw,6rem)}
.cta-band h2{color:var(--on-primary)}
.cta-inner{display:grid;gap:1rem;justify-items:start}
.cta-inner p{font-size:1.15rem;opacity:.85}
.cta-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.75rem}
.cta-band .btn--ghost{color:var(--on-primary)}
@media (hover:hover){ .cta-band .btn--ghost:hover{background:var(--on-primary);color:var(--ink);border-color:var(--on-primary)} }

/* ---------- footer ---------- */
.foot-grid{display:grid;gap:2rem}
.foot-mark{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:800;font-size:1.4rem;margin-bottom:.5rem}
.foot-mark .ico{color:var(--accent)}
.site-footer h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;opacity:.7;margin-bottom:.8rem;color:var(--on-footer)}
.site-footer ul{display:grid;gap:.6rem}
@media (min-width:800px){ .foot-grid{grid-template-columns:1.4fr 1fr 1fr} }
}