/* Bramkarz AI — site stylesheet.
   Everything sits on the tokens in tokens.css; no hex value is retyped here.
   Light paper is the working surface and navy is punctuation — the header band
   and the footer only. The audience is a bank risk committee, so the page is
   quiet on purpose and the diagrams do the talking. */

@import url('./tokens.css');

/* ---------------------------------------------------------------- reset */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--bk-bg);
  color: var(--bk-fg);
  font-family: var(--bk-font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
img { display: block; height: auto; }

/* ---------------------------------------------------------------- type */

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--bk-ink-900);
  margin: 0 0 var(--bk-space-4);
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.3rem); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.15rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); }
h4 { font-size: 1.0625rem; }

p { margin: 0 0 var(--bk-space-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--bk-safe-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--bk-safe-600); }

strong { font-weight: 600; color: var(--bk-ink-900); }
code, kbd, samp { font-family: var(--bk-font-mono); font-size: 0.9em; }

:focus-visible {
  outline: 2px solid var(--bk-safe-600);
  outline-offset: 2px;
  border-radius: var(--bk-radius-sm);
}

.lede {
  font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem);
  line-height: 1.55;
  color: var(--bk-fg-muted);
  max-width: 60ch;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bk-ink-900);
  color: var(--bk-paper-000);
  padding: var(--bk-space-3) var(--bk-space-5);
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------- layout */

.wrap {
  max-width: var(--bk-content-max);
  margin: 0 auto;
  padding: 0 var(--bk-space-6);
}

section { padding: var(--bk-space-20) 0; }

@media (max-width: 720px) {
  section { padding: var(--bk-space-12) 0; }
}

.section-head { margin-bottom: var(--bk-space-10); max-width: var(--bk-prose-max); }
.section-head h2 { max-width: 24ch; }

.band-sunken { background: var(--bk-bg-sunken); border-block: 1px solid var(--bk-line); }
.band-ink    { background: var(--bk-ink-900); color: var(--bk-ink-100); }
.band-ink h2, .band-ink h3 { color: var(--bk-paper-000); }
.band-ink a { color: var(--bk-safe-200); }

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--bk-line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: var(--bk-space-6);
  min-height: 68px;
}

.brand {
  display: inline-block;
  font-family: var(--bk-font-cond);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--bk-ink-900);
  text-decoration: none;
  flex: none;
}
.brand:hover { color: var(--bk-ink-900); }
.brand b { font-weight: 700; }
.brand span { font-weight: 400; color: var(--bk-ink-600); }

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--bk-space-6);
  flex-wrap: wrap;
}

.nav a {
  color: var(--bk-fg-muted);
  text-decoration: none;
  font-size: 0.98rem;
  font-weight: 500;
  padding: var(--bk-space-2) 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--bk-ink-900); }
.nav a[aria-current="page"] {
  color: var(--bk-ink-900);
  border-bottom-color: var(--bk-safe-600);
}

/* The nav CTA is a button first. Without this it loses its horizontal padding:
   `.nav a` is more specific than `.btn`, so it wins on the shared properties
   and the label ends up wider than its own background. */
.nav a.btn {
  padding: 0.55rem 1.15rem;
  border-bottom: 1px solid transparent;
  color: var(--bk-paper-000);
  white-space: nowrap;
}
.nav a.btn:hover { color: var(--bk-paper-000); }
.nav a.btn[aria-current="page"] { border-bottom-color: transparent; }

@media (max-width: 860px) {
  .site-header .wrap { flex-wrap: wrap; min-height: 0; padding-block: var(--bk-space-3); gap: var(--bk-space-3); }
  .nav { margin-left: 0; width: 100%; gap: var(--bk-space-4); font-size: 0.94rem; }
  /* The CTA drops its button styling here rather than disappearing: on a phone
     the header is the only navigation, so hiding it would cost the primary
     action its most obvious entry point. */
  .nav a.btn {
    padding: var(--bk-space-2) 0;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--bk-safe-700);
    font-weight: 600;
  }
  .nav a.btn:hover { background: none; color: var(--bk-safe-600); }
  .nav a.btn[aria-current="page"] { border-bottom-color: var(--bk-safe-600); }
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bk-space-2);
  padding: 0.7rem 1.35rem;
  border-radius: var(--bk-radius);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-primary {
  background: var(--bk-safe-700);
  border-color: var(--bk-safe-700);
  color: var(--bk-paper-000);
}
.btn-primary:hover { background: var(--bk-safe-600); border-color: var(--bk-safe-600); color: var(--bk-paper-000); }

