/**
 * Country Edition — ported from the live Astro site (src/pages/[country]/index.astro and its
 * components). GENERATED: each component's <style> copied verbatim, every
 * selector prefixed with .ed-page to reproduce Astro's scoped-CSS specificity.
 * Do not restyle here without changing the Astro reference first.
 * Regenerate with: python3 tools/port-css.py edition
 */

/* === 00 Edition bar ==================================================== */
	.ed-page .eb { position: fixed; top: 0; left: 0; right: 0; z-index: 70; color: var(--g-on-dark);
		background: rgba(11, 13, 10, 0.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
		border-bottom: 1px solid rgba(239, 234, 222, 0.12);
		opacity: 0; transform: translateY(-100%); pointer-events: none;
		transition: opacity 0.45s var(--g-e), transform 0.55s var(--g-e); }
	.ed-page .eb.is-on { opacity: 1; transform: none; pointer-events: auto; }
	.ed-page .eb__row { display: flex; align-items: center; gap: 28px; padding-top: 12px; padding-bottom: 12px; }
	.ed-page .eb__id { display: inline-flex; gap: 12px; align-items: baseline; text-decoration: none; flex: none; }
	.ed-page .eb__code { font-size: 10px; letter-spacing: 0.3em; color: var(--g-matcha-lt); }
	.ed-page .eb__title { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; }
	.ed-page .eb__items { list-style: none; margin: 0 auto; padding: 0; display: flex; gap: 26px; min-width: 0; }
	.ed-page .eb__items a { text-decoration: none; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
		color: var(--g-on-dark-2); display: inline-flex; gap: 8px; padding: 4px 0; border-bottom: 1px solid transparent;
		transition: color 0.3s var(--g-e), border-color 0.3s var(--g-e); }
	.ed-page .eb__items a b { font-weight: 400; color: var(--g-matcha-lt); font-variant-numeric: tabular-nums; }
	.ed-page .eb__items a:hover, .ed-page .eb__items a.is-current { color: var(--g-on-dark); border-bottom-color: currentColor; }
	.ed-page .eb__world { flex: none; display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
		font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--g-on-dark-2); }
	.ed-page .eb__world i { display: block; width: 22px; height: 1px; background: currentColor; }
	.ed-page .eb__world:hover { color: var(--g-on-dark); }
	@media (max-width: 640px) {
		.ed-page .eb__row { gap: 14px; padding-top: 10px; padding-bottom: 10px; }
		.ed-page .eb__title { display: none; }
		/* five entries do not fit a phone: the list scrolls sideways, the last one
		   peeking so the row reads as continuing */
	.ed-page .eb__items { gap: 14px; flex: 1; overflow-x: auto; scrollbar-width: none; margin: 0; }
		.ed-page .eb__items::-webkit-scrollbar { display: none; }
		.ed-page .eb__items li { flex: none; }
		.ed-page .eb__items a { font-size: 9px; letter-spacing: 0.16em; white-space: nowrap; }
		.ed-page .eb__items a b { display: none; }
		.ed-page .eb__world i { display: none; }
	}
	@media (prefers-reduced-motion: reduce) { .ed-page .eb { transition: none; } }

/* === 01 Masthead ======================================================= */
	.ed-page .mh { position: relative; min-height: 86vh; overflow: hidden; background: var(--g-dark);
		color: var(--g-on-dark); display: flex; align-items: flex-end; }
	.ed-page .mh__fig { position: absolute; inset: 0; margin: 0; clip-path: inset(0 0 100% 0);
		transition: clip-path 1.3s var(--g-e); }
	.ed-page .is-in .mh__fig { clip-path: inset(0 0 0 0); }
	.ed-page .mh__fig img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; transform: scale(1.08);
		transition: transform 2.6s var(--g-e); }
	.ed-page .is-in .mh__fig img { transform: none; }
	.ed-page .mh__scrim { position: absolute; inset: 0;
		background: linear-gradient(180deg, rgba(8, 11, 8, 0.82) 0%, rgba(8, 11, 8, 0.1) 40%, rgba(8, 11, 8, 0.86) 100%); }

	.ed-page .mh__inner { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 48px; padding-top: 112px; padding-bottom: 56px;
		min-height: 86vh; }
	.ed-page .mh__crumb { grid-column: 1 / -1; margin: 0; display: flex; gap: 12px; font-size: 10px; letter-spacing: 0.26em;
		text-transform: uppercase; color: var(--g-on-dark-2); }
	.ed-page .mh__crumb a { color: var(--g-matcha-lt); text-decoration: none; }
	.ed-page .mh__crumb span:last-child { color: var(--g-on-dark); }

	.ed-page .mh__name { grid-column: 1; grid-row: 3; align-self: end; }
	.ed-page .mh__code { display: block; font-size: 11px; letter-spacing: 0.3em; color: var(--g-matcha-lt); }
	.ed-page .mh__title { margin-top: 12px; font-size: clamp(56px, 11vw, 190px); line-height: 0.9; }
	.ed-page .mh__kicker { margin: 22px 0 0; display: flex; gap: 22px; align-items: baseline; font-size: 11px;
		letter-spacing: 0.22em; text-transform: uppercase; color: var(--g-on-dark-2); }
	.ed-page .mh__intro { margin: 22px 0 0; max-width: 44ch; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.5;
		color: var(--g-on-dark); }

	.ed-page .mh__facts { grid-column: 2; grid-row: 3; align-self: end; margin: 0; min-width: 220px;
		border-top: 1px solid rgba(239, 234, 222, 0.24); }
	.ed-page .mh__facts div { display: flex; justify-content: space-between; gap: 24px; padding: 11px 0;
		border-bottom: 1px solid rgba(239, 234, 222, 0.12); }
	.ed-page .mh__facts dt { font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--g-on-dark-2); }
	.ed-page .mh__facts dd { margin: 0; font-size: 12px; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }

	@media (max-width: 1000px) {
		.ed-page .mh__inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; padding-top: 96px; }
		.ed-page .mh__name { grid-row: 3; }
		.ed-page .mh__facts { grid-column: 1; grid-row: 4; margin-top: 36px; min-width: 0; display: grid;
			grid-template-columns: 1fr 1fr; column-gap: 32px; }
	}
	@media (max-width: 640px) {
		.ed-page .mh, .ed-page .mh__inner { min-height: 92svh; }
		.ed-page .mh__inner { padding-top: 84px; padding-bottom: 40px; }
		.ed-page .mh__title { font-size: clamp(40px, 14.5vw, 72px); }
		.ed-page .mh__kicker { flex-direction: column; gap: 8px; }
		.ed-page .mh__facts { grid-template-columns: 1fr; margin-top: 28px; }
	}
	@media (prefers-reduced-motion: reduce) {
		.ed-page .mh__fig, .ed-page .mh__fig img { clip-path: none; transform: none; transition: none; }
	}

