/* ============================================
   PAMUSHA SERVICES — services.css
   Baya Living inspired
   ============================================ */

@font-face {
    font-family: 'Heatwood';
    src: url('../fonts/Heatwood.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* --- Services Hero --- */
.services-hero {
    padding-top: 160px;
    text-align: center;
    padding-bottom: var(--space-xl);
}

.services-hero .page-heading {
    font-family: var(--font-header);
    font-weight: 300;
}

.services-intro {
    font-size: var(--text-md);
    max-width: 48ch;
    margin: 0 auto;
    color: var(--seasonal-four);
    line-height: var(--line-relaxed);
    letter-spacing: var(--letters-normal);
}

/* --- Service Block --- */
.service-block {
    padding: 0;
}

.service-block + .service-block {
    margin-top: 4px;
}

.service-split {
    max-width: var(--width-site);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-height: 500px;
}

.service-split-reverse {
    direction: rtl;
}

.service-split-reverse > * {
    direction: ltr;
}

.service-placeholder {
    width: 100%;
    height: 100%;
    min-height: 500px;
}

.service-block:first-of-type .service-placeholder {
    background: linear-gradient(165deg, var(--seasonal-two), var(--seasonal-three));
}

.service-block:last-of-type .service-placeholder {
    background: linear-gradient(165deg, var(--seasonal-three), var(--seasonal-one));
}

.service-image img {
    width: 100%;
    height: 100%;
    min-height: 500px;
    object-fit: cover;
}

.service-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-xxl);
    background-color: var(--white);
}

.service-content h2 {
    font-family: var(--font-header);
    font-weight: 300;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-md);
}

.service-content p {
    color: var(--seasonal-four);
    line-height: var(--line-relaxed);
    margin-bottom: var(--space-md);
    font-size: var(--text-md);
}

.service-includes {
    margin-bottom: var(--space-xl);
}

.service-includes li {
    font-size: var(--text-sm);
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    color: var(--seasonal-four);
    letter-spacing: var(--letters-normal);
}

.service-includes li:first-child {
    border-top: 1px solid var(--border);
}

/* --- Booking Form --- */
.booking-page {
    /* Header ("Contact" / "Pamusha") sits a little higher, giving the body copy
       below a bit more breathing room. */
    padding-top: 118px;
}

.booking-container {
    max-width: var(--width-page);
    margin: 0 auto;
}

.booking-intro {
    text-align: center;
    margin-bottom: var(--space-xxl);
}

.booking-intro .page-heading {
    font-family: var(--font-header);
    font-weight: 300;
}

.booking-brand-heading {
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.booking-subheading {
    margin-top: calc(-1 * var(--space-sm));
    margin-bottom: var(--space-md);
    letter-spacing: var(--letters-wide);
    text-transform: uppercase;
}

.booking-intro p {
    margin: 0 auto;
    color: var(--seasonal-four);
    max-width: 48ch;
    font-size: calc(var(--text-md) - 0.25rem);
    line-height: var(--line-relaxed);
}

.booking-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--space-xl);
    max-width: var(--width-narrow);
    margin: 0 auto;
}

.form-group-full {
    grid-column: 1 / -1;
}

.form-group-radio {
    grid-column: 1 / -1;
}

.booking-form .btn {
    padding: 8px 28px;
    font-size: calc(var(--text-sm) - 0.1rem);
    letter-spacing: var(--letters-wide);
}

/* "Send Message" button — ~50% smaller on desktop + tablet/iPad. Phones (≤767px)
   keep their touch-sized button via the !important rule in responsive.css. */
.booking-form .btn-contact {
    padding: 4px 14px;
    font-size: calc(var(--text-sm) - 0.18rem);
}

/* Subject radio group */
.form-radio-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px;
    margin-top: 10px;
    width: 100%;
}

.form-radio-option {
    display: flex !important;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    /* Same font / colour as .form-label (FIRST NAME, EMAIL…) but proper-case
       since the options read as natural sentences, not labels. */
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 400;
    letter-spacing: var(--letters-wide);
    text-transform: none;
    color: var(--seasonal-four);
    line-height: 1.4;
    width: 100%;
}

.form-radio-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.form-radio-circle {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid #b8a98e;
    background: transparent;
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.15s ease;
}

.form-radio-option:hover .form-radio-circle {
    border-color: #2d241a;
}

.form-radio-option input[type="radio"]:checked + .form-radio-circle {
    border-color: #2d241a;
}

.form-radio-option input[type="radio"]:checked + .form-radio-circle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2d241a;
}

.form-radio-option input[type="radio"]:focus-visible + .form-radio-circle {
    outline: 2px solid #c19f76;
    outline-offset: 2px;
}

