/* ================================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ================================================ */
:root {
    /* --- Colors --- */
    --color-nav-bg:        #787e9f;
    --color-white:         #FFFFFF;
    --color-text-light:    #F0ECE6;
    --color-separator:     rgba(255, 255, 255, 0.35);

    /* --- Typography --- */
    --font-serif:          'Cormorant Garamond', 'Georgia', serif;
    --font-display:        'Oswald', 'Arial Narrow', Arial, sans-serif;

    /* --- Layout --- */
    --nav-height:          68px;
    --nav-padding-x:       40px;
    --hero-content-left:   52px;
    --hero-content-bottom: 56px;

    /* --- Transitions --- */
    --transition-fast:     0.2s ease;
    --transition-default:  0.3s ease;
    --transition-smooth:   0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* --- Shadows --- */
    --shadow-header:       0 2px 24px rgba(0, 0, 0, 0.35);
}


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

html {
    font-size:       16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-serif);
    background:  ffffff;
    color:       var(--color-white);
    overflow-x:  hidden;
}

a {
    text-decoration: none;
    color:           inherit;
}

button {
    cursor:     pointer;
    border:     none;
    background: transparent;
    padding:    0;
    outline:    none; /* handled via :focus-visible */
}

button:focus-visible {
    outline:        2px solid var(--color-white);
    outline-offset: 3px;
    border-radius:  2px;
}


/* ================================================
   SITE HEADER / NAVIGATION
   ================================================ */
.site-header {
    position:         sticky;
    top:              0;
    z-index:          1000;
    background-color: var(--color-nav-bg);
    box-shadow:       var(--shadow-header);
    transition:       box-shadow var(--transition-default);
}

/* Deeper shadow once the user scrolls away from top */
.site-header.is-scrolled {
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.55);
}

.navbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          var(--nav-height);
    max-width:       1920px;
    margin:          0 auto;
    padding:         0 var(--nav-padding-x);
}


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

.navbar-brand {
    display:     flex;
    align-items: center;
    gap:         14px;
    color:       var(--color-white);
    transition:  opacity var(--transition-default);
}

.navbar-brand:hover {
    opacity: 0.85;
}

/* Pottery SVG icon */
.brand-icon {
    display:     flex;
    align-items: center;
    flex-shrink: 0;
    width:       22px;
}

.brand-icon svg {
    display:    block;
    width:      100%;
    height:     auto;
}

/* Text group beside the icon */
.brand-text {
    display:     flex;
    align-items: center;
    gap:         11px;
}

/* Stacked "Maison de / Poterie" */
.brand-name {
    display:        flex;
    flex-direction: column;
    line-height:    1.15;
    gap:            2px;
}

.brand-name-top {
    font-family:    var(--font-serif);
    font-size:      10px;
    font-weight:    300;
    font-style:     italic;
    letter-spacing: 0.1em;
    opacity:        0.8;
    text-transform: none;
}

.brand-name-bottom {
    font-family:    var(--font-serif);
    font-size:      16px;
    font-weight:    500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* "|" divider between name and location */
.brand-separator {
    font-family: var(--font-serif);
    font-size:   22px;
    font-weight: 300;
    color:       var(--color-separator);
    line-height: 1;
    align-self:  center;
}

/* "Rustenburg" location text */
.brand-location {
    font-family:    var(--font-serif);
    font-size:      12.5px;
    font-weight:    400;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    opacity:        0.8;
}


/* ---- Hamburger Button ---- */

.hamburger-btn {
    display:         flex;
    flex-direction:  column;
    justify-content: space-between;
    align-items:     flex-end;   /* right-align creates a tapered visual effect */
    width:           30px;
    height:          20px;
    flex-shrink:     0;
}

.hamburger-bar {
    display:          block;
    height:           2px;
    background-color: var(--color-white);
    border-radius:    2px;
    transition:
        transform  var(--transition-default),
        opacity    var(--transition-default),
        width      var(--transition-default);
}

/* Descending widths — refined, design-forward look */
.hamburger-bar:nth-child(1) { width: 100%; }
.hamburger-bar:nth-child(2) { width: 72%; }
.hamburger-bar:nth-child(3) { width: 44%; }

/* Hover: equalize all bars */
.hamburger-btn:hover .hamburger-bar {
    width:   100%;
    opacity: 0.8;
}

/*
   X animation when menu is open.
   With height: 20px and 3 bars of 2px:
   Gap = (20 - 6) / 2 = 7px  →  center of bar 1 = 1px, center of bar 3 = 19px
   Mid-point = 10px  →  bar 1 moves +9px, bar 3 moves -9px
*/
.hamburger-btn.is-open .hamburger-bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
    width:     100%;
}

