/* CG164 · How the Group is built: the structure section on the home page and the /structure/ page.
   Tokens only (the B325 palette): white, --px-paper2, --px-line, --px-ink, --px-char; blue is the Group box edge and the
   connecting lines, nothing else. The chart is an inline SVG at laptop widths and a stacked list on phones. */

.cg-struct .px-sub{max-width:62ch}
.cg-struct .cg-ssub{margin-bottom:clamp(28px,3.5vw,44px);font-size:17px;line-height:1.6}
.cg-struct .cg-ssub b{font-weight:500;color:var(--px-ink)}

/* the chart */
.cg-org{margin:0 0 clamp(32px,4vw,52px);padding:clamp(20px,3vw,36px) clamp(16px,2.6vw,32px);border:1px solid var(--px-line);border-radius:20px;background:var(--px-paper2)}
.cg-org svg{display:block;width:100%;height:auto;max-width:960px;margin:0 auto;font-family:var(--px-sans);overflow:visible}
.cg-org .bx{fill:var(--px-card);stroke:var(--px-line2);stroke-width:1.5}
.cg-org .bx.add{stroke-dasharray:5 5;fill:transparent}
.cg-org .bx.top{stroke:var(--px-blue);stroke-width:2}
.cg-org .ln{fill:none;stroke:var(--px-blue);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cg-org .ln.soft{stroke:var(--px-line2)}
.cg-org .tx{fill:var(--px-ink);font-size:15px;font-weight:500;letter-spacing:-.005em}
.cg-org .tx.top{font-size:18px}
.cg-org .sub{fill:var(--px-char);font-size:12px;font-weight:400}
.cg-org .lab{fill:var(--px-mute);font-family:var(--px-mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.cg-org .tx,.cg-org .sub,.cg-org .lab{text-anchor:middle}
.cg-orglist{display:none}

/* the three parts */
.cg-parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 clamp(32px,4vw,52px);padding:0;list-style:none}
.cg-part{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.4vw,30px);border:1px solid var(--px-line);border-radius:18px;background:var(--px-card)}
.cg-part .cg-pk{margin:0;font:500 12px/1.7 var(--px-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--px-blue)}
.cg-part h3{margin:0;font:400 clamp(22px,2vw,26px)/1.2 var(--px-serif);letter-spacing:-.015em;color:var(--px-ink);text-wrap:balance}
.cg-part p{margin:0;font:400 15.5px/1.55 var(--px-sans);color:var(--px-char)}
.cg-part p+p{margin-top:2px}
.cg-part .cg-pgo{margin-top:auto;padding-top:10px}
.cg-part .cg-pgo a{font:500 15px/1.4 var(--px-sans);color:var(--px-blue);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.cg-part .cg-pgo a:hover{text-decoration:underline;text-underline-offset:3px}
.cg-part .cg-pgo a:focus-visible{outline:2px solid var(--px-blue);outline-offset:3px;border-radius:4px}
.cg-part .cg-pnote{font-size:14px;color:var(--px-mute)}

/* the family marks, the official masters */
.cg-fam{margin:0;padding:clamp(22px,2.6vw,32px) clamp(16px,2.6vw,32px);border-top:1px solid var(--px-line);border-bottom:1px solid var(--px-line);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px clamp(20px,3vw,40px);align-items:center;list-style:none}
.cg-fam li{margin:0;display:flex;justify-content:center}
.cg-fam img{display:block;width:100%;max-width:220px;height:auto}
.cg-fam img.mk-r{display:none}
.cg-famk{margin:0 0 10px;font:500 12px/1.7 var(--px-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--px-mute)}
.cg-struct .cg-more{margin:clamp(22px,3vw,32px) 0 0}

/* the /structure/ page */
body.tg-structure .cg-sec .px-sub{font-size:17px;line-height:1.6}
body.tg-structure .cg-parent{display:block}
body.tg-structure .cg-parent .cg-org{margin:clamp(28px,3.5vw,44px) 0 0}
body.tg-structure .cg-parent .cg-plist{max-width:62ch}
body.tg-structure .cg-parent .cg-ssub{margin-bottom:18px}
body.tg-structure .cg-fam{border-bottom:0}
body.tg-structure .cg-plist{margin:0;padding:0;list-style:none;display:grid;gap:10px}
body.tg-structure .cg-plist li{font:400 15.5px/1.55 var(--px-sans);color:var(--px-char);padding-left:18px;position:relative}
body.tg-structure .cg-plist li:before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1.5px;background:var(--px-blue)}
body.tg-structure .cg-plist b{font-weight:500;color:var(--px-ink)}

@media (width<=980px){
  .cg-fam{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (width<=820px){
  .cg-parts{grid-template-columns:1fr}
}
@media (width<=640px){
  /* on phones the chart is a stacked list with the same hierarchy; nothing scrolls sideways */
  .cg-org{padding:0;border:0;border-radius:0;background:transparent}
  .cg-org svg{display:none}
  .cg-orglist{display:block;margin:0;padding:0;list-style:none}
  .cg-orglist ul{margin:10px 0 0 14px;padding:0 0 0 16px;list-style:none;border-left:1.5px solid var(--px-blue);display:grid;gap:10px}
  .cg-orglist ul ul{border-left-color:var(--px-line2)}
  .cg-orglist li{position:relative}
  .cg-orglist .ob{display:block;padding:12px 14px;border:1px solid var(--px-line2);border-radius:12px;background:var(--px-card);font:500 15px/1.35 var(--px-sans);color:var(--px-ink)}
  .cg-orglist .ob.top{border-color:var(--px-blue);border-width:1.5px;font-size:17px}
  .cg-orglist .ob.add{border-style:dashed;background:transparent}
  .cg-orglist .ob small{display:block;margin-top:2px;font:400 13px/1.4 var(--px-sans);color:var(--px-char)}
  .cg-orglist .ol{display:block;margin:12px 0 0;font:500 10.5px/1.6 var(--px-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--px-mute)}
  .cg-fam{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 20px;padding-left:0;padding-right:0}
  .cg-fam img{max-width:150px}
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .cg-org .bx.add{fill:transparent}
  :root:not([data-theme="light"]) .cg-fam img.mk-o{display:none}
  :root:not([data-theme="light"]) .cg-fam img.mk-r{display:block}
}

/* each part has its own function; the common denominator */
.cg-fn{margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px 20px;border-top:1px solid var(--px-line);padding-top:22px}
.cg-fn>div{margin:0}
.cg-fn dt{font:500 12px/1.7 var(--px-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--px-blue)}
.cg-fn dd{margin:4px 0 0;font:400 15.5px/1.5 var(--px-sans);color:var(--px-char)}
.cg-fnclose{margin:0;font:400 clamp(19px,1.8vw,23px)/1.4 var(--px-serif);color:var(--px-ink);max-width:40ch}
body.tg-structure .cg-parent+.cg-fn{margin-top:clamp(28px,3.5vw,44px)}
@media (width<=980px){.cg-fn{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (width<=640px){.cg-fn{grid-template-columns:1fr;gap:12px}}

/* the companies and their receipts */
.cg-home .cg-proof{padding-top:clamp(56px,6vw,88px)}
.cg-cos .tg-num.w{color:#ffffffb8;margin-bottom:26px}
.cg-cos .tg-num.w span{color:#fff}
.cg-cos .tg-num.w:after{background:#ffffff33}
.cg-colist{margin:0 0 34px;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cg-colist li{display:flex;flex-direction:column;gap:12px;padding:22px 24px;border-radius:16px;background:#ffffff14;border:1px solid #ffffff2e}
.cg-colist a{display:block;width:min(100%,300px);border-radius:10px;background:#fff;padding:14px 18px}
.cg-colist a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.cg-colist img{display:block;width:100%;height:auto}
.cg-colist span{font:400 14px/1.4 var(--px-sans);color:#ffffffcc}
.cg-colist-pg li{background:var(--px-paper2);border-color:var(--px-line)}
.cg-colist-pg a{border:1px solid var(--px-line);background:#fff}
.cg-colist-pg span{color:var(--px-char)}
.cg-colist-pg{margin-bottom:0}
.cg-proof .tg-glass dd b{font-weight:500;color:inherit}
@media (width<=640px){.cg-colist{grid-template-columns:1fr}}

/* the three doors' marks and the family row before the footer */
.cg-pmark{margin:0 0 6px;height:34px;display:flex;align-items:center}
.cg-pmark img{display:block;height:28px;width:auto;max-width:100%}
.cg-pmark img.mk-r{display:none}
.cg-famrow{padding:clamp(40px,5vw,64px) 0;background:var(--px-paper)}
.cg-famrow .cg-fam{border:0;padding-left:0;padding-right:0}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .cg-pmark img.mk-o{display:none}
  :root:not([data-theme="light"]) .cg-pmark img.mk-r{display:block}
  :root:not([data-theme="light"]) .cg-colist-pg a{background:#fff}
}

/* the hero says what the Group is; a longer line than "We buy to keep", so it sits smaller and no word breaks inside */
.cg-home .tg-sky h1{font-size:clamp(40px,5.6vw,80px);max-width:17ch}
.cg-home .tg-sky h1 .rwi{white-space:nowrap}
@media (width<=560px){.cg-home .tg-sky h1{font-size:clamp(36px,10.4vw,50px)}}
@media (width<=640px){.cg-orglist .ol small{display:block;margin-top:2px;font:400 13px/1.4 var(--px-sans);letter-spacing:0;text-transform:none;color:var(--px-char)}}

/* on the phone the shell turns the receipts section white, so the companies row follows it */
html.sh-on main>section.cg-proof .cg-cos .tg-num.w{color:var(--px-mute)}
html.sh-on main>section.cg-proof .cg-cos .tg-num.w span{color:var(--px-blue)}
html.sh-on main>section.cg-proof .cg-cos .tg-num.w:after{background:var(--px-line)}
html.sh-on main>section.cg-proof .cg-colist li{background:var(--px-paper2);border-color:var(--px-line)}
html.sh-on main>section.cg-proof .cg-colist a{border:1px solid var(--px-line)}
html.sh-on main>section.cg-proof .cg-colist span{color:var(--px-char)}
html.sh-on main>section.cg-proof .cg-colist{margin-bottom:20px}