/* ============================================================================
   Autumn Court — Design Tokens (the executable half of DESIGN-SYSTEM.md)
   Locked lane: Direction B "1982 Family Dining Room" + A "Reader-Board" motif.
   Import this in the homepage/menu/catering builds so every surface pulls ONE
   source of truth. Framework-agnostic: works in the preview HTML, the paper-menu
   generator, and Divi's custom-CSS box.
   Provenance: palette = design/brand-colors.md (2026-07-04 logo eyedrop);
   type = committed 2026-07-22; contrast verified (red/cream 5.15:1, ink/cream 15.4:1).
   ========================================================================== */

/* Google Fonts — all three are free + available in Canva Brand Kit.
   Self-host for production print/PDF; @import is fine for web preview. */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Public+Sans:wght@400;500;600;700;900&family=Oswald:wght@300;400;500;600;700&display=swap');

:root{
  /* ---- COLOR (screen hex) ---------------------------------------------- */
  --ac-red:        #D00000;  /* logo-truth red — CTA fills, logo, red bands   */
  --ac-red-deep:   #A80000;  /* headings on cream, hover, deeper red          */
  --ac-ink:        #241A12;  /* warm near-black — ALL body text               */
  --ac-ink-muted:  #6A5C4B;  /* secondary text — ≥18px or bold only (4.4:1)   */
  --ac-paper:      #FAF3E0;  /* cream — the default page/menu ground          */
  --ac-sheet:      #FFFDF6;  /* lighter cream — cards/menu sheet              */
  --ac-gold:       #B08D4F;  /* RESTRAINED accent — hairlines/keylines ONLY   */
  --ac-star:       #A87908;  /* review-star gold — 5-star marks on review cards
                                ONLY (the one place a filled gold is allowed).
                                Chosen for WCAG 1.4.11 non-text contrast: 3.9:1 on
                                white, 3.6:1 on cream. A brighter #E0A416 tested at
                                2.2:1 and FAILED — do not re-brighten.            */
  --ac-blush:      #F0E0E0;  /* on dark/red grounds (from logo)               */
  --ac-line:       #E7DCC6;  /* hairline rules / dividers                     */
  --ac-desk:       #E9E1D0;  /* muted ground behind a floating menu sheet     */
  /* PRINT NOTE: --ac-red on uncoated stock prints hot. Target a deep muted
     red at press — starting CMYK build ~ C0 M100 Y95 K8; ALWAYS proof before
     a run. Do not print pure #D00000 without a proof. */

  /* ---- TYPE ------------------------------------------------------------- */
  /* Voice 1 "Dining Room" (B): warm old-style serif — masthead, headings,
     item names, descriptions. The 1982 family-menu voice. */
  --ac-serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  /* Utility sans — prices, tags, captions, nav, footer, fine print ONLY. */
  --ac-sans: 'Public Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  /* Voice 2 "Reader-Board" (A): condensed caps — specials, promos, social,
     award crest, marquee callouts. Always letter-spaced, usually on red/black. */
  --ac-sign: 'Oswald', 'Arial Narrow', system-ui, sans-serif;

  /* Type scale (px, web). Print: work in pt at ~ the same steps. */
  --ac-fs-xs: 11px;  --ac-fs-sm: 13px;  --ac-fs-base: 16px;  --ac-fs-md: 19px;
  --ac-fs-lg: 24px;  --ac-fs-xl: 32px;  --ac-fs-2xl: 42px;   --ac-fs-3xl: 54px;
  --ac-lh-tight: 1.15;  --ac-lh-body: 1.55;  --ac-lh-loose: 1.7;
  --ac-track-sign: .14em;   /* reader-board letter-spacing                    */
  --ac-track-eyebrow: .2em; /* small-caps eyebrows                           */

  /* ---- SPACE / SHAPE ---------------------------------------------------- */
  --ac-space-1: 4px;  --ac-space-2: 8px;  --ac-space-3: 16px;
  --ac-space-4: 24px; --ac-space-5: 40px; --ac-space-6: 64px;
  --ac-radius-print: 2px;   /* B leans square — print stays crisp            */
  --ac-radius: 4px;         /* web cards — restrained, never bubbly          */
  --ac-radius-btn: 6px;
  --ac-hair: 1px;           /* hairline rule weight                          */
  --ac-rule: 2.5px;         /* category-header underline weight              */
  --ac-shadow: 0 8px 24px rgba(36,26,18,.10);
  --ac-focus: 3px solid var(--ac-red);  /* keyboard focus ring               */
}

