:root {
    --ink: #1a1a1a;
    --muted: #666;
    --paper: #f7f5f0;
    --accent: #2c5f4a;
    --frame-inset: 14px;
    --frame-border: 10px;
    --frame-radius: 28px;
}

* { box-sizing: border-box; }

html {
    height: 100%;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 20% 10%, #e8efe9 0%, transparent 50%),
        radial-gradient(ellipse at 80% 90%, #ebe4d8 0%, transparent 45%),
        var(--paper);
}

body {
    /* Body IS the frame: overflow+radius clips all content (incl. thumbs). */
    position: absolute;
    inset: var(--frame-inset);
    margin: 0;
    border: var(--frame-border) solid #000;
    border-radius: var(--frame-radius);
    overflow: hidden;
    isolation: isolate;
    transform: translateZ(0);
    display: flex;
    flex-direction: column;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--ink);
    background:
        radial-gradient(ellipse at 20% 10%, #e8efe9 0%, transparent 50%),
        radial-gradient(ellipse at 80% 90%, #ebe4d8 0%, transparent 45%),
        var(--paper);
}

a {
    color: inherit;
}

.site-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.25rem 1.75rem;
    padding: 1rem 1.25rem 0.5rem;
    flex-shrink: 0;
}

.site-nav a {
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: var(--muted);
    border-bottom: 2px solid transparent;
    padding-bottom: 0.15rem;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.site-nav a:hover,
.site-nav a.active {
    color: var(--accent);
}

.site-nav a.active {
    border-bottom-color: var(--accent);
}