:root {
    --vh: 1vh;

    --c-code-bg: #f6f6f6;
    --c-code-text: #24292f;
    --c-code-comment: #6a737d;
    --c-code-keyword: #ac1d94;
    --c-code-string: #0a7a45;
    --c-code-number: #9a4d00;
    --c-code-name: #2b6cb0;
    --c-code-type: #6f42c1;
    --c-code-punct: #57606a;

    --c-callout-note: #2b6cb0;
    --c-callout-tip: #0a7a45;
    --c-callout-warning: #9a4d00;
    --c-callout-caution: #c62828;
}

[data-theme='dark'] {
    --c-code-bg: #2a2a2a;
    --c-code-text: #e6e6e6;
    --c-code-comment: #9aa0a6;
    --c-code-keyword: #e879d0;
    --c-code-string: #7ddc9a;
    --c-code-number: #ffb86c;
    --c-code-name: #69a1ff;
    --c-code-type: #c8a2ff;
    --c-code-punct: #b0b6bd;

    --c-callout-note: #69a1ff;
    --c-callout-tip: #7ddc9a;
    --c-callout-warning: #ffb86c;
    --c-callout-caution: #ff8a80;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        --c-code-bg: #2a2a2a;
        --c-code-text: #e6e6e6;
        --c-code-comment: #9aa0a6;
        --c-code-keyword: #e879d0;
        --c-code-string: #7ddc9a;
        --c-code-number: #ffb86c;
        --c-code-name: #69a1ff;
        --c-code-type: #c8a2ff;
        --c-code-punct: #b0b6bd;

        --c-callout-note: #69a1ff;
        --c-callout-tip: #7ddc9a;
        --c-callout-warning: #ffb86c;
        --c-callout-caution: #ff8a80;
    }
}

@supports (height: 1dvh) {
    :root {
        --vh: 1dvh;
    }
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.landing {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    max-width: 920px;
    width: 100%;
    margin: 0 auto;
    padding: clamp(1rem, calc(3 * var(--vh)), 2rem) 1rem;
    box-sizing: border-box;
    text-align: center;
}

.landing-logo {
    width: 100%;
    height: clamp(110px, min(32vw, calc(20 * var(--vh))), 360px);
    background-color: var(--c-main);
    mask: url(../logo.svg) no-repeat center / contain;
    margin-bottom: .5em;
}

.landing .logo-text {
    font-size: clamp(2.75rem, min(17vw, calc(10.5 * var(--vh))), 11rem);
    line-height: 1;
}

.landing-date {
    font-family: "Signika", sans-serif;
    font-weight: bold;
    color: var(--c-accent-text);
    font-size: clamp(1.3rem, min(6.4vw, calc(4.3 * var(--vh))), 4.25rem);
    line-height: 1.15;
    margin: .35em 0 0;
    text-wrap: balance;
}

.landing-location {
    font-size: clamp(.95rem, min(3.4vw, calc(2.3 * var(--vh))), 2rem);
    margin: .4em 0 0;
}

.landing-footer {
    margin-top: auto;
    width: 100%;
    max-width: 920px;
    margin-inline: auto;
    padding: 1.5rem 1rem 2rem;
    box-sizing: border-box;
    border-top: 1px solid var(--c-line-footer);
    text-align: center;
    background: none;
    color: inherit;
}

.landing-legal {
    font-family: "DejaVu Sans", sans-serif;
    font-style: normal;
    font-size: .75rem;
    line-height: 1.6;
    color: var(--c-footer);
    text-wrap: balance;
}

.landing-legal .sep {
    opacity: .5;
    padding: 0 .15em;
}

.landing-license {
    font-family: "DejaVu Sans", sans-serif;
    font-size: .75rem;
    line-height: 1.6;
    color: var(--c-footer);
    text-wrap: balance;
    margin: .5em 0 0;
}

.theme-toggle {
    position: fixed;
    top: .75rem;
    right: .75rem;
    display: inline-flex;
    padding: .4em;
    border: none;
    border-radius: 50%;
    background: var(--c-bg);
    color: var(--c-footer);
    line-height: 0;
    cursor: pointer;
}

.theme-toggle:hover {
    color: var(--c-main);
}

.theme-toggle svg {
    display: block;
    width: .95rem;
    height: .95rem;
}

.theme-toggle .icon-sun {
    display: none;
}

[data-theme='dark'] .theme-toggle .icon-sun {
    display: block;
}

[data-theme='dark'] .theme-toggle .icon-moon {
    display: none;
}

.landing-article {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
    box-sizing: border-box;
    line-height: 1.6;
}

.landing-article h1 {
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    line-height: 1.2;
}

.landing-date-small {
    color: var(--c-footer);
    font-size: .9em;
}

.landing-article img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.landing-article p,
.landing-article li,
.landing-article blockquote,
.landing-article th,
.landing-article td {
    font-family: "DejaVu Sans", sans-serif;
}

.landing-article h2,
.landing-article h3,
.landing-article h4,
.landing-article h5,
.landing-article h6 {
    font-weight: bold;
    line-height: 1.25;
    margin: 1.6em 0 .4em;
}

.landing-article h2 {
    font-size: 1.45em;
}

.landing-article h3 {
    font-size: 1.2em;
}

.landing-article h4,
.landing-article h5,
.landing-article h6 {
    font-size: 1em;
}

.landing-article strong,
.landing-article th {
    font-weight: bold;
}

.landing-article em {
    font-style: italic;
}

.landing-article ul,
.landing-article ol {
    padding-left: 1.4em;
}

.landing-article li {
    margin: .35em 0;
}

.landing-article code,
.landing-article pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .9em;
}