/* Match the .form-label ("What is your enquiry about?") exactly — same size,
   weight, letter-spacing — just proper case instead of uppercase. */
.form-radio-text {
    font-family: var(--font-body);
    font-size: var(--text-xs) !important;
    font-weight: 400;
    letter-spacing: var(--letters-wide);
    line-height: 1.4;
    color: var(--seasonal-four);
}

@media (max-width: 600px) {
    .form-radio-group { grid-template-columns: 1fr; }
}

/* Direct-email note under submit — matches the intro paragraph size beneath
   the "Get in Touch" subheading at the top of the form. */
.form-direct-note {
    margin-top: calc(var(--text-xs) * 3);
    font-style: italic;
    font-weight: 300;
    font-size: calc(var(--text-md) - 0.25rem);
    letter-spacing: var(--letters-normal);
    color: var(--seasonal-four);
    text-align: left;
    line-height: var(--line-relaxed, 1.6);
    text-transform: none;
}

.form-direct-note a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.form-direct-note a:hover {
    color: #2d241a;
}

/* --- About Page --- */
.about-hero {
    padding-top: 160px;
    text-align: center;
    padding-bottom: var(--space-xl);
}

.about-hero .page-heading {
    font-family: var(--font-header);
    font-weight: 300;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.about-minimal {
    padding-top: 0;
    padding-bottom: calc(var(--space-xxxxl) * 0.5);
    padding-left: var(--edge);
    padding-right: var(--edge);
}

.about-copy {
    max-width: var(--width-product);
    margin: 0 auto;
    text-align: center;
}

.about-copy p {
    margin: 0 auto 1.4em;
    max-width: none;
    width: 100%;
    color: var(--seasonal-four);
    font-size: calc(var(--text-md) - 0.25rem);
    line-height: var(--line-relaxed);
}

.about-copy p:last-child {
    margin-bottom: 0;
}

.story-calligraphy {
    font-family: 'Heatwood', 'Trebuchet MS', sans-serif;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    color: var(--chestnut);
    line-height: 1;
    margin-bottom: var(--space-sm);
}

.about-founder {
    padding-top: 0;
    padding-bottom: var(--space-xxxxl);
    padding-left: var(--edge);
    padding-right: var(--edge);
}

.about-founder-grid {
    max-width: var(--width-page);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) 1.1fr;
    gap: var(--space-xxl);
    align-items: start;
}

.founder-portrait-wrap {
    display: flex;
    justify-content: center;
}

.founder-portrait-placeholder {
    width: min(100%, 360px);
    aspect-ratio: 4 / 5;
    border: 1px solid var(--border);
    background: linear-gradient(160deg, var(--seasonal-one), var(--ivory));
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: var(--space-sm);
}

.founder-portrait-placeholder span {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--letters-wide);
    text-transform: uppercase;
    color: var(--chestnut);
}

.founder-copy .overline {
    display: block;
    margin-bottom: var(--space-sm);
}

.founder-copy .section-heading {
    margin-bottom: var(--space-md);
    font-size: clamp(1.6rem, 3vw, var(--text-xxxl));
}

.founder-copy p {
    margin: 0 0 var(--space-sm);
    max-width: 54ch;
    font-size: calc(var(--text-md) - 0.25rem);
    color: var(--seasonal-four);
    line-height: var(--line-relaxed);
}

.founder-copy p:last-child {
    margin-bottom: 0;
}

.about-content {
    padding: 0 var(--edge) var(--space-xxxxl);
}

.about-split {
    max-width: 72rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xs);
    min-height: auto;
    align-items: stretch;
}

.about-split > .about-image,
.about-split > .about-text {
    align-self: stretch;
}

.about-split-reverse {
    direction: rtl;
}

.about-split-reverse > * {
    direction: ltr;
}

.about-split-single {
    grid-template-columns: 1fr;
    max-width: var(--width-page);
    min-height: auto;
}

.about-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-xl) var(--space-lg);
    min-height: 30rem;
    height: 100%;
}

/* So the "Image text gap" slider is the *only* thing between the photo and
   the words — drop the text column's padding on the side adjacent to the image. */
.about-split-reverse .about-text { padding-right: 0; }
.about-split:not(.about-split-reverse):not(.about-split-single) .about-text { padding-left: 0; }

/* When the text column carries a maker / artisan photo, pin the title to the
   top of the column and push the photo to the bottom so it aligns with the
   bottom of the main image on the other side. */
.about-text.has-maker-image {
    justify-content: flex-start;
}

.about-text-maker {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-top: auto;
    align-self: flex-start;
    max-width: 100%;
}

.about-text-maker img {
    display: block;
    max-width: 100%;
    height: auto;
}

.about-lead {
    font-family: var(--font-header);
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-weight: 300;
    line-height: 1.5;
    margin-bottom: var(--space-xl);
    letter-spacing: var(--letters-tight);
}

