/* ==========================================================================
   Grass Roots Energy Inc. — Wauconda, IL
   Spec build for Crutchfield Marketing, July 2026.

   HOUSE STRUCTURE, OWN TYPE VOICE. The layout, spacing, warm paper body and
   fire photography are the house arrangement shared with Hearth Enterprises
   and Cracker Mill. The TYPE is not. Fraunces/Figtree/DM Mono was doing duty
   on fourteen of these builds and the shared stack was the reason the sites
   read as one template — and the reason this company's own logo looked like a
   guest on its own page.

   THE TYPE IS READ OFF THE LOGO. Their mark has two voices and a hierarchy:
     DOMINANT     a casual monoline marker hand, upright, letters separated,
                  generously spaced — "Grass Roots Energy Inc."
     SUBORDINATE  a heavy condensed sans, tightly packed, carrying the street
                  address and phone number underneath it
     COLOR        #CB2026 scarlet, sampled off the flame block

   The first pass at this site read only the SUBORDINATE voice and made
   condensed uppercase the whole page — it came out industrial and shouty,
   an auto parts store. The second pass dropped both voices and used the
   house serif, which was warm but had nothing to do with them.

   This pass keeps the logo's own hierarchy intact:
     Cabin            humanist sans, slightly rounded, hand-cut warmth in the
                      Johnston/Gill line. It rhymes with the marker hand
                      without being a novelty face. Display AND body.
     Cabin Condensed  700 uppercase, small — kickers, eyebrows, stat labels.
                      Exactly the role the condensed face plays in the logo:
                      subordinate, utilitarian, never the page voice.
     Caveat           ONE phrase per page, the beat at the end of the hero
                      headline. This is the direct tie back to the wordmark.
                      One per page. If it appears twice, it is a mistake.

   DM Mono is gone on purpose. Wide-tracked mono eyebrows are an agency tic
   and were a big part of why every build in this family looked related.

   PALETTE is still anchored to their own logo:
     #C82020  the flame mark on their site logo
     #E8621F  warmed from the flame in the alternate logo they declare in schema
   The cold #9BA1A4 sampled from their silver wordmark has been dropped as a
   UI color — it fought everything. Brass carries that job now.

   THE MASTHEAD STAYS DARK ON PURPOSE. Their wordmark is near-white with no
   dark variant, so it disappears on cream. Dark masthead over a paper body is
   the same arrangement Hearth Enterprises uses.
   ========================================================================== */

:root {
  /* Paper — the page is mostly this now */
  --paper:      #F8F2E7;
  --paper-2:    #F1E8D8;
  --paper-3:    #E7DAC5;
  --paper-edge: #D9C9AE;

  /* Warm brown-blacks. Never neutral gray. */
  --ink:        #1B1510;
  --ink-2:      #2C2219;
  --ink-soft:   #4E4238;
  --ink-mute:   #6F6155;
  /* build-pages.py's inline styles ask for these two. They were never
     defined, so 25 elements fell back to body ink (audit, 21 Oct 2026). */
  --dim:        var(--ink-soft);
  --dimmer:     var(--ink-mute);

  /* Dark surfaces */
  --soot:       #1F1811;
  --soot-2:     #2A2118;
  --soot-3:     #362A1E;
  --soot-line:  #443528;

  /* Fire — sampled from their logo, warmed */
  --red:        #C82020;
  --red-deep:   #97170F;
  --ember:      #E8621F;
  --ember-lit:  #F79A46;
  --ember-pale: #FBE7D3;

  /* Brass replaces the cold steel gray */
  --brass:      #B0894F;
  --brass-dim:  #765A31;   /* was #8A6B3C: 4.07:1 on paper-2, under AA for the kickers */
  --brass-pale: #EFE2CB;

  /* Type — read off their logo. See the note at the top of this file.
     --label replaces the old --mono. --mono is kept as an alias only so a
     stray var(--mono) cannot silently fall back to a serif. */
  --display: "Cabin", "Segoe UI", system-ui, -apple-system, sans-serif;
  --body:    "Cabin", "Segoe UI", system-ui, -apple-system, sans-serif;
  --label:   "Cabin Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  --hand:    "Caveat", "Segoe Script", "Bradley Hand", cursive;
  --mono:    var(--label);

  --page:    78rem;
  --narrow:  60rem;
  --r:       4px;
  --gut:     clamp(1.15rem, 4vw, 2.6rem);
  --tab-h:   0px;
}

*, *::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; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}
/* No overflow-x:hidden on body. On iOS it is the trap that makes a fixed tab
   bar float, and here it was masking a drawer parked off the right edge. The
   room under the tab bar is the footer's own padding (see footer.site), so
   the dark footer runs straight into the dark bar with no cream line. */

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

a { color: var(--red-deep); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--ember); }

:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ember); color: #1A1004; padding: .7rem 1.1rem;
  font-weight: 700; border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 0; }

/* ---------- Type ------------------------------------------------------- */

/* Cabin sits lighter on the page than the serif it replaced, so the display
   weight goes up to 700 to hold the same presence at the same sizes. */
h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  margin: 0;
  font-weight: 700;
  /* Cabin's ink measures about 1.07em. At 1.05-1.08 two-line headings came
     within half a pixel of touching (audit, 21 Oct 2026). */
  line-height: 1.12;
  letter-spacing: -.012em;
}
/* text-wrap: balance evens the ragged edge and kills one-word last lines,
   which a display face at this size makes very obvious. */
h1 { font-size: clamp(2.3rem, 1.5rem + 3.1vw, 3.9rem); line-height: 1.12;
     letter-spacing: -.02em; text-wrap: balance; }
h2 { font-size: clamp(1.85rem, 1.35rem + 2.1vw, 3rem); letter-spacing: -.016em;
     text-wrap: balance; }
h3 { font-size: clamp(1.2rem, 1.06rem + .6vw, 1.5rem); font-weight: 600; }
h4 { font-size: 1.08rem; line-height: 1.25; font-weight: 600; }

/* THE BEAT. The house pattern is one warm phrase inside the hero headline.
   On this build it is set in the hand face instead of an italic, because that
   is the one gesture their logo actually makes — it puts the wordmark's own
   handwriting on the page and stops the mark reading as a foreign object.

   Caveat's glyphs sit small inside their em box, so it is sized up to match
   the cap height of the sans beside it. It stays INLINE and unshifted so the
   two faces meet on a shared baseline, which is what makes a mixed-face line
   look set rather than pasted. ONE per page. */
