/* ───────────────────────────────────────────────────────────────
   Design tokens. Inline styles read these via var() so layout,
   type, and spacing all flow through one configuration surface.
   Layout *shape* (column counts) stays breakpoint-driven; type
   *size* and most *spacing* are fluid via clamp() and don't step.
   ─────────────────────────────────────────────────────────────── */

:root {
  /* ───── Layout shape (breakpoint-driven) ───── */
  --hero-cols: 0.9fr 1.1fr;
  --calc-cols: 1fr 1fr;
  --calc-header-cols: auto 1fr;
  --ticker-display: block;

  /* ───── Squares chart sizing (breakpoint-driven) ─────
     The chart container is a square capped at this width. Tweak these
     two values to dial in chart size — the desktop value applies when
     the chart sits next to the filters; the wrapped value applies once
     it drops below them at <=1080px. The column itself may still cap
     the chart on narrower desktops; bump --calc-cols to give the
     squares column more room if needed (e.g. "1fr 1.3fr"). */
  --squares-max-w: 540px;

  /* ───── Fluid type scale ─────
     clamp(min, scale, max) — sizes flow smoothly across viewports
     instead of stepping at breakpoints. */
  --headline-size: clamp(28px, 3.4vw, 44px);
  --pool-size:     clamp(48px, 6vw, 84px);
  --bio-body-size: clamp(16px, 1vw + 0.5rem, 18px);

  /* ───── Spacing scale (rem-based, multiples of 0.25rem) ───── */
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */

  /* ───── Fluid spacing (containers) ─────
     These are the "structural" gaps that benefit from scaling
     with viewport width without stepping. */
  --page-pad-x:    clamp(20px, 4vw, 40px);
  --hero-gap:      clamp(24px, 3vw, 40px);
  --calc-gap:      clamp(16px, 2vw, 24px);
  --cta-space-top: clamp(32px, 4vw, 56px);

  /* ───── Layout offsets (breakpoint-driven — switch to 0 on mobile) ───── */
  --bio-pad-top: var(--space-7);
}

/* ───────────── Experience rows ─────────────
   Both header (collapsed) + expanded panel use the same grid template so
   bullets always align under the fragments column at desktop sizes. */

.exp-row-header,
.exp-row-expanded {
  display: grid;
  grid-template-columns: 48px 180px 1fr 200px 18px;
  gap: var(--space-5);
}
.exp-row-header { align-items: baseline; }
.exp-cell-bullets { grid-column: 3 / 4; }

/* ───────────── Footer ─────────────
   Desktop: single row — copyright | links | verifiable.
   Mobile:  links span top row, copyright (left) + verifiable (right) below. */
.footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "copyright links verifiable";
  align-items: center;
  gap: var(--space-4);
}
.footer-copyright  { grid-area: copyright;  text-align: left; }
.footer-links      { grid-area: links;      justify-self: center; }
.footer-verifiable { grid-area: verifiable; text-align: right; }

/* ───────────── Breakpoints (layout shape only) ───────────── */

/* Tablet — calculator's internal split collapses (filters above squares),
   experience row drops the stack column. */
@media (max-width: 1080px) {
  :root {
    --calc-cols: 1fr;
    --squares-max-w: 440px;
  }
  .exp-row-header,
  .exp-row-expanded {
    grid-template-columns: 48px 180px 1fr 18px;
  }
  .exp-cell-stack { display: none; }
}

/* Narrow desktop / wide mobile — hero stacks to a single column. */
@media (max-width: 900px) {
  :root {
    --hero-cols: 1fr;
    --bio-pad-top: 0;
  }
}

/* Tight viewport — experience row stacks vertically, toggle floats right;
   calculator header collapses to single column; ticker hides; footer
   restructures to two rows with links on top. */
@media (max-width: 720px) {
  :root {
    --calc-header-cols: 1fr;
    --ticker-display: none;
  }

  .exp-row-header {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    column-gap: var(--space-3);
    row-gap: var(--space-1);
    align-items: start;
  }
  .exp-cell-year     { grid-column: 1; grid-row: 1; }
  .exp-cell-company  { grid-column: 1; grid-row: 2; }
  .exp-cell-fragments{ grid-column: 1; grid-row: 3; margin-top: var(--space-1); }
  .exp-cell-toggle   { grid-column: 2; grid-row: 1 / -1; align-self: center; }

  .exp-row-expanded { grid-template-columns: 1fr; }
  .exp-cell-bullets { grid-column: 1 / -1; }

  .footer {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "links     links"
      "copyright verifiable";
    row-gap: var(--space-3);
  }
  .footer-links { justify-self: center; }
}