/* ==========================================================================
   千岛出海 · 内页差异层（在 page.css 之后加载）
   六个内页六个概念，共用令牌与 12 栏网格，不共用骨架。
   ========================================================================== */

/* ---------------------------------------------------------------- 1. 年轮时间轴 */
.tl { --tl-pad: clamp(2rem, 5vw, 4rem); --tl-ratio: 0; position: relative; grid-column-end: span 12;
      display: flex; flex-direction: column; gap: var(--space-10); padding-left: var(--tl-pad); }
.tl::before, .tl::after { content: ""; position: absolute; left: 0.4375rem; top: 0.5rem; width: 2px; border-radius: var(--r-pill); }
.tl::before { bottom: 0.5rem; background-color: var(--line-2); }
.tl::after { height: calc(var(--tl-ratio) * (100% - 1rem));
             background-image: linear-gradient(180deg, var(--accent), var(--accent-deep));
             transition: height var(--dur-reveal) var(--ease-out); }
/* 下面这批「单列栅格容器」都显式声明了 grid-template-columns: minmax(0, 1fr)。
   原因：display:grid 而不声明轨道时只有一条隐式 auto 轨道，宽度按 min-content 算；
   而 overflow-wrap: break-word（不同于 anywhere）**不降低 min-content 贡献**，
   于是子元素上那条 break-word 在压力下是惰性的。
   实测：400 字符无空格 token 会让 .tl__title 撑到 5258px（文档横向溢出 4036px）、
   .idx__title 4489px、.doc__h 4301px、.city__name 8786px、.ros__desc 元素宽度涨 15 倍
   （后者被 .ros__track 的 overflow-x 吸收，未溢出文档但会撑出横向滚动）。
   正常情况下 minmax(0, 1fr) 与原来的 auto 轨道等宽，视觉无变化。 */
.tl__item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.tl__item::before { content: ""; position: absolute; top: 0.5rem; left: calc(-1 * var(--tl-pad) + 0.0625rem);
  width: 0.75rem; height: 0.75rem; border-radius: 50%; border: 2px solid var(--line-2); background-color: var(--bg);
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.tl__item.is-reached::before { border-color: var(--accent); background-color: var(--accent); box-shadow: var(--sh-dot-halo); }
.tl__year { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: 1;
            letter-spacing: var(--ls-heading); font-variant-numeric: tabular-nums; }
.tl__item.is-reached .tl__year { color: var(--accent-deep); }
.tl__title { font-size: var(--fs-h3); font-weight: var(--fw-semi); letter-spacing: var(--ls-heading); }
.tl__desc { max-width: 36em; color: var(--ink-2); line-height: var(--lh-body); }
.tl__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tl__tag { font-size: var(--fs-foot); padding: 0.25rem 0.625rem; border-radius: var(--r-pill); background-color: var(--bg-mute); color: var(--ink-2); }






/* ---------------------------------------------------------------- 6. 新闻编辑室 */
.lead-story { grid-column-end: span 12; display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .lead-story { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-10); align-items: center; } }
.lead-story__shot { position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: var(--r-lg); overflow: hidden;
                    border: 1px solid var(--line); background-color: var(--bg-mute); box-shadow: var(--sh-md); }
