/* Sweet Meat Butcher Shop: the one stylesheet for the public site.

   Direction: "Saturday at the pole barn". Butcher paper ground, a chalkboard
   that changed twice today, manila price tags, photos held in mats or pinned
   up with tape. Tokens are defined once below; nothing else in the site
   carries a raw colour. Contrast pairs are listed in docs/DESIGN.md and
   tested by tools/check.mjs.

   Shape rule: interactive controls are pills, panels and mats take a 3px
   corner, the chalkboard takes a 10px frame, tags have their own cut.

   Sections of this file, in order: fonts, tokens, reset, type, layout,
   header, menu dialog, announcement, buttons and links, hero, page heads,
   the board (tags, groups, statuses), cut chart, photo mats, home bands,
   content pages, hours and visit, footer, inquiry dialog and forms, motion,
   contrast, forced colours, print. */

/* ------------------------------------------------------------ fonts */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("/assets/fonts/caveat-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------ tokens */

:root {
  --paper: #F5ECDC;
  --paper-deep: #EADCC3;
  --cream: #FBF6EC;
  --ink: #1C1715;
  --ink-soft: #3A332E;
  --muted: #5F574F;
  --ember: #A5301D;
  --ember-deep: #7F2416;
  --mustard: #E2A72E;
  --board: #222826;
  --chalk: #F3EFE6;
  --ok: #2F6B3A;
  --warn: #9A5A0B;
  --out: #8A2A2A;
  --soon: #3B5A8A;
  --focus: #1C5FD6;

  --font-display: "Bricolage Grotesque", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Instrument Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;

  --step--1: 0.889rem;
  --step-0: 1.125rem;
  --step-1: 1.406rem;
  --step-2: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  --step-3: clamp(2rem, 1.3rem + 2.6vw, 3.2rem);
  --step-4: clamp(2.5rem, 1.4rem + 4.4vw, 4.6rem);
  --step-5: clamp(3rem, 1.2rem + 6.6vw, 6.2rem);

  --gutter: 16px;
  --wrap: 1180px;
  --section: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --radius: 3px;
  --pill: 999px;
  --hairline: color-mix(in srgb, var(--ink) 22%, transparent);
  --shadow: 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent), 0 14px 30px -18px color-mix(in srgb, var(--ink) 45%, transparent);

  /* Hand drawn strokes, used as masks so the colour always comes from a token. */
  --stroke-rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M3 8c30-3 62-5 96-4s58 4 92 2 64-5 106-3' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --stroke-chalk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M4 15c34-6 74-9 118-8 28 1 50 3 74 1' fill='none' stroke='black' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M14 20c40-4 84-5 124-3 18 1 34 1 50-1' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E");
  --cleaver: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform='rotate(-18 24 24)'%3E%3Cpath fill-rule='evenodd' d='M5 13.5h23.5a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H11c-3.3 0-6-2.7-6-6v-11Zm5.2 4.2a2 2 0 1 0 0 .1Z'/%3E%3Crect x='30' y='15.2' width='14.5' height='5.2' rx='2.4'/%3E%3C/g%3E%3C/svg%3E");
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ reset */

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 6rem;
}
html:has(dialog[open]) { overflow: hidden; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  font-kerning: normal;
  overflow-wrap: break-word;
}
/* Butcher paper grain at 4%, fixed so it never repaints on scroll. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--grain);
  opacity: 0.04;
}
#page { position: relative; z-index: 1; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
p, ul, ol, dl, figure, blockquote, table { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
h1, h2, h3, h4 { margin: 0; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* One focus ring for every surface: a 2px cream halo inside a 3px --focus
   ring. The blue carries it on paper, the halo carries it on the board and
   the ink panels. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--cream);
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 0.75rem;
  z-index: 100;
  padding: 0.7rem 1.2rem;
  border-radius: var(--pill);
  background: var(--ink);
  color: var(--cream);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ------------------------------------------------------------ type */

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 760;
  font-stretch: 88%;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); font-weight: 800; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); line-height: 1.15; font-weight: 700; }
p { text-wrap: pretty; }
.lede {
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
  line-height: 1.45;
  max-width: 38ch;
}
.prose { max-width: 65ch; }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 2.2em; font-size: var(--step-2); }
.prose h3 { margin-top: 1.8em; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 0.35em; }
.muted { color: var(--muted); }
.aside {
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--ember);
}

/* The mustard chalk underline under the words that matter in an h1. */
.chalk {
  position: relative;
  display: inline-block;
  z-index: 0;
}
.chalk::after {
  content: "";
  position: absolute;
  left: -0.04em;
  right: -0.06em;
  bottom: -0.1em;
  height: 0.26em;
  z-index: -1;
  background: var(--mustard);
  -webkit-mask: var(--stroke-chalk) no-repeat 0 0 / 100% 100%;
  mask: var(--stroke-chalk) no-repeat 0 0 / 100% 100%;
}

/* ------------------------------------------------------------ layout */

.wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}
@media (min-width: 48rem) {
  :root { --gutter: 32px; }
}
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * 0.6); }
.band { background: var(--paper-deep); }
.stack > * + * { margin-top: var(--stack, 1rem); }

