/* =========================================================
   zeahdental.net — Stylesheet v9
   Indie travel zine / field journal
   Cream paper · olive · burnt orange · slate teal
   Familjen Grotesk + Lora + Geist Mono
   New vocabulary throughout — no shared footprint with prior 8 sites
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ---- Field-zine palette ---- */
  --field-cream: #f7f1e3;            /* cream paper bg */
  --field-cream-2: #efe6cf;          /* deeper ticket-stub */
  --field-cream-3: #e3d6b3;          /* aged paper */
  --field-ink: #1f2a24;              /* warm forest near-black */
  --field-ink-soft: #3c4a40;
  --field-ink-faint: #6f7a72;
  --field-rule: #bdb190;             /* warm sand rule */
  --field-olive: #4e6b3a;            /* mossy olive primary */
  --field-olive-deep: #2f4524;
  --field-burnt: #c25a2a;             /* burnt orange */
  --field-burnt-deep: #8c3a14;
  --field-teal: #2c6b71;              /* slate teal */
  --field-stamp: #8c1a1a;             /* dark passport-stamp red */

  /* ---- Typography ---- */
  --type-grotesk: 'Familjen Grotesk', 'Inter Tight', system-ui, sans-serif;
  --type-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --type-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* ---- Spacing (different scale than prior 8) ---- */
  --pad-tiny: 0.4rem;
  --pad-sm: 0.85rem;
  --pad-md: 1.4rem;
  --pad-lg: 2rem;
  --pad-xl: 3rem;
  --pad-xxl: 4.5rem;
  --pad-mega: 6.5rem;

  --frame-w: 1180px;
  --read-w: 680px;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--type-grotesk);
  background: var(--field-cream);
  color: var(--field-ink);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;

  /* Subtle paper-grain via dotted noise */
  background-image:
    radial-gradient(circle at 20% 30%, rgba(78, 107, 58, 0.025) 0%, transparent 35%),
    radial-gradient(circle at 80% 70%, rgba(194, 90, 42, 0.025) 0%, transparent 35%);
}

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

/* =========================================================
   COMPASS BAR (top date/route bar)
   ========================================================= */
