/* ==========================================================================
   Page: news article  (site/news/show)
   --------------------------------------------------------------------------
   .art-head    bento head: title card (crumbs, H1, date · reading time)
                beside the cover photo (--plain: no cover, full width)
   .art-layout  white body card (.prose: components/prose.css) + sticky side column
                with "in this article" and the share card
   ========================================================================== */

/* ── Head ────────────────────────────────────────────────────────────────── */
.art-top { padding-top: var(--s-4); }
.art-head { grid-template-columns: 1fr 1.1fr; }
.art-head--plain { grid-template-columns: 1fr; }
.art-head__text { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-4); min-height: 360px; }
.art-head__text h1 { font-size: var(--fs-xl); line-height: 1.3; }
.art-head__photo { min-height: 360px; }
.art-head__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }


.art-head__text .crumbs { margin-bottom: auto; }

.art-meta { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.art-meta > span { display: inline-flex; align-items: center; gap: var(--s-2); padding: 0.35em 0.95em; border-radius: var(--r-pill); background: var(--card-soft); color: var(--ink-soft); font-size: var(--fs-xs); font-weight: 600; }
.art-meta .icon { color: var(--teal); }

/* ── Body + side ─────────────────────────────────────────────────────────── */
.art-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--gap); align-items: start; }
.art-body { padding: clamp(1.5rem, 1rem + 3vw, 3.5rem); }
.art-lead { margin-bottom: var(--s-6); padding-bottom: var(--s-6); border-bottom: 1px solid var(--line); font-size: var(--fs-lg); font-weight: 600; line-height: 1.7; }

.art-side { position: sticky; top: calc(var(--header-h) + var(--s-3)); display: grid; gap: var(--gap); }
.art-toc summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.art-toc summary::-webkit-details-marker { display: none; }
.art-toc summary::after { content: "+"; font-size: 1.2em; color: var(--teal); }
.art-toc[open] summary::after { content: "−"; }
.art-toc ol { display: grid; gap: var(--s-1); margin-top: var(--s-3); counter-reset: toc; }
.art-toc li { counter-increment: toc; }
.art-toc a { display: flex; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.5; }
.art-toc a::before { content: counter(toc, decimal-leading-zero); color: var(--teal); font-family: var(--font-num); font-weight: 700; }
.art-toc a:hover { background: var(--card-soft); color: var(--navy); }

.art-share__title { font-weight: 700; }
.art-share__links { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.art-share__links > * {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-width: 44px;
    height: 44px;
    padding-inline: var(--s-3);
    border-radius: var(--r-pill);
    background: var(--card-soft);
    color: var(--navy);
    font-size: var(--fs-sm);
    font-weight: 600;
    transition: background-color var(--t-fast) var(--ease);
}
.art-share__links > *:hover, .art-share__links > .is-done { background: var(--lemon); }

@media (max-width: 991.98px) {
    .art-head { grid-template-columns: 1fr; }
    .art-head__photo { order: -1; min-height: 240px; }
    .art-head__text { min-height: 0; }
    .art-layout { grid-template-columns: 1fr; }
    .art-side { display: contents; }            /* contents list above the text, share card below */
    .art-toc { order: -1; }
}