/*
 * greencherry.jp
 *
 * Colour tokens on :root, redefined for prefers-color-scheme: dark.
 * Brand colours come from the Green Cherry logo.
 */

:root {
    --brand: #6eb92b;
    --brand-2: #36b049;
    --brand-3: #98c83a;
    --brand-gray: #666464;

    --background: #f5f7f2;
    --surface: #ffffff;
    --text: #2b2f29;
    --text-muted: #5b6157;
    --heading: #1b2617;
    --link: #2b7a1c;
    --link-hover: #1d5a12;
    --rule: #dde3d7;

    /* The header stays light in both schemes: the logo keeps its own
       colours (green "Green", gray "Cherry"). */
    --header-background: hsla(0, 0%, 100%, 0.92);
    --header-border: hsla(100, 15%, 30%, 0.12);
    --header-text: #1b2617;
    --header-link: #4d534a;
    --header-link-hover-background: hsla(95, 40%, 40%, 0.08);
    --header-current-text: #2b7a1c;
    --header-current-background: hsla(95, 62%, 45%, 0.14);
    --header-menu-background: #ffffff;

    --hero-background: #13240d;
    --hero-text: #ffffff;
    --hero-lede: hsl(95, 25%, 82%);

    --footer-background: #1b2617;
    --footer-text: hsl(95, 12%, 74%);
    --footer-link: hsl(95, 50%, 78%);

    --tile-background: var(--surface);
    --tile-shadow: inset 0 0 0 1px hsla(100, 20%, 20%, 0.1);
    --tile-shadow-hover: 0 8px 24px hsla(100, 30%, 15%, 0.12), inset 0 0 0 1px hsla(100, 20%, 20%, 0.12);
    --tile-image-background: #eef2ea;
    --tile-green: #267c38;
    --tile-leaf: #4a7a1d;
    --tile-moss: #245a42;

    --code-background: #eef1ea;
    --code-border: #dfe5d9;
    --note-background: #f0f7e6;
    --note-border: #cfe5b4;
    --table-head: #f0f3ec;

    --input-background: #ffffff;
    --input-border: #c9d1c3;
    --focus-ring: 0 0 0 3px hsla(95, 62%, 45%, 0.45);
    --button-background: #2f8a2a;
    --button-background-hover: #26731f;
    --button-text: #ffffff;
    --error: #b3261e;

    --page-width: 1180px;
    --reading-width: 760px;
    --radius: 10px;

    --font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
            "Noto Sans JP", "Yu Gothic UI", Meiryo, system-ui, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Noto Sans Mono", monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: #111510;
        --surface: #1a2018;
        --text: #d5dbd1;
        --text-muted: #9aa395;
        --heading: #f1f6ee;
        --link: #93d45f;
        --link-hover: #b4e78b;
        --rule: #2d352a;

        --header-border: hsla(0, 0%, 0%, 0.4);
        --hero-background: #0b1408;
        --footer-background: #0b1408;

        --tile-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, 0.08);
        --tile-shadow-hover: 0 8px 24px hsla(0, 0%, 0%, 0.4), inset 0 0 0 1px hsla(0, 0%, 100%, 0.14);
        --tile-image-background: #232b20;

        --code-background: #20271d;
        --code-border: #2d352a;
        --note-background: #1e2a17;
        --note-border: #34492a;
        --table-head: #20271d;

        --input-background: #141912;
        --input-border: #3a4436;
        --error: #ff8a80;
    }
}

/* ---------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--background);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.8;
    font-feature-settings: "palt" 0;
    overflow-wrap: anywhere;
    line-break: strict;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 4px;
}

img { max-width: 100%; height: auto; }

h1, h2, h3, h4 { color: var(--heading); line-height: 1.4; font-weight: 700; }

.page-width {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 0 max(20px, env(safe-area-inset-left)) 0 max(20px, env(safe-area-inset-right));
}

.skip-link {
    position: absolute;
    left: -10000px;
    top: 8px;
    z-index: 100;
    padding: 6px 12px;
    background: var(--surface);
    color: var(--link);
    border-radius: 6px;
}
.skip-link:focus { left: 8px; }



/* -------------------------------------------------------------- header */

#header {
    background: var(--header-background);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--header-border);
    color: var(--header-text);
    position: sticky;
    top: 0;
    z-index: 10;
}

#header .page-width {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
}

.site-logo { display: block; line-height: 0; }
.site-logo img { display: block; width: 200px; height: auto; }

#site-nav ul {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#site-nav a {
    display: block;
    padding: 6px 14px;
    color: var(--header-link);
    font-size: 15px;
    border-radius: 999px;
}
#site-nav a:hover { color: var(--header-text); text-decoration: none; background: var(--header-link-hover-background); }
#site-nav a.current { color: var(--header-current-text); background: var(--header-current-background); font-weight: 600; }

.menu-toggle, .label-toggle { display: none; }

