/* ─────────────────────────────────────────────────────────────
   shkarravina — the same look language as shpendium.wtf: the
   same font, tokens, gutters, type scale and underline links.
   Every page is generated by tools/build.mjs.
───────────────────────────────────────────────────────────── */

/* Self-hosted Outfit font, the same files as shpendium.wtf */
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/outfit-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/outfit-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --black: #000000;
    --ink: #1a1a1a;
    --white: #ffffff;
    --muted: #6b7280;
    /* Dividers: present, but never louder than the words. */
    --line: #e5e7eb;
    /* How far to the right the words may go, on every page. */
    --measure: 48rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    /* Every letter on the site is shown lowercase. */
    text-transform: lowercase;
    scrollbar-gutter: stable;
    /* Keep iOS from enlarging the text by itself in landscape. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

[hidden] {
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────
   BODY — the same gutters as shpendium.wtf at every breakpoint.
───────────────────────────────────────────────────────────── */
body {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--white);
    color: var(--ink);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 2rem
        max(1.25rem, env(safe-area-inset-right))
        calc(1.5rem + env(safe-area-inset-bottom))
        max(1.25rem, env(safe-area-inset-left));
}

@media (min-width: 400px) {
    body {
        padding-left: max(1.5rem, env(safe-area-inset-left));
        padding-right: max(1.5rem, env(safe-area-inset-right));
    }
}

@media (min-width: 640px) {
    body {
        padding: 4rem
            max(2rem, env(safe-area-inset-right))
            calc(2rem + env(safe-area-inset-bottom))
            max(2rem, env(safe-area-inset-left));
    }
}

@media (min-width: 768px) {
    body {
        padding: 7rem
            max(7rem, env(safe-area-inset-right))
            calc(3rem + env(safe-area-inset-bottom))
            max(7rem, env(safe-area-inset-left));
    }
}

p {
    margin: 0;
    /* No word left alone on the last line of a paragraph. */
    text-wrap: pretty;
}

/* A title that wraps breaks into lines of even length. */
h1,
h2,
h3 {
    text-wrap: balance;
}

/* ─────────────────────────────────────────────────────────────
   BETWEEN PAGES — a short, soft fade from one page to the next.
   Where the browser cannot, or the reader asked for less motion,
   the page simply changes, as before.
───────────────────────────────────────────────────────────── */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.25s;
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}

/* ─────────────────────────────────────────────────────────────
   HEADER — title on the left, back link on the right; stacks
   on phones. Same as shpendium.wtf's header and facts header.
───────────────────────────────────────────────────────────── */
.page-header {
    margin-bottom: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

/* On a phone the way home comes first, at the very top, so the
   title sits right above the text it names. */
.page-header .back-link {
    order: -1;
    margin: -0.5rem 0 0;
}

@media (min-width: 640px) {
    .page-header {
        margin-bottom: 4rem;
        flex-direction: row;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .page-header .back-link {
        order: 0;
    }
}

/* The header and the footer run the full width of the page, so the
   back link and the footer's right side sit at the right edge. */
.page-header,
.site-footer {
    width: 100%;
}

h1 {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 600;
    overflow-wrap: break-word;
}

@media (min-width: 640px) {
    h1 {
        font-size: 1.375rem;
        line-height: 2rem;
    }
}

@media (min-width: 768px) {
    h1 {
        font-size: 1.625rem;
        line-height: 2.25rem;
    }
}

main {
    max-width: var(--measure);
    width: 100%;
}

/* ─────────────────────────────────────────────────────────────
   LINKS — a thin underline that fades to grey on hover.
───────────────────────────────────────────────────────────── */
.inline-link,
.back-link,
.nav-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--ink);
    transition: border-color 0.15s ease;
}

.inline-link {
    padding: 0.25rem 0;
}

.back-link,
.nav-link {
    font-size: 0.9375rem;
    font-weight: 500;
    padding: 0.5rem 0;
    white-space: nowrap;
    display: inline-block;
}

