/* =====================================================================
   Article page + its components
   Breadcrumbs (459:5738) · Tag pill (15:773) · Embed card (563:5781)
   Story card · horizontal (554:27668) · Related box (563:5775)
   ===================================================================== */

/* ---- Breadcrumbs ---- */
.breadcrumbs ol{display:flex;align-items:center;gap:var(--space-8);margin:0;padding:0;list-style:none;font:var(--text-sm);min-width:0}
.breadcrumbs li{display:inline-flex;align-items:center;gap:var(--space-8);min-width:0;white-space:nowrap}
.breadcrumbs a{color:var(--text-secondary);text-decoration:none;transition:color .2s}
.breadcrumbs a:hover{color:var(--text-primary);text-decoration:underline;text-underline-offset:3px}
.breadcrumbs__sep{color:var(--border-strong,var(--neutral-300))}
.breadcrumbs__current{color:var(--text-primary);overflow:hidden;text-overflow:ellipsis}

/* ---- Tag pill ---- */
.tag-pill{display:inline-flex;align-items:center;justify-content:center;min-height:24px;box-sizing:border-box;padding:var(--space-4) var(--space-12);border:1px solid var(--border-default);border-radius:var(--radius-sm);
  background:var(--badge-neutral-bg);color:var(--text-secondary);font:var(--text-sm);white-space:nowrap;text-decoration:none;
  transition:background-color .2s,border-color .2s,box-shadow .2s}
a.tag-pill:hover,.tag-pill.is-hover{border-color:var(--border-strong);color:var(--text-primary)}
a.tag-pill:active,.tag-pill.is-pressed{background:var(--neutral-250,var(--border-default));box-shadow:inset 0 1px 2px rgba(0,0,0,.08)}
a.tag-pill:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}

/* ---- Embed card ---- */
.embed-card{display:flex;align-items:center;gap:var(--space-12);min-height:90px;padding:var(--space-16);box-sizing:border-box;width:100%;
  background:var(--surface-default);border:1px solid var(--border-default);border-radius:var(--radius-md)}
.embed-card__thumb{flex:none;width:96px;height:58px;border-radius:var(--radius-md);background:var(--accent-default);overflow:hidden}
.embed-card__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.embed-card__text{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.embed-card__eyebrow{font:var(--text-sm);color:var(--text-secondary);text-transform:uppercase}
.embed-card__title{font:var(--text-base);color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.embed-card__cta{flex:none}
.embed-card__cta{height:auto;padding:var(--space-12) var(--space-32)}
.embed-card--question{flex-wrap:wrap;align-items:flex-start}
.embed-card--question .embed-card__title{white-space:normal}
.embed-card__response{flex:1 0 100%;display:flex;align-items:flex-start;gap:var(--space-16);margin-top:var(--space-8)}
.embed-card__portrait{flex:none;width:64px;height:64px;border-radius:var(--radius-full);overflow:hidden;border:1px solid var(--border-default);background:var(--neutral-100);display:grid;place-items:center;color:var(--text-secondary);font:var(--text-sm)}
.embed-card__portrait img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.embed-card__answer{flex:1;min-width:0;margin:0;font:var(--text-xl);color:var(--text-primary);white-space:normal}
.embed-card__mark{font-family:var(--font-display);font-size:56px;line-height:.75;color:var(--text-secondary);font-weight:700}
.embed-card__mark--open{margin-right:var(--space-4);vertical-align:-0.35em}
.embed-card__mark--close{margin-left:var(--space-4);vertical-align:-0.55em}

/* ---- Story card · horizontal compact (image 262×147 + 340 content) ---- */

/* ---- Article sections: Border (Figma 794:42516) · From the newsletter (563:5775) · Meet the author ---- */
.divider--article{width:100%;height:16px;margin:0;border:0;background:
  linear-gradient(var(--border-default),var(--border-default)) 0 4px/100% 1px no-repeat,
  linear-gradient(var(--border-default),var(--border-default)) 0 10px/100% 4px no-repeat}
.article__section-title{margin:0;font:var(--text-xl);color:var(--text-primary)}
.related-box{display:flex;flex-direction:column;gap:var(--space-8);width:100%}
.related-box .embed-card{background:var(--card-bg-default);border-color:var(--card-border-default)}
.related-box .story-card--mini{width:100%}
.related-box .story-card--mini .story-card__media{width:272px;height:auto;aspect-ratio:16/9;align-self:stretch}
.related-box .story-card--mini .story-card__content{height:auto;min-height:153px}
.article__authors{display:flex;flex-direction:column;gap:var(--space-8);width:100%}
.article__authors-grid{display:grid;grid-template-columns:repeat(var(--cols,1),minmax(0,1fr));gap:var(--space-8)}
.author-card{display:flex;flex-direction:column;gap:var(--space-8);box-sizing:border-box;padding:var(--space-24);min-width:0;
  background:var(--author-card-background);border:1px solid var(--author-card-border);border-radius:var(--radius-md);box-shadow:0 2px 8px var(--shadow-author-card)}
.author-card__head{display:flex;align-items:center;gap:var(--space-8)}
.author-card__avatar{flex:none;width:64px;height:64px;border-radius:var(--radius-full);border:2px solid var(--author-card-background);object-fit:cover;object-position:top;background:var(--neutral-100);box-sizing:border-box}
.author-card__id{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
.author-card__name{margin:0;font:var(--text-2xl);color:var(--text-primary);text-transform:uppercase}
.author-card__role{margin:0;font:var(--text-sm);color:var(--text-secondary)}
.author-card__bio{margin:0;font:var(--text-sm);color:var(--text-secondary)}
.author-card__meta{margin:0;font:var(--text-xs);color:var(--card-text-secondary)}
.author-card__topics{display:flex;flex-wrap:wrap;gap:var(--space-8)}
.author-card__topics .tag-pill{font:var(--text-xs)}
.author-card__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-12)}
.author-card__btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-4);height:39px;padding:8px 16px;border-radius:var(--radius-full);
  background:var(--author-card-button-background);border:1px solid var(--author-card-button-border);color:var(--text-primary);font:var(--text-sm);text-decoration:none;cursor:pointer;
  box-shadow:0 6px 6px var(--shadow-author-card-button-soft),0 2px 1px var(--shadow-author-card-button-tight),inset 0 -1px 2px var(--shadow-author-card-button-inset),inset 0 1px 2px var(--shadow-author-card-button-highlight)}