.hamburger-btn.is-open .hamburger-bar:nth-child(2) {
    opacity:   0;
    transform: scaleX(0);
}

.hamburger-btn.is-open .hamburger-bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
    width:     100%;
}


/* ================================================
   HERO SECTION
   ================================================ */
.hero-section {
    position:         relative;
    width:            100%;
    height:           calc(100vh - var(--nav-height));
    min-height:       500px;
    overflow:         hidden;

    /* Dark fill shown in letterbox areas and while the image loads */
    background-color: #1B2A38;
}

/*
   Full painting — <img> with object-fit:cover fills every pixel of
   the viewport so there are no empty edges.  object-position:center
   keeps the main flower in view.
*/
.hero-bg-img {
    position:        absolute;
    inset:           0;
    width:           100%;
    height:          100%;
    object-fit:      fill;          /* fills full screen — no dark edges */
    object-position: center center;
    z-index:         0;
}

/* Gradient vignette — deepens the bottom for text legibility */
.hero-overlay {
    position:       absolute;
    inset:          0;
    background:     linear-gradient(
        to top,
        rgba(8, 8, 8, 0.60)  0%,
        rgba(8, 8, 8, 0.22)  30%,
        rgba(8, 8, 8, 0.05)  55%,
        rgba(8, 8, 8, 0.00) 100%
    );
    pointer-events: none;
    z-index:        1;
}

/* Headline positioned at bottom-left */
.hero-content {
    position: absolute;
    bottom:   var(--hero-content-bottom);
    left:     var(--hero-content-left);
    z-index:  2;
}

.hero-heading {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    font-family:    var(--font-display);
    font-weight:    600;
    font-size:      clamp(38px, 5vw, 50px);
    line-height:    1.0;
    text-transform: uppercase;
    color:          var(--color-white);
    letter-spacing: 0.035em;
}

.hero-heading-line {
    display: block;
}

/* Optional: fade-in reveal animation on load */
@keyframes heroFadeUp {
    from {
        opacity:   0;
        transform: translateY(18px);
    }
    to {
        opacity:   1;
        transform: translateY(0);
    }
}

.hero-heading-line:nth-child(1) {
    animation: heroFadeUp 0.8s ease 0.25s both;
}

.hero-heading-line:nth-child(2) {
    animation: heroFadeUp 0.8s ease 0.45s both;
}


/* ================================================
   RESPONSIVE BREAKPOINTS
   ================================================ */

/* --- 1920px: Ultra-wide / large monitor --- */
@media (min-width: 1921px) {
    :root {
        --nav-padding-x:       64px;
        --hero-content-left:   72px;
        --hero-content-bottom: 72px;
    }

    .hero-heading {
        font-size: 88px;
    }
}

/* --- 1600px --- */
@media (max-width: 1600px) {
    :root {
        --nav-padding-x: 36px;
    }

    .hero-heading {
        font-size: clamp(36px, 4.8vw, 74px);
    }
}

/* --- 1440px --- */
@media (max-width: 1440px) {
    :root {
        --nav-padding-x: 32px;
    }
}

/* --- 1366px --- */
@media (max-width: 1366px) {
    .hero-heading {
        font-size: clamp(34px, 4.6vw, 68px);
    }
}

/* --- 1280px --- */
@media (max-width: 1280px) {
    :root {
        --hero-content-left:   44px;
        --hero-content-bottom: 48px;
    }
}

/* --- 1024px: Large tablet / small laptop --- */
@media (max-width: 1024px) {
    :root {
        --nav-padding-x:       24px;
        --hero-content-left:   36px;
        --hero-content-bottom: 44px;
    }

    .hero-heading {
        font-size: clamp(30px, 5vw, 58px);
    }
}

/* --- 768px: Tablet portrait --- */
@media (max-width: 768px) {
    :root {
        --nav-padding-x:       20px;
        --hero-content-left:   28px;
        --hero-content-bottom: 36px;
    }

    .hero-heading {
        font-size: clamp(26px, 5.5vw, 46px);
    }

    .brand-name-bottom {
        font-size: 14.5px;
    }

    .brand-location {
        font-size: 11.5px;
    }
}

