/* hourly.css: /chauffeur-by-the-hour/ (P3, redesign 02/11/2026, "Arrival").
   Stage: the hours chooser is a compact card under the lede (three hours side by side, about 190px tall) so the
   stage fits a 1440 x 900 window; under 1280 it sits in the flow after the booking card (never hidden).
   Then: the example day on graphite (a drawn timeline beside a night route map), what is included on celadon (a
   drifting photo beside a composed feature grid), guides and questions on porcelain. */

/* ---------------------------------------------------------------- the hours chooser (stage aside) */
.aj-site .hr-pick { padding: 18px 18px 16px; }
.hr-pick-title { margin: 0 0 12px; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--text); }
.hp-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-1); overflow: clip; }
.aj-site .hp-row {
  position: relative; isolation: isolate; display: grid; align-content: start; justify-items: start; gap: 2px;
  min-height: 44px; padding: 12px 14px 14px; text-align: left; cursor: pointer;
  background: transparent; color: var(--text); border: 0; border-left: 1px solid var(--line); border-radius: 0;
  transition: color var(--dur-hover) var(--ease-out);
}
.aj-site .hp-row:first-child { border-left: 0; }
/* the chosen hours: a 1px ink outline on the sunken grey, like the card's Arriving and Departing (owner rule: no ink
   fills on day); the grey rises from the bottom on hover like the buttons */
.hp-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sunken); transform: translateY(101%); transition: transform var(--dur-hover) var(--ease-out); }
.hp-row::after { content: ""; position: absolute; inset: 0; z-index: 1; box-shadow: inset 0 0 0 1px var(--ink); opacity: 0; pointer-events: none; transition: opacity var(--dur-hover) var(--ease-out); }
.hp-row:hover::before, .hp-row[aria-pressed="true"]::before { transform: none; }
.hp-row[aria-pressed="true"]::after { opacity: 1; }
.aj-site .hp-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
.hp-h { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.hp-what { font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--text-2); transition: color var(--dur-hover) var(--ease-out); }
.hp-p { margin-top: 10px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hr-pick-note { margin: 10px 0 0; font-size: 13px; font-weight: 500; color: var(--text-2); }
@media (max-width: 599px) { .aj-site .hp-row { padding: 12px 12px 14px; } .hp-h { font-size: 15px; white-space: nowrap; } .hp-p { margin-top: 8px; } }
@media (prefers-reduced-motion: reduce) { .hp-row::before, .hp-row::after, .aj-site .hp-row, .hp-what { transition: none; } }

/* ---------------------------------------------------------------- the example day: a drawn timeline beside the map */
.hr-day-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(48px, 3rem + 2vw, 80px); }
.hr-day-words { display: grid; align-content: start; min-width: 0; }
.hr-day-lede { margin-top: clamp(20px, 1rem + 1vw, 32px); max-width: 44ch; font-size: var(--fs-lede); line-height: 1.5; color: var(--text-2); }