/* ------------------------------------------------------------ header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.site-header.is-condensed { border-bottom-color: var(--hairline); }
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 72px;
  padding-block: 10px;
  transition: min-height 0.25s ease, padding 0.25s ease;
}
.site-header.is-condensed .site-header__inner { min-height: 60px; padding-block: 8px; }

/* The shop's badge. Its small lettering is not legible at header size, so
   the name lives in the alt text. 52px tall on phones, 64px from 48rem, one
   step smaller once the header condenses. */
.wordmark {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-right: auto;
  border-radius: var(--radius);
}
.wordmark img {
  width: auto;
  height: 52px;
  transition: height 0.25s ease;
}
.site-header.is-condensed .wordmark img { height: 44px; }
@media (min-width: 48rem) {
  .site-header__inner { min-height: 84px; }
  .site-header.is-condensed .site-header__inner { min-height: 66px; }
  .wordmark img { height: 64px; }
  .site-header.is-condensed .wordmark img { height: 50px; }
}

.site-nav { display: none; }
.site-nav ul { display: flex; gap: 0.25rem; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.8rem;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  text-underline-offset: 0.35em;
  text-decoration-thickness: 2px;
  border-radius: var(--pill);
}
.site-nav a:hover { text-decoration-line: underline; }
.site-nav a[aria-current="page"] {
  font-weight: 650;
  text-decoration-line: underline;
  text-decoration-color: var(--ember);
  text-decoration-thickness: 3px;
}
.header-actions .header-call { display: none; }
.site-nav ul, .menu-dialog ul, .footer-list, .social { list-style: none; margin: 0; padding: 0; }
.header-actions { display: flex; align-items: center; gap: 0.5rem; }
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.9rem;
  border: 1.5px solid var(--ink);
  border-radius: var(--pill);
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { background: var(--ink); color: var(--cream); }
.icon-btn--round { padding: 0; }

@media (min-width: 64rem) {
  .site-nav { display: block; }
  .header-actions .header-call { display: inline-flex; }
  .menu-toggle, .header-phone { display: none; }
}

/* ------------------------------------------------------------ menu dialog */

.menu-dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--ink);
  color: var(--cream);
}
.menu-dialog::backdrop { background: color-mix(in srgb, var(--ink) 60%, transparent); }
.menu-dialog__inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 1rem var(--gutter) 2rem;
}
.menu-dialog__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 60px;
}
.menu-dialog__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 90%;
  font-size: 1.3rem;
}
.menu-dialog .icon-btn { border-color: var(--cream); color: var(--cream); }
.menu-dialog .icon-btn:hover { background: var(--cream); color: var(--ink); }
.menu-dialog nav { margin-top: 1.5rem; }
.menu-dialog nav a {
  display: block;
  padding: 0.3rem 0;
  font-family: var(--font-display);
  font-weight: 760;
  font-stretch: 80%;
  font-size: clamp(2.2rem, 11vw, 3.4rem);
  line-height: 1.1;
  color: var(--cream);
  text-decoration: none;
  text-underline-offset: 0.12em;
  text-decoration-thickness: 3px;
}
.menu-dialog nav a:hover { text-decoration-line: underline; }
.menu-dialog nav a[aria-current="page"] { text-decoration-line: underline; text-decoration-color: var(--mustard); }
.menu-dialog__foot {
  margin-top: auto;
  padding-top: 2rem;
  display: grid;
  gap: 0.75rem;
  color: var(--chalk);
}
.menu-dialog__foot .aside { color: var(--mustard); }

/* ------------------------------------------------------------ announcement */

[data-announcement] {
  position: relative;
  z-index: 19;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 650;
  font-stretch: 90%;
  font-size: 1.05rem;
  text-align: center;
  padding: 0.65rem var(--gutter);
}
[data-announcement]::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.55em;
  vertical-align: -0.12em;
  background: var(--mustard);
  -webkit-mask: var(--star) center / contain no-repeat;
  mask: var(--star) center / contain no-repeat;
}

/* ------------------------------------------------------------ buttons and links */

