/* ============================================================
   Metro Detroit Rate Ledger, the value door onto Rochester Car
   Rental.

   The network shares one skeleton: TeX Gyre Adventor set large,
   a wide measure, two-tone section headings, generous bands. It
   also shares one palette again: the black ground, two near-black
   surfaces and the single Rochester gold that every site in the
   estate opened with. The teal-and-mint recolour this file once
   carried has been taken back out.

   What is NOT taken back out is the structure. This site is still
   a rate ledger: no photographic hero, a ruled table where its
   siblings put a card grid, tabular figures everywhere a number
   appears, and a rate column that is the loudest thing on the
   page. Only the colours went back.

   Every colour below was measured, not chosen by eye, and
   tests/contrast.mjs reads this file and fails the build if any
   pair drops under its threshold. The numbers in the comments are
   the computed ratios against the surface actually painted behind
   the text.

   The face is TeX Gyre Adventor, an open metric clone of ITC
   Avant Garde Gothic (GUST Font License / LPPL 1.3c). Regular and
   Bold only; there is no 500, so display type is set Bold and
   body Regular rather than faked with a synthetic weight.
   ============================================================ */

/* -- Typeface -- */
@font-face {
  font-family: 'Adventor';
  src: url('adventor-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Adventor';
  src: url('adventor-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* -- Tokens -------------------------------------------------- */
:root {
  /* THE ORIGINAL PALETTE, restored byte for byte from this repo's
     baseline commit (e439736, assets/site.css). Ground and the two
     surfaces that sit on it. */
  --void:    #000000;
  --surface: #121212;
  --raised:  #1B1B1B;

  --fg:      #FFFFFF;   /* 21.00 on void, 18.73 on surface, 17.22 on raised */
  --fg-mute: #888888;   /*  5.92 on void,  5.28 on surface,  4.86 on raised */

  /* One gold, used for every accent: the rate column, links and fills. */
  --gold:     #C49A55;  /*  8.10 on void,  7.23 on surface,  6.64 on raised */
  --gold-lit: #D9B679;  /* 10.92 on void,  9.74 on surface */
  --on-gold:  #0B0B0B;  /*  7.59 on gold, 10.23 on gold-lit */

  /* Rules. The baseline wrote these as rgba(255,255,255,0.10) and 0.20,
     which is a decorative hairline: composited on the black ground they
     measure 1.20:1 and 1.66:1. On this site a rule is not decoration. It
     is the edge of a ledger row, a card, a form and a text field, which
     WCAG 2.1 1.4.11 puts at 3:1. So the rules keep the baseline's neutral
     white family and drop the transparency, at the strength the floor
     actually requires. That is the contrast repair being kept, not the
     recolour being kept: there is no teal left in them. */
  --line:        #6E6E6E;  /* 4.12 on void, 3.67 on surface, 3.38 on raised */
  --line-strong: #8C8C8C;  /* 6.25 on void, 5.57 on surface, 5.12 on raised */

  /* State colours. The baseline had none, because it had no lead form and
     no live inventory to be stale about. Keyed to the gold system rather
     than to the mint one. */
  --ok:     #8FD6A4;   /* 12.32 on void, 10.99 on surface, 10.11 on raised */
  --warn:   #D9B679;   /* 10.92 on void,  9.74 on surface,  8.95 on raised */
  --danger: #F0A08F;   /* 10.13 on void,  9.04 on surface,  8.31 on raised */

  --input-bg:     #000000;  /* the field is cut back to the ground */
  --input-border: #6E6E6E;  /* 4.12 on input-bg, 3.67 on surface */
  --placeholder:  #909090;  /* 6.58 on input-bg */

  --sans: 'Adventor', 'Century Gothic', -apple-system, BlinkMacSystemFont,
          'Segoe UI', Helvetica, Arial, sans-serif;

  /* A ledger is squarer than a showroom. Radii are small on purpose. */
  --r-sm: 0.25rem;
  --r:    0.4rem;
  --r-lg: 0.5rem;
  --r-pill: 0.4rem;

  --maxw:   1220px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --nav-h:  68px;

  --band: clamp(4rem, 8vw, 7.5rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --z-nav: 80;

  /* -- Wiring kit palette --------------------------------------
     rr-network.css carries no colour of its own; these drive it.
     Every one of the 48 properties the kit documents is set here,
     because an undefined one paints nothing at all.               */
  --rr-text: var(--fg);
  --rr-text-muted: var(--fg-mute);
  --rr-surface: var(--surface);
  --rr-surface-2: var(--raised);
  --rr-border: var(--line);
  --rr-accent: var(--gold);
  --rr-price: var(--gold);
  --rr-ok: var(--ok);
  --rr-warn: var(--warn);
  --rr-danger: var(--danger);
  --rr-focus: var(--gold-lit);
  --rr-input-bg: var(--input-bg);
  --rr-input-text: var(--fg);
  --rr-input-border: var(--input-border);
  --rr-placeholder: var(--placeholder);
  --rr-button-bg: var(--gold);
  --rr-button-bg-hover: var(--gold-lit);
  --rr-button-text: var(--on-gold);
  --rr-button-border: var(--gold);

  --rr-card-min: 17rem;
  --rr-gap: 1.25rem;
  --rr-gap-tight: 0.4rem;
  --rr-card-pad: 1rem;
  --rr-card-aspect: 16 / 10;
  --rr-radius: var(--r);
  --rr-radius-inner: var(--r-sm);
  --rr-border-width: 1px;
  --rr-title-size: 1.0625rem;
  --rr-price-size: 1.375rem;
  --rr-small-size: 0.8125rem;
  --rr-font-display: var(--sans);
  --rr-status-transform: uppercase;
  --rr-status-tracking: 0.12em;
  /* --rr-loading-opacity is RETIRED and deliberately not set here.
     The kit used to dim every .rr-card while a refresh was in flight, and
     opacity flattens the text with it. That was the C5 trap in another coat:
     the dim only ever came off in JavaScript, so a reader whose script was
     blocked, 404'd or switched off was stuck in it for good. Measured on this
     built page with every <script> stripped and the old alpha forced, ledger
     body copy fell to 2.93:1 against a 4.5:1 floor.
     Server rendered rows are real content and now paint at full strength. The
     refresh cue ADDS a line of text instead of subtracting contrast; its
     wording is --rr-msg-loading below. */
  --rr-disabled-opacity: 0.55;
  --rr-motion: 150ms;
  --rr-form-width: 30rem;
  --rr-form-pad: clamp(1.25rem, 2.4vw, 1.75rem);
  --rr-control-height: 2.875rem;
  --rr-control-pad: 0.7rem 0.85rem;
  --rr-button-pad: 0.85rem 1.5rem;
  --rr-textarea-height: 8rem;
  --rr-focus-width: 2px;
  --rr-focus-offset: 2px;

  /* Written for this site alone. Seven identical sentences across the
     network would breach its structural distinctness rule. */
  --rr-msg-loading: "Re-reading the rate column against the operator inventory.";
  --rr-msg-stale: "The rates below were saved when this page was built. They did not refresh just now.";
  --rr-msg-empty: "No rows are listed at the moment. Every vehicle is still on the main site.";
  --rr-mark-success: "\2713";
  --rr-mark-error: "\0021";
}

/* -- Reset --------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
}
:target,
[id]:not(body):not(html) { scroll-margin-top: calc(var(--nav-h) + 1.5rem); }

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--void);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

main { flex: 1 0 auto; }

img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--gold); color: var(--on-gold); }

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--gold);
  color: var(--on-gold);
  border-radius: var(--r-sm);
  font-weight: 700;
  transition: top 0.2s var(--ease);
}
.skip-link:focus-visible { top: 1rem; }

/* -- Layout -------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.band { padding-block: var(--band); }
.band-tight { padding-block: calc(var(--band) * 0.6); }

/* -- Type ---------------------------------------------------- */
h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.h-page { font-size: clamp(2.35rem, 5.8vw, 4rem); line-height: 1.06; }
.h-sec  { font-size: clamp(1.85rem, 4.2vw, 3rem); line-height: 1.14; }
.h-card { font-size: clamp(1.125rem, 1.8vw, 1.3125rem); line-height: 1.22; }

.h-sec .mute, .h-page .mute, .footer-mark .mute, .wordmark .mute {
  font-style: normal;
  color: var(--fg-mute);
}

.lede {
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  line-height: 1.5;
  color: var(--fg-mute);
  max-width: 46ch;
}

.body-copy { color: var(--fg-mute); max-width: 68ch; }
.body-copy + .body-copy { margin-top: 1rem; }
.body-copy strong { color: var(--fg); font-weight: 400; }

.answer-block { margin-top: 1.5rem; }
.answer-block > p:first-child {
  font-size: clamp(1rem, 1.2vw, 1.0625rem);
  line-height: 1.62;
  max-width: 62ch;
}

.micro {
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  padding-bottom: clamp(1rem, 2vw, 1.5rem);
  border-bottom: 1px solid var(--line);
}

/* -- Links --------------------------------------------------- */
.inline-link {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: color 0.16s var(--ease);
}
.inline-link:hover { color: var(--gold-lit); }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--gold);
  font-weight: 700;
  font-size: 0.9375rem;
  transition: color 0.16s var(--ease);
}
.arrow-link::after {
  content: '\2192';
  font-weight: 400;
  transition: transform 0.22s var(--ease);
}
.arrow-link:hover { color: var(--gold-lit); }
.arrow-link:hover::after { transform: translateX(0.28em); }

/* -- Buttons ------------------------------------------------- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 50px;
  padding: 0.8rem 1.75rem;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  text-align: center;
  border: 1px solid transparent;
  transition: background-color 0.16s var(--ease), color 0.16s var(--ease),
              border-color 0.16s var(--ease);
}
.btn-primary { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.btn-primary:hover { background: var(--gold-lit); border-color: var(--gold-lit); }

.btn-ghost { border-color: var(--gold); color: var(--gold); }
.btn-ghost:hover { color: var(--on-gold); background: var(--gold); }

.btn-quiet { border-color: var(--line); color: var(--fg); }
.btn-quiet:hover { border-color: var(--line-strong); background: var(--raised); }

.btn-sm { min-height: 40px; padding: 0.5rem 1.1rem; font-size: 0.8125rem; }

/* == Header ================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--void);
  border-bottom: 1px solid var(--line);
}
.site-header.pinned { background: var(--surface); }

.site-nav {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}

.wordmark {
  font-size: 0.875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-right: auto;
}
.wordmark b { font-weight: 700; }
.wordmark span { font-weight: 400; color: var(--fg-mute); }

.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.nav-links a {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--fg-mute);
  transition: color 0.16s var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current='page'] { color: var(--fg); }

.nav-book {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0.4rem 1.1rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--gold);
  color: var(--gold);
  font-weight: 700;
  font-size: 0.8125rem;
  transition: background-color 0.16s var(--ease), color 0.16s var(--ease);
}
.nav-book:hover { background: var(--gold); color: var(--on-gold); }

.hamburger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}
.hamburger i {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--fg);
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.hamburger[aria-expanded='true'] i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.hamburger[aria-expanded='true'] i:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded='true'] i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.mobile-menu {
  display: none;
  overflow: hidden;
  max-height: 0;
  /* max-height:0 clips the pixels but leaves every link focusable, so a
     keyboard user tabs into a menu they cannot see. visibility:hidden is what
     actually makes it inert; it is not transitioned, so closing snaps rather
     than sliding, which is the right trade. */
  visibility: hidden;
  background: var(--surface);
  border-top: 1px solid var(--line);
  transition: max-height 0.3s var(--ease);
}
.mobile-menu.open { max-height: 24rem; visibility: visible; }
.mobile-menu a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem var(--gutter);
  font-size: 1.0625rem;
  font-weight: 700;
  border-bottom: 1px solid var(--line);
}
.mobile-menu a:last-child { border-bottom: 0; color: var(--gold); }
.mobile-menu a span {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--fg-mute);
  font-weight: 400;
}

