:root {
    --blue: #29aae1;
    --orange:#ee772f;
    --olive:#8d8b00;
    --deep-blue:#0076c0;
}

html {
    scroll-behavior: smooth;
}
main {
    background-image: url('https://s3.theark.cloud/sp-comm-arkfiles/website/social-media/get-involved/pixel-map-banner-00.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
    background-color: #f9f8f7;
    border-radius: 0 0 15px 15px;
}


/* -- HOVER ANIMATION -- */
.grow {
    transition: .5s ease-in;
}
.grow:hover {
    /*opacity: 92%;*/
    filter: brightness(108%);
    transform: scale(101%);
    transition: .4s ease;
}

/* -- SCROLL ANIMATION -- */
.dot {
    position: absolute;
    border-radius: 50%;
    transition: transform 0.1s ease-out;
}

.hero .right .dot {
    animation: slideDown 3s ease-in-out infinite alternate;
}

/* -- HERO SECTION -- */
.hero {
    display: flex;
    gap: 40px;
    padding-top: 85px;
    padding-bottom:85px;
    align-items:center;
}

.hero hgroup {
    text-align: left;
}

header {
    flex-direction: column;
}
header hgroup {
    position: relative;
}

.hero .left {
    flex: 1;
}
.hero .right {
    flex: 1;
    position:relative;
}

.hero .right figure img {
    width:100%;
    aspect-ratio: 1;
    overflow: visible;
}

.dot--hero-blue-01 {
    width: 8%;
    aspect-ratio: 1;
    background: var(--blue);
    top: 0;
    left: 20%;
    z-index: 0;
}
.dot--hero-dotted {
    width: 8%;
    aspect-ratio: 1;
    border: dotted 2px #1c1c1c;
    top: 2%;
    left: 19%;
    z-index: 3;
}
.dot--hero-orange-01 {
    width: 2.5%;
    aspect-ratio: 1;
    background: var(--orange);
    bottom: 34%;
    left: 2%;
    z-index: 2;
}
.dot--hero-olive-01 {
    width: 4.5%;
    aspect-ratio: 1;
    background: var(--olive);
    bottom: 14%;
    left: 0;
    z-index: 2;
}
.dot--hero-deep-blue-01 {
    width: 2.5%;
    aspect-ratio: 1;
    background: var(--deep-blue);
    top:3%;
    left: 76%;
    z-index: 2;
}
.dot--hero-olive-02 {
    width: 4.5%;
    aspect-ratio: 1;
    background: var(--olive);
    bottom: 59%;
    right: 0;
    z-index: 0;
}
.dot--hero-orange-02 {
    width: 1.5%;
    min-width: 6px;
    aspect-ratio: 1;
    background: var(--orange);
    top: 4%;
    right: 35%;
    z-index: 2;
}
.dot--hero-blue-02 {
    width: 2%;
    aspect-ratio: 1;
    background: var(--blue);
    bottom: 0;
    left: 36%;
    z-index: 0;
}

.dot--hero-deep-blue-02 {
    width: 3%;
    min-width: 5px;
    aspect-ratio: 1;
    background: var(--deep-blue);
    top:-20%;
    left: -20%;
    margin:0;
    z-index: 2;
}
.dot--hero-blue-03 {
    width: 3%;
    min-width: 5px;
    aspect-ratio: 1;
    background: var(--blue);
    bottom:-18%;
    left: -37%;
    margin:0;
    z-index: 2;
}
.dot--hero-orange-03 {
    width: 1.5%;
    min-width: 5px;
    aspect-ratio: 1;
    background: var(--orange);
    bottom:-33%;
    left: -32%;
    margin:0;
    z-index: 2;
}


.hero .button {
    margin-left: 0;
    margin-top: 1em; 
}

.hero .left p {
    padding: 1em 0;
}


/* -- ACTION SECTION -- */
#action {
    border:none;
}
#action blockquote {
    margin: 1em 0;
    border-left: 3px solid #cfceb7;
    border-block: none;
    padding-left:1.618em;
    text-align:left;
    padding: 0 1em;
}
#action blockquote p {
    font-size: 80%;
    font-style: italic;
    opacity: 60%;
    text-wrap:wrap;
}
#action blockquote footer cite {
    font-family: 'Inconsolata', monospace;
    /*text-transform: uppercase;*/
    letter-spacing: .02em;
    font-size: 65%;
    opacity: 65%;
}

summary::marker {
    color: var(--orange);
}

#cards .card figure img {
    max-width: 100px;
    aspect-ratio: 1;
}

#cards .card figure {
    align-self: center;
    aspect-ratio: 1;
}

#cards article {
    text-align: center;
    padding-top:1em;
}

#cards .card {
    padding-top: 40px;
    padding-bottom:20px;
}

