/* ============================================================
   UK Boarding Pass — Shared Site Stylesheet
   Loaded by every page. Page-specific styles (hero, ticket,
   article components, download card, etc.) stay inline per-page
   since they're genuinely unique to that page's layout.
   ============================================================ */

:root{
  --navy:#1C2B45;
  --navy-deep:#141F33;
  --ivory:#F1ECDD;
  --ivory-soft:#EDE7D9;
  --stamp:#A63A2E;
  --slate:#8B93A6;
  --line: rgba(237,231,217,0.18);
}

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

body{
  background:var(--navy);
  color:var(--ivory-soft);
  font-family:'Fraunces', serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

.mono{ font-family:'IBM Plex Mono', monospace; }
.wrap{ max-width:760px; margin:0 auto; padding:0 24px; }

/* ---------- NAV (shared across every page) ---------- */
.sitenav{ display:flex; justify-content:space-between; align-items:center; padding-top:28px; flex-wrap:wrap; gap:14px; margin-bottom:8px; }
.sitenav a{ color:var(--ivory-soft); text-decoration:none; }
.brand{ font-family:'IBM Plex Mono', monospace; font-size:14px; letter-spacing:0.03em; }
.navlinks{ display:flex; gap:22px; flex-wrap:wrap; }
.navlink{ font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.02em; color:var(--slate); white-space:nowrap; border-bottom:1px solid transparent; padding-bottom:2px; }
.navlink:hover{ color:var(--ivory-soft); border-bottom-color:var(--stamp); }

/* ---------- COMMON TYPOGRAPHY ---------- */
.kicker{ font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--stamp); margin-bottom:14px; }
h1{ font-size:clamp(30px,4.8vw,42px); font-weight:500; line-height:1.2; max-width:14em; }
.lede{ margin-top:16px; font-size:16px; color:var(--slate); max-width:34em; }
h2{ font-size:clamp(26px,4vw,34px); font-weight:500; max-width:16em; line-height:1.2; margin-bottom:20px; }

