/* =========================================================
   LSN — INVARIANTS CSS
   CLEAN VERSION - No !important, proper specificity
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  /* surfaces */
  --bg-dark:#0f1115;
  --bg-light:#eceeef;

  /* active surface (default: dark) */
  --bg-surface:var(--bg-dark);

  /* text */
  --fg:#d6d9df;
  --muted:#8a8f99;

  /* accents */
  --accent:#c88a34;
  --divider:rgba(255,255,255,0.08);

  /* motion */
  --ease-ui:cubic-bezier(0.22,0.61,0.36,1);
  --ease-entry:cubic-bezier(0.14,0.86,0.38,1);
}

/* ---------- Theme Switch (VARIABLE ONLY) ---------- */
html.theme-light{
  --bg-surface:var(--bg-light);
}

/* ---------- Reset & Font (HARD) ---------- */
*{
  box-sizing:border-box;
  font-family:'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

html,
body{
  height:100%;
  margin:0;
  padding:0;
}

/* Root owns paint (never animate this) */
html{
  background:var(--bg-surface);
}

/* Body is non-authoritative */
body{
  color:var(--fg);
  background:
    radial-gradient(
      1400px 900px at 50% 42%,
      rgba(255,255,255,0.035),
      transparent 60%
    ),
    var(--bg-surface);
  cursor:default;
}

a{
  color:inherit;
  text-decoration:none;
}

/* ---------- Page Frame (ANIMATION TARGET) ---------- */
.page{
  min-height:100%;
  max-width:1400px;
  margin:0 auto;
  padding:26px 30px;

  display:grid;
  grid-template-rows:auto 1fr auto;

  /* surface ownership */
  background:var(--bg-surface);

  /* exit transition only */
  transition:
    opacity 1300ms var(--ease-ui),
    transform 1300ms var(--ease-ui);
}

/* ---------- Entry / Exit (MANIFOLD SAFE) ---------- */
/* Initial latent state exists BEFORE FIRST PAINT */
html.pre-enter .page{
  opacity:0;
  transform:translateY(-16px) scale(0.985);
}

/* Delayed slow emergence (delay lives in CSS) */
html.entering .page{
  transition:
    opacity 1800ms var(--ease-entry) 280ms,
    transform 1800ms var(--ease-entry) 280ms;
  opacity:1;
  transform:none;
}

/* Exit (unchanged) */
.page.exiting{
  transition:
    opacity 1500ms var(--ease-ui),
    transform 1500ms var(--ease-ui);
  opacity:0;
  transform:translateY(16px) scale(0.985);
}


/* =========================================================
   TOP NAV — 3 SLOT, FULL WIDTH, NON-COLLAPSING
   ========================================================= */

/* Increased specificity to avoid !important */
body .page .top{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
}

.top > :first-child{ justify-self:start; }
.top > :nth-child(2){ justify-self:center; }
.top > :last-child{ justify-self:end; }

.top a{
  font-size:14px;
  letter-spacing:.03em;
  color:var(--muted);
  padding:12px 14px;
  user-select:none;
  cursor:pointer;

  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    color 120ms ease;
}

.top a:hover{
  transform:translateY(-0.5px);
  box-shadow:0 1px 0 rgba(255,255,255,0.18);
  color:var(--fg);
}

.top a[data-active="true"]{
  color:var(--fg);
  font-weight:500;
  cursor:default;
  pointer-events:none;
}

/* =========================================================
   MAIN
   ========================================================= */

main{
  padding:32px 0 64px;
}

/* =========================================================
   FOOTER — 2 SLOT, FULL WIDTH, NON-COLLAPSING
   ========================================================= */

/* Increased specificity to avoid !important */
body .page .footer{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  padding-top:14px;
}

.footer > :first-child{ justify-self:start; }
.footer > :last-child{ justify-self:end; }

.footer a,
.footer span{
  font-size:13px;
  color:var(--muted);
  padding:12px 14px;
  user-select:none;
}

.footer a{
  cursor:pointer;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    color 120ms ease;
}

.footer a:hover{
  transform:translateY(-0.5px);
  box-shadow:0 1px 0 rgba(255,255,255,0.18);
  color:var(--fg);
}

.footer-right{
  display:flex;
  align-items:center;
  gap:14px;
}

.footer-icons{
  display:flex;
  align-items:center;
  gap:10px;
}

.footer-icons img{
  width:13px;
  height:13px;
  display:block;
  opacity:.65;
}

.footer-icons a:hover img{
  opacity:1;
}

/* ---------- Mobile ---------- */
@media(max-width:520px){
  .page{
    padding:18px 16px;
  }
  main{
    padding:28px 0 48px;
  }
  
  /* FOOTER FIX - Increased specificity */
  body .page .footer{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto;
    gap:16px 0;
  }
  
  /* Methodology - bottom left */
  body .page .footer > a:first-child{
    grid-column:1;
    grid-row:2;
    justify-self:start;
  }
  
  /* Footer-right - needs to span and reorganize */
  body .page .footer-right{
    display:contents;
  }
  
  /* Icons inside footer-right - top, centered */
  body .page .footer-icons{
    grid-column:1 / -1;
    grid-row:1;
    display:flex;
    justify-content:center;
    justify-self:center;
  }
  
  /* Email - bottom right */
  body .page .footer-email{
    grid-column:2;
    grid-row:2;
    justify-self:end;
  }
  
  .footer a,
  .footer span{
    font-size:12px;
    padding:8px 10px;
  }
}