/* Shared glass surfaces for the two detail pages. Photographs stay unframed. */
.subpage {
  --glass-line: rgba(212, 235, 225, .17);
  --glass-fill: rgba(24, 39, 43, .82);
}

.subpage main {
  background: linear-gradient(135deg, #14272b, #0b151c 45%, #132326);
}

.subpage .page-top {
  background: rgba(19, 33, 38, .62);
  border-bottom: 1px solid var(--glass-line);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .025);
}

.subpage .page-top h1 {
  text-shadow: 0 8px 35px rgba(0, 0, 0, .22);
}

.subpage .personal-details,
.subpage .projects-collections,
.subpage .spec-group,
.subpage .keyboard-details > div,
.subpage .setup-aside {
  background: linear-gradient(135deg, rgba(255, 255, 255, .035), transparent 65%), var(--glass-fill);
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  box-shadow: 0 16px 45px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .065);
}

@supports ((backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px))) {
  .subpage { --glass-fill: rgba(24, 39, 43, .48); }
  .subpage .page-top,
  .subpage .personal-details,
  .subpage .projects-collections,
  .subpage .spec-group,
  .subpage .keyboard-details > div,
  .subpage .setup-aside {
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    backdrop-filter: blur(18px) saturate(125%);
  }
}

.subpage .projects-collections {
  margin-top: 24px;
  padding: 22px 28px;
}

.subpage .personal-details {
  padding: 26px;
  height: 100%;
}

.subpage .personal-specs dt {
  color: #a3bbb3;
}

.subpage .projects-count {
  color: #afc4bd;
}

.subpage .setup-aside {
  padding: 26px;
  top: 112px;
}

.subpage .setup-aside h2 {
  font-size: 1.35rem;
}

.subpage .spec-group {
  padding: 0 24px;
}

.subpage .spec-group + .spec-group {
  margin-top: 12px;
}

.subpage .spec-group summary {
  padding: 22px 0;
  font-size: 1.1rem;
}

.subpage .spec-group li {
  border-top-color: rgba(204, 229, 218, .1);
  color: #d0dcd5;
}

.subpage .keyboard-details {
  gap: 28px;
  align-items: start;
}

.subpage .keyboard-details > div {
  padding: 28px;
}

.subpage .keyboard-specs > div:last-child {
  border-bottom: 0;
}

.subpage .typing-sample video,
.subpage .personal-video video {
  border-radius: 8px;
}

.subpage .section-heading h2 {
  font-size: clamp(2.8rem, 4.8vw, 4.8rem);
}

.subpage .spec-group summary:hover,
.subpage .projects-collections a:hover {
  color: var(--accent);
}

@media (max-width: 700px) {
  .subpage .personal-details,
  .subpage .setup-aside,
  .subpage .keyboard-details > div { padding: 22px; }
  .subpage .projects-collections { padding: 20px; }
  .subpage .spec-group { padding: 0 20px; }
  .subpage .spec-group summary { font-size: 1rem; }
  .subpage .keyboard-details { gap: 22px; }
}