/* ═══════════════════════════════════════════════════════════════════════════
   RailReserve — shared stylesheet for the legal / info pages.
   ---------------------------------------------------------------------------
   Session 5. These pages are DESKTOP-BRAND ONLY: they carry the RailReserve
   name and the forest-green + warm-sand palette from index.html's .d-root.
   They are NOT part of the mobile replica and must never carry the other
   design's name — Trap 2 in HANDOFF applies here too.

   The palette below is copied from index.html's :root rather than imported,
   because these pages must stand alone if index.html is ever restructured.
   If you change a brand colour, change it in BOTH places.
   ═══════════════════════════════════════════════════════════════════════════ */
: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;
  --ff:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--ff);background:var(--sand-50);color:var(--ink);
  font-size:16px;line-height:1.65}

/* ── header ─────────────────────────────────────────────────────────────── */
.l-nav{position:sticky;top:0;z-index:40;background:rgba(250,246,238,.92);
  backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--sand-200)}
.l-nav .wrap{max-width:900px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;gap:18px}
.l-brand{display:inline-flex;align-items:center;gap:9px;font-weight:800;letter-spacing:.5px;
  font-size:15px;color:var(--forest-800);text-decoration:none;text-transform:uppercase}
.l-brand svg{flex:0 0 auto}
.l-nav .back{margin-left:auto;font-size:14px;font-weight:600;color:var(--forest-700);
  text-decoration:none;border-bottom:1.5px solid transparent}
.l-nav .back:hover{border-bottom-color:var(--forest-500)}

/* ── page body ──────────────────────────────────────────────────────────── */
.l-wrap{max-width:900px;margin:0 auto;padding:44px 24px 80px}
.l-kicker{font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--forest-500);margin:0 0 10px}
h1{font-size:38px;line-height:1.15;font-weight:800;color:var(--forest-900);margin:0 0 14px;
  letter-spacing:-.5px}
.l-meta{font-size:14px;color:var(--forest-700);opacity:.8;margin:0 0 34px;
  padding-bottom:22px;border-bottom:1px solid var(--sand-200)}
h2{font-size:22px;line-height:1.3;font-weight:700;color:var(--forest-800);margin:38px 0 12px}
h3{font-size:17px;font-weight:700;color:var(--forest-800);margin:26px 0 8px}
p{margin:0 0 14px}
ul,ol{margin:0 0 16px;padding-left:22px}
li{margin:0 0 8px}
a{color:var(--forest-600)}
a:hover{color:var(--clay)}
strong{font-weight:700;color:var(--forest-900)}

/* the yellow box marks every detail the owner still has to supply. Deliberately
   loud — nothing here should reach a live site unreviewed. */
.l-todo{background:#FFF8E1;border:1px solid #E8C86A;border-left:4px solid #D99B1C;
  border-radius:6px;padding:14px 18px;margin:0 0 22px;font-size:14.5px}
.l-todo b{color:#7A5200}

.l-note{background:var(--sand-100);border:1px solid var(--sand-200);border-radius:8px;
  padding:16px 20px;margin:0 0 20px;font-size:15px}

table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:15px}
th,td{text-align:left;padding:10px 12px;border:1px solid var(--sand-200);vertical-align:top}
th{background:var(--sand-100);font-weight:700;color:var(--forest-800)}

/* ── footer ─────────────────────────────────────────────────────────────── */
.l-foot{background:var(--forest-900);color:var(--sand-100);margin-top:60px}
.l-foot .wrap{max-width:900px;margin:0 auto;padding:34px 24px}
.l-foot a{color:var(--sand-200);text-decoration:none;font-size:14px}
.l-foot a:hover{color:#fff;text-decoration:underline}
.l-foot .tel{margin:0 0 18px;font-size:14px;line-height:1.6}
.l-foot .tel a{font-size:17px;font-weight:800;color:var(--sand-50);white-space:nowrap}
.l-foot .links{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 18px}
.l-foot .fine{font-size:13px;opacity:.72;margin:0;line-height:1.6}

@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. */
  .l-foot .tel a{display:inline-block;padding:11px 0;line-height:22px}
  /* The "Book by phone" number in the body of contact.html, same reasoning. */
  .l-wrap a[href^="tel:"]{display:inline-block;padding:11px 0;line-height:22px}

  .l-wrap{padding:30px 18px 60px}
  h1{font-size:29px}
  h2{font-size:19px}
  .l-nav .wrap,.l-foot .wrap{padding-left:18px;padding-right:18px}

  /* Phone tables. The Contact and Cookie tables are three columns and one cell
     holds a long unbroken string — an email address, a cookie name. Left alone
     the table refuses to shrink and the WHOLE PAGE scrolls sideways: measured
     436px of content in a 360px screen on Contact, 369px on Cookies. Fixed
     layout forces equal columns, and the break rule lets the long string wrap
     instead of holding the column open. Desktop is untouched. */
  table{table-layout:fixed}
  th,td{padding:9px 9px;font-size:14px;overflow-wrap:anywhere;word-break:break-word}
}