/* sudakov.site — "rendered markdown source" aesthetic.
   Everything is JetBrains Mono on light gray. Markdown syntax stays
   visible: # / ## heading markers, - and * list bullets, and (on the
   home page) literal [text](url) links. */

:root{
  color-scheme:light;
  --bg:        #f4f4f4;
  --panel:     #ebebeb;
  --ink:       #141414;
  --muted:     #8a8a8a;
  --rule:      #d8d8d8;
  --chip:      rgba(0,0,0,.055);
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
}

/* dark theme: follows device preference (Pierre-style) */
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --bg:        #111111;
    --panel:     #1c1c1c;
    --ink:       #e8e8e8;
    --muted:     #7d7d7d;
    --rule:      #333333;
    --chip:      rgba(255,255,255,.09);
  }
  body::before{ /* light photocopy noise on dark */
    mix-blend-mode:screen;
    opacity:.05;
  }
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  font-size:14px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

/* photocopy grain; kept above content so nothing punches holes in it */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  opacity:.035;
  mix-blend-mode:multiply;
  z-index:1000;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

::selection{ background:var(--ink); color:var(--bg); }

a{ color:var(--ink); text-decoration:none; }
/* Pierre-style hover: solid invert highlight on every link */
a:hover{
  background:var(--ink);
  color:var(--bg);
}
a:focus-visible{ outline:1px solid var(--ink); outline-offset:2px; }

/* ---------- identity block (both pages) ---------- */
.ident{
  margin:0;
  font-size:13px;
  letter-spacing:.05em;
  line-height:1.75;
  text-transform:uppercase;
}
.cursor{
  display:inline-block;
  width:.6em; height:1em;
  background:var(--ink);
  margin-left:.25em;
  transform:translateY(.15em);
  animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{ 50%, 100%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){
  .cursor{ animation:none; }
}

.sig{
  margin:0 0 44px;
  font-size:13px;
}

/* ---------- section headings: visible # markers ---------- */
h2{
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
  margin:0 0 14px;
}
h2 .hash{ margin-right:.6em; }

section{ margin-bottom:44px; }
.prose p{ margin:0 0 16px; max-width:58ch; }
.empty{ color:var(--muted); margin:0; }

/* ---------- home page ---------- */
.home{
  max-width:660px;
  padding:40px 24px 64px;
  padding-left:clamp(28px, 7vw, 140px);
}
.home header{ margin-bottom:96px; }

/* home links render as literal markdown: [text](url) */
.home .prose a::before{ content:"["; }
.home .prose a::after{ content:"](" attr(href) ")"; }

/* markdown-style dash lists */
ul.linklist{
  list-style:none;
  margin:0;
  padding:0;
}
ul.linklist li{
  position:relative;
  padding-left:1.4em;
  margin-bottom:4px;
}
ul.linklist li::before{
  content:"-";
  position:absolute;
  left:0;
}

/* ---------- article page ---------- */
.page{
  max-width:1320px;
  margin:0 auto;
  padding:40px clamp(20px, 4vw, 56px) 64px;
}
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:32px;
  margin-bottom:48px;
}
nav.top{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  font-size:13px;
  letter-spacing:.04em;
}
nav.top a{
  /* no color here: only a{} may set link color, or it beats a:hover's
     invert and text stays dark on the black chip */
  padding:0 .2em;
}

/* article column + right-hand widget rail */
.layout{
  display:grid;
  grid-template-columns:minmax(0, 64ch) minmax(0, 1fr);
  gap:clamp(48px, 6vw, 120px);
  align-items:start;
}

.rail-inner{
  position:sticky;
  top:48px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.slot{
  border:1px dashed var(--rule);
  color:var(--muted);
  min-height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
}

/* widget: media + caption in the rail (solid rule, unlike dashed slots) */
.widget{
  border:1px solid var(--rule);
  padding:8px;
  font-size:11px;
}
.widget img{
  display:block;
  width:100%;
  height:auto;
  image-rendering:pixelated;
}
.widget figcaption{
  margin-top:6px;
  color:var(--muted);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-align:center;
}

/* article body: plain underlined links */
.article a{ text-decoration:underline; }
.article a:hover{ text-decoration:none; }

.article .title{
  font-size:15px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  margin:0 0 8px;
}
.article .title .hash{ margin-right:.6em; }
.article .meta{
  color:var(--muted);
  font-size:12.5px;
  margin:0 0 36px;
}
.article p{ margin:0 0 16px; max-width:58ch; }

.article h2{
  font-size:14px;
  text-transform:uppercase;
  margin:36px 0 12px;
}
.article h2::before{ content:"#"; margin-right:.6em; }
.article h3{
  font-size:14px;
  text-transform:uppercase;
  margin:28px 0 10px;
}
.article h3::before{ content:"##"; margin-right:.6em; }

.article ul{
  list-style:none;
  padding-left:1.2em;
  margin:0 0 18px;
}
.article ul li{ position:relative; margin-bottom:6px; }
.article ul li::before{
  content:"*";
  position:absolute;
  left:-1.2em;
}
.article ol{ padding-left:1.6em; margin:0 0 18px; }

.article code{
  background:var(--chip);
  padding:.05em .3em;
  border-radius:2px;
  font-size:.92em;
}
.article pre{
  background:var(--panel);
  border:1px solid var(--rule);
  padding:16px 18px;
  overflow-x:auto;
  font-size:13px;
  line-height:1.75;
  margin:0 0 18px;
}
.article pre code{
  background:none;
  padding:0;
  font-size:inherit;
}
pre.chroma{ background:var(--panel) !important; }

.article blockquote{
  margin:0 0 18px;
  padding-left:18px;
  border-left:1px solid var(--ink);
  color:var(--muted);
}
.article hr{
  border:none;
  margin:28px 0;
}
.article hr::before{ content:"---"; }
.article img{ max-width:100%; height:auto; }

/* ---------- footer (both pages) ---------- */
footer{
  margin-top:64px;
  font-size:13px;
}
footer .foot-links{
  margin:0 0 16px;
}
footer .foot-links a{ text-decoration:underline; }
footer .foot-links a:hover{ text-decoration:none; }
footer .copy{
  margin:0;
  color:var(--ink);
}

/* ---------- small screens ---------- */
@media (max-width:900px){
  .layout{ grid-template-columns:1fr; }
  .rail-inner{ position:static; }
  .home{ padding-left:24px; }
}