:root {
  /* --- Butcher palette (client-directed 2026-08-25) --------------------- */
  --paper:        #f2ece0;   /* butcher-paper cream */
  --paper-2:      #e9e1d2;   /* kraft-tinted cream */
  --paper-3:      #ddd2be;   /* faded tan */
  --kraft:        #c2ab8b;
  --ink:          #171310;   /* near-black */
  --ink-2:        #3b322a;   /* deep brown */
  --ink-3:        #7d746a;   /* muted steel gray */
  --rule:         #cfc3ae;
  --rule-strong:  #a8998a;
  --steel:        #8b8681;
  --oxblood:      #7a1f26;   /* rich fresh-meat red */
  --oxblood-deep: #4d1218;   /* dark burgundy */
  --oxblood-soft: #9a2c33;
  --accent:       #7a1f26;
  --accent-ink:   #f7f2e8;
  --focus:        #7a1f26;
  --char:         #14100d;   /* charcoal ground */
  --char-2:       #1f1915;

  --shadow-1: 0 1px 2px rgba(23,19,16,.07), 0 4px 12px rgba(23,19,16,.09);
  --shadow-2: 0 2px 4px rgba(23,19,16,.10), 0 12px 32px rgba(23,19,16,.16);
  --shadow-3: 0 4px 8px rgba(23,19,16,.12), 0 24px 64px rgba(23,19,16,.26);

  /* --- Type --- */
  --font-display: "Big Shoulders Display", "Archivo", Impact, sans-serif;
  --font-body:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-ui:      "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-hand:    "Caveat", "Segoe Script", cursive;
  --font-type:    "Courier Prime", "Courier New", monospace;

  /* --- Space --- */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 66ch;
  --shell: 1240px;
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, .3vw + .95rem, 1.09rem);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}
/* butcher-paper grain over the whole page */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 9999;
  pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23p)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Layout -------------------------------------------------------------- */
.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}
.shell--narrow { width: min(100% - (var(--gutter) * 2), 780px); }

section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
section + section { border-top: 1px solid var(--rule); }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: .75rem 1.25rem; z-index: 100;
  font-family: var(--font-ui); font-weight: 600;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* --- Type ---------------------------------------------------------------- */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: .94;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin: 0 0 .45em;
  text-wrap: balance;
}
h1 { font-size: clamp(3rem, 7.6vw, 6.2rem); font-weight: 900; }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.8rem); font-weight: 900; }
h3 { font-size: clamp(1.35rem, 1.7vw, 1.7rem); letter-spacing: .005em; }

p { margin: 0 0 1.1em; max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.1rem, 1.35vw, 1.35rem);
  line-height: 1.5;
  color: var(--ink-2);
}

/* Eyebrow: small caps label above a heading */
.eyebrow {
  font-family: var(--font-ui);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 1.2rem;
  display: flex;
  align-items: center;
  gap: .9rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 10px; flex: none;
  background: repeating-linear-gradient(90deg, var(--accent) 0 3px, transparent 3px 6px);
}
/* --plain has been in the markup all along with no rule behind it, so the tick
   marks it was meant to suppress were still drawing. */
.eyebrow--plain::before { display: none; }

/* --- Buttons: sturdy stock, heavy rule, stamp-press on hover ------------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: .65rem;
  font-family: var(--font-ui);
  font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 1rem 1.7rem;
  text-decoration: none;
  border: 2px solid var(--ink);
  border-radius: 2px;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease, background-color .2s ease, color .2s ease;
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--on-dark { border-color: var(--paper); box-shadow: 4px 4px 0 var(--paper); }
.btn--on-dark:hover { box-shadow: 2px 2px 0 var(--paper); }
.btn--on-dark.btn--ghost { background: transparent; color: var(--paper); }
.btn--on-dark.btn--ghost:hover { background: var(--paper); color: var(--ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }

/* Transitional CTA — reads as a link, not a button */
.link-cta {
  font-family: var(--font-ui); font-weight: 700; font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 3px;
  display: inline-flex; align-items: center; gap: .5rem;
  transition: border-color .16s ease, color .16s ease, gap .16s ease;
}
.link-cta:hover { color: var(--accent); }

/* --- Header -------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: .7rem;
}
/* Wordmark stands in for the logo, which has not been delivered. */
.wordmark {
  font-family: var(--font-display);
  font-weight: 800; font-size: 1.02rem;
  letter-spacing: .11em; text-transform: uppercase;
  text-decoration: none; line-height: 1.1;
  display: flex; flex-direction: column;
}
.wordmark small {
  font-size: .58rem; font-weight: 500; letter-spacing: .2em;
  color: var(--ink-3); margin-top: .18rem;
}
.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.9rem); }
.nav a {
  font-family: var(--font-ui); font-size: .9rem; font-weight: 500;
  text-decoration: none; color: var(--ink-2);
  padding-block: .35rem;
  border-bottom: 1.5px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nav a:hover { color: var(--ink); border-color: var(--rule-strong); }
.nav a[aria-current="page"] { color: var(--ink); border-color: var(--ink); }
.header-cta { display: none; }
@media (min-width: 1080px) { .header-cta { display: inline-flex; padding: .7rem 1.15rem; font-size: .85rem; } }

.nav-toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  background: none; border: 1.5px solid var(--rule-strong);
  padding: .5rem .85rem; cursor: pointer;
  font-family: var(--font-ui); font-size: .82rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}
@media (min-width: 900px) { .nav-toggle { display: none; } }
@media (max-width: 899px) {
  .nav {
    display: none;
    position: absolute; inset-inline: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    padding: .5rem var(--gutter) 1.5rem;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding-block: .85rem; border-bottom: 1px solid var(--rule); font-size: 1rem; }
}

/* --- Hero ---------------------------------------------------------------- */
.hero { padding-block: clamp(3.5rem, 9vw, 7.5rem); }
.hero__grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.05fr .95fr; } }
.hero h1 { margin-bottom: .35em; }
.hero .lede { max-width: 34ch; }

/* Answers "how do I get it" in the first five seconds — the three steps, inline */
.hero__proof {
  margin-top: 2.6rem; padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 1.2rem 2.2rem;
  font-family: var(--font-ui); font-size: .84rem; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3);
}

/* --- Placeholder image slots -------------------------------------------- */
/* Deliberately obvious. These are NOT design elements — they mark where the
   client's real product photography goes. See docs/open-questions.md. */
figure.photo { margin: 0; }
.photo {
  position: relative;
  background: var(--paper-3);
  border: 1px solid var(--rule-strong);
  aspect-ratio: 4 / 3;
  display: grid; place-content: center; text-align: center;
  overflow: hidden;
}
.photo::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    45deg, transparent 0 11px,
    color-mix(in srgb, var(--rule-strong) 45%, transparent) 11px 12px);
  opacity: .55;
}
.photo span {
  position: relative;
  font-family: var(--font-ui); font-size: .7rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  background: var(--paper); padding: .5rem .8rem; border: 1px solid var(--rule-strong);
  max-width: 22ch; line-height: 1.5;
}
.photo--tall { aspect-ratio: 3 / 4; }
.photo--wide { aspect-ratio: 16 / 9; }
.photo--square { aspect-ratio: 1; }

/* --- Steps --------------------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step;
  display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li {
  counter-increment: step;
  background: var(--paper);
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.3rem, 2.4vw, 2rem);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.4rem, 4.5vw, 3.4rem); line-height: 1;
  color: var(--rule-strong);
  margin-bottom: .9rem;
  letter-spacing: -0.04em;
}
.steps h3 { margin-bottom: .5rem; }
.steps p { font-size: .98rem; color: var(--ink-2); }

/* --- Cards / grids ------------------------------------------------------- */
.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.card { display: flex; flex-direction: column; }
.card .photo { margin-bottom: 1.3rem; }
.card h3 { margin-bottom: .45rem; }
.card p { font-size: .98rem; color: var(--ink-2); }
.card .link-cta { margin-top: auto; padding-top: 1.1rem; align-self: flex-start; }

/* Differentiator list — rules instead of boxes */
.diffs { display: grid; gap: 0; }
.diffs > div {
  display: grid; gap: .35rem 2.5rem;
  padding-block: clamp(1.5rem, 3vw, 2.1rem);
  border-top: 1px solid var(--rule);
}
.diffs > div:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 800px) { .diffs > div { grid-template-columns: minmax(0, 22rem) 1fr; } }
.diffs h3 { margin: 0; }
.diffs p { margin: 0; color: var(--ink-2); }

/* --- Dark band ----------------------------------------------------------- */
.band-dark {
  background: var(--ink); color: var(--paper);
  border-top: 1px solid var(--ink) !important;
}
.band-dark h2, .band-dark h3 { color: var(--paper); }
.band-dark p { color: color-mix(in srgb, var(--paper) 82%, var(--ink)); }
.band-dark .eyebrow { color: color-mix(in srgb, var(--paper) 62%, var(--ink)); }
.band-dark .link-cta { border-color: color-mix(in srgb, var(--paper) 40%, var(--ink)); }
.band-dark .link-cta:hover { border-color: var(--paper); }

/* --- Pull quote / narrative --------------------------------------------- */
.quote {
  font-size: clamp(1.35rem, 2.5vw, 2.05rem);
  line-height: 1.35;
  letter-spacing: -0.015em;
  max-width: 26ch;
  margin: 0;
  text-wrap: balance;
}
.quote cite {
  display: block; margin-top: 1.4rem;
  font-family: var(--font-ui); font-style: normal;
  font-size: .82rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
}

/* --- Reviews ------------------------------------------------------------- */
.reviews { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 820px) { .reviews { grid-template-columns: repeat(3, 1fr); } }
.reviews blockquote {
  margin: 0; background: var(--paper);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  display: flex; flex-direction: column; gap: 1rem;
}
.reviews p { font-size: 1.02rem; margin: 0; }
.reviews footer {
  margin-top: auto; font-family: var(--font-ui); font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.review-placeholder { border-style: dashed; }

/* --- Locations ----------------------------------------------------------- */
.locations { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 800px) {
  .locations {
    grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(6, auto);
    /* the gap was a single column gap while this was one row; as a six-row
       subgrid it would open up between every line, so rows go back to zero and
       the spacing is carried by the elements' own margins */
    column-gap: clamp(2rem, 4vw, 3.5rem); row-gap: 0;
  }
  /* Subgrid keeps both columns on the same baselines. Durand's service list
     wraps to two lines and Woodville's does not, which otherwise knocks the
     address, phone and Directions of one column out of step with the other. */
  .location {
    display: grid; grid-template-rows: subgrid; grid-row: span 6;
    align-content: start; row-gap: 0;
  }
}
/* --- the homepage pair: photo on the left, name and details beside it ----- */
.locations--row .location { display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); }
@media (min-width: 560px) {
  .locations--row .location {
    grid-template-columns: auto 1fr; grid-template-rows: none;
    grid-row: auto; align-items: start;
  }
}
.locations--row .location__shot { margin: 0; }
.locations--row .location__body > :first-child { margin-top: -.25rem; }
.location__name {
  font-family: var(--font-display); font-weight: 900; line-height: 1;
  font-size: clamp(1.4rem, 2.6vw, 2rem); text-transform: uppercase;
  margin: 0 0 .3rem;
}
/* the contact hairline belongs to the stacked version only */
.locations--row address { border-top: 0; padding-top: 0; }

.location__role {
  font-family: var(--font-ui); font-size: .76rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  line-height: 1.55; margin: 0 0 1rem;
}
/* the contact details are a separate job from the name, so they get their own
   hairline. With subgrid above, that rule lines up across both locations. */
.location address {
  font-style: normal; margin: 0 0 .3rem; line-height: 1.6;
  padding-top: .95rem; border-top: 1px solid var(--rule);
}
/* the heading sits tight under its own subheading, and the phone tight under
   the address, so each location reads as one block rather than four */
.location h2 { margin-bottom: .18rem; line-height: 1.05; }
.location address + p { margin-top: 0; }
.location a[href^="tel"] + * { margin-top: .9rem; }
.location a[href^="tel"] {
  font-family: var(--font-ui); font-weight: 600; text-decoration: none;
  border-bottom: 1.5px solid var(--rule-strong);
}
.location a[href^="tel"]:hover { border-color: var(--ink); }

.hours { margin: 0; font-size: .96rem; }
.hours div {
  display: flex; justify-content: space-between; gap: 2rem;
  padding-block: .45rem; border-bottom: 1px solid var(--rule);
  max-width: 24rem;
}
.hours dt { color: var(--ink-2); }
.hours dd { margin: 0; font-variant-numeric: tabular-nums; }