.compass-bar {
  background: var(--field-ink);
  color: var(--field-cream);
  padding: 0.45rem 0;
  font-family: var(--type-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 3px solid var(--field-burnt);
}
.compass-bar .point {
  color: var(--field-burnt);
  margin: 0 0.6rem;
}
.compass-bar strong { color: var(--field-cream); font-weight: 600; }
.compass-bar .stamp {
  color: var(--field-burnt);
  letter-spacing: 0.2em;
  font-weight: 600;
}

/* =========================================================
   GAZETTE (header)
   ========================================================= */
.gazette {
  background: var(--field-cream);
  border-bottom: 2px dashed var(--field-rule);
  position: sticky;
  top: 0;
  z-index: 50;
}
.gazette__top {
  max-width: var(--frame-w);
  margin: 0 auto;
  padding: 1.2rem var(--pad-md);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--pad-md);
}
.gazette__left,
.gazette__right {
  font-family: var(--type-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--field-ink-faint);
}
.gazette__right { text-align: right; }
.gazette__left strong,
.gazette__right strong {
  color: var(--field-burnt);
  font-weight: 600;
}
.gazette__brand {
  text-align: center;
  text-decoration: none;
  color: var(--field-ink);
  display: block;
}
.gazette__mark {
  font-family: var(--type-grotesk);
  font-weight: 700;
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.15rem;
}
.gazette__mark .z {
  color: var(--field-burnt);
  font-style: italic;
}
.gazette__mark .eah { color: var(--field-ink); }
.gazette__mark .daily {
  color: var(--field-olive);
  font-weight: 500;
  font-size: 0.55em;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  margin-left: 0.5rem;
  position: relative;
  top: -0.2em;
}
.gazette__motto {
  font-family: var(--type-serif);
  font-style: italic;
  font-size: 0.78rem;
  color: var(--field-ink-faint);
  margin-top: 0.3rem;
  letter-spacing: 0.02em;
}
.gazette__rail {
  background: var(--field-cream);
  border-top: 1px dashed var(--field-rule);
}
.gazette__route {
  max-width: var(--frame-w);
  margin: 0 auto;
  padding: 0 var(--pad-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pad-md);
}
.gazette__stations {
  display: flex;
  list-style: none;
  align-items: center;
  gap: 0;
}
.gazette__stations a {
  font-family: var(--type-grotesk);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--field-ink-soft);
  text-decoration: none;
  font-weight: 500;
  padding: 0.85rem 1.1rem 0.85rem 0;
  margin-right: 1rem;
  position: relative;
  transition: color 0.15s;
}
.gazette__stations a:not(:last-child)::after {
  content: '◦';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--field-rule);
}
.gazette__stations a:hover { color: var(--field-burnt); }
.gazette__stations a.is-stop {
  color: var(--field-burnt);
  font-weight: 700;
}
.gazette__stations a.is-stop::before {
  content: '✦';
  color: var(--field-olive);
  margin-right: 0.3rem;
}
.gazette__weather {
  font-family: var(--type-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--field-ink-faint);
  font-weight: 500;
  white-space: nowrap;
}
.gazette__menu {
  display: none;
  background: var(--field-burnt);
  border: none;
  color: var(--field-cream);
  padding: 0.45rem 0.95rem;
  font-family: var(--type-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 700;
}

/* =========================================================
   ITINERARY STRIP (sub-section pills)
   ========================================================= */
.itinerary-strip {
  background: var(--field-cream-2);
  border-bottom: 1px dashed var(--field-rule);
}
.itinerary-strip__inner {
  max-width: var(--frame-w);
  margin: 0 auto;
  padding: 0.5rem var(--pad-md);
  display: flex;
  align-items: center;
  gap: var(--pad-md);
  overflow-x: auto;
  scrollbar-width: none;
}
.itinerary-strip__inner::-webkit-scrollbar { display: none; }
.itinerary-strip__label {
  font-family: var(--type-mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--field-ink-faint);
  font-weight: 600;
  padding-right: var(--pad-sm);
  border-right: 1px dashed var(--field-rule);
  white-space: nowrap;
}
.itinerary-strip a {
  font-family: var(--type-grotesk);
  font-size: 0.78rem;
  color: var(--field-ink-soft);
  text-decoration: none;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  white-space: nowrap;
  font-weight: 500;
  transition: all 0.15s;
  border: 1px dashed transparent;
}
.itinerary-strip a:hover {
  border-color: var(--field-burnt);
  color: var(--field-burnt);
}
.itinerary-strip a.is-stop {
  background: var(--field-ink);
  color: var(--field-cream);
  font-weight: 600;
}

/* =========================================================
   LAYOUT
   ========================================================= */
main { flex: 1; }
.frame { max-width: var(--frame-w); margin: 0 auto; padding: 0 var(--pad-md); }
.frame--read { max-width: var(--read-w); }
.leg { padding: var(--pad-xl) 0; }

/* =========================================================
   OPENING (hero)
   ========================================================= */
.opening {
  padding: var(--pad-xxl) 0 var(--pad-lg);
  position: relative;
}
.opening__chip {
  font-family: var(--type-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--field-cream);
  background: var(--field-olive);
  font-weight: 600;
  display: inline-block;
  padding: 0.4rem 0.85rem;
  margin-bottom: var(--pad-md);
  border-radius: 999px;
  transform: rotate(-1.5deg);
}
.opening__chip--burnt {
  background: var(--field-burnt);
}
.opening__title {
  font-family: var(--type-grotesk);
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--field-ink);
  max-width: 980px;
}
.opening__title em {
  font-style: italic;
  color: var(--field-burnt);
  font-weight: 500;
}
.opening__title .ol { color: var(--field-olive); font-style: normal; }
.opening__title .tl { color: var(--field-teal); font-style: normal; }
.opening__sub {
  font-family: var(--type-serif);
  font-style: italic;
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  line-height: 1.5;
  color: var(--field-ink-soft);
  max-width: 660px;
  margin-top: var(--pad-md);
  border-left: 3px dashed var(--field-burnt);
  padding-left: var(--pad-md);
}
.opening__sub em { font-style: normal; color: var(--field-ink); font-weight: 700; }
.opening__stamp-row {
  display: flex;
  gap: var(--pad-md);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--pad-lg);
  padding: 0.7rem 0;
  border-top: 1px dashed var(--field-rule);
  border-bottom: 1px dashed var(--field-rule);
  font-family: var(--type-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--field-ink-faint);
  text-transform: uppercase;
  font-weight: 500;
}
.opening__stamp-row strong { color: var(--field-ink); font-weight: 700; }
.opening__stamp-row .dot { color: var(--field-burnt); }
.opening__cta {
  display: flex;
  gap: 0.7rem;
  margin-top: var(--pad-lg);
  flex-wrap: wrap;
}

