/**
 * Global Styles — Ported from Gatsby (site/src/styles/)
 *
 * Font families: Public Sans (sans-serif), Nantes (serif)
 * Color palette: Black primary, orange accent, extended color system
 * Grid: Bulma-like 12-column flex system
 *
 * Gatsby uses html { font-size: 62.5% } (1rem=10px). We keep 16px base
 * for WP compatibility and convert all values accordingly.
 */

/* ===== @font-face: Nantes (self-hosted serif) ===== */
@font-face {
    font-family: 'Nantes';
    font-display: swap;
    src: url('../fonts/nantes/Nantes-Regular.woff2') format('woff2'),
         url('../fonts/nantes/Nantes-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Nantes';
    font-display: swap;
    src: url('../fonts/nantes/Nantes-RegularItalic.woff2') format('woff2'),
         url('../fonts/nantes/Nantes-RegularItalic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

/* ===== CSS Custom Properties ===== */
:root {
    /* Colors — from Gatsby variables.scss */
    --color-primary: #000000;
    --color-primary-dark: #333333;
    --color-orange: hsl(14, 100%, 67%);
    --color-orange-dark: hsl(14, 57%, 54%);
    --color-yellow: hsl(44, 100%, 50%);
    --color-green: hsl(167, 100%, 31%);
    --color-blue: hsl(199, 100%, 35%);
    --color-red: hsl(343, 90%, 49%);
    --color-turquoise: hsl(171, 100%, 41%);
    --color-purple: hsl(271, 100%, 71%);
    --color-black: #000;
    --color-white: #fff;
    /* #777 lands at 4.48:1 on white — a hair under the 4.5:1 AA floor for body
       text, and it is the colour behind every muted paragraph on the site.
       #6f6f6f reads identically and clears the bar at 5.0:1. */
    --color-grey: #6f6f6f;
    --color-light-grey: hsl(0, 0%, 91%);
    --color-subtle-grey: hsl(0, 0%, 98%);
    --color-border-grey: #e8e8e8;

    /* Typography */
    --family-sans: 'Public Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    --family-serif: 'Nantes', 'Georgia', 'Times', 'Times New Roman', serif;

    /* Font sizes (16px base; Gatsby equiv in comments) */
    --fs-tiny: 0.625rem;    /* 10px — Gatsby 1.0rem */
    --fs-small: 0.75rem;    /* 12px — Gatsby 1.2rem */
    --fs-base: 0.875rem;    /* 14px — Gatsby 1.4rem */
    --fs-medium: 1rem;       /* 16px — Gatsby 1.6rem */
    --fs-large: 1.125rem;   /* 18px — Gatsby 1.8rem */
    --fs-h6: 1rem;           /* 16px */
    --fs-h5: 1.3125rem;     /* 21px */
    --fs-h4: 1.375rem;      /* 22px */
    --fs-h3: 1.725rem;      /* 27.6px */
    --fs-h2: 2.3rem;        /* 36.8px */
    --fs-h1: 3rem;           /* 48px */
    --fs-title: 2.875rem;   /* 46px */

    /* Font weights — from Gatsby */
    --fw-lighter: 100;
    --fw-light: 200;
    --fw-normal: 300;
    --fw-medium: 400;
    --fw-bold: 600;
    --fw-bolder: 700;
    --fw-link: 600;

    /* Spacing — from Gatsby unit system (converted) */
    --sp-pico: 2px;
    --sp-nano: 4px;
    --sp-tiny: 10px;
    --sp-small: 20px;
    --sp-base: 40px;
    --sp-large: 80px;
    --sp-huge: 120px;
    --sp-section: 35px;
    --sp-item: 20px;
    --sp-text: 15px;

    /* Shadows — from Gatsby */
    --shadow: 0 1.5px 6px rgba(0, 0, 0, 0.3);
    --shadow-card: 0 1.5px 8px rgba(0, 0, 0, 0.2);
    --shadow-light: 0 1.5px 10px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 1px 10px rgba(0, 0, 0, 0.4);

    /* Borders */
    --radius-small: 4px;
    --radius-card: 20px;
    --radius-pill: 999px;
    --radius-input: 5px;

    /* Layout */
    --width-content: 850px;       /* Post container — Gatsby $width-medium */
    --width-content-text: 670px;  /* Text blocks within posts — Gatsby $width-narrow */
    --width-wide: 1430px;

    /* Z-index */
    --z-base: 10;
    --z-float: 20;
    --z-over: 100;
    --z-top: 99999;
    --z-top-absolute: 99999999;
}

/* ===== Reset ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    position: relative;
    font-family: var(--family-sans);
    font-size: var(--fs-medium);
    font-weight: var(--fw-normal);
    line-height: 1.6;
    color: var(--color-black);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ===== Typography — from Gatsby type.scss ===== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--family-serif);
    font-weight: var(--fw-normal);
    margin-top: 0;
    margin-bottom: var(--sp-small);
}

h1 {
    font-size: calc(var(--fs-h1) * 0.8);
    line-height: 1.2;
}
@media (min-width: 1088px) {
    h1 { font-size: var(--fs-h1); }
}

h2 {
    font-size: var(--fs-h2);
    line-height: 1.25;
}

h3 {
    font-size: var(--fs-h3);
    line-height: 1.3;
}

h4 {
    font-size: var(--fs-h4);
    line-height: 1.35;
}

h5 {
    font-size: var(--fs-h5);
    line-height: 1.6;
}

h6 {
    font-size: var(--fs-h6);
    line-height: 1.6;
}

p, li {
    font-weight: var(--fw-normal);
    font-size: var(--fs-medium);
    margin-top: 0;
    margin-bottom: var(--sp-item);
    line-height: 1.6;
}

/* Links — default: no decoration. Only inline text links get underlines. */
a:not(.button):not(.wp-element-button) {
    color: var(--color-black);
    text-decoration: none;
    transition: text-decoration-color 0.2s ease;
}

/* Inline text links inside prose content get the Gatsby underline style */
p a:not(.button):not(.wp-element-button),
li a:not(.button):not(.wp-element-button),
.wp-block-post-content a:not(.button):not(.wp-element-button),
.vibemap-text-with-image__text a:not(.button):not(.wp-element-button),
.impact-area-body a:not(.button):not(.wp-element-button),
.entry-content a:not(.button):not(.wp-element-button) {
    font-weight: var(--fw-link);
    text-decoration: underline;
    text-decoration-color: #666;
}

p a:not(.button):not(.wp-element-button):hover,
li a:not(.button):not(.wp-element-button):hover,
.wp-block-post-content a:not(.button):not(.wp-element-button):hover,
.entry-content a:not(.button):not(.wp-element-button):hover {
    text-decoration-color: var(--color-black);
}

/* Code — from Gatsby */
code {
    background: #f1f1f1;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.875em;
}

pre code {
    display: block;
    padding: var(--sp-small);
    overflow-x: auto;
}

/* Blockquote */
blockquote {
    font-family: var(--family-serif);
    font-size: var(--fs-h3);
    font-weight: var(--fw-light);
    margin: 0 0 var(--sp-item);
    padding: 0;
    border: none;
}

/* Lists */
ul { list-style-type: disc; }
ol { list-style-type: decimal; }

ul ul, ol ol, ul ol, ol ul {
    margin: var(--sp-text) 0;
}

li {
    margin-bottom: var(--sp-tiny);
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 12px;
    border-bottom: 1px solid var(--color-light-grey);
    text-align: left;
}

/* ===== Layout — Bulma-like grid from Gatsby ===== */
.container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    padding-right: var(--sp-small);
    padding-left: var(--sp-small);
    max-width: var(--width-wide);
}

@media (min-width: 769px) {
    .container {
        padding-right: var(--sp-base);
        padding-left: var(--sp-base);
    }
}

@media (min-width: 1088px) {
    .container {
        padding-right: var(--sp-large);
        padding-left: var(--sp-large);
    }
}

/* Columns — flex grid */
.columns {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.columns.is-gapless {
    margin: 0;
    padding: 0;
}

.columns.is-gapless > .column {
    padding: 0;
}

.columns.is-multiline {
    flex-wrap: wrap;
}

.columns.is-centered {
    justify-content: center;
}

.column {
    display: block;
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
    padding: 0;
}

@media (min-width: 769px) {
    .column {
        padding: 0 1.25rem;
    }
}

/* Mobile: stack columns */
@media (max-width: 768px) {
    .columns:not(.is-mobile) {
        flex-direction: column;
    }

    .columns:not(.is-mobile) > .column {
        width: 100%;
    }
}

/* Column widths — 12-column grid */
.column.is-1  { flex: none; width: 8.3333%; }
.column.is-2  { flex: none; width: 16.6667%; }
.column.is-3  { flex: none; width: 25%; }
.column.is-4  { flex: none; width: 33.3333%; }
.column.is-5  { flex: none; width: 41.6667%; }
.column.is-6  { flex: none; width: 50%; }
.column.is-7  { flex: none; width: 58.3333%; }
.column.is-8  { flex: none; width: 66.6667%; }
.column.is-9  { flex: none; width: 75%; }
.column.is-10 { flex: none; width: 83.3333%; }
.column.is-11 { flex: none; width: 91.6667%; }
.column.is-12 { flex: none; width: 100%; }

/* Column offsets */
.column.is-offset-1  { margin-left: 8.3333%; }
.column.is-offset-2  { margin-left: 16.6667%; }
.column.is-offset-3  { margin-left: 25%; }
.column.is-offset-4  { margin-left: 33.3333%; }
.column.is-offset-5  { margin-left: 41.6667%; }
.column.is-offset-6  { margin-left: 50%; }

/* Responsive column widths */
@media (max-width: 420px) {
    .column.is-1-mobile  { flex: none; width: 8.3333%; }
    .column.is-2-mobile  { flex: none; width: 16.6667%; }
    .column.is-3-mobile  { flex: none; width: 25%; }
    .column.is-4-mobile  { flex: none; width: 33.3333%; }
    .column.is-6-mobile  { flex: none; width: 50%; }
    .column.is-8-mobile  { flex: none; width: 66.6667%; }
    .column.is-10-mobile { flex: none; width: 83.3333%; }
    .column.is-12-mobile { flex: none; width: 100%; }
}

@media (min-width: 769px) {
    .column.is-1-tablet  { flex: none; width: 8.3333%; }
    .column.is-2-tablet  { flex: none; width: 16.6667%; }
    .column.is-3-tablet  { flex: none; width: 25%; }
    .column.is-4-tablet  { flex: none; width: 33.3333%; }
    .column.is-5-tablet  { flex: none; width: 41.6667%; }
    .column.is-6-tablet  { flex: none; width: 50%; }
    .column.is-7-tablet  { flex: none; width: 58.3333%; }
    .column.is-8-tablet  { flex: none; width: 66.6667%; }
    .column.is-10-tablet { flex: none; width: 83.3333%; }
    .column.is-12-tablet { flex: none; width: 100%; }
}

@media (min-width: 1088px) {
    .column.is-1-desktop  { flex: none; width: 8.3333%; }
    .column.is-2-desktop  { flex: none; width: 16.6667%; }
    .column.is-3-desktop  { flex: none; width: 25%; }
    .column.is-4-desktop  { flex: none; width: 33.3333%; }
    .column.is-5-desktop  { flex: none; width: 41.6667%; }
    .column.is-6-desktop  { flex: none; width: 50%; }
    .column.is-7-desktop  { flex: none; width: 58.3333%; }
    .column.is-8-desktop  { flex: none; width: 66.6667%; }
    .column.is-10-desktop { flex: none; width: 83.3333%; }
    .column.is-12-desktop { flex: none; width: 100%; }
}

/* Flex utility on columns */
.is-flex,
.columns.is-flex {
    display: flex;
}

@media (min-width: 769px) {
    .is-flex-tablet { display: flex; }
}

/* ===== Buttons — from Gatsby buttons.scss ===== */
.button,
.wp-element-button,
button[type="submit"],
input[type="submit"] {
    display: inline-block;
    padding: 10px 40px;
    font-family: var(--family-sans);
    font-size: var(--fs-medium);
    font-weight: var(--fw-link);
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    background-color: var(--color-black);
    color: var(--color-white);
    transition: filter 0.2s ease;
    min-height: 40px;
    line-height: 1.4;
}

.button:hover,
.wp-element-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    filter: brightness(1.3);
    color: var(--color-white);
    text-decoration: none;
}

.button.secondary {
    background-color: var(--color-white);
    color: var(--color-black);
    border: 1px solid var(--color-light-grey);
}

.button.secondary:hover {
    background-color: var(--color-subtle-grey);
}

.button.black {
    background-color: var(--color-black);
    color: var(--color-white);
}

/* ===== Forms — from Gatsby inputs.scss ===== */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
textarea,
select {
    width: 100%;
    padding: 10px 12px;
    font-family: var(--family-sans);
    font-size: var(--fs-base);
    font-weight: var(--fw-normal);
    border: 1px solid #a5a5a5;
    border-radius: var(--radius-input);
    background: var(--color-white);
    transition: border-color 0.2s ease;
    color: var(--color-black);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-primary);
}

::placeholder {
    color: #777;
}

textarea {
    min-height: 100px;
}

/* ===== Section Base ===== */
section[class*="section--"] {
    padding: var(--sp-section) 0;
    position: relative;
    z-index: 5;
}

section[class*="section--"]:first-child {
    padding-bottom: var(--sp-base);
}

.vibemap-section {
    padding: var(--sp-section) 0;
    position: relative;
}

/* Homepage gradient bar — gradient strip at top */
.homepage-gradient-bar {
    width: 100%;
    height: 160px;
    background: linear-gradient(44deg, rgba(60,216,255,1) 20%, rgba(180,255,217,1) 100%);
}

/* ===== Impact Area — from Gatsby post.scss / impactArea ===== */
.s-impact-area {
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 40px 10px;
    overflow: hidden;
}

/* Only full-image variant gets large min-height */
.s-impact-area--full-image {
    min-height: 350px;
    padding: var(--sp-large) 0 var(--sp-base);
}

@media (min-width: 769px) {
    .s-impact-area--full-image {
        min-height: 450px;
    }
}

.s-impact-area .background {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.s-impact-area .background .fill {
    width: 100%;
    height: 100%;
}

.s-impact-area .background .image-fill {
    background-size: cover;
    background-position: center;
}

.s-impact-area .background .image-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
}

.s-impact-area .container {
    position: relative;
    z-index: 1;
    width: 100%;
    text-align: left;
}

.s-impact-area .impact-area-content {
    max-width: 800px;
    text-align: left;
}

.s-impact-area h1.title {
    text-align: left;
    margin-bottom: 0;
}

.s-impact-area .title {
    font-family: var(--family-serif);
    font-weight: var(--fw-bold);
    margin-bottom: var(--sp-small);
}

.s-impact-area .title.c-white {
    color: var(--color-white);
}

.s-impact-area .title.c-black {
    color: var(--color-black);
}

.s-impact-area .impact-area-body {
    font-size: var(--fs-medium);
    margin-bottom: var(--sp-small);
}

.s-impact-area .impact-area-links {
    display: flex;
    gap: var(--sp-tiny);
    flex-wrap: wrap;
}

/* --- Full-image variant (Gatsby's ImpactAreaFull) ---
   Background image fills container, content in a white card overlay */
/* Full-image variant: background image with white card overlay (left, vertically centered) */
.s-impact-area--full-image {
    min-height: 420px;
    padding: 0;
    align-items: center;
}

@media (min-width: 769px) {
    .s-impact-area--full-image {
        min-height: 500px;
    }
}

.s-impact-area--full-image .container {
    position: relative;
    z-index: 1;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: var(--sp-small);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

@media (min-width: 769px) {
    .s-impact-area--full-image .container {
        padding: var(--sp-base);
    }
}

@media (min-width: 1088px) {
    .s-impact-area--full-image .container {
        /* Match the left padding of the regular .container so card aligns with page content */
        padding-left: calc((100% - var(--width-wide)) / 2 + var(--sp-large));
    }
}

/* White card overlay — left-aligned, vertically centered via parent flex */
.s-impact-area--full-image .impact-area-content {
    background-color: var(--color-white);
    box-shadow: 0px 13px 27px -5px rgba(50, 50, 93, 0.25),
                0px 8px 16px -8px rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    padding: 24px 28px;
    max-width: 560px;
    z-index: 5;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left;
}

@media (min-width: 1088px) {
    .s-impact-area--full-image .impact-area-content {
        padding: 28px 32px;
    }
}

/* Title in card */
.s-impact-area--full-image .impact-area-content .title {
    font-family: var(--family-serif);
    font-size: 1.675rem;
    font-weight: var(--fw-medium);
    line-height: 1.3;
    margin-bottom: 12px;
    color: var(--color-black);
}

@media (min-width: 1088px) {
    .s-impact-area--full-image .impact-area-content .title {
        font-size: 2.3rem;
        line-height: 1.2;
        margin-bottom: 16px;
    }
}

/* Body text in card */
.s-impact-area--full-image .impact-area-content .impact-area-body {
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    line-height: 1.5;
    color: var(--color-black);
    margin-bottom: 16px;
}

@media (min-width: 1088px) {
    .s-impact-area--full-image .impact-area-content .impact-area-body {
        font-size: var(--fs-medium);
        line-height: 1.6;
    }
}

/* CTA links in card */
.s-impact-area--full-image .impact-area-content .impact-area-links {
    margin-top: 8px;
}

/* Remove the dark overlay on full-image */
.s-impact-area--full-image .background .image-fill::after {
    display: none;
}

/* Force text color to black inside the white card regardless of c-* class */
.s-impact-area--full-image .impact-area-content .title.c-white,
.s-impact-area--full-image .impact-area-content .title.c-black {
    color: var(--color-black);
}

/* ===== Post layout ===== */
.post .main.container {
    max-width: var(--width-content);
    padding-top: var(--sp-base);
}

.post .main.container h1 {
    font-weight: var(--fw-bold);
}

.post-terms-wrap {
    margin-top: var(--sp-base);
    padding-top: var(--sp-small);
    border-top: 1px solid var(--color-border-grey);
}

/* ========================================================================
   Single Post Template
   Gatsby 1rem = 10px. All values here in px.
   ======================================================================== */

/* --- Post header --- */
.post-header {
    padding: 80px 0 0;
}
@media (max-width: 768px) {
    .post-header { padding: 20px 0; }
}

/* --- Post info: category, title, meta --- */
.post-header .post-info-container {
    max-width: 1130px;
    margin: 0 auto 40px;
    padding: 0 30px;
}
@media (min-width: 769px) {
    .post-header .post-info-container { margin-bottom: 60px; }
}
.post-header .post-info-container h1 {
    margin-bottom: 10px;
}
.post-header .post-info-container span {
    display: block;
    font-weight: var(--fw-normal, 300);
    margin-bottom: 4px;
    font-size: 16px;
}
.post-header .post-info-container span.post-category {
    font-size: 21px;
}
.post-header .post-info-container span.post-info {
    font-size: 14px;
}

/* --- Post banner: image in flow, gradient positioned absolutely behind it --- */
.post-banner {
    position: relative;
    max-width: 1130px;
    margin: 0 auto;
    padding: 0 30px;
    margin-bottom: 80px; /* space for gradient extending below image */
}
/* Image centered in banner */
.post-banner__image {
    position: relative;
    z-index: 2;
    display: block;
    max-width: 850px;
    width: 80%;
    margin: 0 auto;
}
/* Gradient: same size as image, centered but offset down+left */
.post-banner__gradient {
    position: absolute;
    top: 40px;
    bottom: -80px;
    left: 50%;
    transform: translateX(calc(-50% - 20px));
    width: 80%;
    max-width: 850px;
    background: linear-gradient(44deg, rgb(211, 145, 250) 20%, rgb(160, 229, 247) 100%);
    z-index: 1;
}
@media (max-width: 768px) {
    .post-banner { margin-bottom: 40px; }
    .post-banner__image { width: 95%; }
    .post-banner__gradient { width: 95%; top: 20px; bottom: -40px; transform: translateX(calc(-50% - 10px)); }
}

/* --- Share buttons --- */
.post-share-buttons {
    max-width: 1130px;
    margin: 0 auto;
    padding: 20px 30px 0;
}
.post-share-buttons ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 10px;
}
.post-share-buttons li {
    display: inline-block;
    height: 40px;
}
.post-share-buttons a,
.post-share-buttons button {
    display: block;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    line-height: 0;
}
.post-share-buttons svg { width: 40px; height: 40px; }
.post-share-buttons svg circle { fill: #000; transition: fill 0.35s ease; }
.post-share-buttons li:hover svg circle { fill: #444; }

/* ===== Post content area ===== */
.post-content-area {
    /* The container is padded 80px a side, so a plain 850px cap left a 690px
       text box under an 850px banner. Add the padding back so the copy itself
       measures 850 and lines up with the hero above it. */
    max-width: calc(var(--width-content) + 160px) !important;
}

/* Text elements at narrow reading width (670px) */
.post-content-area p,
.post-content-area h2,
.post-content-area h3,
.post-content-area h4,
.post-content-area ul,
.post-content-area ol,
.post-content-area blockquote {
    max-width: var(--width-content);
}

/* Images and media — FULL container width, override the text constraint */
.post-content-area figure,
.post-content-area .wp-block-acf-image,
.post-content-area .vibemap-image-block,
.post-content-area .wp-block-image,
.post-content-area .wp-block-embed,
.post-content-area .wp-block-acf-gallery {
    max-width: 100% !important;
    width: 100%;
}
.post-content-area figure img,
.post-content-area .wp-block-acf-image img,
.post-content-area .vibemap-image-block img,
.post-content-area .wp-block-image img {
    max-width: 100%;
    width: 100%;
    height: auto;
}

/* ACF image blocks spacing */
.post-content-area .wp-block-acf-image,
.post-content-area .vibemap-image-block {
    margin: 40px 0;
}

/* Post typography */
.post-content-area h2,
.post-content-area h3 {
    font-family: var(--family-serif);
    font-weight: var(--fw-bold, 700);
    line-height: 1.2;
    margin-top: 2em;
    margin-bottom: 0.5em;
}
.post-content-area h2 { font-size: 1.75rem; }
.post-content-area h3 { font-size: 1.375rem; }

.post-content-area p {
    font-weight: var(--fw-normal, 300);
    line-height: 1.8;
    margin-bottom: 20px;
}
.post-content-area blockquote {
    font-family: var(--family-serif);
    font-size: 1.725rem;
    font-weight: 200;
    line-height: 1.2;
    margin: 0;
    padding: 0;
}
.post-content-area a {
    color: var(--color-black);
    text-decoration: underline;
    text-decoration-color: var(--color-grey-300, #ccc);
}
.post-content-area a:hover {
    opacity: 0.7;
    text-decoration-color: var(--color-black);
}

/* ===== About the Author — Gatsby .wp-block.about-author ===== */
.wp-block.about-author {
    font-size: 16px;
    font-weight: 200;
    position: relative;
    min-height: 250px;
    max-width: var(--width-content);
    border-top: 2px solid var(--color-border-grey, #ccc);
    padding-top: 35px;
    margin-top: 30px;
}
@media (min-width: 769px) {
    .wp-block.about-author {
        max-width: 860px !important;
    }
    .wp-block.about-author .wp-author-block-meta {
        max-width: 670px;
        margin-left: 250px;
    }
    .wp-block.about-author h4 {
        margin-left: 250px;
    }
}
.wp-block.about-author h4 {
    font-size: 16px;
    font-weight: 300;
    margin-bottom: 4px;
}
.wp-block.about-author h5 {
    font-family: var(--family-serif);
    font-size: 1.25rem;
    font-weight: var(--fw-bold, 700);
    margin: 0 0 8px;
}
.wp-block.about-author .authorPhoto {
    border-radius: 50%;
    height: 200px;
    overflow: hidden;
    position: absolute;
    width: 200px;
    top: 50%;
    transform: translate(0, -50%);
}
.wp-block.about-author .authorPhoto img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
@media (max-width: 768px) {
    .wp-block.about-author .authorPhoto {
        margin: 5px auto 10px;
        position: relative;
        top: 0;
        transform: none;
        width: 150px;
        height: 150px;
    }
    .wp-block.about-author .authorPhoto img {
        height: auto !important;
        aspect-ratio: 1 / 1;
    }
    .wp-block.about-author.has-image .wp-author-block-meta { margin-left: 0; }
    .wp-block.about-author h4 { margin-left: 0; text-align: center; }
}
.wp-block.about-author .wp-author-block-meta .author-bio {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.8;
    margin: 0;
    white-space: pre-line;
}
.wp-block.about-author .author-links {
    padding: 10px 0;
}
.wp-block.about-author .author-links a {
    margin: 0 10px 0 0;
    vertical-align: top;
    display: inline-block;
    color: var(--color-black);
    text-decoration: none;
    line-height: 0;
}
.wp-block.about-author .author-links svg circle {
    transition: fill 0.35s ease;
}
.wp-block.about-author .author-links a:hover svg circle {
    fill: #444;
}

/* ===== Blog archive — 3-column card grid (Gatsby journal page) ===== */
.blog-grid-container {
    padding-top: 40px;
    padding-bottom: 40px;
}

.blog-card-grid .wp-block-post-template {
    gap: 40px 30px;
    align-items: stretch;
}

.blog-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 0;
    overflow: hidden;
    border-bottom: 1px solid var(--color-border-grey, #e8e8e8);
    padding-bottom: 20px;
    height: 100%;
}

.blog-card .wp-block-post-featured-image {
    margin-bottom: 0;
}

.blog-card .wp-block-post-featured-image a {
    text-decoration: none;
}

.blog-card .wp-block-post-featured-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 16/10;
    border-radius: 8px;
}

.blog-card__category {
    font-size: 0.8125rem;
    color: #999;
    font-weight: 400;
    margin-bottom: 2px;
    padding: 14px 0 0;
}

.blog-card .blog-card__category a:not(.wp-element-button) {
    color: #999 !important;
    font-weight: 400 !important;
    text-decoration: none !important;
}

.blog-card__title {
    font-family: var(--family-serif);
    font-size: 1.3125rem;
    font-weight: 400;
    line-height: 1.35;
    padding: 6px 0 0;
}

.blog-card .blog-card__title a:not(.wp-element-button) {
    font-family: var(--family-serif) !important;
    font-size: 1.3125rem !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    color: var(--color-black) !important;
    text-decoration: none !important;
}

.blog-card .blog-card__title a:hover {
    opacity: 0.7;
}

.blog-pagination {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border-grey, #e8e8e8);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9375rem;
}

.blog-pagination .wp-element-button,
.blog-pagination a:not(.wp-element-button),
.blog-pagination span {
    text-decoration: none !important;
    font-weight: 400 !important;
    color: var(--color-grey, #777) !important;
    padding: 6px 10px;
    border-radius: 4px;
    transition: background 0.2s ease, color 0.2s ease;
}

.blog-pagination a:hover {
    background: var(--color-light-grey, #e8e8e8) !important;
    color: var(--color-black) !important;
}

/* Current page number */
.blog-pagination .wp-block-query-pagination-numbers .current,
.blog-pagination .page-numbers.current {
    font-weight: 600 !important;
    color: var(--color-black) !important;
    background: var(--color-light-grey, #e8e8e8);
}

/* Prev/Next links */
.blog-pagination .wp-block-query-pagination-previous,
.blog-pagination .wp-block-query-pagination-next {
    font-family: var(--family-sans);
    font-size: 0.875rem;
    color: var(--color-black) !important;
    font-weight: 500 !important;
}

/* Dots/ellipsis */
.blog-pagination .wp-block-query-pagination-numbers .dots {
    color: var(--color-grey, #777) !important;
    padding: 6px 4px;
}

/* ===== Subpage navigation ====================================================
   The section sub-nav (Our Story, and any other parent with children) uses the
   same treatment as the Guides & Articles category filters: bold labels, muted
   until hovered, and a 2px rule under the current page only — sitting on the
   row's own bottom border so the two read as one control.

   It previously rendered light-weight #999 links with no active marker at all,
   so there was nothing to say which page you were on.
   ========================================================================== */

/* The markup already nests a .container, which owns the page's max-width and
   side padding. Adding a second max-width plus 30px of padding here inset the
   nav from the content by 50px on each side. Let the inner .container align it. */
.sub-page-menu {
    margin: var(--sp-base) 0;
    max-width: none;
    padding: 0;
}

.sub-page-menu ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-tiny) var(--sp-item);
    border-bottom: 1px solid var(--color-border-grey, #e8e8e8);
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.sub-page-menu li {
    display: block;
    margin: 0;
}

.sub-page-menu li a {
    display: block;
    position: relative;
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    line-height: 1.4;
    padding: 6px 0;
    color: var(--color-grey);
    text-decoration: none !important;
}

.sub-page-menu li a:hover,
.sub-page-menu li a:focus-visible {
    color: var(--color-black);
}

.sub-page-menu li.current-page a {
    color: var(--color-black);
}

/* Overlaps the ul's 1px border so the marker sits on the rule, not above it. */
.sub-page-menu li.current-page a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--color-black);
}

/* Override WP layout rules that strip container constraints */
.sub-page-heading.container,
.page .is-layout-flow > .sub-page-heading,
.page .is-layout-constrained > .sub-page-heading,
.page.full .is-layout-flow > .sub-page-heading,
.page.full .is-layout-constrained > .sub-page-heading {
    max-width: var(--width-wide) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--sp-small) !important;
    padding-right: var(--sp-small) !important;
    text-align: left;
}

@media (min-width: 1088px) {
    .sub-page-heading.container,
    .page .is-layout-flow > .sub-page-heading,
    .page.full .is-layout-flow > .sub-page-heading {
        padding-left: var(--sp-large) !important;
        padding-right: var(--sp-large) !important;
    }
}

.sub-page-heading h1 {
    text-align: left;
    padding-top: 40px;
}

/* ===== Utility Classes — from Gatsby utilities.scss ===== */
.has-text-centered { text-align: center; }
.has-text-left { text-align: left; }
.has-text-right { text-align: right; }
.has-text-justified { text-align: justify; }

@media (max-width: 420px) {
    .has-text-centered-mobile { text-align: center; }
    .has-text-left-mobile { text-align: left; }
}

@media (min-width: 769px) {
    .has-text-centered-tablet { text-align: center; }
    .has-text-left-tablet { text-align: left; }
}

.is-hidden { display: none !important; }

@media (max-width: 768px) {
    .is-hidden-mobile { display: none !important; }
}

@media (min-width: 769px) and (max-width: 1087px) {
    .is-hidden-tablet { display: none !important; }
}

@media (min-width: 1088px) {
    .is-hidden-desktop { display: none !important; }
}

.is-uppercase { text-transform: uppercase; }
.is-lowercase { text-transform: lowercase; }
.is-capitalized { text-transform: capitalize; }
.is-italic { font-style: italic; }

.has-text-weight-light  { font-weight: 200; }
.has-text-weight-normal { font-weight: 300; }
.has-text-weight-semibold { font-weight: 600; }
.has-text-weight-bold   { font-weight: 700; }

.is-marginless { margin: 0 !important; }
.is-paddingless { padding: 0 !important; }
.no-wrap { white-space: nowrap; }

/* Spacing utilities */
.m-0  { margin: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.p-0  { padding: 0; }
.p-1  { padding: 5px; }
.p-2  { padding: 10px; }
.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }
.mr-2 { margin-right: 10px; }
.ml-2 { margin-left: 10px; }

/* ===== Vibe Pill — from Gatsby vibepill.scss ===== */
.pill {
    display: inline-flex;
    align-items: center;
    background: var(--color-white);
    border: 1px solid var(--color-black);
    border-radius: var(--radius-pill);
    padding: 4px 14px;
    font-family: var(--family-sans);
    font-size: var(--fs-medium);
    font-weight: var(--fw-normal);
    text-transform: capitalize;
    height: 25px;
    text-decoration: none;
    color: var(--color-black);
}

/* ===== WYSIWYG content inside sections ===== */
.wysiwyg-content img {
    max-width: 100%;
    height: auto;
}

.wysiwyg-content p:last-child {
    margin-bottom: 0;
}

/* ===== WordPress Block Overrides ===== */
/*
 * WP FSE generates layout CSS that fights our Bulma-like grid:
 *   - .is-layout-flow > *          → max-width + auto margins (centering/constraining)
 *   - .is-layout-constrained > *   → max-width: contentSize
 *   - :where(.wp-block-group.has-background) → padding: 1.25em 2.375em
 *   - .wp-site-blocks               → root padding from useRootPaddingAwareAlignments
 *
 * Strategy: nuke WP layout constraints globally for our legacy output,
 * since all width control comes from .container { max-width: var(--width-wide) }.
 */

/* ---- 1. Root-level resets ---- */
.wp-site-blocks {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* WP adds padding to ANY .wp-block-group with a background color.
   Our header, footer, and sections handle their own padding. */
.wp-block-group.has-background {
    padding: 0 !important;
}

/* ---- 2. Main content area — remove ALL WP layout constraints ---- */
.page.full,
.page.full > .wp-block-group__inner-container,
.post > .wp-block-group__inner-container {
    max-width: none !important;
    padding: 0 !important;
}

/* Kill WP's max-width + auto-margin on every child of a layout container
   inside our main page wrapper. Our .container handles width.
   Exclude .sub-page-heading, .sub-page-menu, and .container which need centering. */
.page.full.is-layout-flow > *:not(.sub-page-heading):not(.sub-page-menu):not(.container),
.page.full.is-layout-constrained > *:not(.sub-page-heading):not(.sub-page-menu):not(.container),
.page.full .is-layout-flow > *:not(.sub-page-heading):not(.sub-page-menu):not(.container),
.page.full .is-layout-constrained > *:not(.sub-page-heading):not(.sub-page-menu):not(.container),
body .is-layout-flow > section[class*="section--"],
body .is-layout-flow > .s-impact-area,
body .is-layout-constrained > section[class*="section--"],
body .is-layout-constrained > .s-impact-area {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Legacy sections and impact area must be full-width */
section[class*="section--"],
.s-impact-area,
.vibemap-section {
    max-width: none !important;
    width: 100%;
}

/* ---- 3. Force display:flex on .columns ---- */
/* WP's .is-layout-flow overrides display to block/flow-root.
   We ONLY force display:flex — flex-wrap and flex-direction are
   left to the base .columns rule and section-specific overrides. */
div.columns,
.container > .columns,
.container > div.columns,
.vibemap-section .columns,
.vibemap-section div.columns,
section[class*="section--"] .columns,
section[class*="section--"] div.columns {
    display: flex !important;
}

/* ---- 4. Header / Footer — full viewport width ---- */
.site-header,
.site-footer {
    max-width: none !important;
    width: 100%;
}

/* Override WP .has-background padding on header/footer specifically */
.site-header.wp-block-group.has-background,
.site-footer.wp-block-group.has-background {
    padding: 0 !important;
}

/* Remove WP layout constraints from header/footer inner groups */
.site-header .is-layout-constrained > *,
.site-footer .is-layout-constrained > * {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Template parts should not be constrained by parent layout */
.wp-block-template-part {
    max-width: none !important;
}

/* ===== Site Header — matches Gatsby header =====

   Sticky has to sit on the template-part wrapper, not on .site-header itself.
   A sticky element only travels within its own parent's box, and the wrapper is
   exactly as tall as the header inside it — so with `position: sticky` on
   .site-header there was no room to move and it scrolled straight off the page
   despite computing as sticky. The wrapper's parent is .wp-site-blocks, which
   is the full page height. */
.wp-site-blocks > header.wp-block-template-part {
    position: sticky;
    top: 0;
    z-index: var(--z-top-absolute);
}

.site-header {
    border-bottom: 1px solid var(--color-border-grey);
    background: var(--color-white);
}

/* The admin bar is itself fixed, so the header has to start below it. */
.admin-bar .wp-site-blocks > header.wp-block-template-part {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .wp-site-blocks > header.wp-block-template-part {
        top: 46px;
    }
}

/* Anchor targets would otherwise land underneath the header. */
html {
    scroll-padding-top: 88px;
}

/* A shadow that fades in as the page moves, so the header reads as lifted off
   the content only once there is content behind it. Progressive: browsers
   without scroll-driven animations simply keep the flat header. */
@supports (animation-timeline: scroll()) {
    .wp-site-blocks > header.wp-block-template-part {
        animation: vm-header-lift linear both;
        animation-timeline: scroll();
        animation-range: 0 140px;
    }

    @keyframes vm-header-lift {
        from { box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
        to   { box-shadow: 0 6px 20px -10px rgba(0, 0, 0, 0.35); }
    }
}

@media (prefers-reduced-motion: reduce) {
    .wp-site-blocks > header.wp-block-template-part {
        animation: none;
    }
}

/* Remove FSE block gap that adds unwanted spacing */
.site-header.wp-block-group {
    gap: 0 !important;
}

/* --- Top Menu Bar (black bar) --- */
nav.top-menu {
    display: none;
    background: var(--color-black);
    padding: 0;
    text-align: right;
}

@media (min-width: 769px) {
    nav.top-menu {
        display: block;
        margin-bottom: 4px;
    }
}

nav.top-menu .container {
    padding-right: var(--sp-small);
}

nav.top-menu ul.menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block;
}

nav.top-menu ul.menu li {
    display: inline-block;
    list-style: none !important;
    margin-right: 20px;
    margin-bottom: 5px;
}

nav.top-menu ul.menu li:last-child {
    margin-right: 0;
}

nav.top-menu ul.menu a,
nav.top-menu ul.menu button {
    font-family: var(--family-sans);
    font-size: var(--fs-base);
    color: var(--color-white) !important;
    background: transparent;
    padding: 0;
    text-decoration: none !important;
    display: inline-block;
    position: relative;
    margin-bottom: 0;
    font-weight: var(--fw-normal);
}

nav.top-menu ul.menu a::after {
    content: '';
    height: 1px;
    background: var(--color-white);
    width: 100%;
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.35s ease;
}

nav.top-menu ul.menu a:hover::after {
    opacity: 1;
}

/* --- Main Header Body --- */
.site-header .main-header-body {
    min-height: 70px;
    display: flex;
    align-items: center;
}

.site-header .main-header-body.wp-block-group {
    gap: 0 !important;
}

@media (max-width: 768px) {
    .site-header .main-header-body {
        min-height: 50px;
    }
}

/* Header columns layout */
.site-header .header-columns {
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

.site-header .header-columns.wp-block-group {
    gap: 0 !important;
}

/* --- Header Logo --- */
.header-logo {
    display: flex;
    align-items: center;
    margin: 4px;
    padding: 4px;
}

.header-logo a {
    display: block;
    line-height: 0;
    font-size: 0;
    text-decoration: none !important;
}

.header-logo a.logo.full {
    display: none;
    max-width: 120px;
}

.header-logo a.logo.mobile {
    display: block;
    max-width: 40px;
}

@media (min-width: 1088px) {
    .header-logo a.logo.full {
        display: block;
        max-width: 120px;
        margin-left: 10px;
    }
    .header-logo a.logo.mobile {
        display: none;
    }
}

.header-logo .logo-svg {
    width: 100%;
    height: auto;
}

/* ===== Classic Menu Styles (wp_nav_menu output) ===== */
/* WordPress block themes apply aggressive list styles.
   We override with high specificity + !important. */

/* Global nav list reset */
nav.header-nav ul,
nav.header-nav ol,
nav.top-menu ul,
nav.top-menu ol,
nav.footer-nav ul,
nav.footer-nav ol,
nav.footer-bottom-nav ul,
nav.footer-bottom-nav ol {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

nav.header-nav li,
nav.top-menu li,
nav.footer-nav li,
nav.footer-bottom-nav li {
    list-style: none !important;
    list-style-type: none !important;
    margin-bottom: 0;
}

/* --- Header nav (main navigation) --- */
nav.header-nav {
    display: flex;
    align-items: center;
}

nav.header-nav ul.menu {
    display: none;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center;
}

@media (min-width: 769px) {
    nav.header-nav ul.menu {
        display: inline-flex;
        align-self: flex-end;
    }
}

nav.header-nav ul.menu > li {
    display: inline-block;
    position: relative;
    margin-right: 2.5rem;
    margin-bottom: 0;
    padding: 0;
}

@media (min-width: 769px) and (max-width: 1087px) {
    nav.header-nav ul.menu > li {
        margin-right: 2rem;
    }
}

@media (min-width: 1088px) {
    nav.header-nav ul.menu > li {
        margin-right: 2.5rem;
    }
}

nav.header-nav ul.menu > li:last-child {
    margin-right: 0;
}

nav.header-nav ul.menu a {
    font-family: var(--family-sans);
    font-weight: var(--fw-link);
    font-size: var(--fs-medium);
    color: var(--color-black);
    text-decoration: none !important;
    white-space: nowrap;
    position: relative;
}

nav.header-nav ul.menu a::after {
    content: '';
    height: 1px;
    background: currentColor;
    width: 100%;
    position: absolute;
    left: 0;
    top: 90%;
    opacity: 0;
    transition: opacity 0.35s ease;
}

nav.header-nav ul.menu a:hover::after {
    opacity: 1;
}

/* Header CTA button (menu items with .button class) */
nav.header-nav ul.menu li.button a,
nav.header-nav ul.menu li a.button {
    display: inline-block;
    padding: 8px 30px;
    background: var(--color-black);
    color: var(--color-white) !important;
    border-radius: var(--radius-pill);
    font-weight: var(--fw-link);
    text-decoration: none !important;
}

nav.header-nav ul.menu li.button a::after,
nav.header-nav ul.menu li a.button::after {
    display: none !important;
}

nav.header-nav ul.menu li.button a:hover,
nav.header-nav ul.menu li a.button:hover {
    filter: brightness(1.3);
}

/* Header dropdown submenus */
nav.header-nav .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border-grey);
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    list-style: none !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    min-width: 200px;
    z-index: 100;
}

nav.header-nav li:hover > .sub-menu {
    display: block;
}

nav.header-nav .sub-menu li {
    display: block;
    margin: 0;
}

nav.header-nav .sub-menu a {
    display: block;
    padding: 10px 20px;
    font-weight: var(--fw-normal);
    font-size: var(--fs-medium);
    text-align: left;
    color: var(--color-black);
}

nav.header-nav .sub-menu a::after {
    display: none !important;
}

nav.header-nav .sub-menu a:hover {
    text-decoration: underline !important;
}

/* ===== Site Footer — matches Gatsby footer ===== */
.site-footer {
    display: block;
    padding-top: 2rem;
}

.site-footer.wp-block-group {
    gap: 0 !important;
}

.site-footer hr {
    border: none;
    border-top: 1px solid var(--color-border-grey);
    margin: var(--sp-text) 0;
}

/* Footer menu section */
.site-footer .footer-menu-section {
    padding: 0;
}

/* --- Footer nav (multi-column layout) --- */

/* Legacy wp_nav_menu styles (kept for backwards compat) */
nav.footer-nav {
    padding: var(--sp-item) 0 5px;
}

nav.footer-nav ul.menu {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none !important;
    margin: 0 auto !important;
    padding: var(--sp-item) 0 5px !important;
    gap: 0;
    max-width: 1100px;
}

nav.footer-nav ul.menu > li {
    display: inline-block;
    vertical-align: top;
    margin-right: 4.5%;
    margin-bottom: var(--sp-item);
}

@media (min-width: 1088px) {
    nav.footer-nav ul.menu > li {
        margin-right: 6%;
    }
}

nav.footer-nav ul.menu > li:last-child {
    margin-right: 0;
}

nav.footer-nav ul.menu > li > a {
    font-family: var(--family-serif);
    font-size: var(--fs-h5);
    text-decoration: none !important;
    color: var(--color-black);
    display: block;
    margin-bottom: 10px;
    position: relative;
}

nav.footer-nav ul.menu > li > a::after {
    content: '';
    height: 1px;
    background: currentColor;
    width: 100%;
    position: absolute;
    left: 0;
    top: 90%;
    opacity: 0;
    transition: opacity 0.35s ease;
}

nav.footer-nav ul.menu > li > a:hover::after {
    opacity: 1;
}

nav.footer-nav .sub-menu {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

nav.footer-nav .sub-menu li {
    margin-bottom: 5px;
}

nav.footer-nav .sub-menu a {
    font-family: var(--family-sans);
    font-size: var(--fs-h6);
    font-weight: var(--fw-normal);
    color: var(--color-grey);
    text-decoration: none !important;
}

nav.footer-nav .sub-menu a:hover {
    opacity: 0.7;
}

/* FSE core/navigation block — multi-column footer layout
   Target by position in footer, not className (editor may strip it) */
.site-footer .footer-menu-section .wp-block-navigation {
    padding: var(--sp-item) 0 5px;
}

/* Top-level list: horizontal columns */
.site-footer .footer-menu-section .wp-block-navigation__container {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-start;
    list-style: none !important;
    margin: 0 auto !important;
    padding: var(--sp-item) 0 5px !important;
    gap: 0;
    max-width: 1100px;
    align-items: flex-start;
}

/* Each top-level item = a column */
.site-footer .footer-menu-section .wp-block-navigation__container > .wp-block-navigation-item {
    vertical-align: top;
    margin-right: 4.5%;
    margin-bottom: var(--sp-item);
}

@media (min-width: 1088px) {
    .site-footer .footer-menu-section .wp-block-navigation__container > .wp-block-navigation-item {
        margin-right: 6%;
    }
}

.site-footer .footer-menu-section .wp-block-navigation__container > .wp-block-navigation-item:last-child {
    margin-right: 0;
}

/* Top-level links = column headings */
.site-footer .footer-menu-section .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    font-family: var(--family-serif);
    font-size: var(--fs-h5);
    font-weight: 600;
    text-decoration: none !important;
    color: var(--color-black);
    display: block;
    margin-bottom: 10px;
    position: relative;
}

.site-footer .footer-menu-section .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
    content: '';
    height: 1px;
    background: currentColor;
    width: 100%;
    position: absolute;
    left: 0;
    top: 90%;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.site-footer .footer-menu-section .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover::after {
    opacity: 1;
}

/* Submenus: always visible, vertical list (not dropdown) */
.site-footer .footer-menu-section .wp-block-navigation__submenu-container {
    display: flex !important;
    flex-direction: column;
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    gap: 0 !important;
}

/* Hide the dropdown arrow on parent items */
.site-footer .footer-menu-section .wp-block-navigation__submenu-icon,
.site-footer .footer-menu-section .wp-block-navigation-submenu__toggle {
    display: none !important;
}

.site-footer .footer-menu-section .wp-block-navigation__submenu-container .wp-block-navigation-item {
    margin-bottom: 5px;
    padding: 0;
}

.site-footer .footer-menu-section .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    font-family: var(--family-sans);
    font-size: var(--fs-h6);
    font-weight: var(--fw-normal);
    color: var(--color-grey);
    text-decoration: none !important;
}

.site-footer .footer-menu-section .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    opacity: 0.7;
}

/* --- Footer bottom bar --- */
.site-footer .footer-bottom-section {
    padding: 0;
}

.site-footer .footer-bottom {
    padding: var(--sp-item) 0 var(--sp-text);
    font-weight: var(--fw-normal);
    font-size: var(--fs-medium);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 1100px;
    margin: 0 auto;
}

.site-footer .footer-copyright {
    white-space: nowrap;
    margin: 0;
}

/* --- Footer bottom nav --- */
nav.footer-bottom-nav ul.menu {
    display: flex !important;
    flex-wrap: wrap;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 1.5rem;
    align-items: center;
}

nav.footer-bottom-nav ul.menu > li {
    display: inline-block;
    margin: 0;
}

nav.footer-bottom-nav ul.menu a {
    font-family: var(--family-sans);
    font-size: var(--fs-medium);
    font-weight: var(--fw-normal);
    text-decoration: none !important;
    color: var(--color-black);
    position: relative;
}

nav.footer-bottom-nav ul.menu a::after {
    content: '';
    height: 1px;
    background: currentColor;
    width: 100%;
    position: absolute;
    left: 0;
    top: 90%;
    opacity: 0;
    transition: opacity 0.35s ease;
}

nav.footer-bottom-nav ul.menu a:hover::after {
    opacity: 1;
}

/* --- Footer logo icon --- */
.footer-logo-icon {
    display: inline-block;
    text-decoration: none !important;
    line-height: 0;
}

.footer-logo-icon img {
    width: 34px;
    height: 34px;
}

/* ===== Mobile: hide desktop nav, show mobile elements ===== */
@media (max-width: 768px) {
    nav.header-nav ul.menu {
        display: none !important;
    }
}

/* ===== Visually Hidden ===== */
.visually-hidden,
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   App handoff  (cities, vibesets, activities, neighborhoods)
   --------------------------------------------------------------------------
   Standing in for pages whose live, interactive version is moving to the Expo
   app. Reuses the impact-area gradient language so these do not read as error
   pages — they are real pages that happen to be between homes.
   ========================================================================== */

.vibemap-app-handoff__banner {
    padding: var(--sp-large) 0;
    margin-bottom: var(--sp-base);
    color: var(--color-black);
}

.vibemap-app-handoff__title {
    font-family: var(--family-serif);
    font-size: var(--fs-title);
    font-weight: var(--fw-medium);
    line-height: 1.08;
    margin: 0;
}

.vibemap-app-handoff__subheading {
    font-size: var(--fs-large);
    margin: var(--sp-tiny) 0 0;
    max-width: 46ch;
}

.vibemap-app-handoff__body {
    max-width: 68ch;
    margin: 0 auto var(--sp-large);
    display: flex;
    flex-direction: column;
    gap: var(--sp-base);
}

.vibemap-app-handoff__description {
    font-size: var(--fs-medium);
    line-height: 1.65;
}

.vibemap-app-handoff__notice {
    border: 1px solid var(--color-border-grey);
    border-radius: 10px;
    padding: var(--sp-base) var(--sp-item);
    background: var(--color-subtle-grey);
    text-align: center;
}

.vibemap-app-handoff__notice h2 {
    font-family: var(--family-serif);
    font-size: var(--fs-h4);
    font-weight: var(--fw-medium);
    margin: 0 0 var(--sp-tiny);
}

.vibemap-app-handoff__notice p {
    margin: 0 auto;
    max-width: 52ch;
    color: var(--color-primary-dark);
}

.vibemap-app-handoff__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-item);
    margin-top: var(--sp-item) !important;
}

/* !important on colour and decoration: WordPress emits
   `a:where(:not(.wp-element-button)) { color: …; text-decoration: underline }`
   from theme.json, and in this document it beats a plain class selector — the
   button renders black-on-black without it. Verified in the browser rather
   than reasoned from specificity, because the specificity says otherwise. */
a.vibemap-app-handoff__btn {
    display: inline-block;
    background: var(--color-black);
    color: var(--color-white) !important;
    font-weight: var(--fw-bold);
    text-decoration: none !important;
    border-radius: 100px;
    padding: 12px 28px;
    transition: opacity 0.18s ease;
}

a.vibemap-app-handoff__btn:hover,
a.vibemap-app-handoff__btn:focus-visible {
    opacity: 0.82;
    color: var(--color-white) !important;
}

.vibemap-app-handoff__link {
    font-weight: var(--fw-link);
    text-decoration: underline;
}

@media (max-width: 640px) {
    .vibemap-app-handoff__banner {
        padding: var(--sp-base) 0;
    }

    .vibemap-app-handoff__title {
        font-size: var(--fs-h2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vibemap-app-handoff__btn {
        transition: none;
    }
}

/* ==========================================================================
   Nav items marked as buttons  (core/navigation block markup)
   --------------------------------------------------------------------------
   "Book Demo" carries a `button` class on its nav item. The theme only ever
   styled the classic-menu form of this (`nav.header-nav ul.menu li.button a`),
   which stopped matching when the header moved to core/navigation — so the
   item rendered as bare underlined text with no pill behind it.

   !important on colour and decoration for the same reason as elsewhere:
   WordPress emits `a:where(:not(.wp-element-button))` inline from theme.json
   and it beats a plain class selector in this document.
   ========================================================================== */

.wp-block-navigation-item.button > .wp-block-navigation-item__content,
.wp-block-navigation-item.button > a.wp-block-navigation-item__content {
    background: var(--color-black);
    color: var(--color-white) !important;
    text-decoration: none !important;
    border-radius: 100px;
    padding: 0.6rem 1.4rem;
    line-height: 1.2;
    display: inline-block;
    white-space: nowrap;
    transition: opacity 0.18s ease;
}

.wp-block-navigation-item.button > .wp-block-navigation-item__content:hover,
.wp-block-navigation-item.button > .wp-block-navigation-item__content:focus-visible {
    opacity: 0.82;
    color: var(--color-white) !important;
}

/* The top bar sits on black, so a black pill would disappear into it. */
.top-menu-bar .wp-block-navigation-item.button > .wp-block-navigation-item__content {
    background: var(--color-white);
    color: var(--color-black) !important;
}

/* --- Footer bottom row ---------------------------------------------------- */

.site-footer .footer-legal {
    align-items: baseline;
}

.site-footer .footer-terms,
.site-footer .footer-terms a {
    font-size: var(--fs-base);
    color: var(--color-grey);
}

@media (prefers-reduced-motion: reduce) {
    .wp-block-navigation-item.button > .wp-block-navigation-item__content {
        transition: none;
    }
}

/* --- Site logo inside the header ------------------------------------------
   `.header-logo a { font-size: 0 }` (needed to hide the fallback site title)
   leaves the anchor with no intrinsic width, and core's site-logo block sizes
   its <img> at width:100% — 100% of nothing. Give the image a real width. */

.header-logo.wp-block-site-logo,
.header-logo .custom-logo-link {
    width: 120px;
    max-width: 120px;
    display: block;
}

.header-logo img,
.header-logo .custom-logo {
    width: 120px;
    height: auto;
    max-width: 100%;
    display: block;
}

@media (max-width: 782px) {
    .header-logo.wp-block-site-logo,
    .header-logo .custom-logo-link,
    .header-logo img {
        width: 96px;
    }
}

.footer-logo-icon.wp-block-site-logo,
.footer-logo-icon .custom-logo-link,
.footer-logo-icon img {
    width: 34px;
    height: auto;
    display: block;
}

/* --- Footer columns: stack the heading above its list -----------------------
   Core styles `.wp-block-navigation-item` as a centred flex row, so each footer
   column rendered its heading beside the link list, vertically centred, instead
   of on top of it. Turn the top-level items into columns. */

.site-footer .footer-menu-section .wp-block-navigation__container > .wp-block-navigation-item,
.site-footer .footer-menu-section .wp-block-navigation__container > .wp-block-navigation-submenu {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex: 0 0 auto;
}

/* The submenu chevron is meaningless when the list is always open. */
.site-footer .footer-menu-section .wp-block-navigation__submenu-icon {
    display: none !important;
}

.site-footer .footer-menu-section .wp-block-navigation__submenu-container > .wp-block-navigation-item {
    display: block !important;
    width: 100%;
}

/* Copyright and Terms sat flush against each other — the group's blockGap does
   not survive on this flex row, so set the gap explicitly. */
.site-footer .footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: baseline;
}

.site-footer .footer-legal p {
    margin: 0;
}

.site-footer a.footer-logo-icon {
    display: inline-block;
    line-height: 0;
}

/* ==========================================================================
   Navigation links never underline
   --------------------------------------------------------------------------
   WordPress emits `a:where(:not(.wp-element-button)) { text-decoration:
   underline }` from theme.json, which applies to every navigation block in the
   header, footer and top bar. Navigation is chrome, not prose — it should not
   be underlined. !important because that inline rule outranks a class selector
   in this document (verified in the browser).
   ========================================================================== */

.wp-block-navigation a,
.wp-block-navigation a:hover,
.wp-block-navigation a:focus-visible,
.wp-block-navigation .wp-block-navigation-item__content,
.site-header a,
.site-footer .footer-menu-section a,
.site-footer .footer-legal a {
    text-decoration: none !important;
}

/* Keep an affordance on hover without the permanent rule.

   The header menu is excluded: it tints the row instead, and fading the text to
   70% on top of that made it look washed out rather than active. */
.wp-block-navigation:not(.header-nav) a:hover,
.site-footer .footer-menu-section a:hover,
.site-footer .footer-legal a:hover {
    opacity: 0.7;
}

/* ==========================================================================
   Guides & Articles archive  (/features/)
   ========================================================================== */

.vibemap-guides-archive {
    padding: var(--sp-base) 0 var(--sp-large);
}

.vibemap-guides-archive__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-tiny) var(--sp-item);
    margin-bottom: var(--sp-base);
    padding-bottom: var(--sp-text);
    border-bottom: 1px solid var(--color-border-grey);
}

.vibemap-guides-archive__filter {
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--color-grey);
    text-decoration: none !important;
    padding: 6px 0;
    position: relative;
}

.vibemap-guides-archive__filter:hover {
    color: var(--color-black);
}

.vibemap-guides-archive__filter.is-active {
    color: var(--color-black);
}

.vibemap-guides-archive__filter.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--color-black);
}