.landing-article :not(pre) > code {
    padding: .1em .35em;
    border-radius: .25em;
    background: var(--c-code-bg);
}

.landing-article pre {
    margin: 1.5em 0;
    padding: 1em;
    border-radius: .3em;
    background: var(--c-code-bg);
    color: var(--c-code-text);
    overflow-x: auto;
}

.landing-article .highlight {
    margin: 1.5em 0;
}

.landing-article .highlight pre {
    margin: 0;
}

.landing-article .c,
.landing-article .ch,
.landing-article .cm,
.landing-article .c1,
.landing-article .cs,
.landing-article .cp,
.landing-article .cpf {
    color: var(--c-code-comment);
    font-style: italic;
}

.landing-article .k,
.landing-article .kc,
.landing-article .kd,
.landing-article .kn,
.landing-article .kp,
.landing-article .kr,
.landing-article .ow {
    color: var(--c-code-keyword);
}

.landing-article .s,
.landing-article .s1,
.landing-article .s2,
.landing-article .sb,
.landing-article .sc,
.landing-article .sd,
.landing-article .se,
.landing-article .sh,
.landing-article .si,
.landing-article .sx,
.landing-article .sr,
.landing-article .ss,
.landing-article .sa,
.landing-article .dl,
.landing-article .l,
.landing-article .ld {
    color: var(--c-code-string);
}

.landing-article .m,
.landing-article .mb,
.landing-article .mf,
.landing-article .mh,
.landing-article .mi,
.landing-article .mo,
.landing-article .il {
    color: var(--c-code-number);
}

.landing-article .na,
.landing-article .nb,
.landing-article .bp,
.landing-article .nf,
.landing-article .fm,
.landing-article .nt,
.landing-article .nv,
.landing-article .vc,
.landing-article .vg,
.landing-article .vi {
    color: var(--c-code-name);
}

.landing-article .kt,
.landing-article .nc,
.landing-article .nn,
.landing-article .ne,
.landing-article .no,
.landing-article .nd {
    color: var(--c-code-type);
}

.landing-article .o,
.landing-article .p {
    color: var(--c-code-punct);
}

.landing-article .gd {
    color: var(--c-code-number);
}

.landing-article .gi {
    color: var(--c-code-string);
}

.landing-article .gh,
.landing-article .gu,
.landing-article .gs {
    font-weight: bold;
}

.landing-article .ge {
    font-style: italic;
}

.landing-article pre code {
    padding: 0;
    background: none;
}

