/* Traveler's Journal — design tokens (see spec: vintage European travel documents).
   Paper is passport blue-grey, NOT cream — cream/tan bases are banned. */
:root {
  --paper: #e7edf0;
  --ink: #262a2e;
  --navy: #1f3a5f;
  --crimson: #9e2f28;
  --olive: #55603c;
  --polaroid: #fff;
  --paper-bright: #f2f6f7;
  --font-hand: "Caveat", cursive;
  --font-body: "Lora", Georgia, serif;
  --font-ui: "Inter", -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--paper);
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 30px, rgba(31, 58, 95, 0.08) 31px
  );
}

/* ---------- shared ---------- */
/* Section titles as enamel platform signs (borrowed from the Rail Timetable
   design direction) — navy plate, inner white keyline, mono lettering. */
.section-title {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  background: var(--navy);
  padding: 0.6rem 1.4rem;
  border-radius: 6px;
  display: table;
  margin: 4.5rem auto 1.8rem;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28), 0 3px 10px rgba(20, 30, 46, 0.28);
}
.kicker {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crimson);
}

/* Scroll-reveal (Midnight Atlas direction) — entries drift in as you read.
   Uses the standalone `translate` property so it composes with the tilted
   elements' transform: rotate(...) instead of overwriting it. */
.reveal { opacity: 0; translate: 0 18px; transition: opacity 0.6s ease, translate 0.6s ease; }
.reveal.in { opacity: 1; translate: 0 0; }
.stamp {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 3px solid rgba(158, 47, 40, 0.55);
  border-radius: 50%;
  color: rgba(158, 47, 40, 0.75);
  font-family: var(--font-ui);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: rotate(-12deg);
}
.stamp::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1.5px solid rgba(158, 47, 40, 0.35);
  border-radius: 50%;
  pointer-events: none;
}

/* ---------- cover ---------- */
#cover {
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  padding: 2rem;
  text-align: center;
}
#cover .trip-title {
  font-family: var(--font-hand);
  font-size: clamp(3.2rem, 9vw, 6rem);
  line-height: 1;
  color: var(--navy);
}
#cover .trip-subtitle {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(1rem, 2.4vw, 1.3rem);
  color: var(--olive);
  max-width: 34em;
}
#cover .flag-strip {
  font-size: 1.6rem;
  letter-spacing: 0.35rem;
  line-height: 1.4;
}
#cover .cover-ai-link {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1.6px dashed var(--navy);
  padding-bottom: 2px;
  margin-top: 1.6rem;
}
#cover .cover-ai-link:hover { color: var(--crimson); border-color: var(--crimson); }
#cover .trip-travelers {
  font-family: var(--font-hand);
  font-size: 1.5rem;
  color: var(--olive);
}
#cover .trip-dates {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
#cover .stamp { width: 130px; height: 130px; font-size: 0.72rem; margin-top: 1rem; }
#cover .scroll-hint {
  font-family: var(--font-hand);
  font-size: 1.3rem;
  color: var(--crimson);
  margin-top: 2.5rem;
  animation: bob 2.2s ease-in-out infinite;
  cursor: pointer;
  padding: 0.5rem 1rem; /* comfortable tap target */
}
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* ---------- border crossings ---------- */
.border-crossing {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  margin: 3.2rem 0 -1.6rem;
  padding: 0.7rem 1.1rem;
  background: linear-gradient(90deg, rgba(31, 58, 95, 0.08), rgba(158, 47, 40, 0.06));
  border-left: 4px solid var(--crimson);
  border-radius: 0 8px 8px 0;
}
.border-crossing .bc-flag { font-size: 1.4rem; }
.border-crossing strong {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
}
.border-crossing .bc-note {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--olive);
}

/* ---------- journal entries ---------- */
#journal { max-width: 760px; margin: 0 auto; padding: 2rem 1.2rem 4rem; }
.entry { padding: 3.5rem 0 2rem; position: relative; }
/* Ghost folio numeral per stop (Modern Editorial direction) — z-index -1 so
   it genuinely sits behind the entry text, not as a veil over it. */
