/* Cocodrie Charters — Chart Table
   Scene: a paper chart spread on the table in the cabin, corners held down,
   pencil bearings on it. The depth contours don't sit in the hero — they run
   under the whole page, because on a chart they run under everything.
   Rules: nothing is rounded (a chart is ruled, not rounded). Nothing casts a
   shadow. Every panel is held by a 2px sand keyline instead. Depths and
   distances are set in mono, because they are data. */

:root{
  --deep:#0F3B40;
  --deeper:#0A2C30;
  --shoal:#164A50;
  --sand:#E4D8BE;
  --rust:#B5502A;
  --foam:#EAF2F0;
  --foam-72:rgba(234,242,240,.74);
  --foam-46:rgba(234,242,240,.48);
  --key:rgba(228,216,190,.34);

  --display:'Big Shoulders Display',system-ui,sans-serif;
  --body:'Barlow',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --page:1200px;
  --pad:clamp(20px,5vw,68px);
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0; background:var(--deep); color:var(--foam);
  font-family:var(--body); font-size:clamp(16px,1.05vw,17.5px); line-height:1.6;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

/* the chart itself — contours under every section, all the way down */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='620' viewBox='0 0 1200 620'%3E%3Cg fill='none' stroke='%23E4D8BE' stroke-width='1.5'%3E%3Cpath d='M-40 520C120 470 260 560 420 505S740 420 1240 470'/%3E%3Cpath d='M-40 452C130 400 268 492 428 436S752 348 1240 400'/%3E%3Cpath d='M-40 384C140 330 276 424 436 367S764 276 1240 330'/%3E%3Cpath d='M-40 316C150 260 284 356 444 298S776 204 1240 260'/%3E%3Cpath d='M-40 248C160 190 292 288 452 229S788 132 1240 190'/%3E%3Cpath d='M-40 180C170 120 300 220 460 160S800 60 1240 120'/%3E%3Cpath d='M-40 112C180 50 308 152 468 91S812 -12 1240 50'/%3E%3C/g%3E%3C/svg%3E");
  background-size:1200px 620px;
  background-position:center top;
}
body > *{ position:relative; z-index:1; }

h1,h2,h3{ font-family:var(--display); font-weight:800; margin:0; line-height:.9; text-transform:uppercase; letter-spacing:.004em; }
a{ color:inherit; }
/* height:auto is required: the width/height attributes on every <img> would
   otherwise beat aspect-ratio and render images at their intrinsic height. */
img,svg{ max-width:100%; height:auto; }
:focus-visible{ outline:2px solid var(--sand); outline-offset:3px; }

.label{ font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--rust); margin:0 0 14px; }

/* sounding — a depth figure, set as data */
.sound{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--foam-46); }

/* ---- controls: cut square, keyline or solid rust */
.btn{
  display:inline-block; cursor:pointer; text-decoration:none; text-align:center;
  background:var(--rust); color:var(--foam); border:2px solid var(--rust); border-radius:0;
  padding:14px 28px;
  font-family:var(--display); font-weight:700; font-size:18px; text-transform:uppercase; letter-spacing:.05em;
  transition:background .16s ease, color .16s ease;
}
.btn:hover{ background:transparent; color:var(--rust); }
.btn-sm{ padding:9px 18px; font-size:15px; }
.btn-line{ background:transparent; color:var(--foam); border-color:var(--key); }
.btn-line:hover{ border-color:var(--sand); color:var(--sand); background:transparent; }
.btn-wide{ display:block; width:100%; }

/* ---- nav */
.nav{ max-width:var(--page); margin:0 auto; padding:18px var(--pad); display:flex; align-items:center; gap:22px; border-bottom:1px solid var(--key); }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:800; font-size:24px; text-transform:uppercase; text-decoration:none; }
.mark{ width:28px; height:28px; color:var(--sand); }
.links{ display:flex; gap:26px; margin-left:auto; }
.links a{ font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--foam-72); text-decoration:none; }
.links a:hover{ color:var(--sand); }
@media (max-width:920px){ .links{ display:none; } .nav .btn-sm{ margin-left:auto; } }

/* ---- hero */
.hero{ position:relative; overflow:hidden; background:transparent; }
/* The chart lines stay on the body; the water sits behind the headline, dimmed
   far enough that the type never needs a scrim to be readable. */
.hero-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0; opacity:.34; filter:saturate(.85);
}
.hero-inner,.facts{ position:relative; z-index:1; }
.contours{ display:none; }               /* the chart is on the body now */
.hero-inner{ max-width:var(--page); margin:0 auto; padding:clamp(44px,7vw,104px) var(--pad) clamp(36px,4.5vw,64px); }
.kicker{ font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--sand); margin:0 0 22px; }
.hero h1{ font-size:clamp(58px,12vw,168px); margin-bottom:26px; }
.hero .lede{ font-size:clamp(17px,1.5vw,20.5px); color:var(--foam-72); max-width:46ch; margin:0 0 32px; }
.hero-btns{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---- facts: ruled cells, keylines only */
.facts{
  max-width:var(--page); margin:0 auto; list-style:none;
  padding:0 var(--pad) clamp(36px,4.5vw,64px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:0;
}
.facts li{ border:1px solid var(--key); border-right:0; padding:20px clamp(14px,1.6vw,22px) 22px; }
.facts li:last-child{ border-right:1px solid var(--key); }
@media (max-width:620px){ .facts li{ border-right:1px solid var(--key); border-bottom:0; } .facts li:last-child{ border-bottom:1px solid var(--key); } }
.facts strong{ display:block; font-family:var(--display); font-weight:800; font-size:clamp(34px,3.8vw,50px); color:var(--sand); line-height:1; }
.facts span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--foam-46); }

