/* KUKU Cafe — kukucafe.com static rebuild
   Palette, type scale and layout values are transcribed from the live
   Squarespace theme so the pages render the same. */

:root{
  --jade:#17482d;      /* "black"  in the theme palette */
  --mustard:#e9ab0f;   /* "lightAccent" */
  --guava:#cd5647;     /* "bright-inverse" background */
  --cream:#f7f6f3;     /* "white" */
  --blush:#ddd3d2;     /* "accent" */
  --ink:#000;
  --paper:#fff;

  --font-body:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;   /* brand body face (Ygro Sans Beta stand-in) */
  --font-display:"Dela Gothic One",var(--font-body);                        /* brand display face */
  --font:var(--font-body);
  --hs:.74;   /* Dela Gothic One is ~32% wider than the original heading font; at .74 every heading breaks on the same words as before */
  --bs:.97;   /* Poppins has a taller x-height than the original body font; .97 matches its size and line breaks */
  --lr:1.044; /* Dela cap height / original cap height: headings keep the same line spacing relative to letter size */
  --gutter:2vw;        /* site gutter (desktop) */
  --gutter-m:6vw;      /* site gutter (mobile) */
  --maxw:1500px;       /* max page width */
  --hdr-h:72.8px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{font-size:12px;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-weight:400;letter-spacing:-.01em;line-height:1.3em;color:var(--jade);background:var(--cream);overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;letter-spacing:-.015em;margin:2rem 0;text-transform:none}
h1 strong,h2 strong,h3 strong,h4 strong{font-weight:400}
p{margin:1rem 0}
strong{font-weight:700}

/* ---------- responsive type scale (Squarespace 7.1 formula, 1rem = 12px) ---------- */
h1{--v:5.1}h2{--v:4.2}h3{--v:2.9}h4{--v:6.3}
p,.nav a,.menu-nav a{--v:1.2}
p.large{--v:1.5}p.small{--v:1}
.meta{--v:.8}
h1,h2,h3,h4,p,.meta,.nav a,.btn,.mq text,.form,.news,.sysbtn{--fs:min(calc((var(--v) - 1) * 1.2vw + 1rem),max(calc((var(--v) - 1) * 18px + 1rem),calc(var(--v) * 1rem)))}
@media screen and (max-width:767px) and (orientation:portrait){
  h1,h2,h3,h4,p,.meta,.nav a,.btn,.mq text,.form,.news,.sysbtn{--fs:calc((var(--v) - 1) * .012 * min(100vh,900px) + 1rem)}
}
p,.meta,.nav a,.btn{font-size:calc(var(--fs) * var(--bs,1))}
h1,h2,h3,h4,.mq text{font-size:calc(var(--fs) * var(--hs))}
h1,h2,h3,h4{line-height:calc(1.4em * (1 + (1 - var(--v)) / 25) * var(--lr))}
p{line-height:calc(1.3em / var(--bs,1))}
.meta{font-weight:500;text-transform:uppercase;letter-spacing:0;line-height:1em}
p.meta{line-height:clamp(18px,1.4vw,20px)}
.c-mustard{color:var(--mustard)}
.c-jade{color:var(--jade)}
.c-guava{color:var(--guava)}

/* ---------- section themes ---------- */
.t-white,.t-default{--bg:var(--cream);--hd:var(--jade);--tx:var(--jade);--btn-bg:var(--mustard);--btn-tx:var(--paper);--sys-bg:var(--ink);--sys-tx:var(--paper)}
.t-white-bold{--bg:var(--cream);--hd:var(--ink);--tx:var(--jade);--btn-bg:var(--ink);--btn-tx:var(--paper);--sys-bg:var(--ink);--sys-tx:var(--paper)}
.t-light{--bg:var(--mustard);--hd:var(--jade);--tx:var(--jade);--btn-bg:var(--ink);--btn-tx:var(--paper);--sys-bg:var(--ink);--sys-tx:var(--paper)}
.t-light-bold{--bg:var(--mustard);--hd:var(--ink);--tx:var(--jade);--btn-bg:var(--ink);--btn-tx:var(--paper);--sys-bg:var(--ink);--sys-tx:var(--paper)}
.t-bright{--bg:var(--jade);--hd:var(--mustard);--tx:var(--ink);--btn-bg:var(--ink);--btn-tx:var(--blush);--sys-bg:var(--ink);--sys-tx:var(--blush)}
.t-bright-inverse{--bg:var(--guava);--hd:var(--mustard);--tx:var(--cream);--btn-bg:var(--blush);--btn-tx:var(--ink);--sys-bg:var(--blush);--sys-tx:var(--ink)}
.t-dark,.t-dark-bold,.t-black,.t-black-bold{--bg:var(--jade);--hd:var(--cream);--tx:var(--cream);--btn-bg:var(--blush);--btn-tx:var(--ink);--sys-bg:var(--blush);--sys-tx:var(--ink)}
.t-dark-bold,.t-black-bold{--hd:var(--blush)}
[class*="t-"]{background:var(--bg);color:var(--tx)}
[class*="t-"] h1,[class*="t-"] h2,[class*="t-"] h3,[class*="t-"] h4{color:var(--hd)}
[class*="t-"] p{color:var(--tx)}
[class*="t-"] p a{text-decoration:underline;color:inherit}

/* ---------- header ---------- */
.hdr{position:absolute;top:0;left:0;right:0;z-index:50;padding:1vw var(--gutter)}
.hdr.t-white{background:transparent}
:root{--hdr-h:calc(2vw + 44px)}
main>.sec:first-child{padding-top:var(--hdr-h)}
.hdr-in{display:flex;align-items:center;max-width:var(--maxw);margin:0 auto;min-height:44px}
.nav a{line-height:1.3em}
.logo img{height:44px;width:auto;max-width:100%}
.nav{display:flex;flex-wrap:wrap;align-items:center;margin-left:auto}
.nav a{margin:0 1.5vw;padding-bottom:.1em;white-space:nowrap;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size .2s}
.nav a:hover,.nav a[aria-current="page"]{background-size:100% 1px}
.cta,.menu-cta{display:inline-block;font-family:var(--font);font-size:1rem;font-weight:700;letter-spacing:.03em;line-height:1.15;text-transform:uppercase;padding:1.2rem;border-radius:300px;background:var(--btn-bg);color:var(--btn-tx);white-space:nowrap;transition:opacity .15s}
.cta:hover{opacity:.85}
.burger{display:none;margin-left:auto;background:none;border:0;padding:4px 0;cursor:pointer;width:34px;height:37px;flex-direction:column;justify-content:center;gap:6px}
.burger span{display:block;height:3px;background:var(--jade);border-radius:1px;transition:transform .25s,opacity .25s,width .25s}
.burger span:nth-child(2){display:none}
.burger span:nth-child(3){width:70%;margin-left:auto}
.menu{display:none}
@media screen and (max-width:767px){
  .hdr{padding:var(--gutter-m)}
  .logo img{height:37px}
  .hdr-in{min-height:37px}
  :root{--hdr-h:calc(12vw + 37px)}
  .nav,.cta{display:none}
  .burger{display:flex}
  .menu{display:flex;flex-direction:column;position:fixed;inset:0;z-index:40;background:var(--mustard);color:var(--jade);padding-top:calc(37px + 12vw);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
  .menu.open{opacity:1;visibility:visible}
  body.menu-open .burger span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
  body.menu-open .burger span:nth-child(3){width:100%;transform:translateY(-4.5px) rotate(-45deg)}
  body.menu-open{overflow:hidden}
  .menu-nav{display:flex;flex-direction:column;justify-content:center;flex:1;padding:0 var(--gutter)}
  .menu-nav a{display:inline-flex;align-self:flex-start;margin:3.2vw 5vw;font-size:8.5vmin;line-height:1;color:var(--jade)}
  .menu-nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:.15em}
  .menu-cta{align-self:flex-start;margin:4vw 6vw 6vw;min-width:210px;text-align:center;background:var(--ink);color:var(--paper)}
  .hdr .burger{position:relative;z-index:45}
}

/* ---------- sections ---------- */
.sec{position:relative;display:flex;align-items:center;--pad-t:3.3vmax;--pad-b:3.3vmax;background:transparent}
.sec.has-div{z-index:3}
.sec.after-div{margin-top:calc(-1 * var(--pdh));z-index:1}
.sec.after-div .sec-inner{padding-top:calc(var(--pad-t) + var(--pdh))}
.sec.h-small{min-height:33vh}
.sec.h-medium{min-height:66vh;--pad-t:6.6vmax;--pad-b:6.6vmax}
.sec.h-large{min-height:100vh;--pad-t:10vmax;--pad-b:10vmax}
.sec.h-custom{min-height:var(--minh,0);--pad-t:0px;--pad-b:0px}
.sec.va-top{align-items:flex-start;--pad-t:var(--gutter);--pad-b:6.6vmax}
.sec.va-top.h-medium{--pad-b:13.2vmax}
.sec.va-bottom{align-items:flex-end;--pad-t:6.6vmax;--pad-b:var(--gutter)}
.sec.va-bottom.h-medium{--pad-t:13.2vmax}
.sec.va-top.h-custom,.sec.va-bottom.h-custom{--pad-t:0px;--pad-b:0px}
.sec-inner{position:relative;width:100%;padding-top:var(--pad-t);padding-bottom:var(--pad-b);z-index:1}
.sec.inset{padding:var(--gutter)}
main>.sec.inset:first-child{padding-top:var(--hdr-h)}
main>.sec.inset:first-child .sec-bg{top:0}
.sec.inset .sec-bg{inset:var(--gutter)}
.sec-bg{position:absolute;inset:0;overflow:hidden;z-index:0;background:var(--bg)}
.sec-bg img{width:100%;height:100%;object-fit:cover}
.sec-ov{position:absolute;inset:0;background:var(--bg)}
.sec.has-div{padding-bottom:var(--dh)}

/* section divider (the shaped bottom edge) */
.sdiv{position:absolute;left:0;right:0;bottom:0;width:100%;height:var(--dh);display:block;z-index:2;overflow:visible}
.sdiv .stroke{fill:none;stroke:var(--mustard);stroke-width:6px;vector-effect:non-scaling-stroke;stroke-linecap:square}

/* ---------- fluid grid (mobile: 8 columns, desktop: 24 columns) ---------- */
.fe{--gap:11px;--rgap:11px;--gw:calc(var(--gutter-m) - var(--gap));--cell:calc((var(--maxw) - var(--gap) * 7) / 8);
  display:grid;position:relative;
  grid-template-columns:minmax(var(--gw),1fr) repeat(8,minmax(0,var(--cell))) minmax(var(--gw),1fr);
  grid-template-rows:repeat(var(--mrows),minmax(24px,auto));
  column-gap:var(--gap);row-gap:var(--rgap);overflow-x:clip}
.b{grid-area:var(--m);z-index:var(--mz,0);display:flex;flex-direction:column;justify-content:var(--mj,flex-start);min-width:0;min-height:0}
@media screen and (min-width:768px){
  .fe{--gw:calc(var(--gutter) - var(--gap));--cell:calc((var(--maxw) - var(--gap) * 23) / 24);
      --cw:min(var(--maxw),calc(100vw - var(--gutter) * 2 - var(--inset,0px)));
      grid-template-columns:minmax(var(--gw),1fr) repeat(24,minmax(0,var(--cell))) minmax(var(--gw),1fr);
      grid-template-rows:repeat(var(--drows),minmax(calc(var(--cw) * .0215),auto))}
  .sec.inset .fe{--inset:calc(var(--gutter) * 2)}
  .b{grid-area:var(--d);z-index:var(--dz,0);justify-content:var(--dj,flex-start)}
  .b.sticky{position:sticky;top:0}
}

/* text blocks */
.txt{white-space:pre-wrap;overflow-wrap:break-word}
.txt>:first-child{margin-top:0}
.txt>:last-child{margin-bottom:0}
.txt p:empty{min-height:1.3em}
.fit{white-space:nowrap}
.fit>*{margin:0;line-height:calc(1em * var(--lr));display:inline-block;white-space:nowrap}
/* text highlight: curved underline */
.hl{position:relative;display:inline}
.hl svg{position:absolute;left:-.04em;bottom:-.16em;width:104%;height:.3em;overflow:visible;pointer-events:none}
.hl svg path{fill:none;stroke:var(--mustard);stroke-width:.08em;stroke-linecap:square;stroke-dasharray:1;stroke-dashoffset:1;animation:draw .5s ease-out .2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* image blocks — the image is taken out of flow (like the original) so it never
   stretches the grid rows; max-width/height give a "contain" fit inside the block */
.imgw{flex:1;min-height:0;position:relative;--ax:auto;--bx:auto}
.imgw img{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;width:auto;height:auto}
.imgw.cover img{width:100%;height:100%;object-fit:cover}
.imgw.left img{margin-left:0}.imgw.right img{margin-right:0}
.imgw img{margin-top:var(--mt,auto);margin-bottom:var(--mb,auto)}
.imgw[style*="--mia:flex-start"] img{--mt:0}.imgw[style*="--mia:flex-end"] img{--mb:0}
@media screen and (min-width:768px){
  .imgw img{--mt:auto;--mb:auto}
  .imgw[style*="--dia:flex-start"] img{--mt:0}.imgw[style*="--dia:flex-end"] img{--mb:0}
}
.imgw a{position:absolute;inset:0}

/* buttons */
.btn{display:inline-block;font-family:var(--font);text-align:center;line-height:1.2em;letter-spacing:0;transition:opacity .15s}
.btn:hover{opacity:.85}
.btn-primary{--v:1.3;font-weight:500;text-transform:uppercase;padding:1.2rem;border-radius:7.2px;background:var(--btn-bg);color:var(--btn-tx)}
.btn-secondary{--v:1.25;font-weight:800;padding:0;border-radius:300px;background:var(--mustard);color:var(--paper)}
.b>.btn.stretch{flex:1;display:flex;align-items:center;justify-content:center;width:100%}

/* marquee (wavy scrolling text) */
.mq{width:100%;overflow:hidden;color:var(--hd)}
.mq svg{display:block;width:100%;overflow:visible}
.mq text{font-family:var(--font-display);font-weight:400;letter-spacing:-.015em;fill:currentColor}

/* social icons */
.social{display:flex;gap:14px;align-items:center}
.social a{width:24px;height:24px;display:block;opacity:1;transition:opacity .15s}
.social a:hover{opacity:.7}
.social img{width:24px;height:24px}

/* ---------- forms (Squarespace form block look) ---------- */
.form{width:100%;color:var(--tx);--v:1.2;font-size:calc(var(--fs) * var(--bs,1))}
.form .field{margin:0 0 20px;position:relative}
.form fieldset{border:0;padding:0;margin:0 0 20px;min-width:0}
.form legend{padding:0;float:left;width:100%}
.form legend+*{clear:both}
.form .title{display:block;padding-bottom:4px;line-height:1.3em}
.form .req{font-size:1rem;opacity:.7;margin-left:.4em}
.form .caption{display:block;font-size:1rem;line-height:1.8;color:inherit}
.form .pair{display:flex;gap:10px}
.form .pair>div{flex:1}
.form input[type=text],.form input[type=email],.form input[type=tel],.form input[type=number],.form input[type=date],.form textarea{
  width:100%;font:inherit;font-family:var(--font);color:var(--ink);background:#fafafa;border:1px solid var(--ink);border-radius:0;padding:10px;line-height:1.3em;height:42px;-webkit-appearance:none;appearance:none}
.form input[type=date]{width:200px;height:44px}
.form textarea{height:100px;resize:vertical;display:block}
.form input:focus,.form textarea:focus{outline:2px solid var(--mustard);outline-offset:1px}
.form .check{display:flex;align-items:center;gap:4px;font-size:1rem;margin-top:6px}
.form .check input{width:16px;height:16px;margin:0;accent-color:var(--ink)}
.form .actions{padding-top:0}
.sysbtn{--v:1.3;font-family:var(--font-body);font-weight:500;text-transform:uppercase;letter-spacing:0;line-height:1.23em;padding:1.2rem;border:0;border-radius:300px;cursor:pointer;background:var(--sys-bg);color:var(--sys-tx);font-size:calc(var(--fs) * var(--bs,1));transition:opacity .15s}
.sysbtn:hover{opacity:.85}
.form .note{font-size:1rem;margin-top:12px;opacity:.85}
.form .thanks{display:none}
.form.sent .fields,.form.sent .actions{display:none}
.form.sent .thanks{display:block}

/* newsletter */
.news{width:100%;color:var(--tx);--v:1.2;font-size:calc(var(--fs) * var(--bs,1))}
.news h2{--v:2.9;margin:0 0 12px;color:var(--jade);line-height:calc(1.2em * var(--lr))}
.news p{margin:0 0 12px}
.news .row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:30px}
.news input{flex:none;width:calc(13.6em + 48px);max-width:100%;min-width:0;font:inherit;font-family:var(--font);color:var(--ink);background:var(--paper);border:1px solid rgba(0,0,0,.12);border-radius:0;padding:1.4rem 2rem;line-height:1.2em;height:53.6px}
.news input:focus{outline:2px solid var(--mustard);outline-offset:1px}
.news .sysbtn{padding:1.4rem 2rem;line-height:1.2rem;background:var(--ink);color:var(--paper)}
.news .thanks{display:none}
.news.sent .row{display:none}
@media screen and (max-width:767px){.news .row{flex-direction:column;align-items:flex-start;row-gap:23px;margin-top:31px}}
.news.sent .thanks{display:block}

/* map */
.map{width:100%;flex:1;min-height:300px;position:relative}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.05)}

