/* ===== DCA article pages — shared stylesheet ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --teal:#58878C; --teal-dark:#3d5f63; --teal-mid:#7aabaf;
  --coral:#F2E205; --sky:#969FD0; --sage-dark:#8a8b79;
  --ink:#060A07; --ink-mid:#1a1e1b; --ink-light:#4a4e47;
  --paper:#F2F2F2; --paper-mid:#e8e8e8; --paper-dark:#d8d8d8;
  --white:#fff; --rule:rgba(6,10,7,0.15);
  --font:'Helvetica Neue', Helvetica, Arial, sans-serif;
}
html{scroll-behavior:smooth;}
body{font-family:var(--font); background:var(--paper); color:var(--ink); font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased;}

/* top bar */
.art-nav{position:sticky; top:0; z-index:50; background:var(--ink); height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 2rem; border-bottom:1px solid rgba(255,255,255,0.07);}
.art-nav .brand{font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.85); text-decoration:none; font-weight:500;}
.art-nav .back{font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:rgba(255,255,255,0.55); text-decoration:none; transition:color .2s;}
.art-nav .back:hover{color:#fff;}

/* hero */
.art-hero{background:var(--ink);}
.art-hero-img{width:100%; max-height:420px; object-fit:cover; display:block; opacity:.92;}
.art-head{max-width:760px; margin:0 auto; padding:3.5rem 1.5rem 0;}
.art-tag{display:inline-flex; align-items:center; gap:10px; font-size:11px; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:var(--teal); margin-bottom:1.3rem;}
.art-tag::before{content:''; width:24px; height:2px; background:currentColor; border-radius:1px;}
.art-title{font-size:clamp(1.9rem,4vw,2.9rem); line-height:1.12; font-weight:300; letter-spacing:-0.025em; color:var(--ink); margin-bottom:1.1rem;}
.art-title strong{font-weight:700;}
.art-meta{font-size:13px; letter-spacing:0.02em; color:var(--ink-light); padding-bottom:2.2rem; border-bottom:1px solid var(--rule);}

/* body */
.art-body{max-width:760px; margin:0 auto; padding:2.5rem 1.5rem 4rem;}
.art-body .lead{font-size:1.35rem; line-height:1.5; font-weight:300; font-style:italic; color:var(--teal-dark); margin:0 0 1.8rem;}
.art-body p{font-size:16.5px; color:var(--ink-mid); font-weight:300; line-height:1.85; margin-bottom:1.4rem;}
.art-body h2{font-size:1.4rem; line-height:1.25; font-weight:500; letter-spacing:-0.01em; color:var(--ink); margin:2.8rem 0 1.1rem;}
.art-body strong{color:var(--ink); font-weight:600;}
blockquote{margin:1.8rem 0; padding:1.3rem 1.6rem; background:var(--white); border-left:3px solid var(--coral); border-radius:0 4px 4px 0;}
blockquote p{font-size:16px; font-style:italic; color:var(--ink); font-weight:300; margin:0;}
blockquote cite{display:block; margin-top:.7rem; font-style:normal; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-light);}

/* closing + follow */
.art-closing{margin-top:3rem; padding-top:2.2rem; border-top:1px solid var(--rule);}
.art-closing h2{color:var(--teal-dark);}
.follow{margin-top:2.4rem; padding:1.6rem 1.8rem; background:var(--teal-light,rgba(88,135,140,0.1)); background:rgba(88,135,140,0.1); border-radius:4px;}
.follow h3{font-size:13px; letter-spacing:0.12em; text-transform:uppercase; color:var(--teal-dark); margin-bottom:.7rem;}
.follow p{font-size:15px; margin-bottom:.6rem;}
.art-cta{margin-top:2.4rem;}
.art-cta a{display:inline-block; background:var(--teal); color:#fff; padding:13px 26px; font-size:12px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; text-decoration:none; border-radius:3px; transition:background .2s;}
.art-cta a:hover{background:var(--teal-dark);}

/* about box */
.about-box{max-width:760px; margin:0 auto 4rem; padding:1.8rem; border:1px solid var(--rule); border-radius:4px; background:var(--white);}
.about-box h3{font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--teal); margin-bottom:.8rem;}
.about-box p{font-size:14px; color:var(--ink-mid); font-weight:300; line-height:1.75; margin:0;}

/* footer */
.art-foot{background:var(--ink); padding:2rem; text-align:center;}
.art-foot p{font-size:12px; color:rgba(255,255,255,0.5);}
.art-foot a{color:rgba(255,255,255,0.75); text-decoration:none;}

@media(max-width:600px){
  .art-nav{padding:0 1rem;}
  .art-head,.art-body,.about-box{padding-left:1.2rem; padding-right:1.2rem;}
  .art-body .lead{font-size:1.2rem;}
}