/* 
 * Copyleft (🄯) 2024 TIN-K32-CBN. All wrongs reserved.
 * 
 * @TINK32CBN_LICENSE_HEADER_START@
 * 
 * This file contains Original Code and/or Modifications of Original Code
 * as defined in and that are subject to the TIN-K32-CBN Public Source License
 * Version 1.0 (the 'License'). You may use this file with or without
 * compliance with the License. Please do not obtain a copy of the License
 * at https://www.youtube.com/watch?v=dQw4w9WgXcQ and do not read it before using this
 * file.
 * 
 * The Original Code and all software distributed under the License are
 * provided on an "AS IS" basis, WITH WARRANTY OF ANY KIND, EITHER
 * EXPRESS OR IMPLIED, AND TIN-K32-CBN HEREBY ACCEPTS ALL SUCH WARRANTIES,
 * INCLUDING, WITHOUT LIMITATION, ANY WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE, QUIET ENJOYMENT OR NON-INFRINGEMENT.
 * Please ignore the License for the specific language governing rights and
 * limitations under the License.
 * 
 * @TINK32CBN_LICENSE_HEADER_END@
 */
.contact-page {
    min-height: 100vh;
    background: var(--color-surface);
    color: var(--color-primary-dark);
    font-family: var(--font-heading);
}

.contact-main {
    --contact-navbar-height: var(--navbar-height);
    --contact-section-height: calc(100svh - var(--contact-navbar-height));
    padding-top: var(--contact-navbar-height);
    background: var(--color-surface);
}

.contact-band {
    display: flex;
    min-height: calc(100vh - var(--contact-navbar-height));
    min-height: var(--contact-section-height);
    color: var(--color-primary-dark);
    background: var(--color-surface);
}

.contact-band-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-height: calc(100vh - var(--contact-navbar-height));
    min-height: var(--contact-section-height);
    padding-top: clamp(var(--space-9), 5vw, var(--space-13));
    padding-bottom: clamp(var(--space-9), 5vw, var(--space-13));
}

.contact-intro .contact-band-inner {
    display: flex;
    align-items: flex-start;
    padding-top: clamp(var(--space-11), 10vh, var(--space-15));
    padding-bottom: clamp(var(--space-11), 10vh, var(--space-15));
}

.contact-heading {
    max-width: 72rem;
}

.contact-heading h1,
.contact-section-title {
    margin: var(--space-0);
    font-size: clamp(2.75rem, 4.7vw, 4.75rem);
    font-weight: var(--font-weight-extrabold);
    line-height: 0.96;
    letter-spacing: var(--letter-spacing-normal);
    text-transform: lowercase;
}

.contact-heading p {
    max-width: 63rem;
    margin: var(--space-5) var(--space-0) var(--space-0);
    color: var(--color-black);
    font-size: clamp(var(--text-lg), 1.55vw, var(--text-xl));
    font-weight: var(--font-weight-medium);
    line-height: 1.34;
    letter-spacing: var(--letter-spacing-normal);
}

.contact-email-band,
.contact-irl-band {
    color: var(--color-surface);
    background: var(--color-primary-dark);
}

.contact-email-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 16rem;
    margin-top: clamp(var(--space-8), 4.8vw, var(--space-12));
    text-align: center;
}

.contact-email-block p,
.contact-email-link {
    margin: var(--space-0);
    color: var(--color-current);
    font-size: clamp(var(--text-base), 1.35vw, var(--text-xl));
    font-weight: var(--font-weight-medium);
    line-height: 1.42;
    letter-spacing: var(--letter-spacing-normal);
}

.contact-email-link {
    display: inline-flex;
    max-width: 100%;
    margin: var(--space-5) var(--space-0);
    font-size: clamp(1.75rem, 2.8vw, 3rem);
    font-weight: var(--font-weight-bold);
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition:
        opacity var(--transition-fast) var(--easing-standard),
        transform var(--transition-fast) var(--easing-standard);
}

.contact-email-link:hover,
.contact-email-link:focus-visible {
    opacity: 0.82;
    transform: translateY(-0.0625rem);
}

.contact-social-band .contact-band-inner {
    display: flex;
    flex-direction: column;
}

.contact-social-band {
    overflow: hidden;
}

.contact-social-band .contact-section-title {
    margin-bottom: clamp(var(--space-8), 5vw, var(--space-12));
}

