/* ══════════════════════════════════════════════════════════════════
   Berkeley Professional Education — article typography & blocks.
   One stylesheet shared by the live article page (article.html) and
   the editor preview (insights-admin.html) so what editors see is
   exactly what readers get. Values mirror the original article
   template's inline styles (DM Sans body 18/1.75, EB Garamond heads).
   ══════════════════════════════════════════════════════════════════ */

.art-wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }

/* ─────── Header ─────── */
.art-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  color: #002676; margin-bottom: 32px; text-decoration: none;
}
.art-badges { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.art-kind {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: #010133;
  background: #FDB515; padding: 5px 11px; border-radius: 999px;
}
.art-kind.is-blog { background: #010133; color: #fff; }
.art-cat {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: #002676;
}
.art-title {
  font-family: var(--font-serif); font-weight: 500; font-size: 46px;
  line-height: 1.08; color: #010133; margin: 0 0 14px;
}
.art-date {
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  letter-spacing: 0.04em; color: #666; margin: 0 0 22px;
}
.art-dek {
  font-family: var(--font-sans); font-size: 20px; line-height: 1.55;
  color: #666; margin: 0 0 28px;
}
.art-author {
  display: flex; align-items: center; gap: 14px; padding: 18px 0;
  border-top: 1px solid #E4E4E4; border-bottom: 1px solid #E4E4E4;
}
.art-author-avatar {
  width: 44px; height: 44px; border-radius: 50%; background: #010133;
  color: #FDB515; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600; flex-shrink: 0;
}
.art-author-avatar.has-photo { background-size: cover; background-position: center; background-repeat: no-repeat; }
.art-author-avatar-link { display: inline-flex; flex-shrink: 0; border-radius: 50%; }
.art-author-name { font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: #010133; }
.art-author-name-link { color: inherit; text-decoration: none; }
.art-author-name-link:hover, .art-author-name-link:focus-visible { color: #002676; text-decoration: underline; text-underline-offset: 3px; }
.art-author-role { font-family: var(--font-sans); font-size: 13px; color: #666; }
.art-author-links {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0;
}
.art-author-archive { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: #002676; text-decoration: none; }
.art-author-li {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 6px; color: #002676;
}
.art-author-li:hover, .art-author-li:focus-visible { color: #010133; background: #F2F2F2; }

/* ─────── Hero / cover ───────
   The cover shares the article text column (760px incl. the same 24px
   side padding) so it reads as part of the text flow. */
.art-hero { max-width: 760px; margin: 0 auto 44px; padding: 0 24px; box-sizing: border-box; }
.art-hero-media { aspect-ratio: 16 / 9; border-radius: 4px; background-size: cover; background-position: center; background-repeat: no-repeat; }
.art-hero-caption { font-family: var(--font-sans); font-size: 13px; line-height: 1.5; color: #666; margin-top: 10px; }
.art-credit { color: #999; }
.art-credit::before { content: "· "; }
.art-hero-caption .art-credit:first-child::before { content: ""; }

/* ─────── Body blocks ─────── */
.art-body { padding-bottom: 90px; }
.art-body > * { font-family: var(--font-sans); }

.art-body p, .art-body .art-text p, .art-text {
  font-family: var(--font-sans); font-size: 18px; line-height: 1.75;
  color: #1A1A1A; margin: 0 0 24px;
}
.art-text p { margin: 0 0 24px; }
.art-text p:last-child { margin-bottom: 0; }
.art-text { margin-bottom: 24px; }
.art-text a { color: #002676; text-decoration: underline; text-underline-offset: 2px; }
.art-text ul, .art-text ol, .art-col ul, .art-col ol {
  font-size: 18px; line-height: 1.75; color: #1A1A1A;
  margin: 0 0 24px; padding-left: 26px;
}
.art-text li, .art-col li { margin-bottom: 8px; }

.art-h2 {
  font-family: var(--font-serif); font-weight: 500; font-size: 30px;
  line-height: 1.15; color: #010133; margin: 40px 0 16px;
}
.art-h3 {
  font-family: var(--font-serif); font-weight: 500; font-size: 23px;
  line-height: 1.2; color: #010133; margin: 32px 0 12px;
}

.art-quote {
  margin: 36px 0; padding: 8px 0 8px 28px; border-left: 3px solid #FDB515;
  font-family: var(--font-serif); font-size: 26px; line-height: 1.35; color: #010133;
}
.art-quote cite {
  display: block; margin-top: 12px; font-family: var(--font-sans);
  font-style: normal; font-size: 14px; font-weight: 600; color: #666;
}

.art-figure { margin: 36px 0; }
.art-figure img { display: block; width: 100%; height: auto; border-radius: 4px; }
.art-figure figcaption { font-family: var(--font-sans); font-size: 13px; line-height: 1.5; color: #666; margin-top: 10px; }
.art-figure.is-wide { width: min(1000px, calc(100vw - 48px)); margin-left: 50%; transform: translateX(-50%); }

.art-callout { border-radius: 6px; padding: 26px 30px; margin: 36px 0; }
.art-callout.is-gold { background: #FFF3D6; border-left: 4px solid #FDB515; }
.art-callout.is-blue { background: #DEF0FF; border-left: 4px solid #002676; }
.art-callout.is-gray { background: #F2F2F2; border-left: 4px solid #C7C7CE; }
.art-callout-title {
  font-family: var(--font-sans); font-size: 13px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: #010133; margin: 0 0 10px;
}
.art-callout .art-callout-body, .art-callout p {
  font-family: var(--font-sans); font-size: 16px; line-height: 1.65; color: #1A1A1A; margin: 0 0 12px;
}
.art-callout p:last-child, .art-callout .art-callout-body :last-child { margin-bottom: 0; }
.art-callout a { color: #002676; }

.art-btnrow { display: flex; margin: 32px 0; }
.art-btnrow.is-center { justify-content: center; }
.art-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 26px; border-radius: 999px;
  font-family: var(--font-sans); font-weight: 500; font-size: 15px;
  line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .15s ease;
}
.art-btn:hover { transform: translateY(-1px); }
.art-btn.is-primary { background: #010133; color: #fff; border: 1px solid #010133; }
.art-btn.is-gold { background: #FDB515; color: #010133; border: 1px solid #FDB515; }
.art-btn.is-outline { background: transparent; color: #010133; border: 1px solid #141414; }

.art-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 40px; margin: 8px 0 24px; }
.art-col p { font-size: 17px; line-height: 1.7; color: #1A1A1A; margin: 0 0 18px; }
.art-col p:last-child { margin-bottom: 0; }
.art-col a { color: #002676; }

.art-embed { position: relative; margin: 36px 0; border-radius: 4px; overflow: hidden; background: #010133; }
.art-embed::before { content: ""; display: block; padding-top: 56.25%; }
.art-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.art-divider { border: none; width: 64px; height: 3px; background: #FDB515; margin: 48px auto; }

.art-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 44px; }
.art-tag {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  color: #010133; background: #F2F2F2; border: 1px solid #E4E4E4;
  padding: 5px 13px; border-radius: 999px;
}

/* ─────── Draft preview banner & not-found ─────── */
.art-preview-banner {
  position: sticky; top: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: #010133; color: #fff; padding: 10px 16px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
}
.art-preview-banner .art-preview-pill {
  background: #FDB515; color: #010133; border-radius: 999px; padding: 2px 10px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.art-notfound { max-width: 620px; margin: 0 auto; padding: 110px 24px 130px; text-align: center; }
.art-notfound h1 { font-family: var(--font-serif); font-weight: 500; font-size: 40px; color: #010133; margin: 0 0 14px; }
.art-notfound p { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; color: #666; margin: 0 0 28px; }

/* ─────── Author archive page ─────── */
.au-hero { max-width: 760px; margin: 0 auto; padding: 64px 24px 40px; box-sizing: border-box; }
.au-head { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.au-avatar {
  width: 96px; height: 96px; border-radius: 50%; flex-shrink: 0;
  background: #010133; color: #FDB515; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-size: 30px; font-weight: 600;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.au-name {
  font-family: var(--font-serif); font-weight: 500; font-size: 40px;
  line-height: 1.08; color: #010133; margin: 0 0 6px;
}
.au-role { font-family: var(--font-sans); font-size: 15px; color: #666; }
.au-bio {
  font-family: var(--font-sans); font-size: 17px; line-height: 1.7; color: #1A1A1A;
  margin: 26px 0 0;
}
.au-links { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.au-count {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: #002676;
}

/* ─────── Responsive ─────── */
@media (max-width: 640px) {
  .art-title { font-size: 34px; }
  .art-dek { font-size: 18px; }
  .art-h2 { font-size: 26px; }
  .au-name { font-size: 30px; }
  .art-quote { font-size: 22px; }
  .art-columns { grid-template-columns: 1fr; }
  .art-figure.is-wide { width: 100%; margin-left: 0; transform: none; }
  .art-body p, .art-body .art-text p, .art-text, .art-text ul, .art-text ol { font-size: 17px; }
}