/* --- 480px: Large mobile --- */
@media (max-width: 480px) {
    :root {
        --nav-height:          60px;
        --nav-padding-x:       18px;
        --hero-content-left:   20px;
        --hero-content-bottom: 28px;
    }

    .brand-icon {
        width: 18px;
    }

    .brand-name-bottom {
        font-size: 13.5px;
    }

    .brand-location {
        display: none; /* hide on very small screens to avoid crowding */
    }

    .brand-separator {
        display: none;
    }

    .hero-heading {
        font-size: clamp(24px, 7vw, 38px);
    }
}

/* --- 375px: Small mobile --- */
@media (max-width: 375px) {
    :root {
        --nav-height:          56px;
        --nav-padding-x:       16px;
        --hero-content-left:   16px;
        --hero-content-bottom: 24px;
    }

    .hero-heading {
        font-size: clamp(22px, 7.5vw, 34px);
    }
}


/* ================================================
   ARTWORKS SECTION
   ================================================ */
.artworks-section {
    background-color: #ffffff;
    padding:          90px 0 100px;
}

.artworks-container {
    max-width: 1440px;
    margin:    0 auto;
    padding:   0 48px;
}

/* ---- Section title ---- */
.artworks-title {
    text-align:     center;
    font-family:    var(--font-serif);
    font-size:      13px;
    font-weight:    300;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color:          #2c2c2c;
    margin-bottom:  60px;
}

/* ---- Paintings grid ---- */
.artworks-grid {
    display:   flex;
    gap:       28px;
    align-items: flex-end; /* bottom-align so varying heights look intentional */
}

/* ---- Individual painting card ---- */
.artwork-card {
    flex:           1 1 0;
    display:        flex;
    flex-direction: column;
    min-width:      0;
}

.artwork-image-wrap {
    width:    100%;
    overflow: hidden;

    /* Placeholder colour shown when image is missing */
    background-color: #e8e4df;
}

.artwork-img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: fill;
}

/*
   Preserve each painting's natural aspect ratio.
   Cards 1 & 3 are slightly taller; 2 & 4 match the reference.
   Adjust these if your actual images have different proportions.
*/
.artwork-card:nth-child(1) .artwork-image-wrap { aspect-ratio: 3 / 4;   }
.artwork-card:nth-child(2) .artwork-image-wrap { aspect-ratio: 3 / 4.2; }
.artwork-card:nth-child(3) .artwork-image-wrap { aspect-ratio: 3 / 4;   }
.artwork-card:nth-child(4) .artwork-image-wrap { aspect-ratio: 3 / 4.1; }

/* ---- Caption: line + name ---- */
.artwork-caption {
    display:     flex;
    align-items: center;
    gap:         10px;
    margin-top:  14px;
}

/* Expanding rule that fills the available space */
.caption-rule {
    flex:             1 1 auto;
    display:          block;
    height:           1px;
    background-color: #2c2c2c;
    min-width:        20px;
}

/* Painting name to the right of the rule */
.caption-name {
    font-family:    var(--font-serif);
    font-size:      12px;
    font-weight:    400;
    font-style:     italic;
    letter-spacing: 0.08em;
    color:          #2c2c2c;
    white-space:    nowrap;
    flex-shrink:    0;
}

/* Short trailing dash after the name — mirrors the "— Protea —" style */
.caption-name::after {
    content:     ' \2014'; /* em-dash */
    opacity:     0.45;
    font-style:  normal;
}


/* ================================================
   ARTWORKS — RESPONSIVE BREAKPOINTS
   ================================================ */

/* 1600px */
@media (max-width: 1600px) {
    .artworks-container {
        padding: 0 40px;
    }
}

/* 1440px */
@media (max-width: 1440px) {
    .artworks-container {
        padding: 0 36px;
    }

    .artworks-grid {
        gap: 24px;
    }
}

/* 1280px */
@media (max-width: 1280px) {
    .artworks-section {
        padding: 72px 0 84px;
    }

    .artworks-container {
        padding: 0 32px;
    }
}

/* 1024px */
@media (max-width: 1024px) {
    .artworks-section {
        padding: 64px 0 76px;
    }

    .artworks-container {
        padding: 0 24px;
    }

    .artworks-grid {
        gap: 18px;
    }

    .artworks-title {
        margin-bottom: 48px;
    }
}

/* 768px — 2 columns */
@media (max-width: 768px) {
    .artworks-section {
        padding: 56px 0 64px;
    }

    .artworks-container {
        padding: 0 20px;
    }

    .artworks-grid {
        flex-wrap: wrap;
        gap:       20px;
    }

    .artwork-card {
        flex-basis: calc(50% - 10px);
    }

    /* Reset individual aspect ratios to a uniform value at this width */
    .artwork-card:nth-child(n) .artwork-image-wrap {
        aspect-ratio: 3 / 4;
    }

    .artworks-title {
        font-size:     12px;
        margin-bottom: 40px;
    }
}

