/* =============================================================================
   PROJECT SHEMA — the typographic system
   =============================================================================

   Loads after tour.css and before shema.css, so it can retune the type tokens
   both of them already reference. Nothing here restyles a component; it sets
   the faces, the scale, the rhythm and the numerals, and every existing
   component inherits the improvement.

   THE PAIRING
   -----------
   Display  Fraunces — a variable serif with a real optical-size axis. Chosen
            over a neutral display face because this journey is about two
            thousand years of memory: Fraunces carries warmth and an archival
            quality at large sizes, and its opsz axis thickens the hairlines as
            the type gets smaller, so a 14px caption and a 84px headline are the
            same voice rather than the same outline scaled.
   Interface Instrument Sans — a contemporary grotesque with open apertures and
            a generous x-height. It stays quiet under Fraunces and reads
            cleanly at 15px, which is where most of this page actually lives.

   Both are self-hosted, latin-subset, variable. 95 KB for the pair, which is
   less than one of the photographs on the page.

   THE RULE OF TRACKING
   --------------------
   Optical tracking is a curve, not a constant: display sizes are set tight
   (−0.035em) because large type looks loose at default spacing, and small type
   is set open (up to +0.02em) because it looks cramped. The scale below
   encodes that curve rather than leaving it to each component.
   ========================================================================== */

/* =============================================================================
   1. FACES
   ========================================================================== */

@font-face {
	font-family: "Fraunces";
	font-style: normal;
	font-weight: 300 700;      /* one variable file covers the whole range */
	font-display: swap;
	src: url("../fonts/fraunces-latin-var.woff2") format("woff2");
	/* Latin only. The site is English; shipping Cyrillic and Vietnamese would
	   triple the file for glyphs nobody on this page will ever render. */
	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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
	               U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Instrument Sans";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/instrument-sans-latin-var.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
	               U+FEFF, U+FFFD;
}

/* =============================================================================
   2. TOKENS — retuned, not replaced
   The theme already references these two variables everywhere. Redefining them
   here upgrades every component at once instead of touching each one.
   ========================================================================== */

:root {
	--et-font-head: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
	--et-font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* ---- The display scale ------------------------------------------
	   Fluid between a phone and a large desktop. The minimum of each step
	   is deliberately close to the maximum of the step below, so the
	   hierarchy never inverts at an awkward viewport width. */
	--t-d1: clamp(2.875rem, 1.4rem + 6.2vw, 5.5rem);   /* hero            */
	--t-d2: clamp(2rem,     1.25rem + 3.2vw, 3.5rem);  /* section heading */
	--t-d3: clamp(1.5rem,   1.2rem + 1.3vw, 2rem);     /* sub-heading     */
	--t-d4: 1.375rem;                                  /* card heading    */

	/* ---- The text scale ---------------------------------------------- */
	--t-lead: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
	--t-body: 1.0625rem;
	--t-small: .9375rem;
	--t-fine: .8125rem;
	--t-micro: .6875rem;

	/* ---- The tracking curve ------------------------------------------ */
	--t-track-d1: -.038em;
	--t-track-d2: -.03em;
	--t-track-d3: -.022em;
	--t-track-body: -.005em;
	--t-track-caps: .18em;

	/* ---- Vertical rhythm --------------------------------------------- */
	--t-lh-display: 1.02;
	--t-lh-heading: 1.12;
	--t-lh-body: 1.7;

	/* ---- Measure ------------------------------------------------------
	   Prose is capped in characters, not pixels: the comfortable line is
	   65–75 characters whatever the font size happens to be. */
	--t-measure: 68ch;
	--t-measure-tight: 56ch;
}

/* Optical sizing on, everywhere. This is the whole reason for choosing a
   variable serif: hairlines thicken as the type gets smaller, so captions stay
   solid while headlines stay elegant. */
html {
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font-family: var(--et-font-body);
	font-size: var(--t-body);
	line-height: var(--t-lh-body);
	letter-spacing: var(--t-track-body);
	/* Contextual alternates and standard ligatures on; historical forms off. */
	font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* =============================================================================
   3. HEADINGS
   Every heading in the theme routes through --et-font-head, so these rules only
   need to fix the metrics the old system got wrong: line-height that was too
   loose for a serif, and tracking that did not change with size.
   ========================================================================== */

:where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--et-font-head);
	font-weight: 600;
	text-wrap: balance;
}

.thero__title,
.tour__h,
.tcta__inner h2 {
	font-optical-sizing: auto;
}

/* Hero. The largest type on the site, so the tightest tracking and the
   closest leading — at this size default leading opens a visible gap.

   The measure is stated here and restated in shema.css, which owns the final
   size for the tour hero: the tour headline is a three-line composition whose
   longest line is 25 characters, and a measure cut for a shorter headline
   breaks it a fourth time. Kept in step with shema.css deliberately — two
   files disagreeing about the same measure is how a headline silently regains
   a line the next time one of them is edited. */
.thero__title {
	font-size: var(--t-d1);
	line-height: .98;
	letter-spacing: var(--t-track-d1);
	font-weight: 600;
	max-width: 22ch;
}