/* --- Tables (wholesale / product ranges) --------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; min-width: min(520px, 100%); font-size: .96rem; }
@media (max-width: 560px) {
  table { min-width: 0; font-size: .9rem; }
  th, td { padding: .7rem .75rem; }
}
th, td { text-align: left; padding: .9rem 1.1rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-family: var(--font-ui); font-size: .76rem; font-weight: 600; letter-spacing: .1em;
     text-transform: uppercase; color: var(--ink-3); background: var(--paper-2); }
tr:last-child td { border-bottom: 0; }

/* --- Tag list (product categories, word-bank chips) ---------------------- */
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; }
.tags li {
  font-family: var(--font-ui); font-size: .84rem; font-weight: 500;
  border: 1px solid var(--rule-strong); padding: .45rem .85rem;
  color: var(--ink-2);
}
.tags li[data-award]::after {
  content: "★"; margin-left: .45rem; color: var(--ink-3);
}

/* --- Notes (build-time flags, visible in dev) ---------------------------- */
.note {
  border-left: 3px solid var(--rule-strong);
  background: var(--paper-2);
  padding: 1rem 1.25rem;
  font-family: var(--font-ui); font-size: .88rem; line-height: 1.55;
  color: var(--ink-2);
  margin: 1.5rem 0 0;
  max-width: var(--measure);
}

/* --- Footer -------------------------------------------------------------- */
.site-footer {
  background: var(--ink); color: var(--paper);
  padding-block: clamp(2rem, 3.6vw, 2.8rem) 1.2rem;
}
/* the tagline was breaking over two lines in the narrow footer column */
.site-footer .tagline { white-space: nowrap; letter-spacing: .13em; }
.site-footer a { color: inherit; }
.footer-grid { display: grid; gap: 1.7rem; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer h2 {
  font-size: 1rem; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: .75rem; color: color-mix(in srgb, var(--paper) 70%, var(--ink));
  font-weight: 600;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.site-footer li a {
  font-family: var(--font-ui); font-size: .95rem; text-decoration: none;
  border-bottom: 1px solid transparent;
}
.site-footer li a:hover { border-color: currentColor; }
.site-footer .one-liner {
  font-size: 1.05rem; line-height: 1.45; max-width: 34ch; margin-top: .6rem;
  color: color-mix(in srgb, var(--paper) 88%, var(--ink));
}
.colophon {
  margin-top: 1.8rem; padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--paper) 22%, var(--ink));
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  font-family: var(--font-ui); font-size: .8rem;
  color: color-mix(in srgb, var(--paper) 58%, var(--ink));
}

/* ==========================================================================
   CINEMA & DEPTH PASS — homepage first (2026-08-24)
   Dark cinematic hero -> light paper body. Ken Burns + smoke on the hero,
   scroll reveals, elevation, and overlap throughout. Colors stay neutral
   (charcoal/paper) pending the identity decision.
   ========================================================================== */

:root {
  --char:      #0e0c09;   /* hero ground — deep charcoal, not a brand color */
  --char-2:    #1a1712;
  --shadow-1:  0 1px 2px rgba(22,20,15,.06), 0 4px 12px rgba(22,20,15,.08);
  --shadow-2:  0 2px 4px rgba(22,20,15,.08), 0 12px 32px rgba(22,20,15,.14);
  --shadow-3:  0 4px 8px rgba(22,20,15,.10), 0 24px 64px rgba(22,20,15,.22);
}

/* --- Overlay header (homepage): transparent over the hero, paper after --- */
.site-header--overlay {
  position: fixed; inset-inline: 0; top: 0;
  background: transparent; border-bottom-color: transparent;
  backdrop-filter: none;
  transition: background .35s ease, border-color .35s ease;
}
.site-header--overlay:not(.is-scrolled) .wordmark,
.site-header--overlay:not(.is-scrolled) .nav a { color: var(--paper); }
.site-header--overlay:not(.is-scrolled) .wordmark small { color: color-mix(in srgb, var(--paper) 65%, transparent); }
.site-header--overlay:not(.is-scrolled) .nav a:hover { border-color: color-mix(in srgb, var(--paper) 45%, transparent); }
.site-header--overlay:not(.is-scrolled) .nav-toggle { color: var(--paper); border-color: color-mix(in srgb, var(--paper) 45%, transparent); }
.site-header--overlay:not(.is-scrolled) .header-cta {
  background-image: linear-gradient(var(--paper), var(--paper));
  background-size: 0% 100%; background-repeat: no-repeat;
  color: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--paper);
}
.site-header--overlay:not(.is-scrolled) .header-cta:hover { background-size: 100% 100%; color: var(--ink); }
.site-header--overlay.is-scrolled {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border-bottom-color: var(--rule);
  backdrop-filter: blur(8px);
}
@media (max-width: 899px) {
  /* the dropdown panel always sits on paper, whatever state the bar is in */
  .site-header--overlay .nav { background: var(--paper); border-bottom: 1px solid var(--rule); }
  .site-header--overlay:not(.is-scrolled) .nav a { color: var(--ink-2); }
}

/* --- Cinematic hero --------------------------------------------------------- */
.cinema {
  position: relative;
  min-height: min(92vh, 60rem);
  display: flex; align-items: flex-end;
  background: var(--char);
  color: var(--paper);
  overflow: hidden;
  padding-block: clamp(7rem, 14vh, 10rem) clamp(9rem, 16vh, 13rem);
  border: 0;
}
.cinema__media { position: absolute; inset: 0; overflow: hidden; }
.cinema__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  object-position: 72% center;              /* steak on the right, dark wood left */
}

/* film grain — keeps the big photo from looking like a flat banner */
.cinema__grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: overlay;
  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.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

/* scrims: legibility up top, headline ground at left, paper hand-off below */
.cinema__scrim { position: absolute; inset: 0; pointer-events: none; }
.cinema__scrim::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(14,12,9,.72) 0%, rgba(14,12,9,.15) 22%, rgba(14,12,9,0) 40%),
    linear-gradient(100deg, rgba(14,12,9,.94) 0%, rgba(14,12,9,.72) 34%, rgba(14,12,9,.28) 58%, rgba(14,12,9,.02) 78%);
}
.cinema__scrim::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 34%;
  background: linear-gradient(180deg, rgba(14,12,9,0) 0%, rgba(14,12,9,.55) 55%, var(--char) 100%);
}

/* --- Smoke (canvas particle plume; drawn by site.js) ----------------------- */
.cinema__smoke-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1.4s ease;
  /* keep the plume off the headline: fade smoke out toward the text side */
  -webkit-mask-image: linear-gradient(100deg, transparent 22%, rgba(0,0,0,.5) 42%, #000 58%);
          mask-image: linear-gradient(100deg, transparent 22%, rgba(0,0,0,.5) 42%, #000 58%);
}
.cinema__smoke-canvas.on { opacity: 1; }
.cinema__smoke-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% center;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1.8s ease;
  /* anchored to the steak: visible above/around it, gone at the frame's
     bottom and over the headline */
  -webkit-mask-image: radial-gradient(72% 88% at 66% 30%, #000 32%, rgba(0,0,0,.45) 58%, transparent 78%);
          mask-image: radial-gradient(72% 88% at 66% 30%, #000 32%, rgba(0,0,0,.45) 58%, transparent 78%);
}
.cinema__smoke-video.on { opacity: .49; }
@media (prefers-reduced-motion: reduce) {
  .cinema__smoke-canvas, .cinema__smoke-video { display: none; }
}

.cinema__content { position: relative; z-index: 2; }

/* Typographic entrance — words rise out of clipped line boxes (site.js) */
.cinema h1 .w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.cinema h1 .wi { display: inline-block; }
.cinema h1.type-in .wi {
  transform: translateY(118%);
  transition: transform .85s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--wd, 0s);
}
.cinema h1.type-in.go .wi { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cinema h1 .wi { transform: none !important; transition: none !important; }
}
.cinema__content h1, .cinema__content .lede { text-shadow: 0 1px 22px rgba(14,12,9,.65); }
.cinema .eyebrow { color: color-mix(in srgb, var(--paper) 72%, transparent); }
.cinema h1 { color: var(--paper); max-width: 13ch; }
.cinema .lede { color: color-mix(in srgb, var(--paper) 90%, var(--char)); }
.cinema p:not(.lede):not(.eyebrow):not(.hero__proof) { color: color-mix(in srgb, var(--paper) 78%, var(--char)); }
.cinema .hero__proof { border-top-color: color-mix(in srgb, var(--paper) 25%, transparent); color: color-mix(in srgb, var(--paper) 66%, transparent); }

/* photo credit chip — keeps the web-pulled flag visible without a .note box */
.cinema__flag {
  position: absolute; z-index: 3; right: clamp(1rem, 3vw, 2.5rem); bottom: 1rem;
  font-family: var(--font-ui); font-size: .62rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--paper) 22%, transparent);
  padding: .35rem .6rem;
}

/* --- Overlap: first section rides up onto the hero -------------------------- */
.route { border-top: 0 !important; padding-top: 0; position: relative; z-index: 3; }
.route .grid { margin-top: clamp(-7rem, -11vh, -4.5rem); }
.card--raised {
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-2);
  padding: clamp(1.4rem, 2.5vw, 2rem);
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1);
}
.card--raised:hover { transform: translateY(-6px); box-shadow: var(--shadow-3); }
.card--raised .photo { margin: calc(-1 * clamp(1.4rem, 2.5vw, 2rem)); margin-bottom: 1.3rem; border-inline: 0; border-top: 0; }

/* generic hover lift for photos inside links/cards */
.card .photo { overflow: hidden; }
.card .photo > span { transition: transform .4s ease; }

/* --- Scroll reveals ---------------------------------------------------------- */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--reveal-delay, 0s);
}
html.js [data-reveal="left"]  { transform: translateX(-30px); }
html.js [data-reveal="fade"]  { transform: none; }
html.js [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* --- Depth touches on existing homepage sections ----------------------------- */
.steps li { transition: background .3s ease; position: relative; }
.steps li:hover { background: var(--paper-2); }
.steps li:hover::before { color: var(--ink-3); }
.steps li::before { transition: color .3s ease; }

.band-dark { position: relative; overflow: hidden; }
.band-dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 80% 10%, rgba(247,245,240,.05), transparent 60%);
}
.band-dark .quote { position: relative; }
.band-dark .quote::before {
  content: "\201C";
  position: absolute; top: -0.35em; left: -0.42em; z-index: -1;
  font-family: var(--font-display); font-weight: 800;
  font-size: 5.2em; line-height: 1;
  color: color-mix(in srgb, var(--paper) 8%, transparent);
  pointer-events: none;
}

.reviews blockquote { transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
.reviews blockquote:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); position: relative; z-index: 1; }

/* parallax hooks — JS drives translate3d on [data-parallax] children */
[data-parallax] { will-change: transform; }

/* ==========================================================================
   INTERACTIVE CUT CHART (custom-processing) + BUTCHER-PAPER TEARS
   ========================================================================== */

/* --- Torn butcher-paper section edges ------------------------------------- */
/* Paper tears over the dark bands: previous section's paper rips away to
   reveal the dark ground beneath. Shadow under the tear = physical lift. */
.tear-top { position: relative; }
.tear-top::before,
.tear-bottom::after {
  content: "";
  position: absolute; left: 0; right: 0; height: 26px; z-index: 2;
  background: var(--paper);
  pointer-events: none;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 26' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1200 V10 C1150,22 1110,6 1060,14 C1010,24 980,8 930,12 C880,18 850,4 800,10 C760,20 720,6 670,12 C620,22 590,8 540,14 C490,24 460,6 410,10 C360,18 330,4 280,12 C230,22 200,8 150,14 C100,20 60,6 30,10 C15,12 5,8 0,10 Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 26' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1200 V10 C1150,22 1110,6 1060,14 C1010,24 980,8 930,12 C880,18 850,4 800,10 C760,20 720,6 670,12 C620,22 590,8 540,14 C490,24 460,6 410,10 C360,18 330,4 280,12 C230,22 200,8 150,14 C100,20 60,6 30,10 C15,12 5,8 0,10 Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 900px 26px; mask-size: 900px 26px;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.45));
}
.tear-top::before { top: -1px; }
.tear-bottom { position: relative; }
.tear-bottom::after { bottom: -1px; transform: scaleY(-1); }

