/* One set of text rules for the public site, loaded after every other stylesheet.
   Sans-serif text uses Figtree on its "Relaxed" setting: letters spaced 1% apart, regular text
   at weight 420, sentences on 1.6 line spacing, and each size half a pixel up from the base rules:
   tags 12px · small print (shows, dates, times, counts) 14px · controls 15px ·
   little headings 12px in spaced capitals · sentences 16px. Nothing is smaller than 12px, except the source and
   date on result cards, which sit a step smaller (11.5px) since they are set in spaced capitals.
   The sizes live in the variables below so the whole set can be tuned in one place.
   The serif (questions, titles, quotes, transcript) is unchanged. */
body.discovery,body.public-viewer{
 --ls:.01em;--lh:1.6;--nudge:.5px;
 --t-tag:calc(12px + var(--nudge));--t-tiny:calc(12px + var(--nudge));--t-source:calc(11px + var(--nudge));--t-time:calc(13px + var(--nudge));
 --t-small:calc(14px + var(--nudge));--t-head-link:calc(16px + var(--nudge));--t-control:calc(15px + var(--nudge));--t-sentence:calc(16px + var(--nudge));
 letter-spacing:var(--ls)}

/* Tags: one look for big topics, topics and passing mentions. Only the tag that matches the search stands out, with a gold ring and bolder text on the same background. */
html body .tags button,html body .tags button.cat,html body .tags button.top,html body .tags button.ment,
html body.public-viewer .tag,html body.public-viewer .headline-tags .tag,html body.public-viewer .headline-tags .tag.category,html body.public-viewer .headline-tags .tag.mentioned{
 font:450 var(--t-tag)/1.2 'Figtree',sans-serif!important;letter-spacing:var(--ls);text-transform:none;color:#6a5733;background:#F6EFDD;border:0!important;border-radius:20px;padding:4px 11px;min-height:28px;box-shadow:none}
html body .tags button:hover:not(:disabled),html body.public-viewer .tag:hover,html body.public-viewer .headline-tags .tag:hover{background:#EFE4C9;color:#4a3a1e}
html body .tags button.match,html body .tags button.cat.match,html body .tags button.top.match,html body .tags button.ment.match{background:#F6EFDD;color:#4a3a1e;box-shadow:inset 0 0 0 1.5px #E0AC43;font-weight:600!important}
html body .tags button.cat.match mark{font-weight:inherit;text-decoration:none}

/* Small print */
html body.discovery .meta,html body.discovery .countline,html body.discovery footer,html body.discovery .suggest .mm,
html body.public-viewer .metadata,html body.public-viewer .metadata *,html body.public-viewer .playback-bar,html body.public-viewer .clock,
html body.public-viewer .question-item small,html body.public-viewer .site-footer,html body.public-viewer .suggest-menu .mm{font-size:var(--t-small)!important}
html body.public-viewer .question-time{font-size:var(--t-time)!important}
html body.public-viewer .question-item{grid-template-columns:42px minmax(0,1fr)}
html body.discovery .collcard .credit,html body.discovery .poster .dur,html body.discovery .poster .from,html body.public-viewer .video-caption,html body.public-viewer .tab-count{font-size:var(--t-tiny)!important}

/* Controls */
html body.discovery .rail label,html body.discovery .rail .switch{font-size:var(--t-control)}
html body.discovery .rail .ql-clear,html body.discovery .rail .seg button{font-size:var(--t-small)}
html body.discovery .refine .rchip{font-size:var(--t-time)}
html body.public-viewer .playback-bar .text-button,html body.public-viewer .playback-bar .text-button span{font-size:var(--t-small)!important}
html body.public-viewer .mentions-button{font-size:var(--t-tiny)!important}

/* Little headings keep their spaced capitals, at 12px */
html body.discovery .rail h4,html body.discovery .rail summary,html body.discovery .suggest .ghead,html body.public-viewer .suggest-menu .ghead,
html body.public-viewer .rail-heading h2,html body.public-viewer .about-block h2,html body.public-viewer .speaker-jump-name,
html body.public-viewer #follow,html body.public-viewer .expand-label,html body.public-viewer .video-kicker,html body.discovery.home-mode .card-category{font-size:var(--t-tiny)!important}
html body.public-viewer .speaker-copy-hint{font-size:var(--t-tiny)!important}

/* Sentences, and the small print that can run to two lines, get the relaxed line spacing */
html body.discovery .meta,html body.discovery .countline,html body.public-viewer .metadata,html body.public-viewer .about-block{line-height:var(--lh)}
html body.discovery #hero .sub{font-size:max(var(--t-sentence),1em);line-height:1.3}
/* The big "Ask Pete": Literata's letter shapes from the header logo's size, not its large display cut, so both read as the same name */
html body.discovery #hero h1.h1{font-variation-settings:'opsz' 40}
html body.discovery .colltext p{font-size:var(--t-sentence);line-height:var(--lh)}

/* Search results: the quote from Pete's answer, in quotation marks, gently slanted, with a gold line on the left */
html body .ex>span{font-style:italic;font-synthesis:style}
html body .ex{border-left:3px solid #E0AC43;padding-left:12px}
html body .ex>span::before{content:'“'}
html body .ex>span::after{content:'”'}

/* Search suggestions: no gold edge; the row you point at gets a faint tint. Topic labels are plain text. */
html body .suggest .row,html body .suggest-menu .row{border-left-color:transparent!important}
html body .suggest .row:hover,html body .suggest .row.active,html body .suggest-menu .row:hover,html body .suggest-menu .row.active{background:#F8F5EE}
html body .suggest .row.active .qbadge,html body .suggest .row:hover .qbadge,html body .suggest-menu .row.active .qbadge,html body .suggest-menu .row:hover .qbadge{background:#22415C}
html body .suggest .tcat,html body .suggest-menu .tcat{background:none!important;color:#645D4F!important;text-transform:none!important;letter-spacing:var(--ls)!important;font-weight:500!important;font-size:var(--t-time)!important;padding:0!important}

/* Header links: sans, with a gold stroke that sweeps in on hover and stays under the page you're on.
   The stroke is drawn like the one under "Pete" on the home page: rounded, tilted up a touch, running a little past the word. */
html body.discovery .nav a,html body.public-viewer .viewer-nav a,html body .site-menu .site-menu-panel a{position:relative;font:500 var(--t-head-link) 'Figtree',sans-serif;letter-spacing:var(--ls);color:var(--ink,#201B14);text-decoration:none;background:none;padding-bottom:3px}
html body.discovery .nav a::after,html body.public-viewer .viewer-nav a::after,html body .site-menu .site-menu-panel a::after{content:"";position:absolute;left:-2%;right:-4%;bottom:-6px;height:3px;background:#E0AC43;border-radius:2px;transform:rotate(-2deg) scaleX(0);transform-origin:left center;pointer-events:none}
html body.discovery .nav a:hover::after,html body.discovery .nav a:focus-visible::after,html body.discovery .nav a[aria-current=page]::after,
html body.public-viewer .viewer-nav a:hover::after,html body.public-viewer .viewer-nav a:focus-visible::after,
html body .site-menu .site-menu-panel a[aria-current=page]::after{transform:rotate(-2deg) scaleX(1)}
html body.discovery .nav a:hover,html body.discovery .nav a:focus-visible,html body.public-viewer .viewer-nav a:hover,html body.public-viewer .viewer-nav a:focus-visible{text-decoration:none}
html body.discovery .nav a[aria-current=page],html body .site-menu .site-menu-panel a[aria-current=page]{font-weight:600}
@media (prefers-reduced-motion:no-preference){html body.discovery .nav a::after,html body.public-viewer .viewer-nav a::after{transition:transform .26s cubic-bezier(.2,.8,.2,1)}}

/* Phone menu: the same links as the computer header, stacked, with the stroke under the page you're on */
html body .site-menu .site-menu-panel{justify-items:start;gap:4px;padding:10px 24px 22px}
html body .site-menu .site-menu-panel a{font-size:calc(19px + var(--nudge,0px));padding:12px 0 8px;margin-bottom:6px;border-bottom:0}
html body .site-menu .site-menu-panel a::after{bottom:0}
html body .site-menu .site-menu-panel a:active,html body .site-menu .site-menu-panel a[aria-current=page]{color:var(--ink,#201B14)}

/* Filter column on computers: a small Clear filters link sits on the Filters row (only when something is on),
   and the chips under it already say what's on, so the "1 filter on" count steps aside */
html body.discovery .rail .qline,html body.discovery .rail #applied>.scope{display:none}
@media(min-width:761px){
 html body.discovery #refine-details{position:relative}
 html body.discovery .rail .rh{position:absolute;top:-4px;right:30px;height:24px;margin:0;padding:0;display:flex;align-items:center}
 html body.discovery .rail .rh h4{display:none}
 html body.discovery .rail .rh .ql-clear{font:500 13px 'Figtree',sans-serif!important;color:#cfd6e0;white-space:nowrap;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(207,214,224,.45);text-underline-offset:3px}
 html body.discovery .rail .rh .ql-clear:hover,html body.discovery .rail .rh .ql-clear:focus-visible{color:#fff;text-decoration-color:#fff}
 html body.discovery #refine-details:has(#refine-count:empty) .rh{display:none}
 html body.discovery .rail:has(.qpill) .refine-count{display:none}
 html body.discovery .rail .qpills{margin-top:16px}
 /* Answer page: the question and answer buttons sit centered under the video */
 html body.public-viewer .playback-bar{position:relative}
 html body.public-viewer .playback-bar .start-actions{position:absolute;left:50%;transform:translateX(-50%);margin:0}
}
html body.public-viewer .speaker-jump,html body.public-viewer .speaker-jump-name{white-space:nowrap;text-align:left}

/* Serif: Literata at weight 630 for titles, 400 for the transcript (as before), 310 for quotes and the question list */
html body .brand .wm,html body .brand>span,html body h1.h1,html body #heading,html body .dircard .dn,html body .colltext h2,
html body .dialog-heading h2,html body h2.ql,html body h2.ql a,html body.public-viewer #question-title,html body.public-viewer #now-title,html body .footer-brand,html body main.privacy h1,html body main.privacy h2,html body.public-viewer section>h1{font-weight:630!important}
html body .ex>span{font-weight:310!important}
html body.public-viewer .question-copy{font-weight:420!important}
html body.public-viewer #transcript p{font-weight:400!important}
html body .ex>span mark{font-weight:510!important}

html body .site-menu-panel a{font-family:'Figtree',sans-serif;font-weight:500;letter-spacing:var(--ls)}

/* ---------- Site-wide sweep: every page follows the same roles ----------
   Serif (Literata): weight 630 for anything that names something (logo, page titles, section titles,
   questions, topic and collection names); 400 for the transcript, 380 for search suggestions; 310 for quotes
   and the question list. Sizes: page title 38px (30px on phones), answer question 28px (22px),
   section title 25px (22px), question in a list 20px (17.5px), topic name 17.5px.
   Sans (Figtree): spaced capitals are always weight 700 at the tiny size; buttons and links are weight 600;
   small buttons (chips, filter pills, tabs, segment switches) use the small size; sentences 16.5px. */
html body.discovery,html body.public-viewer{--t-display-title:38px;--t-question-title:28px;--t-section:25px;--t-list-q:20px}
@media(max-width:760px){html body.discovery,html body.public-viewer{--t-display-title:30px;--t-question-title:22px;--t-section:22px;--t-list-q:17.5px}}

/* Logo: the same size in every header (40px on computers, 22px on phones) */
html body .brand .wm,html body .brand>span,html body.public-viewer .brand{font-size:40px!important}
@media(max-width:760px){html body .brand .wm,html body .brand>span,html body.public-viewer .brand{font-size:22px!important}}

/* Page titles */
html body.discovery .results>h1.h1,html body main.privacy h1{font-size:var(--t-display-title)!important;line-height:1.12}
/* The answer page question, with room under the header */
html body.public-viewer #question-title{font-size:var(--t-question-title)!important;line-height:1.22!important;letter-spacing:0!important}
html body.public-viewer .answer-heading{padding-top:30px!important}
/* Section titles */
html body main.privacy h2,html body.discovery .colltext h2,html body.discovery .wall h2,html body.public-viewer .dialog-heading h2{font-size:var(--t-section)!important;font-weight:630!important;line-height:1.2}
/* Questions in lists (search results, home cards, collections) */
html body h2.ql,html body h2.ql a{font-size:var(--t-list-q)!important;line-height:1.28;letter-spacing:.012em!important}
/* Search results, topic results on Browse, and home and collection cards: the question in the sans, and the source and date in small spaced capitals in soft gray */
html body.discovery:is(.search-mode,.browse-mode,.home-mode) .results h2.ql,html body.discovery:is(.search-mode,.browse-mode,.home-mode) .results h2.ql a{font-family:'Figtree',sans-serif!important;font-weight:650!important;letter-spacing:0!important;line-height:1.3}
html body.discovery:is(.search-mode,.browse-mode,.home-mode) .results .meta{font-weight:650;font-size:var(--t-source)!important;letter-spacing:.09em;text-transform:uppercase;color:#7d7566}
/* On every card the type icon sits out to the left, the source name wraps under itself, not under the icon,
   and the date takes its own line under the source */
html body.discovery:is(.search-mode,.browse-mode,.home-mode) .results .meta{display:flex;align-items:baseline}
html body.discovery.home-mode .results .meta{margin-top:12px}
html body.discovery:is(.search-mode,.browse-mode,.home-mode) .results .meta .meta-type{flex:none;align-self:flex-start;margin-top:.085em}
html body.discovery:is(.search-mode,.browse-mode,.home-mode) .results .meta .meta-sep{display:none}
html body.discovery:is(.search-mode,.browse-mode,.home-mode) .results .meta .meta-date{display:block}
/* On computers, when the outlet would wrap after the show anyway, it takes its own line instead, without the dot (see discovery.mjs) */
html body.discovery:is(.search-mode,.browse-mode,.home-mode) .results .meta .src-outlet{white-space:nowrap}
html body.discovery:is(.search-mode,.browse-mode,.home-mode) .results .meta .split .src-sep{display:none}
html body.discovery:is(.search-mode,.browse-mode,.home-mode) .results .meta .split .src-outlet{display:block}
/* On phones the outlet always takes its own line, so every card reads show, outlet, date */
@media(max-width:760px){html body.discovery:is(.search-mode,.browse-mode,.home-mode) .results .meta .src-sep{display:none}html body.discovery:is(.search-mode,.browse-mode,.home-mode) .results .meta .src-outlet{display:block}}
/* On search and topic results, the topics sit a clear step below the source and date */
html body.discovery:is(.search-mode,.browse-mode) .results .tagline{margin-top:12px}
/* On phones the question flows around the thumbnail. The source line and the topics stay beside it when they fit
   on one line there, and otherwise drop below it to the full width, so neither breaks awkwardly beside the picture. */
@media(max-width:760px){
 /* Half the usual space under the last line of a result, so the topics sit closer to the divider */
 html body.discovery:is(.search-mode,.browse-mode) .results .row{display:flow-root;padding-bottom:10px}
 html body.discovery:is(.search-mode,.browse-mode) .results .row-body{display:block}
 html body.discovery:is(.search-mode,.browse-mode) .results .poster{float:right;margin:4px 0 12px 14px}
 html body.discovery:is(.search-mode,.browse-mode) .results .meta{width:max-content;max-width:100%}
 html body.discovery:is(.search-mode,.browse-mode) .results .tagline{display:flow-root;width:max-content;max-width:100%}
 /* The question and the source get the same space as the source and the topics */
 html body.discovery:is(.search-mode,.browse-mode) .results .meta{margin-top:16px}
 html body.discovery:is(.search-mode,.browse-mode) .results .tagline{margin-top:10px}
 html body.discovery:is(.search-mode,.browse-mode) .results .ex{clear:right}
 /* "Mentioned:" and "About:" each take their own line, as they do on computers. */
 html body.discovery:is(.search-mode,.browse-mode) .results .tagline .tgroup{display:block}
}
/* Search suggestions read like the question list */
html body .suggest .qq,html body .suggest-menu .qq{font-size:17.5px!important;font-weight:380!important}
html body .suggest .qq mark,html body .suggest-menu .qq mark{font-weight:650!important}
/* Quotes in results */
html body .ex>span{font-size:16px!important;line-height:var(--lh)}
html body .ex>span mark{font-weight:630!important}

/* Spaced capitals: one size, one weight */
html body.discovery .rail h4,html body.discovery .rail summary,html body.discovery .refine-label,html body.discovery #list-switch button,
html body.discovery.home-mode .card-category,html body.public-viewer .video-kicker,html body.public-viewer #follow,
html body.public-viewer .speaker-jump-name,html body.public-viewer .rail-heading h2,html body.public-viewer .about-block h2,
html body.public-viewer .expand-label,html body .suggest .ghead,html body .suggest-menu .ghead{font-size:var(--t-tiny)!important;font-weight:700!important;letter-spacing:.1em!important}

/* Tiny print on videos and cards */
html body.public-viewer #video-start,html body.public-viewer .video-caption span{font-size:var(--t-tiny)!important}
html body.discovery .poster .from,html body.discovery .poster .dur{font-weight:600!important}
html body.public-viewer .mentions-button{font-weight:600!important}

/* Small print */
html body.public-viewer #metadata,html body.public-viewer #metadata *{font-size:var(--t-small)!important}

/* Buttons and links: weight 600. Full buttons at the control size, small ones at the small size */
html body.discovery .btn-primary,html body.discovery .wall .btn,html body.discovery .railshow,html body.discovery #more,html body.discovery #more .more-label,
html body.discovery .seecoll,html body.discovery .railbrowse,html body.public-viewer .qa-button{font-size:var(--t-control)!important;font-weight:600!important}
html body.public-viewer #search-form .search-submit,html body.discovery .fan .fanall,html body.discovery .fpill,html body.discovery .rail .seg button,
html body.discovery .rail .ql-clear,html body.public-viewer .panel-switch [role=tab]{font-size:var(--t-small)!important;font-weight:600!important}
html body.discovery .refine .rchip,html body.discovery .refine .rchip .k{font-size:var(--t-time)!important}
/* Filter checkboxes look the same on Search and Browse */
html body.discovery .rail label,html body.discovery .rail .switch,html body.discovery.browse-mode .rail label{font-size:var(--t-control)!important}
html body .discovery .nav a,html body.discovery .nav a{font-size:var(--t-head-link)!important}

/* Sentences */
html body.discovery #hero .sub{font-size:max(var(--t-sentence),1em)}
@media(max-width:760px){html body.discovery #hero .sub{font-size:var(--t-sentence)!important}}
html body.discovery .collintro,html body.discovery .wall p,html body main.privacy p,html body main.privacy li,html body main.privacy strong{font-size:var(--t-sentence)!important;line-height:var(--lh)}

/* The question count on the answer page tabs: big enough to read */
html body.public-viewer .tab-count{font-size:var(--t-tiny)!important;font-weight:700;min-width:34px!important;height:24px!important;padding:0 7px!important;border-radius:12px!important;font-variant-numeric:tabular-nums;letter-spacing:0;flex:none;box-sizing:border-box}
/* Keep the counter whole: if the pill is squeezed narrower than its text, the text spills out of the right side and looks off-centre */
html body.public-viewer .panel-switch #tab-questions{gap:5px}
html body.public-viewer #metadata a.appearance-link,html body.public-viewer #metadata span,html body.public-viewer #metadata time{font-size:var(--t-small)!important}
html body.public-viewer .speaker-copy-hint{font-weight:700!important;letter-spacing:.1em!important}
html body.discovery .fanchips .fanchip{font-size:var(--t-small)!important}

/* Answer page on computers: the heading always keeps room for a two-line question, so switching
   between short and long questions doesn't push the video and transcript up and down. The title sits
   at the bottom of that room, so a one-line question leaves the spare line above it, not under it. */
@media(min-width:761px){html body.public-viewer .answer-heading{min-height:calc(30px + 2 * 1.22 * var(--t-question-title) + 34px);display:flex;flex-direction:column;justify-content:flex-end}}
/* The dot between show, format, place and date is not part of the link, so the hover underline stops at the word */
html body.public-viewer .metadata>:not(:last-child)::after{display:inline-block;text-decoration:none}

/* No lonely words: titles and questions spread their words evenly across lines, and sentences
   never leave a single word stranded on the last line. Browsers that don't support these just wrap as before. */
html body :is(h1,h2,h3,h4,h5,h6,.dn,.qq,.question-copy,.card-title,#now-title,#hero .sub){text-wrap:balance}
html body :is(p,li,dd,blockquote,figcaption,.ex>span,.metadata,.meta,.colltext,.collintro){text-wrap:pretty}
@media print{html body :is(p,li,blockquote){orphans:3;widows:3}html body :is(h1,h2,h3,h4){break-after:avoid}}