/* 5 · Chart — our own: nautical chart paper, navy ink, wide grotesk, coordinates as the ornament */
:root{
  --loader-bg:#13294a;--loader-ink:#f6f7f2;--loader-bar:#c4412a;
  --bg:#edefe8; --ink:#13294a; --muted:#435570; --line:#c4cbc8; --grid:rgb(19 41 74 / .07); --mark:#c4412a; --paper:#f6f7f2;
  --font-display:"Archivo",system-ui,sans-serif;
  --font-body:"Archivo",system-ui,sans-serif;
  --font-mono:"Martian Mono",ui-monospace,monospace;
  --hdr-h:72px; --max:1320px; --focus:#c4412a; --fs-body:16px;
}
body{background-color:var(--bg);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:96px 96px}
.hdr{background:var(--bg);color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.logo{font-family:var(--font-display);flex-direction:row;align-items:baseline;gap:12px}
.logo-name{font-weight:600;font-size:17px;text-transform:uppercase;letter-spacing:.14em}
.logo-sub{font-size:16px;font-weight:400;letter-spacing:.02em;color:var(--muted)}
.nav a{font-size:16px;font-weight:500}
.nav a:not(.btn):hover{color:var(--mark)}
.btn{font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:.02em;padding:0 20px;border:1px solid var(--ink)}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:var(--mark);border-color:var(--mark)}
@media (max-width:560px){.logo-sub{display:none}}

