/* ==========================================================================
   日本铁壶志 — 首页版式
   主体是铸铁器物，所以深色是主表面；金色只做细线与小记号（象嵌的用法），
   不铺成色块。全部沿用 style.css 的既有变量，未引入新色值。
   ========================================================================== */

/* --------------------------------------------------------------------------
   报头
   -------------------------------------------------------------------------- */

.masthead {
  background: var(--bg-dark);
  padding: 64px 0 56px;
}

/* 文字在左、照片在右。照片是「我确实在这儿」的证据，不是装饰，
   所以给足尺寸，但不喧宾夺主——文字栏仍占主导。 */
.masthead-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 48px;
  align-items: center;
}

.masthead-inner {
  max-width: 640px;
}

.masthead-figure {
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-sm);
  /* 深色底上给一道极淡的边，避免照片直接“浮”在黑上 */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
}

.masthead-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.masthead-lede {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  font-weight: 500;
  line-height: 1.75;
  color: var(--text-light);
  margin: 0 0 18px;
}

.masthead-sub {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--text-sub);
  margin: 0;
  max-width: 560px;
}

/* 一条细金线收尾。象嵌是嵌进铁里的一条线，不是一块面 */
.masthead-rule {
  width: 56px;
  height: 2px;
  background: var(--gold-primary);
  margin-top: 30px;
}

/* --------------------------------------------------------------------------
   最新一则
   -------------------------------------------------------------------------- */

.lead-entry {
  margin-bottom: 56px;
}

/* 最新一则的图。
   原为 16:10 且宽度撑满内容栏——宽屏下高度接近 700px，
   一进首页整屏都是图，标题被挤到折叠线以下。
   改成 16:9 并限高 400px，图仍是主角但读者一眼能看到标题。 */
.lead-entry-media {
  display: block;
  aspect-ratio: 16 / 9;
  max-height: 400px;
  overflow: hidden;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  margin-bottom: 22px;
}

.lead-entry-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

.lead-entry-media:hover img {
  transform: scale(1.03);
}

.lead-entry-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--border-color);
  background: var(--bg-secondary);
}

.entry-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--text-sub);
  margin-bottom: 12px;
}

/* 日期右侧的浏览量。首页已不显示分类——站点只做铁壶一条线，
   分类标签在信息流里是噪音，归类靠顶部的品类入口条。 */
.entry-views {
  color: var(--text-sub);
  padding-left: 12px;
  border-left: 1px solid var(--border-color);
}

.lead-entry-title {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  font-weight: 600;
  line-height: 1.55;
  margin: 0 0 14px;
}

.lead-entry-title a {
  color: var(--text-main);
  text-decoration: none;
}

.lead-entry-title a:hover {
  color: var(--gold-dark);
}

.lead-entry-excerpt {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--text-body);
  margin: 0;
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   更早的记录：日期索引，不是卡片网格
   -------------------------------------------------------------------------- */

.index-heading {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-main);
  margin: 0 0 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
}

.entry-index {
  list-style: none;
  margin: 0;
  padding: 0;
}

.entry-index-item {
  border-bottom: 1px solid var(--border-light);
}

.entry-index-item a {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 22px 0;
  text-decoration: none;
  transition: var(--transition-fast);
}

.entry-index-item a:hover .entry-index-title {
  color: var(--gold-dark);
}

/* 日期竖排，像账簿的条目号 */
.entry-index-date {
  flex-shrink: 0;
  width: 46px;
  text-align: right;
  font-family: var(--font-sans);
  line-height: 1.3;
  padding-top: 2px;
}

.entry-index-date .d-md {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-main);
}

.entry-index-date .d-y {
  display: block;
  font-size: 0.6875rem;
  color: var(--text-sub);
}

.entry-index-body {
  flex: 1;
  min-width: 0;
}

.entry-index-title {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--text-main);
  margin-bottom: 6px;
  transition: var(--transition-fast);
}

.entry-index-excerpt {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  line-height: 1.75;
  color: var(--text-muted);
}

