/* eckerlinmeats.com - the whole stylesheet.

   Replaces publicstyle.css, responsive.css, the menu widget's mbcsmbmcp.css,
   LayerSlider and its skins, the Telerik window skin and the lightbox CSS, and
   a separate /mobile/ site that phones were 302'd to.

   Brand, taken from the CMS's own stylesheet rather than eyeballed:
   Montserrat throughout; #da462c the dominant red (12 uses), #f43733 its
   bright accent, #222 the dark bands. #da462c itself is only 4.3:1 against
   white, so it is kept for accents and large type, and two tints carry text:
     --red-btn  #c23d24  white on it 5.3:1  (buttons)
     --red-txt  #b5361f  on white    6.0:1  (links, small red text)
     --red-hi   #f06a50  on --char   5.6:1  (red text on the dark bands)

   Layout rules that each cost a bug on an earlier site and are designed in
   here from the start:
   - base list spacing is scoped to .prose. A bare `li+li{margin-top}` reaches
     every list on the page, and in a flex row it pushes every item but the
     first down AND makes it shorter - "Home" sat 5px taller than its
     neighbours on readingohio.org;
   - the current-section marker is a straight bar drawn by ::after, not an
     inset box-shadow, which follows the border-radius and curls at both ends;
   - an open dropdown button has SQUARE bottom corners, so it sits flush on
     the panel's top border and reads as one shape;
   - the scrim is below the masthead, so the bar does not darken behind the
     drawer. */

