/*
 Theme Name:   neve-child
 Theme URI:    
 Description:  Neve is a next-generation, ultra-fast WordPress theme designed for top performance, SEO, and Core Web Vitals. Its lightweight codebase and small size ensure minimal overhead and lightning-fast load times. Fully compatible with the block editor, popular page builders (Elementor, Bricks, Oxygen etc), and WooCommerce, it’s perfect for blogs, small businesses, agencies, portfolios, and online stores. With responsive design, multilingual translations, and easy customization options, Neve empowers you to create a future-proof, high-ranking online presence. Discover everything Neve has to offer and explore our powerful premium version at https://themeisle.com/themes/neve/.
 Author:       Your Name
 Template:     neve   
 Version: 1.0.30
*/

/* Add your custom CSS below */
.header--row .nv-nav-wrap .primary-menu-ul .neve-mega-menu .neve-mm-col:not(:last-child) {
    border-right: 1px solid #cfcec8 !important;
}

/* === Mega menu: full-width dropdown below BOTH header rows === */
/* Root cause: the mega menu was positioned inside header-main (row 1, 69px)
   which caused it to overlap the logo, search bar, cart, and My Account.
   Fix: anchor to .hfg_header (both rows combined, ~133px) so top:100% clears everything.
   Keep full-width appearance matching the original Neve mega menu design. */

#header-grid.hfg_header.site-header:not(.is-sticky) {
    position: relative;
    z-index: 900;
}
/* Make the entire chain from .hfg_header down to mega li static,
   so the absolutely-positioned sub-menu anchors to .hfg_header */
.header-main-inner,
.header--row.header-main {
    position: static !important;
}
.header-main .container,
.header-main .row--wrapper,
.header-main .hfg-slot,
.header-main .builder-item,
.header-main .item--inner,
.header-main .nv-nav-wrap,
.header-main .nav-menu-primary,
.header-main .primary-menu-ul,
.header-main .primary-menu-ul > li.neve-mega-menu {
    position: static !important;
}
/* Header bottom row sits above the mega dropdown visually */
.header--row.header-bottom {
    position: relative;
    z-index: 10;
}
/* === Logo overlap fix (permanent) ===
   Problem: The logo seal (97px tall) extends 21px below header-main (69px)
   into the header-bottom row. header-bottom-inner has position:relative +
   background:white from Neve, creating a stacking context that paints
   OVER the logo's bottom portion.
   
   Root cause: .site-logo has z-index:9 but it's inside header-main (static).
   header-bottom-inner is position:relative in a higher stacking context.
   
   Fix: Give .site-logo z-index:9999 and ensure its parent creates a proper
   stacking context by making the header wrapper position:relative. */
.hfg_header .site-logo {
    z-index: 9999 !important;
}
/* Full-width mega dropdown, anchored below .hfg_header */
.header-main .primary-menu-ul > li.neve-mega-menu > .sub-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
    z-index: 999;
    background: #fff !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    border-top: 2px solid #7b1113;
    padding: 20px 0;
}
/* Center the column content within the full-width dropdown */
.neve-mega-menu > .sub-menu > .submenu-inner {
    display: flex;
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 20px;
}


ul#footer-menu {
    position: relative;
    padding-top: 60px;
}

.newsletter-footer p a {
    color: #f7f3ce;
    text-decoration: underline;
}
.hfg_header.site-header.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}


.footer-btn {
    background-color: #edeae3;
    color: #2c2218 !important;
    padding: 10px 20px;
    display: inline-block;
    font-size: 16px;
}

.footer-btn:hover{
    font-weight: bold;
}

ul.sub-menu.dropdown-open {
    display: block;
    visibility: visible;
    opacity: 1;
}

/* Mega menu columns: always flex (hover + click) */
.neve-mega-menu > .sub-menu > .submenu-inner {
    display: flex;
    margin: 0 auto;
    max-width: 1200px;
}

ul.sub-menu.dropdown-open .submenu-inner {
    display: flex;
    margin: 0 auto;
    max-width: 1200px;
}

ul#footer-menu::before {
    content: "";
    width: 40px;
    height: 1px;
    background-color: #edeae3;
    position: absolute;
    top: 40px;
    left: 15px;
}

ul#footer-menu li {
    margin-bottom: 12px;
    width: 42%;
}

ul#footer-menu li:hover a{
	text-decoration: underline;
	color: #edeae3;
}

.left-class {
    margin-left: auto;
    max-width: 470px;
    padding: 40px 40px 40px 0;
    min-width: 460px !important;
}

.right-class {
    margin-right: auto;
    max-width: 469px;
    padding: 40px 0 40px 40px;
    min-width: 460px !important;
}

.p-line-height  p {
    line-height: 1.375rem !important;
}
.envirabox-container {
  
    z-index: 99992999 !important;
   
}

.full-image .kt-inside-inner-col {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-section {
    padding: 0 !important;
}

.custom-hero-heading:after {
    content: "";
    display: block;
    width: 40px;
    height: 1px;
    background-color: #edeae3;
    position: relative;
    top: 20px;
}

.nav-ul .sub-menu li>.wrap > span {
    font-family: Quattrocento, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.75rem;
    color: #600;
    text-transform: uppercase;
}

.full-image {
    min-height: 300px !important;
}

.wp-block-kadence-pane.kt-accordion-pane {
    margin-bottom: 10px !important;
    border: 0 !important;
    border-bottom: 0.5px solid #322218 !important;
    background-color: #fff !important;
}

body {
    font-family: Quattrocento, Helvetica Neue, Helvetica, Arial, sans-serif !important;
    line-height: 1.5;
    color: #2c2218;
    background-color: #fff;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: #fff0;
}

.group-list > div > ul {
    margin: 0;
}

.group-list > div > ul li {
    margin-top: 0;
}


h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 0px !important; 
}

ol.wp-block-list {
    margin: 0 0 1rem 0;
}

ul.wp-block-list {
    margin: 0 0 1rem 0 !important;
}

ul#ulHeader {
    margin: 0 0 1rem 0 ;
}

.builder-item .item--inner {
    text-transform: capitalize !important;
}

.caption,
.small,
caption,
p,
small {
    font-family: Quattrocento, Helvetica Neue, Helvetica, Arial, sans-serif !important;
}

p {
    line-height: inherit;
}

.mb-0 {
    margin-bottom: 0;
}

.hover-style1:hover {
    border: 1px solid #2c2218 !important;
    outline: 1px solid #2c2218 !important;
}

.hover-style1:hover span {
    font-weight: bold;
    color: #000;
}

.nv-active {
    border-bottom: 3px solid #600;
}

.header-menu-sidebar .nav-ul li .wrap {
    padding: 4px 8px !important;
}

@media (min-width: 991px) {
    .header--row-inner .site-logo {
        position: absolute;
        z-index: 9;
        top: 6px;
    }

    form>div.uvs-mic-band {
        width: 100% !important;
    }
}

.nv-page-title-wrap {
    margin-top: 0 !important;
}

.center.links-block:after {
    left: 50%;
    transform: translateX(-50%);
}

.links-block, .white-line{
	position: relative;
}

.uniqe-list {
    list-style: none;
    padding: 0;
}

.my-account-component .sub-menu {
    top: 50px !important;
}

.uniqe-list li a {border-bottom: 1px solid #edeae3;width: 100%;display: inline-block; padding: 10px 14px;}

.uniqe-list li {
    margin-top: 0 !important;
}

.arrow-icon, .link-icon {
    position: relative;
}

.arrow-icon:after {
    content: " ";
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAAGFBMVEVHcEyQkICSkoaXl4uQkIGRkYWUlIKPj4Cjp7qNAAAAB3RSTlMA1BUWviwrW/TlJAAAADBJREFUGNNjYKA6YHVC4rAUKiA4TOJCSFKKyFLMKFKGyFLIHBRlOCVQLGVzYqABAABDDgVh8g4dFgAAAABJRU5ErkJggg==);
    background-repeat: no-repeat;
    background-position: 100% 0;
    background-size: 24px 24px;
    position: absolute;
    top: 10px;
    right: 5px;
    width: 24px;
    height: 24px;
}

.link-icon:after{
	    content: " ";
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAAElBMVEVHcEyQkICSkoePj4GQkICPj4CbDTI7AAAABXRSTlMA1xRJkcR026MAAABhSURBVBjTY2AgEjCLhoaGMgBxAJDDGIrEYQ0AK1BE4jCJiiI4ioGqcA6TqBArnKMYqADnACUg9oA4QAk4BywBUwaWgHIgOmAyjgpIHCYGJA4Ddg7YCyAgAPMcEAQaEBscABOBFuSnBL4TAAAAAElFTkSuQmCC);
    background-repeat: no-repeat;
    background-position: 100% 0;
    background-size: 24px 24px;
    position: absolute;
    top: 10px;
    right: 20px;
    width: 24px;
    height: 24px;
}

.links-block:after {
    content: "";
    display: block;
    width: 40px;
    height: 1px;
    background-color: #2c2218;
    position: relative;
    top: 20px;
}

.icon-space::after {
    right: 6px !important;
}

.white-line:after{
	background-color: #edeae3;
}

.hero-section-img {
    width: 1585px !important;
    object-fit: cover;
}

form>div.uvs-mic-band {
    width: 300px !important;
}

form>div.uvs-mic-band>button {
    right: -42px;
}

.nv-page-title {
    display: none !important;
}

.menu-wine-tab {
    width: 70%;
}

.builder-item--my_account a {
    font-weight: 400;
    font-size: 18px;
    font-family: 'Quattrocento';
}

.my-account-component .sub-menu {
    background: #f5f3ef;
    border: 1px solid #cfcec8;
    padding: .75rem 0;
    max-width: 230px;
    top: 53px;
}

.m-style>ul>li>.wrap::after,
.sm-style .sub-menu .wrap::after {
       background-color: #8f8f80 !important;
    top: 24px !important;
    height: 4px !important;
}

.my-account-component .sub-menu a:hover {
    background-color: #cfcec8;
    color: #2c2218;
}

.my-account-has-dropdown .my-account-container {
    display: flex;
    align-items: center;
}

.my-account-component .sub-menu .submenu-inner {
    max-width: 100%;
    display: block;
}

.my-account-has-dropdown .my-account-container .sub-menu-icon {
    width: 8px;
}

.my-account-container:focus-within .sub-menu,
.my-account-container:hover .sub-menu {
    visibility: visible;
    opacity: 1;
}

.centered-layout{
	max-width: 800px;
	margin: 0 auto;
}

.mw-100{
	max-width: 100% !important;
}


@media only screen and (max-width: 960px) {
    .footer--row-inner  .hfg-slot.center {
    align-items: start;
    padding: 0 20px;
    }
}


@media only screen and (max-width: 767px) {
    .menu-wine-tab {
        width: 100%;
    }

    .history-img {
        height: 210px !important;
    }

    .floor-plans-img>img {
        height: auto !important;
    }
	.centered-layout{
		text-align: left;
}
}

@media (min-width: 1028px) {
    .nav-ul .sub-menu li {
        min-width: fit-content;
        width: 100%;
    }

    .custom-private-menu .sub-menu {
        position: unset;
        box-shadow: none !important;
    }

    .neve-mega-menu .sub-menu .sub-menu {
        opacity: 1 !important;
        visibility: visible !important;

    }

    .neve-mm-col>ul li:hover {
        background-color: rgb(237 234 227 / .6);
    }
}

.ticss-f9cac12c {
    padding: 0;
}

.neve-mega-menu {
    margin-top: 20px !important;
    font-weight: 400;
    font-size: 18px;
    font-family: 'Quattrocento';
}


.neve-mm-heading>div>a {
    color: #812323 !important;
    font-size: 20px !important;
    font-family: 'Quattrocento';
}

.nv-active a{
	color: #2c2218;
}

.neve-mm-heading>ul>li {
    font-weight: 400;
    font-size: 16px;
    font-family: 'Quattrocento';

}

.widget-area>.widget {
    word-break: break-word;
    margin-bottom: 15px;
}

#menu-footer>li {
    font-size: 14px;
    font-family: 'Quattrocento Sans';
    font-weight: 700;
}

#menu-footer>li:hover {
    text-decoration: underline;
}

#menu-footer {
    column-count: 2;
    column-gap: 40px;
    list-style: none;
    padding: 0;
    margin: 0;
}

#menu-footer li {
    break-inside: avoid;
    margin-bottom: 8px;
}

.footer--row-inner.footer-top-inner.footer-content-wrap {
    padding: 40px 0;
	  min-height: 300px;
    background-color: #2c2218;
    color: #edeae3;
    font-family: Quattrocento Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 1rem;
}

.privacy-statement>div>div>div h2 {
    margin-bottom: 10px;
}

.terms-of-use>div>div>div h2 {
    margin-bottom: 10px;
}

.separator-hr {
    border-width: 1px !important;
    margin-top: 50px;
}

.separator-hr-2 {
    border-width: 1px !important;
    margin-top: 10px;
}

.vintage-bg {
    background-color: #edeae3;
}

@media (max-width: 959px) {
    .builder-item--logo {
        --maxwidth: 140px !important;
    }

    .row.row--wrapper[data-section="hfg_header_layout_bottom"] {
        justify-content: center;
    }

    .neve-mega-menu {
        margin-top: 0 !important;
    }

    .submenu-inner {
        width: unset !important;
        display: unset !important;
    }

    .m-style>ul>li>.wrap:hover::after,
    .sm-style .sub-menu .wrap:hover::after {
        width: 0 !important;
    }
}


@media (max-width: 599px) {
    form>div.uvs-mic-band {
        min-width: 250px !important;
        width: 100% !important;
    }

    .row.row--wrapper[data-section="hfg_header_layout_bottom"] .builder-item.tablet-left.mobile-left {
        width: 100%;
    }

    .row.row--wrapper[data-section="hfg_header_layout_bottom"] {
        grid-template-columns: 100%;
    }
}

@media (max-width: 1000px) {
    .left-class {
        margin-left: unset;
        min-width: 100% !important;
    }
	 .right-class {
        margin-left: unset;
        min-width: 100% !important;
    }

}

@media (max-width: 990px) {
    .left-class {
        padding: 20px;
    }
	.right-class {
        padding: 20px;
    }
}

@media (max-width:767px) {
    .left-class {
        max-width: 100%;
        padding: 40px 20px;
    }
	
	  .right-class {
        max-width: 100%;
        padding: 40px 20px;
    }

    .full-image {
        min-height: 300px !important;
    }

    .left-class .kt-inside-inner-col {
        padding: 0 !important;
    }
	 .right-class .kt-inside-inner-col {
        padding: 0 !important;
    }
}

@media (max-width: 575px) {
    .full-image {
        min-height: 220px !important;
    }
	.ticss-d1d60f63 {
    margin-left: inherit !important;
}

    .h1,
    .h2,
    h1,
    h2 {
        font-size: 1.6rem !important;
    }
}
/* ═══════════════════════════════════════════════════════════════════════
 * SITEWIDE CONTRAST: White text on maroon (#7b1113) backgrounds
 * Any interactive element (button, tab, link, badge) with maroon bg
 * MUST use white text for accessibility and readability.
 * ═══════════════════════════════════════════════════════════════════════ */

/* Buttons and links with maroon background */
a[style*="background"][style*="7b1113"],
button[style*="background"][style*="7b1113"],
.has-maroon-background,
[style*="background-color:#7b1113"],
[style*="background-color: #7b1113"],
[style*="background:#7b1113"],
[style*="background: #7b1113"] {
    color: #fff !important;
}

/* Hover states that transition to maroon */
.esp-tab:hover,
.esp-page-button:hover:not(:disabled),
.esp-page-button.active,
.nv-btn:hover,
.wp-block-button__link:hover,
button.has-background:hover,
a.has-background:hover {
    color: #fff !important;
}

/* Active/selected states with maroon */
.esp-tab.active {
    color: #fff !important;
    background: #7b1113;
    border-bottom-color: #7b1113;
    border-radius: 4px 4px 0 0;
}

