/*
 * Evergreen Strings — editorial overrides
 * -----------------------------------------------------------------------------
 * Big, quiet type. One warm accent. No cards, no shadows, no rounded boxes.
 * Everything here supports the editorial design system; theme.json carries the
 * rest (palette, type scale, element defaults).
 */

/* -- Self-hosted fonts ------------------------------------------------------ */
@font-face {
    font-family: "Fraunces";
    src: url("../fonts/Fraunces-Variable.woff2") format("woff2-variations"),
         url("../fonts/Fraunces-Variable.woff2") format("woff2");
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Fraunces";
    src: url("../fonts/Fraunces-Italic-Variable.woff2") format("woff2-variations"),
         url("../fonts/Fraunces-Italic-Variable.woff2") format("woff2");
    font-weight: 300 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Variable.woff2") format("woff2-variations"),
         url("../fonts/Inter-Variable.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

/* -- Global hygiene --------------------------------------------------------- */
body {
    font-feature-settings: "ss01", "liga", "kern";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

/* Kill radius + shadow on common WP block wrappers.
 * Buttons keep a 0-radius pill via theme.json; groups and columns go flat. */
.wp-block-group,
.wp-block-columns,
.wp-block-column,
.wp-block-image,
.wp-block-button__link {
    box-shadow: none !important;
}
.wp-block-image img,
.wp-block-image figure,
.ess-figure img,
.ess-figure picture { border-radius: 0; }

/* -- Focus outlines --------------------------------------------------------- */
:where(a, button, .wp-block-button__link, summary, input, textarea, select):focus-visible {
    outline: 2px solid var(--wp--preset--color--brass);
    outline-offset: 3px;
    border-radius: 0;
}

/* -- Scroll behaviour ------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* =========================================================================
 * Header — sized to give the 2026 site logo (violin + EVERGREEN
 * wordmark + STRINGS STUDIO subtitle) enough vertical room to read.
 * The previous "super slim" 0.625rem padding clipped the logo on
 * desktop and forced it to ~32px on mobile. This clamp leaves ~10px
 * breathing room above and below the 72px-tall logo on desktop and
 * ~8px around the 56px-tall logo on mobile. The hamburger's 40px tap
 * pill still wins on the right side of the row.
 * ========================================================================= */
.ess-header {
    padding-top: clamp(0.6rem, 1.4vw, 1.25rem) !important;
    padding-bottom: clamp(0.6rem, 1.4vw, 1.25rem) !important;
    padding-left: clamp(1rem, 4vw, 2rem) !important;
    padding-right: clamp(1rem, 4vw, 2rem) !important;
}

/* Vertically center the row so the logo and nav align cleanly even
 * if the WP-generated layout class drops align-items at any point. */
.ess-header > .wp-block-group {
    align-items: center;
}

/* Site logo (header) — wp:site-logo block. The 2026 logo IS the full
 * brand mark; the separate icon + text wordmark from the previous design
 * are gone, so the header just shows this image at a readable size. */
.ess-header .wp-block-site-logo {
    margin: 0;
    line-height: 0;
}
.ess-header .wp-block-site-logo img,
.ess-header .wp-block-site-logo .custom-logo {
    height: 104px;
    width: auto;
    max-width: none;
    display: block;
}
@media (max-width: 599.98px) {
    .ess-header .wp-block-site-logo img,
    .ess-header .wp-block-site-logo .custom-logo {
        height: 56px;
    }
}

/* Brand-row — site logo + site-title sit side by side. Owner asked for
 * the studio name to read at glance distance because the wordmark
 * embedded inside the logo image is too small to scan at the header's
 * 104px height. Hidden on phones (logo + hamburger already use both
 * sides of the row). */
.ess-header .ess-brand-row {
    gap: clamp(0.85rem, 1.5vw, 1.25rem);
    align-items: center;
}
.ess-header .ess-brand-wordmark {
    margin: 0;
}
.ess-header .ess-brand-wordmark a,
.ess-header .wp-block-site-title a {
    font-family: var(--wp--preset--font-family--fraunces);
    font-size: clamp(1.25rem, 0.95rem + 0.7vw, 1.625rem);
    font-weight: 500;
    letter-spacing: -0.005em;
    line-height: 1.1;
    color: var(--wp--preset--color--ink);
    text-decoration: none;
    transition: color 180ms ease-out;
}
.ess-header .ess-brand-wordmark a:hover,
.ess-header .wp-block-site-title a:hover {
    color: var(--wp--preset--color--brass);
}
@media (max-width: 599.98px) {
    .ess-header .ess-brand-wordmark {
        display: none;
    }
}

.ess-header .wp-block-site-title a {
    text-decoration: none;
}
.ess-header .wp-block-navigation__container {
    gap: clamp(1.25rem, 2vw, 2.5rem);
}
.wp-block-navigation .wp-block-navigation-item__content {
    font-weight: 400;
    text-decoration: none;
    letter-spacing: 0.02em;
    color: var(--wp--preset--color--ink);
    transition: color 180ms ease-out;
}
.wp-block-navigation .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--brass);
}

/* =========================================================================
 * Section scaffolding
 * ========================================================================= */
.ess-section__eyebrow {
    font-family: var(--wp--preset--font-family--inter);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--wp--preset--color--brass);
    margin: 0 0 1.25rem;
}

.ess-section__title {
    font-family: var(--wp--preset--font-family--fraunces);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.04;
    font-size: clamp(2.25rem, 1.5rem + 3.5vw, 4.25rem);
    color: var(--wp--preset--color--ink);
    margin: 0 0 2.5rem;
}

.ess-section__header {
    max-width: 900px;
    margin: 0 0 4rem;
}

.ess-section__lede {
    font-family: var(--wp--preset--font-family--inter);
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--wp--preset--color--ink-80);
    max-width: 62ch;
    margin: -1.5rem 0 0;
}

/* =========================================================================
 * Policies page
 * ========================================================================= */

.ess-policies__hero-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 960px) {
    .ess-policies__hero-inner {
        grid-template-columns: 1fr 1fr;
        gap: 5rem;
    }
}

/* Policies hero photo — inherits the sitewide .ess-figure mat (cream board,
 * brass rule, soft shadow) from the main figure rules. Only the image crop
 * is policy-specific: we want Emily's face high in the frame. */
.ess-policies__hero-figure img {
    object-position: center 30%;
}

