/* ===== wiki.yachts — design tokens ===== */
:root {
  --bg: #0B0F14;
  --surface: #141A21;
  --text: #E8E4DC;
  --text2: #9A958C;
  --accent: #C5C0B6;
  --gold: #B8A99A;
  --border: #1F262E;
  --ui: Inter, 'Neue Haas Grotesk', system-ui, sans-serif;
  --disp: 'Fraunces', 'Freight Display', 'GT Sectra', Georgia, serif;
  --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 2rem; --sp-4: 4rem; --sp-5: 8rem;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--text);
  font-family:var(--ui); font-size:15px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection { background:rgba(184,169,154,.25); }
a { color:var(--text); text-decoration:none; }
img { display:block; max-width:100%; height:auto; }
.container { width:min(1200px, 92vw); margin:0 auto; }

/* ---------- header ---------- */
.site-header {
  position:sticky; top:0; z-index:50;
  background:rgba(11,15,20,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.header-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.brand { font-family:var(--disp); font-size:1.35rem; letter-spacing:.02em; }
.brand .dot { color:var(--gold); }
.nav { display:flex; gap:1.8rem; align-items:center; }
.nav a { color:var(--text2); font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; }
.nav a:hover, .nav a.active { color:var(--text); }
.nav a.member-link { color:var(--gold); border:1px solid rgba(184,169,154,.35); padding:.4rem .9rem; border-radius:999px; }
.nav-toggle { display:none; background:none; border:none; color:var(--text); font-size:1.4rem; cursor:pointer; }
@media (max-width:720px) {
  .nav {
    position:fixed; inset:64px 0 auto 0; background:var(--bg);
    flex-direction:column; gap:1.2rem; padding:2rem 1.2rem 2.5rem;
    border-bottom:1px solid var(--border); display:none;
  }
  .nav.open { display:flex; }
  .nav-toggle { display:block; }
}

/* ---------- hero ---------- */
.hero {
  position:relative; min-height:88vh; display:flex; align-items:flex-end;
  overflow:hidden; background:linear-gradient(180deg, #0d1319 0%, var(--bg) 100%);
}
.hero-media { position:absolute; inset:0; }
.hero-media img { width:100%; height:100%; object-fit:cover; opacity:.42; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,15,20,.08) 0%, rgba(11,15,20,.55) 60%, var(--bg) 100%); }
.hero-copy { position:relative; z-index:2; padding:0 0 4.5rem; max-width:760px; }
.hero-kicker { font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); margin-bottom:1.4rem; }
.hero-title {
  font-family:var(--disp); font-weight:340; font-size:clamp(2.4rem, 6vw, 4.6rem);
  line-height:1.08; letter-spacing:-.01em; color:var(--text);
}
.hero-sub { margin-top:1.6rem; color:var(--text2); font-size:1.02rem; max-width:52ch; }
.hero-actions { display:flex; gap:1rem; margin-top:2.4rem; flex-wrap:wrap; }

/* ---------- buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.8rem 1.6rem; border-radius:999px; font-size:.82rem;
  letter-spacing:.06em; text-transform:uppercase; font-weight:500;
  border:1px solid var(--border); color:var(--text); transition:.2s ease;
}
.btn:hover { border-color:var(--text); }
.btn-gold { background:var(--gold); color:#0b0f14 !important; border-color:var(--gold); font-weight:600; }
.btn-gold:hover { background:#cbb9a6; }
.btn-ghost { background:transparent; }

/* ---------- sections ---------- */
.section { padding: var(--sp-5) 0; }
.section-head { margin-bottom: var(--sp-4); }
.section-kicker { font-size:.7rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); margin-bottom:.8rem; }
.section-title { font-family:var(--disp); font-weight:340; font-size:clamp(1.9rem, 3.6vw, 3rem); letter-spacing:-.01em; }
.section-sub { color:var(--text2); margin-top:.8rem; max-width:60ch; }