/* Neve theme buttons */
.button-primary[style*="7b1113"],
input[type="submit"][style*="7b1113"],
.nv-button.primary-btn {
    color: #fff !important;
}

/* WordPress block buttons */
.wp-block-button .wp-block-button__link {
    /* Only apply when background is maroon */
}

/* Generic: any direct child text in a maroon-bg container */
.has-cosmos-maroon-background-color,
.has-cosmos-maroon-background-color > *,
.bg-maroon, .bg-maroon * {
    color: #fff !important;
}


/* === Fix #2: Prevent parent column heading highlight on submenu hover === */
.neve-mega-menu .sub-menu .neve-mm-heading > .wrap:hover {
    background: transparent !important;
}
.neve-mega-menu .sub-menu .neve-mm-heading:hover > .wrap > a,
.neve-mega-menu .sub-menu .neve-mm-heading:hover > .wrap > span {
    color: #660000 !important;
    background: transparent !important;
}
.neve-mega-menu .sub-menu .sub-menu li > .wrap:hover {
    background: rgba(237, 234, 227, 0.5);
    border-radius: 4px;
}
.neve-mega-menu .sub-menu .sub-menu li > .wrap:hover > a {
    color: #7b1113 !important;
}

/* === Fix #5: Equalize event tile heights on Events page === */
.kb-row-layout-id_615_d3cc42-3b > .kt-row-column-wrap > .wp-block-kadence-column {
    display: flex !important;
    flex-direction: column;
}
.kb-row-layout-id_615_d3cc42-3b > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.kb-row-layout-id_615_d3cc42-3b .kb-buttons-wrap {
    margin-top: auto;
}

/* === Fix #22 (revised 2026-04-27): width parity now enforced at the data layer === */
/* Previous .entry-content max-width hack didn't apply because Kadence
   rowlayouts with align:full break out of .entry-content. Width/font parity
   between privilege-cards (713) and committees (13691) is now achieved by
   editing post_content directly (maxWidth 1223, no 14px fontSize overrides). */
body.page-id-46242 .entry-content {
    max-width: 1200px;
}

/* === Fix #18: Footer "popup"  -  prevent footer from mimicking header layout === */
/* Neve's HFG footer uses the same grid as header, creating a confusing
   "duplicate header" appearance. Ensure footer looks distinct from header. */

/* Remove the min-height that creates excessive whitespace before footer */
#page, .wrapper, .site {
    min-height: auto !important;
}

/* Ensure the main content area fills properly without huge gaps */
.neve-main {
    min-height: 0 !important;
}

/* === Fix #19: Scroll stutter  -  smooth sticky header transitions === */
/* The sticky header toggle between static/fixed causes layout jumps.
   Use smooth transition and ensure no reflow on toggle. */
.hfg_header.site-header {
    transition: none !important;
    will-change: transform;
}

/* Prevent the content from jumping when header becomes fixed */
body.has-sticky-header {
    padding-top: 0 !important;
}



