/* =========================================================
   Typography + Base Reset
   ========================================================= */

:root{
  --text: #111;
  --border: #333;
  --bg-soft: #f6f3ee;
}

* { box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.65;
  margin: 0;
  padding: 0;
  color: var(--text);
}

section {
  padding: 2rem;
}

.page-body, .home-intro, .about-text {
  line-height: 1.65;
}

/* Titles */
.site-title-text {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin: 0;
}

h2 {
  position: relative;
  margin-bottom: 1.6rem;
}

h2::after {
  content: "";
  display: block;
  height: 1px;
  width: 120px;
  margin-top: 8px;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.25),
    rgba(0,0,0,0.05),
    transparent
  );
}


/* =========================================================
   Header / Navigation (current dark style)
   ========================================================= */

header {
  background-color: #333;
  color: white;
  padding: 1rem;
  text-align: center;
}

/* Modern masthead layout (hero logo left, title centered) */
.site-header {
  background-color: #333;
  color: white;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 12px 18px;
}

.header-left { justify-self: start; }
.header-center { justify-self: center; text-align: center; }
.header-right { width: 48px; } /* balances logo width */

.hero-logo {
  height: 48px;
  width: auto;
  border-radius: 4px;
  cursor: pointer;
}

/* Subtitle under title in header */
.site-subtitle {
  font-size: 0.95rem;
  opacity: 0.85;
  margin-top: 2px;
}

/* Nav */
nav {
  background-color: #333;
  display: flex;
  justify-content: center;
  padding: 0.25rem 0 0.75rem 0;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav ul li {
  display: inline;
  margin: 0 0.65rem;
}

nav ul li a {
  color: white;
  text-decoration: none;

  font-family: 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 0.9rem;

  opacity: 0.9;
}

nav ul li a:hover {
  text-decoration: underline;
  opacity: 1;
}

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

footer {
  background-color: #333;
  color: white;
  padding: 1rem;
  text-align: center;
}

/* =========================================================
   Generic Artwork Components
   ========================================================= */

.artwork-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
}

.artwork-container img {
  margin: 0;
  max-width: 100%;
  display: block;
}

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

.artwork-title {
  margin-top: 8px;
  font-size: 0.95rem;
  opacity: 0.9;
  line-height: 1.2;
}

.artwork-caption {
  margin-top: 2px;
  font-size: 0.88rem;
  opacity: 0.75;
  line-height: 1.35;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   Home Page Enhancements
   ========================================================= */

.subtitle {
  margin-top: -10px;
  font-size: 1.05rem;
  opacity: 0.9;
}

.cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 16px 0 10px 0;
  flex-wrap: wrap;
}

.cta-btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid #111;
  background: #111;
  color: #fff;
}

.cta-btn.secondary {
  background: transparent;
  color: #111;
}

.home-subhead {
  margin-top: 22px;
}

.about-teaser {
  margin-top: 26px;
  padding-top: 10px;
  border-top: 1px solid #ddd;
}

.thumb-link { text-decoration: none; }

.focus-highlight {
  outline: 4px solid #222;
  outline-offset: 4px;
  transition: outline-color 0.2s ease;
}

/* ===== Home featured thumbnails (FIXED) =====
   Goal: small thumbs in one row, wrap only if needed.
*/
/* ===== Home Featured (larger, airy) ===== */

