@font-face {
  font-family: 'Bree Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/regular.woff2') format('woff2'), url('/assets/fonts/regular.woff') format('woff');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/atkinson-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/atkinson-bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/atkinson-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/atkinson-bolditalic.woff2') format('woff2');
}
/* Resets */
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
body,
html,
p,
blockquote {
  margin: 0;
  padding: 0;
}
/* Mixins */
/* Global styles */
html {
  height: 100%;
  background: #ffffff;
}
body {
  width: 100%;
  background-color: transparent;
  color: #000000;
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 18px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1 0 auto;
  position: relative;
  z-index: 1;
}
.site-footer {
  flex: 0 0 auto;
}
body.no-hero main {
  flex: 0 0 auto;
}
body.no-hero .site-footer {
  flex: 1 0 auto;
  margin-top: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
a img,
a:hover img {
  border: none;
}
h1,
h2,
h3 {
  color: #8d2424;
  font-family: 'Bree Serif', sans-serif;
  font-weight: 700;
  line-height: 1.15;
  margin: 0.7em 0 0.3em;
}
:where(h1, h2, h3):first-child {
  margin-top: 0;
}
h1 + h2,
h1 + h3,
h2 + h3 {
  color: #232323;
  margin-top: 0;
}
h1 {
  font-size: 2.6em;
}
h2 {
  font-size: 2.1em;
}
h3 {
  font-size: 1.5em;
}
.accent {
  color: #8d2424;
}
.contact-name {
  font-size: 1.5em;
}
p {
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
  margin: 0 auto 30px;
}
p a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  -webkit-transition: opacity 300ms ease-in-out;
  -moz-transition: opacity 300ms ease-in-out;
  -ms-transition: opacity 300ms ease-in-out;
  transition: opacity 300ms ease-in-out;
}
p a:hover {
  opacity: 0.75;
}
ul,
ol {
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
  margin: 0 0 30px;
  padding-left: 1.5em;
}
ul li,
ol li {
  margin: 0;
}
blockquote {
  position: relative;
  padding: 1.5em 2.5em;
  background: rgba(0, 0, 0, 0.05);
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
  margin: 0 auto 30px;
}
blockquote:before {
  position: absolute;
  content: '\201C';
  top: 0.75em;
  left: 0.5em;
  font-size: 2em;
  line-height: 1;
  font-weight: bold;
}
/* Hero */
.hero {
  position: relative;
  width: 100%;
}
.hero img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}
.hero--home {
  aspect-ratio: 2330 / 2051;
}
/* Content column */
.container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 40px;
  box-sizing: border-box;
}
body.no-hero main {
  padding-top: 80px;
}
/* UI Kit */
/* Buttons
   ------------------------------------------------------------------
   The label now sits directly in the <a class="button"> — the Weebly
   .wsite-button-inner wrapper span is gone, and with it the !important
   arms-race against the export's inline styles. */
.button {
  display: inline-block;
  margin: 0 6px 8px 0;
  padding: 15px 34px;
  background-color: #ece2cf;
  color: #5a4a3a;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: 'Bree Serif', sans-serif;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: all 130ms ease-in-out;
  -moz-transition: all 130ms ease-in-out;
  -ms-transition: all 130ms ease-in-out;
  transition: all 130ms ease-in-out;
}
.button:hover {
  background-color: #e3d6bd;
}
.button--primary {
  background-color: #83161a;
  color: #ffffff;
  border-color: transparent;
}
.button--primary:hover {
  background-color: #570f11;
  color: #ffffff;
}
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 12;
  width: 100%;
  padding: 10px 0;
  color: #000000;
  box-sizing: border-box;
  background: transparent url('/assets/gfx/nav_bg.png') center bottom no-repeat;
  background-size: 100% 100%;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1200px;
  padding: 0 40px;
}
.site-logo {
  flex: 0 0 auto;
}
.site-logo a {
  display: block;
  -webkit-transition: opacity 200ms ease;
  -moz-transition: opacity 200ms ease;
  -ms-transition: opacity 200ms ease;
  transition: opacity 200ms ease;
}
.site-logo a:hover {
  opacity: 0.8;
}
.site-logo img {
  display: block;
  max-width: 240px;
  max-height: 60px;
}
.hamburger {
  display: none;
  position: relative;
  z-index: 13;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.hamburger span {
  position: absolute;
  left: 4px;
  top: 14px;
  width: 22px;
  height: 2px;
}
.hamburger span:before,
.hamburger span:after {
  position: absolute;
  left: 0;
  display: block;
  width: 22px;
  height: 2px;
  background: #000000;
  content: '';
  -webkit-transition: transform 200ms ease, top 200ms ease;
  -moz-transition: transform 200ms ease, top 200ms ease;
  -ms-transition: transform 200ms ease, top 200ms ease;
  transition: transform 200ms ease, top 200ms ease;
}
.hamburger span:before {
  top: -4px;
}
.hamburger span:after {
  top: 4px;
}
.site-nav {
  flex: 1 1 auto;
}
.site-nav ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav li {
  position: relative;
}
.site-nav a {
  display: block;
  padding: 10px 16px;
  color: #000000;
  font-family: 'Bree Serif', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  -webkit-transition: color 200ms ease;
  -moz-transition: color 200ms ease;
  -ms-transition: color 200ms ease;
  transition: color 200ms ease;
}
.site-nav a:hover {
  color: #83161a;
}
.site-nav li.active > a {
  color: #83161a;
}
.site-nav li.active > a:after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 4px;
  height: 2px;
  background: #83161a;
}
.has-submenu > .submenu {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #fffdf2;
  -webkit-box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  -ms-box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(6px);
  -moz-transform: translateY(6px);
  -ms-transform: translateY(6px);
  transform: translateY(6px);
  -webkit-transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
  -moz-transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
  -ms-transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}