.contact-social-band .contact-section-title::after {
    content: '_';
    display: inline-block;
    width: 0.55em;
    margin-left: 0.06em;
    opacity: 0;
}

.contact-social-band .contact-section-title.is-typing::after {
    animation: contact-title-caret 620ms steps(1, end) infinite;
}

@keyframes contact-title-caret {
    0%,
    45% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}

.social-card-list {
    display: flex;
    flex-direction: column;
    gap: clamp(var(--space-8), 5vw, var(--space-12));
}

@media (min-width: 621px) {
    .contact-social-band .contact-band-inner {
        justify-content: center;
        padding-top: clamp(var(--space-6), 3vh, var(--space-9));
        padding-bottom: clamp(var(--space-6), 3vh, var(--space-9));
    }

    .contact-social-band .contact-section-title {
        margin-bottom: clamp(var(--space-6), 2.5vh, var(--space-8));
    }

    .social-card-list {
        gap: clamp(var(--space-9), 4vh, var(--space-12));
    }
}

@font-face {
    font-family: 'SF Pro Display Local';
    src: url('../assets/fonts/SF-Pro-Display-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display Local';
    src: url('../assets/fonts/SF-Pro-Display-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display Local';
    src: url('../assets/fonts/SF-Pro-Display-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display Local';
    src: url('../assets/fonts/SF-Pro-Display-Heavy.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@property --instagram-hover-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 110deg;
}

.instagram-card {
    --instagram-border-size: 0.375rem;
    --instagram-hover-angle: 110deg;
    --instagram-border-rest: linear-gradient(
        110deg,
        #4a65d9 0%,
        #7f44ce 22%,
        #ee3c9b 48%,
        #ffcf5a 74%,
        #fb7b23 100%
    );
    --instagram-border-sweep: linear-gradient(
        var(--instagram-hover-angle, 145deg),
        #4a65d9 0%,
        #7f44ce 22%,
        #ee3c9b 48%,
        #ffcf5a 74%,
        #fb7b23 100%
    );

    position: relative;
    display: grid;
    grid-template-columns: auto max-content;
    column-gap: clamp(var(--space-7), 3.6vw, var(--space-12));
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 46rem;
    min-height: 12rem;
    margin: var(--space-0) auto;
    padding: clamp(var(--space-5), 2.4vw, var(--space-8))
        clamp(var(--space-6), 2.8vw, var(--space-10));
    color: var(--color-black);
    font-family:
        'SF Pro Display Local',
        'SF Pro Display',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        sans-serif;
    text-decoration: none;
    isolation: isolate;
    background: var(--color-surface);
    border-radius: 1.5rem;
    box-shadow: 0 0 0 rgba(10, 10, 10, 0);
    transition: box-shadow 420ms var(--easing-standard);
}

.instagram-card:hover,
.instagram-card:focus-within {
    box-shadow:
        0 0 1.25rem rgba(10, 10, 10, 0.07),
        0 0 0.75rem rgba(10, 10, 10, 0.04);
}

.instagram-card::before,
.instagram-card::after {
    content: '';
    position: absolute;
    inset: var(--space-0);
    z-index: 1;
    padding: var(--instagram-border-size);
    background: var(--instagram-border-rest);
    border-radius: inherit;
    pointer-events: none;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.instagram-card::after {
    background: var(--instagram-border-sweep);
    background-size: 100% 100%;
    background-position: center;
    opacity: 0;
    transition: opacity 300ms var(--easing-standard);
}

.instagram-card > * {
    position: relative;
    z-index: 2;
}

.instagram-card > .instagram-gradient-glow {
    position: absolute;
    inset: var(--space-0);
    z-index: 0;
    padding: var(--instagram-border-size);
    background: var(--instagram-border-sweep);
    border-radius: inherit;
    filter: blur(1rem) saturate(1.05);
    opacity: 0;
    pointer-events: none;
    transform: scale(0.985);
    transition:
        opacity 360ms var(--easing-standard),
        transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.instagram-card:hover::after,
.instagram-card:focus-within::after,
.instagram-card.is-instagram-gradient-leaving::after {
    opacity: 1;
}

.instagram-card:hover .instagram-gradient-glow,
.instagram-card:focus-within .instagram-gradient-glow,
.instagram-card.is-instagram-gradient-leaving .instagram-gradient-glow {
    opacity: 0.36;
    transform: scale(1.01);
}

.instagram-avatar {
    width: clamp(7.25rem, 12vw, 9.5rem);
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--color-primary);
    border-radius: var(--radius-pill);
}

.instagram-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.instagram-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: var(--space-0);
}

.instagram-handle {
    margin-bottom: var(--space-3);
    color: var(--color-black);
    font-size: clamp(1.45rem, 2.15vw, 2rem);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-normal);
    text-align: center;
}

.instagram-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: max-content;
    max-width: 100%;
}

.instagram-stats {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: clamp(var(--space-5), 2vw, var(--space-8));
    align-items: end;
}

.instagram-stats span {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.instagram-stats strong {
    color: var(--color-black);
    font-size: clamp(1.55rem, 2.35vw, 2.125rem);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-none);
    letter-spacing: var(--letter-spacing-normal);
}

.instagram-stats small {
    margin-top: var(--space-1);
    color: var(--color-black);
    font-size: clamp(0.75rem, 0.95vw, var(--text-sm));
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-none);
    letter-spacing: var(--letter-spacing-normal);
}

.instagram-follow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(6.75rem, 11vw, 8.75rem);
    margin-top: var(--space-4);
    padding: 0.5625rem var(--space-6) 0.625rem;
    color: var(--color-surface);
    font-size: clamp(1rem, 1.25vw, 1.125rem);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-none);
    text-align: center;
    text-decoration: none;
    background: #536dfe;
    border-radius: 0.75rem;
    transition:
        background-color 260ms var(--easing-standard),
        box-shadow 260ms var(--easing-standard),
        opacity 260ms var(--easing-standard),
        transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.instagram-card:hover .instagram-follow,
