/* =============================================================================
   Baseline components
   Core blocks styled to the Untuck Wireframe Kit. Colours, sizes and shadows
   come from theme.json presets. Sizes follow the font-size picker:
   Display 1 = small, Display 2 = default, Display 3 = large.
   ============================================================================= */

:root {
    --baseline-icon-arrow: url("data:image/svg+xml,%3Csvg%20width%3D%2211.5499%22%20height%3D%2211.3615%22%20viewBox%3D%220%200%2011.5499%2011.3615%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cg%3E%0A%3Cpath%20d%3D%22M5.64034%200.875001L10.6749%205.68075L5.64034%2010.4865%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M10.6749%205.68075L0.875%205.68075%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E");
    --baseline-icon-search: url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cg%3E%0A%3Cpath%20d%3D%22M12.95%2012.95L9.87241%209.87241M1.05%206.17931C1.05%203.34647%203.34647%201.05%206.17931%201.05C9.01217%201.05%2011.3086%203.34647%2011.3086%206.17931C11.3086%209.01217%209.01217%2011.3086%206.17931%2011.3086C3.34647%2011.3086%201.05%209.01217%201.05%206.17931Z%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E");
    --baseline-icon-home: url("data:image/svg+xml,%3Csvg%20width%3D%2210.175%22%20height%3D%2210.175%22%20viewBox%3D%220%200%2010.175%2010.175%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cg%3E%0A%3Cpath%20d%3D%22M1.70216%209.7625H8.47284C9.18512%209.7625%209.7625%209.18512%209.7625%208.47284V3.63665L5.08749%200.4125L0.4125%203.63665V8.47284C0.4125%209.18512%200.989906%209.7625%201.70216%209.7625Z%22%20stroke%3D%22%23000%22%20stroke-width%3D%220.825%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M3.63626%207.50502C3.63626%206.79274%204.21369%206.21536%204.9259%206.21536H5.24832C5.9606%206.21536%206.53798%206.79274%206.53798%207.50502V9.76192H3.63626V7.50502Z%22%20stroke%3D%22%23000%22%20stroke-width%3D%220.825%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E");
    --baseline-shadow-control: 0 1px 2px 0 rgba(25, 33, 61, 0.08);
    --baseline-hatch: repeating-linear-gradient(135deg, transparent 0 10px, var(--wp--preset--color--gray-020) 10px 11px);
}

/* --- Buttons --------------------------------------------------------------- */

.wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25em;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.wp-block-button__link:focus-visible {
    outline: 2px solid var(--wp--preset--color--gray-090);
    outline-offset: 2px;
}

/* One height per size for every variant: 42px small, 48px default, 58px large.
   Core's outline style uses em padding at higher specificity, so it is restated here
   with the 1px border taken out of the padding. */
.wp-block-button.is-style-outline > .wp-block-button__link {
    padding: 13px 17px;
    border-width: 1px;
}
.wp-block-button.is-style-outline > .wp-block-button__link.has-display-1-font-size {
    padding: 11px;
}
.wp-block-button.is-style-outline > .wp-block-button__link.has-display-3-font-size {
    padding: 17px 21px;
}

/* Sizes from the font-size preset on the button. */
.wp-block-button__link.has-display-1-font-size {
    padding: 12px;
    border-radius: 4px;
    line-height: 1.5;
}
.wp-block-button__link.has-display-3-font-size {
    padding: 18px 22px;
    border-radius: 8px;
    line-height: 1.375;
}

/* Icons. Add the class in Advanced > Additional CSS class(es). */
.wp-block-button.has-arrow .wp-block-button__link::after,
.wp-block-button.has-icon-search .wp-block-button__link::before,
.wp-block-button.has-icon-home .wp-block-button__link::before {
    content: "";
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    flex: none;
    background-color: currentColor;
    -webkit-mask: var(--baseline-icon) center / contain no-repeat;
    mask: var(--baseline-icon) center / contain no-repeat;
}
.wp-block-button.has-arrow .wp-block-button__link::after { --baseline-icon: var(--baseline-icon-arrow); }
.wp-block-button.has-icon-search .wp-block-button__link::before { --baseline-icon: var(--baseline-icon-search); }
.wp-block-button.has-icon-home .wp-block-button__link::before { --baseline-icon: var(--baseline-icon-home); }

/* Square buttons: icon-only or a single character (Extra Bold). */
.wp-block-button.is-square .wp-block-button__link,
.wp-block-button.is-square.is-style-outline > .wp-block-button__link {
    width: 34px;
    height: 34px;
    padding: 0;
    font-weight: 800;
}
.wp-block-button.is-square .wp-block-button__link.has-display-1-font-size,
.wp-block-button.is-square.is-style-outline > .wp-block-button__link.has-display-1-font-size { width: 24px; height: 24px; padding: 0; }
.wp-block-button.is-square .wp-block-button__link.has-display-3-font-size,
.wp-block-button.is-square.is-style-outline > .wp-block-button__link.has-display-3-font-size { width: 40px; height: 40px; padding: 0; }
.wp-block-button.is-square.has-arrow .wp-block-button__link::after,
.wp-block-button.is-square.has-icon-search .wp-block-button__link::before,
.wp-block-button.is-square.has-icon-home .wp-block-button__link::before {
    width: 1em;
    height: 1em;
}