.flex-card {
    display: flex;
    margin-inline:auto;
    align-items: center;
    gap:2em;
    flex-wrap: wrap;
    padding-top:4em;
    overflow: visible;
}

.flex-card .icon {
    display: flex;
    gap: 1em;
    align-items: center;
    margin-bottom: 0.618em;
}
.flex-card .icon h2 {
    font-size: 180%;
}
.flex-card .icon img {
    /*display:none;*/
    width:12%;
    min-width: 80px;
    padding-left:0 !important;
}
.flex-card .icon h2 {
    margin-bottom: 0;
}

.flex-card figure {
    width:100%;
    flex: 1;
    position: relative;
    overflow: visible;
    align-self: start;
}
.flex-card figure img {
    position:relative;
    z-index:1;
}
.flex-card:nth-child(odd) {
    flex-direction: row-reverse;
}
.flex-card:nth-child(even) figure img {
    border-radius: 0 999px 999px 0;
}
.flex-card:nth-child(odd) figure img {
    border-radius: 999px 0 0 999px;
}
.flex-card article {
    padding-inline:20px;
}
.flex-card:nth-child(odd) article {
    margin-left: max(1em, ((100% - 100ch) / 2));
}
.flex-card:nth-child(even) article {
    margin-right: max(1em, ((100% - 100ch) / 2));
}

.flex-card article h2, p {
    margin-bottom: 0.618em;
}
.flex-card article a {
    margin-left:0;
}
.flex-card footer {
    display:flex;
    gap:0.618em;
}

.flex-card details footer a {
    margin-bottom: 1em;
}
.flex-card details ul {
    padding-bottom: 1em;
}

.dot--card1-orange {
    width: 45%;
    aspect-ratio: 1;
    background: var(--orange);
    top: -10%;
    left: 30%;
    z-index: 0;
}
.dot--card1-deep-blue {
    width: 5%;
    aspect-ratio: 1;
    background: var(--deep-blue);
    top: -4%;
    left: 35%;
    z-index: 2;
}
.dot--card1-olive {
    width: 2.5%;
    aspect-ratio: 1;
    background: var(--olive);
    bottom:0;
    left: 7%;
    z-index: 2;
}
.dot--card2-olive {
    width: 45%;
    aspect-ratio: 1;
    background: var(--olive);
    bottom: -5%;
    left: 55%;
    z-index: 0;
}
.dot--card2-blue {
    width: 5%;
    aspect-ratio: 1;
    background: var(--deep-blue);
    bottom: -8%;
    left: 80%;
    z-index: 2;
}
.dot--card2-orange {
    width: 2.5%;
    aspect-ratio: 1;
    background: var(--orange);
    top:-7%;
    left: 29%;
    z-index: 2;
}
.dot--card2-dotted {
    width: 5%;
    aspect-ratio: 1;
    border: dotted 1.5px #1c1c1c;
    right: 14%;
    z-index: 3;
}
.dot--card3-olive {
    width: 1%;
    min-width:10px;
    aspect-ratio: 1;
    background: var(--olive);
    bottom:-5%;
    left: 15%;
    z-index: 2;
}
.dot--card3-blue {
    width: 45%;
    aspect-ratio: 1;
    background: var(--blue);
    top: -7%;
    right: 5%;
    z-index: 0;
}
.dot--card3-dotted {
    width: 5%;
    aspect-ratio: 1;
    border: dotted 1.5px #1c1c1c;
    top:-5%;
    right: 38%;
    z-index: 3;
}
.dot--card3-orange {
    width: 2.5%;
    aspect-ratio: 1;
    background: var(--orange);
    bottom:0;
    left: 7%;
    z-index: 2;
}


/* -- ABOUT SECTION -- */
#about {
    background-image: url('https://s3.theark.cloud/sp-comm-arkfiles/website/social-media/get-involved/map-banner-tan03.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 6%;
    overflow:visible;
    border-radius: 30px;
    border: 1px solid rgba(67, 82, 89, .3);
    padding: 2.618em 0;
}
.about {
    display:flex;
    gap:50px;
    align-items:center;
}
.about-img {
    flex:.75;
    position:relative;
    align-self: start;
}
.about-copy {
    flex:1;
    position: relative;
    margin-top:1em;
}
.about .mission {
    display: inline-block;
    position: relative;
    font-size:80%;
    margin-bottom: 1em;
    /*font-weight:600;*/
    text-align: center;
    padding-inline: 3px;
    z-index:1;
    left:-4px;
}
.about .mission::after {
    content: '';
    position: absolute;
    bottom: -4%;
    left: 0;
    height: .2rem;
    width: 101%;
    background: var(--orange);
    z-index: -1;
    border-radius: 10px;
}

