/*
 * V2 log item — single-post read page (/log/<id>/).
 */

.v2-log-item {
    margin-inline: auto;
    max-width: 42rem;
}

.v2-log-stack {
    margin-inline: auto;
    max-width: 42rem;
}

.v2-log-stack .v2-log-article {
    padding-bottom: 1.5rem;
    padding-top: 1.5rem;
}

@media (min-width: 768px) {
    .v2-log-stack .v2-log-article {
        padding-bottom: 2.1rem;
        padding-top: 2.1rem;
    }
}

.v2-log-stack .v2-log-article:first-child {
    padding-top: 2.5rem;
}

@media (min-width: 768px) {
    .v2-log-stack .v2-log-article:first-child {
        padding-top: 3.5rem;
    }
}

.v2-log-stack .v2-log-article + .v2-log-article {
    border-top: 1px solid var(--v2-rule);
}

.v2-log-article {
    padding-block: 2.5rem;
    scroll-margin-top: 4.5rem;
}

@media (min-width: 768px) {
    .v2-log-article {
        padding-block: 3.5rem;
        scroll-margin-top: 5.5rem;
    }
}

.v2-log-eyebrow {
    margin: 0 0 0.75rem;
}

.v2-log-series-entry-eyebrow {
    margin-bottom: 0.25rem;
}

.v2-log-series-entry-eyebrow + .v2-log-eyebrow {
    margin-top: 0;
}

.v2-log-title {
    font-family: var(--v2-font-serif);
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.18;
    margin: 0;
}

@media (min-width: 640px) {
    .v2-log-title {
        font-size: 2.5rem;
    }
}

.v2-log-title-link {
    color: inherit;
    text-decoration: none;
}

.v2-log-title-link:hover {
    text-decoration: underline;
}

.v2-log-article--highlighted {
    position: relative;
}

.v2-log-article--highlighted-first::before,
.v2-log-article--highlighted-middle::before,
.v2-log-article--highlighted-last::before,
.v2-log-article--highlighted-only::before {
    --v2-perimeter-color: color-mix(in oklch, var(--v2-accent) 30%, transparent);
    --v2-perimeter-offset: 12px;
    --v2-perimeter-width: 2px;
    --v2-perimeter-seam-overlap: 1px;
    background-repeat: no-repeat;
    content: '';
    pointer-events: none;
    position: absolute;
    z-index: 1;
}

.v2-log-article--highlighted-first::before {
    bottom: calc(-1 * var(--v2-perimeter-seam-overlap));
    left: calc(-1 * var(--v2-perimeter-offset));
    right: calc(-1 * var(--v2-perimeter-offset));
    top: calc(-1 * var(--v2-perimeter-offset));
    background-image:
        linear-gradient(var(--v2-perimeter-color), var(--v2-perimeter-color)),
        linear-gradient(var(--v2-perimeter-color), var(--v2-perimeter-color)),
        linear-gradient(var(--v2-perimeter-color), var(--v2-perimeter-color));
    background-position: top center, bottom left, bottom right;
    background-size:
        100% var(--v2-perimeter-width),
        var(--v2-perimeter-width) calc(100% - var(--v2-perimeter-width)),
        var(--v2-perimeter-width) calc(100% - var(--v2-perimeter-width));
}

.v2-log-article--highlighted-middle::before {
    bottom: calc(-1 * var(--v2-perimeter-seam-overlap));
    left: calc(-1 * var(--v2-perimeter-offset));
    right: calc(-1 * var(--v2-perimeter-offset));
    top: calc(-1 * var(--v2-perimeter-seam-overlap));
    background-image:
        linear-gradient(var(--v2-perimeter-color), var(--v2-perimeter-color)),
        linear-gradient(var(--v2-perimeter-color), var(--v2-perimeter-color));
    background-position: center left, center right;
    background-size:
        var(--v2-perimeter-width) 100%,
        var(--v2-perimeter-width) 100%;
}

