/* Selected-section artwork revision. Modern Swiss describes composition.
   Scientific raster illustrations sit beneath editable HTML/vector overlays. */
.bf-grid {
  gap: 1px; border-radius: 2px; border: 1px solid rgba(92,47,28,.20);
  background: rgba(92,47,28,.20); box-shadow: none;
}
.bf-cell {
  isolation: isolate; min-height: 530px; padding: 28px;
  display: flex; flex-direction: column; border: 0;
  background-color: var(--cream-surface); background-size: cover;
  background-position: center; transition: none;
}
.bf-cell:nth-child(1) { background-image: url(/_xerf-assets/xerf-20260919-r1/assets/xerf-swiss/collagen.webp); }
.bf-cell:nth-child(2) { background-image: url(/_xerf-assets/xerf-20260919-r1/assets/xerf-swiss/skin-layers-v2.webp); background-position: center 42%; }
.bf-cell:nth-child(3) { background-image: url(/_xerf-assets/xerf-20260919-r1/assets/xerf-swiss/adipose-shape-v2.webp); }
.bf-cell:nth-child(4) { background-image: url(/_xerf-assets/xerf-20260919-r1/assets/xerf-swiss/epidermis.webp); }
.bf-cell::before {
  width: 100%; inset: 0; z-index: -1; transform: none;
  background: linear-gradient(180deg,rgba(250,247,240,.14) 10%,rgba(250,247,240,.03) 33%,rgba(250,247,240,.94) 64%,#FAF7F0 100%);
}
.bf-cell:hover { background-color: var(--cream-surface); }
.bf-cell:hover::before { transform: none; }
.bf-cell .bf-num {
  position: static; align-self: flex-start; margin: 0 0 170px;
  font-family: var(--font-sans); font-size: 62px; line-height: 1;
  letter-spacing: -.06em; font-weight: 400; opacity: 1;
  color: #5C2F1C; background: rgba(250,247,240,.88); padding: 5px 12px 10px 7px;
}
.bf-cell:hover .bf-num { opacity: 1; }
.bf-cell .bf-ic { display: none; }
.bf-copy { margin-top: auto; }
.bf-cell h3 { font-size: clamp(1.15rem,2vw,1.5rem); max-width: 28ch; line-height: 1.45; margin-bottom: 12px; }
.bf-cell p { max-width: 46ch; color: #51413B; font-size: 14px; line-height: 1.85; }
.bf-cell .bf-tag {
  background: transparent; color: #5C2F1C; border-radius: 0;
  display: block; padding: 13px 0 0; border-top: 1px solid rgba(92,47,28,.22);
  margin-top: 19px; font-size: 10.5px; letter-spacing: .17em;
}
.art-note, .skin-note { color: #65534D; font-size: 12px; line-height: 1.7; margin: 14px 0 0; }
.art-note { text-align: left; }

.skin-diagram {
  aspect-ratio: 4/5; min-height: 480px; border-radius: 2px;
  border: 1px solid rgba(92,47,28,.18); box-shadow: none;
  background: #FCE9EB;
}
.skin-diagram .skin-tissue { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.skin-diagram .sd-layer {
  background: linear-gradient(90deg,rgba(250,247,240,.94),rgba(250,247,240,.70) 35%,transparent 62%);
  border-bottom: 1px dashed rgba(92,47,28,.28); z-index: 1; padding-inline: 16px;
}
.skin-diagram .sd-layer .nm { max-width: 47%; color: #2C211D; font-size: 14px; line-height: 1.5; }
.skin-diagram .sd-layer .en { max-width: 46%; font-size: 10px; letter-spacing: .04em; line-height: 1.6; }
.skin-diagram .sd-scale { width: 40px; background: rgba(250,247,240,.90); justify-content: space-between; }
.skin-diagram .sd-scale span { writing-mode: vertical-rl; font-size: 10px; letter-spacing: .08em; }
.skin-diagram .sd-beam { z-index: 3; width: 20px; }
.skin-diagram .sd-beam.shallow { left: 54%; background: linear-gradient(180deg,rgba(92,47,28,.35),rgba(92,47,28,.08)); }
.skin-diagram .sd-beam.deep { left: 76%; background: linear-gradient(180deg,rgba(92,47,28,.45),rgba(92,47,28,.10)); }
.skin-diagram .sd-beam .tag { font-size: 10px; padding: 5px 7px; border-radius: 2px; background: #2C211D; color: #FAF7F0; }
.skin-diagram .sd-beam .arrow { border-color: #2C211D; }
.skin-diagram .sd-epi { flex: 0 0 13%; }
.skin-diagram .sd-derm { flex: 0 0 37%; }
.skin-diagram .sd-fat { flex: 0 0 38%; }
.skin-diagram .sd-smas { flex: 0 0 12%; }
.skin-diagram .sd-beam.deep { height: 94%; }

.mode-grid { gap: 18px; }
.mode { padding: 0 22px 24px; border-radius: 2px; overflow: hidden; border-color: rgba(92,47,28,.16); }
.mode .top { gap: 8px; align-items: baseline; }
.mode h4 { font-size: 1.12rem; }
.mode .dots { display: none; }
.mode p { margin-top: 12px; }
.mode-art { position: relative; aspect-ratio: 5/3; margin: 0 -22px 22px; overflow: hidden; background: #FCE9EB; }
.mode-art img { position: absolute; right: 8%; top: 0; width: 48%; height: 100%; object-fit: fill; }
.mode-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mode-focus { fill: rgba(146,66,82,.15); stroke: rgba(146,66,82,.4); stroke-width: 1; }
.mode-path { fill: none; stroke: #5C2F1C; stroke-width: 1.6; }
.mode-arrow { fill: none; stroke: #5C2F1C; stroke-width: 1.6; }
.mode-dot { fill: #5C2F1C; }
.mode-index { position: absolute; bottom: 12px; left: 16px; font: 400 24px/1 var(--font-sans); letter-spacing: -.05em; color: #5C2F1C; }

.comfort-features { gap: 0; counter-reset: comfort; }
.comfort-features .why-item { padding: 21px 0; border-bottom: 1px solid rgba(92,47,28,.18); }
.comfort-features .why-item:first-child { padding-top: 0; }
.comfort-features .why-item:last-child { border-bottom: 0; }
.comfort-features .why-item h3 { font-size: 1.15rem; line-height: 1.5; }
.comfort-features .why-item p { margin-top: 8px; }
.comfort-photo .media-card, .comfort-photo .media-card image-slot { border-radius: 2px; }

@media (max-width: 880px) {
  .skin-diagram { aspect-ratio: 4/5; min-height: 440px; max-width: 440px; }
  .skin-note { max-width: 440px; margin-inline: auto; }
}
@media (max-width: 680px) {
  .bf-cell { min-height: 490px; padding: 24px; }
  .bf-cell .bf-num { font-size: 54px; margin-bottom: 170px; }
  .bf-cell h3 { font-size: 1.25rem; }
}
@media (max-width: 380px) {
  .skin-diagram .sd-layer .nm { font-size: 11px; }
  .skin-diagram .sd-layer .en { font-size: 8px; }
  .skin-diagram .sd-layer { padding-left: 10px; }
  .skin-diagram .sd-beam .tag { font-size: 9px; padding: 5px; }
}

.bf-cell .bf-evidence-note { font-size:12px; line-height:1.65; margin-top:12px; }
.bf-source { display:block; margin-top:10px; font-size:10.5px; line-height:1.5; color:#65534D; }

.citation-links { font-size:12px; line-height:1.7; margin:16px 0 0; color:#65534D; }
.citation-links a, .reference-list a, .bf-source a { color:#5C2F1C; text-decoration:underline; text-underline-offset:3px; }
.references-section { background:#FAF7F0; }
.reference-list { padding-left:24px; margin-top:32px; max-width:920px; }
.reference-list li { padding:18px 0 18px 8px; border-bottom:1px solid rgba(92,47,28,.16); scroll-margin-top:110px; }
.reference-list li > a { font-size:16px; font-weight:600; overflow-wrap:anywhere; }
.reference-list li p { color:#65534D; font-size:13px; line-height:1.75; margin:9px 0 0; }