/* ============================================================
   DTW Arrivals Handover, design system

   A departure board rendered as a web page, painted in the
   network's own colours: black ground, two near-black surfaces
   on it, white and grey type, and one gold that carries every
   accent. That palette is shared with every other door on the
   network and is not this site's to change; it was restored
   here after a spell in slate and cyan.

   What separates this from its siblings in the network is not
   the colour. It is the geometry: corners are 2px rather than
   20px, every panel is squared off, hairlines run edge to edge
   instead of wrapping into rounded cards, figures are set in a
   monospace face with tabular figures so a column of rates
   lines up the way a timetable does, and labels are small
   uppercase with wide tracking. The editorial bones and the
   type scale are the network's; the fittings are this site's.

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

   COLOUR AND CONTRAST
   Every pair below is computed by tests/contrast.mjs, which
   parses the tokens out of this file, composites the two
   translucent grounds over the worst case underneath them, and
   fails the build when body text drops under 4.5:1 or a UI
   boundary drops under 3:1. Do not hand-edit a colour here
   without running `npm test`.
   ============================================================ */

/* -- 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 {
  /* Ground and the two surfaces that sit on it. The network's own,
     restored byte for byte from the baseline stylesheet. */
  --void:     #000000;
  --surface:  #121212;
  --raised:   #1B1B1B;

  --fg:       #FFFFFF;
  --fg-mute:  #888888;   /* 5.9:1 on void, 5.3:1 on surface */

  /* One gold, used for every accent. 8.1:1 on void, 7.2:1 on
     surface, and 7.6:1 the other way round for text on a fill. */
  --gold:     #C49A55;
  --gold-lit: #D9B679;
  --on-gold:  #0B0B0B;

  /* The one place the restore is not literal, and it is deliberate.
     The baseline drew its two hairlines as white at 10% and 20%,
     which composite to 1.11:1 and 1.31:1 on the ground: a hint, not
     a boundary, and 1.4.11 wants 3:1. The rule is therefore an
     opaque neutral grey, the same family as a white wash on these
     greys, chosen so it clears 3:1 against the LIGHTEST thing it is
     ever drawn on (--raised). Reverting it to an alpha would undo a
     contrast fix, so it stays. There is no second rule weight on
     this site, so the baseline's --line-strong has nothing to hold. */
  --line:      #6E6E6E;

  /* Status. The baseline had none of these because it had no board,
     no form and no fetch that could fail. They are semantic rather
     than decorative, so they are not part of the shared palette and
     were not restored away with it. */
  --ok:     #4ADE80;
  --warn:   #FBBF24;
  --danger: #F87171;

  --input-bg: #0A0A0A;

  /* The one translucent ground on the page. The hero panel sits over a
     photograph, so the contrast gate composites it over white before it
     measures anything on top of it. */
  --panel-alpha: 0.94;
  --panel: rgba(0, 0, 0, 0.94);

  --sans: 'Adventor', 'Century Gothic', -apple-system, BlinkMacSystemFont,
          'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
          'Liberation Mono', monospace;

  /* Squared off. A board has corners. */
  --r-sm:   2px;
  --r:      3px;
  --r-lg:   4px;
  --r-pill: 2px;

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

  --band:   clamp(4.5rem, 9vw, 8.5rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --z-nav: 80;

  /* ---------------------------------------------------------------- */
  /* The wiring kit reads these and nothing else. It hard-codes no
     colour at all, so this block is what makes the shared form and
     grid look like this site rather than like its siblings.

     Every one of these is the SAME literal hex as the palette token
     beside it in the comment. They are written out rather than left as
     var() because the gate compares the two sets and fails when they
     drift, and because a var() pointing at a name a redesign deletes
     paints transparent without saying so.                            */
  --rr-text:         #FFFFFF;   /* --fg       */
  --rr-text-muted:   #888888;   /* --fg-mute  */
  --rr-surface:      #121212;   /* --surface  */
  --rr-surface-2:    #1B1B1B;   /* --raised   */
  --rr-border:       #6E6E6E;   /* --line     */
  --rr-accent:       #C49A55;   /* --gold     */
  --rr-price:        #D9B679;   /* --gold-lit */
  --rr-ok:           #4ADE80;   /* --ok       */
  --rr-warn:         #FBBF24;   /* --warn     */
  --rr-danger:       #F87171;   /* --danger   */
  --rr-focus:        #D9B679;   /* --gold-lit */
  --rr-input-bg:     #0A0A0A;   /* --input-bg */
  --rr-input-text:   #FFFFFF;   /* --fg       */
  --rr-input-border: #6E6E6E;   /* --line     */
  --rr-placeholder:  #888888;   /* --fg-mute  */
  --rr-button-bg:       #C49A55;   /* --gold     */
  --rr-button-bg-hover: #D9B679;   /* --gold-lit */
  --rr-button-text:     #0B0B0B;   /* --on-gold  */
  --rr-button-border:   #C49A55;   /* --gold     */

  --rr-card-min: 320px;
  --rr-gap: clamp(1rem, 2vw, 1.5rem);
  --rr-gap-tight: 0.4rem;
  --rr-card-pad: clamp(1.25rem, 2.2vw, 1.5rem);
  --rr-card-aspect: 16 / 10;
  --rr-radius: 3px;
  --rr-radius-inner: 2px;
  --rr-border-width: 1px;
  --rr-title-size: clamp(1.25rem, 2vw, 1.5rem);
  --rr-price-size: clamp(1.5rem, 2.6vw, 1.875rem);
  --rr-small-size: 0.9375rem;
  --rr-font-display: 'Adventor', 'Century Gothic', sans-serif;
  --rr-status-transform: uppercase;
  --rr-status-tracking: 0.14em;
  /* C5b. There is no --rr-loading-opacity here any more, and there is no rule
     left in the kit that would read one. Setting it to 1 was a local
     workaround for a dim this site never wanted, and a workaround is not a
     fix: the next site to copy this file would have copied the dim with it.
     Server rendered inventory paints at full contrast and stays there for
     ever if the script never runs. The refresh now ADDS a line of text,
     --rr-msg-loading below, instead of subtracting contrast from the board. */
  --rr-disabled-opacity: 0.65;
  --rr-motion: 160ms;
  --rr-form-width: 100%;
  --rr-form-pad: clamp(1.5rem, 3vw, 2rem);
  --rr-control-height: 3rem;
  --rr-control-pad: 0.7rem 0.85rem;
  --rr-button-pad: 0.9rem 1.75rem;
  --rr-textarea-height: 8rem;
  --rr-focus-width: 2px;
  --rr-focus-offset: 3px;

  /* Written for this site only. Seven identical sentences would breach the
     network's structural distinctness rule. */
  --rr-msg-loading: "The board is being reread against the calendar.";
  --rr-msg-stale: "The board is showing its last known state. The main site is live.";
  --rr-msg-empty: "Nothing is posted to this board right now.";
  --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;
}

