/* ==========================================================================
   Mountain Hardware and Lumber Supply — Mountain, Wisconsin
   Design system. One file, sectioned, hand-written. Not generated.

   Direction: a builder's rate card and a lumber tally sheet. Not a website
   that sells lumber — the printed thing that lives on the counter, with ruled
   tables, tabular figures and a hierarchy that survives a photocopier.

   Two audiences carry equal weight and get deliberately unequal treatment:
   the DIY door sits on tan, the trade door sits on ink. Identical cards would
   say they are the same customer. They are not.

   The type system is the brief, literally: a grotesk for language, a slab for
   numbers. Every figure on the site — rates, counts, phone, hours, the item
   tally — is set in the slab. That is what makes a catalog read as a catalog.

   Deliberately absent, and this is a hard requirement, not taste:
     no gradients anywhere, no drop shadows, no glass, no pill buttons, no
     rounded cards, no icon grids, no woodgrain or corrugated-metal texture,
     no cartoon tools, no checkerplate, no caution stripes, no emoji.
   Square corners and rules only. Red is earned, never decorative.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Ink — the anchor */
  --ink:        #14161a;
  --ink-2:      #1e2127;   /* raised surface on dark */
  --ink-3:      #2a2e36;   /* hairline on dark */
  --ink-soft:   #3d424b;

  /* Steel */
  --steel:      #5a6068;
  --steel-soft: #9198a1;   /* 6.22:1 on ink, 5.54:1 on ink-2 */

  /* Lumber tan — milled pine. Flat fields only, never a gradient. */
  --tan:        #c9a87c;
  --tan-pale:   #e4d3ba;
  --tan-deep:   #856539;   /* 4.75:1 on bone — AA at any size */

  /* Paper */
  --bone:       #f4f1ea;
  --bone-2:     #e9e4d9;   /* recessed band on light */
  --line:       #d5cec0;   /* hairline on light */
  --white:      #ffffff;

  /* The one accent. Work red. Phone numbers, live state, one CTA a page. */
  --red:        #a8261b;
  --red-lift:   #c33325;

  /* Type */
  --ui:   "Archivo", "Helvetica Neue", Arial, sans-serif;
  --slab: "Zilla Slab", "Rockwell", Georgia, serif;

  /* Rhythm */
  --measure:    64ch;
  --gutter:     clamp(1.25rem, 4vw, 4rem);
  --section:    clamp(3.5rem, 8vw, 7.5rem);
  --max:        1380px;
  --max-narrow: 700px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset + base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--ui);
  font-size: clamp(1rem, 0.3vw + 0.94rem, 1.0625rem);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.12; }

p { margin: 0 0 1.1em; }

ul, ol { margin: 0; padding: 0; list-style: none; }

table { border-collapse: collapse; width: 100%; }

address { font-style: normal; }

button { font: inherit; color: inherit; }

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

/* Ink surfaces need a focus ring that is actually visible on ink. */
.section--ink :focus-visible,
.closer :focus-visible,
.footer :focus-visible,
.door--trade :focus-visible,
.counter :focus-visible,
.masthead :focus-visible {
  outline-color: var(--tan);
}

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

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--red);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: var(--max-narrow); }

.section { padding-block: var(--section); }
.section--top { padding-top: clamp(2.5rem, 5vw, 4rem); }
.section--flush { padding-top: 0; }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.section--ink {
  background: var(--ink);
  color: var(--bone);
}

.section--tan {
  background: var(--bone-2);
  border-block: 1px solid var(--line);
}

/**
 * Splits are deliberately uneven. A 6/6 grid reads as a template; 7/5 and 5/7
 * read as a page somebody set. Alternating them gives the site a rhythm
 * without every band being the same height.
 */
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); }

@media (min-width: 900px) {
  .split          { grid-template-columns: 1fr 1fr; align-items: start; }
  .split--7-5     { grid-template-columns: 7fr 5fr; }
  .split--5-7     { grid-template-columns: 5fr 7fr; }
}

.section__go { margin-top: 2rem; }

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */

