/* ============================================================
   FLUID GRID SYSTEM
   ============================================================
   Design widths:  Mobile = 375px   Tablet = 768px   Desktop = 1920px
   Columns:        Mobile = 4       Tablet = 6       Desktop = 12
   Margins (px):   Mobile = 20      Tablet = 40      Desktop = 80
   Gutters (px):   Mobile = 12      Tablet = 16      Desktop = 20
   Breakpoints:    Tablet = 768px   Desktop = 1024px
   Font-size caps: Mobile = 20px    Desktop = 18px   Tablet = none
   Rem base:       10px at reference width
   ============================================================ */

/* --- A. Reset --- */

@font-face {
    font-family: "Gambarino";
    src:
        url("/fonts/Gambarino-Regular.woff2") format("woff2"),
        url("/fonts/Gambarino-Regular.woff") format("woff"),
        url("/fonts/Gambarino-Regular.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: "Hauora";
    src: url("/fonts/Hauora-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-body: "Gambarino", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "Hauora", Georgia, serif;
}

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

/* --- B. Foundation (mobile-first) --- */

html {
    --sbw: 0px; /* Scrollbar width — set by JS */

    /* Font-size: (10 / 375) × 100 = 2.66667vw → 1rem = 10px at 375px
     Scrollbar comp: subtract sbw × (2.66667 / 100)
     Cap: 20px */
    font-size: min(calc(2.66667vw - var(--sbw) * 0.0266667), 20px);

    /* Grid — Mobile (4 columns) */
    --columns: 4;
    --margin: 2rem; /* 20 / 10 = 2rem → 20px at 375px */
    --gutter: 1.25rem; /* 12 / 10 = 1.2rem → 12px at 375px */
    --grid-width: calc(100vw - 2 * var(--margin) - var(--sbw));
    --column: calc(
        (var(--grid-width) - (var(--columns) - 1) * var(--gutter)) /
            var(--columns)
    );
}

body {
    font-size: 1.8rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-synthesis: none;
}

/* Tablet — 6 columns, ref 768px */
@media (min-width: 768px) {
    html {
        /* Font-size: (10 / 768) × 100 = 1.30208vw → 1rem = 10px at 768px
       No cap — max ~13.3px at 1023px */
        font-size: calc(1.30208vw - var(--sbw) * 0.0130208);

        --columns: 6;
        --margin: 4rem; /* 40 / 10 */
        --gutter: 1.25rem; /* 16 / 10 */
    }
}

/* Desktop — 12 columns, ref 1920px */
@media (min-width: 1024px) {
    html {
        /* Font-size: (10 / 1920) × 100 = 0.52083vw → 1rem = 10px at 1920px
       Cap: 18px (reached at ~3456px viewport) */
        font-size: min(calc(0.52083vw - var(--sbw) * 0.0052083), 18px);

        --columns: 12;
        --margin: 8rem; /* 80 / 10 */
        --gutter: 1.25rem; /* 20 / 10 */
    }
}

/* --- C. Layout utilities --- */

.grid-container {
    display: block;
    width: var(--grid-width);
    margin-left: auto;
    margin-right: auto;
}

.row {
    display: flex;
    gap: var(--gutter);
}

.row-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gutter);
}

/* --- D. Span utilities --- */
/* width = N × column + (N - 1) × gutter */

.span-w-1 {
    width: calc(1 * var(--column));
    flex-shrink: 0;
}
.span-w-2 {
    width: calc(2 * var(--column) + 1 * var(--gutter));
    flex-shrink: 0;
}
.span-w-3 {
    width: calc(3 * var(--column) + 2 * var(--gutter));
    flex-shrink: 0;
}
.span-w-4 {
    width: calc(4 * var(--column) + 3 * var(--gutter));
    flex-shrink: 0;
}
.span-w-5 {
    width: calc(5 * var(--column) + 4 * var(--gutter));
    flex-shrink: 0;
}
.span-w-6 {
    width: calc(6 * var(--column) + 5 * var(--gutter));
    flex-shrink: 0;
}
.span-w-7 {
    width: calc(7 * var(--column) + 6 * var(--gutter));
    flex-shrink: 0;
}
.span-w-8 {
    width: calc(8 * var(--column) + 7 * var(--gutter));
    flex-shrink: 0;
}
.span-w-9 {
    width: calc(9 * var(--column) + 8 * var(--gutter));
    flex-shrink: 0;
}
.span-w-10 {
    width: calc(10 * var(--column) + 9 * var(--gutter));
    flex-shrink: 0;
}
.span-w-11 {
    width: calc(11 * var(--column) + 10 * var(--gutter));
    flex-shrink: 0;
}
.span-w-12 {
    width: calc(12 * var(--column) + 11 * var(--gutter));
    flex-shrink: 0;
}

/* --- Offset utilities --- */
/* margin-left = N × column + N × gutter */

.span-ml-1 {
    margin-left: calc(1 * var(--column) + 1 * var(--gutter));
}
.span-ml-2 {
    margin-left: calc(2 * var(--column) + 2 * var(--gutter));
}
.span-ml-3 {
    margin-left: calc(3 * var(--column) + 3 * var(--gutter));
}
.span-ml-4 {
    margin-left: calc(4 * var(--column) + 4 * var(--gutter));
}
.span-ml-5 {
    margin-left: calc(5 * var(--column) + 5 * var(--gutter));
}
.span-ml-6 {
    margin-left: calc(6 * var(--column) + 6 * var(--gutter));
}
.span-ml-7 {
    margin-left: calc(7 * var(--column) + 7 * var(--gutter));
}
.span-ml-8 {
    margin-left: calc(8 * var(--column) + 8 * var(--gutter));
}
.span-ml-9 {
    margin-left: calc(9 * var(--column) + 9 * var(--gutter));
}
.span-ml-10 {
    margin-left: calc(10 * var(--column) + 10 * var(--gutter));
}
.span-ml-11 {
    margin-left: calc(11 * var(--column) + 11 * var(--gutter));
}

