/* JAPAN BONSAI EDIT — /pairings/ (index + one page per pairing) */

/* single pairing: hero */
.pairing-hero { padding: 92px 0 0; background: var(--black); color: var(--bone); }
.pairing-image { margin: 0; position: relative; background: #050706; }
.pairing-image img { width: 100%; height: auto; max-height: calc(100vh - 230px); min-height: 300px; object-fit: cover; object-position: 62% 60%; display: block; }
.pairing-image figcaption { display: flex; gap: 22px; padding: 12px 4.3vw 0; color: #5f645e; font-size: 7px; letter-spacing: .16em; text-transform: uppercase; }
.pairing-title { padding: 9vh 8vw 11vh; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 7vw; align-items: end; }
.pairing-title > div:first-child > p { margin: 0 0 26px; color: #7b807a; font-size: 8px; letter-spacing: .25em; }
.pairing-title h1 { margin: 0; color: #dfdfd9; font: 400 clamp(46px, 6vw, 96px)/.94 var(--serif); letter-spacing: -.055em; }
.pairing-title h1 em { font-style: italic; color: #a9ada6; }
.pairing-judgment { display: grid; grid-template-columns: 74px 1fr; gap: 22px; align-items: center; padding-top: 22px; border-top: 1px solid var(--line); }
.pairing-judgment p { margin: 0; color: #b9bcb5; font: 19px/1.5 var(--serif); }
.pairing-hero .verdict-grade { color: #dfdfd9; border-color: rgba(215,218,208,.45); }
.pairing-hero .verdict-grade[data-grade="△"], .pairing-hero .verdict-grade[data-grade="×"] { color: #8b9089; }

/* single pairing: body */
.pairing-layout { grid-template-columns: minmax(0, 860px); padding-top: 9vh; }
.pairing-layout .article-body section:first-child { border-top: 0; padding-top: 0; }
.pairing-verdict { margin: 0; padding: 0; border-top: 0; }
.pairing-verdict li { font-size: 17px; }
.pairing-convention { margin: 54px 0 0; padding: 30px 0 0; border-top: 1px solid rgba(23,26,23,.22); }
.pairing-convention-head { margin: 0 0 18px; display: flex; align-items: center; gap: 18px; color: #6d6f68; font-size: 8px; letter-spacing: .2em; }
.pairing-convention-head .verdict-grade { width: 44px; height: 44px; font-size: 21px; }
.pairing-convention h3 { margin: 0 0 16px; font: 400 24px/1.3 var(--serif); letter-spacing: -.01em; }
.pairing-convention ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.pairing-convention li { display: grid; grid-template-columns: 96px 1fr; gap: 16px; color: #3a3d38; font: 15px/1.7 var(--serif); }
.pairing-convention li span { padding-top: 4px; color: #8a8c83; font: 8px var(--sans); letter-spacing: .18em; }
.pairing-layout .goods { margin: 0; border-top: 0; }
.pairing-layout .good { padding: 0; border: 0; }
.pairing-more { margin-top: 30px; display: inline-flex; padding-bottom: 8px; border-bottom: 1px solid #6d6f68; color: #2e312c; font-size: 9px; letter-spacing: .15em; text-transform: uppercase; transition: border-color .4s, color .4s; }
.pairing-more:hover { color: #000; border-color: #000; }

/* cards (index + siblings) */
.pairing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 30px; }
.pairing-grid-small { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pairing-card { display: block; color: inherit; }
.pairing-card figure { margin: 0; overflow: hidden; background: #050706; aspect-ratio: 800 / 396; }
.pairing-card img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.001); transition: transform 1.6s cubic-bezier(.2,.65,.2,1), opacity .6s; }
.pairing-card:hover img { transform: scale(1.045); }
.pairing-card-body { padding: 18px 0 0; display: grid; grid-template-columns: 50px 1fr; gap: 16px; align-items: start; }
.pairing-card .verdict-grade { width: 42px; height: 42px; font-size: 20px; }
.pairing-card-tier { margin: 2px 0 6px; color: #6d6f68; font-size: 7px; letter-spacing: .2em; text-transform: uppercase; }
.pairing-card h3 { margin: 0 0 6px; font: 400 21px/1.2 var(--serif); letter-spacing: -.015em; }
.pairing-card-body p:last-child { margin: 0; color: #5a5e58; font: 13.5px/1.6 var(--serif); }

/* index */
.pairings-hero { padding: calc(92px + 16vh) 8vw 12vh; background: var(--black); color: var(--bone); }
.pairings-hero > p:first-child { margin: 0 0 30px; color: #7b807a; font-size: 8px; letter-spacing: .25em; }
.pairings-hero h1 { margin: 0; color: #dfdfd9; font: 400 clamp(72px, 11vw, 168px)/.86 var(--serif); letter-spacing: -.065em; animation: pairing-in 1.4s cubic-bezier(.2,.65,.2,1) both; }
.pairings-deck { max-width: 420px; margin: 52px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: #8b9089; font: 16px/1.7 var(--serif); }
.pairings-index { padding: 4vh 8vw 18vh; background: var(--paper); color: #171a17; }
.pairing-group { padding: 11vh 0 0; }
.pairing-group-head { margin: 0 0 44px; padding-bottom: 18px; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; border-bottom: 1px solid rgba(23,26,23,.25); }
.pairing-group-head h2 { margin: 0; font: 400 clamp(38px, 4.4vw, 64px)/1 var(--serif); letter-spacing: -.05em; }
.pairing-group-head p { margin: 0; color: #6d6f68; font-size: 9px; letter-spacing: .14em; }

@keyframes pairing-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .pairings-hero h1 { animation: none; }
  .pairing-card img { transition: none; }
}

@media (max-width: 900px) {
  .pairing-hero { padding-top: 76px; }
  .pairing-title { grid-template-columns: 1fr; gap: 44px; padding: 7vh 7vw 9vh; }
  .pairing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pairings-hero { padding: calc(76px + 12vh) 7vw 10vh; }
  .pairings-index { padding: 2vh 7vw 14vh; }
}
@media (max-width: 560px) {
  .pairing-image img { min-height: 0; max-height: none; }
  .pairing-image figcaption { flex-direction: column; gap: 4px; padding: 10px 6vw 0; }
  .pairing-title { padding: 6vh 6vw 8vh; }
  .pairing-title h1 { font-size: 44px; }
  .pairing-judgment { grid-template-columns: 58px 1fr; gap: 16px; }
  .pairing-judgment .verdict-grade { width: 52px; height: 52px; font-size: 24px; }
  .pairing-judgment p { font-size: 17px; }
  .pairing-grid, .pairing-grid-small { grid-template-columns: 1fr; gap: 40px; }
  .pairing-convention li { grid-template-columns: 1fr; gap: 2px; }
  .pairing-group-head { flex-direction: column; gap: 8px; }
  .pairings-hero h1 { font-size: 72px; }
  .pairings-index { padding: 0 6vw 12vh; }
}