.about-text p {
    font-size: calc(var(--text-md) - 0.25rem);
    color: var(--seasonal-four);
    line-height: var(--line-relaxed);
    margin: 0 0 1.4em;
}

.about-text p:last-child {
    margin-bottom: 0;
}

/* Paragraph spacing for editable long-text areas across the site */
.pillar-item p,
.product-description p,
.product-details p {
    margin: 0 0 1.4em;
}

.booking-intro p {
    margin: 0 auto 1.4em;
}

.pillar-item p:last-child,
.booking-intro p:last-child,
.product-description p:last-child,
.product-details p:last-child {
    margin-bottom: 0;
}

.about-text .overline {
    display: block;
    margin-bottom: var(--space-sm);
}

.about-text .section-heading {
    margin-bottom: var(--space-md);
}

.about-placeholder {
    width: 100%;
    height: 100%;
    min-height: 500px;
    background: linear-gradient(165deg, var(--seasonal-one), var(--seasonal-two));
}

.about-image {
    min-height: 30rem;
    height: 100%;
}

.about-image img {
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Values Grid --- */
.about-values {
    padding: var(--space-xxxxl) var(--edge);
    background-color: var(--white);
}

.values-grid {
    max-width: var(--width-page);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xxl);
}

.value-item h3 {
    font-family: var(--font-header);
    font-size: var(--text-xxl);
    font-weight: 300;
    letter-spacing: -0.01em;
}

.value-item p {
    color: var(--seasonal-four);
    font-size: var(--text-md);
    line-height: var(--line-relaxed);
}

/* --- About Pillars (Marketplace / Collection) --- */
.our-story-hero-image {
    padding: 0 var(--edge);
    margin: 0 auto var(--space-lg);
}

.our-story-hero-image-wrap {
    max-width: var(--width-product);
    margin: 0 auto;
}

.our-story-hero-image-wrap img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* ─── Our Story: Pamusha split (image + intro text) ──────────────────── */
.our-story-split-section {
    padding-top: 0;
    padding-bottom: var(--space-xxl);
}

.our-story-split {
    max-width: var(--width-product);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: center;
}

.our-story-split-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.our-story-split-text {
    font-size: var(--text-md);
    line-height: var(--line-relaxed);
    color: var(--seasonal-four);
}

.our-story-split-text p {
    margin: 0 0 1.4em;
}

.our-story-split-text p:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .our-story-split {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
}

/* ─── Marketplace pillar: split body + image, then feature below ─────── */
.marketplace-pillar {
    text-align: center;
}

.marketplace-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--space-xl);
    align-items: center;
    margin-top: var(--space-lg);
    text-align: left;
}

.marketplace-split-text {
    font-size: calc(var(--text-md) - 0.1rem);
    line-height: var(--line-relaxed);
    color: var(--seasonal-four);
}

.marketplace-split-text p {
    margin: 0 0 1.4em;
}

.marketplace-split-text p:last-child {
    margin-bottom: 0;
}

.marketplace-split-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

@media (max-width: 768px) {
    .marketplace-split {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
        text-align: center;
    }
}

.marketplace-feature-row {
    margin: var(--space-xl) auto 0;
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

.marketplace-feature {
    margin: 0;
    flex: 0 1 auto;
    max-width: 22rem;
    text-align: center;
}

.marketplace-feature img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.marketplace-feature figcaption {
    margin-top: var(--space-sm);
    font-size: var(--text-sm);
    color: var(--seasonal-four);
    font-style: italic;
    letter-spacing: 0.02em;
}

/* ─── Our Sellers pillar: small portraits with captions ──────────────── */
.sellers-pillar {
    text-align: center;
    padding-top: var(--space-md);
}

.sellers-heading {
    font-family: var(--font-header);
    font-size: var(--text-lg);
    font-weight: 300;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--chestnut);
    margin: 0 0 var(--space-lg);
}

.sellers-body {
    max-width: 60ch;
    margin: 0 auto var(--space-lg);
    color: var(--seasonal-four);
}

.sellers-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    max-width: 32rem;
    margin: 0 auto;
}

.sellers-grid-item {
    margin: 0;
    text-align: center;
}

.sellers-grid-item img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.sellers-grid-item figcaption {
    margin-top: var(--space-sm);
    font-size: var(--text-sm);
    letter-spacing: 0.06em;
    color: var(--chestnut);
}

@media (max-width: 480px) {
    .sellers-grid {
        grid-template-columns: 1fr;
        max-width: 18rem;
    }
}

.about-pillars {
    background-color: var(--ivory);
    padding-top: 0;
    padding-bottom: var(--space-xxl);
}

.pillars-grid {
    max-width: var(--width-product);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xxl);
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--border);
}

