/* About concept: warm, human, still Graphite Field. Media frames are clean rounded panels (no instant-photo props). */
.about { max-width: calc(var(--max) + 2 * var(--margin)); margin: 0 auto; padding: var(--s-8) var(--margin) 0; display: grid; gap: var(--s-8); }
.about-intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); align-items: end; }
.about-intro .kicker { grid-column: 1 / -1; color: var(--ion); }
.about-title { font-family: var(--font-display); font-variation-settings: var(--fvs-display); font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); line-height: 1.1; max-width: 22ch; }
.placeholder-display { font-family: var(--font-mono); font-variation-settings: var(--fvs-mono); color: var(--text-3); font-size: 0.62em; line-height: 1.4; display: block; }
.about-letter { display: grid; gap: var(--s-4); padding-left: var(--s-5); border-left: 1px solid var(--line-strong); }
.about-media { display: grid; grid-template-columns: 4fr 5fr 4fr; gap: var(--gutter); align-items: end; }
.frame { display: grid; gap: var(--s-2); }
.frame-slot {
  position: relative; display: grid; place-items: center; border-radius: var(--radius-2); border: 1px solid var(--line);
  background: radial-gradient(60% 60% at 50% 40%, rgb(125 227 210 / 0.08), transparent 70%), repeating-linear-gradient(135deg, transparent 0 14px, rgb(255 255 255 / 0.025) 14px 15px), var(--g-1);
  box-shadow: var(--shadow-1);
}
.frame-slot .mono { color: var(--text-3); position: absolute; bottom: var(--s-3); left: var(--s-3); right: var(--s-3); text-align: center; }
.frame--tall .frame-slot { aspect-ratio: 4 / 5; }
.frame--video .frame-slot { aspect-ratio: 9 / 13; }
.frame--wide .frame-slot { aspect-ratio: 3 / 2; }
.play { width: 64px; height: 64px; border-radius: 50%; background: rgb(125 227 210 / 0.15); border: 1px solid var(--ion); box-shadow: var(--glow-ion); position: relative; }
.play::after { content: ""; position: absolute; left: 26px; top: 20px; border-left: 18px solid var(--ion); border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.about-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.about-col { display: grid; gap: var(--s-3); align-content: start; padding-top: var(--s-4); border-top: 1px solid var(--line); }
.block-label { color: var(--ion); }
.principles { display: grid; gap: var(--s-2); }
.interests { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.interests li { padding: var(--s-1) var(--s-3); border: 1px solid var(--line-strong); border-radius: 999px; }
.about-links p { display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: center; }
@media (max-width: 860px) {
  .about-intro, .about-grid, .about-media { grid-template-columns: 1fr; }
  .frame--video { order: -1; }
}

/* contact row (same as the portfolio pages) */
.foot-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; margin: 0; }
.foot-contact a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); }
.pdf-soon { color: var(--text-2); }

/* Dreamy Night grade (background only; About has no field canvas): a soft violet and rose haze behind the content */
body.about-page::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 45% at 75% 8%, rgb(118 40 140 / 0.10), transparent 70%),
              radial-gradient(60% 40% at 10% 85%, rgb(200 40 94 / 0.06), transparent 72%),
              radial-gradient(50% 40% at 30% 30%, rgb(67 99 138 / 0.06), transparent 70%); }
@media print { body.about-page::after { display: none; } }

/* About photo (the user's own, supplied locally from the media folder; hidden if it is not there) */
.about-intro { grid-template-areas: "kicker kicker" "title photo" "letter photo"; align-items: start; row-gap: var(--s-5); }
.about-intro .kicker { grid-area: kicker; }
.about-title { grid-area: title; align-self: end; }
.about-letter { grid-area: letter; }
.about-photo { grid-area: photo; margin: 0; justify-self: end; width: 100%; max-width: 380px; }
.about-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-2); border: 1px solid var(--line-strong); box-shadow: 0 24px 48px rgb(0 0 0 / 0.5); }
@media (max-width: 860px) {
  .about-intro { grid-template-areas: "kicker" "title" "photo" "letter"; }
  .about-photo { justify-self: start; max-width: 300px; }
}