/**
 * Theme Name:  Free Speakers Theme
 * Theme URI:   http://free-speakers.org
 * Description: Theme and template files for Free Speakers website
 * Author:      William Swartwood
 * Author URI:  
 * Version:     0.1.0
 * Tags:
 *
 * License:     GPLv2+
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 */
 
 
 
/*////////////////////////////////////////*/
/*////////////  GLOBAL RESETS  ///////////*/
/*////////////////////////////////////////*/

html,body,body div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video,a {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}


article,aside,details,figcaption,figure,footer,header,hgroup,nav,section {
	display: block;
}


a img {
	border: none;
	text-decoration: none;
}


 a {
	color: #258fbf;
	text-decoration: none;
}


#content a:hover {
	color: #000;
	border-bottom: none;
}


p {
	margin: 15px 0 15px 0;
}




/*////////////////////////////////////////*/
/*////////////  GLOBAL  ///////////*/
/*////////////////////////////////////////*/

body {
	background-color: #0A3247;
	font-family: "Open Sans", Helvetica Arial, Sans-Serif;
}

h1 {
	font-size: 25px;
	line-height: 30px;
	margin: 0 0 20px 0;
	font-weight: 600;
	color: #f60;
}

h3 {
	font-size: 18px;
}

#content h3.supplemental {
	font-size: 20px;
	line-height: 25px;
	margin: 20px 0 20px 0;
	font-weight: 600;
	color: #198dc4;
}


div#content-feature p:first-child  {
	margin-top: 0;
}


div#content-feature p:first-child  {
	margin-top: 0;
}
 
 
#header-tools .region-selector a.region-changer {
	background-color: #0A3347;
}
 
/*////////////////////////////////////////*/
/*////////////  WP GENERAL         ///////////*/
/*////////////////////////////////////////*/


img.aligncenter {
	clear: both;
 	margin: 0 auto;	
 	text-align: center;
 	display: block;
 	padding: 20px 0 20px 0;
}


img.alignleft { 
	float: left;
	padding: 10px 10px 10px 0
}


img.alignright { 
	float: right;
	padding: 10px 0 10px 10px;
}


section#content-feature ul {
	margin: 20px 0 20px 40px;
}
 
 
#content ol {
 	margin: 10px 0 10px 40px;
 }
 

 /*////////////////////////////////////////*/
/*////////////  PAGINATION  ///////////*/
/*////////////////////////////////////////*/

 
section#content-feature  ul.pagination {
	display: block;
	overflow: hidden;
	padding: 0 0 1em 0;
	text-align: center;
	color: black;
	text-transform: uppercase;
	padding: 5px 0 5px 0;
	margin: 5px 0 5px 0;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #ccc;
}

.pagination li {
	display: inline-block;
	vertical-align: middle;
	margin: 0 5px 0 0;
	font-size: 17px;
}

.pagination li span, .pagination li a {
	padding: 2px;
	color: #198dc4;
	border-bottom: 1px solid transparent;
	font-weight: bold;
}


.pagination .current, .pagination a:hover {
	font-weight: bold;
	color: #000;
}

.pagination .inactive {
	font-weight: bold;
	color: #198dc4;
}


.pagination a.prev-post {
	margin-right: -4px;
	text-align: left;
}

.pagination a.next-post {
	text-align: right;
	float: right;
	margin-right: 0;
}


 
 
/*////////////////////////////////////////*/
/*////////////  HEADER  ///////////*/
/*////////////////////////////////////////*/

#logo-header-wrapper {
 	width: 100%;
 	background-color: #fff;
 	min-width: 1160px;
}
 
 
#logo-header {
	width: 1060px;
	margin: 0 auto;
	background-image: url(/wp-content/themes/free-speakers/images/src/header-watermark-sh.jpg);
	background-position: right top;
	background-repeat: no-repeat;
	height: 150px;
	padding: 0 50px 0 50px;
	text-align: right;
}
 
 
 
 
#logo {
	float: left;
	width: 300px;
	height: 75px;
	padding-top: 13px;
}


#header-tools {
	float: right;
	width: 660px;
	height: 75px;
	padding-top: 8px;
}


/* The tagline was an <h1> until the responsive pass. It is the same on
   every page, so it gave every interior page a second H1 competing with
   the page's own; it is a <p class="header-tagline"> now. The styling is
   unchanged apart from margin-top, which an h1 never had: the global
   reset zeroes it but "p { margin: 15px 0 }" below puts it back. */
#header-tools .header-tagline {
	text-transform: uppercase;
	font-size: 25px;
	line-height: 30px;
	font-weight: 300;
	margin-top: 0;
	margin-bottom: 8px;
}


#header-tools .header-tagline a {
	color: #000;
	text-decoration: none;
}


/*////////////////////////////////////////*/
/*////////////  HEADER TABS  ///////////*/
/*////////////////////////////////////////*/

#header-tabs {
	clear: both;
}

#header-tabs a {
	background-color: #ff8000;
	border-radius: 7px 7px 0px 0px; 
	-moz-border-radius: 7px 7px 0px 0px; 
	-webkit-border-radius: 7px 7px 0px 0px; 
	border: 1px solid #ff8000;
	padding: 5px 10px 5px 10px;
	color: #fff;
	margin-left: 5px;
	display: inline-block;
}


#header-tabs a:hover {
	background-color: #198DC4;
	border: 1px solid #198DC4;
	text-decoration: none;
	-moz-transition: all 0.5s ease 0s;
	-webkit-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
}

/*////////////////////////////////////////*/
/*////////////  NAV  ///////////*/
/*////////////////////////////////////////*/

#nav-wrapper {
 	min-width: 1160px;
	background-color: #198DC4;
	border-top: 3px solid #ff8000;
	color: #fff;
	padding: 10px 0 10px 0;
}

#nav {
 	width: 1060px;
	margin: 0 auto;
	padding: 0 50px 0 50px;
}



/*////////////////////////////////////////*/
/*////////////  LOGO  ///////////*/
/*////////////////////////////////////////*/

#logo {
	text-align: center;
	width: 172px;
}


#logo a {
	color: #000;
	text-decoration: none;
}


#logo strong {
	font-weight: 300;
	font-size: 20px;
}


#logo h2 {
	font-weight: 300;
	text-transform: uppercase;
	font-size: 9px;
}


/*////////////////////////////////////////*/
/*////////////  SLIDESHOW  ///////////*/
/*////////////////////////////////////////*/


#home-slide-wrapper {
	padding: 17px 0 0 0;
	background-color: #fff;
}


#home-slide {
	width: 1060px;
 	min-width: 1060px;
	margin: 0 auto;	
	overflow: hidden;
}


/*////////////////////////////////////////*/
/*////////////  HOME - SLIDESHOW ///////////*/
/*////////////////////////////////////////*/

body #home-splash {
	float: left;
	width: 1060px;
	min-width: 1060px;
}


body #home-splash ul.carousel {
	list-style-type: none;
	width: 1060px;
	margin-left: 0;

}


body #home-splash ul.carousel li {
	padding:0;
}


#home-splash .slideshow {
	margin: auto 0;
	text-align: center;
	position:relative;
}
	

body  #home-splash  .slideshow a {
	text-decoration:none;
	color:#000;
	border: none;
}
		
		
#home-splash .slide {
	z-index:100;
	height: 350px;
	width: 1060px;
	position:relative;
}

#home-slide-wrapper {
	position: relative;
	z-index: 5;
}


#home-slide-wrapper #home-splash .slide .slide-text strong {
	font-weight: 300;
}


#home-slide-wrapper #home-splash .slide .slide-text p {
	margin: 0;	
}

#home-splash .slide img {
	width: 1140px;
}
		
		
#home-splash .slides-pagination {
	display: none;
}
	
	

OFFbody.chicago .slide-text {
	color: #fff;
	width: 570px;
	position: absolute;
	top: 17px;
	left: 455px;
	font-size: 19px;
	line-height: 28px;
	text-align: left;
}



OFFbody.milwaukee .slide-text {
	color: #fff;
	width: 450px;
	position: absolute;
	top: 23px;
	left: 580px;
	font-size: 19px;
	line-height: 28px;
	text-align: left;

}

.slide-text {
	color: #fff;
	width: 1020px;
	position: absolute;
	bottom: 0;
	left: 0;
	font-size: 16px;
	line-height: 24px;
	text-align: left;
	background-color: #000;	
	background-color: rgba(0, 0, 0, 0.6); 
	*background-color: #000;
	padding: 10px 20px 10px 20px;
	font-weight: 300;
}




/*////////////////////////////////////////*/
/*////////////  HOME CONTENT  ///////////*/
/*////////////////////////////////////////*/

/**
 * Shared full-width section system for the redesigned homepage - same
 * pattern #featured-speakers-home already established (full-bleed
 * background + centered .wrap), extended to the rest of the page so
 * every section uses one consistent layout mechanism instead of the old
 * fixed 690px/310px float split.
 */
.home-section {
	clear: both;
	overflow: hidden;
	padding: 50px 0;
}

/* Slideshow sits directly above this section with no bottom spacing of
   its own (see #home-slide-wrapper), so this section's full 50px top
   padding was the entire gap - tighten just this one edge rather than
   shrinking .home-section's padding everywhere else. */
#home-intro-cta {
	padding-top: 22px;
}

.home-section--white { background-color: #fff; }
.home-section--warm  { background-color: #f6f4f1; }
.home-section--cool  { background-color: #eef3f6; }

.home-section .wrap {
	/* 1060px, not 960 - matches #home-slide's width exactly (see the
	   slideshow CSS above) so this section's left edge lines up with the
	   slideshow image's left edge instead of sitting ~50px further right
	   (two different-width boxes independently centered in the same
	   viewport don't share a left edge, even though both are centered). */
	width: 1060px;
	margin: 0 auto;
}

/* Narrower measure for sections that are still single-column text/asides
   (testimonial, featured topic, about) until they get their own content
   redesign - keeps them looking intentional instead of stretched thin
   across the full width. */
.home-section .wrap.wrap--narrow {
	width: 700px;
}

.intro-grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 50px;
	align-items: start;
}

.intro-copy h1 {
	font-size: 34px;
	font-weight: 600;
	line-height: 1.15;
	margin: 0 0 14px;
}

.home-cta-row {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 22px;
}

.home-btn {
	display: inline-block;
	font-size: 15px;
	font-weight: 650;
	padding: 12px 26px;
	border-radius: 999px;
	text-decoration: none;
	border: 2px solid transparent;
}

.home-btn--primary {
	/* Matches #header-tabs a (the "Become a Speaker" button already in
	   the homepage header) exactly, rather than the request-button.jpg
	   graphic's gradient - that lives on other pages, this orange is
	   already visible on this exact page. */
	background-color: #ff8000;
	color: #fff;
}

/* Same orange-to-blue swap as #header-tabs a:hover, so both buttons
   on this page settle on the same blue as the header button. */
.home-btn--primary:hover {
	background-color: #198dc4;
	border-color: #198dc4;
	color: #fff;
	transition: all 0.5s ease 0s;
}

.home-btn--secondary {
	background-color: transparent;
	color: #198dc4;
	border-color: #198dc4;
}

.home-btn--secondary:hover {
	background-color: #198dc4;
	color: #fff;
	transition: all 0.5s ease 0s;
}

.steps-card {
	background-color: #fff;
	background-image: url(/wp-content/themes/free-speakers/images/src/testimonial-ghost-small.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	border: 1px solid #e2e1dd;
	border-radius: 12px;
	padding: 28px 30px;
}

.steps-card h4 {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 14px;
}

.steps-card ol {
	font-size: 15px;
	line-height: 22px;
	margin: 0 0 14px 22px;
	padding: 0;
}

.steps-card em {
	font-size: 13px;
	line-height: 18px;
	color: #666;
}


/*////////////////////////////////////////*/
/*////////////  HOME CATEGORIES  ///////////*/
/*////////////////////////////////////////*/

/* Shared by every redesigned homepage section with a centered heading +
   supporting line (categories, testimonials), rather than a per-section
   copy of the same three rules. */
.section-head {
	text-align: center;
	margin-bottom: 34px;
}

.section-head h2 {
	font-size: 28px;
	font-weight: 700;
	margin: 0 0 8px;
}

.section-head p {
	font-size: 15px;
	color: #666;
	margin: 0;
}

.category-grid {
	/* flex + wrap instead of grid so a trailing partial row (e.g. 9
	   categories = 4/4/1) centers itself instead of the last card
	   sitting stranded on the left with empty space next to it - the
	   number of active categories varies per city, so this needs to
	   look right at any count, not just a multiple of 4. */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
}

.category-card {
	/* Same box-sizing gotcha as li.featured-speaker-tile above - without
	   this, padding + border add on top of the 251px width (293px
	   actual), so only 3 fit per row instead of 4. */
	box-sizing: border-box;
	width: 251px;
	background-color: #fff;
	border: 1px solid #e2e1dd;
	border-radius: 12px;
	padding: 24px 20px;
	text-align: center;
	text-decoration: none;
	color: inherit;
}

.category-card:hover {
	border-color: #198dc4;
	text-decoration: none;
	transition: all 0.5s ease 0s;
}

.category-card-icon {
	width: 44px;
	height: 44px;
	margin: 0 auto 14px;
	color: #198dc4;
}

.category-card-icon svg {
	width: 100%;
	height: 100%;
}

.category-card h3 {
	font-size: 15.5px;
	font-weight: 650;
	margin: 0 0 4px;
}

.category-card-count {
	font-size: 12.5px;
	color: #666;
}


/*////////////////////////////////////////*/
/*////////////  HOME PROOF BAND  ///////////*/
/*////////////////////////////////////////*/

/* The one strongly-coloured full-width band on the page. Deliberately not
   a .home-section - the alternating white/warm/cool sections all read as
   the same weight, and this needs to break that rhythm rather than join
   it. #135f87 is a darker hold of the site blue (#198dc4).
   #speaker-proof-band is the same band on Become a Speaker. */
#home-proof-band,
#speaker-proof-band {
	clear: both;
	overflow: hidden;
	background-color: #135f87;
	color: #fff;
	padding: 40px 0;
	min-width: 1060px;
}

#home-proof-band .wrap,
#speaker-proof-band .wrap {
	width: 1060px;
	margin: 0 auto;
}

/* White rather than inheriting the .home-section h2 colour - this heading
   sits on the saturated blue band, not a light section. */
.proof-headline {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
	text-align: center;
	margin: 0 0 30px;
}

.proof-stats {
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.proof-stats li {
	flex: 1;
	text-align: center;
	padding: 0 20px;
	/* Divider between stats, suppressed on the first so the row doesn't
	   open with a stray rule. */
	border-left: 1px solid rgba( 255, 255, 255, 0.22 );
}

.proof-stats li:first-child {
	border-left: none;
}

.proof-num {
	display: block;
	font-size: 44px;
	font-weight: 750;
	line-height: 1.05;
	letter-spacing: -0.01em;
	/* Fixed-width digits so the count-up animation (home-stats-counter.js)
	   doesn't jitter as the number of digits changes frame to frame. */
	font-variant-numeric: tabular-nums;
}

.proof-label {
	display: block;
	font-size: 13.5px;
	line-height: 1.4;
	margin-top: 6px;
	/* Sits on a saturated blue, so a lighter tint of the same white rather
	   than a grey, which would muddy against the background. */
	color: rgba( 255, 255, 255, 0.85 );
}

.proof-cta {
	text-align: center;
	margin-top: 30px;
}

.proof-cta p {
	font-size: 13.5px;
	color: rgba( 255, 255, 255, 0.85 );
	margin: 0 0 14px;
}

.proof-btn {
	display: inline-block;
	background-color: #ff8000;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	padding: 13px 30px;
	border-radius: 999px;
	text-decoration: none;
	border: 2px solid #ff8000;
}

/* Inverted from the other buttons on the page: they go orange-to-blue on
   hover, which would vanish into this band's background. */
.proof-btn:hover {
	background-color: #fff;
	border-color: #fff;
	color: #135f87;
	text-decoration: none;
	transition: all 0.5s ease 0s;
}


/*////////////////////////////////////////*/
/*////////////  FEATURED SPEAKERS  ///////////*/
/*////////////////////////////////////////*/


#featured-speakers-home {
	clear: both;
	background-color: #f4f6f7;
	padding: 40px 0;
	overflow: hidden;
	/* Dates from when this section rendered outside #content-wrapper and so
	   inherited no minimum of its own. It now sits inside that wrapper and
	   picks up its min-width: 1160px, making this redundant - kept as a
	   floor anyway, so the 1060px .wrap can never shrink below 3-column
	   width and reflow against the rest of this deliberately
	   non-responsive, fixed-width site. */
	min-width: 1060px;
}


#featured-speakers-home .wrap {
	/* 1060px, matching #home-slide and the rest of the redesigned homepage
	   sections - was 960px, which put this section's left edge ~50px off
	   from the slideshow/header above it (see .home-section .wrap for the
	   same fix and full explanation). */
	width: 1060px;
	margin: 0 auto;
}


#featured-speakers-home h2 {
	font-size: 28px;
	font-weight: 600;
	text-align: center;
	margin-bottom: 25px;
}


ul.featured-speakers-grid {
	/* Flexbox, not Grid - Grid's justify-content centers the whole track
	   structure as one block, so a lone leftover card in the last row
	   would land left-aligned under column 1 instead of centered.
	   Flexbox's justify-content centers each wrapped row independently,
	   which is what makes 4 cards render as 3-on-top / 1-centered-below,
	   and 1-2 cards center as a group with no special-case code needed. */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}


/* Class-only, not li.featured-speaker-tile: the single topic page renders
   this same card as a <div> beside the talk, and an element-qualified
   selector wouldn't reach it. The homepage grid is unaffected - its tiles
   are the only <li>s that carry the class. */
.featured-speaker-tile {
	/* This stylesheet has no box-sizing: border-box reset anywhere, so
	   without this, the 300px flex-basis below only covers content -
	   padding and border get added on top, making each tile 342px
	   (300 + 40 padding + 2 border) instead of 300px, and 3 of those plus
	   gaps (1066px) no longer fit the 960px wrap, so it silently wraps to
	   2 per row. Scoped to this component only, not a site-wide reset. */
	box-sizing: border-box;
	flex: 0 0 300px;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 20px;
	text-align: center;
}


.featured-speaker-image img {
	width: 100px;
	height: 100px;
}


.featured-speaker-tile h3 {
	font-size: 17px;
	line-height: 20px;
	font-weight: 600;
	margin: 12px 0 2px;
}


.featured-speaker-tile h3 a {
	color: #258FBF;
	text-decoration: none;
	font-weight: 600;
}


.featured-speaker-tile h4 {
	font-size: 13px;
	line-height: 17px;
	font-weight: normal;
	color: #666;
	margin: 0 0 10px;
}


/* Tinted rather than solid, matching .topic-row-category in the Featured
   Topics section - these are the same thing (a speaker's category, linked to
   its archive) and were reading as two different components. Bold because
   blue-on-tint needs the weight that white-on-solid didn't. */
.featured-speaker-category {
	display: inline-block;
	background-color: #e8f1f7;
	color: #198dc4;
	text-decoration: none;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 3px 10px;
	border-radius: 12px;
	margin-bottom: 10px;
}

.featured-speaker-category:hover {
	background-color: #198dc4;
	color: #fff;
	text-decoration: none;
	transition: all 0.5s ease 0s;
}


.featured-speaker-excerpt {
	font-size: 13px;
	line-height: 18px;
	color: #555;
	margin: 0 0 15px;
}


.featured-speaker-cta {
	display: inline-block;
	background-color: #198dc4;
	color: #fff;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	padding: 8px 20px;
	border-radius: 999px;
}

/* This was the last button on the page with no hover state. Already blue, so
   it deepens to the proof band's darker blue rather than swapping hue like
   the orange buttons do. */
.featured-speaker-cta:hover {
	background-color: #135f87;
	color: #fff;
	text-decoration: none;
	transition: all 0.5s ease 0s;
}


/*////////////////////////////////////////*/
/*////////////  HOME CLOSING CTA  ///////////*/
/*////////////////////////////////////////*/

/* Deliberately not the same blue as #home-proof-band or #nav-footer-wrapper -
   this section sits directly above the blue footer bar, so a second blue
   band here would bleed into it instead of reading as its own section.
   #0a3247 is already in the palette (the darker navy of #social-footer-wrapper
   further down), so this doesn't introduce a new color to the page. */
#home-closing-cta {
	clear: both;
	overflow: hidden;
	background-color: #0a3247;
	color: #fff;
	padding: 60px 0;
	min-width: 1060px;
	text-align: center;
}

/* 1060px, same as every other section's .wrap (see .home-section .wrap) -
   this section's copy is a single sentence, but at the 700px text measure
   it wrapped early and read narrower than the page it closes. */
#home-closing-cta .wrap {
	width: 1060px;
	margin: 0 auto;
}

#home-closing-cta h2 {
	font-size: 30px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 14px;
	text-wrap: balance;
}

/* Deliberately narrower than the 1060px .wrap around it - the heading and
   buttons want the full page width, but this sentence runs nearly 1000px
   as a single line, which is a long way for an eye to track. 720px forces
   it onto two lines at every city name we have.

   text-wrap: balance then evens those two lines out instead of letting the
   first run full-width and the second trail short. It does this per-site
   at render time, so the lines stay roughly equal as the city name changes
   length - which is what makes this hold up across all seven sites without
   a hand-placed <br>. Browsers without support just wrap normally, still
   two lines, only less evenly.

   16px full white since 2026-10-19 (was 15px at 85%): Andy found the
   same treatment hard to read on the Become a Speaker band. The link
   to Become a Speaker stays white, underlined, orange on hover. */
#home-closing-cta p {
	font-size: 16px;
	line-height: 1.5;
	color: #fff;
	margin: 0 auto;
	max-width: 720px;
	text-wrap: balance;
}

#home-closing-cta p a {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: rgba( 255, 255, 255, 0.6 );
	text-underline-offset: 3px;
}

#home-closing-cta p a:hover,
#home-closing-cta p a:focus-visible {
	color: #ffb35c;
	text-decoration-color: #ffb35c;
}

/* Same .home-btn / .home-btn--primary / .home-btn--secondary buttons used
   in the intro section up top, just centered instead of left-aligned - so
   the hover states (orange-to-blue, transparent-to-blue) match the rest of
   the page instead of introducing a third button style. */
.home-cta-row--center {
	justify-content: center;
	margin-top: 26px;
}

/* The secondary button is transparent-on-white everywhere else, which
   leaves it near-invisible on this navy - so here it fills white and
   keeps the blue line and blue text. Scoped to this section rather than
   changed on .home-btn--secondary itself, which is also the intro CTA and
   the "Read More Testimonials" button - both sit on light backgrounds
   where transparent already works. The blue-fill hover is untouched. */
#home-closing-cta .home-btn--secondary {
	background-color: #fff;
	color: #198dc4;
	border-color: #198dc4;
}

#home-closing-cta .home-btn--secondary:hover {
	background-color: #198dc4;
	border-color: #198dc4;
	color: #fff;
}


/*////////////////////////////////////////*/
/*////////////  HOME FEATURED TOPICS  ///////////*/
/*////////////////////////////////////////*/

/* The old single-topic #featured-home-speech-topic rules lived here and went
   away with the markup they styled - this section is three rows now. The
   a.request-this-speech button further down is deliberately kept: it's the
   shared request button used on speaker profile and topic pages too, not
   homepage-only. */

.topic-row {
	display: flex;
	align-items: center;
	gap: 20px;
	background-color: #fff;
	border: 1px solid #e2e1dd;
	border-radius: 12px;
	padding: 20px 22px;
	margin-bottom: 12px;
}

.topic-row:last-child {
	margin-bottom: 0;
}

/* Fixed width, so every row's title starts at the same point. Category names
   run from "Business Speaker" to "Self-Improvement Speaker", and letting this
   column size to its content left a visibly ragged edge down the section. */
.topic-row-speaker {
	width: 150px;
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
}

.topic-row-speaker img {
	display: block;
	width: 88px;
	height: 88px;
	border-radius: 50%;
}

/* Renders as an <a> to the speaker-category archive, or a plain <span> for
   speakers with no category assigned - hence styling the class rather than
   the element. */
.topic-row-category {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #198dc4;
	background-color: #e8f1f7;
	border-radius: 999px;
	padding: 5px 10px;
	text-align: center;
	line-height: 1.3;
	text-decoration: none;
}

a.topic-row-category:hover {
	background-color: #198dc4;
	color: #fff;
	text-decoration: none;
	transition: all 0.5s ease 0s;
}

.topic-row-body {
	flex: 1;
	/* Without this, a long unbroken title can push the flex item wider than
	   its share and squeeze the button. */
	min-width: 0;
}

.topic-row-body h3 {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 7px;
}

.topic-row-body h3 a {
	color: inherit;
}

/* Clamped to two lines in CSS rather than trimmed to a word count in PHP: a
   word count fills a line and a half for some topics and three for others,
   where this fills both lines every time. The trade-off, accepted
   deliberately, is that the cut can land mid-word. */