a { color: var(--ember); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--ember-deep); text-decoration-thickness: 2px; text-underline-offset: 0.26em; }
/* Standalone links (nav lists, footer, headings) underline only on hover. */
.plain-link, .plain-links a { text-decoration: none; }
.plain-link:hover, .plain-links a:hover { text-decoration: underline; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.7rem 1.45rem;
  border: 2px solid transparent;
  border-radius: var(--pill);
  font-family: var(--font-body);
  font-weight: 650;
  font-size: 1.05rem;
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--ember); color: var(--cream); }
.btn--primary:hover { background: var(--ember-deep); color: var(--cream); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); }
.on-dark .btn--ghost { color: var(--cream); border-color: var(--cream); }
.on-dark .btn--ghost:hover { background: var(--cream); color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.text-link {
  font-weight: 650;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}
.on-dark a:not(.btn) { color: var(--cream); }
.on-dark a:not(.btn):hover { color: var(--cream); }

/* ------------------------------------------------------------ home hero */

.hero { padding-top: clamp(1rem, 3vw, 2.5rem); padding-bottom: clamp(1rem, 3vw, 2.5rem); }
.hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
}
.hero__photo { grid-column: 1 / -1; grid-row: 1; }
.hero__panel {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: -3.5rem;
  margin-inline: 0.5rem;
  position: relative;
  z-index: 2;
  background: var(--ink);
  color: var(--cream);
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero__panel::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid color-mix(in srgb, var(--cream) 22%, transparent);
  border-radius: 2px;
  pointer-events: none;
}
.hero h1 {
  font-size: var(--step-5);
  font-stretch: 75%;
  line-height: 0.94;
  letter-spacing: -0.01em;
}
.hero h1 span { display: block; }
.hero h1 .chalk { display: inline-block; }
.hero__lede { margin-top: 1.1rem; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem); max-width: 30ch; }
.hero .btn-row { margin-top: 1.6rem; }
.hero__note {
  position: absolute;
  right: 1.4rem;
  top: -1.1rem;
  transform: rotate(-4deg);
  background: var(--cream);
  color: var(--ember);
  padding: 0.15rem 0.8rem 0.3rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
@media (min-width: 60rem) {
  .hero__photo { grid-column: 4 / -1; grid-row: 1; }
  .hero__panel {
    grid-column: 1 / 8;
    grid-row: 1;
    margin: 0 0 -2.5rem;
    align-self: end;
  }
}

/* ------------------------------------------------------------ page heads */

.page-head { padding-top: clamp(2rem, 5vw, 4.5rem); padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.page-head__grid { display: grid; gap: 2rem; align-items: end; }
.page-head h1 { max-width: 16ch; }
.page-head .lede { margin-top: 1.25rem; }
.page-head .aside { margin-top: 1rem; }
@media (min-width: 56rem) {
  .page-head__grid { grid-template-columns: 1.25fr 1fr; gap: 3rem; }
  .page-head__grid--flip { grid-template-columns: 1fr 1.1fr; }
}

.jump-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.75rem;
}
.jump-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 1.1rem;
  border: 1.5px solid var(--ink);
  border-radius: var(--pill);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.jump-links a:hover { background: var(--ink); color: var(--cream); }

/* ------------------------------------------------------------ the board */

.board {
  position: relative;
  background:
    radial-gradient(120% 70% at 20% 0%, color-mix(in srgb, var(--chalk) 6%, transparent), transparent 60%),
    radial-gradient(90% 60% at 85% 100%, color-mix(in srgb, var(--chalk) 4%, transparent), transparent 70%),
    var(--board);
  color: var(--chalk);
  border: 10px solid var(--ink-soft);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chalk) 10%, transparent), var(--shadow);
  padding: clamp(1.25rem, 3.5vw, 2.75rem);
}
.board a { color: var(--chalk); }
.board__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 0.5rem 1.5rem; }
/* Hand drawn rule under a board heading: a mustard stroke drawn by a mask on
   a pseudo element, so the heading text itself stays chalk. */
.board__title, .board-group__title {
  position: relative;
  color: var(--chalk);
  font-stretch: 78%;
  padding-bottom: 0.45em;
}
.board__title::after, .board-group__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(100%, 14rem);
  height: 0.5rem;
  background: var(--mustard);
  -webkit-mask: var(--stroke-rule) no-repeat 0 0 / 100% 100%;
  mask: var(--stroke-rule) no-repeat 0 0 / 100% 100%;
}
.board__note { font-family: var(--font-hand); font-size: 1.55rem; color: var(--mustard); line-height: 1.1; }
.board-meta {
  margin-top: 1.25rem;
  font-size: var(--step--1);
  color: var(--muted);
}
.board .board-meta, .on-dark .board-meta { color: var(--chalk); }
.board-fallback {
  max-width: 52ch;
  font-size: 1.1rem;
}
.board-fallback strong { font-family: var(--font-display); font-stretch: 85%; font-size: 1.35rem; display: block; margin-bottom: 0.3rem; }

/* Featured tags: manila price tags hanging on the board. */
.tags {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  gap: 1.6rem 1.4rem;
  margin-top: 1.75rem;
}
.tag {
  --hole: 1.3rem;
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.35rem;
  padding: 1rem 1.1rem 1.05rem 2.7rem;
  color: var(--ink);
  background:
    radial-gradient(circle at var(--hole) 50%, var(--paper-deep) 0.62rem, transparent 0.66rem),
    var(--cream);
  clip-path: polygon(1.5rem 0, 100% 0, 100% 100%, 1.5rem 100%, 0 calc(100% - 1.1rem), 0 1.1rem);
  -webkit-mask: radial-gradient(circle at var(--hole) 50%, transparent 0.36rem, black 0.4rem);
  mask: radial-gradient(circle at var(--hole) 50%, transparent 0.36rem, black 0.4rem);
  transform: rotate(-1.1deg);
  transform-origin: 0 50%;
}
.tag:nth-child(3n + 2) { transform: rotate(0.9deg); }
.tag:nth-child(3n + 3) { transform: rotate(-0.4deg); }
.tag__name {
  font-family: var(--font-display);
  font-weight: 720;
  font-stretch: 82%;
  font-size: 1.3rem;
  line-height: 1.08;
}
.tag__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 85%;
  font-size: 1.85rem;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.tag__unit {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--muted);
  letter-spacing: 0;
}
.tag .status { justify-self: start; margin-top: 0.25rem; }
.tag:has(.status--out) .tag__name { text-decoration: line-through; text-decoration-thickness: 2px; }