h1 em, h2 em, .beat {
  font-family: var(--hand);
  font-style: normal;
  font-weight: 600;
  font-size: 1.16em;
  letter-spacing: .004em;
  /* Deeper than --ember on purpose. --ember is 2.8:1 on paper-2, under even
     the large-text bar; this is 4.1:1. Dark grounds override to --ember-lit. */
  color: #BF4A17;
}
section.dark h1 em, section.dark h2 em, .band h2 em, .band h1 em { color: var(--ember-lit); }

p { margin: 0 0 1.05rem; }
p:last-child { margin-bottom: 0; }
strong { color: var(--ink); font-weight: 600; }

.lede {
  font-size: clamp(1.08rem, 1rem + .38vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 48ch;
}

/* Condensed caps carry less width per character than the mono they replace,
   so the tracking comes in and the size goes up a step to hold the same
   optical weight on the line. */
.kicker {
  font-family: var(--label);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--brass-dim);
  margin: 0 0 .85rem;
  display: block;
}

hr.rule, .rule {
  height: 2px; border: 0; margin: 0; max-width: 5rem;
  background: linear-gradient(90deg, var(--red), var(--ember));
}

/* ---------- Layout ----------------------------------------------------- */

.wrap { width: min(100% - (2 * var(--gut)), var(--page)); margin-inline: auto; }
.wrap.narrow { width: min(100% - (2 * var(--gut)), var(--narrow)); }

section { padding: clamp(3.2rem, 2rem + 5vw, 6.2rem) 0; }
section.tight { padding: clamp(2rem, 1.5rem + 2.4vw, 3.2rem) 0; }
section.alt { background: var(--paper-2); }
section.dark {
  background: var(--soot); color: #DDD2C4;
}
section.dark h1, section.dark h2, section.dark h3, section.dark h4 { color: var(--paper); }
section.dark .lede { color: #CFC3B4; }
section.dark .kicker { color: var(--ember-lit); }
section.dark a { color: var(--ember-lit); }

.grid { display: grid; gap: clamp(1rem, .6rem + 1.4vw, 1.7rem); }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); }
@media (min-width: 62rem) { .g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.makers { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); align-items: start; }
/* brand lists are short, so they go two-up on a phone */
.makers.brandgroups { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
@media (min-width: 62rem) { .makers.brandgroups { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); } }
@media (min-width: 62rem) { .makers { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); } }

.section-head { margin-bottom: clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem); }
.section-head p { color: var(--ink-mute); max-width: 52ch; margin-top: .75rem; }

/* ---------- Top bar + masthead (dark — the logo needs it) -------------- */

.topbar {
  background: var(--red-deep);
  color: #F7E3DC;
  font-size: .8rem;
  font-family: var(--label);
}
.topbar .wrap {
  display: flex; flex-wrap: wrap; gap: .3rem 1.3rem;
  align-items: center; justify-content: center;
  padding-block: .4rem; text-align: center;
}
.topbar a { color: #FFF; text-decoration: none; font-weight: 500;
            display: inline-block; padding: .35rem .2rem; }
