/* ── Sveska — the blog skin ──────────────────────────────────────────
   Squared paper, a red margin rule, dates set in the margin. The grid is
   deliberately low-contrast: it has to sit under long prose without
   fighting it. */

:root{
  --paper:#F3F2EA;
  --grid:#D3DFEA;
  --margin-rule:#D0574B;
  --ink:#1D2733;
  --body-ink:#39434F;
  --muted:#6D7B8A;
  --slip:#FFFEF8;
  --slip-edge:#D8D5C4;
  --link:#1F4FA8;
  --link-rule:#BFD0EA;
  --code-bg:#E9E8DE;

  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --chip:#EAE9E0;
  --chip-edge:#D6D4C7;

  --grid-size:24px;
  --margin-w:140px;   /* left margin column — wide enough that "10 · VIII · 2026" holds one line */
}
/* Light is the default; dark only when the visitor picks it with the toggle.
   The OS preference is deliberately not followed — this site opens white. */
:root[data-theme="dark"]{
  --paper:#14171B; --grid:#222D38; --margin-rule:#B4493E; --ink:#DEE5EC;
  --body-ink:#C3CBD5; --muted:#8D9AA8; --slip:#1B1F25; --slip-edge:#2C333B;
  --link:#8DB2EA; --link-rule:#31496B; --code-bg:#1D2229;
  --chip:#1C2026; --chip-edge:#2B3138;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  color:var(--body-ink);
  font-family:var(--serif);
  font-size:19px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:var(--grid-size) var(--grid-size);
  background-position:-1px -1px;
}
a{color:var(--link);text-decoration:none;border-bottom:1px solid var(--link-rule)}
a:hover{border-bottom-color:var(--link)}
:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:2px}

/* theme toggle — matches the home page control exactly */
.theme-toggle{
  position:fixed;top:14px;right:16px;z-index:10;
  width:38px;height:38px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--chip);border:1px solid var(--chip-edge);border-radius:3px;
  color:var(--muted);cursor:pointer;
  transition:color .15s,border-color .15s;
}
.theme-toggle:hover{color:var(--ink);border-color:var(--muted)}
.ic-ui{width:17px;height:17px;display:block}
.theme-toggle .ic-ui:nth-child(2){display:none}
:root[data-theme="dark"] .theme-toggle .ic-ui:nth-child(1){display:none}
:root[data-theme="dark"] .theme-toggle .ic-ui:nth-child(2){display:block}

/* the sheet: content sits to the right of the red rule */
.sheet{
  position:relative;
  max-width:52rem;
  margin:0 auto;
  padding:clamp(32px,6vw,64px) clamp(20px,4vw,40px) 80px var(--margin-w);
}
.sheet::before{
  content:"";position:absolute;top:0;bottom:0;
  left:calc(var(--margin-w) - 26px);width:2px;
  background:var(--margin-rule);opacity:.6;
}

/* masthead */
.nb-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  margin:0 0 40px;padding-bottom:13px;border-bottom:2px solid var(--ink);
}
.nb-head h1{font-size:clamp(22px,4vw,30px);font-weight:600;letter-spacing:-.01em;margin:0;color:var(--ink)}
.nb-head h1 a{color:inherit;border-bottom:0}
.nb-head h1 a:hover{border-bottom:1px solid var(--ink)}
.nb-head .nb-sub{margin:4px 0 0;font-size:14px;font-style:italic;color:var(--muted)}
.nb-head .nb-meta{
  margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);text-align:right;line-height:1.8;flex:none;
}

/* the date stamp that hangs in the margin, left of the red rule */
.stamp{
  position:absolute;left:calc(-1 * var(--margin-w));
  width:calc(var(--margin-w) - 38px);
  text-align:right;font-family:var(--mono);font-size:9.5px;line-height:1.6;
  color:var(--margin-rule);letter-spacing:.04em;padding-top:7px;
}

/* index listing */
.entries{margin:0;padding:0;list-style:none}
.entry{position:relative;margin:0 0 34px;padding:0}
.entry:last-child{margin-bottom:0}
.entry h2{font-size:20px;font-weight:600;letter-spacing:-.01em;margin:0 0 5px;line-height:1.25}
.entry h2 a{color:var(--ink);border-bottom:0}
.entry h2 a:hover{border-bottom:1px solid var(--ink)}
.entry p{margin:0;font-size:15.5px;color:var(--body-ink);max-width:58ch}

/* the "(in Serbian)" marker — part of the link text, on purpose */
.lang{font-size:14px;font-style:italic;color:var(--muted);white-space:nowrap;font-weight:400}

/* a single post */
.post{position:relative}
.post h1{
  font-size:clamp(25px,4.6vw,34px);font-weight:600;letter-spacing:-.015em;
  line-height:1.18;margin:0 0 24px;color:var(--ink);text-wrap:balance;max-width:24ch;
}
.post-note,.post-alt{
  margin:-14px 0 26px;font-size:15px;font-style:italic;color:var(--muted);
}
.post-alt a{font-style:normal}
.post-body{max-width:60ch}
.post-body h2{font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:32px 0 9px}
.post-body h3{font-size:16.5px;font-weight:600;color:var(--ink);margin:26px 0 7px}
.post-body p{margin:0 0 17px}
.post-body ul,.post-body ol{margin:0 0 17px;padding-left:22px}
.post-body li{margin:0 0 6px}
.post-body blockquote{
  margin:20px 0;padding:2px 0 2px 18px;
  border-left:2px solid var(--margin-rule);color:var(--muted);font-style:italic;
}
.post-body blockquote p:last-child{margin-bottom:0}
.post-body hr{border:0;border-top:1px solid var(--slip-edge);margin:28px 0}
.post-body img{max-width:100%;height:auto;display:block;border:1px solid var(--slip-edge);background:var(--slip)}
.post-body code{
  font-family:var(--mono);font-size:.83em;background:var(--code-bg);
  padding:1px 5px;border-radius:3px;
}
.post-body pre{
  background:var(--slip);border:1px solid var(--slip-edge);
  padding:14px 16px;overflow-x:auto;margin:0 0 20px;line-height:1.6;
}
.post-body pre code{background:none;padding:0;font-size:12.5px}
.post-body table{border-collapse:collapse;width:100%;font-size:14.5px}
.post-body .table-wrap{overflow-x:auto;margin:0 0 20px}

/* footer nav */
.nb-foot{
  margin:52px 0 0;padding-top:18px;border-top:1px solid var(--slip-edge);
  font-family:var(--mono);font-size:11px;line-height:2;color:var(--muted);
}
.nb-foot a{border-bottom-color:transparent}
.nb-foot a:hover{border-bottom-color:var(--link)}
.nb-foot .sep{opacity:.5;padding:0 8px}

@media (max-width:680px){
  :root{--margin-w:20px}
  body{font-size:16.5px}
  .sheet{padding-left:20px;padding-right:20px}
  .sheet::before{display:none}
  .stamp{position:static;width:auto;text-align:left;padding-top:0;margin-bottom:4px}
  .nb-head{flex-direction:column;align-items:flex-start;gap:10px}
  .nb-head .nb-meta{text-align:left}
}