/**
 * NARITA TIME — Story 個別記事 v3（single-article-max 採用版）
 *
 * 設計書 §4 / §8 の single-article-max を本番トークン（--ntm-*）へ読み替えて実装。
 * 思想：トップ＝掴む動き／記事＝「読書を邪魔しない高度な動き」。
 *   視差ヒーロー＋KenBurns / 追従型章ナビ（現在地ハイライト）/ 読了プログレス /
 *   ヘッダー透明→白 / ドロップキャップ / 本文を飛び出す全幅写真 / 大型プルクオート /
 *   要素せり上がり登場 / 関連記事の時間差立体登場。全演出 reduced-motion 対応。
 *
 * クラスは ntm-art- 名前空間（旧 .ntm-story-* と衝突しない）。
 * 既存パーツ（breadcrumb / series-navigator / shop-info-card / share）は流用。
 *
 * @package naritatime
 */

/* ============================================================
   0. リビール（single-story.js が .is-in を付与）
   ============================================================ */
.ntm-art-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s var(--ntm-ease-out), transform .8s var(--ntm-ease-out);
}
.ntm-art-reveal.is-in { opacity: 1; transform: none; }

/* JS無効/未実行時のフォールバック：reveal/関連記事を確実に表示（html.ntm-js は header.php が同期付与） */
html:not(.ntm-js) .ntm-art-reveal,
html:not(.ntm-js) .ntm-art-rel { opacity: 1 !important; transform: none !important; }

/* ============================================================
   1. 記事ページのヘッダー挙動（Hero上=透明 → スクロールで solid）
   ============================================================ */