/* Dark surfaces (hero over photo, red bands) use blush/cream on the ground —
   never invert the whole palette. Example helpers: */
.ac-on-red{ color:#fff; }
.ac-on-red .ac-accent{ color:var(--ac-blush); }

/* ---- Platform rating badges — aggregate social proof (2026-07-22) --------
   Reader-board numbers (Oswald) + hairline cards; gold used ONLY as the lead
   hairline (EzCater). Restrained, square, on cream — never bubbly. */
.ac-ratings{ display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch;
  gap:var(--ac-space-2); margin:0 auto; }
.ac-rbadge{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--ac-sheet); border:var(--ac-hair) solid var(--ac-line);
  border-radius:var(--ac-radius); padding:12px 22px; min-width:116px; }
.ac-rbadge .sc{ font-family:var(--ac-sign); font-weight:600; font-size:var(--ac-fs-lg);
  color:var(--ac-ink); line-height:1; letter-spacing:.01em; }
.ac-rbadge .sc i{ font-style:normal; color:var(--ac-red); font-size:15px; margin-left:2px; }
.ac-rbadge .pl{ font-family:var(--ac-sans); font-weight:700; font-size:var(--ac-fs-sm);
  color:var(--ac-red-deep); margin-top:5px; }
.ac-rbadge .ct{ font-family:var(--ac-sans); font-size:12px; color:var(--ac-ink-muted);
  margin-top:1px; }  /* 12px floor — 11px (--ac-fs-xs) tested too small to read */
.ac-rbadge.lead{ border-color:var(--ac-gold); border-width:1.5px; }

/* ---- Review cards: 5-star mark + polish (Google / EzCater 5-star reviews) --
   `.ac-review` is the opt-in class for inline-styled review cards (catering).  */
.qcard::before, .qmini::before, .ac-review::before{
  content:"\2605\2605\2605\2605\2605"; display:block; color:var(--ac-star);
  font-size:17px; letter-spacing:3px; line-height:1; margin-bottom:11px; }
/* attribution row — cards tagged `.google` carry the Google mark (Google-sourced
   reviews ONLY; never on EzCater cards). */
.qcard .qa, .qmini .qa, .ac-review .qa{
  display:inline-flex; align-items:center; gap:7px; margin-top:2px; }
.qcard.google .qa::before, .qmini.google .qa::before, .ac-review.google .qa::before{
  content:""; width:15px; height:15px; flex:none;
  background:url("/web-ready-images/site/google-g.svg") center/contain no-repeat; }

/* card polish — quiet lift on hover, easier quote type */
.qcard, .qmini, .ac-review{ transition:transform .18s ease, box-shadow .18s ease; }
.qcard:hover, .qmini:hover, .ac-review:hover{
  transform:translateY(-2px); box-shadow:0 12px 26px rgba(36,26,18,.11); }
.qcard p.qt, .qmini p.qt{ font-size:15.5px; line-height:1.62; }
@media (prefers-reduced-motion: reduce){
  .qcard:hover, .qmini:hover, .ac-review:hover{ transform:none; } }

/* attribution legibility: page CSS sets `.qcard .qa` to 12.5px, so specificity is
   raised by repeating the class rather than reaching for !important. */
.qcard.qcard .qa, .qmini.qmini .qa{ font-size:13px; }