/* The back link is taller than the h1 because of its padding; this
   keeps the header the same height as a title alone. */
@media (min-width: 640px) {
    .back-link {
        margin-top: -0.5rem;
        margin-bottom: -0.5rem;
    }
}

button.nav-link {
    font-family: inherit;
    line-height: inherit;
    color: inherit;
    background: none;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    cursor: pointer;
}

.inline-link:hover,
.back-link:hover,
.nav-link:hover {
    border-color: var(--line);
}

.inline-link:focus-visible,
.back-link:focus-visible,
.nav-link:focus-visible,
.filter:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

@media (min-width: 640px) {
    .back-link,
    .nav-link {
        font-size: 1rem;
    }
}

@media (min-width: 768px) {
    .back-link,
    .nav-link {
        font-size: 1.0625rem;
    }
}

/* ─────────────────────────────────────────────────────────────
   HOME — the intro is one even voice: every paragraph the same
   size, in a column narrow enough to read in one breath.
───────────────────────────────────────────────────────────── */
.intro {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 1.03125rem;
    line-height: 1.65;
}

@media (min-width: 640px) {
    .intro {
        gap: 1.25rem;
        font-size: 1.09375rem;
    }
}

@media (min-width: 768px) {
    .intro {
        font-size: 1.15625rem;
    }
}

/* ─────────────────────────────────────────────────────────────
   FILTERS — two rows of plain words. The chosen one carries the
   black underline; the rest are grey with none.
───────────────────────────────────────────────────────────── */
.filters {
    margin-top: 3.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

@media (min-width: 768px) {
    .filters {
        margin-top: 4.5rem;
    }
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 1.25rem;
}

/* On a phone the label sits above its row, so the choices wrap
   cleanly; from 640px it sits beside them. */
.filter-label {
    flex-basis: 100%;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--muted);
}

@media (min-width: 640px) {
    .filter-label {
        flex-basis: 3.5rem;
        margin-top: 0;
    }
}

.filter {
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--muted);
    background: none;
    border: 0;
    border-bottom: 1px solid transparent;
    padding: 0.625rem 0 0.375rem;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.filter:hover {
    color: var(--ink);
}

.filter[aria-pressed="true"] {
    color: var(--ink);
    border-color: var(--ink);
}

@media (min-width: 768px) {
    .filter {
        font-size: 1rem;
    }
}

/* The search: a plain line to write on, in the row of the filters. */
.search-row {
    margin-bottom: 0.5rem;
}

.search {
    flex: 1;
    min-width: 0;
    max-width: 24rem;
    /* At 16px or more, a phone does not zoom in when it is tapped. */
    font: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: none;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: 0.5rem 0;
    transition: border-color 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.search:hover,
.search:focus {
    outline: none;
    border-color: var(--ink);
}

.search::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.status {
    margin-top: 1.75rem;
    font-size: 0.875rem;
    color: var(--muted);
}

@media (min-width: 768px) {
    .status {
        font-size: 0.9375rem;
    }
}

/* ─────────────────────────────────────────────────────────────
   PJESA AND PERIUDHA — the structure of the writings. A pjesa
   opens with a calm title and its subtitle under it, over a thin
   line; each periudha is a smaller heading with its years beside it.
───────────────────────────────────────────────────────────── */
.part {
    margin-top: 4rem;
}

@media (min-width: 768px) {
    .part {
        margin-top: 5rem;
    }
}

.part-head {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}

.part-title {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
}

.part-subtitle {
    margin-top: 0.125rem;
    font-size: 0.9375rem;
    color: var(--muted);
}

@media (min-width: 640px) {
    .part-title {
        font-size: 1.25rem;
    }

    .part-subtitle {
        font-size: 1rem;
    }
}

@media (min-width: 768px) {
    .part-title {
        font-size: 1.375rem;
        line-height: 2rem;
    }

    .part-subtitle {
        font-size: 1.0625rem;
    }
}

.part-link,
.period-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
}