body.single-nts_story .ntm-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    background: transparent;
    border-bottom: 1px solid transparent;
    color: #fff;
    transition: background var(--ntm-transition-normal), color var(--ntm-transition-normal), border-color var(--ntm-transition-normal);
}
body.single-nts_story .ntm-header .ntm-logo-en,
body.single-nts_story .ntm-header .ntm-logo-tagline,
body.single-nts_story .ntm-header .ntm-nav-link,
body.single-nts_story .ntm-header .ntm-search-toggle,
body.single-nts_story .ntm-header .ntm-menu-toggle { color: #fff; }
body.single-nts_story .ntm-header .ntm-menu-toggle-bar { background: currentColor; }

body.single-nts_story .ntm-header.is-scrolled {
    background: rgba(248, 245, 238, .94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom-color: var(--ntm-hairline);
    color: var(--ntm-indigo);
}
body.single-nts_story .ntm-header.is-scrolled .ntm-logo-en,
body.single-nts_story .ntm-header.is-scrolled .ntm-nav-link,
body.single-nts_story .ntm-header.is-scrolled .ntm-search-toggle,
body.single-nts_story .ntm-header.is-scrolled .ntm-menu-toggle { color: var(--ntm-indigo); }
body.single-nts_story .ntm-header.is-scrolled .ntm-logo-tagline { color: var(--ntm-terracotta); }

/* ============================================================
   2. 読了プログレスバー
   ============================================================ */
.ntm-art-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 0;
    background: var(--ntm-terracotta);
    z-index: var(--ntm-z-tooltip);
    transition: width .1s linear;
}

/* ============================================================
   3. 視差ヒーロー（KenBurns + 暗幕 + タイトル）
   ============================================================ */
.ntm-art-hero {
    position: relative;
    min-height: 82vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--ntm-indigo-deep);
}
.ntm-art-hero-bg {
    position: absolute;
    inset: -8% 0;
    background-size: cover;
    background-position: center;
    will-change: transform;
    animation: ntmArtKenburns 20s ease-out forwards;
}
@keyframes ntmArtKenburns {
    from { transform: scale(1.08); }
    to   { transform: scale(1.0); }
}
.ntm-art-hero-ov {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(19,27,46,.25), rgba(19,27,46,.35) 45%, rgba(19,27,46,.82));
}
.ntm-art-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--ntm-content-max);
    margin: 0 auto;
    padding: 0 var(--ntm-padding-pc) clamp(2.5rem, 6vw, 5rem);
    color: #fff;
}
.ntm-art-hero-label {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-family: var(--ntm-font-en-italic);
    font-style: italic;
    font-size: .85rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255,255,255,.9);
    margin-bottom: 1.2rem;
}
.ntm-art-hero-label .area { color: var(--ntm-sand); }
.ntm-art-hero-label .sep { opacity: .5; }
.ntm-art-hero-title {
    font-family: var(--ntm-font-serif);
    font-weight: 700;
    font-size: clamp(1.9rem, 4.6vw, 3.4rem);
    line-height: 1.5;
    letter-spacing: .03em;
    max-width: 20em;
    color: #fff; /* グローバル h1 色を上書き */
    text-shadow: 0 2px 40px rgba(0,0,0,.4);
}
.ntm-art-hero-sub {
    font-family: var(--ntm-font-serif);
    font-weight: 400;
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    line-height: 1.9;
    /* base.css の body.ntm-theme p{color:ink} に勝てないため !important で白を強制 */
    color: rgba(255,255,255,.9) !important;
    margin-top: 1.2rem;
    max-width: 36em;
    text-shadow: 0 1px 20px rgba(0,0,0,.5);
}
.ntm-art-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 1.8rem;
    font-family: var(--ntm-font-en);
    font-size: .78rem;
    letter-spacing: .08em;
    color: rgba(255,255,255,.82);
}
.ntm-art-hero-meta a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 1px; }
.ntm-art-hero-meta a:hover { color: #fff; }
.ntm-art-hero-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ntm-sand); }
.ntm-art-hero-scroll {
    position: absolute;
    left: 50%; bottom: 1.4rem;
    transform: translateX(-50%);
    z-index: 2;
    width: 1px; height: 42px;
    background: linear-gradient(180deg, rgba(255,255,255,.7), transparent);
    overflow: hidden;
}
.ntm-art-hero-scroll::after {
    content: "";
    position: absolute; top: 0; left: 0;
    width: 100%; height: 40%;
    background: var(--ntm-terracotta);
    animation: ntmArtScrollDot 2.2s infinite cubic-bezier(.7,0,.3,1);
}
@keyframes ntmArtScrollDot { 0% { transform: translateY(-100%); } 60%,100% { transform: translateY(220%); } }

/* Hero に写真が無い場合 */
.ntm-art-hero--nophoto { min-height: 56vh; }
.ntm-art-hero--nophoto .ntm-art-hero-ov { background: linear-gradient(180deg, var(--ntm-indigo), var(--ntm-indigo-deep)); }

/* ============================================================
   4. パンくず（薄いバー）
   ============================================================ */
.ntm-art-breadcrumb {
    background: var(--ntm-paper);
    border-bottom: 1px solid var(--ntm-hairline);
}
.ntm-art-breadcrumb-inner {
    max-width: var(--ntm-content-max);
    margin: 0 auto;
    padding: .9rem var(--ntm-padding-pc);
}

/* ============================================================
   5. 本文レイアウト（中央読書カラム + 追従章ナビ）
   ============================================================ */
.ntm-art-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--ntm-content-narrow)) minmax(0, 1fr);
    gap: 0;
    background: var(--ntm-snow);
    padding: clamp(2.5rem, 5vw, 4.5rem) var(--ntm-padding-pc) clamp(3rem, 6vw, 5rem);
}
.ntm-art-toc-col { grid-column: 1; }
.ntm-art-main { grid-column: 2; min-width: 0; }