/* 480px — 2 columns (tighter) */
@media (max-width: 480px) {
    .artworks-container {
        padding: 0 16px;
    }

    .artworks-grid {
        gap: 14px;
    }

    .artwork-card {
        flex-basis: calc(50% - 7px);
    }

    .artwork-caption {
        margin-top: 10px;
        gap:        6px;
    }

    .caption-name {
        font-size: 10px;
    }
}

/* 375px — single column */
@media (max-width: 375px) {
    .artworks-grid {
        flex-direction: column;
        gap:            24px;
    }

    .artwork-card {
        flex-basis: 100%;
    }
}


/* ================================================
   NAV PANEL (hamburger dropdown)
   ================================================ */

/*
   Sits inside <header> directly below the navbar.
   Because the header is sticky, the panel is sticky too —
   it always drops down immediately beneath the nav bar.
*/
.nav-panel {
    background-color: #ffffff;
    overflow:         hidden;
    max-height:       0;
    opacity:          0;
    /* Smooth slide-down + fade */
    transition:
        max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1),
        opacity    0.30s ease;
    border-top:  1px solid rgba(27, 42, 56, 0.10);
    box-shadow:  0 12px 40px rgba(0, 0, 0, 0.13);
}

.nav-panel.is-open {
    max-height: 420px; /* large enough for all links */
    opacity:    1;
}

/* Link list */
.nav-panel-list {
    list-style: none;
    padding:    12px 0 20px;
    margin:     0;
}

.nav-panel-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.nav-panel-item:last-child {
    border-bottom: none;
}

/* Individual link */
.nav-panel-link {
    display:         block;
    padding:         16px 40px;
    font-family:     var(--font-serif);
    font-size:       13px;
    font-weight:     400;
    letter-spacing:  0.22em;
    text-transform:  uppercase;
    color:           #1B2A38;
    text-decoration: none;
    /* Subtle indent + colour shift on hover */
    transition: color 0.22s ease, padding-left 0.25s ease;
}

.nav-panel-link:hover {
    color:        #8a7060;
    padding-left: 52px;
}

/* Active / current page indicator */
.nav-panel-link.is-active {
    color:       #8a7060;
    font-weight: 500;
}

/* ---- Nav panel responsive ---- */
@media (max-width: 480px) {
    .nav-panel-link {
        padding:    14px 20px;
        font-size:  12px;
    }

    .nav-panel-link:hover {
        padding-left: 30px;
    }
}

@media (max-width: 375px) {
    .nav-panel-link {
        padding: 13px 16px;
    }
}


/* ================================================
   VIEW GALLERY SECTION
   ================================================ */
/* ================================================
   VIEW GALLERY SECTION
   ================================================
   Layout:
   · .gallery-section  — fixed height, white bg
   · .gallery-cta      — absolute, full height, right 63%,
                         "View Gallery" anchored top-right
   · .gallery-row      — absolute, fills full section (top-0 to
                         bottom-0) so no white gap at bottom;
                         align-items:flex-end keeps paintings flush
   · All paintings equal height; gray panel visible above them
   ================================================ */
.gallery-section {
    position: relative;
    background: #ffffff;
    height:   490px;
    overflow: hidden;
}

.gallery-stage {
    position: relative;
    width:    100%;
    height:   100%;
}

/* ---- Gray CTA panel — spans full section height, right side ---- */
.gallery-cta {
    position:         absolute;
    top:              0;
    right:            0;
    width:            63%;
    height:           100%;
    z-index:          1;
    background-color: #636060;
    color:            #f5f1ec;
    text-decoration:  none;
    display:          flex;
    align-items:      flex-start;
    justify-content:  flex-end;
    padding:          24px 52px 0 0;
    transition:       background-color var(--transition-default);
}

.gallery-cta:hover {
    background-color: #575353;
}

.gallery-cta-inner {
    display:     flex;
    align-items: flex-start;
    gap:         16px;
}

.gallery-cta-bullet {
    font-size:   20px;
    line-height: 1.3;
    margin-top:  6px;
}

.gallery-cta-label {
    font-family: var(--font-serif);
    font-size:   clamp(32px, 2.6vw, 50px);
    font-weight: 400;
    line-height: 1;
}

