/* Leonida Rundown, "Plate". Palette and face from brand.md; tokens and rules in DESIGN.md. */
@font-face { font-family: "Instrument Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/InstrumentSans-400.woff2) format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url(/fonts/InstrumentSans-600.woff2) format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url(/fonts/InstrumentSans-700.woff2) format("woff2"); }

:root {
	color-scheme: light dark;
	--bg: #F4F4F1;      /* Paper */
	--lift: #FAFAF8;    /* Paper lifted toward white: raised panels */
	--fg: #1C1D1F;      /* Graphite */
	--muted: #5E5F5B;   /* Stone */
	--rule: #DADBD6;    /* Mist: table rules only */
	--ring: rgb(28 29 31 / 0.09);
	--accent: #2457E6;  /* Gulf blue: the brand moment only (the mark, links, Follow) */
	--material: rgb(244 244 241 / 0.76);
	--edge: rgb(28 29 31 / 0.1);
	--gutter: clamp(1rem, 4vw, 2.5rem);
	--col: 40rem;       /* reading column, about 65 characters */
	--wide: 64rem;      /* plates break out to here */
	--r-lg: 1.125rem;
	--r-sm: 0.625rem;
	/* Critically damped spring (damping 1.0, response 0.3 s) sampled for CSS. */
	--spring: linear(0, 0.062 4.2%, 0.192 8.3%, 0.339 12.5%, 0.477 16.7%, 0.596 20.8%, 0.693 25%, 0.771 29.2%, 0.83 33.3%, 0.876 37.5%, 0.91 41.7%, 0.935 45.8%, 0.953 50%, 0.966 54.2%, 0.976 58.3%, 0.983 62.5%, 0.988 66.7%, 0.992 70.8%, 0.994 75%, 0.997 83.3%, 0.999 91.7%, 1);
}
@media (min-width: 48rem) { :root { --r-lg: 1.5rem; --r-sm: 0.75rem; } }
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #141517;     /* Night */
		--lift: #1C1D20;   /* Night lifted toward Chalk */
		--fg: #EDEDE9;     /* Chalk */
		--muted: #A3A49F;  /* Ash */
		--rule: #2E2F31;
		--ring: rgb(237 237 233 / 0.08);
		--accent: #6E97FF;
		--material: rgb(20 21 23 / 0.72);
		--edge: rgb(237 237 233 / 0.1);
	}
}
@media (prefers-contrast: more) {
	:root { --muted: var(--fg); --ring: var(--fg); --edge: var(--fg); --material: var(--bg); }
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 4.5rem; }
body {
	background: var(--bg);
	color: var(--fg);
	font: 400 1.125rem/1.62 "Instrument Sans", system-ui, sans-serif;
	font-kerning: normal;
}
img { display: block; max-width: 100%; height: auto; }
ul, ol { padding: 0; }

a { color: inherit; text-underline-offset: 0.16em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:active { opacity: 0.6; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
#main:focus { outline: none; }

.wrap { width: min(72rem, 100% - 2 * var(--gutter)); margin-inline: auto; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: 0.75rem; transform: translateY(-200%); padding: 0.5rem 0.75rem; border-radius: var(--r-sm); background: var(--fg); color: var(--bg); font-weight: 600; z-index: 20; }
.skip:focus { transform: none; }

/* Type roles. Tracking tightens and leading closes as size grows; small text opens up slightly. */
.display {
	font-size: clamp(2.375rem, 1.5rem + 3.4vw, 3.75rem);
	font-weight: 700;
	line-height: 1.03;
	letter-spacing: -0.035em;
	text-wrap: balance;
	overflow-wrap: break-word;
}
.dek { font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem); line-height: 1.4; letter-spacing: -0.01em; text-wrap: pretty; }
.meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.875rem; line-height: 1.45; letter-spacing: 0.01em; color: var(--muted); }
.section-title, .section-label { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; }

/* Masthead: a translucent material the page scrolls under. Its lower edge fades in only once content is beneath it. */
.masthead { position: sticky; top: 0; z-index: 10; background: var(--material); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }
.masthead::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--edge); }
@supports (animation-timeline: scroll()) {
	.masthead::after { opacity: 0; animation: edge linear both; animation-timeline: scroll(root); animation-range: 0 3rem; } /* no edge on pages too short to scroll */
	@keyframes edge { from { opacity: 0; } to { opacity: 1; } }
}
.masthead-in { position: relative; display: flex; align-items: center; column-gap: 2rem; min-height: 3.5rem; }
/* The underline is part of the mark (Josh): a 2px rule a fixed distance under the name, not a link underline. */
.wordmark { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1; white-space: nowrap; text-decoration: underline; text-decoration-thickness: 0.11em; text-underline-offset: 0.3em; text-decoration-skip-ink: none; }
.wordmark:hover { text-decoration-thickness: 0.11em; }
.wordmark::after { content: ""; display: inline-block; width: 0.26em; height: 0.26em; margin-left: 0.22em; vertical-align: 0.46em; background: var(--accent); }
/* Tabs sit right after the wordmark, as one group. Other tabs are Stone; the current one is Graphite with a 2px bar under
   it. Press dims at once (a:active); on fine pointers the bar grows from the tab's left edge on the spring. */
