/* =========================================================
   matcha hour — café styles
   palette: cream, sage, butter, sky, milk-tea brown, blush
   type: Sacramento (script) · Fraunces (display) · DM Sans (body)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Sacramento&family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,400..500&family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,400..500&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

:root{
  /* surfaces */
  --cream:      #FBF6EC;
  --cream-deep: #F4ECDB;

  /* sage */
  --sage:       #A6C29B;
  --sage-deep:  #5F7E56;
  --sage-soft:  #DCE8D4;

  /* butter yellow */
  --butter:     #F4DE9E;
  --butter-deep:#B9912E;
  --butter-soft:#FBF0CF;

  /* pastel sky blue */
  --sky:        #AFCBDA;
  --sky-deep:   #4F7D97;
  --sky-soft:   #E0EDF2;

  /* milk-tea brown */
  --milk:       #CDA980;
  --milk-deep:  #8A6647;
  --milk-soft:  #EFE2D0;

  /* blush (strawberry-matcha accent, used sparingly) */
  --blush:      #EFC9C2;
  --blush-soft: #F8E5E1;
  --blush-deep: #B5685E;

  /* ink */
  --ink:        #41382C;
  --ink-soft:   #6E6353;
  --clay-deep:  #5A4631;
  --line:       rgba(65,56,44,0.13);

  --script: 'Sacramento', cursive;
  --display: 'Fraunces', Georgia, serif;
  --trending: 'Playfair Display', Georgia, serif;
  --body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --max: 1180px;
  --pad: clamp(20px, 5vw, 60px);
  --radius: 26px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;}

h1,h2,h3,h4{font-family:var(--display);font-weight:400;margin:0;color:var(--clay-deep);letter-spacing:-0.015em;}
h1{font-size:clamp(2.5rem,6vw,4.6rem);line-height:1.02;}
h2{font-family:var(--trending);font-size:clamp(1.9rem,3.8vw,2.9rem);line-height:1.12;font-weight:600;letter-spacing:-0.02em;}
h3{font-size:1.35rem;}

/* cursive accents */
.script{font-family:var(--script);font-weight:400;letter-spacing:0;line-height:1;}
h1 .script{font-size:1.25em;color:var(--sage-deep);display:inline-block;}
.section-script{
  font-family:var(--script);font-size:clamp(2.2rem,5vw,3.4rem);
  color:var(--sage-deep);line-height:0.9;display:block;margin-bottom:6px;
}

.eyebrow{
  font-family:var(--body);font-size:0.72rem;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--sage-deep);font-weight:600;
}

p{margin:0 0 1em;color:var(--ink-soft);}
.lede{font-size:1.16rem;color:var(--ink-soft);max-width:40em;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

/* ---------- layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}
.section{padding:clamp(56px,9vw,104px) 0;}
.section--tight{padding:clamp(34px,6vw,60px) 0;}

/* color-block backgrounds — no more white everywhere */
.bg-cream{background:var(--cream);}
.bg-sage{background:var(--sage-soft);}
.bg-butter{background:var(--butter-soft);}
.bg-sky{background:var(--sky-soft);}
.bg-milk{background:var(--milk-soft);}
.bg-blush{background:var(--blush-soft);}
.bg-sage-solid{background:var(--sage);}
.bg-milk-solid{background:var(--milk);}

/* ---------- the "whisk score" divider ---------- */
.whisk-score{width:100%;height:16px;display:block;color:var(--sage);}
.whisk-score svg{width:100%;height:100%;display:block;}
.whisk-score path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;}

/* ---------- header / nav ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(251,246,236,0.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px var(--pad);max-width:var(--max);margin:0 auto;}
.brand{font-family:var(--script);font-size:2.1rem;color:var(--sage-deep);line-height:1;display:flex;align-items:center;gap:9px;}
.brand .brand-mark{width:13px;height:13px;border-radius:50%;background:var(--sage);display:inline-block;}
.nav-links{display:flex;gap:clamp(16px,2.6vw,32px);font-size:0.96rem;font-weight:500;list-style:none;}
.nav-links a{position:relative;padding:4px 0;color:var(--ink);transition:color .2s;}
.nav-links a:hover, .nav-links a.is-active{color:var(--sage-deep);}
.nav-links a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--sage);border-radius:2px;}
.nav-cta{font-size:0.85rem;font-weight:600;padding:10px 22px;border-radius:30px;background:var(--milk-deep);color:var(--cream);white-space:nowrap;transition:background .2s;}
.nav-cta:hover{background:var(--clay-deep);}
.nav-toggle{display:none;}

@media (max-width: 800px){
  .nav-links{position:fixed;inset:62px 0 0 0;background:var(--cream);flex-direction:column;align-items:flex-start;gap:0;padding:10px var(--pad) 30px;transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .22s, transform .22s;border-top:1px solid var(--line);}
  .nav-links.is-open{opacity:1;pointer-events:auto;transform:translateY(0);}
  .nav-links li{width:100%;border-bottom:1px solid var(--line);}
  .nav-links a{display:block;padding:16px 2px;font-size:1.1rem;}
  .nav-cta{display:none;}
  .nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;background:none;border:none;padding:0;}
  .nav-toggle span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:.2s;}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;border-radius:30px;font-size:0.92rem;font-weight:600;border:1.5px solid transparent;transition:transform .18s, background .2s, color .2s, border-color .2s;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--milk-deep);color:var(--cream);}
.btn-primary:hover{background:var(--clay-deep);}
.btn-ghost{border-color:var(--clay-deep);color:var(--clay-deep);}
.btn-ghost:hover{background:var(--clay-deep);color:var(--cream);}
.btn-sage{background:var(--sage-deep);color:#fff;}
.btn-sage:hover{background:var(--clay-deep);}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:0.74rem;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;padding:6px 14px;border-radius:30px;background:var(--sage-soft);color:var(--sage-deep);}
.chip-butter{background:var(--butter-soft);color:var(--butter-deep);}
.chip-sky{background:var(--sky-soft);color:var(--sky-deep);}
.chip-milk{background:var(--milk-soft);color:var(--milk-deep);}
.chip-blush{background:var(--blush-soft);color:var(--blush-deep);}

/* ---------- footer ---------- */
.site-footer{background:var(--clay-deep);color:var(--butter-soft);margin-top:0;}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding:64px var(--pad) 40px;max-width:var(--max);margin:0 auto;}
.footer-grid h4{color:var(--butter);font-family:var(--body);font-size:0.76rem;letter-spacing:0.14em;text-transform:uppercase;font-weight:600;margin-bottom:14px;}
.footer-grid ul{display:flex;flex-direction:column;gap:10px;}
.footer-grid a{color:rgba(251,240,207,0.82);font-size:0.95rem;transition:color .2s;}
.footer-grid a:hover{color:var(--butter);}
.footer-brand{font-family:var(--script);font-size:2.3rem;color:var(--butter);margin-bottom:8px;display:block;line-height:1;}
.footer-grid p{color:rgba(251,240,207,0.72);}
.footer-bottom{border-top:1px solid rgba(251,240,207,0.18);padding:20px var(--pad) 32px;max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:0.8rem;color:rgba(251,240,207,0.55);}
@media (max-width: 760px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width: 480px){ .footer-grid{grid-template-columns:1fr;} }

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease;}
.reveal.is-visible{opacity:1;transform:translateY(0);}

/* ---------- utility ---------- */
.center{text-align:center;}
.muted{color:var(--ink-soft);}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
:focus-visible{outline:2.5px solid var(--sky-deep);outline-offset:3px;border-radius:4px;}