:root {
    --bg: #eef3f4;
    --surface: #ffffff;
    --text: #1d2326;
    --muted: #5b666b;
    --accent: #0b7a6f;
    --border: #dce5e7;

    /* West-coast palette: ocean, sea, forest, cedar, dusk, sunset */
    --ocean: #1f5f99;
    --sea: #0b7a6f;
    --forest: #3a7a3e;
    --cedar: #b5651d;
    --dusk: #6b4f9e;
    --sunset: #c0483a;

    --header-bg: linear-gradient(120deg, #17406b 0%, #0f6a73 55%, #2f6e3c 100%);
    --header-text: #ffffff;
    --header-muted: rgba(255, 255, 255, 0.82);

    color-scheme: light;
}

/* Dark theme: its own hand-picked palette (deep blue-green night tones with
   lighter, slightly softened accents), not an inversion of the light one.
   Applied when the visitor picks dark, or when their system is dark and they
   haven't picked light. The two blocks must stay identical. */
:root[data-theme="dark"] {
    --bg: #0f1518;
    --surface: #182024;
    --text: #e2e8ea;
    --muted: #98a5aa;
    --accent: #4cc7b8;
    --border: #273238;

    --ocean: #72aee6;
    --sea: #4cc7b8;
    --forest: #85c78b;
    --cedar: #e5a46a;
    --dusk: #b39be6;
    --sunset: #f08b7d;

    --header-bg: linear-gradient(120deg, #0f2d4a 0%, #0b4a52 55%, #1f4b29 100%);

    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0f1518;
        --surface: #182024;
        --text: #e2e8ea;
        --muted: #98a5aa;
        --accent: #4cc7b8;
        --border: #273238;

        --ocean: #72aee6;
        --sea: #4cc7b8;
        --forest: #85c78b;
        --cedar: #e5a46a;
        --dusk: #b39be6;
        --sunset: #f08b7d;

        --header-bg: linear-gradient(120deg, #0f2d4a 0%, #0b4a52 55%, #1f4b29 100%);

        color-scheme: dark;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
}

.wrap {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 clamp(16px, 3vw, 40px);
}

header {
    background: var(--header-bg);
    color: var(--header-text);
    padding: 2.5rem 0 1.25rem;
}

h1 { margin: 0 0 1rem; font-size: clamp(1.5rem, 1rem + 2.5vw, 2.2rem); line-height: 1.25; }
h2 { margin-top: 0; font-size: 1.3rem; color: var(--c, var(--accent)); }

.title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }

.theme-toggle {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.3rem;
    padding: 0.3rem 0.8rem;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--header-text);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    cursor: pointer;
}
.theme-toggle:hover { background: rgba(255, 255, 255, 0.24); }
.theme-toggle:focus-visible, nav a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.theme-toggle svg { width: 1.05em; height: 1.05em; }
/* Show the moon while light (click for dark), the sun while dark (click for light) */
.theme-toggle .icon-sun, .theme-toggle[aria-pressed="true"] .icon-moon { display: none; }
.theme-toggle[aria-pressed="true"] .icon-sun { display: inline; }

@media (max-width: 600px) {
    .theme-toggle .label { display: none; }
    .theme-toggle { padding: 0.4rem; }
}

nav { display: flex; flex-wrap: wrap; gap: 0.5rem; }
nav a {
    color: var(--header-text);
    text-decoration: none;
    font-weight: 500;
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
}
nav a:hover { background: rgba(255, 255, 255, 0.24); }

/* Each section gets its own accent (--c): top stripe, heading, links and chips */
section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 4px solid var(--c, var(--accent));
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}
#project   { --c: var(--ocean); }
#repeaters { --c: var(--sea); }
#rooms     { --c: var(--cedar); }
#links     { --c: var(--dusk); }
#channels  { --c: var(--forest); }
#regions   { --c: var(--ocean); }
#contact   { --c: var(--sunset); }

section a { color: var(--c, var(--accent)); }

.links { list-style: none; margin: 0; padding: 0; }
.links li { padding: 0.6rem 0; border-top: 1px solid var(--border); }
.links li:first-child { border-top: 0; }
.links a { color: var(--c, var(--accent)); font-weight: 600; text-decoration: none; }
.links a:hover { text-decoration: underline; }
.links span { display: block; color: var(--muted); font-size: 0.95rem; }

.tags { color: var(--muted); font-size: 0.9rem; margin-top: 0.2rem; }
.tags code, .radio code, section p code, .links code {
    font-size: 0.85rem;
    color: var(--c, var(--text));
    background: color-mix(in srgb, var(--c, var(--accent)) 10%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 28%, var(--surface));
    border-radius: 4px;
    padding: 0.05rem 0.4rem;
}

/* About: text beside the island map on wider screens, map below on narrow ones */
.project-body { display: grid; gap: 1.5rem; align-items: start; isolation: isolate; } /* contains the map glow's z-index:-1 layers */
@media (min-width: 800px) {
    .project-body { grid-template-columns: 1fr minmax(300px, 480px); gap: 2.5rem; }
}

/* Rotating glow border: @property makes --map-angle a real <angle>, so it can be animated.
   Two conic-gradient layers sit 2px outside the (opaque) map box: ::after is the crisp
   ring, ::before is a blurred copy for the glow. Browsers without @property show a static ring. */