.topic-row-excerpt {
	font-size: 13.5px;
	line-height: 1.5;
	color: #4b5768;
	margin: 0 0 9px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.topic-row-byline {
	font-size: 12.5px;
	color: #666;
	line-height: 1.5;
}

/* inline-block, not block: block would stretch the link across the full
   width of the row, leaving everything between the name and the request
   button clickable. The role/company span below is block, so it still
   starts its own line. */
.topic-row-byline a {
	display: inline-block;
	color: #198dc4;
	font-size: 15px;
	margin-bottom: 1px;
}

.topic-row-byline span {
	display: block;
}

.topic-row-btn {
	flex: none;
	display: inline-block;
	background-color: #ff8000;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	padding: 10px 20px;
	border-radius: 999px;
	text-decoration: none;
	border: 2px solid #ff8000;
}

/* Same orange-to-blue hover as the other buttons on this page. */
.topic-row-btn:hover {
	background-color: #198dc4;
	border-color: #198dc4;
	color: #fff;
	text-decoration: none;
	transition: all 0.5s ease 0s;
}

a.request-this-speech {
	background-image: url(/wp-content/themes/free-speakers/images/src/request-button.jpg);
	width: 250px;
	height: 53px;
	display: block;
	color: #fff;
	position: realative;
	margin-left: -5px;
}

a.request-this-speech span {
	display: block;
	padding: 12px 0 0 28px;
}



/*////////////////////////////////////////*/
/*////////////  HOME TESTIMONIAL  ///////////*/
/*////////////////////////////////////////*/


/* The old single-quote #home-testimonial rules lived here. They went away
   with the aside they styled - the section is now a three-card grid. The
   ghost-bubble graphic they used is still in use, behind .steps-card. */

.testimonial-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
}

.testimonial-card {
	/* Same box-sizing note as .category-card and li.featured-speaker-tile:
	   this stylesheet has no border-box reset, so without it the padding
	   and border push each card past 341px and only two fit per row. */
	box-sizing: border-box;
	width: 341px;
	background-color: #fff;
	border: 1px solid #e2e1dd;
	border-radius: 12px;
	padding: 24px 22px;
	display: flex;
	flex-direction: column;
	text-align: left;
}

.testimonial-quote-mark {
	font-family: Georgia, serif;
	font-size: 34px;
	line-height: 1;
	color: #ff8000;
	margin-bottom: 4px;
}

/* flex: 1 so the attribution sits on the baseline of the card regardless of
   quote length - otherwise cards in a row have their attributions at
   different heights. */
.testimonial-body {
	font-size: 14px;
	line-height: 1.6;
	flex: 1;
	margin-bottom: 14px;
}

.testimonial-body p {
	margin: 0 0 10px;
}

.testimonial-body p:last-child {
	margin-bottom: 0;
}

.testimonial-attribution {
	font-size: 12.5px;
	font-weight: 700;
	color: #198dc4;
}

.testimonial-attribution span {
	display: block;
	font-weight: 400;
	color: #666;
	margin-top: 2px;
}

.testimonial-more {
	text-align: center;
	margin-top: 26px;
}


/*////////////////////////////////////////*/
/*////////////  HOME NEWS  ///////////*/
/*////////////////////////////////////////*/

/* This section's heading and standfirst are both long enough to wrap, unlike
   the other .section-head copy on the page, and at the full 1060px they wrapped
   badly - the heading dropping one or two words onto a second line, the
   sentence running nearly the full width as a single line. Capping the sentence
   and balancing both puts each on even lines at any city-name length, which is
   the same treatment (and the same reason) as #home-closing-cta p. */
#home-news .section-head h2 {
	text-wrap: balance;
}

#home-news .section-head p {
	max-width: 760px;
	margin: 0 auto;
	text-wrap: balance;
}

/* Same 341px card on an 18px gap as .testimonial-grid above (341 x 3 + 18 x 2
   = 1059, the 1060px wrap), so the two card sections on this page line up
   column for column rather than being two different grids that happen to sit
   near each other. Flex-wrapped and centered for the same reason the category
   grid is: five featured stories should render 3-on-top / 2-centered-below,
   not 3 and a stranded pair on the left. */
.news-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
}

/* The whole card is clickable, but only the headline is a link - see
   .news-card h3 a below for why. position: relative makes this the containing
   block for that link's stretched hit area. */
.news-card {
	position: relative;
	/* Same box-sizing note as .testimonial-card and .category-card: no
	   border-box reset in this stylesheet, so without it padding and border
	   push the card past 341px and only two fit per row. */
	box-sizing: border-box;
	width: 341px;
	display: flex;
	flex-direction: column;
	background-color: #fff;
	border: 1px solid #e2e1dd;
	border-radius: 12px;
	padding: 22px;
}

.news-card:hover,
.news-card:focus-within {
	border-color: #198dc4;
	transition: all 0.5s ease 0s;
}

/* Fixed height, not sized to the image. Outlet logos in the library run from
   600x162 to 2200x308, and one story's featured image is a portrait rather
   than a logo - letting this box size itself would step every headline in the
   row to a different height. The rule under it reads as a masthead line and
   holds the shape when a story has no image at all. */
.news-card-logo {
	height: 72px;
	display: flex;
	align-items: center;
	margin-bottom: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid #ecebe7;
}

/* max-* with auto on both axes rather than object-fit: the images carry width
   and height attributes from WordPress, and this scales them down inside the
   box on whichever axis binds first while keeping their proportions. A wide
   masthead hits the width limit, a squarer logo hits the height.

   250px is most of the 295px of card inside the padding - these logos are the
   reason anyone looks at this section, so they get the room. Wider than this
   and a 7:1 masthead runs edge to edge with nothing holding it. */
.news-card-logo img {
	display: block;
	width: auto;
	height: auto;
	max-width: 250px;
	max-height: 72px;
}

/* Stands in for a missing logo (see fs_get_news_outlet). Set in the page's own
   face at a wordmark-ish size rather than styled to imitate a logo, which
   would read as a broken image that never loaded. */
.news-card-outlet {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
	color: #4b5768;
}

/* Clamped to three lines, same trade-off accepted in .topic-row-excerpt: news
   headlines here run from 46 to 92 characters, and trimming by word count in
   PHP would leave the short ones floating on one line while the long ones
   still overflowed.

   flex: 1 for the same reason .testimonial-body has it - it pushes the read
   link onto the card's baseline, so a one-line headline and a three-line one
   still end at the same place across a row. */
.news-card h3 {
	flex: 1;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
	color: #333;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Not a link - the whole card is already one. This is the affordance that
   says so, styled like the link it stands in for. */
.news-card-more {
	font-size: 13px;
	font-weight: 700;
	color: #198dc4;
	margin-top: 12px;
}

/* The headline carries the only link in the card, and its ::after is stretched
   over the whole card so the card is still one big click target.

   The card used to be a single <a> wrapped around the logo, the headline and
   the read prompt. That works, but everything inside an anchor is its anchor
   text, so the link arrived at the story described as "<outlet> <headline>
   Read the story" - the two generic words at the end diluting the headline,
   which is the part that actually says what's on the other end. This keeps one
   link and one hit area, with the headline alone as the anchor text.

   The overflow: hidden on the h3 (for the line clamp) doesn't clip this: the
   h3 is statically positioned, so the stretched box's containing block is
   .news-card, further up, and an overflow ancestor only clips what it's the
   containing block for. */
.news-card h3 a {
	color: inherit;
	text-decoration: none;
}

.news-card h3 a::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.news-card:hover h3 a,
.news-card:focus-within h3 a {
	color: #198dc4;
	text-decoration: none;
	transition: all 0.5s ease 0s;
}

.news-more {
	text-align: center;
	margin-top: 26px;
}


/*////////////////////////////////////////*/
/*////////////  CONTENT  ///////////*/
/*////////////////////////////////////////*/


#content-wrapper {
	background-color: #fff;
 	min-width: 1160px;
 	clear: both;
}


#content {
	width: 1060px;
	overflow: hidden;
	margin: 0 auto;	
	padding: 20px 50px 20px 50px;
	
}


#content-feature {
	float: left;
	width: 780px;
	border-right: 1px solid #ccc;
	padding-right: 30px;
	margin-right: 20px;
}


#main-sidebar {
	float: right;
	width: 210px;
}

/*////////////////////////////////////////*/
/*////////////  SIDEBARS  ///////////*/
/*////////////////////////////////////////*/

#sidebar-intro,
#sidebar-speaker,
#sidebar-topic {
	margin-bottom: 20px;
}


#sidebar-intro strong {
	font-weight: 500;
}


#sidebar-speaker h1,
#sidebar-topic h1 {
	background-color: #198FC1;
	border: 4px solid #0CBFDD;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	padding: 4px 3px 4px 3px;
	color: #fff;
	text-transform: uppercase;
	font-size: 16px;
	text-align: center;
	margin: 0;
}


.sidebar-list ul {
	list-style-type: none;
	font-size: 15px;
	margin-top: 5px;
}


.sidebar-list ul li {
	margin-top: 5px;
}


.sidebar-list h2 {
	font-weight: 300;
}


.sidebar-list li a {
	color: #000;
	padding-left: 19px;
}

.sidebar-list h1 a {
	color: #fff;
}
#content .sidebar-list h1 a:hover {
	color: #e2effd;
}

.sidebar-list li a:hover,
.sidebar-list li a.current {
	color: #000;
	background-image: url(/wp-content/themes/free-speakers/images/src/arrow-hover-blue.jpg);
	background-position: 0 5px;
	background-repeat: no-repeat;
}



/*////////////////////////////////////////*/
/*////////////  TSR LISTS  ///////////*/
/*////////////////////////////////////////*/

.tsr-sort {
	padding: 5px 0 5px 0;
	margin:  5px 0 5px 0;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #ccc;
	text-align: right;
}

.tsr-paging {
	padding: 5px 0 5px 0;
	margin:  5px 0 5px 0;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #ccc;
	text-align: center;
}

.tsr-sort span a,
.tsr-paging span a {
	display: inline-block;
	padding: 0 5px 0 5px;
}



section#content-feature  ul.tsr-list {
	overflow: hidden;
	margin-left: 0;
}


ul.tsr-list li {
	overflow: hidden;
	padding: 5px 0 5px 0;
	margin: 5px 0 5px 0;
	border-bottom: 1px solid #ccc;
}


ul.tsr-list li:last-child {
	border-bottom: none;
}


ul.tsr-list .tsr-image {
	float: left;
	width: 92px;
}


ul.tsr-list .tsr-content {
	float: right;
	width: 668px;
}

.tsr-content h2, 
.tsr-content h3  {
	font-size: 17px;
	line-height: 20px;
	font-weight: 300;
	margin-bottom: 5px;
}


.tsr-content h2 a, 
.tsr-content h3 a {
	color: #258FBF;
	text-decoration: none;
	font-weight: bold;
}


.tsr-content h4 {
	font-size: 16px;
	line-height: 20px;
	font-weight: 300;
	color: #777;
	margin-bottom: 5px;
}


.tsr-content h4 a {
	color: #777;
	text-decoration: none;
	font-weight: 500;
}


.tsr-content p {
	margin-top: 0;
}



.tsr-more  {
	color: #ff9901;
    font-weight: bold;
    text-decoration: underline;
}


ul#topic-category .tsr-image {
	width: 43px;
}


ul#topic-category .tsr-content {
	width: 726px;
}

ul#topic-category .tsr-content h3 {
	color: #000;
}


ul#topic-category .tsr-content h3 a {
	color: #000;
}



ul#topic-category .request-this-speech span {
	padding: 12px 0 0 18px;
}

/*////////////////////////////////////////*/
/*////////////  NEWS  ///////////*/
/*////////////////////////////////////////*/

/* The story list on the News Room and Speaker Resources (Sound Bites)
   pages, template-parts/story-list.php. One card per story, built as a
   sibling of .topic-row (same white card, border and radius) with the
   story's picture in a column on the right.

   Most selectors carry #content-feature because the general-page rules
   they have to beat do: "section#content-feature ul" puts a 40px left
   margin on every list, and "#content a:hover" turns every hovered link
   black, which would undo the card's blue headline hover. */
section#content-feature ul.story-list {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Grid rather than the old float: the picture keeps its own column and
   lines up with the middle of the text, however long the summary runs.
   minmax(0, 1fr) so a long unbroken headline can't widen the text track
   and push the picture out. position: relative holds the headline link's
   stretched hit area (below). Same box-sizing note as .news-card: there is
   no border-box reset in this stylesheet. */
.story-row {
	position: relative;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 240px;
	gap: 30px;
	align-items: center;
	background-color: #fff;
	border: 1px solid #e2e1dd;
	border-radius: 12px;
	padding: 24px 26px;
}

.story-row--no-image {
	grid-template-columns: minmax(0, 1fr);
}

.story-row:hover,
.story-row:focus-within {
	border-color: #198dc4;
	transition: all 0.5s ease 0s;
}

#content-feature .story-row h2 {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: #333;
	margin: 0 0 4px;
	text-wrap: balance;
}

#content-feature .story-row h2 a {
	color: inherit;
	text-decoration: none;
}

/* The headline is the card's only link, stretched over the whole card so
   the card is still one click target. Same arrangement and reasoning as
   .news-card h3 a::after: one link, with the headline alone as its text. */
#content-feature .story-row h2 a::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: 12px;
}

#content-feature .story-row:hover h2 a,
#content-feature .story-row:focus-within h2 a {
	color: #198dc4;
	transition: all 0.5s ease 0s;
}

#content-feature .story-row h2 a:focus-visible {
	outline: 2px solid #198dc4;
	outline-offset: 3px;
}

#content-feature .story-row-date {
	font-size: 13.5px;
	line-height: 1.4;
	color: #6b7480;
	margin: 0 0 10px;
}

#content-feature .story-row-summary {
	font-size: 15px;
	line-height: 1.6;
	color: #4b5768;
	margin: 0;
}

/* Not a link - the whole card is already one. This is the affordance that
   says so, styled like .news-card-more. */
#content-feature .story-row-more {
	display: inline-block;
	font-size: 13.5px;
	font-weight: 700;
	color: #198dc4;
	margin-top: 10px;
}

/* Right-justified in its column. max-* on both axes, as .news-card-logo img
   does: outlet logos run from 300x43 to 2200x308 and speaker headshots are
   portrait, so a wide masthead stops at the width limit and a headshot at
   the height limit, each keeping its proportions. */
.story-row-image {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.story-row-image img {
	display: block;
	width: auto;
	height: auto;
	max-width: 240px;
	max-height: 160px;
}

/* The link back to the list at the top of a story page (single.php). */
#content-feature a.story-back {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	color: #198dc4;
	margin: 0 0 8px;
}

#content-feature a.story-back:hover {
	color: #000;
}

/* The site's own bands (see the responsive section at the end of this
   file). 899: the picture column narrows. 559: the text beside a 180px
   picture would drop under about 250px, so the picture takes its own row
   above the headline, left-aligned with the text - a logo still reads as
   the outlet's masthead there. */
@media (max-width: 899px) {
	.story-row {
		grid-template-columns: minmax(0, 1fr) 180px;
		gap: 24px;
	}

	/* Restated: the rule above is later than .story-row--no-image and
	   just as specific, so it would give a card with no picture an empty
	   180px column. */
	.story-row--no-image {
		grid-template-columns: minmax(0, 1fr);
	}

	.story-row-image img {
		max-width: 180px;
		max-height: 130px;
	}
}

@media (max-width: 559px) {
	.story-row,
	.story-row--no-image {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
		padding: 20px;
	}

	.story-row-image {
		order: -1;
		justify-content: flex-start;
	}

	.story-row-image img {
		max-width: 200px;
		max-height: 110px;
	}
}



/*////////////////////////////////////////*/
/*////////////  REQUEST FORM  ///////////*/
/*////////////////////////////////////////*/

form#request-speech-wm,
form#contact-form   {
	font-family: "Open Sans",sans-serif;
	color: #777;
	font-size: 14px;
}

form#request-speech-wm input[type="checkbox"], form#request-speech-wm input[type="text"],
form#contact-form input[type="checkbox"], form#contact-form input[type="text"]
 {
    background: #fbfbfb none repeat scroll 0 0;
}


form#request-speech-wm input[type="checkbox"], form#request-speech-wm input[type="text"],
form#contact-form input[type="checkbox"], form#contact-form input[type="text"]  {
    background: #fbfbfb none repeat scroll 0 0;
}

form#request-speech-wm input[type="text"],
form#contact-form input[type="text"]  {
    font-size: 24px;
    margin: 2px 6px 16px 0;
    padding: 3px;
    width: 550px;
}

form#request-speech-wm  input[type="text"],
form#contact-form  input[type="text"] {
    font-size: 24px;
    margin: 2px 6px 16px 0;
    padding: 3px;
    width: 550px;
}

form#request-speech-wm input[type="checkbox"], input[type="color"], input[type="date"], input[type="datetime-local"], input[type="datetime"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="radio"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], select, textarea {
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07) inset;
    color: #32373c;
    outline: 0 none;
    transition: border-color 0.05s ease-in-out 0s;
}



/*////////////////////////////////////////*/
/*////////////  TESTIMOLIALS  ///////////*/
/*////////////////////////////////////////*/

section#content-feature  ul#testimonials-group {
	list-style-type: none;
	margin: 50px 0 0 0;
}


ul#testimonials-group li {
	padding: 10px 50px 40px 90px;
	margin: 0;
	background-image: url(/wp-content/themes/free-speakers/images/src/quote-ghost-small-light.gif);
	background-position: top left;
	background-repeat: no-repeat;
}



ul#testimonials-group li em  {
	display: block;
	text-align: right;
}



/*////////////////////////////////////////*/
/*////////////  FAQs  ///////////*/
/*////////////////////////////////////////*/

dl#faq-group dt {
	font-weight: bold;
	
}

dl#faq-group dd{
	margin-bottom: 25px;
	
}

dl#faq-group dd p {
	margin-top: 0;
	
}

.avatar {
	-webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}

/*////////////////////////////////////////*/
/*////////////  JOIN GRID ///////////*/
/*////////////////////////////////////////*/

table#member-comparison-chart {
	font-size: 12px;
	border-collapse: collapse;
	margin: 15px 0 30px 0;
}


#member-comparison-chart tr th {
	text-align: left;
	font-weight: bold;
	padding: 5px;
}

#member-comparison-chart tr th.sub-header  {
	background-color: #198dc4;
	color: #fff;	
	font-size: 16px;
}


#member-comparison-chart tr td {
	text-align: center;
	padding: 5px;
}

#member-comparison-chart tr.member-content td {
	text-align: left;
}

#member-comparison-chart thead tr th {
	width: 25%;
	text-align: center;
	font-weight: bold;
	background-color: #198dc4;
	color: #fff;
	font-size: 16px;
	-webkit-border-top-left-radius: 15px;
	-webkit-border-top-right-radius: 15px;
	-moz-border-radius-topleft: 15px;
	-moz-border-radius-topright: 15px;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
}

#member-comparison-chart thead tr th.elite,
#member-comparison-chart tr td.elite  {
	background-color: #0D3246;
	color: #fff;
}

#member-comparison-chart tr th.elite  {
	position: relative;
}

#member-comparison-chart tr th.elite img {
	position: absolute;
	top: -17px;
	left: 160px;
	z-index: 100;
}


#member-comparison-chart  td {
	overflow: hidden;
	vertical-align: top;
}

#member-comparison-chart div.member-bullet {
	float: left;
	width: 16px;
	padding-top: 3px;
}

#member-comparison-chart div.member-content {
	float: right;
	width: 228px;
}



section#content-join-grid table#member-comparison-chart th,
section#content-join-grid table#member-comparison-chart td {
    border: 2px solid #ECF3F9;
}


section#content-join-grid table#member-comparison-chart thead tr th {
    border: 2px solid #fff;
}

tr.zebra-row td,
tr.zebra-row th {
	background-color: #ECF3F9;
}

table#member-comparison-chart tr.checkmark td {
	color: #00B200;
	font-weight: bold;
	font-size: 17px;
	vertical-align: middle;	
}


#member-comparison-chart td.buyrow  {
	color: #198dc4;
	font-size: 16px;
	font-weight: bold;	
}


#member-comparison-chart td.buyrow  p,
#member-comparison-chart td.elitebuy p {
	margin: 10px 0 10px 0;
}


#member-comparison-chart td.buyrow a {
	display: inline-block;
	background-color: #198dc4;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding: 5px 20px 5px 20px;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
}

#member-comparison-chart td.elitebuy {
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	background-color: #0D3246;
}


#member-comparison-chart td.elitebuy a {
	background-color: #f60;
}

#member-comparison-chart td.elitebuy a:hover,
#member-comparison-chart td.buyrow a:hover {
	background-color: #59B200;
	-moz-transition: all 0.5s ease 0s;
	-webkit-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
}


.join-header-dark {
	background-color: #0D3246;
}


/*////////////////////////////////////////*/
/*////////////  CONTACT ///////////*/
/*////////////////////////////////////////*/



#contact-form {
	margin: 0 0 0 0;
	float: left;
}


span.omitted {
	color: #f60;
	font-weight: normal;
}



#contact-form input {
	width: 400px;
	border-radius: 5px 5px 5px 5px;
	height: 25px;
	border: 1px solid #ccc;
	font-size: 16px;
    font-family: "Open Sans", Helvetica, Arial, sans-serif; /* was Lato, which the site never loads, so these showed in Arial */

}

#contact-form textarea {
	width: 400px;
	border-radius: 5px 5px 5px 5px;
	height: 150px;
	border: 1px solid #ccc;
	font-size: 16px;
    font-family: "Open Sans", Helvetica, Arial, sans-serif; /* was Lato, which the site never loads, so these showed in Arial */
}

#contact-form #submit-form {   
	background-color: #76A933;
    border: 3px solid #C9DEB6;
    color: #fff;
    font-size: 13px;
    padding: 8px;
    width: 200px;
    text-align: center;
    height: 40px;
}

#contact-form #submit-form:hover {   
    border: 3px solid #76A933;
    color: #000;
	-moz-transition: all 0.5s ease 0s;
	-webkit-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
	font-weight: bold;
}




/*////////////////////////////////////////*/
/*////////////  FOOTER  NAV ///////////*/
/*////////////////////////////////////////*/

#nav-footer #menu-footer {
	padding: 10px 0 10px 0;
	list-style-type: none;
	text-align: left;
	font-size: 14px;
}


#nav-footer #menu-footer li {
	display: inline;
	border-right: 1px solid #fff;
	padding: 0 15px 0 15px;
}

#nav-footer #menu-footer li:first-child {
	padding: 0 15px 0 0;
}


#nav-footer #menu-footer li {
	display: inline;
	border-right: 1px solid #fff;
	padding: 0 15px 0 15px;
}


#nav-footer #menu-footer li:last-child {
	border-right: none;
}

#nav-footer #menu-footer li a {
	color: #fff;	
}

#nav-footer #menu-footer li#menu-item-48 {
	border-right: 0;
}


#nav-footer #menu-footer li.current-menu-item a {
	color: #0A3247;
}



/*////////////////////////////////////////*/
/*////////////  COPYRIGHT & SOCIAL ///////////*/
/*////////////////////////////////////////*/


#copyright {
	float: left;
	text-align: left;
	overflow:hidden;
	list-style-type: none;
	font-size: 14px;
	padding: 7px 0 0 0;
}


#copyright li {
	float: left;
	text-align: left;
	padding-right:30px;
}



#social-media {
	float: right;
	text-align: right;
	overflow:hidden;
	list-style-type: none;
}

#social-media li {
	float: right;
	text-align: right;
	padding-left: 8px;

}

/*////////////////////////////////////////*/
/*////////////  FOOTER  ///////////*/
/*////////////////////////////////////////*/

#nav-footer-wrapper {
	min-width: 1060px;
	background-color: #198DC4;
 	min-width: 1160px;
 	border-top: 3px solid #ff8000;

}


#nav-footer {
	width: 1060px;
	overflow: hidden;
	margin: 0 auto;	
	color: #fff;
	padding: 0 50px 0 50px;
}


#social-footer-wrapper {
 	min-width: 1160px;
	background-color: #0A3247;
}


#social-footer {
	width: 1060px;
	overflow: hidden;
	margin: 0 auto;	
	color: #fff;
	padding: 20px 50px 0 50px;
	overflow:hidden;
}


#social-footer a {
	color: #fff;
}

#smd {
	font-size: 14px;
	width: 1060px;
	margin: 0 auto;
	padding-bottom: 40px;
	color: #fff;
}

#smd a {
	color: #fff;
}




/*////////////////////////////////////////*/
/*////////////  SINGLE TOPIC PAGE  ///////////*/
/*////////////////////////////////////////*/

/**
 * single-fsc-topic.php. Deliberately does NOT use #content-feature: that ID
 * carries the 780px float and the border that divides content from the
 * sidebar, and this page has no sidebar - the talk and the speaker who gives
 * it are the whole page.
 *
 * Everything here sits inside #content, where `#content a:hover { color: #000 }`
 * (specificity 111) outranks a plain class hover. Every hover below that needs
 * to keep its own colour is therefore scoped with #content to outrank it -
 * including the ones on the reused Elite Speakers card, which is normally
 * rendered on the homepage outside #content and so never met that rule.
 */

.fsc-topic-page {
	width: 1060px;
	overflow: hidden;
}

.fsc-topic-title {
	font-size: 32px;
	line-height: 38px;
	font-weight: 600;
	color: #f60;
	margin: 0 0 4px;
}