/* =========================================================
   ROUTE (breadcrumbs)
   ========================================================= */
.route {
  font-family: var(--type-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--field-ink-faint);
  margin-bottom: var(--pad-md);
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-weight: 500;
}
.route a { color: var(--field-ink-soft); text-decoration: none; }
.route a:hover { color: var(--field-burnt); }
.route .arrow { color: var(--field-rule); }

/* =========================================================
   BUTTONS — ticket-stub style
   ========================================================= */
.stub-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.4rem;
  font-family: var(--type-grotesk);
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  font-weight: 700;
  text-decoration: none;
  background: var(--field-burnt);
  color: var(--field-cream);
  border: 2px dashed var(--field-cream);
  outline: 2px solid var(--field-burnt);
  transition: all 0.15s;
  cursor: pointer;
  position: relative;
}
.stub-btn:hover {
  background: var(--field-burnt-deep);
  outline-color: var(--field-burnt-deep);
}
.stub-btn--quiet {
  background: transparent;
  color: var(--field-ink);
  outline-color: var(--field-ink);
  border-color: var(--field-cream);
}
.stub-btn--quiet:hover {
  background: var(--field-ink);
  color: var(--field-cream);
  outline-color: var(--field-ink);
}
.stub-btn--olive {
  background: var(--field-olive);
  outline-color: var(--field-olive);
}
.stub-btn--olive:hover {
  background: var(--field-olive-deep);
  outline-color: var(--field-olive-deep);
}

/* =========================================================
   DISPATCH CARDS (article cards)
   ========================================================= */
.dispatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--pad-lg);
}

.dispatch-card {
  text-decoration: none;
  color: var(--field-ink);
  background: var(--field-cream);
  border: 1.5px dashed var(--field-rule);
  padding: var(--pad-md);
  display: flex;
  flex-direction: column;
  transition: all 0.2s;
  position: relative;
}
.dispatch-card::before {
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    var(--field-burnt) 0 12px,
    transparent 12px 24px
  );
}
.dispatch-card:hover {
  border-color: var(--field-burnt);
  transform: translateY(-3px);
}
.dispatch-card:hover .dispatch-card__head { color: var(--field-burnt); }

.dispatch-card__plate {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--field-cream-2);
  position: relative;
  margin-bottom: var(--pad-sm);
  border: 1px solid var(--field-rule);
}
.dispatch-card__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dispatch-card__tag {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: var(--field-ink);
  padding: 0.3rem 0.7rem;
  font-family: var(--type-mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--field-cream);
  transform: rotate(2deg);
}
.dispatch-card__cat {
  font-family: var(--type-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--field-olive);
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.dispatch-card__head {
  font-family: var(--type-grotesk);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--field-ink);
  margin-bottom: 0.45rem;
  transition: color 0.15s;
}
.dispatch-card__head em {
  font-style: italic;
  color: var(--field-burnt);
  font-weight: 500;
}
.dispatch-card__lede {
  font-family: var(--type-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--field-ink-soft);
  line-height: 1.5;
  margin-bottom: var(--pad-sm);
}
.dispatch-card__meta {
  margin-top: auto;
  padding-top: var(--pad-sm);
  font-family: var(--type-mono);
  font-size: 0.66rem;
  color: var(--field-ink-faint);
  letter-spacing: 0.08em;
  display: flex;
  justify-content: space-between;
  border-top: 1px dashed var(--field-rule);
  text-transform: uppercase;
  font-weight: 500;
}

/* Lead dispatch */
.dispatch-card--lead {
  grid-column: 1 / -1;
  flex-direction: row;
  gap: var(--pad-lg);
  background: var(--field-cream-2);
  padding: var(--pad-lg);
  border-style: solid;
  border-color: var(--field-burnt);
}
.dispatch-card--lead::before {
  background: repeating-linear-gradient(
    90deg,
    var(--field-burnt) 0 16px,
    var(--field-olive) 16px 32px
  );
}
.dispatch-card--lead .dispatch-card__plate {
  flex: 0 0 48%;
  aspect-ratio: 16 / 10;
  margin-bottom: 0;
}
.dispatch-card--lead .dispatch-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dispatch-card--lead .dispatch-card__head {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.08;
}
.dispatch-card--lead .dispatch-card__lede { font-size: 1.05rem; }

