:root{
    --green-deep:#003d2f;
    --green-dark:#064c39;
    --green-mid:#08795a;
    --green-light:#16a579;
    --gold:#f4b818;
    --white:#fff;
}

*{box-sizing:border-box}

html,body{min-height:100%;margin:0}

body{
    color:var(--white);
    font-family:"Segoe UI",Arial,Helvetica,sans-serif;
    background:var(--green-dark);
}

.campus-page{
    min-height:100vh;
    position:relative;
    display:grid;
    place-items:center;
    overflow:hidden;
    padding:38px 18px;
    isolation:isolate;
    background:
        linear-gradient(145deg,rgba(15,169,124,.93) 0%,rgba(3,118,86,.96) 48%,rgba(0,62,47,.99) 100%),
        url("../images/graffiti-pattern.svg") center/760px auto repeat;
}

.campus-page::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    opacity:.5;
    background:url("../images/graffiti-pattern.svg") center/760px auto repeat;
}

.campus-page::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:radial-gradient(circle at center,transparent 0%,rgba(0,43,32,.12) 58%,rgba(0,28,21,.28) 100%);
}

.campus-light{
    position:absolute;
    z-index:-1;
    width:380px;
    height:380px;
    border-radius:50%;
    filter:blur(24px);
    pointer-events:none;
}

.campus-light-one{top:-220px;right:-100px;background:rgba(244,184,24,.14)}
.campus-light-two{bottom:-250px;left:-120px;background:rgba(65,217,171,.16)}

.campus-selector{
    width:min(540px,100%);
    display:flex;
    flex-direction:column;
    align-items:center;
    position:relative;
    z-index:1;
    text-align:center;
}

.campus-logo{
    width:116px;
    height:116px;
    display:block;
    object-fit:contain;
    padding:7px;
    border:2px solid rgba(255,255,255,.72);
    border-radius:25px;
    background:rgba(255,255,255,.95);
    box-shadow:0 15px 40px rgba(0,38,28,.3);
}

.campus-school-name{
    margin:16px 0 0;
    color:rgba(255,255,255,.82);
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.15em;
    line-height:1.5;
    text-transform:uppercase;
}

h1{
    margin:8px 0 27px;
    color:#fff;
    font-size:clamp(1.8rem,5vw,2.35rem);
    font-weight:850;
    letter-spacing:-.035em;
    text-shadow:0 3px 14px rgba(0,45,33,.24);
}

.campus-list{width:100%;display:grid;gap:13px}

.campus-button{
    min-height:62px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:13px 58px 13px 24px;
    overflow:hidden;
    color:#fff;
    border:2px solid rgba(255,255,255,.88);
    border-radius:999px;
    background:linear-gradient(110deg,rgba(0,43,32,.92),rgba(3,78,57,.88));
    box-shadow:0 10px 24px rgba(0,38,27,.2),inset 0 1px 0 rgba(255,255,255,.09);
    font-size:.91rem;
    font-weight:750;
    line-height:1.35;
    text-decoration:none;
    transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.campus-button::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:0;
    background:linear-gradient(105deg,transparent,rgba(255,255,255,.1),transparent);
    transform:translateX(-80%);
    transition:opacity .18s ease,transform .35s ease;
}

.campus-button:hover,.campus-button:focus-visible{
    color:#fff;
    border-color:var(--gold);
    background:linear-gradient(110deg,#003629,#075d45);
    box-shadow:0 14px 30px rgba(0,34,25,.3),0 0 0 4px rgba(244,184,24,.12);
    transform:translateY(-2px);
    outline:none;
}

.campus-button:hover::before,.campus-button:focus-visible::before{opacity:1;transform:translateX(80%)}

.campus-button>span:first-child{position:relative;z-index:1}

.campus-arrow{
    width:36px;
    height:36px;
    position:absolute;
    top:50%;
    right:12px;
    z-index:1;
    display:grid;
    place-items:center;
    color:var(--green-deep);
    border-radius:50%;
    background:var(--gold);
    font-size:1rem;
    font-weight:900;
    transform:translateY(-50%);
    transition:transform .18s ease;
}

.campus-button:hover .campus-arrow,.campus-button:focus-visible .campus-arrow{transform:translate(3px,-50%)}

.campus-motto{
    margin:23px 0 0;
    color:rgba(255,255,255,.72);
    font-family:Georgia,"Times New Roman",serif;
    font-size:.83rem;
    font-style:italic;
    letter-spacing:.015em;
}

@media(max-width:575.98px){
    .campus-page{place-items:start center;padding:32px 14px;overflow-x:hidden;overflow-y:auto}
    .campus-logo{width:98px;height:98px;border-radius:21px}
    .campus-school-name{margin-top:13px;font-size:.66rem}
    h1{margin:7px 0 22px;font-size:1.85rem}
    .campus-list{gap:11px}
    .campus-button{min-height:64px;padding:11px 49px 11px 20px;font-size:.82rem}
    .campus-arrow{width:32px;height:32px;right:10px}
    .campus-motto{margin-top:19px;font-size:.76rem}
}

@media(prefers-reduced-motion:reduce){
    .campus-button,.campus-button::before,.campus-arrow{transition:none}
}