.vibemap-guides-archive__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--sp-base) var(--sp-item);
}

.vibemap-guides-archive__card-link {
    display: block;
    text-decoration: none !important;
    color: inherit;
}

.vibemap-guides-archive__card-image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-subtle-grey);
    margin-bottom: var(--sp-text);
}

.vibemap-guides-archive__card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.vibemap-guides-archive__card-link:hover .vibemap-guides-archive__card-image img {
    transform: scale(1.03);
}

.vibemap-guides-archive__card-category {
    display: block;
    font-size: var(--fs-small);
    color: var(--color-grey);
    margin-bottom: 6px;
}

.vibemap-guides-archive__card-title {
    font-family: var(--family-serif);
    font-size: var(--fs-h5);
    font-weight: var(--fw-medium);
    line-height: 1.28;
    margin: 0;
}

.vibemap-guides-archive__more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-item);
    margin-top: var(--sp-large);
}

.vibemap-guides-archive__page {
    font-weight: var(--fw-bold);
    text-decoration: none !important;
    border: 1px solid var(--color-black);
    border-radius: 100px;
    padding: 10px 24px;
}

.vibemap-guides-archive__page--next {
    background: var(--color-black);
    color: var(--color-white) !important;
}

.vibemap-guides-archive__count {
    font-size: var(--fs-base);
    color: var(--color-grey);
}