/* ---------- gallery (justified "strips" layout) ---------- */
.gal-sec{display:block;min-height:0}
.gal-sec .sec-inner{padding-top:0;padding-bottom:var(--pad-b,calc(1vmax / 5))}
.gal{width:100%}
.strips{display:flex;flex-wrap:wrap;gap:29px;width:100%}
.strips figure{margin:0;flex:0 0 auto;overflow:hidden;cursor:zoom-in;opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1)}
.strips figure.in{opacity:1;transform:none}
.strips img{width:100%;height:100%;object-fit:cover}
@media screen and (max-width:767px){.strips{gap:12px}}
.lightbox{position:fixed;inset:0;z-index:100;background:var(--cream);display:none;flex-direction:column;align-items:center;justify-content:center;padding:6vw}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:calc(100vh - 12vw - 4rem);width:auto;height:auto;object-fit:contain}
.lightbox figcaption{margin-top:1.2rem;color:var(--jade)}
.lightbox .close{position:absolute;top:2vw;right:2vw;width:44px;height:44px;border:0;background:none;color:var(--jade);font-size:32px;line-height:1;cursor:pointer}
.lightbox .prev,.lightbox .next{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;background:none;color:var(--jade);font-size:36px;cursor:pointer}
.lightbox .prev{left:1vw}.lightbox .next{right:1vw}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- motion ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1)}
.reveal.in{opacity:1;transform:none}
:focus-visible{outline:3px solid var(--mustard);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .reveal,.strips figure{opacity:1;transform:none;transition:none}
  .hl svg path{animation:none;stroke-dashoffset:0}
}