/* The sticky header must not park on top of whatever an anchor lands on. */
html { 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 -- */
: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;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  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.62); }

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

.h-page {
  font-size: clamp(2.5rem, 6.6vw, 4.5rem);
  line-height: 1.06;
}

.h-sec {
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  line-height: 1.14;
}

/* The two-tone heading. .mute is the greyed half. */
.h-sec .mute, .h-page .mute, .footer-mark .mute, .wordmark .mute {
  font-style: normal;
  color: var(--fg-mute);
}

.h-card { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.2; }

.lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  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; }

/* The definition paragraph, a step up from body copy because it is the
   sentence a search engine or an assistant is most likely to lift whole. */
.answer-block > p:first-child {
  font-size: clamp(1rem, 1.2vw, 1.0625rem);
  line-height: 1.6;
  max-width: 62ch;
}

/* Letterspaced micro-label. 0.75rem = 12px, the floor the tests hold. */
.micro {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.18em;
  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.5rem, 3vw, 2.25rem);
  padding-bottom: clamp(1rem, 2vw, 1.5rem);
  border-bottom: 1px solid var(--line);
}
.sec-head .lede { max-width: 46ch; }

/* -- Links -- */
.inline-link {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: color 0.18s 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;
  transition: color 0.18s var(--ease);
}
.arrow-link::after {
  content: '\2192';
  font-weight: 400;
  transition: transform 0.24s var(--ease);
}
.arrow-link:hover { color: var(--gold-lit); }
.arrow-link:hover::after { transform: translateX(0.28em); }