/* ---- Painting row — spans full section height, paints flush to bottom ---- */
.gallery-row {
    position:        absolute;
    top:             0;
    bottom:          0;
    left:            0;
    right:           0;
    z-index:         2;
    display:         flex;
    align-items:     flex-end;      /* paintings sit at the bottom */
    justify-content: center;        /* centre the 4 paintings horizontally */
    gap:             10px;
    padding:         0 14px;
}

.gallery-item {
    flex:        0 0 clamp(195px, 17.5vw, 265px);
    width:       clamp(195px, 17.5vw, 265px);
    overflow:    hidden;
    line-height: 0;    /* eliminate any inline baseline gap */
}

/* All paintings — same height, same visible size, minimal crop */
.gallery-img {
    display:         block;
    width:           100%;
    height:          400px;
    object-fit:      cover;
    object-position: center 12%; /* anchors to top — preserves faces, horns, heads */
}




/* ================================================
   VIEW GALLERY — RESPONSIVE
   ================================================ */

/* 1600px */
@media (max-width: 1600px) {
    .gallery-section { height: 460px; }
    .gallery-item    { flex-basis: clamp(188px, 17vw, 255px); width: clamp(188px, 17vw, 255px); }
    .gallery-img     { height: 375px; }
    .gallery-cta { padding: 22px 44px 0 0; }
    .gallery-cta-label { font-size: 46px; }
}

/* 1440px */
@media (max-width: 1440px) {
    .gallery-section { height: 430px; }
    .gallery-item    { flex-basis: 244px; width: 244px; }
    .gallery-img     { height: 350px; }
    .gallery-cta { padding: 20px 40px 0 0; }
    .gallery-cta-label { font-size: 42px; }
}

/* 1366px */
@media (max-width: 1366px) {
    .gallery-section { height: 408px; }
    .gallery-item    { flex-basis: 230px; width: 230px; }
    .gallery-img     { height: 332px; }
    .gallery-cta { padding: 20px 36px 0 0; }
    .gallery-cta-label { font-size: 39px; }
}

/* 1280px */
@media (max-width: 1280px) {
    .gallery-section { height: 385px; }
    .gallery-item    { flex-basis: 216px; width: 216px; }
    .gallery-img     { height: 312px; }
    .gallery-cta { padding: 18px 32px 0 0; }
    .gallery-cta-inner { gap: 13px; }
    .gallery-cta-bullet { font-size: 17px; }
    .gallery-cta-label { font-size: 36px; }
}

/* 1024px */
@media (max-width: 1024px) {
    .gallery-section { height: 336px; }
    .gallery-item    { flex-basis: 182px; width: 182px; }
    .gallery-img     { height: 274px; }
    .gallery-cta {
        width:   65%;
        padding: 16px 26px 0 0;
    }
    .gallery-cta-inner { gap: 11px; }
    .gallery-cta-bullet { font-size: 15px; margin-top: 4px; }
    .gallery-cta-label { font-size: 30px; }
}

/* 768px — stack: CTA bar on top, 2×2 painting grid below */
@media (max-width: 768px) {
    .gallery-section {
        height: auto;
    }

    .gallery-stage {
        display:        flex;
        flex-direction: column;
    }

    .gallery-cta {
        position:        relative;
        width:           100%;
        height:          100px;
        justify-content: center;
        align-items:     center;
        padding:         0;
    }

    .gallery-cta-inner {
        align-items: center;
    }

    .gallery-cta-label { font-size: 26px; }
    .gallery-cta-bullet { font-size: 16px; margin-top: 3px; }

    .gallery-row {
        position:    relative;
        top:         auto;
        bottom:      auto;
        flex-wrap:   wrap;
        align-items: flex-start;
        gap:         8px;
        padding:     12px;
    }

    /* Reset to flexible equal halves on small screens */
    .gallery-item {
        flex:  1 1 calc(50% - 4px);
        width: auto;
    }

    .gallery-img {
        height:          260px;
        object-position: center 12%;
    }
}

/* 480px */
@media (max-width: 480px) {
    .gallery-cta {
        height:  86px;
        padding: 0;
    }

    .gallery-cta-label  { font-size: 22px; }
    .gallery-cta-bullet { font-size: 14px; }

    .gallery-img { height: 200px; }
}

/* 375px — single column */
@media (max-width: 375px) {
    .gallery-row {
        flex-direction: column;
        flex-wrap:      nowrap;
    }

    .gallery-item {
        flex: 1 1 100%;
        width: auto;
    }

    .gallery-img { height: 250px; }
}


