/* The three case studies (work/self-driving-car, work/murata-traffic, work/umw-platform) on the section grammar
   (14 Oct 2026). Loaded after cs-template.css and customers.css, which other pages share, so every rule here is scoped
   to main.pg-case. Each page keeps its division on <main> (car kinetik, Murata harmonik, UMW heuristik).
   Order: the hero (paper, the lead picture beside the title); the story as one white reading card in an oat tray, with
   the side menu beside it; the impact as a chapter whose tray takes the division tint (white cards and a picture, never
   text on the tint); the car's press coverage as linked cards; "More of our work" as linked cards. No hairlines. */

/* chapter titles, as Work */
main.pg-case .chap-head h2{font:600 56px/1.04 var(--sans);letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
main.pg-case .chap-head p{text-wrap:pretty}
main.pg-case section[id]{scroll-margin-top:110px}

/* hero: the figures stand on their own, no rule above them */
main.pg-case .cs-hero{padding:152px 0 56px}
main.pg-case .cs-stats{border-top:0;padding-top:0;margin-top:36px}
main.pg-case .cs-hero .img{border-radius:20px}

/* the story: side menu + one white reading card, in an oat tray */
main.pg-case .cs-story{padding-top:0}
main.pg-case .cs-tray{padding:24px}
main.pg-case .cs-cols{grid-template-columns:208px minmax(0,1fr);gap:24px}
main.pg-case .cs-side{top:112px}
main.pg-case .cs-side .b{background:#fff;border:0;border-radius:20px;box-shadow:inset 0 0 0 1px var(--line);padding:12px 18px}
main.pg-case .cs-paper{background:#fff;border-radius:20px;box-shadow:inset 0 0 0 1px var(--line);padding:56px clamp(32px,5vw,72px) 40px}
main.pg-case .cs-paper section:last-child{padding-bottom:16px}
main.pg-case .facts{background:var(--oat);box-shadow:none;border:0;border-radius:20px}
/* photos sit straight in the column; the drawn diagrams keep their tinted panel */
main.pg-case .cs-body figure:not(:has(>.dg)):not(.dgm){border:0;padding:0;border-radius:0}
main.pg-case .cs-body figure:not(:has(>.dg)) .ph{border-radius:16px}
main.pg-case .cs-body figure:has(>.dg){border-radius:20px}
main.pg-case .pics .ph{border-radius:16px}
/* quotes: an oat block, no side bar */
main.pg-case .cs-body blockquote{border-left:0;background:var(--oat);border-radius:16px;padding:22px 26px}

/* the impact: cards and a picture in the division's tray */
main.pg-case .cs-impact .chap-head p{max-width:700px}
main.pg-case .cs-ilist{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
main.pg-case .cs-ilist .card{gap:12px}
main.pg-case .cs-ilist .card p{font:400 16px/24px var(--sans);color:var(--ink)}
main.pg-case .cs-ilist .card b{font:500 16px/24px var(--mono);font-variant-numeric:tabular-nums;color:var(--t-ink)}
main.pg-case .cs-iwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch}
main.pg-case .cs-iwrap>.ph{aspect-ratio:4/3;border-radius:20px;width:100%}
main.pg-case .cs-itext{justify-content:center;gap:16px;padding:36px}
main.pg-case .cs-itext p{font:400 18px/28px var(--sans);color:var(--ink)}

/* in the press: one linked card per piece of coverage */
main.pg-case .cs-press{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
main.pg-case .cs-press li{display:flex}
main.pg-case .cs-press .card{flex:1;gap:14px;padding:20px}
main.pg-case .cs-press .tt{font:500 16.5px/1.35 var(--sans);letter-spacing:-.2px;color:var(--ink);text-wrap:pretty}
main.pg-case .cs-press .code{text-transform:none;letter-spacing:0;font:500 13px/1.3 var(--sans);color:var(--t-ink)}

/* more of our work: the other two cases as linked cards, each in its own division */
main.pg-case .cs-mgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
main.pg-case .cs-mc{padding:28px;gap:0;min-height:300px}
main.pg-case .cs-mc .who{font:600 14px/20px var(--sans);color:var(--t-ink)}
main.pg-case .cs-mc .tt{margin-top:8px;font:600 24px/30px var(--sans);letter-spacing:-.48px}
main.pg-case .cs-mc p{margin-top:10px;font:400 16px/24px var(--sans);color:var(--muted)}
main.pg-case .cs-mc .stat{margin-top:auto;padding-top:24px}
main.pg-case .cs-mc .stat b{display:block;font:600 40px/1.05 var(--sans);letter-spacing:-1.2px;font-variant-numeric:tabular-nums;color:var(--ink)}
main.pg-case .cs-mc .stat span{display:block;margin-top:6px;font:400 14px/20px var(--sans);color:var(--muted)}
main.pg-case .cs-mc .card-foot{padding-top:24px}
main.pg-case .cs-mc .code{color:var(--t-ink)}
main.pg-case .cs-mc>p+.card-foot{margin-top:auto}

@media (max-width:1100px){
  main.pg-case .cs-press{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  main.pg-case .cs-hero{padding:124px 0 40px}
  main.pg-case .chap-head h2{font-size:38px;line-height:1.08}
  main.pg-case .cs-cols{grid-template-columns:minmax(0,1fr)}
  main.pg-case .cs-ilist,main.pg-case .cs-iwrap,main.pg-case .cs-mgrid{grid-template-columns:minmax(0,1fr)}
  main.pg-case .cs-press{grid-template-columns:repeat(2,minmax(0,1fr))}
  main.pg-case .cs-mc{min-height:0}
}
@media (max-width:760px){
  main.pg-case .cs-story .container.pad{padding-inline:12px}
  main.pg-case .cs-tray{padding:8px;border-radius:28px}
  main.pg-case .cs-paper{padding:32px 20px 20px;border-radius:22px}
  main.pg-case .cs-body blockquote{padding:18px 20px}
  main.pg-case .cs-itext{padding:24px 20px}
  main.pg-case .cs-itext p{font-size:16px;line-height:25px}
  main.pg-case .cs-press{grid-template-columns:minmax(0,1fr);gap:8px}
  main.pg-case .cs-press .card{padding:16px 18px}
  main.pg-case .cs-mc{padding:22px}
  main.pg-case .cs-mc .tt{font-size:22px;line-height:28px}
  main.pg-case .cs-mc .stat b{font-size:34px}
}
/* the press tray: a picture of the papers beside the cards */
main.pg-case .cs-ptray{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:16px;align-items:start}
main.pg-case .cs-ptray>.ph{aspect-ratio:3/4;border-radius:20px;width:100%;position:sticky;top:110px}
main.pg-case .cs-ptray .cs-press{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){main.pg-case .cs-ptray .cs-press{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  main.pg-case .cs-ptray{grid-template-columns:minmax(0,1fr)}
  main.pg-case .cs-ptray>.ph{position:relative;top:auto;aspect-ratio:4/3}
  main.pg-case .cs-ptray .cs-press{grid-template-columns:minmax(0,1fr)}
}
/* phones (owner, 14 Oct: "fix the phone gaps too"): the car's coverage sits two to a row and shows its first six, with
   a real button for the rest (the page script adds .is-short and the button; without it everything shows) */
main.pg-case .cs-pmore{display:none}
@media (max-width:760px){
  main.pg-case .cs-ptray .cs-press{grid-template-columns:repeat(2,minmax(0,1fr))}
  main.pg-case .cs-press .card{padding:14px 12px;gap:10px}
  main.pg-case .cs-press .tt{font-size:15px;line-height:1.3;overflow-wrap:break-word}
  main.pg-case .cs-press .card-foot{flex-wrap:wrap;gap:8px;justify-content:flex-end}
  main.pg-case .cs-press .card-foot .code{flex:1 1 100%;font-size:12px}
  main.pg-case .cs-press.is-short>li:nth-child(n+7){display:none}
  main.pg-case .cs-pmore{display:flex;justify-self:center;margin:4px auto 0}
}