.entry-index-thumb {
  flex-shrink: 0;
  width: 96px;
  height: 72px;
  overflow: hidden;
  border-radius: var(--radius-xs);
  background: var(--bg-secondary);
}

.entry-index-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   移动端
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .masthead-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* 窄屏改成横幅比例，避免正方形占掉整屏 */
  .masthead-figure {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 768px) {
  .masthead {
    padding: 44px 0 40px;
  }

  .entry-index-item a {
    gap: 14px;
    padding: 18px 0;
  }

  .entry-index-date {
    width: 38px;
  }

  /* 窄屏隐藏缩略图，标题优先 */
  .entry-index-thumb {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   关于页正文
   -------------------------------------------------------------------------- */

.about-p {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 2;
  color: var(--text-body);
  margin: 0 0 1.5em;
}

.about-h2 {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-main);
  margin: 2.6em 0 1em;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.about-list {
  margin: 0 0 1.8em;
  padding-left: 1.2em;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 2.1;
  color: var(--text-body);
}

.about-quote {
  margin: 1.8em 0;
  padding: 22px 26px;
  background: var(--gold-light);
  border-left: 2px solid var(--gold-primary);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.9;
  color: var(--text-main);
}

.about-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 1em;
}

/* --------------------------------------------------------------------------
   品类入口条
   参考总站首页「三大平台入口」的做法：入口带记录数，体现内容厚度。
   -------------------------------------------------------------------------- */

.cat-bar {
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-light);
  /* 右侧渐隐用伪元素叠在列表上，所以容器要建立定位上下文 */
  position: relative;
}

.cat-bar-list {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  /* 惯性滚动 + 吸附，手机上划起来跟原生列表一致 */
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.cat-bar-list::-webkit-scrollbar {
  display: none;
}

.cat-bar-item {
  scroll-snap-align: start;
}

/* --------------------------------------------------------------------------
   右侧渐隐：提示「右边还有」
   ------------------------------------------------------------------------
   品类从六个加到九个之后，390 宽的屏幕上内容总宽 859px、可见只有 464px——
   九个里只看得到四个，剩下五个藏在右边。而滚动条被 scrollbar-width: none
   藏起来了，页面上没有任何迹象表明还能划。

   这里用一条渐隐盖住最右边一小段，让边缘的品类名「淡出去」而不是被切断，
   读者一眼能看出后面还有内容。宽屏放得下九个时不需要，所以只在窄屏出现。
   pointer-events: none 保证它不挡住点击。
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .cat-bar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 1px;
    width: 40px;
    pointer-events: none;
    background: linear-gradient(
      to right,
      rgba(250, 248, 245, 0),
      var(--bg-primary) 78%
    );
  }
}

/* --------------------------------------------------------------------------
   窄屏：品类条改为换行，不再横向滚动
   ------------------------------------------------------------------------
   品类从六个加到九个之后，九项总宽 858px。402 宽的屏幕上一屏只看得到四个，
   龙文堂之后的京都、金寿堂、云色堂、龟文堂、煎茶道具全部藏在右边。

   横向滚动加渐隐提示只能告诉读者「右边还有」，解决不了「看不见」——
   而这一条是站内导航，九个品类必须一眼全露出来。

   所以窄屏改成换行：单项内边距从 16px 20px 收到 10px 10px，
   九项排成 4+5 两行。收到 12px 时会变成 4+4+1，末行只剩一个不好看，
   所以取 10px。渐隐在换行模式下没有意义，一并关掉。
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .cat-bar::after {
    display: none;
  }

  .cat-bar-list {
    flex-wrap: wrap;
    gap: 0;
    overflow-x: visible;
    /* 换行后不再需要滚动吸附 */
    scroll-snap-type: none;
  }

  .cat-bar-item {
    padding: 10px 10px;
    scroll-snap-align: none;
  }
}

.cat-bar-item {
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 16px 20px;
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  color: var(--text-body);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: var(--transition-fast);
}

.cat-bar-item:hover {
  color: var(--gold-dark);
  border-bottom-color: var(--gold-primary);
}