/* ================================================
   ABOUT SECTION
   ================================================
   Layout: two columns — photo (left) + text (right)
   Effect: organic blob frame with animated liquid
           colour gradient halo + glass-sheen overlay
   ================================================ */
.about-section {
    background:  #ffffff;
    padding:     110px 60px;
    overflow:    hidden;
}

.about-container {
    max-width:   1200px;
    margin:      0 auto;
    display:     flex;
    align-items: center;
    gap:         90px;
}

/* ---- Photo column ---- */
.about-photo-col {
    flex:            0 0 auto;
    display:         flex;
    justify-content: center;
    align-items:     center;
}

.about-photo-frame {
    position: relative;
    display:  flex;
}

/*
   Gold mirror frame — slightly larger version of the same clip shape,
   visible as a warm-gold border ring around the photo.
*/
.about-photo-frame::before {
    content:    '';
    position:   absolute;
    inset:      -9px;
    clip-path:  url(#mirror-clip);
    background: linear-gradient(
        135deg,
        #7a5010  0%,
        #c9a040 28%,
        #ead070 52%,
        #c9a040 76%,
        #7a5010 100%
    );
    z-index:    0;
}

/* Organic blob container — clips photo to mirror shape */
.about-photo-blob {
    position:   relative;
    z-index:    1;
    width:      370px;
    height:     460px;
    overflow:   hidden;
    clip-path:  url(#mirror-clip);
    background: #e8dfd4; /* warm neutral fallback while image loads */
}

/* Glass / mirror sheen layered over the photo */
.about-photo-blob::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.16)  0%,
        rgba(255, 255, 255, 0.04) 45%,
        rgba(0,   0,   0,   0.12) 100%
    );
    z-index:        2;
    pointer-events: none;
}

.about-photo-img {
    display:          block;
    width:            100%;
    height:           100%;
    object-fit:       cover;
    object-position:  center;
}

/* ---- Text column ---- */
.about-text-col {
    flex:      1 1 0;
    min-width: 0;
}

.about-eyebrow {
    display:        block;
    font-family:    var(--font-display);
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color:          #9a7218;
    margin-bottom:  20px;
}

.about-name {
    font-family:    var(--font-serif);
    font-size:      clamp(48px, 4.2vw, 76px);
    font-weight:    400;
    font-style:     italic;
    line-height:    1.0;
    color:          #1a1614;
    margin-bottom:  28px;
}

