*{box-sizing:border-box}body{margin:0;background:#f6f3ed;color:#24221f;font:1rem/1.65 system-ui,sans-serif}header,main,footer{width:min(1320px,calc(100% - 40px));margin:auto}header{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;padding:24px 0;border-bottom:1px solid #bbb5aa}a{color:inherit;text-underline-offset:.25em}header a,footer a{min-height:44px;display:inline-flex;align-items:center}.intro{max-width:800px;padding:55px 0 40px}h1{font-size:clamp(2.1rem,5vw,4rem);line-height:1.05;letter-spacing:-.05em;margin:15px 0 25px}p{margin:0 0 18px}.label{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700}.note{color:#635c52;font-size:.9rem}.collection{display:grid;gap:35px}.collection article{min-width:0}.preview{display:block;background:#e4ded4;overflow:hidden;border:1px solid #c5bcb0;margin-bottom:22px}.preview img{display:block;width:100%;height:auto}.collection h2{font-size:1.8rem;line-height:1.2;margin:10px 0 15px}.collection h2 a{display:flex;justify-content:space-between;gap:10px;text-decoration:none}.collection p{max-width:45ch}.collection h2 a:hover{text-decoration:underline}footer{border-top:1px solid #bbb5aa;margin-top:60px;padding-block:25px}.skip{position:fixed;top:-100px;left:10px;padding:15px;background:#fff;z-index:20}.skip:focus{top:10px}a:focus-visible{outline:3px solid #245ec3;outline-offset:5px}h1,h2,p,a{overflow-wrap:anywhere}@media(min-width:60rem){.collection{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Collection finish, 4 October 2026: the individual examples retain their own styles. */
body { background: radial-gradient(ellipse at 15% 0%, #fffdf9 0%, transparent 52%), linear-gradient(140deg, #f6f3ed, #edeff4); }
.preview { border-radius: 1rem; box-shadow: 0 10px 24px -18px #252c4566; }
.collection article { padding: 1rem; border: 1px solid #d5d1c9; border-radius: 1.2rem; background: #fffcf8; box-shadow: inset 0 1px 0 white; }
.collection article:focus-within { border-color: #245ec3; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .preview,.preview img { transition: transform 180ms ease-out, box-shadow 180ms ease-out; }
  .preview:hover { transform: translateY(-3px); box-shadow: 0 15px 28px -18px #252c4577; }
  .preview:hover img { transform: scale(1.015); }
  .preview:active { transform: translateY(1px); }
}