/* listing.css — journal index + category hubs.
   Extracted from the journal index's inline <style> so the five hub
   pages share one cached stylesheet instead of duplicating it.
   Article pages load journal.css instead; this is listing chrome only. */

.nav-active{color:var(--ink);text-shadow:0 0 12px rgba(157,111,212,0.45);}
.section-label{font-family:var(--font-ui);font-size:11px;letter-spacing:0.28em;color:var(--ink-low);margin-bottom:32px;display:flex;align-items:center;gap:18px;text-transform:uppercase;}
.section-label::after{content:'';flex:1;height:1px;background:var(--rule);}

/* Blog listing — masthead */
.blog-header{padding:92px 0 12px;}
.blog-byline{font-family:var(--font-ui);font-size:11px;letter-spacing:0.24em;text-transform:uppercase;color:var(--purple);margin-bottom:20px;opacity:0.75;}
.blog-title{font-style:italic;font-weight:300;font-size:clamp(32px,6vw,52px);letter-spacing:-0.025em;line-height:1.08;color:var(--ink);margin-bottom:18px;text-wrap:balance;}
.blog-desc{font-weight:300;font-size:clamp(15px,2vw,17px);color:var(--ink-faint);line-height:1.7;max-width:500px;font-style:italic;}
.blog-header + .tabs{margin-top:52px;}

.post-list{padding-bottom:88px;}
.post-item{border-top:1px solid var(--rule);transition:border-color 0.5s;}
.post-item:last-child{border-bottom:1px solid var(--rule);}
.post-item:hover{border-top-color:var(--rule-mid);}
.post-link{display:block;padding:32px 0;text-decoration:none;transition:transform 0.5s cubic-bezier(0.16,1,0.3,1);}
.post-link:hover{transform:translateX(5px);}
.post-item-title{font-style:italic;font-weight:300;font-size:clamp(19px,3vw,25px);line-height:1.22;letter-spacing:-0.015em;color:var(--ink-hi);margin-bottom:9px;transition:color 0.5s;}
.post-link:hover .post-item-title{color:var(--purple-hi);}
.post-excerpt{font-weight:300;font-size:14px;color:var(--ink-low);line-height:1.65;text-wrap:pretty;max-width:600px;}
.post-date{font-family:var(--font-ui);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-low);margin-bottom:10px;opacity:0.7;}
.read-time{color:var(--ink-dim);}
.read-time::before{content:'\00a0\00b7\00a0';color:var(--ink-dim);}
.post-empty{padding:60px 0;color:var(--ink-low);font-size:15px;font-weight:300;font-style:italic;}
.tabs{display:flex;gap:0;margin-bottom:0;border-bottom:1px solid var(--rule);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tab{font-family:var(--font-ui);font-size:11px;letter-spacing:0.18em;color:var(--ink-low);cursor:pointer;padding:8px 18px 16px;margin-bottom:-1px;border-bottom:1px solid transparent;transition:color 0.4s,border-color 0.4s;user-select:none;text-transform:uppercase;white-space:nowrap;flex-shrink:0;}
.tab:first-child{padding-left:0;}
.tab.active{color:var(--ink);border-bottom-color:var(--purple);}
.tab:hover:not(.active){color:var(--ink);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* Featured lead — the first item in each category reads as an editorial lead:
   more air and a larger title, no badge or wash. A quiet kicker sits above. */
.post-item--pinned .post-link{padding:20px 0 44px;}
.post-item--pinned .post-date{color:var(--purple);opacity:0.9;}
.post-item--pinned .post-date::before{content:'Featured\00a0\00a0\2014\00a0\00a0';color:var(--purple);}
.post-item--pinned .post-item-title{font-size:clamp(25px,4.6vw,38px);line-height:1.12;color:var(--ink);margin-bottom:14px;}
.post-item--pinned .post-excerpt{font-size:15px;color:var(--ink-faint);line-height:1.7;}
/* In the merged "All" feed, keep every row uniform (chronological) — the
   featured-lead treatment belongs to the individual category tabs only. */
#tab-all .post-item--pinned .post-link{padding:32px 0;}
#tab-all .post-item--pinned .post-date{color:var(--ink-low);opacity:0.7;}
#tab-all .post-item--pinned .post-date::before{content:none;}
#tab-all .post-item--pinned .post-item-title{font-size:clamp(19px,3vw,25px);line-height:1.22;color:var(--ink-hi);margin-bottom:9px;}
#tab-all .post-item--pinned .post-excerpt{font-size:14px;color:var(--ink-low);}
@media(max-width:520px){.wrap{padding:0 22px;}.blog-header{padding:60px 0 8px;}.blog-header + .tabs{margin-top:40px;}.post-item--pinned .post-item-title{font-size:clamp(23px,7vw,30px);}}

/* Category hubs — the indexable pages the article URLs classify into.
   Shares the listing look; adds the intro copy that makes a hub worth ranking. */
.blog-byline a{color:var(--purple);text-decoration:none;border-bottom:1px solid rgba(157,111,212,0.3);}
.blog-byline a:hover{border-bottom-color:var(--purple);}
.hub-count{color:var(--ink-low);}
.hub-intro{max-width:620px;margin:40px 0 56px;}
.hub-intro p{font-weight:300;font-size:16px;line-height:1.75;color:var(--ink-faint);margin-bottom:18px;}
.hub-intro p:last-child{margin-bottom:0;}
.hub-intro strong{font-weight:400;font-style:italic;color:var(--ink);}
.hub-intro a{color:var(--purple);text-decoration:none;border-bottom:1px solid rgba(157,111,212,0.3);transition:border-color 0.3s;}
.hub-intro a:hover{border-bottom-color:var(--purple);}
.hub-link{padding:28px 0 0;font-family:var(--font-ui);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;}
.hub-link a{color:var(--purple);text-decoration:none;transition:opacity 0.3s;}
.hub-link a:hover{opacity:0.7;}
a.tab-hub{text-decoration:none;}
@media(max-width:520px){.hub-intro{margin:32px 0 44px;}.hub-intro p{font-size:15px;}}