.variants .post-title-card {
  padding: clamp(0.9rem, 3vw, 1.4rem) 0 clamp(0.9rem, 3vw, 1.4rem)
    clamp(0.9rem, 3vw, 1.25rem);
  border: 0;
  border-left: 12px solid var(--link);
  border-radius: 0;
  box-shadow: none;
}

.variants .post-title-card time {
  margin: 0 0 0.5rem;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: none;
  opacity: 0.62;
}

.variants .post-title-card .description {
  font-family: inherit;
}

.variants > section {
  padding: 3rem 0 2.5rem;
  border-top: 2px solid color-mix(in oklab, var(--fg) 22%, transparent);
}

.variants > section:first-of-type {
  border-top: 0;
}

.variant-label {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
}

.variant-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.4rem;
  padding: 0.2rem 0.55rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--link);
  border-radius: 0.35rem;
}

.variant-note {
  margin: 0 0 1.5rem;
  font-size: 0.85rem;
  color: var(--fg);
  opacity: 0.7;
}

.variant-group {
  margin: 3rem 0 0;
  font-size: 0.9rem;
  color: var(--link);
}

.variant-v1 main p,
.variant-v1 .description {
  text-autospace: normal;
  text-spacing-trim: trim-start;
}

.variant-v1 .title {
  font-feature-settings: "palt" 1;
}

.variant-v2 .meta {
  display: flex;
  gap: 0.75rem;
  margin: 0.9rem 0 0;
  font-size: 0.8rem;
  color: var(--fg);
  opacity: 0.75;
}

.variant-v3 .post-title-card {
  position: relative;
  padding: 0 0 clamp(1rem, 3vw, 1.5rem);
  border-left-width: 0;
}

.variant-v3 .post-title-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--navy), var(--brewdog));
  border-radius: 2px;
}

.variant-v3 .kicker {
  margin: 0 0 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--link);
}

.variant-v4 main p {
  text-indent: 1em;
  hanging-punctuation: allow-end;
}

/* V5: 上下の罫線 */

.variant-v5 .post-title-card {
  border-left-width: 0;
  border-top: 5px solid var(--link);
  border-bottom: 1px solid var(--fg-alt);
  padding: clamp(1rem, 3vw, 1.5rem) 0;
}

/* V6: 左バー + 淡い背景パネル */

.variant-v6 .post-title-card {
  padding: clamp(1rem, 3vw, 1.5rem) clamp(1rem, 3vw, 1.5rem);
  background: color-mix(in oklab, var(--fg-alt) 22%, transparent);
  border-radius: 0 0.5rem 0.5rem 0;
}

/* V7: 縦書きラベル */

.variant-v7 .post-title-card {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  border-left-width: 0;
  padding-left: 0;
}

.variant-v7 .side-label {
  writing-mode: vertical-rl;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--link);
  border-left: 4px solid var(--link);
  padding-left: 0.4rem;
  line-height: 1;
}

.variant-v7 .post-title-card > :not(.side-label) {
  flex: 1;
}

/* V8: 2カラム（日付を左） */

.variant-v8 .post-title-card {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: clamp(1rem, 3vw, 2rem);
  align-items: baseline;
  border-left-width: 0;
  padding-left: 0;
}

.variant-v8 time {
  grid-column: 1;
  margin: 0;
  writing-mode: vertical-rl;
  letter-spacing: 0.08em;
}

.variant-v8 .title,
.variant-v8 .description {
  grid-column: 2;
}

/* V9: タイトル下の短いアクセント罫 */

.variant-v9 .post-title-card {
  border-left-width: 0;
  padding-left: 0;
}

.variant-v9 .title {
  padding-bottom: 0.6rem;
  border-bottom: 3px solid var(--link);
  display: inline-block;
}

/* V10: 影付きカード */

.variant-v10 .post-title-card {
  border-left-width: 0;
  padding: clamp(1.1rem, 3vw, 1.6rem) clamp(1.1rem, 3vw, 1.6rem);
  background: var(--bg-alt);
  border-radius: 0.75rem;
  box-shadow: 0 6px 20px rgb(31 23 5 / 8%);
}

/* V11: Minimalist Mono */

.variant-v11 .post-title-card {
  border-left-width: 0;
  border-top: 1px solid var(--fg);
  border-bottom: 1px solid var(--fg-alt);
  padding: 1.5rem 0;
}

