:root {
  --color-paper: #f3eee5;
  --color-paper-light: #fffaf2;
  --color-paper-deep: #e5dacb;
  --color-ink: #201e1a;
  --color-ink-muted: #6f695f;
  --color-ink-faint: #938b80;
  --color-border: #cbbfaf;
  --color-border-strong: #9b8d7e;
  --color-orange: #b6492b;
  --color-orange-deep: #8f351f;
  --color-orange-wash: #f3d9ca;
  --color-focus: var(--color-orange);
  --font-display: Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --type-display: clamp(2.75rem, 8vw, 7rem);
  --type-page: clamp(2.5rem, 6vw, 5.5rem);
  --type-section: clamp(1.85rem, 3.6vw, 3.25rem);
  --type-subsection: clamp(1.35rem, 2.4vw, 1.75rem);
  --type-body-large: clamp(1.125rem, 1.5vw, 1.375rem);
  --type-body: 1rem;
  --type-small: 0.875rem;
  --type-label: 0.75rem;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-display: 0.98;
  --leading-tight: 1.12;
  --leading-body: 1.65;
  --leading-small: 1.45;
  --tracking-display: -0.03em;
  --tracking-label: 0.1em;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-page: clamp(4rem, 8vw, 8rem);
  --space-section: clamp(3rem, 6vw, 6rem);
  --layout-max: 76rem;
  --layout-reading: 46rem;
  --layout-narrow: 36rem;
  --layout-gutter: clamp(1rem, 3vw, 3rem);
  --layout-grid-gap: clamp(1.5rem, 4vw, 4rem);
  --layout-header-min: 5rem;
  --touch-target: 2.75rem;
  --border-thin: 1px;
  --border-thick: 2px;
  --border-style: solid;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --motion-duration-micro: 120ms;
  --motion-duration-standard: 220ms;
  --motion-ease: ease-out;
  --motion-press-scale: 0.98;
  --motion-lift: -2px;
  --motion-skip-offset: -200%;
  --motion-none: 0ms;
  --focus-width: 3px;
  --focus-offset: 4px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
}

a { color: var(--color-orange-deep); text-decoration-thickness: var(--border-thin); text-underline-offset: var(--space-1); }
a:hover { color: var(--color-orange); }
a:active { color: var(--color-orange-deep); }

:focus-visible { outline: var(--focus-width) var(--border-style) var(--color-focus); outline-offset: var(--focus-offset); }

h1, h2, h3, p { margin-block: 0; overflow-wrap: anywhere; }
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--weight-bold); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); }
h1 { font-size: var(--type-page); }
h2 { font-size: var(--type-section); }
h3 { font-size: var(--type-subsection); }
p + p { margin-block-start: var(--space-5); }

.page-shell { width: min(calc(100% - (var(--layout-gutter) * 2)), var(--layout-max)); margin-inline: auto; min-width: 0; }

.skip-link {
  position: fixed;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  z-index: 10;
  padding: var(--space-2) var(--space-3);
  background: var(--color-paper-light);
  border: var(--border-thick) var(--border-style) var(--color-orange);
  color: var(--color-ink);
  transform: translateY(var(--motion-skip-offset));
}

.skip-link:focus { transform: translateY(0); }

.site-header { border-block-end: var(--border-thin) var(--border-style) var(--color-border); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); min-block-size: var(--layout-header-min); padding-block: var(--space-3); }
.brand { color: var(--color-ink); font-family: var(--font-display); font-size: var(--type-subsection); font-weight: var(--weight-bold); letter-spacing: var(--tracking-display); text-decoration: none; }
.brand:hover { color: var(--color-orange-deep); }

.nav-list, .footer-list { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0; padding: 0; list-style: none; }
.nav-list a, .footer-list a { display: inline-flex; align-items: center; min-block-size: var(--touch-target); color: var(--color-ink); font-size: var(--type-small); font-weight: var(--weight-medium); text-decoration: none; }
.nav-list a:hover, .footer-list a:hover { color: var(--color-orange); }
.nav-list a[aria-current="page"] { border-block-end: var(--border-thick) var(--border-style) var(--color-orange); color: var(--color-orange-deep); }

.hero { padding-block: var(--space-page); }
.eyebrow, .card-kicker { color: var(--color-ink-muted); font-size: var(--type-label); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); line-height: var(--leading-small); text-transform: uppercase; }
.hero h1 { max-inline-size: 14ch; margin-block-start: var(--space-4); font-size: var(--type-display); line-height: var(--leading-display); }
.hero-lead, .section-lead { max-inline-size: var(--layout-narrow); font-size: var(--type-body-large); }
.hero-lead { margin-block-start: var(--space-8); }

.section-divider { border-block-start: var(--border-thin) var(--border-style) var(--color-border); padding-block: var(--space-section); }
.section-heading { display: grid; gap: var(--space-3); margin-block-end: var(--space-8); }
.friction-card { display: grid; gap: var(--space-4); max-inline-size: var(--layout-reading); padding: var(--space-8); background: var(--color-paper-light); border: var(--border-thin) var(--border-style) var(--color-border); border-inline-start: var(--border-thick) var(--border-style) var(--color-orange); border-radius: var(--radius-lg); color: var(--color-ink); text-decoration: none; transition: background-color var(--motion-duration-standard) var(--motion-ease), border-color var(--motion-duration-standard) var(--motion-ease), transform var(--motion-duration-standard) var(--motion-ease); }
.friction-card h3 { max-inline-size: 18ch; }
.friction-card p { max-inline-size: var(--layout-narrow); }
.friction-card:hover { border-color: var(--color-orange); color: var(--color-ink); transform: translateY(var(--motion-lift)); }
.friction-card:active { background: var(--color-orange-wash); transform: scale(var(--motion-press-scale)); }
.card-action { color: var(--color-orange-deep); font-size: var(--type-small); font-weight: var(--weight-semibold); }

