.project-long-page {
  position: relative;
  width: 1440px;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  overflow-anchor: none;
}

.long-art-range {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  overflow: clip;
  pointer-events: none;
}

.long-art-strip {
  position: absolute;
  display: block;
  width: 1440px;
  height: 1800px;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  user-select: none;
  pointer-events: none;
}

.project-art-top-edge {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 1440px;
  height: 0.5px;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
}

.project-accordion,
.project-detail {
  display: block;
  width: 1440px;
  margin: 0;
  padding: 0;
  border: 0;
  background: #273238;
}

.project-header {
  position: relative;
  display: block;
  width: 1440px;
  height: 180px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0;
  background: #273238;
}

.project-detail {
  position: relative;
  height: 900px;
}

.project-detail[hidden] {
  display: none;
}

/* Replace the former clipped header's edge with the new row's exact colors.
   The shared grid layer paints the boundary above this clean color strip. */
.project-detail::before {
  content: '';
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 1440px;
  height: 3px;
  background: linear-gradient(135deg, transparent 50%, #ce3a77 50%) 1077px 0 / 3px 3px no-repeat,
    linear-gradient(to right,
    #273238 0 180px,
    #b3e8a0 180px 360px,
    #64701d 360px 540px,
    #b3e8a0 540px 720px,
    #ce3a77 720px 900px,
    #64701d 900px 1080px,
    #95a3aa 1080px 1440px);
  pointer-events: none;
}

.project-detail-label-clear {
  position: absolute;
  left: 0;
  width: 180px;
  height: 180px;
  background: #273238;
  pointer-events: none;
}

.project-caption,
.project-control-glyph {
  position: absolute;
}

.project-detail-cleared-cells {
  position: absolute;
  left: 1080px;
  top: 0;
  width: 360px;
  height: 180px;
  background: #95a3aa;
  pointer-events: none;
}

.project-header[data-open="true"] .control-when-closed,
.project-header[data-open="false"] .control-when-open {
  display: none;
}

.project-toggle {
  position: absolute;
  z-index: 1;
  left: 930px;
  top: 100px;
  width: 330px;
  height: 80px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
  appearance: none;
  cursor: pointer;
}

.project-toggle:focus {
  outline: none;
}

.project-toggle:focus-visible {
  outline: 1px dashed #fff;
  outline-offset: -6px;
}

.project-title-art {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 1440px;
  height: 180px;
  overflow: hidden;
  pointer-events: none;
}
.project-title-art path {
  fill: #fff;
}

.project-back-label { position: absolute; left: 1120px; top: 137px; display: block; width: 50px; height: 36px; max-width: none; pointer-events: none; }
.project-detail-label { position: absolute; pointer-events: none; }

/* Resource 12 occupies six columns and four rows below the fixed menu. */
.introduction-layout {
  position: relative;
  width: 1440px;
  height: 2160px;
  background: #95a3aa;
  overflow: clip;
}
.introduction-collage {
  position: absolute;
  left: 180px;
  top: 180px;
  display: block;
  width: 1080px;
  height: 720px;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
  user-select: none;
}

.projects-title-clean-edge { position: absolute; z-index: 1; left: 0; top: 0; width: 1440px; height: 4px; background: #95a3aa; pointer-events: none; }