/* =========================================================
   MILE MARKER (section header)
   ========================================================= */
.mile-marker {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: var(--pad-md);
  margin-bottom: var(--pad-lg);
  padding-bottom: var(--pad-sm);
  border-bottom: 3px dashed var(--field-ink);
}
.mile-marker__pin {
  font-family: var(--type-mono);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--field-cream);
  background: var(--field-olive);
  padding: 0.5rem 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.mile-marker__pin::before { content: '✦'; }
.mile-marker__title {
  font-family: var(--type-grotesk);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  letter-spacing: -0.03em;
  color: var(--field-ink);
  line-height: 1;
}
.mile-marker__title em {
  font-style: italic;
  color: var(--field-burnt);
  font-weight: 500;
}
.mile-marker__more {
  font-family: var(--type-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--field-ink);
  font-weight: 700;
  text-decoration: none;
  padding: 0.45rem 0.85rem;
  border: 1.5px dashed var(--field-ink);
  transition: all 0.15s;
}
.mile-marker__more:hover {
  background: var(--field-ink);
  color: var(--field-cream);
}

/* =========================================================
   POSTCARD (article main illustration)
   ========================================================= */
.postcard {
  margin: var(--pad-lg) 0;
  background: var(--field-cream);
  border: 1.5px solid var(--field-ink);
  position: relative;
  box-shadow: 6px 6px 0 var(--field-burnt);
}
.postcard__plate {
  aspect-ratio: 16 / 9;
  border-bottom: 1.5px solid var(--field-ink);
}
.postcard__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.postcard__note {
  font-family: var(--type-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--field-ink-faint);
  padding: 0.8rem 1.1rem;
  display: flex;
  justify-content: space-between;
  background: var(--field-cream-2);
  font-weight: 500;
}
.postcard__note strong { color: var(--field-burnt); font-weight: 700; }

/* =========================================================
   POSTMARK (3-bullet summary)
   ========================================================= */
.postmark {
  background: var(--field-cream);
  border: 2px solid var(--field-ink);
  padding: var(--pad-md);
  margin-bottom: var(--pad-lg);
  position: relative;
  margin-top: var(--pad-lg);
}
.postmark::before {
  content: '★ POSTMARK';
  position: absolute;
  top: -0.65rem;
  left: var(--pad-sm);
  background: var(--field-cream);
  color: var(--field-burnt);
  padding: 0 0.6rem;
  font-family: var(--type-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
}
.postmark::after {
  content: '';
  position: absolute;
  top: 8px; right: 8px;
  bottom: 8px; left: 8px;
  border: 1px dashed var(--field-rule);
  pointer-events: none;
}
.postmark ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  position: relative;
  z-index: 1;
}
.postmark li {
  font-family: var(--type-serif);
  font-size: 1rem;
  color: var(--field-ink-soft);
  line-height: 1.55;
  padding-left: 1.6rem;
  position: relative;
}
.postmark li::before {
  content: '✚';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--field-burnt);
  font-weight: 700;
}
.postmark li strong { color: var(--field-ink); font-weight: 700; }

/* =========================================================
   FIELD PROSE (body copy)
   ========================================================= */
.field-prose {
  font-family: var(--type-serif);
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--field-ink);
  max-width: var(--read-w);
}
.field-prose > * + * { margin-top: var(--pad-md); }
.field-prose h2 {
  font-family: var(--type-grotesk);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1.15;
  color: var(--field-ink);
  letter-spacing: -0.025em;
  margin-top: var(--pad-xl);
  padding-bottom: 0.4rem;
  border-bottom: 2px dashed var(--field-burnt);
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.field-prose h2 .mile {
  font-family: var(--type-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--field-cream);
  background: var(--field-olive);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  vertical-align: middle;
  position: relative;
  top: -0.2em;
}
.field-prose h2 em {
  font-style: italic;
  color: var(--field-burnt);
  font-weight: 500;
}
.field-prose h3 {
  font-family: var(--type-grotesk);
  font-weight: 600;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--field-ink);
  margin-top: var(--pad-lg);
  letter-spacing: -0.01em;
}
.field-prose p strong { color: var(--field-ink); font-weight: 700; }