.about-rule {
    width:         52px;
    height:        2px;
    background:    linear-gradient(90deg, #d4825a, #c9a465);
    border-radius: 2px;
    margin-bottom: 32px;
}

.about-bio {
    font-family:   var(--font-serif);
    font-size:     17px;
    font-weight:   300;
    line-height:   1.9;
    color:         #4e4640;
    margin-bottom: 20px;
}

.about-bio + .about-bio {
    margin-bottom: 0;
}

/* ================================================
   ABOUT — RESPONSIVE
   ================================================ */

@media (max-width: 1280px) {
    .about-section    { padding: 90px 48px; }
    .about-container  { gap: 70px; }
    .about-photo-blob { width: 320px; height: 400px; }
}

@media (max-width: 1024px) {
    .about-section    { padding: 80px 40px; }
    .about-container  { gap: 56px; }
    .about-photo-blob { width: 290px; height: 362px; }
    .about-name       { font-size: 54px; }
}

@media (max-width: 768px) {
    .about-section {
        padding: 72px 32px;
    }

    .about-container {
        flex-direction: column;
        gap:            52px;
        text-align:     center;
    }

    .about-rule {
        margin-left:  auto;
        margin-right: auto;
    }

    .about-photo-blob { width: 270px; height: 336px; }
}

@media (max-width: 480px) {
    .about-section    { padding: 60px 20px; }
    .about-photo-blob { width: 230px; height: 286px; }
    .about-name       { font-size: 44px; }
    .about-bio        { font-size: 16px; }
}

@media (max-width: 375px) {
    .about-photo-blob { width: 200px; height: 250px; }
}

/* ================================================
   SHOWCASE SECTION  (mirrored version of Gallery)
   ================================================ */
.showcase-section {
    position: relative;
    background: #ffffff;
    height:   490px;
    overflow: hidden;
}

.showcase-stage {
    position: relative;
    width:    100%;
    height:   100%;
}

/* ---- Gray CTA panel — spans full section height, LEFT side ---- */
.showcase-cta {
    position:         absolute;
    top:              0;
    left:             0;
    width:            75%;
    height:           100%;
    z-index:          1;
    background-color: #636060;
    color:            #f5f1ec;
    text-decoration:  none;
    display:          flex;
    align-items:      flex-start;
    justify-content:  flex-start;
    padding:          24px 0 0 52px;
    transition:       background-color var(--transition-default);
}

.showcase-cta:hover {
    background-color: #575353;
}

.showcase-cta-inner {
    display:     flex;
    align-items: flex-start;
    gap:         16px;
}

.showcase-cta-bullet {
    font-size:   20px;
    line-height: 1.3;
    margin-top:  6px;
}

.showcase-cta-label {
    font-family: var(--font-serif);
    font-size:   clamp(32px, 2.6vw, 50px);
    font-weight: 400;
    line-height: 1;
}

/* ---- Painting row — spans full section height, paints flush to bottom ---- */
.showcase-row {
    position:        absolute;
    top:             0;
    bottom:          0;
    left:            0;
    right:           0;
    z-index:         2;
    display:         flex;
    align-items:     flex-end;      /* paintings sit at the bottom */
    justify-content: center;        /* centre the 3 paintings horizontally */
    gap:             10px;
    padding:         0 14px;
}

.showcase-item {
    flex:        0 0 clamp(280px, 25vw, 365px);
    width:       clamp(280px, 25vw, 365px);
    overflow:    hidden;
    line-height: 0;    /* eliminate any inline baseline gap */
}

/* Middle photo — noticeably wider than the other two, same height */
.showcase-item:nth-child(2) {
    flex:  0 0 clamp(370px, 33vw, 480px);
    width: clamp(370px, 33vw, 480px);
}

/* All paintings — same height, same visible size, minimal crop */
.showcase-img {
    display:         block;
    width:           100%;
    height:          400px;
    object-fit:      cover;
    object-position: center 12%; /* anchors to top — preserves faces, horns, heads */
}




/* ================================================
   SHOWCASE — RESPONSIVE
   ================================================ */

/* 1600px */
@media (max-width: 1600px) {
    .showcase-section { height: 460px; }
    .showcase-item    { flex-basis: clamp(265px, 24vw, 345px); width: clamp(265px, 24vw, 345px); }
    .showcase-item:nth-child(2) { flex-basis: clamp(350px, 31.5vw, 455px); width: clamp(350px, 31.5vw, 455px); }
    .showcase-img     { height: 375px; }
    .showcase-cta { padding: 22px 0 0 44px; }
    .showcase-cta-label { font-size: 46px; }
}

/* 1440px */
@media (max-width: 1440px) {
    .showcase-section { height: 430px; }
    .showcase-item    { flex-basis: 330px; width: 330px; }
    .showcase-item:nth-child(2) { flex-basis: 430px; width: 430px; }
    .showcase-img     { height: 350px; }
    .showcase-cta { padding: 20px 0 0 40px; }
    .showcase-cta-label { font-size: 42px; }
}

/* 1366px */
@media (max-width: 1366px) {
    .showcase-section { height: 408px; }
    .showcase-item    { flex-basis: 313px; width: 313px; }
    .showcase-item:nth-child(2) { flex-basis: 408px; width: 408px; }
    .showcase-img     { height: 332px; }
    .showcase-cta { padding: 20px 0 0 36px; }
    .showcase-cta-label { font-size: 39px; }
}

/* 1280px */
@media (max-width: 1280px) {
    .showcase-section { height: 385px; }
    .showcase-item    { flex-basis: 294px; width: 294px; }
    .showcase-item:nth-child(2) { flex-basis: 383px; width: 383px; }
    .showcase-img     { height: 312px; }
    .showcase-cta { padding: 18px 0 0 32px; }
    .showcase-cta-inner { gap: 13px; }
    .showcase-cta-bullet { font-size: 17px; }
    .showcase-cta-label { font-size: 36px; }
}

/* 1024px */
@media (max-width: 1024px) {
    .showcase-section { height: 336px; }
    .showcase-item    { flex-basis: 248px; width: 248px; }
    .showcase-item:nth-child(2) { flex-basis: 325px; width: 325px; }
    .showcase-img     { height: 274px; }
    .showcase-cta {
        width:   65%;
        padding: 16px 0 0 26px;
    }
    .showcase-cta-inner { gap: 11px; }
    .showcase-cta-bullet { font-size: 15px; margin-top: 4px; }
    .showcase-cta-label { font-size: 30px; }
}

/* 768px — stack: CTA bar on top, paintings in a single column below.
   A single-column stack (rather than the desktop 2-up/wide-middle
   layout) avoids fragile flex-basis overrides across every phone
   width and reads cleanly at any mobile size. */
@media (max-width: 768px) {
    .showcase-section {
        height: auto;
    }

    .showcase-stage {
        display:        flex;
        flex-direction: column;
    }

    .showcase-cta {
        position:        relative;
        width:           100%;
        height:          100px;
        justify-content: center;
        align-items:     center;
        padding:         0;
    }

    .showcase-cta-inner {
        align-items: center;
    }

    .showcase-cta-label { font-size: 26px; }
    .showcase-cta-bullet { font-size: 16px; margin-top: 3px; }

    .showcase-row {
        position:       relative;
        top:            auto;
        bottom:         auto;
        flex-direction: column;
        align-items:    stretch;
        gap:            14px;
        padding:        16px;
    }

    .showcase-item,
    .showcase-item:nth-child(2) {
        flex:  1 1 auto;
        width: 100%;
    }

    .showcase-img {
        height:          280px;
        object-position: center 12%;
    }
}

/* 480px */
@media (max-width: 480px) {
    .showcase-cta {
        height:  86px;
        padding: 0;
    }

    .showcase-cta-label  { font-size: 22px; }
    .showcase-cta-bullet { font-size: 14px; }

    .showcase-row {
        padding: 12px;
        gap:     12px;
    }

    .showcase-img { height: 230px; }
}

/* 375px — small mobile */
@media (max-width: 375px) {
    .showcase-img { height: 210px; }
}
/* ================================================
   FOOTER — Maison de Poterie
   ================================================ */
.site-footer {
  margin-top: 120px;
  background-color: #787e9f;
  color: #d8d5e6;
  font-family: 'Jost', sans-serif;
  padding: 64px 60px 0;
}

.footer-inner {
  max-width: 1240px;
  margin: 0 auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr;
  gap: 40px;
  padding-bottom: 56px;
}

/* ---- Brand column ---- */
.footer-logo {
  font-family: 'Cormorant Garamond', serif;
  line-height: 1.05;
  margin-bottom: 18px;
}

.footer-logo .logo-script {
  display: block;
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  color: #ffffff;
}

.footer-logo .logo-main {
  display: block;
  font-weight: 500;
  font-size: 26px;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.footer-tagline {
  font-size: 13px;
  line-height: 1.7;
  color: #c7c3da;
  max-width: 230px;
  margin-bottom: 22px;
}

.footer-social {
  display: flex;
  gap: 14px;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid #6a6790;
  border-radius: 50%;
  color: #d8d5e6;
  text-decoration: none;
  transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}

.footer-social a:hover {
  border-color: #d98a5a;
  background-color: #d98a5a;
  color: #4b4870;
}

.footer-social svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

/* ---- Link columns ---- */
.footer-col-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: #f5f1ec;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #6a6790;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.footer-links a {
  font-size: 13.5px;
  color: #c7c3da;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: #d98a5a;
}

/* ---- Contact column ---- */
.footer-contact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-bottom: 26px;
}