/* --- Cut chart -------------------------------------------------------------- */
.cut-chart-grid {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) { .cut-chart-grid { grid-template-columns: 1.25fr .75fr; } }

.cut-chart { position: relative; }
.cut-chart img { width: 100%; height: auto; display: block; }
.cut-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.cut-chart .cut { cursor: pointer; outline-offset: 4px; }
.cut-chart .cut polygon {
  fill: transparent;
  stroke: transparent;
  stroke-width: 3;
  stroke-linejoin: round;
  transition: fill .22s ease, stroke .22s ease;
}
.cut-chart .cut:hover polygon,
.cut-chart .cut:focus-visible polygon {
  fill: color-mix(in srgb, var(--accent) 12%, transparent);
  stroke: color-mix(in srgb, var(--accent) 45%, transparent);
}
.cut-chart .cut.active polygon {
  fill: color-mix(in srgb, var(--accent) 20%, transparent);
  stroke: var(--accent);
}

.cut-info { border-left: 3px solid var(--ink); padding-left: clamp(1.2rem, 2vw, 1.8rem); min-height: 16rem; }
.cut-info h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: .6rem; }
.cut-info .cut-info__label {
  font-family: var(--font-ui); font-size: .72rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3);
  margin: 1.2rem 0 .3rem;
}
.cut-info p { margin: 0; }

/* ==========================================================================
   SLATE SLAB CARDS + LINE ICONS
   Dark charcoal slabs echoing the hero's slate board, one corner sliced off
   like a cleaver cut. The cut deepens on hover and its edge glows ember.
   ========================================================================== */
.card--slab {
  --cut: 34px;
  position: relative;
  color: var(--paper);
  background:
    radial-gradient(140% 110% at 15% 0%, rgba(247,245,240,.05), transparent 55%),
    linear-gradient(158deg, #211d17, #131109 70%);
  padding: clamp(1.6rem, 2.6vw, 2.1rem);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  box-shadow: var(--shadow-2);
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1), clip-path .35s cubic-bezier(.16,1,.3,1);
}
.card--slab:hover {
  --cut: 52px;
  transform: translateY(-7px);
  box-shadow: var(--shadow-3);
}
.card--slab h3 { color: var(--paper); position: relative; }
.card--slab p { color: color-mix(in srgb, var(--paper) 74%, #131109); position: relative; }
.card--slab .link-cta {
  color: var(--paper);
  border-color: color-mix(in srgb, var(--paper) 35%, transparent);
  position: relative;
}
.card--slab .link-cta:hover { border-color: var(--paper); }
/* oversized ghost numeral, like chalk on slate */
.slab-no {
  position: absolute; top: .4rem; right: 1.4rem;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(4.5rem, 7vw, 6rem); line-height: 1;
  color: color-mix(in srgb, var(--paper) 8%, transparent);
  pointer-events: none; user-select: none;
  transition: color .35s ease;
}
.card--slab:hover .slab-no { color: color-mix(in srgb, var(--paper) 14%, transparent); }

.ticket-icon { width: 54px; height: 54px; flex: none; display: block; margin-bottom: 1.4rem; }
.ticket-icon path {
  fill: none;
  stroke: var(--paper);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* icons draw themselves in as the card reveals */
html.js [data-reveal] .ticket-icon path,
html.js .hero-icon path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
html.js [data-reveal].in .ticket-icon path {
  animation: drawline .9s ease forwards;
  animation-delay: calc(var(--reveal-delay, 0s) + .25s + var(--i, 0) * .22s);
}
html.js .hero-icon path {
  animation: drawline 1s ease forwards;
  animation-delay: calc(.35s + var(--i, 0) * .25s);
}
.ticket-icon path:nth-of-type(2), .hero-icon path:nth-of-type(2) { --i: 1; }
.ticket-icon path:nth-of-type(3), .hero-icon path:nth-of-type(3) { --i: 2; }
@keyframes drawline { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] .ticket-icon path, html.js .hero-icon path {
    stroke-dashoffset: 0; animation: none;
  }
}
.hero-icon { width: 44px; height: 44px; display: block; margin-bottom: 1.1rem; }
.hero-icon path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* each trade still does its move on hover */
.card--slab:hover .ticket-icon--cleaver { transform-origin: 78% 72%; animation: chop .6s cubic-bezier(.36,.07,.19,.97) 1; }
@keyframes chop { 0% { transform: rotate(0); } 35% { transform: rotate(-24deg); } 60% { transform: rotate(5deg); } 100% { transform: rotate(0); } }
.card--slab:hover .ticket-icon--parcel { animation: hop .55s ease 1; }
@keyframes hop { 0% { transform: none; } 30% { transform: translateY(-5px); } 55% { transform: translateY(0) scale(1.05, .94); } 78% { transform: translateY(-2px); } 100% { transform: none; } }
.card--slab:hover .ticket-icon--truck { animation: drive .6s ease 1; }
@keyframes drive { 0% { transform: none; } 35% { transform: translateX(6px) rotate(-1.5deg); } 65% { transform: translateX(-2px); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .card--slab:hover .ticket-icon--cleaver,
  .card--slab:hover .ticket-icon--parcel,
  .card--slab:hover .ticket-icon--truck { animation: none; }
}

/* ==========================================================================
   BUTCHER SYSTEM — stamps, packaging labels, cut marks, paper edges
   Client-directed direction (2026-08-25): fresh meat market + traditional
   butcher shop + working smokehouse + modern premium branding.
   ========================================================================== */

/* --- Inspection stamp ----------------------------------------------------- */
.stamp {
  --stamp-size: 128px;
  width: var(--stamp-size); height: auto;
  flex: none; display: block;
  color: var(--accent);
  opacity: .9;
  transform: rotate(-11deg);
}
.stamp text { font-family: var(--font-ui); font-weight: 700; fill: currentColor; }
.stamp circle, .stamp path, .stamp line { stroke: currentColor; fill: none; }
/* slams down on reveal, like an ink stamp hitting paper */
html.js [data-reveal] .stamp { opacity: 0; }
html.js [data-reveal].in .stamp {
  animation: stamp-hit .42s cubic-bezier(.2,1.5,.35,1) forwards;
  animation-delay: calc(var(--reveal-delay, 0s) + .25s);
}
@keyframes stamp-hit {
  0%   { opacity: 0; transform: rotate(-24deg) scale(2.1); filter: blur(3px); }
  60%  { opacity: .95; transform: rotate(-8deg) scale(.94); filter: none; }
  100% { opacity: .9; transform: rotate(-11deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] .stamp { opacity: .9; animation: none; }
}

/* --- Packaging label: slides in like a sticker --------------------------- */
.plabel {
  display: inline-flex; align-items: baseline; gap: .7rem;
  font-family: var(--font-ui); font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  background: var(--paper-2);
  color: var(--ink-2);
  border: 1.5px solid var(--ink);
  padding: .45rem .8rem;
  box-shadow: 3px 3px 0 rgba(23,19,16,.16);
  transform: rotate(-1.2deg);
}
.plabel b { font-family: var(--font-display); font-size: 1.15rem; font-weight: 900; letter-spacing: 0; color: var(--accent); }
html.js [data-reveal] .plabel { opacity: 0; transform: translateX(-18px) rotate(-1.2deg); }
html.js [data-reveal].in .plabel {
  animation: slide-label .5s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: calc(var(--reveal-delay, 0s) + .18s);
}
@keyframes slide-label {
  to { opacity: 1; transform: translateX(0) rotate(-1.2deg); }
}
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] .plabel { opacity: 1; transform: rotate(-1.2deg); animation: none; }
}

/* --- Oversized section number, stencil-ish ------------------------------- */
.secno {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(3.5rem, 9vw, 8rem); line-height: .8;
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 2px var(--rule-strong);
  display: block; margin-bottom: .3em;
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.band-dark .secno, .seq .secno { -webkit-text-stroke-color: color-mix(in srgb, var(--paper) 26%, transparent); }

/* --- Torn paper edge (reusable) ------------------------------------------ */
.torn-bottom { position: relative; }
.torn-bottom::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 22px; z-index: 3;
  background: var(--paper);
  pointer-events: none;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 22' preserveAspectRatio='none'%3E%3Cpath d='M0,22 H1200 V8 C1150,18 1110,4 1060,11 C1010,19 980,5 930,9 C880,15 850,2 800,8 C760,17 720,3 670,9 C620,18 590,5 540,11 C490,20 460,3 410,8 C360,15 330,2 280,9 C230,18 200,5 150,11 C100,17 60,3 30,8 C15,10 5,6 0,8 Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 22' preserveAspectRatio='none'%3E%3Cpath d='M0,22 H1200 V8 C1150,18 1110,4 1060,11 C1010,19 980,5 930,9 C880,15 850,2 800,8 C760,17 720,3 670,9 C620,18 590,5 540,11 C490,20 460,3 410,8 C360,15 330,2 280,9 C230,18 200,5 150,11 C100,17 60,3 30,8 C15,10 5,6 0,8 Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 900px 22px; mask-size: 900px 22px;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
}

/* --- Handwritten butcher annotation -------------------------------------- */
.annot {
  font-family: var(--font-hand);
  font-size: clamp(1.45rem, 2.1vw, 2rem);
  color: var(--accent);
  display: inline-block;
  line-height: 1.25;
}

/* --- Kraft band ----------------------------------------------------------- */
.band-kraft {
  background:
    linear-gradient(rgba(194,171,139,.20), rgba(194,171,139,.20)),
    var(--paper-2);
  border-block: 2px solid var(--ink);
}

/* --- Slabs restyled to charcoal + oxblood -------------------------------- */
.card--slab {
  background:
    radial-gradient(140% 110% at 15% 0%, rgba(242,236,224,.05), transparent 55%),
    linear-gradient(158deg, var(--char-2), var(--char) 72%);
  border: 2px solid var(--ink);
}
.card--slab .slab-no { color: color-mix(in srgb, var(--oxblood-soft) 55%, transparent); }
.card--slab:hover .slab-no { color: color-mix(in srgb, var(--oxblood-soft) 80%, transparent); }
.card--slab .link-cta { border-color: var(--oxblood-soft); }
.card--slab .link-cta:hover { color: var(--paper); border-color: var(--paper); }
.card--slab .ticket-icon path { stroke: var(--paper); }

/* --- Reviews as price cards ---------------------------------------------- */
.reviews { background: var(--ink); border: 2px solid var(--ink); gap: 2px; }
.reviews blockquote { background: var(--paper); }
.reviews footer { color: var(--accent); }

/* --- Tables read like a cut sheet ---------------------------------------- */
.table-wrap { border: 2px solid var(--ink); }
th { background: var(--ink); color: var(--paper); border-bottom: 0; }
td { border-bottom: 1px solid var(--rule); }

/* --- Photo placeholders in the new palette ------------------------------- */
.photo { background: var(--paper-3); border-color: var(--ink); }

/* ==========================================================================
   LOGO — one vector mark, coloured by CSS.
   The supplied artboard carried several overlapping copies plus leftover live
   text that bled into the canvas; assets/img/logo.svg is the single clean
   lockup extracted from it. Painted with currentColor via a mask, so one file
   serves every ground instead of shipping a file per colourway.
   ========================================================================== */
.wordmark {
  display: block; line-height: 0; text-decoration: none;
  color: var(--ink);
  transition: color .3s ease;
}
.wordmark__mark {
  display: block;
  height: var(--logo-h, 54px);
  width: calc(var(--logo-h, 54px) * 2.6863);   /* 455.04 / 169.39 */
  background-color: currentColor;
  -webkit-mask: url("../img/logo.svg") no-repeat center / contain;
          mask: url("../img/logo.svg") no-repeat center / contain;
}
/* over the hero photo the mark reverses; once the bar goes solid it inks up */
.site-header--overlay:not(.is-scrolled) .wordmark { color: var(--paper); }
.site-footer .wordmark,
.band-dark .wordmark { color: var(--paper); }
.site-footer .wordmark { --logo-h: 82px; margin-bottom: .9rem; }
/* header mark was 54px, too timid next to the footer lockup; matched to it */
.site-header .wordmark { --logo-h: 78px; }
@media (max-width: 1000px) { .site-header .wordmark { --logo-h: 60px; } }
@media (max-width: 560px)  { .site-header .wordmark { --logo-h: 46px; } .site-footer .wordmark { --logo-h: 64px; } }

/* --- Tagline (confirmed 2026-08-25) -------------------------------------- */
.tagline {
  font-family: var(--font-ui);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
}
.site-footer .tagline,
.band-dark .tagline { color: color-mix(in srgb, var(--paper) 65%, transparent); }

/* --- Cut chart: anatomical highlight pieces (supplied artwork) ------------ */
.cut-chart .cut-hi {
  /* full-canvas overlays generated from the chart itself — inset:0 guarantees
     pixel-exact registration at every size, with no placement math */
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: multiply;   /* keeps the chart's own labels & lines readable */
  transition: opacity .28s ease, transform .28s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.cut-chart .cut-hi.on { opacity: .82; }
@media (prefers-reduced-motion: reduce) {
  .cut-chart .cut-hi { transition: opacity .01ms; }
}
/* hit regions stay invisible now — the artwork does the highlighting */
.cut-chart .cut polygon { fill: transparent !important; stroke: transparent !important; }

/* ==========================================================================
   VS SLIDER + SPEC CARD — a photo wipe over a butcher's comparison ledger.
   ========================================================================== */
.vs { --pos: 50%; }

/* --- the stage: soft elevation, hairline edge (no hard box) --------------- */
.vs__stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  /* cut-out steaks sit on the butcher paper, not inside a white photo box */
  background:
    radial-gradient(120% 80% at 50% 42%, rgba(120,88,58,.10), transparent 62%),
    linear-gradient(var(--paper-2), var(--paper-3));
  /* cap the height so the whole frame plus the top of the ledger fit one
     screen. With the height definite the box shrinks its width to hold the
     ratio, so centre it rather than letting it sit left. */
  max-height: min(58vh, 560px);
  margin-inline: auto;
  background: var(--paper-2);
  border-radius: 3px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent),
    0 2px 4px rgba(23,19,16,.07),
    0 18px 48px rgba(23,19,16,.16);
  user-select: none; -webkit-user-select: none;
  touch-action: pan-y;
  cursor: ew-resize;
}
@media (max-width: 620px) { .vs__stage { aspect-ratio: 4 / 3; max-height: 48vh; } }

.vs__shot { position: absolute; inset: 0; margin: 0; }
.vs__shot img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Each layer is clipped to its own side of the divider. Relying on the top
   layer to cover the one beneath fails here: the steaks are cut-outs with
   different silhouettes, so the taller one showed around the edges. */
.vs__shot--shop  { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.vs__shot--store { clip-path: inset(0 0 0 var(--pos)); }

.vs__ph {
  position: absolute; inset: 0;
  display: grid; place-content: center; text-align: center; padding: 1.5rem;
  font-family: var(--font-ui); font-size: .66rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  background: var(--paper-3);
}
.vs__ph::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, transparent 0 12px,
    color-mix(in srgb, var(--ink) 9%, transparent) 12px 13px);
}
.vs__shot--store .vs__ph { background: var(--paper-2); }