/* Full board groups on /counter and /smokehouse. */
.board-group__title { font-size: var(--step-2); margin-bottom: 1rem; }
.board-list > li + li { border-top: 1.5px dashed color-mix(in srgb, var(--chalk) 30%, transparent); }
.board-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1rem;
  row-gap: 0.2rem;
  padding-block: 0.8rem;
}
.board-item__name {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 82%;
  font-size: 1.28rem;
  line-height: 1.15;
}
.board-item__name::after {
  content: "";
  flex: 1 1 1.5rem;
  min-width: 1.5rem;
  border-bottom: 2px dotted color-mix(in srgb, var(--chalk) 45%, transparent);
  transform: translateY(-0.25em);
}
.board-item__price {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  font-family: var(--font-display);
  font-weight: 760;
  font-stretch: 85%;
  font-size: 1.28rem;
  line-height: 1.15;
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}
.board-item__price .tag__unit, .board-item__unit { color: var(--chalk); font-size: 0.9rem; font-weight: 500; font-family: var(--font-body); }
.board-item__desc { grid-column: 1; grid-row: 2; font-size: 1rem; line-height: 1.45; }
/* An item note ("back Thursday") is information, so it is set in the body
   face; Caveat is kept for decorative asides only. */
.board-item__note {
  grid-column: 1;
  grid-row: 3;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--mustard);
}
.board-item .status { grid-column: 2; grid-row: 2 / span 2; justify-self: end; align-self: start; margin-top: 0.2rem; }
.board-item--out .board-item__name { text-decoration: line-through; text-decoration-thickness: 2px; }
.board-empty { font-style: italic; padding-block: 0.5rem; }
/* The line under the board while the prices are still samples: muted on
   paper, chalk on the board (muted would not hold contrast there). */
.board-sample {
  margin-top: 1.25rem;
  font-size: var(--step--1);
  font-style: italic;
  color: var(--muted);
}
.board .board-sample, .on-dark .board-sample { color: var(--chalk); }
@media (max-width: 30rem) {
  .board-item .status { grid-column: 1 / -1; grid-row: 4; justify-self: start; }
}

/* Status: text plus a shape, never colour alone.
   in: filled dot. low: half dot. out: hollow dot (and the name is struck).
   soon: dashed ring. Always on a chalk chip so the colours keep 4.5:1. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.18em 0.7em 0.2em 0.55em;
  border-radius: var(--pill);
  background: var(--chalk);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.25;
  white-space: nowrap;
}
.status__dot {
  width: 0.72em;
  height: 0.72em;
  flex: none;
  border-radius: 50%;
  border: 2px solid currentColor;
}
.status--in { color: var(--ok); }
.status--in .status__dot { background: currentColor; }
.status--low { color: var(--warn); }
.status--low .status__dot { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.status--out { color: var(--out); }
.status--out .status__dot { background: transparent; }
.status--soon { color: var(--soon); }
.status--soon .status__dot { border-style: dashed; border-width: 2px; width: 0.85em; height: 0.85em; }

/* ------------------------------------------------------------ cut chart */

.cuts {
  display: grid;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 60rem) {
  .cuts { grid-template-columns: 1.7fr 1fr; gap: 3rem; }
}
.cuts__charts { display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { .cuts__charts { grid-template-columns: 1fr 1fr; } }
.cut-chart {
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1rem 0.75rem 0.75rem;
}
.cut-chart__label {
  font-family: var(--font-display);
  font-weight: 760;
  font-stretch: 80%;
  font-size: 1.35rem;
  padding-inline: 0.5rem;
}
.cut-chart svg { width: 100%; height: auto; overflow: visible; }
.cut-chart .body-part { fill: var(--paper-deep); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.cut-chart .primal path, .cut-chart .primal polygon {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
  transition: fill 0.15s ease;
}
.cut-chart .primal text {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 80%;
  font-size: 17px;
  fill: var(--ink);
  pointer-events: none;
}
.cut-chart a.primal:hover path, .cut-chart a.primal:hover polygon,
.cut-chart a.primal:focus-visible path, .cut-chart a.primal:focus-visible polygon { fill: var(--mustard); }
.cut-chart a.primal:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cut-chart a.primal:focus-visible path, .cut-chart a.primal:focus-visible polygon { stroke: var(--focus); stroke-width: 4; }
.cut-list h3 { font-size: 1.3rem; }
.cut-list ul { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; }
.cut-list li a { display: inline-flex; min-height: 32px; align-items: center; font-weight: 600; }
.cut-list > div + div { margin-top: 1.5rem; }

/* ------------------------------------------------------------ photo mats */

/* A photo is never a bare rectangle: a cream mat, a hairline frame and an
   inset rule. .slot--tilt pins it up with two strips of tape, .slot--arch
   rounds the top like the barn door. If the file is missing, the frame shows
   a paper-deep panel with the cleaver, and the broken image is covered. */
.slot {
  --tilt: 0deg;
  position: relative;
  background: var(--cream);
  padding: clamp(8px, 1.2vw, 14px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transform: rotate(var(--tilt));
}
.slot__frame {
  position: relative;
  overflow: hidden;
  background: var(--paper-deep);
  aspect-ratio: 4 / 3;
}
.slot--wide .slot__frame { aspect-ratio: 16 / 10; }
.slot--tall .slot__frame { aspect-ratio: 4 / 5; }
.slot__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(48px, 16%, 88px);
  height: clamp(48px, 16%, 88px);
  background: var(--muted);
  opacity: 0.55;
  -webkit-mask: var(--cleaver) center / contain no-repeat;
  mask: var(--cleaver) center / contain no-repeat;
}
.slot__frame::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid color-mix(in srgb, var(--cream) 55%, transparent);
  pointer-events: none;
  z-index: 2;
}
.slot img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
  color: transparent;
  font-size: 0;
}
/* Chrome and Firefox render pseudo elements only on an image that failed to
   load: paint the fallback panel over the broken image icon. */