.pillar-item {
    text-align: center;
}

.pillar-item .overline {
    display: block;
    margin-bottom: calc(var(--space-md) / 2);
}

.pillar-item .overline.marketplace-overline-tiny {
    font-size: calc(var(--text-sm) * 0.5);
    letter-spacing: 0.08em;
}

.pillar-item .section-heading {
    font-family: var(--font-body);
    font-size: calc(var(--text-md) - 0.25rem);
    font-weight: 400;
    letter-spacing: var(--letters-normal);
    color: var(--chestnut);
    margin-bottom: var(--space-sm);
}

.pillar-item .section-heading.marketplace-style-heading {
    font-family: 'Heatwood', 'Trebuchet MS', sans-serif;
    font-size: clamp(0.9rem, 2.025vw, 1.575rem);
    font-weight: 400;
    letter-spacing: 0.015em;
    color: var(--chestnut);
    transform: rotate(-0.7deg);
    text-transform: none;
    margin-top: calc(-1 * var(--line-relaxed) * 1em);
}

.pillar-item p {
    color: var(--seasonal-four);
    font-size: calc(var(--text-md) - 0.25rem);
    line-height: var(--line-relaxed);
    max-width: none;
    width: 100%;
    margin: 0 0 1.4em;
}

.pillar-item p:last-child {
    margin-bottom: 0;
}

.pillar-item-image {
    margin: calc(var(--space-lg) / 2) auto;
    max-width: 100%;
}

.pillar-item-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.pillar-gallery {
    margin-top: var(--space-lg);
    display: flex;
    gap: var(--space-xxs);
    align-items: stretch;
    width: 100%;
}

.pillar-gallery-item {
    margin: 0;
    flex: var(--ratio, 1) 1 0;
    min-width: 0;
}

.pillar-gallery-item img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

@media (max-width: 640px) {
    .pillar-gallery {
        flex-direction: column;
        gap: var(--space-xs);
    }

    .pillar-gallery-item {
        flex: 1 1 auto;
    }
}

.pillars-closing {
    max-width: var(--width-page);
    margin: var(--space-xl) auto 0;
    font-family: var(--font-header);
    font-size: var(--text-xl);
    font-weight: 300;
    letter-spacing: -0.01em;
    color: var(--chestnut);
    max-width: 50ch;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .service-split {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .service-split-reverse {
        direction: ltr;
    }

    .service-image {
        order: -1;
    }

    .service-placeholder,
    .service-image img {
        min-height: 300px;
    }

    .service-content {
        padding: var(--space-xl) var(--space-lg);
    }

    .booking-form {
        grid-template-columns: 1fr;
    }

    .about-split {
        grid-template-columns: 1fr;
        min-height: auto;
        gap: var(--space-lg);
    }

    .about-text {
        padding: var(--space-xl) var(--space-lg);
    }

    .about-founder-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .founder-copy {
        text-align: center;
    }

    .founder-copy p {
        margin-left: auto;
        margin-right: auto;
    }

    .about-image {
        order: -1;
    }

    .about-placeholder,
    .about-image img {
        width: 100%;
        min-height: 0;
    }

    .about-image,
    .about-text,
    .about-image img {
        min-height: auto;
    }

    .values-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .pillars-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
}

@media (max-width: 640px) {
    .pillar-item .section-heading.marketplace-style-heading {
        font-size: clamp(1.05rem, 5.85vw, 1.65rem);
        letter-spacing: 0.01em;
    }
}

/* ─── Matisse layout (Our Story) ─────────────────────────────────────── */

.matisse-block {
    max-width: var(--width-product);
    margin: 0 auto;
    padding-top: var(--space-xxl);
    padding-bottom: var(--space-xxl);
}

.matisse-block-first {
    padding-top: var(--space-xxxxl);
    padding-bottom: calc(var(--space-xxl) / 8);
    padding-right: 0;
    max-width: 120rem;
}

.matisse-block-wide {
    max-width: 120rem;
    padding-top: calc(var(--space-xxl) / 8);
    padding-right: 0;
}

.matisse-block-header {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.matisse-block-header-hero .overline {
    display: block;
    margin-bottom: var(--space-md);
}

.matisse-block-header-hero .page-heading {
    font-family: var(--font-header);
    font-weight: 300;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.matisse-block-title {
    font-family: var(--font-header);
    font-size: clamp(1.8rem, 3.6vw, var(--text-xxxl));
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--chestnut);
    margin: 0;
    line-height: 1.1;
}

.matisse-block-overline-tiny {
    display: block;
    font-size: calc(var(--text-sm) * 0.5);
    letter-spacing: 0.08em;
    margin-bottom: var(--space-xs);
}

.matisse-block-title-script {
    font-family: 'Heatwood', 'Trebuchet MS', sans-serif;
    font-size: clamp(1.5rem, 3.5vw, 2.4rem);
    font-weight: 400;
    letter-spacing: 0.015em;
    text-transform: none;
    transform: rotate(-0.7deg);
    margin-top: 0;
}

.matisse-block-subtitle {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--seasonal-four);
    letter-spacing: 0.04em;
    margin: var(--space-xs) 0 0;
    font-weight: 400;
}

.matisse-block-image {
    margin: 0 0 var(--space-xl);
}

.matisse-block-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px;
}

