.cp-board{padding-block:clamp(36px,5vw,80px)}
.cp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,4vw,64px);align-items:start}
.cp-side{display:grid;gap:16px;align-content:start}
.cp-side .paper-label{justify-self:start;font-size:clamp(28px,2.6vw,38px)!important}
.cp-title{font:400 clamp(30px,3.3vw,50px)/1.04 Shrikhand,Georgia,serif;letter-spacing:-.03em;color:var(--forest);text-wrap:balance}
.cp-title a{color:inherit;text-decoration:none}
.cp-title a:hover{color:var(--red)}
.cp-pic{margin-top:6px!important;border-radius:12px;overflow:hidden;box-shadow:0 18px 40px #17261e40;background:var(--sea)}
.cp-pic img{width:100%;height:auto;transition:transform 1.2s ease}
.cp-pic:hover img{transform:scale(1.025)}
.cp-list{display:flex;flex-direction:column;gap:16px}
.cp-first .cp-list{padding-top:clamp(0px,4vw,62px)}
.cp-intro{font-size:17px;max-width:56ch}
.cp-table{display:grid;background:var(--cream);border:1px solid #d6d0b9;border-radius:10px;overflow:hidden;box-shadow:0 10px 26px #17261e14}
.cp-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding:10px 16px;border-top:1px solid #e3ddc8;color:var(--ink);text-decoration:none;transition:background .15s}
.cp-row:first-child{border-top:0}
.cp-head{background:var(--forest);color:#f5f1e1;font:700 13px/1.2 Arial,sans-serif;padding:11px 16px}
.cp-head span:last-child{text-align:right}
.cp-head small{font-weight:400;opacity:.8}
a.cp-row:hover{background:#f6ecc8}
a.cp-row:hover .cp-name span{color:var(--red)}
.cp-name{display:flex;align-items:center;gap:12px;font:700 16px/1.25 Arial,sans-serif}
.cp-name img,.cp-noimg{width:56px;height:42px;flex:none;border-radius:6px;object-fit:cover;background:#d8dccb}
.cp-price{font:800 18px/1 Arial,sans-serif;color:var(--forest);font-variant-numeric:tabular-nums;white-space:nowrap}
.cp-book{margin-top:4px!important}


.cp-ladder{background:var(--cream);border:1px solid var(--rule);border-radius:10px;padding:clamp(14px,2vw,24px);box-shadow:0 1px 0 #fff inset,0 14px 34px #17261e14}
.cp-scale{position:relative;height:16px;margin:0 7.3em 6px calc(10.5em + 14px);font:700 11px/1 Arial,sans-serif;color:var(--muted)}
.cp-scale span{position:absolute;top:0;translate:-50% 0;white-space:nowrap}
.cp-ladder-group+.cp-ladder-group{margin-top:14px;padding-top:12px;border-top:1px dashed var(--rule)}
.cp-ladder-label{font:700 26px/1 "Reenie Beanie",cursive;color:var(--red);margin-bottom:4px!important}
.cp-ladder ol{list-style:none;padding:0;margin:0}
.cp-ladder a{display:grid;grid-template-columns:10.5em minmax(60px,1fr) 7.3em;align-items:center;gap:14px;padding:6px 6px;border-radius:5px;color:var(--ink);text-decoration:none;font:600 14.5px/1.25 Arial,sans-serif}
.cp-ladder a:hover{background:#efe9d3}
.cp-ladder a:hover .cp-ladder-name{color:var(--red)}
.cp-ladder-track{position:relative;height:10px;border-radius:5px;background:repeating-linear-gradient(90deg,#d9d5c0 0 2px,transparent 2px 12px)}
.cp-ladder-track span{position:absolute;top:0;bottom:0;left:var(--a);width:max(10px,calc(var(--b) - var(--a)));border-radius:5px;background:var(--forest);transform-origin:0 50%}
.cp-ladder-group:first-of-type .cp-ladder-track span{background:var(--gold);box-shadow:inset 0 0 0 1px #9b7c2a}
.cp-ladder-price{text-align:right;font-variant-numeric:tabular-nums;color:#4a5546;font-weight:700}
@media (prefers-reduced-motion:no-preference){
 .cp-ladder-track span{animation:cp-grow .9s cubic-bezier(.2,.7,.2,1) both}
 .cp-ladder li:nth-child(2) .cp-ladder-track span{animation-delay:.06s}
 .cp-ladder li:nth-child(3) .cp-ladder-track span{animation-delay:.12s}
 .cp-ladder li:nth-child(4) .cp-ladder-track span{animation-delay:.18s}
 .cp-ladder li:nth-child(5) .cp-ladder-track span{animation-delay:.24s}
 .cp-ladder li:nth-child(6) .cp-ladder-track span{animation-delay:.3s}
 .cp-ladder li:nth-child(n+7) .cp-ladder-track span{animation-delay:.36s}
}
@keyframes cp-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (max-width:900px){
 .cp-grid{grid-template-columns:1fr}
 .cp-first .cp-list{padding-top:0}
 .cp-pic{max-width:640px}
}
@media (max-width:560px){
 .cp-scale{display:none}
 .cp-ladder a{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;font-size:14px}
 .cp-ladder-track{grid-column:1/-1;grid-row:2}
}


.cp-ws .cp-grid{align-items:center}
.cp-ws .cp-list{padding-top:0}
.cp-ws .cp-side .cp-intro{margin-top:-4px}


.cp-ladder a{grid-template-columns:minmax(6em,10.5em) minmax(32px,1fr) max-content}
.cp-ladder-price{white-space:nowrap}