/* Eat Surreal — taken from her printed labels, not from a style guide.
 *
 * Every device here is lifted off the 2024/2025 label artwork:
 *   - the banner: a full-width band with a rule above and below, carrying the
 *     name in large sentence-case grotesque. That is her headline treatment.
 *   - the wordmark: EAT SURREAL, caps, widely letterspaced.
 *   - the circle: the label IS the product shot.
 *   - the flavour colours: thirteen of them, one per product. Yellow is
 *     Pimento's colour, not "the brand colour".
 *   - the ghosted engraving behind the type.
 *
 * Ground is a warm oat so the flavour colours are the only colour on the page.
 * Colour never sits behind body text — it appears as rules, rings and tints.
 *
 * Type is Archivo, the closest free grotesque to the Gothic 725 Blk BT
 * (Bitstream's Trade Gothic) that every label is actually set in. Montserrat is
 * deliberately gone: it is a geometric sans and reads generic next to her pack.
 */

:root {
  --oat: #F4F0E6;
  --oat-deep: #EAE4D5;
  --card: #FFFFFF;
  --ink: #111;
  --charcoal: #343738;
  --muted: #6B6862;
  --line: #D8D2C2;
  --accent: #E0492F;          /* functional UI state only: errors, cart badge */

  /* The thirteen flavour colours, sampled from the label artwork. */
  --c-pimento: #FCFC60;
  --c-dill: #609030;
  --c-buffalo: #00CCFC;
  --c-bloody: #FC3030;
  --c-moroccan: #CC3030;
  --c-spicy: #CC6030;
  --c-pumpkin: #CC9030;
  --c-cherry: #906030;
  --c-sweet: #CC9090;
  --c-babaganade: #90CC90;
  --c-bam: #903060;
  --c-lox: #FCCC90;
  --c-original: #B9B3A5;

  --body: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --script: 'Caveat', cursive;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--oat);
  color: var(--charcoal);
  /* 500, never 300. A light weight was most of why the last version read as
     sterile and hard to look at. */
  font: 500 17px/1.62 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }
.prose { max-width: 68ch; }
.lede { font-size: 1.06em; max-width: 46ch; }
.note { color: var(--muted); font-size: 14.5px; font-weight: 500; }
.hairline { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
.warm { background: var(--oat-deep); }

/* --- Handwriting. Three accents per page at most, and never in gold on white:
       that combination measured 2.29:1 and was a real contrast failure. ------ */
.script { font-family: var(--script); font-weight: 700; color: var(--ink); line-height: 1.1; }
.script-sm { font-size: 25px; }
.script-ink { color: var(--ink); }

.micro-heading {
  font: 800 12px/1 var(--body);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 16px;
}

/* --- The banner. Her headline device: rule, name, rule. ------------------- */
h1, h2 { color: var(--ink); font-weight: 800; letter-spacing: -.022em; line-height: 1.04; margin: 0; }
h1 { font-size: clamp(34px, 5.6vw, 60px); }
h2 { font-size: clamp(26px, 3.8vw, 40px); }
h3 { color: var(--ink); font-weight: 800; font-size: 20px; letter-spacing: -.015em; margin: 0 0 8px; line-height: 1.2; }

.banner { border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); padding: 14px 0 16px; margin: 0; }
.section-title { border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); padding: 12px 0 14px; margin: 0 0 30px; }

/* --- The spectrum: the range as it reads on a shelf. --------------------- */
.spectrum { display: flex; height: 7px; width: 100%; }
.spectrum span { flex: 1; }