/* -- Buttons: squared, tracked, board-like -- */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0.85rem 1.85rem;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  border: 1px solid transparent;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease),
              border-color 0.18s 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(--gold-lit); border-color: var(--gold-lit); }

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

.btn-sm { min-height: 44px; padding: 0.55rem 1.15rem; font-size: 0.8125rem; }

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

.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.75rem);
}

.wordmark {
  font-family: var(--mono);
  font-size: 0.875rem;
  letter-spacing: 0.24em;
  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.4vw, 2.25rem);
}
.nav-links a {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
  transition: color 0.18s var(--ease);
}
.nav-links a:hover { color: var(--fg); }
.nav-links a[aria-current='page'] { color: var(--gold); }

.nav-book {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.45rem 1.15rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background-color 0.18s var(--ease), color 0.18s 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.22s var(--ease), opacity 0.22s 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 and in the
     accessibility tree, so a keyboard user tabs into a menu they cannot see.
     visibility:hidden is what actually makes it inert. */
  visibility: hidden;
  background: var(--surface);
  border-top: 1px solid var(--line);
  transition: max-height 0.32s 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;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.mobile-menu a:last-child { border-bottom: 0; color: var(--gold); }
.mobile-menu a span {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--fg-mute);
  font-weight: 400;
}

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

/* == Hero ====================================================
   The photograph is background, not a ground for text. Every
   word in the hero sits on a squared panel at 0.94 alpha, so
   the ratio behind it is a number this build can compute
   rather than a property of whatever is in the picture.       */
.hero {
  position: relative;
  min-height: min(88vh, 800px);
  display: flex;
  align-items: stretch;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem);
  isolation: isolate;
  border-bottom: 1px solid var(--line);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--void);
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.75) contrast(1.05) brightness(0.82);
}

/* One wash, black, the same ground the page is built on, so the photograph
   reads as part of the page rather than as a plate dropped behind it. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.55) 40%, rgba(0, 0, 0, 0.35) 100%);
}

.hero-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(2rem, 5vw, 4rem);
}

.board-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--r);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.hero-copy { max-width: 700px; }
.board-eyebrow { margin-bottom: 1rem; }
.hero .lede { margin-top: 1.25rem; }

/* -- The strip: a row of board fields under the headline -- */
.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.strip-field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  min-height: 76px;
  padding: 0.9rem 1.35rem;
  background: var(--panel);
}
.strip-field b {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.strip-cta {
  min-height: 76px;
  border-radius: 0;
}

/* == Fact rail ============================================== */
.rail-wrap { margin-top: clamp(2rem, 4vw, 3rem); }

.rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.rail > div {
  background: var(--surface);
  padding: clamp(1.25rem, 2.4vw, 1.6rem);
}
.rail dt { margin-bottom: 0.4rem; }
.rail dd {
  font-family: var(--mono);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* == The board ==============================================
   State chip. The kit writes rr-is-ready / rr-is-error onto
   the grid; this reads it with :has and says so in one word.
   It is decorative and marked aria-hidden, because the kit
   already renders the real state message into the grid.      */
.board-note { margin-bottom: 1.25rem; }

.board-status {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.board-status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fg-mute);
}
.board-status::after { content: 'Refreshing'; }

#board:has(.fleet-grid.rr-is-ready) .board-status::before { background: var(--ok); }
#board:has(.fleet-grid.rr-is-ready) .board-status::after { content: 'Live'; }
#board:has(.fleet-grid.rr-is-error) .board-status::before { background: var(--warn); }
#board:has(.fleet-grid.rr-is-error) .board-status::after { content: 'Last known'; }

.fleet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

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

/* A card is a board line: squared, ruled, with the rate set in figures
   that line up down the column. */
.car {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--fg);
  font-size: 1rem;
  border: 1px solid var(--line);
  border-top: 2px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-top-color 0.22s var(--ease);
}
.car:hover, .car:focus-within { border-top-color: var(--gold); }

