*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --pink:#C9538C; --plum:#5C1F3B; --plum-dark:#3A1025; --blush:#F5D6E8; --blush-light:#FAEAF3;
  --ink:#1A0A12; --muted:#7A5068; --rule:rgba(92,31,59,0.18);
  --mono:'Roboto Mono',monospace; --body:'Roboto',sans-serif; --display:'Playfair Display',serif;
  --title:'Fraunces',Georgia,serif;
}
body { font-family:var(--body); background:#fff; color:var(--ink); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; }

header { background:var(--plum-dark); padding:1rem 2rem; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; border-bottom:2px solid var(--pink); }
.wordmark { font-family:var(--mono); font-size:0.85rem; font-weight:600; color:var(--pink); letter-spacing:0.04em; text-decoration:none; }
.wordmark span { color:#fff; opacity:0.5; }
nav { display:flex; gap:1.75rem; align-items:center; }
nav a { font-family:var(--mono); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; color:rgba(255,255,255,0.55); text-decoration:none; }
nav a:hover { color:var(--pink); }
nav a.cta { background:var(--pink); color:#fff; padding:0.35rem 0.85rem; border-radius:2px; }
nav a.cta:hover { background:var(--plum); }

/* Base: no browser blue anywhere. Components below set their own color
   and override this by specificity. */
a { color:var(--pink); }
a:focus-visible, summary:focus-visible { outline:2px solid var(--pink); outline-offset:3px; border-radius:1px; }

.post { max-width:720px; margin:0 auto; padding:3.5rem 1.25rem 4rem; }
.post-meta, .eyebrow { font-family:var(--mono); font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--pink); margin-bottom:0.9rem; }
.post-head h1 { font-family:var(--title); font-style:italic; font-weight:700; font-size:clamp(2.1rem,5.6vw,3.2rem); line-height:1.15; letter-spacing:-0.01em; color:var(--plum); margin-bottom:1.5rem; }
/* skull rating: how much the thing hurt, 1–5. CSS owns the glyph (a masked
   box), so a post only needs <i class="on"></i> x5 and no inline SVG. */
.post-skulls { display:flex; align-items:center; gap:3px; margin:-0.6rem 0 1.6rem; }
.post-skulls i { display:block; width:16px; height:16px; background:rgba(92,31,59,0.16);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M12 2C7.1 2 3.5 5.6 3.5 10.2c0 2.5 1.1 4.5 2.9 5.9V19c0 .9.7 1.6 1.6 1.6h.9v-2h1.8v2h2.6v-2h1.8v2h.9c.9 0 1.6-.7 1.6-1.6v-2.9c1.8-1.4 2.9-3.4 2.9-5.9C20.5 5.6 16.9 2 12 2zM8.6 8.6a2.3 2.3 0 1 1 0 4.6 2.3 2.3 0 0 1 0-4.6zm6.8 0a2.3 2.3 0 1 1 0 4.6 2.3 2.3 0 0 1 0-4.6zM12 13.1l1.4 2.4h-2.8z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M12 2C7.1 2 3.5 5.6 3.5 10.2c0 2.5 1.1 4.5 2.9 5.9V19c0 .9.7 1.6 1.6 1.6h.9v-2h1.8v2h2.6v-2h1.8v2h.9c.9 0 1.6-.7 1.6-1.6v-2.9c1.8-1.4 2.9-3.4 2.9-5.9C20.5 5.6 16.9 2 12 2zM8.6 8.6a2.3 2.3 0 1 1 0 4.6 2.3 2.3 0 0 1 0-4.6zm6.8 0a2.3 2.3 0 1 1 0 4.6 2.3 2.3 0 0 1 0-4.6zM12 13.1l1.4 2.4h-2.8z'/></svg>") center/contain no-repeat; }
.post-skulls i.on { background:var(--pink); }
.post-skulls .skull-label { font-family:var(--mono); font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-left:0.6rem; }

.hero-img { margin:0 0 2.5rem; }
.hero-img img { width:100%; height:auto; display:block; border:1px solid var(--rule); border-radius:12px; }
/* Post image tucked into a top corner with the text wrapping around it.
   Alternate the class post to post: hero-img--left, then --right, and so on. */
.hero-img--left, .hero-img--right { width:44%; margin:0.35rem 0 0.9rem; }
.hero-img--left  { float:left;  margin-right:1.75rem; }
.hero-img--right { float:right; margin-left:1.75rem; }
.post::after { content:""; display:block; clear:both; }
/* conversation strips sit beside the float instead of running under it */
.post-body .say { overflow:hidden; }
@media (max-width:640px){ .hero-img--left, .hero-img--right { float:none; width:100%; margin:0 0 1.75rem; } }

.post-body h2 { clear:both; font-family:var(--title); font-style:italic; font-weight:600; font-size:1.5rem; color:var(--plum); margin:2.5rem 0 0.9rem; line-height:1.3; }
.post-body p { margin-bottom:1rem; }
.post-body p.eyebrow { margin-bottom:1.5rem; }
.post-body code { font-family:var(--mono); font-size:0.85em; background:var(--blush-light); color:var(--plum); padding:0.1em 0.35em; border-radius:2px; }
/* prose links inside a post */
.post-body a { color:var(--plum); font-weight:700; text-decoration:underline; text-decoration-color:var(--pink); text-decoration-thickness:1px; text-underline-offset:0.18em; transition:color 0.15s; }
.post-body a:hover { color:var(--pink); }
.post-body cite { font-style:italic; }
.post-body pre { background:var(--plum-dark); color:#fff; padding:1.1rem 1.25rem; border-left:3px solid var(--pink); margin:1.25rem 0 1.25rem; overflow-x:auto; }
.post-body pre code { background:none; color:inherit; padding:0; font-size:0.9rem; line-height:1.6; }

/* Conversation transcript: one thin rule down the left, no fills; the two
   voices differ by text colour (Ernie ink, Ed plum) and the small name label */
.post-body .say { margin:0; padding:0.7rem 1rem; font-size:0.9rem; line-height:1.55; border-left:3px solid var(--rule); }
.say .who { font-family:var(--mono); font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; display:block; margin-bottom:0.3rem; }
.say-ernie { color:var(--ink); }
.say-ernie .who { color:var(--pink); }
.say-ed { color:var(--plum); }
.say-ed .who { color:var(--plum); }
.post-body :not(.say) + .say { margin-top:1.25rem; }
.post-body .say + :not(.say) { margin-top:1.25rem; }
.post-body .say + .say { border-top:1px solid var(--rule); }

.post-foot { margin-top:3.5rem; padding-top:1.75rem; border-top:1px solid var(--rule); color:var(--muted); font-size:0.95rem; }
.post-foot p { margin-bottom:0.9rem; }
.post-foot a { color:var(--pink); text-decoration:none; font-family:var(--mono); font-size:0.78rem; letter-spacing:0.06em; }
.ed-toggle { margin-bottom:1.25rem; }
.ed-toggle summary { cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:0.5rem; font-family:var(--mono); font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--pink); padding:0.4rem 0.85rem; border:1px solid rgba(201,83,140,0.45); border-radius:2px; user-select:none; }
.ed-toggle summary::-webkit-details-marker { display:none; }
.ed-toggle summary::before { content:"▸"; font-size:0.7rem; transition:transform 0.15s ease; }
.ed-toggle[open] summary::before { transform:rotate(90deg); }
.ed-toggle summary:hover { border-color:var(--pink); background:var(--blush-light); }
.ed-toggle[open] summary { margin-bottom:0.9rem; }

/* Paragraph spacing without a single <br>: the container owns the gap,
   the paragraphs own nothing. Change one number, all gaps move. */
.ed-bio-body { display:flex; flex-direction:column; gap:1.1rem; }
.ed-bio-body p { margin:0; font-size:0.95rem; line-height:1.7; color:var(--muted); }
.ed-bio-body cite { font-style:italic; }
/* must come after .post-foot a, which sets mono + no underline for the
   "all build log posts" link and would otherwise win on equal specificity */
.ed-bio-body a {
  font-family:var(--body); font-size:1em; letter-spacing:normal;
  color:var(--plum); font-weight:400;
  text-decoration:underline; text-decoration-color:var(--pink);
  text-decoration-thickness:1px; text-underline-offset:0.18em;
  transition:color 0.15s, text-decoration-color 0.15s;
}
.ed-bio-body a:hover { color:var(--pink); }

footer { background:var(--plum-dark); padding:2.5rem 2rem; border-top:2px solid var(--pink); }
.footer-inner { max-width:1100px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-word { font-family:var(--mono); font-size:0.72rem; color:rgba(255,255,255,0.5); line-height:1.6; }
.footer-word strong { color:var(--pink); }
.footer-links { display:flex; gap:1.5rem; flex-wrap:wrap; }
.footer-links a { font-family:var(--mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:rgba(255,255,255,0.55); text-decoration:none; }
.footer-links a:hover { color:var(--pink); }
@media (max-width:640px){ header{padding:0.85rem 1rem} nav{gap:1rem} nav a{font-size:0.68rem} }
.say-ed p { margin-bottom:0.6rem; }
.say-ed p:last-child { margin-bottom:0; }

/* ── scrolling build log (build_log/index.html) ───────────────────── */
.reading-bar { position:sticky; top:var(--hdr,56px); z-index:90; background:var(--blush-light); border-bottom:1px solid var(--rule);
  padding:0.5rem 1.25rem; display:flex; align-items:baseline; gap:0.6rem; font-family:var(--mono); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; }
.reading-bar[hidden] { display:none; }
.reading-bar .rb-label { color:var(--pink); flex-shrink:0; }
.reading-bar .rb-title { color:var(--plum); font-family:var(--title); font-style:italic; font-weight:700; font-size:0.95rem; letter-spacing:0; text-transform:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.reading-bar .rb-count { color:var(--muted); margin-left:auto; flex-shrink:0; }
.scroll-post { scroll-margin-top:calc(var(--hdr,56px) + 3.6rem); }
.scroll-post + .scroll-post { border-top:2px solid var(--pink); position:relative; }
.scroll-post + .scroll-post::before { content:"// keep reading"; position:absolute; top:-0.7rem; left:1.25rem; background:#fff; padding:0 0.5rem; font-family:var(--mono); font-size:0.66rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--pink); }
.scroll-post .permalink { font-family:var(--mono); font-size:0.7rem; letter-spacing:0.08em; color:var(--muted); text-decoration:none; margin-left:0.75rem; }
.scroll-post .permalink:hover { color:var(--pink); }
.log-foot { max-width:720px; margin:0 auto; padding:0 1.25rem 4rem; }