@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap');

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

body {
    background: #c9c4b8;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    margin: 0;
}

.tile-grid {
    --tile-size: min(calc((100vw - 48px) / 8), 65px);
    display: grid;
    grid-template-columns: repeat(8, var(--tile-size));
    grid-template-rows: repeat(8, var(--tile-size));
    grid-auto-flow: dense;
    gap: 3px;
    background: #b8b0a0;
    padding: 3px;
    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,0.05),
        0 12px 48px rgba(0,0,0,0.18);
}

/* Base tile */
.tile {
    position: relative;
    overflow: hidden;
    border-radius: 1px;
    width: 100%;
    height: 100%;
}

/* Ceramic glaze depth */
.tile::before {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow:
        inset 0 0 12px rgba(0,0,0,0.1),
        inset 0 0 3px rgba(0,0,0,0.06);
    pointer-events: none;
    z-index: 1;
}

/* Surface light */
.tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.18) 0%,
        rgba(255,255,255,0.04) 30%,
        transparent 50%
    );
    pointer-events: none;
    z-index: 2;
}

/* === DEEP FOREST GREENS === */

.tile.forest {
    background:
        radial-gradient(ellipse at 30% 30%, #4a5c3e 0%, transparent 55%),
        radial-gradient(ellipse at 70% 70%, #354830 0%, transparent 50%),
        linear-gradient(145deg, #3f5234 0%, #35462c 50%, #2b3a24 100%);
}

.tile.forest-2 {
    background:
        radial-gradient(ellipse at 55% 25%, #465838 0%, transparent 50%),
        radial-gradient(ellipse at 30% 70%, #324228 0%, transparent 50%),
        linear-gradient(150deg, #3a4c30 0%, #314226 50%, #283820 100%);
}

.tile.forest-3 {
    background:
        radial-gradient(ellipse at 40% 55%, #425636 0%, transparent 50%),
        radial-gradient(ellipse at 75% 25%, #384a2e 0%, transparent 45%),
        linear-gradient(140deg, #3c4e32 0%, #33442a 50%, #2a3922 100%);
}

/* === SAGE GREENS === */

.tile.sage {
    background:
        radial-gradient(ellipse at 35% 30%, #a8bc94 0%, transparent 50%),
        radial-gradient(ellipse at 70% 70%, #8fa67a 0%, transparent 50%),
        linear-gradient(145deg, #9db588 0%, #92a87d 50%, #859a70 100%);
}

.tile.sage-2 {
    background:
        radial-gradient(ellipse at 50% 25%, #b0c49c 0%, transparent 55%),
        radial-gradient(ellipse at 25% 70%, #8a9e76 0%, transparent 50%),
        linear-gradient(150deg, #a0b48c 0%, #96aa82 50%, #8a9e76 100%);
}

.tile.sage-3 {
    background:
        radial-gradient(ellipse at 60% 40%, #9aad86 0%, transparent 50%),
        radial-gradient(ellipse at 30% 75%, #889b74 0%, transparent 50%),
        linear-gradient(135deg, #94a880 0%, #8c9f78 50%, #7f9268 100%);
}

/* === OLIVE GREENS === */

.tile.olive {
    background:
        radial-gradient(ellipse at 40% 35%, #a09858 0%, transparent 50%),
        radial-gradient(ellipse at 65% 70%, #8a8248 0%, transparent 50%),
        linear-gradient(145deg, #969050 0%, #8a8446 50%, #7c763c 100%);
}

.tile.olive-2 {
    background:
        radial-gradient(ellipse at 55% 30%, #9c9454 0%, transparent 50%),
        radial-gradient(ellipse at 30% 65%, #888042 0%, transparent 50%),
        linear-gradient(140deg, #928c4c 0%, #868044 50%, #78723a 100%);
}

/* === TEAL GREENS === */

.tile.teal {
    background:
        radial-gradient(ellipse at 35% 35%, #6a9a8c 0%, transparent 50%),
        radial-gradient(ellipse at 70% 70%, #4a7a6c 0%, transparent 50%),
        linear-gradient(145deg, #5c8c7e 0%, #4e7e70 50%, #427062 100%);
}

.tile.teal-2 {
    background:
        radial-gradient(ellipse at 50% 30%, #5e8e80 0%, transparent 55%),
        radial-gradient(ellipse at 30% 70%, #3e6e60 0%, transparent 50%),
        linear-gradient(150deg, #528274 0%, #467466 50%, #3a6658 100%);
}

/* === MOSS GREENS === */

.tile.moss {
    background:
        radial-gradient(ellipse at 30% 30%, #8ca860 0%, transparent 50%),
        radial-gradient(ellipse at 70% 65%, #6a8840 0%, transparent 50%),
        linear-gradient(145deg, #7c9850 0%, #6e8a44 50%, #607c38 100%);
}

.tile.moss-2 {
    background:
        radial-gradient(ellipse at 55% 35%, #84a058 0%, transparent 50%),
        radial-gradient(ellipse at 35% 70%, #648038 0%, transparent 50%),
        linear-gradient(140deg, #769248 0%, #68843c 50%, #5a7630 100%);
}

/* === CREAM TILES === */

.tile.cream {
    background:
        radial-gradient(ellipse at 35% 30%, #f8f4ea 0%, transparent 45%),
        radial-gradient(ellipse at 70% 75%, #ebe5d8 0%, transparent 50%),
        linear-gradient(145deg, #f4f0e5 0%, #ede8dc 50%, #e5dfd2 100%);
}

.tile.cream-2 {
    background:
        radial-gradient(ellipse at 55% 25%, #f6f2e8 0%, transparent 50%),
        radial-gradient(ellipse at 30% 70%, #e8e2d5 0%, transparent 50%),
        linear-gradient(150deg, #f0ece2 0%, #eae4d8 50%, #e2dccf 100%);
}

.tile.cream-warm {
    background:
        radial-gradient(ellipse at 40% 35%, #faf5e8 0%, transparent 45%),
        radial-gradient(ellipse at 65% 70%, #ede6d6 0%, transparent 50%),
        linear-gradient(140deg, #f5f0e3 0%, #efe9db 40%, #e7e0d0 100%);
}

/* === CONTENT TILES WITH EXPLICIT POSITIONS === */

.tile.name {
    grid-column: 3 / 5;
    grid-row: 2 / 4;
}

.tile.role {
    grid-column: 2 / 4;
    grid-row: 4 / 5;
}

.tile.company {
    grid-column: 5 / 7;
    grid-row: 5 / 6;
}

.tile.contact {
    grid-column: 4 / 5;
    grid-row: 6 / 7;
}

/* === CONTENT STYLES === */

.tile.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px;
    text-align: center;
}

.tile.name h1 {
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.9rem, 2.8vw, 1.3rem);
    font-weight: 500;
    color: #2a3024;
    letter-spacing: 0.01em;
    position: relative;
    z-index: 3;
}

.tile.role p {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: #3a4534;
    position: relative;
    z-index: 3;
    font-size: clamp(0.45rem, 1.4vw, 0.65rem);
    line-height: 1.2;
}

.tile.role .field {
    font-size: clamp(0.4rem, 1.1vw, 0.55rem);
    color: #5a6854;
    margin-top: 2px;
    font-weight: 300;
}

.tile.company a {
    text-decoration: none;
    color: #3a4534;
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tile.company a:hover {
    color: #2a3024;
}

.tile.company p {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(0.45rem, 1.4vw, 0.62rem);
}

.tile.company .location {
    font-weight: 300;
    font-size: clamp(0.4rem, 1.1vw, 0.52rem);
    color: #5a6854;
    margin-top: 1px;
}

.tile.contact a {
    position: relative;
    z-index: 3;
    display: block;
}

.tile.contact .icon {
    width: clamp(16px, 3vw, 22px);
    height: clamp(16px, 3vw, 22px);
    fill: #3a4534;
}

/* === DECORATIVE SVG === */

.tile .decor {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    opacity: 0.45;
    width: 70%;
    height: 70%;
}

.tile .decor path,
.tile .decor ellipse,
.tile .decor circle {
    fill: none;
    stroke: rgba(255,255,255,0.55);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tile .decor .leaf-fill {
    fill: rgba(255,255,255,0.15);
    stroke: rgba(255,255,255,0.45);
}

.tile .decor .petal {
    fill: rgba(255,255,255,0.18);
    stroke: rgba(255,255,255,0.4);
    stroke-width: 0.8;
}

.tile .decor .center {
    fill: rgba(200,175,100,0.5);
    stroke: rgba(200,175,100,0.6);
    stroke-width: 0.8;
}

/* Rotations */
.tile .decor.rot-15 { transform: translate(-50%, -50%) rotate(15deg); }
.tile .decor.rot-30 { transform: translate(-50%, -50%) rotate(30deg); }
.tile .decor.rot-45 { transform: translate(-50%, -50%) rotate(45deg); }
.tile .decor.rot--15 { transform: translate(-50%, -50%) rotate(-15deg); }
.tile .decor.rot--30 { transform: translate(-50%, -50%) rotate(-30deg); }
.tile .decor.rot--45 { transform: translate(-50%, -50%) rotate(-45deg); }
.tile .decor.rot-90 { transform: translate(-50%, -50%) rotate(90deg); }

/* === RESPONSIVE === */

@media (max-width: 580px) {
    body {
        padding: 12px;
    }

    .tile-grid {
        --tile-size: calc((100vw - 32px) / 8);
        gap: 2px;
        padding: 2px;
    }

    .tile.name h1 {
        font-size: clamp(0.85rem, 3.5vw, 1.2rem);
    }

    .tile.role p,
    .tile.company p {
        font-size: clamp(0.4rem, 1.6vw, 0.6rem);
    }

    .tile.role .field,
    .tile.company .location {
        font-size: clamp(0.35rem, 1.3vw, 0.5rem);
    }
}

@media (max-width: 380px) {
    body {
        padding: 8px;
    }

    .tile-grid {
        --tile-size: calc((100vw - 24px) / 8);
    }
}