/* A quiet reading view matching the Journal archive; article data stays intact. */
.article-page { color: #f3f2ef; background: #101113; }
.article-page .article-hero { padding: 144px 0 46px; border: 0; background: #101113; }
.article-page .article-hero::before,
.article-page .article-reader::before,
.article-page .article-body::before,
.article-page .article-toc::before,
.article-page .article-dossier::before { content: none; }
.article-page .article-hero-grid { display: block; padding-bottom: 42px; border-bottom: 1px solid #303238; }
.article-page .article-back { margin: 0 0 28px; color: #9da1aa; font-size: 11px; font-weight: 500; letter-spacing: .02em; text-transform: none; }
.article-page .article-back:hover { transform: none; color: #e2cb9b; }
.article-page .article-category-link { display: flex; width: fit-content; margin: 0 0 22px; color: #cfb27b; font-size: 11px; letter-spacing: .1em; }
.article-page h1 { max-width: 1040px; margin: 0 0 26px; color: #f4f2ec; font-size: clamp(38px, 4.7vw, 64px); line-height: 1.08; letter-spacing: -.05em; overflow-wrap: break-word; }
.article-page .article-hero .lead { max-width: 820px; margin: 0; color: #b0b2ba; font-size: 17px; line-height: 1.75; }
.article-page .article-byline { display: flex; align-items: center; gap: 16px; margin-top: 28px; }
.article-page .article-byline > .brand-mark { width: 38px; height: 42px; flex: 0 0 38px; }
.article-page .article-byline > div { min-width: 0; }
.article-page .article-byline strong { display: block; margin-bottom: 9px; color: #dedbd3; font-size: 13px; font-weight: 600; }
.article-page .article-meta { gap: 14px; margin: 0; }
.article-page .article-meta span { min-height: 0; padding: 0; border: 0; border-radius: 0; color: #969ba5; background: none; font-size: 11px; font-weight: 500; line-height: 1.5; letter-spacing: 0; text-transform: none; }
.article-page .article-meta span + span::before { content: '·'; margin-right: 14px; color: #6a6e76; }
.article-page .article-reader { overflow: visible; padding: 0 0 92px; background: #101113; }
.article-page .article-shell { grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto 1fr; grid-template-areas: 'body contents' 'body brief'; gap: 24px 44px; }
.article-page .article-body { grid-area: body; min-width: 0; overflow: visible; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.article-page .article-cover { height: clamp(240px, 28vw, 390px); margin-bottom: 46px; border: 1px solid #303238; border-radius: 13px; background: linear-gradient(135deg, rgba(8, 10, 14, .06), rgba(8, 10, 14, .25)), url('hero-panorama-20261017.webp') center / cover; }
.article-page:has([data-article-category][href*='category=compliance']) .article-cover,
.article-page:has([data-article-category][href*='category=pricing']) .article-cover { background-image: linear-gradient(180deg, rgba(8, 10, 14, .05), rgba(8, 10, 14, .38)), url('london-skyline.jpg'); background-position: center 44%; }
.article-page:has([data-article-category][href*='category=ui-ux']) .article-cover { background-image: linear-gradient(135deg, rgba(8, 10, 14, .04), rgba(8, 10, 14, .12)), url('deltyweb-website-desktop-20261016.jpg'); background-color: #141619; background-size: cover, contain; background-repeat: no-repeat; }
.article-page [data-article-content] { max-width: 72ch; margin-inline: auto; font-size: 17px; }
.article-page .article-body section { padding: 0; scroll-margin-top: 115px; }
.article-page .article-body section + section { margin-top: 44px; padding-top: 36px; border-top: 1px solid #303238; }
.article-page .article-body h2 { margin: 0 0 22px; color: #eeeae1; font-size: clamp(25px, 2.4vw, 32px); line-height: 1.25; letter-spacing: -.035em; }
.article-page .article-body p,
.article-page .article-body li { color: #b5b8c0; font-size: 17px; line-height: 1.85; }
.article-page .article-body p { margin: 0 0 22px; }
.article-page .article-body ul { gap: 10px; margin: 24px 0 0; padding-left: 22px; }
.article-page .article-body li::marker { color: #c6aa72; }
.article-page .article-callout { margin: 42px 0 0; padding: 26px 28px; border: 1px solid #4c4436; border-left: 3px solid #c6aa72; border-radius: 0 10px 10px 0; background: #211f1a; box-shadow: none; }
.article-page .article-callout strong { margin-bottom: 12px; color: #d3bb88; font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.article-page .article-callout p { margin: 0; color: #c4bcae; font-size: 16px; }
.article-page .article-toc,
.article-page .article-dossier { position: static; align-self: start; min-width: 0; padding: 25px; border: 1px solid #303238; border-radius: 13px; background: #16181c; box-shadow: none; }
.article-page .article-toc { grid-area: contents; }
.article-page .article-dossier { grid-area: brief; }
.article-page .article-toc h2,
.article-page .article-dossier h2 { margin: 0 0 20px; color: #e4d3ae; font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -.035em; }
.article-page .article-toc nav { display: grid; gap: 0; }
.article-page .article-toc a { display: block; min-height: 44px; padding: 14px 0; border-top: 1px solid #303238; color: #afb3bd; font-size: 13px; font-weight: 500; line-height: 1.6; }
.article-page .article-toc a span { display: none; }
.article-page .article-toc a:hover { color: #e4cca0; transform: none; }
.article-page .article-dossier p { margin: 0 0 24px; color: #afb3bd; font-size: 14px; line-height: 1.7; }
.article-page .article-dossier dl { gap: 0; }
.article-page .article-dossier dl > div { display: block; padding: 16px 0 0; margin-top: 16px; border-top: 1px solid #303238; }
.article-page .article-dossier dt { margin-bottom: 7px; color: #8d939e; font-size: 10px; font-weight: 500; letter-spacing: .04em; }
.article-page .article-dossier dd { margin: 0; color: #c9ccd2; font-size: 13px; font-weight: 500; line-height: 1.6; }
.article-page .article-share { flex-wrap: wrap; gap: 20px; margin-top: 42px; padding: 22px; border: 1px solid #303238; border-radius: 11px; background: #17191d; }
.article-page .article-share-copy small { color: #a6aab3; font-size: 10px; font-weight: 500; letter-spacing: .05em; }
.article-page .article-share-copy strong { color: #dcd8cf; font-size: 14px; font-weight: 600; }
.article-page .article-share-actions { gap: 8px; }
.article-page .article-share-actions :is(a, button) { min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid #44413a; border-radius: 8px; color: #baa781; background: #1e1e1d; }
.article-page .article-share-actions :is(a, button):hover,
.article-page .article-share-actions button.is-copied { transform: none; color: #efd9a8; border-color: #8a744a; background: #2c271e; }
.article-page .article-nav { gap: 18px; margin-top: 24px; }
.article-page .article-nav a { min-width: 0; min-height: 114px; padding: 24px; border: 1px solid #303238; border-radius: 11px; color: #cbcbd0; background: #17191d; }
.article-page .article-nav a:hover { transform: none; color: #e7d0a0; border-color: #726042; background: #211f1b; }
.article-page .article-nav small { margin-bottom: 8px; color: #979ca6; font-size: 10px; font-weight: 500; letter-spacing: .04em; }
.article-page .article-nav span { font-size: 14px; font-weight: 500; line-height: 1.5; }
.article-page :is(.article-back, .article-category-link, .article-toc a, .article-share-actions a, .article-share-actions button, .article-nav a, .article-script-note a):focus-visible { outline: 2px solid #c9ad73; outline-offset: 4px; }
.article-page .article-script-note { padding: 24px; border: 1px dashed #77613a; border-radius: 10px; }
.article-page .article-script-note a { color: #dfc58f; text-decoration: underline; }
@media (max-width: 1000px) {
  .article-page .article-shell { grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; }
  .article-page .article-toc, .article-page .article-dossier { padding: 22px; }
}
@media (max-width: 800px) {
  .article-page .article-hero { padding: 124px 0 34px; }
  .article-page .article-hero-grid { padding-bottom: 30px; }
  .article-page .article-shell { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: 'contents' 'body' 'brief'; gap: 28px; }
  .article-page .article-toc { padding: 22px; }
  .article-page .article-toc nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .article-page .article-toc a { padding-top: 12px; }
  .article-page .article-cover { height: 320px; margin-bottom: 34px; }
  .article-page .article-dossier dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 560px) {
  .article-page .article-hero .lead { font-size: 15px; }
  .article-page .article-byline { align-items: flex-start; gap: 12px; }
  .article-page .article-meta { gap: 8px 12px; }
  .article-page .article-meta span + span::before { margin-right: 12px; }
  .article-page .article-toc nav { grid-template-columns: 1fr; gap: 0; }
  .article-page .article-cover { height: 220px; }
  .article-page .article-body p, .article-page .article-body li { font-size: 16px; line-height: 1.8; }
  .article-page .article-callout { padding: 22px; }
  .article-page .article-share { flex-direction: column; align-items: flex-start; padding: 20px; }
  .article-page .article-share-actions { justify-content: flex-start; }
  .article-page .article-nav { grid-template-columns: 1fr; }
  .article-page .article-nav a { padding: 22px; text-align: left; }
  .article-page .article-dossier dl { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .article-page :is(.article-back, .article-toc a, .article-share-actions a, .article-share-actions button, .article-nav a) { transition: none; }
}