.has-submenu > .submenu a {
  padding: 9px 20px;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0.02em;
}
.has-submenu:hover > .submenu,
.has-submenu:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}
/* Footer */
.site-footer {
  margin-top: -17.3913%;
  width: 100%;
  font-size: 14px;
  background-color: #e9ebe8;
  background-image: url('/assets/gfx/footer.jpg');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  padding-top: calc(100% * 900 / 2300);
}
.site-footer .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 40px 60px;
}
.site-footer .footer-cols {
  display: flex;
  gap: 30px;
}
.site-footer .footer-col {
  flex: 1 1 0;
  min-width: 0;
}
.site-footer .footer-col ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
  font-size: 14px;
  line-height: 1.35;
}
.site-footer .footer-col li {
  margin: 0 0 6px;
}
.site-footer .footer-col a:hover {
  color: #8d2424;
}
.site-footer .footer-col-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 10px;
}
.site-footer .footer-colophon {
  margin-top: 50px;
}
.site-footer .footer-colophon a {
  font-weight: normal;
  text-decoration: none;
}
.site-footer h2,
.site-footer p,
.site-footer blockquote {
  margin: 0 auto 20px;
}
.site-footer h2 {
  font-size: 20px;
}
.site-footer p {
  font-size: 14px;
  line-height: 1.45;
}
.site-footer blockquote {
  font-size: 14px;
  background: transparent;
  padding: 0 0 0 1em;
}
.site-footer blockquote:before {
  top: 0;
  left: 0;
  font-size: 1.5em;
}
/* Sections
   ------------------------------------------------------------------
   Body content lives in <section> elements placed directly in <main>;
   each holds a centered <div class="container">. The hero (a banner image
   or the home painting) is the first <section class="hero">; the body
   sections that follow carry soft watercolor paintings that cycle down the
   page — a faithful port of the legacy Weebly section-background rotation. */
