/* ============================================================
   pm-professor.com  ·  one stylesheet, no classes in the markup
   Everything is selected by element type, attribute or position,
   so the HTML carries content only. Retune the site from :root.

   System monospace only: nothing is fetched from a third-party
   domain, the page paints instantly from anywhere including
   mainland China, and fixed-width characters are what keep the
   dates in each list aligned down the right-hand edge.
   ============================================================ */

:root{
  --bg:#fdfdfc; --ink:#1a1a19; --body:#33332f; --dim:#b5b5ae;
  --rule:#e4e3df; --link:#2f5d8c; --quote:#6f6f6a;
  --font:ui-monospace,"SF Mono",SFMono-Regular,Menlo,
    "Cascadia Mono",Consolas,"Liberation Mono","DejaVu Sans Mono",monospace;
  --size:14px; --measure:52.8rem;
  --gap-page:40px; --gap-row:9px; --pad:56px 24px 72px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:var(--size);
  line-height:1.7; text-wrap:pretty;
}

/* one size everywhere; hierarchy comes from weight and colour only */
h1,h2,h3{font-size:inherit; font-weight:600; margin:0}
p{margin:0}
a{color:var(--link); text-decoration:none; border-bottom:1px solid rgba(47,93,140,.28)}
a:hover{color:var(--ink); border-bottom-color:var(--ink)}
a:focus-visible{outline:2px solid var(--link); outline-offset:3px; border-bottom-color:transparent}
::selection{background:#e8eef5}

/* every ~/path on the site: written in data-path, drawn by CSS */
[data-path]::after{
  content:attr(data-path); font-weight:400;
  color:var(--dim); white-space:nowrap;
}

/* ---- page frame ------------------------------------------- */
main{
  max-width:var(--measure); margin:0 auto; padding:var(--pad);
  display:flex; flex-direction:column; gap:var(--gap-page);
}
main > p{color:var(--body)}                      /* page lede */

header{display:flex; flex-direction:column; gap:10px}
header > p{display:flex; align-items:baseline; flex-wrap:wrap; gap:10px}
header > p > a{color:var(--ink); font-weight:600; border:0}
nav{display:flex; flex-wrap:wrap; gap:4px 16px}

footer{
  border-top:1px solid var(--rule); padding-top:14px; color:var(--dim);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px;
}
footer a{color:var(--dim); border-bottom-color:rgba(181,181,174,.5)}

/* ---- sections --------------------------------------------- */
section{display:flex; flex-direction:column; gap:12px}
section > h2{
  font-weight:500; color:var(--body);
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  border-bottom:1px solid var(--rule); padding-bottom:5px;
}
section > a{align-self:flex-start}               /* "all notes ->" */

/* one row = one line, marker pinned right */
section > ul{
  margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:var(--gap-row);
}
section > ul > li{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  column-gap:12px; align-items:baseline; color:var(--body);
}
section > ul > li > *{min-width:0; justify-self:start}
section > ul > li > span{color:var(--dim); justify-self:end}

/* ---- article ---------------------------------------------- */
hgroup{display:flex; flex-direction:column; gap:10px}
hgroup > p{color:var(--dim)}
article{display:flex; flex-direction:column; gap:20px}
article h2{margin-top:16px}
/* h3 sits one level under h2. Same size as everything else, so the step
   down is colour, not weight: h2 is ink, h3 is the quote grey. The
   negative bottom margin eats part of the flex gap so the heading binds
   to the text below it rather than floating between two blocks. */
article h3{color:var(--quote); margin-top:10px; margin-bottom:-8px}
/* Lists sit flush with the prose. The padding reserves a slot the exact
   width of the marker, and the negative text-indent pulls the first
   line back into it, so numbers start at the text edge and any wrapped
   line aligns under the text rather than under the number. Change
   --marker to 4ch for a list that runs past nine items. */
article ol,article ul{
  --marker:3ch;
  margin:0; padding-left:var(--marker); list-style-position:inside;
}
article li{text-indent:calc(var(--marker) * -1)}
article li + li{margin-top:6px}
blockquote{
  margin:0; padding:4px 0 4px 18px; border-left:2px solid var(--rule);
  color:var(--quote); font-style:italic;
}

/* ---- narrow screens --------------------------------------- */
/* A two-column row breaks down on a phone: the title wraps to two or
   three lines while the marker stays pinned beside the first one.
   Below this width the row stops being a grid and the marker runs on
   inline after the title, so it wraps with the text instead of
   floating away from it. */
@media (max-width:34rem){
  :root{--gap-page:32px; --gap-row:12px; --pad:40px 22px 56px}
  section > ul > li{display:block}
  section > ul > li > span::before{content:" \00b7 "}
  nav{gap:2px 14px}
}