/* shared layout for the 3-column .layout grid (home / links / shrine).
   colors/fonts/spacing come from _tokens.css; override per-page in
   the page css. load order: _tokens → _shell → page */

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: var(--gap);
    background-image: var(--bg-image);
    background-size: 240px;
    background-position: top left;
    background-repeat: repeat;
    color: var(--text);
    font-family: var(--font-main);
    font-size: 14px;
    line-height: 1.5;
    display: flex;
    justify-content: center;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.layout {
    display: grid;
    width: 100%;
    max-width: 1200px;
    grid-gap: var(--gap);
    grid-template-areas:
        "header  header  header"
        "left    main    right"
        "footer  footer  footer";
    grid-template-columns: var(--sidebar-w) 1fr var(--sidebar-w);
}

header {
    grid-area: header;
    border: 2px solid var(--border-color);
    background: var(--content-bg);
    padding: var(--pad);
}

.left-side { grid-area: left; }

.right-side { grid-area: right; }

main {
    grid-area: main;
    border: 2px solid var(--border-color);
    background: var(--content-bg);
    padding: var(--pad);
}

footer {
    grid-area: footer;
    border: 2px solid var(--border-color);
    background: var(--content-bg);
    padding: var(--pad);
    text-align: center;
    min-width: none;
    max-width: 100%;
}

aside { border: 2px solid var(--border-color); background: var(--content-bg); padding: var(--pad); }

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nav-title {
    font-family: var(--font-head);
    font-weight: bold;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--text);
}

nav a { text-decoration: none; color: var(--accent); font-weight: bold; }
nav a:hover { color: var(--accent-hover); text-decoration: underline; }

.sidebar-title { font-family: var(--font-head); font-weight: bold; font-size: 1.1em; margin-bottom: 10px; }
.section { margin-bottom: 2rem; }

@media (max-width: 800px) {
    .layout {
        grid-template-areas:
            "header"
            "right"
            "main"
            "left"
            "footer";
        grid-template-columns: minmax(0, 1fr);
    }

    nav ul {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }
}