/* Homepage dress after the owner's two reference images (2026-11-05).
   The ornaments are cut from those images by tools/build-decor.php. Nothing here moves a link or a title. */

/* Hero, after the owner's fourth sample. Everything is measured in --H, the band's height, from the right edge,
   so the posters land on the ring baked into hero.webp (2048 x 606, ratio 3.38) at every width. */
main.home .spot { --H: max(400px, 29.6vw); background: #0b1a30 url(decor/hero.webp) right top / auto var(--H) no-repeat; }
main.home .spot-slide { min-height: var(--H); }
main.home .spot-slide::after { background: linear-gradient(90deg, rgba(8,18,38,0), rgba(8,18,38,.34) 14%, rgba(8,18,38,.28) 34%, rgba(8,18,38,0) 50%); }
main.home .spot-text { width: min(calc(100% - var(--edge) - 1.95 * var(--H)), 620px); min-width: 330px; padding: 24px 0; }
main.home .spot-kicker { margin-bottom: 12px; padding: 0; font-size: 17px; line-height: 1.5; font-weight: 600; color: #efc978; background: none; border: solid transparent; border-width: 8px 26px; border-image: url(decor/kicker.webp) 11 40 / 8px 26px stretch; border-radius: 0; }
main.home .spot-title { font-size: clamp(34px, 3.2vw, 64px); font-weight: 700; line-height: 1.32; color: #f7e6c4; margin-bottom: 10px; }
main.home .spot-blurb { font-size: clamp(15px, 1.15vw, 19px); color: #e7e3d8; margin-bottom: 8px; }
main.home .spot-meta { font-size: clamp(14px, 1.05vw, 18px); color: #e7e3d8; margin-bottom: 16px; }
main.home .btn-gold.spot-btn { min-height: 0; padding: 0; font-size: 18px; font-weight: 700; color: #14203a; background: none; border: solid transparent; border-width: 12px 34px; border-image: url(decor/btn.webp) 18 60 fill / 12px 34px stretch; border-radius: 0; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
main.home .spot-btn span { display: none; }
main.home .btn-gold.spot-btn:hover, main.home .btn-gold.spot-btn:focus-visible { filter: brightness(1.1); }
main.home .spot-shelf { display: block; top: 0; left: auto; right: 0; width: calc(1.95 * var(--H)); height: var(--H); transform: none; }
main.home .spot-pick { position: absolute; aspect-ratio: 3 / 4; border-radius: 0; overflow: hidden; filter: none; transform: none; transition: right .45s ease, top .45s ease, width .45s ease; box-shadow: 0 0 0 2px #d4a853, 0 12px 30px rgba(0,0,0,.55); }
main.home .spot-pick::after { content: ""; position: absolute; inset: 0; border: calc(.08 * var(--H)) solid transparent; border-image: url(decor/poster-frame.webp) 58 / calc(.08 * var(--H)) stretch; pointer-events: none; }
main.home .spot-pick[data-pos="0"] { right: calc(.896 * var(--H)); top: calc(.1 * var(--H)); width: calc(.525 * var(--H)); z-index: 2; box-shadow: 0 0 0 3px #f0c869, 0 0 34px rgba(40,190,200,.45), 0 14px 34px rgba(0,0,0,.6); }
main.home .spot-pick[data-pos="1"] { right: calc(.414 * var(--H)); top: calc(.16 * var(--H)); width: calc(.425 * var(--H)); aspect-ratio: 258 / 358; }
main.home .spot-pick[data-pos="2"] { right: calc(1.462 * var(--H)); top: calc(.16 * var(--H)); width: calc(.425 * var(--H)); aspect-ratio: 258 / 358; }
main.home .spot-pick:hover, main.home .spot-pick:focus-visible { filter: brightness(1.1); }
main.home .spot-pick.on { transform: none; }
main.home .spot-nav { top: calc(.82 * var(--H)); bottom: auto; right: auto; left: calc(100% - 1.153 * var(--H)); transform: translateX(-50%); flex-direction: column; gap: 4px; }
main.home .spot-count { font-size: clamp(16px, 1.3vw, 24px); color: #f0dcb0; }
@media (prefers-reduced-motion: reduce) { main.home .spot-pick { transition: none; } }

/* Narrow screens: the ring and posters on top, centred, the text below. */
@media (max-width: 1100px) {
	main.home .spot { --H: max(340px, 44vw); background: linear-gradient(transparent calc(.72 * var(--H)), #0b1a30 var(--H)), url(decor/hero-1024.webp) calc(50vw - 2.226 * var(--H)) top / auto var(--H) no-repeat, #0b1a30; }
	main.home .spot-slide { display: block; min-height: 0; padding-top: var(--H); }
	main.home .spot-slide::after { content: none; }
	main.home .spot-text { width: auto; min-width: 0; margin: 0; padding: 8px 28px 26px; }
	main.home .spot-shelf { left: 50%; right: auto; width: 0; }
	main.home .spot-pick[data-pos="0"] { right: calc(-.2625 * var(--H)); }
	main.home .spot-pick[data-pos="1"] { right: calc(-.745 * var(--H)); }
	main.home .spot-pick[data-pos="2"] { right: calc(.32 * var(--H)); }
	main.home .spot-nav { left: 50%; right: auto; bottom: auto; justify-content: flex-start; }
	main.home .spot-count { display: block; }
}
@media (max-width: 600px) {
	main.home .spot-text { padding: 6px 16px 22px; }
	main.home .btn-gold.spot-btn { width: 100%; justify-content: center; }
	main.home .spot-title { font-size: 28px; }
}

.home-body {
	--ink-gold: linear-gradient(180deg, #f8e3a6, #e2b65c 55%, #b98a35);
	--line: #c9a24f;
	--rule:
		url(decor/knot.webp) center / 38px auto no-repeat,
		linear-gradient(90deg, transparent, var(--line)) left center / calc(50% - 26px) 1px no-repeat,
		linear-gradient(270deg, transparent, var(--line)) right center / calc(50% - 26px) 1px no-repeat;
	--lat: clamp(40px, calc((100vw - var(--wrap)) / 2 - 8px), 96px);
	--cloud: clamp(130px, 22vw, 340px);
	position: relative;
	overflow: clip;
	background: #0a1124;
}
.home-body > .wrap.page { position: relative; z-index: 1; padding-top: 14px; padding-bottom: 96px; }
.home-body > .wrap.page::before { content: ""; display: block; width: min(680px, 58%); aspect-ratio: 1040 / 144; margin: 0 auto 16px; background: url(decor/crest.webp) center / contain no-repeat; }

/* Title block and mood tabs, after the owner's third sample. */
main.home h1.page-h1 { font-size: 40px; font-weight: 800; line-height: 1.35; }
main.home h1.page-h1 span { display: block; font-size: 30px; font-weight: 600; color: #e6b866; }
main.home .lede { margin-top: 6px; }
main.home .mood { display: block; margin: 26px 0 8px; }
main.home .mood-h { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; font-size: 28px; line-height: 1.4; }
main.home .mood-h::before { content: ""; flex: none; width: 34px; height: 37px; background: url(decor/knot-tag.webp) center / contain no-repeat; }
main.home .mood-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
main.home .mood-btn { justify-content: center; gap: 12px; min-height: 84px; padding: 0; font-size: 18px; font-weight: 600; white-space: nowrap; background: none; border: 22px solid transparent; border-image: url(decor/tab.webp) 40 / 22px stretch; border-radius: 10px; transition: background-color .15s, box-shadow .15s; }
main.home .mood-btn::before { content: none; }
main.home .mood-btn svg { flex: none; width: 34px; height: 34px; stroke-width: 1.3; color: #e8b75c; }
main.home .mood-btn:hover, main.home .mood-btn:focus-visible, main.home .mood-btn:active { color: #fff; background-color: #5c3b11; box-shadow: 0 0 0 2px #f0b64a; }
@media (prefers-reduced-motion: reduce) { main.home .mood-btn { transition: none; } }

/* Side columns and corner clouds. Zero effect on layout, never clickable. */
.decor { position: absolute; inset: 0; pointer-events: none; }
.decor i, .home-body .cl { position: absolute; display: block; pointer-events: none; }
.decor .lat { top: 0; bottom: 0; width: var(--lat); background: url(decor/lattice.webp) top center / 100% auto repeat-y; box-shadow: 1px 0 0 rgba(201,162,79,.55), 10px 0 22px rgba(0,0,0,.55); }
.decor .lat.l { left: 0; }
.decor .lat.r { right: 0; transform: scaleX(-1); }
.home-body .cl { width: var(--cloud); aspect-ratio: 352 / 118; background: url(decor/cloud.webp) 0 0 / 100% 100% no-repeat; z-index: 1; }
.decor .tl { top: 0; left: 0; }
.decor .tr { top: 0; right: 0; transform: scaleX(-1); }
.decor .bl { bottom: 0; left: 0; transform: scaleY(-1); }
.decor .br { bottom: 0; right: 0; transform: scale(-1, -1); }

/* Section headings: gold, with an icon and a rule that carries the knot. */
main.home .row { margin-top: 34px; }
main.home .row-head { align-items: center; gap: 16px; margin-bottom: 16px; }
main.home .row-head h2 { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; font-size: 30px; font-weight: 800; line-height: 1.5; white-space: nowrap; background: var(--ink-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
main.home .row-head::after { content: ""; order: 1; flex: 1 1 60px; min-width: 40px; height: 30px; background: var(--rule); }
main.home .row-head .more { order: 2; margin-left: 0; }
main.home .row-new h2::before, main.home .row-hot h2::before, main.home .row-dub h2::before, main.home .row-sub h2::before { content: ""; flex: none; width: 30px; height: 30px; background: var(--ink-gold); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
main.home .row-new { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.2 6.8L21 11l-6.8 2.2L12 20l-2.2-6.8L3 11l6.8-2.2zM19 16l.9 2.1L22 19l-2.1.9L19 22l-.9-2.1L16 19l2.1-.9z'/%3E%3C/svg%3E"); }
main.home .row-hot { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c1 4 6 6 6 12a6 6 0 0 1-12 0c0-2.6 1.4-4.3 2.8-5.5.2 1.9 1.1 3.1 2.3 3.6 0-3.8-.6-6.8.9-10.1z'/%3E%3C/svg%3E"); }
main.home .row-dub { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a4 4 0 0 0-4 4v6a4 4 0 0 0 8 0V6a4 4 0 0 0-4-4zM5 11a1 1 0 0 1 2 0v1a5 5 0 0 0 10 0v-1a1 1 0 0 1 2 0v1a7 7 0 0 1-6 6.9V21h3a1 1 0 0 1 0 2H8a1 1 0 0 1 0-2h3v-2.1A7 7 0 0 1 5 12z'/%3E%3C/svg%3E"); }
main.home .row-sub { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M5 3h14a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-8l-5 4v-4H5a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3zm2 5v2h10V8zm0 4v2h7v-2z'/%3E%3C/svg%3E"); }

/* Centred sections: แนวเรื่อง and คำค้นที่เกี่ยวข้อง. */
main.home .row-center { position: relative; padding-top: 62px; }
main.home .row-center::before { content: ""; position: absolute; top: 0; left: 50%; width: 80%; height: 34px; transform: translateX(-50%); background: var(--rule); }
main.home #genres { margin-top: 44px; }
main.home #genres::before { width: 100vw; height: 36px; background: url(decor/knot.webp) center / 40px auto no-repeat, linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat; z-index: 2; }
main.home .row-center .row-head { justify-content: center; gap: 22px; margin-bottom: 22px; }
main.home .row-center .row-head::before, main.home .row-center .row-head::after { content: ""; flex: none; order: 0; width: 62px; min-width: 0; height: 30px; background: url(decor/cloudlet.webp) center / contain no-repeat; }
main.home .row-center .row-head::after { order: 1; transform: scaleX(-1); }
main.home #genres .row-head h2 { font-size: 46px; line-height: 1.45; }
main.home .row-tags .row-head h2 { font-size: 32px; }
main.home .row-tags .tag-cloud { justify-content: center; }
#genres .cl { top: 18px; }
#genres .gl { left: calc((100% - 100vw) / 2); }
#genres .gr { right: calc((100% - 100vw) / 2); transform: scaleX(-1); }

/* Genre boxes: the reference's frame, its icon, the name and the title count. */
main.home .genres { grid-template-columns: repeat(5, 1fr); gap: 20px 22px; }
main.home .genre { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 150px; padding: 0; text-align: center; background: rgba(10,17,36,.72); border: 20px solid transparent; border-image: url(decor/frame.webp) 28 / 20px stretch; border-radius: 0; transition: transform .16s ease, filter .16s ease; }
main.home .genre::before { content: none; }
main.home .genre-ic { display: block; width: auto; max-width: 100%; height: 72px; margin-top: -8px; object-fit: contain; }
main.home .genre b { margin-top: 2px; font-size: 19px; font-weight: 600; line-height: 1.35; color: #fff; }
main.home .genre span { font-size: 12.5px; line-height: 1.4; color: var(--ink-dim); }
main.home .genre:hover, main.home .genre:focus-visible, main.home .genre:active { transform: translateY(-3px); filter: brightness(1.22) drop-shadow(0 0 10px rgba(245,180,0,.35)); }
@media (prefers-reduced-motion: reduce) { main.home .genre { transition: none; } main.home .genre:hover, main.home .genre:focus-visible, main.home .genre:active { transform: none; } }

/* Footer: knot on the top rule, mountains behind the text (owner: no extra band below it). The veil keeps the text readable over the pale mist. */
body.jj-dress .footer { position: relative; margin-top: 0; background: #0a1124; }
body.jj-dress .footer::before { content: ""; position: absolute; top: -18px; left: 50%; width: 56px; height: 34px; transform: translateX(-50%); background: url(decor/knot.webp) center / 38px auto no-repeat, #0a1124; }
body.jj-dress .footer::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(150px, 15vw, 290px); background: linear-gradient(90deg, rgba(10,17,36,.82), rgba(10,17,36,.62) 45%, rgba(10,17,36,.2) 75%), url(decor/mountains.webp) center bottom / cover no-repeat; -webkit-mask-image: linear-gradient(transparent, #000 36%); mask-image: linear-gradient(transparent, #000 36%); pointer-events: none; }
body.jj-dress .footer-inner { position: relative; z-index: 1; }
body.jj-dress .footer .disclaimer { color: var(--ink-body); }

/* Below this the page margin is too thin for the columns. */
@media (max-width: 1279px) {
	.decor .lat { display: none; }
}
@media (max-width: 1100px) {
	main.home h1.page-h1 { font-size: 32px; }
	main.home h1.page-h1 span { font-size: 25px; }
	main.home .mood-btn { gap: 8px; font-size: 16px; }
	main.home .mood-btn svg { width: 28px; height: 28px; }
}
@media (max-width: 860px) {
	main.home .genres { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	main.home .mood-list { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 3px; margin: -3px; max-width: calc(100% + 6px); }
	main.home .mood-btn { flex: none; width: 150px; }
}
@media (max-width: 600px) {
	.home-body > .wrap.page { padding-top: 12px; padding-bottom: 60px; }
	.home-body > .wrap.page::before { width: 94%; margin: 30px auto 10px; }
	main.home h1.page-h1 { font-size: 24px; }
	main.home h1.page-h1 span { font-size: 20px; }
	main.home .mood { margin-top: 20px; }
	main.home .mood-h { gap: 10px; margin-bottom: 10px; font-size: 21px; }
	main.home .mood-h::before { width: 26px; height: 28px; }
	main.home .mood-btn { width: 136px; min-height: 66px; font-size: 15px; border-width: 16px; border-image-width: 16px; }
	main.home .mood-btn svg { width: 24px; height: 24px; }
	main.home .row { margin-top: 26px; }
	main.home .row-head { gap: 10px; }
	main.home .row-head h2 { font-size: 22px; gap: 7px; }
	main.home .row-new h2::before, main.home .row-hot h2::before, main.home .row-dub h2::before, main.home .row-sub h2::before { width: 22px; height: 22px; }
	main.home .row-head::after { height: 24px; }
	main.home .row-center { padding-top: 58px; }
	main.home .row-center .row-head { gap: 12px; margin-bottom: 14px; }
	main.home .row-center .row-head::before, main.home .row-center .row-head::after { width: 44px; height: 22px; }
	main.home #genres .row-head h2 { font-size: 30px; }
	main.home .row-tags .row-head h2 { font-size: 22px; }
	main.home .genre { min-height: 124px; border-width: 14px; border-image-width: 14px; }
	main.home .genre-ic { height: 58px; margin-top: -4px; }
	main.home .genre b { font-size: 15.5px; }
	main.home .genre span { font-size: 12px; }
	body.jj-dress .footer::after { background-image: linear-gradient(rgba(10,17,36,.62), rgba(10,17,36,.62)), url(decor/mountains-768.webp); }
}

/* Listing pages, after the owner's two samples (2026-11-05). */
.list-body > .wrap.page { max-width: 1380px; padding-top: 18px; padding-bottom: 230px; }
.list-body > .wrap.page::before { content: none; }
.list-body > .wrap.page::after { content: ""; position: absolute; left: 28px; right: 28px; bottom: 96px; height: 80px; background: url(decor/knot-tassel.webp) center / auto 76px no-repeat, linear-gradient(90deg, transparent, var(--line)) left 24px / calc(50% - 44px) 1px no-repeat, linear-gradient(270deg, transparent, var(--line)) right 24px / calc(50% - 44px) 1px no-repeat; }
.decor .lc { width: clamp(52px, 6vw, 90px); aspect-ratio: 90 / 192; background: url(decor/corner.webp) 0 0 / 100% 100% no-repeat; }
.decor .lc.tl { top: 0; left: 0; }
.decor .lc.tr { top: 0; right: 0; transform: scaleX(-1); }
.decor .lc.bl { bottom: 0; left: 0; transform: scaleY(-1); }
.decor .lc.br { bottom: 0; right: 0; transform: scale(-1, -1); }
.decor .lf { bottom: 12px; width: clamp(132px, 27vw, 420px); aspect-ratio: 800 / 187; background: url(decor/cloud-foot.webp) 0 0 / 100% 100% no-repeat; }
.decor .lf.l { left: clamp(54px, 7vw, 110px); }
.decor .lf.r { right: clamp(54px, 7vw, 110px); transform: scaleX(-1); }

.list-head { --lc: clamp(150px, 19vw, 290px); position: relative; padding: 10px 0 6px; text-align: center; }
.list-head::before, .list-head::after { content: ""; position: absolute; top: 6px; width: var(--lc); pointer-events: none; }
.list-head::before { left: 34px; aspect-ratio: 4 / 1; background: url(decor/cloud-top.webp) 0 0 / 100% 100% no-repeat; }
.list-head::after { right: 34px; aspect-ratio: 4 / 1; background: url(decor/cloud-top.webp) 0 0 / 100% 100% no-repeat; transform: scaleX(-1); }
.list-head h1.page-h1 { display: flex; align-items: center; justify-content: center; max-width: calc(100% - 2 * var(--lc) - 30px); margin: 0 auto; font-size: clamp(26px, 2.9vw, 42px); font-weight: 800; line-height: 1.4; text-wrap: balance; background: var(--ink-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.list-head h1.page-h1 strong { min-width: 0; font-weight: inherit; }
.list-head h1.page-h1 span { color: transparent; }
.list-head h1.page-h1::before, .list-head h1.page-h1::after { content: ""; flex: none; width: 50px; height: 20px; margin: 0 14px; background: url(decor/diamond.webp) center / contain no-repeat; }
.list-head h1.page-h1::after { transform: scaleX(-1); }
.list-head .lede { margin-top: 2px; font-size: 16px; color: var(--ink); }
.list-head .hub-intro { max-width: 900px; margin: 4px auto 0; font-size: 15.5px; line-height: 1.7; color: var(--ink); }
.list-head + .chips, .list-head + .list-bar { position: relative; padding-top: 44px; }
.list-head + .chips::before, .list-head + .list-bar::before { content: ""; position: absolute; top: 4px; left: 50%; width: 62%; height: 30px; transform: translateX(-50%); background: var(--rule); }
.list-body .chips { justify-content: center; gap: 12px; margin: 8px 0 0; }
.list-body .chip { padding: 7px 22px; font-size: 15.5px; font-weight: 500; color: #fff; background: rgba(10,17,36,.6); border: 1px solid #c9a24f; border-radius: 10px; transition: background-color .15s, color .15s; }
.list-body .chip::before { content: none; }
.list-body .chip:hover, .list-body .chip:focus-visible { color: #fff; background-color: #5c3b11; }
.list-body .chip.gold, .list-body .chip.gold:hover { font-weight: 700; color: #14203a; background: linear-gradient(180deg, #f6d68c, #d9a848); border-color: #e7bd63; }
.list-body .filters { justify-content: center; margin-top: 14px; }

.list-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; }
.list-note { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; color: var(--ink); }
.list-note svg { flex: none; color: #e8b75c; }
.list-sort { display: flex; align-items: center; gap: 12px; font-size: 15.5px; color: var(--ink); }
.list-sort details { position: relative; width: 190px; }
.list-sort summary { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 0 14px; cursor: pointer; list-style: none; border: 1px solid #c9a24f; border-radius: 8px; background: rgba(10,17,36,.6); }
.list-sort summary::-webkit-details-marker { display: none; }
.list-sort summary::after { content: ""; width: 8px; height: 8px; margin-top: -4px; border: solid #e8b75c; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.list-sort details[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.list-sort details > div { position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; right: 0; padding: 4px; border: 1px solid #c9a24f; border-radius: 8px; background: #0a1124; box-shadow: 0 12px 26px rgba(0,0,0,.55); }
.list-sort details a { display: block; padding: 8px 10px; color: var(--ink); text-decoration: none; border-radius: 6px; }
.list-sort details a:hover, .list-sort details a:focus-visible { color: #fff; background: #5c3b11; outline: none; }

.list-body .grid-list { gap: 22px 20px; margin-top: 16px; }
.list-body .card { text-align: center; }
.list-body .card .poster { border-radius: 5px; box-shadow: 0 0 0 1.5px #d9b15c, 0 8px 20px rgba(0,0,0,.45); }
.list-body .card:hover .poster, .list-body .card:focus-visible .poster, .list-body .card:active .poster { box-shadow: 0 0 0 2px #f5cf75, 0 12px 24px rgba(0,0,0,.55); }
.list-body .card .poster::after { content: none; }
.list-body .badge { padding: 3px 9px; font-size: 12.5px; border-radius: 5px; }
.list-body .b-lang { top: 8px; left: 8px; color: #f3cf7c; background: rgba(12,14,22,.88); box-shadow: 0 0 0 1px #d9b15c; }
.list-body .b-lang.sub { color: #1b2233; background: #f6edd6; box-shadow: 0 0 0 1px #d9b15c; }
.list-body .b-ep { right: 8px; bottom: 8px; color: #fff; background: rgba(12,14,22,.88); box-shadow: 0 0 0 1px #d9b15c; }
.list-body .card-title { margin-top: 10px; font-size: 16.5px; line-height: 1.4; color: #fff; }
.list-body .card-meta { margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--ink-body); }

.list-body .pager { gap: 10px; margin-top: 34px; }
.list-body .pager a, .list-body .pager span { min-width: 56px; height: 44px; font-size: 18px; font-weight: 600; color: #efc978; background: rgba(10,17,36,.6); border: 1.5px solid #c9a24f; border-radius: 8px; }
.list-body .pager a:hover, .list-body .pager a:focus-visible { color: #fff; background: #5c3b11; border-color: #f0b64a; outline: none; }
.list-body .pager .on { color: #14203a; background: linear-gradient(180deg, #f6d68c, #d9a848); border-color: #e7bd63; font-weight: 700; }

@media (max-width: 1100px) {
	.list-head { --lc: 130px; }
	.list-head h1.page-h1 { max-width: none; }
	.list-head::before, .list-head::after { top: 0; }
	.list-head::before { left: 40px; }
	.list-head::after { right: 40px; }
	.list-head { padding-top: 26px; }
}
@media (max-width: 860px) {
	.list-head + .chips::before, .list-head + .list-bar::before { width: 80%; }
	.list-body > .wrap.page { padding-bottom: 200px; }
}
@media (max-width: 600px) {
	.list-body > .wrap.page { padding: 12px 16px 170px; }
	.list-body > .wrap.page::after { left: 16px; right: 16px; bottom: 64px; }
	.list-head { padding-top: 46px; }
	.list-head { --lc: 92px; }
	.list-head::before { left: 26px; }
	.list-head::after { right: 26px; }
	.list-head h1.page-h1 { font-size: 23px; }
	.list-head h1.page-h1::before, .list-head h1.page-h1::after { width: 22px; height: 12px; margin: 0 5px; }
	.list-head .hub-intro { font-size: 14.5px; }
	.list-body .chips { justify-content: flex-start; gap: 8px; }
	.list-body .chip { padding: 6px 14px; font-size: 14px; }
	.list-bar { flex-wrap: wrap; gap: 8px; }
	.list-note { font-size: 14.5px; }
	.list-sort { font-size: 14.5px; }
	.list-sort details { width: 150px; }
	.list-body .grid-list { gap: 16px 10px; }
	.list-body .badge { padding: 2px 6px; font-size: 11px; }
	.list-body .b-lang { top: 5px; left: 5px; }
	.list-body .b-ep { right: 5px; bottom: 5px; }
	.list-body .card-title { font-size: 14px; }
	.list-body .card-meta { font-size: 12px; }
	.list-body .pager { gap: 6px; }
	.list-body .pager a, .list-body .pager span { min-width: 40px; height: 40px; font-size: 15px; }
	.decor .lf { bottom: 6px; }
}

/* Title pages, after the owner's sample (2026-11-05). They reuse the listing's corners, cards and foot. */
.title-body .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; padding-left: clamp(38px, 4vw, 56px); font-size: 14px; color: var(--ink); }
.title-body .crumbs::before { content: ""; width: 20px; height: 20px; background: #e8b75c; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E") center / contain no-repeat; }
.title-body .crumbs a { color: var(--ink); }
.title-body .crumbs b { color: var(--ink); }

.title-body .hero { --P: clamp(230px, 23vw, 340px); position: relative; display: grid; grid-template-columns: minmax(0, 43%) minmax(0, 1fr); gap: 0 26px; align-items: center; margin: 0; padding: 0 0 30px; background: none; border: 0; border-radius: 0; box-shadow: none; }
.title-body .hero::before { content: ""; position: absolute; left: 21.5%; top: calc(50% - 15px); width: calc(var(--P) * 1.58); aspect-ratio: 480 / 476; transform: translate(-50%, -50%); background: url(decor/ring.webp) center / contain no-repeat; pointer-events: none; }
.title-body .hero::after { content: ""; position: absolute; left: 0; bottom: 34px; width: clamp(80px, 8vw, 118px); aspect-ratio: 108 / 54; background: url(decor/cloud-gold-s.webp) 0 0 / 100% 100% no-repeat; pointer-events: none; z-index: 2; }
.title-body .hero > .poster { justify-self: center; width: var(--P); z-index: 1; border-radius: 0; box-shadow: 0 0 0 2px #e5c069, 0 16px 34px rgba(0,0,0,.55); }
.title-body .hero > .poster .badge { display: none; }
.title-body .hero-main { position: relative; z-index: 1; min-width: 0; }
.title-body .hero-main::before { content: ""; position: absolute; top: 8px; right: 0; width: clamp(100px, 10vw, 150px); aspect-ratio: 160 / 66; background: url(decor/cloud-gold.webp) 0 0 / 100% 100% no-repeat; pointer-events: none; }
.title-body .hero-main::after { content: ""; position: absolute; right: 0; bottom: -30px; width: clamp(80px, 8vw, 120px); aspect-ratio: 160 / 66; background: url(decor/cloud-gold.webp) 0 0 / 100% 100% no-repeat; pointer-events: none; }
.title-body .title-th { padding-right: clamp(110px, 11vw, 160px); font-size: clamp(32px, 3.5vw, 54px); font-style: italic; font-weight: 600; line-height: 1.32; background: var(--ink-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.title-body .title-th span { display: block; font-size: .42em; font-style: normal; color: transparent; }
.title-body .title-alt { font-size: 14.5px; color: var(--ink-body); }
.title-body .title-alt b { color: var(--ink-dim); }
.title-body .tags { gap: 10px; margin: 14px 0 12px; }
.title-body .tag, .title-body .tag.gold, .title-body .tag.done { padding: 5px 18px; font-size: 14.5px; font-weight: 500; color: #fff; background: rgba(10,17,36,.6); border: 1px solid #c9a24f; border-radius: 999px; }
.title-body a.tag:hover, .title-body a.tag:focus-visible { background: #5c3b11; outline: none; }
.title-body .hero-blurb { margin-bottom: 16px; font-size: 16.5px; line-height: 1.75; color: var(--ink); }
.title-body .cta-row { gap: 14px; }
.title-body .btn-lg { min-height: 54px; padding: 0 34px; font-size: 17px; font-weight: 700; border-radius: 999px; }
.title-body .btn-gold { color: #14203a; background: linear-gradient(180deg, #f6d68c, #d9a848); box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.title-body .btn-gold:hover, .title-body .btn-gold:focus-visible { filter: brightness(1.08); }
.title-body .btn-ghost { color: #fff; font-weight: 500; background: rgba(10,17,36,.6); border: 1.5px solid #c9a24f; }
.title-body .btn-ghost::before { content: none; }
.title-body .btn-ghost:hover, .title-body .btn-ghost:focus-visible, .title-body .btn-ghost.on { color: #fff; background: #5c3b11; border-color: #f0b64a; }
.title-body .cta-note { font-size: 13px; color: var(--ink-body); }
.title-body .quick { display: flex; flex-wrap: wrap; gap: 8px 0; margin-top: 14px; padding: 12px 0; border-top: 1px solid rgba(201,162,79,.4); border-bottom: 1px solid rgba(201,162,79,.4); }
.title-body .q { display: flex; align-items: center; gap: 9px; padding: 2px 20px; background: none; border-radius: 0; }
.title-body .q:first-child { padding-left: 4px; }
.title-body .q + .q { border-left: 1px solid rgba(201,162,79,.6); }
.title-body .q::before { content: ""; flex: none; width: 26px; height: 26px; background: #e8b75c; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.title-body .q b { font-size: 17px; font-weight: 500; }
.title-body .q span { display: none; }
.title-body .q-year span, .title-body .q-upd span { display: inline; font-size: 13.5px; color: var(--ink-body); }
.title-body .q-ep { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 5-9 5-9-5zM3 12.5l9 5 9-5M3 16.5l9 5 9-5'/%3E%3C/svg%3E"); }
.title-body .q-lang { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='12' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3M9 21h6'/%3E%3C/svg%3E"); }
.title-body .q-year { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.title-body .q-upd { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 0 0-14-4L4 9M4 4v5h5M4 13a8 8 0 0 0 14 4l2-2M20 20v-5h-5'/%3E%3C/svg%3E"); }

.title-body .cols { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; margin-top: 8px; }
.title-body .cols > div, .title-body .cols > aside { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.title-body .cols .box:last-child { flex: 1; }
.title-body .box { margin: 0; padding: 0 6px; background: rgba(10,17,36,.45); border: 22px solid transparent; border-image: url(decor/box.webp) 22 / 22px stretch; border-radius: 0; }
.title-body .box h2 { margin: -8px 0 12px; padding: 0 0 8px; font-size: 24px; line-height: 1.4; color: #efc978; border: 0; background: linear-gradient(90deg, #c9a24f, transparent) left bottom / 100% 1px no-repeat; }
.title-body .box p { font-size: 15.5px; color: var(--ink); }
.title-body .box .byline { font-size: 12.5px; color: var(--ink-body); }
.title-body .info { border: 1px solid rgba(201,162,79,.5); border-collapse: separate; border-spacing: 0; border-radius: 8px; font-size: 15px; }
.title-body .info th, .title-body .info td { padding: 9px 14px; }
.title-body .info th { width: 38%; color: #fff; border-right: 1px solid rgba(201,162,79,.5); }
.title-body .info tr + tr th, .title-body .info tr + tr td { border-top: 1px solid rgba(201,162,79,.35); }
.title-body .info td { overflow-wrap: anywhere; }
.title-body .info a { color: #efc978; }
.title-body .faq details { margin-top: 10px; padding: 9px 14px; border: 1px solid rgba(201,162,79,.6); border-radius: 8px; }
.title-body .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 500; list-style: none; }
.title-body .faq summary::-webkit-details-marker { display: none; }
.title-body .faq summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-top: -4px; border: solid #e8b75c; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.title-body .faq details[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.title-body .faq details p { font-size: 14.5px; color: var(--ink-body); }
.title-body .box .chips { flex-wrap: wrap; justify-content: center; gap: 10px; overflow: visible; }
.title-body .box .chip { padding: 5px 18px; font-size: 14.5px; border-radius: 999px; }
.title-body .row { margin-top: 30px; }
.title-body .row-head { margin-bottom: 16px; padding-bottom: 8px; background: linear-gradient(90deg, #c9a24f, transparent) left bottom / 100% 1px no-repeat; }
.title-body .row-head h2 { padding: 0; font-size: 28px; color: #efc978; border: 0; }
.title-body .grid-6 { gap: 18px; }

@media (max-width: 860px) {
	.title-body .hero { --P: min(60vw, 280px); display: block; padding-bottom: 20px; }
	.title-body .hero::before { left: 50%; top: calc(var(--P) * .667); }
	.title-body .hero::after { bottom: auto; top: calc(var(--P) * 1.333 - 50px); }
	.title-body .hero > .poster { margin: 0 auto; }
	.title-body .hero-main { display: block; margin-top: 18px; }
	.title-body .hero-main::before { top: 0; }
	.title-body .hero-main::after { content: none; }
	.title-body .cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.title-body .cols > div, .title-body .cols > aside { gap: 16px; }
}
@media (max-width: 600px) {
	.title-body .title-th { font-size: 28px; padding-right: 96px; }
	.title-body .hero-blurb { font-size: 15px; }
	.title-body .btn-lg { width: 100%; min-height: 48px; padding: 0 16px; font-size: 15.5px; justify-content: center; }
	.title-body .quick { justify-content: flex-start; }
	.title-body .q { padding: 2px 12px; }
	.title-body .q b { font-size: 15px; }
	.title-body .box { padding: 0 2px; border-width: 14px; border-image-width: 14px; }
	.title-body .box h2 { margin-top: -4px; font-size: 20px; }
	.title-body .box p { font-size: 14.5px; }
	.title-body .info th, .title-body .info td { padding: 8px 10px; }
	.title-body .row-head h2 { font-size: 22px; }
	.title-body .grid-6 { gap: 10px; }
}