/* ═══════════════════════════════════════════════════════════════════════════
   DMC ARTICLE SYSTEM
   Single post / resource article template styles.

   Depends on dmc-design-system.css for tokens. Loads AFTER it.
   Namespace: .dmc-art*  on a .dmc-page.dmc-page--article root.

   Nothing here overrides an existing page component. Every selector is either
   new (.dmc-art*) or scoped under .dmc-page--article, so no live page can be
   affected by this file.
   ═══════════════════════════════════════════════════════════════════════════ */

.dmc-page--article{
  --art-rail: 348px;          /* sticky rail width */
  --art-gap: 72px;            /* prose to rail gutter */
  --art-measure: 74ch;        /* reading measure */
  --art-stick: 98px;          /* sticky offset, clears the 74px stuck header */
  background:var(--bg-light);
  color:var(--ink-soft);
}

/* ── 1 · HERO ─────────────────────────────────────────────────────────────── */

.dmc-art-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,var(--n-800) 0%,var(--n-900) 62%,var(--n-950) 100%);
  padding:clamp(52px,6vw,86px) 0 clamp(96px,10vw,140px);
}

.dmc-art-hero__lines{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

.dmc-art-hero__inner{ position:relative; z-index:2; max-width:1080px; }

.dmc-art-hero .dmc-art__crumbs{ margin-bottom:26px; }

.dmc-page--article a.dmc-art-hero__eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-b); font-size:15px; font-weight:600; font-style:italic;
  color:var(--sky-500); margin-bottom:20px; transition:color .25s;
}
.dmc-page--article a.dmc-art-hero__eyebrow:hover{ color:#fff; }
.dmc-art-hero__eyebrow svg{ width:19px; height:19px; flex:none; stroke:currentColor; }
.dmc-art-hero__eyebrow span{ white-space:nowrap; }
/* The DMC mark. Selector carries img on purpose so it outranks the base image reset,
   same reason the pillar pages do it. */
.dmc-page--article img.dmc-art-hero__ico{ width:23px; height:23px; flex:none; }

.dmc-art-hero__h1{
  font-family:var(--font-d); font-weight:300; line-height:1.14; color:#fff;
  font-size:clamp(1.95rem,3.5vw,3.25rem); letter-spacing:.01em;
  text-wrap:balance;
}
.dmc-art-hero__h1 strong{ font-weight:700; color:var(--sky-400); }

.dmc-art-hero__stand{
  margin-top:24px; max-width:70ch;
  font-size:clamp(1.06rem,1.35vw,1.24rem); line-height:1.78; color:var(--soft);
}
.dmc-art-hero__stand strong{ color:#EAF2FE; font-weight:600; }

/* meta row */
.dmc-art-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 26px;
  margin-top:36px; padding-top:26px; border-top:1px solid var(--line);
}
.dmc-art-meta__item{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-b); font-size:14.5px; font-weight:500; color:var(--soft-2);
}
.dmc-art-meta__item svg{ width:16px; height:16px; flex:none; stroke:var(--sky-500); }
.dmc-art-meta__item strong{ color:var(--sky-300); font-weight:600; }

/* ── 2 · FEATURED IMAGE, straddles the hero edge ──────────────────────────── */

.dmc-art-feat{ position:relative; z-index:5; margin-top:clamp(-104px,-8vw,-72px); }
.dmc-art-feat__frame{
  position:relative; overflow:hidden; border-radius:var(--rad);
  border:1px solid var(--line-strong);
  box-shadow:0 40px 90px -38px rgba(0,10,51,.62);
  background:var(--n-700); aspect-ratio:16/7;
}
.dmc-page--article .dmc-art-feat__frame img{ width:100%; height:100%; object-fit:cover; }
.dmc-art-feat__cap{
  margin:14px 2px 0; font-size:13.5px; line-height:1.6; color:var(--ink-soft); opacity:.8;
}

/* ── 3 · BODY GRID ────────────────────────────────────────────────────────── */

.dmc-art-body{ padding:clamp(56px,6vw,84px) 0 clamp(64px,7vw,96px); }

.dmc-art-grid{
  display:grid; grid-template-columns:minmax(0,1fr) var(--art-rail);
  gap:var(--art-gap); align-items:start;
}
.dmc-art-grid > *{ min-width:0; }

/* ── 4 · PROSE ────────────────────────────────────────────────────────────── */

