/* OLY-2706: the static, crawlable pin pages (site/p/<id>.html). Plain, readable, light/dark by the shared appearance panel. */
:root { --pp-bg:#fff; --pp-fg:#1b1f24; --pp-mut:#5b6672; --pp-line:#d0d7de; --pp-acc:#1f5fbf; }
@media (prefers-color-scheme: dark) { :root { --pp-bg:#0b0e13; --pp-fg:#e6edf3; --pp-mut:#9aa7b4; --pp-line:#2d353e; --pp-acc:#6aa6ff; } }
body.pinpage { margin:0; background:var(--pp-bg); color:var(--pp-fg); font:16px/1.6 system-ui,sans-serif; }
.pinpage .wrap { max-width:42rem; margin:0 auto; padding:24px 16px 48px; }
.pinpage a { color:var(--pp-acc); }
.pinpage h1 { margin:.4em 0 .3em; font-size:1.9rem; line-height:1.2; }
.pinpage h2 { margin:1.6em 0 .4em; font-size:1.1rem; text-transform:uppercase; letter-spacing:.06em; color:var(--pp-mut); }
.pinpage .lead { font-size:1.05rem; }
.pinpage ul { padding-left:1.2em; }
.pinpage li { margin:.5em 0; }
.pinpage .grade { display:inline-block; padding:0 .55em; border:1px solid var(--pp-line); border-radius:1em; font-size:.8rem; color:var(--pp-mut); }
.pinpage .note, .pinpage .small { color:var(--pp-mut); font-size:.9rem; }
.pinpage .open { display:inline-block; margin-top:1em; padding:.5em 1em; border:1px solid var(--pp-acc); border-radius:6px; text-decoration:none; }
.pinpage .sources li { overflow-wrap:anywhere; }