/* ═══════════════════════════════════════════════════════════════════════
   The main page — beaches, landmarks, fishing, homes, the island.

   Sits on portal.css, which owns the tokens, the sky and the footer. This
   file is the content that used to live on five separate pages.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Sticky section nav ────────────────────────────────────────────────
   Appears once you are past the sky. On a page this long, knowing where
   you are is the difference between reading it and bouncing. */

.secnav{
  position:sticky;top:0;z-index:20;
  background:rgba(11,36,48,.96);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.secnav .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;
  padding-block:8px}
.secnav .wrap::-webkit-scrollbar{display:none}
.secnav a{
  flex:0 0 auto;padding:9px 15px;border-radius:999px;
  font-size:13px;font-weight:600;color:#A9C0CB;white-space:nowrap;
  transition:background .18s,color .18s;
}
.secnav a:hover{background:rgba(255,255,255,.1);color:#fff}
.secnav a.on{background:var(--sea);color:#fff}

/* ── Filters ───────────────────────────────────────────────────────────
   Two rows, because the two questions are different: which coast (a fact
   about the weather that day) and what you want to do there. */

.filters{
  display:grid;gap:16px;margin-bottom:clamp(26px,3vw,40px);
  padding:clamp(18px,2.2vw,26px);background:var(--sand-2);
  border:1px solid var(--rule);border-radius:10px;
}
.frow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.flab{
  font-size:10.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--ink-3);flex:0 0 92px;
}
.fbtns{display:flex;flex-wrap:wrap;gap:7px}
.fbtns button{
  padding:9px 15px;border-radius:999px;border:1px solid var(--rule);
  background:#fff;font:inherit;font-size:13.5px;font-weight:600;
  color:var(--ink-2);cursor:pointer;transition:all .18s;
  display:inline-flex;align-items:center;gap:7px;
}
.fbtns button i{
  font-style:normal;font-size:11px;font-weight:800;padding:1px 6px;
  border-radius:999px;background:var(--sand-2);color:var(--ink-3);
}
.fbtns button:hover{border-color:var(--sea)}
.fbtns button.on{background:var(--ink);color:var(--sand);border-color:var(--ink)}
.fbtns button.on i{background:rgba(255,255,255,.2);color:var(--sand)}
@media (max-width:620px){ .flab{flex-basis:100%} }

.fnone{padding:36px 0;text-align:center;color:var(--ink-3);font-size:15px}

/* ── Beaches ───────────────────────────────────────────────────────────
   A card grid, and the ranking survives it.

   This was a full-width numbered list, on the theory that a grid throws the
   ranking away. It does not — the number is on every card and reading order
   is still 01, 02, 03. What the list actually cost was nine thousand pixels
   of scroll and a dead right-hand third on all twenty-five rows. Beach 15
   sat 6,400px down the page. Nobody was ever reaching the property desk
   below it.

   The access note is a <details> so every card is the same height no matter
   how long that note runs, which is the thing that makes a grid read as
   designed rather than as a pile. */

.beaches{
  display:grid;gap:clamp(14px,1.6vw,20px);
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
}
.beach{
  display:flex;flex-direction:column;
  background:var(--sand);border:1px solid var(--rule);border-radius:12px;
  padding:clamp(18px,1.8vw,24px);
  transition:border-color .18s,transform .18s,box-shadow .18s;
}
.beach:hover{
  border-color:var(--sea);transform:translateY(-3px);
  box-shadow:0 12px 30px -18px rgba(11,36,48,.5);
}
.beach[hidden]{display:none}

.bhead{display:flex;gap:12px;align-items:baseline;margin-bottom:11px}
.bn{
  font-family:Fraunces,Georgia,serif;font-weight:900;
  font-size:clamp(22px,2.2vw,30px);line-height:.9;color:var(--rule);
  letter-spacing:-.04em;flex:0 0 auto;
}
.beach h3{
  font-family:Fraunces,Georgia,serif;font-weight:800;
  font-size:clamp(18px,1.7vw,22px);letter-spacing:-.03em;line-height:1.14;
  margin:0 0 3px;color:var(--ink);
}
.bwhere{font-size:12px;font-weight:700;color:var(--sea);line-height:1.35}
.btags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:11px}
.bt{
  font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 7px;border-radius:4px;background:var(--sand-2);color:var(--ink-3);
}
.bdesc{font-size:14px;line-height:1.62;color:var(--ink-2);margin:0 0 14px}

/* Pinned to the bottom so the map link sits on one line across the row
   even when the descriptions above it differ in length. */
.bfoot{margin-top:auto;display:flex;flex-direction:column;gap:9px;
  align-items:flex-start}
.bget{font-size:13px;line-height:1.6;color:var(--ink-2);width:100%}
.bget summary{
  cursor:pointer;font-size:10px;font-weight:800;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--sea);list-style:none;
  padding:7px 0;border-top:1px solid var(--rule);
}
.bget summary::-webkit-details-marker{display:none}
.bget summary::after{content:" +";font-weight:900}
.bget[open] summary::after{content:" \2212"}
.bget p{margin:0 0 4px;padding:9px 12px;background:var(--sand-2);
  border-left:2px solid var(--sea);border-radius:0 5px 5px 0}
.bmap{font-size:12.5px;font-weight:700;color:var(--sea);
  text-decoration:underline;text-underline-offset:3px}
.bmap:hover{color:var(--ink)}

/* ── Landmarks ─────────────────────────────────────────────────────────── */

.marks{display:grid;gap:clamp(18px,2.4vw,28px);
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.mark{background:#fff;border:1px solid var(--rule);border-radius:10px;
  padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column}
.mkick{font-size:10.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--clay);margin-bottom:10px}
.mark h3{font-family:Fraunces,Georgia,serif;font-weight:900;
  font-size:clamp(21px,2.5vw,27px);letter-spacing:-.03em;line-height:1.08;
  margin:0 0 12px;color:var(--ink)}
.mlede{font-size:14.5px;line-height:1.68;color:var(--ink-2);margin:0 0 16px}
.mfacts,.mwarn{font-size:13px;line-height:1.6;border-radius:5px;
  padding:13px 15px;margin-top:auto}
.mfacts{background:var(--sand-2);color:var(--ink-2);margin-bottom:10px}
.mwarn{background:#FBF3E4;border-left:3px solid #C08A2E;color:#4A3A1C;
  border-radius:0 5px 5px 0}
.mfacts b,.mwarn b{display:block;font-size:9.5px;font-weight:800;
  letter-spacing:1.4px;text-transform:uppercase;margin-bottom:5px}
