/*
  CB SITE — shared styles for the Cereal Brain pages (shop, Spilt Milk hub, archive).
  Same tokens and components as index.html and cb-post.css.
  Edit here to change every page at once.
*/
:root{
  --paper:#f5f5f3; --ink:#141414; --ink-soft:#3a3a3a; --red:#e0562f; --card:#ffffff;
  --display:'Anton',Impact,'Arial Narrow Bold',sans-serif;
  --marker:'Permanent Marker','Comic Sans MS',cursive;
  --body:'Rajdhani','Arial Narrow',Arial,sans-serif;
  --pad:clamp(20px,4.5vw,64px);
}
*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; scroll-padding-top:96px }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-weight:500; font-size:18px; line-height:1.45;
  padding-bottom:env(safe-area-inset-bottom,0px);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:var(--display); font-weight:400; text-transform:uppercase; margin:0; line-height:1 }
p{ margin:0 }
img{ max-width:100%; display:block }
a{ color:inherit }
a:focus-visible, button:focus-visible, input:focus-visible{ outline:3px solid var(--red); outline-offset:3px }
.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 }
.wrap{ padding-left:var(--pad); padding-right:var(--pad) }
.marker{ font-family:var(--marker); color:var(--red) }

/* buttons + tags */
.btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 22px;
  font-family:var(--body); font-size:17px; font-weight:700; text-transform:uppercase; text-decoration:none;
  border:3px solid var(--ink); background:var(--ink); color:var(--paper); cursor:pointer; white-space:nowrap;
}
.btn:hover{ background:var(--ink-soft); border-color:var(--ink-soft) }
.btn-red{ background:var(--red); border-color:var(--red); color:var(--ink) }
.btn-red:hover{ background:#c94a25; border-color:#c94a25 }
.btn-ghost{ background:transparent; color:var(--ink) }
.btn-ghost:hover{ background:var(--ink); color:var(--paper) }
.btn-sm{ min-height:44px; padding:0 14px; font-size:15px }
.tag{ display:inline-block; width:fit-content; background:var(--red); color:var(--ink); font-size:14px; font-weight:700; padding:2px 9px; text-transform:uppercase }
.tag-ink{ background:var(--ink); color:var(--paper) }
.textlink{ font-size:16px; font-weight:700; text-transform:uppercase; text-underline-offset:4px }

/* top bar + masthead */
.dropbar{
  background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:space-between;
  gap:16px; min-height:44px; padding-top:8px; padding-bottom:8px; font-size:16px; font-weight:600;
}
.dropbar .msg{ display:flex; align-items:center; gap:12px; flex:1; min-width:0 }
.dropbar .msg a{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.dropbar nav{ display:flex; gap:24px }
.dropbar a{ text-decoration:none }
.dropbar a:hover{ text-decoration:underline }
.mast{
  position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:4px solid var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding-top:calc(14px + env(safe-area-inset-top,0px)); padding-bottom:14px;
}
.logo-lockup{ display:flex; flex-direction:column; gap:2px; text-decoration:none }
.logo{ font-family:var(--display); font-size:clamp(30px,3.8vw,54px); line-height:1; text-transform:uppercase; white-space:nowrap }
.tagline{ font-family:var(--marker); color:var(--red); font-size:clamp(14px,1.4vw,19px); line-height:1.1; white-space:nowrap }
.mainnav{ display:flex; gap:22px }
.mainnav a{ font-size:18px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; text-decoration:none; white-space:nowrap }
.mainnav a:hover{ text-decoration:underline; text-underline-offset:6px }
.mast-actions{ display:flex; gap:10px; align-items:center }
.cart-btn{ gap:8px }
.menu-btn{ display:none; width:48px; height:48px; border:3px solid var(--ink); background:transparent; cursor:pointer; align-items:center; justify-content:center }

/* page head */
.page-head{ padding-top:48px; padding-bottom:28px; border-bottom:4px solid var(--ink) }
.page-head h1{ font-size:clamp(48px,8vw,104px); line-height:.9 }
.page-head .marker{ font-size:clamp(20px,2.4vw,30px) }
.page-head p{ max-width:62ch; color:var(--ink-soft); font-weight:600; margin-top:12px }
.toolbar{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding-top:24px; padding-bottom:24px }
.filters{ display:flex; gap:8px; flex-wrap:wrap }
.filters button{
  min-height:44px; padding:0 16px; border:3px solid var(--ink); background:transparent; color:var(--ink);
  font-family:var(--body); font-size:15px; font-weight:700; text-transform:uppercase; cursor:pointer;
}
.filters button[aria-pressed="true"]{ background:var(--ink); color:var(--paper) }
.search{ display:flex; gap:8px; align-items:center; flex:1; min-width:220px; max-width:360px }
.search input{
  flex:1; min-height:46px; padding:0 12px; border:3px solid var(--ink); background:var(--paper);
  font-family:var(--body); font-size:16px; font-weight:600; color:var(--ink);
}
.count{ font-weight:700; color:var(--ink-soft) }

/* product grid */
.product-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; padding-bottom:64px }
.product{ display:flex; flex-direction:column; gap:10px }
.product[hidden]{ display:none }
.product .thumb{ aspect-ratio:1/1; border:3px solid var(--ink); background:#fff }
.product .thumb img{ width:100%; height:100%; object-fit:contain; padding:8px }
.noimg{
  display:flex; align-items:center; justify-content:center; text-align:center; padding:16px;
  font-weight:700; font-size:15px; color:var(--ink-soft);
  background-color:#e4e2dc; background-image:repeating-linear-gradient(135deg,rgba(20,20,20,.08) 0 2px,transparent 2px 14px);
}
.product .name{ font-size:19px; font-weight:700; line-height:1.15 }
.product .price{ font-size:19px; font-weight:700 }
.product .btn{ width:100% }
.product .read{ font-size:15px; font-weight:700; text-transform:uppercase; text-underline-offset:4px }
.product .seen{ font-size:15px; font-weight:600; color:var(--ink-soft) }
.product .seen a{ font-weight:700; color:var(--ink) }
.empty{ grid-column:1/-1; padding:32px; border:3px dashed var(--ink); font-weight:600 }

/* post grid */
.post-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; padding-bottom:56px; align-items:start }
.post-card{ display:flex; flex-direction:column; gap:6px; border:3px solid var(--ink); background:var(--card); padding:16px; min-width:0 }
.post-card[hidden]{ display:none }
.post-card.feature{ background:var(--ink); color:var(--paper) }
.post-card.feature p, .post-card.feature .meta{ color:#d8d8d4 }
.post-thumb{ display:block; aspect-ratio:3/2; background:var(--ink); border:2px solid var(--ink); overflow:hidden; margin-bottom:4px }
.post-thumb img{ width:100%; height:100%; object-fit:contain }
.post-card .icon{ font-size:26px; line-height:1 }
.post-card .meta{ font-size:13px; font-weight:700; color:var(--ink-soft) }
.post-card h3{ font-size:21px; line-height:1.08 }
.post-card h3 a{ text-decoration:none }
.post-card h3 a:hover{ text-decoration:underline; text-underline-offset:5px }
.post-card p{ font-size:15px; line-height:1.35; color:var(--ink-soft); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
.post-card .actions{ display:flex; gap:14px; align-items:center; margin-top:2px }
.post-card .actions .textlink, .post-share{ font-size:13px }
.post-share{ font-family:var(--body); font-weight:700; text-transform:uppercase; background:none; border:0; padding:6px 0; color:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:4px }
.post-shop{ display:flex; flex-direction:column; gap:6px; margin-top:auto; padding-top:8px; border-top:2px solid currentColor }
.post-shop small{ font-size:12px; font-weight:700 }
.mini{ display:flex; gap:10px; align-items:center; text-decoration:none }
.mini img, .mini-ph{ width:36px; height:36px; flex-shrink:0; object-fit:contain; background:#fff; border:2px solid currentColor }
.mini-t{ display:block; font-size:13px; font-weight:700; line-height:1.15; text-decoration:underline; text-underline-offset:3px }
.mini-p{ display:block; font-size:13px; font-weight:700 }

/* archive list */
.archive-group{ padding-bottom:12px }
.archive-group h2{ font-size:clamp(28px,3.4vw,40px); padding:28px 0 10px; border-bottom:4px solid var(--ink) }
.archive-row{ display:flex; gap:18px; align-items:flex-start; padding:18px 0; border-bottom:2px solid var(--ink); text-decoration:none }
.archive-row:hover h3{ text-decoration:underline; text-underline-offset:5px }
.archive-row .shot{ width:120px; flex-shrink:0; aspect-ratio:3/2; background:var(--ink); border:2px solid var(--ink); overflow:hidden }
.archive-row .shot img{ width:100%; height:100%; object-fit:contain }
.archive-row .body{ display:flex; flex-direction:column; gap:4px; min-width:0 }
.archive-row h3{ font-size:24px; line-height:1.08 }
.archive-row .meta{ font-size:14px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em }
.archive-row p{ font-size:16px; color:var(--ink-soft); font-weight:600 }

/* footer */
.foot{ background:var(--ink); color:var(--paper); padding-top:64px; padding-bottom:calc(36px + env(safe-area-inset-bottom,0px)) }
.foot h2{ font-size:clamp(36px,5vw,64px); max-width:18ch }
.foot .btn{ margin-top:20px; white-space:normal; text-align:center; padding:12px 20px; max-width:100% }
.foot .bottom{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:44px; padding-top:22px; border-top:2px solid var(--ink-soft); font-weight:600 }
.foot .bottom nav{ display:flex; gap:26px; flex-wrap:wrap }

@media (max-width:1380px){
  .mainnav{ display:none }
  .menu-btn{ display:inline-flex }
  .mainnav.open{
    display:flex; flex-direction:column; gap:0; position:absolute; left:0; right:0; top:100%;
    background:var(--paper); border-bottom:4px solid var(--ink); padding:8px var(--pad) 16px;
  }
  .mainnav.open a{ padding:14px 0; border-top:2px solid var(--ink); font-size:20px }
  .dropbar nav{ display:none }
}
@media (max-width:1100px){ .product-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (max-width:820px){ .post-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:640px){
  body{ font-size:17px }
  .mast{ gap:8px }
  .mast-actions{ gap:6px }
  .logo{ font-size:26px }
  .tagline{ font-size:12px }
  .cart-label{ display:none }
  .cart-btn{ padding:0 10px }
  .menu-btn{ width:44px; height:44px }
  .dropbar .msg a{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  .toolbar{ gap:12px }
  .search{ max-width:none }
  .toolbar .btn{ white-space:normal; text-align:center; padding:10px 16px; max-width:100% }
  .product-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 14px }
  .product .name{ font-size:16px }
  .post-grid{ grid-template-columns:1fr 1fr; gap:12px }
  .post-card{ padding:12px }
  .post-card h3{ font-size:18px }
  .archive-row .shot{ width:88px }
  .archive-row h3{ font-size:20px }
}
@media (max-width:360px){ .logo{ font-size:22px } .tagline{ font-size:11px } }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }


/* ===== Bowl ratings ===== */
.bowls{ display:inline-flex; align-items:center; gap:6px; vertical-align:middle }
.bowls-set{ display:inline-flex; gap:2px; color:var(--red) }
.bowl{ width:22px; height:22px; display:block }
.bowls-num{ font-weight:700; font-size:15px; color:var(--ink-soft); letter-spacing:.02em }
.bowls[data-size="sm"] .bowl{ width:16px; height:16px }
.bowls[data-size="sm"] .bowls-num{ font-size:13px }
.bowls[data-size="lg"] .bowl{ width:34px; height:34px }
.bowls[data-size="lg"] .bowls-num{ font-size:22px; color:var(--ink) }
.post-card.feature .bowls-num, .story.feature .bowls-num{ color:#d8d8d4 }

/* review cards */
.review-card{ display:flex; flex-direction:column; gap:8px; border:3px solid var(--ink); background:var(--card); padding:16px; min-width:0 }
.review-card h3, .review-card p, .review-card .meta{ overflow-wrap:anywhere }
.review-card .shot{ display:block; aspect-ratio:3/2; background:var(--ink); border:2px solid var(--ink); overflow:hidden }
.review-card .shot img{ width:100%; height:100%; object-fit:contain }
.review-card h3{ font-size:22px; line-height:1.08 }
.review-card h3 a{ text-decoration:none }
.review-card h3 a:hover{ text-decoration:underline; text-underline-offset:5px }
.review-card .meta{ font-size:13px; font-weight:700; color:var(--ink-soft) }
.review-card p{ font-size:15px; line-height:1.35; color:var(--ink-soft); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
.review-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:start; padding-bottom:56px }
.top-review{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:28px; align-items:center;
  border:4px solid var(--ink); background:var(--ink); color:var(--paper); padding:24px; margin-bottom:28px }
.top-review .shot{ border:3px solid var(--paper); background:#000; aspect-ratio:3/2; overflow:hidden }
.top-review .shot img{ width:100%; height:100%; object-fit:contain }
.top-review h2{ font-size:clamp(28px,4vw,46px); line-height:1.02 }
.top-review p{ color:#d8d8d4; font-weight:600; margin:10px 0 14px }
.top-review .bowls-num{ color:#d8d8d4 }
.scale-key{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; border:3px solid var(--ink); background:var(--card); padding:14px 16px; margin-bottom:24px; font-weight:600 }
.scale-key b{ font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:20px }
@media (max-width:900px){ .top-review{ grid-template-columns:1fr } }
@media (max-width:820px){ .review-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:640px){ .review-grid{ grid-template-columns:1fr 1fr; gap:12px } .review-card{ padding:12px } .review-card h3{ font-size:18px } }

@media (max-width:360px){
  .post-grid{ grid-template-columns:1fr }
}
@media (max-width:400px){
  .bowls{ flex-wrap:wrap; max-width:100% }
  .bowls[data-size="sm"] .bowl{ width:14px; height:14px }
  .bowls .bowl{ width:18px; height:18px }
}