/* Toolbox, Reference and Writing in the shape of /skills (Cornet's greyboxes, drafts/doors-shape). Builds on skills-base/brand/cards.
   Words sit on gradients over the pictures, not in boxes. */
.dcards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1.25rem;margin-top:1.25rem}
.dcard{grid-column:span 2;display:flex;flex-direction:column;border:1px solid var(--g2);border-radius:8px;background:var(--g1);overflow:hidden;text-decoration:none;color:inherit;position:relative}
.dcard.w3{grid-column:span 3}
a.dcard:hover{border-color:var(--cyan)}
.dcard .dpic{margin:0;aspect-ratio:16/10;display:flex;align-items:flex-end;justify-content:center;padding:.75rem .75rem 0;background:radial-gradient(ellipse at 50% 80%,color-mix(in oklab,var(--cyan) 14%,var(--g1)),var(--g1) 70%)}
.dcard .dpic img{max-width:100%;max-height:100%;object-fit:contain;image-rendering:pixelated;display:block}
.dcard .cat-name{padding-top:1rem}
.dcard .cat-count{margin-top:auto;padding-top:.5rem}
.dpanel>h2,.dover h2{margin-bottom:.4rem}
.dtiles{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:.75rem;margin-top:1rem}
.dtile{grid-column:var(--c,span 4);position:relative;overflow:hidden;border-radius:8px;border:1px solid var(--g2);height:18rem;display:flex;align-items:flex-end}
.dtile .dpic,.dover .dpic{position:absolute;inset:0;margin:0}
.dtile .dpic img,.dover .dpic img{width:100%;height:100%;object-fit:cover;display:block;image-rendering:pixelated}
.dtile::after,.dover::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgb(10 14 22/.88),rgb(10 14 22/.45) 38%,transparent 62%);pointer-events:none}
.dtile .dwords{position:relative;z-index:1;padding:.9rem 1rem}
.dtile h3{margin:0 0 .25rem;font-size:1.1rem;color:var(--g4);text-shadow:0 1px 8px #000}
.dtile p{margin:0;font-size:.9rem;color:var(--nord-text);text-shadow:0 1px 6px #000}
.dover{position:relative;overflow:hidden;min-height:15rem;border-radius:8px;border:1px solid var(--g2);display:flex;align-items:flex-end}
.dover::after{background:linear-gradient(to right,rgb(10 14 22/.88),rgb(10 14 22/.4) 45%,transparent 70%)}
.dover .dwords{position:relative;z-index:1;padding:1.5rem;max-width:30rem}
.dover p{margin:.25rem 0;color:var(--nord-text)}
.dlinks{display:flex;gap:1rem;margin-top:.75rem;font-family:var(--mono)}
.dsplit .pic.art img{image-rendering:pixelated}
@media(max-width:720px){
  .dcards{grid-template-columns:1fr}.dcard,.dcard.w3{grid-column:auto}
  .dtiles{grid-template-columns:1fr}.dtile{grid-column:auto}
  .dtile:first-child,.dtile:last-child{grid-column:1/-1}
}
.ov .head.intro .hero-text{max-width:46%}
.ov .head.intro h1{font-size:clamp(1.7rem,3.6vw,3rem);line-height:1.1}
.ov .head.intro .lede{font-size:clamp(1rem,1.6vw,1.35rem)}
.dcard.w3 .dpic{aspect-ratio:16/8}
@media(max-width:720px){.ov .head.intro{aspect-ratio:auto;min-height:26rem}.ov .head.intro .hero-text{max-width:100%;padding:1.5rem}.ov .head.intro .hero-art img{object-position:70% 50%}}
.dtile[style*='span 12']{height:24rem}
@media(max-width:720px){.dtile,.dtile[style*='span 12']{height:14rem}.dtile:first-child{height:18rem}}