.ess-policies__title {
    font-family: var(--wp--preset--font-family--fraunces);
    font-size: clamp(2.5rem, 1.75rem + 3.5vw, 4.25rem);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--wp--preset--color--ink);
    margin: 0.75rem 0 1.5rem;
}

.ess-policies__lede {
    font-family: var(--wp--preset--font-family--inter);
    font-size: 1.1875rem;
    line-height: 1.55;
    color: var(--wp--preset--color--ink-80);
    max-width: 52ch;
    margin: 0;
}

.ess-policies__updated {
    color: var(--wp--preset--color--ink-80);
    font-weight: 500;
    letter-spacing: 0.08em;
}

/* =========================================================================
 * Lesson-page hero — Twinkle, Music Fun Time, Studio Class
 * ========================================================================= */

.ess-lesson-hero {
    padding-top: var(--wp--preset--spacing--96);
    padding-bottom: var(--wp--preset--spacing--96);
    padding-left: var(--wp--preset--spacing--24);
    padding-right: var(--wp--preset--spacing--24);
}

.ess-lesson-hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 960px) {
    .ess-lesson-hero__inner {
        grid-template-columns: 55fr 45fr;
        gap: 5rem;
    }
}

.ess-lesson-hero__copy {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ess-lesson-hero__title {
    font-family: var(--wp--preset--font-family--fraunces);
    font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.018em;
    color: var(--wp--preset--color--ink);
    margin: 0.25rem 0 0.5rem;
}

.ess-lesson-hero__subhead {
    font-family: var(--wp--preset--font-family--inter);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--wp--preset--color--ink-80);
    max-width: 52ch;
    margin: 0;
}

.ess-lesson-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1rem 0 0;
}

/* Lesson-page hero figure — layout only. The matted shell (mat, brass rule,
 * shadow) comes from .ess-figure / .ess-figure--portrait composed in markup.
 * Rules below ensure the image fills the column the same way it did before. */
.ess-lesson-hero__figure picture,
.ess-lesson-hero__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
}

@media (max-width: 480px) {
    .ess-lesson-hero {
        padding-top: var(--wp--preset--spacing--48);
        padding-bottom: var(--wp--preset--spacing--48);
    }
    .ess-lesson-hero__actions .ess-btn {
        flex: 1 1 auto;
        text-align: center;
    }
}

/* Body figure between sections on lesson detail pages — sizing only.
 * Matted shell + italic caption come from .ess-figure / .ess-figure--soft. */
.ess-lesson-detail-figure {
    margin: 3.5rem auto;
    max-width: 820px;
    width: 100%;
}

@media (max-width: 560px) {
    .ess-lesson-detail-figure {
        margin: 2.25rem auto;
    }
    .ess-lesson-detail-figure.ess-figure--landscape img {
        aspect-ratio: 4 / 3;
    }
}

/* =========================================================================
 * Lesson-detail body (Private Violin, Private Viola, etc.)
 *   Mirrors the Policies body rhythm — proper H2 breaks, list breathing,
 *   right-sized H1 on mobile. Without this, the raw block-editor defaults
 *   render a 52px H1 and crammed list items on phones.
 * ========================================================================= */
.ess-lesson-body {
    font-family: var(--wp--preset--font-family--inter);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--wp--preset--color--ink);
}
.ess-lesson-body h1 {
    font-family: var(--wp--preset--font-family--fraunces);
    font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0 0 1.5rem;
}
.ess-lesson-body h2 {
    font-family: var(--wp--preset--font-family--fraunces);
    font-size: clamp(1.5rem, 1.125rem + 1.2vw, 2rem);
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin: 2.75rem 0 0.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--wp--preset--color--ink-20);
}
.ess-lesson-body h3 {
    font-family: var(--wp--preset--font-family--fraunces);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin: 1.75rem 0 0.5rem;
}
.ess-lesson-body p {
    margin: 0 0 1rem;
    max-width: 62ch;
}
.ess-lesson-body p + p { margin-top: 1rem; }
.ess-lesson-body ul {
    padding-left: 1.25rem;
    margin: 0.75rem 0 1.5rem;
}
.ess-lesson-body li { margin: 0.4rem 0; }
.ess-lesson-body a {
    color: var(--wp--preset--color--ink);
    text-decoration: underline;
    text-decoration-color: var(--wp--preset--color--brass);
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
}
.ess-lesson-body a:hover {
    text-decoration-color: var(--wp--preset--color--ink);
}

.ess-policies__body {
    font-family: var(--wp--preset--font-family--inter);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--wp--preset--color--ink);
}

.ess-policies__body h2 {
    font-family: var(--wp--preset--font-family--fraunces);
    font-size: clamp(1.625rem, 1.25rem + 1.2vw, 2rem);
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin: 3rem 0 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--wp--preset--color--ink-20);
}

.ess-policies__body h3 {
    font-family: var(--wp--preset--font-family--fraunces);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin: 2rem 0 0.75rem;
}

.ess-policies__body ul {
    padding-left: 1.25rem;
    margin: 1rem 0 1.5rem;
}

.ess-policies__body li { margin: 0.5rem 0; }

.ess-policies__body p + p {
    margin-top: 1rem;
}

/* Kill the WordPress-inserted duplicate post-title + any content-leading H1 so
 * only our hero H1 renders. The page-template-page-policies body class is added
 * by WP when the custom template is assigned. */
body.page-template-page-policies .wp-block-post-title,
body.page-template-page-policies .entry-content > h1:first-child,
body.page-template-page-policies .wp-block-post-content > h1:first-child {
    display: none !important;
}

/* =========================================================================
 * Footer
 * ========================================================================= */

.ess-footer {
    color: var(--wp--preset--color--ink);
}

/* Sign-off — a warm close in Emily's voice. Fraunces italic set apart by
 * a brass hairline; signature right below. This is the footer's lead moment. */
.ess-footer__signoff {
    max-width: 48ch;
    margin: 0 0 clamp(3rem, 6vw, 4.5rem);
    padding-top: 1.75rem;
    border-top: 1px solid var(--wp--preset--color--brass);
}
.ess-footer__signoff-text {
    font-family: var(--wp--preset--font-family--fraunces);
    font-style: italic;
    font-size: clamp(1.25rem, 0.9rem + 1.2vw, 1.625rem);
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: var(--wp--preset--color--ink);
    margin: 0 0 0.75rem;
    max-width: 48ch;
}
.ess-footer__signature {
    font-family: var(--wp--preset--font-family--fraunces);
    font-style: italic;
    font-size: 1rem;
    font-weight: 500;
    color: var(--wp--preset--color--ink-80);
    margin: 0;
}