/* Same tinted pill as .topic-row-category and .featured-speaker-category. */
.fsc-topic-pill {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #198dc4;
	background-color: #e8f1f7;
	border-radius: 999px;
	padding: 5px 10px;
	line-height: 1.3;
	text-decoration: none;
}

#content a.fsc-topic-pill:hover {
	background-color: #198dc4;
	color: #fff;
	transition: all 0.5s ease 0s;
}

.fsc-topic-cols {
	display: flex;
	align-items: flex-start;
	gap: 40px;
	margin-top: 22px;
}

.fsc-topic-main {
	width: 720px;
	flex: none;
}

.fsc-topic-aside {
	width: 300px;
	flex: none;
}

/* Filed-under band: the topic's own category, plus the way back out to the
   rest of it. Full width under both columns, so its rule also separates the
   talk from the speaker's other topics - which is why .fsc-topic-more has no
   border of its own. */
.fsc-topic-filed {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 32px;
	padding: 15px 0;
	border-top: 1px solid #ccc;
}

.fsc-topic-filed-left {
	display: flex;
	align-items: center;
}

.fsc-topic-filed-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #666;
	margin-right: 12px;
}

/* .fsc-topic-filed-link lived here and went away with the "All Topics in
   {City}" link it styled - the band's right-hand end is the breadcrumb now
   (see the topic page breadcrumb block at the end of this file). /topics/
   is still linked from the header's Topic dropdown on every page. */

/* The card itself is .featured-speaker-tile, shared with the homepage grid.
   Only the width is restated: on the homepage it comes from flex-basis, which
   does nothing here because this card's parent isn't a flex container. */
.fsc-topic-card {
	width: 300px;
}

/* 150px, matching the headshot on the speaker's own profile page, rather than
   the homepage grid's 100px - there are six of those competing for attention
   in a row, and exactly one of these. Scoped so the homepage keeps its size.
   The source image is requested at 300 to match (see $tile_avatar_size in
   single-fsc-topic.php). */
.fsc-topic-card .featured-speaker-image img {
	width: 150px;
	height: 150px;
}

#content .fsc-topic-aside .featured-speaker-category:hover,
#content .fsc-topic-aside .featured-speaker-cta:hover {
	color: #fff;
}

.fsc-topic-body p {
	font-size: 15px;
	line-height: 24px;
}

.fsc-topic-body p:first-child {
	margin-top: 0;
}

.fsc-topic-cta {
	display: flex;
	align-items: center;
	gap: 22px;
	background-color: #f6f4f1;
	border: 1px solid #e2e1dd;
	border-radius: 12px;
	padding: 22px 24px;
	margin-top: 26px;
}

.fsc-topic-cta p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: #4b5768;
}

/* The pill button from the homepage redesign rather than the 250x53
   request-button.jpg the rest of the site still uses. */
a.fsc-topic-btn {
	flex: none;
	display: inline-block;
	background-color: #ff8000;
	color: #fff;
	font-size: 15px;
	font-weight: 650;
	padding: 12px 26px;
	border-radius: 999px;
	border: 2px solid #ff8000;
	text-decoration: none;
}

/* The full border shorthand, not just border-color: #content a:hover sets
   `border-bottom: none`, which killed this button's bottom border on hover and
   made the whole button jump 2px shorter. Restating all four edges here
   outranks it.

   Scoped to #content-WRAPPER, not #content. It was #content until
   2026-08-25, which meant this hover silently stopped existing on the
   rebuilt speaker profile: that page runs full width and so has no
   #content at all, by design. The wrapper is the ancestor both the old
   templates and the new full-width ones share, so one selector covers
   every page instead of needing a second copy. */
#content-wrapper a.fsc-topic-btn:hover {
	background-color: #198dc4;
	border: 2px solid #198dc4;
	color: #fff;
	transition: all 0.5s ease 0s;
}

a.fsc-topic-btn--small {
	font-size: 13px;
	font-weight: 700;
	padding: 10px 20px;
}

.fsc-topic-more {
	clear: both;
	margin-top: 26px;
}

.fsc-topic-more h2 {
	font-size: 20px;
	font-weight: 700;
	color: #0a3247;
	margin: 0 0 14px;
}

/* Same card as the homepage's Featured Topics rows (.topic-row), minus the
   speaker column - every row here is by the speaker named above it. */
.fsc-topic-row {
	display: flex;
	align-items: center;
	gap: 20px;
	background-color: #fff;
	border: 1px solid #e2e1dd;
	border-radius: 12px;
	padding: 20px 22px;
	margin-bottom: 12px;
}

.fsc-topic-row-body {
	flex: 1;
	min-width: 0;
}

.fsc-topic-row-body h3 {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 7px;
}

.fsc-topic-row-body h3 a {
	color: #198dc4;
}

.fsc-topic-row-excerpt {
	font-size: 13.5px;
	line-height: 1.5;
	color: #4b5768;
	margin: 0;
}


/* Closing note about the bureau. Deliberately plain - no card, no fill - so it
   reads as site information rather than part of the talk, and doesn't compete
   with the request panel above it. */
.fsc-topic-about {
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid #e2e1dd;
}

/* Centred across the full column, with text-wrap: balance evening the two
   lines it takes. The note is ~39 words and a line at this width holds about
   145 characters, so two lines are unavoidable - centred and balanced, that
   reads as a deliberate closing note rather than a sentence that ran out of
   room. Browsers without text-wrap just wrap normally, still centred. */
.fsc-topic-about p {
	margin: 0;
	font-size: 14px;
	line-height: 21px;
	color: #4b5768;
	text-align: center;
	text-wrap: balance;
}

.fsc-topic-about strong {
	color: #0a3247;
	font-weight: 700;
}

.fsc-topic-about-link {
	font-size: 13.5px;
	font-weight: 600;
	color: #198dc4;
}


/*////////////////////////////////////////*/
/*////////////  SITEMAP SPEAKER INDEX  ///////////*/
/*////////////////////////////////////////*/

/* The [fs_speaker_sitemap] shortcode - see includes/speaker-sitemap.php.
   Sits inside #content-feature on an otherwise ordinary editor page, so most
   of what's here is holding its own against the generic content styles above
   rather than inventing anything. */

/* The catch-all link to the city's full speaker directory, above the nine
   category groups. Set identically to those headings rather than given any
   emphasis of its own - a run of headings that match reads as one list of
   places to go, and singling this one out with a heavier rule made it look
   like a title for the whole section instead of a link within it. What
   separates it is the space beneath, matching the gap between groups, so it
   reads as its own item rather than a heading for Business speakers. */
#content-feature .fs-sitemap-all {
	margin: 0 0 26px;
	font-size: 17px;
	font-weight: 700;
	line-height: 22px;
	color: #0a3247;
}

#content-feature .fs-sitemap-all a {
	color: inherit;
}

#content-feature .fs-sitemap-all a:hover {
	color: #258fbf;
}

.fs-sitemap-group {
	margin: 0 0 26px;
}

/* The rule under each heading does the work the theme's bare h2 can't: an
   unstyled h2 here renders at 16px black, the same size and weight as the
   names beneath it, so nine of them in a row read as one undifferentiated
   list. Navy rather than the #f60 used for h1 - orange nine times down a
   page of 134 links is a lot, and navy matches the footer and the topic
   page's headings. */
#content-feature .fs-sitemap-heading {
	margin: 0 0 8px;
	padding-bottom: 5px;
	border-bottom: 1px solid #dfe6e9;
	font-size: 17px;
	font-weight: 700;
	line-height: 22px;
	color: #0a3247;
}

/* The whole heading is the link through to that category's own archive, so
   it stays navy at rest - nine of them should still read as headings, not as
   a list of links. Hover goes to the site's link blue rather than the usual
   #content a:hover black, which against navy is barely a change at all. Both
   selectors have to out-specify `#content a`, hence the id. */
#content-feature .fs-sitemap-heading a {
	color: inherit;
}

#content-feature .fs-sitemap-heading a:hover {
	color: #258fbf;
}

/* Beats `section#content-feature ul { margin: 20px 0 20px 40px }` and its
   disc bullets, hence the element+class selector rather than a bare class. */
section#content-feature ul.fs-sitemap-names {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 3;
	column-gap: 26px;
}

section#content-feature ul.fs-sitemap-names li {
	position: relative;
	margin: 0 0 3px;
	padding-left: 12px;
	font-size: 14.5px;
	line-height: 21px;

	/* Without this a name that wraps to two lines can be split across the
	   bottom of one column and the top of the next. */
	break-inside: avoid;
}

/* A drawn bullet rather than list-style, so it can be quieter than the name
   and sit on the first line's baseline regardless of wrapping. */
section#content-feature ul.fs-sitemap-names li:before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 4px;
	height: 4px;
	background-color: #c3d0d6;
	border-radius: 50%;
}

/* The page's own hand-written lists - Pages, Topics, Speaker Resources,
   Other Cities - given the same quiet dot as the generated speaker list, so
   the whole sitemap reads as one page rather than two.

   Scoped to .fs-has-speaker-sitemap, a body class the shortcode adds to
   whatever page it runs on (see includes/speaker-sitemap.php). Deliberately
   not applied to ul.wp-block-list generally: that class is on every list
   block on every page of the site, and this is a sitemap treatment, not a
   sitewide one. #main-sidebar is untouched for the same reason - the
   selector stays inside #content-feature.

   The theme's 40px left margin goes entirely, rather than being reduced to
   offset the 12px of item padding. Preserving the old text position was the
   first instinct and it was wrong: it left these lists indented while the
   generated one sat flush with the headings, so matching the bullets only
   drew attention to the two left edges not matching. At zero, every dot on
   the page lines up under the headings above them. */
.fs-has-speaker-sitemap section#content-feature ul.wp-block-list {
	margin-left: 0;
	list-style: none;
}

.fs-has-speaker-sitemap section#content-feature ul.wp-block-list li {
	position: relative;
	padding-left: 12px;
}

/* 9px rather than the 8px used on the speaker names: these items are 16px
   text on a 22px line rather than 14.5px on 21px, so the dot needs a pixel
   more to sit on the middle of it. */
.fs-has-speaker-sitemap section#content-feature ul.wp-block-list li:before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 4px;
	height: 4px;
	background-color: #c3d0d6;
	border-radius: 50%;
}


/*////////////////////////////////////////*/
/*////////  TOPIC ARCHIVES  //////////*/
/*////////////////////////////////////////*/

/* /topics/ and the nine /topic-category/ pages, rebuilt 2026-08-21 around
   the homepage's Featured Topics card.

   These pages deliberately do NOT use #content-feature - that ID carries
   the float, the 780px width and the dividing border that make room for a
   sidebar. They run the full width of #content instead, the same
   departure single-fsc-topic.php already makes. */

/* Laid out like a homepage section rather than like page content: the
   section spans the viewport and carries the tint, and a centered
   .wrap inside it holds the 1060px column. That 1060px is the same
   measure as the homepage's Featured Topics rows, so the card these
   pages borrow is exactly the width it was designed at. */
.topic-archive {
	clear: both;
	overflow: hidden;
	background-color: #eef3f6;
	padding: 30px 0 46px;
	/* Matches #content-wrapper, so the tint can never be narrower than
	   the fixed-width column inside it on this deliberately
	   non-responsive site. */
	min-width: 1160px;
}

.topic-archive .wrap {
	width: 1060px;
	margin: 0 auto;
}

/* Cool rather than the warm #f6f4f1 the homepage's topic rows sit on:
   these pages are a directory, and the ground matches the Elite Speakers
   section (#f4f6f7) taken one step bluer to the theme's own
   .home-section--cool token, which is the value that actually reads as
   light blue. Card fill and border follow .featured-speaker-tile - #fff
   on #ddd - because the warm #e2e1dd border the homepage rows use goes
   muddy on a cool ground. */

.topic-archive h1 {
	margin-bottom: 14px;
}

/* Full 1060px, matching .speaker-archive-intro. This carried a 820px cap
   until 2026-08-22, and the history is worth keeping because the reason
   it existed is not the reason it went:

   The stock intro - the same ~33-word text in the all_topic_listing_header
   option and in all nine term descriptions - has a 105-character first
   sentence and a hard <br /> after it. At the original 74ch that sentence
   wrapped as well, at "Fill out the / contact form.", so the block came
   out as three ragged lines and read as broken. 820px was the fix, and it
   still works - but so does any measure wide enough for that sentence,
   and 1060px is wider still.

   What retired the cap was the speaker archives, where the intros run to
   ~180 words: a measure narrower than the cards below it made every line
   break against an invisible edge, exactly where the removed sidebar used
   to start. That reads as a bug on any page, so both archives now run the
   full column. The trade is that the longest term descriptions (Phoenix's
   Climate term runs 93 words) now set at ~125 characters a line. */
.topic-archive-intro {
	font-size: 15px;
	line-height: 24px;
	color: #4b5768;
	margin-bottom: 26px;
	text-wrap: pretty;
}

.topic-archive-intro p {
	margin: 0 0 10px;
}

.topic-archive-intro p:last-child {
	margin-bottom: 0;
}

.topic-archive-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The card itself is .topic-row, shared with the homepage - see the
   FEATURED TOPICS block above. Only the differences are restated here,
   scoped to this page so the homepage keeps its own sizes. */

.topic-archive .topic-row {
	border-color: #ddd;
}

/* 150px, matching the headshot on the speaker's own profile page and on
   the single topic page, rather than the homepage grid's 88px. On the
   category archives it also fills the space the category pill leaves. */
.topic-archive .topic-row-speaker img {
	width: 150px;
	height: 150px;
	object-fit: cover;
}

