/* components/blog.css
   Post lists, single posts, pagination, 404.
   Rewind Club - loaded in order by functions.php. */

.rc-page{padding-block:clamp(40px,6vw,72px)}

.rc-entry{max-width:68ch; margin-inline:auto}

.rc-entry h1{margin-bottom:.3em}

.rc-postmeta{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:26px}

.rc-postcard{background:var(--card); border:1.5px solid var(--line); border-radius:var(--radius); overflow:hidden}

.rc-postcard img{aspect-ratio:16/10; object-fit:cover; width:100%}

.rc-main{display:block}

.rc-pagetitle{margin-bottom:.5em}

.rc-featured{margin:0 0 28px}

.rc-featured img{width:100%; height:auto; border-radius:18px}

.rc-404{text-align:center; padding-block:clamp(48px,9vw,110px)}

.rc-404 .rc-lede{margin-inline:auto}

.rc-404 .rc-cta{justify-content:center}

.rc-cta--center{justify-content:center}

.rc-postlist{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:24px; margin-top:30px}

.rc-postcard__link{display:flex; flex-direction:column; text-decoration:none; color:inherit; height:100%}

.rc-postcard img{width:100%; aspect-ratio:16/10; object-fit:cover; display:block}

.rc-postcard__body{display:flex; flex-direction:column; gap:7px; padding:18px 18px 22px; flex:1}

.rc-postcard__title{font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:-.01em}

.rc-postcard__excerpt{font-size:14.5px; color:var(--ink-2)}

.rc-socials{list-style:none; padding:0; margin:18px 0 0; display:flex; gap:16px; flex-wrap:wrap; font-size:14px}

.navigation.pagination{margin-top:36px}

.navigation.pagination .nav-links{display:flex; gap:8px; justify-content:center; flex-wrap:wrap}

.navigation.pagination .page-numbers{
  border:1.5px solid var(--line); border-radius:11px; padding:10px 15px; color:var(--ink-2);
  font-family:var(--font-mono); font-size:13px; text-decoration:none;
}

.navigation.pagination .page-numbers.current{background:var(--ink); border-color:var(--ink); color:var(--paper)}

/* Burger becomes a real icon rather than the word "Menu". */
.rc-burger{
  display:none; margin-left:auto; background:none; border:1.5px solid var(--line);
  border-radius:12px; padding:10px 12px; cursor:pointer; color:var(--ink); line-height:0;
}

.rc-burger__bars{display:inline-flex; flex-direction:column; gap:4px; width:20px}

.rc-burger__bars i{display:block; height:2px; background:currentColor; border-radius:2px; transition:transform .2s ease, opacity .2s ease}

.rc-burger[aria-expanded="true"] .rc-burger__bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}

.rc-burger[aria-expanded="true"] .rc-burger__bars i:nth-child(2){opacity:0}

.rc-burger[aria-expanded="true"] .rc-burger__bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}