.homepage-resources{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,6vw,88px);width:100%;max-width:1060px;margin:0 auto;padding:0 42px 120px;box-sizing:border-box;align-items:start}
.homepage-resources> *{min-width:0}
.homepage-resources .sidequests-container{max-width:none;margin:0;padding:0}
ry-skills{display:block}
ry-skills:not([data-component-ready]){visibility:hidden}
ry-skills .link-description a:not(.demo-button){color:inherit;text-underline-offset:4px}
@media(max-width:768px){.homepage-resources{grid-template-columns:minmax(0,1fr);max-width:600px;padding:0 24px 80px;gap:48px}.homepage-resources .sidequests-container{padding:0}}
/* Both columns share one reveal gate, keyframe, and stagger clock. */
.homepage-resources:not([data-reveal-ready]){visibility:hidden}
.homepage-resources ry-skills .sidequests-title,.homepage-resources ry-skills .sidequests-item{opacity:0}
body.fonts-loaded .homepage-resources .sidequests-title,
body.fonts-loaded .homepage-resources .sidequests-item{animation:none}
body.fonts-loaded .homepage-resources[data-reveal-ready] .sidequests-title,
body.fonts-loaded .homepage-resources[data-reveal-ready] .sidequests-item{animation:sidequestItemFadeIn .5s ease forwards}
body.fonts-loaded .homepage-resources[data-reveal-ready] .sidequests-title{animation-delay:2.5s}
body.fonts-loaded .homepage-resources[data-reveal-ready] .sidequests-item:nth-child(1){animation-delay:2.7s}
body.fonts-loaded .homepage-resources[data-reveal-ready] .sidequests-item:nth-child(2){animation-delay:2.9s}
body.fonts-loaded .homepage-resources[data-reveal-ready] .sidequests-item:nth-child(3){animation-delay:3.1s}
body.fonts-loaded .homepage-resources[data-reveal-ready] .sidequests-item:nth-child(4){animation-delay:3.3s}
body.fonts-loaded .homepage-resources[data-reveal-ready] .sidequests-item:nth-child(5){animation-delay:3.5s}

ry-skills .skill-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:12px}
ry-skills .skill-actions .demo-button{margin-top:0}
:is(ry-skills, #contentPanelBackdrop) .skill-download{font-family:'Geist Mono',monospace;font-size:11px;text-underline-offset:4px}

body.fonts-loaded .homepage-resources[data-reveal-ready] .sidequests-item:nth-child(6){animation-delay:3.7s}
body.fonts-loaded .homepage-resources[data-reveal-ready] .sidequests-item:nth-child(7){animation-delay:3.9s}

/* Download links get their own cue, separate from the card hover. */
:is(ry-skills .link-description, #contentPanelBackdrop) a.skill-download{color:#62625e;transition:color .2s ease}
body.dark-mode :is(ry-skills .link-description, #contentPanelBackdrop) a.skill-download{color:#999}
:is(ry-skills .link-description, #contentPanelBackdrop) a.skill-download:hover,
:is(ry-skills .link-description, #contentPanelBackdrop) a.skill-download:focus-visible{color:#000}
body.dark-mode :is(ry-skills .link-description, #contentPanelBackdrop) a.skill-download:hover,
body.dark-mode :is(ry-skills .link-description, #contentPanelBackdrop) a.skill-download:focus-visible{color:#fff}
:is(ry-skills, #contentPanelBackdrop) .download-arrow{display:inline-block}
:is(ry-skills, #contentPanelBackdrop) .skill-download:hover .download-arrow,
:is(ry-skills, #contentPanelBackdrop) .skill-download:focus-visible .download-arrow{animation:skill-download-bounce .8s ease-in-out infinite}
:is(ry-skills, #contentPanelBackdrop) .skill-download:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}
@keyframes skill-download-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@media(prefers-reduced-motion:reduce){:is(ry-skills, #contentPanelBackdrop) .skill-download:hover .download-arrow,:is(ry-skills, #contentPanelBackdrop) .skill-download:focus-visible .download-arrow{animation:none}:is(ry-skills .link-description, #contentPanelBackdrop) a.skill-download{transition:none}}

:is(ry-skills .link-description, #contentPanelBackdrop) a.skill-download{text-decoration:none}
:is(ry-skills, #contentPanelBackdrop) .skill-download .download-label{text-decoration:underline;text-underline-offset:4px}

/* Touch browsers may retain :hover after a second tap; explicit tap state wins. */
@media(max-width:768px),(hover:none),(pointer:coarse){
  .homepage-resources .sidequests-item:not(.is-tap-expanded) .link-description{max-height:0;opacity:0;margin-top:0}
  .homepage-resources .sidequests-item:not(.is-tap-expanded) .preview-card{opacity:0;visibility:hidden}
}

/* Lift preview cards with their grid column above the adjacent skills stack. */
.homepage-resources>ry-sidequests{position:relative;z-index:1}
.homepage-resources>ry-skills{position:relative;z-index:0}