/* DM Serif Display — SIL OFL 1.1 (dm-serif-display-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: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/dm-serif-display-latin-400-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; }

/* Space Grotesk — SIL OFL 1.1 (space-grotesk-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: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/space-grotesk-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: Small Batch. A maker's shop: candles, soap, ceramics, a gift shop where things are made by hand,
   a few at a time.
   One idea: the shop's own label. The page is coloured stock (clay), printed in one ink (oxblood), with a
   vermilion rubber stamp for the action; labels are stamped askew, cards are sewn-in labels with a stitched
   edge, the products read as a price list with dotted leaders, and the hours are stamped "open now".
   No ancestor. Not Heritage (no cream, no italic, no green, no double rule) and not Editorial (a coloured
   page, not a white one; a stamp, not a rust spot): DM Serif Display, a fat face like a printed label,
   over Space Grotesk, whose typewriter bones set the prices and the stamped capitals.
   Tokens first; the rules after them are this look's bounded set: the stock, the stamp, the seal, the
   label card, the price list, the hang tags, the form card, the open-now stamp and the one moment. */

:root {
  --bg: #f2dfd3;              /* clay stock: the page has a colour of its own */
  --bg-raised: #fbf1ea;       /* the label: tiles, cards, inputs */
  --bg-alt: #ebd2c4;
  --bg-line: #c99f8d;
  --ink: #2a1418;             /* oxblood ink */
  --ink-dim: #66404a;
  --accent: #a62a17;          /* the stamp: buttons, the contact card, the stamped labels */
  --accent-strong: #86200f;
  --accent-ink: #fff6ef;
  --accent-text: #a12a18;
  --band: #3b1820;            /* oxblood: the one dark ground */
  --band-ink: #fbeee6;
  --band-dim: #dcbdb5;
  --band-accent: #f7a98f;
  /* the hero's own pair, as literals so a checker reads the pair the page shows: the split and typographic
     heroes set the words on the oxblood ground */
  --hero-ground: #3b1820;
  --hero-ink: #fbeee6;
  --hero-dim: #dcbdb5;
  --hero-accent: #f7a98f;
  --hero-scrim: #2a1015;
  --proof-bg: #3b1820;
  --proof-ink: #fbeee6;
  --proof-mark: #f7a98f;
  --proof-glyph: "/";
  --footer-bg: var(--band);
  --footer-ink: #e6cdc5;
  --stitch: 1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  --rule-strong: 1.5px solid var(--ink);
  --photo-filter: saturate(0.94) sepia(0.06);
  /* recycled stock: a few flecks, drawn here so no file is fetched */
  --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cg fill='%232a1418' fill-opacity='.11'%3E%3Ccircle cx='14' cy='22' r='1.1'/%3E%3Ccircle cx='71' cy='9' r='.7'/%3E%3Ccircle cx='128' cy='41' r='1.3'/%3E%3Ccircle cx='38' cy='88' r='.8'/%3E%3Ccircle cx='97' cy='72' r='1'/%3E%3Ccircle cx='154' cy='118' r='.7'/%3E%3Ccircle cx='60' cy='139' r='1.2'/%3E%3Ccircle cx='117' cy='157' r='.8'/%3E%3Ccircle cx='9' cy='151' r='.9'/%3E%3C/g%3E%3C/svg%3E");

  --font-display: "DM Serif Display", Georgia, serif;
  --font-text: "Space Grotesk", system-ui, sans-serif;
  --font-kicker: "Space Grotesk", system-ui, sans-serif;
  --font-button: "Space Grotesk", system-ui, sans-serif;
  --display-weight: 400;
  --heading-weight: 400;
  --display-tracking: -0.012em;
  --display-leading: 1;
  --kicker-case: uppercase;
  --kicker-tracking: 0.16em;
  --kicker-weight: 600;
  --kicker-size: var(--step--2);
  --button-weight: 600;
  --button-case: uppercase;
  --button-tracking: 0.1em;
  --text-leading: 1.6;
  --step-5: clamp(2.75rem, 1.7rem + 4.8vw, 5.75rem);

  --radius: 3px;
  --radius-card: 4px;
  --radius-btn: 3px;
  --radius-media: 4px;
  --shadow-2: 0 1px 0 rgb(42 20 24 / 0.08), 0 22px 40px -26px rgb(59 24 32 / 0.6);
  --lift: -2px;
}

