/* Fragments / 摘句
   只管理 .fragments-page 里的排版，不改变网站其他页面。
   使用项目原有字体与配色；不创建新的 SVG 插画或装饰动画。
*/
.fragments-page {
  min-height: 74vh;
  padding-bottom: clamp(80px, 9vw, 130px);
}
.fragments-intro {
  padding-top: clamp(60px, 8vw, 112px);
  padding-bottom: clamp(35px, 5vw, 67px);
  border-bottom: 1px solid var(--rule);
}
.fragments-eyebrow {
  font: 500 12px/1.5 var(--sans);
  letter-spacing: .11em;
  color: var(--accent);
}
.fragments-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
}
.fragments-heading h1 {
  font: 400 clamp(51px, 7.7vw, 98px)/1.12 Georgia, "Times New Roman", serif;
  color: var(--text);
  letter-spacing: -.048em;
  margin: 21px 0 19px;
}
.fragments-heading p {
  color: var(--text-secondary);
  font-size: 15px;
  margin: 0;
  line-height: 1.95;
}
.fragments-number {
  color: var(--text-soft);
  display: flex;
  align-items: baseline;
  flex-direction: column;
  flex: none;
  border-left: 1px solid var(--rule);
  padding-left: 26px;
  padding-bottom: 6px;
}
.fragments-number strong {
  font: 400 clamp(28px, 3vw, 38px)/1.2 Georgia, serif;
  color: var(--accent);
}
.fragments-number small {
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.fragments-library { padding-top: 26px; }
.fragments-tabs {
  display: flex;
  gap: 8px 30px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--rule);
}
.fragments-tab {
  padding: 14px 2px 18px;
  background: transparent;
  color: var(--text-secondary);
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: 14px;
  transition: color .15s, border-color .15s;
}
.fragments-tab:hover,
.fragments-tab.active { color: var(--text); }
.fragments-tab.active { border-color: var(--accent); }
.fragments-tab small {
  color: var(--text-soft);
  margin-left: 6px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.fragments-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 27px;
}
.fragments-search {
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--text-soft);
  width: min(430px, 100%);
  color: var(--accent);
  padding-bottom: 9px;
}
.fragments-search > span { font-size: 23px; line-height: 1; }
.fragments-search input {
  flex: 1;
  width: 100%;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
}
.fragments-search input::placeholder { color: var(--text-soft); }
.fragments-sort {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-soft);
  font-size: 12px;
}
.fragments-sort select {
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper-card);
  color: var(--text);
  padding: 7px 10px;
  font-size: 12px;
  cursor: pointer;
}
.fragments-count {
  font-size: 12px;
  color: var(--text-soft);
  margin: 26px 0 16px;
}
.fragments-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 25px clamp(25px, 4.5vw, 74px);
}
.fragment-entry {
  min-width: 0;
  padding: 28px 0 34px;
  border-top: 1px solid var(--rule);
  break-inside: avoid;
}
.fragment-topline {
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: var(--text-soft);
  font-size: 12px;
  letter-spacing: .035em;
}
.fragment-index {
  color: var(--accent);
  font: 400 18px/1 Georgia, serif;
  margin-right: 7px;
  font-variant-numeric: tabular-nums;
}
.fragment-topline time {
  margin-left: auto;
  white-space: nowrap;
  font-size: 11px;
}
.fragment-text {
  margin: 24px 0 15px;
  color: var(--text);
  font: 400 clamp(20px, 2.15vw, 29px)/1.8 var(--serif);
  white-space: pre-line;
  overflow-wrap: anywhere;
  letter-spacing: .015em;
}
.fragment-translation {
  margin: 0 0 19px;
  color: var(--text-secondary);
  white-space: pre-line;
  font: 400 14px/1.9 var(--sans);
}
.fragment-image {
  margin: 13px 0 16px;
  padding: 0;
  border: 0;
  display: block;
  width: 100%;
  text-align: left;
  background: var(--paper-soft);
  cursor: zoom-in;
}
.fragment-image img {
  display: block;
  width: 100%;
  max-height: 370px;
  object-fit: contain; /* 无论横图或竖图，始终完整显示 */
}
.fragment-image span {
  display: block;
  padding: 8px 11px;
  font-size: 11px;
  color: var(--text-secondary);
}
.fragment-image-error { display: none; }
.fragment-foot {
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: end;
  padding-top: 15px;
  margin-top: 23px;
}
.fragment-attribution { min-width: 0; }
.fragment-attribution p {
  margin: 0 0 6px;
  color: var(--text-secondary);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.fragment-attribution p span { opacity: .5; margin: 0 3px; }
.fragment-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 13px;
  color: var(--text-soft);
  font-size: 11px;
}
.fragment-tags span::before { content: "#"; color: var(--accent); }
.fragment-actions { display:flex; gap:14px; flex:none; }
.fragment-actions a,
.fragment-actions button {
  padding: 3px 0;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--accent);
  background: transparent;
  font-size: 12px;
  cursor: pointer;
}
.fragment-actions a:hover,
.fragment-actions button:hover { border-bottom-color: currentColor; }
.fragments-empty {
  grid-column: 1 / -1;
  padding: clamp(36px, 6vw, 78px) clamp(6px, 4vw, 50px);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-align: center;
}
.fragments-empty-index {
  color: var(--accent);
  font: 12px Georgia, serif;
  letter-spacing: .12em;
}
.fragments-empty h2 {
  font: 400 clamp(23px, 3.1vw, 34px)/1.55 var(--serif);
  color: var(--text);
  margin: 22px 0 13px;
}
.fragments-empty p {
  max-width: 480px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 2;
  margin: 0 auto;
}
.fragments-empty code { color: var(--accent); }
.fragments-empty button {
  margin-top: 10px;
  padding: 9px 16px;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--rule);
  cursor: pointer;
}
.fragments-page button:focus-visible,
.fragments-page input:focus-visible,
.fragments-page a:focus-visible,
.fragments-page select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
@media (max-width: 820px) {
  .fragments-grid { grid-template-columns: 1fr; }
}
@media (max-width: 570px) {
  .fragments-intro { padding-top: 50px; padding-bottom: 30px; }
  .fragments-heading h1 { font-size: clamp(47px, 14vw, 63px); margin-bottom: 12px; }
  .fragments-heading p { font-size: 13px; }
  .fragments-number { padding-left: 12px; }
  .fragments-number strong { font-size: 24px; }
  .fragments-number small { font-size: 9px; }
  .fragments-tabs { gap: 2px 19px; }
  .fragments-tab { font-size: 13px; padding: 12px 0; }
  .fragments-tools { flex-wrap: wrap; gap: 13px; }
  .fragments-search { width: 100%; }
  .fragments-sort { margin-left: auto; }
  .fragment-entry { padding-top: 22px; }
  .fragment-text { font-size: 21px; }
  .fragment-topline time { font-size: 10px; }
}