/* Shared editorial treatment for the homepage journal and the article archive. */
#blog{background:#f2f1e9;padding:96px 0;position:relative;border-top:1px solid #e0e4d8}
#blog .section-head{max-width:850px;margin-bottom:44px}
#blog .section-head h2{font-size:clamp(42px,5.4vw,68px);letter-spacing:-2px}
.blog-magazine .journal-label,#blog .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:2px}
#blog .eyebrow::before,.journal-label::before{content:"";width:24px;height:1px;background:currentColor}
.journal-grid,#blogCards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.journal-grid .card,#blogCards .card{padding:0;overflow:hidden;border:1px solid #dce2d6;border-radius:16px;background:#fff;display:flex;flex-direction:column;align-items:stretch;min-width:0;min-height:0;box-shadow:0 4px 14px #193e2410;transition:transform .25s,box-shadow .25s}
.journal-grid .card:hover,#blogCards .card:hover{transform:translateY(-5px);box-shadow:0 20px 38px #193e241a}
.journal-cover{height:190px;overflow:hidden;position:relative;background:var(--journal-bg,#dce5d5);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.journal-cover img{height:100%;width:100%;display:block;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.card:hover .journal-cover img{transform:scale(1.04)}
.journal-body{padding:24px;display:flex;flex:1;flex-direction:column;align-items:flex-start}
.journal-grid .num,#blogCards .num{font-size:10px;font-weight:700;letter-spacing:1.4px;color:#59715b;text-transform:uppercase}
.journal-grid .card h3,#blogCards .card h3{font-family:"Playfair Display",serif;color:#214a37;line-height:1.25;letter-spacing:-.4px;font-size:23px;margin:14px 0 12px}
.journal-grid .card p,#blogCards .card p{font-size:14px;line-height:1.75;color:#667366;margin:0 0 24px}
.journal-grid .text-link,#blogCards .text-link{margin-top:auto;padding-top:14px;border-top:1px solid #e7ebe2;width:100%;font-size:12px;letter-spacing:.02em;color:#214a37;font-weight:700}
#blogCards .card:first-child{grid-column:span 2;grid-row:span 2;background:#214a37;border-color:#214a37}
#blogCards .card:first-child .journal-cover{height:330px}
#blogCards .card:first-child .journal-body{padding:32px}
#blogCards .card:first-child h3{color:#fff;font-size:clamp(29px,3.5vw,42px);max-width:560px}
#blogCards .card:first-child p{color:#d6e1d0;max-width:490px;font-size:15px}
#blogCards .card:first-child .num,#blogCards .card:first-child .text-link{color:#e0eacb;border-color:#ffffff30}
#blogCards .card:nth-child(2) .journal-cover,#blogCards .card:nth-child(3) .journal-cover{height:120px}
#blogCards .card:nth-child(2) h3,#blogCards .card:nth-child(3) h3{font-size:21px}
#blogCards .card:nth-child(2) p,#blogCards .card:nth-child(3) p{display:none}
#blog .blog-toggle-wrap{gap:16px;flex-wrap:wrap;align-items:center;margin-top:38px}
#blog .blog-toggle{border-radius:40px;background:#214a37;color:white;padding:15px 26px;border-color:#214a37}
#blog .blog-toggle-wrap>a{margin:0!important;font-size:13px}
.blog-magazine{background:#f6f5ef}
.blog-magazine header{background:#fbfaf5}
.blog-magazine main{padding-top:62px}
.journal-hero{border-bottom:1px solid #d9e1d2;padding:14px 0 42px;max-width:none;margin-bottom:30px;position:relative}
.journal-hero h1{font-size:clamp(56px,9vw,108px);letter-spacing:-4px;margin:20px 0 22px;line-height:1.02;max-width:780px}
.journal-hero p{max-width:680px;font-size:16px;line-height:1.85;color:#647264}
.journal-toolbar{display:flex;gap:22px;align-items:end;justify-content:space-between;flex-wrap:wrap;margin-bottom:30px}
.journal-search{display:grid;gap:6px;font-size:12px;font-weight:600;color:#47604a;min-width:min(100%,280px)}
.journal-search input{font:inherit;font-size:14px;border:1px solid #c9d5c2;border-radius:30px;background:white;padding:13px 20px;color:#214a37;width:100%}
.journal-filters{display:flex;flex-wrap:wrap;gap:8px}
.journal-filters button{cursor:pointer;border:1px solid #c9d5c2;border-radius:30px;background:transparent;color:#49634a;padding:10px 16px;font:500 12px "DM Sans",sans-serif}
.journal-filters button[aria-pressed="true"]{background:#214a37;color:white;border-color:#214a37}
.journal-filters button:hover{border-color:#214a37}
.journal-count{font-size:12px;color:#647264;margin:0 0 20px}
.journal-grid .card[hidden]{display:none!important}
.journal-empty{padding:24px;color:#647264;border:1px dashed #b8c6af;border-radius:12px}
.journal-grid .card:first-child{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr;background:#214a37;border-color:#214a37}
.journal-grid .card:first-child .journal-cover{height:100%;min-height:320px}
.journal-grid .card:first-child h3{color:white;font-size:29px}
.journal-grid .card:first-child p,.journal-grid .card:first-child .num,.journal-grid .card:first-child .text-link{color:#dfe8d5;border-color:#ffffff30}
:is(.blog-magazine,#blog) :focus-visible{outline:3px solid #b08d47;outline-offset:4px}
@media(max-width:900px){.journal-grid,#blogCards{grid-template-columns:repeat(2,minmax(0,1fr))}#blogCards .card:first-child{grid-row:auto}#blogCards .card:nth-child(2) .journal-cover,#blogCards .card:nth-child(3) .journal-cover{height:190px}#blogCards .card:nth-child(2) p,#blogCards .card:nth-child(3) p{display:block}}
@media(max-width:600px){#blog{padding:60px 0}.journal-grid,#blogCards{grid-template-columns:minmax(0,1fr);gap:20px}.journal-grid .card:first-child,#blogCards .card:first-child{grid-column:auto;display:flex}#blogCards .card:first-child .journal-cover,.journal-grid .card:first-child .journal-cover{height:230px;min-height:0}.journal-body,#blogCards .card:first-child .journal-body{padding:23px}.journal-hero h1{letter-spacing:-2px}.journal-toolbar{align-items:stretch}.journal-search{width:100%}#blog .section-head h2{letter-spacing:-1px}.journal-cover{height:190px}}
@media(prefers-reduced-motion:reduce){.journal-cover img,.journal-grid .card,#blogCards .card{transition:none}}

/* Keep the editorial pattern visible around the reading area. */
body.blog-magazine {
  --blog-reading-pattern: url("../assets/blog-reading-pattern.svg");
  background-color: #f6f5ef;
  background-image:
    linear-gradient(90deg, transparent, rgba(250, 249, 243, .82) 26%, rgba(250, 249, 243, .82) 74%, transparent),
    var(--blog-reading-pattern),
    linear-gradient(155deg, #e7eee3, #f5eee0 53%, #e9eee5);
  background-position: center top;
}
@media (max-width: 640px) {
  body.blog-magazine {
    background-image:
      linear-gradient(rgba(250, 249, 243, .6), rgba(250, 249, 243, .6)),
      var(--blog-reading-pattern),
      linear-gradient(155deg, #e7eee3, #f5eee0 53%, #e9eee5);
  }
}