/* Three lines here, two on the homepage. */
.topic-archive .topic-row-excerpt {
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

/* What a 2-line title needs. Without it a card whose title fits on one
   line is 192px and one that wraps to two is 208px, and since 31-46% of
   titles run to two lines that 16px stagger repeats the whole way down a
   30-row page. On /topics/ the category pill already pushes the headshot
   column past this, so the floor changes nothing there. */
.topic-archive .topic-row-body {
	min-height: 166px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Titles are NOT clamped to two lines. The title is both the link text
   and the main thing on the card, so truncating it costs the anchor and
   the reader; it wraps instead and the row grows by one line. Four of
   the network's 882 topics reach three lines and none reaches four, so
   the clamp below is a backstop that fires on nothing that exists - it
   is there so one pasted essay can never produce a 400px row. */
.topic-archive .topic-row-body h3 {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.topic-archive .topic-row-body h3 a {
	color: #000;
	text-decoration: none;
	transition: color 0.3s ease 0s;
}

.topic-archive .topic-row-body h3 a:hover {
	color: #198dc4;
	text-decoration: underline;
}

.topic-archive .topic-row-byline a {
	text-decoration: none;
}

.topic-archive .topic-row-byline a:hover {
	text-decoration: underline;
}

/*////////  load more + pagination  //////////*/

/* The control block under the cards: a "Load more" button, a count, and
   the numbered links. The button is a real next-page link that JS
   intercepts (see assets/js/topic-load-more.js and
   includes/pagination.php), so all three of these work with JS off. */
.topic-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-top: 34px;
}

/* The one orange thing here. It is the primary action on a page whose
   other orange buttons all belong to individual cards, so it sits at
   the same weight as those rather than shouting over them. */
.topic-more-btn {
	display: inline-block;
	background-color: #ff8000;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	padding: 13px 34px;
	border-radius: 999px;
	border: 2px solid #ff8000;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.5s ease 0s;
}

.topic-more-btn:hover {
	background-color: #198dc4;
	border-color: #198dc4;
	color: #fff;
	text-decoration: none;
}

/* Mid-fetch. Deliberately not a spinner - the wait is one request and
   the label already changes to "Loading…". */
.topic-more-btn.is-loading {
	background-color: #c9cdd1;
	border-color: #c9cdd1;
	cursor: default;
}

/* This is what infinite scroll takes away and a button gives back: some
   idea of how much is left. role="status" on the element, so the new
   total is announced when it changes. */
.topic-more-count {
	margin: 0;
	font-size: 13px;
	color: #6b7a86;
	font-variant-numeric: tabular-nums;
}

/* No top margin: .topic-more is a flex column and its gap does the
   spacing. A margin here would be added to that, not absorbed by it. */
.topic-archive .tsr-paging {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 4px 0 0;
	border: none;
	padding: 0;
}

.topic-archive .tsr-paging span {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
}

.topic-archive .tsr-paging .page-numbers {
	min-width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 11px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	color: #198dc4;
	background-color: #fff;
	border: 1px solid #ddd;
	text-decoration: none;
	transition: all 0.3s ease 0s;
}

.topic-archive .tsr-paging a.page-numbers:hover {
	background-color: #198dc4;
	border-color: #198dc4;
	color: #fff;
}

.topic-archive .tsr-paging .page-numbers.current {
	background-color: #0A3247;
	border-color: #0A3247;
	color: #fff;
}

.topic-archive .tsr-paging .page-numbers.dots {
	border-color: transparent;
	background-color: transparent;
	font-weight: 400;
	color: #98a2b3;
}

/*////////  category pills  //////////*/

/* What replaces the sidebar. Centered, because it is a band across the
   foot of the page rather than a column of links.

   Its own full-width section on white, sitting between the tinted
   archive above and the footer nav below, rather than a block inside
   the tinted column. The rule that used to mark its top edge is gone
   with it: the tint ending IS the edge now, and a line drawn across a
   colour change reads as a mistake rather than a divider. */
.topic-cats {
	background-color: #fff;
	padding: 34px 0 42px;
	text-align: center;
	clear: both;
	overflow: hidden;
	/* Same floor as #content-wrapper and .topic-archive, so the white
	   band can never be narrower than the fixed-width column in it. */
	min-width: 1160px;
}

.topic-cats .wrap {
	width: 1060px;
	margin: 0 auto;
}

.topic-cats h2 {
	font-size: 19px;
	font-weight: 700;
	color: #0A3247;
	margin: 0 0 18px;
}

.topic-pillrow {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

/* Two lines inside one anchor - the category on top, "Presentations"
   under it - so the link text is "Business Presentations" rather than
   "Business". min-width keeps the row even rather than sizing each pill
   to a category name that runs from "Climate" to "Self-Improvement". */
.topic-pill {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	min-width: 132px;
	padding: 10px 16px;
	line-height: 1.25;
	color: #198dc4;
	background-color: #fff;
	border: 1px solid #cfe0ea;
	border-radius: 14px;
	text-decoration: none;
	transition: all 0.3s ease 0s;
}

.topic-pill b {
	font-size: 14.5px;
	font-weight: 700;
}

.topic-pill i {
	font-style: normal;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #7ba9c4;
	transition: color 0.3s ease 0s;
}

a.topic-pill:hover {
	background-color: #198dc4;
	border-color: #198dc4;
	color: #fff;
	text-decoration: none;
}

a.topic-pill:hover i {
	color: #d6ebf7;
}

/* The category being viewed. A flat chip, not a link - a link back to
   the page you are already on only dilutes the other nine. */
.topic-pill--here {
	background-color: #0A3247;
	border-color: #0A3247;
	color: #fff;
	cursor: default;
}

.topic-pill--here i {
	color: #8fb3c7;
}

/* Only rendered on the category archives, where it is the one
   destination the nine category pills cannot cover. */
.topic-pill--all {
	border-color: #ff8000;
	color: #b35900;
}

.topic-pill--all i {
	color: #d99456;
}

a.topic-pill--all:hover {
	background-color: #ff8000;
	border-color: #ff8000;
	color: #fff;
}

a.topic-pill--all:hover i {
	color: #ffe6cc;
}


/*////////  topic page breadcrumb  //////////*/

/* Sits at the right-hand end of the Filed-under band rather than above
   the headline. This page has two more prominent ways up to the speaker
   already - the tile at eye level on the right, and "More Free Talks by
   {speaker}" below - so the trail is not doing navigation work here. It
   is here to make visible what the BreadcrumbList schema claims, and
   this band is where the page already talks about its own filing.

   margin-left: auto rather than relying on the band's space-between: a
   topic with no category renders this as the band's only child, and it
   should still sit at the right-hand end. */
.fsc-topic-crumbs {
	margin-left: auto;
	font-size: 12.5px;
	line-height: 1.5;
	color: #6b7a86;
	text-align: right;
}

.fsc-topic-crumbs a {
	color: #198dc4;
	text-decoration: none;
	transition: color 0.3s ease 0s;
}

.fsc-topic-crumbs a:hover {
	color: #135f87;
	text-decoration: underline;
}

.fsc-crumb-sep {
	margin: 0 7px;
	color: #a8b6c0;
}

.fsc-crumb-current {
	color: #6b7a86;
}

/* The band is one row at every real combination of speaker name, title
   and category name, but a long enough pairing should stack rather than
   overflow. */
.fsc-topic-filed {
	flex-wrap: wrap;
}


/*////////////////////////////////////////*/
/*////////////  SPEAKER ARCHIVES  ///////////*/
/*////////////////////////////////////////*/

/* /speaker-list/ and the speaker-category pages, rebuilt 2026-08-22 on the
   same footing as the topic archives above.

   These pages deliberately do NOT use #content-feature - that ID carries
   the float, the 780px width and the dividing border that make room for a
   sidebar. They run full width instead, the same departure the topic
   archives and single-fsc-topic.php already make. */

/* Laid out like a homepage section rather than like page content: the
   section spans the viewport and carries the tint, and a centered .wrap
   inside it holds the 1060px column. Same cool ground as .topic-archive,
   because these are the same kind of page. */
.speaker-archive {
	clear: both;
	overflow: hidden;
	background-color: #eef3f6;
	padding: 30px 0 46px;
	/* Matches #content-wrapper, so the tint can never be narrower than the
	   fixed-width column inside it on this deliberately non-responsive
	   site. */
	min-width: 1160px;
}

.speaker-archive .wrap {
	width: 1060px;
	margin: 0 auto;
}

.speaker-archive h1 {
	margin-bottom: 14px;
}

/* Full 1060px, deliberately NOT the 820px measure .topic-archive-intro
   uses. That cap is invisible on the topic archives because the intro
   there is 33 words, but these intros run to ~180 - Chicago's is three
   paragraphs plus a numbered list - and at 820px inside a 1060px column
   every one of those lines broke against an invisible edge, which reads
   exactly like the sidebar that used to sit there. */
.speaker-archive-intro {
	font-size: 15px;
	line-height: 24px;
	color: #4b5768;
	margin-bottom: 26px;
	text-wrap: pretty;
}

.speaker-archive-intro p {
	margin: 0 0 10px;
}

.speaker-archive-intro p:last-child {
	margin-bottom: 0;
}

.speaker-archive-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The card. Same shell as .topic-row - white on #ddd, 12px radius, 20px
   22px - with the speaker as the subject instead of the talk.

   align-items: flex-start rather than center, because the body grows with
   the number of topics and a centered short body would float in the
   middle of a tall row. */
.speaker-row {
	display: flex;
	align-items: flex-start;
	gap: 22px;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 12px;
	padding: 20px 22px;
	margin-bottom: 12px;
}

.speaker-row:last-child {
	margin-bottom: 0;
}

/* Fixed 180px rather than the 150px the topic rows use for their headshot
   column: the "View Speaker Profile" button sets the floor here, and at
   150px its label wraps to two lines. The headshot stays 150px and centers
   in it. */
.speaker-row-rail {
	width: 180px;
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

/* 150px, matching the headshot on the speaker's own profile page, on the
   single topic page and on the topic archives. */
.speaker-row-rail img {
	display: block;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	object-fit: cover;
}

/* Same tinted pill as .topic-row-category and .featured-speaker-category -
   these are the same thing (a category, linked to its archive) and should
   not read as three different components. Reads "{Category} Speaker", so
   the anchor text matches the destination's own h1. */
.speaker-row-category {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #198dc4;
	background-color: #e8f1f7;
	border-radius: 12px;
	padding: 4px 12px;
	text-align: center;
	line-height: 1.3;
	text-decoration: none;
}

a.speaker-row-category:hover {
	background-color: #198dc4;
	color: #fff;
	text-decoration: none;
	transition: all 0.5s ease 0s;
}

/* Full rail width so the button reads as the base of the column rather
   than a tag floating under it. Blue, not the cards' orange: orange on
   this site means "request this speech", and this does not do that. Same
   fill and hover as .featured-speaker-cta. */
.speaker-row-cta {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	background-color: #198dc4;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	padding: 9px 10px;
	border-radius: 999px;
	text-decoration: none;
}

.speaker-row-cta:hover {
	background-color: #135f87;
	color: #fff;
	text-decoration: none;
	transition: all 0.5s ease 0s;
}

/* min-height matches the rail - 150 headshot + 10 + ~25 pill + 10 + ~34
   button - so a speaker with one topic and a short bio makes the same
   height row as one with two topics and a long one. Without it the rows
   stagger the whole way down the page, the same problem
   .topic-archive .topic-row-body solves with its own floor. */
.speaker-row-body {
	flex: 1;
	/* Without this, a long unbroken name can push the flex item wider than
	   its share and squeeze the rail. */
	min-width: 0;
	min-height: 229px;
}

.speaker-row-body h2 {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 3px;
}

.speaker-row-body h2 a {
	color: #000;
	text-decoration: none;
	transition: color 0.3s ease 0s;
}

.speaker-row-body h2 a:hover {
	color: #198dc4;
	text-decoration: underline;
}

/* Not a heading. It was an h3 on the old card, with the category as an h4
   under it - three headings per speaker, of which only the name is one. */
.speaker-row-role {
	font-size: 13px;
	color: #666;
	margin: 0 0 8px;
}

/* Clamped to three lines here, where the trim in
   fs_get_speaker_description() is only an upper bound on the markup. The
   trade-off, accepted deliberately, is that the cut can land mid-sentence
   - the same call made on .topic-row-excerpt. Still a large improvement on
   the 255-raw-byte substr this replaced, which cut mid-word. */
.speaker-row-bio {
	font-size: 13.5px;
	line-height: 1.5;
	color: #4b5768;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* The topics block, full width under the bio. A hairline rather than a
   rule: it separates the speaker from their catalogue without announcing
   itself as a section break. */
.speaker-row-topics {
	margin-top: 13px;
	padding-top: 12px;
	border-top: 1px solid #e8eef2;
}

.speaker-row-topics h3 {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #7ba9c4;
	margin: 0 0 8px;
}

.speaker-row-topics ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.speaker-row-topics li {
	margin: 0 0 5px;
}

.speaker-row-topics li:last-child {
	margin-bottom: 0;
}

/* Scoped to "li a", not to every anchor in the block. The "see all"
   link below is a sibling of the <ul>, and an unscoped ".speaker-row-topics a"
   (specificity 0-1-1) outranks its own ".speaker-row-more" class (0-1-0)
   - so it inherited this size, this colour and this chevron, and read as
   a third presentation rather than a way out of the list.

   inline-block, not block: block would stretch the link across the full
   width of the row, leaving the empty space after a short title
   clickable. */
.speaker-row-topics li a {
	display: inline-block;
	position: relative;
	font-size: 14.5px;
	line-height: 1.35;
	color: #198dc4;
	padding-left: 15px;
	text-decoration: none;
}

.speaker-row-topics li a:before {
	content: "\203A";
	position: absolute;
	left: 0;
	top: -1px;
	font-size: 15px;
	color: #a9c6d6;
}

.speaker-row-topics li a:hover {
	color: #135f87;
	text-decoration: underline;
}

/* Smaller and grey, so the real presentation links above keep the
   emphasis - this is a way out, not another presentation. No chevron
   either, for the same reason.

   margin-top carries the whole gap: li:last-child above has its bottom
   margin zeroed, so without this the link sits tighter to the last title
   than the titles sit to each other. */
.speaker-row-more {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 500;
	color: #6b7a86;
	padding-left: 15px;
	margin-top: 10px;
	text-decoration: none;
}

.speaker-row-more:hover {
	color: #198dc4;
	text-decoration: underline;
}

/* The load-more control block reuses .topic-more-btn and .topic-more-count
   outright - it is the same control doing the same job, and a second set
   of identical rules would just be two places to change the orange. Only
   the wrapper and the pager need scoping. */
.speaker-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-top: 34px;
}

/* No top margin: .speaker-more is a flex column and its gap does the
   spacing. A margin here would be added to that, not absorbed by it. */
.speaker-archive .tsr-paging {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 4px 0 0;
	border: none;
	padding: 0;
}

.speaker-archive .tsr-paging span {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
}

.speaker-archive .tsr-paging .page-numbers {
	min-width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 11px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	color: #198dc4;
	background-color: #fff;
	border: 1px solid #ddd;
	text-decoration: none;
	transition: all 0.3s ease 0s;
}

.speaker-archive .tsr-paging a.page-numbers:hover {
	background-color: #198dc4;
	border-color: #198dc4;
	color: #fff;
}

.speaker-archive .tsr-paging .page-numbers.current {
	background-color: #0A3247;
	border-color: #0A3247;
	color: #fff;
}

.speaker-archive .tsr-paging .page-numbers.dots {
	border-color: transparent;
	background-color: transparent;
	font-weight: 400;
	color: #98a2b3;
}

/*////////  speaker category pills  //////////*/

/* What replaces the sidebar. Its own full-width section on white between
   the tinted archive and the footer nav - see .topic-cats, which this
   mirrors. No rule along its top edge: the tint ending IS the edge, and a
   line drawn across a colour change reads as a mistake rather than a
   divider. */
.speaker-cats {
	background-color: #fff;
	padding: 34px 0 42px;
	text-align: center;
	clear: both;
	overflow: hidden;
	min-width: 1160px;
}

.speaker-cats .wrap {
	width: 1060px;
	margin: 0 auto;
}

.speaker-cats h2 {
	font-size: 19px;
	font-weight: 700;
	color: #0A3247;
	margin: 0 0 18px;
}

.speaker-pillrow {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

/* Two lines inside one anchor - the category on top, "Speakers" under it -
   so the link text Google reads is "Business Speakers" rather than
   "Business". That phrase is deliberately identical in three places: here,
   on every card's pill, and in the sitemap's anchor for the same URL. */
.speaker-pill {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	min-width: 132px;
	padding: 10px 16px;
	line-height: 1.25;
	color: #198dc4;
	background-color: #fff;
	border: 1px solid #cfe0ea;
	border-radius: 14px;
	text-decoration: none;
	transition: all 0.3s ease 0s;
}

.speaker-pill b {
	font-size: 14.5px;
	font-weight: 700;
}

.speaker-pill i {
	font-style: normal;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #7ba9c4;
	transition: color 0.3s ease 0s;
}

a.speaker-pill:hover {
	background-color: #198dc4;
	border-color: #198dc4;
	color: #fff;
	text-decoration: none;
}

a.speaker-pill:hover i {
	color: #d6ebf7;
}

/* The category being viewed. A flat chip, not a link - a link back to the
   page you are already on only dilutes the others. */
.speaker-pill--here {
	background-color: #0A3247;
	border-color: #0A3247;
	color: #fff;
	cursor: default;
}

.speaker-pill--here i {
	color: #8fb3c7;
}

/* Only rendered on the category archives, where it is the one destination
   the category pills cannot cover. Orange rather than blue, matching
   .topic-pill--all exactly - it is the same "back to everything" pill
   doing the same job one taxonomy over, and it was a dashed blue border
   here, which made two pills that should be twins look unrelated. */
.speaker-pill--all {
	border-color: #ff8000;
	color: #b35900;
}

.speaker-pill--all i {
	color: #d99456;
}

a.speaker-pill--all:hover {
	background-color: #ff8000;
	border-color: #ff8000;
	color: #fff;
}

a.speaker-pill--all:hover i {
	color: #ffe6cc;
}


/*////////////////////////////////////////*/
/*////////////  ARCHIVE INTRO BAND  ///////////*/
/*////////////////////////////////////////*/

/* The white band at the top of all four archive templates
   (template-parts/archive-intro.php), added 2026-08-23.

   What it replaced was a heading, a 160-word paragraph and a hand-typed
   numbered list sitting loose on the tinted ground with no container and
   everything at one weight. Giving the page a white opening band does two
   things at once: the h1 gets somewhere to live, and the tint below stops
   being "the page" and becomes "the list", which is what it is.

   The grid and the card are the homepage's, not new ones - see
   .intro-grid and .steps-card in the HOME sections above. Only the band
   around them and the figures under the copy are defined here. */
.archive-intro {
	background-color: #fff;
	padding: 34px 0 30px;
	clear: both;
	overflow: hidden;
	/* Same floor as #content-wrapper and the tinted bands below, so the
	   white can never be narrower than the fixed-width column in it. */
	min-width: 1160px;
}

.archive-intro .wrap {
	width: 1060px;
	margin: 0 auto;
}

/* The archive h1 is longer than the homepage's ("Free Speaker Topics from
   the Dallas-Fort Worth Speakers Bureau" is 52 characters), so it sets a
   size down from .intro-copy h1's 34px to keep it on two lines at 545px. */
.archive-intro .intro-copy h1 {
	font-size: 30px;
	font-weight: 300;
	line-height: 1.2;
	margin: 0 0 14px;
}

.archive-intro .intro-copy p {
	font-size: 15px;
	line-height: 24px;
	color: #4b5768;
	margin: 0 0 14px;
}

.archive-intro .intro-copy p:last-child {
	margin-bottom: 0;
}

/* The figures. Counted live in fs_get_archive_stats() rather than typed,
   so they are the one part of this band that differs per bureau without
   anyone writing seven versions of a sentence.

   flex-wrap, because a category page's first label runs to "Self-
   Improvement speakers" and four stats will not always fit one row. */
.archive-proof {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 30px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid #e8eef2;
}

.archive-proof div {
	line-height: 1.25;
}

/* Navy rather than the link blue: these are facts, not somewhere to go,
   and at 22px the blue read as a row of buttons. */
.archive-proof b {
	display: block;
	font-size: 22px;
	font-weight: 700;
	color: #0A3247;
	font-variant-numeric: tabular-nums;
}

.archive-proof i {
	font-style: normal;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #7ba9c4;
}

/* The tinted bands now open directly onto cards, with the heading and
   intro lifted out into the white band above, so they no longer need the
   run-up they had when they carried the h1. */
.speaker-archive,
.topic-archive {
	padding-top: 26px;
}


/*////////////////////////////////////////*/
/*////////////  SPEAKER PROFILE  ///////////*/
/*////////////////////////////////////////*/

/* The rebuilt author.php, 2026-08-25. Four full-width bands rather than a
   780px column plus a 210px sidebar, so none of this uses #content or
   #content-feature - the same structure the archives and the topic page
   already use.

   The old #speaker-intro / #speaker-bio / #speaker-social rules further
   up this file went with the markup they styled. One other template still
   prints those IDs, page_speaker_detail.php, so it would now render
   unstyled - but it is assigned to ZERO pages on all seven bureaus,
   checked before removing them. It is dead weight left from before the
   author archive became the profile, and worth deleting outright the next
   time anyone is in here. */

.fsc-speaker-mast,
.fsc-speaker-about,
.fsc-speaker-topics,
.fsc-speaker-close {
	clear: both;
	overflow: hidden;
	/* Matches #content-wrapper, so a band can never be narrower than the
	   fixed-width column inside it on this deliberately non-responsive
	   site. */
	min-width: 1160px;
}

.fsc-speaker-mast .wrap,
.fsc-speaker-about .wrap,
.fsc-speaker-topics .wrap,
.fsc-speaker-close .wrap {
	width: 1060px;
	margin: 0 auto;
}

.fsc-speaker-mast   { background-color: #fff;     padding: 30px 0 28px; }
.fsc-speaker-about  { background-color: #f6f4f1;  padding: 28px 0 30px; }
.fsc-speaker-topics { background-color: #eef3f6;  padding: 28px 0 38px; }
.fsc-speaker-close  { background-color: #fff;     padding: 28px 0 34px; }

/* The landing point for the count in the masthead.

   The offset is not decoration: the theme clones the header on scroll and
   fixes it to the top (header.sticky_header.stick), and any anchor jump
   fires a scroll event, so the sticky version is always up by the time
   the jump lands. #logo-header is a fixed 150px and #nav-wrapper adds
   about 44px, so without this the "Free Presentations by" heading arrives
   underneath it. Erring generous: landing a little low costs a strip of
   tint, landing high hides the heading the jump was aimed at. */
.fsc-speaker-topics[id] {
	scroll-margin-top: 205px;
}

/* ---------- masthead ---------- */

/* align-items: stretch, not flex-start, so both columns are the same
   height. That is what lets the website button in the rail and the social
   row in the body both sit on the bottom edge and share a baseline,
   whichever of the two columns happens to be the taller one. */
.fsc-mast-grid {
	display: flex;
	gap: 32px;
	align-items: stretch;
}

.fsc-mast-rail {
	width: 200px;
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 11px;
}

/* 200px, matching LinkedIn, and also the ceiling: 20 of Phoenix's 74
   speakers have a source image 200px or smaller, so a larger display size
   would start softening real photographs. The files are square and the
   circle is this radius, so nothing is cropped in the media library. */
img.fsc-mast-photo {
	display: block;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	object-fit: cover;
}

/* The same tinted pill as .topic-row-category, .speaker-row-category and
   .featured-speaker-category. These are one thing - a category, linked to
   its archive - and should not read as four different components. */
.fsc-mast-pill {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #198dc4;
	background-color: #e8f1f7;
	border-radius: 12px;
	padding: 4px 12px;
	text-align: center;
	line-height: 1.3;
	text-decoration: none;
}

#content-wrapper a.fsc-mast-pill:hover {
	background-color: #198dc4;
	color: #fff;
	text-decoration: none;
	transition: all 0.5s ease 0s;
}

/* margin-top: auto pins the website button to the bottom of the rail. Its
   opposite number is .fsc-mast-social doing the same in the body. */
.fsc-mast-links {
	display: flex;
	flex-direction: column;
	gap: 7px;
	width: 100%;
	margin-top: auto;
}

.fsc-mast-body {
	flex: 1;
	/* Without this a long unbroken name can push the flex item wider than
	   its share and squeeze the rail. */
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/* The site's h1 orange, the same as every other h1 on the site, at the
   32px the topic page title uses rather than the global 25px. */
.fsc-mast-name {
	font-size: 32px;
	line-height: 38px;
	font-weight: 600;
	color: #f60;
	margin: 0 0 4px;
}

/* Not a heading. This was an h3 with the keyword line as a second h3
   under it, which made three headings out of what is one identity. */
.fsc-mast-byline {
	font-size: 17px;
	font-weight: 600;
	color: #0A3247;
	margin: 0 0 4px;
}

/* An h2 that must not look like one. It carries the page's keywords so it
   earns a heading, but visually it is the third line of an identity block
   under a 32px name - so weight and size are restated against the browser
   defaults an h2 would otherwise bring. */
.fsc-mast-kicker {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: #4b5768;
	margin: 0;
}

.fsc-mast-kicker b {
	color: #0A3247;
	font-weight: 600;
}

/* Tight under the kicker on purpose. The trail is not this page's way of
   navigating - the category is a button in the rail - so it should read
   as a footnote to the identity above it rather than as its own row. */
.fsc-speaker-crumbs {
	font-size: 12px;
	line-height: 1.5;
	color: #7d8d99;
	padding: 4px 0 0;
}

.fsc-speaker-crumbs a {
	color: #7d8d99;
}

.fsc-speaker-crumbs a:hover {
	color: #198dc4;
	text-decoration: underline;
}

/* The counted figures. Same object as .archive-proof on the archive intro
   band, so a visitor arriving from a speaker list meets it twice.

   align-items: flex-end because the third figure is a phrase set smaller
   than the two numbers; without it the three labels underneath would sit
   at three different heights. */
.fsc-mast-facts {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px 34px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid #e8eef2;
}

.fsc-mast-facts > div {
	line-height: 1.25;
}

/* Navy rather than the link blue: these are facts, not somewhere to go. */
.fsc-mast-facts b {
	display: block;
	font-size: 22px;
	font-weight: 700;
	color: #0A3247;
	font-variant-numeric: tabular-nums;
}

.fsc-mast-facts i {
	font-style: normal;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #7ba9c4;
}

/* The one figure on the row that is a link.

   NOTHING MARKS IT AT REST, deliberately. It carried a small caret for
   exactly one deploy and that came straight back out: at the size it
   needed to be it read as a stray bullet rather than as an affordance,
   which is worse than no signal at all.

   No signal is the right answer here anyway, and Andy called it -
   scrolling is the primary route to the talks and this only saves a
   gesture, so it is a convenience for whoever finds it rather than
   something the page owes every visitor. It rewards a hover and costs a
   reader nothing.

   The whole block is the target rather than just the number - a
   one-character digit is a poor thing to ask anyone to hit. */
.fsc-mast-jump {
	display: block;
	color: inherit;
	text-decoration: none;
}

#content-wrapper a.fsc-mast-jump:hover b {
	color: #198dc4;
	transition: color 0.3s ease 0s;
}

#content-wrapper a.fsc-mast-jump:hover i {
	color: #198dc4;
	text-decoration: underline;
}

#content-wrapper a.fsc-mast-jump:focus-visible {
	outline: 2px solid #198dc4;
	outline-offset: 4px;
	border-radius: 3px;
}

/* The availability figures carry no size override of their own. They used
   to: while in-person and virtual were one value joined by a separator,
   that value was a phrase where its neighbours were numbers, and it had
   to drop to 18px so "In-Person Los Angeles & Orange County . Virtual
   Nationwide" would not push the row onto a second line. Split into two
   figures the values are just "LA & OC" and "Nationwide", short enough to
   sit at the same 22px as the rest - so the row is four figures at one
   size rather than three plus an exception. The separator went with it. */

/* The social row, pinned to the bottom of the body so it lines up with
   the website button at the bottom of the rail. padding-top is the floor:
   when the body is the taller column the auto margin resolves to zero and
   this is what keeps the row off the figures above it. */
.fsc-mast-social {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
	padding-top: 18px;
}

/* One button for both places. The rail's is full width because it is the
   base of that column; the row's sizes to its label. */
.fsc-mast-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 600;
	color: #198dc4;
	background-color: #fff;
	border: 1px solid #d5e2ea;
	border-radius: 999px;
	padding: 7px 15px;
	text-decoration: none;
}

/* The full selector, not the bare class: `#content a` and the global
   `a { color: #258fbf }` both outrank a single class, which is the same
   trap #content a.fsc-topic-btn:hover further up this file exists to work
   around. Written this way the button keeps its own colours. */
#content-wrapper a.fsc-mast-link:hover {
	background-color: #198dc4;
	border-color: #198dc4;
	color: #fff;
	text-decoration: none;
	transition: all 0.5s ease 0s;
}

.fsc-link-icon {
	width: 13px;
	height: 13px;
	flex: none;
	display: block;
	fill: currentColor;
}

/* ---------- about ---------- */

.fsc-speaker-h2 {
	font-size: 22px;
	font-weight: 700;
	color: #0A3247;
	margin: 0 0 3px;
}

.fsc-speaker-sub {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #7ba9c4;
	margin: 0 0 16px;
}

.fsc-about-grid {
	display: flex;
	gap: 36px;
	align-items: flex-start;
	margin-top: 14px;
}

/* No measure cap. An 820px cap on the archive intros read exactly like
   the sidebar that used to sit there, and the same is true here: on this
   site body copy runs its column. With a video beside it the bio gets
   ~720px anyway; without one it takes the full width. */
.fsc-about-bio {
	flex: 1;
	min-width: 0;
	font-size: 15px;
	line-height: 25px;
	color: #3c4854;
}

.fsc-about-bio p {
	margin: 0 0 13px;
}

.fsc-about-bio p:last-child {
	margin-bottom: 0;
}

.fsc-about-video {
	width: 300px;
	flex: none;
}

/* A button, not a link: pressing it swaps in the player rather than
   navigating. Sized 16:9 at 300px, where the old iframe was 210x135
   because that was what fitted the sidebar. */
.fsc-video {
	position: relative;
	display: block;
	width: 300px;
	height: 169px;
	padding: 0;
	border: 1px solid #d5dde3;
	border-radius: 10px;
	overflow: hidden;
	background-color: #0A3247;
	cursor: pointer;
}

.fsc-video img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fsc-video-play {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba( 10, 50, 71, 0.25 );
}

/* The play mark, drawn rather than an image: a rounded red rectangle with
   a white triangle made from borders. */
.fsc-video-play:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 54px;
	height: 38px;
	margin: -19px 0 0 -27px;
	border-radius: 9px;
	background-color: rgba( 214, 32, 32, 0.9 );
}

.fsc-video-play:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -9px 0 0 -6px;
	border-left: 14px solid #fff;
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
}

.fsc-video:hover .fsc-video-play:before {
	background-color: #d62020;
	transition: all 0.5s ease 0s;
}

.fsc-video:focus-visible {
	outline: 2px solid #198dc4;
	outline-offset: 3px;
}

/* The iframe that replaces the thumbnail, same box so nothing shifts. */
.fsc-video-frame {
	display: block;
	width: 300px;
	height: 169px;
	border: 1px solid #d5dde3;
	border-radius: 10px;
	overflow: hidden;
}


/* ---------- topics ---------- */

.fsc-speaker-steps {
	font-size: 13.5px;
	line-height: 22px;
	color: #4b5768;
	margin: -8px 0 18px;
}

.fsc-profile-topic-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Same shell as .topic-row and .speaker-row - white on the tint, 12px
   radius - with the speaker taken out of it, since every card on this
   page is by the person named at the top. */
.fsc-profile-topic {
	background-color: #fff;
	border: 1px solid #e2e1dd;
	border-radius: 12px;
	padding: 22px 24px;
	margin-bottom: 12px;
}

.fsc-profile-topic:last-child {
	margin-bottom: 0;
}

/* Not a link. Nothing in this list goes anywhere: the profile is the page
   that ships everything, and the topic archives are where topic pages get
   linked from. */
.fsc-profile-topic h3 {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: #0A3247;
	margin: 0 0 9px;
}

.fsc-profile-topic-body {
	font-size: 15px;
	line-height: 24px;
	color: #3c4854;
}

.fsc-profile-topic-body p {
	margin: 0 0 12px;
}

.fsc-profile-topic-body p:last-child {
	margin-bottom: 0;
}

/* The fold. A <details>, so it works with no script, takes keyboard focus
   and announces itself - and, unlike the "MORE >" link it replaces, it
   cannot exist with nothing behind it. */
.fsc-profile-more {
	margin-top: 2px;
}

.fsc-profile-more > summary {
	list-style: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #198dc4;
	padding: 6px 0;
}

.fsc-profile-more > summary::-webkit-details-marker {
	display: none;
}

.fsc-profile-more > summary:after {
	content: "\25BC";
	font-size: 8px;
	position: relative;
	top: 1px;
}

.fsc-profile-more[open] > summary:after {
	content: "\25B2";
}

.fsc-profile-more > summary:hover {
	color: #0A3247;
}

.fsc-profile-more > summary:focus-visible {
	outline: 2px solid #198dc4;
	outline-offset: 3px;
	border-radius: 3px;
}

.fsc-profile-more-body {
	padding-top: 2px;
}

/* Under a hairline on its own row rather than centred at the right edge
   the way the archive card has it: with a full description the card is
   tall, and a button centred against 200 words floats in nothing. */
.fsc-profile-topic-foot {
	margin-top: 16px;
	padding-top: 15px;
	border-top: 1px solid #e8eef2;
}

/* The 15px label of the full-size pill in the tighter box of the --small
   one. Scoped here rather than added as a third modifier on the shared
   button: this is the profile's proportions, and the topic page's own
   buttons should not move because this page wanted a shorter pill.

   The full selector, not the bare class - `a.fsc-topic-btn` further up
   this file is element-plus-class, so a single class would lose to it. */
.fsc-profile-topic-foot a.fsc-topic-btn {
	padding: 10px 20px;
}

/* ---------- review and the closing note ---------- */

.fsc-speaker-quote {
	background-color: #f6f4f1;
	border: 1px solid #e2e1dd;
	border-radius: 12px;
	padding: 22px 26px;
	margin: 0;
}

.fsc-speaker-quote p {
	font-size: 15.5px;
	line-height: 26px;
	color: #3c4854;
	font-style: italic;
	margin: 0 0 12px;
}

.fsc-speaker-quote cite {
	display: block;
	font-style: normal;
	font-size: 13px;
	color: #0A3247;
}

.fsc-speaker-quote cite b {
	font-weight: 600;
}

.fsc-speaker-quote cite span {
	color: #4b5768;
	font-weight: 400;
}

/* Deliberately plain, no card and no fill, so it reads as site
   information rather than as part of the speaker. Same treatment as
   .fsc-topic-about on the topic page, whose text this is. */
.fsc-speaker-note {
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid #e2e1dd;
}

.fsc-speaker-note p {
	margin: 0;
	font-size: 14px;
	line-height: 21px;
	color: #4b5768;
	text-align: center;
	text-wrap: balance;
}

.fsc-speaker-note strong {
	color: #0A3247;
	font-weight: 700;
}

.fsc-speaker-note-link {
	font-weight: 600;
	color: #198dc4;
}

/* Same reason the button's hover had to be rescoped: the site-wide
   `#content a:hover` that turns a link black never reaches this page, so
   without this the two links in the closing note had no hover at all. */
#content-wrapper a.fsc-speaker-note-link:hover {
	color: #0A3247;
	text-decoration: underline;
}


/*////////////////////////////////////////*/
/*////////  REQUEST CONFIRMATION  ////////*/
/*////////////////////////////////////////*/

/* What a group sees after requesting a speaker. Full width in the band
   rhythm the homepage uses - tint, white, warm, white - rather than the
   two-column layout with a sidebar it had. The sidebar's only claim, that
   presentations are free, is carried by the bureau note at the foot.

   Each band takes the same min-width floor as #content-wrapper so a tint
   can never end up narrower than the fixed 1060px column inside it, the
   same reason .topic-archive and .speaker-cats carry it. */
.fsc-thanks,
.fsc-thanks-share,
.fsc-thanks-about {
	clear: both;
	overflow: hidden;
	min-width: 1160px;
}

.fsc-thanks {
	background-color: #eef3f6;
	padding: 44px 0 52px;
}

/* The third tone, matching .home-section--warm. White would have run the
   pills, the share ask and the bureau note together into one long stretch
   of nothing. */
.fsc-thanks-share {
	background-color: #f6f4f1;
	padding: 40px 0 46px;
	text-align: center;
}

.fsc-thanks-about {
	background-color: #fff;
	padding: 34px 0 40px;
}

.fsc-thanks-wrap {
	width: 1060px;
	margin: 0 auto;
}

/* Follows .speaker-row exactly - #fff on #ddd at 12px - so this page reads
   as a member of the same family as the archives. */
.fsc-thanks-card {
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 12px;
	padding: 44px 40px 46px;
	text-align: center;
}

.fsc-thanks-icon {
	width: 62px;
	height: 62px;
	margin: 0 auto 20px auto;
	background-color: #198dc4;
	border-radius: 50%;
	line-height: 62px;
	text-align: center;
}

.fsc-thanks-icon svg {
	width: 31px;
	height: 31px;
	vertical-align: middle;
}

/* No colour set: inherits the theme's orange h1 like every other page. */
.fsc-thanks-card h1 {
	margin-bottom: 14px;
}

/* Matches .topic-archive-intro, and deliberately uncapped. A measure
   narrower than the card it sits in makes every line break against an
   invisible edge, which is why the archives dropped their own cap. */
.fsc-thanks-copy {
	font-size: 15px;
	line-height: 24px;
	color: #4b5768;
	text-wrap: pretty;
}

.fsc-thanks-copy p { margin: 0 0 12px; }
.fsc-thanks-copy p:last-child { margin-bottom: 0; }

/* The closing line, held off the tips panel above it. */
.fsc-thanks-copy--close { margin-top: 24px; }

/* The two tips between the confirmation and the closing line.

   Same ground, border and radius as .fsc-topic-cta and .fsc-free-note, so
   this is the theme's existing note box rather than a fourth thing that
   looks nearly like them.

   text-align is reset to left because the card centres everything and a
   bulleted list cannot be centred: ragged left edges on the bullets give
   the eye nothing to run down. Capped at 720px inside the 1060px card,
   which is safe here in a way it was not for .fsc-thanks-copy - the panel
   draws its own edge, so lines break against something visible rather
   than against nothing. */
.fsc-thanks-tips {
	max-width: 720px;
	margin: 28px auto 0;
	background-color: #f6f4f1;
	border: 1px solid #e2e1dd;
	border-radius: 12px;
	padding: 22px 26px 24px;
	text-align: left;
}

.fsc-thanks-tips h2 {
	font-size: 17px;
	line-height: 24px;
	font-weight: 700;
	color: #0a3247;
	margin: 0 0 12px;
}

.fsc-thanks-tips ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Every declaration is scoped under .fsc-thanks-tips rather than left on a
   bare class, which is the rule this page's components learned the hard
   way: .fsc-thanks-copy p is 0-1-1 and silently outranks any 0-1-0
   modifier sitting inside it. */
.fsc-thanks-tips li {
	position: relative;
	padding-left: 22px;
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 24px;
	color: #4b5768;
	text-wrap: pretty;
}

.fsc-thanks-tips li:last-child { margin-bottom: 0; }

/* Drawn rather than a list-style marker, so the dot takes the theme's
   orange and sits on the first line's optical centre at any zoom. */
.fsc-thanks-tips li:before {
	content: "";
	position: absolute;
	left: 4px;
	top: 9px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: #ff8000;
}

.fsc-thanks-tips li b { color: #0a3247; }

.fsc-thanks-share h2 {
	font-size: 19px;
	font-weight: 700;
	color: #0A3247;
	margin: 0 0 8px;
}

.fsc-thanks-share p {
	font-size: 14px;
	color: #666;
	margin: 0 0 20px;
}

/* The share row keeps its own rules rather than borrowing the ones that
   used to sit inline in the success card, which have gone with it. */
.fsc-share-buttons {
	display: flex;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
}

.fsc-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	text-decoration: none;
	box-shadow: 0 2px 6px rgba(0,0,0,0.12);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fsc-share-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.18);
	text-decoration: none;
}

