/* Editor controls */
.block--form [hidden] {
    display: none !important;
}

.block--form input, .block--form select, .block--form textarea {
    max-width: 100%;
}

.block--form textarea {
    resize: vertical;
}

.block--form .desk--field {
    margin-bottom: 20px;
}

    .block--form .desk--field input, .block--form .desk--field textarea,
    .block--form .desk--field select {
        width: 100%;
    }

.block--section-heading {
    display: flex;
    align-items: baseline;
    gap: 15px;
    margin: 35px 0 20px;
}

    .block--section-heading h2 {
        font: 27px/1.3 'GOST', sans-serif;
        margin: 0;
    }

    .block--section-heading > span {
        margin-left: auto;
        color: var(--desk-muted);
        font: 14px/1.3 'GOST', sans-serif;
    }

.block--empty {
    padding: 35px 24px;
    border: 1px dashed var(--seam);
    color: var(--desk-muted);
}

.block--list {
    display: grid;
    gap: 24px;
}

.block--editor {
    min-width: 0;
    border: 1px dashed #8a75568c;
    border-radius: var(--corner);
    background: #17120d55;
}

.block--header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 13px 16px;
    color: var(--gold-soft);
    font: 18px/1.4 'GOST', sans-serif;
}

    .block--header small {
        color: var(--seam);
        margin-right: 12px;
    }

    .block--header > div {
        display: flex;
        gap: 6px;
    }

    .block--header button, .block--photo-controls button {
        width: 40px;
        height: 40px;
        padding: 0;
        display: grid;
        place-items: center;
        background: transparent;
        border: 1px solid #8a755650;
        border-radius: 6px;
        color: var(--gold-soft);
    }

.block--form button:disabled {
    opacity: .35;
    cursor: default;
}

.block--content {
    padding: 22px;
    border-top: 1px dashed #8a75565c;
}

.desk .block--collapse {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    border: 0;
    clip-path: inset(50%);
}

.block--toggle {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    cursor: pointer;
}

.block--toggle::before {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.block--collapse:checked + .block--toggle::before {
    transform: rotate(-45deg);
}

.block--collapse:focus-visible + .block--toggle {
    outline: 2px dashed var(--gold-soft);
    outline-offset: 3px;
}

.block--editor:has(> .block--header > .block--collapse:checked) > .block--content {
    display: none;
}

.block--translation {
    margin-top: 18px;
}

    .block--translation .desk--field:last-child {
        margin-bottom: 0;
    }

.block--photo-translation {
    border-top: 1px dashed #8a755650;
    padding-top: 18px;
    margin-top: 22px;
}

.asset--picker {
    min-width: 0;
    margin: 0 0 18px;
    padding: 10px;
    border: 1px dashed #8a755680;
    border-radius: var(--corner);
}

.asset--picker > summary {
    padding: 6px;
    cursor: pointer;
    color: var(--gold-soft);
    font: 17px/1.3 'GOST', sans-serif;
}

.asset--choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 76px), 1fr));
    gap: 8px;
    min-width: 0;
    margin: 8px 0 0;
    padding: 0;
    border: 0;
}

.block--content .asset--choices {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 90px), 1fr));
}

.asset--option {
    display: block;
    position: relative;
    min-width: 0;
    cursor: pointer;
}

.asset--option input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
}

.asset--tile {
    display: grid;
    place-items: center;
    position: relative;
    aspect-ratio: 4 / 3;
    border: 2px solid #8a755650;
    border-radius: var(--corner);
    overflow: hidden;
    background: #100c09;
}

.asset--tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.asset--empty {
    padding: 4px;
    color: var(--desk-muted);
    text-align: center;
    font: 14px/1.2 'GOST', sans-serif;
}

.asset--option:hover .asset--tile,
.asset--option input:checked + .asset--tile {
    border-color: var(--gold-soft);
}

.asset--option input:checked + .asset--tile::after {
    content: "✓";
    position: absolute;
    inset: 3px 3px auto auto;
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    color: #18130d;
    background: var(--gold-soft);
    font: 13px/1 sans-serif;
}

.asset--option input:focus-visible + .asset--tile {
    outline: 2px dashed var(--gold-soft);
    outline-offset: 3px;
}

.asset--add {
    margin-top: 12px;
}

.block--upload {
    display: grid;
    gap: 12px;
    padding: 18px 0;
    margin-block: 18px;
    border-block: 1px dashed #8a755650;
}

    .block--upload label {
        font: 17px/1.3 'GOST', sans-serif;
    }

    .block--upload input[type=file] {
        display: block;
        padding: 10px;
        width: 100%;
        min-width: 0;
        font-size: 15px;
    }

    .block--upload input::file-selector-button {
        margin-right: 12px;
        padding: 8px 12px;
        border: 1px dashed var(--seam);
        border-radius: var(--corner);
        background: #a78b5910;
        color: var(--gold-soft);
        font: inherit;
        cursor: pointer;
    }

    .block--upload small {
        color: var(--desk-muted);
        font: 14px/1.5 'GOST', sans-serif;
    }

    .block--upload button {
        justify-self: start;
    }

