.tp-section{padding-block:112px 96px;background:var(--paper);border-top:1px solid var(--rule);overflow:hidden}
.tp-head{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:48px;align-items:end;margin-bottom:56px}
.tp-head .eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:28px}
.tp-head h2{margin:0}
.tp-score{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding-left:32px;border-left:1px solid var(--rule)}
.tp-score-row{display:flex;align-items:center;gap:16px}
.tp-score-big{font-family:var(--serif);font-size:56px;line-height:1;letter-spacing:-.04em}
.tp-score p{font-size:13px;line-height:1.6;max-width:300px}
.tp-score strong{color:var(--ink);font-weight:500}
.tp-stars{display:inline-flex;gap:3px}
.tp-stars span{width:20px;height:20px;background:#00b67a;display:grid;place-items:center}
.tp-stars svg{width:14px;height:14px;fill:#fff}
.tp-brand{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.tp-brand svg{width:16px;height:16px;fill:#00b67a}
.tp-track{list-style:none;margin:0;padding:4px var(--gutter) 28px;display:grid;grid-auto-flow:column;grid-auto-columns:clamp(300px,30vw,420px);column-gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain}
.tp-track::-webkit-scrollbar{display:none}
.tp-card-wrap{scroll-snap-align:start;display:flex}
.tp-card{position:relative;text-align:left;width:100%;display:flex;flex-direction:column;gap:20px;padding:34px 32px 28px;background:var(--stone);border:1px solid transparent;min-height:400px;transition:background .35s var(--ease),border-color .35s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease)}
.tp-card::before{content:"";position:absolute;left:32px;top:0;width:32px;height:1px;background:var(--copper);transition:width .5s var(--ease)}
.tp-card:hover,.tp-card:focus-visible{background:var(--paper);border-color:var(--rule);transform:translateY(-4px);box-shadow:0 24px 50px -32px rgba(13,15,14,.35)}
.tp-card:hover::before,.tp-card:focus-visible::before{width:calc(100% - 64px)}
.tp-card:focus-visible{outline-offset:2px}
.tp-num{position:absolute;right:30px;top:32px;font-size:10px;letter-spacing:.16em;font-weight:600;color:var(--muted)}
.tp-title{font-family:var(--serif);font-size:27px;line-height:1.12;letter-spacing:-.03em;color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tp-excerpt{font-size:14px;line-height:1.65;color:var(--muted);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;max-height:calc(1.65em * 5);margin-bottom:auto}
.tp-foot{display:flex;align-items:center;gap:14px;padding-top:20px;border-top:1px solid var(--rule)}
.tp-ini,.tp-m-ini{width:40px;height:40px;flex:0 0 40px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--paper);font-size:12px;font-weight:600;letter-spacing:.04em}
.tp-who{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.tp-who strong{font-weight:500;font-size:14px;color:var(--ink)}
.tp-who span{font-size:12px;color:var(--muted)}
.tp-open{margin-left:auto;font-size:20px;color:var(--copper);transition:transform .35s var(--ease)}
.tp-card:hover .tp-open{transform:translate(3px,-3px)}
.tp-controls{display:flex;align-items:center;gap:28px;margin-top:20px}
.tp-progress{flex:1;height:1px;background:var(--rule);position:relative;overflow:hidden}
.tp-progress span{position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(.08);transition:transform .4s var(--ease)}
.tp-arrows{display:flex;gap:8px}
.tp-arrow{width:52px;height:52px;border:1px solid var(--rule);display:grid;place-items:center;font-size:18px;transition:background .2s,color .2s,border-color .2s}
.tp-arrow:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tp-pause{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tp-pause:hover{color:var(--copper)}
.tp-pause i{font-style:normal;font-size:13px}
.tp-pause[aria-pressed="true"] i::before{content:"▸"}
.tp-pause[aria-pressed="false"] i::before{content:"Ⅱ"}
html.tp-locked{overflow:hidden}
#review-dialog{width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:0;border:0;background:var(--paper);color:var(--ink);box-shadow:0 40px 120px -40px rgba(13,15,14,.55)}
#review-dialog::backdrop{background:rgba(13,15,14,.55);backdrop-filter:blur(6px)}
#review-dialog[open]{display:flex;flex-direction:column;animation:tpIn .55s var(--ease)}
@keyframes tpIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.tp-m-top{display:flex;align-items:center;justify-content:space-between;padding:22px 32px;border-bottom:1px solid var(--rule)}
.tp-m-count{font-size:10px;letter-spacing:.16em;font-weight:600;color:var(--copper)}
.tp-m-close{width:40px;height:40px;display:grid;place-items:center;font-size:22px;line-height:1}
.tp-m-close:hover{color:var(--copper)}
.tp-m-scroll{overflow-y:auto;padding:44px 56px 40px}
.tp-m-stars .tp-stars span{width:26px;height:26px}.tp-m-stars .tp-stars svg{width:18px;height:18px}
#review-dialog-title{font-size:clamp(32px,4vw,48px);line-height:1.05;margin:28px 0 28px}
.tp-m-body{position:relative;padding-left:28px;border-left:1px solid var(--copper)}
.tp-m-body p{font-family:var(--serif);font-size:20px;line-height:1.55;color:var(--charcoal);letter-spacing:-.01em}
.tp-m-body p+p{margin-top:16px}
.tp-m-who{display:flex;align-items:center;gap:14px;margin-top:36px}
.tp-m-who strong{display:block;font-weight:500;font-size:15px}
.tp-m-who span{font-size:12px;color:var(--muted)}
.tp-m-tag{margin-left:auto;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--muted);border:1px solid var(--rule);padding:7px 11px}
.tp-m-nav{display:flex;border-top:1px solid var(--rule)}
.tp-m-nav button{flex:1;padding:20px 32px;font-size:12px;font-weight:500;display:flex;align-items:center;gap:14px;transition:background .2s,color .2s}
.tp-m-nav button+button{border-left:1px solid var(--rule);justify-content:flex-end}
.tp-m-nav button:hover{background:var(--stone);color:var(--copper)}
@media (max-width:860px){
.tp-section{padding-block:80px 72px}
.tp-head{grid-template-columns:1fr;gap:32px;margin-bottom:40px}
.tp-score{padding-left:0;border-left:0;padding-top:24px;border-top:1px solid var(--rule)}
.tp-track{grid-auto-columns:84%;column-gap:14px}
.tp-card{min-height:360px;padding:28px 24px 22px}.tp-card::before{left:24px}
.tp-title{font-size:23px}
.tp-arrow{width:44px;height:44px}
#review-dialog{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;margin:0}
.tp-m-scroll{padding:32px 24px;flex:1}
.tp-m-top{padding:16px 20px}
.tp-m-body{padding-left:18px}.tp-m-body p{font-size:18px}
.tp-m-who{flex-wrap:wrap}.tp-m-tag{margin-left:0}
.tp-m-nav button{padding:18px 20px}
}
@media (prefers-reduced-motion:reduce){.tp-card,.tp-card::before,#review-dialog[open]{transition:none;animation:none}}
/* compact */
.tp-section{padding-block:56px 48px}
.tp-head{margin-bottom:28px;gap:32px;align-items:center}
.tp-head .eyebrow{margin-bottom:14px}
.tp-head h2{font-size:clamp(28px,3vw,40px);line-height:1.05}
.tp-score{gap:8px;padding-left:24px}
.tp-score-big{font-size:40px}
.tp-score p{font-size:12px;line-height:1.5}
.tp-track{padding-bottom:16px;grid-auto-columns:clamp(260px,24vw,340px);column-gap:16px}
.tp-card{min-height:0;gap:12px;padding:22px 22px 18px}
.tp-card::before{left:22px}
.tp-num{top:22px;right:20px}
.tp-title{font-size:20px;-webkit-line-clamp:2}
.tp-excerpt{font-size:13px;line-height:1.55;-webkit-line-clamp:3;max-height:calc(1.55em * 3)}
.tp-foot{padding-top:12px}
.tp-ini{width:32px;height:32px;flex-basis:32px;font-size:11px}
.tp-controls{margin-top:8px}
.tp-arrow{width:40px;height:40px}
@media (max-width:860px){.tp-section{padding-block:44px 40px}.tp-head{gap:18px;margin-bottom:22px}.tp-score{padding-top:14px}.tp-card{padding:20px 18px 16px}.tp-title{font-size:19px}}
.tp-ini,.tp-m-ini{display:none}