/* ==================================================================
   Sagestone Homes, Journal.
   The journal index, category archives and single posts. Enqueued on
   the posts page, any archive, and single posts only.
   ================================================================== */

/* ── shared ── */
/* compact dark header, no image */
.jhead{background:var(--forest);padding:210px 0 90px}
.jhead h1{font-size:clamp(36px,4.6vw,60px);max-width:18ch;margin:20px 0 20px;color:var(--limestone)}
.jhead p{max-width:58ch;color:var(--sandstone);font-size:19px}

/* post card */
.pc{display:block}
.pc .ph{aspect-ratio:4/3;margin-bottom:20px;overflow:hidden}
.pc .ph, .pc img{transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}
.pc:hover .ph.ph--img{transform:scale(1.03)}
.pc .cat{display:inline-block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);font-weight:700;margin-bottom:10px}
.pc h3{font-size:clamp(20px,1.7vw,23px);line-height:1.25;margin-bottom:10px;transition:color .3s ease}
.pc:hover h3{color:var(--sage)}
.pc p{font-size:15px;color:#4A4A44;line-height:1.55;margin-bottom:12px}
.pc .meta{font-size:12.5px;letter-spacing:.06em;color:#6B6B62}

/* finale */
.finale{position:relative;min-height:56vh;display:flex;align-items:center;overflow:hidden}
.finale .ph{position:absolute;inset:0}
.finale:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(10,22,16,.9) 0%,rgba(10,22,16,.84) 38%,rgba(10,22,16,.5) 56%,rgba(10,22,16,.1) 76%,rgba(10,22,16,0) 100%)}
.finale .wrap{position:relative;z-index:2}
.finale h2{font-size:clamp(30px,3.8vw,50px);max-width:17ch;margin:20px 0 22px;color:var(--limestone)}
.finale p{max-width:50ch;color:var(--sandstone);margin-bottom:34px}

/* ── index and archives ── */
.jfilter{padding:34px 0;border-bottom:1px solid rgba(14,29,21,.12)}
.jfilter .wrap{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.jfilter b{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);font-weight:700;margin-right:10px}
.chip{display:inline-block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;padding:10px 16px;border:1px solid rgba(14,29,21,.28);color:var(--forest);transition:background .3s ease,color .3s ease,border-color .3s ease}
.chip:hover,.chip.on{background:var(--forest);color:var(--limestone);border-color:var(--forest)}
.jfeat{padding:90px 0 40px}
.jfeat a{display:grid;grid-template-columns:1.25fr 1fr;gap:64px;align-items:center}
.jfeat .ph{aspect-ratio:3/2}
.jfeat .cat{display:inline-block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);font-weight:700;margin-bottom:14px}
.jfeat h2{font-size:clamp(28px,3.2vw,42px);line-height:1.18;margin-bottom:18px;transition:color .3s ease}
.jfeat a:hover h2{color:var(--sage)}
.jfeat p{color:#4A4A44;margin-bottom:18px;max-width:50ch}
.jfeat .meta{font-size:12.5px;letter-spacing:.06em;color:#6B6B62}
.jfeat .more{display:inline-block;margin-top:22px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--forest);border-bottom:1px solid var(--brand-accent);padding-bottom:3px}
.jgrid{padding:60px 0 120px}
.jgrid .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 34px;padding-top:60px;border-top:1px solid rgba(14,29,21,.14)}
.pager{display:flex;justify-content:center;gap:8px;margin-top:70px}
.pager a,.pager span{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 12px;border:1px solid rgba(14,29,21,.22);font-size:14px;color:var(--forest)}
.pager .cur{background:var(--forest);color:var(--limestone);border-color:var(--forest)}
.pager a:hover{border-color:var(--forest)}
@media(max-width:1024px){.jfeat a{grid-template-columns:1fr;gap:34px}.jgrid .grid{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.jhead{padding:160px 0 64px}.jfeat{padding:60px 0 20px}.jgrid .grid{grid-template-columns:1fr;gap:44px}}

/* ── single post ── */
/* post header, with room for the image to overlap it */
.phd{background:var(--forest);padding:210px 0 70px}
.phd .wrap{max-width:900px}
.phd .cat{display:inline-block;font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--sandstone);font-weight:500;border-bottom:1px solid rgba(169,133,83,.6);padding-bottom:3px}
.phd h1{font-size:clamp(34px,4.4vw,58px);line-height:1.12;margin:22px 0 22px;color:var(--limestone)}
.phd .meta{font-size:13.5px;letter-spacing:.06em;color:var(--sandstone);opacity:.85}

