/* Press on the section grammar (14 Oct 2026). Company page, so orange and oat; a story about one part of REKA wears
   that part's tone on its card (CRETA and autonomy kinetik, Murata and StartIoT sensing harmonik, the rest REKA orange).
   Scoped to main.pg-press; overrides the pr-* and post-list rules in company.css without editing it. */

/* one measure with Home and About */
main.pg-press .pr-head .cw{max-width:1280px}
main.pg-press .pr-head{padding-bottom:80px}

/* chapter titles, as About */
main.pg-press .chap-head h2{font:600 56px/1.04 var(--sans);letter-spacing:-.035em;color:var(--ink);text-align:center;text-wrap:balance}
main.pg-press .pr-wild{padding:16px 0 0;border-top:0}

/* REKA in the wild: two features with their pictures, then every other piece as a card */
main.pg-press .prx-feat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
main.pg-press .prx-feat .frame{margin:-12px -12px 12px}
main.pg-press .prx-feat .ph{aspect-ratio:16/9;width:100%}
main.pg-press .prx-feat .meta{font-size:14px;line-height:21px}
main.pg-press .prx-feat .tt{font-size:22px;line-height:1.25}
main.pg-press .card-foot:not(:has(.code)){justify-content:flex-end}
main.pg-press .prx-cov{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
main.pg-press .prx-cov li{display:flex}
main.pg-press .prx-cov .card{flex:1;min-height:168px;padding:20px}
main.pg-press .prx-cov .tt{font-size:16px;line-height:1.35;letter-spacing:-.2px}
main.pg-press .prx-cov .card-foot{padding-top:14px}
main.pg-press .prx-cov .src{display:flex;align-items:center;gap:8px;min-width:0;line-height:1.35}
main.pg-press .prx-cov .src::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--t)}
/* nineteen pieces: the one left over on a row takes the whole row rather than standing alone */
main.pg-press .prx-cov li:last-child:nth-child(4n+1){grid-column:1/-1}
main.pg-press .prx-cov li:last-child:nth-child(4n+1) .card{min-height:0}

