.links-page { background: var(--cream); }
.links-header { position: absolute; background: rgba(9,10,41,.28); backdrop-filter: blur(8px); }
.links-hero { min-height: 760px; display: grid; grid-template-columns: 1fr .78fr; gap: clamp(3rem, 7vw, 8rem); align-items: center; padding: 8.5rem clamp(1.4rem, 8vw, 9rem) 5rem; color: white; background: radial-gradient(circle at 18% 28%, rgba(140,94,217,.3), transparent 34%), linear-gradient(125deg, #090a29, #18134d 64%, #4b2c77); }
.links-intro { max-width: 770px; }
.links-hero h1 { font-size: clamp(4rem, 8.5vw, 8rem); }
.links-hero h1 span { color: var(--pink); }
.links-intro > p:not(.eyebrow) { max-width: 650px; margin: 0 0 2rem; color: rgba(255,255,255,.76); font-size: 1.08rem; }
.links-portrait { align-self: end; margin-bottom: -5rem; border: 1px solid rgba(255,255,255,.2); background: #171143; box-shadow: 24px 24px 0 rgba(239,158,216,.16); }
.links-portrait-image { height: clamp(330px, 38vw, 560px); background: url("/assets/real-bug.jpg") left center / 200% auto no-repeat; }
.links-portrait p { margin: 0; padding: 1rem 1.25rem; color: rgba(255,255,255,.72); font-size: .78rem; }
.links-portrait span { color: var(--gold); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.link-directory { padding: clamp(6rem, 11vw, 10rem) clamp(1.4rem, 8vw, 9rem); }
.directory-heading { display: grid; grid-template-columns: .45fr 1fr; align-items: end; gap: 2rem; max-width: 1320px; margin: 0 auto 3rem; }
.directory-heading .eyebrow { color: #7255a4; }
.directory-heading h2, .find-dana h2, .case-return h2 { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(3rem, 6vw, 5.8rem); line-height: .96; font-weight: 600; letter-spacing: -.04em; }
.directory-grid { max-width: 1320px; margin: auto; border-top: 1px solid #c9bfd5; }
.directory-card { display: grid; grid-template-columns: 54px 1fr auto; gap: 1.4rem; align-items: center; padding: 1.7rem 1rem; border-bottom: 1px solid #c9bfd5; text-decoration: none; transition: background .2s ease, padding .2s ease; }
.directory-card:hover { padding-left: 1.5rem; background: white; }
.card-number { color: #7255a4; font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.directory-card h3 { margin: 0; color: var(--indigo); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1; }
.directory-card p { margin: .35rem 0 0; color: #6f6878; }
.card-arrow { color: #7255a4; font-size: 1.5rem; }
.featured-card { background: #fff3d9; }
.challenges { padding: clamp(5rem, 9vw, 8rem) clamp(1.4rem, 8vw, 9rem); color: white; background: var(--navy); }
.dark-heading .eyebrow { color: var(--gold); }
.dark-heading h2 { color: var(--gold); }
.challenge-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; max-width: 1320px; margin: auto; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.2); }
.challenge-grid article, .challenge-card { min-height: 270px; padding: 2rem; background: var(--navy); }
.challenge-card { color: white; text-decoration: none; transition: background .2s ease; }
.challenge-card:hover { background: #211a61; }
.challenge-grid span { color: var(--pink); font-size: .7rem; font-weight: 800; letter-spacing: .14em; }
.challenge-grid h3 { max-width: 520px; margin: 2.8rem 0 .75rem; color: var(--gold); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1; }
.challenge-grid p { max-width: 500px; margin: 0; color: rgba(255,255,255,.67); }
.challenge-card strong { display: inline-block; margin-top: 1.5rem; color: var(--pink); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.challenge-actions { display: flex; flex-wrap: wrap; gap: 1rem; max-width: 1320px; margin: 2rem auto 0; }
.challenge-actions .button-secondary { border-color: rgba(255,255,255,.55); color: white; }
.find-dana { display: grid; grid-template-columns: .7fr 1fr; gap: clamp(3rem, 8vw, 9rem); padding: clamp(5rem, 9vw, 8rem) clamp(1.4rem, 8vw, 9rem); background: #fff3d9; }
.find-dana .eyebrow { color: #7255a4; }
.social-links { border-top: 1px solid #b9afd1; }
.social-links a { display: grid; grid-template-columns: 100px 1fr auto; gap: 1rem; align-items: center; padding: 1.5rem .5rem; border-bottom: 1px solid #b9afd1; color: var(--indigo); text-decoration: none; }
.social-links span { color: #7255a4; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.social-links strong { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.35rem; }
.case-return { padding: clamp(5rem, 9vw, 8rem) 1.4rem; color: white; background: linear-gradient(rgba(9,10,41,.8), rgba(9,10,41,.92)), url("/assets/discovery-hook.jpg") 78% 42% / cover; text-align: center; }
.case-return h2 { margin-bottom: 2rem; color: var(--gold); }
@media (max-width: 860px) { .links-hero { grid-template-columns: 1fr; padding-bottom: 6rem; } .links-portrait { max-width: 560px; margin: 0; } .directory-heading, .find-dana { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .links-hero { padding-left: 1.25rem; padding-right: 1.25rem; } .links-hero h1 { font-size: clamp(3.7rem, 18vw, 5.4rem); } .links-portrait-image { height: 350px; } .directory-heading { display: block; } .directory-card { grid-template-columns: 34px 1fr auto; gap: .75rem; padding-left: 0; padding-right: 0; } .directory-card p { font-size: .85rem; } .challenge-grid { grid-template-columns: 1fr; } .social-links a { grid-template-columns: 1fr auto; } .social-links strong { grid-column: 1 / -1; grid-row: 2; } }