/* sansmith.dev - личный сайт.
   Токены перенесены из утверждённого макета (V6).
   Контрасты проверены: текст >= 4.5:1, акцент на фоне >= 6:1. */

:root{
  color-scheme:light;
  --bg:#f7f7f5; --surface:#ffffff; --fg:#17191e; --muted:#4e5560;
  --border:#e2e3e0; --border-strong:#c9cbc6; --accent:#1a4fd6; --accent-fg:#ffffff;
  --accent-soft:color-mix(in oklch, var(--accent) 10%, transparent);
  --fg-soft:color-mix(in oklch, var(--fg) 4%, transparent);

  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"JetBrains Mono","SF Mono",Menlo,Consolas,monospace;

  --fs-h1:clamp(29px,4.2vw,44px); --fs-h2:clamp(20px,2.3vw,26px);
  --fs-h3:17px; --fs-lead:17px; --fs-body:16px; --fs-meta:13px;

  --gap-xs:6px; --gap-sm:10px; --gap-md:18px; --gap-lg:28px;
  --gap-xl:40px; --gap-2xl:52px;
  --container:1080px; --gutter:28px; --radius:8px; --radius-lg:12px;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#14161a; --surface:#1b1e23; --fg:#e6e7ea; --muted:#9aa1ad;
  --border:#2a2e35; --border-strong:#3a3f48; --accent:#7aa2f7; --accent-fg:#14161a;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#14161a; --surface:#1b1e23; --fg:#e6e7ea; --muted:#9aa1ad;
    --border:#2a2e35; --border-strong:#3a3f48; --accent:#7aa2f7; --accent-fg:#14161a;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
p{text-wrap:pretty;margin:0}
p+p{margin-top:var(--gap-md)}
h1,h2,h3{text-wrap:balance;margin:0}
button{font-family:inherit}
ul,ol{padding-left:1.15em}
li{margin-block:.25em}

.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
/* Секции разделяет воздух, а не линии: полосы оставлены только у шапки,
   списков и подвала. */
.section{padding-block:clamp(28px,4vw,64px)}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-md)}

h1{font-size:var(--fs-h1);line-height:1.14;letter-spacing:-.021em;font-weight:640}
h2{font-size:var(--fs-h2);line-height:1.25;letter-spacing:-.015em;font-weight:620}
h3{font-size:var(--fs-h3);line-height:1.4;letter-spacing:-.008em;font-weight:600}
.lead{font-size:var(--fs-lead);line-height:1.62;color:var(--muted);max-width:64ch}
.meta{font-family:var(--font-mono);font-size:var(--fs-meta);color:var(--muted);letter-spacing:.01em}

.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--gap-md);
  margin-bottom:var(--gap-lg)}
.sec-head h2{font-size:19px;font-weight:600;letter-spacing:-.01em}
.sec-head .more{font-size:13.5px;color:var(--accent);cursor:pointer;
  display:inline-flex;align-items:center;gap:5px}
.sec-head .more:hover{border-bottom:1px solid var(--accent)}
.sec-head .more svg{width:12px;height:12px}

/* ── шапка ── */
.topnav{position:sticky;top:0;z-index:10;background:color-mix(in oklch,var(--bg) 92%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.topnav-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-md);
  padding-block:12px;min-height:56px}
.brand{font-family:var(--font-mono);font-size:15px;font-weight:600;letter-spacing:-.01em}
.brand .caret{color:var(--accent)}
.topnav nav{display:flex;align-items:center;gap:var(--gap-lg)}
.navlink{font-size:14px;color:var(--muted);transition:color .15s ease}
.navlink:hover{color:var(--fg)}
.navlink[aria-current="page"]{color:var(--fg);font-weight:550}
.themebtn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border:1px solid var(--border);border-radius:var(--radius);background:transparent;color:var(--muted);
  cursor:pointer;transition:border-color .15s ease,color .15s ease}
.themebtn:hover{border-color:var(--border-strong);color:var(--fg)}
.themebtn svg{width:15px;height:15px}
:root[data-theme="dark"] .themebtn .i-sun{display:none}
:root:not([data-theme="dark"]) .themebtn .i-moon{display:none}

/* ── главная: самопрезентация ── */
.hero{padding-top:clamp(26px,3.6vw,46px);padding-bottom:clamp(28px,3.6vw,46px)}
.hero .lead{margin-top:var(--gap-md)}
.hero-grid{display:grid;grid-template-columns:132px 1fr;gap:clamp(24px,4vw,48px);align-items:start}
.avatar{width:132px;height:132px;border-radius:var(--radius-lg);object-fit:cover;
  border:1px solid var(--border);filter:saturate(.92)}
.hero-links{display:flex;flex-wrap:wrap;gap:var(--gap-sm) var(--gap-lg);align-items:center;margin-top:var(--gap-lg)}
.link-inline{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--accent);
  border-bottom:1px solid transparent;transition:border-color .15s ease}
.link-inline:hover{border-bottom-color:var(--accent)}
.link-inline svg{width:14px;height:14px}