/* === SSR fallback results for /search-results/ (renders when JS/AJAX fails) === */
/* JS-driven UI replaces .esp-search-results innerHTML when it runs successfully */
.esp-ssr-results { margin-top: 16px; }
.esp-ssr-heading {
    font-family: "Sorts Mill Goudy", Georgia, serif;
    font-size: 22px;
    color: #7b1113;
    margin: 20px 0 8px;
    border-bottom: 1px solid #e0ddd6;
    padding-bottom: 4px;
}
.esp-ssr-count { color: #888; font-size: 14px; font-weight: normal; }
.esp-ssr-list { list-style: none; padding: 0; margin: 0; }
.esp-ssr-item { padding: 12px 0; border-bottom: 1px dotted #e0ddd6; }
.esp-ssr-item:last-child { border-bottom: none; }
.esp-ssr-title {
    display: inline-block;
    font-family: "Sorts Mill Goudy", Georgia, serif;
    font-size: 18px;
    color: #7b1113;
    text-decoration: none;
    margin-bottom: 4px;
}
.esp-ssr-title:hover { text-decoration: underline; }
.esp-ssr-excerpt {
    font-family: "Quattrocento", Georgia, serif;
    font-size: 14px;
    color: #555;
    line-height: 1.5;
    margin: 4px 0 0;
}
.esp-ssr-excerpt mark.esp-highlight { background: #fff3b0; color: inherit; padding: 0 2px; }
.esp-ssr-noresults {
    padding: 30px 20px;
    text-align: center;
    background: #faf8f6;
    border: 1px solid #e8e4e0;
    border-radius: 8px;
    font-family: "Sorts Mill Goudy", Georgia, serif;
    font-size: 16px;
    color: #666;
}


/* === Fix: submenu hover must NOT bubble up to top-level nav heading (2026-04-27) ===
   Neve's `.nav-ul li:hover > .wrap > a` rule triggers on the parent <li> whenever
   ANY descendant is hovered, so hovering a submenu link also highlighted the top-level
   header (e.g. hovering "Calendar" also lit up "EVENTS"). Use :has() to re-assert
   the default color and hide the ::after underline expansion when a submenu
   descendant is the hovered element. */
.m-style > ul > li:has(.sub-menu :hover) > .wrap > a {
    color: var(--color, var(--nv-text-color)) !important;
}
.m-style > ul > li:has(.sub-menu :hover) > .wrap::after {
    width: 0 !important;
}
/* mega-menu column heading: don't highlight when a leaf link in its column is hovered */
.neve-mega-menu .neve-mm-heading:has(.sub-menu :hover) > .wrap > a,
.neve-mega-menu .neve-mm-heading:has(.sub-menu :hover) > .wrap > span {
    color: #812323 !important;
    background: transparent !important;
}


/* === SITEWIDE: maroon-background safety net (2026-04-28) ============
   Recurring bug: agents add maroon backgrounds to buttons/links, then
   Neve's `a` color rule wins and renders invisible maroon-on-maroon text.
   This block forces white text on every element whose background is one
   of our brand maroons, regardless of element type or theme cascade.
   See feedback_hover_contrast.md and feedback_design_system.md. */
[style*="background:#7b1113"], [style*="background-color:#7b1113"],
[style*="background:#6d1b1b"], [style*="background-color:#6d1b1b"],
[style*="background:#5a0c0e"], [style*="background-color:#5a0c0e"],
[style*="background:#8b1113"], [style*="background-color:#8b1113"],
.has-maroon-background-color,
.cc-bg-maroon,
.cc-btn-maroon,
.cc-btn-maroon:link,
.cc-btn-maroon:visited {
    color: #ffffff !important;
}
[style*="background:#7b1113"] *, [style*="background-color:#7b1113"] *,
[style*="background:#6d1b1b"] *, [style*="background-color:#6d1b1b"] *,
[style*="background:#5a0c0e"] *, [style*="background-color:#5a0c0e"] *,
.has-maroon-background-color *,
.cc-bg-maroon *,
.cc-btn-maroon * {
    color: inherit !important;
}

/* --- Net hardening (2026-08-16) ------------------------------------------
   1. Editors paste inline styles WITH a space after the colon; the original
      selectors only matched the unspaced form.
   2. Interaction states named explicitly: an equal-!important hover rule from
      Kadence Pro or Neve can outrank a bare attribute selector, so hover,
      focus-visible and active are pinned here with the same weight.
   3. .cc-force-white is applied at runtime by a11y-enhancements.js to any
      link/button whose COMPUTED background is a brand maroon but whose text
      is not white. That closes the class-based gap: Kadence buttons style
      through generated per-block classes, which no attribute selector can
      see. body-prefixed for specificity insurance. */
[style*="background: #7b1113"], [style*="background-color: #7b1113"],
[style*="background: #6d1b1b"], [style*="background-color: #6d1b1b"],
[style*="background: #5a0c0e"], [style*="background-color: #5a0c0e"],
[style*="background: #8b1113"], [style*="background-color: #8b1113"],
[style*="background: #7b1113"] *, [style*="background-color: #7b1113"] *,
[style*="background: #6d1b1b"] *, [style*="background-color: #6d1b1b"] *,
[style*="background: #5a0c0e"] *, [style*="background-color: #5a0c0e"] *,
[style*="background: #8b1113"] *, [style*="background-color: #8b1113"] * {
    color: #ffffff !important;
}
[style*="background:#7b1113"]:hover, [style*="background:#7b1113"]:focus, [style*="background:#7b1113"]:focus-visible, [style*="background:#7b1113"]:active,
[style*="background-color:#7b1113"]:hover, [style*="background-color:#7b1113"]:focus, [style*="background-color:#7b1113"]:focus-visible, [style*="background-color:#7b1113"]:active,
[style*="background: #7b1113"]:hover, [style*="background: #7b1113"]:focus, [style*="background: #7b1113"]:focus-visible, [style*="background: #7b1113"]:active,
.has-maroon-background-color:hover, .has-maroon-background-color:focus, .has-maroon-background-color:focus-visible, .has-maroon-background-color:active,
.cc-bg-maroon:hover, .cc-bg-maroon:focus, .cc-bg-maroon:focus-visible, .cc-bg-maroon:active,
.cc-btn-maroon:hover, .cc-btn-maroon:focus, .cc-btn-maroon:focus-visible, .cc-btn-maroon:active,
[style*="background:#7b1113"]:hover *, [style*="background: #7b1113"]:hover *,
[style*="background:#7b1113"]:focus *, [style*="background: #7b1113"]:focus *,
.has-maroon-background-color:hover *, .has-maroon-background-color:focus *,
.cc-bg-maroon:hover *, .cc-bg-maroon:focus *,
.cc-btn-maroon:hover *, .cc-btn-maroon:focus * {
    color: #ffffff !important;
}
body .cc-force-white,
body .cc-force-white:link,
body .cc-force-white:visited,
body .cc-force-white:hover,
body .cc-force-white:focus,
body .cc-force-white:focus-visible,
body .cc-force-white:active,
body .cc-force-white *,
body .cc-force-white:hover *,
body .cc-force-white:focus * {
    color: #ffffff !important;
}
body .cc-force-white svg {
    fill: currentColor;
    stroke: currentColor;
}

/* --- Interaction-state hooks (2026-08-19) --------------------------------
   .cc-white-on-maroon is applied at runtime by a11y-enhancements.js when an
   element's background turns maroon in an interaction state while its text
   stays unreadable. Unlike .cc-force-white it deliberately does NOT touch
   the resting state: the guard measures a transient state, so its fix has
   to be transient too. A mis-measurement can annoy, never blank a control.
   (The 2026-08-16 guard used .cc-force-white here and could leave a link
   permanently white on cream - that is the bug this split fixes.) */
body .cc-white-on-maroon:hover,
body .cc-white-on-maroon:focus,
body .cc-white-on-maroon:focus-visible,
body .cc-white-on-maroon:active,
body .cc-white-on-maroon:hover *,
body .cc-white-on-maroon:focus *,
body .cc-white-on-maroon:focus-visible *,
body .cc-white-on-maroon:active * {
    color: #ffffff !important;
}
body .cc-white-on-maroon:hover svg,
body .cc-white-on-maroon:focus svg,
body .cc-white-on-maroon:active svg {
    fill: currentColor;
    stroke: currentColor;
}

/* The inverse bug. Neve paints `button:hover { color:
   var(--primarybtnhovercolor) }` (white) on EVERY button, so any control
   whose background stays light in that state loses its glyph entirely -
   measured contrast 1.00 on the cart +/- chips. The guard records the
   element's resting ink in --cc-ink and hands the state back to it. */
body .cc-keep-ink:hover,
body .cc-keep-ink:focus,
body .cc-keep-ink:focus-visible,
body .cc-keep-ink:active,
body .cc-keep-ink:hover *,
body .cc-keep-ink:focus *,
body .cc-keep-ink:focus-visible *,
body .cc-keep-ink:active * {
    color: var(--cc-ink, #2c2218) !important;
}
body .cc-keep-ink:hover svg,
body .cc-keep-ink:focus svg,
body .cc-keep-ink:active svg {
    stroke: currentColor;
}

/* --- Anchors styled as solid maroon buttons (2026-08-19) -----------------
   Neve's `a:focus, a:hover { color: var(--nv-secondary-accent) }` is
   (0,1,1) and beats the single-class `color:#fff` these button families
   declare, so the label goes maroon-on-maroon the moment the anchor takes
   focus - and focus persists after a click, which is exactly the reported
   "after click" symptom. Verified on .cosmos-cart__checkout-btn: contrast
   1.06. Listed explicitly rather than as a blanket `a:focus` override so
   ordinary content links keep the design-system darken-and-underline
   treatment (feedback_design_system, feedback_hover_contrast). */
.cc-btn-maroon, .cc-btn-maroon:link, .cc-btn-maroon:visited,
.cc-btn-maroon:hover, .cc-btn-maroon:focus, .cc-btn-maroon:focus-visible, .cc-btn-maroon:active,
.cc-bul-btn-primary .wp-block-button__link:focus,
.cc-arc-back .wp-block-button__link:focus,
.cc-priv-hero-buttons .wp-block-button__link:focus,
.cosmos-cal-v3__panel-btn--ics:focus,
.cosmos-cal-v3__today-btn:focus,
.dbk-club-btn--primary:focus,
.cosmos-home-ask-button:focus,
.cosmos-store__btn--primary:focus,
.cosmos-cart__checkout-btn:focus {
    color: #ffffff !important;
}
/* === /SITEWIDE maroon-background safety net === */


/* === Live Concert page UI refresh (page-id-17458, /liveconcert/) ===
   Frontend-only: body.page-id-17458 class is set on frontend, not in
   the block editor — so all rules below stay out of Kadence's editor
   preview, leaving the editor's column flex math untouched. Card chrome
   is applied to the OUTER row wrapper (.kb-row-layout-wrap), never to
   Kadence's internal flex containers (.kt-inside-inner-col,
   .kt-row-column-wrap), so block resizing, drag-handles, and toolbar
   anchors continue to work. */

/* Kill default block stack spacing so banner sits flush against video etc. */
body.page-id-17458 .cc-lc-page,
body.page-id-17458 .cc-lc-page * {
    --wp--style--block-gap: 0;
}
body.page-id-17458 .cc-lc-page .wp-block-group__inner-container > * + *,
body.page-id-17458 .cc-lc-page .wp-block-kadence-column > .kt-inside-inner-col > * + * {
    margin-top: 0;
}

/* Hero row (tag+banner+video) — full-viewport bleed. The vw-bleed pattern
   works here because the row is a top-level block in the page-content
   stream and Neve's container can be neutralised on this single row. */
body.page-id-17458 .cc-lc-row-hero {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    box-sizing: border-box;
}
body.page-id-17458 .cc-lc-row-hero > .kt-row-column-wrap {
    max-width: none !important;
    width: 100% !important;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}
@media (max-width: 768px) {
    body.page-id-17458 .cc-lc-row-hero > .kt-row-column-wrap {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* Event card + artist card rows — centered in the available content
   area (no vw bleed). 100vw bleed was clipping inside Neve's wrapper
   on these rows and shifting them right; centered behaves predictably
   across all Neve page templates. */
body.page-id-17458 .cc-lc-row-event,
body.page-id-17458 .cc-lc-row-artist {
    width: 100% !important;
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}
body.page-id-17458 .cc-lc-row-event > .kt-row-column-wrap,
body.page-id-17458 .cc-lc-row-artist > .kt-row-column-wrap {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

/* Tag → banner → video are now ONE continuous panel: zero gap, the tag
   sits as a top-left corner badge inside the banner, banner's bottom
   edge is flush with the video's top edge. */
body.page-id-17458 .cc-lc-tag {
    position: relative;
    z-index: 2;
    margin: 0 0 -34px 18px !important;   /* negative bottom pulls banner up under it */
    padding: 0 !important;
}
body.page-id-17458 .cc-lc-tag .kb-btn-has-text {
    padding: 5px 14px !important;
    background: #ffffff !important;       /* opaque so banner bg doesn't bleed through */
}

/* Info banner — warm bg, maroon left border, joined to video below */
body.page-id-17458 p.cc-lc-banner {
    background: #f5f0eb;
    border: 1px solid #e8e2dc;
    border-bottom: 0;
    border-left: 3px solid #7b1113;
    border-radius: 6px 6px 0 0;            /* rounded top, flat bottom = joins video */
    padding: 48px 22px 16px;               /* extra top padding makes room for tag badge */
    margin: 0;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.65;
    color: #4a3f37;
}
body.page-id-17458 p.cc-lc-banner a {
    color: #7b1113;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
}
body.page-id-17458 p.cc-lc-banner a:hover,
body.page-id-17458 p.cc-lc-banner a:focus-visible {
    color: #5a0c0e;
    text-decoration-thickness: 2.5px;
    outline: 2px solid rgba(123,17,19,0.35);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Custom-HTML autoplay video container — flush below banner, full bleed.
   Top corners flat so the video joins continuously to the banner above;
   bottom corners rounded to close the panel. */
body.page-id-17458 .cc-lc-video {
    margin: 0;
    padding: 0;
    background: #1a1a1a;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0,0,0,0.12);
    width: 100%;
}
body.page-id-17458 .cc-lc-video-embed {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    width: 100%;
}
body.page-id-17458 .cc-lc-video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Desktop viewport cap so the whole iframe (incl. YouTube native play/pause/
   volume/fullscreen at the bottom edge) stays in view without scrolling.
   Width stays at the full hero-row bleed — only the iframe height is capped.
   YouTube letterboxes the video inside the iframe at its own 16:9 ratio,
   and its control bar sits at the iframe's bottom edge, now in view.
   Reserve = sticky header (~133px) + tag+banner (~95px) + breathing (~32px).
   Mobile keeps the fluid padding-bottom 16:9 above (phone heights never
   need capping). */
@media (min-width: 769px) {
    body.page-id-17458 .cc-lc-video-embed {
        --cc-lc-reserve: 260px;
        position: relative;
        width: 100%;
        height: calc(100vh - var(--cc-lc-reserve));
        padding-bottom: 0;
    }
    body.admin-bar.page-id-17458 .cc-lc-video-embed {
        --cc-lc-reserve: 292px;
    }
}

/* Fallback line under the video — minimal vertical breathing room */
body.page-id-17458 p.cc-lc-fallback {
    font-size: 13px;
    color: #6a5e57;
    margin: 10px 0 22px;
    padding-left: 4px;
}
body.page-id-17458 p.cc-lc-fallback a {
    color: #7b1113;
    font-weight: 600;
    text-decoration: underline;
}
body.page-id-17458 p.cc-lc-fallback a:hover,
body.page-id-17458 p.cc-lc-fallback a:focus-visible {
    color: #5a0c0e;
    text-decoration-thickness: 2.5px;
}

/* Event card — chrome on the OUTER row wrapper so Kadence's column flex
   stays untouched. Padding lives on the row's inner container so the card
   visually inset from the row's full-bleed edge. */
body.page-id-17458 .cc-lc-row-event {
    margin: 0 0 14px !important;
}
body.page-id-17458 .cc-lc-row-event > .kb-theme-content-width {
    background: transparent;
}
body.page-id-17458 .cc-lc-event-card > .kt-inside-inner-col {
    background: #ffffff;
    border: 1px solid #e8e2dc;
    border-radius: 10px;
    padding: 30px 24px;
    text-align: center;
}
body.page-id-17458 .cc-lc-event-date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #7b1113;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 10px;
}
body.page-id-17458 .cc-lc-event-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #f5f0eb;
    border: 1px solid #e8e2dc;
    border-radius: 8px;
    font-size: 15px;
    color: #7b1113;
}
body.page-id-17458 h1.cc-lc-event-title,
body.page-id-17458 .cc-lc-event-title.wp-block-heading {
    font-family: "Sorts Mill Goudy", Georgia, serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.25;
    color: #2c2218;
    margin: 6px 0 22px;
}
body.page-id-17458 p.cc-lc-download {
    margin: 0;
}

/* Download CTA — maroon bg + forced white text (beats Neve's `a` color) */
body.page-id-17458 p.cc-lc-download a,
body.page-id-17458 p.cc-lc-download a:link,
body.page-id-17458 p.cc-lc-download a:visited {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #7b1113 !important;
    color: #ffffff !important;
    padding: 13px 26px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    box-shadow: 0 2px 6px rgba(123,17,19,0.18);
}
body.page-id-17458 p.cc-lc-download a:hover,
body.page-id-17458 p.cc-lc-download a:focus-visible {
    background: #5a0c0e !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(123,17,19,0.25);
}
body.page-id-17458 p.cc-lc-download a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(123,17,19,0.35);
}
body.page-id-17458 p.cc-lc-download a span {
    color: #ffffff !important;
}

/* Artist bio card — chrome via padding/background on each column's inner
   container so we never touch Kadence's flex/grid wrappers. The two
   columns sit side-by-side with explicit 33/67 widths set in the block
   markup; CSS only paints surfaces and frames the photo. */
body.page-id-17458 .cc-lc-row-artist {
    margin: 0 0 24px !important;
}
body.page-id-17458 .cc-lc-artist-photo-col > .kt-inside-inner-col {
    background: linear-gradient(135deg, #f5f0eb 0%, #e8e2dc 100%);
    border: 1px solid #e8e2dc;
    border-right: 0;
    border-radius: 10px 0 0 10px;
    padding: 28px 24px;
    text-align: center;
}
body.page-id-17458 .cc-lc-artist-info > .kt-inside-inner-col {
    background: #ffffff;
    border: 1px solid #e8e2dc;
    border-left: 0;
    border-radius: 0 10px 10px 0;
    padding: 32px;
}
/* Photo — fixed 4:5 portrait, object-fit cover. Accepts ANY future
   performer photo (square, portrait, landscape, varied dimensions)
   and crops to a consistent portfolio frame. Future performers (4, 5,
   even 10+ across a season) all fit without redesign. */
body.page-id-17458 .cc-lc-artist-photo {
    margin: 0 auto;
    max-width: 280px;
    width: 100%;
}
body.page-id-17458 .cc-lc-artist-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center top;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    background: #f5f0eb;
}

body.page-id-17458 p.cc-lc-artist-label {
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #7b1113;
    margin: 0 0 6px;
}
body.page-id-17458 h2.cc-lc-artist-name,
body.page-id-17458 .cc-lc-artist-name.wp-block-heading {
    font-family: "Sorts Mill Goudy", Georgia, serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.2;
    color: #2c2218;
    margin: 0 0 10px;
}
body.page-id-17458 p.cc-lc-artist-subtitle {
    font-size: 15px;
    color: #2c2218;
    margin: 0 0 4px;
}
body.page-id-17458 p.cc-lc-artist-streaming-note {
    color: #6a5e57;
    font-size: 14px;
    margin: 0 0 18px;
}
body.page-id-17458 .cc-lc-artist-info p {
    font-size: 15px;
    line-height: 1.7;
    color: #2c2218;
    margin: 0 0 14px;
}
body.page-id-17458 .cc-lc-artist-info a {
    color: #7b1113;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
}
body.page-id-17458 .cc-lc-artist-info a:hover,
body.page-id-17458 .cc-lc-artist-info a:focus-visible {
    color: #5a0c0e;
    text-decoration-thickness: 2.5px;
    outline: 2px solid rgba(123,17,19,0.35);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Mobile — collapse artist row to single column, restore symmetric borders */
@media (max-width: 768px) {
    body.page-id-17458 .cc-lc-event-card > .kt-inside-inner-col { padding: 24px 18px; }
    body.page-id-17458 h1.cc-lc-event-title { font-size: 24px; }
    body.page-id-17458 p.cc-lc-download a { padding: 12px 20px; font-size: 13px; }
    body.page-id-17458 .cc-lc-artist-photo-col > .kt-inside-inner-col {
        border: 1px solid #e8e2dc;
        border-bottom: 0;
        border-radius: 10px 10px 0 0;
        padding: 24px;
    }
    body.page-id-17458 .cc-lc-artist-info > .kt-inside-inner-col {
        border: 1px solid #e8e2dc;
        border-top: 0;
        border-radius: 0 0 10px 10px;
        padding: 24px;
    }
    body.page-id-17458 .cc-lc-artist-photo { max-width: 220px; }
    body.page-id-17458 h2.cc-lc-artist-name { font-size: 26px; }
}
/* === /Live Concert page UI refresh === */

/* ===== BEGIN Report an Issue (post 681) mockup skin ===== */
/* Scoped to the page body class so it never leaks site-wide.
   Mockup parity: burgundy hero w/ eyebrow + rule, floating rounded card
   overlapping the hero, two-panel split, side-by-side Name/Email,
   restyled fields, green pill submit. Canonical fonts kept (Sorts Mill
   Goudy headings + Quattrocento body) per design system. */

/* ---- hero ---- */
.page-id-681 .hero-section,
.page-id-681 .hero-section.kt-row-has-bg {
  background-color: #7a0000 !important;
}
.page-id-681 .hero-section > .kt-row-column-wrap {
  max-width: 1128px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 72px 24px 150px !important;
}
.page-id-681 .hero-section .full-image { display: none !important; }
.page-id-681 .hero-section .left-class {
  flex: 1 1 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}
.page-id-681 .hero-section .left-class > .kt-inside-inner-col { padding: 0 !important; }

.page-id-681 p.cc-rai-eyebrow.wp-block-kadence-advancedheading {
  margin: 0 0 14px !important;
  font-family: "Quattrocento", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.72) !important;
  line-height: 1.2 !important;
}
.page-id-681 .hero-section h1.white-line {
  text-transform: none !important;
  font-family: "Sorts Mill Goudy", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(38px, 5vw, 64px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.02em !important;
  color: #fff !important;
  margin: 0 !important;
}
.page-id-681 .hero-section h1.white-line::after {
  content: "" !important;
  display: block !important;
  width: 54px !important;
  height: 1px !important;
  margin-top: 28px !important;
  background: rgba(255, 255, 255, 0.85) !important;
}

/* ---- floating card ---- */
.page-id-681 .kb-row-layout-id681_0a1817-30 {
  padding-left: 24px !important;
  padding-right: 24px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.page-id-681 .kb-row-layout-id681_0a1817-30 > .kt-row-column-wrap {
  max-width: 1080px !important;
  margin: -86px auto 80px !important;
  padding: 0 !important;
  gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
  background: #fff !important;
  border-radius: 22px !important;
  box-shadow: 0 24px 70px rgba(40, 25, 20, 0.14) !important;
  overflow: hidden !important;
  align-items: stretch !important;
}

/* ---- panels ---- */
.page-id-681 .kadence-column_ebb7f6-1f { background: #f6f4f2 !important; }
.page-id-681 .kadence-column_ebb7f6-1f > .kt-inside-inner-col { padding: 48px !important; }
.page-id-681 .inner-column-2 { background: #fff !important; }
.page-id-681 .inner-column-2 > .kt-inside-inner-col {
  padding: 48px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  height: 100% !important;
}

/* form-panel heading + intro */
.page-id-681 .cc-rai-formtitle {
  font-family: "Sorts Mill Goudy", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 32px !important;
  line-height: 1.15 !important;
  color: #2d221c !important;
  margin: 0 0 12px !important;
}
.page-id-681 .cc-rai-formintro {
  font-family: "Quattrocento", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 18px !important;
  line-height: 1.45 !important;
  color: #766c66 !important;
  margin: 0 0 28px !important;
}

/* info panel */
.page-id-681 .inner-column-2 h2,
.page-id-681 .inner-column-2 h3 {
  font-family: "Sorts Mill Goudy", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 32px !important;
  line-height: 1.15 !important;
  color: #7a0000 !important;
  margin: 0 0 14px !important;
}
.page-id-681 .inner-column-2 p {
  font-family: "Quattrocento", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 18px !important;
  line-height: 1.45 !important;
  color: #766c66 !important;
  margin: 0 !important;
}

/* ---- form layout: Name + Email side by side ---- */
.page-id-681 .kb-form {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 16px !important;
  row-gap: 0 !important;
  margin-top: 8px !important;
}
.page-id-681 .kb-form > div:nth-of-type(1) { grid-column: 1 / 2 !important; }
.page-id-681 .kb-form > div:nth-of-type(2) { grid-column: 2 / 3 !important; }
.page-id-681 .kb-form > div:nth-of-type(n+3) { grid-column: 1 / -1 !important; }
.page-id-681 .kb-form > label.kadence-verify-label {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.page-id-681 .kb-form .kadence-blocks-form-field { margin-bottom: 16px !important; }

/* fields */
.page-id-681 .kb-form input.kb-field,
.page-id-681 .kb-form textarea.kb-field {
  width: 100% !important;
  background: #fff !important;
  border: 1px solid #ded9d3 !important;
  border-radius: 10px !important;
  padding: 15px 16px !important;
  font-family: "Quattrocento", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 16px !important;
  color: #2d221c !important;
  box-shadow: none !important;
}
.page-id-681 .kb-form textarea.kb-field {
  min-height: 150px !important;
  height: auto !important;
  resize: vertical !important;
}
.page-id-681 .kb-form input.kb-field::placeholder,
.page-id-681 .kb-form textarea.kb-field::placeholder { color: #a6a09a !important; }
.page-id-681 .kb-form input.kb-field:focus,
.page-id-681 .kb-form textarea.kb-field:focus {
  border-color: #7a0000 !important;
  box-shadow: 0 0 0 4px rgba(122, 0, 0, 0.10) !important;
  outline: none !important;
}

/* submit button — green pill (matches existing live green) */
.page-id-681 .kb-submit-field { margin-bottom: 0 !important; }
.page-id-681 .kb-forms-submit {
  background: #2e523b !important;
  background-image: none !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 14px 30px !important;
  font-family: "Quattrocento", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background 0.15s ease, box-shadow 0.15s ease !important;
}
.page-id-681 .kb-forms-submit:hover { background: #24452f !important; color: #fff !important; }
.page-id-681 .kb-forms-submit:focus-visible {
  background: #24452f !important;
  color: #fff !important;
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(46, 82, 59, 0.25) !important;
}

/* ---- responsive ---- */
@media (max-width: 820px) {
  .page-id-681 .hero-section > .kt-row-column-wrap { padding: 56px 24px 110px !important; }
  .page-id-681 .kb-row-layout-id681_0a1817-30 > .kt-row-column-wrap {
    margin-top: -60px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .page-id-681 .kadence-column_ebb7f6-1f,
  .page-id-681 .inner-column-2 {
    width: 100% !important;
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
  .page-id-681 .kadence-column_ebb7f6-1f > .kt-inside-inner-col,
  .page-id-681 .inner-column-2 > .kt-inside-inner-col { padding: 34px 24px !important; }
  .page-id-681 .kb-form { grid-template-columns: 1fr !important; column-gap: 0 !important; }
  .page-id-681 .kb-form > div:nth-of-type(1),
  .page-id-681 .kb-form > div:nth-of-type(2) { grid-column: 1 / -1 !important; }
}
/* ===== END Report an Issue (post 681) mockup skin ===== */
/* ===== BEGIN Bulletin redesign (cc-bul) - 2026-07-06, v2 2026-08-07, v3/v4 2026-08-12 ===== */
/* Scoped to cc-bul-* classes; drives the live /members/resources/bulletin/ page (703).
   Tokens per feedback_design_system: maroon #7b1113 (hover #5a0c0e),
   espresso #2c2218, cream #f5f2ed/#edeae3, borders #E8E2DC.
   v3: hero brought up to the canonical dark-hero treatment (around-the-club
   reference): gold-flanked cipher ornament, radial highlight + 135deg
   gradient, lift shadow, white title/sub (sub italic), 64px padding.
   v4: page width breaks out of Neve's 960px container to the sitewide 1223px
   content width; heading sizes moved to the ada-typography locks (the
   .entry-content h1/h2/h3 !important floors were inflating them, which is
   what wrapped the "Publications" rail heading).
   NOTE: component font SIZES for this page are enforced in
   dist/css/ada-typography.css ("Locks" section) because that file loads at
   priority 30 and normalizes .entry-content p/li to 18px !important. The
   sizes declared here are the design spec; ada-typography is the enforcing
   owner. Keep the two in sync. */

/* --- Hero --- */
.cc-bul-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    background: #7b1113;
    background:
        radial-gradient(circle at 14% 32%, rgba(255, 255, 255, 0.08), transparent 24%),
        linear-gradient(135deg, #7b1113 0%, #5a0c0e 100%);
    box-shadow: 0 16px 34px rgba(60, 32, 18, 0.14);
    padding: 64px 24px 56px;
    margin-bottom: 0;
}
.cc-bul-hero-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    max-width: 520px;
    margin: 0 auto 18px;
}
/* Gold rule lines flanking the cipher, 2px with a bright mid-gold midstop so
   they stay visible on the maroon gradient (same recipe as around-the-club). */
.cc-bul-hero-ornament::before,
.cc-bul-hero-ornament::after {
    content: "";
    flex: 1;
    height: 2px;
    border-radius: 1px;
    background: linear-gradient(90deg, transparent, rgba(215, 180, 106, 0.65) 35%, #d7b46a);
}
.cc-bul-hero-ornament::after {
    background: linear-gradient(90deg, #d7b46a, rgba(215, 180, 106, 0.65) 65%, transparent);
}
.cc-bul-hero-ornament img {
    width: 64px;
    height: 71px;
    object-fit: contain;
    display: block;
    flex: none;
    margin: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}
.cc-bul-hero-eyebrow {
    color: #d7b46a;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0 0 6px;
}
.cc-bul-hero-title {
    font-family: 'Sorts Mill Goudy', Georgia, serif;
    font-weight: 500;
    color: #ffffff;
    font-size: clamp(38px, 5vw, 56px);
    line-height: 1.15;
    margin: 0 0 12px;
}
.cc-bul-hero-sub {
    color: #ffffff;
    font-style: italic;
    font-size: 17px;
    line-height: 1.55;
    max-width: 720px;
    margin: 0 auto;
}

/* --- Page wrap ---
   Neve's desktop container is 960px (neve_container_width), which clamped this
   page well below the ~1223px content width the Kadence-row pages use. We
   break out of the container and re-center on the viewport. !important is
   required because both the Neve container rules and the block-layout
   constraint rules outrank a single class here. The sitewide
   html,body{overflow-x:hidden} guard makes the 100vw math safe, and min()
   collapses this to a 16px gutter on small screens. */
.cc-bul-wrap {
    --cc-bul-w: min(1223px, calc(100vw - 32px));
    width: var(--cc-bul-w) !important;
    max-width: none !important;
    margin-left: 50%;
    transform: translateX(-50%);
    padding: 0 0 56px;
}

/* --- Featured issue composition: pubnav | cover | issue info --- */
.cc-bul-featured {
    background: #FFFFFF;
    border: 1px solid #E8E2DC;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(44, 34, 24, 0.08);
    padding: 28px;
    margin-top: -34px;
    position: relative;
    gap: 32px;
}
.cc-bul-featured-covercol { display: flex; align-items: flex-start; justify-content: center; }
.cc-bul-cover img {
    border: 1px solid #E8E2DC;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(44, 34, 24, 0.18);
    max-width: 100%;
    height: auto;
    transition: box-shadow .15s, transform .15s;
}
.cc-bul-cover a { display: block; }
.cc-bul-cover a:hover img,
.cc-bul-cover a:focus-visible img {
    box-shadow: 0 10px 26px rgba(44, 34, 24, 0.28);
    transform: translateY(-2px);
}
.cc-bul-cover a:focus-visible {
    outline: 3px solid rgba(123, 17, 19, 0.55);
    outline-offset: 3px;
    border-radius: 6px;
}

/* --- Publications nav rail --- */
.cc-bul-pubnav {
    background: #f5f2ed;
    border: 1px solid #E8E2DC;
    border-radius: 10px;
    padding: 18px 16px;
    align-self: flex-start;
}
.cc-bul-pubnav-h {
    font-family: 'Sorts Mill Goudy', Georgia, serif;
    font-weight: 400;
    color: #2c2218;
    /* Size is enforced in ada-typography's locks block; kept here as the spec.
       nowrap is safe at 19px in the 22% rail and stops "Publications" from
       breaking mid-word if the rail is ever narrowed. */
    white-space: nowrap;
    font-size: 19px;
    margin: 0 0 8px;
    padding-bottom: 8px;
    border-bottom: 2px solid #7b1113;
}
.cc-bul-pubnav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 15px;
}
.cc-bul-pubnav-list li {
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #E8E2DC;
}
.cc-bul-pubnav-list li:last-child { border-bottom: 0; }
.cc-bul-wrap .cc-bul-pubnav-list a {
    display: block;
    padding: 11px 6px;
    min-height: 44px;
    line-height: 1.45;
    color: #2C1810;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    transition: background .15s, color .15s;
}
.cc-bul-wrap .cc-bul-pubnav-list a:hover,
.cc-bul-wrap .cc-bul-pubnav-list a:focus-visible {
    background: #7b1113;
    color: #fff !important;
    text-decoration: none;
}
.cc-bul-wrap .cc-bul-pubnav-list a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(123, 17, 19, 0.35);
}

.cc-bul-kicker {
    color: #7b1113;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 4px;
}
.cc-bul-issue-title {
    font-family: 'Sorts Mill Goudy', Georgia, serif;
    font-weight: 400;
    color: #2c2218;
    font-size: 32px;
    margin: 0 0 2px;
}
.cc-bul-issue-vol { color: #6A5E57; font-size: 15px; margin: 0 0 18px; }
.cc-bul-highlights-h {
    font-family: 'Sorts Mill Goudy', Georgia, serif;
    font-weight: 400;
    color: #2c2218;
    font-size: 21px;
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid #7b1113;
    display: inline-block;
}
.cc-bul-highlights { gap: 28px; margin-bottom: 6px; }
.cc-bul-highlights-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: #2C1810;
}
.cc-bul-highlights-list li { padding: 4px 0; border-bottom: 1px solid #F0EBE6; }
.cc-bul-highlights-list li:last-child { border-bottom: 0; }
.cc-bul-highlights-list li strong {
    color: #7b1113;
    font-variant-numeric: tabular-nums;
    display: inline-block;
    min-width: 26px;
}

/* --- Buttons (primary solid + outlined, per design system) --- */
.cc-bul-buttons { margin: 18px 0 14px; gap: 12px; }
.cc-bul-buttons .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}
.cc-bul-btn-primary .wp-block-button__link,
.cc-bul-btn-primary .wp-block-button__link:link,
.cc-bul-btn-primary .wp-block-button__link:visited {
    background: #7b1113;
    color: #fff !important;
    border: 2px solid #7b1113;
    border-radius: 6px;
    padding: 10px 22px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(109, 27, 27, 0.15);
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.cc-bul-btn-primary .wp-block-button__link:hover,
.cc-bul-btn-primary .wp-block-button__link:focus-visible {
    background: #8b2424;
    border-color: #8b2424;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(109, 27, 27, 0.2);
}
.cc-bul-btn-outline .wp-block-button__link,
.cc-bul-btn-outline .wp-block-button__link:link,
.cc-bul-btn-outline .wp-block-button__link:visited {
    background: #fff;
    color: #7b1113 !important;
    border: 2px solid #7b1113;
    border-radius: 6px;
    padding: 10px 22px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.cc-bul-btn-outline .wp-block-button__link:hover,
.cc-bul-btn-outline .wp-block-button__link:focus-visible {
    background: #7b1113;
    color: #fff !important;
}
.cc-bul-buttons .wp-block-button__link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(123, 17, 19, 0.35);
}

.cc-bul-disclaimer, .cc-bul-credit { color: #6A5E57; font-size: 14px; margin: 4px 0 0; }

/* --- Inline links (content pattern: darken + underline, no bg flip) --- */
.cc-bul-wrap a:not(.wp-block-button__link) {
    color: #7b1113;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
}
.cc-bul-wrap a:not(.wp-block-button__link):hover,
.cc-bul-wrap a:not(.wp-block-button__link):focus-visible {
    color: #5a0c0e !important;
    text-decoration-thickness: 2.5px;
}
.cc-bul-wrap a:not(.wp-block-button__link):focus-visible {
    outline: 2px solid rgba(123, 17, 19, 0.55);
    outline-offset: 2px;
    border-radius: 2px;
}

/* New-tab indicator on download links (design-system external/new-tab rule).
   The second content declaration uses the alternative-text syntax so
   supporting browsers hide the arrow from screen readers; older browsers
   fall back to the first declaration. Cover image link excluded (its alt
   text already announces the new tab). */
.cc-bul-wrap a[target="_blank"]:not(.wp-block-button__link)::after,
.cc-bul-buttons .wp-block-button__link[target="_blank"]::after {
    content: " \2197";
    content: " \2197" / "";
    font-size: 0.85em;
}
.cc-bul-cover a::after { content: none !important; }

/* Pubnav links override the generic inline-link pattern above. Declared
   AFTER it on purpose: equal specificity + !important color means source
   order decides, and these must win or hover goes maroon-on-maroon
   (feedback_hover_contrast). Do not move above the inline-link block. */
.cc-bul-wrap .cc-bul-pubnav-list a {
    text-decoration: none;
}
.cc-bul-wrap .cc-bul-pubnav-list a:hover,
.cc-bul-wrap .cc-bul-pubnav-list a:focus-visible {
    background: #7b1113;
    color: #fff !important;
    text-decoration: none;
    text-decoration-thickness: initial;
}

/* --- Section headings --- */
.cc-bul-section-h {
    font-family: 'Sorts Mill Goudy', Georgia, serif;
    font-weight: 400;
    color: #2c2218;
    font-size: 28px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 46px 0 6px;
    position: relative;
    padding-bottom: 12px;
    scroll-margin-top: 120px;
}
.cc-bul-section-h::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 72px;
    border-bottom: 2px solid #7b1113;
}
#current-issue, #bulletin-archives { scroll-margin-top: 120px; }

/* --- Past issues --- */
.cc-bul-past { gap: 24px; margin-top: 22px; }
.cc-bul-past-card {
    background: #FFFFFF;
    border: 1px solid #E8E2DC;
    border-radius: 12px;
    padding: 22px 18px;
    text-align: center;
    transition: box-shadow .15s;
}
.cc-bul-past-card:hover { box-shadow: 0 8px 22px rgba(44, 34, 24, 0.1); }
.cc-bul-past-cover img {
    max-width: 200px;
    height: auto;
    border: 1px solid #E8E2DC;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(44, 34, 24, 0.14);
}
.cc-bul-past-title {
    font-family: 'Sorts Mill Goudy', Georgia, serif;
    font-weight: 400;
    color: #2c2218;
    font-size: 21px;
    margin: 14px 0 6px;
}
.cc-bul-past-links { font-size: 15px; line-height: 1.9; margin: 0; }
.cc-bul-past-links a { display: inline-block; padding: 4px 2px; }

/* --- About + archives --- */
.cc-bul-about { gap: 36px; margin-top: 22px; }
.cc-bul-about-body p {
    font-size: var(--cc-fs-body, 18px);
    line-height: var(--cc-lh-body, 1.65);
    color: #2C1810;
}
.cc-bul-archives {
    background: #f5f2ed;
    border: 1px solid #E8E2DC;
    border-radius: 12px;
    padding: 22px;
    align-self: flex-start;
}
.cc-bul-archives-h {
    font-family: 'Sorts Mill Goudy', Georgia, serif;
    font-weight: 400;
    color: #2c2218;
    font-size: 20px;
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #7b1113;
}
.cc-bul-archives-list { list-style: none; padding: 0; margin: 0; font-size: 15px; }
.cc-bul-archives-list li { padding: 0; border-bottom: 1px solid #E8E2DC; }
.cc-bul-archives-list li:last-child { border-bottom: 0; }
.cc-bul-archives-list a { display: block; padding: 9px 2px; }

/* --- Submissions --- */
.cc-bul-submit {
    background: #FFFFFF;
    border: 1px solid #E8E2DC;
    border-left: 4px solid #7b1113;
    border-radius: 12px;
    padding: 24px 26px;
    margin-top: 22px;
}
.cc-bul-submit p {
    font-size: var(--cc-fs-body, 18px);
    line-height: var(--cc-lh-body, 1.65);
    color: #2C1810;
}
.cc-bul-submit p:last-child { margin-bottom: 0; }

/* --- Responsive --- */
/* Tablet: nav rail spans the top of the card as a horizontal band,
   cover + issue info share the row beneath it. */
@media (min-width: 782px) and (max-width: 1024px) {
    .cc-bul-featured { flex-wrap: wrap; gap: 20px 28px; }
    .cc-bul-pubnav { flex-basis: 100% !important; }
    .cc-bul-pubnav-list { display: flex; flex-wrap: wrap; gap: 2px 6px; }
    .cc-bul-pubnav-list li { border-bottom: 0; }
    .cc-bul-featured-covercol { flex-basis: 36% !important; }
    .cc-bul-featured-metacol { flex-basis: 58% !important; }
}
/* Mobile: cover first, issue info second, nav rail last */
@media (max-width: 781px) {
    .cc-bul-hero { padding: 48px 18px 44px; }
    .cc-bul-hero-ornament { max-width: 320px; gap: 14px; }
    .cc-bul-featured { margin-top: -20px; padding: 20px; }
    .cc-bul-featured-covercol { order: 1; margin-bottom: 4px; }
    .cc-bul-featured-metacol { order: 2; }
    .cc-bul-pubnav { order: 3; margin-top: 8px; }
    .cc-bul-cover img { max-width: 240px; }
    .cc-bul-issue-title { font-size: 27px; }
    .cc-bul-section-h { font-size: 24px; }
    .cc-bul-highlights { gap: 0; }
    .cc-bul-highlights .wp-block-column:first-child .cc-bul-highlights-list li:last-child { border-bottom: 1px solid #F0EBE6; }
    .cc-bul-past { gap: 16px; }
    .cc-bul-buttons .wp-block-button { width: 100%; }
    .cc-bul-buttons .wp-block-button__link { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    /* NOTE: do not add .cc-bul-wrap here - its translateX is layout centering,
       not motion, and resetting it would push the page off-centre. */
    .cc-bul-cover img,
    .cc-bul-cover a:hover img,
    .cc-bul-past-card,
    .cc-bul-wrap .cc-bul-pubnav-list a,
    .cc-bul-buttons .wp-block-button__link {
        transition: none !important;
    }
    .cc-bul-cover a:hover img,
    .cc-bul-cover a:focus-visible img {
        transform: none !important;
    }
}
/* ===== END Bulletin redesign (cc-bul) ===== */

/* ===== BEGIN Bulletin archives (cc-arc) - 2026-08-12 ===== */
/* Standard layout for the Bulletin archive year pages (2008-2009 ... 2026).
   Deliberately built from the same tokens as the cc-bul Bulletin page so the
   two read as one system: maroon #7b1113 (hover #5a0c0e), espresso #2c2218,
   cream #f5f2ed, borders #E8E2DC, gold #d7b46a for the hero ornament rules.

   Component font sizes are ENFORCED in dist/css/ada-typography.css (cc-arc
   locks) because .entry-content p/li/hN carry !important normalizations that
   outrank single-class rules here. Sizes below are the spec; keep in sync. */

/* --- Hero (compact variant of the cc-bul hero) --- */
.cc-arc-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    background: #7b1113;
    background:
        radial-gradient(circle at 14% 32%, rgba(255, 255, 255, 0.08), transparent 24%),
        linear-gradient(135deg, #7b1113 0%, #5a0c0e 100%);
    box-shadow: 0 16px 34px rgba(60, 32, 18, 0.14);
    padding: 44px 24px 40px;
    margin-bottom: 0;
}
.cc-arc-hero-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    max-width: 440px;
    margin: 0 auto 14px;
}
.cc-arc-hero-ornament::before,
.cc-arc-hero-ornament::after {
    content: "";
    flex: 1;
    height: 2px;
    border-radius: 1px;
    background: linear-gradient(90deg, transparent, rgba(215, 180, 106, 0.65) 35%, #d7b46a);
}
.cc-arc-hero-ornament::after {
    background: linear-gradient(90deg, #d7b46a, rgba(215, 180, 106, 0.65) 65%, transparent);
}
.cc-arc-hero-ornament img {
    width: 56px;
    height: 62px;
    object-fit: contain;
    display: block;
    flex: none;
    margin: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}
.cc-arc-hero-eyebrow {
    color: #d7b46a;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0 0 6px;
}
.cc-arc-hero-title {
    font-family: 'Sorts Mill Goudy', Georgia, serif;
    font-weight: 500;
    color: #ffffff;
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.15;
    margin: 0 0 10px;
}
.cc-arc-hero-sub {
    color: #ffffff;
    font-style: italic;
    font-size: 17px;
    line-height: 1.55;
    max-width: 640px;
    margin: 0 auto;
}

/* --- Page wrap: same 1223px break-out as the Bulletin page --- */
.cc-arc-wrap {
    --cc-arc-w: min(1223px, calc(100vw - 32px));
    width: var(--cc-arc-w) !important;
    max-width: none !important;
    margin-left: 50%;
    transform: translateX(-50%);
    padding: 0 0 56px;
}

/* --- Year navigation (pills) --- */
.cc-arc-years {
    background: #FFFFFF;
    border: 1px solid #E8E2DC;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(44, 34, 24, 0.08);
    padding: 20px 22px;
    margin-top: -26px;
    position: relative;
}
.cc-arc-years-h {
    font-family: 'Sorts Mill Goudy', Georgia, serif;
    font-weight: 400;
    color: #2c2218;
    font-size: 19px;
    margin: 0 0 12px;
}
.cc-arc-years-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
}
.cc-arc-years-list li { margin: 0; padding: 0; }
.cc-arc-wrap .cc-arc-years-list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 16px;
    border: 1.5px solid #7b1113;
    border-radius: 999px;
    background: #fff;
    color: #2C1810;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s;
}
.cc-arc-wrap .cc-arc-years-list a:hover,
.cc-arc-wrap .cc-arc-years-list a:focus-visible {
    background: #7b1113;
    color: #fff !important;
    border-color: #7b1113;
    text-decoration: none;
}
.cc-arc-wrap .cc-arc-years-list a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(123, 17, 19, 0.35);
}
/* The page you are already on */
.cc-arc-wrap .cc-arc-years-list a[aria-current="page"] {
    background: #7b1113;
    color: #fff !important;
    border-color: #7b1113;
}

/* --- Download note --- */
.cc-arc-note {
    background: #f5f2ed;
    border: 1px solid #E8E2DC;
    border-left: 4px solid #d7b46a;
    border-radius: 12px;
    padding: 18px 22px;
    margin-top: 22px;
}
.cc-arc-note p { margin: 0; color: #2C1810; }
.cc-arc-note p + p { margin-top: 8px; }

/* --- Year sections --- */
.cc-arc-year-h {
    font-family: 'Sorts Mill Goudy', Georgia, serif;
    font-weight: 400;
    color: #2c2218;
    font-size: 28px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 46px 0 6px;
    position: relative;
    padding-bottom: 12px;
    scroll-margin-top: 120px;
}
.cc-arc-year-h::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 72px;
    border-bottom: 2px solid #7b1113;
}

/* --- Month grid ---
   The block is authored as a core grid group, so WordPress emits
   is-layout-grid plus its own grid-template-columns. These rules are the
   fallback for two cases: the core grid layout class not being present, and
   older WP builds that wrap group children in .wp-block-group__inner-container
   (which would otherwise leave the grid with a single child and stack the
   cards in one column). */
.cc-arc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    gap: 16px;
    margin-top: 24px;
}
.cc-arc-grid > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    gap: 16px;
}
.cc-arc-card {
    background: #FFFFFF;
    border: 1px solid #E8E2DC;
    border-radius: 12px;
    padding: 16px 18px;
    transition: box-shadow .15s;
}
.cc-arc-card:hover { box-shadow: 0 8px 22px rgba(44, 34, 24, 0.1); }
.cc-arc-card-month {
    font-family: 'Sorts Mill Goudy', Georgia, serif;
    font-weight: 400;
    color: #2c2218;
    font-size: 20px;
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #7b1113;
}
.cc-arc-card-links { list-style: none; padding: 0; margin: 0; }
.cc-arc-card-links li { margin: 0; padding: 0; border-bottom: 1px solid #F0EBE6; }
.cc-arc-card-links li:last-child { border-bottom: 0; }
.cc-arc-wrap .cc-arc-card-links a {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 2px;
    color: #7b1113;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
}
.cc-arc-wrap .cc-arc-card-links a:hover,
.cc-arc-wrap .cc-arc-card-links a:focus-visible {
    color: #5a0c0e !important;
    text-decoration-thickness: 2.5px;
}
.cc-arc-wrap .cc-arc-card-links a:focus-visible {
    outline: 2px solid rgba(123, 17, 19, 0.55);
    outline-offset: 2px;
    border-radius: 2px;
}
/* PDF affordance: label the file type without shouting the filename */
.cc-arc-card-links a::before {
    content: "PDF";
    flex: none;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1;
    padding: 3px 5px;
    border: 1px solid currentColor;
    border-radius: 3px;
    text-decoration: none;
}

/* --- Empty-state row (a month with no files) --- */
.cc-arc-card-links li.cc-arc-none {
    color: #6A5E57;
    font-style: italic;
    padding: 10px 2px;
}

/* --- Back to Bulletin --- */
.cc-arc-back { margin-top: 34px; text-align: center; }
.cc-arc-back .wp-block-button__link,
.cc-arc-back .wp-block-button__link:link,
.cc-arc-back .wp-block-button__link:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    background: #fff;
    color: #7b1113 !important;
    border: 2px solid #7b1113;
    border-radius: 6px;
    padding: 10px 22px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    transition: background .15s, color .15s;
}
.cc-arc-back .wp-block-button__link:hover,
.cc-arc-back .wp-block-button__link:focus-visible {
    background: #7b1113;
    color: #fff !important;
}
.cc-arc-back .wp-block-button__link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(123, 17, 19, 0.35);
}

/* --- Responsive --- */
@media (max-width: 781px) {
    .cc-arc-hero { padding: 36px 18px 32px; }
    .cc-arc-hero-ornament { max-width: 280px; gap: 14px; }
    .cc-arc-years { margin-top: -18px; padding: 16px; }
    .cc-arc-year-h { font-size: 24px; }
    .cc-arc-grid { grid-template-columns: 1fr; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    /* .cc-arc-wrap translateX is layout centring, not motion - leave it alone. */
    .cc-arc-card,
    .cc-arc-wrap .cc-arc-years-list a,
    .cc-arc-back .wp-block-button__link {
        transition: none !important;
    }
}
/* ===== END Bulletin archives (cc-arc) ===== */

/* ===== BEGIN Board minutes (cc-bm) - 2026-08-12 ===== */
/* Board of Governors Meeting Minutes (page 15241).
   The page reuses the cc-arc module wholesale (hero, wrap, year pills, cards,
   card link lists, back button) so it reads as the same system as the Bulletin
   archive year pages. Only the three things cc-arc has no vocabulary for are
   defined here:

     1. link lists that are NOT downloads      -> suppress the "PDF" badge
     2. a per-meeting qualifier                -> "(Board Retreat)" etc.
     3. the current club year                  -> distinguish it from the archive

   Sizes here are the spec; the enforcing copies live in the cc-bm locks block
   of dist/css/ada-typography.css. Keep the two in sync. */

/* --- 1. Plain (non-download) link lists ---
   .cc-arc-card-links a::before hard-codes a "PDF" badge, which is wrong for the
   related-pages cards. (0,3,1) beats the (0,2,1) base rule regardless of order. */
.cc-arc-card-links.cc-arc-links-plain a::before {
    content: none;
}

/* --- 2. Meeting qualifier ---
   Sits after the anchor inside the <li>. The anchor is display:flex, so this
   span falls onto its own line without any extra wrapper. */
.cc-arc-wrap .cc-arc-card-note {
    display: block;
    margin: -6px 0 8px 2px;
    color: #6A5E57;            /* secondary text, >=4.5:1 on white */
    font-size: 13px;
    font-style: italic;
    line-height: 1.35;
}

/* --- 3. Current club year ---
   Gold left edge matches the cc-arc-note accent, so "current" is signalled the
   same way across the two pages. Colour is not the only cue: the card heading
   also carries a "Current" badge in the markup. */
.cc-arc-card--current {
    border-left: 4px solid #d7b46a;
}
.cc-arc-card--current .cc-arc-card-month {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.cc-arc-card-badge {
    flex: none;
    background: #7b1113;
    color: #fff;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 3px 10px;
}

/* --- Intro note: two stacked paragraphs read better with a little air --- */
.cc-arc-note .cc-arc-note-lede {
    font-weight: 600;
    color: #2c2218;
}

@media (prefers-reduced-motion: reduce) {
    .cc-arc-card--current { transition: none !important; }
}
/* ===== END Board minutes (cc-bm) ===== */

/* ===== BEGIN Privacy policy (cc-priv) - 2026-08-13 ===== */
/* Long-form legal document UI for /privacy-statement/ (post 772). Ships first
   to /privacy-test/, never straight onto the live legal page.

   Same tokens as cc-bul / cc-arc / cc-bm so the four read as one system:
   maroon #7b1113 (hover #5a0c0e, lighter #8b2424), espresso #2c2218,
   ink #2C1810, secondary #6A5E57, cream #f5f2ed / #f0ece6,
   border #E8E2DC, gold #d7b46a, white #fff. No new colors.
   Headings 'Sorts Mill Goudy'; everything else font-family: inherit
   (Quattrocento, loaded by Neve). No Google Fonts request anywhere.

   OWNERSHIP OF SIZES: component font sizes are ENFORCED in
   dist/css/ada-typography.css (the "cc-priv locks" block, shipped here as
   ada-locks-priv.css) because that file loads at priority 30 and normalizes
   .entry-content p / li / .wp-block-paragraph / .wp-block-list li to
   18px !important and floors core headings at max(1.5em, 28px) !important.
   The sizes below are the design spec. Keep the two in sync.

   FIVE SITEWIDE RULES THIS MODULE HAS TO LIVE WITH (all verified in the
   deployed child theme style.css, v1.0.17):
     1. h1..h6 { margin-bottom: 0px !important }  (style.css ~line 240)
        Every heading's bottom spacing here is therefore re-declared through
        .entry-content .cc-priv-wrap hN.cc-priv-* with !important. A plain
        `margin-bottom` on a single class loses silently.
     2. ul.wp-block-list { margin: 0 0 1rem 0 !important }
        List resets below are scoped + !important for the same reason.
     3. .wp-block-button__link:hover { color: #fff !important } (sitewide
        contrast net). Any button of ours must therefore turn its background
        maroon on hover, or it would be white text on a white button.
     4. The maroon-background safety net keys off inline styles and off the
        class names .cc-bg-maroon / .cc-btn-maroon / .bg-maroon /
        .has-maroon-background-color. This module never uses those names and
        never sets background through inline style, so it owns its own
        contrast: every maroon surface below sets color: #fff itself.
     5. body { line-height: 1.5 } with p { line-height: inherit }. Legal prose
        needs more air, so the document column re-declares 1.7.

   Class names checked against the deployed style.css: no existing `cc-priv`
   selectors, so the namespace is clean. The legacy rule
   `.privacy-statement > div > div > div h2 { margin-bottom: 10px }` only
   matches the old boilerplate markup and is harmless here. */


/* --- Defensive border-box reset ---
   The break-out widths below are calc(100vw - 32px) and they only fit if
   padding counts inside the box. Neve ships a global border-box reset, but
   relying on someone else's reset for the one property that decides whether
   this page scrolls sideways on a telephone is not worth the risk: a mockup
   built without it overflowed every padded box by exactly its padding. */
.cc-priv-hero,
.cc-priv-hero *,
.cc-priv-wrap,
.cc-priv-wrap *,
.cc-priv-hero *::before,
.cc-priv-wrap *::before,
.cc-priv-hero *::after,
.cc-priv-wrap *::after {
    box-sizing: border-box;
}

/* =============================================================================
   1. Hero
   Canonical dark hero: gold-flanked cipher ornament, radial highlight over a
   135deg maroon gradient, white title, italic promise line.

   FULL BLEED. The maroon runs the whole width of the viewport; the ornament,
   title, promise and buttons are held to the document measure by
   .cc-priv-hero-inner, so the hero's TEXT lines up with the document below it
   while its COLOUR runs edge to edge. This is the sitewide pattern (see the
   100vw break-out earlier in this stylesheet), not a new one.

   100vw counts the scrollbar on desktop Windows, so the band is a few pixels
   wider than the visible area. That overhang is symmetric because the element
   is centred on its parent, and the sitewide html,body{overflow-x:hidden}
   guard keeps it from producing a horizontal scrollbar. Do not "fix" it with
   calc(100vw - 15px): the scrollbar width is not a constant.

   No border-radius and no side shadow: both are visual artefacts of a boxed
   hero and read as a mistake once the band touches the viewport edges.
   ========================================================================== */
.cc-priv-hero {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 50%;
    transform: translateX(-50%);
    position: relative;
    overflow: hidden;
    text-align: center;
    background: #7b1113;
    background:
        radial-gradient(circle at 14% 32%, rgba(255, 255, 255, 0.08), transparent 24%),
        linear-gradient(135deg, #7b1113 0%, #5a0c0e 100%);
    box-shadow: 0 14px 28px rgba(60, 32, 18, 0.12);
    border-radius: 0;
    padding: 64px 16px 56px;
    margin-bottom: 0;
}
/* The measure inside the full-bleed band. Same width expression as
   .cc-priv-wrap, so the hero title and the first h2 share a left edge. */
.cc-priv-hero-inner {
    width: min(1223px, calc(100vw - 32px));
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.cc-priv-hero-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    max-width: 460px;
    margin: 0 auto 14px;
}
/* Gold rules flanking the cipher: 2px with a bright mid-gold midstop so they
   stay visible on the maroon gradient (same recipe as cc-bul / cc-arc). */
.cc-priv-hero-ornament::before,
.cc-priv-hero-ornament::after {
    content: "";
    flex: 1;
    height: 2px;
    border-radius: 1px;
    background: linear-gradient(90deg, transparent, rgba(215, 180, 106, 0.65) 35%, #d7b46a);
}
.cc-priv-hero-ornament::after {
    background: linear-gradient(90deg, #d7b46a, rgba(215, 180, 106, 0.65) 65%, transparent);
}
/* A core/image block wraps the cipher in <figure class="wp-block-image">, so the
   figure is the flex item, not the img. Both are neutralised. */
.cc-priv-hero-ornament > figure {
    flex: none;
    margin: 0;
    line-height: 0;
}
/* 56x62 is the canonical 889:990 cipher box. Height is declared so the flex
   row does not collapse before the PNG decodes. */
.cc-priv-hero-ornament img,
.cc-priv-hero-ornament svg {
    width: 56px;
    height: 62px;
    object-fit: contain;
    display: block;
    flex: none;
    margin: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}
.cc-priv-hero-eyebrow {
    color: #d7b46a;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0 0 6px;
}
.cc-priv-hero-title {
    font-family: 'Sorts Mill Goudy', Georgia, serif;
    font-weight: 500;
    color: #ffffff;
    font-size: clamp(32px, 4.4vw, 46px);
    line-height: 1.15;
    margin: 0 0 12px;
}
.cc-priv-hero-promise {
    color: #ffffff;
    font-style: italic;
    font-size: 18px;
    line-height: 1.55;
    max-width: 60ch;
    margin: 0 auto 18px;
}
/* Version / date / reading time. A definition list would be more semantic but
   core blocks cannot emit dl, so this is one paragraph with separators drawn
   by CSS between spans (see .cc-priv-hero-meta span + span). */
.cc-priv-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 10px;
    color: #f5f2ed;
    font-size: 13.5px;
    letter-spacing: 0.3px;
    margin: 0 0 22px;
}
.cc-priv-hero-meta span + span::before {
    content: "\00b7";
    color: #d7b46a;
    padding-right: 10px;
}
.cc-priv-hero-meta strong { color: #ffffff; font-weight: 700; }

/* Hero buttons. The outline variant sits on maroon, so it inverts: white
   surface, maroon text. On hover it goes cream, NOT maroon, because a maroon
   fill on a maroon hero would vanish (feedback_hover_contrast). */
.cc-priv-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin: 0;
}
/* Two chrome-identical controls with different semantics: an <a> for the jump
   to the controls section (navigation) and a real <button> for Print
   (an action). Both carry .wp-block-button__link so core's button block and a
   wp:html button look the same. */
.cc-priv-hero-buttons .wp-block-button__link,
.cc-priv-hero-buttons .wp-block-button__link:link,
.cc-priv-hero-buttons .wp-block-button__link:visited {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    background: #ffffff;
    color: #7b1113 !important;
    border: 2px solid #ffffff;
    border-radius: 6px;
    padding: 10px 22px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.cc-priv-hero-buttons .wp-block-button__link:hover,
.cc-priv-hero-buttons .wp-block-button__link:focus-visible {
    background: #f0ece6;
    border-color: #f0ece6;
    color: #5a0c0e !important;
    text-decoration: none;
}
/* Secondary hero button: transparent with a gold edge, so the two buttons are
   ranked without introducing a new color. */
.cc-priv-hero-buttons .cc-priv-btn-ghost .wp-block-button__link,
.cc-priv-hero-buttons .cc-priv-btn-ghost .wp-block-button__link:link,
.cc-priv-hero-buttons .cc-priv-btn-ghost .wp-block-button__link:visited {
    background: transparent;
    color: #ffffff !important;
    border-color: #d7b46a;
}
.cc-priv-hero-buttons .cc-priv-btn-ghost .wp-block-button__link:hover,
.cc-priv-hero-buttons .cc-priv-btn-ghost .wp-block-button__link:focus-visible {
    background: #d7b46a;
    border-color: #d7b46a;
    color: #2c2218 !important;   /* 8.9:1 on gold; white on gold would fail */
}
.cc-priv-hero-buttons .wp-block-button__link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85);   /* white ring: the maroon ring is invisible on the maroon hero */
}


/* =============================================================================
   2. Page wrap
   Neve's desktop container is 960px (neve_container_width), which is too tight
   for a rail + document shell. Break out and re-center on the viewport exactly
   like cc-bul / cc-arc. !important is required because both Neve's container
   rules and the block-layout constraint rules outrank a single class.
   The sitewide html,body{overflow-x:hidden} guard makes the 100vw math safe,
   and min() collapses this to a 16px gutter on small screens.
   NOTE: no overflow property on this wrap. position: sticky on the rail dies
   inside any scroll container, so the wrap must stay overflow: visible.
   ========================================================================== */
.cc-priv-wrap {
    --cc-priv-w: min(1223px, calc(100vw - 32px));
    width: var(--cc-priv-w) !important;
    max-width: none !important;
    margin-left: 50%;
    transform: translateX(-50%);
    padding: 0 0 56px;
    /* Body ink is set ONCE here and INHERITED, never re-declared on p / li.
       An earlier draft put `color: #2C1810` on `.cc-priv-doc p` (0,1,1), which
       outranks every single-class rule in this file: the caution eyebrow lost
       its white and rendered dark-on-maroon, and the card role eyebrows lost
       their maroon. Caught in the mockup on 2026-08-13. Defaults inherit,
       exceptions get a direct rule. Do not add color back to a bare p rule. */
    color: #2C1810;
}


/* =============================================================================
   3. Shell: sticky rail column + document column
   Authored as a core/columns block. Core ships .wp-block-columns as flex with
   per-column flex-basis; (0,2,0) here re-declares it as a two-track grid so
   the rail keeps a fixed 264px measure and the document column can shrink
   without the prose reflowing under the rail. minmax(0, 1fr) is the guard that
   lets a wide table's overflow container actually shrink instead of blowing
   the grid out (a bare 1fr floors at max-content).
   ========================================================================== */
.wp-block-columns.cc-priv-shell {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    margin: 36px 0 0;
}
/* Core adds inline flex-basis to each column; grid ignores it, but the column
   still needs min-width: 0 for the same overflow reason as above. */
.cc-priv-shell > .wp-block-column {
    min-width: 0;
    flex-basis: auto !important;
}
/* The rail column must be full-height for position: sticky to have room to
   travel, so it stretches rather than hugging its content. */
.cc-priv-shell > .cc-priv-railcol {
    align-self: stretch;
}


/* =============================================================================
   4. Section rail
   position: sticky, NOT fixed. Neve's footer carries a ::before overlay that
   has repeatedly eaten clicks from anything relying on a high stacking layer
   (feedback_neve_footer_overlay), and Neve's sticky header is position: fixed
   at z-index 999. A sticky element inside the document grid never competes
   with either: it scrolls out with its column and needs no z-index at all.
   top: 120px clears the sticky header, the same offset used by every
   scroll-margin-top in this module.
   ========================================================================== */
.cc-priv-rail {
    position: sticky;
    top: 120px;
    background: #f5f2ed;
    border: 1px solid #E8E2DC;
    border-radius: 12px;
    padding: 18px 16px;
    /* Long policy, short viewport: the rail scrolls internally rather than
       running off the bottom of the screen. Its own overflow is fine; only an
       ANCESTOR's overflow would break the stickiness. */
    max-height: calc(100vh - 148px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.cc-priv-rail-h {
    font-family: 'Sorts Mill Goudy', Georgia, serif;
    font-weight: 400;
    color: #2c2218;
    font-size: 19px;
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #7b1113;
}
.cc-priv-rail-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: cc-priv-rail;
}
.cc-priv-rail-list li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #E8E2DC;
}
.cc-priv-rail-list li:last-child { border-bottom: 0; }
/* SPECIFICITY, read before editing these selectors.
   The generic inline-link rule in section 6 is
     .cc-priv-wrap a:not(.wp-block-button__link):not(.cc-priv-action)
   and :not() contributes its argument's specificity, so that selector is
   (0,3,1), NOT the (0,2,1) it looks like. A rail rule written as
   `.cc-priv-wrap .cc-priv-rail-list a` therefore LOSES, and the rail renders
   as underlined maroon body links with an underlined generated number. This
   was caught in the mockup on 2026-08-13. Every rail-anchor rule below is
   consequently written as
     .entry-content .cc-priv-wrap ul.cc-priv-rail-list a      -> (0,3,2)
   which beats the generic rule on class count plus element count, so it does
   not depend on source order the way the cc-bul pubnav override does. */
.entry-content .cc-priv-wrap ul.cc-priv-rail-list a {
    display: flex;
    gap: 8px;
    align-items: baseline;
    min-height: 44px;
    padding: 10px 8px;
    line-height: 1.4;
    color: #2C1810;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    border-left: 3px solid transparent;   /* reserved so the active state does not shift text */
    transition: background .15s, color .15s, border-color .15s;
}
/* Numbered rail: the number is generated, so the markup stays a plain list of
   links and the numbering cannot drift out of sync with the sections. */
.entry-content .cc-priv-wrap ul.cc-priv-rail-list a::before {
    counter-increment: cc-priv-rail;
    content: counter(cc-priv-rail) ".";
    flex: none;
    min-width: 1.6em;
    color: #6A5E57;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
.entry-content .cc-priv-wrap ul.cc-priv-rail-list a:hover,
.entry-content .cc-priv-wrap ul.cc-priv-rail-list a:focus-visible {
    background: #7b1113;
    color: #fff !important;
    text-decoration: none;
}
/* Icons and generated numbers flip with the text, or the number goes
   maroon-on-maroon (the exact failure feedback_hover_contrast records). */
.entry-content .cc-priv-wrap ul.cc-priv-rail-list a:hover::before,
.entry-content .cc-priv-wrap ul.cc-priv-rail-list a:focus-visible::before {
    color: #fff;
}
.entry-content .cc-priv-wrap ul.cc-priv-rail-list a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(123, 17, 19, 0.35);
}
/* Scroll-spy state, set by JS. Deliberately NOT a maroon fill: the fill is the
   hover affordance, and a filled resting state would make "where I am" and
   "what I am about to click" look identical. Three cues, none of them color
   alone: white surface, maroon left edge, maroon bold text. */
.entry-content .cc-priv-wrap ul.cc-priv-rail-list a[aria-current="true"] {
    background: #ffffff;
    border-left-color: #7b1113;
    color: #7b1113;
    font-weight: 700;
}
.entry-content .cc-priv-wrap ul.cc-priv-rail-list a[aria-current="true"]::before { color: #7b1113; }
/* Hover still wins over the current item, so the pointer always gets feedback. */
.entry-content .cc-priv-wrap ul.cc-priv-rail-list a[aria-current="true"]:hover,
.entry-content .cc-priv-wrap ul.cc-priv-rail-list a[aria-current="true"]:focus-visible {
    background: #7b1113;
    color: #fff !important;
    border-left-color: #5a0c0e;
}

/* Mobile disclosure wrapper. Below 781px the rail becomes a core/details
   block: still in the document, still keyboard operable, never display: none. */
.cc-priv-rail-mobile { display: none; }
.cc-priv-rail-mobile > summary {
    cursor: pointer;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    background: #f5f2ed;
    border: 1px solid #E8E2DC;
    border-left: 4px solid #7b1113;
    border-radius: 10px;
    font-weight: 700;
    color: #2c2218;
}
.cc-priv-rail-mobile > summary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(123, 17, 19, 0.35);
}
.cc-priv-rail-mobile[open] > summary { border-radius: 10px 10px 0 0; }


/* =============================================================================
   5. Document column: measure, sections, headings
   The shell is 1223px, and the prose fills its column: no 68ch clamp. An
   earlier draft capped p and li at 68ch, which is the textbook measure for
   long-form reading but made the body copy look narrower than the page it sat
   in and out of line with the tables and cards. The brief is a 1223px
   responsive document, so the column is the measure.
   line-height 1.7 and the generous paragraph spacing below are what carry
   readability at this width instead.
   ========================================================================== */
.cc-priv-doc { min-width: 0; }
.cc-priv-doc p,
.cc-priv-doc li {
    line-height: 1.7;               /* beats body{line-height:1.5} via specificity, no !important needed */
    /* No color here on purpose. See the note on .cc-priv-wrap. */
}

/* Section wrapper: one core/group per section, carrying the anchor id. */
.cc-priv-sec {
    scroll-margin-top: 120px;       /* Neve's sticky header */
    padding-top: 6px;
    margin-top: 44px;
}
.cc-priv-sec:first-child { margin-top: 0; }

/* h2, styled to match cc-bul-section-h / cc-arc-year-h but left-aligned: this
   is a document, and a centered rule under every heading in a 17-section page
   reads as decoration. margin-bottom carries !important at (0,3,1) because
   the child theme sets h1..h6 { margin-bottom: 0 !important } sitewide. */
.cc-priv-h2 {
    font-family: 'Sorts Mill Goudy', Georgia, serif;
    font-weight: 400;
    color: #2c2218;
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: 0.5px;
    scroll-margin-top: 120px;
    position: relative;
    padding-bottom: 12px;
    margin: 0;
}
.cc-priv-h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 72px;
    border-bottom: 2px solid #7b1113;
}
.entry-content .cc-priv-wrap h2.cc-priv-h2 { margin: 0 0 16px !important; }

.cc-priv-h3 {
    font-family: 'Sorts Mill Goudy', Georgia, serif;
    font-weight: 400;
    color: #2c2218;
    font-size: 21px;
    line-height: 1.25;
    margin: 0;
}
.entry-content .cc-priv-wrap h3.cc-priv-h3 { margin: 26px 0 8px !important; }

/* Card / row headings inside grids and panels.
   NAMED FOR ITS ROLE, NOT ITS LEVEL, on purpose. An earlier draft called this
   .cc-priv-h4 and the mockup rendered it at 24px: the cards are h3 in the
   heading outline (section h2, then card h3), so the h4-qualified lock never
   matched and ada-typography's h3 floor of max(1.25em, 24px) won. The locks
   file now qualifies this class for BOTH h3 and h4, so the same card treatment
   is correct wherever it lands in the outline. */
.cc-priv-card-h {
    font-family: 'Sorts Mill Goudy', Georgia, serif;
    font-weight: 400;
    color: #2c2218;
    font-size: 19px;
    line-height: 1.3;
    margin: 0;
}
.entry-content .cc-priv-wrap h3.cc-priv-card-h,
.entry-content .cc-priv-wrap h4.cc-priv-card-h { margin: 0 0 6px !important; }

/* Section lede: one sentence under the h2 that says what the section covers. */
.cc-priv-lede {
    font-size: 19px;
    line-height: 1.6;
    color: #2c2218;
    font-weight: 600;
}
.cc-priv-meta {
    color: #6A5E57;
    font-size: 14px;
    line-height: 1.5;
}

/* Body lists. The sitewide ul.wp-block-list { margin: 0 0 1rem 0 !important }
   forces list spacing, so the reset is scoped + !important to beat it. */
.entry-content .cc-priv-wrap ul.cc-priv-list,
.entry-content .cc-priv-wrap ol.cc-priv-list {
    margin: 0 0 18px !important;
    padding-left: 1.15em;
}
.cc-priv-list li { margin: 0 0 8px; }
.cc-priv-list li::marker { color: #7b1113; }
/* Checklist variant for promises and "what we do not do" lists. list-style is
   removed and a maroon glyph drawn, so the marker reads as a statement rather
   than a bullet. */
.entry-content .cc-priv-wrap ul.cc-priv-list--check {
    list-style: none;
    padding-left: 0;
}
.cc-priv-list--check li {
    position: relative;
    padding-left: 28px;
}
.cc-priv-list--check li::before {
    content: "\2713";               /* check mark, decorative: the sentence carries the meaning */
    position: absolute;
    left: 0;
    top: 0;
    color: #7b1113;
    font-weight: 700;
}


/* =============================================================================
   6. Inline links (content pattern: darken and thicken, never a color flip)
   Scoped to a:not(.wp-block-button__link) so the button rules above are not
   dragged into the inline-link pattern. Rail links re-override this further
   down, after the generic rule, on purpose.
   ========================================================================== */
.cc-priv-wrap a:not(.wp-block-button__link):not(.cc-priv-action) {
    color: #7b1113;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
}
.cc-priv-wrap a:not(.wp-block-button__link):not(.cc-priv-action):hover,
.cc-priv-wrap a:not(.wp-block-button__link):not(.cc-priv-action):focus-visible {
    color: #5a0c0e !important;
    text-decoration-thickness: 2.5px;
}
.cc-priv-wrap a:not(.wp-block-button__link):not(.cc-priv-action):focus-visible {
    outline: 2px solid rgba(123, 17, 19, 0.55);
    outline-offset: 2px;
    border-radius: 2px;
}
/* Rail links re-assert themselves against the rule above. Note the two
   :not() arguments: they make that rule (0,3,1), so these overrides are
   written at (0,3,2) rather than relying on source order. See the specificity
   note in section 4. */
.entry-content .cc-priv-wrap ul.cc-priv-rail-list a { text-decoration: none; }
.entry-content .cc-priv-wrap ul.cc-priv-rail-list a:hover,
.entry-content .cc-priv-wrap ul.cc-priv-rail-list a:focus-visible {
    color: #fff !important;
    text-decoration: none;
    text-decoration-thickness: initial;
}

/* New-tab indicator. The second content declaration uses the alternative-text
   syntax so supporting browsers hide the arrow from assistive tech; older
   browsers fall back to the first. Markup still carries an sr-only
   "(opens in new tab)", per the design system. */
.cc-priv-wrap a[target="_blank"]:not(.wp-block-button__link)::after {
    content: " \2197";
    content: " \2197" / "";
    font-size: 0.85em;
}

/* Screen-reader utility (every module ships its own copy). */
.cc-priv-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* =============================================================================
   7. Card grid ("At a glance" promises, subprocessors, contact)
   Authored as a core/group with the grid class, so the two fallbacks cc-arc
   documents are needed here too: core's own is-layout-grid may be absent, and
   older WP builds wrap group children in .wp-block-group__inner-container,
   which would otherwise leave the grid with a single child.
   ========================================================================== */
.cc-priv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
    gap: 16px;
    margin: 0;
}
.cc-priv-grid > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
    gap: 16px;
}
.cc-priv-grid--wide {
    grid-template-columns: repeat(auto-fill, minmax(292px, 1fr));
}
.cc-priv-card {
    background: #FFFFFF;
    border: 1px solid #E8E2DC;
    border-radius: 12px;
    padding: 18px 20px;
    transition: box-shadow .15s;
}
.cc-priv-card:hover { box-shadow: 0 8px 22px rgba(44, 34, 24, 0.1); }
.cc-priv-card p {
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}
.cc-priv-card p + p { margin-top: 8px; }
/* Promise card: gold top rule marks the "we bind ourselves to this" set
   without adding a color. */
.cc-priv-card--promise {
    border-top: 3px solid #d7b46a;
    background: #f5f2ed;
}
/* Subprocessor card: name, role, region, policy link. */
.cc-priv-card-role {
    color: #7b1113;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0 0 6px;
}
.cc-priv-card-region {
    color: #6A5E57;
    font-size: 14px;
    margin: 8px 0 0;
}
.cc-priv-card-link { margin: 10px 0 0; }

/* Small badge (response times, "current version", table qualifiers). Maroon
   fill, so it sets its own white text: the sitewide safety net only covers
   inline styles and the .cc-*-maroon class names. */
.cc-priv-badge {
    display: inline-block;
    background: #7b1113;
    color: #fff;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 4px 11px;
}
/* Quiet variant for neutral facts. #6A5E57 on #f5f2ed is 4.9:1, so this is
   readable body-size text, not a disabled state. No opacity anywhere. */
.cc-priv-badge--quiet {
    background: #f5f2ed;
    color: #6A5E57;
    border: 1px solid #E8E2DC;
}
/* Marks a section that only renders for a signed-in member. Gold on ink is a
   canonical pairing and measures 8.2:1, so it is a label rather than a
   decoration. The chip is a visual echo of a real server-side condition: the
   section it sits on is absent from the HTML for anyone not signed in, it is
   not merely hidden. Sits inside the h2, so a screen reader reads
   "Member-only areas, Members" and the gating is announced, not implied by
   colour. */
.cc-priv-badge--member {
    background: #d7b46a;
    color: #2C1810;
    vertical-align: 0.22em;
    margin-left: 10px;
}


/* =============================================================================
   8. Callouts: exactly three variants, visually ranked
     note       cream + gold left rule        background information
     commitment white card + maroon top rule  a promise we are bound to
     caution    white card + heavy maroon left rule + maroon eyebrow
                anti-fraud and "never put this in the Concierge" guidance
   There is no fourth variant. If something needs more weight than caution,
   it belongs higher up the page, not in a louder box.
   ========================================================================== */

/* The callouts fill the column, like everything else in the document. An
   earlier draft clamped them to 72ch to sit beside the 68ch prose; with the
   prose clamp gone that only made them look accidentally short. Their rule,
   surface and eyebrow already distinguish them from body copy. */
/* Inner paragraphs and lists fill the box: the box is already the measure. */
.cc-priv-note p,
.cc-priv-note li,
.cc-priv-commit p,
.cc-priv-commit li,
.cc-priv-caution p,
.cc-priv-caution li { max-width: none; }
/* Last child never leaves a dangling gap. The list needs !important because
   ul.wp-block-list carries a sitewide !important bottom margin. */
.cc-priv-note > :last-child,
.cc-priv-commit > :last-child,
.cc-priv-caution > :last-child { margin-bottom: 0 !important; }

/* --- note (lowest rank) --- */
.cc-priv-note {
    background: #f5f2ed;
    border: 1px solid #E8E2DC;
    border-left: 4px solid #d7b46a;
    border-radius: 12px;
    padding: 18px 22px;
    margin: 20px 0;
}
.cc-priv-note p { margin: 0; }
.cc-priv-note p + p { margin-top: 8px; }

/* --- commitment (middle rank) --- */
.cc-priv-commit {
    background: #FFFFFF;
    border: 1px solid #E8E2DC;
    border-top: 3px solid #7b1113;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(44, 34, 24, 0.08);
    padding: 22px 24px;
    margin: 20px 0;
}
.cc-priv-commit-eyebrow {
    color: #7b1113;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 8px;
}
.cc-priv-commit p:last-child { margin-bottom: 0; }

/* --- caution (highest rank) ---
   Anti-fraud guidance. It must not read as fine print, so it is the only
   callout with a 6px edge, a filled eyebrow bar and a lift shadow. The
   surface stays white for maximum body-text contrast: a maroon fill would
   force every inline link inside it to flip white, which is the invisible
   link failure feedback_design_system warns about. */
.cc-priv-caution {
    background: #FFFFFF;
    border: 1px solid #E8E2DC;
    border-left: 6px solid #7b1113;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(123, 17, 19, 0.12);
    padding: 22px 24px;
    margin: 24px 0;
}
.cc-priv-caution-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #7b1113;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 4px;
    padding: 6px 12px;
    margin: 0 0 12px;
}
.cc-priv-caution-eyebrow::before {
    content: "!";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: none;
    border: 1.5px solid #fff;
    border-radius: 50%;
    font-size: 11px;
    line-height: 1;
}
.cc-priv-caution .cc-priv-h3 { color: #7b1113; }
.cc-priv-caution p:last-child { margin-bottom: 0; }
/* Inline links inside a caution box are the action people need to take, so
   they get the thicker resting underline rather than a color change. */
.cc-priv-wrap .cc-priv-caution a:not(.wp-block-button__link) {
    text-decoration-thickness: 2px;
}


/* =============================================================================
   9. Tables
   Two tables, same chrome, different density:
     .cc-priv-table--collect  4 columns, the most-read section
     .cc-priv-table--cookies  4 columns, denser, tabular
   Desktop: a normal table. Mobile (<=781px): each row becomes a card and each
   cell is labelled from its data-label attribute, so there is no horizontal
   scroll in the most-read section. .cc-priv-scroll is the fallback container
   for any table that must stay tabular on small screens.
   Class goes on the core/table block's <figure>, hence "table" in the
   selectors. Cell font-size does not need !important: ada-typography never
   targets td / th, so the cells only inherit 18px from .entry-content and any
   direct rule beats inheritance. The locks file re-declares them anyway, so a
   future td rule in ada-typography cannot silently inflate them.
   ========================================================================== */
.cc-priv-table {
    margin: 18px 0 22px;
}
.cc-priv-table table {
    width: 100%;
    border-collapse: collapse;
    background: #FFFFFF;
    border: 1px solid #E8E2DC;
    border-radius: 12px;
    /* border-radius on a table needs the overflow clip to actually round the
       header corners. This element is NOT an ancestor of the sticky rail, so
       the clip is safe here. */
    overflow: hidden;
    table-layout: fixed;
}
.cc-priv-table th {
    background: #2c2218;
    color: #fff;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-align: left;
    vertical-align: bottom;
    padding: 13px 14px;
    border: 0;
}
.cc-priv-table td {
    font-size: 16px;
    line-height: 1.6;
    color: #2C1810;
    vertical-align: top;
    padding: 14px;
    border-top: 1px solid #E8E2DC;
    /* Something upstream sets border-bottom: 2px solid #272626 on cells in
       .entry-content, which drew a heavy near-black rule under every cell EXCEPT
       the row header (which inherits border: 0 from the th rule above). The
       result was a table with two different separators, the dark one only under
       part of each row. Measured on the rendered page, not assumed; a plain
       declaration is enough to win, so this needs no !important. */
    border-bottom: 0;
    word-break: break-word;         /* long cookie names and mailboxes */
}
/* Zebra striping earns its keep in a 12-row cookie table. Cream, not grey. */
.cc-priv-table tbody tr:nth-child(even) td,
.cc-priv-table tbody tr:nth-child(even) th { background: #f5f2ed; }

/* ROW headers.
   The first cell of every body row is a <th role="rowheader">, not a td (see
   cc_table() in build-772.php: a rowheader is what makes the stacked mobile
   card announce its subject). An earlier draft styled the row subject with
   `.cc-priv-table td:first-child`, which therefore never matched ANYTHING, so
   the cell fell through to the generic `.cc-priv-table th` rule above and every
   table grew a heavy dark uppercase column down its left edge. That also turned
   a category name like "What you tell us about someone else" into 12.5px
   uppercase, which is the hardest possible way to set it.
   Style the element that actually exists: the row's subject, on the row's own
   surface, sentence case, top aligned so it lines up with the cells beside it.
   (0,1,2) beats the (0,1,1) generic th rule, so no !important is needed. */
.cc-priv-table tbody th {
    background: transparent;
    color: #7b1113;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    vertical-align: top;
    border-top: 1px solid #E8E2DC;
}
.cc-priv-table--collect col:nth-child(1) { width: 20%; }
.cc-priv-table--collect col:nth-child(2) { width: 32%; }
.cc-priv-table--collect col:nth-child(3) { width: 28%; }
.cc-priv-table--collect col:nth-child(4) { width: 20%; }
.cc-priv-table--cookies col:nth-child(1) { width: 24%; }
.cc-priv-table--cookies col:nth-child(2) { width: 18%; }
.cc-priv-table--cookies col:nth-child(3) { width: 40%; }
.cc-priv-table--cookies col:nth-child(4) { width: 18%; }
.cc-priv-table figcaption,
.cc-priv-table .wp-element-caption {
    color: #6A5E57;
    font-size: 14px;
    line-height: 1.5;
    margin-top: 8px;
}
/* Fallback for a table that must stay tabular on mobile. */
.cc-priv-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* =============================================================================
   10. Privacy controls panel
   Rows of label + description + control. The switch is a real
   <button role="switch" aria-checked>, so it is keyboard operable for free.
   ========================================================================== */
.cc-priv-controls {
    background: #FFFFFF;
    border: 1px solid #E8E2DC;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(44, 34, 24, 0.08);
    padding: 6px 22px;
    margin: 18px 0 22px;
}
.cc-priv-ctl-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 24px;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #E8E2DC;
}
.cc-priv-ctl-row:last-child { border-bottom: 0; }
.cc-priv-ctl-text { min-width: 0; }
.cc-priv-ctl-label {
    font-family: 'Sorts Mill Goudy', Georgia, serif;
    font-size: 19px;
    color: #2c2218;
    margin: 0;
}
.entry-content .cc-priv-wrap .cc-priv-ctl-row h3.cc-priv-ctl-label { margin: 0 0 4px !important; }
.cc-priv-ctl-desc {
    font-size: 16px;
    line-height: 1.6;
    color: #2C1810;
    margin: 0;
    max-width: 56ch;
}
.cc-priv-ctl-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

/* --- The switch ---
   Three states, each readable without color: the knob moves (shape), the
   track fills (color), and .cc-priv-switch-state spells the state out in
   words. Hover goes cream, not maroon: a maroon button surface with a maroon
   track inside it would erase the knob, and the design system reserves the
   full maroon flip for pills and nav buttons. */
.cc-priv-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 6px 14px 6px 8px;
    background: #FFFFFF;
    border: 1.5px solid #7b1113;
    border-radius: 999px;
    color: #2C1810;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.cc-priv-switch:hover,
.cc-priv-switch:focus,
.cc-priv-switch:active {
    background: #f0ece6;
    border-color: #5a0c0e;
    /* Pinned with the background: Neve's global button:hover would
       otherwise hand this label white text over the cream fill (1.18:1).
       feedback_neve_button_cascade / feedback_hover_contrast. */
    color: #2C1810;
}
.cc-priv-switch:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(123, 17, 19, 0.35);
}
.cc-priv-switch-track {
    position: relative;
    flex: none;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: #f0ece6;
    border: 1.5px solid #6A5E57;
    transition: background .15s, border-color .15s;
}
.cc-priv-switch-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1.5px solid #6A5E57;
    transition: transform .15s, background .15s, border-color .15s;
}
/* on */
.cc-priv-switch[aria-checked="true"] .cc-priv-switch-track {
    background: #7b1113;
    border-color: #7b1113;
}
.cc-priv-switch[aria-checked="true"] .cc-priv-switch-track::after {
    transform: translateX(20px);
    border-color: #FFFFFF;
}
/* disabled by Global Privacy Control. No opacity: a distinct border and the
   secondary text token, both of which still meet 4.5:1, plus a cursor and a
   spelled-out state label. aria-disabled (not the disabled attribute) keeps
   the control focusable so a keyboard user can read why it cannot be changed. */
.cc-priv-switch[aria-disabled="true"] {
    background: #f5f2ed;
    border-color: #6A5E57;
    border-style: dashed;
    color: #6A5E57;
    cursor: not-allowed;
}
.cc-priv-switch[aria-disabled="true"]:hover { background: #f5f2ed; border-color: #6A5E57; }
.cc-priv-switch[aria-disabled="true"] .cc-priv-switch-track {
    background: #E8E2DC;
    border-color: #6A5E57;
}
.cc-priv-switch[aria-disabled="true"] .cc-priv-switch-track::after {
    background: #6A5E57;
    border-color: #6A5E57;
}
.cc-priv-switch-state {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Status readout (GPC / Do Not Track). Not a control: no border, no pointer. */
.cc-priv-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: #2C1810;
    font-size: 15px;
    font-weight: 600;
}
.cc-priv-status-dot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #7b1113;
    border: 1px solid #5a0c0e;
}
/* The dot is decorative reinforcement only. Never the sole carrier of state:
   .cc-priv-status always contains the state in words. */
.cc-priv-status--off .cc-priv-status-dot { background: #E8E2DC; border-color: #6A5E57; }

/* Outbound actions (change password, sign out other devices, request my data).
   Real links, because they navigate. Outlined-button chrome so they rank below
   the hero CTAs but read as actions. */
.cc-priv-wrap a.cc-priv-action,
.cc-priv-wrap a.cc-priv-action:link,
.cc-priv-wrap a.cc-priv-action:visited,
.cc-priv-controls button.cc-priv-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    background: #FFFFFF;
    color: #7b1113;
    border: 2px solid #7b1113;
    border-radius: 6px;
    padding: 10px 18px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.cc-priv-wrap a.cc-priv-action:hover,
.cc-priv-wrap a.cc-priv-action:focus-visible,
.cc-priv-controls button.cc-priv-action:hover,
.cc-priv-controls button.cc-priv-action:focus-visible {
    background: #7b1113;
    color: #fff !important;
    border-color: #7b1113;
    text-decoration: none;
}
.cc-priv-wrap a.cc-priv-action:focus-visible,
.cc-priv-controls button.cc-priv-action:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(123, 17, 19, 0.35);
}

/* Shown to signed-out readers in place of the three account rows, so a missing
   control reads as "not yours yet" rather than as a broken panel. Quiet by
   design: it is a footnote, not an invitation to sign in. */
.cc-priv-ctl-note {
    color: #6A5E57;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    padding: 16px 0 4px;
    border-top: 1px solid #E8E2DC;
}

/* Live region for switch and clear-preferences feedback. Visible, because a
   sighted user needs the same confirmation a screen reader gets. */
.cc-priv-ctl-feedback {
    color: #2c2218;
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
    padding: 12px 0 18px;
    min-height: 1.5em;              /* reserved so the panel does not jump */
}
.cc-priv-ctl-feedback:not(:empty) {
    border-top: 1px solid #E8E2DC;
    padding-top: 14px;
    font-weight: 600;
}

/* JS gating. Everything JS drives ships hidden and every explanation of it
   ships visible; the reference implementation adds .cc-priv-js to the <html>
   element on init, which swaps the two. A JS failure therefore leaves a
   readable legal page and no dead controls, which is the only acceptable
   failure mode for this page.
   The flag sits on <html>, not on .cc-priv-wrap, because the hero (and its
   Print button) is a SIBLING of the wrap, not a descendant. */
.cc-priv-jsonly { display: none; }
.cc-priv-js .cc-priv-jsonly { display: revert; }
.cc-priv-js .cc-priv-ctl-control.cc-priv-jsonly { display: flex; }
.cc-priv-js .cc-priv-nojs { display: none; }


/* =============================================================================
   11. Numbered steps ("Your rights and how to exercise them")
   A core/list (ol) with generated maroon numerals. The number comes from the
   list, not from the prose, so reordering the steps cannot desynchronise them.
   ========================================================================== */
.entry-content .cc-priv-wrap ol.cc-priv-steps {
    list-style: none;
    counter-reset: cc-priv-step;
    padding-left: 0;
    margin: 16px 0 20px !important;
}
.cc-priv-steps > li {
    position: relative;
    padding: 0 0 0 48px;
    margin: 0 0 18px;
    min-height: 34px;
}
.cc-priv-steps > li::before {
    counter-increment: cc-priv-step;
    content: counter(cc-priv-step);
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: #7b1113;
    color: #fff;                    /* maroon fill sets its own white text */
    border-radius: 50%;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}


/* =============================================================================
   12. Changelog ("Changes to this policy")
   Date and summary on one row, hanging date column, newest first.
   ========================================================================== */
.entry-content .cc-priv-wrap ul.cc-priv-changelog {
    list-style: none;
    padding-left: 0;
    margin: 16px 0 0 !important;
}
.cc-priv-changelog > li {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 4px 18px;
    padding: 14px 0;
    margin: 0;
    border-top: 1px solid #E8E2DC;
    max-width: none;
}
.cc-priv-changelog > li:last-child { border-bottom: 1px solid #E8E2DC; }
.cc-priv-changelog time,
.cc-priv-changelog .cc-priv-changelog-date {
    color: #7b1113;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-variant-numeric: tabular-nums;
}


/* =============================================================================
   13. Contact card
   ========================================================================== */
.cc-priv-contact {
    background: #f5f2ed;
    border: 1px solid #E8E2DC;
    border-top: 3px solid #7b1113;
    border-radius: 12px;
    padding: 24px 26px;
    margin: 18px 0 0;
}
.cc-priv-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
    gap: 18px 28px;
}
.cc-priv-contact address {
    font-style: normal;
    font-size: 16px;
    line-height: 1.7;
    color: #2C1810;
}
.cc-priv-contact-label {
    color: #6A5E57;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0 0 6px;
}


/* =============================================================================
   14. Responsive
   Single column below 781px (core's own columns breakpoint), rail becomes the
   details disclosure, tables become labelled cards.
   ========================================================================== */
@media (max-width: 781px) {
    /* Still full bleed on a telephone, so no radius. The 16px side padding
       comes from the base rule; the inner measure collapses to
       calc(100vw - 32px) on its own. */
    .cc-priv-hero { padding: 44px 16px 38px; }
    .cc-priv-hero-ornament { max-width: 290px; gap: 14px; }
    .cc-priv-hero-buttons .wp-block-button,
    .cc-priv-hero-buttons .wp-block-button__link { width: 100%; }

    .wp-block-columns.cc-priv-shell {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        margin-top: 22px;
    }
    /* The desktop rail is replaced, not hidden: its content is duplicated
       inside .cc-priv-rail-mobile in the markup. Two copies of the same link
       list is the honest trade for keeping both layouts real; the JS keeps
       aria-current in sync across both. */
    .cc-priv-shell > .cc-priv-railcol { display: none; }
    .cc-priv-rail-mobile { display: block; }
    .cc-priv-rail-mobile .cc-priv-rail-list {
        background: #f5f2ed;
        border: 1px solid #E8E2DC;
        border-top: 0;
        border-radius: 0 0 10px 10px;
        padding: 6px 12px 10px;
    }

    .cc-priv-sec { margin-top: 34px; }
    .cc-priv-h2 { font-size: 24px; }

    /* --- Stacked table cards ---
       display: block strips the native table roles, so the markup supplies
       role="table" / rowgroup / row / columnheader / cell explicitly (this is
       why both tables are wp:html blocks, see DESIGN_NOTES). Labels come from
       data-label; the nth-child fallbacks below cover a table rebuilt as a
       core/table block, which cannot emit attributes on cells. */
    /* th belongs in this list too. Leaving it out left the row header as a
       table-cell inside a block tr, which rendered it as a stray dark box at the
       top of every stacked card instead of as the card's title. */
    .cc-priv-table table,
    .cc-priv-table tbody,
    .cc-priv-table tr,
    .cc-priv-table th,
    .cc-priv-table td {
        display: block;
        width: auto;
    }
    .cc-priv-table table {
        border: 0;
        background: transparent;
        overflow: visible;
        table-layout: auto;
    }
    /* thead is removed from the visual flow but kept in the DOM for AT. */
    .cc-priv-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }
    .cc-priv-table tbody tr {
        background: #FFFFFF;
        border: 1px solid #E8E2DC;
        border-left: 4px solid #7b1113;
        border-radius: 10px;
        padding: 4px 16px 10px;
        margin-bottom: 14px;
    }
    .cc-priv-table tbody tr:nth-child(even) td,
    .cc-priv-table tbody tr:nth-child(even) th { background: transparent; }
    .cc-priv-table td {
        border-top: 1px solid #F0EBE6;
        padding: 10px 0;
    }
    /* The card title. Was written as `tbody tr td:first-child` and never
       matched, because the cell is a th. Serif, so a stacked card is titled the
       way a card elsewhere on the site is titled. */
    .cc-priv-table tbody th {
        border-top: 0;
        background: transparent;
        color: #2c2218;
        font-family: 'Sorts Mill Goudy', Georgia, serif;
        font-size: 20px;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: none;
        padding: 12px 0 8px;
    }
    /* The label is generated, so it is announced as content of the cell rather
       than as a separate row: the same association a columnheader gives. */
    .cc-priv-table td::before {
        display: block;
        color: #6A5E57;
        font-family: inherit;
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        margin-bottom: 3px;
    }
    .cc-priv-table td[data-label]::before { content: attr(data-label); }
    .cc-priv-table tbody tr td:first-child::before { content: none; }
    /* Fallback labels for a core/table rebuild (no data-label available). */
    .cc-priv-table--collect td:not([data-label]):nth-child(2)::before { content: "Examples"; }
    .cc-priv-table--collect td:not([data-label]):nth-child(3)::before { content: "Why we have it"; }
    .cc-priv-table--collect td:not([data-label]):nth-child(4)::before { content: "How long we keep it"; }
    .cc-priv-table--cookies td:not([data-label]):nth-child(2)::before { content: "Set by"; }
    .cc-priv-table--cookies td:not([data-label]):nth-child(3)::before { content: "Purpose"; }
    .cc-priv-table--cookies td:not([data-label]):nth-child(4)::before { content: "Lifetime"; }

    .cc-priv-ctl-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
    .cc-priv-ctl-control { justify-content: flex-start; }
    .cc-priv-changelog > li { grid-template-columns: minmax(0, 1fr); }
    .cc-priv-contact { padding: 20px 18px; }
}

/* Tablet: the rail is real but tighter. */
@media (min-width: 782px) and (max-width: 1024px) {
    .wp-block-columns.cc-priv-shell {
        grid-template-columns: 216px minmax(0, 1fr);
        gap: 26px;
    }
    .cc-priv-rail { padding: 14px 12px; }
}


/* =============================================================================
   15. Reduced motion
   NOTE: do not add .cc-priv-wrap or .cc-priv-hero here. Their translateX is
   layout centring, not motion, and resetting it pushes the page off-centre.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .cc-priv-card,
    .cc-priv-switch,
    .cc-priv-switch-track,
    .cc-priv-switch-track::after,
    .cc-priv-wrap .cc-priv-rail-list a,
    .cc-priv-wrap a.cc-priv-action,
    .cc-priv-controls button.cc-priv-action,
    .cc-priv-hero-buttons .wp-block-button__link {
        transition: none !important;
    }
    /* The knob still has to MOVE, it just moves instantly: position is the
       non-color cue for the on state. */
    html { scroll-behavior: auto !important; }
}


/* =============================================================================
   16. Print
   People save this document. Reset the break-out (a 1223px transformed box
   prints clipped), drop the rail and the interactive panel, and expose link
   URLs so a paper copy is still verifiable.
   ========================================================================== */
@media print {
    .cc-priv-hero,
    .cc-priv-hero-inner,
    .cc-priv-wrap {
        width: auto !important;
        max-width: none !important;
        margin-left: 0;
        margin-right: 0;
        transform: none;
        box-shadow: none;
    }
    .cc-priv-hero {
        background: #fff !important;
        color: #2c2218;
        border: 0;
        border-bottom: 2px solid #7b1113;
        border-radius: 0;
        padding: 0 0 18px;
        text-align: left;
        break-after: page;
    }
    .cc-priv-hero-title,
    .cc-priv-hero-promise,
    .cc-priv-hero-meta,
    .cc-priv-hero-meta strong { color: #2c2218 !important; }
    /* The hero is centred on screen and left-aligned on paper, so the two
       centring mechanisms have to be undone as well as text-align. */
    .cc-priv-hero-promise { margin-left: 0; max-width: none; }
    .cc-priv-hero-meta { justify-content: flex-start; }
    .cc-priv-hero-eyebrow { color: #7b1113 !important; letter-spacing: 2px; }
    .cc-priv-hero-ornament,
    .cc-priv-hero-buttons,
    .cc-priv-shell > .cc-priv-railcol,
    .cc-priv-rail-mobile,
    .cc-priv-ctl-control,
    .cc-priv-ctl-feedback { display: none !important; }

    .wp-block-columns.cc-priv-shell { display: block; }
    .cc-priv-sec { margin-top: 22px; break-inside: auto; }
    .cc-priv-h2,
    .cc-priv-h3,
    .cc-priv-card-h { break-after: avoid; }
    .cc-priv-doc p,
    .cc-priv-doc li { max-width: none; }

    .cc-priv-card,
    .cc-priv-note,
    .cc-priv-commit,
    .cc-priv-caution,
    .cc-priv-contact,
    .cc-priv-ctl-row,
    .cc-priv-table tr { break-inside: avoid; }
    .cc-priv-card,
    .cc-priv-note,
    .cc-priv-commit,
    .cc-priv-caution,
    .cc-priv-contact { box-shadow: none; }
    .cc-priv-controls { box-shadow: none; border-color: #6A5E57; }
    .cc-priv-table th {
        background: #fff;
        color: #2c2218;
        border-bottom: 2px solid #2c2218;
    }
    .cc-priv-table thead { display: table-header-group; }   /* repeat headers across pages */
    .cc-priv-table tbody tr:nth-child(even) td { background: transparent; }

    /* URLs after link text, http(s) only. Internal anchors would print a wall
       of hashes, and every mailto on this page uses the address itself as the
       link text, so printing its href just doubled it ("privacy@cosmosclub.org
       (mailto:privacy@cosmosclub.org)"). If a future mailto link is given
       different link text, add the URL by hand in the prose instead. */
    .cc-priv-wrap a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        font-weight: 400;
        word-break: break-all;
    }
    .cc-priv-wrap a[target="_blank"]::after { content: " (" attr(href) ")"; }
    /* The static fallback text is the right thing to print, even when JS ran. */
    .cc-priv-js .cc-priv-nojs { display: revert !important; }
    .cc-priv-js .cc-priv-jsonly { display: none !important; }
}
/* ===== END Privacy policy (cc-priv) ===== */

/* ===== BEGIN Homepage hero video (post 32) =====
   The hero lives inside a wp:html block, so core never registers a core/video
   block for this page and never enqueues the block-library rule that stretches
   the media. Left alone the <video> falls back to its intrinsic box, which is
   what leaves a gap to the right of the frame. Sizing it here is the only thing
   making the hero span its container, so do not remove this block.

   The source mp4 is 1280x720 with the picture letterboxed inside it, so the
   media is given a box wider than its own ratio and cropped with object-fit
   rather than fitted, and the file itself is stored pre-cropped to 1280x674. */
.cc-home-hero {
    position: relative;
    padding: 0;
    line-height: 0;          /* kills the inline descender gap under the video */
    overflow: hidden;
    background: #2c2218;

    /* Full bleed out of the 960px page container. The alignfull class on the
       figure does nothing here for the same reason the sizing does not: no
       core/video block is registered, so the block-library alignment rules are
       never enqueued. This is the identical escape the Kadence rows further
       down the page use, and .wrapper plus body already carry overflow-x:hidden
       to absorb the scrollbar difference, so it adds no horizontal scroll. */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.cc-home-hero video,
video#cc-home-hero-video {
    display: block;
    width: 100%;
    /* 52.6vw is the natural height of the 1280x674 picture at full bleed.
       Floored so phones still get a real hero, capped so the video never
       swallows the whole viewport on a laptop. */
    height: clamp(300px, 52.6vw, 72vh);
    object-fit: cover;
    object-position: center center;
    background: #2c2218;
}

/* Reduced motion and Data Saver never receive a src, so the poster is all there
   is to show. Give it the same box so the layout does not shift. */
.cc-home-hero video:not([src]) {
    object-fit: cover;
}
/* ===== END Homepage hero video (post 32) ===== */

/* ===== Homepage Welcome section: mobile member-login button (post 32) =====
   The header's LOGIN pill (#cosmos-header-login, styled by inc/navigation.php)
   is hidden below 960px, leaving phones with no login affordance on the
   homepage. The block itself is logged-out-only (cosmos-block-visibility
   mu-plugin), and this shows it only where the header pill is absent, so no
   audience ever sees two login controls. The button reuses .cosmos-login-btn
   verbatim; the white keyline is only for definition against the section's
   maroon #7b1113 ground. */
.cc-welcome-login-wrap {
    display: none;
}
@media (max-width: 960px) {
    .cc-welcome-login-wrap {
        display: flex;
        justify-content: center;
        margin: 18px 0 6px;
    }
    .cc-welcome-login-wrap .cosmos-login-btn {
        border: 1.5px solid rgba(255, 255, 255, 0.85);
    }
}
/* ===== END Welcome mobile login ===== */

/* ═══════════════════════════════════════════════════════════════════════
 * SITEWIDE NON-NEGOTIABLE (2026-08-20): white ink stays white on maroon,
 * in EVERY state. A :hover/:focus rule must never flip text to maroon
 * while the background remains maroon (bug seen on the Around the Club
 * filter pills: .atc-filter:hover set maroon ink and outranked .is-active).
 * Extends the 2026-04-28 safety net with the remaining brand maroons and
 * explicit state coverage. Placed at end of file so it wins !important
 * ties by order. Any future component with a maroon background MUST keep
 * white text on hover - add its class here if it cannot guarantee that.
 * ═══════════════════════════════════════════════════════════════════════ */
[style*="background:#820d13"], [style*="background-color:#820d13"],
[style*="background:#820d13"]:hover, [style*="background-color:#820d13"]:hover,
[style*="background:#65070c"], [style*="background-color:#65070c"],
[style*="background:#65070c"]:hover, [style*="background-color:#65070c"]:hover,
.has-maroon-background-color:hover, .has-maroon-background-color:focus-visible,
.cc-bg-maroon:hover, .cc-bg-maroon:focus-visible,
.cc-btn-maroon:hover, .cc-btn-maroon:focus-visible,
.esp-tab.active:hover, .esp-tab.active:focus-visible,
.esp-page-button.active:hover, .esp-page-button.active:focus-visible,
.atc-filter.is-active,
.atc-filter.is-active:hover,
.atc-filter.is-active:focus-visible,
.atc-btn-primary:hover,
.atc-btn-primary:focus-visible {
    color: #ffffff !important;
}