/* ==========================================================================
   00 tokens: the jet-age ticket wallet.
   Direction contract: .impeccable/surfaces/sites-madeira-content-home-en-toml.md,
   "Direction contract (ticket wallet ...)". Comp: .impeccable/mocks/wallet/wallet.png.

   Typography contract (strict audit, scripts/css_typography_audit.py):
   - Raw font stacks and @font-face live only in this file.
   - Everywhere else font-family is one of var(--font-mono), var(--type-body-font),
     var(--type-h1-font) ... var(--type-h4-font), var(--type-meta-font),
     var(--type-label-caps-font), var(--type-quote-font).
   - font-size tokens are only the ten --font-size-* names below.
   - One declaration per line (the audit reads CSS line by line).

   Faces (self-hosted WOFF2, SIL OFL 1.1, see media/CREDITS.md):
   - Barlow Condensed (500/600/700/800, italic 600/700/800): the airline grotesk. Display,
     heads, tab caps and stamps, set in italic or upright capitals.
   - Barlow (400/500/600): reading text.
   - Overpass Mono (variable, wght 300-700; the site uses 500/600/700): carbon numerals,
     codes, times, fares. Reached through var(--font-mono).

   Every token is named for its role in the wallet (page, paper, ink, tab, gate, carbon); the board theme's names
   (--board*, --led*, --yellow*) are gone from this theme.
   ========================================================================== */

@font-face {
    font-family: "Barlow Condensed";
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url('../../_media/fonts/barlow-condensed-600i-latin.woff2?v=efad6ba3') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Barlow Condensed";
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url('../../_media/fonts/barlow-condensed-600i-latin-ext.woff2?v=efad6ba3') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Barlow Condensed";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('../../_media/fonts/barlow-condensed-700i-latin.woff2?v=efad6ba3') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Barlow Condensed";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('../../_media/fonts/barlow-condensed-700i-latin-ext.woff2?v=efad6ba3') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Barlow Condensed";
    font-style: italic;
    font-weight: 800;
    font-display: swap;
    src: url('../../_media/fonts/barlow-condensed-800i-latin.woff2?v=efad6ba3') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Barlow Condensed";
    font-style: italic;
    font-weight: 800;
    font-display: swap;
    src: url('../../_media/fonts/barlow-condensed-800i-latin-ext.woff2?v=efad6ba3') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../../_media/fonts/barlow-condensed-500-latin.woff2?v=efad6ba3') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../../_media/fonts/barlow-condensed-500-latin-ext.woff2?v=efad6ba3') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../../_media/fonts/barlow-condensed-600-latin.woff2?v=efad6ba3') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../../_media/fonts/barlow-condensed-600-latin-ext.woff2?v=efad6ba3') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../../_media/fonts/barlow-condensed-700-latin.woff2?v=efad6ba3') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../../_media/fonts/barlow-condensed-700-latin-ext.woff2?v=efad6ba3') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../../_media/fonts/barlow-condensed-800-latin.woff2?v=efad6ba3') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../../_media/fonts/barlow-condensed-800-latin-ext.woff2?v=efad6ba3') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../_media/fonts/barlow-400-latin.woff2?v=efad6ba3') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../_media/fonts/barlow-400-latin-ext.woff2?v=efad6ba3') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../../_media/fonts/barlow-500-latin.woff2?v=efad6ba3') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../../_media/fonts/barlow-500-latin-ext.woff2?v=efad6ba3') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../../_media/fonts/barlow-600-latin.woff2?v=efad6ba3') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../../_media/fonts/barlow-600-latin-ext.woff2?v=efad6ba3') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Overpass Mono";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../../_media/fonts/overpass-mono-latin.woff2?v=efad6ba3') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Overpass Mono";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../../_media/fonts/overpass-mono-latin-ext.woff2?v=efad6ba3') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Colour: Extra Madeira, one wallet in two lights --------------------------------------
   The Extra Madeira palette (brand/assets/extra-madeira/tokens.css): forest #073B34, warm ivory
   #F8F5EC, mist #DFEBE1 and sea #238B79, with lighter and darker steps of sea and a leaf green
   for the fills. Day is the default: ivory page, mist band, forest ink. Night applies with the
   device's dark setting unless the visitor chose day (:root[data-theme="light"]), and always
   with :root[data-theme="dark"] (the header switch, stored in localStorage, set before paint by
   the inline script in layouts/base.html): forest page, ivory ink.

   Roles, not colours, are what the layers read:
   - --page, --band, --head: the ground, the mist band, the header and phone bar.
   - --ground: whatever a coupon sits on; punched notches and holes show it.
   - --coupon: white paper in both themes. Every paper surface (the list under "Paper" below)
     re-inks itself with the day ink, so a coupon reads the same by day and by night.
   - --ink, --ink-soft, --ink-faint: text and rules on the current surface; --on-ink: text on
     an ink fill.
   - --tab (light sea fare tabs) and --gate (leaf primary buttons) are fills with forest text.
   - --accent-ink: sea at text size (sea ink by day and on paper, light sea by night);
     --go: laurel by day and on paper, leaf by night (CONFIRMED, the slogan).
   - --carbon-paper and --carbon: the carbon copy, mist paper with sea-ink figures.
   - --void: red, only for VOID and closed states, always on white paper.

   Contrast (WCAG 2.x, measured): forest #073B34 on ivory 11.4, on white 12.5, on mist 10.2;
   soft #3D5C54 6.7 / 7.4 / 6.0; faint #526D66 5.2 / 5.6 / 4.6; sea ink #1C7364 5.2 / 5.7 / 4.6
   (white on it 5.7); laurel #1C7443 5.3 / 5.8 / 4.7; forest on light sea 6.5, on leaf 7.0;
   red #C0322A on white 5.6. Night: ivory on forest 11.4, on the band #0B4840 9.6; #CFDDD3
   8.9 / 7.4; #A3BFB4 6.3 / 5.3; light sea 6.5 / 5.4; leaf 7.0 / 5.9.
   The brand sea #238B79 is 3.8 on ivory: decoration only, never text. */
:root {
    color-scheme: light;

    /* The palette (fixed values; the roles below pick from it). */
    --forest: #073B34;
    --forest-band: #0B4840;
    --forest-line: #2A6A60;
    --ivory: #F8F5EC;
    --ivory-soft: #CFDDD3;
    --ivory-faint: #A3BFB4;
    --mist: #DFEBE1;
    --mist-deep: #CCDFD1;
    --paper: #FFFFFF;
    --sea: #238B79;
    --sea-light: #6CCBB8;
    --sea-press: #58BCA8;
    --sea-ink: #1C7364;
    --leaf: #86D39D;
    --leaf-hover: #74C68C;
    --leaf-press: #63B87C;
    --laurel: #1C7443;
    --forest-soft: #3D5C54;
    --forest-faint: #526D66;
    --red: #C0322A;

    /* ---- Day roles ---- */
    --page: var(--ivory);
    --page-deep: #EEEADD;
    --band: var(--mist);
    --ground: var(--page);
    --head: var(--paper);
    --raised: var(--paper);
    --raised-hover: var(--ivory);
    --strip: var(--forest);
    --foot: var(--forest);
    --coupon: var(--paper);
    --paper-tint: var(--ivory);
    --paper-tint-deep: #EEEADD;
    --ink: var(--forest);
    --ink-soft: var(--forest-soft);
    --ink-faint: var(--forest-faint);
    --on-ink: var(--paper);
    --line-ink: var(--forest);
    --hair-ink: rgba(7, 59, 52, 0.24);
    --hair-strong: rgba(7, 59, 52, 0.62);
    --tab: var(--sea-light);
    --tab-press: var(--sea-press);
    --on-tab: var(--forest);
    --gate: var(--leaf);
    --gate-hover: var(--leaf-hover);
    --gate-press: var(--leaf-press);
    --on-gate: var(--forest);
    --accent-ink: var(--sea-ink);
    /* The leg cell at a coupon's edge (leg numbers, the chosen calculator tab): night teal by day;
       by night turquoise ink, so the cell does not melt into the night ground beside it. */
    --cell: var(--forest);
    --go: var(--laurel);
    --void: var(--red);
    --carbon: var(--sea-ink);
    --carbon-paper: var(--mist);
    --carbon-rule: rgba(28, 115, 100, 0.5);
    --hl-tint: rgba(108, 203, 184, 0.14);
    --stamp-blend: multiply;
    /* The grain of a red stamp, which carries its own white paper: by night the specks would show
       the dark ground through the paper, so red stamps print clean there. */
    --red-grain: var(--ink-grain);

    /* Map layers (flat colour in register, keyline last): the island is paper printed with
       security dots; zones are flat tints laid over it, night teal and turquoise ink in turn, so
       neighbouring zones never share a hue. The map sits on paper, so these hold in both themes. */
    --island: var(--coupon);
    --zone: #BAC8C0;
    --zone-lit: #526D66;
    /* The seven fare zones by drive time from the airport: the darkest tint next to the airport,
       the lightest at the far end of the island. The lit zone is full turquoise. */
    --zone-1: #2F5A50;
    --zone-2: #3F8A78;
    --zone-3: #7E9A90;
    --zone-4: #9DCABB;
    --zone-5: #B3C6BC;
    --zone-6: #CBE4D8;
    --zone-7: #DCE6DE;
    --zone-highlight: var(--sea-light);

    /* Engine compatibility: the onlinuum icon() gradient reads these two. */
    --accent-start: var(--sea-light);
    --accent-end: var(--sea-light);

    /* ---- Faces ---- */
    --font-grotesk: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
    --font-text: "Barlow", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Overpass Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* Approved typography roles (the only font-family values allowed outside this file). */
    --type-body-font: var(--font-text);
    --type-h1-font: var(--font-grotesk);
    --type-h2-font: var(--font-grotesk);
    --type-h3-font: var(--font-grotesk);
    --type-h4-font: var(--font-grotesk);
    --type-meta-font: var(--font-text);
    --type-label-caps-font: var(--font-grotesk);
    --type-quote-font: var(--font-text);

    /* ---- Type scale: the ten names the audit accepts, largest to smallest ----
       display:  the home H1, italic caps (76 px at 1440, 46 px on a phone)
       4xl:      page H1 on compact heroes, the carbon copy's big code, the closing band
       h1:       place codes on a coupon (FNC, FUN: 46 px at 1440)
       h2:       the wordmark, headings inside prose (30 px at 1440)
       h3:       fares in the turquoise tab, carbon values, questions
       h4:       tab caps: "///" section heads, coupon routes, buttons
       subtitle: the hero lede
       body:     reading text (never smaller for p and li)
       ui:       controls, small lines, mono data
       caption:  tracked caps labels */
    --font-size-display: clamp(2.875rem, 1.55rem + 3.9vw, 4.75rem);
    --font-size-4xl: clamp(2.5rem, 1.6rem + 2.6vw, 4rem);
    --font-size-h1: clamp(2.25rem, 1.7rem + 1.4vw, 2.875rem);
    --font-size-h2: clamp(1.5rem, 1.2rem + 0.9vw, 1.875rem);
    --font-size-h3: clamp(1.25rem, 1.15rem + 0.3vw, 1.375rem);
    --font-size-h4: 1.125rem;
    --font-size-subtitle: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
    --font-size-body: 1.0625rem;
    --font-size-ui: 0.9375rem;
    --font-size-caption: 0.8125rem;

    --line-height-body: 1.5;
    --line-height-ui: 1.35;
    --line-height-heading: 1;
    --line-height-tight: 0.9;
    --tracking-display: -0.01em;
    --tracking-heading: 0.02em;
    --tracking-caps: 0.14em;
    --tracking-tab: 0.1em;

    /* ---- Spacing and layout ---- */
    --space-3xs: 0.125rem;
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4.5rem;
    --gutter: clamp(1rem, 0.4rem + 3vw, 2rem);
    --content-width: 90rem;
    --prose-width: 66ch;
    --header-height: 4.875rem;
    --clock-height: 2rem;
    --tap: 2.75rem;
    --gate-height: 3.25rem;
    --row-height: 3.5rem;

    /* ---- Rules and shape: hairline-ruled fare boxes, punched notches, tear lines ----
       The rule tokens that carry ink (--rule, --rule-ink, --rule-coupon, --rule-tear, --rule-head,
       --rule-field, --focus-ring) are set in the "ink composites" rule below, so paper re-inks them. */
    --radius: 3px;
    --radius-coupon: 6px;
    --notch: 0.875rem;
    /* A coupon's depth: the next coupon of the book showing under it, as a thin sheet edge. */
    --shadow-sheet: 0 14px 16px -12px rgba(7, 59, 52, 0.4);
    --shadow-gate: 0 8px 16px -10px rgba(28, 116, 67, 0.55);
    --shadow-panel: 0 14px 30px -18px rgba(7, 59, 52, 0.45);
    --shadow-bar: 0 -10px 24px -16px rgba(7, 59, 52, 0.5);

    /* ---- Printed marks ---- */
    /* "///": three slashes before a section head, used as a mask over the accent colour (drawn,
       so screen readers skip them). */
    --slashes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 16'%3E%3Cpath fill='%23000' d='M6.4 0h3.5L3.5 16H0zM14.4 0h3.5l-6.4 16H8zM22.4 0h3.5l-6.4 16H16z'/%3E%3C/svg%3E");
    /* Rubber-stamp ink: a grain mask that leaves a few pale specks in a stamp's ink. */
    --ink-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 0 0 0 2.25'/%3E%3C/filter%3E%3Crect width='160' height='80' filter='url(%23g)'/%3E%3C/svg%3E");
    /* The void hatch under a VOID stamp. */
    --void-hatch: repeating-linear-gradient(135deg, rgba(192, 50, 42, 0.12) 0 6px, transparent 6px 12px);

    /* ---- Motion: one authored moment (the fare tabs re-stamp) ---- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --restamp: 260ms;
    --z-sticky: 40;
    --z-header: 50;
}

/* ---- Night ("Levada"): the device's dark setting, unless the visitor chose day ----------------
   The same declarations twice: once under the media query, once for the switch's forced night. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --page: var(--forest);
        --page-deep: var(--forest-band);
        --band: var(--forest-band);
        --head: var(--forest);
        --raised: var(--forest-band);
        --raised-hover: var(--forest-line);
        --strip: var(--forest-band);
        --foot: var(--forest-band);
        --ink: var(--ivory);
        --ink-soft: var(--ivory-soft);
        --ink-faint: var(--ivory-faint);
        --on-ink: var(--forest);
        --line-ink: var(--forest-line);
        --hair-ink: rgba(248, 245, 236, 0.2);
        --hair-strong: rgba(248, 245, 236, 0.5);
        --accent-ink: var(--sea-light);
        --cell: var(--sea-ink);
        --go: var(--leaf);
        --carbon: var(--sea-light);
        --carbon-paper: var(--forest-band);
        --carbon-rule: rgba(108, 203, 184, 0.45);
        --hl-tint: rgba(108, 203, 184, 0.16);
        --stamp-blend: normal;
        --red-grain: none;
        --shadow-sheet: 0 14px 16px -12px rgba(0, 0, 0, 0.65);
        --shadow-gate: 0 8px 18px -10px rgba(0, 0, 0, 0.7);
        --shadow-panel: 0 16px 32px -18px rgba(0, 0, 0, 0.75);
        --shadow-bar: 0 -10px 24px -16px rgba(0, 0, 0, 0.7);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --page: var(--forest);
    --page-deep: var(--forest-band);
    --band: var(--forest-band);
    --head: var(--forest);
    --raised: var(--forest-band);
    --raised-hover: var(--forest-line);
    --strip: var(--forest-band);
    --foot: var(--forest-band);
    --ink: var(--ivory);
    --ink-soft: var(--ivory-soft);
    --ink-faint: var(--ivory-faint);
    --on-ink: var(--forest);
    --line-ink: var(--forest-line);
    --hair-ink: rgba(248, 245, 236, 0.2);
    --hair-strong: rgba(248, 245, 236, 0.5);
    --accent-ink: var(--sea-light);
    --cell: var(--sea-ink);
    --go: var(--leaf);
    --carbon: var(--sea-light);
    --carbon-paper: var(--forest-band);
    --carbon-rule: rgba(108, 203, 184, 0.45);
    --hl-tint: rgba(108, 203, 184, 0.16);
    --stamp-blend: normal;
    --red-grain: none;
    --shadow-sheet: 0 14px 16px -12px rgba(0, 0, 0, 0.65);
    --shadow-gate: 0 8px 18px -10px rgba(0, 0, 0, 0.7);
    --shadow-panel: 0 16px 32px -18px rgba(0, 0, 0, 0.75);
    --shadow-bar: 0 -10px 24px -16px rgba(0, 0, 0, 0.7);
}

/* ---- Paper: white coupon stock in both themes, always inked in night teal ---------------------
   Every surface that is a sheet of paper re-declares the day ink, so its contents read the same by
   day and by night. Holes and notches keep showing --ground (the page or band around the sheet).
   A new paper surface joins this list. */
.coupon,
.coupons__more,
.farebox,
.screen,
.plate,
.carbon__bar,
.pass__head,
.pass__stub,
.qc,
.req-progress,
.req-panel,
.cta .cta__inner,
.text--note .text__box,
.prose code,
.legal--block,
.map__figure,
.plan,
.card,
.sign-card,
.itin__stop,
.cmp .is-ours,
.cmp-card__row.is-ours,
.facts__panel,
.rules__sheet,
.review,
.guide-rail__card,
.avail__sheet,
.now__sheet,
.stamp--red,
.stamp--void,
.pill--closed {
    color-scheme: light;
    --raised: var(--paper);
    --raised-hover: var(--ivory);
    --ink: var(--forest);
    --ink-soft: var(--forest-soft);
    --ink-faint: var(--forest-faint);
    --on-ink: var(--paper);
    --line-ink: var(--forest);
    --hair-ink: rgba(7, 59, 52, 0.24);
    --hair-strong: rgba(7, 59, 52, 0.62);
    --accent-ink: var(--sea-ink);
    --go: var(--laurel);
    --carbon: var(--sea-ink);
    --carbon-paper: var(--mist);
    --carbon-rule: rgba(28, 115, 100, 0.5);
    --hl-tint: rgba(108, 203, 184, 0.14);
    --stamp-blend: multiply;
    color: var(--ink);
}

/* Red states carry their own white paper: they never multiply into the ground under them. */
.stamp--red,
.stamp--void,
.pill--closed {
    --stamp-blend: normal;
}

/* Paper classes drawn straight on the page, with no sheet under them, take the page's ink back. */
.fares--extras .farebox {
    color-scheme: inherit;
    --raised: inherit;
    --raised-hover: inherit;
    --ink: inherit;
    --ink-soft: inherit;
    --ink-faint: inherit;
    --on-ink: inherit;
    --line-ink: inherit;
    --hair-ink: inherit;
    --hair-strong: inherit;
    --accent-ink: inherit;
    --go: inherit;
    --carbon: inherit;
    --carbon-paper: inherit;
    --carbon-rule: inherit;
    --hl-tint: inherit;
    --stamp-blend: inherit;
    color: inherit;
}

/* ---- Ink composites: resolved wherever the ink is declared (the root and every paper surface) */
:root,
.coupon,
.coupons__more,
.farebox,
.screen,
.plate,
.carbon__bar,
.pass__head,
.pass__stub,
.qc,
.req-progress,
.req-panel,
.cta .cta__inner,
.text--note .text__box,
.prose code,
.legal--block,
.map__figure,
.plan,
.card,
.sign-card,
.itin__stop,
.cmp .is-ours,
.cmp-card__row.is-ours,
.facts__panel,
.rules__sheet,
.review,
.guide-rail__card,
.avail__sheet,
.now__sheet,
.stamp--red,
.stamp--void,
.pill--closed {
    --rule: 1px solid var(--hair-ink);
    --rule-ink: 1.5px solid var(--line-ink);
    --rule-coupon: 2px solid var(--ink);
    --rule-tear: 1.5px dashed var(--ink);
    --rule-head: 1.5px solid var(--ink);
    --rule-field: 1.5px solid var(--hair-strong);
    --focus-ring: 3px solid var(--accent-ink);
}
/* ==========================================================================
   10 base: element defaults for the ticket wallet.
   The mist page (night teal by night) owns the ground; night-teal ink is the text, the rules and
   the heads (mist by night); turquoise fills the fare tabs and mint the gate; turquoise ink
   carries the figures; red is only for VOID and closed. Colour roles: 00-tokens.css.
   One declaration per line (the typography audit reads line by line).
   ========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: 5rem;
    background: var(--page);
    scrollbar-color: var(--ink-faint) var(--page-deep);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--page);
    color: var(--ink);
    font-family: var(--type-body-font);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    font-weight: 400;
    font-kerning: normal;
    font-variant-numeric: lining-nums;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    font-weight: 700;
    line-height: var(--line-height-heading);
    letter-spacing: var(--tracking-heading);
    text-transform: uppercase;
    text-wrap: balance;
}

h1 {
    font-family: var(--type-h1-font);
    font-size: var(--font-size-h1);
}

h2 {
    font-family: var(--type-h2-font);
    font-size: var(--font-size-h2);
}

h3 {
    font-family: var(--type-h3-font);
    font-size: var(--font-size-h3);
}

h4 {
    font-family: var(--type-h4-font);
    font-size: var(--font-size-h4);
}

p,
figure,
dl,
dd,
ol,
ul {
    margin: 0;
}

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

a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--hair-strong);
    text-underline-offset: 0.22em;
}

a:hover {
    text-decoration-color: currentColor;
}

b,
strong {
    font-weight: 700;
}

small {
    font-size: inherit;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

th {
    font-weight: inherit;
    text-align: left;
}

button,
input,
select,
textarea {
    font-family: var(--type-body-font);
    font-size: var(--font-size-body);
    color: inherit;
    letter-spacing: inherit;
}

button {
    cursor: pointer;
}

input,
select,
textarea {
    caret-color: var(--accent-ink);
    accent-color: var(--ink);
}

fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

legend {
    padding: 0;
}

[hidden],
a[data-missing-link] {
    display: none !important;
}

::selection {
    background: var(--carbon-paper);
    color: var(--ink);
}

:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 3px;
}

::placeholder {
    color: var(--ink-faint);
    opacity: 1;
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--page-deep);
}

::-webkit-scrollbar-thumb {
    background: var(--ink-faint);
    border: 3px solid var(--page-deep);
    border-radius: 6px;
}

/* ---- Layout: every band aligns to one edge; bands and rows run full bleed ---- */
:root {
    --edge: max(var(--gutter), calc((100vw - var(--content-width)) / 2 + var(--gutter)));
}

.wrap {
    padding-inline: var(--edge);
}

/* ---- Utilities ---- */
.vh {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: 0;
    left: var(--gutter);
    z-index: 100;
    padding: var(--space-sm) var(--space-md);
    background: var(--ink);
    color: var(--on-ink);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-120%);
}

.skip-link:focus-visible {
    transform: translateY(0);
}

main:focus {
    outline: none;
}

.icon {
    display: inline-block;
    flex: none;
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em;
}

/* A small square dot between items of a line. */
.sep {
    display: inline-block;
    width: 3px;
    height: 3px;
    margin: 0 0.55em;
    border-radius: 1px;
    background: currentColor;
    opacity: 0.75;
    vertical-align: 0.24em;
}

/* ---- Carbon numerals: Overpass Mono for data (times, codes, seats, prices, statuses) ----
   The class keeps the board theme's name (.led), so templates and site.js still fill it. */
.led {
    font-family: var(--font-mono);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* The board theme drew the colon; Overpass Mono's own colon is kept (the span stays for site.js). */
.colon {
    display: inline;
}

/* ---- Prose (text blocks, notes under tables, FAQ answers) ---- */
.prose {
    max-width: var(--prose-width);
    color: var(--ink);
}

.prose > * + * {
    margin-top: 1em;
}

.prose > :first-child {
    margin-top: 0;
}

.prose code {
    padding: 0.1em 0.35em 0;
    border-radius: 2px;
    background: var(--coupon);
    font-family: var(--type-body-font);
}

.prose h2 {
    margin-top: 2.2em;
    font-size: var(--font-size-h2);
    letter-spacing: var(--tracking-caps);
}

.prose h3 {
    margin-top: 1.8em;
    font-size: var(--font-size-h3);
}

.prose h2 + *,
.prose h3 + * {
    margin-top: 0.6em;
}

.prose ul,
.prose ol {
    padding-left: 1.25em;
}

.prose li + li {
    margin-top: 0.4em;
}

.prose li::marker {
    color: var(--ink-soft);
}

.prose a {
    text-decoration-color: var(--ink-faint);
}

.prose a:hover {
    text-decoration-color: currentColor;
}

.prose strong {
    font-weight: 700;
}

.prose table {
    width: 100%;
    font-variant-numeric: tabular-nums;
}

.prose th,
.prose td {
    padding: 0.5em 0.75em 0.4em 0;
    border-bottom: var(--rule);
    vertical-align: top;
}

.prose th {
    color: var(--ink);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-caption);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    border-bottom: var(--rule-head);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* The inline icon sprite must not create a line box above the header. */
.sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}
/* ==========================================================================
   20 components: the shell (top strip, the header's cells, breadcrumbs, the
   footer as the wallet's back cover, the phone bar) and the pieces the blocks
   share (gates, pills, stamps, "///" section heads, the photo frame, the fare
   board table, the coupon wallet, the quote card on coupon stock, the carbon copy).
   Breakpoints: 30em (large phone), 48em (tablet), 60em (desktop header),
   64em (two-column blocks), 80em (the home's wallet row), 90em (one-row header).
   ========================================================================== */

/* ---------------------------------------------------------------- actions */
.gate,
.ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: var(--tap);
    padding: 2px 1.25rem 0;
    border: 0;
    border-radius: var(--radius);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-h4);
    font-weight: 800;
    letter-spacing: var(--tracking-caps);
    line-height: 1.1;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 120ms var(--ease-out), color 120ms var(--ease-out), box-shadow 120ms var(--ease-out), transform 120ms var(--ease-out);
}

.gate {
    background: var(--gate);
    color: var(--on-gate);
    box-shadow: var(--shadow-gate);
}

.gate:hover {
    background: var(--gate-hover);
}

.gate:active {
    background: var(--gate-press);
    transform: translateY(1px);
    box-shadow: none;
}

.ghost:active {
    transform: translateY(1px);
}

.gate[disabled],
.gate[aria-disabled="true"] {
    background: var(--paper-tint-deep);
    color: var(--ink-faint);
    box-shadow: inset 0 0 0 1.5px var(--hair-ink);
    cursor: not-allowed;
    transform: none;
}

.ghost {
    background: transparent;
    color: var(--ink);
    box-shadow: inset 0 0 0 2px var(--ink);
}

.ghost:hover {
    background: var(--ink);
    color: var(--on-ink);
}

.gate .icon,
.ghost .icon {
    width: 1.05em;
    height: 1.05em;
    margin-top: -2px;
}

/* The sign arrow belonged to the board: wallet buttons are words. Message and phone glyphs stay. */
.gate > .icon:has(use[href="#i-arrow"]),
.ghost > .icon:has(use[href="#i-arrow"]) {
    display: none;
}