.block--options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 15px;
    margin-top: 22px;
}

.block--gallery-editor {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.block--gallery-item {
    min-width: 0;
    padding: 7px;
    border: 1px solid #8a755650;
    border-radius: var(--corner);
}

    .block--gallery-item > img {
        width: 100%;
        display: block;
        aspect-ratio: 4/3;
        object-fit: cover;
        border-radius: var(--corner);
    }

.block--photo-controls {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-top: 8px;
}

    .block--photo-controls button:last-child {
        margin-left: auto;
    }

    .block--photo-controls span {
        color: var(--desk-muted);
        font-size: 14px;
    }

.block--undo {
    margin-top: 20px;
}

.block--palette {
    margin-top: 28px;
    border: 1px dashed var(--seam);
    border-radius: var(--corner);
}

    .block--palette > summary {
        cursor: pointer;
        padding: 20px;
        color: var(--gold-soft);
        font: 23px/1.3 'GOST', sans-serif;
    }

.block--tool-group > h3 {
    margin: 0 15px 12px;
    padding-top: 14px;
    border-top: 1px dashed #8a755650;
    color: var(--gold-soft);
    font: 18px/1.3 'GOST', sans-serif;
}

.block--tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 15px 15px;
}

    .block--tools button {
        display: grid;
        gap: 7px;
        padding: 15px;
        text-align: left;
        color: var(--linen);
        background: #a78b5910;
        border: 1px solid #8a755650;
        border-radius: var(--corner);
    }

        .block--tools button:hover {
            background: #a78b5925;
        }

    .block--tools strong {
        font: 21px/1.2 'Neucha', sans-serif;
    }

    .block--tools small {
        font: 14px/1.4 'GOST', sans-serif;
        color: var(--desk-muted);
    }

.block--settings {
    align-self: start;
}

    .block--settings h2:not(:first-child) {
        margin-top: 32px;
    }

.block--footer {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: 18px;
    background: #1b160ff5;
    border: 1px dashed #8a755680;
    border-radius: var(--corner);
    flex-wrap: wrap;
    gap: 12px;
}

    .block--footer > .patch {
        margin-left: auto;
    }

.block--preview-notice {
    padding: 15px 20px;
    border: 1px dashed var(--gold);
    color: var(--gold-soft);
}

/* The article renderer is shared by all block types. No HTML from the editor is executed. */
.article--preview {
    padding: clamp(16px, 3vw, 40px);
    border: 1px dashed #8a755650;
}

.article--layout {
    display: flex;
    gap: clamp(20px, 4vw, 55px);
    margin-top: 40px;
}

.article--contents {
    flex: 0 0 180px;
    align-self: flex-start;
    position: sticky;
    top: 24px;
}

    .article--contents nav {
        border-block: 1px dashed var(--seam);
        padding: 22px 0;
        font: 17px/1.5 'GOST', sans-serif;
    }

    .article--contents p {
        color: var(--gold-soft);
        margin: 0 0 20px;
    }

    .article--contents a {
        display: block;
        padding: 10px 0;
        color: var(--text-soft);
        text-decoration: none;
        overflow-wrap: anywhere;
    }

.article--body {
    min-width: 0;
    flex: 1;
    max-width: 820px;
    margin-inline: auto;
}

.blocks--reading {
    overflow-wrap: anywhere;
}

    .blocks--reading > p {
        font-size: 22px;
        line-height: 1.75;
        white-space: pre-line;
        color: var(--text-soft);
        margin-block: 24px;
    }

        .blocks--reading > p.blocks--lead {
            font-size: 27px;
            line-height: 1.55;
            color: var(--linen);
        }

.blocks--section {
    margin-block: 48px 25px;
    scroll-margin-top: 30px;
}

    .blocks--section:first-child {
        margin-top: 0;
    }

.blocks--eyebrow {
    font: 15px/1.4 'GOST', sans-serif;
    letter-spacing: .06em;
    color: var(--gold-soft);
}

.blocks--section h2 {
    font-size: clamp(32px, 3vw, 46px);
    line-height: 1.15;
}

.blocks--reading h3 {
    font-size: 32px;
    margin-block: 32px 20px;
}

.blocks--reading figure {
    margin: 28px 0;
    min-width: 0;
}

.blocks--reading img, .blocks--reading video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--corner);
}

.blocks--reading video {
    max-height: 600px;
    background: #0d0a08;
}

.blocks--reading figcaption {
    color: var(--text-muted);
    font: 15px/1.5 'GOST', sans-serif;
    padding-top: 12px;
}

