:root[data-theme="light"] {
    color-scheme: light;
    --pico-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --pico-font-size: 100%;
    --pico-line-height: 1.65;
    --pico-border-radius: 0.45rem;
    --pico-background-color: #fbfaf6;
    --pico-color: #26352c;
    --pico-muted-color: #5e6b60;
    --pico-primary: #286947;
    --pico-primary-hover: #1b5135;
    --pico-primary-focus: rgba(40, 105, 71, 0.2);
    --pico-primary-underline: rgba(40, 105, 71, 0.35);
    --pico-h1-color: #183c29;
    --pico-h2-color: #244832;
    --pico-form-element-border-color: #a9b8a8;
    --site-divider-color: #dce5d9;
}

body {
    width: min(100% - 2rem, 46rem);
    min-height: 100vh;
    margin-inline: auto;
    padding-block: clamp(1.5rem, 5vw, 3.5rem) 2rem;
    display: flex;
    flex-direction: column;
}

h1 {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1.75rem;
    overflow-wrap: anywhere;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.title-home {
    display: block;
    flex: none;
    width: 1.25em;
    height: 1.25em;
}

.title-home img {
    display: block;
    width: 100%;
    height: 100%;
}

body > h1:has(+ .site-search) {
    margin-bottom: 0;
}

.site-search {
    margin: 1rem 0 1.5rem;
    border: 0;
}

.site-search > summary:not([role]) {
    display: flex;
    align-items: center;
    gap: .45rem;
    width: fit-content;
    min-height: 2.75rem;
    margin: 0;
    padding: .5rem .8rem;
    border: 1px solid #abc5ad;
    border-radius: var(--pico-border-radius);
    background: #eaf2e7;
    color: var(--pico-primary);
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.25;
}

.site-search > summary:not([role]):is(:hover, :focus, :focus-visible),
.site-search[open] > summary:not([role]) {
    background: #ddebd8;
    color: var(--pico-primary-hover);
}

.site-search > summary:not([role]):focus-visible {
    outline: 2px solid var(--pico-primary);
    outline-offset: 3px;
}

.site-search-icon {
    flex: none;
    width: 1.1em;
    height: 1.1em;
}

.site-search > search {
    display: block;
}

.site-search form {
    --pico-primary-background: var(--pico-primary);
    --pico-primary-border: var(--pico-primary);
    --pico-primary-hover-background: var(--pico-primary-hover);
    --pico-primary-hover-border: var(--pico-primary-hover);
    --pico-form-element-active-border-color: var(--pico-primary);
    --pico-form-element-focus-color: var(--pico-primary-focus);
    display: flex;
    gap: .5rem;
    width: 100%;
    max-width: 40rem;
    margin: .75rem 0 0;
    padding: 0;
    border: 0;
}

.site-search input {
    --pico-border-radius: .45rem;
    flex: 1;
    min-width: 0;
    min-height: 2.75rem;
    margin: 0;
    padding-block: .55rem;
    font-size: .95rem;
}

.site-search input:focus {
    outline: 0;
    border-color: var(--pico-primary);
    box-shadow: 0 0 0 2px var(--pico-primary-focus);
}

.site-search button {
    flex: none;
    width: auto;
    min-height: 2.75rem;
    margin: 0;
    padding: .55rem .9rem;
    font-size: .95rem;
}

.footer-home::before {
    content: "";
    display: inline-block;
    flex: none;
    width: 1.25em;
    height: 1.25em;
    background: url("/static/qwibbit-frog-h1.svg?v=3") center / contain no-repeat;
}

main {
    flex: 1;
    min-width: 0;
}

main > nav[aria-label="Breadcrumb"] {
    display: block;
    margin: 0 0 2rem;
    color: var(--pico-muted-color);
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

main > h2 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    font-size: 1.15rem;
}

main > ul {
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--site-divider-color);
}

main > ul > li {
    margin: 0;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--site-divider-color);
    overflow-wrap: anywhere;
}

.category-id {
    font-size: 0.68em;
    font-weight: 400;
    color: var(--pico-muted-color);
    white-space: nowrap;
}

.create-post-button .category-id {
    color: currentColor;
    opacity: 0.75;
}

.create-post-button,
.create-post-button:visited {
    color: var(--pico-primary-inverse);
}

h1 .category-id {
    color: var(--pico-primary);
    font-size: 0.55em;
}

.note {
    overflow-wrap: anywhere;
    font-size: 1.08rem;
    line-height: 1.75;
}

.qwibb-form textarea {
    font-size: 1.05rem;
    line-height: 1.6;
}

.qwibb-page .qwibb-title-continuation {
    font-size: 1.08rem;
    line-height: 1.75;
    margin-top: -.75rem;
    overflow-wrap: anywhere;
}

.qwibb-page h1 > span {
    min-width: 0;
}

.qwibb-page .qwibb-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin-block: .75rem;
}

.qwibb-page .qwibb-dates {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    margin: -.75rem 0 1.25rem;
    color: var(--pico-muted-color);
}

footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--site-divider-color);
    font-size: 0.9rem;
}

footer a {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
}

.footer-home {
    gap: 0.35rem;
}

.footer-home::before {
    width: 1.55rem;
    height: 1.55rem;
}

:focus-visible {
    outline: 2px solid var(--pico-primary);
    outline-offset: 3px;
}