.author-card__btn.follow-btn{padding:8px 18px;background:var(--author-card-button-background);border:1px solid var(--author-card-button-border);color:var(--text-primary)}
.author-card__btn:hover{box-shadow:0 8px 10px var(--shadow-author-card-button-soft),0 2px 1px var(--shadow-author-card-button-tight),inset 0 -1px 2px var(--shadow-author-card-button-inset),inset 0 1px 2px var(--shadow-author-card-button-highlight)}

/* ---- Article page ---- */
.article{background:var(--surface-background)}
.article__crumbs{display:flex;justify-content:center;padding:166px var(--space-24) 0}
.article__hero{padding:var(--space-24) 0 0}
.article__hero-img{display:block;width:calc(100% - 137px);max-width:1303px;margin:0 auto;aspect-ratio:1303/733;object-fit:cover;background:var(--text-placeholder)}
.article__head{display:flex;flex-direction:column;align-items:center;gap:var(--space-24);max-width:1184px;margin:var(--space-24) auto 0;padding:0 var(--space-24);box-sizing:border-box;text-align:center}
.article__title{font:var(--text-7xl);color:var(--text-primary);text-transform:uppercase;margin:0;text-wrap:balance}
.article__badges{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--space-8)}
.article__actions{display:flex;flex-direction:column;align-items:center;gap:var(--space-24)}
.article__action-row{display:flex;align-items:center;gap:var(--space-12)}
.article__byline{display:flex;align-items:center;justify-content:center;gap:var(--space-24);flex-wrap:wrap}
.article__meta{display:flex;align-items:center;gap:var(--space-8);margin:0;font:var(--text-sm);color:var(--card-text-secondary-default,#4a4238)}
.article__col{display:flex;flex-direction:column;align-items:center;gap:var(--space-28);width:740px;max-width:calc(100% - 48px);margin:var(--space-24) auto 0;padding:0;box-sizing:border-box}
.article__body{width:100%;font:var(--text-lg);color:var(--text-primary)}
.article__body p{margin:0 0 var(--space-28)}
.article__body p:last-child{margin-bottom:0}
.article__body a{color:inherit;text-decoration:underline;text-underline-position:from-font}
.article__body a:hover{color:var(--text-secondary)}
.article__body h2{font:var(--text-2xl);margin:var(--space-12) 0 var(--space-16);text-transform:none}
.article__body blockquote{margin:0 0 var(--space-28);padding-left:var(--space-20);border-left:3px solid var(--accent-default);font-style:italic}
.article__filed{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-8);padding-top:var(--space-24);align-self:center}
.article__filed-label{font:var(--text-sm);color:var(--text-secondary);white-space:nowrap}
.article__more{max-width:1440px;margin:0 auto;padding:80px var(--space-112,112px) 100px;box-sizing:border-box}
.article__more-title{font:var(--text-3xl);text-transform:uppercase;margin:0 0 var(--space-32);color:var(--text-primary)}
.article__more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-24)}
.article__more-grid .story-card--small{min-height:340px}
.article__more-grid .story-card--small .story-card__content{height:178px;flex:none;box-sizing:border-box;justify-content:center}

