/* ═══════════════════════════════════════════════════════════════════════
   The typographic system.

   THE CONSTRAINT THIS SOLVES

   There is not one photograph of Eleuthera on this site and there will not
   be until somebody stands on the beach with a camera. Stock imagery of a
   Caribbean beach that is not this island is worse than nothing: the first
   person who has actually been here catches it, and the whole pitch of the
   site is that its facts are real.

   So the design cannot lean on pictures. It leans on the two things this
   site genuinely has — real numbers and real hierarchy — and treats them
   the way a print magazine treats them.

   THE SCALE

   The single biggest thing separating a page that looks expensive from one
   that looks like a document is scale CONTRAST. A 16px paragraph next to a
   28px heading reads as a memo. A 13px caption next to a 120px figure reads
   as design. Everything below is built on that gap.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* Display sizes. The top of the range is deliberately enormous. */
  --t-mega:clamp(52px,10.5vw,148px);
  /* Was clamp(38px,6.4vw,86px). At 1400px that rendered section headings
     at 86px, which forced three lines inside .secheadline's 16ch column
     and made every heading block 325px tall. Measured: eleven headline
     blocks were 3,089px, 19% of the whole page, for about twenty words
     each. --t-mega still exists for the one hero that earns it. */
  --t-display:clamp(30px,3.4vw,46px);
  --t-head:clamp(28px,4.2vw,56px);
  --t-sub:clamp(20px,2.6vw,32px);
  --t-body:clamp(15.5px,1.15vw,17.5px);
  --t-small:13.5px;
  --t-cap:11px;

  --lede:clamp(17px,1.9vw,22px);

  /* Ink. A near-black with blue in it reads richer than #000 on warm paper. */
  --ink:#0A1F2B;
  --ink-2:#3B5462;
  --ink-3:#6C8492;

  --paper:#F7F3E9;
  --paper-2:#F0E9D9;
  --deep:#08202C;
  --deep-2:#0E2E3E;

  --sea:#12718F;
  --surf:#5FC8E4;
  --clay:#C2562F;
  --sand-line:#DCD2BE;
}

/* ── Display type ──────────────────────────────────────────────────────── */

.mega{
  font-family:Fraunces,Georgia,serif;font-weight:900;
  font-size:var(--t-mega);line-height:.9;letter-spacing:-.05em;
  margin:0;text-wrap:balance;
}
.mega em{font-style:italic;font-weight:800}

.display{
  font-family:Fraunces,Georgia,serif;font-weight:900;
  font-size:var(--t-display);line-height:.98;letter-spacing:-.045em;
  margin:0;text-wrap:balance;
}

/* The kicker + rule pair. Cheap, and it does more for perceived quality
   than almost anything else on a page. */
.eyebrow{
  display:flex;align-items:center;gap:14px;
  font-size:var(--t-cap);font-weight:800;letter-spacing:.22em;
  text-transform:uppercase;color:var(--sea);margin-bottom:20px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:currentColor;opacity:.3}
.dark .eyebrow{color:var(--surf)}

