body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100%;
    max-height: 100%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    line-height: 1.45;
    color: #1a1a1a;
}

#header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 60%, #161616 0%, #050505 100%);
    color: #f1ead6;
}

#logo {
    padding: 16px 18px 0 18px;
}

#logo h1 {
    margin: 0;
    font-family: 'Perfect DOS VGA 437', "Courier New", monospace;
    font-size: 2.5em;
    color: #f1ead6;
    letter-spacing: 0.02em;
    /* subtle CRT glow */
    text-shadow:
        0 0 1px rgba(241, 234, 214, 0.9),
        0 0 6px rgba(241, 234, 214, 0.25),
        0 0 12px rgba(241, 234, 214, 0.12);
}

.zx-stripe {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px;
    display: flex;
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.05) inset;
}

.zx-stripe span {
    flex: 1 1 0;
    height: 100%;
    display: block;
}

#nav {
    position: absolute;
    top: 100px;
    left: 0;
    bottom: 0;
    width: 230px;
    overflow: auto;
    color: #1a1a1a;
    border-right: 1px solid #0a0a0a;
    background-color: #f1ead6;
    background-image:
        radial-gradient(rgba(60, 40, 10, 0.07) 1px, transparent 1.4px),
        radial-gradient(rgba(60, 40, 10, 0.04) 1px, transparent 1.4px);
    background-size: 6px 6px, 14px 14px;
    background-position: 0 0, 3px 3px;
    box-shadow: inset 0 0 24px rgba(80, 55, 20, 0.08);
}

.innertube {
    margin: 16px 14px 24px 14px;
}

main {
    position: fixed;
    top: 100px;
    left: 230px;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background: #fff;
    border-left: 1px solid #0a0a0a;
}

main iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav .menu-root > li {
    margin-bottom: 16px;
}

/* Quick links */
.quicklinks {
    margin-bottom: 20px;
    padding: 8px 8px 12px 8px;
    border: 1px solid rgba(10, 10, 10, 0.6);
    background: rgba(255, 255, 255, 0.35);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.quicklinks a {
    color: #0026d8;
    text-decoration: none;
    font-size: 0.92em;
    padding: 1px 3px;
}

.quicklinks a:hover {
    background: #ffd800;
    color: #000;
}

/* Section heading — pixel font + colour swatch */
.section-title {
    display: flex;
    align-items: center;
    font-family: 'VT323', 'Perfect DOS VGA 437', "Courier New", monospace;
    font-size: 1.35em;
    font-weight: normal;
    color: #1a1a1a;
    letter-spacing: 0.02em;
    line-height: 1;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 2px solid #1a1a1a;
    text-transform: none;
}

.section-title::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    border: 1px solid rgba(0, 0, 0, 0.55);
    background: #999;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
}

/* Spectrum colour swatches */
.section[data-zx="red"]     .section-title::before { background: #d70000; }
.section[data-zx="yellow"]  .section-title::before { background: #ffd800; }
.section[data-zx="green"]   .section-title::before { background: #00c000; }
.section[data-zx="cyan"]    .section-title::before { background: #00c8c8; }
.section[data-zx="magenta"] .section-title::before { background: #c800c8; }
.section[data-zx="blue"]    .section-title::before { background: #0026d8; }
.section[data-zx="white"]   .section-title::before { background: #ffffff; }
.section[data-zx="black"]   .section-title::before { background: #0a0a0a; }

/* Section items */
nav .section > ul {
    padding-left: 22px;
    margin-bottom: 4px;
}

nav .section > ul > li {
    list-style: square;
    color: #5a5246;
    font-size: 0.93em;
    padding: 1px 4px;
    transition: background-color 0.08s linear;
}

nav .section > ul > li::marker {
    color: #b8a888;
}

nav .section > ul > li a {
    color: #0026d8;
    text-decoration: none;
    display: inline-block;
}

nav .section > ul > li:has(a) {
    color: #0026d8;
}

nav .section > ul > li:has(a)::marker {
    color: #0026d8;
}

/* Spectrum INK 0 / PAPER 6 hover — yellow highlight */
nav .section > ul > li:has(a):hover {
    background: #ffd800;
}

nav .section > ul > li:has(a):hover > a {
    color: #000;
}

nav .section > ul > li:has(a):hover::marker {
    color: #000;
}

/* ---------- Graveyard ---------- */
.graveyard .section-title {
    color: #2a2620;
}

.graveyard .section-blurb {
    margin: 6px 0 8px 0;
    font-size: 0.82em;
    font-style: italic;
    color: #6a6258;
}

.graveyard > ul > li {
    font-style: italic;
    color: #6a6258;
}

.graveyard > ul > li.placeholder {
    color: #8a8278;
}

/* Legacy IE crumb */
* html body { padding: 100px 0 0 230px; }
* html main { height: 100%; width: 100%; }

/* Mobile */
@media (max-width: 700px) {
    #header { height: 70px; }
    #logo h1 { font-size: 1.7em; }
    .zx-stripe { height: 8px; }
    #nav {
        position: static;
        width: auto;
        height: auto;
        max-height: 50vh;
        top: auto;
        border-right: none;
        border-bottom: 1px solid #0a0a0a;
    }
    main {
        position: static;
        height: calc(100vh - 70px - 50vh);
        left: 0;
    }
    body { overflow: auto; }
}