.part-link:hover,
.period-link:hover {
    border-color: var(--ink);
}

.part-link:focus-visible,
.period-link:focus-visible,
.item-title:focus-visible,
.crumb:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

.period {
    margin-top: 2.5rem;
}

@media (min-width: 768px) {
    .period {
        margin-top: 3rem;
    }
}

.period-title {
    margin: 0 0 0.75rem;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 0.75rem;
    font-size: 1rem;
    font-weight: 600;
}

.period-years {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--muted);
}

@media (min-width: 640px) {
    .period-title {
        font-size: 1.125rem;
    }
}

@media (min-width: 768px) {
    .period-title {
        font-size: 1.25rem;
    }

    .period-years {
        font-size: 1rem;
    }
}

/* The pjesa and periudha pages: the subtitle at the intro size,
   the introduction text, then the writings. */
.lead {
    margin-bottom: 2rem;
    font-size: 1.03125rem;
    line-height: 1.625;
    color: var(--muted);
}

@media (min-width: 640px) {
    .lead {
        font-size: 1.09375rem;
    }
}

@media (min-width: 768px) {
    .lead {
        font-size: 1.15625rem;
        margin-bottom: 2.5rem;
    }
}

.period-meta {
    margin-bottom: 2rem;
    font-size: 0.875rem;
    color: var(--muted);
}

@media (min-width: 768px) {
    .period-meta {
        font-size: 1rem;
    }
}

.period-list {
    margin-top: 3.5rem;
}

/* ─────────────────────────────────────────────────────────────
   HOME — the two ways in, the last writing, then a plain table
   of contents: each pjesa as a small heading, each periudha one
   row with its years and count. The whole row is the link.
───────────────────────────────────────────────────────────── */
.start-links {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
}

@media (min-width: 768px) {
    .start-links {
        margin-top: 2.5rem;
    }
}

.start-links-first {
    margin-top: 0;
}

.status .inline-link {
    color: var(--ink);
}

.home-parts {
    margin-top: 3.5rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

@media (min-width: 768px) {
    .home-parts {
        margin-top: 4.5rem;
        gap: 3rem;
    }
}

.home-part-title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 600;
}

.home-part-subtitle {
    margin-bottom: 0.75rem;
    font-size: 0.9375rem;
    color: var(--muted);
}

@media (min-width: 768px) {
    .home-part-title {
        font-size: 1.125rem;
    }

    .home-part-subtitle {
        font-size: 1rem;
    }
}

.overview {
    list-style: none;
    margin: 0;
    padding: 0;
}

.overview-item {
    border-top: 1px solid var(--line);
}

.overview-item:last-child {
    border-bottom: 1px solid var(--line);
}

.overview-link {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 1rem;
    padding: 0.75rem 0;
    color: inherit;
    text-decoration: none;
}

.overview-title {
    font-size: 1rem;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
}

.overview-link:hover .overview-title {
    border-color: var(--ink);
}

.overview-link:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

.overview-meta {
    font-size: 0.875rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
    .overview-title {
        font-size: 1.0625rem;
    }

    .overview-meta {
        font-size: 0.9375rem;
    }
}

.filters-first {
    margin-top: 0;
    margin-bottom: 1rem;
}

.period-list > .period:first-child {
    margin-top: 0;
}

/* ─────────────────────────────────────────────────────────────
   THE LIST — each row is the number, the title and its kind,
   like the numbered facts on shpendium.wtf.
───────────────────────────────────────────────────────────── */