.cat-bar-count {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  color: var(--text-sub);
}

/* --------------------------------------------------------------------------
   条目底部的分类与阅读数
   -------------------------------------------------------------------------- */

.entry-index-meta {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  color: var(--text-sub);
}

.entry-index-meta span + span {
  padding-left: 12px;
  border-left: 1px solid var(--border-light);
}

/* --------------------------------------------------------------------------
   侧栏标签云
   -------------------------------------------------------------------------- */

.sidebar-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.sidebar-tags a {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 5px 10px;
  background: var(--bg-secondary);
  border-radius: var(--radius-xs);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--text-body);
  text-decoration: none;
  transition: var(--transition-fast);
}

.sidebar-tags a:hover {
  background: var(--gold-light);
  color: var(--gold-dark);
}

.sidebar-tags em {
  font-style: normal;
  font-size: 0.625rem;
  color: var(--text-sub);
}

/* 这三个类此前只作结构占位，补上明确定义，避免依赖父级继承 */
.cat-bar-name {
  white-space: nowrap;
}

.lead-entry-body {
  max-width: 68ch;
}

.sidebar-brand-name {
  flex: 1;
}

/* --------------------------------------------------------------------------
   早期模板遗留的类。这些一直被引用但从未定义，
   之前依赖父级继承勉强能看，这里补上明确定义。
   -------------------------------------------------------------------------- */

/* index.php 与 page.php 的正文容器 */
.prose {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.95;
  color: var(--text-body);
}

.prose p {
  margin: 0 0 1.4em;
}

.prose h2,
.prose h3 {
  font-family: var(--font-serif);
  color: var(--text-main);
  margin: 2em 0 0.8em;
}

.prose a {
  color: var(--gold-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 404 页的小标签 */
.section-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--gold-dark);
  margin-bottom: 10px;
}

/* 移动端抽屉的关闭按钮与满宽按钮 */
.mobile-nav-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.4rem;
  cursor: pointer;
}

.w-100 {
  width: 100%;
}


/* 文章卡片无特色图时的占位。原先用大阪夜景照片顶替，
   但那张照片与内容无关，且方向已转为铁壶，故改为线稿。 */
.blog-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  color: var(--border-color);
}

/* --------------------------------------------------------------------------
   微信二维码
   二维码必须留足白边、保证足够尺寸，否则手机扫不出来。
   -------------------------------------------------------------------------- */

.sidebar-qr {
  margin: 0;
  text-align: center;
}

.sidebar-qr img {
  width: 100%;
  max-width: 190px;
  height: auto;
  display: block;
  margin: 0 auto;
  background: #FFFFFF;
  padding: 8px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
}

.sidebar-qr figcaption {
  margin-top: 8px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--text-sub);
}

/* 右侧工具条的悬停面板：放得下二维码，需要放宽 */
.side-rail-panel-qr {
  min-width: 168px;
  text-align: center;
}

.side-rail-panel-qr img {
  width: 140px;
  height: 140px;
  display: block;
  margin: 10px auto 0;
  background: #FFFFFF;
  border-radius: var(--radius-xs);
}

.side-rail-panel-qr .side-rail-panel-text {
  margin-top: 6px;
}

/* --------------------------------------------------------------------------
   报头搜索框
   放在铸铁黑底上，用半透明白描边，不引入新色值。
   -------------------------------------------------------------------------- */

.masthead-search {
  display: flex;
  align-items: stretch;
  max-width: 420px;
  margin-top: 26px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: var(--transition-fast);
}

.masthead-search:focus-within {
  border-color: var(--gold-primary);
}

.masthead-search input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--text-light);
}

.masthead-search input::placeholder {
  color: var(--text-sub);
}

/* Safari 会给 type=search 加一个自带的清除按钮，样式不统一，去掉 */
.masthead-search input::-webkit-search-decoration,
.masthead-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.masthead-search button {
  flex-shrink: 0;
  padding: 0 16px;
  background: transparent;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, .12);
  color: var(--text-sub);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: var(--transition-fast);
}

