/*
 * nicolekolenda.com - the one stylesheet.
 *
 * Hand-written from the original theme's SCSS (kolenda-custom-theme/assets/scss)
 * plus the handful of layout rules Beaver Builder used to supply.
 *
 * Breakpoints (from _queries.scss): desktop nav from 1025px up; "tablet" is
 * <=1024px; "mobile" is <=768px (where columns stack); small phones <=480px.
 *
 * Page sections are <section class="row"> > .wrap > .cols > .col > modules.
 * Anything a single section needs that the rest do not (a background photo,
 * a column width, extra padding) is set on that element as a CSS custom
 * property in its style="" attribute; the rules below read them:
 *
 *   row:    --bg --img --pos --size --mh --mh-m --pad --pad-t --pad-m --mt --mt-t --mt-m --mb --mb-t
 *           --wrapw (content width, default 1100px) --color --hcolor (headings) --lcolor (links)
 *   col:    --w --w-t --maxw --bg --img --pos --mh --mh-m --pad --pad-t --pad-m --cm --cm-t (margin)
 *           --color --hcolor --lcolor
 *   module: --m --m-t --m-m (margin), --ta-t (text-align on tablet), --fs-t --fs-m (font size)
 *   photo:  --pw --pw-t (image width)
 */

/* ---------------------------------------------------------------- fonts */
@font-face { font-family: 'Libre Baskerville'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/libre-baskerville-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Libre Baskerville'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/libre-baskerville-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Libre Baskerville'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/libre-baskerville-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Libre Baskerville'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/libre-baskerville-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* podcast platform icons (the site's own IcoMoon set) */
@font-face { font-family: 'NicoleKolenda'; font-style: normal; font-weight: 400; font-display: block; src: url(fonts/nk-podcast-icons.woff) format('woff'); }

/* ---------------------------------------------------------------- tokens */
:root {
  --orange: #f05100;      /* $orange - theme */
  --orange-btn: #f04f0b;  /* Beaver Builder buttons and orange rows */
  --orange-form: #de5c28; /* form buttons */
  --black: #353535;       /* $black - body text */
  --ink: #1a1a1a;         /* footer text */
  --tan: #fff3e8;         /* $tan - page background */
  --yellow: #f0c56a;      /* $yellow */
  --purple: #600072;      /* NYU */
  --ease: cubic-bezier(.23, 1, .32, 1);
  --font: 'Libre Baskerville', serif;
}