.list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.item {
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.item-number {
    min-width: 1.75rem;
    flex-shrink: 0;
    font-size: 0.875rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* Fifty black underlines in a row would shout, so a title in the
   list is plain until the pointer is on it. */
.item-title {
    font-size: 1rem;
    line-height: 1.5;
    padding: 0.375rem 0;
    border-bottom-color: transparent;
}

.item-title:hover {
    border-color: var(--ink);
}

/* The title and its kind flow as one line of text, so a long title
   wraps under itself and the kind follows it instead of drifting. */
.item-main {
    min-width: 0;
}

.item-kind {
    margin-left: 0.375rem;
    font-size: 0.8125rem;
    color: var(--muted);
    white-space: nowrap;
}

@media (min-width: 640px) {
    .item-number {
        font-size: 1rem;
    }

    .item-title {
        font-size: 1.09375rem;
    }

    .item-kind {
        font-size: 0.875rem;
    }
}

@media (min-width: 768px) {
    .item-number,
    .item-title {
        font-size: 1.15625rem;
    }

    .item-number {
        min-width: 2.25rem;
    }
}

.empty {
    margin-top: 3rem;
    font-size: 1rem;
    color: var(--muted);
}

/* ─────────────────────────────────────────────────────────────
   A WRITING — set at the same size as shpendium.wtf's body copy,
   in a column narrow enough to read.
───────────────────────────────────────────────────────────── */
.writing {
    font-size: 1.03125rem;
    line-height: 1.7;
}

@media (min-width: 640px) {
    .writing {
        font-size: 1.09375rem;
    }
}

@media (min-width: 768px) {
    .writing {
        font-size: 1.15625rem;
    }
}

.note {
    margin-bottom: 2rem;
    font-size: 0.875rem;
    font-style: italic;
    color: var(--muted);
}

@media (min-width: 768px) {
    .note {
        font-size: 1rem;
        margin-bottom: 2.5rem;
    }
}

.writing-body,
.text-page {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .writing-body,
    .text-page {
        gap: 1.75rem;
    }
}

.section-title {
    margin: 1.5rem 0 0;
    font-size: inherit;
    font-weight: 700;
}

/* Under a writing's date: which pjesa and periudha it is in. */
.where {
    margin-top: 0.25rem;
    font-size: 0.9375rem;
    color: var(--muted);
}

@media (min-width: 768px) {
    .where {
        font-size: 1rem;
    }
}

.crumb {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}

.crumb:hover {
    color: var(--ink);
    text-decoration: underline;
}

/* A poem: one block per stanza, one line per verse. A verse too
   long for the screen wraps with a hanging indent, so the wrap is
   never mistaken for a new verse. */
.verse {
    display: block;
    padding-left: 1.25em;
    text-indent: -1.25em;
}

.date {
    margin-top: 2.5rem;
    font-size: 0.9375rem;
    color: var(--muted);
}

@media (min-width: 768px) {
    .date {
        font-size: 1rem;
    }
}

/* ─────────────────────────────────────────────────────────────
   UNDER A WRITING — previous, next and share.
───────────────────────────────────────────────────────────── */
.writing-nav {
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

@media (min-width: 640px) {
    .writing-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem 2rem;
    }
}

@media (min-width: 768px) {
    .writing-nav {
        margin-top: 5rem;
    }
}

.writing-nav .nav-link {
    white-space: normal;
}

/* ─────────────────────────────────────────────────────────────
   FOOTER — small and grey, at the bottom of every page.
───────────────────────────────────────────────────────────── */
.site-footer {
    margin-top: auto;
    padding-top: 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.8125rem;
    color: var(--muted);
}

@media (min-width: 768px) {
    .site-footer {
        font-size: 0.875rem;
    }
}

.footer-link {
    color: inherit;
    text-decoration: none;
    padding: 0.375rem 0;
    transition: color 0.15s ease;
}

.footer-link:hover {
    color: var(--ink);
    text-decoration: underline;
}

.footer-link:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────
   PRINT — only the words: no links around them, no footer.
───────────────────────────────────────────────────────────── */
@media print {
    body {
        padding: 0;
        min-height: 0;
    }

    .back-link,
    .writing-nav,
    .start-links,
    .filters,
    .site-footer {
        display: none !important;
    }

    .page-header {
        margin-bottom: 1.5rem;
    }

    main {
        max-width: none;
    }

    .writing {
        font-size: 12pt;
    }
}