/* Learnings list and post pages. Loaded after bento.css and reuses its tokens and .tile/.header/.footer. */
.lr{display:grid;gap:var(--gap);margin-top:var(--gap)}
.lr-footer{margin-top:var(--gap)}
.lr h1,.lr h2,.lr h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.05;margin:0;overflow-wrap:break-word}

/* tag chips (colours from the approved mockup) */
.lr-tag{display:inline-block;font:700 14px/1 var(--body);letter-spacing:.01em;padding:6px 12px;border-radius:999px;text-decoration:none;white-space:nowrap}
.lr-tag-build{background:#6840d733;color:#c9b8ff}
.lr-tag-lesson{background:#d0b28533;color:#e8cf9f}
.lr-tag-idea{background:#3fae8a33;color:#8fe0c2}
a.lr-tag:hover{filter:brightness(1.15)}

.lr-eyebrow{font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--secondary);margin-bottom:12px}
.lr-meta{font-size:15px;color:#a9a6b0}
.lr-summary{color:var(--secondary);font-size:17px;line-height:1.55;margin-top:8px}

/* intro + filter chips */
.lr-intro h1{font-size:clamp(48px,6vw,84px)}
.lr-subtitle{color:var(--secondary);font-size:20px;margin-top:12px;max-width:640px}
.lr-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.lr-chip{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border:1px solid var(--line);border-radius:999px;color:var(--secondary);font-size:16px;font-weight:700;text-decoration:none;transition:border-color .2s,color .2s,background .2s}
.lr-chip:hover{border-color:#64616d;color:var(--text)}
.lr-chip[aria-current="page"]{background:var(--button);border-color:var(--button);color:#fff}

/* whole-card links */
.lr-card-link{display:flex;text-decoration:none;color:inherit;border-radius:calc(var(--radius) - 8px)}
.lr-card-link:focus-visible{outline:3px solid #d5c7ff;outline-offset:6px}

/* featured post: cover left, text right */
.lr-featured{padding:24px}
.lr-featured .lr-card-link{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:center}
.lr-featured-cover{aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:#202226}
.lr-featured-cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.lr-featured-text{padding-right:16px}
.lr-featured-title{font-size:clamp(34px,3.6vw,52px);margin-top:14px!important}
.lr-featured .lr-summary{font-size:19px;margin-top:14px}
.lr-featured .lr-meta{margin-top:18px}
.lr-featured .lr-card-link:hover .lr-featured-title,.lr-row .lr-card-link:hover .lr-row-title{color:var(--accent)}
.lr-featured .lr-card-link:hover img{transform:scale(1.02)}

/* rows: tag column, text, small cover right */
.lr-list{padding-block:8px}
.lr-list ul{list-style:none;margin:0;padding:0}
.lr-row+.lr-row{border-top:1px solid var(--line)}
.lr-row .lr-card-link{gap:28px;align-items:center;padding:24px 0}
.lr-row-tag{flex:none;width:104px;align-self:flex-start;padding-top:6px}
.lr-row-text{flex:1;min-width:0}
.lr .lr-row-title{font-size:30px;transition:color .2s}
.lr-row .lr-meta{margin-top:10px}
.lr-thumb{flex:none;width:200px;aspect-ratio:16/10;height:auto;object-fit:cover;border-radius:14px;background:#202226}

.lr-empty p{color:var(--secondary);font-size:20px}

/* post page */
.lr-post{padding-block:40px 48px}
.lr-col{max-width:720px;margin:0 auto}
.lr-back{min-height:44px;font-size:17px}
.lr-post-tag{margin-top:18px}
.lr-post-title{font-size:clamp(44px,5.4vw,72px);margin-top:16px!important;overflow-wrap:break-word}
.lr-post-summary{color:var(--secondary);font-size:21px;line-height:1.5;margin-top:18px}
.lr-byline{display:flex;align-items:center;gap:12px;color:#a9a6b0;font-size:16px;margin-top:20px}
.lr-byline-photo{flex:none;width:36px;height:36px;border-radius:50%;object-fit:cover;background:#202226;box-shadow:0 0 0 1px var(--line)}
.lr-cover{max-width:960px;margin:32px auto 0}
.lr-cover img{width:100%;height:auto;border-radius:18px;background:#202226}

/* reading column: Markdown output from server/src/lib/markdown.ts */
.post-body{font-size:19px;line-height:1.7;color:#e6e2ea;margin-top:36px;overflow-wrap:break-word}
.post-body>*+*{margin-top:1.1em}
.post-body h2{font-size:36px;margin-top:1.6em!important;color:var(--text)}
.post-body h3{font-family:var(--body);font-size:22px;font-weight:800;letter-spacing:0;line-height:1.35;margin-top:1.5em!important;color:var(--text)}
.post-body a{color:var(--accent);text-underline-offset:4px}
.post-body a:hover{color:#e0d6ff}
.post-body strong{color:var(--text);font-weight:800}
.post-body ul,.post-body ol{padding-left:1.4em}
.post-body li+li{margin-top:.4em}
.post-body li::marker{color:var(--accent)}
.post-body blockquote{border-left:4px solid var(--accent);padding:4px 0 4px 24px;margin-block:1.6em;color:var(--text);font-size:25px;font-style:italic;font-weight:500;line-height:1.45}
.post-body blockquote>*+*{margin-top:.8em}
.post-body code{font:500 .86em/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:#26282e;border:1px solid var(--line);border-radius:6px;padding:.1em .35em}
.post-body pre{background:#0d0e10;border:1px solid var(--line);border-radius:14px;padding:18px 20px;overflow-x:auto;line-height:1.55}
.post-body pre code{background:none;border:0;padding:0;font-size:15px}
.post-body hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.post-body figure img{width:100%;height:auto;border-radius:14px}
.post-body figcaption{font-size:15px;color:#a9a6b0;text-align:center;margin-top:10px}
.post-body .embed{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;border:1px solid var(--line)}
.post-body .embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* twin box */
.lr-twin{display:flex;align-items:center;gap:20px;margin-top:48px;padding:24px;background:#202226;border:1px solid var(--line);border-radius:18px}
.lr-twin-avatar{flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover;background:#8c9bc6}
.lr-twin-text{flex:1;min-width:0}
.lr-twin-title{font-size:19px;font-weight:800}
.lr-twin-text p+p{color:var(--secondary);font-size:16px;margin-top:4px}
.lr-twin-actions{display:flex;align-items:center;gap:20px;flex:none}
.lr-twin-ask{min-height:52px;padding:12px 22px;font-size:17px}
.lr-twin-actions .text-link{font-size:17px}

/* newer / older */
.lr-pager{display:flex;justify-content:space-between;gap:24px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.lr-pager-link{display:flex;flex-direction:column;gap:4px;max-width:48%;text-decoration:none;padding:6px 0}
.lr-pager-older{text-align:right;margin-left:auto}
.lr-pager-title{font-size:18px;font-weight:700;color:var(--text);line-height:1.35}
.lr-pager-link:hover .lr-pager-title{color:var(--accent)}

/* 404 */
.lr-notfound{padding-block:56px}
.lr-notfound h1{font-size:clamp(44px,5vw,68px)}
.lr-notfound .button{margin-top:28px}

@media(max-width:950px){
  .lr-featured .lr-card-link{gap:28px}
  .lr-thumb{width:160px}
  .lr-twin{flex-wrap:wrap}
  .lr-twin-actions{width:100%;padding-left:76px}
}
@media(max-width:700px){
  .lr-featured{padding:16px}
  .lr-featured .lr-card-link{grid-template-columns:minmax(0,1fr);gap:20px}
  .lr-featured-text{padding:0 8px 8px}
  .lr-subtitle{font-size:18px}
  .lr-chip{padding:0 16px}
  .lr-row .lr-card-link{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;padding:20px 0}
  .lr-row-tag{width:auto;grid-column:1/-1;padding-top:0}
  .lr .lr-row-title{font-size:24px}
  .lr-thumb{width:112px;border-radius:10px}
  .lr-row .lr-summary{font-size:16px}
  .lr-post{padding-block:24px 32px}
  .lr-cover{margin-top:24px}
  .post-body{font-size:18px;margin-top:28px}
  .post-body h2{font-size:30px}
  .post-body blockquote{font-size:21px;padding-left:18px}
  .lr-twin{padding:20px;gap:16px}
  .lr-twin-actions{padding-left:0;flex-wrap:wrap;gap:8px 20px}
  .lr-pager{flex-direction:column;gap:16px}
  .lr-pager-link{max-width:none}
}
@media(max-width:380px){
  .lr-thumb{display:none}
  .lr-chips{gap:8px}
  .lr-chip{padding:0 14px;font-size:15px}
  .lr-twin-avatar{width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){
  .lr-featured-cover img,.lr-chip,.lr-row-title{transition:none}
  .lr-featured .lr-card-link:hover img{transform:none}
}