/* =========================================================
   Home Featured: one artwork per row (gallery-style)
   ========================================================= */
   /* =========================================================
      Home Featured: 2 per row, proportional (no product tiles)
      ========================================================= */

   .home-feature-grid{
     max-width: 1160px;
     margin: 24px auto 0 auto;
     padding: 0 22px;

     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 44px 54px;
     align-items: start;
   }

   /* Each piece is the “frame” (used by your hover-zoom JS) */
   .home-feature-piece{
     margin: 0;
     text-align: center;

     /* this is what makes hover-zoom feel like “looking closer” */
     overflow: hidden;
     border-radius: 14px;

     /* no card/shadow/border */
     box-shadow: none;
     border: none;
     outline: 1px solid rgba(0,0,0,0.06);
     outline-offset: -1px;

     background: transparent;
   }

   /* IMPORTANT: remove the global fixed .zoom-frame size just for Home featured */
   .home-feature-piece.zoom-frame{
     width: 100%;
     height: auto;          /* key: no fixed box */
     position: relative;
   }

   /* Image keeps natural proportions */
   .home-feature-img{
     width: 100%;
     height: auto;          /* key: proportional */
     display: block;

     /* “gallery” feel: don’t crop unless you *want* to */
     object-fit: contain;
   }

   /* Title/caption block */
   .home-feature-meta{
     padding: 14px 14px 18px 14px;
     background: transparent; /* keep clean */
   }

   .home-feature-piece .artwork-title{
     margin-top: 0;
     font-size: 1rem;
     opacity: 0.9;
   }

   .home-feature-piece .artwork-caption{
     margin-top: 6px;
     max-width: 520px;
     margin-left: auto;
     margin-right: auto;
   }

   /* Responsive */
   @media (max-width: 900px){
     .home-feature-grid{
       grid-template-columns: 1fr;
       gap: 34px;
     }
   }


/* =========================================================
   Lightbox (click to open full image)
   ========================================================= */

img[data-full] {
  cursor: zoom-in;
}

.lightbox {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 9999;
}

.lightbox.open {
  opacity: 1;
  visibility: visible;
}

.lightbox-img {
  max-width: 92vw;
  max-height: 92vh;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  cursor: zoom-out;
  transform: scale(0.98);
  transition: transform 0.2s ease;
}

.lightbox.open .lightbox-img {
  transform: scale(1);
}

/* =========================================================
   Inner Zoom (hover follow-mouse)
   ========================================================= */

.zoom-frame {
  width: 220px;
  height: 220px;
  overflow: hidden;
  border-radius: 8px;
  position: relative;
}

.zoom-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  transition: transform 0.08s linear;
  will-change: transform;
}

/* =========================================================
   Gallery Grid Layout
   (Your templates must use: <div class="artwork-container gallery-grid">)
   ========================================================= */

.artwork-container.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-items: center;
  align-items: start;

  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;

  gap: 64px 72px;
}

/* tile width: let it be natural */
.artwork-container.gallery-grid .gallery-item {
  width: auto;
  max-width: none;
}

/* frame adapts but stays square */
.artwork-container.gallery-grid .zoom-frame {
  width: 260px;          /* makes gallery thumbs larger */
  height: 260px;
}

/* Responsive */
@media (max-width: 1100px) {
  .artwork-container.gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .artwork-container.gallery-grid {
    grid-template-columns: 1fr;
    padding-left: 18px;
    padding-right: 18px;
    gap: 44px;
  }

  section {
    padding: 1.25rem;
  }

  #home-feature .artwork-item,
  #home-feature .zoom-frame {
    width: 150px;
    height: 150px;
  }
}

/* =========================================================
   Page Backgrounds (apply to ALL pages, including new admin sections)
   ========================================================= */

/* Every page uses a single <section id="..."> as the main wrapper.
   This targets ANY dynamically created page automatically. */
body > section {
  background: var(--bg-soft);
  min-height: 100vh;
  position: relative;   /* required for the canvas overlay */
}

/* Canvas texture overlay for ALL pages (same as gallery) */
body > section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.015),
      rgba(0,0,0,0.015) 1px,
      transparent 1px,
      transparent 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0.01),
      rgba(0,0,0,0.01) 1px,
      transparent 1px,
      transparent 3px
    );
  opacity: 0.25;
  z-index: 0;
}

/* Make sure your content sits above the overlay */
body > section > * {
  position: relative;
  z-index: 1;
}


/* ===== Page main title ===== */
#gallery > h2 {
  font-size: 2.4rem;
  margin-bottom: 2.2rem;
  text-align: center;
  letter-spacing: 0.8px;
}

/* ===== Gallery section titles ===== */
.gallery-section-block > h2 {
  font-size: 1.4rem;
  margin-top: 3rem;
  margin-bottom: 1.2rem;
  letter-spacing: 0.3px;
  text-align: left;
}