@media (max-width: 900px) {
  .nav-links, .nav-book { display: none; }
  .hamburger { display: flex; }
  .mobile-menu { display: block; }
}

/* == Hero ====================================================
   No photograph. The siblings open on a car; this one opens on
   the price, because that is the only reason anybody typed the
   search that brought them here.                               */
.hero-ledger {
  padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
  /* A faint ruled ground, the way a ledger sheet is ruled. Drawn from the
     rule colour so it can never drift away from the borders it echoes. */
  background-image: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--line) 22%, transparent) 0 1px,
    transparent 1px 4.5rem
  );
}
.hero-kicker { margin-bottom: 1.25rem; color: var(--gold); }
.hero-ledger .h-page { max-width: 18ch; }
.hero-ledger .lede { margin-top: 1.5rem; }
.hero-note {
  margin-top: 1.25rem;
  max-width: 64ch;
  font-size: 0.875rem;
  color: var(--fg-mute);
}
.hero-actions { margin-top: 2rem; }

/* -- Rate strip ---------------------------------------------- */
.rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: clamp(2rem, 4vw, 3rem);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.rail > div { background: var(--surface); padding: clamp(1rem, 2vw, 1.4rem); }
.rail dt { margin-bottom: 0.4rem; }
.rail dd {
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--gold);
}
.rail .rail-unit {
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

@media (max-width: 820px) { .rail { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .rail { grid-template-columns: 1fr; } }

/* == The ledger ==============================================
   The wiring kit's grid, driven to a single full-width column so
   each card reads as a ruled table row. The kit's markup, class
   names and reconciliation are untouched; only the arrangement
   below belongs to this site.                                   */
.ledger {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface);
}

.ledger-rows {
  --rr-card-min: 100%;
  --rr-gap: 0;
}

.ledger-head,
.ledger-row {
  display: grid;
  grid-template-columns: 3rem 5.5rem minmax(0, 1fr) 8rem 6.5rem auto;
  align-items: center;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  padding: 0.85rem clamp(0.85rem, 2vw, 1.25rem);
}

.ledger-head {
  background: var(--raised);
  border-bottom: 1px solid var(--line);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
  padding-block: 0.7rem;
}
.ledger-head .rr-card-price,
.ledger-head .rr-card-status {
  /* The kit pushes a card price to the bottom of its flex column with
     margin-top:auto. In the heading row that drops the label off the baseline
     the other headings share. */
  margin: 0;
  color: var(--fg-mute);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
}
.ledger-head .rr-card-price { text-align: right; }
/* The heading's thumbnail cell is a spacer, not a frame. */
.ledger-head .ledger-thumb { border: 0; background: none; aspect-ratio: auto; }
.ledger-head .ledger-go { min-width: 4.5rem; }

/* KIT COLLISION, worked around here rather than by forking the kit.
   rr-network.css uses [data-rr-status] for two different things: the attribute
   the kit stamps on a card, and the live region inside a lead form. Its form
   state rules are unscoped, so while the grid carries rr-is-error (the stale
   fallback, which is the state a satellite spends most of its life in) every
   card grows a "!" ::before. That pseudo-element becomes an extra grid item and
   shifts every column by one, which is how a full width photograph ended up
   where an 88px thumbnail belongs. Reported upstream: the kit wants a separate
   attribute for the form live region.

   The same rules also hand every card the form status line's muted colour,
   small font and min-height. All of it is put back here. */
.ledger-rows .rr-card[data-rr-status]::before {
  content: none;
  margin-right: 0;
}
.ledger-rows .rr-card[data-rr-status] {
  min-height: 0;
  font-size: 1rem;
  color: var(--fg);
}

/* The kit gives a card a flex column, a full border and a radius. A ledger
   row is none of those: it is a ruled line in a table. */
.ledger-rows .ledger-row {
  flex-direction: initial;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  transition: background-color 0.16s var(--ease);
}
.ledger-rows .ledger-row:first-of-type { border-top: 0; }
.ledger-rows .ledger-row:hover,
.ledger-rows .ledger-row:focus-within { background: var(--raised); }

.ledger-rank {
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  color: var(--fg-mute);
}

.ledger-thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--raised);
  border: 1px solid var(--line);
}
.ledger-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ledger-nophoto { display: block; width: 100%; height: 100%; }