/* ---------- "Two ways to eat KUKU" — cafe card + catering card (home) ---------- */
.eyebrow{display:inline-block;background:var(--mustard);color:var(--jade);font:700 12px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;padding:8px 14px;border-radius:999px;white-space:nowrap}
.ways{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.ways .ways-h{--v:5.1;line-height:1.05;letter-spacing:-.01em;color:var(--mustard);text-align:center;margin:0 0 clamp(26px,3vw,40px)}
.ways-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}
.cc{position:relative;border-radius:30px;padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column}
.cc-cafe{background:var(--cream);color:var(--jade)}
.cc-catering{background:var(--mustard);color:var(--jade)}
.cc-photo{position:relative;border-radius:22px;overflow:hidden;box-shadow:12px 12px 0 0 var(--mustard);margin:0 12px 36px 0;background:var(--cream)}
.cc-photo>img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
.cc-copy{display:flex;flex-direction:column;align-items:flex-start;flex:1}
.cc-copy>*{width:100%}
.cc-copy>.eyebrow{width:auto}
.cc-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.cc h2{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(30px,2.6vw,38px);line-height:1.08;letter-spacing:0;margin:18px 0 16px}
.cc-cafe h2{color:var(--jade)}
.cc-catering h2{color:var(--jade)}
.cc p{font-family:var(--font-body);font-size:17px;line-height:1.55;margin:0 0 26px;max-width:46ch}
.cc-cafe p{color:var(--jade)}
.cc-catering p{color:var(--jade)}
.cc-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:auto}
.cc-btn{display:inline-flex;align-items:center;justify-content:center;font:700 16px/1 var(--font-body);padding:16px 26px;border-radius:999px;background:var(--mustard);color:var(--jade);white-space:nowrap;transition:background .14s,transform .2s,box-shadow .2s}
.cc-btn:hover{background:#f2bb2a;transform:translateY(-2px);box-shadow:0 10px 20px -10px rgba(199,144,10,.65)}
.cc-link{font:700 15px/1.2 var(--font-body);text-decoration:underline;text-underline-offset:4px;padding:0 2px;color:inherit}
.cc-cafe .cc-link{color:var(--jade)}
.cc-catering .cc-link{color:var(--jade)}
.cc-link:hover{color:var(--mustard)}
@media screen and (max-width:900px){
  .ways{padding:0 var(--gutter-m)}
  .ways-grid{grid-template-columns:1fr;gap:22px}
  .cc{border-radius:22px;padding:22px 20px 28px}
  .cc-photo{margin-bottom:30px}
  .cc h2{font-size:clamp(30px,8.5vw,40px)}
  .cc p{font-size:16px;margin-bottom:22px}
  .eyebrow{letter-spacing:.08em;font-size:11px}
}

/* catering card on mustard: jade label, jade stamp, jade button */
.cc-catering .eyebrow{background:var(--jade);color:var(--mustard)}
.cc-catering .cc-photo{box-shadow:12px 12px 0 0 var(--jade)}
.cc-catering .cc-btn{background:var(--jade);color:var(--cream)}
.cc-catering .cc-btn:hover{background:#2a6a45;box-shadow:0 10px 20px -10px rgba(15,42,27,.6)}
.cc-catering .cc-link:hover{color:var(--jade);opacity:.7}