/* Typography */
main > header > .content > p {
    font-size: 19px;
    line-height: 1.4211;
}

@media (min-width: 1068px) {
    main > header > .content > p {
        font-size: 21px;
        line-height: 1.381;
    }

    ul.profile-list > li > .content > hgroup > h3,
    ul.profile-list > li > .content > hgroup > p {
        font-size: 17px;
        line-height: 1.29412;
    }
}

/* Header/Section */
main > header > .content,
main > section > .content {
    margin-left: auto;
    margin-right: auto;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    box-sizing: border-box;
}

main > header > .content { 
    width: 87.5%;
    padding-top: 60px;

    padding-bottom: 50px;
    max-width: 635px;
}

main > header > .content > h1 {
    display: inline-block;
    border-bottom: 4px solid var(--accent-color);
    margin-bottom: 25px;
}

main > section {
    color: var(--main-text-color);
}

main > section:before,
main > section:after {
    display: table;
    content: '';
}

main > section:nth-child(even)  { background-color: var(--section-alternate-background-color) }
main > section:nth-child(odd)   { background-color: var(--section-background-color) }

main > section > .content {
    transform: translateY(0px);

    padding-top: 50px;
    padding-bottom: 50px;
}

main > section > .content > .catchline,
main > section > .content > h2,
main > section > .content > p,
main > section > .content > ul,
main > section > .content > ol {
    margin: 0 auto;
    width: 87.5%;
    max-width: 980px;
}

main > section > .content > .catchline {
    margin-bottom: 50px;
}

main > section > .content > .catchline > h2,
main > section > .content > h2 {
    color: var(--accent-color);
    margin-bottom: 15px;
}

main > section > .content > hgroup {
    margin: 0 auto;
    display: block;
    width: 90%;
    max-width: 480px;
}

main > section > .content > hgroup {
    margin-bottom: 25px;
}

@media (min-width: 480px) {
    main > section > .content > .title,
    main > section > .content > .description {
        text-align: center;
    }
}

@media (min-width: 735px) and (max-width: 1067px) {
    main > section > .content > hgroup.title > h2 {
        font-size: 40px;
        line-height: 1.1;
    }
}

@media (min-width: 1068px) {
    main > section > .content > hgroup {
        margin-bottom: 50px;
    }

    main > section > .content > hgroup.title > h2 {
        font-size: 48px;
        line-height: 1.08349;
    }
}

main > section > .content > .title > p {
    color: var(--accent-color);
    font-weight: 900;
    margin-bottom: 5px;
}

main > section > .content > h2 {
    margin-top: 50px;
}

main > section > .content > *:first-child {
    margin-top: 0;
}

main > section > .content > p {
    margin: 20px auto;
}

main > header.intro-overlap + section > .content {
    padding-top: 0;
}

@media (min-width: 480px) {
    main > header > .content,
    main > section > .content > h2,
    main > section > .content > p {
        width: 80%;
    }

    main > header.intro-overlap > .content {
        padding-bottom: 200px;
    }

    main > header.intro-overlap + section > .content {
        transform: translateY(-150px);
        margin-bottom: -150px;
    }
}

@media (min-width: 735px) {
    main > header > .content { text-align: center }

    main > section > .content > .catchline {
        text-align: center;
        max-width: 635px;
    }
}

@media (min-width: 1068px) {
    main > header > .content {
        padding-top: 80px;
    }

    main > section > .content {
        padding-top: 100px;
        padding-bottom: 100px;
    }
}

/* Profile List */
ul.profile-list,
ul.profile-list > li {
    margin: 0 auto;
    padding: 0;
}

ul.profile-list { list-style: none }

ul.profile-list > li:not(:last-child) {
    margin-bottom: 30px; 
}

ul.profile-list > li > figure {
    background: #f4f4f4;
}

ul.profile-list > li > .content {
    padding-top: 15px;
}

ul.profile-list > li > .content > hgroup > p > a {
    color: var(--main-text-color);
}

@media (min-width: 735px) {
    ul.profile-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 87.5%;
        max-width: 980px;
        gap: 0px;
    }

    ul.profile-list > li:not(:last-child) {
        margin-bottom: 0; 
    }

    ul.profile-list > .card {
        width: 100%;
    }

    ul.profile-list > .card > figure {
        border-radius: 10px;
        overflow: hidden;
    }
}

/* Business Card */
.business-card {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 87.5%;
    max-width: 980px;  
}

.business-card > img {
    display: block;
    width: 100%;
    height: auto;
    width: 65%;
    max-width: 500px;
    margin-bottom: 20px;
}

.business-card > p {
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 480px) {
    .business-card {
        width: 80%;
    }
}

/* Reachability List */
ul.reachability-list, 
ul.reachability-list > li {
    display: block;
    margin: 0;
    padding: 0;
}

ul.reachability-list {
    margin-left: auto;
    margin-right: auto;
    list-style: none;
    display: flex;
    flex-direction: column;
    row-gap: 5px;
}

ul.reachability-list > li > label {
    cursor: pointer;
    display: flex;
    align-items: center;
    column-gap: 15px;
    padding: 10px;
    width: 100%;
    font-weight: normal;
    color: var(--main-text-color);
    border-radius: 10px;
    border: 2px solid var(--accent-color);
    box-sizing: border-box;
}

/* Portfolio Card Gallery */
@media (min-width: 735px) {
    ul.portfolio-list.alt-color > li {
        background: var(--section-alternate-background-color);
    }

    ul.portfolio-list > li {
        border-radius: 18px;
    }
}

@media (min-width: 1068px) {
    ul.portfolio-list + page-control {
        margin-top: 20px;
    }
}

/* Card + Card List */
@media (min-width: 735px) {
    main > section > .content > .card-list.vertical,
    main > section > .content > .card {
        margin-left: auto;
        margin-right: auto;
        width: 80%;
        max-width: 980px;
    }

    main > section:nth-child(even) > .content > .card-list.vertical > .card,
    main > section:nth-child(even) > .content > .card { 
        background-color: var(--section-background-color);
    }

    main > section:nth-child(odd) > .content > .card-list.vertical > .card,
    main > section:nth-child(odd) > .content > .card { 
        background-color: var(--section-alternate-background-color);
    }

    main > section > .content > .card-list.vertical > .card,
    main > section > .content > .card {
        border-radius: 10px;
    }

    main > section > .content > .card-list.vertical {
        gap: 25px;
    }
}

@media (min-width: 1068px) {
    main > section > .content > .card-list.vertical > .card,
    main > section > .content > .card {
        border-radius: 18px;
    }

    main > section > .content > .card-list.vertical {
        gap: 50px;
    }
}

/* Notification */
main > section:nth-child(even) .notification { background-color: var(--section-background-color) }
main > section:nth-child(odd) .notification { background-color: var(--section-alternate-background-color) }