/* Browsable hubs use ordinary links; no scene or renderer starts here. */
.แถบบน nav a[aria-current="location"] { color:var(--ทองมงคล); }
@media(min-width:721px) { .แถบบน nav a[aria-current="location"]::after { transform:scaleX(1); } }
.section-links { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:22px 0 0; }
.section-links a { border:1px solid var(--เส้น); border-radius:30px; padding:8px 18px; text-decoration:none; color:var(--ตัวอักษร); }
.section-links a:hover, .section-links a:focus-visible { border-color:var(--ทองมงคล); color:var(--เหลืองยันต์); }
.hub-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.hub-card { min-width:0; text-decoration:none; color:inherit; display:flex; flex-direction:column; overflow:hidden; padding:0; }
.hub-card img { width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; display:block; border-bottom:1px solid var(--เส้น); }
.hub-card h2 { font-size:1.5rem; }
.hub-card .hub-copy { padding:24px; flex:1; }
.hub-card .hub-tag { font-size:.75rem; color:var(--ทองมงคล); margin-bottom:10px; display:block; }
.hub-card .hub-action { color:var(--เหลืองยันต์); font-size:.9rem; display:block; margin-top:18px; }
.hub-card:focus-visible { outline:2px solid var(--เหลืองยันต์); outline-offset:5px; }
.hub-back { font-size:.85rem; margin-bottom:14px; }
.hub-back a { color:var(--ทองมงคล); text-decoration:none; }
.story-section { scroll-margin-top:90px; }
/* A long article may never expose 5% of its area in a small viewport. Keep it
   readable without waiting for the generic section reveal threshold. */
.js-เคลื่อน .ตอน.story-section:not(.เห็น) > .ใน { opacity:1; transform:none; transition:none; }
.story-section-title { margin:0 auto 40px; max-width:700px; padding-bottom:22px; border-bottom:1px solid var(--เส้น); }
.story-section-title .กำกับ { color:var(--ทองมงคล); font-size:.78rem; letter-spacing:.15em; }
.story-section-title h2 { margin-bottom:10px; }
.story-section-title p { color:var(--ตัวอักษรรอง); margin:0; }
.story-section .บท { scroll-margin-top:90px; }
@media(max-width:800px) { .hub-grid { grid-template-columns:1fr; } .hub-card { display:grid; grid-template-columns:minmax(100px,32%) minmax(0,1fr); } .hub-card img { aspect-ratio:auto; height:100%; min-height:180px; border-bottom:0; border-right:1px solid var(--เส้น); } .hub-card .hub-copy { padding:20px; } }
@media(max-width:420px) { .hub-card { display:flex; } .hub-card img { aspect-ratio:16/9; min-height:0; height:auto; border-right:0; border-bottom:1px solid var(--เส้น); } }