/* Route 66 Logbook · the Route 66 guides
   Shared by /guides/ and every /guides/<article>/ page. Both are generated by
   `node build.js` from guide.template.html, guide-article.template.html and
   the files in _guides/. Same tokens and type as the About and press pages. */

:root {
  --coral: #ea5b56;
  --teal: #6daeab;
  --sand: #f7f4f0;
  --charcoal: #2b3033;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--sand);
  color: var(--charcoal);
  font-family: 'Public Sans', sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { max-width: 100%; }

/* HEADER */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 52px;
  max-width: 1100px; margin: 0 auto;
}
.header-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.header-logo-img {
  width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
}
.header-logo-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.header-logo-word { font-weight: 700; font-size: 16px; letter-spacing: -0.3px; }
.header-logo-word span { color: var(--coral); }
.header-back {
  font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  color: var(--charcoal); text-decoration: none; opacity: 0.55; transition: opacity 0.2s;
}
.header-back:hover { opacity: 1; }

/* SHELL */
.shell { max-width: 760px; margin: 0 auto; padding-left: 52px; padding-right: 52px; }
.shell.wide { max-width: 1100px; }

.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
  margin-bottom: 20px;
}
.eyebrow a { text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ec { color: var(--coral); }
.et { color: var(--teal); }

/* INTRO */
.intro { padding-top: 64px; padding-bottom: 28px; }
.intro-title {
  font-weight: 800; font-size: clamp(36px, 5.6vw, 62px);
  line-height: 0.96; letter-spacing: -2px; margin-bottom: 26px;
}
.intro-title em { color: var(--coral); font-style: normal; }
.guide-home .intro-title { font-size: clamp(48px, 8vw, 96px); letter-spacing: -3px; line-height: 0.9; }
.intro-lede {
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: clamp(19px, 2.4vw, 24px); color: rgba(43,48,51,0.6);
  line-height: 1.6; max-width: 620px;
}
.byline {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 30px;
  font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(43,48,51,0.45);
}
.byline a { color: var(--teal); text-decoration: none; }
.byline a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* PHOTO SLOTS
   Drop a file into /images/guides with the name shown in the slot and it
   appears; until then the slot shows its filename and size. */
.photo-band { margin: 44px 0; }
.photo-cell {
  position: relative; border-radius: 20px; overflow: hidden; background: #cbbfae;
  aspect-ratio: 16 / 10;
}
.photo-placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  color: rgba(255,255,255,0.6); font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; text-align: center; padding: 20px; line-height: 1.8;
}
.photo-cell img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* ARTICLE PROSE */
.article { padding-top: 8px; padding-bottom: 72px; }
.prose p {
  font-size: 17px; line-height: 1.78; color: rgba(43,48,51,0.82);
  margin-bottom: 22px;
}
.prose h2 {
  font-weight: 800; font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1.05; letter-spacing: -1px; margin: 52px 0 18px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-weight: 700; font-size: 20px; letter-spacing: -0.4px; line-height: 1.3;
  margin: 34px 0 10px; color: var(--charcoal);
}
.prose ul { margin: 0 0 22px 1.1em; }
.prose li {
  font-size: 17px; line-height: 1.7; color: rgba(43,48,51,0.82); margin-bottom: 8px;
}
.prose li::marker { color: var(--coral); }
.prose a { color: var(--charcoal); text-decoration-color: var(--coral); text-underline-offset: 3px; }
.prose a:hover { color: var(--coral); }
.prose strong { color: var(--charcoal); }

/* Photos inside an article */
.prose .figure { margin: 36px 0 40px; }
.prose .figure img {
  display: block; width: 100%; height: auto;
  border-radius: 20px; background: #cbbfae;
}
.prose .figure.upright { max-width: 420px; margin-left: auto; margin-right: auto; }
.prose .figure figcaption {
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 15px; line-height: 1.5; color: rgba(43,48,51,0.55);
  text-align: center; margin-top: 12px;
}
.prose .figure figcaption a { color: inherit; }

/* In-article app button (the Word file's "CTA:" lines) */
.cta-row { margin: 4px 0 30px; }
.btn-coral {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--coral); color: #fff; text-decoration: none;
  padding: 15px 30px; border-radius: 100px;
  font-size: 15px; font-weight: 600; letter-spacing: 0.2px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.prose .btn-coral, .prose .btn-coral:hover { color: #fff; text-decoration: none; }
.btn-coral:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(234,91,86,0.4); }

/* TILES */
.group { padding-top: 56px; padding-bottom: 8px; }
.group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.group-title {
  font-weight: 800; font-size: clamp(30px, 4.4vw, 48px);
  line-height: 0.96; letter-spacing: -1.4px;
}
.group-title em { color: var(--coral); font-style: normal; }
.group-count {
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 17px; color: rgba(43,48,51,0.45);
}
/* The tiles themselves are in guide-tiles.css, shared with /history/ and /prepare/. */

/* KEEP READING (end of an article) */
.more { background: #efe9e1; padding: 80px 0 88px; }
.more .eyebrow { margin-bottom: 14px; }
.more .group-title { margin-bottom: 32px; }

/* SOURCES (guides page) */
.sources { padding-top: 72px; padding-bottom: 80px; }
.sources h2 {
  font-size: 11px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
  color: var(--teal); margin-bottom: 8px;
}
.sources p {
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 15px; color: rgba(43,48,51,0.55); line-height: 1.5; margin-bottom: 12px;
}
.sources ul { list-style: none; border-top: 1px solid rgba(43,48,51,0.1); }
.sources li { border-bottom: 1px solid rgba(43,48,51,0.1); }
.sources a {
  display: block; padding: 7px 0; font-size: 12.5px; line-height: 1.45;
  color: rgba(43,48,51,0.75); text-decoration: none; transition: color 0.2s;
}
.sources a:hover { color: var(--coral); }

/* DOWNLOAD BAND (matches the home page) */
.download {
  padding: 140px 52px; position: relative; overflow: hidden;
  background-color: var(--charcoal);
  background-image: linear-gradient(rgba(43,48,51,0.5), rgba(43,48,51,0.5)), url('/images/morten-andreassen-mX0tCOykgSY-unsplash.jpg');
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.download-inner { max-width: 680px; margin: 0 auto; text-align: center; }
.download-title {
  font-weight: 800; font-size: clamp(54px, 8.5vw, 112px);
  color: #fff; line-height: 0.88; letter-spacing: -3.5px; margin-bottom: 26px;
}
.download-title em { color: var(--coral); font-style: normal; }
.download-sub {
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 20px; color: rgba(255,255,255,0.6); margin-bottom: 52px; line-height: 1.6;
}
.download-badges { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.badge-btn {
  display: flex; align-items: center; gap: 14px; background: var(--coral);
  color: #fff; padding: 15px 30px; border-radius: 16px; text-decoration: none; text-align: left;
  transition: transform 0.2s, box-shadow 0.2s;
}
.badge-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(234,91,86,0.4); }
.badge-btn-android { background: var(--teal); }
.badge-btn-android:hover { box-shadow: 0 14px 40px rgba(109,174,171,0.45); }
.badge-btn-label { font-size: 10px; opacity: 0.52; display: block; letter-spacing: 0.5px; margin-bottom: 2px; }
.badge-btn-store { font-size: 17px; font-weight: 700; display: block; letter-spacing: -0.3px; }

/* REVEAL */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* RESPONSIVE */
@media (max-width: 820px) {
  .site-header { padding: 18px 24px; }
  .shell { padding-left: 24px; padding-right: 24px; }
  .download { padding: 100px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}