/* Last-Modified: Sat, 1 Jan 2000 10:00:30 GMT [ver: ] */
/* Current-Time:Fri, 23 Oct 2026 07:24:26 -0500*/
/* Base: desktop visible, mobile hidden */
.desktop-text { display: block !important; }
.mobile-text  { display: none !important; }

/* Phones (portrait) – show mobile version */
@media screen and (max-width: 600px) {
  .desktop-text { display: none !important; }
  .mobile-text  { display: block !important; }
}

/* Phones (landscape, short height) – also show mobile + lift it */
@media screen and (orientation: landscape) and (max-height: 450px) {
  .desktop-text { display: none !important; }
  .mobile-text  { display: block !important; }
  .quote-wrapper {
    position: relative !important;
    top: -3.5vh !important;   /* raise text; tweak in 0.5vh steps */
  }
}

/* Tablets keep desktop; tiny portrait tweak (optional) */
@media screen and (min-width: 601px) and (max-width: 1024px) and (orientation: portrait) {
  .desktop-text { margin-top: 3% !important; }
}
/* === Force a warm-brown hover overlay on any gallery/thumb item === */
.portfolio .thumb,
.gallery .thumb,
.thumbnail,
.portfolio-item,
.artwork-thumb {
  position: relative !important; /* ensure a positioning context */
}

/* create the overlay regardless of template classes */
.portfolio .thumb:hover::after,
.gallery .thumb:hover::after,
.thumbnail:hover::after,
.portfolio-item:hover::after,
.artwork-thumb:hover::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(111, 70, 56, 0.90) !important; /* #6F4638 @ ~90% */
  z-index: 2;
  pointer-events: none; /* don't block clicks */
}

/* make overlay text readable when it appears */
.portfolio .thumb:hover,
.gallery .thumb:hover,
.thumbnail:hover,
.portfolio-item:hover,
.artwork-thumb:hover {
  color: #EDEAE1 !important; /* parchment */
}

/* links inside the hovered item */
.portfolio .thumb:hover a,
.gallery .thumb:hover a,
.thumbnail:hover a,
.portfolio-item:hover a,
.artwork-thumb:hover a {
  color: #EDEAE1 !important;
  text-decoration: none !important;
  position: relative; 
  z-index: 3; /* ensure above the overlay */
}
/* EMERGENCY READABILITY: make any hovered gallery/portfolio thumb use light text */
.thumb:hover *, 
.thumbnail:hover *, 
.portfolio-item:hover *, 
.gallery .thumb:hover *, 
[class*="gallery"] .thumb:hover *, 
[class*="portfolio"] .thumb:hover *, 
[class*="grid"] [class*="item"]:hover * {
  color: #EDEAE1 !important;            /* parchment */
  text-shadow: 0 1px 0 rgba(0,0,0,.25); /* subtle lift if overlay is dark */
}
/* === FORCE OVERLAY + TEXT COLORS ON /works === */
a.thumb .caption,
.thumb .caption,
.thumbnail .caption,
.portfolio-item .caption,
.artwork-thumb .caption,
.image-overlay,
.image-caption,
.thumb .overlay,
.thumbnail .overlay,
.portfolio-item .overlay,
.artwork-thumb .overlay {
  background: #9A655FCC !important;   /* rose panel */
  box-shadow: none !important;
  mix-blend-mode: normal !important;
}

a.thumb .caption *,
.thumb .caption *,
.thumbnail .caption *,
.portfolio-item .caption *,
.artwork-thumb .caption *,
.image-overlay *,
.thumb .overlay *,
.thumbnail .overlay *,
.portfolio-item .overlay *,
.artwork-thumb .overlay * {
  color: #EDEAE1 !important;           /* parchment text */
  text-shadow: none !important;
}

a.thumb:hover .caption,
.thumb:hover .caption,
.thumbnail:hover .caption,
.portfolio-item:hover .caption,
.artwork-thumb:hover .caption,
.thumb:hover .overlay,
.thumbnail:hover .overlay,
.portfolio-item:hover .overlay,
.artwork-thumb:hover .overlay {
  background: #A56F69CC !important;    /* slightly lighter on hover */
}
/* TEMP: make any overlay/caption text readable */
[class*="overlay"] *, [class*="caption"] * {
  color: #EDEAE1 !important;          /* parchment */
  text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
  opacity: 1 !important;               /* in case theme lowers text opacity */
}
/* --- FASO Works grid overlay + caption (Chelsea) --- */

/* 1) Force a readable caption color on all overlay/caption text */
.faso-works-section-thumbnail-item figcaption,
.faso-works-section-thumbnail-item figcaption *,
.faso-works-expanded-section-title,
.faso-works-expanded-section-info {
  color: #EDEAE1 !important;             /* parchment text */
  text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
}

/* 2) Many Chelsea variants paint the overlay on the LINK, not the figcaption.
      Add a solid brand backdrop on hover. */
.faso-works-section-thumbnail-item a.faso-works-data-linktodetail {
  position: relative !important;
}

/* create our own overlay layer */
.faso-works-section-thumbnail-item a.faso-works-data-linktodetail::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-color: #6F4638E6 !important; /* brand brown @ ~90% */
  opacity: 0 !important;                   /* hidden by default */
  transition: opacity .18s ease-in-out !important;
}

/* reveal overlay on hover/focus */
.faso-works-section-thumbnail-item a.faso-works-data-linktodetail:hover::before,
.faso-works-section-thumbnail-item a.faso-works-data-linktodetail:focus::before {
  opacity: 1 !important;
}