.ess-footer__top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
}

@media (min-width: 960px) {
    .ess-footer__top {
        grid-template-columns: 1.15fr 2fr;
        gap: 4rem;
    }
}

.ess-footer__brand {
    max-width: 40ch;
}

/* Site logo in the footer — wp:site-logo block, larger than header so
 * the wordmark inside the logo is readable. */
.ess-footer__brand .wp-block-site-logo {
    margin: 0 0 0.85rem;
    line-height: 0;
}
.ess-footer__brand .wp-block-site-logo img,
.ess-footer__brand .wp-block-site-logo .custom-logo {
    height: 80px;
    width: auto;
    max-width: 100%;
    display: block;
}

.ess-footer__brand .ess-brand__mark {
    width: 44px;
    height: 44px;
}

.ess-footer__brand .ess-brand__name {
    font-size: 1.5rem;
}

.ess-footer__blurb {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--wp--preset--color--ink-80);
    margin: 1.25rem 0 0;
}

.ess-footer__cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: start;
}

@media (min-width: 560px) {
    .ess-footer__cols {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

.ess-footer__col {
    min-width: 0;
    margin: 0;
    padding: 0;
}

.ess-footer__heading {
    font-family: var(--wp--preset--font-family--fraunces);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wp--preset--color--brass);
    margin: 0 0 1.125rem;
}

.ess-footer__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.55;
}

.ess-footer__col a {
    color: var(--wp--preset--color--ink);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    transition: text-decoration-color 180ms ease-out, color 180ms ease-out;
}

.ess-footer__col a:hover {
    color: var(--wp--preset--color--brass);
    text-decoration-color: var(--wp--preset--color--brass);
}

/* Address block — same Inter rhythm as the sibling link lists so the
 * three nav columns visually balance. (Used to be Fraunces italic
 * tying to the now-removed signoff; that orphaned the column.) */
.ess-footer__address {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--wp--preset--color--ink);
    margin: 0;
}
.ess-footer__address a {
    color: var(--wp--preset--color--ink);
    text-decoration: underline;
    text-decoration-color: var(--wp--preset--color--brass);
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}
.ess-footer__address a:hover {
    text-decoration-color: var(--wp--preset--color--ink);
}

.ess-footer__fine {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--wp--preset--color--ink-80);
    font-style: italic;
    margin: 0.5rem 0 0;
}

.ess-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid var(--wp--preset--color--ink-20);
    font-size: 0.8125rem;
    color: var(--wp--preset--color--ink-80);
}

/* =========================================================================
 * Social-icons row — emitted by [ess_social_icons] in the Reach column.
 * One <li><a> per platform with a non-empty URL in Studio Settings. SVG
 * glyphs are inline (currentColor) so they tint cleanly to ink and brass.
 * ========================================================================= */
.ess-social {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}
.ess-social li { margin: 0; }
.ess-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--wp--preset--color--ink);
    background: transparent;
    border: 1px solid var(--wp--preset--color--ink-20);
    text-decoration: none;
    transition: color 180ms ease-out, border-color 180ms ease-out, background 180ms ease-out;
}
.ess-social a:hover,
.ess-social a:focus-visible {
    color: var(--wp--preset--color--paper);
    background: var(--wp--preset--color--brass);
    border-color: var(--wp--preset--color--brass);
}
.ess-social svg {
    width: 18px;
    height: 18px;
    display: block;
}

.ess-footer__copy { margin: 0; }

.ess-footer__legal {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
}

.ess-footer__legal li + li {
    border-left: 1px solid var(--wp--preset--color--ink-20);
    padding-left: 1.25rem;
}

.ess-footer__legal a {
    color: var(--wp--preset--color--ink-80);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 180ms ease-out, color 180ms ease-out;
}

.ess-footer__legal a:hover {
    color: var(--wp--preset--color--brass);
    border-bottom-color: var(--wp--preset--color--brass);
}

.ess-section__header--split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: end;
    max-width: none;
}
@media (min-width: 960px) {
    .ess-section__header--split {
        grid-template-columns: 2fr 1fr;
        gap: 4rem;
    }
}
.ess-section__note {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--wp--preset--color--ink-80);
    max-width: 36ch;
    margin: 0;
}

/* =========================================================================
 * Hero
 * ========================================================================= */
.ess-hero {
    padding-top: clamp(4rem, 4rem + 3vw, 8rem);
    padding-bottom: clamp(4rem, 4rem + 4vw, 10rem);
}

/* Single responsive copy block — eyebrow, H1, subhead, CTAs, "now booking"
 * line. Renders above the portrait on mobile (copy-first) and beside the
 * portrait on desktop. */
.ess-hero__eyebrow {
    font-family: var(--wp--preset--font-family--inter);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--wp--preset--color--brass);
    margin: 0 0 1rem;
}
.ess-hero__title {
    font-family: var(--wp--preset--font-family--fraunces);
    font-weight: 400;
    font-size: clamp(2rem, 1.25rem + 5vw, 4.5rem);
    line-height: 1.04;
    letter-spacing: -0.025em;
    margin: 0 0 1.25rem;
    color: var(--wp--preset--color--ink);
    max-width: 16ch;
}
.ess-hero__subhead {
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--wp--preset--color--ink-80);
    margin: 0 0 1.75rem;
    max-width: 44ch;
}
.ess-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0 0 1.25rem;
}
.ess-hero__actions .ess-btn {
    font-size: 0.9375rem;
    padding: 0.85rem 1.35rem;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ess-hero__meta {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--wp--preset--color--ink-80);
    margin: 0;
    max-width: 44ch;
}
.ess-hero__media {
    position: relative;
}

/* =========================================================================
 * Figures — matted, softly framed photographs
 *   Sitewide canonical treatment: cream mat, ink-20 border, inner brass
 *   hairline rule, warm soft shadow with brass tint, subtle saturate/
 *   contrast filter. Feels like a real object on the page.
 *
 *   Apply directly via .ess-figure on a <figure>, or get it for free on:
 *     - core image blocks inside post/page content
 *     - the post-featured image on single posts
 *
 *   Opt out by adding .alignfull to the wrapper, or by using the
 *   dedicated full-bleed pattern (.ess-bleed__figure).
 * ========================================================================= */
