/* Resources: the post list and one post, on the site tokens in base.css. */

/* List page */
.res-hero{padding-block:96px 56px}
.res-hero .lead{margin-top:20px}
.res-wrap{padding-block:72px 120px}
.res-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.res-card{display:flex;flex-direction:column;width:100%;min-width:0;background:var(--bg);color:var(--fg);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:transform .3s,box-shadow .3s}
.res-card:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 18px 40px rgba(0,0,0,.08)}
.res-thumb{aspect-ratio:16/9;background:var(--stage);color:var(--stage-mute);display:grid;place-items:center;font-size:40px;overflow:hidden}
.res-thumb.empty{background:radial-gradient(120% 120% at 20% 0%,var(--stage-3) 0%,var(--stage) 60%)}
.res-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.res-body{display:flex;flex-direction:column;gap:10px;flex:1;padding:26px 28px 30px}
.res-meta{font-size:12px;color:var(--fg-3)}
.res-title{font-size:24px;font-weight:700;line-height:1.15;letter-spacing:-.03em}
.res-sum{font-size:16px;line-height:1.45;color:var(--fg-2)}
.res-more{display:inline-flex;align-items:center;gap:4px;margin-top:auto;padding-top:8px;font-size:15px;font-weight:500;color:var(--accent-ink)}
.res-card.featured{grid-column:1/-1;flex-direction:row}
.res-card.featured .res-thumb{flex:1 1 56%;aspect-ratio:auto;min-height:340px}
.res-card.featured .res-body{flex:1 1 44%;justify-content:center;padding:44px 40px}
.res-card.featured .res-title{font-size:clamp(28px,3vw,38px)}
.res-state{grid-column:1/-1;padding:48px 0;text-align:center;color:var(--fg-2)}
.res-skel{min-height:300px;border-radius:var(--r-lg);background:linear-gradient(90deg,var(--line-soft),var(--bg),var(--line-soft));background-size:200% 100%;animation:res-shimmer 1.4s infinite linear}
.res-skel.featured{grid-column:1/-1;min-height:340px}
@keyframes res-shimmer{to{background-position:-200% 0}}

/* One post */
.post{max-width:720px;margin-inline:auto;min-height:50vh}
.post.in{animation:res-in .5s ease both}
@keyframes res-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.crumbs{margin-bottom:28px;font-size:15px}
.crumbs a{display:inline-flex;align-items:center;gap:6px;color:var(--fg-2)}
.crumbs .back{transform:rotate(180deg)}
.post-head h1{margin-top:14px}
.post-head .lead{max-width:none;margin-top:20px}
.post-cover{margin:44px 0 0;border-radius:var(--r-lg);overflow:hidden;background:var(--stage)}
.post-cover img{display:block;width:100%;height:auto}
.post-body{margin-top:44px;font-size:19px;line-height:1.62;letter-spacing:-.012em}
.post-body > * + *{margin-top:1.1em}
.post-body h2{margin-top:1.9em;font-size:clamp(26px,2.6vw,32px);font-weight:700;line-height:1.15}
.post-body h3{margin-top:1.6em;font-size:22px;font-weight:600;line-height:1.25}
.post-body h4{margin-top:1.4em;font-size:19px;font-weight:600}
.post-body ul,.post-body ol{padding-left:1.3em}
.post-body li + li{margin-top:.45em}
.post-body blockquote{margin:1.6em 0;padding-left:20px;border-left:3px solid var(--accent);color:var(--fg-2)}
.post-body code{padding:2px 6px;border-radius:6px;background:var(--bg-alt);font-family:var(--mono);font-size:.88em}
.post-body img{border-radius:var(--r-md)}
.post-body a{text-decoration:underline;text-underline-offset:3px}
.post-body hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.post-missing{display:flex;flex-direction:column;gap:16px;padding:40px 0;text-align:center;align-items:center}
.post-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;max-width:720px;margin:72px auto 0;padding:36px;border-radius:var(--r-lg);background:var(--bg-alt)}
.post-cta h2{font-size:24px;font-weight:700;letter-spacing:-.03em}
.post-cta p{margin-top:6px;color:var(--fg-2)}

@media (max-width:760px){
  .res-hero{padding-block:64px 40px}
  .res-wrap{padding-block:48px 88px}
  .res-grid{grid-template-columns:1fr}
  .res-card.featured{flex-direction:column}
  .res-card.featured .res-thumb{min-height:0;aspect-ratio:16/9}
  .res-card.featured .res-body{padding:26px 28px 30px}
  .post-body{font-size:18px}
  .post-cta{padding:28px 24px}
}
@media (prefers-reduced-motion:reduce){
  .res-card,.res-skel,.post.in{transition:none;animation:none}
}