.matisse-block-intro-split {
    display: grid;
    grid-template-columns: minmax(15rem, 26rem) minmax(0, 1fr);
    gap: var(--space-sm);
    align-items: center;
    margin-bottom: var(--space-xl);
}

.matisse-block-intro-split.gap-xxs { gap: var(--space-xxs); }
.matisse-block-intro-split.gap-xs { gap: var(--space-xs); }
.matisse-block-intro-split.gap-sm { gap: var(--space-sm); }
.matisse-block-intro-split.gap-md { gap: var(--space-md); }
.matisse-block-intro-split.gap-lg { gap: var(--space-lg); }
.matisse-block-intro-split.gap-xl { gap: var(--space-xl); }

.matisse-block-intro-split .matisse-block-image {
    margin: 0;
}

.matisse-block-intro-split .matisse-block-body {
    max-width: none;
    margin: 0;
    text-align: left;
    align-self: end;
    display: block;
}

.matisse-block-intro-split .matisse-block-inline-header {
    margin-bottom: var(--space-sm);
}

/* Image-left variant: image on left, text+heading on right, bottom-anchored */
.matisse-block-intro-split.image-left {
    grid-template-columns: minmax(0, 1fr) 26rem;
}

.matisse-block-intro-split.image-left .matisse-block-body {
    align-self: start;
    justify-self: end;
    width: 100%;
    display: block;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.matisse-block-intro-split.image-left .matisse-block-text,
.matisse-block-intro-split.image-left .matisse-block-text p {
    padding-right: 0;
    margin-right: 0;
    width: 100%;
    box-sizing: border-box;
}

.matisse-block-intro-split.image-left .matisse-block-text.text-align-justify p {
    text-align: justify;
    text-align-last: right;
}

.matisse-block-intro-split.image-left .matisse-block-marketplace-overline {
    display: block;
    margin: 0 0 var(--space-sm);
    text-align: right;
}

a.matisse-block-marketplace-overline-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.18s ease;
}

a.matisse-block-marketplace-overline-link:hover {
    opacity: 0.65;
}

.matisse-block-intro-split.image-left .matisse-block-title-script {
    display: block;
    margin: 0 0 var(--space-sm);
    font-size: clamp(0.77rem, 1.66vw, 1.28rem);
    line-height: 1.1;
    color: var(--chestnut);
    white-space: nowrap;
    text-align: right;
}

.matisse-block-intro-split.image-left .matisse-block-body {
    text-align: right;
}

.matisse-block-intro-split.image-left .matisse-block-text.text-align-justify {
    text-align-last: right;
}

.matisse-block-inline-header {
    text-align: left;
}

.matisse-block-inline-header .overline {
    display: block;
    margin-bottom: var(--space-sm);
    text-align: left;
}

.matisse-block-inline-header .page-heading {
    font-family: var(--font-header);
    font-weight: 300;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: clamp(1.6rem, 3.2vw, 2.6rem);
    line-height: 1.1;
    margin: 0;
    text-align: left;
}

@media (max-width: 768px) {
    /* Both selectors listed so this beats the `.image-left` variant's
       `grid-template-columns: minmax(0, 1fr) 26rem` (2-class specificity),
       which otherwise keeps a fixed 26rem column and overflows narrow phones. */
    .matisse-block-intro-split,
    .matisse-block-intro-split.image-left {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .matisse-block-intro-split .matisse-block-body {
        text-align: center;
    }

    /* On a single-column stack, right-aligned text from the image-left variant
       reads awkwardly — center it like the default. */
    .matisse-block-intro-split.image-left .matisse-block-body,
    .matisse-block-intro-split.image-left .matisse-block-text.text-align-justify p,
    .matisse-block-intro-split.image-left .matisse-block-title-script,
    .matisse-block-intro-split.image-left .matisse-block-marketplace-overline {
        text-align: center;
    }
}

.matisse-block-body {
    max-width: 60ch;
    margin: 0 auto var(--space-xl);
    text-align: center;
}

.matisse-block-headline {
    font-family: var(--font-header);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--chestnut);
    margin: 0 0 var(--space-md);
    letter-spacing: 0.01em;
}