/* 追従型 章ナビ */
.ntm-art-toc {
    position: sticky;
    top: 110px;
    max-width: 190px;
    margin-left: auto;
    margin-right: 2.5rem;
    padding-left: 1rem;
    border-left: 1px solid var(--ntm-hairline);
}
.ntm-art-toc-h {
    font-family: var(--ntm-font-en-italic);
    font-style: italic;
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ntm-terracotta);
    margin-bottom: 1rem;
}
.ntm-art-toc-link {
    display: block;
    font-family: var(--ntm-font-serif);
    font-size: .82rem;
    line-height: 1.5;
    color: var(--ntm-slate);
    text-decoration: none;
    padding: .4rem 0 .4rem 1rem;
    border-left: 2px solid transparent;
    margin-left: -1rem;
    transition: color var(--ntm-transition-fast), border-color var(--ntm-transition-fast);
}
.ntm-art-toc-link:hover { color: var(--ntm-indigo); }
.ntm-art-toc-link.is-current {
    color: var(--ntm-indigo);
    border-left-color: var(--ntm-terracotta);
    font-weight: 600;
}
@media (max-width: 1180px) {
    .ntm-art-toc { display: none; }
}

/* ============================================================
   6. 本文タイポグラフィ（読書最適化）
   ============================================================ */
.ntm-art-body {
    font-family: var(--ntm-font-serif);
    color: var(--ntm-ink);
}
.ntm-art-body > p {
    font-size: 1.075rem;
    line-height: 2.05;
    letter-spacing: .02em;
    margin-bottom: 1.8rem;
}
/* ドロップキャップ（本文最初の段落） */
.ntm-art-body > p:first-of-type::first-letter {
    float: left;
    font-family: var(--ntm-font-serif);
    font-weight: 700;
    font-size: 3.6em;
    line-height: .82;
    padding: .05em .12em 0 0;
    color: var(--ntm-terracotta);
}
.ntm-art-body h2 {
    font-family: var(--ntm-font-serif);
    font-weight: 700;
    font-size: clamp(1.4rem, 2.6vw, 1.75rem);
    line-height: 1.6;
    color: var(--ntm-indigo);
    letter-spacing: .03em;
    margin: 3.2rem 0 1.3rem;
    padding-left: 1rem;
    border-left: 3px solid var(--ntm-terracotta);
    scroll-margin-top: 100px;
}
.ntm-art-body h3 {
    font-family: var(--ntm-font-serif);
    font-weight: 600;
    font-size: clamp(1.15rem, 2vw, 1.3rem);
    color: var(--ntm-indigo);
    letter-spacing: .03em;
    margin: 2.4rem 0 1rem;
    scroll-margin-top: 100px;
}
.ntm-art-body a {
    color: var(--ntm-terracotta);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.ntm-art-body strong { font-weight: 700; color: var(--ntm-indigo); }
.ntm-art-body ul,
.ntm-art-body ol { margin: 0 0 1.8rem; padding-left: 1.4rem; }
.ntm-art-body li { font-size: 1.05rem; line-height: 1.95; margin-bottom: .5rem; list-style: revert; }

/* 本文を飛び出す全幅写真 */
.ntm-art-body figure,
.ntm-art-body .wp-block-image {
    margin: 2.8rem auto;
    width: min(900px, 92vw);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
.ntm-art-body figure img,
.ntm-art-body .wp-block-image img {
    width: 100%;
    height: auto;
    display: block;
    background: var(--ntm-paper-deep);
}
.ntm-art-body figcaption,
.ntm-art-body .wp-block-image figcaption {
    font-family: var(--ntm-font-serif);
    font-size: .8rem;
    color: var(--ntm-slate);
    text-align: center;
    margin-top: .8rem;
}
/* 章ナビ表示時は飛び出し幅を抑えて重なりを防ぐ */
@media (min-width: 1181px) {
    .ntm-art-body figure,
    .ntm-art-body .wp-block-image { width: min(760px, 90vw); }
}

/* 大型プルクオート */
.ntm-art-body blockquote {
    margin: 2.8rem 0;
    padding: .5rem 0 .5rem 1.8rem;
    border-left: 2px solid var(--ntm-sand);
    font-family: var(--ntm-font-serif);
    font-size: clamp(1.2rem, 2.4vw, 1.5rem);
    line-height: 1.95;
    color: var(--ntm-indigo);
    font-weight: 500;
}
.ntm-art-body blockquote p { margin-bottom: .6rem; }
.ntm-art-body blockquote cite {
    display: block;
    font-family: var(--ntm-font-en);
    font-style: normal;
    font-size: .8rem;
    letter-spacing: .1em;
    color: var(--ntm-slate);
    margin-top: .8rem;
}

/* ============================================================
   7. テーマタグ
   ============================================================ */
.ntm-art-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin: 3rem 0 0;
    padding-top: 2rem;
    border-top: 1px solid var(--ntm-hairline);
}
.ntm-art-tags-label {
    font-family: var(--ntm-font-en-italic);
    font-style: italic;
    font-size: .8rem;
    letter-spacing: .15em;
    color: var(--ntm-terracotta);
    margin-right: .4rem;
}
.ntm-art-tag {
    font-family: var(--ntm-font-en);
    font-size: .78rem;
    letter-spacing: .04em;
    color: var(--ntm-slate);
    border: 1px solid var(--ntm-hairline);
    padding: .4rem .9rem;
    text-decoration: none;
    transition: border-color var(--ntm-transition-fast), color var(--ntm-transition-fast);
}
.ntm-art-tag:hover { border-color: var(--ntm-terracotta); color: var(--ntm-terracotta); }

/* ============================================================
   8. 編集後記 / 著者カード
   ============================================================ */
.ntm-art-afterword {
    margin: 3rem 0 0;
    padding: 2.2rem;
    background: var(--ntm-paper);
    border: 1px solid var(--ntm-hairline);
}
.ntm-art-afterword-title { margin-bottom: 1rem; }
.ntm-art-afterword-title .en {
    display: block;
    font-family: var(--ntm-font-en-italic);
    font-style: italic;
    font-size: .8rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ntm-terracotta);
}
.ntm-art-afterword-title .ja {
    font-family: var(--ntm-font-serif);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--ntm-indigo);
}
.ntm-art-afterword-content p { font-family: var(--ntm-font-serif); font-size: 1rem; line-height: 1.95; color: var(--ntm-ink); }

.ntm-art-author {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    margin: 2.5rem 0 0;
    padding: 2rem 0;
    border-top: 1px solid var(--ntm-hairline);
    border-bottom: 1px solid var(--ntm-hairline);
}
.ntm-art-author-avatar { border-radius: 50%; flex-shrink: 0; overflow: hidden; width: 64px; height: 64px; }
.ntm-art-author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ntm-art-author-label {
    font-family: var(--ntm-font-en-italic);
    font-style: italic;
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ntm-terracotta);
}
.ntm-art-author-name {
    font-family: var(--ntm-font-serif);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--ntm-indigo);
    margin: .2rem 0;
}
.ntm-art-author-name a { color: inherit; text-decoration: none; }
.ntm-art-author-bio { font-family: var(--ntm-font-serif); font-size: .88rem; line-height: 1.8; color: var(--ntm-slate); }

/* ============================================================
   9. シェア
   ============================================================ */
.ntm-art-share { margin: 2.5rem 0 0; }
.ntm-art-share-title {
    font-family: var(--ntm-font-en-italic);
    font-style: italic;
    font-size: .85rem;
    letter-spacing: .15em;
    color: var(--ntm-terracotta);
    margin-bottom: 1rem;
}
.ntm-art-share-list { display: flex; flex-wrap: wrap; gap: .7rem; }
.ntm-art-share-list a,
.ntm-art-share-list button {
    font-family: var(--ntm-font-en);
    font-size: .8rem;
    letter-spacing: .05em;
    color: var(--ntm-indigo);
    background: var(--ntm-snow);
    border: 1px solid var(--ntm-hairline);
    padding: .6rem 1.1rem;
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--ntm-transition-fast), color var(--ntm-transition-fast);
}
.ntm-art-share-list a:hover,
.ntm-art-share-list button:hover { border-color: var(--ntm-terracotta); color: var(--ntm-terracotta); }