.btn-secondary {
  background: transparent;
  border-color: var(--bk-line-strong);
  color: var(--bk-ink-900);
}
.btn-secondary:hover { border-color: var(--bk-ink-600); color: var(--bk-ink-900); background: var(--bk-paper-000); }

.band-ink .btn-secondary { border-color: var(--bk-ink-600); color: var(--bk-paper-000); }
.band-ink .btn-secondary:hover { border-color: var(--bk-ink-300); background: rgba(255,255,255,0.06); color: var(--bk-paper-000); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--bk-space-3); }

/* ---------------------------------------------------------------- hero */

.hero { padding: var(--bk-space-16) 0 var(--bk-space-10); }
.hero h1 { max-width: 21ch; }
.hero .lede { margin-top: var(--bk-space-6); }
.hero .btn-row { margin-top: var(--bk-space-8); }

.hero + section { padding-top: var(--bk-space-12); }

@media (max-width: 720px) {
  .hero { padding: var(--bk-space-10) 0 var(--bk-space-8); }
}

/* ---------------------------------------------------------------- figures */

figure { margin: 0; }

.figure {
  margin: var(--bk-space-10) 0 0;
  background: var(--bk-bg-raised);
  border: 1px solid var(--bk-line);
  border-radius: var(--bk-radius-lg);
  padding: var(--bk-space-8);
  box-shadow: var(--bk-shadow);
}
.figure > svg { display: block; width: 100%; height: auto; }
.figure figcaption {
  margin-top: var(--bk-space-6);
  padding-top: var(--bk-space-4);
  border-top: 1px solid var(--bk-line);
  font-size: 0.95rem;
  color: var(--bk-fg-subtle);
  max-width: var(--bk-prose-max);
}

/* Wide diagrams scroll inside their own box rather than the page. */
.figure-scroll { overflow-x: auto; }
.figure-scroll > svg { min-width: 680px; }

@media (max-width: 720px) {
  .figure { padding: var(--bk-space-4); }
}

/* ---------------------------------------------------------------- stats */

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bk-space-6);
}

@media (max-width: 860px) { .stats { grid-template-columns: 1fr; } }

.stat {
  background: var(--bk-bg-raised);
  border: 1px solid var(--bk-line);
  border-top: 3px solid var(--bk-risk-600);
  border-radius: var(--bk-radius);
  padding: var(--bk-space-6) var(--bk-space-6) var(--bk-space-5);
}

.stat .num {
  display: block;
  font-family: var(--bk-font-cond);
  font-size: clamp(2.6rem, 2rem + 2.4vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bk-ink-900);
  margin-bottom: var(--bk-space-3);
}
.stat p { font-size: 1rem; color: var(--bk-fg-muted); }
.stat .src { display: block; margin-top: var(--bk-space-4); font-size: 0.82rem; color: var(--bk-fg-subtle); }

.sources {
  margin-top: var(--bk-space-8);
  padding-top: var(--bk-space-5);
  border-top: 1px solid var(--bk-line);
  font-size: 0.88rem;
  color: var(--bk-fg-subtle);
}
.sources ol { margin: 0; padding-left: 1.3em; }
.sources li { margin-bottom: var(--bk-space-2); }
.sources li:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- cards */