.topbar a:hover { text-decoration: underline; }
.topbar .sep { color: #D9968A; }

.masthead {
  position: sticky; top: 0; z-index: 60;
  background: var(--soot);
  border-bottom: 1px solid var(--soot-line);
}
.masthead > .wrap {
  position: relative;
  display: flex; align-items: center; gap: 1.2rem;
  padding-block: .75rem;
}
.brand { flex: none; display: block; line-height: 0; }
.brand img { width: clamp(11rem, 9rem + 8vw, 16rem); }

nav.main { margin-left: auto; display: none; }
nav.main ul { display: flex; gap: .1rem; list-style: none; margin: 0; padding: 0;
              align-items: center; }
nav.main a, nav.main .mega-t {
  display: flex; align-items: center; gap: .34rem;
  padding: .55rem .74rem; min-height: 44px;
  font-family: var(--body); font-size: .97rem; font-weight: 600;
  letter-spacing: .005em;
  color: #DCD1C2; text-decoration: none; border-radius: var(--r);
  background: none; border: 0; cursor: pointer;
}
nav.main a:hover, nav.main a[aria-current="page"],
nav.main .mega-t:hover, nav.main .mega-t[aria-expanded="true"] {
  color: #FFF; background: var(--soot-2);
}
nav.main a[aria-current="page"],
nav.main .mega-t[data-section="on"] { box-shadow: inset 0 -2px 0 var(--ember); }
nav.main .mega-t svg {
  width: 9px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .16s ease; opacity: .65;
}
nav.main .mega-t[aria-expanded="true"] svg { transform: rotate(180deg); opacity: 1; }

.hdr-cta { flex: none; display: none; align-items: center; gap: .6rem; }

.burger {
  margin-left: auto; display: inline-flex; align-items: center; gap: .5rem;
  background: var(--soot-2); color: #EFE4D6;
  border: 1px solid var(--soot-line); border-radius: var(--r);
  padding: .55rem .9rem; min-height: 44px;
  font: 600 .84rem/1 var(--body); letter-spacing: .04em; cursor: pointer;
}
.burger svg { width: 15px; height: 15px; }

@media (min-width: 62rem) {
  nav.main { display: block; }
  .hdr-cta { display: flex; }
  .burger { display: none; }
}
/* Seven nav items since Gallery went in (14 Oct 2026). Just past the
   breakpoint the header was 52px wider than the page, so on narrow desktops
   the links and the gaps tighten up. render-audit.py's NAV check measures it. */
@media (min-width: 62rem) and (max-width: 69.99rem) {
  .masthead > .wrap { gap: .8rem; }
  nav.main a, nav.main .mega-t { padding-inline: .5rem; }
}

/* ---------- Mega menu -------------------------------------------------- */

.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--soot-2);
  border-top: 1px solid var(--soot-line);
  border-bottom: 2px solid var(--ember);
  box-shadow: 0 26px 50px rgba(0, 0, 0, .42);
  z-index: 70;
}
.mega[hidden] { display: none; }
.mega-inner {
  display: grid; gap: clamp(1.2rem, .8rem + 1.6vw, 2.4rem);
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .82fr);
  padding: 1.6rem 0 1.8rem;
  align-items: start;
}
.mega[data-panel="service"] .mega-inner,
.mega[data-panel="brands"] .mega-inner {
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, .82fr);
}
.mega-col h3, .mega-aside h3 {
  font-family: var(--label); font-size: .74rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--brass);
  margin-bottom: .8rem; line-height: 1.4;
}
.mega-col ul { list-style: none; margin: 0; padding: 0; }
.mega-col a {
  display: block; padding: .48rem .7rem; margin-left: -.7rem;
  border-radius: var(--r); text-decoration: none;
  border-left: 2px solid transparent; min-height: 44px;
}
.mega-col a:hover, .mega-col a:focus-visible,
.mega-col a[aria-current="page"] { background: var(--soot-3); border-left-color: var(--ember); }
.mega-col .l {
  display: block; font-family: var(--display); font-size: 1.14rem; font-weight: 600;
  color: var(--paper); line-height: 1.15; letter-spacing: -.01em;
}
.mega-col a:hover .l, .mega-col a[aria-current="page"] .l { color: var(--ember-lit); }
.mega-col .d { display: block; font-size: .82rem; color: #A99B8B; line-height: 1.4; margin-top: .1rem; }
.mega-aside {
  background: var(--soot); border: 1px solid var(--soot-line);
  border-top: 2px solid var(--ember); border-radius: var(--r);
  padding: 1.05rem 1.15rem 1.15rem;
}
.mega-aside p { font-size: .88rem; color: #A99B8B; line-height: 1.55; margin-bottom: .95rem; }

.mega-scrim {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(20, 14, 9, .4);
  opacity: 0; pointer-events: none; transition: opacity .16s ease;
}
.mega-scrim.open { opacity: 1; pointer-events: auto; }

@media (max-width: 61.99rem) { .mega, .mega-scrim { display: none !important; } }

/* ---------- Drawer ----------------------------------------------------- */

.drawer-scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(20, 14, 9, .68);
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.drawer-scrim.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
  width: min(21rem, 88vw);
  background: var(--soot);
  border-left: 1px solid var(--soot-line);
  /* Closed, it stays where it is: invisible, unfocusable, not parked past
     the right edge (which iOS can scroll to and which body overflow-x used
     to hide). visibility waits for the fade on close and flips at once on
     open, so focus can land in it immediately. */
  opacity: 0; visibility: hidden;
  transform: scale(.97); transform-origin: 100% 50%;
  transition: opacity .22s ease, transform .26s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .26s;
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
}
.drawer.open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .22s ease, transform .26s cubic-bezier(.4, 0, .2, 1), visibility 0s;
}
.drawer-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.1rem; border-bottom: 1px solid var(--soot-line);
}
.drawer-top span {
  font-family: var(--label); font-size: .76rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brass);
}
.drawer-close {
  background: none; border: 0; color: var(--paper); cursor: pointer;
  font-size: 1.5rem; line-height: 1; padding: .2rem .45rem;
  min-width: 44px; min-height: 44px;
}
.drawer nav { padding: .5rem 0 1rem; }
.drawer nav a {
  display: block; padding: .74rem 1.1rem;
  font-family: var(--display); font-size: 1.2rem; font-weight: 600;
  color: #E4D9CA; text-decoration: none;
  border-bottom: 1px solid var(--soot-2);
}
.drawer nav a:hover, .drawer nav a[aria-current="page"] { color: var(--ember-lit); background: var(--soot-2); }
.drawer nav .sub {
  font-family: var(--body); font-size: .93rem; font-weight: 500;
  padding-left: 2rem; color: #A99B8B;
}
.drawer-foot { margin-top: auto; padding: 1.1rem; border-top: 1px solid var(--soot-line); }
.drawer-foot .mono { color: #A99B8B; }

/* ---------- Buttons ---------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--body); font-size: 1rem; font-weight: 600;
  letter-spacing: .005em;
  padding: .8rem 1.4rem; border-radius: var(--r);
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none; transition: background .15s ease, border-color .15s ease, color .15s ease;
  min-height: 48px;
}
.btn-fire {
  background: linear-gradient(180deg, #C8461A, var(--red-deep));  /* top was #D8501B: white text 4.1:1 */
  color: #FFF; border-color: #C0491A;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset;
}
.btn-fire:hover { background: var(--ember); color: #1A0C02; border-color: var(--ember-lit); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--paper-edge); }
.btn-ghost:hover { border-color: var(--ember); color: var(--red-deep); background: var(--paper-2); }
/* EVERY dark surface has to be in both lists. The mega menu was missing, so
   "See every brand" rendered dark ink on a dark panel (1.03:1) and read as a
   blank button until hovered. render-audit.py now measures this. */
section.dark .btn-ghost, .band .btn-ghost, .hero .btn-ghost, .pagehead .btn-ghost,
.mega .btn-ghost, .drawer .btn-ghost, footer.site .btn-ghost, .masthead .btn-ghost {
  color: var(--paper); border-color: rgba(240, 228, 210, .32);
}
section.dark .btn-ghost:hover, .band .btn-ghost:hover, .hero .btn-ghost:hover, .pagehead .btn-ghost:hover,
.mega .btn-ghost:hover, .drawer .btn-ghost:hover, footer.site .btn-ghost:hover, .masthead .btn-ghost:hover,
.mega .btn-ghost:focus-visible, .drawer .btn-ghost:focus-visible {
  border-color: var(--ember-lit); color: var(--ember-lit); background: rgba(0, 0, 0, .25);
}
.btn-sm { font-size: .93rem; padding: .55rem 1rem; min-height: 42px; }
.btn-wide { width: 100%; }

/* ---------- Hero ------------------------------------------------------- */

.hero { position: relative; background: #100B07; overflow: hidden; }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media picture { display: block; width: 100%; height: 100%; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(14,9,5,.9) 0%, rgba(14,9,5,.66) 38%, rgba(14,9,5,.16) 58%, rgba(14,9,5,.2) 74%, rgba(14,9,5,.45) 100%),
    linear-gradient(180deg, rgba(14,9,5,.5) 0%, transparent 26%, transparent 70%, rgba(14,9,5,.6) 100%);
}
/* Stacked (phones and tablets): the hero runs 1,200px+ tall with the lead
   card in it, and a full-height media layer put the burning logs behind the
   card. Cap the photo to the first screen, where the headline is, and fade
   it into the hero's own color so there is no seam. */
@media (max-width: 59.99rem) {
  .hero-media { inset: 0 0 auto 0; height: 62vh; min-height: 25rem; max-height: 40rem; }
  .hero-media::after {
    background: linear-gradient(180deg, rgba(14,9,5,.52) 0%, rgba(14,9,5,.42) 45%, rgba(14,9,5,.7) 78%, #100B07 100%);
  }
}
.hero .wrap { position: relative; z-index: 2; }
.hero-inner {
  display: grid; gap: clamp(1.8rem, 1rem + 3vw, 3.2rem);
  padding-block: clamp(3rem, 2rem + 5.5vw, 6rem);
  align-items: center;
}
@media (min-width: 60rem) { .hero-inner { grid-template-columns: 1.06fr .94fr; } }
.hero .kicker { color: var(--brass); }
.hero h1 { color: var(--paper); text-shadow: 0 2px 26px rgba(0, 0, 0, .55); }
.hero h1 em { color: var(--ember-lit); }
.hero .lede { margin-top: 1.1rem; color: #E3D8C9; text-shadow: 0 1px 12px rgba(0, 0, 0, .7); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }

/* ---------- Lead form: a cream card on the dark hero ------------------- */

.leadcard {
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  border-top: 3px solid var(--ember);
  border-radius: var(--r);
  padding: clamp(1.2rem, .9rem + 1.2vw, 1.8rem);
  /* Restrained on a paper section; the deep lift is only earned over the
     dark hero photograph, where the card has to separate from the fire. */
  box-shadow: 0 2px 10px rgba(60, 40, 20, .07);
}
.hero .leadcard { box-shadow: 0 24px 54px rgba(0, 0, 0, .42); }
section.alt .leadcard { background: #FBF6EC; }
.leadcard h2 { font-size: clamp(1.45rem, 1.25rem + .9vw, 1.85rem); }
.leadcard > p { color: var(--ink-mute); font-size: .95rem; margin: .5rem 0 1.15rem; }

.field { margin-bottom: .8rem; }
.field label {
  display: block; font-family: var(--label); font-size: .74rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-mute);
  margin-bottom: .3rem;
}
.field label .req { color: var(--red-deep); }
.field input, .field select, .field textarea {
  width: 100%; background: #FFFDF8; color: var(--ink);
  border: 1px solid var(--paper-edge); border-radius: var(--r);
  padding: .68rem .8rem; font: 400 1rem/1.4 var(--body);
  min-height: 46px;
}
.field textarea { min-height: 5.2rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--ember); outline: none;
  box-shadow: 0 0 0 3px rgba(232, 98, 31, .16);
}
.field input::placeholder, .field textarea::placeholder { color: #A79A8C; }
.field-row { display: grid; gap: .8rem; }
@media (min-width: 30rem) { .field-row { grid-template-columns: 1fr 1fr; } }

.formnote { font-size: .82rem; color: var(--ink-mute); margin-top: .85rem; line-height: 1.5; }
/* The honeypot. Hidden in place (1px, clipped), never display:none and never
   parked at -9999px: the form has no overflow clip to catch it since body
   lost overflow-x:hidden, and a parked box is what iOS scrolls to. */
.hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
      overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- Stats ------------------------------------------------------ */

.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1px; background: var(--paper-edge);
  border: 1px solid var(--paper-edge); border-radius: var(--r); overflow: hidden;
}
.stat { background: var(--paper); padding: 1.15rem 1.15rem 1.2rem; }
.stat b {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.7rem); line-height: 1;
  color: var(--red-deep); letter-spacing: -.02em;
}
.stat span {
  display: block; margin-top: .4rem; font-size: .84rem; line-height: 1.45;
  color: var(--ink-mute);
}
section.alt .stat { background: var(--paper-2); }

/* ---------- Category cards --------------------------------------------- */

.cats {
  display: grid; gap: 1px; background: var(--paper-edge);
  border: 1px solid var(--paper-edge); border-radius: var(--r); overflow: hidden;
  grid-template-columns: 1fr;
}
@media (min-width: 38rem) { .cats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 66rem) { .cats { grid-template-columns: repeat(3, 1fr); } }
.cat {
  background: var(--paper); padding: 1.35rem 1.3rem 1.4rem;
  display: flex; flex-direction: column; text-decoration: none;
  transition: background .16s ease; position: relative;
}
.cat:hover { background: #FFFDF7; }
.cat::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--red), var(--ember));
  opacity: 0; transition: opacity .16s ease;
}
.cat:hover::before { opacity: 1; }
.cat h3 { color: var(--ink); margin-bottom: .35rem; }
.cat:hover h3 { color: var(--red-deep); }
.cat p { color: var(--ink-mute); font-size: .95rem; line-height: 1.5; margin-bottom: .9rem; }
.cat .brands {
  margin-top: auto; font-family: var(--label); font-size: .75rem;
  letter-spacing: .07em; text-transform: uppercase; color: var(--brass-dim);
  line-height: 1.75; border-top: 1px solid var(--paper-3); padding-top: .75rem;
}

