/* AZ prototype · Practice Areas index.
   Hero (14 Okt, exploration A "Nine slivers", Figma 1305:56): light intro + the nine practice photos as slivers cut at the
   logo angle (0.5px across per 1px down). The one supergraphic moment on this page; the ledger below stays rectangular. */
/* intro, refined 14 Okt (Figma 1336:5187): the About statement layout (rubric + 48px headline at 17%), lede below */
.pa-hero{max-width:1440px;margin:0 auto;padding:120px var(--pg) 104px;color:var(--ink)}
.pa-rubric{display:flex;align-items:center;gap:10px;margin:0 0 28px 17%;font-size:13px;font-weight:500;line-height:19.5px;color:var(--ink)}
.pa-copy{margin-left:17%;max-width:900px}
.pa-h1{margin:0;font-family:var(--serif);font-weight:350;font-size:48px;line-height:55.68px;letter-spacing:-.576px;color:var(--ink);text-wrap:balance}
.pa-lede{margin:24px 0 0;font-size:18px;line-height:27.9px;color:var(--muted)}
@media (min-width:1024px){.pa-lede{min-height:113.2px}}  /* the Figma lede box (1336:22284) is 111.56 tall: keeps the intro at 520 */

/* one photo grows out of the AZ parallelogram into a full-width rectangle as it travels up (About's mechanism):
   --p 0..1 set by practice-areas.js; inset + slant shrink to zero */
.pa-grow{--p:0;--in:calc((1 - var(--p)) * 9vw);--sl:calc((1 - var(--p)) * 12vw);padding-bottom:0}
.pa-grow-fig{margin:0}
.pa-grow-clip{height:min(78vh,820px);overflow:hidden;background:#141414;clip-path:polygon(calc(var(--in) + var(--sl)) 0,calc(100% - var(--in)) 0,calc(100% - var(--in) - var(--sl)) 100%,var(--in) 100%)}
.pa-grow-clip img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.12 - var(--p) * .12));transform-origin:50% 60%}

/* forum links share one baseline per row, whatever the title length (Figma 750:3445) */
.fcell-links{margin-top:auto;padding-top:20px}
.fcell{padding-right:16px}

/* focus ring follows the hover fill (which bleeds 24px past the row) so it never cuts the arrow */
.prow:focus-visible{outline:none}
.prow:focus-visible::before{outline:2px solid var(--maroon);outline-offset:-2px}

@media (max-width:1023px){.pa-br{display:none}.pa-rubric,.pa-copy{margin-left:0}.pa-h1{font-size:40px;line-height:1.16}}  /* = About statement */
@media (max-width:767px){
  .pa-hero{padding-top:64px;padding-bottom:64px}
  .pa-rubric{margin-bottom:20px}
  .pa-h1{font-size:30px;line-height:1.2}
  .pa-lede{font-size:16px;line-height:1.55}
  .pa-grow{--in:calc((1 - var(--p)) * 24px);--sl:calc((1 - var(--p)) * 64px)}
  .pa-grow-clip{height:min(62vh,520px)}
  .pa-grow-clip img{object-position:64% 50%}  /* keep the walking figure in frame */
  .fcell-links{padding-top:6px}
}
@media (prefers-reduced-motion:reduce){.pa-grow{--p:1 !important}}