/* =====================================================================
   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 ---- */

/* ---- 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);text-transform:uppercase;white-space:nowrap;text-decoration:none;
  transition:background-color .2s,border-color .2s,box-shadow .2s}
.tag-pill--person{text-transform:none}
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(--card-bg-default);border:1px solid var(--border-subtle);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}

/* ---- 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(--border-subtle)}
.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(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-author-card-rest)}
.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:var(--space-8) var(--space-16);border-radius:var(--radius-full);
  background:var(--button-secondary-bg);border:1px solid var(--button-secondary-border);color:var(--text-primary);font:var(--text-sm);text-decoration:none;cursor:pointer;
  box-shadow:var(--shadow-button-default)}   /* Author card buttons are Button Secondary Small / Follow (Figma 2026-10-23) */
.author-card .follow-btn{flex:1}.author-card__see{flex:1}
/* Figma Author Size=Card (1670:76005) and Filed under tags (1670:75996): tags keep their case (Basketball, WNBA, Noreen Morioka);
   on desktop the two buttons hug their label, 12 apart */
.article .tag-pill,.author-card .tag-pill{text-transform:none}
@media (min-width:600px){.author-card .follow-btn,.author-card__see{flex:none}.author-card__see{font:var(--text-sm)}}   /* See profile 14/20 (Button Secondary Small) */
.author-card__btn.follow-btn{padding:var(--space-8) var(--space-18);background:var(--button-secondary-bg);border:1px solid var(--button-secondary-border);color:var(--text-primary)}
.author-card__btn:hover{background:var(--button-secondary-bg-hover);box-shadow:var(--shadow-button-hover)}

/* Unsigned “Keep reading” account gate (React ArticleAccountGate; no kit frame — mirrors author-card / empty-state spacing) */
.article-gate{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-12);width:100%;box-sizing:border-box;padding:var(--space-28) 0 var(--space-32)}
.article-gate__title{margin:0;font:var(--text-2xl);color:var(--text-primary)}
.article-gate__copy{margin:0;font:var(--text-lg);color:var(--text-secondary)}
.article-gate__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-12)}

/* ---- 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;height:auto;object-fit:cover;background:var(--text-placeholder)}
/* Article Metadata badge = Badge Default (1670:75978): 14/20, 4 / 12, min 24 → 28 tall (was badge--lg, 38) */
.article__head .badge--lg{min-height:24px;padding:var(--space-4) var(--space-12);font:var(--text-sm)}
.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)}
.article__meta--phone{display:none}   /* Prompt 31 Part 10: date · read time; the phone copy sits under the author row */
.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__signature{display:flex;flex-direction:row;align-items:center;gap:var(--space-16);width:100%;margin:0;padding:0;list-style:none}
.article__signature li{margin:0;font:var(--text-signature);color:var(--text-secondary);white-space:nowrap}
@media (max-width:599px){.article__signature--multi{flex-direction:column;align-items:flex-start;gap:var(--space-12)}.article__signature--multi .article__signature-and{display:none}}
.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:var(--space-80) var(--space-112,var(--space-112)) 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:var(--space-112)}
  .article__hero-img{width:calc(100% - 32px)}
  .article__title{font:var(--text-4xl)}
  .article__more{padding:var(--space-48) var(--space-16) var(--space-64)}
  .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 · Mobile expanded (Figma 978:27523): thumb, text, full-width CTA stacked */
  /* Embed Card Size=Mobile Expanded (Figma 978:27523, 358 wide): thumbnail + text on one row, full-width CTA below */
  .embed-card{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:var(--space-12)}
  .embed-card__title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .embed-card__cta{grid-column:1/-1;width:100%}
}
.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}

/* Sponsor preview (Figma 914:27369): header row + basic link-preview card */
.sponsor-preview{display:flex;flex-direction:column;gap:var(--space-8);width:100%}
.sponsor-preview__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8)}
.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:var(--space-12);padding:var(--space-16);box-sizing:border-box;text-decoration:none;
  background:var(--card-bg-default);border:1px solid var(--border-subtle);border-radius:var(--radius-md);
  box-shadow:var(--shadow-card-rest);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:var(--shadow-card-lift)}