/* --- Spacing utilities --- */

.gutter-p {
    padding: var(--gutter);
}
.gutter-gap {
    gap: var(--gutter);
}
.margin-px {
    padding-left: var(--margin);
    padding-right: var(--margin);
}

/* --- E. Responsive resets --- */

/* Below desktop: reset large spans + all offsets */
@media (max-width: 1023px) {
    .span-w-7,
    .span-w-8,
    .span-w-9,
    .span-w-10,
    .span-w-11,
    .span-w-12 {
        width: 100%;
    }

    .span-ml-1,
    .span-ml-2,
    .span-ml-3,
    .span-ml-4,
    .span-ml-5,
    .span-ml-6,
    .span-ml-7,
    .span-ml-8,
    .span-ml-9,
    .span-ml-10,
    .span-ml-11 {
        margin-left: 0;
    }
}

/* Tablet-specific spans */
@media (min-width: 768px) and (max-width: 1023px) {
    .t-span-w-1 {
        width: calc(1 * var(--column));
        flex-shrink: 0;
    }
    .t-span-w-2 {
        width: calc(2 * var(--column) + 1 * var(--gutter));
        flex-shrink: 0;
    }
    .t-span-w-3 {
        width: calc(3 * var(--column) + 2 * var(--gutter));
        flex-shrink: 0;
    }
    .t-span-w-4 {
        width: calc(4 * var(--column) + 3 * var(--gutter));
        flex-shrink: 0;
    }
    .t-span-w-5 {
        width: calc(5 * var(--column) + 4 * var(--gutter));
        flex-shrink: 0;
    }
    .t-span-w-6 {
        width: calc(6 * var(--column) + 5 * var(--gutter));
        flex-shrink: 0;
    }
}

/* Mobile-specific spans */
@media (max-width: 767px) {
    .m-span-w-1 {
        width: calc(1 * var(--column));
        flex-shrink: 0;
    }
    .m-span-w-2 {
        width: calc(2 * var(--column) + 1 * var(--gutter));
        flex-shrink: 0;
    }
    .m-span-w-3 {
        width: calc(3 * var(--column) + 2 * var(--gutter));
        flex-shrink: 0;
    }
    .m-span-w-4 {
        width: calc(4 * var(--column) + 3 * var(--gutter));
        flex-shrink: 0;
    }
}

.container {
    height: 100svh;
}

.top-mobile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.logo-container {
    display: none;
    justify-content: end;
    align-items: start;
}

.mobile-logo {
    display: block;
}

.header {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    text-align: center;
    text-wrap: balance;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.center {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
    text-align: center;
    font-family: var(--font-body);
}

.footer {
    display: none;
    position: relative;
    padding: 2rem 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.75rem;
}

li {
    display: flex;
    gap: 0.625rem;
    font-family: var(--font-display);
}

li a {
    display: block;
    color: black;
    text-align: center;
    cursor: pointer;
    font-family: var(--font-body);
}

@media (min-width: 1024px) {
    .top-mobile {
        display: none;
    }

    .header {
        display: flex;
        flex-direction: row;
        padding: 3.75rem 0;
        gap: 1.25rem;
        font-family: var(--font-body);
        text-align: left;
        font-size: 1.8rem;
        top: auto;
        left: auto;
        transform: none;
    }

    li {
        align-items: center;
    }

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 3.125rem;
        font-size: 1.8rem;
    }

    .footer {
        display: flex;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        bottom: 0;
        padding: 2rem 0;
    }

    .logo-container {
        display: flex;
    }

    .center {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: auto;
        bottom: auto;
        text-align: center;
        font-size: 4.625rem;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .top-mobile {
        display: none;
    }
    .header {
        display: flex;
        flex-direction: row;
        padding: 3.75rem 0;
        gap: 1.25rem;
        font-family: var(--font-body);
        text-align: left;
        font-size: 1.2rem;
        top: auto;
        left: auto;
        transform: none;
    }

    .logo-container {
        display: flex;
    }

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 3.125rem;
        font-size: 1.2rem;
    }

    .center {
        top: 50%;
        left: 50%;
        width: auto;
        bottom: auto;
        transform: translate(-50%, -50%);
        --span-6: calc(6 * var(--column) + 5 * var(--gutter));
        width: var(--span-6);

        text-align: center;
    }

    .center span {
        font-size: clamp(3.2rem, calc(var(--span-6) * 0.12), 7rem);
    }

    .footer {
        display: flex;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        bottom: 0;
        padding: 1.25rem 0;
        font-size: 1.2rem;
    }
}

/* SplitLine — overflow-hidden reveal containers */
.y_ {
    overflow: hidden;
    display: block;
}
.y {
    display: block;
    will-change: transform;
}

/* Logo — overflow-hidden reveal container */
.logo-reveal_ {
    overflow: hidden;
    display: block;
}
.logo-reveal {
    display: block;
    will-change: transform;
}