.art-hero{ position:relative; min-height:60vh; display:flex; align-items:flex-end; background:var(--navy); overflow:hidden; }
.art-hero .bg{ position:absolute; inset:0; background:#2a3b32 center/cover no-repeat; opacity:.6; }
.art-hero .bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(13,30,46,.3),rgba(13,30,46,.9)); }
.art-hero .c{ position:relative; z-index:2; max-width:840px; margin:0 auto; width:100%; padding:0 30px 6vh; color:#fff; }
.art-hero .cat{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--sage); }
.art-hero h1{ font-family:var(--display); font-size:clamp(34px,5vw,64px); font-weight:400; line-height:1.04; margin:14px 0 18px; max-width:760px; }
.art-hero .meta{ font-size:13px; opacity:.8; letter-spacing:.04em; }
.art-body{ max-width:680px; margin:0 auto; padding:7vh 30px; }
.art-body .lead{ font-family:var(--serif); font-size:30px; line-height:normal; color:var(--navy); margin-bottom:30px; }
.art-body p{ font-size:17px; line-height:1.85; color:var(--ink); margin-bottom:24px; }
.art-body h2{ font-family:var(--display); font-size:46px; font-weight:400; margin:0 0 16px; line-height: normal; }
.art-body blockquote{ font-family:var(--serif); font-style:italic; font-size:27px; line-height:1.4; color:var(--sage-dk);
  border-left:3px solid var(--sage); padding:6px 0 6px 26px; margin:34px 0; }
.art-body blockquote p {
    margin: 0;
    font-size: 27px;
    line-height: normal;
    color: var(--sage-dk);
}
.art-body h3 {
    font-family: var(--display);
    font-size: 36px;
    font-weight: 400;
    margin: 10px 0;
}

.art-share{ border-top:.5px solid var(--line); border-bottom:.5px solid var(--line); padding:20px 0; margin:40px 0;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.art-share span{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); }
.art-share .pills{ display:flex; gap:8px; }
.art-share a{ border:1px solid var(--line); border-radius:30px; padding:8px 16px; font-size:12px; transition:.2s; }
.art-share a:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }
.art-cta{ background:var(--blush); border-radius:22px; padding:34px; text-align:center; margin-top:10px; }
.art-cta h3{ font-family:var(--display); font-size:28px; font-weight:400; margin-bottom:10px; }
.art-cta p{ color:var(--text-dim); margin-bottom:20px; }
.more{ background:var(--cream); padding:8vh 0; }
.more h2{ font-family:var(--display); font-size:34px; font-weight:400; text-align:center; margin-bottom:38px; }
.mgrid{ max-width:var(--maxw); margin:0 auto; padding:0 30px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.mcard .ph{ aspect-ratio:3/2; border-radius:16px; background:#2a3b32 center/cover no-repeat; margin-bottom:14px; }
.mcard .cat{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--sage-dk); }
.mcard h3{ font-family:var(--display); font-size:22px; font-weight:400; margin-top:6px; line-height:1.1; }
.mcard h3 a:hover{ color:var(--sage-dk); }
@media(max-width:860px){ .mgrid{ grid-template-columns:1fr; } }

@media(max-width:767px){
	.art-hero .c {
		padding: 0 20px 40px;
		max-width: 100%;
	}
	.art-body {
		max-width: 100%;
		padding: 40px 20px;
	}
	.art-body h2 {
		font-size: 36px;
	}
	.mgrid {
        max-width: 100%;
		padding: 0 20px;
    }
}