/* ============================================================
   ELISABETH BYKOFF - Personal Brand Site
   Shared stylesheet · "Bold Founder" navy + red editorial
   ============================================================ */

:root{
  --navy:        #101d33;
  --navy-deep:   #0b1525;
  --navy-surface:#172842;
  --navy-raise:  #1d3052;
  --line:        rgba(239,231,216,.13);
  --line-strong: rgba(239,231,216,.26);
  --cream:       #f3efe9;
  --cream-soft:  #e4ddd0;
  --muted:       #94a3b8;
  --muted-dim:   #6c7c92;
  --red:         #e0382f;
  --red-hover:   #f24a40;
  --gold:        #c5a86d;
  --green:       #4ad07d;
  --maxw:        1280px;
  --pad:         clamp(22px, 5vw, 64px);
  --serif:       'Instrument Serif', Georgia, serif;
  --display:     'Space Grotesk', sans-serif;
  --body:        'Hanken Grotesk', sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body{
  margin:0; background:var(--navy); color:var(--cream);
  font-family:var(--body); font-size:18px; line-height:1.65;
  font-weight:300; overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--red); color:#fff; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

/* ---------- type ---------- */
h1,h2,h3,h4{ font-family:var(--display); font-weight:600; line-height:1.02; letter-spacing:-.02em; margin:0; }
.serif-it{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:0; color:var(--red); }
.eyebrow{
  font-family:var(--display); font-size:13px; font-weight:600; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold); display:flex; align-items:center; gap:14px;
}
.eyebrow::before{ content:''; width:34px; height:1px; background:var(--gold); display:inline-block; }
.eyebrow.center{ justify-content:center; }
.eyebrow.center::after{ content:''; width:34px; height:1px; background:var(--gold); display:inline-block; }
.lede{ font-size:clamp(19px,2.1vw,22px); line-height:1.62; color:var(--cream-soft); font-weight:300; }
.muted{ color:var(--muted); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--display);
  font-weight:600; font-size:16px; letter-spacing:.005em; padding:16px 30px; border-radius:10px;
  cursor:pointer; border:1px solid transparent; transition:.22s ease; white-space:nowrap;
}
.btn .arr{ transition:transform .22s ease; }
.btn:hover .arr{ transform:translateX(4px); }
.btn-red{ background:var(--red); color:#fff; }
.btn-red:hover{ background:var(--red-hover); box-shadow:0 12px 34px -10px rgba(224,56,47,.6); }
.btn-ghost{ border-color:var(--line-strong); color:var(--cream); background:transparent; }
.btn-ghost:hover{ border-color:var(--cream); background:rgba(243,239,233,.05); }
.btn-cream{ background:var(--cream); color:var(--navy); }
.btn-cream:hover{ background:#fff; }
.btn-sm{ padding:12px 22px; font-size:14px; }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100; height:78px;
  display:flex; align-items:center; transition:background .3s ease, border-color .3s ease, backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{ background:rgba(11,21,37,.82); backdrop-filter:blur(14px); border-bottom-color:var(--line); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.brand{ font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:-.01em; display:flex; align-items:center; gap:11px; }
.brand .sq{ width:13px; height:13px; background:var(--red); border-radius:3px; flex:none; }
.nav-links{ display:flex; gap:30px; align-items:center; }
.nav-links a{ font-family:var(--display); font-size:15px; font-weight:500; color:var(--muted); transition:color .18s; position:relative; }
.nav-links a:hover{ color:var(--cream); }
.nav-links a.active{ color:var(--cream); }
.nav-links a.active::after{ content:''; position:absolute; left:0; right:0; bottom:-7px; height:2px; background:var(--red); border-radius:2px; }
.nav-right{ display:flex; align-items:center; gap:22px; }
.nav-toggle{ display:none; background:none; border:0; color:var(--cream); cursor:pointer; padding:8px; }
.nav-toggle svg{ width:26px; height:26px; }

/* mobile menu */
.mobile-menu{
  position:fixed; inset:0; z-index:99; background:var(--navy-deep); padding:96px var(--pad) 40px;
  display:flex; flex-direction:column; gap:6px; transform:translateY(-100%); opacity:0;
  transition:transform .4s cubic-bezier(.4,0,.1,1), opacity .3s; pointer-events:none;
}
.mobile-menu.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
.mobile-menu a{ font-family:var(--display); font-size:32px; font-weight:600; padding:14px 0; border-bottom:1px solid var(--line); }
.mobile-menu a .serif-it{ color:var(--red); }

/* ---------- sections ---------- */
section{ position:relative; }
.sec{ padding-block:clamp(64px,9vw,118px); }
.sec-deep{ background:var(--navy-deep); }
.sec-surface{ background:var(--navy-surface); }
.divider{ height:1px; background:var(--line); }

/* ---------- footer ---------- */
.footer{ background:var(--navy-deep); border-top:1px solid var(--line); padding-top:clamp(60px,8vw,96px); }
.footer-cta{ display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center; padding-bottom:64px; border-bottom:1px solid var(--line); }
.footer-cta h2{ font-size:clamp(34px,4.4vw,60px); }
.footer-cta-action{ grid-template-columns:minmax(0,1fr) auto; align-items:end; }
.footer-cta-action h2{ font-size:clamp(34px,4vw,52px); white-space:nowrap; }
.footer-cta-action p{ max-width:430px; }
.footer-cta-action .btn{ justify-self:end; margin-bottom:6px; }
.substack-wrap{
  width:100%; max-width:480px; overflow:hidden;
  background:var(--navy-surface);
  border:1px solid var(--line-strong);
  border-radius:16px;
  padding:10px 0 6px;
  box-shadow:0 32px 80px -20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07);
}
.substack-wrap iframe{ display:block; width:100% !important; border:0; background:transparent; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:24px; padding-block:34px; flex-wrap:wrap; }
.footer-nav{ display:flex; gap:26px; flex-wrap:wrap; }
.footer-nav a{ font-family:var(--display); font-size:14px; color:var(--muted); }
.footer-nav a:hover{ color:var(--cream); }
.socials{ display:flex; gap:12px; }
.socials a{
  width:40px; height:40px; border:1px solid var(--line-strong); border-radius:9px;
  display:grid; place-items:center; color:var(--muted); transition:.2s;
}
.socials a:hover{ color:var(--cream); border-color:var(--cream); transform:translateY(-2px); }
.socials svg{ width:18px; height:18px; }
.copyright{ font-size:13.5px; color:var(--muted-dim); }

/* ---------- reusable cards / bits ---------- */
.tag{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--display); font-size:13px;
  font-weight:500; letter-spacing:.02em; color:var(--cream-soft); border:1px solid var(--line-strong);
  padding:9px 16px; border-radius:100px; width:fit-content;
}
.pulse{ width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(74,208,125,.6); animation:pulse 2.4s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(74,208,125,.5)} 70%{box-shadow:0 0 0 9px rgba(74,208,125,0)} 100%{box-shadow:0 0 0 0 rgba(74,208,125,0)} }

.card{ background:var(--navy-surface); border:1px solid var(--line); border-radius:16px; padding:34px; transition:.25s ease; }
.card:hover{ border-color:var(--line-strong); transform:translateY(-3px); }

/* page hero (inner pages) */
.phero{ padding-top:150px; padding-bottom:clamp(40px,6vw,72px); }
.phero .eyebrow{ margin-bottom:22px; }
.phero h1{ font-size:clamp(46px,7vw,96px); }
.phero .lede{ margin-top:26px; max-width:680px; }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* image frame */
.imgframe{ position:relative; border-radius:16px; overflow:hidden; }
.imgframe::after{ content:''; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); border-radius:16px; pointer-events:none; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; }
  .footer-cta{ grid-template-columns:1fr; gap:34px; }
  .footer-cta-action h2{ white-space:normal; }
  .footer-cta-action .btn{ justify-self:start; margin-bottom:0; }
}
@media (max-width:680px){
  body{ font-size:17px; }
}