/* =====================================================
   Francis Davis Millet Theme — main.css
   ===================================================== */

/* ── BRAND TYPOGRAPHY ──
   Per FDMillet.org Brand Guidelines:
     Primary font (headings)   — Cormorant Garamond
     Secondary font (body)     — Crimson Text
     Caption font              — Raleway Light Italic
   H1: Cormorant Garamond Regular, 36px / 40px line-height
   H2: Cormorant Garamond SemiBold, 24px / 30px line-height
   p:  Crimson Text Regular, 16px / 20px line-height
   c:  Raleway Light Italic, 14px / 16px line-height */
:root {
    --font-heading: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Crimson Text', Georgia, serif;
    --font-caption: 'Raleway', Arial, sans-serif;
}

/* ── RESET & BASE ── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #FFF;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 20px;
    color: #000;
    -webkit-font-smoothing: antialiased;
}

h1 {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 36px;
    line-height: 40px;
}

h2 {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 24px;
    line-height: 30px;
}

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

a {
    text-decoration: none;
}

/* ── PAGE WRAPPER ──
   No max-width here on purpose: header, hero, and footer are full-bleed
   and should fill the viewport on any screen size. 1440px was only ever
   the Figma reference width, not a ceiling for the live site. Sections
   that need a comfortable reading width (cards, body copy) constrain
   themselves internally via clamp()-based padding instead. */
.page {
    display: flex;
    width: 100%;
    min-height: 100vh;
    flex-direction: column;
    align-items: flex-start;
    background: #FFF;
    overflow-x: hidden;
}

/* Sticky footer: .site-main grows to fill any leftover vertical space on
   short pages, so .site-footer always sits flush with the bottom of the
   viewport instead of floating partway down with a gap of white space
   below it. On tall pages this has no effect — content just scrolls
   normally, same as before. */
.site-main {
    width: 100%;
    flex: 1 0 auto;
}

/* =====================================================
   HEADER
   ===================================================== */
.site-header {
    display: flex;
    height: 92px;
    width: 100%;
    padding: 19px 25px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    background: #262E0A;
    position: relative;
    z-index: 50;
}

/* Transparent header overlaid on the homepage hero image */
.site-header--overlay {
    background: transparent;
    position: absolute;
    top: 0;
    left: 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: opacity 0.2s ease;
    z-index: 2;
}

.logo:hover {
    opacity: 0.85;
}

.logo-mark {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    display: block;
}

.logo-wordmark {
    height: 40px;
    width: auto;
    display: block;
}

/* ── Mobile hamburger toggle (hidden on desktop) ── */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 2;
    flex-shrink: 0;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #FFF;
    border-radius: 1px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle--open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle--open span:nth-child(2) {
    opacity: 0;
}

.nav-toggle--open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── Navigation ── */
.site-nav {
    display: flex;
    padding: 4px 0;
    justify-content: center;
    align-items: center;
    gap: 25px;
}

.site-nav .nav-link {
    color: #FFF;
    font-family: var(--font-body);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.site-nav .nav-link:hover,
.site-nav .nav-link:focus {
    opacity: 0.75;
}

/* ── Nav dropdown (e.g. Resources) ── */
.nav-item--has-children {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-link--toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 4px 0;
    cursor: pointer;
}

.nav-caret {
    font-size: 10px;
    display: inline-block;
    opacity: 0.85;
    transition: transform 0.2s ease;
}

.nav-item--has-children.is-open .nav-caret {
    transform: rotate(180deg);
}

.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin: 12px 0 0;
    padding: 8px 0;
    list-style: none;
    min-width: 230px;
    background: #262E0A;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 50;
}

.nav-item--has-children.is-open .sub-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.nav-sublink {
    display: block;
    padding: 10px 20px;
    color: #FFF;
    font-family: var(--font-body);
    font-size: 14px;
    white-space: nowrap;
    text-decoration: none;
}

.nav-sublink:hover,
.nav-sublink:focus {
    background: rgba(239, 186, 95, 0.15);
    color: #EFBA5F;
}

/* ── Enquiry Button ── */
.btn-enquiry {
    display: flex;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    background: #EFBA5F;
    color: #262E0A;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.15s ease;
}

.btn-enquiry:hover,
.btn-enquiry:focus {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* =====================================================
   HERO
   ===================================================== */
.hero {
    width: 100%;
    height: 350px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.14) -54.13%,
        rgba(0, 0, 0, 0.55) 95.66%
    );
}

/* =====================================================
   HOMEPAGE CAROUSEL
   Full-bleed slides; content sits in a bordered card.
   ===================================================== */
.home-carousel {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}

