/* /skills, from Cornet's approved draft (drafts/skills/), scene bands. Header, footer and fonts are the site's shared parts, so their rules are left out. */
.ov .head.intro{position:relative;display:block;min-height:0;aspect-ratio:1024/460;padding:0;overflow:hidden;border-radius:10px}
.ov .head.intro .hero-art{position:absolute;inset:0;height:auto;margin:0;border-radius:0;background:#1b2230}
.ov .head.intro .hero-art img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;image-rendering:pixelated; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 92%,transparent 100%)}
.ov .head.intro .hero-text{position:relative;z-index:1;padding:clamp(2rem,7%,5rem) 0 0 clamp(1.5rem,4%,3rem);max-width:34%}
[data-section="how"] img[src="/skills/img/how-workshop.png"]{width:100%;height:auto;max-height:none;object-fit:cover;image-rendering:pixelated}
[data-section="how"] img[src="/skills/img/how-workshop.png"]{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 85%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 85%,transparent)}
[data-section="why"]{position:relative;overflow:hidden}
[data-section="why"] img[src="/skills/img/why-swapmeet.png"]{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%;image-rendering:pixelated;z-index:0}
[data-section="why"]::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(28,36,49,.94) 0%,rgba(28,36,49,.82) 38%,rgba(28,36,49,.15) 62%,transparent 80%)}
[data-section="why"] > *:not(:has(img[src="/skills/img/why-swapmeet.png"])){position:relative;z-index:2}
[data-section="why"] :has(> img[src="/skills/img/why-swapmeet.png"]){position:static}
[data-section="how"] figure.pic.band{height:auto!important;max-height:none!important;margin-left:-2.4rem!important;margin-right:-2.4rem!important}
[data-section="how"] figure.pic.band img{height:auto!important;max-height:none!important;width:100%!important;object-fit:cover!important}
[data-section="why"] figure.pic.art{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;margin:0!important;z-index:0;-webkit-mask-image:none!important;mask-image:none!important}
[data-section="why"] figure.pic.art img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:50% 60%!important}
[data-section="why"] > *:not(figure){position:relative;z-index:2}
[data-section="why"]{min-height:30rem}
[data-section="why"] figure.pic.art img,[data-section="why"] figure.pic.art::before,[data-section="why"] figure.pic.art::after{-webkit-mask-image:none!important;mask-image:none!important}
[data-section="why"] figure.pic.art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,36,49,.95) 0%,rgba(28,36,49,.85) 40%,rgba(28,36,49,.2) 62%,transparent 80%)}
[data-section="why"] figure.pic.art{height:100%!important;min-height:100%!important;block-size:100%!important}
[data-section="how"]{position:relative}
[data-section="how"] figure.pic.band{margin-top:-5.2rem!important}
[data-section="how"] > h2,[data-section="how"] > header,[data-section="how"] > .sec-head{position:relative;z-index:2}
/* phone: one column, every picture a band above its words (Pennant, e20fb60) */
@media (max-width:720px){
  .page.ov{padding-left:.75rem!important;padding-right:.75rem!important}
  .cats{grid-template-columns:1fr!important}
  .cats > *{grid-column:auto!important}
  .cat{grid-template-columns:1fr!important}
  .cat .pic.art{position:relative!important;inset:auto!important;height:auto!important;aspect-ratio:16/9;grid-row:1}
  .pair{grid-template-columns:1fr!important}
  .pair > .ov-sec .pic.art{position:relative!important;width:100%!important;height:auto!important;aspect-ratio:2/1}
  [data-section="how"] .ov-grid,[data-section="how"] .bento,[data-section="how"] [class*="grid"]{grid-template-columns:1fr!important}
  [data-section="how"] figure.pic.band{margin:0 -1rem!important}
  .ov .head.intro{aspect-ratio:auto!important;display:flex!important;flex-direction:column}
  .ov .head.intro .hero-text{max-width:none!important;padding:1.25rem 1rem 0!important;order:0}
  .ov .head.intro .hero-art{position:relative!important;inset:auto!important;aspect-ratio:1024/460;order:1;margin-top:1rem}
  .ov .head.intro .hero-art img{object-position:62% 50%!important}
  [data-section="why"]{display:flex!important;flex-direction:column;min-height:0!important}
  [data-section="why"] figure.pic.art{position:relative!important;inset:auto!important;height:auto!important;min-height:0!important;block-size:auto!important;aspect-ratio:2/1;order:2;margin:1rem -1rem -1rem!important}
  [data-section="why"] figure.pic.art::after{display:none}
  [data-section="why"] figure.pic.art img{object-position:85% 50%!important}
}
@media (max-width:720px){
  .cats > .cat:nth-child(n+4) .pic.art{display:block!important;width:100%!important;min-height:12rem!important;order:-1}
  .cats > .cat:nth-child(n+4) .pic.art img{position:static!important;width:100%!important;height:12rem!important;object-fit:cover!important;object-position:70% 50%!important}
  .cats > .cat:nth-child(n+4){display:flex!important;flex-direction:column;text-align:left!important}
  .cats > .cat:nth-child(n+4) *{text-align:left!important;justify-content:flex-start!important}
  [data-section="how"] figure.pic.band{margin:0 -.5rem!important;max-width:calc(100% + 1rem)}
  pre{white-space:pre!important;overflow-x:auto!important;max-width:100%}
}
@media (max-width:720px){
  .cats > .cat:nth-child(n+4){align-items:stretch!important}
  [data-section="why"] figure.pic.art{display:block!important;width:auto!important;min-height:12rem!important;height:12rem!important}
  [data-section="why"] figure.pic.art img{display:block;width:100%!important;height:12rem!important;object-fit:cover!important;object-position:85% 50%!important}
}
@media (max-width:720px){[data-section="why"]::before{display:none!important}[data-section="why"] figure.pic.art{z-index:2!important}}
@media (max-width:720px){[data-section="why"] figure.pic.art{align-self:stretch!important;width:auto!important;flex:none!important;margin:1rem 0 0!important}}
/* phone: no outer card, the sections sit on the page (Mackenzie 20:01, via Pennant) */
@media (max-width:720px){.page.ov{border:0!important;background:none!important;margin:0!important;padding:0 .75rem!important;box-shadow:none!important;border-radius:0!important}}
/* phone: quotes at body size (Mackenzie 20:05: the block quotes are too big) */
@media (max-width:720px){.quote{font-size:1rem!important;line-height:1.5!important;margin-bottom:1.25rem!important}.quote cite{font-size:.85rem!important}}
/* phone: hero, How and Why use a square scene as the background behind their own words (Pennant, b05ccdd).
   The square is pinned to the section's bottom and fades into the dark ground above it; the words sit over that dark top. */
