/* ============================================================================
   Nippon Bike World — cards.css  (heritage magazine pieces)
   ============================================================================ */
.piece{ border:1px solid var(--line); background:var(--navy-2); transition:transform .7s var(--ease), border-color .7s; }
.piece:hover{ transform:translateY(-3px); border-color:var(--gold); }
.piece__img{ overflow:hidden; aspect-ratio:4/3; background:#111; }
.piece__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); filter:saturate(.88); }
.piece:hover .piece__img img{ transform:scale(1.04); }
.piece__body{ padding:2.2rem 2rem; }
.piece__cat{ font-family:var(--font-ui); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
.piece__jp{ font-family:var(--font-jp); font-weight:800; font-size:1.6rem; margin:.5rem 0 .2rem; }
.piece__en{ font-family:var(--font-en); font-style:italic; color:var(--gold-2); }
.piece__x{ color:var(--muted); font-size:.92rem; margin:1.1rem 0 1.3rem; line-height:1.8; }
.piece__spec{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); padding-top:1.1rem; }
.piece__spec div{ text-align:center; }
.piece__spec .n{ font-family:var(--font-en); font-weight:600; font-size:1.2rem; color:var(--gold-2); }
.piece__spec .l{ font-family:var(--font-ui); font-size:.62rem; letter-spacing:.1em; color:var(--muted); }
.piece__foot{ display:flex; justify-content:space-between; align-items:center; margin-top:1.5rem; }
.piece__price{ font-family:var(--font-en); font-weight:600; font-size:1.3rem; }

/* Magazine asymmetric rhythm */
.collection .piece:nth-child(1) .piece__img{ aspect-ratio:3/4; }
.collection .piece:nth-child(2){ margin-top:2.8rem; }
.collection .piece:nth-child(2) .piece__img{ aspect-ratio:5/4; }
.collection .piece:nth-child(3){ margin-top:1.2rem; }
.collection .piece:nth-child(3) .piece__img{ aspect-ratio:4/5; }

/* Article card */
.article{ border-top:1px solid var(--line); padding-top:1.4rem; }
.article__img{ overflow:hidden; aspect-ratio:3/2; margin-bottom:1.2rem; background:#111; }
.article__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.article:hover .article__img img{ transform:scale(1.04); }
.article__meta{ font-family:var(--font-ui); font-size:.72rem; letter-spacing:.12em; color:var(--gold); display:flex; gap:1rem; }
.article h3{ font-family:var(--font-jp); font-weight:600; font-size:1.2rem; line-height:1.6; margin:.6rem 0; }
.article p{ color:var(--muted); font-size:.9rem; }

/* Value */
.value{ border-top:2px solid var(--gold); padding-top:1.6rem; }
.value__en{ font-family:var(--font-en); font-style:italic; color:var(--gold-2); font-size:1.2rem; }
.value h3{ font-family:var(--font-jp); font-size:1.4rem; margin:.4rem 0 .8rem; }
.value p{ color:var(--muted); }