.field-prose p a, .field-prose li a {
  color: var(--field-burnt);
  text-decoration: none;
  font-weight: 700;
  border-bottom: 1.5px dashed var(--field-burnt);
  transition: all 0.15s;
}
.field-prose p a:hover, .field-prose li a:hover {
  background: var(--field-burnt);
  color: var(--field-cream);
}

.field-prose ul, .field-prose ol { padding-left: 1.5rem; }
.field-prose li { margin-top: 0.45rem; }
.field-prose li::marker { color: var(--field-burnt); font-weight: 700; }

.field-prose blockquote {
  border: none;
  padding: var(--pad-md);
  font-family: var(--type-grotesk);
  font-weight: 700;
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--field-ink);
  margin: var(--pad-lg) 0;
  letter-spacing: -0.02em;
  background: var(--field-cream-2);
  border-left: 5px solid var(--field-olive);
  position: relative;
}
.field-prose blockquote::before {
  content: '— FIELD NOTE —';
  display: block;
  font-style: normal;
  font-family: var(--type-mono);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  font-weight: 700;
  color: var(--field-olive);
  margin-bottom: 0.6rem;
}

/* Drop-cap */
.field-prose > p:first-of-type::first-letter {
  font-family: var(--type-grotesk);
  font-weight: 700;
  font-size: 4.5rem;
  line-height: 0.85;
  float: left;
  padding: 0.4rem 0.6rem 0 0;
  color: var(--field-burnt);
}

/* =========================================================
   SIDETRIP BOX (inline see-also)
   ========================================================= */
.sidetrip {
  background: var(--field-cream);
  border: 1.5px dashed var(--field-teal);
  padding: var(--pad-md);
  margin: var(--pad-md) 0;
  font-family: var(--type-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--field-ink-soft);
  position: relative;
}
.sidetrip__flag {
  font-family: var(--type-mono);
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--field-teal);
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-style: normal;
}
.sidetrip a {
  color: var(--field-ink);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--field-teal);
  font-style: italic;
}
.sidetrip a:hover {
  background: var(--field-teal);
  color: var(--field-cream);
}

/* =========================================================
   LOG ENTRY (factbox)
   ========================================================= */
.log-entry {
  background: var(--field-cream-2);
  border: 1px solid var(--field-rule);
  padding: var(--pad-md);
  margin: var(--pad-md) 0;
  position: relative;
}
.log-entry::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 5px; height: 100%;
  background: var(--field-olive);
}
.log-entry__tag {
  font-family: var(--type-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--field-olive);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.log-entry__body {
  font-family: var(--type-serif);
  font-size: 1rem;
  color: var(--field-ink);
  line-height: 1.55;
}
.log-entry__body a {
  color: var(--field-burnt);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px dashed var(--field-burnt);
}

/* =========================================================
   SIGNATURE PASSPORT (author block)
   ========================================================= */
.passport-sign {
  margin: var(--pad-xl) auto 0;
  max-width: var(--read-w);
  padding: var(--pad-md);
  background: var(--field-cream);
  border: 2px solid var(--field-ink);
  display: flex;
  gap: var(--pad-md);
  align-items: center;
  position: relative;
}
.passport-sign::before {
  content: 'STAMPED';
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%) rotate(-12deg);
  font-family: var(--type-mono);
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--field-stamp);
  opacity: 0.5;
  border: 3px double var(--field-stamp);
  padding: 0.3rem 0.7rem;
}
.passport-sign__seal {
  width: 56px;
  height: 56px;
  background: var(--field-burnt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--type-grotesk);
  font-style: italic;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--field-cream);
  flex-shrink: 0;
  transform: rotate(-4deg);
}
.passport-sign__name {
  font-family: var(--type-grotesk);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--field-ink);
  margin-bottom: 0.2rem;
  letter-spacing: -0.01em;
}
.passport-sign__note {
  font-family: var(--type-serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--field-ink-soft);
  line-height: 1.5;
  max-width: 65%;
}
.passport-sign__note a {
  color: var(--field-burnt);
  text-decoration: none;
  font-weight: 700;
  font-style: normal;
  border-bottom: 1.5px dashed var(--field-burnt);
}

