/* Edition 17: micellization and encapsulation process guide. */
.feed-visual--encapsulation {
  background: radial-gradient(circle at 74% 31%, rgba(112,207,93,.22), transparent 22%), linear-gradient(132deg, #0a2942, #143f5f);
}
.feed-visual--encapsulation .feed-visual-label {
  z-index: 6;
  color: #d7e9ed;
  border: 1px solid rgba(200,229,237,.26);
  background: rgba(8,39,61,.9);
  padding: 4px 6px;
}
.feed-visual--encapsulation .feed-visual-mark { inset: 39px 18px auto auto; width: 121px; height: 38px; }
.feed-visual--encapsulation .feed-visual-mark::before { content: ''; position: absolute; left: 7px; right: 7px; top: 18px; height: 1px; background: rgba(210,235,242,.58); }
.feed-visual--encapsulation .feed-visual-mark i { position: absolute; top: 10px; width: 16px; height: 16px; border: 2px solid #d4edf1; border-radius: 50%; background: #0e3550; box-shadow: 0 0 0 5px rgba(92,168,221,.08); }
.feed-visual--encapsulation .feed-visual-mark i:nth-child(1) { left: 0; border-color: #8ed785; background: #3e8a51; }
.feed-visual--encapsulation .feed-visual-mark i:nth-child(2) { left: 34px; border-color: #b8d7e6; background: #5ca8dd; }
.feed-visual--encapsulation .feed-visual-mark i:nth-child(3) { left: 68px; border-color: #ffd0a2; background: #e88747; }
.feed-visual--encapsulation .feed-visual-mark i:nth-child(4) { left: 102px; border-color: #9be18f; background: #70cf5d; }
.feed-visual--encapsulation .feed-visual-mark i:nth-child(5), .feed-visual--encapsulation .feed-visual-mark i:nth-child(6) { display: none; }

.featured-visual--encapsulation {
  background: radial-gradient(circle at 53% 47%, rgba(92,168,221,.18), transparent 22%), linear-gradient(132deg, #0a2942, #143f5f);
}
.featured-visual--encapsulation .featured-visual-mark::before { content: ''; position: absolute; top: 47%; right: 12%; left: 12%; height: 2px; background: linear-gradient(90deg, rgba(112,207,93,.22), rgba(210,235,242,.78), rgba(232,135,71,.4)); }
.featured-visual--encapsulation .featured-visual-mark i { position: absolute; top: calc(47% - 31px); width: 62px; height: 62px; border: 3px solid #d7ebef; border-radius: 50%; background: #0e3651; box-shadow: 0 0 0 12px rgba(92,168,221,.07); }
.featured-visual--encapsulation .featured-visual-mark i:nth-child(1) { left: 14%; border-color: #9fe193; background: #3d8550; }
.featured-visual--encapsulation .featured-visual-mark i:nth-child(2) { left: 35%; border-color: #b7d9e8; background: #5ca8dd; }
.featured-visual--encapsulation .featured-visual-mark i:nth-child(3) { right: 35%; border-color: #ffd2a4; background: #e88747; }
.featured-visual--encapsulation .featured-visual-mark i:nth-child(4) { right: 14%; border-color: #9fe193; background: #70cf5d; }
.featured-visual--encapsulation .featured-visual-mark i:nth-child(5), .featured-visual--encapsulation .featured-visual-mark i:nth-child(6) { display: none; }

.encapsulation-process-evidence { background: #edf4f6; }
.encapsulation-photo-panel { display: grid; grid-template-columns: .82fr 1.18fr; overflow: hidden; color: #fff; background: #0d2b45; }
.encapsulation-photo-figure { position: relative; min-height: 430px; margin: 0; background: #0b263e; }
.encapsulation-photo-figure::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 45%, rgba(6,26,42,.78)); }
.encapsulation-photo-figure img { width: 100%; height: 100%; display: block; object-fit: cover; }
.encapsulation-photo-figure figcaption { position: absolute; z-index: 1; right: 25px; bottom: 22px; left: 25px; color: #d6e6ed; font-size: 12px; line-height: 1.55; }
.encapsulation-process-map { padding: 46px 46px 39px; }
.encapsulation-process-map .comparison-label, .encapsulation-process-guide .comparison-label, .encapsulation-review-checks .comparison-label { color: #9dde91 !important; }
.encapsulation-process-map h3, .encapsulation-process-guide h3, .encapsulation-review-checks h3 { max-width: 440px; margin: 0; color: #fff; font-size: clamp(28px, 3vw, 39px); line-height: 1.06; letter-spacing: -.058em; }
.encapsulation-stage-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 30px 0 0; padding: 0; background: rgba(210,234,242,.19); list-style: none; }
.encapsulation-stage-list li { min-height: 134px; padding: 18px 19px; background: rgba(255,255,255,.045); }
.encapsulation-stage-list span, .encapsulation-review-list span { display: block; margin-bottom: 18px; color: var(--journal-green); font: 10px var(--mono); letter-spacing: .06em; }
.encapsulation-stage-list b, .encapsulation-review-list b { display: block; margin-bottom: 7px; color: #fff; font-size: 16px; letter-spacing: -.028em; }
.encapsulation-stage-list p, .encapsulation-review-list p { margin: 0; color: #c4d6df; font-size: 12px; line-height: 1.52; }

.encapsulation-process-board { display: grid; grid-template-columns: 1.12fr .88fr; margin-top: 26px; color: #fff; background: #0d2b45; }
.encapsulation-process-guide { padding: 42px 45px 46px; border-right: 1px solid rgba(211,234,244,.18); }
.encapsulation-process-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 31px 0 24px; background: rgba(203,228,239,.22); }
.encapsulation-process-tab { min-height: 54px; padding: 11px 12px; color: #bad0da; border: 0; background: rgba(255,255,255,.04); font: 12px var(--sans); font-weight: 800; line-height: 1.2; text-align: left; cursor: pointer; transition: background .18s var(--ease), color .18s var(--ease); }
.encapsulation-process-tab:hover, .encapsulation-process-tab:focus-visible { color: #fff; outline: 2px solid var(--journal-green); outline-offset: -2px; background: rgba(112,207,93,.14); }
.encapsulation-process-tab[aria-selected='true'] { color: #0b263e; background: var(--journal-green); }
.encapsulation-process-detail { display: grid; grid-template-columns: 50px 1fr; gap: 17px; align-items: start; padding-top: 3px; }
.encapsulation-detail-index { color: var(--journal-green); font: 26px/1 var(--mono); letter-spacing: -.06em; }
.encapsulation-process-detail h4 { margin: 0 0 9px; color: #fff; font-size: 23px; line-height: 1.12; letter-spacing: -.046em; }
.encapsulation-process-detail p { max-width: 650px; margin: 0; color: #c5d8e1; font-size: 14px; line-height: 1.65; }
.encapsulation-detail-checks { display: grid; gap: 7px; margin: 18px 0 0; padding: 0; list-style: none; }
.encapsulation-detail-checks li { position: relative; padding-left: 15px; color: #e0ecf0; font-size: 12px; line-height: 1.45; }
.encapsulation-detail-checks li::before { content: ''; position: absolute; top: .57em; left: 0; width: 5px; height: 5px; background: var(--journal-green); }
.encapsulation-review-checks { padding: 42px 38px 42px; background: linear-gradient(155deg, #133a55, #0a273f); }
.encapsulation-review-checks h3 { font-size: 30px; }
.encapsulation-review-list { display: grid; gap: 0; margin: 28px 0 0; padding: 0; list-style: none; }
.encapsulation-review-list li { display: grid; grid-template-columns: 39px 1fr; gap: 13px; padding: 15px 0; border-top: 1px solid rgba(211,234,244,.18); }
.encapsulation-review-list span { margin: 2px 0 0; }

@media (max-width: 900px) {
  .encapsulation-photo-panel, .encapsulation-process-board { grid-template-columns: 1fr; }
  .encapsulation-photo-figure { min-height: 375px; }.encapsulation-process-guide { border-right: 0; border-bottom: 1px solid rgba(211,234,244,.18); }
}
@media (max-width: 720px) {
  .feed-visual--encapsulation .feed-visual-mark { top: 34px; right: 13px; width: 109px; height: 36px; }
  .feed-visual--encapsulation .feed-visual-mark i { top: 10px; width: 14px; height: 14px; }
  .feed-visual--encapsulation .feed-visual-mark i:nth-child(1) { left: 0; }.feed-visual--encapsulation .feed-visual-mark i:nth-child(2) { left: 30px; }.feed-visual--encapsulation .feed-visual-mark i:nth-child(3) { left: 60px; }.feed-visual--encapsulation .feed-visual-mark i:nth-child(4) { left: 90px; }
  .featured-visual--encapsulation .featured-visual-mark i { top: calc(47% - 22px); width: 44px; height: 44px; border-width: 2px; box-shadow: 0 0 0 7px rgba(92,168,221,.07); }
  .encapsulation-photo-figure { min-height: 315px; }.encapsulation-photo-figure figcaption { right: 20px; bottom: 17px; left: 20px; font-size: 11px; line-height: 1.48; }
  .encapsulation-process-map { padding: 31px 21px 25px; }.encapsulation-process-map h3, .encapsulation-process-guide h3, .encapsulation-review-checks h3 { font-size: 30px; }
  .encapsulation-stage-list { grid-template-columns: 1fr; margin-top: 24px; }.encapsulation-stage-list li { min-height: 0; padding: 17px; }.encapsulation-stage-list span { margin-bottom: 10px; }.encapsulation-stage-list b { font-size: 16px; }.encapsulation-stage-list p { font-size: 12px; }
  .encapsulation-process-guide { padding: 30px 21px 28px; }.encapsulation-process-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 24px 0 19px; }.encapsulation-process-tab { min-height: 46px; padding: 9px 10px; font-size: 12px; }
  .encapsulation-process-detail { grid-template-columns: 40px 1fr; gap: 12px; }.encapsulation-detail-index { font-size: 20px; }.encapsulation-process-detail h4 { font-size: 20px; }.encapsulation-process-detail p { font-size: 13px; line-height: 1.57; }.encapsulation-detail-checks { margin-top: 16px; }.encapsulation-detail-checks li { font-size: 12px; }
  .encapsulation-review-checks { padding: 31px 21px; }.encapsulation-review-list { margin-top: 22px; }.encapsulation-review-list li { grid-template-columns: 35px 1fr; padding: 14px 0; }.encapsulation-review-list b { font-size: 16px; }.encapsulation-review-list p { font-size: 12px; line-height: 1.5; }
}