.ledger-name { min-width: 0; }
.ledger-name .rr-card-title { font-size: 1.0625rem; letter-spacing: -0.005em; }
.ledger-name .rr-card-title a { color: var(--fg); }
.ledger-row:hover .rr-card-title a { color: var(--gold); }

.rr-card-specs {
  margin-top: 0.35rem;
  gap: 0.15rem 1.1rem;
}
.ledger-spec { display: flex; align-items: baseline; gap: 0.4rem; }
.ledger-spec dt {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* The API sends these lower case. A class reads as an abbreviation, so it is
   set upper; a gearbox is a word, so it is set title case. */
.ledger-spec dd[data-rr-field="category"] {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}
.ledger-spec dd[data-rr-field="transmission"] { text-transform: capitalize; }

/* The dashboard leaves some of these null. An empty slot is left in the markup
   so the wiring kit can fill it later, and hidden until it does. Two rules,
   because they cover different moments: .is-blank is written by the build and
   works everywhere, :has catches a slot the kit empties after load. */
.ledger-spec.is-blank { display: none; }
.ledger-spec:has(dd:empty) { display: none; }

.ledger-row .rr-card-price {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
}
.ledger-row .rr-card-per { font-weight: 400; }

.ledger-row .rr-card-status { font-size: 0.6875rem; }
.ledger-go { justify-self: end; }

@media (max-width: 980px) {
  .ledger-head { display: none; }
  .ledger-head, .ledger-row { grid-template-columns: 2.5rem 4.5rem minmax(0, 1fr) auto; }
  .ledger-row .rr-card-status { grid-column: 3; margin-top: 0.35rem; }
  .ledger-go { grid-column: 4; }
}
@media (max-width: 560px) {
  .ledger-head, .ledger-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.5rem; }
  .ledger-rank, .ledger-thumb { display: none; }
  .ledger-row .rr-card-price { text-align: left; }
  .ledger-row .rr-card-status { grid-column: auto; }
  .ledger-go { grid-column: 2; grid-row: 2; }
}