.landing-article blockquote {
    margin: 1.5em 0;
    padding: .25em 0 .25em 1em;
    border-left: 3px solid var(--c-main);
    color: var(--c-footer);
}

.landing-article .callout {
    padding: 1em 1.25em;
    border-left-color: var(--c-callout, var(--c-main));
    border-radius: 0 .3em .3em 0;
    background: var(--c-code-bg);
    color: inherit;
}

.landing-article .callout-note {
    --c-callout: var(--c-callout-note);
}

.landing-article .callout-tip {
    --c-callout: var(--c-callout-tip);
}

.landing-article .callout-warning {
    --c-callout: var(--c-callout-warning);
}

.landing-article .callout-caution {
    --c-callout: var(--c-callout-caution);
}

.landing-article .callout > :first-child {
    margin-top: 0;
}

.landing-article .callout > :last-child {
    margin-bottom: 0;
}

.landing-article .callout ul,
.landing-article .callout ol {
    margin: .5em 0;
}

.landing-article .callout-title {
    font-family: "Signika", sans-serif;
    font-weight: bold;
    color: var(--c-callout, var(--c-accent-text));
    margin: 0 0 .5em;
}

.landing-article th {
    padding: .2em;
    text-align: left;
}

.landing-news {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding: 1rem 1rem clamp(1.5rem, calc(4 * var(--vh)), 3rem);
    box-sizing: border-box;
}

.landing-news h2 {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--c-footer);
    margin: 0;
}

.landing-news-more {
    margin: 1em 0 0;
    font-family: "DejaVu Sans", sans-serif;
    font-size: .85rem;
}

.news-post {
    margin-top: 2.5rem;
}

.news-post + .news-post {
    margin-top: 3.5rem;
    padding-top: 3.5rem;
    border-top: 1px solid var(--c-line-footer);
}

.landing-article .news-post-title {
    margin-top: 0;
    font-size: 1.6em;
}

.news-post-title a {
    color: inherit;
}

.landing-article .news-post .landing-date-small {
    margin: .3em 0 0;
}

.calendar-widget {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75em 1.25em;
    margin: 2.5em 0 0;
    padding: 1em 1.25em;
    border: 1px solid var(--c-line-footer);
    border-radius: .4em;
    font-family: "DejaVu Sans", sans-serif;
}

.calendar-widget-icon {
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--c-main);
}

.calendar-widget-text {
    flex: 1 1 14em;
    line-height: 1.4;
}

.calendar-widget-text strong {
    display: block;
    font-family: "Signika", sans-serif;
}

.calendar-widget-meta {
    color: var(--c-footer);
    font-size: .85em;
}

.calendar-widget-actions {
    flex: none;
    display: flex;
    gap: 1em;
    font-size: .9em;
    white-space: nowrap;
}

.calendar-widget-actions a {
    color: var(--c-accent-text);
    text-decoration: none;
}

.calendar-widget-actions a:hover {
    text-decoration: underline;
}

.pagination {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1em;
    margin-top: 3.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--c-line-footer);
    font-family: "DejaVu Sans", sans-serif;
    font-size: .85rem;
}

.pagination-count {
    color: var(--c-footer);
}

.news-list {
    list-style: none;
    padding: 0;
    margin: clamp(.75em, calc(2 * var(--vh)), 1.5em) 0 0;
}

.news-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5em;
    align-items: baseline;
    padding: clamp(.5em, calc(1.2 * var(--vh)), .75em) 0;
    border-bottom: 1px solid var(--c-line-footer);
    font-family: "DejaVu Sans", sans-serif;
}

.news-list a {
    font-family: "Signika", sans-serif;
    font-size: 1.05em;
}

.news-list time {
    margin-left: auto;
    white-space: nowrap;
}

.landing-figure {
    margin: 1.75em 0;
}

.landing-figure figcaption {
    margin-top: .5em;
    font-size: .85em;
    line-height: 1.5;
    color: var(--c-footer);
    text-align: center;
    text-wrap: balance;
}

@media (max-height: 480px) and (orientation: landscape) {
    .landing-logo {
        display: none;
    }
}