/* Photography article carousel and intrinsic full-bleed image layout.
 * This stylesheet is loaded only on posts inside the riixphoto column.
 */
/* Keep the complete photography breadcrumb on one line. The linked ancestors
 * and separators retain their natural width; only the current article title
 * consumes the remaining space and truncates when the viewport is narrow. */
body.single-post:has(.dx-article-breadcrumb a[href*="/category/columns/riixphoto/"]) .dx-article-breadcrumb-inner {
  flex-wrap:nowrap!important;
  min-width:0!important;
}

body.single-post:has(.dx-article-breadcrumb a[href*="/category/columns/riixphoto/"]) .dx-article-breadcrumb-inner > :not(.dx-breadcrumb-current) {
  flex:0 0 auto!important;
}

body.single-post:has(.dx-article-breadcrumb a[href*="/category/columns/riixphoto/"]) .dx-article-breadcrumb-inner > .dx-breadcrumb-current {
  flex:1 1 auto!important;
  min-width:0!important;
  max-width:none!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}

body.single-post:has(.dx-article-breadcrumb a[href*="/category/columns/riixphoto/"]) .dx-article-breadcrumb-inner > .dx-breadcrumb-current > .dx-breadcrumb-label {
  display:block!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}

/* Keep this selector deliberately stronger than the legacy photography rules
 * in skin.css. The protection script can wrap a direct IMG in a P after first
 * paint; both DOM shapes must resolve to the exact same geometry. */
html body.single-post .dx-photo-theme-surface.dx-photo-theme-surface article.dx-photo-article.dx-photo-article .dx-prose.dx-prose > :is(img,figure:has(img),p:has(img),.wp-block-image,.dx-photo-protected-media,.dx-photo-protected-media-link) {
  position:relative;
  box-sizing:border-box;
  width:max-content!important;
  max-width:100vw!important;
  margin-left:50%!important;
  margin-right:0!important;
  transform:translateX(-50%);
}

/* Legacy photography posts often store an image as a direct child of the
 * article body. Give those images their final dimensions during first paint;
 * waiting for the footer script caused a visible left-to-centre jump. */
html body.single-post .dx-photo-theme-surface.dx-photo-theme-surface article.dx-photo-article.dx-photo-article .dx-prose.dx-prose > img {
  display:block!important;
  width:auto!important;
  max-width:100vw!important;
  height:auto!important;
}

html .dx-photo-theme-surface article.dx-photo-article .dx-prose > :where(figure:has(img),p:has(img),.wp-block-image,.dx-photo-protected-media,.dx-photo-protected-media-link) img {
  display:block!important;
  width:auto!important;
  max-width:100vw!important;
  height:auto!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* The photography copy-width rule also matches generated SECTION elements.
 * Keep this selector stronger so its auto margins cannot replace the
 * full-bleed centring offset while leaving translateX(-50%) behind. */
html body.single-post .dx-photo-theme-surface.dx-photo-theme-surface article.dx-photo-article.dx-photo-article .dx-prose.dx-prose > section.dx-photo-carousel.dx-photo-carousel[data-dx-photo-carousel] {
  --dx-photo-carousel-native-width:2000px;
  position:relative;
  box-sizing:border-box;
  width:min(100vw,var(--dx-photo-carousel-native-width))!important;
  max-width:100vw!important;
  margin-top:var(--dx-prose-image-margin-y,18px)!important;
  margin-right:0!important;
  margin-bottom:0!important;
  margin-left:50%!important;
  transform:translateX(-50%);
}

.dx-photo-carousel-stage {
  position:relative;
  width:100%;
  overflow:hidden;
  background:#f4f4f4;
  cursor:default;
  outline:none;
}

/* Fade through a dark cover instead of cross-dissolving two differently lit
 * photographs. The outgoing photograph darkens into the cover, the hidden
 * slide swap happens underneath it, and the next photograph is then revealed. */
.dx-photo-carousel-stage::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  background:#111;
  opacity:0;
  pointer-events:none;
  transition:opacity 800ms cubic-bezier(.22,.61,.36,1);
}

.dx-photo-carousel-stage.is-fading-through::after {
  opacity:1;
  transition-duration:600ms;
  transition-timing-function:cubic-bezier(.4,0,1,1);
}

.dx-photo-carousel-stage.is-fading-through .dx-photo-carousel-slide {
  transition:none!important;
}

.dx-photo-carousel-stage.is-fading-through .dx-photo-carousel-arrow {
  opacity:0!important;
  pointer-events:none;
}

.dx-photo-carousel-slides {
  position:relative;
  width:100%;
}

.dx-photo-carousel-slide {
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 800ms cubic-bezier(.22,.61,.36,1),visibility 0s linear 800ms;
}

.dx-photo-carousel-slide.is-active {
  position:relative;
  z-index:1;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition-delay:0s;
}

