@font-face {
    font-family: "minion-text";
    src: url("../fonts/Minion-Regular.woff2") format("woff2"),
         url("../fonts/minion-regular-webfont.woff") format("woff"),
         url("../fonts/Minion-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg: #F7EEDF;
    --surface: #F2E3CB;
    --fg: #1D1D1B;
    --muted: #8E8475;
    --rule: rgba(29, 29, 27, 0.12);
    --green: #6AA601;
    --orange: #FF5C01;
    --pale: #FFFFCC;
    --stream-bg: #5A8D01;
    --footer-bg: #6AA601;
    --on-green: #F7EEDF;
    --on-green-dim: rgba(247, 238, 223, 0.78);
    --on-green-rule: rgba(247, 238, 223, 0.28);
    --code-bg: #1D1D1B;
    --code-fg: #F7EEDF;
    --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    --col: 900px;
    --measure: 780px;
    /* Slab corner radius. The wave SVG is inset by this amount on the left so
       the stream's rounded corner forms the green column's top-left corner. */
    --slab-r: 40px;
}

html[data-theme="dark"] {
    --bg: #2E3440;
    --surface: #3B4252;
    --fg: #EFE5D5;
    --muted: #A3ABBA;
    --rule: rgba(239, 229, 213, 0.18);
    --green: #7CBB0F;
    --orange: #FF7A2B;
    --pale: #434C5E;
    --stream-bg: #3D5A14;
    --footer-bg: #4A6D16;
    --on-green: #EFE5D5;
    --on-green-dim: rgba(239, 229, 213, 0.72);
    --on-green-rule: rgba(239, 229, 213, 0.22);
    --code-bg: #262B35;
    --code-fg: #EFE5D5;
}

.post__body pre span,
.post__body code span,
.post__body .chroma span {
    font-family: var(--mono) !important;
}

.post-nav__label,
.post-nav__title,
.pager__link,
.pager__count,
.topic__name {
    font-family: "interstate", sans-serif !important;
}

body {
    display: flex;
    flex-flow: column;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg);
    color: var(--fg);
}

main {
    display: flex;
    flex-flow: column;
}

/* Short pages still occupy the viewport. Inner pages put that space in main;
   the home page passes it down to the article stream. */
body:not(.is-home) main {
    flex: 1 0 auto;
}

body.is-home main {
    flex: 1 0 auto;
}

.nav-logo {
    display: block;
}

.nav-logo img {
    display: block;
}

html[data-theme="dark"] .nav-logo img {
    filter: invert(1) brightness(1.6);
}

html[data-theme="dark"] .footer-img img {
    filter: invert(1);
}

header {
    width: 100%;
    max-width: var(--col);
    margin: 0 auto;
    padding: 40px 0 10px 0;
}

.brand {
    display: flex;
    align-items: baseline;
    gap: 18px;
}

.nav-wordmark {
    font-family: "interstate", sans-serif;
    font-size: 772%;
    font-weight: 600;
    font-stretch: extra-condensed;
    letter-spacing: -2px;
    line-height: 0.65;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--orange);
}

.theme-toggle {
    flex: none;
    padding: 0;
    border: 0;
    background: none;
    line-height: 0;
    cursor: pointer;
}

.theme-toggle__hopper {
    display: block;
    width: 53px;
    height: 56px;
    background-color: #609E1E;
    -webkit-mask: url("../img/nav-logo.svg") center / contain no-repeat;
    mask: url("../img/nav-logo.svg") center / contain no-repeat;
}

.theme-toggle:hover .theme-toggle__hopper {
    background-color: var(--fg);
}

html[data-theme="dark"] .theme-toggle__hopper {
    background-color: var(--fg);
}

html[data-theme="dark"] .theme-toggle:hover .theme-toggle__hopper {
    background-color: var(--green);
}

.masthead {
    position: relative;
    z-index: 2;
    padding: 0;
}

.masthead__inner {
    position: relative;
    max-width: var(--col);
    margin: 0 auto;
    padding: 0;
}

.masthead__text {
    position: relative;
    z-index: 2;
    max-width: 560px;
    padding-top: 14px;
}

.masthead__title {
    margin: -23px 0 20px 0 !important;
    font-family: "interstate", sans-serif;
    font-size: 460%;
    font-weight: 600;
    font-stretch: extra-condensed;
    letter-spacing: -1.5px;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--fg);
}