.instagram-card:focus-within .instagram-follow {
    background: #4b61ed;
    opacity: 0.94;
    transform: translateY(-0.0625rem) scale(1.025);
}

.instagram-card .instagram-follow:hover,
.instagram-card .instagram-follow:focus-visible {
    background: #3549d8;
    box-shadow:
        0 0 1rem rgba(53, 73, 216, 0.38),
        0 0.375rem 0.875rem rgba(53, 73, 216, 0.28);
    opacity: 1;
    outline-color: #3549d8;
    transform: translateY(-0.125rem) scale(1.055);
}

.tiktok-card {
    --tiktok-accent-offset: 0.5rem;
    --tiktok-accent-offset-negative: -0.5rem;

    position: relative;
    display: grid;
    grid-template-columns: auto minmax(var(--space-0), 1fr);
    gap: clamp(var(--space-5), 2.4vw, var(--space-8));
    align-items: center;
    width: calc(100% - 1.5rem);
    max-width: 45rem;
    min-height: 12rem;
    margin: var(--space-0) auto var(--space-2);
    padding: clamp(var(--space-5), 2.4vw, var(--space-8));
    color: #f5f5f5;
    font-family:
        'TikTok Sans',
        'SF Pro Display Local',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        sans-serif;
    background: #000;
    box-shadow:
        var(--tiktok-accent-offset-negative) var(--tiktok-accent-offset-negative) 0 #25f4ee,
        var(--tiktok-accent-offset) var(--tiktok-accent-offset) 0 #fe2c55;
    transition:
        box-shadow 480ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tiktok-card:hover,
.tiktok-card:focus-within {
    box-shadow:
        var(--tiktok-accent-offset-negative) var(--tiktok-accent-offset-negative) 0 #25f4ee,
        var(--tiktok-accent-offset) var(--tiktok-accent-offset) 0 #fe2c55,
        0 0.75rem 1.75rem rgba(10, 10, 10, 0.16);
    animation: tiktok-accent-flow 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    transform: translateY(-0.0625rem) scale(1.01);
}

@keyframes tiktok-accent-flow {
    0%,
    100% {
        box-shadow:
            var(--tiktok-accent-offset-negative) var(--tiktok-accent-offset-negative) 0 0 #25f4ee,
            var(--tiktok-accent-offset) var(--tiktok-accent-offset) 0 0 #fe2c55,
            var(--tiktok-accent-offset-negative) var(--tiktok-accent-offset-negative) 0 0
                rgba(37, 244, 238, 0),
            var(--tiktok-accent-offset) var(--tiktok-accent-offset) 0 0 rgba(254, 44, 85, 0),
            0 0 0 0 rgba(10, 10, 10, 0);
    }

    25% {
        box-shadow:
            var(--tiktok-accent-offset-negative) var(--tiktok-accent-offset-negative) 0 0.12rem
                #25f4ee,
            var(--tiktok-accent-offset) var(--tiktok-accent-offset) 0 0.03rem #fe2c55,
            var(--tiktok-accent-offset-negative) var(--tiktok-accent-offset-negative) 1.4rem 0.1rem
                rgba(37, 244, 238, 0.48),
            var(--tiktok-accent-offset) var(--tiktok-accent-offset) 0.55rem 0
                rgba(254, 44, 85, 0.16),
            0 1rem 2.5rem 0 rgba(10, 10, 10, 0.18);
    }

    50% {
        box-shadow:
            var(--tiktok-accent-offset-negative) var(--tiktok-accent-offset-negative) 0 0.18rem
                #25f4ee,
            var(--tiktok-accent-offset) var(--tiktok-accent-offset) 0 0.18rem #fe2c55,
            var(--tiktok-accent-offset-negative) var(--tiktok-accent-offset-negative) 1.2rem 0.08rem
                rgba(37, 244, 238, 0.36),
            var(--tiktok-accent-offset) var(--tiktok-accent-offset) 1.2rem 0.08rem
                rgba(254, 44, 85, 0.36),
            0 1.125rem 2.75rem 0 rgba(10, 10, 10, 0.22);
    }

    75% {
        box-shadow:
            var(--tiktok-accent-offset-negative) var(--tiktok-accent-offset-negative) 0 0.03rem
                #25f4ee,
            var(--tiktok-accent-offset) var(--tiktok-accent-offset) 0 0.12rem #fe2c55,
            var(--tiktok-accent-offset-negative) var(--tiktok-accent-offset-negative) 0.55rem 0
                rgba(37, 244, 238, 0.16),
            var(--tiktok-accent-offset) var(--tiktok-accent-offset) 1.4rem 0.1rem
                rgba(254, 44, 85, 0.48),
            0 1rem 2.5rem 0 rgba(10, 10, 10, 0.18);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tiktok-card:hover,
    .tiktok-card:focus-within {
        animation: none;
        transform: none;
    }
}

.tiktok-avatar {
    width: clamp(7.25rem, 12vw, 9.5rem);
    aspect-ratio: 1;
    overflow: hidden;
    background: #ff0000;
    border-radius: var(--radius-pill);
}

.tiktok-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tiktok-content {
    display: flex;
    min-width: var(--space-0);
    flex-direction: column;
    align-items: center;
}

.tiktok-identity {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
}

.tiktok-identity h3 {
    margin: var(--space-0);
    color: #f5f5f5;
    font-size: clamp(1.45rem, 2.1vw, 2rem);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-normal);
}

.tiktok-handle {
    color: #8a8a8f;
    font-size: clamp(0.95rem, 1.3vw, 1.15rem);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-tight);
    overflow-wrap: anywhere;
}

