/* Fraunces — SIL OFL 1.1 (fraunces-OFL.txt), Fontsource's Latin subset, served by the site itself.
   The renderer prepends this file to css/look.css and copies the woff2 files to fonts/,
   so the url() is relative to css/. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/fraunces-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Plus Jakarta Sans — SIL OFL 1.1 (plus-jakarta-sans-OFL.txt), Fontsource's Latin subset, served by the site itself.
   The renderer prepends this file to css/look.css and copies the woff2 files to fonts/,
   so the url() is relative to css/. */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(../fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Look: Linen. A cafe, a bakery, a family kitchen, a small maker's shop: daylight on a table.
   One idea: a linen tea towel. A light warm ground like washed linen, one confident block of tomato
   red (the hero's ground, the band, the call), the towel's woven stripe under the header and over the
   footer, a running stitch for the labels, soft round shapes and a friendly bold serif.
   No ancestor. Tokens first; the rules after them are this look's bounded set: the stripe, the
   stitch kicker, the hero, the proof line, the band's stitched hem, the buttons, the shelf, the form card. */

:root {
  --bg: #f4efe6;              /* washed linen */
  --bg-raised: #fffcf7;
  --bg-alt: #ebe3d5;          /* oatmeal */
  --bg-line: #d9cdb9;
  --ink: #2b1e17;
  --ink-dim: #65554a;
  --accent: #b93a25;          /* tomato: the block and the call */
  --accent-strong: #9c2f1d;
  --accent-ink: #ffffff;
  --accent-text: #a8341f;     /* tomato as small text on linen and oatmeal */
  --band: #b93a25;            /* the colour block is the band: the menu board, the about, the call */
  --band-ink: #fffaf3;
  --band-dim: #fdece4;
  --band-accent: #fff3d1;     /* butter, pale enough to read on tomato */
  /* the hero's own pair, as literals so a checker reads the pair the page shows: linen white on tomato */
  --hero-ground: #b93a25;
  --hero-ink: #fffaf3;
  --hero-dim: #fdece4;
  --hero-accent: #fff3d1;
  --hero-scrim: #3d1c13;      /* over a photo the words sit on a deep warm brown, not on red */
  --proof-bg: var(--bg-alt);
  --proof-mark: var(--accent);
  --proof-glyph: "•";   /* a dot: a cross read as "no" beside "Takeout all day" (the B256 judge) */
  --footer-bg: #2b1e17;
  --footer-ink: #e9dfd0;
  --rule-strong: 1px solid #b9a88f;
  --stripe: linear-gradient(var(--accent) 0 3px, transparent 3px 7px, var(--accent) 7px 9px);
  /* a fine weave, drawn here so no file is fetched */
  --texture: repeating-linear-gradient(0deg, rgb(255 255 255 / 0.05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgb(0 0 0 / 0.035) 0 1px, transparent 1px 4px);

  --font-display: "Fraunces", Georgia, serif;
  --font-text: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-kicker: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-button: "Plus Jakarta Sans", system-ui, sans-serif;
  --display-weight: 680;
  --heading-weight: 650;
  --display-tracking: -0.02em;
  --display-leading: 1;
  --kicker-case: none;
  --kicker-tracking: 0.01em;
  --kicker-weight: 700;
  --kicker-size: var(--step--1);
  --button-weight: 700;
  --text-leading: 1.65;
  --step-5: clamp(2.8rem, 1.7rem + 4.4vw, 5.25rem);

  --radius: 12px; --radius-card: 20px; --radius-btn: 999px; --radius-media: 20px;
  --shadow-2: 0 1px 0 rgb(43 30 23 / 0.06), 0 22px 44px -28px rgb(90 50 30 / 0.4);
}

body { word-spacing: 0.06em; }   /* Plus Jakarta's space is narrow: small text ran its words together */

/* The towel's woven stripe: under the header and over the footer. */
.site-header { border-bottom: 0; background-image: var(--stripe); background-size: 100% 9px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: calc(0.6rem + 9px); }
.site-footer { position: relative; padding-top: calc(var(--space-3) + 9px); background-image: var(--stripe); background-size: 100% 9px; background-repeat: no-repeat; }
.wordmark { font-weight: 700; letter-spacing: -0.015em; }

/* Kickers: a running stitch, then the words in tomato. */
.kicker, .hero-kicker { display: flex; align-items: center; gap: 0.6rem; }
.kicker::before, .hero-kicker::before {
  content: ""; flex: none; width: 2.1rem; height: 2px; background: repeating-linear-gradient(90deg, currentColor 0 7px, transparent 7px 11px);
}

/* Hero: on tomato the words are linen white and the call turns linen; on a photo card it stays tomato. */
:is(.hero--split, .hero--typographic, .hero--full-dark) .btn-primary { background: var(--hero-ink); color: var(--accent-strong); }
:is(.hero--split, .hero--typographic, .hero--full-dark) .btn-primary:hover { background: #ffffff; color: var(--accent-strong); }
.hero--split { background-image: var(--texture); }
.hero--split .hero-media { margin: 0 var(--page-pad) var(--page-pad); border-radius: var(--radius-media); }
@media (min-width: 56em) { .hero--split .hero-media { margin: var(--space-2) var(--page-pad) var(--space-2) 0; } }
.hero--band-card .hero-copy { border-top: 6px solid var(--accent); }
.hero-heading em { font-style: normal; text-decoration: underline 0.08em; text-underline-offset: 0.12em; color: inherit; }

/* Proof: one typeset line between the stripe and a fine rule. */
.proof--inline .proof-list { border-top: 0; background: var(--stripe) top / 100% 9px no-repeat; padding-top: calc(0.9rem + 9px); font-weight: 600; }
.proof--strip .proof-list { font-weight: 700; }

/* The band is the colour block, hemmed with a running stitch just inside its edge. Inside a tomato ground
   a card or a tile is a deeper tomato, not a paler one, so the linen-white words keep AA on it. */
.band, .contact-card, .cta--band, .donate--band {
  --bg: color-mix(in srgb, #000 8%, var(--band)); --bg-alt: var(--bg); --bg-raised: color-mix(in srgb, #000 14%, var(--band));
  --ink-dim: var(--band-dim);
}
.band:not(.hero-block), .cta--band, .donate--band {
  --hem: repeating-linear-gradient(90deg, rgb(255 250 243 / 0.6) 0 9px, transparent 9px 15px);
  background-image: var(--hem), var(--hem), var(--texture);
  background-size: 100% 2px, 100% 2px, auto; background-position: 0 12px, 0 calc(100% - 12px), 0 0; background-repeat: no-repeat, no-repeat, repeat;
}
.band .about-media img, .band .section-media img { box-shadow: 0 24px 50px -24px rgb(40 10 0 / 0.55); }
.band .btn-primary { background: var(--band-ink); color: var(--accent-strong); }
.band .btn-primary:hover { background: #ffffff; color: var(--accent-strong); }

/* The shelf: each product a kraft gift tag, a punched hole in its corner and the price set large. */
.shop--shelf .catalog-strip { gap: 0.6rem; }
.shop--shelf .catalog-item { position: relative; padding-right: 2.6rem; background: var(--bg-alt); border-radius: 6px; }
.shop--shelf.alt .catalog-item { background: var(--bg-raised); }
.shop--shelf .catalog-item::after {
  content: ""; position: absolute; top: 1.1rem; right: 1.1rem; width: 0.8rem; height: 0.8rem; border-radius: 50%;
  background: var(--bg); box-shadow: inset 0 1px 2px rgb(43 30 23 / 0.3), 0 0 0 3px color-mix(in srgb, var(--bg-line) 60%, transparent);
}
.shop--shelf .price { font: 700 var(--step-1)/1.1 var(--font-display); }
.shop-list .shop-name { font: 650 var(--step-1)/1.25 var(--font-display); }
.menu--board .price, .shop-list .price { font-weight: 700; }
.shop-section, .shop-list .price { color: var(--accent-text); }
.shop-qty button { border-radius: 50%; }

/* Services, when a shop has them: oatmeal blocks cut like the tags. */
.services--blocks .service-list li { border-radius: 6px; background: var(--bg-alt); }

/* Forms: a raised card with the stripe across its top; a picked time goes tomato. */
.form-card { background-image: var(--stripe); background-size: 100% 9px; background-repeat: no-repeat; padding-top: calc(clamp(1.25rem, 3vw, 2.25rem) + 9px); overflow: hidden; }
.slot-tile:has(input:checked) { background: var(--accent); border-color: var(--accent); }
.slot-tile:has(input:checked) :is(.slot-day, .slot-time, .slot-note) { color: var(--accent-ink); }