.blocks--frame {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--corner);
}

.blocks--sewn-frame::after {
    content: '';
    position: absolute;
    inset: 12px;
    border: 2px dashed #d4cab399;
    border-radius: var(--corner);
    pointer-events: none;
}

.blocks--frame.ratio--landscape img {
    aspect-ratio: 16/9;
    object-fit: cover;
}

.blocks--frame.ratio--classic img {
    aspect-ratio: 4/3;
    object-fit: cover;
}

.blocks--frame.ratio--square img {
    aspect-ratio: 1;
    object-fit: cover;
}

.blocks--frame.ratio--portrait img {
    aspect-ratio: 3/4;
    object-fit: cover;
}

.blocks--reading .image--narrow {
    width: 70%;
    margin-inline: auto;
}

.blocks--reading .image--wide {
    width: calc(100% + 30px);
    margin-left: -15px;
}

.blocks--gallery {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

    .blocks--gallery.blocks--columns--1 {
        grid-template-columns: minmax(0, 1fr);
    }

    .blocks--gallery.blocks--columns--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .blocks--gallery > figure {
        margin: 0;
    }

    .blocks--gallery .ratio--original img {
        aspect-ratio: 4/3;
        object-fit: cover;
    }

.blocks--quote {
    position: relative;
    border-left: 2px dashed var(--gold);
    padding: 14px 0 14px 26px;
    margin: 40px 0;
}

    .blocks--quote p {
        font: clamp(28px, 3vw, 37px)/1.3 'Neucha', sans-serif;
        color: var(--gold-soft);
        white-space: pre-line;
    }

    .blocks--quote cite {
        color: var(--text-muted);
        font: 16px/1.5 'GOST', sans-serif;
    }

.blocks--note {
    --note-accent: #a3b47a;
    display: flex;
    gap: 24px;
    align-items: center;
    padding: 25px;
    border: 1px dashed var(--note-accent);
    border-radius: var(--corner);
    margin-block: 32px;
}

    .blocks--note.note--gold {
        --note-accent: #cfac60;
    }

    .blocks--note.note--rust {
        --note-accent: #be8167;
    }

    .blocks--note.note--blue {
        --note-accent: #85a9be;
    }

    .blocks--note.note--teal {
        --note-accent: #82b9ac;
    }

    .blocks--note.note--paper {
        background: #d7cbb0;
        color: #2d241b;
    }

    .blocks--note p {
        font-size: 21px;
        line-height: 1.65;
        white-space: pre-line;
        margin: 10px 0 0;
    }

    .blocks--note .blocks--note-title {
        font: 16px/1.4 'GOST', sans-serif;
        color: var(--note-accent);
        margin: 0;
    }

    .blocks--note.note--paper .blocks--note-title {
        color: #4d432d;
    }

.blocks--note-icon {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border: 3px dashed var(--note-accent);
    border-radius: 50%;
    padding: 9px;
    color: var(--note-accent);
}

    .blocks--note-icon img {
        width: 100%;
    }

.blocks--list {
    padding-left: 28px;
    font-size: 22px;
    line-height: 1.7;
}

    .blocks--list li {
        padding-left: 7px;
        margin-block: 8px;
        white-space: pre-line;
    }

.blocks--divider {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 40px 0;
    color: var(--gold-soft);
}

    .blocks--divider span {
        flex: 1;
        border-top: 1px dashed var(--seam);
    }

.blocks--button {
    margin-block: 28px;
}

.blocks--external-video {
    display: grid;
    gap: 12px;
    justify-items: center;
    padding: 40px 20px;
    border: 1px dashed var(--seam);
    border-radius: var(--corner);
    background: #0f0c09;
    color: var(--gold-soft);
    text-decoration: none;
}

    .blocks--external-video > span {
        font-size: 60px;
    }

    .blocks--external-video strong {
        font: 24px/1.3 'GOST', sans-serif;
    }

    .blocks--external-video small {
        color: var(--text-muted);
    }

@media (max-width: 1100px) {
    .block--form .desk--editor-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .block--settings {
        border-top: 1px dashed var(--seam);
        padding-top: 25px;
    }

    .article--layout {
        flex-direction: column;
    }

    .article--contents {
        position: static;
        flex-basis: auto;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .block--content {
        padding: 15px;
    }

    .block--header {
        padding: 12px;
    }

    .block--tools, .block--gallery-editor,
    .blocks--gallery.blocks--columns--2, .blocks--gallery.blocks--columns--3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .block--footer {
        position: static;
    }

        .block--footer > * {
            width: 100%;
            text-align: center;
        }

        .block--footer > .patch {
            margin-left: 0;
        }

    .article--preview {
        padding: 15px;
    }

    .blocks--note {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px;
    }

    .blocks--reading .image--wide, .blocks--reading .image--narrow {
        width: 100%;
        margin-inline: 0;
    }
}