.display {
  font-family: var(--ui);
  font-weight: 800;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.d1 { font-size: clamp(2.6rem, 6.2vw, 5.1rem); line-height: 0.98; }
.d2 { font-size: clamp(1.9rem, 3.6vw, 3rem);   line-height: 1.05; }
.d3 { font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.15; letter-spacing: -0.014em; }

.lede {
  font-size: clamp(1.1rem, 1.1vw + 0.85rem, 1.35rem);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 46ch;
}

.prose { max-width: var(--measure); }
.prose > :last-child { margin-bottom: 0; }
.prose h2 {
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  margin: 2.25rem 0 0.6rem;
}
.prose h2:first-child { margin-top: 0; }
.prose--tight { font-size: 0.9688rem; line-height: 1.55; }
.prose--light { color: var(--tan-pale); }
.prose--light a { color: var(--tan); }

.prose a,
.fineprint a { color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.prose--light a:hover { color: var(--white); }

/**
 * Eyebrow. Small caps grotesk with a rule and a slab numeral. The numeral is
 * the section index — 01, 02, 03 — which is a catalog device, not decoration.
 */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
}
.eyebrow--light { color: var(--tan); }
.eyebrow__num {
  font-family: var(--slab);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0;
  color: var(--red);
  font-variant-numeric: tabular-nums;
}
.eyebrow--light .eyebrow__num { color: var(--tan); }
.eyebrow__rule {
  width: 2.25rem;
  height: 2px;
  background: var(--red);
  flex: none;
}
.eyebrow--light .eyebrow__rule { background: var(--tan); }

.minihead {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--ink);
}

.fineprint {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--steel);
}

/* --------------------------------------------------------------------------
   5. Buttons and links
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.5rem;
  border: 2px solid transparent;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.btn--primary {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}
.btn--primary:hover { background: var(--red-lift); border-color: var(--red-lift); }

.btn--ghost {
  border-color: currentColor;
  color: inherit;
}
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--bone); }
.section--ink .btn--ghost:hover,
.closer .btn--ghost:hover,
.hero .btn--ghost:hover { background: var(--bone); border-color: var(--bone); color: var(--ink); }

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

/**
 * Link with a rule under it that extends on hover. Used instead of a button
 * wherever the action is "keep reading" rather than "do something".
 */
.linkline {
  display: inline-block;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 2px solid var(--red);
  padding-bottom: 0.15rem;
}
.linkline:hover { color: var(--red); }
.linkline--light { color: var(--bone); border-bottom-color: var(--tan); }
.linkline--light:hover { color: var(--tan); }

/**
 * Defensive: a bare .linkline dropped onto any dark surface takes the light
 * treatment automatically. The footer's "Get directions" shipped once as
 * var(--ink) on var(--ink-2) — 1.12:1, effectively invisible — and axe caught
 * it. Relying on every author remembering the --light modifier is how that
 * happens again.
 */
.footer .linkline,
.section--ink .linkline,
.closer .linkline,
.door--trade .linkline,
.pagehead .linkline,
.hero .linkline {
  color: var(--bone);
  border-bottom-color: var(--tan);
}
.footer .linkline:hover,
.section--ink .linkline:hover,
.closer .linkline:hover,
.door--trade .linkline:hover,
.pagehead .linkline:hover,
.hero .linkline:hover { color: var(--tan); }

/* --------------------------------------------------------------------------
   6. Concept ribbon
   Unsolicited work for a business that never asked. Persistent, not
   dismissible, above everything, and it says so in plain words.
   -------------------------------------------------------------------------- */

.ribbon {
  background: var(--red);
  color: var(--white);
  font-size: 0.8125rem;
  line-height: 1.4;
}
.ribbon__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding-block: 0.6rem;
}
.ribbon__tag {
  flex: none;
  font-family: var(--slab);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
}
.ribbon__text { margin: 0; flex: 1 1 22rem; }
.ribbon__text a { color: var(--white); text-underline-offset: 2px; }
.ribbon__cta {
  flex: none;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.6);
  padding-bottom: 0.1rem;
}
.ribbon__cta:hover { border-bottom-color: var(--white); }

/* --------------------------------------------------------------------------
   7. Notice bar
   -------------------------------------------------------------------------- */

.notice {
  background: var(--ink);
  color: var(--tan-pale);
  font-size: 0.875rem;
}
.notice__inner {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-block: 0.55rem;
}
.notice__key {
  font-family: var(--slab);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tan);
}

/* --------------------------------------------------------------------------
   8. The counter bar
   Hours, phone, directions — above the navigation on every page. The legacy
   site published no hours at all; making this chrome rather than a widget is
   what guarantees the answer is always on screen.
   -------------------------------------------------------------------------- */

.counter {
  background: var(--bone-2);
  border-bottom: 1px solid var(--line);
  font-size: 0.875rem;
}

.counter__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 2rem;
  padding-block: 0.7rem;
}

.counter__block {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  min-width: 0;
}
.counter__block--where { margin-left: auto; }

.counter__key {
  font-family: var(--slab);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  flex: none;
}

.counter__detail { color: var(--ink-soft); }
.counter__detail a { color: var(--red); font-weight: 700; text-underline-offset: 2px; }