.variant-v11 .post-title-card time {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* V12: Glassmorphism（帯をカード外に置かず、カード内に収める） */

.variant-v12 .post-title-card {
  position: relative;
  overflow: hidden;
  border-left-width: 0;
  padding: 1.25rem 1.5rem;
  border-radius: 0.75rem;
  background: linear-gradient(120deg, var(--navy), var(--brewdog));
}

.variant-v12 .post-title-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(255 255 255 / 14%);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: inherit;
}

.variant-v12 .post-title-card > * {
  position: relative;
  z-index: 1;
}

.variant-v12 time,
.variant-v12 .title,
.variant-v12 .description {
  color: #fff;
}

/* V13: Vaporwave Neon */

.variant-v13 .post-title-card {
  border-left-width: 0;
  padding: 1.25rem 1.5rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, #1b1035, #2a0f4a 60%, #12061f);
}

.variant-v13 .title {
  background: linear-gradient(90deg, #ff6ad5, #6ee7ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.variant-v13 time,
.variant-v13 .description {
  color: rgb(255 255 255 / 75%);
}

/* V14: Brutalist Block */

.variant-v14 .post-title-card {
  border: 3px solid var(--fg);
  border-left-width: 3px;
  border-radius: 0.5rem;
  padding: 1.25rem;
  box-shadow: 6px 6px 0 var(--fg);
}

.variant-v14 .post-title-card time,
.variant-v14 .description {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.variant-v14 .post-title-card time {
  font-weight: 700;
  text-transform: uppercase;
}

/* V15: Flowing Gradient */

.variant-v15 .post-title-card {
  border-left-width: 0;
  padding: 1.5rem 1.5rem;
  border-radius: 0.75rem;
  background: linear-gradient(120deg, #2b3d55, #2cadd4, #3d5a80, #2b3d55);
  background-size: 300% 300%;
  animation: variants-flow 18s ease-in-out infinite;
}

.variant-v15 time,
.variant-v15 .title,
.variant-v15 .description {
  color: #fff;
}

@keyframes variants-flow {
  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .variant-v15 .post-title-card {
    animation: none;
  }
}

/* V16: Wave Separator（滑らかな波。マスクで図形を作り、色はテーマ色が乗る） */

.variant-v16 .post-title-card {
  border-left-width: 0;
  padding: 0 0 1.5rem;
}

.variant-v16 .post-title-card::after {
  content: "";
  display: block;
  height: 10px;
  margin-top: 1.5rem;
  background: var(--link);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 10'%3E%3Cpath d='M0 7 Q 15 -1 30 7 T 60 7' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 10'%3E%3Cpath d='M0 7 Q 15 -1 30 7 T 60 7' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 60px 10px;
  mask-size: 60px 10px;
}

/* V17: Line Highlight */

.variant-v17 .post-title-card {
  border-left-width: 0;
  padding-left: 0;
}

.variant-v17 .title {
  display: inline;
  background-image: linear-gradient(
    transparent 62%,
    color-mix(in oklab, var(--paleale) 55%, transparent) 62%
  );
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* V18: Split Border */

.variant-v18 .post-title-card {
  position: relative;
  border-left-width: 0;
  padding-left: clamp(1rem, 3vw, 1.5rem);
}

.variant-v18 .post-title-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 14px;
  background: linear-gradient(
    180deg,
    var(--link) 0 50%,
    var(--paleale) 50% 100%
  );
  border-radius: 2px;
}

/* V19: Oversize Index */

.variant-v19 .post-title-card {
  border-left-width: 0;
  padding: 1.5rem 0;
}

.variant-v19 .post-title-card time {
  display: block;
  margin: 0 0 -0.55em;
  font-family: var(--header-font);
  font-size: clamp(3.5rem, 11vw, 6.5rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: color-mix(in oklab, var(--fg) 14%, transparent);
}

.variant-v19 .title {
  position: relative;
}

/* V20: 和モダン */

.variant-v20 .post-title-card {
  position: relative;
  border-left-width: 0;
  padding: 1.25rem 3rem 1.25rem 0;
  border-top: 1px solid var(--link);
  border-bottom: 1px solid var(--link);
}

.variant-v20 .post-title-card time {
  position: absolute;
  top: 1.25rem;
  right: 0;
  margin: 0;
  writing-mode: vertical-rl;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  color: var(--link);
}

.variant-v20 .title {
  letter-spacing: 0.04em;
}

/* ── V21〜: シンプル & モダン / インダストリアル ── */

/* V21: Outline Card（shadcn 風） */

.variant-v21 .post-title-card {
  padding: 1.25rem 1.5rem;
  background: var(--bg);
  border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);
  border-radius: 0.5rem;
}

.variant-v21 .post-title-card time {
  font-size: 0.75rem;
  color: color-mix(in oklab, var(--fg) 60%, transparent);
  font-variant-numeric: tabular-nums;
}

.variant-v21 .title {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* V22: Hairline */

.variant-v22 .post-title-card {
  padding: 1.25rem 0;
  border-top: 1px solid color-mix(in oklab, var(--fg) 25%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);
  border-left-width: 0;
}

.variant-v22 .post-title-card time {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* V23: Corner Ticks */

.variant-v23 .post-title-card {
  position: relative;
  padding: 1.5rem;
  border: 1px solid color-mix(in oklab, var(--fg) 14%, transparent);
  border-left-width: 1px;
}

.variant-v23 .post-title-card::before,
.variant-v23 .post-title-card::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--link);
}

.variant-v23 .post-title-card::before {
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
}

.variant-v23 .post-title-card::after {
  right: -1px;
  bottom: -1px;
  border-top: 0;
  border-left: 0;
}

.variant-v23 .post-title-card time {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.12em;
}

/* V24: Blueprint Grid */

.variant-v24 .post-title-card {
  padding: 1.5rem;
  border: 1px solid color-mix(in oklab, var(--link) 30%, transparent);
  border-left-width: 1px;
  background-image:
    linear-gradient(
      color-mix(in oklab, var(--link) 12%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
    90deg,
    color-mix(in oklab, var(--link) 12%, transparent) 1px,
    transparent 1px
  );
  background-size: 8px 8px;
}

.variant-v24 .post-title-card time {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.1em;
}

/* V25: Index Column */

.variant-v25 .post-title-card {
  display: grid;
  grid-template-columns: 3rem 1fr;
  column-gap: 1.25rem;
  align-items: start;
  padding-left: 0;
  border-left-width: 0;
}

.variant-v25 .post-title-card::before {
  content: "01";
  grid-row: 1 / span 3;
  grid-column: 1;
  padding-right: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.6rem;
  font-weight: 700;
  color: color-mix(in oklab, var(--fg) 35%, transparent);
  border-right: 1px solid color-mix(in oklab, var(--fg) 15%, transparent);
}

.variant-v25 .post-title-card time,
.variant-v25 .title,
.variant-v25 .description {
  grid-column: 2;
}

/* V26: Data Row */

.variant-v26 .post-title-card {
  padding: 0 0 1.25rem;
  border-left-width: 0;
}

.variant-v26 .post-title-card time {
  display: block;
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--fg) 65%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);
}

/* V27: Subtle Panel */

.variant-v27 .post-title-card {
  padding: 1.5rem;
  background: var(--bg-alt);
  border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
  border-left-width: 1px;
  border-radius: 0.625rem;
  box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}

/* V28: 2px Rule + Mono */

.variant-v28 .post-title-card {
  padding-left: 1rem;
  border-left: 2px solid var(--link);
}

.variant-v28 .post-title-card time {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* V29: Terminal */

.variant-v29 .post-title-card {
  padding: 1.25rem 1.5rem;
  color: #e6edf3;
  background: #0d1117;
  border-left-width: 0;
  border-radius: 0.375rem;
}

.variant-v29 .post-title-card time {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  color: #7ee787;
}

.variant-v29 .title {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
}

.variant-v29 .title::before {
  content: "> ";
  color: #7ee787;
}

.variant-v29 .description {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #8b949e;
}

/* V30: Ruler */

.variant-v30 .post-title-card {
  padding: 0 0 1.5rem;
  border-left-width: 0;
}

.variant-v30 .post-title-card::after {
  content: "";
  display: block;
  height: 8px;
  margin-top: 1.25rem;
  background-image: repeating-linear-gradient(
    90deg,
    color-mix(in oklab, var(--fg) 35%, transparent) 0 1px,
    transparent 1px 8px
  );
  border-bottom: 1px solid color-mix(in oklab, var(--fg) 35%, transparent);
}

.variant-v30 .post-title-card time {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.14em;
}

/* ── V31〜: 好みの組み合わせ（V12 / V14 / V17 / V19） ── */

/* V31: Oversize × Highlight */

.variant-v31 .post-title-card {
  padding: 1.5rem 0;
  border-left-width: 0;
}

.variant-v31 .post-title-card time {
  display: block;
  margin: 0 0 -0.55em;
  font-family: var(--header-font);
  font-size: clamp(3.5rem, 11vw, 6.5rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: color-mix(in oklab, var(--fg) 14%, transparent);
}

.variant-v31 .title {
  position: relative;
  display: inline;
  background-image: linear-gradient(
    transparent 62%,
    color-mix(in oklab, var(--paleale) 55%, transparent) 62%
  );
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* V32: Glass × Oversize */

.variant-v32 .post-title-card {
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
  background: linear-gradient(120deg, var(--navy), var(--brewdog));
  border-left-width: 0;
  border-radius: 0.75rem;
}

.variant-v32 .post-title-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(255 255 255 / 14%);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: inherit;
}

.variant-v32 .post-title-card > * {
  position: relative;
  z-index: 1;
}

.variant-v32 time {
  display: block;
  margin: 0 0 -0.3em;
  font-family: var(--header-font);
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  color: rgb(255 255 255 / 25%);
}

.variant-v32 .title,
.variant-v32 .description {
  color: #fff;
}

/* V33: Brutalist × Highlight */

.variant-v33 .post-title-card {
  padding: 1.25rem;
  border: 3px solid var(--fg);
  border-left-width: 3px;
  border-radius: 0;
  box-shadow: 8px 8px 0 var(--fg);
}

.variant-v33 .post-title-card time {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  text-transform: uppercase;
}

.variant-v33 .description {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.variant-v33 .title {
  display: inline;
  background-image: linear-gradient(
    transparent 62%,
    color-mix(in oklab, var(--paleale) 70%, transparent) 62%
  );
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* V34: 現行バー × Highlight（実用案） */

.variant-v34 .post-title-card {
  padding-left: clamp(1rem, 3vw, 1.5rem);
  border-left: 12px solid var(--link);
}

.variant-v34 .title {
  display: inline;
  background-image: linear-gradient(
    transparent 62%,
    color-mix(in oklab, var(--paleale) 50%, transparent) 62%
  );
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* V35: Brutalist Index */

.variant-v35 .post-title-card {
  padding: 1.25rem;
  border: 3px solid var(--fg);
  border-left-width: 3px;
  box-shadow: 8px 8px 0 var(--fg);
}

.variant-v35 .post-title-card time {
  display: block;
  margin: 0 0 -0.4em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(2.25rem, 7vw, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: color-mix(in oklab, var(--fg) 20%, transparent);
}

.variant-v35 .title {
  position: relative;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── V36〜V40: 同じデザインの「ずらし」（色・太さ・向き・位置） ── */

/* V36: Highlight — cool（色をずらす） */

.variant-v36 .post-title-card {
  border-left-width: 0;
  padding-left: 0;
}

.variant-v36 .title {
  display: inline;
  background-image: linear-gradient(
    transparent 62%,
    color-mix(in oklab, var(--brewdog) 45%, transparent) 62%
  );
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* V37: Highlight — thick（太さをずらす） */

.variant-v37 .post-title-card {
  border-left-width: 0;
  padding-left: 0;
}

.variant-v37 .title {
  display: inline;
  background-image: linear-gradient(
    transparent 78%,
    color-mix(in oklab, var(--paleale) 65%, transparent) 78%
  );
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* V38: Highlight — fade（向きをずらす） */

.variant-v38 .post-title-card {
  border-left-width: 0;
  padding-left: 0;
}

.variant-v38 .title {
  display: inline;
  background-image: linear-gradient(
    90deg,
    color-mix(in oklab, var(--paleale) 70%, transparent) 0%,
    color-mix(in oklab, var(--paleale) 45%, transparent) 55%,
    transparent 100%
  );
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 38%;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* V39: Oversize — right（位置をずらす） */

.variant-v39 .post-title-card {
  position: relative;
  padding: 1.5rem 0;
  border-left-width: 0;
}

.variant-v39 .post-title-card time {
  position: absolute;
  top: 1.25rem;
  right: 0;
  margin: 0;
  font-family: var(--header-font);
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: color-mix(in oklab, var(--fg) 12%, transparent);
}

.variant-v39 .title,
.variant-v39 .description {
  padding-right: 9rem;
}

/* V40: Oversize — accent（色と大きさをずらす） */

.variant-v40 .post-title-card {
  padding: 1.5rem 0;
  border-left-width: 0;
  border-bottom: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);
}

.variant-v40 .post-title-card time {
  display: block;
  margin: 0 0 0.6rem;
  font-family: var(--header-font);
  font-size: clamp(2.25rem, 7vw, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--link);
  opacity: 0.25;
}