.dmc-art__prose{ max-width:var(--art-measure); font-size:17.5px; line-height:1.85; color:var(--ink-soft); }

.dmc-art__prose > * + *{ margin-top:1.5em; }

.dmc-art__prose h2{
  font-family:var(--font-d); font-weight:300; line-height:1.2; color:var(--ink);
  font-size:clamp(1.7rem,2.3vw,2.3rem); letter-spacing:.005em;
  margin-top:2.1em; margin-bottom:.05em; scroll-margin-top:var(--art-stick);
  text-wrap:balance;
}
.dmc-art__prose h2 + *{ margin-top:.85em; }
.dmc-art__prose h2 strong, .dmc-art__prose h2 em{ font-weight:500; font-style:normal; color:var(--sky-600); }

.dmc-art__prose h3{
  font-family:var(--font-d); font-weight:600; line-height:1.32; color:var(--ink);
  font-size:clamp(1.16rem,1.5vw,1.42rem); letter-spacing:.01em;
  margin-top:1.9em; margin-bottom:.05em; scroll-margin-top:var(--art-stick);
}
.dmc-art__prose h3 + *{ margin-top:.7em; }

.dmc-art__prose h4{
  font-family:var(--font-d); font-weight:600; font-size:1.02rem; color:var(--ink);
  letter-spacing:.02em; margin-top:1.7em; margin-bottom:.05em;
}

.dmc-art__prose p strong{ color:var(--ink); font-weight:600; }
.dmc-art__prose em{ font-style:italic; }

.dmc-art__prose a{
  color:var(--sky-600); font-weight:600;
  background-image:linear-gradient(var(--sky-600),var(--sky-600));
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%;
  padding-bottom:1px; transition:background-size .25s,color .2s;
}
.dmc-art__prose a:hover{ color:var(--sky-700); background-size:100% 2px; }

/* lists */
.dmc-art__prose ul, .dmc-art__prose ol{ padding-left:0; list-style:none; }
.dmc-art__prose li{ position:relative; padding-left:30px; }
.dmc-art__prose li + li{ margin-top:.62em; }
.dmc-art__prose ul li::before{
  content:""; position:absolute; left:6px; top:.72em;
  width:7px; height:7px; border-radius:50%; background:var(--sky-500);
  box-shadow:0 0 0 3px rgba(113,182,255,.18);
}
.dmc-art__prose ol{ counter-reset:dmcart; }
.dmc-art__prose ol li{ counter-increment:dmcart; }
.dmc-art__prose ol li::before{
  content:counter(dmcart); position:absolute; left:0; top:.06em;
  font-family:var(--font-d); font-size:13px; font-weight:700; color:var(--sky-600);
  width:21px; text-align:right;
}
.dmc-art__prose li > ul, .dmc-art__prose li > ol{ margin-top:.55em; }

/* blockquote / pull */
.dmc-art__prose blockquote{
  margin-left:0; margin-right:0; padding:6px 0 6px 30px;
  border-left:3px solid var(--sky-500);
  font-family:var(--font-d); font-weight:300; font-style:normal;
  font-size:clamp(1.18rem,1.6vw,1.44rem); line-height:1.5; color:var(--ink);
}
.dmc-art__prose blockquote p + p{ margin-top:.6em; }
.dmc-art__prose blockquote cite{
  display:block; margin-top:14px; font-family:var(--font-b);
  font-size:14px; font-style:normal; font-weight:600; color:var(--sky-600);
}

/* figures */
.dmc-art__prose figure{ margin-left:0; margin-right:0; }
.dmc-page--article .dmc-art__prose img{
  border-radius:var(--rad-sm); border:1px solid var(--line-light); width:100%;
}
.dmc-art__prose figcaption{
  margin-top:12px; font-size:13.5px; line-height:1.6; color:var(--ink-soft); opacity:.82;
}

