/* =========================================================
   Theme tokens


   9381ff
   b8b8ff
   f8f7ff
   ffeedd
   ffd8be
   ========================================================= */
:root{
  /* Base */
  --bg:#fffbf7;
  --nav-bg: #eaeaff;
  --panel:#fdfdff;
  --input-field:#fffbf7b0;
  --ink:#463f3a;
  --muted-ink:#8a817c;
  --pop:#c7bdff;
  --line:#8a817c28;



  
  --accent:#111827;
  --pill:#f3f3ff;
  --definition:#ececec;
  --eqn:#FFFDF1;
  --eqnum:#f1ebde;
  --eqref:#f7f6ee;
  --figref: #ebe9f1;
  --note:#d5cdff1f;


  --radius:18px;
  --shadow:0 10px 30px rgba(15,23,42,.08);
  --header-h:72px;

  /* Cards / text sizing */
  --card-text-size: 14px;
  --card-text-leading: 1.5;

  /* Project & detail sizing */
  --project-thumb-h: 180px;

  /* Clamping defaults */
  --rec-desc-lines: 2;

  /* Hero / parallax tuning */
  --hero-h: clamp(200px, 34vh, 320px);
  --hero-oversize-scale: 1;  /* keep no-zoom */
  --hero-max-scale: 1;
  --parallax-range: 48px;
  --parallax-strength: 1.6;

  /* Final value you had at the bottom (last one wins) */
  --hero-anchor-y: 80%;

  /* parallax sweep as percentages */
  --hero-anchor-start: 80%;
  --hero-anchor-end: 20%;

  /* Header offset + page end breathing room */
  --header-gap: 14px;
  --page-bottom-space: clamp(28px, 10vh, 140px);

  /* Recs article sizing */
  --recs-article-min-h: 220px;
  --recs-article-title-lines: 2;

  /* See more animation */
  --see-more-slide: 14px;
  --see-more-total: 6600ms;
  --see-more-ease: cubic-bezier(.2,.7,.2,1);

  --see-slide-ms: 750;
  --card-in-ms: 460;
  --card-out-ms: 360;
  --see-ease: cubic-bezier(.2,.7,.2,1);

  /* Tables (site tables) */
  --table-head-bg: #1f2937;
  --table-head-fg: #ffffff;
  --table-row-alt: #f3f4f6;
  --table-border:  #e5e7eb;
}
/* =========================================================
   Base / resets
   ========================================================= */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:var(--bg);
  position: relative;
}

a:focus-visible, button:focus-visible{
  outline:3px solid #93c5fd;
  outline-offset:2px
}

/* Optional top progress bar (JS sets width or transform) */
#progress.progress-bar{
  position: fixed; inset: 0 0 auto 0; height: 3px;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg,#73daa7, var(--pop));
  z-index: 1100;
  pointer-events: none;
}

/* =========================================================
   Background lines
   ========================================================= */
.bg-lines{
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
}
.bg-lines svg{ width:100%; height:100%; display:block; }
.bg-lines path{ stroke-opacity:.9; }

/* =========================================================
   Layout helpers
   ========================================================= */
.container {
  max-width: 1120px;
  margin-inline: auto;
  padding: clamp(16px, 3vw, 32px);
}

/* Paint the top gap so content doesn't show behind it */
body::before{
  content:"";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: calc(env(safe-area-inset-top) + var(--header-gap));
  background: var(--bg);
  z-index: 999;
  pointer-events: none;
}

/* Paint the bottom gap so content doesn't show behind ticker */
body::after{
  content:"";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  height: calc(env(safe-area-inset-bottom) + 12px); /* same as ticker bottom offset */
  background: var(--bg);

  z-index: 999;
  pointer-events: none;
}


/* Base links */
a,
a:visited {
  color: inherit;
  text-decoration: underline;
  font-weight: normal;
}

/* Hover / focus - visual bold effect without reflow */
a:hover,
a:focus-visible {
  text-decoration-thickness: 2px;
  text-shadow:
    0 0 0 currentColor,
    0 0 0 currentColor; /* simulates heavier text */
}