.fsc-share-btn svg {
	width: 20px;
	height: 20px;
	fill: #ffffff;
}

.fsc-share-facebook { background-color: #1877F2; }
.fsc-share-twitter  { background-color: #000000; }
.fsc-share-linkedin { background-color: #0A66C2; }
.fsc-share-email    { background-color: #218dc1; }

/* The bureau note already has its own rules from the topic pages; here it
   only needs the top rule dropped, since the band edge above it does that
   job now. */
.fsc-thanks-about .fsc-topic-about {
	border-top: 0;
	margin-top: 0;
	padding-top: 0;
}

/* The pill band sits between the tint and the warm band, so it supplies
   the white itself. */
.fsc-thanks + .topic-cats {
	background-color: #fff;
}

/* ---- the request form, in the same card as the confirmation ---- */

/* Left aligned, unlike the confirmation card: this one holds labelled
   fields, not a centred message. */
.fsc-thanks-card--form {
	text-align: left;
}

/* The card runs the full 1060px, but the form inside it does not. Inputs
   spanning 980px would be unreadable and would make a six field form look
   like a spreadsheet, so the fields sit in a normal reading measure and
   the card provides the width. */
.fsc-request-col {
	max-width: 640px;
	margin: 0 auto;
}

/* Every rule below is scoped to this card. form#request-speech-wm shares
   its selectors with form#contact-form throughout this stylesheet, and the
   contact page is not part of this redesign. */
.fsc-thanks-card--form form#request-speech-wm {
	font-size: 15px;
	color: #4b5768;
	margin-top: 22px;
}

.fsc-thanks-card--form form#request-speech-wm p.form {
	margin: 0 0 18px;
}

.fsc-thanks-card--form form#request-speech-wm label {
	font-size: 15px;
	font-weight: 700;
	color: #0a3247;
}

.fsc-thanks-card--form form#request-speech-wm small {
	display: block;
	font-size: 13px;
	color: #7d8f9b;
	margin: 2px 0 4px;
}

/* Overrides the 550px / 24px the shared rule sets: at 24px the answers
   were larger than the questions. */
.fsc-thanks-card--form form#request-speech-wm input[type="text"],
.fsc-thanks-card--form form#request-speech-wm textarea {
	width: 100%;
	max-width: 100%;
	font-size: 16px;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	margin: 6px 0 0;
	padding: 10px 12px;
	border: 1px solid #cfd9df;
	border-radius: 6px;
	background-color: #fff;
	box-shadow: none;
	box-sizing: border-box;
}

.fsc-thanks-card--form form#request-speech-wm input[type="text"]:focus,
.fsc-thanks-card--form form#request-speech-wm textarea:focus {
	border-color: #198dc4;
	outline: 0;
}

.fsc-thanks-card--form form#request-speech-wm textarea {
	min-height: 120px;
	line-height: 22px;
}

.fsc-thanks-card--form form#request-speech-wm #sub-but {
	margin: 26px 0 14px;
	text-align: center;
}

/* The same orange pill the rest of the site uses for a primary action,
   including the orange-to-blue hover from #header-tabs a:hover. */
.fsc-thanks-card--form form#request-speech-wm input[type="submit"] {
	display: inline-block;
	font-size: 16.5px;
	font-weight: 650;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	padding: 14px 40px;
	border-radius: 999px;
	border: 2px solid transparent;
	background-color: #ff8000;
	color: #fff;
	cursor: pointer;
	transition: all 0.3s ease 0s;
}

.fsc-thanks-card--form form#request-speech-wm input[type="submit"]:hover {
	background-color: #198dc4;
	border-color: #198dc4;
}

.fsc-thanks-card--form form#request-speech-wm > small:last-child {
	display: block;
	text-align: center;
	font-size: 13px;
	color: #7d8f9b;
}

/* Shown when someone reaches the form with no topic attached. */
.fsc-thanks-icon--grey { background-color: #8299a6; }

.fsc-request-back {
	margin: 26px 0 0;
	text-align: center;
}

.fsc-thanks-card a.fsc-request-btn {
	display: inline-block;
	font-size: 16px;
	font-weight: 650;
	padding: 13px 32px;
	border-radius: 999px;
	border: 2px solid transparent;
	background-color: #ff8000;
	color: #fff;
	text-decoration: none;
	transition: all 0.3s ease 0s;
}

.fsc-thanks-card a.fsc-request-btn:hover {
	background-color: #198dc4;
	border-color: #198dc4;
	color: #fff;
	text-decoration: none;
}

/* The heading and the two paragraphs that introduce the form, on white
   above the tinted band the form itself sits in. Left aligned and taking
   the theme's own h1 rather than the centred treatment they had inside the
   card, so this page opens the way every other page does. */
.fsc-request-intro {
	clear: both;
	overflow: hidden;
	background-color: #fff;
	padding: 30px 0 28px;
	min-width: 1160px;
}

/* Opens exactly like a topic page: the same .fsc-topic-title, the same
   720 + 300 column split, the same .fsc-topic-body measure. Reusing those
   classes rather than restating their values is what keeps the two pages
   matching when either is next adjusted. */
.fsc-request-intro .fsc-topic-cols {
	margin-top: 18px;
}

/* SQUARING THE TWO COLUMNS.

   Andy asked for the bottom of the cost note to line up with the bottom of
   the speaker card. Measured across real topics first, because the obvious
   culprit is innocent: the title sits ABOVE both columns, so a two line
   title pushes both down equally and cannot move the gap at all. What
   moves it is two things that vary independently:

     left column   230 to 415px, set by how long the speaker's description is
     speaker card  258 to 346px, set by how long the speaker's byline is

   About 70% of bylines wrap to two lines or more and the longest on the
   network is 170 characters, so the card is nothing like a fixed height.
   The gap ran from 45px above to 157px below. No trim closes that, because
   there is no fixed number to trim to.

   So neither column is given a height. The ROW is stretched, and whichever
   column is taller pulls the other one out to meet it:

     description long   the card grows, and centres its contents in the room
     description short  the note drops to the bottom on margin-top:auto

   Flush in both directions, on every topic, with nothing clamped and no
   copy cut. Verified flush on the four topics spanning the whole measured
   range on 2026-09-02.

   Scoped to .fsc-request-intro throughout. .fsc-topic-cols, .fsc-topic-main
   and .fsc-topic-card are all shared with the single topic page, which has
   no cost note in its left column and must keep its flex-start. */
.fsc-request-intro .fsc-topic-cols {
	align-items: stretch;
}

.fsc-request-intro .fsc-topic-main {
	display: flex;
	flex-direction: column;
}

/* The note is the only thing in this column that should move. Everything
   above it keeps its natural spacing and this takes up whatever is left. */
.fsc-request-intro .fsc-free-note {
	margin-top: auto;
}

/* The aside becomes the flex container so the card, as its item, stretches
   to the row height rather than sitting at its natural one. */
.fsc-request-intro .fsc-topic-aside {
	display: flex;
}

.fsc-request-intro .fsc-topic-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Names the section the way the page title names the page. Orange, and a
   step down from the 32px title above it so the two do not compete. */
.fsc-request-heading {
	font-size: 24px;
	line-height: 30px;
	font-weight: 600;
	color: #f60;
	margin: 0 0 18px;
}

/* The talk being requested, above the form. No rule down its left edge: it
   is the only thing in this column that would carry one, so it read as a
   pull quote rather than as context.

   The whole description lives here, the tail of it behind a fold, so
   nothing in this block links away from the form. That is why the anchor
   colours that used to sit here are gone rather than merely unused: there
   is no anchor left to colour. */
/* SPACING, AND WHY THE NUMBERS HERE ARE THE REAL GAPS.

   Two things were wrong once the row went to flex, both reported by Andy
   on 2026-09-02: too much air above the heading, and none at all below the
   description.

   Above: the intro paragraph above this carries a 15px bottom margin, and
   a flex container does not collapse margins the way the old block layout
   did, so that 15px stopped disappearing into this block's 22px and the
   visible gap silently grew from 22px to 37px. Rather than pick a number
   that only makes sense once you know about the 15px, the paragraph's
   trailing margin is zeroed just on this page and the value below is then
   the gap you actually see.

   Below: the cost note is pinned with margin-top:auto, and auto resolves
   to ZERO whenever this column is the taller one, which is most topics.
   So the minimum gap has to be a real margin on this element. The auto
   still adds any leftover space on top of it when the card is the taller
   one, so the note stays flush to the bottom either way. */
.fsc-request-intro .fsc-topic-body p:last-child {
	margin-bottom: 0;
}

.fsc-request-excerpt {
	margin: 24px 0 20px;
}

.fsc-request-excerpt h2 {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #7ba9c4;
	margin: 0 0 6px;
}

.fsc-request-excerpt p {
	font-size: 15px;
	line-height: 24px;
	color: #4b5768;
	margin: 0 0 12px;
}

.fsc-request-excerpt p:last-child {
	margin-bottom: 0;
}

/* THE FOLD, WITH ITS CUE ON THE END OF THE SENTENCE.

   The control used to sit on its own line, which cost the block a line it
   did not need and read as a heading for the text above it rather than as
   the continuation of it.

   Both the last lead paragraph and the <details> go display:inline, so the
   cue flows onto the end of the final line, and the folded body still
   renders as a full width block underneath because it is a block box
   inside that inline. Still a <details>: no script, keyboard operable,
   announced as a disclosure. The alternative, wrapping the paragraph in
   the <summary>, renders identically and is worse twice over: the whole
   paragraph becomes the click target, and the button's accessible name
   becomes the entire paragraph.

   .fsc-request-lead-tail is printed by the template only when a fold
   actually follows, so a description with nothing folded keeps a normal
   block paragraph. */
.fsc-request-excerpt p.fsc-request-lead-tail {
	display: inline;
}

.fsc-request-more {
	display: inline;
}

.fsc-request-more > summary {
	display: inline;
	list-style: none;
	cursor: pointer;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #198dc4;
	white-space: nowrap;
}

.fsc-request-more > summary::-webkit-details-marker {
	display: none;
}

.fsc-request-more > summary:after {
	content: " \00BB";
	font-weight: 700;
}

.fsc-request-more[open] > summary:after {
	content: " \00AB";
}

/* The label swaps with the state, in CSS rather than script. display:none
   on the inactive half rather than visibility or a clip, because that is
   what also keeps it out of the button's accessible name - otherwise the
   control announces itself as "Read More Show Less". */
.fsc-request-more > summary .fsc-request-more-shut,
.fsc-request-more[open] > summary .fsc-request-more-open {
	display: none;
}

.fsc-request-more[open] > summary .fsc-request-more-shut {
	display: inline;
}

.fsc-request-more > summary:hover {
	color: #0A3247;
	text-decoration: underline;
}

.fsc-request-more > summary:focus-visible {
	outline: 2px solid #198dc4;
	outline-offset: 2px;
	border-radius: 3px;
}

/* An inline paragraph drops its bottom margin, so the gap above the folded
   text is restored here instead. */
.fsc-request-more-body {
	display: block;
	padding-top: 12px;
}

/* Same ground, border and radius as .fsc-topic-cta on the topic page, so
   the cost note looks like one component across both. Its own class rather
   than that one because .fsc-topic-cta is laid out around a button this
   page has no need for: you are already on the request page. */
.fsc-free-note {
	display: flex;
	align-items: center;
	gap: 14px;
	background-color: #f6f4f1;
	border: 1px solid #e2e1dd;
	border-radius: 12px;
	padding: 16px 20px;
	margin: 22px 0 0;
}

.fsc-free-note svg {
	width: 26px;
	height: 26px;
	flex: none;
}

.fsc-free-note p {
	margin: 0;
	font-size: 15px;
	line-height: 22px;
	color: #4b5768;
}

.fsc-free-note strong {
	color: #0a3247;
}

/* The notice on the form a failed robot check sends people back to. The
   note box above, tinted orange because this one asks for something, and
   top aligned because it runs to several lines. Declared after
   .fsc-free-note so these win at equal specificity. */
.fsc-request-notice {
	align-items: flex-start;
	background-color: #fff4e8;
	border-color: #ffd2a3;
	margin: 18px 0 0;
}

/* The redirect's #fsc-request-form lands here. Same allowance for the
   sticky header as .fsc-speaker-topics[id]. */
.fsc-request-heading[id] {
	scroll-margin-top: 205px;
}


/*////////////////////////////////////////*/
/*////////////  SITE SEARCH  ///////////*/
/*////////////////////////////////////////*/

/* The box in the blue nav bar and the results page (search.php), as
   designed in previews with Andy on 2026-09-16. The results reuse the
   archives' bands and cards outright; only what is new is defined here. */

.search-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Floated right and pulled up 5px top and bottom, so a 32px field sits in
   the bar without making the bar any taller. The button is the site's dark
   blue rather than orange, so it does not compete with the orange Become a
   Speaker tab directly above it (Andy's call). On hover it turns light blue
   with navy lettering, since white on light blue is hard to read. */
#nav .nav-search {
	float: right;
	display: flex;
	align-items: stretch;
	height: 32px;
	margin: -5px 0;
}

#nav .nav-search input[type="search"] {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 250px;
	height: 32px;
	margin: 0;
	padding: 0 12px;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: #0A3247;
	background-color: #fff;
	border: 0;
	border-radius: 5px 0 0 5px;
}

#nav .nav-search input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

#nav .nav-search input[type="search"]::placeholder {
	color: #6b7a86;
	opacity: 1;
}

#nav .nav-search input[type="search"]:focus {
	outline: 2px solid #0A3247;
	outline-offset: -2px;
}

#nav .nav-search button {
	box-sizing: border-box;
	height: 32px;
	margin: 0;
	padding: 0 16px;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	background-color: #0A3247;
	border: 0;
	border-radius: 0 5px 5px 0;
	cursor: pointer;
	transition: background-color 0.3s ease 0s, color 0.3s ease 0s;
}

#nav .nav-search button:hover {
	color: #0A3247;
	background-color: #bfe3f5;
}

#nav .nav-search button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* The results page's intro band: the archives' band with a search field
   where the copy goes. 16px under the h1; its 14px bottom margin collapses
   into this. */
.search-page-form {
	display: flex;
	gap: 10px;
	margin: 16px 0 0;
}

.search-page-form input[type="search"] {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	flex: 1;
	min-width: 0;
	height: 50px;
	margin: 0;
	padding: 0 22px;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-size: 16px;
	color: #0A3247;
	background-color: #fff;
	border: 2px solid #cfe0ea;
	border-radius: 999px;
	transition: border-color 0.3s ease 0s, box-shadow 0.3s ease 0s;
}

.search-page-form input[type="search"]::placeholder {
	color: #6b7a86;
	opacity: 1;
}

.search-page-form input[type="search"]:hover {
	border-color: #a9c8da;
}

.search-page-form input[type="search"]:focus {
	outline: none;
	border-color: #198dc4;
	box-shadow: 0 0 0 4px rgba(25, 141, 196, 0.15);
}

.search-page-form button {
	flex: none;
	box-sizing: border-box;
	height: 50px;
	margin: 0;
	padding: 0 30px;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	background-color: #ff8000;
	border: 2px solid #ff8000;
	border-radius: 999px;
	cursor: pointer;
	transition: all 0.5s ease 0s;
}

.search-page-form button:hover {
	background-color: #198dc4;
	border-color: #198dc4;
}

.search-page-form button:focus-visible {
	outline: 3px solid #0A3247;
	outline-offset: 2px;
}

.archive-intro .intro-copy p.search-hint {
	margin: 9px 0 0 22px;
	font-size: 13px;
	line-height: 18px;
	color: #6b7a86;
}

/* On the results page the figures jump to their group. Only there do they
   link, so this is not scoped any tighter. */
.archive-proof a {
	display: block;
	line-height: 1.25;
	text-decoration: none;
}

.archive-proof a b,
.archive-proof a i {
	transition: color 0.3s ease 0s;
}

.archive-proof a:hover b,
.archive-proof a:hover i {
	color: #198dc4;
}

/* Presentations, then speakers, each on the archives' tint. The offset
   clears the sticky header when a figure above jumps here - see
   .fsc-speaker-topics[id]. */
.search-group {
	scroll-margin-top: 205px;
}

.search-group-head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 16px;
}

.search-group-head h2 {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: #0A3247;
}

.search-group-head span {
	font-size: 13px;
	font-weight: 600;
	color: #6b7a86;
	font-variant-numeric: tabular-nums;
}

/* "Top Matches for Your Search Terms" and "Additional Matches for Your
   Search Terms": a label between hairlines, inside the list. */
.search-divider {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 26px 0 16px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #0A3247;
}

.search-divider--top {
	margin-top: 0;
}

.search-divider:before,
.search-divider:after {
	content: "";
	flex: 1;
	height: 1px;
	background-color: #c5d6e0;
}

/* The words searched for, marked in titles, descriptions, bios and a
   speaker card's presentation links. */
mark.search-hit {
	margin: 0 -2px;
	padding: 0 2px;
	color: inherit;
	background-color: #ffe7c7;
	border-radius: 3px;
}

/* No results. */
.search-empty-card {
	padding: 30px 34px;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 12px;
}

.search-empty-card h2 {
	margin: 0 0 12px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	color: #0A3247;
}

.search-empty-card p {
	margin: 0 0 8px;
	font-size: 15px;
	line-height: 24px;
	color: #4b5768;
}

.search-empty-card ul {
	margin: 0 0 0 20px;
	font-size: 15px;
	line-height: 28px;
	color: #4b5768;
}

.search-empty-card li a {
	font-weight: 600;
	color: #198dc4;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.search-empty-card li a:hover {
	color: #0A3247;
}

/* The two category bands read as one: speakers, then presentations 30px
   below, then the footer. */
.search-cats .speaker-cats {
	padding-bottom: 0;
}

.search-cats .topic-cats {
	padding-top: 30px;
}

/* The homepage's search section (page_home.php), between the intro and the
   category grid. A navy band, Andy's pick of three layouts on 2026-09-16:
   the navy of the closing call to action and the nav bar's Search button.
   Deliberately not a .home-section, like #home-proof-band, since it breaks
   the white/cool rhythm rather than joining it. The field is the results
   page's own .search-page-form, adjusted for the dark ground. */
.home-search {
	clear: both;
	overflow: hidden;
	min-width: 1160px;
	padding: 44px 0 48px;
	background-color: #0A3247;
}

.home-search .wrap {
	width: 1060px;
	margin: 0 auto;
}

.home-search .section-head {
	margin-bottom: 22px;
}

.home-search .section-head h2 {
	color: #fff;
}

.home-search .section-head p {
	color: #c3d3dd;
}

.home-search .search-page-form {
	max-width: 700px;
	margin: 0 auto;
}

.home-search .search-page-form input[type="search"] {
	border-color: #fff;
}

.home-search .search-page-form input[type="search"]:focus {
	border-color: #bfe3f5;
	box-shadow: 0 0 0 4px rgba(191, 227, 245, 0.35);
}

.home-search .search-page-form button:hover {
	background-color: #198dc4;
	border-color: #198dc4;
}

/* "Search Examples:" and the example searches picked for the bureau. */
.home-search-examples {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin: 16px 0 0;
	font-size: 13px;
	color: #9fb6c4;
}

.home-search-examples a {
	padding: 5px 13px;
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	color: #fff;
	text-decoration: none;
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 999px;
	transition: all 0.3s ease 0s;
}

.home-search-examples a:hover {
	color: #0A3247;
	text-decoration: none;
	background-color: #bfe3f5;
	border-color: #bfe3f5;
}


/* ==========================================================
   RESPONSIVE. Added at the end of style.css; nothing above it
   changes. Every rule is inside a max-width query, so at
   1160px and wider the browser ignores this whole block.
   ========================================================== */

/* -- the container pattern: a ceiling instead of a floor ---- */
/* Every full-bleed band on the site, all 20 floors in one rule.
   .fsc-thanks and .fsc-thanks-share were added in round 21: the
   thank-you page declares one floor for three bands, so counting
   declarations had missed two of them. */
#logo-header-wrapper,#nav-wrapper,#content-wrapper,
#nav-footer-wrapper,#social-footer-wrapper,
#home-proof-band,#speaker-proof-band,#featured-speakers-home,#home-closing-cta,.home-search,
.topic-archive,.topic-cats,.speaker-archive,.speaker-cats,.archive-intro,
.fsc-speaker-mast,.fsc-speaker-about,.fsc-speaker-topics,.fsc-speaker-close,
.fsc-thanks,.fsc-thanks-share,.fsc-thanks-about,.fsc-request-intro{min-width:0}

/* The gutter lives in one place. Every column below reads it, so
   the four bands set it once instead of each rule repeating a
   padding pair per breakpoint. */
:root{--fs-gutter:50px}
@media (max-width:1159px){:root{--fs-gutter:30px}}
@media (max-width:899px) {:root{--fs-gutter:24px}}
@media (max-width:499px) {:root{--fs-gutter:16px}}

/* There are two container patterns on this site, and the
   difference matters. PATTERN A is the original chrome: the inner
   column is width:1060px and carries its own 50px of side
   padding, so 1060 + 50 + 50 = 1160 and a border-box ceiling of
   1160px reproduces it exactly. */
#logo-header,#nav,#content,#nav-footer,#social-footer{
  box-sizing:border-box;width:100%;max-width:1160px;
  padding-left:var(--fs-gutter);padding-right:var(--fs-gutter)}