.gate--hero,
.ghost--hero {
    min-height: var(--gate-height);
    padding-inline: 1.625rem;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.sign-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--tap);
    padding-top: 2px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    background: none;
    border: 0;
}

.sign-link .icon {
    width: 0.9em;
    height: 0.9em;
    margin-top: -2px;
    color: var(--accent-ink);
}

.sign-link:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
}

.chip {
    display: inline-block;
    padding: 0.3em 0.45em 0.15em;
    border-radius: 2px;
    box-shadow: inset 0 0 0 1.5px var(--ink);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-caption);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    vertical-align: 0.22em;
    white-space: nowrap;
}

/* A small status tag in a table (Today on the island). */
.pill {
    display: inline-block;
    padding: 0.28em 0.6em 0.14em;
    border-radius: var(--radius);
    box-shadow: inset 0 0 0 1.5px currentColor;
    color: var(--ink);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-caption);
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.1;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Closed is a red state: red ink on white paper in both themes (red on night teal fails AA). */
.pill--closed {
    background: var(--coupon);
    color: var(--void);
}

a.pill:hover {
    background: var(--ink);
    color: var(--on-ink);
    box-shadow: none;
}

/* ---- Stamps: states are stamped, not badged. ON REQUEST in ink, REQUESTED in turquoise ink,
   CONFIRMED in laurel (mint by night), CLOSED and VOID in red on white paper in both themes. ---- */
.stamp {
    display: inline-block;
    margin: 0;
    padding: 0.2em 0.5em 0.06em;
    border: 0.11em solid currentColor;
    border-radius: 0.18em;
    color: var(--ink);
    font-family: var(--type-label-caps-font);
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    -webkit-mask-image: var(--ink-grain);
    mask-image: var(--ink-grain);
    -webkit-mask-size: 10rem 5rem;
    mask-size: 10rem 5rem;
}

.stamp--sm {
    padding: 0.32em 0.6em 0.16em;
    border-width: 2px;
    font-size: var(--font-size-caption);
    letter-spacing: 0.12em;
}

.stamp--red {
    background: var(--coupon);
    color: var(--void);
}

.stamp--red,
.stamp--void {
    -webkit-mask-image: var(--red-grain);
    mask-image: var(--red-grain);
}

.stamp--requested {
    color: var(--accent-ink);
}

/* WAITLIST: a product shown with its planned price but not sold yet (pricing status: waitlist). */
.status--waitlist {
    color: var(--accent-ink);
}

.stamp--go {
    color: var(--go);
}

.carbon .stamp--requested,
.stamp--void {
    position: absolute;
    z-index: 2;
    font-size: var(--font-size-h2);
    border-width: 4px;
    opacity: 0.92;
    mix-blend-mode: var(--stamp-blend);
    pointer-events: none;
}

.stamp--void {
    padding-inline: 0.55em 0.4em;
    color: var(--void);
    background: var(--void-hatch), var(--coupon);
    font-size: var(--font-size-h1);
    letter-spacing: 0.18em;
}

/* ---------------------------------------------------------------- top strip ("Today on the island") */
.clock {
    background: var(--strip);
    color: var(--coupon);
}

.clock__inner {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    min-height: var(--clock-height);
    padding-block: 0.3rem 0.2rem;
}

.clock__item {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    white-space: nowrap;
}

.clock__label {
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-caption);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
}

.clock__item--title .clock__label {
    color: var(--coupon);
}

.clock__item--title .clock__label::before {
    content: "";
    display: inline-block;
    width: 1.5em;
    height: 0.85em;
    margin-right: 0.45em;
    background: var(--sea-light);
    -webkit-mask: var(--slashes) no-repeat left center / contain;
    mask: var(--slashes) no-repeat left center / contain;
    vertical-align: -0.08em;
}

.clock__value {
    color: var(--coupon);
    font-family: var(--font-mono);
    font-size: var(--font-size-ui);
    font-weight: 600;
}

/* The one ticking thing: the island clock's colon, once the page has settled. */
[data-clock-time] .colon {
    animation: clock-tick 1s steps(1) 7s infinite;
}

@keyframes clock-tick {
    50% {
        opacity: 0.3;
    }
}

.clock__note {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.86);
    font-size: var(--font-size-caption);
    font-weight: 500;
    line-height: 1.3;
}

.clock--note .clock__note {
    margin-inline: auto;
    text-align: center;
}

.clock__date,
.clock__place,
.clock__item--title,
.clock:not(.clock--note) .clock__note {
    display: none;
}

@media (min-width: 30em) {
    .clock__date,
    .clock__place {
        display: inline;
    }
}

@media (min-width: 60em) {
    .clock__inner {
        gap: var(--space-xl);
    }

    .clock:not(.clock--note) .clock__note {
        display: block;
    }
}

@media (min-width: 80em) {
    .clock__item--title {
        display: flex;
    }
}

/* ---------------------------------------------------------------- header: the wallet's cover row */
/* The header holds to the top: it slides away while you scroll down and comes back as soon as you
   scroll up (site.js initRoad sets .is-hidden). */
.top {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    transition: transform 250ms var(--ease-out);
}

.top.is-hidden {
    transform: translateY(-100%);
}

.bar {
    position: relative;
    z-index: var(--z-header);
    background: var(--head);
    border-bottom: var(--rule-ink);
}

.bar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--space-sm);
    min-height: 3.875rem;
    padding-inline: var(--edge);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    min-height: var(--tap);
    margin-right: auto;
    color: var(--ink);
    text-decoration: none;
}

.brand__mark {
    flex: none;
    width: 2.375rem;
    height: 2.375rem;
}

/* The header lockup: the whole logo, sized by height. */
.brand__logo {
    flex: none;
    width: auto;
    height: 2.625rem;
}

@media (max-width: 29.99em) {
    .brand__logo {
        height: 2.25rem;
    }
}

@media (min-width: 60em) {
    .brand__logo {
        height: 3rem;
    }
}

.brand__name {
    display: flex;
    flex-direction: column;
    font-family: var(--type-h1-font);
    font-size: var(--font-size-h3);
    font-style: italic;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 0.92;
    text-transform: uppercase;
    white-space: nowrap;
}

.brand__accent {
    color: var(--accent-ink);
}

.brand__tag {
    margin-top: 0.3rem;
    color: var(--go);
    font-size: var(--font-size-caption);
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1;
}

.signs__list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sign {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--tap);
    padding-top: 3px;
    color: var(--ink);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-ui);
    font-weight: 700;
    letter-spacing: var(--tracking-tab);
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.sign:hover .sign__label {
    text-decoration: underline;
    text-decoration-color: var(--accent-ink);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.4em;
}

.sign.is-here .sign__label {
    text-decoration: underline;
    text-decoration-color: var(--accent-ink);
    text-decoration-thickness: 3px;
    text-underline-offset: 0.4em;
}

.sign__face {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius);
    object-fit: cover;
}

.signs__contact {
    display: none;
}

/* The driver's languages: the right-hand cell, a link to the driver page. */
.bar__driver {
    display: none;
    margin: 0;
    color: var(--ink);
    text-decoration: none;
}

.bar__driver-label {
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-caption);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.bar__driver-langs {
    margin-top: 0.2rem;
    color: var(--carbon);
    font-family: var(--font-mono);
    font-size: var(--font-size-ui);
    font-weight: 600;
    letter-spacing: 0.04em;
}

a.bar__driver:hover .bar__driver-label,
.bar__driver.is-here .bar__driver-label {
    text-decoration: underline;
    text-decoration-color: var(--accent-ink);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.35em;
}

.bar__actions {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.bar__wa {
    display: grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    border-radius: var(--radius);
    color: var(--ink);
    box-shadow: inset 0 0 0 2px var(--ink);
}

.bar__wa .icon {
    width: 1.35rem;
    height: 1.35rem;
}

.gate--bar {
    min-height: var(--tap);
    padding-inline: 1.125rem;
    box-shadow: none;
}

/* ---- The day/night switch: one toggle button drawn as two tab caps, the lit one filled in ink.
   aria-pressed="true" = night. Without JavaScript it is hidden and the device setting decides. */
.mode {
    display: inline-flex;
    align-items: stretch;
    flex: none;
    height: 2.25rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    box-shadow: inset 0 0 0 1.5px var(--ink);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-caption);
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
}

.no-js .mode {
    display: none;
}

.mode__opt {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 2px 0.8em 0;
    transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}

.mode__opt .icon {
    width: 1.05em;
    height: 1.05em;
    margin-top: -2px;
}

.mode[aria-pressed="false"] .mode__opt--day,
.mode[aria-pressed="true"] .mode__opt--night {
    background: var(--ink);
    color: var(--on-ink);
}

.mode:hover .mode__opt {
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.3em;
}

.mode:hover .mode__opt--day:is([aria-pressed="false"] *),
.mode:hover .mode__opt--night:is([aria-pressed="true"] *) {
    text-decoration: none;
}

/* Phones: one square moon button, filled while the night theme shows (the button keeps its
   name, "Night theme", and its pressed state). */
@media (max-width: 29.99em) {
    .mode {
        width: 2.625rem;
        height: var(--tap);
        border-radius: var(--radius);
        box-shadow: inset 0 0 0 2px var(--ink);
    }

    .mode__opt--day,
    .mode__word {
        display: none;
    }

    .mode__opt--night {
        justify-content: center;
        width: 100%;
        padding: 0;
    }

    .mode__opt .icon {
        width: 1.25rem;
        height: 1.25rem;
        margin-top: 0;
    }
}

.menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--tap);
    padding: 3px 0.875rem 0;
    border: 0;
    border-radius: var(--radius);
    background: var(--raised);
    color: var(--ink);
    box-shadow: inset 0 0 0 2px var(--ink);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-ui);
    font-weight: 700;
    letter-spacing: var(--tracking-tab);
    text-transform: uppercase;
}

.menu-btn .icon {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: -3px;
}

.menu-btn .icon--close,
.bar.is-open .menu-btn .icon--open {
    display: none;
}

.bar.is-open .menu-btn .icon--close {
    display: inline-block;
}

/* Phones and small tablets: the navigation folds into the menu. */
@media (max-width: 59.99em) {
    .signs {
        order: 3;
        flex-basis: 100%;
    }

    .signs__list {
        flex-direction: column;
    }

    .signs__list .sign {
        display: flex;
        width: 100%;
        min-height: 3.25rem;
        border-top: var(--rule);
        font-size: var(--font-size-h4);
    }

    .signs__contact {
        display: flex;
        flex-wrap: wrap;
        gap: 0 var(--space-lg);
        padding-block: var(--space-xs) var(--space-md);
        border-top: var(--rule);
    }

    .js .signs {
        display: none;
    }

    .js .bar.is-open .signs {
        display: block;
    }

    .no-js .menu-btn {
        display: none;
    }
}

@media (max-width: 29.99em) {
    .brand {
        gap: 0.45rem;
    }

    .brand__mark {
        width: 2rem;
        height: 2rem;
    }

    .brand__name {
        font-size: var(--font-size-h4);
    }

    .brand__tag {
        letter-spacing: 0.14em;
    }

    .bar__actions {
        gap: 0.25rem;
    }

    .bar__inner {
        column-gap: var(--space-xs);
    }

    .gate--bar {
        padding-inline: 0.7rem;
    }

    .menu-btn {
        width: var(--tap);
        padding: 0;
        justify-content: center;
    }

    .menu-btn__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@media (max-width: 21.99em) {
    .brand__name {
        display: none;
    }
}

/* Phones narrower than 390 px: the slogan gives way and the wordmark steps down, so the bar stays
   one row (lockup, switch, Book, Menu). */
@media (max-width: 24.3em) {
    .brand__tag {
        display: none;
    }

    .brand__name {
        font-size: var(--font-size-ui);
    }
}


/* Tablets and small desktops: the navigation is its own row under the wordmark. */
@media (min-width: 60em) {
    .menu-btn,
    .bar__wa {
        display: none;
    }

    .brand__name {
        font-size: var(--font-size-h2);
    }

    .brand__mark {
        width: 2.75rem;
        height: 2.75rem;
    }

    .bar__driver {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-self: stretch;
        padding: 0.5rem 1.5rem 0.4rem;
        border-left: var(--rule-ink);
    }

    .signs {
        order: 3;
        flex-basis: calc(100% + 2 * var(--edge));
        margin-inline: calc(var(--edge) * -1);
        padding-inline: var(--edge);
        border-top: var(--rule);
    }

    .signs__list {
        flex-wrap: wrap;
        justify-content: flex-start;
        column-gap: clamp(1.5rem, 3vw, 2.75rem);
    }

    .signs__item--about {
        display: none;
    }

    .gate--bar {
        align-self: stretch;
        min-height: 0;
        margin-block: 0.75rem;
    }
}

/* Wide screens: one row of cells, as on the comp (wordmark | navigation | languages), with the Book
   tab as the last cell. */
@media (min-width: 90em) {
    .bar__inner {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        align-items: stretch;
        min-height: var(--header-height);
        padding: 0;
    }

    /* The logo cell: the same ink rule as the languages cell. The left padding is the page edge
       (the logo lines up with the content); the right one is fixed, so the cell never grows
       with a wide screen (--edge does). */
    .brand {
        gap: 0.75rem;
        margin: 0;
        padding: 0 var(--gutter) 0 var(--edge);
        border-right: var(--rule-ink);
    }

    /* One row holds the lockup, six signs, the languages, the switch and Book: the wordmark
       steps down a size here and the slogan keeps to its width. */
    .brand__name {
        font-size: var(--font-size-h3);
    }

    .brand__tag {
        letter-spacing: 0.13em;
    }

    .signs {
        display: flex;
        align-items: center;
        justify-content: center;
        order: 0;
        margin: 0;
        padding-inline: var(--space-md);
        border-top: 0;
    }

    .signs__list {
        justify-content: center;
        gap: clamp(0.875rem, 1.05vw, 1.75rem);
    }

    .bar__driver {
        padding: 0 1.25rem;
    }

    .bar__actions {
        gap: 0;
    }

    .bar__actions .mode {
        align-self: center;
        margin-right: 1.25rem;
    }

    .gate--bar {
        margin: 0;
        border-radius: 0;
        padding-inline: 1.5rem;
    }
}

/* ---------------------------------------------------------------- breadcrumbs */
.crumbs {
    border-bottom: var(--rule);
}

.crumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.5rem;
    margin: 0;
    padding-block: 0.25rem;
    list-style: none;
    color: var(--ink-soft);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-caption);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.crumbs__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.crumbs__item a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding-top: 2px;
    color: var(--ink);
    text-decoration: none;
}

.crumbs__item a:hover {
    text-decoration: underline;
    text-decoration-color: var(--accent-ink);
}

.crumbs__item .icon {
    width: 0.7rem;
    height: 0.7rem;
    color: var(--accent-ink);
}

/* ---------------------------------------------------------------- section heads: "///" tab caps */
.sec-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    column-gap: var(--space-lg);
    row-gap: var(--space-2xs);
}

.sec-head__title,
.today__title {
    font-family: var(--type-h2-font);
    font-size: var(--font-size-h4);
    font-style: normal;
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    line-height: 1.2;
    text-transform: uppercase;
}

.sec-head__title::before,
.today__title::before {
    content: "";
    display: inline-block;
    width: 1.45em;
    height: 0.82em;
    margin-right: 0.5em;
    background: var(--accent-ink);
    -webkit-mask: var(--slashes) no-repeat left center / contain;
    mask: var(--slashes) no-repeat left center / contain;
    vertical-align: -0.06em;
}

.sec-head__chip {
    margin-right: 0.35em;
}

.sec-head__intro {
    flex: 1 1 100%;
    max-width: 60ch;
    color: var(--ink-soft);
    text-wrap: pretty;
}

/* A section's informative tag (the checked date, a duration, a price): a quiet mono line. */
.sec-head__meta {
    color: var(--ink-soft);
    font-family: var(--font-mono);
    font-size: var(--font-size-caption);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sec-head__more {
    margin-left: auto;
    font-size: var(--font-size-ui);
}

/* The large sections below the fold (route, comparison, questions) set their heading in the
   airline italic, the wallet's display voice; the "///" stays with the small tab heads. */
.quote__copy > .sec-head .sec-head__title,
.faq__head .sec-head__title,
.compare .sec-head__title,
.request__copy .sec-head__title,
.cta__title,
.driver__title {
    font-family: var(--type-h1-font);
    font-size: var(--font-size-4xl);
    font-style: italic;
    font-weight: 800;
    letter-spacing: var(--tracking-display);
    line-height: 0.9;
}

.quote__copy > .sec-head .sec-head__title::before,
.faq__head .sec-head__title::before,
.compare .sec-head__title::before,
.request__copy .sec-head__title::before {
    content: none;
}

/* ---------------------------------------------------------------- photo frame: a window on coupon stock
   The photo sits in a window cut into a white coupon (a 6px margin of stock around it); its caption
   strip stands behind a tear line, punched at both edges: a code in tab caps, the caption, the credit. */
.screen {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border: var(--rule-coupon);
    border-radius: var(--radius-coupon);
    background: var(--coupon);
    box-shadow: var(--shadow-sheet);
}

.screen__glass {
    margin: 6px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: 2px;
    background: var(--paper-tint-deep);
}

/* A page hero's photo keeps the 3:2 frame most island photos are shot in. */
.hero__screen .screen__glass {
    aspect-ratio: 3 / 2;
}

.screen__glass picture {
    display: block;
    height: 100%;
}

.screen__glass img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 52%;
    filter: saturate(0.9);
}

.plate {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.875rem;
    row-gap: 0.125rem;
    min-height: 2.5rem;
    padding: 0.55rem 0.875rem 0.4rem;
    border-top: var(--rule-tear);
    color: var(--ink-soft);
    font-size: var(--font-size-caption);
    line-height: 1.35;
}

.plate::before,
.plate::after {
    content: "";
    position: absolute;
    top: calc(var(--notch) / -2 - 1px);
    width: var(--notch);
    height: var(--notch);
    border: var(--rule-coupon);
    border-radius: 50%;
    background: var(--ground);
}

.plate::before {
    left: calc(var(--notch) / -2 - 2px);
    clip-path: inset(0 0 0 50%);
}

.plate::after {
    right: calc(var(--notch) / -2 - 2px);
    clip-path: inset(0 50% 0 0);
}

.plate__led {
    color: var(--ink);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-ui);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
}

.plate__caption {
    color: var(--ink);
    font-weight: 500;
}

.plate__credit {
    margin-left: auto;
    color: var(--ink-faint);
}

/* ---------------------------------------------------------------- the fare board: a ruled fare box on coupon stock
   The table variant of the price-table (and the rows every other fare list borrows): the table sits
   in a coupon (white stock, night-teal keyline, the next sheet showing under it). Column heads are tab
   caps over the tear line, punched at both edges; each ride reads place codes, route, time and the
   fares in carbon numerals, its state stamped, and it ends in a stub with the turquoise fare tab. A row
   opens into a tear-off detail stub on stock: the dotted island with the fare's zone and its turquoise-ink leg. */
.farebox {
    --farebox-head: 2.625rem;
    position: relative;
    border: var(--rule-coupon);
    border-radius: var(--radius-coupon);
    background: var(--coupon);
    box-shadow: var(--shadow-sheet);
}

/* Punched notches where the heads' tear line meets the keyline. */
.farebox::before,
.farebox::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: calc(var(--farebox-head) - 0.44rem);
    width: var(--notch);
    height: var(--notch);
    border: var(--rule-coupon);
    border-radius: 50%;
    background: var(--ground);
}

.farebox::before {
    left: calc(var(--notch) / -2 - 2px);
    clip-path: inset(0 0 0 50%);
}

.farebox::after {
    right: calc(var(--notch) / -2 - 2px);
    clip-path: inset(0 50% 0 0);
}

/* The last row's hairline sits under the keyline, never beside it. */
.farebox > .board {
    margin-bottom: -1px;
}

.board {
    width: 100%;
    font-variant-numeric: tabular-nums;
}

.board__head th {
    height: var(--farebox-head);
    padding: 0.5rem 0.75rem 0.3rem;
    border-bottom: var(--rule-tear);
    color: var(--ink);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-caption);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}

.board__head th:first-child {
    padding-left: 3.25rem;
}

.board .row > th,
.board .row > td {
    height: var(--row-height);
    padding: 0.75rem 0.75rem 0.65rem;
    border-bottom: var(--rule);
    vertical-align: middle;
}

.board .row > :first-child {
    position: relative;
    padding-left: 3.25rem;
}

/* The stub: the last column stands behind a tear line, like the fare tab of a coupon. */
.board__head .c-book,
.board .row > .c-book {
    width: 1%;
    padding-inline: 0.875rem;
    border-left: var(--rule-tear);
}

.board .row--hl > * {
    background: var(--hl-tint);
}

.board .row--hl .route__codes {
    color: var(--accent-ink);
}

.board .row--open > * {
    border-bottom: var(--rule-tear);
}

/* The row's toggle: a small punched square that opens the detail stub. */
.row__toggle {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    display: grid;
    place-items: center;
    width: 1.875rem;
    height: 1.875rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: var(--raised);
    color: var(--ink);
    box-shadow: inset 0 0 0 1.5px var(--hair-strong);
    transform: translateY(-50%);
    transition: background-color 120ms var(--ease-out), color 120ms var(--ease-out);
}

/* A full tap target around the drawn square. */
.row__toggle::after {
    content: "";
    position: absolute;
    inset: -0.45rem;
}

.row__toggle .icon {
    width: 0.8rem;
    height: 0.8rem;
    transition: transform 160ms var(--ease-out);
}

.row__toggle:hover {
    box-shadow: inset 0 0 0 1.5px var(--ink);
}

.row__toggle[aria-expanded="true"] {
    background: var(--ink);
    color: var(--on-ink);
    box-shadow: none;
}

.row__toggle[aria-expanded="true"] .icon {
    transform: rotate(180deg);
}

.no-js .row__toggle {
    display: none;
}

/* Place codes, then the route in words. */
.route-cell {
    display: grid;
    grid-template-columns: 6.75rem minmax(0, 1fr);
    align-items: center;
    column-gap: 0.75rem;
}

.route-cell > .route:only-child {
    grid-column: 1 / -1;
}

.route__codes {
    display: inline-flex;
    align-items: center;
    gap: 0.2em;
    color: var(--ink);
    font-family: var(--type-h1-font);
    font-size: var(--font-size-h3);
    font-style: italic;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
}

.route__codes .icon {
    width: 0.62em;
    height: 0.62em;
    color: var(--accent-ink);
}

.route {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.route__name {
    font-size: var(--font-size-body);
    font-weight: 600;
    line-height: 1.3;
    text-wrap: pretty;
}

.route-arrow {
    width: 0.8em;
    height: 0.8em;
    margin: 0 0.35em;
    color: var(--accent-ink);
    vertical-align: -0.02em;
}

.route__sub {
    color: var(--ink-soft);
    font-size: var(--font-size-ui);
    font-weight: 500;
}

.chip--trail {
    margin-right: 0.3em;
    box-shadow: inset 0 0 0 1.5px var(--ink);
}

.cell-led {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    white-space: nowrap;
}

.cell-led .led {
    color: var(--carbon);
    font-size: var(--font-size-h4);
}

.cell-led small,
.cell-led__pre {
    color: var(--ink-soft);
    font-size: var(--font-size-caption);
    font-weight: 500;
}

.price {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    white-space: nowrap;
}

.price__led {
    color: var(--carbon);
    font-size: var(--font-size-h2);
    font-weight: 700;
}

.price__led--ask {
    font-size: var(--font-size-h4);
}

.price__per {
    color: var(--carbon);
    font-family: var(--font-mono);
    font-size: var(--font-size-ui);
    font-weight: 700;
}

.price__band,
.price__night {
    color: var(--ink-soft);
    font-size: var(--font-size-caption);
    font-weight: 500;
}

.price__night {
    display: block;
    margin-top: 0.35rem;
    font-family: var(--font-mono);
    white-space: nowrap;
}

.status {
    font-size: var(--font-size-caption);
}

.c-book {
    text-align: right;
}

/* The turquoise fare tab: the one control that books a ride from a list. */
.tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 6rem;
    min-height: var(--tap);
    padding: 2px 1rem 0;
    border-radius: var(--radius);
    background: var(--tab);
    color: var(--on-tab);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-h4);
    font-weight: 800;
    letter-spacing: var(--tracking-caps);
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color 120ms var(--ease-out), color 120ms var(--ease-out);
}

.tab .icon {
    width: 0.875rem;
    height: 0.875rem;
    margin-top: -2px;
}

.tab:hover {
    background: var(--tab-press);
}

.tab--quiet {
    background: var(--raised);
    color: var(--ink);
    box-shadow: inset 0 0 0 2px var(--ink);
}

.tab--quiet .icon {
    color: var(--accent-ink);
}

.tab--quiet:hover {
    background: var(--ink);
    color: var(--on-ink);
}

.tab--quiet:hover .icon {
    color: var(--on-ink);
}

/* The detail stub: torn off the open row, on stock, punched where the tear line meets the keyline. */
.board .detail > td {
    position: relative;
    padding: var(--space-md) 1.25rem var(--space-lg) 3.25rem;
    border-bottom: var(--rule);
    background: var(--paper-tint);
}

.board .detail > td::before,
.board .detail > td::after {
    content: "";
    position: absolute;
    top: -0.5rem;
    width: var(--notch);
    height: var(--notch);
    border: var(--rule-coupon);
    border-radius: 50%;
    background: var(--ground);
}

.board .detail > td::before {
    left: calc(var(--notch) / -2 - 2px);
    clip-path: inset(0 0 0 50%);
}

.board .detail > td::after {
    right: calc(var(--notch) / -2 - 2px);
    clip-path: inset(0 50% 0 0);
}

.js .detail--closed {
    display: none;
}

.detail__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-md) var(--space-xl);
}

.detail__map {
    flex: none;
    width: 15rem;
    padding: 0.5rem 0.625rem 0.375rem;
    border: 1.5px solid var(--ink);
    border-radius: 4px;
    background: var(--coupon);
}

.mini-map {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.mini-map__dot {
    fill: var(--ink);
    opacity: 0.55;
}

.mini-map__island {
    stroke: var(--ink);
    stroke-width: 0.7;
}

.mini-map__zone {
    fill: var(--carbon);
    opacity: 0.42;
}

.mini-map__route {
    fill: none;
    stroke: var(--accent-ink);
    stroke-width: 2.4;
    stroke-linecap: round;
}

.mini-map__start {
    fill: var(--ink);
}

.mini-map__end {
    fill: var(--accent-ink);
    stroke: var(--coupon);
    stroke-width: 1.5;
}

.mini-map__keyline {
    display: none;
}

.set-by {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-width: 30rem;
    padding-top: 0.25rem;
    color: var(--ink-soft);
    font-size: var(--font-size-ui);
    font-weight: 500;
    line-height: var(--line-height-ui);
}

.set-by__label {
    color: var(--ink);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-caption);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

.set-by__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ink);
    font-size: var(--font-size-body);
    font-weight: 600;
}

