/* site/assets/base.css — palette, type, page frame. No external fonts: CSP is 'self'-only. */
:root {
  --plum-900: #160b1f;   /* page */
  --plum-800: #1f1029;   /* card */
  --plum-700: #2b1739;   /* card hover */
  --plum-500: #5a3a73;   /* muted rules */
  --ink: #efe7f5;
  --ink-dim: #b3a3c2;
  --leaf: #4fd18b;       /* the green line */
  --leaf-dim: #2f7f55;
  --gap: clamp(14px, 2.2vw, 22px);
}
* { box-sizing: border-box; margin: 0; }
html { background: var(--plum-900); }
body {
  min-height: 100vh; display: flex; flex-direction: column;
  color: var(--ink); background: var(--plum-900);
  font: 16px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  /* A faint ruled grid, like drafting paper. Flat, no glow. */
  background-image:
    linear-gradient(var(--plum-800) 1px, transparent 1px),
    linear-gradient(90deg, var(--plum-800) 1px, transparent 1px);
  background-size: 48px 48px;
  padding-inline: 16px;
}
.masthead { max-width: 1080px; width: 100%; margin: 0 auto; padding: 12vh 0 6vh; }
.title {
  display: flex; flex-wrap: wrap; gap: .1em .45em;
  font-size: clamp(2.2rem, 7.5vw, 5.4rem); line-height: .95;
  font-weight: 900; letter-spacing: .02em; text-transform: uppercase;
}
.word { display: inline-flex; }
.word > span { display: inline-block; }
.accent { color: var(--leaf); }
.strap {
  margin-top: 1.4rem; color: var(--ink-dim); font-size: 1.05rem;
  border-left: 2px solid var(--leaf-dim); padding-left: .8rem;
}
.foot {
  max-width: 1080px; width: 100%; margin: auto auto 0; padding: 28px 0;
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  color: var(--ink-dim); font-size: .85rem; border-top: 1px solid var(--plum-500);
}
a:focus-visible { outline: 2px solid var(--leaf); outline-offset: 3px; }
.anchor { position: absolute; top: 0; }  /* #home target: at the very top, so no scroll jump */