/* LOCAL STUDY ONLY. Enabled by preview.js on localhost + page-id-16.
 * Native image elements, gallery wrappers, transforms and animation rules
 * are deliberately untouched. The two capabilities variants stay native.
 */
html[data-jf-home-type="study"] body.page-id-16 :is(.bde-section-16-158, .bde-section-16-151, .bde-section-16-646) {
  --home-type-sans: "Bricolage Grotesque", system-ui, sans-serif;
  --home-type-serif: "Instrument Serif", Georgia, serif;
  --home-type-paper: #f3f0e9;
  --home-type-muted: #d8dedb;
  --home-type-accent: #bfd8d3;
}

/* HERO: a stationary light-control layer, not an image effect. The native
 * section-container is already positioned. Its existing text is z-index:10.
 * Do not apply this to .bde-div-16-159 or galleries 160 through 164.
 */
html[data-jf-home-type="study"] body.page-id-16 .bde-section-16-158 > .section-container::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 58% 72% at 50% 46%,
    rgb(6 10 12 / 88%) 0%, rgb(6 10 12 / 80%) 40%,
    rgb(6 10 12 / 38%) 72%, transparent 100%);
}

html[data-jf-home-type="study"] body.page-id-16 .bde-section-16-158 :is(.bde-heading-16-366, .bde-heading-16-166) {
  color: var(--home-type-paper) !important;
  -webkit-text-fill-color: var(--home-type-paper) !important;
  font-family: var(--home-type-sans) !important;
  font-weight: 500 !important;
  font-size: clamp(44px, 6vw, 82px) !important;
  font-style: normal;
  line-height: 1.02;
  letter-spacing: -.04em;
  text-transform: none;
  text-shadow: 0 2px 3px rgb(0 0 0 / 65%), 0 8px 28px rgb(0 0 0 / 40%);
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* A single spectral accent, owner requested. Original media stays untouched. */
html[data-jf-home-type="study"] body.page-id-16 .bde-section-16-158 .bde-heading-16-166 {
  font-family: var(--home-type-sans) !important;
  font-weight: 500 !important;
  font-size: clamp(44px, 6vw, 82px) !important;
  font-style: normal;
  letter-spacing: -.04em;
  margin-top: 12px;
  background: linear-gradient(100deg, #60dded 0%, #9db5ff 36%, #cba6ff 66%, #f1a2d5 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: #cba6ff !important;
  -webkit-text-fill-color: transparent !important;
  width: fit-content;
  margin-inline: auto;
  text-shadow: none;
}

html[data-jf-home-type="study"] body.page-id-16 .bde-section-16-158 :is(.bde-text-16-243, .bde-text-16-165) {
  color: var(--home-type-muted) !important;
  -webkit-text-fill-color: var(--home-type-muted) !important;
  font: 400 clamp(16px, 1.4vw, 19px)/1.5 var(--home-type-sans);
  letter-spacing: .015em;
  text-shadow: 0 2px 4px rgb(0 0 0 / 85%);
}

html[data-jf-home-type="study"] body.page-id-16 .bde-section-16-158 .bde-button-16-640 {
  z-index: 10;
}

/* CAPABILITIES: paint behind the COPY row only. These are not the image
 * rows: desktop cards live in 454; the mobile image accordion is 652.
 * Neither column widths nor native section offsets/breakpoints change.
 */
html[data-jf-home-type="study"] body.page-id-16 .bde-section-16-151 .bde-columns-16-447,
html[data-jf-home-type="study"] body.page-id-16 .bde-section-16-646 .bde-columns-16-657 {
  position: relative;
  z-index: 2;
  isolation: isolate;
}

html[data-jf-home-type="study"] body.page-id-16 .bde-section-16-151 .bde-columns-16-447::before,
html[data-jf-home-type="study"] body.page-id-16 .bde-section-16-646 .bde-columns-16-657::before {
  content: "";
  position: absolute;
  inset: -24px -16px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(6 10 12 / 35%),
    rgb(6 10 12 / 88%) 15%, rgb(6 10 12 / 88%) 85%, rgb(6 10 12 / 35%));
  box-shadow: 0 0 32px 12px rgb(6 10 12 / 25%);
}

html[data-jf-home-type="study"] body.page-id-16 .bde-section-16-151 .bde-heading-16-496,
html[data-jf-home-type="study"] body.page-id-16 .bde-section-16-646 .bde-heading-16-660 {
  color: var(--home-type-paper) !important;
  -webkit-text-fill-color: var(--home-type-paper) !important;
  font: 500 clamp(30px, 3.35vw, 46px)/1.12 var(--home-type-sans) !important;
  letter-spacing: -.035em;
  text-transform: none;
  text-wrap: balance;
  text-shadow: 0 2px 8px rgb(0 0 0 / 60%);
  width: auto !important;
  max-width: min(100%, 20ch);
  min-width: 0;
  overflow-wrap: anywhere;
}

html[data-jf-home-type="study"] body.page-id-16 .bde-section-16-151 .bde-text-16-495,
html[data-jf-home-type="study"] body.page-id-16 .bde-section-16-646 .bde-text-16-659 {
  color: var(--home-type-accent) !important;
  -webkit-text-fill-color: var(--home-type-accent) !important;
  font: 500 clamp(13px, 1.05vw, 15px)/1.55 var(--home-type-sans);
  letter-spacing: .025em;
  text-shadow: 0 2px 6px #060a0c;
  max-width: 100%;
}

html[data-jf-home-type="study"] body.page-id-16 .bde-section-16-151 .bde-text-16-452,
html[data-jf-home-type="study"] body.page-id-16 .bde-section-16-646 .bde-text-16-662 {
  color: var(--home-type-muted) !important;
  -webkit-text-fill-color: var(--home-type-muted) !important;
  font: 400 clamp(16px, 1.3vw, 18px)/1.6 var(--home-type-sans);
  text-shadow: 0 2px 6px #060a0c;
  width: auto !important;
  max-width: min(100%, 38ch);
  min-width: 0;
  overflow-wrap: anywhere;
  /* Native 662 is 640px wide and pulled upward by 30–40px on phones. */
  margin-top: 0 !important;
}

/* Only the three existing CTA buttons. Keep their native hover transform
 * and timing; dark text remains readable on BOTH light background states.
 */
html[data-jf-home-type="study"] body.page-id-16 .bde-section-16-158 .bde-button-16-640 .bde-button__button,
html[data-jf-home-type="study"] body.page-id-16 .bde-section-16-151 .bde-button-16-453 .bde-button__button,
html[data-jf-home-type="study"] body.page-id-16 .bde-section-16-646 .bde-button-16-663 .bde-button__button {
  --bde-button-custom-background-color: #f3f0e9;
  --bde-button-custom-background-color-hover: #bfd8d3;
  color: #101719 !important;
  -webkit-text-fill-color: #101719 !important;
  font: 500 14px/1.25 var(--home-type-sans);
  letter-spacing: .015em;
  text-shadow: none;
  min-height: 44px;
}

html[data-jf-home-type="study"] body.page-id-16 .bde-section-16-158 .bde-button-16-640 a:focus-visible,
html[data-jf-home-type="study"] body.page-id-16 .bde-section-16-151 .bde-button-16-453 a:focus-visible,
html[data-jf-home-type="study"] body.page-id-16 .bde-section-16-646 .bde-button-16-663 a:focus-visible {
  outline: 2px solid #bfd8d3;
  outline-offset: 5px;
}

/* GENRE LABELS: label-sized dark plates, not image-wide filters. Preserve
 * Izmir's hover reveal, image zoom, grayscale transition, and card geometry.
 */
html[data-jf-home-type="study"] body.page-id-16 .bde-section-16-151 :is(.bde-image-hover-card-16-590, .bde-image-hover-card-16-566, .bde-image-hover-card-16-577, .bde-image-hover-card-16-592, .bde-image-hover-card-16-586) .ee-imagehover-title,
html[data-jf-home-type="study"] body.page-id-16 .bde-section-16-646 .bde-image-accordion-16-652 .ee-image-accordion-title {
  color: #f3f0e9 !important;
  -webkit-text-fill-color: #f3f0e9 !important;
  background: rgb(6 10 12 / 88%);
  border: 1px solid rgb(243 240 233 / 24%);
  border-radius: 3px;
  padding: .3em .55em;
  font: 500 clamp(18px, 1.55vw, 24px)/1.2 var(--home-type-sans) !important;
  letter-spacing: -.015em;
  text-transform: none;
  text-shadow: 0 1px 2px #060a0c;
  max-width: 100%;
  margin: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Keyboard reveal is confined to the caption's animated text wrapper.
 * This never matches an image, figure, filmstrip, or moving gallery row.
 */
html[data-jf-home-type="study"] body.page-id-16 .bde-section-16-151 :is(.bde-image-hover-card-16-590, .bde-image-hover-card-16-566, .bde-image-hover-card-16-577, .bde-image-hover-card-16-592, .bde-image-hover-card-16-586) a:focus-visible .c4-fade-up {
  opacity: 1;
  transform: translateY(0);
}

html[data-jf-home-type="study"] body.page-id-16 .bde-section-16-151 :is(.bde-image-hover-card-16-590, .bde-image-hover-card-16-566, .bde-image-hover-card-16-577, .bde-image-hover-card-16-592, .bde-image-hover-card-16-586) a:focus-visible,
html[data-jf-home-type="study"] body.page-id-16 .bde-section-16-646 .bde-image-accordion-16-652 .ee-image-accordion-link:focus-visible {
  outline: 3px solid #f3f0e9;
  outline-offset: -5px;
}

@media (max-width: 1119px) {
  html[data-jf-home-type="study"] body.page-id-16 .bde-section-16-646 .bde-image-accordion-16-652 .ee-image-accordion-title {
    font-size: clamp(16px, 2.1vw, 20px) !important;
    padding: .2em .5em;
    line-height: 1.15 !important;
  }
}

@media (max-width: 479px) {
  html[data-jf-home-type="study"] body.page-id-16 .bde-section-16-158 > .section-container::after {
    background: radial-gradient(ellipse 86% 70% at 50% 44%,
      rgb(6 10 12 / 88%) 0%, rgb(6 10 12 / 80%) 45%, transparent 100%);
  }

  html[data-jf-home-type="study"] body.page-id-16 .bde-section-16-646 .bde-columns-16-657::before {
    inset-inline: -12px;
    background: rgb(6 10 12 / 82%);
  }
}
