@font-face {
    font-family: 'CMU Serif Roman';
    font-style: normal;
    font-weight: normal;
    src: local('CMU Serif Roman'), url('../fonts/cmunrm.woff'), format('woff');
    }

    @font-face {
    font-family: 'CMU Serif Bold';
    font-style: normal;
    font-weight: normal;
    src: local('CMU Serif Bold'), url('../fonts/cmunbx.woff'), format('woff');
    }

    @font-face {
    font-family: 'Sukar Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Sukar Regular'), url('../fonts/Sukar Regular.woff'), format('woff');
    }

    @font-face {
    font-family: 'Sukar Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Sukar Bold'), url('../fonts/Sukar Bold.woff'), format('woff');
    }

    @font-face {
    font-family: 'Sukar black';
    font-style: normal;
    font-weight: normal;
    src: local('Sukar black'), url('../fonts/Sukar Black.woff'), format('woff');
    }

    @font-face {
        font-family: 'Garet-Book';
        font-style: normal;
        font-weight: normal;
        src: local('Garet-Book'), url('../fonts/Garet-Book.woff') format('woff');
        }

    @font-face {
    font-family: 'Garet-Heavy';
    font-style: normal;
    font-weight: normal;
    src: local('Garet-Heavy'), url('../fonts/Garet-Heavy.woff'), format('woff');
    }


button {
    background-color: rgba(96, 96, 96, 0.1);
    border: 1px solid #606060;
    line-height: 60%;
    padding: 0.25rem  0.45rem;
}

a:link, a:visited   {
    text-decoration: none;
    color: #ffffff;
    font-family: 'Sukar Bold';
}

a:hover {
    text-decoration: none;
    color: #ccc;
}

div#navbar-01 * { 
    text-decoration: none;
    color: #ffffff;
    font-family: 'Sukar Bold';
} 

.body-link:link, .body-link:visited {
    text-decoration: none;
    color: #212529;
}

.body-link:hover {
    text-decoration: none;
    color: #000;
}

.button-link:link, .button-link:visited {
    text-decoration: none;
    /* darkened from #bfb4a4 for WCAG AA contrast (4.5:1) against the #fffaf4
       events-block background — was 1.97:1 */
    color: #81725b;
    font-family: 'Sukar Bold';
}
.button-link-mag:link, .button-link-mag:visited {
    text-decoration: none;
    /* darkened from #fff for WCAG AA contrast (4.5:1) against the #c1b2a9
       magazine-block background — was 2.06:1 */
    color: #474747;
    font-family: 'Sukar Bold';
}
.button-link-contact:link, .button-link-contact:visited {
    text-decoration: none;
    color: #212529;
    font-family: 'Sukar Bold';
}

.button-link:hover {
    text-decoration: none;
    /* darkened further from #726b62 — after the resting-state contrast fix
       above, the old hover color was too close to the new resting color
       (#81725b) to read as a hover change at all */
    color: #5a5040;
}

.button-link-mag:hover {
    text-decoration: none;
    /* darkened further than the resting-state fix (#474747) so hover still
       reads as a visible change — the first pass landed almost the same
       darkness as resting and the hover effect was imperceptible */
    color: #2b2b2b;
}

.navlogo {
    max-height: 40px;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

/* News/Magazine/Events/About/Contact were demoted from h1 to h2 for correct
   heading structure (WCAG 1.3.1) — they all carry .block-title, so sizing
   itself was already unaffected (.display-6 wins on specificity), but this
   preserves the negative top margin they got for free from the old bare
   h1{margin} rule below, which no longer matches them now they're h2. */
.block-title {
    margin: -2.5rem 0 0 0;
}

/* "Digital Editions" / "BridalBiz" / the three Contact cards were demoted
   from h2 to h3 for correct heading structure — none of them carry a sizing
   class, so without this they'd shrink to the browser's default h3 size. */
h3 {
    font-size: 2rem;
}
body {
    font-family: 'Garet-Book';
}

/* ---------- Newsletter signup modal (#mcsignup) — matches the legal-popup
   visual language (dark header, gold serif title, blurred backdrop) instead
   of default Bootstrap modal styling. #mcsignup is the only modal on this
   site (verified 2026-09-07) — if a second modal is ever added, scope the
   .modal-backdrop rule below more narrowly then. ---------- */
/* Bootstrap darkens .modal-backdrop by animating the element's own `opacity`
   (0 -> var(--bs-backdrop-opacity), i.e. 0.5) — but backdrop-filter on the same
   element as a fractional opacity is unreliable in Chromium (the browser has
   to flatten the filtered result into an intermediate layer for the opacity
   blend, and the blur often drops out while the darkening still shows). Force
   the element to stay fully opaque and get the same 50% look from the
   background-color's own alpha channel instead, so the blur composites
   normally. */
.modal-backdrop.show {
    opacity: 1;
    background-color: rgba(0, 0, 0, .5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#mcsignup .modal-content {
    border: none;
    border-radius: 4px;
    box-shadow: 0 24px 72px rgba(0, 0, 0, .28);
    overflow: hidden;
}

#mcsignup .modal-header {
    background: #1a1a1a;
    border-bottom: 1px solid #333;
    padding: 1.2rem 1.75rem;
    /* overflow:hidden on .modal-content alone can leave a 1px unclipped sliver
       at the top corners in Chromium; rounding the header itself removes the
       reliance on that clip being pixel-perfect. */
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

#mcsignup .modal-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: .95rem;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #d4b896;
}

#mcsignup .btn-close {
    /* Bootstrap's default close icon is a dark SVG; invert it to read on the dark header */
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: .7;
}