/* PATTERN B is every band built in the 2026 rebuilds: a .wrap of
   width:1060px with NO padding of its own, the band supplying only
   vertical padding. So the ceiling has to bring the side padding
   with it, or the content would run to the very edge of the band.

   Every parent is named here rather than writing a bare .wrap,
   and that is the whole point: the theme styles these as
   ".fsc-speaker-mast .wrap", two selectors, and three of them
   ("#home-proof-band .wrap" and friends) lead with an id. A one
   selector .wrap rule loses to every one of them and the 1060px
   simply stays - which is exactly what went wrong in the first
   version of this. Naming the parents matches their specificity,
   and being later in the file wins the tie. */
.home-section .wrap,
#home-proof-band .wrap,
#speaker-proof-band .wrap,
#featured-speakers-home .wrap,
#home-closing-cta .wrap,
.home-search .wrap,
.topic-archive .wrap,
.topic-cats .wrap,
.speaker-archive .wrap,
.speaker-cats .wrap,
.archive-intro .wrap,
.fsc-speaker-mast .wrap,
.fsc-speaker-about .wrap,
.fsc-speaker-topics .wrap,
.fsc-speaker-close .wrap{
  box-sizing:border-box;width:100%;max-width:1160px;
  padding-left:var(--fs-gutter);padding-right:var(--fs-gutter)}

/* The request form and the thank-you page are pattern B under
   another name: every band on both holds a .fsc-thanks-wrap of
   width:1060px with no padding. The theme styles it as a bare
   class, so a bare class matches it. */
.fsc-thanks-wrap{
  box-sizing:border-box;width:100%;max-width:1160px;
  padding-left:var(--fs-gutter);padding-right:var(--fs-gutter)}

/* -- the location switcher opens OVER the blue bar ---------- */
/* Today the switcher list and the nav dropdowns are both at
   z-index 20, so the nav wins on document order. On desktop they
   never overlap (opposite ends of the bar) so it never showed;
   on a phone they sit on top of each other. */
#header-tools .region-selector{position:relative;z-index:40}

/* -- "All Speakers" / "All Topics", the first row of each list -- */
/* On a device with hover, the control is still a link: hovering
   opens the list and clicking the word goes to the archive, so
   the row is not needed and the desktop menu stays exactly as it
   is today. Where there is no hover, tapping the control opens
   the list instead of following it, and this row is the only way
   through to the full archive. So it is gated on hover, not on a
   width: that is the same condition the tap toggle uses, so the
   two can never disagree - and an iPad at 1024px, which is a wide
   screen with no hover, gets the row where a width rule would
   have missed it. The row is in the HTML at every width either
   way, so it is a real internal link to the archive on all of
   them. */
#nav-wrapper .dropdown ul li.all-row{display:none}
@media (hover:none){
  #nav-wrapper .dropdown ul li.all-row{display:block}
}
#nav-wrapper .dropdown ul li.all-row a{font-weight:700}
#nav-wrapper .dropdown ul li.all-row{border-bottom:2px solid #0d4c6a}
/* Found while building, not in the preview: :first-child is structural,
   so the All row takes that slot at every width - including the widths
   where it is display:none. The theme's "li:first-child{border-top:none}"
   would then land on the hidden row and the first category would gain a
   1px top border it does not have today, which is a change above 1160px.
   This puts it back. Where the row IS shown it is also the right result:
   its own 2px divider, not 2px plus a 1px line under it. */
#nav-wrapper .dropdown ul li.all-row + li{border-top:none}

/* -- source order: the heading leads, the switcher follows -- */
#header-tools{display:flex;flex-direction:column;align-items:flex-end;height:auto}
#header-tools>*{flex-shrink:0}
#header-tools .region-selector{order:1}
#header-tools .header-tagline{order:2}
#header-tabs{order:3}

/* -- GENERAL PAGES: the deliberate changes on desktop --------- */
/* Andy, round 23: every general page (About, FAQ, How It Works,
   Contact, the legal pages and the rest of the templates that
   printed the old sidebar) loses the sidebar, and its content
   takes the full 1060px. The sidebar's <aside> comes out of the
   templates; this lets the column fill the space it leaves. */
#content-feature{float:none;width:auto;border-right:0;padding-right:0;margin-right:0}
/* Andy, 2026-09-21: the general pages also take the redesigned
   pages' reading style, so moving from a profile to About no longer
   feels like changing sites. Before this they were on the original
   theme's styling - browser-default line spacing, black text, a 25px
   title - while the profile, topic page and request form use a 32px
   title, 1.6 line spacing and a soft dark grey. Text size stays 16px:
   one pixel above the redesigned pages' 15px, which suits these pages'
   full 1060px lines.
   The title: 32px like the profile and topic page (28px from 899 and
   the phone sizes further down, as theirs do). #content-feature is
   only on the general pages, so the topic page, which shares #content
   but not this column, is unaffected. */
#content-feature h1{font-size:32px;line-height:38px}
/* How It Works has two halves, one for program chairs under the page
   title and one for speakers under a heading typed in the editor. That
   second heading was an <h1> too, the page's second; it is an <h2> now
   and this keeps it looking like the title it sits opposite. It follows
   the title's size at every width, so each rule below that resizes the
   title names this heading as well. The sizes are !important because
   the editor may carry its own inline (Chicago's was set to 25px to
   match the old title), and only an !important can reach an inline size. */
.page-template-page_how_it_works #content-feature>h2{font-size:32px !important;line-height:38px;font-weight:600;color:#f60;margin:0 0 20px}
/* The reading text: the profile bio's colour and the redesigned pages'
   line spacing. :where() keeps this at the lowest priority possible,
   so any component inside the column that styles its own text keeps
   it; headings are not listed and keep their colours. */
:where(#content-feature) :is(p,li,blockquote,dd,td,figcaption){color:#3c4854;line-height:1.6}
/* ...and headings keep theirs. The News Room and Speaker Resources
   pages put each item's title and date inside a list item, which would
   pass the grey and the wider spacing on to them. They were black with
   normal spacing, inherited; this states it. Headings the editor has
   coloured carry that inline, and inline still wins. */
:where(#content-feature) :is(h2,h3,h4,h5,h6){color:#000;line-height:normal}
/* The sitemap's name lists set their line spacing on the list itself,
   which a rule on each item would otherwise override. */
#content-feature .fs-sitemap-names li{line-height:inherit}
/* The sidebar's links come back at the foot of the page as the
   search page's two category bands, on the site's light blue, since
   the page above is white. The sidebar's free message leads the
   band. Its column is pattern B, with the gutter like every band. */
.browse-cats{clear:both;background-color:#eef3f6;padding:34px 0 44px}
.browse-cats>.wrap{box-sizing:border-box;width:100%;max-width:1160px;margin:0 auto;
  padding-left:var(--fs-gutter);padding-right:var(--fs-gutter)}
.browse-cats-note{margin:0;font-size:15px;line-height:24px;color:#4b5768;
  text-align:center;text-wrap:balance}
.browse-cats-note strong{color:#0a3247}
/* The two bands keep their own headings and pills; here they sit on
   the blue instead of on white, closer together. */
.browse-cats .speaker-cats,.browse-cats .topic-cats{background-color:transparent}
.browse-cats .speaker-cats{padding:28px 0 0}
.browse-cats .topic-cats{padding:30px 0 0}

/* -- Laptop. The floats stay. Nothing rearranges. ---------- */
@media (max-width:1159px){
  /* PROFILE. Nothing rearranges here either. The masthead rail is
     200px and the body still has 640px at 900px wide, and the bio
     still has 504px beside the 300px video. Both are comfortable
     measures, so neither has to give yet. */
  /* The footer menu measures 933px and the navy row 829px, so both
     still fit on one line the whole way down this band. Nothing in
     the footer changes here except the gutters. */
  #header-tools{width:auto}
  /* One declaration instead of a breakpoint per size: the tagline
     shrinks against the right edge rather than moving off it. */
  #header-tools .header-tagline{font-size:clamp(15px,2.4vw,21px);line-height:1.25}
  /* The logo scales the same way, holding full size until 773px
     (170 / 0.22) and shrinking from there. Its fixed 75px height
     is released at the same time: the real content is about 134px
     tall, so a 75px float box is what let the logo run past the
     bottom of the white band and over the orange rule. */
  /* The image is inline in the theme, and on desktop it is the
     172px box that sends FreeSpeakers.org onto the next line. Once
     the box sizes to its content, nothing would, and the name would
     sit beside the image - so the image becomes a block here. */
  #logo{width:auto;height:auto}
  #logo img{display:block;margin:0 auto;width:clamp(132px,22vw,170px);height:auto}
  #logo strong{font-size:clamp(15px,2.6vw,20px)}
  #logo h2{font-size:clamp(8px,1.17vw,9px);white-space:nowrap}
  #nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
  #nav .nav-search{float:none;order:9;margin-left:auto;flex:0 1 320px;min-width:230px}
  #nav .nav-search input[type="search"]{flex:1;width:auto;min-width:0}
  /* HOMEPAGE. The desktop arrangement holds through this band:
     four categories, three speakers, three reviews and three
     news stories to a row. Only the fixed pixel widths go. */
  /* The slideshow keeps its left edge on the content edge, as on
     desktop, and its height eases from 350px to a 200px floor.
     object-fit covers without stretching - on desktop today this
     1000px photo is set at 1140px wide, 14% larger than it is. */
  #home-slide{box-sizing:border-box;width:100%;max-width:1160px;min-width:0;
    padding-left:var(--fs-gutter);padding-right:var(--fs-gutter)}
  body #home-splash{float:none;width:100%;min-width:0}
  body #home-splash ul.carousel{width:100%}
  #home-splash .slide{width:100%;height:clamp(200px,33vw,350px);overflow:hidden}
  #home-splash .slide img{width:100%;height:100%;object-fit:cover}
  #home-splash .slide-text{width:auto;right:0;box-sizing:border-box}
  #home-categories .category-card{width:auto;flex:0 0 calc((100% - 54px) / 4)}
  #featured-speakers-home .featured-speaker-tile{flex:0 0 calc((100% - 60px) / 3)}
  #home-testimonial-section .testimonial-card{width:auto;flex:0 0 calc((100% - 36px) / 3)}
  #home-news .news-card{width:auto;flex:0 0 calc((100% - 36px) / 3)}
  /* TOPIC PAGE. Every rule is scoped to .fsc-topic-page: five of
     these classes are shared with the request form, the thank-you
     page and the profile, which get their own treatment. */
  /* The page column was a fixed 1060px inside #content, which
     already carries the gutter, so it just takes #content's width.
     The description column gives; the speaker card stays 300px. */
  .fsc-topic-page{width:auto}
  .fsc-topic-page .fsc-topic-main{width:auto;flex:1 1 0;min-width:0}
  /* REQUEST FORM. The same two columns as the topic page and the
     same answer: the description gives width, the speaker card
     holds 300px. At 900 the description still has 485px. */
  .fsc-request-intro .fsc-topic-main{width:auto;flex:1 1 0;min-width:0}
}

/* -- Tablet. The watermark goes; the layout does NOT move. -- */
@media (max-width:899px){
  /* Only the decorative watermark is dropped. The logo stays
     floated left and the tagline, the switcher and Become a
     Speaker stay stacked against the right edge, exactly as
     they are on desktop. The fixed 150px height becomes auto,
     cleared with a pseudo-element rather than overflow:hidden,
     which would clip the open dropdowns. */
  #logo-header{height:auto;padding:10px var(--fs-gutter) 0;background-image:none}
  #logo-header::after{content:"";display:table;clear:both}
  /* search takes its own full-width row under Speaker and Topic */
  #nav .nav-search{flex:1 1 100%;margin-left:0;height:40px}
  #nav .nav-search input[type="search"]{height:40px;font-size:16px}
  #nav .nav-search button{height:40px}
  #nav-wrapper .dropdown{padding:7px 12px;border-radius:4px;background:#1579a8}
  #nav-wrapper .dropdown ul li a{padding:11px 12px}
  header.sticky_header.stick{display:none}
  #content{padding-top:20px;padding-bottom:20px}
  /* FOOTER. 900 is where it has to give: the copyright row and the
     icons together measure 829px, and 900 minus two 30px gutters
     leaves 840. Twelve pixels of headroom, so this is the last
     width the two sit side by side. */
  /* the separators go where the list starts wrapping in earnest,
     so a stray pipe never ends a line */
  #nav-footer #menu-footer{display:flex;flex-wrap:wrap;justify-content:center;
    gap:6px 20px;padding:12px 0;text-align:center}
  #nav-footer #menu-footer li,
  #nav-footer #menu-footer li:first-child{display:block;border-right:0;padding:0}
  #nav-footer #menu-footer li a{display:block;padding:4px 0}
  /* icons, then the legal links, then the copyright line */
  #social-footer{display:flex;flex-direction:column;align-items:center;gap:14px;
    padding:20px var(--fs-gutter) 22px}
  #social-media{float:none;order:1;display:flex;gap:10px;padding:0}
  #social-media li{float:none;padding:0}
  #copyright{float:none;order:2;display:flex;flex-wrap:wrap;justify-content:center;
    gap:4px 22px;padding:0;text-align:center}
  #copyright li{float:none;padding:0}
  #copyright li a{display:block;padding:4px 0}
  /* the (c) sentence is the first item in the list, so it is sent
     to a full-width row of its own at the end rather than sitting
     in the middle of the three legal links */
  #copyright li:first-child{order:9;flex:1 1 100%;font-size:13px;color:#b9cad5}
  /* PROFILE ------------------------------------------------- */
  /* The headshot scales rather than stepping, same as the logo.
     It holds 200px to 1000px and eases to a 120px floor, which
     leaves the name and byline a workable column the whole way
     down to 500px instead of being squeezed by a fixed rail. */
  .fsc-mast-rail{width:clamp(120px,20vw,200px)}
  img.fsc-mast-photo{width:100%;height:auto;aspect-ratio:1}
  .fsc-mast-grid{gap:24px}
  .fsc-mast-name{font-size:28px;line-height:34px}
  /* 900 is where the bio and the video stop working side by side:
     the video is a fixed 300px, so at 899 the bio would drop under
     500px and keep falling. Full width each, video under the bio,
     and it becomes a real 16:9 instead of a 300x169 box. */
  .fsc-about-grid{display:block}
  .fsc-about-video{width:auto;margin-top:18px}
  .fsc-video{width:100%;max-width:440px;height:auto;aspect-ratio:16/9}
  /* The 205px offset exists to clear the sticky header. The sticky
     header is switched off in this band, so the jump from the
     masthead would otherwise land 205px past its own heading. */
  .fsc-speaker-topics[id]{scroll-margin-top:16px}
  .fsc-profile-topic{padding:20px}
  /* ARCHIVES -------------------------------------------------- */
  /* The intro band is two columns of 1.15fr and 0.85fr. At 900 the
     left one is 454px and the 1-2-3 card has 276px of content
     inside its 30px padding - the last width either is comfortable
     at. Below that they stack, copy first. minmax(0,1fr), not 1fr:
     1fr is really minmax(auto,1fr) and grows to fit its widest
     content. On the search page that is the field and its button
     side by side, 356px, so below 390 the column ran past the
     screen and the band's overflow:hidden cut the button off. */
  .intro-grid{grid-template-columns:minmax(0,1fr);gap:26px}
  /* Every card rule below is scoped to its archive. .topic-row is
     also printed by the homepage, the topic pages and the search
     results, and .speaker-row by the search results, so a bare
     class would restyle all of those too. The scope is also what
     the theme itself uses (".topic-archive .topic-row-speaker img"
     sets the 150px), so it is needed to win on specificity. */

  /* Speaker card: the rail scales like the profile headshot, so
     the bio keeps a column instead of being squeezed by a fixed
     180px. min-height goes with it - it was there to match the
     rail height and would now leave a gap under short cards.
     The photo gets a real size, not a percentage: it sits in a
     link that the rail shrink-wraps, so width:100% has nothing to
     measure against and collapses the image to 0x0. */
  .speaker-archive .speaker-row-rail{width:clamp(110px,20vw,180px)}
  .speaker-archive .speaker-row-rail img{width:clamp(96px,16vw,150px);height:auto;aspect-ratio:1}
  .speaker-archive .speaker-row-body{min-height:0}

  /* Topic card. Photo and text side by side through this band; the
     fold under the photo is the 559px query just below. It was
     left to flex-wrap to find until the stacked card needed its
     own styling (a centred photo and title), and CSS cannot style
     "the state flex-wrap happens to be in" - so the fold is now a
     width, and the text never folds on its own above it. */
  .topic-archive .topic-row{flex-wrap:wrap;align-items:flex-start;row-gap:0}
  /* The bottom margin is the gap under the photo when the text
     folds beneath it. Side by side it is invisible, since the text
     is always the taller of the two. */
  .topic-archive .topic-row-speaker{width:120px;margin-bottom:14px}
  .topic-archive .topic-row-speaker img{width:120px;height:120px}
  /* The 166px floor and the vertical centring were there to stop a
     16px stagger between one-line and two-line titles on desktop.
     Stacked, they would pad a short card with empty space. */
  .topic-archive .topic-row-body{flex:1 1 0;min-width:0;min-height:0;justify-content:flex-start}
  /* The request button always takes its own last row, at its own
     width, against the right edge - including on an iPad at 768,
     where it would otherwise still fit beside the text. An empty
     full-width item is the line break: a button that claimed the
     whole row itself would stretch to fill it. */
  .topic-archive .topic-row::after{content:"";order:1;flex:0 0 100%;height:0}
  .topic-archive .topic-row-btn{order:2;margin:14px 0 0 auto}
  /* HOMEPAGE ---------------------------------------------------- */
  /* The intro band stacks through the shared .intro-grid rule
     above, the same component as the archive intro. */
  #home-splash .slide-text{font-size:13.5px;line-height:20px;padding:9px 16px}
  #home-categories .category-card{flex-basis:calc((100% - 36px) / 3);padding:20px 12px}
  #featured-speakers-home .featured-speaker-tile{flex-basis:calc((100% - 30px) / 2)}
  /* One review to a row, capped so a line stays readable. */
  #home-testimonial-section .testimonial-card{flex:0 1 600px}
  #home-news .news-card{flex-basis:calc((100% - 18px) / 2)}
  /* The newspaper logo was capped at 250px but never allowed to
     shrink, which held every news card at 296px or wider. */
  #home-news .news-card-logo img{max-width:100%}
  /* The four figures go two by two here, not at the phone width.
     Each is held at about 180px by its 44px number, the figures
     differ per bureau ("2,300+" in Chicago), and four across at
     768 had no pixels to spare - one wider figure and the band
     crops it, because its overflow is hidden. */
  #home-proof-band .proof-stats,#speaker-proof-band .proof-stats{flex-wrap:wrap;row-gap:26px}
  #home-proof-band .proof-stats li,#speaker-proof-band .proof-stats li{flex:0 0 50%;box-sizing:border-box;padding:0 12px}
  #home-proof-band .proof-stats li:nth-child(odd),#speaker-proof-band .proof-stats li:nth-child(odd){border-left:0}
  /* The three featured topics behave exactly like the topic
     archive card: side by side, the request button on its own
     row against the right edge. Their own 88px headshot and
     category pill stay as they are. */
  #home-featured-topics .topic-row{flex-wrap:wrap;align-items:flex-start;row-gap:0}
  #home-featured-topics .topic-row-speaker{margin-bottom:14px}
  #home-featured-topics .topic-row-body{flex:1 1 0;min-width:0}
  #home-featured-topics .topic-row::after{content:"";order:1;flex:0 0 100%;height:0}
  #home-featured-topics .topic-row-btn{order:2;margin:14px 0 0 auto}
  /* TOPIC PAGE. At 900 the description would drop under 500px beside
     the speaker card, so the page stops being two columns - but
     rather than dropping the card below the request button, the
     top of the page becomes a topic-list card: the headshot, and
     beside it the title, the speaker's name, role and category.
     Then the description, then the request box with its cost note.

     The pieces live in different parents (the title outside the
     columns, the headshot and name deep inside the speaker card),
     so the page becomes one grid and the boxes between are
     dissolved with display:contents. Every piece is then placed
     by explicit area, so nothing depends on the order of the HTML. */
  .fsc-topic-page{display:grid;grid-template-columns:120px minmax(0,1fr);
    column-gap:22px;align-items:start}
  .fsc-topic-page .fsc-topic-cols,.fsc-topic-page .fsc-topic-aside,
  .fsc-topic-page .fsc-topic-card,
  .fsc-topic-page .fsc-topic-card .featured-speaker-content{display:contents}
  .fsc-topic-page .fsc-topic-card .featured-speaker-image{grid-area:1/1/5/2;justify-self:start}
  .fsc-topic-page .fsc-topic-card .featured-speaker-image img{width:120px;height:120px}
  .fsc-topic-page .fsc-topic-title{grid-area:1/2/2/3;margin:0 0 8px;font-size:28px;line-height:34px}
  /* text-align is set outright: it inherits through display:contents,
     and the speaker card it came from is centred */
  .fsc-topic-page .fsc-topic-card h3{grid-area:2/2/3/3;margin:0;text-align:left}
  .fsc-topic-page .fsc-topic-card h4{grid-area:3/2/4/3;margin:2px 0 8px;text-align:left}
  /* justify-self, or the pill would stretch across its whole cell */
  .fsc-topic-page .fsc-topic-card .featured-speaker-category{grid-area:4/2/5/3;justify-self:start;margin:0}
  /* The bio teaser and the View Speaker Profile button go below 900.
     The teaser only leads to the profile, and the speaker's name
     now does that from the top of the page. Hidden, not removed:
     both stay in the HTML, so a search engine still reads them. */
  .fsc-topic-page .fsc-topic-card .featured-speaker-excerpt,
  .fsc-topic-page .fsc-topic-card .featured-speaker-cta{display:none}
  .fsc-topic-page .fsc-topic-main{grid-area:5/1/6/3;margin-top:22px}
  .fsc-topic-page .fsc-topic-filed{grid-area:6/1/7/3}
  .fsc-topic-page .fsc-topic-more{grid-area:7/1/8/3}
  .fsc-topic-page .fsc-topic-about{grid-area:8/1/9/3}
  /* The cost note stays - it is the pitch, and the in-person and
     virtual availability. It drops under the button when it has
     less than 220px beside it. */
  .fsc-topic-page .fsc-topic-cta{flex-wrap:wrap;align-items:center}
  .fsc-topic-page .fsc-topic-cta p{flex:1 1 220px}
  /* REQUEST FORM. It opens exactly like the topic page on desktop,
     so it does here too: the headshot beside the title, with the
     speaker's name and role under the title, then the two lines,
     the description and the cost note at full width. Its card is
     the compact one - no category, bio or profile button - so there
     is nothing to hide. Same grid, its own scope: every class here
     is shared with the topic page. */
  .fsc-request-intro .fsc-thanks-wrap{display:grid;grid-template-columns:120px minmax(0,1fr);
    grid-template-rows:auto auto auto 1fr;column-gap:22px;align-items:start}
  .fsc-request-intro .fsc-topic-cols,.fsc-request-intro .fsc-topic-aside,
  .fsc-request-intro .fsc-topic-card,
  .fsc-request-intro .fsc-topic-card .featured-speaker-content{display:contents}
  /* The photo spans a fourth, empty row. Without it the grid shares
     the photo's spare height between the title, name and role rows
     and they drift apart; with it they sit together at the top. */
  .fsc-request-intro .fsc-topic-card .featured-speaker-image{grid-area:1/1/5/2;justify-self:start}
  .fsc-request-intro .fsc-topic-card .featured-speaker-image img{width:120px;height:120px}
  .fsc-request-intro .fsc-topic-title{grid-area:1/2/2/3;margin:0 0 8px;font-size:28px;line-height:34px}
  /* text-align set outright: it inherits through display:contents,
     and the card it came from is centred */
  .fsc-request-intro .fsc-topic-card h3{grid-area:2/2/3/3;margin:0;text-align:left}
  .fsc-request-intro .fsc-topic-card h4{grid-area:3/2/4/3;margin:2px 0 0;text-align:left}
  .fsc-request-intro .fsc-topic-main{grid-area:5/1/6/3;margin-top:22px}
  /* The failed robot check sends people back to this heading. The
     205px offset clears the sticky header, which is off below 900 -
     the same fix as the profile's talks. */
  .fsc-request-heading[id]{scroll-margin-top:16px}
  /* SEARCH RESULTS. The page is the archives' bands and cards, so
     the rules above already lay it out; only what search adds is
     here. The figures jump to each group, and their 205px offset
     cleared the sticky header, which is off below 900. */
  .search-group{scroll-margin-top:16px}
  /* Once the intro stacks, the 1-2-3 card sits between the search
     box and the first result: a third of a phone screen before
     any result. It stays on the category pages, where it is the
     pitch, and beside the copy from 900 up. Hidden, not removed,
     and search pages are noindex, so nothing is lost to Google. */
  body.search .archive-intro .steps-card{display:none}
  /* GENERAL PAGES. The editor's floated photos scale with the column
     instead of keeping their full size: at 560px a 400px photo left
     a 112px strip of text beside it. Held to 40% of the column, the
     text keeps at least 270px beside the photo down to 500. */
  /* The general-page title steps down to 28px here, as the profile
     and topic page titles do. */
  #content-feature h1{font-size:28px;line-height:34px}
  .page-template-page_how_it_works #content-feature>h2{font-size:28px !important;line-height:34px}
  #content-feature .alignleft,#content-feature .alignright{max-width:40%}
  #content-feature .alignleft img,#content-feature .alignright img{max-width:100%;height:auto}
}

