/* =====================================================================
   70 · ABOUT  —  intro, portrait, education, skills, languages
   Sizes: --about-title, --about-text-fs, --cv-fs in 00-settings.css
   LANDSCAPE (desktop, wide, iPad landscape): three columns on top, CV strip below.
   The page grows and scrolls when the screen is too short, nothing overlaps.
   PORTRAIT and PHONE LANDSCAPE: one flow, the page scrolls.
   ===================================================================== */

.about { min-height: 100%; padding: calc(var(--top) + 3vh) var(--gutter) max(3vh, env(safe-area-inset-bottom, 0px)); display: grid; grid-template-rows: auto auto auto; align-content: space-between; row-gap: 3vh; }
.about > .legal { padding-top: 1vh; }
.about__a { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2vw; align-items: start; }
.about__head { grid-column: 1 / 5; display: flex; flex-direction: column; gap: 5vh; min-height: 100%; justify-content: space-between; }
.about__title { font-size: var(--about-title); }
.about__id { position: relative; font-size: 13px; line-height: 1.5; }
.about__id b { display: block; font-family: var(--display); font-weight: 700; font-size: 14px; text-transform: uppercase; margin-bottom: 2px; }
.about__id a { text-decoration: none; }
.about__id a:hover { text-decoration: underline; text-underline-offset: .2em; }
.about__scribble { position: absolute; left: 230px; bottom: 2px; width: 110px; transform: rotate(-6deg); }
.about__text { grid-column: 5 / 9; padding-top: .35em; }
.about__text p { font-size: var(--about-text-fs); line-height: 1.5; margin-bottom: .8em; }
.about__photo { grid-column: 9 / 13; margin: 0; display: flex; justify-content: flex-end; }
.about__ph { position: relative; width: 100%; aspect-ratio: 6 / 5; }
.about__ph img.portrait { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; filter: grayscale(1); display: block; }
.about__sig { position: absolute; left: 4%; bottom: 3%; width: 56%; pointer-events: none; }

/* Education, skills, languages */
.cv { border-top: 1px solid rgba(255,255,255,.3); padding-top: 2.2vh; display: grid; grid-template-columns: 1.25fr 1fr 1fr .9fr 1fr 1.1fr; column-gap: 2vw; align-items: start; }
.cv__title, .skills h3 { font-family: var(--display); font-weight: 700; font-size: clamp(16px, 1.45vw, 21px); letter-spacing: -0.03em; text-transform: uppercase; line-height: 1; margin: 0 0 .8em; }
.cv__title .indent { display: block; padding-left: 1.4em; }
.timeline { padding-left: 20px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1px; background: rgba(255,255,255,.35); }
.timeline li { position: relative; margin: 0 0 9px; font-size: var(--cv-fs); line-height: 1.3; }
.timeline li::before { content: ""; position: absolute; left: -20px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); }
.timeline .y { display: block; color: var(--muted); }
.cv__photo { display: none; }
.skills { display: contents; }
.sk { min-width: 0; }
.sk--tools { grid-column: span 2; }
.sk__cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2vw; }
.skills ul { font-size: var(--cv-fs); line-height: 1.4; }
.skills ul ul { padding-left: 1em; }
.interests { position: relative; }
.interests img { position: absolute; right: 0; top: 0; width: 40px; }
.langs { display: grid; gap: 7px; margin-top: 2px; }
.langs li { display: grid; grid-template-columns: 78px 1fr; align-items: center; gap: 8px; font-size: var(--cv-fs); }
.langs .bar { position: relative; height: 12px; border-radius: 999px; background: #2a2a2a; }
.langs .bar::after { content: ""; position: absolute; top: 1px; left: calc(var(--v) - 10px); width: 10px; height: 10px; border-radius: 50%; background: var(--blue); }

/* ---------- Tablet landscape: slightly tighter columns ---------- */
@media (orientation: landscape) and (min-height: 501px) and (max-width: 1200px) {
  .about__head { grid-column: 1 / 5; }
  .about__text { grid-column: 5 / 9; }
  .about__photo { grid-column: 9 / 13; }
  .about__scribble { left: auto; right: 0; width: 90px; }
  .cv { grid-template-columns: 1.3fr 1fr 1fr .9fr 1fr 1.1fr; column-gap: 16px; }
  .sk__cols { column-gap: 16px; }
}

/* ---------- PORTRAIT and PHONE LANDSCAPE: one flow ---------- */
@media (orientation: portrait), (max-height: 500px) {
  .about { display: block; padding-top: calc(var(--top) + 16px); padding-bottom: max(44px, env(safe-area-inset-bottom, 0px)); }
  .about__a { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .about > .legal { margin-top: 34px; }
  .about__head, .about__text, .about__photo { grid-column: 1; min-height: 0; }
  .about__head { gap: 22px; }
  .about__scribble { left: auto; right: 0; bottom: auto; top: -52px; width: 96px; }
  .about__photo { justify-content: flex-start; }
  .about__ph { width: 100%; max-width: 560px; }
  /* CV: sections in a two column grid, each with a hairline above it */
  .cv { margin-top: 40px; border-top: 0; padding-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; column-gap: 20px; }
  .cv > div:not(.skills), .sk { border-top: 1px solid rgba(255,255,255,.28); padding-top: 16px; }
  .cv > div:not(.skills) { grid-column: 1 / -1; }
  .sk--tools, .sk--lang { grid-column: 1 / -1; }
  .sk__cols { column-gap: 20px; }
  .cv__title, .skills h3 { font-size: 18px; margin-bottom: .7em; }
  .cv__title .indent { display: inline; padding-left: .3em; }
  .interests img { display: none; }
}
/* Tablet portrait: text left, photo right, CV in three columns */
@media (orientation: portrait) and (min-width: 601px) {
  .about__a { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); column-gap: 28px; grid-auto-flow: row; }
  .about__head { grid-column: 1; grid-row: 1; }
  .about__text { grid-column: 1; grid-row: 2; }
  .about__photo { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  .about__ph { aspect-ratio: 4 / 5; }
  .cv { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cv > div:not(.skills) { grid-column: span 2; }
  .sk--tools { grid-column: span 2; }
  .sk--soft, .interests { grid-column: span 1; }
  .sk--lang { grid-column: span 2; }
}
/* Phone landscape: text and photo side by side, CV in three columns */
@media (orientation: landscape) and (max-height: 500px) {
  .about__a { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); column-gap: 28px; }
  .about__head { grid-column: 1; grid-row: 1; }
  .about__text { grid-column: 1; grid-row: 2; }
  .about__photo { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  .about__ph { aspect-ratio: 4 / 5; }
  .cv { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cv > div:not(.skills) { grid-column: span 2; }
  .sk--tools { grid-column: span 2; }
  .sk--soft, .interests { grid-column: span 1; }
  .sk--lang { grid-column: span 2; }
}