/* Палитра и шрифты совпадают с презентациями (см. public/decks), чтобы сайт и
   слайды читались как одно целое. Сами файлы шрифтов — в assets/fonts.css,
   раздаются с нашего домена, а не с Google Fonts. */
:root{
  --ground:#E9EDF1; --paper:#FFFFFF; --panel:#F4F7F9;
  --ink:#131A24; --ink2:#39434F; --muted:#6C7885;
  --line:#D5DDE4; --line-soft:#E7ECF1;
  --accent:#0B5C86; --accent-2:#0E7BA8; --accent-soft:#E1EDF4;
  --font-sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --radius:6px;
  --shadow:0 1px 2px rgba(16,32,48,.05), 0 8px 28px rgba(16,32,48,.07);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0A0F14; --paper:#121A21; --panel:#17212A;
    --ink:#E8EEF3; --ink2:#C3CDD6; --muted:#8896A3;
    --line:#28343F; --line-soft:#1E2933;
    --accent:#63B8DE; --accent-2:#8ACDEC; --accent-soft:#12303E;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --ground:#0A0F14; --paper:#121A21; --panel:#17212A;
  --ink:#E8EEF3; --ink2:#C3CDD6; --muted:#8896A3;
  --line:#28343F; --line-soft:#1E2933;
  --accent:#63B8DE; --accent-2:#8ACDEC; --accent-soft:#12303E;
}

*{box-sizing:border-box}
html{color-scheme:light dark}
body{
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  background:var(--ground); color:var(--ink);
  font:400 16px/1.5 var(--font-sans);
  -webkit-text-size-adjust:100%;
}

.site-head{border-bottom:1px solid var(--line); background:var(--paper)}
.brand{
  display:flex; align-items:baseline; gap:10px; text-decoration:none;
  color:var(--ink); max-width:1040px; margin:0 auto; padding:14px 20px;
}
.brand-mark{font-weight:700; letter-spacing:-.02em; color:var(--accent)}
.brand-mark .sep{color:var(--muted); font-weight:400; margin:0 1px}
.brand-text{font-weight:600; letter-spacing:-.01em}

.wrap{flex:1; width:100%; max-width:1040px; margin:0 auto; padding:44px 20px 64px}

.hero{max-width:62ch}
.eyebrow{
  margin:0 0 12px; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); font-weight:600;
}
h1{margin:0 0 14px; font-size:clamp(28px,4vw,40px); line-height:1.1; font-weight:600; letter-spacing:-.02em}
.lead{margin:0; font-size:18px; line-height:1.5; color:var(--ink2)}

.cards{
  margin-top:44px; display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow);
}
.card h2{margin:0 0 8px; font-size:18px; font-weight:600; letter-spacing:-.01em}
.card p{margin:0 0 10px; color:var(--ink2); font-size:15px}
.card .status{
  margin:0; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}

.btn{
  display:inline-block; margin-top:20px; padding:10px 18px;
  background:var(--accent); color:var(--paper); text-decoration:none;
  border-radius:var(--radius); font-weight:600; font-size:15px;
}
.btn:hover{background:var(--accent-2)}

.site-foot{
  border-top:1px solid var(--line); background:var(--paper);
  color:var(--muted); font-size:13px;
}
.site-foot span{display:block; max-width:1040px; margin:0 auto; padding:16px 20px}

/* Кодовые слова, код в задачах, числа в журнале. */
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums}