/*
 * FM Digital Solutions — Studio Updates Article Styles
 * Covers: single article + archive listing
 * Depends on: tokens.css, global.css
 */

/* ════════════════════════════════════════════════
   SINGLE ARTICLE
════════════════════════════════════════════════ */

/* ── Hero ── */
.art-hero {
  padding-top:    calc(var(--nav-h) + 4.5rem);
  padding-bottom: 4rem;
  position:       relative;
  overflow:       hidden;
  border-bottom:  1px solid var(--border);
}

/* Image hero: blurred background image */
.art-hero--image {
  background-image:    var(--thumb);
  background-size:     cover;
  background-position: center 30%;
  background-repeat:   no-repeat;
}
.art-hero-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    180deg,
    rgba(12, 14, 18, .55) 0%,
    rgba(12, 14, 18, .82) 55%,
    rgba(12, 14, 18, .97) 100%
  );
}

/* Gradient hero fallback */
.art-hero--gradient::before {
  content:  '';
  position: absolute;
  inset:    0;
  background: radial-gradient(ellipse at 70% 0%, rgba(107,61,150,.18) 0%, transparent 65%),
              radial-gradient(ellipse at 20% 100%, rgba(91,191,42,.08) 0%, transparent 60%);
  pointer-events: none;
}

.art-hero-inner {
  position: relative;
  z-index:  2;
  max-width: 840px;
}

/* Back link */
.art-breadcrumb { margin-bottom: 2rem; }
.art-back-link {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  font-family:     var(--font-mono);
  font-size:       10.5px;
  font-weight:     600;
  letter-spacing:  .07em;
  text-transform:  uppercase;
  color:           var(--fg-subtle);
  text-decoration: none;
  transition:      color .15s;
}
.art-back-link:hover { color: var(--fg-muted); }
.art-back-link svg   { width: 14px; height: 14px; }

/* Topics */
.art-topics {
  display:       flex;
  flex-wrap:     wrap;
  gap:           6px;
  margin-bottom: 1.25rem;
}
.art-topic-tag {
  font-family:     var(--font-mono);
  font-size:       10px;
  font-weight:     600;
  letter-spacing:  .08em;
  text-transform:  uppercase;
  padding:         .25rem .7rem;
  border-radius:   20px;
  background:      rgba(107,61,150,.15);
  border:          1px solid rgba(107,61,150,.3);
  color:           var(--purple-light);
  text-decoration: none;
  transition:      background .15s;
}
.art-topic-tag:hover { background: rgba(107,61,150,.25); }

/* Title */
.art-h1 {
  font-family:    var(--font-head);
  font-weight:    800;
  font-size:      clamp(2rem, 5.5vw, 4rem);
  letter-spacing: -.04em;
  line-height:    1.05;
  color:          #fff;
  text-wrap:      balance;
  margin-bottom:  .75rem;
}
.art-subtitle {
  font-size:   1.1rem;
  color:       rgba(255,255,255,.7);
  line-height: 1.65;
  max-width:   56ch;
  margin-bottom: 1.5rem;
}

/* Meta row */
.art-meta-row {
  display:     flex;
  align-items: center;
  gap:         .4rem;
  flex-wrap:   wrap;
}
.art-meta-item {
  display:     inline-flex;
  align-items: center;
  gap:         5px;
  font-family: var(--font-mono);
  font-size:   10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color:       var(--fg-muted);
}
.art-meta-item svg { width: 13px; height: 13px; opacity: .7; }
.art-meta-sep { color: var(--fg-subtle); font-size: 10px; }

/* ── Specs band ── */
.art-specs-band {
  background:    var(--surface);
  border-bottom: 1px solid var(--border);
}
.art-specs-inner {
  display:         flex;
  align-items:     stretch;
  overflow-x:      auto;
  scrollbar-width: none;
  gap:             0;
}
.art-specs-inner::-webkit-scrollbar { display: none; }
.art-spec-cell {
  flex:           1;
  min-width:      120px;
  padding:        1.25rem 2rem;
  display:        flex;
  flex-direction: column;
  gap:            4px;
}
.art-spec-cell + .art-spec-cell { border-left: 1px solid var(--border); }
.art-spec-label {
  font-family:    var(--font-mono);
  font-size:      9.5px;
  font-weight:    600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--fg-subtle);
}
.art-spec-value {
  font-family:    var(--font-head);
  font-weight:    700;
  font-size:      .95rem;
  color:          var(--fg);
  letter-spacing: -.01em;
}