/* === 02 Selection (shared with the World Home) ========================= */
	.ed-page .se { padding-top: 130px; padding-bottom: 140px; }
	.ed-page .se__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
	.ed-page .se__h { margin-top: 26px; }
	.ed-page .se__h span { display: block; }
	.ed-page .se__h span + span { color: var(--g-matcha-lt); }
	.ed-page .se__sub { margin: 22px 0 0; display: flex; gap: 22px; align-items: baseline; font-size: 11px;
		letter-spacing: 0.22em; text-transform: uppercase; color: var(--g-on-dark-2); }
	.ed-page .se__seal { flex: none; width: 150px; color: var(--g-on-dark); }
	.ed-page .se__seal svg { width: 100%; height: auto; display: block; }
	.ed-page .se__seal text { fill: currentColor; font-family: inherit; }
	.ed-page .se__seal textPath { animation: none; }
	.ed-page .se__seal svg > text:first-of-type { transform-origin: 60px 60px; animation: se-turn 40s linear infinite; }
	@keyframes se-turn { to { transform: rotate(360deg); } }

	.ed-page .se__lead { margin-top: 84px; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
		gap: 64px; align-items: center; }
	.ed-page .se__plate { display: block; text-decoration: none; }
	.ed-page .se__fig { display: block; aspect-ratio: 4 / 5; }
	.ed-page .se__fig img { width: 100%; height: 100%; object-fit: cover; }
	.ed-page .se__rank { margin: 0; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
		color: var(--g-matcha-lt); }
	.ed-page .se__name { margin: 18px 0 0; font-weight: 400; letter-spacing: -0.02em; line-height: 1.04;
		font-size: clamp(30px, 3.6vw, 54px); }
	.ed-page .se__name a { text-decoration: none; }
	.ed-page .se__place { margin: 14px 0 0; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
		color: var(--g-on-dark-2); }
	.ed-page .se__score { margin: 40px 0 0; display: flex; align-items: flex-end; gap: 18px; }
	.ed-page .se__score b { font-weight: 400; font-size: clamp(72px, 8vw, 128px); line-height: 0.86;
		letter-spacing: -0.04em; color: var(--g-matcha-lt); font-variant-numeric: tabular-nums; }
	.ed-page .se__score span { font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase;
		color: var(--g-on-dark-2); line-height: 1.7; padding-bottom: 6px; }
	.ed-page .se__score em { font-style: normal; color: var(--g-matcha-lt); }
	.ed-page .se__axes { margin: 38px 0 0; }
	.ed-page .se__axis { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 18px; align-items: center;
		padding: 10px 0; border-bottom: 1px solid var(--g-quiet); }
	.ed-page .se__axis dt { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--g-on-dark-2); }
	.ed-page .se__axis dd { margin: 0; height: 2px; background: var(--g-quiet); }
	.ed-page .se__axis dd i { display: block; height: 100%; width: 0; background: var(--g-matcha-lt);
		transition: width 1.2s var(--g-e) var(--d, 600ms); }
	.ed-page .is-in .se__axis dd i { width: var(--w); }
	.ed-page .se__axis:nth-child(2) dd i { --d: 700ms; } .ed-page .se__axis:nth-child(3) dd i { --d: 800ms; }
	.ed-page .se__axis:nth-child(4) dd i { --d: 900ms; } .ed-page .se__axis:nth-child(5) dd i { --d: 1000ms; }
	.ed-page .se__scale { margin: 14px 0 0; font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase;
		color: rgba(174, 179, 163, 0.7); }

	.ed-page .se__rows { list-style: none; margin: 80px 0 0; padding: 0; border-top: 1px solid var(--g-quiet); }
	.ed-page .se__row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 28px; align-items: center;
		padding: 28px 0; border-bottom: 1px solid var(--g-quiet); text-decoration: none; }
	.ed-page .se__row-n { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--g-on-dark-2); }
	.ed-page .se__row-name { display: block; font-size: clamp(22px, 2.4vw, 34px); letter-spacing: -0.015em;
		transition: transform 0.5s var(--g-e); }
	.ed-page .se__row:hover .se__row-name { transform: translateX(8px); }
	.ed-page .se__row-place { display: block; margin-top: 8px; font-size: 10px; letter-spacing: 0.22em;
		text-transform: uppercase; color: var(--g-on-dark-2); }
	.ed-page .se__row-score { display: flex; align-items: baseline; gap: 12px; }
	.ed-page .se__row-score b { font-weight: 400; font-size: 36px; color: var(--g-matcha-lt);
		font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
	.ed-page .se__row-score span { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
		color: var(--g-on-dark-2); }
	.ed-page .se .g-more { margin-top: 56px; }

	@media (max-width: 1000px) {
		.ed-page .se { padding-top: 96px; padding-bottom: 100px; }
		.ed-page .se__lead { grid-template-columns: 1fr; gap: 36px; margin-top: 60px; }
		.ed-page .se__fig { aspect-ratio: 4 / 3; }
		.ed-page .se__seal { width: 116px; }
	}
	@media (max-width: 640px) {
		.ed-page .se { padding-top: 70px; padding-bottom: 76px; }
		.ed-page .se__head { flex-direction: column; align-items: flex-start; gap: 22px; }
		.ed-page .se__seal { width: 96px; align-self: flex-end; margin-top: -30px; }
		.ed-page .se__sub { flex-direction: column; gap: 8px; }
		.ed-page .se__lead { margin-top: 40px; }
		.ed-page .se__plate { margin: 0 calc(var(--g-pad) * -1); }
		.ed-page .se__score { margin-top: 28px; }
		.ed-page .se__axis { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
		.ed-page .se__rows { margin-top: 56px; }
		.ed-page .se__row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 20px 0; }
		.ed-page .se__row-n { grid-column: 1 / -1; }
		.ed-page .se__row-score b { font-size: 30px; }
	}
	@media (prefers-reduced-motion: reduce) {
		.ed-page .se__seal svg > text:first-of-type { animation: none; }
		.ed-page .se__axis dd i { transition: none; width: var(--w); }
	}

/* === 02 Selection board ================================================ */
	.ed-page .sb { margin-top: 64px; }
	/* one grid, declared once, shared by the column heads and every row */
	.ed-page .sb__cols, .ed-page .sb__link { display: grid; grid-template-columns: 96px minmax(0, 3fr) minmax(0, 6fr) 190px;
		column-gap: 36px; }
	.ed-page .sb__cols { padding-bottom: 12px; border-bottom: 1px solid rgba(239, 234, 222, 0.32);
		font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--g-on-dark-2); }
	.ed-page .sb__cols span:last-child { text-align: right; }

	.ed-page .sb__list { list-style: none; margin: 0; padding: 0; }
	.ed-page .sb__row { border-bottom: 1px solid var(--g-quiet); }
	.ed-page .sb__link { align-items: center; padding: 30px 0; text-decoration: none; }

	/* the numeral: the largest thing on the row, and the quietest */
	.ed-page .sb__n { font-size: 84px; line-height: 0.8; letter-spacing: -0.05em; font-variant-numeric: tabular-nums;
		color: rgba(239, 234, 222, 0.34); align-self: start; padding-top: 6px;
		transition: color 0.4s var(--g-e); }
	.ed-page .sb__row--lead .sb__n { color: var(--g-matcha-lt); }
	.ed-page .sb__link:hover .sb__n { color: var(--g-on-dark); }

	.ed-page .sb__fig { display: block; aspect-ratio: 4 / 3; }
	.ed-page .sb__row--lead .sb__fig { aspect-ratio: 5 / 4; }
	.ed-page .sb__fig img { width: 100%; height: 100%; object-fit: cover; }

	.ed-page .sb__body { display: flex; flex-direction: column; gap: 14px; align-self: center; }
	.ed-page .sb__name { font-size: clamp(24px, 2.4vw, 36px); letter-spacing: -0.02em; line-height: 1.05;
		color: var(--g-on-dark); transition: transform 0.5s var(--g-e); }
	.ed-page .sb__row--lead .sb__name { font-size: clamp(28px, 2.9vw, 44px); }
	.ed-page .sb__link:hover .sb__name { transform: translateX(8px); }
	/* the reason: a claim, set in caps, sized between the name and the facts */
	.ed-page .sb__reason { font-size: clamp(14px, 1.25vw, 18px); letter-spacing: 0.06em; text-transform: uppercase;
		line-height: 1.3; color: var(--g-matcha-lt); max-width: 30ch; }
	.ed-page .sb__room { display: flex; flex-wrap: wrap; align-items: baseline; font-size: 10.5px; letter-spacing: 0.2em;
		text-transform: uppercase; color: var(--g-on-dark-2); }
	.ed-page .sb__room i { font-style: normal; margin: 0 10px; opacity: 0.5; }

	.ed-page .sb__score { display: grid; justify-items: end; text-align: right; row-gap: 6px; align-self: center; }
	.ed-page .sb__score b { font-weight: 400; font-size: clamp(44px, 4vw, 60px); line-height: 0.9; letter-spacing: -0.035em;
		color: var(--g-matcha-lt); font-variant-numeric: tabular-nums; }
	.ed-page .sb__row--lead .sb__score b { font-size: clamp(52px, 4.8vw, 72px); }
	.ed-page .sb__score em { font-style: normal; font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase;
		color: var(--g-on-dark); }
	.ed-page .sb__view { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 10px;
		letter-spacing: 0.22em; text-transform: uppercase; color: var(--g-on-dark-2);
		transition: color 0.3s var(--g-e); }
	.ed-page .sb__view i { display: block; width: 22px; height: 1px; background: currentColor; transition: width 0.4s var(--g-e); }
	.ed-page .sb__link:hover .sb__view { color: var(--g-matcha-lt); }
	.ed-page .sb__link:hover .sb__view i { width: 34px; }

	/* the CTA: a headline, a line, and a rule that runs to an arrow. No button. */
	.ed-page .sb__cta { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 10px; padding: 56px 0 8px;
		text-decoration: none; color: var(--g-on-dark); }
	.ed-page .sb__cta-h { font-size: clamp(26px, 3vw, 44px); letter-spacing: -0.02em; line-height: 1; text-transform: uppercase; }
	.ed-page .sb__cta-l { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--g-on-dark-2); }
	.ed-page .sb__cta-l em { font-style: normal; color: var(--g-matcha-lt); }
	.ed-page .sb__cta-rule { display: block; position: relative; height: 1px; margin-top: 18px;
		background: rgba(239, 234, 222, 0.22); }
	.ed-page .sb__cta-rule i { position: absolute; left: 0; top: 0; height: 1px; width: 120px; background: var(--g-matcha-lt);
		transition: width 0.8s var(--g-e); }
	.ed-page .sb__cta-rule i::after { content: ""; position: absolute; right: 0; top: -5px; width: 10px; height: 10px;
		border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg);
		color: var(--g-matcha-lt); }
	.ed-page a.sb__cta:hover .sb__cta-rule i { width: 100%; }
	.ed-page .sb__cta--soon .sb__cta-h { color: var(--g-on-dark-2); }
	.ed-page .sb__cta--soon .sb__cta-rule i { width: 48px; }

	@media (max-width: 1000px) {
		.ed-page .sb__cols, .ed-page .sb__link { grid-template-columns: 64px minmax(0, 4fr) minmax(0, 6fr) 120px; column-gap: 22px; }
		.ed-page .sb__n { font-size: 56px; }
		.ed-page .sb__cols span:nth-child(2) { display: none; }
	}
	@media (max-width: 640px) {
		.ed-page .sb { margin-top: 36px; }
		.ed-page .sb__cols { display: none; }
		/* one compact block per café: rank and score on a line, the photograph
		   full-bleed and short, then name, reason, room. About a screen's half,
		   so the next café's photograph is always in view beneath. */
	.ed-page .sb__link { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto;
			column-gap: 16px; row-gap: 0; padding: 22px 0 26px; align-items: start; }
		.ed-page .sb__n { grid-column: 1; grid-row: 1; font-size: 40px; padding-top: 0; align-self: center; }
		.ed-page .sb__score { grid-column: 2; grid-row: 1; grid-template-columns: auto auto; column-gap: 10px;
			align-items: baseline; justify-items: end; }
		.ed-page .sb__score b, .ed-page .sb__row--lead .sb__score b { font-size: 40px; }
		.ed-page .sb__score em { font-size: 9px; }
		.ed-page .sb__view { display: none; }
		.ed-page .sb__fig, .ed-page .sb__row--lead .sb__fig { grid-column: 1 / -1; grid-row: 2; margin: 16px calc(var(--g-pad) * -1) 0;
			aspect-ratio: 3 / 2; }
		.ed-page .sb__body { grid-column: 1 / -1; grid-row: 3; margin-top: 18px; gap: 8px; }
		.ed-page .sb__name, .ed-page .sb__row--lead .sb__name { font-size: 26px; }
		.ed-page .sb__reason { font-size: 13px; max-width: none; }
		.ed-page .sb__room { font-size: 10px; }
		.ed-page .sb__room i { margin: 0 7px; }
		.ed-page .sb__link:hover .sb__name { transform: none; }
		.ed-page .sb__cta { padding-top: 40px; }
		.ed-page .sb__cta-h { font-size: 24px; }
	}

