/* ═══════════════════════════════════════════════════════════════════════════
   guide.css — shared stylesheet for the route and country guides.

   HAND-WRITTEN. Not generated, unlike the pages that use it.

   These pages are the answer to Google Ads' "destination requirements": a
   landing page has to be useful in its own right, not a doorway that exists to
   bounce someone to a partner. So the design is built around READING — long
   measure, generous line height, real headings — and there is deliberately
   almost nothing else competing with the text.

   NO IMAGES AND NO JAVASCRIPT, on purpose. A guide page is text; adding a
   stock photo of a train would be weight with no information in it. That keeps
   each page a few KB and makes it load instantly on mobile data, which is the
   other half of what an ad landing page is judged on.

   Brand matches the desktop site: forest green + warm sand. It is deliberately
   NOT the mobile replica's palette — these pages belong to RailReserve.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --forest-900:#0C1F16; --forest-800:#123023; --forest-700:#17452F;
  --forest-600:#1D5A3C; --forest-500:#27754E; --forest-400:#3E9468;
  --sand-50:#FAF6EE;   --sand-100:#F2EAD9;  --sand-200:#E6D9BE;
  --sand-300:#D6C29B;  --clay:#B4622F;      --ink:#0C1F16;
  --body:#33443B;      --muted:#5A6B60;
  --ff:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --shadow:0 2px 10px rgba(12,31,22,.08);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--ff);background:var(--sand-50);color:var(--body);
     font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:var(--forest-600);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--forest-800)}
:focus-visible{outline:3px solid var(--forest-400);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{width:min(760px,calc(100% - 40px));margin-inline:auto}
.wrap-wide{width:min(1100px,calc(100% - 40px));margin-inline:auto}

/* ── top bar ─────────────────────────────────────────────────────────────── */
.g-nav{background:var(--sand-50);border-bottom:1px solid var(--sand-200);
  position:sticky;top:0;z-index:20}
.g-nav .in{display:flex;align-items:center;gap:18px;height:66px}
.g-nav .brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.g-nav .brand svg{width:158px;height:auto;color:var(--forest-800)}
.g-nav .links{margin-left:auto;display:flex;gap:20px;flex-wrap:wrap}
.g-nav .links a{font-size:14px;font-weight:600;color:var(--forest-800);
  text-decoration:none;white-space:nowrap}
.g-nav .links a:hover{text-decoration:underline}

/* ── breadcrumb ──────────────────────────────────────────────────────────── */
.crumb{padding:18px 0 0;font-size:13px;color:var(--muted)}
.crumb a{color:var(--muted)}
.crumb span{margin:0 7px;opacity:.6}

/* ── page head ───────────────────────────────────────────────────────────── */
.g-head{padding:14px 0 30px}
.g-eyebrow{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--forest-500)}
h1{margin:0 0 14px;font-size:clamp(28px,4.4vw,42px);line-height:1.15;
   letter-spacing:-.5px;color:var(--forest-900);font-weight:800}
.g-standfirst{margin:0;font-size:18px;line-height:1.65;color:var(--muted)}

/* ── the facts strip ─────────────────────────────────────────────────────── */
.g-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--sand-200);border:1px solid var(--sand-200);
  border-radius:12px;overflow:hidden;margin:30px 0 8px}