/* ---------- Map -------------------------------------------------------- */

.visit-map {
  margin-top: clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
  border: 1px solid var(--paper-edge);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--paper-2);
  line-height: 0;
}
.visit-map iframe {
  width: 100%;
  height: var(--map-h, 400px);
  border: 0;
  display: block;
  /* Knocks the stock Google blue-and-white back toward the warm page without
     making the roads hard to read. */
  filter: saturate(.82) contrast(1.03);
}
section.dark .visit-map { border-color: var(--soot-line); background: var(--soot-2); }

/* ---------- FireBuilder card ------------------------------------------- */

/* Links out to the Travis configurator rather than framing it. See the note on
   firebuilder() in sitegen.py for why the iframe came out -- short version, the
   app needs the whole window and a frame starves it.

   The art is the manufacturer's own 640x445 banner, so this NEVER upscales it:
   max-width is pinned to its native width and the image is centered instead of
   stretched. Blowing up a 640px JPEG-grade PNG across a 1180px column is what
   makes a dealer site look cheap. */
.fbcard {
  display: block;
  max-width: 640px;
  margin: clamp(1.4rem, 1rem + 1.4vw, 2.2rem) auto 0;
  border: 1px solid var(--paper-edge);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--paper-2);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.fbcard img { width: 100%; height: auto; display: block; }