/* ---------- feature spreads (homepage) ---------- */
.feature {
  display:grid; grid-template-columns:1.15fr 1fr; gap:3.5rem; align-items:center;
  margin-bottom: var(--sp-5);
}
.feature.alt { grid-template-columns:1fr 1.15fr; }
.feature-media { position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:4px; }
.feature-media img { width:100%; height:100%; object-fit:cover; transition:transform 1.2s ease; }
.feature:hover .feature-media img { transform:scale(1.03); }
.feature-copy h3 { font-family:var(--disp); font-weight:340; font-size:clamp(1.5rem, 2.6vw, 2.2rem); margin-bottom:.8rem; }
.feature-copy p { color:var(--text2); margin-bottom:1.4rem; }
.feature-meta { display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; font-size:.78rem; color:var(--text2); letter-spacing:.04em; }
.feature-meta span { display:inline-flex; align-items:center; gap:.35rem; }
@media (max-width:860px) {
  .feature, .feature.alt { grid-template-columns:1fr; gap:1.6rem; }
}

/* ---------- archive ---------- */
.filters {
  display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.4rem;
}
.filter {
  background:var(--surface); border:1px solid var(--border); color:var(--text2);
  padding:.45rem 1rem; border-radius:999px; font-size:.78rem; cursor:pointer;
  letter-spacing:.04em; transition:.15s ease;
}
.filter:hover { border-color:var(--accent); color:var(--text); }
.filter.active { background:var(--text); color:var(--bg); border-color:var(--text); font-weight:600; }
.search-wrap { margin-bottom:2.4rem; }
.search-wrap input {
  width:100%; background:var(--surface); border:1px solid var(--border);
  color:var(--text); padding:.9rem 1.2rem; border-radius:4px; font-size:1rem;
  font-family:var(--ui); outline:none;
}
.search-wrap input:focus { border-color:var(--accent); }
.archive-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:2.2rem;
}
.card {
  display:block; background:var(--surface); border:1px solid var(--border);
  border-radius:4px; overflow:hidden; transition:border-color .2s ease, transform .2s ease;
}
.card:hover { border-color:var(--accent); transform:translateY(-2px); }
.card-media { aspect-ratio:4/3; overflow:hidden; position:relative; background:#0e141b; }
.card-media img { width:100%; height:100%; object-fit:cover; opacity:.85; transition:opacity .3s, transform 1s; }
.card:hover .card-media img { opacity:1; transform:scale(1.02); }
.card-media .no-photo {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(140deg, #10171f 0%, #0b0f14 100%);
}
.card-body { padding:1.1rem 1.2rem 1.3rem; }
.card-name { font-family:var(--disp); font-size:1.2rem; font-weight:380; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-specs { font-size:.78rem; color:var(--text2); margin-top:.3rem; letter-spacing:.05em; }
.card-specs span { margin-right:.8rem; }
.card-tag {
  display:inline-block; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); border:1px solid rgba(184,169,154,.3); border-radius:999px;
  padding:.15rem .55rem; margin:.5rem .3rem 0 0;
}
.empty-archive { color:var(--text2); text-align:center; padding:4rem 0; }

/* ---------- yacht page ---------- */
.yacht-hero {
  position:relative; min-height:74vh; display:flex; align-items:flex-end; overflow:hidden;
  background:linear-gradient(180deg, #0d1319 0%, var(--bg) 100%);
}
.yacht-hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; }
.yacht-hero .hero-overlay { background:linear-gradient(180deg, rgba(11,15,20,.1) 40%, rgba(11,15,20,.72) 80%, var(--bg) 100%); }
.yacht-headline { position:relative; z-index:2; padding:0 0 3.6rem; }
.yacht-name { font-family:var(--disp); font-weight:340; font-size:clamp(2.6rem, 6vw, 4.8rem); letter-spacing:-.015em; line-height:1.02; }
.yacht-dual { font-size:.78rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin-top:1.1rem; }
.spec-table {
  width:100%; border-collapse:collapse; margin-top:3rem;
}
.spec-table tr { border-bottom:1px solid var(--border); }
.spec-table td { padding:.95rem .4rem; font-size:.95rem; }
.spec-table td:first-child { color:var(--text2); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; width:38%; }
.spec-table td:last-child { font-family:var(--disp); font-size:1.15rem; }
.yacht-story { color:var(--text2); max-width:74ch; font-size:1.02rem; }
.spread { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; align-items:stretch; }
.spread .frame { aspect-ratio:4/3; overflow:hidden; border-radius:4px; background:#0e141b; }
.spread img { width:100%; height:100%; object-fit:cover; }
.quote-block {
  border-left:2px solid var(--gold); padding:1rem 1.6rem; margin:2.6rem 0;
  font-family:var(--disp); font-style:italic; font-size:1.25rem; color:var(--text);
}
.related { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:1.6rem; }
.member-gate {
  margin-top:3rem; padding:2.6rem; border:1px solid rgba(184,169,154,.28);
  border-radius:6px; background:linear-gradient(160deg, #171e26 0%, #0e1319 100%);
  text-align:center; position:relative; z-index:2;
}
.member-gate h3 { font-family:var(--disp); font-weight:360; font-size:1.5rem; margin-bottom:.6rem; }
.member-gate p { color:var(--text2); max-width:52ch; margin:0 auto 1.4rem; }

/* ---------- lists / books ---------- */
.list-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:2.2rem; }
.book {
  display:block; background:var(--surface); border:1px solid var(--border);
  border-radius:4px; padding:2.2rem 2rem; transition:.2s ease; position:relative; overflow:hidden;
}
.book:hover { border-color:var(--gold); }
.book .book-no { font-family:var(--disp); font-size:.9rem; color:var(--gold); letter-spacing:.2em; }
.book h3 { font-family:var(--disp); font-weight:360; font-size:1.7rem; margin:.8rem 0 .5rem; }
.book p { color:var(--text2); font-size:.92rem; }
.book .lock {
  position:absolute; top:1.6rem; right:1.6rem; font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); border:1px solid rgba(184,169,154,.3);
  padding:.2rem .6rem; border-radius:999px;
}
.book-sequence { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-top:2.4rem; }
.book-sequence .frame { aspect-ratio:4/3; }
.book-end { margin-top:3.4rem; text-align:center; }

/* ---------- membership ---------- */
.tiers { display:grid; grid-template-columns:1fr 1fr; gap:1.8rem; max-width:900px; }
.tier {
  background:var(--surface); border:1px solid var(--border); border-radius:6px;
  padding:2.6rem 2.4rem; position:relative;
}
.tier.private { border-color:rgba(184,169,154,.42); }
.tier .tier-name { font-family:var(--disp); font-size:1.5rem; font-weight:380; }
.tier .tier-price { font-family:var(--disp); font-size:2.6rem; font-weight:340; margin:.6rem 0; }
.tier .tier-price small { font-size:.95rem; color:var(--text2); font-family:var(--ui); }
.tier ul { list-style:none; margin:1.4rem 0 1.8rem; }
.tier li { padding:.45rem 0; color:var(--text2); font-size:.94rem; border-bottom:1px solid rgba(31,38,46,.6); }
.tier li::before { content:"—"; color:var(--gold); margin-right:.8rem; }
.member-note { color:var(--text2); font-size:.88rem; max-width:64ch; margin-top:2.4rem; }

/* ---------- paypal subscription buttons ---------- */
.paypal-btn { margin-top:1.6rem; min-height:48px; }
.stripe-alt { display:inline-block; margin-top:.9rem; font-size:.78rem; letter-spacing:.04em; color:var(--text2); text-decoration:none; border-bottom:1px solid rgba(154,149,140,.3); padding-bottom:1px; }
.stripe-alt:hover { color:var(--text); border-color:var(--text); }
.billing-toggle { display:flex; gap:.4rem; justify-content:center; margin-bottom:2.2rem; }
.billing-toggle button { background:none; border:1px solid var(--border); color:var(--text2); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; padding:.45rem 1.15rem; border-radius:999px; cursor:pointer; transition:border-color .2s, color .2s; }
.billing-toggle button:hover { color:var(--text); }
.billing-toggle button.active { border-color:var(--gold); color:var(--text); }
.billing-annual { display:none; }
.tier[data-billing="annual"] .billing-annual { display:block; }
.tier[data-billing="annual"] .billing-monthly { display:none; }
.billing-price-annual { display:none; }
.tier[data-billing="annual"] .billing-price-annual { display:inline; }
.tier[data-billing="annual"] .billing-price-monthly { display:none; }
.welcome-line { font-family:var(--disp); font-size:1.05rem; color:var(--gold); border:1px solid rgba(184,169,154,.3); border-radius:6px; padding:1rem 1.2rem; text-align:center; }
.paypal-btn .paypal-button { border-radius:6px; }

/* ---------- member signup form ---------- */
.member-form-section { padding-top:0; }
.member-form { display:grid; gap:1.1rem; }
.member-form label { display:block; color:var(--text2); font-size:.84rem; letter-spacing:.04em; text-transform:uppercase; }
.member-form input, .member-form select, .member-form textarea {
  width:100%; margin-top:.45rem; padding:.9rem 1rem; background:var(--surface);
  border:1px solid var(--border); border-radius:4px; color:var(--text);
  font-family:var(--ui); font-size:1rem; transition:border-color .2s;
}
.member-form input:focus, .member-form select:focus, .member-form textarea:focus {
  outline:none; border-color:rgba(184,169,154,.55);
}
.member-form select { appearance:none; }
.member-form textarea { resize:vertical; }

/* ---------- about / methodology ---------- */
.about-prose { max-width:72ch; color:var(--text2); font-size:1.02rem; }
.about-prose p { margin-bottom:1.4rem; }
.about-prose h2 { font-family:var(--disp); color:var(--text); font-weight:360; font-size:1.5rem; margin:2.4rem 0 .8rem; }
.principles { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1.6rem; margin-top:2.6rem; }
.principle { border-top:1px solid var(--border); padding-top:1.2rem; }
.principle h4 { font-family:var(--disp); font-weight:380; margin-bottom:.5rem; }
.principle p { color:var(--text2); font-size:.9rem; }

/* ---------- footer ---------- */
.site-footer {
  border-top:1px solid var(--border); padding:3.6rem 0 2.6rem; margin-top:4rem;
}
.footer-inner { display:flex; flex-wrap:wrap; justify-content:space-between; gap:2rem; }
.footer-brand { font-family:var(--disp); font-size:1.2rem; }
.footer-cols { display:flex; gap:3.5rem; flex-wrap:wrap; }
.footer-cols h5 { font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:var(--text2); margin-bottom:.9rem; }
.footer-cols a { display:block; color:var(--text2); font-size:.88rem; padding:.22rem 0; }
.footer-cols a:hover { color:var(--text); }
.footer-legal { margin-top:2.6rem; font-size:.74rem; color:var(--text2); border-top:1px solid var(--border); padding-top:1.4rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }

/* ---------- visual fantasy flow (v2) ---------- */
.flow { position:relative; width:100%; }
.flow-frame { position:relative; width:100%; min-height:92vh; overflow:hidden; background:#0b0f14; }
.flow-frame .flow-media { position:absolute; inset:0; }
.flow-frame .flow-media img { width:100%; height:100%; object-fit:cover; opacity:.94; }
.flow-frame .flow-shade { position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,15,20,.02) 30%, rgba(11,15,20,.42) 78%, var(--bg) 100%); }
.flow-caption { position:absolute; left:0; right:0; bottom:0; z-index:3; padding:0 0 4.2rem; }
.flow-caption .container { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.flow-title { font-family:var(--disp); font-weight:300; font-size:clamp(2rem, 5.4vw, 4.4rem); letter-spacing:-.015em; line-height:1.04; }
.flow-line { margin-top:.9rem; color:var(--text2); font-size:.8rem; letter-spacing:.22em; text-transform:uppercase; }
.flow-note { max-width:38ch; color:var(--text2); font-size:.9rem; text-align:right; }

/* quiet typographic frame when no photograph exists */
.flow-frame.typo { display:flex; align-items:flex-end; background:linear-gradient(165deg, #10171f 0%, #0b0f14 55%, #0d1319 100%); }
.flow-frame.typo .typo-mark { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.flow-frame.typo .typo-mark span { font-family:var(--disp); font-weight:300; font-size:clamp(4rem, 16vw, 12rem); color:rgba(232,228,220,.05); letter-spacing:-.02em; }

/* ---------- blur paywall (soft gate) ---------- */
.img-gate { position:relative; overflow:hidden; }
.img-gate .gate-img { width:100%; height:100%; object-fit:cover; transition:filter 1.1s ease, opacity 1.1s ease; }
body:not(.member-access):not(.member-private) .img-gate.gated .gate-img,
body.member-access .img-gate.gated-private .gate-img { filter:blur(16px) saturate(.85); opacity:.62; transform:scale(1.04); }
.img-gate .gate-tag {
  position:absolute; right:1.4rem; bottom:1.4rem; z-index:4;
  font-size:.64rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--text); background:rgba(11,15,20,.62); border:1px solid rgba(184,169,154,.32);
  padding:.42rem .9rem; border-radius:999px; backdrop-filter:blur(6px);
  transition:opacity .4s ease; opacity:0;
}
.img-gate.gated .gate-tag { opacity:1; }
body.member-access .img-gate.gated .gate-tag,
body.member-private .img-gate .gate-tag { opacity:0; pointer-events:none; }
.gate-note { text-align:center; padding:2.6rem 1rem; color:var(--text2); font-size:.86rem; letter-spacing:.06em; }
.gate-note a { color:var(--gold); border-bottom:1px solid rgba(184,169,154,.35); }

/* progressive load: tiny blurred base under the real image */
.lqip { position:relative; background:#0e141b; }
.lqip img { position:relative; z-index:2; opacity:0; transition:opacity .9s ease; }
.lqip img.loaded { opacity:1; }
.lqip::after { content:""; position:absolute; inset:0; z-index:1; background-size:cover; background-position:center; filter:blur(18px) saturate(1.1); transform:scale(1.08); opacity:.5; transition:opacity 1s ease; }
.lqip.loaded::after { opacity:0; }

/* ---------- wall of admiralty ---------- */
.admiralty { max-width:720px; margin:0 auto; text-align:center; padding:3rem 0 5rem; }
.admiralty h1 { font-family:var(--disp); font-weight:300; font-size:clamp(2.4rem, 6vw, 4rem); letter-spacing:.02em; margin-bottom:1rem; }
.admiralty .seal { font-family:var(--disp); font-size:.95rem; letter-spacing:.5em; color:var(--gold); text-transform:uppercase; margin-bottom:3.2rem; }
.admiralty ul { list-style:none; }
.admiralty li { padding:1.05rem 0; border-bottom:1px solid rgba(31,38,46,.7); font-family:var(--disp); font-size:1.18rem; color:var(--text); letter-spacing:.04em; }
.admiralty li .vessel { color:var(--text2); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; display:block; margin-top:.3rem; }
.admiralty .locked { padding:4rem 1rem; color:var(--text2); }

/* ---------- store module ---------- */
.store-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:2rem; }
.store-item { border:1px solid var(--border); border-radius:6px; overflow:hidden; background:var(--surface); }
.store-item img { width:100%; aspect-ratio:1/1; object-fit:cover; }
.store-body { padding:1.3rem 1.4rem 1.5rem; }
.store-body h3 { font-family:var(--disp); font-weight:360; font-size:1.1rem; }
.store-body p { color:var(--text2); font-size:.84rem; margin:.4rem 0 1rem; }
.store-body .btn { width:100%; }

/* ---------- board module ---------- */
.board-wrap { max-width:680px; margin:0 auto; }
.board-post { border-bottom:1px solid var(--border); padding:1.6rem 0; }
.board-post .meta { font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text2); margin-bottom:.7rem; }
.board-post .body { color:var(--text); line-height:1.75; }
.board-composer { margin:2.4rem 0; }
.board-composer textarea { width:100%; background:var(--surface); border:1px solid var(--border); color:var(--text); padding:1rem 1.1rem; border-radius:6px; font-family:var(--ui); font-size:.95rem; resize:vertical; }
.board-composer textarea:focus { outline:none; border-color:rgba(184,169,154,.5); }


.page-head { padding:5rem 0 2.4rem; border-bottom:1px solid var(--border); margin-bottom:3rem; }
.page-head h1 { font-family:var(--disp); font-weight:340; font-size:clamp(2.2rem, 4.6vw, 3.6rem); letter-spacing:-.01em; }
.page-head .lede { color:var(--text2); margin-top:.8rem; max-width:58ch; }
.muted { color:var(--text2); }
.eyebrow { font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); }
.spin-loader { display:inline-block; width:1em; height:1em; border:2px solid var(--border); border-top-color:var(--gold); border-radius:50%; animation:sp 1s linear infinite; vertical-align:middle; }
@keyframes sp { to { transform:rotate(360deg); } }