/* Link style: a text link with the button's icon and size controls. */
.wp-block-button.is-style-link .wp-block-button__link,
.wp-block-button.is-style-link > .wp-block-button__link {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--wp--preset--color--gray-070);
    gap: 0.35em;
}
.wp-block-button.is-style-link .wp-block-button__link:hover {
    color: var(--wp--preset--color--gray-090);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* Inverse: any button inside a dark group flips to the kit's "White" colour. */
:is(.has-gray-080-background-color, .has-gray-090-background-color, .has-black-background-color) .wp-block-button:not(.is-style-outline):not(.is-style-link) .wp-block-button__link {
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--gray-070);
}
:is(.has-gray-080-background-color, .has-gray-090-background-color, .has-black-background-color) .wp-block-button:not(.is-style-outline):not(.is-style-link) .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--gray-010);
    color: var(--wp--preset--color--gray-090);
}
:is(.has-gray-080-background-color, .has-gray-090-background-color, .has-black-background-color) .wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent;
    border-color: var(--wp--preset--color--gray-050);
    color: var(--wp--preset--color--white);
}
:is(.has-gray-080-background-color, .has-gray-090-background-color, .has-black-background-color) .wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
:is(.has-gray-080-background-color, .has-gray-090-background-color, .has-black-background-color) .wp-block-button.is-style-link .wp-block-button__link {
    color: var(--wp--preset--color--white);
}
:is(.has-gray-080-background-color, .has-gray-090-background-color, .has-black-background-color) .wp-block-button__link:focus-visible {
    outline-color: var(--wp--preset--color--white);
}

/* --- Inputs ---------------------------------------------------------------- */

.baseline-form,
.wp-block-search,
.wp-block-post-comments-form,
.comment-form {
    --baseline-input-font: var(--wp--preset--font-size--display-2);
    --baseline-input-line: 1.43;
    --baseline-input-pad-y: 18px;
    --baseline-input-pad-x: 16px;
    --baseline-input-radius: 6px;
}
.is-small {
    --baseline-input-font: var(--wp--preset--font-size--display-1);
    --baseline-input-line: 1.5;
    --baseline-input-pad-y: 14px;
    --baseline-input-pad-x: 12px;
}

/* Every control, and the buttons forms plugins print, use the site font. */
input, textarea, select, button, optgroup, option {
    font-family: inherit;
}
input:where([type="submit"], [type="button"], [type="reset"]),
button {
    font: inherit;
}

input:where([type="text"], [type="email"], [type="url"], [type="search"], [type="password"], [type="tel"], [type="number"], [type="date"], [type="datetime-local"], [type="month"], [type="week"], [type="time"], [type="file"]),
textarea,
select {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    font: inherit;
    font-size: var(--baseline-input-font, var(--wp--preset--font-size--display-2));
    line-height: var(--baseline-input-line, 1.43);
    color: var(--wp--preset--color--gray-090);
    background-color: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--gray-030);
    border-radius: var(--baseline-input-radius, 6px);
    padding: var(--baseline-input-pad-y, 18px) var(--baseline-input-pad-x, 16px);
    box-shadow: var(--baseline-shadow-control);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    appearance: none;
}
::placeholder {
    color: var(--wp--preset--color--gray-070);
    opacity: 1;
}
:is(input, textarea, select):hover {
    border-color: var(--wp--preset--color--gray-060);
}
:is(input, textarea, select):focus-visible {
    outline: none;
    border-color: var(--wp--preset--color--gray-080);
    box-shadow: var(--baseline-shadow-control), 0 0 0 3px var(--wp--preset--color--gray-020);
}
textarea {
    min-height: 92px;
    resize: vertical;
}
.is-small textarea { min-height: 80px; }

/* Line variant: bottom border only. */
.is-line :is(input, textarea, select),
.is-line.wp-block-search .wp-block-search__inside-wrapper {
    background: transparent;
    border-width: 0 0 1px;
    border-color: var(--wp--preset--color--gray-040);
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
    box-shadow: none;
}
.is-line :is(input, textarea, select):hover,
.is-line :is(input, textarea, select):focus-visible {
    border-color: var(--wp--preset--color--gray-060);
    box-shadow: none;
}

/* Field: label above control. */
.baseline-field {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--8);
}
.baseline-field > span,
.baseline-form label {
    font-size: var(--wp--preset--font-size--display-2);
    line-height: 1.43;
    font-weight: 600;
    color: var(--wp--preset--color--gray-080);
}
.baseline-field.has-icon {
    position: relative;
}
.baseline-field.has-icon input {
    padding-left: calc(var(--baseline-input-pad-x, 16px) * 2 + 0.85em);
}
.baseline-field.has-icon::after {
    content: "";
    position: absolute;
    left: var(--baseline-input-pad-x, 16px);
    bottom: calc(var(--baseline-input-pad-y, 18px) + 0.35em);
    width: 0.85em;
    height: 0.85em;
    background-color: var(--wp--preset--color--gray-070);
    -webkit-mask: var(--baseline-icon-search) center / contain no-repeat;
    mask: var(--baseline-icon-search) center / contain no-repeat;
    pointer-events: none;
}