.lead-story__shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.lead-story:hover .lead-story__shot img { transform: scale(1.02); }
.lead-story__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: var(--fs-foot); color: var(--ink-3); }
.lead-story__title { font-size: var(--fs-h2); font-weight: var(--fw-bold); letter-spacing: var(--ls-heading); line-height: var(--lh-heading); }
.lead-story__desc { color: var(--ink-2); line-height: var(--lh-body); max-width: 34em; }
.filter { grid-column-end: span 12; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.filter__btn { min-height: var(--tap-min); padding: 0 var(--space-5); border-radius: var(--r-pill);
  border: 1px solid var(--line); background-color: var(--surface); font: inherit; font-size: var(--fs-small);
  color: var(--ink-2); cursor: pointer; touch-action: manipulation;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.filter__btn:hover { color: var(--ink); border-color: var(--line-2); }
.filter__btn:active { transform: translateY(1px); }
.filter__btn[aria-pressed="true"] { color: var(--on-deep); background-color: var(--accent); border-color: var(--accent); }
/* In the dark theme --accent (#FF4D5E) is a light colour, so the pressed-state label must be dark to keep the 4.5:1 contrast required for the 15px (--fs-small) button label. */
[data-theme="dark"] .filter__btn[aria-pressed="true"] { color: var(--surface); }
.filter__count { font-size: var(--fs-foot); color: var(--ink-3); margin-left: auto; font-variant-numeric: tabular-nums; }
.newsroom { grid-column-end: span 12; display: grid; gap: var(--space-4); }
.newsroom__item { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: var(--space-6) 0;
                  border-top: 1px solid var(--line); }
.newsroom__item:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 760px) { .newsroom__item { grid-template-columns: 9rem minmax(0, 1fr) 11rem; align-items: center; gap: var(--space-6); } }
.newsroom__date { font-family: var(--font-display); font-size: var(--fs-small); color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* 新闻列表的标题是真实正文，不做截断（截断会丢掉用户要看的信息），
   只保证长标题、长英文词不会顶破栅格。 */
.newsroom__title { font-size: var(--fs-h4); font-weight: var(--fw-semi); letter-spacing: var(--ls-heading);
  overflow-wrap: break-word; }
/* 其余标题/正文列同理：按词换行即可，容器都是 minmax(0, 1fr)，不会被撑破 */
.tl__title, .idx__title, .lead-story__title, .doc__h, .city__name, .city__v, .idx__label, .doc__p, .lead-story__desc { overflow-wrap: break-word; }
.newsroom__item:hover .newsroom__title { color: var(--accent-deep); }
.newsroom__shot { position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: var(--r-sm); overflow: hidden; background-color: var(--bg-mute); border: 1px solid var(--line); }
.newsroom__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.newsroom__empty { grid-column-end: span 12; padding: var(--space-10); text-align: center; color: var(--ink-3);
                   border: 1px dashed var(--line-2); border-radius: var(--r-lg); }
.article-lead { grid-column-end: span 12; max-width: 44em; font-size: 1.125rem; color: var(--ink-2); line-height: var(--lh-body); }

/* 正文是 CMS 原样 HTML：补上基础排版，否则内链看不见、列表丢符号、图片无收边 */
.article-body { grid-column-end: span 12; max-width: 42em; display: flex; flex-direction: column; gap: var(--space-5);
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); }
.article-body p,
.article-body li { overflow-wrap: break-word; }
.article-body h2,
.article-body h3 { margin-top: var(--space-4); }
.article-body a { color: var(--accent-deep); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-out); }
.article-body a:hover { color: var(--accent); }
.article-body ul { list-style: disc; padding-left: 1.5em; display: flex; flex-direction: column; gap: var(--space-2); }
.article-body ol { list-style: decimal; padding-left: 1.5em; display: flex; flex-direction: column; gap: var(--space-2); }
.article-body img { border-radius: var(--r-md); border: 1px solid var(--line); }
.article-body blockquote { border-left: 2px solid var(--accent-line); padding-left: var(--space-4); color: var(--ink-2); }

/* 文章面包屑：之前无样式，渲染成普通行内文字 */
.crumbs { font-size: var(--fs-foot); color: var(--ink-3); margin-bottom: var(--space-2); }
.crumbs a { transition: color var(--dur-fast) var(--ease-out); }
.crumbs a:hover { color: var(--accent-deep); }
.rel { grid-column-end: span 12; display: grid; gap: var(--space-4); }
@media (min-width: 760px) { .rel { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } }
.rel__card { display: grid; gap: var(--space-2); padding: var(--space-5); border-radius: var(--r-lg);
             border: 1px solid var(--line); background-color: var(--surface); box-shadow: var(--sh-sm);
             transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring),
               box-shadow var(--dur-base) var(--ease-out); }
.rel__card:hover { border-color: var(--accent-line); transform: translateY(-2px);
  box-shadow: var(--sh-md), 0 16px 40px -16px var(--accent-glow); }
.rel__date { font-size: var(--fs-foot); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rel__title { font-size: var(--fs-h4); font-weight: var(--fw-semi); }