/* Editorial covers share a format. Technical measurements retain the full source. */
.home :is(.dn11-focus,.dn11-quality,.dn11-field){padding-block:54px}
.dn11-section-head{max-width:850px;margin:0 0 30px}
.dn11-section-head h2{font-size:clamp(32px,3vw,43px);line-height:1.12;letter-spacing:-.04em;margin:12px 0 13px}
.dn11-section-head>p:not(.eyebrow){font-size:18px;line-height:1.65;margin:0;color:#526972}
.dn11-focus-grid,.dn11-report-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.dn11-focus-card,.dn11-report-card{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid #d8e0dd;overflow:hidden}
.dn11-product-visual{height:264px;display:grid;place-items:center;background:#f0f2ee;border-bottom:1px solid #e5e9e3;text-decoration:none;overflow:hidden}
.dn11-product-visual .dn11-object{display:block;position:relative;width:240px;height:240px;max-width:100%;overflow:hidden}
.dn11-product-visual .dn11-object>img{position:absolute!important;width:var(--obj-w)!important;height:var(--obj-h)!important;left:var(--obj-x);top:var(--obj-y);max-width:none!important;max-height:none!important;object-fit:fill;padding:0;margin:0;mix-blend-mode:normal;filter:none;transform:none}
.dn11-card-copy{display:flex;flex-direction:column;flex:1;padding:24px 25px 22px}
.dn11-card-copy .eyebrow{font-size:12px;line-height:1.5;letter-spacing:.14em;margin:0 0 12px;color:#536871}
.dn11-card-copy h3{font-size:clamp(23px,2vw,29px);line-height:1.2;letter-spacing:-.035em;margin:0 0 15px;color:#19323e}
.dn11-card-copy h3 a{color:inherit;text-decoration:none}
.dn11-card-copy .dn11-summary{font-size:16px;line-height:1.65;margin:0 0 22px;color:#526972}
.dn11-link{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;color:#19323e;font-size:15px;font-weight:650;line-height:1.5;text-decoration:none;border-bottom:1px solid #ff9e16;padding:9px 0;align-self:flex-start;min-height:42px}
.dn11-card-copy>.dn11-link{margin-top:auto;width:100%;border-bottom:0;border-top:1px solid #e2e8e3;padding-top:14px}
.dn11-link>span{font-size:19px;color:#a26305;transition:transform .18s ease}
.dn11-link:hover>span{transform:translateX(3px)}
.dn11-link:hover{color:#865006}
.dn11-section-link{margin-top:23px}
.dn11-report-card h3{min-height:2.4em}
.dn11-cover{display:block;aspect-ratio:3/2;overflow:hidden;background:#e7ebe6}
.dn11-cover>img{display:block;width:100%;height:100%;object-fit:cover;padding:0;margin:0;filter:none;mix-blend-mode:normal;transform:none}
.home .dn11-quality{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,1fr);gap:54px;align-items:center;border-top:1px solid #dce3dc;border-bottom:1px solid #dce3dc;background:#eef1eb}
.dn11-workshop-photo{position:relative;display:block;min-width:0;text-decoration:none;overflow:hidden;background:#1c2c32}
.dn11-workshop-photo>img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;margin:0;padding:0}
.dn11-workshop-photo>span{display:block;color:#eaf0e9;background:#19323e;padding:12px 17px;font-size:13px;line-height:1.5;letter-spacing:.02em}
.dn11-quality-copy>.eyebrow{margin:0 0 15px;font-size:12px;line-height:1.5}
.dn11-quality-copy h2{font-size:clamp(30px,2.8vw,40px);line-height:1.13;letter-spacing:-.04em;margin:0 0 18px}
.dn11-quality-copy>p:not(.eyebrow){font-size:17px;line-height:1.7;margin:0 0 15px;color:#526972;max-width:520px}
.dn11-process-list{list-style:none;padding:0;margin:17px 0 10px;display:flex;flex-wrap:wrap;gap:7px 16px}
.dn11-process-list li{font-size:13px;line-height:1.6;color:#19323e;padding-left:12px;position:relative}
.dn11-process-list li:before{content:'';width:4px;height:4px;background:#be7b15;position:absolute;left:0;top:.62em}
.dn11-focus-card a:focus-visible,.dn11-report-card a:focus-visible,.dn11-quality a:focus-visible,.dn11-link:focus-visible{outline:3px solid #ff9e16;outline-offset:4px}
@media(min-width:721px) and (max-width:1120px){
 .dn11-focus-grid,.dn11-report-grid{gap:18px}.dn11-card-copy{padding:20px}.dn11-product-visual{height:240px}.dn11-product-visual .dn11-object{width:220px;height:220px}.dn11-card-copy h3{font-size:23px}.dn11-card-copy .dn11-summary{font-size:15px}.home .dn11-quality{gap:32px}.dn11-quality-copy h2{font-size:32px}
}
@media(max-width:720px){
 .home :is(.dn11-focus,.dn11-quality,.dn11-field){padding-block:34px}
 .dn11-section-head{margin-bottom:23px}.dn11-section-head h2{font-size:32px}.dn11-section-head>p:not(.eyebrow){font-size:17px}
 .dn11-focus-grid,.dn11-report-grid{grid-template-columns:1fr;gap:20px}
 .dn11-product-visual{height:230px}.dn11-product-visual .dn11-object{width:215px;height:215px}
 .dn11-card-copy{padding:21px 22px 18px}.dn11-card-copy h3{font-size:27px}.dn11-card-copy .dn11-summary{font-size:16px;margin-bottom:16px}.dn11-card-copy .eyebrow{margin-bottom:9px}.dn11-report-card h3{min-height:0;font-size:26px}.dn11-link{font-size:15px}
 .home .dn11-quality{grid-template-columns:1fr;gap:25px}.dn11-quality-copy h2{font-size:32px}.dn11-quality-copy>p:not(.eyebrow){font-size:16px}.dn11-process-list{gap:7px 18px}.dn11-workshop-photo>span{font-size:12px;padding:10px 13px}
}
@media(prefers-reduced-motion:reduce){.dn11-link>span{transition:none}}

/* V11 candidate. Load after site-v10.css and cases.css.
 * Only article/application bodies and individual case reports are in scope.
 * Horizontal photographs use their natural aspect ratio, with no fixed stage.
 * No product/home/archive rules. No image crop, SVG, drawing-coordinate or
 * object-position changes. New semantic classes are listed in the companion note.
 */
:is(body.single-post, body.single-dn_application) .dn-prose {
  --dn11-media-line: #d9e0d8;
  --dn11-media-bg: #edf1ec;
  --dn11-caption-bg: #f8faf6;
}

/* One frame and caption treatment for the older and current article figures. */
:is(body.single-post, body.single-dn_application) .dn-prose :is(.dn-field-photo, .dn6-article-photo, .dn10-fracture-photo) {
  width: 100%;
  max-width: 820px;
  margin: 30px auto !important;
  border: 1px solid var(--dn11-media-line);
  background: var(--dn11-media-bg);
}
:is(body.single-post, body.single-dn_application) .dn-prose :is(.dn-field-photo, .dn6-article-photo, .dn10-fracture-photo) img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  padding: 0;
  object-fit: initial;
  background: transparent;
}
:is(body.single-post, body.single-dn_application) .dn-prose :is(.dn-field-photo, .dn6-article-photo, .dn10-figure, .dn8-guide-figures > figure) > figcaption {
  display: block;
  margin: 0;
  padding: 14px 16px;
  border-top: 1px solid var(--dn11-media-line);
  background: var(--dn11-caption-bg);
  color: #4d636d;
  font-size: 14px !important;
  line-height: 1.6 !important;
  text-align: left;
}
:is(body.single-post, body.single-dn_application) .dn-prose :is(.dn-field-photo, .dn6-article-photo, .dn10-figure, .dn8-guide-figures > figure) > figcaption > a {
  display: block;
  width: fit-content;
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  white-space: normal;
  text-underline-offset: 4px;
}

/* Horizontal photos have no fixed-height box. The image and its frame follow
 * the source aspect ratio, so no new top/bottom padding is introduced. */
:is(body.single-post, body.single-dn_application) .dn-prose .dn11-full-image {
  display: block;
}

/* Portrait evidence uses a narrower frame, never a landscape crop.
 * Add dn11-media-portrait only to full-frame photographs in the role map.
 */
:is(body.single-post, body.single-dn_application) .dn-prose .dn11-media-portrait,
body.single-dn_case .dn9-case-body .dn9-photo.dn11-media-portrait {
  width: 100%;
  max-width: 420px;
  margin-inline: auto !important;
}
:is(body.single-post, body.single-dn_application) .dn-prose .dn11-media-portrait img,
body.single-dn_case .dn9-case-body .dn9-photo.dn11-media-portrait img {
  height: 500px;
  max-height: none;
  object-fit: contain;
}

/* Same image height within dimension-drawing comparisons. Native cards remain
 * intact, including their margins, dimensions and section labels.
 * dn11-drawings belongs on the comparison wrapper, never the cropped-image node.
 */
:is(body.single-post, body.single-dn_application) .dn-prose :is(.dn8-guide-figures, .dn11-drawings) img {
  display: block;
  width: 100%;
  height: 320px;
  padding: 10px;
  object-fit: contain;
  background: #fff;
}

/* Keep the field-report cover and body hierarchy. No cropping of a measurement
 * or a complete tool. Directory thumbnails are deliberately outside this scope.
 */
body.single-dn_case .dn9-photo:not(.dn9-cover) img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: initial;
}
body.single-dn_case .dn9-photo-pair .dn9-photo img { height: auto; }
/* Auto width + auto height + max constraints retain the source ratio. Landscape
 * covers normally fill the available width; the portrait Qingdao sample stays
 * bounded without forcing the landscape covers into its tall media stage. */
body.single-dn_case .dn9-cover img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 440px;
  margin-inline: auto;
  object-fit: initial;
}
body.single-dn_case .dn9-photo figcaption {
  display: block;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.6;
}
body.single-dn_case .dn9-photo figcaption > .dn9-photo-open {
  display: block;
  width: fit-content;
  margin-top: 8px;
  white-space: normal;
}

@media (max-width: 760px) {
  :is(body.single-post, body.single-dn_application) .dn-prose :is(.dn-field-photo, .dn6-article-photo, .dn10-fracture-photo) {
    margin-block: 24px !important;
  }
  :is(body.single-post, body.single-dn_application) .dn-prose :is(.dn-field-photo, .dn6-article-photo, .dn10-fracture-photo) img,
  body.single-dn_case .dn9-photo:not(.dn9-cover) img,
  body.single-dn_case .dn9-photo-pair .dn9-photo img {
    height: auto;
  }
  :is(body.single-post, body.single-dn_application) .dn-prose .dn11-media-portrait img,
  body.single-dn_case .dn9-case-body .dn9-photo.dn11-media-portrait img {
    height: 400px;
  }
  body.single-dn_case .dn9-cover img { height: auto; max-height: 400px; }
  :is(body.single-post, body.single-dn_application) .dn-prose :is(.dn8-guide-figures, .dn11-drawings) {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  :is(body.single-post, body.single-dn_application) .dn-prose :is(.dn8-guide-figures, .dn11-drawings) img {
    height: 360px;
    padding: 10px;
  }
  /* A 94px-wide caption column breaks nearly every phrase. The complete
   * component now sits beside its caption, with the checklist below both.
   */
  :is(body.single-post, body.single-dn_application) .dn-prose .dn10-traceability-visual {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  :is(body.single-post, body.single-dn_application) .dn-prose .dn10-traceability-visual > .dn10-figure {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    align-items: center;
    max-width: none;
    width: 100%;
  }
  :is(body.single-post, body.single-dn_application) .dn-prose .dn10-traceability-visual > .dn10-figure img {
    height: 240px;
    object-fit: contain;
  }
  :is(body.single-post, body.single-dn_application) .dn-prose .dn10-traceability-visual > .dn10-figure figcaption {
    border-top: 0;
    border-left: 1px solid var(--dn11-media-line);
    padding: 14px;
  }
}

/* Matching editorial covers across the homepage, directory and case openings.
   Full measurement photographs remain in the report body. */
.dn9-directory .dn9-card-image,
body.single-dn_case .dn9-case-hero .dn9-cover .dn9-image-link {display:block;aspect-ratio:3/2;overflow:hidden}
.dn9-directory .dn9-card-image img,
body.single-dn_case .dn9-case-hero .dn9-cover img {width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;padding:0;margin:0}
.dn9-directory .dn9-card-copy h2{min-height:2.4em}
@media(max-width:760px){.dn9-directory .dn9-card-copy h2{min-height:0}}

/* Append after article-media styles. Desktop only; mobile remains unchanged.
 * Right-hand crop keeps 1012:850 and its existing image-coordinate variables.
 */
@media (min-width: 761px) {
  .dn10-wear-photos .dn10-visual-pair {
    --dn11-wear-media-height: 340px;
    align-items: stretch;
  }
  .dn10-wear-photos .dn10-visual-pair > .dn10-figure {
    display: grid;
    grid-template-rows: var(--dn11-wear-media-height) auto;
  }
  .dn10-wear-photos .dn10-visual-pair > .dn10-figure > a:not(.dn10-crop) {
    display: grid;
    place-items: center;
    height: 100%;
    min-height: 0;
  }
  .dn10-wear-photos .dn10-visual-pair > .dn10-figure > a:not(.dn10-crop) > img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
  }
  .dn10-wear-photos .dn10-visual-pair > .dn10-figure > .dn10-crop {
    align-self: center;
    justify-self: center;
    width: min(100%, calc(var(--dn11-wear-media-height) * 1012 / 850));
    height: auto;
    aspect-ratio: var(--crop-ratio);
  }
  .dn10-wear-photos .dn10-visual-pair > .dn10-figure > figcaption {
    margin: 0;
    align-self: stretch;
  }
}

/* Equal media rows in paired inspection photographs keep captions aligned. */
@media(min-width:1051px){
 body.single-dn_case .dn9-photo-pair>.dn9-photo{display:grid;grid-template-rows:300px auto}
 body.single-dn_case .dn9-photo-pair>.dn9-photo>.dn9-image-link{height:300px;min-height:0;display:grid;place-items:center}
 body.single-dn_case .dn9-photo-pair>.dn9-photo img{width:100%;height:300px;max-height:none;object-fit:contain}
}
@media(max-width:760px){
 body.single-post .dn-prose .dn11-media-portrait:has(img[src*="v5-roller-barrel-guide-strip-"]){max-width:300px;margin-block:24px!important}
 body.single-post .dn-prose .dn11-media-portrait img[src*="v5-roller-barrel-guide-strip-"]{height:340px;object-fit:contain}
}