/* ════════════════════════════════════════════════════
   shared.css — 3x Readiness design system
   Tokens, reset, nav, footer, utilities
════════════════════════════════════════════════════ */

/* ── TOKENS ── */
:root{
  --moss:#2D4A35;--moss2:#1e3326;--comet:#6B7B6E;
  --faro:#C8C4B0;--ink:#1A1A1A;--dark:#212120;
  --dgrey:#2a2a28;--lgrey:#e8e5dd;--bite:#F5F2EA;--orange:#E8602C;
  --fd:'Fraunces',Georgia,serif;
  --fm:'DM Mono',monospace;
  --fb:'Instrument Sans',Helvetica,sans-serif;
  --ease-spring:cubic-bezier(.34,1.36,.64,1);
  --ease-out:cubic-bezier(.22,.68,0,1.2);
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html{scroll-behavior:smooth}
body{background:var(--bite);color:var(--ink);font-family:var(--fb);font-weight:300;overflow-x:hidden}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;background:none;font:inherit}
::selection{background:var(--moss);color:var(--bite)}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* ── SCROLL REVEALS ── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.on{opacity:1;transform:none}
.reveal-l{opacity:0;transform:translateX(-18px);transition:opacity .65s ease,transform .65s ease}
.reveal-l.on{opacity:1;transform:none}
.reveal-r{opacity:0;transform:translateX(18px);transition:opacity .65s ease,transform .65s ease}
.reveal-r.on{opacity:1;transform:none}
.d1{transition-delay:.05s}.d2{transition-delay:.13s}.d3{transition-delay:.21s}.d4{transition-delay:.29s}
.d5{transition-delay:.37s}.d6{transition-delay:.45s}

/* ════════════ NAV ════════════ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:600;
  height:60px;display:flex;align-items:center;justify-content:space-between;
  padding:0 40px;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .45s,border-color .45s;
}
nav.scrolled{
  background:rgba(26,26,26,.96);
  border-bottom-color:rgba(200,196,176,.07);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
nav.solid{
  background:rgba(26,26,26,.96);
  border-bottom-color:rgba(200,196,176,.07);
}
.logo{display:flex;align-items:baseline;gap:6px;flex-shrink:0}
.logo-3x{font-family:var(--fd);font-size:22px;font-weight:200;font-style:italic;color:var(--orange);line-height:1;letter-spacing:-.02em;transition:opacity .2s}
.logo:hover .logo-3x{opacity:.8}
.logo-sep{width:1px;height:12px;background:rgba(200,196,176,.18);align-self:center;margin:0 2px}
.logo-word{font-family:var(--fm);font-size:8.5px;font-weight:400;letter-spacing:.26em;text-transform:uppercase;color:rgba(200,196,176,.38)}
.nav-r{display:flex;align-items:center;gap:32px}
.nav-link{
  font-family:var(--fm);font-size:8.5px;font-weight:300;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(200,196,176,.38);transition:color .2s;position:relative;padding-bottom:2px;
}
.nav-link::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--orange);transition:width .25s ease}
.nav-link:hover{color:rgba(200,196,176,.9)}
.nav-link:hover::after,.nav-link.active::after{width:100%}
.nav-link.active{color:rgba(200,196,176,.9)}
.nav-cta{
  font-family:var(--fm);font-size:8.5px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bite);background:var(--orange);border:none;
  padding:9px 20px;white-space:nowrap;
  transition:background .2s,transform .15s;
}
.nav-cta:hover{background:#d4521c;transform:translateY(-1px)}
.nav-cta:active{transform:none}
/* Hamburger */
.nav-hbg{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:36px;height:36px;padding:6px;margin-right:-6px;transition:opacity .2s;
}
.nav-hbg:hover{opacity:.7}
.nav-hbg span{display:block;height:1px;background:var(--bite);transition:transform .3s ease,opacity .2s}
.nav-hbg.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-hbg.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-hbg.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* Mobile overlay */
.nav-overlay{
  position:fixed;inset:0;z-index:590;
  background:var(--dark);
  display:flex;flex-direction:column;justify-content:center;
  padding:80px 40px 60px;
  transform:translateX(100%);
  transition:transform .4s cubic-bezier(.7,0,.3,1);
}
.nav-overlay.open{transform:none}
.nav-overlay-links{display:flex;flex-direction:column;gap:4px;margin-bottom:48px}
.nav-overlay-link{
  font-family:var(--fd);font-size:clamp(32px,7vw,52px);font-weight:200;
  color:rgba(245,242,234,.55);line-height:1.1;letter-spacing:-.02em;
  transition:color .2s;padding:6px 0;border-bottom:1px solid rgba(200,196,176,.05);
}
.nav-overlay-link:last-child{border-bottom:none}
.nav-overlay-link:hover{color:var(--bite)}
.nav-overlay-cta{
  font-family:var(--fm);font-size:9px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  color:var(--moss);background:var(--bite);padding:14px 28px;width:fit-content;transition:background .2s;
}
.nav-overlay-cta:hover{background:var(--faro)}
.nav-overlay-meta{
  margin-top:40px;font-family:var(--fm);font-size:8px;font-weight:300;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(200,196,176,.22);display:flex;gap:20px;flex-wrap:wrap;
}