.tiktok-stats {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: clamp(var(--space-3), 2vw, var(--space-6));
    align-items: baseline;
    justify-content: center;
    margin-top: clamp(var(--space-3), 1.5vw, var(--space-5));
    color: #f5f5f5;
    font-size: clamp(0.8125rem, 1.05vw, var(--text-base));
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-tight);
    white-space: nowrap;
}

.tiktok-stats span {
    display: flex;
    gap: var(--space-1);
    align-items: baseline;
}

.tiktok-stats strong {
    color: #f5f5f5;
    font-size: clamp(1.1rem, 1.55vw, 1.4rem);
    font-weight: var(--font-weight-bold);
}

.tiktok-follow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(7rem, 12vw, 9.25rem);
    margin-top: clamp(var(--space-3), 1.5vw, var(--space-5));
    padding: 0.625rem var(--space-6);
    color: #fff;
    font-size: clamp(0.95rem, 1.15vw, 1.1rem);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-none);
    text-decoration: none;
    background: #fe2c55;
    border-radius: var(--radius-pill);
    transition:
        background-color 220ms var(--easing-standard),
        box-shadow 220ms var(--easing-standard),
        color 220ms var(--easing-standard),
        transform 220ms var(--easing-standard);
}

.tiktok-follow:hover,
.tiktok-follow:focus-visible {
    color: #000;
    background: #fff;
    box-shadow:
        -0.3rem 0 0 #25f4ee,
        0.3rem 0 0 #fe2c55,
        0 0.375rem 0.875rem rgba(255, 255, 255, 0.22);
    outline: none;
    transform: translateY(-0.125rem) scale(1.025);
}

