/* ============================================================
   VASHON WORKS — marketing site
   Built strictly from the Vashon Works design system
   (Harbor Navy / Ferry Ivory, tracked Montserrat, square corners)
   ============================================================ */
:root{
  --vw-navy-900:#0A1C3B; --vw-navy-800:#172844; --vw-navy-700:#233A5C;
  --vw-navy-600:#35507A; --vw-navy-500:#4D6792; --vw-navy-400:#7288AB;
  --vw-navy-300:#9CACC5; --vw-navy-200:#C4CEDD; --vw-navy-100:#E2E8F0;
  --vw-white:#FFFFFF; --vw-ivory-050:#FAF8F6; --vw-ivory-100:#F5F1ED;
  --vw-ivory-200:#EBE4DC; --vw-ivory-300:#DCD2C6;
  --vw-scrim:rgba(10,28,59,.55); --vw-scrim-soft:rgba(10,28,59,.32);
  --vw-scrim-deep:rgba(10,28,59,.74);
  --vw-hairline:rgba(10,28,59,.14); --vw-hairline-dark:rgba(245,241,237,.22);
  --vw-font:"Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
  --tr-wordmark:.42em; --tr-eyebrow:.34em; --tr-label:.12em;
  --dur-fast:140ms; --dur-med:240ms; --dur-slow:420ms;
  --ease:cubic-bezier(.2,.6,.2,1);
  --shadow-card:0 2px 6px rgba(10,28,59,.07);
  --shadow-photo:0 18px 40px rgba(10,28,59,.18);
  --protect-bottom:linear-gradient(to top,rgba(10,28,59,.78) 0%,rgba(10,28,59,.32) 42%,rgba(10,28,59,0) 78%);

  /* ---- Accent extension (2026-08-31): amber = action, blue = state.
         Components use the semantic roles, never the raw ramp. ---- */
  --vw-amber-900:#5C3A14; --vw-amber-700:#8A5B24; --vw-amber-600:#A87237;
  --vw-amber-500:#C68A45; --vw-amber-400:#D6A469; --vw-amber-300:#E4C29A;
  --vw-amber-200:#F0DCC4; --vw-amber-100:#F8EEE1;

  --vw-accent-action:var(--vw-amber-500);
  --vw-accent-action-hover:var(--vw-amber-400);
  --vw-accent-action-press:var(--vw-amber-600);
  --vw-accent-action-text:var(--vw-amber-700);
  --vw-accent-action-quiet:var(--vw-amber-100);
  --vw-accent-on-action:var(--vw-navy-900);

  --vw-accent-state:var(--vw-navy-500);
  --vw-accent-state-hover:var(--vw-navy-600);
  --vw-accent-state-quiet:#F1F4F8;
  --vw-accent-on-state:var(--vw-ivory-100);

  --vw-link:var(--vw-amber-700);
  --vw-link-hover:var(--vw-navy-900);
  --vw-link-on-dark:var(--vw-amber-400);
  --vw-link-on-dark-hover:var(--vw-ivory-100);

  --vw-success:#4F7A46; --vw-success-quiet:#E9F0E6;
  --vw-caution:#B5822C; --vw-caution-quiet:#FAF0DC;
  --vw-error:#A8452F;   --vw-error-quiet:#F8E7E2;
  --vw-info:#4D6792;    --vw-info-quiet:#F1F4F8;

  --vw-chart-1:#0A1C3B; --vw-chart-2:#C68A45; --vw-chart-3:#4D6792;
  --vw-chart-4:#E4C29A; --vw-chart-5:#9CACC5; --vw-chart-6:#8A5B24;
  --vw-chart-grid:rgba(10,28,59,.14);

  --vw-tier-day:var(--vw-ivory-200);      --vw-tier-day-fg:var(--vw-navy-900);
  --vw-tier-member:var(--vw-navy-500);    --vw-tier-member-fg:var(--vw-ivory-100);
  --vw-tier-founding:var(--vw-amber-500); --vw-tier-founding-fg:var(--vw-navy-900);
}
*{box-sizing:border-box;margin:0;padding:0}
/* Author-origin display rules (e.g. .pm form{display:grid}) outrank the UA's
   [hidden]{display:none}, so el.hidden silently stops working. Every modal here
   swaps panels with .hidden — without this they'd render both at once. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--vw-ivory-100);color:var(--vw-navy-900);
  font-family:var(--vw-font);font-size:17px;line-height:1.52;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--vw-link)}
a:hover{color:var(--vw-link-hover)}
:focus-visible{outline:2px solid var(--vw-accent-state);outline-offset:2px}
.info-bar :focus-visible,.hero :focus-visible,.band.dark :focus-visible,
footer :focus-visible,.gate :focus-visible{outline-color:var(--vw-navy-300)}
strong{font-weight:700}
.wrap{max-width:1180px;margin:0 auto;padding-inline:5.2%}
@media (min-width:1246px){.wrap{padding-inline:0}}

/* ---------- type utilities ---------- */
.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:var(--tr-eyebrow);
  text-transform:uppercase;text-indent:var(--tr-eyebrow);
}
.eyebrow.quiet{text-transform:lowercase}
.headline{
  font-weight:700;text-transform:uppercase;line-height:1.08;
  letter-spacing:-.005em;font-size:clamp(34px,5vw,56px);
  margin-top:22px;
}
.subhead{font-size:clamp(19px,2.2vw,24px);font-weight:600;line-height:1.35}
.lead{font-size:21px;line-height:1.4}
.body-max{max-width:46ch}
/* the double underline — 3px rule with a shorter 2px echo */
.rule{margin-top:20px;width:150px}
.rule::before{content:"";display:block;height:3px;background:var(--vw-navy-900)}
.rule::after{content:"";display:block;height:2px;background:var(--vw-navy-900);width:62%;margin-top:3px}
.on-dark .rule::before,.on-dark .rule::after{background:var(--vw-ivory-100)}
.tri{color:var(--vw-navy-500);font-size:12px;line-height:1.6;flex:none}
.on-dark .tri{color:var(--vw-navy-400)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;border:0;cursor:pointer;text-decoration:none;
  font-family:var(--vw-font);font-size:13px;font-weight:600;
  letter-spacing:var(--tr-label);text-indent:var(--tr-label);text-transform:uppercase;
  padding:16px 30px;border-radius:0;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.btn-primary{background:var(--vw-navy-900);color:var(--vw-ivory-100)}
.btn-primary:hover{background:var(--vw-navy-700);color:var(--vw-ivory-100)}
/* The action accent — one amber mark per screen: headline word OR button, never both */
.btn-accent{background:var(--vw-accent-action);color:var(--vw-accent-on-action)}
.btn-accent:hover{background:var(--vw-accent-action-hover);color:var(--vw-accent-on-action)}
.btn-accent:active{background:var(--vw-accent-action-press);color:var(--vw-accent-on-action)}
.btn-ghost{background:transparent;color:var(--vw-navy-900);border:1px solid var(--vw-navy-900)}
.btn-ghost:hover{background:rgba(10,28,59,.06);color:var(--vw-navy-900)}
.btn-inverse{background:var(--vw-ivory-100);color:var(--vw-navy-900)}
.btn-inverse:hover{background:var(--vw-ivory-200);color:var(--vw-navy-900)}
.btn-ghost-inverse{background:transparent;color:var(--vw-ivory-100);border:1px solid var(--vw-ivory-100)}
.btn-ghost-inverse:hover{background:rgba(245,241,237,.12);color:var(--vw-ivory-100)}

/* ---------- header stack (announcement bar + nav) ----------
   Only index.html uses this wrapper. .nav stays position:fixed on its own
   for pages that render it standalone (donate.html, the partner page) —
   the more specific .header-stack .nav rule below overrides that only
   when nav is nested inside the stack, so the two never conflict. */
.header-stack{position:fixed;inset:0 0 auto 0;z-index:50}
.header-stack .nav{position:static;inset:auto}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  transition:background var(--dur-med) var(--ease),box-shadow var(--dur-med) var(--ease);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding-block:16px;
}
.nav-mark{display:flex;align-items:center;gap:14px;text-decoration:none}
.nav-mark img{height:34px;width:auto}
.nav-word{
  color:var(--vw-ivory-100);font-weight:300;font-size:14px;
  letter-spacing:var(--tr-wordmark);text-indent:var(--tr-wordmark);
  text-transform:uppercase;line-height:1.5;white-space:nowrap;
}
.nav-links{display:flex;gap:30px;align-items:center;list-style:none}
.nav-links a{
  color:var(--vw-ivory-100);text-decoration:none;font-size:12px;font-weight:600;
  letter-spacing:var(--tr-label);text-indent:var(--tr-label);text-transform:uppercase;
  padding-bottom:5px;border-bottom:2px solid transparent;
  transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.nav-links a:hover,.nav-links a.active{border-color:currentColor}
.nav .btn{padding:11px 20px}
.nav-links a.btn{border-bottom:0;padding-bottom:11px}
.nav-links a.btn-inverse{color:var(--vw-navy-900)}
.nav.solid{background:var(--vw-ivory-100);box-shadow:inset 0 -1px 0 var(--vw-hairline)}
.nav.solid .nav-word,.nav.solid .nav-links a{color:var(--vw-navy-900)}
.nav.solid .nav-links a.btn-inverse{color:var(--vw-ivory-100)}
.nav.solid .nav-mark .mark-ivory{display:none}
.nav.solid .nav-mark .mark-navy{display:block}
.nav-mark .mark-navy{display:none}
.nav.solid .btn-inverse{background:var(--vw-navy-900);color:var(--vw-ivory-100)}
.nav.solid .btn-inverse:hover{background:var(--vw-navy-700)}
@media (max-width:920px){.nav-links li.hideable{display:none}}
/* The Newsletter link drops out first: with it, the links crowd the wordmark below ~1000px. */
@media (max-width:1000px){.nav-links li.nav-extra{display:none}}
@media (max-width:400px){.nav-word{display:none}}
@media (max-width:640px){
  .nav-mark{min-width:0}
  .nav-word{overflow:hidden}
  .nav-links{gap:16px}
  .nav-links li{display:none}
  .nav-links li.keep{display:block}
  .nav-word{font-size:12px}
}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  background:url("/assets/img/lighthouse-point-robinson.jpg") center/cover no-repeat,var(--vw-navy-900);
  color:var(--vw-ivory-100);
}
.hero::before{content:"";position:absolute;inset:0;background:var(--vw-navy-900);mix-blend-mode:multiply;opacity:.68}
.hero::after{content:"";position:absolute;inset:0;background:rgba(10,28,59,.56)}
.hero>*{position:relative;z-index:1}
.hero .wrap{width:100%}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start;padding-top:var(--header-h,96px)}
.hero-eyebrow{font-size:12px;font-weight:600;letter-spacing:var(--tr-eyebrow);text-indent:var(--tr-eyebrow);text-transform:lowercase}
.hero-center{flex:1;display:grid;place-items:center;padding-block:48px;text-align:center}
/* The design system specs the wordmark at 300. Deliberately heavier here at the
   founders' direction — it also holds up better over the photographic hero.
   Tracking eases off a little because heavy caps need less air than light ones;
   it stays wide enough to read as the brand's signature. */
