/* Contents / articles page */
.articles-hero{
  padding:84px 0 76px;
  background:linear-gradient(180deg,#fffdf8 0%,#f7f3e9 100%);
  border-bottom:1px solid rgba(15,77,68,.07);
}
.articles-hero-inner{max-width:920px}
.articles-hero .eyebrow{margin-bottom:18px}
.articles-hero h1{
  max-width:860px;
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(3rem,5vw,5rem);
  font-weight:500;
  line-height:1.01;
  letter-spacing:-.045em;
  color:#0a4d45;
}
.articles-hero-lead{
  max-width:760px;
  margin:24px 0 0;
  color:#657570;
  font-size:1.04rem;
  line-height:1.8;
}
.articles-hero-button{
  display:inline-flex;
  min-width:185px;
  margin-top:28px;
}

.articles-featured-video{
  padding:78px 0;
  background:#fff;
  border-bottom:1px solid rgba(15,77,68,.07);
}
.articles-video-grid{
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:64px;
  align-items:center;
}
.articles-video-copy h2,
.articles-library-head :is(h1,h2){
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.6rem,4.4vw,4.25rem);
  font-weight:500;
  line-height:1.03;
  letter-spacing:-.04em;
  color:#0a4d45;
}
.articles-video-copy>p:last-child,
.articles-library-head>p:last-child{
  margin:18px 0 0;
  color:#697671;
  line-height:1.76;
}
.articles-video-frame{
  position:relative;
  overflow:hidden;
  aspect-ratio:16/9;
  border:1px solid rgba(15,77,68,.10);
  border-radius:28px;
  background:#eef4f1;
  box-shadow:0 18px 44px rgba(20,62,54,.07);
}
.articles-video-frame iframe{
  width:100%;
  height:100%;
  border:0;
}
.articles-video-link{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  color:#0a4d45;
}
.articles-video-play{
  display:grid;
  place-items:center;
  width:68px;
  height:68px;
  padding-left:4px;
  border-radius:50%;
  background:#0a8d7e;
  color:#fff;
  box-shadow:0 12px 26px rgba(10,141,126,.18);
}