.tabs { display: flex; column-gap: 1.5rem; }
.tabs a, .menu a { position: relative; display: flex; align-items: center; min-height: 2.75rem; text-decoration: none; font-size: 0.9375rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.tabs a[aria-current="page"], .menu a[aria-current="page"] { color: var(--fg); }
.tabs a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.5rem; height: 2px; border-radius: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 0.35s var(--spring); }
.tabs a[aria-current="page"]::after { transform: none; }
@media (hover: hover) and (pointer: fine) {
	.tabs a:hover, .menu a:hover { color: var(--fg); }
	.tabs a:hover::after { transform: none; }
	.menu a:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }
}
/* Under 48rem (where five tabs would crowd the row): wordmark left, a 44px "Menu" button right, one row. The menu is a
   popover (top layer) set just under the button and opening from it: a panel of the header's material. */
.menu-button { display: none; }
.menu { position: fixed; inset: 3.625rem var(--gutter) auto auto; margin: 0; min-width: 14rem; padding: 0.375rem; border: 0; border-radius: var(--r-lg); color: var(--fg); background: var(--material); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: inset 0 0 0 1px var(--edge), 0 1rem 2.5rem rgb(0 0 0 / 0.16); transform-origin: top right; opacity: 0; transform: translateY(-0.375rem) scale(0.96); transition: opacity 0.18s ease, transform 0.35s var(--spring), overlay 0.35s allow-discrete, display 0.35s allow-discrete; }
.menu:popover-open { display: flex; flex-direction: column; opacity: 1; transform: none; }
@starting-style { .menu:popover-open { opacity: 0; transform: translateY(-0.375rem) scale(0.96); } }
.menu a { padding-inline: 0.875rem; border-radius: var(--r-sm); font-size: 1rem; }
.menu a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em; }
.menu a:focus-visible { outline-offset: -2px; } /* the ring stays inside the panel */
@media (max-width: 47.99rem) {
	.tabs { display: none; }
	.menu-button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: 0 -0.625rem 0 auto; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--fg); cursor: pointer; }
	.menu-button:active { opacity: 0.6; }
	/* Two lines that turn into a cross while the menu is open. */
	.menu-lines, .menu-lines::before, .menu-lines::after { display: block; width: 1.125rem; height: 2px; border-radius: 1px; }
	.menu-lines { position: relative; }
	.menu-lines::before, .menu-lines::after { content: ""; position: absolute; left: 0; background: currentColor; transition: transform 0.35s var(--spring); }
	.menu-lines::before { top: -4px; }
	.menu-lines::after { top: 4px; }
	.masthead-in:has(.menu:popover-open) .menu-lines::before { transform: translateY(4px) rotate(45deg); }
	.masthead-in:has(.menu:popover-open) .menu-lines::after { transform: translateY(-4px) rotate(-45deg); }
}
@media (min-width: 48rem) { .menu { display: none !important; } } /* a menu left open never lingers on a wide screen */
/* Browsers without popovers: no button; the tabs show as a row that wraps under the wordmark, so every tab is reachable. */
@supports not selector(:popover-open) {
	.menu-button, .menu { display: none !important; }
	@media (max-width: 47.99rem) {
		.masthead-in { flex-wrap: wrap; }
		.tabs { display: flex; flex-wrap: wrap; column-gap: 1rem; width: 100%; }
		html { scroll-padding-top: 8rem; } /* this header runs to about 106px (QA), up to two tab rows */
	}
}
@media (prefers-reduced-transparency: reduce) { .menu { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* Plates: images as physical objects. Large plates for leads and covers, small for the shelf. */
.plate { display: block; position: relative; overflow: hidden; border-radius: var(--r-sm); background: var(--lift); transition: transform 0.46s var(--spring); }
.plate-lg { border-radius: var(--r-lg); }
.plate::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--ring); pointer-events: none; }
.plate img { width: 100%; }
/* Press: the plate gives under the finger at once and springs back on release. */
.lead:active .plate, .shelf li:active .plate, .pager a:active .plate { transform: scale(0.97); transition: transform 0.1s ease-out; }

/* Home */
.intro { padding-block: 2.5rem 2.5rem; }
.intro h1 { font-size: clamp(2.25rem, 1.3rem + 3.8vw, 4.25rem); font-weight: 700; line-height: 1; letter-spacing: -0.04em; max-width: 13ch; text-wrap: balance; }
.launch { margin-top: 1rem; color: var(--muted); font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); line-height: 1.4; letter-spacing: -0.005em; }