.wordmark{
  font-weight:700;text-transform:uppercase;color:var(--vw-ivory-100);
  font-size:clamp(44px,9vw,104px);line-height:1.18;
  letter-spacing:.30em;text-indent:.30em;
}
.wordmark-rule{width:118px;height:3px;background:var(--vw-ivory-100);margin:30px auto 34px}
.tagline{
  font-size:clamp(14px,2.2vw,22px);font-weight:400;text-transform:uppercase;
  letter-spacing:var(--tr-eyebrow);text-indent:var(--tr-eyebrow);
}
.hero-sub{margin-top:34px;font-size:17px;max-width:52ch;margin-inline:auto;color:var(--vw-navy-200)}
.hero-cta{margin-top:40px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero-foot{
  display:flex;justify-content:center;align-items:flex-end;
  padding-bottom:34px;font-size:11px;font-weight:600;
  letter-spacing:var(--tr-label);text-indent:var(--tr-label);text-transform:uppercase;
  color:var(--vw-navy-200);
}
.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:10px}
.scroll-cue::after{content:"";width:1px;height:38px;background:var(--vw-navy-200)}

/* ---------- bands (the slide chassis, applied to a page) ---------- */
.band{padding-block:104px;position:relative}
.band.muted{background:var(--vw-ivory-200)}
.band.dark{background:var(--vw-navy-900);color:var(--vw-ivory-100)}
.band.dark .rule::before,.band.dark .rule::after{background:var(--vw-ivory-100)}
@media (max-width:640px){.band{padding-block:72px}}