/* ---- sections */
.section{ max-width:var(--page); margin:0 auto; padding:clamp(52px,7vw,100px) var(--pad); }
.section--sand{ max-width:none; background:var(--sand); color:#20301E; }
.section--sand > *{ max-width:var(--page); margin-inline:auto; }
.section--sand .label{ color:var(--rust); }
.section--deep{ max-width:none; background:var(--deeper); }
.section--deep > *{ max-width:var(--page); margin-inline:auto; }
.head{ max-width:46ch; margin-bottom:clamp(28px,4vw,48px); }
.head h2{ font-size:clamp(36px,5.4vw,74px); }
.head .sub{ color:var(--foam-72); margin:16px 0 0; }
.section--sand .head .sub{ color:rgba(32,48,30,.74); }

/* ---- trips: ruled panels, no radius, no shadow */
.trips{ display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:0; }
.trip{ background:transparent; border:1px solid var(--key); border-right:0; padding:28px 26px 32px; }
.trip-photo{ width:100%; aspect-ratio:9/7; object-fit:cover; display:block; margin-bottom:22px; }
.trip:last-child{ border-right:1px solid var(--key); }
@media (max-width:900px){ .trip{ border-right:1px solid var(--key); border-bottom:0; } .trip:last-child{ border-bottom:1px solid var(--key); } }
.trip--on{ background:var(--shoal); border-color:var(--rust); border-right:1px solid var(--rust) !important; }
.trip-len{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--sand); margin:0 0 16px; }
.trip h3{ font-size:34px; margin-bottom:10px; }
.price{ font-family:var(--display); font-weight:800; font-size:46px; color:var(--rust); margin:0 0 18px; line-height:1; }
.trip--on .price{ color:var(--sand); }
.trip p{ color:var(--foam-72); font-size:15.5px; }
.trip ul{ list-style:none; padding:0; margin:20px 0 0; }
.trip li{ padding:9px 0 9px 22px; position:relative; font-family:var(--mono); font-size:12.5px; letter-spacing:.03em; color:var(--foam-46); border-top:1px solid var(--key); }
.trip li::before{ content:''; position:absolute; left:0; top:17px; width:10px; height:2px; background:var(--rust); }

/* ---- included */
.incl{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:0; }
.incl > div{ border:1px solid rgba(32,48,30,.24); border-right:0; border-bottom:0; padding:26px 24px 30px; }
.incl > div:nth-child(3n){ border-right:1px solid rgba(32,48,30,.24); }
.incl > div:nth-last-child(-n+3){ border-bottom:1px solid rgba(32,48,30,.24); }
@media (max-width:900px){ .incl > div{ border-right:1px solid rgba(32,48,30,.24); border-bottom:0; } .incl > div:last-child{ border-bottom:1px solid rgba(32,48,30,.24); } }
.incl h3{ font-size:25px; margin-bottom:10px; color:#20301E; }
.incl p{ margin:0; color:rgba(32,48,30,.74); font-size:15.5px; }

/* ---- captain */
.captain{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,4.5vw,64px); align-items:center; }
@media (max-width:860px){ .captain{ grid-template-columns:1fr; } }
.cap-art{ border:2px solid var(--key); }
.cap-art svg{ width:100%; height:auto; display:block; }
.captain h2{ font-size:clamp(36px,4.6vw,62px); margin-bottom:24px; }
.prose{ margin:0 0 16px; color:var(--foam-72); max-width:54ch; }
.cred{ margin:26px 0 0; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--foam-46); padding-top:18px; border-top:1px solid var(--key); }

/* ---- book */
.book{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4.5vw,64px); align-items:start; }
@media (max-width:860px){ .book{ grid-template-columns:1fr; } }
.book .head{ margin-bottom:0; }
.phone{ margin:22px 0 0; font-family:var(--mono); font-size:14px; color:var(--foam-72); }
.phone a{ color:var(--sand); }

.form label{ display:block; margin-bottom:15px; }
.form span{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--foam-46); margin-bottom:8px; }
.form input,.form select,.form textarea{
  width:100%; font-family:var(--body); font-size:16px; color:var(--foam);
  background:var(--deep); border:1px solid var(--key); border-radius:0; padding:13px 14px;
}
.form textarea{ resize:vertical; }
.form input:focus,.form select:focus,.form textarea:focus{ border-color:var(--sand); outline:none; }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:520px){ .form .row{ grid-template-columns:1fr; } }
.sent{ margin:14px 0 0; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--sand); text-align:center; }

/* ---- footer */
.foot{ max-width:var(--page); margin:0 auto; padding:clamp(40px,5vw,68px) var(--pad); border-top:1px solid var(--key); color:var(--foam-72); font-size:15px; }
.foot p{ margin:0 0 8px; }
.foot-mark{ font-family:var(--display); font-weight:800; font-size:32px; text-transform:uppercase; color:var(--foam); }
.fine{ margin-top:22px; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--foam-46); line-height:1.8; max-width:66ch; }

/* ---- demo tag */
.demo-tag{
  position:fixed; right:0; bottom:0; z-index:60;
  display:flex; flex-direction:column; gap:2px;
  background:var(--sand); color:var(--deeper);
  padding:12px 20px; border-radius:0; text-decoration:none;
  font-family:var(--mono); font-size:10px; letter-spacing:.09em; line-height:1.5;
}
.demo-tag span{ opacity:.66; text-transform:uppercase; font-size:9px; letter-spacing:.16em; }
.demo-tag strong{ font-weight:500; font-size:11px; }
.demo-tag:hover{ background:var(--rust); color:var(--foam); }