/* Lázeňský list: a little spa gazette in the manner of the old printed Kurliste.
   A broadsheet front page on wide screens, one column on phones.
   Newsprint, black rules, one rust accent. System fonts only. */
:root {
    --paper: #f2eee3;
    --ink: #1c1b18;
    --muted: #625c51;
    --rule: #1c1b18;
    --hair: #cdc5b3;
    --accent: #8c3d14;
    --spring: #2f6f6a;
    --spring-deep: #1f5551;
    --iron: #a3612a;
    --code-bg: #e7e1d2;
    --display: Didot, "Bodoni 72", "Bodoni MT", "Libre Bodoni", "Noto Serif Display", Georgia, serif;
    --serif: Charter, "Bitstream Charter", "Sitka Text", "Iowan Old Style", Cambria, Georgia, serif;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
    --page: 74rem;
    --measure: 40rem;
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper: #17150f;
        --ink: #e8e1cf;
        --muted: #a69d8a;
        --rule: #e8e1cf;
        --hair: #3b362b;
        --accent: #d48a5c;
        --spring: #82c1b9;
        --spring-deep: #a6d6cf;
        --iron: #d79e66;
        --code-bg: #221f17;
    }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 1.1rem/1.62 var(--serif);
    font-kerning: normal;
    text-rendering: optimizeLegibility;
}

.masthead, main, .colophon {
    width: min(var(--page), 100% - 32px);
    margin-inline: auto;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
img { max-width: 100%; height: auto; }

.skip { position: absolute; left: -999px; top: 0.5rem; background: var(--paper); padding: 0.4rem 0.8rem; }
.skip:focus { left: 0.5rem; }

.label, .issue, .ear, .byline, .post-date, .more, .pager, .colophon {
    font-variant-caps: all-small-caps;
    letter-spacing: 0.09em;
}

/* Masthead: the nameplate between two ears, double rules above and below. */
.masthead {
    margin-top: 2rem;
    padding: 1.1rem 0 0.8rem;
    border-top: 4px double var(--rule);
    border-bottom: 4px double var(--rule);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.4rem 1.5rem;
}
.nameplate { text-align: center; }
.masthead-title {
    display: block;
    font: 400 clamp(1.35rem, 3.7vw, 3.1rem)/1.08 var(--display);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-wrap: balance;
}
.masthead-title:hover { color: inherit; }
.issue { margin: 0.45rem 0 0; font-style: italic; font-size: 1rem; color: var(--muted); }
.ear {
    margin: 0;
    font-size: 1rem;
    color: var(--muted);
}
.ear-left { justify-self: start; }
.ear-right { justify-self: end; text-align: right; }

main { padding-top: 2rem; }

.empty { font-style: italic; color: var(--muted); text-align: center; margin: 3rem 0; }

/* Front page */
.lead h2 {
    margin: 0;
    font: 400 clamp(1.6rem, 3.3vw, 2.75rem)/1.1 var(--display);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-wrap: balance;
}
.lead h2 a, .second h3 a { text-decoration: none; }
.lead h2 a:hover, .second h3 a:hover { text-decoration: underline; color: inherit; }
.byline { margin: 0.45rem 0 1rem; color: var(--muted); font-size: 0.95rem; }
.lead-photo { margin: 0 0 1.1rem; }
.lead-photo img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.lead-photo figcaption { margin-top: 0.35rem; font-size: 0.85rem; font-style: italic; color: var(--muted); text-align: right; }
.lead-text { margin: 0; hyphens: auto; text-align: justify; }
.lead-text::first-letter, .prose > p:first-child::first-letter {
    float: left;
    font: 400 3.5em/0.82 var(--display);
    margin: 0.06em 0.09em 0 0;
    color: var(--accent);
}
.more { margin: 0.7rem 0 0; font-size: 0.95rem; }
.more a { text-decoration: none; color: var(--accent); }
.more a:hover { text-decoration: underline; }
.lead .more a::after { content: " →"; }

.seconds { margin-top: 1.8rem; border-top: 1px solid var(--rule); }
.second { padding-top: 1rem; }
.second + .second { margin-top: 1.2rem; border-top: 1px solid var(--hair); padding-top: 1.2rem; }
.second h3 { margin: 0; font: 400 1.45rem/1.2 var(--display); text-wrap: balance; }
.second .byline { margin-bottom: 0.5rem; }
.second p:last-child { margin: 0; hyphens: auto; }

.side { margin-top: 2.2rem; border-top: 1px solid var(--rule); }
.label { margin: 0.7rem 0 0.5rem; font-size: 1rem; font-weight: 600; }
.index ol { list-style: none; margin: 0; padding: 0; }
.index a {
    display: flex;
    align-items: baseline;
    gap: 0.45em;
    padding: 0.32rem 0;
    text-decoration: none;
}
.index-title { min-width: 0; }
.index a:hover .index-title { text-decoration: underline; }
.leader {
    flex: 1 1 1.5rem;
    min-width: 1.5rem;
    border-bottom: 2px dotted var(--hair);
    transform: translateY(-0.28em);
}
.index time { white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.about-box { margin-top: 1.8rem; padding-top: 0.2rem; border-top: 1px solid var(--rule); }
.about-box p { margin: 0; font-style: italic; }
.about-box .more { font-style: normal; }

.pager {
    display: flex;
    justify-content: space-between;
    margin-top: 2.4rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--rule);
}
.pager a { text-decoration: none; }
.pager-count { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Article and pages */
.post-head { text-align: center; margin-bottom: 2rem; }
.post-head h1, main > .post > h1 {
    margin: 0;
    font: 400 clamp(1.8rem, 4.4vw, 2.9rem)/1.1 var(--display);
    text-wrap: balance;
}
main > .post { max-width: var(--measure); margin-inline: auto; }
main > .post > h1 { text-align: center; margin-bottom: 2rem; }
.post-date { margin: 0.7rem 0 0; color: var(--muted); }
.post-head::after {
    content: "";
    display: block;
    width: 3rem;
    margin: 1.4rem auto 0;
    border-top: 1px solid var(--rule);
}
.prose { hyphens: auto; }
.prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.1em; }
.prose h2 { margin: 2.1rem 0 0.6rem; font: 400 1.55rem/1.25 var(--display); }
.prose h3 { margin: 1.7rem 0 0.4rem; font-size: 1.15rem; font-weight: 700; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.25em; }
.prose blockquote {
    margin: 1.6rem 0;
    padding: 0 0 0 1.1rem;
    border-left: 2px solid var(--rule);
    font-style: italic;
}
.prose img { display: block; margin: 1.8rem auto; }
.prose a[href$=".pdf"]::after { content: " (PDF)"; font-variant-caps: all-small-caps; color: var(--muted); }
.prose code { font: 0.86em var(--mono); background: var(--code-bg); padding: 0.1em 0.3em; }
.prose pre { background: var(--code-bg); padding: 1rem 1.1rem; overflow-x: auto; line-height: 1.5; }
.prose pre code { background: none; padding: 0; font-size: 0.85rem; }
.prose .table { margin: 1.6rem 0; overflow-x: auto; }
.prose table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    font-size: 0.95em;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
    hyphens: none;
}
.prose th {
    font-variant-caps: all-small-caps;
    letter-spacing: 0.06em;
    font-weight: 600;
    text-align: left;
    border-bottom: 1px solid var(--rule);
}
.prose th, .prose td { padding: 0.45em 0.8em 0.45em 0; vertical-align: top; }
.prose th:last-child, .prose td:last-child { padding-right: 0; }
.prose tbody tr + tr td { border-top: 1px solid var(--hair); }
.prose .al-c { text-align: center; }
.prose .al-r { text-align: right; }
.prose hr { border: 0; margin: 2.4rem 0; text-align: center; }
.prose hr::after { content: "⁂"; color: var(--muted); }