/* --- hanging butcher tags ------------------------------------------------- */
.vs__tag {
  position: absolute; top: 0; z-index: 3;
  display: flex; flex-direction: column; gap: .1rem;
  padding: .7rem .95rem .6rem;
  font-family: var(--font-ui); font-size: .6rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  background: var(--paper);
  color: var(--ink-3);
  box-shadow: 0 2px 10px rgba(23,19,16,.22);
  pointer-events: none;
  transform-origin: top center;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), 50% 100%, 0 calc(100% - 9px));
  padding-bottom: 1.1rem;
}
.vs__tag b {
  font-family: var(--font-display); font-weight: 900;
  font-size: 1.05rem; letter-spacing: .01em; line-height: 1; color: var(--ink);
}
/* the string it hangs from */
.vs__tag::before {
  content: ""; position: absolute; top: -14px; left: 50%;
  width: 1px; height: 14px; background: color-mix(in srgb, var(--ink) 45%, transparent);
}
/* each tag fades out once its side is no longer on screen */
.vs__tag { transition: opacity .25s ease; }
.vs__tag--shop  {
  left: 6%; transform: rotate(-1.6deg);
}
.vs__tag--shop b { color: var(--oxblood); }
.vs__tag--store {
  right: 6%; transform: rotate(1.6deg);
}
@media (max-width: 620px) {
  .vs__tag { font-size: .52rem; padding: .5rem .6rem .9rem; }
  .vs__tag b { font-size: .82rem; }
}

/* --- the stamp: presses on when the shop side wins ----------------------- */
.vs__stamp {
  position: absolute; z-index: 3;
  right: 7%; bottom: 7%;
  width: clamp(88px, 13%, 150px); height: auto;
  pointer-events: none;
  opacity: 0;
  transform: rotate(-24deg) scale(1.9);
  filter: blur(2px);
  transition: opacity .3s ease, transform .34s cubic-bezier(.2,1.5,.35,1), filter .3s ease;
}
.vs.is-shop .vs__stamp {
  opacity: .92;
  transform: rotate(-11deg) scale(1);
  filter: none;
}

/* --- the blade + machined handle ----------------------------------------- */
.vs__blade {
  position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 2;
  width: 10px; margin-left: -5px;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      transparent 0 3px,
      rgba(23,19,16,.35) 3px 4px,
      #f4f1ea 4px 6px,
      rgba(23,19,16,.28) 6px 7px,
      transparent 7px 10px);
}
.vs__grip {
  position: absolute; top: 50%; left: var(--pos); z-index: 4;
  width: 58px; height: 58px; margin: -29px 0 0 -29px;
  border: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, #fffdf8, #e6e0d3 46%, #c3bcae 78%, #9a9384);
  display: grid; place-items: center;
  cursor: ew-resize;
  box-shadow:
    0 0 0 1px rgba(23,19,16,.35),
    0 6px 16px rgba(23,19,16,.32),
    inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s ease;
}
.vs__grip:hover, .vs__grip:focus-visible {
  transform: scale(1.07);
  box-shadow: 0 0 0 1px rgba(23,19,16,.5), 0 10px 22px rgba(23,19,16,.38), inset 0 1px 0 rgba(255,255,255,.9);
}
.vs__stage.is-dragging .vs__grip { transform: scale(.97); }
.vs__grip::before {
  content: "";
  width: 12px; height: 18px;
  background: repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--ink) 55%, transparent) 0 2px, transparent 2px 5px);
}

/* --- the spec card: one ledger, not two lists ---------------------------- */
.spec {
  margin-top: clamp(2rem, 4vw, 3.2rem);
  border-top: 2px solid var(--ink);
}
.spec__head, .spec__row {
  display: grid;
  grid-template-columns: 1fr minmax(7rem, 12rem) 1fr;
  align-items: center;
  gap: clamp(.75rem, 2vw, 2rem);
}
.spec__head {
  padding-block: .85rem;
  border-bottom: 1px solid var(--rule);
}
.spec__side {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.05rem, 1.7vw, 1.5rem); line-height: 1;
  text-transform: uppercase; margin: 0;
  /* button reset: these are controls that preview their own side */
  appearance: none; border: 0; background: none; padding: 0;
  cursor: pointer; position: relative; display: inline-block;
  justify-self: start;
  transition: transform .28s cubic-bezier(.16,1,.3,1);
}
.spec__side--shop  { color: var(--oxblood); }
.spec__side--store { color: var(--ink-3); text-align: right; justify-self: end; }
/* a rule wipes out from the outer edge, toward the middle of the ledger */
.spec__side::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 3px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .42s cubic-bezier(.16,1,.3,1);
}
.spec__side--store::after { transform-origin: right; }
.spec__side:hover, .spec__side:focus-visible { transform: translateY(-2px); }
.spec__side:hover::after, .spec__side:focus-visible::after { transform: scaleX(1); }

/* hovering a name dims the opposing column so the comparison reads one way */
.spec__shop, .spec__store, .spec__what { transition: opacity .28s ease; }
.spec.peek-shop  .spec__store,
.spec.peek-store .spec__shop { opacity: .3; }
.spec.peek-shop  .spec__side--store,
.spec.peek-store .spec__side--shop { opacity: .45; }

/* the wipe eases only when a name drives it; dragging stays 1:1 */
.vs__stage.is-tweening .vs__shot--shop,
.vs__stage.is-tweening .vs__shot--store { transition: clip-path .5s cubic-bezier(.16,1,.3,1); }
.vs__stage.is-tweening .vs__blade,
.vs__stage.is-tweening .vs__grip { transition: left .5s cubic-bezier(.16,1,.3,1), transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s ease; }
@media (prefers-reduced-motion: reduce) {
  .vs__stage.is-tweening .vs__shot--store,
  .vs__stage.is-tweening .vs__blade,
  .vs__stage.is-tweening .vs__grip { transition: none; }
  .spec__side, .spec__side::after { transition: none; }
}
.spec__col {
  margin: 0; text-align: center;
  font-family: var(--font-ui); font-size: .6rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3);
}

.spec__row {
  padding-block: clamp(.8rem, 1.7vw, 1.15rem);
  /* measurement-tick rule, like a butcher's ruler */
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.spec__row::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 5px;
  background: repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--rule-strong) 90%, transparent) 0 1px, transparent 1px 14px);
  pointer-events: none;
}
.spec__row:last-child { border-bottom: 2px solid var(--ink); }
.spec__row:last-child::after { display: none; }

.spec__shop, .spec__store {
  margin: 0;
  display: flex; align-items: center; gap: .8rem;
  font-size: clamp(.92rem, 1.05vw, 1.02rem); line-height: 1.35;
}
.spec__shop  { color: var(--ink); font-weight: 500; }
.spec__store { color: var(--ink-3); justify-content: flex-end; text-align: right; }
.spec__mark {
  position: relative;
  flex: none;
  width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center;
  font-family: var(--font-ui); font-size: .78rem; font-weight: 700;
}
/* the ring that radiates out of a mark when its row is hovered */
.spec__mark::after {
  content: "";
  position: absolute; inset: -3px;
  border: 2px solid currentColor;
  opacity: 0;
  pointer-events: none;
}

/* --- row hover: the mark pings, the line steps forward ------------------- */
.spec__row { transition: background-color .25s ease; }
.spec__row:hover { background: color-mix(in srgb, var(--oxblood) 5%, transparent); }
.spec__row .spec__shop, .spec__row .spec__store { transition: transform .28s cubic-bezier(.16,1,.3,1), color .25s ease; }
.spec__row:hover .spec__shop  { transform: translateX(4px); }
.spec__row:hover .spec__store { transform: translateX(-4px); color: var(--ink-2); }
.spec__row:hover .spec__what  { color: var(--oxblood); }

.spec__row:hover .spec__shop .spec__mark  { animation: mark-pop .5s cubic-bezier(.2,1.5,.35,1); }
.spec__row:hover .spec__store .spec__mark { animation: mark-pop .5s cubic-bezier(.2,1.5,.35,1) .06s; }
.spec__row:hover .spec__shop .spec__mark::after  { animation: mark-ping .62s ease-out; }
.spec__row:hover .spec__store .spec__mark::after { animation: mark-ping .62s ease-out .06s; }