.counter__phone {
  font-family: var(--slab);
  font-weight: 700;
  font-size: 1rem;
  color: var(--red);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.counter__phone:hover { text-decoration: underline; text-underline-offset: 3px; }

.counter__where { color: var(--ink-soft); text-decoration: none; }
.counter__where:hover { color: var(--red); }
.counter__arrow { margin-left: 0.3rem; }

/**
 * Live open/closed state. Never rendered while hours are unknown — a shut
 * badge on a store nobody asked about would be an invented fact.
 */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.status__dot {
  width: 0.5rem; height: 0.5rem;
  flex: none;
  background: currentColor;
}
.status--open { color: #1d6b39; }
.status--shut { color: var(--red); }

@media (max-width: 720px) {
  .counter__block--where { margin-left: 0; }
  .counter__inner { gap: 0.3rem 1.25rem; }
}

/* --------------------------------------------------------------------------
   9. Masthead, wordmark, navigation
   -------------------------------------------------------------------------- */

.masthead {
  background: var(--ink);
  color: var(--bone);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.1rem;
}

/**
 * The client HAS a wordmark, but the only copy on the web is a 70x70 PNG cut
 * for vinyl signage. It is set live in type here so it stays crisp at any
 * size and prints correctly. Swap for the vector when one turns up.
 */
.wordmark {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  flex: none;
}

/**
 * The real mark, black artwork on transparency, inverted to white for the
 * dark masthead and footer. Inverting a monochrome logo is preferable to
 * re-drawing it — the artwork stays theirs and stays exact.
 *
 * Sized by width; the intrinsic 733x329 keeps the box reserved so the header
 * does not reflow when it loads.
 */
.wordmark__img {
  width: clamp(9.5rem, 15vw, 12rem);
  height: auto;
  filter: brightness(0) invert(1);
}
.wordmark--footer .wordmark__img { width: 10.5rem; }

.nav { display: flex; align-items: center; gap: 1rem; }

.nav__list {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.nav__link {
  display: inline-block;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--bone);
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
}
.nav__link:hover { border-bottom-color: var(--tan); }
.nav__link[aria-current="page"] { border-bottom-color: var(--red); }

.nav__item--util .nav__link { color: var(--steel-soft); font-weight: 500; }
.nav__item--util .nav__link:hover { color: var(--bone); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.55rem;
  background: none;
  border: 2px solid var(--ink-3);
  color: var(--bone);
  padding: 0.5rem 0.85rem;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle__bars {
  width: 1rem; height: 2px;
  background: currentColor;
  position: relative;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%; height: 2px;
  background: currentColor;
}
.nav-toggle__bars::before { top: -5px; }
.nav-toggle__bars::after  { top: 5px; }

@media (max-width: 900px) {
  .masthead__inner { flex-wrap: wrap; }
  .nav-toggle { display: inline-flex; }
  .nav__list {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 0.85rem;
    border-top: 1px solid var(--ink-3);
  }
  .nav__list.is-open { display: flex; }
  .nav__link {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--ink-3);
  }
  .nav__link:hover,
  .nav__link[aria-current="page"] { border-bottom-color: var(--tan); }
}

/* --------------------------------------------------------------------------
   10. Hero
   Left-aligned type on a flat ink field, with the spec table beside it.
   Not a centred headline over a scrimmed photograph — there is no photograph
   worth scrimming, and that layout is the house style of every builder site
   this one replaces.
   -------------------------------------------------------------------------- */

/**
 * Two panels: type on ink, photograph bleeding off the right edge.
 *
 * The first build was a single flat ink slab with the spec table bottom-
 * aligned inside it. That left a void above the table and read as one large
 * black rectangle — the whole top of the page was the same colour, masthead
 * included. The photograph now carries the right half and the tally strip
 * below breaks the dark run.
 */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--bone);
  overflow: hidden;

  /* One token drives both the panel's width and the type column's right
     padding, so the gutter between them cannot drift apart again.

     38% is not arbitrary: the aisle photograph is 720px wide natively and
     38% of a ~1900px viewport is ~720px — the widest the panel can be drawn
     without upscaling the file. Do not raise it. */
  --hero-panel: 38%;
  --hero-gap:   clamp(2.5rem, 4vw, 4.5rem);
}

.hero__inner {
  position: relative;
  display: grid;
  padding-block: clamp(2.75rem, 6vw, 4.75rem);
}

.hero__title { margin-bottom: 1.25rem; }
/* 34ch broke the lede into four short ragged lines that left their own wedge
   of dark under the headline. 42ch is still a comfortable measure and sits
   under the display type rather than retreating from it. */
.hero__lede { color: var(--tan-pale); max-width: 42ch; }

/**
 * On a phone the panel becomes a band under the copy rather than disappearing.
 * Hiding it left the mobile hero as an unbroken dark rectangle, which is the
 * exact problem the split was built to fix — and the narrow viewport is where
 * a wall of black is least forgiving. A fixed 13rem band keeps a 720x960
 * portrait from eating the whole screen.
 */