.masthead__lede {
    margin: 0;
    max-width: 520px;
    font-family: "minion", serif;
    font-size: 220%;
    line-height: 1.5;
    color: var(--fg);
}

.masthead__flower {
    position: absolute;
    right: 0;
    top: -52px;
    width: 40%;
    max-width: 360px;
    z-index: 3;
    pointer-events: none;
}

.masthead__flower img {
    width: 100%;
    display: block;
}

.slab {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--col);
    margin: 0 auto;
    display: flex;
    flex-flow: column;
    border-radius: var(--slab-r) var(--slab-r) 0 0;
    overflow: hidden;
}

body.is-home .slab {
    flex: 1 0 auto;
}

.slab__wave {
    display: block;
    width: calc(100% - var(--slab-r));
    margin-left: var(--slab-r);
    height: 78px;
    margin-bottom: -1px;
}

.slab__wave path {
    fill: var(--stream-bg);
}

.stream {
    background-color: var(--stream-bg);
    background-image: linear-gradient(to bottom, transparent, var(--footer-bg));
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100% 200px;
    border-top-left-radius: var(--slab-r);
    display: flex;
    flex-flow: column;
}

body.is-home .stream {
    flex: 1 0 auto;
}

.post-list {
    max-width: none;
    margin: 0 auto;
    padding: 0 60px;
}

.stream .post-list {
    display: flex;
    flex: 1 0 auto;
    flex-flow: column;
    width: 100%;
    padding-bottom: 24px;
}

.stream .post-card__date,
.stream .post-card__summary {
    color: var(--on-green-dim);
}

.stream .post-card__title {
    color: var(--on-green);
}

.stream .tag {
    border-color: var(--on-green-rule);
    color: var(--on-green);
}

.stream .tag:hover {
    background: var(--on-green);
    color: var(--stream-bg);
}

.stream .pager__link,
.stream .pager__count {
    color: var(--on-green);
}

.post-card {
    position: relative;
    padding: 44px 0;
    border-bottom: 1px solid var(--rule);
}

.post-card:first-of-type {
    padding-top: 20px;
}

.stream .post-card {
    display: flex;
    flex: 1 0 auto;
    flex-flow: column;
    justify-content: center;
    border-bottom: 0;
    background-image: linear-gradient(to right,
        var(--on-green-rule) 0 calc(50% - 46px),
        transparent calc(50% - 46px) calc(50% + 46px),
        var(--on-green-rule) calc(50% + 46px) 100%);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: left bottom;
}

.stream .post-card::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 0);
    width: 84px;
    height: 68px;
    background: url("../img/form_flower.svg") center bottom / 50px auto no-repeat;
}

.post-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.post-card__date,
.post__meta {
    font-family: "minion", serif;
    font-size: 170%;
    color: var(--muted);
    letter-spacing: 0.02em;
}

.post-card__dot {
    font-family: "minion", serif !important;
    margin: 0 2px;
}

.post-card__title {
    margin: 10px 0 14px 0 !important;
    font-family: "interstate", sans-serif;
    font-size: 420%;
    font-weight: 600;
    font-stretch: extra-condensed;
    letter-spacing: -1.5px;
    line-height: 1.02;
    color: var(--fg);
}

.post-card__summary {
    font-family: "minion", serif;
    font-size: 200%;
    line-height: 1.6;
    color: var(--fg);
}

.post-list__empty {
    padding: 60px 0;
    font-family: "minion", serif;
    font-size: 220%;
    color: var(--on-green-dim);
    text-align: center;
}

.post-card__tags,
.post__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.tag {
    padding: 4px 16px 5px 16px;
    border: 1px solid var(--green);
    border-radius: 40px;
    font-family: "interstate", sans-serif;
    font-size: 160%;
    font-stretch: extra-condensed;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--green);
    transition: all 0.15s ease;
}

.tag:hover {
    background: var(--green);
    color: var(--bg);
}

.post {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--col);
    margin: 0 auto;
    padding: 10px 0 60px 0;
}

.post__inner {
    max-width: var(--measure);
}

.back-link {
    display: inline-block;
    margin-bottom: 30px;
    font-family: "interstate", sans-serif;
    font-size: 190%;
    font-stretch: extra-condensed;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--muted);
}

.back-link:hover {
    color: var(--orange);
}

