body {
  font-family: 'Archivo', sans-serif;
  font-weight: 200;
  font-size: clamp(0.875rem, 1.5vw, 1.25rem);
}

.btn {
    font-size: clamp(0.75rem, 1.2vw, 0.95rem);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.close-btn{
    font-size: clamp(0.75rem, 1.2vw, 0.95rem);
}

.links {
    font-size: clamp(0.75rem, 1.2vw, 1.125rem);
}

h1, h2{
    font-size: clamp(1.5rem, 4vw, 2.75rem);
}

.location-name{
    font-size: clamp(0.9375rem, 1.8vw, 1.1875rem); 
}

.locations-overlay {
    font-size: clamp(0.8125rem, 1.35vw, 1.0625rem);
    clip-path: circle(0% at 0 0);
    transition: clip-path 0.6s ease, opacity 0.35s ease;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: calc(env(safe-area-inset-bottom, 0) + 2rem);
}

.locations-overlay.is-active {
    clip-path: circle(160% at 0 0);
}

.location-card {
    width: 100%;
    max-width: 165px;
}

#kungsholmen > p {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none; 
}

.locations-contact-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
    color: inherit;
    transition: color 0.18s ease;
}

.locations-contact-link::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    inset-block-end: 0.1em;
    height: 1px;
    background: currentColor;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.locations-contact-link:hover,
.locations-contact-link:focus-visible {
    color: #98465c;
}

.locations-contact-link:hover::before,
.locations-contact-link:focus-visible::before {
    opacity: 0.4;
    transform: scaleX(1);
}

[data-animate] {
    opacity: 0;
    transform: translateY(32px);
    filter: blur(14px);
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--animate-delay, 0s);
}

[data-animate].is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

[data-animate="scale"] {
    transform: scale(1.06);
    filter: none;
}

[data-animate="scale"].is-visible {
    transform: scale(1);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    [data-animate] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

    .btn {
        overflow: visible;
        transition: none;
    }

    .btn::before,
    .btn::after {
        display: none;
    }
}

.link-wiggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: color 0.24s ease, text-decoration-color 0.24s ease;
}

.link-wiggle:hover,
.link-wiggle:focus-visible {
    color: #98465c;
    text-decoration-color: currentColor;
    animation: link-wiggle 0.4s ease;
}

@keyframes link-wiggle {
    0% { transform: rotate(0deg) translateX(0); }
    25% { transform: rotate(-3deg) translateX(-1px); }
    50% { transform: rotate(3deg) translateX(1px); }
    75% { transform: rotate(-2deg) translateX(-0.5px); }
    100% { transform: rotate(0deg) translateX(0); }
}

.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.22);
    mix-blend-mode: screen;
    opacity: 0;
    transform: translateX(-110%);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    transform: scale(0.94);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
    z-index: -1;
}

.btn:hover,
.btn:focus-visible {
    transform: translateY(-2px) scale(1.02);
}

.btn:hover::before,
.btn:focus-visible::before {
    transform: scale(1);
    opacity: 1;
}

.btn:hover::after,
.btn:focus-visible::after {
    opacity: 1;
    transform: translateX(110%);
}

.close-btn{
    transition: transform 0.2s ease-in-out;
}
.close-btn:focus{
    outline: none;
}
.close-btn:hover{
    transform: scale(1.05);
}

@media (min-width: 850px) {
    .location-card {
        max-width: 100%;
    }
    .location-card > div > p {
        max-width: 180px;
    }
}

@media (min-width: 1200px) {
        .location-card > div > p {
        max-width: 200px;
    }
}