/* The Pyramid in Practice. Drawn in the site's own style; block names only. */
.py-intro { margin: 16px 0 0; max-width: 62ch; font-size: 1.1rem; }
.py-wrap { margin-top: 32px; display: grid; gap: 6px; justify-items: center; }
.py-row { display: grid; gap: 6px; width: 100%; }
.py-row[data-n="1"] { grid-template-columns: 1fr; max-width: 20%; }
.py-row[data-n="2"] { grid-template-columns: repeat(2, 1fr); max-width: 40%; }
.py-row[data-n="3"] { grid-template-columns: repeat(3, 1fr); max-width: 60%; }
.py-row[data-n="4"] { grid-template-columns: repeat(4, 1fr); max-width: 80%; }
.py-row[data-n="5"] { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 640px) {
  .py-row[data-n="1"] { max-width: 44%; } .py-row[data-n="2"] { max-width: 60%; }
  .py-row[data-n="3"] { max-width: 76%; } .py-row[data-n="4"] { max-width: 90%; }
}
.py-block { font: 600 clamp(.6rem, 1.6vw, .95rem)/1.2 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif; min-height: 56px; padding: 8px 4px; border: 1px solid #E1E5EB; background: #F5F6F8; color: #8A929E; hyphens: auto; -webkit-hyphens: auto; text-align: center; cursor: default; display: grid; place-items: center; }
.py-block.has { background: #0A192F; color: #FFFFFF; border-color: #0A192F; cursor: pointer; box-shadow: 0 3px 0 0 #D4AF37; transition: transform .12s ease, box-shadow .12s ease; }
@media (hover: hover) and (pointer: fine) { .py-block.has:hover { transform: translateY(-1px); } }
.py-block.has[aria-pressed="true"] { background: #D4AF37; color: #0A192F; border-color: #D4AF37; box-shadow: 0 3px 0 0 #8C6D1F; }
.py-key { margin: 14px 0 0; font-size: .85rem; color: var(--text-soft); text-align: center; }
.py-story { margin-top: 28px; border-top: 2px solid var(--ink); padding-top: 22px; display: grid; gap: 12px; max-width: 68ch; }
.py-story h3 { font-family: 'Newsreader', Georgia, serif; font-weight: 500; font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0; }
.py-story p { margin: 0; font-size: 1.12rem; line-height: 1.7; }
.py-story .py-first { font-family: 'Newsreader', Georgia, serif; font-size: clamp(1.25rem, 2.6vw, 1.5rem); line-height: 1.4; color: var(--ink); }
.py-share { justify-self: start; margin-top: 6px; font: 600 .95rem/1 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif; padding: 11px 16px; border: 1px solid #B8962E; background: #FFFFFF; color: var(--ink); cursor: pointer; box-shadow: 0 3px 0 0 rgba(212,175,55,.45); }
.py-share:active { transform: translateY(3px); box-shadow: none; }