/* ==========================================================
   THE TIMES OF TALENT: TYPOGRAPHY SYSTEM
   Literata = editorial voice (stories, reading)
   Libre Franklin = navigation, labels, structure
   EB Garamond masthead = brand (wordmark only)
   Differentiation through size, weight, italic, spacing.
   No additional typefaces.
   Weights: 400 large headlines (desktop), 500 headlines
   elsewhere, 700 only for display numerals and drop caps.
   ========================================================== */

:root{--hl-large:400;--hl:500}
@media (max-width:820px){:root{--hl-large:500}}

h1,h2,h3{font-weight:var(--hl);font-optical-sizing:auto}

/* major editorial headlines: 400 on desktop, 500 on phones */
.hero-title,.lead-title,.article-title,.archive-title,.closer-title{font-weight:var(--hl-large);font-optical-sizing:auto}
.hero-title{font-size:clamp(32px,4.2vw,58px);line-height:1.06;letter-spacing:-.018em}
.article-title{letter-spacing:-.018em}
@media (max-width:820px){
  .hero-title{font-size:clamp(28px,7.6vw,35px);line-height:1.12;letter-spacing:-.012em}
  .article-title{letter-spacing:-.012em}
}

/* secondary headlines */
.art-title,.myth-title,.howto-title,.sci-title,.t10x-title,.t10-title,.longform-title,
.card-title,.desk-title,.format-title,.col-title,.promo-title,
.read-next>.desk-head,.article-body h2,.article-body h3{font-weight:var(--hl)}

/* small headlines and titles in lists */
.rail-title,.book-title,.shelf-title,.section-chip-name,.togo-title,.ten-title,.others-title,
.quiz-title,.keep-title,.bk-title,.t10x-h,.desk-side-title,.col-item-title,.tot-toast strong,
.foot-head.in-times,.colophon-value{font-weight:var(--hl)}

/* italics: Literata italic is loaded at 400 only, never fake-bold it */
.others-pub{font-weight:400}

/* decks and subheads stay Literata italic */
.hero-dek,.lead-dek,.article-dek,.archive-dek,.hp-dek{font-family:var(--display);font-style:italic;font-weight:400}

/* wordmark: title clearly larger than the tagline, a little air below it */
.masthead .masthead-tagline{margin-top:16px}
@media (max-width:820px){
  .mini-head .mini-mark{font-size:35px}
  .mini-head .mini-tagline{margin-top:10px}
}
@media (max-width:360px){.mini-head .mini-mark{font-size:33px}}