/* Hubs, lists and notices on the section grammar (14 Oct 2026, Phase 2): Built for Progress, Answers, Community,
   Insights, Publications, the press archive, the blog list and the privacy notice (English and Malay).
   Every rule is scoped to the page class on <main>; company.css, cs-template.css and resources.css stay untouched.
   Company pages, so orange and oat; a card about one part of REKA wears that part's tone. Lists keep their rows plain and
   scannable; a few real-scene photo slots lead the hero and the longer groups. No title-card share images on lists. */

/* chapter titles, as About, Work and Press */
main:is(.pg-progress,.pg-answers,.pg-community,.pg-insights,.pg-pubs,.pg-archive,.pg-bloglist,.pg-legal) .chap-head h2{font:600 56px/1.04 var(--sans);letter-spacing:-.035em;color:var(--ink);text-align:center;text-wrap:balance}
main:is(.pg-progress,.pg-answers,.pg-community,.pg-insights,.pg-pubs,.pg-archive,.pg-bloglist,.pg-legal) .related .chap-head h2{font:500 40px/1.1 var(--sans);letter-spacing:-1.2px}
main:is(.pg-progress,.pg-answers,.pg-community,.pg-insights,.pg-pubs,.pg-archive,.pg-bloglist,.pg-legal) .ph{border-radius:16px}
/* a photo slot on a plain oat tray needs a step more contrast to read as a slot */
main:is(.pg-answers,.pg-pubs,.pg-archive,.pg-bloglist) .tray:not([data-tone]) .ph{--phb:#DDD9CF}

/* ---------- hub hero: the words, and a picture beside them (blog list, archive, insights, publications, community, answers) */
main .hb-hero .cw,main .hb-hero>.wrap{max-width:1280px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px 64px;align-items:center}
main .hb-hero .hb-ht{min-width:0}
main .hb-hero .hb-ht h1{max-width:none}
main .hb-hero>.cw>.ph,main .hb-hero>.wrap>.ph{width:100%;aspect-ratio:4/3;border-radius:24px}
main.pg-bloglist .pl-head,main.pg-archive .pl-head,main.pg-insights .pl-head{padding:136px 0 64px}

/* ---------- year lists (blog list, press archive): one tray, a white card per year, rows without rules ---------- */
main:is(.pg-bloglist,.pg-archive) .hb-list{display:flex;flex-direction:column;gap:12px}
main:is(.pg-bloglist,.pg-archive) .pl-tools{margin:0;padding:12px 12px 12px 20px;border:0;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
main:is(.pg-bloglist,.pg-archive) .pl-tools input{background:var(--white)}
main:is(.pg-bloglist,.pg-archive) .hb-yr{display:grid;grid-template-columns:240px minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"y l" "p l";gap:16px 32px;padding:20px 24px 16px;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
main:is(.pg-bloglist,.pg-archive) .hb-yr:has(>.postlist[hidden]){display:none}
main:is(.pg-bloglist,.pg-archive) .hb-yr .pl-year{grid-area:y;margin:0;padding:10px 0 0;font:600 30px/1.1 var(--mono);letter-spacing:-.02em;color:var(--ink)}
main:is(.pg-bloglist,.pg-archive) .hb-yr .postlist{grid-area:l;margin:0;border:0}
main:is(.pg-bloglist,.pg-archive) .hb-yr .ph{grid-area:p;align-self:start;position:sticky;top:120px;width:100%;aspect-ratio:4/3;border-radius:14px}
main:is(.pg-bloglist,.pg-archive) .postlist li{border:0}
main:is(.pg-bloglist,.pg-archive) .postlist a{grid-template-columns:100px minmax(0,1fr) 200px;gap:4px 20px;padding:12px 14px}
main:is(.pg-bloglist,.pg-archive) .postlist li[data-tone] a:hover{padding-inline:14px}
main:is(.pg-bloglist,.pg-archive) .postlist b{font-size:17px;line-height:25px}
main:is(.pg-bloglist,.pg-archive) .pl-empty{margin:8px 0 0;padding:20px 24px;border-radius:20px;background:#fff;color:var(--muted)}
main:is(.pg-bloglist,.pg-archive) .pl-empty[hidden]{display:none}

/* ---------- Insights: three doors with their pictures and the guides, recent writing as cards, the newsletter ---------- */
main.pg-insights .in-doors{gap:16px}
main.pg-insights .in-doors>li{display:flex;background:none;border-radius:0;box-shadow:none}
main.pg-insights .in-doors>li>.card{flex:1;height:auto;padding:24px}
main.pg-insights .in-doors .frame .ph{width:100%;aspect-ratio:4/3;border-radius:0}
main.pg-insights .in-doors .tt{font:600 26px/1.15 var(--sans);letter-spacing:-.02em;color:var(--t-ink,var(--ink))}
main.pg-insights .in-doors .card>p{margin-top:0;font-size:15px;line-height:22px}
main.pg-insights .in-doors .card-foot{padding-top:16px}
main.pg-insights .in-doors .gd ul{margin-top:8px}
main.pg-insights .in-doors .gd li a{border-top:0;padding:9px 0 9px 16px;font-size:15px}
main.pg-insights .postlist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;border:0}
main.pg-insights .postlist li{display:flex;border:0}
main.pg-insights .postlist a{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:22px 24px;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
main.pg-insights .postlist b{font-size:18px;line-height:26px}
main.pg-insights .postlist .c{margin-top:auto;padding-top:8px;text-align:left}
main.pg-insights .postlist li[data-tone] a:hover{padding-inline:24px;background:#fff;transform:translateY(-3px);box-shadow:inset 0 0 0 1.5px var(--t),0 16px 32px -24px color-mix(in srgb,var(--t) 80%,transparent)}
main.pg-insights .chap-head .more{margin-top:4px}
main.pg-insights .nl{grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.25fr);gap:40px;align-items:center;border-radius:40px;padding:48px}
main.pg-insights .nl-ph{width:100%;aspect-ratio:4/3}


/* ---------- Answers: every answer open, each a white card in one tray, in the colour of the part of REKA it is about;
   three pictures between the groups, each showing the answer above it. Ids, order and JSON-LD unchanged ---------- */
main.pg-answers .an-hero{padding:136px 0 64px}
main.pg-answers .an-hero .in{max-width:none;margin:0}
main.pg-answers .an-hero h1{margin-top:0}
main.pg-answers .an-hero>.cw>img{display:block;width:100%;aspect-ratio:4/3;border-radius:24px;object-fit:cover}
main.pg-answers .an-list{padding:16px 0 0}
main.pg-answers .an-list .in{max-width:880px;display:flex;flex-direction:column;gap:12px}
main.pg-answers .an-qa,main.pg-answers .an-qa:last-child{padding:28px 32px 26px;border:0;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
main.pg-answers .an-qa[data-tone]::before{display:none}
main.pg-answers .an-qa[data-tone] h2{color:var(--t-ink)}
main.pg-answers .an-pic{margin:12px 0}
main.pg-answers .an-pic .ph{width:100%;aspect-ratio:16/9;border-radius:20px}
main.pg-answers .an-pic img{display:block;width:100%;aspect-ratio:16/9;border-radius:20px;object-fit:cover}

/* ---------- Publications: the hero beside its picture, the library in one tray with a picture beside the list ---------- */
main.pg-pubs .g-hero{padding:56px 0 64px}
main.pg-pubs .g-hero>.wrap{width:calc(100% - 2 * var(--gut));max-width:calc(1280px - 2 * var(--gut))}
main.pg-pubs .g-hero .hb-ht h1{max-width:18ch}
main.pg-pubs .g-body{padding:16px 0 0}
main.pg-pubs .pub-tray{display:grid;grid-template-columns:minmax(0,1fr) 360px;grid-template-rows:auto auto 1fr;grid-template-areas:"c p" "l p" "n p";gap:16px 32px;align-items:start}
main.pg-pubs .pub-tray>.chips{grid-area:c}
main.pg-pubs .pub-tray>.publist{grid-area:l;margin:0}
main.pg-pubs .pub-tray>.pubnote{grid-area:n;margin:0;padding:0 4px}
main.pg-pubs .pub-ph{grid-area:p;position:sticky;top:120px;width:100%;aspect-ratio:4/3;border-radius:20px}
main.pg-pubs .publist.tinted li{box-shadow:inset 0 0 0 1px var(--line)}

/* ---------- Article-shaped pages (Built for Progress; the privacy notice, English and Malay): the title opens on the
   paper, then the body in a white card inside one tray, the index beside it. A readable column; the notice has no
   photos, Built for Progress has a lead picture and one in its longest section ---------- */
main:is(.pg-progress,.pg-legal) .bp-head{padding-top:72px}
main:is(.pg-progress,.pg-legal) .bp-head h1{font:600 72px/1.02 var(--sans);letter-spacing:-.035em;text-wrap:balance}
main:is(.pg-progress,.pg-legal) .bp-tray{margin-top:48px}
main:is(.pg-progress,.pg-legal) .bp-wrap{display:grid;grid-template-columns:184px minmax(0,1fr);gap:40px;align-items:start}
main:is(.pg-progress,.pg-legal) .toc{position:static;display:block;width:auto;align-self:stretch}
main:is(.pg-progress,.pg-legal) .toc nav{top:128px;padding:8px 0 0 8px}
main:is(.pg-progress,.pg-legal) .toc .eb{margin-bottom:12px;font:600 13px/18px var(--sans);letter-spacing:0;text-transform:none;color:var(--ink)}
main:is(.pg-progress,.pg-legal) .toc a{font-size:13.5px;line-height:19px;padding:6px 0;color:#6B6964}
main:is(.pg-progress,.pg-legal) .bp-wrap>.cw{max-width:none;margin:0;padding:0}
main:is(.pg-progress,.pg-legal) .bp-wrap .article{max-width:none;margin:0;padding:56px 64px 64px;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
main:is(.pg-progress,.pg-legal) .article>:first-child{margin-top:0}
main:is(.pg-progress,.pg-legal) .article p,main:is(.pg-progress,.pg-legal) .article li{font-size:16.5px;line-height:27px}
main:is(.pg-progress,.pg-legal) .article h2{margin:52px 0 16px;padding-top:0;font:600 32px/1.15 var(--sans);letter-spacing:-.025em;color:var(--t-ink,var(--ink));text-wrap:balance}
main:is(.pg-progress,.pg-legal) .article h2::before{display:none}
main:is(.pg-progress,.pg-legal) .article h3{margin:32px 0 12px;font:600 22px/1.25 var(--sans);letter-spacing:-.3px}
main.pg-legal .article h2{font-size:26px;margin-top:44px;color:var(--ink)}
main.pg-progress .bp-lead{margin-top:48px}
main.pg-progress .bp-lead .ph{width:100%;aspect-ratio:16/9;max-height:600px;border-radius:24px}
main.pg-progress .article figure.bp-pic{height:auto;margin:32px 0;padding:0;border-radius:16px;background:none}
main.pg-progress .article figure.bp-pic .ph{height:auto;width:100%;aspect-ratio:16/9;border-radius:16px}
main.pg-progress .bp-more-list .frame img{height:auto;aspect-ratio:1200/630;object-fit:cover}
main.pg-progress .bp-more-list .tt{font-size:19px}

@media (max-width:1000px){
  main.pg-insights .postlist{grid-template-columns:repeat(2,minmax(0,1fr))}
  main.pg-insights .nl{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  main.pg-insights .nl>div:last-child{grid-column:1/-1}
  main.pg-pubs .pub-tray{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"c" "l" "n" "p"}
  main.pg-pubs .pub-ph{position:relative;top:auto;aspect-ratio:16/10}
  main:is(.pg-progress,.pg-legal) .bp-wrap{grid-template-columns:minmax(0,1fr)}
  main:is(.pg-progress,.pg-legal) .toc{display:none}
  main .hb-hero .cw,main .hb-hero>.wrap{grid-template-columns:minmax(0,1fr);gap:32px}
  main .hb-hero>.cw>.ph,main .hb-hero>.wrap>.ph{aspect-ratio:16/10}
  main:is(.pg-bloglist,.pg-archive) .hb-yr{grid-template-columns:180px minmax(0,1fr);gap:16px 24px}
  main:is(.pg-bloglist,.pg-archive) .postlist a{grid-template-columns:104px minmax(0,1fr) 150px}
}
@media (max-width:760px){
  main:is(.pg-progress,.pg-answers,.pg-community,.pg-insights,.pg-pubs,.pg-archive,.pg-bloglist,.pg-legal) .chap-head h2{font-size:38px;line-height:1.08}
  main:is(.pg-progress,.pg-answers,.pg-community,.pg-insights,.pg-pubs,.pg-archive,.pg-bloglist,.pg-legal) .related .chap-head h2{font-size:30px}
  main.pg-bloglist .pl-head,main.pg-archive .pl-head,main.pg-insights .pl-head{padding:104px 0 40px}
  main .hb-hero>.cw>.ph,main .hb-hero>.wrap>.ph{border-radius:20px}
  main:is(.pg-bloglist,.pg-archive) .pl-tools{padding:12px}
  main:is(.pg-bloglist,.pg-archive) .hb-yr{grid-template-columns:minmax(0,1fr);grid-template-areas:"y" "p" "l";gap:12px;padding:16px 12px 10px}
  main:is(.pg-bloglist,.pg-archive) .hb-yr .pl-year{padding:4px 8px 0;font-size:24px}
  main:is(.pg-bloglist,.pg-archive) .hb-yr .ph{position:relative;top:auto;aspect-ratio:16/10}
  main:is(.pg-bloglist,.pg-archive) .postlist a{grid-template-columns:auto minmax(0,1fr);padding:12px 8px}
  main:is(.pg-bloglist,.pg-archive) .postlist li[data-tone] a:hover{padding-inline:8px}
  main:is(.pg-bloglist,.pg-archive) .postlist b{font-size:16px;line-height:23px}
  main.pg-insights .in-doors>li>.card{padding:20px}
  main.pg-answers .an-hero{padding:104px 0 40px}
  main.pg-answers .an-qa,main.pg-answers .an-qa:last-child{padding:20px}
  main.pg-answers .an-pic{margin:4px 0}
  main:is(.pg-progress,.pg-legal) .bp-head{padding-top:48px}
  main:is(.pg-progress,.pg-legal) .bp-head h1{font-size:40px;line-height:1.08}
  main:is(.pg-progress,.pg-legal) .bp-tray,main.pg-progress .bp-lead{margin-top:32px}
  main:is(.pg-progress,.pg-legal) .tray.bp-wrap{padding:8px}
  main:is(.pg-progress,.pg-legal) .bp-wrap .article{padding:28px 20px 32px}
  main:is(.pg-progress,.pg-legal) .article p,main:is(.pg-progress,.pg-legal) .article li{font-size:16px;line-height:26px}
  main:is(.pg-progress,.pg-legal) .article h2{margin-top:40px;font-size:26px}
  main.pg-legal .article h2{font-size:22px}
  main.pg-progress .bp-lead .ph{border-radius:20px}
  main.pg-insights .postlist{grid-template-columns:minmax(0,1fr);gap:8px}
  main.pg-insights .postlist a,main.pg-insights .postlist li[data-tone] a:hover{padding:18px 20px}
  main.pg-insights .postlist b{font-size:16px;line-height:23px}
  main.pg-insights .nl{grid-template-columns:minmax(0,1fr);gap:20px;border-radius:28px;padding:20px}
  main.pg-insights .nl-ph{aspect-ratio:16/10}
}
@media (prefers-reduced-motion:reduce){main.pg-insights .postlist a{transition:none}main.pg-insights .postlist li[data-tone] a:hover{transform:none}}

/* phones (owner, 14 Oct: "fix the phone gaps too"). Blog list and press archive: a year with more than eight rows shows
   its first six and a real button for the rest; the page script adds .is-short and the button, so without it every row
   shows, and a search or filter (.is-filtering) shows every match */
main:is(.pg-bloglist,.pg-archive) .pl-more{display:none}
@media (max-width:760px){
  main:is(.pg-bloglist,.pg-archive) .hb-list:not(.is-filtering) .postlist.is-short>li:nth-child(n+7){display:none}
  main:is(.pg-bloglist,.pg-archive) .hb-list:not(.is-filtering) .hb-yr .pl-more{display:flex;justify-self:center;margin:2px 0 8px}
}
/* Insights on phones: the guides (how-tos from the blog) follow the Blog door, so the three pictured doors break the
   run down to the newsletter */
@media (max-width:760px){
  main.pg-insights .in-doors>li{order:2}
  main.pg-insights .in-doors>li:first-child{order:0}
  main.pg-insights .in-doors>li:has(>.gd){order:1}
}

/* ---------- Community in the People style (14 Oct 2026): photo-led and warm, on paper, no trays or boxes. The hero has
   a large picture with its caption; Education opens on the 2017 #StartIoT photo across the page, then each strand is a
   row (when and what on the left, the story on the right) with the founder's words set large and the hackathon picture
   in its own row; COVID-19 and Learning with us are a large picture beside the words, swapping sides. Each chapter
   keeps its colour on the dates, titles and quote marks only (people, esoterik; REKA's own work, orange). ---------- */
main.pg-community .cm-hero{padding:152px 0 0}
main.pg-community .cm-hero .cw{max-width:1280px;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 64px}
main.pg-community .cm-hero .in{max-width:none}
main.pg-community .cm-hero h1{font:600 84px/1 var(--sans);letter-spacing:-.045em}
main.pg-community .cm-hero .lead{margin-top:28px;font-size:19px;line-height:1.55;color:var(--ink)}
main.pg-community .pp-fig{margin:0;min-width:0}
main.pg-community .pp-fig>img{display:block;height:auto}
main.pg-community .pp-fig>img,main.pg-community .pp-fig>.ph{width:100%;border-radius:28px}
main.pg-community .pp-fig>.ph{aspect-ratio:4/3}
main.pg-community .pp-cap{margin-top:14px;font:500 14px/20px var(--sans);color:var(--muted);text-wrap:pretty}
main.pg-community .blk.chap.pp-sec{padding-top:128px}
main.pg-community .pp-head{max-width:none;margin:0 0 48px;align-items:flex-start;text-align:left}
main.pg-community .pp-head h2{text-align:left}
main.pg-community .cm-lead img{aspect-ratio:16/9;object-fit:cover}
/* the strands as rows: when and what on the left, the story on the right */
main.pg-community .cm-rows{list-style:none;margin:80px 0 0;padding:0;display:flex;flex-direction:column;gap:80px}
main.pg-community .cm-rows>li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:72px;align-items:start}
main.pg-community .cm-rows>li>*{grid-column:2;max-width:68ch}
main.pg-community .cm-rows>li>.cm-k{grid-column:1;grid-row:1/span 8;max-width:none}
main.pg-community .cm-rows .when{display:block;font:600 14px/20px var(--sans);color:var(--t-ink)}
main.pg-community .cm-rows h3{margin-top:8px;font:600 30px/1.15 var(--sans);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
main.pg-community .cm-rows p{font:400 18px/29px var(--sans);color:var(--ink)}
main.pg-community .cm-rows p+p{margin-top:12px}
main.pg-community .cm-rows blockquote{margin:36px 0 8px;padding:0;border:0;max-width:none;font:500 clamp(24px,2.5vw,36px)/1.25 var(--sans);letter-spacing:-.02em;color:var(--ink);text-indent:-.42em;text-wrap:pretty}
main.pg-community .cm-rows blockquote::first-letter{color:var(--t-ink)}
main.pg-community .cm-rows blockquote cite{display:block;margin-top:18px;text-indent:0;font:600 15px/22px var(--sans);font-style:normal;letter-spacing:0;color:var(--muted)}
main.pg-community .cm-rows .cm-src{margin-top:16px}
main.pg-community .cm-src a{border-bottom-color:var(--t)}
main.pg-community .cm-src a:hover{color:var(--t-ink)}
main.pg-community .cm-rows .cm-fig2{max-width:none;margin-top:40px}
/* a large picture beside the words, the side swapping */
main.pg-community .cm-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 72px;align-items:center}
main.pg-community .cm-split.cm-flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
main.pg-community .cm-split.cm-flip>.pp-fig{order:-1}
main.pg-community .cm-one{margin:0;gap:56px}
main.pg-community .cm-one>li{display:block}
main.pg-community .cm-one .cm-k{margin-bottom:16px}
main.pg-community .cm-one blockquote{font-size:clamp(22px,2vw,28px);line-height:1.3}

@media (max-width:1000px){
  main.pg-community .cm-hero .cw{grid-template-columns:minmax(0,1fr);gap:32px}
  main.pg-community .cm-rows>li{grid-template-columns:minmax(0,1fr)}
  main.pg-community .cm-rows>li>*,main.pg-community .cm-rows>li>.cm-k{grid-column:1;grid-row:auto}
  main.pg-community .cm-rows>li>.cm-k{margin-bottom:16px}
  main.pg-community .cm-split,main.pg-community .cm-split.cm-flip{grid-template-columns:minmax(0,1fr)}
  main.pg-community .cm-split:not(.cm-flip)>.pp-fig{order:2}
}
@media (max-width:760px){
  main.pg-community .cm-hero{padding:120px 0 0}
  main.pg-community .cm-hero h1{font-size:46px;line-height:1.02;letter-spacing:-1.6px}
  main.pg-community .cm-hero .lead{margin-top:18px;font-size:17px}
  main.pg-community .blk.chap.pp-sec{padding-top:72px}
  main.pg-community .pp-head{margin-bottom:28px}
  main.pg-community .pp-fig>img,main.pg-community .pp-fig>.ph{border-radius:20px}
  main.pg-community .pp-cap{margin-top:10px;font-size:13px;line-height:18px}
  main.pg-community .cm-lead img{aspect-ratio:4/3}
  main.pg-community .cm-rows{margin-top:48px;gap:48px}
  main.pg-community .cm-rows h3{font-size:24px}
  main.pg-community .cm-rows p{font-size:16px;line-height:26px}
  main.pg-community .cm-rows blockquote{margin-top:28px;font-size:24px}
  main.pg-community .cm-one blockquote{font-size:22px}
  main.pg-community .cm-rows .cm-fig2{margin-top:28px}
  main.pg-community .cm-rows.cm-one{margin-top:0}
}