/* ─── Reset ─── */

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

/* ─── Tokens ─── */

:root {
    --font: 'Geist', -apple-system, sans-serif;
    --text: #1a1a1a;
    --muted: #999;
    --disabled: #ccc;
    --bg: #f6f6f6;
    --size: 12px;
    --weight: 500;
    --weight-body: 400;
    --edge: 36px;
    --transition: color 0.2s ease;
}

@media (max-width: 768px) {
    :root { --edge: 28px; }
}

@media (max-width: 480px) {
    :root { --edge: 20px; }
}

/* ─── Base ─── */

html, body {
    height: 100%;
}

body {
    font-family: var(--font);
    font-size: var(--size);
    font-weight: var(--weight);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ─── Corner Links ─── */

.corner {
    position: absolute;
    transition: var(--transition);
}

.corner.tl { top: 32px; left: var(--edge); }
.corner.tr { top: 32px; right: var(--edge); }
.corner.bl { bottom: var(--edge); left: var(--edge); }
.corner.br { bottom: var(--edge); right: var(--edge); }

.corner.muted {
    color: var(--muted);
}

.corner.muted:hover {
    color: var(--text);
}

/* ─── Center ─── */

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ─── Nav ─── */

.nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: var(--text);
}

.nav-btn:hover svg path {
    stroke: #000;
}

.nav.single .nav-btn {
    color: var(--disabled);
    cursor: default;
}

/* ─── Timer ─── */

.timer {
    color: var(--muted);
    font-weight: var(--weight-body);
    font-variant-numeric: tabular-nums;
}

/* ─── About ─── */

.about {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: fit-content;
    padding: 0;
}

.about p {
    line-height: 1.7;
    font-weight: var(--weight-body);
}

.about .name,
.about .location {
    font-weight: var(--weight-body);
}

.about .paragraphs {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.about .location {
    display: flex;
    align-items: center;
    gap: 6px;
}

.about .location .sep,
.about .location .email {
    color: var(--muted);
    transition: var(--transition);
}

.about .location .email:hover {
    color: var(--text);
}

@media (max-width: 768px) {
    .about { gap: 28px; }
    .about .location { gap: 8px; }
    .corner.tl { top: var(--edge); }
    .corner.tr { top: var(--edge); }
}

@media (max-width: 480px) {
    .about { gap: 12px; }
}

/* ─── Page ─── */

.page {
    position: relative;
    width: 100%;
    height: 100%;
}

/* ─── Full Bleed Project ─── */

.project {
    position: absolute;
    inset: 0;
    transition: background-color 0.6s ease;
}

/* ─── UI Overlay ─── */

.ui {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ui a, .ui button, .ui span, .ui canvas, .ui input, .ui form {
    pointer-events: auto;
}