.int-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-lg)}
.int-grid h3{font-size:16px;margin-bottom:var(--gap-xs)}
.int-grid p{color:var(--muted);font-size:14.5px;line-height:1.6}

/* ── теги ── */
.tags{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.tags li{margin:0}
.tag{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border:1px solid var(--border);
  border-radius:999px;font-family:var(--font-mono);font-size:11.5px;color:var(--muted);
  letter-spacing:.02em;transition:.15s ease}
.tag:hover{border-color:var(--accent);color:var(--accent)}
.tag .n{opacity:.65;font-size:10.5px}
.tag.is-on{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.tag.is-on .n{opacity:.8}
.tag-lg{padding:6px 14px;font-size:12.5px}

/* ── статьи ── */
.posts{list-style:none;margin:0;padding:0}
.post{display:grid;grid-template-columns:96px 1fr auto;gap:var(--gap-lg);
  padding-block:16px;border-top:1px solid var(--border);align-items:baseline}
.post .date{font-family:var(--font-mono);font-size:var(--fs-meta);color:var(--muted);
  font-variant-numeric:tabular-nums}
.post h3{font-size:16.5px;margin-bottom:3px}
.post h3 a{border-bottom:1px solid transparent;transition:border-color .15s ease}
.post:hover h3 a{border-bottom-color:var(--border-strong)}
.post .sum{color:var(--muted);font-size:14.5px;line-height:1.6;max-width:64ch;margin-bottom:7px}
.post .rt{font-family:var(--font-mono);font-size:var(--fs-meta);color:var(--muted);white-space:nowrap}

/* ── проекты ── */
.projects{list-style:none;margin:0;padding:0}
.project{display:grid;grid-template-columns:2fr 1fr;gap:var(--gap-lg);
  padding-block:15px;border-top:1px solid var(--border);align-items:start;
  transition:background .15s ease;margin-inline:-10px;padding-inline:10px;border-radius:var(--radius)}
a.project:hover{background:var(--fg-soft)}
.project .pname{font-family:var(--font-mono);font-size:15px;font-weight:600;
  display:inline-flex;align-items:center;gap:6px}
.project .pname svg{width:13px;height:13px;color:var(--muted);transition:.15s ease}
a.project:hover .pname svg{color:var(--accent);transform:translateX(3px)}
.project .pdesc{color:var(--muted);font-size:14px;margin-top:4px;max-width:54ch;line-height:1.55}
.project .prole{color:var(--muted);font-family:var(--font-mono);font-size:12.5px;margin-top:6px}
.project .pmeta{font-family:var(--font-mono);font-size:var(--fs-meta);color:var(--muted);text-align:right}
.pgroup{font-family:var(--font-mono);font-size:var(--fs-meta);color:var(--muted);
  letter-spacing:.04em;text-transform:uppercase;margin:var(--gap-lg) 0 var(--gap-xs)}
.pgroup:first-of-type{margin-top:0}

/* ── служебное ── */
.crumb{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--muted);
  margin-bottom:var(--gap-md)}
.crumb:hover{color:var(--accent)}
.crumb svg{width:13px;height:13px}
.ptitle{font-family:var(--font-mono);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(25px,3.3vw,35px);margin-bottom:var(--gap-sm)}
.pcwrap .ptitle{font-size:clamp(23px,3.1vw,32px);font-family:var(--font-body);letter-spacing:-.019em}
.plede{font-size:var(--fs-lead);color:var(--muted);max-width:64ch;line-height:1.6;margin-bottom:var(--gap-lg)}
.actions{display:flex;flex-wrap:wrap;gap:var(--gap-sm);margin-bottom:var(--gap-xl)}
/* Снимок проекта на его странице: extra.image + image_caption. */
.shot{margin:0 0 var(--gap-xl);border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);overflow:hidden;max-width:70ch}
.shot img{width:100%;height:auto;display:block;border-bottom:1px solid var(--border)}
.shot figcaption{font-family:var(--font-mono);font-size:var(--fs-meta);
  color:var(--muted);padding:8px 12px}
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:var(--radius);
  border:1px solid var(--border);font-size:14px;cursor:pointer;background:none;color:var(--fg);
  transition:.15s ease}
.btn:hover{border-color:var(--fg)}
.btn svg{width:14px;height:14px}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg);font-weight:500}
.btn-primary:hover{background:color-mix(in oklch,var(--accent) 88%,black);border-color:transparent}

.pgrid{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--gap-xl);align-items:start}
/* Основной текст статей: цвет --fg (не muted), 17px, строка ~65-75 знаков.
   Muted остаётся только для второстепенного: даты, подписи, цитаты-выноски.
   Мера задаётся дочерним блокам, чтобы заголовок не зажимался ею. */
.prose{color:var(--fg);font-size:17px;line-height:1.72}
.prose>*{max-width:70ch}
.prose>.ptitle{max-width:none}
.prose h2{font-size:clamp(20px,2.2vw,24px);line-height:1.3;letter-spacing:-.013em;
  font-weight:640;margin:1.9em 0 .55em}