#gallery > h2::after {
  content: "";
  display: block;
  width: 140px;
  height: 1px;
  margin: 12px auto 0 auto;
  background: rgba(0,0,0,0.25);
}

/* ===== Home CTAs (contextual placement) ===== */

.home-portfolio-cta {
  text-align: center;
  margin-top: 28px;
  margin-bottom: 48px;
}

.home-contact-cta {
  margin-top: 18px;
}

/* Make buttons slightly more editorial */
.home-portfolio-cta .cta-btn {
  font-size: 0.95rem;
  padding: 10px 22px;
  letter-spacing: 0.3px;
}

.home-contact-cta .cta-btn {
  font-size: 0.9rem;
  padding: 8px 20px;
}

/* ===== Home editorial links ===== */

.home-link {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-decoration: none;
  color: #111;
  opacity: 0.75;
}

.home-link:hover {
  opacity: 1;
  text-decoration: underline;
}

/* Positioning */
.home-portfolio-cta {
  text-align: center;
  margin-top: 28px;
  margin-bottom: 52px;
}

.home-contact-cta {
  margin-top: 16px;
}

/* =========================================================
   Contact Form (Professional)
   ========================================================= */

.form-wrap {
  max-width: 820px;
  margin: 24px auto 0 auto;
  padding: 0 18px;
}

.contact-form-card {
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  padding: 22px 22px 18px 22px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.06);
  backdrop-filter: blur(3px);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 14px;
}

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

.form-field {
  margin-bottom: 14px;
}

.form-field label {
  display: block;
  font-size: 0.9rem;
  letter-spacing: 0.2px;
  opacity: 0.85;
  margin-bottom: 6px;
}

.contact-form-card input,
.contact-form-card textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 10px;
  background: rgba(255,255,255,0.85);
  font-family: inherit;
  font-size: 1rem;
  outline: none;
}

.contact-form-card textarea {
  min-height: 180px;
  resize: vertical;
}

.contact-form-card input:focus,
.contact-form-card textarea:focus {
  border-color: rgba(0,0,0,0.35);
}

.form-help {
  font-size: 0.86rem;
  opacity: 0.7;
  margin-top: 6px;
}

.form-error {
  margin-top: 6px;
  font-size: 0.88rem;
  color: #8a1f1f;
  background: rgba(138,31,31,0.08);
  border: 1px solid rgba(138,31,31,0.18);
  padding: 8px 10px;
  border-radius: 10px;
}

.form-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}

.turnstile-wrap {
  margin-top: 8px;
  margin-bottom: 12px;
}

/* ===== Videos (multiple per section) ===== */
.section-videos {
  max-width: 980px;
  margin: 26px auto 0 auto;
  padding: 0 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

.video-title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 0.2px;
  margin-bottom: 10px;
  opacity: 0.95;
}

.video-caption {
  margin-top: 10px;
  font-size: 0.92rem;
  opacity: 0.75;
  line-height: 1.55;
}

.video-embed {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 10px 28px rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.5);
}

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

.video-fallback a {
  display: inline-block;
  padding: 10px 12px;
}

/* ===== Home hero title ===== */
.home-hero-title {
  font-family: 'Playfair Display', serif;
  font-size: 3.2rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-align: center;
  margin: 10px 0 26px 0;
  color: #111;
}

/* Smaller on mobile */
@media (max-width: 600px) {
  .home-hero-title {
    font-size: 2.2rem;
  }
}

/* ===== Artistic Learn More links ===== */
.home-link {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  letter-spacing: 0.6px;
  text-decoration: none;
  color: #111;
  position: relative;
  padding-bottom: 4px;
  display: inline-block;
  transition: all 0.25s ease;
}

.home-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40%;
  height: 1px;
  background: rgba(0,0,0,0.6);
  transition: width 0.3s ease;
}

.home-link:hover {
  letter-spacing: 1.2px;
}

.home-link:hover::after {
  width: 100%;
}

/* Center the CTAs nicely */
.home-portfolio-cta,
.home-contact-cta {
  text-align: center;
  margin: 24px 0 8px 0;
}

.home-banner {
  max-width: 1200px;
  margin: 12px auto 26px auto;
  padding: 0 18px;
}