/* Section headings. */
.tour__h {
	font-size: var(--t-d2);
	line-height: var(--t-lh-display);
	letter-spacing: var(--t-track-d2);
	max-width: 19ch;
}
.tour__h--statement {
	font-size: var(--t-d3);
	line-height: var(--t-lh-heading);
	letter-spacing: var(--t-track-d3);
	max-width: 28ch;
}

.tcta__inner h2 {
	font-size: var(--t-d2);
	line-height: var(--t-lh-display);
	letter-spacing: var(--t-track-d2);
	max-width: 16ch;
	margin-inline: auto;
}

/* Card headings sit at the point where the display face still has authority
   but has to survive two lines in a narrow column. */
.scity__body h3,
.sjmap__title h3,
.tday__route,
.tpillar h3,
.tincl__col h3,
.tbook__title {
	font-family: var(--et-font-head);
	letter-spacing: var(--t-track-d3);
	line-height: var(--t-lh-heading);
}

/* =============================================================================
   4. BODY AND SUPPORTING TEXT
   ========================================================================== */

.tour__sub {
	font-size: var(--t-lead);
	line-height: 1.65;
	letter-spacing: var(--t-track-body);
	max-width: var(--t-measure-tight);
}

.thero__lead {
	font-size: var(--t-lead);
	line-height: 1.6;
	letter-spacing: var(--t-track-body);
	max-width: 44ch;
}

.tabout__prose p,
.tfaq__a p {
	max-width: var(--t-measure);
}

/* Eyebrows and all-caps labels. Caps need extra tracking to read as a label
   rather than as a shouted word, and they need weight to survive it. */
.sh-eyebrow span,
.tour__eyebrow,
.et-eyebrow,
.scity__days,
.sjmap__title p,
.tgal__place,
.sgal__place,
.thero__meta {
	font-family: var(--et-font-body);
	font-weight: 600;
	letter-spacing: var(--t-track-caps);
	text-transform: uppercase;
	font-feature-settings: "kern" 1;
}

/* =============================================================================
   5. NUMERALS
   Tabular figures wherever a number changes or sits in a column. The counters
   in the marker band animate from 0 to their value; with proportional figures
   every digit change shifts the layout a fraction of a pixel and the whole row
   shivers. Tabular figures hold the width still.
   ========================================================================== */

.tmarker__v,
.tbook__amount,
.sgal__counter,
.sj-stop__num,
.sj-stop__days,
.scity__days,
.sjmap__stamp,
.tday__num,
.thero__coords {
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum" 1, "lnum" 1;
}

/* The statistic band. Fraunces at this size is the strongest typographic
   moment on the page after the hero, so it gets the display treatment. */
.tmarker__v {
	font-family: var(--et-font-head);
	font-weight: 600;
	letter-spacing: -.03em;
	line-height: 1;
}

.tbook__amount {
	font-family: var(--et-font-head);
	font-weight: 600;
	letter-spacing: -.03em;
}

/* Monospaced readouts — the hero coordinate block and the gallery counter —
   stay monospaced, but pick up the same tracking discipline. */
.thero__coords,
.sgal__counter,
.sgal__no {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
	letter-spacing: .14em;
}

/* =============================================================================
   6. DETAIL WORK
   ========================================================================== */

/* Quotes hang into the margin so the text edge stays optically straight. */
.tmarkers__quote {
	font-family: var(--et-font-head);
	font-weight: 400;
	letter-spacing: -.02em;
	line-height: 1.25;
	hanging-punctuation: first last;
}

/* An em dash inside a heading should not be able to start a line. */
.tour__h,
.thero__title,
.scity__body h3 { text-wrap: balance; }

/* Links inside prose: a considered underline rather than the browser's. */
.tabout__prose a,
.tfaq__a a {
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	text-decoration-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
	transition: text-decoration-color .3s ease;
}
.tabout__prose a:hover,
.tfaq__a a:hover { text-decoration-color: var(--color-primary); }

/* Small caps for the FAQ questions would be wrong — they are questions, not
   labels — but they do want the display face and tighter leading. */
.tfaq__q {
	font-family: var(--et-font-head);
	font-weight: 600;
	letter-spacing: -.015em;
	line-height: 1.25;
}

/* =============================================================================
   7. FALLBACK METRICS
   Until Fraunces arrives, headings render in Georgia. Georgia runs wider and
   shorter than Fraunces, so the swap visibly reflows. These adjustments bring
   the fallback close enough that the jump is barely perceptible.
   ========================================================================== */

@font-face {
	font-family: "Fraunces Fallback";
	src: local("Georgia"), local("Times New Roman");
	size-adjust: 96%;
	ascent-override: 92%;
	descent-override: 24%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Instrument Sans Fallback";
	src: local("Helvetica Neue"), local("Arial");
	size-adjust: 101%;
	ascent-override: 95%;
	descent-override: 25%;
	line-gap-override: 0%;
}

:root {
	--et-font-head: "Fraunces", "Fraunces Fallback", Georgia, serif;
	--et-font-body: "Instrument Sans", "Instrument Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* The tour layer declares its own serif token; point it at the same face so
   the two stylesheets cannot drift apart. */
.tour,
.shema {
	--t-serif: var(--et-font-head);
}