/* === 03 Explore ======================================================== */
	.ed-page .ex { position: relative; background: var(--g-dark); color: var(--g-on-dark); }
	/* sits below the fixed edition bar (≈52px), not under it */
	.ed-page .ex__head { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; justify-content: space-between;
		align-items: baseline; padding-top: 84px; pointer-events: none; }
	.ed-page .ex__index { color: var(--g-on-dark-2); }
	.ed-page .ex__index b { color: var(--g-matcha-lt); }
	.ed-page .ex__h { margin: 0; font-weight: 400; letter-spacing: -0.025em; line-height: 1; text-transform: uppercase;
		font-size: clamp(22px, 2.4vw, 34px); }

	.ed-page .ex__panels { list-style: none; margin: 0; padding: 0; display: flex; height: 100vh; min-height: 640px; }
	/* every panel starts at an equal share; hover takes 46% and the rest split the remainder */
	.ed-page .ex__panel { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden;
		border-left: 1px solid rgba(244, 241, 232, 0.28); transition: flex-grow 0.7s var(--g-e); }
	.ed-page .ex__panel:first-child { border-left: 0; }
	.ed-page .ex__panels:hover .ex__panel { flex-grow: calc((100 - 46) / (var(--n) - 1)); }
	.ed-page .ex__panels:hover .ex__panel:hover { flex-grow: 46; }
	.ed-page .ex__link { position: absolute; inset: 0; display: block; text-decoration: none; color: inherit; }
	.ed-page .ex__panel--soon .ex__link { cursor: default; }
	.ed-page .ex__fig { position: absolute; inset: 0; display: block; }
	.ed-page .ex__fig img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06);
		transition: transform 1.6s var(--g-e); }
	.ed-page .ex__scrim { position: absolute; inset: 0;
		background: linear-gradient(180deg, rgba(11, 13, 10, 0.45) 0%, rgba(11, 13, 10, 0.12) 45%, rgba(11, 13, 10, 0.72) 100%);
		transition: opacity 0.7s var(--g-e); }
	.ed-page .ex__panel:hover .ex__scrim, .ed-page .ex__panel.is-focus .ex__scrim { opacity: 0.55; }
	.ed-page .ex__panel:hover .ex__fig img, .ed-page .ex__panel.is-focus .ex__fig img { transform: scale(1.0); }

	.ed-page .ex__txt { position: absolute; left: 32px; right: 24px; bottom: 40px; display: flex; flex-direction: column; gap: 16px; }
	.ed-page .ex__name { font-size: clamp(34px, 3.6vw, 58px); line-height: 0.92; letter-spacing: -0.03em; text-transform: uppercase; }
	.ed-page .ex__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px; font-size: 10.5px;
		letter-spacing: 0.22em; text-transform: uppercase; color: var(--g-on-dark-2); }
	.ed-page .ex__fact { color: var(--g-on-dark); }
	.ed-page .ex__go { display: inline-flex; align-items: center; gap: 12px; color: var(--g-matcha-lt); }
	.ed-page .ex__go i { display: block; width: 28px; height: 1px; background: currentColor; transition: width 0.5s var(--g-e); }
	.ed-page .ex__panel:hover .ex__go i { width: 48px; }
	.ed-page .ex__soon { color: var(--g-on-dark-2); border: 1px solid rgba(239, 234, 222, 0.28); padding: 5px 9px; font-size: 9.5px; }

	@media (max-width: 1000px) {
		.ed-page .ex__panels { min-height: 560px; }
		.ed-page .ex__txt { left: 22px; bottom: 30px; }
		.ed-page .ex__name { font-size: 34px; }
	}
	@media (max-width: 640px) {
		/* stacked, each shorter than the screen: the next panel is always in view */
	.ed-page .ex__head { position: relative; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 64px;
			padding-bottom: 28px; }
		.ed-page .ex__panels { flex-direction: column; height: auto; min-height: 0; }
		.ed-page .ex__panel { flex: none; height: 58svh; min-height: 380px; border-left: 0;
			border-top: 1px solid rgba(244, 241, 232, 0.22); }
		.ed-page .ex__panels:hover .ex__panel, .ed-page .ex__panels:hover .ex__panel:hover { flex-grow: 0; }
		.ed-page .ex__txt { left: var(--g-pad); right: var(--g-pad); bottom: 28px; }
		.ed-page .ex__name { font-size: 52px; }
	}
	@media (prefers-reduced-motion: reduce) {
		.ed-page .ex__panel, .ed-page .ex__scrim, .ed-page .ex__fig img, .ed-page .ex__go i { transition: none; }
		.ed-page .ex__fig img { transform: none; }
		.ed-page .ex__panels:hover .ex__panel, .ed-page .ex__panels:hover .ex__panel:hover { flex-grow: 1; }
	}