.set-by__item--indent {
    padding-left: 1.25rem;
}

.set-by__places {
    margin-top: 0.35rem;
    color: var(--ink-soft);
}

.swatch {
    flex: none;
    width: 0.75rem;
    height: 0.75rem;
    margin-top: -2px;
    border-radius: 1px;
    background: var(--carbon);
    opacity: 0.55;
}

/* The bands on the stub: ruled cells, label caps over carbon figures. */
.bands {
    display: flex;
    flex-wrap: wrap;
    margin-left: auto;
    border: 1.5px solid var(--ink);
    border-radius: 4px;
    background: var(--coupon);
}

.bands__row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 8rem;
    padding: 0.6rem 1rem 0.55rem;
}

.bands__row + .bands__row {
    border-left: 1.5px dashed var(--hair-strong);
}

.bands__row dt {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    color: var(--ink);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-caption);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

.bands__row dt .led {
    color: var(--ink);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-caption);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
}

.bands__row dt small {
    font-size: inherit;
}

.bands__row dd {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.25rem;
}

.bands__price {
    color: var(--carbon);
    font-size: var(--font-size-h2);
    font-weight: 700;
}

.bands__row .price__night {
    flex-basis: 100%;
}

/* ---------------------------------------------------------------- fields (quote card, form) */
.field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.field__label {
    color: var(--ink);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-caption);
    font-weight: 800;
    letter-spacing: var(--tracking-caps);
    line-height: var(--line-height-ui);
    text-transform: uppercase;
}

.field__hint {
    color: var(--ink-soft);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.field__control {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 3.25rem;
    border-radius: var(--radius);
    background: var(--coupon);
    box-shadow: inset 0 0 0 1.5px var(--hair-strong);
}

.field__control:focus-within {
    box-shadow: inset 0 0 0 2px var(--carbon);
}

.field__control > .icon {
    position: absolute;
    left: 0.875rem;
    width: 1.1rem;
    height: 1.1rem;
    color: var(--ink-soft);
    pointer-events: none;
}

.field__select,
.field__input,
.field__static {
    width: 100%;
    min-height: 3.25rem;
    padding: 0.55rem 0.875rem 0.4rem 2.75rem;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink);
    font-family: var(--type-body-font);
    font-size: var(--font-size-body);
    font-weight: 700;
    line-height: 1.3;
    appearance: none;
}

.field__static {
    display: flex;
    align-items: center;
}

.field__control--area .field__input {
    padding-left: 0.875rem;
    min-height: 6rem;
    resize: vertical;
    font-weight: 500;
}

.field__control:not(:has(> .icon)) .field__input,
.field__control:not(:has(> .icon)) .field__select {
    padding-left: 0.875rem;
}

.field__select {
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23072726' d='M4 8.2 6.2 6 12 11.8 17.8 6 20 8.2l-8 8z'/%3E%3C/svg%3E");
    background-position: right 0.9rem center;
    background-size: 0.875rem;
    background-repeat: no-repeat;
    text-overflow: ellipsis;
    cursor: pointer;
}

.field__select option,
.field__select optgroup {
    background: var(--coupon);
    color: var(--ink);
}

.field__input:focus,
.field__select:focus {
    outline: none;
}

/* A sample, not a value: lighter than what the visitor types. */
.field__input::placeholder {
    font-weight: 500;
}

.field__input::-webkit-calendar-picker-indicator {
    opacity: 0.75;
    cursor: pointer;
}

/* One glyph per date or time field: the field's own icon, never the browser's as well. Where the
   icon gives way (the quote card on phones) the placeholder carries the field. The picker opens
   from anywhere in the field (site.js initPickers; phones open it on tap anyway). */
.field__control:has(> .icon) .field__input::-webkit-calendar-picker-indicator {
    display: none;
}

.field__input[type="date"],
.field__input[type="time"] {
    cursor: pointer;
}

.field__input[aria-invalid="true"] {
    box-shadow: inset 0 0 0 2px var(--ink);
}

.field--invalid .field__control {
    box-shadow: inset 0 0 0 2px var(--ink);
}

.field__error {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ink);
    font-size: var(--font-size-ui);
    font-weight: 700;
}

.stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 3.25rem;
    border-radius: var(--radius);
    background: var(--coupon);
    box-shadow: inset 0 0 0 1.5px var(--hair-strong);
}

.stepper:focus-within {
    box-shadow: inset 0 0 0 2px var(--carbon);
}

.stepper__btn {
    display: grid;
    place-items: center;
    flex: none;
    width: 3rem;
    height: 3.25rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
}

.stepper__btn .icon {
    width: 0.95rem;
    height: 0.95rem;
}

.stepper__btn:hover {
    color: var(--accent-ink);
}

.stepper__btn[disabled] {
    color: var(--ink-faint);
    opacity: 0.45;
    cursor: default;
}

.stepper__value {
    align-self: stretch;
    width: 100%;
    min-width: 2.5rem;
    padding-top: 3px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-family: var(--type-body-font);
    font-size: var(--font-size-h3);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}

.stepper__value:focus {
    outline: none;
}

.stepper__value::-webkit-outer-spin-button,
.stepper__value::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.check {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-height: var(--tap);
    padding-top: 0.6rem;
    cursor: pointer;
}

.check input {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.375rem;
    height: 1.375rem;
    margin: -0.1rem 0 0;
    border-radius: 2px;
    background: var(--coupon);
    box-shadow: inset 0 0 0 1.5px var(--hair-strong);
    appearance: none;
    cursor: pointer;
}

.check input[type="radio"] {
    border-radius: 50%;
}

.check input:checked {
    background: var(--ink);
    box-shadow: none;
}

.check input:checked::after {
    content: "";
    width: 0.8rem;
    height: 0.8rem;
    background: var(--on-ink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9.6 15.6 9.2-9.3 2.2 2.2-11.4 11.4L3 13.3l2.2-2.1z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9.6 15.6 9.2-9.3 2.2 2.2-11.4 11.4L3 13.3l2.2-2.1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.check input:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

.check a {
    text-decoration: underline;
}

.check--pill {
    align-items: center;
    padding: 0.25rem 0.875rem 0 0.625rem;
    border-radius: var(--radius);
    box-shadow: inset 0 0 0 1.5px var(--hair-strong);
}

.check--pill:has(input:checked) {
    box-shadow: inset 0 0 0 1.5px var(--ink);
}

/* ---------------------------------------------------------------- the quote card */
.qc {
    border-radius: var(--radius);
    background: var(--coupon);
    box-shadow: var(--shadow-panel), inset 0 0 0 1px var(--hair-ink);
}

.qc-tabs__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    border-bottom: var(--rule);
}

.qc-tab {
    position: relative;
    display: flex;
}

.qc-tab__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.qc-tab__label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3.25rem;
    padding: 3px 0.5rem 0;
    color: var(--ink-soft);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-ui);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
    box-shadow: inset 0 -3px 0 transparent;
    transition: color 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
}

.qc-tab:hover .qc-tab__label {
    color: var(--ink);
}

.qc-tab__input:checked + .qc-tab__label {
    color: var(--accent-ink);
    background: var(--coupon);
    box-shadow: inset 0 -3px 0 var(--accent-ink);
}

.qc-tab__input:focus-visible + .qc-tab__label {
    outline: var(--focus-ring);
    outline-offset: -3px;
}

.qc-body {
    --qc-pad: var(--space-md);
    display: grid;
    gap: var(--space-md);
    padding: var(--space-lg) var(--qc-pad) var(--space-md);
}

.qc-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0 var(--space-md);
}

.qc-title__kind {
    font-size: var(--font-size-h3);
    font-weight: 800;
}

.qc-title__eta {
    color: var(--ink-soft);
    font-size: var(--font-size-ui);
    font-weight: 600;
}

.qc-pane {
    display: grid;
    gap: var(--space-sm);
}

.qc-route {
    position: relative;
    display: grid;
    gap: var(--space-sm);
}

.qc-swap {
    display: grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: var(--coupon);
    color: var(--ink);
    box-shadow: inset 0 0 0 1.5px var(--hair-strong);
}

.qc-swap:hover {
    box-shadow: inset 0 0 0 1.5px var(--ink);
}

.qc-swap .icon {
    width: 1.1rem;
    height: 1.1rem;
}

.qc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: var(--space-sm);
}

.qc-grid .field--stepper {
    grid-column: 1 / -1;
}

/* The transfer's tour: the tour across the card, its date under it at half width. */
.qc-grid--tour .qc-with-tour {
    grid-column: 1 / -1;
}

.qc-closed {
    color: var(--ink-soft);
    font-size: var(--font-size-ui);
}

.qc-more__btn {
    min-height: var(--tap);
    font-size: var(--font-size-ui);
}

.qc-more__btn .icon {
    transition: transform 160ms var(--ease-out);
}

.qc-more__btn[aria-expanded="true"] .icon {
    transform: rotate(180deg);
}

.qc-more__panel {
    display: grid;
    gap: var(--space-2xs);
    color: var(--ink-soft);
}

/* The readout is the board's own display, run edge to edge across the card as a band (not a
   card inside the card). --qc-pad is the card's side padding. */
.qc-readout {
    display: grid;
    gap: 0.4rem;
    margin-inline: calc(1px - var(--qc-pad));
    padding: var(--space-md) calc(var(--qc-pad) - 1px);
    background: var(--coupon);
    box-shadow: inset 0 1px 0 var(--hair-ink), inset 0 -1px 0 var(--hair-ink);
}

.qc-readout__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs) var(--space-md);
}

.qc-readout__label {
    flex-basis: 100%;
    color: var(--accent-ink);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-caption);
    font-weight: 800;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

.qc-price__led {
    color: var(--ink);
    font-size: var(--font-size-4xl);
}

.qc-status {
    margin-left: auto;
}

.qc-bands,
.qc-surcharge {
    color: var(--ink-soft);
    font-size: var(--font-size-ui);
    line-height: var(--line-height-ui);
}

.qc-bands:empty {
    display: none;
}

.qc-note {
    color: var(--ink-soft);
    line-height: var(--line-height-ui);
}

.qc-warn {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    color: var(--ink);
    font-weight: 700;
    line-height: var(--line-height-ui);
}

.qc-actions {
    display: grid;
    gap: var(--space-sm);
}

.qc-actions .gate,
.qc-actions .ghost {
    min-height: var(--gate-height);
    font-size: var(--font-size-h4);
}

/* No WhatsApp number yet (an open owner decision): the button is drawn as a placeholder, like
   the footer's missing values (.tba), and explains itself when pressed. */
.qc-actions__wa--tba {
    box-shadow: none;
    outline: 1.5px dashed var(--ink-faint);
    outline-offset: -1.5px;
    color: var(--ink-soft);
}

.qc-actions__wa--tba:hover,
.qc-actions__wa--tba[aria-expanded="true"] {
    background: transparent;
    color: var(--ink);
    box-shadow: none;
    outline-color: var(--ink-soft);
}

.qc-actions__wa--tba:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

.qc-tba {
    grid-column: 1 / -1;
    max-width: var(--prose-width);
    color: var(--ink-soft);
    font-size: var(--font-size-body);
    line-height: var(--line-height-ui);
}

.qc-ref {
    color: var(--ink-soft);
    font-size: var(--font-size-caption);
    text-align: center;
}

.qc-ref__code {
    margin-left: 0.35rem;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: var(--font-size-body);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.qc-noscript {
    color: var(--ink-soft);
}

/* Phones and small tablets: the swap button stands beside From; To takes the full width. */
@media (max-width: 47.99em) {
    .qc-route--swap {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: var(--space-xs);
    }

    .qc-route--swap > .field--select {
        grid-column: 1 / -1;
    }

    .qc-route--swap > .field--select:first-child {
        grid-column: 1;
    }

    .qc-route--swap .qc-swap {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        height: 3.25rem;
    }

    .qc-route--swap .field--select .field__select {
        padding-right: 2.25rem;
        padding-left: 2.5rem;
        background-position: right 0.75rem center;
    }
}

/* Phones: tabs two by two; date and time lose their decorative icons to fit the value. */
@media (max-width: 29.99em) {
    .qc-tabs__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qc-grid .field__control > .icon {
        display: none;
    }

    .qc-grid .field__input {
        padding-left: 0.75rem;
        padding-right: 0.5rem;
    }
}

@media (min-width: 30em) {
    .qc-body {
        --qc-pad: var(--space-lg);
        padding: var(--space-lg);
    }

    .qc-actions {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    }
}

@media (min-width: 48em) {
    .qc-route {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: end;
    }

    /* Only the transfer row carries the swap button between its two fields. */
    .qc-route--swap {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }

    .qc-route--hire {
        grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    }

    .qc-swap {
        margin-bottom: 0.25rem;
    }

    .qc-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .qc-grid .field--stepper {
        grid-column: auto;
    }

    .qc-grid--bags,
    .qc-grid--cond {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------------- the pass: the request's carbon copy */
.pass {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    border-radius: 8px;
    background: var(--carbon-paper);
    color: var(--carbon);
    box-shadow: inset 0 0 0 1.5px var(--carbon-rule), var(--shadow-panel);
}

.pass:focus {
    outline: none;
}

/* A sent request tears off the form into the carbon copy. */
.pass:not([hidden]) {
    animation: tear-off 560ms var(--ease-out) both;
}

@keyframes tear-off {
    from {
        clip-path: inset(0 0 100% 0);
        transform: translateY(-0.75rem) rotate(-0.8deg);
    }

    to {
        clip-path: inset(0 0 0 0);
        transform: none;
    }
}

.pass__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1.5px dashed var(--carbon-rule);
    background: var(--coupon);
    color: var(--ink);
}

.pass__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--type-h1-font);
    font-style: italic;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pass__brand .brand__mark {
    width: 1.75rem;
    height: 1.75rem;
}

.pass__title {
    font-size: var(--font-size-h4);
    letter-spacing: var(--tracking-caps);
}

.pass__ref {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-left: auto;
}

.pass__ref .led {
    color: var(--carbon);
    font-size: var(--font-size-h3);
    font-weight: 700;
}

.pass__label {
    color: var(--carbon);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-caption);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.pass__head .pass__label {
    color: var(--ink);
}

.pass__route {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-lg) var(--space-md);
    border-bottom: 1.5px dashed var(--carbon-rule);
}

.pass__leg {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.pass__leg:last-child {
    text-align: right;
}

.pass__code.led {
    font-family: var(--type-h1-font);
    font-size: var(--font-size-4xl);
    font-style: italic;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 0.9;
    white-space: normal;
}

.pass__place {
    font-family: var(--font-mono);
    font-size: var(--font-size-ui);
    font-weight: 600;
}

.pass__arrow {
    width: 1.75rem;
    height: 1.75rem;
    color: var(--accent-ink);
    transform: rotate(90deg);
}

.pass__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr));
    gap: var(--space-md) var(--space-lg);
    margin: 0;
    padding: var(--space-md) var(--space-lg) var(--space-lg);
}

.pass__grid > div {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.pass__grid dd {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-h3);
    font-weight: 700;
}

.pass__driver {
    font-weight: 700;
}

/* The company line and the activity: what the driver's service document names. */
.pass__legal {
    flex-basis: 100%;
    color: var(--ink-soft);
    font-size: var(--font-size-caption);
    letter-spacing: 0.04em;
}

.pass__grid > .pass__wide {
    grid-column: 1 / -1;
}

.pass__grid .pass__activity,
.pass__grid .pass__client {
    font-family: var(--type-body-font);
    font-size: var(--font-size-subtitle);
    line-height: var(--line-height-ui);
}

/* The status is stamped across the copy: REQUESTED, never green (only the driver confirms). */
.pass__status .stamp {
    font-size: var(--font-size-h3);
    border-width: 3px;
    transform: rotate(-6deg);
    transform-origin: left center;
}

.pass__stub {
    position: relative;
    display: grid;
    min-width: 0;
    gap: var(--space-md);
    align-content: start;
    padding: var(--space-lg);
    background: var(--coupon);
    color: var(--ink);
    border-top: var(--rule-tear);
}

.pass__stub::before,
.pass__stub::after {
    content: "";
    position: absolute;
    top: -0.85rem;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--ground);
}

.pass__stub::before {
    left: -0.8rem;
}

.pass__stub::after {
    right: -0.8rem;
}

.pass__stub .barcode {
    height: 3.25rem;
}

.pass__text {
    color: var(--ink);
}

/* The stub is narrow on desktop: the button's label may take two lines rather than spill out. */
.pass__wa {
    white-space: normal;
    text-align: center;
}

@media (min-width: 60em) {
    .pass {
        grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem);
    }

    .pass__head {
        grid-column: 1 / -1;
    }

    .pass__route {
        grid-column: 1;
    }

    .pass__grid {
        grid-column: 1;
    }

    .pass__stub {
        grid-column: 2;
        grid-row: 2 / span 2;
        border-top: 0;
        border-left: var(--rule-tear);
    }

    .pass__stub::before,
    .pass__stub::after {
        top: auto;
        left: -0.85rem;
    }

    .pass__stub::before {
        top: -0.8rem;
    }

    .pass__stub::after {
        right: auto;
        bottom: -0.8rem;
    }
}

/* ---------------------------------------------------------------- trust line, footer: the wallet's back cover */
.trust-line {
    padding-block: var(--space-md);
    border-top: var(--rule-ink);
    font-size: var(--font-size-body);
}

.foot {
    background: var(--foot);
    color: rgba(255, 255, 255, 0.8);
}

.foot a {
    color: var(--coupon);
    text-decoration-color: rgba(255, 255, 255, 0.45);
}

.foot__inner {
    display: grid;
    gap: var(--space-xl) var(--space-lg);
    padding-block: var(--space-2xl) var(--space-xl);
}

.foot__title {
    margin-bottom: var(--space-sm);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
    color: var(--coupon);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-h4);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

.foot__title::before {
    content: "";
    display: inline-block;
    width: 1.45em;
    height: 0.82em;
    margin-right: 0.5em;
    background: var(--sea-light);
    -webkit-mask: var(--slashes) no-repeat left center / contain;
    mask: var(--slashes) no-repeat left center / contain;
    vertical-align: -0.06em;
}

.foot__lead {
    color: var(--coupon);
}

.foot__langs,
.foot__reply {
    margin-top: var(--space-xs);
}

.foot__langs b {
    color: var(--coupon);
    font-weight: 600;
}

.foot .sep {
    opacity: 0.7;
}

.foot__contact,
.foot__links {
    padding: 0;
    list-style: none;
}

.foot__contact {
    margin-top: var(--space-xs);
}

.foot .sign-link {
    color: var(--coupon);
}

.foot .sign-link .icon {
    color: var(--coupon);
}

.foot__links a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding-top: 2px;
    color: var(--coupon);
    text-decoration: none;
}

.foot__links a:hover {
    text-decoration: underline;
}

.foot__label {
    color: rgba(255, 255, 255, 0.8);
}

.foot__links--legal {
    margin-top: 0.5rem;
}

.foot__links--legal li:has(> .tba) {
    display: grid;
    justify-items: start;
    gap: 0.1rem;
    padding-bottom: 0.25rem;
}

.foot__links--legal .foot__label {
    font-size: var(--font-size-ui);
}

.foot__switch {
    margin-top: var(--space-sm);
}

.foot__switch a,
.foot__switch b {
    color: var(--coupon);
}

/* The foot of the back cover: the full crest beside the name and the notes. */
.foot__base {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2xs) var(--space-xl);
    padding-block: var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--font-size-ui);
}

.foot__crest {
    grid-row: 1 / span 3;
    width: clamp(10rem, 8rem + 6vw, 14rem);
    height: auto;
}

.foot__name {
    color: var(--coupon);
    font-family: var(--type-h1-font);
    font-style: italic;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.foot__note {
    max-width: var(--prose-width);
}

.foot__note--proto {
    color: var(--coupon);
}

.legal {
    display: grid;
    gap: 0.5rem;
}

.legal__row {
    display: grid;
    gap: 0.1rem;
}

.legal__row dt {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--font-size-ui);
}

.legal__row dd {
    color: var(--coupon);
}

/* A value the owner has not supplied yet: a blank on the form, marked as missing, never faked. */
.tba {
    display: inline-block;
    padding: 0.15rem 0.45rem 0.05rem;
    border: 1.5px dashed var(--ink-faint);
    border-radius: 2px;
    color: var(--ink-soft);
    font-family: var(--font-mono);
    font-size: var(--font-size-caption);
    font-weight: 600;
    line-height: var(--line-height-ui);
    text-transform: uppercase;
}

.foot .tba {
    border-color: rgba(255, 255, 255, 0.55);
    color: rgba(255, 255, 255, 0.88);
}

@media (min-width: 40em) {
    .foot__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64em) {
    .foot__inner {
        grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr);
    }
}

/* ---------------------------------------------------------------- mobile bar */
.mobile-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-sticky);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: var(--space-xs);
    padding: var(--space-xs) var(--gutter) calc(var(--space-xs) + env(safe-area-inset-bottom));
    border-top: var(--rule-ink);
    background: var(--head);
    box-shadow: var(--shadow-bar);
    transition: transform 220ms var(--ease-out);
}

.mobile-bar.is-hidden {
    transform: translateY(115%);
}

.mobile-bar__btn {
    gap: 0.4rem;
    min-height: 3.25rem;
    padding-inline: 0.75rem;
}

.mobile-bar__btn span {
    white-space: normal;
    text-align: center;
    line-height: 1.15;
}

/* The bar's own height (padding, tap row, top rule) is reserved inside the night-teal footer, so no page
   stock shows under the footer, whether the bar is up or slid away. */
@media (max-width: 59.99em) {
    body:has(.mobile-bar) .foot {
        padding-bottom: calc(4.25rem + 1.5px + env(safe-area-inset-bottom));
    }
}

@media (min-width: 60em) {
    .mobile-bar {
        display: none;
    }
}

/* ==========================================================================
   Blocks
   ========================================================================== */

/* ---------------------------------------------------------------- hero
   Every first screen sits on the lagoon band (#D3F1EC by day, #0B3533 by night); the page
   below it is the mist page. Notches in paper inside it show the band (--ground). */
.hero {
    border-bottom: var(--rule-ink);
    background: var(--band);
    --ground: var(--band);
}

.hero__inner {
    display: grid;
    gap: var(--space-xl);
    padding: var(--space-xl) var(--edge) var(--space-2xl);
}

.hero__copy {
    display: flex;
    flex-direction: column;
    align-self: center;
    min-width: 0;
}

.hero__lines {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hero__title {
    max-width: 16ch;
    font-family: var(--type-h1-font);
    font-size: var(--font-size-4xl);
    font-style: italic;
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: var(--tracking-display);
    text-transform: uppercase;
}

.hero__accent {
    color: var(--accent-ink);
}

.hero__updated {
    margin-top: var(--space-sm);
    color: var(--ink-soft);
    font-family: var(--font-mono);
    font-size: var(--font-size-caption);
    font-weight: 600;
    text-transform: uppercase;
}

.hero__sub {
    max-width: 38ch;
    margin-top: var(--space-md);
    color: var(--ink);
    font-size: var(--font-size-subtitle);
    font-weight: 500;
    line-height: 1.42;
}

.hero__chip {
    margin-right: 0.4em;
    color: var(--ink);
    vertical-align: 0.18em;
}

.hero__price {
    max-width: 40ch;
    text-wrap: pretty;
    margin-top: var(--space-sm);
    color: var(--ink);
    font-size: var(--font-size-subtitle);
    font-weight: 600;
    line-height: 1.4;
}

/* A price inside running text: carbon numerals. */
.hero__price .fare,
.fare {
    color: var(--accent-ink);
    font-family: var(--font-mono);
    font-size: inherit;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

/* The facts line: a ruled data row, the figure in carbon numerals over its label (one fact per
   ruled line on phones, the figure beside its label). */
.hero__facts {
    display: grid;
    margin-top: var(--space-lg);
    padding: 0;
    list-style: none;
    border-top: var(--rule-ink);
    border-bottom: var(--rule-ink);
}

.hero__fact {
    display: grid;
    grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr);
    align-items: baseline;
    column-gap: var(--space-md);
    min-width: 0;
    padding-block: 0.6rem 0.5rem;
}

.hero__fact + .hero__fact {
    border-top: var(--rule);
}

.hero__fact-value {
    color: var(--carbon);
    font-family: var(--font-mono);
    font-size: var(--font-size-h4);
    font-weight: 700;
    line-height: 1.2;
}

.hero__fact-label {
    color: var(--ink-soft);
    font-size: var(--font-size-ui);
    line-height: var(--line-height-ui);
    text-wrap: pretty;
}

@media (min-width: 30em) {
    .hero__facts {
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
    }

    .hero__fact {
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        row-gap: 0.3rem;
        padding: 0.7rem 1rem 0.6rem;
    }

    .hero__fact:first-child {
        padding-left: 0;
    }

    .hero__fact + .hero__fact {
        border-top: 0;
        border-left: 1.5px dashed var(--hair-strong);
    }
}

.hero__actions {
    margin-top: var(--space-lg);
}

.speaks {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.6rem;
    margin-top: var(--space-md);
    color: var(--ink-soft);
    font-weight: 500;
}

.speaks b {
    color: var(--ink);
    font-weight: 600;
}

.speaks .sep {
    align-self: center;
    margin: 0;
    background: var(--ink-soft);
    opacity: 1;
}

/* The list never breaks inside ("Português ·" / "Русский"): the line wraps after the label instead. */
.speaks__langs {
    display: inline-flex;
    align-items: baseline;
    gap: 0.6rem;
    white-space: nowrap;
}

.hero__panel {
    display: grid;
    align-content: center;
    gap: var(--space-md);
    min-width: 0;
}

/* The logo: the forest drawing on light grounds, the ivory drawing on the night ground. */
.crest {
    display: block;
    width: 100%;
    height: auto;
}

.logo--night {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .logo--day {
        display: none;
    }

    :root:not([data-theme="light"]) .logo--night {
        display: block;
    }
}

:root[data-theme="dark"] .logo--day {
    display: none;
}

:root[data-theme="dark"] .logo--night {
    display: block;
}

.hero__panel--crest {
    justify-items: center;
}

.hero__panel--crest .crest {
    width: clamp(12rem, 20vw, 18rem);
}

@media (min-width: 64em) {
    .hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
        gap: var(--space-2xl);
        padding-block: var(--space-xl) var(--space-2xl);
    }

    .hero--compact:not(.hero--board) .hero__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero--crest.hero--compact .hero__inner {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    /* A hero without a photo uses the width: the H1 on the left, the lines and actions beside it. */
    .hero--compact:not(.hero--board):not(.hero--lead) .hero__copy {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        align-items: end;
        column-gap: var(--space-3xl);
    }

    .hero--compact:not(.hero--board):not(.hero--lead) .hero__title {
        max-width: 14ch;
    }

    .hero--compact:not(.hero--board):not(.hero--lead) .hero__lines {
        max-width: 40rem;
    }

    .hero--compact:not(.hero--board):not(.hero--lead) .hero__lines > :first-child {
        margin-top: 0;
    }

    .hero--board.hero--compact .hero__panel {
        align-self: center;
    }

}

/* ---- The home: the wallet's left column ---- */
.hero--lead .hero__inner {
    padding: var(--space-lg) var(--edge) var(--space-xl);
}

.hero--lead .hero__copy {
    align-self: start;
}

.hero--lead .hero__title {
    max-width: 5.05em;
    font-size: var(--font-size-display);
    line-height: 0.86;
}

.hero--lead .hero__sub {
    max-width: 30em;
    margin-top: var(--space-md);
}

.hero--lead .hero__actions {
    margin-top: 1.125rem;
}

/* "Today on the island": the island clock as a small status table. */
.today {
    margin-top: var(--space-lg);
    padding-top: 0.75rem;
    border-top: var(--rule-ink);
}

.today__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem var(--space-md);
}