.v2-log-article--highlighted-last::before {
    bottom: calc(-1 * var(--v2-perimeter-offset));
    left: calc(-1 * var(--v2-perimeter-offset));
    right: calc(-1 * var(--v2-perimeter-offset));
    top: calc(-1 * var(--v2-perimeter-seam-overlap));
    background-image:
        linear-gradient(var(--v2-perimeter-color), var(--v2-perimeter-color)),
        linear-gradient(var(--v2-perimeter-color), var(--v2-perimeter-color)),
        linear-gradient(var(--v2-perimeter-color), var(--v2-perimeter-color));
    background-position: bottom center, top left, top right;
    background-size:
        100% var(--v2-perimeter-width),
        var(--v2-perimeter-width) calc(100% - var(--v2-perimeter-width)),
        var(--v2-perimeter-width) calc(100% - var(--v2-perimeter-width));
}

.v2-log-article--highlighted-only::before {
    inset: calc(-1 * var(--v2-perimeter-offset));
    background-image:
        linear-gradient(var(--v2-perimeter-color), var(--v2-perimeter-color)),
        linear-gradient(var(--v2-perimeter-color), var(--v2-perimeter-color)),
        linear-gradient(var(--v2-perimeter-color), var(--v2-perimeter-color)),
        linear-gradient(var(--v2-perimeter-color), var(--v2-perimeter-color));
    background-position:
        top center,
        bottom center,
        left var(--v2-perimeter-width),
        right var(--v2-perimeter-width);
    background-size:
        100% var(--v2-perimeter-width),
        100% var(--v2-perimeter-width),
        var(--v2-perimeter-width) calc(100% - 2 * var(--v2-perimeter-width)),
        var(--v2-perimeter-width) calc(100% - 2 * var(--v2-perimeter-width));
}

.v2-log-article--share-context-first,
.v2-log-article--share-context-middle,
.v2-log-article--share-context-last,
.v2-log-article--share-context-only,
.v2-log-article--share-highlight-first,
.v2-log-article--share-highlight-middle,
.v2-log-article--share-highlight-last,
.v2-log-article--share-highlight-only {
    position: relative;
}

.v2-log-article--share-context-first::before,
.v2-log-article--share-context-middle::before,
.v2-log-article--share-context-last::before,
.v2-log-article--share-context-only::before {
    --v2-perimeter-color: color-mix(in oklch, var(--v2-muted-foreground) 55%, transparent);
    --v2-perimeter-offset: var(--v2-share-outline-offset, 8px);
    --v2-perimeter-width: var(--v2-share-context-outline-width, 1px);
    --v2-perimeter-seam-overlap: 1px;
    background-repeat: no-repeat;
    content: '';
    pointer-events: none;
    position: absolute;
    z-index: 1;
}

.v2-log-article--share-context-first::before {
    bottom: calc(-1 * var(--v2-perimeter-seam-overlap));
    left: calc(-1 * var(--v2-perimeter-offset));
    right: calc(-1 * var(--v2-perimeter-offset));
    top: calc(-1 * var(--v2-perimeter-offset));
    background-image:
        linear-gradient(var(--v2-perimeter-color), var(--v2-perimeter-color)),
        linear-gradient(var(--v2-perimeter-color), var(--v2-perimeter-color)),
        linear-gradient(var(--v2-perimeter-color), var(--v2-perimeter-color));
    background-position: top center, bottom left, bottom right;
    background-size:
        100% var(--v2-perimeter-width),
        var(--v2-perimeter-width) calc(100% - var(--v2-perimeter-width)),
        var(--v2-perimeter-width) calc(100% - var(--v2-perimeter-width));
}

.v2-log-article--share-context-middle::before {
    bottom: calc(-1 * var(--v2-perimeter-seam-overlap));
    left: calc(-1 * var(--v2-perimeter-offset));
    right: calc(-1 * var(--v2-perimeter-offset));
    top: calc(-1 * var(--v2-perimeter-seam-overlap));
    background-image:
        linear-gradient(var(--v2-perimeter-color), var(--v2-perimeter-color)),
        linear-gradient(var(--v2-perimeter-color), var(--v2-perimeter-color));
    background-position: center left, center right;
    background-size:
        var(--v2-perimeter-width) 100%,
        var(--v2-perimeter-width) 100%;
}

