/* ════════════════════════════════════════════════════════
   ANTHROPRIME — SHARED SITE SYSTEM
   Unified header, footer, page transitions, scroll-reveal.
   Loaded on every page so the chrome never changes.
════════════════════════════════════════════════════════ */

:root{
  --gh-bg: rgba(245,244,241,0.86);
  --gh-bg-scrolled: rgba(245,244,241,0.96);
  --gh-border: rgba(80,75,65,0.12);
  --gh-text: #2a2720;
  --gh-muted: #7a756a;
  --gh-navy: #1a2744;
  --gh-navy-mid: #2e4080;
  --gh-cream: #f5f4f1;
  --gh-serif: 'Cormorant Garamond', Georgia, serif;
  --gh-sans: 'DM Sans', system-ui, sans-serif;
  --gh-ease: cubic-bezier(.65,0,.35,1);
}

/* ── progress bar (top hairline reading indicator) ── */
#site-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg,var(--gh-navy-mid),#7e8fc7);
  z-index:1100; transition:width .08s linear;
  pointer-events:none;
}

/* ── HEADER (identical markup + styling on every page) ── */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:var(--gh-bg);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--gh-border);
  transition:background .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.site-header.is-scrolled{
  background:var(--gh-bg-scrolled);
  box-shadow:0 10px 34px -16px rgba(26,39,68,0.22);
}
.site-nav{
  max-width:1480px; margin:0 auto;
  padding:0 3.5rem; height:72px;
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--gh-sans);
}
.site-logo{
  font-family:var(--gh-serif); font-weight:400; font-size:1.32rem;
  letter-spacing:.04em; color:var(--gh-text); text-decoration:none;
  display:inline-flex; align-items:baseline; gap:.15rem;
  transition:opacity .2s ease;
}
.site-logo:hover{opacity:.75}
.site-logo em{font-style:italic; color:var(--gh-navy-mid)}
.site-links{
  display:flex; gap:2.3rem; list-style:none; align-items:center;
  margin:0; padding:0;
}
.site-links a{
  color:var(--gh-muted); text-decoration:none; font-size:.8rem;
  font-weight:500; letter-spacing:.07em; text-transform:uppercase;
  position:relative; padding:.4rem 0; transition:color .2s ease;
  white-space:nowrap;
}
.site-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--gh-navy-mid); transition:width .28s var(--gh-ease);
}
.site-links a:hover, .site-links a.is-active{color:var(--gh-text)}
.site-links a:hover::after, .site-links a.is-active::after{width:100%}
.site-right{display:flex; align-items:center; gap:1.6rem}
.site-cta{
  background:var(--gh-navy); color:var(--gh-cream);
  padding:.62rem 1.5rem; border-radius:3px;
  font-size:.78rem; font-weight:500; letter-spacing:.07em; text-transform:uppercase;
  text-decoration:none; display:inline-block;
  transition:transform .25s var(--gh-ease), box-shadow .25s var(--gh-ease), opacity .2s;
}
.site-cta:hover{transform:translateY(-2px); box-shadow:0 14px 28px -12px rgba(26,39,68,.45); opacity:.95}
.site-cta-mobile{display:none}

.site-burger{
  display:none; flex-direction:column; gap:5px; width:24px; cursor:pointer;
  background:none; border:none; padding:.5rem; margin:-0.5rem;
}
.site-burger span{
  display:block; height:1.5px; width:100%; background:var(--gh-text);
  transition:transform .3s var(--gh-ease), opacity .3s var(--gh-ease);
}
.site-burger.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.site-burger.is-open span:nth-child(2){opacity:0}
.site-burger.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media (max-width:900px){
  .site-nav{padding:0 1.5rem; height:64px}
  .site-links{
    position:fixed; inset:64px 0 0 0; height:calc(100vh - 64px);
    background:var(--gh-cream); flex-direction:column; justify-content:flex-start;
    align-items:flex-start; gap:0; padding:1rem 1.75rem;
    transform:translateX(100%); transition:transform .4s var(--gh-ease);
    overflow-y:auto;
  }
  .site-links.is-open{transform:translateX(0)}
  .site-links a{width:100%; padding:1.1rem 0; border-bottom:1px solid var(--gh-border); font-size:.95rem}
  .site-links a::after{display:none}
  .site-right{gap:0}
  .site-right .site-cta{display:none}
  .site-links a.site-cta-mobile{
    margin-top:1rem; text-align:center; background:var(--gh-navy); color:var(--gh-cream);
    border-bottom:none; border-radius:3px; display:block;
  }
  .site-burger{display:flex}
}

