@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/dm-sans-latin.woff2") format("woff2");
}

@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/dm-serif-display-latin.woff2") format("woff2");
}

@font-face {
  font-family: "DM Serif Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/dm-serif-display-italic-latin.woff2") format("woff2");
}

:root {
  color-scheme: light dark;
  --neutral-primary-soft: #fbf4e7;
  --neutral-tertiary: #f3e8d8;
  --neutral-tertiary-medium: #e2d9c8;
  --heading: #2b1d14;
  --body: #5c4938;
  --body-subtle: #8b6f5b;
  --brand: #c56a3c;
  --brand-medium: #e89971;
  --brand-strong: #9c4f25;
  --brand-soft: #f4d5bf;
  --fg-brand-strong: #9c4f25;
  --border-default: #e2d9c8;
  --border-light: #eaddc6;
  --white: #fff;
  --dark: #2b1d14;
  --hero-surface: var(--brand-strong);
  --shadow-xs: 0 1px 2px 0 rgb(43 29 20 / 0.05);
  --shadow-md: 0 4px 8px -2px rgb(43 29 20 / 0.08), 0 2px 4px -2px rgb(43 29 20 / 0.06);
  --color-1-400: rgb(255 244 231 / 0.3);
  --color-1-700: rgb(43 29 20 / 0.18);
  --font-body: "DM Sans", sans-serif;
  --font-heading: "DM Serif Display", serif;
  --radius-base: 16px;
  --radius-default: 8px;
  --spring-snappy: linear(
    0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%,
    0.938 16.7%, 1.017 19.4%, 1.067 22.5%, 1.089 26%,
    1.079 30.3%, 1.049 36%, 1.024 42.6%, 1.011 50.3%,
    1.004 59.2%, 1.001 69.3%, 1
  );
  --ease-snap: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --neutral-primary-soft: #1f1610;
    --neutral-tertiary: #2b1d14;
    --neutral-tertiary-medium: #3a2818;
    --heading: #fbf4e7;
    --body: #c8b89e;
    --body-subtle: #a89378;
    --brand: #b15a36;
    --brand-medium: #e89971;
    --brand-strong: #9c4f25;
    --brand-soft: #5a2e15;
    --fg-brand-strong: #e89971;
    --border-default: #927e64;
    --border-light: #927e64;
    --dark: #2b1d14;
    --hero-surface: var(--brand-soft);
    --color-1-400: rgb(251 244 231 / 0.1);
    --color-1-700: rgb(0 0 0 / 0.3);
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--neutral-primary-soft);
  color: var(--body);
  font: 17px/1.7 var(--font-body);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading);
  font-family: var(--font-heading);
  font-weight: 400;
}

p,
ul,
ol {
  max-width: 65ch;
}

a {
  color: var(--fg-brand-strong);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration: none;
}

a:focus-visible {
  outline: 4px solid var(--brand-medium);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 20;
  top: 16px;
  left: 16px;
  padding: 10px 18px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-base);
  background: var(--neutral-tertiary);
  color: var(--heading);
  font-weight: 500;
  box-shadow: var(--shadow-xs);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.site-header {
  display: flex;
  min-height: 104px;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 20px max(24px, calc((100vw - 1152px) / 2));
  border-bottom: 1px solid var(--border-default);
  background: var(--neutral-primary-soft);
}

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--heading);
  font: 500 13px/1.3 var(--font-body);
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}

.brand img {
  border-radius: 9999px;
  mix-blend-mode: multiply;
}

.brand b {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.site-header nav,
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.site-header nav a,
.site-footer nav a {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: var(--radius-base);
  color: var(--heading);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 200ms, color 200ms;
}

.site-header nav a:hover,
.site-footer nav a:hover {
  background: var(--neutral-tertiary-medium);
}

.hero {
  position: relative;
  display: grid;
  min-height: calc(100dvh - 104px);
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--border-default);
  background: var(--dark);
}

.hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: calc(100dvh - 104px);
  padding: clamp(48px, 7vh, 80px) max(24px, calc((100vw - 1152px) / 2));
  color: var(--white);
  background:
    linear-gradient(90deg, rgb(43 29 20 / 0.88) 0%, rgb(43 29 20 / 0.56) 52%, rgb(43 29 20 / 0.1) 100%),
    radial-gradient(circle at 78% 26%, rgb(232 153 113 / 0.16), transparent 36%);
}

.hero-copy .eyebrow,
.hero-copy h1,
.hero-copy p {
  color: var(--white);
}