.today__date {
    color: var(--ink-soft);
    font-family: var(--font-mono);
    font-size: var(--font-size-caption);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.today__table {
    width: 100%;
    margin-top: 0.4rem;
}

.today__table th,
.today__table td {
    padding: 0.42rem 0.5rem 0.32rem;
    border-top: var(--rule);
    vertical-align: middle;
}

.today__table th {
    padding-left: 0;
    color: var(--ink);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-ui);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.15;
    text-transform: uppercase;
}

.today__value,
.today__state {
    white-space: nowrap;
}

.today__what,
.today__value {
    color: var(--carbon);
    font-family: var(--font-mono);
    font-size: var(--font-size-ui);
    font-weight: 600;
}

.today__value .led {
    font-weight: 700;
}

.today__state {
    padding-right: 0;
    text-align: right;
}

/* The route map stands in the wallet's bottom row (.band__map) on the home; the route-calculator
   under it then shows the zones as a fare box instead of the same map a second time. */
main:has(.band__map) .quote .route-map {
    display: none;
}

main:has(.band__map) .quote .quote__zones {
    display: grid;
}

/* The header's right cell shows the languages from 60em up; phones keep the hero's line. */
@media (min-width: 60em) {
    .hero--lead .speaks {
        display: none;
    }
}

/* The three-column wallet's narrowest hero column (80em-90em, 1280): tighter cells and caption-size
   sources, so "Pico do Arieiro" and the IFCN line keep one line each. */
@media (min-width: 80em) and (max-width: 89.99em) {
    .hero--lead .today__table th,
    .hero--lead .today__table td {
        padding-inline: 0.35rem;
    }

    .hero--lead .today__table th {
        padding-left: 0;
    }

    .hero--lead .today__table .today__state {
        padding-right: 0;
    }

    .hero--lead .today__what {
        font-size: var(--font-size-caption);
    }
}

@media (max-width: 29.99em) {
    .today__table th,
    .today__table td {
        padding-inline: 0.3rem;
    }

    .today__table th {
        padding-left: 0;
        font-size: var(--font-size-caption);
        white-space: normal;
    }

    .today__what {
        font-size: var(--font-size-caption);
    }

    .today__state {
        padding-right: 0;
    }

    .today .pill {
        padding-inline: 0.4em;
        letter-spacing: 0.08em;
    }
}

/* The home's first viewport (main.has-lead, set by base.html when a lead hero is followed by the
   board price-table). Every column has a floor (minmax with a rem minimum), so data never wraps per
   character, and nothing stands beside a column of empty stock:
   - below 48em: one column, the hero, the coupons, the carbon copy, then the bottom row;
   - 48em-80em (1024): stacked rows that use the width: the hero with the H1 beside its lines, the
     coupons beside the carbon copy (the .wallet container query), the bottom row two by two;
   - from 80em (1280, 1440): the comp's three columns, hero | coupons | carbon copy, the carbon
     copy stretched to the columns' common foot, and the bottom row in one line of four. */
@media (min-width: 48em) and (max-width: 79.99em) {
    .hero--lead .hero__copy {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        column-gap: var(--space-2xl);
        align-items: start;
    }

    .hero--lead .hero__lines > :first-child {
        margin-top: 0.4rem;
    }
}

/* Past 90rem the extra width goes to the outer tracks, so the three columns keep the comp's
   proportions instead of the outer ones losing it to the page edge. */
@media (min-width: 80em) {
    main.has-lead {
        display: grid;
        grid-template-columns: minmax(0, calc(var(--edge) - var(--gutter))) minmax(26rem, 35.5fr) minmax(46rem, 64.5fr) minmax(0, calc(var(--edge) - var(--gutter)));
    }

    main.has-lead > * {
        grid-column: 1 / -1;
        min-width: 0;
    }

    main.has-lead > .hero--lead {
        grid-column: 2;
        grid-row: 1;
        border-bottom: 0;
        /* Past 90rem the band runs on to the screen's left edge instead of stopping at the empty
           outer track (the shadow is clipped to the left, so it never scrolls). */
        box-shadow: 0 0 0 100vmax var(--band);
        clip-path: inset(0 0 0 -100vmax);
    }

    main.has-lead > .hero--lead + .fares--board {
        display: grid;
        grid-column: 3;
        grid-row: 1;
        border-left: var(--rule-ink);
    }

    main.has-lead > .hero--lead .hero__inner {
        padding: 1.625rem 1.75rem 1.5rem var(--gutter);
    }
}

/* The hero's board rows (hero.board_ids). */
.mini-board {
    width: 100%;
}

.mini-board thead th {
    padding: 0.5rem 0.625rem 0.4rem;
    border-bottom: var(--rule-head);
    color: var(--ink);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-caption);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    white-space: nowrap;
}

.mini-board tbody th,
.mini-board tbody td {
    padding: 0.6rem 0.625rem 0.5rem;
    border-bottom: var(--rule);
    vertical-align: middle;
}

.mini-board__route {
    display: block;
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-h4);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mini-board tbody th small {
    display: block;
    color: var(--carbon);
    font-family: var(--font-mono);
    font-size: var(--font-size-caption);
}

.mini-board__price {
    white-space: nowrap;
}

.mini-board__price .led {
    color: var(--accent-ink);
    font-size: var(--font-size-h3);
    font-weight: 700;
}

.mini-board__price small {
    margin-left: 0.4rem;
    color: var(--ink-soft);
    font-size: var(--font-size-caption);
}

.mini-board td:last-child {
    text-align: right;
}

@media (max-width: 29.99em) {
    .mini-board,
    .mini-board tbody {
        display: block;
    }

    .mini-board thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .mini-board tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.35rem var(--space-md);
        padding: 0.7rem 0.625rem 0.6rem;
        border-bottom: var(--rule);
    }

    .mini-board tbody th,
    .mini-board tbody td {
        display: block;
        padding: 0;
        border: 0;
    }

    .mini-board tbody th {
        grid-column: 1 / -1;
    }
}

/* ---------------------------------------------------------------- price-table */
.fares {
    padding-top: var(--space-2xl);
    border-top: var(--rule-ink);
}

.fares--table {
    padding-bottom: var(--space-2xl);
}

.hero + .fares {
    border-top: 0;
}

.fares__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-sm) var(--space-lg);
    padding-bottom: var(--space-lg);
}

.fares__head {
    flex: 1 1 36rem;
}

.fares--board .fares__head .sec-head__intro {
    font-size: var(--font-size-ui);
}

.fares__scroll {
    min-width: 0;
}

.fares__foot {
    display: grid;
    gap: var(--space-xs);
    padding-top: var(--space-md);
}

.fares__note,
.fares__checked {
    max-width: var(--prose-width);
    color: var(--ink-soft);
    font-size: var(--font-size-ui);
    text-wrap: pretty;
}

.fares__checked {
    font-size: var(--font-size-caption);
}

.fares__body {
    color: var(--ink-soft);
}

.fares--table .fares__foot .fares__body {
    font-size: var(--font-size-body);
}

/* The supplements are not rides: a quiet ruled list on the page, no coupon, no tabs. */
.fares--extras .farebox {
    border: 0;
    border-top: var(--rule-ink);
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.fares--extras .farebox::before,
.fares--extras .farebox::after {
    content: none;
}

.fares--extras .board__head th {
    border-bottom: var(--rule);
}

.fares--extras .board .row > th,
.fares--extras .board .row > td {
    height: auto;
    padding-block: 0.6rem 0.5rem;
}

/* A supplement has nothing to open: its line says it all. Its detail row stays hidden too, also
   when a #hash link or a page without JavaScript would otherwise open it (the anchors are on the
   rows, so /prices/#holiday still lands). */
.fares--extras .row__toggle,
.fares--extras .board .detail {
    display: none;
}

.fares--extras .board__head th:first-child,
.fares--extras .board .row > :first-child {
    padding-left: 0;
}

.fares--extras .route__name {
    font-weight: 500;
}

.fares--extras .price__led {
    font-size: var(--font-size-h4);
}

.fares--extras .board .detail > td {
    background: var(--paper-tint-deep);
}

.fares--extras .board .detail > td::before,
.fares--extras .board .detail > td::after {
    content: none;
}

/* Phones and tablets: each ride is a small stub inside the fare box. The table keeps its roles
   (set in the markup), so screen readers still read rows and cells. */
@media (max-width: 63.99em) {
    .board,
    .board tbody {
        display: block;
    }

    .board thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .farebox::before,
    .farebox::after {
        content: none;
    }

    .board .row {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "route route"
            "time status"
            "price book";
        align-items: center;
        column-gap: var(--space-md);
        row-gap: 0.45rem;
        padding: var(--space-sm) var(--space-md) var(--space-sm) 3.25rem;
        border-bottom: var(--rule);
    }

    .board .row > th,
    .board .row > td,
    .board .row > .c-book {
        display: block;
        width: auto;
        height: auto;
        padding: 0;
        border: 0;
        background: none;
    }

    .board .row > :first-child {
        position: static;
        padding-left: 0;
    }

    .board .row--hl {
        background: var(--hl-tint);
    }

    .board .row--hl > * {
        background: none;
    }

    .board .row--open {
        border-bottom: var(--rule-tear);
    }

    .board .row--open > * {
        border-bottom: 0;
    }

    .row__toggle {
        top: calc(var(--space-sm) + 0.9rem);
        left: 0.75rem;
    }

    .route-cell {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0.25rem;
    }

    .board .c-route {
        grid-area: route;
    }

    .board .c-time {
        grid-area: time;
        min-width: 0;
    }

    .board .c-time .cell-led {
        flex-wrap: wrap;
        row-gap: 0;
    }

    .board .c-seats {
        grid-area: seats;
    }

    .board .c-price {
        grid-area: price;
    }

    .board .c-status {
        grid-area: status;
        justify-self: end;
    }

    .board .c-book {
        grid-area: book;
        align-self: end;
        justify-self: end;
        width: auto;
    }

    .fares--table .board .row {
        grid-template-columns: repeat(2, minmax(0, auto)) minmax(0, 1fr) auto;
        grid-template-areas:
            "route route route route"
            "time time time status"
            "price price2 . book";
    }

    .fares--table .row .c-price--large {
        grid-area: price2;
    }

    .fares--table .row .c-price::before {
        display: block;
        margin-bottom: 0.3rem;
        color: var(--ink);
        font-family: var(--type-label-caps-font);
        font-size: var(--font-size-caption);
        font-weight: 700;
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
        white-space: nowrap;
    }

    .fares--table .row .c-price--small::before {
        content: var(--label-small);
    }

    .fares--table .row .c-price--large::before {
        content: var(--label-large);
    }

    .fares--table .row .c-price--span::before {
        content: none;
    }

    .fares--extras .board .row {
        grid-template-areas:
            "route route route route"
            "price price2 . .";
        padding-left: 0;
    }

    .board .detail {
        display: block;
    }

    .js .board .detail--closed {
        display: none;
    }

    .board .detail > td {
        display: block;
        padding: var(--space-md) var(--space-md) var(--space-md) 3.25rem;
    }

    .board .detail > td::before,
    .board .detail > td::after {
        content: none;
    }

    .price__led {
        font-size: var(--font-size-h3);
    }

    .detail__map {
        width: min(100%, 14rem);
    }

    .bands {
        margin-left: 0;
    }
}

/* Phones: the codes stand over the route; prices and the tab keep one line. */
@media (max-width: 29.99em) {
    .board .row {
        padding-left: 3rem;
        padding-right: 0.75rem;
    }

    .board .detail > td {
        padding-left: 1rem;
    }

    .bands__row {
        min-width: 0;
        padding-inline: 0.75rem;
    }
}

/* Tablets: the route on its line, then the whole ride on one line. */
@media (min-width: 48em) and (max-width: 63.99em) {
    /* Fixed widths after the time, so the columns line up from row to row (each row is its own grid). */
    .board .row {
        grid-template-columns: minmax(0, 1fr) 6.5rem 7.5rem 8.5rem 7rem;
        grid-template-areas:
            "route route route route route"
            "time seats price status book";
    }

    .fares--table .board .row {
        grid-template-columns: minmax(0, 1fr) 7rem 7rem 8.5rem 7rem;
        grid-template-areas:
            "route route route route route"
            "time price price2 status book";
    }

    .fares--extras .board .row {
        grid-template-columns: minmax(0, 1fr) 7rem 7rem;
        grid-template-areas: "route price price2";
    }

    .fares--table .row .c-price--span {
        grid-column: price-start / price2-end;
    }

    .board .c-status {
        justify-self: start;
    }

    .route-cell {
        grid-template-columns: 6.75rem minmax(0, 1fr);
    }
}

/* ---------------------------------------------------------------- the ticket wallet (price-table board) */
.fares--board {
    padding: 0;
    border-top: var(--rule-ink);
}

.hero + .fares--board {
    border-top: 0;
}

.fares--board {
    container: wallet / inline-size;
}

.wallet {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.wallet__rides,
.wallet__side {
    min-width: 0;
    padding: var(--space-lg) var(--edge) var(--space-xl);
}

.wallet__side {
    display: grid;
    align-content: start;
    gap: var(--space-xl);
    border-top: var(--rule-ink);
}

/* Under the stack, the carbon copy and the stages stand side by side when the block is wide
   (the board without the bottom row, e.g. the block demo). */
@container wallet (min-width: 40rem) {
    .wallet__side:has(> .stages) {
        grid-template-columns: minmax(17rem, 1fr) minmax(15rem, 1fr);
        align-items: start;
        column-gap: var(--space-2xl);
    }
}

/* The comp's row: coupons | carbon copy, wherever both keep their floor (1024 stacked, 1280, 1440). */
@container wallet (min-width: 50rem) {
    .wallet {
        grid-template-columns: minmax(28rem, 60fr) minmax(19rem, 40fr);
    }

    .wallet__rides {
        padding-right: 1.75rem;
        border-right: var(--rule-ink);
    }

    .wallet__side,
    .wallet__side:has(> .stages) {
        grid-template-columns: minmax(0, 1fr);
        padding-left: 1.75rem;
        border-top: 0;
    }

    /* The carbon copy alone in its column reaches the stack's foot: its blank fields take the slack. */
    .wallet__side:not(:has(> .stages)) {
        align-content: stretch;
    }

    .wallet__side:not(:has(> .stages)) .carbon-copy {
        grid-template-rows: auto minmax(0, 1fr);
    }

    .wallet__side:not(:has(> .stages)) .carbon {
        display: flex;
        flex-direction: column;
    }

    .wallet__side:not(:has(> .stages)) .carbon__blanks {
        display: grid;
        flex: 1 1 auto;
    }
}

@media (min-width: 80em) {
    main.has-lead .wallet__rides {
        padding: 1.625rem 1.75rem 1.5rem 2rem;
    }

    main.has-lead .wallet__side {
        padding: 1.625rem var(--gutter) 1.5rem 1.75rem;
    }
}

.fares--board .fares__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.35rem var(--space-md);
    margin-bottom: 0.875rem;
    padding: 0;
}

.fares--board .fares__head {
    grid-column: 1 / -1;
    column-gap: var(--space-md);
}

.fares__intro {
    grid-column: 1;
    color: var(--ink-soft);
    font-size: var(--font-size-body);
    line-height: var(--line-height-ui);
}

/* A transfer sold only with a tour (pricing.routes_with_tour): the rule, once above the table. */
.fares__cond {
    margin-top: var(--space-sm);
    color: var(--ink);
    font-size: var(--font-size-body);
    line-height: var(--line-height-ui);
    text-wrap: pretty;
}

.fares--board .pax-toggle {
    grid-column: 2;
    grid-row: 2;
}

/* The passenger toggle (1-4 <-> 5-6): tab caps. */
.pax-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.pax-toggle__label {
    margin-right: 0.6rem;
    color: var(--ink);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-caption);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

.pax-toggle__btn {
    display: inline-grid;
    place-items: center;
    min-width: 3.5rem;
    min-height: 2.375rem;
    padding: 2px 0.75rem 0;
    border: 0;
    background: var(--raised);
    color: var(--ink);
    box-shadow: inset 0 0 0 2px var(--ink);
    font-family: var(--font-mono);
    font-size: var(--font-size-ui);
    font-weight: 700;
}

.pax-toggle__btn:first-of-type {
    border-radius: var(--radius) 0 0 var(--radius);
}

.pax-toggle__btn:last-of-type {
    margin-left: -2px;
    border-radius: 0 var(--radius) var(--radius) 0;
}

.pax-toggle__btn:hover {
    background: var(--raised-hover);
}

.pax-toggle__btn[aria-pressed="true"] {
    position: relative;
    background: var(--ink);
    color: var(--on-ink);
}

/* ---- A coupon: leg, code, route, the turquoise fare tab; place codes over a tear line ---- */
.coupons {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.coupon {
    --coupon-head: 2.75rem;
    position: relative;
    background: var(--coupon);
    border: var(--rule-coupon);
    border-radius: var(--radius-coupon);
    box-shadow: var(--shadow-sheet);
    scroll-margin-top: var(--space-lg);
}

/* Punched notches where the tear line meets the edges. */
.coupon::before,
.coupon::after {
    content: "";
    position: absolute;
    top: calc(var(--coupon-head) - 0.5rem);
    width: 0.875rem;
    height: 0.875rem;
    border: var(--rule-coupon);
    border-radius: 50%;
    background: var(--ground);
}

.coupon::before {
    left: calc(var(--notch) / -2 - 2px);
    clip-path: inset(0 0 0 50%);
}

.coupon::after {
    right: calc(var(--notch) / -2 - 2px);
    clip-path: inset(0 50% 0 0);
}

.coupon__head {
    display: grid;
    grid-template-columns: 3rem auto minmax(0, 1fr) auto;
    align-items: center;
    min-height: var(--coupon-head);
    border-bottom: var(--rule-tear);
}

.coupon__leg {
    display: grid;
    place-items: center;
    align-self: stretch;
    border-radius: 3px 0 0 0;
    background: var(--cell);
    color: var(--on-ink);
    font-family: var(--type-h1-font);
    font-size: var(--font-size-h3);
    font-style: italic;
    font-weight: 800;
}

.coupon__code {
    padding: 2px 0.875rem 0;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: var(--font-size-ui);
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.coupon__route {
    min-width: 0;
    padding: 0.55rem 0.75rem 0.4rem 0;
    font-family: var(--type-h3-font);
    font-size: var(--font-size-h4);
    font-weight: 700;
    letter-spacing: var(--tracking-tab);
    line-height: 1.1;
    text-wrap: balance;
}

.coupon__fare {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    min-width: 5.75rem;
    padding: 2px 0.875rem 0;
    border-radius: 0 3px 0 0;
    background: var(--tab);
    color: var(--on-tab);
    font-family: var(--font-mono);
    font-size: var(--font-size-h3);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 120ms var(--ease-out);
}

a.coupon__fare:hover {
    background: var(--tab-press);
}

a.coupon__fare:focus-visible {
    outline: 0;
}

/* The whole coupon opens its route: the fare tab's link stretches over the coupon. On hover the
   coupon lifts a little and its tab darkens; a keyboard focus rings the coupon. */
a.coupon__fare::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: var(--radius-coupon);
}

.coupon:has(> .coupon__head > a.coupon__fare) {
    transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}

.coupon:has(> .coupon__head > a.coupon__fare:hover) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-panel);
}

.coupon:has(> .coupon__head > a.coupon__fare:hover) .coupon__route {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.coupon:has(> .coupon__head > a.coupon__fare:focus-visible) {
    outline: var(--focus-ring);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .coupon:has(> .coupon__head > a.coupon__fare) {
        transition: none;
    }

    .coupon:has(> .coupon__head > a.coupon__fare:hover) {
        transform: none;
    }
}

.coupon__per {
    margin-left: 0.1em;
    font-size: var(--font-size-ui);
}

.coupon__fare--void {
    background: var(--coupon);
    color: var(--ink-faint);
    box-shadow: inset 1.5px 0 0 var(--hair-ink);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

.coupon__fare--ask {
    background: var(--ink);
    color: var(--on-ink);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-h4);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

.coupon__body {
    display: grid;
    grid-template-columns: auto minmax(2.5rem, 1fr) auto;
    align-items: start;
    gap: var(--space-md);
    padding: 0.625rem 1.125rem 0.7rem 1.25rem;
}

.coupon__end {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.coupon__end--to {
    align-items: flex-end;
    text-align: right;
}

.coupon__cond {
    padding: 0 1.125rem 0.7rem 1.25rem;
}

.coupon__place {
    font-family: var(--type-h1-font);
    font-size: var(--font-size-h1);
    font-style: italic;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 0.9;
    text-transform: uppercase;
}

.coupon__sub {
    max-width: 100%;
    margin-top: 0.35rem;
    color: var(--carbon);
    font-family: var(--font-mono);
    font-size: var(--font-size-caption);
    font-weight: 600;
    line-height: 1.3;
    text-wrap: balance;
}

.coupon__sub .led {
    font-weight: 700;
}

/* The flight line between the two codes: a dashed track with the turquoise-ink arrow. */
.coupon__dash {
    position: relative;
    margin-top: calc(var(--font-size-h1) * 0.42);
    border-top: 2px dashed var(--hair-strong);
}

.coupon__dash .icon {
    position: absolute;
    top: -0.8rem;
    left: 50%;
    width: 1.5rem;
    height: 1.5rem;
    padding-inline: 0.3rem;
    box-sizing: content-box;
    background: var(--coupon);
    color: var(--accent-ink);
    transform: translateX(-50%);
}

.coupon__bands {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin: 0;
    padding: 0 1.125rem 0.75rem 1.25rem;
    color: var(--carbon);
    font-family: var(--font-mono);
    font-size: var(--font-size-caption);
    font-weight: 600;
}

.coupon__bands > div {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
}

.coupon__bands dt {
    color: var(--ink);
    font-family: var(--type-label-caps-font);
    font-weight: 700;
    letter-spacing: 0.1em;
}

.coupon__note {
    padding: 0 1.125rem 0.75rem 1.25rem;
    color: var(--ink-soft);
    font-size: var(--font-size-ui);
    line-height: var(--line-height-ui);
}

.coupon__why {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--ink);
    font-weight: 600;
}

.coupon__why .icon {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--accent-ink);
}

/* A closed ride keeps its coupon, under the VOID stamp, with the reason; it has no Book tab. */
.coupon--closed .coupon__place,
.coupon--closed .coupon__route,
.coupon--closed .coupon__code {
    color: var(--ink-faint);
}

.coupon--closed .coupon__leg {
    background: var(--ink-faint);
}

.coupon .stamp--void {
    top: calc(var(--coupon-head) + 0.4rem);
    right: 30%;
    transform: rotate(-12deg);
}

.coupon--hl {
    border-color: var(--accent-ink);
}

/* A narrow stack (the comp's three columns just past 80em): the route keeps one line, with a little
   less tracking and a tighter code cell, instead of wrapping under its fare tab. */
.wallet__rides {
    container: rides / inline-size;
}

@container rides (max-width: 35rem) {
    .coupon__code {
        padding-inline: 0.625rem;
    }

    .coupon__route {
        letter-spacing: 0.06em;
    }
}

/* Phones: each coupon is a single stub. The code gives way to the route; the toggle takes its own row. */
@media (max-width: 47.99em) {
    .fares--board .fares__top {
        grid-template-columns: minmax(0, 1fr);
    }

    .fares--board .fares__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .fares--board .pax-toggle {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
        margin-top: 0.25rem;
    }

    .coupon {
        --coupon-head: 2.625rem;
    }

    .coupon__head {
        grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    }

    .coupon__code {
        display: none;
    }

    .coupon__route {
        padding-left: 0.75rem;
    }

    .coupon__fare {
        min-width: 4.75rem;
        padding-inline: 0.7rem;
    }

    .coupon__body {
        gap: var(--space-sm);
        padding: 0.55rem 0.875rem 0.6rem 1rem;
    }

    /* Place names read in Barlow on a phone and wrap to a second line rather than lose their end. */
    .coupon__sub {
        font-family: var(--type-body-font);
        font-size: var(--font-size-ui);
        font-weight: 500;
        line-height: 1.25;
    }

    .coupon__bands,
    .coupon__note {
        padding-inline: 1rem 0.875rem;
    }

    .coupon .stamp--void {
        right: 22%;
        font-size: var(--font-size-h2);
    }
}

/* The stack's last line: to the full price list. */
.coupons__more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    min-height: 2.75rem;
    margin-top: 0.75rem;
    padding: 3px 1.125rem 0;
    border: var(--rule-coupon);
    border-radius: 4px;
    background: var(--coupon);
    color: var(--ink);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-h4);
    font-weight: 800;
    letter-spacing: 0.16em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 120ms var(--ease-out), color 120ms var(--ease-out);
}

.coupons__more .icon {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: -2px;
}

.coupons__more:hover {
    background: var(--ink);
    color: var(--on-ink);
}

.fares--board .fares__foot {
    padding: var(--space-md) 0 0;
}

/* The signature moment: the fares (tabs, band line, carbon copy) re-stamp for the passenger band. */
.is-refreshing {
    display: inline-block;
    animation: fare-stamp var(--restamp) var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 28ms);
}

