/* Retiring Nomadic — shared design tokens + components
   One stylesheet across every page (no build step). Personal-blog elements
   (byline, video block, journey cards) live alongside the marketplace
   components (guide cards, scorecard) so both read as one site, not two. */

:root{
  --bg:#f6f3ec; --surface:#ffffff; --surface-2:#efe9db;
  --ink:#1c2624; --ink-soft:#4b5a56; --muted:#7c8a86; --line:#dcd6c6;
  --harbor:#1f5f5b; --harbor-ink:#153f3c; --harbor-soft:#e3ede9;
  --brass:#a8783a; --brass-soft:#f2e3cc;
  --tag-nomad:#4a6e8a; --tag-nomad-soft:#e5edf3;
  --shadow: 0 1px 2px rgba(28,38,36,.06), 0 8px 24px -12px rgba(28,38,36,.18);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:'Work Sans', system-ui, sans-serif; font-size:16px; line-height:1.6; }
a{ color:var(--harbor); text-decoration:none; }
a:hover{ color:var(--harbor-ink); }
h1,h2,h3{ font-family:'Fraunces', Georgia, serif; font-weight:600; text-wrap:balance; margin:0; }
.mono{ font-family:'IBM Plex Mono', monospace; letter-spacing:.04em; }
.wrap{ max-width:1200px; margin:0 auto; padding:0 40px; }
img, svg{ display:block; max-width:100%; }
.eyebrow{ display:flex; align-items:center; gap:.6rem; font-size:11px; text-transform:uppercase; color:var(--brass); margin-bottom:14px; }
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--brass); }

/* nav */
header.site{ border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:18px 0; gap:20px; }
.brand{ font-size:19px; font-weight:600; flex-shrink:0; }
.nav-links{ display:flex; gap:20px; font-size:11.5px; text-transform:uppercase; color:var(--ink-soft); flex-wrap:wrap; }
.nav-links a{ color:var(--ink-soft); }
.nav-links a.current{ color:var(--harbor); }
.nav-links a:hover{ color:var(--harbor); }
.nav-actions{ display:flex; gap:10px; align-items:center; flex-shrink:0; }

