/* Blog styling.
   The palette is the landing page's and the wiki's, so all three read as one
   site. The layout is its own: a post is a piece of writing somebody reads
   start to finish, so the measure is narrower than the wiki's reference
   pages, the type is larger, and the serif carries the body rather than only
   the headings. */
:root{
  --ink:#16101a; --ink-2:#1f1725; --ink-3:#2b2033;
  --paper:#faf6f8; --paper-2:#f2e9ee;
  --blossom:#ffb7c5; --rose:#d81b60;

  --bg:var(--paper); --surface:#fff;
  --text:#221a27; --text-dim:#5f5167; --hair:rgba(34,26,39,.14);
  --accent:var(--rose); --accent-soft:rgba(216,27,96,.09);
  --code-bg:rgba(34,26,39,.06);
  --measure:66ch;
}
:root:not([data-theme="light"]){
  @media (prefers-color-scheme:dark){
    --bg:var(--ink); --surface:var(--ink-2);
    --text:#f4ecf1; --text-dim:#b9a7c0; --hair:rgba(255,255,255,.13);
    --accent:var(--blossom); --accent-soft:rgba(255,183,197,.11);
    --code-bg:rgba(255,255,255,.07);
  }
}
:root[data-theme="dark"]{
  --bg:var(--ink); --surface:var(--ink-2);
  --text:#f4ecf1; --text-dim:#b9a7c0; --hair:rgba(255,255,255,.13);
  --accent:var(--blossom); --accent-soft:rgba(255,183,197,.11);
  --code-bg:rgba(255,255,255,.07);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:Karla,ui-sans-serif,system-ui,sans-serif;
  font-size:1.05rem; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent)}

.skip{position:absolute; left:-9999px}
.skip:focus{left:1rem; top:1rem; background:var(--accent); color:var(--bg); padding:.6rem 1rem; border-radius:8px; z-index:10}

/* The same bar as the landing page, so moving between them is not a jolt. */
.topbar{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(20px) saturate(1.3);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  border-bottom:1px solid var(--hair);
}
.topbar .bar{
  max-width:980px; margin:0 auto;
  padding:.7rem clamp(1.1rem,4vw,2rem);
  display:flex; align-items:center; gap:.8rem;
}
.topbar .brand{
  display:flex; align-items:center; gap:.6rem;
  font-weight:600; color:var(--text); text-decoration:none; font-size:1.2rem;
}
.topbar .brand svg{width:32px; height:32px; display:block}
.topbar .crumb{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-dim); padding-top:.2rem;
}
.topbar nav{margin-left:auto; display:flex; gap:.3rem}
.topbar nav a{
  padding:.4rem .75rem; border-radius:999px; font-size:1rem;
  color:var(--text); text-decoration:none; border:1px solid transparent;
}
.topbar nav a:hover{background:var(--accent-soft); border-color:var(--hair)}

.wrap{max-width:980px; margin:0 auto; padding:0 clamp(1.1rem,4vw,2rem)}

/* ---- index ---- */
.masthead{padding:clamp(3rem,7vw,5rem) 0 1.5rem}
.masthead h1{
  font-family:Newsreader,Georgia,serif; font-weight:300;
  font-size:clamp(2.6rem,6vw,4rem); line-height:1.05; letter-spacing:-.02em;
  margin:0 0 .6rem;
}
.masthead p{color:var(--text-dim); max-width:52ch; margin:0; font-size:1.08rem}

.posts{list-style:none; padding:0; margin:2rem 0 5rem; display:grid; gap:1rem}
.post-card{
  display:block; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--hair);
  border-radius:16px; padding:1.5rem 1.6rem;
  transition:border-color .14s ease, transform .14s ease;
}
.post-card:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent); transform:translateY(-2px)}
.post-card .meta{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-dim); margin-bottom:.55rem;
}
.tag{
  background:var(--accent-soft); color:var(--accent);
  border-radius:999px; padding:.15rem .6rem; letter-spacing:.08em;
}
.post-card h2{
  font-family:Newsreader,Georgia,serif; font-weight:400;
  font-size:clamp(1.45rem,3vw,1.9rem); line-height:1.15; margin:0 0 .5rem;
  letter-spacing:-.01em;
}
.post-card p{margin:0; color:var(--text-dim)}

/* ---- a post ---- */
/* Centred, not left-aligned in the wrap. A measure this narrow pinned to the
   left of a 980px column leaves a column of nothing beside every paragraph. */
.article{padding:clamp(2.5rem,6vw,4rem) 0 4rem; max-width:var(--measure); margin:0 auto}
.article .meta{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-dim); margin-bottom:.9rem;
}
.article h1{
  font-family:Newsreader,Georgia,serif; font-weight:300;
  font-size:clamp(2.2rem,5.2vw,3.3rem); line-height:1.08; letter-spacing:-.02em;
  margin:0 0 1rem;
}
.article .standfirst{
  font-family:Newsreader,Georgia,serif; font-size:1.3rem; line-height:1.5;
  color:var(--text-dim); font-style:italic; margin:0 0 2.5rem;
}
.article h2{
  font-family:Newsreader,Georgia,serif; font-weight:400;
  font-size:1.7rem; line-height:1.2; margin:2.8rem 0 .8rem; letter-spacing:-.01em;
}
.article h3{font-size:1.08rem; font-weight:600; margin:2rem 0 .5rem}
.article p{margin:0 0 1.15rem}
.article ul,.article ol{margin:0 0 1.15rem; padding-left:1.3rem}
.article li{margin:.3rem 0}
.article strong{font-weight:600; color:var(--text)}
.article code{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.87em;
  background:var(--code-bg); padding:.12em .4em; border-radius:5px;
}
.article pre{
  background:var(--code-bg); border:1px solid var(--hair); border-radius:12px;
  padding:1.1rem 1.2rem; overflow-x:auto; margin:0 0 1.4rem;
}
.article pre code{background:none; padding:0; font-size:.84rem; line-height:1.65}
.article img{max-width:100%; height:auto; border-radius:12px; border:1px solid var(--hair); display:block}
.article figure{margin:1.8rem 0}
.article figcaption{font-size:.86rem; color:var(--text-dim); margin-top:.6rem; text-align:center}
.article blockquote{
  margin:1.6rem 0; padding:.2rem 0 .2rem 1.2rem;
  border-left:3px solid color-mix(in srgb,var(--accent) 50%,transparent);
  color:var(--text-dim); font-style:italic;
}
.article hr{border:0; border-top:1px solid var(--hair); margin:2.5rem 0}
.callout{
  background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
  border-radius:12px; padding:1rem 1.2rem; margin:1.6rem 0;
}
.callout p:last-child{margin-bottom:0}

.postnav{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  border-top:1px solid var(--hair); margin-top:3rem; padding-top:1.5rem;
}
.postnav a{text-decoration:none; font-size:.95rem}

.foot{
  border-top:1px solid var(--hair); padding:2.5rem 0 3.5rem;
  color:var(--text-dim); font-size:.9rem;
}
.foot a{color:var(--accent)}