/* /skills, from Cornet's approved draft (drafts/skills/), greybox bones. Header, footer and fonts are the site's shared parts, so their rules are left out. */
:root{--g0:#fff; --g1:#f1f1f1; --g2:#d9d9d9; --g3:#8a8a8a; --g4:#2b2b2b; --w:44rem; --pad:1.25rem;}
*{box-sizing:border-box;}
a{color:inherit;}

nav ul{list-style:none; margin:0; padding:0; display:flex; gap:1.25rem;}
nav a{display:block; padding:.5rem .25rem; text-decoration:none;}
nav a[aria-current]{border-bottom:3px solid var(--g4);}
@media (min-width:48rem){nav a{padding:.25rem 0;}}
main{max-width:var(--w); margin:0 auto; padding:2rem var(--pad) 3rem;}
h1{font-size:2rem; line-height:1.2; margin:0 0 .75rem;}
.lede{font-size:1.15rem; margin:0 0 .75rem;}
.byline{color:var(--g3); margin:0 0 1.5rem;}
.hero{height:14rem; background:var(--g1); border:2px dashed var(--g3); display:grid; place-items:center; color:var(--g3); margin:0 0 1.5rem;}
.last-ask{background:var(--g1); border-top:2px solid var(--g4); border-bottom:2px solid var(--g4); padding:2.5rem 0;}
.last-ask > div{max-width:var(--w); margin:0 auto; padding:0 var(--pad);}
.last-ask h2{margin:0 0 .5rem; font-size:1.5rem; line-height:1.25;}
.last-ask p{margin:0 0 1rem;}
.actions{display:flex; flex-wrap:wrap; gap:.75rem;}
.btn{display:inline-block; padding:.7rem 1.1rem; border:2px solid var(--g4); text-decoration:none; font-weight:600; min-height:2.75rem;}
.btn.primary{background:var(--g4); color:var(--g0);}
code{background:var(--g1); padding:0 .25rem;}
.dir{max-width: 72rem;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.dir .head{margin-bottom: 1.5rem;}
.dir h1{font-size: 2.5rem; margin-bottom: .5rem;}
.dir .lede{max-width: 40rem;}
.search{display:flex; align-items:center; gap:1rem; border:2px solid var(--g4); padding:0 1rem; margin-top:1.25rem;}
.search input{flex:1; font:inherit; font-size:1.1rem; padding:.7rem 0; border:0; background:transparent; color:var(--g4); outline:0;}
.search input::placeholder{color:var(--g3);}
.count{color:var(--g3); white-space:nowrap;}
.group{font-size:1rem; letter-spacing:0; margin:2rem 0 .25rem; color:var(--g4); display:flex; gap:.5rem; align-items:baseline;}
.group span{color:var(--g3); font-weight:400;}
.jobs{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:1.5rem 0 .5rem;}
.job{display:flex; align-items:center; gap:1rem; padding:.9rem 1rem; border:1px solid var(--g2); text-decoration:none; background:linear-gradient(90deg,var(--g1),var(--g0));}
.job:hover{border-color:var(--g4);}
.icon{display:grid; place-items:center; flex:none; width:4rem; height:4rem; background:var(--g2); border:2px dashed var(--g3); color:var(--g3); font-size:.7rem; line-height:1.2; text-align:center;}
.icon.sm{width:2.5rem; height:2.5rem; font-size:.65rem;}
.job-name{font-weight:700; font-size:1.05rem;}
.job-count{margin-left:auto; color:var(--g3);}
.group{font-size:1.1rem; margin:2.25rem 0 .75rem; color:var(--g4); display:flex; gap:.75rem; align-items:center;}
.group .n{color:var(--g3); font-weight:400;}
.row{position:relative; display:grid; grid-template-columns:17rem minmax(0,1fr); gap:1.75rem; padding:1.25rem 0; border-top:1px solid var(--g2);}
.row:hover{background:var(--g1);}
.row-link{position:absolute; inset:0;}
.row-main > *{position:relative;}
.pic{position:relative; margin:0; height:10.625rem; background:var(--g2); border:2px dashed var(--g3); display:grid; place-items:center; text-align:center; color:var(--g3); font-size:.8rem;}
.pic::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 55%,var(--g0));}
.row:hover .pic::after{background:linear-gradient(90deg,transparent 55%,var(--g1));}
.fail{font-size:1.4rem; line-height:1.3; font-weight:600; margin:0 0 .35rem; text-wrap:balance;}
.row h3{font-size:1.05rem; line-height:1.25; margin:0 0 .35rem; text-wrap:balance;}
.row h3 a{text-decoration:none;}
.does{margin:0 0 .6rem; color:var(--g3);}
.meta{margin:.5rem 0 0; font-size:.85rem; color:var(--g3);}
.meta code{font-family:ui-monospace,monospace;}
.block{margin:0; background:var(--g1); border:1px solid var(--g2); padding:.6rem .8rem; font:.78rem/1.5 ui-monospace,monospace; color:var(--g4);}
.block span{display:block; white-space:pre; overflow:hidden; text-overflow:ellipsis;}
.ph{color:var(--g3);}
.ph .fail, .ph h3, .ph .does{color:var(--g3);}
.plates{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; margin-top:1.5rem;}
.plate-job{display:flex; align-items:center; gap:.6rem; margin:0; font-weight:700;}
.plate{min-width:0; position:relative; display:flex; flex-direction:column; gap:.4rem; padding-bottom:1rem;}
.plate > *{position:relative;}
.pic.wide{height:14rem; margin-bottom:.4rem;}
.plate .fail{font-size:1.2rem;}
.poster{display:grid; grid-template-columns:26rem minmax(0,1fr); gap:2rem; padding:1.5rem 0; border-top:2px solid var(--g4);}
.pic.big{height:18.75rem;}
.poster-body .group{margin-top:0; font-size:1.5rem;}
.cline{position:relative; display:grid; grid-template-columns:6rem minmax(0,1fr); gap:1rem; padding:.9rem 0; border-top:1px solid var(--g2);}
.cline > *{position:relative;}
.cline .row-link{position:absolute;}
.pic.thumb{height:6rem; font-size:.7rem;}
.cline .fail{font-size:1.2rem;}
.plate h3, .plate .fail, .plate .does, .plate .meta{margin:0;}
.rest{max-width:80rem; padding:5rem 2rem 2rem;}
.rest .head{margin-bottom:4rem;}
.rest h1{font-size:3.5rem; margin-bottom:1rem;}
.rest .lede{font-size:1.4rem; max-width:34rem;}
.rest .search{border:0; border-bottom:1px solid var(--g2); max-width:22rem; margin-top:2rem;}
.rest .search input{font-size:1rem;}
.scene{position:relative; display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:5rem; align-items:center; min-height:34rem; padding:4rem 0;}
.scene > *{position:relative;}
.scene .row-link{position:absolute;}
.sheet{position:relative; margin:0; height:26rem; padding:2.25rem 2.5rem; background:var(--g1); border:1px solid var(--g2); overflow:hidden; font:.6rem/1.7 ui-monospace,monospace; color:var(--g3);}
.sheet span{display:block; white-space:pre; overflow:hidden; text-overflow:ellipsis;}
.sheet::after{content:""; position:absolute; left:0; right:0; bottom:0; height:9rem; background:linear-gradient(transparent,var(--g0)); pointer-events:none;}
.scene-job{display:flex; align-items:center; gap:.75rem; margin:0 0 2rem; font-weight:700;}
.scene .fail{font-size:2.25rem; line-height:1.2; margin:0 0 1.5rem;}
.scene h3{font-size:1.15rem; margin:0 0 .75rem;}
.scene .does{font-size:1.1rem; margin:0 0 2rem; max-width:28rem;}
.open{margin:0; font-weight:700;}
.net-page{max-width:84rem; padding:3rem 2rem 2rem;}
.net-head h1{font-size:2.75rem; margin:0 0 .5rem;}
.net-head .lede{font-size:1.25rem; max-width:34rem; margin:0 0 1.5rem;}
.net-stage{position:relative; border-top:1px solid var(--g2); border-bottom:1px solid var(--g2);}
.net{display:block; width:100%; height:auto;}
.net line, .ego line{stroke:var(--g2); stroke-width:1.5;}
.net line.dim{stroke:var(--g1);}
.node{cursor:pointer; outline:0;}
.node circle{fill:var(--g3); stroke:none;}
.node.pub circle{fill:var(--g2); stroke:var(--g4); stroke-width:2; stroke-dasharray:5 3;}
.node .lab{font:12px system-ui,sans-serif; fill:var(--g3); opacity:0;}
.node.pub .lab{font-weight:700; fill:var(--g4); opacity:1; font-size:14px;}
.node:hover .lab, .node:focus .lab{opacity:1; fill:var(--g4);}
.node .pic{font:11px system-ui,sans-serif; fill:var(--g3);}
.node.dim{opacity:.25;}
.panel{position:absolute; top:1.5rem; right:1.5rem; width:26rem; max-height:calc(100% - 3rem); overflow:auto; background:var(--g0); border:2px solid var(--g4); padding:1.5rem;}
.panel[hidden]{display:none;}
.panel .p-job{margin:0 0 .75rem; font-weight:700;}
.panel .fail{font-size:1.5rem; line-height:1.25; font-weight:700; margin:0 0 .75rem;}
.panel h3{font-size:1rem; margin:0 0 .5rem;}
.panel .does{color:var(--g3); margin:0 0 1rem;}
.sheet{margin:0 0 1rem; padding:.75rem; background:var(--g1); border:1px solid var(--g2); font:.62rem/1.6 ui-monospace,monospace; color:var(--g3); white-space:pre; overflow:hidden;}
.panel .rel, .rel-lists p{margin:.25rem 0; font-size:.95rem;}
.dim, .dim-note{color:var(--g3);}
.hint{margin:.75rem 0 0; color:var(--g3); font-size:.9rem;}
.net-list{padding:3rem 0 2rem; max-width:44rem;}
.net-list h2{font-size:1.1rem; margin:0 0 1rem;}
.net-list ul{list-style:none; padding:0; margin:0 0 2rem;}
.net-list li{padding:.75rem 0; border-top:1px solid var(--g2);}
.net-list li code{color:var(--g3); margin-left:.5rem;}
.skill-page{max-width:80rem; padding:3rem 2rem 2rem;}
.crumb{color:var(--g3); margin:0 0 2.5rem;}
.skill-top{display:grid; grid-template-columns:minmax(0,1fr) 32rem; gap:4rem; align-items:center; margin-bottom:5rem;}
.skill-top .fail{font-size:2.25rem; line-height:1.2; font-weight:700; margin:0 0 1rem;}
.skill-top h1{font-size:1.15rem; margin:0 0 .75rem;}
.skill-top .does{font-size:1.1rem; color:var(--g3); margin:0 0 1.5rem;}
.skill-meta, .tbd{color:var(--g3); font-size:.9rem; margin:.25rem 0;}
.rel-section h2, .body-section h2{font-size:1.1rem; margin:0 0 1.5rem;}
.rel-grid{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:3rem; align-items:center; padding:2rem 0 4rem; border-top:1px solid var(--g2);}
.ego{width:100%; height:auto;}
.ego .node .lab{opacity:1; fill:var(--g4); font-size:13px;}
.skill-body{background:var(--g1); border:1px solid var(--g2); padding:1.5rem; font:.85rem/1.65 ui-monospace,monospace; white-space:pre-wrap;}
.ov{max-width:80rem; padding:5rem 2rem 2rem;}
.ov .head{margin-bottom:5rem;}
.ov h1{font-size:3.5rem; margin:0 0 1rem;}
.ov .lede{font-size:1.6rem; max-width:36rem; margin:0 0 1rem;}
.by{color:var(--g3); margin:0;}
.ov-sec{padding:4rem 0; border-top:1px solid var(--g2);}
.ov-sec h2{font-size:1.5rem; margin:0 0 1.25rem;}
.ov-p{max-width:38rem; margin:0 0 1rem; font-size:1.1rem;}
.cmd{display:inline-block; margin:1rem 0 0; padding:1.1rem 1.5rem; background:var(--g1); border:1px solid var(--g2); font:.95rem/1.8 ui-monospace,monospace;}
.cmd span{display:block;}
.cats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3.5rem 2.5rem; margin-top:2.5rem;}
.cat{display:block; text-decoration:none;}
.cat .pic{height:14rem; margin:0 0 1.1rem;}
.cat-name{display:flex; align-items:center; gap:.75rem; margin:0 0 .5rem; font-size:1.25rem; font-weight:700;}
.cat-does{margin:0 0 .5rem; color:var(--g3); max-width:24rem;}
.cat-count{margin:0; font-weight:700;}
.cat:hover .cat-name{text-decoration:underline;}
.kits{width:100%; height:auto; margin-top:2rem;}
.kits line{stroke:var(--g2); stroke-width:1.5;}
.node.kit rect{fill:var(--g1); stroke:var(--g4); stroke-width:2;}
.node.kit .lab{font:700 15px system-ui,sans-serif; fill:var(--g4); opacity:1;}
.ov-sec.two{display:grid; grid-template-columns:minmax(0,1fr) 32rem; gap:4rem; align-items:center;}
.ov-sec.two .pic{height:20rem; margin:0;}
.tbd{color:var(--g3); font-size:.95rem; max-width:38rem;}
.crumb{color:var(--g3); margin:0 0 2.5rem;}
.minis{display:flex; flex-wrap:wrap; gap:1rem;}
.mini{display:flex; align-items:center; gap:.75rem; padding:.75rem 1.25rem .75rem .75rem; border:1px solid var(--g2); text-decoration:none; font-weight:700;}
.quote{margin:0 0 2rem; font-size:1.5rem; line-height:1.35; max-width:36rem;}
.quote cite{display:block; margin-top:.6rem; font-size:.9rem; font-style:normal; color:var(--g3);}
.cats.four{grid-template-columns:repeat(4,minmax(0,1fr)); gap:3rem 2rem;}
.cat.sm .pic{height:10.6rem;}
.cat.sm .cat-name{font-size:1.1rem;}
.cat.sm .cat-does{font-size:.95rem;}
.ov .search{max-width:34rem; border:0; border-bottom:2px solid var(--g4); margin-top:2rem;}
.ov-sec.two .pic{align-self:start; position:sticky; top:2rem;}