.lead { position: relative; display: grid; gap: 1.5rem; }
.lead-title { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
.lead-title a { text-decoration: none; }
.lead-title a::after { content: ""; position: absolute; inset: 0; } /* stretched link: the whole lead is the target */
.lead .dek { margin-top: 0.875rem; }
.lead .meta { margin-top: 1.25rem; }
@media (min-width: 56rem) {
	.intro { padding-block: 5rem 3.5rem; }
	.lead { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 2.5rem; align-items: end; }
	.lead-type { grid-template-columns: minmax(0, 1fr); }
	.lead-type .lead-title { max-width: 18ch; font-size: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
}

.archive { margin-top: 5rem; }
.archive .section-title { margin-bottom: 1.5rem; }
.shelf { list-style: none; display: grid; gap: 1.5rem; }
.shelf li { position: relative; display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; align-items: start; align-content: start; }
.shelf-title { font-size: 1.0625rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }
.shelf-title a { text-decoration: none; }
.shelf-title a::after { content: ""; position: absolute; inset: 0; }
.shelf .meta { margin-top: 0.5rem; font-size: 0.8125rem; letter-spacing: 0.015em; }
.empty { padding-block: 1.5rem; color: var(--muted); }
@media (min-width: 48rem) {
	.archive { margin-top: 7rem; }
	.shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
	.shelf li { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
	.shelf-title { font-size: 1.1875rem; letter-spacing: -0.012em; }
}
@media (min-width: 64rem) { .shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Story: a centred reading column; the cover plate breaks out wider. */
.story-head, .story .prose, .story .corrections, .story .sources, .story .follow, .cover figcaption { max-width: var(--col); margin-inline: auto; }
.story-head, .page { padding-top: clamp(2rem, 1rem + 4vw, 4.5rem); }
.page .display { max-width: 20ch; }
.story-head .dek, .page .dek { margin-top: 1.25rem; }
.story-head .meta { margin-top: 1.5rem; }
.meta a { color: inherit; text-decoration-color: currentColor; }
.cover { max-width: var(--wide); margin: 2.5rem auto 0; }
.cover figcaption { margin-top: 0.75rem; font-size: 0.8125rem; line-height: 1.4; letter-spacing: 0.015em; color: var(--muted); }
@media (max-width: 47.99rem) {
	.cover .plate { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; } /* phones: edge to edge */
	.cover .plate::after { box-shadow: none; }
}

.prose { max-width: var(--col); margin-top: 2.5rem; }
/* A long URL or handle breaks rather than pushing the page sideways at 320px (QA). Not on table cells: there it would
   let the browser squeeze a column into broken words. */
.prose :is(p, li, blockquote, h2, h3) { overflow-wrap: anywhere; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2.25em; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.02em; }
.prose strong { font-weight: 700; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: 0.4em; }
.prose blockquote { padding: 1rem 1.25rem; border-radius: var(--r-sm); background: var(--lift); box-shadow: inset 0 0 0 1px var(--ring); }
/* Tables in story text are the editor's time and price breakdowns: set as a Lift panel, like the front-matter breakdowns. */
.prose table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: var(--r-lg); background: var(--lift); box-shadow: inset 0 0 0 1px var(--ring); font-size: 0.875rem; line-height: 1.4; font-variant-numeric: tabular-nums; hyphens: auto; }
.prose th, .prose td { padding: 0.625rem 0.5rem; text-align: left; vertical-align: top; }
.prose tr + tr > td, .prose thead + tbody tr:first-child > td { box-shadow: inset 0 1px 0 var(--ring); }
.prose th { padding-block: 0.875rem 0.5rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.015em; color: var(--muted); }
.prose td:first-child { font-weight: 600; }
.prose td + td { font-weight: 600; }
.prose th:first-child, .prose td:first-child { padding-left: 0.75rem; }
.prose th:last-child, .prose td:last-child { padding-right: 0.75rem; }
@media (min-width: 30rem) { .prose table { font-size: 0.9375rem; } .prose th, .prose td { padding-inline: 1rem; } .prose th:first-child, .prose td:first-child { padding-left: 1.25rem; } .prose th:last-child, .prose td:last-child { padding-right: 1.25rem; } }
.prose a, .sources a, .corrections a, .page p a, .follow a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.prose a:hover, .sources a:hover, .corrections a:hover, .page p a:hover, .follow a:hover { text-decoration-color: currentColor; }

.sources { margin-top: 4rem; padding: 0 1.25rem; border-radius: var(--r-lg); background: var(--lift); box-shadow: inset 0 0 0 1px var(--ring); }
.sources-label { font-size: 1rem; font-weight: 700; letter-spacing: -0.005em; }
/* Sources is a <details>, closed by default: the summary row works like the map key rows. */
.sources summary { display: grid; grid-template-columns: minmax(0, 1fr) 1rem; column-gap: 0.75rem; align-items: center; min-height: 3.25rem; cursor: pointer; list-style: none; }
.sources summary::-webkit-details-marker { display: none; }
.sources summary:active { opacity: 0.6; }
.sources[open] ol { padding-bottom: 1.5rem; }
.sources ol { padding-left: 1.5em; font-size: 0.9375rem; line-height: 1.5; letter-spacing: 0.005em; }
.sources li::marker { color: var(--muted); font-variant-numeric: tabular-nums; }
.sources li + li { margin-top: 0.5rem; }

/* Corrections: dated notes at the foot of the story, before Sources. */
.corrections { margin-top: 3rem; }
.corrections h2 { font-size: 1rem; font-weight: 700; letter-spacing: -0.005em; margin-bottom: 0.75rem; }
.corrections ul { list-style: none; font-size: 0.9375rem; line-height: 1.5; letter-spacing: 0.005em; }
.corrections li + li { margin-top: 0.75rem; }
.corrections time { display: block; font-size: 0.8125rem; letter-spacing: 0.015em; color: var(--muted); }

.follow { margin-top: 1.5rem; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; }
.follow a { display: inline-block; padding-block: 0.375rem; text-decoration-line: none; }
.follow a:hover { text-decoration-line: underline; }

.pager { display: grid; gap: 1.5rem; max-width: var(--wide); margin: 5rem auto 0; }
.pager a { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; align-items: center; text-decoration: none; }
.pager-text { display: grid; gap: 0.125rem; }
.pager .label { font-size: 0.8125rem; letter-spacing: 0.015em; color: var(--muted); }
.pager-title { margin-top: 0.25rem; font-size: 1.0625rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }
@media (min-width: 48rem) {
	.pager { grid-template-columns: 1fr 1fr; column-gap: 2rem; }
	.pager a { grid-template-columns: 11rem minmax(0, 1fr); }
	.pager-next { grid-column: 2; }
}

.page section { margin-top: 3rem; }
.page > p:not(.dek) { margin-top: 1.5rem; }
.page .section-label { margin-bottom: 1rem; }
.page .shelf { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.handles { list-style: none; max-width: 32rem; border-radius: var(--r-lg); background: var(--lift); box-shadow: inset 0 0 0 1px var(--ring); padding-inline: 1.25rem; }
.handles li { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.75rem; }
.handles li + li { box-shadow: 0 -1px 0 var(--ring); }
.handles a { text-decoration: none; }
.handles a:hover { text-decoration: underline; }

.footer { margin-top: 7rem; padding-block: 2.5rem 3.5rem; font-size: 0.875rem; line-height: 1.5; letter-spacing: 0.01em; color: var(--muted); }
.accounts { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin-bottom: 1.5rem; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; }
.accounts a { display: inline-block; padding-block: 0.375rem; color: var(--fg); text-decoration: none; }
.accounts a:hover { text-decoration: underline; }
.footer p + p { margin-top: 0.25rem; }
.legal { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }

@media (prefers-reduced-transparency: reduce) {
	.masthead { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
	.plate, .lead:active .plate, .shelf li:active .plate, .pager a:active .plate { transform: none; transition: none; }
	.lead:active .plate, .shelf li:active .plate, .pager a:active .plate { opacity: 0.8; } /* press still answers, without movement */
}

/* Breakdowns: every major time zone or market as a set of tiles (front matter `times:` / `prices:`). */
.breakdown { max-width: var(--col); margin: 2.5rem auto 0; padding: 1.25rem; border-radius: var(--r-lg); background: var(--lift); box-shadow: inset 0 0 0 1px var(--ring); }
.breakdown + .breakdown { margin-top: 1rem; }
.breakdown-title { font-size: 1.25rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; }
.breakdown-status { margin-top: 0.375rem; font-size: 0.875rem; font-weight: 600; line-height: 1.4; letter-spacing: 0.005em; }
.breakdown-confirmed, .breakdown-midnight-local { color: var(--muted); }
.breakdown-note { margin-top: 0.5rem; font-size: 0.9375rem; line-height: 1.45; color: var(--muted); }
.tiles { display: grid; margin-top: 1rem; font-variant-numeric: tabular-nums; }
.tiles > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: baseline; padding-block: 0.625rem; }
.tiles > div + div { box-shadow: 0 -1px 0 var(--ring); }
.tiles dt { font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }
.tiles dd { margin: 0; text-align: right; }
.tile-main { font-size: 1.125rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.tile-sub { grid-column: 2; font-size: 0.8125rem; line-height: 1.4; letter-spacing: 0.015em; color: var(--muted); }
.tile-sub span { margin-left: 0.375rem; }
.tile-empty .tile-main { font-size: 0.9375rem; font-weight: 400; color: var(--muted); }
.breakdown-source { margin-top: 1rem; font-size: 0.8125rem; line-height: 1.45; letter-spacing: 0.015em; color: var(--muted); }
.breakdown-source a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }
@media (min-width: 30rem) {
	.breakdown { padding: 1.5rem; }
	.tiles { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.5rem; }
	.tiles > div { display: block; padding: 0.75rem 0.875rem 0.875rem; border-radius: var(--r-sm); background: var(--bg); }
	.tiles > div + div { box-shadow: none; }
	.tiles dt { font-size: 0.8125rem; letter-spacing: 0.01em; color: var(--muted); }
	.tiles dd { text-align: left; }
	.tile-main { margin-top: 0.25rem; font-size: 1.5rem; letter-spacing: -0.02em; }
	.tile-sub { margin-top: 0.125rem; }
	.tile-sub span { display: block; margin-left: 0; }
}
@media (prefers-contrast: more) { .tiles > div { box-shadow: inset 0 0 0 1px var(--fg); } }
/* Stories without an image: the text takes the full row. */
.shelf li > .shelf-text:first-child, .pager a > .pager-text:first-child { grid-column: 1 / -1; }

/* Map v2 (/map/): our own coarse drawing in one SVG, panned and zoomed by /js/map.js; without it, a static diagram.
   Pins (region names, place marks) are counter-scaled by --s so they stay the same size on screen at any zoom. */
.map-page { --map-sea: color-mix(in srgb, var(--accent) 11%, var(--bg)); --map-dot: color-mix(in srgb, var(--accent) 30%, var(--bg)); --map-land: var(--lift); --map-zone: color-mix(in srgb, var(--fg) 6%, var(--lift)); --map-active: color-mix(in srgb, var(--accent) 26%, var(--lift)); }
.map-page .dek { max-width: var(--col); }
.lmap { max-width: var(--wide); margin-top: 2rem; }
.lmap-stage { position: relative; overflow: hidden; height: clamp(22rem, 68vh, 46rem); border-radius: var(--r-lg); background: var(--map-sea); box-shadow: inset 0 0 0 1px var(--ring); }
.lmap-layer, .lmap-art { display: block; width: 100%; height: 100%; }
.lmap-art { overflow: visible; } /* the sea and its dots run past the 1000-unit square to the stage edges */
.lmap.is-live .lmap-stage { touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.lmap.is-live.is-dragging .lmap-stage { cursor: grabbing; }
.lmap.is-live .lmap-layer { position: absolute; top: 0; left: 0; width: 1000px; height: 1000px; transform-origin: 0 0; }
.lmap-sea { fill: var(--map-sea); }
.lmap-sea-dots { fill: url(#lmap-dots); }
.lmap-dot { fill: var(--map-dot); }
.lmap-land { fill: var(--map-land); }
.lmap-region { fill: var(--map-zone); stroke: var(--rule); stroke-width: 1.5; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; transition: fill 0.2s ease; cursor: pointer; }
.lmap-islands { fill: var(--map-land); stroke: var(--fg); stroke-width: 1.25; stroke-dasharray: none; }
.lmap-region.is-active { fill: var(--map-active); }
.lmap-edge { fill: none; stroke: var(--fg); stroke-width: 1.25; vector-effect: non-scaling-stroke; pointer-events: none; }
.lmap-border { fill: none; stroke: var(--fg); stroke-width: 2.5; stroke-dasharray: 10 4 2 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.lmap-art text { fill: var(--fg); font-family: inherit; paint-order: stroke; stroke: var(--lift); stroke-width: 3px; stroke-linejoin: round; }
.lmap-hit { fill: transparent; }
.lmap-mark { fill: var(--fg); stroke: var(--lift); stroke-width: 2px; }
.lmap-place.is-active .lmap-mark { fill: var(--accent); }
.lmap-name text { font-size: 30px; font-weight: 700; letter-spacing: -0.01em; }
.lmap-place text { display: none; } /* static diagram: the dots only; the names are in the list below */
.lmap-place .lmap-mark { r: 8px; }
.lmap a:focus { outline: none; }
.lmap a:focus-visible .lmap-hit { stroke: var(--accent); stroke-width: 2px; }
/* Live: pins keep their screen size (--s is the map's scale); place names appear once zoomed in. */
.lmap.is-live .lmap-pin { transform: scale(calc(1 / var(--s, 1))); }
.lmap.is-live .lmap-name text { font-size: 15px; }
.lmap.is-live .lmap-place .lmap-mark { r: 5px; }
.lmap.is-live .lmap-place text { display: inline; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity 0.2s ease; }
.lmap.is-live.is-near .lmap-place text, .lmap.is-live .lmap-place:focus-visible text, .lmap.is-live .lmap-place.is-active text { opacity: 1; }
.lmap-scale { position: absolute; top: 0.75rem; left: 0.75rem; padding: 0.25rem 0.625rem; border-radius: 999px; background: var(--material); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: inset 0 0 0 1px var(--edge); font-size: 0.75rem; font-weight: 600; line-height: 1.4; letter-spacing: 0.02em; pointer-events: none; }
.lmap-controls { position: absolute; right: 0.75rem; bottom: 0.75rem; display: grid; border-radius: var(--r-sm); overflow: hidden; background: var(--material); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: inset 0 0 0 1px var(--edge); }
.lmap-controls[hidden] { display: none; }
.lmap-controls button, .lmap-close { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; color: var(--fg); font: 600 1.25rem/1 inherit; cursor: pointer; }
.lmap-controls button + button { box-shadow: 0 -1px 0 var(--edge); }
.lmap-controls button:active, .lmap-close:active { opacity: 0.6; }
.lmap-controls button:focus-visible, .lmap-close:focus-visible { outline-offset: -3px; }
/* The label panel: the header's material, rising from the map's lower edge. */
.lmap-panel { position: absolute; left: 0.75rem; bottom: 0.75rem; width: min(22rem, calc(100% - 5rem)); max-height: calc(100% - 4rem); overflow: auto; padding: 1rem 2.75rem 1rem 1rem; border-radius: var(--r-lg); background: var(--material); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: inset 0 0 0 1px var(--edge), 0 0.75rem 2rem rgb(0 0 0 / 0.14); cursor: auto; user-select: text; -webkit-user-select: text; transform-origin: bottom left; transition: opacity 0.18s ease, transform 0.35s var(--spring); }
@starting-style { .lmap-panel:not([hidden]) { opacity: 0; transform: translateY(0.5rem) scale(0.98); } }
.lmap-panel[hidden] { display: none; }
.lmap-close { position: absolute; top: 0.25rem; right: 0.25rem; }
.lmap-panel-body { font-size: 0.9375rem; line-height: 1.5; }
.lmap-panel-body > * + * { margin-top: 0.375rem; }
.lmap-panel-body :is(h3, h4) { font-size: 1.0625rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.lmap-note { max-width: var(--col); margin-top: 1rem; font-size: 0.9375rem; line-height: 1.55; }
.lmap-credit { margin-top: 0.5rem; font-size: 0.8125rem; line-height: 1.45; letter-spacing: 0.015em; color: var(--muted); }
@media (max-width: 47.99rem) { .lmap-stage { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; } .lmap-panel { width: calc(100% - 4.5rem); } }

.sources summary::after { content: ""; grid-column: 3; grid-row: 1 / span 2; justify-self: end; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform 0.2s var(--spring); }
.sources[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.regions li > * + * { margin-top: 0.375rem; }
.map-tag { font-size: 0.875rem; font-weight: 600; line-height: 1.4; letter-spacing: 0.005em; color: var(--muted); }
.map-source { font-size: 0.8125rem; line-height: 1.45; letter-spacing: 0.015em; color: var(--muted); }
.map-source a, .regions a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.map-source a:hover { text-decoration-color: currentColor; }
.regions, .map-page .sources { max-width: var(--col); }
.regions ul { list-style: none; display: grid; gap: 1.5rem; }
.regions h3 { font-size: 1.125rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; }
.regions .region-places { margin-top: 1rem; padding-left: 1rem; box-shadow: inset 2px 0 0 var(--ring); gap: 1rem; }
.region-places h4 { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.map-page .sources { margin-top: 4rem; }
@media (prefers-reduced-motion: reduce) {
	.lmap-region, .lmap.is-live .lmap-place text, .lmap-panel, .sources summary::after { transition: none; }
}
@media (prefers-reduced-transparency: reduce) { .lmap-scale, .lmap-controls, .lmap-panel { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-contrast: more) { .lmap-region { stroke: var(--fg); } }

/* Reactivity (Josh, 2026-11-10; apple-design). CSS only: transform and opacity, plus colour.
   Press: plates already give on pointer-down (scale 0.97, 100ms) and links dim; nothing new needed there.
   Hover: fine pointers only, so a tap never leaves a sticky hover. The image eases forward inside its frame. */
.plate img { transition: transform 0.6s var(--spring); }
@media (hover: hover) and (pointer: fine) {
	.lead:hover .plate img, .shelf li:hover .plate img, .pager a:hover .plate img { transform: scale(1.03); }
	.lead:hover .lead-title a { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.1em; }
	.shelf li:hover .shelf-title a { text-decoration: underline; text-decoration-thickness: 2px; }
	.pager a:hover .pager-title { text-decoration: underline; text-decoration-thickness: 2px; }
	.map-region summary:hover .map-region-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.16em; }
	.map-region summary:hover::after, .sources summary:hover::after { border-color: var(--fg); }
	.sources summary:hover .sources-label { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.16em; }
}
/* Page to page: a cross-document view transition. A story's plate on a card and its cover share a name (css/covers.css),
   so the image grows from the card into the story and shrinks back on Back. The masthead holds still. Browsers without
   support navigate as before. Critically damped spring, no overshoot. */
@view-transition { navigation: auto; }
.masthead { view-transition-name: masthead; }
[data-vt] { view-transition-name: var(--vt, none); }
/* Leaving through the masthead (a tab or the wordmark) isn't about one story: no shared images then, so moving between
   Home and the tabs doesn't send every card flying. Cards fade in place instead. */
:root:has(.masthead:hover, .masthead:focus-within) [data-vt] { view-transition-name: none; }
::view-transition-group(*) { animation-duration: 0.45s; animation-timing-function: var(--spring); }
::view-transition-group(masthead) { z-index: 1; } /* images under the header stay under it mid-transition */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.22s; animation-timing-function: ease; }
/* Map: the opening region's text fades in where it lands (no height animation); closing is instant, so nothing lingers. */
.map-region::details-content, .sources::details-content { opacity: 0; }
.map-region[open]::details-content, .sources[open]::details-content { opacity: 1; transition: opacity 0.22s ease; }
/* Reduced motion: no scale and no movement; page changes are a plain cross-fade (covers.css doesn't load, so no shared image). */
@media (prefers-reduced-motion: reduce) {
	.tabs a::after, .menu, .menu-lines::before, .menu-lines::after { transition: none; }
	.plate img, .lead:hover .plate img, .shelf li:hover .plate img, .pager a:hover .plate img { transform: none; transition: none; }
	::view-transition-group(*) { animation-duration: 0.22s; animation-timing-function: ease; }
	.map-region[open]::details-content, .sources[open]::details-content { transition: none; }
}
.sources summary::after { grid-column: 2; grid-row: 1; } /* Sources has two columns: label, chevron */

/* Story layout (Josh, 2026-11-10). From 64rem: the hero at the full layout width; the story column on the left (42rem,
   prose 40rem, so lines stay under 75 characters) and a 21rem rail on the right with the ad slot (only when ads are on)
   and "Read next", which stays in view while you read. Sources and Follow sit under the column. Below 64rem: one
   centred column, with "Read next" after the story and before Sources. */
.recs { max-width: var(--col); margin: 4rem auto 0; }
.recs-title { margin-bottom: 1.25rem; font-size: 1.0625rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
@media (min-width: 64rem) {
	.story-head { max-width: 48rem; margin-inline: 0; }
	.cover { max-width: none; }
	.cover figcaption { max-width: none; margin-inline: 0; }
	.story-body { display: grid; grid-template-columns: minmax(0, 42rem) 21rem; justify-content: space-between; column-gap: 3rem; }
	.story-main > *, .story .sources, .story .follow { margin-inline: 0; }
	.rail { display: flex; flex-direction: column; gap: 2.5rem; padding-top: 2.5rem; }
	.rail .ad { order: -1; max-width: none; margin: 0; } /* the ad scrolls away at the top; Read next stays */
	.recs { position: sticky; top: 5.5rem; max-width: none; margin: 0; }
	.rail .shelf { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
	.rail .shelf li { grid-template-columns: 7rem minmax(0, 1fr); gap: 0.875rem; }
	.rail .shelf-title { font-size: 0.9375rem; letter-spacing: -0.005em; }
	.rail .shelf .meta { margin-top: 0.375rem; }
	.pager { max-width: none; }
}
/* Inline story images (front matter `images:`): a plate with the credit as a caption under it. */
.prose > .figure { margin-block: 2.25em; }
.figure img { width: 100%; }
.figure figcaption { margin-top: 0.625rem; font-size: 0.8125rem; line-height: 1.4; letter-spacing: 0.015em; color: var(--muted); }
.figure-square { max-width: 24rem; }

/* Topic chips under a story's meta line (front matter `tags:`): each links to /tags/<slug>/. Press dims at once; on fine
   pointers a chip lifts to the Lift tint. No tier is ever shown. */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.chips a { display: inline-flex; align-items: center; min-height: 2rem; padding: 0 0.75rem; border-radius: 999px; background: var(--lift); box-shadow: inset 0 0 0 1px var(--ring); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; color: var(--fg); transition: background-color 0.15s ease; }
.chips a:active { opacity: 0.6; }
@media (hover: hover) and (pointer: fine) { .chips a:hover { background: color-mix(in srgb, var(--accent) 12%, var(--lift)); } }
@media (prefers-reduced-motion: reduce) { .chips a { transition: none; } }
@media (prefers-contrast: more) { .chips a { box-shadow: inset 0 0 0 1px var(--fg); } }

/* Launch countdown bar, just under the header (Josh). One fixed height in every state (static line, ticking time and
   explainer, or "out"), so nothing moves. Text only: no animation. */
/* The countdown only takes the Vice City sunset look (Josh): dusk blue into plum into deep magenta, with a hot pink to amber edge.
   Hues sampled from Rockstar's own GTA VI images (the collector's box backdrop pink #E568A1, the dusk sky violet #8066A8, the plum
   #5E1F43, the sunset amber #D89C70), then darkened where text sits so it stays AA. The palette lives here once, as variables.
   No logo, wordmark, font or key-art shape: a colour gradient and our own type. The rest of the site keeps its own colours. */
:root { --gta-dusk: #1b1740; --gta-plum: #5e1f43; --gta-magenta: #a12a64; --gta-pink: #e568a1; --gta-amber: #f0b070; --gta-text: #ffffff; --gta-text-soft: #f6dcea; }
.countdown { display: flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0.375rem var(--gutter); background: linear-gradient(90deg, var(--gta-dusk), var(--gta-plum) 55%, var(--gta-magenta)); color: var(--gta-text); border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, var(--gta-pink), var(--gta-amber)) 1; text-align: center; }
.countdown[hidden] { display: none; }
.countdown p { font-size: 0.875rem; line-height: 1.35; letter-spacing: 0.005em; font-variant-numeric: tabular-nums; }
.cd-static, .cd-time { font-weight: 600; }
.cd-live { display: grid; gap: 0.125rem; }
.cd-note { font-size: 0.75rem; font-weight: 400; color: var(--gta-text-soft); letter-spacing: 0.015em; }
.countdown.is-live .cd-static { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* the static sentence stays for screen readers */
.cd-note:empty { display: none; }
@media (prefers-contrast: more) { .countdown { background: var(--gta-dusk); border-image: none; border-bottom-color: var(--gta-text); } .cd-note { color: var(--gta-text); } }

/* Search link in the header (right-hand end; beside Menu on phones). */
.search-link { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-left: auto; border-radius: var(--r-sm); color: var(--muted); }
.search-link:active { opacity: 0.6; }
.search-link[aria-current="page"] { color: var(--fg); }
@media (hover: hover) and (pointer: fine) { .search-link:hover { color: var(--fg); } }
.search-link + .menu-button { margin-left: 0; }
.masthead-in .search-link { margin-right: -0.625rem; }
@media (max-width: 47.99rem) { .search-link { margin-right: 0; } }

/* Search page: Pagefind's own UI, in our tokens. */
.search-box { margin-top: 2rem; max-width: var(--col); --pagefind-ui-scale: 1; --pagefind-ui-primary: var(--accent); --pagefind-ui-text: var(--fg); --pagefind-ui-background: var(--lift); --pagefind-ui-border: var(--rule); --pagefind-ui-tag: var(--rule); --pagefind-ui-border-width: 1px; --pagefind-ui-border-radius: 12px; --pagefind-ui-font: "Instrument Sans", system-ui, sans-serif; }
.search-box .pagefind-ui__search-input { font-weight: 600; }
.search-box .pagefind-ui__result-link { color: var(--fg); font-weight: 700; }
.search-box mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; }

/* Generated: each story image's view-transition name (site.css decides which plates carry it). Reduced motion gets none,
   so page changes there are a plain cross-fade. */
@media (prefers-reduced-motion: no-preference) {
	[data-vt="leonida-map-explained"] { --vt: c-leonida-map-explained; }
	[data-vt="gta-vi-characters"] { --vt: c-gta-vi-characters; }
	[data-vt="gta-vi-preload-and-unlock-times"] { --vt: c-gta-vi-preload-and-unlock-times; }
	[data-vt="gta-vi-price-and-editions"] { --vt: c-gta-vi-price-and-editions; }
	[data-vt="gta-vi-what-we-dont-know"] { --vt: c-gta-vi-what-we-dont-know; }
	[data-vt="gta-vi-trailer-timeline"] { --vt: c-gta-vi-trailer-timeline; }
	[data-vt="gta-vi-ratings-explained"] { --vt: c-gta-vi-ratings-explained; }
	[data-vt="take-two-earnings-plain-numbers"] { --vt: c-take-two-earnings-plain-numbers; }
	[data-vt="gta-vi-weather-and-wildlife"] { --vt: c-gta-vi-weather-and-wildlife; }
	[data-vt="gta-vi-goodtime-state-collection"] { --vt: c-gta-vi-goodtime-state-collection; }
	[data-vt="gta-vi-music"] { --vt: c-gta-vi-music; }
	[data-vt="a-night-in-vice-city"] { --vt: c-a-night-in-vice-city; }
	[data-vt="gta-vi-twitch-category"] { --vt: c-gta-vi-twitch-category; }
	[data-vt="gta-vi-law-enforcement-agencies"] { --vt: c-gta-vi-law-enforcement-agencies; }
	[data-vt="gta-vi-spoiler-policy-streamers"] { --vt: c-gta-vi-spoiler-policy-streamers; }
	[data-vt="gta-vi-55-trophies"] { --vt: c-gta-vi-55-trophies; }
	[data-vt="gta-vi-review-date-november-18"] { --vt: c-gta-vi-review-date-november-18; }
	[data-vt="gta-vi-brooklyn-mural-tagged"] { --vt: c-gta-vi-brooklyn-mural-tagged; }
	[data-vt="police-gta-vi-arrest-video"] { --vt: c-police-gta-vi-arrest-video; }
	[data-vt="selfridges-gta-vi-london"] { --vt: c-selfridges-gta-vi-london; }
	[data-vt="gta-vi-brands"] { --vt: c-gta-vi-brands; }
	[data-vt="gta-vi-pre-order-records"] { --vt: c-gta-vi-pre-order-records; }
	[data-vt="gta-vi-ps5-pro-30-fps"] { --vt: c-gta-vi-ps5-pro-30-fps; }
	[data-vt="gta-vi-everything-we-know"] { --vt: c-gta-vi-everything-we-know; }
}