@media (max-width:720px){
  .ov .head.intro,[data-section="how"],[data-section="why"]{position:relative!important;display:block!important;overflow:hidden;aspect-ratio:auto!important;min-height:calc(100vw + 4rem)!important;padding-bottom:calc(100vw - 4rem)!important;background:#1b2230!important}
  .ov .head.intro{padding-top:0!important}
  .ov .head.intro .hero-art,[data-section="how"] figure.pic.band,[data-section="why"] figure.pic.art{position:absolute!important;inset:auto 0 0 0!important;top:auto!important;width:100%!important;height:auto!important;min-height:0!important;block-size:100vw!important;height:100vw!important;margin:0!important;max-width:none!important;z-index:0!important;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30%)!important;mask-image:linear-gradient(to bottom,transparent 0,#000 30%)!important}
  .ov .head.intro .hero-art picture,[data-section="how"] figure.pic.band picture,[data-section="why"] figure.pic.art picture{display:block;width:100%;height:100%}
  .ov .head.intro .hero-art img,[data-section="how"] figure.pic.band img,[data-section="why"] figure.pic.art img{display:block;width:100%!important;height:100%!important;object-fit:cover!important;object-position:50% 100%!important;image-rendering:pixelated;-webkit-mask-image:none!important;mask-image:none!important}
  .ov .head.intro .hero-text,[data-section="how"] > *:not(figure),[data-section="why"] > *:not(figure){position:relative;z-index:2}
  [data-section="how"] figure.pic.band{margin:0!important}
  [data-section="how"],[data-section="why"]{padding-left:1.5rem!important;padding-right:1.5rem!important}
  [data-section="how"] .bento{position:relative;z-index:2}
  [data-section="why"]::before,[data-section="why"] figure.pic.art::after{display:none!important}
}
/* phone: every category card keeps room under its count (Mackenzie 20:06) */
@media (max-width:720px){main.ov .cats .cat{padding-bottom:1.35rem!important}main.ov .cats .cat .cat-count,main.ov .cats .cat:nth-child(n+4) .cat-count{padding-bottom:0!important}}
/* "Add them to your agent" and "How they fit together": a square scene runs full-bleed to the card's bottom, its dark top behind the end of the words (Pennant, 044504e) */
.pair > .ov-sec{display:flex!important;flex-direction:column}
.pair > .ov-sec > figure.pic.art{position:relative!important;inset:auto!important;order:99;width:calc(100% + 4rem)!important;height:auto!important;aspect-ratio:1/1!important;margin:auto -2rem -2rem!important;z-index:0!important;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 28%)!important;mask-image:linear-gradient(to bottom,transparent 0,#000 28%)!important}
.pair > .ov-sec > figure.pic.art picture{display:block;width:100%;height:100%}
.pair > .ov-sec > figure.pic.art img{display:block;width:100%!important;height:100%!important;object-fit:cover!important;object-position:50% 100%!important;opacity:1!important;image-rendering:pixelated;-webkit-mask-image:none!important;mask-image:none!important}
.pair > .ov-sec pre.cmd{background:var(--g0)}
/* desktop only: the scene sits behind the whole card, words and code over its dark upper half (Pennant, 20:10) */
@media (min-width:721px){
  .pair{container-type:inline-size}
  .pair > .ov-sec{min-height:calc((100cqw - 2rem) * .4)}
  .pair > .ov-sec > figure.pic.art::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(27,34,48,.88) 0,rgba(27,34,48,.55) 50%,transparent 78%)}
  .pair > .ov-sec pre.cmd{background:var(--g0)!important}
  .pair > .ov-sec > figure.pic.art{position:absolute!important;inset:0!important;order:0;width:auto!important;height:auto!important;aspect-ratio:auto!important;margin:0!important;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%)!important;mask-image:linear-gradient(to bottom,transparent 0,#000 18%)!important}
  .pair > .ov-sec > *:not(figure){position:relative;z-index:2}
}