/* gotchamatcha.sg — shared styles (v2, Oct 2026). Brand rules: gotcha-hq/systems/WEBSITE.md + the Brand Book.
   Gotcha lettering = letters and . , ! ? ' " : ; only (no digits, no hyphen, no arrow) → numbers always in Alata. */
@font-face{font-family:"Gotcha";src:url(fonts/gotcha.woff) format("woff");font-display:swap}
@font-face{font-family:"Alata";src:url(fonts/alata.woff2) format("woff2");font-display:swap}

:root{
  /* Kai, 18 Oct 2026: dark green + white. cream/beige/oak/clay/glow are small accents only */
  --forest:#24382C; --forest-2:#2E4738; --cream:#FFFFFF; --beige:#D8C2A8; --oak:#A47551; --walnut:#5C3D2A; --clay:#BE6E4A; --glow:#F2B15C;
  --paper:#FFFFFF; --ink:var(--forest); --ink-2:#4A5A4F; --line:rgba(36,56,44,.14); --soft:#F3F6F2;
  --hand:"Gotcha","Bradley Hand","Segoe Print",cursive; --body:"Alata",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1120px; --gut:20px; --head-h:64px; --ease:cubic-bezier(.22,.7,.2,1);
  --shadow:0 1px 2px rgba(36,56,44,.1),0 16px 30px -12px rgba(36,56,44,.34);
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 12px)}
body{background:var(--cream);color:var(--ink);font-family:var(--body);font-size:1rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-x:hidden;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.alt{font-family:var(--body)}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--forest);color:var(--cream);padding:.6rem 1rem;border-radius:999px;text-decoration:none}
.skip:focus{top:10px}

/* ---------- type ---------- */
.hand{font-family:var(--hand);font-weight:400;letter-spacing:.01em;line-height:.92}
/* page titles use Alata now; the Gotcha lettering is for little scribbles (.scribble, captions) */
.hand.h1,.hand.h2,.hand.h3,h1.hand,h2.hand,h3.hand{font-family:var(--body);font-weight:400;letter-spacing:-.025em;line-height:1.02}
.scribble{font-family:var(--hand);font-weight:400;line-height:1;letter-spacing:.01em}
.h1{font-size:clamp(3rem,13vw,6.5rem)}
.h2{font-size:clamp(2.1rem,8vw,3.6rem)}
.h3{font-size:clamp(1.5rem,5vw,2rem)}
.kicker{font-family:var(--body);font-size:.8rem;letter-spacing:.14em;text-transform:lowercase;color:var(--walnut)}
.lead{font-size:clamp(1.08rem,3.6vw,1.3rem);line-height:1.55;max-width:34ch}
.prose p{max-width:44ch}
.prose p+p{margin-top:1em}
.muted{color:var(--ink-2)}
/* warm-glow marker behind a word */
.mark{background:linear-gradient(transparent 58%,rgba(242,177,92,.55) 58%,rgba(242,177,92,.55) 90%,transparent 90%);padding:0 .08em}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;height:var(--head-h);border-bottom:1px solid transparent;transition:border-color .3s}
/* the blur lives on ::before: a backdrop-filter on .site-head itself would trap the fixed phone menu inside the 64px bar */
.site-head::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:saturate(1.2) blur(12px);backdrop-filter:saturate(1.2) blur(12px)}
.site-head.scrolled{border-bottom-color:var(--line)}
.site-head .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none}
.logo img{height:42px;width:auto}
/* header spans the full screen: logo in the top-left corner, menu in the top-right, side gap = top gap (Kai, 21 Oct) */
.site-head{--logo-h:40px}
.site-head .wrap{max-width:none;padding:0 calc((var(--head-h) - var(--logo-h)) / 2)}
.site-head .logo img{height:var(--logo-h)}
.site-head .logo{min-height:44px} /* 44 px tap target; the bar centres it, so the logo looks the same */
@media (min-width:821px){:root{--head-h:88px}}
@media (max-width:820px){.site-head{--logo-h:32px}.site-head .burger{margin-right:-11px}}
/* header over a photo (home): no white bar until you scroll */
.site-head::before{transition:opacity .3s}
.photo-top .site-head:not(.scrolled)::before{opacity:0}
.photo-top.nav-open .site-head::before{opacity:1}
.nav{display:flex;gap:1.6rem;list-style:none}
.nav a{position:relative;text-decoration:none;font-size:.98rem;padding:.4rem 0}
.nav a::after{content:"";position:absolute;left:-2px;right:-2px;bottom:-2px;height:8px;opacity:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5 C 20 1, 35 8, 55 4 S 85 2, 99 5' fill='none' stroke='%23BE6E4A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;transition:opacity .25s}
.nav a:hover::after,.nav a[aria-current=page]::after{opacity:1}
.burger{display:none;width:46px;height:46px;border:0;background:none;cursor:pointer;margin-right:-8px;border-radius:50%}
.burger i{display:block;width:24px;height:2px;margin:5px auto;background:var(--forest);border-radius:2px;transition:transform .35s var(--ease),opacity .2s}
.burger[aria-expanded=true] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] i:nth-child(2){opacity:0}
.burger[aria-expanded=true] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:820px){
  .site-head nav{display:contents} /* the wrapper must not take a flex slot (the burger stays at the right edge) */
  .burger{display:block}
  .nav{position:fixed;inset:var(--head-h) 0 0 0;flex-direction:column;justify-content:center;align-items:center;gap:.4rem;
    background:var(--cream);visibility:hidden;opacity:0;transition:opacity .3s,visibility 0s .3s}
  .nav.open{visibility:visible;opacity:1;transition:opacity .3s}
  .nav a{font-family:var(--hand);font-size:3rem;line-height:1.15;display:block;padding:.2rem 1rem}
  .nav a::after{bottom:4px;height:12px}
  body.nav-open{overflow:hidden}
  .no-js .site-head{height:auto;position:static}
  .no-js .site-head .wrap{flex-wrap:wrap;padding-top:.6rem;padding-bottom:.6rem}
  .no-js .burger{display:none}
  .no-js .nav{position:static;visibility:visible;opacity:1;flex-direction:row;flex-wrap:wrap;gap:.2rem 1rem;background:none}
  .no-js .nav a{font-family:var(--body);font-size:1rem;padding:.3rem 0}
}

