/* site.css: the one shell every getplumjobs.com page shares: the landing page (index.html), privacy and
   terms, and the guides (/p/*, rendered by functions/). Tokens are the app's PlumPalette; the top bar and
   footer markup come from functions/_lib/shell.ts (stamped into the static pages by
   scripts/stamp_site_shell.ts; tests/pages/site_shell.test.ts fails when a copy is stale). */
/* ── Tokens ───────────────────────────────────────────────────────────────
   The app's PlumPalette, ten stored colours per mode; everything else is one
   of these at an opacity, as in plum_design_system. `.theme-dark` and
   `.theme-light` pin a subtree to one mode whatever the system says. */
:root, .theme-light {
  --surface-page: oklch(0.9846 0.0017 247.84);
  --surface-raised: oklch(1.0000 0.0000 0.00);
  --surface-border: oklch(0.9220 0.0042 271.37);
  --text-fg: oklch(0.2088 0.0042 264.48);
  --text-bg: oklch(1.0000 0.0000 0.00);
  --plum: oklch(0.4703 0.1354 337.04);
  --success: oklch(0.5276 0.1428 150.74);
  --warning: oklch(0.5489 0.1300 55.48);
  --danger: oklch(0.5293 0.1898 21.34);
  --info: oklch(0.5242 0.1809 256.29);
  --plum-ink: var(--plum);
  --plum-tint: color-mix(in srgb, var(--plum) 9%, transparent);
  --shadow-raised: 0 1px 2px oklch(0 0 0 / 0.04), 0 2px 6px -1px oklch(0 0 0 / 0.06);
  --shadow-overlay: 0 2px 4px oklch(0 0 0 / 0.06), 0 8px 20px -4px oklch(0 0 0 / 0.10);
  --wash: color-mix(in srgb, var(--text-fg) 4%, transparent);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface-page: oklch(0.2088 0.0042 264.48);
    --surface-raised: oklch(0.2605 0.0058 271.19);
    --surface-border: oklch(0.3084 0.0061 258.35);
    --text-fg: oklch(0.9637 0.0017 247.84);
    --plum: oklch(0.4997 0.1323 336.34);
    --success: oklch(0.7050 0.1539 153.92);
    --warning: oklch(0.7463 0.1560 55.64);
    --danger: oklch(0.6657 0.1803 21.43);
    --info: oklch(0.6803 0.1728 253.30);
    --plum-ink: color-mix(in srgb, oklch(0.4997 0.1323 336.34) 45%, white);
    --plum-tint: color-mix(in srgb, oklch(0.4997 0.1323 336.34) 22%, transparent);
    --shadow-raised: none;
    --shadow-overlay: none;
    --wash: color-mix(in srgb, oklch(0.9637 0.0017 247.84) 6%, transparent);
    color-scheme: dark;
  }
}
.theme-dark {
  --surface-page: oklch(0.2088 0.0042 264.48);
  --surface-raised: oklch(0.2605 0.0058 271.19);
  --surface-border: oklch(0.3084 0.0061 258.35);
  --text-fg: oklch(0.9637 0.0017 247.84);
  --plum: oklch(0.4997 0.1323 336.34);
  --success: oklch(0.7050 0.1539 153.92);
  --warning: oklch(0.7463 0.1560 55.64);
  --danger: oklch(0.6657 0.1803 21.43);
  --info: oklch(0.6803 0.1728 253.30);
  --plum-ink: color-mix(in srgb, oklch(0.4997 0.1323 336.34) 45%, white);
  --plum-tint: color-mix(in srgb, oklch(0.4997 0.1323 336.34) 22%, transparent);
  --shadow-raised: none;
  --shadow-overlay: none;
  --wash: color-mix(in srgb, oklch(0.9637 0.0017 247.84) 6%, transparent);
  color-scheme: dark;
}
:root, .theme-light, .theme-dark {
  --text-secondary: color-mix(in srgb, var(--text-fg) 72%, transparent);
  --text-muted: color-mix(in srgb, var(--text-fg) 56%, transparent);
  --text-bg-soft: color-mix(in srgb, var(--text-bg) 78%, transparent);
  --success-tint: color-mix(in srgb, var(--success) 14%, transparent);
  --dot: oklch(1 0 0 / 0.063);
  --backdrop-plum: color-mix(in oklch, var(--plum) 48%, var(--surface-page));
  --backdrop-iris: color-mix(in oklch, oklch(0.65 0.1 300) 34%, var(--surface-page));
  --backdrop-rose: color-mix(in oklch, oklch(0.73 0.09 12) 26%, var(--surface-page));
  --backdrop-base: color-mix(in oklch, var(--plum) 12%, var(--surface-page));
}
:root {
  --r-button: 8px;
  --r-card: 16px;
  --r-panel: 24px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-paging: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --t-chip: 200ms;
  --t-paging: 320ms;
  --wrap: 1440px;
  --hero-copy: min(440px, calc(50vw - 96px));
  --hero-start: calc((50vw - var(--hero-copy)) / 2);
  --gutter: 24px;
}