/* ── Article body layout ── */
.art-body-wrap { padding-block: 4rem; }
.art-body-inner {
  display:               grid;
  grid-template-columns: 1fr 280px;
  gap:                   4rem;
  align-items:           start;
}
@media (max-width: 960px) {
  .art-body-inner {
    grid-template-columns: 1fr;
    gap:                   3rem;
  }
  .art-sidebar { order: -1; }
}

/* ── Content column ── */
.art-content { min-width: 0; }

/* ── Block builder blocks ── */

/* Shared block spacing */
.ab { margin-bottom: 2.5rem; }
.ab:last-child { margin-bottom: 0; }

/* Text block */
.ab-text {}
.ab-h2 {
  font-family:    var(--font-head);
  font-weight:    800;
  font-size:      clamp(1.4rem, 3vw, 2rem);
  letter-spacing: -.03em;
  color:          #fff;
  line-height:    1.1;
  margin-bottom:  1rem;
  scroll-margin-top: calc(var(--nav-h) + 2rem);
}

/* Prose styles — rich text output */
.ab-prose {
  color:       var(--fg-muted);
  font-size:   1rem;
  line-height: 1.8;
  max-width:   68ch;
}
.ab-prose p  { margin-bottom: 1.1em; }
.ab-prose p:last-child { margin-bottom: 0; }
.ab-prose h3 {
  font-family:    var(--font-head);
  font-weight:    700;
  font-size:      1.15rem;
  color:          var(--fg);
  letter-spacing: -.02em;
  margin:         1.75em 0 .5em;
}
.ab-prose strong { color: var(--fg); font-weight: 600; }
.ab-prose em     { color: var(--fg-muted); font-style: italic; }
.ab-prose a {
  color:           var(--purple-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ab-prose a:hover { color: #fff; }
.ab-prose ul,
.ab-prose ol {
  padding-left: 1.5rem;
  margin-bottom: 1em;
  display: flex;
  flex-direction: column;
  gap: .35em;
}
.ab-prose li   { color: var(--fg-muted); }
.ab-prose code {
  font-family:  var(--font-mono);
  font-size:    .85em;
  background:   var(--surface-2);
  border:       1px solid var(--border);
  color:        var(--lime);
  padding:      .1em .4em;
  border-radius: 3px;
}
.ab-prose pre {
  background:   var(--surface-2);
  border:       1px solid var(--border);
  border-radius: 8px;
  padding:      1.25rem 1.5rem;
  overflow-x:   auto;
  margin-bottom: 1em;
}
.ab-prose pre code {
  background: none;
  border:     none;
  padding:    0;
  font-size:  .88rem;
  color:      var(--fg-muted);
}
.ab-prose blockquote {
  border-left: 3px solid var(--purple);
  padding:     .5rem 0 .5rem 1.25rem;
  color:       var(--fg-muted);
  font-style:  italic;
  margin:      1.25em 0;
}

/* Image block */
.ab-image { margin-left: 0; margin-right: 0; }
.ab-image img {
  width:         100%;
  border-radius: 10px;
  border:        1px solid var(--border);
  display:       block;
}
.ab-image--half { max-width: 50%; }
@media (max-width: 600px) { .ab-image--half { max-width: 100%; } }
.ab-caption {
  font-family:    var(--font-mono);
  font-size:      10px;
  font-weight:    600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color:          var(--fg-subtle);
  margin-top:     .6rem;
  text-align:     center;
}

/* Callout block */
.ab-callout {
  display:       flex;
  gap:           1rem;
  border-radius: 8px;
  border:        1px solid var(--border);
  padding:       1.25rem 1.5rem;
  background:    var(--surface);
}
.ab-callout--default { border-left: 3px solid var(--purple); }
.ab-callout--green   { border-left: 3px solid var(--green); background: rgba(91,191,42,.04); }
.ab-callout--orange  { border-left: 3px solid var(--orange, #F97316); background: rgba(249,115,22,.04); }
.ab-callout--purple  { border-left: 3px solid var(--purple); background: rgba(107,61,150,.07); }
.ab-callout-icon {
  font-size:   1.1rem;
  flex-shrink: 0;
  margin-top:  1px;
}
.ab-callout-heading {
  font-family:   var(--font-head);
  font-weight:   700;
  font-size:     .9rem;
  color:         var(--fg);
  margin-bottom: .35rem;
  letter-spacing: -.01em;
}
.ab-callout-text { font-size: .9rem; color: var(--fg-muted); line-height: 1.65; }
.ab-callout-text p { margin-bottom: .5em; }
.ab-callout-text p:last-child { margin-bottom: 0; }

/* HTML block */
.ab-html { overflow-x: auto; }
.ab-html iframe { max-width: 100%; border-radius: 8px; }

/* Divider block */
.ab-divider {
  display:     flex;
  align-items: center;
  gap:         1rem;
  padding:     .5rem 0;
}
.ab-divider::before,
.ab-divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--border);
}
.ab-divider:not(:has(.ab-divider-label))::after { display: none; }
.ab-divider-label {
  font-family:    var(--font-mono);
  font-size:      10px;
  font-weight:    600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--fg-subtle);
  white-space:    nowrap;
}

/* Specs block (inline) */
.ab-specs {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: 8px;
  padding:       1.25rem 1.5rem;
}
.ab-specs-heading {
  font-family:    var(--font-mono);
  font-size:      9.5px;
  font-weight:    600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--fg-subtle);
  margin-bottom:  1rem;
}
.ab-specs-dl { display: flex; flex-direction: column; gap: .5rem; }
.ab-spec-row {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  gap:             2rem;
  padding-bottom:  .5rem;
  border-bottom:   1px solid var(--border);
}
.ab-spec-row:last-child { border-bottom: none; padding-bottom: 0; }
.ab-spec-label {
  font-family:    var(--font-mono);
  font-size:      10px;
  font-weight:    600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color:          var(--fg-subtle);
  flex-shrink:    0;
}
.ab-spec-value {
  font-family:    var(--font-head);
  font-weight:    600;
  font-size:      .9rem;
  color:          var(--fg);
  text-align:     right;
}

/* ── Inline tags + footer ── */
.art-tag-row {
  display:     flex;
  flex-wrap:   wrap;
  gap:         .4rem;
  margin-top:  3rem;
  padding-top: 2rem;
  border-top:  1px solid var(--border);
}
.art-inline-tag {
  font-family:     var(--font-mono);
  font-size:       10px;
  font-weight:     600;
  letter-spacing:  .04em;
  padding:         .25rem .7rem;
  border-radius:   4px;
  background:      var(--surface-2);
  border:          1px solid var(--border);
  color:           var(--fg-subtle);
  text-decoration: none;
  transition:      color .15s, border-color .15s;
}
.art-inline-tag:hover { color: var(--fg-muted); border-color: var(--border-mid); }

.art-footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             1rem;
  margin-top:      2.5rem;
  padding-top:     2rem;
  border-top:      1px solid var(--border);
}
.art-share {
  display:     flex;
  align-items: center;
  gap:         .6rem;
}
.art-share-label {
  font-family:    var(--font-mono);
  font-size:      10px;
  font-weight:    600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color:          var(--fg-subtle);
}
.art-share-btn {
  width:           32px;
  height:          32px;
  border-radius:   50%;
  border:          1px solid var(--border);
  background:      var(--surface);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--fg-muted);
  text-decoration: none;
  transition:      color .15s, border-color .15s, background .15s;
}
.art-share-btn:hover { color: #fff; border-color: var(--border-mid); background: var(--surface-2); }
.art-share-btn svg { width: 14px; height: 14px; }

.art-empty { color: var(--fg-muted); padding: 3rem 0; }

/* ── Sidebar ── */
.art-sidebar { min-width: 0; }
.art-sidebar-inner {
  position:  sticky;
  /* top set dynamically by JS from --nav-h */
  top:       88px;
  display:   flex;
  flex-direction: column;
  gap:       1.5rem;
}
@media (max-width: 960px) {
  .art-sidebar-inner { position: static; }
}

/* TOC */
.art-toc {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: 8px;
  overflow:      hidden;
}
.art-toc-toggle {
  width:           100%;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         .85rem 1rem;
  background:      none;
  border:          none;
  cursor:          pointer;
  color:           var(--fg);
}
.art-toc-label {
  font-family:    var(--font-mono);
  font-size:      10px;
  font-weight:    700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--fg-subtle);
}
.art-toc-chevron {
  width:      14px;
  height:     14px;
  color:      var(--fg-subtle);
  transition: transform .2s;
  flex-shrink: 0;
}
.art-toc-toggle[aria-expanded="false"] .art-toc-chevron { transform: rotate(-90deg); }