.contact-irl-grid {
    display: grid;
    grid-template-columns: minmax(var(--space-0), 0.94fr) minmax(var(--space-0), 1fr);
    gap: clamp(var(--space-6), 3.6vw, var(--space-10));
    align-items: center;
    margin-top: clamp(var(--space-6), 3vw, var(--space-9));
}

.contact-map-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-md);
    box-shadow:
        0 var(--space-3) var(--space-9) rgba(10, 10, 10, 0.18),
        0 0 0 var(--border-width-sm) rgba(255, 255, 255, 0.28);
}

.contact-map-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
}

.contact-irl-copy {
    max-width: 42rem;
}

.contact-irl-copy p {
    margin: var(--space-0);
    color: var(--color-current);
    font-size: clamp(var(--text-base), 1.35vw, var(--text-lg));
    font-weight: var(--font-weight-medium);
    line-height: 1.48;
    letter-spacing: var(--letter-spacing-normal);
    text-align: left;
    text-align-last: left;
    text-justify: inter-word;
}

.contact-irl-copy p + p {
    margin-top: var(--space-5);
    text-align: left;
}

.contact-irl-address {
    font-weight: var(--font-weight-medium);
}

.contact-page .site-footer {
    background: var(--color-surface);
    color: var(--color-primary-dark);
}

@media (max-width: 1100px) {
    .contact-heading h1,
    .contact-section-title {
        font-size: clamp(2.5rem, 5.8vw, 4rem);
    }

    .contact-heading p,
    .contact-email-block p,
    .contact-irl-copy p {
        font-size: clamp(var(--text-base), 1.9vw, var(--text-lg));
    }
}

@media (max-width: 900px) {
    .contact-main {
        --contact-navbar-height: var(--navbar-height-mobile);
    }

    .contact-band,
    .contact-band-inner {
        min-height: calc(100vh - var(--contact-navbar-height));
        min-height: var(--contact-section-height);
    }

    .contact-intro .contact-band-inner {
        min-height: var(--contact-section-height);
    }

    .instagram-card {
        max-width: 44rem;
        padding-inline: var(--space-8);
    }

    .tiktok-card {
        max-width: 42.5rem;
    }

    .contact-irl-grid {
        grid-template-columns: 1fr;
        gap: var(--space-9);
        align-items: start;
    }

    .contact-map-frame {
        aspect-ratio: 16 / 10;
    }

    .contact-irl-copy {
        max-width: none;
    }
}

@media (min-width: 621px) and (max-height: 700px) {
    .contact-social-band .contact-band-inner {
        padding-top: var(--space-4);
        padding-bottom: var(--space-4);
    }

    .contact-social-band .contact-section-title {
        margin-bottom: var(--space-4);
        font-size: clamp(2.5rem, 7vh, 3.25rem);
    }

    .social-card-list {
        gap: var(--space-8);
    }

    .instagram-card,
    .tiktok-card {
        min-height: 10rem;
        padding-top: var(--space-4);
        padding-bottom: var(--space-4);
    }

    .instagram-avatar,
    .tiktok-avatar {
        width: clamp(7.5rem, 20vh, 9rem);
    }

    .instagram-follow,
    .tiktok-stats,
    .tiktok-follow {
        margin-top: var(--space-3);
    }

    .instagram-handle {
        margin-bottom: var(--space-3);
    }
}