@keyframes mark-pop {
  0%   { transform: scale(1) rotate(0deg); }
  38%  { transform: scale(1.3) rotate(-7deg); }
  70%  { transform: scale(.95) rotate(2deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes mark-ping {
  0%   { transform: scale(.75); opacity: .75; }
  100% { transform: scale(1.75); opacity: 0; }
}
/* --- a clicked row stays selected: fuller highlight, more presence ------- */
.spec__row {
  transition: background-color .25s ease, padding .3s cubic-bezier(.16,1,.3,1);
}
.spec__row.is-selected {
  background: color-mix(in srgb, var(--oxblood) 11%, transparent);
  padding-block: clamp(1.15rem, 2.4vw, 1.65rem);
}
.spec__row.is-selected .spec__shop  { color: var(--ink); font-weight: 600; transform: translateX(6px); }
.spec__row.is-selected .spec__store { color: var(--ink-2); transform: translateX(-6px); }
.spec__row.is-selected .spec__what  { color: var(--oxblood); }
.spec__row.is-selected .spec__mark  { transform: scale(1.18); }
.spec__row .spec__mark { transition: transform .3s cubic-bezier(.2,1.4,.35,1); }
/* re-fire the pop each time a row is picked */
.spec__row.is-picking .spec__shop .spec__mark  { animation: mark-pop .5s cubic-bezier(.2,1.5,.35,1); }
.spec__row.is-picking .spec__store .spec__mark { animation: mark-pop .5s cubic-bezier(.2,1.5,.35,1) .06s; }
.spec__row.is-picking .spec__shop .spec__mark::after  { animation: mark-ping .62s ease-out; }
.spec__row.is-picking .spec__store .spec__mark::after { animation: mark-ping .62s ease-out .06s; }
.spec__row { cursor: pointer; }
.spec__row:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .spec__row:hover .spec__shop .spec__mark,
  .spec__row:hover .spec__store .spec__mark,
  .spec__row:hover .spec__shop .spec__mark::after,
  .spec__row:hover .spec__store .spec__mark::after,
  .spec__row.is-picking .spec__shop .spec__mark,
  .spec__row.is-picking .spec__store .spec__mark { animation: none; }
  .spec__row:hover .spec__shop, .spec__row:hover .spec__store { transform: none; }
}
.spec__shop .spec__mark  { background: var(--oxblood); color: var(--paper); }
.spec__store .spec__mark { border: 1.5px solid var(--rule-strong); color: var(--steel); }

.spec__what {
  margin: 0; text-align: center;
  font-family: var(--font-ui); font-size: .62rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2);
}

/* Small screens: each row becomes a labelled pair, attribute then our claim
   then theirs. The head stays as a two-up legend; hiding it (as this block used
   to) left the two lines unattributed, which is what made it read as a jumble. */
@media (max-width: 700px) {
  .spec__head {
    grid-template-columns: 1fr auto; gap: .9rem;
    padding-block: .8rem; align-items: baseline;
  }
  .spec__col { display: none; }
  .spec__side { font-size: 1rem; letter-spacing: .01em; }
  .spec__side--store { text-align: right; justify-self: end; }

  .spec__row { grid-template-columns: 1fr; gap: .4rem; padding-block: 1.05rem 1.15rem; }
  .spec__what {
    text-align: left; order: -1; color: var(--ink-3);
    font-size: .58rem; letter-spacing: .2em;
  }
  .spec__shop, .spec__store {
    justify-content: flex-start; text-align: left;
    gap: .55rem; font-size: .95rem;
  }
  .spec__shop { font-weight: 600; }
  /* the mark trails the text in the markup; pull it left so both claims line up */
  .spec__store { flex-direction: row-reverse; justify-content: flex-end; }
  .spec__mark { width: 1.3rem; height: 1.3rem; font-size: .72rem; }
}
html:not(.js) .vs__shot--shop  { clip-path: inset(0 50% 0 0); }
html:not(.js) .vs__shot--store { clip-path: inset(0 0 0 50%); }

/* --- Cut chart: anatomical highlight pieces (supplied artwork) ------------ */
.cut-chart .cut-hi {
  /* full-canvas overlays generated from the chart itself — inset:0 guarantees
     pixel-exact registration at every size, with no placement math */
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: multiply;   /* keeps the chart's own labels & lines readable */
  transition: opacity .28s ease, transform .28s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.cut-chart .cut-hi.on { opacity: .82; }
@media (prefers-reduced-motion: reduce) {
  .cut-chart .cut-hi { transition: opacity .01ms; }
}
/* hit regions stay invisible now — the artwork does the highlighting */
.cut-chart .cut polygon { fill: transparent !important; stroke: transparent !important; }

/* --- real photography: registration brackets, not a frame ---------------- */
/* Four L-brackets drawn as corner gradients, the way crop marks sit on a
   press sheet. No box around the picture, so it reads as work in progress
   on the bench rather than a framed print. */
.photo--real {
  /* .photo centres its child; a real print must fill the slot instead */
  display: block;
  --bkt: 3px;                 /* bracket weight */
  --bkl: clamp(20px, 4vw, 34px);  /* bracket length */
  --bkc: var(--oxblood);
  position: relative;
  border: 0;
  background: none;
  padding: clamp(9px, 1.4vw, 14px);
  transition: padding .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1);
}
.photo--real::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--bkc) 0 0) 0    0    / var(--bkl) var(--bkt) no-repeat,
    linear-gradient(var(--bkc) 0 0) 0    0    / var(--bkt) var(--bkl) no-repeat,
    linear-gradient(var(--bkc) 0 0) 100% 0    / var(--bkl) var(--bkt) no-repeat,
    linear-gradient(var(--bkc) 0 0) 100% 0    / var(--bkt) var(--bkl) no-repeat,
    linear-gradient(var(--bkc) 0 0) 0    100% / var(--bkl) var(--bkt) no-repeat,
    linear-gradient(var(--bkc) 0 0) 0    100% / var(--bkt) var(--bkl) no-repeat,
    linear-gradient(var(--bkc) 0 0) 100% 100% / var(--bkl) var(--bkt) no-repeat,
    linear-gradient(var(--bkc) 0 0) 100% 100% / var(--bkt) var(--bkl) no-repeat;
  transition: opacity .3s ease;
}
.photo--real img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* the print sits on the bench: hard offset, same language as the buttons */
  box-shadow: 5px 5px 0 var(--ink);
  transition: box-shadow .35s cubic-bezier(.16,1,.3,1);
}
/* brackets pull outward and the print settles as you approach it */
.photo--real:hover { padding: clamp(13px, 2vw, 20px); }
.photo--real:hover img { box-shadow: 3px 3px 0 var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .photo--real, .photo--real img { transition: none; }
  .photo--real:hover { padding: clamp(9px, 1.4vw, 14px); }
}

/* on dark grounds the brackets and shadow flip to paper */
.band-dark .photo--real { --bkc: var(--oxblood-soft); }
.band-dark .photo--real img { box-shadow: 5px 5px 0 var(--paper); }
.band-dark .photo--real:hover img { box-shadow: 3px 3px 0 var(--paper); }

/* --- category icons (recoloured from the client's own artwork) ----------- */

/* ==========================================================================
   REVIEW LABEL — a review printed as the label off a wrapped package.
   Built from the client's reference: stained card stock, motto rule with a
   cleaver, product name, barn vignette, quote, customer/date row, round
   stamp, and a pinked thank-you banner.
   ========================================================================== */
.rlabel {
  --edge: color-mix(in srgb, #6b4f38 22%, transparent);
  position: relative;
  display: flex; flex-direction: column;
  background:
    radial-gradient(120% 70% at 8% 4%,   rgba(120,88,58,.13), transparent 55%),
    radial-gradient(110% 80% at 96% 10%, rgba(120,88,58,.11), transparent 52%),
    radial-gradient(130% 70% at 90% 98%, rgba(120,88,58,.15), transparent 55%),
    radial-gradient(120% 80% at 4% 96%,  rgba(120,88,58,.12), transparent 52%),
    linear-gradient(#f4ecdc, #efe5d1);
  border-radius: 6px;
  box-shadow:
    0 0 0 1px rgba(90,66,44,.22),
    inset 0 0 40px rgba(120,88,58,.14),
    0 10px 26px rgba(23,19,16,.18);
  overflow: hidden;
  color: var(--ink);
}
/* paper grain */
.rlabel::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}
.rlabel > * { position: relative; z-index: 1; }

/* --- top bar: est. + motto with a cleaver -------------------------------- */
.rlabel__top {
  display: flex; align-items: center; gap: 1rem;
  padding: clamp(.9rem, 2vw, 1.15rem) clamp(1rem, 2.4vw, 1.5rem) .75rem;
  border-bottom: 1.5px solid color-mix(in srgb, var(--ink) 55%, transparent);
}
.rlabel__est {
  font-family: var(--font-ui); font-size: .58rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--oxblood);
  line-height: 1.15; flex: none; text-align: center;
}
.rlabel__est b { display: block; font-size: .82rem; letter-spacing: .08em; }
/* the strip carries the rating now, not the motto */
.rlabel__motto {
  margin: 0 auto; display: flex; align-items: center; justify-content: center;
  color: var(--oxblood); line-height: 1;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  letter-spacing: clamp(.12em, .5vw, .3em);
  white-space: nowrap; min-width: 0; max-width: none;
}
.rlabel__cleaver { width: clamp(20px, 2.4vw, 30px); }
.rlabel__motto i { color: var(--oxblood); font-style: normal; }
.rlabel__cleaver {
  width: 30px; height: 15px; flex: none;
  background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Cpath d='M4 6h30a3 3 0 0 1 3 3v11a3 3 0 0 1-3 3H4z'/%3E%3Crect x='36' y='12' width='21' height='4' rx='2'/%3E%3C/svg%3E") no-repeat center/contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Cpath d='M4 6h30a3 3 0 0 1 3 3v11a3 3 0 0 1-3 3H4z'/%3E%3Crect x='36' y='12' width='21' height='4' rx='2'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* --- product name + barn vignette ---------------------------------------- */
.rlabel__head {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: clamp(.75rem, 2vw, 1.25rem);
  padding: clamp(.9rem, 2vw, 1.2rem) clamp(1rem, 2.4vw, 1.5rem) 0;
}
.rlabel__cut {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.5rem, 3.1vw, 2.35rem); line-height: .92;
  letter-spacing: -.005em; text-transform: uppercase;
  color: var(--oxblood); margin: 0;
}
.rlabel__barn {
  width: clamp(64px, 8vw, 92px); aspect-ratio: 1.35;
  flex: none;
  border-left: 1.5px solid color-mix(in srgb, var(--ink) 30%, transparent);
  padding-left: clamp(.6rem, 1.4vw, 1rem);
  background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 100'%3E%3Cg fill='none' stroke='%23000' stroke-width='3.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M18 40 L18 84 M40 40 L40 84 M18 40 Q29 24 40 40 M18 84 H40'/%3E%3Cpath d='M18 40 Q29 30 40 40'/%3E%3Cpath d='M52 84 V52 L78 34 L104 52 V84 Z'/%3E%3Cpath d='M52 60 H104'/%3E%3Cpath d='M70 84 V66 H86 V84'/%3E%3Cpath d='M78 34 L78 44'/%3E%3Cpath d='M6 86 H130'/%3E%3Cpath d='M6 92 H36 M46 92 H90 M100 92 H130'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 100'%3E%3Cg fill='none' stroke='%23000' stroke-width='3.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M18 40 L18 84 M40 40 L40 84 M18 40 Q29 24 40 40 M18 84 H40'/%3E%3Cpath d='M18 40 Q29 30 40 40'/%3E%3Cpath d='M52 84 V52 L78 34 L104 52 V84 Z'/%3E%3Cpath d='M52 60 H104'/%3E%3Cpath d='M70 84 V66 H86 V84'/%3E%3Cpath d='M78 34 L78 44'/%3E%3Cpath d='M6 86 H130'/%3E%3Cpath d='M6 92 H36 M46 92 H90 M100 92 H130'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
}

/* --- dotted rule ---------------------------------------------------------- */
.rlabel__dots {
  height: 4px; margin: clamp(.7rem,1.6vw,1rem) clamp(1rem,2.4vw,1.5rem) 0;
  background: radial-gradient(circle, var(--ink) 40%, transparent 45%) repeat-x left center / 13px 4px;
}

/* --- the quote ------------------------------------------------------------ */
.rlabel__quote {
  margin: 0; padding: clamp(1rem,2.2vw,1.4rem) clamp(1rem,2.4vw,1.5rem) clamp(1.1rem,2.4vw,1.5rem);
  display: grid; grid-template-columns: auto 1fr; gap: .5rem .7rem;
  flex: 1;
}
.rlabel__mark {
  font-family: var(--font-display); font-weight: 900;
  font-size: 2.6rem; line-height: .72; color: var(--oxblood);
  user-select: none;
}
.rlabel__quote p {
  margin: 0; max-width: none;
  font-family: var(--font-type); font-size: clamp(.88rem, 1.05vw, .98rem);
  line-height: 1.75; color: var(--ink);
}

/* --- customer / date row -------------------------------------------------- */
.rlabel__meta {
  position: relative;
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: clamp(.6rem, 1.4vw, 1.1rem);
  padding: clamp(.8rem,1.8vw,1rem) clamp(1rem,2.4vw,1.5rem);
  border-top: 1.5px solid color-mix(in srgb, var(--ink) 40%, transparent);
}
.rlabel__field {
  font-family: var(--font-ui); font-size: .55rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--oxblood);
}
.rlabel__field b {
  display: block; margin-top: .3rem;
  font-family: var(--font-type); font-size: .95rem; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--ink);
}
.rlabel__field--date { padding-left: clamp(.9rem,2vw,1.4rem); border-left: 1.5px dotted color-mix(in srgb, var(--ink) 45%, transparent); }
.rlabel__field--date b { font-family: var(--font-hand); font-size: 1.35rem; color: var(--oxblood); }
.rlabel__stamp {
  /* the same stamp used in the Why we're here section, so the site has one */
  width: clamp(56px, 7vw, 82px); aspect-ratio: 1;
  justify-self: end; align-self: center;
  transform: rotate(-9deg); opacity: .85; pointer-events: none;
  background: url("../img/stamp-dry-aged.webp") no-repeat center / contain;
}

