/* ==========================================================
   THE TIMES OF TALENT: MOBILE EDITION
   Loaded last. Everything sits inside max-width queries,
   so desktop (821px and up) is untouched.
   Rhythm: 12-16px inside a story, 22px between stories,
   48px plus an ink rule between sections.
   ========================================================== */

@media (max-width:820px){
  :root{--m-section:48px;--m-story:22px}

  /* ---------- header: wordmark, burger, rubric strip ---------- */
  .rubric-strip ul{padding:0 var(--pad);gap:20px}
  .rubric-strip a{display:inline-block;padding:13px 0 12px;line-height:1.6}

  /* small inline links get a 44px hit area without moving the layout */
  .f3-byline a,.byline a{display:inline-block;padding:13px 0;margin:-13px 0}
  .hero-kicker.f3-kicker{padding:12px 0;margin:-12px 0 -4px}
  .hp-all{display:inline-block;padding:13px 0;margin:-13px 0}

  /* headlines: balanced lines, no orphans, no overflow */
  .f3-title,.art-title,.myth-title,.howto-title,.others-title,.keep-title,.t10x-title,.f3-list a,.f3-quiz-title,.bk-title,.article-title,.archive-title{text-wrap:balance;overflow-wrap:break-word}
  .f3-dek,.art-dek,.myth-dek,.howto-dek,.others-text,.bk-dek,.article-dek,.t10x-dek{text-wrap:pretty}

  /* ---------- 1. the opener: lead, science, quote, newsletter, quiz ---------- */
  .front3{padding-top:16px}
  .f3-figure{margin:0 calc(-1 * var(--pad)) 16px}
  .f3-figure img{aspect-ratio:3/2;object-position:50% 40%}
  .f3-figure figcaption{padding:7px var(--pad) 0}
  .f3-lead .f3-title{font-size:clamp(26px,5.4vw + 8px,33px);line-height:1.12;letter-spacing:-.014em}
  .f3-lead .f3-dek{margin-top:10px;font-size:17px;line-height:1.5}
  .f3-byline{margin-top:12px}

  .f3-sci,.f3-left,.f3-news,.f3-quiz{margin-top:36px !important}
  .f3-sci,.f3-news{padding-top:14px !important;border-top:1px solid var(--ink) !important}

  /* Latest Science: a briefing, four lines of news */
  .f3-sci .f3-sub{margin-bottom:6px}
  .f3-list{margin-bottom:4px}
  .f3-list a,.f3-list li:first-child a{padding:11px 0;font-size:17px;line-height:1.3}

  /* Quote of the Day: an interlude in its own box, quieter than the lead */
  .f3-left{padding-top:0 !important;border-top:0 !important}
  .f3-left .qotd-date{display:block !important;margin:0 0 8px;font-size:11px}
  .f3-left .qbox{padding:16px 18px 18px !important}
  .qbox-head{margin-bottom:10px;padding-bottom:8px;font-size:15.5px;font-weight:400}
  .f3-left .qbox .qcard .qcard-mark{height:28px;font-size:54px}
  .f3-left .qbox .qcard .qcard-text,.f3-left .qbox .qcard.len-m .qcard-text,.f3-left .qbox .qcard.len-l .qcard-text{font-size:21px;line-height:1.3}
  .f3-left .qbox .qcard.len-s .qcard-text{font-size:24px;line-height:1.22}
  .f3-left .qbox .qcard.len-xl .qcard-text{font-size:18px;line-height:1.38}
  .f3-left .qbox .qcard .qcard-by{margin-top:12px;padding-top:8px}

  /* Newsletter: one line of form, an invitation rather than a banner */
  .f3-news-title{font-size:18px}
  .f3-news .f3-sub{margin-bottom:12px}
  .f3-form{flex-direction:row;flex-wrap:wrap;gap:8px}
  .f3-input{flex:1 1 160px;min-width:0;min-height:46px;font-size:16px}
  .f3-button{flex:0 0 auto;min-height:46px;padding:0 18px}
  .f3-form .promo-msg{flex-basis:100%}
  .f3-fine{margin-top:6px}

  /* The Times Quiz: compact, oxblood on cream */
  .f3-quiz{padding:16px 18px 6px !important;border:0 !important;border-left:3px solid var(--accent) !important;background:#fbf7ec}
  .f3-quiz .f3-head{margin-bottom:4px}
  .f3-quiz-title{margin:0 0 4px;font-size:18px;line-height:1.28}
  .f3-quiz .hp-all{color:var(--accent)}

  .tg-slot-m,.hp-quiz-m{display:none}

  /* ---------- 2. sections: heading, one strong story, compact companions, "all" link ---------- */
  .hp{margin-top:var(--m-section)}
  .hp:has(> .hp-bar){display:flex;flex-direction:column;align-items:stretch;background:linear-gradient(var(--ink),var(--ink)) no-repeat top/100% 1px;background-origin:content-box;background-clip:content-box}
  .hp > .hp-bar{display:contents}
  .hp > .hp-bar > div{order:1;padding-top:14px;margin-bottom:18px}
  .hp > .hp-bar > .hp-all{order:3;align-self:flex-start;margin-top:4px}
  .hp > .hp-bar ~ *{order:2}
  .hp-dek{margin-top:4px;font-size:16px}

  /* The Art of Learning: stays visual, one picture leads */
  .art-grid{display:block}
  .art-main .art-title{margin-top:12px;font-size:clamp(23px,3.6vw + 10px,27px);line-height:1.15}
  .art-main .art-dek{margin-top:8px;font-size:16px;line-height:1.5}
  .art-main .hp-meta{margin-top:8px}
  .art-side{display:grid;grid-template-columns:minmax(0,1fr) 104px;column-gap:16px;align-items:start;margin-top:var(--m-story);padding-top:16px;border-top:1px solid var(--rule-light)}
  .art-main + .art-side{margin-top:24px}
  .art-side .art-figure{grid-column:2;grid-row:1 / span 2}
  .art-side .art-figure img{aspect-ratio:1/1;object-fit:cover}
  .art-side .art-title{grid-column:1;margin:0;font-size:18px;line-height:1.25}
  .art-side .art-dek{display:none}
  .art-side .hp-meta{grid-column:1;margin-top:6px}

  /* Myths About Learning: the struck-through claim carries it */
  .myth-grid{display:block}
  .myth-title{font-size:23px}
  .myth-dek{margin-top:8px;font-size:16px}
  .myth + .myth{margin-top:12px;padding:14px 0 2px;border-top:1px solid var(--rule-light)}
  .myth + .myth .myth-title{font-size:19px;line-height:1.28}
  .myth + .myth .myth-dek{display:none}

  /* How Can I...?: practical, a list you can scan with a thumb */
  .howto-grid{display:block}
  .howto:first-child .howto-title{font-size:22px;line-height:1.22}
  .howto:first-child .howto-dek{margin-top:8px;font-size:16px}
  .howto + .howto{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:baseline;margin-top:0;padding:13px 0;border-top:1px solid var(--rule-light)}
  .howto:first-child{padding-bottom:16px}
  .howto + .howto .howto-title{font-size:18px;line-height:1.28}
  .howto + .howto .howto-dek{display:none}
  .howto + .howto::after{content:"\2192";font-family:var(--ui);font-size:15px;color:var(--accent)}

  /* Talent10: the lockup, smaller, the list tighter */
  .t10x{padding:24px 20px 14px;gap:0}
  .t10x-mark{--t10:76px;margin-bottom:14px}
  .t10x-title{font-size:clamp(21px,2.6vw + 12px,25px)}
  .t10x-dek{margin-top:8px;font-size:16px}
  .t10x-list{margin:14px 0 2px;gap:0}
  .t10x-list a{padding:9px 0}
  .t10x-n{font-size:24px}
  .t10x-all{margin-top:-4px}

  /* The Bookshelf: covers in a row you can swipe */
  .hp-books .bk{flex-basis:84%}
  .bk-cover{aspect-ratio:auto 2/3;object-fit:cover}
  .bk-title{font-size:17.5px}
  .bk-dek{font-size:14.5px}

  /* What Others Say: one recommendation on cream, the rest by source */
  .hp-others .others-grid{display:block}
  .hp-others .others-card:first-child{padding:22px 20px 20px !important;gap:10px}
  .hp-others .others-card:first-child .others-pub{font-size:24px}
  .hp-others .others-card:first-child .others-title{font-size:20px}
  .hp-others .others-card:first-child .others-text{font-size:16px}
  .hp-others .others-card:first-child .others-link{display:inline-block;padding:12px 0;margin:-12px 0}
  .hp-others .others-card:not(:first-child){background:none !important;padding:14px 0 !important;gap:4px;border-top:1px solid var(--rule-light)}
  .hp-others .others-card:nth-child(2){margin-top:12px;border-top:0}
  .hp-others .others-card:not(:first-child) .others-head{flex-direction:row;align-items:baseline;gap:8px;padding:0 !important;border:0 !important}
  .hp-others .others-card:not(:first-child) .others-pub{font-size:17px}
  .hp-others .others-card:not(:first-child) .others-title{font-size:18px;line-height:1.28}
  .hp-others .others-card:not(:first-child) .others-text,.hp-others .others-card:not(:first-child) .others-link{display:none}

  /* Timeless: a small curated shelf of pictures */
  .keep-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
  .keep-figure{margin-bottom:8px}
  .keep .kicker{margin-bottom:4px}

  /* From Around the World, glossary: same section rhythm */
  .hp-world .tw{padding-top:16px}
  .hp-world-all{margin-top:0}
  .hp-gloss .tg-slot{max-width:none}

  /* ---------- article pages ---------- */
  .article{padding-top:22px}
  .article-head{padding-top:0;text-align:left}
  .article-head .labels-center{text-align:left;margin-bottom:8px}
  .article-title{font-size:clamp(27px,4.4vw + 11px,35px);line-height:1.12}
  .article-dek{margin-top:12px;font-size:18px;line-height:1.5}
  .article-head .byline{margin-top:14px;line-height:1.7}
  .article-figure{margin:24px calc(-1 * var(--pad)) 0;max-width:none}
  .article-figure img{max-height:75vh}
  .article-figure figcaption{padding:8px var(--pad) 0;font-size:12.5px;line-height:1.5}
  .article-grid{padding-top:20px;gap:28px}
  .share{gap:0 22px;padding-bottom:4px}
  .share a{display:inline-block;padding:12px 0}
  .share-head{align-self:center}
  .article-body{font-size:18px;line-height:1.66}
  .article-body > p:first-of-type::first-letter{font-size:56px;padding-top:7px}
  .article-body h2{font-size:24px;line-height:1.22;margin:1.7em 0 .45em}
  .article-body h3{font-size:20.5px;line-height:1.28;margin:1.5em 0 .4em}
  .article-body blockquote{margin:1.6em 0;padding:1em 0;font-size:21px;line-height:1.38}
  .article-body ul,.article-body ol{padding-left:1.25em}
  .article-body li{margin-bottom:.45em}
  .article-body figure,.gh-content .kg-card{margin:1.6em 0}
  .article-body figcaption{font-size:12.5px;line-height:1.5}
  .article-body a,.article-body .footnote-item{overflow-wrap:anywhere}
  .article-body .callout{font-size:17px}
  .article-body .numbers .number-value{font-size:48px}
  .article-foot{margin-top:36px}
  .read-next{padding:40px var(--pad)}
  .read-next>.desk-head{font-size:22px;margin-bottom:20px}
  .rail-item{padding:12px 0}

  /* ---------- footer: every link a thumb-sized target ---------- */
  .foot-col ul{gap:0}
  .foot-col li a,.foot-col ul a{display:inline-block;padding:9px 0}
  .foot-legal a,.foot-imprint a{display:inline-block;padding:12px 0}
  .book-all{padding:14px 0 12px}
  .foot-grid{gap:24px}
}

/* small tablets: keep a readable column instead of stretching the phone layout */
@media (min-width:600px) and (max-width:820px){
  .front3,.hp,.closer,.article-head,.article-grid,.read-next{max-width:680px;margin-left:auto;margin-right:auto}
  .f3-figure{margin-left:0;margin-right:0}
  .f3-lead .f3-title{font-size:38px;line-height:1.1}
  .article-figure{margin-left:0;margin-right:0}
  .keep-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hp-books .bk{flex-basis:46%}
}

/* the narrowest phones */
@media (max-width:360px){
  :root{--pad:16px}
  .f3-input{flex-basis:100%}
  .f3-button{flex:1 1 100%}
  .art-side{grid-template-columns:minmax(0,1fr) 88px}
  .rubric-strip ul{gap:18px}
}