/* Wine route pages: /regions/{region}/routes and .../routes/{slug}
 *
 * Spec: docs/specs/2026-08-10-wine-route-pages-preflight.md
 * Design: Claude Design 8647d98a, "Route - Strada Chiantigiana SR 222" and
 * "Routes Index - Tuscany", with the annex as the absent-data contract.
 *
 * Page-scoped with rt-. The map plate itself is the shared atlas skin from
 * component/atlas-plate.css; only the route line and the numbered stop marks
 * are added here, because only route mode draws them.
 */

/* ── The drive: sticky map beside the stop list ─────────────────────── */
.rt-drive {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}
.rt-drive > * { min-width: 0; }

@media (min-width: 1024px) {
    .rt-drive {
        grid-template-columns: 460px minmax(0, 1fr);
        gap: 3.5rem;
    }
    .rt-drive__map { position: sticky; top: 76px; }
}

.rt-map-card {
    position: relative;
    background: var(--color-surface-lowest, #fff);
    border-radius: 12px;
    box-shadow: 0 8px 24px -12px rgba(86, 19, 113, 0.22);
    padding: 1.25rem;
}

.rt-map-canvas { position: relative; }

/* ── Map chrome: layers, and the road-or-region view ────────────────────
 * Two controls above and over the plate. The layer buttons are the design's
 * pill row; the view chip is the denomination plate's zoom control, which
 * answers the same "where is this" question and so wears the same clothes.
 */
.rt-layers { display: flex; align-items: center; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.875rem; }
.rt-layers__label {
    font: 700 10px/1 Inter, sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-on-surface-variant);
    margin-right: 0.375rem;
}
.rt-layerbtn {
    font: 600 11px/1 Inter, sans-serif;
    letter-spacing: 0.04em;
    padding: 8px 13px;
    border-radius: 999px;
    border: 1px solid var(--color-outline-variant);
    background: var(--color-surface-lowest, #fff);
    color: var(--color-on-surface-variant);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.rt-layerbtn:hover { border-color: rgba(86, 19, 113, 0.45); }
.rt-layerbtn[aria-pressed="true"] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.rt-layerbtn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* The zones layer. Off by default; the label is the zone's name, set in the
   plate's own small caps so it reads as cartography rather than as a chip. */
.rt-atlas-zone-label {
    font: 700 8.5px/1 Inter, sans-serif;
    letter-spacing: 0.14em;
    fill: #5e243c;
    paint-order: stroke;
    stroke: rgba(253, 251, 246, 0.85);
    stroke-width: 3px;
    stroke-linejoin: round;
    pointer-events: none;
}

/* Bottom right, which is the only free corner: the compass is top right, the
   scale bar bottom left, and the region's name runs across the top. */
.rt-map-zoom {
    position: absolute;
    right: 0.625rem;
    bottom: 0.625rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 32px;
    padding: 0 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(86, 19, 113, 0.28);
    background: rgba(253, 251, 246, 0.94);
    color: var(--color-primary);
    font: 700 11px/1 Inter, sans-serif;
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow: 0 4px 12px -6px rgba(86, 19, 113, 0.45);
}
.rt-map-zoom:hover { border-color: var(--color-primary); }
.rt-map-zoom:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.rt-map-zoom[hidden] { display: none; }
.rt-map-zoom-short { display: none; }
/* On a phone-width plate the long label reaches the scale bar, and even the
   short one sits on the bar's "KM". Shorten it, and lift it clear. */
@media (max-width: 420px) {
    .rt-map-zoom-long { display: none; }
    .rt-map-zoom-short { display: inline; }
    .rt-map-zoom { bottom: 2.25rem; }
}

/* The estate card a pin opens: the shared atlas popover, narrowed to the
   plate's column so it never overhangs the sticky map card. */
.iw-atlas .wd-atlas-popover.rt-estatepop { max-width: 260px; }

/* Straight-connector honesty caption plus the key. */
.rt-map-legend {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.875rem;
    padding-left: 0.25rem;
    font-size: 10.5px;
    color: var(--color-on-surface-variant);
}
.rt-map-legend__swatch { width: 1rem; height: 3px; border-radius: 2px; background: var(--color-primary); }
.rt-map-legend__swatch[data-day="2"],
.rt-map-legend__swatch[data-day="4"],
.rt-map-legend__swatch[data-day="6"] { background: var(--rt-day-2, #b86b4a); }
.rt-map-legend__stop {
    width: 0.75rem; height: 0.75rem; border-radius: 999px;
    background: var(--color-surface-lowest, #fff);
    box-shadow: inset 0 0 0 2.5px var(--color-primary);
}
/* ── The route line and the numbered stops (route mode only) ────────── */
.rt-atlas-line__casing {
    fill: none;
    stroke: #fcf9f4;
    stroke-width: 7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.rt-atlas-line__ink {
    fill: none;
    stroke: var(--color-primary, #561371);
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rt-atlas-stop { cursor: pointer; outline: none; }
.rt-atlas-stop__halo { fill: var(--color-primary, #561371); opacity: 0; transition: opacity 0.25s ease; }
.rt-atlas-stop__ring { fill: #fcf9f4; stroke: var(--color-primary, #561371); stroke-width: 3; }
.rt-atlas-stop.is-start .rt-atlas-stop__ring { fill: var(--color-primary, #561371); stroke: none; }
.rt-atlas-stop__n {
    font: 700 10px/1 Inter, sans-serif;
    fill: var(--color-primary, #561371);
    stroke: #fcf9f4;
    stroke-width: 1.35px;
    stroke-linejoin: round;
    paint-order: stroke fill;
    pointer-events: none;
}
.rt-atlas-stop.is-start .rt-atlas-stop__n {
    fill: #fff;
    stroke: var(--color-primary, #561371);
}
.rt-atlas-stop__label {
    font: 600 10.5px/1 Inter, sans-serif;
    fill: #3f3830;
    pointer-events: none;
}
.rt-atlas-stop:focus-visible { outline: none; }
.rt-atlas-stop:focus-visible .rt-atlas-stop__halo { opacity: 0.22; }

/* Scroll-sync: the current stop fills, the rest recede. Only applied once
 * the reader has actually scrolled into the drive, so the default state is
 * the whole route rather than an arbitrary highlight. */
.synced .rt-atlas-stop__ring,
.synced .rt-atlas-stop__label { opacity: 0.5; transition: opacity 0.25s ease; }
.synced .rt-atlas-stop.is-current .rt-atlas-stop__ring,
.synced .rt-atlas-stop.is-current .rt-atlas-stop__label { opacity: 1; }
.synced .rt-atlas-stop.is-current .rt-atlas-stop__halo { opacity: 0.16; }

/* The two ways to take the route away from the page are one action group.
   Shared geometry keeps the generated Maps link and static print button on
   the same baseline, while colour still distinguishes external handoff from
   the local print action. */
.rt-map-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.625rem;
    margin-top: 1rem;
}
.rt-map-action {
    display: inline-flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.625rem 1.25rem;
    font: 700 13px/1.2 var(--font-label, Manrope, sans-serif);
    text-align: center;
    text-decoration: none;
}
.rt-map-action--primary {
    color: var(--color-on-primary);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-container));
}
.rt-map-action--secondary {
    color: var(--color-primary);
    border-color: var(--color-outline-variant);
    background: var(--color-surface-lowest);
}
.rt-map-action__icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.rt-map-action__icon svg { width: 18px; height: 18px; stroke: currentColor; }
@media (min-width: 640px) {
    .rt-map-actions { flex-direction: row; }
    .rt-map-action { width: auto; }
}

@keyframes rt-pulse {
    0%   { opacity: 0; }
    35%  { opacity: 0.3; }
    100% { opacity: 0; }
}
.rt-atlas-stop.is-pulsing .rt-atlas-stop__halo { animation: rt-pulse 0.85s ease-out; }

/* ── Stop sections and the leg chip between them ────────────────────── */
.rt-stop { scroll-margin-top: 6.5rem; }
.rt-stop.is-current .rt-stop__name { color: var(--color-primary); }

.rt-stop__num {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font: 700 13px/1 Inter, sans-serif;
    background: var(--color-surface-lowest, #fff);
    color: var(--color-primary);
    box-shadow: inset 0 0 0 3px var(--color-primary);
}
.rt-stop:first-of-type .rt-stop__num {
    background: var(--color-primary);
    color: #fff;
    box-shadow: none;
}
/* The finish pennant, planted on the last stop's number. Positioned rather
   than inline, so it does not push the digit off centre. */
.rt-stop__num--finish { position: relative; }
.rt-stop__pennant {
    position: absolute;
    top: -0.5rem;
    right: -0.625rem;
    color: var(--color-primary);
}
.rt-stop[data-day="2"] .rt-stop__pennant,
.rt-stop[data-day="4"] .rt-stop__pennant,
.rt-stop[data-day="6"] .rt-stop__pennant { color: var(--rt-day-2-ink, #8a4527); }

/* Everything under a stop's heading hangs off the number's column. On a phone
   it does not: 56px of the 335 available is a fifth of the screen given to an
   indent, and the mobile design runs the chips and cards full width. */
.rt-stop__body { padding-left: 0; }
@media (min-width: 768px) { .rt-stop__body { padding-left: 3.5rem; } }
.rt-stop__head {
    font: 700 10px/1 Inter, sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-on-surface-variant);
    margin: 1.25rem 0 0.5rem;
}
.rt-stop__chips { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; }

/* What to taste. One line per wine, because the note beside it is the whole
   point: a zone name alone tells a reader nothing they could not read off the
   bottle when they get there. */
.rt-taste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.rt-taste__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.rt-taste__label {
    display: inline-flex;
    align-items: center;
    font: 600 12px/1 Inter, sans-serif;
    color: var(--color-on-surface);
    background: var(--color-surface-c, rgba(86, 19, 113, 0.06));
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
}
/* The shared chip clips a name at 22ch, which is right in a card and wrong
   here: this row has the width, and "Vin Santo del Chianti Classico" clipped
   to "Vin Santo del Chianti" names a different appellation. */
.rt-taste__row .iw-denom-name { max-width: none; }
.rt-taste__note {
    font-family: var(--font-display, "Noto Serif", Georgia, serif);
    font-style: italic;
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-on-surface-variant);
}

/* The ZTL warning on a stop. The darker amber clears AA at this small label
   size against the translucent parchment background. */
.rt-stop__warn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.625rem;
    font: 700 10.5px/1 Inter, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #76570a;
    background: rgba(118, 87, 10, 0.1);
    border-radius: 999px;
    padding: 0.4rem 0.7rem;
    text-decoration: none;
}
.rt-stop__warn:hover { background: rgba(118, 87, 10, 0.18); }

/* Where to eat. One table, not a list: the road's own lunch, named. */
.rt-eat {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    background: var(--color-surface-lowest, #fff);
    border-radius: 12px;
    box-shadow: 0 2px 10px -4px rgba(86, 19, 113, 0.18);
    padding: 1rem 1.125rem;
    max-width: 44rem;
}
.rt-eat__mark { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }
.rt-eat__dish {
    font-family: var(--font-display, "Noto Serif", Georgia, serif);
    font-weight: 600;
    font-size: 15.5px;
    line-height: 1.3;
    color: var(--color-on-surface);
    margin: 0;
}
.rt-eat__where {
    font: 400 13.5px/1.5 Inter, sans-serif;
    color: var(--color-on-surface-variant);
    margin: 0.25rem 0 0;
}
.rt-eat__where strong { font-weight: 700; color: var(--color-on-surface); }
.rt-eat__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0.5rem 0 0;
}
.rt-eat__links a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font: 700 12px/1.3 Inter, sans-serif;
    color: var(--color-primary);
    text-decoration: none;
}
.rt-eat__links a:hover { text-decoration: underline; }
.rt-stop__more {
    font: 400 12px/1.5 Inter, sans-serif;
    color: var(--color-on-surface-variant);
    margin: 0.625rem 0 0;
}

/* The estate cards inside a stop. Two across from the tablet width up, which
   is the design's grid, and one per row on a phone where two would be 150px
   each. */
.rt-stop__estates {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}
@media (min-width: 640px) {
    .rt-stop__estates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The estate rails at the foot of the page. The section already carries the
   page gutter and the vertical rhythm, so the component's own container
   padding would indent the cards past their own heading. */
.rt-estaterail {
    --wcc-container-max-width: none;
    --wcc-container-padding: 0;
    --wcc-section-padding: 0;
}

.rt-stopestate {
    display: flex;
    flex-direction: column;
    background: var(--color-surface-lowest, #fff);
    border-radius: 12px;
    box-shadow: 0 2px 10px -4px rgba(86, 19, 113, 0.18);
    padding: 1.25rem;
}
.rt-stopestate__where {
    font: 700 10px/1.3 Inter, sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-on-surface-variant);
    margin-bottom: 0.375rem;
}
.rt-stopestate__name {
    font-family: var(--font-display, "Noto Serif", Georgia, serif);
    font-size: 17px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 0.75rem;
}
.rt-stopestate__lines {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(209, 194, 209, 0.4);
}
.rt-stopestate__line {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font: 400 12px/1.4 Inter, sans-serif;
    color: var(--color-on-surface);
    margin: 0;
}
.rt-stopestate__line img { flex-shrink: 0; }
.rt-stopestate__price {
    font-family: var(--font-display, "Noto Serif", Georgia, serif);
    font-variant-numeric: oldstyle-nums;
    font-size: 13.5px;
}
.rt-stopestate__cta {
    margin-top: 0.75rem;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.375rem;
    font: 600 13px/1 var(--font-body, Manrope, sans-serif);
    color: var(--color-primary);
    text-decoration: none;
}
.rt-stopestate__cta:hover { text-decoration: underline; text-underline-offset: 3px; }
/* An estate with no offer has no lines block, so the link would sit tight
   under the name. */
.rt-stopestate__name + .rt-stopestate__cta { margin-top: 0; }

/* Bottles belong to the named cellar immediately above them. The shared
   carousel keeps its own cards and controls; only its page-level section
   gutters are neutralised inside a stop, where the stop body already owns
   the measure and indentation. */
.rt-stopbottles { margin-top: 1.25rem; }
.rt-stopbottles__intro {
    margin: -0.125rem 0 0.75rem;
    font: 400 12.5px/1.5 var(--font-body, Manrope, sans-serif);
    color: var(--color-on-surface-variant);
}
.rt-stopbottles > section {
    max-width: none;
    margin: 0;
    padding: 0;
}
.rt-stopbottles [data-carousel] { padding: 0.25rem 0.25rem 0.75rem; }
.rt-stopbottles [data-carousel-prev] { left: 0.5rem; }
.rt-stopbottles [data-carousel-next] { right: 0.5rem; }
/* A stop is an editorial recommendation, not a shopping grid. The card
   remains one large link, while commerce metadata stays on its bottle page. */
.rt-stopbottles .wine-card-retailers,
.rt-stopbottles .wine-card-retailers-mobile,
.rt-stopbottles .wine-card-discount,
.rt-stopbottles .wine-card-body > .mt-auto { display: none; }
.rt-stopbottles .wine-card-tags { margin-bottom: 0; }

/* The leg chip hangs on the dashed spine between two stop sections. It is
 * the page's most repeated element and its most useful datum. */
.rt-leg { display: flex; align-items: center; gap: 1rem; margin: 0.5rem 0; }
.rt-leg__spine {
    width: 2.25rem;
    display: flex;
    justify-content: center;
    align-self: stretch;
    padding: 0.25rem 0;
}
.rt-leg__spine span {
    border-left: 1px dashed var(--color-outline-variant);
    min-height: 40px;
}
.rt-leg__chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font: 700 12.5px/1 Inter, sans-serif;
    letter-spacing: 0.05em;
    color: var(--color-on-surface);
    background: var(--color-surface-lowest, #fff);
    border: 1px solid var(--color-outline-variant);
    border-radius: 999px;
    padding: 10px 18px 10px 13px;
    cursor: pointer;
    box-shadow: 0 2px 10px -4px rgba(86, 19, 113, 0.18);
    transition: border-color 0.15s ease;
    font-variant-numeric: tabular-nums;
}
.rt-leg__chip:hover { border-color: rgba(86, 19, 113, 0.5); }
/* Rotated to the leg's real bearing by an inline style the view writes. */
.rt-leg__heading { color: var(--color-primary); flex-shrink: 0; }
.rt-leg--ferry .rt-leg__heading,
.rt-leg[data-day="2"] .rt-leg__heading,
.rt-leg[data-day="4"] .rt-leg__heading,
.rt-leg[data-day="6"] .rt-leg__heading { color: var(--rt-day-2-ink, #8a4527); }

/* A crossing is not a drive: dashed enclosure, boat glyph, "crossing"
 * instead of a distance. Borrows the "not the road itself" grammar. */
.rt-leg--ferry .rt-leg__chip {
    border-style: dashed;
    border-color: rgba(184, 107, 74, 0.7);
    color: #8a4527;
}

/* ── Stat strip ─────────────────────────────────────────────────────── */
.rt-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-top: 1px solid rgba(209, 194, 209, 0.5);
    border-bottom: 1px solid rgba(209, 194, 209, 0.5);
    margin-top: 2.25rem;
}
.rt-stat { display: flex; align-items: center; gap: 0.75rem; padding: 1.25rem 1.75rem; }
.rt-stat:first-child { padding-left: 0; }
.rt-stat + .rt-stat { border-left: 1px solid rgba(209, 194, 209, 0.5); }
/* Painted icon-system marks, so they carry their own colour and need a size
   that lets the drawing read. 36px sits level with the figure and its label,
   which together stand about 44px tall. */
.rt-stat__mark { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; }
/* On a phone five figures across is 60px each. Two per row, which is the
   mobile design's grid, and the borders become a grid rather than a rule. */
@media (max-width: 639.98px) {
    .rt-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rt-stat { padding: 0.875rem 0.75rem; gap: 0.5rem; }
    .rt-stat:nth-child(odd) { padding-left: 0; }
    .rt-stat + .rt-stat { border-left: 0; }
    .rt-stat:nth-child(even) { border-left: 1px solid rgba(209, 194, 209, 0.5); }
    .rt-stat:nth-child(n + 3) { border-top: 1px solid rgba(209, 194, 209, 0.5); }
    .rt-stat__mark { width: 28px; height: 28px; }
    .rt-stat__n { font-size: 22px; }
    .rt-stat__label { font-size: 9px; letter-spacing: 0.12em; }
}
.rt-stat__n {
    font-family: var(--font-display, "Noto Serif", Georgia, serif);
    font-variant-numeric: oldstyle-nums;
    font-size: 28px;
    line-height: 1;
    font-weight: 700;
    color: var(--color-primary);
}
.rt-stat__label {
    font: 600 10px/1.2 Inter, sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-on-surface-variant);
    margin-top: 0.375rem;
}

/* ── Practicalities ─────────────────────────────────────────────────── */
/* The shared card carousel owns the phone rail and desktop grid. Keep its
   intrinsic width inside the section so only the track scrolls on a phone. */
.rt-prac { min-width: 0; }
.rt-prac > .iw-card-carousel { max-width: none; }
.rt-prac .iw-card-carousel-track { align-items: start; }
/* Preserve the earlier one-column tablet band before the two-column reading
   layout begins at 900px. */
@media (min-width: 768px) and (max-width: 899.98px) {
    .rt-prac .iw-card-carousel-track { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 900px) {
    .rt-prac .iw-card-carousel-track { gap: 1.5rem; }
}
.rt-prac__card {
    background: var(--color-surface-lowest, #fff);
    border-radius: 12px;
    box-shadow: 0 2px 10px -4px rgba(86, 19, 113, 0.18);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}
@media (min-width: 900px) { .rt-prac__card { padding: 1.75rem 2rem; } }
.rt-prac__head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-width: 0;
}
.rt-prac__icon {
    display: block;
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    object-fit: contain;
}
.rt-prac__head-copy { min-width: 0; padding-top: 0.25rem; }
@media (max-width: 419.98px) {
    .rt-prac__icon { width: 56px; height: 56px; flex-basis: 56px; }
}
/* And a hard measure for the widest screens, where half of a 2000px page is
   still too long a line to track back from. */
.rt-prac__body { max-width: 68ch; }

/* An odd last card would leave a hole beside it. It takes the whole row
   instead and turns sideways: icon and heading left, paragraph right, at the
   same measure as the cards above. */
@media (min-width: 900px) {
    .rt-prac .iw-card-carousel-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
    /* Sideways only when there is a headline to anchor the left column. A
       card the skill left untitled stays stacked and simply takes the row. */
    .rt-prac .iw-card-carousel-item:last-child:nth-child(odd) .rt-prac__card:has(h3) {
        display: grid;
        grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
        column-gap: 2.5rem;
        align-items: start;
    }
    .rt-prac .iw-card-carousel-item:last-child:nth-child(odd) .rt-prac__card:has(h3) > .rt-prac__body {
        grid-column: 2;
        grid-row: 1;
    }
}

/* Shared dot markup, in the route palette. The 24px control holds an 8px
   painted dot so the target remains comfortably tappable. */
.rt-prac .iw-carousel-dots,
.rt-more .iw-carousel-dots { display: none; }
.rt-prac .iw-carousel-dot,
.rt-more .iw-carousel-dot {
    position: relative;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.rt-prac .iw-carousel-dot::before,
.rt-more .iw-carousel-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-primary) 25%, transparent);
    transition: background 0.15s ease, transform 0.15s ease;
}
.rt-prac .iw-carousel-dot.is-active::before,
.rt-more .iw-carousel-dot.is-active::before {
    background: var(--color-primary);
    transform: scale(1.2);
}
.rt-prac .iw-carousel-dot:focus-visible,
.rt-more .iw-carousel-dot:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    border-radius: 50%;
}
@media (max-width: 767.98px) {
    .rt-prac .iw-carousel-dots,
    .rt-more .iw-carousel-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 0.25rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .rt-prac .iw-card-carousel-track,
    .rt-more .iw-card-carousel-track { scroll-behavior: auto; }
    .rt-prac .iw-carousel-dot::before,
    .rt-more .iw-carousel-dot::before { transition: none; }
}

/* The deck's own layout belongs to common/card-carousel: the desktop grid,
   its column count and gaps come from the parameters the view passes, and the
   phone rail comes from the component. Two across on desktop, as the design
   has them, is desktop_columns => 2. The component already uses
   minmax(0, 1fr) rather than 1fr, which matters here: a grid track's default
   minimum is auto, so the carousel inside a card would otherwise size its
   column to its full scroll width and push the neighbour off the page. */

/* Phone: one road at a time.
 *
 * A route card carries the whole drive, so four of them stacked is a very
 * long scroll past three roads the reader has already ruled out. The section
 * is rendered through common/card-carousel, so the deck itself, the grid at
 * desktop, the snapping flex rail below 768 and the dots all come from the
 * shared component. What is left here is what is true of THESE cards.
 *
 * The card takes the whole width the section has. There is no sliver of the
 * next one: a route card is dense, and the pixels are worth more spent on the
 * road in front of the reader than on 5% of the one behind it. The arrows and
 * the dots say that there are other roads, which is all the sliver was for.
 *
 * The estate rail inside a card is itself a horizontal scroller, so a swipe
 * that starts on it moves the estates and not the deck. overscroll-behavior
 * keeps that honest at both ends, so finishing the estates does not throw the
 * reader onto the next road, and finishing the deck does not hand the gesture
 * to the browser's back swipe.
 *
 * Each card keeps its own height. The shared component stretches items to the
 * tallest, and these roads run from four stops to seven, so the spare height
 * had to go somewhere: pinned as the card design has it, into a 150px hole
 * between the stops and the estates; released, into 170px of blank card below
 * the buttons. Both read as something failing to load. Stretch is what makes
 * two cards side by side line up, and one card at a time has nothing to line
 * up with.
 */
@media (max-width: 767.98px) {
    .rt-cards-deck .rt-cards { overscroll-behavior-x: contain; }
    /* Undo the component's equal-height stretch for this deck only. */
    .rt-cards-deck .iw-card-carousel-item { align-self: flex-start; }
    .rt-cards-deck .iw-card-carousel-item > .rt-card { height: auto; }

    /* The arrows sit on the route line.
     *
     * Every carousel root on the site puts its phone arrows at the middle of
     * the track, and on a normal card that is the middle of the thing you are
     * looking at. This deck is a thousand pixels tall, so the middle put them
     * level with the estate rail, which is both hard to find and the one
     * place an arrow should not be: the rail is a scroller too.
     *
     * 20rem lands the pair on the drawn route: the spine of stops. The four
     * roads run from four stops to seven, so their spines start and end at
     * different heights, but every one of them covers 262 to 409 from the
     * deck's top, and a 32px button at 20rem sits at 320 to 352, inside that
     * band on every card. The buttons cross only the card's padding, never
     * its text, since two thirds of each one sits outside the deck. */
    .rt-cards-deck > [data-carousel-prev],
    .rt-cards-deck > [data-carousel-next] {
        top: 20rem;
        transform: none;
        /* A white disc on a white card, over a cream page, with only the
           component's soft drop shadow to hold it: on a phone screen in
           daylight the arrows were not there at all. The ring is what makes
           them a control. */
        border: 1px solid color-mix(in srgb, var(--color-primary) 38%, transparent);
        box-shadow: 0 4px 12px -6px rgba(86, 19, 113, 0.45);
    }

    .rt-card .wcc-rail { overscroll-behavior-x: contain; }
    /* The estate rail's own arrows come off inside the deck. One of them sat
       on the card's right edge, a round chevron pinned over the road you were
       reading, and there was no reading of it that told you whether it moved
       the estates or the deck. Swipe is the affordance on touch and the
       rail's own edge fade still says there is more: the same call
       article-winery-row makes for the same component on a phone. */
    .rt-card .wcc-nav-btn { display: none; }
    .rt-cards:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }
}

/* Desktop: two across from 900, as the design has them, and a single column
   between 768 and 899. The shared component's grid is N columns from 768 up,
   so the middle band is set back to one here. */
@media (min-width: 768px) and (max-width: 899.98px) {
    .rt-cards-deck .rt-cards { grid-template-columns: minmax(0, 1fr); }
}

/* The dots. Their arrows are the shared ones: partials/tw-head.php gives
   every carousel root the same 32px edge buttons on a phone, half outside the
   deck's own edge, so these look and sit exactly like every other carousel's.
   The dots keep the site-wide 24x24 button with an 8px dot painted inside it:
   WCAG 2.5.8 measures the control's own box, not the ink in it. */
.rt-cards-dots { display: none; }
@media (max-width: 767.98px) {
    .rt-cards-dots { display: flex; justify-content: center; gap: 8px; margin-top: 0.25rem; }
}
.rt-cards-dots .iw-carousel-dot {
    position: relative;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.rt-cards-dots .iw-carousel-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-primary) 25%, transparent);
    transition: background 0.15s ease, transform 0.15s ease;
}
.rt-cards-dots .iw-carousel-dot.is-active::before {
    background: var(--color-primary);
    transform: scale(1.2);
}
.rt-cards-dots .iw-carousel-dot:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) {
    .rt-cards { scroll-behavior: auto; }
    .rt-cards-dots .iw-carousel-dot::before { transition: none; }
}
.rt-card {
    background: var(--color-surface-lowest, #fff);
    border-radius: 16px;
    box-shadow: 0 2px 10px -4px rgba(86, 19, 113, 0.18);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}
.rt-card__spine { list-style: none; margin: 0 0 1.25rem; padding: 0; position: relative; }
.rt-card__spine li {
    display: grid;
    grid-template-columns: 15px 22px 1fr;
    align-items: center;
    min-height: 34px;
}
.rt-card__spine-n { font: 700 9.5px/1 Inter, sans-serif; text-align: right; padding-right: 0.25rem; color: #9d5bb6; }
.rt-card__spine-dot { display: flex; align-items: center; justify-content: center; }
.rt-card__spine-dot i {
    width: 7px; height: 7px; border-radius: 999px;
    background: var(--color-primary); display: block;
}
.rt-card__spine li:first-child .rt-card__spine-dot i { width: 10px; height: 10px; }

/* Routes still being worked on: named once, unlinked, stated as a bar to
 * meet rather than a promise. Never "coming soon". */
.rt-pending {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--color-on-surface-variant);
    margin-top: 1.5rem;
}

/* ── Print: the glovebox sheet ──────────────────────────────────────── */
@media print {
    .rt-no-print,
    /* Paper does not scroll, so the scroll furniture is only ink. */
    .rt-compare-edge,
    .rt-compare-nudge,
    .rt-cards-dots { display: none !important; }
    /* And a deck prints as its first slide unless it is unrolled first. The
       cards sit inside the carousel component's own item wrappers. */
    .rt-cards { display: block !important; overflow: visible; }
    .rt-cards > .iw-card-carousel-item { max-width: none !important; width: auto !important; }
    .rt-cards .rt-card { margin-bottom: 1rem; break-inside: avoid; }
    .rt-drive { display: block; }
    .rt-drive__map { position: static; }
    .rt-stop { break-inside: avoid; }
    .rt-leg__chip { box-shadow: none; }
}

/* ── Index: the decision table ──────────────────────────────────────────
 * Values taken from the design file rather than approximated. The wrapper
 * carries the house ambient shadow (a purple-tinted 0 2px 10px -4px), not a
 * generic grey one; the project's own scale has no equivalent at this
 * tightness, so it is spelled out.
 */
.rt-compare-card {
    position: relative;
    background: var(--color-surface-lowest, #fff);
    border-radius: 0.75rem;
    box-shadow: 0 2px 10px -4px rgba(86, 19, 113, 0.18);
    overflow: hidden;
}
.rt-compare-wrap { overflow-x: auto; }
.rt-compare { width: 100%; border-collapse: collapse; min-width: 900px; }

/* The sideways cut, said out loud.
 *
 * Eight columns do not fit a phone, so four of them sit off the right edge
 * and nothing admitted it: the crop landed exactly on a column boundary, the
 * card's rounded corner sat over the join, and a phone's overlay scrollbar
 * stays invisible until the reader already knows to scroll. Three signals
 * now carry it, all keyed off the same state route-index.js writes on the
 * card: shading at whichever edge still has table behind it, a chevron that
 * pages the table for anyone who would rather press than swipe, and (below,
 * in the media query) a column peeking through the cut.
 */
.rt-compare-edge {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 54px;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 160ms ease;
}
/* A tinted shade, not a fade to white: the header strip is not white, and a
   white fade over it reads as a smear rather than as content passing under. */
.rt-compare-edge--next { right: 0; background: linear-gradient(to left, rgba(86, 19, 113, 0.17), rgba(86, 19, 113, 0)); }
.rt-compare-edge--prev { left: 0; background: linear-gradient(to right, rgba(86, 19, 113, 0.17), rgba(86, 19, 113, 0)); }

.rt-compare-nudge {
    position: absolute;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: var(--color-surface-lowest, #fff);
    color: var(--color-primary);
    box-shadow: 0 2px 10px -2px rgba(86, 19, 113, 0.45);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 160ms ease, visibility 160ms ease;
}
.rt-compare-nudge--next { right: 8px; }
.rt-compare-nudge--prev { left: 8px; }
.rt-compare-nudge:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.rt-compare-wrap:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }

/* Shown only where there is somewhere to go. visibility, not display, so the
   pair fades rather than blinks, and so a hidden one leaves the tab order. */
.rt-compare-card.is-scrollable:not(.is-scroll-end) .rt-compare-edge--next,
.rt-compare-card.is-scrollable:not(.is-scroll-start) .rt-compare-edge--prev { opacity: 1; }
.rt-compare-card.is-scrollable:not(.is-scroll-end) .rt-compare-nudge--next,
.rt-compare-card.is-scrollable:not(.is-scroll-start) .rt-compare-nudge--prev { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) {
    .rt-compare-edge,
    .rt-compare-nudge { transition: none; }
}

.rt-compare thead tr { background: var(--color-surface-low, #f6f3ee); }
.rt-compare thead th {
    text-align: left;
    font: 700 10px/1.4 Inter, sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-on-surface-variant);
    padding: 0.875rem 1rem;
}
.rt-compare thead th:first-child { padding-left: 1.25rem; }

.rt-compare tbody { vertical-align: top; }
.rt-compare tbody tr { border-top: 1px solid rgba(209, 194, 209, 0.5); }
.rt-compare tbody th,
.rt-compare tbody td { padding: 1rem; text-align: left; font-weight: 400; }
.rt-compare tbody th { padding-left: 1.25rem; }

/* Route name, then where it runs. */
.rt-compare__route {
    font-family: var(--font-display, "Noto Serif", Georgia, serif);
    font-weight: 700;
    font-size: 15.5px;
    line-height: 1.2;
}
.rt-compare__ends {
    display: block;
    font: 400 10.5px/1.4 Inter, sans-serif;
    color: var(--color-on-surface-variant);
    margin-top: 0.25rem;
}

/* Figures are serif with oldstyle numerals, the same register the stat
   strips use, so a number reads as editorial rather than as a spreadsheet. */
.rt-compare__num {
    font-family: var(--font-display, "Noto Serif", Georgia, serif);
    font-variant-numeric: oldstyle-nums;
    font-weight: 700;
    font-size: 15px;
}
.rt-compare__from {
    font-family: var(--font-display, "Noto Serif", Georgia, serif);
    font-variant-numeric: oldstyle-nums;
    font-weight: 700;
    font-size: 14px;
    color: var(--color-primary);
}
.rt-compare__none { font: 400 13px/1.4 Inter, sans-serif; color: var(--color-on-surface-variant); }

/* The column readers actually choose by, so it gets the room. The figure
   columns are pinned to their content width (width:1% collapses a cell to
   its minimum in an auto table) and every spare pixel lands here. */
.rt-compare__character {
    font-family: var(--font-display, "Noto Serif", Georgia, serif);
    font-style: italic;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--color-on-surface-variant);
    min-width: 280px;
    max-width: 360px;
}
.rt-compare__num,
.rt-compare__from,
.rt-compare thead th:nth-child(2),
.rt-compare thead th:nth-child(3),
.rt-compare thead th:nth-child(4),
.rt-compare thead th:nth-child(7),
.rt-compare thead th:nth-child(8),
.rt-compare tbody td:nth-child(8) {
    width: 1%;
    white-space: nowrap;
}

/* The peek. Days, Km and Stops hold one or two digits and were padded like
   prose columns, which put the phone's crop exactly on the edge of "What you
   taste": four whole columns, generous white space to the right of them, and
   a rounded corner over the join. It read as a finished table. Tightening
   the three number columns walks the crop back into the taste column, so a
   chip is cut in half by the card edge. A half-cut chip is the cheapest and
   plainest statement that the table carries on. The columns are already
   width:1% white-space:nowrap, so the padding comes straight off their width
   and the table stays wider than its 900px floor: nothing redistributes. */
@media (max-width: 767.98px) {
    .rt-compare thead th:nth-child(2),
    .rt-compare thead th:nth-child(3),
    .rt-compare thead th:nth-child(4),
    .rt-compare tbody td:nth-child(2),
    .rt-compare tbody td:nth-child(3),
    .rt-compare tbody td:nth-child(4) {
        padding-left: 0.375rem;
        padding-right: 0.375rem;
    }
}

/* Taste chips are the canonical denomination pill, so they carry their own
   styling from component/chips.css. Only the wrapping is set here. */
.rt-compare__taste { max-width: 340px; }
.rt-compare__chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.rt-compare__chips .iw-denom-pill { font-size: 12px; padding: 5px 6px 5px 11px; }
/* The cell has room for the whole name, so the chip's default ellipsis is
   lifted here: "Vino Nobile di Mo..." in a comparison table is useless. */
.rt-compare__chips .iw-denom-name { max-width: none; }
.rt-compare__chips .iw-denom-badge { font-size: 8px; padding: 3px 5px; }

/* Fourth-and-beyond appellations live behind this. Sized and shaped as a
   chip so the row still reads as one list, but burgundy-outlined so it is
   plainly a control and not another appellation. */
.rt-taste-more {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(94, 36, 60, 0.35);
    font-family: var(--font-label, Inter, sans-serif);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #5e243c;
    white-space: nowrap;
    cursor: pointer;
    transition: background 150ms ease, box-shadow 150ms ease;
}
.rt-taste-more:hover { background: rgba(94, 36, 60, 0.08); box-shadow: inset 0 0 0 1px #5e243c; }
.rt-taste-more:focus-visible { outline: 2px solid #5e243c; outline-offset: 2px; }

/* The card itself. Everything inside it (head, kicker, title, chips) is
   styled by component/atlas-plate.css, which the page already loads; only
   the box is set here, because the atlas version is positioned inside a map
   and this one lives in the top layer.
   The top layer is why this is a native popover rather than an absolutely
   positioned div: the table scrolls horizontally, and any descendant of that
   wrapper would be clipped by it. */
.rt-taste-pop {
    position: fixed;
    box-sizing: border-box;
    width: min(330px, calc(100vw - 24px));
    max-height: min(70vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: 16px;
    border: 1px solid rgba(94, 36, 60, 0.34);
    border-radius: 10px;
    /* Opaque, unlike the atlas card: that one floats over a map where a
       little translucency reads as paper, this one sits over table text
       that would ghost through. */
    background: #fbf3df;
    box-shadow: 0 18px 42px rgba(75, 50, 28, 0.3);
    color: var(--atlas-ink);
}
.rt-taste-pop::backdrop { background: transparent; }
/* Placed by JS under the button it belongs to. Until that runs, and on any
   viewport too narrow to anchor it, the UA default centres it. */
.rt-taste-pop:not([data-placed]) { inset: 0; margin: auto; }
/* Dim only in the centred shape, where the card reads as a sheet over the
   page. Anchored to its button it is a popover, and the atlas popover it
   copies never dims the map behind it. */
.rt-taste-pop:not([data-placed])::backdrop { background: rgba(61, 42, 38, 0.28); }
/* A road name can be four words long in a 330px card, so the name takes the
   row and the link drops under it rather than being crushed to two columns. */
.rt-taste-pop .wd-atlas-popover__titlerow { flex-wrap: wrap; }
.rt-taste-pop .wd-atlas-popover__title { font-size: 16px; }
/* The atlas hides its close button above 768px because the map dismisses on
   an outside click. This card is a control the reader opened, so it always
   offers the way out. */
.rt-taste-pop .wd-atlas-popover__close { display: grid; }
.rt-taste-pop .wd-atlas-popover__chips .iw-denom-pill { font-size: 11px; }

/* Cards go two across, at full richness whatever the count. A three-route
   region must not read as unfinished, so there is no ghost slot. */
/* minmax(0, 1fr), not 1fr: a grid track's default min-width is auto, so the
   carousel inside a card would size the column to its full scroll width and
   push the neighbouring card off the page. */

.rt-card { border-radius: 18px; padding: 1.75rem; }
.rt-card__spine li { min-height: 33px; }
.rt-card__spine-dot i {
    width: 7px; height: 7px; border-radius: 999px;
    background: var(--color-primary); display: block;
}
.rt-card__spine-dot.is-start i { width: 11px; height: 11px; }
.rt-card__spine-dot.is-finish i {
    width: 0; height: 0; border-radius: 0;
    border-left: 7px solid var(--color-primary);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.rt-card__bookable {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(209, 194, 209, 0.6);
}
.rt-card__bookable-head {
    font: 700 10px/1 Inter, sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 0.625rem;
}
.rt-card__bookable-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }
.rt-card__estate {
    display: block;
    background: var(--color-surface-low, #f6f3ee);
    border-radius: 12px;
    padding: 0.625rem 0.75rem;
    text-decoration: none;
    min-width: 0;
}
.rt-card__estate:hover { background: var(--color-surface-c, #f0ede8); }
.rt-card__estate-name {
    display: block;
    font: 600 13px/1.3 Manrope, sans-serif;
    color: var(--color-on-surface);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rt-card__estate-meta {
    display: block;
    font: 400 11px/1.4 Inter, sans-serif;
    color: var(--color-on-surface-variant);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.rt-card__cta { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1rem; }
.rt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-radius: 999px;
    padding: 0 1.25rem;
    font: 700 13.5px/1 Inter, sans-serif;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.rt-btn--solid { background: var(--color-primary); color: #fff; }
.rt-btn--solid:hover { background: var(--color-primary-container, #702f8a); color: #fff; }

/* ── Multi-day chrome (Etna design) ─────────────────────────────────────
 * A single-day route renders none of this. Day 1 is the house purple, day 2
 * terracotta, and the pair repeats past two: even days take the terracotta,
 * odd days fall through to the purple default. CSS cannot say "even" about an
 * attribute value, so the even days are enumerated. Six is well past the
 * longest road we hold (three) and past the longest anyone would drive.
 */
:root {
    --rt-day-1: #561371;
    --rt-day-2: #b86b4a;
    --rt-day-2-ink: #8a4527;
}

.rt-daylegend { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.875rem; }
.rt-daybtn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: 1px solid var(--color-outline-variant);
    background: var(--color-surface-lowest, #fff);
    border-radius: 999px;
    padding: 0.375rem 0.625rem;
    font: 600 10px/1 Inter, sans-serif;
    color: var(--color-on-surface-variant);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.rt-daybtn:hover { border-color: rgba(86, 19, 113, 0.45); }
.rt-daybtn[aria-pressed="true"] { background: var(--color-surface-low, #f6f3ee); border-color: rgba(86, 19, 113, 0.5); }
.rt-daybtn__bar { width: 0.875rem; height: 3px; border-radius: 2px; background: var(--rt-day-1); }
.rt-daybtn__bar[data-day="2"],
.rt-daybtn__bar[data-day="4"],
.rt-daybtn__bar[data-day="6"] { background: var(--rt-day-2); }

.rt-dayhead { display: flex; align-items: center; gap: 0.75rem; margin: 2rem 0 1.5rem; }
.rt-dayhead__bar { width: 1rem; height: 3px; border-radius: 2px; background: var(--rt-day-1); flex-shrink: 0; }
.rt-dayhead[data-day="2"] .rt-dayhead__bar,
.rt-dayhead[data-day="4"] .rt-dayhead__bar,
.rt-dayhead[data-day="6"] .rt-dayhead__bar { background: var(--rt-day-2); }
.rt-dayhead__label {
    font: 700 11px/1.3 Inter, sans-serif;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-primary);
}
.rt-dayhead[data-day="2"] .rt-dayhead__label,
.rt-dayhead[data-day="4"] .rt-dayhead__label,
.rt-dayhead[data-day="6"] .rt-dayhead__label { color: var(--rt-day-2-ink); }
.rt-dayhead__rule { flex-grow: 1; height: 1px; background: rgba(209, 194, 209, 0.6); }

/* Day 2's leg chips and stop rings take the terracotta so the drive reads as
 * two halves without a legend lookup. */
.rt-leg[data-day="2"] .rt-leg__chip,
.rt-leg[data-day="4"] .rt-leg__chip,
.rt-leg[data-day="6"] .rt-leg__chip { color: var(--rt-day-2-ink); }
.rt-stop[data-day="2"] .rt-stop__num,
.rt-stop[data-day="4"] .rt-stop__num,
.rt-stop[data-day="6"] .rt-stop__num { box-shadow: inset 0 0 0 3px var(--rt-day-2); color: var(--rt-day-2-ink); }
.rt-atlas-stop[data-day="2"] .rt-atlas-stop__ring,
.rt-atlas-stop[data-day="4"] .rt-atlas-stop__ring,
.rt-atlas-stop[data-day="6"] .rt-atlas-stop__ring { stroke: var(--rt-day-2); }
.rt-atlas-stop[data-day="2"] .rt-atlas-stop__n,
.rt-atlas-stop[data-day="4"] .rt-atlas-stop__n,
.rt-atlas-stop[data-day="6"] .rt-atlas-stop__n { fill: var(--rt-day-2-ink); }

/* Tapping a day dims the other one rather than hiding it: the drive is still
 * one road, and a hidden half would read as a shorter route. */
[data-day] { transition: opacity 0.3s ease; }
body[data-dayfocus="1"] .rt-stop[data-day="2"],
body[data-dayfocus="1"] .rt-dayhead[data-day="2"],
body[data-dayfocus="1"] .rt-leg[data-day="2"],
body[data-dayfocus="2"] .rt-stop[data-day="1"],
body[data-dayfocus="2"] .rt-dayhead[data-day="1"],
body[data-dayfocus="2"] .rt-leg[data-day="1"] { opacity: 0.4; }
body[data-dayfocus="1"] .rt-atlas-stop[data-day="2"],
body[data-dayfocus="2"] .rt-atlas-stop[data-day="1"] { opacity: 0.18; }
/* The legs too. Drawn one segment per leg so a day can be dimmed without
   dimming the whole line; a leg takes the day of the stop it arrives at. */
body[data-dayfocus="1"] .rt-atlas-leg[data-day="2"],
body[data-dayfocus="2"] .rt-atlas-leg[data-day="1"] { opacity: 0.18; }
.rt-atlas-leg { transition: opacity 0.25s ease; }
.rt-atlas-leg[data-day="2"] .rt-atlas-line__ink,
.rt-atlas-leg[data-day="4"] .rt-atlas-line__ink,
.rt-atlas-leg[data-day="6"] .rt-atlas-line__ink { stroke: var(--rt-day-2, #b86b4a); }

/* ── 5.4 Do this route with a guide ─────────────────────────────────────
 * Two blocks, two promises. Solid left rule for a tour that drives the
 * itinerary; dashed enclosure for one that is merely nearby, borrowing the
 * "not the road itself" grammar from the map's connector caption.
 */
/* The guide block's band is painted by its section, which spans the viewport
   like every other band on the page. This is the content wrapper only. */
.rt-guide { background: transparent; padding: 0; }
.rt-tourblock { padding: 1.5rem; margin-top: 1.5rem; }
.rt-tourblock--guided {
    background: rgba(86, 19, 113, 0.045);
    border-left: 3px solid var(--color-primary);
    border-radius: 2px 12px 12px 2px;
}
.rt-tourblock--area {
    background: rgba(184, 107, 74, 0.06);
    border: 1px dashed rgba(184, 107, 74, 0.55);
    border-radius: 12px;
}
.rt-tourblock__head { margin-bottom: 1rem; }
.rt-tourblock__title {
    font: 700 11px/1 Inter, sans-serif;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0;
}
.rt-tourblock--area .rt-tourblock__title { color: var(--rt-day-2-ink); }
.rt-tourblock__sub {
    font: 400 11px/1.4 Inter, sans-serif;
    color: var(--color-on-surface-variant);
    margin: 0.25rem 0 0;
}
.rt-tourgrid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .rt-tourgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .rt-tourgrid { grid-template-columns: repeat(3, 1fr); } }
.rt-tourcard {
    background: var(--color-surface-lowest, #fff);
    border-radius: 12px;
    box-shadow: 0 2px 10px -4px rgba(86, 19, 113, 0.18);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}
.rt-tourcard__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.rt-tourcard__chip {
    display: inline-flex;
    align-items: center;
    background: var(--color-surface-low, #f6f3ee);
    border-radius: 999px;
    padding: 0.25rem 0.625rem;
    font: 600 11px/1.4 Inter, sans-serif;
    color: var(--color-on-surface);
}
.rt-tourcard__foot {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(209, 194, 209, 0.4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.rt-tourcard__via {
    font: 700 10px/1 Inter, sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-on-surface-variant);
}
.rt-tourcard__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: 1px solid rgba(86, 19, 113, 0.3);
    border-radius: 999px;
    padding: 0.375rem 0.875rem;
    font: 600 12px/1.4 Inter, sans-serif;
    text-decoration: none;
}
.rt-tourcard__cta:hover { border-color: var(--color-primary); }

/* A quick route to live booking providers. This deliberately echoes the
 * winery detail help FAB: both are illustrated paper circles and both take a
 * reader to an action already present on the page. */
.rt-booking-fab {
    position: fixed;
    right: 22px;
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    z-index: 45;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 1px solid var(--color-outline-variant, #e0dcd3);
    border-radius: 50%;
    background: var(--color-surface, #fdf9f4);
    box-shadow: 0 6px 20px rgba(28, 22, 28, 0.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 150ms ease, opacity 200ms ease,
        visibility 200ms ease, box-shadow 150ms ease;
}
.rt-booking-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(28, 22, 28, 0.3);
}
.rt-booking-fab:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}
.rt-booking-fab__icon {
    width: 44px;
    height: 44px;
    display: block;
    object-fit: contain;
}
.rt-booking-fab.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
}
#route-booking-title:focus { outline: none; }

@media (max-width: 860px) {
    .rt-booking-fab {
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        width: 58px;
        height: 58px;
    }
    .rt-booking-fab__icon { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .rt-booking-fab { transition-duration: 0.01ms; }
}

/* ── Phone: collapsed map and the sticky progress pill ──────────────────
 * On a phone the drive list is the page and the map is a view of it, so the
 * plate opens short and the reader expands it. Desktop keeps the full plate
 * and shows neither the expand button nor the progress pill.
 */
.rt-map-viewport { position: relative; overflow: hidden; border-radius: 8px; }
.rt-map-expand { display: none; }
/* Phone-only furniture. Hidden by default rather than only inside the media
   query, because the script clears the `hidden` attribute on every viewport
   and an unset display falls back to block. */
.rt-progress { display: none; }

@media (max-width: 1023px) {
    /* The phone opens the map short, and short means a shorter PLATE, not the
       top quarter of a tall one. The renderer writes the drive's own aspect
       ratio inline, so the collapsed state overrides it and the drive is
       fitted into the box the reader can actually see; expanding redraws it
       at full height (route-page.js). */
    .rt-map-viewport:not(.is-open) .rt-map-canvas {
        aspect-ratio: auto !important;
        height: 200px;
    }

    .rt-map-expand {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 48px;
        margin-top: 0.75rem;
        border: 1px solid var(--color-outline-variant);
        border-radius: 999px;
        background: var(--color-surface-lowest, #fff);
        font: 700 13.5px/1 Inter, sans-serif;
        color: var(--color-primary);
        cursor: pointer;
    }

    /* Sits under the site header, which is itself sticky. */
    .rt-progress {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        position: sticky;
        top: 64px;
        z-index: 30;
        margin: 1rem 0 0.5rem;
        padding: 0.625rem 1rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(8px);
        box-shadow: 0 8px 24px -12px rgba(86, 19, 113, 0.22);
    }
}

.rt-progress[hidden] { display: none; }
.rt-progress__text { font: 700 12px/1.3 Inter, sans-serif; color: var(--color-on-surface); }
.rt-progress__day {
    font: 700 9.5px/1 Inter, sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: var(--color-surface-low, #f6f3ee);
    border-radius: 999px;
    padding: 0.25rem 0.5rem;
}
.rt-progress__segs { margin-left: auto; display: flex; gap: 0.25rem; flex-shrink: 0; }
.rt-progress__seg {
    width: 1rem;
    height: 3px;
    border-radius: 2px;
    background: var(--color-outline-variant);
    transition: background 0.2s ease;
}
.rt-progress__seg.is-done { background: var(--color-primary); }

/* ── 5.8 The wine country it crosses ────────────────────────────────── */
.rt-crosses {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    background: var(--color-surface-lowest, #fff);
    border-radius: 12px;
    box-shadow: 0 2px 10px -4px rgba(86, 19, 113, 0.18);
    padding: 1.5rem;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rt-crosses:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -12px rgba(86, 19, 113, 0.22);
}
.rt-crosses__tier {
    font: 700 9.5px/1 Inter, sans-serif;
    letter-spacing: 0.06em;
    padding: 3px 6px;
    border-radius: 4px;
    background: var(--color-primary);
    color: #fff;
    flex-shrink: 0;
}
.rt-crosses__arrow { color: var(--color-primary); margin-top: 0.25rem; flex-shrink: 0; }

/* ── 5.10b More drives in the region ────────────────────────────────── */
/* The shared card carousel owns the phone rail and desktop grid. The cards
   retain natural height because their stop lists vary substantially. */
.rt-more { min-width: 0; }
.rt-more > .iw-card-carousel { max-width: none; }
.rt-more .iw-card-carousel-track { align-items: start; }
.rt-more .iw-card-carousel-item { align-self: start; }
.rt-more .iw-card-carousel-item > .rt-morecard { height: auto; }
/* The component begins its static grid at 768px. Keep two columns until the
   three-column desktop layout has enough room at 1024px. */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .rt-more .iw-card-carousel-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.rt-morecard {
    display: flex;
    flex-direction: column;
    background: var(--color-surface-lowest, #fff);
    border-radius: 18px;
    box-shadow: 0 2px 10px -4px rgba(86, 19, 113, 0.18);
    padding: 1.5rem;
}
.rt-morecard__name {
    font-family: var(--font-display, "Noto Serif", Georgia, serif);
    font-size: 19px;
    line-height: 1.18;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0.75rem 0 0.5rem;
}
.rt-morecard__name a { color: inherit; }
.rt-morecard__summary {
    font: 400 12.5px/1.55 var(--font-body, Manrope, sans-serif);
    color: var(--color-on-surface-variant);
    margin: 0 0 1rem;
}
.rt-morecard .region-route__steps { margin-bottom: 1.25rem; }
.rt-morecard__cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.375rem;
    font: 600 13px/1 var(--font-body, Manrope, sans-serif);
    color: var(--color-primary);
    text-decoration: none;
}
.rt-morecard__cta:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Estates layer on the detail map ────────────────────────────────── */
.rt-atlas-estate { cursor: pointer; outline: none; }
.rt-atlas-estate__stem {
    stroke: var(--rt-day-2, #b86b4a);
    stroke-width: 1.35;
    stroke-linecap: round;
    opacity: 0.82;
    pointer-events: none;
}
.rt-atlas-estate__foot {
    fill: var(--rt-day-2, #b86b4a);
    stroke: #fcf9f4;
    stroke-width: 0.8;
    pointer-events: none;
}
.rt-atlas-estate__hit { fill: transparent; pointer-events: all; }
.rt-atlas-estate__halo { fill: var(--rt-day-2, #b86b4a); opacity: 0.18; }
.rt-atlas-estate__dot { fill: var(--rt-day-2, #b86b4a); stroke: #fcf9f4; stroke-width: 1.8; }
.rt-atlas-estate__halo,
.rt-atlas-estate__dot { pointer-events: none; }
.rt-atlas-estate:hover .rt-atlas-estate__halo,
.rt-atlas-estate:focus-visible .rt-atlas-estate__halo,
.rt-atlas-estate.is-hot .rt-atlas-estate__halo,
.rt-atlas-estate.is-locked .rt-atlas-estate__halo { opacity: 0.34; }
.rt-atlas-estate:hover .rt-atlas-estate__dot,
.rt-atlas-estate:focus-visible .rt-atlas-estate__dot { stroke-width: 2.6; }
.rt-map-legend__estate {
    width: 0.625rem; height: 0.625rem; border-radius: 999px;
    background: var(--rt-day-2, #b86b4a);
    box-shadow: 0 0 0 2px #fff;
}

/* ── Index: all roads on one plate, beside a legend rail ────────────── */
.rt-indexmap { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
@media (min-width: 1024px) {
    .rt-indexmap { grid-template-columns: 1.05fr 0.95fr; gap: 3rem; }
}

/* The index plate wears no white mount. The card put a 20px white border on
   all four sides of the map, which bought nothing (parchment already reads as
   an object against the page ground) and cost real map: 40px of a 326px plate
   on a phone. The radius and the house shadow move onto the plate itself, so
   it is still a card, just without the frame around the card. The detail page
   keeps its mount, because there the legend and the expand button sit inside
   it and need the white to sit on. */
.rt-indexmap .rt-map-card {
    padding: 0;
    background: none;
    box-shadow: none;
}
.rt-indexmap .rt-map-canvas,
.rt-indexmap .rt-map-canvas .wr-map-svg {
    border-radius: 12px;
}
.rt-indexmap .rt-map-canvas {
    box-shadow: 0 8px 24px -12px rgba(86, 19, 113, 0.22);
}

/* The card a road opens. Same shell as the estate pin cards, so a reader who
   has met one on a denomination page meets the same object here; only the
   road's own colour and the route mark are added.
 *
 * Doubled-up selector on the geometry: atlas-plate.css is loaded after this
 * file, and its own rules are `.iw-atlas .wd-atlas-popover`, so anything
 * written at one or two classes here loses the tie and silently does nothing.
 * That is how the card first shipped at the estate width with the X sitting
 * on top of the road's name. */
.rt-routepop { --rt-row-colour: var(--color-primary); }
.iw-atlas .wd-atlas-popover.rt-routepop {
    /* Room for the X. The shared card reserves it with a grid head; this one
       has no head, so the padding has to say it. */
    padding-right: 44px;
    /* Narrower than an estate card. That one carries a photo and two rows of
       chips; this one is four lines, and at the shared 330px it covered half
       the plate it is describing. */
    width: min(272px, calc(100% - 24px));
    border-color: color-mix(in srgb, var(--rt-row-colour) 55%, transparent);
}
@media (max-width: 767.98px) {
    /* The card goes full bleed along the foot of the plate at this width, so
       it takes the plate's width and keeps only the room for the X. */
    .iw-atlas .wd-atlas-popover.rt-routepop { width: auto; padding-right: 42px; }
}
.rt-routepop .wd-atlas-popover__kicker {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--rt-row-colour);
}
.rt-routepop__mark { color: var(--rt-row-colour); }
.rt-routepop .wd-atlas-popover__title { margin-top: 4px; }
/* The button keeps the house burgundy rather than the road's colour. The
   kicker, the mark and the card's own border already say which road this is,
   and one of the four is #b08512: white on that yellow is about 2.4:1, which
   no amount of it being a button excuses. */
.wd-atlas-popover__cta.rt-routepop__cta { margin-top: 12px; }

.rt-atlas-route { cursor: pointer; outline: none; }
/* The visible line is under 3px. This is what the cursor and the thumb
   actually hit. */
.rt-atlas-route__hit { fill: none; stroke: transparent; stroke-width: 16; }
.rt-atlas-route__casing { fill: none; stroke: #fcf9f4; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.rt-atlas-route__ink {
    fill: none;
    stroke: var(--rt-route-colour, var(--color-primary));
    stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round;
}
.rt-atlas-route__start { stroke: none; fill: var(--rt-route-colour, var(--color-primary)); }
.rt-atlas-route__stop { fill: #fcf9f4; stroke: var(--rt-route-colour, var(--color-primary)); stroke-width: 2; }

/* Isolating a road dims the others rather than hiding them, so the region
   still reads as a whole while one road is picked out. The choice of which
   to dim is made in JS (isolateRoute): CSS cannot compare a child's slug to
   an ancestor's attribute. */
.rt-atlas-route { transition: opacity 0.2s ease; }
.rt-atlas-route.is-dim { opacity: 0.22; }

/* Picking a road from the rail grows it out of the plate and puts it back.
   It ends at exactly 1: the group scales about its own centre, so a standing
   scale would leave the road drawn off the ground it crosses. What persists
   is the dimming of the other three, which moves nothing.
   Finite, and short. An animation that keeps running inside the plate makes
   iOS re-rasterise the whole map for as long as it runs, which is why the
   atlas bans infinite ones. */
.rt-atlas-route.is-growing {
    transform-box: fill-box;
    transform-origin: center;
    animation: rtRouteGrow 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes rtRouteGrow {
    0%   { transform: scale(1); }
    38%  { transform: scale(1.16); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .rt-atlas-route.is-growing { animation: none; }
}

/* The rail is desktop furniture. On a phone the same four roads are one tap
   away on the plate itself, and repeating them underneath pushed the decision
   table a full screen down for nothing the reader had not just seen. The note
   stays: it is the sentence that says what the map is for. */
.rt-legendrail { display: flex; flex-direction: column; gap: 0.625rem; }

/* At rest a row had no surface of its own: a name, a grey line and a 3px dash
   sitting on the page ground, which read as four paragraphs rather than as
   four things you can pick. Each row now sits on its own tile, so the rail is
   legible as a control before anything is hovered.
 *
 * The tile is a plain container holding two controls: the body picks the road
 * out on the map, the arrow is the only thing that navigates. It used to be
 * one link around the lot, which meant looking at a road cost you the map. */
.rt-legendrow {
    --rt-row-colour: var(--color-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 0.75rem 0.875rem 1rem;
    border-radius: 12px;
    background: var(--color-surface-lowest, #fff);
    border: 1px solid var(--color-outline-variant);
    transition: border-color 0.15s ease, background 0.15s ease,
                box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.rt-legendrow__pick {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
/* The row tile carries the picked-out treatment, so the button inside it
   needs a ring of its own only where :has() is missing and the tile cannot
   react to focus. */
.rt-legendrow__pick:focus-visible {
    outline: 2px solid var(--rt-row-colour);
    outline-offset: 4px;
    border-radius: 8px;
}

/* The way out. Small, quiet and at the end of the row, so the row reads as
   something to compare and the arrow as the way to commit to one. */
.rt-legendrow__go {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    color: var(--color-on-surface-variant);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.rt-legendrow__go:hover,
.rt-legendrow__go:focus-visible {
    background: color-mix(in srgb, var(--rt-row-colour) 14%, transparent);
    color: var(--rt-row-colour);
    transform: translateX(2px);
}
.rt-legendrow__go:focus-visible {
    outline: 2px solid var(--rt-row-colour);
    outline-offset: 2px;
}

/* The swatch is the only tie between a row and its line on the map, so it
   carries the road's colour and is what grows when the row is picked. */
.rt-legendrow__swatch {
    width: 1.5rem; height: 5px;
    border-radius: 3px;
    flex-shrink: 0;
    transition: width 0.15s ease, height 0.15s ease;
}

/* Picked out, from either direction. isolateRoute() sets .is-hot on the row
   whether the line or the row was hovered, so that class is the real state;
   :hover is here as the no-JS fallback and :has(:focus-visible) for the
   keyboard, because the tile is no longer the focusable thing.
 *
 * .is-picked is the pressed state, which survives the pointer leaving.
 *
 * The row lights up in its own road colour, so the pairing with the map is
 * stated in colour rather than only in position. The colour is used on the
 * ring, the tint and the shadow, never on the name: the yellow road would
 * fail contrast as 17px text. */
.rt-legendrow:hover,
.rt-legendrow:has(:focus-visible),
.rt-legendrow.is-hot,
.rt-legendrow.is-picked {
    border-color: var(--rt-row-colour);
    background: color-mix(in srgb, var(--rt-row-colour) 7%, var(--color-surface-lowest, #fff));
    box-shadow: inset 0 0 0 1px var(--rt-row-colour),
                0 10px 20px -14px var(--rt-row-colour);
    transform: translateX(3px);
}
.rt-legendrow:hover .rt-legendrow__swatch,
.rt-legendrow:has(:focus-visible) .rt-legendrow__swatch,
.rt-legendrow.is-hot .rt-legendrow__swatch,
.rt-legendrow.is-picked .rt-legendrow__swatch { width: 2.25rem; height: 6px; }
.rt-legendrow.is-picked { box-shadow: inset 0 0 0 2px var(--rt-row-colour), 0 12px 24px -14px var(--rt-row-colour); }

.rt-legendrow__name {
    display: block;
    font-family: var(--font-display, "Noto Serif", Georgia, serif);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.2;
    color: var(--color-on-surface);
}
.rt-legendrow:hover .rt-legendrow__name,
.rt-legendrow:has(:focus-visible) .rt-legendrow__name,
.rt-legendrow.is-hot .rt-legendrow__name,
.rt-legendrow.is-picked .rt-legendrow__name { color: var(--color-primary); }
.rt-legendrow__meta {
    display: block;
    font: 400 12px/1.5 Inter, sans-serif;
    color: var(--color-on-surface-variant);
    margin-top: 0.25rem;
    font-variant-numeric: oldstyle-nums;
}

/* The map dims the lines it is not picking out; the rail does the same to its
   rows, so the two read as one control rather than two that happen to agree.
   Mild on purpose: these are still roads you can pick, not roads switched
   off. Without :has() nothing dims and the picked row still carries its ring,
   tint and shadow. */
.rt-legendrail:has(.is-hot) .rt-legendrow:not(.is-hot) { opacity: 0.5; }
.rt-legendrail:has(.is-picked) .rt-legendrow:not(.is-picked):not(.is-hot) { opacity: 0.5; }

/* The rail is desktop furniture. On a phone the same four roads are one tap
   away on the plate itself, and repeating them underneath pushed the decision
   table a full screen down for nothing the reader had not just seen. The note
   stays: it is the sentence that says what the map is for.
   Last, not next to .rt-legendrail above: these selectors are one class deep,
   same as the rules they override, so source order is what decides. */
@media (max-width: 767.98px) {
    .rt-legendrail { gap: 0; }
    .rt-legendrow { display: none; }
    .rt-legendrail__note { margin-top: 0.75rem; }
}

.rt-btn--ghost {
    border: 1px solid var(--color-outline-variant);
    color: var(--color-primary);
    background: transparent;
}
.rt-btn--ghost:hover { border-color: rgba(86, 19, 113, 0.5); background: var(--color-surface-low, #f6f3ee); }

/* The bookable header carries a route-sprite mark rather than a generic
   glyph, and inherits the heading's primary colour through currentColor. */
.rt-card__bookable-head { display: flex; align-items: center; gap: 0.375rem; }
.rt-card__bookable-icon { width: 16px; height: 16px; flex: none; }

/* The winery carousel is built for a full-width section. Inside a route card
   it has to be told it may shrink, and its own horizontal scroll must stay
   inside the card rather than becoming the page's. */
.rt-card { min-width: 0; }
.rt-card .wcc-section { min-width: 0; margin: 0; }
.rt-card .wcc-section > * { min-width: 0; }

/* The rail runs to the card's inner edge, so whatever card is half-visible
   used to end on a hard vertical cut that read as a rendering fault rather
   than as "there is more this way". It now fades out instead.
 *
 * A mask, not a blur: an overlay would have to match the card fill and would
 * sit above the cards catching pointer events, and a backdrop-filter is the
 * kind of standing GPU work that costs on phones for a 34px strip.
 *
 * Which edges fade is read off the nav buttons, which the carousel controller
 * already shows and hides from the real scroll position. So the fade is only
 * ever on a side that has something hidden behind it, and a rail scrolled to
 * its end shows its last card whole. Without :has() support nothing fades,
 * which is exactly today's behaviour. */
.rt-card .wcc-rail {
    --rt-fade-start: 0px;
    --rt-fade-end: 0px;
    -webkit-mask-image: linear-gradient(to right,
        transparent 0, #000 var(--rt-fade-start),
        #000 calc(100% - var(--rt-fade-end)), transparent 100%);
    mask-image: linear-gradient(to right,
        transparent 0, #000 var(--rt-fade-start),
        #000 calc(100% - var(--rt-fade-end)), transparent 100%);
}
.rt-card .wcc-rail-wrap:has(.wcc-nav-btn--prev:not(.hidden)) .wcc-rail { --rt-fade-start: 34px; }
.rt-card .wcc-rail-wrap:has(.wcc-nav-btn--next:not(.hidden)) .wcc-rail { --rt-fade-end: 34px; }

/* The onward estate carousel sits on the page's own gutters rather than the
   component's centred 1200px band, so its cards start where the route cards
   above them start. Set through the component's own knobs, matching
   px-section-x-sm / md:px-section-x. */
.rt-onward-wineries {
    --wcc-container-max-width: none;
    --wcc-container-padding: 0 2rem;
    /* And on the page's vertical rhythm too, not the component's own flat
       40px at every width. Every other boundary on this page is
       py-10 md:py-16, so without this the last gap on the page is the only
       one that does not match. */
    --wcc-section-padding: 2.5rem 0;
}
@media (min-width: 768px) {
    .rt-onward-wineries {
        --wcc-container-padding: 0 4rem;
        --wcc-section-padding: 4rem 0;
    }
}