/* tables */
.dmc-art__table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.dmc-art__prose table{
  width:100%; border-collapse:collapse; font-size:15.5px; line-height:1.6;
  background:#fff; border:1px solid var(--line-light); border-radius:var(--rad-sm);
  overflow:hidden;
}
.dmc-art__prose thead th{
  background:var(--n-800); color:#fff; font-family:var(--font-d); font-weight:600;
  font-size:13.5px; letter-spacing:.02em; text-align:left; padding:14px 18px;
}
.dmc-art__prose tbody td{ padding:13px 18px; border-top:1px solid var(--line-light); vertical-align:top; }
.dmc-art__prose tbody tr:nth-child(even) td{ background:#FAFCFF; }
.dmc-art__prose tbody td strong{ color:var(--ink); }

/* code */
.dmc-art__prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88em;
  background:rgba(34,115,206,.09); color:var(--sky-700);
  padding:2px 7px; border-radius:6px;
}
.dmc-art__prose pre{
  background:var(--n-900); color:var(--soft); border-radius:var(--rad-sm);
  padding:22px 24px; overflow-x:auto; font-size:14px; line-height:1.65;
  border:1px solid var(--line);
}
.dmc-art__prose pre code{ background:none; color:inherit; padding:0; }

.dmc-art__prose hr{
  border:0; height:1px; background:var(--line-light); margin-top:2.4em; margin-bottom:2.4em;
}

/* first paragraph lift */
.dmc-art__prose > p:first-child{ font-size:1.1em; line-height:1.75; color:var(--ink); }

/* ── 5 · IN-PROSE CALLOUTS ────────────────────────────────────────────────── */