@media (max-width: 760px) {
    /* Kept in the tab order so the menu opens from the keyboard too. */
    .menu-toggle { display: block; position: absolute; width: 1px; height: 1px; opacity: 0; }
    .menu-toggle:focus-visible + .label-toggle { box-shadow: var(--focus-ring); border-radius: 8px; }
}

@media (max-width: 760px) {
    .site-logo img { width: 168px; }

    .label-toggle {
        display: block;
        width: 44px;
        height: 44px;
        margin-right: -10px;
        cursor: pointer;
        position: relative;
    }
    .label-toggle span,
    .label-toggle span::before,
    .label-toggle span::after {
        position: absolute;
        left: 12px;
        width: 20px;
        height: 2px;
        background: var(--header-text);
        border-radius: 1px;
        content: "";
        transition: transform 0.2s;
    }
    .label-toggle span { top: 21px; }
    .label-toggle span::before { left: 0; top: -6px; }
    .label-toggle span::after { left: 0; top: 6px; }

    .menu-toggle:checked + .label-toggle span { background: transparent; }
    .menu-toggle:checked + .label-toggle span::before { transform: translateY(6px) rotate(45deg); }
    .menu-toggle:checked + .label-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

    #site-nav ul {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 64px;
        flex-direction: column;
        gap: 0;
        padding: 8px 12px 16px;
        background: var(--header-menu-background);
        border-bottom: 1px solid var(--header-border);
        box-shadow: 0 12px 16px hsla(0, 0%, 0%, 0.12);
    }
    #site-nav .menu-toggle:checked ~ ul { display: flex; }
    #site-nav a { padding: 12px 14px; font-size: 16px; border-radius: 8px; }
}

/* ---------------------------------------------------------------- hero */

.hero {
    background:
        radial-gradient(60% 120% at 100% 0%, hsla(95, 62%, 45%, 0.35), transparent 70%),
        radial-gradient(50% 90% at 0% 100%, hsla(130, 53%, 45%, 0.25), transparent 70%),
        var(--hero-background);
    color: var(--hero-text);
    padding: 88px 0 96px;
}

.hero h1 {
    color: var(--hero-text);
    font-size: clamp(30px, 5.2vw, 56px);
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0 0 24px;
}
.hero h1 span { display: inline-block; }

.hero .lede {
    max-width: 44em;
    margin: 0 0 32px;
    color: var(--hero-lede);
    font-size: clamp(16px, 1.8vw, 19px);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

/* ------------------------------------------------------------- buttons */

.button {
    display: inline-block;
    padding: 10px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--button-background);
    color: var(--button-text);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
}
.button:hover { background: var(--button-background-hover); color: var(--button-text); text-decoration: none; }
.button:disabled { opacity: 0.6; cursor: default; }

.button-ghost {
    background: transparent;
    box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, 0.5);
}
.button-ghost:hover { background: hsla(0, 0%, 100%, 0.1); }

.button-quiet {
    background: transparent;
    color: var(--link);
    box-shadow: inset 0 0 0 1px var(--rule);
}
.button-quiet:hover { background: var(--surface); color: var(--link-hover); }

/* --------------------------------------------------------------- tiles */

.section { padding: 56px 0 8px; }
.section:last-child { padding-bottom: 72px; }

.section-title {
    font-size: 24px;
    margin: 0 0 20px;
}

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.tile {
    display: block;
    background: var(--tile-background);
    border-radius: var(--radius);
    box-shadow: var(--tile-shadow);
    overflow: hidden;
    color: var(--text);
    transition: box-shadow 0.2s, transform 0.2s;
}
a.tile:hover, .tile:has(a:hover) {
    box-shadow: var(--tile-shadow-hover);
    transform: translateY(-2px);
    text-decoration: none;
}