.matisse-block-text {
    color: var(--seasonal-four);
    line-height: var(--line-relaxed);
}

.matisse-block-text p {
    margin: 0 0 1em;
}

.matisse-block-text p:last-child {
    margin-bottom: 0;
}

.matisse-block-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-sm);
}

.matisse-block-gallery-item {
    margin: 0;
}

.matisse-block-gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 5;
    border-radius: 2px;
}

.matisse-block-gallery-item figcaption {
    margin-top: var(--space-sm);
    font-size: var(--text-sm);
    letter-spacing: 0.06em;
    color: var(--chestnut);
    text-align: center;
}

.matisse-block-gallery-small {
    grid-template-columns: repeat(2, 1fr);
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
    gap: var(--space-lg);
}

.matisse-block-gallery-small .matisse-block-gallery-item img {
    aspect-ratio: 3 / 4;
}

@media (max-width: 640px) {
    .matisse-block-gallery {
        grid-template-columns: 1fr;
    }

    .matisse-block-gallery-small {
        grid-template-columns: 1fr;
        max-width: 18rem;
    }
}

/* Intro / body text size classes (admin-controllable) */
.intro-size-xxs { font-size: calc(var(--text-xs) * 0.85); }
.intro-size-xs { font-size: var(--text-xs); }
.intro-size-sm { font-size: var(--text-sm); }
.intro-size-md { font-size: var(--text-md); }
.intro-size-lg { font-size: var(--text-lg); }
.intro-size-xl { font-size: var(--text-xl); }

/* Heading size classes (admin-controllable, applied to section titles) */
.heading-size-xxs { font-size: calc(var(--text-xs) * 0.85) !important; }
.heading-size-xs  { font-size: var(--text-xs) !important; }
.heading-size-sm  { font-size: var(--text-sm) !important; }
.heading-size-md  { font-size: var(--text-md) !important; }
.heading-size-lg  { font-size: var(--text-lg) !important; }
.heading-size-xl  { font-size: var(--text-xl) !important; }

/* ── Thread page (/community-collective/) — editorial layout ─────────────── */
.thread-hero {
    max-width: 78rem;
    margin: 0 auto;
    padding-top: var(--space-xxxxl);
    padding-bottom: var(--space-xl);
    text-align: center;
}

.thread-overline {
    display: block;
    margin-bottom: var(--space-md);
    text-align: center;
}

.thread-heading {
    font-family: 'Heatwood', 'Trebuchet MS', sans-serif;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--chestnut);
    line-height: 1.05;
    margin: 0 auto var(--space-md);
    font-size: clamp(2.2rem, 6vw, 4.5rem);
}

.thread-subheading {
    font-family: var(--font-header);
    font-style: italic;
    font-weight: 400;
    color: var(--chestnut);
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    letter-spacing: 0.02em;
    margin: 0 auto var(--space-lg);
    max-width: 48ch;
}

.thread-intro {
    color: var(--seasonal-four);
    font-size: var(--text-sm);
    line-height: var(--line-relaxed);
    max-width: 58ch;
    margin: 0 auto;
    text-align: left;
}

.thread-intro p {
    margin: 0 0 1.1em;
}

.thread-intro p:last-child { margin-bottom: 0; }

/* When admin picks centre/right alignment, honour it but keep readable width. */
.thread-intro.text-align-center  { text-align: center; }
.thread-intro.text-align-right   { text-align: right; }
.thread-intro.text-align-justify { text-align: left; }

.thread-hero-image {
    margin: var(--space-xxl) auto 0;
    max-width: 64rem;
}

.thread-hero-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px;
}

.thread-section {
    max-width: 64rem;
    margin: 0 auto;
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
    text-align: center;
}

.thread-section-header {
    margin-bottom: var(--space-lg);
}

.thread-section-header .overline {
    display: block;
    margin-bottom: var(--space-sm);
}

.thread-section-title {
    font-family: var(--font-header);
    font-weight: 300;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--chestnut);
    font-size: clamp(1.3rem, 2.6vw, 2rem);
    line-height: 1.2;
    margin: 0;
}

.thread-section-image {
    margin: 0 auto var(--space-lg);
    max-width: 56rem;
}

.thread-section-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px;
}

.thread-section-body {
    color: var(--seasonal-four);
    font-size: var(--text-sm);
    line-height: var(--line-relaxed);
    max-width: 58ch;
    margin: 0 auto;
}

.thread-section-body p { margin: 0 0 1.1em; }
.thread-section-body p:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
    .thread-hero { padding-top: var(--space-xxl); }
    .thread-intro { font-size: var(--text-xs); }
}

/* ── Thread images (admin-controlled images on /community-collective/) ── */
/* ── Thread page · editorial triptych ────────────────────────────────────── */
.thread-editorial {
    --edge-pad: clamp(1.5rem, 4vw, 4rem);
    padding-bottom: var(--space-xxxxl);
}