.hero__panel {
  display: block;
  height: 13rem;
  border-top: 3px solid var(--tan);
}
.hero__panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}

@media (min-width: 980px) {
  /**
   * The type column stops short of the panel; the panel is absolutely placed
   * so it can bleed to the full height of the band regardless of copy length.
   *
   * This padding used to be a flat `40%`, which was wrong in a way that got
   * worse the wider the screen. `.hero__inner` is also `.wrap` — capped at
   * `--max` and centred — but percentage padding resolves against the
   * *containing block*, `.hero`, which is full-bleed. So the padding tracked
   * the viewport while the box it ate into stayed frozen at 1380px: at 1900px
   * the type column had collapsed to 561px and left a 413px hole of dead ink
   * between the headline and the photograph.
   *
   * Measure the gap from the panel instead. `.hero__inner`'s right edge sits
   * at `min(100%, 50% + --max/2)` — the second term once the wrap is capped,
   * the first while it still fills the band. The panel's left edge is at
   * `100% - --hero-panel`. The difference is how far the wrap overshoots the
   * photograph; add `--hero-gap` and that is the padding. Every term resolves
   * against `.hero`, so the result is scrollbar-safe in a way `100vw` is not.
   */
  .hero--split .hero__inner {
    padding-right: calc(
      min(100%, 50% + var(--max) / 2)
      - 100% + var(--hero-panel)
      + var(--hero-gap)
    );
  }

  .hero__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--hero-panel);
    height: auto;              /* undo the mobile band height */
    border-top: 0;             /* the rule moves to the left edge below */
    overflow: hidden;
  }
  .hero__panel img { object-position: 50% 65%; }

  /* A hairline of tan where the photograph meets the type, so the edge reads
     as a deliberate join rather than a crop accident. */
  .hero__panel::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--tan);
    z-index: 1;
  }
}

/* --------------------------------------------------------------------------
   10b. The tally strip
   The hero's old spec table, on its own light band. Ruled cells, slab
   numerals — a spec band off a product sheet.
   -------------------------------------------------------------------------- */

.tally {
  background: var(--bone-2);
  border-bottom: 1px solid var(--line);
}

.tally__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  margin: 0;
}

.tally__cell {
  padding: 1.15rem 1.25rem 1.15rem 0;
  border-left: 1px solid var(--line);
  padding-left: 1.25rem;
}
.tally__cell:first-child { border-left: 0; padding-left: 0; }

.tally dt {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 0.3rem;
}
.tally dd { margin: 0; }

.tally__num {
  font-family: var(--slab);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tally__num--word { font-size: 1.25rem; color: var(--red); }
.tally__unit {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
}

@media (max-width: 620px) {
  .tally__row { grid-template-columns: repeat(2, 1fr); }
  .tally__cell:nth-child(odd) { border-left: 0; padding-left: 0; }
}

/* --------------------------------------------------------------------------
   11. The two doors
   DIY on tan, trade on ink. Different widths, different heights, on purpose.
   -------------------------------------------------------------------------- */

.doors { padding-block: 0; }

.doors__grid {
  display: grid;
  gap: 0;
  margin-block: 0;
}

@media (min-width: 900px) {
  .doors__grid { grid-template-columns: 5fr 6fr; }
}

.door { padding: clamp(2.25rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem); }

.door--diy {
  background: var(--tan);
  color: var(--ink);
}
.door--trade {
  background: var(--ink-2);
  color: var(--bone);
}

.door__key {
  font-family: var(--slab);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.door--diy .door__key   { color: var(--ink-soft); }
.door--trade .door__key { color: var(--tan); }

.door .display { margin-bottom: 1rem; }
.door--trade .prose { color: var(--tan-pale); }
.door__go { margin: 1.75rem 0 0; }

/* --------------------------------------------------------------------------
   12. Page head
   -------------------------------------------------------------------------- */

.pagehead {
  position: relative;
  background: var(--ink);
  color: var(--bone);
  overflow: hidden;
}
.pagehead__inner { padding-block: clamp(2.25rem, 4.5vw, 3.75rem); }
.pagehead .lede { color: var(--tan-pale); max-width: 46ch; margin-top: 1.1rem; }
.pagehead .eyebrow { color: var(--tan); }

/**
 * No photograph: tighten the band rather than running the tall padding over
 * empty space. The ten rental category pages sit here, and a subpage header
 * with nothing in it should not be as tall as one carrying an image.
 */
.pagehead--tight .pagehead__inner { padding-block: clamp(1.75rem, 3.5vw, 2.75rem); }

/**
 * With a photograph: the same split the home hero uses. On a phone it becomes
 * a band under the copy — hiding it would leave every subpage as the flat
 * black rectangle this was built to fix.
 */
.pagehead__panel {
  position: relative;
  height: 11rem;
  border-top: 3px solid var(--tan);
}
.pagehead__panel img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }

.pagehead__caption {
  position: absolute;
  left: 0; bottom: 0;
  margin: 0;
  padding: 0.35rem 0.7rem;
  background: var(--ink);
  color: var(--tan);
  font-family: var(--slab);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

@media (min-width: 980px) {
  .pagehead--split .pagehead__inner { padding-right: 42%; }

  .pagehead__panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 40%;
    height: auto;
    border-top: 0;
  }
  .pagehead__panel::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--tan);
    z-index: 1;
  }
  .pagehead__panel img { object-position: 50% 50%; }
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--steel-soft);
  margin-bottom: 1.5rem;
}
.crumbs a { color: var(--steel-soft); text-underline-offset: 2px; }
.crumbs a:hover { color: var(--tan); }
.crumbs__sep { color: var(--ink-3); }
.crumbs [aria-current="page"] { color: var(--tan); }

