.elementor-kit-4{--e-global-color-primary:#4A6B8A;--e-global-color-secondary:#C4956A;--e-global-color-text:#2C2926;--e-global-color-accent:#4A6B8A;--e-global-color-1cf2025:#F7F5F2;--e-global-color-4692e96:#F0EDE8;--e-global-color-631938a:#FFFFFF;--e-global-color-a7c4089:#2C2926;--e-global-color-bdc152f:#6B6560;--e-global-color-20ea39d:#9B9590;--e-global-color-b2fe4fc:#4A6B8A;--e-global-color-a8dfcf7:#E8EFF5;--e-global-color-2b8c9e6:#C4956A;--e-global-color-175fd52:#E5E0DA;--e-global-color-f5436c0:#EEEAE5;--e-global-typography-primary-font-family:"Cormorant Garamond";--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"Cormorant Garamond";--e-global-typography-secondary-font-weight:500;--e-global-typography-text-font-family:"DM Sans";--e-global-typography-text-font-size:18px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.7px;--e-global-typography-accent-font-family:"DM Sans";--e-global-typography-accent-font-weight:500;background-color:#F7F5F2;color:var( --e-global-color-a7c4089 );}.elementor-kit-4 button,.elementor-kit-4 input[type="button"],.elementor-kit-4 input[type="submit"],.elementor-kit-4 .elementor-button{background-color:#4A6B8A;font-family:"DM Sans", Sans-serif;color:#FFFFFF;border-radius:6px 6px 6px 6px;padding:12px 12px 12px 12px;}.elementor-kit-4 button:hover,.elementor-kit-4 button:focus,.elementor-kit-4 input[type="button"]:hover,.elementor-kit-4 input[type="button"]:focus,.elementor-kit-4 input[type="submit"]:hover,.elementor-kit-4 input[type="submit"]:focus,.elementor-kit-4 .elementor-button:hover,.elementor-kit-4 .elementor-button:focus{background-color:#3D5D7A;border-radius:6px 6px 6px 6px;}.elementor-kit-4 e-page-transition{background-color:#FFBC7D;}.elementor-kit-4 a{color:var( --e-global-color-accent );}.elementor-kit-4 a:hover{color:#3D5D7A;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --color-primary-text:#2C2926; --color-body-text:#6B6560; --color-meta-text:#9B9590; --color-accent-steel:#4A6B8A; --color-accent-copper:#C4956A; --color-bg-cream:#F7F5F2; --color-bg-card:#F0EDE8; --color-border:#E5E0DA; --font-display:Cormorant Garamond; --font-body:DM Sans; --size-body:15px; --size-card-desc:14px; --size-meta:13px; --size-label:11px; --color-white:#FFFFFF; --color-badge-bg:#E8EFF5; --james-heading:#C4B5FD; --james-mint:#6EE7B7; --james-card:#FDE68A; --james-background:#F8FAFF; }
/* Start custom CSS *//* =====================================================
   WIDE SPECTRUM STUDIO — QUIET MODE (v2)
   Updated with exact Elementor class names
   
   Paste into: Site Settings → Custom CSS
   Last updated: February 2026
   ===================================================== */

/* ─── Dark Palette Variables ─── */
:root {
  --quiet-bg: #1A1917;
  --quiet-surface: #222120;
  --quiet-card: #2A2928;
  --quiet-border: #3A3836;
  --quiet-text: #E8E4DF;
  --quiet-accent: #7BA3C4;
  
   /* ── Wing Accent Colors (Sectioned Gallery) ── */
  --visual-accent: #4A6B8A;
  --visual-accent-hover: #3D5D7A;
  --visual-accent-light: #E8EFF5;
  --visual-band-bg: #EDF2F7;
  --visual-band-border: #D4DEE8;

  --written-accent: #5E7A53;
  --written-accent-hover: #4E6A45;
  --written-accent-light: #EDF3EA;
  --written-band-bg: #F0F3ED;
  --written-band-border: #D6DDCF;

  --media-accent: #7A5E7F;
  --media-accent-hover: #6A4E6F;
  --media-accent-light: #F2ECF3;
  --media-band-bg: #F3EFF4;
  --media-band-border: #DDD4DE;
}

/* ─── Quiet Mode Toggle Button (normal state) ─── */
.quiet-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #6B6560;
  background: #FFFFFF;
  border: 1px solid #E5E0DA;
  cursor: pointer;
  transition: all 0.25s ease;
  user-select: none;
}