.art-toc-list {
  list-style: none;
  padding:    0 0 .5rem;
  border-top: 1px solid var(--border);
}
.art-toc-item { padding: 0; }
.art-toc-link {
  display:         block;
  padding:         .45rem 1rem;
  font-size:       .8125rem;
  color:           var(--fg-muted);
  text-decoration: none;
  border-left:     2px solid transparent;
  transition:      color .15s, border-color .15s;
  line-height:     1.45;
}
.art-toc-link:hover { color: var(--fg); border-left-color: var(--border-mid); }
.art-toc-link.is-active { color: var(--purple-light); border-left-color: var(--purple-light); }

/* Sidebar info widget */
.art-sidebar-widget {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: 8px;
  padding:       1.1rem;
}
.art-sw-label {
  font-family:    var(--font-mono);
  font-size:      9px;
  font-weight:    700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--fg-subtle);
  margin-bottom:  .75rem;
}
.art-sw-dl { display: flex; flex-direction: column; gap: .5rem; }
.art-sw-row {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  gap:             1rem;
}
.art-sw-row dt {
  font-family:    var(--font-mono);
  font-size:      9.5px;
  font-weight:    600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color:          var(--fg-subtle);
  flex-shrink:    0;
}
.art-sw-row dd {
  font-size:  .8125rem;
  color:      var(--fg-muted);
  text-align: right;
}
.art-sw-topic {
  display:         inline-block;
  font-family:     var(--font-mono);
  font-size:       9px;
  font-weight:     600;
  letter-spacing:  .06em;
  text-transform:  uppercase;
  color:           var(--purple-light);
  text-decoration: none;
  background:      rgba(107,61,150,.1);
  padding:         .15rem .5rem;
  border-radius:   3px;
  border:          1px solid rgba(107,61,150,.2);
}
.art-sw-topic:hover { background: rgba(107,61,150,.18); }