/* ---------- opportunity ---------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center;margin-top:48px}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:40px}}
.angled{
  position:relative;height:400px;
  clip-path:polygon(9% 0,100% 6%,100% 100%,0 88%);
  background-size:cover;background-position:center;
}
.angled::after{content:"";position:absolute;inset:0;background:var(--vw-scrim-soft)}
@media (max-width:900px){.angled{height:300px}}

/* ---------- third place ---------- */
.tp-diagram{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:0;margin-top:56px}
.tp-box{
  border:3px solid var(--vw-navy-900);padding:34px 18px;text-align:center;
  font-weight:600;font-size:15px;line-height:1.4;background:var(--vw-ivory-100);
}
.tp-box .eyebrow{display:block;font-size:10px;margin-bottom:10px;color:var(--vw-navy-500)}
.tp-box.center{
  background:var(--vw-navy-900);border-color:var(--vw-navy-900);color:var(--vw-ivory-100);
  padding:44px 22px;font-size:17px;
}
.tp-box.center .eyebrow{color:var(--vw-navy-300)}
.tp-link{width:56px;height:3px;background:var(--vw-navy-900)}
@media (max-width:760px){
  .tp-diagram{grid-template-columns:1fr;justify-items:center}
  .tp-link{width:3px;height:36px}
  .tp-box{width:100%;max-width:340px}
}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:64px;border-top:3px solid var(--vw-navy-900);padding-top:40px}
@media (max-width:760px){.stats{grid-template-columns:1fr}}
.stat-num{font-weight:700;font-size:clamp(38px,4.6vw,54px);line-height:1.04;letter-spacing:-.005em}
.stat-label{margin-top:12px;font-size:15px;line-height:1.45;color:var(--vw-navy-600);max-width:30ch}
.stat-note{
  margin-top:36px;display:inline-block;border:1px solid var(--vw-hairline);
  padding:7px 14px;font-size:10px;font-weight:600;letter-spacing:var(--tr-label);
  text-indent:var(--tr-label);text-transform:uppercase;color:var(--vw-navy-500);
}

/* ---------- challenge ---------- */
.four-up{display:grid;grid-template-columns:repeat(4,1fr);gap:3.2%;row-gap:48px;margin-top:56px}
@media (max-width:900px){.four-up{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.four-up{grid-template-columns:1fr}}
.tile{width:72px;height:72px;background:var(--vw-navy-900);display:grid;place-items:center;flex:none}
.tile img{width:58%;height:58%;object-fit:contain}
.opt-label{margin-top:20px;font-size:21px;font-weight:700;text-transform:uppercase}
.opt-virtue{margin-top:10px;font-size:15px;line-height:1.45}
.opt-turn{margin-top:6px;font-size:15px;line-height:1.45;color:var(--vw-navy-600)}
.banner-row{margin-top:64px;display:flex;justify-content:flex-end}
.qbanner{
  display:inline-block;background:var(--vw-navy-500);color:var(--vw-ivory-100);
  padding:15px 36px;border-radius:999px;font-size:clamp(15px,1.8vw,17px);line-height:1.35;
}
.qbanner.navy{background:var(--vw-navy-900)}
@media (max-width:640px){.banner-row{justify-content:center}}

/* ---------- section breaks (full-bleed statements) ---------- */
.break{
  position:relative;min-height:64vh;display:grid;place-items:center;
  background-size:cover;background-position:center;padding:12% 5.2%;
}
.break::before{content:"";position:absolute;inset:0;background:var(--vw-scrim)}
.break-frame{
  position:relative;border:3px solid var(--vw-ivory-100);
  padding:clamp(28px,5vw,54px) clamp(30px,6vw,72px);text-align:center;
  color:var(--vw-ivory-100);font-weight:700;text-transform:uppercase;
  font-size:clamp(24px,3.6vw,40px);line-height:1.12;max-width:18em;
  background:var(--vw-scrim-soft);
}
.break-tag{
  margin-top:18px;font-weight:400;font-size:clamp(12px,1.6vw,15px);
  letter-spacing:var(--tr-eyebrow);text-indent:var(--tr-eyebrow);text-transform:uppercase;
}

/* ---------- solution ---------- */
.sol-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:0;margin-top:56px;align-items:stretch}
.sol-grid>*{min-width:0}
@media (max-width:900px){.sol-grid{grid-template-columns:1fr}}
.sol-panel{background:var(--vw-navy-900);color:var(--vw-ivory-100);padding:clamp(34px,4.5vw,64px)}
.sol-panel .headline{font-size:clamp(30px,3.6vw,44px);margin-top:18px}
.sol-panel p{margin-top:24px;max-width:40ch;color:var(--vw-navy-200)}
.sol-beats{margin-top:38px;display:grid;gap:4px}
.sol-beats div{font-size:21px;font-weight:600;line-height:1.35}
.sol-list{background:var(--vw-white);padding:clamp(34px,4.5vw,64px);display:flex;flex-direction:column;justify-content:center}
.sol-list-head{display:flex;gap:10px;align-items:baseline;font-weight:700;font-size:19px;text-transform:uppercase;letter-spacing:.02em}
.sol-list ul{list-style:none;margin-top:26px;display:grid;gap:16px}
.sol-list li{
  display:flex;gap:10px;align-items:baseline;
  font-size:clamp(16px,1.8vw,19px);font-weight:400;text-transform:uppercase;
  letter-spacing:.06em;line-height:1.3;
}
.sol-photo{height:340px;background:url("/assets/img/community-table.jpg") center/cover;position:relative}
.sol-photo::after{content:"";position:absolute;inset:0;background:var(--vw-scrim-soft)}
@media (max-width:900px){.sol-photo{height:260px}}

