/* ================================================================
   FlipTheDrift — Shared Stylesheet
   Design system: Newsreader / IBM Plex Sans / IBM Plex Mono
   Palette: Onyx #161412 · Gold #b8893a · Parchment #f5f1e8 · Ivory #faf7ef
   ================================================================ */

/* ── TOKENS ──────────────────────────────────────────────────────── */
:root {
  --onyx:      #161412;
  --onyx-80:   #2e2b28;
  --onyx-60:   #46423e;
  --gold:      #b8893a;
  --gold-lt:   #d4a85c;
  --parchment: #f5f1e8;
  --ivory:     #faf7ef;
  --mist:      #e4dfd4;

  --serif: 'Newsreader', Georgia, serif;
  --sans:  'IBM Plex Sans', system-ui, sans-serif;
  --mono:  'IBM Plex Mono', monospace;

  --nav-h:    68px;
  --radius:   3px;
  --ease:     cubic-bezier(0.4,0,0.2,1);
  --t:        0.28s var(--ease);
  --max-w:    1160px;
  --gutter:   5vw;
}

/* ── RESET ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{
  background:var(--ivory);
  color:var(--onyx);
  font-family:var(--sans);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit;border:none;background:none}
ul,ol{list-style:none}

/* ── TYPOGRAPHY UTILITIES ────────────────────────────────────────── */
.eyebrow{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  display:block;
}
.hairline{
  display:block;
  width:40px;height:1px;
  background:var(--gold);
  margin-top:4px;
}
.serif{font-family:var(--serif)}

/* ── BUTTONS ─────────────────────────────────────────────────────── */
.btn-primary{
  display:inline-block;
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  background:var(--gold);
  color:var(--onyx);
  padding:13px 28px;
  border-radius:var(--radius);
  transition:background var(--t),transform var(--t);
  white-space:nowrap;
}
.btn-primary:hover{background:var(--gold-lt);transform:translateY(-1px)}

.btn-ghost{
  display:inline-block;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  border:1px solid rgba(22,20,18,.22);
  color:var(--onyx);
  padding:12px 28px;
  border-radius:var(--radius);
  transition:border-color var(--t),color var(--t);
  white-space:nowrap;
}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

.btn-ghost-light{
  display:inline-block;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  border:1px solid rgba(184,137,58,.4);
  color:var(--parchment);
  padding:12px 28px;
  border-radius:var(--radius);
  transition:border-color var(--t),color var(--t);
  white-space:nowrap;
}
.btn-ghost-light:hover{border-color:var(--gold);color:var(--gold)}

/* ── SECTION BASE ────────────────────────────────────────────────── */
.section{padding:96px var(--gutter)}
.section--dark{background:var(--onyx)}
.section--parchment{background:var(--parchment)}
.section--ivory{background:var(--ivory)}

.section-inner{max-width:var(--max-w);margin:0 auto;width:100%}

.section-header{
  display:flex;flex-direction:column;gap:14px;
  margin-bottom:60px;
}
.section-header h2{
  font-family:var(--serif);
  font-size:clamp(1.9rem,3.2vw,2.7rem);
  font-weight:300;
  line-height:1.18;
}
.section-header h2 em{font-style:italic;color:var(--gold)}
.section-header.centered{align-items:center;text-align:center}
.section-header p{
  max-width:520px;
  color:rgba(22,20,18,.62);
  font-size:1rem;
  line-height:1.72;
}
.section-header.centered p{text-align:center}

/* ── FADE-UP ANIMATION ───────────────────────────────────────────── */
.fade-up{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s ease,transform .6s ease;
}
.fade-up.visible{opacity:1;transform:none}

/* ================================================================
   NAV
   ================================================================ */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:var(--nav-h);
  background:var(--onyx);
  border-bottom:1px solid rgba(184,137,58,.15);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--gutter);
  transition:box-shadow var(--t);
}
#nav.scrolled{box-shadow:0 4px 32px rgba(0,0,0,.38)}

/* Wordmark — no image */
.nav-wordmark{
  font-family:var(--serif);
  font-size:1.44rem;
  font-weight:300;
  color:#ffffff;
  letter-spacing:.01em;
  flex-shrink:0;
}
.nav-wordmark em{font-style:italic;color:var(--gold)}

/* Desktop links */
.nav-links{
  display:flex;align-items:center;gap:28px;
  position:relative;
}
.nav-links > li > a{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(245,241,232,.58);
  transition:color var(--t);
  display:flex;align-items:center;gap:4px;
}
.nav-links > li > a:hover,
.nav-links > li > a.active{color:var(--parchment)}