/* -- Topic card only: the stacked card, from 559px down -------- */
/* A fourth width, but it belongs to one component, not the site:
   the three bands are unchanged. 559 is where the text beside the
   photo would drop under about 325px. From here the photo takes
   its own row, centred, and the title centres under it - the
   profile page's arrangement. The description and byline stay
   left-aligned; centred body text is hard to read. */
@media (max-width:559px){
  /* Centres the photo only when it is alone on its row: the text
     fills its own row and the button keeps its auto margin, so
     neither is moved by this. */
  .topic-archive .topic-row{justify-content:center}
  .topic-archive .topic-row-body{flex:1 1 100%}
  .topic-archive .topic-row-body h3{text-align:center}
  /* The request button centres with the headshot and title, at
     its own width - the same as the homepage's featured topics. */
  .topic-archive .topic-row-btn{margin-right:auto}
  /* The photo has a row of its own from here, so its column sizes to
     its content: on the all-topics page and in search the category
     pill under the photo then stays on one line. Side by side, 560
     to 899, the column holds 120px and a long name wraps inside it. */
  .topic-archive .topic-row-speaker{width:auto}
  /* Topic page: the header goes to one centred column - headshot,
     title, name, role, category - exactly as a topic-list card
     does at this width. Same grid, one track, re-placed. */
  .fsc-topic-page{grid-template-columns:minmax(0,1fr)}
  .fsc-topic-page .fsc-topic-card .featured-speaker-image{grid-area:1/1/2/2;justify-self:center}
  .fsc-topic-page .fsc-topic-title{grid-area:2/1/3/2;text-align:center;margin:14px 0 8px}
  .fsc-topic-page .fsc-topic-card h3{grid-area:3/1/4/2;text-align:center}
  .fsc-topic-page .fsc-topic-card h4{grid-area:4/1/5/2;text-align:center}
  .fsc-topic-page .fsc-topic-card .featured-speaker-category{grid-area:5/1/6/2;justify-self:center}
  .fsc-topic-page .fsc-topic-main{grid-area:6/1/7/2}
  .fsc-topic-page .fsc-topic-filed{grid-area:7/1/8/2}
  .fsc-topic-page .fsc-topic-more{grid-area:8/1/9/2}
  .fsc-topic-page .fsc-topic-about{grid-area:9/1/10/2}
  /* ...and the "More Free Presentations" rows put the request
     button on its own row, centred, like every other topic card. */
  .fsc-topic-page .fsc-topic-row{flex-wrap:wrap;row-gap:14px}
  .fsc-topic-page .fsc-topic-row-body{flex:1 1 100%}
  .fsc-topic-page .fsc-topic-row a.fsc-topic-btn{margin:0 auto}
  /* Homepage: the same stacked and centred topic card, and the
     category grid drops to two across - three would put
     "Self-Improvement" in a card narrower than the word. */
  #home-featured-topics .topic-row{justify-content:center}
  #home-featured-topics .topic-row-body{flex:1 1 100%}
  #home-featured-topics .topic-row-body h3{text-align:center}
  /* The headshot grows from 88px to 100px, the size the Elite tiles
     use, so the two sets of faces on the homepage match (Andy, on an
     iPhone: the featured-topic photos read as too small next to them).
     88px was chosen when the photo sat beside the text and had the
     title and byline for scale; alone and centred on its own line it
     has nothing next to it, which is what makes it look small. Set
     here rather than in the phone block because this is the width
     where the card becomes stacked and centred, so the photo does not
     change size in the middle of one arrangement. The column stays
     150px, so 100px still has 25px clear each side. This covers 500
     to 559 only: on a phone both sets go on to 150px, in the 499
     block, where the reason for waiting until then is. */
  #home-featured-topics .topic-row-speaker img{width:100px;height:100px}
  /* ...and the request button centres with them. Its right margin
     goes to auto to match the left one, so the button keeps its
     own width and sits in the middle of its row. */
  #home-featured-topics .topic-row-btn{margin-right:auto}
  #home-categories .category-card{flex-basis:calc((100% - 18px) / 2)}
  /* Request form: the header centres at the same width as the topic
     page and the topic list - headshot, title, name, role. */
  .fsc-request-intro .fsc-thanks-wrap{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .fsc-request-intro .fsc-topic-card .featured-speaker-image{grid-area:1/1/2/2;justify-self:center}
  .fsc-request-intro .fsc-topic-title{grid-area:2/1/3/2;text-align:center;margin:14px 0 8px}
  .fsc-request-intro .fsc-topic-card h3{grid-area:3/1/4/2;text-align:center}
  .fsc-request-intro .fsc-topic-card h4{grid-area:4/1/5/2;text-align:center}
  .fsc-request-intro .fsc-topic-main{grid-area:5/1/6/2}
}

/* -- Phone. The first width where the tagline has to move. -- */
@media (max-width:499px){
  /* Below about 470px the logo and a two-line tagline cannot sit
     side by side without the type dropping under 15px. The tagline
     drops to its own full-width row, centred. The switcher and
     Become a Speaker stay on the right. */
  #logo-header{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:12px;padding:12px var(--fs-gutter) 0}
  /* The clearfix from the band above would become a flex ITEM here
     and take a line of its own. A flex container contains its own
     children, so it is not needed once the header is flex. */
  #logo-header::after{display:none}
  #logo{float:none;width:auto;height:auto;order:1;padding-top:2px;text-align:left}
  #logo img{width:clamp(104px,30vw,132px);height:auto;margin:0}
  #logo strong{font-size:clamp(13px,4vw,17px)}
  /* Keeps BUREAU on its line, and keeps the logo narrow enough at
     330px that Change Location still fits beside it. */
  #logo h2{font-size:clamp(7.2px,2.1vw,9px);white-space:nowrap}
  #header-tools{display:contents}
  #header-tools .region-selector{order:2;margin:0 0 0 auto}
  /* On its own row the tagline scales with the screen to fill it:
     Chicago's longer line takes about 90% of the row from 320 to
     499 (Andy, round 24 - at a fixed 16px it filled 66% at 390).
     The bureau name is in the tagline, so longer names wrap:
     Washington D.C., Dallas-Fort Worth and LA & Orange County go
     to three lines, which balance keeps even instead of leaving
     "FOR" alone on a line. */
  #header-tools .header-tagline{order:3;flex:1 1 100%;font-size:clamp(16px,5.5vw,27px);
    line-height:1.25;margin:12px 0 0;text-align:center;text-wrap:balance}
  #header-tabs{order:4;flex:1 1 100%;margin-top:10px}
  #header-tabs a{margin-left:0;font-size:13px;padding:7px 12px}
  .region-selector{margin:0}
  .region-selector .current-region{display:none}
  .region-selector a.region-changer{padding:8px 11px;font-size:13px;border-radius:4px}
  .region-selector ul.region-dropdown{width:190px}
  .region-selector ul.region-dropdown a{padding:11px 12px;font-size:14px}
  #nav{font-size:13px;gap:8px 10px}
  #nav .nav-search{order:-1;height:44px}   /* search first on a phone */
  #nav .nav-search input[type="search"]{height:44px}
  #nav .nav-search button{height:44px;padding:0 18px}
  #nav .nav-label{flex:1 1 100%;margin:2px 0 -2px}
  /* Speaker and Topic split one row. The basis allows for the 10px
     gap above: 2 x calc(50% - 8px) + 10 leaves 6px spare. border-box
     is what makes that true - it puts the 8px side padding inside
     the basis. Without it (every round up to 20) the pair needed
     384px of a 358px row at 390 and stacked one per row. */
  #nav-wrapper{position:relative;z-index:20}
  #nav-wrapper .dropdown{box-sizing:border-box;flex:1 1 calc(50% - 8px);text-align:center;padding:11px 8px}
  /* The panel is measured off the bar, not off the button, and
     drops below the WHOLE bar rather than from just under the
     button it belongs to - otherwise the Speaker panel opens
     level with Topic and the two fight over the same pixels.
     position:static hands the panel to #nav-wrapper as its
     containing block; top:100% puts it under the bar; and it
     needs its own z-index, because making .dropdown static took
     away the z-index:20 the panel used to inherit from it. */
  #nav-wrapper .dropdown{position:static}
  #nav-wrapper .dropdown ul,
  #nav-wrapper .dropdown:last-of-type ul{top:100%;left:16px;right:16px;width:auto;
    z-index:5;padding:0;box-shadow:0 10px 18px rgba(10,50,71,.3)}
  /* the open control turns navy, so it is clear which list is which */
  #nav-wrapper .dropdown.open{background:#0A3247}
  #content{padding-top:18px;padding-bottom:18px}
  #content h1{font-size:22px;line-height:27px}
  /* FOOTER on a phone: same stack, tighter, and the menu links get
     a 40px row so nine of them are still comfortably tappable. */
  #social-footer{padding:18px var(--fs-gutter) 20px}
  #nav-footer #menu-footer{gap:0 18px;font-size:13.5px;padding:8px 0}
  #nav-footer #menu-footer li a{padding:9px 0}
  #copyright{gap:0 18px;font-size:13.5px}
  #copyright li a{padding:8px 0}
  #copyright li:first-child{font-size:12.5px;margin-top:4px}
  /* PROFILE ------------------------------------------------- */
  /* Below 500 the rail and the body cannot both hold a column, so
     the masthead becomes one centred card. The rail, the body and
     both link groups go display:contents, which dissolves the two
     column boxes and leaves every piece as a direct child of the
     one wrapping row. That is what lets the Website button come
     down out of the rail and share the last line with LinkedIn
     and Facebook - they are in different parents in the HTML and
     could not otherwise meet. Order puts them last; within the
     same order value the HTML decides, so Website leads. */
  .fsc-mast-grid{display:flex;flex-flow:row wrap;justify-content:center;
    align-items:center;column-gap:10px;row-gap:0;text-align:center}
  .fsc-mast-rail,.fsc-mast-body,.fsc-mast-links,.fsc-mast-social{display:contents}
  img.fsc-mast-photo{order:1;flex:0 0 auto;width:150px;height:150px}
  /* An empty full-width item, purely to end the photo's line. A
     flex item cannot both claim a whole line and still shrink to
     its content, so the category pill below cannot force the
     break itself without stretching into a full-width bar. */
  .fsc-mast-grid::before{content:"";order:2;flex:0 0 100%;height:0}
  .fsc-mast-pill{order:3;flex:0 0 auto;margin-top:12px}
  .fsc-mast-name{order:4;flex:0 0 100%;margin-top:14px;font-size:24px;line-height:30px}
  .fsc-mast-byline{order:5;flex:0 0 100%}
  .fsc-mast-kicker{order:6;flex:0 0 100%}
  .fsc-speaker-crumbs{order:7;flex:0 0 100%;display:flex;flex-wrap:wrap;
    justify-content:center;margin-top:8px}
  .fsc-mast-facts{order:8;flex:0 0 100%;justify-content:center;gap:14px 26px;margin-top:18px}
  .fsc-mast-link{order:9;flex:0 0 auto;margin-top:16px}
  .fsc-speaker-h2{font-size:19px}
  .fsc-profile-topic{padding:18px 16px}
  .fsc-profile-topic h3{font-size:17px}
  /* The primary action on the page gets the full width. Written
     as the full selector, not the bare class: the theme styles
     it as .fsc-profile-topic-foot a.fsc-topic-btn, and a one
     class rule would lose to it. */
  .fsc-profile-topic-foot a.fsc-topic-btn{display:block;text-align:center}
  /* ARCHIVES -------------------------------------------------- */
  /* Speaker card: the profile page's masthead in miniature. The
     headshot on its own row, centred, at the topic card's 120px;
     the name and the title and company centred under it; then the
     bio, the talks and the button at full width. The bio and the
     talk list stay left-aligned - centred body text and a centred
     list are both hard to read. */
  .speaker-archive .speaker-row{display:grid;grid-template-columns:minmax(0,1fr);
    gap:0;padding:16px}
  /* The headshot and the button live in the rail, the name and
     everything else in the body. Dissolving both lets the button go
     to the bottom while the headshot stays at the top. */
  .speaker-archive .speaker-row-rail,.speaker-archive .speaker-row-body{display:contents}
  /* The photo link is always the rail's first child, so that is how
     it is picked. Round 14 used :not(.speaker-row-cta), which also
     matched the category pill that the all-speakers page and search
     print in the same rail: two items in row 1 of a one-column
     grid, so the pill got a column of its own and squeezed the name,
     bio and button into 153px. The category pages print no pill,
     which is why it never showed there. */
  .speaker-archive .speaker-row-rail > a:first-child{grid-row:1;justify-self:center}
  .speaker-archive .speaker-row-rail img{width:120px;height:120px}
  /* The pill goes under the photo, as on the profile. Where there is
     no pill, row 2 is empty and takes no room. */
  .speaker-archive .speaker-row-category{grid-row:2;justify-self:center;margin-top:12px}
  .speaker-archive .speaker-row-body > h2{grid-row:3;text-align:center;margin:14px 0 2px;font-size:19px}
  .speaker-archive .speaker-row-role{grid-row:4;text-align:center;margin:0}
  .speaker-archive .speaker-row-bio{grid-row:5;margin:14px 0 0}
  .speaker-archive .speaker-row-topics{grid-row:6;margin-top:12px}
  .speaker-archive .speaker-row-cta{grid-row:7;width:auto;margin-top:14px}
  /* Topic card: the 559px rules already stack and centre it. The
     one phone change: the request button stretches to fill its
     row instead of sitting at the right. */
  .topic-archive .topic-row{padding:16px}
  .topic-archive .topic-row-body h3{font-size:16px}
  .topic-archive .topic-row-btn{flex:1 1 100%;margin-left:0;margin-right:0;text-align:center}
  .speaker-cats h2,.topic-cats h2{font-size:17px}
  /* HOMEPAGE ---------------------------------------------------- */
  #home-news .news-card{flex-basis:100%}
  #home-featured-topics .topic-row{padding:16px}
  #home-featured-topics .topic-row-btn{flex:1 1 100%;margin-left:0;margin-right:0;text-align:center}
  /* The two intro buttons centre. They sit side by side as a
     centred pair until about 470px (231 + 193 + a 14px gap), then
     stack, each centred. */
  #home-intro-cta .home-cta-row{justify-content:center}
  /* Elite speakers go to one card a row at the size they are on
     an iPad at 768 - 338px - instead of shrinking two across to
     164px on an iPhone. Centred; max-width lets it give on a
     screen narrower than 370px rather than overflow. */
  #featured-speakers-home .featured-speaker-tile{flex:0 0 338px;max-width:100%}
  /* On a phone both sets of homepage headshots go to 150px, matched
     (Andy asked for them much larger on his iPhone). 150 is the size
     the profile page's own headshot is on a phone, the biggest on the
     site, and the homepage should not show a speaker larger than their
     own profile does. It is 44% of the one-a-row Elite card above,
     about the proportion the profile has.

     Here, not in the 559 block with the topic card's 100px: between
     500 and 559 the Elite cards are still two to a row, 204-233px
     wide, and a 150px photo would fill up to 74% of one with 6px to
     spare each side. So both stay 100px and matched there, and both
     step up together at this width, where the Elite cards go to one a
     row. The photo files already sent (352px for the topics, 400px
     for Elite) are large enough for 150px. */
  #featured-speakers-home .featured-speaker-image img{width:150px;height:150px}
  #home-featured-topics .topic-row-speaker img{width:150px;height:150px}
  /* The news card is full width here, so the logo centres in it. */
  #home-news .news-card-logo{justify-content:center}
  /* TOPIC PAGE ------------------------------------------------ */
  .fsc-topic-page .fsc-topic-title{font-size:24px;line-height:30px}
  /* The request box: a full-width button and the note centred
     under it. The selectors name the <a> because the theme styles
     the button as a.fsc-topic-btn, which a bare class would lose to. */
  .fsc-topic-page .fsc-topic-cta{flex-direction:column;align-items:stretch;gap:12px;padding:18px 16px}
  .fsc-topic-page .fsc-topic-cta a.fsc-topic-btn{display:block;text-align:center}
  .fsc-topic-page .fsc-topic-cta p{flex:none;text-align:center}
  .fsc-topic-page .fsc-topic-row{padding:16px}
  .fsc-topic-page .fsc-topic-row a.fsc-topic-btn{flex:1 1 100%;margin:0;text-align:center}
  /* REQUEST FORM AND THANK-YOU PAGE ---------------------------- */
  .fsc-request-intro .fsc-topic-title{font-size:24px;line-height:30px}
  /* Both white cards keep their card, with the 16px inset every
     other card has on a phone. The form fields then run about
     324px wide on an iPhone. */
  .fsc-thanks-card{padding:26px 16px 28px}
  .fsc-thanks-card h1{font-size:22px;line-height:27px}
  .fsc-thanks-tips{padding:18px 16px 20px}
  .fsc-free-note{padding:14px 16px}
  /* The primary action takes the full width, as it does on every
     other page. The full selector, because the theme styles the
     button with it and anything shorter loses. */
  .fsc-thanks-card--form form#request-speech-wm input[type="submit"]{display:block;width:100%}
  /* Google's robot check is a fixed 304px box. Centred over the
     centred button rather than left over a full-width one. A flex
     row centres it even when it is wider than the column. */
  .g-recaptcha{display:flex;justify-content:center}
  /* SEARCH RESULTS ----------------------------------------------- */
  /* The count drops under its heading rather than squeezing the
     heading onto two lines. */
  .search-group-head{flex-wrap:wrap;row-gap:2px}
  /* The divider label centres between two short rules and wraps to
     a second centred line when it has to, instead of the rules
     shrinking to nothing beside a left-aligned label. */
  .search-divider{font-size:11px;text-align:center}
  .search-divider:before,.search-divider:after{flex:1 0 12px}
  /* No results: the card takes the 16px phone inset every card has. */
  .search-empty-card{padding:22px 16px}
  .search-empty-card h2{font-size:19px}
  /* GENERAL PAGES ------------------------------------------------ */
  /* Photos stop floating: each one centres on its own line, at up
     to the full width, with the text below it. */
  #content-feature .alignleft,#content-feature .alignright{float:none;max-width:100%;
    margin:8px auto 16px;padding:0}
  #content-feature figure.alignleft,#content-feature figure.alignright{display:table}
  #content-feature img.alignleft,#content-feature img.alignright{display:block}
  /* Lists keep a readable indent rather than the desktop 40px. */
  section#content-feature ul,#content-feature ol{margin-left:22px}
  /* The editor sets its headings' size inline (24px on About Us),
     which would make them bigger than the 22px page title on a
     phone. Only an !important can reach an inline size. */
  #content-feature>h2{font-size:20px !important;line-height:1.3}
  /* ...except the How It Works heading that stands in for a second
     title, which takes the page title's phone size. */
  .page-template-page_how_it_works #content-feature>h2{font-size:22px !important;line-height:27px}
  /* TEXT SIZE ------------------------------------------------- */
  /* Andy, on an iPhone: "the text looks small". The responsive pass
     reflowed every page but never enlarged its text, so a phone was
     reading the desktop sizes: 15px for the bios and descriptions on
     the profile, the topic page and the request form, 13.5px on the
     list and homepage cards, 13px for the Elite bios. 16px is the
     usual size for body text on a phone (Google's guidance; Apple's
     own is 17), and it is what the About and FAQ pages already use,
     so on a phone every page now reads at one body size. Desktop is
     untouched.
     The card previews are cut to two or three lines (line-clamp), so
     at 16px they keep their height and show about a sixth fewer
     words. Measured: pages grow 0-4%, nothing overflows. The
     containers are sized rather than their paragraphs, because the
     paragraphs only inherit here. */
  /* .fsc-request-excerpt p is the talk description on the request
     form - its lead paragraphs, the inline one that ends at "Read
     More", and the ones behind it - which has its own 15px rule. On
     that page .fsc-topic-body is only the two intro lines above it. */
  .fsc-about-bio,.fsc-profile-topic-body,.fsc-topic-body p,.fsc-request-excerpt p{font-size:16px;line-height:1.6}
  .speaker-row-bio,.topic-row-excerpt,.fsc-topic-row-excerpt,.featured-speaker-excerpt{font-size:16px;line-height:1.5}
  /* The lines that support them - job titles, the role under a
     byline, the cost note under the request button, the request
     form's "Read More" - come up from 12.5-13.5px to 14px. The byline
     is set on its container so the role and its separators follow,
     while the speaker's name in it keeps its own 15px rule. The
     category pills are labels and stay as they are. */
  .speaker-row-role,.featured-speaker-tile h4,.topic-row-byline,.fsc-topic-cta p,
  .fsc-request-more>summary{font-size:14px}
  /* The Elite job title's fixed 17px line would crowd 14px text when a
     long title ("Keynote Speaker - Emcee - Fractional CMO...") wraps. */
  .featured-speaker-tile h4{line-height:1.35}
}

/* -- Robot check only: below 370px it no longer fits ----------- */
/* A fifth width, and like 559 it belongs to one component, not the
   site. 304px of widget + 2 x 16px card padding + 2px of border +
   2 x 16px gutter = 370. Below that the box is scaled, which is
   visual only: the check itself, and what a bot has to do to pass
   it, are untouched. 83% is what fits a 320px screen. */
@media (max-width:369px){
  .g-recaptcha > div{transform:scale(.83);transform-origin:50% 0;margin-bottom:-13px}
}

/* -- one live bug this page turned up, fixed at every width -- */
/* .fsc-speaker-note always carries a top border, but on a profile
   with no review it is the only thing in the closing band, so the
   border draws a rule across the page with nothing above it to
   separate. Only 14 of the network's 85 Elite speakers have a
   review, so this is what most of the 448 profiles show today. */
.fsc-speaker-close .wrap > .fsc-speaker-note:first-child{
  margin-top:0;padding-top:0;border-top:0}

/* -- the three menus, opened by tap ------------------------- */
/* Speaker, Topic and Change Location open on :hover only, which is a
   coin flip on any touchscreen. The theme JS adds .open on tap, gated
   on (hover: hover) so a mouse still gets the hover behaviour and the
   words stay ordinary links on desktop. These two rules are the CSS
   half of that and deliberately sit OUTSIDE every media query: the
   condition is the input device, not the width - an iPad in landscape
   is a 1024px screen with no hover.

   They live here rather than in free_speakers_theme.css because that
   file ships minified and is what the page actually loads, so a rule
   added to the readable copy alone would never reach a visitor. Both
   beat the base display:none on specificity, so their position in the
   cascade does not matter. */
.region-selector .region-toggle.open ul{display:block}
#nav-wrapper .dropdown.open ul{display:block}

/* ==========================================================
   BECOME A SPEAKER: figures band, membership plans, steps
   ========================================================== */
/* Andy, 2026-10-19, from three preview rounds. The markup comes from
   includes/become-a-speaker.php. The band is the homepage's proof band
   (its rules above carry #speaker-proof-band too); the table is the old
   join grid's look (blue headers, navy Elite column, Best Value badge)
   rebuilt from the page's current copy; on phones it becomes three
   cards. Sits before the Dynamic Type block, which sizes some of it on
   iPhones. */

/* The band's line about who requests speakers is a sentence to read,
   not a label: the page's own 16px and full white, where the homepage
   band's short line is 13.5px at 85% (Andy, 2026-10-19: hard to read,
   white on blue). 48em is what holds it to two lines (Andy asked):
   it is 1,315px on one line, so 42em made three; two from 1280 down to
   768. Then the jumps that land on the page's own headings; 205px
   clears the sticky header, as on the profile. */
#speaker-proof-band .proof-cta p.fs-proof-groups{max-width:48em;margin:0 auto 20px;font-size:16px;line-height:1.55;color:#fff;text-wrap:balance}
#content-feature #membership,#content-feature #apply{scroll-margin-top:205px}