/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--surface-page); color: var(--text-fg);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px; line-height: 1.55; letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
img, svg { display: block; }
.num { font-variant-numeric: tabular-nums; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
:focus-visible { outline: 2px solid var(--plum-ink); outline-offset: 3px; border-radius: 4px; }
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon.sm { width: 16px; height: 16px; }
.icon.xs { width: 12px; height: 12px; }
.icon.bold { stroke-width: 2; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Buttons: fill and shadow carry them, never an outline ────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-button);
  font: inherit; font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition-property: background-color, box-shadow, scale;
  transition-duration: var(--t-chip); transition-timing-function: var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { scale: 0.96; }
.btn.lg { height: 52px; padding: 0 24px; font-size: 16px; }
.btn-primary { background: var(--plum); color: var(--text-bg); box-shadow: var(--shadow-raised); }
.btn-primary:hover { background: color-mix(in srgb, var(--plum) 88%, black); }
.btn-secondary { background: var(--wash); color: var(--text-fg); }
.btn-secondary:hover { background: color-mix(in srgb, var(--text-fg) 8%, transparent); }
.btn-inverse { background: var(--text-bg); color: oklch(0.4703 0.1354 337.04); box-shadow: 0 2px 6px -1px oklch(0 0 0 / 0.18); }
.btn-inverse:hover { background: color-mix(in srgb, oklch(1.0000 0.0000 0.00) 92%, oklch(0.4703 0.1354 337.04)); }
.btn .icon { stroke-width: 2; transition: translate var(--t-chip) var(--ease); }
.btn:hover .icon.go { translate: 2px 0; }

/* ── Top bar. Its left edge is the landing hero's copy start, its right edge the wrap's, so every page
   lines up with the landing page. On the landing page it floats over the stage (index.html). */
:root { --site-left: var(--hero-start); --site-right: max(40px, calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
.topbar {
  position: relative; z-index: 5;
  display: flex; align-items: center; gap: 28px;
  height: 80px; padding: 0 var(--site-right) 0 var(--site-left);
}
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text-fg); text-decoration: none; font-weight: 600; font-size: 17px; letter-spacing: -0.02em; }
.brand svg { width: 26px; height: 26px; }
.topbar nav { margin-left: auto; display: flex; gap: 26px; }
.topbar nav a { font-size: 15px; color: var(--text-secondary); text-decoration: none; transition: color var(--t-chip) var(--ease); }
.topbar nav a:hover, .topbar nav a.go, .topbar nav a[aria-current] { color: var(--text-fg); }

.pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 6px; background: var(--plum-tint); color: var(--plum-ink); font-size: 11px; font-weight: 600; padding: 5px 9px; white-space: nowrap; }
.pill.success { background: var(--success-tint); color: var(--success); }

/* ── Footer */
/* The footer uses whitespace for grouping; the final lockup is the signature. */
footer { padding: 72px 0 24px; }
.footer-intro { font-size: 18px; font-weight: 500; line-height: 1.45; letter-spacing: -.025em; }
.foot { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 64px; margin-top: 72px; }
.footer-label { margin-bottom: 16px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; font-weight: 400; letter-spacing: .025em; text-transform: uppercase; color: var(--text-muted); }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.foot a { text-decoration: none; font-size: 16px; font-weight: 500; transition: color 150ms var(--ease); }
.foot a:hover, .foot a[aria-current] { color: var(--plum-ink); }
.footer-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.footer-status p { max-width: 28ch; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
.footer-status .pill { margin-top: 20px; }
.legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px 32px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; line-height: 1.6; letter-spacing: .025em; text-transform: uppercase; color: var(--text-muted); margin-top: 72px; }
.footer-lockup { container-type: inline-size; display: grid; grid-template-columns: 1fr 3.4fr; align-items: center; gap: 2%; margin-top: 44px; text-decoration: none; }
.footer-sprite { width: 100%; height: auto; aspect-ratio: 1; }
/* Dots echo the reference's oversized imprint without introducing a font. */
.footer-wordmark { display: block; padding-bottom: .12em; font-size: 32cqw; font-weight: 600; line-height: .85; letter-spacing: -.075em; background: radial-gradient(circle, var(--text-muted) 1px, transparent 1.2px) 0 0 / 4px 4px; background-clip: text; -webkit-background-clip: text; color: transparent; }
::selection { background: var(--plum); color: var(--text-bg); }
footer h2, footer p { margin: 0; }
footer a { color: inherit; }
.legal a { text-decoration: none; }

/* ── Plum, the mascot ─────────────────────────────────────────────────── */
.mascot .rig { transform-origin: 120px 212px; transform-box: view-box; }
.mascot .leaf { transform-origin: 131px 42px; transform-box: view-box; }
.mascot .eye { transform-origin: center; transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) {
  .mascot.alive .rig { animation: breathe 3.6s ease-in-out infinite; }
  .mascot.alive .leaf { animation: sway 4.8s ease-in-out infinite; }
  .mascot.alive .eye { animation: blink 5.2s infinite; }
  @keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.015, 0.985); } }
  @keyframes sway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-7deg); } }
  @keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
}

@media (max-width: 1000px) {
  :root { --hero-copy: min(380px, calc(50vw - 64px)); }
  .topbar nav { gap: 18px; }
}
@media (max-width: 760px) {
  :root { --gutter: 16px; --site-left: 24px; --site-right: 24px; }
  .topbar { height: 64px; flex: none; }
  .topbar nav a:not(.go) { display: none; }
  footer { padding-top: 48px; }
  .foot { grid-template-columns: 1fr; gap: 36px; margin-top: 40px; }
  .footer-links { gap: 20px; }
  .footer-label { font-size: 11px; }
  .foot a { font-size: 14px; }
  .footer-status p { max-width: 44ch; }
  .legal { margin-top: 48px; }
  .footer-lockup { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
  .footer-sprite { width: 45%; justify-self: center; }
  .footer-wordmark { font-size: 43cqw; text-align: center; background-size: 3px 3px; }
}
@media (max-width: 400px) {
  .footer-links { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* The footer lines up with the top bar: the same left and right edges on every page. */
footer .wrap { max-width: none; padding: 0 var(--site-right) 0 var(--site-left); }