/* Sidebar CTA */
.art-sidebar-cta {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: 8px;
  padding:       1.1rem;
}
.art-sw-cta-body {
  font-size:   .8125rem;
  color:       var(--fg-muted);
  line-height: 1.6;
  margin:      .5rem 0 1rem;
}
.btn-sm {
  height:        36px;
  padding:       0 1rem;
  font-size:     12px;
  border-radius: 5px;
}

/* ════════════════════════════════════════════════
   ARCHIVE
════════════════════════════════════════════════ */

/* Hero */
.archive-hero {
  padding-top:    calc(var(--nav-h) + 5rem);
  padding-bottom: 4rem;
  border-bottom:  1px solid var(--border);
}
.arch-eyebrow {
  display:       inline-flex;
  align-items:   center;
  gap:           7px;
  font-family:   var(--font-mono);
  font-size:     10.5px;
  font-weight:   600;
  letter-spacing:.08em;
  text-transform: uppercase;
  color:         var(--fg-subtle);
  margin-bottom: 1.25rem;
}
.arch-eyebrow-dot {
  width:         5px;
  height:        5px;
  border-radius: 50%;
  background:    var(--purple-light);
  flex-shrink:   0;
}
.arch-h1 {
  font-family:    var(--font-head);
  font-weight:    800;
  font-size:      clamp(2.5rem, 7vw, 5rem);
  letter-spacing: -.04em;
  line-height:    1;
  color:          #fff;
  margin-bottom:  1rem;
}
.arch-h1 em { font-style: normal; color: var(--purple-light); }
.arch-sub   { font-size: 1rem; color: var(--fg-muted); line-height: 1.7; max-width: 52ch; }

/* Topic filter bar */
.topic-filter-bar {
  padding-block:  1.25rem;
  border-bottom:  1px solid var(--border);
  background:     var(--surface);
  position:       sticky;
  top:            var(--nav-h);
  z-index:        40;
}
.topic-pills {
  display:    flex;
  flex-wrap:  wrap;
  gap:        .5rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.topic-pills::-webkit-scrollbar { display: none; }
.topic-pill {
  display:         inline-flex;
  align-items:     center;
  height:          30px;
  padding:         0 .85rem;
  border-radius:   100px;
  border:          1px solid var(--border-mid);
  background:      var(--surface-2);
  font-family:     var(--font-mono);
  font-size:       10.5px;
  font-weight:     600;
  letter-spacing:  .04em;
  color:           var(--fg-subtle);
  text-decoration: none;
  transition:      color .15s, border-color .15s, background .15s;
  white-space:     nowrap;
}
.topic-pill:hover { color: var(--fg-muted); border-color: var(--border-mid); background: var(--surface-3); }
.topic-pill.is-active {
  background:    var(--purple-dim, rgba(107,61,150,.2));
  border-color:  var(--purple);
  color:         var(--purple-light);
}

/* Archive grid */
.archive-grid-section { padding-block: 4rem; }
.arch-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:                   2rem;
  list-style:            none;
}
@media (max-width: 1024px) { .arch-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px)  { .arch-grid { grid-template-columns: 1fr; } }

/* Featured card spans full row */
.arch-card--featured {
  grid-column: 1 / -1;
  display:     grid;
  grid-template-columns: 1.4fr 1fr;
  gap:         0;
  align-items: stretch;
}
@media (max-width: 720px) {
  .arch-card--featured { grid-template-columns: 1fr; }
}

