/* ============================================
   Starbucks Menu Hub — independent guide
   Palette: signature deep green + the logo's
   espresso brown & gold on warm cream.
   (Independent site; not affiliated with Starbucks.)
   ============================================ */
:root {
  --green: #00603a;
  --green-dk: #013f27;
  --green-soft: #e6efe9;
  --espresso: #2b1d16;
  --bean: #4a3326;
  --gold: #b07d35;
  --gold-lt: #c9a46b;
  --cream: #f7f1e6;
  --cream-dk: #efe6d4;
  --milk: #fffdf9;
  --ink: #241a13;
  --muted: #6b5d50;
  --line: #e4d9c6;
  --radius: 14px;
  --maxw: 1100px;
  --shadow: 0 2px 4px rgba(43,29,22,.06), 0 10px 28px rgba(43,29,22,.08);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif; color:var(--ink); background:var(--milk); line-height:1.65; font-size:18px; }
h1,h2,h3 { font-family:"Avenir Next","Segoe UI",system-ui,sans-serif; }
h1 { font-size:clamp(2rem,5vw,3.1rem); line-height:1.08; letter-spacing:-.02em; margin:0 0 .4em; color:var(--espresso); }
h2 { font-size:clamp(1.5rem,3vw,2.1rem); letter-spacing:-.01em; margin:2.2em 0 .6em; color:var(--green); }
h3 { font-size:1.2rem; margin:1.6em 0 .4em; color:var(--espresso); }
p { margin:0 0 1em; }
a { color:var(--green); }
img { max-width:100%; display:block; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 22px; }

.site-header { position:sticky; top:0; z-index:50; background:rgba(255,253,249,.95); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.nav { display:flex; align-items:center; gap:18px; padding:8px 22px; max-width:var(--maxw); margin:0 auto; }
.brand { display:flex; align-items:center; text-decoration:none; }
.brand img { height:54px; width:auto; }
.nav-links { margin-left:auto; display:flex; gap:2px; flex-wrap:wrap; }
.nav-links a { font-family:"Avenir Next",system-ui,sans-serif; font-size:.9rem; font-weight:600; text-decoration:none; color:var(--bean); padding:7px 11px; border-radius:999px; }
.nav-links a:hover, .nav-links a.active { background:var(--green); color:var(--milk); }
.menu-toggle { display:none; }

.hero { background:radial-gradient(1200px 420px at 82% -10%,rgba(176,125,53,.16),transparent),linear-gradient(180deg,var(--cream),var(--milk)); border-bottom:1px solid var(--line); }
.hero .wrap { padding-top:50px; padding-bottom:44px; }
.eyebrow { font-family:"Avenir Next",system-ui,sans-serif; text-transform:uppercase; letter-spacing:.14em; font-size:.76rem; font-weight:700; color:var(--gold); margin-bottom:14px; }
.hero p.lede { font-size:1.18rem; max-width:60ch; color:var(--bean); }
.hero-flex { display:flex; align-items:center; gap:40px; }
.hero-flex .hero-copy { flex:1; }
.hero-art { flex:0 0 220px; }
@media (max-width:720px){ .hero-art{ display:none; } }
.meta-pills { display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
.pill { font-family:"Avenir Next",system-ui,sans-serif; font-size:.82rem; font-weight:600; background:var(--milk); border:1px solid var(--line); padding:7px 14px; border-radius:999px; color:var(--muted); }
.pill strong { color:var(--green); }
.updated { font-family:"Avenir Next",system-ui,sans-serif; font-size:.85rem; color:var(--muted); }

.btn-row { display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
.btn { font-family:"Avenir Next",system-ui,sans-serif; font-weight:700; font-size:.95rem; text-decoration:none; padding:12px 22px; border-radius:999px; display:inline-block; }
.btn-primary { background:var(--green); color:var(--milk); }
.btn-primary:hover { background:var(--green-dk); }
.btn-ghost { background:transparent; color:var(--green); border:2px solid var(--green); }
.btn-ghost:hover { background:var(--green-soft); }

.chips { display:flex; flex-wrap:wrap; gap:8px; margin:1.2em 0 2em; }
.chips a { font-family:"Avenir Next",system-ui,sans-serif; font-size:.85rem; font-weight:600; text-decoration:none; color:var(--bean); background:var(--milk); border:1px solid var(--line); padding:8px 14px; border-radius:999px; }
.chips a:hover { background:var(--green); color:var(--milk); border-color:var(--green); }

.size-table { width:100%; border-collapse:collapse; margin:1em 0 1.6em; background:var(--milk); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.size-table caption { text-align:left; font-family:"Avenir Next",system-ui,sans-serif; font-weight:700; padding:14px 16px 4px; color:var(--green); }
.size-table th,.size-table td { padding:12px 14px; text-align:left; }
.size-table thead th { font-family:"Avenir Next",system-ui,sans-serif; font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); background:var(--cream); border-bottom:1px solid var(--line); white-space:nowrap; }
.size-table thead th.r,.size-table td.r,.size-table td.p,.size-table td.c { text-align:right; }
.size-table tbody tr + tr td { border-top:1px solid var(--line); }
.size-table td.p { font-family:"Avenir Next",system-ui,sans-serif; font-weight:700; color:var(--bean); white-space:nowrap; }
.size-table td.c { font-family:"Avenir Next",system-ui,sans-serif; font-size:.8rem; color:var(--muted); white-space:nowrap; }
.size-table tbody tr:hover { background:var(--green-soft); }
.size-table .grp td { background:var(--cream); font-family:"Avenir Next",system-ui,sans-serif; font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--gold); }
.item-cell { display:flex; align-items:center; gap:10px; }
.ic { flex:0 0 auto; width:26px; height:26px; border-radius:7px; background:var(--green-soft); display:inline-flex; align-items:center; justify-content:center; }
.ic svg { width:16px; height:16px; }
.tbl-wrap { overflow-x:auto; }
@media (max-width:720px){ .size-table{ font-size:.85rem;} .size-table th,.size-table td{padding:9px 8px;} }

.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px; margin:1.4em 0 2em; }
.card { display:block; text-decoration:none; color:inherit; background:var(--milk); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .15s ease; }
.card:hover { transform:translateY(-3px); box-shadow:0 6px 12px rgba(43,29,22,.1),0 16px 36px rgba(43,29,22,.1); }
.card .kicker { font-family:"Avenir Next",system-ui,sans-serif; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold); font-weight:700; }
.card h3 { margin:.35em 0 .3em; font-size:1.12rem; color:var(--green); }
.card p { font-size:.95rem; color:var(--muted); margin:0; }

