/* Scoped styles: do not change the home page. */
.portfolio-page .portfolio-intro { text-align: left; }
.portfolio-page .metal-panel a:not(.button) { color: #174f70; }
.portfolio-page .portfolio-intro h1 { font-size: clamp(2em, 5vw, 3em); }
.portfolio-page .portfolio-cases { padding-top: 3em; }
.portfolio-page .portfolio-case { margin-bottom: 2.5em; text-align: left; scroll-margin-top: 5em; }
.portfolio-page .portfolio-case h2 { font-size: clamp(1.5em, 4vw, 2em); line-height: 1.3; }
.portfolio-page .case-links { display: flex; flex-wrap: wrap; gap: 0.8em 1.5em; list-style: none; padding: 0; }
.portfolio-page .demo-panel { background: rgba(255,255,255,0.7); border-radius: 10px; padding: 1.5em; }
.portfolio-page .table-scroll { overflow-x: auto; margin: 1.5em 0; }
.portfolio-page table { border-collapse: collapse; width: 100%; min-width: 460px; color: #20262b; font-size: 0.85em; }
.portfolio-page th, .portfolio-page td { text-align: left; padding: 0.65em; border-bottom: 1px solid #8c9ba4; }
.portfolio-page th { font-weight: 700; }
.portfolio-page caption { text-align: left; padding-bottom: 0.75em; }
.portfolio-page figure { margin: 1.5em 0; }
.portfolio-page .case-image { display: block; }
.portfolio-page .case-image img { display: block; width: 100%; height: auto; border-radius: 8px; }
.portfolio-page figcaption { font-size: 0.85em; line-height: 1.6; margin-top: 0.8em; color: #253b46; }
.portfolio-page pre { overflow-x: auto; background: #eef3f6; padding: 1em; margin-top: 1em; color: #20262b; text-shadow: none; font-size: 0.8em; line-height: 1.6; }
.portfolio-page summary { cursor: pointer; font-weight: 700; }
.portfolio-page .case-flow li { overflow-wrap: anywhere; }
.portfolio-page .case-flow { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 1em; padding-left: 1.5em; font-size: 0.85em; }
.portfolio-page #image-viewer { width: min(95vw, 1000px); max-height: 90vh; overflow: auto; padding: 1.5em; border: 2px solid #174f70; border-radius: 12px; color: #20262b; background: #f3f6f8; text-shadow: none; }
.portfolio-page #image-viewer::backdrop { background: rgba(0,0,0,0.8); }
.portfolio-page #image-viewer h2 { font-size: 1.3em; }
.portfolio-page #image-viewer form { margin: 0 0 1em; }
.portfolio-page #viewer-image { width: 100%; height: auto; }
.portfolio-page #viewer-caption { margin-top: 1em; font-size: 0.9em; }
.portfolio-page a:focus-visible, .portfolio-page button:focus-visible, .portfolio-page summary:focus-visible, .portfolio-page .table-scroll:focus-visible { outline: 3px solid #174f70; outline-offset: 4px; }
@media screen and (max-width: 736px) {
	.portfolio-page .demo-panel { padding: 1em; }
	.portfolio-page .case-flow { grid-template-columns: 1fr; }
}