/* =========================
   RESET / BASE
========================= */

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    color: #000;
}

/* =========================
   CANVAS (BACKGROUND + INTERACTION)
   canvas receives clicks where not covered by text
========================= */

#canvas {
    position: fixed;
    inset: 0;
    z-index: 0;

    pointer-events: auto;
    cursor: default;

    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: none;

    background: transparent;
}

/* =========================
   GRID (VISUAL LAYER)
   - visually above the canvas
   - not interactive by default so clicks fall through
   - contains the typographic layout
========================= */

.grid {
    position: fixed;
    inset: 0;
    padding: 1rem;

    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;

    z-index: 10;

    /* force above canvas compositing layer so text paints on top */
    transform: translateZ(0);

    /* allow canvas clicks to pass through empty areas */
    pointer-events: none;

    opacity: 0;
    transition: opacity 2s ease 1s;
}

body.ready .grid {
    opacity: 1;
}

/* block containers themselves should not catch clicks (avoids capturing blank areas) */
.grid > .block {
    pointer-events: none;
    position: relative;
}

/* =========================
   TEXT ELEMENTS (interactive/selectable)
   only these capture pointer events
========================= */

.grid h4,
.grid p,
.grid a {
    pointer-events: auto; /* text selectable, links tappable */
    position: relative;
    z-index: 11;
}

.grid a {
    display: block; /* one per line */
    text-decoration: none; /* no underline */
    color: inherit; /* not blue */
    /*cursor: default; !* no hand cursor on these brand links *!*/
}


/* =========================
   COLUMNS
========================= */

.col-2 {
    grid-column: span 2;
}

.col-6 {
    grid-column: 7 / span 6;
}

/* Avoid clipping/scrollbars on large paragraph */
.col-6 {
    overflow: visible;
    max-height: none;
}

/* =========================
   TYPOGRAPHY
========================= */

h4 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: normal;
    line-height: 1;
    letter-spacing: -0.01em;
}

p, a {
    margin: 0;
    line-height: 1;
    letter-spacing: -0.02em;
}

/* =========================
   CONTACT (TOPMOST)
   contact is interactive and shows pointer
========================= */

.contact {
    position: fixed;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%) translateZ(0);

    z-index: 20;
    pointer-events: auto;

    text-align: right;
    cursor: pointer;

    opacity: 0;
    transition: opacity 2s ease 1s;
}

body.ready .contact {
    opacity: 1;
}

/* show mail on hover on desktop -- on mobile contact mail is always visible via media rules */
.contact .mail {
    display: none;
}

.contact:hover .label {
    display: none;
}

.contact:hover .mail {
    display: block;
}

/* make the contact anchor show pointer and be clearly interactive */
.contact a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* =========================
   CREDITS (hidden by default)
========================= */

.credits {
    display: none;
    position: fixed;
    left: 1rem;
    bottom: 0.75rem;
    font-size: 0.75rem;
    letter-spacing: -0.01em;
    opacity: 0.2;
    pointer-events: none;
    z-index: 10;
}

/* =========================
   MOBILE LAYOUT
========================= */

@media (max-width: 768px), (max-aspect-ratio: 4/5) {

    .grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto 1fr auto;
        min-height: 100svh; /* modern adaptive viewport */
    }

    .col-2 {
        grid-column: span 1;
    }

    .col-6 {
        grid-column: 1 / -1;
        align-self: end;
        padding-bottom: 1rem;
    }

    .contact {
        top: auto;
        bottom: 0rem;
        left: 1rem;
        right: auto;
        transform: translateZ(0);
        text-align: left;
    }

    .contact .label {
        display: none;
    }

    .contact .mail {
        display: block;
        font-size: 0.75rem;
    }
}

/* =========================
   SMALL HELPERS (optional)
========================= */

/* Debug helper (uncomment during dev to see hit zones)
.grid { outline: 1px dashed rgba(0,0,0,0.06); }
.grid > .block { background: rgba(255,255,255,0.001); } */