/* Home, "Intelligence in practice": one case study as a photograph (client 17 Oct, approved: "better, commit to home"; from
   explore/practice-study-1, practice.css, whose notes.txt has a reference's notes and the reasoning). The rules below are the study's,
   unchanged, loaded as they were there: after v6's site.css and the v5 type and spacing layers. The type is v6's own: the heading .h2,
   the line .lede, the card's name in the h2 role, its scope in the small role. The photograph is assets/img/p_case_commute.webp
   (and _1024): a commuter carriage at rush hour, passengers on their phones, the carriage streaked with motion; the case study's
   lead uses the same photograph (assets/css/studies/cs-article.css). The illustrative application card and the green glows
   (.prac-ground) are gone from home; their old rules in site.css stay for the Inference Engine's "Models on Atlas", which reuses .prac. */

/* the ground: the page's plain black; the painted glow (.prac-ground) is gone */
.ps1{background:var(--bg)}

/* the one card, and the whole card is the link (client r15: "cover should be fully clickable with bigger name visible").
   v6's card opened only from its text band: the title link's ::after overlay is contained by .cs-card-in, which is itself absolutely
   positioned, so it never covered the picture. Here the card element is the <a>; the arrow is drawn inside it, not a second link. */
.ps1 .ps-card{display:block;flex:none;width:100%;min-height:0;aspect-ratio:2 / 1;border-radius:18px;color:#fff;cursor:pointer}
/* the photograph was composed for the white name (client r16: "text on top should be white not black", "design image accordingly";
   r17: "retry like a reference case studies"): seen from a balcony, the agency floor's dark carpet fills the band where the name and scope
   sit at both crops; the desks and the account manager are below it */
.ps1 .ps-card>img{object-position:50% 30%;transform:scale(1.06);transition:transform var(--t3) var(--ease)}
.ps1 .ps-card.lit>img{transform:none}
html:not(.js) .ps1 .ps-card>img{transform:none}
/* only a light, natural darkening at the top, for the odd leaf glint behind a letter (at most 22 %, gone by 42 % down) */
.ps1 .ps-card::after{display:block;background:linear-gradient(180deg,rgba(10,10,10,.22) 0,rgba(10,10,10,.1) 22%,rgba(10,10,10,0) 42%)}
/* the name, bigger: v6's h2 role (52 / 34 on the phone), the same words, white; its scope in v6's small role under it, white.
   White measured on the photograph behind it (contrast with white, mean / 90th-percentile brightness), before the light darkening:
   1440 name 8.2 / 6.0 : 1, scope 7.4 / 5.5 : 1; 390 name 9.9 / 8.6 : 1, scope 10.0 / 8.9 : 1 */
.ps1 .ps-card .cs-card-in{top:0;bottom:auto;right:auto;padding:40px 44px 0;align-items:flex-start;text-align:left}
.ps1 .ps-card .ps-card-h{max-width:16em;color:#fff}   /* two lines at 1440 */
.ps1 .ps-card .cs-card-p{margin-top:16px;color:rgba(255,255,255,.88)}
/* the arrow: v6's white button, top-right */
.ps1 .ps-card .cs-go{position:absolute;top:32px;right:32px;margin:0;width:46px;padding:0}
.ps1 .ps-card .cs-go svg{transition:transform var(--t1) var(--ease)}
/* hover and keyboard focus: the name underlines (v6's own hover for this title, 2 px at this size), the picture leans in, the arrow
   steps forward; focus also draws v6's white ring round the card */
.ps1 .ps-card .ps-card-h{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em;text-decoration-color:transparent;transition:text-decoration-color var(--t1) var(--ease)}
.ps1 .ps-card:hover .ps-card-h,.ps1 .ps-card:focus-visible .ps-card-h{text-decoration-color:#fff}
.ps1 .ps-card.lit:hover>img,.ps1 .ps-card.lit:focus-visible>img{transform:scale(1.03)}
.ps1 .ps-card:hover .cs-go,.ps1 .ps-card:focus-visible .cs-go{background:#e9eae6}
.ps1 .ps-card:hover .cs-go svg,.ps1 .ps-card:focus-visible .cs-go svg{transform:translateX(3px)}
.ps1 .ps-card:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:18px}

@media (max-width:760px){
  .ps1>.wrap.ps-wrap{padding:0 var(--m)}
  /* the phone: an upright card. The photograph is set 120 % of the card's height from its top, so the carpet holds the name and
     she stands below it (head from about 230 px down, the name ends near 205), on the right; the scope keeps to the left of her (148 px wide) */
  .ps1 .ps-card{aspect-ratio:2 / 3}
  .ps1 .ps-card>img{bottom:auto;height:120%;object-position:50% 0}
  .ps1 .ps-card .cs-card-in{padding:24px 22px 0}
  .ps1 .ps-card .ps-card-h{max-width:none}
  .ps1 .ps-card .cs-card-p{max-width:148px}
  .ps1 .ps-card .cs-go{top:20px;right:20px}
}

/* zip 17 Oct: the section's heading and line centred; the card's name smaller, as on the reference's case-study cards */
.ps1 .wrap > h2:first-child,.ps1 .ps-head,.ps1 .prac-head{text-align:center;margin-inline:auto}
.ps1 .ps-card .ps-card-h{font-size:clamp(24px,2.1vw,32px);line-height:1.15;letter-spacing:-.015em;max-width:18em}
@media (max-width:760px){.ps1 .ps-card .ps-card-h{font-size:22px}}
.ps1 .sec-head{display:flex!important;flex-direction:column;align-items:center;text-align:center}
.ps1 .sec-head .h2,.ps1 .sec-head .lede{grid-column:auto!important;margin-inline:auto;max-width:34em}
.ps1 .ps-card .cs-card-in{padding-right:96px}
@media (max-width:760px){.ps1 .ps-card .cs-card-in{padding-right:72px}}