/* How Not To: the long-form layer.
   Same system as app.css (Bone body, Gunmetal Navy ground, Signal Orange for heat).
   What it adds is everything LinkedIn cannot carry: code, receipts, figures, footnotes. */

/* ---------- masthead additions ---------- */
.post-mast{height:auto;min-height:72svh;padding:160px 24px 96px}
.post-mast h1{max-width:20ch}
.masthead .eyebrow a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(236,231,220,.35)}
.masthead .eyebrow a:hover{color:var(--accent);border-color:var(--accent)}
.byline{
  position:relative;margin-top:36px;
  font-family:"Red Hat Mono",ui-monospace,monospace;
  font-size:12px;font-weight:500;letter-spacing:.08em;color:var(--cream);opacity:.62;
}
.byline a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(236,231,220,.35)}
.byline a:hover{color:var(--accent);opacity:1;border-color:var(--accent)}
.draftflag{
  position:relative;margin-bottom:20px;padding:6px 14px;border-radius:999px;
  border:1px solid var(--accent);color:var(--accent);
  font-family:"Red Hat Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.1em;
}

/* ---------- the reading column ---------- */
.post{padding:112px 24px 40px}
.prose{max-width:680px;margin:0 auto;color:var(--ink)}
.prose > p,.prose .web p,.prose li{font-size:21px;line-height:1.62}
.prose > p + p,.prose > p + .web,.prose .web + p{margin-top:1.05em}
.prose h2{
  font-weight:400;font-size:clamp(30px,3vw,40px);line-height:1.12;letter-spacing:-.02em;
  margin:2.2em 0 .7em;position:relative;
}
.prose h2::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:999px;
  background:var(--accent);box-shadow:0 0 8px rgba(228,96,42,.7);
  margin-right:14px;vertical-align:middle;transform:translateY(-4px);
}
.prose h3{font-weight:500;font-size:24px;margin:1.8em 0 .5em}
.prose a{color:inherit;text-decoration-color:var(--accent);text-underline-offset:3px}
.prose a:hover{color:var(--accent)}
.prose strong{font-weight:500}
.prose em{font-style:italic}
.prose ul,.prose ol{margin:1em 0 1em 1.2em}
.prose li + li{margin-top:.4em}
.prose :not(pre) > code{
  font-family:"Red Hat Mono",ui-monospace,monospace;font-size:.82em;
  background:rgba(91,107,119,.12);padding:.12em .38em;border-radius:4px;
}
.prose blockquote{
  margin:1.6em 0;padding:4px 0 4px 24px;border-left:2px solid var(--accent);
  font-style:italic;font-size:21px;line-height:1.55;opacity:.9;
}
.prose hr{border:0;border-top:1px solid var(--hair);margin:3em 0}

/* the thesis: the one sentence every post states once */
.prose .thesis{
  margin:2.4em -40px;padding:40px 40px 36px;border-radius:12px;
  background:var(--navy);color:var(--cream);position:relative;overflow:hidden;
}
.prose .thesis::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(228,96,42,.9) 50%,transparent);
}
.prose .thesis p{font-size:clamp(24px,2.4vw,30px);line-height:1.3;letter-spacing:-.015em}
.prose .thesis p + p{margin-top:.6em;font-size:18px;opacity:.75;letter-spacing:0}

/* the achievement: the series running gag. A cheerful system voice over a disaster,
   on an old BBS terminal: Courier, green phosphor (Pip-Boy), double-line frame, scanlines. */
.prose .achievement{
  --phos:#1AFF80;
  margin:2.4em auto;max-width:540px;padding:24px 28px 22px;border-radius:4px;
  background:#0B0D0F;color:var(--phos);position:relative;overflow:hidden;
  border:4px double rgba(26,255,128,.6);
  box-shadow:0 18px 40px -18px rgba(26,255,128,.4);
  font-family:"Courier Prime","Courier New",Courier,monospace;
  text-align:center;text-wrap:balance;
  text-shadow:0 0 6px rgba(26,255,128,.45);
}
.prose .achievement::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px);
}
.prose .achievement p{font-size:17px;line-height:1.5}
.prose .achievement p + p{margin-top:.5em}
.prose .achievement p:first-child{
  font-weight:700;font-size:14px;letter-spacing:.2em;text-transform:uppercase;
}
.prose .achievement p:first-child::before{content:"*** ";}
.prose .achievement p:first-child::after{content:" ***";}
.prose .achievement strong{
  display:block;font-weight:700;font-size:26px;letter-spacing:.02em;text-transform:uppercase;
  color:#B8FFD6;margin:.25em 0 .2em;
}
.prose .achievement p:last-child::after{
  content:"";display:inline-block;width:.6em;height:1.05em;margin-left:6px;
  vertical-align:-.15em;background:var(--phos);animation:ach-blink 1.1s steps(1) infinite;
}
@keyframes ach-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.prose .achievement p:last-child::after{animation:none}}