/* --- pinked thank-you banner --------------------------------------------- */
.rlabel__banner {
  position: relative;
  margin-top: auto;
  max-width: none;   /* <p> otherwise inherits the global measure cap */
  background: var(--oxblood);
  color: color-mix(in srgb, var(--paper) 92%, var(--oxblood));
  padding: clamp(.65rem,1.5vw,.85rem) 1rem clamp(.55rem,1.2vw,.7rem);
  text-align: center;
  font-family: var(--font-ui); font-size: .58rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  flex-wrap: wrap;
}
/* the pinked (zigzag) top edge */
.rlabel__banner::before {
  content: ""; position: absolute; left: 0; right: 0; top: -7px; height: 8px;
  background: var(--oxblood);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8' preserveAspectRatio='none'%3E%3Cpath d='M0 8 L8 0 L16 8 Z'/%3E%3C/svg%3E") repeat-x bottom/16px 8px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8' preserveAspectRatio='none'%3E%3Cpath d='M0 8 L8 0 L16 8 Z'/%3E%3C/svg%3E") repeat-x bottom/16px 8px;
}
.rlabel__banner i {
  font-family: var(--font-hand); font-style: normal;
  font-size: 1.05rem; letter-spacing: .01em; text-transform: none;
}
.rlabel__banner s { text-decoration: none; color: color-mix(in srgb, var(--paper) 70%, var(--oxblood)); }

/* --- carousel: two across, one on small screens, swipeable ------------- */
.rcar { position: relative; }
.rcar__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;                       /* one per view on mobile */
  gap: clamp(1rem, 2.4vw, 1.9rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: .5rem;
  /* the native scrollbar would fight the paper; the controls carry it */
  scrollbar-width: none;
}
.rcar__track::-webkit-scrollbar { display: none; }
.rcar__track > * { scroll-snap-align: start; }
@media (min-width: 860px) {
  .rcar__track { grid-auto-columns: calc(50% - clamp(1rem, 2.4vw, 1.9rem) / 2); }
}
/* three across on desktop; the rest stay reachable by scroll, arrows and dots */
@media (min-width: 1100px) {
  .rcar__track { grid-auto-columns: calc(33.333% - clamp(1rem, 2.4vw, 1.9rem) * 2 / 3); }
}
@media (prefers-reduced-motion: reduce) { .rcar__track { scroll-behavior: auto; } }

.rcar__nav {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.8rem, 2vw, 1.4rem);
  margin-top: clamp(1.2rem, 2.6vw, 1.8rem);
}
.rcar__btn {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  background: transparent;
  border: 2px solid var(--ink);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color .2s ease, transform .12s ease, box-shadow .12s ease;
  box-shadow: 3px 3px 0 var(--ink);
}
.rcar__btn:hover:not(:disabled) { background: var(--ink); transform: translate(1px,1px); box-shadow: 2px 2px 0 var(--ink); }
.rcar__btn:disabled { opacity: .28; cursor: default; box-shadow: none; }
/* chevrons drawn, not glyphs */
.rcar__btn::before {
  content: ""; width: 9px; height: 9px;
  border-left: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink);
  transition: border-color .2s ease;
}
.rcar__btn[data-dir="1"]::before { transform: rotate(-135deg); margin-left: -4px; }
.rcar__btn[data-dir="-1"]::before { transform: rotate(45deg); margin-right: -4px; }
.rcar__btn:hover:not(:disabled)::before { border-color: var(--paper); }

.rcar__dots { display: flex; gap: .45rem; align-items: center; }
.rcar__dot {
  width: 26px; height: 5px; padding: 0;
  border: 0; background: var(--rule-strong); cursor: pointer;
  transition: background-color .25s ease, width .25s ease;
}
.rcar__dot[aria-current="true"] { background: var(--oxblood); width: 40px; }

@media (prefers-reduced-motion: reduce) { .rlabel, .rlabel:hover { transition: none; transform: none; } }

/* --- best sellers: slots that read as designed while photos are pending --- */
.best__shot { position: relative; background: var(--paper-3); border-color: var(--ink); }
.best__soon {
  position: relative; z-index: 1;
  font-family: var(--font-ui); font-size: .58rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
  background: none; border: 0; padding: 0;
}
/* the dry-aged stamp is a beef claim; it does not belong on brats, franks,
   bacon or ham, so the best-seller cards carry no seal. */
.card--best h3 { margin-top: 1rem; }
/* real product shot fills the square slot; the hatch and label step aside */
.best__shot--real { padding: 0; overflow: hidden; display: block; }
.best__shot--real::before { display: none; }
.best__shot--real img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The shop's own seal, sat on the corner of the shot. Gold where the product
   holds a gold medal, the red stamp otherwise. Scoped under .best__shot and
   reset, because a bare span in a .photo is the placeholder label and picks up
   its border, padding and cream ground. Inset rather than overhanging, since
   .best__shot--real clips its overflow to hold the photo square. */
.best__shot .best__seal {
  position: absolute; display: block; right: 9px; bottom: 9px; z-index: 2;
  width: clamp(54px, 26%, 86px); aspect-ratio: 1;
  max-width: none; padding: 0; border: 0; background: none;
  transform: rotate(-7deg);
  transition: transform .35s ease;
  filter: drop-shadow(0 4px 10px rgba(20, 16, 13, .35));
  pointer-events: none;
}
.best__shot .best__seal img { width: 100%; height: 100%; display: block; }
.card--best:hover .best__shot .best__seal { transform: rotate(-3deg) scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .best__shot .best__seal { transition: none; }
  .card--best:hover .best__shot .best__seal { transform: rotate(-7deg); }
}


/* ==========================================================================
   SHARED PRODUCT LANGUAGE
   Promoted out of index.html on 2026-08-26 so the sub-pages can use it too.
   Was homepage-inline, which is why nothing here reached them before.
   ========================================================================== */

/* --- best sellers: no box fill, the frame sits around the picture -------- */
.card--best {
  position: relative; background: none; border: 0; padding: 0; overflow: visible;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.card--best:hover { transform: translateY(-4px); }
.card--best .best__shot {
  border: 2px solid var(--ink);
  outline: 1px solid color-mix(in srgb, var(--ink) 42%, transparent);
  outline-offset: 6px;
}
.card--best h3 {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1rem,1.5vw,1.25rem); line-height: 1.05; letter-spacing: .04em;
  color: var(--ink); text-align: center;
  margin: .95rem 0 0;
  padding-top: .6rem; border-top: 2px solid var(--oxblood);
}
.card--best p {
  font-family: var(--font-ui); font-size: .8rem; color: var(--ink-3);
  text-align: center; margin: .35rem 0 0;
}
@media (prefers-reduced-motion: reduce) { .card--best:hover { transform: none; } }

/* --- products: the vintage category signs -------------------------------- */
.products { padding-block: clamp(5rem, 12vh, 9rem); background: var(--paper-2); }
/* auto-fit rather than fixed counts: the column count steps 1-2-3-4 on its own
   as space allows, instead of halving tile width at a single breakpoint. */
.signgrid {
  display: grid; gap: clamp(.9rem, 1.6vw, 1.1rem); margin-top: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr));
}

.sign {
  position: relative; aspect-ratio: 4/3; display: block; width: 100%;
  padding: 0; border: 0; background: var(--char); overflow: hidden;
  cursor: pointer; font: inherit; color: var(--paper);
  container-type: inline-size;
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}
.sign:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(20,16,13,.35); }
.sign:focus-visible { outline: 3px solid var(--oxblood); outline-offset: 3px; }
.sign__bg {
  position: absolute; inset: 0;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  filter: brightness(.58) contrast(1.04) saturate(.95);
  transition: transform .6s cubic-bezier(.16,1,.3,1), filter .35s ease;
}
.sign:hover .sign__bg { transform: scale(1.045); filter: brightness(.66) contrast(1.04) saturate(.98); }
.sign__vig { position: absolute; inset: 0;
  background: radial-gradient(125% 95% at 50% 45%, transparent 40%, rgba(20,16,13,.52) 100%); }
.sign__grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .3; mix-blend-mode: overlay;
  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.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}
.sign__inner {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3.4cqw; padding: 9%;
}
.sign__seal {
  width: 21%; aspect-ratio: 1; border-radius: 50%; background: var(--oxblood);
  display: grid; place-items: center; flex: none;
  box-shadow: inset 0 0 0 2px var(--oxblood), inset 0 0 0 3px rgba(242,236,224,.8);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
}
/* hover A: the seal presses, like a stamp coming down */
.sign:hover .sign__seal {
  transform: rotate(-8deg) scale(1.1);
  box-shadow: inset 0 0 0 2px var(--oxblood), inset 0 0 0 3px rgba(242,236,224,.95),
              0 8px 20px rgba(20,16,13,.45);
}
/* hover C: the item count reveals. Space is reserved so nothing shifts. */
/* Visible by default so touch users never lose the count; the reveal is an
   enhancement only where a real pointer can hover. */
.sign__count {
  font-family: var(--font-ui); font-weight: 700; font-size: clamp(.5rem, 1.6cqw, .68rem);
  letter-spacing: .2em; text-transform: uppercase; flex: none;
  color: color-mix(in srgb, var(--paper) 82%, transparent);
  transition: opacity .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
@media (hover: hover) and (pointer: fine) {
  .sign__count { opacity: 0; transform: translateY(5px); }
  .sign:hover .sign__count, .sign:focus-visible .sign__count { opacity: 1; transform: none; }
.sign__note {
  font-family: var(--font-ui); font-weight: 600; font-size: clamp(.46rem, 1.35cqw, .6rem);
  letter-spacing: .1em; text-transform: uppercase; flex: none; max-width: 88%;
  text-align: center; line-height: 1.35; margin-top: -1.6cqw;
  color: var(--paper);
  text-shadow: 0 1px 6px rgba(20,16,13,.85);
}
}
@media (prefers-reduced-motion: reduce) {
  .sign__seal, .sign__count { transition: none; }
  .sign:hover .sign__seal { transform: none; }
}
.sign__glyph {
  width: 56%; aspect-ratio: 1; background-color: var(--paper);
  -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain;
          mask-repeat: no-repeat;         mask-position: center;         mask-size: contain;
}
.sign__title {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.3rem, 13cqw, 3.3rem); line-height: 1; letter-spacing: .02em;
  text-align: center; margin: 0; flex: none; color: var(--paper);
  text-shadow: 0 2px 10px rgba(20,16,13,.5);
}
.sign__btn {
  background: var(--oxblood); color: var(--paper);
  font-family: var(--font-ui); font-weight: 700;
  font-size: clamp(.56rem, 1.9cqw, .8rem); letter-spacing: .2em; text-transform: uppercase;
  padding: .8em 2em; flex: none; margin-top: 1cqw;
  box-shadow: inset 0 0 0 1px var(--oxblood), inset 0 0 0 2px rgba(242,236,224,.9);
  transition: background-color .22s ease;
}
.sign:hover .sign__btn { background: var(--oxblood-deep); }
@media (prefers-reduced-motion: reduce) {
  .sign, .sign__bg { transition: none; }
  .sign:hover { transform: none; } .sign:hover .sign__bg { transform: none; }
}

/* --- products popup: the parchment menu card ----------------------------- */
.pmodal {
  border: 0; padding: 0; background: none; overflow: visible;
  max-width: min(660px, 94vw); width: 100%;
}
.pmodal::backdrop { background: rgba(20,16,13,.78); }
.pmodal__sheet {
  position: relative; isolation: isolate;
  padding: clamp(2.4rem,4.4vw,3.4rem) clamp(1.8rem,3.6vw,3rem) clamp(2rem,3.6vw,3rem);
  color: var(--ink);
  background: #e8dec6;
  box-shadow: 0 34px 90px rgba(0,0,0,.55);
}
.pmodal__sheet::before,
.pmodal__sheet::after { content: ""; position: absolute; pointer-events: none; }
.pmodal__sheet::before {
  inset: 10px; border: 2px solid var(--ink); border-radius: 12px; opacity: .82;
}
.pmodal__sheet::after {
  inset: 19px; border: 1px solid var(--ink); border-radius: 7px; opacity: .5;
}
.pmodal__close {
  position: absolute; top: clamp(.9rem,2vw,1.5rem); right: clamp(.9rem,2vw,1.5rem); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--oxblood); display: grid; place-items: center;
  transition: background-color .22s ease, transform .22s ease;
}
.pmodal__close:hover { background: var(--oxblood-deep); transform: rotate(90deg); }
.pmodal__close::before, .pmodal__close::after {
  content: ""; position: absolute; width: 18px; height: 2px; background: var(--paper);
}
.pmodal__close::before { transform: rotate(45deg); }
.pmodal__close::after  { transform: rotate(-45deg); }