.thread-editorial-hero {
    max-width: 96rem;
    margin: 0 auto;
    /* Match the Marketplace page hero (shop.css .shop-header) so the title
       sits at the same vertical position on both pages. */
    padding-top: 140px;
    padding-bottom: var(--space-lg);
    text-align: center;
}

.thread-editorial-hero .overline {
    display: block;
    margin-bottom: var(--space-md);
}

/* Match the Marketplace page heading exactly — same Heatwood font, same
   fluid size and tracking, so "The Collective Marketplace" reads at the
   same scale as "Marketplace" on /marketplace/. */
.thread-editorial-hero .page-heading {
    font-family: 'Heatwood', 'Trebuchet MS', sans-serif !important;
    font-size: clamp(1.5rem, 3.375vw, 2.625rem) !important;
    font-weight: 400 !important;
    letter-spacing: 0.015em !important;
    color: var(--chestnut);
    text-transform: none !important;
    transform: none !important;
    line-height: 1.1;
}

@media (max-width: 640px) {
    .thread-editorial-hero .page-heading {
        font-size: clamp(1.05rem, 5.85vw, 1.65rem) !important;
        letter-spacing: 0.01em !important;
    }
}

.thread-editorial-spread {
    max-width: 96rem;
    /* Nudge the whole spread (text + both images) down ~7 lines. */
    margin: 9.5rem auto 0;
    padding: 0 var(--edge-pad);
    display: grid;
    /* Text on one side, both images stacked on the other. */
    grid-template-columns: minmax(min(26rem, 100%), 1fr) minmax(0, 1.05fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    /* Top-align so the first image lines up with the top of the copy
       (the "The Art of Community, Made by Hand" overline). */
    align-items: start;
}

.thread-editorial-pillars {
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1vw, 0.9rem);
    /* Scale both images so the stacked pair lines up with the top and bottom
       of the text column on the other side. Push the pair left so they sit
       close to the text, and add top space so they don't crowd the title. */
    width: 70%;
    margin-left: 0;
    margin-right: auto;
    padding-top: 0;
}