@keyframes fare-stamp {
    0% {
        opacity: 1;
        transform: none;
    }

    24% {
        opacity: 0;
        transform: translateY(-2px) scale(1.08);
    }

    34% {
        opacity: 0;
        transform: scale(1.22);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

/* ---- The carbon copy: the request as it comes back, on carbon paper ---- */
.carbon-copy {
    display: grid;
    gap: 0.875rem;
}

.carbon {
    position: relative;
    overflow: hidden;
    background: var(--carbon-paper);
    color: var(--carbon);
    box-shadow: inset 0 0 0 1.5px var(--carbon-rule);
}

/* A ticket, not a card: square corners punched out as notches (page stock showing through, with the
   paper's own rule round the cut), a perforated line over the stub, the conductor's punch hole. */
.carbon::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background-image: radial-gradient(circle at 0 0, var(--ground) 0.75rem, var(--carbon-rule) calc(0.75rem + 0.5px) calc(0.75rem + 1.5px), transparent calc(0.75rem + 2px)), radial-gradient(circle at 100% 0, var(--ground) 0.75rem, var(--carbon-rule) calc(0.75rem + 0.5px) calc(0.75rem + 1.5px), transparent calc(0.75rem + 2px)), radial-gradient(circle at 0 100%, var(--ground) 0.75rem, var(--carbon-rule) calc(0.75rem + 0.5px) calc(0.75rem + 1.5px), transparent calc(0.75rem + 2px)), radial-gradient(circle at 100% 100%, var(--ground) 0.75rem, var(--carbon-rule) calc(0.75rem + 0.5px) calc(0.75rem + 1.5px), transparent calc(0.75rem + 2px));
    background-position: 0 0, 100% 0, 0 100%, 100% 100%;
    background-size: 1rem 1rem;
    background-repeat: no-repeat;
    pointer-events: none;
}

.carbon-copy {
    min-width: min(100%, 17rem);
    container: carbon / inline-size;
}

.carbon__grid {
    display: grid;
    grid-template-columns: minmax(9rem, 1fr) minmax(6.25rem, 36%);
    margin: 0;
}

.carbon__cell {
    min-width: 0;
    padding: 0.8rem 1.1rem 0.7rem;
    border-bottom: 1.5px dashed var(--carbon-rule);
}

.carbon__cell--side {
    border-left: 1.5px dashed var(--carbon-rule);
}

.carbon__cell:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.carbon__cell dt {
    color: var(--carbon);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-caption);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.carbon__cell dd {
    margin: 0;
}

.carbon__v {
    margin-top: 0.3rem;
    font-family: var(--font-mono);
    font-size: var(--font-size-subtitle);
    font-weight: 700;
    line-height: 1.2;
}

/* A field the request fills in: typed lighter and smaller, on a dotted line. */
.carbon__v--blank {
    font-size: var(--font-size-caption);
    white-space: nowrap;
}

/* The blank fields side by side, over the stub: room under their labels for the REQUESTED stamp. */
.carbon__blanks {
    position: relative;
    border-top: 1.5px dashed var(--carbon-rule);
}

.carbon__cell--blank {
    display: flex;
    flex-direction: column;
    padding-bottom: 0.9rem;
}

.carbon__cell--blank .carbon__v--blank {
    display: flex;
    flex: 1 1 auto;
    align-items: flex-end;
    min-height: 7rem;
    margin-top: 0.2rem;
}

.carbon__cell--side .carbon__soft {
    display: block;
    font-size: var(--font-size-caption);
}

/* A narrow copy (the comp's third column just past 80em): tighter cells, so no blank wraps. */
@container carbon (max-width: 19.5rem) {
    .carbon__cell {
        padding-inline: 0.8rem;
    }
}

.carbon__v--blank,
.carbon__blank {
    font-weight: 500;
    text-decoration: underline dotted;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.3em;
}

.carbon__soft {
    font-weight: 500;
}

.carbon__v--price {
    font-size: var(--font-size-h2);
}

.carbon__big {
    font-family: var(--type-h1-font);
    font-size: var(--font-size-4xl);
    font-style: italic;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 0.85;
}

.carbon__cell--big dt:not(.vh) {
    margin-bottom: 0.35rem;
}

.carbon__big--pax {
    font-size: var(--font-size-h1);
}

.carbon__place {
    margin-top: 0.5rem;
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-caption);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* The REQUESTED stamp: angled across the blank fields' writing lines, centred in the space under
   their labels (inset top clears the label line, the blank's min-height holds the turned stamp), so
   it never covers a label or a written value. About twice the stub stamp it replaced. */
.carbon .stamp--requested {
    inset: 2rem 0 2.25rem;
    width: max-content;
    height: max-content;
    margin: auto;
    padding: 0.16em 0.5em 0.02em;
    border-width: 4px;
    font-size: var(--font-size-h2);
    letter-spacing: 0.12em;
    rotate: -7deg;
    scale: 1.2;
}

@container carbon (max-width: 18.5rem) {
    .carbon .stamp--requested {
        scale: 1;
    }
}

/* Phones set h2 smaller: a larger scale keeps the stamp at about twice its old size there too. */
@media (max-width: 47.99em) {
    .carbon .stamp--requested {
        scale: 1.4;
    }
}

.carbon__code {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.carbon__code .barcode {
    flex: 1 1 auto;
    min-width: 5rem;
}

/* The conductor's punch hole: page stock through the stub. */
.carbon__punch {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: var(--ground);
    box-shadow: inset 0 0 0 1.5px var(--hair-strong), inset 1px 2px 3px rgba(7, 59, 52, 0.28);
}

.carbon__bar {
    position: relative;
    padding: 1rem 1.1rem 0.8rem;
    background: var(--coupon);
    /* The stub carries the ticket's rule down its sides and foot, so the notches' arcs join an edge. */
    box-shadow: inset 1.5px 0 0 var(--carbon-rule), inset -1.5px 0 0 var(--carbon-rule), inset 0 -1.5px 0 var(--carbon-rule);
}

/* The perforated line the stub tears off along: a notch at each edge and a row of punched holes. */
.carbon__bar::before,
.carbon__bar::after {
    content: "";
    position: absolute;
    z-index: 3;
    pointer-events: none;
}

.carbon__bar::before {
    top: -0.5rem;
    right: 0;
    left: 0;
    height: 1rem;
    background-image: radial-gradient(circle at 0 50%, var(--ground) 0.5rem, var(--carbon-rule) calc(0.5rem + 0.5px) calc(0.5rem + 1.5px), transparent calc(0.5rem + 2px)), radial-gradient(circle at 100% 50%, var(--ground) 0.5rem, var(--carbon-rule) calc(0.5rem + 0.5px) calc(0.5rem + 1.5px), transparent calc(0.5rem + 2px));
    background-position: 0 0, 100% 0;
    background-size: 0.75rem 100%;
    background-repeat: no-repeat;
}

.carbon__bar::after {
    top: -3px;
    right: 0.9rem;
    left: 0.9rem;
    height: 6px;
    background-image: radial-gradient(circle, var(--ground) 1.75px, var(--carbon-rule) 2.25px, transparent 2.75px);
    background-position: 0 50%;
    background-size: 0.5rem 100%;
    background-repeat: repeat-x;
}

.barcode {
    display: block;
    width: 100%;
    height: 2.5rem;
    fill: var(--ink);
}

.carbon__foot {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    margin-top: 0.45rem;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: var(--font-size-caption);
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
}

.carbon__foot span:last-child {
    text-align: right;
}

/* ---- The booking stages as stamps ---- */
.stages {
    display: grid;
    gap: 0.5rem;
}

/* One stamp column for every stage (the widest stamp sets it, through subgrid), so a long stamp
   never runs into its line. */
.stages__list {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stage {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    justify-items: start;
    row-gap: 0.35rem;
    padding-block: 0.55rem 0.5rem;
    border-top: var(--rule);
    color: var(--ink);
}

.stage:first-child {
    border-top: 0;
}

.stage .stamp {
    transform: rotate(-2deg);
}

.stage:nth-child(even) .stamp {
    transform: rotate(1.5deg);
}

.stage__text {
    font-size: var(--font-size-body);
    line-height: 1.3;
}

/* ---------------------------------------------------------------- the wallet's bottom row (price-table band)
   The comp's row under the first screen: the route map, the car, a hiking coupon, the booking stages.
   One column on a phone, two by two from 48em, one row of four from 80em. */
.band {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-inline: calc(var(--edge) - var(--gutter));
    border-top: var(--rule-ink);
}

.band__cell {
    min-width: 0;
    margin: 0;
    padding: var(--space-lg) var(--gutter);
}

.band__cell + .band__cell {
    border-top: var(--rule-ink);
}

.band__head {
    margin-bottom: 0.75rem;
}

.band__map {
    max-width: none;
    align-content: start;
}

.band__map svg {
    max-width: 30rem;
}

/* A narrow stages cell (the row of three at 1280): each stamp over its line, not squeezed beside it. */
.band__stages {
    container: band-stages / inline-size;
}

@container band-stages (max-width: 18.5rem) {
    .band__stages .stages__list {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The hiking coupon: route and fare tab over the two codes; a closed run carries the VOID stamp in
   its own place beside the codes (never on the codes, the arrow or the names) and the IFCN note. */
.coupon--band .coupon__head {
    grid-template-columns: minmax(0, 1fr) auto;
}

.coupon--band .coupon__route {
    padding-left: 1rem;
}

.coupon__body--band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem 1rem;
    padding: 0.8rem 1rem 0.7rem 1.125rem;
}

.coupon__pair {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.coupon__pair .coupon__place {
    font-size: var(--font-size-h2);
}

.coupon__pair .icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--accent-ink);
}

.coupon--band .stamp--void {
    position: static;
    flex: none;
    margin-right: 0.25rem;
    font-size: var(--font-size-h3);
    transform: rotate(-10deg);
}

.coupon__names {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.4rem;
    color: var(--carbon);
    font-size: var(--font-size-ui);
    font-weight: 500;
    line-height: 1.3;
}

.coupon__names .icon {
    width: 0.8rem;
    height: 0.8rem;
    color: var(--accent-ink);
}

.coupon--band .coupon__note {
    padding-top: 0.1rem;
}

@media (min-width: 48em) {
    .band {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .band__cell + .band__cell {
        border-top: 0;
    }

    .band__cell:nth-child(n + 3) {
        border-top: var(--rule-ink);
    }

    .band__cell:nth-child(even) {
        border-left: var(--rule-ink);
    }

    .band__cell:nth-child(3):last-child {
        grid-column: 1 / -1;
    }
}

@media (min-width: 80em) {
    .band {
        grid-template-columns: minmax(0, 36fr) minmax(0, 32fr) minmax(0, 32fr);
    }

    .band__cell {
        padding: 1.25rem 1.5rem 1.5rem;
    }

    .band__cell:first-child {
        padding-left: var(--gutter);
    }

    .band__cell:last-child {
        padding-right: var(--gutter);
    }

    .band__cell:nth-child(n + 3) {
        border-top: 0;
    }

    .band__cell:nth-child(3):last-child {
        grid-column: auto;
    }

    .band__cell + .band__cell {
        border-left: var(--rule-ink);
    }
}

/* ---------------------------------------------------------------- route-calculator: a custom route on coupon stock */
.quote {
    padding-block: var(--space-2xl);
    border-top: var(--rule-ink);
}

.quote__inner {
    display: grid;
    gap: var(--space-lg);
}

.quote__copy {
    display: grid;
    align-content: start;
    gap: var(--space-lg);
}

.quote__copy .sec-head {
    flex-direction: column;
    align-items: flex-start;
}

.quote__copy .sec-head__intro {
    flex: none;
    margin-top: var(--space-sm);
    font-size: var(--font-size-subtitle);
}

/* "Plan your route": the island in security dots, the zones by their codes, traced from FNC. */
.route-map {
    display: grid;
    gap: 0.35rem;
    max-width: 30rem;
    margin: 0;
}

.route-map__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem var(--space-md);
}

/* The zones as a fare box (the home's wide wallet only, where the map stands in the hero). */
.quote__zones {
    display: none;
    gap: 0.5rem;
    max-width: 32rem;
    margin: 0;
}

.zone-fares {
    width: 100%;
    border-top: var(--rule-ink);
    font-variant-numeric: tabular-nums;
}

.zone-fares thead th {
    padding: 0.5rem 0.5rem 0.35rem 0;
    border-bottom: var(--rule-tear);
    color: var(--ink);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-caption);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    white-space: nowrap;
}

.zone-fares tbody th,
.zone-fares td {
    padding: 0.5rem 0.5rem 0.4rem 0;
    border-bottom: var(--rule);
    vertical-align: baseline;
}

.zone-fares tbody th {
    color: var(--ink);
    font-weight: 600;
}

.zone-fares__code {
    display: inline-block;
    width: 3rem;
    font-family: var(--type-h1-font);
    font-size: var(--font-size-h4);
    font-style: italic;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.zone-fares td .led {
    color: var(--carbon);
    font-size: var(--font-size-ui);
}

.zone-fares__num {
    padding-right: 0;
    text-align: right;
}

.zone-fares td.zone-fares__num .led {
    font-size: var(--font-size-h4);
    font-weight: 700;
}

.route-map svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.route-map__dot {
    fill: var(--ink);
    opacity: 0.6;
}

.route-map__coast {
    fill: none;
    stroke: var(--ink);
    stroke-width: 0.7;
}

.route-map__leg {
    fill: none;
    stroke: var(--accent-ink);
    stroke-width: 1.2;
    stroke-linecap: round;
}

.route-map__stop {
    fill: var(--accent-ink);
    stroke: var(--coupon);
    stroke-width: 0.8;
}

.route-map__stop--fnc {
    fill: var(--ink);
}

.route-map__code {
    fill: var(--carbon);
    font-family: var(--font-mono);
    font-weight: 700;
    paint-order: stroke;
    stroke: var(--ground);
    stroke-width: 2.2;
    stroke-linejoin: round;
}

.route-map__code--fnc {
    fill: var(--ink);
}

@media (min-width: 75em) {
    .quote__inner {
        /* 1fr, never less: a lone flexible track under 1fr leaves the rest of the free space empty, and the
           card stopped short of the right edge on wide screens. */
        grid-template-columns: minmax(0, 1fr) minmax(0, 46rem);
        gap: var(--space-2xl);
        align-items: start;
    }

    .quote__copy {
        position: sticky;
        top: var(--space-lg);
    }

    .quote--lost .quote__inner {
        grid-template-columns: minmax(0, 46rem);
    }
}

/* The quote card: coupon stock, the tabs as tab caps over a tear line with punched notches. */
.qc {
    position: relative;
    border: var(--rule-coupon);
    border-radius: var(--radius-coupon);
    background: var(--coupon);
    box-shadow: var(--shadow-sheet);
}

.qc::before,
.qc::after {
    content: "";
    position: absolute;
    top: calc(3.25rem - 0.4rem);
    width: 0.875rem;
    height: 0.875rem;
    border: var(--rule-coupon);
    border-radius: 50%;
    background: var(--ground);
}

.qc::before {
    left: calc(var(--notch) / -2 - 2px);
    clip-path: inset(0 0 0 50%);
}

.qc::after {
    right: calc(var(--notch) / -2 - 2px);
    clip-path: inset(0 50% 0 0);
}

@media (max-width: 29.99em) {
    .qc::before,
    .qc::after {
        top: calc(6.5rem - 0.4rem);
    }
}

.qc-tabs__row {
    border-bottom: var(--rule-tear);
}

.qc-tab + .qc-tab .qc-tab__label {
    box-shadow: inset 1px 0 0 var(--hair-ink);
}

.qc-tab__label {
    color: var(--ink-soft);
    font-size: var(--font-size-ui);
    font-weight: 700;
    letter-spacing: var(--tracking-tab);
}

.qc-tab:hover .qc-tab__label {
    color: var(--ink);
    background: var(--paper-tint);
}

.qc-tab__input:checked + .qc-tab__label {
    color: var(--on-ink);
    background: var(--cell);
    box-shadow: none;
}

.qc-tab:first-child .qc-tab__label {
    border-radius: 3px 0 0 0;
}

.qc-tab:last-child .qc-tab__label {
    border-radius: 0 3px 0 0;
}

.qc-title__kind {
    font-family: var(--type-h3-font);
    font-size: var(--font-size-h3);
    font-weight: 700;
    letter-spacing: var(--tracking-tab);
    text-transform: uppercase;
}

.qc-title__eta {
    color: var(--carbon);
    font-family: var(--font-mono);
    font-size: var(--font-size-ui);
    font-weight: 600;
}

/* The readout: the fare in the turquoise tab, the band line in carbon, the status stamped. */
.qc-readout {
    background: var(--paper-tint);
    box-shadow: inset 0 1.5px 0 var(--ink), inset 0 -1px 0 var(--hair-ink);
}

.qc-readout__label {
    color: var(--ink);
    font-weight: 700;
}

.qc-price,
.qc-ask {
    display: inline-flex;
    padding: 0.2rem 0.6rem 0.1rem;
    border-radius: var(--radius);
    background: var(--tab);
    color: var(--on-tab);
}

.qc-ask {
    background: var(--ink);
    color: var(--on-ink);
}

.qc-price__led {
    color: inherit;
    font-size: var(--font-size-h1);
    font-weight: 700;
}

.qc-status .led {
    display: inline-block;
    padding: 0.32em 0.6em 0.16em;
    border: 2px solid currentColor;
    border-radius: 0.18em;
    color: var(--ink);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-caption);
    font-weight: 800;
    letter-spacing: 0.12em;
    transform: rotate(-2deg);
}

.qc-bands,
.qc-surcharge {
    color: var(--carbon);
    font-family: var(--font-mono);
    font-weight: 600;
}

.qc-note {
    color: var(--ink-soft);
}

.qc-ref__code {
    color: var(--carbon);
    font-weight: 700;
}

.qc-actions__wa--tba {
    outline-color: var(--ink-faint);
    color: var(--ink-soft);
    background: var(--coupon);
}

/* ---------------------------------------------------------------- booking-form: the request as coupon pages
   The steps read as a stamped leg strip; step 1 is the quote card, steps 2 and 3 are coupon pages
   with their leg number in the ink cell. Beside the form (from 80em) the heading, the lede and the
   booking stages as stamps hold a real column, sticky while the form scrolls. */
.request {
    padding-block: var(--space-2xl);
    border-top: var(--rule-ink);
}

.hero + .request {
    border-top: 0;
}

.request__inner {
    display: grid;
    gap: var(--space-xl);
}

.request__copy {
    display: grid;
    align-content: start;
    gap: var(--space-xl);
    min-width: 0;
}

.request__copy .sec-head {
    flex-direction: column;
    align-items: flex-start;
}

.request__copy .sec-head__intro {
    flex: none;
    max-width: 44ch;
    margin-top: var(--space-sm);
    color: var(--ink);
    font-size: var(--font-size-subtitle);
    line-height: 1.45;
}

.request__stages {
    max-width: 30rem;
    padding-top: 0.75rem;
    border-top: var(--rule-ink);
}

/* The stages' head stays a "///" tab head beside the italic H2. */
.request__copy .stages__label {
    font-family: var(--type-h2-font);
    font-size: var(--font-size-h4);
    font-style: normal;
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    line-height: 1.2;
}

.request__copy .stages__label::before {
    content: "";
}

/* Phones, tablets and small laptops: the form comes first after the heading; the stages follow it. */
@media (max-width: 79.99em) {
    .request__copy {
        display: contents;
    }

    .request__stages {
        order: 2;
    }
}

.request__stage {
    display: grid;
    gap: var(--space-lg);
    min-width: 0;
}

.request-form {
    display: grid;
    gap: var(--space-lg);
}

/* The leg strip: one coupon, three legs behind tear lines; the current leg in ink, a leg you have
   done stamped in carbon. */
.req-progress {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border: var(--rule-coupon);
    border-radius: var(--radius-coupon);
    background: var(--coupon);
}

.req-progress__step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    min-height: 3.25rem;
    padding: 0.4rem 0.875rem 0.3rem;
    color: var(--ink-faint);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-ui);
    font-weight: 700;
    letter-spacing: var(--tracking-tab);
    line-height: 1.1;
    text-transform: uppercase;
}

.req-progress__step + .req-progress__step {
    border-left: var(--rule-tear);
}

.req-progress__step .led {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.125rem;
    height: 2.125rem;
    padding-top: 2px;
    border: 2px solid currentColor;
    border-radius: 3px;
    font-size: var(--font-size-ui);
    font-weight: 700;
}

.req-progress__step.is-current {
    color: var(--ink);
}

.req-progress__step.is-current .led {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--on-ink);
}

.req-progress__step.is-done {
    color: var(--carbon);
}

.req-progress__step.is-done .led {
    transform: rotate(-6deg);
    -webkit-mask-image: var(--ink-grain);
    mask-image: var(--ink-grain);
    -webkit-mask-size: 10rem 5rem;
    mask-size: 10rem 5rem;
}

.no-js .req-progress {
    display: none;
}

.req-step {
    display: grid;
    gap: var(--space-md);
}

/* On the booking form the readout closes the card: it runs to the bottom edge, no white strip under it. */
.qc--form .qc-body {
    padding-bottom: 0;
}

.qc--form .qc-readout {
    margin-bottom: 0;
    border-radius: 0 0 4px 4px;
    box-shadow: inset 0 1.5px 0 var(--ink);
}

.js .req-step:not(.is-active) {
    display: none;
}

/* Steps 2 and 3: the ride and its price stay in view above the step. */
.req-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-md);
    margin-bottom: var(--space-md);
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    background: var(--coupon);
    box-shadow: var(--shadow-panel), inset 0 0 0 1px var(--hair-ink);
}

.req-summary[hidden] {
    display: none;
}

.req-summary__what {
    flex: 1 1 16rem;
    font-size: var(--font-size-body);
    font-weight: 600;
    line-height: var(--line-height-ui);
}

.req-summary__price {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
}

.req-summary__label {
    color: var(--ink-soft);
    font-size: var(--font-size-caption);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
}

.req-summary__led {
    color: var(--carbon);
    font-size: var(--font-size-h3);
    font-weight: 700;
}

/* Steps 2 and 3: a coupon page, its title in the head over the tear line. */
.req-panel {
    padding: 0 0 var(--space-lg);
    border: var(--rule-coupon);
    border-radius: var(--radius-coupon);
    background: var(--coupon);
    box-shadow: var(--shadow-sheet);
}

.req-panel > :not(legend) {
    margin-inline: clamp(1rem, 2.5vw, 1.5rem);
}

.req-step__title {
    position: relative;
    float: left;
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 3.25rem;
    margin-bottom: var(--space-xs);
    border-bottom: var(--rule-tear);
    font-family: var(--type-h3-font);
    font-size: var(--font-size-h4);
    font-weight: 700;
    letter-spacing: var(--tracking-tab);
    line-height: 1.1;
    text-transform: uppercase;
}

.req-step__title::before,
.req-step__title::after {
    content: "";
    position: absolute;
    bottom: calc(var(--notch) / -2 - 1px);
    width: var(--notch);
    height: var(--notch);
    border: var(--rule-coupon);
    border-radius: 50%;
    background: var(--ground);
}

.req-step__title::before {
    left: calc(var(--notch) / -2 - 2px);
    clip-path: inset(0 0 0 50%);
}

.req-step__title::after {
    right: calc(var(--notch) / -2 - 2px);
    clip-path: inset(0 50% 0 0);
}

.req-step__leg {
    display: grid;
    place-items: center;
    flex: none;
    width: 3rem;
    margin-right: 1rem;
    border-radius: 3px 0 0 0;
    background: var(--cell);
    color: var(--on-ink);
    font-family: var(--type-h1-font);
    font-size: var(--font-size-h3);
    font-style: italic;
    font-weight: 800;
}

.req-step__title {
    align-items: center;
}

.req-step__leg {
    align-self: stretch;
}

.req-step__title + * {
    clear: both;
}

/* The step's title takes focus when the step opens (a landmark for screen readers, not a control):
   no ring on it. */
.req-step__title:focus {
    outline: none;
}

.req-grid {
    display: grid;
    gap: var(--space-sm);
}

.req-checks {
    display: grid;
    gap: 0;
}

.req-checks > .field__label {
    margin-bottom: 0.25rem;
}

.req-langs__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.req-return {
    display: grid;
    gap: var(--space-sm);
}

.req-step__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-sm);
}

.req-panel > .req-step__nav {
    margin-top: var(--space-xs);
    padding-top: var(--space-md);
    border-top: var(--rule);
}

.req-step__nav .gate {
    margin-left: auto;
    min-height: var(--gate-height);
    font-size: var(--font-size-h4);
}

.req-error {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius);
    background: var(--paper-tint);
    box-shadow: inset 0 0 0 1.5px var(--ink);
    color: var(--ink);
    font-weight: 700;
}

.req-note,
.req-closed {
    max-width: var(--prose-width);
    color: var(--ink-soft);
    text-wrap: pretty;
}

.req-closed {
    color: var(--ink);
    font-weight: 600;
}

.hp {
    display: none;
}

/* Phones: the leg strip keeps its three legs; the labels give way to the numbers but the current one. */
@media (max-width: 34.99em) {
    .req-progress {
        display: flex;
    }

    .req-progress__step {
        flex: none;
        padding-inline: 0.625rem;
    }

    .req-progress__step.is-current {
        flex: 1 1 auto;
    }

    .req-progress__step:not(.is-current) > span:not(.led) {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@media (min-width: 48em) {
    .req-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.request__stage {
    max-width: 50rem;
}

/* Wide screens: two balanced columns, the copy and its stamps beside the form (below 80em the quote
   card would lose its From and To names to a narrow column, so the two stack). */
@media (min-width: 80em) {
    .request__inner {
        grid-template-columns: minmax(18rem, 5fr) minmax(0, 7fr);
        gap: var(--space-2xl);
        align-items: start;
    }

    .request__copy {
        position: sticky;
        top: var(--space-lg);
    }

}

@media (min-width: 90em) {
    .request__inner {
        column-gap: var(--space-3xl);
    }
}

/* ---------------------------------------------------------------- cta: the closing coupon */
.cta {
    padding-block: var(--space-2xl);
    border-top: var(--rule-ink);
}

.cta .cta__inner {
    position: relative;
    display: grid;
    gap: var(--space-lg);
    align-items: center;
    margin-inline: var(--edge);
    padding: var(--space-xl) clamp(1.25rem, 3vw, 2.5rem);
    border: var(--rule-coupon);
    border-radius: var(--radius-coupon);
    background: var(--coupon);
    box-shadow: var(--shadow-sheet);
}

.cta__title {
    max-width: 18ch;
    text-transform: uppercase;
    text-wrap: balance;
}

.cta__text {
    max-width: 48ch;
    margin-top: var(--space-md);
    color: var(--ink);
    font-size: var(--font-size-subtitle);
    line-height: 1.42;
}

.cta__price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.875rem;
    margin-top: var(--space-md);
    color: var(--carbon);
    font-family: var(--font-mono);
    font-size: var(--font-size-ui);
    font-weight: 600;
}

.cta__route {
    color: var(--ink);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-h4);
    font-weight: 700;
    letter-spacing: var(--tracking-tab);
    text-transform: uppercase;
}

.cta__route .route-arrow {
    width: 0.8em;
    height: 0.8em;
    margin: 0 0.35em;
    color: var(--accent-ink);
    vertical-align: -0.02em;
}

.cta__led {
    padding: 0.3rem 0.65rem 0.2rem;
    border-radius: var(--radius);
    background: var(--tab);
    color: var(--on-tab);
    font-size: var(--font-size-h3);
    font-weight: 700;
}

.cta__band {
    color: var(--carbon);
}

@media (min-width: 64em) {
    /* Copy and stub share the width 3:2, so a narrow column (a guide article) stacks the buttons in
       the stub instead of squeezing the copy. */
    .cta .cta__inner {
        grid-template-columns: minmax(0, 3fr) minmax(min-content, 2fr);
        gap: 0;
        padding: 0;
    }

    .cta__actions > * {
        flex: 1 1 auto;
    }

    .cta__copy {
        padding: var(--space-xl) var(--space-2xl) var(--space-xl) clamp(1.5rem, 3vw, 2.5rem);
    }

    /* The stub: the button on the far side of a tear line, notched top and bottom. */
    .cta__actions {
        position: relative;
        align-self: stretch;
        align-items: center;
        align-content: center;
        padding: var(--space-xl) clamp(1.5rem, 3vw, 2.5rem);
        border-left: var(--rule-tear);
    }

    .cta__actions::before,
    .cta__actions::after {
        content: "";
        position: absolute;
        left: -0.55rem;
        width: 0.875rem;
        height: 0.875rem;
        border: var(--rule-coupon);
        border-radius: 50%;
        background: var(--ground);
    }

    .cta__actions::before {
        top: -0.6rem;
        clip-path: inset(50% 0 0 0);
    }

    .cta__actions::after {
        bottom: -0.6rem;
        clip-path: inset(0 0 50% 0);
    }
}

/* ---------------------------------------------------------------- waitlist: a product not sold yet */
/* The closing coupon of a waitlist product: the copy and the planned price on one side, the dates form on
   the other. Nothing on it books: the stamp and the planned price say so. */
.waitlist {
    padding-block: var(--space-2xl);
    border-top: var(--rule-ink);
}

.waitlist .waitlist__inner {
    display: grid;
    gap: var(--space-lg);
    margin-inline: var(--edge);
    padding: var(--space-xl) clamp(1.25rem, 3vw, 2.5rem);
    border: var(--rule-coupon);
    border-radius: var(--radius-coupon);
    background: var(--coupon);
    box-shadow: var(--shadow-sheet);
}

.waitlist__stamp {
    margin-bottom: var(--space-md);
}

.waitlist__form {
    display: grid;
    align-content: start;
    gap: var(--space-md);
    min-width: 0;
}

.waitlist__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: var(--space-md);
}

