/* =========================================================================
   Blog — index (home.php), post archives and single posts (single.php).
   Loaded on top of page-about.css, which supplies tokens, primitives, nav,
   hero, thesis-pill, closing and footer. Everything here is additive.
   Card, photo and filter styles mirror the home media hub (page-home.css)
   and the video-guide filter row (page-video.css) so the three read as one.
   ========================================================================= */

/* ---------- PHOTO PLACEHOLDERS (from page-home.css) ---------- */
.blog-photo{position:relative;border-radius:14px;overflow:hidden;background:radial-gradient(120% 100% at 50% 40%, #6A4A38 0%, #3E2A22 55%, #2A1A14 100%);background-size:cover;background-position:center}
.blog-photo::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.2  0 0 0 0 0.12  0 0 0 0 0.08  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");mix-blend-mode:overlay;opacity:.9;pointer-events:none}
.blog-photo.warm{background:radial-gradient(130% 110% at 30% 30%, #B89870 0%, #A47864 40%, #3E2A22 90%)}
.blog-photo.cool{background:radial-gradient(130% 110% at 70% 30%, #C9AE92 0%, #8A7A60 45%, #2A1A14 95%)}
.blog-photo.flat{background:#3E2A22}
.blog-photo.has-img{background-size:cover;background-position:center}
.blog-photo.has-img::after{display:none}

/* ---------- FILTER ROW (from page-video.css) ---------- */
.blog-filter{padding:32px 24px 48px;border-top:1px solid var(--mid)}
.blog-filter .inner{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px}
.blog-filter .filters{display:flex;gap:8px;flex-wrap:wrap}
.blog-filter .filters a{padding:8px 14px;border-radius:999px;border:1px solid var(--mid);font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--on-dark-muted);transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.blog-filter .filters a.active{background:var(--cream);color:var(--on-cream);border-color:var(--cream)}
.blog-filter .filters a:not(.active):hover{background:rgba(241,232,220,0.06);color:var(--on-dark)}

/* ---------- FEATURED ---------- */
.blog-featured{padding:0 24px 96px}
.blog-featured .feat{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:stretch;border:1px solid var(--mid);border-radius:28px;padding:20px;background:rgba(62,42,34,0.22);transition:border-color .3s ease}
.blog-featured .feat:hover{border-color:var(--on-dark-soft)}
.blog-featured .blog-photo{min-height:380px;border-radius:18px}
.blog-featured .body{display:flex;flex-direction:column;padding:20px 20px 16px 0}
.blog-featured .tag{align-self:flex-start;margin-bottom:28px}
.blog-featured h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-0.025em;font-size:clamp(32px,4.2vw,52px);line-height:1.02;color:var(--on-dark);margin-bottom:22px}
.blog-featured .excerpt{font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.8vw,22px);line-height:1.3;color:var(--on-dark-muted);max-width:440px}
.blog-featured .foot{margin-top:auto;padding-top:32px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
@media (max-width:900px){
  .blog-featured .feat{grid-template-columns:1fr;gap:8px;padding:14px;border-radius:22px}
  .blog-featured .blog-photo{min-height:240px}
  .blog-featured .body{padding:18px 8px 8px}
}

/* ---------- META ROW ---------- */
.art-meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--on-cream-3)}
.art-meta .dot{width:3px;height:3px;background:currentColor;border-radius:999px;flex:none}
.sec-dark .art-meta{color:var(--on-dark-muted)}

/* ---------- ARTICLE GRID (home media hub cards) ---------- */
.blog-grid{padding:96px 24px}
.blog-grid .sec-head{max-width:var(--max);margin:0 auto 40px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.blog-grid .sec-head .eyebrow{display:block;margin-bottom:16px}
.blog-grid .sec-head h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-0.025em;font-size:clamp(36px,5vw,56px);line-height:1.02;color:var(--on-cream)}
.blog-grid .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:var(--max);margin:0 auto}
.art{background:var(--oat);color:var(--chocolate);border:1px solid transparent;border-radius:20px;padding:22px;display:flex;flex-direction:column;min-height:380px;transition:transform .35s ease,border-color .35s ease}
.art:hover{transform:translateY(-3px);border-color:var(--hairline)}
.art .blog-photo{aspect-ratio:3/2;margin-bottom:20px}
.art .art-meta{margin-bottom:14px}
.art h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:22px;letter-spacing:-0.005em;line-height:1.1;color:var(--chocolate);margin-bottom:12px}
.art p{font-size:13px;line-height:1.6;color:var(--on-cream-2)}
.art .more{margin-top:auto;padding-top:18px;font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--on-cream)}
@media (max-width:900px){ .blog-grid .grid{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .blog-grid .grid{grid-template-columns:1fr} .art{min-height:0} }

.blog-empty{max-width:var(--max);margin:0 auto;border:1px dashed var(--hairline);border-radius:20px;padding:56px 28px;text-align:center}
.blog-empty p{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--on-cream-2)}

/* ---------- PAGINATION ---------- */
.blog-grid .navigation{max-width:var(--max);margin:56px auto 0}
.blog-grid .nav-links{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.blog-grid .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;padding:10px 16px;border-radius:999px;border:1px solid var(--hairline);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--on-cream-2);transition:background-color .25s ease,color .25s ease}
.blog-grid a.page-numbers:hover{background:rgba(42,26,20,0.06);color:var(--on-cream)}
.blog-grid .page-numbers.current{background:var(--ground);border-color:var(--ground);color:var(--cream)}
.blog-grid .page-numbers.dots{border-color:transparent}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* ---------- EMAIL (from page-home.css) ---------- */
.blog-email{padding:96px 24px;text-align:center}
.blog-email h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-0.02em;font-size:clamp(36px,5.5vw,64px);line-height:1;max-width:1000px;margin:0 auto 40px}
.blog-email .email-form{max-width:640px;margin:0 auto;display:flex;align-items:center;gap:8px;padding:8px 8px 8px 22px;border-radius:999px;border:1px solid var(--hairline);background:var(--oat)}
.blog-email .email-form input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--on-cream);font:inherit;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;padding:10px 0}
.blog-email .email-form input::placeholder{color:var(--on-cream-3)}
.blog-email .email-form button{padding:14px 24px;border-radius:999px;background:var(--ground);color:var(--cream);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;transition:background-color .25s ease}
.blog-email .email-form button:hover{background:var(--shadow)}
@media (max-width:620px){
  .blog-email .email-form{flex-direction:column;padding:16px;gap:14px;border-radius:18px}
  .blog-email .email-form input{width:100%;text-align:center}
  .blog-email .email-form button{width:100%}
}

