/* ═══════════════════════════════════════════════════════════════════════
   goeleuthera.com — the front door.

   Two colour systems, on purpose:

     * The page below the fold is fixed. Sand, ink, a hairline rule. It has
       to be legible at 3am and at noon and it must not flicker.

     * The sky section is LIVE. --sky-1/2/3, --sea-now and --on-sky are set
       by island.js from the real solar position over Eleuthera, and they
       change through dawn, morning, midday, golden, dusk and night. That
       is the whole point of the page: open it twice and it is not the same
       colour.

   Everything transitions over 1.2s so a repaint at the top of the minute
   never snaps. The values are always defined here first, so the page is
   correct with JavaScript switched off — it just stops moving.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --sand:#F7F3E9;
  --sand-2:#F1EADA;
  --ink:#0B2430;
  --ink-2:#3E5763;
  --ink-3:#6E8592;
  --rule:#DED5C2;
  --sea:#1E7E9B;
  --clay:#C2562F;

  /* Live, overwritten by island.js. These defaults are midday. */
  --sky-1:#4FA9CD; --sky-2:#8FD0E0; --sky-3:#E4F2F0;
  --sea-now:#1E90AE; --on-sky:#08202B;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--sand);color:var(--ink);
  font:400 16px/1.6 Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:900;letter-spacing:-.035em;margin:0}

.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
@media (max-width:560px){ .wrap{width:min(1180px,100% - 28px)} }

/* ── Bar ───────────────────────────────────────────────────────────── */

.pbar{
  position:absolute;inset:0 0 auto 0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px clamp(14px,3vw,28px);
}
/* ── The solid header actually being solid ─────────────────────────────────
   .pbar is position:absolute so it can float over the front page's sky hero,
   where that is exactly right. Every other page asks for .pbar.solid — but
   desk.css only made that solid inside .deskpage, so on /cost, /changing,
   /wake-up, /pin and the settlement pages the header stayed absolute and
   floated OVER the first band.

   Nothing showed while .band carried 110px of top padding. The density pass
   cut it to 59px, which is less than the 78px header, and the first eyebrow
   on every one of those pages slid 19px underneath the bar. Measured, not
   guessed: header bottom 78px, eyebrow top 59px.

   .deskpage's own rules are more specific and still win, so those pages are
   unchanged. */