.waitlist__actions > * {
    flex: 1 1 auto;
}

.waitlist__done {
    color: var(--go);
    font-weight: 600;
}

@media (min-width: 64em) {
    .waitlist .waitlist__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--space-2xl);
    }
}

/* ---------------------------------------------------------------- text */
.text {
    padding-block: var(--space-2xl);
    border-top: var(--rule-ink);
}

.text__inner {
    display: grid;
    gap: var(--space-md);
}

.text__box {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
}

.prose a {
    text-decoration-color: var(--accent-ink);
    text-decoration-thickness: 1.5px;
}

.prose a:hover {
    color: var(--accent-ink);
}

.prose ul {
    list-style: square;
}

.prose li::marker {
    color: var(--accent-ink);
}

/* note: a short aside on its own small coupon. */
.text--note .text__box {
    max-width: calc(var(--prose-width) + var(--space-lg) * 2);
    padding: var(--space-lg);
    gap: var(--space-sm);
    border: var(--rule-coupon);
    border-radius: var(--radius-coupon);
    background: var(--coupon);
    box-shadow: var(--shadow-sheet);
}

/* article: the guide body (Read mode). One reading measure for the heading and the text, a longer
   line height, and consecutive sections that flow on without a rule between them. */
.text--article {
    scroll-margin-top: var(--space-lg);
}

.text--article .text__box {
    max-width: var(--prose-width);
}

.text--article + .text--article {
    padding-top: var(--space-sm);
    border-top: 0;
}

.prose--article {
    font-size: 1.125rem;
    line-height: 1.65;
}

.prose--article > * + * {
    margin-top: 1.1em;
}

.prose--article h2,
.prose--article h3 {
    scroll-margin-top: var(--space-lg);
    color: var(--ink);
    line-height: 1.15;
    text-wrap: balance;
}

.prose--article h2 {
    margin-top: 2.2em;
    font-size: var(--font-size-h2);
    font-style: italic;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.prose--article h3 {
    margin-top: 1.9em;
    font-size: var(--font-size-h4);
    letter-spacing: var(--tracking-tab);
}

.prose--article h2 + *,
.prose--article h3 + * {
    margin-top: 0.5em;
}

.prose--article a {
    font-weight: 600;
    text-decoration-color: var(--accent-ink);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.22em;
}

.prose--article strong {
    color: var(--ink);
}

.prose--article blockquote {
    margin: 1.4em 0;
    padding: 0.9em 1.2em 0.8em;
    border: 1.5px dashed var(--carbon-rule);
    border-radius: 4px;
    background: var(--carbon-paper);
    color: var(--carbon);
    font-family: var(--type-quote-font);
}

.prose--article img {
    display: block;
    width: 100%;
    height: auto;
    padding: 6px;
    border: var(--rule-coupon);
    border-radius: var(--radius-coupon);
    background: var(--coupon);
}

.prose--article hr {
    margin-block: 2em;
    border: 0;
    border-top: var(--rule-tear);
}

/* The answer: the article's opening paragraph, straight under the guide's hero, reads larger. */
.hero + .text--article .prose--article > p:first-child {
    color: var(--ink);
    font-size: var(--font-size-subtitle);
    font-weight: 500;
    line-height: 1.5;
}

/* legal: the company's identity as a ruled fare box on coupon stock. */
.legal--block {
    max-width: var(--prose-width);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    gap: 0;
    border: var(--rule-coupon);
    border-radius: var(--radius-coupon);
    background: var(--coupon);
}

.legal--block .legal__row {
    gap: 0.3rem;
    padding: 0.7rem 1rem 0.6rem;
    border-bottom: var(--rule);
}

.legal--block .legal__row dt {
    color: var(--ink);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-caption);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

.legal--block .legal__row dd {
    color: var(--ink);
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- error-404: a voided ticket */
.lost {
    padding-block: var(--space-2xl) var(--space-xl);
}

/* 52rem of content: the page edge pads both sides (.wrap), so it counts into the cap. */
.lost__inner {
    display: grid;
    gap: var(--space-md);
    max-width: calc(52rem + 2 * var(--edge));
}

.lost__code {
    margin-bottom: var(--space-xs);
}

/* The status is stamped ("Not found"), never an error code (brand-platform §4.3). */
.lost__status {
    padding: 0.2em 0.55em 0.06em;
    border-width: 4px;
    font-size: var(--font-size-h2);
    letter-spacing: 0.16em;
    transform: rotate(-4deg);
    mix-blend-mode: var(--stamp-blend);
}

.lost__title {
    max-width: 18ch;
    font-size: var(--font-size-4xl);
    font-style: italic;
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: var(--tracking-display);
}

.lost__body {
    color: var(--ink);
    font-size: var(--font-size-subtitle);
}

.lost__actions {
    align-items: center;
    margin-top: var(--space-sm);
}

/* ---------------------------------------------------------------- map: the island in security dots, zones in flat tints, turquoise-ink routes */
.map {
    padding-block: var(--space-2xl);
    border-top: var(--rule-ink);
}

.map__inner {
    display: grid;
    gap: var(--space-lg);
}

.map__grid {
    display: grid;
    gap: var(--space-lg);
    align-items: start;
}

.map__figure {
    margin: 0;
    min-width: 0;
    padding: 6px;
    border: var(--rule-coupon);
    border-radius: var(--radius-coupon);
    background: var(--coupon);
    box-shadow: var(--shadow-sheet);
}

.map__canvas {
    position: relative;
    aspect-ratio: var(--map-ratio, 2.035);
    overflow: hidden;
    border-radius: 3px;
    background: var(--coupon);
}

.map__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.map__island {
    fill: var(--island);
}

.map__dot {
    fill: var(--ink);
    opacity: 0.5;
}

.map__zone {
    fill: var(--zf, var(--zone));
    stroke: var(--coupon);
    stroke-width: 1.5px;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    mix-blend-mode: multiply;
}

.map__zone--1 {
    --zf: var(--zone-1);
}

.map__zone--2 {
    --zf: var(--zone-2);
}

.map__zone--3 {
    --zf: var(--zone-3);
}

.map__zone--4 {
    --zf: var(--zone-4);
}

.map__zone--5 {
    --zf: var(--zone-5);
}

.map__zone--6 {
    --zf: var(--zone-6);
}

.map__zone--7 {
    --zf: var(--zone-7);
}

.map__zone.is-lit,
.map-key__swatch.is-lit {
    --zf: var(--zone-highlight);
}

.map__zone--port {
    --zf: var(--zone-4);
}

.map__route {
    fill: none;
    stroke: var(--accent-ink);
    stroke-width: 3px;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.map__start {
    fill: var(--ink);
}

.map__keyline {
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.25px;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

/* Route, trailhead and port markers: HTML over the drawing, one size at every width. */
.map__marks {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.map__mk {
    position: absolute;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    padding-top: 0.1rem;
    border-radius: 50%;
    background: var(--tab);
    box-shadow: 0 0 0 2px var(--coupon);
    color: var(--on-tab);
    font-family: var(--font-mono);
    font-size: var(--font-size-caption);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    transform: translate(-50%, -50%);
}

.map__mk--start {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 2px;
    background: var(--ink);
}

.map__mk--end {
    width: 1.125rem;
    height: 1.125rem;
    background: var(--coupon);
    box-shadow: inset 0 0 0 3.5px var(--ink), 0 0 0 2px var(--coupon);
}

/* Zone name plates: tab caps on coupon stock, laid over the drawing so they keep their size. */
.map__plates {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.map__plate {
    position: absolute;
    padding: 0.22rem 0.4rem 0.06rem;
    border-radius: 2px;
    background: var(--coupon);
    box-shadow: inset 0 0 0 1.5px var(--ink);
    color: var(--ink);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-caption);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translate(-50%, -50%);
}

.map__plate--fnc {
    padding-top: 0.25rem;
    background: var(--ink);
    transform: translate(0.5rem, -115%);
}

.map__plate--fnc .led {
    color: var(--on-ink);
    font-size: var(--font-size-ui);
}

.map__caption {
    max-width: var(--prose-width);
    padding: 0.55rem 0.4rem 0.2rem;
    color: var(--ink-soft);
    font-size: var(--font-size-ui);
    text-wrap: pretty;
}

.map__key {
    display: grid;
    gap: var(--space-md);
    min-width: 0;
}

/* The zones key: area, drive time, price per car, on a ruled fare box. */
.map-key {
    width: 100%;
    border-top: var(--rule-ink);
}

.map-key th,
.map-key td {
    padding: 0.55rem 0.5rem 0.45rem 0;
    border-bottom: var(--rule);
    vertical-align: middle;
}

.map-key thead th {
    padding-top: 0.5rem;
    border-bottom: var(--rule-tear);
    color: var(--ink);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-caption);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    white-space: nowrap;
}

.map-key tbody th {
    color: var(--ink);
    font-weight: 600;
    line-height: var(--line-height-ui);
}

.map-key tr.is-lit > * {
    background: var(--hl-tint);
}

.map-key__area {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.map-key__swatch {
    flex: none;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 1px;
    background: var(--zf, var(--zone));
    box-shadow: inset 0 0 0 1px var(--hair-ink);
    transform: translateY(1px);
}

.map-key .cell-led .led {
    font-size: var(--font-size-ui);
}

.map-key__price {
    text-align: right;
    white-space: nowrap;
}

.map-key__led {
    color: var(--carbon);
    font-size: var(--font-size-h3);
    font-weight: 700;
}

.map-key__price small {
    display: block;
    margin-top: 0.2rem;
    color: var(--ink-soft);
    font-size: var(--font-size-caption);
}

.map-key__price .map-key__cond {
    white-space: normal;
}

/* The stops key: the start square, the numbered stops, the end ring. */
.map-stops {
    display: grid;
    gap: 0;
    padding: 0;
    list-style: none;
    border-top: var(--rule-ink);
}

.map-stops__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.5rem;
    padding-block: 0.3rem 0.2rem;
    border-bottom: var(--rule);
    color: var(--ink);
    font-weight: 600;
    line-height: var(--line-height-ui);
}

.map-stops__item small {
    margin-right: 0.3rem;
    color: var(--ink);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-caption);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

.map-stops__mark {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--tab);
    color: var(--on-tab);
}

.map-stops__mark .led {
    padding-top: 1px;
    font-size: var(--font-size-caption);
    font-weight: 700;
}

.map-stops__item--start .map-stops__mark {
    width: 1.1rem;
    height: 1.1rem;
    margin-inline: 0.325rem;
    border-radius: 2px;
    background: var(--forest);
    box-shadow: 0 0 0 1.5px var(--hair-strong);
}

.map-stops__item--end .map-stops__mark {
    width: 1.1rem;
    height: 1.1rem;
    margin-inline: 0.325rem;
    background: var(--ground);
    box-shadow: inset 0 0 0 3.5px var(--ink);
}

.map__legend {
    display: grid;
    gap: var(--space-xs);
    padding: 0;
    list-style: none;
    color: var(--ink-soft);
}

.map__legend li {
    padding-left: 1rem;
    text-indent: -1rem;
    text-wrap: pretty;
}

.map__legend li::before {
    content: "";
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    margin-right: 0.6rem;
    background: var(--accent-ink);
    vertical-align: 0.15em;
}

/* Reference towns on route maps: a small dot and a quiet name, for orientation only. */
.map__ref {
    position: absolute;
    padding: 0.1rem 0.25rem 0 0.8rem;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--ink-soft);
    font-size: var(--font-size-caption);
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    transform: translate(-0.35rem, -50%);
}

.map__ref::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.25rem;
    width: 0.35rem;
    height: 0.35rem;
    margin-top: -0.2rem;
    border-radius: 50%;
    background: var(--ink);
}

/* Phones: slightly smaller markers and route line. The zones key puts the area on its own line,
   then the drive time and the price. */
@media (max-width: 47.99em) {
    .map__mk {
        width: 1.25rem;
        height: 1.25rem;
    }

    /* The whole island on a phone: stops sit too close for numbered discs, so they become
       small stations; the numbered key under the map carries the order. */
    .map__canvas--island .map__mk--stop {
        width: 0.75rem;
        height: 0.75rem;
        padding: 0;
        color: transparent;
    }

    .map__mk--start,
    .map__mk--end {
        width: 1rem;
        height: 1rem;
    }

    .map__route {
        stroke-width: 2.5px;
    }

    .map-key thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .map-key tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "area area"
            "time price";
        align-items: baseline;
        column-gap: var(--space-md);
        row-gap: 0.2rem;
        padding: 0.6rem 0 0.5rem;
        border-bottom: var(--rule);
    }

    .map-key th,
    .map-key td {
        padding: 0;
        border: 0;
    }

    .map-key tbody th {
        grid-area: area;
    }

    .map-key tr.is-lit {
        background: var(--hl-tint);
    }

    .map-key tr.is-lit > * {
        background: none;
    }

    .map-key td:not(.map-key__price) {
        grid-area: time;
        padding-left: 1.475rem;
    }

    .map-key__price {
        grid-area: price;
    }

    .map-key__price small {
        display: inline;
        margin-left: 0.4rem;
    }

    .map__plate {
        padding: 0.14rem 0.3rem 0;
    }
}

@media (min-width: 64em) {
    .map__grid {
        grid-template-columns: minmax(0, 1fr) minmax(22rem, 29rem);
        gap: var(--space-xl);
    }
}

/* ---------------------------------------------------------------- shared by the T2 blocks */
.tariffs,
.cards,
.itin,
.car,
.steps,
.faq,
.compare,
.facts,
.rules,
.driver,
.reviews {
    padding-block: var(--space-2xl);
    border-top: var(--rule-ink);
}

.tariffs__inner,
.cards__inner,
.itin__inner,
.steps__inner,
.compare__inner,
.facts__inner,
.rules__inner,
.reviews__inner {
    display: grid;
    gap: var(--space-lg);
}

/* Column heads: tab caps in ink over an ink rule. */
.terms__title,
.plan__fare dt,
.cmp thead th,
.ftable thead th,
.fits thead th {
    color: var(--ink);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-caption);
    font-weight: 800;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

/* A source or live-status link: text with the outbound arrow, full tap height. */
.src-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: var(--tap);
    color: var(--ink);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--ink-faint);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
}

span.src-link {
    text-decoration: none;
    font-weight: 500;
}

a.src-link:hover {
    text-decoration-color: currentColor;
}

.src-link .icon {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--ink-soft);
}

/* ---------------------------------------------------------------- tariffs: hire and tour plans as coupons */
.tariffs__plans {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
}

.plan {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: var(--rule-coupon);
    border-radius: var(--radius-coupon);
    background: var(--coupon);
    box-shadow: var(--shadow-sheet);
}

/* The coupon's head: the plan's name and the turquoise fare tab that books it, over the tear line. */
.plan__head {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    min-height: 3.25rem;
    border-bottom: var(--rule-tear);
}

.plan__head::before,
.plan__head::after {
    content: "";
    position: absolute;
    bottom: calc(var(--notch) / -2 - 1px);
    width: var(--notch);
    height: var(--notch);
    border: var(--rule-coupon);
    border-radius: 50%;
    background: var(--ground);
}

.plan__head::before {
    left: calc(var(--notch) / -2 - 2px);
    clip-path: inset(0 0 0 50%);
}

.plan__head::after {
    right: calc(var(--notch) / -2 - 2px);
    clip-path: inset(0 50% 0 0);
}

.plan__name {
    align-self: center;
    padding: 0.75rem 0.875rem 0.6rem 1.125rem;
    font-family: var(--type-h3-font);
    font-size: var(--font-size-h4);
    font-weight: 700;
    letter-spacing: var(--tracking-tab);
    line-height: 1.12;
    text-wrap: balance;
}

.plan__tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 6.25rem;
    padding: 2px 0.875rem 0;
    border-radius: 0 3px 0 0;
    background: var(--tab);
    color: var(--on-tab);
    font-size: var(--font-size-h3);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 120ms var(--ease-out);
}

.plan__tab .led {
    font-weight: 700;
}

.plan__per {
    font-family: var(--font-mono);
    font-size: var(--font-size-ui);
    font-weight: 700;
}

.plan__tab .icon {
    width: 0.8rem;
    height: 0.8rem;
    margin-top: -2px;
}

a.plan__tab:hover {
    background: var(--tab-press);
}

a.plan__tab:focus-visible {
    outline-color: var(--ink);
    outline-offset: -5px;
}

.plan__tab--void {
    background: var(--coupon);
    color: var(--ink-faint);
    box-shadow: inset 1.5px 0 0 var(--hair-ink);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

.plan__time {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    min-height: 1.5rem;
    padding: 0.875rem 1.125rem 0;
    color: var(--ink-soft);
    font-size: var(--font-size-ui);
}

.plan__time:empty {
    display: none;
}

.plan__time .led {
    color: var(--carbon);
    font-size: var(--font-size-h4);
}

/* The fare box: the bands as ruled cells, label caps over carbon figures. */
.plan__fares {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    margin: 0.75rem 1.125rem 0;
    border: 1.5px solid var(--ink);
    border-radius: 4px;
}

.plan__fare {
    display: grid;
    align-content: start;
    gap: 0.35rem;
    min-width: 0;
    padding: 0.6rem 0.8rem 0.55rem;
}

.plan__fare + .plan__fare {
    border-left: 1.5px dashed var(--hair-strong);
}

.plan__fare dt {
    color: var(--ink);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-caption);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    white-space: nowrap;
}

.plan__fare dd {
    display: grid;
    gap: 0.2rem;
}

.plan__led {
    color: var(--carbon);
    font-size: var(--font-size-h2);
    font-weight: 700;
}

.plan__fare .price__night {
    margin-top: 0;
}

.plan__closed {
    padding: 0.875rem 1.125rem 0;
}

.plan__cond {
    padding: 0.875rem 1.125rem 0;
}

.plan__note {
    padding: 0.875rem 1.125rem 1.125rem;
    color: var(--ink-soft);
    text-wrap: pretty;
}

.plan > :last-child:not(.plan__note) {
    margin-bottom: 1.125rem;
}

.tariffs__foot {
    display: grid;
    gap: var(--space-lg);
}

/* In and out of the price: two ruled lists on one sheet. */
.terms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: var(--space-lg) var(--space-2xl);
}

.terms__title {
    padding-bottom: 0.45rem;
    border-bottom: var(--rule-ink);
    color: var(--ink);
}

.terms__list {
    padding: 0;
    list-style: none;
}

.terms__list li {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    padding-block: 0.55rem 0.45rem;
    border-bottom: var(--rule);
    text-wrap: pretty;
}

.terms__list span {
    display: block;
}

/* Lines that open with a token ("{policy:included.short}") still start with a capital. */
.terms__list span::first-letter {
    text-transform: uppercase;
}

.terms__list .icon {
    flex: none;
    width: 0.95rem;
    height: 0.95rem;
    color: var(--ink);
    transform: translateY(0.1rem);
}

.terms__col--out li {
    color: var(--ink-soft);
}

.terms__col--out .icon {
    color: var(--ink-soft);
}

.tariffs__each {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    color: var(--ink);
    font-size: var(--font-size-subtitle);
    font-weight: 600;
}

.tariffs__led {
    color: var(--carbon);
    font-size: var(--font-size-h2);
    font-weight: 700;
}

.tariffs__body {
    color: var(--ink-soft);
}

@media (min-width: 40em) {
    .tariffs__plans:not(.tariffs__plans--1) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64em) {
    .tariffs__plans.tariffs__plans--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tariffs__plans--1 {
        grid-template-columns: minmax(0, 36rem);
    }
}

@media (min-width: 80em) {
    .tariffs__plans.tariffs__plans--5,
    .tariffs__plans.tariffs__plans--6 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------------- tour-cards: tour coupons with a photo stub */
.cards__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
    gap: var(--space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: var(--rule-coupon);
    border-radius: var(--radius-coupon);
    background: var(--coupon);
    box-shadow: var(--shadow-sheet);
    transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sheet), 0 16px 24px -18px rgba(7, 59, 52, 0.55);
}

.card:focus-within {
    outline: var(--focus-ring);
    outline-offset: 3px;
}

/* The photo stub: the picture in its window, the caption strip under it. */
.card__screen {
    border: 0;
    border-radius: 4px 4px 0 0;
    background: none;
    box-shadow: none;
}

.card__screen .screen__glass {
    margin: 6px 6px 0;
    aspect-ratio: 16 / 10;
    border-radius: 2px;
}

.card__plate {
    align-items: center;
    min-height: 2.375rem;
    padding: 0.4rem 0.875rem 0.3rem 1rem;
    border-top: 0;
}

.card__plate::before,
.card__plate::after {
    content: none;
}

.card__plate .plate__led {
    color: var(--carbon);
    font-family: var(--font-mono);
    font-size: var(--font-size-h4);
    letter-spacing: 0.01em;
}

.card__badge {
    margin-left: auto;
    color: var(--ink);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-caption);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

/* The body stands behind the tear line, punched at both edges. */
.card__body {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.7rem;
    padding: var(--space-md) 1.125rem 1.125rem;
}

.card__screen + .card__body {
    border-top: var(--rule-tear);
}

.card__screen + .card__body::before,
.card__screen + .card__body::after {
    content: "";
    position: absolute;
    top: calc(var(--notch) / -2 - 1px);
    width: var(--notch);
    height: var(--notch);
    border: var(--rule-coupon);
    border-radius: 50%;
    background: var(--ground);
}

.card__screen + .card__body::before {
    left: calc(var(--notch) / -2 - 2px);
    clip-path: inset(0 0 0 50%);
}

.card__screen + .card__body::after {
    right: calc(var(--notch) / -2 - 2px);
    clip-path: inset(0 50% 0 0);
}

.card__title {
    font-family: var(--type-h3-font);
    font-size: var(--font-size-h3);
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.1;
}

.card__link {
    color: inherit;
    text-decoration: none;
}

.card:hover .card__link {
    text-decoration: underline;
    text-decoration-color: var(--accent-ink);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.18em;
}

/* The title's link covers the card; focus shows on the card. */
.card__link::after,
.sign-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.card__link:focus-visible,
.sign-card__link:focus-visible {
    outline: none;
}

.card__line {
    max-width: var(--prose-width);
    color: var(--ink-soft);
    text-wrap: pretty;
}

.card__stops {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.5rem;
    padding: 0;
    list-style: none;
    color: var(--ink);
    font-weight: 600;
    line-height: var(--line-height-ui);
}

.card__stops li + li::before {
    content: "";
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    margin-right: 0.5rem;
    background: var(--accent-ink);
    vertical-align: -0.05em;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10.4h12.6l-5-5L12.9 3 22 12l-9.1 9-2.3-2.4 5-5H3z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10.4h12.6l-5-5L12.9 3 22 12l-9.1 9-2.3-2.4 5-5H3z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.card__duration {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    color: var(--carbon);
    font-size: var(--font-size-ui);
    font-weight: 600;
}

.card__duration .icon {
    flex: none;
    width: 0.9rem;
    height: 0.9rem;
    color: var(--ink);
    transform: translateY(0.12rem);
}

/* The fare line: the price in the turquoise tab, the band and the 5-6 price beside it. */
.card__fare {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "tab band"
        "tab large";
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.1rem;
    margin-top: auto;
    padding-top: var(--space-sm);
    border-top: var(--rule);
}

.card__fare > .price {
    grid-area: tab;
    align-self: stretch;
    align-items: center;
    padding: 0.35rem 0.75rem 0.2rem;
    border-radius: var(--radius);
    background: var(--tab);
    color: var(--on-tab);
}

.card__fare > .price .price__per {
    color: var(--on-tab);
}

.card__led {
    color: var(--on-tab);
    font-size: var(--font-size-h3);
    font-weight: 700;
}

.card__band {
    grid-area: band;
    color: var(--ink);
    font-size: var(--font-size-ui);
    font-weight: 500;
    line-height: var(--line-height-ui);
}

.card__large {
    grid-area: large;
    color: var(--carbon);
    font-family: var(--font-mono);
    font-size: var(--font-size-caption);
    font-weight: 600;
}

.card__fare > .status {
    grid-area: tab;
}

/* A waitlist tour's stamp rides on the photo plate, beside the hours, so every fare stays on one line. */
.card__plate .card__status {
    margin-left: auto;
}

.card__more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: var(--space-xs);
    color: var(--ink);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-h4);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

.card__more .icon {
    width: 0.9rem;
    height: 0.9rem;
    margin-top: -2px;
    color: var(--accent-ink);
}

.card__chip {
    color: var(--ink);
}

.card--closed .card__led,
.card--closed .card__title {
    color: var(--ink-faint);
}

/* Tour cards fill the row: two, three or four across; five and six go three across. */
@media (min-width: 40em) {
    .cards--tours .cards__list,
    .cards--guides .cards__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64em) {
    .cards--tours .cards__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cards--tours .cards__list--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cards--tours .cards__list--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .cards--guides .cards__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cards--guides .cards__list--2 {
        grid-template-columns: repeat(2, minmax(0, 30rem));
    }
}

/* One card alone: a wide ticket, the photo stub on the left behind a vertical tear line. */
@media (min-width: 48em) {
    .cards--single .cards__list {
        grid-template-columns: minmax(0, 1fr);
    }

    .cards--single .card {
        display: grid;
        grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
        align-items: stretch;
        max-width: 60rem;
    }

    .cards--single .card__screen {
        border-radius: 4px 0 0 4px;
    }

    .cards--single .card__screen .screen__glass {
        margin: 6px 0 0 6px;
        aspect-ratio: 4 / 3;
    }

    .cards--single .card__screen + .card__body {
        align-self: stretch;
        padding: var(--space-lg) var(--space-xl);
        border-top: 0;
        border-left: var(--rule-tear);
    }

    .cards--single .card__screen + .card__body::before {
        top: calc(var(--notch) / -2 - 2px);
        left: calc(var(--notch) / -2 - 1px);
        clip-path: inset(50% 0 0 0);
    }

    .cards--single .card__screen + .card__body::after {
        top: auto;
        right: auto;
        bottom: calc(var(--notch) / -2 - 2px);
        left: calc(var(--notch) / -2 - 1px);
        clip-path: inset(0 0 50% 0);
    }
}