.ess-figure,
.wp-block-post-featured-image,
.wp-block-post-content .wp-block-image:not(.alignfull):not(.is-style-bleed),
.entry-content .wp-block-image:not(.alignfull):not(.is-style-bleed) {
    margin: 0;
    position: relative;
    background: var(--wp--preset--color--warm-white);
    padding: clamp(0.75rem, 1vw, 1.25rem);
    border: 1px solid var(--wp--preset--color--ink-20);
    box-shadow:
        0 1px 0 rgba(26, 26, 22, 0.03),
        0 30px 60px -30px rgba(26, 26, 22, 0.22),
        0 18px 36px -24px rgba(176, 131, 74, 0.18);
    transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
}
.ess-figure::before,
.wp-block-post-featured-image::before,
.wp-block-post-content .wp-block-image:not(.alignfull):not(.is-style-bleed)::before,
.entry-content .wp-block-image:not(.alignfull):not(.is-style-bleed)::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(176, 131, 74, 0.22);
    pointer-events: none;
    z-index: 1;
}
.ess-figure picture,
.ess-figure img,
.wp-block-post-featured-image img,
.wp-block-post-content .wp-block-image img,
.entry-content .wp-block-image img {
    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    height: auto;
}
.ess-figure img,
.wp-block-post-featured-image img,
.wp-block-post-content .wp-block-image img,
.entry-content .wp-block-image img {
    filter: saturate(0.96) contrast(1.03);
    border-radius: 0 !important;
}
.ess-figure figcaption {
    font-family: var(--wp--preset--font-family--inter);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--wp--preset--color--ink-80);
    padding: 1rem 0.25rem 0.25rem;
    margin: 0;
    position: relative;
    z-index: 2;
}

/* Aspect-ratio variants */
.ess-figure--portrait  img { aspect-ratio: 4/5;   object-fit: cover; }
.ess-figure--tall      img { aspect-ratio: 4/5;   object-fit: cover; }
.ess-figure--landscape img { aspect-ratio: 3/2;   object-fit: cover; }
.ess-figure--wide      img { aspect-ratio: 16/10; object-fit: cover; }
.ess-figure--free      img { aspect-ratio: auto; }

/* Soft caption — Fraunces italic, centered, sentence-case. For figures where
 * the caption is a written aside, not a tracked label. */
.ess-figure--soft figcaption {
    font-family: var(--wp--preset--font-family--fraunces);
    font-style: italic;
    font-size: 0.9375rem;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: 0;
    color: var(--wp--preset--color--ink-80);
    text-align: center;
    padding: 1rem 0.25rem 0.25rem;
}

/* Subtle parallax lift on hover — desktop only, not distracting */
@media (hover: hover) and (min-width: 960px) {
    .ess-figure:hover {
        transform: translateY(-6px);
    }
}

/* Hero portrait — slightly rotated for a hand-placed feel, desktop only.
 * Portrait now sits on the LEFT on desktop; tilt leans toward the copy on
 * the right. Paired with the About portrait's opposite tilt below. */
@media (min-width: 768px) {
    .ess-hero__media .ess-figure {
        transform: rotate(-0.6deg);
    }
    .ess-hero__media .ess-figure:hover {
        transform: rotate(0) translateY(-6px);
    }
}

/* Desktop layout — every photo section shares the same rhythm:
 * Emily's portrait on the LEFT, copy on the RIGHT. DOM stays copy-first
 * everywhere so mobile stacks words-first above the fold; this flip is
 * visual-only at desktop widths. */
@media (min-width: 782px) {
    .ess-hero__row {
        flex-direction: row-reverse;
    }
    .ess-about .wp-block-columns {
        flex-direction: row-reverse;
    }
}
@media (max-width: 767px) {
    .ess-hero__media .ess-figure {
        transform: none;
        max-width: 360px;
        margin: 0 auto;
    }
}

/* About portrait — opposite tilt so the two figures on the page read as a pair */
.ess-about .ess-figure {
    transform: rotate(-0.4deg);
}
.ess-about .ess-figure:hover {
    transform: rotate(0) translateY(-6px);
}

/* =========================================================================
 * About (story + portrait)
 * ========================================================================= */
.ess-about__copy .ess-about__lede,
.ess-about__copy .ess-about__body {
    font-family: var(--wp--preset--font-family--inter);
    font-size: 1.125rem;
    line-height: 1.6;
    max-width: 46ch;
    margin: 0 0 1.25rem;
    color: var(--wp--preset--color--ink);
}
.ess-about__copy .ess-about__body {
    color: var(--wp--preset--color--ink-80);
}
.ess-about__copy .ess-about__more {
    margin-top: 2rem;
    font-size: 0.9375rem;
    letter-spacing: 0.01em;
}
.ess-about__copy .ess-about__more a {
    text-decoration: none;
    border-bottom: 1px solid var(--wp--preset--color--ink);
    padding-bottom: 3px;
    color: var(--wp--preset--color--ink);
}
.ess-about__copy .ess-about__more a:hover {
    color: var(--wp--preset--color--brass);
    border-color: var(--wp--preset--color--brass);
}

/* =========================================================================
 * Programs list (Four ways in)
 * ========================================================================= */
.ess-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--wp--preset--color--ink-20);
}
.ess-list__row {
    display: grid;
    grid-template-columns: 3.5rem 1fr auto;
    gap: clamp(1rem, 2vw, 2.5rem);
    align-items: baseline;
    padding: clamp(1.75rem, 2vw, 2.75rem) 0;
    border-bottom: 1px solid var(--wp--preset--color--ink-20);
    transition: padding 200ms ease-out;
}
.ess-list__row:hover {
    padding-left: 0.5rem;
}
.ess-list__num {
    font-family: var(--wp--preset--font-family--inter);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--wp--preset--color--brass);
    padding-top: 0.5rem;
}
.ess-list__body { min-width: 0; }
.ess-list__title {
    font-family: var(--wp--preset--font-family--fraunces);
    font-weight: 400;
    letter-spacing: -0.02em;
    font-size: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
    line-height: 1.1;
    margin: 0 0 0.5rem;
    color: var(--wp--preset--color--ink);
}
.ess-list__title em {
    font-style: italic;
    color: var(--wp--preset--color--ink-80);
    font-size: 0.65em;
    letter-spacing: -0.005em;
}
.ess-list__meta {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--wp--preset--color--ink-80);
    max-width: 52ch;
    margin: 0;
}
.ess-list__link {
    font-family: var(--wp--preset--font-family--fraunces);
    font-size: 1.75rem;
    text-decoration: none;
    color: var(--wp--preset--color--ink);
    align-self: center;
    transition: transform 200ms ease-out, color 200ms ease-out;
}
.ess-list__row:hover .ess-list__link {
    transform: translateX(6px);
    color: var(--wp--preset--color--brass);
}