.hero{color:#fff;background-color:#0c1d36;--hero-scrim:rgb(9 22 42 / .68);--hero-scrim-top:rgb(9 22 42 / .35);--hero-k:.86}
@media (max-width:760px){.hero{--hero-k:.76}}
.coord{position:absolute;z-index:3;font-family:var(--font-mono);font-size:16px;color:#fff;letter-spacing:.02em}
.coord.tl{top:calc(var(--hdr-h) + 20px);left:var(--gutter)}
.coord.br{top:calc(var(--hdr-h) + 20px);right:var(--gutter)}
.hero h1{font-weight:700;line-height:1.02;text-transform:uppercase;font-stretch:112%;letter-spacing:.015em}
.btn-hero{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-hero:hover{background:var(--mark);border-color:var(--mark);color:#fff}
.link-hero{font-weight:600;text-underline-offset:6px}

section:not(.hero):not(.yacht):not(.story):not(.cta){padding:clamp(80px,10vw,140px) 0}
h2{font-weight:700;font-size:clamp(28px,3vw,42px);line-height:1.04;text-transform:uppercase;font-stretch:112%;letter-spacing:.015em}
.sec-head{display:grid;grid-template-columns:1.6fr 1fr;gap:20px 56px;align-items:end;border-bottom:1.5px solid var(--ink);padding-bottom:28px;margin-bottom:48px}
.sec-lead{color:var(--muted);font-size:17px;max-width:44ch}

.dest-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1.5px solid var(--ink);background:var(--paper)}
.dest{padding:14px}
.dest+.dest{border-left:1.5px solid var(--ink)}
.dest-media{aspect-ratio:5/4;border:1px solid var(--ink)}
.dest-body{padding:24px 10px 12px;display:grid;grid-template-columns:1fr auto;gap:4px 24px}
.dest h3{font-weight:800;font-size:32px;text-transform:uppercase;font-stretch:125%;line-height:1}
.dest-tag{grid-column:1;color:var(--muted);margin-top:6px}
.dest-places{grid-column:1;font-family:var(--font-mono);font-size:16px;margin-top:10px}
.dest-meta{grid-column:2;grid-row:1/4;flex-direction:column;align-items:flex-end;font-family:var(--font-mono);font-size:16px;color:var(--muted)}
.price{font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--mark);font-stretch:112%}

.yacht{min-height:82svh;display:flex;align-items:flex-end;color:#fff;padding-bottom:clamp(40px,6vw,80px)}
.yacht::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgb(9 22 42 / .7),rgb(9 22 42 / 0) 60%);z-index:1}
.yacht-copy{display:grid;grid-template-columns:1fr auto;gap:12px 40px;align-items:end}
.yacht-price{grid-column:2;grid-row:1;font-family:var(--font-mono);font-size:16px;color:#fff;justify-self:end}
.yacht .btn{grid-column:2;grid-row:2}
.btn-on-media{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-on-media:hover{background:var(--mark);border-color:var(--mark);color:#fff}

.steps{display:grid;grid-template-columns:repeat(4,1fr);border:1.5px solid var(--ink);background:var(--paper)}
.steps li{padding:28px 24px 32px}
.steps li+li{border-left:1.5px solid var(--ink)}
.num{display:block;font-family:var(--font-mono);font-size:16px;color:var(--mark);margin-bottom:44px}
.steps h3{font-weight:800;font-size:20px;text-transform:uppercase;font-stretch:118%;margin-bottom:8px}
.steps p{color:var(--muted)}

.gallery-title{margin-bottom:36px}
.gallery-row{--g-gap:12px;padding:0 var(--gutter)}
.g{border:1.5px solid var(--ink);padding:8px;background:var(--paper)}

.story{min-height:82svh;display:flex;align-items:flex-end;color:#fff;padding-bottom:clamp(56px,10vh,120px)}
.story::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgb(9 22 42 / .7),rgb(9 22 42 / 0) 65%);z-index:1}
.story-meta{font-family:var(--font-mono);font-size:16px;margin:14px 0 22px}
.story-quote{font-size:clamp(20px,2vw,26px);line-height:1.4;max-width:30ch;margin-bottom:30px}

.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1.5px solid var(--ink);background:var(--paper)}
.rev{padding:30px;display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.rev+.rev{border-left:1.5px solid var(--ink)}
.rev blockquote{font-size:18px;line-height:1.5}
.rev figcaption{display:flex;flex-direction:column;font-family:var(--font-mono);font-size:16px;color:var(--muted);gap:4px}
.rev b{font-family:var(--font-display);font-size:16px;color:var(--ink);text-transform:uppercase;font-stretch:112%}

.trade{background:var(--ink);color:var(--paper)}
.trade-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;align-items:center;gap:24px 56px}
.trade-text{font-size:19px;color:#c9d3e3;max-width:40ch}
.trade .btn-primary{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.trade .btn-primary:hover{background:var(--mark);border-color:var(--mark);color:#fff}

.cta{display:grid;grid-template-columns:1fr 1fr;min-height:auto;margin:clamp(80px,10vw,140px) var(--gutter);border:1.5px solid var(--ink);background:var(--paper)}
.cta-media{position:relative;grid-column:2;grid-row:1;min-height:520px;border-left:1.5px solid var(--ink)}
.cta-in{grid-column:1;grid-row:1;width:auto;margin:0;padding:clamp(40px,6vw,96px);align-self:center}
.cta h2{font-size:clamp(34px,3.6vw,52px)}
.cta-text{color:var(--muted);font-size:17px;max-width:40ch;margin:20px 0 32px}
.cta .btn-hero{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-ghost{color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}

.ftr{background:var(--ink);color:var(--paper);padding:72px 0 28px}
.ftr .logo-sub{color:#aebbd0}
.ftr h2{font-family:var(--font-mono);font-size:16px;font-weight:400;text-transform:none;margin-bottom:16px;color:#aebbd0}
.ftr-bottom{border-top:1px solid #2c4468;margin-top:52px;padding-top:22px;font-family:var(--font-mono);font-size:16px;color:#aebbd0}

.mbar{background:var(--bg);box-shadow:0 -1.5px 0 var(--ink)}

@media (max-width:860px){
  .sec-head,.trade-in{grid-template-columns:1fr}
  .dest-grid,.rev-grid,.steps{grid-template-columns:1fr}
  .dest+.dest,.rev+.rev,.steps li+li{border-left:0;border-top:1.5px solid var(--ink)}
  .num{margin-bottom:14px}
  .dest-body{grid-template-columns:1fr}
  .dest-meta{grid-column:1;grid-row:auto;flex-direction:row;align-items:baseline;margin-top:10px}
  .yacht-copy{grid-template-columns:1fr}
  .yacht-price,.yacht .btn{grid-column:1;grid-row:auto;justify-self:start}
  .cta{grid-template-columns:1fr}
  .cta-media{grid-column:1;grid-row:1;min-height:320px;border-left:0;border-bottom:1.5px solid var(--ink)}
  .cta-in{grid-row:2;padding:36px 22px}
  .coord.br{display:none}
}

.yacht,.story{background-color:#0c1d36}

/* Header fit (1 Nov): descriptor under the name on mid-size screens so the links and both header buttons fit */
.hdr .logo{flex-direction:column;align-items:flex-start;gap:2px}
@media (max-width:1199px){.nav{display:none}.menu{display:block}}

/* phones: the three grids become swipe carousels (base.css [data-rails]); each card carries its own frame */
@media (max-width:760px){
  .dest-grid,.steps,.rev-grid{border:0;background:none;border-radius:0}
  .dest,.steps li,.rev{border:1.5px solid var(--ink);background:var(--paper);border-radius:0}
  .dest+.dest,.rev+.rev,.steps li+li{border:1.5px solid var(--ink)}
}

/* 2 Nov (user): rounded buttons and menu panel; photos and the chart frames keep square corners */
.btn{border-radius:999px}
.menu-panel{border-radius:16px}

/* Header wordmark (2 Nov): one line "1000 Islands Travel" in caps; "Remote Indonesia" lives in the headline and the footer, not twice on one screen */
.hdr .logo-name{font-size:17px;letter-spacing:.16em}

/* Final pass (2 Nov): hover on the dark CTA button; white focus ring on the ink and video sections */
.cta .btn-hero:hover{background:var(--mark);border-color:var(--mark);color:#fff}
.hero,.yacht,.story,.trade,.ftr{--focus:#fff}
.nav .btn-trade:hover{background:var(--ink);color:var(--bg)}
.ftr-brand p{color:#aebbd0}