:root{--ivory:#e7e5e1;--cream:#cbc8c2;--ink:#141414;--gold:#c89b3c;--brown:#5e5b57;--burgundy:#c45118;--orange:#d45a1a;--orange-dark:#9f3c10;--gray:#77746f;--gray-light:#efede9;--black:#101010;--serif:'K2D',sans-serif;--thai:'K2D',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--thai);font-weight:400}a{color:inherit;text-decoration:none}button{font:inherit}.skip-link{position:fixed;left:1rem;top:-5rem;background:#fff;padding:.7rem;z-index:99}.skip-link:focus{top:1rem}.site-header{height:84px;position:absolute;inset:0 0 auto;z-index:20;display:grid;grid-template-columns:auto 1fr 130px;align-items:center;padding:0 6.7vw;color:#fff;background:linear-gradient(180deg,#141414cc,transparent);border-bottom:1px solid #ffffff28}.brand{display:flex;align-items:center;gap:12px;font-family:var(--serif);color:#e3bd7c}.brand-mark{font-size:2.45rem;line-height:1}.brand-copy{display:flex;flex-direction:column}.brand b{font-size:2.3rem;letter-spacing:.09em;font-weight:500}.brand small{font-size:.62rem;letter-spacing:.22em}.site-header nav{display:flex;justify-content:center;gap:clamp(1.3rem,3vw,3.4rem);height:100%;font-size:.78rem;white-space:nowrap}.site-header nav a{display:flex;align-items:center;position:relative}.site-header nav a:after{content:'';position:absolute;left:50%;right:50%;bottom:12px;height:1px;background:#c3975d;transition:.3s}.site-header nav a:hover:after,.site-header nav a:focus:after,.site-header nav a.active:after{left:10%;right:10%}.site-header nav a.active{color:#dfb978}.tools{display:flex;justify-content:flex-end;gap:14px;align-items:center;font:500 .66rem var(--serif);letter-spacing:.08em}.search-link{width:17px;height:17px;border:1px solid #fff;border-radius:50%;position:relative}.search-link:after{content:'';position:absolute;width:6px;height:1px;background:#fff;right:-5px;bottom:-2px;transform:rotate(45deg)}.menu-toggle{display:none;border:0;background:none;color:inherit}.hero{height:66.5vh;min-height:620px;max-height:810px;position:relative;overflow:hidden;background:#c8c1b7;color:var(--ink)}.hero-sky{position:absolute;inset:0;background-color:#243e5a;background-image:linear-gradient(90deg,rgba(255,247,234,.08),rgba(6,14,23,.12)),url('../images/hero-landscape.png?v=20261003');background-size:cover;background-position:center;transform:scale(1.012)}.hero-sky:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,249,238,.05) 0%,transparent 48%,rgba(0,0,0,.12) 100%)}.hero-copy{position:absolute;z-index:5;left:6.8vw;top:17.5%;width:31%;}.eyebrow{font:600 .7rem var(--serif);letter-spacing:.42em;color:#85654d}.hero-copy h1{font:500 clamp(4rem,6.2vw,7rem)/.71 var(--serif);letter-spacing:-.025em;margin:1.1rem 0 1.5rem}.thai-lead{font-size:clamp(.9rem,1.2vw,1.14rem);font-weight:400;line-height:1.4}.copy-rule{display:block;width:98px;height:1px;background:#74695e;margin:1.2rem 0}.en-lead{font:400 .73rem/1.5 var(--serif);color:#746e68;margin:0}.cta{display:inline-flex;align-items:center;gap:1.7rem;margin-top:1.45rem;padding:.8rem 1.3rem;border:0;border-radius:2rem;background:linear-gradient(90deg,#b78142,#c79859);color:#fff;font:500 .62rem var(--serif);letter-spacing:.08em;box-shadow:0 8px 20px #6f492a25}.fabric-stage{position:absolute;z-index:3;inset:0;perspective:1200px;transform:none;transition:transform .5s ease-out;touch-action:pan-y}.fabric-video{position:absolute;z-index:3;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;pointer-events:none;filter:contrast(1.1) saturate(1.14) brightness(1.03);transform:translateZ(0);backface-visibility:hidden;transition:opacity .55s ease}.fabric-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .45s ease}.fabric-fallback{position:absolute;inset:0;pointer-events:none}.fabric-stage.canvas-ready .fabric-canvas{opacity:1}.fabric-stage.canvas-ready .fabric-fallback{opacity:0}.fabric-stage.video-ready .fabric-video{opacity:1}.fabric-stage.video-ready .fabric-canvas{opacity:0}.fabric{position:absolute;filter:drop-shadow(0 20px 18px #27303b52);transform-origin:center;background-color:#ead7bb}.fabric-main{width:84%;height:52%;top:27%;right:-3%;border-radius:55% 10% 50% 26%/30% 18% 52% 70%;transform:rotate(-2deg) skewX(-12deg);background-image:linear-gradient(97deg,transparent 0 18%,#e8d3b299 19% 24%,transparent 25% 54%,#ddc69d99 55% 60%,transparent 61%),repeating-linear-gradient(0deg,#182f43 0 13px,#ae834e 14px 17px,#731f30 18px 31px,#d9c098 32px 35px,#1b3448 36px 51px),repeating-linear-gradient(90deg,transparent 0 22px,#d4ac6a 23px 26px,transparent 27px 50px);background-blend-mode:screen,normal,normal;box-shadow:inset 0 20px 60px #fff6,inset 0 -30px 50px #050c19aa;animation:wave-main 9s ease-in-out infinite}.fabric-main:after,.fabric-cream:after,.fabric-edge:after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse at 45% 15%,#fff9,transparent 21%),linear-gradient(165deg,#0000 30%,#fff6 44%,#0008 66%,#fff3 82%);mix-blend-mode:soft-light}.fabric-cream{width:75%;height:48%;top:17%;right:1%;border-radius:44% 15% 45% 20%/50% 25% 55% 34%;transform:rotate(-18deg);background-image:repeating-linear-gradient(110deg,#e8d8bd 0 20px,#b6875620 21px 23px,#f6e8cd 24px 43px);animation:wave-cream 11s ease-in-out infinite}.fabric-edge{width:68%;height:28%;right:-1%;top:3%;border-radius:50% 10% 40% 20%;transform:rotate(-15deg);background-image:repeating-linear-gradient(0deg,#7c2130 0 13px,#c49755 14px 18px,#18364a 19px 35px,#d3b47b 36px 40px);animation:wave-edge 10s ease-in-out infinite}.hero-pager{position:absolute;z-index:6;right:4.1vw;top:35%;display:flex;flex-direction:column;align-items:center;gap:7px;color:#fff;font:500 .52rem var(--serif)}.hero-pager i{display:block;height:62px;width:1px;background:linear-gradient(#fff,transparent)}.pattern-choice{width:26px;height:22px;padding:0;border:0;border-radius:20px;background:transparent;color:#ffffff99;font:500 .52rem var(--serif);cursor:pointer;transition:.25s}.pattern-choice:hover,.pattern-choice:focus-visible{color:#fff;outline:1px solid #ffffff77}.pattern-choice.active{color:#fff;background:#a67c4866;box-shadow:0 0 0 1px #d7b77a88}.hero-quote{position:absolute;z-index:6;right:5vw;bottom:5.5%;color:#fff;display:flex;flex-direction:column;font-size:.68rem;line-height:1.55}.hero-quote strong{font-weight:400}.featured-strip{height:222px;padding:13px 2.8vw 10px;background:#f7f3eb;display:grid;grid-template-columns:135px 1fr;gap:10px}.featured-heading{padding:22px 8px 10px;position:relative}.featured-heading p{font:500 1rem/1.05 var(--serif);letter-spacing:.08em;margin:0 0 8px}.featured-heading>span{font-size:.57rem;color:#77685c}.slider-buttons{position:absolute;bottom:15px;display:flex;gap:12px}.slider-buttons button{width:30px;height:30px;border-radius:50%;border:1px solid #b6a797;background:transparent;color:#5a514a;font-size:1.05rem}.slider-buttons button:first-child{background:#2c3036;color:#fff;border-color:#2c3036}.featured-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.featured-card{min-width:0}.featured-pattern{height:100%;position:relative;overflow:hidden;background-color:#421a24;background-image:radial-gradient(ellipse at 35% 45%,#edc37b66,transparent 18%),repeating-linear-gradient(25deg,#681725 0 11px,#be8746 12px 14px,#361829 15px 28px)}.featured-pattern img{width:100%;height:100%;object-fit:cover}.featured-pattern.pattern-2{background-image:repeating-linear-gradient(30deg,#122f48 0 11px,#617a8f 12px 16px,#173b5b 17px 28px,#aa7744 29px 31px)}.featured-pattern.pattern-3{background-image:repeating-conic-gradient(from 45deg,#b7904f 0 8%,#2b174a 0 17%,#9a6b35 0 25%);background-size:46px 46px}.featured-pattern.pattern-4{background-image:repeating-linear-gradient(35deg,#0b263b 0 12px,#56809b 13px 17px,#102f47 18px 31px,#c09b65 32px 34px)}.featured-pattern:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 30%,#070a10dc)}.featured-overlay{position:absolute;z-index:2;inset:auto 14px 9px;color:#fff}.featured-overlay .number{font:.58rem var(--serif);color:#d9bc8b}.featured-overlay h2{font-size:.9rem;font-weight:400;margin:1px 0}.featured-overlay p{font:500 .52rem var(--serif);letter-spacing:.14em;color:#d2b37f;margin:0}.featured-overlay b{position:absolute;right:0;bottom:8px;font-weight:300}.portal-links{min-height:137px;padding:24px 10vw 18px;display:grid;grid-template-columns:repeat(4,1fr);background-color:#f3eee6;background-image:radial-gradient(circle at 5% 100%,#b9a07816 0 25%,transparent 26%)}.portal-links a{display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid #cdbda9;color:#674f3e}.portal-links a:last-child{border:0}.portal-icon{height:44px;font:2.4rem/1 var(--serif);color:#936f4c}.portal-links strong{font:500 .9rem var(--serif);margin-top:5px}.portal-links small{font-size:.67rem}.section{padding:8rem 7vw}.intro{display:grid;grid-template-columns:32% 1fr;border-top:1px solid #d8ccba;border-bottom:1px solid #b9aa8b}.intro>div{display:grid;grid-template-columns:1.2fr .8fr;gap:4rem;align-items:end}.intro h2{font:400 clamp(3rem,5vw,6rem)/.95 var(--serif);margin:0}.intro em{color:#b19050}.intro p:last-child{line-height:2;color:#605c54}.story-band{background:#621f2d;color:#fff;text-align:center;padding:8rem 2rem}.story-band blockquote{font:400 clamp(2.5rem,5vw,5.7rem)/1.25 var(--serif);margin:2rem auto;max-width:1100px}.story-band .cta{background:none;border-bottom:1px solid #b19050;border-radius:0}.stats{display:grid;grid-template-columns:repeat(4,1fr);text-align:center}.stats div+div{border-left:1px solid #b9aa8b}.stats strong{display:block;font:400 4rem var(--serif);color:#621f2d}.stats span{font-size:.8rem}footer{background:#071822;color:#e9dfca;padding:4rem 7vw;display:flex;justify-content:space-between}footer strong{font:1.4rem var(--serif);letter-spacing:.2em}footer p{font-size:.8rem;color:#aaa}footer nav{display:flex;gap:2rem;font-size:.75rem}.page-hero{min-height:75vh;background:#081b28;color:#fff;padding:14rem 10vw 8rem}.page-hero h1{font:400 clamp(3rem,7vw,7rem) var(--serif);max-width:900px}.page-hero>p:last-of-type{max-width:650px;line-height:2}@keyframes wave-main{0%,100%{transform:rotate(-2deg) skewX(-12deg) translate3d(0,0,0)}50%{transform:rotate(1deg) skewX(-9deg) translate3d(-1%,2%,20px)}}@keyframes wave-cream{0%,100%{transform:rotate(-18deg) translateY(0)}50%{transform:rotate(-15deg) translateY(2%)}}@keyframes wave-edge{0%,100%{transform:rotate(-15deg) translate(0)}50%{transform:rotate(-12deg) translate(-1%,3%)}}@media(max-width:1000px){.site-header{grid-template-columns:1fr auto auto;padding:0 4vw}.menu-toggle{display:block}.site-header nav{display:none;position:absolute;top:84px;left:0;right:0;height:auto;background:#172632f2;padding:1.5rem;flex-direction:column;gap:.5rem}.site-header nav.open{display:flex}.site-header nav a{padding:.5rem}.hero-copy{width:43%}.fabric-stage{inset:0}.featured-strip{grid-template-columns:115px 1fr}.portal-links{padding-inline:4vw}}@media(max-width:700px){.site-header{height:70px}.brand b{font-size:1rem}.brand-mark{font-size:2rem}.tools span{display:none}.hero{height:740px;min-height:0}.hero-copy{left:7vw;top:16%;width:86%}.hero-copy h1{font-size:4rem}.fabric-stage{inset:0;opacity:1}.fabric-video{object-position:62% center}.hero-pager{display:none}.hero-quote{right:6vw;bottom:3%}.featured-strip{height:auto;padding:12px;display:block}.featured-heading{height:105px;padding:10px}.slider-buttons{right:5px;bottom:18px}.featured-grid{grid-template-columns:repeat(2,1fr)}.featured-card{height:180px}.portal-links{grid-template-columns:repeat(2,1fr);padding:15px}.portal-links a{padding:16px 4px;border-bottom:1px solid #cdbda9}.portal-links a:nth-child(2){border-right:0}.intro,.intro>div{grid-template-columns:1fr}.section{padding:5rem 1.5rem}.stats{grid-template-columns:repeat(2,1fr);gap:2rem}.stats div+div{border:0}.stats strong{font-size:3rem}footer{flex-direction:column;gap:2rem}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.fabric{animation:none}.fabric-stage{transition:none}}
/* Orange · Gray · Black · Gold theme */
body{background:var(--gray-light);color:var(--black)}
.site-header{background:rgba(18,18,18,.7);border-bottom-color:rgba(200,155,60,.32);-webkit-backdrop-filter:blur(14px) saturate(125%);backdrop-filter:blur(14px) saturate(125%);box-shadow:0 8px 28px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.12)}
.brand,.site-header nav a.active{color:var(--gold)}
.site-header nav a:after{background:linear-gradient(90deg,var(--orange),var(--gold))}
.hero{background:var(--black)}
.hero-sky:after{background:linear-gradient(90deg,rgba(212,90,26,.12),transparent 46%,rgba(0,0,0,.24))}
.eyebrow{color:var(--orange-dark)}
.hero-copy .eyebrow{color:var(--gold)}
.copy-rule{background:linear-gradient(90deg,var(--orange),var(--gold))}
.cta{background:linear-gradient(100deg,var(--orange-dark),var(--orange) 55%,var(--gold));box-shadow:0 9px 25px rgba(16,16,16,.24)}
.featured-strip{background:#d6d3ce}
.featured-heading>span,.textile-card p:last-child{color:#5e5b57}
.slider-buttons button{border-color:#8e8982;color:var(--black)}
.slider-buttons button:first-child{background:var(--black);border-color:var(--black);color:#fff}
.featured-pattern:after{background:linear-gradient(transparent 22%,rgba(12,12,12,.94))}
.featured-overlay .number,.featured-overlay p{color:var(--gold)}
.portal-links{background-color:#e4e1dc;background-image:radial-gradient(circle at 5% 100%,rgba(212,90,26,.09) 0 25%,transparent 26%)}
.portal-links a{color:#3b3936;border-color:#aaa59d}
.portal-links a:hover,.portal-links a:focus-visible{color:var(--orange-dark)}
.portal-icon{color:var(--orange-dark)}
.intro{background:var(--gray-light);border-color:#aaa59d}
.intro em{color:var(--orange-dark)}
.story-band{background:linear-gradient(135deg,var(--black),#242321 62%,var(--orange-dark));color:#fff}
.story-band .eyebrow{color:var(--gold)}
.story-band .cta{background:none;border-bottom-color:var(--gold)}
.stats{background:#d1cec8}
.stats strong{color:var(--orange-dark)}
.stats div+div{border-color:#aaa59d}
footer{background:var(--black);color:#eee9df;border-top:3px solid var(--orange)}
footer strong{color:var(--gold)}
.page-hero{background:linear-gradient(135deg,var(--black),#292826 70%,var(--orange-dark));color:#fff}
.page-hero .eyebrow{color:var(--gold)}
.textile-card .category{color:var(--orange-dark)}
.search-link{border-color:var(--gold)}
.search-link:after{background:var(--gold)}
.hero-copy h1{-webkit-text-stroke:1px rgba(225,184,91,.92);paint-order:stroke fill;color:#171717;text-shadow:0 0 5px rgba(255,215,120,.2),0 0 16px rgba(200,155,60,.16);animation:gold-title-glow 3.6s ease-in-out infinite}
@keyframes gold-title-glow{0%,100%{-webkit-text-stroke-color:rgba(200,155,60,.82);text-shadow:0 3px 4px rgba(0,0,0,.95),0 0 5px rgba(255,209,102,.18),0 0 12px rgba(200,155,60,.12)}50%{-webkit-text-stroke-color:#f3cf78;text-shadow:0 3px 4px rgba(0,0,0,.95),0 0 8px rgba(255,224,145,.5),0 0 22px rgba(212,90,26,.24),2px 0 2px rgba(255,255,255,.2)}}
@media(prefers-reduced-motion:reduce){.hero-copy h1{animation:none;-webkit-text-stroke-color:var(--gold);text-shadow:0 0 8px rgba(200,155,60,.25)}}
.hero-copy{isolation:isolate;padding:28px 34px 30px;border-left:2px solid rgba(200,155,60,.78);border-radius:2px 24px 24px 2px;color:#fff;filter:drop-shadow(0 12px 28px rgba(0,0,0,.18))}
.hero-copy:before{content:none}
.hero-copy .eyebrow{color:#f0c76e;text-shadow:0 2px 8px rgba(0,0,0,.75)}
.hero-copy h1{color:#fff9ec;text-shadow:0 2px 3px rgba(0,0,0,.92),0 0 7px rgba(255,215,120,.28),0 0 18px rgba(200,155,60,.16)}
.hero-title-line-1,.hero-title-line-2{display:block}.hero-title-line-1{font-size:.8em;line-height:1.05;letter-spacing:.04em;margin-bottom:.12em;white-space:nowrap;width:max-content;max-width:none}.hero-title-line-2{font-size:.4em;line-height:1.05}
.hero-copy .thai-lead{color:#fff;font-weight:500;text-shadow:0 2px 5px rgba(0,0,0,.95)}
.hero-copy .en-lead{color:rgba(255,255,255,.84);text-shadow:0 2px 5px rgba(0,0,0,.92)}
.hero-copy .copy-rule{background:linear-gradient(90deg,var(--gold),var(--orange),transparent)}
.hero-copy .cta{border:1px solid rgba(255,218,137,.38);box-shadow:0 8px 24px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.16)}
.hero-quote{padding:0;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;filter:drop-shadow(0 3px 7px rgba(0,0,0,.9));text-align:right}
.hero-quote:before{content:'';position:absolute;right:0;top:-10px;width:46px;height:2px;background:linear-gradient(90deg,transparent,var(--gold));box-shadow:0 0 9px rgba(200,155,60,.55)}
.hero-quote strong{color:#f5cf78;font-weight:600;letter-spacing:.025em;-webkit-text-stroke:.25px rgba(60,35,5,.8);text-shadow:0 2px 2px #000,0 0 10px rgba(200,155,60,.34)}
.hero-quote span{color:#fff;font-weight:500;-webkit-text-stroke:.2px rgba(0,0,0,.9);text-shadow:0 2px 2px #000,1px 1px 5px #000,-1px -1px 5px rgba(0,0,0,.72)}
@media(max-width:700px){.hero-copy{padding:22px 20px 24px}.hero-copy:before{inset:-10px -16px -10px -12px;background:rgba(10,10,10,.7);border-radius:2px 18px 18px 2px}.hero-quote{padding:0;background:none;border:0}}

/* ===== Textile archive (public) ===== */
.archive-filters{background:#dcdad5;padding:28px clamp(20px,5vw,60px);border-bottom:1px solid #c2bfb8}
.filter-form{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.filter-form label{display:flex;flex-direction:column;gap:6px;flex:1;min-width:160px}
.filter-label{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:#6e6b65}
.filter-form input,.filter-form select{padding:10px 12px;border:1px solid #b4b0a8;background:#fff;color:#141414;border-radius:6px;font:inherit}
.filter-form .cta{flex:0 0 auto;padding:11px 22px}
.filter-reset{align-self:center;color:#9f3c10;text-decoration:underline;font-size:.85rem}
.filter-meta{margin:14px 0 0;color:#6e6b65;font-size:.85rem}
.archive-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;padding:40px clamp(20px,5vw,60px)}
.archive-empty{grid-column:1/-1;text-align:center;padding:80px 20px;color:#6e6b65}
.archive-empty p{font-size:1.2rem;margin:0 0 6px}
.textile-card{background:#fff;border:1px solid #d8d5cf;border-radius:10px;overflow:hidden;transition:transform .25s,box-shadow .25s}
.textile-card:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(0,0,0,.12)}
.textile-card a{display:block;color:inherit}
.textile-card-image{position:relative;aspect-ratio:4/3;background:linear-gradient(135deg,#c89b3c22,#d45a1a22);overflow:hidden}
.textile-card-image img{width:100%;height:100%;object-fit:cover}
.textile-card-pattern{width:100%;height:100%}
.pattern-1{background:repeating-linear-gradient(45deg,#c89b3c,#c89b3c 12px,#d45a1a 12px,#d45a1a 24px)}
.pattern-2{background:repeating-linear-gradient(0deg,#9f3c10,#9f3c10 14px,#c89b3c 14px,#c89b3c 28px)}
.pattern-3{background:radial-gradient(circle at 50% 50%,#d45a1a 0 18px,#c89b3c 18px 36px)}
.pattern-4{background:conic-gradient(from 0deg,#c89b3c,#d45a1a,#9f3c10,#c89b3c)}
.badge-featured{position:absolute;top:10px;left:10px;background:linear-gradient(100deg,#9f3c10,#d45a1a);color:#fff;font-size:.65rem;padding:4px 10px;border-radius:4px;letter-spacing:.1em}
.textile-card-body{padding:18px 20px 22px}
.textile-card-body .category{font-size:.62rem;letter-spacing:.18em;color:#9f3c10;text-transform:uppercase}
.textile-card-body h2{font-family:var(--serif);font-size:1.55rem;margin:.4rem 0 .2rem;color:#141414}
.textile-card-body .name-en{font-size:.82rem;color:#77746f;margin:0 0 .6rem}
.textile-card-body .desc{font-size:.88rem;color:#5e5b57;line-height:1.5;margin:0}
.pagination{display:flex;justify-content:center;gap:6px;padding:30px;flex-wrap:wrap}
.pagination a,.pagination span{padding:9px 14px;border:1px solid #b4b0a8;border-radius:6px;text-decoration:none;color:#141414}
.pagination .current{background:#141414;color:#fff;border-color:#141414}
.pagination a:hover{background:#d45a1a;color:#fff;border-color:#d45a1a}

/* ===== Textile detail (public) ===== */
.textile-detail-hero{min-height:340px;display:flex;align-items:flex-end;background-size:cover;background-position:center;color:#fff;padding:50px clamp(20px,5vw,80px) 40px}
.textile-detail-hero-inner{max-width:1280px}
.textile-detail-hero .eyebrow{color:#f0c76e;font-size:.7rem;letter-spacing:.22em}
.textile-detail-hero h1{font-family:var(--serif);font-size:clamp(2.2rem,5vw,3.6rem);margin:.4rem 0 .2rem;text-shadow:0 2px 6px rgba(0,0,0,.7)}
.textile-detail-hero .name-en{font-size:1.1rem;color:rgba(255,255,255,.8);margin:0 0 .8rem}
.textile-detail-hero .lead{font-size:1.05rem;line-height:1.6;margin:0 0 .6rem;max-width:620px}
.textile-detail-hero .location{font-size:.85rem;color:rgba(255,255,255,.7);margin:0 0 .8rem}
.technique-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0}
.technique-chips li{background:rgba(200,155,60,.22);border:1px solid rgba(200,155,60,.6);color:#f0c76e;padding:5px 12px;border-radius:20px;font-size:.78rem}
.textile-detail-wrap{display:grid;grid-template-columns:1fr 320px;gap:40px;padding:40px clamp(20px,5vw,80px);max-width:1280px;margin:0 auto}
.textile-detail-main{min-width:0}
.textile-section{margin-bottom:36px}
.textile-section h2{font-family:var(--serif);font-size:1.7rem;color:#141414;border-bottom:2px solid #d45a1a;display:inline-block;padding-bottom:6px;margin:0 0 16px}
.textile-section h3{font-size:1.05rem;color:#9f3c10;margin:18px 0 8px}
.textile-prose{font-size:1rem;line-height:1.8;color:#3b3936;white-space:pre-wrap}
.textile-meta{font-size:.88rem;color:#5e5b57;margin:.3rem 0}
.textile-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.textile-gallery figure{margin:0}
.textile-gallery img{width:100%;border-radius:8px;aspect-ratio:4/3;object-fit:cover}
.textile-gallery figcaption{font-size:.78rem;color:#77746f;margin-top:6px}
.textile-detail-side{display:flex;flex-direction:column;gap:20px}
.side-card{background:#fff;border:1px solid #d8d5cf;border-radius:10px;padding:18px 20px}
.side-card h3{font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;color:#9f3c10;margin:0 0 12px}
.side-card img{width:100%;border-radius:8px}
.color-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.color-list li{display:flex;align-items:center;gap:10px;font-size:.85rem}
.swatch{width:24px;height:24px;border-radius:4px;border:1px solid rgba(0,0,0,.1);flex-shrink:0}
.color-name{flex:1;color:#3b3936}
.color-hex{font-family:monospace;color:#77746f;font-size:.78rem}
.tag-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.tag-list li{background:#efede9;border:1px solid #d8d5cf;padding:4px 10px;border-radius:14px;font-size:.78rem;color:#5e5b57}
.cta.small{display:inline-block;padding:7px 14px;font-size:.82rem;margin-top:8px}
.demo-notice{background:#fff8e1;border-color:#e6c200}
.demo-notice p{color:#9f7c00;font-weight:600;margin:0 0 4px}
.related-textiles{padding:40px clamp(20px,5vw,80px);background:#dcdad5}
.related-textiles h2{font-family:var(--serif);font-size:1.7rem;margin:0 0 20px;color:#141414}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.related-card{background:#fff;border-radius:8px;overflow:hidden;display:block;color:inherit;text-align:center}
.related-card img{width:100%;aspect-ratio:1;object-fit:cover}
.related-card span{display:block;padding:10px;font-size:.88rem;color:#3b3936}
@media(max-width:900px){.textile-detail-wrap{grid-template-columns:1fr}}

/* ===== Locale switcher ===== */
.locale-switch{display:inline-flex;align-items:center;gap:6px;font:500 .66rem var(--serif);letter-spacing:.08em}
.locale-switch a{color:rgba(255,255,255,.6);text-decoration:none;padding:2px 4px;border-radius:3px;transition:color .2s}
.locale-switch a:hover{color:var(--gold)}
.locale-switch a.active{color:var(--gold);font-weight:600}
.locale-switch span{color:rgba(255,255,255,.35)}

/* ===== Community detail ===== */
.community-detail-hero .eyebrow{color:var(--gold)}
.artisan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.artisan-card{background:#fff;border:1px solid #d8d5cf;border-radius:8px;padding:16px 18px}
.artisan-card h3{font-family:var(--serif);font-size:1.2rem;margin:0 0 6px;color:#141414}
.artisan-specialty{font-size:.85rem;color:#9f3c10;margin:0 0 4px}
.artisan-techniques{font-size:.82rem;color:#77746f;margin:0}
.community-card .textile-card-image{aspect-ratio:3/2}

/* ===== Articles (public) ===== */
.articles-list{display:flex;flex-direction:column;gap:28px;padding:40px clamp(20px,5vw,80px);max-width:980px;margin:0 auto}
.article-card{background:#fff;border:1px solid #d8d5cf;border-radius:12px;overflow:hidden;transition:transform .25s,box-shadow .25s}
.article-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(0,0,0,.12)}
.article-card-link{display:grid;grid-template-columns:240px 1fr;gap:0;color:inherit}
.article-card-cover{aspect-ratio:4/3;overflow:hidden;background:linear-gradient(135deg,#c89b3c22,#d45a1a22)}
.article-card-cover img{width:100%;height:100%;object-fit:cover}
.article-card-body{padding:22px 26px}
.article-card-body .category{font-size:.62rem;letter-spacing:.18em;color:#9f3c10;text-transform:uppercase}
.article-card-body h2{font-family:var(--serif);font-size:1.7rem;margin:.4rem 0 .3rem;color:#141414}
.article-subtitle{font-size:1rem;color:#5e5b57;margin:0 0 .6rem;font-style:italic}
.article-excerpt{font-size:.92rem;color:#5e5b57;line-height:1.6;margin:0 0 .8rem}
.article-date{font-size:.78rem;color:#77746f}
@media(max-width:680px){.article-card-link{grid-template-columns:1fr}.article-card-cover{aspect-ratio:16/9}}

/* ===== Article detail ===== */
.article-hero{min-height:420px;display:flex;align-items:flex-end;background-size:cover;background-position:center 25%;color:#fff;padding:50px clamp(20px,5vw,80px) 40px}
.article-hero-inner{max-width:1280px}
.article-hero .eyebrow{color:#f0c76e;font-size:.7rem;letter-spacing:.22em}
.article-hero h1{font-family:var(--serif);font-size:clamp(2rem,5vw,3.2rem);margin:.4rem 0 .3rem;text-shadow:0 2px 6px rgba(0,0,0,.7)}
.article-hero .article-subtitle{color:rgba(255,255,255,.85);font-size:1.1rem;margin:0 0 .8rem;text-shadow:0 2px 4px rgba(0,0,0,.6)}
.article-meta{font-size:.85rem;color:rgba(255,255,255,.7);margin:0}
.article-meta span{margin-right:6px}
.article-wrap{max-width:760px;margin:0 auto;padding:40px clamp(20px,5vw,80px)}
.article-excerpt-lead{font-family:var(--serif);font-size:1.4rem;line-height:1.6;color:#3b3936;border-left:3px solid var(--orange);padding-left:20px;margin:0 0 32px}
.article-prose{font-size:1.05rem;line-height:1.85;color:#3b3936;white-space:pre-wrap}
.article-tags{margin-top:36px;padding-top:24px;border-top:1px solid #d8d5cf}
.article-tags h3{font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;color:#9f3c10;margin:0 0 12px}
.article-related{margin-top:40px;padding-top:24px;border-top:1px solid #d8d5cf}
.article-related h2{font-family:var(--serif);font-size:1.5rem;margin:0 0 16px;color:#141414}

/* ===== Search page ===== */
.search-hero{background:linear-gradient(135deg,var(--black),#292826 70%,var(--orange-dark))}
.search-bar-wrap{padding:30px clamp(20px,5vw,80px);background:#dcdad5;border-bottom:1px solid #c2bfb8}
.search-bar-form{max-width:680px;margin:0 auto;display:flex;gap:12px}
.search-bar-form input{flex:1;padding:14px 18px;border:1px solid #b4b0a8;border-radius:8px;background:#fff;font:inherit;font-size:1.05rem}
.search-bar-form input:focus{border-color:var(--orange);outline:none;box-shadow:0 0 0 3px rgba(212,90,26,.15)}
.search-bar-form .cta{flex:0 0 auto;padding:14px 28px}
.search-facets{padding:20px clamp(20px,5vw,80px);max-width:1280px;margin:0 auto}
.facet-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.facet-tabs a{padding:8px 16px;border:1px solid #b4b0a8;border-radius:20px;background:#fff;color:#3b3936;font-size:.88rem;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.facet-tabs a:hover{border-color:var(--orange);color:var(--orange-dark)}
.facet-tabs a.active{background:linear-gradient(100deg,var(--orange-dark),var(--orange));color:#fff;border-color:var(--orange)}
.facet-count{background:rgba(0,0,0,.12);padding:1px 8px;border-radius:10px;font-size:.78rem;font-weight:600}
.facet-tabs a.active .facet-count{background:rgba(255,255,255,.25)}
.search-results{padding:0 clamp(20px,5vw,80px) 40px;max-width:1280px;margin:0 auto}
.badge-type{position:absolute;top:10px;left:10px;font-size:.62rem;letter-spacing:.1em;padding:4px 10px;border-radius:4px;color:#fff;text-transform:uppercase}
.badge-textile{background:linear-gradient(100deg,#9f3c10,#d45a1a)}
.badge-community{background:linear-gradient(100deg,#6b4a14,#c89b3c)}
.badge-article{background:linear-gradient(100deg,#3b3936,#5e5b57)}
.search-card .textile-card-image{aspect-ratio:4/3}

/* ===== Map page ===== */
.map-hero{background:linear-gradient(135deg,var(--black),#292826 70%,var(--orange-dark))}
.map-controls{padding:24px clamp(20px,5vw,80px);background:#dcdad5;border-bottom:1px solid #c2bfb8}
.map-wrap{padding:0;height:calc(100vh - 320px);min-height:480px;position:relative}
#thai-textile-map{width:100%;height:100%;background:#e4e1dc}
.map-marker{background:transparent;border:0}
.map-marker-dot{display:block;width:16px;height:16px;border-radius:50%;border:3px solid;box-shadow:0 0 0 2px rgba(255,255,255,.85),0 2px 6px rgba(0,0,0,.4)}
.map-popup{min-width:200px;max-width:280px}
.map-popup-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px;margin-bottom:8px}
.map-popup-type{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
.map-popup h3{font-family:var(--serif);font-size:1.25rem;margin:4px 0 6px;color:#141414}
.map-popup p{font-size:.85rem;color:#5e5b57;margin:0 0 8px;line-height:1.5}
.map-popup-link{display:inline-block;font-size:.82rem;color:var(--orange-dark);text-decoration:none;font-weight:600}
.map-popup-link:hover{text-decoration:underline}
.leaflet-popup-content-wrapper{border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.leaflet-container{font-family:var(--thai)}

/* ===== Contact info block ===== */
.page-body{max-width:760px;margin:0 auto;padding:30px clamp(20px,5vw,80px) 60px}
.contact-info p{margin:0 0 18px;line-height:1.7;color:#3b3936}
.contact-info strong{color:var(--orange-dark);letter-spacing:.05em;font-size:.82rem;text-transform:uppercase}
.contact-info a{color:var(--orange-dark)}

@media(max-width:900px){.brand b{font-size:1.4rem}.brand-mark{font-size:1.8rem}}

html[lang='th'] .brand b{font-size:1.95rem;letter-spacing:.03em}
html[lang='th'] .brand small{font-size:.66rem;letter-spacing:.05em}

/* ===== Readability: minimum font sizes ===== */
.site-header nav{font-size:.85rem}
.locale-switch{font-size:.82rem}
.brand small{font-size:.7rem}
html[lang='th'] .brand small{font-size:.74rem}
footer nav{font-size:.82rem}
.eyebrow,.textile-detail-hero .eyebrow,.article-hero .eyebrow{font-size:.8rem}
.hero-quote{font-size:.84rem}
.featured-heading>span{font-size:.74rem}
.portal-links small{font-size:.82rem}
.filter-label{font-size:.78rem}
.badge-featured,.badge-type,.map-popup-type{font-size:.74rem}
.textile-card-body .category,.article-card-body .category{font-size:.78rem}
.technique-chips li,.textile-gallery figcaption,.side-card h3,.color-hex,.tag-list li,.article-date,.article-tags h3,.facet-count{font-size:.82rem}

.tools{font-size:.82rem}

/* Article detail redesign + inline media */
.article-wrap{max-width:1280px;display:grid;grid-template-columns:minmax(0,3fr) minmax(260px,1fr);gap:48px;align-items:start;padding:52px clamp(20px,5vw,80px) 80px}
@media(max-width:900px){.article-wrap{grid-template-columns:1fr}}
.article-sidebar{position:sticky;top:24px}
.sidebar-card{background:#fff;border:1px solid #d8d5cf;border-radius:12px;padding:22px 24px;margin-bottom:22px}
.meta-block{display:grid;gap:12px}
.meta-label{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:#77746f}
.meta-value{font-size:1rem;color:#141414;font-weight:500}
.article-main{min-width:0}
.article-prose{white-space:normal;font-size:1.06rem;line-height:1.85;color:#2d2b28;max-width:1100px}
.article-prose h2{font-size:1.5rem;margin:2rem 0 1rem;color:#141414;font-weight:600}
.article-prose h3{font-size:1.25rem;margin:1.5rem 0 .8rem;font-weight:600}
.article-prose p{margin:0 0 1.1rem}
.article-prose blockquote{border-left:3px solid var(--orange);padding-left:20px;margin:1.5rem 0;color:#5e5b57;font-style:italic}
.article-prose figure.article-figure{margin:1.8rem 0}
.article-prose figure.article-figure img{width:100%;border-radius:10px}
.article-prose figure.article-figure video{width:100%;border-radius:10px;display:block;background:#141414}
.article-prose figure.article-figure figcaption{font-size:.82rem;color:#77746f;margin-top:8px}
.article-gallery .gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.article-gallery img{width:100%;height:180px;object-fit:cover;border-radius:10px}
.media-missing{color:#c45118;font-size:.9rem}
/* Article blocks public */
.article-body{width:100%;padding:0 0 80px}
.ab-block{margin:0 0 1.4rem}
.ab-align-left{text-align:left}
.ab-align-center{text-align:center;margin-left:auto;margin-right:auto}
.ab-align-right{text-align:right;margin-left:auto}
.ab-heading{font-size:1.55rem;color:#141414;margin:0 0 .8rem;font-weight:600}
.ab-text{font-size:1.06rem;line-height:1.85;color:#2d2b28;margin:0 0 1.1rem}
.ab-text-lead{font-size:1.18rem;color:#5e5b57;font-style:italic}
.ab-figure{margin:1.6rem 0}
.ab-figure img,.ab-figure video{width:100%;border-radius:10px;display:block}
.ab-width-wide{max-width:100%}
.ab-width-medium{max-width:720px}
.ab-width-small{max-width:480px}
.ab-align-center.ab-width-medium,.ab-align-center.ab-width-small{margin-left:auto;margin-right:auto}
.ab-align-right.ab-width-medium,.ab-align-right.ab-width-small{margin-left:auto;margin-right:0}
figcaption{font-size:.85rem;color:#77746f;margin-top:8px}
.ab-gallery-2 .ab-gallery-grid{grid-template-columns:repeat(2,1fr)}
.ab-gallery-3 .ab-gallery-grid{grid-template-columns:repeat(3,1fr)}
.ab-gallery-4 .ab-gallery-grid{grid-template-columns:repeat(4,1fr)}
.ab-gallery-grid{display:grid;gap:10px}
.ab-gallery-grid img{width:100%;height:220px;object-fit:cover;border-radius:8px}
@media(max-width:800px){.ab-gallery-4 .ab-gallery-grid{grid-template-columns:repeat(2,1fr)}.ab-gallery-3 .ab-gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.ab-gallery-4 .ab-gallery-grid{grid-template-columns:1fr}.ab-gallery-3 .ab-gallery-grid{grid-template-columns:1fr}.ab-gallery-2 .ab-gallery-grid{grid-template-columns:1fr}}
.ab-quote{border-left:3px solid var(--orange);padding-left:22px;margin:1.6rem 0;color:#5e5b57;font-style:italic}
.ab-quote cite{display:block;margin-top:8px;font-size:.9rem;color:#77746f;font-style:normal}
.ab-divider{border:none;border-top:1px solid #d8d5cf;margin:2rem auto;max-width:200px}
/* No sidebar: center content, single column */
.article-no-sidebar{grid-template-columns:1fr;justify-items:center}
.article-no-sidebar .article-main{width:100%;max-width:1100px}
/* ===== Home page sections ===== */
.articles-strip{max-width:1280px;margin:0 auto;padding:70px clamp(20px,5vw,80px);background:var(--gray-light);border-bottom:1px solid #e0ddd8}
.articles-strip-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:26px;border-bottom:1px solid #d8d5cf;padding-bottom:14px;gap:16px}
.articles-strip-head h2{font-size:1.5rem;font-weight:600;color:#141414;margin:0;letter-spacing:.02em}
.articles-strip-head a{color:var(--orange-dark);text-decoration:none;font-size:.95rem;font-weight:500}
.articles-strip-head a:hover{text-decoration:underline}
.article-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px}
.article-card{background:#fff;border:1px solid #d8d5cf;border-radius:12px;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.article-card:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(0,0,0,.1)}
.article-card a{color:inherit;text-decoration:none;display:block;height:100%}
.article-card-image{aspect-ratio:16/10;background:#f4f2ee;overflow:hidden}
.article-card-image img{width:100%;height:100%;object-fit:cover}
.article-card-body{padding:18px 20px 22px}
.article-card-body h3{font-size:1.1rem;margin:0 0 8px;line-height:1.4;color:#141414}
.article-card-body p{font-size:.9rem;color:#5e5b57;margin:0;line-height:1.6}

.featured-strip{display:block;height:auto;max-width:1280px;margin:0 auto;padding:70px clamp(20px,5vw,80px);background:#fff;border-bottom:1px solid #e0ddd8}
.featured-heading{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:30px;border-bottom:2px solid var(--orange);padding-bottom:14px;gap:16px;position:static}
.featured-heading p#featured-heading{font-size:1.5rem;font-weight:600;color:#141414;margin:0;letter-spacing:.02em}
.featured-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px}

.portal-links{padding:50px clamp(20px,5vw,80px);display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.portal-links a{flex:1;min-width:160px;max-width:220px;padding:24px 18px;text-align:center;border-radius:12px;background:#fff;border:1px solid #c2bfb8;transition:transform .2s,box-shadow .2s}
.portal-links a:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.1);border-color:var(--orange)}
.portal-icon{display:block;font-size:2rem;margin-bottom:10px;color:var(--orange-dark)}
.intro.section{padding:70px clamp(20px,5vw,80px);max-width:1280px;margin:0 auto;border:0;text-align:center}
.intro.section .eyebrow{margin-bottom:8px}
.intro.section h2{font-size:clamp(1.6rem,3vw,2.2rem);color:#141414;margin:0 0 18px}
.intro.section p{font-size:1.05rem;color:#5e5b57;max-width:760px;margin:0 auto;line-height:1.75}
.story-band{padding:70px clamp(20px,5vw,80px);text-align:center}
.story-band blockquote{font-size:clamp(1.3rem,3vw,1.8rem);max-width:900px;margin:0 auto 28px;line-height:1.55}
.story-band .cta{display:inline-block}
.stats.section{padding:50px clamp(20px,5vw,80px);max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:24px;text-align:center;border-top:1px solid #c2bfb8}
.stats.section div strong{font-size:2.2rem;display:block;margin-bottom:4px}
.stats.section div span{font-size:.85rem;color:#5e5b57;letter-spacing:.08em;text-transform:uppercase}
/* Article block lists */
.ab-text ul,.ab-text ol{margin:0 0 1.1rem 1.5rem;padding-left:1.2rem}
.ab-text li{margin-bottom:.35rem}
.ab-text p{margin:0 0 1.1rem}
.ab-text p:last-child,.ab-text ul:last-child,.ab-text ol:last-child{margin-bottom:0}
/* Reset wrapper margin for markdown blocks */

/* Article list block */
.ab-list{margin:0 0 1.1rem 1.5rem;padding-left:1.2rem}
.ab-list:last-child{margin-bottom:0}
.ab-list-disc{list-style-type:disc}
.ab-list-circle{list-style-type:circle}
.ab-list-square{list-style-type:square}
.ab-list-dash,.ab-list-check{list-style:none;padding-left:0}
.ab-list-dash li,.ab-list-check li{position:relative;padding-left:1.4rem;margin-bottom:.35rem}
.ab-list-dash li:before{content:'—';position:absolute;left:0;color:var(--orange)}
.ab-list-check li:before{content:'✓';position:absolute;left:0;color:var(--orange);font-weight:700}
/* Paragraph first-line indent */
.ab-text p{text-indent:0}.ab-text p.ab-indent{text-indent:4em !important}.ab-text.ab-indent p{text-indent:4em}.ab-text.ab-no-indent p{text-indent:0}.ab-text p.ab-center{text-align:center}.ab-text p.ab-justify{text-align:justify;text-justify:inter-cluster}
/* Media protection */
img,video,picture{-webkit-user-drag:none;user-drag:none;user-select:none;-webkit-user-select:none}

/* Heading block full width */
.ab-heading{max-width:none;width:100%}
/* Reduce page-hero height on all pages except home */
/* Match page-hero style to article-hero */
.page-hero{min-height:340px;display:flex;align-items:flex-end;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(20,20,20,.92)),var(--black);color:#fff;padding:50px clamp(20px,5vw,80px) 40px}
.page-hero h1{max-width:none;width:100%}
/* Page-hero typography scale */
.page-hero h1{font-size:clamp(2rem,5vw,3.6rem);font-weight:600}
.page-hero .eyebrow{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.page-hero>p:last-of-type{font-size:1.05rem;line-height:1.75;max-width:720px}
/* Hero slider controls */
#home-hero{position:relative}
.hero-stage{position:relative;width:100%;height:100%}
.hero-nav{display:none}
.hero-dots{position:absolute;right:1.5rem;top:50%;transform:translateY(-50%);bottom:auto;left:auto;z-index:15;display:flex;flex-direction:column;gap:12px}
.hero-dot{width:52px;height:52px;border-radius:8px;border:2px solid rgba(255,255,255,.35);background:rgba(0,0,0,.45);padding:0;cursor:pointer;overflow:visible;transition:.2s;position:relative}
.hero-dot img{width:100%;height:100%;object-fit:cover;opacity:.55;transition:.2s}
.hero-dot span{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.78rem;font-weight:600}
.hero-dot.active,.hero-dot:hover{border-color:#fff;background:#000}
.hero-dot.active img,.hero-dot:hover img{opacity:1}
.hero-dot::after{content:attr(data-title);position:absolute;right:calc(100% + 14px);top:50%;transform:translateY(-50%) scale(.95);background:rgba(16,16,16,.95);color:#fff;padding:7px 14px;border-radius:6px;font-size:.85rem;font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;transition:.2s;z-index:20;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.hero-dot::before{content:'▶';position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%) scale(.95);color:rgba(16,16,16,.95);font-size:.75rem;line-height:1;opacity:0;transition:.2s;z-index:20;text-shadow:0 2px 4px rgba(0,0,0,.3)}
.hero-dot:hover::after,.hero-dot:hover::before{opacity:1;transform:translateY(-50%) scale(1)}