/* ============================================================
FIND THE FEW · GERMANY 2026
"ROADBOOK" — vintage motorsport rally route-book system
Aged paper · racing green ink · single vermillion rally accent
============================================================ */
/* Fonts load via + in each page's (faster than @import, less flash-of-unstyled-text). */
:root {
/* paper + ink */
--paper: #E9E1CE;
--paper-2: #E2D9C2;
--paper-3: #D9CEB3;
--paper-hi: #F2ECDD;
--ink: #16221B;
--ink-soft: #36473C;
--muted: #525950; /* was #6C7567 — 3.41:1 on --paper-2, failed AA in light.
Now 5.14:1 on the binding bg. Dark's --muted already passed. */
/* racing greens */
--green: #1E3A2C;
--green-2: #2F5D45;
--green-3: #4A7A5E;
/* rally accent + secondary */
--vermillion: #C8462C;
--vermillion-2:#A8341D;
--signal: #ffd166;
--brass: #9C7327;
--brass-hi: #C79A3E;
/* hairlines */
--line: rgba(22,34,27,0.18);
--line-2: rgba(22,34,27,0.32);
--line-3: rgba(22,34,27,0.55);
--accent: var(--vermillion);
/* Small-text accents. The brand accents above (--vermillion, --brass,
--green-2) are tuned for DISPLAY type, where WCAG only asks 3:1 — they
pass there and are left alone. On small mono labels, links and meta the
bar is 4.5:1 and they fail (vermillion measures 3.22:1 on a dark card).
These are the same hues re-solved for >=5:1, per theme. Use them for any
text below ~18px. */
--sm-urgent: #983521; /* red · URGENT */
--sm-high: #6E511C; /* amber · HIGH */
--sm-done: #2D5A43; /* green · booked */
--sm-meta: #565D52; /* mono meta */
--sm-tick: #C79A3E; /* brass on ticker bg */
/* type */
--f-display: 'Archivo', system-ui, -apple-system, sans-serif;
--f-text: 'Archivo', system-ui, -apple-system, sans-serif;
--f-mono: 'JetBrains Mono', ui-monospace, monospace;
--f-serif: 'Spectral', Georgia, serif;
--maxw: 1320px;
}
[data-theme="dark"] {
--paper: #15201A;
--paper-2: #1B271F;
--paper-3: #223029;
--paper-hi: #0F1813;
--ink: #E7E0CE;
--ink-soft: #C2BCAB;
--muted: #8A9384;
--line: rgba(231,224,206,0.16);
--line-2: rgba(231,224,206,0.28);
--line-3: rgba(231,224,206,0.5);
/* Dark never overrode the accents, so light-theme reds/ambers/greens were
being painted on dark olive — that is the whole contrast bug. Re-solved
against --paper-2 (#1B271F), the binding background. */
--sm-urgent: #DD7A66;
--sm-high: #BF8D30;
--sm-done: #55A87D;
--sm-meta: #899284;
--sm-tick: #715621; /* ticker bg flips to cream in dark -> brass must darken */
}
/* ---------------- reset ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--f-text);
font-size: 16px;
line-height: 1.55;
color: var(--ink);
background-color: var(--paper);
background-image:
url("data:image/svg+xml;utf8,");
background-blend-mode: multiply;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-feature-settings: "ss01";
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--vermillion); color: var(--paper-hi); }
.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--f-mono); }
/* ---------------- utility type ---------------- */
.label {
font-family: var(--f-mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--muted);
}
.label-ink { color: var(--ink); }
.label-acc { color: var(--sm-urgent); }
.serif-note {
font-family: var(--f-serif);
font-style: italic;
font-weight: 400;
color: var(--ink-soft);
}
/* ---------------- shell ---------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; }
@media (max-width: 720px) { .wrap { padding: 0 22px; } }
/* top registration bar */
.regbar {
height: 26px;
background: var(--ink);
color: var(--paper);
display: flex;
align-items: center;
overflow: hidden;
border-bottom: 2px solid var(--vermillion);
}
/* The words used to hard-cut mid-glyph at both edges. A fade mask lets them
leave the frame instead of being guillotined. */
.regbar {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
.regbar .track {
display: flex;
white-space: nowrap;
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--paper-3);
animation: marquee 72s linear infinite; /* was 38s — halved the motion noise */
}
/* Two identical groups. translateX(-50%) now lands exactly one group along, so
the loop is seamless. The old rule put gap+padding-left on .track itself,
which made -50% overshoot by half a gap (~14px) and visibly jump each cycle. */
.regbar .grp { display: flex; gap: 28px; padding-right: 28px; flex: none; }
.regbar .track b { color: var(--sm-tick); font-weight: 500; }
.regbar .track .x { color: var(--vermillion); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .regbar .track { animation: none; } }
/* ---------------- nav ---------------- */
.nav {
position: sticky; top: 0; z-index: 50;
background: color-mix(in srgb, var(--paper) 88%, transparent);
backdrop-filter: blur(8px) saturate(1.2);
-webkit-backdrop-filter: blur(8px) saturate(1.2);
border-bottom: 1px solid var(--line-2);
}
.nav-inner {
max-width: var(--maxw); margin: 0 auto;
padding: 0 40px;
height: 64px;
display: flex; align-items: center; gap: 28px;
}
.brand {
display: flex; align-items: center; gap: 11px;
font-family: var(--f-display);
font-weight: 800;
font-size: 15px;
letter-spacing: -0.01em;
text-transform: uppercase;
}
.brand .mark {
width: 26px; height: 26px;
border: 2px solid var(--ink);
border-radius: 50%;
display: grid; place-items: center;
position: relative;
}
.brand .mark::after {
content: ""; width: 8px; height: 8px;
background: var(--vermillion);
border-radius: 50%;
}
.nav-links { display: flex; gap: 2px; flex: 1; flex-wrap: wrap; }
.nav-links a {
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-soft);
padding: 8px 9px;
border-radius: 3px;
white-space: nowrap;
transition: color .15s, background .15s;
}
.nav-links a:hover { color: var(--ink); background: var(--paper-3); }
.nav-links a.active { color: var(--vermillion); }
.nav-links a.active::after {
content: ""; display: block; height: 2px; margin-top: 6px;
background: var(--vermillion);
}
.nav-date {
font-family: var(--f-mono);
font-size: 11px; letter-spacing: 0.16em;
color: var(--muted); white-space: nowrap;
}
@media (max-width: 1080px) { .nav-date { display: none; } }
@media (max-width: 860px) {
.nav-inner { height: auto; flex-wrap: wrap; padding: 12px 22px; gap: 14px; }
.nav-links { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
}
/* ---------------- page masthead ---------------- */
.masthead {
padding: 64px 0 0;
position: relative;
}
.masthead .top-meta {
display: flex; justify-content: space-between; align-items: baseline;
flex-wrap: wrap; gap: 16px;
padding-bottom: 22px;
border-bottom: 1px solid var(--line-2);
}
.masthead h1 {
font-family: var(--f-display);
font-weight: 900;
font-size: clamp(44px, 8.2vw, 116px);
line-height: 0.92;
letter-spacing: -0.035em;
margin: 30px 0 0;
text-transform: uppercase;
}
.masthead h1 em {
font-family: var(--f-serif);
font-style: italic;
font-weight: 400;
text-transform: none;
letter-spacing: -0.01em;
color: var(--vermillion);
}
.masthead .sub {
font-family: var(--f-serif);
font-style: normal; /* italic is an emphasis face, not a reading face */
font-size: clamp(17px, 2vw, 22px);
line-height: 1.5;
color: var(--ink-soft);
margin: 22px 0 0;
max-width: 65ch;
}
/* italic survives only on the phrases that should carry the eye: the distance
figure, the Ring, the Wiesn. */
.masthead .sub em {
font-style: italic;
color: var(--ink);
font-weight: 500;
}
.factbar {
display: grid;
grid-template-columns: repeat(4, 1fr);
margin-top: 46px;
border: 1px solid var(--line-2);
border-radius: 4px;
overflow: hidden;
background: var(--paper-2);
}
.factbar .cell {
padding: 18px 20px;
border-right: 1px solid var(--line);
}
.factbar .cell:last-child { border-right: none; }
.factbar .cell .k { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.factbar .cell .v {
font-family: var(--f-display); font-weight: 800;
font-size: clamp(20px, 2.4vw, 30px); letter-spacing: -0.02em;
margin-top: 6px; font-variant-numeric: tabular-nums;
}
.factbar .cell .v em { font-family: var(--f-serif); font-style: italic; font-weight: 400; color: var(--vermillion); }
@media (max-width: 720px) { .factbar { grid-template-columns: repeat(2, 1fr); } .factbar .cell:nth-child(2n){border-right:none;} .factbar .cell:nth-child(-n+2){border-bottom:1px solid var(--line);} }
/* countdown chip */
.t-minus {
display: inline-flex; align-items: center; gap: 9px;
font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--ink);
}
.t-minus .pin { width: 7px; height: 7px; border-radius: 50%; background: var(--vermillion); }
.t-minus b { color: var(--vermillion); font-weight: 700; }
/* ---------------- ROUTE RIBBON (tulip diagram) ---------------- */
.ribbon {
position: sticky; top: 64px; z-index: 40;
background: var(--paper-2);
border-top: 1px solid var(--line-2);
border-bottom: 1px solid var(--line-2);
box-shadow: 0 8px 18px -16px rgba(22,34,27,0.5);
}
@media (max-width: 860px) { .ribbon { position: static; } }
.ribbon-inner {
max-width: var(--maxw); margin: 0 auto;
padding: 16px 40px 18px;
display: flex; align-items: stretch; gap: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.ribbon-inner::-webkit-scrollbar { height: 5px; }
.ribbon-inner::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
/* tablet: horizontal scroll w/ bigger min-widths so labels don't squish */
@media (max-width: 860px) {
.ribbon-inner { padding: 14px 22px; }
.rb-stop { min-width: 138px; flex: 0 0 auto; }
.rb-leg { min-width: 140px; flex: 0 0 auto; }
}
.rb-stop {
flex: 1 1 0;
min-width: 0;
display: flex; flex-direction: column;
padding-top: 22px;
position: relative;
}
.rb-stop .city {
font-family: var(--f-display); font-weight: 800;
font-size: 17px; letter-spacing: -0.01em; text-transform: uppercase;
line-height: 1;
}
.rb-stop .when {
font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em;
color: var(--muted); margin-top: 5px;
}
.rb-stop .node {
position: absolute; top: 0; left: 0;
width: 13px; height: 13px; border-radius: 50%;
background: var(--paper); border: 2.5px solid var(--green-2);
}
.rb-stop.hl .node { border-color: var(--vermillion); background: var(--vermillion); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vermillion) 28%, transparent); }
.rb-stop.start .node { background: var(--green-2); }
.rb-stop .flag {
display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--sm-urgent);
}
.rb-stop .flag::before { content: "▲"; font-size: 8px; }
/* was --green-2: 2.04:1 at 9px — the worst contrast on the site, effectively unreadable */
.rb-stop .booked { color: var(--sm-done); }
.rb-stop .booked::before { content: "✓"; }
.rb-leg {
flex: 1 1 0;
min-width: 0;
position: relative;
display: flex; flex-direction: column; align-items: center;
justify-content: flex-start;
padding: 0 6px;
}
.rb-leg .rail {
position: absolute; top: 6px; left: -52px; right: -52px;
height: 2px; background: var(--line-3);
}
.rb-leg .rail::after {
content: ""; position: absolute; right: 0; top: -3px;
border-left: 7px solid var(--green-2);
border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
.rb-leg .leg-meta {
margin-top: 22px;
text-align: center;
font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em;
color: var(--ink-soft); line-height: 1.5;
}
.rb-leg .leg-meta b { color: var(--ink); font-weight: 700; }
.rb-leg .leg-meta .via { display: block; color: var(--muted); font-size: 9px; margin-top: 2px; }
.rb-total {
flex: 0 0 auto; align-self: center;
padding-left: 18px; margin-left: 8px;
border-left: 1px solid var(--line-2);
font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--muted);
}
.rb-total b { display: block; font-family: var(--f-display); font-weight: 900; font-size: 22px; color: var(--ink); letter-spacing: -0.02em; margin-top: 3px; }
/* ---------------- section frame ---------------- */
.sec { padding: 72px 0; }
.sec-head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 24px; flex-wrap: wrap;
border-bottom: 2px solid var(--ink);
padding-bottom: 14px; margin-bottom: 40px;
}
.sec-head h2 {
font-family: var(--f-display); font-weight: 800;
font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -0.025em;
text-transform: uppercase; margin: 0; line-height: 1;
}
.sec-head .idx { font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.22em; color: var(--sm-urgent); }
.sec-head .idx.done { color: var(--sm-done); }
.sec-head .en { font-family: var(--f-serif); font-style: italic; color: var(--ink-soft); font-size: 15px; }
/* section-head label + H2 spacing fix — the inline wrappers use gap:18px which
is too tight between the tiny /LABEL and the huge H2. Widen the gap, lift
the label so it aligns to the top of the H2 (a small editorial callout
above the headline baseline), and stack cleanly on phones. */
.sec-head > div[style*="align-items:baseline"] {
gap: 6px 32px !important;
align-items: flex-start !important;
flex-direction: column !important;
}
.sec-head > div[style*="align-items:baseline"] > .idx {
padding-top: 2px;
display: inline-block;
}
@media (min-width: 720px) {
.sec-head > div[style*="align-items:baseline"] {
flex-direction: row !important;
align-items: baseline !important;
}
.sec-head > div[style*="align-items:baseline"] > .idx {
padding-top: 0;
padding-right: 4px;
border-right: 1px solid var(--line-2);
margin-right: 4px;
}
}
/* ---------------- TIMELINE (roadbook stages) ---------------- */
.roadbook { position: relative; }
.stage {
display: grid;
grid-template-columns: 168px 1fr;
gap: 0;
border-top: 1px solid var(--line-2);
position: relative;
}
.stage:last-child { border-bottom: 1px solid var(--line-2); }
.stage-rail {
padding: 26px 24px 26px 0;
border-right: 1px solid var(--line-2);
position: relative;
}
.stage-rail .etappe { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.stage-rail .daynum {
font-family: var(--f-display); font-weight: 900;
font-size: 76px; line-height: 0.82; letter-spacing: -0.05em;
margin: 4px 0 10px; font-variant-numeric: tabular-nums;
}
.stage-rail .date { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink); }
.stage-rail .dow { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.stage-body { padding: 26px 0 26px 32px; }
.stage-body h3 {
font-family: var(--f-display); font-weight: 800;
font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.02em;
text-transform: uppercase; margin: 0 0 12px; line-height: 1.02;
}
.stage-body h3 em {
font-family: var(--f-serif); font-style: italic; font-weight: 400;
text-transform: none; color: var(--vermillion); letter-spacing: -0.01em;
}
.stage-body .day-lede {
font-family: var(--f-serif); font-style: italic;
font-size: clamp(15px, 1.6vw, 17px); line-height: 1.55;
color: var(--ink-soft); max-width: 60ch;
margin: 0 0 22px;
padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.stage-body .day-lede b { color: var(--ink); font-weight: 600; font-style: normal; font-family: var(--f-sans); }
@media (max-width: 480px) {
.stage-body .day-lede { font-size: 14.5px; margin-bottom: 16px; padding-bottom: 12px; }
}
.seg {
display: grid; grid-template-columns: 92px 1fr; gap: 20px;
padding: 13px 0; border-top: 1px dotted var(--line-2);
}
.seg:first-of-type { border-top: none; padding-top: 0; }
.seg .when {
font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--ink-soft); padding-top: 3px;
}
.seg.tank .when, .seg.hl .when { color: var(--vermillion); }
.seg .what { color: var(--ink); font-size: 14.5px; line-height: 1.5; }
.seg .what b { font-weight: 700; }
.seg.tank .what, .seg.hl .what { font-weight: 500; }
.stage-foot {
display: flex; flex-wrap: wrap; gap: 26px;
margin-top: 22px; padding-top: 16px;
border-top: 1px solid var(--line);
font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--muted);
}
.stage-foot .it b { color: var(--ink); font-weight: 700; }
.stage-foot .it .ic { color: var(--vermillion); margin-right: 7px; }
/* ---- rail facts: stay + drive surfaced right under the date ---- */
.stage-rail .rail-facts {
margin-top: 16px; display: grid; gap: 9px;
font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.09em;
text-transform: uppercase; color: var(--muted); line-height: 1.35;
}
.stage-rail .rf { display: grid; grid-template-columns: 13px 1fr; gap: 5px; align-items: start; }
.stage-rail .rf .ic { color: var(--vermillion); }
.stage-rail .rf b { color: var(--ink); font-weight: 700; display: block; margin-top: 2px; letter-spacing: 0.02em; }
/* ---- activity accordions: headline always visible, detail on demand ---- */
.acts { margin-top: 2px; }
.act { border-top: 1px dotted var(--line-2); }
.act:first-child { border-top: none; }
.act > summary {
list-style: none; cursor: pointer; outline: none;
display: grid; grid-template-columns: 92px 1fr 16px; gap: 20px; align-items: baseline;
padding: 13px 0; transition: transform .18s ease;
}
.act > summary { list-style: none; }
.act > summary::-webkit-details-marker { display: none; }
.act > summary::marker { content: ""; }
.act > summary::-moz-list-bullet { list-style-type: none; }
.act > summary:hover { transform: translateX(3px); }
.act > summary:hover .act-h { color: var(--vermillion); }
.act > summary:focus-visible { outline: 2px solid var(--vermillion); outline-offset: 3px; border-radius: 3px; }
.act > summary .when {
font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.13em;
text-transform: uppercase; color: var(--ink-soft); padding-top: 2px;
}
.act.hl > summary .when { color: var(--vermillion); }
.act > summary .act-h {
font-family: var(--f-sans); font-weight: 600; font-size: 15px; line-height: 1.4;
color: var(--ink); transition: color .15s ease;
}
.act.hl > summary .act-h { font-weight: 700; }
.act > summary::after {
content: ""; width: 7px; height: 7px; align-self: center; justify-self: end;
border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted);
transform: rotate(45deg); transition: transform .2s ease;
}
.act[open] > summary::after { transform: rotate(-135deg); }
.act[open] > summary .act-h { color: var(--vermillion); }
.act > .what {
padding: 0 0 15px 112px; color: var(--ink-soft);
font-size: 14px; line-height: 1.55;
}
.act > .what b { color: var(--ink); font-weight: 700; }
@media (max-width: 480px) {
.stage-rail .rail-facts { order: 5; flex-basis: 100%; margin-top: 10px; }
.act > summary { grid-template-columns: 60px 1fr 14px; gap: 12px; }
.act > .what { padding-left: 0; }
}
/* highlight + transit variants */
.stage.hl { background: linear-gradient(90deg, color-mix(in srgb, var(--vermillion) 7%, transparent), transparent 60%); }
.stage.hl .stage-rail::before {
content: "HÖHEPUNKT";
position: absolute; top: 0; right: 24px;
writing-mode: vertical-rl;
font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.28em;
color: var(--vermillion);
}
.stage.hl .daynum { color: var(--vermillion); }
/* transit sub-strip */
.transit {
display: grid; grid-template-columns: 168px 1fr;
border-top: 1px solid var(--line-2);
background: var(--paper-2);
}
.transit .t-rail {
border-right: 1px solid var(--line-2);
display: flex; align-items: center; justify-content: flex-end;
padding: 10px 24px 10px 0;
font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--muted);
}
.transit .t-body {
padding: 10px 0 10px 32px;
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em;
}
.transit .t-body .from, .transit .t-body .to { font-family: var(--f-display); font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; font-size: 13px; }
.transit .t-body .arr { color: var(--sm-urgent); } /* 13px — small text, needs 4.5:1 */
.transit .t-body .km { color: var(--ink); }
.transit .t-body .km b { font-weight: 700; }
.transit .t-body .road { color: var(--muted); }
@media (max-width: 760px) {
.stage, .transit { grid-template-columns: 84px 1fr; }
.stage-rail { padding: 18px 14px 18px 0; }
.stage-rail .daynum { font-size: 44px; }
.stage-body { padding: 18px 0 18px 18px; }
.transit .t-rail { padding: 8px 14px 8px 0; }
.transit .t-body { padding: 8px 0 8px 18px; }
.seg { grid-template-columns: 72px 1fr; gap: 12px; }
}
/* ---------------- skip list ---------------- */
.skip {
margin-top: 56px;
border: 1px solid var(--line-2); border-radius: 4px;
background: var(--paper-2);
display: grid; grid-template-columns: 160px 1fr;
}
.skip .lbl {
padding: 22px; border-right: 1px solid var(--line-2);
font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--vermillion);
}
.skip ul { margin: 0; padding: 18px 22px; list-style: none; display: grid; gap: 6px; }
.skip li { font-size: 14px; color: var(--ink-soft); }
.skip li b { color: var(--ink); font-weight: 700; font-family: var(--f-display); text-transform: uppercase; letter-spacing: -0.01em; }
@media (max-width: 600px) { .skip { grid-template-columns: 1fr; } .skip .lbl { border-right: none; border-bottom: 1px solid var(--line-2); } }
/* ---------------- FLIGHTS MATRIX ---------------- */
.matrix-scroll { overflow-x: auto; border: 1px solid var(--line-2); border-radius: 4px; }
table.matrix {
width: 100%; border-collapse: collapse; min-width: 880px;
background: var(--paper-2);
}
table.matrix thead th {
text-align: left;
font-family: var(--f-mono); font-size: 9.5px; font-weight: 500;
letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper-3);
background: var(--ink);
padding: 12px 16px;
border-right: 1px solid rgba(231,224,206,0.12);
white-space: nowrap;
}
table.matrix thead th:last-child { border-right: none; }
table.matrix tbody td {
padding: 18px 16px;
border-top: 1px solid var(--line);
border-right: 1px solid var(--line);
vertical-align: top;
font-variant-numeric: tabular-nums;
}
table.matrix tbody td:last-child { border-right: none; }
table.matrix tbody tr:hover { background: var(--paper-hi); }
.mx-origin { font-family: var(--f-display); font-weight: 900; font-size: 30px; letter-spacing: -0.03em; line-height: 1; }
.mx-origin .seq { display: block; font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.2em; color: var(--sm-urgent); margin-bottom: 6px; }
.mx-carrier { font-family: var(--f-display); font-weight: 700; font-size: 14px; letter-spacing: -0.01em; }
.mx-nums { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--muted); margin-top: 5px; line-height: 1.5; }
.mx-route { display: flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: 12px; font-weight: 500; }
.mx-route .hub { color: var(--sm-urgent); }
.mx-route .seg-line { flex: 0 0 18px; height: 1px; background: var(--line-3); position: relative; }
.mx-route .seg-line::after { content:""; position:absolute; right:0; top:-2px; border-left:5px solid var(--line-3); border-top:2.5px solid transparent; border-bottom:2.5px solid transparent; }
.mx-leg .time { font-family: var(--f-mono); font-size: 15px; font-weight: 700; color: var(--ink); }
.mx-leg .city { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--muted); }
.mx-leg .arrow { color: var(--vermillion); margin: 0 6px; }
.mx-leg .dur { font-family: var(--f-mono); font-size: 10px; color: var(--ink-soft); margin-top: 6px; letter-spacing: 0.04em; }
.mx-leg .day { font-family: var(--f-mono); font-size: 9.5px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 3px; }
.mx-plus { color: var(--sm-urgent); font-weight: 700; }
.mx-tag {
display: inline-block;
font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.14em;
text-transform: uppercase; padding: 3px 7px; border-radius: 3px;
border: 1px solid var(--line-2); color: var(--ink-soft);
}
.mx-tag.fast { border-color: var(--sm-done); color: var(--sm-done); }
/* booked internal hop */
.hop {
margin-top: 22px;
display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center;
border: 1px solid var(--green-2); border-left: 4px solid var(--green-2);
border-radius: 4px; background: color-mix(in srgb, var(--green-2) 8%, var(--paper-2));
padding: 20px 24px;
}
.hop .badge { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-2); display: flex; align-items: center; gap: 8px; }
.hop .badge::before { content: "✓"; font-size: 13px; }
.hop .body { font-size: 14px; color: var(--ink-soft); }
.hop .body b { color: var(--ink); font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; }
.hop .time { font-family: var(--f-mono); font-weight: 700; font-size: 16px; white-space: nowrap; }
.hop .time .arrow { color: var(--vermillion); margin: 0 6px; }
@media (max-width: 720px) { .hop { grid-template-columns: 1fr; gap: 12px; } }
/* notes strip */
.notes {
margin-top: 36px;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
border: 1px solid var(--line-2); border-radius: 4px; overflow: hidden;
}
.notes .note { padding: 22px 24px; border-right: 1px solid var(--line); background: var(--paper-2); }
.notes .note:last-child { border-right: none; }
.notes .note .n { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--vermillion); text-transform: uppercase; }
.notes .note p { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.notes .note p b { color: var(--ink); font-weight: 700; }
@media (max-width: 720px) { .notes { grid-template-columns: 1fr; } .notes .note { border-right: none; border-bottom: 1px solid var(--line); } }
/* ---------------- footer ---------------- */
.foot {
margin-top: 80px;
border-top: 2px solid var(--ink);
background: var(--paper-2);
padding: 56px 0 40px;
}
.foot .big {
font-family: var(--f-serif); font-style: italic;
font-size: clamp(40px, 7vw, 92px); letter-spacing: -0.03em;
margin: 0 0 40px; line-height: 0.95;
}
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 28px; border-top: 1px solid var(--line-2); padding-top: 28px; }
.foot-grid h6 { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; font-weight: 500; }
.foot-grid a { display: block; padding: 3px 0; color: var(--ink-soft); font-size: 13.5px; }
.foot-grid a:hover { color: var(--vermillion); }
.foot-grid .crew { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-soft); line-height: 1.8; }
@media (max-width: 700px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
/* ---------------- reveal + stagger ---------------- */
.rv { transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); transition-delay: var(--d, 0ms); }
html.js .rv { opacity: 0; transform: translateY(16px); }
html.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .rv, html.js .rv.in { opacity: 1 !important; transform: none !important; transition: none !important; } }
/* ---------------- entrance ----------------
Masthead + ribbon are always visible (motion comes from count-up + marquee).
Section reveals use .rv, which degrades to visible without JS and has a
non-transition force-show fallback so content can never remain hidden. */
.masthead h1 .ln { display: block; }
.masthead h1 .ln > span { display: inline-block; }
/* blinking live pin (decorative) */
.blink { animation: blink 1.5s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
.count { font-variant-numeric: tabular-nums; }
/* hard fallback: if JS fires the guarantee, nuke transitions + show everything */
html.force-show .rv { transition: none !important; opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
html.js .rv, html.js .rv.in { opacity: 1 !important; transform: none !important; transition: none !important; }
.blink { animation: none !important; }
}
/* hover micro-interactions */
.stage { transition: background .3s ease; }
.stage:not(.hl):hover { background: color-mix(in srgb, var(--paper-hi) 60%, transparent); }
.seg { transition: transform .2s ease; }
.stage-body .seg:hover { transform: translateX(3px); }
.stage-body .seg:hover .when { color: var(--vermillion); }
table.matrix tbody tr { transition: background .18s ease; }
.card, .lodge-row, .deck-card { transition: transform .25s cubic-bezier(.22,1,.36,1), border-color .25s ease, box-shadow .25s ease; }
/* ============================================================
SHARED COMPONENTS for overview / rentals / lodging /
experiences / pack-up / map
============================================================ */
/* generic roadbook card grid */
.deck { display: grid; gap: 0; border: 1px solid var(--line-2); border-radius: 4px; overflow: hidden; background: var(--paper-2); }
.deck.cols-2 { grid-template-columns: repeat(2, 1fr); }
.deck.cols-3 { grid-template-columns: repeat(3, 1fr); }
.deck.cols-4 { grid-template-columns: repeat(4, 1fr); }
.deck > .cell { padding: 26px 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.deck.cols-2 > .cell:nth-child(2n), .deck.cols-3 > .cell:nth-child(3n), .deck.cols-4 > .cell:nth-child(4n) { border-right: none; }
.deck > .cell .ix { font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.24em; color: var(--sm-urgent); }
.deck > .cell .ix.high { color: var(--sm-high); }
.deck > .cell .ix.done { color: var(--sm-done); }
.deck > .cell h4 { font-family: var(--f-display); font-weight: 800; font-size: 19px; letter-spacing: -0.015em; text-transform: uppercase; margin: 12px 0 8px; }
/* weight:400 at 19px is SMALL text to WCAG (large = 24px, or 18.66px BOLD), so this
needs 4.5:1, not 3:1 — and --vermillion is 3.22:1 here. The homepage only escaped
this because .status-sec overrides the em to --ink/800. */
.deck > .cell h4 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; text-transform: none; color: var(--sm-urgent); }
.deck > .cell p { margin: 0; font-size: 15px; color: var(--ink-soft); line-height: 1.55; }
.deck > .cell p b { color: var(--ink); font-weight: 700; }
@media (max-width: 920px) { .deck.cols-4 { grid-template-columns: repeat(2,1fr); } .deck.cols-3 { grid-template-columns: 1fr; } .deck > .cell { border-right: none !important; } }
@media (max-width: 640px) { .deck.cols-2, .deck.cols-4 { grid-template-columns: 1fr; } }
/* standalone bordered cards in a free grid (hover lift) */
.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.card { border: 1px solid var(--line-2); border-radius: 4px; background: var(--paper-2); padding: 24px; }
.card:hover { transform: translateY(-3px); border-color: var(--line-3); box-shadow: 0 14px 30px -22px rgba(22,34,27,0.6); }
.card .ix { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--vermillion); text-transform: uppercase; }
.card h4 { font-family: var(--f-display); font-weight: 800; font-size: 20px; letter-spacing: -0.015em; text-transform: uppercase; margin: 10px 0 8px; }
.card h4 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; text-transform: none; color: var(--vermillion); }
.card .lead { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--vermillion); margin: 0 0 8px; }
.card p { margin: 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }
.card p + p { margin-top: 8px; }
.card p b, .card p strong { color: var(--ink); font-weight: 700; }
/* status tag */
.tag { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 9px; border-radius: 3px; border: 1px solid var(--line-2); color: var(--ink-soft); }
.tag .d { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.tag.ok { color: var(--green-2); border-color: color-mix(in srgb, var(--green-2) 50%, transparent); }
.tag.ok .d { background: var(--green-2); }
.tag.urgent { color: var(--vermillion); border-color: color-mix(in srgb, var(--vermillion) 50%, transparent); }
.tag.urgent .d { background: var(--vermillion); }
.tag.brass { color: var(--brass); border-color: color-mix(in srgb, var(--brass) 50%, transparent); }
.tag.brass .d { background: var(--brass); }
/* next-action banner */
.action {
display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center;
border: 1px solid var(--ink); border-left: 5px solid var(--vermillion);
border-radius: 4px; background: var(--paper-2); padding: 26px 30px;
}
.action .due { font-family: var(--f-display); font-weight: 900; font-size: clamp(28px,4vw,46px); letter-spacing: -0.03em; line-height: 0.9; color: var(--vermillion); }
.action .due span { display: block; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--muted); margin-bottom: 6px; -webkit-text-fill-color: var(--muted); }
.action .what h3 { font-family: var(--f-display); font-weight: 800; font-size: 20px; letter-spacing: -0.015em; text-transform: uppercase; margin: 0 0 5px; }
.action .what p { margin: 0; font-size: 14px; color: var(--ink-soft); }
.action .go { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vermillion); white-space: nowrap; }
.action .go::after { content: " →"; }
@media (max-width: 720px) { .action { grid-template-columns: 1fr; gap: 14px; } }
/* status ledger (booked / pending list) */
.ledger { border: 1px solid var(--line-2); border-radius: 4px; overflow: hidden; }
.ledger .row { display: grid; grid-template-columns: 150px 1fr auto; gap: 20px; align-items: center; padding: 15px 22px; border-top: 1px solid var(--line); background: var(--paper-2); }
.ledger .row:first-child { border-top: none; }
.ledger .row:hover { background: var(--paper-hi); }
.ledger .row .when { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }
.ledger .row .item { font-family: var(--f-display); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.ledger .row .item small { display: block; font-family: var(--f-text); font-weight: 400; font-size: 12.5px; color: var(--ink-soft); letter-spacing: 0; text-transform: none; margin-top: 2px; }
@media (max-width: 640px) { .ledger .row { grid-template-columns: 1fr auto; } .ledger .row .when { grid-column: 1 / -1; } }
/* sections index (overview nav list) */
.index-list { border-top: 2px solid var(--ink); }
.index-list a { display: grid; grid-template-columns: 64px 1fr auto; gap: 24px; align-items: baseline; padding: 22px 8px; border-bottom: 1px solid var(--line-2); position: relative; }
.index-list a .no { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--sm-urgent); }
.index-list a .nm { font-family: var(--f-display); font-weight: 800; font-size: clamp(22px, 3vw, 34px); letter-spacing: -0.025em; text-transform: uppercase; transition: transform .25s cubic-bezier(.22,1,.36,1); }
.index-list a .nm em { font-family: var(--f-serif); font-style: italic; font-weight: 400; text-transform: none; color: var(--ink-soft); }
.index-list a .meta { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--sm-meta); text-align: right; }
.index-list a::after { content: "→"; position: absolute; right: 8px; top: 22px; font-family: var(--f-mono); opacity: 0; transform: translateX(-8px); transition: opacity .25s, transform .25s; color: var(--vermillion); }
.index-list a:hover .nm { transform: translateX(14px); color: var(--vermillion); }
.index-list a:hover .meta { opacity: 0; }
.index-list a:hover::after { opacity: 1; transform: none; }
@media (max-width: 640px) { .index-list a { grid-template-columns: 40px 1fr; } .index-list a .meta { display: none; } }
/* spec strip (rentals hero / experiences) */
.specrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.specrow .sp { display: inline-flex; align-items: baseline; gap: 6px; border: 1px solid var(--line-2); border-radius: 3px; padding: 5px 10px; font-family: var(--f-mono); font-size: 11px; }
.specrow .sp span { color: var(--muted); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; }
.specrow .sp b { color: var(--ink); font-weight: 700; }
/* tier header band */
.tierband { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: end; border-bottom: 2px solid var(--ink); padding-bottom: 14px; margin: 0 0 24px; }
.tierband .no { font-family: var(--f-display); font-weight: 900; font-size: clamp(40px,6vw,72px); line-height: 0.8; letter-spacing: -0.04em; color: var(--vermillion); }
.tierband h3 { font-family: var(--f-display); font-weight: 800; font-size: clamp(22px,3vw,32px); letter-spacing: -0.02em; text-transform: uppercase; margin: 0; }
.tierband h3 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; text-transform: none; color: var(--vermillion); }
.tierband .rng { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-soft); padding-bottom: 6px; white-space: nowrap; }
/* lodging city block */
.citybar { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: end; border-bottom: 2px solid var(--ink); padding-bottom: 12px; margin: 0 0 22px; }
.citybar h3 { font-family: var(--f-display); font-weight: 900; font-size: clamp(30px,4.4vw,52px); letter-spacing: -0.035em; text-transform: uppercase; margin: 0; line-height: 0.9; }
.citybar .meta { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; padding-bottom: 6px; }
.lodge-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lodge-col { border: 1px solid var(--line-2); border-radius: 4px; background: var(--paper-2); padding: 18px; }
.lodge-col .h { display: flex; align-items: center; gap: 9px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.lodge-col .h .d { width: 8px; height: 8px; border-radius: 50%; }
.lodge-col.a .h .d { background: var(--vermillion); }
.lodge-col.h2 .h .d { background: var(--green-2); }
.lodge-col.h3 .h .d { background: var(--brass); }
.lodge-row { padding: 11px 12px; border-radius: 3px; display: grid; gap: 3px; }
.lodge-row:hover { background: var(--paper-hi); transform: translateX(3px); }
.lodge-row .nm { font-family: var(--f-display); font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; }
.lodge-row .pr { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.03em; color: var(--vermillion); }
.lodge-row .nt { font-size: 12.5px; color: var(--ink-soft); }
@media (max-width: 860px) { .lodge-cols { grid-template-columns: 1fr; } }
/* feature band (experiences highlight) */
/* The band's background is FIXED (dark green, or red on .acc) and does NOT flip with
the theme — so its text has to be fixed too. It was color: var(--paper), which is
cream in light but #15201A in dark: dark-on-dark at 1.28:1. */
.band { position: relative; border: 1px solid var(--ink); border-radius: 4px; overflow: hidden; background: var(--green); color: #E7E0CE; padding: 0; display: grid; grid-template-columns: 1.1fr 1fr; }
.band.acc { background: var(--vermillion-2); }
.band .txt { padding: 48px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.band .num-huge { font-family: var(--f-display); font-weight: 900; font-size: clamp(40px,6vw,76px); letter-spacing: -0.04em; line-height: 0.88; margin: 0; }
.band .num-huge em { font-family: var(--f-serif); font-style: italic; font-weight: 400; color: #DDB05A; }
.band .txt p { margin: 0; color: rgba(231,224,206,0.88); font-size: 14.5px; line-height: 1.55; max-width: 46ch; }
.band .txt .label { color: #DDB05A; }
.band .gmap { color: #8ED4AC; border-bottom-color: rgba(142,212,172,0.45); }
.band .gmap:hover { color: #FFFFFF; border-bottom-color: #FFFFFF; }
/* brass fails on the red band (2.56:1) — go pale there, and the body copy needs
full opacity: at 88% it lands on 4.23:1 */
.band.acc .txt p { color: #E7E0CE; }
.band.acc .num-huge em, .band.acc .txt .label { color: #F2DCC0; }
.band.acc .gmap { color: #F2DCC0; border-bottom-color: rgba(242,220,192,0.45); }
.band .figure { position: relative; background: var(--green-2); border-left: 1px solid rgba(255,255,255,0.12); overflow: hidden; min-height: 280px; }
.band .figure .topo { position: absolute; inset: 0; opacity: 0.5; }
.band .figure .lap { fill: none; stroke: var(--brass-hi); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.band .figure .laprun { stroke: var(--vermillion); }
@media (max-width: 820px) { .band { grid-template-columns: 1fr; } .band .txt { padding: 32px; } .band .figure { min-height: 200px; } }
/* checklist */
.checks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.checks .col { border: 1px solid var(--line-2); border-radius: 4px; background: var(--paper-2); padding: 22px; }
.checks h5 { font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sm-urgent); margin: 0 0 14px; }
.checks ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.checks li { position: relative; padding-left: 24px; font-size: 13.5px; color: var(--ink-soft); cursor: default; transition: color .15s; }
.checks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 13px; height: 13px; border: 1.5px solid var(--line-3); border-radius: 2px; transition: background .2s, border-color .2s; }
.checks li:hover { color: var(--ink); }
.checks li:hover::before { border-color: var(--vermillion); }
.checks li.done::before { background: var(--green-2); border-color: var(--green-2); }
.checks li.done::after { content: "✓"; position: absolute; left: 1.5px; top: 1px; font-size: 10px; color: var(--paper); }
@media (max-width: 980px) { .checks { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .checks { grid-template-columns: 1fr; } }
/* booking timeline (pack-up) */
.tl { display: grid; }
.tl .row { display: grid; grid-template-columns: 210px 1fr; gap: 32px; padding: 24px 0; border-top: 1px solid var(--line-2); }
.tl .row:first-child { border-top: none; }
.tl .row .head { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.tl .row .head b { display: block; font-family: var(--f-display); font-weight: 800; font-size: 18px; color: var(--ink); letter-spacing: -0.01em; text-transform: none; margin-top: 6px; }
.tl .row ul { margin: 0; padding-left: 18px; display: grid; gap: 7px; }
.tl .row li { font-size: 14px; color: var(--ink-soft); }
.tl .row li b { color: var(--ink); font-weight: 700; }
@media (max-width: 700px) { .tl .row { grid-template-columns: 1fr; gap: 10px; } }
/* big budget tiers */
.budget3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.btier { border: 1px solid var(--line-2); border-radius: 4px; background: var(--paper-2); overflow: hidden; }
.btier .cap { height: 5px; }
.btier.b1 .cap { background: var(--green-2); }
.btier.b2 .cap { background: var(--brass); }
.btier.b3 .cap { background: var(--vermillion); }
.btier .in { padding: 28px; }
.btier .lbl { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vermillion); }
.btier h3 { font-family: var(--f-display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; text-transform: uppercase; margin: 6px 0 0; }
.btier .total { font-family: var(--f-display); font-weight: 900; font-size: clamp(40px,5vw,58px); letter-spacing: -0.04em; line-height: 1; margin: 16px 0 4px; }
.btier .sub { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.btier ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; border-top: 1px solid var(--line); padding-top: 16px; }
.btier li { font-size: 13px; color: var(--ink-soft); display: flex; justify-content: space-between; gap: 12px; }
.btier li b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 920px) { .budget3 { grid-template-columns: 1fr; } }
/* prose intro callout (left rule) */
.callout-rb { border-left: 4px solid var(--vermillion); padding: 4px 0 4px 24px; margin: 0 0 28px; }
.callout-rb.green { border-left-color: var(--green-2); }
.callout-rb .label { display: block; margin-bottom: 8px; }
.callout-rb p { margin: 0; font-size: 15px; color: var(--ink-soft); line-height: 1.6; max-width: 76ch; }
.callout-rb p b { color: var(--ink); font-weight: 700; }
.callout-rb p + p { margin-top: 10px; }
/* ---------------- theme toggle ---------------- */
.theme-toggle {
position: fixed; bottom: 20px; right: 20px; z-index: 60;
width: 42px; height: 42px; border-radius: 50%;
border: 1px solid var(--line-3); background: var(--paper-2);
display: grid; place-items: center;
font-family: var(--f-mono); font-size: 14px;
box-shadow: 0 6px 20px -8px rgba(22,34,27,0.5);
}
/* ---------------- print ---------------- */
@media print {
.regbar, .nav, .theme-toggle { display: none !important; }
body { background: #fff; }
.ribbon { position: static; }
.stage, .transit { page-break-inside: avoid; }
}
/* ============================================================
FLIGHT-OPS: live tag · gmaps link · status board · tracker map
============================================================ */
.live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sm-urgent); }
.live .d { width: 7px; height: 7px; border-radius: 50%; background: var(--vermillion); box-shadow: 0 0 0 0 color-mix(in srgb, var(--vermillion) 60%, transparent); animation: livepulse 1.8s ease-out infinite; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb,var(--vermillion) 55%,transparent); } 70%,100% { box-shadow: 0 0 0 7px transparent; } }
/* google-maps directions link */
.gmap { display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.08em; color: var(--sm-done); border-bottom: 1px solid color-mix(in srgb, var(--sm-done) 45%, transparent); padding-bottom: 1px; white-space: nowrap; transition: color .15s, border-color .15s; }
.gmap::before { content: "⌖"; font-size: 12px; }
.gmap:hover { color: var(--vermillion); border-color: var(--vermillion); }
/* ---------------- lodging: the stay ledger ----------------
Built on the same rail-and-hairline grid as the roadbook .stage rows: a 168px
left rail with a vertical rule, horizontal hairlines between rows, and the
.hl-style background wash for the row that still needs action. Previously this
was a floating box with a continuous colour bar down its side, which read as
one giant card and matched nothing else on the site. */
.stays { list-style: none; margin: 0; padding: 0; }
.stay {
display: grid; grid-template-columns: 168px 1fr;
border-top: 1px solid var(--line-2);
position: relative;
}
.stay:last-child { border-bottom: 1px solid var(--line-2); }
.stay-rail {
padding: 26px 24px 26px 0;
border-right: 1px solid var(--line-2);
position: relative;
}
.stay-body { padding: 26px 0 26px 32px; }
/* the open bed gets the roadbook's highlight wash + a vertical rail tag */
.stay.todo { background: linear-gradient(90deg, color-mix(in srgb, var(--vermillion) 7%, transparent), transparent 60%); }
.stay.todo .stay-rail::before {
content: "OFFEN";
position: absolute; top: 0; right: 24px;
writing-mode: vertical-rl;
font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.28em;
color: var(--sm-urgent);
}
.stay-lbl { display: block; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sm-meta); }
/* Measured against the rail's 143px inner width: BRAUNEBERG, the longest name, is
136px at 18px and 144px at 19px. At 26px it overflowed into the body column; at
21px it broke mid-word to "BRAUNEBER / G". 18px keeps all six on one line. */
.stay-city { display: block; margin: 5px 0 8px; font-family: var(--f-display); font-weight: 900; font-size: 18px; line-height: 1.05; letter-spacing: -0.025em; text-transform: uppercase; overflow-wrap: break-word; }
.stay.todo .stay-city { color: var(--sm-urgent); }
.stay-dates { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink); font-variant-numeric: tabular-nums; }
.stay-nights { display: block; margin-top: 3px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sm-meta); }
.stay-status { font-family: var(--f-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sm-done); margin-bottom: 9px; }
.stay.todo .stay-status { color: var(--sm-urgent); }
.stay h4 { font-family: var(--f-display); font-weight: 800; font-size: 20px; letter-spacing: -0.015em; text-transform: uppercase; margin: 0 0 7px; }
.stay h4 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; text-transform: none; color: var(--sm-urgent); }
.stay .addr { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.03em; color: var(--ink-soft); margin: 0 0 12px; line-height: 1.7; }
.stay p { margin: 0 0 12px; font-size: 15px; line-height: 1.55; color: var(--ink-soft); max-width: 64ch; }
.stay p:last-child { margin-bottom: 0; }
/* The roadbook can shrink its rail to 84px on phones because it holds a two-character
day number. This rail holds a CITY NAME — at 84px even HAMBURG breaks across lines.
So below 760px the rail stops being a column and becomes a header row. */
@media (max-width: 760px) {
.stay { grid-template-columns: 1fr; }
.stay-rail {
display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
padding: 18px 0 12px;
border-right: 0;
border-bottom: 1px dotted var(--line-2);
}
.stay-lbl { display: none; }
.stay-city { font-size: 20px; margin: 0; }
.stay-dates, .stay-nights { margin-top: 0; }
.stay-body { padding: 14px 0 22px; }
.stay.todo .stay-rail::before { display: none; }
}
.gmap.sm { font-size: 9.5px; }
/* status / departure board */
.board { border: 1px solid var(--line-2); border-radius: 4px; overflow: hidden; }
.board .brow { display: grid; grid-template-columns: 116px 1.4fr 96px 116px 64px 78px; gap: 14px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--paper-2); }
.board .brow:first-child { border-top: none; }
.board .bhead { background: var(--ink); }
.board .bhead span { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper-3); }
.board .flt { font-family: var(--f-display); font-weight: 800; letter-spacing: -0.01em; font-size: 15px; }
.board .rt { font-family: var(--f-mono); font-size: 12px; color: var(--ink-soft); }
.board .rt b { color: var(--ink); }
.board .sched { font-family: var(--f-mono); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.board .st { font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.board .st .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.board .st.ontime { color: var(--green-2); } .board .st.ontime .dot { background: var(--green-2); }
.board .st.delayed { color: var(--vermillion); } .board .st.delayed .dot { background: var(--vermillion); }
.board .st.boarding { color: var(--brass); } .board .st.boarding .dot { background: var(--brass); }
.board .st.scheduled { color: var(--muted); } .board .st.scheduled .dot { background: var(--muted); }
.board .gate, .board .term { font-family: var(--f-mono); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.board .flip { display: inline-block; animation: flip .5s ease; }
@keyframes flip { 0% { transform: rotateX(90deg); opacity: 0; } 100% { transform: rotateX(0); opacity: 1; } }
@media (max-width: 760px) {
.board .brow { grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.board .bhead { display: none; }
.board .rt { grid-column: 1 / -1; order: 5; }
}
/* tracker map */
.flightmap-wrap { position: relative; border: 1px solid var(--line-2); border-radius: 4px; overflow: hidden; }
#flightmap { height: 540px; background: #d8cdb4; }
#flightmap.tall { height: 540px; }
.leaflet-container { font-family: var(--f-mono) !important; background: #d8cdb4 !important; }
[data-theme="dark"] #flightmap, [data-theme="dark"] .leaflet-container { background: #0f1813 !important; }
/* Was sepia(0.42) saturate(0.62) brightness(1.03) contrast(0.96) — heavy sepia plus
desaturation plus a brightness lift washed the basemap out until the place names
were barely legible. Keep the warm paper cast, but far lighter, and push contrast
up instead of down. */
.leaflet-tile { filter: sepia(0.16) saturate(0.9) brightness(0.98) contrast(1.12); }
[data-theme="dark"] .leaflet-tile { filter: invert(0.93) hue-rotate(170deg) saturate(0.62) brightness(0.94) contrast(1.1); }
.plane-ic { color: var(--vermillion); filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45)); }
.ap-ic { display: grid; place-items: center; }
.ap-ic .ring { width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 2.5px solid var(--green); box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.ap-ic.dest .ring { background: var(--vermillion); border-color: var(--vermillion); }
.leaflet-popup-content-wrapper { background: var(--paper-2) !important; color: var(--ink) !important; border: 1px solid var(--line-2) !important; border-radius: 4px !important; box-shadow: 0 14px 30px -16px rgba(0,0,0,0.5) !important; }
.leaflet-popup-tip { background: var(--paper-2) !important; }
.leaflet-popup-content { margin: 12px 14px !important; }
.leaflet-popup-content .pt { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vermillion); }
.leaflet-popup-content .pn { font-family: var(--f-display); font-weight: 800; font-size: 15px; letter-spacing: -0.01em; margin: 3px 0 0; }
.leaflet-popup-content .pd { font-family: var(--f-mono); font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
.leaflet-control-zoom { border: 1px solid var(--line-2) !important; }
.leaflet-bar a { background: var(--paper-2) !important; color: var(--ink) !important; border-bottom-color: var(--line) !important; }
.leaflet-control-attribution { background: rgba(233,225,206,0.7) !important; font-family: var(--f-mono) !important; font-size: 9px !important; }
.map-legend { position: absolute; left: 14px; bottom: 14px; z-index: 500; background: color-mix(in srgb, var(--paper) 90%, transparent); border: 1px solid var(--line-2); border-radius: 4px; padding: 12px 14px; backdrop-filter: blur(6px); }
.map-legend .lh { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.map-legend .lrow { display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-soft); padding: 2px 0; }
.map-legend .lrow .sw { width: 16px; height: 2px; }
.map-note { font-family: var(--f-serif); font-style: italic; font-size: 12.5px; color: var(--muted); margin-top: 12px; }
/* route map centerpiece + city rail */
#routemap { height: 72vh; min-height: 540px; background: #d8cdb4; }
[data-theme="dark"] #routemap { background: #0f1813; }
.routemap-wrap { position: relative; border: 1px solid var(--line-2); border-radius: 4px; overflow: hidden; }
.city-rail { position: absolute; top: 14px; right: 14px; z-index: 500; width: 246px; max-width: calc(100% - 28px); display: grid; gap: 4px; max-height: calc(100% - 28px); overflow: auto; }
.city-rail .cr {
display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center;
background: color-mix(in srgb, var(--paper) 92%, transparent); border: 1px solid var(--line-2);
border-radius: 4px; padding: 9px 12px; cursor: pointer; text-align: left; width: 100%;
backdrop-filter: blur(6px); transition: border-color .15s, transform .15s, background .15s;
}
.city-rail .cr:hover { border-color: var(--line-3); transform: translateX(-3px); }
.city-rail .cr.on { border-color: var(--vermillion); background: color-mix(in srgb, var(--vermillion) 12%, var(--paper)); }
.city-rail .cr .n { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--muted); }
.city-rail .cr.on .n { color: var(--vermillion); }
.city-rail .cr .nm { font-family: var(--f-display); font-weight: 800; font-size: 14px; letter-spacing: -0.01em; text-transform: uppercase; }
.city-rail .cr .km { font-family: var(--f-mono); font-size: 9.5px; color: var(--muted); text-align: right; }
@media (max-width: 720px) { .city-rail { position: static; width: auto; margin: 12px; backdrop-filter: none; } }
.poi-toggles { position: absolute; left: 14px; top: 14px; z-index: 500; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 28px); }
.poi-toggle { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 7px 11px; border: 1px solid var(--line-2); border-radius: 999px; background: color-mix(in srgb, var(--paper) 92%, transparent); color: var(--ink-soft); backdrop-filter: blur(6px); display: inline-flex; align-items: center; gap: 6px; }
.poi-toggle .d { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.poi-toggle.on { border-color: var(--vermillion); color: var(--ink); }
/* These were [data-poi="hotel"] and [data-poi="museum"] — values that appear
nowhere in the markup. The buttons are data-poi="stay" and "see", so the Stays
and Attractions dots never lit up and stayed muted grey when active. */
.poi-toggle[data-poi="stay"].on .d { background: var(--sm-done); }
.poi-toggle[data-poi="see"].on .d { background: var(--brass-hi); }
.poi-toggle[data-poi="night"].on .d { background: var(--vermillion); }
.cr-pin .ring { width: 26px; height: 26px; border-radius: 50%; background: var(--paper); border: 2.5px solid var(--green); display: grid; place-items: center; font-family: var(--f-mono); font-size: 11px; font-weight: 700; color: var(--green); box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
.cr-pin.hl .ring { background: var(--vermillion); border-color: var(--vermillion); color: #fff; }
/* first-flight countdown strip */
.countstrip { margin-top: 34px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--paper-2); padding: 18px 24px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.countstrip .cs-lbl { display: flex; flex-direction: column; gap: 5px; }
.countstrip .cd { display: flex; gap: 14px; align-items: flex-start; }
.countstrip .cd .u { display: flex; flex-direction: column; align-items: center; min-width: 54px; }
.countstrip .cd .u b { font-family: var(--f-display); font-weight: 900; font-size: clamp(30px,4.4vw,48px); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--vermillion); }
.countstrip .cd .u i { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-style: normal; margin-top: 7px; }
.countstrip .cd .sep { font-family: var(--f-display); font-weight: 800; font-size: clamp(26px,4vw,40px); color: var(--line-3); line-height: 1; }
.countstrip .cd-meta { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-soft); margin-left: auto; text-align: right; line-height: 1.6; }
.countstrip .cd-meta b { color: var(--ink); font-weight: 700; }
@media (max-width: 760px) { .countstrip .cd-meta { margin-left: 0; width: 100%; text-align: left; } }
/* to-do / done split */
.split2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 760px) { .split2 { grid-template-columns: 1fr; } }
.todo-h { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.todo-h h3 { font-family: var(--f-display); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; text-transform: uppercase; margin: 0; }
/* =====================================================================
MOBILE POLISH — hamburger nav, stage stack, safe areas, touch sizing.
Layered ON TOP of earlier @media rules; everything degrades gracefully.
===================================================================== */
/* hamburger button — injected by roadbook.js, hidden on desktop */
.nav-toggle {
display: none;
background: none; border: 1px solid var(--line-2);
border-radius: 4px; padding: 8px 10px;
cursor: pointer; color: var(--ink);
font-family: var(--f-mono); font-size: 11px;
letter-spacing: 0.16em; text-transform: uppercase;
align-items: center; gap: 8px;
min-height: 40px; /* thumb-friendly */
}
.nav-toggle .bars {
display: inline-grid; gap: 3px; width: 16px;
}
.nav-toggle .bars i {
height: 2px; background: var(--ink); border-radius: 1px;
transition: transform .2s, opacity .2s;
}
.nav-open .nav-toggle .bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-open .nav-toggle .bars i:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle .bars i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
@media (max-width: 640px) {
.nav-inner { position: relative; padding: 12px 18px; gap: 12px; }
.nav-toggle { display: inline-flex; margin-left: auto; }
/* drawer: full-width below the bar, slides down */
.nav-links {
position: absolute; top: 100%; left: 0; right: 0;
flex-direction: column; flex-wrap: nowrap;
background: var(--paper); border-bottom: 1px solid var(--line-2);
padding: 8px 14px 16px; gap: 2px;
max-height: 0; overflow: hidden;
transition: max-height .25s ease, padding .25s ease;
z-index: 50;
}
.nav-open .nav-links {
max-height: 460px;
padding: 8px 14px 16px;
box-shadow: 0 12px 24px -16px rgba(0,0,0,0.35);
}
.nav-links a {
font-size: 13px; padding: 14px 12px; /* thumb-friendly */
border-bottom: 1px solid var(--line);
}
.nav-links a:last-child { border-bottom: none; }
.nav-links a.active { background: color-mix(in srgb, var(--vermillion) 8%, transparent); }
.nav-links a.active::after { display: none; }
}
/* stage card: stack rail above body on very small screens */
@media (max-width: 480px) {
.stage, .transit { grid-template-columns: 1fr; }
.stage-rail {
display: flex; align-items: baseline; gap: 14px;
padding: 18px 18px 12px; border-right: none;
border-bottom: 1px dotted var(--line-2);
background: var(--paper-2);
}
.stage-rail .etappe { order: 1; }
.stage-rail .daynum { font-size: 36px; line-height: 1; margin: 0 4px 0 auto; order: 4; }
.stage-rail .date { order: 2; }
.stage-rail .dow { order: 3; margin-top: 0; }
.stage.hl .stage-rail::before { display: none; }
.stage-body { padding: 18px; }
.transit { padding: 0; }
.transit .t-rail {
border-right: none; border-bottom: 1px solid var(--line-2);
justify-content: flex-start; padding: 10px 18px;
}
.transit .t-body { padding: 12px 18px 14px; }
.seg { grid-template-columns: 64px 1fr; gap: 12px; }
}
/* matrix tables: nudge inner padding tighter on phones */
@media (max-width: 640px) {
table.matrix th, table.matrix td { padding: 10px 12px; font-size: 12px; }
}
/* sec-head: prevent the right "en" tag from squeezing the h2 on small phones */
@media (max-width: 640px) {
.sec-head { flex-direction: column; align-items: flex-start; gap: 8px; }
.sec-head .en { font-size: 13px; }
}
/* theme toggle: float bottom-right but lift above safe-area + scrollbars,
shrink on small screens so it doesn't collide with the map "near you" panel */
.theme-toggle {
position: fixed;
right: max(18px, env(safe-area-inset-right, 0));
bottom: max(18px, env(safe-area-inset-bottom, 0));
z-index: 600;
}
@media (max-width: 640px) {
/* shrink + translucent on phones so it never sits on top of content;
parked at bottom-LEFT to mirror the map's locate-me button and stay
out of the visual centre line where headlines live */
.theme-toggle {
left: 12px; right: auto;
bottom: max(12px, env(safe-area-inset-bottom, 0));
width: 36px; height: 36px; min-width: 36px;
font-size: 15px;
opacity: 0.7;
}
.theme-toggle:hover, .theme-toggle:active { opacity: 1; }
}
/* body padding for notched phones */
body { padding-bottom: env(safe-area-inset-bottom, 0); }
/* prevent any horizontal overflow surprises from third-party widgets */
html, body { overflow-x: hidden; }
/* increase tap-target on poi-toggles + city rail buttons */
@media (max-width: 640px) {
.poi-toggle { padding: 10px 14px; font-size: 11px; min-height: 38px; }
.city-rail .cr { padding: 12px 14px; min-height: 46px; }
}
/* deck cells: tighter padding on small phones so 1-col stack reads easier */
@media (max-width: 480px) {
.deck > .cell { padding: 20px 18px; }
}
/* masthead h1: never let clamp() push lines off-screen */
@media (max-width: 480px) {
.masthead { padding-top: 36px; }
.masthead h1 { font-size: clamp(34px, 11vw, 56px); line-height: 0.96; }
.masthead .sub { font-size: 15.5px; }
.factbar .cell { padding: 14px 14px; }
}
/* ---------------- overview status cards ---------------- */
.status-sec .deck > .cell h4 { margin: 8px 0 10px; }
.status-sec .deck > .cell h4 em { color: var(--ink); font-weight: 800; text-transform: uppercase; font-family: var(--f-display); font-style: normal; }
/* ---------------- to-book ledger ----------------
Was eight undifferentiated cards in a 3-col grid, so the stated "deadline
order" was invisible — a grid has no reading order. Single column + a left
date rail makes the order legible top-to-bottom. The metadata line carries
the facts that used to be buried mid-sentence in tags. */
Rebuilt on the roadbook's rail grid so it matches the rest of the site: 168px
rail + vertical rule + horizontal hairlines, and the .stage.hl wash for urgent
rows. The old 140px rail was also too narrow — "Overdue · 13 days" broke across
two lines mid-phrase. */
.tobook { list-style: none; margin: 0; padding: 0; }
.tobook .tb {
display: grid;
grid-template-columns: 168px 1fr;
border-top: 1px solid var(--line-2);
position: relative;
}
.tobook .tb:last-child { border-bottom: 1px solid var(--line-2); }
.tobook .tb-rail {
padding: 26px 24px 26px 0;
border-right: 1px solid var(--line-2);
position: relative;
}
.tobook .tb-body { padding: 26px 0 26px 32px; }
/* urgent rows take the same treatment .stage.hl uses in the roadbook */
.tobook .tb.urgent { background: linear-gradient(90deg, color-mix(in srgb, var(--vermillion) 7%, transparent), transparent 60%); }
.tobook .tb.urgent .tb-rail::before {
content: "DRINGEND";
position: absolute; top: 0; right: 24px;
writing-mode: vertical-rl;
font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.28em;
color: var(--sm-urgent);
}
.tobook .tb-lbl {
display: block;
font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.22em;
text-transform: uppercase; color: var(--sm-meta);
}
.tobook .tb-date {
display: block; margin: 5px 0 8px;
font-family: var(--f-display); font-weight: 900;
font-size: 30px; line-height: 1; letter-spacing: -0.03em;
color: var(--ink); font-variant-numeric: tabular-nums;
}
.tobook .tb.urgent .tb-date { color: var(--sm-urgent); }
.tobook .tb-state {
display: block;
font-family: var(--f-mono); font-size: 10px; font-weight: 500;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--sm-high); line-height: 1.5;
}
.tobook .tb.urgent .tb-state { color: var(--sm-urgent); }
/* the scannable line: priority · owner · status, above the prose */
.tobook .tb-meta {
font-family: var(--f-mono); font-size: 11.5px; font-weight: 500;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--sm-meta); margin-bottom: 10px;
}
.tobook .tb-meta .p { font-weight: 700; color: var(--sm-high); }
.tobook .tb.urgent .tb-meta .p { color: var(--sm-urgent); }
.tobook .tb-meta .s { color: var(--ink); font-weight: 700; }
.tobook h4 {
font-family: var(--f-display); font-weight: 800; font-size: 19px;
letter-spacing: -0.015em; text-transform: uppercase; margin: 0 0 8px;
}
.tobook h4 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; text-transform: none; color: var(--sm-urgent); }
.tobook p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-soft); max-width: 68ch; }
.tobook a { color: var(--sm-urgent); text-decoration: none; font-weight: 600; border-bottom: 1px dotted var(--sm-urgent); }
.tobook a:hover { color: var(--ink); border-bottom-color: var(--ink); }
@media (max-width: 760px) {
.tobook .tb { grid-template-columns: 92px 1fr; }
.tobook .tb-rail { padding: 18px 12px 18px 0; }
.tobook .tb-date { font-size: 20px; }
.tobook .tb-body { padding: 18px 0 18px 18px; }
.tobook .tb.urgent .tb-rail::before { display: none; }
}
/* ---------------- recently-booked postcards (swipe) ----------------
A horizontal scroll-snap rail. Native touch swipe on phones, buttons + arrow
keys + trackpad on desktop. Horizontal means the whole set costs one row of
vertical space no matter how many get booked. */
.pc-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.pc-nav { display: flex; align-items: center; gap: 10px; }
.pc-btn {
width: 34px; height: 34px; flex: none;
display: grid; place-items: center;
background: transparent; cursor: pointer;
border: 1px solid var(--line-2); border-radius: 50%;
color: var(--ink); font-family: var(--f-mono); font-size: 13px; line-height: 1;
transition: border-color .15s, color .15s, background .15s;
}
.pc-btn:hover:not(:disabled) { border-color: var(--sm-done); color: var(--sm-done); }
.pc-btn:focus-visible { outline: 2px solid var(--sm-done); outline-offset: 3px; }
.pc-btn:disabled { opacity: 0.3; cursor: default; }
.pc-dots { display: flex; gap: 6px; }
.pc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-3); border: 0; padding: 0; cursor: pointer; transition: background .2s, transform .2s; }
.pc-dot.on { background: var(--sm-done); transform: scale(1.35); }
.pc-dot:focus-visible { outline: 2px solid var(--sm-done); outline-offset: 3px; }
.postcards {
display: flex; gap: 18px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding: 2px 2px 20px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
}
.postcards::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .postcards { scroll-behavior: auto; } }
.pc {
flex: 0 0 336px; scroll-snap-align: start;
position: relative;
display: flex; flex-direction: column;
min-height: 208px;
padding: 20px 22px 18px;
background: var(--paper-2);
border: 1px solid var(--line-2);
border-radius: 3px;
/* the postcard's franked edge */
box-shadow: inset 3px 0 0 var(--sm-done);
}
/* perforated stamp, top-right */
.pc::after {
content: "✓";
position: absolute; top: 16px; right: 16px;
width: 28px; height: 32px;
display: grid; place-items: center;
border: 1.5px dashed color-mix(in srgb, var(--sm-done) 60%, transparent);
border-radius: 2px;
color: var(--sm-done); font-size: 13px; line-height: 1;
}
.pc-post {
font-family: var(--f-mono); font-size: 10.5px; font-weight: 500;
letter-spacing: 0.2em; text-transform: uppercase; color: var(--sm-done);
padding-right: 40px;
}
.pc h4 {
font-family: var(--f-display); font-weight: 800; font-size: 19px;
letter-spacing: -0.015em; text-transform: uppercase; margin: 10px 0 6px;
padding-right: 40px;
}
.pc h4 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; text-transform: none; color: var(--sm-urgent); }
.pc .pc-addr { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.03em; color: var(--sm-meta); margin: 0 0 10px; line-height: 1.6; }
.pc p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.pc .pc-when { margin-top: auto; padding-top: 12px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ink); border-top: 1px dotted var(--line-2); }
/* to-book postcards: same rail, unfranked. Red edge + "!" stamp for URGENT, amber
for HIGH. The priority word in .pc-post is the non-colour cue. */
.pc.todo { box-shadow: inset 3px 0 0 var(--sm-high); }
.pc.todo.urgent { box-shadow: inset 3px 0 0 var(--sm-urgent); }
.pc.todo::after {
content: "!";
border-color: color-mix(in srgb, var(--sm-high) 60%, transparent);
color: var(--sm-high);
font-weight: 700;
}
.pc.todo.urgent::after {
border-color: color-mix(in srgb, var(--sm-urgent) 60%, transparent);
color: var(--sm-urgent);
}
.pc.todo .pc-post { color: var(--sm-high); }
.pc.todo.urgent .pc-post { color: var(--sm-urgent); }
.pc.todo .pc-when { color: var(--sm-high); }
.pc.todo.urgent .pc-when { color: var(--sm-urgent); }
.pc a { color: var(--sm-urgent); text-decoration: none; font-weight: 600; border-bottom: 1px dotted var(--sm-urgent); }
.pc a:hover { color: var(--ink); border-bottom-color: var(--ink); }
/* if every card already fits, it is not a carousel — drop the chrome */
.pc-static .pc-nav { display: none; }
/* checklist postcards (the pack list). Taller, tickable, no stamp. */
.postcards { align-items: stretch; }
.pc.list { flex: 0 0 300px; min-height: 0; padding-bottom: 14px; }
.pc.list::after { display: none; } /* no franking stamp on a to-do card */
.pc.list .pc-post,
.pc.list h4 { padding-right: 0; }
.pc.list h4 { margin: 8px 0 12px; font-size: 17px; }
.pc.list .pc-note { font-family: var(--f-serif); font-style: italic; font-size: 13.5px; color: var(--sm-meta); margin: -6px 0 12px; line-height: 1.4; }
.pack { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.pack li {
position: relative;
padding: 8px 0 8px 24px;
font-size: 14px; line-height: 1.45;
color: var(--ink-soft);
border-top: 1px dotted var(--line-2);
cursor: pointer;
transition: color .15s ease, opacity .15s ease;
}
.pack li:first-child { border-top: 0; }
.pack li::before {
content: "";
position: absolute; left: 0; top: 11px;
width: 12px; height: 12px;
border: 1px solid var(--line-3);
border-radius: 2px;
transition: background .15s ease, border-color .15s ease;
}
.pack li:hover { color: var(--ink); }
.pack li:hover::before { border-color: var(--sm-done); }
.pack li.done { color: var(--sm-meta); opacity: 0.6; text-decoration: line-through; text-decoration-thickness: 1px; }
.pack li.done::before {
background: var(--sm-done);
border-color: var(--sm-done);
}
.pack li.done::after {
content: "✓";
position: absolute; left: 2px; top: 8px;
font-size: 10px; line-height: 1; font-weight: 700;
color: var(--paper);
}
.pack li b { color: var(--ink); font-weight: 700; }
.pack li.warn b, .pack li.warn { color: var(--sm-urgent); }
.pack li.warn.done { color: var(--sm-meta); }
/* live "3 / 11" counter in the card foot */
.pc.list .pc-count { font-variant-numeric: tabular-nums; }
.pc.list .pc-count.all { color: var(--sm-done); }
@media (max-width: 640px) { .pc.list { flex: 0 0 86%; } }
@media (max-width: 640px) {
.pc { flex: 0 0 84%; min-height: 190px; }
.pc-head { margin-bottom: 14px; }
}
/* ---------------- "Already done" — collapsible ----------------
This is reference, not action, so it collapses by default and stops competing
with the to-book ledger above it.
The brief asked for ~65% opacity on the block. Measured, that composites the
green eyebrow down to 3.24:1 — a fresh AA failure, which contradicts step 1.
So the recession is carried by the collapse plus a dimmed summary, and the
expanded content stays fully legible: once you deliberately open a drawer you
should be able to read what is in it. */
.done-block { border-top: 2px solid var(--ink); margin-bottom: 40px; }
.done-block > summary {
list-style: none; cursor: pointer;
display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
padding: 16px 2px; opacity: 0.68; transition: opacity .2s ease;
}
.done-block > summary::-webkit-details-marker { display: none; }
.done-block > summary::marker { content: ""; }
.done-block > summary:hover,
.done-block[open] > summary { opacity: 1; }
.done-block > summary:focus-visible { outline: 2px solid var(--sm-done); outline-offset: 4px; border-radius: 3px; }
.done-block > summary h2 {
font-family: var(--f-display); font-weight: 800;
font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -0.025em;
text-transform: uppercase; margin: 0; line-height: 1;
}
.done-block .idx-done {
font-family: var(--f-mono); font-size: 11.5px; font-weight: 500;
letter-spacing: 0.22em; text-transform: uppercase; color: var(--sm-done);
}
.done-block .done-meta { font-family: var(--f-serif); font-style: italic; font-size: 15px; color: var(--ink-soft); }
.done-block > summary::after {
content: ""; width: 8px; height: 8px; margin-left: auto; align-self: center; flex: none;
border-right: 1.8px solid var(--sm-meta); border-bottom: 1.8px solid var(--sm-meta);
transform: rotate(45deg); transition: transform .2s ease;
}
.done-block[open] > summary::after { transform: rotate(-135deg); }
.done-block .deck { margin-top: 8px; }
.status-sec .deck > .cell.booked-cell { background: color-mix(in srgb, var(--green-2) 6%, transparent); border-left: 3px solid var(--sm-done); }
.status-sec .deck > .cell.booked-cell h4 em { color: var(--sm-done); }
.status-sec .deck > .cell a { color: var(--sm-urgent); text-decoration: none; font-weight: 600; border-bottom: 1px dotted var(--sm-urgent); }
.status-sec .deck > .cell a:hover { color: var(--ink); border-bottom-color: var(--ink); }
/* ---------------- mobile spacing — tighter sections, snug masthead ---------------- */
@media (max-width: 640px) {
.sec { padding: 44px 0; }
.sec-head { margin-bottom: 22px; padding-bottom: 10px; border-bottom-width: 1px; }
.sec-head h2 { font-size: clamp(24px, 6.4vw, 32px); }
.masthead { padding-top: 28px; }
.masthead h1 { margin-top: 18px; }
.masthead .sub { margin-top: 16px; }
.factbar { margin-top: 28px; }
.foot { padding: 36px 0 28px; }
.deck > .cell { padding: 18px 18px; }
}
@media (max-width: 480px) {
.sec { padding: 32px 0; }
.sec-head { margin-bottom: 18px; }
.deck > .cell { padding: 16px 16px; }
}
/* ---------------- route ribbon → vertical timeline on phones ----------------
On phones the horizontal "tulip" ribbon squeezes; flip the whole thing to
a stacked timeline with a left rail of dots. */
@media (max-width: 640px) {
.ribbon {
position: static;
box-shadow: 0 1px 0 var(--line-2);
margin: 18px 0 24px; /* lift off the nav above + air below */
border-top: 1px solid var(--line-2);
}
.ribbon-inner {
flex-direction: column; align-items: stretch;
overflow: visible;
padding: 16px 18px 22px;
position: relative;
row-gap: 4px;
}
/* the dotted vertical rail behind the dots */
.ribbon-inner::before {
content: ""; position: absolute;
left: 25px; top: 28px; bottom: 28px;
width: 2px; background:
repeating-linear-gradient(to bottom, var(--line-3) 0 3px, transparent 3px 7px);
pointer-events: none;
}
.rb-stop, .rb-leg {
min-width: 0; flex: none;
width: 100%;
padding: 0 0 0 38px;
position: relative;
align-items: flex-start;
}
/* stop card */
.rb-stop {
padding-top: 4px; padding-bottom: 4px;
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas: "city when" "flag flag";
align-items: baseline;
column-gap: 12px;
}
.rb-stop .city { grid-area: city; font-size: 18px; line-height: 1.1; }
.rb-stop .when {
grid-area: when; margin-top: 0; font-size: 10.5px; color: var(--ink-soft);
white-space: nowrap;
}
.rb-stop .flag { grid-area: flag; margin-top: 4px; font-size: 9.5px; }
.rb-stop .node {
top: 7px; left: 17px; width: 17px; height: 17px;
border-width: 3px; background: var(--paper);
box-shadow: 0 0 0 4px var(--paper-2);
}
.rb-stop.hl .node { box-shadow: 0 0 0 4px var(--paper-2), 0 0 0 6px color-mix(in srgb, var(--vermillion) 32%, transparent); }
/* leg connector — sits between two stops */
.rb-leg {
padding: 8px 0 8px 38px;
flex-direction: row !important; align-items: center; gap: 10px;
justify-content: flex-start;
}
.rb-leg .rail { display: none; } /* horizontal line is meaningless when stacked */
.rb-leg .leg-meta {
margin-top: 0; text-align: left;
font-size: 10.5px; color: var(--ink-soft);
}
.rb-leg .leg-meta b { color: var(--ink); }
.rb-leg .leg-meta .via {
display: inline; margin-top: 0; font-size: 10px;
font-family: var(--f-serif); font-style: italic;
color: var(--muted); margin-left: 6px;
}
/* total */
.rb-total {
margin: 14px 0 0 38px; padding: 10px 0 0; border-left: 0;
border-top: 1px solid var(--line-2); width: calc(100% - 38px);
}
.rb-total b { display: inline; margin-top: 0; margin-left: 8px; font-size: 18px; }
}
/* ============ HOT BUTTONS · masthead quick access ============ */
.hotbtns { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 6px; max-width:880px; }
.hotbtns .hb-k { flex:0 0 100%; font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:12px; }
.hotbtns .hb-k:first-child { margin-top:0; }
.hotbtns a { display:inline-flex; align-items:center; padding:9px 13px; border:1px solid var(--line-2); border-radius:3px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none; transition:border-color .15s ease, color .15s ease; }
.hotbtns a:hover { border-color:var(--accent); color:var(--accent); }
.hotbtns a b { font-weight:700; }
@media (max-width:640px){ .hotbtns { gap:6px; } .hotbtns a { padding:8px 10px; font-size:10px; } }