/* =========================================================================
 * Section anchor offsets
 *   When the header nav jumps to /#tuition or /#programs, the scrolled
 *   target needs a top offset so it doesn't slide under the slim header.
 *   These rules used to live as inline scroll-margin-top on the wp:group
 *   wrappers, but inline attrs broke Gutenberg block validation. Same
 *   pixel result, applied in CSS.
 * ========================================================================= */
#tuition,
#programs {
    scroll-margin-top: 5rem;
}

/* =========================================================================
 * Tuition list
 * ========================================================================= */
.ess-tuition__list {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--wp--preset--color--ink-20);
}
.ess-tuition__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem;
    align-items: baseline;
    padding: clamp(1.25rem, 1.5vw, 1.75rem) 0;
    border-bottom: 1px solid var(--wp--preset--color--ink-20);
}
.ess-tuition__label {
    font-family: var(--wp--preset--font-family--fraunces);
    font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.5rem);
    font-weight: 400;
    letter-spacing: -0.005em;
    color: var(--wp--preset--color--ink);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.ess-tuition__sub {
    font-family: var(--wp--preset--font-family--inter);
    font-size: 0.9375rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--wp--preset--color--ink-80);
}
.ess-tuition__price {
    font-family: var(--wp--preset--font-family--fraunces);
    font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
    font-weight: 400;
    color: var(--wp--preset--color--ink);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1;
    white-space: nowrap;
}
.ess-tuition__price span {
    font-family: var(--wp--preset--font-family--inter);
    font-size: 0.875rem;
    color: var(--wp--preset--color--ink-80);
    letter-spacing: 0;
    margin-left: 0.1em;
}
.ess-tuition__foot {
    margin: 2rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--wp--preset--color--ink-80);
}
.ess-tuition__cta {
    margin: 1.75rem 0 0;
}
.ess-tuition__cta .ess-btn {
    padding: 0.9rem 1.5rem;
    font-size: 0.9375rem;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 480px) {
    .ess-tuition__cta .ess-btn {
        display: flex;
        width: 100%;
    }
}

/* =========================================================================
 * Full-bleed quote band
 * ========================================================================= */
.ess-bleed {
    position: relative;
    margin: clamp(4rem, 6vw, 9rem) 0;
}
.ess-bleed__figure {
    margin: 0;
    position: relative;
    overflow: hidden;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}
.ess-bleed__figure::before { content: none; }
.ess-bleed__figure img {
    width: 100%;
    height: clamp(420px, 68vh, 780px);
    object-fit: cover;
    display: block;
    filter: saturate(0.94) contrast(1.04);
}
/* Soft vignette fade into the paper color at top + bottom so the photo feels
 * embedded in the page rather than dropped on top. */
.ess-bleed__figure::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(246,241,232,0.35) 0%, transparent 14%, transparent 60%, rgba(26,26,22,0.25) 100%);
    pointer-events: none;
}
.ess-bleed__caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: clamp(2rem, 5vw, 5rem);
    max-width: min(100%, 1400px);
    margin: 0 auto;
    color: var(--wp--preset--color--paper);
    background: linear-gradient(to top, rgba(26,26,22,0.72), rgba(26,26,22,0));
    z-index: 1;
}
.ess-pullquote {
    margin: 0;
    max-width: 42ch;
}
.ess-pullquote p {
    font-family: var(--wp--preset--font-family--fraunces);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin: 0 0 1rem;
    color: var(--wp--preset--color--paper);
}
.ess-pullquote cite {
    font-family: var(--wp--preset--font-family--inter);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-style: normal;
    color: var(--wp--preset--color--paper);
    opacity: 0.8;
}
.ess-bleed__meta {
    margin: 1.25rem 0 0;
    font-size: 0.875rem;
}
.ess-bleed__meta a {
    color: var(--wp--preset--color--paper);
    text-decoration: none;
    border-bottom: 1px solid rgba(246,241,232,0.5);
    padding-bottom: 2px;
}
.ess-bleed__meta a:hover {
    border-bottom-color: var(--wp--preset--color--paper);
}

/* =========================================================================
 * Closing CTA
 * ========================================================================= */
.ess-cta__inner {
    text-align: left;
    max-width: 1000px;
}
.ess-cta__title {
    font-family: var(--wp--preset--font-family--fraunces);
    font-weight: 400;
    font-style: italic;
    letter-spacing: -0.025em;
    line-height: 0.95;
    font-size: clamp(4rem, 4rem + 6vw, 10rem);
    color: var(--wp--preset--color--ink);
    margin: 0 0 2rem;
}
.ess-cta__meta {
    font-size: 1.1875rem;
    line-height: 1.55;
    max-width: 42ch;
    color: var(--wp--preset--color--ink-80);
    margin: 0 0 2.5rem;
}
.ess-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0;
}
.ess-btn {
    display: inline-block;
    font-family: var(--wp--preset--font-family--inter);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 1.05rem 1.75rem;
    text-decoration: none;
    transition: background 180ms ease-out, color 180ms ease-out, border-color 180ms ease-out;
}
.ess-btn--primary {
    background: var(--wp--preset--color--ink);
    color: var(--wp--preset--color--paper);
}
.ess-btn--primary:hover {
    background: var(--wp--preset--color--brass);
    color: var(--wp--preset--color--paper);
}
.ess-btn--ghost {
    background: transparent;
    color: var(--wp--preset--color--ink);
    border: 1px solid var(--wp--preset--color--ink);
}
.ess-btn--ghost:hover {
    border-color: var(--wp--preset--color--brass);
    color: var(--wp--preset--color--brass);
}