.thread-editorial-pillar {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.thread-editorial-pillar img {
    /* Default: show the photo at its full natural aspect ratio. */
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 2px;
}

/* Trim the bottom of the craft image just slightly so the pair sits cleaner. */
.thread-editorial-pillar--craft img {
    aspect-ratio: 4 / 5.6;
    height: auto;
    object-fit: cover;
    object-position: top;
}

.thread-editorial-caption {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 1px;
}

.thread-editorial-caption-label {
    font-family: var(--font-body);
    font-size: calc(var(--text-xs) * 0.95);
    letter-spacing: var(--letters-xwide);
    text-transform: uppercase;
    color: var(--seasonal-four);
}

.thread-editorial-caption-text {
    font-family: var(--font-header);
    font-style: italic;
    font-size: var(--text-md);
    line-height: 1.35;
    color: var(--chestnut);
    letter-spacing: 0.005em;
}

.thread-editorial-copy {
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: 0 var(--space-sm);
    max-width: 38rem;
    margin: 0 auto;
}

.thread-editorial-overline {
    display: block;
    color: var(--seasonal-four);
}

.thread-editorial-title {
    font-family: var(--font-header);
    font-weight: 300;
    font-size: clamp(1.7rem, 2.6vw, 2.6rem);
    line-height: 1.1;
    letter-spacing: 0.01em;
    color: var(--chestnut);
    margin: 0;
}

.thread-editorial-body {
    color: var(--seasonal-four);
    font-size: var(--text-sm);
    line-height: var(--line-relaxed);
}

.thread-editorial-body p {
    margin: 0 0 1.1em;
}

.thread-editorial-body p:last-child {
    margin-bottom: 0;
}

/* The mobile-hoisted maker figure + overline (rendered just under the heading)
   only exist for ≤900px; desktop keeps the originals inside .thread-editorial. */
.thread-editorial-mobilehead {
    display: none;
}

@media (max-width: 900px) {
    .thread-editorial-spread {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
        /* was 9.5rem/152px unconditionally — pull the body/craft up on mobile. */
        margin-top: 1.5rem !important;
    }

    .thread-editorial-pillars {
        max-width: 36rem;
        margin: 0 auto;
        width: 100%;
    }

    .thread-editorial-copy {
        text-align: left;
        padding: 0;
    }

    /* Heading sits close to the nav — was a fixed 140px on desktop. */
    .thread-editorial-hero {
        padding-top: 1.5rem !important;
    }

    /* Show the hoisted maker figure + overline under the heading; hide the
       originals in their desktop positions and drop the "Collective
       Marketplace" title (kept on desktop). */
    .thread-editorial-mobilehead {
        display: block;
    }
    .thread-editorial-pillars .thread-editorial-pillar--maker {
        display: none !important;
    }
    .thread-editorial-copy .thread-editorial-overline {
        display: none !important;
    }
    .thread-editorial-title {
        display: none !important;
    }

    /* Crop the hoisted maker image to the same 327px width as the craft image
       (viewport − 2×24px edge padding). */
    .thread-editorial-mobilehead .thread-editorial-pillar--maker {
        padding: 0 24px !important;
        box-sizing: border-box !important;
    }
    .thread-editorial-pillar--maker + .thread-editorial-overline {
        display: block;
        margin-top: 0.5rem !important;
        padding: 0 24px;
        box-sizing: border-box;
    }
}

.thread-images {
    max-width: var(--width-site);
    margin: 0 auto;
    padding-left: var(--edge);
    padding-right: var(--edge);
    display: flex;
    flex-direction: column;
}

.thread-image {
    margin: 0;
}

.thread-image--left  { align-self: flex-start; }
.thread-image--center{ align-self: center;     }
.thread-image--right { align-self: flex-end;   }
.thread-image--full  { align-self: stretch; }

.thread-image--full img { width: 100% !important; }

/* Cursive Heatwood font utility — matches the Marketplace heading. */
.page-heading--script {
    font-family: 'Heatwood', 'Trebuchet MS', sans-serif !important;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none !important;
}

/* Title-case page headings (Thread + Directory + Marketplace): same serif as
   the Founder hero but without the uppercase transform — so "Thread" stays
   as "Thread". */
.page-heading--titlecase,
.artisans-heading {
    font-family: var(--font-header) !important;
    font-weight: 300 !important;
    font-size: var(--text-display) !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
    line-height: 1.05;
    transform: none !important;
}

/* Cursive Heatwood at the same large hero size — Title Case. */
.page-heading--cursive-large {
    font-family: 'Heatwood', 'Trebuchet MS', sans-serif !important;
    font-weight: 400 !important;
    font-size: var(--text-display) !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    line-height: 1.05;
    transform: none !important;
}

/* Section subtitle — small italic line below the section title (e.g. founder credentials). */
.section-subtitle {
    /* Match the .overline ("MEET THE FOUNDER") exactly: same font, size,
       letter-spacing, colour — just italic + proper case instead of uppercase. */
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 400;
    font-size: var(--text-sm);
    letter-spacing: var(--letters-wide);
    color: var(--seasonal-four);
    margin: calc(-1 * var(--space-sm)) 0 var(--space-md);
    line-height: 1.4;
    text-transform: none;
}

/* When the about-image has explicit width/height, drop the default 100%
   sizing so the inline pixel values actually take effect. */
.about-image.about-image--sized {
    min-height: 0;
    height: auto;
}
.about-image.about-image--sized img {
    width: auto;
    height: auto;
    min-height: 0;
}

/* ── About / Founder page: centre everything to the middle of the page ── */
.about-content .about-split {
    align-items: center;       /* vertically centre the text column next to the image */
    justify-items: center;     /* horizontally centre each column's content within its cell */
}

/* Default headings centred. Body paragraph follows its body_alignment value
   so the admin justify / left / right / center toggle takes effect. */
.about-content .about-text {
    text-align: center;
}

.about-content .about-text .overline,
.about-content .about-text .section-subtitle,
.about-content .about-text .section-heading {
    display: block;
    text-align: center;
}

/* Centre the image within its own cell too (in case the cell is wider than the image) */
.about-content .about-image {
    justify-self: center;
}

/* Defensive: clip anything that tries to overflow out of the about grid into
   its sibling cell. Image + text always read in their own columns. */
.about-content .about-split {
    overflow: hidden;
}
.about-content .about-image,
.about-content .about-text {
    min-width: 0;
}

/* About page: bring text snug to the image (was using full grid gap). */
.about-content .about-split {
    gap: var(--space-md);
}

.about-content .about-text {
    padding-left: 0;
    padding-right: 0;
}

/* "Shop the … Collection" link under a content-page section paragraph.
   Small, italic, and pinned to the left so it lines up with the "Shop"
   overline above (the body block itself is right-aligned). */
.matisse-block-cta {
    display: block;
    width: fit-content;
    margin-top: var(--space-md);
    margin-right: auto;
    margin-left: 0;
    font-family: var(--font-body);
    font-style: italic;
    font-size: var(--text-xs);
    letter-spacing: var(--letters-normal);
    text-transform: none;
    text-align: left;
    color: var(--chestnut);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: opacity var(--transition-fast);
}

.matisse-block-cta:hover {
    opacity: 0.6;
}