/* dzag / notes — warm paper · monospace · one accent · hairlines · no shadows.
   Every colour is light-dark(light, dark); edit tokens here and the whole site follows. */

:root{
  color-scheme:light dark;
  --paper:      light-dark(#efe8d9, #16140e);
  --paper-2:    light-dark(#e9e1cf, #1c1a12);
  --ink:        light-dark(#1d1913, #e9e2d1);
  --muted:      light-dark(#8a8474, #8f8877);
  --accent:     light-dark(#c23b2e, #d4463a);
  --accent-soft:light-dark(rgba(194,59,46,.10), rgba(212,70,58,.14));
  --sel:        light-dark(rgba(194,59,46,.18), rgba(212,70,58,.24));
  --line:       light-dark(rgba(29,25,19,.18), rgba(233,226,209,.20));
  --line-soft:  light-dark(rgba(29,25,19,.10), rgba(233,226,209,.10));

  --measure:74ch;
  --mono-body:'DM Mono','SF Mono',ui-monospace,monospace;
  --mono-ui:'IBM Plex Mono',ui-monospace,monospace;
}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}

/* ---- base ---- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 64px)}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--mono-body); font-size:16px; line-height:1.85;
  padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
  background-image:radial-gradient(var(--line-soft) .5px,transparent .5px);
  background-size:7px 7px;
}
::selection{background:var(--sel)}
/* ch depends on the element's font — keep .wrap on body type, style its children */
.wrap{width:min(var(--measure),92vw); margin:0 auto}

#progress{position:fixed; top:0; left:0; z-index:50; height:2px; width:0; background:var(--accent); transition:width .08s linear}

/* ---- header ---- */
header{position:sticky; top:0; z-index:40; padding-top:env(safe-area-inset-top,0px);
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--paper) 88%,transparent); backdrop-filter:blur(6px)}
.bar{display:flex; align-items:center; gap:1ch; padding:.7rem 0; font-family:var(--mono-ui); font-size:13.5px; white-space:nowrap}
.brand{display:flex; align-items:center; gap:.8ch; color:var(--ink); border:none; font-weight:600; letter-spacing:.02em}
.brand .mark{width:12px; height:12px; background:var(--accent); transform:rotate(45deg)}
.bar nav{margin-left:auto; display:flex; align-items:center; gap:2.2ch}
.bar nav a{color:var(--muted); border:none}
.bar nav a:hover,.bar nav a[aria-current="page"]{color:var(--accent)}
.themebtn{background:none; border:1px solid var(--line); color:var(--muted); font:inherit; font-size:12px; padding:.15rem .7ch; cursor:pointer}
.themebtn:hover{color:var(--accent); border-color:var(--accent)}

/* ---- layout ---- */
main{padding:2.6rem 0 5rem}
.prompt{font-family:var(--mono-ui); font-size:13.5px; color:var(--muted); margin-bottom:2.4rem}
.prompt .p{color:var(--accent)}
.caret{display:inline-block; width:.62ch; height:1.05em; margin-left:.3ch; vertical-align:-.15em; background:var(--ink); animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.back{display:inline-block; margin-bottom:2.2rem; color:var(--muted); border:none; font-family:var(--mono-ui); font-size:13px}
.back:hover{color:var(--accent)}
.more{margin-top:2.4rem}

/* ---- typography ---- */
h1{font-family:var(--mono-ui); font-weight:600; font-size:1.72rem; line-height:1.28; letter-spacing:-.01em; margin:.2rem 0 .9rem}
h2{font-family:var(--mono-ui); font-weight:500; font-size:1.12rem; margin:2.8rem 0 1rem}
h2::before{content:"## "; color:var(--accent)}
p{margin:1.1rem 0}
a{color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent-soft)}
a:hover{border-bottom-color:var(--accent)}
strong{font-weight:500}
em{color:var(--muted)}
.meta{color:var(--muted); font-size:13px; margin-bottom:2.6rem}
.meta .dot{color:var(--accent); padding:0 .5ch}

/* ---- post lists ---- */
.list{list-style:none; margin:0; padding:0}
.list li{border-top:1px solid var(--line); padding:1.1rem 0}
.list li:last-child{border-bottom:1px solid var(--line)}
.row{display:flex; gap:2ch; align-items:baseline}
.row time{flex:none; min-width:11ch; font-family:var(--mono-ui); font-size:13px; color:var(--muted)}
.row .t{font-size:1.02rem; border:none}
.row .tg{margin-top:.2rem; font-size:12.5px; color:var(--muted)}
.year{font-family:var(--mono-ui); color:var(--accent); font-size:13px; margin:2.4rem 0 .4rem}

/* ---- article blocks ---- */
.card{border:1px solid var(--line); background:var(--paper-2); padding:1.1rem 1.3rem; margin:2rem 0; font-size:14.5px}
.card .tag{display:block; margin-bottom:.5rem; font-family:var(--mono-ui); font-size:12px; color:var(--accent)}
.card p{margin:0}
.formula{border:1px solid var(--line); border-left:2px solid var(--accent); padding:1.3rem 1rem; margin:2rem 0; text-align:center; font-family:var(--mono-ui); font-size:1.15rem; letter-spacing:.02em}
.formula sub,.formula sup{font-size:.66em}
.formula .cap{display:block; margin-top:.8rem; font-size:11.5px; color:var(--muted); letter-spacing:0}
figure{margin:2.6rem 0; text-align:center}
.plate{border:1px solid var(--line); padding:2rem 1rem; background:var(--paper-2)}
.plate svg{width:130px; height:auto; color:var(--ink)}
.plate .accent{stroke:var(--accent)}
figcaption{margin-top:.9rem; font-size:11.5px; color:var(--muted)}
figcaption p{margin:0}
figcaption strong{color:var(--accent); font-weight:400}
table{width:100%; border-collapse:collapse; margin:2rem 0; font-size:14px}
th,td{border:1px solid var(--line); padding:.5rem .8ch; text-align:left}
th{font-family:var(--mono-ui); font-weight:500}
blockquote{border-left:2px solid var(--accent); margin:2rem 0; padding:.2rem 0 .2rem 1.4ch; color:var(--muted)}

/* ---- code ---- */
pre{border:1px solid var(--line); background:var(--paper-2); padding:1.1rem 1.2rem; overflow-x:auto; margin:2rem 0; font-size:13.5px; line-height:1.7}
code{font-family:var(--mono-body)}
:not(pre)>code{background:var(--accent-soft); padding:.05em .4ch; font-size:.92em}
.token.keyword{color:var(--accent)}
.token.comment{color:var(--muted)}
.token.number,.token.string{opacity:.78}

/* ---- footnotes & tags ---- */
.fn{border-top:1px solid var(--line); margin-top:3.4rem; padding:1.2rem 0 0 3ch; font-size:12.5px; color:var(--muted); line-height:1.7}
.fn li{margin:.5rem 0}
.fn p{margin:0}
.fn a,sup a{border:none}
.tags{margin-top:2.6rem; font-family:var(--mono-ui); font-size:13px}
.tags a{color:var(--muted); border:none; margin-right:1.6ch}
.tags a::before{content:"#"; color:var(--accent)}
.tags a:hover{color:var(--accent)}

/* ---- 404 ---- */
.center{min-height:52vh; display:flex; flex-direction:column; justify-content:center}
.big{font-family:var(--mono-ui); font-size:3.4rem; font-weight:600; line-height:1; margin:0 0 1rem}
.big .accent{color:var(--accent)}

/* ---- footer ---- */
footer{border-top:1px solid var(--line); padding:1.6rem 0 3rem}
footer .wrap{display:flex; justify-content:space-between}
footer .wrap>*{font-family:var(--mono-ui); font-size:12.5px; color:var(--muted); border:none}
footer a:hover{color:var(--accent)}

/* ---- responsive ---- */
@media (max-width:560px){
  body{font-size:15px}
  h1{font-size:1.45rem}
  .big{font-size:2.6rem}
  .row{flex-direction:column; gap:.15rem}
  .row time{min-width:0}
  .bar{font-size:12.5px}
  .bar nav{gap:1.2ch}
}
@media (prefers-reduced-motion:reduce){ .caret{animation:none} #progress{transition:none} }