/* alive-claude-v3 — piece pages.
   Two independent switches, set on <html> by the preview state:
     skin-a (v3 paper, serif headings)  |  skin-b (the 28 Sept 2026 baseline values: white, Switzer, 32/42 name, 16/30.4 body)
     gal-large (720 wide, the piece's own ratio) |  gal-0928 (588 × 392, 3:2)
   The design-note units themselves are in v3.css, shared with the letter pages. */

/* ── part 1 · see it, and decide ─────────────────────────────────── */
.p-top{display:grid;grid-template-columns:minmax(0,720fr) minmax(0,448fr);column-gap:72px;align-items:start;
  max-width:calc(1240px + 80px);margin:0 auto;padding:134px 40px 10vh}
.gal-0928 .p-top{max-width:calc(1120px + 80px);grid-template-columns:minmax(0,588fr) minmax(0,420fr);column-gap:112px}
.p-main{position:relative;aspect-ratio:var(--ratio,3/4);overflow:hidden;background:#0b0a09;box-shadow:0 30px 60px rgba(40,26,14,.24);touch-action:pan-y}
.gal-0928 .p-main{aspect-ratio:3/2}
.p-main img{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.p-gbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:14px}
.p-thumbs{display:flex;gap:9px;overflow-x:auto}
.p-thumbs button{flex:none;width:64px;height:64px;padding:0;border:1px solid transparent;background:none;cursor:pointer;overflow:hidden;opacity:.66;transition:opacity .3s,border-color .3s}
.gal-0928 .p-thumbs button{width:60px;height:60px}
.p-thumbs button.on,.p-thumbs button:hover{opacity:1;border-color:var(--ink)}
.p-thumbs img{width:100%;height:100%;object-fit:cover}
.p-gcap{color:var(--mute);font-size:10px;text-align:right}
.p-info{padding-top:4px}
.p-info .crumb a{border-bottom:1px solid var(--line)}
.p-name{margin-top:22px;font-weight:300}
.p-zh{display:block;font-weight:300;font-size:clamp(46px,4vw,62px);letter-spacing:.12em;line-height:1.08}
.p-en{display:block;margin-top:12px;font-family:"Sentient",serif;font-weight:300;font-size:26px;letter-spacing:-.01em;line-height:1.2}
.p-py{margin-top:12px;letter-spacing:.24em;text-transform:none;color:var(--mute)}
.p-sense{margin-top:14px;font-family:"Sentient",serif;font-style:italic;font-weight:300;font-size:25px;line-height:1.25;color:#7d3424}
.p-price{display:flex;align-items:baseline;gap:14px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.p-price .mono{color:var(--mute)}
.p-price b{font-family:"Sentient",serif;font-weight:400;font-size:20px}
.p-intro{margin-top:14px;font-size:16px;line-height:1.65;color:var(--ink2)}
.p-status{display:flex;align-items:center;gap:14px;margin-top:22px;padding:14px 16px;border:1px solid var(--line);background:rgba(255,255,255,.38)}
.p-status p{font-size:13.5px;line-height:1.5;color:var(--ink2)}
.p-keys{margin-top:20px;border-top:1px solid var(--ink)}
.p-keys>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.p-keys dt{color:var(--mute);font-size:10px;padding-top:3px}
.p-keys dd{margin:0;font-size:15px;line-height:1.5}
.p-keys dd .lnk{margin-left:10px;font-size:12px}
.p-notify{margin:24px 0 12px}
.p-service{font-size:13px;line-height:1.5;color:var(--mute)}
.p-service .mono{display:block;margin-bottom:4px;font-size:9.5px}
.p-service a{border-bottom:1px solid var(--line);color:var(--ink2)}
.p-gift{margin-top:18px;border:1px solid var(--line);background:rgba(255,255,255,.38)}
.p-gift summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;list-style:none;font-family:"Sentient",serif;font-size:17px}
.p-gift summary::-webkit-details-marker{display:none}
.p-gift-in{padding:4px 16px 18px}
.card.mini{position:relative;right:auto;bottom:auto;width:auto;min-height:0;margin:6px 0 4px;padding:22px 22px 20px;transform:rotate(-1.1deg)}
.card.mini .card-line{margin-top:10px;font-size:24px}
.card.mini .card-zh{font-size:15px}
.p-gift .fl{margin-top:18px}
.p-gift .chips:empty{display:none}
.p-tags{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px}
.p-tags>.mono{width:100%;color:var(--mute);font-size:9.5px}
.p-tags a{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-family:"Sentient",serif;font-size:15px;transition:border-color .3s}
.p-tags a .mono{font-size:9.5px;color:var(--verm)}
.p-tags a:hover{border-color:var(--ink)}
.p-acc{margin-top:26px;border-top:1px solid var(--ink)}
.p-acc-i{border-bottom:1px solid var(--line)}
.p-acc-i summary{display:flex;justify-content:space-between;align-items:center;padding:15px 0;cursor:pointer;list-style:none;font-size:14.5px}
.p-acc-i summary::-webkit-details-marker{display:none}
.p-acc-i summary span{transition:transform .3s;color:var(--mute)}
.p-acc-i[open] summary span{transform:rotate(45deg)}
.p-acc-b{padding:0 0 18px}
.p-acc-b>p{font-size:14.5px;line-height:1.6;color:var(--ink2);margin-bottom:12px}
.p-acc-b .tr{font-size:14.5px;padding:12px 0}
.p-acc-b .tr .t b{font-size:9.5px}

.p-chap{position:sticky;top:74px;z-index:20;background:rgba(242,236,225,.94);backdrop-filter:blur(10px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.p-chap-in{display:flex;justify-content:center;gap:34px;padding:14px 22px;overflow-x:auto;scrollbar-width:none}
.p-chap a{white-space:nowrap;font-size:13px;color:var(--ink2);transition:color .3s}
.p-chap a:hover{color:var(--ink)}
.p-chap small{font-family:"FragmentMono",monospace;font-size:10px;color:var(--mute);margin-right:8px}
.p-mid [id]{scroll-margin-top:150px}

/* ── part 3 · further ─────────────────────────────────────────────── */
.p-end{display:grid;gap:26px;max-width:1000px;margin:0 auto;padding:0 0 13vh}
.p-another{border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.p-another summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 20px;padding:24px 0;cursor:pointer;list-style:none}
.p-another summary::-webkit-details-marker{display:none}
.p-another summary .mono{color:var(--mute)}
.p-another summary b{font-family:"Sentient",serif;font-weight:300;font-size:clamp(28px,2.6vw,38px);letter-spacing:-.015em}
.p-another summary b em{color:#7d3424}
.p-plus{grid-row:1/3;grid-column:2;align-self:center;font-size:20px;color:var(--mute);transition:transform .3s}
.p-another[open] .p-plus{transform:rotate(45deg)}
.p-another-b{max-width:660px;padding:0 0 30px}
.p-another-b p{font-size:17px;line-height:1.72;color:var(--ink2);margin-bottom:14px}
.p-story{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:6px 3vw;align-items:baseline;padding:22px 0 26px;border-bottom:1px solid var(--line)}
.p-story .mono{color:var(--mute)}
.p-story b{font-family:"Sentient",serif;font-weight:300;font-size:clamp(26px,2.3vw,32px)}
.p-story em{grid-column:2;font-style:normal;font-size:15px;color:var(--ink2)}
.p-story .p-link{grid-column:3;grid-row:1/3;align-self:center}
.p-story:hover b{color:#7d3424}
.p-letter{display:flex;gap:28px;align-items:center;padding:24px 30px;background:var(--card);box-shadow:0 1px 0 rgba(0,0,0,.03),0 26px 50px -18px rgba(40,26,14,.22)}
.p-letter .postmark{width:86px;height:86px}
.p-letter .mono{color:var(--mute)}
.p-letter .mono .zh{letter-spacing:.2em;text-transform:none;font-size:12px;color:var(--ink)}
.p-letter b{display:block;margin:8px 0 12px;font-family:"Sentient",serif;font-weight:300;font-size:clamp(22px,2vw,28px);line-height:1.2}
.p-letter b .zh{letter-spacing:.1em}
.p-link{display:inline-block;font-size:12.5px;letter-spacing:.05em;border-bottom:1px solid rgba(29,25,21,.4);padding-bottom:3px;white-space:nowrap}
.p-link .zh{letter-spacing:.1em}
.p-bar{display:none}

/* ── skin B · the 28 Sept baseline values ─────────────────────────── */
.skin-b body{background:#fff;color:#171715}
.skin-b body::before{display:none}
.skin-b .hd.scrolled{background:rgba(255,255,255,.95)}
.skin-b .p-chap{background:rgba(255,255,255,.96);border-color:#e5e5df}
.skin-b .p-main{background:#f6f6f4;box-shadow:none}
.skin-b .crumb{font-size:10px;line-height:17px;letter-spacing:1.6px;color:#76766f}
.skin-b .p-name{margin-top:18px}
.skin-b .p-zh{font-size:32px;line-height:42px;letter-spacing:1px}
.skin-b .p-en{font-family:"Switzer",sans-serif;font-weight:300;font-size:20px;line-height:28px;letter-spacing:0;margin-top:2px}
.skin-b .p-py{font-size:10px;line-height:17px;letter-spacing:1.6px;color:#76766f;margin-top:6px}
.skin-b .p-sense{font-family:"Switzer",sans-serif;font-style:normal;font-weight:300;font-size:18px;line-height:27px;color:#6e6e69;margin:9px 0 22px}
.skin-b .p-price{border-top-color:#e5e5df;margin-top:0}
.skin-b .p-price b{font-family:"Switzer",sans-serif;font-size:15px;font-weight:400}
.skin-b .p-intro{font-size:15px;line-height:26px;color:#45453f;max-width:420px}
.skin-b .p-status{background:#f6f6f4;border-color:#e5e5df}
.skin-b .p-status p{font-size:13px;line-height:22px;color:#45453f}
.skin-b .p-keys{border-top-color:#e5e5df}
.skin-b .p-keys>div{border-bottom-color:#e5e5df}
.skin-b .p-keys dd,.skin-b .p-service,.skin-b .p-acc-i summary{font-size:13px;line-height:22px}
.skin-b .notify input{background:#fff;border-color:#e5e5df}
.skin-b .notify button,.skin-b .btn{background:#171715;color:#fff}
.skin-b .p-gift{background:#f6f6f4;border-color:#e5e5df}
.skin-b .p-gift summary{font-family:"Switzer",sans-serif;font-size:13px}
.skin-b .p-tags a{font-family:"Switzer",sans-serif;font-size:13px;border-color:#e5e5df}
.skin-b .p-acc{border-top-color:#e5e5df}
.skin-b .p-acc-i{border-bottom-color:#e5e5df}
.skin-b .p-acc-b>p{font-size:13px;line-height:22px;color:#45453f}
.skin-b .p-idea>.mono,.skin-b .step{font-size:12px;line-height:18px;letter-spacing:1.4px;color:#6e6e69}
.skin-b .step i{display:none}
.skin-b .p-idea h2{font-family:"Switzer",sans-serif;font-weight:300;font-size:24px;line-height:31.2px;letter-spacing:0;margin-top:12px}
.skin-b .p-idea h2 em,.skin-b .p-tx h3 em,.skin-b .p-read-head h3 em,.skin-b .p-another summary b em{font-style:normal;color:inherit;font-family:inherit}
.skin-b .p-idea h2 br,.skin-b .p-tx h3 br,.skin-b .p-read-head h3 br{display:none}
.skin-b .p-lead{font-family:"Switzer",sans-serif;font-size:14px;line-height:24px;color:#6e6e69;margin-top:14px}
.skin-b .p-honest{font-size:12px;border-color:#e5e5df;color:#76766f}
.skin-b .p-idea{margin-bottom:9vh}
.skin-b .p-tx h3,.skin-b .p-read-head h3{font-family:"Switzer",sans-serif;font-weight:300;font-size:24px;line-height:33.6px;letter-spacing:0;margin:0 0 16px}
.skin-b .p-tx p,.skin-b .p-another-b p{font-size:16px;line-height:30.4px;color:#45453f;margin-bottom:14px}
.skin-b .p-fig figcaption,.skin-b .p-pair-figs figcaption,.skin-b .p-art figcaption{font-size:11px;line-height:19px;color:#76766f}
.skin-b .p-fig .p-img,.skin-b .p-fig .p-plate,.skin-b .p-pair-figs .p-img,.skin-b .p-art .p-img{box-shadow:none}
.skin-b .p-frame-in{background:#f6f6f4;border-color:#e5e5df}
.skin-b .p-quiet{font-family:"Switzer",sans-serif;font-style:normal;font-size:16px!important;line-height:29.6px!important;color:#45453f!important;border-top-color:#e5e5df}
.skin-b .p-read{border-top-color:#e5e5df}
.skin-b .p-read-cols article{border-top-color:#e5e5df}
.skin-b .p-read-cols h4{font-family:"Switzer",sans-serif;font-weight:400;font-size:20px;line-height:32px}
.skin-b .p-read-cols p{font-size:16px;line-height:29.6px;color:#45453f}
.skin-b .p-read-cols .mono span{color:#6e6e69}
.skin-b .p-wline{font-family:"Switzer",sans-serif;font-size:20px!important;line-height:32px!important}
.skin-b .p-trans{font-family:"Switzer",sans-serif!important;font-style:normal;font-size:16px!important;line-height:30.4px!important;color:#45453f!important}
.skin-b .poem{font-size:19px}
.skin-b .holds li{font-size:15px;color:#45453f}
.skin-b .holds li span{background:#171715}
.skin-b .pin.hot{background:#171715!important;border-color:#171715!important}
.skin-b .p-another{border-top-color:#e5e5df;border-bottom-color:#e5e5df}
.skin-b .p-another summary b,.skin-b .p-story b,.skin-b .p-letter b{font-family:"Switzer",sans-serif;font-weight:300;font-size:24px;line-height:33.6px}
.skin-b .p-story{border-bottom-color:#e5e5df}
.skin-b .p-letter{background:#f6f6f4;box-shadow:none}
.skin-b .p-link,.skin-b .p-mid .lnk{font-size:12px;line-height:22px;font-weight:500;letter-spacing:1.35px;border-bottom-color:rgba(23,23,21,.45)}
.skin-b .p-more{background:#f6f6f4}
.skin-b .p-mid .note{color:#76766f}
.skin-b .p-mid,.skin-b .p-end{color:#171715}

/* ── small screens ────────────────────────────────────────────────── */
@media (max-width:900px){
  .p-top,.gal-0928 .p-top{grid-template-columns:1fr;row-gap:28px;padding:84px 0 6vh}
  .p-main{box-shadow:none}
  .p-gbar{padding:0 22px}
  .p-info{padding:0 22px}
  .p-zh{font-size:44px}
  .p-chap{top:62px}
  .p-chap-in{justify-content:flex-start;gap:22px;padding:12px 22px}
  .p-end{padding:0 22px 9vh}
  .p-story{grid-template-columns:1fr}.p-story em,.p-story .p-link{grid-column:1;grid-row:auto}
  .p-letter{flex-direction:column;align-items:flex-start;padding:22px}
  .p-bar{position:fixed;left:0;right:0;bottom:24px;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px 12px 22px;
    background:rgba(251,247,239,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line);transform:translateY(130%);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
  .p-bar.show{transform:none}
  .p-bar-n{display:flex;flex-direction:column;gap:2px}
  .p-bar-n .zh{font-size:17px;letter-spacing:.12em}
  .p-bar-n .mono{font-size:9px;color:var(--mute)}
  .p-bar .btn{padding:12px 22px}
  .skin-b .p-bar{background:rgba(255,255,255,.97)}
  .pdp .rvw-btn{bottom:96px}
}
.skin-b .p-tx p.step{font-size:12px;line-height:18px;letter-spacing:1.4px;color:#6e6e69}
.skin-b .p-tx p.note{font-size:13px;line-height:22px;color:#76766f}
.skin-b .p-read-cols p.mono{font-size:12px;line-height:18px;letter-spacing:1.4px}
.skin-b .cards b.col-name{font-family:"Switzer",sans-serif;font-size:15px}
.skin-b .p-wear{border-top-color:#e5e5df}
.skin-b .p-wear>div{border-bottom-color:#e5e5df}
.skin-b .p-wear dd{font-size:13px;line-height:22px}