/* Match the Japanese font stack used by https://fashionpost.jp/special/ntv/. */
:root { --ntv-japanese-font: "a-otf-midashi-go-mb31-pr6n", "Hiragino Sans", "Hiragino Kaku Gothic ProN", MyHiragino, メイリオ, Meiryo, Osaka, "MS UI Gothic", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
/* Keep the existing 1440 × 2283 opening canvas, then begin the gallery at Y2267. */
.story-region { display: grid; grid-template-columns: 100%; position: relative; margin-top: -3.1944444444cqw; }
.gallery-stage { display: grid; grid-template-columns: 100%; }
.story-body, .story-rail { grid-area: 1 / 1; min-width: 0; }
.story-content { padding-top: 2.0833333333cqw; }
.story-rail { position: sticky; top: 20px; align-self: start; height: 0; z-index: 20; pointer-events: none; transition: opacity 250ms ease; }
.story-rail--hidden { opacity: 0; }
.story-rail img { position: absolute; left: 1.5277777778%; top: 0; width: 96.875%; height: auto; }
.photo-gallery { width: 56.25%; margin-left: 21.875%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6944444444cqw; }
.photo-gallery img { width: 100%; height: auto; aspect-ratio: 400 / 533; object-fit: cover; }
.gallery-group { margin: 0; min-width: 0; display: grid; grid-template-columns: minmax(0,1fr); align-content: start; gap: .6944444444cqw; padding-bottom: 2.0833333333cqw; }
.gallery-group--pair { grid-column: 1 / -1; grid-template-columns: repeat(2,minmax(0,1fr)); }
.gallery-credit { grid-column: 1 / -1; margin: 0; width: 20cqw; max-width: 100%; color: #db1e1e; font-family: var(--ntv-japanese-font); font-size: .6944444444cqw; font-weight: 500; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; }
.gallery-photo { display: block; min-width: 0; cursor: zoom-in; }
.gallery-photo:focus-visible { outline: 2px solid #db1e1e; outline-offset: 4px; }
.program-article { width: 56.25%; margin: 8.3333333333cqw 0 0 21.7361111111%; display: flex; flex-direction: column; gap: 4.1666666667cqw; color: #db1e1e; font-family: var(--ntv-japanese-font); font-weight: 500; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.article-text { margin: 0; padding: 0; width: var(--block-width); min-height: var(--block-height); font-size: var(--text-size); line-height: var(--text-leading); font-weight: 500; letter-spacing: 0; white-space: pre-line; overflow-wrap: anywhere; }
.article-text a { color: inherit; text-decoration: none; }
.article-text a:hover { text-decoration: underline; }
.article-text a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.article-photos { width: 100.4938271605%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .1388888889cqw; }
.article-photos img { width: 100%; height: auto; aspect-ratio: 406 / 228; object-fit: cover; }
.article-photo-stack { display: flex; flex-direction: column; gap: .1388888889cqw; }
/* The footer follows the article in normal flow; no document-height assumptions. */
.footer-stage { overflow: clip; }
.footer-column { position: relative; width: 100%; margin-left: 0; padding: 3.0555555556cqw 0 4.1666666667cqw 1.3194444444cqw; min-height: 27.2222222222cqw; }
.footer-pending { transform: translateY(100vh); }
.footer-revealed { animation: footer-rise 1100ms cubic-bezier(.16,1,.3,1) both; }
@keyframes footer-rise {
  from { transform: translateY(var(--footer-rise-distance, 100vh)); }
  to { transform: translateY(0); }
}
.p-gf { width: 37.0833333333cqw; padding-top: 98px; font-family: neue-haas-unica, var(--ntv-japanese-font); }
.footer-baseline { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.p-gf__vol1 { left: 69.1997612847%; top: auto; bottom: var(--footer-baseline-offset, 4.35cqw); }
.p-gf__vol1 img { display: block; }

/* Figma rounds the 12px summary leading to 14px (18 lines = 252px). */
.article-text[data-content-node="143:1651"] { line-height: .9722222222cqw; }

/* Progressive enhancement: content stays visible when scripting is unavailable. */
.content-pending { opacity: 0; transform: translateY(24px); }
.content-revealed { animation: content-fade-up 900ms cubic-bezier(.22,.61,.36,1) var(--reveal-delay, 0ms) both; }
@keyframes content-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .story-rail { transition: none; }
  .content-pending, .content-revealed { opacity: 1; transform: none; animation: none; }
  .footer-pending, .footer-revealed { transform: none; animation: none; }
}

.photo-lightbox { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #141414; color: #fff; overflow: hidden; font: 14px/1.5 var(--ntv-japanese-font); }
.photo-lightbox::backdrop { background: #141414; }
.lightbox-stage { position: absolute; inset: 60px 76px 60px; display: flex; align-items: center; justify-content: center; }
.lightbox-image { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.photo-lightbox button { appearance: none; border: 0; border-radius: 0; background: transparent; color: inherit; padding: 12px 16px; font: inherit; cursor: pointer; min-height: 44px; }
.photo-lightbox button:hover { background: #ffffff18; }
.photo-lightbox button:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.photo-lightbox button[hidden] { display: none; }
.lightbox-tools { position: absolute; top: 8px; right: 12px; display: flex; gap: 12px; }
.photo-lightbox .lightbox-prev, .photo-lightbox .lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); font: 44px/1 sans-serif; width: 60px; height: 72px; }
.lightbox-prev { left: 8px; }
.lightbox-next { right: 8px; }
.lightbox-caption { position: absolute; left: 16px; right: 16px; bottom: 16px; margin: 0; text-align: center; font-size: 12px; letter-spacing: .04em; }