.home-banner-img {
  border-radius: 14px;
  outline: 1px solid rgba(0,0,0,0.06); /* looks like a matte, not a shadow */
  outline-offset: -1px;
}


/* Responsive */
@media (max-width: 700px) {
  .home-banner-img {
    height: 220px;
    border-radius: 12px;
  }
}


/* ===== Home banner: clean, rounded, NO shadow ===== */
.home-banner {
  max-width: 1100px;
  margin: 12px auto 26px auto;
  padding: 0 18px;

  /* Hard-disable any shadow/filters coming from elsewhere */
  box-shadow: none !important;
  filter: none !important;
}

.home-banner-img {
  width: 100%;
  height: 420px;
  object-fit: cover;

  border-radius: 14px;     /* rounded corners */
  border: none !important; /* no border */
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;

  display: block; /* avoids weird gaps and some artifacts */
}

@media (max-width: 700px) {
  .home-banner-img {
    height: 220px;
    border-radius: 12px;
  }
}

/* =========================================================
   MOBILE — force larger Home featured images
   Put at VERY BOTTOM of styles.css
   ========================================================= */

@media (max-width: 820px) {
  /* make home section less padded on phones */
  #home {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .home-feature-grid {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 16px auto 0 auto !important;
  }

  /* the figure should be full width */
  .home-feature-piece {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 14px !important;
  }

  /* image should fill the width (proportional height) */
  .home-feature-img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
  }

  /* make captions read nicely */
  .home-feature-meta {
    padding: 12px 6px 14px 6px !important;
  }
}

/* =========================================================
   Mobile — Home Featured: keep natural proportions (override zoom-frame)
   ========================================================= */

@media (max-width: 820px) {

  /* Your featured <figure> is also .zoom-frame, so remove fixed square sizing */
  .home-feature-piece.zoom-frame {
    width: 100% !important;
    height: auto !important;      /* key */
    overflow: hidden !important;  /* keep zoom containment */
    border-radius: 14px !important;
  }

  /* Make the image proportional (no forced square) */
  .home-feature-piece .zoom-img,
  .home-feature-img {
    width: 100% !important;
    height: auto !important;      /* key */
    object-fit: contain !important; /* keep full image, no cropping */
    display: block !important;
  }
}



/* =========================================================
   MOBILE — full-width images on ALL pages (desktop unchanged)
   Put at VERY END of styles.css
   ========================================================= */