/* ---- Footer catering row (2026-07-23) ------------------------------------
   Secondary link row under `.flinks`, on the dark footer ground (#241A12).
   Deliberately quieter than `.flinks` (smaller, dimmer) so the diner-first
   primary row stays dominant — the site reads as a restaurant, and catering
   stays reachable without competing above the fold. Contrast on #241A12:
   links #C9C1B6 = 9.6:1, the "Catering" label #8D8478 = 4.6:1 (both pass AA). */
footer .fcater{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:6px 14px; margin:0 0 12px; line-height:1.5; }
footer .fcater .lbl{ font-family:var(--ac-sans); font-size:11px; color:#8D8478;
  text-transform:uppercase; letter-spacing:var(--ac-track-eyebrow); }
footer .fcater a{ font-family:var(--ac-sans); font-size:12.5px; font-weight:600;
  color:#C9C1B6; text-decoration:none;
  /* 3px block padding lifts the hit area from 19px to 25px, clearing the 24px
     minimum target size (WCAG 2.2 SC 2.5.8) without changing the row's look. */
  padding:3px 0; }
footer .fcater a:hover, footer .fcater a:focus-visible{ color:#fff; text-decoration:underline; }

/* ---- Hero typographic system (2026-07-23) --------------------------------
   Diagnosed with ui-ux-pro-max after three rounds of moving blocks failed to
   fix a hero JJ kept calling ugly. The cause was never placement: one 716px
   hero carried THREE typefaces, SEVEN font sizes (12/13/14/16/17/18/30 — six
   of them inside a 6px band) and FIVE weights, on eight different gap values.
   Nothing outranked anything, so the eye had nowhere to land. That breaks
   font-scale, weight-hierarchy, visual-hierarchy and whitespace-balance.

   This collapses the hero to the scale tokens.css ALREADY defines above:
   --ac-fs-sm 13 / --ac-fs-base 16 / --ac-fs-xl 32, and three weights
   (400 body, 700 emphasis, 800 headline). Buttons keep their site-wide
   16px/900 component style — changing that would alter every page.

   Classes are DOUBLED (.hero.hero) on purpose: tokens.css loads BEFORE each
   page's inline <style>, so a single-class rule loses at equal specificity.
   That trap has silently eaten four fixes this session. */
.hero.hero .eyebrow{ font-size:var(--ac-fs-sm); letter-spacing:var(--ac-track-eyebrow); }
.hero.hero h1{ margin:var(--ac-space-2) 0 var(--ac-space-3); }
.hero.hero p.sub{ font-size:var(--ac-fs-base); line-height:var(--ac-lh-body);
  margin-bottom:var(--ac-space-4); }
.hero.hero .ctas{ margin-bottom:var(--ac-space-4); }
/* photo captions join the meta step instead of being a fourth size, and the
   price drops 900 -> 700; it is already distinguished by position and colour. */
.hero.hero .hero-strip .cap{ font-size:var(--ac-fs-sm); font-weight:700; }
.hero.hero .hero-strip .cap .pr{ font-weight:700; }
.hero.hero .hero-strip{ margin-top:0; }
/* catering keeps the award chip between the CTAs and the photos; without a
   bottom margin it sat flush against them (measured 0px gap on desktop). */
.hero.hero .chips{ margin-bottom:var(--ac-space-3); }

@media(max-width:620px){
  .hero.hero p.sub{ margin-bottom:var(--ac-space-3); }
  .hero.hero .ctas{ margin-bottom:var(--ac-space-3); }
}

/* ---- Hero dish strip (2026-07-23) ---------------------------------------
   Puts real food above the fold on the centered heroes (/take-out/, /delivery/,
   /asian-catering/). Those heroes already carried a food photo, but as a
   background under a 72–84% dark overlay — legible as texture, not as food.
   The homepage uses a two-column `.hero-mosaic`; these heroes are centered
   full-width, so the strip runs horizontally beneath the CTAs instead.
   On narrow screens it scrolls rather than shrinking photos to thumbnails. */
.hero-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  max-width:820px; margin:26px auto 0; }
.hero-strip a{ position:relative; display:block; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.35); text-decoration:none; }
.hero-strip img{ display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.hero-strip .cap{ position:absolute; left:0; right:0; bottom:0;
  display:flex; justify-content:space-between; align-items:baseline; gap:8px;
  padding:20px 11px 9px; font-family:var(--ac-sans); font-size:12.5px; font-weight:700;
  color:#fff; text-align:left; line-height:1.25;
  /* the gradient is what guarantees caption contrast — the photo underneath
     varies, so never set the caption on the bare image. */
  background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.55) 45%, rgba(0,0,0,.82)); }