/* the boilerplate: REKA's own tray, the words beside the three dates */
main.pg-press .prx-about .tray{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px 56px;align-items:start}
main.pg-press .prx-about h2{font:600 40px/1.08 var(--sans);letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
main.pg-press .prx-about .lead{margin-top:20px;font-size:17px;line-height:26px;color:var(--ink)}
main.pg-press .prx-about .btn{margin-top:24px}
main.pg-press .prx-tl{list-style:none;margin:0;padding:0;display:grid;gap:12px}
main.pg-press .prx-tl .card{display:grid;grid-template-columns:76px minmax(0,1fr);gap:16px;padding:20px 24px}
main.pg-press .prx-tl b{font:600 18px/26px var(--mono);color:var(--t-ink)}
main.pg-press .prx-tl p{font-size:15.5px;line-height:24px;color:var(--ink)}
main.pg-press .prx-tl p+p{margin-top:6px}

/* for journalists: two cards, each with its one action */
main.pg-press .prx-kit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
main.pg-press .prx-kit .card{padding:32px;gap:10px}
main.pg-press .prx-kit .tt{font-size:28px;line-height:1.15;letter-spacing:-.6px}
main.pg-press .prx-kit .card>p{font-size:16px;line-height:24px}
main.pg-press .prx-kit .card-foot{padding-top:18px;justify-content:flex-start}

/* writing about REKA: the page's one ink tray, the press form on white beside the words */
main.pg-press .prx-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:32px 56px;align-items:start}
main.pg-press .prx-ask h2{font:600 44px/1.06 var(--sans);letter-spacing:-.03em;color:#fff}
main.pg-press .prx-ask-t p{margin-top:16px;font-size:18px;line-height:27px;color:rgba(255,255,255,.75);max-width:42ch}
main.pg-press .prx-ask .rkf{background:#fff;border-color:transparent}
main.pg-press .prx-ask .rf-done{padding:32px;border-radius:24px;background:#fff;color:var(--ink)}
main.pg-press .prx-ask .rf-done h3{margin-top:0}

@media (max-width:1180px){
  main.pg-press .prx-cov{grid-template-columns:repeat(3,minmax(0,1fr))}
  main.pg-press .prx-cov li:last-child:nth-child(4n+1){grid-column:auto}
  main.pg-press .prx-cov li:last-child:nth-child(3n+1){grid-column:1/-1}
}
@media (max-width:900px){
  main.pg-press .pr-head{padding-bottom:48px}
  main.pg-press .prx-feat,main.pg-press .prx-kit{grid-template-columns:minmax(0,1fr)}
  main.pg-press .prx-cov{grid-template-columns:repeat(2,minmax(0,1fr))}
  main.pg-press .prx-cov li:last-child:nth-child(3n+1){grid-column:auto}
  main.pg-press .prx-cov li:last-child:nth-child(2n+1){grid-column:1/-1}
  main.pg-press .prx-about .tray,main.pg-press .prx-split{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  main.pg-press .chap-head h2{font-size:38px;line-height:1.08}
  main.pg-press .prx-cov{grid-template-columns:minmax(0,1fr);gap:8px}
  main.pg-press .prx-cov li:last-child{grid-column:auto!important}
  main.pg-press .prx-cov .card{min-height:0}
  main.pg-press .prx-feat .tt{font-size:19px}
  main.pg-press .prx-about h2,main.pg-press .prx-ask h2{font-size:30px;line-height:1.1}
  main.pg-press .prx-tl .card{grid-template-columns:minmax(0,1fr);gap:6px;padding:18px 20px}
  main.pg-press .prx-kit .card{padding:24px 20px}
  main.pg-press .prx-kit .tt{font-size:24px}
  main.pg-press .prx-ask .rkf{padding:20px 16px}
  main.pg-press .prx-ask .rf-done{padding:24px 20px}
}
/* nineteen small cards: the headline stays ink so the page doesn't shout; the dot, the arrow and the hover carry the tone */
main.pg-press .prx-cov .tt{color:var(--ink);transition:color .2s}
main.pg-press .prx-cov a.card:hover .tt,main.pg-press .prx-cov a.card:focus-visible .tt{color:var(--t-ink)}
@media (prefers-reduced-motion:reduce){main.pg-press .prx-cov .tt{transition:none}}
/* the outlet's masthead beside "Article" (assets/partner-logos.js) gets a slot it can be read in */
main.pg-press .prx-feat .meta [data-reka-logo]{width:96px;height:20px;vertical-align:middle;overflow:hidden}

/* phones (owner, 14 Oct: "fix the phone gaps too"). The coverage list sits two to a row and shows its first six,
   with a real button for the rest (the script adds .is-short and the button, so without it everything shows).
   A picture now breaks the boilerplate and the press form on every width. */
main.pg-press .prx-about .tray{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:"t ph" "tl ph"}
main.pg-press .prx-about-t{grid-area:t}
main.pg-press .prx-tl{grid-area:tl}
main.pg-press .prx-about-ph{grid-area:ph;align-self:stretch;border-radius:20px;overflow:hidden;display:flex}
main.pg-press .prx-about-ph .ph{width:100%;min-height:100%;aspect-ratio:auto}
main.pg-press .prx-cov .card{min-height:148px}
main.pg-press .prx-ask-ph{margin-top:32px;border-radius:20px;overflow:hidden}
main.pg-press .prx-ask-ph .ph{aspect-ratio:4/3;width:100%}
main.pg-press .prx-more{display:none}
@media (max-width:760px){
  main.pg-press .prx-cov{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  main.pg-press .prx-cov .card{padding:14px 12px;gap:8px}
  main.pg-press .prx-cov .tt{font-size:15px;line-height:1.3;letter-spacing:-.2px;overflow-wrap:break-word;hyphens:manual}
  main.pg-press .prx-cov .card-foot{padding-top:10px;flex-wrap:wrap;gap:8px;justify-content:flex-end}
  main.pg-press .prx-cov .card-foot .src{flex:1 1 100%}
  main.pg-press .prx-cov .src{font-size:11px;letter-spacing:.04em;white-space:normal;align-items:flex-start;min-width:0}
  main.pg-press .prx-cov .src::before{margin-top:4px}
  main.pg-press .prx-cov.is-short>li:nth-child(n+7){display:none}
  main.pg-press .prx-more{display:flex;margin:12px auto 0}
  main.pg-press .prx-ask-t{display:flex;flex-direction:column}
  main.pg-press .prx-ask-ph{order:-1;margin:0 0 24px}
  main.pg-press .prx-about-ph .ph,main.pg-press .prx-ask-ph .ph{aspect-ratio:16/9;min-height:0}
}
@media (max-width:900px){
  main.pg-press .prx-about .tray{grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "ph" "tl"}
}