.dx-photo-carousel-slide > :where(figure,p,.wp-block-image),
.dx-photo-carousel-slide .dx-photo-protected-media,
.dx-photo-carousel-slide .dx-photo-protected-media-link {
  box-sizing:border-box!important;
  width:fit-content!important;
  max-width:100%!important;
  margin:0 auto!important;
}

.dx-photo-carousel-slide img {
  display:block!important;
  width:auto!important;
  max-width:100%!important;
  height:auto!important;
  margin:0 auto!important;
  border:0!important;
  border-radius:0!important;
}

/* Inside a carousel the slide is the single fade owner. Keeping the mark at
 * full child opacity makes each photograph and its own mark enter and leave
 * together, including lazily requested slides. */
html.dx-image-fade .dx-photo-carousel-slide .dx-photo-image-watermark {
  opacity:1!important;
  transition:none!important;
}

.dx-photo-carousel-arrow {
  appearance:none;
  position:absolute;
  top:50%;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#fff;
  opacity:0;
  cursor:pointer;
  pointer-events:auto;
  transform:translate3d(0,-50%,0)!important;
  translate:none!important;
  scale:none!important;
  transition:opacity 220ms ease,color 120ms linear;
}

.dx-photo-carousel-arrow--previous {
  left:clamp(8px,2vw,28px);
}

.dx-photo-carousel-arrow--next {
  right:clamp(8px,2vw,28px);
}