/* ── FOOTER (identical on every page) ── */
.site-footer{
  padding:2.6rem 3.5rem; background:var(--gh-navy);
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:1.25rem; font-family:var(--gh-sans);
}
.site-footer-brand{
  font-family:var(--gh-serif); font-weight:400; font-size:1.05rem;
  color:rgba(212,218,240,0.55); letter-spacing:.04em;
}
.site-footer-brand em{font-style:italic; color:rgba(212,218,240,0.8)}
.site-footer-copy{font-size:.74rem; color:rgba(212,218,240,0.28); margin-top:.25rem}
.site-footer-links{display:flex; gap:2rem; flex-wrap:wrap}
.site-footer-links a{
  font-size:.74rem; color:rgba(212,218,240,0.4); text-decoration:none;
  letter-spacing:.06em; text-transform:uppercase; transition:color .2s;
}
.site-footer-links a:hover{color:rgba(212,218,240,0.85)}
@media (max-width:760px){
  .site-footer{padding:2rem 1.5rem; flex-direction:column; align-items:flex-start}
}

/* ── PAGE TRANSITION OVERLAY ── */
#page-transition{
  position:fixed; inset:0; z-index:9998;
  background:var(--gh-navy);
  transform:scaleY(0); transform-origin:bottom;
  pointer-events:none; will-change:transform;
}
#page-transition::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(212,218,240,0.08), transparent 60%);
}
body.is-leaving #page-transition{
  transform-origin:bottom;
  animation:gh-cover .5s var(--gh-ease) forwards;
}
body.is-entering #page-transition{
  transform:scaleY(1); transform-origin:top;
  animation:gh-reveal .6s .05s var(--gh-ease) forwards;
}
@keyframes gh-cover{ from{transform:scaleY(0)} to{transform:scaleY(1)} }
@keyframes gh-reveal{ from{transform:scaleY(1)} to{transform:scaleY(0)} }
body.is-leaving{cursor:progress}

/* fade the outgoing page content slightly as the wipe begins */
body.is-leaving > *:not(#page-transition){
  transition:opacity .35s ease;
  opacity:.35;
}

/* ── SCROLL REVEAL ── */
[data-reveal]{
  opacity:0; transform:translateY(28px);
  transition:opacity .8s var(--gh-ease), transform .8s var(--gh-ease);
  will-change:opacity, transform;
}
[data-reveal].in-view{opacity:1; transform:translateY(0)}
[data-reveal="fade"]{transform:none}
[data-reveal="fade"].in-view{transform:none}
[data-reveal-group] > *{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--gh-ease), transform .7s var(--gh-ease);
}
[data-reveal-group].in-view > *{opacity:1; transform:translateY(0)}
[data-reveal-group].in-view > *:nth-child(1){transition-delay:.03s}
[data-reveal-group].in-view > *:nth-child(2){transition-delay:.09s}
[data-reveal-group].in-view > *:nth-child(3){transition-delay:.15s}
[data-reveal-group].in-view > *:nth-child(4){transition-delay:.21s}
[data-reveal-group].in-view > *:nth-child(5){transition-delay:.27s}
[data-reveal-group].in-view > *:nth-child(6){transition-delay:.33s}

@media (prefers-reduced-motion: reduce){
  [data-reveal], [data-reveal-group] > *{opacity:1 !important; transform:none !important; transition:none !important}
  #page-transition{display:none !important}
  body.is-leaving > *:not(#page-transition){opacity:1 !important}
}

/* subtle smooth hover-lift utility reused by cards across pages */
.gh-lift{transition:transform .35s var(--gh-ease), box-shadow .35s var(--gh-ease)}
.gh-lift:hover{transform:translateY(-4px)}