/* ═══════════════════════════════════════════════════════════════════
   IMMERSIUM — CARIBBEAN EDITORIAL · Design System Shared
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* PALETTE */
  --bg:#F8F5EE;          --bg-alt:#F2EDE0;
  --paper:#FFFDF7;       --paper-hover:#FFFBEF;
  --ink:#0E1A2B;         --ink-soft:#2A3749;    --ink-mute:#6B7685;
  --line:#E8E0CE;        --line-soft:#F0E9D9;
  --cobalt:#1E40AF;      --cobalt-dark:#1E3A8A;
  --jade:#5EEAD4;        --jade-deep:#0D9488;   --jade-soft:#CCFBF1;
  --amber:#D97706;       --amber-soft:#FED7AA;
  --coral:#E11D48;       --coral-soft:#FFE4E6;
  --plum:#7C3AED;        --plum-soft:#EDE9FE;
  --sand:#C9A96E;        --sand-soft:#F5E6C8;
  --p-cobalt:#DBE4FF;
  /* RADIUS */
  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:24px;
  /* SHADOWS */
  --sh-1:0 1px 0 rgba(14,26,43,.04), 0 0 0 1px var(--line);
  --sh-2:0 2px 10px rgba(14,26,43,.05), 0 0 0 1px var(--line);
  --sh-lift:0 20px 40px -16px rgba(14,26,43,.14), 0 4px 10px rgba(14,26,43,.04);
  /* TYPO */
  --f-display:"Fraunces", Georgia, serif;
  --f-body:"Inter Tight", system-ui, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--f-body);
  background:var(--bg);
  color:var(--ink);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01","cv11";
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.055  0 0 0 0 0.102  0 0 0 0 0.169  0 0 0 0.03 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
button,a{font:inherit;color:inherit;text-decoration:none;border:none;background:none;cursor:pointer}
svg{display:block}
.mono{font-family:var(--f-mono);font-feature-settings:"tnum"}
.serif{font-family:var(--f-display)}
.italic{font-family:var(--f-display);font-style:italic;font-weight:500}
.hidden{display:none!important}

/* ═══════════════════════════════════════════════════
   PUBLIC NAVBAR
   ═══════════════════════════════════════════════════ */