.quiet-toggle:hover {
  border-color: #4A6B8A;
  color: #4A6B8A;
}

.quiet-toggle:focus-visible {
  outline: 2px solid #4A6B8A;
  outline-offset: 2px;
}

.quiet-toggle svg {
  width: 16px;
  height: 16px;
}

/* ═════════════════════════════════════════════
   QUIET MODE — ACTIVE STATE
   Everything below only applies when the
   body has the .quiet-mode class
   ═════════════════════════════════════════════ */

/* === 1. PAGE BACKGROUND === */
body.quiet-mode {
  background: var(--quiet-bg) !important;
}

/* === 2. SITE HEADER === */
body.quiet-mode .site-header,
body.quiet-mode .elementor-location-header,
body.quiet-mode header {
  background: var(--quiet-surface) !important;
  border-bottom-color: var(--quiet-border) !important;
}

/* === 3. GALLERY TITLE — lighten for dark bg === */
body.quiet-mode h1 {
  color: var(--quiet-text) !important;
}

/* === 4. HIDE: Subtitle text === */
body.quiet-mode .elementor-widget-text-editor {
  display: none !important;
}

/* === 5. HIDE: Prompt callout container === */
/* The container with the dark background holding the prompt */


/* === 6. HIDE: FacetWP filter widgets === */
body.quiet-mode .elementor-widget-facetwp-facet {
  display: none !important;
}

/* === 7. HIDE: HTML divider widgets (the | lines) === */
body.quiet-mode .elementor-widget-html {
  display: none !important;
}

/* === 8. KEEP: The quiet mode toggle visible === */
/* The toggle is inside an HTML widget, so we need to
   override rule #7 for the specific widget containing it.
   We do this by making the toggle's parent visible again. */
body.quiet-mode .elementor-widget-html:has(#quietModeToggle) {
  display: flex !important;
}

/* Fallback: if :has() isn't supported, we use JS to add
   a class. The toggle button itself stays visible regardless
   because it's the one thing we always need accessible. */

/* === 9. HIDE: Card info (text below images) === */
/* Each loop item card has two child containers inside the
   link — the first is the image, the second is the info.
   This hides the second container (the info). */
body.quiet-mode .gallery-card-info {
  display: none !important;
}

/* === 10. HIDE: Pagination === */
body.quiet-mode .elementor-pagination,
body.quiet-mode .facetwp-pager,
body.quiet-mode nav[aria-label="Gallery pages"] {
  display: none !important;
}

/* === 11. HIDE: CTA description text === */
/* Keep the heading and buttons, hide the paragraph */
body.quiet-mode .submit-cta p {
  display: none !important;
}

/* === 12. GRID: Switch to 4 columns, tight gaps === */
body.quiet-mode .elementor-loop-container,
body.quiet-mode .elementor-loop-container.elementor-grid,
body.quiet-mode .elementor-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  grid-column-gap: 12px !important;
  grid-row-gap: 12px !important;
  gap: 12px !important;
}

/* === 13. CARDS: Strip to bare art === */
body.quiet-mode .e-loop-item,
body.quiet-mode .e-loop-item > .e-con,
body.quiet-mode .e-loop-item > .e-con > a,
body.quiet-mode .e-loop-item a {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 4px !important;
}

/* Disable card hover effects */
body.quiet-mode .e-loop-item:hover,
body.quiet-mode .e-loop-item > .e-con:hover {
  box-shadow: none !important;
  transform: none !important;
}

body.quiet-mode .e-loop-item:hover img {
  transform: none !important;
}

/* === 14. IMAGES: Square aspect ratio === */
body.quiet-mode .e-loop-item .elementor-widget-theme-post-featured-image {
  aspect-ratio: 1 !important;
  overflow: hidden !important;
  border-radius: 4px !important;
}

body.quiet-mode .e-loop-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 4px !important;
}