.pbar.solid{
  position:sticky;top:0;z-index:30;
  background:var(--ink);color:#EAF2F6;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.pbar.solid .pbrand{color:#EAF2F6}
.pbar.solid .pbrand .nm i{color:#8FB0BE}
.pbar.solid .pnav a{color:#CFE0E8;background:rgba(255,255,255,.08)}
.pbar.solid .pnav a:hover{background:rgba(255,255,255,.18);color:#fff}

.pbrand{display:flex;align-items:center;gap:11px;color:var(--on-sky)}
.pbrand .mk{
  width:38px;height:38px;flex:0 0 38px;border-radius:9px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(8px);
  display:grid;place-items:center;
  font-family:Fraunces,serif;font-weight:900;font-size:15px;letter-spacing:.02em;
}
.pbrand .nm{display:flex;flex-direction:column;line-height:1.16}
.pbrand .nm b{font-family:Fraunces,serif;font-weight:800;font-size:16px;letter-spacing:-.02em}
.pbrand .nm i{font-style:normal;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;opacity:.72}

.pnav{display:flex;gap:6px;flex-wrap:wrap}
.pnav a{
  padding:9px 15px;border-radius:999px;font-size:13.5px;font-weight:600;
  color:var(--on-sky);background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);
  transition:background .2s,transform .2s;
}
.pnav a:hover{background:rgba(255,255,255,.26);transform:translateY(-1px)}
@media (max-width:680px){
  .pbrand .nm i{display:none}
  .pnav a{padding:8px 12px;font-size:12.5px}
}

/* ── The sky ───────────────────────────────────────────────────────────
   The only part of the site that moves with the day. */

.sky{
  position:relative;min-height:100svh;
  display:flex;align-items:center;
  padding:104px clamp(14px,3vw,28px) 88px;
  background:linear-gradient(178deg,var(--sky-1) 0%,var(--sky-2) 52%,var(--sky-3) 100%);
  color:var(--on-sky);
  transition:background 1.2s linear,color 1.2s linear;
  overflow:hidden;
}
/* The generated aerial sits along the bottom as the water, tinted by the
   live sea colour so it belongs to whatever hour it is. */
.sky-water{
  position:absolute;left:-2%;right:-2%;bottom:-1px;height:min(34vh,300px);
  background-size:cover;background-position:center 78%;
  opacity:.78;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 52%,#000);
  mask-image:linear-gradient(180deg,transparent,#000 52%,#000);
}
.sky-water::after{
  content:"";position:absolute;inset:0;
  background:var(--sea-now);mix-blend-mode:color;opacity:.55;
  transition:background 1.2s linear;
}
.sky-in{position:relative;z-index:2;width:min(1180px,100%);margin-inline:auto}

.sky h1{
  font-size:clamp(40px,7.6vw,92px);line-height:.98;letter-spacing:-.045em;
  margin:22px 0 20px;text-wrap:balance;
  text-shadow:0 1px 2px rgba(0,0,0,.07);
}
.sky h1 em{font-style:italic;font-weight:800;opacity:.9}
.sky .sub{
  max-width:52ch;font-size:clamp(15.5px,1.7vw,18.5px);line-height:1.58;
  opacity:.92;margin:0 0 34px;
}

/* Now strip */
.now{display:flex;flex-direction:column;gap:6px}
.now-l{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.now-dot{
  width:8px;height:8px;border-radius:50%;background:currentColor;
  opacity:.7;align-self:center;
  animation:pulse 3.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.28;transform:scale(.82)}50%{opacity:.95;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){ .now-dot{animation:none;opacity:.7} }
.now-l b{
  font-family:Fraunces,serif;font-weight:800;font-size:clamp(20px,2.6vw,28px);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.now-l span{font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;opacity:.72}
.now-note{margin:0;font-size:14.5px;opacity:.82;max-width:46ch;font-style:italic}

/* Sun track */
.sun{
  border-top:1px solid rgba(255,255,255,.28);
  padding-top:26px;max-width:820px;
}
.sun-track{
  --at:50%;
  position:relative;height:2px;border-radius:2px;
  background:linear-gradient(90deg,
    rgba(255,255,255,.18), rgba(255,255,255,.6), rgba(255,255,255,.18));
  margin-bottom:22px;
}
.sun-track i{
  position:absolute;top:50%;left:var(--at);
  width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-radius:50%;
  background:#FFE8B8;box-shadow:0 0 0 4px rgba(255,232,184,.22),0 0 24px 6px rgba(255,222,150,.55);
  transition:left 1.2s ease;
}
.sun-track[data-up="0"] i{background:#C9D6DE;box-shadow:0 0 0 4px rgba(201,214,222,.18)}

.sun-grid{
  display:grid;gap:4px 26px;
  grid-template-columns:repeat(auto-fit,minmax(min(130px,100%),1fr));
}
.sun-grid > div{display:flex;flex-direction:column;gap:2px;padding:4px 0}
.sun-grid span{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;opacity:.68}
.sun-grid b{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.sun-grid .moon b{display:flex;align-items:baseline;gap:7px;font-size:16px}
/* The phase name lives inside the <b>, so it has to opt out of the
   uppercase label styling that `.sun-grid span` applies to its siblings. */
.sun-grid .moon b span{
  font-size:inherit;letter-spacing:-.005em;text-transform:none;opacity:1;
  font-weight:700;
}
.sun-grid .moon i{font-style:normal;font-size:16px;opacity:.9}
.sun-grid small{font-size:11.5px;opacity:.62}
.sun-fine{
  margin:20px 0 0;font-size:11.5px;line-height:1.55;opacity:.6;max-width:62ch;
}

.scroll-hint{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  font-size:19px;opacity:.55;color:var(--on-sky);
  animation:bob 2.6s ease-in-out infinite;z-index:2;
}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}
@media (prefers-reduced-motion:reduce){ .scroll-hint{animation:none} }
@media (max-height:680px){ .scroll-hint{display:none} }

/* ── Bands ─────────────────────────────────────────────────────────── */

/* Was clamp(60px,8vw,110px) — 220px of vertical padding per section.
   Measured across twelve sections that was 2,612px, 16% of the page,
   of nothing at all. */
.band{padding:clamp(38px,4.2vw,60px) 0;background:var(--sand)}
.band.alt{background:var(--sand-2);border-block:1px solid var(--rule)}

.secheadline{max-width:62ch;margin-bottom:clamp(18px,2.2vw,30px)}
.kick{
  font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sea);margin-bottom:12px;
}
.secheadline :is(h1,h2){
  font-size:clamp(26px,3.1vw,40px);line-height:1.06;margin-bottom:12px;
}
.secheadline p{color:var(--ink-2);font-size:16.5px;margin:0;max-width:56ch}

/* ── Doors ─────────────────────────────────────────────────────────── */

.doorgrid{
  display:grid;gap:clamp(16px,2vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr));
}
.door{
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--rule);border-radius:10px;
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .28s;
}
.door:hover{
  transform:translateY(-4px);border-color:var(--sea);
  box-shadow:0 18px 44px -22px rgba(11,36,48,.42);
}
.door-art{
  height:172px;background-size:cover;background-position:center;
  background-color:#8FD0E0;position:relative;flex:0 0 auto;
}
.door-art::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(11,36,48,.28));
}
.door-body{padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;flex:1}
.door-kick{
  font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--clay);margin-bottom:10px;
}
.door h2{font-size:clamp(21px,2.4vw,28px);line-height:1.06;margin-bottom:12px}
.door p{color:var(--ink-2);font-size:14.5px;line-height:1.62;margin:0 0 20px;flex:1}
.door-foot{display:flex;flex-direction:column;gap:7px;
  border-top:1px solid var(--rule);padding-top:15px}
.door-cta{font-size:14px;font-weight:700;color:var(--sea)}
.door-cta i{font-style:normal;display:inline-block;transition:transform .24s}
.door:hover .door-cta i{transform:translateX(5px)}
.door-meta{font-size:11.5px;color:var(--ink-3);letter-spacing:.02em}

/* ── Truths ────────────────────────────────────────────────────────── */

.truths{
  display:grid;gap:clamp(20px,3vw,40px);
  grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));
}
.truth{display:flex;flex-direction:column;gap:3px;
  padding-top:20px;border-top:2px solid var(--ink)}