/* Native wp:button compatibility.
 *
 * When .ess-btn / --primary / --ghost sit on a .wp-block-button wrapper
 * (because Gutenberg can't put arbitrary classes on the inner <a>),
 * two things go wrong without these rules:
 *   1) The bare-anchor .ess-btn rules above ALSO match the wrapper div,
 *      so the wrapper grows padding + border, AND the inner link has
 *      WP core's default button look — a "double-button" effect.
 *   2) WP core's wp-element-button styles (theme.json elements.button)
 *      paint the inner link with a default radius / colours that fight
 *      the studio palette.
 * So: reset the wrapper to a transparent shell, and re-apply every
 * .ess-btn property to the inner .wp-block-button__link. Use higher
 * specificity (.wp-block-buttons …) than the bare rules above so this
 * wins both ways. */
.wp-block-buttons .wp-block-button.ess-btn {
    padding: 0;
    border: 0;
    background: transparent;
}
.wp-block-buttons .wp-block-button.ess-btn > .wp-block-button__link {
    display: inline-block;
    font-family: var(--wp--preset--font-family--inter);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 1.05rem 1.75rem;
    text-decoration: none;
    border-radius: 0;
    border: 0;
    transition: background 180ms ease-out, color 180ms ease-out, border-color 180ms ease-out;
}
.wp-block-buttons .wp-block-button.ess-btn--primary > .wp-block-button__link {
    background: var(--wp--preset--color--ink);
    color: var(--wp--preset--color--paper);
}
.wp-block-buttons .wp-block-button.ess-btn--primary > .wp-block-button__link:hover {
    background: var(--wp--preset--color--brass);
    color: var(--wp--preset--color--paper);
}
.wp-block-buttons .wp-block-button.ess-btn--ghost > .wp-block-button__link {
    background: transparent;
    color: var(--wp--preset--color--ink);
    border: 1px solid var(--wp--preset--color--ink);
}
.wp-block-buttons .wp-block-button.ess-btn--ghost > .wp-block-button__link:hover {
    border-color: var(--wp--preset--color--brass);
    color: var(--wp--preset--color--brass);
}

/* =========================================================================
 * Studio life band — Emily + student
 * ========================================================================= */
/* The studio-life grid is now a wp:columns wrapper rather than a hand-
 * rolled <div>. Two reasons we keep the .ess-studio-life__grid class on
 * the wp-block-columns div and override its layout: (1) the original
 * grid system positioned the figure LEFT and copy RIGHT on desktop
 * while the DOM order is copy-then-figure (so mobile stacks words-
 * first); flex-direction-row-reverse on the columns achieves the same
 * visual flip without media-query-scoped grid placement. (2) the figure
 * now lives one level deeper as a grandchild inside .wp-block-column,
 * so the old `.ess-studio-life__figure { grid-column: 1 }` rule no
 * longer matches the actual grid child. */
.ess-studio-life__grid {
    display: flex !important;
    flex-direction: column;
    gap: clamp(2rem, 4vw, 4.5rem) !important;
    align-items: center;
}
.ess-studio-life__grid > .wp-block-column {
    margin: 0 !important;
    flex: 1 1 100% !important;
}
@media (min-width: 960px) {
    .ess-studio-life__grid {
        flex-direction: row-reverse;  /* copy-then-figure DOM → figure-then-copy visual */
    }
    .ess-studio-life__grid > .wp-block-column {
        flex: 1 1 50% !important;
    }
    .ess-studio-life__grid .ess-studio-life__figure {
        margin-top: -3rem;
    }
}
.ess-studio-life__copy { max-width: 44ch; }
.ess-studio-life__lede {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--wp--preset--color--ink-80);
    margin: 0;
}
.ess-studio-life .ess-figure {
    transform: rotate(0.5deg);
}
.ess-studio-life .ess-figure:hover {
    transform: rotate(0) translateY(-6px);
}

/* =========================================================================
 * Contact map
 * ========================================================================= */
.ess-map {
    margin: 3rem 0 0;
    border: 1px solid var(--wp--preset--color--ink-20);
    padding: clamp(0.5rem, 1vw, 0.75rem);
    background: var(--wp--preset--color--warm-white);
}
.ess-map iframe {
    display: block;
    width: 100%;
    filter: saturate(0.85) contrast(1.02);
}
.ess-map figcaption {
    font-family: var(--wp--preset--font-family--inter);
    font-size: 0.8125rem;
    color: var(--wp--preset--color--ink-80);
    padding: 0.9rem 0.25rem 0.25rem;
    letter-spacing: 0.02em;
}

/* =========================================================================
 * Footer
 * ========================================================================= */
