/* Blueprint layout and content, re-skinned with the vCard security theme
   (deep slate panels, amber signal accent, Space Grotesk + JetBrains Mono). */

:root, :root:not([data-theme]) {
  --paper: #0d141d;
  --grid: rgba(120, 150, 185, .045);
  --grid-major: rgba(120, 150, 185, .09);
  --ink: #eef3f8;
  --ink-2: #a9b7c7;
  --line: #26364b;
  --attack: #f5b13d;      /* amber signal */
  --hostile: #ff6b5e;     /* used for real attacker steps */
  --hold: #4fd1a5;
  --card: #172231;
  --card-2: #1d2a3b;
  --sans: "Space Grotesk", system-ui, sans-serif;
  --display: "Space Grotesk", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --radius: 14px;
  --shadow: 0 16px 40px rgba(0, 0, 0, .35);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #0d141d; --ink: #eef3f8; --ink-2: #a9b7c7; --attack: #f5b13d; --hold: #4fd1a5; --card: #172231; --grid: rgba(120, 150, 185, .045); --grid-major: rgba(120, 150, 185, .09); }
}

body {
  background-color: var(--paper);
  background-image:
    radial-gradient(1200px 600px at 85% -10%, rgba(245, 177, 61, .08), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(79, 209, 165, .05), transparent 60%),
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px);
  background-size: auto, auto, 32px 32px, 32px 32px;
  background-attachment: fixed, fixed, scroll, scroll;
  letter-spacing: -.005em;
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .012) 0 1px, transparent 1px 3px);
}

a:hover { color: var(--attack); }

/* type: Space Grotesk instead of condensed Archivo */
h1 { font-weight: 700; font-stretch: normal; letter-spacing: -.035em; font-size: clamp(2.8rem, 7.5vw, 6rem); line-height: .95; }
h2 { font-weight: 700; font-stretch: normal; letter-spacing: -.03em; font-size: clamp(2rem, 4vw, 2.8rem); }
h3, .flow b, .cases h4, .problems h5, .layers h3 { font-stretch: normal; letter-spacing: -.01em; }
.sheet-title h2::after {
  content: ""; display: block; width: 40px; height: 5px; border-radius: 3px; margin-top: .9rem;
  background: var(--attack);
}
.mark { border-radius: 10px; border-color: var(--attack); color: var(--attack); font-stretch: normal; }
.role { color: var(--attack); }
.dims b, .finding .big { font-stretch: normal; letter-spacing: -.03em; }
.dims b { background: linear-gradient(to right, #ffc965, var(--attack)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dims li::before, .dims li::after { border-color: var(--line); }

/* top bar */
.top nav a { color: var(--ink-2); font-size: .9rem; }
.top nav a:hover { color: var(--attack); text-decoration: none; }
.top nav a.nav-blog { color: var(--attack); border: 1px solid color-mix(in srgb, var(--attack) 55%, transparent); border-radius: 999px; padding: .1rem .7rem; }
.top nav a.nav-blog:hover { background: color-mix(in srgb, var(--attack) 14%, transparent); }

/* panels become rounded vCard surfaces */
.xsection, .finding, .llm, .prior, .questions, .setup, .schedule, .toolkit-grid, .titleblock, .cases, .flow li, .problems article {
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}
.questions, .cases, .toolkit-grid, .schedule, .titleblock { overflow: hidden; }
.xsection { background: linear-gradient(to bottom right, rgba(38, 54, 75, .35), rgba(18, 27, 39, 0)), var(--card); }
.cases article, .toolkit-grid div, .questions article { background: transparent; }
.cases article:hover { background: var(--card-2); }
.flow li { box-shadow: none; }
.problems article { background: var(--card-2); box-shadow: none; }

/* the attack-step colours: real attacker actions are red, the accent stays amber */
.flow li.hostile { border-color: var(--hostile); }
.flow li.hostile b { color: var(--hostile); }
.problems article { border-color: color-mix(in srgb, var(--hostile) 70%, transparent); }
.sv-hostile, .sv-dash { stroke: var(--hostile); }
.sv-red { fill: var(--hostile); }
.sv-box { fill: var(--card); }
.finding { border-color: var(--hostile); background: linear-gradient(135deg, rgba(255, 107, 94, .12), rgba(255, 107, 94, 0) 60%), var(--card); }
.finding .big { color: var(--hostile); }
.finding .insight { border-top-color: var(--hostile); }
.finding .insight b { color: var(--hostile); }
.questions li::before { color: var(--attack); }

/* attack simulator */
.attacks button { border-radius: 999px; border-color: var(--line); border-style: solid; color: var(--ink-2); font-family: var(--mono); font-size: .78rem; }
.attacks button.ai { border-color: color-mix(in srgb, var(--attack) 60%, var(--line)); color: var(--attack); }
.attacks button:hover, .attacks button[aria-pressed="true"] { background: var(--attack); color: #0d141d; border-color: var(--attack); }
.trail { border-top-color: var(--hostile); }
.token { background: var(--hostile); box-shadow: 0 0 12px var(--hostile); }
.layers { border-radius: 10px; overflow: hidden; }
.layers li:nth-child(even) { background-image: repeating-linear-gradient(135deg, transparent 0 7px, rgba(255, 255, 255, .03) 7px 8px); }
.layers li.blocked { background: color-mix(in srgb, var(--hold) 85%, #000); }
.layers li.blocked h3, .layers li.blocked p, .layers li.blocked::after { color: #0d141d; }
.layers li.model { background-color: color-mix(in srgb, var(--attack) 8%, var(--card)); }
.layers li.reached, .layers li.model.reached { background: var(--hostile); }
.layers li.reached h3, .layers li.reached p, .layers li.reached::after { color: #0d141d; }
.readout b { color: var(--hold); }
.readout b.open { color: var(--hostile); }

/* small details */
.titleblock dt, .mini, .tools, .setup caption, .cases dt, .toolkit-grid dt, .fig { color: var(--ink-2); }
.cases dd.res { color: var(--hold); }
.spec li { border-top-color: var(--line); }
.spec li::before { background: var(--attack); width: .45rem; height: .45rem; border-radius: 50%; top: 1.3rem; }
.projects article { border-top-color: var(--attack); border-top-width: 2px; background: var(--card); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); }
.projects article:hover { transform: translateY(-3px); }
.projects article { transition: transform .25s ease, background-color .2s; }
.schedule th, .schedule td { border-bottom-color: var(--line); }
.schedule td a { color: var(--attack); }
.contact ul a { color: var(--attack); }
.sheet { border-top-color: var(--line); }
.foot { border-top-color: var(--line); }
.cad-x, .cad-y { background: var(--attack); opacity: .25; }
.cad-label { background: var(--card); color: var(--attack); border-radius: 4px; }
:focus-visible { outline-color: var(--attack); }

@media (prefers-reduced-motion: reduce) {
  .projects article { transition: none; }
  .projects article:hover { transform: none; }
}