@media (prefers-reduced-motion: reduce) {
    .vibemap-guides-archive__card-image img { transition: none; }
    .vibemap-guides-archive__card-link:hover .vibemap-guides-archive__card-image img { transform: none; }
}


/* ==========================================================================
   Minimal footer
   --------------------------------------------------------------------------
   The link columns pointed almost entirely at pages that are app-handoff stubs
   right now, so the footer is just the copyright row until those come back:
   copyright, Terms, social icons, mark. No separator and no top padding — the
   preceding section often has a solid background, and a rule floating in white
   space beneath it read as a mistake.
   ========================================================================== */

.site-footer.is-minimal {
    padding: 0;
    border-top: none;
}

.site-footer.is-minimal hr,
.site-footer.is-minimal .wp-block-separator {
    display: none;
}

.site-footer.is-minimal .footer-bottom-section {
    padding: 0;
}

.site-footer.is-minimal .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-item);
    padding: var(--sp-item) 0;
}

.site-footer.is-minimal .footer-copyright {
    margin: 0;
    font-size: var(--fs-base);
    color: var(--color-primary-dark);
}

.site-footer.is-minimal .footer-copyright a {
    color: var(--color-primary-dark);
    text-decoration: none !important;
}

.site-footer.is-minimal .footer-copyright a:hover {
    opacity: 0.7;
}

