/* EricPoston.com layout, header, and responsive hardening -- 2026-05-19 */
:root{
  --ep-accent:#f20b78;
  --ep-accent-2:#ff4aa0;
  --ep-ink:#070b19;
  --ep-text:#1b2130;
  --ep-muted:#606a7a;
  --ep-line:#e7eaf0;
  --ep-soft:#f7f8fb;
  --ep-pink-soft:#fff1f8;
  --ep-max:1220px;
}
html,body{max-width:100%;overflow-x:hidden;}
body{min-width:0;}
a[href]:not([href^="mailto:"]):not([href^="tel:"]){overflow-wrap:anywhere;}

/* Site-wide logo integrity */
.brand-mark,
.brand .brand-mark{
  flex:0 0 auto!important;
  width:54px!important;
  height:44px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.brand-mark img,
.brand .brand-mark img,
.mark,
.logo-card img{
  object-fit:contain!important;
  object-position:center!important;
}
.brand-mark img,.brand .brand-mark img{width:100%!important;height:100%!important;display:block!important;}

/* Homepage header */
.site-header{
  position:sticky!important;
  top:0!important;
  z-index:50!important;
  background:rgba(255,255,255,.94)!important;
  backdrop-filter:saturate(1.15) blur(14px)!important;
  border-bottom:1px solid rgba(7,11,25,.08)!important;
}
.header-inner{
  width:min(calc(100% - 32px),var(--ep-max))!important;
  min-height:78px!important;
  padding:10px 0!important;
  margin:0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  flex-wrap:nowrap!important;
}
.brand{min-width:0!important;flex:0 0 auto!important;}
.brand-name,.brand > span:last-child{font-weight:850!important;color:#0d1224!important;letter-spacing:-.03em!important;}
.main-nav{
  min-width:0!important;
  flex:1 1 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  flex-wrap:wrap!important;
  font-size:13.5px!important;
  line-height:1!important;
}
.main-nav a,.topnav a{
  text-decoration:none!important;
  border-radius:999px!important;
  white-space:nowrap!important;
  min-height:36px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:8px 10px!important;
}
.main-nav a:hover,.topnav a:hover,
.main-nav a[aria-current="page"],.topnav a[aria-current="page"]{
  background:var(--ep-pink-soft)!important;
  color:var(--ep-accent)!important;
}
.header-cta{
  flex:0 0 auto!important;
  min-width:max-content!important;
  min-height:42px!important;
  padding:0 17px!important;
  border-radius:999px!important;
}

/* Homepage hero redesign: fixes the oversized blank portrait/logo cards in the screenshot. */
.hero{
  overflow:clip!important;
  background:
    radial-gradient(circle at 88% 0%,rgba(242,11,120,.12),transparent 32%),
    radial-gradient(circle at 12% 96%,rgba(242,11,120,.055),transparent 30%),
    linear-gradient(116deg,#fff 0%,#fbfcff 49%,#fff4fa 100%)!important;
}
.hero-inner{
  width:min(calc(100% - 40px),var(--ep-max))!important;
  padding:66px 0 60px!important;
  grid-template-columns:minmax(0,1.02fr) minmax(360px,.78fr)!important;
  gap:48px!important;
  align-items:center!important;
}
.hero-copy{min-width:0!important;max-width:690px!important;}
.hero h1,h1{
  overflow-wrap:normal!important;
  text-wrap:balance!important;
}
.hero .summary{max-width:650px!important;}
.hero-media{
  position:relative!important;
  min-width:0!important;
  width:min(100%,460px)!important;
  max-width:460px!important;
  justify-self:end!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:0!important;
  align-items:center!important;
}
.media-card{
  min-height:0!important;
  margin:0!important;
  border-radius:32px!important;
}
.portrait-card{
  aspect-ratio:4/5!important;
  min-height:0!important;
  display:block!important;
  background:linear-gradient(180deg,#f7f9fe 0%,#edf2fb 100%)!important;
  box-shadow:0 28px 78px rgba(15,23,42,.13)!important;
}
.portrait-card img{
  width:100%!important;
  height:100%!important;
  padding:0!important;
  object-fit:cover!important;
  object-position:center top!important;
}
.logo-card{
  position:absolute!important;
  right:-26px!important;
  bottom:-26px!important;
  width:190px!important;
  height:190px!important;
  min-height:0!important;
  aspect-ratio:1/1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:32px!important;
  background:radial-gradient(circle at 50% 58%,rgba(242,11,120,.16),rgba(255,255,255,0) 55%),rgba(255,255,255,.92)!important;
  box-shadow:0 24px 60px rgba(242,11,120,.18),0 18px 48px rgba(15,23,42,.12)!important;
  z-index:3!important;
}
.logo-card img{width:100%!important;height:100%!important;padding:18px!important;filter:drop-shadow(0 18px 20px rgba(242,11,120,.16))!important;}
.feature-wrap{width:min(calc(100% - 40px),var(--ep-max))!important;}
.content,.footer-inner{width:min(calc(100% - 40px),var(--ep-max))!important;}

/* Shared subpage header and layout polish */
.page{width:min(calc(100% - 36px),1120px)!important;padding-top:22px!important;}
.topbar{
  margin-bottom:22px!important;
  padding:12px 0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  flex-wrap:wrap!important;
}
.topbar .brand{min-width:max-content!important;}
.topnav{
  flex:1 1 620px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:5px!important;
  flex-wrap:wrap!important;
  font-size:13.5px!important;
}
.card{max-width:100%!important;}
.card .hero{
  grid-template-columns:minmax(120px,172px) minmax(0,1fr)!important;
  gap:30px!important;
  align-items:center!important;
  padding:40px clamp(26px,4vw,44px) 34px!important;
}
.mark-wrap{width:170px!important;height:142px!important;max-width:100%!important;}
.link-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
.link-grid a,.official-link-grid a{overflow:hidden!important;}
.link-title,.link-desc,.link-url{overflow-wrap:anywhere!important;}

@media (max-width:1280px){
  .header-inner{align-items:flex-start!important;flex-wrap:wrap!important;}
  .brand{order:1!important;}
  .header-cta{order:2!important;}
  .main-nav{order:3!important;flex-basis:100%!important;justify-content:flex-start!important;padding:2px 0 4px!important;}
}
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr!important;gap:34px!important;padding:54px 0 52px!important;}
  .hero-copy{max-width:780px!important;}
  .hero-media{justify-self:start!important;width:min(100%,520px)!important;max-width:520px!important;}
  .feature-wrap{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .card .hero{grid-template-columns:1fr!important;text-align:left!important;}
  .mark-wrap{width:100%!important;height:auto!important;aspect-ratio:16/8!important;max-height:210px!important;}
  .topnav{justify-content:flex-start!important;flex-basis:100%!important;}
}
@media (max-width:760px){
  .header-inner,.hero-inner,.feature-wrap,.content,.footer-inner{width:min(calc(100% - 28px),var(--ep-max))!important;}
  .header-inner{min-height:auto!important;gap:10px!important;}
  .brand-name{font-size:16px!important;}
  .header-cta{display:none!important;}
  .main-nav,.topnav{
    width:100%!important;
    flex-basis:100%!important;
    justify-content:flex-start!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    gap:7px!important;
    padding:4px 0 7px!important;
    scrollbar-width:none!important;
    scroll-snap-type:x proximity!important;
  }
  .main-nav::-webkit-scrollbar,.topnav::-webkit-scrollbar{display:none!important;}
  .main-nav a,.topnav a{
    flex:0 0 auto!important;
    scroll-snap-align:start!important;
    background:#fff!important;
    border:1px solid var(--ep-line)!important;
    min-height:38px!important;
    padding:8px 12px!important;
    font-size:13.5px!important;
  }
  .hero-inner{padding:42px 0 42px!important;}
  .hero-media{width:min(100%,420px)!important;}
  .portrait-card{aspect-ratio:1/1.08!important;border-radius:26px!important;}
  .logo-card{right:12px!important;bottom:12px!important;width:112px!important;height:112px!important;border-radius:24px!important;}
  .logo-card img{padding:12px!important;}
  .feature-wrap{grid-template-columns:1fr!important;margin-top:24px!important;}
  .link-grid{grid-template-columns:1fr!important;}
  .page{width:min(calc(100% - 24px),1120px)!important;padding-top:14px!important;}
  .card .hero{padding:30px 20px 24px!important;}
  .section{padding-left:20px!important;padding-right:20px!important;}
}
@media (max-width:480px){
  .brand-name,.brand > span:last-child{display:none!important;}
  .brand-mark,.brand .brand-mark{width:48px!important;height:40px!important;}
  .hero h1,h1{font-size:clamp(2.75rem,17vw,3.7rem)!important;line-height:.94!important;}
  .subhead{font-size:13.5px!important;letter-spacing:.06em!important;}
  .summary{font-size:16px!important;}
  .logo-card{width:96px!important;height:96px!important;}
}