/* Labels scale with their stone artwork, not the browser width. */
body .five-foundations .foundation-sculpture{container-type:inline-size}
body .five-foundations .foundation-piece{box-sizing:border-box;width:23%;padding:0;min-height:0;gap:3px;gap:.65cqw}
body .five-foundations .foundation-piece strong{max-width:100%;font-size:12px;font-size:2.7cqw;line-height:1.12;letter-spacing:.025em;white-space:normal;overflow-wrap:normal}
body .five-foundations .foundation-piece>span{max-width:100%;font-size:10px;font-size:2.1cqw;line-height:1.2;text-wrap:balance}
body .five-foundations .foundation-piece svg{width:19px;height:19px;width:4cqw;height:4cqw}
body .five-foundations .foundation-piece strong::after{display:none}
body .five-foundations .foundation-piece-recovery{top:25%}
body .five-foundations .foundation-piece-today{left:23%;top:38%}
body .five-foundations .foundation-piece-mental{left:77%;top:38%}
body .five-foundations .foundation-piece-rebuild{left:32%;top:64%}
body .five-foundations .foundation-piece-active{left:70%;top:64%}
/* Give the artwork its own grid cell so it cannot sit over the copy. */
body[data-page=index] .foundation-panel{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:16px 22px;min-height:0;align-content:start;align-items:start}
body[data-page=index] .foundation-panel-label,
body[data-page=index] .foundation-panel h3,
body[data-page=index] #foundation-description{grid-column:1/-1;margin:0;max-width:none}
body[data-page=index] .foundation-tools{grid-column:1;grid-row:4;width:auto;min-width:0;margin:0;gap:8px}
body[data-page=index] .foundation-example{position:relative;grid-column:2;grid-row:4;inset:auto;width:100%;max-width:100%;height:200px;box-sizing:border-box;align-self:center;margin:0;transform:none}
body[data-page=index] .foundation-example-title b{font-size:19px}
body[data-page=index] .foundation-explore{grid-column:1/-1;justify-self:start;max-width:100%;box-sizing:border-box;white-space:normal;overflow-wrap:anywhere;text-align:center;margin:6px 0 0;height:auto;padding:13px 20px}
@media(max-width:1050px) and (min-width:801px){body[data-page=index] .foundation-panel{grid-template-columns:minmax(0,1fr);gap:16px}body[data-page=index] .foundation-tools{grid-column:1;grid-row:auto}body[data-page=index] .foundation-example{grid-column:1;grid-row:auto;width:120px;justify-self:center}body[data-page=index] .foundation-explore{grid-column:1}}
@media(max-width:480px){body[data-page=index] .foundation-panel{grid-template-columns:minmax(0,1fr);gap:16px}body[data-page=index] .foundation-tools{grid-column:1;grid-row:auto;width:auto}body[data-page=index] .foundation-example{grid-column:1;grid-row:auto;width:130px;justify-self:center}body .five-foundations .foundation-piece>span{display:none}body .five-foundations .foundation-piece strong{font-size:3cqw}}

/* Stone faces carry only their icon and name; the panel holds the explanation. */
body .five-foundations .foundation-piece>span{display:none}
body .five-foundations .foundation-piece{width:22%;gap:5px;gap:1cqw;overflow:visible}
body .five-foundations .foundation-piece strong{display:block;box-sizing:border-box;width:100%;min-width:0;font-size:2.65cqw;line-height:1.12;white-space:normal;text-wrap:balance}
body .five-foundations .foundation-piece-recovery{left:50%;top:22%}
body .five-foundations .foundation-piece-today{left:21%;top:36%}
body .five-foundations .foundation-piece-mental{left:79%;top:36%}
body .five-foundations .foundation-piece-rebuild{left:31%;top:63%}
body .five-foundations .foundation-piece-active{left:71%;top:63%}

/* Keep names legible and stone controls touchable at narrow widths. */
body .five-foundations .foundation-piece{min-height:44px}
body .five-foundations .foundation-piece strong{font-size:clamp(11px,2.65cqw,14px)}
body .five-foundations .foundation-piece svg{width:clamp(18px,4cqw,24px);height:clamp(18px,4cqw,24px)}