.lede{
  font-size:var(--lede);line-height:1.5;color:var(--ink-2);
  max-width:46ch;margin:20px 0 0;
}
.dark .lede{color:#A9C6D2}

/* ── Numbers as the artwork ────────────────────────────────────────────
   This site is full of real, checkable figures: 110 miles, 25 beaches, a
   flat 10%, 0% capital gains. Set large, they carry a page that has no
   photographs, and unlike a stock beach they are true. */

.figures{
  display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  border-top:1px solid var(--sand-line);
}
.dark .figures{border-color:rgba(255,255,255,.16)}
.fig{
  padding:clamp(24px,3vw,40px) clamp(14px,2vw,26px) clamp(24px,3vw,36px) 0;
  border-right:1px solid var(--sand-line);
}
.dark .fig{border-color:rgba(255,255,255,.16)}
.fig:last-child{border-right:0}
.fig b{
  display:block;font-family:Fraunces,Georgia,serif;font-weight:900;
  font-size:clamp(44px,6.4vw,88px);line-height:.86;letter-spacing:-.055em;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.dark .fig b{color:#F4EFE3}
.fig .u{
  display:block;font-size:var(--t-cap);font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sea);margin-top:14px;
}
.dark .fig .u{color:var(--surf)}
.fig .n{display:block;font-size:13px;line-height:1.5;color:var(--ink-3);
  margin-top:9px;max-width:26ch}
.dark .fig .n{color:#8FAEBC}
@media (max-width:720px){
  .fig{border-right:0;border-bottom:1px solid var(--sand-line);padding-right:0}
  .fig:last-child{border-bottom:0}
}

/* ── Dark bands ────────────────────────────────────────────────────────
   Rhythm. A page that is one colour top to bottom reads as a document
   however good the type is; alternating weight is what makes it feel
   composed. */

.band.dark{
  background:var(--deep);color:#EAF2F6;
  background-image:
    radial-gradient(1200px 500px at 85% -10%, rgba(95,200,228,.14), transparent 60%),
    radial-gradient(900px 420px at 10% 110%, rgba(18,113,143,.22), transparent 60%);
}
.band.dark h2,.band.dark h3{color:#F4EFE3}
.band.dark p{color:#A9C6D2}

/* ── Scroll reveal ─────────────────────────────────────────────────────
   Applied by script so nothing is parked invisible when JavaScript is off
   or motion is reduced. Short and small — a long slow fade reads as a
   loading bug, not as craft. */

/* Only hide when JavaScript is confirmed present. The <html> element gets
   class "js" from an inline script in the head; with JS off that class never
   arrives and .rise never hides, so the content is simply there. Hiding
   first and hoping a script arrives to unhide is how a page ends up blank
   for anyone whose script was blocked. */
.js .rise{opacity:0;transform:translateY(14px)}
.js .rise.in{opacity:1;transform:none;
  transition:opacity .55s cubic-bezier(.2,.7,.3,1),transform .55s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){
  .rise,.js .rise.in{opacity:1;transform:none;transition:none}
}

/* ── Pull quote / statement ────────────────────────────────────────────── */

.statement{
  font-family:Fraunces,Georgia,serif;font-weight:800;
  font-size:clamp(22px,3.2vw,42px);line-height:1.14;letter-spacing:-.035em;
  max-width:20ch;margin:0;
}
.statement em{font-style:italic;color:var(--sea)}
.dark .statement em{color:var(--surf)}

/* ── Editorial two-column ──────────────────────────────────────────────── */

.split-ed{
  display:grid;gap:clamp(26px,5vw,80px);
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start;
}
@media (max-width:860px){ .split-ed{grid-template-columns:minmax(0,1fr)} }

/* ── The island list ───────────────────────────────────────────────────
   Every rule here is scoped under #list. partners.css already owns .chip
   and .why for the partner application, and both stylesheets load on the
   same page in places; scoping means the two can never fight over an
   element, and the block also styles itself correctly on a page that does
   not load partners.css at all — which is the front page. */

#list .chips{display:flex;flex-wrap:wrap;gap:9px}
#list .chip{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  padding:9px 15px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.05);
  color:#CFE2EA;font-size:13.5px;font-weight:600;
  transition:background .16s,border-color .16s,color .16s;
}
#list .chip input{
  /* Kept in the layout rather than display:none, so it stays reachable by
     keyboard and by a screen reader. It just has no size. */
  appearance:none;-webkit-appearance:none;
  width:13px;height:13px;margin:0;border-radius:4px;
  border:1px solid rgba(255,255,255,.45);background:transparent;
}
#list .chip input:checked{background:var(--surf);border-color:var(--surf)}
#list .chip:hover{border-color:rgba(95,200,228,.55);color:#EAF6FA}
#list .chip:has(input:checked){
  background:rgba(95,200,228,.15);border-color:var(--surf);color:#F4FBFD;
}
#list .chip:focus-within{outline:2px solid var(--surf);outline-offset:2px}

#list .joinrow{display:flex;gap:10px;flex-wrap:wrap}
#list .joinrow input{
  flex:1 1 260px;min-width:0;
  padding:15px 18px;border-radius:10px;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.06);
  color:#F4EFE3;font:inherit;font-size:16px;
}
#list .joinrow input::placeholder{color:#7C99A6}
#list .joinrow input:focus{
  outline:none;border-color:var(--surf);
  background:rgba(255,255,255,.10);
}
#list .joinrow .btn{flex:0 0 auto;padding-inline:30px}
#list .joinrow .btn[disabled]{opacity:.55;cursor:default}

#list .joinfine{
  font-size:12.5px;line-height:1.6;color:#8FAEBB;
  margin:14px 0 0;max-width:56ch;
}
#list .why{font-size:13.5px;margin:12px 0 0;min-height:1em;color:#A9C6D2}
#list .why.err{color:#FFB4A0;font-weight:600}

#list .joindone{
  border-left:3px solid var(--surf);padding:4px 0 4px 20px;margin-top:6px;
}
#list .joindone b{
  display:block;font-family:Fraunces,Georgia,serif;font-weight:800;
  font-size:var(--t-sub);color:#F4EFE3;margin-bottom:8px;
}