.post__header {
    display: block;
    padding: 0 0 30px 0;
    border-bottom: 1px solid var(--rule);
}

.post__title {
    margin: 0 0 18px 0 !important;
    font-family: "interstate", sans-serif;
    font-size: 620%;
    font-weight: 600;
    font-stretch: extra-condensed;
    letter-spacing: -2px;
    line-height: 0.98;
    color: var(--fg);
}

.post__standfirst {
    margin-bottom: 20px;
    font-family: "minion", serif;
    font-size: 250%;
    font-weight: 600;
    font-style: italic;
    line-height: 1.45;
    color: var(--muted);
}

.blog-hero {
    padding: 20px 40px 0 40px;
}

.blog-hero h3 {
    color: var(--fg);
}

.blog-hero h4 {
    max-width: 780px;
    margin: 0 auto;
    padding: 20px 0 0 0;
    font-size: 240%;
    color: var(--muted);
}

.blog-hero--small h3 {
    font-size: 420%;
}

.toc {
    margin: 36px 0;
    padding: 24px 32px;
    background: var(--surface);
    border-radius: 20px;
    font-size: 185%;
}

.toc__title {
    margin-bottom: 6px;
    font-family: "interstate", sans-serif;
    font-size: 1.2em;
    font-stretch: extra-condensed;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--fg);
}

.toc ul {
    margin: 0;
    padding-left: 20px;
    font-family: "minion", serif;
    font-size: 1em;
    line-height: 1.7;
}

.toc li::marker {
    color: var(--green);
}

.toc a,
.post-nav__item,
.pager__link {
    margin-left: 0;
}

.toc a {
    font-size: 1em;
    color: var(--fg);
    text-decoration: none;
}

.toc a:hover {
    color: var(--orange);
    text-decoration: underline;
}

.post__body {
    margin-top: 36px;
    font-family: "minion", serif;
    font-size: 200%;
    line-height: 1.75;
    color: var(--fg);
}

.post__body p,
.post__body li {
    text-align: justify;
    hyphens: auto;
}

.post__body p {
    margin: 0 0 1.1em 0;
}

.post__body > *:first-child {
    margin-top: 0;
}

.post__body h1,
.post__body h2,
.post__body h3,
.post__body h4,
.post__body h5,
.post__body h6 {
    font-family: "interstate", sans-serif;
    font-stretch: extra-condensed;
    font-weight: 600;
    color: var(--fg);
    line-height: 1.08;
}

.post__body h1,
.post__body h2 {
    margin: 1.9em 0 0.5em 0;
    padding-bottom: 0.18em;
    font-size: 1.95em;
    letter-spacing: -1px;
    text-transform: uppercase;
    border-bottom: 3px solid var(--green);
}

.post__body h3 {
    margin: 1.6em 0 0.4em 0;
    font-size: 1.5em;
    letter-spacing: -0.6px;
}

.post__body h4 {
    margin: 1.4em 0 0.35em 0;
    font-size: 1.2em;
    letter-spacing: -0.3px;
}

.post__body h5,
.post__body h6 {
    margin: 1.3em 0 0.3em 0;
    font-size: 1.05em;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--muted);
}

.post__body a {
    color: var(--orange);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.post__body a:hover {
    background: var(--pale);
}

.post__body strong,
.post__body b {
    font-family: "minion-text", serif;
    font-weight: 700;
}

.post__body ul,
.post__body ol {
    margin: 0 0 1.1em 0;
    padding-left: 1.3em;
}

.post__body li {
    margin-bottom: 0.35em;
}

.post__body li::marker {
    color: var(--green);
}

.post__body blockquote {
    margin: 1.5em 0;
    padding: 0.2em 0 0.2em 1.1em;
    border-left: 4px solid var(--green);
    font-style: italic;
    color: var(--muted);
}

.post__body blockquote p:last-child {
    margin-bottom: 0;
}

.post__body hr {
    margin: 2.4em 0;
    border: 0;
    border-top: 1px solid var(--rule);
}

.post__body img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 0;
}

.post__body figure {
    margin: 1.8em 0;
}

.post__body figcaption {
    margin-top: 0.6em;
    font-size: 0.82em;
    font-style: italic;
    color: var(--muted);
    text-align: center;
}

.post__body .video {
    margin: 1.8em 0;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: var(--code-bg);
}

