/* /skills, from Cornet's approved draft (drafts/skills/), category cards and plates. Header, footer and fonts are the site's shared parts, so their rules are left out. */
.cat{position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:24rem; padding-bottom:0; background:var(--g1);}
.cat .pic.art{position:absolute; inset:0; height:100%; margin:0; border:0; border-radius:0; background:none;}
.cat .pic.art img{width:100%; height:100%; object-fit:cover; object-position:50% 0; display:block; -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 26%,transparent 60%), linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(to bottom,#000 0,#000 26%,transparent 60%), linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%); mask-composite:intersect;}
.cat .cat-name, .cat .cat-does, .cat .cat-count{position:relative; z-index:1;}
.cat .cat-name{padding-top:0; text-shadow:0 1px 8px var(--g1);}
.pair{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem; margin-top:2rem;}
.pair > .ov-sec{border:1px solid color-mix(in oklab, var(--cyan) 38%, var(--g2)); border-radius:8px; background:var(--g1); padding:2rem; position:relative; overflow:hidden; display:block; box-shadow:0 0 14px color-mix(in oklab, var(--cyan) 10%, transparent);}
.pair > .ov-sec > *{position:relative; z-index:1;}
.pair > .ov-sec .pic.art{position:absolute; z-index:0; right:0; bottom:0; width:62%; height:72%; aspect-ratio:auto; border:0; border-radius:0; background:none; margin:0;}
.pair > .ov-sec .pic.art img{width:100%; height:100%; object-fit:cover; opacity:.6; -webkit-mask-image:linear-gradient(to left,#000 0,transparent 92%), linear-gradient(to top,#000 0,transparent 92%); -webkit-mask-composite:source-in; mask-image:linear-gradient(to left,#000 0,transparent 92%), linear-gradient(to top,#000 0,transparent 92%); mask-composite:intersect;}
.pair > .ov-sec h2{margin-top:0;}
.pair > .ov-sec .ov-p{max-width:none;}
.pair > .ov-sec .quote{font-size:1.15rem;}
.pair .map{background:linear-gradient(90deg,var(--g1) 28%,color-mix(in oklab, var(--g1) 50%,transparent) 62%,transparent), url(/skills/img/map.svg) right center/auto 100% no-repeat, var(--g1); min-height:15rem;}
.pair .map .maptile{background:none; border:0; box-shadow:none; max-width:none; margin-top:1rem;}
.pair .map .maptile img{display:none;}
.pair .map .maptile span{padding:0;}
.cat{background:#272E39;}
.cat .pic.art img, .pair .pic.art img, .hero-art img{image-rendering:pixelated;}
.cat .pic.art img{object-fit:cover; object-position:50% 0;}
.pair > .ov-sec{background:#1B2430;}
.pair > .ov-sec .pic.art{left:0; right:0; bottom:0; width:100%; height:auto; aspect-ratio:4/1;}
.pair > .ov-sec .pic.art img{opacity:1; object-fit:cover; object-position:100% 100%; -webkit-mask-image:linear-gradient(to top,#000 0,#000 70%,transparent 100%); mask-image:linear-gradient(to top,#000 0,#000 70%,transparent 100%);}
.pair .map{background:#1B2430; min-height:15rem;}
.pair .map .maptile img{display:none;}
.hero-art{background:#272E39; border:0; box-shadow:none; height:22rem; border-radius:10px;}
.hero-art img{object-fit:contain; object-position:50% 50%;}
main.ov{background:#272E39; border:1px solid color-mix(in oklab, var(--cyan) 38%, var(--g2)); border-radius:14px; margin:1.5rem auto 2rem; padding:3rem 3rem 2rem; max-width:84rem; box-shadow:0 0 0 6px #232B36, 0 0 40px color-mix(in oklab, var(--cyan) 10%, transparent);}
main.ov .ov-sec{border-top:0; padding:2rem 0;}
.pair{margin-top:0;}
.pair > .ov-sec{padding:2rem;}
.pair > .ov-sec.two .pic.art{position:absolute; top:auto; align-self:auto;}
.ov-sec.two.card .pic.art{position:absolute;}
.cats{grid-template-columns:repeat(6,minmax(0,1fr)); gap:1.5rem;}
.cats .cat{grid-column:span 2;}
.cats .cat:nth-child(n+4){grid-column:span 3; min-height:19rem; justify-content:center;}
.cats .cat:nth-child(n+4) .pic.art{left:auto; right:0; width:58%;}
.cats .cat:nth-child(n+4) .pic.art img{object-position:50% 20%; -webkit-mask-image:linear-gradient(to right,transparent 0,#000 38%), linear-gradient(to bottom,#000 70%,transparent 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(to right,transparent 0,#000 38%), linear-gradient(to bottom,#000 70%,transparent 100%); mask-composite:intersect;}
.cats .cat:nth-child(n+4) .cat-name, .cats .cat:nth-child(n+4) .cat-does, .cats .cat:nth-child(n+4) .cat-count{max-width:42%;}
.cats .cat:nth-child(n+4) .cat-name{padding-top:1.25rem;}
.cats .cat:nth-child(n+4) .cat-count{padding-bottom:1.25rem;}
main.ov .pair > .ov-sec{padding:2rem 2.25rem;}
.pair + .pair{margin-top:1.5rem;}
.ov-sec[data-section="categories"]{padding-bottom:1.5rem;}
.pair > .ov-sec[data-section="plugin"] .pic.art{top:0; bottom:auto;}
.pair > .ov-sec[data-section="plugin"] .pic.art img{object-position:100% 0; -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 70%,transparent 100%); mask-image:linear-gradient(to bottom,#000 0,#000 70%,transparent 100%);}
.pair > .ov-sec[data-section="plugin"] .ov-p:first-of-type{max-width:58%;}
.pair > .ov-sec[data-section="plugin"] .cmd{margin-top:1.5rem;}
main.ov .cat{display:block; min-height:0; padding:0 0 1.35rem; background:#272E39;}
main.ov .cat .pic.art{position:relative; inset:auto; width:100%; height:auto; aspect-ratio:16/9; margin:0 0 .9rem; border:0; border-radius:0; background:none;}
main.ov .cat .pic.art img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 4%; -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 78%,transparent 100%); mask-image:linear-gradient(to bottom,#000 0,#000 78%,transparent 100%); -webkit-mask-composite:source-over; mask-composite:add;}
main.ov .cat .cat-name{padding:0 1.35rem; margin:0 0 .35rem; text-shadow:none;}
main.ov .cat .cat-does{padding:0 1.35rem; margin:0 0 .6rem;}
main.ov .cat .cat-count{padding:0 1.35rem;}
main.ov .cats .cat:nth-child(n+4){grid-column:span 3; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:center; padding:0; min-height:17rem;}
main.ov .cats .cat:nth-child(n+4) .pic.art{grid-column:2; grid-row:1 / span 3; position:relative; width:100%; height:100%; aspect-ratio:auto; margin:0;}
main.ov .cats .cat:nth-child(n+4) .pic.art img{object-fit:cover; object-position:50% 30%; -webkit-mask-image:linear-gradient(to right,transparent 0,#000 22%); mask-image:linear-gradient(to right,transparent 0,#000 22%);}
main.ov .cats .cat:nth-child(n+4) .cat-name, main.ov .cats .cat:nth-child(n+4) .cat-does, main.ov .cats .cat:nth-child(n+4) .cat-count{grid-column:1; max-width:none;}
main.ov .cats .cat:nth-child(n+4) .cat-name{padding-top:0;}
main.ov .cats .cat:nth-child(n+4) .cat-count{padding-bottom:0;}
main.ov .pair > .ov-sec{display:flex; flex-direction:column; padding:2rem 2.25rem 0;}
main.ov .pair > .ov-sec .pic.art, main.ov .pair > .ov-sec[data-section="plugin"] .pic.art{position:relative; top:auto; left:auto; right:auto; bottom:auto; order:9; width:calc(100% + 4.5rem); height:auto; aspect-ratio:4/1; margin:auto -2.25rem 0;}
main.ov .pair > .ov-sec .pic.art img{position:static; width:100%; height:100%; opacity:1; object-fit:cover; object-position:100% 100%; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 40%); mask-image:linear-gradient(to bottom,transparent 0,#000 40%);}
main.ov .pair > .ov-sec[data-section="plugin"] .ov-p:first-of-type{max-width:none;}
main.ov .pair > .ov-sec .ov-p{margin-bottom:1rem;}
main.ov .pair .map{min-height:0;}
.stack{display:grid; gap:1.5rem; margin-top:1.5rem;}
main.ov .stack > .ov-sec{border:1px solid color-mix(in oklab, var(--cyan) 38%, var(--g2)); border-radius:8px; background:#1B2430; padding:2rem 2.25rem; position:relative; overflow:hidden; display:block;}
.how-bento h2{margin-top:0;}
.how-bento .pic.art.band{position:relative; width:calc(100% + 4.5rem); margin:.25rem -2.25rem 1.5rem; height:auto; aspect-ratio:4/1; right:auto; bottom:auto;}
.how-bento .pic.art.band img{position:static; width:100%; height:100%; object-fit:cover; object-position:100% 60%; opacity:1; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30%,#000 70%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 30%,#000 70%,transparent 100%);}
.bento{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem;}
.bcell{background:#222B37; border:1px solid var(--g2); border-radius:6px; padding:1.25rem 1.4rem;}
.bcell p{margin:0; font-size:1rem; line-height:1.6;}
.bcell:nth-child(1), .bcell:nth-child(4){background:#202833;}
main.ov .stack > .ov-sec[data-section="why"]{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:2rem; align-items:center; padding:2rem 0 2rem 2.25rem;}
main.ov .stack > .ov-sec[data-section="why"] .pic.art{position:relative; width:100%; height:100%; min-height:15rem; aspect-ratio:auto; right:auto; bottom:auto;}
main.ov .stack > .ov-sec[data-section="why"] .pic.art img{object-fit:cover; object-position:100% 50%; opacity:1; -webkit-mask-image:linear-gradient(to right,transparent 0,#000 30%); mask-image:linear-gradient(to right,transparent 0,#000 30%);}
main.ov .pic.art{background:none !important; border:0 !important; border-radius:0;}
main.ov .cats .cat:nth-child(n+4){align-content:center; row-gap:.35rem;}
main.ov .stack > .ov-sec[data-section="why"] .pic.art{border-radius:0;}
main.ov .pair > .ov-sec .pic.art, main.ov .pair > .ov-sec[data-section="plugin"] .pic.art{aspect-ratio:auto; height:13.5rem; margin:auto -2.25rem 0;}
main.ov .pair > .ov-sec .pic.art img{height:100%; object-fit:contain; object-position:100% 100%; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%), linear-gradient(to right,transparent 0,#000 14%); -webkit-mask-composite:source-in; mask-image:linear-gradient(to bottom,transparent 0,#000 18%), linear-gradient(to right,transparent 0,#000 14%); mask-composite:intersect;}
.how-bento .pic.art.band{aspect-ratio:auto; height:16rem; margin:.25rem -2.25rem 1.5rem; width:calc(100% + 4.5rem);}
.how-bento .pic.art.band img{height:16rem; max-height:16rem; object-fit:contain; object-position:50% 50%; -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 55%,transparent 100%); mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 55%,transparent 100%);}
main.ov .stack > .ov-sec[data-section="why"] .pic.art img{object-fit:contain; object-position:50% 50%; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%), linear-gradient(to right,transparent 0,#000 16%,#000 90%,transparent 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%), linear-gradient(to right,transparent 0,#000 16%,#000 90%,transparent 100%); mask-composite:intersect;}
main.ov .pair > .ov-sec, main.ov .stack > .ov-sec{background:#1C2431;}