/* keep caption above our overlay layer */
.faso-works-section-thumbnail-item figcaption {
  position: relative !important;
  z-index: 2 !important;
}
/* --- Lift caption above overlay and center it --- */
.faso-works-section-thumbnail-item {
  position: relative !important;
}

/* the overlay layer stays under the caption */
.faso-works-section-thumbnail-item a.faso-works-data-linktodetail::before {
  z-index: 1 !important;
}

/* caption sits on top, centered */
.faso-works-section-thumbnail-item figcaption {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem !important;
  text-align: center !important;
  z-index: 2 !important;
  color: #EDEAE1 !important;        /* parchment */
  text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
}

/* make sure any text inside inherits the readable color */
.faso-works-section-thumbnail-item figcaption *,
.faso-works-expanded-section-title,
.faso-works-expanded-section-info {
  color: #EDEAE1 !important;
}
/* Keep outer site border from palette — no changes here */

/* Banner/header border - darker warm plum */
#header,
.site-header,
.custom-banner {
  border: 8px solid #5C3527 !important; /* dark warm plum */
}

/* Artwork borders - soft neutral to contrast overlay */
.faso-works-section-thumbnail-item img,
.artwork-thumb img,
.portfolio-item img {
  border: 4px solid #A18479 !important; /* soft beige-grey */
}
header.faso-header img.faso-image-logo-url {
  border-color: #762020 !important; /* warm burgundy tone */
}
.faso-image-logo-url img {
  border: 8px solid #762020 !important;
}
/* Force main artwork image border color */
img.faso-main-image-mainpagepicture {
    border-color: #853634 !important;
}
.faso-nav a {
    font-weight: bold !important;
}
/* Load EB Garamond from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@700&display=swap');

/* Apply EB Garamond to nav menu links */
.faso-nav a {
    font-family: 'EB Garamond', serif !important;
    font-weight: 700 !important;
}

/* Keep the font on hover and active states */
.faso-nav a:hover,
.faso-nav a:active {
    font-family: 'EB Garamond', serif !important;
    font-weight: 700 !important;
}

/* Space between header and nav menu */
.faso-nav {
  margin-top: 20px !important;  /* adjust until it matches the menu-to-divider gap */
  margin-bottom: 15px !important; /* keep current bottom spacing */
}
/* ----- HEADER + NAV LAYOUT (Chelsea) ----- */

Do I leave all this?

/* Center the header image */
.site-title.faso-nav-heading {
  display: flex !important;
  justify-content: center !important;
}
.site-title.faso-nav-heading img {
  display: block !important;
  margin: 0 !important;   /* flex is doing the centering */
}

/* Center the nav as a block (ignores any left padding from the theme) */
.faso-header .main-nav.faso-nav,
header .main-nav.faso-nav {
  display: flex !important;
  justify-content: center !important;
}

/* Keep the menu itself tightly centered */
.main-nav.faso-nav > ul {
  display: inline-flex !important;
  gap: 28px;              /* adjust spacing between items if you like */
  padding: 0 !important;
  margin: 0 !important;
}
/* visually shift icons right without changing their internal spacing */
header.faso-header .social.faso-social-icons {
  transform: translateX(140px);  /* try 12, 14, 16… */
}
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Playfair+Display:wght@500;600&display=swap');
/* Body content: EB Garamond */
body, p, li, blockquote, figcaption {
    font-family: 'EB Garamond', Garamond, serif;
}

/* Headings: Playfair Display */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', 'EB Garamond', Garamond, serif;
}

/* Navigation stays Garamond */
nav, .nav, .menu, .menu a {
    font-family: 'EB Garamond', Garamond, serif;
}
h1, h2, h3 {
    font-weight: 600; /* keeps headings elegant but visible */
}
/* Artwork titles: Playfair Display */
.artwork-title,
.portfolio-title,
.work-title,
#artwork-title,
#portfolio-title {
    font-family: 'Playfair Display', 'EB Garamond', Garamond, serif !important;
    font-weight: 600;   /* keeps them distinct */
}

/* Artwork captions/metadata: EB Garamond */
.artwork-caption,
.portfolio-caption,
.work-caption,
#artwork-caption,
#portfolio-caption {
    font-family: 'EB Garamond', Garamond, serif !important;
    font-weight: 400;
}
/* Artwork titles refined – italic style */
.artwork-title,
.portfolio-title,
.work-title,
#artwork-title,
#portfolio-title {
    font-family: 'Playfair Display', 'EB Garamond', Garamond, serif !important;
    font-style: italic !important;   /* <-- new */
    font-weight: 500;                /* keeps it elegant, not heavy */
    font-size: 1.25em !important;    /* ~20% larger than body */
    letter-spacing: 0.5px !important;
    line-height: 1.3em !important;
    margin-bottom: 0.5em !important;
}
/* Artwork detail page title (e.g., "Eternal Sleep") */
#content h1.page-title,
.content h1.page-title,
h1.page-title {
  font-style: italic !important;
  /* optional if you want to lock the face too: */
  /* font-family: "EB Garamond", Garamond, "Times New Roman", serif !important; */
}

/* If the theme is using a different class for detail titles, catch those too */
h1.artwork-title,
.entry h1.entry-title {
  font-style: italic !important;
}
/* --- Hard-center the custom banner header --- */
.faso-header .site-title.faso-nav-heading {
  width: max-content !important;     /* shrink-wrap to the image */
  margin-left: auto !important;      /* then center it */
  margin-right: auto !important;
  text-align: center !important;
  padding-left: 0 !important;        /* kill stray grid padding */
  padding-right: 0 !important;
}

.faso-header .site-title.faso-nav-heading img.faso-image-logo-url {
  display: block !important;         /* no inline gaps, plays nice with centering */
  height: auto !important;
}