.site-footer.is-minimal .footer-social {
    display: flex;
    align-items: center;
    gap: var(--sp-text);
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.site-footer.is-minimal .footer-social li {
    margin: 0;
}

.site-footer.is-minimal .footer-social a {
    display: block;
    line-height: 0;
    color: var(--color-black);
    text-decoration: none !important;
    transition: opacity 0.18s ease;
}

.site-footer.is-minimal .footer-social a:hover,
.site-footer.is-minimal .footer-social a:focus-visible {
    opacity: 0.6;
}

.site-footer.is-minimal .footer-logo-icon {
    display: inline-block;
    line-height: 0;
}

@media (max-width: 640px) {
    .site-footer.is-minimal .footer-bottom {
        justify-content: center;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-footer.is-minimal .footer-social a { transition: none; }
}

/* Dark footer: the mark, the copyright and the social icons all invert. */
.site-footer.is-dark {
    background: var(--color-black);
}

.site-footer.is-dark .footer-copyright,
.site-footer.is-dark .footer-copyright a,
.site-footer.is-dark .footer-social a {
    color: var(--color-white) !important;
}

.site-footer.is-dark .footer-copyright a:hover,
.site-footer.is-dark .footer-social a:hover {
    opacity: 0.7;
}

/* The mark is a black glyph — invert it against the dark ground. */
.site-footer.is-dark .footer-logo-icon img {
    filter: invert(1);
}

/* --- Post cards: one design for /journal/ and /features/ ------------------- */

.vibemap-guides-archive__card {
    display: flex;
    background: var(--color-white);
    border: 1px solid var(--color-border-grey);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.vibemap-guides-archive__card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.vibemap-guides-archive__card-link {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.vibemap-guides-archive__card-image {
    margin-bottom: 0;
}

.vibemap-guides-archive__card-body {
    padding: var(--sp-text);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Three columns, as on the live site. */
.vibemap-guides-archive__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1000px) {
    .vibemap-guides-archive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .vibemap-guides-archive__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .vibemap-guides-archive__card { transition: none; }
    .vibemap-guides-archive__card:hover { transform: none; }
}

/* The last section's trailing padding sits below its own background fill, so a
   section with a solid colour left a white band between it and the footer.
   Content should run straight into the footer. */
main > section[class*="section--"]:last-child {
    padding-bottom: 0;
}

main > section[class*="section--"]:last-child > [class*="vibemap-"] {
    margin-bottom: 0;
}


/* The archive is the last thing on /journal/ and /features/, and its pagination
   ran straight into the footer. Unlike a section with a background fill, it
   needs breathing room beneath it. */
main > .vibemap-guides-archive:last-child,
main > div:last-child > .vibemap-guides-archive {
    padding-bottom: var(--sp-large);
}

/* Footer bottom row: mark left, copyright dead centre, social right.
   Three grid columns with equal outer tracks keep the copyright centred on the
   page regardless of how wide the mark or the icon row happen to be. */
.site-footer.is-minimal .footer-bottom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-content: initial;
}

.site-footer.is-minimal .footer-bottom > .footer-logo-icon {
    justify-self: start;
}

.site-footer.is-minimal .footer-bottom > .footer-copyright {
    justify-self: center;
    text-align: center;
    white-space: nowrap;
}

.site-footer.is-minimal .footer-bottom > .footer-social {
    justify-self: end;
}

@media (max-width: 640px) {
    .site-footer.is-minimal .footer-bottom {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: var(--sp-text);
    }
    .site-footer.is-minimal .footer-bottom > .footer-logo-icon,
    .site-footer.is-minimal .footer-bottom > .footer-social {
        justify-self: center;
    }
}

/* ==========================================================================
   Single post: column width and the author card
   ========================================================================== */

/* Body copy was 690px under an 850px banner, so the article read narrower than
   its own hero. `.post-content-area` is capped at 850px and carries 80px of
   side padding, leaving a 690px text box — widen the container by the padding
   so the copy itself lands at 850px and lines up with the banner above it. */
.single .entry-content,
.single .wp-block-post-content,
.single .about-author {
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 900px) {
    .post .main.container.post-content-area,
    .single .main.container.post-content-area {
        padding-left: var(--sp-item);
        padding-right: var(--sp-item);
    }
}

.single .entry-content > *,
.single .wp-block-post-content > * {
    max-width: none;
}

/* The author card sat flush against the footer. */
.single .about-author {
    margin-bottom: var(--sp-large);
}

/* ==========================================================================
   Author card
   --------------------------------------------------------------------------
   The legacy rules stacked four deep — an absolutely positioned 200px portrait
   vertically centred against a 250px min-height, with the text pushed over by a
   250px left margin, then partly undone by later overrides. The result was a
   photo floating out of line with its own name and bio.

   One grid replaces all of it: portrait left, and a text column on the right
   holding the "About the Author" eyebrow directly above the name.

   The eyebrow is placed by grid area rather than by moving it in the markup,
   because some Gatsby-era posts carry this structure baked into post_content
   and the <h4> is a sibling of the photo there too. Selectors match the legacy
   specificity (.wp-block.about-author) so they win without !important.
   ========================================================================== */

.wp-block.about-author {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    grid-template-areas:
        "photo label"
        "photo meta";
    grid-template-rows: auto 1fr;
    column-gap: var(--sp-item);
    row-gap: 2px;
    align-items: start;
    min-height: 0;
    padding-top: var(--sp-item);
}

/* Eyebrow: small, muted, tight to the name underneath it. */
.wp-block.about-author > h4 {
    grid-area: label;
    align-self: end;
    margin: 0;
    margin-left: 0;
    text-align: left;
    font-family: var(--family-sans, inherit);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-grey, #6f6f6f);
}

.wp-block.about-author .authorPhoto {
    grid-area: photo;
    align-self: start;
    position: relative;
    top: 0;
    transform: none;
    margin: 0;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    flex: none;
}

.wp-block.about-author .authorPhoto img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    display: block;
    aspect-ratio: auto;
}

.wp-block.about-author .wp-author-block-meta {
    grid-area: meta;
    margin-left: 0;
    max-width: none;
}

/* No portrait — the text takes the full width. */
.wp-block.about-author:not(.has-image) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "label"
        "meta";
    grid-template-rows: auto auto;
}

@media (max-width: 600px) {
    .wp-block.about-author {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "photo"
            "label"
            "meta";
        grid-template-rows: auto auto auto;
        row-gap: var(--sp-text);
    }

    /* Keep the eyebrow tight to the name it introduces. */
    .wp-block.about-author > h4 {
        margin-bottom: -6px;
    }
}

/* ==========================================================================
   Mobile header and menu
   --------------------------------------------------------------------------
   The black top bar has been retired; its three links now live in the main
   menu proper — Download the App! under Products, Guides & Stories under
   Resources, and Our Partners as a top-level item — so they reach the mobile
   overlay the same way everything else does.

   The overlay itself was core's default: no padding, 16px type throughout, and
   parent items rendered *shorter* (26px) than their own children (42px), so
   the hierarchy read backwards. It is rebuilt below as a full-height sheet with
   group labels, 52px rows and a Book Demo button pinned at the end.
   ========================================================================== */

@media (max-width: 899px) {
    .site-header .main-header-body {
        padding-top: 0.625rem !important;
        padding-bottom: 0.625rem !important;
    }

    /* The logo was sitting 4px from the screen edge. */
    .site-header .header-columns {
        padding-left: var(--sp-small);
        padding-right: var(--sp-small);
        align-items: center;
    }

    .site-header .header-logo img {
        width: 108px;
        height: auto;
        display: block;
    }

    /* A 24px icon is under the 44px minimum for a touch target. */
    .header-nav .wp-block-navigation__responsive-container-open {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: -8px; /* keep the icon optically aligned to the edge */
        color: var(--color-black);
    }

    .header-nav .wp-block-navigation__responsive-container-open svg {
        width: 26px;
        height: 26px;
    }
}

/* --- The open overlay -------------------------------------------------------
   Order matters here. The generic row rule is written first, then the group
   label and the button override it — both are more specific AND later, so they
   win without !important. Written the other way round (as this was at first)
   the row rule silently reset the label's size back to 18px.
   ========================================================================== */

/* The container carries an identity `transform` from core's open animation,
   which makes it the containing block for any `position: fixed` descendant. If
   it is also the scrolling element, the pinned close button scrolls away with
   the list. Scroll the inner wrapper instead: the container stays put, so a
   fixed button inside it stays put too. */
.header-nav .wp-block-navigation__responsive-container.is-menu-open {
    background-color: var(--color-white);
    padding: 0;
    overflow: hidden;
}

.header-nav .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-close {
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.header-nav .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-dialog {
    padding: 0 var(--sp-small) calc(var(--sp-large) + env(safe-area-inset-bottom, 0px));
}

/* Close button — same 44px target as the one that opened it.

   It has to be fixed, not absolute: the overlay itself is the scrolling
   element, so an absolutely positioned button scrolls up out of view with the
   list and a reader part-way down the menu has no way to close it. */
.header-nav .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close {
    position: fixed;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 10px;
    right: 12px;
    z-index: 5;
    color: var(--color-black);
    background-color: var(--color-white);
    border-radius: 50%;
}

.header-nav .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close svg {
    width: 26px;
    height: 26px;
}

.header-nav .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container {
    display: block;
    width: 100%;
    padding-top: 64px; /* clear the close button */
    gap: 0;
}

.header-nav .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container > li {
    display: block;
    width: 100%;
    margin: 0;
}

/* Everything is one scrollable list — no second tap to reveal children. */
.header-nav .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__submenu-container {
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100% !important;
    min-width: 0 !important;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
    transform: none !important;
}

/* 1. Rows — the default treatment for every entry. */
.header-nav .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container a.wp-block-navigation-item__content {
    display: block;
    width: 100%;
    padding: 15px 0;
    min-height: 52px;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-black);
    text-decoration: none !important;
    border-bottom: 1px solid var(--color-border-grey, #e8e8e8);
}

.header-nav .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container a.wp-block-navigation-item__content:active {
    color: var(--color-grey);
}

/* 2. A top-level entry that owns a submenu is a group label, not a destination.
      More specific than the row rule above, and after it. */
.header-nav .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container > li.wp-block-navigation-item.has-child
> a.wp-block-navigation-item__content {
    padding: 30px 0 6px;
    min-height: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-grey);
    border-bottom: 0;
}

.header-nav .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container > li.wp-block-navigation-item.has-child:first-child
> a.wp-block-navigation-item__content {
    padding-top: 0;
}

/* 3. The submenu toggle is a chevron button that carries both the icon and the
      toggle class. With every submenu permanently open it has nothing to do,
      and it was drawing a stray arrow under each group label. */
.header-nav .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__submenu-icon,
.header-nav .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-submenu__toggle {
    display: none !important;
}

.header-nav .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__submenu-container li:last-child
> a.wp-block-navigation-item__content {
    border-bottom: 0;
}

/* A standalone top-level link (Resources) needs the separation a group gets. */
.header-nav .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container > li.wp-block-navigation-item:not(.has-child)
> a.wp-block-navigation-item__content {
    margin-top: var(--sp-text);
    border-top: 1px solid var(--color-border-grey, #e8e8e8);
}

/* Book a demo is the one action in here — give it the site's button treatment. */
.header-nav .wp-block-navigation__responsive-container.is-menu-open
li.wp-block-navigation-item.button > a.wp-block-navigation-item__content {
    margin: var(--sp-item) 0 var(--sp-text);
    padding: 15px 28px;
    border: 0;
    border-top: 0;
    border-radius: var(--radius-pill, 999px);
    background-color: var(--color-black);
    color: var(--color-white) !important;
    text-align: center;
    font-size: 1rem;
}

/* ==========================================================================
   Desktop navigation
   --------------------------------------------------------------------------
   The theme's original nav rules target `ul.menu`, which the block navigation
   never emits — every one of them was dead, leaving core's defaults: square
   corners, a hairline border, no padding and an opacity-only transition. That
   is the flat, unstyled look.

   Rewritten against the classes the block actually renders. Everything below
   is desktop-only; the mobile overlay has its own treatment further down.
   ========================================================================== */

@media (min-width: 900px) {

    /* --- Top level ---------------------------------------------------- */

    /* `:not(.button)` matters — this selector outranks the button's own
       `0.6rem 1.4rem`, and without the exclusion it flattened the Book Demo
       pill to a 90x31 sliver. */
    .header-nav .wp-block-navigation__container > li:not(.button) > .wp-block-navigation-item__content {
        position: relative;
        padding: 6px 2px;
        transition: color 0.18s ease;
    }

    /* An underline that grows from the left rather than appearing all at once. */
    .header-nav .wp-block-navigation__container > li:not(.button) > .wp-block-navigation-item__content::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        background-image: linear-gradient(101deg, #aa6bff 0%, #3cd8ff 55%, #b4ffd9 100%);
        border-radius: 2px;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .header-nav .wp-block-navigation__container > li:not(.button):hover > .wp-block-navigation-item__content::after {
        transform: scaleX(1);
    }

    .header-nav .wp-block-navigation__container > li:not(.button):focus-within > .wp-block-navigation-item__content::after {
        transform: scaleX(1);
    }

    /* The button keeps its pill and lifts on hover instead of underlining. */
    .header-nav .wp-block-navigation__container > li.button > .wp-block-navigation-item__content {
        transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
    }

    .header-nav .wp-block-navigation__container > li.button:hover > .wp-block-navigation-item__content {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    }

    /* The chevron turns over while its menu is open. */
    .header-nav .wp-block-navigation__submenu-icon {
        transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .header-nav .wp-block-navigation__container > li.has-child:hover > .wp-block-navigation__submenu-icon,
    .header-nav .wp-block-navigation__container > li.has-child:focus-within > .wp-block-navigation__submenu-icon {
        transform: rotate(180deg);
    }

    /* --- The panel ------------------------------------------------------ */

    .header-nav .wp-block-navigation__submenu-container {
        top: calc(100% + 10px);
        /* Core pins this at 200px from a 0-5-0 selector, which is exactly
           narrow enough to wrap "Download the App!" onto a second line. */
        min-width: 262px !important;
        /* The theme's own list reset (`nav.header-nav ul, ...`) zeroes padding
           with !important, so this has to answer in kind. */
        padding: 8px !important;
        border: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: 14px;
        background-color: var(--color-white);
        box-shadow:
            0 1px 2px rgba(0, 0, 0, 0.04),
            0 12px 32px -8px rgba(0, 0, 0, 0.18);
        /* Core animates opacity only. Add the lift, and keep visibility on a
           zero-duration delay so the panel is not clickable while fading. */
        transform: translateY(-6px);
        transition:
            opacity 0.18s ease,
            transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
            visibility 0s linear 0.18s;
    }

    .header-nav .wp-block-navigation__container > li.has-child:hover > .wp-block-navigation__submenu-container,
    .header-nav .wp-block-navigation__container > li.has-child:focus-within > .wp-block-navigation__submenu-container,
    .header-nav .wp-block-navigation__submenu-container:hover,
    .header-nav .wp-block-navigation__submenu-container:focus-within {
        transform: translateY(0);
        transition:
            opacity 0.18s ease,
            transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
            visibility 0s;
    }

    /* Bridges the gap between the trigger and the panel so the pointer can
       travel down without the menu closing under it. */
    .header-nav .wp-block-navigation__container > li.has-child::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: 18px;
    }

    /* --- Items in the panel --------------------------------------------- */

    .header-nav .has-child .wp-block-navigation__submenu-container > li.wp-block-navigation-item > .wp-block-navigation-item__content {
        display: block;
        padding: 11px 14px;
        border-radius: 10px;
        font-size: 0.9375rem;
        font-weight: 500;
        line-height: 1.35;
        color: var(--color-black);
        transition:
            background-color 0.16s ease,
            transform 0.16s ease,
            color 0.16s ease;
    }

    .header-nav .has-child .wp-block-navigation__submenu-container > li.wp-block-navigation-item > .wp-block-navigation-item__content:hover {
        background-color: rgba(170, 107, 255, 0.12);
        color: var(--color-black);
        opacity: 1;
        transform: translateX(2px);
    }

    .header-nav .has-child .wp-block-navigation__submenu-container > li.wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible {
        background-color: rgba(170, 107, 255, 0.12);
        color: var(--color-black);
        opacity: 1;
        transform: translateX(2px);
    }

    .header-nav .has-child .wp-block-navigation__submenu-container > li.wp-block-navigation-item > .wp-block-navigation-item__content::after {
        display: none; /* the underline belongs to the top level only */
    }

    /* --- The one item that is an action, not a destination -------------- */

    .header-nav .wp-block-navigation__submenu-container > li.vm-nav-feature {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid rgba(0, 0, 0, 0.07);
    }

    .header-nav .has-child .wp-block-navigation__submenu-container > li.vm-nav-feature > .wp-block-navigation-item__content {
        position: relative;
        padding-left: 42px;
        font-weight: 700;
        color: var(--color-black);
        background-image: linear-gradient(101deg, rgba(170, 107, 255, 0.20) 0%, rgba(60, 216, 255, 0.20) 100%);
    }

    .header-nav .has-child .wp-block-navigation__submenu-container > li.vm-nav-feature > .wp-block-navigation-item__content:hover {
        background-image: linear-gradient(101deg, rgba(170, 107, 255, 0.34) 0%, rgba(60, 216, 255, 0.34) 100%);
        transform: none; /* the mark scales instead of the row sliding */
    }

    /* The V mark, so the row reads as the app rather than another link. */
    .header-nav .has-child .wp-block-navigation__submenu-container > li.vm-nav-feature > .wp-block-navigation-item__content::before {
        content: '';
        position: absolute;
        left: 12px;
        top: 50%;
        width: 20px;
        height: 20px;
        transform: translateY(-50%);
        background: url('../images/logoIcon.svg') no-repeat center / contain;
        transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .header-nav .has-child .wp-block-navigation__submenu-container > li.vm-nav-feature > .wp-block-navigation-item__content:hover::before {
        transform: translateY(-50%) scale(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-nav .wp-block-navigation__submenu-container,
    .header-nav .wp-block-navigation__submenu-icon,
    .header-nav .wp-block-navigation-item__content,
    .header-nav .wp-block-navigation-item__content::after,
    .header-nav .wp-block-navigation-item__content::before {
        transition-duration: 0s !important;
        transform: none !important;
    }
}