.prose h3{font-size:19px;line-height:1.35;letter-spacing:-.009em;
  font-weight:620;margin:1.5em 0 .45em}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:color-mix(in oklch,var(--accent) 38%,transparent)}
.prose a:hover{text-decoration-color:currentColor}
.prose ul,.prose ol{margin-block:var(--gap-md)}
.prose li::marker{color:var(--muted)}
.prose li>ul,.prose li>ol{margin-block:.3em}
.prose code{font-family:var(--font-mono);font-size:.9em;
  background:color-mix(in oklch,var(--fg) 6%,transparent);
  padding:1px 5px;border-radius:4px}
.prose pre{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 18px;overflow-x:auto;font-size:14px;line-height:1.6}
.prose pre code{background:none;padding:0}
.prose blockquote{border-left:3px solid var(--border-strong);margin:var(--gap-md) 0;
  padding-left:var(--gap-md);color:var(--muted)}
.prose hr{border:0;border-top:1px solid var(--border-strong);margin-block:var(--gap-xl)}
.prose table{width:100%;max-width:100%;border-collapse:collapse;font-size:.94em;
  margin-block:var(--gap-md)}
.prose th,.prose td{border:1px solid var(--border-strong);padding:7px 11px;
  text-align:left;vertical-align:top}
.prose th{font-weight:600;background:var(--fg-soft)}
.prose img{border-radius:var(--radius);margin-block:var(--gap-md)}

.kv{list-style:none;margin:0;padding:0}
.kv li{display:flex;justify-content:space-between;gap:var(--gap-md);padding-block:8px;
  border-bottom:1px solid var(--border);font-size:14px;margin:0}
.kv li:first-child{border-top:1px solid var(--border)}
.kv .k{color:var(--muted)}
.kv .v{font-family:var(--font-mono);font-size:13px;text-align:right}
.minilist{list-style:none;margin:0;padding:0}
.minilist li{font-family:var(--font-mono);font-size:13px;color:var(--muted);
  display:flex;justify-content:space-between;gap:var(--gap-md);padding-block:3px;margin:0}
.minilist a{color:var(--accent)}

.about-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:var(--gap-xl);align-items:start}
.facts{list-style:none;margin:0;padding:0}
.facts li{display:flex;justify-content:space-between;gap:var(--gap-md);
  padding-block:9px;border-bottom:1px solid var(--border);font-size:14.5px;margin:0}
.facts li:first-child{border-top:1px solid var(--border)}
.facts .k{color:var(--muted)}
.facts .v{font-family:var(--font-mono);font-size:13.5px;text-align:right}
/* Текст «О себе» набирается стилями .prose: --fg, 17px. */

.pgnote{color:var(--muted);font-size:14px;max-width:66ch;margin-bottom:var(--gap-md)}

/* ── подвал ── */
.pagefoot{border-top:1px solid var(--border);padding-block:var(--gap-lg);
  color:var(--muted);font-size:13.5px}
.foot-links{display:flex;flex-wrap:wrap;gap:var(--gap-md) var(--gap-lg);align-items:center}
.soc{display:inline-flex;align-items:center;gap:6px;color:var(--muted);transition:color .15s ease}
.soc:hover{color:var(--accent)}
.soc svg{width:15px;height:15px}

/* ── адаптив ── */
@media (max-width:1024px){ .int-grid{grid-template-columns:1fr 1fr} }
@media (max-width:920px){
  .int-grid,.about-grid,.pgrid{grid-template-columns:1fr;gap:var(--gap-lg)}
  .project{grid-template-columns:1fr;gap:var(--gap-xs)}
  .project .pmeta{text-align:left}
}
@media (max-width:767px){
  :root{--gutter:20px}
  .hero-grid{grid-template-columns:1fr;gap:var(--gap-md)}
  .avatar{width:84px;height:84px}
  /* Шапка переносится на вторую строку целиком, а не рвёт слова.
     Пункты меню вытянуты до тач-цели 44px (Apple HIG / Material 48dp). */
  .topnav-inner{flex-wrap:wrap;row-gap:0}
  .brand{white-space:nowrap;padding-block:8px}
  .topnav nav{gap:0 14px;flex-wrap:wrap}
  .navlink{font-size:13px;white-space:nowrap;padding-block:14px}
  .themebtn{width:40px;height:40px}
  .post{grid-template-columns:1fr;gap:4px}
  .post .rt{display:none}
  .sec-head{flex-direction:column;align-items:flex-start;gap:4px}
}

/* Подсветка кода: Zola отдаёт классы, цвета приходят из giallo-*.css.
   Эти два правила обязательны, иначе строки кода отображаются криво. */
.giallo-l{display:inline-block;min-height:1lh;width:100%}
.giallo-ln{display:inline-block;user-select:none;margin-right:.4em;padding:.4em;
  min-width:3ch;text-align:right;opacity:.8}
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }