/* Portfolio design tokens. Blueprints Collective palette (deep forest, sage, ivory) with the original portfolio layout and Inter typography. */
:root{
  /* palette: Blueprints Collective */
  --forest:#0B3A2E; --emerald:#166653; --emerald-deep:#0F4F40; --sage:#A7C1B2; --ivory:#FBF6EF;
  --charcoal:#1F2937; --mint:#EAF0EA; --leaf:#A7C1B2; --gold:#C9AE72; --sand:#D9D4C8; --night:#0B1F19; --night-2:#12302A;
  --ok:#0F6E75; --warn:#8A5A00; --err:#B3261E; --info:#1F5FA8; --mist:#556170; --sage-line:#D9D4C8;
  /* roles (light) */
  --bg:#FBF6EF; --fg:#1F2937; --muted:#556170; --line:#E4DED2; --card:#FFFFFF;
  --accent:#166653; --accent-fg:#FBF6EF; --soft:#EAF0EA; --band:#0B3A2E; --band-fg:#FBF6EF;
  --focus:#1F5FA8; --track:#DCE3D9;
  /* type: Playfair Display headings + Inter body, same as the main Blueprints Collective site */
  --font-display:'Playfair Display',Georgia,'Times New Roman',serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B1F19; --fg:#FBF6EF; --muted:#B7C9BD; --line:#24463B; --card:#12302A;
    --accent:#A7C1B2; --accent-fg:#0B1F19; --soft:#153A30; --band:#08251D; --band-fg:#FBF6EF;
    --focus:#7FB2E8; --track:#24463B; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0B1F19; --fg:#FBF6EF; --muted:#B7C9BD; --line:#24463B; --card:#12302A;
  --accent:#A7C1B2; --accent-fg:#0B1F19; --soft:#153A30; --band:#08251D; --band-fg:#FBF6EF;
  --focus:#7FB2E8; --track:#24463B; color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:16px;line-height:1.6}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.1;letter-spacing:-.01em;text-wrap:balance;margin:0}
p{margin:0}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.wrap{max-width:1120px;margin-inline:auto;padding-inline:clamp(16px,4vw,48px)}
.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tabular{font-variant-numeric:tabular-nums}

/* top bar */
header.top,.top{position:sticky;top:0;z-index:20;background:var(--forest);color:var(--ivory);border-bottom:1px solid #1d4d40}
.top :focus-visible{outline-color:#8FC4FF}
.top .bar{max-width:1120px;margin-inline:auto;padding:10px clamp(16px,4vw,48px);display:flex;gap:16px;align-items:center;justify-content:space-between}
.brandmini{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:500;font-size:21px;letter-spacing:-.005em;white-space:nowrap;color:var(--ivory);text-decoration:none}
.brandmini svg{flex:none}
.brandmini a{color:inherit;text-decoration:none;display:flex;align-items:center}
.brandmini .name:hover{text-decoration:underline}
.brandmini .leaf:hover{opacity:.85}
.brandstack{display:flex;flex-direction:column;gap:1px;align-items:flex-start}
.brandsub{font-size:12px;font-weight:600;color:var(--accent);text-decoration:none;padding-left:36px;line-height:1.2}
.brandsub:hover{text-decoration:underline}
nav.rail{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;min-width:0}
nav.rail a{white-space:nowrap;padding:6px 12px;border-radius:999px;text-decoration:none;color:#C9D8CF;font-size:14px;font-weight:500}
nav.rail a:hover{background:rgba(251,246,239,.1);color:#fff}
.themebtn{all:unset;cursor:pointer;font-size:13px;font-weight:600;padding:6px 12px;border:1px solid rgba(251,246,239,.35);border-radius:999px;color:var(--ivory)}
.themebtn:focus-visible{outline:3px solid var(--focus)}

/* buttons */
.btn{font-family:var(--font-body);font-weight:600;font-size:15px;border-radius:10px;padding:11px 20px;border:1.5px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none;line-height:1.2}
.btn.p{background:var(--accent);color:var(--accent-fg)}
.btn.p:hover{filter:brightness(.92)}
.btn.s{background:transparent;border-color:var(--accent);color:var(--accent)}
.btn.s:hover{background:var(--soft)}
.btn.t{background:transparent;color:var(--accent);padding-inline:6px;text-decoration:underline;text-underline-offset:4px}
.btn.onDark{background:var(--leaf);color:#0E1A15}
.btn.onDark.s{background:transparent;border-color:var(--sage);color:var(--ivory)}
.btn[disabled]{background:#DCE3D9;color:#5B665F;cursor:not-allowed}

/* cards, chips, pills */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;min-width:0}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--muted);background:var(--card)}
.chip.g{background:var(--soft);color:var(--accent);border-color:transparent}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:600}
.pill.ok{background:#DCEFF0;color:#0B5158}
.pill.warn{background:#F6E8CC;color:#6E4700}
.pill.err{background:#F8DCD9;color:#8C1D17}
.pill.info{background:#DCE8F6;color:#174A82}
.pill.brand{background:var(--soft);color:var(--accent)}

/* tables */
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--card)}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500}
tr:last-child td{border-bottom:0}

/* layout helpers */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}

.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--forest);color:var(--ivory);padding:10px 18px;border-radius:10px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:50}
.toast.on{opacity:1}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}