/* === 15. TOGGLE: Active/dark state === */
body.quiet-mode .quiet-toggle {
  background: var(--quiet-card) !important;
  color: var(--quiet-text) !important;
  border-color: var(--quiet-border) !important;
}

body.quiet-mode .quiet-toggle:hover {
  border-color: var(--quiet-accent) !important;
  color: var(--quiet-accent) !important;
}

/* === 16. BOTTOM CTA: Dark treatment === */
body.quiet-mode .e-con-full:last-child,
body.quiet-mode .submit-cta {
  background: var(--quiet-surface) !important;
  border-top-color: var(--quiet-border) !important;
}

body.quiet-mode .submit-cta h2,
body.quiet-mode .e-con-full:last-child h2 {
  color: var(--quiet-text) !important;
  font-size: 24px !important;
}

/* === 17. ALL ELEMENTOR SECTIONS: transparent in quiet mode === */
body.quiet-mode [data-elementor-type="archive"] .e-con {
  background-color: transparent !important;
}

/* Re-apply dark surface to bottom CTA specifically */
body.quiet-mode [data-elementor-type="archive"] > .e-con:last-child {
  background-color: var(--quiet-surface) !important;
}

/* === 18. RESPONSIVE: Quiet mode grid breakpoints === */
@media (max-width: 1024px) {
  body.quiet-mode .elementor-loop-container,
  body.quiet-mode .elementor-loop-container.elementor-grid,
  body.quiet-mode .elementor-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 768px) {
  body.quiet-mode .elementor-loop-container,
  body.quiet-mode .elementor-loop-container.elementor-grid,
  body.quiet-mode .elementor-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* === 19. REDUCED MOTION: Disable transitions in quiet mode === */
@media (prefers-reduced-motion: reduce) {
  body.quiet-mode * {
    transition: none !important;
  }
}

/* === 20. SCREEN READER UTILITY: Hidden but accessible text === */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* === 21. GALLERY CARDS: Hover lift and shadow effect === */
.e-loop-item .e-con {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  border-radius: 10px;
  overflow: hidden;
}
.e-loop-item .e-con:hover {
  box-shadow: 0 8px 28px rgba(44, 41, 38, 0.12);
  transform: translateY(-3px);
}

/* === 22. GALLERY CARDS: Subtle image zoom on hover === */
.e-loop-item .e-con:hover .elementor-widget-image img {
  transform: scale(1.03);
}
.elementor-widget-image img {
  transition: transform 0.4s ease;
}

/* === 23. REDUCED MOTION: Disable card hover effects === */
@media (prefers-reduced-motion: reduce) {
  .e-loop-item .e-con,
  .e-loop-item .e-con:hover,
  .elementor-widget-image img {
    transition: none !important;
    transform: none !important;
  }
}

/* === 24. GALLERY IMAGES: Preserve full artwork, no cropping === */
.elementor-widget-theme-post-featured-image img {
  object-fit: contain !important;
  background-color: #F0EDE8 !important;
  width: 100% !important;
  height: 100% !important;
}
.elementor-widget-theme-post-featured-image .elementor-image {
  background-color: #F0EDE8;
}

/* === 25. QUIET MODE: Hide prompt callout === */
body.quiet-mode .elementor-element-0cf4307 {
  display: none !important;
}

/* === 26. QUIET MODE: Hide CTA section === */
body.quiet-mode .elementor-element-6b155eb {
  display: none !important;
}
/* 27. Hero 4 — Video & Performance embed */
.hero-video-container iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: 10px;
  display: block;
}

/* Theme tag pills in info bar */
.dce-terms a.dce-term-item {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 14px;
  font-size: 12px;
  font-family: 'DM Sans', sans-serif;
  color: #6B6560;
  background: #F0EDE8;
  border: 1px solid #EEEAE5;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
  margin: 2px;
}

.dce-terms a.dce-term-item:hover {
  border-color: #4A6B8A;
  color: #4A6B8A;
}
/* ═══════════════════════════════════════════
   SECTIONED GALLERY — Band & Header Styles
   ═══════════════════════════════════════════ */

/* ── Section Band Wrapper ── */
.section-band {
  position: relative;
  padding: 0 0 64px;
  margin-top: 16px;
}
.section-band + .section-band {
  border-top: 1px solid #EEEAE5;
}

