/* The Second Chance devlog.
 *
 * Long-form technical writing, so the priorities are: a comfortable measure, code that is
 * readable on a phone, and headings that stand out when somebody is scanning for the one
 * symptom that matches their problem. Same palette as the rest of the site.
 */
:root{
  --sodium:#FF9B2E;--tarmac:#14171A;--signage:#F2EFE9;--muted:#A7ADB3;--line:#2A2F35;
  --panel:#1B1F24;--code:#0F1215;
  --sans:ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"Courier New",monospace;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--tarmac);color:var(--signage);
  font:400 1.05rem/1.7 var(--sans);-webkit-text-size-adjust:100%}
a{color:var(--sodium);text-underline-offset:.18em}
a:hover{color:#ffb45e}
:focus-visible{outline:3px solid var(--sodium);outline-offset:3px;border-radius:2px}

.bar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:1rem clamp(1rem,3vw,2rem);border-bottom:1px solid var(--line)}
.mark{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit}
.mark svg{width:26px;height:26px;display:block}
.mark b{font:800 .82rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.bar .right{margin-left:auto;display:flex;gap:1.2rem;font-size:.82rem;
  letter-spacing:.06em;text-transform:uppercase}

.wrap{width:min(46rem,100% - 2.5rem);margin-inline:auto;padding-block:2.5rem 1rem}
.eyebrow{font:600 .8rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--sodium);margin:0 0 .6rem}
.masthead{font-size:clamp(2rem,1.4rem + 2.6vw,3rem);font-weight:800;letter-spacing:-.02em;
  line-height:1.08;margin:0 0 .4em}
.intro{color:var(--muted);margin:0 0 2.5rem;font-size:1.02rem}

/* ── index cards ─────────────────────────────────────────────────────────── */
.cards{list-style:none;padding:0;margin:0}
.card{border-top:1px solid var(--line);padding:1.6rem 0}
.card h2{font-size:1.45rem;line-height:1.2;letter-spacing:-.015em;margin:.15em 0 .35em}
.card h2 a{text-decoration:none;color:var(--signage)}
.card h2 a:hover{color:var(--sodium)}
.card .sum{color:var(--muted);margin:0 0 .6rem}
.when{font:600 .74rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0}
.tags{margin:.5rem 0 0;display:flex;flex-wrap:wrap;gap:.4rem}
.tag{font:600 .68rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:.35rem .6rem}

/* ── an entry ────────────────────────────────────────────────────────────── */
.entry header{border-bottom:1px solid var(--line);padding-bottom:1.4rem;margin-bottom:1.8rem}
.entry h1{font-size:clamp(1.8rem,1.3rem + 2.2vw,2.6rem);font-weight:800;
  letter-spacing:-.02em;line-height:1.12;margin:.2em 0 .3em;text-wrap:balance}
.prose h2{font-size:1.5rem;letter-spacing:-.015em;line-height:1.25;margin:2.2rem 0 .6rem;
  text-wrap:balance}
.prose h3{font-size:1.18rem;line-height:1.3;margin:1.8rem 0 .5rem;color:var(--signage)}
.prose h4{font-size:1rem;margin:1.4rem 0 .4rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.08em;font-family:var(--mono)}
.prose p{margin:0 0 1.1em}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.3rem}
.prose li{margin:0 0 .45em}
.prose blockquote{margin:1.4em 0;padding:.2rem 0 .2rem 1.1rem;
  border-left:3px solid var(--sodium);color:var(--muted)}
.prose blockquote p{margin:0}
.prose code{font:500 .89em/1.5 var(--mono);background:#22272D;padding:.15em .38em;
  border-radius:4px;overflow-wrap:break-word}
.prose pre{background:var(--code);border:1px solid var(--line);border-radius:8px;
  padding:1rem 1.1rem;overflow-x:auto;margin:0 0 1.3em}
.prose pre code{background:none;padding:0;font-size:.86rem;line-height:1.6;white-space:pre}
.prose strong{color:#fff}
.prose a{overflow-wrap:break-word}

/* ── paging ──────────────────────────────────────────────────────────────── */
.pager{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  border-top:1px solid var(--line);margin-top:2rem;padding-top:1.6rem}
.pager .btn{border:1px solid var(--line);background:var(--panel);color:var(--signage);
  text-decoration:none;font-weight:700;font-size:.9rem;padding:.6rem 1rem;border-radius:6px}
.pager .btn:hover{border-color:var(--sodium);color:var(--sodium)}
.pager .btn.off{opacity:.32}
.pager .of{font:600 .8rem/1 var(--mono);letter-spacing:.08em;color:var(--muted)}
.back{margin-top:2.5rem}

.foot{border-top:1px solid var(--line);margin-top:3rem;
  padding:2rem clamp(1rem,3vw,2rem) 5rem;color:var(--muted);font-size:.9rem}
.foot p{width:min(46rem,100%);margin:0 auto .7em}

@media print{.bar,.pager,.back,.foot{display:none}body{background:#fff;color:#000}}


/* ── contents list on long entries ───────────────────────────────────────── */
.toc{border:1px solid var(--line);border-radius:8px;background:#181C21;
  padding:1.1rem 1.3rem;margin:0 0 2.2rem}
.toc-h{font:600 .72rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .6rem}
.toc ol{margin:0;padding-left:1.2rem}
.toc li{margin:0 0 .35em}
.toc a{color:var(--signage);text-decoration:none}
.toc a:hover{color:var(--sodium);text-decoration:underline}

/* The anchor beside a heading. Hidden until the heading is hovered or the link itself is
   focused, so it never competes with the heading it belongs to. */
.prose h2,.prose h3{scroll-margin-top:1.2rem}
.anchor{margin-left:.4rem;color:var(--muted);text-decoration:none;font-weight:400;
  opacity:0;transition:opacity .15s ease}
h2:hover .anchor,h3:hover .anchor,.anchor:focus{opacity:1}

/* Tags are links now, not labels. */
a.tag{text-decoration:none}
a.tag:hover{border-color:var(--sodium);color:var(--sodium)}
@media (prefers-reduced-motion:reduce){ .anchor{transition:none} }

/* The YouTube call to action. Red is YouTube's, and borrowing it is the point: it should
   read as "that is the YouTube one" without being read at all. */
.ytrail{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;
  flex-wrap:wrap;width:min(46rem,100% - 2.5rem);margin:2.5rem auto 0;
  border:1px solid #2A2F35;border-radius:10px;padding:1.15rem 1.35rem;background:#181C21}
.ytrail p{margin:0;color:#A7ADB3;font-size:.95rem;max-width:34rem}
.ytrail p b{color:#F2EFE9}
.ytbtn{display:inline-flex;align-items:center;gap:.6rem;background:#FF0000;color:#fff;
  border:1.5px solid #FF0000;border-radius:8px;padding:.7rem 1.15rem;font-weight:700;
  text-decoration:none;white-space:nowrap}
.ytbtn:hover{background:#d90000;border-color:#d90000;color:#fff}
.ytbtn svg{width:22px;height:16px;display:block;flex:none}
.ytbtn .yt{fill:#fff}