/* Home hero (globe, headline, intro, button) and the quick-link cards under it.
   Markup: src/blocks/home/HomeHero.astro and QuickLinks.astro. Approved mock-up: v10 page3.mjs. */
.ht h1{margin:0;text-wrap:balance;font-family:Ibmplexmono,monospace;font-weight:400;color:#fff}
.hs{color:#fff;font-size:1.125rem;line-height:1.55}.hs strong{font-weight:700}.hb{display:flex}
.hp{min-height:calc(100vh - 152px - 17.5rem);display:flex;align-items:center;padding:2rem 0}.hp .container-medium{width:100%;position:relative;z-index:2}
.hR{position:relative}.gc{position:absolute;z-index:1;display:block;pointer-events:none}.hR .container-lines{position:relative;z-index:2}
.hA2 .gc{left:calc(50% + 60px);right:0;top:0;bottom:0;width:calc(50% - 60px);height:100%}
.hA2 h1{font-size:3rem;line-height:1.2;max-width:42rem}.hA2 .hs{max-width:34rem;margin-top:1.25rem}.hA2 .hb{margin-top:1.75rem}
.hA2 .hp{padding:clamp(4rem,10vh,7rem) 0 clamp(4.5rem,11vh,7.5rem)}
.s7l{position:absolute;left:0;top:0;z-index:3;display:inline-flex;flex-direction:column;gap:.125rem;max-width:24rem;padding:.5rem .875rem .5625rem;background:#050409;border:1px solid #a0faef;border-radius:.625rem;text-decoration:none;color:#fff;opacity:0;pointer-events:none;transition:opacity .22s;will-change:transform}
.s7l.on{opacity:1;pointer-events:auto}
.s7n{font-family:Ibmplexmono,monospace;font-size:1rem;line-height:1.3;color:#fff;white-space:nowrap}
.s7d{font-size:.875rem;line-height:1.35;color:#bdbdbd}
.s7tools{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;list-style:none}
.s7tools a:focus{position:fixed;left:1rem;bottom:1rem;z-index:9;background:#050409;color:#fff;padding:.5rem .875rem;border:1px solid #a0faef;border-radius:.625rem;clip:auto}
.s7tools:focus-within{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}
.s7tools:focus-within li{height:0;overflow:visible}
@media (prefers-reduced-motion:reduce){.s7l{transition:none}}
.hA2{touch-action:pan-y}.hA2 .gc{cursor:grab}
/* Quick links: Jon's block, his markup */
.qk .padding-section-medium{padding-top:1.75rem;padding-bottom:1.75rem}
.qk .s7h-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}
.qk .s7h-links .wrap-v-regular{display:flex;flex-direction:column;gap:.75rem}
.qk .footer_link{position:relative;display:block}
/* A: cards. Each column is a bordered card with the blue top line, copied from the "Every layer of OpenVMS" cards. Hover lifts the whole card. */
.qk.q1 .s7h-links{gap:1rem}
.qk.q1 .footer_column{position:relative;background:#0a0a12;border:1px solid #ffffff1f;border-radius:.75rem;padding:1.5rem 1.25rem 1.25rem;overflow:hidden;transition:border-color .2s,transform .22s cubic-bezier(.2,.7,.2,1),background-color .2s}
.qk.q1 .footer_column::before{content:"";position:absolute;left:0;top:0;height:3px;width:2.5rem;background:#0e27f3;transition:width .3s cubic-bezier(.2,.7,.2,1),background-color .2s}
.qk.q1 .footer_column:hover,.qk.q1 .footer_column:focus-within{border-color:#3a9bf5;background:#0d0f1c;transform:translateY(-3px)}
.qk.q1 .footer_column:hover::before,.qk.q1 .footer_column:focus-within::before{width:100%;background:#3a9bf5}
.qk.q1 .footer-title{font-size:1rem;color:#a0faef}
.qk.q1 .footer_link{color:#d6d6d6;transition:color .16s}
.qk.q1 .footer_link:hover,.qk.q1 .footer_link:focus-visible{color:#fff;text-decoration:underline;text-decoration-color:#3a9bf5;text-underline-offset:4px}
@media (prefers-reduced-motion:reduce){.qk *,.qk *::after,.qk *::before{transition:none!important}.q1 .footer_link:hover{transform:none}}
@media (max-width:767px){
 .hp{min-height:0}
 .hA2 .gc{left:0;right:0;top:auto;bottom:0;width:100%;height:15rem}
 .hA2 .hp{padding:2.25rem 0 15.5rem}
 .hA2 h1{font-size:1.9rem;line-height:1.2}.hA2 .hs{font-size:1rem;margin-top:.875rem}.hA2 .hb{margin-top:1rem}
 .s7l{left:1rem;top:auto;bottom:1.25rem;max-width:7rem;padding:.375rem .5rem;border-radius:.5rem;transform:none!important}
 .s7n{font-size:.75rem;white-space:normal}.s7d{display:none}
 .qk .s7h-links{grid-template-columns:1fr!important;gap:1rem}
 .qk.q1 .footer_column .wrap-v-regular{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
 .qk.q1 .footer_link{display:flex;align-items:center;min-height:2.75rem;padding:.25rem 0}
 .qk.q1 .footer_column{padding:1.125rem 1rem}
}