/* the day: stop numbers ride one drawn line, the time set large, the place beside it */
.aj-site .hr-days { margin-top: clamp(40px, 2rem + 2vw, 72px); }
.aj-site .hr-days::before { left: 17px; top: 48px; bottom: 48px; background: var(--mist-2); }
.aj-site .hr-days li { grid-template-columns: 36px minmax(88px, 7rem) minmax(0, 1fr); gap: 20px; min-height: 0; padding: 22px 0; }
.aj-site .hr-days .day-n { width: 36px; height: 36px; font-size: var(--fs-meta); border-color: var(--mist-2); color: var(--text); background: var(--bg); }
.aj-site .hr-days li:first-child .day-n, .aj-site .hr-days li:last-child .day-n { background: var(--mist); border-color: var(--mist); color: var(--ink); }
.aj-site .hr-days .day-t { font-size: clamp(1.375rem, 1.1rem + 0.9vw, 2rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.aj-site .hr-days .day-p { font-size: 1.0625rem; line-height: 1.4; color: var(--text-2); }
.aj-site .hr-days li:first-child .day-p, .aj-site .hr-days li:last-child .day-p { color: var(--text); }
/* phones: the time over the place, both beside the stop number */
@media (max-width: 599px) {
  .aj-site .hr-days li { grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "n t" "n p"; row-gap: 6px; align-items: start; padding: 18px 0; }
  .aj-site .hr-days .day-n { grid-area: n; }
  .aj-site .hr-days .day-t { grid-area: t; padding-top: 6px; }
  .aj-site .hr-days .day-p { grid-area: p; }
  .aj-site .hr-days::before { top: 36px; bottom: 36px; }
}

/* the route on the island, drawn at night: pine sea, graphite land, a mist route, mist pins */
.hr-map-wrap { min-width: 0; align-self: start; }
.aj-site .hr-map {
  --map-sea: var(--pine); --map-land: var(--green-raised); --map-coast: var(--hair-d); --map-xway: var(--hair-d);
  width: 100%; box-shadow: inset 0 0 0 1px var(--hair-d);
}
.aj-site .hr-map .rm-route { stroke: var(--mist); }
.aj-site .hr-map .rm-pin { width: 36px; height: 36px; margin: -18px 0 0 -18px; background: var(--green); color: var(--mist); border-color: var(--mist); box-shadow: none; }
.aj-site .hr-map .rm-pin.is-start { background: var(--mist); color: var(--ink); }
@media (max-width: 1023px) { .aj-site .hr-map { aspect-ratio: 1.15 !important; } }
@media (min-width: 1024px) {
  .hr-day-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  .hr-day-words { grid-column: 1 / span 5; }
  .hr-map-wrap { grid-column: 7 / -1; margin-top: clamp(8px, 4vw, 72px); }
}

/* ---------------------------------------------------------------- what the hours include: photo beside the features */
.hr-incl-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(40px, 2rem + 2vw, 72px); }
.hr-incl-photo { aspect-ratio: 3 / 2; min-width: 0; background: var(--green); }
.aj-site .hr-incl-photo > .photo { border-radius: 0; }
.aj-site .hr-feats .fg-item:first-child .fg-t { font-size: var(--fs-statement); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
.aj-site .hr-feats .fg-item:first-child .fg-v { font-size: var(--fs-lede); }
.aj-site .hr-feats .fg-item:first-child { padding-bottom: clamp(8px, 1vw, 16px); }
@media (min-width: 1024px) {
  .hr-incl-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  .hr-incl-photo { grid-column: 1 / span 6; position: sticky; top: calc(var(--frame-top, 96px) + 32px); }
  .hr-feats { grid-column: 7 / -1; }
  .aj-site .hr-feats > .fg-item.fg-w6:nth-child(n) { grid-column: span 6; }
  .aj-site .hr-feats > .fg-item.fg-w12:nth-child(n) { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- guides and questions */
/* the closing chapter on porcelain, opened like every other section: a hairline across the top, the two headings set
   at H2 size with their links under them, the feature guide at statement size, the other guides as titled rows */
.hr-guides .guides-grid { row-gap: clamp(64px, 3rem + 3vw, 112px); }
.hr-guides .guides-grid > * { padding-top: clamp(24px, 1rem + 1vw, 40px); border-top: 1px solid var(--line); }
.aj-site .hr-guides :is(.guides-head, .faq-col-head) { display: grid; justify-items: start; gap: 14px; margin-bottom: clamp(32px, 1.5rem + 2vw, 64px); }
.aj-site .hr-guides :is(.guides-head, .faq-col-head) > .t-h3 { margin: 0; font-size: var(--fs-h2); font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; }
.aj-site .hr-guides .guide-row.is-feature { padding: clamp(32px, 1.5rem + 1vw, 48px) 0; }
.aj-site .hr-guides .guide-row.is-feature .guide-title { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); letter-spacing: -0.03em; line-height: 1.08; max-width: 18ch; }
.aj-site .hr-guides .guide-row:not(.is-feature) .guide-title { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.015em; }
@media (min-width: 1024px) {
  .hr-guides .guides-grid > :first-child { grid-column: 1 / span 6; }
  .hr-guides .guides-grid > :nth-child(2) { grid-column: 8 / -1; }
}
/* the drift needs more room than the default 115% frame: 130% tall, so the edges never show */
.hr-incl-photo > img[data-speed] { top: -15%; height: 130%; }

/* ============================== the stage on phones and tablets ============================== */
/* under 1024 the H1 and the lede sit in the middle of the photograph, where the stage's own scrim is clear; over this
   page's bright photograph they lost contrast. A one-colour pine wash that deepens towards the sheet keeps them on pine. */
@media (max-width: 1023px) {
  .aj-site.page-hourly .mh.has-booking .mh-scrim {
    background: linear-gradient(to bottom, var(--scrim-t) 0, color-mix(in srgb, var(--pine) 50%, transparent) 28%, color-mix(in srgb, var(--pine) 70%, transparent) 60%, var(--scrim-b) 82%, var(--pine) 100%);
  }
}