/* Jurek's Smokehouse — Markham, TX
   Build: Jonathan Morris, 2026-08-26 */

:root {
  --ink: #25231f;
  --ink-2: #34322d;
  --ember: #6e2f24;
  --ember-dk: #57231b;
  --cream: #f3ebdd;
  --cream-2: #e9dfcf;
  --tan: #9a6a36;
  /* Brass is a rule-and-focus-ring colour, not a text colour. As text on --ink
     it measures 3.35:1 and fails AA everywhere it was used that way -- the dark
     eyebrows, the hero facts, and every link hover in the util bar and footer.
     This is the same brass lightened to 5.1:1 on --ink, for those uses only.
     --tan itself is unchanged so rules and focus rings keep the shop's colour. */
  --tan-dk: #be874a;
  /* Was #5c625c, a cool green-grey that read as a different family from the
     warm ink it sits beside. 5.8:1 on --cream, 5.3:1 on --cream-2. */
  --muted: #63594c;
  --surface: #fbf7ee;
  --line: rgba(37, 35, 31, 0.22);
  --shadow: 0 2px 8px rgba(37, 35, 31, .08);
  --maxw: 1120px;
  /* One measure for the order page's stacked blocks -- notice, form, and
     finished sheet share a left and right edge instead of three widths. */
  --measure: 780px;
  --r: 2px;
}

*, *::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 { scroll-behavior: auto !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 17px/1.62 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 .5em;
  /* Evens the lines rather than filling the first and leaving a single word
     stranded. Unsupported browsers get the ordinary greedy wrap. */
  text-wrap: balance;
}
h1 { font-size: clamp(2.15rem, 5.2vw, 3.55rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }

a { color: var(--ember-dk); text-underline-offset: 3px; }
a:hover { color: var(--ember); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--tan);
  outline-offset: 3px;
}

img { max-width: 100%; height: auto; display: block; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.section { padding: clamp(44px, 6vw, 76px) 0; }
.section--dark { background: var(--ink); color: var(--cream); }
.section--dark h2, .section--dark h3 { color: var(--cream); }
.section--alt { background: var(--cream-2); }
.lede { font-size: 1.14rem; color: #403d37; max-width: 58ch; }
.section--dark .lede { color: #d9cbbb; }
.eyebrow {
  font: 700 .78rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ember); margin: 0 0 .9em;
}
.section--dark .eyebrow { color: var(--tan-dk); }

/* ---------- Skip link ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--cream); padding: 12px 18px;
}
.skip:focus { left: 8px; top: 8px; }

/* ---------- Utility bar ---------- */
/* The call link is the conversion on a phone, so it carries a 44px target
   (WCAG 2.2 SC 2.5.5 Target Size (Enhanced)). Height comes from the link
   itself rather than bar padding, so the bar stays one 44px line and does not
   grow into a second band. */
.util {
  background: var(--ink); color: var(--cream-2);
  font-size: .85rem; padding: 0;
}
.util .wrap {
  display: flex; gap: 18px; flex-wrap: nowrap; min-height: 44px;
  justify-content: space-between; align-items: center;
}
.util a {
  color: var(--cream); text-decoration: none; font-weight: 600;
  display: inline-flex; align-items: center; min-height: 44px;
}
.util a:hover { color: var(--tan-dk); }
@media (max-width: 400px) {
  .util { font-size: .8rem; }
  .util .wrap { gap: 12px; padding: 0 16px; }
}

/* ---------- Header ---------- */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: rgba(243, 235, 221, .98);
  border-bottom: 1px solid var(--line);
}
.masthead .wrap { display: flex; align-items: center; gap: 16px; min-height: 84px; }
/* The shop's own circular badge, set beside the typographic wordmark. The bar
   grew from 68px to 84px so the badge can run at 56px: the arched wordmark
   inside it is about 7% of the badge height, so below roughly 50px the ring
   reads as a smudge rather than as the shop's name. The name is still set in
   type beside it for the same reason -- the badge's own type is decorative at
   this size, not readable. `alt=""` in the markup on purpose: the name sits in
   text directly beside it, so a label here would be read out twice. */
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand__mark { display: block; width: 56px; height: 56px; flex: none; }
.brand__name {
  font-family: Georgia, "Times New Roman", serif; font-weight: 700;
  font-size: 1.24rem; line-height: 1.08; letter-spacing: -.02em;
}
.brand__sub {
  display: inline-block; margin-top: 2px;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: .95rem;
  padding: 12px; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--ember-dk); border-bottom-color: var(--line); }