/* === 04 By place ======================================================= */
	.ed-page .ci { padding-top: 140px; padding-bottom: 0; }
	.ed-page .ci__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px;
		align-items: end; padding-bottom: 72px; }
	.ed-page .ci__head .g-index { grid-column: 1 / -1; margin-bottom: 26px; }
	.ed-page .ci__h { font-size: clamp(40px, 6.4vw, 96px); }
	.ed-page .ci__h span { display: block; }
	.ed-page .ci__h span + span { padding-left: 1.1em; color: var(--g-matcha); }
	.ed-page .ci__lede { margin: 0; max-width: 36ch; font-size: 16px; line-height: 1.6; color: var(--g-ink-2); }

	/* the city feature: one photograph across the whole viewport, the name
	   straddling its bottom edge — half on the picture, half on the paper —
	   then the facts and the way in on the paper below */
	.ed-page .cf { padding: 0 0 130px; }
	.ed-page .cf__fig { display: block; width: 100%; height: 62vh; min-height: 420px; max-height: 720px; }
	.ed-page .cf__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--g-e); }
	.ed-page .cf:hover .cf__fig img { transform: scale(1.02); }
	.ed-page .cf__body { position: relative; }
	.ed-page .cf__name { margin: -0.46em 0 0 -0.04em; font-weight: 400; text-transform: uppercase; line-height: 0.86;
		letter-spacing: -0.04em; font-size: clamp(64px, 11vw, 190px); position: relative; z-index: 2; }
	.ed-page .cf--alt .cf__name { text-align: right; margin-right: -0.04em; }
	.ed-page .cf__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: 64px; align-items: end;
		margin-top: 44px; }
	.ed-page .cf--alt .cf__grid > .cf__txt { order: 2; }
	.ed-page .cf__n { margin: 0; font-size: 11px; letter-spacing: 0.26em; color: var(--g-accent); font-variant-numeric: tabular-nums; }
	.ed-page .cf__copy { margin: 18px 0 0; max-width: 34ch; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; letter-spacing: -0.01em; }
	.ed-page .cf__stats { margin: 0; display: flex; gap: 48px; align-items: flex-end; justify-content: flex-end; }
	.ed-page .cf--alt .cf__stats { justify-content: flex-start; }
	.ed-page .cf__stats div { display: flex; flex-direction: column; }
	.ed-page .cf__stats dd { margin: 0; font-size: clamp(44px, 4.2vw, 64px); line-height: 0.9; letter-spacing: -0.03em;
		font-variant-numeric: tabular-nums; color: var(--g-matcha); }
	.ed-page .cf__stats dt { margin-top: 10px; font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--g-muted); }
	.ed-page .cf__sample { align-self: flex-end; padding-bottom: 2px; }
	.ed-page .cf__go { display: inline-flex; align-items: center; gap: 16px; margin-top: 36px; text-decoration: none;
		font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--g-ink); }
	.ed-page .cf__go i { display: block; width: 56px; height: 1px; background: currentColor; position: relative;
		transition: width 0.5s var(--g-e); }
	.ed-page .cf__go i::after { content: ""; position: absolute; right: 0; top: -5px; width: 10px; height: 10px;
		border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
	.ed-page .cf__go:hover i { width: 84px; }

	@media (max-width: 1000px) {
		.ed-page .ci { padding-top: 100px; }
		.ed-page .ci__head { grid-template-columns: 1fr; row-gap: 26px; padding-bottom: 52px; }
		.ed-page .cf { padding-bottom: 96px; }
		.ed-page .cf__fig { height: 52vh; min-height: 340px; }
		.ed-page .cf__grid { grid-template-columns: 1fr; row-gap: 36px; margin-top: 30px; }
		.ed-page .cf--alt .cf__grid > .cf__txt { order: 0; }
		.ed-page .cf--alt .cf__name { text-align: left; }
		.ed-page .cf__stats, .ed-page .cf--alt .cf__stats { justify-content: flex-start; }
	}
	@media (max-width: 640px) {
		.ed-page .ci { padding-top: 72px; }
		.ed-page .ci__head { padding-bottom: 40px; }
		.ed-page .ci__h span + span { padding-left: 0; }
		.ed-page .ci__lede { font-size: 15px; }
		.ed-page .cf { padding-bottom: 72px; }
		.ed-page .cf__fig { height: 52svh; min-height: 300px; }
		/* the name must fit the frame: about 7 characters at 15vw */
	.ed-page .cf__name { font-size: clamp(48px, 15vw, 72px); margin-top: -0.42em; }
		.ed-page .cf__copy { margin-top: 16px; font-size: 16px; }
		.ed-page .cf__stats { gap: 28px; flex-wrap: wrap; }
		.ed-page .cf__stats dd { font-size: 40px; }
		.ed-page .cf__go { margin-top: 26px; }
	}

/* === 05 Go deeper ====================================================== */
	.ed-page .dc { padding-top: 140px; padding-bottom: 150px; }
	.ed-page .dc__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 72px; align-items: center; }
	.ed-page .dc__stage { position: relative; aspect-ratio: 4 / 5; }
	.ed-page .dc__fig { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 0.7s var(--g-e); }
	.ed-page .dc__fig img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.6s var(--g-e); }
	.ed-page [data-swap-active="0"] .dc__fig[data-i="0"], .ed-page [data-swap-active="1"] .dc__fig[data-i="1"], .ed-page [data-swap-active="2"] .dc__fig[data-i="2"], .ed-page [data-swap-active="3"] .dc__fig[data-i="3"] { opacity: 1; }
	.ed-page [data-swap-active="0"] .dc__fig[data-i="0"] img, .ed-page [data-swap-active="1"] .dc__fig[data-i="1"] img, .ed-page [data-swap-active="2"] .dc__fig[data-i="2"] img, .ed-page [data-swap-active="3"] .dc__fig[data-i="3"] img { transform: none; }
	.ed-page .dc__cap { position: absolute; left: 0; bottom: -30px; margin: 0; font-size: 9.5px; letter-spacing: 0.24em;
		text-transform: uppercase; color: var(--g-on-dark-2); }

	.ed-page .dc__h { margin: 26px 0 0; font-weight: 400; letter-spacing: -0.025em; line-height: 1; font-size: clamp(34px, 4.4vw, 68px); }
	.ed-page .dc__list { list-style: none; margin: 48px 0 0; padding: 0; border-top: 1px solid rgba(239, 234, 222, 0.24); }
	.ed-page .dc__row { border-bottom: 1px solid rgba(239, 234, 222, 0.12); outline: none; }
	.ed-page .dc__link { display: grid; grid-template-columns: 40px minmax(0, 6fr) minmax(0, 5fr) 56px; column-gap: 28px;
		align-items: baseline; padding: 24px 0; text-decoration: none; color: var(--g-on-dark); cursor: default; }
	.ed-page a.dc__link { cursor: pointer; }
	.ed-page .dc__n { font-size: 11px; letter-spacing: 0.16em; color: var(--g-matcha-lt); font-variant-numeric: tabular-nums; }
	.ed-page .dc__name { font-size: clamp(24px, 2.5vw, 38px); line-height: 1; letter-spacing: -0.03em; text-transform: uppercase;
		color: var(--g-on-dark-2); transition: color 0.4s var(--g-e), transform 0.5s var(--g-e); }
	.ed-page .dc__row.is-on .dc__name { color: var(--g-on-dark); transform: translateX(8px); }
	.ed-page .dc__link--soon .dc__name { color: rgba(239, 234, 222, 0.42); }
	.ed-page .dc__row.is-on .dc__link--soon .dc__name { color: var(--g-on-dark-2); }
	.ed-page .dc__line { font-size: 13.5px; line-height: 1.5; color: var(--g-on-dark-2); max-width: 30ch; }
	.ed-page .dc__arrow i { display: block; width: 30px; height: 1px; background: var(--g-matcha-lt); position: relative; margin-left: auto;
		transition: width 0.5s var(--g-e); }
	.ed-page .dc__arrow i::after { content: ""; position: absolute; right: 0; top: -5px; width: 10px; height: 10px;
		border-top: 1px solid var(--g-matcha-lt); border-right: 1px solid var(--g-matcha-lt); transform: rotate(45deg); }
	.ed-page .dc__row.is-on .dc__arrow i { width: 48px; }
	.ed-page .dc__state { font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--g-on-dark-2); text-align: right; }

	@media (max-width: 1000px) {
		.ed-page .dc { padding-top: 100px; padding-bottom: 110px; }
		.ed-page .dc__grid { grid-template-columns: 1fr; row-gap: 56px; }
		.ed-page .dc__stage { aspect-ratio: 16 / 10; }
		.ed-page .dc__link { grid-template-columns: 32px minmax(0, 1fr) 56px; row-gap: 8px; }
		.ed-page .dc__line { grid-column: 2; }
		.ed-page .dc__arrow, .ed-page .dc__state { grid-column: 3; grid-row: 1; }
	}
	@media (max-width: 640px) {
		.ed-page .dc { padding-top: 72px; padding-bottom: 80px; }
		.ed-page .dc__grid { row-gap: 44px; }
		.ed-page .dc__stage { margin: 0 calc(var(--g-pad) * -1); aspect-ratio: 4 / 3; }
		.ed-page .dc__cap { left: var(--g-pad); bottom: -26px; }
		.ed-page .dc__link { grid-template-columns: 28px minmax(0, 1fr) 44px; column-gap: 12px; padding: 18px 0; }
		.ed-page .dc__name { font-size: 28px; }
		.ed-page .dc__row.is-on .dc__name { transform: none; }
		.ed-page .dc__line { font-size: 13px; }
	}
	@media (prefers-reduced-motion: reduce) { .ed-page .dc__fig, .ed-page .dc__fig img, .ed-page .dc__name, .ed-page .dc__arrow i { transition: none; } .ed-page .dc__fig img { transform: none; } }

