/* ============================================================
   howldr — shared design tokens & base
   Single source of truth for the palette, fonts, reset, and
   base layout, linked by every page. Page-specific component
   styles (nav, footer, buttons, cards) still live in each
   page's inline <style> for now — they differ by page and will
   be unified in a later pass.
   ============================================================ */
:root{
  /* surfaces */
  --navy:#0D1B2A;
  --navy-2:#122236;
  --navy-3:#1a3050;
  --navy-mid:#152236;
  --navy-lt:#1E3147;
  --moon:#F4F6FA;

  /* brand gold (standardized — was split #C9922A / #C8882A) */
  --gold:#C9922A;
  --gold-lt:#E8B060;
  --gold-dk:#A07020;
  --gold-bg:rgba(201,146,42,0.08);
  --gold-bd:rgba(201,146,42,0.25);

  /* text */
  --text:#E8EDF2;
  --text-2:#A8B8C8;
  --text-3:#6080A0;

  /* rules & accents */
  --rule:rgba(255,255,255,0.07);
  --rule-2:rgba(255,255,255,0.12);
  --blue-bg:rgba(74,168,232,0.08);
  --blue-bd:rgba(74,168,232,0.2);
  --blue-lt:#7AB8E8;

  /* type */
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Outfit',sans-serif;
  --mono:'JetBrains Mono',monospace;
  --radius:6px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--navy);color:var(--text);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}

::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--navy)}
::-webkit-scrollbar-thumb{background:var(--rule-2);border-radius:3px}

/* Inline icons (Lucide). Size follows the container's font-size via 1em;
   stroke uses the brand gold. Replaces the old emoji icons site-wide. */
.icon{width:1em;height:1em;display:inline-block;vertical-align:-0.125em;color:var(--gold);flex-shrink:0}

/* ============================================================
   Canonical site chrome — shared header/nav and footer.
   Body font stays Outfit (--sans). One header style and one
   footer style across every page.
   ============================================================ */

/* Header / nav */
.site-header{border-bottom:1px solid var(--rule);padding:0 2.5rem;display:flex;align-items:center;justify-content:space-between;height:64px;position:sticky;top:0;background:rgba(13,27,42,0.96);backdrop-filter:blur(16px);z-index:100}
.logo-wrap{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo-img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid var(--rule-2)}
.logo-text{font-family:var(--serif);font-size:1.4rem;font-weight:600;color:var(--moon);letter-spacing:-0.01em;line-height:1}
.logo-text span{color:var(--gold)}
.logo-sub{font-size:9px;font-weight:400;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-3);margin-top:3px}
.header-nav{display:flex;gap:1.5rem;align-items:center}
.header-nav a{font-size:12px;color:var(--text-2);text-decoration:none;transition:color 0.15s}
.header-nav a:hover{color:var(--gold-lt)}
.header-nav a.active{color:var(--gold)}
.header-cta{background:var(--gold)!important;color:var(--navy)!important;font-weight:600!important;padding:8px 18px;border-radius:var(--radius);transition:background 0.15s!important}
.header-cta:hover{background:var(--gold-lt)!important;color:var(--navy)!important}
.nav-toggle{display:none}
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;cursor:pointer;flex-shrink:0}
.nav-burger span{display:block;height:2px;width:22px;background:var(--text-2);border-radius:2px;transition:transform 0.2s,opacity 0.2s}
.nav-toggle:checked~.nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle:checked~.nav-burger span:nth-child(2){opacity:0}
.nav-toggle:checked~.nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Footer */
footer{background:#080f18;border-top:1px solid rgba(201,146,42,0.1);padding:3rem 2.5rem 2rem}
.footer-inner{max-width:1060px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:3rem}
.footer-logo-text{font-family:var(--serif);font-size:1.5rem;font-weight:700;color:var(--moon)}
.footer-tagline{font-size:0.75rem;color:var(--text-3);letter-spacing:0.12em;text-transform:uppercase;margin-top:0.3rem;margin-bottom:1rem}
.footer-contact a{display:block;color:var(--gold);text-decoration:none;font-size:0.88rem;margin-bottom:0.25rem}
.footer-contact a:hover{color:var(--gold-lt)}
.footer-col h4{font-size:0.7rem;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:var(--text-3);margin-bottom:1rem}
.footer-col a{display:block;color:var(--text-2);text-decoration:none;font-size:0.88rem;margin-bottom:0.5rem;transition:color 0.2s}
.footer-col a:hover{color:var(--gold)}
.footer-loc{display:block;font-size:0.88rem;color:var(--text-2);margin-bottom:0.5rem}
.footer-bottom{max-width:1060px;margin:2.5rem auto 0;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,0.05);display:flex;justify-content:space-between;align-items:center;font-size:0.78rem;color:var(--text-3);flex-wrap:wrap;gap:0.5rem}
.footer-bottom a{color:var(--text-3);text-decoration:none}
.footer-bottom a:hover{color:var(--gold)}

@media(max-width:768px){
  .site-header{padding:0 1.25rem;position:relative}
  .nav-burger{display:flex}
  .header-nav{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:rgba(13,27,42,0.98);backdrop-filter:blur(16px);border-bottom:1px solid var(--rule);padding:0.5rem 1.25rem 1rem;z-index:99}
  .nav-toggle:checked~.header-nav{display:flex}
  .header-nav a{padding:0.8rem 0;border-top:1px solid var(--rule);font-size:14px}
  .header-cta{margin-top:0.6rem;text-align:center;padding:10px}
  .footer-inner{grid-template-columns:1fr 1fr;gap:2rem}
  .footer-bottom{flex-direction:column;text-align:center}
}