.v2-log-article--share-context-last::before {
    bottom: calc(-1 * var(--v2-perimeter-offset));
    left: calc(-1 * var(--v2-perimeter-offset));
    right: calc(-1 * var(--v2-perimeter-offset));
    top: calc(-1 * var(--v2-perimeter-seam-overlap));
    background-image:
        linear-gradient(var(--v2-perimeter-color), var(--v2-perimeter-color)),
        linear-gradient(var(--v2-perimeter-color), var(--v2-perimeter-color)),
        linear-gradient(var(--v2-perimeter-color), var(--v2-perimeter-color));
    background-position: bottom center, top left, top right;
    background-size:
        100% var(--v2-perimeter-width),
        var(--v2-perimeter-width) calc(100% - var(--v2-perimeter-width)),
        var(--v2-perimeter-width) calc(100% - var(--v2-perimeter-width));
}

.v2-log-article--share-context-only::before {
    inset: calc(-1 * var(--v2-perimeter-offset));
    background-image:
        linear-gradient(var(--v2-perimeter-color), var(--v2-perimeter-color)),
        linear-gradient(var(--v2-perimeter-color), var(--v2-perimeter-color)),
        linear-gradient(var(--v2-perimeter-color), var(--v2-perimeter-color)),
        linear-gradient(var(--v2-perimeter-color), var(--v2-perimeter-color));
    background-position:
        top center,
        bottom center,
        left var(--v2-perimeter-width),
        right var(--v2-perimeter-width);
    background-size:
        100% var(--v2-perimeter-width),
        100% var(--v2-perimeter-width),
        var(--v2-perimeter-width) calc(100% - 2 * var(--v2-perimeter-width)),
        var(--v2-perimeter-width) calc(100% - 2 * var(--v2-perimeter-width));
}

.v2-log-article--share-highlight-first::after,
.v2-log-article--share-highlight-middle::after,
.v2-log-article--share-highlight-last::after,
.v2-log-article--share-highlight-only::after {
    --v2-perimeter-color: var(--v2-accent);
    --v2-perimeter-offset: var(--v2-share-outline-offset, 8px);
    --v2-perimeter-width: var(--v2-share-highlight-outline-width, 2px);
    --v2-perimeter-seam-overlap: 1px;
    background-repeat: no-repeat;
    content: '';
    pointer-events: none;
    position: absolute;
    z-index: 2;
}

.v2-log-article--share-highlight-first::after {
    bottom: calc(-1 * var(--v2-perimeter-seam-overlap));
    left: calc(-1 * var(--v2-perimeter-offset));
    right: calc(-1 * var(--v2-perimeter-offset));
    top: calc(-1 * var(--v2-perimeter-offset));
    background-image:
        linear-gradient(var(--v2-perimeter-color), var(--v2-perimeter-color)),
        linear-gradient(var(--v2-perimeter-color), var(--v2-perimeter-color)),
        linear-gradient(var(--v2-perimeter-color), var(--v2-perimeter-color));
    background-position: top center, bottom left, bottom right;
    background-size:
        100% var(--v2-perimeter-width),
        var(--v2-perimeter-width) calc(100% - var(--v2-perimeter-width)),
        var(--v2-perimeter-width) calc(100% - var(--v2-perimeter-width));
}

.v2-log-article--share-highlight-middle::after {
    bottom: calc(-1 * var(--v2-perimeter-seam-overlap));
    left: calc(-1 * var(--v2-perimeter-offset));
    right: calc(-1 * var(--v2-perimeter-offset));
    top: calc(-1 * var(--v2-perimeter-seam-overlap));
    background-image:
        linear-gradient(var(--v2-perimeter-color), var(--v2-perimeter-color)),
        linear-gradient(var(--v2-perimeter-color), var(--v2-perimeter-color));
    background-position: center left, center right;
    background-size:
        var(--v2-perimeter-width) 100%,
        var(--v2-perimeter-width) 100%;
}

