/* ============================================================
   pages.css — page layouts: stage, detail, about, responsive
   ============================================================ */
.main { position: relative; z-index: 1; }
.page { will-change: opacity; }

/* ---------- Detail ---------- */
.detail { padding: var(--s-7) var(--gutter) 0; }
.detail__head {
  display: grid;
  grid-template-columns: minmax(200px, 3fr) 9fr;
  gap: var(--s-8) var(--s-7);
  align-items: stretch;
}
.detail__aside {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.detail__back { align-self: flex-start; margin-bottom: clamp(48px, 12vh, 110px); }
.detail__title { font-size: var(--t-6); font-weight: 400; letter-spacing: -0.02em; line-height: 1.02; }
.detail__aside .btn { align-self: flex-start; margin-top: auto; }
.detail__cta { margin-top: auto; padding-top: var(--s-7); }
.detail__hero {
  position: relative;
  min-width: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #f2f2f2;
  box-shadow: var(--card-shadow);
  align-self: start;
}
.detail__hero img { width: 100%; height: 100%; object-fit: cover; }
/* light gray inner border, drawn above the image */
.detail__hero::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--hairline);
  pointer-events: none;
}

.detail__body { margin-top: var(--s-8); }
.detail__section + .detail__section { margin-top: var(--s-6); }
.detail__section h2 { font-size: var(--t-1); font-weight: 700; margin-bottom: var(--s-1); }
.detail__section h3 { font-size: var(--t-1); font-weight: 700; margin-top: var(--s-5); margin-bottom: var(--s-1); }
.detail__section p + p { margin-top: var(--s-4); }
.detail__section ul { margin: var(--s-3) 0 var(--s-4); }
.detail__section li + li { margin-top: var(--s-1); }

@media (max-width: 960px) {
  .detail__head { grid-template-columns: minmax(180px, 4fr) 8fr; }
}
@media (max-width: 720px) {
  .detail { padding-top: var(--s-5); }
  .detail__head { grid-template-columns: 1fr; gap: var(--s-6); }
  .detail__back { margin-bottom: var(--s-6); }
  .detail__cta { padding-top: var(--s-5); }
  .detail__body { margin-top: var(--s-7); }
}

/* ---------- About ---------- */
.about {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 var(--s-5);
  padding: 0 var(--gutter) var(--s-8);
  min-height: calc(100dvh - var(--nav-h));
}
.about__photo {
  grid-column: 1 / 6;
  align-self: start;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 2 / 3;
  max-height: calc(100dvh - var(--nav-h) - var(--s-8));
  background: #f2f2f2;
}
.about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.about__text {
  grid-column: 6 / 13;
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--nav-h) - var(--s-8));
}
.about__title { font-size: var(--t-8); font-weight: 500; letter-spacing: -0.025em; line-height: 0.95; margin-top: -0.06em; }
.about__body { margin-top: var(--s-5); }
.about__body p + p { margin-top: var(--s-4); }
.about__contact {
  margin-top: auto;
  padding-top: var(--s-9);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
}
.about__contact h2 { font-size: var(--t-1); font-weight: 700; margin-bottom: var(--s-2); }
.about__contact a:not(.btn) { display: block; color: var(--black); margin-top: var(--s-1); }
.about__contact a:not(.btn):hover { text-decoration: underline; text-underline-offset: 0.15em; }

@media (max-width: 860px) {
  .about { display: block; }
  .about__photo { max-height: none; width: min(100%, 420px); aspect-ratio: 4 / 5; margin-bottom: var(--s-6); }
  .about__photo img { object-position: 50% 15%; }
  .about__text { min-height: 0; }
  .about__contact { padding-top: var(--s-7); }
}