/* Page stylesheet for the /learn/ index.
 * Out of the document for the same reason as article.css: a page whose
 * markup is mostly styling is expensive for anything reading it as text.
 */
:root{
    --bg:#0A0C0B; --bg-raised:#111614; --bg-sunken:#070908;
    --ink:#EDEFEC; --ink-soft:#96A39B; --ink-faint:#5C6A62;
    --purple:#B833E0; --purple-soft:rgba(184,51,224,0.14); --purple-ink:#DA8EF2;
    --green:#22C55E; --green-soft:rgba(34,197,94,0.14); --green-ink:#6EDE9A;
    --line:#1C2320; --line-strong:#2A332E;
    --font-mono: "SF Mono","JetBrains Mono","IBM Plex Mono","Cascadia Code",ui-monospace,Menlo,Consolas,monospace;
    --font-body: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box;}
  html{background:var(--bg);}
  body{
    margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body);
    font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:64px 64px;
    background-position:center -1px;
  }
  .wrap{max-width:760px; margin:0 auto; padding:0 24px;}
  a{color:var(--green-ink);}

  .topbar{max-width:760px; margin:0 auto; padding:28px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px;}
  .wordmark{
    font-family:var(--font-mono); font-weight:700; font-size:15px; letter-spacing:.02em;
    display:flex; align-items:center; gap:9px; color:var(--ink); text-decoration:none;
  }
  .wordmark .chip{width:16px; height:16px; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:2px;}
  .wordmark .chip span{display:block;}
  .wordmark .chip span:nth-child(1){background:var(--purple);}
  .wordmark .chip span:nth-child(2){background:var(--line-strong);}
  .wordmark .chip span:nth-child(3){background:var(--line-strong);}
  .wordmark .chip span:nth-child(4){background:var(--green);}
  .topbar .app{
    font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--bg);
    background:var(--green); padding:7px 14px; border-radius:100px; text-decoration:none;
    white-space:nowrap;
  }
  .topbar .app:hover{filter:brightness(1.1);}

  /* ---------- page head ---------- */
  header.page{padding:26px 0 8px;}
  .kicker{
    font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.14em;
    text-transform:uppercase; color:var(--green-ink); margin-bottom:14px;
  }
  h1{
    font-family:var(--font-mono); font-size:clamp(30px,5.2vw,42px); line-height:1.12;
    letter-spacing:-.02em; margin:0 0 16px; text-wrap:balance;
  }
  .dek{font-size:18px; color:var(--ink-soft); margin:0 0 8px; max-width:60ch; text-wrap:pretty;}

  /* ---------- the list ----------
     One column, full-width rows, deliberately not a grid of cards. At twenty
     articles a card grid turns every title into a truncated fragment competing
     with two dozen others; a list keeps the title and its first sentence
     readable, which is the only thing that decides whether a page is opened.
     It also degrades gracefully — the twenty-first entry costs one more row
     rather than a broken third column. */
  .posts{list-style:none; margin:34px 0 0; padding:0; border-top:1px solid var(--line-strong);}
  .posts li{border-bottom:1px solid var(--line-strong);}
  .post{
    display:grid; grid-template-columns:1fr auto; gap:6px 28px;
    padding:26px 4px; text-decoration:none; color:inherit;
    transition:background .12s ease;
  }
  .post:hover, .post:focus-visible{background:var(--bg-raised); outline:none;}
  .post:focus-visible{box-shadow:inset 3px 0 0 var(--green);}
  .post h2{
    grid-column:1; margin:0; font-family:var(--font-mono); font-size:20px; line-height:1.3;
    letter-spacing:-.01em; font-weight:700; color:var(--ink); text-wrap:balance;
  }
  .post:hover h2{color:var(--green-ink);}
  .post p{grid-column:1; margin:0; font-size:15.5px; color:var(--ink-soft); max-width:62ch; text-wrap:pretty;}
  .post .meta{
    grid-column:2; grid-row:1 / span 2; align-self:start; text-align:right;
    font-family:var(--font-mono); font-size:12px; color:var(--ink-faint);
    line-height:1.9; white-space:nowrap; padding-top:3px;
  }
  .post .meta b{display:block; font-weight:400; color:var(--ink-soft);}
  @media(max-width:620px){
    .post{grid-template-columns:1fr;}
    .post .meta{grid-column:1; grid-row:auto; text-align:left; line-height:1.6; padding-top:4px;}
    .post .meta b{display:inline;}
    .post .meta b::after{content:" · "; color:var(--ink-faint);}
  }

  /* ---------- tail ---------- */
  .tail{
    margin:44px 0 0; padding:24px 26px; background:var(--bg-raised);
    border:1px solid var(--line-strong); border-radius:10px;
  }
  .tail h2{font-family:var(--font-mono); font-size:17px; margin:0 0 8px; letter-spacing:-.01em;}
  .tail p{margin:0 0 16px; font-size:15.5px; color:var(--ink-soft); max-width:60ch;}
  .tail .btn{
    font-family:var(--font-mono); font-weight:700; font-size:14px; color:var(--bg);
    background:var(--green); padding:12px 22px; border-radius:4px; text-decoration:none;
    display:inline-block;
  }
  .tail .btn:hover{filter:brightness(1.1);}

  footer{
    margin-top:56px; border-top:1px solid var(--line); padding:24px 0 60px;
    font-family:var(--font-mono); font-size:12.5px; color:var(--ink-faint); line-height:1.9;
  }
  footer a{color:var(--ink-soft); text-decoration:none;}
  footer a:hover{color:var(--green-ink);}