.tile-feature {
    padding: 28px 28px 32px;
    color: #fff;
    min-height: 220px;
}
.tile-feature:hover { color: #fff; }
.tile-feature h3 { color: #fff; font-size: 21px; margin: 4px 0 10px; }
.tile-feature p { margin: 0; color: hsla(0, 0%, 100%, 0.88); }
.tile-kicker { font-family: var(--font-mono); font-size: 13px; opacity: 0.75; }
.tile-green { background: linear-gradient(160deg, #2f9444, var(--tile-green)); }
.tile-leaf { background: linear-gradient(160deg, #5c9624, var(--tile-leaf)); }
.tile-moss { background: linear-gradient(160deg, #2e7353, var(--tile-moss)); }

.tile-news .tile-link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.tile-news .tile-link:hover { text-decoration: none; }
.tile-news .tile-link:hover h3 { color: var(--link); }

.tile-image {
    aspect-ratio: 16 / 9;
    background: var(--tile-image-background);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow: hidden;
}
.tile-image img { width: 100%; height: 100%; object-fit: contain; }
.tile-image-empty img { width: 64px; height: auto; opacity: 0.6; }

.tile-body { padding: 18px 22px 24px; }
.tile-body time { color: var(--text-muted); font-size: 13px; }
.tile-body h3 { font-size: 18px; margin: 4px 0 8px; }
.tile-body p { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.7; }

.more { text-align: center; margin: 32px 0 0; }

/* ------------------------------------------------------------- article */

.article {
    max-width: var(--reading-width);
    margin: 0 auto;
    padding: 56px 0 80px;
}

.article-header { margin-bottom: 32px; }
.article-header-wide { padding-top: 56px; }
.article-header h1 { font-size: clamp(28px, 4vw, 40px); margin: 0; }
.article-header .meta { color: var(--text-muted); font-size: 14px; margin: 0 0 8px; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.tags li {
    padding: 1px 10px;
    border-radius: 999px;
    background: var(--note-background);
    color: var(--link);
    font-size: 13px;
}

.article-image {
    margin: 0 0 32px;
    padding: 24px;
    background: var(--tile-image-background);
    border-radius: var(--radius);
    text-align: center;
}
.article-image img { max-height: 360px; width: auto; }

.prose { font-size: 17px; }
.prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol, .prose table, .prose figure { margin: 0 0 1.2em; }
.prose h2 {
    font-size: 26px;
    margin: 2.2em 0 0.8em;
    padding-top: 0.8em;
    border-top: 1px solid var(--rule);
}
.prose h3 { font-size: 20px; margin: 1.8em 0 0.6em; }
.prose h4 { font-size: 17px; margin: 1.6em 0 0.5em; }
.prose ul, .prose ol { padding-left: 1.5em; }
.prose li > ul, .prose li > ol { margin: 0.2em 0 0.4em; }
.prose code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    padding: 0.1em 0.35em;
    background: var(--code-background);
    border-radius: 4px;
}
.prose pre {
    overflow-x: auto;
    padding: 16px 20px;
    background: var(--code-background);
    border: 1px solid var(--code-border);
    border-radius: 8px;
    line-height: 1.6;
}
.prose pre code { padding: 0; background: none; }
.prose blockquote {
    margin: 0 0 1.2em;
    padding: 0.2em 0 0.2em 1.2em;
    border-left: 3px solid var(--brand);
    color: var(--text-muted);
}
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5em 0; }

.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    display: block;
    overflow-x: auto;
}
.prose table.overview { display: table; }
.prose th, .prose td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--rule);
    text-align: left;
    vertical-align: top;
}
.prose thead th { background: var(--table-head); }
.prose tbody th { white-space: nowrap; color: var(--heading); width: 9em; }
.prose td ul, .prose td ol { margin: 0; }
.prose ul.columns { columns: 2 16em; column-gap: 2em; }

.prose .float-right { float: right; margin: 0 0 16px 28px; max-width: 40%; }
.prose figure figcaption { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin-top: 6px; }
.prose h2 { clear: both; }
.prose .signature { text-align: right; }

.prose .video { position: relative; aspect-ratio: 16 / 9; margin: 0 0 1.5em; }
.prose .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 8px; }

.note {
    padding: 12px 16px;
    background: var(--note-background);
    border: 1px solid var(--note-border);
    border-radius: 8px;
    font-size: 15px;
}

@media (max-width: 600px) {

    .prose .float-right { float: none; display: block; margin: 0 auto 16px; max-width: 70%; }
    .prose tbody th, .prose tbody td { display: block; width: auto; }
    .prose tbody th { border-bottom: 0; padding-bottom: 0; }
}

/* TeX logo, as on the old site */
span.TeX { letter-spacing: -0.125em; padding-right: 0.125em; white-space: nowrap; }
span.TeX span.TeX-e { position: relative; top: 0.5ex; left: -0.0417em; text-transform: uppercase; }

/* ---------------------------------------------------------------- form */

.form { margin-top: 8px; }
.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--heading); }
.field input[type="text"],
.field input[type="email"],
.field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-background);
    color: var(--text);
    font: inherit;
    font-size: 16px;
}
.field input:focus, .field textarea:focus { border-color: var(--brand); }
.field-error { margin-left: 8px; color: var(--error); font-weight: 600; font-size: 14px; }

.panel {
    margin-top: 24px;
    border: 1px solid var(--note-border);
    border-radius: var(--radius);
    overflow: hidden;
}
.panel-title {
    margin: 0;
    padding: 12px 18px;
    border: 0;
    background: var(--note-background);
    font-size: 17px;
}
.prose .panel-title { margin: 0; padding: 12px 18px; border-top: 0; }
.panel-body { padding: 16px 18px; background: var(--surface); }

/* -------------------------------------------------------------- footer */

#footer {
    background: var(--footer-background);
    color: var(--footer-text);
    padding: 48px 0 32px;
    font-size: 14px;
    line-height: 1.8;
}
#footer a { color: var(--footer-link); }

.footer-cols {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 32px;
}
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: var(--footer-link); font-weight: 600; }
.footer-brand img { width: 36px; height: auto; }
.footer-cols p { margin: 0; }
.footer-cols ul {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 4px 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.copyright {
    margin: 32px 0 0;
    padding-top: 20px;
    border-top: 1px solid hsla(0, 0%, 100%, 0.1);
    font-size: 13px;
}