/* --------------------------------------------------------------------------
   13. Ruled lists, tick lists, name lists
   -------------------------------------------------------------------------- */

.ruled { border-top: 2px solid var(--ink); }
.ruled__item {
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
}
.ruled--numbered { counter-reset: ruled; }
.ruled--numbered .ruled__item { counter-increment: ruled; position: relative; padding-left: 2.5rem; }
.ruled--numbered .ruled__item::before {
  content: counter(ruled, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.15rem;
  font-family: var(--slab);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--red);
  font-variant-numeric: tabular-nums;
}
.ruled__title { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.008em; }
.ruled__meta {
  margin: 0.15rem 0 0;
  font-family: var(--slab);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--steel);
}
.ruled__body { margin: 0.4rem 0 0; font-size: 0.9375rem; color: var(--ink-soft); }
.section--ink .ruled { border-top-color: var(--tan); }
.section--ink .ruled__item { border-bottom-color: var(--ink-3); }
.section--ink .ruled__body { color: var(--tan-pale); }

.ticklist { border-top: 1px solid var(--line); }
.ticklist__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}
.ticklist__name { font-weight: 700; font-size: 0.9375rem; }
.ticklist__meta {
  font-family: var(--slab);
  font-size: 0.8125rem;
  color: var(--steel);
  text-align: right;
}

.namelist {
  border-top: 2px solid var(--ink);
  columns: 2;
  column-gap: 2rem;
}
.namelist__item {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
  font-weight: 600;
  break-inside: avoid;
}
@media (max-width: 600px) { .namelist { columns: 1; } }

/* --------------------------------------------------------------------------
   14. Panels
   -------------------------------------------------------------------------- */

.panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.panel--wide { margin-top: 2.5rem; }
.panel__key {
  font-family: var(--slab);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 0.6rem;
}
.panel__cta { margin: 1.1rem 0 0; }
.panel__cta .linkline {
  font-family: var(--slab);
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
}
.section--tan .panel { background: var(--bone); }

/* --------------------------------------------------------------------------
   15. Definition lists and hours
   -------------------------------------------------------------------------- */

.deflist { margin: 0; border-top: 2px solid var(--ink); }
.deflist__row {
  display: grid;
  gap: 0.25rem 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 560px) {
  .deflist__row { grid-template-columns: 8rem 1fr; }
}
.deflist dt {
  font-family: var(--slab);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  padding-top: 0.2rem;
}
.deflist dd { margin: 0; font-size: 0.9375rem; }
.deflist dd a { color: var(--red); font-weight: 600; }
.deflist--compact .deflist__row { padding: 0.6rem 0; }
.deflist__lead {
  font-family: var(--slab);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-variant-numeric: tabular-nums;
}
.deflist__lead a { text-decoration: none; }
.deflist__lead a:hover { text-decoration: underline; text-underline-offset: 4px; }
.deflist__missing { margin: 0; color: var(--ink-soft); }