/* --- Header ------------------------------------------------------------- */
.topnav {
  background: var(--oat); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 74px; padding: 0 24px;
}
.brand {
  display: inline-flex; align-items: center; gap: 11px; min-height: 44px;
  text-decoration: none; color: var(--ink);
  font-weight: 800; font-size: 19px; letter-spacing: .30em; text-transform: uppercase;
  line-height: 1; white-space: nowrap;
}
.brand .glyph { width: 26px; height: 26px; fill: currentColor; flex: none; }
.topnav nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.topnav nav a {
  font: 700 12.5px/1 var(--body); letter-spacing: .15em; text-transform: uppercase;
  text-decoration: none; color: var(--charcoal);
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 13px;
  border-bottom: 3px solid transparent;
}
.topnav nav a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.topnav nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.cart-link { margin-left: 6px; background: var(--ink); color: #fff !important; padding: 0 17px !important; border-bottom-color: var(--ink) !important; }
.cart-link:hover { background: var(--charcoal); }
.cart-count { font-weight: 800; }
.cart-count:not(:empty) {
  margin-left: 8px; background: var(--accent); color: #fff;
  border-radius: 999px; padding: 2px 8px; font-size: 11px; line-height: 1.4;
}

.menu-btn { display: none; }
@media (max-width: 720px) {
  .menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 52px; min-height: 46px; padding: 0 12px;
    background: transparent; border: 3px solid var(--ink); color: var(--ink);
    font: 800 11.5px/1 var(--body); letter-spacing: .13em; text-transform: uppercase;
    cursor: pointer; border-radius: 0;
  }
}

/* --- Sections ----------------------------------------------------------- */
main section { padding: 64px 0; }
.page-hero { padding: 52px 0 30px; }
.page-hero h1 { max-width: 20ch; }
.page-hero .lede { margin-top: 18px; }

/* Ghosted engraving behind a section. Public-domain plates from Besler's
   Hortus Eystettensis (1640) — see docs/art/CREDITS.md. Feathered, because even
   at 10% the plate's own rectangular edge reads as a seam. */