.grid { display: grid; gap: var(--bk-space-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.card {
  background: var(--bk-bg-raised);
  border: 1px solid var(--bk-line);
  border-radius: var(--bk-radius);
  padding: var(--bk-space-6);
}
.card h3 { margin-bottom: var(--bk-space-3); }
.card p { font-size: 0.98rem; color: var(--bk-fg-muted); }
.card p:last-child { margin-bottom: 0; }

.card-num { display: flex; gap: var(--bk-space-5); align-items: flex-start; }
.card-num .step {
  flex: none;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bk-safe-100);
  color: var(--bk-safe-700);
  font-family: var(--bk-font-cond);
  font-weight: 700;
  font-size: 1.05rem;
}

.band-ink .card {
  background: var(--bk-ink-800);
  border-color: var(--bk-ink-700);
}
.band-ink .card p { color: var(--bk-ink-200); }

/* ---------------------------------------------------------------- prose */

.prose { max-width: var(--bk-prose-max); }

/* `wrap prose` is one element doing two jobs. As a .wrap it must keep the page
   gutter and centre at content width; as .prose it must hold text to a readable
   measure. Constraining the children rather than the box keeps the prose left
   edge flush with the section heads above it, instead of floating to the middle
   of the page while everything else stays left. */
.wrap.prose { max-width: var(--bk-content-max); }
.wrap.prose > * { max-width: var(--bk-prose-max); }
.wrap.prose > .table-scroll,
.wrap.prose > .figure { max-width: none; }
.prose h2 { margin-top: var(--bk-space-12); }
.prose h3 { margin-top: var(--bk-space-8); }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 var(--bk-space-4); padding-left: 1.4em; }
.prose li { margin-bottom: var(--bk-space-2); }
.prose li > ul { margin-top: var(--bk-space-2); }

blockquote {
  margin: var(--bk-space-6) 0;
  padding: var(--bk-space-1) 0 var(--bk-space-1) var(--bk-space-6);
  border-left: 3px solid var(--bk-safe-500);
  color: var(--bk-fg-muted);
}

/* ---------------------------------------------------------------- tables */

.table-scroll { overflow-x: auto; margin: var(--bk-space-8) 0; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.97rem;
  background: var(--bk-bg-raised);
}
th, td {
  text-align: left;
  padding: var(--bk-space-4) var(--bk-space-5);
  border-bottom: 1px solid var(--bk-line);
  vertical-align: top;
}
thead th {
  font-family: var(--bk-font-cond);
  font-size: 0.92rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--bk-tracking-caps);
  color: var(--bk-fg-subtle);
  border-bottom: 2px solid var(--bk-line-strong);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: none; }

/* ---------------------------------------------------------------- callout */

.callout {
  margin: var(--bk-space-8) 0;
  padding: var(--bk-space-6);
  border-radius: var(--bk-radius);
  border: 1px solid var(--bk-line);
  border-left: 3px solid var(--bk-ink-600);
  background: var(--bk-bg-raised);
}
.callout h3 { margin-bottom: var(--bk-space-2); font-size: 1.05rem; }
.callout p { font-size: 0.98rem; color: var(--bk-fg-muted); }
.callout-note   { border-left-color: var(--bk-safe-600); background: var(--bk-safe-100); border-color: var(--bk-safe-200); }
.callout-warn   { border-left-color: var(--bk-warn-600); background: var(--bk-warn-100); }
.callout-legal  { border-left-color: var(--bk-ink-500); background: var(--bk-paper-100); }

/* ---------------------------------------------------------------- faq */

/* <details> rather than a script: the CSP on this host forbids inline and
   external JS, and the native element already handles keyboard and screen
   readers correctly. */
.faq-item {
  border-bottom: 1px solid var(--bk-line);
}
.faq-item:first-of-type { border-top: 1px solid var(--bk-line); }

.faq-item > summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: var(--bk-space-5) var(--bk-space-10) var(--bk-space-5) 0;
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--bk-ink-900);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { color: var(--bk-safe-700); }

/* Chevron drawn from two borders, so there is no icon asset to load. */
.faq-item > summary::after {
  content: "";
  position: absolute;
  right: var(--bk-space-2);
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.38rem;
  border-right: 2px solid var(--bk-ink-500);
  border-bottom: 2px solid var(--bk-ink-500);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.faq-item[open] > summary::after {
  transform: rotate(-135deg);
  margin-top: -0.12rem;
}
.faq-item[open] > summary { color: var(--bk-ink-900); }

.faq-answer {
  padding: 0 var(--bk-space-10) var(--bk-space-6) 0;
  max-width: var(--bk-prose-max);
}
.faq-answer p { color: var(--bk-fg-muted); }

/* ---------------------------------------------------------------- lists */

.checks { list-style: none; margin: 0; padding: 0; }
.checks li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: var(--bk-space-3);
  color: var(--bk-fg-muted);
}
.checks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 0.85rem; height: 0.45rem;
  border-left: 2px solid var(--bk-safe-600);
  border-bottom: 2px solid var(--bk-safe-600);
  transform: rotate(-45deg);
}
.band-ink .checks li { color: var(--bk-ink-200); }
.band-ink .checks li::before { border-color: var(--bk-safe-500); }

