/* Homepage journal. The shared brand tokens provide all four authored palettes. */
html:root:root:root:root:root:root:root body.pu-page {
 & .pu-blog {position:relative;padding:88px 0 76px;background:var(--bp-bg);color:var(--bp-ink);border-top:1px solid var(--bp-line)}
 & .pu-blog-legacy {position:absolute;top:0;scroll-margin-top:95px}
 & .pu-blog-head {display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:38px}
 & :is(.pu-blog,.pu-home-faq) .pu-eyebrow {color:var(--bp-muted);margin-bottom:20px;font-size:10px}
 & :is(.pu-blog,.pu-home-faq) .pu-eyebrow>span {color:var(--bp-accent)}
 & :is(.pu-blog,.pu-home-faq) .pu-eyebrow:after {background:var(--bp-line)}
 & .pu-blog h2 {margin:0;font-size:clamp(36px,3.5vw,52px);line-height:1.2;font-weight:500;letter-spacing:-.045em;color:var(--bp-ink)}
 & .pu-blog h2 em {font-style:normal;color:var(--bp-accent)}
 & .pu-blog-intro {max-width:330px;padding-bottom:4px}
 & .pu-blog-intro>p {font-size:13px;line-height:1.85;color:var(--bp-muted);margin:0 0 20px;text-wrap:pretty}
 & .pu-blog-all {display:inline-flex;align-items:center;justify-content:space-between;gap:28px;padding:12px 19px;min-height:46px;border:1px solid var(--bp-line);border-radius:99px;color:var(--bp-ink);font-size:12px;font-weight:500;text-decoration:none;background:var(--bp-card);transition:border-color .2s,background .2s}
 & .pu-blog-all>span {color:var(--bp-accent);font-size:19px;line-height:1}
 & .pu-blog-all:hover {border-color:var(--bp-accent);background:var(--bp-surface)}
 & .pu-blog-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
 & .pu-post {--post-accent:#c7baff;--post-glow:#665cb438;min-width:0;border:1px solid var(--bp-line);border-radius:20px;background:var(--bp-surface);box-shadow:0 18px 40px -25px var(--bp-shadow);transition:border-color .2s,transform .25s}
 & .pu-post[data-cover=chi-so] {--post-accent:#8fe5ed;--post-glow:#3c97a238}
 & .pu-post[data-cover=seo] {--post-accent:#a2e3c8;--post-glow:#49918a38}
 & .pu-post-link {display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none;border-radius:20px}
 & .pu-post-cover {position:relative;isolation:isolate;overflow:hidden;aspect-ratio:1.75;border-radius:19px 19px 0 0;border-bottom:1px solid var(--bp-line);background:radial-gradient(ellipse at 70% 25%,var(--post-glow),transparent 70%),#10283f;color:#dceaf5}
 & .pu-post-cover:before {content:'';position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#adcbed09 1px,transparent 1px),linear-gradient(90deg,#adcbed09 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(#000,transparent)}
 & .pu-post-cover:after {content:'';position:absolute;width:80%;aspect-ratio:1.9;border:1px solid color-mix(in srgb,var(--post-accent) 18%,transparent);border-radius:50%;left:12%;top:38%;transform:rotate(-20deg);z-index:-1}
 & .pu-post-cover-top {position:absolute;inset:17px 20px auto;display:flex;justify-content:space-between;align-items:center;font-size:8px;letter-spacing:.16em;color:#b3c8db}
 & .pu-post-cover-top>span:last-child {color:var(--post-accent);font-variant-numeric:tabular-nums}
 & .pu-post-diagram {position:absolute;width:70%;top:12%;left:15%;transform:perspective(700px) rotateY(-10deg) rotateX(7deg) rotateZ(-5deg);filter:drop-shadow(6px 15px 11px #000d2255);transition:transform .35s}
 & .pu-post-diagram .cv {display:block;width:100%;height:auto;font-family:inherit}
 & .pu-post-cover-label {position:absolute;left:20px;bottom:16px;font-size:7px;font-weight:500;letter-spacing:.13em;color:#c3d5e4}
 & .pu-post-open {position:absolute;right:17px;bottom:13px;display:grid;place-items:center;width:29px;height:29px;border:1px solid #b9d5ea40;border-radius:50%;font-size:17px;color:var(--post-accent);background:#163148}
 & .pu-post-body {display:flex;flex-direction:column;flex:1;padding:25px 24px 20px}
 & .pu-post-meta {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:9px;line-height:1.5;color:var(--bp-muted);margin-bottom:14px}
 & .pu-post-meta>span:first-child {font-weight:550;color:var(--bp-accent);text-transform:uppercase;letter-spacing:.05em}
 & .pu-post h3 {font-size:clamp(19px,1.6vw,24px);line-height:1.4;font-weight:550;letter-spacing:-.025em;margin:0 0 14px;color:var(--bp-ink);text-wrap:pretty}
 & .pu-post-body>p {font-size:12px;line-height:1.85;color:var(--bp-muted);margin:0 0 25px;text-wrap:pretty}
 & .pu-post-foot {display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:auto;padding-top:16px;border-top:1px solid var(--bp-line);font-size:11px;font-weight:550;color:var(--bp-ink)}
 & .pu-post-foot>span:last-child {font-size:20px;line-height:1;color:var(--bp-accent)}
 & .pu-post:hover {border-color:var(--bp-accent);transform:translateY(-4px)}
 & .pu-post:hover h3 {color:var(--bp-accent)}
 & .pu-post:hover .pu-post-diagram {transform:perspective(700px) rotateY(-5deg) rotateX(3deg) rotateZ(-2deg) translateY(-2px)}
 & :is(.pu-post-link,.pu-blog-all):focus-visible {outline:2px solid var(--bp-accent);outline-offset:5px}
 /* Local cover shapes reuse the blog's illustrations without loading its page layout. */
 & .pu-post .cv-f1 {fill:#163148;stroke-width:1.2}
 & .pu-post .cv-f2 {fill:#bdd8f119}
 & .pu-post .cv-f3 {fill:#c9e3f33d}
 & .pu-post .cv-s1 {stroke:#bfd9ea4a;stroke-width:1.2}
 & .pu-post .cv-fa {fill:var(--post-accent)}
 & .pu-post .cv-fa2 {fill:color-mix(in srgb,var(--post-accent) 20%,#163148)}
 & .pu-post .cv-sa {stroke:var(--post-accent);stroke-width:1.6}
 & .pu-post :is(.cv-ring,.cv-ring-a) {fill:none;stroke:#bdd8f128;stroke-width:7}
 & .pu-post .cv-ring-a {stroke:var(--post-accent);stroke-linecap:round}
 & .pu-post :is(.cv-line,.cv-ico) {fill:none;stroke:var(--post-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
 & .pu-post .cv-mark {fill:#163148;stroke:var(--post-accent);stroke-width:1.6}
 & .pu-post .cv-t {font-size:11px;font-weight:500;fill:#d2e5ef}
 & .pu-post .cv-tn {font-size:11px;font-weight:600;fill:#f1f8ff}
 /* The articles now have their own section; retain the FAQ as a compact two-column block. */
 & .pu-home-faq {padding:0 0 88px;background:var(--bp-bg);color:var(--bp-ink)}
 & .pu-home-faq-grid {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:70px}
 & .pu-home-faq-grid>div {padding-top:32px;border-top:1px solid var(--bp-line);min-width:0}
 & .pu-home-faq h2 {margin:0;font-size:clamp(27px,2.5vw,35px);line-height:1.3;font-weight:500;letter-spacing:-.035em;color:var(--bp-ink)}
 & .pu-home-faq details {border:0;border-bottom:1px solid var(--bp-line);background:transparent;border-radius:0;padding:0}
 & .pu-home-faq summary {position:relative;list-style:none;padding:18px 32px 18px 0;cursor:pointer;font-size:13px;font-weight:500;line-height:1.7;color:var(--bp-ink)}
 & .pu-home-faq summary::-webkit-details-marker {display:none}
 & .pu-home-faq summary:after {content:'+';position:absolute;right:2px;top:16px;font-size:20px;font-weight:400;color:var(--bp-accent)}
 & .pu-home-faq details[open]>summary:after {content:'−'}
 & .pu-home-faq details>p {margin:0;padding:0 28px 20px 0;font-size:13px;line-height:1.85;color:var(--bp-muted)}
 & .pu-home-faq summary:focus-visible {outline:2px solid var(--bp-accent);outline-offset:3px}
 @media(max-width:1100px) {
  & .pu-blog-grid {gap:16px}
  & .pu-post-body {padding:21px 18px 18px}
  & .pu-post-cover-top {inset:13px 16px auto}
  & .pu-post-cover-label {left:16px;bottom:13px;font-size:6px}
 }
 @media(max-width:800px) {
  & .pu-blog {padding:64px 0 54px}
  & .pu-blog-head {align-items:flex-start;gap:24px}
  & .pu-blog-intro {max-width:270px;padding:0}
  & .pu-blog-grid {grid-template-columns:1fr;gap:20px}
  & .pu-post-link {display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}
  & .pu-post-cover {height:100%;aspect-ratio:auto;border-radius:19px 0 0 19px;border-bottom:0;border-right:1px solid var(--bp-line);min-height:240px}
  & .pu-post-diagram {top:50%;margin-top:-25%;width:86%;left:7%}
  & .pu-post-body {padding:24px}
  & .pu-post h3 {font-size:22px}
  & .pu-post-cover-label {font-size:7px}
  & .pu-home-faq-grid {gap:30px;grid-template-columns:1fr 1.5fr}
 }
 @media(max-width:560px) {
  & .pu-blog {padding:52px 0 44px}
  & .pu-blog-head {display:block;margin-bottom:28px}
  & .pu-blog h2 {font-size:36px}
  & .pu-blog-intro {max-width:none;margin-top:22px}
  & .pu-blog-intro>p {font-size:12px;margin-bottom:16px}
  & .pu-blog-all {font-size:11px;padding:11px 17px}
  & .pu-blog-grid {gap:24px}
  & .pu-post-link {display:flex}
  & .pu-post-cover {height:auto;aspect-ratio:1.7;min-height:0;border-radius:19px 19px 0 0;border-right:0;border-bottom:1px solid var(--bp-line)}
  & .pu-post-diagram {top:12%;left:15%;width:70%;margin-top:0}
  & .pu-post-body {padding:23px 22px 20px}
  & .pu-post h3 {font-size:22px}
  & .pu-home-faq {padding-bottom:55px}
  & .pu-home-faq-grid {grid-template-columns:1fr;gap:22px}
  & .pu-home-faq-grid>div {padding-top:26px}
  & .pu-home-faq-grid>.pu-home-faq-list {padding-top:0;border-top:0}
 }
 @media(prefers-reduced-motion:reduce) {
  & .pu-post,& .pu-post-diagram,& .pu-blog-all {transition:none}
  & .pu-post:hover {transform:none}
  & .pu-post:hover .pu-post-diagram {transform:perspective(700px) rotateY(-10deg) rotateX(7deg) rotateZ(-5deg)}
 }
}