/* /skills, from Cornet's approved draft (drafts/skills/), Nord brand dress. Header, footer and fonts are the site's shared parts, so their rules are left out. */
:root{--g0:#2E3440; --g1:#3B4252; --g2:#434C5E; --g3:color-mix(in oklab, #D8DEE9 68%, #2E3440); --g4:#ECEFF4; --nord-text:#D8DEE9; --cyan:#88C0D0; --blue:#81A1C1; --green:#A3BE8C; --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; color-scheme:dark;}
a{color:var(--cyan);}
h1,h2,h3,.cat-name,.fail,.p-job,.crumb,.count{font-family:var(--mono);}
h1,h2,h3{color:var(--g4);}
nav a{color:var(--nord-text); font-family:var(--mono); font-size:.95rem;}
nav a[aria-current]{color:var(--g4); border-bottom:2px solid var(--cyan);}
.ov{max-width:80rem;}
.intro{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:3rem; align-items:center; margin-bottom:2rem;}
.intro h1{font-size:4.25rem; color:var(--cyan); text-shadow:0 0 28px color-mix(in oklab, var(--cyan) 45%, transparent); margin:0 0 1rem; letter-spacing:-.01em;}
.intro .lede{font:500 1.55rem/1.4 var(--mono); color:var(--g4); max-width:30rem;}
.by{font-family:var(--mono); font-size:.9rem; color:var(--g3);}
.hero-art{margin:0; border:1px solid var(--g2); border-radius:8px; overflow:hidden; background:var(--g1); height:21rem;}
.hero-art img{width:100%; height:100%; object-fit:cover; object-position:50% 38%; display:block;}
.ov-sec{border-top:1px solid var(--g2);}
.ov-sec h2{font-size:1.5rem;}
.ov-p, .quote{color:var(--nord-text);}
.tbd{color:var(--g3);}
.icon{display:none;}
.cats{gap:2rem;}
.cat{background:var(--g1); border:1px solid var(--g2); border-radius:8px; overflow:hidden; transition:border-color .15s;}
.cat:hover{border-color:var(--cyan);}
.cat .pic{margin:0; height:12rem; border:0; border-radius:0; border-bottom:1px solid var(--g2);}
.pic.art{background:var(--g1); overflow:hidden; border:1px solid var(--g2); border-radius:8px;}
.cat .pic.art{border:0; border-bottom:1px solid var(--g2); border-radius:0;}
.pic.art::after{display:none;}
.pic.art img{width:100%; height:100%; object-fit:cover; display:block;}
.cat-name{padding:1.1rem 1.25rem 0; margin:0 0 .4rem; font-size:1.25rem; color:var(--g4);}
.cat-does{padding:0 1.25rem; color:var(--nord-text);}
.cat-count{padding:0 1.25rem 1.25rem; font-family:var(--mono); color:var(--cyan); font-weight:500;}
.cat:hover .cat-name{text-decoration:none; color:var(--cyan);}
.cmd{background:var(--g0); border:1px solid var(--g2); border-radius:6px; color:var(--cyan); font-family:var(--mono);}
.ov-sec.two .pic.art{height:auto; aspect-ratio:16/9;}
.quote{font-family:var(--mono); font-size:1.3rem; line-height:1.45; border-left:3px solid var(--cyan); padding-left:1.25rem; margin:0 0 2rem;}
.quote cite{color:var(--g3); font-family:Inter,system-ui,sans-serif;}
.kits line{stroke:var(--g2);}
.node.kit rect{fill:var(--g1); stroke:var(--cyan); stroke-width:1.5; rx:4;}
.node.kit .lab{fill:var(--g4); font-family:var(--mono); font-weight:500;}
.node.pub circle{fill:var(--g1); stroke:var(--green); stroke-dasharray:none; stroke-width:2;}
.node.pub .lab{fill:var(--nord-text); font:500 11px var(--mono);}
.crumb{color:var(--g3);}
.crumb a{color:var(--cyan);}
.plates{gap:2rem;}
.plate{background:var(--g1); border:1px solid var(--g2); border-radius:8px; padding:0 0 1.1rem; overflow:hidden;}
.plate:hover{border-color:var(--cyan);}
.plate .fail, .plate h3{padding:0 1.1rem;}
.plate .fail{color:var(--g4);}
.plate h3 a{color:var(--cyan); text-decoration:none;}
.sheet{background:var(--g0); border:0; border-bottom:1px solid var(--g2); color:var(--g3); height:11rem; margin:0 0 1rem; padding:1rem 1.1rem; font-family:var(--mono);}
.plate .sheet::after{background:linear-gradient(transparent,var(--g0));}
.scene .sheet{background:var(--g1); border:1px solid var(--g2); border-radius:8px;}
.minis .mini{background:var(--g1); border-color:var(--g2); border-radius:6px; color:var(--g4); font-family:var(--mono);}
.search{border-color:var(--cyan);}
.search input{color:var(--g4);}
.last-ask{background:var(--g1); border-color:var(--g2);}
.btn{border-color:var(--cyan); color:var(--cyan); border-radius:4px; font-family:var(--mono);}
.btn.primary{background:var(--cyan); color:var(--g0);}
.plates{margin-bottom:3rem;}
.plate .fail{font-size:1.05rem; line-height:1.4; margin:0 0 .5rem;}
.plate h3{font:500 1rem/1.4 Inter,system-ui,sans-serif; margin:0;}
.cat:hover, .plate:hover{box-shadow:0 0 0 1px var(--cyan), 0 0 22px color-mix(in oklab, var(--cyan) 28%, transparent);}
.cat, .plate, .hero-art{box-shadow:0 0 14px color-mix(in oklab, var(--cyan) 10%, transparent);}
.cat, .plate{border-color:color-mix(in oklab, var(--cyan) 38%, var(--g2));}
.maptile{display:block; margin-top:2rem; max-width:30rem; background:var(--g1); border:1px solid color-mix(in oklab, var(--cyan) 38%, var(--g2)); border-radius:8px; overflow:hidden; text-decoration:none; box-shadow:0 0 14px color-mix(in oklab, var(--cyan) 10%, transparent);}
.maptile:hover{box-shadow:0 0 0 1px var(--cyan), 0 0 22px color-mix(in oklab, var(--cyan) 28%, transparent);}
.maptile img{display:block; width:100%; height:auto;}
.maptile span{display:block; padding:.9rem 1.25rem; font-family:var(--mono); color:var(--cyan);}