.fbcard-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .3rem 1rem;
  padding: .85rem 1rem;
  border-top: 1px solid var(--paper-edge);
  background: var(--paper-3);
}
.fbcard-go {
  font-family: var(--label);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red-deep);
}
.fbcard-go::after { content: " \2192"; }
.fbcard-sub {
  font-family: var(--label);
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--ink-soft);
}
.fbcard:hover,
.fbcard:focus-visible {
  border-color: var(--brass);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(27, 21, 16, .13);
}
.fbcard:hover .fbcard-go,
.fbcard:focus-visible .fbcard-go { text-decoration: underline; text-underline-offset: .25em; }
@media (prefers-reduced-motion: reduce) {
  .fbcard { transition: none; }
  .fbcard:hover, .fbcard:focus-visible { transform: none; }
}

/* ---------- Photo strip ------------------------------------------------ */

.strip { display: grid; gap: 3px; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.strip figure { margin: 0; position: relative; overflow: hidden; background: #100B07;
                border-radius: var(--r); }
.strip img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.strip figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.2rem .9rem .8rem;
  background: linear-gradient(transparent, rgba(12, 8, 4, .9));
  font-family: var(--label); font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase; color: #F3E9DA;
}

/* ---------- Bands ------------------------------------------------------ */

.band { position: relative; background: #100B07; overflow: hidden; }
.band > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .9;
}
.band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(12,8,4,.95) 0%, rgba(12,8,4,.86) 34%,
                                     rgba(12,8,4,.4) 66%, rgba(12,8,4,.18) 100%);
}
.band .wrap { position: relative; z-index: 2; padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
/* The desktop scrim is horizontal and nearly clear on the right, where no
   copy sits. On a phone the copy runs edge to edge, and the clearance quote
   measured 1.05:1 on white-hot flame. */
@media (max-width: 44rem) {
  .band::after { background: linear-gradient(180deg, rgba(12,8,4,.76) 0%, rgba(12,8,4,.88) 100%); }
}
.band-quote {
  font-family: var(--display); font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(1.8rem, 1.3rem + 2.3vw, 3rem); line-height: 1.12;
  color: var(--paper); max-width: 18ch; text-wrap: balance;
}
.band-quote em { font-style: italic; font-weight: 500; color: var(--ember-lit); }
.band .lede { color: #DCD0C0; }

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

.pagehead { position: relative; background: #100B07; overflow: hidden; }
.pagehead > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* Shade behind the words only. The old pair of stacked scrims over an
   80%-opacity photo left about a fifth of the fire showing, and most page
   headers read as black slabs (audit, 21 Oct 2026). */
.pagehead::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(12,8,4,.9) 0%, rgba(12,8,4,.72) 40%,
                                     rgba(12,8,4,.22) 72%, rgba(12,8,4,.1) 100%);
}
@media (max-width: 44rem) {
  .pagehead::after { background: linear-gradient(180deg, rgba(12,8,4,.58) 0%, rgba(12,8,4,.74) 100%); }
}
.pagehead .wrap { position: relative; z-index: 2; padding-block: clamp(2.6rem, 2rem + 3.6vw, 4.6rem); }
.pagehead h1 { color: var(--paper); }
.pagehead h1 em { color: var(--ember-lit); }
.pagehead .kicker { color: var(--brass); }
.pagehead .lede { margin-top: .9rem; color: #DFD3C3; }

.crumb {
  font-family: var(--label); font-size: .76rem; letter-spacing: .12em;
  text-transform: uppercase; color: #A99B8B; margin-bottom: .9rem;
}
.crumb a { color: #A99B8B; text-decoration: none; display: inline-block; padding-block: .55rem; margin-block: -.55rem; }
.crumb a:hover { color: var(--ember-lit); }
.crumb span { color: #7C7062; margin: 0 .4rem; }

/* ---------- Prose ------------------------------------------------------ */

.prose { max-width: 68ch; }
.prose h2 { margin: 2.5rem 0 .85rem; }
.prose h3 { margin: 1.9rem 0 .55rem; color: var(--red-deep); }
.prose ul, .prose ol { padding-left: 1.15rem; margin: 0 0 1.15rem; }
.prose li { margin-bottom: .42rem; }
.prose li::marker { color: var(--ember); }
.prose > :first-child { margin-top: 0; }

/* ---------- Panels ----------------------------------------------------- */

.panel {
  background: var(--paper); border: 1px solid var(--paper-edge);
  border-radius: var(--r); padding: clamp(1.1rem, .9rem + .8vw, 1.6rem);
}
section.alt .panel { background: #FBF6EC; }
.panel.lit { border-left: 3px solid var(--ember); }
.panel h3 { margin-bottom: .5rem; }
.panel h4 { margin-bottom: .45rem; color: var(--red-deep); }
.panel p { color: var(--ink-mute); font-size: .96rem; }
.panel > :last-child { margin-bottom: 0; }

dl.pairs { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .28rem 1.2rem; }
dl.pairs dt {
  font-family: var(--label); font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brass-dim); padding-top: .2rem;
}
dl.pairs dd { margin: 0; color: var(--ink-soft); }
section.dark dl.pairs dd { color: #DCD0C0; }
section.dark dl.pairs dt { color: var(--brass); }
footer.site dl.pairs dd { color: #C6B9A8; }
footer.site dl.pairs dt { color: var(--brass); }

/* ---------- FAQ -------------------------------------------------------- */

details.qa { border-bottom: 1px solid var(--paper-3); padding: 0; }
details.qa summary {
  cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 600; font-size: 1.16rem;
  line-height: 1.25; color: var(--ink); letter-spacing: -.012em;
  display: flex; gap: .85rem; align-items: flex-start;
  padding: 1rem 0;  /* on the summary, not the details, so the whole row is the tap target */
}
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::before {
  content: "+"; color: var(--ember); font-family: var(--label);
  font-size: 1.15rem; line-height: 1.15; flex: none;
}
details.qa[open] summary::before { content: "\2212"; }
details.qa[open] summary { color: var(--red-deep); }
details.qa .a { padding: 0 0 1.1rem 1.8rem; color: var(--ink-soft); max-width: 68ch; }
details.qa .a p:last-child { margin-bottom: 0; }

/* ---------- Brand pages ------------------------------------------------ */

.dealerstrip {
  background: var(--paper-2); border: 1px solid var(--paper-edge);
  border-left: 3px solid var(--ember); border-radius: var(--r);
  padding: 1.2rem 1.3rem;
}
.dealerstrip .badge {
  display: inline-block; font-family: var(--label); font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase;
  background: var(--ember-pale); color: var(--red-deep);
  border: 1px solid rgba(232, 98, 31, .35);
  padding: .3em .7em; border-radius: 2px; margin-bottom: .75rem;
}
.dealerstrip .name {
  font-family: var(--display); font-size: 1.45rem; font-weight: 600;
  color: var(--ink); line-height: 1.1; letter-spacing: -.015em;
}

.brandlist {
  display: grid; gap: 1px; background: var(--paper-edge);
  border: 1px solid var(--paper-edge); border-radius: var(--r); overflow: hidden;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 66rem) { .brandlist { grid-template-columns: repeat(4, 1fr); } }
/* The 1px gap shows the tan background as grid lines, so a short last row
   used to leave a solid tan block. The last cell takes the leftover columns. */
.brandlist > :last-child:nth-child(2n+1) { grid-column: span 2; }
@media (min-width: 66rem) {
  .brandlist > :last-child:nth-child(2n+1) { grid-column: auto; }
  .brandlist > :last-child:nth-child(4n+1) { grid-column: span 4; }
  .brandlist > :last-child:nth-child(4n+2) { grid-column: span 3; }
  .brandlist > :last-child:nth-child(4n+3) { grid-column: span 2; }
}
/* Direct children only. `.brandlist div` used to match the name and the
   description INSIDE each card too, padding each one like a whole card. */
.brandlist > a, .brandlist > div {
  background: var(--paper); padding: 1rem 1.1rem; text-decoration: none;
  display: block; transition: background .15s ease;
}
section.alt .brandlist > a, section.alt .brandlist > div { background: var(--paper-2); }
@media (max-width: 37.99rem) {
  .brandlist > a, .brandlist > div { padding: .85rem .9rem; }
  .brandlist .b { font-size: 1.04rem; }
}
.brandlist a:hover { background: #FFFDF7; }
.brandlist .b {
  font-family: var(--display); font-size: 1.18rem; font-weight: 600;
  color: var(--ink); line-height: 1.15; letter-spacing: -.012em;
}
.brandlist a:hover .b { color: var(--red-deep); }
.brandlist .c { font-size: .83rem; color: var(--ink-mute); margin-top: .2rem; }

/* ---------- Reviews ---------------------------------------------------- */

.quote {
  background: var(--paper); border: 1px solid var(--paper-edge);
  border-radius: var(--r); padding: 1.3rem;
  display: flex; flex-direction: column;
}
section.alt .quote { background: #FBF6EC; }
.quote .stars { color: var(--ember); letter-spacing: .16em; font-size: .95rem; }
.quote blockquote {
  margin: .65rem 0 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.6;
  font-family: var(--display); font-weight: 400; font-style: italic;
}
.quote cite {
  margin-top: .85rem; font-style: normal; font-family: var(--label);
  font-size: .71rem; letter-spacing: .09em; text-transform: uppercase; color: var(--brass-dim);
}

.rating-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.6rem;
  border-top: 1px solid var(--soot-line); padding-top: 1.6rem;
}
.rating-sub { color: #CFC3B4; font-size: 1.1rem; line-height: 1.6; margin: 0; flex: 1 1 22rem; max-width: 46ch; }

/* ---------- Footer ----------------------------------------------------- */

footer.site {
  background: var(--soot); color: #B9AC9C;
  border-top: 3px solid var(--ember);
  padding: clamp(2.6rem, 2rem + 3vw, 4rem) 0 calc(1.4rem + var(--tab-h));
  font-size: .93rem;
}
footer.site .cols {
  display: grid; gap: 2rem clamp(1.4rem, 1rem + 2vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
footer.site h4 {
  font-size: .78rem; font-family: var(--label); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--brass);
  margin-bottom: .85rem;
}
footer.site ul { list-style: none; margin: 0; padding: 0; }
footer.site li { margin-bottom: .4rem; }
footer.site li a { display: inline-block; }
@media (max-width: 61.99rem) {
  footer.site li { margin-bottom: 0; }
  footer.site li a { padding: .6rem 0; }
}
footer.site a { color: #C6B9A8; text-decoration: none; }
footer.site a:hover { color: var(--ember-lit); text-decoration: underline; }
footer.site .addr { color: #B9AC9C; font-style: normal; line-height: 1.75; }
footer.site .addr b { color: var(--paper); }
.colophon {
  margin-top: 2.4rem; padding-top: 1.15rem; border-top: 1px solid var(--soot-line);
  display: flex; flex-wrap: wrap; gap: .55rem 1.4rem;
  justify-content: space-between; align-items: baseline;
  font-size: .8rem; color: #8E8272;
}
.colophon a { color: #8E8272; }

.mono { font-family: var(--label); font-size: .88rem; letter-spacing: .01em; }

/* ---------- Bottom tab bar --------------------------------------------- */

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(31, 24, 17, .97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--soot-line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; gap: .16rem;
  padding: .5rem .25rem .55rem; text-decoration: none;
  color: #B9AC9C; font-size: .64rem; letter-spacing: .05em;
  text-transform: uppercase; font-weight: 600; min-height: 52px;
  justify-content: center;
}
.tabbar a svg { width: 20px; height: 20px; stroke: currentColor; fill: none;
                stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tabbar a:hover, .tabbar a.is-on { color: var(--ember-lit); }
.tabbar a.call { color: var(--ember); }
/* Center slot: a raised disc in the logo's flame red, ringed in the bar's own
   color so it reads as punched through the bar. It goes to the page's own
   lead form (#quote), or to the one on Contact on pages without a form. */
.tabbar a.tab-fab { color: #F3E9DC; overflow: visible; }
.tab-fab__btn {
  display: grid; place-items: center;
  width: 3.3rem; height: 3.3rem; border-radius: 50%;
  margin-top: -1.6rem;
  background: linear-gradient(160deg, var(--ember-lit), var(--red-deep));
  border: 3px solid rgb(31, 24, 17);
  box-shadow: 0 4px 14px rgba(203, 32, 38, .42), 0 2px 4px rgba(0, 0, 0, .35);
  color: #FFF8EF;
}
.tabbar a.tab-fab svg { width: 1.45rem; height: 1.45rem; }
.tab-fab:active .tab-fab__btn { transform: scale(.94); }
.leadcard[id] { scroll-margin-top: 6rem; }

@media (max-width: 61.99rem) {
  :root { --tab-h: calc(58px + env(safe-area-inset-bottom)); }
  .tabbar { display: grid; }
}
@media (min-width: 62rem) { .tabbar { display: none; } }

/* ---------- Small screens ---------------------------------------------- */

@media (max-width: 40rem) {
  .hero-inner { padding-block: 2.4rem 2.6rem; }
  /* one line on a phone: the tagline and its bullet drop, the phone link gets a real tap target */
  .topbar .tb-long { display: none; }
  .topbar .wrap { padding-block: 0; }
  .topbar a { min-height: 44px; display: inline-flex; align-items: center; }
  /* two columns of links instead of one long scroll; Find us runs full width */
  footer.site .cols { grid-template-columns: 1fr 1fr; gap: 1.6rem 1.2rem; }
  footer.site .cols > :last-child { grid-column: 1 / -1; }
  .strip { grid-template-columns: 1fr 1fr; }
  .topbar .wrap { font-size: .74rem; }
}

/* ---------- Print ------------------------------------------------------ */

@media print {
  .masthead, .topbar, .tabbar, .drawer, .drawer-scrim, .hero-media, .band > img,
  .mega, .mega-scrim { display: none !important; }
  body { background: #FFF; color: #000; padding: 0; }
  a { color: #000; }
}


/* ---------------------------------------------------------------------------
   Crutchfield Marketing credit — added 27 Jul 2026.
   Palette-agnostic on purpose: it inherits the footer's own color, so it sits
   as a peer of the copyright line beside it on any ground.

   NO opacity fade. The first version used opacity:.55 and measured 2.0-3.5:1
   contrast, because footers already pass a semi-transparent color and the two
   compounded. Inheriting outright gives 4.6-9.0:1. It recedes because it is
   small, muted and at the edge — not because it is washed out.
   --------------------------------------------------------------------------- */
.cm-credit{
  display:inline-flex;
  align-items:center;
  gap:.42em;
  font-size:.75rem;
  line-height:1;
  letter-spacing:.01em;
  text-decoration:none;
  color:inherit;
  padding:.5em .2em;          /* keeps the tap target >=24px */
  border-radius:999px;
  white-space:nowrap;
}
.cm-credit svg{ height:1.35em; width:auto; flex:none; display:block; }
.cm-credit b{ font-weight:600; }
.cm-credit:hover b,
.cm-credit:focus-visible b{ text-decoration:underline; text-underline-offset:.25em; }

/* ---------- Clearance list -------------------------------------------- */
/* Cards are drawn by js/clearance.js from the list staff keep at /staff/. */

.cl-grid { display: grid; gap: clamp(1rem, .6rem + 1.4vw, 1.7rem);
           grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); }
.cl-card { background: #FFFDF7; border: 1px solid var(--paper-edge); border-radius: var(--r);
           overflow: hidden; display: flex; flex-direction: column; }
.cl-photo { position: relative; aspect-ratio: 4 / 3; background: var(--paper-3); }
.cl-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-photo.is-empty { display: grid; place-items: center; }
.cl-photo.is-empty span { font-family: var(--label); font-size: .8rem; letter-spacing: .1em;
                          text-transform: uppercase; color: var(--ink-soft); }
.cl-sold { position: absolute; top: .7rem; left: .7rem; background: var(--soot); color: #fff;
           font-family: var(--label); font-size: .8rem; letter-spacing: .12em;
           text-transform: uppercase; padding: .3rem .6rem; border-radius: 3px; }
.cl-card.is-sold .cl-photo img { filter: grayscale(1); opacity: .6; }
.cl-body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.cl-kind { font-family: var(--label); font-size: .78rem; letter-spacing: .1em;
           text-transform: uppercase; color: var(--brass-dim); }
.cl-body h3 { font-size: 1.25rem; }
.cl-body p { color: var(--ink-soft); font-size: .96rem; margin: 0; }
.cl-body .btn { margin-top: auto; align-self: flex-start; }
.cl-body p + .btn { margin-top: .5rem; }

/* ---------- /staff/ ---------------------------------------------------- */

main.staff { padding-block: 1.5rem 4rem; }
main.staff h1 { font-size: clamp(1.9rem, 1.5rem + 2vw, 2.6rem); margin: 1.2rem 0 .8rem; }
.st-logo { background: var(--soot); padding: .6rem .9rem; border-radius: var(--r);
           width: 14rem; height: auto; display: block; }
main.staff .leadcard { margin-top: 1rem; }
main.staff .leadcard h2 { margin-bottom: .9rem; }
main.staff .leadcard .btn + .btn { margin-top: .6rem; }
.st-preview { display: block; margin-top: .7rem; max-width: 12rem; border-radius: var(--r);
              border: 1px solid var(--paper-edge); }
.st-msg { margin: .8rem 0 0; font-size: .95rem; color: var(--ink-soft); }
.st-msg.is-bad { color: var(--red-deep); font-weight: 600; }
.st-count { font-size: 1.2rem; margin: 2.2rem 0 .8rem; }
.st-row { display: grid; grid-template-columns: 4.5rem 1fr; gap: .4rem .9rem; align-items: center;
          padding: .8rem 0; border-top: 1px solid var(--paper-3); }
.st-thumb { width: 4.5rem; aspect-ratio: 4 / 3; background: var(--paper-3); border-radius: 4px; overflow: hidden; }
.st-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-mid strong { display: block; line-height: 1.25; }
.st-mid span { font-size: .85rem; color: var(--ink-mute); }
.st-row.is-sold .st-mid strong { text-decoration: line-through; color: var(--ink-mute); }
.st-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; }
.st-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
           margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--paper-3); }
[hidden] { display: none !important; }

/* ---------- Gallery: the shop's own job photos ------------------------- */
/* On a wide screen a job's photos share one row at one height: each figure
   grows by its own aspect ratio (--ar, written by build-pages.py), so an
   upright photo and a wide one line up without either being cropped. On a
   phone the upright ones go two to a row and a wide one takes the row. */

.gal-job + .gal-job { margin-top: clamp(3rem, 2.2rem + 3vw, 5rem); }
.gal-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
            gap: .5rem 1.5rem; margin-bottom: clamp(1rem, .8rem + .8vw, 1.5rem); }
.gal-head h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.2rem); }
.gal-more { font-weight: 600; }
.gal-row, .gal-rows { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; align-items: start; }
/* A big job comes in several rows (build-pages.py gal_rows). On a phone the
   rows drop away and every photo flows through one two-column grid. */
.gal-rows > .gal-row { display: contents; }
.gal-shot { margin: 0; min-width: 0; }
.gal-shot.is-wide { grid-column: 1 / -1; }
.gal-shot a { display: block; overflow: hidden; border-radius: var(--r); background: var(--paper-3);
              cursor: zoom-in; }
.gal-shot img { display: block; width: 100%; height: auto; transition: transform .5s ease; }
.gal-shot a:hover img { transform: scale(1.025); }
.gal-shot figcaption { font-family: var(--label); font-size: .8rem; font-weight: 700;
                       letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute);
                       margin-top: .6rem; }
@media (min-width: 48rem) {
  .gal-job { --gal-gap: clamp(.8rem, .5rem + .8vw, 1.25rem); }
  /* Rows stop at --cap tall (build-pages.py GAL_ROW_REM, or the smallest
     photo's own height): a job narrower than the column is the row's photos
     at that height plus the gaps between them, so the heading and its link
     end where the photos do. */
  .gal-job.is-capped, .gal-row.is-capped {
    max-width: calc(var(--cap) * var(--sum-ar) + (var(--n) - 1) * var(--gal-gap)); }
  .gal-rows { display: flex; flex-direction: column; gap: var(--gal-gap); }
  .gal-row, .gal-rows > .gal-row { display: flex; gap: var(--gal-gap); }
  .gal-row .gal-shot { flex: var(--ar) 1 0; }
}
@media (prefers-reduced-motion: reduce) { .gal-shot img { transition: none; } }

/* The viewer js/gallery.js opens. */
html.lb-open { overflow: hidden; }
.lb { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
      margin: 0; padding: 0; border: 0; background: transparent; color: var(--paper); }
.lb[open] { display: grid; place-items: center; }
.lb::backdrop { background: rgba(14, 10, 7, .97); }
.lb figure { margin: 0; padding: 4.2rem 1rem 1.4rem; display: flex; flex-direction: column;
             align-items: center; gap: .8rem; }
.lb img { display: block; width: auto; height: auto; max-width: min(100vw - 2rem, 1280px);
          max-height: calc(100vh - 8.5rem); max-height: calc(100dvh - 8.5rem);
          border-radius: var(--r); background: var(--soot-2); }
.lb figcaption { font-family: var(--label); font-size: .85rem; font-weight: 700;
                 letter-spacing: .1em; text-transform: uppercase; color: #E4D8C8;
                 text-align: center; white-space: pre-wrap; }
.lb-btn { position: fixed; width: 3rem; height: 3rem; display: grid; place-items: center;
          border-radius: 50%; border: 1px solid rgba(248, 242, 231, .35);
          background: rgba(31, 24, 17, .72); color: var(--paper); font: 400 2rem/1 var(--body);
          cursor: pointer; padding: 0 0 .2rem; }
.lb-btn:hover { background: var(--soot-3); border-color: var(--paper); }
.lb-close { top: 1rem; right: 1rem; font-size: 1.9rem; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); }
.lb-prev { left: 1rem; }
.lb-next { right: 1rem; }
@media (max-width: 47.99rem) {
  /* On a phone the photo uses the full width; the arrows sit under it. */
  .lb-prev, .lb-next { top: auto; bottom: 1rem; transform: none; }
  .lb figure { padding-bottom: 5rem; }
  .lb img { max-height: calc(100vh - 11rem); max-height: calc(100dvh - 11rem); }
}

/* ---------- Motion ------------------------------------------------------
   Ported from the Fire Place & Patio build (raleighfireplace), which Alex
   called perfect on 1 Sep 2026. Everything here is PROGRESSIVE. The hidden
   state is scoped to html.js, which js/early.js sets before first paint (the
   CSP has no 'unsafe-inline', so it cannot be an inline script). With
   JavaScript off, or if site.js never takes over, .rv elements are simply
   visible: early.js takes the class back off after 3s unless site.js has
   claimed the reveals. A reveal must never be why a customer cannot see the
   copy. js/site.js also sweeps on scroll, so a jump to the bottom (End key,
   anchor, restored scroll) cannot leave anything at opacity 0. */

.js .rv {
  opacity: 0; transform: translateY(18px);
  transition: opacity .62s cubic-bezier(.22, .61, .36, 1) var(--d, 0ms),
              transform .62s cubic-bezier(.22, .61, .36, 1) var(--d, 0ms);
  will-change: opacity, transform;
}
.js .rv.is-in { opacity: 1; transform: none; }
.js .rv.is-done { will-change: auto; transition: none; }

/* Hero parallax: the photo is overscanned so the translate can never show an
   edge, and .hero-media is overflow:hidden so the overscan is clipped. */
.js .hero-media img { transform: scale(1.12); will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; transition: none; }
  .js .hero-media img { transform: none; }
}

/* Reveal stagger: 70ms per item in a row, capped at five so a long row never
   drags. Only the first screen skips it (site.js zeroes --d there). */
:is(.cats, .stats, .grid, .makers) > .rv:nth-child(2) { --d: 70ms; }
:is(.cats, .stats, .grid, .makers) > .rv:nth-child(3) { --d: 140ms; }
:is(.cats, .stats, .grid, .makers) > .rv:nth-child(4) { --d: 210ms; }
:is(.cats, .stats, .grid, .makers) > .rv:nth-child(n+5) { --d: 280ms; }

/* Gallery on phones: an upright photo with no partner is centered at its
   normal half width instead of leaving an empty half beside it. */
@media (max-width: 47.99rem) {
  .gal-shot.is-solo { grid-column: 1 / -1; justify-self: center; width: calc(50% - .375rem); }
}

/* Long paragraphs never end on one stranded word. */
.lede, .prose p, .band .lede { text-wrap: pretty; }