.hours { font-size: 0.875rem; }
.hours__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--line);
}
.hours--tight .hours__row { padding: 0.25rem 0; }
.hours__day {
  font-family: var(--slab);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.hours__time {
  font-family: var(--slab);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* --------------------------------------------------------------------------
   16. Rental — index, catalog, filter, items
   The single most valuable thing on the site, and the thing the legacy build
   made completely invisible to search.
   -------------------------------------------------------------------------- */

.rentalintro {
  display: grid;
  gap: 1.5rem clamp(2rem, 5vw, 4rem);
  margin-bottom: 3rem;
}
@media (min-width: 900px) { .rentalintro { grid-template-columns: 6fr 5fr; align-items: end; } }

.catindex { border-top: 2px solid var(--tan); }
.catindex__row { border-bottom: 1px solid var(--ink-3); }
.catindex__link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.2rem 1.5rem;
  padding: 1rem 0;
  text-decoration: none;
  align-items: baseline;
}
@media (min-width: 780px) {
  .catindex__link { grid-template-columns: 16rem 1fr auto; }
}
.catindex__name {
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.008em;
}
.catindex__sample {
  font-size: 0.875rem;
  color: var(--steel-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.catindex__count {
  font-family: var(--slab);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--tan);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.catindex__link:hover .catindex__name { color: var(--tan); }
.catindex__link:hover .catindex__sample { color: var(--tan-pale); }

.catalog__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 3px solid var(--ink);
  margin-bottom: 2rem;
}
.catalog__count {
  margin: 0;
  font-family: var(--slab);
  font-size: 1rem;
  color: var(--steel);
}
.catalog__count strong {
  font-weight: 700;
  color: var(--red);
  font-variant-numeric: tabular-nums;
}

/* Filter. Revealed by JS only — with JS off the full list is already there. */
.filter { margin-bottom: 2.5rem; }
.filter__search { margin-bottom: 1.25rem; max-width: 32rem; }
.filter__label {
  display: block;
  font-family: var(--slab);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 0.4rem;
}
.filter__input {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 2px solid var(--ink);
  background: var(--white);
  font-family: var(--ui);
  font-size: 1rem;
  color: var(--ink);
}
.filter__input::placeholder { color: var(--steel); }
.filter__input:focus { outline: 3px solid var(--red); outline-offset: 1px; }

.filter__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
  background: transparent;
  border: 1px solid var(--line);
  padding: 0.42rem 0.8rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.chip:hover { border-color: var(--ink); }
.chip.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bone);
}
.filter__status {
  margin: 0.9rem 0 0;
  font-size: 0.8125rem;
  color: var(--steel);
  font-family: var(--slab);
}

.catgroup { margin-bottom: 2.75rem; }
.catgroup__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.55rem;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 1rem;
}
.catgroup__title { font-size: 1.125rem; letter-spacing: -0.01em; }
.catgroup__title a { text-decoration: none; }
.catgroup__title a:hover { color: var(--red); }
.catgroup__count {
  font-family: var(--slab);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--steel);
  font-variant-numeric: tabular-nums;
}

.itemgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
.itemgrid__item { border-bottom: 1px solid var(--line); }
.itemgrid__link {
  display: block;
  padding: 0.6rem 0.75rem 0.6rem 0;
  text-decoration: none;
  font-size: 0.9375rem;
}
.itemgrid__link:hover { color: var(--red); }
.itemgrid__name { font-weight: 600; }
.itemgrid__spec {
  display: block;
  font-family: var(--slab);
  font-size: 0.75rem;
  color: var(--steel);
}

.catalog__empty {
  padding: 2rem 0;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

/* Category page — one ruled row per item, each with its own anchor. */
.cathead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-bottom: 1rem;
  border-bottom: 3px solid var(--ink);
  margin-bottom: 0.5rem;
}
.cathead__count { margin: 0; font-family: var(--slab); font-size: 1rem; color: var(--steel); }
.cathead__count strong { color: var(--red); font-variant-numeric: tabular-nums; }
.cathead__note { margin: 0; font-size: 0.875rem; color: var(--ink-soft); }
.cathead__note a { color: var(--red); font-weight: 700; }

.items { border-top: 0; }
.items__row {
  display: grid;
  gap: 0.75rem 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 2rem;
}
@media (min-width: 820px) {
  .items__row { grid-template-columns: 1fr auto; align-items: start; }
  .items__media { grid-row: span 2; }
}
.items__name {
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.items__anchor {
  margin-left: 0.4rem;
  color: var(--line);
  text-decoration: none;
  font-family: var(--slab);
  opacity: 0;
  transition: opacity 0.15s var(--ease);
}
.items__row:hover .items__anchor,
.items__anchor:focus { opacity: 1; color: var(--red); }
.items__specs {
  margin: 0.25rem 0 0;
  font-family: var(--slab);
  font-size: 0.875rem;
  color: var(--steel);
}
.items__desc { margin: 0.5rem 0 0; font-size: 0.9375rem; color: var(--ink-soft); max-width: 54ch; }
.items__note {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--red);
  font-weight: 600;
}
.items__media img { width: 9rem; border: 1px solid var(--line); }