/* C5b, this site's half of it. The kit ships a neutraliser for `.rr-card`, and
   a board line here is a `.car`, so the kit's rule cannot reach it. This is the
   same guarantee written for the class this site actually uses: a card that
   the server rendered is real content and nothing that only JavaScript can
   remove may take contrast off it.

   The neutraliser is keyed on the CONTAINER, never on a kit state class. An
   earlier form of this rule also listed `[data-rr-inventory].rr-is-loading
   .car`, which is step 4 of the kit's 3.1 procedure: a site rule that mentions
   a state class is how the dim came back the first time, and a site rule that
   mentions it only to switch the dim off still teaches the next reader that
   `.rr-is-loading` is a thing a site stylesheet answers. It is not. The class
   belongs to rr-network.js alone.

   Specificity is deliberate. This is 0,1,1. The reveal in rr-network.css is
   `.rr-js .rise:not(.rr-shown)` at 0,3,0, so the reveal still wins and the
   scroll animation is untouched; only a bare dim on a painted card loses. */
[data-rr-inventory] .car { opacity: 1; }

.car-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--raised);
  overflow: hidden;
}
.car-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.car-tag {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.35rem 0.8rem;
  background: var(--void);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
}
.car-tag:empty { display: none; }

.car-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.55rem;
  padding: clamp(1.25rem, 2.2vw, 1.5rem);
}
/* A card title is a wrapping sentence, not a row of flex items. As an
   inline-flex the arrow-link put each span on one flex line and let the
   model span wrap inside itself, so "2022 Ford Expedition Max" broke into
   two blocks sitting at different baselines. Inline, with the arrow set
   inline-block so it can still step forward on hover. */
.car-body h3 .arrow-link { display: inline; color: var(--fg); }
.car-body h3 .arrow-link::after { display: inline-block; margin-left: 0.4rem; }
.car:hover .car-body h3 .arrow-link { color: var(--gold); }