/* The home chooser: one coupon per service. */
.cards--services .cards__list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr));
    gap: var(--space-md);
}

.sign-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
    padding: var(--space-md) 1.125rem 1.125rem;
    border: var(--rule-coupon);
    border-radius: var(--radius-coupon);
    background: var(--coupon);
    box-shadow: var(--shadow-sheet);
}

.sign-card:focus-within {
    outline: var(--focus-ring);
    outline-offset: 3px;
}

.sign-card__title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    font-size: var(--font-size-h3);
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.12;
}

.sign-card__link {
    color: inherit;
    text-decoration: none;
}

.sign-card__arrow {
    width: 1.05rem;
    height: 1.05rem;
    color: var(--accent-ink);
    transform: translateY(0.1rem);
    transition: transform 160ms var(--ease-out);
}

.sign-card:hover .sign-card__arrow {
    transform: translate(0.2rem, 0.1rem);
}

.sign-card__line {
    color: var(--ink-soft);
    text-wrap: pretty;
}

.sign-card__line .fare {
    font-size: var(--font-size-h3);
}

.sign-card__meta {
    color: var(--ink-soft);
    font-size: var(--font-size-ui);
}

.sign-card__led {
    color: var(--carbon);
    font-size: var(--font-size-h3);
}

.sign-card__badge {
    margin-top: auto;
    padding-top: 0.25rem;
}

/* ---------------------------------------------------------------- itinerary: a route strip of coupon legs */
.itin__list {
    position: relative;
    display: grid;
    gap: 0.75rem;
    max-width: 62rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The flight line: turquoise-ink dashes behind the legs, seen between them. */
.itin__list::before {
    content: "";
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    left: calc(1.5rem + 1px);
    border-left: 2px dashed var(--accent-ink);
}

.itin__stop {
    position: relative;
    display: grid;
    grid-template-columns: 3rem 8.5rem minmax(0, 1fr);
    grid-template-areas: "leg time body";
    align-items: stretch;
    min-height: 4rem;
    border: var(--rule-coupon);
    border-radius: var(--radius-coupon);
    background: var(--coupon);
    box-shadow: 0 1px 0 var(--coupon), 0 3px 0 -1px var(--ink);
}

.itin__stop--img {
    grid-template-columns: 3rem 8.5rem minmax(0, 1fr) minmax(0, 12.5rem);
    grid-template-areas: "leg time body img";
}

.itin__leg {
    grid-area: leg;
    display: grid;
    place-items: center;
    border-radius: 3px 0 0 3px;
    background: var(--cell);
    color: var(--on-ink);
    font-family: var(--type-h1-font);
    font-size: var(--font-size-h3);
    font-style: italic;
    font-weight: 800;
}

.itin__time {
    grid-area: time;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: baseline;
    gap: 0 0.4rem;
    padding: 0.95rem 0.75rem 0.75rem 0.875rem;
    border-right: var(--rule-tear);
    color: var(--ink-soft);
    font-size: var(--font-size-caption);
}

.itin__time .led {
    color: var(--carbon);
    font-size: var(--font-size-h4);
    font-weight: 700;
}

.itin__word {
    color: var(--ink);
    font-family: var(--type-label-caps-font);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    line-height: 1.3;
    text-transform: uppercase;
}

.itin__body {
    grid-area: body;
    display: grid;
    align-content: start;
    gap: 0.3rem;
    padding: 0.85rem 1.25rem 0.9rem;
}

.itin__place {
    font-family: var(--type-h3-font);
    font-size: var(--font-size-h4);
    font-weight: 700;
    letter-spacing: var(--tracking-tab);
    line-height: 1.2;
}

.itin__opt {
    margin-left: 0.35rem;
    vertical-align: 0.1em;
}

.itin__text {
    max-width: 62ch;
    color: var(--ink-soft);
    text-wrap: pretty;
}

/* The photo stub, behind its own tear line. */
.itin__img {
    grid-area: img;
    align-self: stretch;
    padding: 6px;
    border: 0;
    border-left: var(--rule-tear);
    border-radius: 0 4px 4px 0;
    background: none;
    box-shadow: none;
}

.itin__img .screen__glass {
    height: 100%;
    min-height: 6.5rem;
    aspect-ratio: auto;
    border-radius: 2px;
}

/* A stop you can skip: a dashed keyline, the leg in outline. */
.itin__stop--optional {
    border-style: dashed;
    box-shadow: none;
}

.itin__stop--optional .itin__leg {
    background: var(--coupon);
    color: var(--ink);
    box-shadow: inset -1.5px 0 0 var(--hair-ink);
}

.itin__foot {
    display: grid;
    gap: var(--space-sm);
    max-width: 62rem;
    padding-top: var(--space-sm);
    border-top: var(--rule);
}

.itin__note {
    max-width: var(--prose-width);
    color: var(--ink-soft);
}

@media (max-width: 47.99em) {
    .itin__list::before {
        left: calc(1.25rem + 1px);
    }

    .itin__stop,
    .itin__stop--img {
        grid-template-columns: 2.5rem minmax(0, 1fr);
        grid-template-areas:
            "leg time"
            "leg body"
            "leg img";
    }

    .itin__time {
        padding: 0.7rem 1rem 0.5rem;
        border-right: 0;
        border-bottom: var(--rule-tear);
    }

    .itin__body {
        padding: 0.6rem 1rem 0.8rem;
    }

    .itin__img {
        width: auto;
        padding: 0 1rem 1rem;
        border-left: 0;
    }

    .itin__img .screen__glass {
        height: auto;
        aspect-ratio: 16 / 9;
    }
}

/* ---------------------------------------------------------------- vehicle */
.car__inner {
    display: grid;
    gap: var(--space-xl);
}

/* The whole car in a 3:2 frame. The stock placeholder has its number plate and door lettering
   blurred in the file itself, so the crop no longer has to hide them. */
.car__screen .screen__glass {
    aspect-ratio: 3 / 2;
}

.car__screen .screen__glass img {
    object-position: 50% 55%;
}

.car__copy {
    display: grid;
    align-content: start;
    gap: var(--space-md);
    min-width: 0;
}

/* The specs read like a coupon's data rows: label caps over carbon figures, two cells a row, so four specs make an
   even 2 x 2 block instead of three and a stray one. An odd last cell takes the whole row. */
.specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: var(--rule-ink);
    border-bottom: var(--rule-ink);
}

.specs__row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
    padding: 0.8rem 1.25rem 0.7rem 0;
}

.specs__row:nth-child(even) {
    padding-left: 1.25rem;
    border-left: var(--rule);
}

.specs__row:nth-child(n + 3) {
    border-top: var(--rule);
}

.specs__row:nth-child(odd):last-child,
.specs__row:nth-child(odd):has(+ .specs__row--luggage),
.specs__row--luggage {
    grid-column: 1 / -1;
}

.specs__row--luggage {
    border-top: var(--rule);
}

.specs__row.specs__row--luggage {
    padding-left: 0;
    border-left: 0;
}

.specs__row dt {
    color: var(--ink);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-caption);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.specs__row dd {
    margin: 0;
}

.specs__led {
    color: var(--carbon);
    font-size: var(--font-size-h3);
    font-weight: 700;
    white-space: normal;
}

.specs__led--small {
    font-size: var(--font-size-h4);
}

/* Phones: one spec per line, label and figure on the same rule. */
@media (max-width: 47.99em) {
    .specs {
        grid-template-columns: minmax(0, 1fr);
    }

    .specs__row,
    .specs__row + .specs__row {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        padding: 0.7rem 0 0.6rem;
        border-left: 0;
    }

    .specs__row + .specs__row {
        border-top: var(--rule);
    }
}

.car__rules {
    display: grid;
    gap: var(--space-md);
    padding: 0;
    list-style: none;
}

.car__rules li {
    max-width: var(--prose-width);
    color: var(--ink);
    font-family: var(--type-body-font);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    text-wrap: pretty;
}

.car__rules b {
    display: block;
    margin-bottom: 0.2rem;
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-h4);
    font-weight: 700;
    letter-spacing: var(--tracking-tab);
    text-transform: uppercase;
}

.fits {
    width: 100%;
}

.fits caption {
    padding-bottom: var(--space-xs);
    font-weight: 700;
    text-align: left;
}

.fits th,
.fits td {
    padding: 0.55rem 0.75rem 0.45rem 0;
    border-bottom: var(--rule);
    text-align: left;
    vertical-align: top;
}

.fits thead th {
    border-bottom: var(--rule-head);
}

.car__body {
    color: var(--ink-soft);
}

.car__gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.car__shot .screen__glass {
    aspect-ratio: 4 / 3;
}

@media (min-width: 48em) {
    .car__gallery {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
        gap: var(--space-md);
    }
}

@media (min-width: 64em) {
    .car__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        gap: var(--space-2xl);
    }

    .car--photo .car__inner {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        align-items: center;
    }

    .car:not(.car--photo) .car__copy {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        column-gap: var(--space-2xl);
    }

    .car:not(.car--photo) .car__head {
        grid-row: 1 / span 3;
    }

    .car__gallery {
        grid-column: 1 / -1;
    }
}

/* ---------------------------------------------------------------- steps: booking stamps
   Each step's number is a rubber stamp in turquoise ink on the page, the next stamp along a dashed tear
   line; the title in tab caps, the timing opens the text. */
.steps__list {
    display: grid;
    gap: var(--space-lg) var(--space-xl);
    margin: 0;
    padding: 0;
    list-style: none;
}

.step {
    position: relative;
    display: grid;
    align-content: start;
    gap: 0.5rem;
    min-width: 0;
}

.step__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3rem;
}

.step__num {
    position: relative;
    z-index: 1;
    display: inline-grid;
    place-items: center;
    flex: none;
    min-width: 3rem;
    height: 3rem;
    padding: 0.2rem 0.45rem 0;
    border: 3px solid var(--accent-ink);
    border-radius: 5px;
    background: var(--ground);
    color: var(--accent-ink);
    transform: rotate(-4deg);
    -webkit-mask-image: var(--ink-grain);
    mask-image: var(--ink-grain);
    -webkit-mask-size: 10rem 5rem;
    mask-size: 10rem 5rem;
}

.step:nth-child(even) .step__num {
    transform: rotate(3deg);
}

.step__num .led {
    font-family: var(--type-h1-font);
    font-size: var(--font-size-h2);
    font-style: italic;
    font-weight: 800;
    letter-spacing: 0;
}

.step__when {
    color: var(--ink);
    font-weight: 700;
}

.step__title {
    font-family: var(--type-h3-font);
    font-size: var(--font-size-h4);
    font-weight: 700;
    letter-spacing: var(--tracking-tab);
    line-height: 1.2;
}

.step__text {
    color: var(--ink-soft);
    text-wrap: pretty;
}

.steps__body {
    color: var(--ink-soft);
}

/* Phones: the stamps down the left, joined by the tear line. */
@media (max-width: 47.99em) {
    .step {
        grid-template-columns: 3rem minmax(0, 1fr);
        column-gap: var(--space-md);
        row-gap: 0.3rem;
    }

    .step__head {
        display: contents;
    }

    .step__num {
        grid-row: 1 / span 3;
        grid-column: 1;
        align-self: start;
    }

    .step__title,
    .step__text {
        grid-column: 2;
    }

    .step__title {
        padding-top: 0.35rem;
    }

    .step::before {
        content: "";
        position: absolute;
        top: 3.4rem;
        bottom: calc(var(--space-lg) * -1 + 0.4rem);
        left: calc(1.5rem - 1px);
        border-left: 1.5px dashed var(--ink);
    }

    .step:last-child::before {
        display: none;
    }
}

/* Desktop: columns; a tear line runs from each stamp to the next, ending in the turquoise-ink arrow. */
@media (min-width: 48em) {
    .steps__list {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    }

    .steps__list--2,
    .steps__list--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .step:not(:last-child)::before {
        content: "";
        position: absolute;
        top: 1.5rem;
        left: 3.75rem;
        right: calc(var(--space-xl) / -2 + 0.5rem);
        border-top: 1.5px dashed var(--ink);
    }

    .step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: calc(1.5rem - 0.5rem);
        right: calc(var(--space-xl) / -2);
        width: 1rem;
        height: 1rem;
        background: var(--accent-ink);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10.4h12.6l-5-5L12.9 3 22 12l-9.1 9-2.3-2.4 5-5H3z'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10.4h12.6l-5-5L12.9 3 22 12l-9.1 9-2.3-2.4 5-5H3z'/%3E%3C/svg%3E") center / contain no-repeat;
    }
}

@media (min-width: 64em) {
    .steps__list--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .steps__list--4,
    .steps__list--7,
    .steps__list--8 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .steps__list--5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .steps__list--6 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .steps__list--6 .step:nth-child(3n)::before,
    .steps__list--6 .step:nth-child(3n)::after,
    .steps__list--7 .step:nth-child(4n)::before,
    .steps__list--7 .step:nth-child(4n)::after,
    .steps__list--8 .step:nth-child(4n)::before,
    .steps__list--8 .step:nth-child(4n)::after {
        display: none;
    }
}

/* Two by two on tablets: the line at the end of a row would point off the page. */
@media (min-width: 48em) and (max-width: 63.99em) {
    .steps__list--3,
    .steps__list--5,
    .steps__list--6 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .steps__list--7,
    .steps__list--8 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .steps__list--4 .step:nth-child(2n)::before,
    .steps__list--4 .step:nth-child(2n)::after,
    .steps__list--7 .step:nth-child(2n)::before,
    .steps__list--7 .step:nth-child(2n)::after,
    .steps__list--8 .step:nth-child(2n)::before,
    .steps__list--8 .step:nth-child(2n)::after,
    .steps__list--5 .step:nth-child(3n)::before,
    .steps__list--5 .step:nth-child(3n)::after,
    .steps__list--6 .step:nth-child(3n)::before,
    .steps__list--6 .step:nth-child(3n)::after {
        display: none;
    }
}

/* ---------------------------------------------------------------- faq: conditions of carriage */
.faq__inner {
    display: grid;
    gap: var(--space-lg);
}

.faq__head {
    align-self: start;
}

.faq__list {
    border-top: var(--rule-ink);
}

.faq__item {
    border-bottom: var(--rule);
    transition: background-color 160ms var(--ease-out);
}

.faq__item[open] {
    background: var(--raised);
}

.faq__q {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    min-height: var(--tap);
    padding: 0.95rem 0.75rem 0.8rem 0.25rem;
    font-family: var(--type-h3-font);
    font-size: var(--font-size-h3);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.15;
    text-transform: uppercase;
    list-style: none;
    cursor: pointer;
}

.faq__q::-webkit-details-marker {
    display: none;
}

.faq__q:hover .faq__text {
    text-decoration: underline;
    text-decoration-color: var(--accent-ink);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

.faq__q:focus-visible {
    outline-offset: -3px;
}

.faq__caret {
    flex: none;
    width: 0.8rem;
    height: 0.8rem;
    margin-top: 0.3rem;
    color: var(--accent-ink);
    transition: transform 160ms var(--ease-out);
}

.faq__item[open] .faq__caret {
    transform: rotate(180deg);
}

.faq__a {
    padding: 0 var(--space-lg) var(--space-lg) 1.85rem;
}

@media (min-width: 64em) {
    .faq__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        gap: var(--space-2xl);
    }

    .faq__head {
        position: sticky;
        top: var(--space-lg);
    }
}

/* ---------------------------------------------------------------- compare */
.compare .sec-head {
    row-gap: var(--space-sm);
}

.compare__table {
    display: none;
}

.cmp {
    width: 100%;
    table-layout: fixed;
}

.cmp__corner {
    width: 24%;
    border-bottom: var(--rule-ink);
}

.cmp thead th {
    padding: 0.75rem 1rem 0.55rem;
    border-bottom: var(--rule-ink);
    color: var(--ink);
    font-size: var(--font-size-h4);
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    vertical-align: bottom;
}

.cmp thead th.cmp__col:not(.is-ours) {
    color: var(--ink-soft);
}

/* Our column is the coupon: white stock between ink rules, its head the ink leg cell. */
.cmp thead th.is-ours {
    border-radius: var(--radius-coupon) var(--radius-coupon) 0 0;
    background: var(--cell);
    color: var(--on-ink);
}

.cmp tbody th {
    padding: 0.85rem 1rem 0.7rem 0;
    border-bottom: var(--rule);
    color: var(--ink);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-h4);
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.15;
    text-transform: uppercase;
    vertical-align: top;
}

.cmp td {
    padding: 0.85rem 1rem 0.7rem;
    border-bottom: var(--rule);
    color: var(--ink-soft);
    line-height: var(--line-height-ui);
    vertical-align: top;
    text-wrap: pretty;
}

.cmp td.is-ours {
    background: var(--coupon);
    color: var(--ink);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--ink), inset -2px 0 0 var(--ink);
}

.cmp tbody tr:last-child td.is-ours {
    box-shadow: inset 2px 0 0 var(--ink), inset -2px 0 0 var(--ink), inset 0 -2px 0 var(--ink);
}

.cmp .fare,
.cmp-card .fare {
    font-size: var(--font-size-body);
}

.cmp__notes th,
.cmp__notes td {
    color: var(--ink-soft);
    font-weight: 500;
}

.cmp-cards {
    display: grid;
    gap: var(--space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
}

.cmp-card {
    padding: 0;
    background: none;
}

.cmp-card__title {
    padding-bottom: 0.5rem;
    border-bottom: var(--rule-ink);
    font-size: var(--font-size-h4);
    font-weight: 700;
    letter-spacing: 0.06em;
}

.cmp-card__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: var(--space-sm);
    padding-block: 0.6rem 0.5rem;
    border-bottom: var(--rule);
    line-height: var(--line-height-ui);
}

.cmp-card__row.is-ours {
    margin-block: 0.35rem;
    margin-inline: calc(var(--space-sm) * -1);
    padding-inline: var(--space-sm);
    border-radius: var(--radius);
    background: var(--coupon);
    box-shadow: inset 0 0 0 1.5px var(--ink);
    font-weight: 600;
}

.cmp-card__row dt {
    color: var(--ink-soft);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-caption);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.cmp-card__row dd {
    margin: 0;
}

.cmp-card__note {
    margin-top: var(--space-sm);
    color: var(--ink-soft);
}

.compare__foot {
    display: grid;
    gap: var(--space-xs);
}

.compare__note {
    max-width: var(--prose-width);
    color: var(--ink-soft);
    text-wrap: pretty;
}

.compare__meta,
.facts__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-lg);
    max-width: var(--prose-width);
    color: var(--ink-soft);
    font-size: var(--font-size-ui);
}

.compare__checked,
.facts__checked {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: var(--tap);
}

.facts__checked b {
    color: var(--ink);
}

@media (min-width: 48em) {
    .compare__table {
        display: block;
        overflow-x: auto;
    }

    .cmp-cards {
        display: none;
    }
}

/* ---------------------------------------------------------------- facts: a ruled fare-box sheet, dated and sourced */
.facts__panel {
    position: relative;
    display: grid;
    gap: var(--space-md);
    padding: var(--space-lg) clamp(1rem, 2.5vw, 1.75rem) 0;
    border: var(--rule-coupon);
    border-radius: var(--radius-coupon);
    background: var(--coupon);
    box-shadow: var(--shadow-sheet);
}

/* A status notice (a trail closure): the void hatch across the top of the sheet. */
.facts--warning .facts__panel {
    padding-top: calc(var(--space-lg) + 10px);
}

.facts--warning .facts__panel::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 10px;
    border-bottom: 1.5px solid var(--void);
    border-radius: 4px 4px 0 0;
    background: repeating-linear-gradient(135deg, var(--void) 0 5px, transparent 5px 11px);
    opacity: 0.85;
}

.facts__body {
    max-width: var(--prose-width);
}

.facts__rows {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    column-gap: var(--space-xl);
    border-top: var(--rule-ink);
}

.facts__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.25rem var(--space-md);
    padding-block: 0.7rem 0.55rem;
    border-bottom: var(--rule);
}

.facts__row dt {
    color: var(--ink-soft);
    font-size: var(--font-size-ui);
    line-height: var(--line-height-ui);
}

.facts__row dd {
    text-align: right;
}

.facts__row--text {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
}

.facts__row--text dd {
    text-align: left;
}

.facts__led {
    color: var(--carbon);
    font-size: var(--font-size-h3);
    font-weight: 700;
    text-transform: none;
}

.facts__led--word {
    text-transform: uppercase;
}

.facts__text {
    color: var(--ink);
    font-weight: 600;
    line-height: var(--line-height-ui);
}

.facts__note {
    display: block;
    margin-top: 0.2rem;
    color: var(--ink-soft);
    font-size: var(--font-size-caption);
}

.facts__scroll {
    overflow-x: auto;
}

.ftable {
    width: 100%;
    min-width: 30rem;
    border-top: var(--rule-ink);
}

.ftable thead th {
    padding: 0.55rem 0.75rem 0.4rem 0;
    border-bottom: var(--rule-tear);
    text-align: left;
    white-space: nowrap;
}

.ftable tbody th,
.ftable td {
    padding: 0.6rem 0.75rem 0.5rem 0;
    border-bottom: var(--rule);
    line-height: var(--line-height-ui);
    vertical-align: middle;
}

.ftable tbody th {
    color: var(--ink);
    font-weight: 700;
    white-space: nowrap;
}

.ftable__num {
    text-align: right;
}

.ftable__led {
    color: var(--carbon);
    font-size: var(--font-size-h4);
    font-weight: 700;
}

.ftable__led--dim {
    color: var(--ink-soft);
    font-weight: 600;
}

/* The km figure carries its unit only where the column head is out of sight (phones). */
.ftable__unit {
    display: none;
}

.ftable--sunrise {
    min-width: 0;
    max-width: 46rem;
}

/* Phones: "This month" goes under the month's name, so the four columns fit without scrolling. */
@media (max-width: 39.99em) {
    .ftable--sunrise thead th {
        white-space: normal;
    }

    .ftable--sunrise tbody tr.is-now th[data-now]::after {
        display: block;
        margin: 0.15rem 0 0;
    }
}

/* Phones: each trail is a small block (codes and km on top, the name, then from and to), so the
   table never scrolls sideways. */
@media (max-width: 39.99em) {
    .facts__scroll:has(.ftable--trails) {
        overflow-x: visible;
    }

    .ftable--trails {
        min-width: 0;
    }

    .ftable--trails thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .ftable--trails tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "code km"
            "name name"
            "route route";
        gap: 0.3rem var(--space-md);
        padding-block: 0.7rem 0.6rem;
        border-top: var(--rule);
    }

    .ftable--trails tbody tr:first-child {
        border-top: 0;
    }

    .ftable--trails tbody th,
    .ftable--trails td {
        padding: 0;
        border: 0;
    }

    .ftable--trails tbody th {
        grid-area: code;
    }

    .ftable--trails .ftable__num {
        grid-area: km;
    }

    .ftable--trails .ftable__name {
        grid-area: name;
        font-weight: 700;
    }

    .ftable--trails .ftable__route {
        grid-area: route;
        color: var(--ink-soft);
    }

    .ftable--trails .ftable__unit {
        display: inline;
        color: var(--ink-soft);
        font-size: var(--font-size-ui);
    }
}

.ftable tr.is-now > * {
    background: var(--hl-tint);
}

.ftable tbody tr.is-now th[data-now]::after {
    content: attr(data-now);
    margin-left: 0.6rem;
    color: var(--accent-ink);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-caption);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

/* The sheet's foot, behind a tear line: the checked date and the sources. */
.facts__panel > .facts__meta {
    position: relative;
    max-width: none;
    margin-inline: calc(clamp(1rem, 2.5vw, 1.75rem) * -1);
    padding: 0.35rem clamp(1rem, 2.5vw, 1.75rem) 0.4rem;
    border-top: var(--rule-tear);
}

.facts__panel > .facts__meta::before,
.facts__panel > .facts__meta::after {
    content: "";
    position: absolute;
    top: calc(var(--notch) / -2 - 1px);
    width: var(--notch);
    height: var(--notch);
    border: var(--rule-coupon);
    border-radius: 50%;
    background: var(--ground);
}

.facts__panel > .facts__meta::before {
    left: calc(var(--notch) / -2 - 2px);
    clip-path: inset(0 0 0 50%);
}

.facts__panel > .facts__meta::after {
    right: calc(var(--notch) / -2 - 2px);
    clip-path: inset(0 50% 0 0);
}

.facts__panel > :last-child:not(.facts__meta) {
    margin-bottom: var(--space-lg);
}

