/* ─── TOKENS ──────────────────────────────────────────────────────────── */
/* Palette extracted from branding/membrana-osmosis-barcelona.jpg
   (clear pool-water texture: deep teal → aqua → pale mist) */

:root {
    --teal-900: #0f3d4c;
    --teal-700: #1c6378;
    --teal-500: #3a93aa;
    --teal-300: #8ec6d4;
    --mist:     #e6f3f6;
    --foam:     #f3fafb;

    --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
    --sans:  system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ─── RESET ───────────────────────────────────────────────────────────── */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
}

img {
    display: block;
    max-width: 100%;
}

/* ─── BASE ────────────────────────────────────────────────────────────── */

body {
    font-family: var(--sans);
    color: var(--teal-900);
    background-color: var(--foam);
    background-image: url('branding/membrana-osmosis-barcelona.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 100dvh;
}

/* Aqua veil over the water texture so it shows through without hurting legibility */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(230, 243, 246, 0.82);
    pointer-events: none;
    z-index: 0;
}

/* ─── LAYOUT ──────────────────────────────────────────────────────────── */

.site {
    position: relative;
    z-index: 1;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ─── HEADER ──────────────────────────────────────────────────────────── */

.header {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 3rem 2rem 1.5rem;
}

.wordmark {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-align: center;
}

.wordmark__main {
    font-family: var(--serif);
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--teal-900);
}

.wordmark__sub {
    font-family: var(--sans);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--teal-500);
}

/* ─── MAIN ────────────────────────────────────────────────────────────── */

.main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 2rem 1rem;
    width: 100%;
}

.frame {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3.5rem;
    max-width: 820px;
    width: 100%;
}

/* ─── TEXT CONTENT ────────────────────────────────────────────────────── */

.content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
    min-width: 0;
}

.eyebrow {
    font-family: var(--sans);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--teal-500);
}

.headline {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.14;
    color: var(--teal-900);
}

.headline em {
    font-style: italic;
    color: var(--teal-700);
}

.rule {
    display: block;
    width: 48px;
    height: 1px;
    background: var(--teal-300);
}

.tagline {
    font-family: var(--sans);
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    font-weight: 300;
    line-height: 1.85;
    color: var(--teal-700);
    max-width: 400px;
}

/* ─── CONTACT ─────────────────────────────────────────────────────────── */

.contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 2.5rem;
    margin-top: 0.5rem;
}

.contact__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.contact__item:hover,
.contact__item:focus-visible {
    opacity: 0.7;
}

.contact__label {
    font-family: var(--sans);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--teal-500);
}

.contact__value {
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 400;
    color: var(--teal-900);
}

/* ─── FOOTER ──────────────────────────────────────────────────────────── */

.footer {
    width: 100%;
    padding: 1rem 2rem 1.75rem;
    text-align: center;
}

.footer p {
    font-family: var(--sans);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.07em;
    color: var(--teal-500);
}

/* ─── RESPONSIVE ──────────────────────────────────────────────────────── */

@media (max-width: 680px) {
    .header {
        padding: 2rem 1.5rem 1.25rem;
    }

    .main {
        padding: 1.5rem 1.5rem 1rem;
    }
}

/* iOS / Safari: background-attachment: fixed breaks on mobile */
@supports (-webkit-touch-callout: none) {
    body {
        background-attachment: scroll;
    }
}