body.page-home {
  background-position: 0 0;
  background-size: 100% auto;
  background-image: url('/assets/gfx/home.jpg');
  background-repeat: no-repeat;
}
main > section {
  position: relative;
  background: transparent center top no-repeat;
  background-size: 100% auto;
}
main > section > .container {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  -webkit-box-shadow: -28px 0 28px rgba(255, 255, 255, 0.25), 28px 0 28px rgba(255, 255, 255, 0.25), 0 -28px 28px rgba(255, 255, 255, 0.25), 0 28px 28px rgba(255, 255, 255, 0.25);
  -moz-box-shadow: -28px 0 28px rgba(255, 255, 255, 0.25), 28px 0 28px rgba(255, 255, 255, 0.25), 0 -28px 28px rgba(255, 255, 255, 0.25), 0 28px 28px rgba(255, 255, 255, 0.25);
  -ms-box-shadow: -28px 0 28px rgba(255, 255, 255, 0.25), 28px 0 28px rgba(255, 255, 255, 0.25), 0 -28px 28px rgba(255, 255, 255, 0.25), 0 28px 28px rgba(255, 255, 255, 0.25);
  box-shadow: -28px 0 28px rgba(255, 255, 255, 0.25), 28px 0 28px rgba(255, 255, 255, 0.25), 0 -28px 28px rgba(255, 255, 255, 0.25), 0 28px 28px rgba(255, 255, 255, 0.25);
}
main > section#intro > .container {
  top: calc(35vw - (59vw - 80px));
  margin-bottom: calc(35vw - (59vw - 80px));
}
.page-home main > section#intro > .container {
  top: -14.1127vw;
  margin-bottom: 0;
}
.page-home .site-footer {
  margin-top: -14.1127vw;
}
main > section#intro:last-child > .container {
  margin-bottom: 0;
}
main > section:not(.hero) {
  margin-top: -60px;
  background-image: url('/assets/gfx/header-default.jpg');
}
main > section:not(.hero) + section:not(.hero) {
  background-image: url('/assets/gfx/section-1.jpg');
  background-position: top right;
}
@media screen and (min-width: 992px) {
  main > section:not(.hero) + section:not(.hero) {
    background-size: auto 40vh;
  }
}
main > section:not(.hero) + section:not(.hero) + section:not(.hero) {
  background-image: url('/assets/gfx/section-2.jpg');
  background-position: top left;
}
main > section:not(.hero) + section:not(.hero) + section:not(.hero) + section:not(.hero) {
  background-image: url('/assets/gfx/section-4.jpg');
  background-size: 100% auto;
}
main > section:not(.hero) + section:not(.hero) + section:not(.hero) + section:not(.hero) + section:not(.hero) {
  background-image: url('/assets/gfx/section-3.jpg');
}
main > section:not(.hero) + section:not(.hero) + section:not(.hero) + section:not(.hero) + section:not(.hero) + section:not(.hero) {
  background-image: url('/assets/gfx/section-1.jpg');
}
main > section:not(.hero) + section:not(.hero) + section:not(.hero) + section:not(.hero) + section:not(.hero) + section:not(.hero) + section:not(.hero) {
  background-image: url('/assets/gfx/section-2.jpg');
}
main > section:not(.hero) + section:not(.hero) + section:not(.hero) + section:not(.hero) + section:not(.hero) + section:not(.hero) + section:not(.hero) + section:not(.hero) {
  background-image: url('/assets/gfx/section-3.jpg');
}
main > section:not(.hero) + section:not(.hero) + section:not(.hero) + section:not(.hero) + section:not(.hero) + section:not(.hero) + section:not(.hero) + section:not(.hero) + section:not(.hero) {
  background-image: url('/assets/gfx/section-4.jpg');
}
body.no-hero main > section:not(.hero):first-of-type > .container {
  padding-top: max(60px, 13.0435%);
}
main > section.hero + section:not(.hero) {
  margin-top: -80px;
  padding-top: 0;
  background-image: none;
}
body.page-home main > section:not(.hero) {
  margin-top: 0;
  background-image: none;
}
body.page-home main > section:not(.hero) + section:not(.hero) {
  background-image: url('/assets/gfx/section-1.jpg');
}
main > section:not(.hero):last-child:not(:first-of-type) {
  background-image: none !important;
}
/* Page Types */
.no-header-page .main-wrap {
  padding-top: 80px;
}
.site-logo,
.site-nav ul {
  opacity: 0;
  -webkit-transition: opacity 600ms ease-in 300ms;
  -moz-transition: opacity 600ms ease-in 300ms;
  -ms-transition: opacity 600ms ease-in 300ms;
  transition: opacity 600ms ease-in 300ms;
}
body.fade-in .site-logo,
body.fade-in .site-nav ul {
  opacity: 1;
}
/* Images
   ------------------------------------------------------------------ */
img.image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 10px 0;
}
img.image--center {
  margin-left: auto;
  margin-right: auto;
}
img.image--right {
  margin-left: auto;
}
.image--framed {
  padding: 3px;
  border: 1px solid #e5e5e5;
  border-radius: 1rem;
}
.float-left,
.float-right {
  max-width: 50%;
  margin: 5px 0 10px;
}
.float-left img,
.float-right img {
  margin: 0;
}
.float-left figcaption,
.float-right figcaption {
  font-size: 90%;
  text-align: center;
  margin-top: 4px;
}
.float-left {
  float: left;
  clear: left;
  margin-right: 24px;
}
.float-right {
  float: right;
  clear: right;
  margin-left: 24px;
}
/* Columns
   ------------------------------------------------------------------
   Replaces the Weebly multicol layout <table>. A flex row that stacks to a
   single column on narrow screens (_responsive.less). The col-w-* tokens set
   each column's share; the export's arbitrary resize percentages were snapped
   to a 5% grid, with exact thirds preserved. */
