/* One fixed vector wordmark gives every public header the same two-line spacing. */
header .brand{gap:10px!important;line-height:1!important;letter-spacing:0!important}
header .brand>img{width:40px!important;height:40px!important;object-fit:contain!important}
header .brand>span{display:block!important;position:relative!important;flex:0 0 145px!important;width:145px!important;height:35px!important;min-width:145px!important;background:url("https://sessionsonthegreen.com/sessions-on-the-green-wordmark.svg") center/contain no-repeat!important;font-size:0!important;line-height:0!important;letter-spacing:0!important;transform:none!important}
header .brand>span>svg,header .brand>span>small{display:none!important}
header nav[aria-label="Main navigation"]>a:is([href="/"],[href="#/"],[href="https://sessionsonthegreen.com/"]){display:none!important}
@media(max-width:600px){header .brand>span{flex-basis:135px!important;min-width:135px!important;width:135px!important;height:33px!important}}

/* Slightly smaller wordmark, optically centred against the emblem. */
header .brand>span{flex-basis:137px!important;width:137px!important;min-width:137px!important;height:33px!important;transform:translateY(2px)!important}
@media(max-width:600px){header .brand>span{flex-basis:128px!important;width:128px!important;min-width:128px!important;height:31px!important}}

header .brand{display:flex!important;align-items:center!important;flex-shrink:0!important}header .brand>img{content:url("/assets/logo.png");display:block!important;flex:0 0 40px!important}header .brand>span{color:#213e38!important}

/* Public navigation */
header:has(> .brand):has(> nav[aria-label="Main navigation"]) {
  background: #213e38 !important;
  color: #f7f4eb;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
header:has(> .brand) > nav[aria-label="Main navigation"] {
  background: transparent !important;
}
header:has(> .brand) > nav[aria-label="Main navigation"] a {
  color: #f7f4eb !important;
}
header:has(> .brand) > nav[aria-label="Main navigation"] a:is(:hover, :focus-visible, [aria-current="page"]) {
  text-decoration: underline;
  text-underline-offset: .3em;
}
header:has(> nav[aria-label="Main navigation"]) > .brand > span {
  background: #f7f4eb !important;
  -webkit-mask: url('/sessions-on-the-green-wordmark.svg') center / contain no-repeat;
  mask: url('/sessions-on-the-green-wordmark.svg') center / contain no-repeat;
}
header:has(> nav[aria-label="Main navigation"]) > .brand img {
  border-radius: 50%;
  background: #f7f4eb;
}


/* Shared public typography. Display, reading, and interface text each have a role. */
:root {
  --sotg-h1: clamp(2.25rem, 5.2vw, 4.5rem);
  --sotg-h2: clamp(1.75rem, 3vw, 2.375rem);
  --sotg-card-title: 1.5rem;
  --sotg-h3: 1.375rem;
  --sotg-reading: 1.0625rem;
  --sotg-copy: 1rem;
  --sotg-ui: .875rem;
  --sotg-meta: .8125rem;
  --sotg-label: .6875rem;
}

body h1 {
  font-size: var(--sotg-h1) !important;
  overflow-wrap: anywhere;
}
body h1 :is(em, strong, span, a) { font-size: inherit !important; }
body main h2 { font-size: var(--sotg-h2) !important; }
body main h3 { font-size: var(--sotg-h3) !important; }
body main :is(h4, h5, h6) { font-size: var(--sotg-copy) !important; }
body main :is(.card, .journal-card, .playlist-card) h2 {
  font-size: var(--sotg-card-title) !important;
}

body main :is(p, li, dd, dt, td, th) { font-size: var(--sotg-copy) !important; }
body main :is(.page-heading, .journal-full-text, .par-copy) :is(p, li),
body main :is(.par-lead, .lead) { font-size: var(--sotg-reading) !important; }
body main :is(blockquote, .listener-quote) p {
  font-size: var(--sotg-h3) !important;
}
body main :is(figcaption, .playlist-status, .journal-source-note, cite, small),
body main :is(.card, .listener-quote) > p,
body main .journal-discussion > p,
body footer p { font-size: var(--sotg-meta) !important; }
body main :is(.eyebrow, .kicker),
body footer :is(.eyebrow, small) { font-size: var(--sotg-label) !important; }
body header nav[aria-label="Main navigation"] a,
body footer nav a,
body main :is(button, select, input, textarea, label, .text-link, .button) {
  font-size: var(--sotg-ui) !important;
}
body main :is(input, select, textarea) { font-size: var(--sotg-copy) !important; }


/* Match the homepage bar while letting its contents wrap at narrow widths. */
header:has(> .brand):has(> nav[aria-label="Main navigation"]) {
  box-sizing: border-box;
  min-height: 105px !important;
  align-items: center;
}


/* Keep the logo and menu in the same positions on narrow screens. */
@media (max-width: 760px) {
  header:has(> .brand):has(> nav[aria-label="Main navigation"]) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 12px 8px !important;
    min-height: 0 !important;
    height: auto !important;
  }

  header:has(> nav[aria-label="Main navigation"]) > .brand {
    margin: 0 !important;
  }

  header:has(> .brand) > nav[aria-label="Main navigation"] {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  header:has(> .brand) > nav[aria-label="Main navigation"] a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 4px !important;
    text-align: center;
    white-space: normal !important;
    line-height: 1.2;
  }

  header:has(> .brand) > nav[aria-label="Main navigation"] a[href="/"],
  header:has(> .brand):has(> nav[aria-label="Main navigation"]) > :is(.edition, .catalogue) {
    display: none !important;
  }
}


/* Use one indicator for hover, keyboard focus, and the current section. */
header:has(> .brand) > nav[aria-label="Main navigation"] a {
  font-family: "DM Sans", Arial, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  border-bottom-width: 0 !important;
  text-decoration: none !important;
}
header:has(> .brand) > nav[aria-label="Main navigation"] a:is(:hover, :focus-visible, [aria-current]) {
  text-decoration: underline solid currentColor 1px !important;
  text-underline-offset: .3em;
}


/* Introductory copy directly beneath the page title. */
body main h1 + p {
  font-family: "DM Sans", Arial, sans-serif !important;
  font-size: 1.0625rem !important;
  font-weight: 400 !important;
  font-style: normal;
}
body main h1 + p :is(b, strong) {
  font-weight: inherit;
}


/* Give every desktop template the same logo position and link spacing. */
header:has(> .brand):has(> nav[aria-label="Main navigation"]) > :is(.edition, .catalogue) {
  display: none !important;
}
@media (min-width: 761px) {
  header:has(> .brand):has(> nav[aria-label="Main navigation"]) {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: clamp(16px, 2.5vw, 32px) !important;
    padding: 20px 5% !important;
  }
  header:has(> nav[aria-label="Main navigation"]) > .brand {
    flex: none !important;
    margin: 0 !important;
  }
  header:has(> .brand) > nav[aria-label="Main navigation"] {
    display: flex !important;
    flex: 0 1 auto !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px clamp(12px, 1.7vw, 22px) !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  header:has(> .brand) > nav[aria-label="Main navigation"] a {
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
  }
}


/* Search stays at the right edge without moving the mobile menu grid. */
header:has(> .site-search-toggle) { position: relative; }
header > a.site-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  color: #f7f4eb;
  border-radius: 50%;
  text-decoration: none;
}
header > a.site-search-toggle:is(:hover, :focus-visible, [aria-current]) {
  background: rgba(247, 244, 235, .14);
}
header > a.site-search-toggle:focus-visible { outline: 2px solid #f7f4eb; outline-offset: 2px; }
header > a.site-search-toggle svg { width: 22px; height: 22px; }
@media (min-width: 761px) {
  header:has(> .site-search-toggle) > nav[aria-label="Main navigation"] { margin-inline-start: auto !important; }
}
@media (max-width: 760px) {
  header > a.site-search-toggle { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; }
}

.site-search-main { max-width: 80rem; margin: auto; padding: clamp(2rem, 5vw, 4rem) 5%; }
.site-search-intro { max-width: 48rem; }
.site-search-intro h1 { margin-block: .25em; }
.site-search-form { margin-block: 1.5rem 2rem; }
.site-search-form label { display: block; margin-bottom: .5rem; }
.site-search-form > div { display: flex; gap: .5rem; }
.site-search-form input {
  flex: 1; min-width: 0; padding: .7rem .85rem;
  color: #213e38; background: #fffdf7; border: 1px solid #6b7771; border-radius: .25rem;
}
.site-search-form button, .site-search-results button {
  padding: .65rem 1rem; color: #fffdf7; background: #213e38; border: 0; border-radius: .25rem; cursor: pointer;
}
.site-search-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2rem); }
.site-search-results[hidden], .site-search-results [hidden] { display: none; }
.site-search-results h2 { margin-block: 1rem .5rem; }
.site-search-results ol { list-style: none; padding: 0; margin: 0 0 1rem; }
.site-search-results li { padding: .7rem 0; border-bottom: 1px solid #cccfc4; overflow-wrap: anywhere; }
.site-search-results li a { text-decoration: underline; text-underline-offset: .15em; }
.site-search-results li small { display: block; margin-top: .25rem; }
@media (max-width: 760px) {
  .site-search-results { grid-template-columns: 1fr; }
}


/* A shared footer for all public page templates. */
body footer.site-footer.sotg-footer {
  box-sizing: border-box;
  display: block !important;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(2rem, 4vw, 3.5rem) 5% !important;
  background: #18372f !important;
  color: #f7f4eb !important;
  border: 0 !important;
  text-align: left !important;
  font-family: "DM Sans", Arial, sans-serif !important;
  font-weight: 400;
  line-height: 1.5;
}
footer.sotg-footer :is(a, h2, p) { color: inherit !important; }
footer.sotg-footer a { font-size: .875rem !important; text-decoration: none; }
footer.sotg-footer a:is(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: .2em; }
footer.sotg-footer a:focus-visible { outline: 2px solid #d7c59b; outline-offset: 3px; }
footer.sotg-footer a.sotg-footer-brand { font-size: 1rem !important; font-weight: 700; }
footer.sotg-footer p { margin: .2rem 0; }
footer.sotg-footer sup { font-size: .55em; line-height: 0; vertical-align: super; }
.sotg-footer-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2rem; }
footer.sotg-footer .sotg-footer-links { display: grid; gap: .35rem; }
footer.sotg-footer .sotg-footer-links > div,
footer.sotg-footer .sotg-footer-related nav { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
footer.sotg-footer .sotg-footer-related { margin: 1.4rem 0 1.1rem; padding: 1rem 0; border-block: 1px solid rgba(247,244,235,.22); }
footer.sotg-footer .sotg-footer-related h2 {
  margin: 0 0 .6rem;
  color: #d7c59b !important;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: .75rem !important;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.sotg-footer-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }


/* Keep earlier page-specific navigation styles out of the shared footer. */
body footer.site-footer.sotg-footer { font-size: 1rem !important; }
body footer.sotg-footer nav {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  justify-content: flex-start !important;
  font-size: .875rem !important;
  line-height: 1.5 !important;
}
body footer.sotg-footer a {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
}


@font-face {
  font-family: "Sessions Footer Sans";
  src: url("https://fonts.gstatic.com/s/dmsans/v17/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K6z9mXg.woff2") format("woff2");
  font-weight: 100 1000;
  font-display: swap;
}
body footer.site-footer.sotg-footer,
body footer.sotg-footer :is(a,p,nav,h2) {
  font-family: "Sessions Footer Sans", Arial, sans-serif !important;
}


/* Keep all footer links visible on phones. */
body footer.sotg-footer nav a { display: inline-block !important; }


/* Reduce the lettering by 10%, keeping it centred against the road emblem. */
body header:has(> nav[aria-label="Main navigation"]) > a.brand > span {
  width: 123.3px !important;
  height: 29.7px !important;
  flex: 0 0 123.3px !important;
  align-self: center !important;
  transform: none !important;
}
@media (max-width: 760px) {
  body header:has(> nav[aria-label="Main navigation"]) > a.brand > span {
    width: 115.2px !important;
    height: 27.9px !important;
    flex-basis: 115.2px !important;
  }
}


body header:has(> nav[aria-label="Main navigation"]) > a.brand > span { min-width: 0 !important; }