.v2-log-article--share-highlight-last::after {
    bottom: calc(-1 * var(--v2-perimeter-offset));
    left: calc(-1 * var(--v2-perimeter-offset));
    right: calc(-1 * var(--v2-perimeter-offset));
    top: calc(-1 * var(--v2-perimeter-seam-overlap));
    background-image:
        linear-gradient(var(--v2-perimeter-color), var(--v2-perimeter-color)),
        linear-gradient(var(--v2-perimeter-color), var(--v2-perimeter-color)),
        linear-gradient(var(--v2-perimeter-color), var(--v2-perimeter-color));
    background-position: bottom center, top left, top right;
    background-size:
        100% var(--v2-perimeter-width),
        var(--v2-perimeter-width) calc(100% - var(--v2-perimeter-width)),
        var(--v2-perimeter-width) calc(100% - var(--v2-perimeter-width));
}

.v2-log-article--share-highlight-only::after {
    inset: calc(-1 * var(--v2-perimeter-offset));
    background-image:
        linear-gradient(var(--v2-perimeter-color), var(--v2-perimeter-color)),
        linear-gradient(var(--v2-perimeter-color), var(--v2-perimeter-color)),
        linear-gradient(var(--v2-perimeter-color), var(--v2-perimeter-color)),
        linear-gradient(var(--v2-perimeter-color), var(--v2-perimeter-color));
    background-position:
        top center,
        bottom center,
        left var(--v2-perimeter-width),
        right var(--v2-perimeter-width);
    background-size:
        100% var(--v2-perimeter-width),
        100% var(--v2-perimeter-width),
        var(--v2-perimeter-width) calc(100% - 2 * var(--v2-perimeter-width)),
        var(--v2-perimeter-width) calc(100% - 2 * var(--v2-perimeter-width));
}

.v2-log-stack[data-share-active] {
    box-sizing: border-box;
    padding-inline: var(--v2-share-stack-inset, 1rem);
}

@media (min-width: 768px) {
    .v2-log-stack[data-share-active] {
        padding-inline: var(--v2-share-stack-inset, 1.25rem);
    }
}

.v2-log-stack[data-share-active] .v2-log-article:first-child {
    padding-top: 1.5rem;
}

@media (min-width: 768px) {
    .v2-log-stack[data-share-active] .v2-log-article:first-child {
        padding-top: 2.1rem;
    }
}

.v2-log-stack[data-share-active] article[data-post-id] {
    cursor: pointer;
}

.v2-log-stack[data-share-active] article[data-post-id] a {
    pointer-events: none;
}

.v2-log-meta {
    border-top: 1px solid var(--v2-rule);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
}