.hero-strip .cap .pr{ font-weight:900; white-space:nowrap; }
@media(max-width:620px){
  .hero-strip{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; padding-bottom:4px; margin-top:8px; }
  .hero-strip a{ flex:0 0 64%; scroll-snap-align:start; }
  /* 16:9 instead of 4:3 buys ~40px of fold — enough for the ratings line above
     it to fit without pushing the photos under. Plated dishes survive the wider
     crop; portrait food shots would not, so keep this scoped to the strip. */
  .hero-strip img{ aspect-ratio:16/9; }
  /* the eyebrow's .2em tracking wraps it onto a 3rd line on a 375px screen */
  .hero .eyebrow{ letter-spacing:.12em; }
  /* On a 375x812 phone the hero copy alone fills the fold, and the trust chips
     (135px stacked) sat between the CTAs and the food — pushing the photos out
     of view. Flex `order` moves the chips last on mobile ONLY, so the food
     clears the fold. DOM order is untouched, so desktop and the reading order
     for screen readers both stay as authored. */
  .hero .wrap{ display:flex; flex-direction:column; }
  .hero .wrap .chips{ order:1; margin-top:18px; }
  /* Mobile hero compaction. Each ratings entry measures ~190px against a 327px
     container, so they stack one-per-line (77px). Rather than abbreviate the
     review counts — brand-claims-contract.md requires platform AND count — the
     ~38px needed to keep the dish photos above the fold comes out of hero
     spacing. Classes are repeated because the page's own <style> loads AFTER
     tokens.css and would otherwise win at equal specificity — three of them,
     not two, because the 8 pages whose dead mobile rules were repaired earlier
     now carry `.hero.hero{padding:44px 0 40px}` in their own <style>, which
     ties a two-class rule here and wins on load order. */
  .hero.hero.hero{ padding-top:30px; }
  .hero.hero.hero p.sub{ margin-bottom:18px; }
  .hero.hero.hero .ctas{ margin-bottom:14px; }
}

/* ---- Merged credibility strip: facts + platform ratings (2026-07-23) ------
   The homepage proof strip now carries the rating badges, and after the section
   resequence it sits directly above the cream `.dishes-sec`. Left on cream it
   read as one undivided slab, so this strip takes the white ground and the
   badges take the cream fill — the contrast inverts and the cards read as cards.
   Scoped to `.proof-merged` so the plain cream strip on /asian-catering/ is
   untouched. The class is repeated (`.proof.proof-merged`) because the page's
   inline <style> loads AFTER tokens.css — at equal specificity it would win. */