@media (max-width:900px){
  .article__crumbs{padding-top:112px}
  .article__hero-img{width:calc(100% - 32px)}
  .article__title{font:var(--text-4xl)}
  .article__more{padding:48px 16px 64px}
  .article__authors-grid{grid-template-columns:1fr}
  .related-box .story-card--mini .story-card__media{width:100%}
  .article__more-grid{grid-template-columns:1fr}
        .embed-card{flex-wrap:wrap}
  .embed-card__cta{width:100%}
  .breadcrumbs ol{flex-wrap:wrap}
}
.article__head .author{text-align:left}

.article__sponsor{text-decoration:none;display:inline-flex}
.article__event{width:100%}
.article__event .event-card{width:100%;box-sizing:border-box}
.article__video{width:100%;aspect-ratio:16/9;background:#14120f;border-radius:var(--radius-md);overflow:hidden}
.article__video iframe{width:100%;height:100%;border:0;display:block}
.article__tiktok{width:min(325px,100%);margin-inline:auto}
.article__tiktok iframe{width:100%;height:740px;border:0;border-radius:var(--radius-md);display:block}
.article__body .embed-card{margin:0 0 var(--space-28)}
.article__figure{margin:0 0 var(--space-28)}
.article__figure img{display:block;width:100%;height:auto;border-radius:var(--radius-md)}
.article__figure figcaption{margin:8px 0 0;font:var(--text-sm);color:var(--text-secondary);text-align:center}

/* Sponsor preview (Figma 914:27369): header row + basic link-preview card */
.sponsor-preview{display:flex;flex-direction:column;gap:8px;width:100%}
.sponsor-preview__head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sponsor-preview__label{margin:0;font:var(--text-xl);text-transform:uppercase;color:var(--text-primary)}
.sponsor-preview__logo{display:block;height:61px;width:auto}
.sponsor-preview__card{display:flex;align-items:center;gap:12px;padding:16px;box-sizing:border-box;text-decoration:none;
  background:var(--card-bg-default);border:1px solid var(--card-border-default);border-radius:var(--radius-md);
  box-shadow:0 2px 8px rgba(0,0,0,.03);transition:background-color .25s,border-color .25s,box-shadow .25s}
.sponsor-preview__card:is(:hover,:focus-visible){background:var(--card-bg-hover);border-color:transparent;box-shadow:0 8px 10px rgba(0,0,0,.08)}
.sponsor-preview__card:active{background:var(--card-bg-pressed);border-color:var(--card-border-pressed);box-shadow:0 0 3.3px 1px var(--card-ring-pressed)}
.sponsor-preview__thumb{flex:none;display:flex;align-items:center;justify-content:center;width:189px;height:99px;border-radius:8px;overflow:hidden;background:#fff}
.sponsor-preview__thumb img{width:100%;height:100%;object-fit:cover}
.sponsor-preview__thumb .sponsor-preview__mark{width:auto;height:auto;max-width:70%;max-height:60%;object-fit:contain}
.sponsor-preview__text{display:flex;flex-direction:column;gap:12px;min-width:0}
.sponsor-preview__title{font:var(--text-base);color:var(--card-text-primary)}
.sponsor-preview__domain{font:var(--text-sm);color:var(--card-text-secondary)}
@media (max-width:640px){.sponsor-preview__logo{height:44px}.sponsor-preview__thumb{width:96px;height:72px}}