.arch-card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: 10px;
  overflow:      hidden;
  display:       flex;
  flex-direction: column;
  transition:    border-color .2s, transform .2s;
}
.arch-card:hover { border-color: var(--border-mid); transform: translateY(-2px); }
.arch-card--featured:hover { transform: none; }

.arch-card-thumb {
  display:  block;
  overflow: hidden;
}
.arch-card--featured .arch-card-thumb {
  min-height: 280px;
}
.arch-thumb-img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform .4s ease;
}
.arch-card:hover .arch-thumb-img { transform: scale(1.02); }

.arch-card-thumb--placeholder {
  background:      var(--surface-2);
  display:         flex;
  align-items:     center;
  justify-content: center;
  aspect-ratio:    16/9;
}
.arch-card--featured .arch-card-thumb--placeholder { aspect-ratio: auto; min-height: 240px; }
.arch-thumb-placeholder-text {
  font-family:    var(--font-head);
  font-weight:    800;
  font-size:      2rem;
  color:          var(--border-mid);
  letter-spacing: -.05em;
}

.arch-card-body {
  padding:        1.5rem;
  display:        flex;
  flex-direction: column;
  flex:           1;
}
.arch-card--featured .arch-card-body { padding: 2rem; justify-content: center; }

.arch-card-topics {
  display:       flex;
  flex-wrap:     wrap;
  gap:           5px;
  margin-bottom: .75rem;
}
.arch-topic-tag {
  font-family:     var(--font-mono);
  font-size:       9.5px;
  font-weight:     600;
  letter-spacing:  .07em;
  text-transform:  uppercase;
  padding:         .2rem .6rem;
  border-radius:   20px;
  background:      rgba(107,61,150,.1);
  border:          1px solid rgba(107,61,150,.2);
  color:           var(--purple-light);
  text-decoration: none;
}

.arch-card-title {
  font-family:    var(--font-head);
  font-weight:    700;
  font-size:      1rem;
  letter-spacing: -.02em;
  line-height:    1.25;
  color:          #fff;
  margin-bottom:  .5rem;
}
.arch-card--featured .arch-card-title {
  font-size:   clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 800;
  margin-bottom: .75rem;
}
.arch-card-title a {
  color:           inherit;
  text-decoration: none;
}
.arch-card-title a:hover { color: rgba(255,255,255,.85); }

.arch-card-subtitle {
  font-size:   .8375rem;
  color:       var(--fg-muted);
  line-height: 1.6;
  flex:        1;
  margin-bottom: 1rem;
  display:     -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow:    hidden;
}
.arch-card--featured .arch-card-subtitle {
  -webkit-line-clamp: 4;
  font-size: .9rem;
  max-width: 52ch;
}

.arch-card-meta {
  display:     flex;
  align-items: center;
  gap:         .4rem;
  margin-top:  auto;
}
.arch-card-date,
.arch-card-read-time {
  font-family:    var(--font-mono);
  font-size:      9.5px;
  font-weight:    600;
  letter-spacing: .04em;
  color:          var(--fg-subtle);
}
.arch-card-sep { color: var(--fg-subtle); font-size: 8px; }

/* Pagination */
.arch-pagination { margin-top: 3rem; }
.arch-pagination .page-numbers {
  display:    flex;
  flex-wrap:  wrap;
  gap:        .4rem;
  list-style: none;
}
.arch-pagination .page-numbers li a,
.arch-pagination .page-numbers li span {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       36px;
  height:          36px;
  padding:         0 .75rem;
  border-radius:   6px;
  border:          1px solid var(--border);
  background:      var(--surface);
  font-family:     var(--font-mono);
  font-size:       11px;
  font-weight:     600;
  color:           var(--fg-muted);
  text-decoration: none;
  transition:      color .15s, border-color .15s;
}
.arch-pagination .page-numbers li .current {
  background:  var(--purple-dim, rgba(107,61,150,.15));
  border-color: var(--purple);
  color:        var(--purple-light);
}
.arch-pagination .page-numbers li a:hover { color: var(--fg); border-color: var(--border-mid); }

/* Empty state */
.arch-empty {
  padding:    4rem 0;
  text-align: center;
  color:      var(--fg-muted);
}