.home-slide {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 120px 60px 80px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.home-slide.is-active {
    display: flex;
}

/* Darkens the painting so white text stays readable. */
.home-slide-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1;
}

/* ── The bordered card ── */
.home-slide-card {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "body portrait"
        "actions actions";
    gap: 24px 30px;
    width: 100%;
    max-width: 1120px;
    padding: 30px;
    background: rgba(20, 24, 8, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 4px;
}

.home-slide-body {
    grid-area: body;
    min-width: 0;
}

/* ── Slide 4: triptych of 3 independent paintings ──
   No shared background, no card, no button — each tile is its own full-bleed
   clickable link straight to that painting's page. */
.home-slide--triptych {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
}

.home-triptych {
    display: flex;
    width: 100%;
    height: 100%;
}

.home-triptych-tile {
    position: relative;
    flex: 1 1 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #262E0A;
    color: #FFF;
    overflow: hidden;
}

.home-triptych-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.home-triptych-text {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px;
    background: rgba(20, 24, 8, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 4px;
}

.home-triptych-heading {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.home-triptych-body {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 300;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

.home-triptych-btn {
    width: 100%;
    max-width: 240px;
    height: 42px;
    font-size: 13px;
}

@media (max-width: 900px) {
    .home-triptych {
        flex-direction: column;
    }
}

/* ── Compact card (slide 2 only) ──
   Text + button, no portrait. Per Figma dev-mode spec: 330px fixed width,
   height hugs its content, 15px padding on all sides. Sits bottom-left of
   the slide instead of the centered two-column layout used elsewhere. */
.home-slide-card--compact {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    grid-template-areas: none;
    width: 100%;
    max-width: 330px;
    padding: 15px;
    gap: 15px;
    align-self: flex-end;
    margin-right: auto;
}

.home-slide-card--compact .home-slide-btn {
    width: 100%;
    height: 46px;
}

.home-slide-heading {
    color: #FFF;
    font-family: var(--font-heading);
    font-size: 34px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
    margin: 0 0 16px;
}

.home-slide-copy p {
    color: #FFF;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 300;
    line-height: 1.65;
    margin: 0 0 12px;
}

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

/* ── Portrait ── */
.home-slide-portrait {
    grid-area: portrait;
    width: 369px;
    flex-shrink: 0;
}

.home-slide-portrait img {
    display: block;
    width: 100%;
    height: 483px;
    object-fit: cover;
    border-radius: 2px;
}

/* ── Button ── */
.home-slide-actions {
    grid-area: actions;
    display: flex;
    justify-content: center;
}

.home-slide-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 311px;
    height: 50px;
    border-radius: 25px;
    background: #EFBA5F;
    color: #262E0A;
    font-family: var(--font-body);
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: filter 0.2s ease, transform 0.15s ease;
}

.home-slide-btn:hover,
.home-slide-btn:focus {
    filter: brightness(1.07);
    transform: translateY(-1px);
}

/* ── Next arrow ── */
.home-carousel-next,
.home-carousel-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    background: rgba(20, 24, 8, 0.55);
    color: #FFF;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, opacity 0.2s ease;
}

.home-carousel-next {
    right: 18px;
}

.home-carousel-prev {
    left: 18px;
}

.home-carousel-next:hover,
.home-carousel-next:focus,
.home-carousel-prev:hover,
.home-carousel-prev:focus {
    background: rgba(20, 24, 8, 0.8);
}

/* ── Dots ── */
.home-carousel-dots {
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 10px;
}

.home-carousel-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background 0.2s ease;
}

.home-carousel-dot.is-active {
    background: #EFBA5F;
    border-color: #EFBA5F;
}

/* =====================================================
   CONTENT SECTION
   ===================================================== */
.content {
    display: flex;
    padding: 25px clamp(20px, 13vw, 190px);
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    width: 100%;
    flex-wrap: wrap;
}

/* ── Left: text column ── */
.content-text {
    flex: 1 1 320px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.content-text h1 {
    color: #000;
    font-family: var(--font-heading);
    font-size: 36px;
    font-weight: 400;
    line-height: 40px;
    margin-bottom: 4px;
}

.content-text h2 {
    color: #000;
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 600;
    line-height: 30px;
}

.content-text p,
.content-text .wp-block-paragraph {
    color: #000;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 300;
    line-height: 1.75;
}

/* WordPress block editor paragraph spacing */
.content-text > * + * {
    margin-top: 16px;
}

/* ── Right: aside column ── */
.content-aside {
    width: 282px;
    max-width: 100%;
    flex: 1 1 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.portrait {
    width: 100%;
    aspect-ratio: 282 / 262;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.essay-caption {
    color: #000;
    font-family: var(--font-caption);
    font-size: 14px;
    font-style: italic;
    font-weight: 300;
    line-height: 16px;
}

/* ── Download PDF button ── */
.btn-pdf {
    display: flex;
    width: 100%;
    padding: 10px;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    background: #EFBA5F;
    color: #262E0A;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.15s ease;
}

.btn-pdf:hover,
.btn-pdf:focus {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* =====================================================
   FOOTER
   ===================================================== */
.site-footer {
    display: flex;
    height: 183px;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    background: #262E0A;
    padding: 0 40px;
}

.footer-disclaimer {
    color: #FFF;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 300;
    text-align: center;
    line-height: 1.65;
    max-width: 900px;
}

.footer-institute {
    color: #FFF;
    font-family: var(--font-body);
    font-size: 13px;
    font-style: italic;
    font-weight: 700;
    text-align: center;
}

.footer-copyright {
    color: #FFF;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 300;
    text-align: center;
}

/* =====================================================
   GALLERY GRID PAGE
   ===================================================== */
.gallery-section {
    width: 100%;
    padding: 40px clamp(20px, 13vw, 190px) 60px;
}

/* ── Sticky search bar ── */
.gallery-searchbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 0;
    margin-bottom: 24px;
    background: #FFF;
    border-bottom: 1px solid #e0ddd5;
}

.admin-bar .gallery-searchbar {
    top: 32px;
}

.gallery-title {
    color: #000;
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0;
}

.gallery-search-input {
    flex: 0 1 320px;
    padding: 9px 14px;
    border: 1px solid #262E0A;
    border-radius: 4px;
    background: #FFF;
    color: #000;
    font-family: var(--font-body);
    font-size: 14px;
}

.gallery-search-input:focus {
    outline: 2px solid #EFBA5F;
    outline-offset: 1px;
}

/* ── Gallery grid ──
   True masonry (natural image heights, no cropping) WITH guaranteed
   left-to-right/top-to-bottom order — the old CSS-columns approach could
   only give you one or the other, never both, since columns fill
   top-to-bottom per column regardless of source order. This uses CSS Grid
   with a fine-grained row unit; JS (in page-gallery.php) measures each
   item's actual rendered height once its image loads and sets how many
   grid rows it should span, producing a waterfall layout while grid's
   normal row-major auto-placement keeps items in date order. */
.gallery-masonry {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.gallery-item {
    display: block;
    text-decoration: none;
    color: #000;
    transition: opacity 0.2s ease;
}

.gallery-item:hover {
    opacity: 0.82;
}

.gallery-item-image {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    border: 1px solid #e0ddd5;
}

.gallery-item-placeholder {
    width: 100%;
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8e5de;
    color: #888;
    font-size: 13px;
    font-family: var(--font-body);
    border: 1px solid #e0ddd5;
}

.gallery-item-title {
    display: block;
    padding: 8px 2px 0;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    color: #000;
}

/* ── Footer: count + show more ── */
.gallery-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 24px;
    margin-top: 8px;
    border-top: 1px solid #e0ddd5;
}

.gallery-search-input--bottom {
    margin-left: auto;
}

.gallery-count {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 300;
    color: #555;
}

.gallery-showmore {
    padding: 10px 18px;
    border: 1px solid #262E0A;
    border-radius: 4px;
    background: transparent;
    color: #262E0A;
    font-family: var(--font-body);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.gallery-showmore:hover {
    background: #262E0A;
    color: #FFF;
}

.gallery-noresults {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 300;
    color: #666;
    padding: 40px 0;
}

.gallery-empty {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 300;
    color: #666;
    padding: 40px 0;
}

/* =====================================================
   SINGLE PAINTING DETAIL PAGE
   ===================================================== */
.painting-back {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 32px clamp(20px, 13vw, 190px) 0;
    margin: 0;
    color: #262E0A;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.painting-back:hover {
    opacity: 0.65;
}

.painting-title {
    font-family: var(--font-heading);
    font-size: 36px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #000;
    line-height: 1.2;
    margin-bottom: 14px;
}

.painting-meta-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}

.painting-meta-line {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 300;
    color: #000;
    line-height: 1.6;
}

.painting-meta-line strong {
    font-weight: 700;
}

.painting-divider {
    border: none;
    border-top: 1px solid #000;
    margin-bottom: 20px;
}

.painting-image-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #e8e5de;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-family: var(--font-body);
    font-size: 14px;
}

/* Text sections (shared by both layouts) */
.painting-description,
.painting-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.painting-description h2,
.painting-section h2 {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 600;
    line-height: 30px;
    color: #000;
}

.painting-description p,
.painting-section p {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 300;
    color: #000;
    line-height: 1.7;
}

/* ── PORTRAIT layout: text left, smaller image right ── */
.painting-detail--portrait {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
    padding: 25px clamp(20px, 13vw, 190px) 60px;
}

.painting-detail--portrait .painting-details {
    flex: 1 1 320px;
    min-width: 0;
}

.painting-detail--portrait .painting-image-wrap {
    flex: 1 1 280px;
    max-width: 380px;
}

.painting-image-frame {
    width: 100%;
    aspect-ratio: 380 / 520;
    overflow: hidden;
    display: block;
}

.painting-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.painting-image-caption {
    font-family: var(--font-caption);
    font-size: 14px;
    line-height: 16px;
    font-style: italic;
    font-weight: 300;
    color: #000;
    text-align: center;
    margin-top: 8px;
}

/* ── Thumbnail row (Image 2–6), shared by both layouts ── */
.painting-thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    justify-content: center;
}

.painting-thumbnail {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    background: lightgray 0px 0px / 100% 100% no-repeat;
    border: 1px solid #e0ddd5;
    padding: 0;
    cursor: pointer;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.painting-thumbnail:hover,
.painting-thumbnail:focus {
    opacity: 0.8;
    border-color: #262E0A;
}

/* ── LANDSCAPE layout: full-width image on top, details below ── */
.painting-detail--landscape {
    display: flex;
    flex-direction: column;
    padding: 25px clamp(20px, 13vw, 190px) 60px;
}

.painting-image-row-landscape {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 32px;
}

.painting-image-wrap-landscape {
    flex: 1 1 280px;
    min-width: 0;
}

.painting-image-frame-landscape {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    display: block;
}

.painting-image-landscape {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* Thumbnails sit in the top-right margin next to the landscape image */
.painting-thumbnails-landscape-margin {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 0;
}

.painting-thumbnails-landscape-margin .painting-thumbnails {
    flex-direction: column;
    margin-top: 0;
    justify-content: flex-start;
}

.painting-detail--landscape .painting-details-landscape {
    width: 100%;
}

/* =====================================================
   WORDPRESS ADMIN BAR OFFSET
   ===================================================== */
.admin-bar .site-header--overlay {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .site-header--overlay {
        top: 46px;
    }
}

/* =====================================================
   RESPONSIVE BREAKPOINTS
   Desktop (1440+) is the base design above.
   These media queries adapt it down through tablet
   and mobile, finishing at a 412px-wide phone.
   ===================================================== */

/* ── TABLET / SMALL LAPTOP (≤1024px) ── */
@media screen and (max-width: 1024px) {
    .home-slide {
        padding: 110px 32px 70px;
    }

    .content,
    .gallery-section,
    .painting-detail--portrait,
    .painting-detail--landscape {
        padding-left: 32px;
        padding-right: 32px;
    }

    .painting-back {
        padding-left: 32px;
        padding-right: 32px;
    }

    .gallery-masonry {
        gap: 22px;
    }
}

/* ── TABLET / NAV COLLAPSE (≤900px) ──
   Switches to the hamburger menu — the primary nav becomes
   a slide-down panel instead of an inline row. */
@media screen and (max-width: 900px) {
    .nav-toggle {
        display: flex;
    }

    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0;
        padding: 8px 0;
        background: #262E0A;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .site-header--overlay .site-nav {
        background: rgba(38, 46, 10, 0.97);
    }

    .site-nav--open {
        max-height: 400px;
    }

    .site-nav .nav-link,
    .site-nav .btn-enquiry {
        width: 100%;
        padding: 14px 25px;
        border-radius: 0;
    }

    .site-nav .btn-enquiry {
        justify-content: flex-start;
    }

    .nav-item--has-children {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .nav-item--has-children .nav-link {
        width: 100%;
    }

    .nav-link--toggle {
        width: 100%;
        justify-content: space-between;
        padding: 14px 25px;
    }

    .sub-menu {
        position: static;
        margin: 0;
        border: none;
        border-radius: 0;
        background: rgba(0, 0, 0, 0.18);
        min-width: 0;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        max-height: 0;
        overflow: hidden;
        padding: 0;
        transition: max-height 0.2s ease;
    }

    .nav-item--has-children.is-open .sub-menu {
        max-height: 400px;
        padding: 6px 0;
    }

    .nav-sublink {
        padding: 12px 25px 12px 40px;
    }
}

/* ── TABLET PORTRAIT / LARGE PHONE (≤768px) ── */
@media screen and (max-width: 768px) {
    .home-slide {
        padding: 100px 20px 70px;
        /* Long slide copy can be taller than the viewport. The base
           desktop rule vertically centers the card (align-items: center)
           inside a container that's clipped with overflow: hidden at a
           fixed 100vh — so when content overflows, centering pushes its
           top half (heading, opening lines) above y:0 and it gets cut
           off permanently, not just scrolled out of view. Anchoring to
           the top and allowing this slide to scroll internally keeps
           every line reachable while leaving the carousel's own height,
           and the arrow/dot positions anchored to it, unchanged. */
        align-items: flex-start;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Stack: body, then portrait, then button. */
    .home-slide-card {
        grid-template-columns: 1fr;
        grid-template-areas:
            "body"
            "portrait"
            "actions";
        padding: 20px;
    }

    .home-slide-portrait {
        width: 100%;
        max-width: 300px;
        justify-self: center;
    }

    .home-slide-portrait img {
        height: auto;
    }

    .home-slide-heading {
        font-size: 26px;
    }

    .home-carousel-next,
    .home-carousel-prev {
        width: 40px;
        height: 40px;
        font-size: 24px;
    }

    .home-carousel-next {
        right: 6px;
    }

    .home-carousel-prev {
        left: 6px;
    }

    .content,
    .gallery-section,
    .painting-detail--portrait,
    .painting-detail--landscape {
        padding-left: 20px;
        padding-right: 20px;
    }

    .painting-back {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Stack painting detail text/image instead of side-by-side */
    .painting-detail--portrait {
        flex-direction: column;
    }

    .painting-detail--portrait .painting-image-wrap {
        max-width: 100%;
        order: -1;
    }

    .painting-image-frame {
        aspect-ratio: 4 / 3;
    }

    .painting-image-row-landscape {
        flex-direction: column;
    }

    .painting-thumbnails-landscape-margin {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .painting-thumbnails-landscape-margin .painting-thumbnails {
        flex-direction: row;
    }

    .gallery-masonry {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .site-footer {
        height: auto;
        padding: 32px 24px;
        gap: 14px;
    }
}

/* ── MOBILE (≤600px) ── */
@media screen and (max-width: 600px) {
    .site-header {
        height: auto;
        padding: 16px 20px;
    }

    .logo-mark {
        width: 38px;
        height: 38px;
    }

    .logo-wordmark {
        height: 28px;
    }

    .content-text h1 {
        font-size: 20px;
    }

    .content-text h2 {
        font-size: 18px;
    }

    .gallery-title {
        font-size: 22px;
    }

    .gallery-masonry {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .gallery-searchbar {
        flex-direction: column;
        align-items: stretch;
    }

    .gallery-search-input {
        flex: 1 1 auto;
    }

    .gallery-search-input--bottom {
        margin-left: 0;
        width: 100%;
    }

    .painting-title {
        font-size: 26px;
    }

    .painting-thumbnail {
        width: 50px;
        height: 50px;
    }
}

/* ── SMALL MOBILE — target 412×915 (≤480px) ── */
@media screen and (max-width: 480px) {
    .content,
    .gallery-section,
    .painting-detail--portrait,
    .painting-detail--landscape {
        padding-left: 16px;
        padding-right: 16px;
    }

    .painting-back {
        padding-left: 16px;
        padding-right: 16px;
    }

    .content-aside {
        width: 100%;
    }

    .painting-title {
        font-size: 22px;
    }

    .painting-description h2,
    .painting-section h2 {
        font-size: 18px;
    }

    .btn-enquiry,
    .btn-pdf {
        font-size: 14px;
    }
}

/* ── Carousel on small phones (≤480px) ── */
@media screen and (max-width: 480px) {
    .home-slide {
        padding: 90px 14px 64px;
    }

    .home-slide-card {
        padding: 16px;
        gap: 18px;
    }

    .home-slide-heading {
        font-size: 21px;
    }

    .home-slide-copy p {
        font-size: 12.5px;
    }

    .home-slide-btn {
        width: 100%;
        max-width: 311px;
        font-size: 13px;
    }
}

/* =====================================================
   FEATURED WORKS PAGE
   ===================================================== */

.fw-hero {
    position: relative;
    width: 100%;
    padding: 100px 24px 60px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #F4F0E2;
    text-align: center;
}

.fw-hero-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 48px;
    color: #262E0A;
    margin: 0;
}

.fw-body {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 48px 24px 64px;
}

.fw-article-header {
    margin-bottom: 28px;
}

.fw-article-title {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 28px;
    line-height: 1.3;
    color: #262E0A;
    margin: 0 0 10px;
}

.fw-article-byline {
    font-family: var(--font-body);
    font-size: 15px;
    color: #444;
    margin: 0;
}

.fw-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 0;
    flex-wrap: wrap;
}

.fw-tab-btn {
    flex: 1 1 160px;
    padding: 14px 20px;
    border: 2px solid transparent;
    border-radius: 24px;
    background: #262E0A;
    color: #FFF;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.fw-tab-btn.is-active {
    background: #EFBA5F;
    color: #262E0A;
    border-color: rgba(239, 186, 95, 0.5);
}

.fw-tab-btn:hover,
.fw-tab-btn:focus {
    filter: brightness(1.05);
}

.fw-panels {
    margin-top: 16px;
}

.fw-panel {
    background: #FAFAF7;
    border: 1px solid #E4E1D6;
    border-radius: 8px;
    padding: 28px;
}

.fw-panel-content {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.7;
    color: #333;
}

.fw-panel-content p {
    margin: 0 0 16px;
}

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

.fw-panel-content a {
    color: #1A5FA8;
    word-break: break-word;
}

.fw-tab-image {
    margin-top: 24px;
}

.fw-tab-image img {
    display: block;
    border-radius: 4px;
}

.fw-tab-image--portrait img {
    max-width: 280px;
    width: 100%;
    height: auto;
}

.fw-tab-image--landscape img {
    max-width: 100%;
    width: 100%;
    height: auto;
}

.fw-divider {
    border: none;
    border-top: 3px solid #000;
    margin: 48px 0;
}

.fw-pdf-embed {
    position: relative;
    width: 100%;
    height: 80vh;
    min-height: 500px;
    border: 1px solid #E4E1D6;
    border-radius: 8px;
    overflow: hidden;
}

.fw-pdf-embed iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.fw-pdf-download {
    display: inline-flex;
    margin-top: 20px;
    width: auto;
    padding: 12px 32px;
}

@media screen and (max-width: 768px) {
    .fw-hero {
        padding: 70px 16px 40px;
    }

    .fw-hero-title {
        font-size: 32px;
    }

    .fw-body {
        padding: 32px 16px 48px;
    }

    .fw-article-title {
        font-size: 22px;
    }

    .fw-tabs {
        flex-direction: column;
    }

    .fw-tab-btn {
        flex: 1 1 auto;
    }

    .fw-panel {
        padding: 20px;
    }

    .fw-pdf-embed {
        height: 70vh;
        min-height: 400px;
    }

    .fw-pdf-download {
        width: 100%;
        justify-content: center;
    }
}

/* =====================================================
   AFFILIATED WEBSITES PAGE
   ===================================================== */

.aw-hero-subtitle {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 300;
    color: rgba(38, 46, 10, 0.75);
    margin: 10px 0 0;
}

.aw-body {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 48px 24px 64px;
}

.aw-intro {
    font-family: var(--font-body);
    font-size: 13.5px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 32px;
}

.aw-intro p {
    margin: 0 0 12px;
}

.aw-section {
    margin-bottom: 48px;
    padding-top: 24px;
    border-top: 1px solid #D8D5C5;
}

.aw-section-title {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 22px;
    color: #262E0A;
    margin: 0 0 6px;
}

.aw-section-subtitle {
    font-family: var(--font-body);
    font-size: 13px;
    color: #666;
    margin: 0 0 20px;
}

.aw-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    align-items: start;
}

.aw-card {
    background: #EDEBE0;
    border: 1px solid #D8D5C5;
    border-radius: 6px;
    overflow: hidden;
}

.aw-card summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    color: #262E0A;
    line-height: 1.4;
}

.aw-card summary::-webkit-details-marker {
    display: none;
}

.aw-card-chevron {
    flex-shrink: 0;
    font-size: 10px;
    margin-top: 3px;
    transition: transform 0.2s ease;
}

.aw-card[open] .aw-card-chevron {
    transform: rotate(180deg);
}

.aw-card[open] summary {
    border-bottom: 1px solid #D8D5C5;
}

.aw-card-body {
    padding: 12px 16px 16px;
    font-family: var(--font-body);
    font-size: 12.5px;
    line-height: 1.65;
    color: #444;
}

.aw-card-body p {
    margin: 0 0 10px;
}

.aw-card-body p:last-child {
    margin-bottom: 0;
}

.aw-card-body a {
    color: #1A5FA8;
    word-break: break-word;
}

@media screen and (max-width: 1100px) {
    .aw-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 700px) {
    .aw-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .aw-body {
        padding: 32px 16px 48px;
    }
}

@media screen and (max-width: 460px) {
    .aw-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   ANNOTATED BIBLIOGRAPHY PAGE
   ===================================================== */

.ab-body {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 24px 64px;
}

.ab-intro {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid #D8D5C5;
}

.ab-intro-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 24px;
    color: #262E0A;
    text-transform: uppercase;
    margin: 0 0 12px;
}

.ab-intro-text {
    font-family: var(--font-body);
    font-size: 13.5px;
    line-height: 1.8;
    color: #444;
}

.ab-intro-text p {
    margin: 0 0 12px;
}

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

/* ── Search bar ──
   Pinned via JS (see template script), not CSS position:sticky — .page has
   overflow-x:hidden, and any non-visible overflow on an ancestor silently
   breaks position:sticky in most browsers. .is-pinned is toggled on scroll. */
.ab-searchbar-wrap {
    position: relative;
}

.ab-searchbar {
    display: flex;
    align-items: center;
    padding: 16px 0;
    margin-bottom: 24px;
    background: #FFF;
}

.ab-searchbar.is-pinned {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 40;
    padding: 16px 24px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.ab-searchbar-inner {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.ab-search-input {
    flex: 0 1 320px;
    padding: 9px 14px;
    border: 1px solid #262E0A;
    border-radius: 4px;
    background: #FFF;
    color: #000;
    font-family: var(--font-body);
    font-size: 14px;
}

.ab-search-input:focus {
    outline: 2px solid #EFBA5F;
    outline-offset: 1px;
}

.ab-count {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 300;
    color: #555;
}

.ab-section {
    margin-bottom: 36px;
}

.ab-section-title {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 22px;
    color: #262E0A;
    margin: 0 0 14px;
    padding-top: 16px;
    border-top: 1px solid #D8D5C5;
}

.ab-citation {
    background: #EDEBE0;
    border: 1px solid #D8D5C5;
    border-radius: 4px;
    padding: 10px 14px;
    margin-bottom: 8px;
    font-family: var(--font-body);
    font-size: 12.5px;
    line-height: 1.6;
    color: #333;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ab-citation a {
    color: #1A5FA8;
}

.ab-noresults {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 300;
    color: #666;
    padding: 40px 0;
    text-align: center;
}

@media screen and (max-width: 700px) {
    .ab-searchbar-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .ab-search-input {
        flex: 1 1 auto;
    }

    .ab-body {
        padding: 28px 16px 48px;
    }
}

/* =====================================================
   UNPUBLISHED RESEARCH — listing page
   ===================================================== */

.ur-body {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 24px 64px;
}

.ur-list {
    display: flex;
    flex-direction: column;
}

.ur-entry {
    padding: 24px 0;
    border-bottom: 1px solid #D8D5C5;
}

.ur-entry:first-child {
    padding-top: 0;
}

.ur-entry-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 22px;
    color: #262E0A;
    margin: 0 0 10px;
}

.ur-entry-excerpt {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.7;
    color: #555;
    margin-bottom: 16px;
}

.ur-entry-excerpt p {
    margin: 0;
}

.ur-readmore {
    display: inline-flex;
    width: auto;
    padding: 10px 26px;
}

.ur-empty {
    font-family: var(--font-body);
    font-size: 14px;
    color: #666;
    text-align: center;
    padding: 40px 0;
}

/* =====================================================
   UNPUBLISHED RESEARCH — single entry detail page
   ===================================================== */

.ur-detail {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 48px 24px 64px;
}

.ur-back {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 13px;
    color: #262E0A;
    text-decoration: none;
    margin-bottom: 24px;
    opacity: 0.75;
}

.ur-back:hover,
.ur-back:focus {
    opacity: 1;
    text-decoration: underline;
}

.ur-detail-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 30px;
    color: #262E0A;
    margin: 0 0 24px;
    line-height: 1.25;
}

.ur-detail-image {
    margin-bottom: 28px;
}

.ur-detail-image img {
    max-width: 100%;
    height: auto;
    border: 1px solid #D8D5C5;
    display: block;
}

.ur-detail-content {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.8;
    color: #333;
}

.ur-detail-content h2,
.ur-detail-content h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: #262E0A;
    margin: 32px 0 12px;
}

.ur-detail-content p {
    margin: 0 0 16px;
}

.ur-detail-content a {
    color: #1A5FA8;
    word-break: break-word;
}

.ur-detail-supporting {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #D8D5C5;
    font-family: var(--font-body);
    font-size: 13px;
    color: #333;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ur-detail-supporting a {
    color: #1A5FA8;
}

@media screen and (max-width: 700px) {
    .ur-body,
    .ur-detail {
        padding: 28px 16px 48px;
    }

    .ur-detail-title {
        font-size: 24px;
    }
}

/* =====================================================
   VIDEOS PAGE
   ===================================================== */

.vd-body {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 40px 24px 64px;
}

.vd-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 48px;
    margin-top: 8px;
}

.vd-item {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vd-title {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 24px;
    color: #262E0A;
    margin: 0;
    line-height: 1.3;
    text-align: center;
}

/* 16:9 responsive embed — the iframe/video fills this ratio box regardless
   of the source video's native size. Two columns instead of five means
   each player renders much larger than the original grid layout. */
.vd-embed {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #000;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #262E0A;
}

.vd-embed iframe,
.vd-embed video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.vd-description-toggle {
    border-top: 1px solid #D8D5C5;
    padding-top: 10px;
}

.vd-description-toggle summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    list-style: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #262E0A;
}

.vd-description-toggle summary::-webkit-details-marker {
    display: none;
}

.vd-toggle-icon {
    flex-shrink: 0;
    font-size: 11px;
    display: inline-block;
    color: #262E0A;
    transition: transform 0.2s ease;
}

.vd-toggle-icon::before {
    content: '\25BE'; /* ▾ */
}

.vd-description-toggle[open] .vd-toggle-icon {
    transform: rotate(180deg);
}

.vd-description-body {
    margin-top: 14px;
    padding: 18px 20px;
    background: #FAFAF7;
    border: 1px solid #E4E1D6;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 13.5px;
    line-height: 1.75;
    color: #444;
}

.vd-description-body p {
    margin: 0 0 12px;
}

.vd-description-body p:last-child {
    margin-bottom: 0;
}

.vd-empty {
    font-family: var(--font-body);
    font-size: 14px;
    color: #666;
    text-align: center;
    padding: 40px 0;
}

@media screen and (max-width: 900px) {
    .vd-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media screen and (max-width: 700px) {
    .vd-body {
        padding: 28px 16px 48px;
    }
}

/* =====================================================
   ENQUIRY PAGE
   ===================================================== */

.enq-body {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding: 40px 24px 64px;
}

.enq-intro {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 13px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 32px;
}

.enq-intro p {
    margin: 0 0 12px;
}

.enq-form {
    background: #EDEBE0;
    border: 1px solid #D8D5C5;
    border-radius: 6px;
    padding: 32px;
}

.enq-form-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 24px;
    color: #262E0A;
    margin: 0 0 20px;
}

.enq-section-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 20px;
    color: #262E0A;
    margin: 32px 0 16px;
    padding-top: 20px;
    border-top: 1px solid #D8D5C5;
}

.enq-subsection-title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 15px;
    color: #262E0A;
    margin: 0 0 14px;
}

.enq-section-text {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.75;
    color: #444;
    margin: 0 0 20px;
}

.enq-field {
    margin-bottom: 18px;
}

.enq-field label {
    display: block;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: #262E0A;
    margin-bottom: 6px;
}

.enq-field-help {
    font-family: var(--font-body);
    font-size: 12px;
    color: #666;
    margin: 0 0 8px;
    line-height: 1.6;
}

.enq-field input[type="text"],
.enq-field input[type="email"],
.enq-field input[type="tel"],
.enq-field input[type="date"],
.enq-field input[type="file"],
.enq-field select,
.enq-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #262E0A;
    border-radius: 4px;
    background: #FAFAF7;
    font-family: var(--font-body);
    font-size: 13px;
    color: #222;
}