.slot img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper-deep);
}
.slot img::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 22%;
  height: 22%;
  background: var(--muted);
  opacity: 0.55;
  -webkit-mask: var(--cleaver) center / contain no-repeat;
  mask: var(--cleaver) center / contain no-repeat;
}
.slot figcaption {
  padding: 0.6rem 0.2rem 0.1rem;
  font-size: 0.95rem;
  color: var(--muted);
}
.slot--tilt { --tilt: -1.8deg; }
.slot--tilt-right { --tilt: 1.6deg; }
.slot--tilt::before, .slot--tilt::after,
.slot--tilt-right::before, .slot--tilt-right::after {
  content: "";
  position: absolute;
  z-index: 3;
  width: 5.5rem;
  height: 1.6rem;
  background: color-mix(in srgb, var(--paper-deep) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.slot--tilt::before, .slot--tilt-right::before { top: -0.7rem; left: 12%; transform: rotate(-5deg); }
.slot--tilt::after, .slot--tilt-right::after { top: -0.6rem; right: 10%; transform: rotate(6deg); }
.slot--arch { padding-top: clamp(10px, 1.4vw, 16px); border-radius: 999px 999px var(--radius) var(--radius); }
.slot--arch .slot__frame { border-radius: 999px 999px 0 0; aspect-ratio: 4 / 5; }
.slot--arch .slot__frame::after { border-radius: 999px 999px 0 0; }
.slot--bare-shadow { box-shadow: none; }

/* ------------------------------------------------------------ home bands */

.case-today__intro { max-width: 46ch; margin-top: 0.9rem; }
.case-today__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: 1.75rem;
}
.case-today__foot .board-meta { margin-top: 0; }

/* The four sides of the business sit on one shelf: no boxes, one heavy rule
   under them, hand drawn dividers between them. */
.sides__head { max-width: 40rem; }
.sides__head p { margin-top: 1rem; }
/* The badge, matted like the photos, fills the empty side of the heading on
   wide screens only; phones already see it in the header. */
.badge-mat { display: none; }
@media (min-width: 56rem) {
  .sides__top {
    display: grid;
    grid-template-columns: minmax(0, 40rem) auto;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
  }
  .badge-mat {
    display: block;
    width: 240px;
    margin-right: 1.5rem;
    padding: 14px 14px 10px;
    background: var(--cream);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transform: rotate(1.6deg);
  }
  .badge-mat img { width: 100%; height: auto; }
  .badge-mat figcaption { margin-top: 0.5rem; font-size: 0.9rem; color: var(--muted); text-align: center; }
}
.shelf {
  display: grid;
  margin-top: 3rem;
  border-bottom: 6px solid var(--ink);
}
.shelf__item {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0 1.1rem;
  align-items: start;
  padding: 1.5rem 0;
}
.shelf__item + .shelf__item { border-top: 1px solid var(--hairline); }
.shelf__art { width: 4.5rem; height: 4.5rem; color: var(--ink); }
.shelf__art .accent { color: var(--ember); }
.shelf__item h3 { font-size: 1.45rem; }
.shelf__item h3 a { color: var(--ink); text-decoration: none; }
.shelf__item h3 a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--ember); }
.shelf__item p { margin-top: 0.45rem; font-size: 1.02rem; }
@media (min-width: 56rem) {
  .shelf { grid-template-columns: repeat(4, 1fr); }
  .shelf__item {
    grid-template-columns: 1fr;
    padding: 0 1.6rem 2.25rem;
    align-content: start;
  }
  .shelf__item:first-child { padding-left: 0; }
  .shelf__item:last-child { padding-right: 0; }
  .shelf__item + .shelf__item { border-top: 0; }
  .shelf__item + .shelf__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5rem;
    bottom: 1.5rem;
    width: 2px;
    background: var(--hairline);
  }
  .shelf__art { width: 5.5rem; height: 5.5rem; margin-bottom: 1.1rem; }
  .shelf__item:nth-child(2) { padding-top: 1.75rem; }
  .shelf__item:nth-child(4) { padding-top: 0.9rem; }
}

.family__grid { display: grid; gap: 2.75rem; align-items: center; }
@media (min-width: 56rem) {
  .family__grid { grid-template-columns: 5fr 6fr; gap: 4.5rem; }
}
.family__text .prose { margin-top: 1.25rem; }
.family__text .text-link { display: inline-block; margin-top: 1.5rem; }

