/* CPP room behind the laptop: a short lead and the programmes as little paper tags. */
.cpp-room .room-body{max-width:980px}
.cpp-lead{margin:0 0 26px;font:calc(17px + 2pt)/1.8 Georgia,'Yu Mincho',serif;color:#4b372b}
.cpp-lead small{margin-left:.4em;font:calc(11px + 2pt) Arial,'Yu Gothic',sans-serif;letter-spacing:1px;color:#7a5b46}
.cpp-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px 14px;margin:0;padding:0;list-style:none}
.cpp-list li{position:relative;padding:12px 14px 12px 34px;border:1px solid #fffaf0c9;border-radius:14px 16px 15px 13px;background:#fffaf0a8;box-shadow:0 3px 10px #4a2f1d14;font:calc(13px + 2pt) Georgia,serif;color:#4b372b;transition:transform .25s,box-shadow .25s}
.cpp-list li:before{content:'✦';position:absolute;left:14px;top:50%;translate:0 -52%;font-size:.8em;color:#567985}
.cpp-list li:nth-child(4n+2):before{color:#9f5960}.cpp-list li:nth-child(4n+3):before{color:#86621f}.cpp-list li:nth-child(4n):before{color:#52695b}
.cpp-list li:nth-child(odd){rotate:-.6deg}.cpp-list li:nth-child(even){rotate:.5deg}
.cpp-list li:hover{transform:translateY(-2px);box-shadow:0 6px 14px #4a2f1d22}
/* The dock gained a seventh button for CPP; tighten it so all seven fit on a phone. */
@media(max-width:759px){.cafe-dock{gap:0;padding:6px 4px}.cafe-dock button{padding:8px 4px}.cpp-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.cpp-list li{padding:10px 10px 10px 28px}.cpp-list li:before{left:11px}}
@media(prefers-reduced-motion:reduce){.cpp-list li{transition:none}}