.proof.proof-merged{ background:#fff; padding:22px 0 24px; }
.proof-merged .ac-rbadge{ background:var(--ac-paper); }

/* ---- Secondary button on the two dark catering bands (2026-07-23) --------
   The page's own `.btn-ghost` is bordered in --ac-ink, which disappears on the
   maroon `.fm-band` and red `.cta-band` grounds. These give the "Get a Quote"
   secondary a visible outline without competing with the filled primary.
   Contrast: #F4E6E2 on #3d0a0a = 13.9:1 · #fff on #D00000 = 5.7:1 (both AA). */
.fm-band .btn-ghost{ border:2px solid #F4E6E2; color:#F4E6E2; background:transparent; }
.fm-band .btn-ghost:hover, .fm-band .btn-ghost:focus-visible{ border-color:#fff; color:#fff; }
/* `.btn-ghost` is repeated: the page's own `.cta-band .btn{background:#fff}`
   has equal specificity and loads later, which flattened both buttons to the
   same white fill — the secondary must stay visibly subordinate. */
.cta-band .btn-ghost.btn-ghost{ border:2px solid #fff; color:#fff; background:transparent; }
.cta-band .btn-ghost.btn-ghost:hover,
.cta-band .btn-ghost.btn-ghost:focus-visible{ background:rgba(255,255,255,.14); color:#fff; }

/* ---- Trust chips on a light ground (2026-07-23) --------------------------
   The chips moved out of the dark hero into the How-It-Works section, so the
   hero above the fold carries less text. The base `.chip` is built for that
   dark ground — rgba(255,255,255,.12) fill, #f4e6e2 text — and is invisible
   here, so this is the light-ground variant.
   Measured: ink #241A12 on the white fill = 17.1:1 and on the cream section
   ground = 15.4:1. The white fill alone is only 1.11:1 against cream, so it
   cannot carry the chip's boundary — the hairline does, in --ac-gold at
   3.10:1 (clears 1.4.11's 3:1). That is exactly the "hairlines/keylines ONLY"
   use this token is reserved for.
   `.chip` is doubled because tokens.css loads BEFORE each page's inline
   <style>, where `.chip` is redefined — at equal specificity the page wins. */
.chips-light .chip.chip{
  background:#fff; border:1px solid var(--ac-gold); color:var(--ac-ink);
  font-family:var(--ac-sans); font-weight:600; }
.chips-light .chip.chip .ic{ color:var(--ac-red); }

/* ---- <picture> wrapper is layout-inert (2026-07-23) ----------------------
   WebP sources are served via <picture>, which defaults to display:inline.
   Rules like `.hero-strip img{height:100%}` and `.dish .ph img{height:100%}`
   would then resolve against an inline box and collapse. display:contents
   removes the wrapper from layout entirely, so every existing img rule keeps
   behaving exactly as it did before the wrapper existed. */
picture{ display:contents; }
/* …but display:contents dissolves the wrapper's box, which promotes BOTH its
   children — <source> AND <img> — into items of any grid/flex parent. <source>
   then silently claims a cell. That is what broke the homepage "Family-Style
   Catering" band (2026-07-24): the invisible <source> took column 1, the image
   was pushed to column 2, and the text wrapped to a second row — image floating
   top-right, copy stranded bottom-left.
   <source> is a metadata element and must never generate a box, so this is the
   correct universal fix rather than un-doing display:contents (which exists to
   stop height:100% collapsing) or patching one section. Applies to all 21 pages
   that use <picture>. */
picture > source{ display:none; }

/* ---- Touch targets ------------------------------------------------------- */
/* Mobile nav toggle measured 38x38 (26px icon + 6px padding); the minimum is
   44x44. Page rules never set min-width/min-height, so this applies cleanly
   across all 25 pages without overriding their layout. */
.navtoggle{ min-width:44px; min-height:44px; justify-content:center; }

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }

/* ---- Target size (WCAG 2.5.8 AA) --------------------------------------
   Nav-component links are not "inline prose", so the 24px minimum applies.
   Inline links inside paragraphs are exempt and deliberately left alone.
   Selectors are DOUBLED because tokens.css loads before each page's inline
   <style>, so an equal-specificity rule here would silently lose. */
.util .item.item{ min-height:24px; }
footer .flinks.flinks a{ min-height:24px; display:inline-flex; align-items:center; }
.crumbs.crumbs a{ min-height:24px; display:inline-flex; align-items:center; }