.proof { padding-block: clamp(2.5rem, 5vw, 4rem); }
.proof__row {
  display: grid;
  gap: 1.75rem;
  padding-block: 1.75rem;
  border-block: 3px double var(--ink);
}
@media (min-width: 56rem) {
  .proof__row { grid-template-columns: auto auto 1fr; gap: 3rem; align-items: center; }
}
.proof__item { display: flex; align-items: center; gap: 1rem; }
.proof__big {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 75%;
  font-size: clamp(3rem, 2rem + 3vw, 4.25rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.proof__text { font-size: 1rem; line-height: 1.35; }
.proof__text a { font-weight: 650; }
.stars { display: flex; gap: 2px; margin-bottom: 0.25rem; }
.stars span {
  width: 1.05rem;
  height: 1.05rem;
  background: var(--ember);
  -webkit-mask: var(--star) center / contain no-repeat;
  mask: var(--star) center / contain no-repeat;
}
.proof__farm { font-size: 1rem; max-width: 42ch; }
.proof__farm .aside { display: block; font-size: 1.45rem; margin-bottom: 0.15rem; }

/* ------------------------------------------------------------ visit band and hours */

.visit-band { background: var(--ink); color: var(--cream); }
.visit-band__grid { display: grid; gap: 2.5rem; }
@media (min-width: 60rem) {
  .visit-band__grid { grid-template-columns: 1.1fr 1fr 1fr; gap: 3rem; align-items: start; }
}
.visit-band h2 { color: var(--cream); }
.visit-band .slot { transform: rotate(1.2deg); }
.addr { font-style: normal; line-height: 1.5; }
.addr strong { font-family: var(--font-display); font-stretch: 85%; font-size: 1.3rem; display: block; }
.open-line {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 650;
}
.open-line::before {
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hours { width: 100%; max-width: 24rem; font-variant-numeric: lining-nums tabular-nums; }
.hours caption { text-align: left; }
.hours th, .hours td { padding: 0.42rem 0.5rem; text-align: left; vertical-align: baseline; }
.hours th { font-weight: 600; padding-left: 0.75rem; }
.hours td { text-align: right; }
.hours tbody tr + tr > * { border-top: 1px solid var(--hairline); }
.hours tr.is-today > *, .hours tr[aria-current="date"] > * { font-weight: 800; background: var(--paper-deep); }
.hours tr.is-today th::after, .hours tr[aria-current="date"] th::after {
  content: "today";
  margin-left: 0.5rem;
  font-family: var(--font-hand);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--ember);
}
.on-dark .hours tbody tr + tr > * { border-top-color: color-mix(in srgb, var(--cream) 22%, transparent); }
.on-dark .hours tr.is-today > *, .on-dark .hours tr[aria-current="date"] > * { background: var(--ink-soft); }
.on-dark .hours tr.is-today th::after, .on-dark .hours tr[aria-current="date"] th::after { color: var(--mustard); }

/* Upcoming closed days, under the hours table on /visit. */
.closures {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  max-width: 24rem;
  display: grid;
  gap: 0.4rem;
}
.closures li { padding: 0.35rem 0 0.35rem 0.75rem; border-left: 3px solid var(--ember); }
.closures time { font-weight: 700; }

/* ------------------------------------------------------------ content pages */

.split { display: grid; gap: 2.75rem; align-items: start; }
@media (min-width: 56rem) {
  .split { grid-template-columns: 1fr 1fr; gap: 4.5rem; }
  .split--wide-text { grid-template-columns: 1.3fr 1fr; }
  .split--wide-art { grid-template-columns: 1fr 1.25fr; }
  .split--center { align-items: center; }
}
.chapter + .chapter { margin-top: var(--section); }
.chapter h2 { max-width: 18ch; }
.chapter .prose { margin-top: 1.25rem; }

.checklist { display: grid; gap: 0.7rem; margin-top: 1.25rem; }
.checklist li {
  position: relative;
  padding-left: 2.1rem;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 1.3rem;
  height: 1.3rem;
  background: var(--ember);
  -webkit-mask: var(--cleaver) center / contain no-repeat;
  mask: var(--cleaver) center / contain no-repeat;
}

.pull {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 82%;
  font-size: var(--step-2);
  line-height: 1.15;
  max-width: 24ch;
}
.pull cite { display: block; margin-top: 0.6rem; font-family: var(--font-hand); font-style: normal; font-size: 1.5rem; font-weight: 500; color: var(--ember); }

.callout {
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--radius);
}
@media (min-width: 48rem) {
  .callout { grid-template-columns: 1fr auto; align-items: center; }
}
.callout h2 { font-size: var(--step-2); color: var(--cream); }
.callout p { margin-top: 0.5rem; }
.phone-big {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 80%;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  line-height: 1;
  white-space: nowrap;
}
.phone-big a { text-decoration: none; }
.phone-big a:hover { text-decoration: underline; text-decoration-thickness: 3px; }

.legal h2 { font-size: var(--step-2); }
.legal .prose { margin-top: 0; }
.reviewed { margin-top: 2.5rem; color: var(--muted); font-size: 1rem; }

.not-found { padding-block: clamp(3rem, 8vw, 7rem); }
.not-found .tag { max-width: 22rem; margin-top: 2rem; transform: rotate(-3deg); }
.not-found .board { margin-top: 0; }

/* ------------------------------------------------------------ footer */

.site-footer {
  background: var(--ink);
  color: var(--cream);
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-bottom: 2rem;
}
.site-footer a { color: var(--cream); }
.footer-top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; }
.footer-mark {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}
.footer-mark img { width: auto; height: clamp(132px, 24vw, 180px); flex: none; }
.footer-mark p {
  font-family: var(--font-display);
  font-weight: 400;
  font-stretch: 75%;
  font-size: var(--step-2);
  line-height: 1.05;
  max-width: 14ch;
}
.footer-top .aside { color: var(--mustard); transform: rotate(-3deg); }
.footer-grid {
  display: grid;
  gap: 2.25rem;
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid color-mix(in srgb, var(--cream) 22%, transparent);
}
@media (min-width: 48rem) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 68rem) { .footer-grid { grid-template-columns: 1.1fr 1.2fr 0.8fr 0.9fr; } }
.footer-grid h2 {
  font-size: 1.2rem;
  font-stretch: 85%;
  margin-bottom: 0.9rem;
  color: var(--cream);
}
.footer-list { display: grid; gap: 0.35rem; }
.footer-list a { display: inline-flex; align-items: center; min-height: 32px; }
.footer-contact { display: grid; gap: 0.6rem; font-size: 1rem; }
.footer-contact a { font-weight: 600; }
.footer-grid .hours th, .footer-grid .hours td { padding-block: 0.28rem; font-size: 1rem; }
.footer-grid .open-line { margin-top: 0.9rem; }
.social { display: flex; gap: 0.6rem; }
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1.5px solid color-mix(in srgb, var(--cream) 55%, transparent);
  border-radius: 50%;
  color: var(--cream);
}
.social a:hover { background: var(--cream); color: var(--ink); }
.social svg { width: 22px; height: 22px; }
.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  justify-content: space-between;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--cream) 22%, transparent);
  font-size: 0.95rem;
}
.footer-base ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.footer-base a { display: inline-flex; min-height: 32px; align-items: center; }