.ess-footer {
    background: var(--wp--preset--color--paper);
}
.ess-footer a {
    color: var(--wp--preset--color--ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 180ms ease-out, color 180ms ease-out;
}
.ess-footer a:hover {
    color: var(--wp--preset--color--brass);
    border-color: var(--wp--preset--color--brass);
}

/* =========================================================================
 * Scroll reveal (data-reveal)
 *   Progressive enhancement: content is always visible. Only the <html>.js
 *   class (added inline at top of <head>) enables the fade+slide behavior,
 *   so full-page screenshots and no-JS clients see the real content.
 * ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
    /* Content is always visible. Reveal just slides up a touch on intersection;
     * never hides the element with opacity:0 so crawlers, screenshots, and
     * no-JS clients always see the real page. */
    .js [data-reveal]:not(.is-in) {
        transform: translateY(20px);
    }
    .js [data-reveal] {
        transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
        will-change: transform;
    }
    .js [data-reveal].is-in {
        transform: none;
    }
    .js [data-reveal-stagger]:not(.is-in) > * {
        transform: translateY(14px);
    }
    .js [data-reveal-stagger] > * {
        transition: transform 650ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .js [data-reveal-stagger].is-in > * {
        transform: none;
    }
    .js [data-reveal-stagger].is-in > *:nth-child(1) { transition-delay: 60ms; }
    .js [data-reveal-stagger].is-in > *:nth-child(2) { transition-delay: 140ms; }
    .js [data-reveal-stagger].is-in > *:nth-child(3) { transition-delay: 220ms; }
    .js [data-reveal-stagger].is-in > *:nth-child(4) { transition-delay: 300ms; }
}

/* =========================================================================
 * Mobile refinements
 * ========================================================================= */
@media (max-width: 782px) {
    .ess-hero {
        padding-top: clamp(0.75rem, 4vw, 1.75rem);
        padding-bottom: clamp(2rem, 8vw, 3.5rem);
    }
    .ess-hero__row {
        gap: 2rem !important;
        flex-direction: column !important;
    }
    /* Hero + about both use copy-first DOM and flex-direction: column on mobile
     * (row-reverse only kicks in at ≥782px), so no per-section order rules
     * needed here. The About page pattern still needs column-reverse because
     * its pattern file keeps portrait-first DOM. */
    .wp-block-columns:has(.ess-portrait--about) {
        display: flex;
        flex-direction: column-reverse;
    }
    .ess-hero__media .ess-figure img {
        aspect-ratio: 4/5;
    }
    .ess-hero__title {
        font-size: clamp(1.875rem, 6.5vw, 2.5rem);
        max-width: none;
    }
    .ess-hero__actions .ess-btn {
        padding: 0.8rem 1.15rem;
        font-size: 0.9rem;
    }
    /* Hide the "Now booking · Twinkle · …" meta line on phones — it's redundant
     * with the eyebrow and eats 50+ px of fold space. Desktop keeps it. */
    .ess-hero__meta { display: none; }
    /* Tighten subhead leading so the paragraph takes ~20px less vertical. */
    .ess-hero__subhead { line-height: 1.45; }
    .ess-list__row {
        grid-template-columns: 2rem 1fr 1.25rem;
    }
    .ess-tuition__row {
        grid-template-columns: 1fr auto;
    }
    .ess-cta__title {
        font-size: clamp(3.25rem, 3rem + 7vw, 6rem);
    }
}
/* Very narrow phones: compress hero padding further, let buttons wrap side-by-
 * side when they fit, stack when they don't. Stacking by default added 55+px
 * of vertical space and pushed the CTA behind the cookie banner. */
@media (max-width: 480px) {
    .ess-hero {
        padding-top: 1rem;
        padding-bottom: 2rem;
    }
    .ess-hero__actions {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: stretch;
    }
    .ess-hero__actions .ess-btn {
        flex: 1 1 auto;
        min-width: 0;
        text-align: center;
    }
}

/* Hero columns must stack on phones. Inline flex-basis from the block editor
 * (55% / 45%) was surviving into mobile, pushing the portrait column off the
 * right edge (~400px offscreen on iPhone). Force single-column below 782px. */
@media (max-width: 781px) {
    .ess-hero__row > .wp-block-column {
        flex-basis: 100% !important;
        flex-grow: 1;
        max-width: 100%;
    }
}

/* Buttons were rendering wider than their container on narrow phones because
 * padding wasn't included in the width box. Belt-and-braces: border-box
 * everywhere on CTAs. */
.ess-btn {
    box-sizing: border-box;
    max-width: 100%;
}

/* =========================================================================
 * Mobile flawlessness — 480px and down
 *   Catches everything that breaks on a phone: overflow, tap targets, nav,
 *   sticky CTA safe-area, zoom-on-focus, section padding, wordmark sizing.
 * ========================================================================= */

/* No horizontal scroll, ever. Off-canvas gradients / oversized text were the
 * usual culprits. Keeping overflow on the body (not html) so position:sticky
 * / scroll-timeline still work. */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }

/* Prevent iOS Safari from auto-zooming when a form field gets focus — any
 * input under 16px triggers zoom. Applied only where the browser is touch. */
@media (hover: none) and (pointer: coarse) {
    input, select, textarea {
        font-size: max(16px, 1rem);
    }
}

/* Tap targets — WCAG 2.5.5 baseline. Our pill buttons and nav links should
 * always be ≥44px high on touch. */