.entry::before {
  content: attr(data-num);
  position: absolute;
  top: 1.6rem;
  right: 0;
  z-index: -1;
  font-family: var(--font-mono);
  font-size: clamp(4rem, 10vw, 6.5rem);
  font-weight: 700;
  line-height: 1;
  color: rgba(31, 58, 95, 0.1);
  pointer-events: none;
}
.entry-city {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 2.7rem);
  color: var(--navy);
  margin: 0.4rem 0 0.2rem;
}
.entry-flag { font-size: 0.7em; }
.entry-headline {
  font-family: var(--font-hand);
  font-size: 1.45rem;
  color: var(--crimson);
  margin-bottom: 1rem;
}
.entry-notes p { line-height: 1.75; margin: 0.7rem 0; max-width: 62ch; }

.polaroids { display: flex; flex-wrap: wrap; gap: 1.6rem; margin: 1.8rem 0 1rem; }
.polaroid {
  background: var(--polaroid);
  padding: 10px 10px 34px;
  box-shadow: 0 6px 16px rgba(46, 42, 36, 0.28);
  transform: rotate(var(--tilt));
  position: relative;
  width: min(240px, 44%);
  transition: transform 0.25s ease;
  cursor: zoom-in;
}
.polaroid:hover { transform: rotate(0deg) scale(1.04); z-index: 2; }
.polaroid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.polaroid figcaption {
  font-family: var(--font-hand);
  font-size: 1.05rem;
  color: var(--ink);
  text-align: center;
  position: absolute;
  left: 0; right: 0; bottom: 6px;
}
.tape {
  position: absolute;
  top: -9px; left: 50%;
  width: 64px; height: 20px;
  margin-left: -32px;
  background: rgba(85, 96, 60, 0.28); /* translucent olive washi — no tan/cream */
  transform: rotate(-3deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.find-on-map {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--navy);
  background: none;
  border: 1.5px dashed var(--navy);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  cursor: pointer;
}
.find-on-map:hover { background: rgba(31, 58, 95, 0.08); }

/* ---------- ticket dividers ---------- */
.ticket {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: center;
  text-align: center;
  width: min(340px, 90%);
  margin: 1.5rem auto;
  padding: 0.9rem 1.2rem;
  background: var(--paper-bright);
  border: 1.6px dashed var(--olive);
  border-radius: 8px;
  transform: rotate(-1.5deg);
  box-shadow: 0 3px 10px rgba(38, 42, 46, 0.15);
  font-family: var(--font-mono);
}
/* punched holes, like a conductor got to it */
.ticket::before, .ticket::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background: var(--paper);
  border-radius: 50%;
}
.ticket::before { left: -8px; }
.ticket::after { right: -8px; }
.ticket strong { color: var(--ink); font-size: 0.92rem; letter-spacing: 0.08em; }
.ticket-arrow { color: var(--crimson); }
.ticket-note {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive);
}

/* ---------- fold-out map ---------- */
#map-section { max-width: 900px; margin: 0 auto; padding: 0 1.2rem; }
#route-map {
  height: 480px;
  border: 10px solid #fff;
  outline: 1px solid rgba(46, 42, 36, 0.2);
  box-shadow: 0 8px 22px rgba(46, 42, 36, 0.25);
  transform: rotate(-0.6deg);
}
.map-pin span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: background 0.25s ease, transform 0.25s ease;
}
/* Lit while its journal entry is being read (scroll-synced). */
.map-pin.active span {
  background: var(--crimson);
  transform: scale(1.18);
}
/* The route quietly marches along its dashes. */
#route-map path.leaflet-interactive {
  animation: route-march 90s linear infinite;
}
@keyframes route-march { to { stroke-dashoffset: -1400; } }
.leaflet-popup-content { font-family: var(--font-ui); text-align: center; }
.leaflet-popup-content a { color: var(--crimson); font-weight: 600; }