/* ------------------------------------------------------------ inquiry dialog and forms */

.inquiry-dialog {
  width: min(100% - 1.5rem, 40rem);
  max-height: calc(100dvh - 1.5rem);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 30px 80px -20px color-mix(in srgb, var(--ink) 70%, transparent);
  overflow: auto;
  overscroll-behavior: contain;
}
.inquiry-dialog::backdrop { background: color-mix(in srgb, var(--ink) 65%, transparent); }
.inquiry-dialog__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.25rem 1rem 1.5rem;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}
.inquiry-dialog__head h2 { font-size: var(--step-2); }
.inquiry-dialog__head p { margin-top: 0.35rem; font-size: 1rem; color: var(--muted); }
.inquiry-dialog__body { padding: 1.25rem 1.5rem 1.75rem; }

.form { display: grid; gap: 1.2rem; }
.form__row { display: grid; gap: 1.2rem; }
@media (min-width: 36rem) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0.35rem; align-content: start; }
.field > label, .field legend {
  font-weight: 650;
  font-size: 1rem;
}
.field .hint { font-size: 0.95rem; color: var(--muted); }
.field input, .field textarea, .field select {
  width: 100%;
  min-height: 48px;
  padding: 0.6rem 0.8rem;
  border: 1.5px solid var(--ink-soft);
  border-radius: var(--radius);
  background: var(--cream);
  color: var(--ink);
  font-size: 1.05rem;
}
.field textarea { min-height: 8rem; resize: vertical; line-height: 1.45; }
.field input:hover, .field textarea:hover { border-color: var(--ink); }
.field [aria-invalid="true"] { border-color: var(--out); border-width: 2.5px; background: var(--cream); }
.field__error {
  display: flex;
  gap: 0.4rem;
  align-items: start;
  color: var(--out);
  font-weight: 650;
  font-size: 0.98rem;
}
.field__error::before {
  content: "";
  flex: none;
  width: 1.05em;
  height: 1.05em;
  margin-top: 0.15em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm-1.3 5h2.6l-.4 7h-1.8l-.4-7Zm1.3 8.6a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm-1.3 5h2.6l-.4 7h-1.8l-.4-7Zm1.3 8.6a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
fieldset.field { margin: 0; padding: 0; border: 0; min-width: 0; }
fieldset.field legend { padding: 0; margin-bottom: 0.5rem; }
.choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice { position: relative; }
.choice input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  inset: 0;
  cursor: pointer;
}
.choice label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.45rem 1rem 0.45rem 0.8rem;
  border: 1.5px solid var(--ink-soft);
  border-radius: var(--pill);
  background: var(--cream);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
}
.choice label::before {
  content: "";
  width: 1rem;
  height: 1rem;
  flex: none;
  border: 2px solid var(--ink-soft);
  border-radius: 50%;
  background: var(--cream);
}
.choice input:checked + label { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.choice input:checked + label::before { border-color: var(--cream); background: radial-gradient(circle, var(--cream) 0 35%, transparent 40%); }
.choice input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--cream); }
.choices[aria-invalid="true"] .choice label, .field--invalid .choice label { border-color: var(--out); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.form__foot .btn[disabled] { opacity: 0.75; cursor: progress; }
.form-status { font-weight: 600; }
.form-status--error { color: var(--out); }
.form-done { display: grid; gap: 1rem; padding-block: 0.5rem 0.25rem; }
.form-done h3 { font-size: var(--step-2); }
.form-done .aside { font-size: 1.8rem; }
.inline-form {
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 4vw, 2rem);
}

/* ------------------------------------------------------------ motion
   Everything that moves lives in here, so reduced motion means nothing
   moves at all. Screen only, so print never inherits a hidden reveal. */