/* Prefix box ("https://"). */
.baseline-field.has-prefix .baseline-input-group {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--wp--preset--color--gray-030);
    border-radius: var(--baseline-input-radius, 6px);
    background: var(--wp--preset--color--white);
    box-shadow: var(--baseline-shadow-control);
    overflow: hidden;
}
.baseline-field.has-prefix .baseline-input-group:focus-within {
    border-color: var(--wp--preset--color--gray-080);
}
.baseline-field.has-prefix .baseline-input-prefix {
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: var(--wp--preset--color--gray-020);
    color: var(--wp--preset--color--gray-070);
    font-size: var(--baseline-input-font, var(--wp--preset--font-size--display-2));
    font-weight: 600;
    white-space: nowrap;
}
.baseline-field.has-prefix input,
.is-line .baseline-field.has-prefix input {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding-left: var(--baseline-input-pad-x, 16px);
    padding-right: var(--baseline-input-pad-x, 16px);
}
.is-line .baseline-field.has-prefix .baseline-input-group {
    border-width: 0 0 1px;
    border-color: var(--wp--preset--color--gray-040);
    border-radius: 0;
    box-shadow: none;
}

/* Search block = the kit's "Button" input mode. */
.wp-block-search__button-inside .wp-block-search__inside-wrapper {
    border: 1px solid var(--wp--preset--color--gray-030);
    border-radius: 8px;
    background: var(--wp--preset--color--white);
    box-shadow: var(--baseline-shadow-control);
    padding: 8px 8px 8px 18px;
    gap: 8px;
    transition: border-color 0.15s ease;
}
.wp-block-search__button-inside .wp-block-search__inside-wrapper:hover,
.wp-block-search__button-inside .wp-block-search__inside-wrapper:focus-within {
    border-color: var(--wp--preset--color--gray-060);
}
.wp-block-search__button-inside .wp-block-search__input {
    border: 0;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
}
.wp-block-search__button-inside .wp-block-search__input:focus-visible {
    box-shadow: none;
}
.wp-block-search__button {
    margin: 0;
    padding: 12px;
    font-size: var(--wp--preset--font-size--display-1);
    line-height: 1.5;
    font-weight: 600;
    border-radius: 4px;
    border: 0;
    background: var(--wp--preset--color--gray-080);
    color: var(--wp--preset--color--white);
    box-shadow: var(--baseline-shadow-control);
    cursor: pointer;
}
.wp-block-search__button:hover {
    background: var(--wp--preset--color--gray-090);
}
.wp-block-search__label {
    font-size: var(--wp--preset--font-size--display-2);
    font-weight: 600;
    color: var(--wp--preset--color--gray-080);
}

/* --- Avatars (core/image block styles) ------------------------------------- */

.wp-block-image.is-style-avatar img,
.wp-block-image.is-style-avatar-circle img {
    aspect-ratio: 1;
    object-fit: cover;
    background-color: var(--wp--preset--color--gray-030);
}
.wp-block-image.is-style-avatar img { border-radius: 12.5%; }
/* Avatar tile: a square card image showing a modest silhouette until a headshot replaces it. */
.wp-block-image.is-style-avatar-tile img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: 30%; box-sizing: border-box; background: var(--wp--preset--color--gray-030); }
.wp-block-image.is-style-avatar-circle img { border-radius: 50%; }

.wp-block-image.has-notification {
    position: relative;
    width: fit-content;
}
.wp-block-image.has-notification::after {
    content: "";
    position: absolute;
    top: -8%;
    right: -8%;
    width: 22%;
    height: 22%;
    min-width: 6px;
    min-height: 6px;
    border-radius: 50%;
    background: var(--wp--preset--color--black);
    box-shadow: 0 0 0 1px var(--wp--preset--color--white);
}
.wp-block-image.is-style-avatar-circle.has-notification::after {
    top: auto;
    bottom: 2%;
    right: -2%;
}

/* Icon tile (core/image block style): any small SVG becomes a kit square icon. */
.wp-block-image.is-style-icon-square {
    width: 40px;
}
.wp-block-image.is-style-icon-square img {
    width: 40px;
    height: 40px;
    padding: 9px;
    object-fit: contain;
    border: 1px solid var(--wp--preset--color--gray-030);
    border-radius: 6px;
    background-color: var(--wp--preset--color--gray-010);
    background-image: var(--baseline-hatch);
    box-shadow: var(--wp--preset--shadow--shadow-02);
}

/* --- Social links: kit square icons by default --------------------------- */

.wp-block-social-links:not([class*="icon-size"]) {
    font-size: 14px;
}
.wp-block-social-links:not(.is-style-logos-only) .wp-block-social-link.wp-social-link {
    background-color: var(--wp--preset--color--gray-070);
    color: var(--wp--preset--color--white);
    border-radius: 4px;
}
.wp-block-social-links:not(.is-style-logos-only) .wp-block-social-link.wp-social-link:hover {
    background-color: var(--wp--preset--color--gray-090);
    transform: none;
}
.wp-block-social-links .wp-social-link .wp-block-social-link-anchor {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 5px;
    line-height: 0;
}
.wp-block-social-links .wp-social-link .wp-block-social-link-anchor svg {
    width: 1em;
    height: 1em;
    display: block;
}
.wp-block-social-links.is-style-logos-only .wp-block-social-link.wp-social-link {
    color: var(--wp--preset--color--gray-070);
}

/* --- Logo ------------------------------------------------------------------ */