/* ---------- calm building blocks (big-brand restraint) ---------- */
.eyebrow{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.title{font-size:clamp(1.9rem,6.4vw,3.1rem);font-weight:400;line-height:1.04;letter-spacing:-.025em}
.sub{font-size:1.06rem;line-height:1.6;color:var(--ink-2);max-width:42ch}
/* ---------- Gotcha balance: short hand-lettered titles, clean Alata everywhere else, one big doodle per section ---------- */
.ht{font-family:var(--hand);font-weight:400;font-size:clamp(2.5rem,9.5vw,3.8rem);line-height:.95;letter-spacing:.01em}
.ht.sm{font-size:clamp(1.9rem,7vw,2.6rem)}
.hlink{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;font-family:var(--hand);font-size:1.55rem;line-height:1;text-decoration:none;color:inherit;padding:.35rem 0;
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat}
.hlink::after{content:"";width:16px;height:24px;flex:none;background:currentColor;transform-origin:50% 90%;transition:transform .35s var(--ease);
  -webkit-mask:url(../logo-hand.svg) center/contain no-repeat;mask:url(../logo-hand.svg) center/contain no-repeat}
@media (hover:hover){.hlink:hover::after{transform:rotate(-14deg) scale(1.1)}}
.big-doodle{display:block;height:auto;pointer-events:none}

/* ---------- sections + decoration ---------- */
.sec{position:relative;padding:clamp(4rem,11vw,7.5rem) 0}
.sec-tight{padding:clamp(3rem,8vw,5rem) 0}
.blob{display:none;position:absolute;z-index:-1;pointer-events:none;background:var(--beige);opacity:.55;
  border-radius:58% 42% 55% 45% / 48% 60% 40% 52%}
.blob.oak{background:var(--oak);opacity:.14}
.blob.glow{background:var(--glow);opacity:.22}
/* clip (not hidden) so the soft background shapes never cause sideways scroll and sticky bars still work */
main{position:relative;isolation:isolate;overflow-x:clip}
.doodle-line{width:100%;height:18px;color:var(--oak);opacity:.7}

/* ---------- "explore more →" hand-drawn link ---------- */
.more{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;font-family:var(--body);font-size:1.05rem;line-height:1.2;padding:.5rem 0;
  border-bottom:2px solid currentColor;color:var(--forest)}
.more::after{content:"";width:17px;height:25px;flex:none;background:currentColor;transform-origin:50% 90%;transition:transform .35s var(--ease);
  -webkit-mask:url(../logo-hand.svg) center/contain no-repeat;mask:url(../logo-hand.svg) center/contain no-repeat}
@media (hover:hover){.more:hover::after{transform:rotate(-14deg) scale(1.1)}}

/* ---------- buttons (soft, not boxy) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:50px;padding:.75rem 1.6rem;border:0;cursor:pointer;
  background:var(--forest);color:#fff;text-decoration:none;font-family:var(--body);font-size:1rem;border-radius:999px;transition:background .2s,color .2s}
.btn:hover{background:#2E4738}
.btn:active{transform:scale(.98)}
.btn.light{background:#fff;color:var(--forest)}
.btn.light:hover{background:#EEF3EE}
.btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn.ghost:hover{background:rgba(36,56,44,.06)}
.btn.ghost:hover{background:rgba(255,255,255,.1)}
.btn[aria-disabled=true]{background:var(--beige);color:var(--walnut);box-shadow:none;cursor:default}

/* ---------- photo placeholder (cream + cat doodle; never stock) ---------- */
.ph{position:relative;display:grid;place-items:center;width:100%;height:100%;background:var(--soft);color:var(--forest)}
.ph img{width:62%;max-height:66%;object-fit:contain;opacity:.9;margin-bottom:6%}
.ph small{position:absolute;left:0;right:0;bottom:4%;text-align:center;font-size:.72rem;letter-spacing:.08em;color:var(--walnut);opacity:.8}

/* ---------- polaroid (Home, Menu, Community, Story) ---------- */
.pola{--r:0deg;position:relative;display:block;width:100%;background:var(--paper);padding:.55rem .55rem 0;border:0;border-radius:3px;
  box-shadow:var(--shadow);transform:rotate(var(--r));transition:transform .45s var(--ease),box-shadow .45s;text-align:center;text-decoration:none;color:var(--ink)}
.pola-img{position:relative;display:block;aspect-ratio:1/1;background:var(--soft);overflow:hidden}
.pola-img>img{width:100%;height:100%;object-fit:cover}
.pola.cut .pola-img{overflow:visible}
.pola.cut .pola-img>img{object-fit:contain;transform:translateY(-9%) scale(1.12);filter:drop-shadow(0 10px 12px rgba(36,56,44,.22))}
.pola .cap{display:flex;align-items:center;justify-content:flex-start;text-align:left;font-family:var(--hand);font-size:1.12rem;line-height:1.1;padding:.55rem .2rem .8rem;min-height:2.6rem}
.pola.tall .pola-img{aspect-ratio:4/5}
@media (hover:hover){.pola:hover{transform:rotate(0deg) translateY(-6px) scale(1.02);box-shadow:0 2px 3px rgba(36,56,44,.08),0 24px 36px -14px rgba(36,56,44,.38)}}
/* tape */
.pola.tape::before,.tape-on::before{content:"";position:absolute;top:-12px;left:50%;width:80px;height:25px;transform:translateX(-50%) rotate(var(--tr,-3deg));z-index:3;
  background:repeating-linear-gradient(90deg,rgba(120,96,60,.06) 0 1px,rgba(255,255,255,0) 1px 4px),linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,0) 55%,rgba(120,96,60,.1)),rgba(222,204,170,.8);
  clip-path:polygon(3% 0,97% 0,100% 14%,97.5% 28%,100% 42%,97% 57%,100% 71%,97.5% 86%,99% 100%,2% 100%,0 86%,2.5% 72%,0 58%,3% 43%,0 29%,2.5% 15%)}