.nav a[aria-current="page"] { color: var(--ember-dk); border-bottom-color: var(--ember); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: .97rem; text-decoration: none;
  padding: 12px 20px; border-radius: var(--r); border: 2px solid transparent;
  min-height: 46px; cursor: pointer; transition: background .15s ease, color .15s ease;
}
.btn--primary { background: var(--ember); color: #fff; }
.btn--primary:hover { background: var(--ember-dk); color: #fff; }
.btn--ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--ink); color: var(--cream); }
.btn--light { background: var(--cream); color: var(--ink); }
.btn--light:hover { background: #fff; color: var(--ink); }
.btn--lg { padding: 15px 26px; font-size: 1.05rem; min-height: 52px; }

.menu-btn {
  display: none; background: transparent; border: 2px solid var(--ink);
  border-radius: var(--r); padding: 9px 13px; font-weight: 700; cursor: pointer;
  min-height: 44px; color: var(--ink);
}

@media (max-width: 900px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; align-items: center; }
  .nav.is-open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--cream); border-bottom: 1px solid var(--line);
    padding: 10px 20px 18px; gap: 2px;
  }
  .nav.is-open a { padding: 13px 12px; min-height: 44px; display: flex; align-items: center; }
  .masthead .wrap { position: relative; }
}
@media (max-width: 560px) {
  .masthead .wrap > .btn { display: none; }
  /* Phone: the sticky bar comes back down to 68px so it does not eat the
     viewport, and the badge with it. 44px is under the legibility floor for
     its arched type, which is fine -- the name is in text right beside it. */
  .masthead .wrap { min-height: 68px; }
  .brand__mark { width: 44px; height: 44px; }
  .brand__name { font-size: 1.08rem; }
  .brand__sub { font-size: .66rem; letter-spacing: .13em; }
}

/* ---------- Hero ---------- */
.hero {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(52px, 7vw, 90px) 0;
  border-bottom: 3px solid var(--ember);
}
/* The right column used to hold the one portrait-shaped shop photo. It is an
   honest picture of the shop but a lime-green cutting board dominates it, and
   at the size the column wants that colour ran the hero. The photo is still in
   the gallery; here the column carries a paper-on-ink ledger of what the shop
   handles instead, built only from facts already published on the linked pages.
   `stretch` plus flexed rows makes the panel end level with the copy rather
   than leaving the dead lower-right corner the first build had. */