.baseline-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--wp--preset--spacing--8);
    text-decoration: none;
}
.baseline-logo img {
    width: 22px;
    height: 22px;
}
.baseline-logo .wp-block-site-title,
.baseline-logo .wp-block-site-title a {
    font-size: var(--wp--preset--font-size--display-5);
    font-weight: 800;
    line-height: 1.4;
    color: var(--wp--preset--color--gray-070);
    text-decoration: none;
}
:is(.has-gray-080-background-color, .has-gray-090-background-color, .has-black-background-color) .baseline-logo .wp-block-site-title a {
    color: var(--wp--preset--color--white);
}

/* --- Profile (Extras) ----------------------------------------------------- */

.baseline-profile {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--12);
}
.baseline-profile .wp-block-image { margin: 0; }
.baseline-profile .wp-block-image img { width: 40px; height: 40px; }
.baseline-profile.is-small .wp-block-image img { width: 30px; height: 30px; }
.baseline-profile__name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--wp--preset--font-size--display-4);
    font-weight: 600;
    line-height: 1.333;
    color: var(--wp--preset--color--gray-070);
}
.baseline-profile__name img { width: 20px; height: 20px; }

/* --- Accordion (core/details) ---------------------------------------------- */

.wp-block-details {
    border-radius: 6px;
}
.wp-block-details > summary {
    position: relative;
    padding-right: 2.5em;
    list-style: none;
    cursor: pointer;
    font-weight: 600;
}
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary::after {
    content: "";
    position: absolute;
    right: 0.25em;
    top: 50%;
    width: 1em;
    height: 1em;
    transform: translateY(-50%);
    background:
        linear-gradient(currentColor, currentColor) center / 0.75em 2px no-repeat,
        linear-gradient(currentColor, currentColor) center / 2px 0.75em no-repeat;
    transition: transform 0.2s ease;
}
.wp-block-details[open] > summary::after {
    transform: translateY(-50%) rotate(45deg);
}
.wp-block-details > summary:focus-visible {
    outline: 2px solid var(--wp--preset--color--gray-090);
    outline-offset: 2px;
    border-radius: 4px;
}
.wp-block-details > :not(summary) {
    margin-block-start: var(--wp--custom--rhythm--unit);
}

/* --- Sections stack flush ------------------------------------------------- */

body :where(.is-layout-flow, .is-layout-constrained) > .baseline-section + .baseline-section {
    margin-block-start: 0;
}
.wp-site-blocks > * {
    margin-block-start: 0;
}

/* --- Dark sections: text-level elements inherit the white text ------------- */

:is(.has-gray-080-background-color, .has-gray-090-background-color, .has-black-background-color) :where(a:not(.wp-element-button), h1, h2, h3, h4, h5, h6, figcaption, cite, li::marker) {
    color: inherit;
}
:is(.has-gray-080-background-color, .has-gray-090-background-color, .has-black-background-color) :where(a:not(.wp-element-button)):hover {
    color: var(--wp--preset--color--gray-030);
}
:is(.has-gray-080-background-color, .has-gray-090-background-color, .has-black-background-color) .wp-block-separator {
    color: var(--wp--preset--color--gray-070);
}

/* --- Video placeholder + play button (kit: 96px circle) -------------------- */

.wp-block-button.is-play .wp-block-button__link {
    width: 96px;
    height: 96px;
    padding: 0;
    border-radius: 50%;
    background-color: var(--wp--preset--color--gray-090);
    box-shadow: var(--wp--preset--shadow--shadow-04);
}
.wp-block-button.is-play .wp-block-button__link::after {
    content: "";
    width: 0;
    height: 0;
    margin-left: 6px;
    border-style: solid;
    border-width: 14px 0 14px 24px;
    border-color: transparent transparent transparent currentColor;
}
.wp-block-button.is-play .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--black);
}
.baseline-video .wp-block-cover__image-background {
    border-radius: inherit;
}

/* --- Interactive: slider ---------------------------------------------------- */

