/* ============================================================
   CRUISE SALT ROOMS — design system
   Palette drawn from the subject itself: deep ocean abyss,
   salt-crystal white, Himalayan pink salt, brine teal, mineral gold.
   Layout rhythm alternates warm/cool sections to mirror the actual
   hot-cold thermal suite circuit (steam > salt > ice > relax).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Libre+Franklin:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --abyss:#0F1E26;
  --abyss-deep:#0A151B;
  --salt:#F6F1E7;
  --salt-dim:#EDE5D5;
  --himalayan:#BE6248;
  --himalayan-dim:#8C4531;
  --brine:#3E6E6B;
  --brine-light:#6C9E9A;
  --gold:#AD8A54;
  --ink:#182229;
  --ink-soft:#4B5A61;
  --line:rgba(15,30,38,0.12);
  --line-dark:rgba(246,241,231,0.16);

  --display: 'Fraunces', serif;
  --body: 'Libre Franklin', sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --radius: 6px;
  --max: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--salt);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}

/* -------- type -------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:500;margin:0 0 .4em;letter-spacing:-0.01em;line-height:1.08;}
h1{font-size:clamp(2.4rem,5vw,4.2rem);font-weight:400;}
h2{font-size:clamp(1.7rem,3.2vw,2.6rem);}
h3{font-size:1.3rem;}
p{margin:0 0 1em;color:var(--ink-soft);}
.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--himalayan-dim);
  display:inline-block;
  margin-bottom:.9em;
}
section.on-dark .eyebrow{color:var(--brine-light);}
.lede{font-size:1.15rem;max-width:62ch;}

/* -------- section rhythm: warm (salt) <> cool (abyss) -------- */
section{padding:88px 0;}
section.on-dark{background:var(--abyss);color:var(--salt);}
section.on-dark h1,section.on-dark h2,section.on-dark h3{color:var(--salt);}
section.on-dark p{color:#C7D2D3;}
section.on-cool{background:var(--brine);color:var(--salt);}
section.on-cool h1,section.on-cool h2,section.on-cool h3{color:var(--salt);}
section.on-cool p{color:#DCEAE8;}
section.tight{padding:56px 0;}

/* -------- nav -------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(246,241,231,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav-row{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;max-width:var(--max);margin:0 auto;}
.brand{font-family:var(--display);font-size:1.25rem;text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:.5em;}
.brand .mark{width:20px;height:20px;flex:none;}
.navlinks{display:flex;gap:26px;font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;list-style:none;margin:0;padding:0;}
.navlinks a{text-decoration:none;color:var(--ink-soft);}
.navlinks a:hover{color:var(--himalayan);}
.nav-cta{font-family:var(--mono);font-size:.75rem;background:var(--himalayan);color:var(--salt);padding:.6em 1.1em;border-radius:3px;text-decoration:none;letter-spacing:.03em;}

/* -------- buttons -------- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--mono);font-size:.8rem;letter-spacing:.03em;
  padding:.85em 1.4em;border-radius:3px;text-decoration:none;
  border:1px solid currentColor;
}
.btn-fill{background:var(--himalayan);border-color:var(--himalayan);color:var(--salt);}
.btn-fill:hover{background:var(--himalayan-dim);border-color:var(--himalayan-dim);}
.btn-line{background:transparent;color:var(--salt);}
.btn-line:hover{background:rgba(246,241,231,.1);}
.btn-line.on-light{color:var(--ink);}
.btn-line.on-light:hover{background:rgba(15,30,38,.06);}
.btn-brine{background:var(--brine);border-color:var(--brine);color:var(--salt);}
.btn-brine:hover{background:#345C59;}

/* -------- THE CIRCUIT — signature homepage element --------
   A stepped wayfinding strip encoding the real sequence of a
   thermal suite visit: steam > salt > ice > relax. Used again,
   scoped to a single ship, on every ship page. */
.circuit{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);}
.circuit-step{
  flex:1 1 160px;padding:22px 20px;position:relative;
  border-right:1px solid var(--line-dark);
}
.circuit-step:last-child{border-right:none;}
.circuit-step .num{font-family:var(--mono);font-size:.7rem;color:var(--brine-light);display:block;margin-bottom:.6em;letter-spacing:.08em;}
.circuit-step h4{font-family:var(--display);font-size:1.1rem;color:var(--salt);margin:0 0 .3em;}
.circuit-step p{font-size:.85rem;color:#B9C6C7;margin:0;}
.circuit-step.is-salt{background:rgba(190,98,72,.16);}
.circuit-step.is-salt .num{color:var(--himalayan);}
.circuit-step.is-salt h4{color:#F1DCD3;}

/* -------- ship directory / filters -------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 34px;}
.filter-btn{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.02em;
  padding:.55em 1em;border-radius:20px;border:1px solid var(--line);
  background:transparent;color:var(--ink-soft);cursor:pointer;
}
.filter-btn.active,.filter-btn:hover{border-color:var(--himalayan);color:var(--himalayan-dim);}

.ship-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;}
.ship-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;text-decoration:none;color:var(--ink);
  position:relative;transition:transform .15s ease,box-shadow .15s ease;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
}
.ship-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,30,38,.08);}
.ship-card .line-tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);}
.ship-card h3{margin:.3em 0 .5em;}
.ship-card .score{
  position:absolute;top:20px;right:20px;
  font-family:var(--mono);font-size:.72rem;color:var(--brine);
  border:1px solid var(--brine);border-radius:20px;padding:.2em .6em;
}
.ship-card .feat-list{font-size:.85rem;color:var(--ink-soft);margin:0;padding:0;list-style:none;}
.ship-card .feat-list li{padding:.15em 0;}
.ship-card .feat-list li:before{content:"·  ";color:var(--himalayan);}

/* -------- data table (spec-sheet feel) -------- */
.specs{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:.86rem;}
.specs tr{border-bottom:1px solid var(--line);}
.specs td{padding:12px 4px;vertical-align:top;}
.specs td:first-child{color:var(--ink-soft);width:38%;letter-spacing:.02em;}

/* -------- cards for line hubs / negative list -------- */
.line-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;}
.line-card{background:var(--salt-dim);border-radius:var(--radius);padding:26px;}
.line-card .tag{font-family:var(--mono);font-size:.7rem;color:var(--himalayan-dim);letter-spacing:.08em;text-transform:uppercase;}

.negative-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);}
.negative-item{background:var(--salt);padding:22px;}
.negative-item h4{font-family:var(--display);margin:0 0 .3em;}
.negative-item p{font-size:.88rem;margin:0;}

