@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;600;700&family=Newsreader:opsz,wght@6..72,500;6..72,700&display=swap');

:root {
  --paper: #f4eedf;
  --paper-light: #fbf7ed;
  --ink: #173f35;
  --red: #c94736;
  --blue: #547987;
  --brass: #b18431;
  --rule: #bfb398;
  --shadow: rgba(45, 38, 24, .16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(23,63,53,.035) 31px 32px),
    var(--paper);
  font-family: Karla, sans-serif;
  line-height: 1.55;
}
a { color: inherit; }
.site-header {
  max-width: 1260px;
  margin: 0 auto;
  padding: 22px clamp(20px, 5vw, 64px) 0;
}
.home-link { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.home-link:hover { color: var(--red); }
.masthead {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-top: 22px;
  padding: 26px 0 20px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.brand { text-decoration: none; }
.brand strong { font: 700 clamp(2.3rem, 6vw, 4.7rem)/.78 Newsreader, Georgia, serif; letter-spacing: -.06em; }
.brand em { color: var(--red); font: italic 500 clamp(2rem, 5vw, 4rem)/1 Newsreader, Georgia, serif; }
.eyebrow { color: var(--red); font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 26px; }
.nav a { border-bottom: 2px solid transparent; font-size: .8rem; font-weight: 700; letter-spacing: .1em; padding: 5px 0; text-decoration: none; text-transform: uppercase; }
.nav a:hover, .nav a[aria-current="page"] { border-color: var(--red); color: var(--red); }
.page { max-width: 1260px; margin: 0 auto; padding: clamp(45px, 7vw, 92px) clamp(20px, 5vw, 64px) 80px; }
h1, h2, h3 { font-family: Newsreader, Georgia, serif; }
h1 { font-size: clamp(2.7rem, 6vw, 5.5rem); letter-spacing: -.055em; line-height: .9; margin: 12px 0 28px; }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -.035em; line-height: 1; }
.lede { font: 500 clamp(1.2rem, 2.2vw, 1.9rem)/1.25 Newsreader, Georgia, serif; max-width: 25ch; }
.overview-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(440px, 1.08fr); gap: clamp(42px, 7vw, 92px); }
.date-row { display: grid; grid-template-columns: 1fr 1fr; border-block: 1px solid var(--rule); margin: 44px 0 34px; padding: 17px 0; }
.date-row div + div { border-left: 1px solid var(--rule); padding-left: 34px; }
.label { color: #716955; display: block; font-size: .7rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.date-row strong { font: 700 1.25rem Newsreader, Georgia, serif; }
.button { background: var(--ink); color: var(--paper-light); display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .12em; padding: 15px 22px; text-decoration: none; text-transform: uppercase; }
.button:hover { background: var(--red); }
.ticket {
  position: relative;
  background: rgba(251,247,237,.74);
  border: 1px solid var(--rule);
  box-shadow: 13px 13px 0 rgba(84,121,135,.12);
  padding: 36px clamp(24px, 4vw, 50px);
}
.ticket::before { content: ''; position: absolute; inset: 0 auto 0 -1px; width: 7px; background: repeating-linear-gradient(to bottom, var(--red) 0 12px, transparent 12px 24px); }
.route-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 42px; list-style: none; margin: 26px 0 0; padding: 0; counter-reset: stop; }
.route-list li { counter-increment: stop; border-bottom: 1px solid rgba(191,179,152,.7); font: 700 1.15rem Newsreader, Georgia, serif; padding: 10px 0; }
.route-list li::before { content: counter(stop, decimal-leading-zero); color: var(--red); display: inline-block; font: 700 .68rem Karla, sans-serif; letter-spacing: .1em; width: 36px; }
.stamp { border: 2px solid var(--blue); border-radius: 50%; color: var(--blue); display: grid; place-items: center; float: right; font-size: .63rem; font-weight: 700; height: 88px; letter-spacing: .12em; margin: 22px 4px 0 20px; text-align: center; text-transform: uppercase; transform: rotate(-9deg); width: 88px; }
.story { border-top: 1px solid var(--rule); margin-top: 62px; padding-top: 38px; }
.story p { max-width: 76ch; }
.countries { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.countries li { border: 1px solid var(--rule); background: rgba(251,247,237,.55); padding: 5px 10px; font-size: .78rem; }

.page-intro { max-width: 780px; margin-bottom: 46px; }
.page-intro h1 { font-size: clamp(3.1rem, 7vw, 6rem); }
.page-intro p { font-size: 1.05rem; max-width: 68ch; }
.journal-index { background: rgba(251,247,237,.72); border: 1px solid var(--rule); display: grid; gap: 4px; margin: 36px 0 56px; padding: clamp(20px, 4vw, 38px); }
.journal-index a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.journal-index a:hover { color: var(--red); }
.legacy-journal > table { width: min(100%, 820px); margin: 0 auto 30px; border-collapse: collapse; }
.legacy-journal > table:not(:first-child) { background: var(--paper-light); border: 1px solid var(--rule); box-shadow: 8px 8px 0 rgba(84,121,135,.08); padding: 0; }
.legacy-journal td.journal { padding: 0 30px 24px; }
.legacy-journal tr:first-child td.journal { color: var(--red); font: 700 1.7rem/1.1 Newsreader, Georgia, serif; padding-top: 28px; }
.legacy-journal tr:nth-child(2) td.journal { font-weight: 700; }
.legacy-journal p { margin: 0 0 1em; }
.legacy-journal .anchor { display: block; scroll-margin-top: 18px; }

.calendar-shell { overflow-x: auto; padding-bottom: 8px; }
.calendar { border-collapse: collapse; min-width: 760px; width: 100%; }
.calendar th { color: #716955; font-size: .7rem; letter-spacing: .12em; padding: 10px 5px; text-align: left; text-transform: uppercase; }
.calendar td { background: rgba(251,247,237,.72); border: 1px solid var(--rule); height: 122px; padding: 10px; vertical-align: top; width: 14.285%; }
.calendar td.empty { background: rgba(23,63,53,.025); }
.day { color: var(--red); font-size: .72rem; font-weight: 700; }
.place { display: block; font: 700 1.03rem/1.14 Newsreader, Georgia, serif; margin-top: 7px; }
.calendar-note { color: #716955; font-size: .8rem; margin-top: 18px; }

.map-card { background: #e7e2d6; border: 1px solid var(--rule); box-shadow: 12px 12px 0 rgba(84,121,135,.13); margin-top: 28px; overflow: hidden; padding: clamp(20px, 4vw, 48px); position: relative; }
.map-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(31deg, transparent 49.7%, rgba(84,121,135,.11) 50%, transparent 50.3%), repeating-linear-gradient(90deg, transparent 0 79px, rgba(23,63,53,.06) 79px 80px); pointer-events: none; }
.map-meta { align-items: start; background: var(--ink); color: var(--paper-light); display: flex; justify-content: space-between; gap: 25px; padding: 16px 20px; position: relative; z-index: 2; }
.map-meta strong { font: 700 1.1rem Newsreader, Georgia, serif; }
.rail-map { display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr)); gap: 34px 16px; list-style: none; margin: 50px 0 20px; padding: 0; position: relative; z-index: 1; }
.rail-map::before { content: ''; position: absolute; left: 6%; right: 6%; top: 21px; height: calc(100% - 42px); background: linear-gradient(90deg, var(--red), var(--red)) top/100% 4px no-repeat, linear-gradient(90deg, var(--red), var(--red)) 33.33%/100% 4px no-repeat, linear-gradient(90deg, var(--red), var(--red)) 66.66%/100% 4px no-repeat, linear-gradient(90deg, var(--red), var(--red)) bottom/100% 4px no-repeat; opacity: .85; }
.rail-map li { background: var(--paper-light); border: 2px solid var(--blue); min-height: 48px; padding: 10px 8px; position: relative; text-align: center; }
.rail-map li::before { content: attr(data-stop); background: var(--red); border: 3px solid var(--paper-light); border-radius: 50%; color: white; display: grid; font-size: .6rem; height: 24px; left: 50%; place-items: center; position: absolute; top: -14px; transform: translateX(-50%); width: 24px; }
.rail-map span { font: 700 .9rem Newsreader, Georgia, serif; }
.map-legend { color: #5f594b; font-size: .75rem; position: relative; z-index: 1; }

footer { border-top: 1px solid var(--rule); color: #716955; font-size: .72rem; letter-spacing: .1em; margin-top: 70px; padding-top: 20px; text-transform: uppercase; }

@media (max-width: 850px) {
  .masthead { align-items: start; flex-direction: column; }
  .nav { justify-content: flex-start; }
  .overview-grid { grid-template-columns: 1fr; }
  .ticket { box-shadow: 8px 8px 0 rgba(84,121,135,.12); }
  .legacy-journal td.journal { padding-inline: 18px; }
  .rail-map { grid-template-columns: repeat(2, 1fr); gap: 30px 14px; }
  .rail-map::before { background: linear-gradient(90deg, var(--red), var(--red)) top/100% 4px no-repeat, linear-gradient(90deg, var(--red), var(--red)) 14.28%/100% 4px no-repeat, linear-gradient(90deg, var(--red), var(--red)) 28.56%/100% 4px no-repeat, linear-gradient(90deg, var(--red), var(--red)) 42.84%/100% 4px no-repeat, linear-gradient(90deg, var(--red), var(--red)) 57.12%/100% 4px no-repeat, linear-gradient(90deg, var(--red), var(--red)) 71.4%/100% 4px no-repeat, linear-gradient(90deg, var(--red), var(--red)) 85.68%/100% 4px no-repeat, linear-gradient(90deg, var(--red), var(--red)) bottom/100% 4px no-repeat; }
}

@media (max-width: 560px) {
  .site-header { padding-top: 14px; }
  .masthead { margin-top: 14px; }
  .nav { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .route-list { grid-template-columns: 1fr; }
  .date-row { grid-template-columns: 1fr; gap: 12px; }
  .date-row div + div { border-left: 0; padding-left: 0; }
  .calendar-shell { overflow: visible; }
  .calendar { min-width: 0; }
  .calendar thead, .calendar td.empty { display: none; }
  .calendar, .calendar tbody, .calendar tr, .calendar td { display: block; width: 100%; }
  .calendar tr { display: grid; gap: 8px; margin-bottom: 8px; }
  .calendar td { height: auto; min-height: 68px; padding-left: 54px; position: relative; }
  .day { left: 12px; position: absolute; top: 12px; }
  .place { margin-top: 0; }
  .map-meta { flex-direction: column; }
  .rail-map { grid-template-columns: 1fr; }
  .rail-map::before { left: 50%; right: auto; top: 0; bottom: 0; width: 4px; height: 100%; background: var(--red); }
}