/* ============================================================
   Go West With Marc — fluid layout system
   One column model, fluid gutters, fluid type. Grids use auto-fit
   so column counts fall out of the available width instead of a
   list of breakpoints that has to be kept in sync.
   ============================================================ */

:root{
  --ink:#16211c; --muted:#5d6b64; --line:#e2e7e3;
  --sea:#0f5c58; --sea-d:#0a4340; --sand:#f6f1e7; --sun:#c8622f; --paper:#fffdf9;
  --shadow:0 12px 30px rgba(16,40,34,.10);

  /* fluid spine */
  --gutter:clamp(16px, 4vw, 44px);
  --max:1600px;
  --read:74ch;

  /* fluid rhythm */
  --gap:clamp(16px, 2.2vw, 28px);
  --section:clamp(44px, 7vw, 88px);

  /* fluid type */
  --fs-body:clamp(16px, 0.55vw + 15px, 18px);
  --fs-lead:clamp(17px, 0.7vw + 15px, 20px);
  --fs-h1:clamp(30px, 5.2vw, 56px);
  --fs-h2:clamp(24px, 3vw, 34px);
  --fs-h3:clamp(19px, 1.3vw + 15px, 23px);
  --fs-small:clamp(13px, 0.3vw + 12px, 14.5px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:var(--fs-body)/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--sea)}
h1,h2,h3,h4{font-family:Georgia,"Times New Roman",serif;letter-spacing:-.015em;
  text-wrap:balance;overflow-wrap:break-word}
p{overflow-wrap:break-word}

/* ---- the spine ---------------------------------------------------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{width:100%;max-width:var(--read);margin-inline:auto;padding-inline:var(--gutter)}

/* ---- nav ---------------------------------------------------------- */
nav.site{position:sticky;top:0;z-index:50;background:rgba(255,253,249,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav.site .in{width:100%;max-width:var(--max);margin-inline:auto;
  padding:12px var(--gutter);display:flex;align-items:center;
  justify-content:space-between;gap:clamp(10px,2vw,24px)}
nav.site .logo{font-family:Georgia,serif;font-weight:700;
  font-size:clamp(16px,1.2vw + 13px,20px);text-decoration:none;color:var(--ink);
  letter-spacing:-.01em;white-space:nowrap}
nav.site .logo em{font-style:normal;color:var(--sea)}
nav.site .links{display:flex;align-items:center;gap:clamp(12px,1.6vw,24px);
  font-size:clamp(13px,.4vw + 12px,15px)}
nav.site .links a{color:var(--muted);text-decoration:none;font-weight:600;white-space:nowrap}
nav.site .links a:hover,nav.site .links a[aria-current]{color:var(--sea)}
nav.site .cta{background:var(--sea);color:#fff!important;
  padding:.6em 1.05em;border-radius:99px;white-space:nowrap}
nav.site .cta:hover{background:var(--sea-d)}

/* phone: logo on row one, full navigation centred on row two */
@media(max-width:640px){
  nav.site .in{flex-wrap:wrap;justify-content:center;row-gap:9px;padding-block:10px 11px}
  nav.site .logo{flex:1 1 100%;text-align:center}
  nav.site .links{flex:1 1 100%;justify-content:center}
}

/* ---- type helpers ------------------------------------------------- */
.kicker{text-transform:uppercase;letter-spacing:.2em;
  font-size:clamp(10px,.25vw + 9px,11.5px);color:var(--sea);font-weight:700}
.place{text-transform:uppercase;letter-spacing:.13em;
  font-size:clamp(10px,.25vw + 9px,11.5px);color:var(--sun);font-weight:700}

/* ---- section head ------------------------------------------------- */
.sec-head{display:flex;align-items:baseline;gap:clamp(10px,1.5vw,18px);
  margin:var(--section) 0 var(--gap);flex-wrap:wrap}
.sec-head h2{font-size:var(--fs-h2);margin:0;flex:0 1 auto}
.sec-head .rule{flex:1 1 60px;height:1px;background:var(--line);min-width:24px}
.sec-head .more{font-size:var(--fs-small);color:var(--muted);text-decoration:none;
  font-weight:600;white-space:nowrap}

/* ---- cards -------------------------------------------------------- */
/* 1 up on phones, 2 on tablets, 3 on laptops, 4+ on large screens */
.cards{display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card .shot{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0c1512}
.card .shot img{width:100%;height:100%;object-fit:cover}
.tag{position:absolute;top:10px;left:10px;background:rgba(15,92,88,.94);color:#fff;
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;padding:5px 9px;
  border-radius:4px;font-weight:700}
.card .body{padding:clamp(15px,1.4vw,20px);display:flex;flex-direction:column;gap:9px;flex:1}
.card h3{font-size:var(--fs-h3);line-height:1.28;margin:0}
.card p{margin:0;color:var(--muted);font-size:var(--fs-small);flex:1;line-height:1.6}
.card .foot{display:flex;justify-content:space-between;align-items:center;gap:10px;
  border-top:1px solid var(--line);padding-top:11px;font-size:12.5px;color:var(--muted)}
.card .foot b{color:var(--sea);font-weight:700;white-space:nowrap}

/* ---- masthead ----------------------------------------------------- */
header.mast{border-bottom:3px solid var(--ink);background:var(--sand);text-align:center}
header.mast .wrap{padding-block:clamp(28px,4.5vw,52px) clamp(24px,4vw,44px)}
header.mast h1{font-size:clamp(34px,8vw,84px);line-height:1;margin:.22em 0 .16em}
header.mast .tagline{color:var(--muted);font-style:italic;margin:0;font-size:var(--fs-lead)}

/* ---- page head ---------------------------------------------------- */
.page-head{border-bottom:1px solid var(--line);background:var(--sand)}
.page-head .wrap{padding-block:clamp(28px,4.5vw,52px) clamp(24px,4vw,44px);max-width:900px}
.page-head h1{font-size:var(--fs-h1);line-height:1.1;margin:.25em 0 .28em}
.page-head p{margin:0;color:var(--muted);font-size:var(--fs-lead);max-width:60ch}

/* ---- lead story --------------------------------------------------- */
.lead-wrap{padding-top:var(--section)}
.lead{display:grid;gap:clamp(20px,3vw,44px);align-items:center;
  text-decoration:none;color:inherit;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr))}
.lead-img img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:14px;
  box-shadow:var(--shadow)}