.cols {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}
.col {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 15px;
  box-sizing: border-box;
}
.col.col--flush {
  padding: 0;
}
.col.col-w-20 {
  flex: 0 0 20%;
}
.col.col-w-35 {
  flex: 0 0 35%;
}
.col.col-w-40 {
  flex: 0 0 40%;
}
.col.col-w-45 {
  flex: 0 0 45%;
}
.col.col-w-50 {
  flex: 0 0 50%;
}
.col.col-w-55 {
  flex: 0 0 55%;
}
.col.col-w-60 {
  flex: 0 0 60%;
}
.col.col-w-65 {
  flex: 0 0 65%;
}
.col.col-w-80 {
  flex: 0 0 80%;
}
.col.col-w-third {
  flex: 0 0 33.3333%;
}
.col.col-w-twothird {
  flex: 0 0 66.6667%;
}
/* Cards
   ------------------------------------------------------------------
   Equal-height content panels (the Publikationen pair). Each card is a flex
   column on a white panel: centered media band at the top, left-aligned copy
   below, and a CTA row pinned to the foot via margin-top:auto so the buttons
   line up across cards of unequal copy length. Equal height comes for free —
   the parent .col flex items stretch, and the card fills its column's height.
   Sits inside the usual .cols/.col grid, so it stacks on narrow screens. */
.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  padding: 32px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 16px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 28px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 28px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 28px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 28px rgba(0, 0, 0, 0.1);
}
.card h3:first-child {
  margin-top: 0;
}
.card .card-media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  margin: 14px 0 24px;
}
.card .card-media img {
  width: auto;
  max-width: 100%;
  max-height: 280px;
  margin: 0;
}
.card .card-figure {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 300px;
  margin: 14px 0 24px;
}
.card .card-figure .card-media {
  flex: 0 0 auto;
  min-height: 0;
  margin: 0;
}
.card .card-figure .card-specs {
  flex: 1 1 auto;
  min-width: 0;
}
.card .card-figure .card-specs p {
  margin: 0;
}
.card .card-actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}
.card .card-actions .button {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  padding-left: 22px;
  padding-right: 22px;
  text-align: center;
  white-space: nowrap;
}
/* Video
   ------------------------------------------------------------------ */
.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 28px rgba(0, 0, 0, 0.1);
}
.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video.consent-embed {
  height: auto;
}
#wsite-video-container-712087146101251187 {
  background: url(/assets/gfx/img_6894_101.jpg) center no-repeat;
}
#video-iframe-712087146101251187 {
  background: url(https://cdn2.editmysite.com/images/util/videojs/play-icon.png?1777663314) center no-repeat;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  #video-iframe-712087146101251187 {
    background-image: url(https://cdn2.editmysite.com/images/util/videojs/@2x/play-icon.png?1777663314);
    background-size: 70px 70px;
  }
}
/* Audio
   ------------------------------------------------------------------
   Native HTML5 players. The export wrapped each <audio> for the (now removed)
   MediaElement.js skin and shipped them WITHOUT `controls`, so nothing was
   playable; the cleaned markup adds `controls` and a <figcaption> title. */
.audio {
  margin: 14px 0;
}
.audio audio {
  display: block;
  width: 100%;
  max-width: 440px;
}
.audio figcaption {
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-weight: 600;
  margin-bottom: 4px;
}
/* Audio track — card-style player
   ------------------------------------------------------------------
   One self-contained card per recording, in the same translucent-panel
   language as .card and .news: a large round play/pause toggle on the left, and
   to its right the title with a seekable progress bar + time readout beneath.
   Stacks full-width (one card per track) rather than sitting in the .cols grid,
   because the internal layout is horizontal.

   Progressive enhancement: the markup ships a native <figure class="audio-track">
   with a <figcaption> title + <audio controls>. audio-player.js strips the
   `controls`, injects the toggle + bar, reuses the figcaption as the title, and
   drives everything off the media events — so no-JS (and AI/SEO) visitors still
   get a working native player and the title is always in the DOM. The figure is
   block until JS adds `.is-ready`, at which point it becomes the flex row.

   Restraint via state: a resting track wears the warm sand tones; only the
   PLAYING track lights up brand-red (toggle fill + progress + handle), so at
   most one red focal point exists on the page at a time. The title stays
   ink-strong, never red — the single red accent is unambiguously the active
   control, not a second typographic tier. */