.dmc-art-note{
  background:#fff; border:1px solid var(--line-light); border-left:3px solid var(--sky-500);
  border-radius:var(--rad-sm); padding:22px 26px;
  box-shadow:0 14px 34px -26px rgba(0,21,93,.4);
}
.dmc-art-note__title{
  display:flex; align-items:center; flex-wrap:nowrap; gap:9px; line-height:1.25;
  font-family:var(--font-d); font-weight:600; font-size:14px; letter-spacing:.03em;
  text-transform:uppercase; color:var(--sky-600); margin-bottom:10px;
}
.dmc-art-note__title svg{
  width:17px; height:17px; min-width:17px; stroke:var(--sky-600);
  flex:0 0 17px; display:block; align-self:center;
}
.dmc-art-note p{ font-size:16px; line-height:1.72; }
.dmc-art-note--warn{ border-left-color:#E2A33C; }
.dmc-art-note--warn .dmc-art-note__title{ color:#B87816; }
.dmc-art-note--warn .dmc-art-note__title svg{ stroke:#B87816; }

/* key takeaway box, dark */
.dmc-art-key{
  background:linear-gradient(150deg,var(--n-600) 0%,var(--n-900) 70%);
  border:1px solid var(--line-strong); border-radius:var(--rad);
  padding:clamp(26px,3vw,36px); color:var(--soft);
}
.dmc-art-key__title{
  font-family:var(--font-d); font-weight:600; font-size:1.12rem; color:#fff; margin-bottom:14px;
}
.dmc-art-key p{ font-size:16.5px; line-height:1.78; }
.dmc-art-key p strong{ color:#EAF2FE; }

/* ── 6 · STICKY RAIL ──────────────────────────────────────────────────────── */

.dmc-art-rail{ position:sticky; top:var(--art-stick); display:grid; gap:22px; }

.dmc-art-card{
  background:#fff; border:1px solid var(--line-light); border-radius:var(--rad-sm);
  box-shadow:0 18px 44px -30px rgba(0,21,93,.42);
}
.dmc-art-card__head{
  font-family:var(--font-d); font-weight:600; font-size:12.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--sky-600);
  padding:20px 24px 0;
}

/* TOC */
.dmc-art-toc__list{ padding:14px 24px 22px; }
.dmc-art-toc__list li + li{ margin-top:2px; }
.dmc-page--article a.dmc-art-toc__link{
  display:block; padding:8px 0 8px 15px; position:relative;
  font-size:14.6px; line-height:1.5; font-weight:500; color:var(--ink-soft);
  border-left:2px solid var(--line-light); transition:color .2s,border-color .2s;
}
.dmc-page--article a.dmc-art-toc__link:hover{ color:var(--sky-600); border-left-color:var(--sky-400); }
.dmc-page--article a.dmc-art-toc__link.is-active{ color:var(--sky-600); font-weight:600; border-left-color:var(--sky-500); }
.dmc-art-toc__link--sub{ padding-left:28px; font-size:13.8px; opacity:.88; }

/* rail CTA, navy */
.dmc-art-cta{
  position:relative; overflow:hidden;
  background:linear-gradient(155deg,var(--n-700) 0%,var(--n-900) 68%);
  border:1px solid var(--line-strong); border-radius:var(--rad-sm);
  padding:28px 26px 26px; color:var(--soft);
  box-shadow:0 22px 52px -30px rgba(0,10,51,.75);
}
.dmc-art-cta__lines{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.9; }
.dmc-art-cta__in{ position:relative; z-index:2; }
.dmc-art-cta__eyebrow{
  font-family:var(--font-b); font-style:italic; font-weight:600; font-size:13.5px;
  color:var(--sky-500); margin-bottom:10px; text-align:center;
}
.dmc-art-cta__title{
  font-family:var(--font-d); font-weight:300; font-size:1.34rem; line-height:1.3; color:#fff;
  margin-bottom:14px; text-align:center; text-wrap:balance;
}
.dmc-art-cta__title strong{ font-weight:600; color:var(--sky-400); }
.dmc-art-cta__copy{ font-size:14.8px; line-height:1.68; color:var(--soft-2); margin-bottom:20px; }
.dmc-art-cta .dmc-btn{ width:100%; justify-content:center; padding:15px 20px; font-size:14.5px; }
.dmc-art-cta__fine{
  margin-top:14px; font-size:12.6px; line-height:1.55; color:var(--soft-2); opacity:.85; text-align:center;
}

/* rail related list */
.dmc-art-rel__list{ padding:12px 24px 22px; }
.dmc-art-rel__item + .dmc-art-rel__item{ margin-top:4px; padding-top:14px; border-top:1px solid var(--line-light); }
.dmc-art-rel__link{ display:block; padding:6px 0; }
.dmc-art-rel__ttl{
  font-family:var(--font-d); font-weight:600; font-size:14.8px; line-height:1.42; color:var(--ink);
  transition:color .2s;
}
.dmc-art-rel__link:hover .dmc-art-rel__ttl{ color:var(--sky-600); }
.dmc-art-rel__meta{ margin-top:5px; font-size:12.6px; font-weight:500; color:var(--ink-soft); opacity:.78; }

/* ── 7 · LINKS-UP BLOCK ───────────────────────────────────────────────────── */

.dmc-art-up{ background:#fff; padding:clamp(48px,5vw,72px) 0; border-top:1px solid var(--line-light); }
.dmc-art-up__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.dmc-art-up__card{
  display:block; position:relative; overflow:hidden;
  background:var(--bg-light); border:1px solid var(--line-light); border-radius:var(--rad-sm);
  padding:28px 30px; transition:transform .3s,box-shadow .3s,border-color .3s;
}
.dmc-art-up__card:hover{
  transform:translateY(-4px); border-color:var(--sky-400);
  box-shadow:0 26px 54px -32px rgba(0,21,93,.45);
}
.dmc-art-up__card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--grad-rise); opacity:0; transition:opacity .3s;
}
.dmc-art-up__card:hover::before{ opacity:1; }
.dmc-art-up__kick{
  font-family:var(--font-d); font-weight:600; font-size:12px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--sky-600); margin-bottom:11px;
}
.dmc-art-up__ttl{
  font-family:var(--font-d); font-weight:600; font-size:1.22rem; line-height:1.3; color:var(--ink);
  margin-bottom:9px;
}
.dmc-art-up__sub{ font-size:15px; line-height:1.68; color:var(--ink-soft); }

/* ── 8 · AUTHOR / REVIEW BLOCK ────────────────────────────────────────────── */

.dmc-art-author{
  display:flex; gap:20px; align-items:flex-start;
  background:#fff; border:1px solid var(--line-light); border-radius:var(--rad-sm);
  padding:26px 28px; margin-top:44px;
}
.dmc-page--article img.dmc-art-author__ava{
  width:58px; height:58px; border-radius:50%; flex:none; object-fit:cover;
  border:2px solid var(--sky-400);
}
.dmc-art-author__name{ font-family:var(--font-d); font-weight:600; font-size:1.05rem; color:var(--ink); }
.dmc-art-author__role{ font-size:13.8px; font-weight:500; color:var(--sky-600); margin-top:3px; }
.dmc-art-author__bio{ font-size:15px; line-height:1.7; color:var(--ink-soft); margin-top:10px; }
.dmc-art-author__rev{
  margin-top:12px; padding-top:12px; border-top:1px solid var(--line-light);
  font-size:13.2px; line-height:1.6; color:var(--ink-soft); opacity:.9;
}

/* ── 9 · RELATED GRID ─────────────────────────────────────────────────────── */

.dmc-art-more{ background:var(--bg-light); padding:clamp(52px,6vw,80px) 0; border-top:1px solid var(--line-light); }
.dmc-art-more__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:34px; }
.dmc-art-more__card{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--line-light); border-radius:var(--rad-sm); overflow:hidden;
  transition:transform .3s,box-shadow .3s,border-color .3s;
}
.dmc-art-more__card:hover{
  transform:translateY(-5px); border-color:var(--sky-400);
  box-shadow:0 28px 58px -32px rgba(0,21,93,.45);
}
.dmc-art-more__media{ aspect-ratio:16/9; background:var(--n-700); overflow:hidden; }
.dmc-page--article .dmc-art-more__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.dmc-art-more__card:hover .dmc-art-more__media img{ transform:scale(1.045); }
.dmc-art-more__body{ padding:22px 24px 26px; display:flex; flex-direction:column; flex:1; }
.dmc-art-more__kick{
  font-family:var(--font-d); font-weight:600; font-size:11.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--sky-600); margin-bottom:10px;
}
.dmc-art-more__ttl{
  font-family:var(--font-d); font-weight:600; font-size:1.08rem; line-height:1.38; color:var(--ink);
  margin-bottom:10px;
}
.dmc-art-more__ex{ font-size:14.6px; line-height:1.65; color:var(--ink-soft); flex:1; }
.dmc-art-more__meta{ margin-top:16px; font-size:12.6px; font-weight:500; color:var(--ink-soft); opacity:.75; }