.taxi-tool { max-inline-size: var(--layout-reading); padding: var(--space-8); background: var(--color-paper-light); border: var(--border-thin) var(--border-style) var(--color-border); border-inline-start: var(--border-thick) var(--border-style) var(--color-orange); border-radius: var(--radius-lg); }
.taxi-intro { max-inline-size: var(--layout-narrow); }
.taxi-form { display: grid; gap: var(--space-4); margin-block-start: var(--space-8); }
.taxi-field { display: grid; gap: var(--space-2); }
.taxi-field label { color: var(--color-ink-muted); font-size: var(--type-small); font-weight: var(--weight-semibold); }
.taxi-field input { min-block-size: var(--touch-target); inline-size: 100%; padding-inline: var(--space-3); background: var(--color-paper-light); border: var(--border-thin) var(--border-style) var(--color-border-strong); border-radius: var(--radius-sm); color: var(--color-ink); font: inherit; }
.taxi-field input::placeholder { color: var(--color-ink-faint); }
.taxi-field input:focus { border-color: var(--color-orange); }
.taxi-submit { margin-block-start: 0; justify-self: start; }
.taxi-submit:disabled { cursor: wait; opacity: 0.65; }
.taxi-status { min-block-size: var(--space-5); margin-block-start: var(--space-4); color: var(--color-ink-muted); font-size: var(--type-small); }
.taxi-status[data-state="error"] { color: var(--color-orange-deep); }
.taxi-status[data-state="success"] { color: var(--color-ink); }
.taxi-result { margin-block-start: var(--space-6); padding-block-start: var(--space-6); border-block-start: var(--border-thin) var(--border-style) var(--color-border); }
.taxi-fare { margin-block-start: var(--space-2); color: var(--color-orange-deep); font-family: var(--font-display); font-size: var(--type-subsection); font-weight: var(--weight-bold); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); }
.taxi-route { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-4); color: var(--color-ink); font-weight: var(--weight-semibold); }
.taxi-details { display: grid; gap: var(--space-3); margin-block: var(--space-6) 0; }
.taxi-details div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); border-block-start: var(--border-thin) var(--border-style) var(--color-border); padding-block-start: var(--space-3); }
.taxi-details dt { color: var(--color-ink-muted); font-size: var(--type-small); }
.taxi-details dd { margin: 0; color: var(--color-ink); font-size: var(--type-small); font-weight: var(--weight-semibold); }
.taxi-disclaimer { margin-block-start: var(--space-6); color: var(--color-ink-muted); font-size: var(--type-small); }

.editorial-grid { display: grid; gap: var(--layout-grid-gap); }
.editorial-grid > * { min-width: 0; }
.editorial-grid h2 { max-inline-size: 14ch; margin-block: var(--space-3) var(--space-6); }
.observation-list { display: grid; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.observation-list li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-4); border-block-start: var(--border-thin) var(--border-style) var(--color-border); padding-block-start: var(--space-5); }
.observation-list span { color: var(--color-ink-faint); font-size: var(--type-small); font-weight: var(--weight-semibold); }
.observation-list h3 { font-family: var(--font-body); font-size: var(--type-body); letter-spacing: normal; }
.observation-list p { color: var(--color-ink-muted); font-size: var(--type-small); margin-block-start: var(--space-2); }

.callout { max-inline-size: var(--layout-reading); margin-block: var(--space-section); padding: var(--space-8); background: var(--color-paper-light); border: var(--border-thin) var(--border-style) var(--color-border); border-inline-start: var(--border-thick) var(--border-style) var(--color-orange); border-radius: var(--radius-md); }
.callout h2 { margin-block: var(--space-3) var(--space-4); font-size: var(--type-subsection); }

.page-content { padding-block: var(--space-page); }
.page-content > h1 { max-inline-size: 16ch; margin-block: var(--space-4) var(--space-8); }
.reading-flow { max-inline-size: var(--layout-reading); }
.reading-flow h2 { margin-block: var(--space-10) var(--space-3); font-size: var(--type-subsection); }
.reading-flow .callout { margin-block: var(--space-10); }
.error-page { min-block-size: 60vh; }

.button { display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--touch-target); max-inline-size: 100%; margin-block-start: var(--space-8); padding-inline: var(--space-5); background: var(--color-orange); border: var(--border-thin) var(--border-style) var(--color-orange); border-radius: var(--radius-sm); color: var(--color-paper-light); font-size: var(--type-small); font-weight: var(--weight-semibold); text-align: center; text-decoration: none; transition: background-color var(--motion-duration-micro) var(--motion-ease), transform var(--motion-duration-micro) var(--motion-ease); }
.button:hover { background: var(--color-orange-deep); color: var(--color-paper-light); }
.button:active { transform: scale(var(--motion-press-scale)); }

.site-footer { margin-block-start: var(--space-section); background: var(--color-paper-deep); border-block-start: var(--border-thin) var(--border-style) var(--color-border); }
.footer-inner { display: grid; gap: var(--space-6); padding-block: var(--space-12); }
.footer-inner > div p, .footer-meta { color: var(--color-ink-muted); font-size: var(--type-small); margin-block-start: var(--space-2); }

@media (min-width: 48rem) {
  .header-inner { flex-wrap: nowrap; }
  .taxi-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; }
  .editorial-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; }
  .footer-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: end; }
  .footer-meta { grid-column: 1 / -1; }
}

@media (min-width: 80rem) {
  .hero { padding-block: var(--space-page) calc(var(--space-page) + var(--space-8)); }
  .editorial-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: var(--motion-none); animation-iteration-count: 1; transition-duration: var(--motion-none); }
}