.articles-library{
  padding:64px 0 88px;
  background:#f7f3e9;
}
.articles-library-head{
  max-width:780px;
}
.articles-filter{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin:30px 0 34px;
}
.articles-filter button{
  min-height:40px;
  padding:0 17px;
  border:1px solid rgba(15,77,68,.12);
  border-radius:999px;
  background:#fffdf9;
  color:#365c55;
  font:inherit;
  font-size:.82rem;
  font-weight:780;
  cursor:pointer;
}
.articles-filter button.is-active{
  background:#0a4d45;
  border-color:#0a4d45;
  color:#fff;
}
.articles-editorial-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px 30px;
}
.articles-editorial-card{
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-width:0;
  border:1px solid rgba(15,77,68,.10);
  border-radius:24px;
  background:#fffdf9;
  box-shadow:0 14px 32px rgba(20,62,54,.045);
}
.articles-card-media{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#edf3ef;
}
.articles-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.articles-card-placeholder{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 72% 30%,rgba(10,141,126,.11),transparent 28%),
    radial-gradient(circle at 28% 70%,rgba(216,132,58,.08),transparent 30%),
    linear-gradient(145deg,#f9f6ed,#edf5f2);
}
.articles-card-placeholder span{
  color:#0a4d45;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.5rem;
  opacity:.65;
}
.articles-card-status{
  position:absolute;
  top:16px;
  right:16px;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(255,253,249,.92);
  color:#78847f;
  font-size:.66rem;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
}
.articles-card-body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:24px 25px 25px;
}
.articles-card-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  margin-bottom:14px;
}
.articles-card-meta span{
  color:#7a8581;
  font-size:.67rem;
  font-weight:820;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.articles-card-meta span:first-child{color:#0a8d7e}
.articles-card-body h3{
  margin:0 0 12px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.72rem;
  font-weight:500;
  line-height:1.08;
  color:#0a4d45;
}
.articles-card-body p{
  margin:0 0 20px;
  color:#697671;
  font-size:.92rem;
  line-height:1.72;
}
.articles-card-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:auto;
  color:#0a4d45;
  font-size:.84rem;
  font-weight:850;
}
.articles-card-link span{color:#0a8d7e}
.articles-card-coming{
  margin-top:auto;
  color:#929c98;
  font-size:.8rem;
  font-weight:800;
}

@media(max-width:900px){
  .articles-video-grid{grid-template-columns:1fr;gap:32px}
}
@media(max-width:760px){
  .articles-editorial-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .articles-hero{padding:58px 0 56px}
  .articles-hero h1{font-size:clamp(2.65rem,12vw,3.8rem)}
  .articles-hero-lead{font-size:.97rem;line-height:1.72}
  .articles-featured-video{padding:56px 0}
  .articles-video-copy h2,.articles-library-head :is(h1,h2){font-size:clamp(2.3rem,10vw,3.1rem)}
  .articles-video-frame{border-radius:22px}
  .articles-library{padding:46px 0 64px}
  .articles-filter{margin:24px 0 28px}
}


/* Native article detail */
.article-detail{background:#fffdf9}
.article-detail-hero{
  padding:62px 0 54px;
  background:linear-gradient(180deg,#fffdf8 0%,#f7f3e9 100%);
  border-bottom:1px solid rgba(15,77,68,.07);
}
.article-detail-shell{max-width:920px}
.article-detail-back{
  display:inline-flex;
  margin-bottom:28px;
  color:#55716b;
  font-size:.84rem;
  font-weight:780;
}
.article-detail-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  margin-bottom:16px;
}
.article-detail-meta span{
  color:#75837e;
  font-size:.68rem;
  font-weight:820;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.article-detail-meta span:first-child{color:#0a8d7e}
.article-detail-hero h1{
  max-width:900px;
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.8rem,5vw,4.9rem);
  font-weight:500;
  line-height:1.03;
  letter-spacing:-.045em;
  color:#0a4d45;
}
.article-detail-lead{
  max-width:780px;
  margin:22px 0 0;
  color:#64736e;
  font-size:1.05rem;
  line-height:1.82;
}
.article-detail-cover{
  padding:42px 0 0;
  background:#fffdf9;
}
.article-detail-cover img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border:1px solid rgba(15,77,68,.09);
  border-radius:28px;
  box-shadow:0 18px 44px rgba(20,62,54,.07);
}
.article-detail-content{padding:54px 0 88px}
.article-detail-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 250px;
  gap:54px;
  align-items:start;
}
.article-prose{
  min-width:0;
  color:#465b56;
  font-size:1.01rem;
  line-height:1.86;
}
.article-prose h2,
.article-prose h3,
.article-prose h4{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:500;
  line-height:1.16;
  letter-spacing:-.025em;
  color:#0a4d45;
}
.article-prose h2{margin:52px 0 18px;font-size:clamp(2rem,3.2vw,2.75rem)}
.article-prose h3{margin:38px 0 14px;font-size:1.65rem}
.article-prose h4{margin:30px 0 12px;font-size:1.35rem}
.article-prose p{margin:0 0 20px}
.article-prose strong{color:#274d46}
.article-prose ul,
.article-prose ol{
  margin:0 0 24px;
  padding-left:24px;
}
.article-prose li{margin:8px 0}
.article-prose blockquote{
  margin:30px 0;
  padding:22px 24px;
  border-left:3px solid #0a8d7e;
  border-radius:0 18px 18px 0;
  background:#f1f6f3;
}
.article-prose blockquote p{margin:0;color:#31554e;font-weight:650}
.article-prose hr{
  height:1px;
  margin:42px 0;
  border:0;
  background:rgba(15,77,68,.12);
}
.article-detail-note{
  position:sticky;
  top:108px;
  padding:22px 23px;
  border:1px solid rgba(15,77,68,.10);
  border-radius:20px;
  background:#f7f3e9;
}
.article-detail-note strong{
  display:block;
  margin-bottom:9px;
  color:#0a4d45;
  font-size:.86rem;
}
.article-detail-note p{
  margin:0;
  color:#677670;
  font-size:.82rem;
  line-height:1.68;
}

@media(max-width:900px){
  .article-detail-grid{grid-template-columns:1fr;gap:34px}
  .article-detail-note{position:static}
}
@media(max-width:700px){
  .article-detail-hero{padding:46px 0 42px}
  .article-detail-hero h1{font-size:clamp(2.45rem,11vw,3.55rem)}
  .article-detail-lead{font-size:.98rem;line-height:1.74}
  .article-detail-cover{padding-top:28px}
  .article-detail-cover img{border-radius:20px}
  .article-detail-content{padding:40px 0 64px}
  .article-prose{font-size:.97rem;line-height:1.8}
  .article-prose h2{margin-top:42px}
}

/* Article discovery sidebar + archive categories */
.article-detail-shell{max-width:1120px}
.article-detail-grid{
  grid-template-columns:minmax(0,1fr) 292px;
  gap:64px;
}
.article-sidebar{
  display:grid;
  gap:16px;
  align-self:start;
}
.article-side-section{
  padding:20px 21px;
  border:1px solid rgba(15,77,68,.09);
  border-radius:20px;
  background:rgba(255,253,249,.92);
}
.article-side-kicker{
  margin:0 0 12px;
  color:#0a8d7e;
  font-size:.66rem;
  font-weight:850;
  letter-spacing:.105em;
  text-transform:uppercase;
}

.article-other-list{display:grid}
.article-other-item{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 16px;
  gap:4px 10px;
  padding:13px 0;
  border-bottom:1px solid rgba(15,77,68,.08);
}
.article-other-item:first-child{padding-top:2px}
.article-other-item:last-child{border-bottom:0;padding-bottom:4px}
.article-other-item small{
  grid-column:1;
  color:#0a8d7e;
  font-size:.60rem;
  font-weight:840;
  letter-spacing:.065em;
  text-transform:uppercase;
}
.article-other-item strong{
  grid-column:1;
  color:#284e47;
  font-family:Georgia,"Times New Roman",serif;
  font-size:.92rem;
  font-weight:600;
  line-height:1.32;
}
.article-other-item>span{
  grid-column:2;
  grid-row:1 / span 2;
  align-self:center;
  color:#0a8d7e;
  font-size:.92rem;
  transition:transform .18s ease;
}
.article-other-item:hover strong{color:#0a8d7e}
.article-other-item:hover>span{transform:translateX(3px)}
.article-side-more{
  display:inline-flex;
  gap:7px;
  margin-top:14px;
  color:#0a4d45;
  font-size:.76rem;
  font-weight:820;
}
.article-side-more span{color:#0a8d7e}

.article-categories nav{display:grid}
.article-categories nav a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:39px;
  padding:0 3px;
  border-bottom:1px solid rgba(15,77,68,.075);
  color:#5e716b;
  font-size:.79rem;
  font-weight:700;
}
.article-categories nav a:last-child{border-bottom:0}
.article-categories nav a:hover,
.article-categories nav a.is-current{color:#0a4d45}
.article-categories nav a.is-current span{font-weight:840}
.article-categories nav a strong{
  display:grid;
  place-items:center;
  min-width:25px;
  height:25px;
  padding:0 7px;
  border-radius:999px;
  background:#eef4f1;
  color:#557169;
  font-size:.66rem;
  font-weight:820;
}
.article-categories nav a.is-current strong{
  background:#0a4d45;
  color:#fff;
}

.article-author-card{background:#f5f1e7}
.article-author-head{
  display:grid;
  grid-template-columns:54px 1fr;
  gap:13px;
  align-items:center;
}
.article-author-head img{
  width:54px;
  height:54px;
  object-fit:cover;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.86);
  box-shadow:0 5px 15px rgba(20,62,54,.10);
}
.article-author-head .article-side-kicker{margin-bottom:3px}
.article-author-head strong{
  display:block;
  color:#0a4d45;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1rem;
  font-weight:600;
  line-height:1.18;
}
.article-author-head span{
  display:block;
  margin-top:3px;
  color:#71807b;
  font-size:.75rem;
}
.article-author-card>a{
  display:inline-flex;
  gap:7px;
  margin-top:13px;
  color:#0a4d45;
  font-size:.78rem;
  font-weight:820;
}
.article-author-card>a span{color:#0a8d7e}

.article-sidebar .article-detail-note{
  position:static;
  top:auto;
  padding:19px 20px;
  background:#0a4d45;
  border-color:#0a4d45;
}
.article-sidebar .article-detail-note .article-side-kicker{color:#8fd3c7}
.article-sidebar .article-detail-note p:last-child{
  margin:0;
  color:rgba(255,255,255,.77);
  font-size:.76rem;
  line-height:1.62;
}

.articles-filter-group{
  display:grid;
  gap:12px;
  margin:30px 0 34px;
}
.articles-filter-group .articles-filter{margin:0}
.articles-category-filter{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.articles-category-filter button{
  min-height:36px;
  padding:0 14px;
  border:1px solid rgba(15,77,68,.10);
  border-radius:999px;
  background:transparent;
  color:#64736e;
  font:inherit;
  font-size:.76rem;
  font-weight:720;
  cursor:pointer;
}
.articles-category-filter button:hover{
  border-color:rgba(10,141,126,.30);
  color:#0a4d45;
}
.articles-category-filter button.is-active{
  border-color:rgba(10,141,126,.24);
  background:#eaf3ef;
  color:#0a4d45;
}
.articles-filter-result{
  margin:-18px 0 28px;
  color:#6e7c77;
  font-size:.82rem;
  font-weight:720;
}

@media(min-width:901px){
  .article-sidebar{
    position:sticky;
    top:100px;
  }
}
@media(max-width:980px){
  .article-detail-grid{
    grid-template-columns:minmax(0,1fr) 260px;
    gap:38px;
  }
}
@media(max-width:900px){
  .article-detail-grid{grid-template-columns:1fr;gap:38px}
  .article-sidebar{
    position:static;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:700px){
  .articles-filter-group{margin:24px 0 28px}
  .articles-category-filter{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:4px;
    scrollbar-width:none;
  }
  .articles-category-filter::-webkit-scrollbar{display:none}
  .articles-category-filter button{flex:0 0 auto}
}
@media(max-width:620px){
  .article-sidebar{grid-template-columns:1fr}
  .article-side-section{padding:18px}
}
