/*
╔═════════════════════════════════════════════╗
║  blog.css | POST PAGES ONLY   ᓚᘏᗢ           ║▒
║  Article typography, figures, code wells,   ║▒
║  captions, post metadata, hyphen bullets.   ║▒
╚═════════════════════════════════════════════╝▒
 ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
*/

/* ── article typography ──
   Rule 1: chrome stops at the panel. Below it there is nothing
   but type, measure and whitespace. ── */
article{ margin-top:24px; }
article h1{ margin-bottom:10px; }
article h2{ margin:26px 0 10px; }
article p{ margin-bottom:15px; }
/* direct children only: a metadata line or panel INSIDE the header
   panel must not push the panel's own padding around */
article > .m{ margin-bottom:20px; }
article > .panel{ margin-bottom:22px; }

/* ── subheadings. main.css resets h3 margin to 0 for the panel; restore it here,
      where h3 is a real document level and needs to sit off the paragraph above ── */
article h3{
  margin:22px 0 8px;
  font-family:var(--sans); font-size:16px; font-weight:600;
  letter-spacing:-.01em; color:var(--fg);
}

/* ── prose runs the full column, same width as the code wells, figures and
      tables, and is justified. Hyphenation is not optional at this measure:
      justify without it opens rivers. It needs lang="en", which every page
      sets. main.css caps p at --measure for the homepage; articles opt out. ── */
article p,
article ul,
article ol,
article blockquote,
article dl{ max-width:none; }

article p,
article li,
article blockquote{
  text-align:justify;
  text-justify:inter-word;
  -webkit-hyphens:auto;
          hyphens:auto;
  overflow-wrap:break-word;   /* long IOCs and URLs must not blow out the column */
}

/* Chrome stays ranged left: only prose is justified. */
article figcaption,
article .m,
article th,
article td,
article table caption,
article .codelabel{ text-align:left; hyphens:none; }

/* ── hyphen bullets hung in the gutter ── */
article ul{ list-style:none; padding:0; margin:0 0 15px 22px; }
article li{ position:relative; margin-bottom:6px; }
article ul li::before{ content:"-"; position:absolute; left:-18px; color:var(--acc); }

/* Ordered lists keep their numbers. The hyphen is a UL device: scoping the rule
   above to `article ul li` stops it colliding with the decimal marker. */
article ol{ margin:0 0 15px 22px; padding:0 0 0 1ch; }
article ol li{ padding-left:4px; }
article ol li::marker{ color:var(--acc); font-family:var(--mono); font-size:13px; }
article blockquote{ margin:0 0 15px; padding-left:14px; border-left:2px solid var(--acc-dim); color:var(--mute); }

/* ── tables. Wide ones scroll inside their own box so the PAGE never scrolls
      sideways: that is the container's job, not the body's. Header row is the
      mono chrome voice; the cells are prose. ── */
article .scroll{ overflow-x:auto; margin:0 0 18px; border:1px solid var(--r1); }
article table{
  border-collapse:collapse; width:100%; font-size:13px; line-height:1.55;
}
article th,
article td{
  padding:8px 12px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--r1);
}
article thead th{
  position:sticky; top:0; background:var(--well); color:var(--dim);
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  border-bottom:1px solid var(--r2);
}
article tbody tr:last-child td{ border-bottom:0; }
article td code{ white-space:nowrap; }
article table caption{
  caption-side:bottom; padding:8px 12px 0; text-align:left;
  font-family:var(--mono); font-size:10px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--dim);
}

/* ── figure with corner marks ── */
figure{ position:relative; margin:22px 0; padding:9px; }
figure .k{ position:absolute; width:11px; height:11px; border-color:var(--r3); border-style:solid; }
figure .k.tl{ top:0; left:0; border-width:1px 0 0 1px; }
figure .k.br{ bottom:0; right:0; border-width:0 1px 1px 0; }
figure img{ display:block; width:100%; height:auto; border:1px solid var(--r2); }
figcaption{
  margin-top:10px; color:var(--dim);
  font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase;
}
figcaption::before{ content:"> "; color:var(--acc); }

/* ── labelled code well: the tab keys into the border ── */
.codelabel{
  display:inline-block; margin-top:20px; padding:3px 9px;
  background:var(--well); border:1px solid var(--r2); border-bottom:0;
  color:var(--dim);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
}
.codelabel + pre{ margin-top:0; }
pre{
  margin:20px 0; padding:15px 17px; overflow-x:auto;
  background:var(--well); border:1px solid var(--r2);
  color:var(--body); font-family:var(--mono); font-size:12px; line-height:1.68;
}
pre code{ font:inherit; color:inherit; }
pre .cm{ color:var(--dim); }   /* comment */
pre .fn{ color:var(--acc); }   /* function */
:not(pre) > code{
  padding:.1em .34em; background:var(--well); border:1px solid var(--r1);
  color:var(--fg); font-family:var(--mono); font-size:.86em;
}