/* ---------- FORMS / BUTTONS (shared) ---------- */
form.capture{ display:flex; gap:10px; flex-wrap:wrap; }
input[type=email]{
  flex:1; min-width:200px; padding:13px 14px; border-radius:8px; border:1.5px solid #3a4a68;
  font-family:'IBM Plex Mono', monospace; font-size:14px; background:var(--navy-deep); color:var(--ivory-soft);
}
input[type=email]::placeholder{ color:var(--slate); }
input[type=email]:focus{ outline:2px solid var(--stamp); outline-offset:1px; }
button.cta, a.cta{
  display:inline-block; padding:13px 22px; border-radius:8px; border:none; cursor:pointer;
  background:var(--stamp); color:var(--ivory); text-decoration:none;
  font-family:'IBM Plex Mono', monospace; font-size:14px; font-weight:600;
  transition: background 0.15s ease;
}
button.cta:hover, a.cta:hover{ background:#8f3125; }
button.cta:focus-visible, a.cta:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.form-note{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:#8f9bb5; margin-top:8px; width:100%; }
.success-msg{ font-family:'IBM Plex Mono', monospace; font-size:14px; color:#7fbf8f; display:none; margin-top:12px; }

/* ---------- CARD LIST (blog index + area pages) ---------- */
.list{ padding:16px 0 72px; }
.card{ display:block; text-decoration:none; color:inherit; padding:24px 0; border-bottom:1px solid var(--line); }
.card:first-child{ padding-top:16px; }
.card:last-child{ border-bottom:none; }
.card-meta{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--slate); margin-bottom:8px; }
.card-title{ font-size:21px; font-weight:500; color:#fff; margin-bottom:8px; max-width:26em; }
.card:hover .card-title{ color:var(--stamp); }
.card-excerpt{ font-size:15px; color:var(--slate); max-width:32em; }
.growing-note{ font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--slate); padding:20px 0 60px; border-top:1px solid var(--line); margin-top:8px; }

/* ---------- ARTICLE SCANNABLE COMPONENTS (article pages) ---------- */
.body{ font-size:17px; color:var(--ivory-soft); max-width:34em; margin-top:24px; }
.body h2{ font-size:23px; font-weight:500; color:#fff; margin:36px 0 14px; line-height:1.3; }
.body p{ margin-bottom:18px; }
.body ul{ margin:0 0 18px 20px; }
.body li{ margin-bottom:8px; }
.body strong{ color:#fff; }
hr.rule{ border:none; border-top:1px solid var(--line); margin:44px 0 24px; }
.disclaimer{ font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--slate); line-height:1.6; font-style:italic; }
.backlink{ display:inline-block; margin-top:40px; font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--slate); text-decoration:none; }
.backlink:hover{ color:var(--ivory-soft); }

.tldr{ border:1.5px dashed rgba(237,231,217,0.3); border-radius:10px; padding:22px 24px; margin:26px 0 6px; }
.tldr-label{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.08em; color:var(--stamp); margin-bottom:12px; }
.tldr ul{ margin:0; padding-left:18px; }
.tldr li{ font-size:15px; color:var(--ivory-soft); margin-bottom:8px; line-height:1.5; }
.tldr li:last-child{ margin-bottom:0; }

.stat-grid{ display:flex; gap:14px; flex-wrap:wrap; margin:22px 0; }
.stat-card{ flex:1; min-width:150px; background:var(--ivory); color:var(--navy-deep); border-radius:10px; padding:16px 18px; }
.stat-num{ font-family:'IBM Plex Mono', monospace; font-size:24px; font-weight:600; line-height:1.15; }
.stat-label{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:#5a6478; margin-top:6px; letter-spacing:0.01em; }

.pull-quote{ font-size:21px; line-height:1.5; font-style:italic; color:#fff; border-left:3px solid var(--stamp); padding-left:20px; margin:30px 0; max-width:29em; }
.callout{ border-left:3px solid var(--stamp); background:rgba(166,58,46,0.09); padding:15px 20px; border-radius:0 8px 8px 0; margin:22px 0; font-size:14.5px; color:var(--ivory-soft); }
.callout strong{ color:#fff; }
.deadline-banner{ display:flex; align-items:center; gap:12px; background:var(--stamp); color:var(--ivory); padding:13px 20px; border-radius:8px; margin:22px 0 30px; font-family:'IBM Plex Mono', monospace; font-size:13px; }

/* ---------- AREA TILES (homepage) ---------- */
.area-tiles{ display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }
.area-tile{
  font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--ivory-soft);
  border:1px solid var(--line); border-radius:10px; padding:14px 18px; text-decoration:none;
  flex:1; min-width:150px; text-align:center;
}
.area-tile:hover{ border-color:var(--stamp); color:#fff; background:rgba(166,58,46,0.08); }

/* ---------- RESOURCES / DOWNLOAD CARD ---------- */
.download-card{
  background:var(--ivory); color:var(--navy-deep); border-radius:14px;
  padding:32px 32px; display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  margin-bottom:36px;
}
.download-icon{ font-size:36px; }
.download-text{ flex:1; min-width:220px; }
.download-title{ font-size:19px; font-weight:500; margin-bottom:4px; }
.download-meta{ font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:#5a6478; }
.download-btn{
  display:inline-block; background:var(--stamp); color:var(--ivory); text-decoration:none;
  padding:13px 24px; border-radius:8px; font-family:'IBM Plex Mono', monospace; font-size:14px; font-weight:600;
  white-space:nowrap;
}
.download-btn:hover{ background:#8f3125; }
.phase-list{ margin:36px 0; }
.phase-item{ display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); font-size:15px; }
.phase-item:last-child{ border-bottom:none; }
.phase-num{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--stamp); flex-shrink:0; padding-top:2px; }