@media (max-width: 820px) {

  /* less side padding so art can breathe */
  body > section {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* ---- Any grid/list of artworks becomes 1 column on mobile ---- */
  .home-feature-grid,
  .artwork-container.gallery-grid,
  .artwork-container {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: 26px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ---- Kill the fixed square “product tile” sizing on mobile ---- */
  .zoom-frame {
    width: 100% !important;
    height: auto !important;      /* key */
    border-radius: 14px !important;
    overflow: hidden !important;  /* keeps inner-zoom contained */
    position: relative !important;
  }

  /* Make images proportional + full width (no cropping) */
  .zoom-img,
  img[data-full] {
    width: 100% !important;
    height: auto !important;      /* key */
    max-width: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* Titles/captions: a bit more readable on phones */
  .artwork-title { font-size: 1rem !important; }
  .artwork-caption { font-size: 0.95rem !important; max-width: 100% !important; }

  /* Banner stays nicely sized */
  .home-banner-img {
    height: 240px !important;
    object-fit: cover !important;
  }
}

/* =========================================================
   Artwork Titles & Captions — Artistic / Gallery Style
   ========================================================= */

/* Title under each artwork */
.artwork-title {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.6px;
  margin-top: 14px;
  margin-bottom: 4px;
  line-height: 1.25;
  opacity: 0.92;
}

/* Caption under title */
.artwork-caption {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 300;
  letter-spacing: 0.3px;
  line-height: 1.45;
  opacity: 0.65;

  margin-top: 6px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* Mobile: slightly larger, more readable */
@media (max-width: 820px) {
  .artwork-title {
    font-size: 1.1rem;
    margin-top: 16px;
  }

  .artwork-caption {
    font-size: 0.95rem;
    line-height: 1.5;
  }
}

/* =========================================================
   Home Featured — remove visible zoom frame outline
   ========================================================= */

/* Remove the subtle outline/frame on Home featured images */
#home .home-feature-piece {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Also ensure no frame appears during hover/zoom */
#home .home-feature-piece.zoom-frame {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* =========================================================
   Home featured: vertically center the two tiles within each row (desktop)
   ========================================================= */
@media (min-width: 901px) {
  /* Row height follows the taller item; center the shorter one */
  .home-feature-grid {
    align-items: center; /* center grid items in the row */
  }

  /* Prevent grid's default "stretch" behavior from keeping content at top */
  .home-feature-piece {
    align-self: center;     /* center this tile vertically in its row */
    height: fit-content;    /* shrink-wrap content so it can actually center */
  }
}

/* =========================================================
   Home featured — softer, more organic corner treatment
   ========================================================= */

/* Frame clips image at all times */
.home-feature-piece,
.home-feature-piece.zoom-frame {
  overflow: hidden;
  border-radius: 18px;     /* softer than 14px */
}

/* Image inherits same softness */
.home-feature-img,
.home-feature-piece .zoom-img {
  border-radius: 18px;
  display: block;
}

/* Mobile: slightly tighter so it doesn't feel blobby */
@media (max-width: 900px) {
  .home-feature-piece,
  .home-feature-img {
    border-radius: 14px;
  }
}



.artwork-made {
  margin-top: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
}

/* Video date styling */
.video-date {
  margin-top: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.4px;
  opacity: 0.6;
  text-align: left;
}

/* =========================================================
   Videos — match artwork typography + placement
   ========================================================= */

/* make each video block behave like an artwork piece */
.section-videos .video-block{
  text-align: center;
}

/* title: reuse artwork title styling */
.section-videos .video-title{
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.6px;
  margin: 14px 0 4px 0;
  line-height: 1.25;
  opacity: 0.92;
}

/* caption: reuse artwork caption styling */
.section-videos .video-caption{
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 300;
  letter-spacing: 0.3px;
  line-height: 1.45;
  opacity: 0.65;

  margin: 10px auto 0 auto;
  max-width: 640px;
}

/* made_date: use the SAME styling as artwork-made */
.section-videos .video-date{
  margin-top: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
  text-align: center; /* important: match artwork */
}

/* =========================================================
   HOME — Desktop: 3 featured images per row, same size
   ========================================================= */


/* =========================================================
   HOME — Desktop: 3 per row, same image size, text centered below
   ========================================================= */

   /* =========================================================
      HOME Featured — make 3-up tiles wider on desktop
      ========================================================= */
      /* =========================================================
         HOME Featured — 3 per row, SAME SIZE, not narrow
         (Desktop/tablet landscape)
         ========================================================= */
      @media (min-width: 901px) {
        /* 3 equal "cards" with a comfortable width */
        #home .home-feature-grid{
          max-width: none !important;          /* stop container from constraining */
          width: min(1500px, 100%) !important; /* expand */
          margin: 24px auto 0 auto !important;
          padding: 0 28px !important;

          display: grid !important;
          grid-template-columns: repeat(3, clamp(320px, 30vw, 440px)) !important;
          justify-content: center !important;  /* centers the 3 columns */
          gap: 32px 32px !important;
          align-items: start !important;
        }

        /* Make sure each tile doesn't shrink smaller than its column */
        #home .home-feature-piece{
          width: 100% !important;
          margin: 0 !important;
        }

        /* A consistent image window size (same size tiles) */
        #home .home-feature-frame{
          width: 100% !important;
          height: 360px !important;           /* increase if you want bigger */
          overflow: hidden !important;
          border-radius: 18px !important;
        }

        /* Fill the frame (uniform look) */
        #home .home-feature-img{
          width: 100% !important;
          height: 100% !important;
          object-fit: cover !important;       /* same-size visual tiles */
          display: block !important;
        }

        /* Text centered BELOW image */
        #home .home-feature-meta{
          text-align: center !important;
          padding: 12px 10px 0 10px !important;
        }
      }