/* Dropdown */
.nav-links .has-dropdown{position:relative}
.nav-links .dropdown{
  position:absolute;top:calc(100% + 16px);left:0;
  background:var(--onyx-80);
  border:1px solid rgba(184,137,58,.18);
  border-radius:4px;
  min-width:220px;
  padding:8px 0;
  opacity:0;pointer-events:none;
  transform:translateY(6px);
  transition:opacity var(--t),transform var(--t);
  z-index:10;
}
.nav-links .has-dropdown:hover .dropdown,
.nav-links .has-dropdown.open .dropdown{opacity:1;pointer-events:all;transform:none}
.nav-links .dropdown li a{
  display:block;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(245,241,232,.58);
  padding:10px 20px;
  transition:color var(--t),background var(--t);
}
.nav-links .dropdown li a:hover{color:var(--parchment);background:rgba(184,137,58,.08)}
.nav-links .dropdown li a small{
  display:block;
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:0;
  text-transform:none;
  color:rgba(245,241,232,.35);
  margin-top:2px;
}

/* Nav CTA */
.nav-cta{
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  background:var(--gold);
  color:var(--onyx);
  padding:9px 20px;
  border-radius:var(--radius);
  transition:background var(--t);
  white-space:nowrap;
}
.nav-cta:hover{background:var(--gold-lt)}

/* Hamburger */
.nav-hamburger{
  display:none;
  flex-direction:column;gap:5px;width:26px;cursor:pointer;
}
.nav-hamburger span{
  display:block;height:1.5px;background:var(--parchment);
  border-radius:2px;transition:var(--t);
}

/* Mobile nav drawer */
.nav-mobile{
  display:none;
  position:fixed;top:var(--nav-h);left:0;right:0;
  background:var(--onyx);
  border-bottom:1px solid rgba(184,137,58,.18);
  padding:24px var(--gutter);
  z-index:190;
  flex-direction:column;gap:4px;
}
.nav-mobile.open{display:flex}
.nav-mobile a,.nav-mobile button{
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(245,241,232,.65);
  padding:12px 0;
  border-bottom:1px solid rgba(245,241,232,.06);
  transition:color var(--t);
  background:none;border-radius:0;text-align:left;
}
.nav-mobile a:hover,.nav-mobile button:hover{color:var(--parchment)}
.nav-mobile .mobile-cta{
  margin-top:12px;
  background:var(--gold);color:var(--onyx);
  padding:12px;text-align:center;border-radius:var(--radius);
  border-bottom:none;font-weight:500;
}
.nav-mobile .mobile-cta:hover{background:var(--gold-lt)}

/* ================================================================
   FOOTER
   ================================================================ */
#footer{
  background:var(--onyx);
  border-top:1px solid rgba(184,137,58,.12);
  padding:64px var(--gutter) 40px;
}
.footer-inner{max-width:var(--max-w);margin:0 auto}
.footer-top{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:48px;
  margin-bottom:52px;
}
.footer-brand .nav-wordmark{display:inline-block;margin-bottom:16px}
.footer-brand p{
  font-size:.86rem;
  color:rgba(245,241,232,.38);
  line-height:1.65;
  max-width:240px;
}
.footer-col h4{
  font-family:var(--mono);
  font-size:.65rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:18px;
  opacity:.8;
}
.footer-col ul{display:flex;flex-direction:column;gap:10px}
.footer-col ul a{
  font-size:.86rem;
  color:rgba(245,241,232,.4);
  transition:color var(--t);
}
.footer-col ul a:hover{color:var(--parchment)}
.footer-bottom{
  border-top:1px solid rgba(245,241,232,.07);
  padding-top:24px;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:10px;
}
.footer-legal{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.08em;
  color:rgba(245,241,232,.22);
}

/* ================================================================
   PAGE HERO (shared base — extended per page)
   ================================================================ */
.page-hero{
  min-height:50vh;
  background:var(--onyx);
  display:flex;align-items:center;
  padding:calc(var(--nav-h) + 72px) var(--gutter) 80px;
}
.page-hero-inner{max-width:var(--max-w);margin:0 auto;width:100%}
.page-hero h1{
  font-family:var(--serif);
  font-size:clamp(2.4rem,4.5vw,3.6rem);
  font-weight:300;
  line-height:1.15;
  color:var(--parchment);
  margin-top:18px;
  margin-bottom:22px;
}
.page-hero h1 em{font-style:italic;color:var(--gold)}
.page-hero p.lead{
  font-size:1.06rem;
  color:rgba(245,241,232,.65);
  max-width:540px;
  line-height:1.72;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media(max-width:1024px){
  .footer-top{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .nav-links,.nav-cta{display:none}
  .nav-hamburger{display:flex}
  .section{padding:64px var(--gutter)}
  .footer-top{grid-template-columns:1fr}
}
@media(max-width:480px){
  .section{padding:52px var(--gutter)}
  .page-hero{padding-top:calc(var(--nav-h) + 48px)}
}