.truth b{
  font-family:Fraunces,serif;font-weight:900;font-size:clamp(34px,5vw,58px);
  line-height:1;letter-spacing:-.045em;
}
.tl{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--sea)}
.td{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin-top:6px}
.truths-note{
  margin:clamp(26px,3vw,40px) 0 0;font-size:13px;color:var(--ink-3);
  padding-top:18px;border-top:1px solid var(--rule);
}

/* ── Places ────────────────────────────────────────────────────────── */

.placegrid{
  display:grid;gap:clamp(14px,1.6vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(min(238px,100%),1fr));
}
.place{
  display:flex;flex-direction:column;overflow:hidden;border-radius:9px;
  background:#fff;border:1px solid var(--rule);
  transition:transform .26s,box-shadow .26s;
}
.place:hover{transform:translateY(-3px);box-shadow:0 14px 34px -20px rgba(11,36,48,.4)}
.place-art{height:126px;background-size:cover;background-position:center;
  background-color:#8FD0E0;flex:0 0 auto}
.place-b{padding:16px 17px 19px}
.place h3{font-size:17.5px;line-height:1.16;margin-bottom:7px;letter-spacing:-.025em}
.place p{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin:0}

/* ── Why ───────────────────────────────────────────────────────────── */

.why{display:grid;gap:clamp(28px,4vw,64px);
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));align-items:start}
.why h2{font-size:clamp(25px,3.6vw,42px);line-height:1.05;margin-bottom:16px}
.why p{color:var(--ink-2);font-size:15.5px;line-height:1.68;margin:0 0 15px;max-width:56ch}
.whylist{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:8px;overflow:hidden}
.whylist li{background:var(--sand);padding:17px 19px;display:flex;
  flex-direction:column;gap:4px}
.whylist b{font-family:Fraunces,serif;font-weight:800;font-size:16.5px;letter-spacing:-.02em}
.whylist span{font-size:13.5px;color:var(--ink-2);line-height:1.55}

/* ── Foot ──────────────────────────────────────────────────────────── */

.pfoot{background:#0B2430;color:#CFE0E8;padding:clamp(46px,6vw,74px) 0 30px}
.fcols{display:grid;gap:clamp(24px,4vw,50px);
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.pfoot h5{
  font-size:10.5px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  color:#7FA6B8;margin:0 0 15px;
}
.pfoot p{font-size:14px;line-height:1.6;color:#A9C0CB;max-width:34ch;margin:0 0 13px}
.pfoot a{display:block;font-size:14px;padding:5px 0;color:#CFE0E8;
  transition:color .2s}
.pfoot a:hover{color:#fff}
.ffine{
  margin-top:clamp(32px,4vw,52px);padding-top:20px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12px;color:#7FA6B8;
}

/* Focus that is actually visible, on both grounds. */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--sea);outline-offset:3px;border-radius:4px;
}
.sky a:focus-visible{outline-color:#FFE8B8}

/* ── The header on a phone ─────────────────────────────────────────────
   flex-wrap put "Buying" on a second row of its own and let the brand break
   into "Go / Eleuthera" — the first thing anybody arriving from a search on
   a phone saw was a header that looked broken.

   The nav scrolls sideways instead of wrapping. Four items is one swipe,
   the row height stays fixed, and nothing has to be hidden behind a menu
   button that costs a tap. */

@media (max-width:640px){
  .pbar{gap:10px;align-items:center}
  .pbrand{flex:0 0 auto}
  .pbrand .nm b{white-space:nowrap;font-size:15px}
  .pnav{
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .pnav::-webkit-scrollbar{display:none}
  .pnav a{flex:0 0 auto;padding:7px 11px;font-size:12.5px;white-space:nowrap}
}