/* ---------------------------------------------------------------- article list */

.post-list { list-style: none; margin: 0; padding: 0; }
.post-list li { border-bottom: 1px solid var(--bk-line); }
.post-list li:first-child { border-top: 1px solid var(--bk-line); }

.post-list a {
  display: block;
  padding: var(--bk-space-6) 0;
  text-decoration: none;
  color: inherit;
}
.post-list a:hover h3 { color: var(--bk-safe-700); }
.post-list h3 { margin-bottom: var(--bk-space-2); }
.post-list p { color: var(--bk-fg-muted); font-size: 0.98rem; max-width: var(--bk-prose-max); }

.meta {
  font-family: var(--bk-font-cond);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: var(--bk-tracking-caps);
  color: var(--bk-fg-subtle);
}

/* ---------------------------------------------------------------- contact */

.mail-card {
  display: inline-flex;
  flex-direction: column;
  gap: var(--bk-space-2);
  padding: var(--bk-space-6) var(--bk-space-8);
  background: var(--bk-bg-raised);
  border: 1px solid var(--bk-line);
  border-radius: var(--bk-radius-lg);
  box-shadow: var(--bk-shadow);
}
.mail-card .mail {
  font-family: var(--bk-font-mono);
  font-size: clamp(1.15rem, 1rem + 0.9vw, 1.6rem);
  font-weight: 500;
  color: var(--bk-ink-900);
  word-break: break-all;
  user-select: all;   /* one click selects the whole address to copy */
}

/* ---------------------------------------------------------------- footer */

.site-footer {
  background: var(--bk-ink-950);
  color: var(--bk-ink-300);
  padding: var(--bk-space-16) 0 var(--bk-space-10);
  font-size: 0.95rem;
}
.site-footer a { color: var(--bk-ink-200); text-decoration: none; }
.site-footer a:hover { color: var(--bk-paper-000); text-decoration: underline; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--bk-space-10);
  margin-bottom: var(--bk-space-12);
}
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; gap: var(--bk-space-8); } }

.footer-grid h4 {
  font-family: var(--bk-font-cond);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: var(--bk-tracking-caps);
  color: var(--bk-ink-400);
  margin-bottom: var(--bk-space-4);
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: var(--bk-space-3); }
.footer-grid p { color: var(--bk-ink-400); max-width: 40ch; }

.footer-brand { margin-bottom: var(--bk-space-4); }
.footer-brand .wordmark { font-family: var(--bk-font-cond); font-size: 1.25rem; font-weight: 700; color: var(--bk-paper-000); }

.footer-base {
  padding-top: var(--bk-space-6);
  border-top: 1px solid var(--bk-ink-800);
  display: flex;
  flex-wrap: wrap;
  gap: var(--bk-space-4) var(--bk-space-8);
  align-items: baseline;
  color: var(--bk-ink-500);
  font-size: 0.88rem;
}

/* ---------------------------------------------------------------- misc */

.cta-band { text-align: center; }
.cta-band h2 { max-width: 22ch; margin-inline: auto; }
.cta-band .lede { margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: var(--bk-space-8); }

hr { border: none; border-top: 1px solid var(--bk-line); margin: var(--bk-space-12) 0; }

/* Spacing utilities. These exist so no element needs a style attribute — the
   CSP on this host sets style-src 'self', which blocks inline styles. */
.stack-md { margin-top: var(--bk-space-8); }
.stack-lg { margin-top: var(--bk-space-10); }

.token {
  font-family: var(--bk-font-mono);
  font-size: 0.88em;
  padding: 0.1em 0.4em;
  border-radius: var(--bk-radius-sm);
  background: var(--bk-safe-100);
  color: var(--bk-safe-700);
  white-space: nowrap;
}
.raw {
  font-family: var(--bk-font-mono);
  font-size: 0.88em;
  padding: 0.1em 0.4em;
  border-radius: var(--bk-radius-sm);
  background: var(--bk-risk-100);
  color: var(--bk-risk-700);
  white-space: nowrap;
}