/* ---------------------------------------------------------------- reset (theme _reset + _global) */
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, section, summary, time, mark, audio, video {
  margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
}
main, article, aside, details, figcaption, figure, footer, header, menu, nav, section { display: block; }
*, *::before, *::after { box-sizing: border-box; }
* { -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body { line-height: 1; margin: 0; font-family: var(--font); color: var(--black); background-color: var(--tan); }
::selection { background: #000; color: #fff; }
a { text-decoration: none; color: inherit; }
b, strong { font-weight: 700; }
dfn, em, i { font-style: italic; }
blockquote { margin: 30px; }
blockquote, q { quotes: none; }
hr { box-sizing: content-box; height: 0; border: 0; border-bottom: 2px solid var(--yellow); margin: 25px 0; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -.5em; }
sub { bottom: -.25em; }
dl, menu, ol, ul { margin: 25px; padding: 0; }
dd { margin: 0 0 0 20px; }
nav ul, nav ol { list-style: none; }
img { border: 0; max-width: 100%; height: auto; }
iframe { max-width: 100%; }
svg { display: block; max-width: 100%; height: auto; }
table { border-collapse: collapse; border-spacing: 0; empty-cells: show; border: 1px solid #cbcbcb; }
table td, table th { border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; padding: 6px 12px; }
table td:first-child, table th:first-child { border-left-width: 0; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; font-family: inherit; }
textarea { overflow: auto; vertical-align: top; }
:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 5000; background: var(--black); color: #fff; padding: 10px 15px; }
.skip-link:focus { left: 10px; top: 10px; }

/* ---------------------------------------------------------------- typography (theme _typography) */
h1, h2, h3, h4, h5, h6 { line-height: 2; margin: 0 0 20px; }
h1, h2, h3 { font-size: 24px; }
h4, h5, h6 { font-size: 16px; }
main p, main li { font-size: 16px; line-height: 2; letter-spacing: .28px; margin-bottom: 20px; }
main p:last-of-type, main li:last-of-type { margin-bottom: 0; }
main li { margin-bottom: 5px; }
main a { color: inherit; text-decoration: underline; transition: all .6s var(--ease); }
main a:hover, main a:focus { text-decoration: none; }
@media (max-width: 767px) { h1 br, h2 br, h3 br, h4 br, h5 br, h6 br { display: none; } }

/* old WordPress alignment classes that live in post content */
.aligncenter { margin: 15px auto; display: block; }
.alignleft { float: left; margin: 0 15px 15px 0; }
.alignright { float: right; margin: 0 0 15px 15px; }
@media (max-width: 1024px) { .alignleft, .alignright { float: none; margin: 15px auto; display: block; } }

/* ---------------------------------------------------------------- buttons */
.button {
  display: inline-block; padding: 10px 40px; font-size: 16px; line-height: 1.2; letter-spacing: 1.4px; text-transform: uppercase;
  text-align: center; text-decoration: none; cursor: pointer; user-select: none; -webkit-appearance: none;
  color: var(--orange); background-color: transparent; border: 1px solid var(--orange); transition: all .6s var(--ease);
}
.button:hover, .button:focus, .button:active { color: #fff; background-color: var(--orange); border-color: var(--orange); }

/* page buttons ("LEARN MORE", "LISTEN NOW!", ...). A variant class sets the look through custom
   properties; a one-off button sets the same properties in its style="" attribute. */
.btn {
  --btn-bg: #fafafa; --btn-c: #333; --btn-bd: 1px solid #ccc; --btn-r: 4px; --btn-tt: none; --btn-ls: normal;
  --btn-hbg: var(--btn-bg); --btn-hc: var(--btn-c); --btn-hbd: var(--btn-bd);
  display: inline-block; font-size: 16px; font-weight: 400; line-height: 18px; padding: 12px 24px; cursor: pointer;
  text-decoration: none !important; text-transform: var(--btn-tt); letter-spacing: var(--btn-ls);
  background: var(--btn-bg); color: var(--btn-c) !important; border: var(--btn-bd); border-radius: var(--btn-r);
}
.btn:hover, .btn:focus { background: var(--btn-hbg); color: var(--btn-hc) !important; border: var(--btn-hbd); }
.btn:active { position: relative; top: 1px; }
.btn-icon { display: inline-block; width: auto; height: 1.3em; margin-right: 8px; vertical-align: middle; fill: currentColor; }
.btn--orange { --btn-bg: var(--orange-btn); --btn-c: #fff; --btn-bd: 1px solid var(--yellow); --btn-r: 0; --btn-tt: uppercase; --btn-ls: 1.4px; --btn-hbg: rgba(240, 86, 20, .71); }
.btn--yellow { --btn-bg: var(--yellow); --btn-c: var(--black); --btn-bd: 0 none; --btn-r: 0; --btn-tt: uppercase; --btn-ls: 1.4px; --btn-hbg: var(--black); --btn-hc: var(--tan); }

/* ---------------------------------------------------------------- header (desktop, >=1025px) */
.site-header { background-color: var(--tan); position: relative; z-index: 10; }
.site-header .container { display: flex; align-items: center; max-width: 1300px; margin: 0 auto; padding: 0 15px; }
.brand { margin-right: auto; flex: 0 1 185px; }
.brand svg { display: block; width: 185px; margin: 10px 0; transition: all 1.5s var(--ease) .3s; transform-origin: 0 50%; }
.desktop-nav { flex: 0 0 auto; margin-left: auto; transition: all 1.5s var(--ease) .5s; }
.motion .brand svg { transform: scale(.95) translateX(-10px); opacity: 0; }
.motion .desktop-nav { transform: translateX(10px); opacity: 0; }
.motion.loaded .brand svg { transform: none; opacity: 1; }
.motion.loaded .desktop-nav { transform: none; opacity: 1; }
.desktop-menu { margin: 0; padding: 0; display: flex; align-items: center; }
.desktop-menu > li { padding: 20px 0; margin: 0 20px; position: relative; font-size: 16px; }
.desktop-menu a { color: var(--black); text-transform: uppercase; position: relative; transition: all .6s var(--ease); }
.desktop-menu a::after { content: ''; position: absolute; top: calc(100% + 10px); left: 0; right: 0; width: 100%; height: 1px; background: var(--orange); opacity: 0; transition: all .6s var(--ease); }
.desktop-menu a:hover::after, .desktop-menu a:focus::after,
.desktop-menu > li.is-current > a::after, .desktop-menu > li.is-ancestor > a::after, .desktop-menu > li:hover > a::after { opacity: 1; }
.desktop-menu .sub-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 100; margin: 0; padding: 0; border: 1px solid var(--yellow); }
.desktop-menu .sub-menu li { white-space: nowrap; font-size: 15px; }
.desktop-menu .sub-menu a { display: block; padding: 10px 15px; background-color: var(--tan); text-decoration: none; }
.desktop-menu .sub-menu a:hover, .desktop-menu .sub-menu a:focus { background-color: var(--yellow); color: var(--black); }
.desktop-menu .sub-menu a::after { display: none; }
.desktop-menu > li:hover .sub-menu, .desktop-menu > li:focus-within .sub-menu { display: block; }

/* ---------------------------------------------------------------- mobile nav (<=1024px) */
.mobile-nav-wrap { display: none; }
@media (max-width: 1024px) {
  main { margin-top: 60px; }
  .brand, .desktop-nav { display: none; }
  .site-header .container { padding: 0; }
  .mobile-nav-wrap {
    display: flex; align-items: center; position: fixed; left: 0; top: 0; width: 100%; min-height: 60px; z-index: 3000;
    padding: 0 15px; background: var(--tan); box-shadow: 0 0 5px rgba(0, 0, 0, .1);
  }
  .mobile-nav-header { display: flex; align-items: center; justify-content: space-between; width: 100%; }
  .mobile-brand svg { width: 135px; display: block; }
  .navbar-toggle { padding: 0; cursor: pointer; background: none; border: 0; z-index: 10000; }
  .navbar-toggle .icon-bar { display: block; width: 32px; height: 4px; border-radius: 5px; background: var(--orange); transition: all .6s var(--ease); }
  .navbar-toggle .icon-bar:not(:last-child) { margin-bottom: 7px; }
  .mobile-nav-wrap.open .navbar-toggle .icon-bar { background: var(--black); }
  .mobile-nav-wrap.open .navbar-toggle .icon-bar:first-child { transform: translate(0, 12px) rotate(46deg); }
  .mobile-nav-wrap.open .navbar-toggle .icon-bar:last-child { transform: translate(0, -10px) rotate(-46deg); }
  .mobile-nav-wrap.open .navbar-toggle .icon-bar:nth-child(2) { background: transparent; opacity: 0; transform: scale(0); }

  .mobile-nav { display: none; position: absolute; left: 0; top: 100%; width: 100%; height: 100vh; overflow: auto; z-index: 9999; background: #fff; opacity: 0; transition: opacity .4s ease-in-out; }  /* jQuery fadeToggle: 400ms 'swing' */
  .mobile-nav.is-visible { display: block; }
  .mobile-nav.is-shown { opacity: 1; }
  .mobile-nav ul { margin: 0; padding: 0; list-style: none; }
  .mobile-nav li { display: block; position: relative; margin: 0; border-bottom: 1px solid #eee; font-size: 16px; }
  .mobile-nav li > a { display: block; margin: 0; padding: 15px 25px; color: var(--black); background-color: #fff; line-height: 1; transition: all .6s var(--ease); }
  .mobile-nav li > a:hover, .mobile-nav li > a:focus, .mobile-nav li > a:active { background-color: var(--orange); color: #fff; }
  .mobile-nav li.is-current > a, .mobile-nav li.is-ancestor > a { background-color: var(--orange); color: #fff; }
  .mobile-nav .expand {
    display: block; position: absolute; top: 0; right: 0; width: 50px; height: 46px; padding: 0; border: 0; cursor: pointer; z-index: 1000;
    background: transparent url(img/ui/nav-caret-right.svg) center no-repeat; transition: all .6s var(--ease);
  }
  .mobile-nav .expand:hover, .mobile-nav .expand:focus { transform: rotate(-180deg); }
  .mobile-nav .sub-menu {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding-top: 60px; z-index: 4000; background-color: #fff; text-align: center;
    opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s linear .6s;
  }
  .mobile-nav .sub-menu.sub-open { opacity: 1; visibility: visible; transition: opacity .6s var(--ease), visibility 0s; }
  .mobile-nav .sub-menu li { text-align: left; }
  .mobile-nav .sub-menu li a { letter-spacing: 1px; text-transform: none; }
  .mobile-nav .sub-menu-title { position: absolute; top: 0; left: 0; right: 0; min-height: 60px; display: flex; align-items: center; justify-content: center; z-index: 100; background-color: var(--tan); font-size: 16px; }
  .mobile-nav .close-sub {
    display: block; position: absolute; top: 0; left: 0; width: 60px; height: 60px; padding: 0; border: 0; cursor: pointer; z-index: 2000;
    background: transparent url(img/ui/nav-arrow-left.svg) center no-repeat; transition: all .6s var(--ease);
  }
  .mobile-nav .close-sub:hover, .mobile-nav .close-sub:focus { transform: translateX(-5px); }
}

/* ---------------------------------------------------------------- page sections (rows / columns / modules) */
/* Sections are stacked in a flex column so a row's margin-bottom and the next row's margin-top add up
   (Beaver Builder kept them inside separate boxes) instead of collapsing into one. */
main, .post-content { display: flex; flex-direction: column; }
main > *, .post-content > * { min-width: 0; }
.row {
  --bg: transparent; --img: none; --pos: center center; --size: cover; --mh: 0; --pad: 20px; --mt: 0; --mb: 0; --color: inherit; --wrapw: 1100px;
  display: flex; align-items: center; position: relative;
  min-height: var(--mh); padding: var(--pad); margin-top: var(--mt); margin-bottom: var(--mb); color: var(--color);
  background-color: var(--bg); background-image: var(--img); background-position: var(--pos); background-size: var(--size); background-repeat: no-repeat;
}
.row--top { align-items: flex-start; }
.row--bottom { align-items: flex-end; }
/* .wrap and .col are flex columns, as Beaver Builder's were: the margins of stacked modules add up
   (20px + 20px) instead of collapsing into one 20px gap. */
.wrap { width: 100%; max-width: var(--wrapw, 1100px); margin: 0 auto; min-width: 0; display: flex; flex-direction: column; }
.wrap--full { max-width: none; }
.cols { display: flex; flex-wrap: wrap; align-items: flex-start; }
.cols--eq { align-items: stretch; }
.cols--eq > .col { flex: 1 1 auto; }   /* BB let equal-height columns grow into any leftover width */
.col {
  --w: 100%; --maxw: none; --bg: transparent; --img: none; --pos: center center; --mh: 0; --pad: 0; --color: inherit;
  --w-t: initial; --pad-t: initial; --pad-m: initial; --mh-m: initial; --cm: 0; --cm-t: initial;
  display: flex; flex-direction: column;
  width: var(--w); max-width: var(--maxw); min-width: 0; min-height: var(--mh); padding: var(--pad); margin: var(--cm); color: var(--color);
  background-color: var(--bg); background-image: var(--img); background-position: var(--pos); background-size: cover; background-repeat: no-repeat;
}
.row[style*="--hcolor"] :is(h1, h2, h3, h4, h5, h6), .col[style*="--hcolor"] :is(h1, h2, h3, h4, h5, h6) { color: var(--hcolor); }
.row[style*="--lcolor"] a:not(.btn), .col[style*="--lcolor"] a:not(.btn) { color: var(--lcolor); }
.cols--eq.cols--center > .col { justify-content: center; }
.cols--eq.cols--bottom > .col { justify-content: flex-end; }
/* modules: everything placed directly in a column (or a plain row) gets BB's 20px margin */
:is(.wrap, .col) > :not(.cols) { --m: 20px; --m-t: initial; --m-m: initial; margin: var(--m); }
.col > .cols { margin: 0; }
:is(.wrap, .col) > * { min-width: 0; }

.stack-lower { z-index: 0; }
.stack-higher { position: relative; z-index: 1; }
.content-split-overlap .wrap { position: relative; z-index: 1; }

@media (max-width: 1200px) { .hide-l { display: none !important; } }
@media (max-width: 1024px) {
  .row { padding: var(--pad-t, var(--pad)); margin-top: var(--mt-t, var(--mt)); margin-bottom: var(--mb-t, var(--mb)); background-image: var(--img-t, var(--img)); }
  .col { width: var(--w-t, var(--w)); padding: var(--pad-t, var(--pad)); margin: var(--cm-t, var(--cm)); }
  :is(.wrap, .col) > :not(.cols) { margin: var(--m-t, var(--m)); }
  [style*="--ta-t"] { text-align: var(--ta-t); }
  .hide-t { display: none !important; }
}
@media (min-width: 769px) and (max-width: 1024px) { .only-m { display: none !important; } }
@media (max-width: 768px) {
  .row { padding: var(--pad-m, 20px 0); margin-top: var(--mt-m, 0); margin-bottom: 0; min-height: var(--mh-m, var(--mh)); background-image: var(--img-m, var(--img-t, var(--img))); }
  .cols { display: block; }
  .cols--rev { display: flex; flex-direction: column-reverse; }
  .col { width: auto; max-width: none; padding: var(--pad-m, 0); margin: 0; min-height: var(--mh-m, var(--mh)); }
  .col--narrow { max-width: 400px; margin-left: auto; margin-right: auto; }
  :is(.wrap, .col) > :not(.cols) { margin: var(--m-m, var(--m-t, var(--m))); }
  .hide-m { display: none !important; }
}

/* text module (flow-root: like BB's clearfix, the module keeps its children's margins inside it) */
.text { display: flow-root; }
.text .m { margin: 20px; display: flow-root; }        /* a builder module that was pasted inside a text block */
.text[style*="--txc"] * { color: inherit !important; }
.text[style*="--txf"] *:not(b, strong) { font-size: inherit; line-height: inherit; }
.spacer { height: 6px; }  /* what the empty 3x2 placeholder image measured */
.text p:last-child { margin-bottom: 0; }
.text ul, .text ol { margin: 25px; }
.text iframe { display: block; }
.text blockquote p:last-of-type { margin-bottom: 0; }
@media (max-width: 1024px) { .text[style*="--lh-t"] { line-height: var(--lh-t); } }

/* heading module */
.heading { margin: 0; }
.heading a { text-decoration: none; color: inherit; }
@media (max-width: 1024px) { .heading[style*="--fs-t"] { font-size: var(--fs-t) !important; } }
@media (max-width: 768px) { .heading[style*="--fs-m"] { font-size: var(--fs-m) !important; } }

/* photo module */
.photo { text-align: center; line-height: 0; }
.photo--left { text-align: left; }
.photo--right { text-align: right; }
.photo img { display: inline; max-width: 100%; height: auto; }
.photo[style*="--pw:"] img { width: var(--pw); }
.photo a { display: inline-block; line-height: 0; max-width: 100%; }
.photo figcaption { font-size: 13px; line-height: 18px; padding: 10px 0 20px; }
@media (max-width: 1024px) { .photo[style*="--pw-t"] img { width: var(--pw-t); } }

/* button module */
.btn-wrap { text-align: left; }

/* separator module */
.sep { color: inherit; --sep-c: #aaa; --sep-w: 1px; --sep-s: solid; border: 0; height: 0; border-top: var(--sep-w) var(--sep-s) var(--sep-c); margin: var(--m, 20px); box-sizing: border-box; }
:is(.wrap, .col) > .sep { margin: var(--m); }

/* list module */
.list { list-style: none; margin: 25px; padding: 0; }
.list li { margin: 0; }
.list .list-h { margin: 0 0 20px; font-size: 24px; line-height: 2; font-weight: 400; }

/* icon group (podcast platforms) */
.icons { text-align: center; line-height: 1; padding: 10px 0; font-size: 0; }
.icons a { display: inline-block; vertical-align: top; text-decoration: none; color: var(--black); font-size: 40px; line-height: 40px; margin: 0 15px; transition: color .3s; }
.icons a:first-child { margin-left: 0; }
.icons a:last-child { margin-right: 0; }
.icons a:hover { color: var(--orange); }
.nk { font-family: 'NicoleKolenda' !important; font-style: normal; font-weight: normal; line-height: 1; speak: never; -webkit-font-smoothing: antialiased; }
.nk-apple::before { content: '\e900'; }
.nk-iheart::before { content: '\e901'; }
.nk-audible::before { content: '\e902'; }
.nk-spotify::before { content: '\e905'; }

/* callout cards ("NYU Motor Speech Lab", "Cancer to Crushing It", "Speaking") */
.callout { display: block; text-align: center; text-decoration: none !important; color: inherit; overflow: hidden; }
.callout img { display: block; width: 100%; margin-bottom: -10px; position: relative; z-index: 0; }
.callout h4 { display: inline-block; position: relative; z-index: 1; margin: 0; padding: 0 50px; background-color: var(--yellow); transition: background .6s var(--ease); }
.callout:hover h4, .callout:focus h4 { background-color: var(--black); color: #fff; }

/* hero rows */
.hero h1 { font-size: 20px; }
/* headings whose level was changed so each page has exactly one h1 keep their old size */
h1.as-h2, .hero h1.as-h2 { font-size: 24px; }
h2.as-h1 { font-size: 24px; }
.hero h2.as-h1 { font-size: 20px; }
.hero .col { margin-bottom: 50px; }
@media (min-width: 1025px) { .hero { min-height: var(--mh, 70vh); } }
@media (max-width: 1024px) { .hero { align-items: flex-end; } }

/* videos */
.video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* image gallery (/choose-one/) */
.gallery { columns: 3 200px; column-gap: 20px; }
.gallery img { display: block; width: 100%; margin: 0 0 20px; break-inside: avoid; }

/* slideshow (/speaking/) */
.slideshow { --h: 300px; position: relative; height: var(--h); overflow: hidden; }
.slideshow img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 1s ease; }
.slideshow img.is-active, .slideshow:not(.is-ready) img:first-child { opacity: 1; }
/* prev/next arrows appear while the pointer is over the slideshow, like the old one's */
.slideshow__prev, .slideshow__next {
  display: none; position: absolute; top: 0; z-index: 7; width: 50%; height: 100%; padding: 0; border: 0; cursor: pointer;
  background: transparent url(img/ui/slideshow-arrows-prev.png) left center no-repeat;
}
.slideshow__next { right: 0; background-image: url(img/ui/slideshow-arrows-next.png); background-position: right center; }
.slideshow__prev { left: 0; }
.slideshow__prev:hover { background-position: -70px center; }
.slideshow__next:hover { background-position: calc(100% + 70px) center; }
.slideshow:hover .slideshow__prev, .slideshow:hover .slideshow__next, .slideshow__prev:focus, .slideshow__next:focus { display: block; }

/* instagram: a plain "follow" block where the feed plugin was, and link cards for the reels */
.ig-follow { text-align: center; padding: 10px 0; }
.ig-follow__head { display: inline-flex; align-items: center; gap: 12px; text-decoration: none !important; color: var(--black); }
.ig-follow__head img { width: 50px; height: 50px; border-radius: 50%; display: block; }
.ig-follow__name { font-size: 16px; font-weight: 700; }
.ig-follow .ig-follow__bio { font-size: 13px; line-height: 1.3; color: #5f0074; margin: 10px auto 20px; max-width: 520px; }
.ig-follow__cta { margin: 0; }
.ig-follow .ig-follow__btn { --btn-bg: var(--purple); --btn-c: #fff; --btn-bd: 1px solid var(--purple); --btn-r: 0; --btn-tt: uppercase; --btn-ls: 1.4px; --btn-hbg: var(--black); --btn-hbd: 1px solid var(--black); }
.reel-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; text-decoration: none !important;
  aspect-ratio: 9 / 13; max-width: 540px; margin: 0 auto; padding: 24px; color: var(--black) !important; background: #fff;
  border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0, 0, 0, .5), 0 1px 10px 0 rgba(0, 0, 0, .15);
}
.reel-card__play { width: 64px; height: 64px; border-radius: 50%; background: var(--orange) url(img/ui/icon-play.svg) 55% center / 28px no-repeat; }
.reel-card__label { font-size: 16px; line-height: 1.6; }
.reel-card__cap { font-size: 13px; line-height: 1.6; color: #6b6b6b; }
.reel-card:hover .reel-card__play { background-color: var(--black); }

/* ---------------------------------------------------------------- forms */
.nk-form { font-family: var(--font); }
.nk-form label, .nk-form .legend { display: block; font-size: 14px; line-height: 20px; font-weight: 500; margin: 0 0 8px; color: #112337; }
.nk-form .req { font-size: 12px; color: #c02b0a; margin-left: 4px; }
.nk-form input[type="text"], .nk-form input[type="email"], .nk-form textarea {
  display: block; width: 100%; height: 38px; font-family: inherit; font-size: 14px; line-height: 1.4; color: #112337; background: #fff;
  border: 1px solid #686e77; border-radius: 3px; padding: 10px 15px; min-height: 38px; transition: border-color .3s linear;
}
.nk-form textarea { height: auto; min-height: 0; line-height: 1.5; resize: vertical; }
.nk-form input:focus, .nk-form textarea:focus { outline: 0; border-color: var(--black); box-shadow: 0 0 0 3px rgba(53, 53, 53, .15); }
.nk-form button[type="submit"] {
  display: inline-block; height: 38px; padding: 0 16px; font-family: inherit; font-size: 14px; font-weight: 500; line-height: 14px; letter-spacing: normal; text-transform: none;
  color: #fff; background-color: var(--orange-form); border: 1px solid transparent; border-radius: 3px; cursor: pointer; transition: opacity .3s;
}
.nk-form button[type="submit"]:hover, .nk-form button[type="submit"]:focus { opacity: .85; }
.nk-form button[disabled] { opacity: .6; cursor: wait; }
.nk-form .hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: 14px; line-height: 1.6; margin: 12px 0 0 !important; min-height: 0; }
.form-status:empty { display: none; }
.form-status.is-ok { color: #1f5e2c; background: #e8f5e9; border: 1px solid #b7dfbe; padding: 10px 14px; border-radius: 3px; }
.form-status.is-error { color: #8a1c0a; background: #fdecea; border: 1px solid #f3c1b8; padding: 10px 14px; border-radius: 3px; }

/* the "Grab your free gift now!" row */
.optin-row { --bg: var(--yellow); --pad: 20px 20px 0; --pad-m: 20px 0 0; }
/* the old page nested two builder modules inside one, so the copy sits 20px further in */
.optin-copy { padding: 20px; }
.optin-row .optin-intro p { margin: 0; }
.optin-gift { margin-top: 40px; }
.optin-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 16px; align-items: end; }
.optin-fields .field { min-width: 0; }
.optin-form { padding-bottom: 10px; }
@media (max-width: 640px) { .optin-fields { grid-template-columns: 1fr; } }
.landing .optin-row { margin-top: 200px; }
@media (max-width: 1024px) { .landing .optin-row { margin-top: 100px; } }
@media (max-width: 768px) { .landing .optin-row { margin-top: 0; } }

/* the contact form on /connect/ */
.contact-form .legend-note { font-size: 16px; line-height: 32px; margin: 0 !important; letter-spacing: .28px; }
.contact-form .legend-note .req { margin: 0; font-size: inherit; }
.contact-form .fields { display: grid; grid-template-columns: repeat(12, 1fr); gap: 40px 16px; margin: 0 0 16px; }
.contact-form .field--full { grid-column: span 12; }
.contact-form .field--half { grid-column: span 6; }
.contact-form textarea { height: 192px; }
.contact-form .req { font-size: 14px; margin-left: 0; }
.contact-form button[type="submit"] { background-color: #fdf3e9; color: #000; }
.contact-form label, .contact-form .legend { color: var(--ink); }
.contact-form .check { display: flex; align-items: center; gap: 10px; }
.contact-form .check input { width: 16px; height: 16px; margin: 0; accent-color: var(--black); }
.contact-form .check label { margin: 0; font-weight: 400; }
.contact-form .actions { margin: 0; }
@media (max-width: 640px) { .contact-form .field--half { grid-column: span 12; } }

/* ---------------------------------------------------------------- blog index, categories, post cards */
.blog-index { padding-top: 100px; }
.container { max-width: 1050px; margin: 0 auto; padding: 0 15px; }
.archive-title { text-align: center; }
@media (min-width: 1025px) { .post-grid-wrap { display: flex; } }
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); justify-content: space-between; max-width: 825px; margin: 0 auto; gap: 50px 20px; width: 100%; }
.post-entry img { display: block; width: 100%; margin-bottom: 25px; }
.post-entry h3 { font-size: 16px; font-weight: 700; margin-bottom: 0; }
.post-entry a { text-decoration: underline; }
.post-entry a:hover, .post-entry a:focus { text-decoration: none; }
.post-entry .entry-image a { display: block; position: relative; }
.video-image::after { content: ''; position: absolute; top: 50%; left: 0; right: 0; margin: 0 auto; transform: translateY(-50%); width: 24px; height: 24px; background: url(img/ui/icon-play.svg) center / cover no-repeat; z-index: 10; }
.post-entry .entry-image a.video-image { margin-bottom: 25px; }
.post-entry .entry-image a.video-image img { margin-bottom: 0; }
.categories { display: flex; align-items: center; font-size: 12px; margin: 10px 0; }
.categories span { text-transform: uppercase; }
.categories ul { margin: 0 0 0 5px; padding: 0; list-style: none; }
.categories li { font-size: 12px; line-height: 2; margin: 0; }
.post-excerpt p { margin: 0; }
.post-grid-sidebar { margin-left: 20px; padding-left: 20px; border-left: 1px solid #ffe6cf; flex: 0 0 200px; min-width: 0; }
.post-grid-sidebar h3 { margin-bottom: 5px; font-size: 16px; text-transform: uppercase; color: var(--orange); }
.post-grid-sidebar ul { margin: 0 25px 25px 10px; list-style: none; }
@media (max-width: 1024px) {
  .post-grid-sidebar { margin: 20px 0 0; padding: 20px 0 0; border: 0; border-top: 1px solid #ffe6cf; }
  .post-grid-sidebar ul { display: flex; flex-wrap: wrap; }
  .post-grid-sidebar li, .post-grid-sidebar li:last-of-type { margin: 10px; }
}
.load-more-posts { text-align: center; margin: 100px 0; }
.post-grid.related-posts { margin-bottom: 100px; }

/* single post */
.featured-single { padding: 0; }
.featured-single .featured-image img { display: block; margin: 0 auto; }
.single-post .post-content h2, .single-post .post-content h1.as-h2 { color: var(--orange); }
.post-title { font-size: 24px; }
.page-404 { text-align: center; padding: 100px 0; }
.page-404 h1 { font-size: 24px; }

/* legal pages: long rich text */
.legal h1, .legal h2, .legal h3 { line-height: 1.6; }

/* ---------------------------------------------------------------- footer */
.site-footer { background-color: var(--orange); color: var(--ink); padding: 20px; text-align: center; }
.footer-inner { max-width: 1100px; margin: 0 auto; }
.footer-nav { margin: 20px 20px 0; }
.footer-nav ul { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style: none; }
.footer-nav a { display: block; padding: 14px; font-size: 16px; line-height: 1; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.footer-nav a:hover, .footer-nav a:focus { color: #fff; }
.social { display: flex; justify-content: center; gap: 14.5px; margin: 0 20px 20px; padding: 10px 0; }
.social a { display: block; color: var(--ink); line-height: 0; }
.social svg { height: 30px; width: auto; fill: currentColor; }
.social a:hover { opacity: .75; }
.footer-logo { margin: 0 20px; line-height: 0; }
.footer-logo img { display: inline-block; width: 270px; height: auto; }
.footer-copy { margin: 20px; font-size: 14px; line-height: 2; }
.footer-copy a { color: var(--ink); text-decoration: none; } /* Greg 2026-09-25: no underlines in the footer, even though live underlines these */
.footer-copy a:hover, .footer-copy a:focus { color: #fff; }
@media (max-width: 768px) {
  .site-footer { padding: 20px 0; }
  .footer-nav li + li { border-top: 1px solid transparent; }  /* the old menu's item separators */
}

/* ---------------------------------------------------------------- podcast episode grid (/podcast/) */
:is(.wrap, .col) > .episodes { margin: 20px -10px; }
.episodes { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; }
.episode { padding: 0 30px 60px; font-size: 14px; min-width: 0; }
.episode__img { display: block; line-height: 14px; }  /* inline image + 14px line: the old grid's 2px gap under the cover */
.episode__img img { display: inline; width: 100%; height: auto; vertical-align: baseline; }
.episode__text { position: relative; padding: 20px 20px 20px 40px; }
.episode__text::before { content: ''; position: absolute; top: 20px; left: 0; width: 28px; height: 28px; background: url(img/ui/icon-play-orange.svg) center / contain no-repeat; }
.episode__title { font-size: 20px; line-height: 26px; margin: 0; padding: 0 0 5px; font-weight: 400; }
.episode__excerpt { margin: 0 0 15px; }
.episode__excerpt p { font-size: 14px; line-height: 28px; margin: 0 0 20px; }
.episode__excerpt p:last-child { margin-bottom: 0; }
.episode__link { margin: 0 !important; line-height: 1; }
.episode__link a {
  display: inline-block; padding: 10px 40px; font-size: 14px; line-height: 1.2; letter-spacing: 1.4px; text-transform: uppercase; text-decoration: none;
  color: var(--black); background-color: var(--yellow); border: 1px solid var(--yellow); transition: all .6s var(--ease);
}
.episode__link a:hover, .episode__link a:focus { color: #fff; background-color: var(--black); border-color: var(--black); }
@media (max-width: 1024px) {
  .episodes { grid-template-columns: repeat(2, 1fr); }
  .episode__text::before { position: static; display: block; margin-right: 15px; }
  .episode__title { display: flex; align-items: center; }   /* as the old theme did on tablets and phones */
}
@media (max-width: 768px) {
  .episodes { grid-template-columns: 1fr; }
  :is(.wrap, .col) > .episodes { margin: 20px 0; }   /* the old grid spilled 10px past the screen edge here */
  .episode { padding: 0 20px 60px; }
}

/* embedded players (Libsyn) */
.embed iframe { display: block; width: 100%; max-width: 100%; box-sizing: border-box; }

/* ---------------------------------------------------------------- motion */
/* Entrance animation carried over from Beaver Builder ("fl-animation fl-fade-in"): the column starts
   hidden and fades in once it scrolls into view, after --anim-delay, over --anim-dur. The hidden start
   only applies once site.js has started (it adds class="motion" to <html>), so if the script is
   missing or blocked nothing is ever left hidden. */
@keyframes nk-fade-in { from { opacity: 0; } to { opacity: 1; } }
.motion .anim { opacity: 0; }
.motion .anim.is-animated { opacity: 1; animation: nk-fade-in var(--anim-dur, 1s) ease var(--anim-delay, 0s) both; }
@media (prefers-reduced-motion: reduce) {
  .motion .anim, .motion .anim.is-animated { opacity: 1; animation: none; }
  .motion .brand svg, .motion .desktop-nav { transition: none; transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* lightbox (the /choose-one/ photo gallery and the video cards on the blog), like the old magnific/lity ones */
.lightbox { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: rgba(11, 11, 11, .8); padding: 40px 50px; }
.lightbox[hidden] { display: none; }
.lightbox__stage { position: relative; max-width: 100%; max-height: 100%; line-height: 0; }
.lightbox__stage img { max-width: 100%; max-height: calc(100vh - 80px); width: auto; height: auto; box-shadow: 0 0 8px rgba(0, 0, 0, .6); }
.lightbox__stage .video { width: min(900px, 90vw); }
.lightbox__close, .lightbox__prev, .lightbox__next { position: absolute; border: 0; background: none; color: #fff; cursor: pointer; opacity: .65; font: 400 44px/1 Arial, sans-serif; padding: 0 12px; }
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover, .lightbox button:focus { opacity: 1; }
.lightbox__close { top: 6px; right: 6px; font-size: 36px; }
.lightbox__prev { left: 6px; top: 50%; transform: translateY(-50%); font-size: 60px; }
.lightbox__next { right: 6px; top: 50%; transform: translateY(-50%); font-size: 60px; }
.lightbox__count { position: absolute; right: 0; bottom: -24px; color: #ccc; font: 12px/18px Arial, sans-serif; }
html.lightbox-open { overflow: hidden; }