@media (hover: none) and (pointer: coarse) {
    .wp-block-button__link,
    .ess-footer__col a,
    .ess-footer__legal a,
    .wp-block-navigation-item__content,
    .ess-list__link,
    .ess-about__copy .ess-about__more a,
    .ess-brand {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .ess-footer__col ul { gap: 0.25rem; }
    .ess-footer__col a,
    .ess-footer__legal a { padding: 0.375rem 0; }
}

@media (max-width: 600px) {

    /* Section padding — 128px top on a 600px tall phone eats the whole hero.
     * Collapse aggressively on narrow widths. Horizontal gutter is 1.5rem
     * (24px) — matches the uniform sitewide gutter below. */
    .ess-hero,
    .ess-programs,
    .ess-policies__hero,
    section.wp-block-group.alignfull[style*="padding-top:var(--wp--preset--spacing--96)"],
    section.wp-block-group.alignfull[style*="padding-top:var(--wp--preset--spacing--128)"] {
        padding-top: clamp(3rem, 12vw, 4.5rem) !important;
        padding-bottom: clamp(2.5rem, 10vw, 4rem) !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    /* Policies body — override the block-editor inline spacing|32 with a
     * slimmer 1.5rem so the heading rhythm stays readable on phones. */
    .ess-policies__body {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    /* Hero H1 — a 5.75rem max is 92px on desktop; on a 375px phone that
     * would wrap five lines. Cap it below the page width. */
    .ess-hero__copy h1,
    .ess-hero h1 {
        font-size: clamp(2rem, 8vw + 1rem, 3rem) !important;
        line-height: 1.05;
        letter-spacing: -0.02em;
    }

    /* All other oversized display type on mobile */
    .ess-section__title {
        font-size: clamp(1.875rem, 6vw + 1rem, 2.75rem) !important;
        line-height: 1.08;
    }
    .ess-policies__title {
        font-size: clamp(2rem, 7vw + 1rem, 3rem) !important;
    }
    .ess-list__title {
        font-size: clamp(1.375rem, 3vw + 1rem, 1.75rem) !important;
    }

    /* Programs list — drop the trailing arrow column, tighten number col. */
    .ess-list__row {
        grid-template-columns: 1.75rem 1fr;
        gap: 1rem;
        padding: 1.5rem 0;
    }
    .ess-list__link { display: none; }
    .ess-list__row:hover { padding-left: 0; }

    /* Policies hero — stack figure + copy with a tight gap on phones.
     * Copy before figure on mobile so the page opens with words, not a photo. */
    .ess-policies__hero-inner {
        display: flex;
        flex-direction: column-reverse;
        gap: 1.75rem;
    }
    /* Cap the framed photo height on mobile so the mat doesn't dominate. */
    .ess-policies__hero-figure img {
        max-height: 44vh;
    }
    .ess-policies__body {
        padding-top: 2rem !important;
        padding-bottom: 4rem !important;
    }
    .ess-policies__body h2 {
        margin-top: 2.25rem;
        padding-top: 1.25rem;
    }

    /* Header on mobile — the sitewide slim rule already handles padding/mark.
     * Only mobile-specific nit: hide the "Studio" tagline under the wordmark
     * since it wraps awkwardly on 360px phones. */
    /* On mobile, just the logo mark — wordmark hides entirely so the header
     * is a single-icon moment matching a native mobile app. */
    .ess-brand__wordmark { display: none; }

    /* Hero portrait shouldn't consume the whole fold on phones. Cap height
     * and crop top so the H1 + subhead + first CTA clear 844px. */
    .ess-hero__media .ess-figure img,
    .ess-hero__media img {
        max-height: 48svh;
        object-fit: cover;
        object-position: center 20%;
    }

    /* Policies hero figure needs air above it on mobile. */
    .ess-policies__hero-figure { margin-top: 1.25rem; }

    /* Footer — single column, tighter spacing, wordmark shrinks.
     * Margin-top was 4rem; felt like dead air between content and footer. */
    .ess-footer {
        padding: 3rem 1.25rem 1.5rem !important;
        margin-top: 2.5rem !important;
    }
    .ess-footer__top { gap: 2.5rem; }
    .ess-footer__brand .ess-brand__name { font-size: 1.25rem; }
    .ess-footer__blurb { font-size: 0.875rem; }
    .ess-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        margin-top: 2.5rem;
        padding-top: 1.5rem;
        font-size: 0.75rem;
    }
    /* When legal items wrap, the ::before border-left becomes a stray pipe.
     * Drop borders on the first visible item AND on wrap to keep it tidy. */
    .ess-footer__legal { gap: 0.375rem 1rem; }
    .ess-footer__legal li + li { border-left: 0; padding-left: 0; }
    .ess-footer__legal li + li::before {
        content: "·";
        color: var(--wp--preset--color--brass);
        margin-right: 0.5rem;
    }

    /* Contact page — form + sidebar stack naturally via WP core columns,
     * but the form card inner padding is heavy. */
    .wp-block-column > .wp-block-group[style*="padding-top:var(--wp--preset--spacing--48)"] {
        padding: 1.5rem !important;
    }

    /* Contact photo — cap height on mobile so it doesn't dominate. */
    .ess-contact__photo img {
        max-height: 40vh;
        object-fit: cover;
    }

    /* Pull quotes + bleed figures — ensure captions don't run under the sticky CTA. */
    .ess-pullquote {
        font-size: clamp(1.25rem, 4vw + 0.5rem, 1.5rem) !important;
        padding-left: 1.25rem !important;
        margin: 3rem auto !important;
    }

    /* Tuition row — keep price visible; label wraps. */
    .ess-tuition__row {
        padding: 1rem 0;
        gap: 0.75rem;
    }

    /* Bottom padding so sticky CTA (~72px tall incl. safe-area) never covers
     * the last content block on any page. */
    main {
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    }
}

/* Ultra-narrow phones (iPhone SE 1st-gen, foldables in portrait). */
@media (max-width: 360px) {
    .ess-brand__wordmark { display: none; }
    .ess-list__num { display: none; }
    .ess-list__row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
    .ess-hero__copy h1,
    .ess-hero h1 { font-size: 1.875rem !important; }
}

/* Desktop sticky CTA is already hidden > 768px via the base rule; make sure
 * the mobile version has real height + a readable font. */
.evergreen-sticky-cta .wp-block-button__link {
    font-size: 1rem;
    font-weight: 600;
    padding: 0.9rem 1.25rem;
    line-height: 1;
}

/* The scroll-progress bar must sit above the sticky CTA but under any modal. */
.ess-progress { z-index: 60; }

/* Kill potential horizontal scroll from full-bleed alignfull blocks when
 * theme spacing rounds up slightly past 100vw on iOS Safari. */
.alignfull { max-width: 100vw; }

/* =========================================================================
 * Hamburger overlay menu (mobile only, ≤599.98px)
 *   WP core's `overlayMenu="mobile"` nav block hides the hamburger above
 *   600px. Every rule here is scoped to the same breakpoint so it can't
 *   leak onto desktop — which was causing the hamburger to render next to
 *   the inline nav at 1440×900.
 * ========================================================================= */
@media (max-width: 599.98px) {

    /* Open button (hamburger) — 40x40 tap pill (WCAG 2.5.5 AA floor). */
    .wp-block-navigation__responsive-container-open {
        min-width: 40px;
        min-height: 40px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: 0.375rem;
        color: var(--wp--preset--color--ink);
    }
    .wp-block-navigation__responsive-container-open svg {
        width: 28px;
        height: 28px;
    }
    .wp-block-navigation__responsive-container-open:hover {
        color: var(--wp--preset--color--brass);
    }

    /* Overlay panel — center the link stack, paint the whole sheet. */
    .wp-block-navigation__responsive-container.is-menu-open {
        padding: clamp(3.5rem, 12vw, 5rem) 1.75rem !important;
        background-color: var(--wp--preset--color--paper) !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
        min-height: calc(100svh - 7rem);
        gap: 0.25rem;
    }
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
        width: 100%;
        gap: 0 !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
        width: 100%;
        border-bottom: 1px solid var(--wp--preset--color--ink-20);
    }
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child {
        border-bottom: 0;
    }
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
        font-family: var(--wp--preset--font-family--fraunces);
        font-size: 1.5rem !important;
        font-weight: 500;
        line-height: 1.35;
        letter-spacing: -0.01em;
        min-height: 64px;
        padding-block: 0.75rem;
        padding-inline: 0;
        display: flex !important;
        align-items: center;
        width: 100%;
        color: var(--wp--preset--color--ink);
        text-decoration: none;
        transition: color 160ms ease-out;
    }
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
        color: var(--wp--preset--color--brass);
    }

    /* Close (X) button — 44x44 tap pill, visible stroke. */
    .wp-block-navigation__responsive-container-close {
        min-width: 44px !important;
        min-height: 44px !important;
        top: 0.75rem !important;
        right: 0.75rem !important;
        padding: 0.5rem !important;
        color: var(--wp--preset--color--ink) !important;
    }
    .wp-block-navigation__responsive-container-close svg {
        width: 24px;
        height: 24px;
    }
    .wp-block-navigation__responsive-container-close:hover {
        color: var(--wp--preset--color--brass) !important;
    }
}