/* ============================================================
   10. 関連記事（時間差・立体登場）
   ============================================================ */
.ntm-art-related {
    background: var(--ntm-paper);
    padding: clamp(3rem, 6vw, 5rem) 0;
}
.ntm-art-related-inner {
    max-width: var(--ntm-content-max);
    margin: 0 auto;
    padding: 0 var(--ntm-padding-pc);
}
.ntm-art-related-h {
    text-align: center;
    font-family: var(--ntm-font-en-italic);
    font-style: italic;
    font-size: 1rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ntm-terracotta);
    margin-bottom: 2.6rem;
}
.ntm-art-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.8rem;
}
.ntm-art-rel {
    display: block;
    text-decoration: none;
    color: inherit;
    opacity: 0;
    transform: translateY(34px) perspective(900px) rotateX(6deg);
    transform-origin: top center;
    transition: opacity .8s var(--ntm-ease-out), transform .8s var(--ntm-ease-out);
}
.ntm-art-rel.is-in { opacity: 1; transform: none; }
.ntm-art-rel-img { aspect-ratio: 4/3; overflow: hidden; background: var(--ntm-paper-deep); margin-bottom: .9rem; }
.ntm-art-rel-img img {
    width: 100%; height: 100%; object-fit: cover;
    filter: saturate(.94);
    transition: transform 1.1s var(--ntm-ease-out);
}
.ntm-art-rel:hover .ntm-art-rel-img img { transform: scale(1.05); }
.ntm-art-rel-cat {
    font-family: var(--ntm-font-en-italic);
    font-style: italic;
    font-size: .75rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ntm-terracotta);
}
.ntm-art-rel-ttl {
    font-family: var(--ntm-font-serif);
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--ntm-indigo);
    margin: .3rem 0;
}
.ntm-art-rel-date { font-family: var(--ntm-font-en); font-size: .72rem; letter-spacing: .1em; color: var(--ntm-slate); }
@media (max-width: 760px) {
    .ntm-art-related-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   11. 前後の記事ナビ
   ============================================================ */
.ntm-art-pn {
    max-width: var(--ntm-content-max);
    margin: 0 auto;
    padding: clamp(2rem, 4vw, 3.5rem) var(--ntm-padding-pc);
}
.ntm-art-pn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.ntm-art-pn-link {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 1.4rem 1.6rem;
    border: 1px solid var(--ntm-hairline);
    transition: border-color var(--ntm-transition-fast), transform var(--ntm-transition-fast);
}
.ntm-art-pn-link:hover { border-color: var(--ntm-terracotta); transform: translateY(-2px); }
.ntm-art-pn-link.is-next { text-align: right; }
.ntm-art-pn-label {
    display: block;
    font-family: var(--ntm-font-en-italic);
    font-style: italic;
    font-size: .75rem;
    letter-spacing: .12em;
    color: var(--ntm-terracotta);
    margin-bottom: .5rem;
}
.ntm-art-pn-title { font-family: var(--ntm-font-serif); font-weight: 600; font-size: .98rem; line-height: 1.5; color: var(--ntm-indigo); }
@media (max-width: 640px) {
    .ntm-art-pn-grid { grid-template-columns: 1fr; }
    .ntm-art-pn-link.is-next { text-align: left; }
}

/* ============================================================
   12. prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .ntm-art-reveal,
    .ntm-art-rel { opacity: 1; transform: none; transition: none; }
    .ntm-art-hero-bg { animation: none; transform: none; }
    .ntm-art-hero-scroll::after { animation: none; }
    .ntm-art-rel-img img { transition: none; }
    .ntm-art-progress { display: none; }
}