/* Departures design layer (visual direction decided 20 Oct 2026; brand/visual/CLAUDE.md).
   Swiss railway timetable meets travel guide: off-white ground, black boards, red and yellow
   signals, a wayfinding colour per region, one typeface (Archivo) used on its width axis.
   Reference prototype: design/prototypes/d/. Loaded after site-chrome.css; step 1 covers tokens,
   type, header, footer, buttons and credits. Templates are converted in later steps. */

/* ---------------------------------------------------------------- font (self-hosted, SIL OFL) */
@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 400 900;
	font-stretch: 62% 125%;
	font-display: swap;
	src: url("../fonts/archivo/archivo-latin.woff2") 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: "Archivo";
	font-style: normal;
	font-weight: 400 900;
	font-stretch: 62% 125%;
	font-display: swap;
	src: url("../fonts/archivo/archivo-latin-ext.woff2") 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 400 900;
	font-stretch: 62% 125%;
	font-display: swap;
	src: url("../fonts/archivo/archivo-vietnamese.woff2") format("woff2");
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* ---------------------------------------------------------------- tokens */
:root {
	--rg-font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--rg-w-cond: 62%;
	--rg-w-semi: 82%;
	--rg-w-wide: 125%;

	--rg-paper: #ffffff;
	--rg-ink-2: #2b2b29;
	--rg-hair: #d5d5cf;
	--rg-board: #111111;
	--rg-board-2: #1d1d1b;
	--rg-board-hair: #3a3a37;
	--rg-board-text: #f4f4ef;
	--rg-board-muted: #bdbdb6;
	--rg-red: #e8483b;
	--rg-yellow: #ffd23f;
	--rg-grey-tag: #e4e4df;

	--rg-r-europe: #2456c9;
	--rg-r-asia: #c2185b;
	--rg-r-africa: #e06c00;
	--rg-r-north-america: #13874b;
	--rg-r-south-america: #6f3fc9;
	--rg-r-australia: #8c5a14;
	--rg-r-oceania: #00727d;

	--rg-rule: 3px;
	--rg-gut: clamp(16px, 3.2vw, 40px);

	/* Earlier tokens, remapped so existing templates follow the new look until they are converted. */
	--rg-green-900: #111111;
	--rg-green-700: #2b2b29;
	--rg-green-600: #111111;
	--rg-ink: #111111;
	--rg-muted: #565650;
	--rg-bg: #fbfbf9;
	--rg-surface: #f1f1ec;
	--rg-surface-green: #f1f1ec;
	--rg-line: #d5d5cf;
	--rg-radius: 0;
	--rg-wrap: 1440px;
	--rg-header-h: 72px;
	--rg-serif: var(--rg-font);
	--rg-shadow: none;
}

.rg-region--europe        { --rc: var(--rg-r-europe); }
.rg-region--asia          { --rc: var(--rg-r-asia); }
.rg-region--africa        { --rc: var(--rg-r-africa); }
.rg-region--north-america { --rc: var(--rg-r-north-america); }
.rg-region--south-america { --rc: var(--rg-r-south-america); }
.rg-region--australia     { --rc: var(--rg-r-australia); }
.rg-region--oceania       { --rc: var(--rg-r-oceania); }

/* ---------------------------------------------------------------- base type */
body,
button,
input,
select,
textarea {
	font-family: var(--rg-font);
}
body {
	background: var(--rg-bg);
	color: var(--rg-ink);
	font-size: 17px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--rg-font);
	font-weight: 800;
	font-stretch: var(--rg-w-semi);
	letter-spacing: -0.005em;
	color: var(--rg-ink);
}
a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
:focus-visible {
	outline: 3px solid var(--rg-ink);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px var(--rg-yellow);
}
.rg-footer :focus-visible {
	outline-color: var(--rg-yellow);
	box-shadow: 0 0 0 6px var(--rg-ink);
}
.rg-dot {
	display: inline-block;
	flex: none;
	width: 0.78em;
	height: 0.78em;
	border-radius: 50%;
	background: var(--rc, var(--rg-ink));
}

