/* The About page (/about, Phase 5, November 1): the door pages' light world (door.css), loaded after it.
   "Hi, I'm Aylam." with his intro video, "How I coach", "Why a broken bowl?" beside his photo, "More about me" beside his family
   photo (November 2, Placement B then Sketch C), then the obsidian close. */

/* ------------------------------------------------------------------ "Hi, I'm Aylam.": the headline, then the video (7) beside the text (5) */
.hi { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "title title" "film text"; gap: 0 6vw;
  align-items: start; padding: clamp(28px, 5vh, 56px) var(--pad-x) 14vh; }
.hi__title { grid-area: title; margin-bottom: clamp(26px, 4vh, 44px); font-weight: 500; font-size: clamp(42px, 3.8vw, 56px); line-height: 1.05;
  letter-spacing: -.028em; text-wrap: balance; }
.hi .film { grid-area: film; }
.hi__text { grid-area: text; }
.hi__text p, .bowl__text p, .coach__text p, .life__text p { font-size: 19px; line-height: 1.55; color: var(--graphite); max-width: 34em; text-wrap: pretty; }
.hi__text p + p, .bowl__text p + p, .coach__text p + p, .life__text p + p { margin-top: 14px; }
/* the invitation that ends each section: Ink, the reader's cue that the paragraph is addressed to them */
.hi__text p:last-child, .bowl__text p:last-child { color: var(--ink); }

/* the video on plaster: a flat 16:9 rectangle with a hairline, the homepage's Play pill over the poster */
.film { margin: 0; min-width: 0; }
.film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--ink); border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(17,20,17,.09); }
.film__frame { position: relative; }
.film__play { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 16px;
  border-radius: 999px; background: var(--ink); border: 1px solid rgba(247,243,234,.18); color: var(--white); font: 500 15px/1 var(--font); cursor: pointer;
  transition: border-color 160ms ease; }
.film__play[hidden] { display: none; }
.film__play svg { width: 12px; height: 12px; fill: currentColor; }
@media (hover: hover) and (pointer: fine) { .film__play:hover { border-color: rgba(247,243,234,.5); } }
.film__play:focus-visible { outline: 2px solid var(--slate); outline-offset: 3px; }
.film figcaption { margin-top: 14px; font-size: 16px; color: var(--charcoal-soft); }
.film figcaption b { font-weight: 500; color: var(--ink); }

/* ------------------------------------------------------------------ "How I coach" (Sketch C, November 2): across the page, the title above;
   the gym line as the lead (Title, Ink; one step below the section title, Brand Design Director M1), then the text (7) beside his practices (5) as a hairline list */
.coach { margin: 0 var(--pad-x); padding: 12vh 0 14vh; border-top: 1px solid rgba(17,20,17,.1); }
.coach__lead { max-width: 22em; margin-bottom: clamp(36px, 7vh, 64px); font-size: clamp(23px, 1.95vw, 28px); font-weight: 400; line-height: 1.3;
  letter-spacing: -.016em; color: var(--ink); text-wrap: balance; }
.coach__cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 6vw; align-items: start; }
.coach__reps-intro { font-size: 19px; line-height: 1.55; color: var(--graphite); margin-bottom: 18px; text-wrap: balance; }
/* the practices in his order: identify, explore, experiment, build (the numbers carry that sequence) */
.coach__reps ol { list-style: none; margin: 0; padding: 0; counter-reset: rep; }
.coach__reps li { counter-increment: rep; display: grid; grid-template-columns: 40px minmax(0, 1fr); padding: 16px 0;
  border-top: 1px solid rgba(17,20,17,.14); font-size: 21px; line-height: 1.35; letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; }
.coach__reps li:last-child { border-bottom: 1px solid rgba(17,20,17,.14); }
.coach__reps li::before { content: counter(rep); padding-top: 4px; font-size: 15px; color: var(--charcoal-soft); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ "Why a broken bowl?": his photo (5) beside the story (7) */
.bowl { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 6vw; align-items: start;
  margin: 0 var(--pad-x); padding: 12vh 0 14vh; border-top: 1px solid rgba(17,20,17,.1); }
/* the real bowl stays beside the story while it is read (wide screens) */
.bowl__photo { position: sticky; top: 124px; max-width: 500px; }
.bowl__photo img { width: 100%; border-radius: 6px; box-shadow: 0 0 0 1px rgba(17,20,17,.09); }
/* short wide windows: the photo shrinks to fit under the sticky line, so the bowl is never below the fold while it is stuck
   (Brand Design Director M1, November 1: at 1280x551 the bottom 139px, the bowl, stayed out of view); resized, never cropped */
@media (min-width: 981px) { .bowl__photo img { width: auto; max-width: 100%; max-height: calc(100svh - 148px); } }
.bowl__title, .coach__title, .life__title { margin-bottom: 22px; font-size: clamp(30px, 2.6vw, 40px); font-weight: 500; letter-spacing: -.022em; line-height: 1.12;
  text-wrap: balance; }

/* ------------------------------------------------------------------ "More about me": the text (7) beside the family photo (5) on the right
   (Sketch C, November 2: the page's media alternates), centred on each other; the photo comes first in the markup so phones show it above */
.life { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 6vw; align-items: center;
  margin: 0 var(--pad-x); padding: 12vh 0 14vh; border-top: 1px solid rgba(17,20,17,.1); }
.life__text { grid-column: 1; grid-row: 1; }
.life__photo { grid-column: 2; grid-row: 1; justify-self: end; width: 100%; margin: 0; max-width: 420px; }
.life__photo img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 0 0 1px rgba(17,20,17,.09); }

/* ------------------------------------------------------------------ the close: the door pages' obsidian slab, the call's line beside the gold action */
.aclose__line { font-size: clamp(23px, 1.95vw, 28px); font-weight: 400; line-height: 1.3; letter-spacing: -.016em; color: var(--white); max-width: 26em;
  text-wrap: pretty; }

/* ------------------------------------------------------------------ tablet and phone */
@media (max-width: 980px) {
  .hi { grid-template-columns: 1fr; grid-template-areas: "title" "film" "text"; }
  .hi__text { margin-top: 5vh; }
  .bowl, .coach__cols, .life { grid-template-columns: 1fr; }
  .coach__reps { margin-top: 6vh; }
  .coach__reps li:last-child { border-bottom: 0; } /* the section's own hairline follows (Brand Design Director M2) */
  .life__text, .life__photo { grid-column: 1; grid-row: auto; }
  .life__photo { justify-self: start; max-width: 460px; margin-bottom: 7vh; }
  .bowl__photo { position: static; max-width: 460px; margin-bottom: 7vh; }
}
@media (max-width: 700px) {
  .hi { padding: 30px var(--pad-x) 10vh; }
  .hi__title { font-size: clamp(34px, 10.5vw, 42px); margin-bottom: 26px; }
  .hi__text { margin-top: 36px; }
  .hi__text p, .bowl__text p, .coach__text p, .life__text p, .coach__reps-intro { font-size: 17.5px; }
  .coach__reps li { font-size: 18px; }
  .film__play { left: 12px; bottom: 12px; }
  .film figcaption { font-size: 15px; margin-top: 12px; }
  .bowl, .coach, .life { padding: 9vh 0 10vh; }
  .aclose__line { font-size: 19px; }
}