.eyebrow {
  margin: 0;
  color: var(--body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero h1,
.article h1,
.archive h1,
.guide h1 {
  margin: 16px 0 24px;
  font-size: 60px;
  line-height: 1.05;
  letter-spacing: -0.9px;
}

.hero h1 {
  align-self: center;
  width: 100%;
  margin: auto 0;
  color: var(--white);
  font-size: clamp(4.5rem, 10.5vw, 10rem);
  line-height: 0.82;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.hero h1 span,
.hero h1 em {
  display: inline-block;
}

.hero h1 span {
  max-width: 9ch;
}

.hero h1 em {
  color: var(--white);
  font-weight: 400;
}

.hero-support {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
}

.hero-support p {
  max-width: 45ch;
  margin: 0;
  color: var(--white);
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: 1.55;
}

.button {
  align-self: flex-start;
  margin-top: 24px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-base);
  background-color: var(--brand-strong);
  background-image: linear-gradient(to bottom right, var(--brand), var(--brand-strong));
  color: var(--white);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  box-shadow: var(--shadow-xs), inset var(--color-1-400) 0 6px 0 -5px, var(--color-1-700) 0 4px 10px -5px;
  transition: background 200ms, color 200ms;
}

.hero .button {
  flex: 0 0 auto;
  min-height: 48px;
  margin-top: 0;
  padding: 12px 20px;
  border-color: rgb(255 255 255 / 0.38);
  background: rgb(43 29 20 / 0.72);
  transition:
    transform 500ms var(--ease-snap),
    box-shadow 500ms var(--ease-snap),
    background-color 300ms var(--ease-snap);
}

.hero .button:hover {
  transform: translateY(-2px);
  background: var(--brand-strong);
  box-shadow: 0 14px 36px rgb(43 29 20 / 0.28);
}

.hero .button:active {
  transform: translateY(0) scale(0.97);
}

.button:hover {
  background: var(--brand-strong);
  color: var(--white);
}

.hero-visual {
  position: absolute;
  z-index: 1;
  inset: 0;
  margin: 0;
  background: var(--neutral-tertiary);
}

.hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(43 29 20 / 0.08), rgb(43 29 20 / 0.44));
}

.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  filter: saturate(0.74) sepia(0.1);
}

.hero-visual figcaption {
  position: absolute;
  z-index: 2;
  right: 16px;
  bottom: 16px;
  max-width: calc(100% - 32px);
  padding: 8px 12px;
  border-radius: var(--radius-default);
  background: var(--dark);
  color: var(--white);
  font-size: 12px;
}

@keyframes hero-focus {
  from {
    opacity: 0;
    transform: scale(1.035);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.home .hero-visual {
  animation: hero-focus 680ms var(--spring-snappy) both;
}

.home .hero-copy > .eyebrow,
.home .hero h1,
.home .hero-support {
  animation: hero-rise 620ms var(--spring-snappy) both;
}

.home .hero-copy > .eyebrow {
  animation-delay: 80ms;
}

.home .hero h1 {
  animation-delay: 170ms;
}

.home .hero-support {
  animation-delay: 290ms;
}

.route-ledger,
.archive {
  max-width: 1200px;
  margin: auto;
  padding: 80px 24px;
}

.route-ledger > header {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  margin-bottom: 48px;
}

.route-ledger > header h2,
.guide h2 {
  margin: 0;
  font-size: 44px;
  line-height: 1.15;
  letter-spacing: -0.5px;
}

.archive-list,
.route-ledger {
  container-type: inline-size;
}

.route-card {
  display: grid;
  grid-template-columns: 64px minmax(130px, 260px) minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  margin-top: 16px;
  padding: 24px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-base);
  background: var(--neutral-tertiary);
  box-shadow: var(--shadow-xs);
}

.route-card > img {
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: var(--radius-base);
  background: var(--neutral-tertiary-medium);
  object-fit: cover;
}

.route-card h2 {
  margin: 4px 0;
  font-size: 22px;
  line-height: 1.3;
}

.route-card h2 a {
  color: var(--heading);
  text-decoration: none;
}

.route-card h2 a:hover {
  color: var(--fg-brand-strong);
  text-decoration: underline;
}

.route-no {
  color: var(--fg-brand-strong);
  font: 500 13px/1 var(--font-body);
}

.route-card p {
  margin: 4px 0;
  color: var(--body);
}

.article,
.guide {
  max-width: 1152px;
  margin: auto;
  padding: 80px 24px;
}

.article > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 44%);
  align-items: end;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border-light);
}