.ghost { position: relative; overflow: hidden; }
.ghost > * { position: relative; z-index: 1; }
.ghost::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-repeat: no-repeat; background-size: auto 150%;
  background-position: 115% 45%; opacity: .10;
  -webkit-mask-image: radial-gradient(115% 105% at 100% 50%, #000 30%, transparent 76%);
          mask-image: radial-gradient(115% 105% at 100% 50%, #000 30%, transparent 76%);
}
.ghost-peppers::before  { background-image: url("../img/art/peppers.webp"); }
.ghost-tomato::before   { background-image: url("../img/art/tomato.webp"); }
.ghost-gourd::before    { background-image: url("../img/art/gourd.webp"); }
.ghost-eggplant::before { background-image: url("../img/art/eggplant.webp"); }
.ghost-left::before {
  background-position: -15% 48%;
  -webkit-mask-image: radial-gradient(105% 105% at 0% 50%, #000 30%, transparent 74%);
          mask-image: radial-gradient(105% 105% at 0% 50%, #000 30%, transparent 74%);
}

/* --- Home hero ---------------------------------------------------------- */
.hero { padding: 56px 0 18px; }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: 52px; align-items: center; }
.kicker { font-family: var(--script); font-size: 30px; font-weight: 700; color: var(--ink); margin: 0 0 10px; line-height: 1; }
.claim { font-weight: 800; font-size: clamp(17px, 2vw, 20px); color: var(--ink); margin: 20px 0 0; }

.badges { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 20px 0 0; }
.badges .badge { background: transparent; border: 2px solid var(--ink); color: var(--ink); }

.badge {
  display: inline-block; font: 800 11px/1 var(--body);
  letter-spacing: .13em; text-transform: uppercase;
  padding: 8px 11px; background: var(--ink); color: #fff;
}

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 26px 0 0; }
.btn {
  font: 800 13px/1 var(--body); letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px; border: 3px solid var(--ink);
  background: var(--ink); color: #fff; cursor: pointer; border-radius: 0;
}
.btn:hover { background: var(--charcoal); border-color: var(--charcoal); }
.btn-outline { background: transparent; color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn:disabled, .btn[disabled] { background: var(--line); border-color: var(--line); color: #7a746a; cursor: not-allowed; }

/* The fanned labels. The product shot IS the label; it needs no photograph. */
.hero-photo { position: relative; aspect-ratio: 1/1; margin: 0; }
.hero-photo img { position: absolute; border-radius: 50%;
  box-shadow: 0 22px 44px rgba(17,17,17,.16), 0 3px 9px rgba(17,17,17,.08), 0 0 0 1px rgba(17,17,17,.14); }
.hero-photo .lead { width: 80%; left: 10%; top: 6%; z-index: 3; }
.hero-photo .back-l { width: 47%; left: -4%; top: 52%; z-index: 2; transform: rotate(-13deg); }
.hero-photo .back-r { width: 44%; right: -3%; top: 56%; z-index: 2; transform: rotate(11deg); }
.hero-caption { position: absolute; left: 0; top: 24%; z-index: 4; transform: rotate(-8deg); text-align: center; }

/* --- Cards and the product grid ----------------------------------------- */
.grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

.card {
  background: var(--card); border: 1px solid var(--line);
  display: flex; flex-direction: column;
  transition: transform .16s ease, box-shadow .16s ease;
}
.product-card { text-decoration: none; color: inherit; position: relative; overflow: hidden; }

/* Corner banner, in Moroccan red — a colour off her own labels, not a new one.
   It is the only red in the palette white type stays readable on at this size:
   Moroccan #CC3030 gives 5.2:1, while Bloody Mary #FC3030 gives 3.75:1 and
   Spicy #CC6030 gives 3.97:1. Both of those pass behind a headline and fail
   behind 10px type, which is what this is.

   THE CARD CLIPS IT, not a little box of its own. A wrapper sized to the corner
   was smaller than the card, so the band's lower end stopped in mid-air over the
   label instead of being cut off — it read as a stray red stripe rather than a
   folded corner. Hung past the right edge and rotated, the band crosses the top
   edge and the right edge and is cut flush by both, which is the whole effect.
   .product-card above carries the overflow:hidden that does the cutting. */
.popular-flag {
  position: absolute; top: 30px; right: -58px; width: 200px; z-index: 3;
  transform: rotate(45deg);
  background: var(--c-moroccan); color: #fff;
  padding: 6px 0; text-align: center; white-space: nowrap; pointer-events: none;
  font: 800 10px/1.3 var(--body); letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(17,17,17,.22);
}
.product-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(17,17,17,.10); }
.product-card.sold-out { opacity: .72; }

/* store.js writes this markup; these class names are its contract. */
.product-photo { padding: 18px 18px 4px; background: linear-gradient(170deg, color-mix(in srgb, var(--c, var(--line)) 14%, #fff) 0%, #fff 78%); }
.product-photo img { border-radius: 50%; width: 100%; box-shadow: 0 0 0 1px rgba(17,17,17,.12); }
.product-photo-empty {
  aspect-ratio: 1/1; border-radius: 50%; border: 1px dashed var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 12.5px; font-weight: 600; text-align: center; padding: 20px;
}
.product-body { padding: 14px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.product-body h3 { margin: 0 0 10px; }
.product-body h3 a { text-decoration: none; }
.product-body h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.product-rule { height: 4px; width: 44px; background: var(--c, var(--ink)); margin: 0 0 12px; }
.product-desc { margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; color: var(--charcoal); flex: 1; }

.price { font-weight: 800; font-size: 19px; color: var(--ink); }
/* price_cents === 0 means "not set". It must never render as $0.00 and must
   never be sellable — this is the visible half of that rule. */
.price-pending { font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* --- Store / cart forms ------------------------------------------------- */
label { display: block; font: 700 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--charcoal); margin: 0 0 8px; }
input[type="text"], input[type="email"], input[type="number"], input[type="tel"], select, textarea {
  font: 600 16px/1.3 var(--body); color: var(--ink); background: #fff;
  border: 3px solid var(--ink); padding: 12px 14px; min-height: 52px; width: 100%;
  border-radius: 0;
}
input:focus, select:focus, textarea:focus { outline: 3px solid var(--c-pumpkin); outline-offset: 2px; }
/* A ZIP or a quantity is not a full-width field. */
.field-sm { max-width: 180px; }

/* Errors are red and bold. This went charcoal once in a restyle and the
   checkout failure message became invisible. */
.field-error, #checkout-error, #zone-error {
  color: var(--accent); font-weight: 700; margin: 10px 0 0;
}
#zone-result { font-weight: 600; }
#cart-total { font-weight: 800; font-size: 20px; text-align: right; margin: 20px 0; }

.qty-btn, .remove-btn {
  font: 800 13px/1 var(--body); min-height: 44px; min-width: 44px;
  border: 2px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer;
}
.qty-btn:hover, .remove-btn:hover { background: var(--ink); color: #fff; }
.remove-btn { letter-spacing: .1em; text-transform: uppercase; padding: 0 12px; }

/* --- FAQ / blog / lists ------------------------------------------------- */
.faq-item { border-bottom: 1px solid var(--line); padding: 22px 0; }
.faq-item h3 { margin-bottom: 8px; }
.faq-item p { max-width: 68ch; margin: 0; }

.blog-list { list-style: none; margin: 0; padding: 0; }
.blog-item { border-bottom: 1px solid var(--line); padding: 22px 0; }
.blog-meta { color: var(--muted); font-size: 13.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 6px; }

.store-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.store-list li { background: #fff; border: 1px solid var(--line); padding: 18px; }

.zone-map-fallback { border: 1px dashed var(--line); padding: 28px; color: var(--muted); background: #fff; }

/* --- Footer, with the curved keep-cold line off the bottom of every label - */
.site-footer { background: var(--oat); border-top: 1px solid var(--line); padding: 52px 0 0; margin-top: 20px; }
.footer-grid { display: grid; grid-template-columns: minmax(0,1.3fr) repeat(2, minmax(0,1fr)) minmax(0,1.2fr); gap: 34px; }
.footer-logo { max-width: 190px; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--charcoal); font-weight: 500; font-size: 15.5px; }
.footer-links li a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.footer-note { border-top: 1px solid var(--line); margin-top: 24px; padding: 20px 0 32px; color: var(--muted); font-size: 13.5px; font-weight: 500; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-curve { margin: 44px 0 0; overflow: hidden; }
.footer-curve svg { width: 100%; height: auto; display: block; }
.footer-curve text { font: 800 13px var(--body); letter-spacing: .24em; fill: var(--ink); text-transform: uppercase; }
address { font-style: normal; font-weight: 500; font-size: 15.5px; line-height: 1.6; }

/* --- Admin. Her phone is the admin; nothing here is for a team. ---------- */
.tab-btn {
  font: 800 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase;
  background: transparent; border: 0; border-bottom: 3px solid transparent;
  color: var(--charcoal); min-height: 48px; padding: 0 14px; cursor: pointer;
}
.tab-btn[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.tab-panel[hidden] { display: none; }

/* --- Mobile is part of done, not an extra ------------------------------- */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 36px; }
  /* NOT `margin: 0 auto`. An auto margin on a grid item makes it shrink to fit
     its contents, and every label in here is absolutely positioned, so the
     figure measured 0x0 and the hero had no product picture at all on a phone.
     justify-self centres it without changing how it is sized. */
  .hero-photo { width: 100%; max-width: 430px; justify-self: center; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 720px) {
  body { font-size: 16.5px; }
  .container { padding: 0 18px; }
  /* Six links do not fit across a phone. Flat, they wrapped to a second row and
     made a 155px sticky header that followed you down the page. Behind a button
     instead: the bar is one row, and the menu is a full-width list when open. */
  .topnav { padding: 0 18px; min-height: 62px; position: relative; }
  .brand { font-size: 15px; letter-spacing: .22em; gap: 8px; }
  .brand .glyph { width: 21px; height: 21px; }
  .topnav nav { display: none; }
  .topnav nav.open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--oat); border-bottom: 3px solid var(--ink);
    padding: 4px 18px 12px; box-shadow: 0 18px 30px rgba(17,17,17,.10);
  }
  .topnav nav.open a {
    padding: 0; border-bottom: 1px solid var(--line);
    font-size: 13px; letter-spacing: .13em; min-height: 52px;
  }
  .topnav nav.open .cart-link {
    margin: 10px 0 0; justify-content: center; border-bottom-color: var(--ink) !important;
  }
  main section { padding: 44px 0; }
  .hero { padding: 32px 0 6px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
  .product-photo { padding: 12px 12px 2px; }
  .product-body { padding: 12px 14px 14px; }
  .product-body h3 { font-size: 16.5px; }
  /* The card is 170px wide on a phone; the full-size ribbon would cover the
     label. */
  /* The card is 170px wide on a phone. Smaller type keeps the words inside the
     cut; the offsets stay put so the band still meets both edges. */
  .popular-flag { font-size: 8px; letter-spacing: .04em; padding: 5px 0; top: 26px; right: -60px; }
  .product-desc { font-size: 13.5px; }
  .btn-row .btn { flex: 1 1 100%; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .kicker { font-size: 25px; }
  .ghost::before { background-size: auto 78%; opacity: .085; }
}