.baseline-slider__track {
    display: grid;
}
.baseline-slider__track > .baseline-slider__slide {
    grid-area: 1 / 1;
    margin: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.baseline-slider__track > .baseline-slider__slide:not(.is-active) {
    opacity: 0;
    visibility: hidden;
}

/* Left-pointing arrow for previous buttons. */
.wp-block-button.has-arrow-left .wp-block-button__link::before {
    content: "";
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    flex: none;
    background-color: currentColor;
    -webkit-mask: var(--baseline-icon-arrow) center / contain no-repeat;
    mask: var(--baseline-icon-arrow) center / contain no-repeat;
    transform: scaleX(-1);
}
.wp-block-button.is-square.has-arrow-left .wp-block-button__link::before {
    width: 1em;
    height: 1em;
}

/* --- Interactive: tabs ------------------------------------------------------ */

.baseline-tabs__tab {
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.baseline-tabs__tab:hover {
    border-color: var(--wp--preset--color--gray-060) !important;
}
.baseline-tabs__tab.is-selected {
    border-color: var(--wp--preset--color--gray-080) !important;
}
.baseline-tabs__tab:focus-visible {
    outline: 2px solid var(--wp--preset--color--gray-090);
    outline-offset: 2px;
}
.baseline-tabs__panel[hidden] {
    display: none;
}
.baseline-tabs__panels > .baseline-tabs__panel {
    margin: 0;
}
@media (prefers-reduced-motion: no-preference) {
    .baseline-tabs__panel {
        animation: baseline-fade-in 0.25s ease;
    }
}
@keyframes baseline-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

/* --- Interactive: filter ---------------------------------------------------- */

.baseline-filter__pill .wp-block-button__link {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.baseline-filter__pill.is-active .wp-block-button__link {
    background-color: var(--wp--preset--color--gray-080);
    border-color: var(--wp--preset--color--gray-080);
    color: var(--wp--preset--color--white);
}
.baseline-filter__item {
    transition: opacity 0.3s ease, transform 0.3s ease, display 0.3s allow-discrete;
}
.baseline-filter__item.is-filtered-out {
    display: none;
    opacity: 0;
    transform: scale(0.96);
}
@starting-style {
    .baseline-filter__item {
        opacity: 0;
        transform: scale(0.96);
    }
}

/* --- Interactive: toggle (dropdown panel) --------------------------------- */

.baseline-toggle {
    position: relative;
}
.baseline-toggle__panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    left: 0;
    min-width: 100%;
}
.baseline-toggle__panel[hidden] {
    display: none;
}
@media (prefers-reduced-motion: no-preference) {
    .baseline-toggle__panel {
        animation: baseline-fade-in 0.15s ease;
    }
}
.baseline-toggle__button.is-open .wp-block-button__link::after,
.baseline-toggle .wp-block-button__link[aria-expanded="true"]::after {
    transform: rotate(90deg);
}
.baseline-toggle .wp-block-button__link::after {
    transition: transform 0.15s ease;
}

/* --- Interactive: search over a Query Loop --------------------------------- */

.baseline-search [data-wp-router-region] {
    transition: opacity 0.2s ease;
}
.baseline-search.is-loading [data-wp-router-region] {
    opacity: 0.5;
}
@media (prefers-reduced-motion: no-preference) {
    .baseline-search .wp-block-post {
        animation: baseline-fade-in 0.3s ease both;
    }
    .baseline-search .wp-block-post:nth-child(2) { animation-delay: 0.05s; }
    .baseline-search .wp-block-post:nth-child(3) { animation-delay: 0.1s; }
    .baseline-search .wp-block-post:nth-child(4) { animation-delay: 0.15s; }
    .baseline-search .wp-block-post:nth-child(5) { animation-delay: 0.2s; }
    .baseline-search .wp-block-post:nth-child(6) { animation-delay: 0.25s; }
}
.baseline-search__cat.is-active .wp-block-button__link {
    background-color: var(--wp--preset--color--gray-080);
    border-color: var(--wp--preset--color--gray-080);
    color: var(--wp--preset--color--white);
}

/* Post cards built from Query Loop blocks. */
.baseline-post-card .wp-block-post-terms a,
.wp-block-post-terms.baseline-post-card a {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--wp--preset--color--gray-040);
    border-radius: 4px;
    background: var(--wp--preset--color--gray-020);
    color: var(--wp--preset--color--gray-070);
    font-size: var(--wp--preset--font-size--display-1);
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
}
.baseline-post-card .wp-block-post-terms__separator,
.wp-block-post-terms.baseline-post-card .wp-block-post-terms__separator { display: none; }
.baseline-post-card .wp-block-post-featured-image img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    width: 100%;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.baseline-post-card .wp-block-post-title a { text-decoration: none; }
.baseline-post-card .wp-block-post-title a:hover { text-decoration: underline; }
.wp-block-read-more.has-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-weight: 600;
    color: var(--wp--preset--color--gray-070);
    text-decoration: none;
}
.wp-block-read-more.has-arrow::after {
    content: "";
    width: 0.85em;
    height: 0.85em;
    background-color: currentColor;
    -webkit-mask: var(--baseline-icon-arrow) center / contain no-repeat;
    mask: var(--baseline-icon-arrow) center / contain no-repeat;
}
.wp-block-read-more.has-arrow:hover { color: var(--wp--preset--color--gray-090); text-decoration: underline; }

/* Categories block as filter pills inside a live search. */
.baseline-search__pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wp--preset--spacing--16);
}
.baseline-search .wp-block-categories {
    display: contents;
    list-style: none;
    padding: 0;
    margin: 0;
}
.baseline-search .wp-block-categories li {
    margin: 0;
}
.baseline-search .wp-block-categories a {
    display: inline-flex;
    align-items: center;
    padding: 13px 17px;
    border: 1px solid var(--wp--preset--color--gray-040);
    border-radius: 6px;
    background: var(--wp--preset--color--gray-020);
    color: var(--wp--preset--color--gray-070);
    font-size: var(--wp--preset--font-size--display-2);
    font-weight: 600;
    line-height: 1.43;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.baseline-search .wp-block-categories a:hover {
    background: var(--wp--preset--color--gray-030);
    color: var(--wp--preset--color--gray-090);
}
.baseline-search .wp-block-categories li.is-active a {
    background: var(--wp--preset--color--gray-080);
    border-color: var(--wp--preset--color--gray-080);
    color: var(--wp--preset--color--white);
}
.baseline-search .wp-block-categories a:focus-visible {
    outline: 2px solid var(--wp--preset--color--gray-090);
    outline-offset: 2px;
}

/* Single post meta. */
.wp-block-post-author.baseline-profile { gap: var(--wp--preset--spacing--12); }
.wp-block-post-author.baseline-profile .wp-block-post-author__avatar img { border-radius: 50%; width: 48px; height: 48px; }
.wp-block-post-author.baseline-profile .wp-block-post-author__name { font-weight: 600; }
.wp-block-post-terms.baseline-post-card { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--8); }