.lead h2{font-size:clamp(26px,3.4vw,44px);line-height:1.14;margin:.28em 0 .32em}
.lead p{color:var(--muted);font-size:var(--fs-lead);margin:0 0 .7em}
.lead-foot{font-size:var(--fs-small);color:var(--sea);font-weight:700;letter-spacing:.03em}
.lead:hover h2{color:var(--sea)}

/* ---- honesty strip ------------------------------------------------ */
.strip{background:var(--sand);border-block:1px solid var(--line);
  margin-top:var(--section);padding-block:clamp(36px,5vw,64px)}
.strip-grid{display:grid;gap:clamp(24px,3.5vw,52px);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.strip h2{font-size:var(--fs-h2);line-height:1.16;margin:.3em 0 .4em}
.strip p{color:var(--muted);margin:0 0 1.1em}
.numbers{display:grid;gap:clamp(10px,1.4vw,18px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.num{background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:clamp(13px,1.3vw,20px)}
.num b{display:block;font-family:Georgia,serif;line-height:1;color:var(--sea);
  font-size:clamp(24px,2.4vw,32px)}
.num span{font-size:clamp(10px,.3vw + 9px,11.5px);text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted)}

/* ---- pills -------------------------------------------------------- */
.pills{display:flex;flex-wrap:wrap;gap:9px}
.pill{border:1px solid var(--line);background:#fff;border-radius:99px;
  padding:.55em 1em;font-size:var(--fs-small);font-weight:600;
  text-decoration:none;color:var(--muted)}
.pill:hover{border-color:var(--sea);color:var(--sea)}
.pill b{color:var(--ink)}

/* ---- buttons ------------------------------------------------------ */
.btn{display:inline-block;background:var(--sea);color:#fff;text-decoration:none;
  font-weight:700;padding:.75em 1.4em;border-radius:99px;font-size:var(--fs-small)}
.btn:hover{background:var(--sea-d)}
.btn.light{background:#fff;color:var(--sea)}

/* ---- promo -------------------------------------------------------- */
.promo{margin-top:var(--section);background:var(--sea);color:#fff;border-radius:16px;
  padding:clamp(24px,3vw,42px);display:flex;align-items:center;
  justify-content:space-between;gap:clamp(18px,2.5vw,32px);flex-wrap:wrap}
.promo h2{margin:.2em 0 .35em;font-size:var(--fs-h2)}
.promo p{margin:0;opacity:.92;max-width:52ch}

/* ---- footer ------------------------------------------------------- */
footer.site{margin-top:var(--section);border-top:3px solid var(--ink);background:var(--sand)}
footer.site .in{width:100%;max-width:var(--max);margin-inline:auto;
  padding:clamp(28px,3.5vw,44px) var(--gutter);
  display:grid;gap:clamp(22px,3vw,36px);font-size:var(--fs-small);color:var(--muted);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
footer.site h4{margin:0 0 12px;font-size:15.5px;color:var(--ink)}
footer.site a{color:var(--muted);text-decoration:none;display:block;margin-bottom:7px}
footer.site a:hover{color:var(--sea)}
footer.site .legal{border-top:1px solid var(--line);
  padding:16px var(--gutter);font-size:12.5px;color:var(--muted);
  max-width:var(--max);margin-inline:auto}

/* ---- draft banner ------------------------------------------------- */
.draft{background:var(--sun);color:#fff;text-align:center;font-weight:600;
  font-size:clamp(11.5px,.3vw + 11px,13px);padding:8px var(--gutter);line-height:1.45}
.draft a{color:#fff;text-decoration:underline}