.enq-field textarea {
    resize: vertical;
}

.enq-field input:focus,
.enq-field select:focus,
.enq-field textarea:focus {
    outline: 2px solid #EFBA5F;
    outline-offset: 1px;
}

.enq-field--split {
    display: flex;
    gap: 16px;
}

.enq-field--split > div {
    flex: 1;
}

.enq-field--checkbox label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: 400;
    cursor: pointer;
}

.enq-field--checkbox input {
    margin-top: 3px;
}

.enq-disclaimer {
    margin-top: 8px;
}

.enq-disclaimer p {
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.75;
    color: #444;
    margin: 0 0 14px;
}

.enq-status {
    margin: 20px 0;
    padding: 14px 16px;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.6;
}

.enq-status--success {
    background: #e5f0e0;
    border: 1px solid #b8d4ab;
    color: #2c4a1f;
}

.enq-status--error {
    background: #f5e2e2;
    border: 1px solid #dba8a8;
    color: #5a1f1f;
}

.enq-submit {
    width: auto;
    padding: 12px 40px;
}

.enq-submit:disabled {
    opacity: 0.6;
    cursor: default;
}

@media screen and (max-width: 600px) {
    .enq-body {
        padding: 28px 16px 48px;
    }

    .enq-form {
        padding: 22px;
    }

    .enq-field--split {
        flex-direction: column;
        gap: 18px;
    }
}