/* Keep the original school video and navigation usable on small screens. */
* { box-sizing: border-box; }
#boids-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    opacity: .1;
    pointer-events: none;
}
#container { position: relative; z-index: 1; background: transparent; }
body { line-height: 1.7; }
header h1, nav.toplink, nav.glink, #main-container, article {
    width: min(100%, 960px);
    max-width: 100%;
}
header h1 { margin-bottom: 12px; }
header h1 a { display: flex; align-items: center; gap: 8px; }
#kosyo { width: 52px; float: none; margin: 0; }
#title { width: min(320px, calc(100% - 60px)); }
nav.toplink { margin-top: 0; margin-bottom: 12px; }
nav ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
nav.glink a { flex: 1 1 auto; }
nav.glink li { padding: 8px 12px; }
#main-container { padding: 0 16px; }
figure.photo-top { margin: 0 0 16px; }
figure.photo-top img, video { width: 100%; height: auto; display: block; }
article { overflow-wrap: anywhere; }
article h1 { font-size: clamp(24px, 5vw, 32px); border-left-width: 6px; }
footer { position: static; height: auto; padding: 16px; margin-top: 24px; }
footer a { color: white; text-decoration: underline; }
a:focus-visible { outline: 3px solid #9e1a20; outline-offset: 3px; }
footer a:focus-visible { outline-color: white; }

@media (max-width: 1023px) {
    article,
    article p {
        font-size: 18px;
        line-height: 1.7;
    }
    article .pv-direct-link {
        font-size: 18px;
        line-height: 1.7;
    }
    nav.toplink a,
    nav.glink a {
        font-size: 18px;
        line-height: 1.7;
    }
    .bread a {
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        font-size: 18px;
        line-height: 1.7;
    }
}