.g-facts div{background:#fff;padding:15px 16px}
.g-facts dt{margin:0 0 3px;font-size:11.5px;font-weight:700;letter-spacing:.8px;
  text-transform:uppercase;color:var(--muted)}
.g-facts dd{margin:0;font-size:17px;font-weight:700;color:var(--forest-800);line-height:1.35}
.g-facts dd small{display:block;font-size:12px;font-weight:400;color:var(--muted);
  letter-spacing:0;text-transform:none;margin-top:2px}
.g-checked{margin:0 0 34px;font-size:12.5px;color:var(--muted)}

/* ── body copy ───────────────────────────────────────────────────────────── */
.g-body h2{margin:44px 0 14px;font-size:25px;line-height:1.25;font-weight:700;
  color:var(--forest-800);letter-spacing:-.2px}
.g-body h3{margin:30px 0 10px;font-size:18px;font-weight:700;color:var(--forest-700)}
.g-body p{margin:0 0 16px}
.g-body ul,.g-body ol{margin:0 0 18px;padding-left:22px}
.g-body li{margin:0 0 9px}
.g-body strong{color:var(--forest-800);font-weight:700}

/* ── data table ──────────────────────────────────────────────────────────── */
.g-tablewrap{overflow-x:auto;margin:0 0 20px;border:1px solid var(--sand-200);
  border-radius:12px;background:#fff}
table{border-collapse:collapse;width:100%;min-width:460px;font-size:14.5px}
thead th{text-align:left;padding:12px 14px;background:var(--sand-100);
  font-size:12px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  color:var(--forest-800);white-space:nowrap}
tbody td{padding:12px 14px;border-top:1px solid var(--sand-200);vertical-align:top}
tbody tr:nth-child(even) td{background:#FCFAF6}
td b{color:var(--forest-800)}

/* ── callout ─────────────────────────────────────────────────────────────── */
.g-note{margin:0 0 20px;padding:15px 18px;background:#fff;
  border-left:4px solid var(--forest-400);border-radius:0 10px 10px 0;
  box-shadow:var(--shadow);font-size:15px}
.g-note p{margin:0 0 10px}
.g-note p:last-child{margin:0}
.g-note b{color:var(--forest-800)}

/* ── affiliate disclosure — same wording as the main site ────────────────── */
.g-disc{display:flex;align-items:flex-start;gap:9px;margin:0 0 26px;padding:13px 16px;
  background:var(--sand-100);border-radius:10px;font-size:13px;line-height:1.55;
  color:#4A5A51}
.g-disc svg{flex:0 0 auto;margin-top:3px;color:var(--forest-500)}
.g-disc b{color:var(--forest-800)}

/* ── search call to action ───────────────────────────────────────────────── */
.g-cta{margin:38px 0;padding:26px 26px 28px;background:var(--forest-800);
  border-radius:16px;color:var(--sand-100)}
.g-cta h2{margin:0 0 8px;font-size:21px;color:#fff;font-weight:700}
.g-cta p{margin:0 0 18px;font-size:15px;line-height:1.6;color:var(--sand-200)}
.g-cta a.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:0 24px;background:var(--sand-50);color:var(--forest-800);
  font-size:15.5px;font-weight:700;border-radius:10px;text-decoration:none}
.g-cta a.btn:hover{background:#fff}
.g-cta .small{margin:14px 0 0;font-size:12.5px;color:var(--sand-300)}

/* ── related ─────────────────────────────────────────────────────────────── */
.g-related{margin:44px 0 0;padding:28px 0 0;border-top:1px solid var(--sand-200)}
.g-related h2{margin:0 0 16px;font-size:19px;color:var(--forest-800)}
.g-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.g-cards a{display:block;padding:15px 17px;background:#fff;border:1px solid var(--sand-200);
  border-radius:12px;text-decoration:none;transition:.15s}
.g-cards a:hover{border-color:var(--forest-400);transform:translateY(-2px);box-shadow:var(--shadow)}
.g-cards .r{display:block;font-size:15.5px;font-weight:700;color:var(--forest-800);margin-bottom:3px}
.g-cards .m{display:block;font-size:12.5px;color:var(--muted)}

/* ── hub page listing ────────────────────────────────────────────────────── */
.g-group{margin:0 0 44px}
.g-group h2{margin:0 0 6px;font-size:22px;color:var(--forest-800)}
.g-group > p{margin:0 0 18px;color:var(--muted);font-size:15px}

/* ── footer ──────────────────────────────────────────────────────────────── */
.g-foot{margin-top:64px;background:var(--forest-900);color:#A9BFB2;padding:40px 0 34px;
  font-size:14px}
.g-foot a{color:#A9BFB2}
.g-foot a:hover{color:var(--sand-50)}
.g-foot .tel{margin:0 0 18px;font-size:14px;line-height:1.6;color:var(--sand-200)}
.g-foot .tel a{font-size:17px;font-weight:800;color:var(--sand-50);white-space:nowrap}
.g-foot .legal{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 18px}
.g-foot .c{margin:0;font-size:12.5px;line-height:1.6;color:#7E9488}

@media (max-width:600px){
  /* The phone number is how somebody calls you from an ad landing page, and at
     22px it was under the 44px a thumb needs. It sits mid-sentence, so it
     cannot become a block button without breaking the paragraph — inline-block
     with vertical padding raises the target and leaves the sentence intact. */
  .g-foot .tel a{display:inline-block;padding:11px 0;line-height:22px}

  body{font-size:15.5px}
  .g-nav .in{height:auto;padding:12px 0;flex-wrap:wrap;gap:10px}
  .g-nav .brand svg{width:132px}
  .g-nav .links{margin-left:0;flex:1 0 100%;gap:16px}
  .g-nav .links a{font-size:13px}
  .g-cta{padding:22px 20px 24px}
  .g-body h2{font-size:22px;margin-top:36px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}