.dot--about-blue {
    width:7%;
    aspect-ratio: 1;
    background: var(--blue);
    bottom: 10%;
    right: 25%;
    z-index: 0;
}
.dot--about-dotted {
    width: 7%;
    aspect-ratio: 1;
    border: dotted 1.5px #1c1c1c;
    bottom:9%;
    right: 25%;
    z-index: 3;
}
.dot--about-orange-01 {
    width: 3%;
    aspect-ratio: 1;
    background: var(--orange);
    top: 10%;
    left: 12%;
    z-index: 2;
}
.dot--about-olive {
    width: 1%;
    min-width:7px;
    aspect-ratio: 1;
    background: var(--olive);
    top:10%;
    left: 22%;
    z-index: 2;
}
.dot--about-orange-02 {
    width: 1%;
    min-width: 6px;
    aspect-ratio: 1;
    background: var(--orange);
    bottom: 35%;
    right: 5%;
    z-index: 2;
}


/* -- QUOTE SECTION -- */
#franklin {
    background-image: url('https://s3.theark.cloud/sp-comm-arkfiles/website/social-media/get-involved/pixel-map-banner-05.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 6%;
    overflow:visible;
    border-radius: 30px 30px 0 0;
    border-top: 1px solid rgba(67, 82, 89, .3);
    padding-top: 4em;
    padding-bottom: 4em;
}
.quote {
    display: flex;
    gap: 2em;
    align-items: center;
}
.quote-img {
    flex: 1;
    aspect-ratio: 1;
    align-content: center;
    transition: .4s ease-in;
    position: relative;
}
.quote-img img {
    position: relative;
    z-index:1;
}
.quote-copy {
    flex: 2;
    /*text-wrap: balance;*/
}

.quote-copy blockquote {
    font-size: 107%;
    line-height: 1.7em;
    margin-bottom: 1em;
    border:none;
    padding-left:0;
    text-align: left;
    padding:0;
}
.quote--meta {
    text-align: end;
    font-size: 80%;
}
.quote--name {
    padding-right: 1em;
    border-right: 2px solid #435259;
    font-weight:800;
    letter-spacing: .01em;
    color: var(--orange);
}
.quote--title {
    padding-left: 1em;
    opacity:50%;
}
.dot--quote-olive {
    width: 8%;
    min-width: 6px;
    aspect-ratio: 1;
    background: var(--olive);
    bottom: 10%;
    left: 15%;
    z-index: 1;
}
.dot--quote-dotted {
    width: 8%;
    aspect-ratio: 1;
    border: dotted 1.5px #1c1c1c;
    bottom:10%;
    left: 13%;
    z-index: 3;
}
.dot--quote-deep-blue {
    width: 55%;
    aspect-ratio: 1;
    background: var(--deep-blue);
    top: 7%;
    right: 5%;
    z-index: 0;
}
.dot--quote-orange {
    width: 2%;
    min-width: 6px;
    aspect-ratio: 1;
    background: var(--orange);
    top: 15%;
    left: 5%;
    z-index: 2;
}


/* -- TABLET --*/
@media (min-width: 498px) and (max-width: 1120px) {
    .hero h1 {
        font-size: 140%;
    }
    #action > *:not(:last-child) {
        margin-bottom:2em;
    }
    .flex-card figure {
        flex: 1;
    }
    .flex-card article {
        flex:1;
    }
    #action .flex-card footer {
        flex-direction: column;
    }
    .flex-card:nth-child(odd) article {
        padding-left:0;
    }
}


/* -- MOBILE --*/
@media (max-width: calc(1px + 62ch)) {
    .hero {
        flex-direction:column-reverse;
        padding-top:35px;
        gap:10px;
    }
    .hero a {
        display:none !important;
    }
    main {
        background-size: none;
    }
    header {
        background-image: url('https://s3.theark.cloud/sp-comm-arkfiles/website/social-media/get-involved/pixel-map-banner-mobile-01.jpg');
        background-size:cover;
        background-position: top;
        background-repeat:no-repeat;
    }
    .about {
        flex-direction: column;
        gap:0;
    }
    #action .flex-card footer {
        flex-direction: column;
    }
    #action > *:not(:last-child) {
        margin-bottom:2em;
    }
    .flex-card:nth-child(odd) {
        flex-direction: row-reverse;
        padding-top: 2em;
    }
    .flex-card:nth-child(odd) article {
        margin-left:0;
    }
    .flex-card figure {
        max-width:90%;
    }
    .dot--hero-deep-blue-02, .dot--hero-blue-03, .dot--hero-orange, .dot--hero-blue-02 {
        display:none;
    }
    .quote {
        flex-direction: column;
    }
    .quote-img {
        width:75%;
    }
    .quote-copy blockquote {
        margin-top:0;
    }
    .quote--meta {
        font-size: 80%;
    }
}