/* featured image, pulled up across the header border */
/* dark above the image's midline, light below, so it sits across the edge */
.pimg{position:relative;z-index:2;margin:0;background:linear-gradient(to bottom,var(--forest) 50%,var(--limestone) 50%)}
.pimg .wrap{max-width:1100px}
.pimg .ph{aspect-ratio:16/9;box-shadow:0 26px 60px rgba(10,22,16,.28)}
.pimg figcaption{font-size:13px;color:#6B6B62;margin-top:12px}

/* body: contents rail and article */
.pbody{padding:80px 0 120px}
.pbody .wrap{display:grid;grid-template-columns:230px minmax(0,1fr);gap:70px;max-width:1100px}
.toc{position:sticky;top:120px;align-self:start}
.toc b{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);font-weight:700;margin-bottom:14px}
.toc ol{list-style:none;padding:0;margin:0;border-left:1px solid rgba(14,29,21,.16)}
.toc li a{display:block;padding:8px 0 8px 16px;margin-left:-1px;border-left:2px solid transparent;font-size:14px;line-height:1.4;color:#4A4A44;transition:color .3s ease,border-color .3s ease}
.toc li a:hover{color:var(--forest)}
.toc li a.on{color:var(--forest);border-left-color:var(--brand-accent)}

.art{max-width:68ch}
.answer{background:var(--tint);border-left:3px solid var(--brand-accent);padding:26px 30px;margin:0 0 44px}
.answer b{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);font-weight:700;margin-bottom:10px}
.answer p{font-family:var(--font-display);font-size:21px;line-height:1.5;color:var(--forest);margin:0}

.art h2{font-size:clamp(26px,2.6vw,34px);margin:56px 0 18px;scroll-margin-top:120px}
.art h3{font-size:22px;margin:36px 0 12px}
.art p{margin:0 0 20px;color:#2F2F2B}
.art ul,.art ol{margin:0 0 24px;padding-left:22px;color:#2F2F2B}
.art li{margin-bottom:8px}
.art li::marker{color:var(--brand-accent)}
.art a{color:var(--forest);border-bottom:1px solid rgba(169,133,83,.6)}
.art a:hover{color:var(--sage);border-color:var(--sage)}
.art blockquote{margin:40px 0;padding:0 0 0 28px;border-left:2px solid var(--brand-accent)}
.art blockquote p{font-family:var(--font-display);font-size:26px;line-height:1.35;color:var(--forest);margin:0}
.art figure{margin:40px 0}
.art figure .ph{aspect-ratio:3/2}
.art figcaption{font-size:13px;color:#6B6B62;margin-top:10px}
.art table{width:100%;border-collapse:collapse;margin:8px 0 30px;font-size:16px}
.art th{text-align:left;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);font-weight:700;padding:14px 20px;border-bottom:1px solid var(--brand-accent)}
.art td{padding:16px 20px;border-bottom:1px solid rgba(14,29,21,.14)}
.art td:last-child{white-space:nowrap}

.pcta{margin-top:60px;background:var(--forest);color:var(--limestone);padding:40px 42px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.pcta h3{color:var(--limestone);font-size:24px;margin:0 0 8px}
.pcta p{color:var(--sandstone);margin:0;font-size:16px;max-width:42ch}

.pupd{margin-top:40px;font-size:13.5px;color:#6B6B62}

/* related */
.rel{padding:120px 0}
.rel-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:46px}
.rel-head h2{font-size:clamp(26px,2.8vw,36px);margin-top:14px}
.rel .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}

@media(max-width:1024px){
  .pbody .wrap{grid-template-columns:1fr;gap:0}
  .toc{display:none}
  .rel .grid{grid-template-columns:1fr 1fr}
  
}
@media(max-width:768px){
  
  .phd{padding:150px 0 130px}
  .pbody{padding:56px 0 88px}
  .answer{padding:22px 22px}
  .answer p{font-size:19px}
  .pcta{padding:32px 26px}
  .rel{padding:88px 0}
  .rel .grid{grid-template-columns:1fr;gap:44px}
  .art td:last-child{white-space:normal}
  
}

/* WordPress block output inside an article */
.art .wp-block-image img, .art figure img { width: 100%; height: auto; display: block; }
.art .wp-block-table { margin: 8px 0 30px; overflow-x: auto; }
.art .wp-block-quote cite { display: block; margin-top: 12px; font-size: 14px; color: #6B6B62; font-style: normal; }
.pimg img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; box-shadow: 0 26px 60px rgba(10,22,16,.28); }
.pc .thumb, .jfeat .thumb { overflow: hidden; margin-bottom: 20px; }
.pc .thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.22,.61,.36,1); }
.pc:hover .thumb img { transform: scale(1.03); }
.jfeat .thumb { margin-bottom: 0; }
.jfeat .thumb img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.pager .page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid rgba(14,29,21,.22); font-size: 14px; color: var(--forest); }
.pager .page-numbers.current { background: var(--forest); color: var(--limestone); border-color: var(--forest); }
.jempty { padding: 40px 0 120px; color: #4A4A44; }