/* flip: hover on desktop, tap on phone, focus/enter with keyboard */
button.pola{cursor:pointer;font:inherit}
.pola-note{position:absolute;left:.55rem;right:.55rem;top:.55rem;aspect-ratio:1/1;display:grid;place-items:center;padding:1.1rem;z-index:3;
  background:rgba(36,56,44,.93);color:var(--cream);font-size:.95rem;line-height:1.45;overflow:auto;opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
.pola.tall .pola-note{aspect-ratio:4/5}
.pola[aria-expanded=true] .pola-note{opacity:1;pointer-events:auto}
@media (max-width:480px){.pola-note{padding:.7rem;font-size:.86rem}}
@media (hover:hover){.pola.flip:hover .pola-note{opacity:1;pointer-events:auto}}
.pola.flip .hint{position:absolute;right:.5rem;top:.5rem;z-index:4;width:30px;height:30px;border-radius:50%;background:var(--paper);display:grid;place-items:center;
  font-family:var(--hand);font-size:1.15rem;line-height:1;color:var(--clay);box-shadow:0 1px 3px rgba(36,56,44,.2)}
.pola.flip[aria-expanded=true] .hint{background:var(--clay);color:var(--paper)}

/* loose, scattered layout — never a rigid grid */
.scatter{display:flex;flex-wrap:wrap;justify-content:center;gap:2.2rem 1.2rem;padding:1rem 0}
.scatter>*{flex:0 0 calc(50% - .6rem);max-width:240px}
.scatter>*:nth-child(even){margin-top:2rem}
@media (min-width:760px){
  .scatter{gap:3rem 2.2rem}
  .scatter>*{flex-basis:calc(25% - 1.7rem)}
  .scatter>*:nth-child(n){margin-top:0}
  .scatter>*:nth-child(4n+2){margin-top:3rem}
  .scatter>*:nth-child(4n+3){margin-top:.6rem}
  .scatter>*:nth-child(4n+4){margin-top:2.2rem}
}

/* ---------- footer (same on every page) ---------- */
/* all white (Kai, 18 Oct): white footer, green ink, hairline on top */
.site-foot{position:relative;margin-top:3rem;background:#fff;color:var(--forest);border-top:1px solid var(--line);padding:3.4rem 0 calc(2.4rem + env(safe-area-inset-bottom))}
.site-foot .wrap{display:grid;gap:2rem}
.site-foot .logo{justify-self:start}
.site-foot .logo img{height:44px}
.foot-stores p,.foot-stores li{font-size:.95rem;line-height:1.7}
.foot-h{color:var(--ink-2);margin-bottom:.35rem}
.foot-brand{color:var(--forest)}
.foot-loc{list-style:none;padding-left:1.1rem;margin-bottom:.6rem;color:var(--ink-2)}
.foot-contact{display:grid;gap:1rem;align-content:start}
.foot-contact .foot-h{margin-bottom:-.65rem}  /* sits right above the email, as "Our Stores:" does above the stores */
.site-foot a.mail{color:var(--forest);text-decoration:none;border-bottom:1px solid var(--line);justify-self:start;font-size:.95rem}
.site-foot a.mail:hover{border-bottom-color:var(--forest)}
/* 44 px tap target without moving the underline (it is the border): an invisible hit area centred on the link */
.site-foot a.mail{position:relative}
.site-foot a.mail::after{content:"";position:absolute;left:0;right:0;top:50%;height:48px;margin-top:-24px}
.social{display:flex;gap:.7rem}
.social a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);color:var(--forest);transition:background .2s,color .2s}
.social a:hover{background:var(--forest);color:#fff}
.social svg{width:20px;height:20px}
.site-foot .copy{font-size:.8rem;color:var(--ink-2)}
@media (min-width:760px){.site-foot .wrap{grid-template-columns:auto 1fr auto;column-gap:4rem;align-items:start}.site-foot .copy{grid-column:1/-1}}

/* ---------- entrance ---------- */
.rise{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rise.in{opacity:1;transform:none}
.no-js .rise{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .pola,.role,.stamp,.tap{transform:none!important}
  .pola.tape::before{transform:translateX(-50%)!important}
  .rise{opacity:1;transform:none}
  .pola.cut .pola-img>img{transform:none}
}