/* Gold premium theme (approved mockup "ทุกหน้าแบบกรอบทองพรีเมียม"): dark wine header bands with gold frames,
   cream content cards with thin gold frames and corner marks. Loaded last; layout and content are unchanged. */
:root{--g1:#fff1c4;--g2:#f0cf78;--g3:#b8862f;--gline:#d9b25a;--gtext:#f3e2c6;--gsoft:#f6dea0}
.g-text,.page-head h1,.page-head .ph-stat b,.page-head .ph-count b,.page-head .ph-count-line b,.page-head .ph-cal b{background:linear-gradient(180deg,var(--g1) 0%,var(--g2) 45%,var(--g3) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* Header band */
.page-head{background:radial-gradient(ellipse at 75% 40%,#5a0c18 0%,#2c050c 45%,#120205 100%)!important;color:#fff3d6;border-bottom:3px solid #f0cf7899!important;position:relative;overflow:hidden}
.page-head:after{display:none!important}
.page-head:before{content:'';position:absolute;inset:0;opacity:.07;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M32 4c8 10 8 18 0 28c-8-10-8-18 0-28zM32 60c8-10 8-18 0-28c-8 10-8 18 0 28zM4 32c10-8 18-8 28 0c-10 8-18 8-28 0zM60 32c-10-8-18-8-28 0c10 8 18 8 28 0z' fill='none' stroke='%23e9c66b'/%3E%3Ccircle cx='32' cy='32' r='3' fill='%23e9c66b'/%3E%3C/svg%3E");background-size:64px 64px}
.page-head .eyebrow{color:var(--g2)!important;display:inline-flex;align-items:center;gap:10px;letter-spacing:1.5px}
.page-head .eyebrow:before,.page-head .eyebrow:after{content:'';width:26px;height:1px;background:var(--g2)}
.page-head h1{font-weight:700!important;line-height:1.45!important;padding:.1em 0 .2em}
.page-head p{color:var(--gtext)!important}
.page-head-icon{box-shadow:0 0 0 4px #2c050c,0 0 0 6px var(--g2),0 10px 24px #0008!important}

/* Gold frame around the header infographic */
.page-head-info{padding:22px;border:1px solid var(--gline);background:linear-gradient(135deg,#2a0409,#140205);box-shadow:0 0 30px 2px #f0cf7822;color:#fff3d6}
.page-head-info:before{content:'';position:absolute;inset:5px;border:1px solid #d9b25a55;pointer-events:none}
.gk{position:absolute;width:20px;height:20px;border:2px solid var(--g2);z-index:2}
.gk:after{content:'';position:absolute;width:6px;height:6px;background:var(--g2);transform:rotate(45deg)}
.gk-tl{left:-6px;top:-6px;border-right:0;border-bottom:0}.gk-tl:after{left:3px;top:3px}
.gk-tr{right:-6px;top:-6px;border-left:0;border-bottom:0}.gk-tr:after{right:3px;top:3px}
.gk-bl{left:-6px;bottom:-6px;border-right:0;border-top:0}.gk-bl:after{left:3px;bottom:3px}
.gk-br{right:-6px;bottom:-6px;border-left:0;border-top:0}.gk-br:after{right:3px;bottom:3px}
@media(max-width:700px){.page-head-info{padding:14px}.page-head.has-info{padding-left:22px!important;padding-right:22px!important}}

/* Infographic pieces on the dark band */
.page-head .ph-stat,.page-head .ph-steps span,.page-head .ph-tile,.page-head .ph-chips span,.page-head .ph-pin span,.page-head .ph-cal{border:1px solid #f0cf7899;background:linear-gradient(160deg,#ffffff1f,#ffffff08);box-shadow:inset 0 1px 0 #ffffff30,0 8px 22px #0005}
.page-head .ph-stat b{padding:.08em 0 .14em}
.page-head .ph-stat span,.page-head .ph-steps small,.page-head .ph-tile small,.page-head .ph-note,.page-head .ph-count span,.page-head .ph-cal span{color:var(--gsoft)}
.page-head .ph-timeline:before{background:linear-gradient(90deg,var(--g3),var(--g2),var(--g3))}
.page-head .ph-timeline i{background:var(--g2);border-color:#1f0408;box-shadow:0 0 0 1px var(--g2)}
.page-head .ph-timeline span{color:var(--gtext)}.page-head .ph-timeline span b{color:#ffe592}
.page-head .ph-poster{border-color:var(--g2)}
.page-head .ph-count b{padding:.06em 0 .12em}
.page-head .ph-count b.ph-live,.page-head .ph-count b.ph-done{color:transparent}
.page-head .ph-tag{background:linear-gradient(180deg,#fbe3a0,#d9a948);color:#3b0a10}
.page-head .ph-route>div:first-child{color:#ffe592}
.page-head .ph-route-line i{background:var(--g2);box-shadow:0 0 10px #f0cf78aa}
.page-head .btn.outline{color:var(--gsoft)!important;border-color:var(--g2)!important;background:#ffffff0d!important}
.page-head .btn.gold{background:linear-gradient(180deg,#fbe3a0,#d9a948)!important;color:#3b0a10!important;border:0!important}
.page-head .ph-map{background:linear-gradient(0deg,#f0cf7814 1px,transparent 1px) 0 0/30px 30px,linear-gradient(90deg,#f0cf7814 1px,transparent 1px) 0 0/30px 30px,#1a0306;border-color:#d9b25a88}
.page-head .ph-map:before{border-left-color:#f0cf7866}
.page-head .ph-pin i{background:var(--g2);border-color:#2a0409}
.page-head .ph-pin span{color:var(--gtext);background:#2a0409e6}
.page-head .ph-pin b{color:#ffe592}
.page-head .ph-chips span{color:#fff3d6}
.page-head .ph-chips span.is-main{background:linear-gradient(180deg,#fbe3a0,#d9a948);color:#3b0a10;border-color:transparent}
.page-head .ph-cal{overflow:hidden}
.page-head .ph-cal small{background:linear-gradient(180deg,#fbe3a0,#d9a948);color:#3b0a10}
.page-head .ph-cal b{padding:.04em 0 .1em}
.page-head .ph-kicker{color:var(--g2)}
.page-head .ph-next-copy strong{color:#fff3d6}.page-head .ph-next-copy span{color:var(--gtext)}.page-head .ph-next-copy em{color:#ffe592}
.page-head .ph-empty b,.page-head .ph-more{color:var(--gtext)}
.page-head .ph-count-line b{padding:.06em 0 .12em}.page-head .ph-count-line span{color:#ffe592}
.page-head .ph-mosaic a{border:2px solid var(--g2);border-radius:4px}
.page-head .ph-strip img{border:1px solid #f0cf7888;border-radius:4px}
.page-head .ph-steps:before{background:#ffffff22}.page-head .ph-steps:after{background:linear-gradient(180deg,var(--g1),var(--g3))}
.page-head .ph-steps i{background:#3b0a10;color:#ffe592;box-shadow:0 0 0 2px var(--g2)}
.page-head .ph-steps li:last-child i{background:linear-gradient(180deg,#fbe3a0,#d9a948);color:#3b0a10}
.page-head .ph-steps b,.page-head .ph-tile b{color:#fff3d6}
.page-head .ph-cta{background:linear-gradient(180deg,#fbe3a0,#d9a948)!important;color:#3b0a10!important}
.page-head .ph-tile:hover{box-shadow:0 10px 24px #0007,0 0 0 1px var(--g2)}

/* Content cards: thin gold frame, inner hairline and corner marks */
.section{position:relative;border:1px solid var(--gline)!important;border-radius:4px!important;box-shadow:inset 0 0 0 6px #fffaf2,inset 0 0 0 7px #d9b25a55}
.section:before{content:'';position:absolute;inset:-6px;pointer-events:none;background:
 linear-gradient(var(--g2),var(--g2)) left top/22px 2px no-repeat,linear-gradient(var(--g2),var(--g2)) left top/2px 22px no-repeat,
 linear-gradient(var(--g2),var(--g2)) right top/22px 2px no-repeat,linear-gradient(var(--g2),var(--g2)) right top/2px 22px no-repeat,
 linear-gradient(var(--g2),var(--g2)) left bottom/22px 2px no-repeat,linear-gradient(var(--g2),var(--g2)) left bottom/2px 22px no-repeat,
 linear-gradient(var(--g2),var(--g2)) right bottom/22px 2px no-repeat,linear-gradient(var(--g2),var(--g2)) right bottom/2px 22px no-repeat}
.section h2{color:#3b0a10}
.section .eyebrow{color:#94702e}
/* Photos inside cards sit in a dark gold frame */
.story-photo{padding:9px;background:linear-gradient(135deg,#2a0409,#140205);border:1px solid var(--gline)}
.story-photo img{border:2px solid var(--g2);border-radius:0!important}
.story-photo span{color:var(--gtext)!important;padding:10px 4px 2px!important}
.join-banner{border:1px solid var(--gline);box-shadow:inset 0 0 0 5px #00000000,inset 0 0 0 6px #f0cf7855;border-radius:6px!important}
.ct-map,.ct-row{border-color:#d9b25a99}
@media print{.section:before,.gk{display:none}}
/* The ribbon under the home slider and the footer share the same left/right edges as the cards. */
@media(min-width:701px){
 .ribbon,footer{padding-left:calc(max(50px,(100% - 1380px) / 2) + 5%)!important;padding-right:calc(max(50px,(100% - 1380px) / 2) + 5%)!important}
 .ribbon{justify-content:space-between!important}
}
@media(min-width:701px) and (max-width:1100px){.ribbon,footer{padding-left:calc(24px + 5%)!important;padding-right:calc(24px + 5%)!important}}
/* Headings on dark panels inside cards stay light */
.section .join-banner h2,.section .join-banner p{color:#fff3d6}
.section .join-banner .eyebrow{color:var(--g2)}
/* Headings and text on dark panels inside cards stay light */
.section .join-banner h2,.section .join-banner p{color:#fff3d6}
.section .join-banner .eyebrow{color:var(--g2)}
/* Language switch: both options are the same size, whichever language is active. */
.language-option{display:inline-flex!important;align-items:center;justify-content:center;width:52px;height:34px;padding:0!important;line-height:1!important;font-size:14px!important;box-sizing:border-box}
.language-option.is-active{font-weight:700}
.language-option:not(.is-active){font-weight:700;opacity:.85}
@media(max-width:700px){.language-option{width:44px;height:30px;font-size:13px!important}}
/* Main menu on computers: every item has the same width and height in Thai and English, so switching language does not move the menu. */
@media(min-width:1101px){
 .navigation-bar nav{gap:4px}
 .navigation-bar nav a{width:120px;height:48px;min-height:48px;padding:0 6px!important;box-sizing:border-box;text-align:center;line-height:1.2;white-space:nowrap}
}
@media(min-width:1101px) and (max-width:1280px){.navigation-bar nav a{width:104px;font-size:15px}}
@media(min-width:1101px) and (max-width:1240px){.navigation-bar nav a{width:84px;font-size:14px}}

/* One shared edge for computers and tablets: the outer edge of the content cards (.section is 100% - 100px, max 1380px; 100% - 48px up to 1100px).
   Header decorations, menu bar, page headers, home slider, ribbon and footer all line up with it. Phones (≤700px) keep their own spacing. */
@media(min-width:1101px){
 .art-left{left:max(50px,calc((100% - 1380px) / 2))!important}
 .art-right{right:max(50px,calc((100% - 1380px) / 2))!important}
 .navigation-bar{padding-inline:max(50px,calc((100% - 1380px) / 2))!important}
 .page-head,.ribbon,footer{padding-left:max(50px,calc((100% - 1380px) / 2))!important;padding-right:max(50px,calc((100% - 1380px) / 2))!important}
 .hs-inner{--hs-edge:max(50px,calc((100% - 1380px) / 2))!important}
}
@media(min-width:701px) and (max-width:1100px){
 .page-head,.ribbon,footer{padding-left:24px!important;padding-right:24px!important}
 .hs-inner{--hs-edge:24px!important}
}
/* Menu item width steps so the centred menu never touches the language switch at the right edge. */
@media(min-width:1301px) and (max-width:1440px){.navigation-bar nav a{width:104px;font-size:15px}}
@media(min-width:1181px) and (max-width:1300px){.navigation-bar nav a{width:88px;font-size:14px}}
@media(min-width:1101px) and (max-width:1180px){.navigation-bar nav a{width:84px;font-size:13px;padding:0 2px!important}.header-tools .language-globe{display:none}}
/* Association name plate on the contact page, in a gilded frame */
.ct-plaque{position:relative;margin:26px 0 0;padding:12px;border:1px solid var(--gline);background:linear-gradient(135deg,#2a0409,#140205);box-shadow:0 18px 40px #2a040940,0 0 0 1px #f0cf7833 inset}
.ct-plaque:before{content:'';position:absolute;inset:6px;border:1px solid #d9b25a66;pointer-events:none;z-index:1}
.ct-plaque img{display:block;width:100%;height:auto;border:2px solid var(--g2);box-shadow:0 0 0 4px #2a0409,0 0 24px #f0cf7833}
@media(max-width:700px){.ct-plaque{padding:9px;margin-top:20px}}
.ct-grid>.ct-plaque{margin:0;align-self:center}
a.ct-map{margin-top:32px}
@media(min-width:901px){a.ct-map{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}a.ct-map .ct-map-art{height:auto;min-height:230px}a.ct-map .ct-map-body{align-self:center;padding:28px 32px}}
@media(max-width:900px){.ct-grid>.ct-plaque{margin-top:4px}a.ct-map{margin-top:24px}}
/* Computers: menu bar stays at the top while scrolling (header is sticky with a negative top set by sticky-header.js). */
@media(min-width:1101px){body>header{position:sticky;z-index:60}body>header .navigation-bar{box-shadow:0 6px 18px #2a040955}}
/* Home festival card on phones/tablets: picture on top, text below, nothing spills out of the card. */
.festival-strip>*{min-width:0}
.festival-strip h2{overflow-wrap:anywhere}
@media(max-width:900px){
 .festival-strip{grid-template-columns:1fr!important;gap:18px!important;padding:24px!important;text-align:center}
 .festival-strip img{display:block!important;width:auto;max-width:220px;height:auto!important;max-height:300px;margin:0 auto}
 .festival-strip h2{font-size:clamp(24px,6.4vw,32px)!important;line-height:1.35}
 .festival-strip p{font-size:16px!important}
 .festival-strip .btn{font-size:15px!important;padding:12px 22px!important}
}
/* Tap-to-enlarge pictures */
.festival-strip img,img.poster,img.ph-poster,.event-page .story-photo img,.ct-plaque img{cursor:zoom-in}
.festival-strip img:focus-visible,img.poster:focus-visible,img.ph-poster:focus-visible,.event-page .story-photo img:focus-visible,.ct-plaque img:focus-visible{outline:3px solid #b8862f;outline-offset:4px}
dialog.zoom-dialog{max-width:min(960px,calc(100% - 24px));max-height:94dvh;padding:44px 14px 14px;background:#1a0306;border-color:#d9b25a}
dialog.zoom-dialog .close{color:#f6dea0;top:4px;right:6px}
.zoom-view{margin:0;text-align:center}
.zoom-view img{display:block;max-width:100%;max-height:calc(94dvh - 120px);width:auto;height:auto;margin:0 auto;border:2px solid #f0cf78}
.zoom-view figcaption{margin-top:10px;color:#f3e2c6;font-size:15px}
.zoom-view a{color:#ffe592}
/* Very small phones: TSC branch pins become a tidy two-column list so long province names fit. */
@media(max-width:420px){
 .page-head .ph-map{height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px}
 .page-head .ph-map:before{display:none}
 .page-head .ph-pin{position:static;max-width:none;min-width:0}
 .page-head .ph-pin span{min-width:0;flex:1;overflow-wrap:anywhere}
}
.ct-map-art{overflow:hidden}
/* Icon buttons: drawn icons (not text characters) so arrows, × and pause sit exactly in the middle of their circles. */
svg.ico{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
svg.ico[data-fill]{fill:currentColor;stroke:none}
button:has(>svg.ico){display:inline-grid;place-items:center;padding:0;line-height:0}
.hs-arrow svg.ico{width:24px;height:24px}
.hs-pause{display:inline-flex;align-items:center;gap:8px;line-height:1}
.hs-pause-ico{display:grid;place-items:center}
.hs-pause-ico svg.ico{width:16px;height:16px}
@media(max-width:700px){.hs-pause{justify-content:center;width:46px;padding:0}}
/* Phones: association name centred on the screen, Thai and English set to the same visual size and weight. */
@media(max-width:700px){
 .association-masthead{display:flex!important;align-items:center}
 .association-masthead:before{content:'';flex:0 0 var(--lang-w,56px)}
 header .association-masthead .brand{flex:1 1 auto!important;justify-content:center;margin:0!important;max-width:none!important;min-width:0;text-align:center}
 header .association-masthead .brand>span{text-align:center}
 .masthead-language{flex:0 0 var(--lang-w,56px)!important;min-width:0!important;width:var(--lang-w,56px);justify-content:center}
 .association-masthead .association-name-th{font-size:clamp(15px,4.3vw,18px)!important;font-weight:600;line-height:1.3!important;letter-spacing:0}
 .association-masthead .association-name-en{font-size:clamp(15.5px,4.5vw,19px)!important;font-weight:600;line-height:1.3!important;letter-spacing:.1px}
}
@media(max-width:360px){.association-masthead{--lang-w:50px}}
/* Phones: [logo slot = same size as the language button] [name, centred on screen, two lines] [language button]. */
@media(max-width:700px){
 .association-masthead{--lang-w:58px;--lang-h:44px;position:relative;padding-left:10px!important;padding-right:10px!important;gap:6px}
 .association-masthead:before{display:none!important}
 header .association-masthead .brand{display:flex!important;align-items:center;gap:6px!important;flex:1 1 auto!important;max-width:none!important;min-width:0}
 header .association-masthead .brand img{position:static!important;transform:none!important;flex:0 0 var(--lang-w)!important;width:var(--lang-w)!important;height:var(--lang-h)!important;object-fit:contain;margin:0!important}
 header .association-masthead .brand>span{flex:1 1 auto;min-width:0;text-align:center}
 .masthead-language{flex:0 0 var(--lang-w)!important;width:var(--lang-w)!important;min-width:0!important;min-height:var(--lang-h)!important;box-sizing:border-box}
 .association-masthead .name-line{display:block;white-space:nowrap!important}
 .association-masthead .association-name-th{font-size:clamp(12.5px,4vw,17.5px)!important}
 .association-masthead .association-name-en{font-size:clamp(13px,4.15vw,18px)!important}
}
@media(max-width:360px){.association-masthead{--lang-w:52px;--lang-h:40px}}