/* ---------- lightbox ---------- */
#lightbox {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: rgba(30, 26, 20, 0.88);
  z-index: 1000;
  padding: 2rem;
}
#lightbox.open { display: flex; }
#lightbox figure { max-width: min(1100px, 86vw); text-align: center; }
#lightbox img {
  max-width: 100%;
  max-height: 78vh;
  background: #fff;
  padding: 10px 10px 0;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
#lightbox figcaption {
  font-family: var(--font-hand);
  font-size: 1.4rem;
  color: #e7edf0;
  background: transparent;
  padding: 0.8rem 0 0;
}
#lightbox button {
  background: none;
  border: none;
  color: #e7edf0;
  font-size: 2.2rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.4rem 0.7rem;
}
#lightbox .lb-close { position: absolute; top: 1rem; right: 1.2rem; }

/* ---------- food log ---------- */
#food { padding: 0 1.2rem; }
.food-card {
  max-width: 560px;
  margin: 0 auto;
  padding: 1.4rem 1.8rem;
  background: var(--paper-bright);
  border: 1.6px dashed var(--crimson);
  border-radius: 8px;
  transform: rotate(-0.8deg);
  box-shadow: 0 3px 10px rgba(38, 42, 46, 0.15);
  text-align: center;
}
.food-card p { line-height: 1.7; margin: 0.5rem 0; }
.food-polaroids { max-width: 900px; margin: 1.8rem auto 0; justify-content: center; }

/* ---------- video reels ---------- */
.reels { display: flex; flex-wrap: wrap; gap: 1.6rem; margin: 0.6rem 0 1.2rem; }
.reel {
  background: var(--polaroid);
  padding: 10px 10px 30px;
  box-shadow: 0 6px 16px rgba(38, 42, 46, 0.28);
  transform: rotate(-1deg);
  position: relative;
  width: min(360px, 100%);
}
/* Phone clips are portrait: cap height, center inside the white frame. */
.reel { display: flex; flex-direction: column; align-items: center; }
.reel video {
  display: block;
  background: #000;
  max-width: 100%;
  max-height: 420px;
  width: auto;
  margin: 0 auto;
}
.reel figcaption {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
  position: absolute;
  left: 0; right: 0; bottom: 7px;
}

/* ---------- passport page ---------- */
#passport { padding: 2rem 1.2rem 3rem; }
.passport-pace {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--olive);
  text-align: center;
  margin: -0.6rem 0 1.6rem;
}

/* ---------- field notes (researched place + food per stop) ---------- */
.field-notes {
  border-left: 3px solid var(--navy);
  background: var(--paper-bright);
  border-radius: 0 8px 8px 0;
  padding: 0.8rem 1.1rem;
  margin: 1.1rem 0 0.4rem;
  max-width: 62ch;
}
.field-notes p { font-size: 0.9rem; line-height: 1.65; margin: 0.35rem 0; }
.fn-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--crimson);
  margin-right: 0.55rem;
}
.stamps {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  max-width: 900px;
  margin: 0 auto;
}
.stat-stamp {
  width: 132px;
  height: 132px;
  transform: rotate(var(--wiggle));
  gap: 0.2rem;
}
.stat-stamp strong { font-size: 1.9rem; line-height: 1; }
.stat-stamp span { font-size: 0.62rem; letter-spacing: 0.18em; }
/* passport-stamp ink rotates through the palette for a fuller page */
.stamps .stat-stamp:nth-child(3n + 2) { border-color: rgba(31, 58, 95, 0.55); color: rgba(31, 58, 95, 0.8); }
.stamps .stat-stamp:nth-child(3n + 2)::after { border-color: rgba(31, 58, 95, 0.35); }
.stamps .stat-stamp:nth-child(3n) { border-color: rgba(85, 96, 60, 0.6); color: rgba(85, 96, 60, 0.85); }
.stamps .stat-stamp:nth-child(3n)::after { border-color: rgba(85, 96, 60, 0.4); }