.btn{ display:inline-flex; align-items:center; justify-content:center; padding:11px 20px; border-radius:6px; font-weight:600; font-size:13.5px; cursor:pointer; border:1.5px solid transparent; font-family:'IBM Plex Mono', monospace; letter-spacing:.02em; }
.btn-primary{ background:var(--harbor); color:#fff; }
.btn-primary:hover{ background:var(--harbor-ink); color:#fff; }
.btn-ghost{ border-color:var(--line); color:var(--ink); background:transparent; }
.btn-ghost:hover{ border-color:var(--harbor); color:var(--harbor); }
.btn-light{ background:#fff; color:var(--harbor-ink); }

.card{ background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); }
.ph{ background:repeating-linear-gradient(45deg, #ececE4, #ececE4 6px, #f4f2ea 6px, #f4f2ea 12px); border:1px dashed #c9c4b4; border-radius:6px; display:flex; align-items:center; justify-content:center; }
.ph span{ font-size:12px; color:var(--muted); text-align:center; padding:0 20px; }

/* page header (non-home pages) */
.page-hero{ padding:48px 0 36px; border-bottom:1px solid var(--line); }
.page-hero h1{ font-size:clamp(26px,3.4vw,38px); margin-bottom:12px; max-width:22ch; }
.page-hero p{ font-size:15px; color:var(--ink-soft); max-width:56ch; margin:0; }
.breadcrumb{ font-size:11px; color:var(--muted); margin-bottom:14px; }
.breadcrumb a{ color:var(--muted); }

section{ padding:48px 0; }
section.tight{ padding:28px 0; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:22px; gap:16px; flex-wrap:wrap; }
.section-head h2{ font-size:24px; }
.section-head .sub{ font-size:12px; color:var(--muted); max-width:44ch; }

/* personal / byline strip — the "this is a real person" element, reused across pages */
.byline{ display:flex; align-items:center; gap:16px; padding:18px 22px; }
.byline .avatar{ width:56px; height:56px; border-radius:50%; flex-shrink:0; background:var(--surface-2); border:1px dashed #c9c4b4; display:flex; align-items:center; justify-content:center; font-size:9px; color:var(--muted); text-align:center; }
.byline .who{ font-weight:600; font-size:14px; }
.byline .what{ font-size:12.5px; color:var(--muted); }
.byline .links{ margin-left:auto; display:flex; gap:14px; font-size:11px; }

/* video / social embed block */
.video-block{ display:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:center; }
.video-frame{ aspect-ratio:16/9; border-radius:10px; overflow:hidden; position:relative; }
.video-frame .ph{ height:100%; }
.video-frame .play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.video-frame .play svg{ width:52px; height:52px; }
.video-copy p{ font-size:14.5px; color:var(--ink-soft); line-height:1.6; max-width:44ch; margin:0 0 18px; }

/* chips / tags */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; cursor:pointer; font-size:13px; font-weight:500; background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--line); }
.chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--muted); flex-shrink:0; }
.chip.active{ background:var(--harbor); color:#fff; border-color:var(--harbor); }
.chip.active .dot{ background:#fff; }
.tag{ display:inline-block; font-size:10px; text-transform:uppercase; padding:3px 9px; border-radius:5px; background:var(--tag-nomad-soft); color:var(--tag-nomad); }
.tag.harbor{ background:var(--harbor-soft); color:var(--harbor-ink); }
.tag.brass{ background:var(--brass-soft); color:var(--brass); }

/* grids */
.grid-3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
.grid-2{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; }
.grid-4{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }

/* guide / resource / blog cards */
.g-card{ overflow:hidden; display:flex; flex-direction:column; }
.g-photo{ width:100%; aspect-ratio:16/9; }
.g-body{ padding:16px 18px; }
.g-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; gap:8px; }
.g-top h3{ font-size:16px; }
.g-price{ font-size:12px; color:var(--harbor); white-space:nowrap; }
.g-meta{ font-size:10px; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.g-body p{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:0; }

.blog-card{ display:flex; gap:16px; padding:16px; align-items:flex-start; }
.blog-thumb{ width:120px; aspect-ratio:4/3; flex-shrink:0; border-radius:6px; }
.blog-body h3{ font-size:15px; margin-bottom:4px; }
.blog-body .meta{ font-size:10.5px; color:var(--muted); margin-bottom:8px; }
.blog-body p{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:0; }

/* score panel */
.score-row{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.score-row .name{ width:130px; font-size:12px; color:var(--ink-soft); flex-shrink:0; }
.score-row .track{ flex:1; height:8px; background:var(--surface-2); border-radius:4px; overflow:hidden; }
.score-row .fill{ height:100%; background:var(--harbor); opacity:.9; }
.score-row .num{ width:28px; text-align:right; font-size:11px; color:var(--muted); }

/* band (dark callout) */
.band{ padding:34px 36px; display:flex; align-items:center; gap:40px; background:var(--harbor-ink); border-color:var(--harbor-ink); flex-wrap:wrap; }
.band .copy{ flex:1; min-width:260px; }
.band .tag-lead{ font-size:11px; text-transform:uppercase; color:#8fc9c1; margin-bottom:10px; }
.band h2{ font-size:24px; color:#fff; margin-bottom:10px; max-width:24ch; }
.band p{ font-size:14px; color:#cfe4e0; max-width:48ch; margin:0; line-height:1.6; }

/* footer */
footer.site{ border-top:1px solid var(--line); padding:28px 0; }
.footer-row{ display:flex; justify-content:space-between; align-items:center; font-size:11px; color:var(--muted); flex-wrap:wrap; gap:14px; }
.footer-links, .footer-social{ display:flex; gap:18px; flex-wrap:wrap; }
.footer-social a{ color:var(--muted); }
.footer-social a:hover{ color:var(--harbor); }

@media (max-width: 900px){
  .wrap{ padding:0 20px; }
  .grid-3, .grid-2, .grid-4{ grid-template-columns:1fr; }
  .video-block{ grid-template-columns:1fr; }
  .nav-links{ display:none; }
  .footer-row{ flex-direction:column; align-items:flex-start; }
  .band{ padding:26px 22px; }
}