/* Topic guides: /topics and the hubs (tools/topics.py), after isaacmashman.com's, in Eric's
   navy, gold and white. Light bands are .s-ink (white), dark bands .s-white (deep navy), as the
   site's polarity has it. Cached as immutable: a change ships as a new ?v= on the link the
   generator writes (CSS in tools/topics.py). */
.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:#C9B57F; text-decoration:none; padding:6px 0; border-bottom:1px solid rgba(201,181,127,0.4); transition:color .2s, border-color .2s;}
.tp-toc a:hover,.tp-toc a:focus-visible{color:#FFFFFF; border-color:#C9B57F;}

/* The strongest explanation: the intro beside the passage (white). */
.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:#2B3561; 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 #9D8B5C;}
.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:#051748; margin:0 0 16px; max-width:none;}
.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:#051748;}
.tp-passage cite{font-style:italic; font-size:14px; color:#7A6A3E;}
.tp-context{margin:26px 0 0; padding:16px 0 0 clamp(22px, 3vw, 36px); border-top:1px solid #D8DCE8; font-size:14.5px; line-height:1.75; color:#2B3561; max-width:none;}

.tp-sec .section-head p{font-size:15px; line-height:1.75; max-width:62ch;}
.s-ink.tp-sec .section-head p{color:#2B3561;}
.s-white.tp-sec .section-head p{color:#D6DBE8;}

/* Lists on navy (interviews, feelings) and on white (essays, more topics). */
.s-white .tp-tx .t,.s-white .tp-feel .t{color:#FFFFFF;}
.s-white .tp-tx .w,.s-white .tp-feel .w{color:#C9B57F;}
.s-white .tp-tx a:hover .t,.s-white .tp-feel a:hover .t{color:#C9B57F;}
.tp-tx .m-what.tp-excerpt{font-family:var(--body); font-size:15px; font-style:italic; line-height:1.7; color:#D6DBE8; margin-top:2px;}
.tp-feel .m-what{font-size:15px; line-height:1.65; color:#D6DBE8;}
.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:#C9B57F;}
.tp-tx a:hover .tp-from,.tp-tx a:focus-visible .tp-from{color:#FFFFFF;}
.s-white .tp-tx,.s-white .tp-feel{border-color:#C9B57F;}
.s-white .tp-tx li,.s-white .tp-feel li{border-color:#22336E;}
.s-ink .tp-others,.s-ink .tp-essays .elsewhere{border-color:#051748;}
.s-ink .tp-others li,.s-ink .tp-essays .elsewhere li{border-color:#D8DCE8;}
.s-ink .tp-others .t,.s-ink .tp-essays .t{color:#051748;}
.s-ink .tp-others a:hover .t,.s-ink .tp-essays a:hover .t{color:#7A6A3E;}
.s-ink .tp-essays .w{color:#7A6A3E;}
.s-ink .tp-others .m-what,.s-ink .tp-essays .m-what{font-size:14.5px; color:#2B3561;}
.s-white .tp-others .t{color:#FFFFFF;}
.s-white .tp-others .m-what{font-size:14.5px; color:#D6DBE8;}

/* Quotes: six lines on white, as a hairline grid with gold rules. */
.tp-quotes{display:flex; flex-wrap:wrap; gap:1px; background:#D8DCE8; border:1px solid #D8DCE8;}
.tp-q{flex:1 1 300px; min-width:0; margin:0; padding:clamp(26px, 3vw, 38px); background:#FFFFFF; display:flex; flex-direction:column; justify-content:space-between; gap:22px; border-top:2px solid #9D8B5C;}
.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; max-width:none;}
.tp-q p a{color:#051748; text-decoration:none; background-image:linear-gradient(#9D8B5C, #9D8B5C); 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:#7A6A3E; 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:#7A6A3E;}

/* Example and next-step cells. */
.tp-sec .grid .cell h3{margin-bottom:12px;}
.s-ink.tp-sec .grid .cell p{color:#2B3561;}
.s-white.tp-sec .grid .cell p{color:#D6DBE8;}
.s-white.tp-sec .grid .cell h3{color:#FFFFFF;}
.s-white.tp-sec .tlink{color:#C9B57F; border-color:rgba(201,181,127,0.5);}
.s-white.tp-sec .tlink:hover{color:#FFFFFF; border-color:#C9B57F;}
.s-ink.tp-sec .tlink{color:#051748; border-color:#9D8B5C;}
.s-ink.tp-sec .tlink:hover{color:#7A6A3E;}

/* 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:#7A6A3E; margin:0 0 14px;}
.tp-tiles .cell h3{margin-bottom:14px;}
.s-ink .tp-tiles .cell-num{color:#7A6A3E;}
@media (max-width:620px){
  .tp-passage figcaption,.tp-context{padding-left:0;}
}