:root {
    --thoughts-title-size: 32px;
    --thoughts-title-leading: 1.3333;
    --thoughts-meta-size: 12px;
    --thoughts-meta-leading: 1.5;
}

.thoughts-index {
    position: relative;
    padding-bottom: 25vh;
    scroll-margin-top: var(--single);
}

.thoughts-list {
    grid-column: 1 / 13;
}

.thoughts-item {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    padding-bottom: 1.1rem;
}

.thoughts-title {
    grid-column: 7 / 13;
    display: block;
    padding: 0 var(--single) 0 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: var(--thoughts-title-size);
    line-height: var(--thoughts-title-leading);
    text-transform: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.thoughts-title:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 5px;
}

.thoughts-details {
    grid-column: 4 / 7;
    /* Centre metadata on the first title line, independently of title wrapping. */
    min-height: calc(var(--thoughts-title-size) * var(--thoughts-title-leading));
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .7rem;
    padding-right: 1.5rem;
    visibility: hidden;
    opacity: 0;
    font-size: var(--thoughts-meta-size);
    line-height: var(--thoughts-meta-leading);
    transition: opacity .2s ease;
}

.thoughts-details time {
    white-space: nowrap;
}

.thoughts-tag {
    border: 1px solid currentColor;
    padding: 1px 5px;
    font-size: 10px;
    line-height: 1.4;
}

/* Keep the label and date on the same text baseline, as in the reference. */
.thoughts-details .thoughts-tag {
    font-size: inherit;
    line-height: inherit;
}

.thoughts-thumbnail {
    position: fixed;
    z-index: 20;
    top: var(--single);
    left: var(--single);
    width: min(calc(33.333vw - 2 * var(--single)), 480px);
    height: auto;
    max-height: 55vh;
    object-fit: contain;
    object-position: top left;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.thoughts-item[data-active] .thoughts-details {
    visibility: visible;
    opacity: 1;
}

.thoughts-item[data-active] .thoughts-thumbnail {
    visibility: visible;
    opacity: 1;
}

@media (max-width: 1050px) and (orientation: portrait) {
    :root { --thoughts-meta-size: 11px; }

    .thoughts-index {
        padding: 0 var(--single) 8rem;
    }

    .thoughts-list {
        grid-column: 1 / 13;
        padding: 0;
    }

    .thoughts-item {
        grid-template-columns: 100px minmax(0, 1fr);
    }

    .thoughts-details {
        grid-column: 1;
        display: block;
        padding-right: 12px;
    }

    .thoughts-details { text-align: left; }

    .thoughts-details .thoughts-tag {
        display: table;
        margin-bottom: .4rem;
    }

    .thoughts-title {
        grid-column: 2;
        padding: 0;
    }

    .thoughts-thumbnail {
        grid-column: 1 / -1;
        position: static;
        display: none;
        width: min(100%, 480px);
        max-height: none;
        margin-top: 1rem;
    }

    .thoughts-item[data-active] .thoughts-thumbnail {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    .thoughts-details, .thoughts-thumbnail { transition: none; }
}