/*
Theme Name: my-theme
Theme URI: https://example.com
Author: me
Author URI: https://example.com
Description: Gutenberg-compatible WordPress theme
Version: 1.0
License: none - internal usage
License URI: none
Tags: block-editor, gutenberg, responsive
Text Domain: mytheme
*/

/*html, body {*/
/*  overflow-x: hidden !important;*/
/*  width: 100%;*/
/*  max-width: 100%;*/
/*}*/

/* =====================================================================
   WHAT THIS FILE IS NOW
   This sheet is loaded twice on purpose (wp_enqueue_style front +
   add_editor_style editor) and contains ONLY what theme.json and block
   attributes cannot express:
     - full-bleed exceptions to the JSON root-padding gutter (a few direct
       children of alignfull blocks that must NOT be auto-inset)
     - classic-markup parts: header/nav/hamburger/footer (PHP templates,
       no block grammar exists for them)
     - component skins: buttons, dividers, cards, scroller, accordions
     - true special cases, each justified where it appears:
       hero SVG overlay, masonry gallery, Mailchimp plugin overrides,
       CSS-mask scroll arrows, click-to-play video cover
   Body typography, text/link color, heading weight + margin, button
   radius, root blockGap, the page side gutter (root padding), palette and
   spacing presets live in theme.json. Pattern top/bottom padding/min-heights/
   gaps/alignment live in the pattern markup as block attributes
   (blocks/patterns.php). Do not re-add them here.

   DO NOT "MODERNISE" THE GRID RULES.
   The grid groups declare layout {"type":"grid","columnCount":2} and the
   grid-template-columns rules below override it. That looks like a bug and
   is not. Core's grid Auto mode emits
     repeat(auto-fill, minmax(min(Xpx,100%), 1fr))
   — auto-FILL, not auto-fit (open Gutenberg issue #57186). In an alignfull
   container ~1728px wide, auto-fill would create 4-5 tracks for a 2-child
   grid and shrink the children to ~330px. The minmax(max(300px,
   (100% - gap)/2), 1fr) form below is an explicit 2-column ceiling that no
   block attribute can express. It stays until core ships auto-fit.

   REMAINING DELIBERATE FIGHT (read before "cleaning" further):
   1. The global ".wp-block-columns:not(.hero-split):not(.feature-main):not(.t3-main):not(.tct-cols)"
      override below converts every other Columns block into a 2-col grid
      with gutter-padded cells. This REPLACES core columns behavior and is
      NOT how a block theme should do it — but existing pages depend on
      it, so it stays. Untangle it page-by-page, not in this file.
   2. Gallery figure/figcaption rules keep !important because CORE itself
      ships ID-level specificity there (figure:not(#individual-image) in
      gutenberg/block-library gallery/style.scss) — unbeatable without it.
   3. Mailchimp (Easy Forms) rules keep !important: third-party plugin CSS
      with its own load order; overriding politely is not reliable.
   Everything else is plain, ordinary-specificity CSS.
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Bold weight is core-safe to keep global. The 0.2em brand TRACKING is
   scoped to theme pattern wrappers only — a stock <strong> in a plain
   palette paragraph now gets pure defaults (weight 700, no imposed
   tracking), while bold text inside the theme's own patterns keeps the
   brand look. Every <strong> in the patterns sits under one of these
   wrappers (contact / feature / hero / triple / events blocks). */
strong { font-weight: 700; }
/* NOT global — the earlier globalisation is reverted. .content-grid and
   .feature-grid are gone from this list because the five card patterns carry
   the tracking as a letterSpacing ATTRIBUTE on the bold paragraphs instead
   (every <strong> in this theme is a whole line, so a block attribute is an
   exact substitute for the `.wrapper strong` rule). The four wrappers below
   keep their classes for other reasons, so they stay on CSS until they are
   migrated the same way. A <strong> in ordinary post content keeps pure
   defaults, which is what the original scoping was protecting. */
.hero-split strong,
/* .media-text-lore strong DELETED — the media-text family contains no
   <strong> at all; every bold line in this theme lives in the triple /
   contact families, which carry letter-spacing as a paragraph attribute. */

/* Header (display) font — Figma: 600, line-height 100%, letter-spacing 4%.
   Targets every block using the Header family (hero/cover H1s). Weight 600
   comes from the heading default in theme.json; lh/ls have no clean
   theme.json grammar per-family, so set here. */
/* .has-header-font-family DELETED — moved to styles.elements.h1 / h2 in
   theme.json. It HAD to move: this class only existed while the heading blocks
   carried a fontFamily attribute, and those attributes are gone, so the
   selector would have matched nothing and the 600 / lh 1 / 0.04em would have
   vanished silently. */

/* ── CAPS POLICY — one place, not per pattern ────────────────────────────
   theme.json styles.elements.heading sets text-transform:uppercase on every
   h1-h6, so CAPS IS THE DEFAULT and no pattern declares it any more (the
   hardcoded textTransform attributes are all gone from patterns.php).
   The two DISPLAY presets opt back out below: hero + cover titles render
   Caps+lower. Everything else — section h1s, card h2s, the posts-scroller
   heading — inherits caps from the JSON.
   Specificity: the JSON emits a bare `h1,h2,…` at 0-0-1; these class
   selectors are 0-1-0, so they win regardless of source order.
   TO CHANGE THE POLICY, EDIT THESE TWO LINES — not the pattern markup. */
/* .has-hero-font-size,.has-title-font-size{text-transform:none} DELETED. It
   only ever un-did styles.elements.heading's global uppercase. That uppercase
   is gone too, so both halves cancelled out and left together. Heading case is
   now whatever an editor types; pattern placeholders are written in caps where
   the design wants caps. */

header, footer {
    font-size: 14px;
    letter-spacing: 0.2em;
}


/* ── PAGE GUTTER — now JSON-owned ────────────────────────────────────────
   The side gutter is theme.json styles.spacing.padding (left/right) +
   useRootPaddingAwareAlignments:true. WP insets normal content by the
   gutter and gives every .alignfull a negative-margin breakout to the
   screen edge — identically in editor and front. No `main > *` rule lives
   here anymore. Top/bottom rhythm stays per-section (pattern attributes).

   The four rules below are the ONLY exceptions: WP's auto re-inset pads the
   direct children of every .alignfull block by the gutter — right for text,
   wrong for these full-bleed children, so undo it on them.
   NOTE (WP 7.0 audit): these CANNOT move to per-instance custom CSS. The
   re-inset rule WP emits is 0,2,0 (.has-global-padding > .alignfull > …);
   instance CSS renders as `:root :where(.hash)` = 0,1,0 and loses. */
.mt-square > .grid-img { padding-inline: 0; }
.posts-section > .posts-container { padding-inline: 0; }
.wp-block-template-part .container { padding-inline: 0; }

/* ── generic helpers ── */
/* NOTE: no width/margin on .alignfull here — WP's root-padding-aware
   negative-margin breakout owns those. A width:100% override pins the
   block to the inner content box so it can't stretch to the screen edge. */
.alignfull img, .alignwide img { max-width: 100%; }
.wp-block-image.alignfull img { width: 100%; }



/* ── GRID COLUMNS — now OPT-IN (was global fight #1) ─────────────────────
   Was: .wp-block-columns:not(.hero-split):not(.feature-main):not(.t3-main),
   which force-converted EVERY Columns block on the site — including plain
   ones dragged from the palette — into this 2-col grid. That mangled stock
   blocks and is the opposite of how a block theme should treat core blocks.

   Now scoped to the "Grid Columns" block STYLE (registered on core/columns
   in patterns.php). A bare Columns block keeps core behaviour + theme.json
   defaults; only columns the editor marks "Grid Columns" get this look, and
   it's a one-click toggle in the inspector that travels with the block.
   The three theme patterns that use Columns (hero-split / feature-main /
   t3-main) were already excluded from the old rule and have their own flex
   CSS, so none of them needed — or gets — this class. */
.wp-block-columns.is-style-grid-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0;
}
.wp-block-columns.is-style-grid-columns > .wp-block-column {
    padding: var(--wp--preset--spacing--gutter, 5vw);
    display: flex;
    flex-direction: column;
}
.wp-block-columns.is-style-grid-columns > .wp-block-column h2 {
    margin: 0 0 1rem 0;
}
.wp-block-columns.is-style-grid-columns > .wp-block-column > * {
    margin-bottom: var(--wp--preset--spacing--stack, 3vw);
}
.wp-block-columns.is-style-grid-columns > .wp-block-column > *:last-child {
    margin-bottom: 0;
}
.wp-block-columns.is-style-grid-columns > .wp-block-column p {
    margin-bottom: var(--wp--preset--spacing--stack-sm, 1vw);
}
.wp-block-columns.is-style-grid-columns > .wp-block-column p:last-child {
    margin-bottom: 0;
}
@media (max-width: 1010px) {
    .wp-block-columns.is-style-grid-columns {
        grid-template-columns: 1fr;
    }
}

/* ── CLASSIC MARKUP: nav / header / hamburger ────────────────────────────
   These come from PHP template parts — no block grammar exists for them,
   so plain CSS is the correct tool here, not a workaround. */
nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}
nav ul li a { text-decoration: none; color: black; }
nav ul li a:hover { text-decoration: underline; }

header {
    width: 100%;
    /* No height here — see .header-content's min-height. The markup is
       header > .container > .header-content, and .container has auto height,
       so a percentage height on the row resolved against nothing and the
       content stayed stuck to the top. Setting the 100px on the row itself
       removes the percentage chain completely. */
    padding: 0 var(--wp--preset--spacing--gutter, 5vw);
    background-color: var(--wp--preset--color--warm, #F8F4F2);
}
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    /* The 100px bar lives HERE, not on <header>: this element is the flex
       row that already centres its children, so giving it the height makes
       align-items:center work with no percentage chain to break. <header>
       has no vertical padding, so its height is exactly this. */
    min-height: 100px;
}
.logo img {
    max-height: 60px;
    padding-right: 10vw;
}
/* Both logos grow slightly on hover. On the <img>, not the <a>: the header's
   anchor also carries the 10vw padding-right that spaces the nav, and scaling
   that would move the menu with it. */
.logo img,
.footer-logo img {
    transition: transform .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.logo a:hover img,
.footer-logo a:hover img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
    .logo img, .footer-logo img { transition: none; }
    .logo a:hover img, .footer-logo a:hover img { transform: none; }
}
.categories { display: flex; align-items: center; }

.category-menu {
    display: flex;
    gap: 3vw;
    flex-wrap: wrap;
    align-items: center;
}
.category-menu li { list-style: none; }
.category-menu li a {
    text-decoration: none;
    color: black;
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.category-menu li a:hover { transform: scale(1.1); }
.category-menu li:last-child a {
    background: #000;
    color: #fff;
    padding: 10px 15px;
    border-radius: 0;
}
.category-menu li:last-child a:hover {
    background: black;
    transform: scale(1.1);
}
.category-menu li a.current-menu-item,
.category-menu li.current-menu-item a,
.category-menu li a.current_page_item,
.category-menu li.current_page_item a,
.category-menu li a.current-category-ancestor,
.category-menu li.current-category-ancestor a {
    font-weight: bold;
}

.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 30px;
    height: 24px;
    cursor: pointer;
}
.hamburger span {
    display: block;
    width: 100%;
    height: 1.5px;
    background: black;
    transition: 0.2s ease;
    transform-origin: center;
}
#menu-toggle:checked + .hamburger span:nth-child(1) {
    transform: rotate(45deg) translate(4.5px, 4.5px);
}
#menu-toggle:checked + .hamburger span:nth-child(3) {
    transform: rotate(-45deg) translate(4.5px, -4.5px);
}
#menu-toggle:checked + .hamburger span:nth-child(2) { opacity: 0; }