.v2-log-article--meeting .v2-log-meta {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.v2-log-meta-primary {
    align-items: baseline;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0.625rem;
    width: 100%;
}

.v2-log-article--meeting .v2-log-meta-primary {
    width: auto;
}

.v2-log-meta-byline {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.v2-log-in-series {
    font-size: var(--v2-text-base);
    line-height: 1.4;
    margin: 0;
}

.v2-log-in-series-label {
    margin-right: 0.35rem;
}

.v2-log-in-series-name:focus-visible {
    outline: 1px solid var(--v2-foreground);
    outline-offset: 2px;
}

.v2-log-author {
    font-size: var(--v2-text-base);
    font-weight: 500;
}

.v2-log-header + .v2-prose,
.v2-log-header + .v2-log-collapse-excerpt,
.v2-log-collapse-excerpt + .v2-prose {
    margin-top: 2.5rem;
}

.v2-log-range-header {
    border-bottom: 1px solid var(--v2-rule);
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
}

.v2-log-range-eyebrow {
    margin: 0 0 0.5rem;
}

.v2-log-range-title {
    font-size: 1.875rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
}

@media (min-width: 640px) {
    .v2-log-range-title {
        font-size: 2.25rem;
    }
}

.v2-log-range-intro {
    font-size: 1.0625rem;
    line-height: 1.625;
    margin: 0.75rem 0 0;
    max-width: 36rem;
}

.v2-log-range-count {
    margin: 0;
}

.v2-log-empty {
    margin-top: 1.5rem;
}

.v2-log-context {
    border-top: 1px solid var(--v2-border);
    padding-top: 1.5rem;
}

.v2-log-context-row {
    margin: 0 0 1rem;
}

.v2-log-nav-link {
    font-size: var(--v2-text-base);
}

.v2-log-replies {
    margin-top: 1rem;
}

.v2-log-replies-title {
    margin: 0 0 0.75rem;
}

.v2-log-replies-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.v2-log-reply {
    border-left: 1px solid var(--v2-rule);
    border-top: 1px solid var(--v2-border);
    margin-left: 1.5rem;
    padding-block: 0.75rem;
    padding-left: 1rem;
}

.v2-log-reply--nested {
    margin-left: 2.5rem;
    padding-left: 1.25rem;
}

@media (min-width: 640px) {
    .v2-log-reply {
        margin-left: 2.5rem;
        padding-left: 1.5rem;
    }

    .v2-log-reply--nested {
        margin-left: 4rem;
        padding-left: 1.5rem;
    }
}

.v2-log-reply-card {
    border-radius: 0.25rem;
    margin: -0.25rem -0.5rem;
    padding: 0.25rem 0.5rem;
    position: relative;
    transition: background-color 0.15s ease;
}

.v2-log-reply-card:hover {
    background-color: color-mix(in oklch, var(--v2-foreground) 4%, transparent);
}

.v2-log-reply-stretched-link {
    color: inherit;
    text-decoration: none;
}

.v2-log-reply-stretched-link::after {
    content: "";
    inset: 0;
    position: absolute;
    z-index: 1;
}

.v2-log-reply-stretched-link:hover,
.v2-log-reply-stretched-link:focus {
    color: inherit;
    text-decoration: none;
}

.v2-log-reply-id {
    margin: 0 0 0.25rem;
}

.v2-log-reply-author {
    display: block;
    font-size: var(--v2-text-base);
    font-weight: 500;
}

.v2-log-reply-preview {
    display: block;
    font-family: var(--v2-font-serif);
    font-size: 0.9375rem;
    line-height: 1.625;
    margin-top: 0.375rem;
}

.v2-log-share {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.25rem;
}

.v2-log-pagination {
    display: flex;
    justify-content: space-between;
}

.v2-log-pagination--top {
    border-bottom: 1px solid var(--v2-border);
    padding-block: 1rem;
}

.v2-log-pagination--bottom {
    border-top: 1px solid var(--v2-rule);
    margin-top: 2rem;
    padding-top: 1.5rem;
}

.v2-log-pagination-link {
    background: none;
    border: 0;
    color: var(--v2-foreground);
    cursor: pointer;
    padding: 0;
    text-decoration: none;
}

.v2-log-pagination-link:hover {
    color: var(--v2-accent);
}

.v2-log-pagination-form {
    margin: 0;
}

.v2-log-pagination-link--disabled {
    color: var(--v2-muted-foreground);
    cursor: default;
    opacity: 0.5;
    pointer-events: none;
}

.v2-post-stack-collapse-toolbar,
.v2-post-stack-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-block: 0.75rem 0;
}

.v2-post-stack-collapse-bulk,
.v2-post-stack-collapse-toggle,
.v2-post-stack-share-open {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    padding: 0;
}

.v2-post-stack-collapse-bulk:hover,
.v2-post-stack-collapse-toggle:hover,
.v2-post-stack-share-open:hover {
    color: var(--v2-accent);
}

.v2-post-stack-collapse-sep,
.v2-post-stack-collapse-eyebrow-sep {
    margin-inline: 0.15rem;
}

.v2-log-collapse-excerpt {
    display: none;
    margin: 0;
}

.v2-log-article--collapsed .v2-prose {
    display: none;
}

.v2-log-article--collapsed .v2-log-collapse-excerpt {
    display: block;
}

.v2-log-archive {
    border-top: 1px solid var(--v2-rule);
    margin-top: 2.5rem;
    padding-block: 2.5rem;
}

.v2-log-archive-title {
    margin: 0 0 1rem;
}

.v2-log-archive-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.v2-log-archive-link {
    color: inherit;
    font-size: 1.0625rem;
    line-height: 1.375;
    text-decoration: none;
}

.v2-log-archive-link:hover {
    color: var(--v2-accent);
    text-decoration: underline;
    text-decoration-color: var(--v2-accent);
    text-underline-offset: 4px;
}

.v2-log-archive-meta {
    margin-top: 0.25rem;
}