.ratelist {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.75rem;
  margin: 0;
}
.ratelist__cell { text-align: right; min-width: 4.25rem; }
.ratelist dt {
  font-family: var(--slab);
  font-weight: 600;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
}
.ratelist dd { margin: 0; }
.rate {
  font-family: var(--slab);
  font-weight: 700;
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
}
.rate--call {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--steel);
  letter-spacing: 0.04em;
}

.pillrow { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pill {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--line);
  background: var(--bone);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}
.pill:hover { border-color: var(--ink); background: var(--white); }
.pill__count {
  font-family: var(--slab);
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--red);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   17. Lumber lines and services
   -------------------------------------------------------------------------- */

.line {
  display: grid;
  gap: 0.75rem 2.5rem;
  padding: clamp(1.75rem, 3vw, 2.75rem) 0;
  border-bottom: 1px solid var(--line);
}
.line:first-child { border-top: 3px solid var(--ink); }

@media (min-width: 900px) {
  .line { grid-template-columns: 4rem 6fr 5fr; align-items: start; }
  .line--flip .line__body { order: 3; }
  .line--flip .line__meta { order: 2; }
}

.line__num {
  font-family: var(--slab);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--tan-deep);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.line__body .display { margin-bottom: 0.7rem; }

.services { border-top: 3px solid var(--ink); }
.service {
  display: grid;
  gap: 0.5rem 2rem;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) { .service { grid-template-columns: 4rem 1fr; } }
.service__num {
  font-family: var(--slab);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--tan-deep);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.service__body .display { margin-bottom: 0.5rem; }
.service__summary {
  font-size: 1.0625rem;
  color: var(--ink-soft);
  margin-bottom: 0.75rem;
  max-width: 48ch;
}
.service__detail {
  margin: 0.75rem 0 0;
  font-family: var(--slab);
  font-size: 0.875rem;
  color: var(--steel);
}

/* --------------------------------------------------------------------------
   18. Contractor directory
   Real third-party businesses. A listing with no trade shows no trade.
   -------------------------------------------------------------------------- */

.directory { border-top: 3px solid var(--ink); }
.directory__item {
  display: grid;
  gap: 0.6rem 2rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
@media (min-width: 860px) {
  .directory__item { grid-template-columns: 15rem 1fr 13rem; }
}
.directory__name { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.008em; }
.directory__contact {
  margin: 0.15rem 0 0;
  font-family: var(--slab);
  font-size: 0.875rem;
  color: var(--steel);
}
.directory__untagged {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--steel);
  font-style: italic;
}
.directory__where { margin: 0; font-size: 0.875rem; color: var(--steel); }
.directory__phone { margin: 0.2rem 0 0; }
.directory__phone a {
  font-family: var(--slab);
  font-weight: 700;
  font-size: 1rem;
  color: var(--red);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.directory__phone a:hover { text-decoration: underline; text-underline-offset: 3px; }
.directory__fax {
  margin: 0.15rem 0 0;
  font-family: var(--slab);
  font-size: 0.75rem;
  color: var(--steel);
  font-variant-numeric: tabular-nums;
}

.taglist { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tag {
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--line);
  background: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   19. Timeline
   -------------------------------------------------------------------------- */

.timeline { border-top: 2px solid var(--tan); margin-top: 2rem; }
.timeline__row {
  display: grid;
  gap: 0.35rem 2rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--ink-3);
}
@media (min-width: 700px) { .timeline__row { grid-template-columns: 7rem 1fr; } }
.timeline__year {
  font-family: var(--slab);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--tan);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.timeline__title { font-size: 1.0625rem; font-weight: 700; }
.timeline__desc { margin: 0.3rem 0 0; font-size: 0.9375rem; color: var(--tan-pale); max-width: 56ch; }

/* --------------------------------------------------------------------------
   20. Figures, map, no-form
   -------------------------------------------------------------------------- */

.figure { margin: 0; }
.figure--frame img { border: 1px solid var(--line); }
.figure figcaption {
  margin-top: 0.55rem;
  font-size: 0.8125rem;
  color: var(--steel);
}
.section--ink .figure figcaption,
.closer .figure figcaption { color: var(--tan); }

/**
 * Every photograph on this site came off the client's own Weebly build and
 * none of it is big — the largest is 720x960 and the smallest usable one is
 * 335x161. `--shot-w` caps each placement at, or below, the file's native
 * width so nothing is ever upscaled into mush, and the figures are sized to
 * sit as deliberate objects on the page rather than as stretched banners.
 *
 * When real photography arrives, raise the caps. Nothing else has to change.
 */
.shot { margin: 0; max-width: var(--shot-w, 100%); }
.shot img {
  width: 100%;
  border: 1px solid var(--line);
}
.section--ink .shot img { border-color: var(--ink-3); }
.section--tan .shot img { border-color: var(--tan-deep); }

.shot figcaption {
  margin-top: 0.6rem;
  padding-left: 0.7rem;
  border-left: 2px solid var(--red);
  font-family: var(--slab);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--steel);
}
.section--ink .shot figcaption { color: var(--tan-pale); }

