/* ===========================================================
   Jefferson Digital Ventures — shared design tokens
   Edit colours, type and spacing HERE. Both pages read this.
   Page-specific layout stays inline in each HTML file.
   =========================================================== */

:root{
  /* palette */
  --ink:#0B0E1A;        /* page background — deep night */
  --ink-2:#131A2E;      /* raised surface */
  --line:rgba(232,233,240,.11);
  --paper:#E8E9F0;      /* primary text */
  --muted:#7C87A8;      /* secondary text */
  --accent:#6C8CFF;     /* periwinkle — links, eyebrows */
  --warm:#FFB37A;       /* dawn amber — used sparingly in the 3D scene */

  /* type */
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  /* rhythm */
  --gut:clamp(20px,5vw,72px);
  --maxw:1180px;
}

/* --- reset + base --- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}

/* --- brand lockup --- */
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
.mark{
  width:28px;height:28px;flex:none;border-radius:8px;
  background:linear-gradient(145deg,var(--accent),#2E3E86);
  display:grid;place-items:center;
  font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:-.03em;color:#fff;
}
.brand-name{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.015em}

/* --- section eyebrow --- */
.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 20px;
}
.eyebrow--muted{color:var(--muted)}

/* --- footer --- */
.foot{border-top:1px solid var(--line);padding-block:34px}
.foot-inner{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;align-items:center}
.foot p{font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.02em;margin:0}
.foot a{text-decoration:none;border-bottom:1px solid rgba(232,233,240,.22);transition:border-color .2s}
.foot a:hover{border-bottom-color:var(--paper)}

/* --- scroll reveal --- */
.reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1);
}
.reveal.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}