/* the map's traveling car */
.traveler {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

/* ---------- epilogue ---------- */
#epilogue { padding: 1rem 1.2rem 6rem; text-align: center; }
.epilogue-note {
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.8;
  max-width: 44em;
  margin: 0 auto 2rem;
}
.epilogue-photo { display: flex; justify-content: center; margin-bottom: 2rem; }
.epilogue-photo .polaroid { width: min(320px, 80vw); cursor: default; }
.signature { font-family: var(--font-hand); font-size: 1.6rem; color: var(--navy); }

/* ---------- the copilot log (ai.html) + journal banner ---------- */
.ai-banner {
  display: table;
  margin: 3rem auto 0;
  padding: 0.8rem 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--navy);
  border-radius: 6px;
  text-decoration: none;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28), 0 3px 10px rgba(20, 30, 46, 0.28);
  transform: rotate(-0.6deg);
}
.ai-banner:hover { background: var(--crimson); }

#ai-cover {
  min-height: 55vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3rem 1.2rem 2rem;
  text-align: center;
}
#ai-cover .trip-title {
  font-family: var(--font-hand);
  font-size: clamp(2.6rem, 7vw, 4.5rem);
  line-height: 1.05;
  color: var(--navy);
}
.ai-intro { max-width: 60ch; line-height: 1.75; }
#ai-cover .find-on-map { text-decoration: none; margin-top: 0.8rem; }

#ai-chapters {
  max-width: 960px;
  margin: 2rem auto;
  padding: 0 1.2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}
.ai-chapter {
  position: relative;
  background: var(--paper-bright);
  border: 1.6px dashed var(--navy);
  border-radius: 8px;
  padding: 1.2rem 1.4rem;
  overflow: hidden;
}
.ai-chapter::before {
  content: attr(data-num);
  position: absolute;
  top: 0.4rem;
  right: 0.7rem;
  font-family: var(--font-mono);
  font-size: 2.6rem;
  font-weight: 700;
  color: rgba(31, 58, 95, 0.1);
  line-height: 1;
  pointer-events: none;
}
.ai-chapter-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
.ai-icon { font-size: 1.3rem; }
.ai-chapter h2 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--navy);
}
.ai-summary { font-size: 0.95rem; line-height: 1.6; margin-bottom: 0.7rem; }
.ai-highlights { list-style: none; padding: 0; }
.ai-highlights li {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink);
  padding: 0.28rem 0 0.28rem 1.2rem;
  position: relative;
}
.ai-highlights li::before { content: "✓"; position: absolute; left: 0; color: var(--crimson); font-weight: 700; }

#ai-roles { padding: 1rem 1.2rem 2rem; }
.ai-roles-grid {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}
.ai-role {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--crimson);
  border: 1.6px solid rgba(158, 47, 40, 0.5);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  transform: rotate(-1deg);
}
.ai-role:nth-child(even) { transform: rotate(1.2deg); }
#ai-closing { padding: 1rem 1.2rem 5rem; text-align: center; }

/* ---------- reduced motion (must stay LAST so it wins the cascade) ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; translate: none; transition: none; }
  #route-map path.leaflet-interactive { animation: none; }
  .map-pin span { transition: none; }
  #cover .scroll-hint { animation: none; }
}

/* ---------- mobile (spec: breakpoint 768px) ---------- */
@media (max-width: 768px) {
  #route-map { height: 55vh; }
  #ai-chapters { grid-template-columns: 1fr; }
  #ai-cover { min-height: 45vh; padding: 2.5rem 1rem 1.5rem; }
  .ai-chapter::before { font-size: 2rem; }
  .border-crossing { margin-top: 2.4rem; }
  .reel video { max-height: 360px; }
  .polaroids { justify-content: center; }
  .polaroid { width: min(300px, 92%); }
  /* Tilt still alternates in sign on mobile via the inline [-5,3,-2,5] cycle
     (inline custom properties beat stylesheet rules, so no override here). */
  .stamps { gap: 1.2rem; }
  .stat-stamp { width: 108px; height: 108px; }
  .stat-stamp strong { font-size: 1.5rem; }
  /* 44px+ tap targets on touch screens */
  .find-on-map { padding: 0.75rem 1.3rem; }
  .leaflet-popup-content a { display: inline-block; padding: 0.4rem 0.2rem; }
}