/* Comments. */
.baseline-comments .wp-block-post-comments-form label { display: block; margin-bottom: var(--wp--preset--spacing--8); font-size: var(--wp--preset--font-size--display-2); font-weight: 600; color: var(--wp--preset--color--gray-080); }
.baseline-comments .wp-block-post-comments-form .comment-form > p { margin-block-start: var(--wp--preset--spacing--24); }
.baseline-comments .wp-block-post-comments-form .form-submit .submit { padding: 14px 18px; border: 0; border-radius: 6px; background: var(--wp--preset--color--gray-080); color: var(--wp--preset--color--white); font: inherit; font-size: var(--wp--preset--font-size--display-2); font-weight: 600; cursor: pointer; }
.baseline-comments .wp-block-post-comments-form .form-submit .submit:hover { background: var(--wp--preset--color--gray-090); }
.baseline-comments .wp-block-comment-reply-link a { font-weight: 600; color: var(--wp--preset--color--gray-070); }
.baseline-comments .comment-form-cookies-consent { display: flex; gap: var(--wp--preset--spacing--8); align-items: center; }
.baseline-comments .comment-form-cookies-consent label { margin: 0; font-weight: 400; }

/* Link-style filter pills show the active state with weight, not a box. */
.baseline-filter__pill.is-style-link.is-active .wp-block-button__link {
    background: none;
    border: 0;
    color: var(--wp--preset--color--gray-090);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* --- Pagination ------------------------------------------------------------ */

.wp-block-query-pagination {
    gap: var(--wp--preset--spacing--8);
    font-size: var(--wp--preset--font-size--display-2);
    font-weight: 600;
}
.wp-block-query-pagination-numbers {
    display: flex;
    gap: var(--wp--preset--spacing--8);
}
.wp-block-query-pagination-numbers .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--wp--preset--color--gray-040);
    border-radius: 6px;
    background: var(--wp--preset--color--gray-020);
    color: var(--wp--preset--color--gray-070);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.wp-block-query-pagination-numbers .page-numbers:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
    background: var(--wp--preset--color--gray-030);
    color: var(--wp--preset--color--gray-090);
}
.wp-block-query-pagination-numbers .page-numbers.current {
    background: var(--wp--preset--color--gray-080);
    border-color: var(--wp--preset--color--gray-080);
    color: var(--wp--preset--color--white);
}
.wp-block-query-pagination-numbers .page-numbers.dots {
    border: 0;
    background: none;
    min-width: 24px;
    padding: 0;
}
.wp-block-query-pagination-previous-arrow,
.wp-block-query-pagination-next-arrow {
    display: none;
}
.wp-block-query-pagination-previous::before,
.wp-block-query-pagination-next::after {
    content: "";
    width: 0.85em;
    height: 0.85em;
    flex: none;
    background-color: currentColor;
    -webkit-mask: var(--baseline-icon-arrow) center / contain no-repeat;
    mask: var(--baseline-icon-arrow) center / contain no-repeat;
}
.wp-block-query-pagination-previous::before { transform: scaleX(-1); margin-right: 0.35em; }
.wp-block-query-pagination-next::after { margin-left: 0.35em; }
.wp-block-query-pagination a:focus-visible {
    outline: 2px solid var(--wp--preset--color--gray-090);
    outline-offset: 2px;
}

/* Load more style: one centred button that appends the next page. */
.wp-block-query.is-style-load-more .wp-block-query-pagination {
    justify-content: center;
}
.wp-block-query.is-style-load-more .wp-block-query-pagination-previous,
.wp-block-query.is-style-load-more .wp-block-query-pagination-numbers {
    display: none;
}
.wp-block-query.is-style-load-more .wp-block-query-pagination-next {
    height: auto;
    padding: 14px 22px;
}
.wp-block-query.is-style-load-more .wp-block-query-pagination-next::after {
    transform: rotate(90deg);
}
.wp-block-query.is-style-load-more .wp-block-query-pagination-next.is-loading {
    opacity: 0.6;
    pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
    .wp-block-post-template > .is-new {
        animation: baseline-fade-in 0.4s ease both;
    }
}

/* --- Editor view of interactive sections -----------------------------------
   The canvas shows the selected slide or tab panel (or the first one when nothing
   inside is selected). The toolbar's Previous / Next buttons (assets/js/editor.js)
   move between them. */

.editor-styles-wrapper .baseline-slider__track,
.editor-styles-wrapper .baseline-tabs__panels {
    display: block;
    counter-reset: baseline-item;
}
.editor-styles-wrapper .baseline-slider__track > .baseline-slider__slide,
.editor-styles-wrapper .baseline-tabs__panels > .baseline-tabs__panel {
    position: relative;
    display: none;
    opacity: 1;
    visibility: visible;
    margin: 0;
    counter-increment: baseline-item;
}
/* Which one shows: the selected one, else the remembered one, else the first. */
.editor-styles-wrapper :is(.baseline-slider__track, .baseline-tabs__panels):has(> :is(.is-selected, .has-child-selected)) > :is(.is-selected, .has-child-selected),
.editor-styles-wrapper :is(.baseline-slider__track, .baseline-tabs__panels):not(:has(> :is(.is-selected, .has-child-selected))):has(> [data-baseline-current]) > [data-baseline-current],
.editor-styles-wrapper :is(.baseline-slider__track, .baseline-tabs__panels):not(:has(> :is(.is-selected, .has-child-selected))):not(:has(> [data-baseline-current])) > :is(.baseline-slider__slide, .baseline-tabs__panel):first-child {
    display: block;
}
.editor-styles-wrapper .baseline-slider__track > .baseline-slider__slide::before,
.editor-styles-wrapper .baseline-tabs__panels > .baseline-tabs__panel::before {
    content: "Slide " counter(baseline-item);
    position: absolute;
    top: -1.5rem;
    left: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--gray-070);
    pointer-events: none;
}
.editor-styles-wrapper .baseline-tabs__panels > .baseline-tabs__panel::before {
    content: "Tab panel " counter(baseline-item);
}
.editor-styles-wrapper .baseline-tabs__panel[hidden] {
    display: revert-layer;
}
.editor-styles-wrapper .baseline-filter__item.is-filtered-out {
    display: block;
    opacity: 1;
    transform: none;
}