/* ---------- code: dark like the ground, heat on the tokens ---------- */
.code{
  position:relative;margin:1.8em -40px;border-radius:12px;
  background:var(--navy);color:var(--cream);
}
.code pre{
  overflow-x:auto;padding:28px 32px;
  font-family:"Red Hat Mono",ui-monospace,monospace;font-size:14.5px;line-height:1.65;
  tab-size:2;
}
.code .lang{
  position:absolute;top:10px;left:32px;
  font-family:"Red Hat Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cream);opacity:.45;
}
.code .lang + .copy + pre{padding-top:38px}
.copy{
  position:absolute;top:10px;right:12px;z-index:1;
  font-family:"Red Hat Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.06em;
  color:var(--cream);background:rgba(236,231,220,.08);border:1px solid rgba(236,231,220,.18);
  border-radius:999px;padding:5px 12px;cursor:pointer;opacity:.7;
  transition:opacity .2s ease,border-color .2s ease,color .2s ease;
}
.copy:hover,.copy:focus-visible{opacity:1;border-color:var(--accent);outline:none}
.copy.done{color:var(--accent);border-color:var(--accent);opacity:1}

/* pygments token classes, mapped to the palette */
.code .c,.code .c1,.code .cm,.code .ch,.code .cs,.code .cp{color:#8A9AA6;font-style:italic}
.code .k,.code .kn,.code .kd,.code .kc,.code .kr,.code .ow,.code .kt{color:#F0733B}
.code .s,.code .s1,.code .s2,.code .sb,.code .sd,.code .se,.code .si,.code .sa,.code .dl{color:#D9C9A0}
.code .m,.code .mi,.code .mf,.code .mh,.code .il{color:#FFAA5A}
.code .nf,.code .fm,.code .nc{color:#ECE7DC;font-weight:500}
.code .nb,.code .bp{color:#B9C4CC}
.code .o,.code .p{color:#B9C4CC}
.code .nt,.code .na{color:#F0733B}
.code .gd{color:#E98B7A}
.code .gi{color:#A9C49A}
.code .err{color:inherit;background:none}

/* ---------- receipts: the evidence, folded until you want it ---------- */
.evidence{
  margin:1.8em -40px;border:1px solid var(--hair);border-radius:12px;
  transition:border-color .3s ease;
}
.evidence[open]{border-color:rgba(228,96,42,.5)}
.evidence summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;
  padding:18px 24px;font-size:18px;line-height:1.35;
}
.evidence summary::-webkit-details-marker{display:none}
.evidence summary::after{
  content:"+";margin-left:auto;font-family:"Red Hat Mono",ui-monospace,monospace;
  font-size:20px;color:var(--accent);
}
.evidence[open] summary::after{content:"\2212"}
.evidence summary:hover{color:var(--accent)}
.evidence .tag{
  flex:none;font-family:"Red Hat Mono",ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.12em;color:var(--steel);border:1px solid var(--hair);
  border-radius:999px;padding:4px 10px;
}
.evidence .code{margin:0 12px 12px}

/* ---------- figures: inline SVG, so they stay sharp and stay on brand ---------- */
.fig{margin:2.4em -40px}
.fig svg{display:block;width:100%;height:auto}
.fig figcaption{
  margin-top:14px;padding:0 40px;
  font-family:"Red Hat Mono",ui-monospace,monospace;font-size:12.5px;line-height:1.55;
  letter-spacing:.01em;color:var(--steel);
}

/* ---------- footnotes: where each claim came from ---------- */
.prose .footnote-ref a{
  font-family:"Red Hat Mono",ui-monospace,monospace;font-size:.62em;
  color:var(--accent);text-decoration:none;padding:0 1px;
}
.prose .footnotes-sep{border:0;border-top:1px solid var(--hair);margin:4em 0 1.6em}
.prose .footnotes{list-style-position:outside;margin-left:1.4em}
.prose .footnotes li{font-size:15.5px;line-height:1.55;color:var(--steel)}
.prose .footnotes li p{display:inline}
.prose .footnote-backref{text-decoration:none;color:var(--accent);margin-left:4px}

/* ---------- end of post ---------- */
.post-end{max-width:680px;margin:96px auto 0;padding-top:40px;border-top:1px solid var(--hair)}
.post-end p{margin-top:16px;font-size:19px;line-height:1.55;opacity:.82}
.post-end .eyebrow::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:999px;
  background:var(--accent);margin-right:10px;vertical-align:middle;
}

/* ---------- the index: the row system, as links ---------- */
a.row.postrow{text-decoration:none;color:inherit;background-image:none;padding-bottom:44px}
a.row.postrow p{margin-top:12px}
.empty{font-size:20px;opacity:.7}

@media (max-width:820px){
  .post-mast{padding:128px 20px 72px}
  .prose > p,.prose .web p,.prose li{font-size:19px}
  .code,.evidence,.fig,.prose .thesis{margin-left:-8px;margin-right:-8px}
  .code pre{padding:24px 20px;font-size:13px}
  .code .lang{left:20px}
  .prose .thesis{padding:32px 24px 28px}
  .prose .achievement{padding:20px 20px 18px}
  .prose .achievement strong{font-size:22px}
  .fig figcaption{padding:0 8px}
  /* figures keep a readable size and scroll inside their own frame, never the page */
  .fig{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .fig svg{min-width:620px}
}