.ledger-note { margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }

/* The stale and empty panels sit inside the ruled box, so they get the box's
   edges rather than their own. */
.ledger-rows.rr-is-error::before,
.ledger-rows.rr-is-empty::before { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }

/* == Bento, tiles, steps ===================================== */
.bento {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: start;
}
.bento-stack { display: grid; gap: clamp(0.75rem, 1.5vw, 1rem); }

.tile {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.tile p { color: var(--fg-mute); }

@media (max-width: 900px) { .bento { grid-template-columns: 1fr; } }

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.step { background: var(--surface); padding: clamp(1.35rem, 2.6vw, 2rem); }
.step-n {
  display: block;
  margin-bottom: 1.1rem;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  font-weight: 700;
}
.step h3 { margin-bottom: 0.5rem; }
.step p { color: var(--fg-mute); }

/* == Plate =================================================== */
.plate-media {
  position: relative;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--raised);
}
.plate-media img { width: 100%; height: 100%; object-fit: cover; }
.plate figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: 0.85rem;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.plate figcaption b { color: var(--gold); font-weight: 700; }

@media (max-width: 720px) { .plate-media { aspect-ratio: 4 / 3; } }

/* == Spec list =============================================== */
.spec {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.spec > div {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1.5rem;
  padding: clamp(1rem, 2vw, 1.35rem) clamp(1rem, 2.2vw, 1.75rem);
  background: var(--surface);
}
.spec dt { color: var(--fg-mute); font-size: 0.875rem; letter-spacing: 0.04em; }
.spec dd { color: var(--fg); font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .spec > div { grid-template-columns: 1fr; gap: 0.3rem; }
}

/* == Ask ===================================================== */
.ask {
  display: grid;
  grid-template-columns: 1fr minmax(0, 30rem);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.ask-copy .lede { margin-top: 1.25rem; }
.ask-aside {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  max-width: 44ch;
  font-size: 0.875rem;
  color: var(--fg-mute);
}
.ask-legend { margin-bottom: -0.25rem; color: var(--gold); }
.ask-form { width: 100%; }
.rr-status-line { margin: 0; }

@media (max-width: 900px) { .ask { grid-template-columns: 1fr; } }

/* == FAQ =====================================================
   Left open rather than collapsed behind a control: an answer a
   crawler or an assistant cannot read is an answer that does not
   exist, and a test holds that line.                            */
.qa {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  align-items: stretch;
}
.qa > div { background: var(--surface); padding: clamp(1.25rem, 2.4vw, 1.75rem); }
.qa dt {
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
  margin-bottom: 0.65rem;
  padding-left: 1.5rem;
  position: relative;
}
.qa dt::before {
  content: 'Q';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold);
  font-weight: 700;
}
.qa dd { color: var(--fg-mute); padding-left: 1.5rem; }

@media (max-width: 860px) { .qa { grid-template-columns: 1fr; } }

/* == CTA ===================================================== */
.cta {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: center;
}
.cta .actions { justify-content: center; margin-top: 1.75rem; }
.cta .lede { margin-inline: auto; margin-top: 1rem; }
.cta-inner { padding-inline: clamp(1.5rem, 4vw, 3rem); }

/* == Footer ================================================== */
.site-footer {
  flex: none;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
}
.footer-inner { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.footer-mark {
  font-size: 0.875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.footer-mark b { font-weight: 700; }
.footer-mark span { color: var(--fg-mute); }

.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2.5rem 2rem;
}
.footer-cols h2 {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
  font-weight: 400;
  margin-bottom: 1rem;
}
.footer-cols ul { display: grid; gap: 0.65rem; }
.footer-cols a, .footer-cols li {
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--fg-mute);
  /* admin@rochester.rentals is one unbreakable token wider than this column
     while auto-fit is still handing out 200px tracks. */
  overflow-wrap: anywhere;
}
.footer-cols a { transition: color 0.16s var(--ease); }
.footer-cols a:hover { color: var(--gold); }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* A container whose background IS the divider colour cannot reveal its
   children one by one: while they sit at opacity 0 the rule colour shows
   through as a solid slab the width of the section. The rail, the steps, the
   spec list and the FAQ therefore reveal as one block, and only cards that
   carry their own background reveal individually. */

/* == Reveals =================================================
   There is NO reveal rule in this file, and there must never be
   one again. `.rise { opacity: 0 }` used to live here: a rule in a
   stylesheet that always loads, keyed to a script that sometimes
   does not, which paints a blank page whenever site.js fails while
   CSS reports perfect health.

   assets/rr-network.css owns the reveal now. Its base state is
   VISIBLE, and the hidden state applies only while <html> carries
   .rr-js, which assets/rr-gate.js adds and takes away again unless
   the kit claims it. Tuning only below.                          */
:root {
  --rr-reveal-shift: 12px;
  --rr-reveal-motion: 500ms;
  /* No stagger. A ledger reads top to bottom and a delay per row would make
     the page look like it is still loading after it has finished. */
  --rr-reveal-delay: 0ms;
}

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