/* ════════════ FOOTER ════════════ */
.fw{background:var(--moss);padding:0 32px 32px}
.fi{background:var(--dark);padding:52px 56px 0;position:relative;overflow:hidden}
.fi::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(200,196,176,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(200,196,176,.015) 1px,transparent 1px);background-size:32px 32px;pointer-events:none}
.ft{display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:52px;margin-bottom:48px;position:relative;z-index:1}
.f-logo{display:flex;align-items:baseline;gap:5px}
.f-3x{font-family:var(--fd);font-size:18px;font-weight:200;font-style:italic;color:var(--orange)}
.f-word{font-family:var(--fm);font-size:7.5px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:rgba(245,242,234,.1)}
.f-col-lbl{font-family:var(--fm);font-size:7.5px;font-weight:300;letter-spacing:.22em;text-transform:uppercase;color:rgba(245,242,234,.12);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid rgba(245,242,234,.04)}
.f-links-col{display:flex;flex-direction:column;gap:8px}
.f-links-col a{font-family:var(--fb);font-size:13px;font-weight:300;color:rgba(245,242,234,.2);transition:color .2s;display:flex;align-items:center;gap:7px}
.f-links-col a::before{content:'↳';font-size:9px;color:var(--orange);opacity:.35}
.f-links-col a:hover{color:var(--faro)}
.f-wm-wrap{position:relative;z-index:1;overflow:hidden;border-top:1px solid rgba(245,242,234,.03);margin:0 -56px;padding:0 56px}
.f-wm{font-family:var(--fd);font-size:clamp(60px,11vw,168px);font-weight:200;font-style:italic;line-height:.87;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;display:block;color:rgba(45,74,53,.52)}
.f-mx{color:var(--orange);display:inline-block;transition:opacity .35s}
.f-bot{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-top:1px solid rgba(245,242,234,.04);position:relative;z-index:1}
.f-copy{font-family:var(--fm);font-size:7.5px;font-weight:300;letter-spacing:.1em;color:rgba(245,242,234,.1)}
.f-foot-links{display:flex;gap:20px;list-style:none}
.f-foot-links a{font-family:var(--fm);font-size:7.5px;font-weight:300;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,242,234,.12);transition:color .2s}
.f-foot-links a:hover{color:var(--faro)}

/* ════════════ COMMON COMPONENTS ════════════ */
.sec-ey{
  font-family:var(--fm);font-size:8.5px;font-weight:300;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(200,196,176,.24);margin-bottom:16px;display:flex;align-items:center;gap:10px;
}
.sec-ey::before{content:'';width:16px;height:1px;background:var(--orange);opacity:.6}
/* On light backgrounds */
.sec-ey.dark-bg{color:rgba(45,74,53,.38)}
.sec-ey.dark-bg::before{opacity:.5}
.btn-p{
  font-family:var(--fm);font-size:8.5px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  color:var(--moss);background:var(--bite);padding:13px 24px;white-space:nowrap;
  transition:background .2s,transform .15s;display:inline-block;
}
.btn-p:hover{background:var(--faro);transform:translateY(-1px)}
.btn-p:active{transform:none}
.btn-dark{
  font-family:var(--fm);font-size:8.5px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bite);background:var(--moss);padding:13px 24px;white-space:nowrap;
  transition:background .2s,transform .15s;display:inline-block;
}
.btn-dark:hover{background:var(--moss2);transform:translateY(-1px)}
.btn-orange{
  font-family:var(--fm);font-size:8.5px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  color:var(--moss);background:var(--bite);padding:13px 24px;white-space:nowrap;
  transition:background .2s,transform .15s;display:inline-block;
}
.btn-orange:hover{background:var(--faro);transform:translateY(-1px)}

/* Page-top offset */
.page-body{padding-top:60px}

/* ════════════ RESPONSIVE (NAV + FOOTER) ════════════ */
@media(max-width:768px){
  nav{padding:0 24px}
  .nav-r .nav-link{display:none}
  .nav-r .nav-cta{display:none}
  .nav-hbg{display:flex}
  .fw{padding:0 16px 16px}
  .fi{padding:40px 24px 0}
  .ft{grid-template-columns:1fr;gap:32px}
  .f-wm-wrap{margin:0 -24px;padding:0 24px}
}
@media(max-width:1024px){
  .ft{grid-template-columns:1fr 1fr;gap:36px}
}