/* Colophon */
.colophon {
    margin-top: 4rem;
    margin-bottom: 2.5rem;
    padding-top: 0.7rem;
    border-top: 4px double var(--rule);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.3rem 1.4rem;
    color: var(--muted);
}
.colophon p { margin: 0; }
.colophon nav { display: flex; gap: 1.1rem; }
.colophon a { text-decoration: none; }

/* The admin's brand mark still uses these. */
.mark { flex: none; overflow: visible; }
.mark circle { fill: none; stroke: var(--spring); stroke-width: 1.4; }
.mark .b3 { fill: var(--iron); stroke: none; }

/* Broadsheet: from 960 px the front page and articles spread into columns. */
@media (min-width: 960px) {
    .masthead-title { white-space: nowrap; }
    .front {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(17rem, 1fr);
        grid-template-areas: "lead side" "seconds side";
        align-items: start;
        column-gap: 2.6rem;
    }
    .lead { grid-area: lead; }
    .lead-photo img { aspect-ratio: 21 / 9; }
    .lead-text { column-count: 2; column-gap: 2rem; column-rule: 1px solid var(--hair); }
    .seconds {
        grid-area: seconds;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 2rem;
    }
    .second + .second { margin-top: 0; border-top: 0; padding-top: 1rem; padding-left: 2rem; border-left: 1px solid var(--hair); }
    .side {
        grid-area: side;
        align-self: stretch;
        margin-top: 0;
        border-top: 0;
        padding-left: 2.6rem;
        border-left: 1px solid var(--rule);
    }
    .side > :first-child .label { margin-top: 0.1rem; }
    .front-older { display: block; }
    .front-older .side { border-left: 0; padding-left: 0; }
    .front-older .index ol { column-count: 2; column-gap: 3rem; }
    .front-older .index li { break-inside: avoid; }
    /* Nothing for the side column: one centred column instead of two with one empty. */
    .front-solo { display: block; max-width: 50rem; margin-inline: auto; }
    .reading.with-side {
        display: grid;
        grid-template-columns: minmax(0, var(--measure)) minmax(15rem, 18rem);
        justify-content: center;
        align-items: start;
        column-gap: 3.5rem;
    }
    .reading .side { padding-left: 2.4rem; border-left: 1px solid var(--rule); align-self: stretch; }
    .reading .side .label { margin-top: 0.3rem; }
}

.reading:not(.with-side) { max-width: var(--measure); margin-inline: auto; }

@media (max-width: 959px) {
    main > .reading, .reading .post { max-width: var(--measure); margin-inline: auto; }
}

@media (max-width: 640px) {
    body { font-size: 1.04rem; }
    .masthead { margin-top: 1.4rem; grid-template-columns: 1fr 1fr; }
    .nameplate { grid-column: 1 / -1; grid-row: 1; }
    .ear { grid-row: 2; font-size: 0.9rem; }
    .masthead-title { letter-spacing: 0.04em; }
    .lead-text { text-align: left; }
}