@property --map-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
.map {
    position: relative;          /* no z-index: .map must not be a stacking context, or its own background would paint under the glow */
    margin: 0;
    padding: 0.75rem 0.75rem 0.5rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ocean) 9%, var(--surface));
}
.map::before,
.map::after {
    content: '';
    position: absolute;
    inset: -2px;
    z-index: -1;
    border-radius: 10px;
    background: conic-gradient(from var(--map-angle),
        var(--ocean), var(--sea), var(--forest), var(--cedar), var(--sunset), var(--dusk), var(--ocean));
    animation: map-glow-spin 5s linear infinite;
}
.map::before { filter: blur(12px); opacity: 0.45; }
@keyframes map-glow-spin { to { --map-angle: 360deg; } }
.map svg { display: block; width: 100%; height: auto; overflow: visible; }
.map figcaption { margin-top: 0.4rem; color: var(--muted); font-size: 0.85rem; text-align: center; }

.map-land {
    fill: color-mix(in srgb, var(--forest) 22%, var(--surface));
    stroke: var(--forest);
    stroke-width: 1.4;
    stroke-linejoin: round;
}
.map svg text { font-family: inherit; }
.map-sea { fill: color-mix(in srgb, var(--ocean) 65%, var(--surface)); font-size: 17px; font-style: italic; }
.map-island {
    fill: color-mix(in srgb, var(--forest) 70%, var(--surface));
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-anchor: middle;
}
.map-label {
    fill: var(--text);
    font-size: 19px;
    font-weight: 600;
    paint-order: stroke;
    stroke: color-mix(in srgb, var(--ocean) 9%, var(--surface));
    stroke-width: 5px;
    stroke-linejoin: round;
}
.map-highlight { fill: var(--sunset); }
.map-city { fill: var(--text); }
.map-dot { fill: var(--sunset); }
.map-ring { fill: none; stroke: var(--sunset); stroke-width: 2.5; }
.map-pulse {
    fill: var(--sunset);
    opacity: 0.35;
    transform-box: fill-box;
    transform-origin: center;
    animation: map-pulse 2.4s ease-out infinite;
}
@keyframes map-pulse {
    from { transform: scale(1); opacity: 0.35; }
    to   { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .map-pulse { animation: none; opacity: 0.2; transform: scale(1.8); }
    .map::before, .map::after { animation: none; }
}

.links .xref { margin-top: 0.25rem; font-size: 0.9rem; }
/* Brief highlight when jumping to a cross-referenced link */
.links li:target { background: color-mix(in srgb, var(--c, var(--accent)) 10%, transparent); border-radius: 6px; padding-left: 0.5rem; padding-right: 0.5rem; }

.scope { display: block; color: var(--muted); font-size: 0.9rem; }
.note { color: var(--muted); font-size: 0.9rem; margin-bottom: 0; }

.soon { color: var(--muted); font-size: 0.9rem; }

h3 { font-size: 1.05rem; margin: 1.5rem 0 0.25rem; }

.radio { border-collapse: collapse; width: 100%; }
.radio th, .radio td { text-align: left; padding: 0.4rem 0; border-top: 1px solid var(--border); }
.radio th { font-weight: 500; color: var(--muted); width: 30%; padding-right: 1rem; }

/* Two columns on wide screens with fixed placement; narrow screens keep source order */
@media (min-width: 1000px) {
    main {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "project   project"
            "repeaters rooms"
            "repeaters links"
            "channels  regions"
            "contact   contact";
        gap: 1.5rem;
    }
    /* main.wrap (not main) so this outranks .wrap's padding shorthand */
    main.wrap { padding-top: 1.5rem; padding-bottom: 1.5rem; }
    main section { margin: 0; }
    #project   { grid-area: project; }
    #repeaters { grid-area: repeaters; }
    #rooms     { grid-area: rooms; }
    #links     { grid-area: links; }
    #channels  { grid-area: channels; }
    #regions   { grid-area: regions; }
    #contact   { grid-area: contact; }
}

/* ---- Hosting FAQ page (faq.php) ----
   Each question is its own card; accents cycle through the palette. */
#faq-intro { --c: var(--sea); }
.faq { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: 1.5rem; }
.faq > li { display: flex; scroll-margin-top: 1rem; }   /* flex: cards in a row share its height */
.faq > li > section { flex: 1; margin: 0; }
.faq > li:nth-child(6n+1) { --c: var(--ocean); }
.faq > li:nth-child(6n+2) { --c: var(--sea); }
.faq > li:nth-child(6n+3) { --c: var(--forest); }
.faq > li:nth-child(6n+4) { --c: var(--cedar); }
.faq > li:nth-child(6n+5) { --c: var(--dusk); }
.faq > li:nth-child(6n+6) { --c: var(--sunset); }
.faq > li:target > section { box-shadow: 0 0 0 2px var(--c); }
.faq h2 { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 1.15rem; }
.faq-num {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    margin-top: 0.05rem;
    border-radius: 999px;
    font-size: 0.95rem;
    color: var(--surface);
    background: var(--c);
}
.faq ul { margin: 0; padding-left: 1.2rem; }
.faq ul li + li { margin-top: 0.4rem; }
.faq section > :last-child { margin-bottom: 0; }

@media (min-width: 1000px) {
    main.faq-page { display: block; }          /* opt out of the main page's grid areas */
    .faq { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    section { padding: 1.1rem; }
    .radio th { width: 40%; }
}

footer { color: var(--muted); font-size: 0.9rem; padding: 0 0 2rem; text-align: right; }
footer p { margin: 0; }