/* ============================================================
   BariNation Foundation - shared brand system
   Palette pulled from barination.org (navy / teal / emerald /
   gold / cream / mint). Type modernized: warm serif + humanist
   sans. Used across all homepage concept directions.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600;6..72,700&family=Oswald:wght@600&family=Petrona:wght@700&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root{
  /* core brand */
  --navy:#143a5c;
  --navy-900:#0e2b45;
  --navy-700:#1c4a72;
  --teal:#188e85;
  --teal-600:#1aa394;
  --green:#2fa86d;
  --gold:#f0a52c;
  --gold-600:#e3941a;

  /* surfaces */
  --cream:#f8f2e2;
  --mint:#dcefe4;
  --mint-200:#eaf5ee;
  --paper:#fffdf8;
  --white:#ffffff;

  /* ink */
  --ink:#13233a;
  --ink-soft:#3f5167;
  --ink-faint:#6b7c90;
  --line:#e7e0cf;

  /* type */
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* shape */
  --r-sm:8px;
  --r-md:16px;
  --r-lg:28px;
  --r-pill:999px;

  --shadow-sm:0 2px 8px rgba(19,35,58,.06);
  --shadow-md:0 14px 40px -18px rgba(19,35,58,.28);
  --shadow-lg:0 30px 70px -30px rgba(19,35,58,.40);

  --maxw:1200px;
}

*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  font-size:18px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.05; margin:0; letter-spacing:-.01em; color:var(--navy); text-wrap:balance; }
p{ margin:0; text-wrap:pretty; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }
.eyebrow{
  font-family:var(--sans); font-weight:700; font-size:13px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--teal);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--sans); font-weight:700; font-size:16px;
  padding:15px 26px; border-radius:var(--r-pill); border:none;
  cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-gold{ background:var(--gold); color:var(--navy-900); box-shadow:0 8px 22px -8px rgba(240,165,44,.7); }
.btn-gold:hover{ background:var(--gold-600); }
.btn-navy{ background:var(--navy); color:#fff; }
.btn-navy:hover{ background:var(--navy-900); }
.btn-teal{ background:var(--teal); color:#fff; }
.btn-teal:hover{ background:var(--teal-600); }
.btn-ghost{ background:transparent; color:var(--navy); box-shadow:inset 0 0 0 2px rgba(20,58,92,.25); }
.btn-ghost:hover{ box-shadow:inset 0 0 0 2px var(--navy); }
.btn-lg{ padding:18px 34px; font-size:18px; }

/* ---------- wave / sunrise mark ---------- */
.mark{ display:block; width:44px; height:44px; flex:none; }
.brandlock{ display:inline-flex; align-items:center; gap:12px; }
.brandlock .name{ font-family:var(--serif); font-weight:700; font-size:22px; color:var(--navy); letter-spacing:-.02em; line-height:1; }
.brandlock .name small{ display:block; font-family:var(--sans); font-weight:700; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--teal); margin-top:3px; }
.brandlock .logo{ height:52px; width:52px; flex:none; border-radius:50%; background:#fff; box-shadow:0 2px 9px rgba(19,35,58,.14); display:block; }

/* ---------- image placeholder ---------- */
.ph{
  position:relative; overflow:hidden; background:var(--mint-200);
  background-image:repeating-linear-gradient(135deg, rgba(20,58,92,.05) 0 12px, rgba(20,58,92,0) 12px 24px);
  border-radius:var(--r-md); display:flex; align-items:center; justify-content:center;
  color:var(--ink-faint);
}
.ph span{
  font-family:'Courier New', monospace; font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; background:rgba(255,255,255,.7); padding:5px 10px; border-radius:99px;
  border:1px solid rgba(20,58,92,.12);
}

/* ---------- chips / tags ---------- */
.chip{
  display:inline-flex; align-items:center; gap:.4em;
  font-size:13px; font-weight:700; letter-spacing:.02em;
  padding:6px 13px; border-radius:var(--r-pill);
  background:var(--mint); color:var(--teal);
}

.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }