/* Kernel collection: a readable opening and an explicit relation, within this surface. */
body[data-surface="kernels"] .kernel-collection-hero-layout{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);align-items:center;gap:clamp(2rem,5vw,5rem);padding-block:clamp(2.5rem,5vw,5rem)}
.kernel-collection-copy h1{margin-top:.65rem;max-width:20ch}
.kernel-collection-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.kernel-collection-actions .button{max-width:100%;white-space:normal}
.kernel-collection-visual{margin:0;padding:clamp(.75rem,2vw,1.5rem);background:#fffdf5;border:1px solid #a3bab2;border-radius:1rem;box-shadow:8px 8px 0 #82b5a84a}
.kernel-collection-visual img{display:block;width:100%;height:auto}
.kernel-collection-visual figcaption{font-size:.95rem;line-height:1.6;color:#365a60;margin:.5rem .5rem .2rem;max-width:50ch}
body[data-surface="kernels"] #catalogue h2{max-width:28ch;margin-top:0;margin-bottom:1.5rem}
@media(max-width:850px){body[data-surface="kernels"] .kernel-collection-hero-layout{grid-template-columns:1fr;padding-block:2.5rem;gap:2rem}.kernel-collection-visual{width:min(100%,34rem);box-sizing:border-box;justify-self:center}}
@media(forced-colors:active){.kernel-collection-visual{border-color:CanvasText;background:Canvas;box-shadow:none}.kernel-collection-visual figcaption{color:CanvasText}}