/* === 06 Stories ======================================================== */
	.ed-page .st { padding-top: 140px; padding-bottom: 150px; }
	.ed-page .st__head { display: flex; justify-content: space-between; align-items: baseline; }
	.ed-page .st__hint { margin: 0; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--g-muted); }

	.ed-page .st__lead { display: block; margin-top: 48px; text-decoration: none; }
	.ed-page .st__fig { display: block; aspect-ratio: 21 / 9; }
	.ed-page .st__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--g-e); }
	.ed-page .st__lead:hover .st__fig img { transform: scale(1.02); }
	/* the headline rides the photograph's bottom edge, a third on the picture */
	.ed-page .st__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px;
		row-gap: 20px; padding-top: 0; align-items: start; position: relative; }
	.ed-page .st__cat { grid-column: 1 / -1; order: 2; display: flex; gap: 22px; font-size: 10px; letter-spacing: 0.24em;
		text-transform: uppercase; color: var(--g-muted); margin-top: 6px; }
	.ed-page .st__title { grid-column: 1; order: 1; margin-top: -0.55em; font-size: clamp(32px, 4.2vw, 64px); line-height: 1.02;
		letter-spacing: -0.03em; color: var(--g-ink); position: relative; z-index: 2;
		/* the part over the picture stays legible on any photograph */
		text-shadow: 0 0 24px var(--g-paper), 0 0 6px var(--g-paper); }
	.ed-page .st__side { grid-column: 2; order: 3; display: flex; flex-direction: column; gap: 24px; padding-top: 10px; }
	.ed-page .st__ex { font-size: 16px; line-height: 1.6; color: var(--g-ink-2); max-width: 40ch; }
	.ed-page .st__read { display: inline-flex; align-items: center; gap: 14px; font-size: 11px; letter-spacing: 0.22em;
		text-transform: uppercase; color: var(--g-matcha); }
	.ed-page .st__read i { display: block; width: 36px; height: 1px; background: currentColor; transition: width 0.4s var(--g-e); }
	.ed-page .st__lead:hover .st__read i { width: 56px; }

	.ed-page .st__more { list-style: none; margin: 72px 0 0; padding: 0; border-top: 1px solid var(--g-ink); }
	.ed-page .st__row { display: grid; grid-template-columns: 56px minmax(0, 5fr) minmax(0, 6fr); column-gap: 32px; align-items: baseline;
		padding: 26px 0; border-bottom: 1px solid var(--g-hair); text-decoration: none; }
	.ed-page .st__row-n { font-size: 11px; letter-spacing: 0.16em; color: var(--g-accent); font-variant-numeric: tabular-nums; }
	.ed-page .st__row-title { font-size: clamp(20px, 2vw, 28px); letter-spacing: -0.015em; line-height: 1.2; }
	.ed-page .st__row-ex { font-size: 14px; line-height: 1.55; color: var(--g-ink-2); }

	@media (max-width: 1000px) {
		.ed-page .st { padding-top: 100px; padding-bottom: 110px; }
		.ed-page .st__fig { aspect-ratio: 16 / 9; }
		.ed-page .st__grid { grid-template-columns: 1fr; row-gap: 16px; }
		.ed-page .st__title, .ed-page .st__side { grid-column: 1; }
		.ed-page .st__title { margin-top: -0.5em; }
		.ed-page .st__row { grid-template-columns: 40px minmax(0, 1fr); }
		.ed-page .st__row-ex { grid-column: 2; }
	}
	@media (max-width: 640px) {
		.ed-page .st { padding-top: 72px; padding-bottom: 80px; }
		.ed-page .st__head { flex-direction: column; gap: 8px; }
		.ed-page .st__lead { margin-top: 30px; }
		.ed-page .st__fig { margin: 0 calc(var(--g-pad) * -1); aspect-ratio: 4 / 3; }
		.ed-page .st__title { font-size: 32px; margin-top: -0.4em; padding-right: 8px; }
		.ed-page .st__ex { font-size: 15px; }
	}