@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 800;
  src: url(/assets/fonts/montserrat-var.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --red: #da462c;
  --red-btn: #c23d24;
  --red-btn-h: #a93219;
  --red-txt: #b5361f;
  --red-hi: #f06a50;
  --ink: #221f1d;
  --muted: #5f5955;
  --char: #1c1a19;
  --char-2: #2a2624;
  --char-line: #3b3633;
  --cream: #faf6f0;
  --paper: #ffffff;
  --line: #e6ded3;
  --focus: #1f6feb;

  --sans: "Montserrat", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1200px;          /* the original site's content width */
  --prose: 70ch;
  --gut: clamp(1rem, 4vw, 2rem);
  --gap: clamp(1rem, 2.5vw, 1.75rem);
  --r: 10px;
  --shadow: 0 1px 2px rgba(28, 26, 25, .06), 0 8px 24px rgba(28, 26, 25, .08);
  --head: 76px;            /* the masthead's measured height; em.js keeps it true */
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--head) + 12px); }
body {
  margin: 0; padding-top: var(--head);
  background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img, picture, video, iframe { max-width: 100%; }
img { height: auto; display: block; }
img[width][height] { height: auto; }
a { color: var(--red-txt); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.15; font-weight: 800; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.3rem); }
h2 { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.1rem); }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1em; }
.wrap { width: min(100% - 2 * var(--gut), var(--wrap)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 1rem; top: .5rem; z-index: 200; transform: translateY(-160%);
  background: var(--char); color: #fff; padding: .6rem 1rem; border-radius: 6px;
  text-decoration: none; font-weight: 700;
}
.skip:focus { transform: none; color: #fff; }

/* ------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .75rem 1.35rem; border: 2px solid transparent; border-radius: 999px;
  background: var(--red-btn); color: #fff; font: 700 1rem/1.2 var(--sans);
  text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.btn:hover { background: var(--red-btn-h); color: #fff; }
.btn.ghost { background: transparent; border-color: rgba(255, 255, 255, .85); color: #fff; }
.btn.ghost:hover { background: #fff; color: var(--char); }
.btn.line { background: transparent; border-color: var(--red-btn); color: var(--red-txt); }
.btn.line:hover { background: var(--red-btn); color: #fff; }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.ico { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------ masthead */
.masthead {
  position: fixed; inset: 0 0 auto; z-index: 75;
  background: var(--char); color: #fff;
  box-shadow: 0 1px 0 var(--char-line);
}
.bar { display: flex; align-items: center; gap: 1.25rem; min-height: 76px; }
.brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; padding-block: .45rem; }
.brand img { width: 96px; height: auto; transition: width .25s ease; }
/* Home: the logo big on the photograph, at its native 167px (the only
   copy the old site had - larger would upscale it soft), shrinking to the
   standard size once the page scrolls (em.js adds .solid). The hero pads
   itself by a FIXED amount, not by --head, so nothing jumps as the bar
   shrinks mid-scroll. */
.home .brand img { width: clamp(118px, 13vw, 167px); }
.home .masthead.solid .brand img { width: 96px; }
.mainnav { margin-left: auto; }
.mainnav > ul { display: flex; align-items: stretch; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.mainnav > ul > li { position: relative; display: flex; margin: 0; }
.m-top {
  position: relative; display: inline-flex; align-items: center; gap: .35rem;
  padding: .7rem .8rem; border: 0; border-radius: 8px; background: none; cursor: pointer;
  font: 700 .95rem/1.2 var(--sans); letter-spacing: .02em; color: #fff; text-decoration: none; white-space: nowrap;
}
.m-top .chev {
  width: .55em; height: .55em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s;
}
@media (hover: hover) { .m-top:hover { background: var(--char-2); color: #fff; } }
.m-top[aria-expanded="true"] { background: var(--red-btn); color: #fff; border-radius: 8px 8px 0 0; }
.m-top[aria-expanded="true"] .chev { transform: rotate(-135deg) translate(-2px, -2px); }
.m-top[aria-current="page"]::after, .m-top.is-here::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: 2px; height: 3px;
  background: var(--red); border-radius: 0;
}
.m-top[aria-expanded="true"]::after { display: none; }
.m-panel {
  position: absolute; top: 100%; left: 0; z-index: 5; display: none;
  min-width: 250px; margin: 0; padding: .45rem; list-style: none;
  background: var(--paper); border-top: 3px solid var(--red-btn);
  border-radius: 0 var(--r) var(--r) var(--r); box-shadow: var(--shadow);
}
.m-panel.open, .has-panel:focus-within .m-panel { display: block; }
.m-panel li { margin: 0; }
.m-panel a {
  display: block; padding: .6rem .8rem; border-radius: 7px; text-decoration: none;
  color: var(--ink); font-weight: 600; font-size: .95rem;
}
.m-panel a:hover, .m-panel a:focus-visible { background: var(--cream); color: var(--red-txt); }
.m-panel a[aria-current="page"] { color: var(--red-txt); }
.m-call {
  display: inline-flex; align-items: center; gap: .5rem; margin-left: .5rem;
  padding: .6rem 1rem; border-radius: 999px; background: var(--red-btn); color: #fff;
  font-weight: 700; font-size: .95rem; text-decoration: none; white-space: nowrap;
}
.m-call:hover { background: var(--red-btn-h); color: #fff; }

.burger {
  display: none; margin-left: auto; width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--char-line); border-radius: 10px; background: transparent; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.burger span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform .2s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.tel-mini {
  display: none; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: 10px; background: var(--red-btn); color: #fff;
}

/* the scrim sits BELOW the masthead (70 < 75), so the bar is never dimmed */
.scrim {
  position: fixed; inset: var(--head) 0 0; z-index: 70; display: none;
  background: rgba(20, 18, 17, .55);
}
.scrim.on { display: block; }
.drawer {
  position: fixed; top: var(--head); right: 0; bottom: 0; z-index: 80; display: none;
  width: min(88vw, 380px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper); color: var(--ink); padding: 1rem 1rem 2rem;
  transform: translateX(100%); transition: transform .28s ease;
  box-shadow: -12px 0 32px rgba(0, 0, 0, .18);
}
.drawer.on { display: block; }
.drawer.in { transform: none; }
.drawer:focus { outline: none; }
.drawer ul { list-style: none; margin: 0; padding: 0; }
.drawer li { margin: 0; }
.drawer a {
  display: flex; align-items: center; min-height: 48px; padding: .5rem .75rem;
  border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 700; text-decoration: none;
}
.drawer a[aria-current="page"] { color: var(--red-txt); box-shadow: inset 3px 0 0 var(--red); }
.drawer .sub a { font-weight: 500; padding-left: 1.6rem; font-size: .97rem; }
.drawer .d-label {
  display: block; padding: 1rem .75rem .35rem; color: var(--muted);
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}

@media (max-width: 999.98px) {
  .mainnav, .m-call { display: none; }
  .burger, .tel-mini { display: inline-flex; }
  .tel-mini { margin-left: auto; }
  .burger { margin-left: .5rem; }
  .bar { min-height: 68px; }
  .brand img { width: 84px; }
}

/* ---------------------------------------------------------------- hero */
/* Inner pages' banner hero and the shared .hero plumbing. The HOME hero is
   below: it follows the original design, measured off the captured page. */
.hero {
  position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--char);
}
.hero > picture { position: absolute; inset: 0; z-index: -2; display: block; }
.hero > picture img[width][height] { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.nowrap { white-space: nowrap; }

/* --- home: the nav sits ON the photograph, as it did on the original.
   The masthead is transparent at the top of the home page and turns solid
   once the page scrolls or the drawer opens (em.js adds .solid). The hero
   starts at the very top and pads itself down by the masthead's measured
   height, so nothing hides under the bar. */
body.home { padding-top: 0; }
.home .masthead { background: transparent; box-shadow: none; transition: background-color .25s ease, box-shadow .25s ease; }
.home .masthead.solid { background: var(--char); box-shadow: 0 1px 0 var(--char-line); }
.hero-home {
  display: grid; grid-template-rows: 1fr auto;
  min-height: clamp(460px, 46vw, 860px);          /* the photo is 1500x692 */
  padding-top: clamp(96px, 10vw, 132px);
}
.hero-home > picture img[width][height] { object-position: 50% 40%; }
/* Light-handed, like the original: a dark band behind the nav, a touch of
   shade over the whole photo for the heading - not the heavy wash an inner
   banner gets. */
.hero-home::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 26%),
              linear-gradient(0deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 40%),
              rgba(0, 0, 0, .12);
}
.hero-center { align-self: center; padding: 1.5rem var(--gut); text-align: center; }
.hero-home h1 {
  margin: 0 auto; max-width: 12em; color: #fff; font-weight: 700;
  font-size: clamp(2.3rem, 1.2rem + 4.2vw, 4.5rem); line-height: 1.12;
  text-shadow: 2px 2px 4px #000;                  /* the original's, exactly */
}
.hero-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding-bottom: clamp(.75rem, 2vw, 1.5rem); }

/* the Forbes rosette: the original's own artwork, with the two lines that
   were HTML layers over it set as real, readable text again. The text is
   sized in cqw - a share of the BADGE's width - so it keeps the original's
   proportions at every size (500px art, 32px ribbon line, 19px button):
   with rem sizes and a 12px floor the words outgrew the ribbon on phones. */
.forbes {
  position: relative; display: block; width: clamp(240px, 26vw, 320px); flex: none;
  container-type: inline-size;
  color: #fff; text-decoration: none; transition: transform .2s ease;
}
.forbes:hover { transform: rotate(-2deg) scale(1.03); color: #fff; }
.forbes picture, .forbes img { display: block; width: 100%; height: auto; }
.f-ribbon {
  position: absolute; left: 4%; right: 4%; top: 45%; transform: translateY(-50%) rotate(-7deg);
  text-align: center; font-weight: 800; text-transform: uppercase; letter-spacing: .01em;
  font-size: 13px; font-size: 6.2cqw; line-height: 1; text-shadow: 1px 1px 2px rgba(0, 0, 0, .55);
  white-space: nowrap;
}
.f-btn {
  position: absolute; left: 50%; bottom: 17%; transform: translateX(-50%);
  padding: .35em .8em; border-radius: 4px; background: #5cc1c1; color: #fff;
  font-weight: 800; text-transform: uppercase; white-space: nowrap; line-height: 1.2;
  font-size: 10px; font-size: 4.6cqw; letter-spacing: .03em; box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}
.forbes:hover .f-btn { background: #43a9a9; }
.stamp { width: clamp(90px, 13vw, 180px); flex: none; opacity: .92; transform: rotate(-8deg); pointer-events: none; }
.stamp picture, .stamp img { display: block; width: 100%; height: auto; }
/* phones: the badge takes the room (so its words stay legible), the stamp shrinks */
@media (max-width: 560px) {
  .forbes { width: auto; flex: 1 1 0; min-width: 0; max-width: 300px; }
  .stamp { width: 56px; }
}

/* ------------------------------------------------------------ sections */
.section { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section.cream { background: var(--cream); }
.section.dark { background: var(--char); color: #fff; }
.section.dark a:not(.btn) { color: var(--red-hi); }
.section.dark a:not(.btn):hover { color: #fff; }

/* home: about - the original's red (#f43733) headings. 36px bold, so its
   3.9:1 on white clears AA for LARGE text; small red text uses --red-txt. */
.about { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .about { grid-template-columns: 1fr 1fr; } }
.about .prose { max-width: none; }
.about h2, .about .prose h2 { color: #f43733; font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem); }
.about .prose h2:not(:first-child) { margin-top: 1.2em; }
.about-fig { margin: 0; }
.about-fig img { width: 100%; border-radius: 6px; }

/* home: the six product tiles, at their native 377px, three to a row with
   the original's tight gaps. The label is baked into each image, so the
   graphic is kept exactly and gets an honest alt. */
.tiles-sec { padding-block: 0 clamp(2rem, 4vw, 3rem); }
.tiles { display: grid; gap: clamp(.6rem, 1.5vw, 1.1rem); grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0 auto; padding: 0; max-width: 1170px; }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tiles li { margin: 0; }
.tiles a { display: block; transition: transform .2s ease, filter .2s ease; }
.tiles a:hover { transform: translateY(-3px); filter: drop-shadow(0 8px 14px rgba(28, 26, 25, .25)); }
.tiles picture, .tiles img { display: block; width: 100%; height: auto; }

/* home: press - the original's compact list: the outlet in red caps over the
   headline, three columns, no cards */
.press-sec { padding-block: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }
.press { display: grid; gap: 1.35rem 2.5rem; grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
@media (min-width: 620px) { .press { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .press { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.press li { margin: 0; }
.press .outlet { display: block; margin-bottom: .2rem; color: var(--red-txt); font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.press a { color: #000; font-size: 1.08rem; line-height: 1.4; text-decoration: none; }
.press a:hover { color: var(--red-txt); text-decoration: underline; }
.partner { margin: 1.75rem 0 0; text-align: center; }
.partner a { display: inline-block; }
.partner img { width: 200px; height: auto; margin-inline: auto; }

/* home: the inquiry band - copy on the original's photograph, the FORM to the
   right, as the copy itself says */
.cta-band { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--char); padding-block: clamp(2.5rem, 5vw, 4rem); }
.cta-band > picture { position: absolute; inset: 0; z-index: -2; display: block; }
.cta-band > picture img[width][height] { width: 100%; height: 100%; object-fit: cover; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20, 16, 14, .82) 0%, rgba(20, 16, 14, .6) 100%); }
.cta-grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 960px) { .cta-grid { grid-template-columns: 1fr 1fr; } }
.cta-copy { max-width: none; }
.cta-copy h2 { color: #fff; font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem); }
.cta-copy p { color: rgba(255, 255, 255, .9); }
.cta-copy strong { color: #fff; }
.cta-copy a { color: #ffb4a3; }
.cta-band .formcard { color: var(--ink); padding: 1.25rem 1.4rem; }
/* The form is the tall side of this band. At the standalone page's spacing
   it made the band 890px against the original's 480, with a gap under the
   copy. Tighter here; the contact page keeps the roomier version. */
.cta-band .field { margin-bottom: .7rem; }
.cta-band .field label { margin-bottom: .25rem; font-size: .9rem; }
.cta-band .field input { min-height: 44px; padding: .55rem .75rem; }
.cta-band .field textarea { min-height: 96px; }
.cta-band .form p { margin-bottom: .5rem; }
.cta-copy p { font-size: 1rem; }
.form-title { margin: 0 0 .8rem; font-size: 1.1rem; }

/* home: the map beside the original's warm dark contact panel */
.find-us { display: grid; grid-template-columns: 1fr; background: #3c3533; color: #fff; }
@media (min-width: 720px) { .find-us { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .find-us { grid-template-columns: 1.5fr 1fr; } }
.find-us .map { min-height: 240px; border-radius: 0; }
@media (min-width: 720px) { .find-us .map { min-height: 340px; } }
.find-panel { padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 3rem); }
.find-panel h2 { color: #fff; font-size: 1.35rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .8rem; }
.find-panel h3 { margin: 1.25rem 0 .5rem; font-size: 1rem; color: #fff; }
.find-panel p { margin: 0 0 .45rem; }
.find-panel a { color: #fff; }
.find-panel a:hover { color: #ffb4a3; }
.find-phone { font-size: 1.3rem; font-weight: 700; text-decoration: none; }
.find-hours { list-style: none; margin: 0; padding: 0; max-width: 360px; }
.find-hours li { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.find-hours li span:first-child { font-weight: 600; }

/* ---------------------------------------------------------------- map */
.map { position: relative; min-height: 320px; overflow: hidden; background: var(--char-2); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ------------------------------------------------------- inner pages */
/* The text runs the full 1200px content width, as on the original site, with
   the banner's crumbs and title aligned to it. A 780px centred column was
   tried and rejected by the client as too narrow; an "Order by Phone" sidebar
   was tried before that and rejected as invented. */
:root { --read: var(--wrap); }
.pagehead {
  position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--char);
  padding-block: clamp(2.25rem, 6vw, 4rem);
}
.pagehead > picture { position: absolute; inset: 0; z-index: -2; display: block; }
.pagehead > picture img[width][height] { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.pagehead::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(20, 18, 17, .7); }
.pagehead .wrap { width: min(100% - 2 * var(--gut), var(--read)); }
.pagehead h1 { color: #fff; margin: 0; }
.crumbs { margin: 0 0 .9rem; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; font-size: .88rem; }
.crumbs li { margin: 0; color: rgba(255, 255, 255, .75); }
.crumbs li + li::before { content: "/"; margin-right: .35rem; color: rgba(255, 255, 255, .45); }
.crumbs a { color: #fff; }
.pagebody { padding-block: clamp(2rem, 4.5vw, 3.25rem); }

/* prose: the ONLY place base list spacing applies */
.prose { max-width: var(--prose); display: flow-root; }   /* flow-root: contain floats */
.prose.reading { max-width: var(--read); margin-inline: auto; }
.prose h2 { margin-top: 1.6em; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.1em; }
.prose li + li { margin-top: .35em; }
.prose img { border-radius: var(--r); margin-block: 1rem; }
.prose .ta-c { text-align: center; }
.prose .float-r { float: right; margin: .25rem 0 1rem 1.5rem; max-width: 45%; }
.prose .float-l { float: left; margin: .25rem 1.5rem 1rem 0; max-width: 45%; }

/* long lists set in columns; standalone images float beside the text */
.prose ul.cols { columns: 3 190px; column-gap: 2rem; }
.prose ul.cols li { break-inside: avoid; margin-bottom: .35em; }
.prose ul.cols li + li { margin-top: 0; }
.prose p.fig-r { margin: 0; }
@media (min-width: 720px) {
  .prose p.fig-r { float: right; width: 44%; margin: .3rem 0 1rem 1.75rem; }
  .prose p.fig-r img { margin: 0; width: 100%; height: auto; }
}

/* the product-type lists that were an icon table: [INCLUDE=1002]/[INCLUDE=1003].
   A plain box - no accent border - two by two in the reading column. */
.cuts { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 1.5rem 0; max-width: none; }
@media (min-width: 560px) { .cuts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cuts-col { padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--cream); }
.cuts-col h2, .cuts-col h3 { margin: 0 0 .5rem; font-size: 1rem; }
.cuts-col ul { margin: 0; padding-left: 1.1em; font-size: .97rem; }
.cuts-col li + li { margin-top: .2em; }

/* the product items - every one of them, no pager */
.items-head { margin: clamp(2.5rem, 6vw, 3.5rem) 0 1.25rem; text-align: center; }
/* MASONRY. The descriptions run from 45 to 268 words on the beef page alone,
   so in plain grid rows every short card sat beside a long one with hundreds
   of pixels of empty card beneath it (the page ran to 7,600px). CSS columns
   were tried next and balanced badly - big unbreakable cards left one column
   757px short. So: a grid of tiny 4px rows, and em.js gives each card a row
   span equal to its measured height, assigning columns biggest-first. Without
   JS it is simply a grid. */
.items { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: start; list-style: none; margin: 0; padding: 0; }
.items.masonry { grid-auto-rows: 4px; row-gap: 0; grid-auto-flow: dense; }
.items.masonry .item { margin-bottom: var(--gap); }
.item { display: block; margin: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--paper); }
.item picture, .item > img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--cream); }
.item picture img, .item > img { width: 100%; height: 100%; object-fit: cover; }
.item-body { padding: 1.1rem 1.2rem 1.25rem; }
.item h3 { margin: 0 0 .5rem; font-size: 1.12rem; }
.item-body p { font-size: .97rem; color: var(--muted); }
.item-body p:last-child { margin-bottom: 0; }


/* ------------------------------------------------------------- video */
.video { position: relative; aspect-ratio: 16 / 9; max-width: 900px; margin: 1.5rem 0; border-radius: var(--r); overflow: hidden; background: #000; box-shadow: var(--shadow); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video + .vcap { margin-top: -.75rem; color: var(--muted); font-size: .92rem; }

/* -------------------------------------------------------------- form */
.contact-grid { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: 1fr 1.1fr; align-items: start; } }
.formcard { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); box-shadow: var(--shadow); }
.form .row { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .form .row { grid-template-columns: 1fr 1fr; } }
.field { margin-bottom: 1rem; }
.field label { display: block; margin-bottom: .35rem; font-weight: 700; font-size: .95rem; }
.field input, .field textarea, .field select {
  width: 100%; min-height: 48px; padding: .7rem .8rem; border: 1px solid #c9bfb3; border-radius: 8px;
  background: #fff; color: var(--ink); font: 400 1rem/1.4 var(--sans);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--focus); outline: 3px solid rgba(31, 111, 235, .25); outline-offset: 0; }
.field.bad input, .field.bad textarea { border-color: #b3261e; background: #fff7f6; }
.req { color: var(--red-txt); }
.hint { color: var(--muted); font-size: .88rem; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formnote { margin-bottom: 1.25rem; padding: .9rem 1rem; background: #fdecea; color: #7a1c14; border-radius: 6px; }
.formok { padding: 1.25rem 1.35rem; background: #edf6ee; border-radius: 6px; }
.formok h2 { font-size: 1.4rem; }
.formok:focus { outline: none; }
/* the visitor's copy of what they sent - on the page, never emailed back to a
   typed-in address (see controls/em-contact.ascx) */
.copy { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0 0 1rem; padding: .9rem 1rem; background: #fff; border-radius: 6px; }
.copy dt { font-weight: 700; }
.copy dd { margin: 0; overflow-wrap: anywhere; }
.rc-note a { color: inherit; }

/* ------------------------------------------------------------ footer */
.footer { background: #141211; color: rgba(255, 255, 255, .8); font-size: .95rem; }
.footer a { color: #fff; }
.footer a:hover { color: var(--red-hi); }
.foot-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-block: 1.5rem; }
.foot-bar img { width: 84px; height: auto; }
.footer .legal { margin: 0; font-size: .85rem; color: rgba(255, 255, 255, .65); letter-spacing: .03em; }
.social { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; font-weight: 600; }
.social svg { width: 20px; height: 20px; fill: currentColor; }
@media (max-width: 719px) { .foot-bar { flex-direction: column; text-align: center; } }

/* --------------------------------------------------------- 404 page */
.notfound { text-align: center; max-width: 620px; margin-inline: auto; }
.notfound .actions { justify-content: center; margin-top: 1.5rem; }

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

/* ------------------------------------------------------------- print */
@media print {
  .masthead, .drawer, .scrim, .burger, .map, .actions, .cta-actions, .skip { display: none !important; }
  body { padding-top: 0; color: #000; }
  .hero, .pagehead, .section.dark, .footer { background: none !important; color: #000 !important; }
  .hero > picture, .pagehead > picture, .hero::before, .pagehead::before { display: none; }
  .hero h1, .pagehead h1, .cta h2 { color: #000 !important; }
  a { color: #000; }
}