/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════════════════ */
:root {
    /* Ghana national palette */
    --gh-red:    #CE1126;
    --gh-gold:   #FCD116;
    --gh-green:  #006B3F;

    /* Brand palette */
    --amber:      #D97706;
    --amber-dark: #92400E;
    --amber-pale: #FEF3C7;
    --amber-mid:  #FDE68A;
    --ink:        #0F0E0D;
    --ink-soft:   #3A3835;
    --ink-mid:    #6B6560;
    --ink-faint:  #A09890;
    --white:      #FFFFFF;
    --cream:      #FAFAF7;
    --warm:       #F5F2EC;
    --rule:       #E8E3DB;
    --ease:       cubic-bezier(.25,.46,.45,.94);
}

/* ═══════════════════════════════════════════════════════════
   BASE
═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Lora', serif;
    background: var(--white);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

@keyframes up   { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes fade { from { opacity:0; } to { opacity:1; } }

/* ═══════════════════════════════════════════════════════════
   GHANA FLAG BAR
═══════════════════════════════════════════════════════════ */
.ghana-bar { display:flex; height:4px; }
.ghana-bar .r { flex:1; background:var(--gh-red); }
.ghana-bar .g { flex:1; background:var(--gh-gold); }
.ghana-bar .n { flex:1; background:var(--gh-green); }

/* ═══════════════════════════════════════════════════════════
   DYNAMIC ISLAND NAV
   Strategy: .nav-inner is absolute with left:50% + translateX(-50%).
   Width grows from 900px → 100vw (both concrete px values — smooth).
   Spring easing: cubic-bezier(.16,1,.3,1)
═══════════════════════════════════════════════════════════ */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    pointer-events: none;
    min-height: 80px;
}
.nav-inner {
    pointer-events: all;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 14px;
    width: 900px;
    max-width: calc(100vw - 28px);
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 10px;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    border-radius: 999px;
    border: 1px solid var(--rule);
    box-shadow:
        0 10px 40px rgba(0,0,0,.10),
        0 2px 8px rgba(0,0,0,.06);
    overflow: hidden;
    will-change: width, top, border-radius;
    transition:
        width        .65s cubic-bezier(.16,1,.3,1),
        max-width    .65s cubic-bezier(.16,1,.3,1),
        top          .65s cubic-bezier(.16,1,.3,1),
        height       .65s cubic-bezier(.16,1,.3,1),
        border-radius .65s cubic-bezier(.16,1,.3,1),
        padding-left  .65s cubic-bezier(.16,1,.3,1),
        padding-right .65s cubic-bezier(.16,1,.3,1),
        background   .5s ease,
        border-color .5s ease,
        box-shadow   .5s ease;
}
.nav.scrolled .nav-inner {
    top: 0;
    width: 100vw;
    max-width: 100vw;
    height: 62px;
    border-radius: 0;
    padding-left: 48px;
    padding-right: 48px;
    background: rgba(255,255,255,.97);
    border-color: transparent;
    box-shadow: 0 1px 0 var(--rule);
}

/* Text colors — always dark on white */
.nav-inner .nav-brand-name { color:var(--ink); }
.nav-inner .nav-brand-sub  { color:var(--ink-faint); }
.nav-inner .nav-links a    { color:var(--ink-mid); transition:color .2s ease; }
.nav-inner .nav-links a:hover        { color:var(--ink); }
.nav-inner .nav-links a[data-active] { color:var(--ink); font-weight:500; }

.nav-brand { display:flex; align-items:center; gap:.7rem; flex-shrink:0; }
.nav-brand img { height:40px; width:auto; }
.nav-brand-name {
    font-family:'Merriweather',serif;
    font-size:.875rem; font-weight:700; line-height:1.2;
}
.nav-brand-sub {
    font-family:'IBM Plex Sans',sans-serif;
    font-size:.67rem; font-weight:400; letter-spacing:.02em;
}
.nav-links { display:flex; align-items:center; gap:2rem; }
.nav-links a { font-size:.845rem; font-weight:400; white-space:nowrap; }