.audio-track {
  box-sizing: border-box;
  padding: 20px 26px;
  margin: 0 0 16px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 16px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 28px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 28px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 28px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 28px rgba(0, 0, 0, 0.1);
}
.audio-track:last-child {
  margin-bottom: 0;
}
.audio-track audio {
  display: block;
  width: 100%;
  max-width: 440px;
  margin-top: 10px;
}
.audio-track.is-ready {
  display: flex;
  align-items: center;
  gap: 22px;
}
.audio-track.is-ready audio {
  display: none;
}
.audio-track .audio-toggle {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ece2cf;
  cursor: pointer;
  -webkit-transition: all 130ms ease-in-out;
  -moz-transition: all 130ms ease-in-out;
  -ms-transition: all 130ms ease-in-out;
  transition: all 130ms ease-in-out;
}
.audio-track .audio-toggle:hover {
  background: #e3d6bd;
}
.audio-track .audio-toggle:active {
  -webkit-transform: scale(0.96);
  -moz-transform: scale(0.96);
  -ms-transform: scale(0.96);
  transform: scale(0.96);
}
.audio-track .audio-toggle:focus-visible {
  outline: 2px solid #83161a;
  outline-offset: 3px;
}
.audio-track .audio-icon {
  display: block;
  width: 0;
  height: 0;
  margin-left: 4px;
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent #5a4a3a;
}
.audio-track .audio-icon::before,
.audio-track .audio-icon::after {
  content: "";
  display: none;
}
.audio-track.is-playing .audio-toggle {
  background: #83161a;
}
.audio-track.is-playing .audio-toggle:hover {
  background: #570f11;
}
.audio-track.is-playing .audio-played,
.audio-track.is-playing .audio-handle {
  background: #83161a;
}
.audio-track.is-playing .audio-icon {
  position: relative;
  width: 16px;
  height: 20px;
  margin-left: 0;
  border: 0;
}
.audio-track.is-playing .audio-icon::before,
.audio-track.is-playing .audio-icon::after {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 5px;
  border-radius: 1px;
  background: #fff;
}
.audio-track.is-playing .audio-icon::before {
  left: 1px;
}
.audio-track.is-playing .audio-icon::after {
  right: 1px;
}
.audio-track .audio-main {
  flex: 1 1 auto;
  min-width: 0;
}
.audio-track .audio-title {
  margin: 0 0 10px;
  font-family: 'Bree Serif', sans-serif;
  font-weight: 700;
  color: #232323;
  line-height: 1.25;
}
.audio-track .audio-bar {
  display: flex;
  align-items: center;
  gap: 14px;
}
.audio-track .audio-progress {
  position: relative;
  flex: 1 1 auto;
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.12);
  cursor: pointer;
  touch-action: none;
}
.audio-track .audio-progress:focus-visible {
  outline: 2px solid #83161a;
  outline-offset: 4px;
}
.audio-track .audio-played {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: inherit;
  background: #5a4a3a;
}
.audio-track .audio-handle {
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #5a4a3a;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.audio-track .audio-time {
  flex: 0 0 auto;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.8rem;
  color: #717170;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Inline audio — nested at the foot of a .news article
   ------------------------------------------------------------------
   Same player language as .audio-track (round toggle, seekable rail, time
   readout, brand-red while playing) but WITHOUT the card shell: no white panel,
   no shadow, no radius. It reads as the article's own footer rather than a
   second floating card stacked inside the first. A hairline rule above sets it
   off from the copy, and column-span:all makes it a full-width strip beneath the
   newspaper columns. Same JS — it's still a .audio-track, just re-skinned. */
.audio-track--inline {
  background: none;
  border-radius: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  box-shadow: none;
  padding: 18px 0 0;
  margin: 6px 0 0;
  border-top: 1px solid #e5e5e5;
  column-span: all;
}
.audio-track--inline:last-child {
  margin-bottom: 0;
}
.audio-track--inline .audio-toggle {
  width: 50px;
  height: 50px;
}
/* Inline / block helpers
   ------------------------------------------------------------------ */
hr {
  width: 100%;
  height: 0;
  border: 0;
  border-top: 1px solid #e5e5e5;
  margin: 30px auto;
}
.scroll-anchor {
  position: absolute;
  top: -150px;
}
.scroll-anchor--lg {
  top: -200px;
}
.small-text {
  display: block;
  font-size: 90%;
}
/* Utilities
   ------------------------------------------------------------------ */
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-center img.image {
  margin-left: auto;
  margin-right: auto;
}
/* Photo galleries
   ------------------------------------------------------------------
   A floated grid with object-fit: cover crops (was per-image negative-offset
   cropping inside fixed-ratio boxes). */
.imageGallery {
  line-height: 0;
  padding: 0;
  margin: 0;
}
.gallery-cell {
  float: left;
  margin: 0;
}
.gallery-cell.gcol-4 {
  width: 24.95%;
}
.gallery-cell.gcol-3 {
  width: 33.28%;
}
.gallery-inside {
  position: relative;
  margin: 5px;
}
.imageGallery .galleryImageHolder {
  position: relative;
  width: 100%;
  padding-bottom: 75%;
  overflow: hidden;
}
img.galleryImage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
/* Home intro — lead-in + quote groups
   ------------------------------------------------------------------
   Real blocks instead of <br>-soup so spacing is structural, not line-break
   driven. The rhythm follows proximity = grouping: each lead-in hugs the quote
   it introduces (tight gap below), while a generous gap above each lead-in
   pushes the three groups apart. Sizes are baked in here now (they used to ride
   the fs-5 / fs-3 utility scale); the mobile steps live in _responsive.less. */
.intro .intro-lead {
  color: #232323;
  font-weight: 700;
  font-size: 1.5em;
  line-height: 1.25;
  margin: 1.9em auto 0.2em;
}
.intro .intro-lead:first-child {
  margin-top: 0;
}
.intro .intro-lead a {
  color: inherit;
  text-decoration: none;
}
.intro .intro-lead a:hover {
  text-decoration: underline;
}
.intro .intro-quote {
  color: #3f3f3f;
  font-size: 1em;
  line-height: 1.55;
  margin: 0 auto;
}
.intro .intro-outro {
  color: #3f3f3f;
  font-size: 1em;
  line-height: 1.55;
  margin: 2.4em auto 0;
}
.news {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  padding: 36px 40px;
  margin: 0 0 30px;
  box-sizing: border-box;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 6px 22px rgba(0, 0, 0, 0.07);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 6px 22px rgba(0, 0, 0, 0.07);
  -ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 6px 22px rgba(0, 0, 0, 0.07);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 6px 22px rgba(0, 0, 0, 0.07);
  /* CMS body content — styled by element type, no per-element classes.
     ----------------------------------------------------------------------
     The eyebrow, title and lead image are template-injected from the article's
     frontmatter, so they keep their classes (the build controls that markup).
     But the BODY is freeform: Hanna writes markdown and it renders to plain
     `p / h3 / img / strong / em / a`. So the body must style itself by TAG — a
     body image needs no <figure> wrapper, a subhead no class. This is what lets
     the same CSS dress whatever the CMS emits. (See .agents/cms-spec.md.) */
}
.news:last-child {
  margin-bottom: 0;
}
.news .news-body {
  column-count: 3;
  column-gap: 40px;
  column-rule: 1px solid rgba(0, 0, 0, 0.08);
  column-fill: balance;
  orphans: 3;
  widows: 3;
}
.news.news--bulletin .news-body {
  column-count: 1;
  column-rule: none;
}
.news .news-eyebrow {
  column-span: all;
  margin: 0 0 4px;
  font-family: 'Bree Serif', sans-serif;
  font-size: 0.8em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8d2424;
}
.news .news-title {
  column-span: all;
  margin: 0 0 0.6em;
  font-size: 1.7em;
}
.news .news-eyebrow + .news-title {
  margin-top: 0;
}
.news p {
  margin: 0 0 1em;
  break-inside: auto;
}
.news p:last-child {
  margin-bottom: 0;
}
.news .news-figure {
  margin: 0 0 1em;
  break-inside: avoid;
}
.news .news-figure img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 8px;
}
.news .news-figure figcaption {
  margin-top: 6px;
  font-size: 0.85em;
  font-style: italic;
  color: #3f3f3f;
}
.news .news-figure--full {
  column-span: all;
  margin-bottom: 1.25em;
  text-align: center;
}
.news .news-figure--full img {
  width: auto;
  max-width: 100%;
  max-height: 520px;
  margin: 0 auto;
}
.news .news-body > img,
.news .news-body p > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.news .news-body > img {
  margin: 0 0 1em;
  break-inside: avoid;
}
.news .news-body p:has(> img) {
  margin: 0 0 1em;
  break-inside: avoid;
}
.news .news-body p:has(> img) > img {
  margin: 0;
}
.news .news-body p:has(> img):has(+ p > em:only-child) {
  margin-bottom: 4px;
}
.news .news-body p:has(> img) + p:has(> em:only-child) {
  margin: 0 0 1em;
  font-size: 0.85em;
  font-style: italic;
  color: #3f3f3f;
  break-inside: avoid;
}
.news .news-body h3 {
  color: #232323;
  break-after: avoid;
  break-inside: avoid;
}
/* GDPR */
.gdpr {
  position: fixed;
  inset: 0;
  top: auto;
  animation: fade-in 0.3s ease;
  z-index: 99999999999999;
  background: lightgray;
  text-align: left;
  padding: 2rem;
  display: none;
}
.gdpr > .btn {
  float: right;
}
.gdpr > h4 {
  margin-top: 0;
}
.gdpr[style*="block"] ~ .wrapper {
  padding-bottom: 20vh;
}
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
}
.lightbox.is-open {
  display: flex;
}
html.lightbox-open,
html.lightbox-open body {
  overflow: hidden;
}
.lightbox__stage {
  margin: 0;
  max-width: 90vw;
  max-height: 90vh;
}
.lightbox__stage img {
  display: block;
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
}
.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  border: 0;
  background: transparent;
  color: #000;
  font-family: inherit;
  font-size: 45px;
  font-weight: 400;
  line-height: 0.75em;
  cursor: pointer;
  padding: 10px;
  transition: opacity 200ms ease;
}
.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover {
  opacity: 0.6;
}
.lightbox__close[hidden],
.lightbox__prev[hidden],
.lightbox__next[hidden] {
  display: none;
}
.lightbox__close {
  top: 20px;
  right: 20px;
}
.lightbox__close:before {
  content: '\00D7';
}
.lightbox__prev {
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.lightbox__prev:before {
  content: '\3008';
  position: relative;
  left: -10px;
}
.lightbox__next {
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.lightbox__next:before {
  content: '\3009';
  position: relative;
  right: -10px;
}
.jq-gcal-row {
  display: table;
  width: 100%;
  border-top: 1px solid rgba(0, 0, 0, 0.13);
  margin-top: 30px;
}
.jq-gcal-row:first-child {
  border-top: none;
  margin-top: 0;
}
.jq-gcal-row.jq-gcal-continuous-day {
  border-top: none;
}
.jq-gcal-row.jq-gcal-continuous-day .jq-gcal-day {
  display: none;
}
.jq-gcal-row.jq-gcal-continuous-day .jq-gcal-info {
  border-top: 1px solid rgba(0, 0, 0, 0.13);
}
.jq-gcal-cal {
  display: table-cell;
  width: 100px;
  padding-top: 1.3em;
  padding-right: 25px;
  vertical-align: top;
}
.jq-gcal-day {
  display: block;
  text-align: center;
  border-radius: 0.5rem;
  color: #ffffff;
  background: #570f11;
  min-width: 75px;
}
.jq-gcal-dm {
  font-weight: bold;
  font-size: 0.8em;
  display: block;
  background: #83161a;
  color: #ffffff;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  padding: 2px 0;
}
.jq-gcal-dd {
  font-size: 3em;
  line-height: 1;
  font-family: 'Bree Serif', sans-serif;
  color: #ffffff;
  display: block;
}
.jq-gcal-dy {
  display: block;
  font-size: 0.8em;
  color: #ffffff;
}
.jq-gcal-dd + .jq-gcal-dy {
  padding-bottom: 0.5rem;
}
.jq-gcal-until-day {
  text-align: center;
  font-weight: lighter;
  font-size: 0.7em;
  display: block;
  margin-top: 0.5em;
}
.jq-gcal-until-day b {
  margin-top: -0.2em;
  display: block;
  line-height: 1.5;
}
.jq-gcal-info {
  display: table-cell;
  padding-top: 1em;
  vertical-align: top;
}
.jq-gcal-time {
  font-size: 1.1em;
  font-weight: bold;
  color: #8d2424;
  display: block;
}
.jq-gcal-time.hidden {
  display: none;
}
.jq-gcal-title {
  font-size: 2em;
  font-weight: lighter;
  line-height: 1.6;
  font-family: 'Bree Serif', sans-serif;
  color: #83161a;
  margin-top: 0;
}
.jq-gcal-description {
  padding: 0;
  display: block;
  font-family: 'Atkinson Hyperlegible', sans-serif;
}
.jq-gcal-description p {
  padding: 0 0 5px;
  font-family: 'Atkinson Hyperlegible', sans-serif;
}
.jq-gcal-description ul,
.jq-gcal-description ol {
  margin-left: 20px;
  font-family: 'Atkinson Hyperlegible', sans-serif;
}
.jq-gcal-location {
  display: block;
  padding-top: 0.5em;
  font-family: 'Atkinson Hyperlegible', sans-serif;
}
.jq-gcal-more {
  display: block;
  padding-top: 1em;
  font-family: 'Bree Serif', sans-serif;
}
.gcal-consent {
  padding: 1.5em;
  border: 1px solid #e5e5e5;
  border-radius: 0.5rem;
  background: rgba(0, 0, 0, 0.05);
  font-family: 'Atkinson Hyperlegible', sans-serif;
}
.gcal-consent p {
  margin: 0 0 1em;
}
.gcal-state {
  font-family: 'Atkinson Hyperlegible', sans-serif;
  padding: 1em 0;
}
.gcal-error {
  color: #83161a;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.hero--home > .overlay-target {
  position: absolute;
  top: 35.6%;
  left: 51.5%;
  width: 14%;
  height: 7.3%;
  background: transparent url('/assets/gfx/home_buttons.png') top right no-repeat;
  background-size: auto 200%;
}
.hero--home > .overlay-target:hover {
  background-position: bottom right;
}
.hero--home > .overlay-target + .overlay-target {
  top: 31.3%;
  left: 49.5%;
  width: 11%;
  height: 7.3%;
  background-position: top left;
}
.hero--home > .overlay-target + .overlay-target:hover {
  background-position: bottom left;
}
.col ul {
  margin: 15px 0 0 20px;
  padding: 0;
  z-index: 99;
}
.col ul li {
  margin-bottom: 5px;
}
.col ul li a {
  color: #4f4f4e !important;
  font-weight: bold;
}
.col ul li a:hover {
  text-decoration: underline;
  color: #83161a;
}
/* Home page overlaps
   ------------------------------------------------------------------
   The hero fills the full home.jpg aspect ratio, so the foreground/path
   occupies its lower third. Pull the welcome section up over that band with a
   single ratio-based negative margin (no per-breakpoint guesses) — @hero-overlap
   mirrors the artwork (700px of the 2300px-wide image). Margin % resolves
   against the containing-block width, so the overlap scales with the painting at
   every width. */
body.page-home .hero--home {
  margin-bottom: -30.4348%;
}
body.page-home main {
  min-height: 47.8261vw;
}
/* Media Queries */
@media screen and (max-width: 992px) {
  h1 {
    font-size: 2.2em;
  }
  h2 {
    font-size: 1.8em;
  }
  h3 {
    font-size: 1.4em;
  }
  .container {
    overflow: hidden;
  }
  /* News articles drop to 2 newspaper columns on tablet */
  .news .news-body {
    column-count: 2;
  }
  /* Mobile header — hamburger left, logo centred */
  .site-header .container {
    flex-wrap: nowrap;
    padding: 0 20px;
  }
  .site-logo {
    flex: 1 1 auto;
    text-align: left;
  }
  .site-logo img {
    max-height: 40px;
  }
  .hamburger {
    display: block;
    flex: 0 0 auto;
    order: 1;
  }
  body.nav-open .hamburger span:before {
    top: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  body.nav-open .hamburger span:after {
    top: 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  /* Mobile drawer */
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 11;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    background: #fffdf2;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 280ms ease, visibility 0s linear 280ms;
    -moz-transition: opacity 280ms ease, visibility 0s linear 280ms;
    -ms-transition: opacity 280ms ease, visibility 0s linear 280ms;
    transition: opacity 280ms ease, visibility 0s linear 280ms;
  }
  .site-nav ul {
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }
  .site-nav a {
    padding: 12px 24px;
    font-size: 16px;
  }
  .site-nav li.active > a:after {
    left: 24px;
    right: 24px;
  }
  .has-submenu > .submenu {
    position: static;
    min-width: 0;
    margin: 0;
    padding: 0 0 8px;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .has-submenu > .submenu a {
    padding: 8px 24px;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.55);
  }
  .has-submenu > .submenu a:hover {
    color: #83161a;
  }
  body.nav-open {
    overflow: hidden;
  }
  body.nav-open .site-nav {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  /* Main */
  main .container {
    padding: 30px 20px;
  }
  /* Footer */
  .site-footer .container {
    padding: 30px 20px 48px;
  }
  /* No-hero page — clear the fixed bar (mobile header ≈ 60px) */
  body.no-hero main {
    padding-top: 60px;
  }
}
@media screen and (max-width: 767px) {
  h1 {
    font-size: 1.8em;
  }
  h2 {
    font-size: 1.5em;
  }
  h3 {
    font-size: 1.3em;
  }
  .intro .intro-lead {
    font-size: 1.3em;
  }
  /* Gallery */
  .imageGallery > div {
    width: 49.95% !important;
  }
  /* Columns stack. The col-w-* modifiers use `flex: 0 0 X%`, whose two-class
     specificity beats a bare `.col` rule — so they're reset here explicitly,
     otherwise the .card columns (col-w-50) stay two-up on phones. */
  .col,
  .col[class*="col-w-"] {
    flex: 0 0 100%;
    margin-bottom: 15px;
  }
  /* Video grid collapses to a single column on phones */
  .video-grid {
    grid-template-columns: 1fr;
  }
  /* Card image + side specs stack vertically when the card is full-width */
  .card .card-figure {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .card .card-figure .card-specs {
    text-align: center;
  }
  /* News articles collapse to a single column on phones — the rule between
     columns is meaningless at 1-up, so drop it. */
  .news .news-body {
    column-count: 1;
    column-rule: none;
  }
  /* Footer link columns stack into one column on phones. The flex row in
     _sections.less stays side-by-side at every width otherwise, cramming the
     lists across a ~320px screen — this is the collapse its comment promises. */
  .site-footer .footer-cols {
    flex-direction: column;
    gap: 24px;
  }
}