/* ---------------------------------------------------------------- buttons */
.rg-btn {
	min-height: 48px;
	padding: 12px 20px;
	border: 2px solid var(--rg-ink);
	border-radius: 0;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.1;
	text-transform: uppercase;
	transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.rg-btn--primary {
	background: var(--rg-ink);
	border-color: var(--rg-ink);
	color: var(--rg-bg);
}
.rg-btn--primary:hover,
.rg-btn--primary:focus-visible {
	background: var(--rg-bg);
	color: var(--rg-ink);
	box-shadow: 6px 6px 0 var(--rg-red);
}
.rg-btn--secondary,
.rg-btn--ghost,
.rg-btn--outline {
	background: transparent;
	border-color: var(--rg-ink);
	color: var(--rg-ink);
}
.rg-btn--secondary:hover,
.rg-btn--ghost:hover,
.rg-btn--outline:hover {
	background: var(--rg-yellow);
}

/* ---------------------------------------------------------------- photo credits */
.rg-figure__credit {
	font-family: var(--rg-font);
	font-size: 12px;
	line-height: 1.4;
	color: var(--rg-muted);
}
.rg-figure__credit a {
	color: inherit;
}

/* ---------------------------------------------------------------- header */
.rg-header {
	position: sticky;
	top: 0;
	background: var(--rg-bg);
	border-bottom: var(--rg-rule) solid var(--rg-ink);
}
.rg-header__bar {
	max-width: var(--rg-wrap);
	padding: 0 var(--rg-gut);
	gap: 24px;
}
.rg-brand,
.rg-footer .rg-brand {
	gap: 10px;
	color: var(--rg-ink);
	font-family: var(--rg-font);
	font-size: 21px;
	font-weight: 900;
	font-stretch: var(--rg-w-wide);
	letter-spacing: -0.01em;
	line-height: 1;
	text-transform: uppercase;
}
.rg-brand:hover {
	color: var(--rg-ink);
}
.rg-brand__mark {
	flex: none;
	width: 22px;
	height: 22px;
	display: block;
}
.rg-footer .rg-brand__mark { width: 1.1em; height: 1.1em; }

.rg-nav__link {
	padding: 10px;
	border-radius: 0;
	border-bottom: var(--rg-rule) solid transparent;
	color: var(--rg-ink);
	font-size: 15px;
	font-weight: 600;
}
.rg-nav__link:hover,
.rg-nav__link:focus-visible,
.rg-nav__link[aria-current="page"],
.rg-nav__trigger[aria-expanded="true"] {
	color: var(--rg-ink);
	background: none;
	border-bottom-color: var(--rg-red);
}
.rg-search input[type="search"] {
	height: 44px;
	border: 2px solid var(--rg-ink);
	border-radius: 0;
	background: var(--rg-paper);
	font-size: 15px;
}
.rg-search input[type="search"]:focus {
	border-color: var(--rg-ink);
	box-shadow: 4px 4px 0 var(--rg-yellow);
}
.rg-nav__tools .rg-btn--primary {
	background: var(--rg-red);
	border-color: var(--rg-red);
	color: #fff;
	min-height: 44px;
	padding: 8px 16px;
	font-size: 18.7px;
}
.rg-nav__tools .rg-btn--primary:hover {
	background: var(--rg-ink);
	border-color: var(--rg-ink);
	color: #fff;
	box-shadow: none;
}

/* Destinations menu: a departure board. */
.rg-mega {
	top: calc(100% + 3px);
	border: var(--rg-rule) solid var(--rg-ink);
	border-radius: 0;
	background: var(--rg-paper);
}
.rg-mega__regions {
	padding: 0;
	background: var(--rg-board);
	border-right: 0;
}
.rg-mega__tab {
	padding: 12px 14px;
	border-radius: 0;
	border-bottom: 1px solid var(--rg-board-hair);
	color: var(--rg-board-text);
	font-weight: 700;
	font-stretch: var(--rg-w-semi);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.rg-mega__tab:hover {
	color: var(--rg-yellow);
}
.rg-mega__tab[aria-selected="true"] {
	background: var(--rg-yellow);
	color: var(--rg-ink);
	box-shadow: none;
}
.rg-mega__title {
	font-weight: 800;
	font-stretch: var(--rg-w-cond);
	font-size: 28px;
	line-height: 0.9;
	text-transform: uppercase;
	color: var(--rg-ink);
}
.rg-mega__countries a {
	color: var(--rg-ink);
	font-weight: 600;
	border-radius: 0;
}
.rg-mega__countries a:hover {
	background: var(--rg-yellow);
	color: var(--rg-ink);
}
.rg-mega__all {
	color: var(--rg-ink);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-bottom: 2px solid currentColor;
}

@media (max-width: 960px) {
	.rg-header__bar { padding: 0 var(--rg-gut); }
	.rg-brand { font-size: 18px; }
	.rg-nav {
		background: var(--rg-bg);
		border-bottom: var(--rg-rule) solid var(--rg-ink);
		box-shadow: none;
	}
	.rg-nav__link {
		border-bottom: 1px solid var(--rg-hair);
		font-weight: 800;
		font-stretch: var(--rg-w-cond);
		font-size: 26px;
		line-height: 1;
		text-transform: uppercase;
	}
	.rg-nav__link:hover { background: var(--rg-yellow); }
	.rg-nav__item--mega::before { color: var(--rg-muted); font-weight: 700; }
	.rg-nav__sub a { color: var(--rg-ink); font-weight: 600; }
}

/* ---------------------------------------------------------------- footer */
.rg-footer {
	background: var(--rg-ink);
	color: var(--rg-board-text);
}
.rg-footer a {
	color: var(--rg-board-text);
}
.rg-footer a:hover {
	color: var(--rg-yellow);
}
.rg-footer .rg-brand {
	color: var(--rg-board-text);
	font-size: clamp(24px, 3vw, 40px);
}
.rg-footer .rg-brand:hover {
	color: var(--rg-board-text);
	text-decoration: none;
}
.rg-footer__inner {
	padding: 48px var(--rg-gut) 32px;
	grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr));
	gap: 32px;
	border-bottom: 1px solid var(--rg-board-hair);
}
.rg-footer__brand p {
	color: var(--rg-board-muted);
	font-size: 15px;
}
.rg-footer__title {
	color: var(--rg-yellow);
	font-weight: 700;
	padding-bottom: 10px;
	border-bottom: var(--rg-rule) solid var(--rg-board-text);
	margin-bottom: 8px;
}
.rg-footer__col li {
	margin: 0;
}
.rg-footer__col a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 0;
	font-weight: 600;
}
.rg-footer__col .rg-dot {
	box-shadow: 0 0 0 2px var(--rg-ink), 0 0 0 3px var(--rg-board-muted);
}
.rg-footer__code {
	width: 3.4em;
	color: var(--rg-board-muted);
	font-size: 13px;
	font-weight: 800;
	font-stretch: var(--rg-w-wide);
}
.rg-footer__legal {
	padding: 22px var(--rg-gut) 28px;
	border-top: 0;
}
.rg-footer__legal p {
	color: var(--rg-board-muted);
	max-width: 90ch;
}
@media (max-width: 1023px) {
	.rg-footer__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.rg-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.rg-footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.rg-footer__col:last-child { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- mobile menu button */
.rg-nav-toggle {
	border: 2px solid var(--rg-ink);
	border-radius: 0;
	background: transparent;
	color: var(--rg-ink);
}
.rg-nav-toggle[aria-expanded="true"] {
	background: var(--rg-ink);
	color: var(--rg-bg);
}
.rg-nav-toggle__bars,
.rg-nav-toggle__bars::before,
.rg-nav-toggle__bars::after {
	border-radius: 0;
}
.rg-nav-toggle[aria-expanded="true"] .rg-nav-toggle__bars::before,
.rg-nav-toggle[aria-expanded="true"] .rg-nav-toggle__bars::after {
	background: var(--rg-bg);
}

/* Laptop widths: the full header only fits from about 1240px, so tighten it until then. */
@media (min-width: 961px) and (max-width: 1280px) {
	.rg-header .rg-brand { font-size: 17px; }
	.rg-header .rg-nav__link { padding: 10px 6px; font-size: 14px; }
	.rg-header .rg-search input[type="search"],
	.rg-header .rg-search input[type="search"]:focus { width: 110px; }
	.rg-header .rg-nav__tools .rg-btn--primary { font-size: 15px; padding: 8px 12px; }
}
@media (min-width: 961px) and (max-width: 1100px) {
	.rg-header .rg-search { display: none; }
}

/* Footer legal links */
.rg-footer__links { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0 0 10px; padding: 0; }
.rg-footer__links a { color: inherit; text-decoration: underline; }