/* ============================================================
   base.css — element + typographic defaults (layer 4 of 5)
   Mobile-first: base rules target the smallest viewport; components.css and
   utilities.css add min-width breakpoints for larger screens.
   ============================================================ */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-root);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  /* clip (not hidden) contains horizontal overflow WITHOUT creating a scroll
     container — so it never breaks position:sticky (menu/market bar, nav). */
  overflow-x: clip;
}

/* Subtle paper grain (public). */
body.has-grain::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Sticky footer: the page fills at least the viewport so a short page (e.g. gift
   cards) still pins the footer to the bottom instead of floating up. */
.wrap { position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 100svh; }
#main { flex: 1 0 auto; }
.foot { flex-shrink: 0; }

h1, h2, h3, .disp {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.05;
  text-wrap: balance;
  /* NB: no negative letter-spacing — Audrey is a delicate face and tight tracking
     jams its punctuation (comma/apostrophe). Public headings get tracked caps below. */
}

/* Audrey's register: the brand board only ever sets it in TRACKED CAPS, and its
   lowercase reads thin/awkward at display size. So public display headings + eyebrows
   are uppercase with open tracking. Scoped to the storefront — the admin tool keeps
   mixed-case sans headings (theme remaps --font-display → body). */
body:not(.admin) :is(h1, h2, h3, .disp, .card__title, .menu-section h3) {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.14;
}
/* Card titles are small caps in narrow grid columns, where 0.06em tracking pushes a
   single long word (e.g. "SUPERFOOD", "CHOCOLATE") past the column and forces an ugly
   mid-word break. Tighter tracking fits the word; break-word prefers a clean space-break
   over orphaning a letter. Big headings keep the roomier 0.06em above. */
body:not(.admin) .card__title { letter-spacing: 0.02em; overflow-wrap: break-word; }
/* sensible display sizes so bare headings never fall back to body size;
   contextual rules (.hero h1, .head h2, etc.) override these. */
h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
h3 { font-size: 1.3rem; }
.serif-it { font-style: italic; font-weight: 400; }
.lede { font-size: 1.16rem; color: var(--ink-2); max-width: 50ch; }

/* ── THE PAGE BLURB ────────────────────────────────────────────────────────────────
   Renato, 2026-08-26: "the blurb at the top looks good in writing but it needs better
   styling and if we make it more visually appealing then we need to make all pages look
   the same when they have a blurb like that."

   ONE CLASS, EVERY PAGE THAT OPENS WITH ONE — market, visit, catering, now hiring, menus,
   wine club. That is the half of the ask that matters: six pages had six slightly
   different intro paragraphs, and the fix for "make this one nicer" is not a seventh.

   DARK PANEL, 2026-08-28, and it REVERSES what this block said two days ago. The previous
   version argued the lift should be typographic only — that a tinted panel would spend the
   page's one accent on a paragraph nobody came for. The client read that version and said
   no: Renato relaying them, "this needs to look nicer. they suggested maybe black
   background and white font or something like that". They have now seen the calm answer
   and asked for the loud one, so the loud one is what ships. What survives from the old
   note is the constraint, not the conclusion: this stays near-monochrome and still spends
   no rose.

   WHY THIS IS DEFENSIBLE AND NOT JUST OBEDIENCE. The case against dark type panels is that
   dark grounds suit imagery and branding rather than long reading — Designmodo puts it as
   "great for enhancing emotional branding … not so great for displaying big chunks of
   text". A page blurb is two or three sentences, which is the exact size where the
   objection does not apply. So the treatment is taken where it is strong and kept off
   everything else on the page.

   NOT BLACK, AND NOT WHITE, and the numbers are why. #000 under #fff measures 21:1, which
   sounds like the safest possible choice and is not: light type on a very dark ground
   blooms, so pure white on pure black reads thicker and fuzzier than the same ratio the
   other way round, and worst for readers with astigmatism. WCAG scores colour difference
   and cannot see that. So this uses the brand's own two ends — --ink-deep #23251f under
   --cream #f4f3ef — which measures 13.95:1. That clears AAA (7:1) with room, and it is
   within half a point of the 13.51:1 this site already sets everywhere as ink on bone. The
   page is not getting more contrast than it had; it is getting the same contrast inverted.

   WEIGHT 500, NOT 400. Same bloom, second half of the fix: a weight that is right on light
   ground reads thin and hazy reversed out, and the guidance is to lift body copy to 450-500
   in dark mode. Montserrat 500 is already in the font request, so this costs nothing.

   CONTAINED, NOT FULL-BLEED, and that is the difference between a statement and a second
   header. A full-width dark band immediately under the site header abuts the chrome and
   reads as part of it. It also forces one vertical rhythm onto six pages that continue very
   differently — a grid on market, a form on catering and now hiring, a card wall on menus.
   Boxed, the page ground stays visible on both sides and the block reads as something
   placed ON the page. It is also the honest way to keep ONE dark moment per page: the
   documented failure of this pattern is bands multiplying until the page is striped and the
   reading order stops being obvious.

   THE MEASURE IS ON THE TEXT, NOT THE BOX. box-sizing is border-box here, so a bare
   max-width in ch would have the padding eat into the line length and the measure would
   quietly shrink as the padding grew. The width is stated as measure PLUS the padding it
   sits inside, so the line length is 56ch whatever the panel does.

   Sources for the two numbers above: https://designmodo.com/dark-mode-websites/ ,
   https://www.colorcontrast.org/blog/dark-mode-contrast-accessibility-guide/ ,
   https://fontfyi.com/blog/dark-mode-typography/ */