.article > header h1 {
  grid-column: 1;
}

.article > header .eyebrow,
.article > header .date {
  grid-column: 1;
}

.article-lead {
  grid-row: 1/5;
  grid-column: 2;
  width: 100%;
  aspect-ratio: 4/3;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-base);
  object-fit: cover;
  box-shadow: var(--shadow-md);
}

.prose {
  max-width: 720px;
  margin: 64px auto;
  color: var(--body);
  font: 17px/1.7 var(--font-body);
}

.prose h2,
.prose h3 {
  margin-top: 48px;
  font-family: var(--font-heading);
  line-height: 1.2;
}

.prose h2 {
  font-size: 36px;
}

.prose h3 {
  font-size: 30px;
}

.prose img {
  max-height: 600px;
  margin: 32px auto;
  border-radius: var(--radius-base);
}

.prose li + li {
  margin-top: 8px;
}

.embed-card {
  padding: 24px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-base);
  background: var(--neutral-tertiary);
  box-shadow: var(--shadow-xs);
}

.archive > header {
  max-width: 720px;
  margin-bottom: 48px;
}

.archive > header > p:last-child {
  max-width: 65ch;
  font-size: 20px;
  line-height: 1.7;
}

.guide > header {
  max-width: 720px;
}

.lede {
  max-width: 70ch;
  font-size: 20px;
  line-height: 1.7;
}

.guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin: 64px 0;
}

.guide-grid section {
  padding: 32px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-base);
  background: var(--neutral-tertiary);
  box-shadow: var(--shadow-xs);
}

.guide-grid section:last-child {
  grid-column: 1/-1;
}

.guide-grid span {
  color: var(--fg-brand-strong);
  font: 500 12px var(--font-body);
}

.guide-grid h2 {
  margin: 16px 0;
  font-size: 30px;
}

.sources {
  padding: 32px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-base);
  background: var(--neutral-tertiary);
  color: var(--body);
  box-shadow: var(--shadow-xs);
}

.sources h2 {
  font-size: 30px;
}

.sources a {
  color: var(--fg-brand-strong);
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 48px max(24px, calc((100vw - 1152px) / 2));
  border-top: 1px solid var(--border-default);
  background: var(--neutral-primary-soft);
}

.site-footer > div {
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-footer img {
  border-radius: var(--radius-default);
}

@media (max-width: 767px) {
  .site-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-header nav {
    gap: 0;
  }

  .hero {
    min-height: calc(100dvh - 184px);
  }

  .hero-copy {
    min-height: calc(100dvh - 184px);
    padding-block: 40px 32px;
  }

  .hero h1,
  .article h1,
  .archive h1,
  .guide h1 {
    font-size: 36px;
    line-height: 1.05;
    letter-spacing: -0.3px;
  }

  .hero h1 {
    font-size: clamp(3.6rem, 18vw, 5.25rem);
    line-height: 0.84;
    letter-spacing: -0.05em;
  }

  .hero-support {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
  }

  .hero-support p {
    font-size: 16px;
    line-height: 1.5;
  }

  .hero-visual img {
    object-position: 62% center;
  }

  .hero-copy {
    background:
      linear-gradient(180deg, rgb(43 29 20 / 0.64), rgb(43 29 20 / 0.9)),
      radial-gradient(circle at 70% 20%, rgb(232 153 113 / 0.14), transparent 42%);
  }

  .hero-visual figcaption {
    display: none;
  }

  .route-ledger,
  .archive,
  .article,
  .guide {
    padding-block: 48px;
  }

  .route-ledger > header {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .route-ledger > header h2,
  .guide h2 {
    font-size: 30px;
  }

  .route-card {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    padding: 16px;
  }

  .route-card > img {
    grid-column: 2;
  }

  .route-card h2 {
    font-size: 18px;
  }

  .article > header {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .article-lead {
    grid-row: auto;
    grid-column: 1;
  }

  .prose {
    margin-block: 48px;
  }

  .prose h2 {
    font-size: 30px;
  }

  .prose h3 {
    font-size: 26px;
  }

  .guide-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-block: 48px;
  }

  .guide-grid section:last-child {
    grid-column: auto;
  }

  .site-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }

  .home .hero-visual,
  .home .hero-copy > .eyebrow,
  .home .hero h1,
  .home .hero-support {
    animation: none;
  }

  .hero .button:hover,
  .hero .button:active {
    transform: none;
  }
}

@media (prefers-color-scheme: dark) {
  .site-header nav a,
  .site-footer nav a {
    transition: background-color 200ms;
  }
}