.imgph { border-radius:var(--radius); border:1px dashed var(--gold-lt); background:repeating-linear-gradient(45deg,rgba(176,125,53,.07) 0 14px,transparent 14px 28px),var(--cream); display:flex; align-items:center; justify-content:center; text-align:center; color:var(--muted); font-family:"Avenir Next",system-ui,sans-serif; font-size:.85rem; min-height:200px; padding:20px; margin:1em 0; }
.imgph span { max-width:34ch; }

.faq details { border:1px solid var(--line); border-radius:var(--radius); background:var(--milk); padding:4px 18px; margin-bottom:12px; box-shadow:var(--shadow); }
.faq summary { font-family:"Avenir Next",system-ui,sans-serif; font-weight:700; cursor:pointer; padding:12px 0; list-style:none; color:var(--green); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; float:right; color:var(--gold); font-size:1.3rem; line-height:1; }
.faq details[open] summary::after { content:"\2013"; }
.faq details p { padding-bottom:8px; }

.note { background:var(--green-soft); border-left:4px solid var(--green); border-radius:0 var(--radius) var(--radius) 0; padding:16px 20px; margin:1.6em 0; font-size:.96rem; color:var(--bean); }

.video-wrap { margin:1.8em 0; }
.video-frame { position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:var(--espresso); cursor:pointer; }
.video-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-poster { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px; background:linear-gradient(135deg,var(--green-dk),var(--espresso)); color:var(--cream); text-align:center; padding:20px; }
.video-poster .play { width:68px; height:68px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; }
.video-poster .play svg { width:26px; height:26px; margin-left:4px; fill:var(--green); }
.video-poster .vlabel { font-family:"Avenir Next",system-ui,sans-serif; font-weight:600; font-size:.95rem; max-width:40ch; }
.video-note { font-size:.8rem; color:var(--muted); margin-top:8px; }

.map-wrap { margin:1.8em 0; }
.map-frame { width:100%; aspect-ratio:16/8; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line); }
.map-frame iframe { width:100%; height:100%; border:0; }

.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; margin:1.4em 0 2em; }
.stat { background:var(--milk); border:1px solid var(--line); border-radius:var(--radius); padding:20px; text-align:center; box-shadow:var(--shadow); }
.stat .num { font-family:"Avenir Next",system-ui,sans-serif; font-weight:800; font-size:2rem; color:var(--green); line-height:1; }
.stat .lbl { font-size:.85rem; color:var(--muted); margin-top:6px; }

.bean-rule { display:flex; align-items:center; gap:14px; margin:2.4em 0 1.2em; }
.bean-rule::before,.bean-rule::after { content:""; height:1px; background:var(--line); flex:1; }
.cols2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:720px){ .cols2{ grid-template-columns:1fr; } }
.crumb { font-family:"Avenir Next",system-ui,sans-serif; font-size:.85rem; color:var(--muted); padding:14px 0 0; }
.crumb a { text-decoration:none; }
article { padding-bottom:10px; }
article ul { padding-left:1.2em; }
article li { margin-bottom:.4em; }