/* ── 10 · BREADCRUMBS ─────────────────────────────────────────────────────── */

.dmc-art__crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-family:var(--font-b); font-size:13.4px; font-weight:500; color:var(--soft-2);
}
.dmc-art__crumbs a{ color:var(--soft-2); transition:color .2s; }
.dmc-art__crumbs a:hover{ color:var(--sky-400); }
.dmc-art__crumbs span[aria-current]{ color:var(--sky-300); }
.dmc-art__crumbs .sep{ opacity:.45; }

/* ── 11 · READING PROGRESS ────────────────────────────────────────────────── */

.dmc-art-prog{
  position:fixed; top:0; left:0; height:3px; width:0;
  background:var(--grad-rise); z-index:3000;
  transition:width .1s linear; pointer-events:none;
}

/* ── 12 · RESPONSIVE ──────────────────────────────────────────────────────── */

@media (max-width:1240px){
  .dmc-page--article{ --art-rail:308px; --art-gap:52px; }
}

@media (max-width:1080px){
  .dmc-art-grid{ grid-template-columns:minmax(0,1fr); gap:52px; }
  .dmc-art__prose{ max-width:none; }
  .dmc-art-rail{ position:static; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
  .dmc-art-toc{ display:none; }               /* TOC is a desktop affordance */
  .dmc-art-more__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:768px){
  .dmc-art-rail{ grid-template-columns:minmax(0,1fr); }
  .dmc-art-up__grid{ grid-template-columns:minmax(0,1fr); }
  .dmc-art-more__grid{ grid-template-columns:minmax(0,1fr); }
  .dmc-art-feat__frame{ aspect-ratio:16/9; }
  .dmc-art-author{ flex-direction:column; gap:14px; }
  .dmc-art__prose{ font-size:16.8px; }
  .dmc-art-meta{ gap:10px 18px; }
}

@media (max-width:520px){
  .dmc-art-feat{ margin-top:-56px; }
  .dmc-art-feat__frame{ aspect-ratio:4/3; border-radius:var(--rad-sm); }
  .dmc-art-note, .dmc-art-key{ padding:20px 20px; }
  .dmc-art__prose blockquote{ padding-left:20px; }
}

@media (prefers-reduced-motion:reduce){
  .dmc-page--article *{ animation:none !important; transition:none !important; }
  .dmc-art-prog{ display:none; }
}

/* print */
@media print{
  .dmc-art-rail, .dmc-art-prog, .dmc-art-more, .dmc-art-up{ display:none !important; }
  .dmc-page--article{ background:#fff; }
  .dmc-art__prose{ max-width:none; font-size:11pt; }
}