/* Content/locale adaptations. The original ink.css design is unchanged. */
@font-face {
    font-family: 'Noto Serif SC';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../assets/fonts/noto-serif-sc-content.woff) format('woff');
    unicode-range: U+2E80-9FFF, U+F900-FAFF, U+FE30-FFEF;
}
@font-face {
    font-family: 'Noto Sans SC';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url(../assets/fonts/noto-sans-sc-content.woff) format('woff');
    unicode-range: U+2E80-9FFF, U+F900-FAFF, U+FE30-FFEF;
}
:root:lang(zh) {
    --serif: 'Instrument Serif', 'Noto Serif SC', 'Songti SC', serif;
    --sans: 'Inter Tight', 'Noto Sans SC', 'PingFang SC', sans-serif;
    --mono: 'JetBrains Mono', 'Noto Sans SC', ui-monospace, monospace;
}

/* Serif glyphs and synthesized italics extend beyond the narrow reveal masks.
   Negative margins cancel the padding exactly: type size, tracking, baselines,
   line wrapping and the page layout keep their original positions. */
:root [data-split] .split-unit {
    padding: .20em .25em .30em;
    margin: -.20em -.25em -.30em;
}
:root[data-motion="on"] [data-split]:not(.is-in) .split-inner {
    transform: translateY(calc(108% + .5em)) rotate(5deg);
}

/* The rolling title must travel by the full title block, including wrapped
   lines. Matching both layers' heights keeps the original 105% slide and
   prevents the idle marquee from showing through the second line. */
.journal-title .marquee {
    height: 100%;
}

/* Keep the existing language link reachable between desktop and mobile nav. */
@media (min-width: 821px) and (max-width: 1100px) {
    .masthead { grid-template-columns: auto 1fr auto; }
    .masthead-meta { display: flex; justify-self: center; }
    .masthead-meta > span { display: none; }
}

/* Preserve bottom alignment, but let short/landscape menus scroll from the top. */
.menu { justify-content: flex-start; overflow-y: auto; overscroll-behavior: contain; }
.menu > a, .menu-foot { flex-shrink: 0; }
.menu > a:first-child { margin-top: auto; }
.menu .menu-foot a { font: inherit; }

/* A card taller than the usable viewport must scroll far enough to read its end. */
.stack-card[data-stack-static] {
    position: relative;
    top: auto;
    transform: none;
    filter: none;
}

/* Long API names should wrap inside the existing prose column. */
.prose p, .prose li, .prose h2, .prose h3, .case-facts dd { overflow-wrap: anywhere; }
.prose section[id] { scroll-margin-top: 100px; }

/* Motion off keeps complete, static titles available on hover and focus. */
:root[data-motion="off"] .journal-row .static { transform: none; }
:root[data-motion="off"] .journal-title .marquee { visibility: hidden; }
:root[data-motion="off"] { scroll-behavior: auto; }
:root[data-motion="off"] *,
:root[data-motion="off"] *::before,
:root[data-motion="off"] *::after { animation: none !important; transition: none !important; }

:root:lang(zh) .work-card-media::after { content: '查看'; }

/* Playable projects use the existing case-study frame and chapter layout. */
:root:lang(zh) .playable-project .case-hero h1 { font-size: clamp(3rem, 9vw, 9rem); }
.case-play { display: block; height: auto; margin-bottom: 0; border: 1px solid var(--rule); }
.case-play img { display: block; height: auto; max-height: 580px; object-fit: cover; transform: none !important; }
.case-play-caption { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 32px; background: var(--paper-deep); color: var(--ink); }
.case-play-caption > span { font: 400 1.4rem/1.3 var(--serif); }
.case-play-caption strong { font: 500 1rem/1.4 var(--sans); white-space: nowrap; }
.case-play:hover .case-play-caption strong { color: var(--accent); }
.case-play:focus-visible, .case-spoilers > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.case-play-note { margin: 16px 0 48px; font: 400 .9rem/1.6 var(--sans); color: var(--ink-2); }
.case-spoilers > summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; border-block: 1px solid var(--rule); list-style: none; cursor: pointer; font: 400 clamp(1.4rem, 2.7vw, 2.2rem)/1.3 var(--serif); }
.case-spoilers > summary::-webkit-details-marker { display: none; }
.case-spoilers > summary small { display: block; margin-top: 10px; color: var(--ink-2); font: 400 .9rem/1.6 var(--sans); }
.spoilers-symbol { flex: none; font: 400 2.5rem/1 var(--sans); }
.case-spoilers .spoilers-open, .case-spoilers[open] .spoilers-closed { display: none; }
.case-spoilers[open] .spoilers-open { display: inline; }
.case-spoilers[open] .spoilers-symbol { transform: rotate(45deg); }
.case-spoilers > .case-body { margin-top: 32px; }
.case-story-intro { max-width: 56rem; padding-top: clamp(32px, 4vw, 56px); }
.case-story-intro h2 { line-height: 1.15; }
.case-story-intro p { max-width: 42rem; color: var(--ink-2); }
.case-spoilers .prose li + li { margin-top: .65em; }
@media (max-width: 640px) {
    .case-play-caption { align-items: flex-start; flex-direction: column; gap: 12px; padding: 22px; }
    .case-play-note { margin-bottom: 32px; }
    .case-spoilers > summary { gap: 16px; }
}