.site-footer { margin-top:64px; background:var(--green-dk); color:var(--cream); font-size:.92rem; }
.site-footer .wrap { padding-top:44px; padding-bottom:44px; }
.site-footer h4 { font-family:"Avenir Next",system-ui,sans-serif; color:var(--gold-lt); margin:0 0 12px; font-size:.9rem; text-transform:uppercase; letter-spacing:.08em; }
.foot-grid { display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:30px; }
.site-footer a { color:var(--cream); text-decoration:none; display:block; padding:3px 0; opacity:.86; }
.site-footer a:hover { opacity:1; color:var(--gold-lt); }
.foot-bottom { border-top:1px solid rgba(247,241,230,.16); margin-top:30px; padding-top:18px; font-size:.82rem; opacity:.72; }

@media (max-width:860px){
  .nav-links { display:none; width:100%; flex-direction:column; gap:2px; padding-top:8px; }
  .nav-links.open { display:flex; }
  .nav { flex-wrap:wrap; }
  .menu-toggle { display:inline-flex; margin-left:auto; background:var(--green); color:var(--milk); border:0; border-radius:8px; padding:9px 13px; font-family:"Avenir Next",system-ui,sans-serif; font-weight:700; cursor:pointer; }
  .foot-grid { grid-template-columns:1fr; gap:22px; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none!important; scroll-behavior:auto!important; } }
:focus-visible { outline:3px solid var(--gold); outline-offset:2px; border-radius:4px; }

.foot-legal { margin-top:14px; display:flex; gap:18px; flex-wrap:wrap; }
.foot-legal a { display:inline; padding:0; font-size:.82rem; opacity:.8; }
@media (max-width:860px){ .foot-grid { grid-template-columns:1fr!important; } }

/* ---- blog ---- */
.post-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:22px; margin:1.6em 0 2em; }
.post-card { display:flex; flex-direction:column; text-decoration:none; color:inherit; background:var(--milk); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .15s ease; }
.post-card:hover { transform:translateY(-3px); box-shadow:0 6px 12px rgba(43,29,22,.1),0 16px 36px rgba(43,29,22,.1); }
.post-card .thumb { aspect-ratio:16/9; background:linear-gradient(135deg,var(--green),var(--green-dk)); display:flex; align-items:center; justify-content:center; color:var(--cream); }
.post-card .thumb svg { width:54px; height:54px; opacity:.9; }
.post-card .pc-body { padding:18px 20px 22px; display:flex; flex-direction:column; gap:6px; flex:1; }
.post-card .pc-cat { font-family:"Avenir Next",system-ui,sans-serif; font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold); font-weight:700; }
.post-card h3 { margin:.2em 0; font-size:1.12rem; color:var(--espresso); }
.post-card p { font-size:.92rem; color:var(--muted); margin:0; flex:1; }
.post-card .pc-meta { font-family:"Avenir Next",system-ui,sans-serif; font-size:.78rem; color:var(--muted); margin-top:10px; }
.post-meta { font-family:"Avenir Next",system-ui,sans-serif; font-size:.88rem; color:var(--muted); margin:.4em 0 1.4em; }
.post-body { max-width:none; }
.post-body h2 { margin-top:1.6em; }
.post-body h3 { color:var(--green); }
.toc { background:var(--cream); border:1px solid var(--line); border-radius:var(--radius); padding:18px 22px; margin:1.4em 0; }
.toc strong { font-family:"Avenir Next",system-ui,sans-serif; display:block; margin-bottom:8px; color:var(--green); }
.toc a { display:block; padding:3px 0; font-size:.95rem; text-decoration:none; }
.toc a:hover { text-decoration:underline; }
.author-box { display:flex; gap:14px; align-items:center; background:var(--cream); border-radius:var(--radius); padding:16px 20px; margin:2em 0; }
.author-box .ab-avatar { width:48px; height:48px; border-radius:50%; background:var(--green); color:var(--cream); display:flex; align-items:center; justify-content:center; font-family:"Avenir Next",system-ui,sans-serif; font-weight:800; font-size:1.2rem; flex:0 0 auto; }
.author-box .ab-name { font-family:"Avenir Next",system-ui,sans-serif; font-weight:700; }
.author-box .ab-role { font-size:.85rem; color:var(--muted); }
.related { margin-top:2.4em; }


/* ---- added menu images ---- */
.menu-photo {
  margin: 1.1em 0 1.6em;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--cream);
  box-shadow: var(--shadow);
}
.menu-photo img {
  width: 100%;
  height: auto;
  display: block;
}
.hero-art.photo-art {
  flex: 0 0 360px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: var(--cream);
}
.hero-art.photo-art img {
  width: 100%;
  height: 100%;
  min-height: 230px;
  object-fit: cover;
}
.post-card .thumb {
  overflow: hidden;
  background: var(--cream);
}
.post-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width:720px){
  .hero-art.photo-art { display:none; }
}