.dx-photo-carousel-arrow svg {
  display:block;
  width:32px;
  height:32px;
  fill:none;
  stroke:currentColor;
  stroke-width:1;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.dx-photo-carousel-stage:hover .dx-photo-carousel-arrow,
.dx-photo-carousel-arrow:focus-visible {
  opacity:.5;
}

.dx-photo-carousel-arrow:disabled,
.dx-photo-carousel-stage:hover .dx-photo-carousel-arrow:disabled,
.dx-photo-carousel-arrow:focus-visible:disabled {
  visibility:hidden;
  opacity:0;
  pointer-events:none;
}

.dx-photo-carousel-arrow:hover,
.dx-photo-carousel-arrow:focus,
.dx-photo-carousel-arrow:active {
  transform:translate3d(0,-50%,0)!important;
  translate:none!important;
  scale:none!important;
}

.dx-photo-carousel-arrow:focus-visible {
  outline:1px solid currentColor;
  outline-offset:-8px;
}

.dx-photo-carousel-navigation {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:12px;
  margin-bottom:30px;
}

.dx-photo-carousel-number {
  appearance:none;
  position:relative;
  width:18px;
  min-width:18px;
  height:18px;
  padding:0;
  border:0;
  border-radius:50%;
  color:transparent;
  background:transparent;
  font-size:0;
  line-height:0;
  cursor:pointer;
}

.dx-photo-carousel-number::before {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#c7c7c7;
  transform:translate(-50%,-50%);
  transition:background-color 180ms ease,transform 180ms ease;
}

.dx-photo-carousel-number:hover::before,
.dx-photo-carousel-number:focus-visible::before,
.dx-photo-carousel-number.is-active::before {
  background:#1a1a1a;
}

.dx-photo-carousel-number:focus-visible {
  outline:1px solid #1a1a1a;
  outline-offset:2px;
}

/* Photography reference copy is identified by the reusable authoring pattern
 * “bold label / description”. It is deliberately quieter than ordinary prose
 * with a natural top gap and a doubled bottom gap after the complete block. */
html body.single-post .dx-photo-theme-surface article.dx-photo-article .dx-prose > p.dx-photo-reference-copy {
  font-size:14px!important;
  font-weight:400!important;
  line-height:1.65!important;
  margin-top:0!important;
  margin-bottom:12px!important;
}

html body.single-post .dx-photo-theme-surface article.dx-photo-article .dx-prose > p.dx-photo-reference-start {
  margin-top:var(--dx-article-paragraph-gap,var(--dx-space-paragraph,30px))!important;
}

html body.single-post .dx-photo-theme-surface article.dx-photo-article .dx-prose > p.dx-photo-reference-end {
  margin-bottom:calc(var(--dx-article-paragraph-gap,var(--dx-space-paragraph,30px)) + var(--dx-article-paragraph-gap,var(--dx-space-paragraph,30px)))!important;
}

html body.single-post .dx-photo-theme-surface article.dx-photo-article .dx-prose .dx-photo-reference-slash {
  display:inline-block;
  color:var(--dx-color-text-muted,#707070)!important;
  font-size:1.16em;
  font-weight:400!important;
  line-height:1;
  transform:scaleY(1.28);
  transform-origin:50% 52%;
}

html body.single-post .dx-photo-theme-surface article.dx-photo-article .dx-prose .dx-photo-reference-slash-start {
  margin:0 .48em;
}

html body.single-post .dx-photo-theme-surface article.dx-photo-article .dx-prose .dx-photo-reference-slash-end {
  margin-left:.62em;
}

html body.single-post .dx-photo-theme-surface article.dx-photo-article .dx-prose > p .dx-photo-note-arrow {
  display:inline-block;
  margin-right:.55em;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif!important;
  font-style:normal!important;
  font-weight:400!important;
  line-height:1;
}

/* Photography-column output standard: reproduce the accepted Cold Lake
 * Hasselblad white mat and centred equipment signature without modifying or
 * upscaling source photographs. */
body.single-post .dx-photo-theme-surface .dx-photo-output-card {
  --dx-photo-mat-inline:0;
}

body.single-post .dx-photo-theme-surface .dx-photo-output-card.is-output-pending {
  background:#f4f4f4;
}

html body.single-post .dx-photo-theme-surface.dx-photo-theme-surface article.dx-photo-article.dx-photo-article .dx-prose.dx-prose > .dx-photo-single-output-card,
html body.single-post .dx-photo-theme-surface.dx-photo-theme-surface article.dx-photo-article.dx-photo-article .dx-prose.dx-prose > .dx-photo-carousel.dx-photo-output-card {
  position:relative;
  box-sizing:border-box;
  width:min(100vw,var(--dx-photo-output-native-width,var(--dx-photo-carousel-native-width,2000px)))!important;
  max-width:100vw!important;
  margin-top:var(--dx-prose-image-margin-y,18px)!important;
  margin-right:0!important;
  margin-bottom:0!important;
  margin-left:50%!important;
  transform:translateX(-50%);
}

body.single-post .dx-photo-theme-surface .dx-photo-output-frame {
  box-sizing:border-box;
  width:100%;
  padding:0;
  background:#fff;
}

body.single-post .dx-photo-theme-surface .dx-photo-output-card.is-output-pending .dx-photo-output-frame,
body.single-post .dx-photo-theme-surface .dx-photo-output-card.is-output-error .dx-photo-output-frame {
  visibility:hidden;
  opacity:0;
}

body.single-post .dx-photo-theme-surface .dx-photo-output-card.is-output-ready .dx-photo-output-frame {
  visibility:visible;
  opacity:1;
  transition:opacity 280ms ease;
}

body.single-post .dx-photo-theme-surface .dx-photo-output-card .dx-photo-carousel-stage,
body.single-post .dx-photo-theme-surface .dx-photo-single-output-media {
  width:100%;
  aspect-ratio:var(--dx-photo-output-aspect-ratio,4 / 3);
  background:#f4f4f4;
}

body.single-post .dx-photo-theme-surface .dx-photo-output-dependent.is-output-pending {
  visibility:hidden;
  opacity:0;
}

body.single-post .dx-photo-theme-surface .dx-photo-output-dependent.is-output-ready {
  visibility:visible;
  opacity:1;
  transition:opacity 280ms ease;
}

body.single-post .dx-photo-theme-surface .dx-photo-single-output-media > :where(img,figure,p,.wp-block-image,.dx-photo-protected-media,.dx-photo-protected-media-link),
body.single-post .dx-photo-theme-surface .dx-photo-single-output-media .dx-photo-protected-media,
body.single-post .dx-photo-theme-surface .dx-photo-single-output-media .dx-photo-protected-media-link {
  box-sizing:border-box!important;
  width:fit-content!important;
  max-width:100%!important;
  margin:0 auto!important;
  transform:none!important;
}

body.single-post .dx-photo-theme-surface .dx-photo-single-output-media img:not(.dx-photo-output-logo) {
  display:block!important;
  width:auto!important;
  max-width:100%!important;
  height:auto!important;
  margin:0 auto!important;
  border:0!important;
  border-radius:0!important;
}

body.single-post .dx-photo-theme-surface .dx-photo-output-information {
  --dx-photo-output-top-gap:clamp(18px,1.875vw,27px);
  --dx-photo-output-logo-camera-gap:clamp(18px,1.875vw,27px);
  --dx-photo-output-camera-optics-gap:clamp(6px,.625vw,9px);
  --dx-photo-output-bottom-gap:clamp(37px,3.75vw,54px);
  box-sizing:border-box;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  min-height:clamp(141px,14.375vw,207px);
  padding:var(--dx-photo-output-top-gap) 20px var(--dx-photo-output-bottom-gap);
  color:#111;
  background:#fff;
  font-family:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  text-align:center;
}

body.single-post .dx-photo-theme-surface .dx-photo-output-logo {
  display:block!important;
  flex:0 0 auto;
  width:clamp(40px,4.125vw,59px)!important;
  max-width:none!important;
  height:auto!important;
  aspect-ratio:575 / 456;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background-color:#fff;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

body.single-post .dx-photo-theme-surface .dx-photo-output-camera {
  margin-top:var(--dx-photo-output-logo-camera-gap);
  color:#171717!important;
  font-family:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:clamp(15px,1.5625vw,23px);
  font-weight:500!important;
  line-height:1.32;
  letter-spacing:.02em!important;
}

body.single-post .dx-photo-theme-surface .dx-photo-output-optics {
  margin-top:var(--dx-photo-output-camera-optics-gap);
  color:#7f7f7f!important;
  font-family:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:clamp(13px,1.375vw,20px);
  font-weight:400!important;
  line-height:1.35;
  letter-spacing:.02em!important;
}

body.single-post .dx-photo-theme-surface .dx-photo-output-information .dx-photo-output-navigation {
  position:absolute;
  top:clamp(18px,1.65vw,24px);
  right:clamp(18px,2vw,30px);
  bottom:auto;
  left:auto;
  gap:0;
  margin-top:0;
  margin-bottom:0;
}

body.single-post .dx-photo-theme-surface .dx-photo-output-information .dx-photo-carousel-number {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  flex:0 0 1.25em;
  width:1.25em;
  min-width:1.25em;
  height:1.2em;
  margin:0!important;
  padding:0!important;
  border:0!important;
  color:#171717!important;
  background:transparent!important;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important;
  font-size:clamp(13px,1.05vw,15px)!important;
  font-weight:400!important;
  line-height:1.2!important;
  letter-spacing:.02em!important;
  text-align:center;
  font-variant-numeric:tabular-nums;
  transform:none!important;
  translate:none!important;
  scale:1!important;
}

body.single-post .dx-photo-theme-surface .dx-photo-output-information .dx-photo-carousel-number.is-active {
  color:#929292!important;
  font-weight:400!important;
}

body.single-post .dx-photo-theme-surface .dx-photo-output-information .dx-photo-carousel-number:hover,
body.single-post .dx-photo-theme-surface .dx-photo-output-information .dx-photo-carousel-number:focus,
body.single-post .dx-photo-theme-surface .dx-photo-output-information .dx-photo-carousel-number:focus-visible,
body.single-post .dx-photo-theme-surface .dx-photo-output-information .dx-photo-carousel-number:active,
body.single-post .dx-photo-theme-surface .dx-photo-output-information .dx-photo-carousel-number.is-active {
  margin:0!important;
  transform:none!important;
  translate:none!important;
  scale:1!important;
}

body.single-post .dx-photo-theme-surface .dx-photo-output-information .dx-photo-carousel-number::before {
  content:none;
}

body.single-post .dx-photo-theme-surface .dx-photo-output-information .dx-photo-carousel-number + .dx-photo-carousel-number {
  margin-left:0;
}

body.single-post .dx-photo-theme-surface .dx-photo-output-information .dx-photo-carousel-number + .dx-photo-carousel-number::before {
  content:none;
}

body.single-post .dx-photo-theme-surface .dx-photo-output-information .dx-photo-output-separator {
  flex:0 0 auto;
  margin:0 8px;
  color:#c7c7c7;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important;
  font-size:clamp(13px,1.05vw,15px)!important;
  font-weight:300!important;
  line-height:1.2!important;
  letter-spacing:.02em!important;
}

body.single-post .dx-photo-theme-surface .dx-photo-output-information .dx-photo-output-count-label {
  margin-left:12px;
  color:#c7c7c7;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important;
  font-size:clamp(13px,1.05vw,15px)!important;
  font-weight:400!important;
  line-height:1.2!important;
  letter-spacing:.02em!important;
}

body.single-post .dx-photo-theme-surface .dx-photo-output-source-exif {
  display:none!important;
}

/* Keep the accepted phone floor and wide-desktop ceiling, while giving the
 * brand signature slightly more presence in narrow desktop / landscape use. */
@media (min-width:768px) and (max-width:1366px) {
  body.single-post .dx-photo-theme-surface .dx-photo-output-logo {
    width:clamp(43px,4.5vw,59px)!important;
  }

  body.single-post .dx-photo-theme-surface .dx-photo-output-camera {
    font-size:clamp(16px,1.7vw,23px);
  }

  body.single-post .dx-photo-theme-surface .dx-photo-output-optics {
    font-size:clamp(14px,1.47vw,20px);
  }
}

@media (hover:none) {
  .dx-photo-carousel-arrow {
    opacity:.5;
  }
}

@media (prefers-reduced-motion:reduce) {
  body.single-post .dx-photo-theme-surface .dx-photo-output-card.is-output-ready .dx-photo-output-frame,
  body.single-post .dx-photo-theme-surface .dx-photo-output-dependent.is-output-ready,
  .dx-photo-carousel-slide,
  .dx-photo-carousel-arrow,
  .dx-photo-carousel-number {
    transition:none;
  }
}
