/* ============================================================
   Anton Shirikov — shared site styles
   Brutalist editorial: monochrome, one grotesque + one mono,
   sharp corners, structural rules, no decoration.
   ============================================================ */
:root{
  /* near-white paper for a starker, brutalist contrast */
  --paper:#fbfbf9; --paper-2:#f0efea; --paper-3:#deded8;
  --ink:#141310; --ink-2:#36342c; --muted:#56544b; --faint:#8a877d;
  /* constructivist red — black / red / white */
  --accent:#c4291a; --accent-2:#9b1f12;
  /* rules */
  --rule:#141310;                 /* full-black structural rules */
  --hair:rgba(20,19,16,.14);      /* light list dividers */
  --hair-2:rgba(20,19,16,.28);
  /* type */
  --sans:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;
  --maxw:1180px;
  --pad:44px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;font-weight:400}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* mono metadata label */
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:500}

/* ---------- nav ---------- */
header{position:sticky;top:0;z-index:40;background:color-mix(in oklab,var(--paper) 88%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:2px solid var(--rule)}
nav{display:flex;align-items:center;justify-content:space-between;height:66px;gap:24px}
.brand{font-weight:800;font-size:15px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.navlinks{display:flex;align-items:center;gap:26px}
.navlinks a{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--ink-2);font-weight:400;white-space:nowrap;text-transform:uppercase}
.navlinks a:hover{color:var(--ink)}
.navlinks a.active{color:var(--accent);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.navlinks a.cv{border:1.5px solid var(--ink);padding:7px 14px;color:var(--ink)}
.navlinks a.cv:hover{background:var(--ink);color:var(--paper);text-decoration:none}
.navtoggle{display:none;width:42px;height:42px;border:1.5px solid var(--ink);background:transparent;align-items:center;justify-content:center;cursor:pointer;flex:none}
.navtoggle span{position:relative;width:18px;height:2px;background:var(--ink);transition:.22s}
.navtoggle span::before,.navtoggle span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);transition:.22s}
.navtoggle span::before{top:-6px}.navtoggle span::after{top:6px}
.navtoggle[aria-expanded="true"] span{background:transparent}
.navtoggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.navtoggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ---------- page header band ---------- */
.pagehead{padding:78px 0 14px}
.pagehead h1{font-size:clamp(46px,9vw,92px);line-height:.92;letter-spacing:-.035em;font-weight:800;text-transform:uppercase}
.pagehead .lede{margin-top:26px;max-width:58ch;color:var(--muted);font-size:clamp(17px,2.2vw,19px);line-height:1.58}
.pagehead .lede a{color:var(--accent);text-decoration:underline;text-decoration-color:color-mix(in oklab,var(--accent) 40%,transparent);text-underline-offset:3px}
.pagehead .lede a:hover{text-decoration-color:var(--accent)}

/* ---------- generic sections ---------- */
section.block{padding:48px 0}
.sec-head{margin-bottom:6px;padding-top:18px;border-top:2px solid var(--rule)}
.sec-head h2{font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:-.02em;text-transform:uppercase;color:var(--accent);line-height:1}

/* ---------- publication / list row ---------- */
.pub{display:grid;grid-template-columns:1fr auto;gap:30px;padding:26px 0;border-top:1px solid var(--hair);align-items:baseline}
.pub:last-child{border-bottom:1px solid var(--hair)}
.pt{font-size:21px;font-weight:600;letter-spacing:-.015em;line-height:1.3;color:var(--ink)}
a.pt:hover{text-decoration:underline;text-underline-offset:3px}
.pv{font-size:15.5px;font-weight:500;color:var(--muted);margin-top:6px}
.pmeta{margin-top:9px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.authors{font-size:14.5px;color:var(--muted)}
.py{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);white-space:nowrap;font-weight:500}
.tag{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);border:1.5px solid var(--ink);padding:3px 8px;white-space:nowrap}
.plinks{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px 18px}
.plinks a{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;text-transform:uppercase;color:var(--accent);text-decoration:underline;text-decoration-color:color-mix(in oklab,var(--accent) 40%,transparent);text-underline-offset:3px}
.plinks a:hover{text-decoration-color:var(--accent)}

/* ---------- feature block (book) — bordered, not a soft card ---------- */
.feature-block{border-top:2px solid var(--rule);padding:clamp(36px,5vw,54px) 0 clamp(38px,5vw,52px)}
.feature-block .label{color:var(--accent);font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.feature-block h2{font-weight:800;font-size:clamp(36px,6vw,60px);line-height:.96;letter-spacing:-.03em;margin:16px 0 10px;color:var(--ink)}
.feature-block .sub{font-size:clamp(18px,2.6vw,22px);font-weight:500;color:var(--ink-2)}
.feature-block p{color:var(--muted);font-size:17px;line-height:1.62;margin:22px 0 0;max-width:66ch}

/* ---------- buttons (square, inverting) ---------- */
.btn{display:inline-block;background:var(--ink);color:var(--paper);padding:13px 24px;font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;border:1.5px solid var(--ink)}
.btn:hover{background:transparent;color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}

/* ---------- prose ---------- */
.prose p{color:var(--muted);font-size:18px;line-height:1.64;margin-bottom:18px;max-width:62ch}
.prose p:last-child{margin-bottom:0}
.prose .em{color:var(--ink);font-weight:600}
.prose a{color:var(--accent);text-decoration:underline;text-decoration-color:color-mix(in oklab,var(--accent) 40%,transparent);text-underline-offset:3px;font-weight:500}
.prose a:hover{text-decoration-color:var(--accent)}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--paper);border-top:2px solid var(--rule);padding:52px 0 38px;margin-top:72px}
.frow{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}
footer .mono{color:var(--accent)}
.fcontact a{display:block;font-family:var(--mono);font-size:13px;letter-spacing:.02em;padding:4px 0;color:#c9c7bd}
.fcontact a:hover{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
.fnav{display:flex;flex-wrap:wrap;gap:8px 24px;max-width:420px;justify-content:flex-end}
.fnav a{font-family:var(--mono);font-size:12.5px;text-transform:uppercase;color:#9c998f;white-space:nowrap}
.fnav a:hover{color:var(--paper)}
.copy{margin-top:42px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#86837a;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:1000px){ :root{--pad:34px} }

/* collapse the nav to a menu button early enough that links never crowd or clip */
@media(max-width:940px){
  .navtoggle{display:flex}
  .navlinks{
    position:absolute;top:66px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:2px solid var(--rule);
    padding:8px var(--pad) 18px;
    clip-path:inset(0 0 100% 0);opacity:0;pointer-events:none;transition:.22s ease;
  }
  header.open .navlinks{clip-path:inset(0 0 0 0);opacity:1;pointer-events:auto}
  .navlinks a{padding:14px 0;font-size:15px;border-top:1px solid var(--hair)}
  .navlinks a:first-child{border-top:0}
  .navlinks a.active{text-decoration:none}
  .navlinks a.cv{border:1.5px solid var(--ink);padding:11px 16px;margin-top:12px;text-align:center}
}

@media(max-width:760px){
  :root{--pad:22px}
  body{font-size:16px}
  .pub{grid-template-columns:1fr;gap:8px}
  .pub .py{order:-1}
}