.car-spec {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
/* A fact the operator withdraws must take its unit with it, or the line
   reads " seats" with nothing in front of it. */
.car-spec .bit:has(> [data-rr-field]:empty) { display: none; }

.car-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.car-price { display: flex; align-items: baseline; gap: 0.35rem; }
.car-price b {
  font-family: var(--mono);
  font-size: clamp(1.5rem, 2.6vw, 1.75rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gold-lit);
}
.car-price span { color: var(--fg-mute); font-size: 0.875rem; }

.car-status {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.car[data-rr-status='available'] .car-status { color: var(--ok); }
.car[data-rr-status='rented'] .car-status,
.car[data-rr-status='maintenance'] .car-status { color: var(--warn); }

.car-cta { align-self: flex-start; margin-top: 0.5rem; }

.car[hidden] { display: none; }

/* -- Defensive overrides against the shared kit --------------
   The kit styles [data-rr-status] as a small muted status line
   and, when a grid fails to refresh, prefixes every one of them
   with an exclamation mark. It writes that attribute onto every
   card, so without these two rules a failed fetch would stamp a
   mark on all sixteen cards and shrink their type. The kit is
   not forked for this; it is simply overridden where a site
   uses the attribute for something else.                       */
[data-rr-inventory] .car { font-size: 1rem; color: var(--fg); min-height: 0; }
[data-rr-inventory] .car::before { content: none; }

/* == Bento =================================================== */
.bento {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
}
.bento-lede { padding-top: 0.25rem; }
.bento-stack {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-column: span 2;
  grid-template-columns: 1fr 1fr;
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  min-height: 200px;
}
.tile p { color: var(--fg-mute); }
.tile .arrow-link { margin-top: auto; padding-top: 0.75rem; }

/* The photo tile puts the picture above the copy rather than behind it.
   Text over a photograph has no contrast ratio anyone can compute, and
   this network gates on measured contrast. */
.tile-photo {
  grid-row: span 2;
  padding: 0;
  min-height: 340px;
  overflow: hidden;
}
.tile-media {
  aspect-ratio: 16 / 10;
  background: var(--raised);
  border-bottom: 1px solid var(--line);
}
.tile-media img { width: 100%; height: 100%; object-fit: cover; }
.tile-copy {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  flex: 1;
  padding: clamp(1.5rem, 2.6vw, 2rem);
}

@media (max-width: 1040px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento-lede { grid-column: span 2; }
  .bento-stack { grid-column: span 2; }
}
@media (max-width: 720px) {
  .bento, .bento-stack { grid-template-columns: 1fr; }
  .bento-lede, .bento-stack { grid-column: auto; }
  .tile-photo { grid-row: auto; }
}

/* == Steps =================================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.step {
  padding: clamp(1.5rem, 2.6vw, 2rem);
  background: var(--surface);
}
.step-n {
  display: block;
  margin-bottom: 1.25rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--gold);
  font-weight: 700;
}
.step h3 { margin-bottom: 0.6rem; }
.step p { color: var(--fg-mute); }

/* == Timetable (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: 230px 1fr;
  gap: 1.5rem;
  padding: clamp(1rem, 2vw, 1.35rem) clamp(1.25rem, 2.4vw, 2rem);
  background: var(--surface);
}
.spec dt {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
  padding-top: 0.2rem;
}
.spec dd { color: var(--fg); }

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

/* == Ask (lead form) ========================================= */
.ask {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

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

.ask-form {
  display: grid;
  gap: clamp(1rem, 2vw, 1.35rem);
  padding: var(--rr-form-pad);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: var(--r);
}
.ask-form.rr-is-success { border-top-color: var(--ok); }
.ask-form.rr-is-error { border-top-color: var(--danger); }

.ask-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(1rem, 2vw, 1.35rem);
}

.rr-label {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ask-send {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

.rr-button {
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ask-status {
  flex: 1 1 14rem;
  font-size: 0.9375rem;
}

/* == FAQ ===================================================== */
.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 {
  padding: clamp(1.35rem, 2.4vw, 1.85rem);
  background: var(--surface);
}
.qa dt {
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
  margin-bottom: 0.75rem;
  padding-left: 1.5rem;
  position: relative;
}
.qa dt::before {
  content: 'Q';
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--gold);
  font-weight: 700;
}
.qa dd { color: var(--fg-mute); }

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

/* == CTA band ================================================ */
.cta {
  padding-block: clamp(3rem, 6vw, 5rem);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: var(--r);
  background: var(--surface);
  text-align: center;
}
.cta .actions { justify-content: center; margin-top: 2rem; }
.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(3rem, 6vw, 4.5rem) 2rem;
}
.footer-inner { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.footer-mark {
  font-family: var(--mono);
  font-size: 0.875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.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-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
  font-weight: 400;
  margin-bottom: 1.1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}
.footer-cols ul { display: grid; gap: 0.7rem; }
.footer-cols a, .footer-cols li {
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  color: var(--fg-mute);
  /* admin@rochester.rentals is a single unbreakable token wider than this
     column between roughly 700 and 1100px. Without this it escapes the
     column instead of wrapping. */
  overflow-wrap: anywhere;
}
.footer-cols a { transition: color 0.18s 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(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* == Reveals =================================================
   There is deliberately NO reveal rule in this file.

   `.rise { opacity: 0 }` used to live here, and that is the C5
   trap: it hides content from a stylesheet that always loads,
   keyed to a script that sometimes does not, so one 404 on
   site.js painted a blank page with a perfectly healthy CSS
   file. Do not add one back.

   The reveal now lives in rr-network.css, whose base state is
   visible and whose hidden state is scoped to `.rr-js` on
   <html>. That class is armed by assets/rr-gate.js and removed
   again by its own watchdog unless the kit claims it. `.rise`
   is still honoured there as an alias, so the markup did not
   have to change.

   Reveals are still kept off rows inside the hairline grids
   (.steps, .spec, .qa): those draw their rules by showing a 1px
   line colour through the grid gap, so a shifted row turns into
   a light slab rather than into nothing.

   The one rule below is the fail-safe, and it is why the gate
   sets data-rr-gate="off". Dropping .rr-js alone hands the
   hidden blocks back to a 420ms opacity transition, and a
   transition has to be ticked to finish: with the kit 404ing,
   seven blocks more than 4500px down the page were measured
   still sitting at opacity 0 five seconds in. This snaps them,
   with the transition switched off, so nothing has to be ticked
   and nothing depends on an element ever coming near the
   viewport.                                                    */
html[data-rr-gate='off'] .rise,
html[data-rr-gate='off'] [data-rr-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

@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;
  }
}