@media screen and (prefers-reduced-motion: no-preference) {
  .reveal-pending { opacity: 0; transform: translateY(8px) rotate(var(--tilt, 0deg)); }
  .slot.reveal-pending { transform: translateY(10px) rotate(0deg); }
  .reveal-in {
    transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  [data-announcement]:not([hidden]) { animation: slide-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both; }
  .status__dot { animation: dot-pulse 0.9s ease-out 0.8s 1 both; }
  .menu-dialog[open] { animation: menu-in 0.28s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .inquiry-dialog[open] { animation: sheet-in 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
  a { transition: color 0.15s ease, text-underline-offset 0.15s ease; }
}
@keyframes slide-in { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dot-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes sheet-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------ more contrast */

@media (prefers-contrast: more) {
  :root { --hairline: var(--ink); }
  .slot { border: 2px solid var(--ink); }
  .slot__frame::after { border-color: var(--cream); }
  .board { border-color: var(--ink); }
  .board-list > li + li { border-top: 2px solid var(--chalk); }
  .board-item__name::after { border-bottom: 2px solid var(--chalk); }
  .tag { box-shadow: inset 0 0 0 2px var(--ink); }
  .status { box-shadow: inset 0 0 0 1.5px currentColor; }
  .field input, .field textarea, .choice label { border-width: 2px; border-color: var(--ink); }
  .muted, .board-meta, .field .hint { color: var(--ink); }
  .board .board-meta { color: var(--chalk); }
  .hero__panel::before { border-color: var(--cream); }
  .footer-grid, .footer-base { border-top-color: var(--cream); }
  .social a { border-color: var(--cream); }
  a { text-decoration-thickness: 2px; }
}

/* ------------------------------------------------------------ forced colours */

@media (forced-colors: active) {
  .status { border: 1px solid CanvasText; }
  .status__dot { border-color: CanvasText; }
  .status--in .status__dot { background: CanvasText; forced-color-adjust: none; }
  .status--low .status__dot { background: linear-gradient(90deg, CanvasText 50%, Canvas 50%); forced-color-adjust: none; }
  .tag { border: 2px solid CanvasText; }
  .chalk::after, body::before { display: none; }
  .btn { border-color: ButtonText; }
  :focus-visible { outline: 3px solid Highlight; }
}

/* ------------------------------------------------------------ print
   /counter and /smokehouse print as a plain price list. Status text stays. */

@media print {
  @page { margin: 14mm; }
  body { background: none; color: black; font-size: 11pt; }
  .reveal-pending { opacity: 1 !important; transform: none !important; }
  body::before, .site-header, .site-footer, [data-announcement], .no-print, .cuts, .btn, .menu-dialog, .inquiry-dialog, .skip-link { display: none !important; }
  .print-only { display: block !important; }
  .page-head { padding: 0 0 8mm; }
  .page-head .slot { display: none; }
  .wrap { width: auto; }
  .section { padding-block: 4mm; }
  .board { background: none; color: black; border: 0; box-shadow: none; padding: 0; }
  .board a, .board-item__price .tag__unit, .board-item__unit { color: black; }
  .board-group { break-inside: avoid; }
  .board-group + .board-group { margin-top: 6mm; }
  .board-group__title { color: black; font-size: 15pt; }
  .board-group__title::after, .board-item__name::after { display: none; }
  .board-list > li + li { border-top: 0.5pt solid black; }
  .board-item { padding-block: 1.5mm; }
  .board-item__name, .board-item__price { font-size: 11pt; }
  .board-item__note { color: black; font-family: var(--font-body); font-size: 10pt; font-style: italic; }
  .status { background: none; color: black; padding: 0; font-size: 9pt; }
  .status__dot { border-color: black; }
  .status--in .status__dot { background: black; }
  .status--low .status__dot { background: linear-gradient(90deg, black 50%, transparent 50%); }
  .board .board-meta { color: black; }
  .board-sample, .board .board-sample { color: black; font-size: 10pt; }
  .closures li { border-left-color: black; }
  a { color: black; text-decoration: none; }
  .board, .board * { color: black !important; }
  .page-head .aside, .chalk::after { display: none; }
}
.print-only { display: none; }

/* ------------------------------------------------------------ small helpers */

[data-header-sentinel] { position: absolute; top: 0; left: 0; width: 1px; height: 8px; pointer-events: none; }
.footer-contact a, .contact-lines a { overflow-wrap: anywhere; }
.contact-lines { display: grid; gap: 0.4rem; margin-top: 1rem; }
.contact-lines a { font-weight: 650; }

/* Flow spacing between the usual neighbours, so the markup needs no inline styles. */
h2 + .lede, h2 + .prose, h2 + p, h2 + .checklist, h3 + .checklist { margin-top: 1.25rem; }
.prose + .checklist, .prose + p, .checklist + p { margin-top: 1.25rem; }
.prose + h3, .checklist + h3 { margin-top: 1.75rem; }
.prose + .aside { margin-top: 1rem; }
* + .btn-row { margin-top: 1.75rem; }
.lede + .cuts { margin-top: 2rem; }
.board__head + [data-board] { margin-top: 1.75rem; }
.footer-note { margin-top: 1rem; font-size: 1rem; max-width: 26ch; }
.not-found .lede { margin-top: 1.25rem; }
.cut-list ul { list-style: none; padding: 0; }
.cut-chart .primal text { font-size: 23px; }
.split .callout { grid-template-columns: 1fr; }
.slot--arch { max-width: 30rem; justify-self: center; width: 100%; }
@media (max-width: 22.5rem) {
  .wordmark img { height: 46px; }
  .menu-toggle { padding-inline: 0.75rem; }
}
.hero h1 { font-size: clamp(2.5rem, 1.2rem + 6.6vw, 6.2rem); }
.hero h1 .chalk, .hero__note { white-space: nowrap; }
@media (max-width: 30rem) { .hero__note { font-size: 1.3rem; right: 0.9rem; } }