/* =========================================================
   TICKET FORM (contact form)
   ========================================================= */
.ticket-form {
  display: grid;
  gap: var(--pad-md);
  max-width: 600px;
  margin-top: var(--pad-md);
}
.ticket-form__row { display: grid; gap: 0.4rem; }
.ticket-form__label {
  font-family: var(--type-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--field-ink-faint);
  font-weight: 700;
}
.ticket-form__input, .ticket-form__textarea {
  background: var(--field-cream);
  border: 1.5px dashed var(--field-ink);
  color: var(--field-ink);
  padding: 0.8rem 1rem;
  font-family: var(--type-serif);
  font-size: 1rem;
  transition: border-color 0.15s;
}
.ticket-form__input:focus, .ticket-form__textarea:focus {
  outline: none;
  border-color: var(--field-burnt);
  border-style: solid;
}
.ticket-form__textarea { min-height: 140px; resize: vertical; }

/* =========================================================
   STATION-END (footer)
   ========================================================= */
.station-end {
  background: var(--field-ink);
  color: var(--field-cream);
  padding: var(--pad-xxl) 0 var(--pad-md);
  margin-top: var(--pad-mega);
  border-top: 5px dashed var(--field-burnt);
}
.station-end__layout {
  display: grid;
  grid-template-columns: 2.4fr 1fr 1fr 1fr;
  gap: var(--pad-lg);
  margin-bottom: var(--pad-lg);
  padding-bottom: var(--pad-lg);
  border-bottom: 1px dashed rgba(247, 241, 227, 0.2);
}
.station-end__brand {
  font-family: var(--type-grotesk);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 0.95;
  letter-spacing: -0.04em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.15rem;
  margin-bottom: 0.5rem;
}
.station-end__brand .z { color: var(--field-burnt); font-style: italic; }
.station-end__brand .eah { color: var(--field-cream); }
.station-end__brand .daily {
  color: var(--field-olive);
  font-weight: 500;
  font-size: 0.55em;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  margin-left: 0.5rem;
}
.station-end__motto {
  font-family: var(--type-serif);
  font-style: italic;
  font-size: 0.9rem;
  color: rgba(247, 241, 227, 0.75);
  max-width: 320px;
  line-height: 1.55;
  margin-top: 0.4rem;
}
.station-end__column-mark {
  font-family: var(--type-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--field-burnt);
  margin-bottom: var(--pad-sm);
  font-weight: 700;
}
.station-end__list { list-style: none; display: grid; gap: 0.5rem; }
.station-end__list a {
  font-family: var(--type-grotesk);
  color: rgba(247, 241, 227, 0.78);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.15s;
}
.station-end__list a:hover { color: var(--field-burnt); }
.station-end__base {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--pad-sm);
  font-family: var(--type-mono);
  font-size: 0.66rem;
  color: rgba(247, 241, 227, 0.5);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* =========================================================
   MISC
   ========================================================= */
::selection { background: var(--field-burnt); color: var(--field-cream); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 880px) {
  .gazette__top { grid-template-columns: 1fr; text-align: center; gap: 0.5rem; }
  .gazette__left, .gazette__right { text-align: center; }
  .gazette__route { flex-direction: column; align-items: flex-start; gap: 0; }
  .gazette__stations {
    width: 100%;
    flex-direction: column;
    display: none;
    border-top: 1px dashed var(--field-rule);
  }
  .gazette__stations.is-open { display: flex; }
  .gazette__stations a {
    display: block;
    padding: 0.8rem var(--pad-md);
    margin: 0;
    border-bottom: 1px dashed var(--field-rule);
  }
  .gazette__stations a:not(:last-child)::after { display: none; }
  .gazette__weather { display: none; }
  .gazette__menu { display: block; margin: 0.7rem 0; }
  .dispatch-card--lead { flex-direction: column; }
  .dispatch-card--lead .dispatch-card__plate { flex: 0 0 auto; }
  .dispatch-grid { grid-template-columns: 1fr; }
  .mile-marker { grid-template-columns: 1fr auto; }
  .mile-marker__pin { grid-column: 1; justify-self: start; }
  .station-end__layout { grid-template-columns: 1fr 1fr; }
  .passport-sign::before { display: none; }
  .passport-sign__note { max-width: 100%; }
}
@media (max-width: 480px) {
  .station-end__layout { grid-template-columns: 1fr; }
}