.pagelede {
  /* TIGHTER, 2026-08-29. Stacey: "remove the line and then just like tighten it up so
     there's not so much space around the words" — and when asked whether she meant the
     line spacing, she corrected it to the box itself: "No, no, no, just like the border."
     April put the reason plainly: "Feels like there should be more in it. Yeah, just
     shrink it so it fits it tighter."

     The background and the border are NOT part of that change and were called out as
     keepers on the same breath: "I do like it with the off-white background and border."

     The x floor stays comfortably clear of the border at 390px, where the box is at its
     narrowest and a tight pad is most likely to read as text touching a line. */
  --lede-pad-x: clamp(17px, 2.1vw, 26px);
  --lede-pad-y: clamp(15px, 1.7vw, 21px);
  --lede-gap:   clamp(28px, 3.8vw, 44px);

  /* ONE TREATMENT, ON EVERY PAGE THAT OPENS WITH A BLURB (2026-08-28).
     Renato: "Whatever we do there, we need to apply to the market page... The wine club
     also has the old styling... the Now Hiring page has the same old style. Everywhere --
     let's just do this the right way. We don't do code duplication. Why is everything
     different? You changed one, but they should all look the same."

     He was right and the cause was mine: this class was already the one shared component,
     and the catering page had been given a private override that made its blurb a
     full-bleed band. Two treatments existed because one page diverged, not because six
     pages were hand-written. The override is deleted; this rule is the only one now, and
     it reaches catering, market, wine club, careers, our menus, visit us and the wine list
     from a single place.

     THE GROUND IS --cream, WHICH IS THE COLOUR HE POINTED AT: "where it says order 48
     hours ahead, party platters, and there's a blurb above party platters -- there's a
     color that's like an off-white. I'd rather use that instead of this yellow." That is
     --cream #f4f3ef, the fill behind the catering cells. The ivory tried before it is the
     client's antique cream and read as yellow at this size.

     AND IT IS A BOX: "I would try maybe doing a rectangle around it and boxing it." A
     1px --taupe rule on --cream is a definite rectangle without being a heavy one, and
     --cream on the page's --bone is a shift you can see but not a stripe. */
  background: var(--cream);
  border: 1px solid var(--taupe);
  border-radius: var(--r);
  color: var(--ink);
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  /* 400, not 500. The weight existed to stop light type blooming on a dark ground; dark
     type on a pale one does the opposite and 500 reads heavy. */
  font-weight: 400;
  line-height: 1.7;
  /* 56ch of text, plus the padding it sits inside. */
  max-width: calc(56ch + var(--lede-pad-x) * 2);
  padding: var(--lede-pad-y) var(--lede-pad-x);
  margin: 0 0 var(--lede-gap);
  text-wrap: pretty;
}
/* THE HAIRLINE IS GONE (2026-08-29). Stacey, giving two instructions in one sentence:
   "remove the line and then just like tighten it up so there's not so much space around
   the words." The first half is this rule — a 34px taupe dash above the text — and the
   second half is the padding above. It had been kept through every earlier pass on the
   grounds that it said "this is the page speaking"; inside a box that already says so
   with a border, it was one mark too many, and it was also buying vertical space in the
   exact place she asked to get space back. Its 14-20px bottom margin left with it. */
/* TWO PARAGRAPHS ARE ONE BOX. The wine club opens with a pair, and two separate
   rectangles with a gap between them read as two unrelated statements. Joined: the first
   drops its bottom edge and border, the second drops its top, so they close into one
   block. */
.pagelede:has(+ .pagelede) {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.pagelede + .pagelede {
  padding-top: 1.05em;
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
/* Eyebrow — Audrey in tracked caps (was italic mixed-case, which fought the caps
   headings and jammed the apostrophe in e.g. "Stacey's"). */
/* Accent diet (client 7/21 "less words, more calm"): kickers read as quiet
   small-caps wayfinding, not warm highlights — rose is reserved for at most
   one moment per page (Sakara-style near-monochrome). */
.kicker { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.8rem; font-weight: 400; color: var(--text-muted); }
.prose { max-width: 65ch; }
.prose p { margin: 0 0 1.1em; }
.muted { color: var(--text-muted); }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); }
.container--narrow { max-width: 900px; }

/* Ultra-wide containment: backgrounds/bands bleed full-width; only the INNER
   content is capped + centered. Most bands already do this via .container (the
   top nav caps via .nav__in); the home values line did not, so cap it here. */
.values__in { max-width: var(--maxw); margin-inline: auto; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* Section rhythm. Was clamp(48px, 8vw, 112px), which put 188px of padding around a
   176px-tall section on /our-values -- more padding than content. The client's "too much
   blank space" was measuring this. Spacing should stay proportional to what it surrounds,
   so the growth rate and the ceiling both come down about a quarter. Still generous
   editorial spacing; no longer a moat. */
.section { padding: clamp(40px, 6vw, 80px) 0; }
.section--soft { background: var(--bg-soft); }
.section--ink { background: var(--ink); color: var(--cream); }