/*
 * Zephyr 2: Open Skies
 * Shares the responsive structure of Quest Terminal, with an airy wind palette.
 */

@import url("../zephyr-1/zephyr-1.css");

:root,
body.light-mode {
    --page-bg: #edf8ff;
    --page-bg-soft: #dff3fc;
    --surface: #ffffff;
    --surface-strong: #d8edf6;
    --surface-hover: #e5f5fb;
    --text: #163244;
    --muted: #4b6574;
    --faint: #597381;
    --cyan: #075e75;
    --cyan-strong: #075e75;
    --green: #215d4d;
    --gold: #765700;
    --ember: #a33b28;
    --purple: #6d4ccb;
    --border: #9bcddd;
    --header-bg: #075e75;
    --header-text: #ffffff;
    --shadow: rgba(31, 91, 117, 0.18);
    --focus: #673a00;
    --sky-light: #fafdff;
    --sky-mid: #b9e4f5;
    --sky-deep: #63b7d5;
}

body.dark-mode {
    --page-bg: #07151d;
    --page-bg-soft: #0a2430;
    --surface: #0e2a36;
    --surface-strong: #133a49;
    --surface-hover: #17495a;
    --text: #e8f5fa;
    --muted: #acc6d0;
    --faint: #94b0ba;
    --cyan: #5ed6f2;
    --cyan-strong: #8de3f5;
    --green: #72dfb0;
    --gold: #f2d66d;
    --ember: #ff8a70;
    --purple: #b99cff;
    --border: #2f7186;
    --header-bg: #0b4053;
    --header-text: #f3fbff;
    --shadow: rgba(0, 0, 0, 0.35);
    --focus: #ffe37e;
    --sky-light: #123645;
    --sky-mid: #17475a;
    --sky-deep: #216780;
}

html {
    background: var(--page-bg);
}

body {
    background:
        radial-gradient(circle at 12% 7rem, rgba(255, 255, 255, 0.92) 0 5rem, transparent 16rem),
        radial-gradient(circle at 88% 17rem, rgba(255, 255, 255, 0.68) 0 4rem, transparent 15rem),
        linear-gradient(180deg, var(--page-bg-soft) 0, var(--page-bg) 30rem, var(--sky-light) 70rem);
    color-scheme: light;
}

body.dark-mode {
    background:
        radial-gradient(circle at 15% 4rem, rgba(94, 214, 242, 0.1), transparent 25rem),
        radial-gradient(circle at 85% 20rem, rgba(185, 156, 255, 0.08), transparent 24rem),
        linear-gradient(180deg, var(--page-bg-soft), var(--page-bg) 36rem);
    color-scheme: dark;
}

body::before,
body.light-mode::before {
    display: none;
}

::selection {
    background: var(--sky-mid);
    color: #102d3c;
}

/* Breezier masthead */
.top-strip {
    border-bottom: 0;
    background: linear-gradient(105deg, #07556b, var(--header-bg) 50%, #096d86);
    box-shadow: 0 0.35rem 1.4rem var(--shadow);
}

body.dark-mode .top-strip {
    background: linear-gradient(105deg, #092c39, var(--header-bg) 50%, #0c5368);
}

.site-brand {
    font-family: var(--body-font);
    letter-spacing: -0.015em;
}

.top-strip .site-brand:hover {
    color: #ffe58a;
}

.edition-label {
    color: #e1f7ff;
    font-family: var(--body-font);
    letter-spacing: 0.12em;
}

.edition-label::before {
    content: "• ";
    color: #9ce8fb;
}

.hamburger-button:hover,
.hamburger-menu.active .hamburger-button {
    border-color: #a9e8f6;
}

.link-menu {
    border-color: var(--border);
    border-radius: 1rem;
    background: var(--surface);
    font-family: var(--body-font);
}

.colour-mode-toggle {
    border-top-color: var(--border);
}

/* Airy issue framing */
.issuename {
    position: relative;
    padding-bottom: 0.45rem;
    color: var(--text);
    font-family: var(--body-font);
    letter-spacing: -0.045em;
}

.issuename::before {
    content: "";
    display: none;
}

.issuename::after {
    content: "";
    position: absolute;
    right: 14%;
    bottom: 0;
    left: 14%;
    height: 0.2rem;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--sky-deep), transparent);
}

.quest-milestone {
    min-height: 18rem;
    padding-block: clamp(1.8rem, 4vw, 3.2rem);
    overflow: hidden;
    border: 1px solid rgba(99, 183, 213, 0.65);
    border-radius: 1.6rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(185, 228, 245, 0.28)),
        var(--surface);
    box-shadow: 0 1.2rem 3.5rem var(--shadow);
}