.hero__grid {
  display: grid; gap: clamp(36px, 6vw, 72px);
  grid-template-columns: minmax(0, 1.3fr) minmax(290px, .7fr);
  align-items: stretch;
}
.hero__ledger {
  display: flex; flex-direction: column;
  background: var(--cream); color: var(--ink);
  border-top: 4px solid var(--ember);
  padding: 2px 22px 4px;
}
.hero__ledger-row {
  flex: 1 1 0;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  /* Bled to the panel edge so the hover wash and the rules read as one ledger
     rather than a list indented inside a box. */
  margin: 0 -22px; padding: 15px 22px;
  border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
}
.hero__ledger-row:last-child { border-bottom: 0; }
.hero__ledger-row:hover { background: var(--surface); color: var(--ember-dk); }
.hero__ledger-name {
  font: 700 1.06rem/1.25 Georgia, "Times New Roman", serif;
  letter-spacing: -.01em;
}
.hero__ledger-row:hover .hero__ledger-name { text-decoration: underline; text-underline-offset: 3px; }
.hero__ledger-items { font-size: .89rem; line-height: 1.45; color: var(--muted); }
.hero__ledger-row:hover .hero__ledger-items { color: var(--ink-2); }
@media (max-width: 820px) {
  .hero__grid { grid-template-columns: 1fr; gap: 30px; }
  .hero__ledger-row { flex: 0 0 auto; }
}
.hero h1 { color: var(--cream); max-width: 17ch; }
.hero p { color: #d9cbbb; font-size: 1.16rem; max-width: 54ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
/* At phone width the two calls to action are the same full width, so weight has
   to come from fill rather than size. Solid cream gave the secondary Call the
   larger light mass of the two; outlining it leaves "Plan an order" the only
   filled block on the dark band. Cream on --ink is 12.4:1 for both the label
   and the 2px border, and .btn--lg keeps its 52px target. */
@media (max-width: 560px) {
  .hero__actions { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  .hero__actions .btn { width: 100%; }
  .hero .hero__actions .btn--light {
    background: transparent; color: var(--cream); border-color: var(--cream);
  }
  .hero .hero__actions .btn--light:hover { background: var(--cream); color: var(--ink); }
}
.hero__facts {
  display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 34px;
  padding-top: 22px; border-top: 1px solid rgba(246,239,230,.18);
  font-size: .95rem; color: #cdbcab;
}
.hero__facts strong { color: var(--tan-dk); }

/* ---------- Editorial and ledger layouts ---------- */
.editorial-grid,
.page-head__grid,
.ledger-layout,
.location-grid,
.about-copy,
.counter-note,
.action-line {
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr);
  gap: clamp(30px, 6vw, 78px);
  align-items: start;
}

.section--index { padding-top: clamp(50px, 7vw, 88px); }
.product-ledger { border-top: 2px solid var(--ink); }
.ledger-row {
  display: grid;
  grid-template-columns: minmax(120px, .62fr) minmax(200px, 1.5fr) auto;
  gap: 20px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.ledger-row:hover { color: var(--ink); background: rgba(251, 247, 238, .55); }
.ledger-row__name { font-family: Georgia, "Times New Roman", serif; font-weight: 700; }
.ledger-row__link { color: var(--ember-dk); font-weight: 700; white-space: nowrap; }

.counter-note { align-items: center; }
.spec-list { margin: 0; border-top: 2px solid var(--ink); }
.spec-list > div {
  display: grid; grid-template-columns: minmax(120px, .55fr) 1fr; gap: 20px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.spec-list dt { font-weight: 700; }
.spec-list dd { margin: 0; }
.text-link { font-weight: 700; }
.visit-strip { border-top: 3px solid var(--ember); }

/* Interior heads run headline-wide, copy-narrow -- the reverse of the shared
   editorial grid. On the old proportions the H1 got a ~360px measure at
   1440px, which broke "Plan a beef or processing order" into four lines with
   "or" alone on one and the Smokehouse H1 into five. */
.page-head { padding: clamp(42px, 6vw, 72px) 0 20px; }
.page-head__grid {
  grid-template-columns: minmax(0, 1.38fr) minmax(240px, .62fr);
  align-items: start;
  gap: clamp(24px, 4vw, 56px);
}
.page-head__grid h1 { max-width: 20ch; }
/* Optical top alignment: the lede's first baseline sits with the H1's, not
   with its ascender. */
.page-head__grid .lede { margin: .5em 0 .55em; }
@media (min-width: 761px) {
  .page-head h1 { font-size: clamp(2.15rem, 3.7vw, 3.1rem); }
}

.sheet-heading {
  display: grid; grid-template-columns: minmax(190px, .6fr) minmax(0, 1.4fr);
  gap: 40px; align-items: end; padding-bottom: 22px; border-bottom: 2px solid var(--ink);
}
.sheet-heading p:last-child { margin-bottom: .35em; }
.sheet-heading--cuts { margin-top: 58px; }
.share-ledger { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.share-ledger > div { padding: 20px; border-right: 1px solid var(--line); }
.share-ledger > div:first-child { padding-left: 0; }
.share-ledger > div:last-child { border-right: 0; }
.share-ledger strong { display: block; font: 700 1.2rem/1.2 Georgia, "Times New Roman", serif; }
.share-ledger span { color: var(--muted); font-size: .92rem; }

.counter-ledger { margin: 0; border-top: 2px solid var(--ink); }
.counter-ledger > div {
  display: grid; grid-template-columns: minmax(135px, .55fr) 1fr; gap: 24px;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.counter-ledger dt { font: 700 1.08rem/1.3 Georgia, "Times New Roman", serif; }
.counter-ledger dd { margin: 0; }
.counter-ledger--large > div { padding: 24px 0; }

/* Questions stack rather than sitting in two columns like .counter-ledger: an
   answer runs two or three lines and a question runs one, so a shared row grid
   left a ragged gutter down the middle of the section on every viewport. */
.faq { margin: 0; border-top: 2px solid var(--ink); }
.faq > div { padding: 22px 0; border-bottom: 1px solid var(--line); }
.faq dt { font: 700 1.08rem/1.35 Georgia, "Times New Roman", serif; margin-bottom: .45em; }
.faq dd { margin: 0; max-width: 66ch; }

/* Notes. The date sits in its own column on a wide screen and above the title on
   a narrow one, so a headline never has to share a line with it. */
.note-list { border-top: 2px solid var(--ink); }
.note-row {
  display: grid; grid-template-columns: minmax(120px, .22fr) 1fr; gap: 24px;
  padding: 26px 0; border-bottom: 1px solid var(--line);
}
.note-row__date { margin: 0; color: var(--muted); font-size: .92rem; }
.note-row h2 { margin: 0 0 .3em; font-size: 1.35rem; }
.note-row h2 a { color: var(--ink); text-decoration: none; }
.note-row h2 a:hover { color: var(--ember-dk); text-decoration: underline; text-underline-offset: 3px; }
.note-row p { margin: 0; color: var(--muted); max-width: 60ch; }
@media (max-width: 640px) { .note-row { grid-template-columns: 1fr; gap: 8px; } }

.note-body { max-width: 700px; }
.note-body h2 { font-size: 1.32rem; margin-top: 1.9em; }
.note-body p { max-width: none; }
.note-figure { margin: 0 0 34px; }
.note-figure img { width: 100%; height: auto; border: 1px solid var(--line); }
.note-figure figcaption { padding-top: 10px; font-size: .9rem; color: var(--muted); }

/* Both smokehouse lists are name-only. The counter list used to be a dl with a
   per-row sentence while the made-in-house list was bare, so the bare one read
   as a table that had failed to load. Only seven product names are verified;
   the shared instruction lives once in the left section column instead of being
   split into seven invented descriptions. */
.plain-list {
  list-style: none; margin: 0; padding: 0;
  border-top: 2px solid var(--ink);
}
.plain-list li {
  padding: 15px 0; border-bottom: 1px solid var(--line);
  font: 700 1.08rem/1.3 Georgia, "Times New Roman", serif;
}

/* Sausage and additions pricing. Same ledger idiom as .plain-list and .hours --
   2px ink rule on top, hairline between rows, name left and price right -- so a
   priced list does not read as a different component from an unpriced one. The
   price column is tabular-nums so the decimal points line up down the column. */
.price-table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--ink); }
.price-table caption {
  text-align: left; padding: 0 0 4px;
  font: 700 1.08rem/1.3 Georgia, "Times New Roman", serif;
}
/* The unit rides the caption so it is stated once per table without needing a
   column header row. Set apart from the product name, not shouted. */
.price-table caption span {
  font: 400 .84rem/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  margin-left: .5em;
}
.price-table th, .price-table td {
  text-align: left; padding: 13px 0; border-bottom: 1px solid var(--line);
  font-size: .99rem; vertical-align: baseline;
}
.price-table th { font-weight: 600; padding-right: 18px; }
.price-table td {
  text-align: right; white-space: nowrap; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.price-note { color: var(--muted); font-size: .94rem; max-width: 62ch; }

/* A meat pack is a bundle: one price for the whole card, so the price sits in
   the head next to the name rather than in a row. The contents reuse
   .plain-list, which already draws the 2px ink rule and the hairlines, so a
   pack reads as the same ledger idiom as every other list on the site. */
.pack {
  background: var(--surface); padding: 22px 22px 18px;
  border: 1px solid var(--line); border-radius: 2px;
  display: flex; flex-direction: column; gap: 14px;
}
/* Price under the name, never beside it. Side-by-side reads well for a short
   name and wraps for a long one, so three cards in a row disagreed with each
   other about where the price sat. */
.pack__head { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.pack__head h3 { margin: 0; font-size: 1.18rem; }
.pack__price {
  margin: 0; font: 700 1.5rem/1 Georgia, "Times New Roman", serif;
  color: var(--ember-dk); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pack .plain-list { flex: 1; }
.pack .plain-list li { font-size: 1rem; padding: 11px 0; }
.pack .plain-list li:last-child { border-bottom: 0; }
.pack .price-note { margin: 0; }

.action-line { align-items: center; }
.action-line .btn { justify-self: end; }
.about-copy { grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); }
.plain-callout { border-top: 3px solid var(--ember); border-bottom: 1px solid var(--line); padding: 24px 0 28px; }
.policy-copy { max-width: 760px; }
.policy-copy h2 + p { margin-bottom: 2.2em; }

@media (max-width: 760px) {
  .editorial-grid, .page-head__grid, .ledger-layout, .location-grid,
  .about-copy, .counter-note, .action-line, .sheet-heading {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .ledger-row { grid-template-columns: 1fr; gap: 4px; }
  .ledger-row__link { margin-top: 4px; }
  .action-line .btn { justify-self: start; }
}

@media (max-width: 520px) {
  .share-ledger { grid-template-columns: 1fr; }
  .share-ledger > div { padding: 15px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .share-ledger > div:last-child { border-bottom: 0; }
  .spec-list > div, .counter-ledger > div { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 22px; }
/* A price table stretched to its grid cell distributes the slack into its row
   padding, so a short table sitting beside a long one gets visibly looser
   hairlines. Pin them to the top of the cell and every table keeps one rhythm. */
.grid--tables > * { align-self: start; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 24px; box-shadow: none;
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.card--dark { background: var(--ink-2); border-color: rgba(246,239,230,.14); color: #d9cbbb; }
.card--dark h3 { color: var(--cream); }

.steps { counter-reset: s; list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 42px 1fr; gap: 16px; align-items: start; }
.steps li::before {
  content: counter(s); grid-row: span 2;
  width: 42px; height: 42px; border-radius: 0;
  background: var(--ember); color: #fff;
  display: grid; place-items: center; font-weight: 700;
}
.steps strong { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 1.05rem; }

.hours { width: 100%; border-collapse: collapse; max-width: 420px; }
.hours th, .hours td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .98rem; }
.hours th { font-weight: 600; }
.hours td { text-align: right; color: var(--muted); }
.section--dark .hours th, .section--dark .hours td { border-color: rgba(246,239,230,.15); }
.section--dark .hours td { color: #bfae9d; }

.gallery { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.gallery figure { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 0; overflow: hidden; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery figcaption { padding: 12px 14px; font-size: .9rem; color: var(--muted); }

.quote { border-left: 4px solid var(--ember); padding: 4px 0 4px 20px; margin: 0; }
.quote p { font-size: 1.08rem; font-style: italic; }
.quote cite { font-style: normal; font-weight: 700; font-size: .92rem; color: var(--muted); }

/* ---------- Map ---------- */
.map {
  width: 100%; aspect-ratio: 16 / 9; min-height: 280px;
  border: 1px solid var(--line); border-radius: 0; background: var(--cream-2); display: block;
}

/* ---------- Forms ---------- */
.form { display: grid; gap: 28px; max-width: 640px; }
/* Three distinct steps, so a label can only belong to the control under it:
   3px label-to-hint (one block), 6px label-to-input, 26px field-to-field. The
   fields used to sit flush against each other inside a fieldset, with the same
   6px between a label and its input as between one field and the next. */
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: .95rem; }
.hint { font-size: .86rem; line-height: 1.45; color: var(--muted); }
.field > .hint { margin: 0; }
.field > label + .hint, .field > .label + .hint { margin-top: -3px; }
fieldset > .field + .field { margin-top: 26px; }
/* Introduces the whole fieldset rather than any one field, so it keeps the
   fieldset's own spacing and does not sit in a field's 6px band. */
.hint--block { margin: 2px 0 22px; }
/* An input has to look like something you type in before you focus it. The
   old #9c9181 hairline on the same --surface as the fieldset gave the field no
   edge at rest; white fill plus a 5.3:1 border makes the boundary readable
   without a heavier control. */
.field input, .field select, .field textarea {
  font: inherit; padding: 12px 13px; min-height: 48px;
  border: 1px solid #6f6558; border-radius: var(--r); background: #fff; color: var(--ink);
  box-shadow: inset 0 1px 2px rgba(37, 35, 31, .07);
}
.field input::placeholder, .field textarea::placeholder { color: #7c7263; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 3px solid rgba(154, 106, 54, .42); outline-offset: 1px; border-color: var(--ember);
}
.field textarea { min-height: 130px; resize: vertical; }
fieldset {
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 24px 22px 26px; margin: 0; background: var(--surface);
}
/* The legend keeps its 8px gap in the border but pulls back by the same 8px,
   so its text starts on the fields' left edge instead of 8px adrift. Measured
   at 1440 and 390: legend text and first field label both land on it. */
legend {
  font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 1.06rem;
  padding: 0 8px; margin-left: -8px;
}
.check { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
/* WCAG 2.2 SC 2.5.8 Target Size (Minimum) is 24x24 CSS px. A browser's default
   checkbox is ~13px, which fails; the label is clickable but the box itself is
   the target a pointer aims at. */
.check input { min-height: 24px; width: 24px; height: 24px; margin-top: 2px; flex: 0 0 24px; }
.check label { padding: 4px 0; }
.required { color: var(--ember-dk); }

/* margin-inline:auto on all three blocks: the shared 780px measure was correct
   but left-hung inside the 1080px shell, so on a wide screen the page read as
   content that had failed to fill rather than a deliberate column. Below 780px
   the max-width never binds and the blocks stay full width. */
.notice {
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--ember);
  border-radius: 0; padding: 17px 20px; max-width: var(--measure); margin-inline: auto;
}
.notice p:last-child { margin-bottom: 0; }
/* A phone number that wraps after "(979)" stops being a phone number. */
.notice a { white-space: nowrap; }

/* The planner's first field should be close to the top on a phone. The head
   and the section above the form were carrying ~120px of stacked padding. */
.section--planner { padding-top: clamp(22px, 3vw, 40px); }
@media (max-width: 560px) {
  .page-head { padding: 22px 0 12px; }
  .section--planner { padding-top: 18px; }
  fieldset { padding: 20px 16px 22px; }
}

/* ---------- CTA band ---------- */
.cta-band { background: var(--ember); color: #fff; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #ffe6da; max-width: 56ch; margin-inline: auto; }
.cta-band .hero__actions { justify-content: center; }

/* ---------- Footer ---------- */
.foot { background: var(--ink); color: #bfae9d; padding: 52px 0 26px; font-size: .95rem; }
.foot a { color: var(--cream); text-decoration: none; }
.foot a:hover { color: var(--tan-dk); text-decoration: underline; }
.foot h3 { color: var(--cream); font-size: 1rem; margin-bottom: .6em; }
/* The footer sits on --ink but is not .section--dark, so the shared .hours rules
   kept their light-background values here: the times were --muted at 2.29:1 and
   the row rules were dark-on-dark and invisible. Same treatment .section--dark
   already gives the table; 7.3:1 for the times. */
.foot .hours th, .foot .hours td { border-bottom-color: rgba(246, 239, 230, .15); }
.foot .hours td { color: #bfae9d; }
.foot__grid { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.foot__bottom {
  margin-top: 38px; padding-top: 20px; border-top: 1px solid rgba(246,239,230,.15);
  display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; font-size: .86rem;
}
.site-credit { color: #9c8b7c; font-size: 12px; margin: 0; }
.site-credit a { color: #9c8b7c; text-decoration: underline; }
.site-credit a:hover { color: var(--tan-dk); }

/* ---------- Breadcrumb ---------- */
.crumb { font-size: .88rem; color: var(--muted); padding: 16px 0 0; }
.crumb a { color: var(--muted); }
.crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.crumb li + li::before { content: "/"; margin-right: 8px; color: #b2a294; }

.page-head h1 { margin-bottom: .3em; }

/* ---------- Cut sheet + choice pills ---------- */
.cutsheet { list-style: none; counter-reset: cs; margin: 0; padding: 0; display: grid; gap: 18px; }
.cutsheet li {
  counter-increment: cs; position: relative;
  background: transparent; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 24px 0 24px 58px; box-shadow: none;
}
.cutsheet li::before {
  content: counter(cs, decimal-leading-zero); position: absolute; left: 0; top: 24px;
  width: 38px; height: 30px; border-radius: 0;
  border-right: 2px solid var(--ember); color: var(--ember-dk);
  font: 700 .86rem/30px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: left;
}
.cutsheet h3 { margin-bottom: .35em; }
.cutsheet p:last-child { margin-bottom: 0; }

.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.pill {
  display: inline-block; padding: 6px 12px; border-radius: 0;
  background: var(--cream-2); border: 1px solid var(--line);
  font-weight: 600; font-size: .92rem;
}

/* ---------- Choice inputs ---------- */
/* Same measure as .notice and .summary, so the three stacked blocks on the
   order page share one left and right edge. */
.form--wide {
  max-width: var(--measure);
  margin: clamp(20px, 2.6vw, 30px) auto 0;
}
.field .label { font-weight: 600; font-size: .95rem; }
.opts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.opt {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px; min-height: 44px;
  border: 1px solid #b9a894; border-radius: 999px; background: #fff;
  font-weight: 600; font-size: .95rem; cursor: pointer;
}
.opt input { width: 20px; height: 20px; margin: 0; accent-color: var(--ember); flex: 0 0 20px; }
.opt:hover { border-color: var(--ember); }
.opt:has(input:checked) { border-color: var(--ember); background: #efe2d1; color: var(--ember-dk); }
.opt:has(input:focus-visible) { outline: 3px solid rgba(154, 106, 54, .42); outline-offset: 2px; }

/* ---------- Completed sheet ---------- */
.summary {
  margin: 36px auto 0; max-width: var(--measure);
  background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--ember);
  border-radius: 0; padding: 26px 26px 24px; box-shadow: none;
}
.unsent-status {
  padding: 12px 14px; margin: 0 0 24px;
  background: var(--cream-2); border-left: 3px solid var(--ember);
}
.summary dl { display: grid; grid-template-columns: minmax(150px, 33%) 1fr; gap: 10px 20px; margin: 0; }
.summary dt { font-weight: 700; color: var(--muted); font-size: .92rem; }
.summary dd { margin: 0; }
@media (max-width: 560px) {
  .summary dl { grid-template-columns: 1fr; gap: 2px 0; }
  .summary dd { margin-bottom: 12px; }
}
@media print {
  .util, .masthead, .foot, .crumb, .page-head, .notice, .form,
  .summary .hero__actions, .summary .hint { display: none !important; }
  .summary { border: 0; box-shadow: none; padding: 0; }
}

/* The UA rule for [hidden] is `display:none`, which any explicit `display`
   in a class wins against. `.form` is `display:grid`, so hiding the form after
   submit left it fully rendered underneath the finished sheet. */
[hidden] { display: none !important; }

/* Honeypot. Not [hidden] and not display:none via a utility -- a bot that
   parses styles skips anything obviously hidden, and this field only works if
   the bot fills it. It is pulled out of the layout and off the tab order, and
   aria-hidden on the wrapper keeps it away from screen readers. */
.field--trap {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}