/* Surcam Section 2026: the article layout (a news post) and its text. */
.sk--article { --sk-pad: clamp(40px, 5vw, 72px); }
.sk .sk-art__head { display: grid; gap: 18px; max-width: 920px; }
.sk .sk-art__head .sk-crumbs { margin-bottom: 8px; }
.sk .sk-art__head .sk-crumbs li:last-child { min-width: 0; }
.sk .sk-art__head .sk-crumbs [aria-current] { display: block; overflow: hidden; max-width: 42ch; text-overflow: ellipsis; white-space: nowrap; }
.sk .sk-art__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.sk .sk-art__meta > * + *::before { content: "\00B7"; padding-right: 12px; color: var(--sk-muted); }
.sk .sk-art__title { max-width: 20ch; font-size: clamp(2.25rem, 1.35rem + 2.9vw, 4.25rem); }

.sk .sk-art__fig { display: flex; justify-content: center; margin: clamp(32px, 4vw, 56px) 0 0; overflow: hidden; border-radius: 28px; background: var(--sk-paper); }
.sk .sk-art__fig img { width: auto; max-width: 100%; height: auto; max-height: min(78vh, 760px); object-fit: contain; }

.sk .sk-art__body { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); margin-top: clamp(40px, 5vw, 72px); }
.sk .sk-art__body--solo { grid-template-columns: minmax(0, 1fr); }
.sk .sk-art__share { position: sticky; top: 112px; display: grid; gap: 12px; }
.sk .sk-art__label { color: var(--sk-muted); font-family: var(--sk-mono); font-size: .75rem; font-weight: 500; }
.sk .sk-art__share ul { display: grid; justify-items: start; gap: 8px; }
.sk .sk-art__share a, .sk .sk-art__share a:hover, .sk .sk-art__share a:focus, .sk .sk-art__share a:visited,
.sk .sk-art__share button, .sk .sk-art__share button:hover, .sk .sk-art__share button:focus { display: inline-flex; align-items: center; min-height: 40px; margin: 0; padding: 0 16px; border: 0; border-radius: 999px; background-color: transparent; box-shadow: inset 0 0 0 1px var(--sk-rule); color: var(--sk-ink); font-family: inherit; font-size: .875rem; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: box-shadow 160ms ease, background-color 160ms ease, color 160ms ease; }
.sk .sk-art__share button.is-done, .sk .sk-art__share button.is-done:hover { background-color: var(--sk-wash); box-shadow: inset 0 0 0 1px var(--sk-accent); color: var(--sk-accent); }
@media (hover: hover) and (pointer: fine) { .sk .sk-art__share a:hover, .sk .sk-art__share button:hover { box-shadow: inset 0 0 0 1px var(--sk-ink); } }

/* The post's own text */
.sk .sk-prose { max-width: 70ch; color: var(--sk-ink-2); font-size: 1.125rem; line-height: 1.75; text-wrap: pretty; }
.sk .sk-prose > * + * { margin-top: 1.1em; }
.sk .sk-prose > p:first-child { color: var(--sk-ink); font-size: 1.25rem; line-height: 1.6; }
.sk .sk-prose h2, .sk .sk-prose h3, .sk .sk-prose h4 { margin: 2em 0 0; font-family: inherit; color: var(--sk-ink); font-weight: 600; line-height: 1.2; letter-spacing: -.012em; text-wrap: balance; }
.sk .sk-prose h2 { font-size: clamp(1.5rem, 1.25rem + .8vw, 1.875rem); }
.sk .sk-prose h3 { font-size: 1.25rem; }
.sk .sk-prose h4 { font-size: 1.0625rem; }
.sk .sk-prose h2 + *, .sk .sk-prose h3 + *, .sk .sk-prose h4 + * { margin-top: .6em; }
.sk .sk-prose h2 strong, .sk .sk-prose h3 strong, .sk .sk-prose h4 strong { font-weight: inherit; }
.sk .sk-prose strong, .sk .sk-prose b { color: var(--sk-ink); font-weight: 600; }
.sk .sk-prose a, .sk .sk-prose a:hover, .sk .sk-prose a:focus { color: var(--sk-accent); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.sk .sk-prose ul, .sk .sk-prose ol { display: grid; gap: .5em; padding: 0; }
.sk .sk-prose ul li, .sk .sk-prose ol li { position: relative; padding-left: 24px; }
.sk .sk-prose ul li::before { content: ""; position: absolute; left: 3px; top: .72em; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--sk-accent); }
.sk .sk-prose ol { counter-reset: skp; }
.sk .sk-prose ol li::before { counter-increment: skp; content: counter(skp) "."; position: absolute; left: 0; color: var(--sk-muted); font-family: var(--sk-mono); font-size: .875rem; line-height: 2; }
.sk .sk-prose li > p { margin: 0; }
.sk .sk-prose img { display: block; width: auto; max-width: 100%; height: auto; max-height: 80vh; margin-inline: auto; border-radius: 20px; }
.sk .sk-prose__pics { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 12px; margin-top: 2em; }
.sk .sk-prose__pics--3 { --n: 3; }
.sk .sk-prose__pics > a { display: block; }
.sk .sk-prose__pics img { width: 100%; height: 100%; max-height: none; margin: 0; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; }
@media (max-width: 640px) { .sk .sk-prose__pics--3 { --n: 2; } .sk .sk-prose__pics--3 > :first-child { grid-column: 1 / -1; } .sk .sk-prose__pics--3 > img:first-child, .sk .sk-prose__pics--3 > :first-child img { aspect-ratio: 4 / 3; } }
.sk .sk-prose figure { margin: 2em 0 0; }
.sk .sk-prose figcaption { margin-top: 10px; color: var(--sk-muted); font-size: .875rem; text-align: center; }
.sk .sk-prose blockquote { position: relative; margin: 2em 0 0; padding-top: 1em; color: var(--sk-ink); font-size: 1.25rem; font-weight: 500; line-height: 1.5; letter-spacing: -.006em; }
.sk .sk-prose blockquote::before { content: "\201C"; position: absolute; left: 0; top: -.12em; color: var(--sk-accent); font-size: 2.4em; line-height: 1; }
.sk .sk-prose hr { margin: 2.5em 0 0; border: 0; border-top: 1px solid var(--sk-rule); }
.sk .sk-prose iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 20px; }

@media (max-width: 960px) {
	.sk .sk-art__body { grid-template-columns: minmax(0, 1fr); }
	.sk .sk-art__aside { order: 2; padding-top: 24px; border-top: 1px solid var(--sk-rule); }
	.sk .sk-art__share { position: static; }
	.sk .sk-art__share ul { display: flex; flex-wrap: wrap; }
}
@media (max-width: 640px) {
	.sk .sk-art__fig { border-radius: 20px; }
	.sk .sk-prose { font-size: 1.0625rem; }
	.sk .sk-prose > p:first-child { font-size: 1.125rem; }
	.sk .sk-art__head .sk-crumbs [aria-current] { max-width: 24ch; }
}