@media (max-width: 1010px) {
    /* Below this width the header GROWS to hold the open hamburger menu, so
       the row goes back to its own 80px and gains 10px of breathing room. */
    header { padding: 10px var(--wp--preset--spacing--gutter, 5vw); }
    .header-content {
        /* Back to 80px: the desktop 100px would beat the max-height below
           (when min-height exceeds max-height, min wins) and the collapsed
           bar would never clip where it is meant to. */
        min-height: 80px;
        flex-direction: column;
        align-items: flex-start;
        max-height: 80px;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    .header-content:has(#menu-toggle:checked) { max-height: 1000px; }
    .logo {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .logo img { padding-right: 0; }
    .hamburger { display: flex; }
    .categories {
        width: 100%;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    .category-menu {
        flex-direction: column;
        gap: 45px;
        align-items: flex-end;
        width: 100%;
    }
    .category-menu li a {
        font-size: 24px;
        text-align: right;
        transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }
    .category-menu li a:hover  { transform: scale(1.05); }
    .category-menu li a:active { transform: scale(0.98); }
}

/* ── CLASSIC MARKUP: footer ── */
footer {
    padding: var(--wp--preset--spacing--gutter, 5vw);
    background-color: black;
    color: var(--wp--preset--color--warm, #F8F4F2);
    line-height: 1.5;
    letter-spacing: 0.2em;
}
footer a { color: var(--wp--preset--color--warm, #F8F4F2); }
footer p { color: var(--wp--preset--color--warm, #F8F4F2); }

.footer-content { display: flex; flex-direction: column; }
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}
.footer-logo img {
    max-height: 70px;
    padding-right: 10vw;
}
/* Social icons come from a MENU now (location 'social'), so the markup is
   ul > li > a with a TEXT label and no <img> — a menu item cannot output an
   image. The icon is a background, resolved in TWO passes:

     1. by LABEL, via the social-<slug> class that the nav_menu_css_class
        filter in functions.php adds (case-insensitive, aliases folded)
     2. by HREF, which comes LAST here and therefore WINS — both selectors
        are 0-2-0, so source order decides

   So a real instagram.com URL always gets the Instagram icon whatever it is
   labelled; a shortlink, redirect or typo'd URL falls back to what the item
   is NAMED. Neither matching = no icon, deliberately: there is no generic
   fallback image, so a mislabelled item is visibly wrong instead of quietly
   showing a chain link.

   The label is pushed out of view rather than display:none'd, so it still
   reaches screen readers. */
.social-media { display: flex; align-items: center; }
.social-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 26px;
}

@media (max-width: 440px) { .social-menu { gap: 3vw; } }

.social-menu li { margin: 0; }
.social-menu a {
    display: block;
    width: 40px;
    height: 40px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.social-menu a:hover  { transform: scale(1.15); }
.social-menu a:active { transform: scale(0.9); }

/* pass 1 — by NAME (fallback) */
.social-menu .social-instagram a { background-image: url('assets/instagramB.svg'); }
.social-menu .social-youtube   a { background-image: url('assets/youtubeB.svg'); }
.social-menu .social-facebook  a { background-image: url('assets/facebookB.svg'); }

/* pass 2 — by URL (wins). Dot included so "instagram.com" hits but a path
   like /our-instagram does not. */
.social-menu a[href*="instagram." i] { background-image: url('assets/instagramB.svg'); }
.social-menu a[href*="youtube." i]   { background-image: url('assets/youtubeB.svg'); }
.social-menu a[href*="facebook." i]  { background-image: url('assets/facebookB.svg'); }

.footer-divider {
    border: 1px solid var(--wp--preset--color--warm, #F8F4F2);
    margin: 65px 0;
}
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin-top: 20px;
}
.footer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 26px;
}
.footer-menu li { margin: 0; }
.footer-menu a {
    text-decoration: none;
    font-size: 20px;
    color: var(--wp--preset--color--warm, #F8F4F2);
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.footer-menu a:hover { transform: scale(1.1); }
.footer-menu li.current-menu-item a,
.footer-menu li.current_page_item a { font-weight: bold; }

.footer-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}
/* Now a <ul> from the 'footer' menu location, not a div of bare <a>s — the
   list reset and the li rule are the only additions; the link skin below is
   unchanged and still applies. */
.footer-policies {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 26px;
}
.footer-policies li { margin: 0; }
.footer-policies a {
    display: block;
    text-align: right;
    text-decoration: none;
    font-size: 17px;
    color: var(--wp--preset--color--grey-policy, #777777);
}
.footer-policies a:hover { text-decoration: underline; }

/* SUPPORT CTA — the LAST item of the footer menu renders as a button, the
   same convention the header uses for .category-menu li:last-child. Position
   is the switch, so tell the client: whatever they drag to the bottom of the
   Footer menu becomes the button.
   White on the dark footer, i.e. the inverse of the header's black button,
   and matched to the newsletter submit (45px tall, 18px, 0.2em, square).
   align-self overrides the ul's align-items:stretch so the button sizes to
   its own text instead of spanning the column. */
.footer-policies li:last-child { align-self: flex-end; }
.footer-policies li:last-child a,
.support-dock a {
    background-color: #ffffff;
    border: 2px solid #ffffff;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    padding: 10px 20px;
    box-sizing: border-box;
    font-size: 18px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    white-space: nowrap;
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
/* The generic .footer-policies a:hover underline must be cancelled here, or
   the button gets an underline no other button on the site has. */
/* Hidden while the clone is floating, so the two are never both on screen.
   visibility keeps its layout slot, so the footer does not shift. */
.footer-policies li:last-child a.is-docked { visibility: hidden; }

.footer-policies li:last-child a:hover,
.support-dock a:hover  { text-decoration: none; transform: scale(1.05); }
.footer-policies li:last-child a:active,
.support-dock a:active { transform: scale(0.95); }

/* STICKY SUPPORT CTA — a JS clone of the footer button, pinned bottom-right
   from page load and swapped out the moment the real one arrives in that
   same slot. position:sticky cannot do this: it only pins within its own
   parent's scroll range, and that parent IS the footer, so it would never
   appear earlier on the page.
   NO fade — instant swap. Both buttons sit a root gutter in from the right,
   so the X is identical by construction and the exchange happens at the exact
   frame the real one reaches the slot.
   visibility, not display, so the swap costs no layout. */
.support-dock {
    position: fixed;
    right: var(--wp--preset--spacing--gutter, 20px);
    bottom: 30px;
    z-index: 90;
    visibility: hidden;
}
.support-dock.is-visible { visibility: visible; }

/* 98% once it is fully floating. The glass version is a lighter, more
   recessive object than the solid footer button, and a hair smaller sells
   that — it reads as having let go rather than as the same button relocated.
   NOT applied while landing or stretching: in both of those the clone is
   pretending to BE the footer button, and 98% at the moment of the swap
   would be a visible 2% jump — hence the two overrides right below. */
.support-dock {
    transform: scale(.98);
    transition: transform .2s ease;
}
.support-dock.is-landing,
.support-dock.is-stretching {
    transform: none;
}

/* RECOIL — the band letting go. One move up, one back down, nothing more:
   the extra oscillations read as the button being unsure rather than as a
   snap. It also does double duty, carrying the scale from 1 (its stretched
   size) to .98 (its floating size) inside the same bounce instead of as a
   second settle afterwards.
   Every frame declares scale as well as translate — a transform is one
   property, so a keyframe naming only translateY would drop the scale and
   the button would flick back to full size mid-bounce. */
@keyframes sd-recoil {
    0%   { transform: translateY(0)     scale(1);   }
    45%  { transform: translateY(-11px) scale(.98); }
    100% { transform: translateY(0)     scale(.98); }
}
.support-dock.is-recoil {
    animation: sd-recoil .35s cubic-bezier(.33, 1, .68, 1);
}
@media (prefers-reduced-motion: reduce) {
    .support-dock.is-recoil { animation: none; }
}
.support-dock a {
    /* PURE GLASS: no fill, no painted border. The element's only effect on
       the page is blur and saturate; the rim and label carry all the
       definition, and BOTH swap colour to suit what is behind — see the
       on-light / on-dark rules below.
       Why not mix-blend-mode: a blend never escapes its nearest stacking
       context, and position:fixed on .support-dock creates one. The rim and
       label could therefore only ever blend against the dock itself, which is
       why they stayed white on a white page no matter what was removed. The
       JS samples the real background instead. */
    position: relative;
    background-color: transparent;
    /* Transparent 2px rather than none: the footer button has a 2px border,
       so reserving the same box here means the morph below only changes
       COLOUR, never size — a border appearing at land time would nudge the
       label by 2px at the exact moment it is supposed to look identical. */
    border: 2px solid transparent;
    -webkit-backdrop-filter: blur(4px) saturate(150%);
            backdrop-filter: blur(4px) saturate(150%);
    /* Barely there — just enough to lift the pane off a flat background. Any
       heavier and the shadow becomes the most visible part of a button whose
       whole point is having no fill. */
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55),
                color .25s ease,
                background-color .25s ease,
                border-color .25s ease,
                box-shadow .25s ease,
                -webkit-backdrop-filter .25s ease,
                backdrop-filter .25s ease;
}



.sd-label {opacity: 50%}

.sd-label:hover {
    opacity: 1;
}

/* The rim is a pseudo-element rather than a border so it can be recoloured
   and thickened without touching the box model: fill it, then mask out
   everything but a 1px frame. currentColor means the rim tracks the label's
   colour automatically and only one property has to switch below. */
.support-dock a::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    padding: 1px;
    background: currentColor;
    opacity: 40%;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    transition: opacity .25s ease, padding .2s ease;
}
.support-dock a:hover::after { padding: 2px; opacity: .8; }

/* THE SWITCH. Two plain colours, chosen by the luminance probe in
   patterns.php. on-light is the default in markup order so a probe that
   cannot decide leaves the button readable on a white page. */
.support-dock.on-light a { color: #111111; }
.support-dock.on-dark  a { color: #ffffff; }
.support-dock.on-dark a { box-shadow: 0 2px 12px rgba(0, 0, 0, .22); }

/* LANDING — the clone dressed as the footer button. Added at the slot,
   held for one transition, then the clone is swapped out; on the way back
   up the clone appears wearing this and morphs out of it. Because it is the
   last .support-dock rule in the file it beats on-light / on-dark on source
   order at equal specificity, which is what lets the label go black here
   regardless of what is behind. Timing is mirrored by LAND_MS in the JS. */
.support-dock.is-landing a {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #000000;
    box-shadow: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
}
/* The rim is currentColor, so on a white fill it would draw a black frame the
   footer button does not have. Fade it out as part of the morph. */
.support-dock.is-landing a::after { opacity: 0; }

/* STRETCH — the release. The JS pins top and height inline every frame while
   the clone rubber-bands off the footer button; these rules only make the
   box able to be stretched at all. bottom:auto is the important one: the
   resting rule anchors by bottom, and top+bottom+height together would leave
   the height ignored. */
.support-dock.is-stretching {
    bottom: auto;
    transition: none;          /* the JS IS the animation; a transition would lag it */
}
.support-dock.is-stretching a {
    height: 100%;              /* fill whatever height the frame set */
    align-items: center;
}
/* --sd-pull runs 0 at release to 1 at the snap, set per frame by the JS, so
   the LOOK travels with the pull instead of switching at the end: the solid
   footer fill fades out and the glass tint fades in across the whole stretch.
   Written as alpha on two backgrounds rather than a class flip, because a
   class can only be on or off and the point here is the in-between. */
.support-dock.is-stretching a {
    background-color: rgba(255, 255, 255, calc(1 - var(--sd-pull, 0)));
    border-color: rgba(255, 255, 255, calc(1 - var(--sd-pull, 0) * 0.55));
    -webkit-backdrop-filter: blur(calc(var(--sd-pull, 0) * 20px)) saturate(180%);
            backdrop-filter: blur(calc(var(--sd-pull, 0) * 20px)) saturate(180%);
    transition: none;
}



/* Fixed bottom-right on a phone fights the content and the browser chrome,
   so the dock is desktop-only. The footer button itself is unaffected. */
@media (max-width: 768px) {
    .support-dock { display: none; }
}
.footer-note {
    max-width: 300px;
    font-size: 14px;
    text-align: right;
    text-transform: uppercase;
    color: var(--wp--preset--color--warm, #F8F4F2);
}
@media (max-width: 768px) {
    .footer-bottom { flex-direction: column; gap: 30px; }
    .footer-right { align-items: flex-start; }
    .footer-policies { margin: 65px 0; }
    .footer-policies a { text-align: left; }
    /* .footer-right flips to align-items:flex-start on mobile, so the button
       follows instead of hanging off the right edge on its own. */
    .footer-policies li:last-child { align-self: flex-start; }
    .footer-note { text-align: left; }
}

.newsletter-form button {
    background-color: white;
    border: 2px solid white;
    padding: 10px 20px;
    cursor: pointer;
    height: 45px;
    min-width: 180px;
    font-size: 18px;
    text-transform: uppercase;
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.newsletter-form button:hover  { transform: scale(1.05); }
.newsletter-form button:active { transform: scale(0.95); }

/* ── utilities / link skins ── */
.posts-section--warm { background: var(--wp--preset--color--warm, #F8F4F2); }
.posts-section--warm .post-item { background: transparent; }

/* WHOLE BLOCK DELETED. The old note here claimed theme.json elements.link
   has no property for text-decoration. It does —
   styles.elements.link.typography.textDecoration — and it is now set to
   "none" globally, which is what all four selectors wanted. Links that DO
   want an underline set it themselves: the excerpt more-link rule below, and
   the "Check for more" paragraph, which carries textDecoration as a block
   attribute and draws through its inline <a> because decorations propagate
   from an ancestor and a descendant cannot cancel them. */
a[href^="tel:"],
a[href^="sms:"],
a[href^="callto:"] {
    color: inherit;
    text-decoration: none;
}

/* ── buttons ─────────────────────────────────────────────────────────────
   MIGRATED: background, text colour, 1px border, padding:0, uppercase and
   weight 400 are now core/button ATTRIBUTES (backgroundColor / textColor /
   style.border / style.spacing.padding / style.typography). core/button
   serialises its supports onto .wp-block-button__link — the exact element
   these rules used to target — so the two --dark / --light rules and the
   whole skin block are gone. border-radius:0 already came from theme.json.

   WHAT STAYS: the fixed 240x44 box and the flex centring that makes the
   inner <a> fill it. There is no grammar for "give the link an explicit
   width and height".
   TODO(7.0): dimensions.width / dimensions.height are block supports now.
   Opting core/button in via the block_type_metadata filter may retire these
   too — NEEDS TESTING FIRST, because the support serialises on the block
   root (<div class="wp-block-button">), not on the <a>. ── */
/* THE FIXED 240x44 / 165px BOX IS GONE, and with it .faq-btn / .hs-btn.
   It was actively broken: theme.json gives every button padding 0 85px, i.e.
   170px of horizontal padding, which is a rule for a button that SIZES ITSELF
   to its text. Pinning the same link to width:165px left -5px for the word, so
   the FAQ label overflowed its own border; the 240px pair had 70px of usable
   space and were one longer label away from the same bug. Every button on the
   site now works the way the migrated family already did: width from the
   theme.json horizontal padding, 44px height from lineHeight 2.625. Change the
   look in theme.json styles.blocks.core/button and all of them follow.
   .t1-btn (triple orange) is still on its own fixed box, untouched here. */
.hero-split .hs-body > .wp-block-buttons { width: 100%; }
/* GLOBALISED off .content-grid. .wp-element-button is core's own class on
   every button link on the site, so this needs no theme class and also covers
   buttons dragged in from the inserter. Still CSS, not theme.json: 7.0's
   button pseudo-element support only accepts colour / border / spacing /
   typography, and there is no `transform` property in theme.json. */
.wp-element-button { transition: transform .15s ease; }
.wp-element-button:hover { transform: scale(1.05); }
/* .feature-btns DELETED — gap is blockGap and flex-wrap is flexWrap, both
   attributes on the Buttons block. */

/* ── dividers: line style is skin; ALL margins are separator block
      attributes now (t1 40px, exp 18px, admin/feature cards 13px via the
      $divider13 builder in patterns.php). The old "13px variant can't be
      an attribute because the same markup needs different margins per
      context" exception is gone — the PHP builders emit per-context
      attributes instead of sharing one divider string. ── */
/* scope prefix `.schema-card ` dropped: .schema-card__divider is a unique
   name, the ancestor added nothing. */
/* .schema-card__divider REMOVED from this selector: the card rule lines are
   border-top ATTRIBUTES on the row / lines Groups now, so no Separator block
   and no class. The skin stays for the two dividers that are still real
   Separator blocks. */
/* .exp-divider DELETED — the accordion line is a border.bottom ATTRIBUTE on
   each accordion-heading now, so it survives the panel collapsing and the
   client can change it in the Border panel. */

/* ── image helpers ── */
/* .full-img DELETED — aspectRatio / scale / focalPoint are block attributes
   on the two double patterns' images. The clip-* rules below stay: they are
   registered block STYLES (is-style-*), which is core's own mechanism, not
   theme classes. */
/* clip styles: ordered after .full-img so equal specificity resolves by
   order — the previous !importants were unnecessary */
.is-style-clip-left img,   .clip-left img   { object-position: left center; }
.is-style-clip-right img,  .clip-right img  { object-position: right center; }
.is-style-clip-center img, .clip-center img { object-position: center center; }
.is-style-clip-top img,    .clip-top img    { object-position: center top; }
.is-style-clip-bottom img, .clip-bottom img { object-position: center bottom; }

/* ── content widgets (sections now alignfull + self-padded via block
      attributes; rules below are pure component skin) ── */
/* Scoped OFF the five-pattern family: every title in double info / double
   post / admin contact / contact grid / triple contact info now carries its
   own margin + fontSize attributes and has dropped the class. The rule is
   kept for the patterns NOT yet migrated (expand panels, events, posts). */
/* .content-grid__title DELETED — the 32px was already a fontSize attribute on
   the h1 (this rule was restating it) and the margin is now
   spacing.margin {top:0,bottom:44px} on the same heading in faq/events.
   44px, not 38px: .expand-panel's later rule always won the tie. */
/* 524→724px content/card width cap: the content-grid__grid and
   feature-cards halves moved to WP 7.0 per-instance custom CSS on the
   grid groups themselves ("css":"& > * { max-width:724px }"). The
   double-column / double-image halves STAY here: their widths are
   coupled to the ≤615px container queries below, and splitting one
   component between two homes is worse than one extra rule. */
/* The 724px cap now lives HERE for all four grids, not split between
   style.css and the per-instance "css" keys. Reason: the pattern markup
   hard-codes `has-custom-css` but CANNOT hard-code the render-time
   wp-custom-css-HASH class the rule actually needs — an unverified
   dependency the whole family was resting on. One ordinary rule removes the
   risk. This is the ONE thing keeping .content-grid__grid / .feature-cards /
   .dc-content / .di-content alive; the only way out is swap #3
   (constrained Group, contentSize:724px), which CENTERS what it caps.
   NOTE: the cap only bites above roughly a 1600px viewport. */
 /* double info / double post halves REMOVED from this rule: their columns are
   constrained Groups now (contentSize 724px, justifyContent left — core emits
   margin-left:0 !important for that, verified in lib/block-supports/layout.php),
   with the image set to alignfull so it still fills the cell. That kills
   .double-column and .double-image outright.
   The two card grids stay here: constrained and grid are mutually exclusive
   layouts, so capping each card natively would need a wrapper Group per card —
   more blocks than the class is worth. Scopes dropped; both names are unique. */
/* .feature-cards REMOVED from this rule — dead code. Those cards sit inside a
   66% column, so at a 1920px viewport they are ~546px wide; the 724px cap
   would need roughly a 2400px screen to ever fire.
   .double-column / .double-image REMOVED — their columns are constrained
   Groups now (contentSize 724px, justifyContent left). */
/* .content-grid__grid DELETED — the 724px card cap is off. Cards now run to
   the full grid track, ~805px at a 1920px viewport. Below roughly 1650px the
   cap never fired, so nothing changes on a normal screen. To restore it,
   put this rule and the className back. */
 /* .content-grid__grid track definition DELETED. The group now carries
   layout.minimumColumnWidth:"max(300px, 40%)" as an ATTRIBUTE. A PERCENTAGE
   floor is the whole trick: core Auto mode emits
   repeat(auto-fill, minmax(min(VALUE,100%),1fr)), and with a 40% floor three
   tracks can never fit (120% > 100%), so auto-fill == auto-fit and the
   2-column ceiling is preserved without CSS. It also self-stacks at
   ~750px (300/0.4), replacing the container queries. column-gap/row-gap
   were already duplicated by the group's blockGap attribute; margin-top and
   overflow were restating defaults. */

/* DELETED: .schema-cell--text and .schema-card reset blocks. Both read
   `margin:0; padding:0; background:none; border:0; box-shadow:none` — they
   were resetting properties core/group never sets in the first place, on top
   of the global `*` reset that already zeroes margin and padding. Pure
   defensive noise. The classes are kept in the markup as naming/semantics
   and as hooks for the two rules below that DO carry something. */
/* schema-card title color/margins are heading ATTRIBUTES now (orange in
   the card builders, black 8px in triple-one) — the old orange-vs-black
   branching rules are gone. Row margins/gap/min-height are group
   attributes (spacing.margin + blockGap + dimensions.minHeight); only
   align-items:baseline stays — flex layout has no baseline attribute. */
/* scope prefix dropped for the same reason. This is the ONLY property
   .schema-row carries: flex baseline alignment, which has no block
   attribute in 7.0. */
/* .schema-row DELETED. align-items:baseline was only needed because the
   label is a 20px heading and the value 18px lead. Baseline offset inside a
   line box is (lineHeight*fontSize - fontSize)/2 + ascent*fontSize; setting
   them equal for 20px@1.5 vs 18px@LH gives LH = (14 + 2*ascent)/9, i.e. 1.72
   for any plausible ascent of the Main font (1.71-1.73 across 0.70-0.80).
   So the value paragraph carries lineHeight:"1.72" and the row uses
   verticalAlignment:"top" — a GUI control — and lands on the same baseline
   without changing either font size. */

/* `.schema-card p { margin: 0 }` deleted — the global `*` reset already does
   it. The 4px sibling rhythm below is the real thing, and it is the one card
   rule with clean grammar: `p + p { margin-top: 4px }` is exactly blockGap on
   the parent group. TODO(Batch 2): set "blockGap":"4px" on the card's inner
   vstack in patterns.php and delete this rule. Not done yet because the card
   builders share one group with the heading and the divider rows, so the gap
   would also land between those — needs the builders split first. */
/* p + p 4px DELETED — both card builders now wrap each section's lines in a
   Group with blockGap:"4px", whose flow layout emits
   `> * + * { margin-block-start: 4px }`: the same rule, GUI-editable in
   Dimensions > Block spacing. VERIFY VISUALLY on a freshly inserted pattern
   before considering this closed. */

/* .feature-head / .feature-text DELETED — align-items:center is
   verticalAlignment, the wrap + 24px row-gap are flexWrap + blockGap, and
   every margin is a spacing.margin attribute. */
/* container-type DELETED — nothing queries this container any more.
   .feature-main override DELETED, and this was a live bug: `flex-wrap:nowrap`
   at 0,2,1 specificity beat core's own @media(max-width:781px) stacking rule
   at ALL widths, so between 600px and 782px the columns stayed side by side
   instead of stacking. feature-main is a real core/columns block; it now gets
   core behaviour (isStackedOnMobile at 782px) for free. The `gap` this rule
   supplied is now a blockGap ATTRIBUTE on the columns block — it had to move,
   because theme.json sets root blockGap:0 and core columns inherit it. */
/* orange column: background / text colour / padding are attributes on the
   core/column block ITSELF now. The old .feature-col__inner wrapper group
   was created on the false premise that core/column has no background
   support — it does (block.json: color.__experimentalDefaultControls
   background+text, plus spacing.padding). Wrapper and its height:100% glue
   are both gone; only the stretch and the empty-paragraph shim remain. */
/* align-self:stretch DELETED — the column only needed it because the markup
   set verticalAlignment:"top" (is-vertically-aligned-top => align-self:
   flex-start). That attribute is removed; columns stretch by default.
   p:empty STAYS, but it is a smell: the orange column uses empty paragraphs
   as spacers. Replacing them with blockGap/margin on grouped lines removes
   both the shim and the empty blocks an editor can accidentally delete. */
/* .feature-col--orange DELETED — the empty <p> spacers it propped up are
   gone; the orange column's lines are grouped runs with blockGap + margin. */

/* .feature-cards-col DELETED — align-self:flex-start is verticalAlignment
   "top" on the column (was "center"); padding/margin were restating the
   global reset. */
/* .feature-cards tracks DELETED — minimumColumnWidth attribute. */

/* ── triple-contact responsive ladder (container-query on the section, so
      it reacts to the section's own width — the point the cards grid can no
      longer hold two 300px columns) ──
   The columns carry an INLINE flex-basis (33.33% / 66.66%) from the block
   markup, so these overrides need !important to win.
   collapse: orange 50 / cards 50, cards drop to one column.
   narrow: stack — orange on top, cards below, left padding = orange's inner
   inset so card content lines up under it. */
/* BOTH @container blocks DELETED. The 600px one is now core's
   isStackedOnMobile at 782px. ACCEPTED VISUAL DELTA: the intermediate
   930px step (33/66 -> 50/50 before stacking) has no block grammar and is
   gone — the columns hold 33/66 down to 782px and then stack. The cards
   grid still drops to one column on its own via the percentage floor. */



/* gaps DELETED: the dc-grid group already carries blockGap {top:16px,left:16px}
   as an attribute — this rule was duplicating it. Only the track definition
   stays (core grid Auto mode uses auto-FILL and would shrink a 2-child grid). */
/* .dc-grid tracks DELETED — minimumColumnWidth attribute, as above.
   The `min-width:0` insurance below is the only part with no grammar, and it
   is hooked on CORE's .is-layout-grid class, so it needs no custom class and
   covers every grid group in the family at once. `max-width:none` was
   undoing a cap that no longer exists. */
/* hooked on core's .is-layout-grid, no theme class needed */
.wp-block-group.is-layout-grid > * { min-width: 0; }
/* .dc-col { width:100% } DELETED — $vstack now uses flow layout, whose
   children are full width by default. The rule only existed to undo core's
   align-items:flex-start on vertical flex. */
/* .dc-content DELETED. padding is an ATTRIBUTE now, written as
   `min(108px, 8vw)` — a custom value typed into the Dimensions panel. That
   tapers the inset smoothly instead of switching it off at a breakpoint, so
   the container query is not needed. width:100% was already free from flow
   layout. */
/* dc-h2 / dc-caps / dc-lorem type + margins are block ATTRIBUTES in the
   pattern now (typography.fontSize/letterSpacing/textTransform +
   spacing.margin) — no rules left here. */
/* .schema-card { width:100% } DELETED — same reason. */
/* .dc-btns DELETED — justifyContent:"right" was already an attribute,
   margin-top is one now, and align-self:flex-end was dead: the buttons sit
   in a flow-layout stack whose children are full width, so align-self has
   nothing to do. */

/* triple-one/-two/-three headings: color + margins are heading attributes
   in the patterns now; only paragraph/ul rhythm (repeated elements) and
   layout glue remain here. */
/* .t1-row / .t1-block DELETED. gap -> blockGap; flex:1 1 300px + wrap -> grid
   minimumColumnWidth "max(300px, 30%)"; align-items:stretch is the grid
   default; flex-direction:column + the buttons' margin-top:auto -> vertical
   flex + verticalAlignment "space-between" on the button cell; p margin ->
   blockGap 4px. max-width:364px DROPPED, same call as the 724px cap. */
/* list indent, class-free — the global * reset strips it */
.wp-block-list { margin: 0; padding-left: 1.2em; }

/* .t2-row / .t2-col DELETED — blockGap {top:48px,left:96px} + the same grid
   floor; min-width:0 from the global .is-layout-grid rule; text-align is
   already an attribute; 305px cap dropped. */

/* same model as feature-main: columns flex 33/66, colB holds an hstack of 2.
   The two per-column flex rules that used to live here were REDUNDANT: the
   markup already sets core/column's own width attribute (33.33% / 66.66%),
   which core serialises as inline flex-basis, and core's own
   .wp-block-column[style*="flex-basis"] rule zeroes flex-grow. */
/* .t3-main DELETED — identical collision to feature-main: flex-wrap:nowrap
   at 0,2,1 beat core's own @media stacking rule at every width. */

/* .t3-hstack / .t3-col DELETED — minimumColumnWidth "max(300px, 40%)",
   blockGap 4px, the global .is-layout-grid min-width rule, and the
   .wp-block-list indent above. The 340px cap is dropped. */

/* .double-image title margin -> heading ATTRIBUTE. container-type DELETED —
   nothing queries it any more. */
/* gaps DELETED: di-grid already carries blockGap {top:50px,left:15px}. */
/* .di-grid tracks + `> * min-width` DELETED — minimumColumnWidth attribute
   and the shared .is-layout-grid hook above. */
/* di-content keeps its 108px right inset only while there are two columns;
   when the grid can't hold two 300px columns it drops to one — at that same
   point drop the inset so the single-column text isn't squeezed. */
/* .di-content DELETED — margin-top, textAlign and the tapered
   `min(108px, 8vw)` right padding are all attributes now, same as
   .dc-content. */
/* .di-h2 / .di-content p margin:0 DELETED — the paragraphs and heading
   already set margin 0 as block attributes, and the global * reset covers
   the rest. Both rules were saying the same thing a third time. */
/* mt-more skin DELETED — "Check for more" is a Paragraph block now, exactly
   like di-more before it: textTransform, textDecoration, letterSpacing and
   margin are all block attributes, and the class is gone from the family.
   Nothing in this theme styles a bare inline <a> any more. */

/* ── accordions ── */
.expand-panel .wp-block-accordion { display: block; }
/* .wp-block-accordion-item margin:0 DELETED — it was 0-2-0 and beat the
   blockGap rule core emits at :root :where(.wp-container-core-accordion-*)
   > * + * (0-1-0), so the 18px attribute on wp:accordion silently did
   nothing. The global `*` reset still zeroes the item at 0-0-0, which the
   layout rule outranks, so spacing now comes from the attribute alone. */
.expand-panel .wp-block-accordion-heading { margin: 0; }
/* padding-bottom holds the heading text 18px off its own border-bottom —
   the gap the deleted Separator used to supply with its margin-top. It lives
   here rather than as a padding attribute because core/accordion-heading
   declares spacing with __experimentalSkipSerialization + a selector of
   .wp-block-accordion-heading__toggle, so the attribute would not land inline
   on the element this rule already owns. */
.expand-panel .wp-block-accordion-heading__toggle {
    width: 100%; background: none; border: 0; padding: 0 0 18px; cursor: pointer;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
}
/* font-size / line-height moved to styles.blocks.core/accordion-heading.
   TEST THIS: that node targets the accordion-heading BLOCK, this selector
   targets an inner <span>. If the FAQ / Events year labels come out wrong, put
   'font-size: 18px; line-height: 1.5;' back on this rule and delete the
   theme.json node. white-space / text-align have no grammar either way. */
.expand-panel .wp-block-accordion-heading__toggle-title {
    white-space: pre-line; text-align: left;
}
/* ── +/- icon ─────────────────────────────────────────────────────────────
   Core 7.0.2 save() puts a literal "+" text node in this span (verified in
   block-library.min.js) and core's own style.css gives the span only
   width/height/flex. So the glyph is hidden with font-size:0 and redrawn as
   two bars, WITHOUT touching markup — which is why this is retroactive to
   every accordion already on the site.

   CHOREOGRAPHY: both bars turn counter-clockwise at once, h through -180
   and v through -90, over the same duration. The gap between them closes evenly — 90deg apart
   at the start (a plus), 0 at the end (a minus) — so the whole mark spins
   as it shuts, like scissors closing. Reverses exactly on close.

   EASING IS FREE HERE. The earlier two-phase version (h swings to meet a
   stationary v, then both travel on) needed linear timing: an eased curve
   put h on its decelerating tail exactly as v started a fresh ease-in from
   rest, so the pair met, separated, and re-converged. That was the wobble.
   Because these two now start and end together, any shared curve keeps them
   locked, so this uses the same cubic-bezier as the panel and the row fade.
   No transition-delay anywhere — the sync is structural, not scheduled.

   The SPAN stays pinned at transform:none — core rotates it 45deg to make an
   x, and since the bars are its children that rotation would drag both of
   them diagonal. All motion belongs to the two pseudo-elements. ── */
.expand-panel .wp-block-accordion-heading__toggle-icon {
    flex: 0 0 auto;
    display: block;
    position: relative;
    width: 14px;
    height: 14px;
    font-size: 0;
    color: inherit;
    transform: none !important;
}
.expand-panel .wp-block-accordion-heading__toggle-icon::before,
.expand-panel .wp-block-accordion-heading__toggle-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    margin-top: -1px;
    background: currentColor;
    transform-origin: 50% 50%;
}
/* h — half a turn */
.expand-panel .wp-block-accordion-heading__toggle-icon::before {
    transform: rotate(0deg);
    transition: transform .8s cubic-bezier(.65, 0, .35, 1);
}
/* v — a quarter turn, same clock, so the gap closes evenly.
   Rest angle is -90 rather than 90: visually identical (both vertical), but
   it puts v on the same side of zero as h's target so the pair converges
   counter-clockwise. Flip all three signs to reverse the spin again. */
.expand-panel .wp-block-accordion-heading__toggle-icon::after {
    transform: rotate(-90deg);
    transition: transform .8s cubic-bezier(.65, 0, .35, 1);
}

/* OPEN. Three signals: [inert] is the one the panel animation already relies
   on and is present on the front end; the other two cover a build that drives
   the button instead. The editor canvas sets [inert] on nothing, so icons
   read as open there — cosmetic, and the editor shows panels expanded anyway. */
.expand-panel .wp-block-accordion-item:has(> .wp-block-accordion-panel:not([inert])) .wp-block-accordion-heading__toggle-icon::before,
.expand-panel .wp-block-accordion-item:has(> .wp-block-accordion-heading [aria-expanded="true"]) .wp-block-accordion-heading__toggle-icon::before,
.expand-panel .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon::before {
    transform: rotate(-180deg);
}
.expand-panel .wp-block-accordion-item:has(> .wp-block-accordion-panel:not([inert])) .wp-block-accordion-heading__toggle-icon::after,
.expand-panel .wp-block-accordion-item:has(> .wp-block-accordion-heading [aria-expanded="true"]) .wp-block-accordion-heading__toggle-icon::after,
.expand-panel .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon::after {
    transform: rotate(-180deg);
}
@media (prefers-reduced-motion: reduce) {
    .expand-panel .wp-block-accordion-heading__toggle-icon::before,
    .expand-panel .wp-block-accordion-heading__toggle-icon::after { transition: none; }
}

.expand-panel .wp-block-accordion-panel { padding-inline: 0; padding-top: 0; }

/* ── ACCORDION OPEN/CLOSE ANIMATION ──────────────────────────────────────
   Same recipe as .grid-item__caption further down this file, so the two
   read as one motion language: grid-template-rows 0fr->1fr for height,
   opacity and padding transitioned INDEPENDENTLY, all on
   .8s cubic-bezier(.65,0,.35,1) — ease-in-out, slow start, slow stop.

   overflow:hidden is on the PANEL as well as the child. That is the whole
   trick and it is the note at .grid-item__caption: Chromium's 0fr collapse
   is unreliable unless the container itself clips, not just the inner
   element. Height alone is why an earlier attempt here failed to hide.

   Replaces max-height entirely. max-height eased over the DECLARED range
   rather than the content, so a shared ceiling made short FAQ answers snap
   then stall; per-variant ceilings fixed that but needed a class each.
   1fr is the real height, so both variants are correct with one rule and
   the 600/1200/2400 ceilings and the @supports interpolate-size branch are
   all gone. .faq-panel / .events-panel now carry no CSS at all — they stay
   in the markup purely as scope hooks for the Tools import/export.

   PADDING: vertical padding must reach 0 at rest or the collapsed panel
   keeps 88px of dead space — max-height clipped content, a 0fr grid row
   does not clip the child's own padding. The 24px top is an inline block
   attribute, so the closed state needs !important to beat it; the open
   state simply lets the attribute apply. This is the one place inline-vs-
   stylesheet forces !important, and it is why the 64px bottom lives on the
   child here rather than on the panel. ── */
.expand-panel .wp-block-accordion-panel {
    display: grid;
    grid-template-rows: 1fr;
    overflow: hidden;
    transition: grid-template-rows .8s cubic-bezier(.65, 0, .35, 1);
}
.expand-panel .wp-block-accordion-panel[inert] {
    display: grid;
    grid-template-rows: 0fr;
}
.expand-panel .wp-block-accordion-panel > * {
    min-height: 0;
    overflow: hidden;
    padding-bottom: 64px;
    transition: padding-top    .8s cubic-bezier(.65, 0, .35, 1),
                padding-bottom .8s cubic-bezier(.65, 0, .35, 1);
}
.expand-panel .wp-block-accordion-panel[inert] > * {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* STAGGER. The fade sits on the GRANDchildren — the Events rows, or the
   FAQ paragraphs and lists — not on the inner group, so each one arrives on
   its own clock instead of the whole panel appearing at once. Same idea as
   .cap-divider's delayed scaleX in the gallery, one level deeper.
   Enumerated because CSS cannot compute an index: no --i is available
   without writing an inline style onto every row, and that would be a block
   attribute baked into post_content rather than a stylesheet change.
   Rows 11+ share the last delay, which reads as "the rest" and stops a long
   Events year taking two seconds to finish arriving.
   Delay is declared on the OPEN state only. The [inert] rule below resets it
   to 0 so closing collapses everything together — staggering the exit makes
   the panel feel like it is struggling to shut. */
.expand-panel .wp-block-accordion-panel > * > * {
    opacity: 1;
    transition: opacity .8s cubic-bezier(.65, 0, .35, 1);
    transition-delay: .12s;
}
.expand-panel .wp-block-accordion-panel > * > *:nth-child(2) { transition-delay: 0.19s; }
.expand-panel .wp-block-accordion-panel > * > *:nth-child(3) { transition-delay: 0.26s; }
.expand-panel .wp-block-accordion-panel > * > *:nth-child(4) { transition-delay: 0.33s; }
.expand-panel .wp-block-accordion-panel > * > *:nth-child(5) { transition-delay: 0.40s; }
.expand-panel .wp-block-accordion-panel > * > *:nth-child(6) { transition-delay: 0.47s; }
.expand-panel .wp-block-accordion-panel > * > *:nth-child(7) { transition-delay: 0.54s; }
.expand-panel .wp-block-accordion-panel > * > *:nth-child(8) { transition-delay: 0.61s; }
.expand-panel .wp-block-accordion-panel > * > *:nth-child(9) { transition-delay: 0.68s; }
.expand-panel .wp-block-accordion-panel > * > *:nth-child(10) { transition-delay: 0.75s; }
.expand-panel .wp-block-accordion-panel > * > *:nth-child(n+11) { transition-delay: .75s; }

.expand-panel .wp-block-accordion-panel[inert] > * > * {
    opacity: 0;
    transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
    .expand-panel .wp-block-accordion-panel,
    .expand-panel .wp-block-accordion-panel > *,
    .expand-panel .wp-block-accordion-panel > * > * {
        transition: none;
        transition-delay: 0s;
    }
}

/* .faq-btns DELETED — display:flex and justify-content:center were already
   the Buttons block's own flex layout, and the 26px is now a margin.top
   attribute on that block. */

/* ── POSTS SCROLLER ──────────────────────────────────────────────────────
   Flex direction, top alignment and the 17px gap are now post-template
   layout/blockGap ATTRIBUTES in the pattern (fixes the first-card lift at
   the source). The rules on .wp-block-post-template below are the genuine
   special case that stays: WP has NO grammar for an overflow scroller
   (overflow-x, hidden scrollbars, edge-to-edge track with the first card
   at the gutter), so this internal selector is kept knowingly. */
.posts-section { position: relative; overflow-x: hidden; }
.posts-section .posts-head {
    padding: 0 var(--wp--preset--spacing--gutter, 5vw) 80px;
    align-items: center;
}
/* type moved to styles.elements.h2 (section 32px / lh 1.5). margin:0 STAYS —
   component spacing, not type, and elements.heading's 25px is inert anyway.
   The 24px override at 768px also stays, below: WP's responsive keys are fixed
   at @mobile <=480 and @tablet <=782, so neither reproduces 768 exactly. */
.posts-section .posts-heading {
    margin: 0;
}
/* .posts-arrows DELETED — display:flex was already the block's flex layout;
   gap is blockGap:"70px" and align-items is verticalAlignment:"center",
   both attributes on the Buttons block now. */
/* TEMPORARILY DISABLED — uncomment to restore the arrow gap on pages placed
   BEFORE the patterns.php:1043 axial fix; those carry the old flat "70px" in
   their post_content and the pattern edit cannot reach them. */
/* .posts-section .posts-head .wp-block-buttons { gap: 70px; } */

/* Captions: size / line-height / colour are theme.json grammar
   (styles.elements.caption). Alignment and top margin are NOT — no
   element-level textAlign, and core sets figcaption margins at 0-1-1. */
.wp-block-image figcaption,
.wp-element-caption { text-align: left; margin-top: 24px; }

.posts-section .posts-arrow { margin: 0; }
/* arrows: CSS-mask chevrons (no grammar for icon buttons) */
.posts-section .posts-arrow .wp-block-button__link {
    display: block; width: 11px; height: 18px; min-width: 0;
    padding: 0; border: 0; border-radius: 0;
    background: transparent; font-size: 0; line-height: 0;
    cursor: pointer;
}
.posts-section .posts-arrow .wp-block-button__link::before {
    content: ""; display: block; width: 11px; height: 18px;
    background-color: #000000;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='18' viewBox='0 0 11 18'%3E%3Cpath d='M0 15.885L6.79892 9L0 2.115L2.09312 0L11 9L2.09312 18L0 15.885Z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='18' viewBox='0 0 11 18'%3E%3Cpath d='M0 15.885L6.79892 9L0 2.115L2.09312 0L11 9L2.09312 18L0 15.885Z'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: background-color .15s ease;
}
.posts-section .posts-arrow--prev .wp-block-button__link::before { transform: scaleX(-1); }
.posts-section .posts-arrow.is-disabled .wp-block-button__link { cursor: default; }
.posts-section .posts-arrow.is-disabled .wp-block-button__link::before { background-color: var(--wp--preset--color--grey-disabled, #D5D5D5); }
.posts-section .posts-head--no-title { justify-content: flex-end; }

.posts-section .posts-container { width: 100%; }
/* descendant (not direct-child ">"): the editor injects wrapper elements
   between .posts-container and the post-template, which breaks a ">" match
   and is exactly why the scroller looked narrow in the editor only. */
/* each post is the core <li class="wp-block-post"> — THIS is the card */
/* the UL is the scroll track — own its flex here, don't trust the layout attr */
.posts-section .wp-block-post-template {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 17px;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    padding-left: var(--wp--preset--spacing--gutter, 5vw);  /* start gutter — aligns first card to page gutter */
    margin: 0;
    list-style: none;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.posts-section .wp-block-post-template::-webkit-scrollbar { display: none; }

/* trailing flex spacer = the END gutter a scroll container otherwise eats */
.posts-section .wp-block-post-template::after {
    content: "";
    flex: 0 0 calc(var(--wp--preset--spacing--gutter, 5vw) - 17px);
}

/* each post is the core <li class="wp-block-post"> — give IT the width */
.posts-section .wp-block-post-template > li {
    flex: 0 0 415px;
    width: 415px;
    background: transparent;
    padding: 0;
    margin: 0;
    transition: transform .3s ease;
    cursor: pointer;
}
.posts-section .wp-block-post-template > li:hover .post-image img { transform: scale(1.06); }

.posts-section .post-image { width: 415px; height: 390px; background: var(--wp--preset--color--grey-placeholder, #e0e0e0); overflow: hidden; margin: 0; }
.posts-section .post-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.posts-section a,
.posts-section a:visited,
.posts-section a:active {
    color: #000000; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.posts-section a:focus:not(:focus-visible) { outline: none; }
/* type moved to styles.blocks.core/post-title. What is left has no theme.json
   grammar (max-width, line clamping) or is component spacing. color:#000 was
   already the root text colour, so it went with the type. */
/* TWO LINES, not one. white-space:nowrap + text-overflow:ellipsis can only
   ever produce a single line — the ellipsis is a one-line mechanism. A line
   clamp is the multi-line equivalent: it wraps, then cuts at line 2 with the
   same ellipsis. Same technique the excerpt below already uses at 5 lines.
   The height is FIXED at 2 lines (2 x 1.5 line-height = 3em) rather than
   left to the content, so a one-line title and a two-line title occupy the
   same box and the excerpts below them stay aligned across the scroller.
   -webkit- prefixes are not legacy here: line-clamp only shipped unprefixed
   recently, and the prefixed pair is what every current browser reads. */
.posts-section h3.post-title {
    margin: 50px 0 0;
    max-width: 100%;
    height: 3em;
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* The <a> must NOT be display:block with its own overflow — that made it a
   second clipping box inside the clamp and the ellipsis would never appear.
   It inherits the clamp from the heading instead. */
.posts-section .wp-block-post-template > li h3.post-title a { display: inline; }
.posts-section .post-excerpt { margin: 0; max-width: 100%; }
.posts-section .post-excerpt .wp-block-post-excerpt__excerpt {
    margin: 50px 0 0; line-height: 1.5;
    height: 7.5em;
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
    overflow: hidden;
}
.posts-section .post-excerpt .wp-block-post-excerpt__more-text { margin: 50px 0 0; }
.posts-section .post-excerpt .wp-block-post-excerpt__more-link {
    text-transform: uppercase; text-decoration: underline;
    color: #000000; font-weight: 400;
}

/* ── HERO HEADER ─────────────────────────────────────────────────────────
   min-height, gutter padding and bottom-left content position are block
   attributes now. What stays is the absolute SVG square/cross overlay —
   a real special case with no block grammar. */
.hero-header.wp-block-cover {
    background-color: lightgrey; /* pre-image fallback */
    overflow: hidden;
}
.hero-header.has-shadow-overlay::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 300px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    pointer-events: none;
    z-index: 1;
}
/* JUSTIFIED internal: core sets the inner container position:relative
   (gutenberg cover/style.scss), which would make the absolutely-placed
   SVG overlay anchor to the inner box instead of the cover. One property,
   one reason. */
.hero-header .wp-block-cover__inner-container { position: static; }

.hero-header h1.wp-block-heading {
    /* font/size/color/case are heading attributes now (fontSize:hero,
       fontFamily:header, textColor:white); only stacking glue remains */
    margin: 0;
    position: relative;
    z-index: 3;
}
.hero-header .square-container {
    position: absolute;
    top: 0;
    right: 0;
    width: 435px;
    max-width: none;
    margin: 0;
    pointer-events: none;
    z-index: 1;
}
.hero-header .cross-container {
    position: absolute;
    width: 625px;
    max-width: none;
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.hero-header .square-container figure { margin: 0; }
.hero-header .square-image,
.hero-header .square-image img,
.hero-header .cross-image,
.hero-header .cross-image img {
    width: 100%;
    height: auto;
    display: block;
}
/* JUSTIFIED editor-only rule (the single one left): the front end must
   click THROUGH the overlay, but in the editor the SVG must stay
   selectable. There is no shared-context way to express that. */
.editor-styles-wrapper .hero-header .square-container { pointer-events: auto; }

/* JUSTIFIED editor-only rule (grid gallery): the front-end view script that
   normally reveals captions on hover/scroll does not run inside the editor
   iframe, so give the editor its own hover preview onto the same real
   caption markup/classes grid-gallery.js now renders (Pass 3). */
.editor-styles-wrapper .grid-item:hover .grid-item__caption      { grid-template-rows:1fr; }
.editor-styles-wrapper .grid-item:hover .grid-item__caption-inner { opacity:1; }
.editor-styles-wrapper .grid-item:hover .cap-divider              { transform:scaleX(1); }

.hero-header .hero-tagline {
    /* color/size/letter-spacing/case are attributes now; absolute placement
       stays — no grammar for it */
    position: absolute;
    bottom: var(--wp--preset--spacing--gutter, 5vw);
    right: 0;
    width: 435px;
    text-align: left;
    margin: 0;
    z-index: 3;
}

/* ── HERO SPLIT ──────────────────────────────────────────────────────────
   Column widths stay in CSS deliberately: WP's column width attribute
   serializes as an inline flex-basis, which would beat the ≤870px
   stacking media query without !important. CSS flex sizing keeps the
   responsive override clean. */
.hero-split.wp-block-columns {
    display: flex;
    gap: 0;
    flex-wrap: nowrap;
    /* no margin reset here — WP's root-padding breakout sets the negative
       margins that let this alignfull bleed to the screen edge. */
}
.hero-split .wp-block-column {
    margin: 0;
    /* JUSTIFIED: WP injects default column padding via a render-time layout
       rule; only !important keeps the hero-split covers edge-to-edge so the
       SVG and orange panel sit flush to the column edge (matches original) */
    padding: 0 !important;
}
.hero-split .hs-left { flex: 1 1 auto; padding: 0 !important; }
.hero-split .hs-right { flex: 0 0 577px; max-width: 577px; padding: 0 !important; }

.hero-split .hs-left .wp-block-cover { height: 100%; min-height: 750px; }
/* core makes .wp-block-cover__image-background absolute inset:0; this guarantees
   the left cover stretches so the image has height to fill (full-height clip) */
.hero-split .hs-left .wp-block-cover__image-background { height: 100%; }
/* hs-right orange cover: restore the ORIGINAL reset. Core's cover block ships its
   own inner padding; without padding:0 that padding pushes the inner container
   (and the absolutely/floated SVG) inward from the column edge. align-items:
   flex-start + padding:0 is what made the SVG sit flush top-right in the very
   first version. This is the special-case bucket: no theme.json grammar for
   "kill the cover's built-in padding on one specific cover". */
.hero-split .hs-right .wp-block-cover {
    min-height: 750px;
    height: 100%;
    align-items: flex-start;
    padding: 0;
    background-color: #e8631a;
}
/* JUSTIFIED internal: the orange panel's content must fill the cover's
   full height so the button can sit at the bottom (margin-top:auto). No
   attribute exists for "inner container height 100%". */
.hero-split .hs-right .wp-block-cover__inner-container { width: 100%; max-width: none; height: 100%; }
.hero-split .hs-right .wp-block-cover__inner-container > .wp-block-group {
    height: 100%;
    gap: 0;
    display: flex;
    flex-direction: column;
}
.hero-split .hs-svg {
    position: relative;
    width: 100%;
    line-height: 0;
}
.hero-split .hs-svg .square-container {
    position: relative;
    width: 247px;
    max-width: 100%;
    margin: 0;
    float: right;
}
.hero-split .hs-svg .cross-container {
    position: absolute;
    width: 355px;
    max-width: none;
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.hero-split .hs-svg figure { margin: 0; }
.hero-split .hs-svg .square-image,
.hero-split .hs-svg .square-image img,
.hero-split .hs-svg .cross-image,
.hero-split .hs-svg .cross-image img {
    width: 100%;
    height: auto;
    display: block;
}
.hero-split .hs-svg::after { content: ''; display: table; clear: both; }
/* hs-body gutter padding moved to a group attribute; flex glue stays */
.hero-split .hs-right .hs-body {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.hero-split .hs-right .hs-body > .wp-block-buttons { margin-top: auto; }

/* ── COVER TEXT RIGHT — min-height/padding/position are attributes.
   .ctr-content DELETED. The old note was right that INSTANCE CSS would tie
   with the cover's constrained child rule — but the inner group's own
   layout:{type:"constrained","contentSize":"432px"} is a different
   mechanism: it caps the group's CHILDREN from its own .wp-container-N
   selector, so there is no tie to lose. Client edits it as the layout
   panel's "Content width" field. ── */





/* ── MEDIA & TEXT ────────────────────────────────────────────────────────
   Bottom alignment is native (core ships
   .is-vertically-aligned-bottom > .wp-block-media-text__content
   { align-self: end } — verified in media-text/style.scss), so the old
   justify-content override is gone. The TWO internal rules kept are
   justified: core hard-codes the content column's padding (0 8%) and
   media-text has no per-column padding attribute; and there is no
   attribute for a fixed-height media column. */
/* LAYOUT RULES REMOVED — the media-text family is Columns + Cover now, and
   every rule that used to live here is a block attribute: Cover minHeight
   (height + crop), Group padding / contentSize 440 / blockGap 24 (the text
   cell), Column verticalAlignment (bottom, and space-between for the pinned
   button). What is left below is TYPE ONLY: the link reset, the a.mt-more
   skin and strong letter-spacing, none of which theme.json can express.
   Deleted with the swap: .media-text-lore position/min-height, the __media
   height pair, the __media img fill, the __content flex + padding + 440 cap,
   .mt-btn, the padding-inline re-inset undo, and the 600px collapse. */


/* ── Social icons (mt-social) — brand SVGs via CSS, editor + front parity ──
   Core ships fixed inline SVGs per service with no attribute/theme.json hook
   to swap them, so re-skinning on the stable .wp-social-link-{service} core
   classes is the correct "no grammar" case. CSS-only (no PHP render filter):
   the editor canvas renders the block's JS edit() component, not the PHP
   render callback, so a server-side filter would be front-end-only. The theme
   stylesheet loads in both the editor iframe and the front. Icons are filled
   shapes (no stroke), so they hold at 26px with no thinning at scale. */
   
   
   .mt-social.wp-block-social-links:empty { display: none; }
   
.mt-social.wp-block-social-links {
    display: flex;
    flex-wrap: nowrap;
    gap: 24px;
}
.mt-social .wp-block-social-link {
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    transition: transform .3s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.mt-social .wp-block-social-link:hover { transform: scale(1.15); }
.mt-social .wp-block-social-link-anchor {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 30px;
    height: 30px;
}
.mt-social .wp-block-social-link-anchor svg { display: none; }
.mt-social .wp-block-social-link-anchor::before {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


.mt-social .wp-block-social-link-anchor::before { background-image: url('assets/linkW.svg'); }
.mt-social .wp-social-link-facebook  .wp-block-social-link-anchor::before { background-image: url('assets/facebookW.svg'); }
.mt-social .wp-social-link-instagram .wp-block-social-link-anchor::before { background-image: url('assets/instagramW.svg'); }
.mt-social .wp-social-link-youtube   .wp-block-social-link-anchor::before { background-image: url('assets/youtubeW.svg'); }
.mt-social .wp-social-link-mail      .wp-block-social-link-anchor::before { background-image: url('assets/emailW.svg'); }



/* ── SQUARE 2x2 GRID — image fill/crop is native (aspect-ratio + scale
      attrs). The grid-text overflow + 440px child cap moved to WP 7.0
      per-instance custom CSS on the two grid-text groups. Only the img
      stretch glue stays (no grammar for "fill the grid cell"). ── */
.mt-square .grid-img img {
    width: 100%;
    height: 100%;
}

/* ── NEWSLETTER COVER — min-height/padding/overlay are attributes; the
      730px content width is the cover's own constrained contentSize ── */
.newsletter-cover.wp-block-cover { text-align: center; overflow: hidden; }
/* newsletter H1: Figma wants 2% letter-spacing (hero/cover header-font is 4%);
   .newsletter-cover h1 (0,1,1) beats .has-header-font-family (0,1,0) */
/* letter-spacing MOVED to the heading block as an attribute — an inline
   style beats .has-header-font-family without needing the class to win on
   specificity, which is all this rule was ever doing. */
.newsletter-cover h1.wp-block-heading {
    /* font/size/color/case/margin are attributes now; long-word breaking
       has no block grammar, so these two lines stay */
    word-wrap: break-word;
    overflow-wrap: break-word;
}
/* Easy Forms for Mailchimp — REMAINING FIGHT #3: third-party plugin CSS,
   own load order and specificity; !important is the only reliable tool.
   (WP 7.0 audit: instance CSS renders at :root :where() specificity and
   can NEVER beat plugin selectors — this bucket is structurally stuck.) */
/* WIDTH ON NARROW SCREENS: max-width 730 caps the form on desktop, but
   nothing constrained it against the viewport, so at ~360px the flex row
   (420 label + 180 button + 10 gap) overflowed the cover's 5vw padding and
   the white borders ran to the screen edge. The cover pads by 5vw = 18px at
   that width, which is why it looked like the gutter was ignored: it was
   there, the form was simply wider than the box. */
.newsletter-cover .yikes-easy-mc-form {
    max-width: min(730px, 100%);
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    width: auto;
    max-width: 730px;
    margin: 0 auto;
}
.newsletter-cover .yikes-easy-mc-form .EMAIL-label,
.newsletter-cover .yikes-easy-mc-form label {
    flex: 1 1 auto;
    max-width: 420px;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.newsletter-cover .yikes-easy-mc-form label > span:not(.yikes-mailchimp-submit-button-span-text) {
    display: none;
}
.newsletter-cover .yikes-easy-mc-form input.yikes-easy-mc-email,
.newsletter-cover .yikes-easy-mc-form input[type="email"],
.newsletter-cover .yikes-easy-mc-form input[type="text"] {
    border: 1px solid #ffffff !important;
    background-color: transparent !important;
    padding: 10px 30px !important;
    width: 100% !important;
    height: 45px !important;
    color: #ffffff;
    box-sizing: border-box;
    font-size: 16px;
    margin: 0 !important;
    display: block;
    /* Safari draws its OWN rounded, inset-shadowed control unless the native
       appearance is switched off — Chrome and Firefox do not, which is why
       this only ever showed up on Safari and iOS. radius must be restated
       after appearance:none, and !important because the plugin sets it. */
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0 !important;
    font-family: inherit;
    font-weight: 400;
}
.newsletter-cover .yikes-easy-mc-form input::placeholder {
    color: #ffffff;
    font-size: 16px;
}
.newsletter-cover .yikes-easy-mc-form .yikes-easy-mc-submit-button {
    /* Sizes to its own text instead of a fixed 180px: any label fits, and
       nothing wraps. The padding below sets the breathing room, so a longer
       word simply makes the button wider. */
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0;
    max-width: none;
    white-space: nowrap;
    background-color: #ffffff !important;
    border: 1px solid #ffffff !important;
    color: #000000 !important;
    padding: 10px 20px !important;
    cursor: pointer;
    height: 45px !important;
    font-size: 18px;
    text-transform: uppercase;
    border-radius: 0 !important;
    box-sizing: border-box;
    margin: 0 !important;
    line-height: 1;
    /* Safari renders a native rounded button unless appearance is off. */
    -webkit-appearance: none;
    appearance: none;
    /* Form controls do NOT inherit the page font: browsers give input and
       button their own system face and weight, which is why this button
       looked bolder and different from every other button on the site.
       theme.json elements.button cannot reach it — this is plugin markup,
       not a core Button block. */
    font-family: inherit;
    font-weight: 400;
    /* 0.2em to match every other button on the site. Same reason as the font
       above: this is a plugin <button>, so theme.json elements.button never
       reaches it and each property has to be restated by hand. */
    letter-spacing: 0.2em;
}
.newsletter-cover .yikes-easy-mc-form .yikes-easy-mc-submit-button span { color: inherit; }
.newsletter-cover .yikes-mailchimp-container .yikes-easy-mc-success-message,
.newsletter-cover .yikes-mailchimp-container .yikes-easy-mc-error-messages,
.newsletter-cover .yikes-easy-mc-form .form-description {
    color: #ffffff;
    text-align: center;
    margin: 10px 0 0;
}
.newsletter-cover .edit-link,
.newsletter-cover .post-edit-link { display: none; }

/* ── VIDEO COVER — min-height/padding are attributes; the click-to-play
      z-flip is JS+CSS with no block grammar, internals justified.
      caption type moved to paragraph attributes; the play button's
      20px/700 was folded into the skin rule below (the rule survives for
      border/transparent anyway — no reason to split it). ── */
.video-cover.wp-block-cover { overflow: hidden; position: relative; }
.video-cover .wp-block-cover__inner-container { z-index: 2; }
.video-cover .vc-play { justify-content: center; }
.video-cover .vc-play .wp-block-button__link {
    min-width: 240px; height: 44px; padding: 0 24px;
    background: transparent; color: #ffffff;
    border: 2px solid #ffffff; border-radius: 0;
    display: inline-flex; align-items: center; justify-content: center;
    text-transform: uppercase; font-size: 20px; font-weight: 700; box-sizing: border-box;
    cursor: pointer;
}
/* .vc-stack DELETED — the rule was a no-op restating the block: the group
   already carries layout flex/vertical/justifyContent:center and core
   emits align-items:center for exactly that, while width:100% is the
   default for a block-level div in a constrained parent. */
.video-cover .vc-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
    margin: 0;
    z-index: 0;
    display: none;
}
.video-cover.is-playing .vc-video {
    display: block;
    z-index: 5;
}
.video-cover.is-playing .wp-block-cover__inner-container {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* ══ TYPE OVERRIDES — residue only ═════════════════════════════════════════
   Most of the reviewed-map tweaks moved to block ATTRIBUTES in patterns.php
   (typography.fontSize / letterSpacing / textTransform / spacing.margin, or
   the fontSize:"lead" preset). What remains has NO block grammar:
   - inline <a> skins (di-more/mt-more, post-excerpt more-link) — anchors
     inside rich text aren't blocks;
   - accordion toggle titles — spans inside hand-built accordion-heading
     markup; adding typography attrs risks block validation on core's
     accordion internals;
   - classic PHP markup (header nav, footer). */

/* "check more" links → caps/underline skin above; 20% letter-spacing here */
.posts-section .post-excerpt .wp-block-post-excerpt__more-link { letter-spacing: 0.2em; }


/* FAQ titles (no caps, 0.04em tracking) are typography ATTRIBUTES on
   core/accordion-heading now — see $build_expand in patterns.php.
   The 64px under each expanded panel is a spacing.padding attribute on the
   panel's inner group. Padding, not margin: margin sits outside the box the
   1fr track animates, so it snapped in on frame 0 while the panel was still
   growing, which is what made the reveal feel broken. */
/* no grammar for white-space; one scoped rule replaces the four deleted ones */
.expand-panel .wp-block-accordion-panel p { white-space: pre-line; }

/* header nav links → 16px (footer base stays 14px) */
.category-menu li a { font-size: 16px; }
/* header + footer: all text uppercase (nav / menu / policy / note / base).
   One rule per region rather than per component — the nav links, the CTA
   button and anything a client adds later all inherit it. Set here in the
   type-overrides section, not on the `header, footer` rule near the top,
   so all three shared type decisions stay in one place. */
header { text-transform: uppercase; }
footer { text-transform: uppercase; }

/* ════════════════════════════════════════════════════════════════════════ */

/* ── responsive ──────────────────────────────────────────────────────────
   No !important needed against WP's render-time layout styles: those are
   emitted as single-class .wp-container-* rules (specificity 0,1,0); the
   two-class selectors below (0,2,0) win outright.
   NOTE (WP 7.0 audit): per-instance custom CSS supports NO media/container
   queries in 7.0 (responsive instance styles are slated for 7.1) — nothing
   in this section is migratable yet. */
@media (max-width: 1000px) {
    .hero-header .hero-tagline {
        top: 50%;
        bottom: auto;
        text-align: right;
        right: 1%;
        width: auto;
    }
    .hero-header .square-container { mix-blend-mode: soft-light; }
    .hero-split.wp-block-columns { flex-wrap: wrap; }
    .hero-split .hs-left,
    .hero-split .hs-right {
        flex: 1 1 100%;
        max-width: 100%;
    }
}
/* The @media (max-width: 781px) block that lived here is GONE — it held only
   the triple family's flex-wrap and !important stacking rules. The grid rows
   self-stack via their percentage floor, and t3's Columns stacks through
   core's own isStackedOnMobile now that nothing forces flex-wrap:nowrap. */
@media (max-width: 768px) {
    .posts-section .wp-block-post-template > li { flex: 0 0 300px; width: 300px; }
    .posts-section .post-image { width: 300px; height: 282px; }
    /* .wp-block-post-template > li h3.post-title{font-size:20px} DELETED — it
   restated the same 20px the rule above already set, and both are now the
   'label' preset on styles.blocks.core/post-title. */
    /* works now: the pattern's posts-heading no longer carries an inline
       font-size:32px (inline style used to beat this media query — the
       24px mobile size was dead code) */
    .posts-section .posts-heading { font-size: 24px; }
    .video-cover .wp-block-cover__inner-container { width: 100%; }
}
@media (max-width: 600px) {
    /* media & text: nothing to collapse any more. The Covers are sized in
       vh (90 / 74), so a phone gets 90% of ITS viewport instead of a fixed
       900px, and the old .mt-media override is gone with the class. */


        .mt-square.mt-square { grid-template-columns: 1fr; }

    .newsletter-cover .yikes-easy-mc-form { flex-wrap: wrap; }
    .newsletter-cover .yikes-easy-mc-form .EMAIL-label,
    .newsletter-cover .yikes-easy-mc-form label { max-width: 100%; flex-basis: 100%; }
}


/* ══════════════════════════════════════════════════════════════════════════
   GRID GALLERY v7 — replaces everything from the "GRID GALLERY v6" comment
   to the END of the file (grid + captions + lightbox).

   Layout is computed by grid-gallery-frontend.js (column count, --cell-h =
   real column width so single + wide cells match height, no-gap 1×/2× packing,
   and a per-item row index). Captions are CLASS-DRIVEN, not :hover:
     .gg-row-active  → opens the caption HEIGHT for every cell in the hovered
                       row, so moving across a row never collapses/re-grows it
     .gg-hovered     → shows the TEXT (opacity) for the one cell under the pointer
     .is-revealed    → SCROLL-CAPTION MODE ONLY (data-scroll-captions="true").
                       Touch tap-reveal now shares gg-row-active/gg-hovered with
                       desktop hover (v7.4 item 6) instead of using this class.
   The collapse animation therefore only plays on a ROW change or on leaving
   the grid — never cell-to-cell within a row.

   v7 changes:
     item 1 — `.grid-item__caption` gets `overflow:hidden` and
              `.grid-item__caption-inner` gets `min-height:0` + padding-block
              swapped from a static value to 0-at-rest/animated-on-active.
              Chromium was reserving space for the caption's own vertical
              padding even when the row track was collapsed to 0fr; zeroing
              the padding at rest (and animating it back in alongside the
              existing height/opacity transitions) removes that reserved gap
              regardless of how the grid resolves the 0fr track.
     item 7 — .hide-controls on the lightbox root (showLightboxControls off)
              hides the prev/next/close buttons. Closing still works via
              tap-outside / swipe / Escape.
     item 8 — .gg-always-captions on the gallery root (alwaysShowCaptions on)
              forces every caption open permanently, no interaction needed.
   ══════════════════════════════════════════════════════════════════════════ */

.grid-gallery__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(var(--gg-cell,320px),100%),1fr)); /* pre-JS fallback */
  gap:var(--gg-gap,17px);
  align-items:start;
  --cell-h:320px;                    /* JS overwrites with the real column width */
}
/* full-bleed gutter parity: when the block is set Full width it breaks past the
   root padding, so restore the same side gutter the rest of the page uses.
   Scoped to .alignfull so a normal-width gallery (already inset by root padding)
   isn't double-padded. */
/* side gutter ONLY when Full width (that's the only time the block breaks
   past the page's root padding and needs it restored) */
.grid-gallery.alignfull .grid-gallery__grid{
  padding-inline:var(--wp--preset--spacing--gutter,5vw);
}
/* top/bottom gutter at ANY width — this is the vertical breathing room */
.grid-gallery .grid-gallery__grid{
  padding-block:var(--wp--preset--spacing--gutter,5vw);
}

.grid-gallery .grid-item{ margin:0; position:relative; }

/* fixed, uniform image box — height from --cell-h, not the grid row, so the
   caption can open without ever resizing the image. */
.grid-gallery .grid-item__link{
  display:block; width:100%; height:var(--cell-h);
  padding:0; border:0; background:none; cursor:zoom-in;
}
.grid-gallery .grid-item img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ── caption: height + opacity independent so JS holds the row open while
   only the text crossfades. Ease-in-out = slow start, slow stop, floaty.
   `overflow:hidden` here (item 1) is required alongside the 0fr row track —
   Chromium's 0fr grid-template-rows collapse is unreliable unless the
   container itself also clips, not just the inner element below. ── */
.grid-gallery .grid-item__caption{
  display:grid;
  grid-template-rows:0fr;
  overflow:hidden;
  transition:grid-template-rows .8s cubic-bezier(.65,0,.35,1);
}

/* item 1: vertical padding is 0 AT REST and only appears once the row is
   actually active/revealed (see the two rules below) — this is what stops
   Chromium reserving space for the padding while the row is collapsed,
   independent of how the 0fr track itself resolves. */

.grid-gallery .grid-item__caption-inner{
  overflow:hidden;
  opacity:0;
  min-height:0;
  padding-top:0;
  padding-bottom:0;
  padding-inline:4px;
  transition:opacity .8s cubic-bezier(.65,0,.35,1),
             padding-top .8s cubic-bezier(.65,0,.35,1),
             padding-bottom .8s cubic-bezier(.65,0,.35,1);
}
.grid-gallery .grid-item.gg-row-active .grid-item__caption-inner,
.grid-gallery .grid-item.is-revealed .grid-item__caption-inner{
  padding-top:var(--wp--preset--spacing--gutter,5vw);
  padding-bottom:var(--wp--preset--spacing--gutter,5vw);
}

/* desktop, JS-driven: row opens the height, only the hovered cell shows text.
   Touch now drives the SAME classes (v7.4 item 6) instead of is-revealed. */
.grid-gallery .grid-item.gg-row-active .grid-item__caption{ grid-template-rows:1fr; }
.grid-gallery .grid-item.gg-hovered   .grid-item__caption-inner{ opacity:1; }

/* scroll-caption mode ONLY (data-scroll-captions="true") — unrelated to touch tap */
.grid-gallery .grid-item.is-revealed .grid-item__caption{ grid-template-rows:1fr; }
.grid-gallery .grid-item.is-revealed .grid-item__caption-inner{ opacity:1; }

.grid-gallery .cap-title{
  margin:0; font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:0.2em;
}
.grid-gallery .cap-divider{
  border:0;
  border-top:1px solid #000000;
  margin:10px 0;
  width:var(--cap-divider-w, 60%);
  max-width:100%;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .8s cubic-bezier(.65,0,.35,1);
}
.grid-gallery .grid-item.gg-hovered  .cap-divider,
.grid-gallery .grid-item.is-revealed .cap-divider{ transform:scaleX(1); }
.grid-gallery .cap-desc{ margin:0; font-size:14px; line-height:1.5; }

.grid-gallery.is-laid-out .grid-gallery__grid{ transition:opacity .2s ease; }

/* item 8: alwaysShowCaptions — force every caption permanently open, no
   interaction needed. Applied by functions.php on the front-end wrapper and
   mirrored onto the editor root by grid-gallery.js for preview parity. */
.grid-gallery.gg-always-captions .grid-item__caption{ grid-template-rows:1fr; }
.grid-gallery.gg-always-captions .grid-item__caption-inner{
  opacity:1;
  padding-block:var(--wp--preset--spacing--gutter,5vw);
}
.grid-gallery.gg-always-captions .cap-divider{ transform:scaleX(1); }


/* ── Lightbox: swipe / drag / arrows / esc / tap-outside ────────────────── */
.gallery-lightbox{ position:fixed; inset:0; z-index:9999; display:none; }

.lightbox-backdrop{
  position:absolute; inset:0; z-index:0;
  background:rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  opacity:0;
  transition:opacity .7s cubic-bezier(.65,0,.35,1);
}

.gallery-lightbox.backdrop-on .lightbox-backdrop{ opacity:1; }

.gallery-lightbox.is-open{ display:block; }
body.gallery-lightbox-open{ overflow:hidden; }

.lightbox-track{
  position:absolute; inset:0; display:flex;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  cursor:grab;
}
.lightbox-track::-webkit-scrollbar{ display:none; }
.lightbox-track.is-grabbing{ cursor:grabbing; scroll-snap-type:none; }

.lightbox-slide{
  flex:0 0 100%; width:100%; height:100%;
  scroll-snap-align:center;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-image{ max-width:90vw; max-height:90vh; object-fit:contain; user-select:none; -webkit-user-drag:none; }
.gallery-lightbox.fullscreen .lightbox-image{ max-width:100vw; max-height:100vh; }

.lightbox-close,.lightbox-nav{
  position:absolute; z-index:2; background:none; border:0; color:#fff; cursor:pointer; line-height:1;
}
.lightbox-close{ top:20px; right:30px; font-size:40px; }
.lightbox-nav{ top:50%; transform:translateY(-50%); font-size:56px; padding:0 20px; opacity:.8; }
.lightbox-nav:hover{ opacity:1; }
.lightbox-prev{ left:10px; }
.lightbox-next{ right:10px; }
.lightbox-nav.is-disabled{ opacity:.25; pointer-events:none; }
@media (max-width:768px){ .lightbox-nav{ display:none; } }

/* item 7: showLightboxControls off — closing still works via tap-outside,
   swipe, or Escape; this only hides the visible buttons */
.gallery-lightbox.hide-controls .lightbox-close,
.gallery-lightbox.hide-controls .lightbox-nav{ display:none; }


/* ── FLIP un-crop morph (append to the gallery section) ─────────────────────
   The "hero" is a fixed, overflow-hidden clip box that flies between the
   thumbnail rect and the image's final rect; the <img> inside de-zooms from
   cover to fit so the crop opens out. Only size/position animate — no fade. */
.gg-hero{
  position:fixed;
  overflow:hidden;
  z-index:10000;              /* above the lightbox (9999) */
  pointer-events:none;
}
.gg-hero__img{
  position:absolute;
  max-width:none;             /* allow the img to exceed the clip box (cover) */
}

.gg-hero.is-animating,
.gg-hero.is-animating .gg-hero__img{
  transition:left   .7s cubic-bezier(.65,0,.35,1),
             top    .7s cubic-bezier(.65,0,.35,1),
             width  .7s cubic-bezier(.65,0,.35,1),
             height .7s cubic-bezier(.65,0,.35,1);
}

/* during the morph, hide the real lightbox chrome so only the hero shows */
.gallery-lightbox.is-morphing .lightbox-track,
.gallery-lightbox.is-morphing .lightbox-close,
.gallery-lightbox.is-morphing .lightbox-nav{
  opacity:0;
  pointer-events:none;
}





.post-grid-gallery {
  display: flex; flex-direction: column;
  gap: 48px;                                  /* between post chunks */
  padding-block: var(--wp--preset--spacing--gutter, 5vw);
}
.post-grid-gallery__chunk {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 17px;                                  /* between cells within a post */
}
.post-cell {
  position: relative; grid-column: span 1;
  aspect-ratio: 1 / 1;                        /* squares anchor the row height */
  overflow: hidden; display: flex; align-items: flex-end;
  text-decoration: none;
  background: var(--pgg-bg, #1a1a1a);
  background-size: cover; background-position: center;
}
/* wide/full DON'T get aspect-ratio 2:1 — with a 17px gap that would make them
   ~8px taller than the squares and misalign the row. Let them stretch to the
   row height the square sets (grid stretch), image cover-crops the difference. */
.post-cell--wide { grid-column: span 2; aspect-ratio: auto; height: 100%; }
.post-cell--full { grid-column: 1 / -1; aspect-ratio: 3 / 1; }  /* lone hero */
/* Alpha in the colour rather than the opacity property. Same result for a
   leaf element, but opacity creates a stacking context and composites
   everything the element renders, which makes it the wrong tool the moment
   anything is layered inside. */
.post-cell__dim  { position: absolute; inset: 0; z-index: 0; background: rgba(0, 0, 0, var(--pgg-dim, .5)); }

/* The dim's colour is written inline per hero cell when the tint toggle is
   on — black here is the fallback for a photo whose colour could not be
   sampled, and for every non-hero cell. */
.post-cell__title {
  position: relative; z-index: 1; margin: 0; padding: 47px;
  color:#fff; text-transform: uppercase; font-size: 32px; font-weight: 600; line-height: 1.2;
  /* transform-origin bottom left because the title is anchored to that corner
     by the cell's align-items:flex-end and its own padding — scaling from the
     centre would push the first line up and away from the edge it sits on.
     transform, not font-size: font-size reflows and can rewrap a long title
     mid-scroll; a transform is composited and touches nothing else. */
  transform-origin: left bottom;
  /* --pgg-peak is written by patterns.php: 1 across the middle of the
     viewport, ramping to 0 at the top and bottom edges. .10 is the size knob.
     The transition is short on purpose — the value arrives in 5% steps, and
     this is what smooths the gaps between them. Long enough to hide the
     stepping, short enough that the title does not trail the scroll. */
  transform: scale(calc(1 + .10 * var(--pgg-peak, 0))) translateZ(0);
  transition: transform .25s cubic-bezier(.33, 1, .68, 1);
  will-change: transform;
  backface-visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .post-cell__title { transform: none; }
}



@media (max-width: 800px) {
  /* mobile: each post collapses to its HERO cell only — teaser cells hidden */
  .post-grid-gallery__chunk { grid-template-columns: 1fr; }
  .post-cell { display: none; }                    /* hide all cells... */
  .post-cell:has(.post-cell__title) {              /* ...except the hero (it carries the title) */
    display: flex;
    grid-column: span 1;
    aspect-ratio: 1 / 1;
  }
}





/* post-grid-gallery is always full-bleed, regardless of the content cap */
.wp-block-post-content > .post-grid-gallery,
.entry-content > .post-grid-gallery {
  max-width: none;
  margin-left: calc(-1 * var(--wp--style--root--padding-left, 5vw));
  margin-right: calc(-1 * var(--wp--style--root--padding-right, 5vw));
}


/* ═════════════════════════════════════════════════════════════════════════
   QUARANTINE — CUT LINE. NOTHING BELOW IS REFERENCED BY ANY PATTERN.

   TIER 1 (the rules below): every custom class in the selector is emitted by
   nothing in patterns.php and by no plugin, core or nav-menu markup I could
   find. Delete one, reload, look. That is what this section is for.

   TIER 2 (listed only — the rules are LEFT IN PLACE above): classes no
   pattern emits but something else probably does. They were deliberately NOT
   moved down here: relocating a rule changes its source order, and source
   order decides specificity ties. Dropping ~60 rules to the bottom of the
   file would silently hand them wins they do not have today. Delete these in
   place instead, same method, one at a time.

     JS-rendered (grid-gallery.js / lightbox script — not part of this review):
       grid-gallery, grid-gallery__grid, grid-item, grid-item__caption,
       grid-item__caption-inner, grid-item__link, gg-hero, gg-hero__img,
       gg-hovered, gg-row-active, gg-always-captions, cap-title, cap-divider,
       cap-desc, gallery-lightbox, gallery-lightbox-open, lightbox-backdrop,
       lightbox-close, lightbox-image, lightbox-nav, lightbox-next,
       lightbox-prev, lightbox-slide, lightbox-track, backdrop-on,
       hide-controls, fullscreen, post-cell, post-cell--full, post-cell--wide,
       post-cell__dim, post-cell__title, post-grid-gallery,
       post-grid-gallery__chunk
     Mailchimp / Easy Forms plugin markup:
       yikes-easy-mc-email, yikes-easy-mc-error-messages,
       yikes-easy-mc-success-message, yikes-easy-mc-form,
       yikes-easy-mc-submit-button, yikes-mailchimp-container,
       yikes-mailchimp-submit-button-span-text, newsletter-form,
       form-description, EMAIL-label
     WordPress-generated (wp_nav_menu / editor / single templates):
       current-menu-item, current_page_item, current-category-ancestor,
       editor-styles-wrapper, entry-content, edit-link, post-edit-link
   ═════════════════════════════════════════════════════════════════════════ */

/* WHY IT IS HERE: no pattern, template part or PHP string in this theme outputs .bg-warm. Section backgrounds are all backgroundColor attributes */
.bg-warm { background: var(--wp--preset--color--warm, #F8F4F2); }

/* WHY IT IS HERE: nothing outputs .caps-text. Every uppercase run in the theme is a textTransform attribute or the heading default in theme.json */
.caps-text { text-transform: uppercase; }

/* WHY IT IS HERE: TEST THIS ONE FIRST AND ON A REAL POST. .post-content is classic-era markup no pattern emits, but the second selector is core classes plus bare tags, so it may still bite on single-post templates that were not part of this review. Delete, then open a single post with an image inside a Column */
.post-content img,
.wp-block-column main article img {
    max-width: 100%;
    height: auto;
    padding: 0;
}


.wp-block-separator {

  border-bottom: 1.5px solid;

  color: black;
  
}
  
/*  .wp-block-button {*/
/*  width: 240px;*/
/*}*/
/*.wp-block-button__link {*/
/*  width: 100%;*/
/*  box-sizing: border-box;*/
/*}*/