/* ---------- features ---------- */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:3.2%;row-gap:48px;margin-top:56px}
@media (max-width:900px){.features{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.features{grid-template-columns:1fr}}
.feature img{aspect-ratio:4/3;object-fit:cover;width:100%}
.feature-label{margin-top:18px;font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.feature p{margin-top:10px;font-size:15px;line-height:1.52;color:var(--vw-navy-200);max-width:26ch}

/* ---------- membership ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px}
@media (max-width:900px){.tiers{grid-template-columns:1fr}}
.tier{padding:34px 28px;display:flex;flex-direction:column;gap:16px}
.tier h3{font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.tier p{font-size:15px;line-height:1.55;flex:1}
.tier .btn{align-self:flex-start}

/* ---------- concierge ---------- */
.brackets{position:relative;padding:14px}
.brackets img{width:100%;height:440px;object-fit:cover;object-position:center 20%}
.brackets span{position:absolute;width:34px;height:34px;border:0 solid var(--vw-navy-900)}
.brackets .tl{top:0;left:0;border-top-width:5px;border-left-width:5px}
.brackets .tr{top:0;right:0;border-top-width:5px;border-right-width:5px}
.brackets .bl{bottom:0;left:0;border-bottom-width:5px;border-left-width:5px}
.brackets .br{bottom:0;right:0;border-bottom-width:5px;border-right-width:5px}
@media (max-width:900px){.brackets img{height:340px}}
.host-beats{margin-top:36px;display:grid;gap:4px}
.host-beats div{font-size:clamp(19px,2.4vw,24px);font-weight:600;line-height:1.35}

/* ---------- access ---------- */
.timeline{margin-top:64px;border-top:3px solid var(--vw-navy-900);display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.t-step{padding-top:0}
.t-step .dot{width:12px;height:12px;background:var(--vw-navy-900);margin-top:-7.5px}
.t-step .time{margin-top:16px;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.t-step .beat{margin-top:6px;font-size:14px;line-height:1.45;color:var(--vw-navy-600);max-width:16ch}
@media (max-width:760px){
  .timeline{grid-template-columns:1fr;border-top:0;border-left:3px solid var(--vw-navy-900);gap:32px;padding-left:0}
  .t-step{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline}
  .t-step .dot{margin:0 0 0 -7.5px}
  .t-step .time{margin-top:0}
  .t-step .beat{grid-column:2}
}
.access-banner{margin-top:72px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
/* the muted navy-500 badge text fails contrast on navy grounds */
.band.dark .badge{color:var(--vw-navy-200);border-color:var(--vw-hairline-dark)}
.badge{
  display:inline-block;border:1px solid var(--vw-hairline);
  padding:7px 14px;font-size:10px;font-weight:600;letter-spacing:var(--tr-label);
  text-indent:var(--tr-label);text-transform:uppercase;color:var(--vw-navy-500);
}

/* ---------- event notice ---------- */
.event-panel{background:var(--vw-white);border-top:3px solid var(--vw-navy-900);padding:clamp(28px,4vw,44px)}
.event-facts{display:grid;gap:22px}
.event-facts dt{font-size:11px;font-weight:600;letter-spacing:var(--tr-label);text-indent:var(--tr-label);text-transform:uppercase;color:var(--vw-navy-500)}
.event-facts dd{margin:6px 0 0;font-size:17px;line-height:1.5;font-weight:600}
.event-facts dd a{font-weight:600}

/* ---------- vashon-local ---------- */
.local-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-top:48px}
@media (max-width:900px){.local-grid{grid-template-columns:1fr;gap:40px}}
.local-list{display:grid;gap:6px}
.local-list div{font-size:clamp(22px,3vw,32px);font-weight:700;text-transform:uppercase;line-height:1.2}
.local-list div span{color:var(--vw-navy-400)}
.local-map{display:grid;place-items:center}
.local-map img{max-height:480px;width:auto;max-width:100%}

/* ---------- vision ---------- */
.vision-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:16px 48px;margin-top:48px;max-width:720px}
.vision-list li{display:flex;gap:10px;align-items:baseline;font-size:17px;line-height:1.4}
@media (max-width:640px){.vision-list{grid-template-columns:1fr}}

/* ---------- join ---------- */
.ways{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:56px}
@media (max-width:900px){.ways{grid-template-columns:1fr}}
.way{
  display:block;text-decoration:none;color:var(--vw-navy-900);
  background:var(--vw-white);padding:32px;box-shadow:inset 0 0 0 1px var(--vw-hairline);
  transition:box-shadow var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.way:hover{box-shadow:inset 0 0 0 1px var(--vw-navy-900),var(--shadow-card);color:var(--vw-navy-900)}
.way .tile{width:64px;height:64px}
.way h3{margin-top:22px;font-size:21px;font-weight:700;text-transform:uppercase}
.way p{margin-top:10px;font-size:15px;line-height:1.5;color:var(--vw-navy-600)}
.way .go{
  margin-top:22px;display:inline-block;font-size:12px;font-weight:600;
  letter-spacing:var(--tr-label);text-indent:var(--tr-label);text-transform:uppercase;
  border-bottom:2px solid var(--vw-navy-900);padding-bottom:4px;
}
.join-cta{margin-top:48px;display:flex;gap:14px;flex-wrap:wrap}
.join-news{margin-top:56px;max-width:560px}
/* ---------- newsletter page (/newsletter) ---------- */
.news-page{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:150px 0 88px}
.news-grid{display:grid;grid-template-columns:1fr minmax(0,420px);gap:56px;align-items:center;width:100%}
@media (max-width:860px){.news-grid{grid-template-columns:1fr;gap:40px}}

/* ---------- footer ---------- */
footer{background:var(--vw-navy-900);color:var(--vw-ivory-100);padding-block:88px 44px}
.foot-grid{display:grid;grid-template-columns:auto 1fr auto;gap:48px;align-items:start}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr;gap:36px}}
.foot-word{
  font-weight:300;font-size:22px;letter-spacing:var(--tr-wordmark);text-indent:var(--tr-wordmark);
  text-transform:uppercase;line-height:1.5;
}
.foot-tag{margin-top:14px;font-size:11px;font-weight:600;letter-spacing:var(--tr-eyebrow);text-indent:var(--tr-eyebrow);text-transform:uppercase;color:var(--vw-navy-300)}
.foot-body{font-size:15px;line-height:1.6;color:var(--vw-navy-200);max-width:46ch}
.foot-body a{color:var(--vw-link-on-dark)}
.foot-body a:hover{color:var(--vw-link-on-dark-hover)}
.foot-team{margin-top:18px;font-size:13px;color:var(--vw-navy-300)}
.foot-lh{height:64px;width:auto}
.foot-slug{
  margin-top:72px;padding-top:24px;border-top:1px solid var(--vw-hairline-dark);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:11px;font-weight:600;letter-spacing:var(--tr-label);text-indent:var(--tr-label);
  text-transform:uppercase;color:var(--vw-navy-400);
}

/* ---------- reveal motion (calm: fade + 10px drift) ----------
   Hidden state applies only once JS has tagged <html class="js">,
   so content is never lost if scripts don't run. */
.js .rv{opacity:0;transform:translateY(10px);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
.js .rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:60ms}.rv-d2{transition-delay:120ms}.rv-d3{transition-delay:180ms}.rv-d4{transition-delay:240ms}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* ---------- partner modal ---------- */
.pm{
  position:fixed;inset:0;margin:auto;height:fit-content;
  max-height:calc(100vh - 48px);overflow:auto;
  border:0;border-top:3px solid var(--vw-navy-900);border-radius:0;padding:0;
  width:min(560px,calc(100vw - 32px));background:var(--vw-ivory-050);
  color:var(--vw-navy-900);font-family:var(--vw-font);
  box-shadow:var(--shadow-raised,0 12px 28px rgba(10,28,59,.14));
}
.pm::backdrop{background:var(--vw-scrim)}
.pm-inner{padding:clamp(26px,5vw,44px)}
.pm-head{display:flex;justify-content:space-between;align-items:flex-start}
.pm-close{
  border:1px solid var(--vw-hairline);background:transparent;cursor:pointer;
  width:36px;height:36px;font-size:20px;line-height:1;color:var(--vw-navy-900);
  transition:background var(--dur-fast) var(--ease);
}
.pm-close:hover{background:rgba(10,28,59,.06)}
.pm-title{margin-top:18px;font-size:clamp(24px,3vw,30px);font-weight:700;text-transform:uppercase;line-height:1.12}
.pm-sub{margin-top:12px;font-size:15px;line-height:1.5;color:var(--vw-navy-600)}
.pm form{margin-top:26px;display:grid;gap:18px}
.pm label{display:grid;gap:8px}
.pm .field-name{
  font-size:11px;font-weight:600;letter-spacing:var(--tr-label);
  text-indent:var(--tr-label);text-transform:uppercase;color:var(--vw-navy-600);
}
.pm input,.pm select,.pm textarea{
  font-family:var(--vw-font);font-size:15px;color:var(--vw-navy-900);
  background:var(--vw-white);border:1px solid var(--vw-hairline);border-radius:0;
  padding:12px 14px;width:100%;
}
.pm textarea{resize:vertical;min-height:120px}
.pm input:focus-visible,.pm select:focus-visible,.pm textarea:focus-visible{
  outline:2px solid var(--vw-navy-500);outline-offset:1px;border-color:var(--vw-navy-500);
}
.pm-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.pm-status{font-size:14px;line-height:1.5;color:var(--vw-navy-600);min-height:0;margin:0}
.pm-status:empty{display:none}
.pm-done{text-align:left;padding-top:6px}
.pm-done-head{font-size:24px;font-weight:700;text-transform:uppercase}
.pm-done p{margin-top:12px;font-size:15px;color:var(--vw-navy-600)}
.pm-done .btn{margin-top:24px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---------- donate page ---------- */
.page-top{padding-top:150px}
.donate-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:start;margin-top:48px}
@media (max-width:900px){.donate-grid{grid-template-columns:1fr;gap:40px}}
.donate-list{list-style:none;margin-top:22px;display:grid;gap:10px;padding:0}
.donate-list li{display:flex;gap:10px;align-items:baseline;font-size:16px;line-height:1.5}
.donate-panel{background:var(--vw-white);border-top:3px solid var(--vw-navy-900);padding:clamp(28px,4vw,44px)}
.donate-panel h3{font-size:21px;font-weight:700;text-transform:uppercase}
.donate-panel p{margin-top:14px;font-size:15px;line-height:1.55;color:var(--vw-navy-600)}
.donate-panel .btn{margin-top:24px}
.donate-note{margin-top:18px;font-size:13px;line-height:1.5;color:var(--vw-navy-500)}


/* ---------- partner gate ---------- */
.gate{
  min-height:100svh;display:grid;place-items:center;padding:24px;
  background:var(--vw-navy-900);color:var(--vw-ivory-100);
}
.gate-frame{border:3px solid var(--vw-ivory-100);padding:clamp(34px,6vw,60px);max-width:460px;width:100%;text-align:center}
.gate-frame img{height:64px;margin:0 auto}
.gate-word{margin-top:22px;font-weight:300;font-size:20px;letter-spacing:var(--tr-wordmark);text-indent:var(--tr-wordmark);text-transform:uppercase;line-height:1.5}
.gate-title{margin-top:26px;font-size:24px;font-weight:700;text-transform:uppercase}
.gate-sub{margin-top:12px;font-size:14px;line-height:1.55;color:var(--vw-navy-200)}
.gate form{margin-top:26px;display:grid;gap:12px}
.gate input{
  font-family:var(--vw-font);font-size:16px;text-align:center;color:var(--vw-navy-900);
  background:var(--vw-white);border:1px solid var(--vw-hairline);border-radius:0;padding:13px 14px;width:100%;
}
.gate input:focus-visible{outline:2px solid var(--vw-navy-400);outline-offset:1px}
.gate-error{margin-top:14px;font-size:13px;line-height:1.5;color:var(--vw-navy-300)}
.gate-foot{margin-top:26px;font-size:12px;color:var(--vw-navy-400)}
.gate-foot a{color:var(--vw-link-on-dark)}
.gate-foot a:hover{color:var(--vw-link-on-dark-hover)}

/* ---------- partner page ---------- */
.conf-badge{
  display:inline-block;border:1px solid var(--vw-hairline-dark);
  padding:7px 14px;font-size:10px;font-weight:600;letter-spacing:var(--tr-label);
  text-indent:var(--tr-label);text-transform:uppercase;color:var(--vw-navy-300);
}
.band .conf-badge.on-light{border-color:var(--vw-hairline);color:var(--vw-navy-500)}
.p-hero{background:var(--vw-navy-900);color:var(--vw-ivory-100);padding:170px 0 96px}
.p-status{margin-top:44px;border-top:1px solid var(--vw-hairline-dark);padding-top:24px;display:flex;gap:40px;flex-wrap:wrap}
.p-status div{font-size:14px;line-height:1.5;color:var(--vw-navy-200);max-width:24ch}
.p-status strong{display:block;color:var(--vw-ivory-100);font-size:15px}
.signals{display:grid;grid-template-columns:1fr 1fr;gap:40px 64px;margin-top:56px}
@media (max-width:820px){.signals{grid-template-columns:1fr}}
.signal h4{font-size:13px;font-weight:700;letter-spacing:var(--tr-label);text-indent:var(--tr-label);text-transform:uppercase;color:var(--vw-navy-500)}
.signal p{margin-top:10px;font-size:16px;line-height:1.55;max-width:52ch}
.table-scroll{overflow-x:auto;margin-top:56px}
.ptable{width:100%;border-collapse:collapse;border-top:3px solid var(--vw-navy-900);min-width:680px}
.band.dark .ptable{border-top-color:var(--vw-ivory-100)}
.ptable th{
  text-align:left;font-size:11px;font-weight:600;letter-spacing:var(--tr-label);
  text-indent:var(--tr-label);text-transform:uppercase;color:var(--vw-navy-500);
  padding:16px 18px 12px 0;border-bottom:1px solid var(--vw-hairline);
}
.ptable td{
  font-size:15px;line-height:1.5;padding:16px 18px 16px 0;vertical-align:top;
  border-bottom:1px solid var(--vw-hairline);
}
.ptable td:first-child{font-weight:700}
.ptable .num{white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl-note{margin-top:18px;font-size:13px;line-height:1.55;color:var(--vw-navy-500);max-width:70ch}
.ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:56px}
@media (max-width:1000px){.ladder{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.ladder{grid-template-columns:1fr}}
.rung{background:var(--vw-white);border-top:3px solid var(--vw-navy-900);padding:28px;box-shadow:inset 0 0 0 1px var(--vw-hairline)}
.rung h3{font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.rung .amt{margin-top:12px;font-size:24px;font-weight:700;letter-spacing:-.005em}
.rung p{margin-top:12px;font-size:14px;line-height:1.55;color:var(--vw-navy-600)}
.team-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:48px}
@media (max-width:760px){.team-roles{grid-template-columns:1fr}}
.team-roles h4{font-size:17px;font-weight:700;text-transform:uppercase}
.team-roles p{margin-top:8px;font-size:14px;line-height:1.5;color:var(--vw-navy-600)}

/* ---------- island conditions ---------- */
.island-grid{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:48px;align-items:start;margin-top:52px}
@media (max-width:900px){.island-grid{grid-template-columns:1fr;gap:36px}}
.island-chart{position:relative;background:var(--vw-navy-900);box-shadow:inset 0 0 0 1px var(--vw-hairline-dark)}
.island-chart svg{display:block;width:100%;height:auto;max-height:660px;margin:0 auto}
@media (max-width:900px){.island-chart{max-width:360px;margin-inline:auto}}
.isl-dock{fill:var(--vw-navy-300)}
.isl-hull{fill:var(--vw-ivory-100)}
.moving .isl-hull{fill:var(--vw-accent-action)}
.isl-pulse{fill:var(--vw-accent-action);opacity:.14}
@media (prefers-reduced-motion:no-preference){
  .isl-pulse{animation:islPulse 2.6s var(--ease) infinite}
  @keyframes islPulse{0%{r:8;opacity:.26}70%{r:22;opacity:0}100%{r:22;opacity:0}}
}
.foot .isl-hull{fill:var(--vw-navy-200)}

.island-readouts{display:grid;gap:0}
.isl-row{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding-bottom:28px;border-bottom:1px solid var(--vw-hairline-dark)}
@media (max-width:640px){.isl-row{grid-template-columns:1fr 1fr;gap:20px}}
.isl-cell .isl-label{
  font-size:10px;font-weight:600;letter-spacing:var(--tr-label);text-indent:var(--tr-label);
  text-transform:uppercase;color:var(--vw-navy-300);
}
.isl-cell .isl-value{margin-top:8px;font-size:clamp(22px,2.6vw,30px);font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.isl-cell .isl-sub{margin-top:6px;font-size:13px;line-height:1.4;color:var(--vw-navy-200)}
.isl-boats{margin-top:28px}
.isl-boats h3{
  font-size:10px;font-weight:600;letter-spacing:var(--tr-label);text-indent:var(--tr-label);
  text-transform:uppercase;color:var(--vw-navy-300);
}
.isl-boats ul{list-style:none;margin-top:14px;display:grid;gap:10px}
.isl-boats li{display:flex;justify-content:space-between;gap:18px;font-size:15px;line-height:1.4;border-bottom:1px solid rgba(245,241,237,.08);padding-bottom:9px}
.isl-vn{font-weight:600;white-space:nowrap}
.isl-vd{color:var(--vw-navy-200);text-align:right;font-size:14px}
.isl-none{color:var(--vw-navy-300);font-size:14px}
.island-attrib{margin-top:34px;font-size:11px;line-height:1.6;color:var(--vw-navy-400);max-width:78ch}
.island-attrib a{color:var(--vw-navy-300)}
.island-attrib a:hover{color:var(--vw-ivory-100)}
.isl-alert{
  margin-top:22px;padding:12px 16px;border-left:3px solid var(--vw-accent-action);
  background:rgba(198,138,69,.10);font-size:14px;line-height:1.45;color:var(--vw-ivory-100);
}

/* ---------- illustration honesty notes ---------- */
.img-note{
  margin-top:26px;font-size:12px;line-height:1.5;color:var(--vw-navy-300);max-width:62ch;
}
.brackets[data-note]::after{
  content:attr(data-note);display:block;margin-top:14px;
  font-size:11px;line-height:1.5;color:var(--vw-navy-500);
}

/* ---------- live conditions bar (top band) ---------- */
.info-bar{background:var(--vw-navy-900);color:var(--vw-ivory-100);border-bottom:1px solid var(--vw-hairline-dark)}
.info-bar-inner{
  max-width:1180px;margin:0 auto;padding:9px 5.2%;
  display:flex;align-items:center;gap:14px;
}
@media (min-width:1246px){.info-bar-inner{padding-inline:0}}
.info-bar-icon{width:15px;height:15px;flex:none;fill:var(--vw-accent-action)}

/* the departure board: one continuous scroll, paused on hover so it's readable */
.ticker{
  flex:1;min-width:0;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 20px,#000 calc(100% - 20px),transparent);
  mask-image:linear-gradient(to right,transparent,#000 20px,#000 calc(100% - 20px),transparent);
}
.ticker-track{display:inline-flex;white-space:nowrap;will-change:transform}
.ticker-track.run{animation:tickerScroll var(--ticker-dur,60s) linear infinite}
.ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused}
@keyframes tickerScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.tick{
  display:inline-flex;align-items:baseline;gap:8px;padding-right:34px;
  font-size:12px;font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--vw-navy-200);
}
.tick-route{color:var(--vw-navy-300)}
.tick-arrow{color:var(--vw-navy-500)}
.tick-time{color:var(--vw-ivory-100);font-variant-numeric:tabular-nums}
.tick-in{color:var(--vw-accent-action-hover)}
.tick.foot .tick-route{color:var(--vw-navy-200)}
.tick.foot .tick-tag{
  font-size:9px;padding:1px 5px;border:1px solid var(--vw-hairline-dark);color:var(--vw-navy-300);
}

.info-bar-now{
  flex:none;display:flex;align-items:center;
  font-size:11px;font-weight:600;letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--vw-navy-300);
}
.info-bar-now span:empty{display:none}
.info-bar-now span:not(:empty)~span:not(:empty)::before{content:"·";margin:0 8px;color:var(--vw-navy-500)}

@media (max-width:760px){.info-bar-now{display:none}}  /* the island panel carries these */
@media (max-width:560px){.tick{font-size:10px;padding-right:24px}.info-bar-inner{gap:9px;padding-block:8px}}

/* a scrolling strip is motion; respect the preference and let people scroll it */
@media (prefers-reduced-motion:reduce){
  .ticker{overflow-x:auto}
  .ticker-track.run{animation:none}
}

/* ---------- event popup ---------- */
.ev-facts{margin-top:24px;display:grid;gap:16px}
.ev-facts dt{
  font-size:10px;font-weight:600;letter-spacing:var(--tr-label);
  text-indent:var(--tr-label);text-transform:uppercase;color:var(--vw-navy-500);
}
.ev-facts dd{margin:5px 0 0;font-size:16px;line-height:1.45;font-weight:600}
.ev-pop .pm-actions{margin-top:28px}

/* ---------- event promo band (persistent, full-width, right below the fold) ---------- */
.ev-band{border-top:1px solid var(--vw-hairline-dark);padding-block:88px}
.ev-band-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.ev-band-grid>*{min-width:0}
.ev-band .headline{font-size:clamp(30px,4.2vw,48px)}
.ev-band-lead{margin-top:28px;font-size:17px;line-height:1.55;color:var(--vw-navy-200);max-width:50ch}
.ev-band-facts{margin-top:34px;display:grid;grid-template-columns:repeat(3,auto);gap:20px 44px;justify-content:start}
.ev-band-facts dt{
  font-size:10px;font-weight:600;letter-spacing:var(--tr-label);text-indent:var(--tr-label);
  text-transform:uppercase;color:var(--vw-navy-300);
}
.ev-band-facts dd{margin:7px 0 0;font-size:15px;line-height:1.45;font-weight:600}
.ev-band-actions{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap}
/* the photo takes the site's angled treatment but skips the navy scrim: food should look warm */
.ev-band-media{position:relative}
.angled.vivid::after{display:none}
/* the QR tile sits on the photo's square corner: navy modules on an ivory card, so it scans */
.ev-qr{
  position:absolute;right:22px;bottom:22px;
  display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;
  width:172px;padding:14px 14px 12px;background:var(--vw-ivory-050);color:var(--vw-navy-900);
  box-shadow:var(--shadow-photo);transition:background var(--dur-fast) var(--ease);
}
.ev-qr:hover{background:var(--vw-white);color:var(--vw-navy-900)}
.ev-qr svg{display:block;width:132px;height:132px;color:var(--vw-navy-900)}
.ev-qr-cap{margin-top:2px;font-size:10px;font-weight:600;letter-spacing:var(--tr-label);text-indent:var(--tr-label);text-transform:uppercase}
.ev-qr-url{font-size:11px;color:var(--vw-navy-600)}
@media (max-width:900px){.ev-band-grid{grid-template-columns:1fr;gap:44px}}
@media (max-width:640px){
  .ev-band{padding-block:64px}
  .ev-band-facts{grid-template-columns:1fr;gap:16px}
  .ev-band-media .angled{height:260px}
  .ev-qr{display:none}   /* a code on your own phone screen can't be scanned; the button remains */
}

/* ---------- event banner (persistent, full-width, docked to the bottom) ----------
   A solid bar in the light brand color, not a widget: square corners, the navy
   rule on top, two lines of copy with room to breathe, one navy button, and no
   dismiss — it stays for the whole visit. It is fixed and shares every screen
   with that screen's own amber mark, so its CTA is navy. */
body{padding-bottom:var(--ev-dock-h,0px)}   /* the page ends above the bar */
.hero{padding-bottom:var(--ev-dock-h,0px)}  /* the hero's buttons clear it too */
.ev-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  background:var(--vw-ivory-050);color:var(--vw-navy-900);
  border-top:3px solid var(--vw-navy-900);
  box-shadow:0 -10px 30px rgba(10,28,59,.12);
}
.ev-banner-inner{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;padding-block:22px}
.ev-banner-copy{min-width:0}
.ev-banner .eyebrow{font-size:10px;color:var(--vw-navy-500)}
.ev-banner-title{margin-top:8px;font-size:clamp(17px,1.5vw,20px);font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1.2}
.ev-banner-title a{color:inherit;text-decoration:none}
.ev-banner-title a:hover{color:var(--vw-navy-900);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.ev-banner-detail{margin-top:8px;font-size:14px;line-height:1.5;color:var(--vw-navy-600);max-width:78ch}
.ev-banner-cta{white-space:nowrap}
@media (max-width:760px){
  .ev-banner-inner{grid-template-columns:1fr;gap:14px;padding-block:18px}
  .ev-banner .eyebrow{display:none}          /* the detail line already carries the date */
  .ev-banner-title{margin-top:0}
  .ev-banner-detail{font-size:13px}
  .ev-banner-more{display:none}
  .ev-banner-cta{justify-self:start;padding:13px 22px}
}
@media (max-width:640px){.ev-banner-where{display:none}}   /* date and time only on phones; the bar has no dismiss */

/* ---------- ferry markers ---------- */
.isl-house{fill:var(--vw-navy-900);opacity:.55}
.moving .isl-house{fill:var(--vw-navy-900);opacity:.42}

/* ---------- refresh control ---------- */
.isl-refresh-row{
  margin-top:22px;padding-top:16px;border-top:1px solid rgba(245,241,237,.08);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.isl-updated{font-size:11px;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--vw-navy-400)}
.isl-refresh{
  background:transparent;border:1px solid var(--vw-hairline-dark);color:var(--vw-navy-200);
  font-family:var(--vw-font);font-size:10px;font-weight:600;letter-spacing:var(--tr-label);
  text-indent:var(--tr-label);text-transform:uppercase;padding:7px 14px;cursor:pointer;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.isl-refresh:hover:not(:disabled){background:rgba(245,241,237,.10);color:var(--vw-ivory-100)}
.isl-refresh:disabled{opacity:.55;cursor:default}

/* ---------- team hub (/team-hub) ----------
   Internal page for the founders: message templates and the newsletter
   builder. Everything here is composed from the tokens and patterns above
   (rung cards, .pm form fields, the tracked label style). Placeholders that
   still need filling use the caution role, not amber: amber = action, and
   a card can have several placeholders but only one amber mark per screen. */
.hub-lead{margin-top:26px;font-size:17px;line-height:1.55;max-width:56ch;color:var(--vw-navy-600)}
.p-hero :focus-visible{outline-color:var(--vw-navy-300)}
.band.dark .hub-lead,.p-hero .hub-lead{color:var(--vw-navy-200)}
.btn-sm{padding:11px 20px;font-size:12px}

/* channel tabs: the nav's tracked label with the 2px rule for the active state */
.hub-tabs{display:flex;gap:30px;margin-top:44px;border-bottom:1px solid var(--vw-hairline);overflow-x:auto;scrollbar-width:none}
.hub-tabs::-webkit-scrollbar{display:none}
.hub-tab{
  background:none;border:0;cursor:pointer;white-space:nowrap;
  font-family:var(--vw-font);font-size:12px;font-weight:600;letter-spacing:var(--tr-label);
  text-indent:var(--tr-label);text-transform:uppercase;color:var(--vw-navy-500);
  padding:12px 0 14px;border-bottom:3px solid transparent;margin-bottom:-1px;
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.hub-tab:hover{color:var(--vw-navy-900)}
.hub-tab[aria-selected="true"]{color:var(--vw-navy-900);border-color:var(--vw-navy-900)}
.hub-tab:focus-visible{outline-offset:-3px}   /* the strip clips overflow, so the ring draws inside */
.hub-tab .count{margin-left:8px;color:var(--vw-navy-500);letter-spacing:0;text-indent:0}
@media (max-width:640px){.hub-tabs{gap:16px}}
@media (max-width:360px){.hub-tabs{flex-wrap:wrap;gap:0 16px;overflow:visible}}

/* template cards */
.tpl-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px}
@media (max-width:960px){.tpl-grid{grid-template-columns:1fr}}
.tpl{background:var(--vw-white);border-top:3px solid var(--vw-navy-900);box-shadow:inset 0 0 0 1px var(--vw-hairline);padding:28px;display:flex;flex-direction:column;gap:14px}
.tpl-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.tpl h3{font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1.3}
.tpl-chans{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;flex:0 1 auto;min-width:0}
@media (max-width:560px){.tpl-head{flex-direction:column;gap:10px}.tpl-chans{justify-content:flex-start}}
.tpl-chans span{font-size:9px;font-weight:600;letter-spacing:var(--tr-label);text-indent:var(--tr-label);text-transform:uppercase;color:var(--vw-navy-500);border:1px solid var(--vw-hairline);padding:4px 8px}
.tpl-note{font-size:14px;line-height:1.5;color:var(--vw-navy-600)}
/* the editor: a real textarea over a mirror that paints the placeholder highlights */
.tpl-editor{position:relative}
.tpl-mirror,.tpl-editor textarea{
  font-family:var(--vw-font);font-size:15px;line-height:1.6;font-weight:400;letter-spacing:normal;
  padding:14px;border:1px solid var(--vw-hairline);width:100%;
  white-space:pre-wrap;overflow-wrap:break-word;word-break:normal;
  -webkit-hyphens:none;hyphens:none;tab-size:4;
}
.tpl-mirror{position:absolute;inset:0;color:transparent;background:var(--vw-white);pointer-events:none;overflow:hidden;user-select:none}
.tpl-mirror mark{color:transparent;background:var(--vw-caution-quiet);box-shadow:inset 0 -2px 0 var(--vw-caution)}
.tpl-editor textarea{
  position:relative;display:block;background:transparent;color:var(--vw-navy-900);
  border-radius:0;resize:vertical;overflow:auto;min-height:120px;
}
.tpl-editor textarea:focus-visible{outline:2px solid var(--vw-navy-500);outline-offset:1px;border-color:var(--vw-navy-500)}
.tpl-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.tpl-actions{display:flex;gap:10px;flex-wrap:wrap}
.tpl-status{font-size:12px;font-weight:600;letter-spacing:var(--tr-label);text-indent:var(--tr-label);text-transform:uppercase;color:var(--vw-navy-500);min-height:1em}
.tpl-todo{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--vw-navy-600)}
.tpl-todo:empty{display:none}
.tpl-todo span{font-size:12px;font-weight:600;padding:3px 8px;background:var(--vw-caution-quiet);color:var(--vw-navy-900);box-shadow:inset 0 -2px 0 var(--vw-caution)}
/* the comma between chips is for screen readers only */
.tpl-todo .sep{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;background:none;box-shadow:none;padding:0}
.tpl-empty{margin-top:36px;font-size:15px;color:var(--vw-navy-600)}

/* newsletter builder */
.nl-step{margin-top:56px}
.hub-lead+.nl-step{margin-top:44px}
.nl-help{margin-top:10px;font-size:15px;line-height:1.55;color:var(--vw-navy-600);max-width:64ch}
.nl-panel{margin-top:20px;background:var(--vw-white);border-top:3px solid var(--vw-navy-900);box-shadow:inset 0 0 0 1px var(--vw-hairline);padding:clamp(22px,3vw,32px)}
.nl-fields{display:grid;gap:18px}
.nl-fields.two{grid-template-columns:1fr 1fr}
@media (max-width:820px){.nl-fields.two{grid-template-columns:1fr}}
.nl-field{display:grid;gap:8px;min-width:0;align-content:start}
.nl-fields .field-name,.nl-section-head .field-name{display:block;font-size:11px;font-weight:600;letter-spacing:var(--tr-label);text-indent:var(--tr-label);text-transform:uppercase;color:var(--vw-navy-600)}
.nl-fields .field-hint{font-size:12px;line-height:1.45;color:var(--vw-navy-500)}
.nl-fields input,.nl-fields textarea,.nl-section input{
  font-family:var(--vw-font);font-size:15px;line-height:1.55;color:var(--vw-navy-900);
  background:var(--vw-white);border:1px solid var(--vw-hairline);border-radius:0;
  padding:12px 14px;width:100%;
}
.nl-fields textarea{resize:vertical;min-height:120px}
.nl-fields input:focus-visible,.nl-fields textarea:focus-visible{outline:2px solid var(--vw-navy-500);outline-offset:1px;border-color:var(--vw-navy-500)}
.nl-actions{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.nl-status{font-size:12px;font-weight:600;letter-spacing:var(--tr-label);text-indent:var(--tr-label);text-transform:uppercase;color:var(--vw-navy-500)}
/* fill-ins panel and section rows */
.nl-h{font-size:13px;font-weight:700;letter-spacing:var(--tr-label);text-indent:var(--tr-label);text-transform:uppercase;color:var(--vw-navy-500)}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.panel-head>div{min-width:0;flex:1 1 320px}
.panel-head .nl-help{margin-top:8px}
.panel-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.fills{margin-top:36px}
.nl-fields.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.nl-fields.three{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.nl-fields.three{grid-template-columns:1fr}}
.fill-key{font-weight:400;letter-spacing:0;text-indent:0;text-transform:none;color:var(--vw-navy-500);margin-left:6px}
.md-ex{font-family:inherit;font-size:14px;padding:1px 6px;background:var(--vw-ivory-200);color:var(--vw-navy-900)}
.nl-section{margin-top:18px;padding-top:18px;border-top:1px solid var(--vw-hairline);display:grid;gap:8px}
.nl-section-head{display:flex;align-items:center;gap:12px}
.nl-section-head .field-name{flex:none}
@media (max-width:480px){.nl-section-head{flex-wrap:wrap}.nl-section-head .field-name{flex-basis:100%}}
.nl-section-head input{flex:1;min-width:0;font-weight:600}
.nl-remove{
  flex:none;border:1px solid var(--vw-hairline);background:transparent;cursor:pointer;
  width:36px;height:36px;font-size:20px;line-height:1;color:var(--vw-navy-900);
  transition:background var(--dur-fast) var(--ease);
}
.nl-remove:hover{background:rgba(10,28,59,.06)}
.nl-section textarea{
  font-family:var(--vw-font);font-size:15px;line-height:1.55;color:var(--vw-navy-900);
  background:var(--vw-white);border:1px solid var(--vw-hairline);border-radius:0;
  padding:12px 14px;width:100%;min-height:120px;resize:vertical;
}
.nl-section textarea:focus-visible,.nl-section input:focus-visible{outline:2px solid var(--vw-navy-500);outline-offset:1px;border-color:var(--vw-navy-500)}
/* preview + outputs */
.nl-preview{margin-top:20px;background:var(--vw-ivory-050);box-shadow:inset 0 0 0 1px var(--vw-hairline);padding:clamp(18px,3vw,32px);overflow:auto}
.nl-preview:empty{display:none}
.nl-out{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}
@media (max-width:900px){.nl-out{grid-template-columns:1fr}}
.nl-out textarea{
  font-family:var(--vw-font);font-size:13px;line-height:1.5;
  color:var(--vw-navy-900);background:var(--vw-white);border:1px solid var(--vw-hairline);border-radius:0;
  padding:12px 14px;width:100%;min-height:260px;resize:vertical;
}
.nl-out .field-name{font-size:11px;font-weight:600;letter-spacing:var(--tr-label);text-indent:var(--tr-label);text-transform:uppercase;color:var(--vw-navy-600)}
.nl-out>div{display:grid;gap:10px;align-content:start}
.nl-out .tpl-actions{margin-top:2px}

/* the team hub's own hero foot: the lock button beside the badge */
.hub-hero-foot{margin-top:36px;display:flex;gap:18px;flex-wrap:wrap;align-items:center}
/* the gate/hub swap is a class on <html>, set in the page's head script so a
   remembered browser never flashes the gate; no JS means it stays locked */
.hub-locked #hub{display:none}
html:not(.hub-locked) #gate{display:none}