/* Island CTA: amber pill → ink square on scroll */
.btn-nav {
    display:inline-flex; align-items:center; gap:.35rem; flex-shrink:0;
    background:var(--amber); color:#fff;
    font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:.8rem;
    padding:.45rem 1.1rem; border-radius:999px; border:none; cursor:pointer;
    white-space:nowrap;
    transition:background .2s ease, border-radius .65s cubic-bezier(.16,1,.3,1), transform .15s ease;
}
.btn-nav:hover { background:#B45309; transform:scale(1.04); }
.nav.scrolled .btn-nav { border-radius:5px; }
.nav.scrolled .btn-nav:hover { transform:none; }

/* ═══════════════════════════════════════════════════════════
   SHARED BUTTONS
═══════════════════════════════════════════════════════════ */
.btn-primary {
    display:inline-flex; align-items:center; gap:.4rem;
    background:var(--amber); color:#fff;
    font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:.9rem;
    padding:.78rem 1.75rem; border-radius:5px; border:none; cursor:pointer;
    transition:background .18s var(--ease), transform .15s;
}
.btn-primary:hover { background:#B45309; transform:translateY(-1px); }

.btn-outline {
    display:inline-flex; align-items:center; gap:.4rem;
    background:transparent; color:var(--ink-soft);
    font-family:'IBM Plex Sans',sans-serif; font-weight:500; font-size:.9rem;
    padding:.78rem 1.75rem; border-radius:5px;
    border:1.5px solid var(--rule); cursor:pointer;
    transition:border-color .18s, color .18s;
}
.btn-outline:hover { border-color:var(--ink-mid); color:var(--ink); }

/* ═══════════════════════════════════════════════════════════
   SHARED SECTION EYEBROW
═══════════════════════════════════════════════════════════ */
.section-eyebrow { display:flex; align-items:center; gap:.5rem; margin-bottom:.55rem; }
.eyebrow-rule { width:20px; height:2px; background:var(--amber); border-radius:999px; flex-shrink:0; }
.section-tag {
    font-size:.68rem; font-weight:600; letter-spacing:.18em;
    text-transform:uppercase; color:var(--amber);
}
.section-h2 {
    font-family:'Merriweather',serif;
    font-size:clamp(1.65rem,3vw,2.5rem);
    font-weight:700; line-height:1.15; letter-spacing:-.018em; color:var(--ink);
}
.section-lead {
    font-size:.925rem; font-weight:300; line-height:1.82;
    color:var(--ink-mid); max-width:520px; margin-top:.75rem;
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */
.footer {
    background:#1C1917;
    padding:2rem clamp(1.25rem,5vw,3.5rem);
    border-top:1px solid rgba(255,255,255,.10);
}
.footer-inner {
    max-width:1240px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:1.25rem;
}
.footer-brand { display:flex; align-items:center; gap:.65rem; }
.footer-brand img { height:24px; filter:brightness(10) grayscale(1); opacity:.75; }
.footer-brand span { font-size:.78rem; color:rgba(255,255,255,.75); }
.footer-links { display:flex; gap:1.75rem; }
.footer-links a { font-size:.78rem; color:rgba(255,255,255,.7); transition:color .15s; }
.footer-links a:hover { color:#fff; }
.footer-copy { font-size:.72rem; color:rgba(255,255,255,.55); }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — shared breakpoints
═══════════════════════════════════════════════════════════ */
@media (max-width:768px) {
    .nav-inner { top:10px; height:48px; padding:0 8px; }
    .nav.scrolled .nav-inner { top:0; height:56px; padding-left:16px; padding-right:16px; }
    .nav-links { display:none; }
    .footer-inner { flex-direction:column; align-items:flex-start; }
}

/* ═══════════════════════════════════════════════════════════
   PAGINATION
═══════════════════════════════════════════════════════════ */
.pg-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.pg-info {
    font-family: 'Lora', serif;
    font-size: .8rem;
    color: var(--ink-mid);
}
.pg-info strong {
    color: var(--ink);
    font-weight: 600;
}
.pg-controls {
    display: flex;
    align-items: center;
    gap: .25rem;
}
.pg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 .5rem;
    font-family: 'Lora', serif;
    font-size: .8rem;
    font-weight: 500;
    color: var(--ink-mid);
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: 6px;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
    text-decoration: none;
    line-height: 1;
}
.pg-btn:hover {
    color: var(--ink);
    border-color: var(--ink-mid);
    background: var(--cream);
}
.pg-btn--active {
    color: var(--white);
    background: var(--ink);
    border-color: var(--ink);
    cursor: default;
    font-weight: 600;
}
.pg-btn--active:hover {
    color: var(--white);
    background: var(--ink);
    border-color: var(--ink);
}
.pg-btn--disabled {
    color: var(--ink-faint);
    background: var(--cream);
    border-color: var(--rule);
    cursor: not-allowed;
    pointer-events: none;
}
.pg-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    font-family: 'Lora', serif;
    font-size: .8rem;
    color: var(--ink-faint);
    letter-spacing: .05em;
}
@media (max-width: 480px) {
    .pg-info { display: none; }
    .pg-nav { justify-content: center; }
}