.mfacts b{color:var(--sea)}
.mwarn b{color:#8A6415}

/* ── Fishing ───────────────────────────────────────────────────────────── */

.seasonnow{display:grid;gap:10px;margin-bottom:clamp(22px,2.6vw,32px)}
.seasonnow:empty{display:none}
.sn{
  display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:8px;
  font-size:14.5px;font-weight:600;line-height:1.5;
}
.sn.open{background:#E4EFE7;color:#14472E;border:1px solid #BEDBC9}
.sn.closed{background:#F8E4DE;color:#7A2A12;border:1px solid #EBC3B7}
.sn b{font-weight:800}

.regs{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:10px;
  overflow:hidden}
.regs li{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;
  background:var(--sand);padding:15px 18px;align-items:start}
.ri{font-size:19px;line-height:1.35}
.rt{font-size:14.5px;line-height:1.62;color:var(--ink-2)}
.seasonbadge{display:inline-block;margin-left:8px;font-size:10.5px;
  font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;vertical-align:1px}
.seasonbadge.open{background:#D6EADD;color:#14472E}
.seasonbadge.closed{background:#F3D5CB;color:#7A2A12}

.subhead{font-family:Fraunces,Georgia,serif;font-weight:800;
  font-size:clamp(18px,2.1vw,24px);letter-spacing:-.025em;
  margin:clamp(30px,3.4vw,46px) 0 16px;color:var(--ink)}
.fine{font-size:12.5px;line-height:1.62;color:var(--ink-3);
  margin:clamp(20px,2.4vw,30px) 0 0;padding-top:16px;
  border-top:1px solid var(--rule);max-width:78ch}

/* ── Route cards ───────────────────────────────────────────────────────── */

.routegrid{display:grid;gap:clamp(12px,1.6vw,18px);
  grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.rt-card,.routegrid .rt{
  display:block;padding:clamp(18px,2.2vw,24px);background:#fff;
  border:1px solid var(--rule);border-radius:9px;
  transition:transform .24s,border-color .24s,box-shadow .24s;
}
.routegrid .rt:hover{transform:translateY(-3px);border-color:var(--sea);
  box-shadow:0 16px 38px -22px rgba(11,36,48,.42)}
.routegrid .rt b{display:block;font-family:Fraunces,Georgia,serif;
  font-weight:800;font-size:17.5px;letter-spacing:-.025em;color:var(--ink);
  margin-bottom:5px;line-height:1.2}
.routegrid .rt span{font-size:13px;line-height:1.55;color:var(--ink-2)}

@media (max-width:620px){
  .bn{font-size:20px}
}

/* ── The directory ─────────────────────────────────────────────────────────
   Forty-five businesses from the trip planner. Grouped by what they are so
   the section reads as sections, with the filter working across all of it. */

.dsec{
  display:flex;align-items:baseline;gap:12px;
  font-family:Fraunces,Georgia,serif;font-weight:900;
  font-size:clamp(19px,2.2vw,26px);letter-spacing:-.03em;color:var(--ink);
  margin:clamp(30px,3.6vw,48px) 0 clamp(14px,1.8vw,22px);
  padding-top:clamp(18px,2.2vw,26px);border-top:1px solid var(--rule);
}
.dsec:first-child{margin-top:0;padding-top:0;border-top:0}
.dsec span{font-family:Archivo,sans-serif;font-size:11.5px;font-weight:800;
  letter-spacing:.08em;padding:3px 9px;border-radius:999px;
  background:var(--sand-2);color:var(--ink-3)}
.dsec[hidden]{display:none}

.bizgrid{display:grid;gap:clamp(12px,1.6vw,18px);
  grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
.biz{
  background:#fff;border:1px solid var(--rule);border-radius:9px;
  padding:clamp(16px,2vw,22px);display:flex;flex-direction:column;
  transition:border-color .2s,box-shadow .2s;
}
.biz:hover{border-color:var(--sea);box-shadow:0 12px 30px -20px rgba(11,36,48,.4)}
.biz[hidden]{display:none}
.bizh{margin-bottom:9px}
.biz h3{font-family:Fraunces,Georgia,serif;font-weight:800;font-size:18px;
  letter-spacing:-.025em;line-height:1.2;margin:0 0 5px;color:var(--ink)}
.star{color:#C08A2E;margin-left:6px;font-size:14px}
.bizmeta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  font-size:11.5px;color:var(--sea);font-weight:700}
.pay,.ver{font-weight:600;padding:2px 7px;border-radius:4px;font-size:10.5px}
.pay{background:var(--sand-2);color:var(--ink-3)}
.ver{background:#E4EFE7;color:#1F5A3C}
.bizd{font-size:13.5px;line-height:1.62;color:var(--ink-2);margin:0 0 14px;flex:1}
.bizr{display:flex;flex-wrap:wrap;gap:7px;padding-top:12px;
  border-top:1px solid var(--rule)}
.bizr a{
  font-size:12.5px;font-weight:700;padding:7px 12px;border-radius:6px;
  background:var(--sand-2);color:var(--ink);transition:all .18s;
}
.bizr a:hover{background:var(--ink);color:var(--sand)}
/* WhatsApp gets the colour, because it is the one that gets answered. */
.bizr a.wa{background:#25D366;color:#06301A}
.bizr a.wa:hover{background:#1EB855;color:#06301A}
.nort{font-size:12.5px;color:var(--ink-3);font-style:italic}

/* ── Private client ────────────────────────────────────────────────────
   A name and a number, not a form. Somebody looking at a private cay does
   not fill in nine fields, and asking them to is the fastest way to prove
   you have never dealt with one. */

.privlines{display:grid;gap:12px;margin-top:clamp(26px,3vw,38px)}
.pl{
  display:block;padding:clamp(16px,2vw,22px);border-radius:9px;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);
  transition:background .2s,border-color .2s,transform .2s;
}
.pl:hover{background:rgba(255,255,255,.12);border-color:var(--surf);
  transform:translateY(-2px)}
.pl span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:#7FA6B8;margin-bottom:7px}
.pl b{display:block;font-family:Fraunces,Georgia,serif;font-weight:800;
  font-size:clamp(17px,2vw,23px);letter-spacing:-.025em;color:#F4EFE3;
  overflow-wrap:anywhere}
.privfine{font-size:12px;line-height:1.6;color:#7FA6B8;margin:20px 0 0;
  max-width:60ch}
@media (min-width:640px){ .privlines{grid-template-columns:1fr 1fr} }

/* ── The hero, in two columns ──────────────────────────────────────────
   The headline used to sit in the left 60% of a 1440px canvas with nothing
   at all in the right third. On the page whose primary job is a property
   referral, the most valuable rectangle above the fold was empty sky.

   It carries the desk now: what we do, who is licensed, and a phone number
   that dials. Everything in it comes from desk.json, so it cannot say a
   different name or number than /buying says. */

.herogrid{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(26px,4vw,64px);align-items:start;
}
@media (max-width:1020px){ .herogrid{grid-template-columns:minmax(0,1fr)} }

.deskcard{
  background:rgba(255,255,255,.90);
  border:1px solid rgba(255,255,255,.9);
  border-radius:14px;padding:clamp(20px,2vw,28px);
  box-shadow:0 22px 50px -28px rgba(8,32,44,.6);
  backdrop-filter:blur(3px);
  /* Optically aligned with the cap-height of the display type beside it
     rather than its line box, which sits higher than it looks. */
  margin-top:clamp(6px,1vw,16px);
}
.dc-eyebrow{
  font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  color:var(--sea);margin-bottom:12px;
}
.dc-lede{
  font-family:Fraunces,Georgia,serif;font-weight:800;
  font-size:clamp(19px,1.7vw,23px);line-height:1.2;letter-spacing:-.02em;
  color:var(--ink);margin:0 0 12px;
}
.dc-body{font-size:14px;line-height:1.66;color:var(--ink-2);margin:0 0 16px}
.dc-body b{color:var(--ink)}
.dc-who{
  border-top:1px solid var(--rule);padding-top:13px;margin-bottom:15px;
  display:flex;flex-direction:column;gap:3px;
}
.dc-who b{font-size:15px;color:var(--ink)}
.dc-who span{font-size:11.5px;line-height:1.5;color:var(--ink-3)}
.dc-who a{color:var(--sea);text-decoration:underline;text-underline-offset:2px}
.dc-ctas{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.dc-call{
  flex:1 1 auto;text-align:center;background:var(--clay);color:#fff;
  font-weight:800;font-size:16px;letter-spacing:.01em;
  padding:13px 18px;border-radius:9px;
  transition:filter .16s,transform .16s;
}
.dc-call:hover{filter:brightness(1.08);transform:translateY(-1px)}
.dc-alt{
  font-size:13px;font-weight:700;color:var(--sea);
  text-decoration:underline;text-underline-offset:3px;
}
.dc-alt:hover{color:var(--ink)}
.dc-fine{font-size:11px;line-height:1.55;color:var(--ink-3);margin:13px 0 0}

/* ── Section headings fill the width ───────────────────────────────────
   Every section on the page put its heading and its standfirst in a single
   narrow column, leaving the right 45% empty — twelve times down the page.
   Splitting them is the oldest trick in magazine layout and it is the
   difference between "a document" and "designed". */

@media (min-width:900px){
  .secheadline{
    /* The 62ch cap is what kept the heading in a narrow column. Splitting
       that cap in two made it worse, not better — both halves got thinner
       and the right 45% stayed empty. The grid has to span the whole wrap. */
    max-width:none;
    display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    gap:clamp(28px,5vw,80px);align-items:end;
  }
  .secheadline .eyebrow,
  .secheadline .kick{grid-column:1 / -1}
  /* 16ch forced almost every heading onto three lines. Wider means
     fewer lines, which is where the height actually goes. */
  .secheadline :is(h1,h2){margin-bottom:0;max-width:24ch}
  .secheadline p{margin-bottom:5px;max-width:46ch}
}

/* The display scale was set for a full-width headline. Sharing the row with
   the desk card, it broke "Twenty-five / beaches." across two lines, which
   loses the three-line rhythm the line breaks were written for. */
@media (min-width:1021px){
  .herogrid .mega{font-size:clamp(40px,5.4vw,82px)}
}

/* ── The front door ────────────────────────────────────────────────────
   The hero's right column used to be the agent's name and a South Carolina
   phone number. Nobody looking at a house on Harbour Island rings
   Charleston to find a Bahamian agent — it reads as a wrong turn, and it
   put the desk in the middle of the one conversation it exists to stay out
   of. Four doors instead, straight into the fan-out. */

.startcard{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.9);
  border-radius:14px;padding:clamp(20px,2vw,28px);
  box-shadow:0 22px 50px -28px rgba(8,32,44,.6);
  backdrop-filter:blur(3px);margin-top:clamp(6px,1vw,16px);
}
.sc-eyebrow{
  font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  color:var(--sea);margin-bottom:10px;
}
.sc-lede{
  font-family:Fraunces,Georgia,serif;font-weight:800;
  font-size:clamp(21px,1.9vw,26px);line-height:1.16;letter-spacing:-.02em;
  color:var(--ink);margin:0 0 16px;
}
.sc-intents{display:grid;gap:8px;margin-bottom:16px}
.intent{
  display:flex;flex-direction:column;gap:2px;text-align:left;
  padding:13px 16px;border-radius:10px;cursor:pointer;
  border:1px solid var(--rule);background:var(--sand);
  font:inherit;color:var(--ink);
  transition:border-color .16s,background .16s,transform .16s;
}
.intent b{font-size:15.5px;font-weight:800}
.intent span{font-size:12px;color:var(--ink-3)}
.intent:hover{border-color:var(--sea);background:#fff;transform:translateX(3px)}
.intent:focus-visible{outline:2px solid var(--sea);outline-offset:2px}

.sc-fine{font-size:12.5px;line-height:1.6;color:var(--ink-2);margin:0 0 12px}
.sc-fine b{color:var(--ink)}
.sc-cred{
  font-size:10.5px;line-height:1.55;color:var(--ink-3);margin:0;
  border-top:1px solid var(--rule);padding-top:11px;
}
.sc-cred a{color:var(--sea);text-decoration:underline;text-underline-offset:2px}

/* ── The qualifying dialog ─────────────────────────────────────────── */

.qdlg{
  border:0;border-radius:16px;padding:0;
  width:min(720px,calc(100% - 28px));max-height:92vh;
  /* Browsers default <dialog> to overflow:auto, but not all of them and not
     at every version. The flow is eight fields tall on a phone — relying on
     a default here means a form somebody cannot reach the bottom of. */
  overflow-y:auto;overscroll-behavior:contain;
  background:var(--sand);color:var(--ink);
  box-shadow:0 40px 90px -30px rgba(8,32,44,.7);
}
.qdlg::backdrop{background:rgba(8,32,44,.62);backdrop-filter:blur(2px)}
.qclose-row{display:flex;justify-content:flex-end;padding:10px 12px 0}
.qclose{
  border:0;background:transparent;cursor:pointer;font-size:26px;line-height:1;
  color:var(--ink-3);padding:4px 8px;border-radius:6px;
}
.qclose:hover{color:var(--ink);background:var(--sand-2)}
.qbody,.qdone{padding:4px clamp(20px,3.4vw,34px) clamp(22px,3vw,30px)}
.qhead{margin-bottom:20px}
.qhead h2{
  font-family:Fraunces,Georgia,serif;font-weight:800;
  font-size:clamp(23px,2.6vw,32px);line-height:1.1;letter-spacing:-.03em;
  margin:0 0 8px;
}
.qhead p{font-size:14px;line-height:1.62;color:var(--ink-2);margin:0;max-width:60ch}

.qgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
@media (max-width:600px){ .qgrid{grid-template-columns:minmax(0,1fr)} }
.qf{display:flex;flex-direction:column;gap:5px;min-width:0}
.qf-wide{grid-column:1 / -1}
.qf[hidden]{display:none}
.qf > span{
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);
}
.qf > span i{font-style:normal;font-weight:600;text-transform:none;letter-spacing:0}
.qf select,.qf input,.qf textarea{
  font:inherit;font-size:15px;color:var(--ink);
  padding:11px 13px;border-radius:9px;
  border:1px solid var(--rule);background:#fff;width:100%;min-width:0;
}
.qf textarea{resize:vertical;line-height:1.55}
.qf select:focus,.qf input:focus,.qf textarea:focus{
  outline:none;border-color:var(--sea);box-shadow:0 0 0 3px rgba(30,126,155,.15);
}
.qcontact{margin-top:18px;padding-top:18px;border-top:1px solid var(--rule)}

.qchips{display:flex;flex-wrap:wrap;gap:6px}
.qchip{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  padding:8px 13px;border-radius:999px;
  border:1px solid var(--rule);background:#fff;
  font-size:13px;font-weight:600;color:var(--ink-2);
  transition:border-color .16s,background .16s,color .16s;
}
.qchip input{
  appearance:none;-webkit-appearance:none;width:12px;height:12px;margin:0;
  border-radius:3px;border:1px solid var(--ink-3);background:transparent;
}
.qchip input:checked{background:var(--sea);border-color:var(--sea)}
.qchip:has(input:checked){border-color:var(--sea);background:#EEF7FA;color:var(--ink)}
.qchip:focus-within{outline:2px solid var(--sea);outline-offset:2px}

/* ── The button ────────────────────────────────────────────────────────
   .btn was defined ONLY in desk.css, which the front page, /building,
   /cost, /fishing-report and /on-the-water do not load — so on five of
   our pages every referral CTA, including the one this whole business
   runs on, was rendering as a raw grey browser button. Same declarations
   as desk.css so the two never disagree; the page that loads both gets
   an identical rule twice, which costs nothing. */
.btn{
  display:inline-block;padding:14px 26px;border-radius:8px;font-weight:700;
  font-family:inherit;font-size:15px;border:1px solid transparent;cursor:pointer;
  transition:transform .2s,box-shadow .2s,background .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--clay);color:#fff;
  box-shadow:0 10px 26px -14px rgba(194,86,47,.9)}
.btn.primary:hover{background:#A8431F}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--sand)}
.btn.big{padding:17px 34px;font-size:16px;margin-top:clamp(24px,3vw,36px)}

.qconsent{
  display:flex;gap:11px;align-items:flex-start;margin:18px 0 0;
  font-size:13px;line-height:1.58;color:var(--ink-2);cursor:pointer;
}
.qconsent input{margin-top:3px;width:16px;height:16px;flex:0 0 auto;accent-color:var(--sea)}
.qactions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:18px}
.qactions .btn{flex:0 0 auto}
.qstatus{font-size:13px;margin:0;color:var(--ink-2)}
.qstatus.err{color:#B3341A;font-weight:700}
.qfine{font-size:11.5px;line-height:1.6;color:var(--ink-3);margin:14px 0 0}

.qdone h2{
  font-family:Fraunces,Georgia,serif;font-weight:800;
  font-size:clamp(24px,3vw,36px);letter-spacing:-.03em;margin:0 0 10px;
}
.qdone p{font-size:15px;line-height:1.65;color:var(--ink-2);margin:0 0 14px;max-width:58ch}
.qdone form{margin-top:8px}

/* ── The second door ───────────────────────────────────────────────────
   A long page needs the offer where people finish reading, not only where
   they landed. Same dialog, same fan-out as the hero card. */

.doorbar{
  margin-top:clamp(22px,2.6vw,34px);
  display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,32px);
  align-items:center;justify-content:space-between;
  background:var(--deep);color:#EAF2F6;
  border-radius:14px;padding:clamp(20px,2.4vw,30px);
  background-image:radial-gradient(700px 260px at 90% -20%,
    rgba(95,200,228,.16),transparent 62%);
}
.doorbar > div{flex:1 1 340px;min-width:0}
.doorbar b{
  display:block;font-family:Fraunces,Georgia,serif;font-weight:800;
  font-size:clamp(19px,1.9vw,25px);letter-spacing:-.02em;
  color:#F4EFE3;margin-bottom:7px;
}
.doorbar span{display:block;font-size:14px;line-height:1.6;color:#A9C6D2;max-width:60ch}
.doorbar .btn{flex:0 0 auto}

/* ── Val ───────────────────────────────────────────────────────────────
   The host, bottom right, on every screen. She is a panel and not a modal
   on purpose: you can read the page while she is open, which is the point
   of asking her about the page. */

.val-fab{
  position:fixed;right:clamp(14px,2.2vw,26px);bottom:clamp(14px,2.2vw,26px);
  z-index:60;display:flex;align-items:center;gap:9px;
  padding:13px 20px 13px 16px;border-radius:999px;border:0;cursor:pointer;
  background:var(--deep,#08202C);color:#F4EFE3;font:inherit;
  box-shadow:0 14px 34px -12px rgba(8,32,44,.7);
  transition:transform .16s,box-shadow .16s;
}
.val-fab:hover{transform:translateY(-2px);box-shadow:0 20px 44px -14px rgba(8,32,44,.75)}
.val-fab b{font-size:15px;font-weight:800;letter-spacing:-.01em}
.val-dot{
  width:9px;height:9px;border-radius:50%;background:#5FC8E4;flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(95,200,228,.7);animation:valpulse 2.6s infinite;
}
@keyframes valpulse{
  0%{box-shadow:0 0 0 0 rgba(95,200,228,.65)}
  70%{box-shadow:0 0 0 11px rgba(95,200,228,0)}
  100%{box-shadow:0 0 0 0 rgba(95,200,228,0)}
}
@media (prefers-reduced-motion:reduce){ .val-dot{animation:none} }

.val-panel{
  position:fixed;right:clamp(14px,2.2vw,26px);bottom:clamp(74px,9vh,92px);
  z-index:61;width:min(400px,calc(100vw - 28px));
  max-height:min(620px,calc(100vh - 130px));
  display:flex;flex-direction:column;
  background:var(--sand,#F7F3E9);border:1px solid var(--rule,#DED5C2);
  border-radius:16px;overflow:hidden;
  box-shadow:0 30px 70px -22px rgba(8,32,44,.62);
}
.val-panel[hidden]{display:none}
.val-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 18px;background:var(--deep,#08202C);color:#F4EFE3;flex:0 0 auto;
}
.val-name{font-family:Fraunces,Georgia,serif;font-weight:800;font-size:19px;letter-spacing:-.02em}
.val-sub{font-size:11px;color:#8FB6C4;margin-top:2px}
.val-x{border:0;background:transparent;color:#8FB6C4;font-size:24px;
  line-height:1;cursor:pointer;padding:2px 6px;border-radius:6px}
.val-x:hover{color:#F4EFE3;background:rgba(255,255,255,.1)}

.val-log{flex:1 1 auto;overflow-y:auto;padding:16px 16px 4px;
  display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain}
.val-msg p{margin:0;font-size:14px;line-height:1.6}
.val-msg.v p{color:var(--ink-2,#3E5763)}
.val-msg.m{align-self:flex-end;max-width:85%}
.val-msg.m p{
  background:var(--deep,#08202C);color:#EAF2F6;
  padding:9px 14px;border-radius:14px 14px 4px 14px;font-size:13.5px;
}

.val-cards{display:grid;gap:8px;margin-top:10px}
.val-card{
  background:#fff;border:1px solid var(--rule,#DED5C2);border-radius:10px;padding:11px 13px;
}
.val-card b{display:block;font-size:14.5px;color:var(--ink,#0B2430)}
.val-where{display:block;font-size:11.5px;font-weight:700;color:var(--sea,#1E7E9B);margin:2px 0 6px}
.val-card p{font-size:12.5px;line-height:1.55;color:var(--ink-2,#3E5763);margin:0 0 8px}
.val-links{display:flex;flex-wrap:wrap;gap:12px}
.val-links a{font-size:12px;font-weight:700;color:var(--sea,#1E7E9B);
  text-decoration:underline;text-underline-offset:2px}
.val-more{font-size:12px;color:var(--ink-3,#6E8592);margin:8px 0 0}

.val-rules{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:9px}
.val-rules li{background:#fff;border-left:2px solid var(--sea,#1E7E9B);
  border-radius:0 6px 6px 0;padding:9px 12px}
.val-rules b{display:block;font-size:13px;color:var(--ink,#0B2430);margin-bottom:3px}
.val-rules span{font-size:12.5px;line-height:1.55;color:var(--ink-2,#3E5763)}

.val-jump{display:inline-block;margin-top:10px;font-size:13px;font-weight:700;
  color:var(--sea,#1E7E9B);text-decoration:underline;text-underline-offset:3px}
.val-cta{
  display:block;width:100%;margin-top:12px;padding:12px;border:0;border-radius:9px;
  background:var(--clay,#C2562F);color:#fff;font:inherit;font-weight:800;font-size:14.5px;
  cursor:pointer;
}
.val-cta:hover{filter:brightness(1.07)}

.val-chips{display:flex;flex-wrap:wrap;gap:6px;padding:10px 16px;flex:0 0 auto}
.vchip{
  border:1px solid var(--rule,#DED5C2);background:#fff;cursor:pointer;
  padding:7px 12px;border-radius:999px;font:inherit;font-size:12px;font-weight:600;
  color:var(--ink-2,#3E5763);
}
.vchip:hover{border-color:var(--sea,#1E7E9B);color:var(--ink,#0B2430)}

.val-ask{display:flex;gap:8px;padding:10px 14px 14px;flex:0 0 auto;
  border-top:1px solid var(--rule,#DED5C2)}
.val-ask input{
  flex:1 1 auto;min-width:0;font:inherit;font-size:14px;padding:11px 13px;
  border:1px solid var(--rule,#DED5C2);border-radius:9px;background:#fff;color:var(--ink,#0B2430);
}
.val-ask input:focus{outline:none;border-color:var(--sea,#1E7E9B);
  box-shadow:0 0 0 3px rgba(30,126,155,.15)}
.val-ask button{
  flex:0 0 auto;border:0;border-radius:9px;cursor:pointer;
  background:var(--deep,#08202C);color:#F4EFE3;font-size:18px;padding:0 16px;
}

@media (max-width:520px){
  .val-panel{right:8px;left:8px;width:auto;bottom:76px;max-height:min(72vh,540px)}
  .val-fab{right:10px;bottom:10px;padding:11px 17px 11px 14px}
}

/* ── Getting here, and the car ─────────────────────────────────────────
   Car rental was ONE line in a category called "boats & getting around",
   sitting between a dive trip and a bonefish charter. Everybody who lands
   here needs a car. Almost nobody needs a bonefish charter on day one. */

.apts{display:grid;gap:clamp(14px,1.8vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  margin-bottom:clamp(30px,4vw,46px)}
.apt{background:#fff;border:1px solid var(--rule);border-radius:12px;
  padding:clamp(18px,2vw,24px)}
.aptcode{font-family:Fraunces,Georgia,serif;font-weight:900;
  font-size:clamp(30px,3.6vw,44px);line-height:.9;letter-spacing:-.04em;
  color:var(--sea)}
.apt h3{font-family:Fraunces,Georgia,serif;font-weight:800;font-size:19px;
  letter-spacing:-.02em;margin:8px 0 4px;color:var(--ink)}
.aptshare{font-size:11.5px;font-weight:700;color:var(--clay);margin-bottom:10px}
.aptserves{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin:0 0 10px}
.aptnote{font-size:13px;line-height:1.6;color:var(--ink-3);margin:0;
  border-top:1px solid var(--rule);padding-top:10px}

.subhead{font-family:Fraunces,Georgia,serif;font-weight:800;
  font-size:clamp(21px,2.4vw,30px);letter-spacing:-.025em;
  margin:clamp(30px,4vw,44px) 0 14px;color:var(--ink)}

/* Tables are the one thing allowed to scroll sideways on a phone. */
.rtable{overflow-x:auto;border:1px solid var(--rule);border-radius:10px;background:#fff}
.rtable table{border-collapse:collapse;width:100%;min-width:520px}
.rtable th{text-align:left;font-size:10px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);padding:12px 16px;
  border-bottom:1px solid var(--rule)}
.rtable td{padding:12px 16px;font-size:14px;color:var(--ink-2);
  border-bottom:1px solid var(--sand-2)}
.rtable tr:last-child td{border-bottom:0}
.rtable td b{color:var(--ink)}
.rnote{font-size:12.5px;color:var(--ink-3)}

.cars{display:grid;gap:clamp(12px,1.6vw,18px);
  grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
.car{background:#fff;border:1px solid var(--rule);border-radius:11px;
  padding:16px 18px;display:flex;flex-direction:column}
.car h3{font-family:Fraunces,Georgia,serif;font-weight:800;font-size:17px;
  letter-spacing:-.02em;margin:0 0 3px;color:var(--ink)}
.carwhere{font-size:12px;font-weight:700;color:var(--sea);margin-bottom:9px}
.carnote{font-size:13px;line-height:1.58;color:var(--ink-2);margin:0 0 12px}
.carr{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.carr a{font-size:13px;font-weight:700;color:var(--sea);
  text-decoration:underline;text-underline-offset:3px}
.carr .wa{background:#25D366;color:#053d20;padding:5px 11px;border-radius:6px;
  text-decoration:none;font-size:12.5px}
.carr .nort{font-size:12.5px;color:var(--ink-3)}

.dtips{display:grid;gap:clamp(12px,1.6vw,18px);
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  margin-top:clamp(28px,3.4vw,40px)}
.dtip{border-left:2px solid var(--clay);padding:2px 0 2px 16px}
.dtip b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:5px}
.dtip span{font-size:13.5px;line-height:1.62;color:var(--ink-2)}
.fare{display:inline-block;margin-top:5px;font-size:12.5px;font-weight:700;
  color:var(--sea);text-decoration:underline;text-underline-offset:3px}
.fare:hover{color:var(--clay)}

/* ── Island essentials: the boats and the hospital ─────────────────── */
.ferries{display:grid;gap:clamp(14px,1.8vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.ferry{background:#fff;border:1px solid var(--rule);border-radius:12px;
  padding:clamp(18px,2vw,24px)}
.ferry h3{font-family:Fraunces,Georgia,serif;font-weight:800;font-size:19px;
  letter-spacing:-.02em;margin:0 0 4px;color:var(--ink)}
.froute{font-size:12.5px;font-weight:700;color:var(--sea);margin-bottom:14px}
.fdl{margin:0 0 12px;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:6px 14px;font-size:13.5px}
.fdl dt{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);padding-top:3px}
.fdl dd{margin:0;color:var(--ink-2);line-height:1.55}
.fwarn{font-size:13px;line-height:1.6;color:var(--ink-2);margin:0 0 12px;
  padding:10px 13px;background:var(--sand-2);border-left:2px solid var(--clay);
  border-radius:0 5px 5px 0}

.meds{display:grid;gap:clamp(12px,1.6vw,18px);
  grid-template-columns:repeat(auto-fill,minmax(min(285px,100%),1fr))}
.med{background:#fff;border:1px solid var(--rule);border-radius:11px;padding:16px 18px}
.medkind{font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--clay);margin-bottom:7px}
.med h3{font-family:Fraunces,Georgia,serif;font-weight:800;font-size:17px;
  letter-spacing:-.02em;margin:0 0 3px;color:var(--ink)}
.medwhere{font-size:12px;font-weight:700;color:var(--sea);margin-bottom:9px}
.med p{font-size:13px;line-height:1.6;color:var(--ink-2);margin:0 0 12px}
.medr{display:flex;flex-wrap:wrap;gap:12px}
.medr a{font-size:13px;font-weight:700;color:var(--sea);
  text-decoration:underline;text-underline-offset:3px}

/* ── Live conditions ───────────────────────────────────────────────────
   Measured tide, wind and sea temperature. The section carries a
   data-state, so a failed fetch can grey the whole thing rather than
   leaving four em-dashes looking like a value. */

#conditions[data-state="failed"] .cxgrid{display:none}
.cxstate{font-size:14.5px;line-height:1.65;color:var(--ink-2);
  background:var(--sand-2);border-left:2px solid var(--clay);
  border-radius:0 6px 6px 0;padding:14px 18px;max-width:62ch}

.cxgrid{display:grid;gap:clamp(14px,2vw,22px);
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start}
@media (max-width:840px){ .cxgrid{grid-template-columns:minmax(0,1fr)} }

.cxtide{background:#fff;border:1px solid var(--rule);border-radius:12px;
  padding:clamp(16px,2vw,22px)}
.cxhead{display:flex;justify-content:space-between;align-items:baseline;
  gap:14px;margin-bottom:10px}
.cxhead b{font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--ink)}
.cxhead span{font-size:12.5px;font-weight:700;color:var(--sea)}
.cxsvg{display:block;width:100%;height:112px}
.cxsvg .tlab{font-size:9px;font-weight:800;fill:var(--ink-3)}
.cxtimes{font-size:12.5px;color:var(--ink-2);margin-top:10px;line-height:1.6}
.cxahead{margin-top:6px}
.cxrow{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:7px 0;border-top:1px solid var(--sand-2);font-size:12.5px}
.cxrow b{color:var(--ink);flex:none;font-weight:700}
.cxrow span{color:var(--ink-3);text-align:right}

.cxstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;align-content:start}
.cxstat{background:#fff;border:1px solid var(--rule);border-radius:10px;
  padding:13px 15px;min-width:0}
.cxstat span{display:block;font-size:9.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.cxstat b{display:block;font-family:Fraunces,Georgia,serif;font-weight:800;
  font-size:clamp(20px,2.2vw,27px);letter-spacing:-.03em;color:var(--ink);
  line-height:1}
.cxstat i{display:block;font-style:normal;font-size:11.5px;color:var(--ink-3);
  margin-top:4px}
.cxside{grid-column:1 / -1;margin:4px 0 0;font-size:13.5px;line-height:1.6;
  color:var(--ink-2);border-left:2px solid var(--sea);padding-left:14px}

/* ── The fishing report ────────────────────────────────────────────── */
.bitewrap{display:flex;gap:clamp(16px,2.4vw,28px);align-items:center;
  flex-wrap:wrap;margin-bottom:clamp(24px,3vw,34px)}
.bite{flex:0 0 auto;width:118px;height:118px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:#fff;border:3px solid var(--rule)}
.bite[data-band="prime"]{border-color:#1FA860}
.bite[data-band="good"]{border-color:var(--sea)}
.bite[data-band="fair"]{border-color:#E39A2D}
.bite[data-band="slow"]{border-color:var(--ink-3)}
.bnum{font-family:Fraunces,Georgia,serif;font-weight:900;font-size:42px;
  line-height:1;letter-spacing:-.04em;color:var(--ink)}
.blab{font-size:9.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);margin-top:5px;text-align:center}
.blab span{color:var(--sea)}
.bwhy{flex:1 1 300px;font-size:13.5px;line-height:1.65;color:var(--ink-2);margin:0;
  max-width:60ch}

.zcards{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
  margin-bottom:clamp(20px,2.4vw,28px)}
.zcard{background:#fff;border:1px solid var(--rule);border-radius:10px;padding:14px 16px}
.zcard b{display:block;font-family:Fraunces,Georgia,serif;font-weight:800;
  font-size:16px;color:var(--ink);margin-bottom:4px}
.zcard span{font-size:12.5px;line-height:1.55;color:var(--ink-2)}

.zonebar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(20px,2.4vw,28px)}
.zonebar button{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:1px solid var(--rule);background:#fff;border-radius:999px;
  padding:9px 16px;font:inherit;color:var(--ink-2)}
.zonebar button b{font-size:13.5px;font-weight:700}
.zonebar button span{font-size:11px;font-weight:800;background:var(--sand-2);
  color:var(--ink-3);border-radius:999px;padding:2px 7px}
.zonebar button.on{background:var(--deep);border-color:var(--deep);color:#F4EFE3}
.zonebar button.on span{background:rgba(255,255,255,.18);color:#EAF2F6}

.species{display:grid;gap:clamp(14px,1.8vw,20px);
  grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr))}
.sp{background:#fff;border:1px solid var(--rule);border-radius:12px;
  padding:clamp(17px,2vw,22px);display:flex;flex-direction:column}
.sp[hidden]{display:none}
.sphead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
  margin-bottom:10px}
.sp h3{font-family:Fraunces,Georgia,serif;font-weight:800;font-size:19px;
  letter-spacing:-.025em;margin:0 0 3px;color:var(--ink)}
.spsize{font-size:12px;font-weight:700;color:var(--sea)}
.spstatus{flex:0 0 auto;font-size:9.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;padding:4px 9px;border-radius:999px;
  background:var(--sand-2);color:var(--ink-3);white-space:nowrap}
.spstatus.on{background:#E3F5EA;color:#0E6B39}
.spstatus.off{background:var(--sand-2);color:var(--ink-3)}
.spstatus.closed{background:#FBE6E0;color:#A6341A}
.spdesc{font-size:13.5px;line-height:1.62;color:var(--ink-2);margin:0 0 12px}
.spclosed{font-size:12.5px;line-height:1.55;background:#FBE6E0;color:#8A2C15;
  border-radius:7px;padding:10px 13px;margin-bottom:12px}
.spclosed b{display:block;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:3px}
.spdl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 13px;
  margin:0 0 12px;font-size:12.5px}
.spdl dt{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);padding-top:2px;white-space:nowrap}
.spdl dd{margin:0;color:var(--ink-2);line-height:1.55}
.spbaits{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}
.bait{font-size:10.5px;font-weight:700;background:var(--sand-2);color:var(--ink-2);
  padding:3px 9px;border-radius:5px}
.sptip{margin:auto 0 0;font-size:12.5px;line-height:1.6;color:var(--ink-2);
  border-left:2px solid var(--clay);padding-left:13px}
.sptip b{display:block;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--clay);margin-bottom:3px}

.rulelist{list-style:none;padding:0;margin:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
.rulelist li{background:#fff;border:1px solid var(--rule);border-radius:10px;
  padding:14px 16px;display:flex;gap:12px;align-items:flex-start}
.ric{flex:0 0 auto;font-size:19px;line-height:1.25}
.rtx{font-size:13.5px;line-height:1.6;color:var(--ink-2)}

/* ── On the water: excursions and the kids list ─────────────────────── */
.excs{display:grid;gap:clamp(14px,1.8vw,20px);
  grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr))}
.exc{background:#fff;border:1px solid var(--rule);border-radius:12px;
  padding:clamp(17px,2vw,22px);display:flex;flex-direction:column}
.exchead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
  margin-bottom:3px}
.exc h3{font-family:Fraunces,Georgia,serif;font-weight:800;font-size:19px;
  letter-spacing:-.025em;margin:0;color:var(--ink)}
.kidtag{flex:0 0 auto;font-size:9.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 9px;border-radius:999px;white-space:nowrap}
.kidtag.great{background:#E3F5EA;color:#0E6B39}
.kidtag.good{background:#EAF4F8;color:#15607A}
.kidtag.no{background:#FBE6E0;color:#A6341A}
.excwhere{font-size:12px;font-weight:700;color:var(--sea);margin-bottom:11px}
.excwhat{font-size:13.5px;line-height:1.62;color:var(--ink-2);margin:0 0 13px}
.exchonest{background:var(--sand-2);border-left:2px solid var(--clay);
  border-radius:0 7px 7px 0;padding:11px 14px;margin-bottom:13px}
.exchonest b{display:block;font-size:9.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--clay);margin-bottom:4px}
.exchonest span{font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.excdl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 13px;
  margin:0 0 12px;font-size:12.5px}
.excdl dt{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);padding-top:2px;white-space:nowrap}
.excdl dd{margin:0;color:var(--ink-2);line-height:1.5}
.excwith{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  padding-top:12px;border-top:1px solid var(--sand-2)}
.excwith b{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-right:3px}
.opw{font-size:11px;font-weight:600;background:var(--sand-2);color:var(--ink-2);
  padding:3px 8px;border-radius:5px}

.kids{display:grid;gap:clamp(12px,1.6vw,16px);
  grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.kid{background:#fff;border:1px solid var(--rule);border-radius:11px;
  padding:16px 18px;border-left-width:3px}
.kid.danger{border-left-color:#C0341A;background:#FEF7F5}
.kid.warn{border-left-color:var(--clay)}
.kid.good{border-left-color:#1FA860}
.kidkind{display:block;font-size:9px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:6px;color:var(--ink-3)}
.kid.danger .kidkind{color:#C0341A}
.kid.warn .kidkind{color:var(--clay)}
.kid.good .kidkind{color:#0E6B39}
.kid b{display:block;font-family:Fraunces,Georgia,serif;font-weight:800;
  font-size:16.5px;letter-spacing:-.02em;color:var(--ink);margin-bottom:6px}
.kidd{font-size:13px;line-height:1.62;color:var(--ink-2)}

/* ── The island's year ─────────────────────────────────────────────── */
.evs{display:grid;gap:clamp(13px,1.7vw,18px);
  grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.ev{background:#fff;border:1px solid var(--rule);border-radius:11px;
  padding:16px 18px}
.ev.soon{border-color:var(--clay);box-shadow:0 0 0 1px var(--clay) inset}
.evwhen{display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  margin-bottom:9px}
.evwhen b{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--sea);white-space:nowrap}
.ev.soon .evwhen b{color:var(--clay)}
.evwhen b i{font-style:normal;font-weight:600;opacity:.65;text-transform:none;
  letter-spacing:0}
.evwhen span{font-size:11.5px;color:var(--ink-3);text-align:right}
.ev h3{font-family:Fraunces,Georgia,serif;font-weight:800;font-size:18px;
  letter-spacing:-.025em;margin:0 0 3px;color:var(--ink)}
.evwhere{font-size:12px;font-weight:700;color:var(--sea);margin-bottom:9px}
.ev p{font-size:13px;line-height:1.6;color:var(--ink-2);margin:0 0 10px}
.evwhy{border-left:2px solid var(--sand-2);padding-left:12px;margin:0 !important}
.evwhy b{display:block;font-size:9.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}

/* ── The history ───────────────────────────────────────────────────── */
.chapters{display:grid;gap:0;border-left:2px solid var(--rule);
  margin-bottom:clamp(34px,4.4vw,52px)}
.ch{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(16px,2.6vw,34px);padding:clamp(18px,2.4vw,26px) 0 clamp(18px,2.4vw,26px) clamp(18px,2.4vw,30px);
  position:relative}
.ch::before{content:"";position:absolute;left:calc(-2px - 5px);top:calc(clamp(18px,2.4vw,26px) + 6px);
  width:10px;height:10px;border-radius:50%;background:var(--sea);
  box-shadow:0 0 0 4px var(--sand)}
.band.alt .ch::before{box-shadow:0 0 0 4px var(--sand-2)}
.chyear{font-family:Fraunces,Georgia,serif;font-weight:900;
  font-size:clamp(19px,2.1vw,26px);letter-spacing:-.03em;color:var(--clay);
  line-height:1.1;white-space:nowrap}
.ch h3{font-family:Fraunces,Georgia,serif;font-weight:800;
  font-size:clamp(18px,2vw,23px);letter-spacing:-.025em;margin:0 0 8px;color:var(--ink)}
.chbody p{font-size:14px;line-height:1.68;color:var(--ink-2);margin:0 0 10px;max-width:64ch}
.chso{border-left:2px solid var(--sand-2);padding-left:14px;margin:0 !important}
.chso b{display:block;font-size:9.5px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--sea);margin-bottom:3px}
@media (max-width:640px){
  .ch{grid-template-columns:minmax(0,1fr);gap:6px}
}

.whys{display:grid;gap:clamp(12px,1.6vw,18px);
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.why-h{background:#fff;border:1px solid var(--rule);border-radius:11px;
  padding:16px 18px}
.why-h b{display:block;font-family:Fraunces,Georgia,serif;font-weight:800;
  font-size:16.5px;letter-spacing:-.02em;color:var(--ink);margin-bottom:6px}
.why-h span{font-size:13px;line-height:1.62;color:var(--ink-2)}

/* ── Building: the permit steps ────────────────────────────────────── */
.steps{display:grid;gap:clamp(13px,1.7vw,18px);
  grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr))}
.step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;
  background:#fff;border:1px solid var(--rule);border-radius:11px;
  padding:17px 19px;align-items:start}
.stepn{font-family:Fraunces,Georgia,serif;font-weight:900;font-size:26px;
  line-height:1;letter-spacing:-.04em;color:var(--rule)}
.step h3{font-family:Fraunces,Georgia,serif;font-weight:800;font-size:17px;
  letter-spacing:-.02em;margin:0 0 6px;color:var(--ink)}
.step p{font-size:13px;line-height:1.62;color:var(--ink-2);margin:0}

.bnotes{display:grid;gap:clamp(12px,1.6vw,18px);
  grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))}
.bnote{background:#fff;border:1px solid var(--rule);border-left:3px solid var(--clay);
  border-radius:11px;padding:16px 18px}
.bnote b{display:block;font-family:Fraunces,Georgia,serif;font-weight:800;
  font-size:16.5px;letter-spacing:-.02em;color:var(--ink);margin-bottom:6px}
.bnote span{font-size:13px;line-height:1.62;color:var(--ink-2)}
.srcs{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:7px}
.srcs a{font-size:13.5px;color:var(--sea);text-decoration:underline;
  text-underline-offset:3px}

/* ── Photographs ───────────────────────────────────────────────────────
   Real, licensed pictures of this island. The credit line is part of the
   component and not an optional flourish: most of these are CC BY-SA, where
   attribution is a licence condition. See portal/photos.py. */
.ph{margin:0;display:block}
.ph img{display:block;width:100%;height:auto;border-radius:12px;
  background:var(--sand-2);object-fit:cover;
  /* No single photograph gets to eat a whole screen. A portrait frame
     at full width pushes the text it illustrates below the fold. */
  max-height:min(70vh,560px)}
.ph figcaption{margin-top:9px;display:flex;flex-wrap:wrap;gap:4px 12px;
  align-items:baseline}
.ph .pcap{font-size:13px;line-height:1.6;color:var(--ink-2);flex:1 1 260px;
  min-width:0}
.ph .pcred{font-size:11px;letter-spacing:.02em;color:var(--ink-3);flex:0 0 auto}
.ph .pcred a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.ph .pcred a:hover{color:var(--sea)}
.ph figcaption.bare{justify-content:flex-end}

/* Full-bleed divider. Breaks the wrap so a photograph can run edge to edge
   without the page scrolling sideways. */
.ph-band img{border-radius:0;max-height:min(72vh,620px)}
.ph-band{width:100vw;margin-left:calc(50% - 50vw);margin-block:0}
.ph-band figcaption{max-width:1180px;margin:9px auto 0;padding-inline:clamp(16px,4vw,40px)}

/* A photograph beside prose. */
.phrow{display:grid;gap:clamp(16px,2.4vw,32px);align-items:center;
  grid-template-columns:minmax(0,1fr)}
@media(min-width:820px){
  .phrow{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  .phrow.flip .ph{order:2}
}
.phgrid{display:grid;gap:clamp(12px,1.8vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
/* !important is doing real work here. photos.py writes each image's own
   intrinsic ratio as an inline style so the browser reserves the correct box
   and the page does not jump while photographs load. In a grid we want the
   opposite — one uniform crop so the cards and their captions line up — and
   an inline style can only be beaten by this. */
.phgrid .ph img{aspect-ratio:4/3 !important;object-fit:cover}
.phgrid .ph figcaption{align-items:flex-start}

/* Hero photograph: the front page's first impression. */
.phhero{position:relative}
.phhero img{border-radius:0;width:100%;height:clamp(340px,62vh,640px);
  object-fit:cover}
.phhero figcaption{position:absolute;right:clamp(10px,2vw,20px);
  bottom:clamp(8px,1.4vw,14px);margin:0}
.phhero .pcred{color:rgba(255,255,255,.78);text-shadow:0 1px 3px rgba(0,0,0,.6)}
.phhero .pcap{display:none}

/* Credits. */
.credits{display:grid;gap:10px}
.credit{display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;
  align-items:center;background:#fff;border:1px solid var(--rule);
  border-radius:10px;padding:10px 13px}
.credit img{width:84px;height:60px;object-fit:cover;border-radius:6px;display:block}
.credit b{display:block;font-size:13.5px;color:var(--ink);font-weight:700}
.credit span{font-size:12px;line-height:1.55;color:var(--ink-2)}
.credit a{color:var(--sea);text-decoration:underline;text-underline-offset:2px}

/* ── The carrying-cost calculator ──────────────────────────────────────
   Two columns on a desk, stacked on a phone, and the inputs go FIRST in
   both — a reader who cannot see what they are changing does not believe
   the number underneath it. */
.cost{display:grid;gap:clamp(16px,2.2vw,28px);align-items:start;
  grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.cost{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}

.cost-in,.cost-out{background:#fff;border:1px solid var(--rule);
  border-radius:13px;padding:clamp(18px,2.2vw,26px)}
.cost-out{background:var(--ink);border-color:var(--ink)}

.cfield{display:block;margin-bottom:16px}
.cfield>span{display:block;font-weight:700;font-size:13.5px;color:var(--ink);
  margin-bottom:7px}
.cfield em{display:block;font-style:normal;font-weight:400;font-size:12px;
  line-height:1.5;color:var(--ink-3);margin-top:3px}
.cwrap{display:flex;align-items:center;gap:8px;background:var(--sand);
  border:1px solid var(--rule);border-radius:9px;padding:0 13px;
  transition:border-color .15s}
.cwrap:focus-within{border-color:var(--sea)}
.cwrap i{font-style:normal;font-weight:700;font-size:16px;color:var(--ink-3);
  flex:none}
.cwrap i.unit{font-size:12px;letter-spacing:.03em;order:2}
.cwrap input{flex:1;min-width:0;background:none;border:0;outline:0;
  font-family:inherit;font-weight:700;font-size:19px;color:var(--ink);
  padding:13px 0;letter-spacing:-.01em}

.cpresets{display:grid;gap:7px;margin:0 0 18px}
.cpreset{text-align:left;background:var(--sand);border:1px solid var(--rule);
  border-radius:8px;padding:9px 12px;font-family:inherit;font-size:12.5px;
  font-weight:600;color:var(--ink-2);cursor:pointer;transition:.15s}
.cpreset i{display:block;font-style:normal;font-weight:400;font-size:11.5px;
  color:var(--ink-3);margin-top:2px}
.cpreset:hover{border-color:var(--sea);color:var(--ink)}
.cpreset.on{background:var(--ink);border-color:var(--ink);color:#fff}
.cpreset.on i{color:rgba(255,255,255,.62)}

/* The switch the whole page is about, so it does not look like the others. */
.cswitch{display:flex;gap:12px;align-items:flex-start;background:var(--sand-2);
  border:1px solid var(--rule);border-left:3px solid var(--clay);
  border-radius:0 10px 10px 0;padding:14px 16px}
.cswitch input{flex:none;width:20px;height:20px;margin:2px 0 0;
  accent-color:var(--clay);cursor:pointer}
.cswitch label{cursor:pointer}
.cswitch b{display:block;font-size:14px;color:var(--ink);margin-bottom:3px}
.cswitch span{font-size:12.5px;line-height:1.55;color:var(--ink-2)}

.cline{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:13px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.cline span{font-size:13.5px;color:rgba(255,255,255,.74)}
.cline b{font-family:Fraunces,Georgia,serif;font-weight:800;font-size:21px;
  letter-spacing:-.03em;color:#fff;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.cline.sub{padding:9px 0;border-bottom:0}
.cline.sub span{font-size:12.5px;color:rgba(255,255,255,.5)}
.cline.sub b{font-size:15px;color:rgba(255,255,255,.72)}
.cline.total{border-bottom:0;border-top:2px solid rgba(255,255,255,.28);
  margin-top:8px;padding-top:17px}
.cline.total span{font-size:14.5px;font-weight:700;color:#fff}
.cline.total b{font-size:clamp(24px,3.1vw,31px);color:var(--sea-now)}
.cnote{font-size:11.5px;line-height:1.55;color:rgba(255,255,255,.5);
  margin:6px 0 0;max-width:56ch}

/* The comparison this page exists for. */
.cdelta{margin-top:20px;background:var(--clay);border-radius:11px;
  padding:16px 18px}
.cdelta-num{font-family:Fraunces,Georgia,serif;font-weight:900;
  font-size:clamp(28px,3.6vw,38px);line-height:1;letter-spacing:-.04em;
  color:#fff;margin-bottom:7px;font-variant-numeric:tabular-nums}
.cdelta p{font-size:13px;line-height:1.6;color:rgba(255,255,255,.92);margin:0}
.cost-out .fine{color:rgba(255,255,255,.42);border-top-color:rgba(255,255,255,.14)}

/* The power reality. The two callouts sit side by side rather than stacked
   in a 74ch column — stacked, they left half the band empty and read as an
   afterthought, and "buy a generator" is not an afterthought here. */
.reality p{font-size:15.5px;line-height:1.68;color:var(--ink-2);margin:0}
.reality .lede{max-width:70ch;margin-bottom:clamp(16px,2vw,24px)}
.rcards{display:grid;gap:clamp(12px,1.6vw,18px);
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.reality .so,.reality .fairly{background:#fff;border:1px solid var(--rule);
  border-radius:0 11px 11px 0;padding:17px 20px;font-size:14.5px;line-height:1.64}
.reality .so{border-left:3px solid var(--clay)}
.reality .fairly{border-left:3px solid var(--sea)}
.reality b{color:var(--ink)}
.reality .fine{margin-top:clamp(16px,2vw,24px);max-width:70ch}

/* Showing the working. */
.bands{display:grid;gap:clamp(12px,1.6vw,18px);
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.bandcard{background:#fff;border:1px solid var(--rule);border-radius:11px;
  padding:17px 19px}
.bandcard.hot{border-color:var(--clay);border-width:2px}
.bandcard h3{font-family:Fraunces,Georgia,serif;font-weight:800;font-size:16px;
  letter-spacing:-.02em;margin:0 0 12px;color:var(--ink)}
.bandcard ul{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:9px}
.bandcard li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;
  align-items:baseline}
.bandcard li b{font-family:Fraunces,Georgia,serif;font-weight:800;font-size:15px;
  letter-spacing:-.02em;color:var(--clay);white-space:nowrap}
.bandcard li span{font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.bnote em{display:block;font-style:normal;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;font-weight:700;color:var(--ink-3);margin-top:9px}


/* ── What's changing: developments and the objections to them ─────────── */
.projwhen{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--clay);background:var(--sand-2);
  border:1px solid var(--rule);border-radius:999px;padding:6px 14px;margin:0 0 clamp(18px,2.2vw,26px)}
.objs{display:grid;gap:clamp(12px,1.6vw,18px);
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
/* Objections get the ink colour, not the clay: they are the counterweight to
   the developer's own figures above and should not read as another feature. */
.obj{background:var(--ink);border-radius:11px;padding:16px 18px}
.obj b{display:block;font-family:Fraunces,Georgia,serif;font-weight:800;
  font-size:16px;letter-spacing:-.02em;color:#fff;margin-bottom:6px}
.obj span{font-size:13px;line-height:1.62;color:rgba(255,255,255,.8)}
.sothen{margin-top:clamp(20px,2.6vw,30px);background:var(--sand-2);
  border-left:3px solid var(--sea);border-radius:0 11px 11px 0;padding:17px 20px}
.sothen b{display:block;font-family:Fraunces,Georgia,serif;font-weight:800;
  font-size:17px;letter-spacing:-.02em;color:var(--ink);margin-bottom:7px}
.sothen p{margin:0;font-size:14.5px;line-height:1.66;color:var(--ink-2)}

/* ── The island's week ─────────────────────────────────────────────────── */
.week{display:grid;gap:clamp(10px,1.4vw,14px)}
.wday{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;
  background:#fff;border:1px solid var(--rule);border-radius:12px;
  padding:15px 18px}
@media(min-width:760px){.wday{grid-template-columns:132px minmax(0,1fr);gap:18px;align-items:start}}
.wdayname{font-family:Fraunces,Georgia,serif;font-weight:900;font-size:19px;
  letter-spacing:-.03em;color:var(--ink)}
.witems{display:grid;gap:12px}
.witem b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:3px}
.witem span{font-size:13px;line-height:1.62;color:var(--ink-2)}
.wtag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);background:var(--sand-2);
  border-radius:999px;padding:3px 9px;margin-bottom:6px}
.witem.star .wtag{background:var(--clay);color:#fff}
.wday.big{border-color:var(--clay);border-width:2px}
.wcav{margin-top:clamp(16px,2vw,24px);background:var(--sand-2);
  border-left:2px solid var(--sea);border-radius:0 8px 8px 0;padding:15px 18px;
  font-size:13.5px;line-height:1.66;color:var(--ink-2)}


/* ── The ledger ────────────────────────────────────────────────────────── */
.ledger{background:#fff;border:1px solid var(--rule);border-radius:12px;
  padding:6px 4px;overflow-x:auto}
.ledger table{width:100%;border-collapse:collapse;min-width:520px}
.ledger th{text-align:left;font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);font-weight:800;
  padding:12px 14px;border-bottom:2px solid var(--rule)}
.ledger td{padding:12px 14px;border-bottom:1px solid var(--rule);
  font-size:14px;color:var(--ink-2);vertical-align:middle}
.ledger tr:last-child td{border-bottom:0}
.ledger td a{color:var(--ink);font-weight:700;text-decoration:none}
.ledger td a:hover{color:var(--sea);text-decoration:underline;
  text-underline-offset:3px}
.ledger .num{text-align:right;font-variant-numeric:tabular-nums;
  font-weight:700;color:var(--ink)}
.ledger th.num{text-align:right}
.ledger .when{font-size:12.5px;color:var(--ink-3);white-space:nowrap}


/* ── The Pin ───────────────────────────────────────────────────────────── */
.pin{display:grid;gap:clamp(16px,2.2vw,28px);align-items:start;
  grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.pin{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}
.pin-in,.pin-out{background:#fff;border:1px solid var(--rule);border-radius:13px;
  padding:clamp(16px,2.2vw,24px)}
.pin-out{background:var(--ink);border-color:var(--ink)}

.pinmap{height:clamp(240px,38vh,340px);border-radius:10px;overflow:hidden;
  background:var(--sand-2);border:1px solid var(--rule);margin-bottom:16px;
  display:flex;align-items:center;justify-content:center}
.pinmap.ready{display:block}
.pinnomap{font-size:13px;line-height:1.6;color:var(--ink-3);text-align:center;
  max-width:34ch;margin:0;padding:16px}
/* Two fields side by side, the button on its own full-width row. Squeezing
   the button into a third `auto` column let its label wrap and pushed the
   whole row out past the card, over the results panel next to it. */
.pinfields{display:grid;gap:12px;align-items:end;margin-bottom:14px;
  grid-template-columns:minmax(0,1fr)}
@media(min-width:460px){.pinfields{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.pinfields .cfield{margin-bottom:0;min-width:0}
.pinfields .btn{grid-column:1/-1;width:100%;padding-block:15px}
.pin .cwrap select{flex:1;min-width:0;background:none;border:0;outline:0;
  font-family:inherit;font-weight:600;font-size:15px;color:var(--ink);
  padding:14px 0;cursor:pointer}

.pincoord{font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  font-weight:800;color:rgba(255,255,255,.5);margin-bottom:14px}
.pincoord span{color:var(--sea-now);font-variant-numeric:tabular-nums}
.pinrow{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.pinrow:last-of-type{border-bottom:0}
.pinlab{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  font-weight:800;color:rgba(255,255,255,.5);margin-bottom:4px}
.pinrow b{display:block;font-family:Fraunces,Georgia,serif;font-weight:800;
  font-size:21px;letter-spacing:-.03em;color:#fff;
  font-variant-numeric:tabular-nums}
.pinrow span{display:block;font-size:12.5px;line-height:1.58;
  color:rgba(255,255,255,.66);margin-top:4px}
.pinlive{margin:16px 0 0;padding-top:14px;border-top:2px solid rgba(255,255,255,.28);
  font-size:13px;line-height:1.6;color:var(--sea-now)}

/* The limits get the same weight as the answers, on purpose. */
.pinwarn{margin-top:clamp(20px,2.6vw,30px);background:var(--sand-2);
  border:1px solid var(--rule);border-left:3px solid var(--clay);
  border-radius:0 12px 12px 0;padding:18px 22px;max-width:80ch}
.pinwarn b{display:block;font-family:Fraunces,Georgia,serif;font-weight:800;
  font-size:17px;letter-spacing:-.02em;color:var(--ink);margin-bottom:8px}
.pinwarn p{margin:0;font-size:15px;line-height:1.68;color:var(--ink-2)}
.pinwarn em{font-style:italic}


/* ── The Captain's Wake-Up signup ──────────────────────────────────────
   The list form's own styling lives under #list, which is a dark band. This
   is the same markup on a light one, so it gets its own rules rather than a
   pile of overrides fighting a selector written for a different background. */
.wjoin{display:flex;gap:10px;flex-wrap:wrap;max-width:620px}
.wjoin input[type="email"]{flex:1 1 260px;min-width:0;padding:15px 18px;
  border-radius:10px;border:1px solid var(--rule);background:#fff;
  color:var(--ink);font:inherit;font-size:16px}
.wjoin input[type="email"]::placeholder{color:var(--ink-3)}
.wjoin input[type="email"]:focus{outline:none;border-color:var(--sea);
  box-shadow:0 0 0 3px rgba(30,126,155,.14)}
.wjoin .btn{flex:0 0 auto;padding-inline:30px}
.wjoin .btn[disabled]{opacity:.55;cursor:default}
.wjoin + .why{margin:12px 0 0;font-size:13.5px;color:var(--ink-2)}
.wjoin + .why.err{color:#B3341A;font-weight:700}

/* ── Gregory Town ──────────────────────────────────────────────────── */
.gtgrid{display:grid;gap:clamp(12px,1.7vw,18px);
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.gt{background:#fff;border:1px solid var(--rule);border-radius:11px;padding:16px 18px}
.gt b{display:block;font-family:Fraunces,Georgia,serif;font-weight:800;
  font-size:16.5px;letter-spacing:-.02em;color:var(--ink);margin-bottom:6px}
.gt span{font-size:13px;line-height:1.62;color:var(--ink-2)}
.gtbound{margin-top:clamp(22px,2.8vw,32px);background:var(--sand-2);
  border-left:2px solid var(--sea);border-radius:0 8px 8px 0;
  padding:16px 20px;font-size:13.5px;line-height:1.68;color:var(--ink-2);
  max-width:70ch}
.gtlinks{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px}
.gtlinks a{font-size:13.5px;font-weight:700;color:var(--sea);
  text-decoration:underline;text-underline-offset:3px}
/* The private band's columns align at the top and the contact sits with the
   statement. Previously a short headline column ran beside four paragraphs. */
#private .split-ed{align-items:start}
#private .privlines{margin-top:clamp(24px,3vw,36px)}
/* The address was breaking mid-word — "mikeolsonre.c / om". An email that
   appears misspelled is worse than one that is slightly small. */
#private .pl b{font-size:clamp(14px,1.15vw,17px);overflow-wrap:anywhere;
  line-height:1.25}
#private .privlines{grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr))}

/* ── Destinations ──────────────────────────────────────────────────────────
   The row that replaced five full sections on the front page. Its whole job
   is to send you somewhere else, so it is denser and flatter than a content
   card: no drop shadow at rest, a hairline that lights up, and an arrow that
   moves. Five across on a desk, two on a tablet, one on a phone. */

.jumpgrid{
  display:grid;gap:clamp(10px,1.2vw,14px);margin-top:clamp(24px,3vw,38px);
  grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
}
.jump{
  display:block;position:relative;padding:clamp(16px,1.9vw,22px);
  padding-right:clamp(30px,3.4vw,40px);
  background:#fff;border:1px solid var(--rule);border-radius:11px;
  text-decoration:none;overflow:hidden;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
/* The wash only appears on hover, so a row of five reads as a quiet list
   until you reach for one. */
.jump::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(135deg,rgba(20,116,150,.07),transparent 62%);
  opacity:0;transition:opacity .2s ease;
}
.jump::after{
  content:"\2192";position:absolute;right:clamp(13px,1.5vw,17px);
  top:clamp(16px,1.9vw,22px);
  font-size:15px;line-height:1;color:var(--sea);
  opacity:.34;transition:opacity .2s ease,transform .2s ease;
}
.jump:hover,.jump:focus-visible{
  transform:translateY(-2px);border-color:var(--sea);
  box-shadow:0 14px 32px -20px rgba(11,36,48,.4);
}
.jump:hover::before,.jump:focus-visible::before{opacity:1}
.jump:hover::after,.jump:focus-visible::after{opacity:1;transform:translateX(3px)}
.jump:focus-visible{outline:2px solid var(--sea);outline-offset:2px}
.jump b{
  position:relative;display:block;font-family:Fraunces,Georgia,serif;
  font-weight:800;font-size:16.5px;letter-spacing:-.025em;color:var(--ink);
  margin-bottom:5px;line-height:1.2;
}
.jump span{
  position:relative;display:block;font-size:12.5px;line-height:1.5;
  color:var(--ink-2);
}

/* ── Settlement pages ──────────────────────────────────────────────────────
   /governors-harbour and /harbour-island. Everything on them is counted or
   computed from data on file, so the layout leads with the counts rather
   than with adjectives. */

.statline{
  display:grid;gap:clamp(10px,1.4vw,16px);margin:clamp(20px,2.6vw,30px) 0 0;
  grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));
}
.statline > div{
  background:#fff;border:1px solid var(--rule);border-radius:11px;
  padding:clamp(14px,1.7vw,19px);
}
.statline b{
  display:block;font-family:Fraunces,Georgia,serif;font-weight:900;
  font-size:clamp(22px,2.5vw,31px);line-height:1;letter-spacing:-.035em;
  color:var(--ink);margin-bottom:6px;
  /* The coordinate is a long number and must not blow the card open. */
  overflow-wrap:anywhere;
}
.statline span{font-size:12.5px;line-height:1.45;color:var(--ink-2)}

.sgrid{
  display:grid;gap:clamp(12px,1.5vw,18px);
  grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));
  margin-bottom:clamp(18px,2.2vw,28px);
}
.scard{
  background:#fff;border:1px solid var(--rule);border-radius:11px;
  padding:clamp(16px,1.9vw,22px);
}
.scard h3,.scard h4{
  font-family:Fraunces,Georgia,serif;font-weight:800;letter-spacing:-.028em;
  color:var(--ink);margin:0 0 7px;line-height:1.18;
}
.scard h3{font-size:18px}
.scard h4{font-size:16px}
.scard p{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin:0 0 8px}
.scard p:last-child{margin-bottom:0}
.scard .fine{font-size:11.5px;color:var(--ink-3);line-height:1.55}
.scard a{color:var(--sea);text-decoration:underline;text-underline-offset:2px}
.stags{
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--sea) !important;margin-bottom:9px !important;
}

/* The count beside a group heading — "Eat & drink 18". */
.subhead i{
  font-style:normal;font-weight:800;font-size:12px;color:var(--ink-3);
  margin-left:8px;letter-spacing:.04em;
}

.ctarow{
  display:flex;flex-wrap:wrap;gap:clamp(9px,1.1vw,13px);
  margin-top:clamp(18px,2.2vw,26px);
}
/* On the dark band the ghost buttons need a light hairline or they vanish. */
.band.dark .ctarow .btn.ghost{
  border-color:rgba(255,255,255,.3);color:#EAF2F6;background:transparent;
}
.band.dark .ctarow .btn.ghost:hover{border-color:var(--surf);color:#fff}