/* Topic guides: /topics and the hubs (tools/topics.py). Cached as immutable:
   a change ships as a new ?v= on the link the generator writes. */
.tp-hero h1{max-width:18ch;}
.tp-toc{display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:30px;}
.tp-toc a{font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--platinum); text-decoration:none; padding:6px 0; border-bottom:1px solid var(--rule-dark); transition:color .2s, border-color .2s;}
.tp-toc a:hover,.tp-toc a:focus-visible{color:var(--white); border-color:var(--platinum);}

/* The strongest explanation: the intro beside the passage. */
.tp-lead{display:flex; flex-wrap:wrap; gap:44px clamp(40px, 6vw, 88px); align-items:flex-start;}
.tp-intro{flex:1 1 300px; min-width:0;}
.tp-intro h2{margin-bottom:22px;}
.tp-intro p{font-size:16px; line-height:1.8; color:var(--ink-body); margin:0;}
.tp-passage{flex:1.5 1 420px; min-width:0; margin:0;}
.tp-passage blockquote{margin:0; padding:4px 0 4px clamp(20px, 3vw, 34px); border-left:2px solid var(--ink);}
.tp-passage blockquote p{font-family:var(--display); font-size:clamp(18px, 1.9vw, 23px); font-weight:500; line-height:1.55; letter-spacing:-0.01em; color:var(--ink); margin:0 0 16px;}
.tp-passage blockquote p:last-child{margin-bottom:0;}
.tp-passage figcaption{display:flex; flex-wrap:wrap; gap:6px 16px; align-items:baseline; margin:22px 0 0; padding-left:clamp(22px, 3vw, 36px);}
.tp-who{font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink);}
.tp-passage cite{font-style:italic; font-size:14px; color:var(--ink-label);}
.tp-context{margin:26px 0 0; padding:16px 0 0 clamp(22px, 3vw, 36px); border-top:1px solid var(--rule-light); font-size:14.5px; line-height:1.75; color:var(--ink-body);}

.tp-sec .section-head p{font-size:15px; line-height:1.75; color:var(--ink-body); max-width:62ch;}
.s-ink.tp-sec .section-head p{color:var(--platinum);}

/* Interviews: the shared media list, with the excerpt and the moment. */
.tp-tx .m-what.tp-excerpt{font-family:var(--body); font-size:15px; font-style:italic; line-height:1.7; color:var(--ink-body); margin-top:2px;}
.tp-tx .tp-from{flex:1 0 100%; font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-label);}
.tp-tx a:hover .tp-from,.tp-tx a:focus-visible .tp-from{color:var(--ink);}

/* Quotes: six lines, on Ink, as a hairline grid. */
.tp-quotes{display:flex; flex-wrap:wrap; gap:1px; background:var(--rule-dark); border:1px solid var(--rule-dark);}
.tp-q{flex:1 1 300px; min-width:0; margin:0; padding:clamp(26px, 3vw, 38px); background:var(--ink); display:flex; flex-direction:column; justify-content:space-between; gap:22px;}
.tp-q blockquote{margin:0;}
.tp-q p{margin:0; font-family:var(--display); font-size:clamp(17px, 1.6vw, 20px); font-weight:500; line-height:1.5; letter-spacing:-0.01em;}
.tp-q p a{color:var(--white); text-decoration:none; background-image:linear-gradient(var(--steel), var(--steel)); background-size:0 1px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .3s var(--ease), color .2s;}
.tp-q p a:hover,.tp-q p a:focus-visible{color:var(--platinum); background-size:100% 1px;}
.tp-q figcaption{font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--steel);}

/* Essays under the examples. */
.tp-essays{margin-top:clamp(48px, 6vw, 72px);}
.tp-k{font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-label); margin:0 0 14px;}
.tp-more .tp-others .m-what{font-size:14.5px;}
.tp-tiles .cell h3{margin-bottom:14px;}
@media (max-width:620px){
  .tp-passage figcaption,.tp-context{padding-left:0;}
}