.pmodal__head {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.9rem,2vw,1.6rem); margin: 0 0 clamp(1.6rem,3vw,2.4rem);
  padding-inline: clamp(1.5rem,4vw,3.5rem);
}
.pmodal__seal {
  width: clamp(58px,8vw,104px); aspect-ratio: 1; border-radius: 50%;
  background: var(--oxblood); display: grid; place-items: center; flex: none;
  box-shadow: inset 0 0 0 2px var(--oxblood), inset 0 0 0 3px rgba(242,236,224,.8);
}
.pmodal__glyph {
  width: 56%; aspect-ratio: 1; background-color: var(--paper);
  -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain;
          mask-repeat: no-repeat;         mask-position: center;         mask-size: contain;
}
.pmodal__title {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(2rem,6.4vw,4rem); line-height: .92; letter-spacing: .04em;
  margin: 0; color: #241c14; text-wrap: balance;
}
.pmodal__sub {
  font-family: var(--font-ui); font-size: .62rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: color-mix(in srgb, #241c14 55%, transparent);
  margin: .4rem 0 0; text-align: center;
}
/* one column that scrolls, rather than two that read side by side */
.pmodal__note {
  font-family: var(--font-ui); font-size: .64rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.5;
  color: var(--oxblood); margin: .5rem 0 0; text-align: center;
}
.pmodal__body {
  position: relative; max-height: min(66vh, 680px); overflow-y: auto;
  overscroll-behavior: contain;      /* stop the page scrolling at the list ends */
  padding-inline: clamp(1rem,2.4vw,2rem);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--oxblood) 70%, transparent) transparent;
}
.pmodal__body::-webkit-scrollbar { width: 8px; }
.pmodal__body::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--oxblood) 70%, transparent);
}
.pmodal__body::-webkit-scrollbar-track { background: transparent; }

.pgroup { margin: 0 0 1.6rem; }
.pgroup h3 {
  display: flex; align-items: center; gap: .55rem; margin: 0 0 .7rem;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.05rem,2.2vw,1.5rem); line-height: 1; letter-spacing: .06em;
  color: #241c14;
}
.pgroup h3 i { flex: 1; height: 2px; background: var(--oxblood); min-width: 14px; }
.pgroup ul { list-style: none; margin: 0; padding: 0; }
.pgroup li {
  display: flex; gap: .55rem; align-items: flex-start; flex-wrap: wrap;
  font-family: var(--font-ui); font-size: clamp(.85rem,1.5vw,.98rem); line-height: 1.4;
  padding: .26rem 0; color: #3a2f24;
}
.pchev { position: relative; width: 13px; height: 1em; flex: none; }
.pchev::before, .pchev::after {
  content: ""; position: absolute; top: .32em; width: 6px; height: 6px;
  border-right: 2px solid var(--oxblood); border-top: 2px solid var(--oxblood);
  transform: rotate(45deg);
}
.pchev::before { left: 0; } .pchev::after { left: 5px; }
.pflag {
  font-family: var(--font-ui); font-size: .56rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; padding: .16rem .42rem; white-space: nowrap; align-self: center;
}
.pflag--award { background: var(--oxblood); color: var(--paper); }
.pflag--wood { border: 1px solid color-mix(in srgb, #3a2f24 35%, transparent); color: #6b5c4a; }
@media (prefers-reduced-motion: reduce) { .pmodal__close:hover { transform: none; } }

/* ==========================================================================
   SUB-PAGE ALIGNMENT (2026-08-26)
   The sub-pages carried the palette and type but none of the homepage's
   card, photo or dark-band treatment, because all of it was inline in
   index.html. These rules bring them onto the same language.
   ========================================================================== */

/* Photographs get the frame outside the picture, as on the best sellers. */
.hero__grid .photo,
.card .photo,
.photo--real {
  border: 2px solid var(--ink);
  outline: 1px solid color-mix(in srgb, var(--ink) 42%, transparent);
  outline-offset: 6px;
}
.band-dark .hero__grid .photo,
.band-dark .card .photo,
.band-dark .photo--real {
  border-color: var(--paper);
  outline-color: color-mix(in srgb, var(--paper) 40%, transparent);
}

/* Cards: name over an oxblood rule, matching the best-seller cards. */
.card > h3 {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.05; letter-spacing: .04em;
  padding-top: .6rem; border-top: 2px solid var(--oxblood);
  margin-bottom: .5rem;
}
.band-dark .card > h3 { border-top-color: var(--oxblood); }
.card--raised { background: none; border: 0; box-shadow: none; padding: 0; }
.card--raised:hover { transform: translateY(-4px); box-shadow: none; }
.card--raised .photo { margin: 0 0 1.3rem; border-inline: 2px solid var(--ink); border-top: 2px solid var(--ink); }

/* Sub-page hero: same rhythm and headline weight as the homepage sections. */
.hero { padding-block: clamp(4rem, 10vw, 8rem) clamp(3rem, 7vw, 5.5rem); }
.hero h1 {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  letter-spacing: -.03em; line-height: .96;
  font-size: clamp(2.2rem, 5.6vw, 4.2rem);
}
.hero .lede { max-width: 38ch; }
/* NOT align-self:stretch: with .photo's aspect-ratio the row height would
   drive the width and the picture blows out of its grid track above 900px. */
.hero__grid .photo { align-self: center; }

/* Dark bands pick up the smoke and grain the dry-aging panel uses. */
.band-dark { position: relative; isolation: isolate; overflow: hidden; }
.band-dark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  opacity: .22; mix-blend-mode: overlay;
  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.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}
.band-dark h2 { letter-spacing: -.02em; }

/* The sign row sits on paper-2 wherever it appears, as on the homepage. */
.products { padding-block: clamp(5rem, 12vh, 9rem); background: var(--paper-2); }

/* ==========================================================================
   RESPONSIVE QA (2026-08-26). Fluid fixes only; desktop layout unchanged.
   ========================================================================== */

/* Nothing may push the page sideways. overflow-x:hidden would make body a
   scroll container and kill position:sticky on the dry-aging panel, so use
   clip, which does not. Overflow is verified zero at every width regardless. */
html, body { max-width: 100%; }
body { overflow-x: clip; }

/* Touch targets. Hit areas grow without moving anything visually. */
.nav-toggle { min-height: 44px; min-width: 44px; }
.link-cta { position: relative; }
.link-cta::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: 50%; height: 44px; transform: translateY(-50%);
}
.rcar__dot { position: relative; }
.rcar__dot::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: 50%; height: 44px; transform: translateY(-50%);
}
.spec__side { position: relative; }
@media (pointer: coarse) {
  .spec__side { min-height: 44px; }
  .nav a { padding-block: .55rem; }
}

/* Lift effects are pointless on touch and can stick after a tap. */
@media (hover: none) {
  .card--best:hover, .sign:hover, .card--raised:hover { transform: none; }
}

/* The cow starts fully off-canvas at zero progress; keep it on the line. */
.seq__cow { min-width: 46px; }

/* Popup on small screens: full width, comfortable scroll, bigger close target. */
@media (max-width: 600px) {
  .pmodal { max-width: 96vw; }
  .pmodal__sheet { padding: 2.6rem 1.1rem 1.6rem; }
  .pmodal__head { flex-direction: column; gap: .7rem; text-align: center; padding-inline: 0; }
  .pmodal__body { max-height: 62vh; padding-inline: .2rem; }
  .pmodal__close { width: 46px; height: 46px; top: .7rem; right: .7rem; }
}

/* One wide tile per row reads better as a band than a big square. */
@media (max-width: 560px) { .sign { aspect-ratio: 16 / 9; } }


/* Long CTA labels must not set a minimum page width on small phones. */
@media (max-width: 480px) {
  .btn { width: 100%; justify-content: center; text-align: center; white-space: normal; }
  .btn-row { flex-direction: column; align-items: stretch; gap: .8rem; }
  .btn-row .btn { margin: 0; }
}

/* Footer and colophon links are navigation, so they get real tap area. */
@media (pointer: coarse) {
  .site-footer li a, .colophon a { display: inline-block; padding-block: .5rem; }
  .site-footer ul { gap: .2rem; }
}

/* Touch has no hover, so hint the tappable regions rather than relying on it. */
@media (pointer: coarse) {
  .cut-chart .cut polygon { stroke: color-mix(in srgb, var(--ink) 14%, transparent); }
}

/* Modal must stay usable in landscape, where 62vh is only a couple of rows. */
@media (max-height: 520px) {
  .pmodal__sheet { padding-block: 1.6rem 1rem; }
  .pmodal__body { max-height: 52vh; }
  .pmodal__title { font-size: clamp(1.4rem, 5vw, 2rem); }
  .pmodal__seal { width: clamp(44px, 6vw, 64px); }
}

/* Reviews: one full-width label per view on phones, snap kept. */
@media (max-width: 560px) {
  .rcar__track { grid-auto-columns: 100%; }
}

.footer-feature-wrap { margin: 1.2rem 0 0; max-width: none; }
/* Employment reads as a white button with black text. It sits under the
   wordmark in the bottom left rather than in Quick Links, so it is the one
   thing in the footer that reads as a call to action. */
.site-footer .footer-feature {
  display: inline-block; text-decoration: none;
  font-family: var(--font-ui); font-weight: 700;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); background: var(--paper);
  border: 0; padding: .58rem .95rem; margin-bottom: .45rem;
  transition: background .2s ease, color .2s ease;
}
.site-footer .footer-feature:hover { background: var(--oxblood); color: var(--paper); }
@media (prefers-reduced-motion: reduce) { .site-footer .footer-feature { transition: none; } }

/* --- a closing band that runs a photo under the final call to action ----- */
.endshot {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(4rem, 10vh, 7rem) !important;
  text-align: center; background: var(--char); color: var(--paper);
  border: 0 !important;
}
.endshot__img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.endshot::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(14,12,9,.74), rgba(14,12,9,.9));
}
.endshot h2 { color: var(--paper); margin-inline: auto; }
.endshot p { color: color-mix(in srgb, var(--paper) 78%, transparent); margin-inline: auto; }
.endshot .btn-row { margin-top: 1.3rem; }
.colophon__legal a { text-decoration: none; border-bottom: 1px solid transparent; }
.colophon__legal a:hover { border-color: currentColor; }

/* --- Review stars and the Google rating button ------------------------- */
.greview {
  /* centred under the carousel, which is where it reads as the section's
     one action now the slaughter CTA has come off this block */
  display: flex; width: fit-content; margin-inline: auto;
  align-items: center; gap: .7rem;
  margin-top: clamp(1.4rem, 2.6vw, 2rem); padding: .75rem 1.2rem;
  background: var(--paper); border: 2px solid var(--ink);
  text-decoration: none; color: var(--ink);
  transition: background-color .22s ease, color .22s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.greview:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.greview__score {
  font-family: var(--font-display); font-weight: 900; font-size: 1.45rem; line-height: 1;
}
.greview__stars { color: var(--oxblood); letter-spacing: .08em; font-size: .95rem; }
.greview:hover .greview__stars { color: color-mix(in srgb, var(--oxblood) 65%, var(--paper)); }
.greview__label {
  font-family: var(--font-ui); font-weight: 700; font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase;
}
@media (max-width: 480px) { .greview { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .greview:hover { transform: none; } }

/* --- Location cards: circular building photo ---------------------------- */
.location__shot {
  width: clamp(126px, 16vw, 178px); aspect-ratio: 1; margin: 0 0 1.05rem;
  border-radius: 50%; overflow: hidden; position: relative;
  background: var(--paper-3);
  border: 2px solid var(--ink);
  outline: 1px solid color-mix(in srgb, var(--ink) 42%, transparent);
  outline-offset: 5px;
  display: grid; place-items: center; text-align: center;
}
.location__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.location__shot::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, transparent 0 11px,
    color-mix(in srgb, var(--rule-strong) 45%, transparent) 11px 12px);
  opacity: .55;
}
.location__shot span {
  position: relative; padding: 0 .6rem;
  font-family: var(--font-ui); font-size: .58rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); line-height: 1.5;
}
.location__shot:has(img)::before, .location__shot:has(img) span { display: none; }
.band-dark .location__shot { border-color: var(--paper); outline-color: color-mix(in srgb, var(--paper) 40%, transparent); }