body.dark-mode .quest-milestone {
    background:
        linear-gradient(135deg, rgba(94, 214, 242, 0.08), rgba(185, 156, 255, 0.05)),
        var(--surface);
}

.quest-milestone::before,
.quest-milestone::after {
    z-index: 0;
    width: 22rem;
    height: 22rem;
    border-radius: 50%;
    opacity: 0.42;
}

.quest-milestone::before {
    top: -15rem;
    right: -5rem;
    bottom: auto;
    left: auto;
    background: radial-gradient(circle, var(--sky-mid), transparent 68%);
}

.quest-milestone::after {
    right: auto;
    bottom: -16rem;
    left: -6rem;
    background: radial-gradient(circle, var(--sky-deep), transparent 68%);
}

.quest-milestone > * {
    position: relative;
    z-index: 1;
}

.quest-milestone-label {
    color: var(--cyan);
    font-family: var(--body-font);
    letter-spacing: 0.15em;
}

.quest-milestone-label::before,
.quest-milestone-label::after {
    height: 0.15rem;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--sky-deep));
}

.quest-milestone-label::after {
    background: linear-gradient(90deg, var(--sky-deep), transparent);
}

.quest-announcement {
    color: var(--muted);
    font-family: var(--body-font);
    font-weight: 600;
}

.quest-number {
    color: var(--green);
}

.quest-winner {
    color: var(--gold);
}

.quest-milestone h1 {
    color: var(--text);
    font-family: var(--body-font);
    font-weight: 900;
    letter-spacing: -0.055em;
    text-transform: none;
}

.quest-milestone h1 span {
    color: var(--gold);
    text-shadow: none;
}

.quest-comment {
    color: var(--cyan);
    font-family: var(--body-font);
    font-weight: 650;
}

/* Softer newspaper cards */
.sectionheader {
    padding: 0.85rem 1rem;
    border: 0;
    border-left: 4px solid var(--sky-deep);
    border-radius: 0.2rem 1rem 1rem 0.2rem;
    background: linear-gradient(90deg, var(--surface-strong), transparent);
    color: var(--cyan);
    font-family: var(--body-font);
    letter-spacing: 0.1em;
}

.sectionheader::before {
    content: "≋ ";
    color: var(--sky-deep);
    font-size: 1.25em;
}

.sectionheader::after {
    content: none;
}

.articletitle {
    color: var(--text);
    font-family: var(--body-font);
    font-weight: 850;
    letter-spacing: -0.035em;
}

.articletitle a {
    color: var(--text);
    text-decoration-color: var(--sky-deep);
}

.articletitle a:hover {
    color: var(--cyan);
}

.author {
    font-family: var(--body-font);
}

.author strong a {
    color: var(--green);
}

.articleblurb {
    padding: 1.15rem;
    border: 1px solid rgba(155, 205, 221, 0.7);
    border-left: 1px solid rgba(155, 205, 221, 0.7);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 0.45rem 1.4rem rgba(31, 91, 117, 0.09);
}

body.dark-mode .articleblurb {
    background: rgba(14, 42, 54, 0.9);
}

.articleblurb:hover {
    border-color: var(--sky-deep);
    border-left-color: var(--sky-deep);
    background: var(--surface);
    box-shadow: 0 0.7rem 1.8rem var(--shadow);
}

.articlequote {
    border: 1px solid var(--border);
    border-left: 1px solid var(--border);
    border-radius: 1.2rem;
    background: var(--surface);
    color: var(--muted);
    font-family: var(--body-font);
}

.articlequote::before {
    content: "“";
    margin: -0.55rem 0 -0.8rem;
    color: var(--sky-deep);
    font-family: Georgia, serif;
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1;
}

.advert {
    border-color: var(--gold);
    border-radius: 1rem;
    background: rgba(242, 214, 109, 0.12);
}

.advert::before {
    border-radius: 0.9rem 0 0.9rem 0;
    background: var(--gold);
    color: #ffffff;
    font-family: var(--body-font);
}

body.dark-mode .advert::before {
    color: #17252b;
}

.pagetable th {
    border-bottom-color: var(--sky-deep);
    color: var(--cyan);
    font-family: var(--body-font);
}

#arrowLeft a,
#arrowRight a {
    color: var(--cyan);
    font-family: var(--body-font);
}

@media (max-width: 800px) {
    body {
        background:
            radial-gradient(circle at 10% 7rem, rgba(255, 255, 255, 0.72), transparent 12rem),
            linear-gradient(180deg, var(--page-bg-soft), var(--page-bg) 25rem);
    }

    body.dark-mode {
        background: linear-gradient(180deg, var(--page-bg-soft), var(--page-bg) 25rem);
    }

    .quest-milestone {
        min-height: 0;
        border-radius: 1.15rem;
    }
}