/* -- the table --------------------------------------------- */
#content-feature .fs-plans-table-wrap{margin:26px 0 34px}
table.fs-plans-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:14.5px;color:#3c4854}
.fs-plans-table col.c-label{width:36%}
.fs-plans-table thead th{position:relative;background:#198dc4;color:#fff;font-size:17px;font-weight:700;text-align:center;padding:12px 8px;border:2px solid #fff;border-bottom:0;border-radius:15px 15px 0 0}
.fs-plans-table thead th.c-label{background:#fff;color:#0D3246;text-align:left;padding-left:0;font-size:15px;vertical-align:bottom}
.fs-plans-table thead th.elite{background:#0D3246}
.fs-plans-table thead .fs-best{position:absolute;top:-22px;right:-6px;width:62px;height:auto;z-index:1}
.fs-plans-table td,.fs-plans-table tbody th{border:1px solid #ECF3F9;border-width:0 2px 2px 0;padding:10px 12px;vertical-align:middle;line-height:1.45}
.fs-plans-table tbody th{text-align:left;font-weight:600;color:#1d2b35;border-left:2px solid #ECF3F9}
.fs-plans-table td{text-align:center}
.fs-plans-table tr.zebra td,.fs-plans-table tr.zebra th{background:#ECF3F9}
.fs-plans-table td.elite{background:#0D3246;color:#fff;border-color:rgba(255,255,255,.08)}
.fs-plans-table tr.zebra td.elite{background:#123e56}
.fs-plans-table tr.sub th{background:#198dc4;color:#fff;font-size:15.5px;font-weight:700;padding:9px 12px;border:0;border-top:2px solid #fff}
.fs-plans-table td.c-label{border:0;background:#fff}
.fs-yes{color:#00B200;font-weight:700;font-size:19px;line-height:1}
td.elite .fs-yes{color:#35d235}
.fs-plan-num{font-weight:700;font-size:15px}
.fs-plan-note{display:block;font-size:12px;color:rgba(255,255,255,.8);margin-top:3px}
.fs-plans-table tr.buy td{padding:16px 8px 18px}
.fs-plans-table tr.buy-foot td.elite{border-radius:0 0 15px 15px}
.fs-plan-price{display:block;font-size:23px;font-weight:700;line-height:1.1;color:#198dc4;font-variant-numeric:tabular-nums}
.fs-plan-per{display:block;font-size:13px;font-weight:600;color:#5d6d7a;margin:2px 0 11px}
td.elite .fs-plan-price{color:#fff}
td.elite .fs-plan-per{color:rgba(255,255,255,.8)}
#content-feature a.fs-join{display:inline-block;background:#198dc4;color:#fff;font-size:15px;font-weight:700;padding:8px 22px;border-radius:5px;text-decoration:none;transition:background-color .3s}
#content-feature a.fs-join:hover,#content-feature a.fs-join:focus-visible{background:#ff8000;color:#fff}
#content-feature td.elite a.fs-join,#content-feature .fs-plan-card.elite a.fs-join{background:#ff8000}
#content-feature td.elite a.fs-join:hover,#content-feature .fs-plan-card.elite a.fs-join:hover{background:#fff;color:#0D3246}
#content-feature a.fs-join:focus-visible{outline:3px solid #0D3246;outline-offset:2px}

/* -- the cards, phones only (see 559 below) ----------------- */
.fs-plans-cards{display:none}
.fs-plan-card{border:2px solid #ECF3F9;border-radius:15px;overflow:hidden;background:#fff;color:#3c4854}
.fs-plan-card-head{position:relative;background:#198dc4;color:#fff;padding:14px 18px 13px}
#content-feature .fs-plan-card-head h4{margin:0;font-size:19px;line-height:1.2;color:#fff}
#content-feature .fs-plan-card-head p{margin:2px 0 0;color:rgba(255,255,255,.88);font-size:14px;line-height:1.3}
.fs-plan-card-price{font-size:24px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.fs-plan-card .fs-best{position:absolute;top:10px;right:12px;width:62px;height:auto}
#content-feature .fs-plan-card ul{list-style:none;margin:0;padding:12px 18px 4px}
#content-feature .fs-plan-card li{position:relative;padding:6px 0 6px 1.6em;margin:0;line-height:1.45}
/* em-sized, so the tick grows with the text on an iPhone set to large type */
#content-feature .fs-plan-card li::before{content:"\2713";position:absolute;left:0;top:.3em;color:#00B200;font-weight:700;font-size:1.06em}
#content-feature .fs-plan-card li.fs-plus{padding-left:0;font-weight:700;color:#1d2b35}
#content-feature .fs-plan-card li.fs-plus::before{content:none}
#content-feature .fs-plan-card a.fs-join{display:block;text-align:center;margin:10px 18px 18px;padding:12px}
.fs-plan-card.elite{background:#0D3246;border-color:#0D3246;color:#fff}
.fs-plan-card.elite .fs-plan-card-head{background:#0D3246;border-bottom:1px solid rgba(255,255,255,.14)}
#content-feature .fs-plan-card.elite li,#content-feature .fs-plan-card.elite li.fs-plus{color:#fff}
#content-feature .fs-plan-card.elite li::before{color:#35d235}

/* -- how joining works --------------------------------------- */
#content-feature ol.fs-join-steps{list-style:none;margin:14px 0 34px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
#content-feature ol.fs-join-steps li{display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:14px;align-content:start;margin:0;padding:0}
.fs-step-num{grid-row:span 2;width:46px;height:46px;border-radius:50%;background:#198dc4;color:#fff;font-size:21px;font-weight:700;display:flex;align-items:center;justify-content:center}
#content-feature ol.fs-join-steps h4{margin:3px 0 4px;font-size:17px;line-height:1.3;color:#0D3246}
#content-feature ol.fs-join-steps p{margin:0;font-size:15px;line-height:1.55}

/* -- "You chose ...", added above the form by become-speaker.js -- */
#content-feature .fs-plan-chosen{background:#ECF3F9;border-radius:6px;padding:12px 16px;margin:6px 0 18px;color:#1d2b35;line-height:1.5}

/* The site's own widths, plus 759, which belongs to the table alone
   (like 369 to the robot check): below it the four columns need
   smaller type and slimmer buttons to keep "$149.99" on one line. */
@media (max-width:899px){
  #content-feature #membership,#content-feature #apply{scroll-margin-top:16px}
  #content-feature ol.fs-join-steps{grid-template-columns:minmax(0,1fr);gap:18px}
  table.fs-plans-table{font-size:14px}
  .fs-plans-table col.c-label{width:34%}
}
@media (max-width:759px){
  table.fs-plans-table{font-size:13.5px}
  .fs-plans-table td,.fs-plans-table tbody th{padding:8px}
  .fs-plans-table thead th{font-size:15.5px;padding:10px 4px}
  .fs-plan-price{font-size:19px}
  #content-feature a.fs-join{padding:7px 12px;font-size:14px}
  .fs-plans-table thead .fs-best{width:52px;top:-19px;right:-4px}
}
/* Four columns at 402px would be about 90px each, and a table that
   scrolls sideways hides Elite: the cards take over where the site's
   other cards stack. */
@media (max-width:559px){
  #content-feature .fs-plans-table-wrap{display:none}
  .fs-plans-cards{display:grid;gap:22px;margin:22px 0 32px}
}

/* ==========================================================
   DYNAMIC TYPE: iPhones follow the reader's own text size
   ========================================================== */
/* Andy, 2026-09-21. An iPhone owner chooses a text size in Settings >
   Display & Brightness > Text Size. Apps follow it; websites do not
   unless they ask. This asks. On an iPhone at phone width, reading
   text takes its size from that setting:

     the smaller stops     14-16px
     standard (default)    17px, Apple's own body size
     the largest stop      23px
     accessibility sizes   stops at 28px, so the pages still lay out

   How: "font: -apple-system-body" on the root makes 1rem the reader's
   chosen body size, and everything below is written against it.

   Scoped twice, on purpose.
   - iOS only. -webkit-touch-callout exists only on iPhone and iPad.
     On a Mac, Safari maps -apple-system-body to the Mac's small system
     size, which would SHRINK the site; this keeps it off desktops.
     Android has no -apple-system-body at all, so it is untouched too.
   - Phone widths only (499 and below), so the desktop layout an iPad
     shows is unchanged, like every other rule in this file.
   A phone turned sideways is wider than 499 and uses the tablet
   layout, at its fixed sizes, as it does today.

   What follows the setting: reading text, the lines that support it,
   and titles. What stays fixed, because these are the parts that break
   when text gets very large: the header and menus, the footer, every
   button, the category pills and small capital labels, the big stat
   numbers, the slide caption, breadcrumbs, paging and form fields.

   Nothing in the theme used rem before this, so switching the root
   size moves only what is written here. body is pinned at the 16px it
   already had, so text that merely inherits stays exactly as it was
   unless a rule below asks it to follow. */
@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
@media (max-width:499px){
  /* DT-ROOT - the one line that reads the setting. The shorthand also
     sets the family, weight and line height; they are put back, or its
     line height would be inherited by everything on the page. */
  html{font:-apple-system-body;font-family:"Open Sans",Helvetica,Arial,sans-serif;font-weight:400;line-height:normal}
  /* /DT-ROOT */
  body{font-size:16px}

  /* The reader's body size, capped at 28px, and how far it sits from
     the standard 17px: 0 at the standard setting, +6px at the largest
     stop, +11px at the cap, negative for the smaller stops. */
  :root{--fs-body:min(1rem,28px);--fs-grow:calc(var(--fs-body) - 17px)}

  /* READING TEXT: the reader's size itself. */
  .fsc-about-bio,.fsc-profile-topic-body,.fsc-topic-body p,.fsc-request-excerpt p,
  .speaker-row-bio,.topic-row-excerpt,.fsc-topic-row-excerpt,.featured-speaker-excerpt,
  #content-feature,
  #home-intro-cta .intro-copy p,
  .archive-intro .intro-copy p,
  .steps-card ol,
  .testimonial-body,
  .news-card h3,
  .fsc-mast-byline,
  .fsc-thanks-copy,
  .fsc-thanks-tips li{font-size:var(--fs-body)}

  /* SUPPORTING LINES - job titles, bylines, notes, section intros,
     form labels: seven eighths of it (about 15px at the standard
     setting, where they are 14-15px today). */
  .speaker-row-role,.featured-speaker-tile h4,.topic-row-byline,.topic-row-byline a,
  .fsc-topic-cta p,.fsc-request-more>summary,
  .speaker-row-topics li a,
  .section-head p,
  .browse-cats-note,
  .fsc-speaker-note p,
  .fsc-topic-about p,.fsc-topic-about-link,
  .fsc-free-note p,
  .fsc-mast-kicker,
  .search-empty-card p,.search-empty-card ul,
  .fsc-thanks-share p,
  .fsc-thanks-card--form form#request-speech-wm,
  .fsc-thanks-card--form form#request-speech-wm label{font-size:calc(var(--fs-body) * .875)}

  /* SMALL TEXT - attributions, counts, hints, "more" links: four
     fifths (about 13.6px at the standard setting, 12.5-13.5px today). */
  .speaker-row-more,.testimonial-attribution,.news-card-more,.topic-more-count,
  .archive-intro .intro-copy p.search-hint,
  .steps-card em,
  .fsc-speaker-steps,
  .proof-label,.proof-cta p,
  .home-search-examples,.home-search-examples a,
  .search-group-head span,
  .fsc-thanks-card--form form#request-speech-wm small,
  .fsc-thanks-card--form form#request-speech-wm > small:last-child{font-size:calc(var(--fs-body) * .8)}

  /* TITLES start from their size at the standard setting and grow
     with the reader's. Card titles and speaker names start at 19px,
     2px above the 17px text under them; several were 16-18px, which
     would sit below or level with 17px body text. */
  .topic-row-body h3,.topic-archive .topic-row-body h3,.fsc-topic-row-body h3,
  .featured-speaker-tile h3,
  .speaker-archive .speaker-row-body > h2,
  .fsc-profile-topic h3,
  .search-empty-card h2,
  .speaker-cats h2,.topic-cats h2,
  #content-feature h3,
  .fsc-thanks-tips h2,.fsc-thanks-share h2{font-size:calc(19px + var(--fs-grow))}
  /* Subheads, 20px at the standard setting. Two of them are sized
     with !important upstream - a WordPress preset on the homepage
     line, and the rule that reaches the editor's inline size on the
     general pages - so these must be too. */
  .steps-card h4{font-size:calc(20px + var(--fs-grow))}
  #home-intro-cta .intro-copy h2{font-size:calc(20px + var(--fs-grow)) !important}
  #content-feature>h2{font-size:calc(20px + var(--fs-grow)) !important}
  /* Section headings on the profile and the topic page, 21px - above
     the talk titles under them, which now start at 19. */
  .fsc-speaker-h2,.fsc-topic-more h2{font-size:calc(21px + var(--fs-grow))}
  /* Page titles grow three quarters as fast, and the big display
     headings half as fast: large type needs less help, and it is the
     same thing Apple's own heading styles do. */
  #content h1,.fsc-thanks-card h1{font-size:calc(22px + var(--fs-grow) * .75)}
  .page-template-page_how_it_works #content-feature>h2{font-size:calc(22px + var(--fs-grow) * .75) !important}
  .fsc-request-intro .fsc-topic-title,.fsc-mast-name,.fsc-request-heading,
  .search-group-head h2{font-size:calc(24px + var(--fs-grow) * .75)}
  .proof-headline{font-size:calc(26px + var(--fs-grow) * .5)}
  .section-head h2,#featured-speakers-home h2{font-size:calc(28px + var(--fs-grow) * .5)}
  .archive-intro .intro-copy h1,#home-closing-cta h2{font-size:calc(30px + var(--fs-grow) * .5)}
  #home-intro-cta .intro-copy h1{font-size:calc(34px + var(--fs-grow) * .5)}

  /* LINE SPACING. These had their line height fixed in px, so as the
     text grew the lines would crowd and then overlap: at the 28px cap
     several fell below a line height of 1, meaning touching lines. Each
     becomes a ratio equal to today's, so at the standard setting the
     spacing is unchanged and above it the spacing grows with the text. */
  .steps-card ol{line-height:1.47}
  .steps-card em,.archive-intro .intro-copy p.search-hint,.home-search-examples a{line-height:1.38}
  .featured-speaker-tile h3{line-height:1.2}
  #content h1,.fsc-thanks-card h1,.page-template-page_how_it_works #content-feature>h2,
  .fsc-mast-name,.fsc-request-intro .fsc-topic-title,.fsc-request-heading{line-height:1.25}
  .browse-cats-note,.archive-intro .intro-copy p,.search-empty-card p,
  .fsc-thanks-copy,.fsc-thanks-tips li{line-height:1.6}
  .fsc-speaker-steps{line-height:1.63}
  .fsc-speaker-note p,.fsc-topic-about p{line-height:1.5}
  .fsc-free-note p{line-height:1.47}
  .fsc-thanks-tips h2{line-height:1.41}

  /* BECOME A SPEAKER (2026-10-19). The card lists and the "You chose"
     line already follow, because they inherit #content-feature's size;
     these are the pieces that set their own. Plan names and step titles
     are titles (19px at the standard setting), step text is reading
     text, "per year" a supporting line, the card price a display figure.
     Join Now stays fixed, like every button. */
  #content-feature .fs-plan-card-head h4,
  #content-feature ol.fs-join-steps h4{font-size:calc(19px + var(--fs-grow))}
  #content-feature ol.fs-join-steps p,
  #speaker-proof-band .proof-cta p.fs-proof-groups,
  #home-closing-cta p{font-size:var(--fs-body)}
  #content-feature .fs-plan-card-head p{font-size:calc(var(--fs-body) * .875)}
  .fs-plan-card-price{font-size:calc(24px + var(--fs-grow) * .5)}

  /* NEWS ROOM AND SPEAKER RESOURCES (2026-10-20). The story cards set
     their own sizes, so they would not follow the setting otherwise.
     Headline a title, summary reading text, date and "Read the story"
     small text. Selectors match the base rules' specificity so these,
     being later, win. The back link stays fixed, like breadcrumbs. */
  #content-feature .story-row h2{font-size:calc(19px + var(--fs-grow))}
  #content-feature .story-row-summary{font-size:var(--fs-body)}
  #content-feature .story-row-date,#content-feature .story-row-more{font-size:calc(var(--fs-body) * .8)}
}
}

/* =====================================================================
   FREESPEAKERS.ORG, THE NETWORK ROOT (2026-10-21)
   The landing page (city picker, map, suggestion), the two virtual
   lists' additions to the bureau cards, Questions Groups Ask and the
   location menu's two new entries.
   Designed in the round 1-8 mockups. Every rule is either a new rd-
   class or scoped to the root's templates, so the bureaus gain only
   the menu divider.
   ===================================================================== */

/* Landing hero: heading, nearest-city suggestion, then the map and the list.
   The paragraph runs the full width, like every other paragraph on the
   site (Andy, 2026-09-18: "its ok to be long"). The H1 keeps the site's
   orange, like the bureau homepages' (Andy, 2026-10-22). */
.rd-hero { padding: 36px 0 44px; }
.rd-hero-head { max-width: none; }
.rd-hero-head h1 { font-size: 34px; font-weight: 600; line-height: 1.15; margin: 0 0 12px; text-wrap: balance; }
.rd-hero-head p { font-size: 16px; line-height: 1.6; color: #4b5768; margin: 0; }
.rd-suggest { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin: 22px 0 0; padding: 14px 18px; background: #fff5ea; border: 1px solid #ffd3a8; border-radius: 12px; }
.rd-suggest[hidden] { display: none; }
.rd-suggest > svg { flex: none; color: #e46f00; }
.rd-suggest p { flex: 1 1 300px; min-width: 0; margin: 0; font-size: 15px; line-height: 1.45; color: #3c4854; }
.rd-suggest p b { display: block; color: #0A3247; font-size: 16px; }
.rd-suggest p span { display: block; font-size: 13px; color: #5f6b77; }
.rd-suggest .home-btn { flex: none; }
.rd-picker { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 36px; align-items: center; margin-top: 26px; }
.rd-map { margin: 0; min-width: 0; }
.rd-map > svg { display: block; width: 100%; height: auto; overflow: visible; }
.rd-states path { fill: #d9e7ef; stroke: #fff; stroke-width: 1.3; stroke-linejoin: round; }
.rd-dot { cursor: pointer; outline: none; }
.rd-dot-hit { fill: transparent; }
.rd-dot-core { fill: #ff8000; stroke: #fff; stroke-width: 3.5; transition: fill .2s; }
.rd-dot-pulse { fill: #ff8000; opacity: 0; transform-box: fill-box; transform-origin: center; }
.rd-dot-label { font: 700 22px "Open Sans", Helvetica, Arial, sans-serif; fill: #0A3247; paint-order: stroke; stroke: #fff; stroke-width: 6px; stroke-linejoin: round; }
.rd-dot:hover .rd-dot-core, .rd-dot:focus-visible .rd-dot-core, .rd-dot.is-hot .rd-dot-core { fill: #0A3247; }
.rd-dot:hover .rd-dot-label, .rd-dot:focus-visible .rd-dot-label, .rd-dot.is-hot .rd-dot-label { fill: #198dc4; }
.rd-dot:focus-visible .rd-dot-hit { stroke: #198dc4; stroke-width: 3; }
.rd-dot.is-suggested .rd-dot-pulse { animation: rd-pulse 2.2s ease-out infinite; }
@keyframes rd-pulse { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
@media (prefers-reduced-motion: reduce) { .rd-dot.is-suggested .rd-dot-pulse { animation: none; opacity: .28; transform: scale(2); } }
.rd-map figcaption { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; font-size: 13px; color: #5b6773; }
.rd-map figcaption svg { color: #198dc4; flex: none; }
.rd-cities { min-width: 0; }
.rd-cities h2 { font-size: 19px; font-weight: 700; color: #0A3247; margin: 0 0 8px; }
.rd-city-list { list-style: none; margin: 0; padding: 0; }
.rd-city { display: flex; align-items: center; gap: 12px; min-height: 48px; box-sizing: border-box; padding: 8px 6px; border-bottom: 1px solid #e3ebf0; color: #0A3247; text-decoration: none; }
.rd-city-mark { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #ff8000; box-shadow: 0 0 0 3px #ffe2c4; margin: 0 2px; }
.rd-city-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.rd-city-text b { font-size: 16px; font-weight: 700; }
.rd-city-text i { font-style: normal; font-size: 13px; color: #5f6b77; }
.rd-city-go { flex: none; color: #198dc4; font-size: 24px; line-height: 1; }
.rd-city:hover, .rd-city:focus-visible, .rd-city.is-hot { background: #f2f7fa; }
.rd-city:hover b, .rd-city:focus-visible b, .rd-city.is-hot b { color: #198dc4; }
.rd-city--virtual { margin-top: 12px; border: 0; border-radius: 12px; background: #e8f1f7; padding: 10px 12px; }
.rd-city--virtual:hover, .rd-city--virtual:focus-visible { background: #d9eaf4; }
.rd-li-virtual + .rd-li-virtual .rd-city--virtual { margin-top: 6px; }
.rd-city-icon { flex: none; color: #198dc4; }

/* The virtual feature band reuses the homepage's Elite tiles. */
.rd-feature-sub { text-align: center; font-size: 15px; line-height: 1.5; color: #4b5768; max-width: 640px; margin: -12px auto 26px; }
.rd-where { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 0 0 10px; font-size: 12.5px; font-weight: 600; color: #4f6475; }
.rd-where svg, .speaker-row-where svg, .topic-row-where svg { flex: none; color: #ff8000; }
.page-template-page_root_home #featured-speakers-home .home-cta-row--center { display: flex; }
.news-card .rd-where { justify-content: flex-start; margin: 10px 0 12px; }
/* Questions groups ask: two columns of short answers, all open, so the
   text is on the page for readers and for AI crawlers alike. */
.rd-faq .rd-faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 44px; }
.rd-faq .rd-faq-item { padding: 18px 0; border-top: 1px solid #e3ebf0; min-width: 0; }
.rd-faq .rd-faq-item h3 { font-size: 18px; font-weight: 700; line-height: 1.3; color: #0A3247; margin: 0 0 6px; }
.rd-faq .rd-faq-item p { font-size: 15px; line-height: 1.6; color: #3c4854; margin: 0; }
@media (max-width: 759px) { .rd-faq .rd-faq-grid { grid-template-columns: minmax(0, 1fr); } }

/* The closing band's sentences run the full width on the root, not the
   bureau homepages' 720px: the speaker sentence names seven cities
   (Andy, 2026-10-21: root only). */
.page-template-page_root_home #home-closing-cta p { max-width: none; }
#home-closing-cta p.rd-join { margin-top: 12px; }

/* The one addition to both cards: the city line, under the speaker's name
   on a speaker card and under the byline on a presentation card. */
.speaker-row-where, .topic-row-where { display: flex; align-items: center; gap: 6px; margin: 2px 0 6px; font-size: 13px; font-weight: 600; color: #4f6475; }
.topic-row-where { margin: 6px 0 0; }

/* Virtual lists: the search box in the intro, and the root search's
   result line. */
.archive-intro .rd-vsearch { max-width: 560px; margin: 18px 0 0; }
.rd-results { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: #3c4854; }
.rd-results b { color: #0A3247; }
.rd-results a { color: #198dc4; font-weight: 600; }

/* Virtual lists: the in-person note under the 1, 2, 3 card, words only in
   quiet colours (Andy, 2026-10-22), and the city band at the foot of the
   page, a thin rule above it where it follows the white category band. */
.intro-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rd-inperson { background: #f5f8fa; border: 1px solid #e3ebf0; border-radius: 12px; padding: 16px 20px; }
.rd-inperson p { margin: 0; font-size: 14px; line-height: 1.5; color: #4b5768; }
.rd-inperson p b { display: block; margin: 0 0 2px; font-size: 15px; color: #0A3247; }
.rd-inperson a { color: #198dc4; font-weight: 600; }
.speaker-cats.rd-city-pills, .topic-cats.rd-city-pills { padding-top: 0; }
.rd-city-pills .wrap { border-top: 1px solid #e3ebf0; padding-top: 30px; }

/* Location menu on every bureau: the two new entries sit under a divider,
   in the same weight as the cities (Andy, 2026-10-21: not bold). */
.region-selector ul.region-dropdown li.rd-sep { border-top: 2px solid rgba(255, 255, 255, .6); }

@media (max-width: 899px) {
  .rd-picker { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .rd-city-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .rd-city-list li.rd-li-virtual { grid-column: 1 / -1; }
}
@media (max-width: 559px) {
  .rd-city-list { grid-template-columns: minmax(0, 1fr); }
  .rd-hero-head h1 { font-size: 28px; }
}
@media (max-width: 499px) {
  .rd-hero { padding: 24px 0 32px; }
  .rd-hero-head h1 { font-size: 26px; }
  .rd-suggest .home-btn { width: 100%; text-align: center; box-sizing: border-box; }
  .rd-dot-label { display: none; }
  .rd-dot-core { stroke-width: 4; }
  /* Phone speaker cards are a one-column grid with every child placed by
     row (the <=499 speaker card block above); the city line takes row 5,
     under the role, and the rows below it move down one. */
  .speaker-archive .rd-vlist .speaker-row-where { grid-row: 5; justify-self: center; justify-content: center; margin: 6px 0 0; }
  .speaker-archive .rd-vlist .speaker-row-bio { grid-row: 6; }
  .speaker-archive .rd-vlist .speaker-row-topics { grid-row: 7; }
  .speaker-archive .rd-vlist .speaker-row-cta { grid-row: 8; }
}
/* iPhone text size: the new text follows the reader's setting the same way
   the rest of the site does (the tiers in the DYNAMIC TYPE block). */
@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
  @media (max-width: 499px) {
    .rd-hero-head p, .rd-suggest p b, .rd-city-text b, .rd-results { font-size: var(--fs-body); }
    .rd-suggest p, .rd-feature-sub, .speaker-row-where, .topic-row-where, .rd-inperson p { font-size: calc(var(--fs-body) * .875); }
    .rd-inperson p b { font-size: var(--fs-body); }
    .rd-suggest p span, .rd-city-text i, .rd-where, .rd-map figcaption { font-size: calc(var(--fs-body) * .8); }
    .rd-cities h2, .rd-faq .rd-faq-item h3 { font-size: calc(19px + var(--fs-grow)); }
    .rd-faq .rd-faq-item p { font-size: var(--fs-body); }
    .rd-hero-head h1 { font-size: calc(26px + var(--fs-grow) * .5); }
  }
}