/* =====================================================================
   BLOG INDEX / CATEGORY ARCHIVE / SEARCH — ported from
   ph-blog-scroll-mockup.html. Full-bleed sections inside #site-main.

   Brand tokens, fonts, and the shared header/footer come from the global
   style.css. Everything here is scoped under .ph-blog. Loaded on the blog
   index, category archives, and search results (see functions.php),
   versioned by filemtime().
   ===================================================================== */

.ph-blog{font-size:19px;line-height:1.6;color:var(--ink);}
.ph-blog .wrap{max-width:1120px;margin:0 auto;padding:0 24px;}

/* ---------- Page hero (title + subline + search) ---------- */
.ph-blog .page-hero{padding:80px 0 56px;border-bottom:1px solid var(--hairline);}
.ph-blog .page-hero .wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;}
.ph-blog .page-hero .inner{max-width:680px;}
.ph-blog .page-hero h1{font-family:var(--display);font-weight:500;font-size:clamp(38px,4.6vw,54px);line-height:1.1;margin:16px 0 14px;color:var(--ink);}
.ph-blog .page-hero p{font-size:21px;color:#3A372F;}
.ph-blog .hero-tools{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;}
.ph-blog .blog-search{display:flex;border:1px solid var(--hairline);background:#fff;min-width:240px;}
.ph-blog .blog-search input{flex:1;border:0;background:transparent;font-family:var(--body);font-size:16px;padding:12px 14px;color:var(--ink);outline:none;}
.ph-blog .blog-search input::placeholder{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);}
.ph-blog .blog-search button{border:0;background:transparent;font-family:var(--mono);font-size:12px;color:var(--plum);padding:0 16px;cursor:pointer;}
/* Tag dropdown beside the search field. */
.ph-blog .tag-jump{display:flex;}
.ph-blog .tag-jump select{
	font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
	color:var(--stone);background:#fff;border:1px solid var(--hairline);
	padding:0 34px 0 14px;cursor:pointer;-webkit-appearance:none;appearance:none;
	background-image:linear-gradient(45deg,transparent 50%,var(--plum) 50%),linear-gradient(135deg,var(--plum) 50%,transparent 50%);
	background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.ph-blog .tag-jump select:hover{border-color:var(--plum);color:var(--plum);}

/* ---------- Sections ---------- */
.ph-blog section{padding:72px 0 0;}
.ph-blog .section-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:32px;flex-wrap:wrap;}
.ph-blog .section-head h2{font-family:var(--display);font-weight:500;font-size:30px;color:var(--ink);}
.ph-blog .section-head a.more{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--plum);text-decoration:none;}
.ph-blog .section-head a.more:hover{text-decoration:underline;}
.ph-blog .section-head p.sub{width:100%;font-size:18px;color:#4A463D;font-style:italic;margin-top:-18px;}

/* ---------- Framework: essay feature cards (white = doors) ---------- */
.ph-blog .essay-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.ph-blog .ecard{background:#fff;border:1px solid var(--hairline);box-shadow:0 2px 14px rgba(26,26,26,.05);padding:32px 30px;display:flex;flex-direction:column;text-decoration:none;color:var(--ink);transition:border-color .2s ease, transform .2s ease;}
.ph-blog a.ecard:hover{border-color:var(--plum);transform:translateY(-3px);}
.ph-blog .ecard .eyebrow{color:var(--plum);margin-bottom:14px;}
.ph-blog .ecard h3{font-family:var(--display);font-weight:500;font-size:25px;margin-bottom:6px;}
.ph-blog .ecard .sub{font-family:var(--display);font-style:italic;font-size:19px;color:#4A463D;margin-bottom:14px;display:block;}
.ph-blog .ecard p{font-size:17.5px;color:#3A372F;flex:1;}
.ph-blog .ecard .meta{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);margin-top:22px;display:block;}
.ph-blog .ecard.coming{opacity:.65;box-shadow:none;}
.ph-blog .ecard.coming .meta{color:var(--plum);}

/* ---------- Library row ---------- */
.ph-blog .lib-card{background:#fff;border:1px solid var(--hairline);box-shadow:0 2px 14px rgba(26,26,26,.05);padding:36px 38px;display:flex;align-items:center;justify-content:space-between;gap:28px;text-decoration:none;color:var(--ink);transition:border-color .2s ease;}
.ph-blog a.lib-card:hover{border-color:var(--plum);}
.ph-blog .lib-card h3{font-family:var(--display);font-weight:500;font-size:25px;margin:8px 0 6px;}
.ph-blog .lib-card p{font-size:17px;color:#3A372F;font-style:italic;}
.ph-blog .lib-card .eyebrow{color:var(--plum);}
.ph-blog .lib-card .meta{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);display:block;margin-top:10px;}
.ph-blog .lib-card .arrow{font-family:var(--mono);font-size:22px;color:var(--plum);flex-shrink:0;}

/* ---------- Browse by domain ---------- */
.ph-blog .domains{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.ph-blog .dcard{border-top:1px solid var(--hairline);padding:20px 4px 8px;position:relative;text-decoration:none;color:var(--ink);}
.ph-blog .dcard::before{content:"";position:absolute;top:-1px;left:0;width:40px;height:3px;background:var(--plum);}
.ph-blog .dcard h3{font-family:var(--display);font-weight:500;font-size:22px;margin-bottom:6px;}
.ph-blog .dcard p{font-size:16px;color:#4A463D;font-style:italic;}
.ph-blog .dcard:hover h3{color:var(--plum);}

/* ---------- Resources grid ---------- */
.ph-blog .res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.ph-blog .rcard{background:#fff;border:1px solid var(--hairline);padding:28px 26px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;transition:border-color .2s ease;}
.ph-blog a.rcard:hover{border-color:var(--plum);}
.ph-blog .rcard .eyebrow{margin-bottom:10px;font-size:11px;color:var(--stone);}
.ph-blog .rcard h3{font-family:var(--display);font-weight:500;font-size:20px;line-height:1.3;flex:1;color:var(--ink);}
.ph-blog .rcard .meta{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);margin-top:16px;display:block;}
.ph-blog .rcard .meta .fmt{color:var(--plum);}
.ph-blog .res-empty{color:var(--stone);font-style:italic;padding:8px 0;}

/* Inline capture card (full row, after the 6th guide) — vellum, plum button. */
.ph-blog .rcard-cta{
	grid-column:1 / -1;background:var(--vellum);border:1px solid var(--hairline);border-top:1px solid var(--ink);
	padding:28px 30px;position:relative;text-decoration:none;color:var(--ink);
	display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
	transition:border-color .2s ease;
}
.ph-blog .rcard-cta::before{content:"";position:absolute;top:-1px;left:0;width:48px;height:3px;background:var(--plum);}
.ph-blog .rcard-cta:hover{border-color:var(--plum);}
.ph-blog .rcard-cta .cta-text{flex:1;min-width:260px;}
.ph-blog .rcard-cta .eyebrow{color:var(--plum);margin-bottom:8px;}
.ph-blog .rcard-cta .cta-line{font-family:var(--display);font-size:22px;line-height:1.25;color:var(--ink);display:block;}
.ph-blog .rcard-cta .cta-btn{
	font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
	background:var(--plum);color:var(--paper);padding:14px 26px;flex-shrink:0;
}
.ph-blog .rcard-cta:hover .cta-btn{background:var(--plum-deep);}

/* Fragment anchors land below the sticky header. */
.ph-blog #guides,.ph-blog #library,.ph-blog #framework,.ph-blog #results,.ph-blog .subscribe{scroll-margin-top:100px;}
.ph-blog .ph-domain-empty{font-size:20px;font-style:italic;color:#4A463D;padding:8px 0 12px;}
.ph-blog .ph-domain-empty a{color:var(--plum);font-style:normal;}

/* ---------- Tag chips (mono, token-consistent) ---------- */
.tag-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 34px;}
.tag-chips .chip{
	font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
	color:var(--stone);text-decoration:none;background:#fff;
	border:1px solid var(--hairline);padding:7px 14px;
	transition:border-color .2s ease, color .2s ease;
}
.tag-chips .chip:hover{border-color:var(--plum);color:var(--plum);}
.tag-chips .chip.is-active{border-color:var(--ink);color:var(--ink);}

/* ---------- Pagination ---------- */
.ph-blog .pagination{display:flex;justify-content:center;gap:10px;margin:56px 0 0;flex-wrap:wrap;}
.ph-blog .pagination a,.ph-blog .pagination span{font-family:var(--mono);font-size:12px;letter-spacing:.1em;padding:10px 16px;border:1px solid var(--hairline);text-decoration:none;color:var(--ink);}
.ph-blog .pagination span.current{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.ph-blog .pagination a:hover{border-color:var(--plum);color:var(--plum);}

/* ---------- Newsletter band ---------- */
.ph-blog .subscribe{background:var(--plum);color:var(--paper);padding:88px 0;margin-top:88px;}
.ph-blog .subscribe .sub-inner{max-width:620px;margin:0 auto;text-align:center;padding:0 24px;}
.ph-blog .subscribe .eyebrow{color:#D9CCEE;}
.ph-blog .subscribe h2{font-family:var(--display);font-weight:500;font-size:clamp(28px,3.4vw,38px);color:var(--paper);margin:14px 0 12px;}
.ph-blog .subscribe .ph-newsletter__lead,.ph-blog .subscribe p{color:#E4DAF2;font-size:19px;}
.ph-blog .subscribe .sub-form{display:flex;gap:12px;margin:32px auto 0;max-width:480px;}
.ph-blog .subscribe .sub-form input{flex:1;background:transparent;border:1px solid #9B7FC4;color:var(--paper);font-family:var(--body);font-size:17px;padding:15px 18px;}
.ph-blog .subscribe .sub-form input::placeholder{color:#BBA6DB;}
.ph-blog .subscribe .sub-form button{background:var(--paper);color:var(--plum);border:1px solid var(--paper);font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:15px 24px;cursor:pointer;}
.ph-blog .subscribe .sub-note{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:#B9A3DA;margin-top:16px;display:block;}

/* ---------- Domain archive hero: description as an italic subline ---------- */
.ph-domain-archive .page-hero p{font-style:italic;color:#4A463D;}

/* ---------- Framework page (interim) ---------- */
.ph-framework-page .page-hero p{font-style:italic;color:#4A463D;}
.ph-framework-page .essay-sequence{margin-top:4px;}

/* ---------- Responsive ---------- */
@media (max-width:1000px){.ph-blog .essay-cards{grid-template-columns:1fr;}}
@media (max-width:860px){
	.ph-blog .domains{grid-template-columns:repeat(2,1fr);}
	.ph-blog .res-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
	.ph-blog .lib-card{flex-direction:row;padding:26px 24px;}
	.ph-blog .subscribe .sub-form{flex-direction:column;}
}