@font-face { font-family: Inter; src: url('/assets/fonts/Inter-400.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url('/assets/fonts/Inter-500.ttf') format('truetype'); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: Inter; src: url('/assets/fonts/Inter-600.ttf') format('truetype'); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: Inter; src: url('/assets/fonts/Inter-700.ttf') format('truetype'); font-style: normal; font-weight: 700; font-display: swap; }

:root {
    color-scheme: dark;
    font-family: Inter, sans-serif;
    color: #f5f5f5;
    background: #030507;
    --cyan: #00b5d8;
}

* { box-sizing: border-box; }

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 50% 43%, rgba(0, 181, 216, .035), transparent 38rem),
        #030507;
}

main {
    min-height: 100vh;
    display: grid;
    grid-template-rows: 1fr auto;
}

.identity {
    width: min(1380px, calc(100% - 64px));
    margin: auto;
    padding: 8vh 0 2vh;
}

.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(28px, 4vw, 68px);
}

.code-mark {
    display: block;
    width: clamp(280px, 34vw, 490px);
    height: auto;
    object-fit: contain;
}

.divider {
    width: 2px;
    height: clamp(150px, 22vw, 240px);
    background: var(--cyan);
}

.word-mark {
    display: block;
    width: clamp(440px, 50vw, 750px);
    height: auto;
    object-fit: contain;
}

.disciplines {
    display: block;
    width: 100%;
    height: auto;
    margin: clamp(75px, 12vh, 135px) auto 0;
    object-fit: contain;
}

.contact {
    justify-self: center;
    margin: 0 0 26px;
    color: #66707a;
    font-size: .7rem;
    letter-spacing: .13em;
    text-decoration: none;
    transition: color .2s ease;
}

.contact:hover,
.contact:focus-visible { color: var(--cyan); }

@media (max-width: 900px) {
    .identity { width: min(680px, calc(100% - 34px)); padding-top: 50px; }
    .brand { align-items: center; gap: 18px; }
    .code-mark { width: clamp(170px, 39vw, 300px); }
    .divider { height: clamp(90px, 24vw, 150px); }
    .word-mark { width: clamp(250px, 53vw, 440px); }
    .disciplines { width: 100%; max-width: 100%; margin-top: 80px; }
}

@media (max-width: 520px) {
    main { min-height: 100svh; }
    .brand { display: grid; grid-template-columns: 1fr; justify-items: center; }
    .divider { width: 70%; height: 1px; }
    .word-mark { width: min(100%, 440px); }
    .disciplines { width: 100%; margin-top: 55px; }
}