/* === 07 Keep exploring ================================================= */
	.ed-page .ke { padding-top: 150px; padding-bottom: 120px; }
	.ed-page .ke__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; align-items: end; }
	.ed-page .ke__head .g-index { grid-column: 1 / -1; margin-bottom: 26px; }
	.ed-page .ke__h { margin: 0; font-weight: 400; letter-spacing: -0.025em; line-height: 1; font-size: clamp(34px, 4.4vw, 68px); }
	.ed-page .ke__lede { margin: 0; max-width: 34ch; font-size: 15px; line-height: 1.6; color: var(--g-on-dark-2); }

	/* the stack: no rules, the words themselves are the structure */
	.ed-page .ke__list { list-style: none; margin: 72px 0 0; padding: 0; }
	.ed-page .ke__link { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; align-items: baseline;
		padding: 10px 0; text-decoration: none; color: var(--g-on-dark); }
	.ed-page .ke__name { font-size: clamp(52px, 7.6vw, 128px); line-height: 0.92; letter-spacing: -0.045em; text-transform: uppercase;
		transition: transform 0.6s var(--g-e), color 0.4s var(--g-e); }
	.ed-page .ke__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
	.ed-page .ke__line { font-size: 13px; line-height: 1.5; color: var(--g-on-dark-2); max-width: 30ch; }
	.ed-page .ke__arrow { display: block; width: 48px; height: 1px; background: var(--g-matcha-lt); position: relative; flex: none;
		transition: width 0.5s var(--g-e); }
	.ed-page .ke__arrow::after { content: ""; position: absolute; right: 0; top: -5px; width: 10px; height: 10px;
		border-top: 1px solid var(--g-matcha-lt); border-right: 1px solid var(--g-matcha-lt); transform: rotate(45deg); }
	.ed-page a.ke__link:hover .ke__name { color: var(--g-matcha-lt); transform: translateX(12px); }
	.ed-page a.ke__link:hover .ke__arrow { width: 84px; }
	.ed-page .ke__link--soon .ke__name { color: rgba(239, 234, 222, 0.3); }
	.ed-page .ke__state { flex: none; font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--g-on-dark-2); }

	.ed-page .ke__world { display: inline-flex; align-items: center; gap: 14px; margin-top: 72px; text-decoration: none;
		font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--g-on-dark-2); }
	.ed-page .ke__world i { display: block; width: 28px; height: 1px; background: currentColor; transition: width 0.4s var(--g-e); }
	.ed-page .ke__world:hover { color: var(--g-on-dark); }
	.ed-page .ke__world:hover i { width: 44px; }

	@media (max-width: 1000px) {
		.ed-page .ke { padding-top: 100px; padding-bottom: 90px; }
		.ed-page .ke__head { grid-template-columns: 1fr; row-gap: 22px; }
		.ed-page .ke__list { margin-top: 52px; }
		.ed-page .ke__link { grid-template-columns: 1fr; row-gap: 8px; padding: 14px 0; }
		.ed-page .ke__name { font-size: clamp(44px, 9vw, 96px); }
	}
	@media (max-width: 640px) {
		.ed-page .ke { padding-top: 72px; padding-bottom: 70px; }
		.ed-page .ke__list { margin-top: 40px; }
		.ed-page .ke__name { font-size: 40px; }
		.ed-page .ke__line { font-size: 12.5px; }
		.ed-page a.ke__link:hover .ke__name { transform: none; }
		.ed-page .ke__world { margin-top: 48px; }
	}