.masthead-search button:hover {
  color: var(--gold-primary);
}

/* 无障碍：仅供读屏软件的标签 */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

@media (max-width: 768px) {
  .masthead-search {
    max-width: 100%;
  }
}


/* --------------------------------------------------------------------------
   移动端元信息字号下限
   ------------------------------------------------------------------------
   实测 11px 落在三处：日期里的年份（.d-y）、浏览量、侧栏的「整理中」标签。
   11px 在 390 宽的屏上要凑近了看，统一提到 12px。

   这段必须写在 journal.css —— 它是最后加载的样式表。
   .d-y 的 0.6875rem 定义在本文件，.sidebar-tool-tag 定义在 blog.css，
   两者都排在 style.css 之后；同权重时后来者胜出，
   写在 style.css 里会被它们覆盖（已试过一次）。
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .entry-index-date .d-y,
  .entry-index-meta,
  .entry-index-meta span,
  .sidebar-tool-tag,
  .article-meta,
  .article-meta span,
  .blog-card-meta,
  .post-views,
  .footer-reads,
  .article-disclaimer {
    font-size: 0.75rem;
  }
}

/* --------------------------------------------------------------------------
   品类条：一级横排，二级悬停展开
   ------------------------------------------------------------------------
   品类页长到十四个之后平铺太长，改成两级。只是显示分层，URL 没有变化——
   二级页面仍然是 /slug/ 这一层，canonical 与收录状态都不受影响。

   桌面靠 :hover 展开，触屏没有 hover，用 :focus-within 接住；
   窄屏（767 以下）不做浮层，直接把二级平铺出来——手机上浮层容易误触，
   而且遮住下面的内容。
   -------------------------------------------------------------------------- */

.cat-bar-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2px;
  overflow: visible;
}

.cat-bar-group {
  position: relative;
}

.cat-bar-lead {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

/* 不可点的一级（「铁壶」）。桌面上不给手型也不变色，避免读者以为能点；
   触屏上仍然可以点来展开二级，所以只在有 hover 的设备上收掉指针。 */
@media (hover: hover) {
  .cat-bar-lead.is-plain {
    cursor: default;
  }

  .cat-bar-lead.is-plain:hover {
    color: var(--text-body);
  }
}

/* 下拉箭头 */
.cat-bar-caret {
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.45;
  transition: var(--transition-fast);
}

.cat-bar-group:hover .cat-bar-caret,
.cat-bar-group:focus-within .cat-bar-caret {
  opacity: 1;
  transform: rotate(180deg);
}

/* ---------- 二级浮层 ---------- */

.cat-bar-drop {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 40;
  min-width: 168px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
  /* 默认收起。用 visibility 而不是 display，是为了让过渡生效 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

.cat-bar-group:hover .cat-bar-drop,
.cat-bar-group:focus-within .cat-bar-drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.cat-bar-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  font-size: 0.875rem;
  color: var(--text-body);
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: var(--transition-fast);
}

.cat-bar-sub:hover {
  color: var(--gold-dark);
  background: var(--bg-secondary);
}

.cat-bar-sub .cat-bar-count {
  font-size: 0.75rem;
  opacity: 0.7;
}

/* ---------- 窄屏：不做浮层，二级平铺 ---------- */

@media (max-width: 767px) {
  .cat-bar-list {
    display: block;
  }

  .cat-bar-group {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light);
  }

  .cat-bar-group:last-child {
    border-bottom: none;
  }

  .cat-bar-caret {
    display: none;
  }

  .cat-bar-drop {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    min-width: 0;
    margin-top: 4px;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .cat-bar-sub {
    padding: 6px 8px;
    font-size: 0.8125rem;
  }
}

/* 触屏上由 main.js 加的展开状态，与 :hover 同等效果 */
.cat-bar-group.is-open .cat-bar-drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.cat-bar-group.is-open .cat-bar-caret {
  opacity: 1;
  transform: rotate(180deg);
}