.footer-contact-list li {
  font-size: 13.5px;
  color: #c7c3da;
}

.footer-contact-list a {
  color: #c7c3da;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-contact-list a:hover {
  color: #d98a5a;
}

.footer-newsletter-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: #f5f1ec;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.footer-newsletter-form {
  display: flex;
  max-width: 240px;
}

.footer-newsletter-form input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1px solid #6a6790;
  border-right: none;
  color: #f5f1ec;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  padding: 10px 14px;
  outline: none;
}

.footer-newsletter-form input::placeholder {
  color: #9d99b8;
}

.footer-newsletter-form input:focus {
  border-color: #d98a5a;
}

.footer-newsletter-form button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  border: none;
  background-color: #ffffff;
  color: #000000;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.footer-newsletter-form button:hover {
  background-color: #e8e8e8;
}

.footer-newsletter-form button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* ---- Bottom bar ---- */
.footer-bottom {
  border-top: 1px solid #605d84;
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.footer-copyright {
  font-size: 12px;
  color: #a9a5c4;
}

.footer-legal {
  display: flex;
  gap: 24px;
}

.footer-legal a {
  font-size: 12px;
  color: #a9a5c4;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-legal a:hover {
  color: #d98a5a;
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 40px;
  }
}

@media (max-width: 560px) {
  .site-footer { padding: 48px 24px 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}