/* ── Locked cover image (all posts) ── */
.art-hero--gradient{padding-bottom:2.5rem;border-bottom:0}
.art-cover-wrap{margin-top:0}
.art-cover{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:var(--surface);aspect-ratio:16/9;max-height:560px;width:100%}
.art-cover-img{display:block;width:100%;height:100%;object-fit:cover}
.art-cover--fallback{display:flex;flex-direction:column;justify-content:flex-end;gap:.75rem;padding:2.5rem;
  background:radial-gradient(ellipse at 75% 0%,rgba(107,61,150,.45),transparent 60%),radial-gradient(ellipse at 10% 100%,rgba(33,122,44,.4),transparent 55%),#0c0e12}
.art-cover-fb-tag{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#C9A3EA}
.art-cover-fb-title{font-family:var(--font-display,inherit);font-weight:700;font-size:clamp(1.5rem,3.4vw,2.75rem);line-height:1.1;color:#fff;max-width:20ch}
.art-body-wrap{padding-top:3rem}

/* ── Sidebar fill ── */
.art-author-row{display:flex;align-items:center;gap:.8rem}
.art-author-av{width:44px;height:44px;border-radius:50%;background:#4b2a6b;color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:13px;font-weight:700;flex-shrink:0}
.art-author-name{font-weight:600;color:var(--fg);font-size:.9rem;margin:0}
.art-author-role{color:var(--fg-muted);font-size:.78rem;margin:.15rem 0 0}
.art-more-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9rem}
.art-more-list a{display:block;color:var(--fg);font-size:.875rem;line-height:1.4;text-decoration:none;font-weight:500}
.art-more-list a:hover{color:#C9A3EA}
.art-more-list time{display:block;margin-top:.2rem;font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-muted)}
.art-sw-share{display:flex;flex-wrap:wrap;gap:.5rem}
.art-sw-share a{padding:.4rem .8rem;border:1px solid var(--border);border-radius:6px;font-size:.78rem;color:var(--fg-muted);text-decoration:none;transition:color .15s,border-color .15s}
.art-sw-share a:hover{color:#fff;border-color:var(--border-mid)}
.art-sidebar-cta{background:linear-gradient(160deg,rgba(107,61,150,.28),var(--surface) 70%);border-color:rgba(107,61,150,.4)}

/* ── Cover as a slim banner, aligned to the page grid ── */
.art-hero-inner{max-width:1160px}
.art-hero-inner .art-h1,.art-hero-inner .art-subtitle{max-width:860px}
.art-cover{aspect-ratio:21/9;max-height:none;border-radius:14px}
@media (max-width:640px){.art-cover{aspect-ratio:16/9}}


/* ═══ LOCKED ARTICLE LAYOUT ═══
   Hero: text left, image designed for the post right.
   Body: content + sticky sidebar for the first 3 blocks, then full width. */
.art-hero-inner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:3.5rem;align-items:start;max-width:1160px}
.art-hero-inner>*{grid-column:1}
.art-hero-inner .art-h1,.art-hero-inner .art-subtitle{max-width:none}
.art-hero-art{grid-column:2;grid-row:1 / span 6;align-self:center;margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:var(--surface);aspect-ratio:16/10;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.art-hero-img{display:block;width:100%;height:100%;object-fit:cover}
.art-hero-art--fallback{display:flex;flex-direction:column;justify-content:flex-end;gap:.75rem;padding:2rem;
  background:radial-gradient(ellipse at 75% 0%,rgba(107,61,150,.45),transparent 60%),radial-gradient(ellipse at 10% 100%,rgba(33,122,44,.4),transparent 55%),#0c0e12}
.art-hero-fb-tag{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#C9A3EA}
.art-hero-fb-title{font-weight:700;font-size:clamp(1.25rem,2.2vw,1.9rem);line-height:1.15;color:#fff}
.art-hero--gradient{padding-bottom:3rem}
.art-hero--gradient .art-h1{font-size:clamp(2rem,3.6vw,3.2rem)}
@media (max-width:960px){
  .art-hero-inner{grid-template-columns:1fr}
  .art-hero-art{grid-column:1;grid-row:auto;margin-top:2rem}
}

/* body: the sidebar spans the first 3 blocks, everything after runs full width */
@media (min-width:961px){
  .art-body-wrap{padding-top:3.5rem}
  .art-body-inner{display:grid;grid-template-columns:minmax(0,1fr) 280px;column-gap:4rem;align-items:start}
  .art-content{display:contents}
  .art-content>.ab{grid-column:1}
  .art-sidebar{grid-column:2;grid-row:1 / span 3;align-self:stretch}
  .art-content>.ab:nth-child(n+4){grid-column:1 / -1}
  .art-content>.art-tag-row,.art-content>.art-footer{grid-column:1 / -1}
}
@media (max-width:960px){
  .art-sidebar{order:0}
  .art-sidebar .art-author,.art-sidebar .art-sidebar-widget,.art-sidebar .art-sidebar-cta{display:none}
}


/* prose fills full-width blocks */
@media (min-width:961px){
  .art-content>.ab:nth-child(n+4) .ab-prose{max-width:none}
}

/* ── Live stats hero card (count-up) ── */
.art-hero-art--stats{container-type:inline-size;
  background:radial-gradient(ellipse at 90% 0%,rgba(107,61,150,.5),transparent 60%),radial-gradient(ellipse at 0% 100%,rgba(33,122,44,.45),transparent 55%),
  linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0/44px 44px,linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/44px 44px,#0c0e12}
.hs-in{height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:7cqw 7cqw 6cqw}
.hs-tag{margin:0;font-family:var(--font-mono);font-size:clamp(10px,2.2cqw,13px);letter-spacing:.1em;text-transform:uppercase;color:#C9A3EA}
.hs-main{display:flex;align-items:center;gap:3.5cqw}
.hs-num{font-weight:700;font-size:25cqw;line-height:.9;color:#fff;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hs-text{display:flex;flex-direction:column;gap:1cqw}
.hs-unit{font-weight:700;font-size:9.5cqw;line-height:1;color:#fff}
.hs-label{font-size:4.2cqw;line-height:1.1;color:#b4b8c4}
.hs-rings{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:3cqw}
.hs-rings li{display:flex;flex-direction:column;align-items:center;gap:1.6cqw}
.hs-ring{position:relative;display:block;width:100%;max-width:15cqw;aspect-ratio:1}
.hs-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.hs-ring circle{fill:none;stroke-width:7}
.hs-bg{stroke:rgba(111,213,123,.18)}
.hs-fg{stroke:#6fd57b;stroke-linecap:round}
.hs-val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:4.2cqw;color:#6fd57b;font-variant-numeric:tabular-nums}
.hs-lbl{font-family:var(--font-mono);font-size:clamp(10px,1.9cqw,12px);letter-spacing:.05em;text-transform:uppercase;color:#9a9ab4;text-align:center}
@container (max-width:430px){
  .hs-rings{grid-template-columns:repeat(2,1fr);row-gap:4cqw}
  .hs-ring{max-width:20cqw}.hs-val{font-size:6cqw}
}

@media (min-width:961px){.art-content>.ab-text:nth-child(n+4) .ab-prose{max-width:none;column-count:1}}

/* readable body text, same size across the whole article */
.ab-prose,.ab-prose p{font-size:1.0625rem;line-height:1.8}
.ab-prose p+p{margin-top:1.1rem}
.ab-h2{margin-bottom:1rem}
@media (min-width:961px){.art-content>.ab:nth-child(n+4) .ab-prose,.art-content>.ab:nth-child(n+4) .ab-prose p{font-size:1.125rem}}

/* share buttons */
.art-sw-share a,.art-sw-share button{padding:.45rem .85rem;border:1px solid var(--border);border-radius:6px;background:transparent;font:inherit;font-size:.78rem;color:var(--fg-muted);text-decoration:none;cursor:pointer;line-height:1.2;transition:color .15s,border-color .15s}
.art-sw-share a:hover,.art-sw-share button:hover{color:#fff;border-color:var(--border-mid)}
.art-sw-share button[hidden]{display:none}
.art-share.art-sw-share{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}


/* ── Floating "Summarize with AI" ── */
.art-ai{position:fixed;left:20px;bottom:20px;z-index:900;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.art-ai-toggle{position:relative;display:flex;align-items:center;gap:.6rem;height:52px;padding:0 18px 0 14px;border:0;border-radius:26px;background:#5b2f86;color:#fff;font:600 13.5px/1 var(--font-body,inherit);cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.4);transition:background .2s}
.art-ai-toggle:hover{background:#6f3da3}
.art-ai-toggle::before{content:"";position:absolute;inset:0;border-radius:26px;background:#5b2f86;opacity:.55;animation:art-ai-pulse 2.4s ease-out infinite;z-index:-1}
.art-ai.is-open .art-ai-toggle::before{animation:none;opacity:0}
@keyframes art-ai-pulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.18,1.45);opacity:0}}
.art-ai-menu{display:flex;flex-direction:column;gap:4px;width:210px;padding:10px;background:var(--surface,#14171d);border:1px solid var(--border-mid,#2a2f3a);border-radius:12px;box-shadow:0 14px 36px rgba(0,0,0,.5)}
.art-ai-menu[hidden]{display:none}
.art-ai-label{padding:2px 8px 6px;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-muted,#a3a8b4)}
.art-ai-menu a,.art-ai-menu button{display:flex;align-items:center;gap:.6rem;padding:.6rem .5rem;border:0;border-radius:8px;background:none;color:var(--fg,#fff);font:inherit;font-size:14px;text-align:left;text-decoration:none;cursor:pointer}
.art-ai-menu a:hover,.art-ai-menu button:hover{background:rgba(255,255,255,.07)}
.art-ai-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.art-ai-toast{display:none;position:absolute;left:0;bottom:64px;padding:.5rem .8rem;border-radius:6px;background:#fff;color:#0c0e12;font-size:12.5px;white-space:nowrap}
.art-ai-toast.is-visible{display:block}
@media (max-width:600px){.art-ai{left:14px;bottom:16px}.art-ai-pill{display:none}.art-ai-toggle{width:58px;height:58px;padding:0;justify-content:center;border-radius:50%}.art-ai-toggle::before{border-radius:50%}}
@media (prefers-reduced-motion:reduce){.art-ai-toggle::before{animation:none}}


/* ── Summarize with AI: circle button (desktop) and inline block (mobile) ── */
.art-ai-toggle{width:56px;height:56px;padding:0;justify-content:center;border-radius:50%;background:#6b3d9a;border:2px solid #C9A3EA;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.art-ai-toggle:hover{background:#7d49b3}
.art-ai-toggle::before{border-radius:50%;background:#6b3d9a}
.art-ai-toggle:focus-visible,.art-ai-menu a:focus-visible,.art-ai-menu button:focus-visible,.art-ai-inline-btns a:focus-visible,.art-ai-inline-btns button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.art-ai-pill{display:none}
.art-ai-toast{display:none;position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:1000;padding:.6rem 1rem;border-radius:8px;background:#fff;color:#0c0e12;font-size:13px;font-weight:600;max-width:calc(100vw - 32px);text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.art-ai-toast.is-visible{display:block}
.art-ai-inline{display:none}
@media (max-width:600px){
  .art-ai{display:none}
  .art-ai-inline{display:block;margin:2.5rem 0 0;padding:1.25rem;border:1px solid var(--border-mid,#2a2f3a);border-radius:12px;background:var(--surface,#14171d)}
  .art-ai-inline-h{display:flex;align-items:center;gap:.5rem;margin:0 0 1rem;font-size:1rem;line-height:1.3;color:#fff}
  .art-ai-inline-h svg{color:#C9A3EA;flex-shrink:0}
  .art-ai-inline-btns{display:flex;flex-wrap:wrap;gap:.6rem}
  .art-ai-inline-btns a,.art-ai-inline-btns button{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 1rem;border:1px solid var(--border-mid,#2a2f3a);border-radius:8px;background:transparent;color:#fff;font:inherit;font-size:14px;text-decoration:none;cursor:pointer}
}


/* tablet and mobile: the sidebar is replaced by inline blocks at the end of the post */
.art-more-inline{display:none}
@media (max-width:960px){
  .art-sidebar{display:none}
  .art-more-inline{display:block;margin:2rem 0 0;padding:1.25rem;border:1px solid var(--border-mid,#2a2f3a);border-radius:12px;background:var(--surface,#14171d)}
  .art-more-inline .art-ai-inline-h{display:block;margin:0 0 1rem;font-size:1rem;color:#fff}
  .art-more-inline .art-more-list a{min-height:44px;display:flex;align-items:center}
}
/* callout buttons */
.ab-callout--green .ab-callout-text a{display:inline-flex;align-items:center;min-height:44px;padding:0 1.1rem;border:1px solid currentColor;border-radius:8px;text-decoration:none;font-weight:600}


/* mobile accordions (closed by default) */
.art-toc-inline{display:none}
@media (max-width:960px){
  .art-acc{margin:1rem 0;padding:0;border:1px solid var(--border-mid,#2a2f3a);border-radius:12px;background:var(--surface,#14171d)}
  .art-acc>summary{list-style:none;display:flex;align-items:center;gap:.5rem;min-height:52px;margin:0;padding:0 1.25rem;cursor:pointer;font-weight:600;font-size:1rem;color:#fff}
  .art-acc>summary::-webkit-details-marker{display:none}
  .art-acc>summary:focus-visible{outline:3px solid #fff;outline-offset:2px;border-radius:12px}
  .art-acc-chev{margin-left:auto;width:10px;height:10px;border-right:2px solid #C9A3EA;border-bottom:2px solid #C9A3EA;transform:rotate(45deg);transition:transform .2s}
  .art-acc[open] .art-acc-chev{transform:rotate(-135deg)}
  .art-acc>:not(summary){margin:0 1.25rem 1.25rem}
  .art-toc-inline{display:block}
  .art-toc-inline-list{list-style:decimal;padding-left:1.25rem}
  .art-toc-inline-list a{display:flex;align-items:center;min-height:44px;color:#fff;text-decoration:none}
  .art-ai-inline.art-acc,.art-more-inline.art-acc{padding:0}
}

@media (max-width:960px){
  .art-content{display:flex;flex-direction:column}
  .art-content>.art-toc-inline{order:-1}
}