/* --- Navigation overlay (hamburger) --------------------------------------- */

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--wp--preset--color--gray-040);
    border-radius: 6px;
    background: var(--wp--preset--color--gray-020);
    color: var(--wp--preset--color--gray-090);
    cursor: pointer;
}
.wp-block-navigation__responsive-container-open:focus-visible,
.wp-block-navigation__responsive-container-close:focus-visible {
    outline: 2px solid var(--wp--preset--color--gray-090);
    outline-offset: 2px;
}
.wp-block-navigation__responsive-container.is-menu-open {
    background: var(--wp--preset--color--white);
    color: var(--wp--preset--color--gray-090);
    padding: var(--wp--preset--spacing--24);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    padding-left: var(--wp--preset--spacing--16);
}
:is(.has-gray-080-background-color, .has-gray-090-background-color, .has-black-background-color) .wp-block-navigation__responsive-container-open {
    background: transparent;
    border-color: var(--wp--preset--color--gray-050);
    color: var(--wp--preset--color--white);
}

/* --- Search dialog --------------------------------------------------------- */

.baseline-search-dialog {
    width: min(40rem, calc(100vw - 2rem));
    margin: 10vh auto;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: var(--wp--preset--color--white);
    color: var(--wp--preset--color--gray-090);
    box-shadow: var(--wp--preset--shadow--shadow-06);
}
.baseline-search-dialog::backdrop {
    background: rgba(25, 33, 61, 0.45);
}
.baseline-search-dialog__panel {
    padding: var(--wp--preset--spacing--16);
}
.baseline-search-dialog__form {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--8);
}
.baseline-search-dialog__form input {
    font-size: var(--wp--preset--font-size--display-3);
}
.baseline-search-dialog__close {
    flex: none;
    width: 40px;
    height: 40px;
    border: 1px solid var(--wp--preset--color--gray-040);
    border-radius: 6px;
    background: var(--wp--preset--color--gray-020);
    color: var(--wp--preset--color--gray-090);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.baseline-search-dialog__results {
    list-style: none;
    margin: var(--wp--preset--spacing--8) 0 0;
    padding: 0;
    max-height: 50vh;
    overflow: auto;
}
.baseline-search-dialog__results li {
    margin: 0;
}
.baseline-search-dialog__results a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--wp--preset--spacing--16);
    padding: 12px 14px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--wp--preset--color--gray-090);
}
.baseline-search-dialog__results li.is-active a,
.baseline-search-dialog__results a:hover {
    background: var(--wp--preset--color--gray-020);
}
.baseline-search-dialog__type {
    font-size: var(--wp--preset--font-size--paragraph-small);
    color: var(--wp--preset--color--gray-070);
    white-space: nowrap;
}
.baseline-search-dialog__status {
    margin: var(--wp--preset--spacing--8) 14px 0;
    font-size: var(--wp--preset--font-size--paragraph-small);
    color: var(--wp--preset--color--gray-070);
}
.baseline-search-dialog__status:empty {
    display: none;
}
.baseline-search-dialog__hint {
    margin: var(--wp--preset--spacing--12) 14px 0;
    font-size: var(--wp--preset--font-size--paragraph-small);
    color: var(--wp--preset--color--gray-070);
}
.baseline-search-dialog__hint kbd {
    display: inline-block;
    min-width: 1.6em;
    padding: 0 0.35em;
    border: 1px solid var(--wp--preset--color--gray-040);
    border-radius: 4px;
    background: var(--wp--preset--color--gray-010);
    font: inherit;
    font-size: 0.85em;
    text-align: center;
}

/* --- Video placeholders ---------------------------------------------------- */

.wp-block-button.is-play .wp-block-button__link {
    width: 96px;
    height: 96px;
    padding: 0;
    border-radius: 50%;
    background: var(--wp--preset--color--gray-090);
    color: var(--wp--preset--color--white);
    box-shadow: var(--wp--preset--shadow--shadow-04);
}
.wp-block-button.is-play .wp-block-button__link::after {
    content: "";
    width: 0;
    height: 0;
    margin-left: 6px;
    border-style: solid;
    border-width: 14px 0 14px 24px;
    border-color: transparent transparent transparent currentColor;
}
.wp-block-button.is-play .wp-block-button__link:hover {
    background: var(--wp--preset--color--black);
}
body.baseline-photo-gray .wp-block-cover__video-background,
body.baseline-photo-gray .baseline-photo .wp-block-cover__image-background,
body.baseline-photo-gray .baseline-video-dialog__player {
    filter: grayscale(1);
}
.baseline-video-dialog {
    width: min(64rem, calc(100vw - 2rem));
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: var(--wp--preset--color--black);
    box-shadow: var(--wp--preset--shadow--shadow-06);
}
.baseline-video-dialog::backdrop {
    background: rgba(25, 33, 61, 0.7);
}
.baseline-video-dialog__player[hidden],
.baseline-video-dialog__empty[hidden] {
    display: none;
}
.baseline-video-dialog__player {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--wp--preset--color--black);
}
.baseline-video-dialog__close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--wp--preset--color--gray-090);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.baseline-video-dialog__close:focus-visible {
    outline: 2px solid var(--wp--preset--color--white);
    outline-offset: 2px;
}