#mcsignup .btn-close:hover {
    opacity: 1;
}

#mcsignup .modal-body {
    background: #fff;
    padding: 1.75rem 2rem 2rem;
}

#mcsignup .modal-body p.lead {
    font-family: Georgia, 'Times New Roman', serif;
    color: #444;
}

#mcsignup .indicates-required,
#mcsignup .mc-field-group label,
#mcsignup .mc-field-group strong {
    font-family: 'Garet-Book', Helvetica, Arial, sans-serif;
    color: #2a2a2a;
}

#mcsignup #mc-embedded-subscribe {
    background: #bfb4a4;
    border: 1px solid #bfb4a4;
    color: #fff;
    font-family: 'Sukar Bold', Helvetica, Arial, sans-serif;
    padding: .5rem 1.5rem;
    border-radius: 3px;
    transition: background-color .2s ease, border-color .2s ease;
}

#mcsignup #mc-embedded-subscribe:hover {
    background: #a89a86;
    border-color: #a89a86;
}

#mcsignup .modal-footer {
    background: #fff;
    border-top: 1px solid #ede8e2;
    padding: 1rem 1.75rem 1.5rem;
}

#mcsignup .modal-footer .btn-secondary {
    background: transparent;
    border: 1px solid #bfb4a4;
    color: #212529;
    font-family: 'Sukar Bold', Helvetica, Arial, sans-serif;
}

#mcsignup .modal-footer .btn-secondary:hover {
    background: #bfb4a4;
    border-color: #bfb4a4;
    color: #fff;
}

/* ---------- #mcsignup form layout pass (2026-09-07) ----------
   Mailchimp's embed CSS sizes the form to fit-content and stacks every label
   above its input, which left the dialog lopsided (fields ended ~120px short
   of the right edge) and ~950px tall. Below: full-width form, label-in-front
   for the text inputs, radio options laid out in a row, centred section
   headings, and both actions on a single centred row. ---------- */
#mcsignup #mc_embed_signup {
    width: auto;
    background: transparent;
    font-family: 'Garet-Book', Helvetica, Arial, sans-serif;
}

/* uniform vertical rhythm between field groups */
#mcsignup #mc_embed_signup form {
    margin: 0;
}

#mcsignup #mc_embed_signup .mc-field-group {
    width: 100%;
    margin: 0 0 .85rem;
    padding: 0;
}

#mcsignup #mc_embed_signup .indicates-required {
    text-align: center;
    margin: 0 0 1.1rem;
    font-size: .85rem;
}

/* section headings for the radio groups, centred to match the buttons */
#mcsignup #mc_embed_signup .mc-field-group.input-group > strong {
    display: block;
    text-align: center;
    margin: 0 0 .5rem;
    font-weight: 600;
}

/* text fields: label in front of the input, sharing one row */
#mcsignup #mc_embed_signup .mc-field-group:not(.input-group) {
    display: flex;
    align-items: center;
    gap: 1rem;
}

#mcsignup #mc_embed_signup .mc-field-group:not(.input-group) > label {
    flex: 0 0 38%;
    margin: 0;
    text-align: right;
}

#mcsignup #mc_embed_signup .mc-field-group:not(.input-group) > input {
    flex: 1 1 auto;
    width: auto;
    margin: 0;
}

/* radio groups keep the heading above, but the options run across */
#mcsignup .mc-field-group.input-group ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

#mcsignup #mc_embed_signup .mc-field-group.input-group li {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
}

#mcsignup #mc_embed_signup .mc-field-group.input-group label {
    margin: 0;
    font-weight: 400;
}

/* Subscribe + Close together on one centred row */
#mcsignup .mc-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .75rem;
    margin-top: 1.4rem;
    padding-top: 1.25rem;
    border-top: 1px solid #ede8e2;
}

#mcsignup .mc-actions #mc-embedded-subscribe {
    margin: 0;
}

#mcsignup .mc-actions .btn-secondary {
    background: transparent;
    border: 1px solid #bfb4a4;
    color: #212529;
    font-family: 'Sukar Bold', Helvetica, Arial, sans-serif;
}

#mcsignup .mc-actions .btn-secondary:hover {
    background: #bfb4a4;
    border-color: #bfb4a4;
    color: #fff;
}

/* Subscribe is an <input type=submit> and Close a <button>, so they pick up
   different default metrics (32px vs 38px tall) - match them explicitly so
   they sit level on the shared row. */
#mcsignup .mc-actions #mc-embedded-subscribe,
#mcsignup .mc-actions .btn-secondary {
    height: 40px;
    padding: 0 1.5rem;
    font-size: .95rem;
    line-height: 1;
    border-radius: 3px;
}

/* ---------- small footer (partials/_footer_small.twig) — every page except
   the homepage, which keeps its own large footer. Links left, icons right,
   both on one row; below 576px they stack, centred. ---------- */
.bb-footer-small {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 2rem;
    text-align: left;
    background-color: #fffaf4;
    border-top: 1px solid #ede8e2;
}

.bb-footer-small-links {
    margin-bottom: 0;
}

/* .sm-footer-icon-bar itself is tuned for the homepage's stacked, centred
   layout (top margin) — reset here since this is a single compact row. */
.bb-footer-small-icons {
    display: flex;
    gap: .5rem;
}

.bb-footer-small-icons.sm-footer-icon-bar a {
    margin-top: 0;
    margin-right: 0;
}

@media (max-width: 575.98px) {
    .bb-footer-small {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}