/* Continue the portfolio's fantasy landscape throughout the ERP case study. */
.erp-page {
  --ink: #f4f2e8;
  --case-gold: #e5cc94;
  --case-teal: #b6decd;
  --case-muted: #ccdadd;
  --erp-seam: #163847;
  --erp-border: #decfa647;
  --erp-panel: #112f3cdb;
  color: var(--ink);
  background: var(--erp-seam);
}
.erp-page main {
  background-color: var(--erp-seam);
  background-image: linear-gradient(180deg, #16384799, transparent 300px),
    linear-gradient(#0a222ec4, #0a222ec4), url('../landscape.png');
  background-position: center top, center, 58% center;
  background-size: 100% 100%, 100% 100%, cover;
  background-repeat: no-repeat;
  background-attachment: scroll, scroll, fixed;
}
.erp-page .case-header { background: var(--erp-seam); border-color: var(--erp-border); }
.erp-page .case-hero { background: linear-gradient(180deg, #16384740, transparent); }
.erp-page .case-summary { background: var(--erp-panel); border-color: #e7d2a55c; }
.erp-page .case-gallery { background: var(--erp-panel); border-color: var(--erp-border); box-shadow: 0 18px 40px #071b284d; }
.erp-page .case-gallery-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--erp-border);
  border-color: var(--erp-border);
}
.erp-page .case-gallery-controls button { color: #d8e5e1; background: #193b48; }
.erp-page .case-gallery-controls button > span { color: #c3cfbd; }
.erp-page .case-gallery-controls button:hover { background: #2b525a; color: #fff7e1; }
.erp-page .case-gallery-controls button[aria-pressed=true] { background: #315959; color: #fff7e1; }
.erp-page .case-gallery-controls button[aria-pressed=true] > span { color: #f0d99f; }
.erp-page .case-gallery-controls button[aria-pressed=true]:hover { background: #38625f; }
.erp-page .case-image-stage {
  aspect-ratio: auto;
  height: clamp(320px, 48vw, 580px);
  padding: 16px;
  background: #07161ee6;
}
.erp-page .case-image-stage img { width: 100%; height: 100%; object-fit: contain; min-width: 0; }
.erp-page .case-gallery figcaption { border-color: var(--erp-border); }
.erp-page .case-caption-copy strong { color: #f4f2e8; }
.erp-page .case-gallery figcaption > a { color: #c5e5d7; }
.erp-page .case-image-note { color: #c2d2cc; }
.erp-page .case-story { border-color: var(--erp-border); }
.erp-page .case-story-copy strong { color: #f3e7c8; }
.erp-page .case-features-section { background: #0c293659; border-color: var(--erp-border); }
.erp-page .case-features article { background: var(--erp-panel); border-color: var(--erp-border); }
.erp-page .case-feature-number { color: #e5cc94; }
.erp-page .case-feature-note { color: #d0e8db; background: #23474ce3; border-color: #b4d2c04d; }
.erp-page .case-feature-note > span { color: #e5cc94; }
.erp-page .case-stack > div { border-color: var(--erp-border); }
.erp-page .case-stack dt { color: #c5e5d7; }
.erp-page .case-closing { background: linear-gradient(180deg, #16384740, var(--erp-seam)); border-top: 1px solid var(--erp-border); }
.erp-page .case-footer { color: #c4d3d3; }
.erp-page .skip-link { background: #f0d99f; color: #163847; }

@media (max-width: 640px) {
  .erp-page .case-gallery-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; padding: 0; }
  .erp-page .case-gallery-controls button { min-height: 48px; }
  .erp-page .case-image-stage { padding: 8px; }
}
/* Touch devices use a scrolling landscape without fixed-background repainting. */
@media (max-width: 640px), (hover: none) {
  .erp-page main {
    background-attachment: scroll;
    background-position: center top, center, 62% top;
    background-size: 100% 100%, 100% 100%, auto 1200px;
    background-repeat: no-repeat, no-repeat, repeat-y;
  }
}