/* Site guide page (2026-09-30, Raymond): present paper like the library and guestbook pages. Cards follow the video list
   (white card, dark brown line, blush on hover), chips follow the category chips, numbers follow the video numbers. */
.catalog-page .guide-section.era-section[data-era]{margin-top:22px;scroll-margin-top:130px}
.guide-section .era-summary{margin-bottom:20px}

/* 壹 sections */
.guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.guide-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:20px 24px;background:#fffdfb;border:1.5px solid #7c6462;border-radius:26px;transition:transform .22s ease,background-color .22s,border-color .22s,box-shadow .22s}
.guide-card--wide{grid-column:1/-1}
.guide-card:hover,.guide-card:focus-within{background:var(--p-blush);border-color:var(--p-crimson);transform:translateY(-3px);box-shadow:0 8px 20px #c47a7733}
.guide-card-head{display:flex;align-items:center;gap:14px}
.guide-no{flex:none;display:grid;place-items:center;width:38px;height:30px;border-radius:6px;background:var(--p-brown);color:#fbf1ea;font-family:var(--serif);font-weight:800;font-size:15px}
.guide-card h3{flex:1;min-width:0;margin:0;font-family:var(--serif);font-weight:800;font-size:21px;line-height:1.4;letter-spacing:.08em}
.guide-card h3 a{color:var(--p-ink);text-decoration:none}
.guide-card h3 a:after{content:"";position:absolute;inset:0;border-radius:inherit}
.guide-card h3 a:focus-visible{outline:2px solid var(--p-crimson);outline-offset:4px;border-radius:4px}
.guide-go{flex:none;color:var(--p-crimson);font-size:22px;line-height:1;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.guide-card:hover .guide-go,.guide-card:focus-within .guide-go{transform:translateX(5px)}
.guide-desc{margin:0;color:var(--p-ink);font-size:15px;line-height:1.85}
.guide-meta{margin:-4px 0 0;color:var(--p-muted);font-size:13px;letter-spacing:.04em}
.guide-links{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:4px}
.guide-links a{padding:6px 12px;border:1px solid var(--p-brown);border-radius:999px;background:var(--p-brown);color:#fbf1ea;font-family:var(--serif);font-weight:800;font-size:13px;line-height:1.5;letter-spacing:.04em;text-decoration:none;transition:transform .2s,background-color .2s,border-color .2s}
.guide-links a:before{content:"✦ ";color:#f2c6bd}
.guide-links a:hover,.guide-links a:focus-visible{background:var(--p-crimson);border-color:var(--p-crimson);transform:translateY(-2px)}
.guide-links a:focus-visible{outline:2px solid var(--p-crimson);outline-offset:2px}

/* 贰 browsing */
.guide-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.guide-panel{padding:18px 22px 20px;background:#fffdfb;border:1.5px solid #7c6462;border-radius:22px}
.guide-panel h3{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding-bottom:10px;border-bottom:1.5px solid #ecd9d2;color:var(--p-ink);font-family:var(--serif);font-weight:800;font-size:18px;line-height:1.4;letter-spacing:.12em}
.guide-panel h3:before{content:"";flex:none;width:20px;height:16px;background:url('assets/era/p-flower.webp?v=2b866a00e0') center/contain no-repeat}
.guide-tips{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.guide-tips li{display:grid;gap:2px;justify-items:start;color:var(--p-ink);font-size:14.5px;line-height:1.8}
.guide-tips strong{font-family:var(--serif);font-weight:800;font-size:15px;letter-spacing:.06em;color:var(--p-brown-deep)}
.guide-spot-btn{margin-top:4px;padding:2px 12px;border:1.5px solid var(--p-rose-deep);border-radius:999px;background:transparent;color:var(--p-crimson);font:13px/1.6 var(--sans);letter-spacing:.04em;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.guide-spot-btn:before{content:"◎ "}
.guide-spot-btn:hover,.guide-spot-btn:focus-visible{background:var(--p-crimson);border-color:var(--p-crimson);color:#fbf1ea}
.guide-spot-btn:focus-visible{outline:2px solid var(--p-crimson);outline-offset:2px}
@media(min-width:761px){.guide-spot-btn[data-spot="peek"]{display:none}}
@media(hover:none),(pointer:coarse){.guide-fine-only{display:none!important}}

/* 叁 settings */
.guide-rows{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.guide-rows li{display:grid;grid-template-columns:112px minmax(0,1fr) auto;align-items:center;gap:16px;padding:14px 22px;background:#fffdfb;border:1.5px solid #7c6462;border-radius:30px}
.guide-key{justify-self:start;display:inline-grid;place-items:center;min-width:38px;min-height:30px;padding:0 12px;border-radius:6px;background:var(--p-brown);color:#fbf1ea;font-family:var(--serif);font-weight:800;font-size:14px;letter-spacing:.08em}
.guide-rows p{margin:0;color:var(--p-ink);font-size:15px;line-height:1.8}
.guide-rows .guide-spot-btn{margin:0}
.guide-more{margin-top:30px}
.guide-tips--plain{gap:10px}
.guide-tips--plain li{grid-template-columns:96px minmax(0,1fr);column-gap:16px;font-size:15px}
.guide-tips--plain strong{line-height:1.8}

/* 肆 questions */
.guide-faqs{display:grid;gap:12px}
.guide-faq{background:#fffdfb;border:1.5px solid #7c6462;border-radius:22px;transition:background-color .22s,border-color .22s}
.guide-faq[open]{border-color:var(--p-crimson)}
.guide-faq summary{display:flex;align-items:center;gap:12px;padding:14px 22px;list-style:none;color:var(--p-ink);font-family:var(--serif);font-weight:800;font-size:16px;line-height:1.6;letter-spacing:.04em;cursor:pointer;transition:color .2s}
.guide-faq summary::-webkit-details-marker{display:none}
.guide-faq summary:before{content:"问";flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--p-brown);color:#fbf1ea;font-size:13px}
.guide-faq summary:after{content:"";flex:none;margin-left:auto;width:8px;height:8px;border-right:2px solid var(--p-crimson);border-bottom:2px solid var(--p-crimson);transform:translateY(-2px) rotate(45deg);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.guide-faq[open] summary:after{transform:translateY(2px) rotate(225deg)}
.guide-faq summary:hover{color:var(--p-crimson)}
.guide-faq summary:focus-visible{outline:2px solid var(--p-crimson);outline-offset:-4px;border-radius:20px}
.guide-answer{padding:0 22px 16px 62px;color:var(--p-ink);font-size:15px;line-height:1.85}
.guide-answer p{margin:0 0 4px}
.guide-answer a{color:var(--p-crimson);font-size:14px;text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size .35s cubic-bezier(.22,1,.36,1)}
.guide-answer a:hover,.guide-answer a:focus-visible{background-size:100% 1px}

/* 伍 contact */
.guide-contacts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.guide-contacts li:last-child:nth-child(odd){grid-column:1/-1}
.guide-contacts a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;height:100%;box-sizing:border-box;padding:14px 22px;background:#fffdfb;border:1.5px solid #7c6462;border-radius:30px;color:var(--p-ink);text-decoration:none;transition:transform .22s ease,background-color .22s,border-color .22s,box-shadow .22s}
.guide-contacts strong{font-family:var(--serif);font-weight:800;font-size:15px;letter-spacing:.06em;color:var(--p-brown-deep)}
.guide-contacts span{color:var(--p-muted);font-size:14px;line-height:1.6}
.guide-contacts b{font-weight:400;color:var(--p-crimson);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.guide-contacts a:hover,.guide-contacts a:focus-visible{background:var(--p-blush);border-color:var(--p-crimson);transform:translateX(4px);box-shadow:0 6px 16px #c47a7733}
.guide-contacts a:hover b,.guide-contacts a:focus-visible b{transform:translateX(3px)}
.guide-contacts a:focus-visible{outline:2px solid var(--p-crimson);outline-offset:2px}
.guide-farewell{margin:28px 0 4px;text-align:center;color:var(--p-brown);font-family:var(--serif);font-weight:800;font-size:18px;line-height:1.9;letter-spacing:.14em}

/* Spotlight on the real control after "指给我看" */
.guide-spot{outline:2px solid #f3d7a0;outline-offset:4px;animation:guide-spot .8s ease-in-out 3}
.site-header nav.guide-spot{border-radius:24px}
.site-header .brand.guide-spot{border-radius:14px}
.motion-tools.guide-spot{border-radius:12px}
@keyframes guide-spot{0%,100%{box-shadow:0 0 0 0 #f3d7a000}50%{box-shadow:0 0 0 7px #f3d7a04d,0 0 26px 6px #f0c07a80}}

@media(max-width:1100px) and (min-width:761px){.guide-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.guide-cols>:last-child{grid-column:1/-1}}
@media(max-width:760px){
 .guide-grid,.guide-cols,.guide-contacts{grid-template-columns:minmax(0,1fr)}
 .guide-card{padding:16px 16px 18px;border-radius:20px;gap:8px}
 .guide-card h3{font-size:19px;letter-spacing:.06em}
 .guide-no{width:34px;height:28px;font-size:14px}
 .guide-desc{font-size:14.5px}
 .guide-panel{padding:16px 16px 18px;border-radius:18px}
 .guide-rows li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"key btn" "text text";gap:8px 12px;padding:12px 16px;border-radius:20px}
 .guide-rows .guide-key{grid-area:key}.guide-rows p{grid-area:text;font-size:14.5px}.guide-rows .guide-spot-btn{grid-area:btn}
 .guide-tips--plain li{grid-template-columns:minmax(0,1fr);font-size:14.5px}
 .guide-faq{border-radius:18px}
 .guide-faq summary{padding:12px 16px;font-size:15px}
 .guide-answer{padding:0 16px 14px 56px;font-size:14.5px}
 .guide-contacts a{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k b" "v b";gap:0 12px;padding:12px 18px;border-radius:20px}
 .guide-contacts strong{grid-area:k}.guide-contacts span{grid-area:v}.guide-contacts b{grid-area:b}
 .guide-farewell{font-size:16px;letter-spacing:.08em}
}
@media(prefers-reduced-motion:reduce){.guide-card,.guide-go,.guide-links a,.guide-spot-btn,.guide-faq,.guide-faq summary,.guide-faq summary:after,.guide-answer a,.guide-contacts a,.guide-contacts b{transition:none}.guide-spot{animation:none}}
.motion-paused .guide-card,.motion-paused .guide-go,.motion-paused .guide-links a,.motion-paused .guide-contacts a,.motion-paused .guide-contacts b,.motion-paused .guide-faq summary:after{transition:none}
.motion-paused .guide-spot{animation:none}