.sponsor-preview__card:active{background:var(--card-bg-hover);border-color:var(--card-ring-pressed);box-shadow:0 0 var(--elevation-card-pressed-ring-blur) var(--card-border-pressed-width) 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:var(--neutral-0)}
.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:var(--space-12);min-width:0}
.sponsor-preview__title{font:var(--text-xl);color:var(--text-primary)}   /* Figma 914:27367 Desktop/09 text-xl */
.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}}
/* Tablet (Figma 1909:70645 More_From_Storied, Prompt 14): 80 top / 32 sides / 100 bottom, title 36, 32 gap, two 332 cards 16 apart */
@media (min-width:600px) and (max-width:1023px){
  /* Article tablet (1909:70585, draft): breadcrumbs 48 under the navbar, 680×380 hero inset 32, title Desktop/05 48/48 */
  .article__crumbs{padding-top:calc(var(--nav-h,120px) + var(--space-48))}
  .article__hero-img{width:calc(100% - 2 * var(--space-32))}
  .article .article__title{font:var(--text-mobile-8xl)}
  .article__col{max-width:calc(100% - 2 * var(--space-32))}   /* 680 reading column at 744 (1909:70600) */
  .article__filed{align-self:flex-start}   /* Filed under starts on the column's left edge (1909:70634) */
   /* same values as Desktop/05 text-5xl (48/48); the tablet fs scale makes text-5xl smaller */
  .article__more{padding:var(--space-80) var(--space-32) 100px}
  .article__more-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-16)}
  .article__more-grid>:nth-child(n+3){display:none}
}
/* Phones: the App / Header (56, in the flow) replaces the fixed web navbar, so the breadcrumbs start 16 below it */
@media (max-width:599px){.article__crumbs{padding-top:var(--space-16)}}

/* =====================================================================
   Phone article = app screen (Prompt 16 Part D; Figma Stories / App / Article / Full 1587:73509, event 1606:6729): App / Header,
   Article Bar (Back "Stories" + Save + Share, 48), Article Header (16 sides, 8 top, 16 bottom, 12 gap: 358×201 image radius md,
   Small badges, Mobile/07 22/26 title, Author 40), reading column 16 sides, About the author, Related scroll row, tab bar (Stories active).
   ===================================================================== */
.article__appbar{display:none}
.article__more-head{display:contents}.article__more-all{display:none}
@media (max-width:599px){
  .article__appbar{display:flex;align-items:center;gap:var(--space-4);height:48px;padding:var(--space-4) var(--space-8);box-sizing:border-box}
  .article__appbar-sp{flex:1}
  .article__back{gap:var(--space-8);padding:var(--space-8) var(--space-16);font:var(--text-xs)}
  .article__back .btn__icon{width:16px;height:16px}
  .article__appbar-btn{width:40px;height:40px;padding:var(--space-8);border:0;border-radius:var(--radius-md);background:none}
  .article__appbar-btn svg{width:24px;height:24px}
  .article__crumbs{display:none}
  .article__hero{padding:var(--space-8) var(--space-16) 0}
  .article__hero-img{width:100%;height:auto;aspect-ratio:358/201;border-radius:var(--radius-md);object-fit:cover}
  .article__head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-12);padding:var(--space-12) var(--space-16) var(--space-16);text-align:left}
  .article__badges{justify-content:flex-start;gap:var(--space-8)}
  .article__badges .badge{min-height:20px;padding:var(--space-2) var(--space-8);font:var(--text-xxs)}
  .article .article__title{font:var(--text-mobile-3xl);text-align:left;margin:0}
  .article__dek{text-align:left;margin:0}
  .article__actions{align-items:flex-start}
  .article__byline{justify-content:flex-start}
  /* Prompt 31 3.1 (Figma 1587:6670 "Article actions" 2410:146164): the actions pill (Share, Save, Text size) sits centred under
     the author in a 48 row, 12 below it; pill padding 3 (136 × 48). The read time is not drawn on phones. */
  .article .article__actions{align-self:stretch;gap:var(--space-12)}
  .article .article__action-row{align-self:stretch;justify-content:center;min-height:48px}
  .article .article__action-row .article__meta{display:none}
  .article .article__meta--phone{display:flex;justify-content:flex-start}
  .article .art-actions{padding:3px}   /* not a Figma token yet (Article actions Device=Mobile padding 3) */
  .article__col{max-width:calc(100% - 2 * var(--space-16))}   /* reading column 16 sides (358 at 390) */
  .article__byline .follow-btn{display:none}   /* Article Header shows Author 40 only (1587:73519) */
  .article .article__more-title{font:var(--text-mobile-label);letter-spacing:.44px;color:var(--text-secondary)}   /* App / List Header (1587:73535) */
  .article__more-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);margin-bottom:var(--space-12)}   /* List Header + "See all" (1587:73535) */
  .article__more-head .article__more-title{margin:0}
  .article__more-all{display:inline-flex;align-items:center;min-height:32px;font:var(--text-xs);color:var(--text-secondary);text-decoration:none}
  .article__more-all:hover{text-decoration:underline}
  main.article+.newsletter{display:none}   /* the phone article ends at More from Storied + tab bar (no Newsletter CTA in 1587:73509) */
  .article__section-title{font:var(--text-mobile-label);letter-spacing:.44px;text-transform:uppercase;color:var(--text-secondary)}
  .article-gate{padding:var(--space-24) 0 var(--space-28);gap:var(--space-12)}
  .article-gate__title{font:var(--text-mobile-3xl)}
  .article-gate__copy{font:var(--text-mobile-base)}
  .article-gate__actions{flex-direction:column;align-items:stretch;width:100%}
  .article-gate__actions .btn{width:100%}
}