/* --- award winners row ---------------------------------------------------- */
.winners { padding-block: clamp(5rem, 12vh, 9rem) !important; background: var(--paper-2); }
/* the hand-written line and the case link read as one pair, so kill the
   annot's own bottom margin rather than fighting it from below */
.winners .annot { margin-bottom: 0; }
.winners__cta { margin-top: .3rem; }
.winners__row {
  display: grid; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 225px), 1fr));
  gap: clamp(1.5rem, 2.8vw, 2.5rem);
  max-width: 1180px; margin-inline: auto;
}


/* --- Embedded form slot (JotForm) --------------------------------------- */
/* the label and the frame are one card, so the rule and the offset ring go
   round the pair rather than round each half */
.formslot {
  display: flex; flex-direction: column;
  border: 2px solid var(--ink);
  outline: 1px solid color-mix(in srgb, var(--ink) 42%, transparent);
  outline-offset: 6px;
}
/* The label is the card's header bar rather than a caption floating above it,
   so an embedded form (which arrives with its own white ground and its own
   typography) reads as something the page framed deliberately. */
.formslot__label {
  font-family: var(--font-ui); font-size: .62rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--paper); background: var(--ink);
  margin: 0; padding: .72rem 1rem;
  max-width: none;   /* it is a <p>, so the global 66ch measure would clip the bar */
}
.formslot__frame {
  position: relative; min-height: 420px;
  background: var(--paper);
  display: grid; place-items: center;
}
/* the placeholder is centred; a real embed must fill the box instead, or the
   grid shrinks the iframe to zero width */
.formslot__frame:has(iframe) {
  display: block; min-height: 0;
  /* the script sizes the iframe to the whole form, which runs to ~1900px and
     would swamp the hero, so the box caps it and scrolls */
  max-height: min(760px, 82vh); overflow-y: auto; overscroll-behavior: contain;
}
.formslot__frame iframe { width: 100%; min-height: 620px; border: 0; display: block;
  position: relative; z-index: 1; }
/* a third-party iframe shows nothing at all while it negotiates, so the box
   says what is happening instead of sitting empty. The form's own white ground
   covers this the moment it paints. */
.formslot__frame:has(iframe)::before {
  content: "Loading the form\2026";
  position: absolute; inset: 0; z-index: 0;
  display: grid; place-items: center;
  font-family: var(--font-ui); font-size: .8rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); background: var(--paper);
}
/* and a fade at the foot of the scroll box, so it is obvious the form runs on */
.formslot__frame:has(iframe)::after {
  content: ""; position: sticky; z-index: 2; bottom: 0; left: 0;
  display: block; height: 40px; pointer-events: none;
  background: linear-gradient(to top, rgba(255,255,255,.96), rgba(255,255,255,0));
}
/* On a page whose only job is to host the form there is nothing to scroll
   past, and these cutting-instruction forms run to nearly 5000px. Capping that
   into a 760px window would be miserable, so it runs full height and the page
   does the scrolling. */
.formslot--full .formslot__frame:has(iframe) { max-height: none; overflow: visible; }
.formslot--full .formslot__frame:has(iframe)::after { display: none; }

/* Visit: the form leads on the left, the note and the hours sit beside it.
   The form runs past 1400px, so rather than scroll it inside a box the column
   beside it is sticky and rides along. */
.hero__grid--formfirst { align-items: start; }
@media (min-width: 900px) {
  #schedule .visit__aside,
  #wholesale-top .visit__aside { position: sticky; top: 7rem; align-self: start; }
}
@media (max-width: 899px) {
  /* on a phone the copy should introduce the form, not follow it */
  .hero__grid--formfirst { display: flex; flex-direction: column; }
  .hero__grid--formfirst .visit__aside { order: -1; }
}
/* wholesale keeps the copy first on desktop too, so the pitch is read before
   the form; only Visit leads with the form itself */
@media (min-width: 900px) { #wholesale-top .visit__aside { order: -1; } }
.visit__hours { margin-top: clamp(2rem, 4vw, 3rem); }
.visit__hours .eyebrow { margin-bottom: .4rem; }
.visit__hours h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 1rem; }
.visit__hours .hours { margin-top: 0; }

/* On a phone a scroll box inside a scrolling page is a trap, so the form runs
   to its full height there and the page does the scrolling. */
@media (max-width: 760px) {
  .formslot__frame:has(iframe) { max-height: none; overflow: visible; }
  .formslot__frame:has(iframe)::after { display: none; }
}
.formslot__pending {
  font-family: var(--font-ui); font-size: .9rem; line-height: 1.6;
  color: var(--ink-3); text-align: center; max-width: 30ch; margin: 0; padding: 2rem;
}
/* a CTA that belongs to the form sits under it, outside the card's rule */
.btn-row--underform { margin-top: 1rem; }
.btn-row--underform .btn { width: 100%; justify-content: center; text-align: center; }

.band-dark .formslot { border-color: var(--paper); outline-color: color-mix(in srgb, var(--paper) 40%, transparent); }
.band-dark .formslot__label { color: var(--char); background: var(--paper); }


/* --- Nav dropdown for the processing forms ------------------------------ */
.nav__group { position: relative; display: flex; align-items: center; gap: .3rem; }
.nav__toggle {
  width: 22px; height: 22px; padding: 0; border: 0; background: none;
  cursor: pointer; position: relative; flex: none;
}
.nav__toggle::before {
  content: ""; position: absolute; top: 6px; left: 6px;
  width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .25s ease;
}
.nav__toggle[aria-expanded="true"]::before { transform: rotate(-135deg); }
.nav__menu {
  position: absolute; top: calc(100% + .6rem); left: 0; z-index: 50;
  min-width: 15rem; padding: .5rem 0;
  background: var(--paper); border: 2px solid var(--ink);
  box-shadow: 0 16px 36px rgba(20,16,13,.22);
  display: flex; flex-direction: column;
  /* Was display:none, which snapped shut the instant the pointer left the
     trigger. Hiding by visibility instead lets the close be delayed, so a
     slightly off aim does not lose the menu. */
  opacity: 0; visibility: hidden; transform: translateY(-5px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .3s;
}
/* the .6rem between the trigger and the menu is dead space the pointer has to
   cross; this bridges it so hover is never dropped on the way down */
.nav__menu::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: -.75rem; height: .75rem;
}
.nav__group:hover .nav__menu,
.nav__group:focus-within .nav__menu,
.nav__menu[data-open="true"] {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .16s ease, transform .16s ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .nav__menu { transition: visibility 0s linear .3s; transform: none; }
  .nav__group:hover .nav__menu,
  .nav__group:focus-within .nav__menu,
  .nav__menu[data-open="true"] { transition: visibility 0s; }
}
.nav__menu a {
  padding: .6rem 1rem; font-size: .88rem; color: var(--ink); text-decoration: none;
}
.nav__menu a:hover { background: var(--ink); color: var(--paper); }
.site-header--overlay:not(.is-scrolled) .nav__menu a { color: var(--ink); }

@media (max-width: 900px) {
  .nav__group { flex-direction: column; align-items: flex-start; width: 100%; }
  .nav__menu {
    position: static; min-width: 0; width: 100%; border: 0; box-shadow: none;
    background: none; padding: .2rem 0 .4rem 1rem;
    /* the panel collapses in the mobile sheet instead of floating */
    display: none; opacity: 1; visibility: visible; transform: none; transition: none;
  }
  .nav__menu::before { display: none; }
  .nav__group:hover .nav__menu { display: none; }
  .nav__group:focus-within .nav__menu,
  .nav__menu[data-open="true"] { display: flex; }
  .nav__menu a { padding: .5rem 0; }
  .nav__menu a:hover { background: none; text-decoration: underline; }
  .nav__toggle { position: absolute; right: 0; top: .2rem; }
}

/* --------------------------------------------------------------------------
   Processing cards riding the seam between the hero and the statement.
   The rail is pulled up so the top of each card sits on the dark hero and the
   bottom lands on paper. It is not a section of its own.
   -------------------------------------------------------------------------- */
.formrail {
  --pull: clamp(46px, 6vw, 88px);
  position: relative; z-index: 5;
  margin-top: calc(-1 * var(--pull));
  margin-bottom: 0;
}
/* the rail already supplies the breathing room, so the section it lands on
   does not need its full top padding as well */
.formrail + .statement { padding-top: clamp(1.8rem, 3.6vw, 3rem) !important; }
.formrail__grid {
  display: grid; gap: clamp(.9rem, 1.8vw, 1.3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 225px), 1fr));
}
.ocard {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  gap: .4rem; min-height: 188px; padding: 1.2rem; overflow: hidden; text-decoration: none;
  background: var(--char); color: var(--paper); border: 2px solid var(--ink);
  box-shadow: 0 18px 40px rgba(20,16,13,.42);
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}
.ocard:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(20,16,13,.5); }
.ocard:focus-visible { outline: 3px solid var(--oxblood); outline-offset: 3px; }
.ocard__an {
  position: absolute; right: 2%; top: 8%; width: 68%; aspect-ratio: 420 / 262;
  background-color: var(--paper); opacity: .14; pointer-events: none;
  /* mask-image comes from the element's inline style so the path resolves
     against the page, not this stylesheet */
  -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain;
          mask-repeat: no-repeat;         mask-position: center;         mask-size: contain;
  transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .35s ease;
}
.ocard:hover .ocard__an { transform: translateX(-5%) scale(1.05); opacity: .22; }
.ocard__kind {
  position: relative; font-family: var(--font-ui); font-size: .58rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--oxblood);
}
.ocard__name {
  position: relative; margin: 0;
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.18rem, 2.1vw, 1.6rem); line-height: .96;
}
.ocard__go {
  position: relative; margin-top: .5rem;
  font-family: var(--font-ui); font-size: .6rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 68%, transparent);
}
.ocard:hover .ocard__go { color: var(--paper); }
@media (prefers-reduced-motion: reduce) { .ocard:hover { transform: none; } }
/* Phones: cards go full width, so the animal has to shrink and move out of the
   type's way or it runs straight through the card name. */
@media (max-width: 560px) {
  .formrail { --pull: 42px; }
  .ocard { min-height: 150px; }
  /* no room to shift left here: the card is full width and the animal would
     run into the name, so it stays at the edge on phones */
  .ocard__an { width: 42%; right: 1%; top: 10%; opacity: .16; }
  /* keep the card name clear of the animal at full width */
  .ocard__kind, .ocard__name, .ocard__go { max-width: 58%; }
}

/* --------------------------------------------------------------------------
   Cut charts: both animals side by side on desktop with their own panel under
   each; a Beef/Hog tab set on phones, where two charts at half width make the
   small primals impossible to hit.
   -------------------------------------------------------------------------- */
.ccx { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.ccx__sp {
  font-family: var(--font-ui); font-size: .6rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--oxblood);
  margin: 0 0 .6rem;
}
.ccx .cut-info { margin-top: clamp(1.2rem, 2.4vw, 1.8rem); min-height: 0; }
.ccx__tabs { display: flex; gap: .6rem; margin-bottom: 1.6rem; }
.ccx__tab {
  font-family: var(--font-ui); font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  padding: .7rem 1.5rem; border: 2px solid var(--ink);
  background: none; color: var(--ink); cursor: pointer; min-height: 44px;
}
.ccx__tab[aria-selected="true"] { background: var(--ink); color: var(--paper); }

/* Both columns reserve the same box for the artwork, so the panels underneath
   start on the same line however tall each animal happens to draw. */
/* cow is 1672x941, hog 1500x822; the taller ratio sets a shared box at every
   width, so the panel underneath never shifts when the tabs swap animal */
.ccx__art { display: grid; place-items: center; aspect-ratio: 1672 / 941; }
.ccx__art .cut-chart { width: 100%; }
/* the hog artwork is longer than the cow, so hold it back a little to keep the
   two animals reading at a similar weight */
.ccx__col--pig .ccx__art .cut-chart { width: 90%; }

@media (min-width: 900px) {
  .ccx { grid-template-columns: 1fr 1fr; align-items: start; }
  .ccx__tabs { display: none; }
  .ccx__col { display: block !important; }   /* tabs never hide a column here */
}
@media (max-width: 899px) {
  .ccx__col[data-on="false"] { display: none; }
  .ccx__col--pig .cut-chart { max-width: 100%; }
}