body { background-image: var(--texture); }

/* The stamp: section labels (and the open-now line) in spaced capitals in a ruled box, pressed on a little askew. */
.kicker, .hero-kicker, .open-now {
  width: fit-content; padding: 0.3em 0.65em 0.25em; border: 1.5px solid currentColor; border-radius: 2px; transform: rotate(-2deg);
}

/* The header: the name after a wax seal, a stitched edge under it. */
.site-header { border-bottom: 1.5px dashed color-mix(in srgb, var(--ink) 30%, transparent); }
.wordmark::before { content: ""; flex: none; width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: var(--accent); box-shadow: inset 0 0 0 2.5px var(--accent), inset 0 0 0 3.5px var(--accent-ink); }

/* Hero: the words on a sewn-in label laid over the photo; on a ground of its own, the photo is matted. */
.hero--band-card .hero-copy { outline: var(--stitch); outline-offset: -10px; }
.hero--split .hero-media img, .band .about-media img { outline: 1.5px dashed rgb(251 238 230 / 0.5); outline-offset: -10px; }
.hero--typographic .hero-heading { max-width: 12ch; }

/* The price list: each name joined to its price by a dotted leader, the price in the typewriter face. */
:is(.shop--list, .menu--list, .shop-item) .shop-name > span:first-child { display: flex; flex: 1; align-items: baseline; gap: 0.5rem; min-width: 0; }
:is(.shop--list, .menu--list, .shop-item) .shop-name > span:first-child::after { content: ""; flex: 1; min-width: 1.5rem; border-bottom: 2px dotted var(--bg-line); }
@media (max-width: 40em) { .shop-item .shop-name > span:first-child::after { content: none; } }   /* beside the basket buttons the name needs the room */
.price { font-family: var(--font-text); font-weight: 600; letter-spacing: 0.02em; }
:is(.shop--list, .menu--list) .catalog-item { border-top: var(--rule-strong); }
.shop-item .shop-name { font: 400 var(--step-1)/1.2 var(--font-display); }
.shop-section { padding-bottom: 0.4rem; border-bottom: var(--rule-strong); }

/* The shelf: each product a hang tag, its edge sewn and a hole punched for the string. */
.shop--shelf .catalog-item { position: relative; padding-top: 2.4rem; border-radius: var(--radius-card); outline: var(--stitch); outline-offset: -7px; }
.shop--shelf .catalog-item::before { content: ""; position: absolute; top: 1rem; left: 1.25rem; width: 0.75rem; height: 0.75rem;
  border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--bg-line); }
.shop--shelf.alt .catalog-item::before { background: var(--bg-alt); }

/* Proof: on the page, a typeset line between rules, its marks in the stamp's colour. */
.proof--inline { --proof-mark: var(--accent-text); }

/* Forms and the basket: a label, stitched. */
.form-card { outline: var(--stitch); outline-offset: -9px; }
.contact-card { outline: 1.5px dashed rgb(255 246 239 / 0.55); outline-offset: -10px; }

/* Open now: stamped like the labels (the stamp rule above), red when open, ink when closed. */
.open-now { font: 600 var(--kicker-size)/1.3 var(--font-kicker); text-transform: uppercase; letter-spacing: var(--kicker-tracking); }
.open-now.is-closed { color: var(--ink-dim); }

/* The one moment: as the fonts arrive, the label on the hero is pressed on, from a little askew to
   straight, the way a label goes on a jar. It is whole and readable the whole time. */
@media (prefers-reduced-motion: no-preference) {
  html.motion .hero--band-card .hero-copy { transform: rotate(-1.4deg) translateY(6px); transition: transform var(--dur-moment) var(--ease); }
  html.motion body.is-ready .hero--band-card .hero-copy { transform: none; }
}