.post__body .video--portrait {
    aspect-ratio: 9 / 16;
    max-width: 380px;
    margin-inline: auto;
}

.post__body .video iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.post__body code {
    padding: 0.12em 0.4em;
    background: var(--surface);
    border-radius: 5px;
    font-family: var(--mono);
    font-size: 0.82em;
    color: var(--fg);
    word-break: break-word;
}

.post__body h1 code,
.post__body h2 code,
.post__body h3 code,
.post__body h4 code,
.post__body h5 code,
.post__body h6 code {
    font-family: "interstate", sans-serif;
    font-stretch: extra-condensed;
    font-size: 1em;
    padding: 0 0.18em;
    letter-spacing: inherit;
}

.post__body .table-scroll {
    margin: 1.6em 0;
    overflow-x: auto;
}

.post__body .table-scroll table {
    margin: 0;
}

.post__body th code,
.post__body td code {
    font-size: 0.76em;
    white-space: nowrap;
}

.post__body pre {
    margin: 1.6em 0;
    padding: 22px 18px;
    background: var(--code-bg);
    border-radius: 14px;
    overflow-x: auto;
    font-family: var(--mono);
    font-size: 0.72em;
    line-height: 1.6;
    tab-size: 4;
    color: var(--code-fg);
}

.post__body pre code {
    padding: 0;
    background: none;
    border-radius: 0;
    font-size: inherit;
    color: inherit;
    word-break: normal;
}

.post__body .highlight {
    margin: 1.6em 0;
}

.post__body .highlight pre {
    margin: 0;
}

.post__body table {
    width: 100%;
    margin: 1.6em 0;
    border-collapse: collapse;
    font-size: 0.88em;
}

.post__body th,
.post__body td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}

.post__body th {
    font-family: "interstate", sans-serif;
    font-stretch: extra-condensed;
    font-size: 1.1em;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--fg);
}

.post__body tbody tr:hover {
    background: var(--surface);
}

.post__body .footnotes {
    margin-top: 2.6em;
    padding-top: 1.2em;
    border-top: 1px solid var(--rule);
    font-size: 0.85em;
    color: var(--muted);
}

.post__body .footnotes hr {
    display: none;
}

.post__body sup a {
    text-decoration: none;
}

.post-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 20px;
    margin-top: 70px;
    padding-top: 30px;
    border-top: 1px solid var(--rule);
}

.post-nav__item {
    font-size: 100%;
    flex: 1 1 240px;
    display: flex;
    flex-flow: column;
    padding: 20px 24px;
    background: var(--surface);
    border-radius: 18px;
    text-decoration: none;
    transition: background 0.15s ease;
}

.post-nav__item:hover {
    background: var(--pale);
}

.post-nav__item--next {
    text-align: right;
}

.post-nav__label {
    font-family: "interstate", sans-serif;
    font-size: 175%;
    font-stretch: extra-condensed;
    text-transform: uppercase;
    color: var(--muted);
}

.post-nav__title {
    margin-top: 4px;
    font-family: "interstate", sans-serif;
    font-size: 250%;
    font-stretch: extra-condensed;
    font-weight: 600;
    letter-spacing: -0.5px;
    line-height: 1.1;
    color: var(--fg);
}

.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 50px;
}

.pager__link,
.pager__count {
    font-family: "interstate", sans-serif;
    font-size: 200%;
    font-stretch: extra-condensed;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--fg);
}

.pager__link:hover {
    color: var(--orange);
}

.pager__link--off {
    opacity: 0.4;
}

.pager__count {
    color: var(--muted);
}

.topic-list {
    max-width: 880px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 40px 40px 100px 40px;
}

.topic {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 12px 26px;
    background: var(--surface);
    border-radius: 40px;
    text-decoration: none;
    transition: all 0.15s ease;
}

.topic:hover {
    background: var(--green);
}

.topic__name {
    font-family: "interstate", sans-serif;
    font-size: 260%;
    font-stretch: extra-condensed;
    font-weight: 600;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    color: var(--fg);
}

.topic__count {
    font-family: "minion", serif;
    font-size: 180%;
    color: var(--muted);
}

.topic:hover .topic__name,
.topic:hover .topic__count {
    color: var(--bg);
}

.footer {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--col);
    margin: 0 auto;
    padding: 40px;
    background: var(--footer-bg);
    border-radius: 40px;
}

body.is-home .footer {
    border-radius: 0 0 40px 40px;
}