.facts__checked {
    font-family: var(--font-mono);
    font-size: var(--font-size-caption);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.facts__checked b {
    color: var(--carbon);
    font-weight: 700;
}

/* ---------------------------------------------------------------- rules: a ruled sheet on coupon stock, dated at the foot */
.rules__sheet {
    position: relative;
    border: var(--rule-coupon);
    border-radius: var(--radius-coupon);
    background: var(--coupon);
    box-shadow: var(--shadow-sheet);
}

.rules__list {
    display: grid;
    column-gap: var(--space-2xl);
    padding-inline: clamp(1rem, 2.5vw, 1.75rem);
}

.rule {
    padding-block: 0.95rem 0.85rem;
    border-top: var(--rule);
    scroll-margin-top: var(--space-lg);
}

.rule:first-child {
    border-top: 0;
}

.rule__label {
    color: var(--ink);
    font-family: var(--type-h4-font);
    font-size: var(--font-size-h4);
    font-weight: 700;
    letter-spacing: var(--tracking-tab);
    line-height: 1.2;
    text-transform: uppercase;
}

.rule__text {
    margin-top: 0.3rem;
    color: var(--ink-soft);
}

.rule__text p {
    max-width: var(--prose-width);
    text-wrap: pretty;
}

.rule__text p + p {
    margin-top: 0.5rem;
}

.rule:target {
    background: var(--hl-tint);
    box-shadow: -0.75rem 0 0 var(--hl-tint), 0.75rem 0 0 var(--hl-tint);
}

/* The foot: the date the terms were last reviewed, behind a tear line. */
.rules__checked {
    position: relative;
    padding: 0.5rem clamp(1rem, 2.5vw, 1.75rem) 0.45rem;
    border-top: var(--rule-tear);
    color: var(--ink-soft);
    font-family: var(--font-mono);
    font-size: var(--font-size-caption);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.rules__checked::before,
.rules__checked::after {
    content: "";
    position: absolute;
    top: calc(var(--notch) / -2 - 1px);
    width: var(--notch);
    height: var(--notch);
    border: var(--rule-coupon);
    border-radius: 50%;
    background: var(--ground);
}

.rules__checked::before {
    left: calc(var(--notch) / -2 - 2px);
    clip-path: inset(0 0 0 50%);
}

.rules__checked::after {
    right: calc(var(--notch) / -2 - 2px);
    clip-path: inset(0 50% 0 0);
}

.rules__body {
    max-width: var(--prose-width);
    color: var(--ink-soft);
}

@media (min-width: 48em) {
    .rules--short .rules__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rules--short .rule:nth-child(2) {
        border-top: 0;
    }

    .rules--full .rule {
        display: grid;
        grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
        gap: var(--space-xl);
    }

    .rules--full .rule__text {
        margin-top: 0;
    }
}

/* ---------------------------------------------------------------- driver */
.driver__inner {
    display: grid;
    gap: var(--space-xl);
}

.driver__photo {
    max-width: 22rem;
}

.driver__photo .screen__glass {
    aspect-ratio: 4 / 5;
}

.driver__copy {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: var(--space-md);
}

.driver__title::before {
    content: none;
}

.driver__line {
    max-width: 40ch;
    font-size: var(--font-size-subtitle);
    font-weight: 500;
    line-height: 1.42;
}

.driver__bio {
    color: var(--ink-soft);
}

/* On wide screens the words sit on the left and the photo on the right: the driver block always comes with the
   car block (photo left, words right), so the two alternate. Phones keep the photo on top, as the car block does. */
@media (min-width: 48em) {
    .driver__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
        gap: var(--space-2xl);
        align-items: center;
    }

    .driver__photo {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .driver__copy {
        grid-column: 1;
        grid-row: 1;
    }
}

/* A driver block without its photo (the page's hero already shows the driver): the heading and
   line on the left, the words on the right, across the page like the other sections. */
.driver--nophoto .driver__head {
    display: grid;
    align-content: start;
    gap: var(--space-sm);
}

.driver--nophoto .driver__bio {
    max-width: 44rem;
    color: var(--ink);
}

@media (min-width: 48em) {
    .driver--nophoto .driver__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
        gap: var(--space-2xl);
        align-items: start;
    }
}

/* ---------------------------------------------------------------- reviews */
.reviews__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    gap: var(--space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A review is a coupon: the words on white stock, the name and source on its foot. */
.review {
    display: grid;
    align-content: space-between;
    gap: var(--space-md);
    padding: var(--space-lg);
    border: var(--rule-coupon);
    border-radius: var(--radius-coupon);
    background: var(--coupon);
    box-shadow: var(--shadow-sheet);
}

.review__quote {
    margin: 0;
    font-size: var(--font-size-subtitle);
    line-height: 1.45;
}

.review__cite {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    color: var(--ink-soft);
    font-size: var(--font-size-ui);
}

.review__cite b {
    color: var(--ink);
    font-family: var(--type-label-caps-font);
    letter-spacing: var(--tracking-tab);
    text-transform: uppercase;
}

.review__foot {
    display: grid;
    gap: 0.1rem;
    padding-top: var(--space-sm);
    border-top: var(--rule-tear);
}

/* Long chips (a price line, a trail name) wrap on phones instead of pushing the page sideways. */
.chip {
    max-width: 100%;
}

@media (max-width: 40em) {
    .sec-head__chip,
    .hero__chip {
        white-space: normal;
        line-height: 1.25;
    }
}

/* Before launch: a booking term the owner has not confirmed carries a dashed "proposed" mark,
   drawn like a blank on the form. */
.proposed {
    text-decoration: none;
}

.proposed::after {
    content: "proposed";
    display: inline-block;
    margin-left: 0.4em;
    padding: 0.16em 0.42em 0.04em;
    border: 1.5px dashed var(--ink);
    border-radius: 2px;
    color: var(--ink);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-caption);
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-transform: uppercase;
    vertical-align: 0.1em;
}

.foot .proposed::after,
.clock .proposed::after {
    border-color: rgba(255, 255, 255, 0.7);
    color: var(--coupon);
}

.carbon .proposed::after,
.pass .proposed::after {
    border-color: var(--carbon);
    color: var(--carbon);
}

/* ---------------------------------------------------------------- availability: free days from the booking calendar
   A coupon sheet: the months as a grid of day cells. Free days are clean paper, partly booked days
   carry a light sea half, fully booked days are hatched and struck through; past days fade. */
.avail {
    padding-block: var(--space-2xl);
    border-top: var(--rule-ink);
}

/* The calendar runs to the content's right edge, like every other block. */
.avail__sheet {
    margin-top: var(--space-lg);
    padding: var(--space-md) var(--space-lg) var(--space-lg);
    border: var(--rule-coupon);
    border-radius: var(--radius-coupon);
    background: var(--coupon);
    box-shadow: var(--shadow-sheet);
}

.avail__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: var(--rule-tear);
}

.avail__nav {
    display: grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--ink);
    box-shadow: inset 0 0 0 1.5px var(--hair-strong);
    cursor: pointer;
}

.avail__nav:hover:not(:disabled) {
    background: var(--paper-tint);
}

.avail__nav:disabled {
    opacity: 0.3;
    cursor: default;
}

.avail__range {
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-ui);
    font-weight: 800;
    letter-spacing: var(--tracking-caps);
    text-align: center;
    text-transform: uppercase;
}

.avail__months {
    display: grid;
    gap: var(--space-xl);
    padding-top: var(--space-md);
}

@media (min-width: 48em) {
    .avail__months {
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    }
}

.avail__title {
    margin-bottom: var(--space-xs);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-caption);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

.avail__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.avail__head {
    padding-bottom: 0.25rem;
    color: var(--ink-soft);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-caption);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
}

.avail__day {
    position: relative;
    display: grid;
    place-items: center;
    min-height: var(--tap);
    border: 0;
    border-radius: 3px;
    background: var(--coupon);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: var(--font-size-ui);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--hair-ink);
    cursor: pointer;
}

.avail__day--blank {
    box-shadow: none;
    cursor: default;
}

.avail__day--free:hover,
.avail__day--part:hover {
    box-shadow: inset 0 0 0 2px var(--ink);
}

.avail__day--part {
    background: linear-gradient(135deg, var(--coupon) 62%, var(--tab) 62%);
}

.avail__day--full {
    background: repeating-linear-gradient(135deg, var(--paper-tint-deep) 0 3px, var(--coupon) 3px 7px);
    color: var(--ink-faint);
    text-decoration: line-through;
    cursor: not-allowed;
}

.avail__day--past {
    background: transparent;
    color: var(--ink-faint);
    box-shadow: none;
    opacity: 0.55;
    cursor: default;
}

.avail__day.is-today {
    box-shadow: inset 0 0 0 2px var(--accent-ink);
}

.avail__day.is-chosen {
    background: var(--cell);
    color: var(--on-ink);
    box-shadow: none;
}

.avail__day:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

/* Sheet mode (the internal service-sheet page): busy and past days open their sheet too, and a dot marks a day
   whose sheet has services. */
[data-mode="sheet"] .avail__day--full,
[data-mode="sheet"] .avail__day--past {
    cursor: pointer;
}

[data-mode="sheet"] .avail__day--past:hover,
[data-mode="sheet"] .avail__day--full:hover {
    box-shadow: inset 0 0 0 2px var(--ink);
    opacity: 1;
}

.avail__day.has-sheet::after,
.avail__key--sheet::after {
    content: "";
    position: absolute;
    bottom: 0.3rem;
    left: 50%;
    width: 0.4rem;
    height: 0.4rem;
    margin-left: -0.2rem;
    border-radius: 50%;
    background: var(--carbon);
}

.avail__day.is-chosen.has-sheet::after {
    background: var(--on-ink);
}

.avail__key--sheet {
    position: relative;
    background: var(--coupon);
}

.avail__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-lg);
    margin-top: var(--space-md);
    padding: var(--space-sm) 0 0;
    list-style: none;
    border-top: var(--rule);
    color: var(--ink-soft);
    font-size: var(--font-size-ui);
}

.avail__legend > * {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.avail__key {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px var(--hair-strong);
}

.avail__key--free {
    background: var(--coupon);
}

.avail__key--part {
    background: linear-gradient(135deg, var(--coupon) 62%, var(--tab) 62%);
}

.avail__key--full {
    background: repeating-linear-gradient(135deg, var(--paper-tint-deep) 0 3px, var(--coupon) 3px 6px);
}

.avail__detail {
    margin-top: var(--space-sm);
    color: var(--ink);
    font-size: var(--font-size-body);
}

.avail__noscript {
    margin-top: var(--space-md);
    font-size: var(--font-size-body);
}

/* ---------------------------------------------------------------- island-today: Madeira today (sun, air, wind, sea, tide)
   One coupon sheet cut into cells by tear lines, like the fare board: a label in tab caps, a board
   figure, a quiet line, and label/value rows. The tide cell carries today's curve with a now line. */
.now {
    padding-block: var(--space-2xl);
    border-top: var(--rule-ink);
}

.now__sheet {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-top: var(--space-lg);
    border: var(--rule-coupon);
    border-radius: var(--radius-coupon);
    background: var(--coupon);
    box-shadow: var(--shadow-sheet);
    overflow: hidden;
}

.now__cell {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    padding: var(--space-md) var(--space-lg) var(--space-lg);
    border-right: var(--rule-tear);
    border-bottom: var(--rule-tear);
    margin-right: -1.5px;
    margin-bottom: -1.5px;
}

.now__label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-caption);
    font-weight: 800;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

.now__date {
    color: var(--ink-soft);
    font-weight: 600;
}

.now__big {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    color: var(--accent-ink);
    font-family: var(--font-mono);
    font-size: var(--font-size-h2);
    font-weight: 600;
    line-height: 1.05;
}

.now__unit {
    color: var(--ink-soft);
    font-size: var(--font-size-body);
}

.now__arrow {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    align-self: center;
    fill: var(--accent-ink);
    transition: transform 400ms var(--ease-out);
}

.now__line {
    color: var(--ink-soft);
    font-size: var(--font-size-body);
}

.now__where {
    color: var(--ink-soft);
}

.now__rows {
    display: grid;
    margin-top: auto;
    padding-top: var(--space-xs);
}

.now__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    padding-block: 0.4rem;
    border-top: var(--rule);
    color: var(--ink-soft);
    font-size: var(--font-size-ui);
}

.now__row dd {
    color: var(--ink);
    font-family: var(--font-mono);
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

.now__curve {
    width: 100%;
    height: 4rem;
    margin-top: var(--space-xs);
}

.now__wave {
    fill: var(--tab);
    opacity: 0.35;
}

.now__wave-line {
    fill: none;
    stroke: var(--accent-ink);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.now__nowline {
    stroke: var(--ink);
    stroke-width: 1.5;
    stroke-dasharray: 3 3;
    vector-effect: non-scaling-stroke;
}

@media (min-width: 40em) {
    .now__sheet {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64em) {
    .now__sheet {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.now__foot {
    grid-column: 1 / -1;
    padding: var(--space-sm) var(--space-lg);
    color: var(--ink-soft);
    font-size: var(--font-size-caption);
    line-height: 1.5;
}

.now__foot a {
    color: inherit;
}

@media (prefers-reduced-motion: reduce) {
    .now__arrow {
        transition: none;
    }
}

/* ---------------------------------------------------------------- the road: the car tows the slogan
   An asphalt strip under the first screen with a dashed centre line. One stop per block below; the
   car drives from stop to stop with the scroll. From its place in the page the strip holds to the
   top of the window, under the header when the header shows (site.js initRoad). */
.road {
    --road-h: 4rem;
    height: var(--road-h);
}

main.has-lead > .road,
main.is-guide > .road {
    grid-column: 1 / -1;
}

main.is-guide > .road {
    grid-row: 2;
}

.road__bar {
    position: relative;
    z-index: var(--z-sticky);
    height: var(--road-h);
    background:
        linear-gradient(90deg, var(--ivory-faint) 0 55%, transparent 55%) 0 50% / 1.5rem 2px repeat-x,
        var(--strip);
    border-block: 2px solid var(--forest-line);
    transition: top 250ms var(--ease-out);
}

.road.is-fixed .road__bar {
    position: fixed;
    top: var(--road-top, 0);
    right: 0;
    left: 0;
    box-shadow: var(--shadow-panel);
}

.road__track {
    position: relative;
    height: 100%;
    margin-inline: var(--edge);
}

.road__stops {
    position: absolute;
    inset: 0;
}

.road__stop {
    position: absolute;
    top: 50%;
    width: 0.8rem;
    height: 0.8rem;
    margin: -0.4rem 0 0 -0.4rem;
    padding: 0;
    border: 2px solid var(--ivory);
    border-radius: 50%;
    background: var(--strip);
    cursor: pointer;
}

.road__stop::after {
    content: "";
    position: absolute;
    inset: -0.6rem;
}

.road__stop.is-passed {
    border-color: var(--sea-light);
    background: var(--sea-light);
}

.road__stop:focus-visible {
    outline: 3px solid var(--sea-light);
    outline-offset: 3px;
}

.road__car {
    position: absolute;
    bottom: 0.3rem;
    left: 0;
    display: flex;
    align-items: flex-end;
    pointer-events: none;
    will-change: transform;
}

.road__banner {
    margin-bottom: 0.5rem;
    padding: 0.3rem 0.9rem 0.2rem;
    border-radius: 2px;
    background: var(--ivory);
    color: var(--forest);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-body);
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 2px 0 var(--forest-line);
}

.road__rope {
    width: 1rem;
    height: 2px;
    margin-bottom: 0.75rem;
    background: var(--ivory);
}

/* Our little man in the open roadster: ivory monoline like logo-night. The strip colour fills the body so the dashed
   centre line never runs through it; the head is solid ivory, with the eye and the smile drawn in the strip colour. */
.road__van {
    width: 5.5rem;
    height: auto;
}

.road__van-line {
    fill: none;
    stroke: var(--ivory);
}

.road__van-knock {
    fill: var(--strip);
}

.road__van-head {
    fill: var(--ivory);
    stroke: none;
}

.road__van-face {
    fill: var(--strip);
    stroke: none;
}

.road__van-hub {
    fill: var(--ivory);
}

@media (max-width: 47.99em) {
    .road {
        --road-h: 3.25rem;
    }

    /* Two short lines on a phone, "We drive." over "You enjoy!", so the stops keep the road. */
    .road__banner {
        width: 5.4rem;
        margin-bottom: 0.3rem;
        padding: 0.2rem 0.4rem 0.15rem;
        font-size: var(--font-size-caption);
        letter-spacing: 0.04em;
        line-height: 1.1;
        text-align: center;
        white-space: normal;
    }

    .road__rope {
        width: 0.6rem;
        margin-bottom: 0.5rem;
    }

    .road__van {
        width: 3.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .top,
    .road__bar {
        transition: none;
    }
}

/* ---------------------------------------------------------------- route sheet (internal page)
   The driver's daily service document, drawn as the booking pass: carbon paper, a coupon head, dashed tear lines,
   caps labels and LED figures, and a stub with the barcode and the signature. Tools on screen; on paper only the
   document (A4 landscape), with its colours kept. */
.sheet {
    padding-block: var(--space-2xl);
}

.sheet__inner {
    display: grid;
    gap: var(--space-xl);
}

.sheet__tools {
    display: grid;
    gap: var(--space-md);
}

.sheet__controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--space-sm);
}

.sheet__paste summary {
    cursor: pointer;
    font-weight: 600;
}

.sheet__paste-box {
    width: 100%;
    margin-block: var(--space-xs);
    font-family: var(--font-mono);
    font-size: var(--font-size-ui);
}

.sheet__hint {
    color: var(--ink-soft);
    font-size: var(--font-size-body);
}

.sheet__actions {
    flex-wrap: wrap;
}

.sheet__add {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-sm);
}

.sheet__add .field {
    flex: 1 1 22rem;
}

/* On screen the document keeps the proportions of the PDF page (A4 landscape) and grows with its rows. */
.sheet__doc.pass {
    width: 100%;
    aspect-ratio: 297 / 210;
    align-content: start;
}

.sheet__doc.pass {
    animation: none;
}

.sheet__title {
    display: grid;
    gap: 0.15rem;
}

/* The English line under each Portuguese label. */
.sheet__en {
    display: block;
    color: var(--ink-soft);
    font-family: var(--type-body-font);
    font-size: var(--font-size-caption);
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
}

.pass__head .sheet__en {
    color: var(--ink-soft);
}

.sheet__facts {
    border-bottom: 1.5px dashed var(--carbon-rule);
}

.pass__grid .sheet__fact {
    font-family: var(--type-body-font);
    font-size: var(--font-size-subtitle);
    font-weight: 600;
}

.sheet__services {
    min-width: 0;
    padding: var(--space-md) var(--space-lg) var(--space-lg);
    overflow-x: auto;
}

.sheet__table {
    width: 100%;
    min-width: 52rem;
    border-collapse: collapse;
}

.sheet__table th {
    padding: 0 0.4rem 0.5rem;
    letter-spacing: 0.08em;
    text-align: left;
    vertical-align: bottom;
}

.sheet__table td {
    padding: 0.2rem;
    border-top: 1.5px dashed var(--carbon-rule);
    vertical-align: middle;
}

.sheet__c-time {
    width: 9%;
}

.sheet__c-activity {
    width: 22%;
}

.sheet__c-place {
    width: 12%;
}

.sheet__c-pax {
    width: 7%;
}

.sheet__c-lead {
    width: 14%;
}

.sheet__c-travel {
    width: 9%;
}

.sheet__c-ref {
    width: 11%;
}

.sheet__c-x {
    width: 4%;
}

.sheet__cell,
.sheet__print {
    color: var(--carbon);
    font-family: var(--font-mono);
    font-size: var(--font-size-ui);
    font-weight: 700;
}

.sheet__cell {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0.45rem 0.2rem;
    line-height: var(--line-height-ui);
    resize: none;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
}

.sheet__cell--time,
.sheet__print--time,
.sheet__cell--pax,
.sheet__print--pax {
    font-size: var(--font-size-h4);
}

.sheet__cell--ref,
.sheet__print--ref,
.sheet__cell--travel,
.sheet__print--travel {
    font-size: var(--font-size-caption);
    white-space: nowrap;
}

.sheet__cell--ref {
    padding-inline: 0;
}

.sheet__cell--activity,
.sheet__print--activity {
    color: var(--ink);
    font-family: var(--type-body-font);
    font-size: var(--font-size-body);
}

.sheet__cell:hover,
.sheet__cell:focus {
    border-color: var(--carbon-rule);
    background: var(--coupon);
}

.sheet__print {
    display: none;
}

.sheet__remove {
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--carbon);
    font-size: var(--font-size-h4);
    cursor: pointer;
}

.sheet__empty {
    padding: var(--space-md) 0 0;
    border-top: 1.5px dashed var(--carbon-rule);
    color: var(--carbon);
    font-family: var(--font-mono);
    font-size: var(--font-size-ui);
}

.sheet__note {
    color: var(--ink-soft);
    font-size: var(--font-size-caption);
    line-height: var(--line-height-ui);
}

/* A box to sign in, with the label on its top line. */
.sheet__sign {
    min-height: 6rem;
    padding: 0.5rem 0.75rem;
    border: 1.5px dashed var(--carbon-rule);
    border-radius: 4px;
}

@media (min-width: 60em) {
    .sheet__doc.pass {
        grid-template-rows: auto auto 1fr;
    }

    .sheet__doc .sheet__table {
        min-width: 0;
    }

    .sheet__doc .sheet__services {
        padding-inline: var(--space-md);
    }

    .sheet__doc .sheet__facts,
    .sheet__doc .sheet__services {
        grid-column: 1;
    }

    .sheet__doc .sheet__stub {
        grid-row: 2 / span 2;
    }
}

@page {
    size: A4 landscape;
    margin: 10mm;
}

@media print {
    .top,
    .road,
    .foot,
    .skip-link,
    .sheet__tools,
    .sheet__x,
    .mobile-bar,
    main > :not(.sheet) {
        display: none !important;
    }

    html,
    body {
        background: var(--paper);
    }

    .sheet {
        padding: 0;
    }

    .sheet__inner {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    /* Keep the pass's paper colours and draw its edge as a border: printers drop box shadows. */
    .sheet__doc.pass {
        grid-template-columns: minmax(0, 1fr) 15rem;
        border: 1.5px solid var(--carbon-rule);
        box-shadow: none;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        break-inside: avoid;
    }

    .sheet__doc .pass__head {
        grid-column: 1 / -1;
    }

    .sheet__doc .sheet__facts,
    .sheet__doc .sheet__services {
        grid-column: 1;
    }

    .sheet__doc .sheet__stub {
        grid-column: 2;
        grid-row: 2 / span 2;
        border-top: 0;
        border-left: var(--rule-tear);
    }

    .sheet__doc .sheet__stub::before,
    .sheet__doc .sheet__stub::after {
        top: auto;
        right: auto;
        left: -0.85rem;
        background: var(--paper);
    }

    .sheet__doc .sheet__stub::before {
        top: -0.8rem;
    }

    .sheet__doc .sheet__stub::after {
        bottom: -0.8rem;
    }

    .sheet__services {
        overflow: visible;
    }

    .sheet__table {
        min-width: 0;
    }

    .sheet__cell {
        display: none;
    }

    .sheet__print {
        display: block;
        padding: 0.35rem 0.2rem;
        line-height: var(--line-height-ui);
    }

    .sheet__empty:not([hidden]) {
        display: none;
    }
}
/* ==========================================================================
   30 pages: page-type overrides.
   ========================================================================== */

/* ---------------------------------------------------------------- guide articles (Read mode)
   main.is-guide (base.html, guides/<slug>/): on wide screens the article keeps the left column
   and the guide rail (layouts/partials/guide-rail.html) stands to the right as a sticky column:
   the one bookable page with its price, "On this page", and the checked date. The hero runs
   across both. Below 80em the rail is not shown; the in-flow ticket and the cta carry the link. */
.guide-rail {
    display: none;
}

@media (min-width: 80em) {
    /* The article column stops at a reading width; the rail takes what is left and stands close to it. */
    /* The article column is the page edge plus 60rem (or less when the rail needs the room), and the
       rail takes the rest. It used to be a flat 62rem from the screen's left side: on a wide screen
       --edge grows (it centres the content), so the text inside shrank to a sliver. */
    main.is-guide {
        --rail: 20rem;
        display: grid;
        grid-template-columns: min(calc(var(--edge) + 60rem), calc(100% - var(--rail) - var(--edge) - var(--space-xl))) minmax(0, 1fr);
    }

    main.is-guide > * {
        grid-column: 1;
        min-width: 0;
    }

    main.is-guide > .hero {
        grid-column: 1 / -1;
    }

    main.is-guide > :not(.hero) .wrap {
        padding-right: var(--space-2xl);
    }

    /* The closing ticket stands in the article column too: its right side meets the rail, not the
       screen edge, so it takes the same fixed space as the text instead of --edge. */
    main.is-guide > .cta .cta__inner {
        margin-right: var(--space-2xl);
    }

    main.is-guide > .guide-rail {
        display: block;
        grid-column: 2;
        grid-row: 3 / span 200;
        padding: var(--space-2xl) var(--edge) var(--space-2xl) var(--space-xl);
        border-top: var(--rule);
        border-left: var(--rule);
    }

    main.is-guide > .guide-rail--top {
        grid-row: 1 / span 200;
    }
}

.guide-rail__inner {
    position: sticky;
    top: var(--space-lg);
    display: grid;
    gap: var(--space-xl);
    max-width: var(--rail, 20rem);
}

/* The rail's heads: tab caps in ink over an ink rule. */
.guide-rail__head {
    padding-bottom: 0.45rem;
    border-bottom: var(--rule-ink);
    color: var(--ink);
    font-family: var(--type-label-caps-font);
    font-size: var(--font-size-caption);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

/* The bookable page as a ticket stub: its kind in the ink head, the fare in carbon numerals, the
   gate behind a tear line. */
.guide-rail__card {
    position: relative;
    display: grid;
    gap: 0.7rem;
    min-width: 0;
    padding: 0 var(--space-md) var(--space-md);
    border: var(--rule-coupon);
    border-radius: var(--radius-coupon);
    background: var(--coupon);
    box-shadow: var(--shadow-sheet);
}

.guide-rail__card > .guide-rail__head {
    margin-inline: calc(var(--space-md) * -1);
    padding: 0.7rem var(--space-md) 0.55rem;
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
    background: var(--cell);
    color: var(--on-ink);
}

.guide-rail__card > :first-child:not(.guide-rail__head) {
    margin-top: var(--space-md);
}

.guide-rail__title {
    font-family: var(--type-h3-font);
    font-size: var(--font-size-h4);
    font-weight: 700;
    letter-spacing: var(--tracking-tab);
    line-height: 1.15;
    text-transform: uppercase;
}

.guide-rail__title a {
    color: var(--ink);
    text-decoration: none;
}

.guide-rail__title a:hover {
    text-decoration: underline;
    text-decoration-color: var(--accent-ink);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

.guide-rail__line {
    color: var(--ink-soft);
    font-size: var(--font-size-ui);
    text-wrap: pretty;
}

.guide-rail__fare {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.6rem;
    padding-top: 0.6rem;
    border-top: var(--rule);
}

.guide-rail__led {
    color: var(--carbon);
    font-size: var(--font-size-h2);
    font-weight: 700;
}

.guide-rail__band {
    color: var(--ink-soft);
    font-size: var(--font-size-ui);
}

.guide-rail__large {
    flex-basis: 100%;
    color: var(--carbon);
    font-family: var(--font-mono);
    font-size: var(--font-size-caption);
    font-weight: 600;
}

/* The stub: the gate behind the tear line, punched at both edges. */
.guide-rail__go {
    position: relative;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    margin-top: 0.6rem;
    padding-block: 0.55rem 0.45rem;
    text-align: left;
    white-space: normal;
}

.guide-rail__go::before {
    content: "";
    position: absolute;
    top: -0.65rem;
    right: calc(var(--space-md) * -1);
    left: calc(var(--space-md) * -1);
    border-top: var(--rule-tear);
}

.guide-rail__toc {
    display: grid;
    gap: 0.25rem;
}

.guide-rail__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.guide-rail__list a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0.45rem 0 0.35rem 1.1rem;
    border-bottom: var(--rule);
    color: var(--ink-soft);
    font-size: var(--font-size-ui);
    font-weight: 600;
    line-height: var(--line-height-ui);
    text-decoration: none;
}

.guide-rail__list a:hover {
    color: var(--ink);
}

/* The section in view (site.js): a turquoise-ink square, like a stop on the route map. */
.guide-rail__list a[aria-current]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: -0.3rem;
    border-radius: 1px;
    background: var(--accent-ink);
}

.guide-rail__list a[aria-current] {
    color: var(--ink);
}

.guide-rail__checked {
    color: var(--ink-soft);
    font-family: var(--font-mono);
    font-size: var(--font-size-caption);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.guide-rail__checked time {
    color: var(--carbon);
    font-weight: 700;
}
/* ==========================================================================
   40 rtl: required by the layered build (all five layer files must exist,
   or styles.css silently stops rebuilding). No RTL language is planned.
   ========================================================================== */