/* =========================================================================
   SINGLE POST
   ========================================================================= */
.post-hero{min-height:64vh}
.post-hero .hero-inner{grid-template-columns:1.5fr 1fr}
.post-hero h1{font-size:clamp(40px,6.2vw,88px);line-height:.96;letter-spacing:-0.03em}
.post-hero .eyebrow a:hover{color:var(--on-dark)}
.post-hero .thesis .art-meta{margin-top:24px;color:var(--on-dark-muted);font-family:var(--body);font-style:normal}
@media (max-width:900px){ .post-hero .hero-inner{grid-template-columns:1fr} }

.post-cover{padding:0 24px;background:var(--ground)}
.post-cover .blog-photo{max-width:var(--max);margin:0 auto;aspect-ratio:21/9;border-radius:24px;transform:translateY(0)}
@media (max-width:620px){ .post-cover .blog-photo{aspect-ratio:4/3;border-radius:18px} }

.post-body{padding:96px 24px 112px}
.post-body .inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:220px minmax(0,680px);gap:72px;justify-content:center;align-items:start}
.post-aside{position:sticky;top:32px;display:flex;flex-direction:column;gap:24px;padding-top:6px}
.post-aside .row{border-top:1px solid var(--hairline);padding-top:14px}
.post-aside .row .eyebrow{display:block;margin-bottom:8px}
.post-aside .row div{font-size:13px;color:var(--on-cream);line-height:1.5}
.post-aside .row a:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){
  .post-body{padding:64px 20px 80px}
  .post-body .inner{grid-template-columns:1fr;gap:40px}
  .post-aside{position:static;flex-direction:row;flex-wrap:wrap;gap:16px 32px}
  .post-aside .row{flex:1 1 140px}
}

/* Prose */
.seq-article{color:var(--on-cream);font-size:17px;line-height:1.75}
.seq-article > * + *{margin-top:1.15em}
.seq-article > p:first-child{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.3vw,28px);line-height:1.3;color:var(--on-cream)}
.seq-article p{color:var(--on-cream-2)}
.seq-article h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-0.02em;font-size:clamp(26px,3vw,36px);line-height:1.05;color:var(--on-cream);margin-top:2.2em}
.seq-article h3{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:0.12em;font-size:14px;color:var(--on-cream);margin-top:2em}
.seq-article a{color:var(--on-cream);text-decoration:underline;text-decoration-color:var(--hairline);text-underline-offset:3px}
.seq-article a:hover{text-decoration-color:var(--on-cream)}
.seq-article ul,.seq-article ol{padding-left:0;list-style:none;border-top:1px solid var(--hairline)}
.seq-article li{padding:14px 0 14px 28px;border-bottom:1px solid var(--hairline);position:relative;color:var(--on-cream-2);font-size:15px;line-height:1.6}
.seq-article ul li::before{content:"";position:absolute;left:4px;top:24px;width:6px;height:6px;border-radius:999px;background:var(--on-cream-3)}
.seq-article ol{counter-reset:seq}
.seq-article ol li{counter-increment:seq}
.seq-article ol li::before{content:counter(seq,decimal-leading-zero);position:absolute;left:0;top:17px;font-family:var(--display);font-size:10px;letter-spacing:0.18em;color:var(--on-cream-3)}
.seq-article blockquote{border:1px solid var(--hairline);border-radius:20px;background:var(--oat);padding:28px 32px;margin-top:2em;margin-bottom:1em}
.seq-article blockquote p{font-family:var(--serif);font-style:italic;font-size:24px;line-height:1.3;color:var(--on-cream)}
.seq-article blockquote cite{display:block;margin-top:14px;font-style:normal;font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--on-cream-3)}
.seq-article img,.seq-article figure{border-radius:16px;overflow:hidden;height:auto}
.seq-article figcaption{font-size:11px;letter-spacing:0.06em;color:var(--on-cream-3);margin-top:10px}
.seq-article hr{border:0;height:1px;background:var(--hairline);margin:2.4em 0}
.seq-article strong{color:var(--on-cream);font-weight:500}

.post-disclaimer{margin-top:56px;padding:18px 22px;border:1px solid var(--hairline);border-radius:999px;font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--on-cream-2);text-align:center}
@media (max-width:620px){ .post-disclaimer{border-radius:18px} }

.post-nav{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 24px 96px}
.post-nav a{display:flex;flex-direction:column;gap:10px;border:1px solid var(--hairline);border-radius:20px;padding:24px 26px;transition:background-color .25s ease}
.post-nav a:hover{background:rgba(42,26,20,0.04)}
.post-nav .next{text-align:right;grid-column:2}
.post-nav .t{font-family:var(--display);text-transform:uppercase;font-size:18px;line-height:1.1;color:var(--on-cream)}
@media (max-width:620px){ .post-nav{grid-template-columns:1fr} .post-nav .next{grid-column:auto} }