.resources-page { background: #0c171f; }
.resources-sky { position: fixed; inset: 0; pointer-events: none; overflow: hidden; background: radial-gradient(ellipse at 77% 15%, #74848b40, transparent 58%), radial-gradient(ellipse at 15% 60%, #35545b70, transparent 65%), linear-gradient(165deg, #1b2d39, #0e1c26 58%, #101b23); }
.resources-sky::before { content: ''; position: absolute; inset: -25%; background: radial-gradient(ellipse at 65% 30%, #d5d0ae18, transparent 40%), radial-gradient(ellipse at 20% 70%, #96b8be16, transparent 45%); filter: blur(35px); animation: sky-breath 34s ease-in-out infinite alternate; }
#awareness-dust { width: 100%; height: 100%; position: absolute; inset: 0; }
.resources-main { position: relative; padding-top: 155px; padding-bottom: 60px; flex: 1; }
.resources-intro { max-width: 760px; padding: 32px 0 85px; }
.resources-intro .eyebrow { color: #c7d4d4; font-size: .68rem; letter-spacing: .2em; }
.resources-intro h1 { font-family: var(--font-display); font-size: clamp(3.1rem, 7.5vw, 6.2rem); line-height: 1.2; font-weight: 400; letter-spacing: -.035em; margin: 16px 0 25px; }
.resources-intro h1 span { color: #d8c69b; }
.resources-intro > p { font: italic clamp(1.7rem, 3vw, 2.4rem)/1.3 var(--font-serif); color: #dbe2df; }
.resources-intro-note { max-width: 470px; color: #b8c6cc; margin-top: 24px; font-size: .94rem; line-height: 1.85; }
.resource-library-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid #c5d2da30; margin-bottom: 28px; }
.resource-library-heading h2 { font-size: .75rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.resource-library-heading > span { font: .69rem var(--font-mono); color: #b1c0c7; }
.resource-card { display: grid; grid-template-columns: .72fr 1.28fr; border: 1px solid #c2d7dd30; background: #10202aab; border-radius: 5px; overflow: hidden; backdrop-filter: blur(14px); }
.resource-art { position: relative; isolation: isolate; min-height: 470px; display: flex; align-items: flex-end; padding: 42px; overflow: hidden; background: radial-gradient(ellipse at 60% 25%, #9ca79732, transparent 65%), linear-gradient(155deg, #33505a55, #111f2b90); border-right: 1px solid #c2d7dd20; }
.resource-art::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 50% 42%, #e8d8aa16, transparent 48%); }
.awareness-orbit { position: absolute; width: 230px; height: 230px; top: 20%; left: 50%; transform: translateX(-50%); border: 1px solid #d6dbc624; border-radius: 50%; box-shadow: 0 0 70px #e4e0b313, inset 0 0 55px #d6d3bb0a; }
.awareness-orbit::before, .awareness-orbit::after { content: ''; position: absolute; inset: 16px; border: 1px solid #d6dbc61a; border-radius: 50%; }
.awareness-orbit::after { inset: -28px; border-color: #d6dbc60d; }
.resource-art > span { font: italic 2.1rem/1.25 var(--font-serif); color: #d4dcd4; }
.resource-body { padding: clamp(24px, 4vw, 48px); }
.resource-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; font-size: .68rem; color: #bdcbd1; }
.resource-type { border: 1px solid #d9c69960; color: #ebd8af; border-radius: 30px; padding: 3px 11px; text-transform: uppercase; letter-spacing: .1em; }
.resource-body h3 { font: 400 clamp(1.7rem, 3.1vw, 2.5rem)/1.2 var(--font-display); margin-top: 24px; }
.resource-subtitle { font: italic 1.6rem var(--font-serif); color: #d9c7a2; margin: 8px 0 20px; }
.resource-intro { color: #d0dade; font-size: .93rem; line-height: 1.85; }
.resource-details { margin-top: 20px; color: #b8c8cf; font-size: .86rem; }
.resource-details summary { cursor: pointer; width: fit-content; padding: 5px 0; color: #d3dcd9; text-underline-offset: 5px; }
.resource-details summary:hover { color: #e9d8b5; }
.resource-details p { margin-top: 16px; line-height: 1.85; }
.resource-player { margin: 27px 0 13px; }
.resource-player label { display: block; margin-bottom: 10px; color: #bdcbd1; font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; }
.resource-player audio { width: 100%; display: block; height: 46px; }
.resource-note { color: #b6c6cd; font-size: .76rem; line-height: 1.75; }
.resource-note > span { color: #dfd0ac; margin-right: 3px; }
.resource-downloads { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 27px; }
.resource-download { display: inline-flex; justify-content: space-between; align-items: center; gap: 22px; padding: 12px 18px; border: 1px solid #d6c49c70; border-radius: 3px; color: #f0dfba; font-size: .8rem; transition: background .2s, border-color .2s; }
.resource-download:hover { background: #d6c49c18; border-color: #e7d4a6; }
.resources-closing { text-align: center; margin: 36px 0 20px; font: italic 1.15rem var(--font-serif); color: #b6c6cd; }
.resources-page .site-footer { position: relative; background: #08121ac9; }
@keyframes sky-breath { from { transform: translate(-3%, -2%) rotate(-4deg); opacity: .6; } to { transform: translate(4%, 3%) rotate(4deg); opacity: 1; } }
@media (max-width: 768px) { .resources-main { padding-top: 112px; } .resources-intro { padding-bottom: 55px; } .resource-card { grid-template-columns: 1fr; } .resource-art { min-height: 240px; padding: 28px; border-right: 0; border-bottom: 1px solid #c2d7dd20; } .awareness-orbit { width: 155px; height: 155px; top: 35px; left: 72%; } .resource-art > span { font-size: 1.7rem; } .resource-library-heading { align-items: flex-start; } .resource-library-heading > span { font-size: .6rem; } }
@media (prefers-reduced-motion: reduce) { .resources-sky::before { animation: none; } }