body:not(.is-home) .footer {
    background: none;
    border-radius: 0;
    padding: 0;
}

body:not(.is-home) .footer .wrap {
    max-width: var(--measure);
    margin: 0;
    padding: 40px 0;
    border-top: 1px solid var(--rule);
}

body:not(.is-home) .footer-title,
body:not(.is-home) .footer-text,
body:not(.is-home) .footer-cc,
body:not(.is-home) .footer-text-hyperlink {
    color: var(--fg) !important;
}

.footer-mainlogo__mark {
    display: block;
    width: 100%;
    aspect-ratio: 411.45 / 76.15;
    background-color: var(--on-green);
    -webkit-mask: url("../img/main-logo.svg") center / contain no-repeat;
    mask: url("../img/main-logo.svg") center / contain no-repeat;
}

body:not(.is-home) .footer-mainlogo__mark {
    background-color: #609E1E;
}

html[data-theme="dark"] body:not(.is-home) .footer-mainlogo__mark {
    background-color: var(--fg);
}

.footer-logo__mark {
    display: block;
    width: 100%;
    aspect-ratio: 59.81 / 63.36;
    background-color: var(--on-green);
    -webkit-mask: url("../img/nav-logo.svg") center / contain no-repeat;
    mask: url("../img/nav-logo.svg") center / contain no-repeat;
}

body:not(.is-home) .footer-logo__mark {
    background-color: #609E1E;
}

html[data-theme="dark"] body:not(.is-home) .footer-logo__mark {
    background-color: var(--fg);
}

.footer-cc {
    margin: 30px 0 0 0;
    padding: 0;
}

header {
    box-sizing: border-box;
}

.footer-text-hyperlink:hover {
    text-decoration: underline !important;
}

.footer-columns,
.footer-column {
    align-items: stretch;
}

.footer-mainlogo {
    margin-bottom: 12px;
}

.footer-column__content--stretch {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
}

.footer-column__content--stretch .footer-title {
    margin-top: -5px;
}

@media only screen and (max-width: 1100px) {
    .masthead__title {
        font-size: 380%;
    }

    .masthead__lede {
        font-size: 200%;
    }

    .masthead__flower {
        width: 34%;
    }
}

@media only screen and (max-width: 900px) {
    header {
        padding: 24px 24px 6px 24px;
    }

    .brand {
        gap: 10px;
    }

    .nav-wordmark {
        font-size: 379%;
    }

    .theme-toggle__hopper {
        width: 27px;
        height: 28px;
    }

    .masthead__inner {
        padding: 0 24px;
    }

    .masthead__text {
        padding-top: 10px;
        max-width: none;
    }

    .masthead__title {
        font-size: 300%;
        letter-spacing: -1px;
        white-space: normal;
    }

    .masthead__lede {
        font-size: 190%;
        max-width: none;
    }

    .masthead__flower {
        position: static;
        width: 62%;
        margin: 16px 0 -12% auto;
    }

    .slab__wave {
        height: 110px;
    }

    .footer {
        border-radius: 0;
    }

    body:not(.is-home) .footer {
        padding: 0 24px;
    }

    body:not(.is-home) .footer .wrap {
        max-width: none;
        padding: 30px 0;
    }

    .blog-hero {
        padding: 20px 24px 0 24px;
    }

    .blog-hero h4 {
        font-size: 200%;
    }

    .blog-hero--small h3 {
        font-size: 300%;
    }

    .post-list,
    .topic-list {
        padding: 20px 24px 60px 24px;
    }

    .post {
        padding: 10px 24px 40px 24px;
    }

    .post__inner {
        max-width: none;
    }

    .post-card {
        padding: 32px 0;
    }

    .post-card__title {
        font-size: 330%;
    }

    .post-card__summary {
        font-size: 185%;
    }

    .stream .post-card:not(:last-of-type)::after {
        width: 66px;
        height: 46px;
        background-size: 40px auto;
    }

    .post__title {
        font-size: 400%;
        letter-spacing: -1px;
    }

    .post__standfirst {
        font-size: 210%;
    }

    .post__body {
        font-size: 185%;
    }

    .post__body pre {
        padding: 18px;
        border-radius: 10px;
        font-size: 0.78em;
    }

    .toc {
        padding: 20px 24px;
    }

    .post-nav__item--next {
        text-align: left;
    }
}