.pub-nav{position:sticky;top:0;z-index:50;background:rgba(248,245,238,.82);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.pub-nav-inner{max-width:1240px;margin:0 auto;padding:16px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.pub-brand{display:flex;align-items:baseline;gap:10px}
.pub-brand .num{font-family:var(--f-display);font-style:italic;font-size:10.5px;color:var(--jade-deep);letter-spacing:.18em;font-weight:500}
.pub-brand .name{font-family:var(--f-display);font-size:22px;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.pub-brand .name em{font-style:italic;color:var(--jade-deep);font-weight:500}
.pub-links{display:flex;align-items:center;gap:4px}
.pub-links a{padding:8px 14px;border-radius:10px;font-size:13.5px;font-weight:500;color:var(--ink-soft);transition:background .15s,color .15s}
.pub-links a:hover{background:var(--bg-alt);color:var(--ink)}
.pub-links a.active{color:var(--ink);font-weight:600}
.pub-cta{display:flex;align-items:center;gap:10px}

/* ═══════════════════════════════════════════════════
   BUTTONS / PILLS
   ═══════════════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:10px;font-size:13px;
  font-weight:600;transition:background .15s,transform .08s,box-shadow .15s;border:1px solid transparent;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn svg{width:14px;height:14px;stroke-width:2}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#1a2940}
.btn-jade{background:var(--jade);color:var(--ink);box-shadow:0 4px 12px -4px rgba(94,234,212,.5)}
.btn-jade:hover{background:#7ff0df}
.btn-outline{background:var(--paper);border-color:var(--line);color:var(--ink)}
.btn-outline:hover{background:var(--paper-hover);border-color:var(--sand)}
.btn-ghost{background:transparent;color:var(--ink-soft)}
.btn-ghost:hover{background:var(--bg-alt)}
.btn-lg{padding:14px 24px;font-size:14px;border-radius:12px}
.btn-lg svg{width:16px;height:16px}

.pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;padding:3px 10px;border-radius:999px;
  font-weight:600;letter-spacing:.02em;border:1px solid transparent}
.pill-jade{background:var(--jade-soft);color:var(--jade-deep);border-color:rgba(13,148,136,.15)}
.pill-cobalt{background:var(--p-cobalt);color:var(--cobalt);border-color:rgba(30,64,175,.15)}
.pill-sand{background:var(--sand-soft);color:#7A5A20;border-color:rgba(201,169,110,.25)}
.pill-amber{background:var(--amber-soft);color:var(--amber);border-color:rgba(217,119,6,.2)}
.pill-coral{background:var(--coral-soft);color:var(--coral);border-color:rgba(225,29,72,.15)}
.pill-plum{background:var(--plum-soft);color:var(--plum);border-color:rgba(124,58,237,.15)}
.pill-ink{background:var(--ink);color:#fff}
.pill-outline{background:var(--paper);color:var(--ink-soft);border-color:var(--line)}
.pill .dot{width:6px;height:6px;border-radius:50%}

/* ═══════════════════════════════════════════════════
   LAYOUT HELPERS
   ═══════════════════════════════════════════════════ */
.container{max-width:1240px;margin:0 auto;padding:0 32px}
.section{padding:80px 0}
.section-tight{padding:48px 0}

.eyebrow{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-mute);font-weight:600;margin-bottom:14px}
.eyebrow-jade{color:var(--jade-deep)}

h1,.h1{font-family:var(--f-display);font-size:56px;font-weight:500;letter-spacing:-.025em;line-height:1.05}
h1 em,.h1 em{font-style:italic;color:var(--jade-deep);font-weight:500}
h2,.h2{font-family:var(--f-display);font-size:38px;font-weight:500;letter-spacing:-.02em;line-height:1.1}
h2 em,.h2 em{font-style:italic;color:var(--jade-deep);font-weight:500}
h3,.h3{font-family:var(--f-display);font-size:24px;font-weight:500;letter-spacing:-.01em;line-height:1.2}
h3 em,.h3 em{font-style:italic;font-weight:500}
.lede{font-size:17px;line-height:1.55;color:var(--ink-soft);max-width:620px}

/* ═══════════════════════════════════════════════════
   CARD
   ═══════════════════════════════════════════════════ */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);transition:box-shadow .2s,border-color .2s,transform .2s}
.card.lift:hover{border-color:var(--sand);box-shadow:var(--sh-lift);transform:translateY(-2px)}
.card-head{padding:20px 22px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-title{font-family:var(--f-display);font-size:18px;font-weight:500;letter-spacing:-.01em}
.card-sub{font-size:12px;color:var(--ink-mute);margin-top:2px}
.card-body{padding:4px 22px 22px}

/* ═══════════════════════════════════════════════════
   FOOTER COMMON
   ═══════════════════════════════════════════════════ */
.pub-footer{background:var(--ink);color:rgba(255,255,255,.75);padding:60px 0 32px;margin-top:80px;position:relative;overflow:hidden}
.pub-footer::before{content:"";position:absolute;top:-140px;right:-80px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(94,234,212,.15) 0%,transparent 65%);pointer-events:none}
.pub-footer .container{position:relative}
.pub-footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.08)}
.pub-footer-brand .name{font-family:var(--f-display);font-size:26px;font-weight:500;color:#fff;letter-spacing:-.02em}
.pub-footer-brand .name em{font-style:italic;color:var(--jade);font-weight:500}
.pub-footer-brand .tag{margin-top:8px;font-size:10.5px;letter-spacing:.25em;text-transform:uppercase;color:rgba(255,255,255,.4);font-weight:600}
.pub-footer-brand p{margin-top:14px;font-size:13px;line-height:1.6;color:rgba(255,255,255,.6);max-width:320px}
.pub-footer-col h4{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--jade);font-weight:600;margin-bottom:14px}
.pub-footer-col ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.pub-footer-col a{font-size:13px;color:rgba(255,255,255,.7);transition:color .15s}
.pub-footer-col a:hover{color:var(--jade)}
.pub-footer-bottom{padding-top:28px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:12px;color:rgba(255,255,255,.4)}

/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */
@media(max-width:960px){
  .container{padding:0 20px}
  .pub-nav-inner{padding:14px 20px}
  .pub-links{display:none}
  h1,.h1{font-size:40px}
  h2,.h2{font-size:30px}
  h3,.h3{font-size:22px}
  .section{padding:56px 0}
  .pub-footer-top{grid-template-columns:1fr 1fr;gap:28px}
}