.shot--aisle    { --shot-w: 22rem; }   /* 720x960 native */
.shot--trencher { --shot-w: 17rem; }   /* 442x786 native */
.shot--barn     { --shot-w: 21rem; }   /* 335x161 native — the smallest */
.shot--dog      { --shot-w: 15rem; }   /* 720x960 native */
.shot--family   { --shot-w: 20rem; }   /* 320x219 native */

/* Rental band: the trencher sits beside the category index, not above it. */
.rentalbody { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
@media (min-width: 900px) {
  .rentalbody { grid-template-columns: 17rem 1fr; align-items: start; }
}

/* About: the two interior shots stack in the narrow column. */
.shotstack { display: grid; gap: 1.5rem; justify-items: start; }

.mapframe { margin-top: 2rem; border: 1px solid var(--line); }
.mapframe iframe { display: block; }

.noform {
  margin-top: 2.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--ink);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.noform__key {
  font-family: var(--slab);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 0.7rem;
}
.noform__cta { margin: 1.5rem 0 0; }

/* --------------------------------------------------------------------------
   21. Closer
   -------------------------------------------------------------------------- */

.closer {
  background: var(--ink);
  color: var(--bone);
}
.closer__inner {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-block: var(--section);
}
@media (min-width: 900px) { .closer__inner { grid-template-columns: 6fr 5fr; align-items: start; } }
.closer__title { margin-bottom: 1rem; }
.closer__lede { color: var(--tan-pale); max-width: 40ch; }
.closer .deflist { border-top-color: var(--tan); }
.closer .deflist__row { border-bottom-color: var(--ink-3); }
.closer .deflist dt { color: var(--tan); }
.closer .deflist dd { color: var(--bone); }
.closer .deflist dd a { color: var(--tan); }
.closer .hours__row { border-bottom-color: var(--ink-3); }
.closer__more { margin: 1.75rem 0 0; }

/* --------------------------------------------------------------------------
   22. Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--ink-2);
  color: var(--bone);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  font-size: 0.9375rem;
}

.footer__grid {
  display: grid;
  gap: 2.5rem clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 720px)  { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; } }

.footer__col address { margin-top: 1.25rem; color: var(--tan-pale); line-height: 1.7; }
.footer__col address a { color: var(--tan); text-underline-offset: 2px; }
.footer__col address a:first-of-type { font-family: var(--slab); font-weight: 700; }

.footer__heading {
  font-family: var(--slab);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--ink-3);
}
.footer__subheading {
  font-family: var(--slab);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel-soft);
  margin: 1.25rem 0 0.5rem;
}

.footer__list li { padding: 0.32rem 0; }
.footer__list a { color: var(--tan-pale); text-decoration: none; }
.footer__list a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }

.footer .hours__row { border-bottom-color: var(--ink-3); }
.footer .hours__day  { color: var(--tan-pale); }
.footer .hours__time { color: var(--bone); }
.footer .fineprint { color: var(--steel-soft); }
.footer .fineprint a { color: var(--tan); font-family: var(--slab); font-weight: 700; }

.footer__social { display: flex; gap: 0.75rem; margin-top: 1.25rem; }
.footer__social a {
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  border: 1px solid var(--ink-3);
  color: var(--tan);
}
.footer__social a:hover { border-color: var(--tan); background: var(--tan); color: var(--ink-2); }
.footer__social svg { width: 1rem; height: 1rem; fill: currentColor; }

.footer__affil {
  margin: 3rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink-3);
  font-size: 0.8125rem;
  color: var(--steel-soft);
}
.footer__affil strong { color: var(--tan-pale); }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  margin-top: 1.25rem;
  font-size: 0.75rem;
  color: var(--steel-soft);
}
.footer__concept a { color: var(--tan); }

/* --------------------------------------------------------------------------
   23. Scroll reveal
   Only active when JS is present — .js is set on <html> before first paint,
   so content is never hidden from a browser that cannot bring it back.
   -------------------------------------------------------------------------- */

.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   24. Print
   A rate card should print. The chrome should not.
   -------------------------------------------------------------------------- */

@media print {
  .ribbon, .notice, .counter, .nav, .footer__social,
  .filter, .closer, .skip-link { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; }
  .masthead, .pagehead, .hero, .section--ink, .footer {
    background: #fff !important;
    color: #000 !important;
  }
  .wordmark__sub, .hero__lede, .pagehead .lede { color: #333 !important; }
  a { text-decoration: none; color: #000; }
  .items__row, .directory__item { break-inside: avoid; }
}