/* -------- footer -------- */
footer.site{background:var(--abyss-deep);color:#9FB0B2;padding:56px 0 40px;font-size:.86rem;}
footer.site a{color:#D7DEDF;text-decoration:none;}
footer.site a:hover{color:var(--himalayan);}
.foot-grid{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;margin-bottom:34px;}
.foot-cols{display:flex;gap:50px;flex-wrap:wrap;}
.foot-cols h5{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#7C9092;margin:0 0 .8em;}
.foot-cols ul{list-style:none;margin:0;padding:0;}
.foot-cols li{margin-bottom:.5em;}
.foot-legal{border-top:1px solid var(--line-dark);padding-top:22px;font-size:.78rem;color:#6C8082;}

/* -------- affiliate CTA block -------- */
.cta-pair{display:flex;flex-wrap:wrap;gap:14px;margin-top:1.4em;}

/* -------- utility -------- */
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start;}
@media(max-width:820px){.grid-2{grid-template-columns:1fr;}}
.small-print{font-size:.8rem;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:16px;margin-top:2.5em;}
.badge{display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;padding:.25em .7em;border-radius:20px;}
.badge.included{background:rgba(62,110,107,.14);color:var(--brine);}
.badge.gated{background:rgba(173,138,84,.16);color:var(--gold);}
.badge.paid{background:rgba(190,98,72,.14);color:var(--himalayan-dim);}

@media(max-width:640px){
  section{padding:56px 0;}
  .navlinks{display:none;}
}