/* --- Overlapping image pair (Hero V4) --------------------------------------
   Kit geometry: two 340x400 images, the back one 120px lower, the front one 160px
   over the back one. Expressed as fractions of the pair's 520px width. */

.baseline-overlap {
    display: grid;
    grid-template-columns: repeat(26, 1fr);
    align-items: start;
}
.baseline-overlap > .wp-block-image {
    grid-row: 1;
    margin: 0 !important;
}
.baseline-overlap > .baseline-overlap__back {
    grid-column: 1 / 18;
    margin-top: 23.08% !important;
}
.baseline-overlap > .baseline-overlap__front {
    grid-column: 10 / 27;
    z-index: 1;
}

.baseline-video-dialog__empty {
    aspect-ratio: 16 / 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--wp--preset--spacing--8);
    padding: var(--wp--preset--spacing--32);
    background-color: var(--wp--preset--color--gray-030);
    background-image: var(--baseline-hatch);
    color: var(--wp--preset--color--gray-090);
    text-align: center;
}
.baseline-video-dialog__empty p { margin: 0; max-width: 28rem; }

/* --- Dialog motion ---------------------------------------------------------
   Fade and rise on open, fade on close, backdrop dims in. Uses discrete display
   transitions so the close plays out before the dialog disappears. The global
   reduced-motion rule collapses all of it. */

.baseline-search-dialog,
.baseline-video-dialog {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
    transition:
        opacity 0.28s ease,
        transform 0.36s cubic-bezier(0.2, 0.8, 0.2, 1),
        overlay 0.36s ease allow-discrete,
        display 0.36s ease allow-discrete;
}
.baseline-search-dialog[open],
.baseline-video-dialog[open] {
    opacity: 1;
    transform: none;
}
@starting-style {
    .baseline-search-dialog[open],
    .baseline-video-dialog[open] {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }
}
.baseline-search-dialog::backdrop,
.baseline-video-dialog::backdrop {
    background: rgba(25, 33, 61, 0);
    transition:
        background-color 0.36s ease,
        overlay 0.36s ease allow-discrete,
        display 0.36s ease allow-discrete;
}
.baseline-search-dialog[open]::backdrop { background: rgba(25, 33, 61, 0.45); }
.baseline-video-dialog[open]::backdrop { background: rgba(25, 33, 61, 0.7); }
@starting-style {
    .baseline-search-dialog[open]::backdrop,
    .baseline-video-dialog[open]::backdrop {
        background: rgba(25, 33, 61, 0);
    }
}
/* Search results settle in beneath the input. */
.baseline-search-dialog__results li {
    animation: baseline-fade-in 0.25s ease both;
}

/* --- Post type presets ------------------------------------------------------ */

.baseline-work-card .wp-block-post-featured-image img { transition: transform 0.3s ease; }
.baseline-work-card:hover .wp-block-post-featured-image img { transform: scale(1.02); }
.baseline-publication .wp-block-post-terms { margin-bottom: var(--wp--preset--spacing--8); }
.baseline-fact { min-width: 8rem; }
.baseline-search__pills .wp-block-categories + .wp-block-categories { margin-left: var(--wp--preset--spacing--16); }
.baseline-terms .wp-block-post-terms { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--8); }
.baseline-course .wp-block-post-title a { text-decoration: none; }
.baseline-course .wp-block-post-title a:hover { text-decoration: underline; }
.baseline-course .wp-block-post-terms { margin: 0; }
.baseline-citation p:last-child { user-select: all; }
.wp-block-post-navigation-link { font-weight: 600; }
.wp-block-post-navigation-link .post-navigation-link__label { display: block; font-size: var(--wp--preset--font-size--paragraph-small); color: var(--wp--preset--color--gray-070); font-weight: 400; }

/* Pause control for ambient (autoplaying) video covers. */
.baseline-video__pause {
    position: absolute; right: var(--wp--preset--spacing--16); bottom: var(--wp--preset--spacing--16); z-index: 3;
    min-height: 42px; padding: 0 var(--wp--preset--spacing--16); border: 2px solid var(--wp--preset--color--white); border-radius: 999px;
    background: rgba(26, 25, 25, 0.75); color: var(--wp--preset--color--white); font: inherit; font-size: var(--wp--preset--font-size--paragraph-small); font-weight: 600; cursor: pointer;
}
.baseline-video__pause:hover { background: var(--wp--preset--color--black); }
.baseline-video__pause:focus-visible { outline: 2px solid var(--wp--preset--color--white); outline-offset: 3px; }
main[tabindex="-1"]:focus { outline: none; }
/* Kit avatar standing in for a missing headshot: a modest silhouette on the placeholder grey. */
.baseline-avatar-fallback img { object-fit: contain; padding: 30%; box-sizing: border-box; background: var(--wp--preset--color--gray-030); }