/* Source reference artwork stays separate from editable HTML text. */
body.nss-page { --nss-ink: #0a165c; --nss-cyan: #78cbe6; --nss-gutter: 150px; background: #f3f9fd; color: var(--nss-ink); }
.nss-page main { padding: 110.6px 0 0; }
.nss-page main > section { margin: 0; border: 0; }
.nss-page main > section::before { display: none; }
.nss-shell { margin-inline: var(--nss-gutter); }
.nss-page .nss-hero { min-height: max(860px, calc(100svh - 110.6px)); padding-block: 70px 88px; background: #081422 url('../images/neuro-skin-science-20260915/hero-skin-network-20261014.png') center / cover no-repeat; color: #eff7fd; }
.nss-hero-copy { max-width: 860px; }
.nss-eyebrow { --arotec-body-size: 18px; --arotec-body-line-height: 26px; margin: 0 0 12px; font-weight: 700; letter-spacing: .6px; color: var(--nss-cyan); }
.nss-page #neuro-hero-title { color: #eff7fd; margin-top: 0; max-width: none; }
.nss-hero-rule { width: 72px; height: 5px; background: var(--nss-cyan); border-radius: 3px; margin: 18px 0 24px; }
.nss-narrative { --arotec-body-size: 24px; --arotec-body-line-height: 32px; width: min(650px, 100%); color: #dce6ef; }
.nss-narrative p { margin: 0 0 22px; font-weight: 500; }
.nss-narrative .lead { color: #dce6ef; }
.nss-narrative p:last-child { max-width: 570px; margin-bottom: 0; }
.nss-page .nss-pathway { padding-block: 72px 80px; background: #f3f9fd; }
.nss-pathway-heading { text-align: center; margin-bottom: 40px; }
.nss-page #nss-pathway-title { color: var(--nss-ink); }
html body.nss-page #nss-pathway-title { margin-bottom: 18px !important; }
.nss-pathway-heading .lead { max-width: 1440px; margin: 0 auto; color: var(--nss-ink); }
.nss-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; padding: 0; margin: 0; list-style: none; }
.nss-step { --site-type-h3: 24px; --site-line-h3: 30px; --site-letter-h3: -.48px; display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.nss-photo { position: relative; width: 100%; margin-bottom: 22px; }
.nss-photo img { display: block; width: 100%; height: auto; aspect-ratio: .62; object-fit: cover; border-radius: 14px; }
.nss-connector { position: absolute; top: 50%; left: calc(100% - 7px); transform: translateY(-50%); z-index: 1; width: 46px; font-size: 46px; color: #319eea; }
html body.nss-page .nss-step h3:not(#dsm-type-lock) { margin: 0 0 20px !important; color: var(--nss-ink); overflow-wrap: normal; hyphens: manual; }
.nss-explore { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; min-height: 44px; padding-block: 5px; border-bottom: 2px solid #386add; color: var(--nss-ink); font-size: 24px; line-height: 32px; font-weight: 700; text-decoration: none; }
.nss-explore .ph { color: #42b7e6; font-size: 28px; transition: transform 160ms; }
.nss-explore:hover { color: #2367cf; }
.nss-explore:hover .ph { transform: translate(2px, -2px); }
.nss-page :is(a, summary):focus-visible { outline: 3px solid #317bc5; outline-offset: 5px; }
.nss-details { margin-top: 64px; }
.nss-detail { border-block-start: 1px solid #c6dce9; scroll-margin-top: 135px; }
.nss-detail:last-child { border-block-end: 1px solid #c6dce9; }
.nss-detail summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 72px; padding: 18px 0; list-style: none; cursor: pointer; font-size: 22px; font-weight: 700; }
.nss-detail summary::-webkit-details-marker { display: none; }
.nss-detail summary .ph { font-size: 24px; transition: transform 160ms; }
.nss-detail[open] summary .ph { transform: rotate(180deg); }
.nss-detail-content { padding: 0 0 26px; }
.nss-central-content { --arotec-body-size: 20px; --arotec-body-line-height: 30px; container: nss-central / inline-size; padding-block: 28px 40px; }
.nss-central-canvas { position: relative; container-type: inline-size; display: grid; gap: 28px; }
.nss-central-heading { margin: 0; text-align: left; }
html body.nss-page #central-stress-title { margin: 0 0 16px !important; color: var(--nss-ink); }
.nss-central-heading .lead { max-width: none; margin: 0 0 16px; color: var(--nss-ink); }
.nss-central-intro { margin: 0; color: #344e8c; }
.nss-central-background { display: block; width: 100%; height: auto; }
.nss-central-pathways { --site-type-h3: 24px; --site-line-h3: 32px; --site-letter-h3: -.48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.nss-central-pathway:last-child { grid-column: 1 / -1; }
html body.nss-page .nss-central-pathway h3:not(#dsm-type-lock) { margin: 0 0 10px !important; color: var(--nss-ink); }
.nss-central-pathway p, .nss-central-conclusion { margin: 0; color: #344e8c; }
.nss-central-footer .nss-central-next { margin-top: 18px; }
/* Keep the uncropped artwork inside its disclosure. Only overlay copy when the
   content area is wide enough; smaller panels retain the readable flow layout. */
@container nss-central (min-width: 1180px) {
  .nss-central-canvas { display: block; }
  .nss-central-heading, .nss-central-pathways, .nss-central-footer { display: contents; }
  .nss-central-heading > *, .nss-central-pathway, .nss-central-footer > * { position: absolute; z-index: 1; }
  html body.nss-page #central-stress-title { --arotec-display-size: clamp(40px, 3.75cqw, 72px); --arotec-display-line-height: clamp(44px, 4.1667cqw, 80px); --arotec-display-letter-spacing: -.02em; top: 2.5%; left: 10%; width: 80%; margin: 0 !important; text-align: center; }
  .nss-central-heading .lead { --arotec-supporting-size: clamp(16px, 1.25cqw, 24px); --arotec-supporting-line-height: clamp(22px, 1.6667cqw, 32px); top: 10.2%; left: 21.9%; width: 63.4%; margin: 0; text-align: center; }
  .nss-central-intro { --arotec-body-size: clamp(16px, 1.25cqw, 24px); --arotec-body-line-height: clamp(22px, 1.6667cqw, 32px); top: 15.2%; left: 23.8%; width: 61%; text-align: center; }
  .nss-central-pathway { --site-type-h3: clamp(19px, 1.65cqw, 32px); --site-line-h3: clamp(24px, 2cqw, 38px); --site-letter-h3: -.02em; --arotec-body-size: clamp(16px, 1.35cqw, 26px); --arotec-body-line-height: clamp(22px, 1.85cqw, 36px); left: 71.3%; width: 27%; }
  .nss-central-pathway:nth-child(1) { top: 29.7%; }
  .nss-central-pathway:nth-child(2) { top: 53.8%; }
  .nss-central-pathway:nth-child(3) { top: 77.8%; }
  html body.nss-page .nss-central-pathway h3:not(#dsm-type-lock) { margin-bottom: .45cqw !important; }
  .nss-central-conclusion { --arotec-body-size: clamp(14px, 1.2cqw, 23px); --arotec-body-line-height: clamp(18px, 1.6cqw, 31px); top: 86.8%; left: 68.5%; width: 29%; }
  .nss-central-canvas .nss-central-next { top: 94.1%; left: 68.5%; width: 26%; justify-content: space-between; margin: 0; min-height: 0; padding-block: .2cqw; font-size: clamp(18px, 1.25cqw, 24px); line-height: 1.3; }
  .nss-central-next .ph { font-size: clamp(22px, 1.65cqw, 32px); }
}
@media (max-width: 800px) {
  .nss-central-content { padding-block: 24px 32px; }
  .nss-central-pathways { grid-template-columns: 1fr; }
  .nss-central-heading .lead { --arotec-supporting-size: 22px; --arotec-supporting-line-height: 30px; }
}
/* The cutaneous network follows the same contained, editable disclosure pattern. */
.nss-network-content { --arotec-body-size: 20px; --arotec-body-line-height: 30px; container: nss-network / inline-size; padding-block: 28px 40px; }
.nss-network-canvas { position: relative; container-type: inline-size; display: grid; gap: 28px; }
.nss-network-heading { margin: 0; }
html body.nss-page #cutaneous-network-title { margin: 0 0 16px !important; color: var(--nss-ink); }
.nss-network-heading .lead { max-width: none; margin: 0 0 16px; color: var(--nss-ink); }
.nss-network-intro, .nss-network-system p, .nss-network-conclusion { margin: 0; color: #344e8c; }
.nss-network-background { display: block; width: 100%; height: auto; }
.nss-network-systems { --site-type-h3: 24px; --site-line-h3: 32px; --site-letter-h3: -.48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.nss-network-system:last-child { grid-column: 1 / -1; }
html body.nss-page .nss-network-system h3:not(#dsm-type-lock) { margin: 0 0 10px !important; color: var(--nss-ink); }
.nss-network-footer .nss-network-next { margin-top: 18px; }
@container nss-network (min-width: 1180px) {
  .nss-network-canvas { display: block; }
  .nss-network-heading, .nss-network-systems, .nss-network-footer { display: contents; }
  .nss-network-heading > *, .nss-network-system, .nss-network-footer > * { position: absolute; z-index: 1; }
  html body.nss-page #cutaneous-network-title { --arotec-display-size: clamp(34px, 3cqw, 60px); --arotec-display-line-height: clamp(42px, 3.6cqw, 72px); --arotec-display-letter-spacing: -.02em; top: 2.4%; left: 10%; width: 80%; margin: 0 !important; text-align: center; }
  .nss-network-heading .lead { --arotec-supporting-size: clamp(16px, 1.5cqw, 28px); --arotec-supporting-line-height: clamp(22px, 2cqw, 38px); top: 9.2%; left: 19%; width: 64%; margin: 0; text-align: center; }
  .nss-network-intro { --arotec-body-size: clamp(16px, 1.4cqw, 26px); --arotec-body-line-height: clamp(22px, 1.9cqw, 36px); top: 14.3%; left: 20.5%; width: 61%; text-align: center; }
  .nss-network-system { --site-type-h3: clamp(19px, 1.6cqw, 30px); --site-line-h3: clamp(24px, 2cqw, 38px); --site-letter-h3: -.02em; --arotec-body-size: clamp(16px, 1.2cqw, 23px); --arotec-body-line-height: clamp(22px, 1.65cqw, 31px); }
  html body.nss-page .nss-network-system h3:not(#dsm-type-lock) { margin-bottom: .4cqw !important; }
  .nss-network-nervous { top: 29.4%; left: 72.2%; width: 26.3%; }
  .nss-network-immune { top: 76.4%; left: 46.8%; width: 25.2%; }
  .nss-network-endocrine { top: 76.4%; left: 72.7%; width: 25.8%; text-align: center; }
  .nss-network-conclusion { --arotec-body-size: clamp(14px, 1.2cqw, 23px); --arotec-body-line-height: clamp(18px, 1.6cqw, 31px); top: 88.5%; left: 56.7%; width: 41.3%; text-align: center; }
  .nss-network-canvas .nss-network-next { top: 93.5%; left: 70.5%; width: 26%; justify-content: space-between; margin: 0; min-height: 0; padding-block: .2cqw; font-size: clamp(18px, 1.25cqw, 24px); line-height: 1.3; }
  .nss-network-next .ph { font-size: clamp(22px, 1.65cqw, 32px); }
}
@media (max-width: 800px) {
  .nss-network-content { padding-block: 24px 32px; }
  .nss-network-systems { grid-template-columns: 1fr; }
  .nss-network-heading .lead { --arotec-supporting-size: 22px; --arotec-supporting-line-height: 30px; }
}
/* Five cellular responses, aligned with the original image inside the panel. */
.nss-cellular-content { --arotec-body-size: 20px; --arotec-body-line-height: 30px; container: nss-cellular / inline-size; padding-block: 28px 40px; }
.nss-cellular-canvas { position: relative; container-type: inline-size; display: grid; gap: 28px; }
.nss-cellular-heading { margin: 0; }
html body.nss-page #cellular-responses-title { margin: 0 0 16px !important; color: var(--nss-ink); }
.nss-cellular-heading .lead { max-width: none; margin: 0 0 16px; color: var(--nss-ink); }
.nss-cellular-intro, .nss-cellular-cell p, .nss-cellular-conclusion { margin: 0; color: #344e8c; }
.nss-cellular-background { display: block; width: 100%; height: auto; }
.nss-cellular-cells { --site-type-h3: 24px; --site-line-h3: 32px; --site-letter-h3: -.48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.nss-cellular-cell:last-child { grid-column: 1 / -1; }
html body.nss-page .nss-cellular-cell h3:not(#dsm-type-lock) { margin: 0 0 10px !important; color: var(--nss-ink); }
.nss-cellular-footer .nss-cellular-next { margin-top: 18px; }
@container nss-cellular (min-width: 1180px) {
  .nss-cellular-canvas { display: block; }
  .nss-cellular-heading, .nss-cellular-cells, .nss-cellular-footer { display: contents; }
  .nss-cellular-heading > *, .nss-cellular-cell, .nss-cellular-footer > * { position: absolute; z-index: 1; }
  html body.nss-page #cellular-responses-title { --arotec-display-size: clamp(34px, 3cqw, 60px); --arotec-display-line-height: clamp(40px, 3.4cqw, 68px); --arotec-display-letter-spacing: -.02em; top: 2%; left: 10%; width: 80%; margin: 0 !important; text-align: center; }
  .nss-cellular-heading .lead { --arotec-supporting-size: clamp(18px, 1.7cqw, 32px); --arotec-supporting-line-height: clamp(22px, 1.9cqw, 36px); top: 8.65%; left: 24%; width: 52%; margin: 0; text-align: center; }
  .nss-cellular-intro { --arotec-body-size: clamp(16px, 1.35cqw, 26px); --arotec-body-line-height: clamp(22px, 1.8cqw, 34px); top: 13%; left: 19.3%; width: 62.5%; text-align: center; }
  .nss-cellular-cell { --site-type-h3: clamp(19px, 1.65cqw, 32px); --site-line-h3: clamp(24px, 2cqw, 38px); --site-letter-h3: -.02em; --arotec-body-size: clamp(16px, 1.25cqw, 24px); --arotec-body-line-height: clamp(22px, 1.7cqw, 32px); left: 68.7%; width: 29%; }
  html body.nss-page .nss-cellular-cell h3:not(#dsm-type-lock) { margin-bottom: .4cqw !important; }
  .nss-cellular-cell:nth-child(1) { top: 23%; }
  .nss-cellular-cell:nth-child(2) { top: 37%; }
  .nss-cellular-cell:nth-child(3) { top: 51%; }
  .nss-cellular-cell:nth-child(4) { top: 64.8%; }
  .nss-cellular-cell:nth-child(5) { top: 78.55%; }
  .nss-cellular-conclusion { --arotec-body-size: clamp(13px, 1.1cqw, 21px); --arotec-body-line-height: clamp(18px, 1.5cqw, 29px); top: 89.9%; left: 59%; width: 40%; text-align: center; }
  .nss-cellular-canvas .nss-cellular-next { top: 94%; left: 70.45%; width: 25.6%; justify-content: space-between; margin: 0; min-height: 0; padding-block: .2cqw; font-size: clamp(18px, 1.25cqw, 24px); line-height: 1.3; }
  .nss-cellular-next .ph { font-size: clamp(22px, 1.65cqw, 32px); }
}
@media (max-width: 800px) {
  .nss-cellular-content { padding-block: 24px 32px; }
  .nss-cellular-cells { grid-template-columns: 1fr; }
  .nss-cellular-heading .lead { --arotec-supporting-size: 22px; --arotec-supporting-line-height: 30px; }
}
.nss-response-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; margin: 0; }
.nss-response-list dt { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.nss-response-list dd { margin: 0; font-size: 18px; line-height: 28px; color: #465c80; }
.nss-mechanisms { columns: 3; padding-left: 22px; margin: 0; font-size: 20px; line-height: 32px; }
.nss-mechanisms li { break-inside: avoid; padding-bottom: 10px; }
/* Fit the complete banner beneath the desktop navigation without clipping copy.
   Keep the established heading/supporting type sizes; compact spacing on short screens. */
@media (min-width: 1200px) {
  /* Scale with the banner instead of enlarging the source to at least 1100px tall. */
  .nss-page .nss-hero { min-height: calc(100svh - 110.6px); padding-block: clamp(16px, 3svh, 40px); background-size: cover; background-position: center; }
  .nss-hero-copy { text-shadow: 0 1px 3px rgb(8 20 34 / 85%); }
}
@media (min-width: 1200px) and (max-width: 1599px) {
  .nss-hero-copy { max-width: 860px; }
  .nss-narrative { width: 590px; }
  .nss-narrative p:last-child { max-width: 535px; }
  .nss-step { --site-type-h3: 20px; --site-line-h3: 26px; --site-letter-h3: -.4px; }
  .nss-flow { gap: 24px; }
  .nss-connector { font-size: 38px; width: 38px; }
  .nss-explore { font-size: 21px; }
}
@media (min-width: 1200px) and (max-height: 900px) {
  .nss-eyebrow { margin-bottom: 8px; }
  html body.nss-page #neuro-hero-title { margin: 0 !important; }
  .nss-hero-rule { margin: 12px 0 18px; }
  .nss-narrative { width: min(860px, 100%); }
  .nss-narrative .lead, .nss-narrative p:last-child { max-width: none; }
  .nss-narrative p { margin-bottom: 14px; }
  .nss-narrative p:last-child { margin-bottom: 0; }
}
@media (max-width: 1199px) {
  body.nss-page { --nss-gutter: 40px; }
  .nss-page .nss-hero { min-height: 0; background-position: right bottom; background-size: auto 310px; padding-block: 56px 345px; }
  .nss-hero-copy { max-width: 860px; }
  .nss-narrative { max-width: 580px; }
  .nss-page .nss-pathway { padding-block: 56px; }
  .nss-flow { grid-template-columns: 1fr; gap: 44px; }
  .nss-step { display: grid; grid-template-columns: minmax(150px, 260px) 1fr; column-gap: 32px; align-items: center; text-align: left; }
  .nss-photo { grid-row: span 2; margin: 0; }
  .nss-photo img { aspect-ratio: 1.1; }
  .nss-connector { left: 50%; top: calc(100% + 3px); transform: translateX(-50%) rotate(90deg); font-size: 38px; width: 38px; }
  html body.nss-page .nss-step h3:not(#dsm-type-lock) { align-self: end; margin-bottom: 12px !important; }
  .nss-step:first-child h3 { align-self: center; grid-row: span 2; }
  .nss-explore { justify-self: start; align-self: start; margin-top: 0; }
  .nss-pathway-heading { text-align: left; }
  .nss-response-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nss-mechanisms { columns: 2; }
}
@media (max-width: 800px) {
  body.nss-page { --nss-gutter: 24px; --arotec-display-size: 44px; --arotec-display-line-height: 52px; --arotec-display-letter-spacing: -.88px; }
  .nss-page main { padding-top: 80px; }
  .nss-page .nss-hero { padding-block: 42px 280px; background-size: auto 250px; background-position: right bottom; }
  .nss-hero-copy { max-width: none; }
  .nss-narrative { --arotec-body-size: 20px; --arotec-body-line-height: 29px; max-width: none; }
  .nss-narrative .lead, .nss-pathway-heading .lead { --arotec-supporting-size: 22px; --arotec-supporting-line-height: 30px; }
  .nss-step { --site-type-h3: 22px; --site-line-h3: 28px; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); column-gap: 22px; }
  .nss-photo img { aspect-ratio: .7; border-radius: 10px; }
  .nss-explore { font-size: 21px; }
  .nss-detail { scroll-margin-top: 104px; }
  .nss-details { margin-top: 48px; }
}
@media (max-width: 480px) {
  body.nss-page { --arotec-display-size: 38px; --arotec-display-line-height: 44px; --arotec-display-letter-spacing: -.76px; }
  .nss-eyebrow { --arotec-body-size: 15px; --arotec-body-line-height: 23px; }
  .nss-step { position: relative; display: flex; gap: 0; text-align: center; }
  .nss-photo { position: static; margin: 0 0 20px; }
  .nss-photo img { aspect-ratio: .88; }
  .nss-connector { top: calc(100% + 10px); }
  .nss-flow { gap: 60px; }
  .nss-step:first-child { margin-bottom: 4px; }
  .nss-step h3, .nss-explore { align-self: center; }
  .nss-response-list { grid-template-columns: 1fr; }
  .nss-mechanisms { columns: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .nss-page *, .nss-page *::before, .nss-page *::after { scroll-behavior: auto !important; transition: none !important; }
}