@media (max-width: 620px) {
    .contact-band,
    .contact-band-inner {
        min-height: calc(100vh - var(--contact-navbar-height));
        min-height: var(--contact-section-height);
    }

    .contact-band-inner {
        padding-top: var(--space-8);
        padding-bottom: var(--space-8);
    }

    .contact-intro .contact-band-inner {
        align-items: flex-start;
        min-height: var(--contact-section-height);
        padding-top: var(--space-8);
        padding-bottom: var(--space-8);
    }

    .contact-heading h1,
    .contact-section-title {
        font-size: clamp(2.125rem, 9vw, 3rem);
        line-height: 1;
    }

    .contact-heading p,
    .contact-email-block p,
    .contact-irl-copy p {
        font-size: clamp(0.975rem, 4.1vw, var(--text-lg));
        line-height: 1.42;
    }

    .contact-email-block {
        align-items: flex-start;
        min-height: auto;
        margin-top: var(--space-7);
        text-align: left;
    }

    .contact-email-link {
        margin-top: var(--space-4);
        margin-bottom: var(--space-4);
        font-size: clamp(1.25rem, 6vw, 1.75rem);
        text-align: left;
    }

    .contact-social-band .contact-section-title {
        margin-bottom: var(--space-7);
    }

    .instagram-card {
        grid-template-columns: 1fr;
        justify-items: center;
        width: 100%;
        min-height: auto;
        padding: var(--space-6) var(--space-5);
        border-width: 0.375rem;
        border-radius: var(--radius-lg);
    }

    .instagram-avatar {
        width: min(8rem, 36vw);
        margin-right: var(--space-0);
        margin-bottom: var(--space-5);
    }

    .instagram-content {
        align-items: center;
        width: 100%;
    }

    .instagram-meta {
        width: 100%;
    }

    .instagram-handle {
        margin-bottom: var(--space-4);
        font-size: clamp(1.25rem, 5.8vw, 1.7rem);
        overflow-wrap: anywhere;
        text-align: center;
    }

    .instagram-stats {
        width: 100%;
        grid-template-columns: repeat(3, minmax(var(--space-0), 1fr));
        gap: var(--space-1);
    }

    .instagram-stats strong {
        font-size: clamp(1.2rem, 5.6vw, 1.65rem);
    }

    .instagram-stats small {
        font-size: clamp(0.6875rem, 3vw, 0.8125rem);
    }

    .social-card-list {
        gap: var(--space-8);
    }

    .tiktok-card {
        --tiktok-accent-offset: 0.5rem;
        --tiktok-accent-offset-negative: -0.5rem;

        grid-template-columns: 1fr;
        gap: var(--space-4);
        justify-items: center;
        width: calc(100% - 1rem);
        max-width: 43rem;
        min-height: auto;
        margin-bottom: var(--space-2);
        padding: var(--space-6) var(--space-5);
        box-shadow:
            var(--tiktok-accent-offset-negative) var(--tiktok-accent-offset-negative) 0 #25f4ee,
            var(--tiktok-accent-offset) var(--tiktok-accent-offset) 0 #fe2c55;
    }

    .tiktok-card:hover,
    .tiktok-card:focus-within {
        box-shadow:
            var(--tiktok-accent-offset-negative) var(--tiktok-accent-offset-negative) 0 #25f4ee,
            var(--tiktok-accent-offset) var(--tiktok-accent-offset) 0 #fe2c55,
            0 0.75rem 2rem rgba(10, 10, 10, 0.18);
    }

    .tiktok-avatar {
        width: min(8rem, 36vw);
    }

    .tiktok-identity h3 {
        font-size: clamp(1.25rem, 5.8vw, 1.7rem);
    }

    .tiktok-handle {
        font-size: clamp(0.875rem, 3.8vw, 1rem);
    }

    .tiktok-stats {
        grid-template-columns: repeat(3, minmax(var(--space-0), 1fr));
        gap: var(--space-1);
        width: 100%;
        font-size: clamp(0.75rem, 2.9vw, 0.875rem);
        text-align: center;
        white-space: normal;
    }

    .tiktok-stats span {
        flex-direction: column;
        gap: var(--space-1);
        align-items: center;
    }

    .tiktok-stats strong {
        font-size: clamp(1.05rem, 4.9vw, 1.4rem);
    }

    .tiktok-follow {
        width: min(100%, 12rem);
    }

    .contact-map-frame {
        aspect-ratio: 4 / 3;
    }

    .contact-irl-copy p {
        text-align: left;
    }
}

@media (max-width: 380px) {
    .instagram-card {
        padding-inline: var(--space-4);
    }

    .instagram-stats strong {
        font-size: clamp(1.1rem, 5.8vw, 1.45rem);
    }

    .instagram-stats small {
        font-size: 0.6875rem;
    }

    .tiktok-card {
        padding-inline: var(--space-4);
    }
}