/* ── Section Header (tinted band above each Loop Grid) ── */
.section-header {
  padding: 40px 40px 32px;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
}

/* Left accent line */
.section-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
}

.section-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.section-header-text {
  flex: 1;
  min-width: 280px;
}

.section-header-eyebrow {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}

.section-header-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 32px;
  font-weight: 400;
  color: #2C2926;
  line-height: 1.2;
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.section-header-subtitle {
  font-size: 15px;
  font-weight: 300;
  color: #6B6560;
  max-width: 480px;
  line-height: 1.6;
}

/* ── View All Button (shared base) ── */
.section-view-all {
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  padding: 7px 16px;
  border-radius: 20px;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.section-view-all:hover {
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════
   PER-WING COLOR RULES
   ═══════════════════════════════════════════ */

/* ── Visual Wing (Steel Blue) ── */
.band-visual .section-header {
  background: var(--visual-band-bg);
  border-bottom: 1px solid var(--visual-band-border);
}
.band-visual .section-header::before {
  background: var(--visual-accent);
}
.band-visual .section-header-eyebrow {
  color: var(--visual-accent);
}
.band-visual .medium-badge {
  color: var(--visual-accent);
  background: var(--visual-accent-light);
}
.band-visual .section-view-all {
  color: var(--visual-accent);
  background: var(--visual-accent-light);
}
.band-visual .section-view-all:hover {
  background: var(--visual-accent);
  color: #FFFFFF;
}

/* ── Written Wing (Warm Sage) ── */
.band-written .section-header {
  background: var(--written-band-bg);
  border-bottom: 1px solid var(--written-band-border);
}
.band-written .section-header::before {
  background: var(--written-accent);
}
.band-written .section-header-eyebrow {
  color: var(--written-accent);
}
.band-written .medium-badge {
  color: var(--written-accent);
  background: var(--written-accent-light);
}
.band-written .section-view-all {
  color: var(--written-accent);
  background: var(--written-accent-light);
}
.band-written .section-view-all:hover {
  background: var(--written-accent);
  color: #FFFFFF;
}

/* ── Media Wing (Muted Plum) ── */
.band-media .section-header {
  background: var(--media-band-bg);
  border-bottom: 1px solid var(--media-band-border);
}
.band-media .section-header::before {
  background: var(--media-accent);
}
.band-media .section-header-eyebrow {
  color: var(--media-accent);
}
.band-media .medium-badge {
  color: var(--media-accent);
  background: var(--media-accent-light);
}
.band-media .section-view-all {
  color: var(--media-accent);
  background: var(--media-accent-light);
}
.band-media .section-view-all:hover {
  background: var(--media-accent);
  color: #FFFFFF;
}

/* ═══════════════════════════════════════════
   JUMP LINKS (Gallery Hero)
   ═══════════════════════════════════════════ */
.section-jumps {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.jump-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  border: 1px solid #EEEAE5;
  background: #FFFFFF;
}
.jump-link:hover {
  transform: translateY(-1px);
}
.jump-link svg {
  width: 14px;
  height: 14px;
  opacity: 0.5;
}

.jump-link.jump-visual { color: var(--visual-accent); }
.jump-link.jump-visual:hover {
  background: var(--visual-accent-light);
  border-color: transparent;
}
.jump-link.jump-written { color: var(--written-accent); }
.jump-link.jump-written:hover {
  background: var(--written-accent-light);
  border-color: transparent;
}
.jump-link.jump-media { color: var(--media-accent); }
.jump-link.jump-media:hover {
  background: var(--media-accent-light);
  border-color: transparent;
}

/* ═══════════════════════════════════════════
   RESPONSIVE — Sectioned Gallery
   ═══════════════════════════════════════════ */
@media (max-width: 900px) {
  .section-header-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 600px) {
  .section-header {
    padding: 32px 20px 24px;
  }
  .section-header-title {
    font-size: 26px;
  }
  .section-jumps {
    gap: 6px;
  }
  .jump-link {
    font-size: 12px;
    padding: 6px 12px;
  }
}/* End custom CSS */