/* Homepage concept: a spacious editorial layout built around the seven-cell mark. */
body:has(.home-page) .wrap { max-width: 1240px; padding-inline: 40px; }
body:has(.home-page) .header-inner { padding-block: 24px; }
body:has(.home-page) .header-inner .logo img { height: 48px; }
body:has(.home-page) nav.site-nav a.active { color: var(--bs-text-link); }
/* Hero: the brand's blue panel — white type with weight contrast, faint rounded squares. */
.hero-band { position: relative; overflow: hidden; background: var(--bs-blue); color: var(--bs-paper); }
.hero-squares span { position: absolute; width: 220px; aspect-ratio: 1; border-radius: 22px; background: var(--bs-on-blue-faint); pointer-events: none; }
.hero-squares span:nth-child(1) { top: -90px; left: 30%; }
.hero-squares span:nth-child(2) { top: 170px; left: -120px; }
.hero-squares span:nth-child(3) { bottom: -110px; left: 46%; width: 180px; }
.hero-squares span:nth-child(4) { top: -60px; right: -80px; width: 260px; }
.home-page .home-hero { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; column-gap: 72px; padding-top: 80px; padding-bottom: 0; align-items: center; }
.home-page .hero-copy { padding-bottom: 60px; }
.home-page .hero-band .eyebrow { font-size: 11px; margin-bottom: 28px; max-width: 100%; color: var(--bs-paper); border-top-color: var(--bs-paper); }
.home-page .hero h1 { font-size: clamp(46px, 5.6vw, 80px); line-height: 1.12; letter-spacing: -0.015em; color: var(--bs-paper); }
:lang(th) .home-page .hero h1 { line-height: 1.25; }
:lang(en) .home-page .hero h1 { font-size: clamp(40px, 4.4vw, 64px); }
.home-page .hero h1 .thin { white-space: nowrap; }
.home-page .hero h1 .thin { font-weight: 300; }
.hero-sub { margin-top: 18px; font-size: clamp(20px, 2.1vw, 28px); line-height: 1.4; font-weight: 300; }
.hero-sub strong { font-weight: 700; }
.home-page .hero-band .lead { font-size: 17px; margin-top: 22px; max-width: 31em; line-height: 1.8; color: rgba(255, 255, 255, .86); }
.home-page .cta-row { gap: 12px; margin-top: 32px; }
.home-page .btn { font-size: 16px; padding: 14px 24px; border-radius: var(--bs-radius-md); }
.btn-on-blue { background: var(--bs-paper); color: var(--bs-blue); }
.btn-on-blue:hover { background: var(--bs-grey); }
.home-page .hero-band .btn-ghost { border-color: rgba(255, 255, 255, .45); color: var(--bs-paper); }
.home-page .hero-band .btn-ghost:hover { border-color: var(--bs-paper); }
.home-page .hero-band .btn:focus-visible, .home-page .hero-band a:focus-visible, .hero-band button:focus-visible { outline-color: var(--bs-paper); }
.home-page .btn-ghost::after { content: ' ↗'; padding-left: 10px; }
.hero-art { position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; padding: 20px 22px; background: rgba(255, 255, 255, .08); border-radius: var(--bs-radius-lg); margin-bottom: 56px; min-width: 0; }
.art-top, .art-bottom { display: flex; justify-content: space-between; gap: 12px; font: 600 10px/1.5 var(--bs-font-label); letter-spacing: .08em; color: rgba(255, 255, 255, .8); }
.hero-mark { display: block; width: 60%; align-self: center; margin: 38px 0; }
.hero-spotlight { min-width: 0; width: 100%; max-width: 440px; justify-self: end; margin-bottom: 44px; border-radius: var(--bs-radius-lg); overflow: hidden; background: var(--bs-bg); color: var(--bs-text); box-shadow: 0 24px 60px rgba(0, 20, 80, .28); }
.spotlight-heading { display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; font-size: 13px; font-weight: 600; color: var(--bs-text-subtle); }
.spotlight-heading [data-slide-count] { flex: none; font-family: var(--bs-font-label); font-size: 12px; }
.spotlight-slides { display: grid; }
.spotlight-slide { grid-area: 1 / 1; min-width: 0; }
/* Inactive slides retain their size so captions never make the carousel jump. */
.spotlight-slide[hidden] { display: block; visibility: hidden; pointer-events: none; }
.spotlight-poster { display: block; aspect-ratio: 4 / 5; background: var(--bs-bg-raised); }
.spotlight-poster img { display: block; width: 100%; height: 100%; object-fit: contain; }
.spotlight-caption { padding: 16px 18px 18px; }
.spotlight-kind { font-size: 12px; font-weight: 700; color: var(--bs-text-link); }
.spotlight-caption h2 { font-size: 17px; font-weight: 700; line-height: 1.55; margin-top: 4px; overflow-wrap: anywhere; }
.spotlight-caption a { color: inherit; text-decoration: none; }
.spotlight-caption a:hover { color: var(--bs-text-link); }
.spotlight-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; border-top: 1px solid var(--bs-border); padding: 6px 10px; }
.spotlight-controls[hidden] { display: none; }
.spotlight-controls button { min-width: 36px; min-height: 40px; background: transparent; color: var(--bs-text); border: 0; border-radius: var(--bs-radius-sm); cursor: pointer; font: inherit; }
.spotlight-controls button:hover { background: var(--bs-bg-raised); }
.spotlight-controls button:focus-visible { outline: 2px solid var(--bs-text-link); outline-offset: 1px; }
.spotlight-dots { display: flex; flex-wrap: wrap; flex: 1; justify-content: center; }
.spotlight-dots button { min-width: 24px; padding: 5px; }
.spotlight-dots span { display: block; margin: auto; width: 6px; height: 6px; border-radius: 2px; background: var(--bs-text-faint); }
.spotlight-dots [aria-current="true"] span { width: 18px; background: var(--bs-text-link); }
.spotlight-controls .spotlight-pause { flex: 0 0 100%; font-size: 12px; color: var(--bs-text-subtle); min-height: 30px; }
.hero-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 24px; padding-block: 23px; border-top: 1px solid rgba(255, 255, 255, .28); font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .9); }
.hero-bottom > span:last-child { font: 700 12px/1.8 var(--bs-font-label); letter-spacing: .1em; }
.hero-bottom b { color: var(--bs-blue-light); padding-inline: 16px; }
.home-page section.band { padding-block: 72px; }
.home-page .section-label { margin-bottom: 36px; font-size: 11px; }
.home-page .section-label .num { margin-right: 12px; }
.home-page .section-label a { font-size: 15px; }
.feature-layout { display: grid; grid-template-columns: .8fr 1.4fr; gap: 70px; align-items: center; }
.home-page h2.section-title { font-size: clamp(28px, 3vw, 40px); line-height: 1.3; text-wrap: balance; }
:lang(th) .home-page h2.section-title { line-height: 1.4; }
.feature-intro .section-body { font-size: 17px; line-height: 1.8; }
.text-link { display: inline-flex; align-items: center; gap: 32px; color: var(--bs-text-link); font-weight: 700; text-decoration: none; margin-top: 28px; padding-bottom: 8px; border-bottom: 1px solid var(--bs-border); }
.text-link:hover { border-color: currentColor; }
.home-page .video-embed { border-radius: var(--bs-radius-lg); }
.home-page .video-title { font-size: 17px; line-height: 1.65; }
.home-events { background: var(--bs-bg-surface); }
.home-page .event-intro { margin-bottom: 34px; }
.home-page .event-card { background: var(--bs-bg); padding: 0; gap: 0; overflow: hidden; margin-bottom: 0; border-radius: var(--bs-radius-lg); align-items: stretch; }
.home-page .event-card .poster { width: 280px; flex: 0 0 280px; aspect-ratio: 4 / 5; object-fit: contain; border-radius: 0; }
.home-page .event-card .body { padding: 36px 44px; align-self: center; }
.home-page .event-card h3 { font-size: clamp(23px, 2.6vw, 32px); line-height: 1.5; max-width: 25em; }
.home-page .event-meta { font-size: 16px; }
.home-page .event-meta .mono { font-family: var(--bs-font-body); font-size: 15px; font-weight: 500; letter-spacing: 0; }
.home-page .event-card .desc { font-size: 16px; -webkit-line-clamp: 3; }
.home-page .chip { border-radius: var(--bs-radius-sm); font-size: 11px; }
.home-why > .wrap > .section-title { max-width: 20em; }
.home-why > .wrap > .section-body { max-width: 47em; line-height: 1.8; }
.home-page .points { gap: 32px; }
.home-why .point { border-top: 2px solid var(--bs-text-link); padding-top: 24px; }
.home-page .point .ref { font-size: 11px; }
.home-page .point h3 { font-size: 21px; line-height: 1.5; }
.home-page .point p { font-size: 16px; line-height: 1.8; color: var(--bs-text-subtle); }
.home-page .home-promise { position: relative; overflow: hidden; background: var(--bs-void); color: var(--bs-paper); border-top: none; padding-block: 80px 88px; }
.home-promise .section-label, .home-page .home-promise .point p, .home-promise .section-body { color: rgba(255, 255, 255, .86); }
.home-promise .section-label .num, .home-promise .point .ref { color: var(--bs-blue-light); }
.home-promise::after { content: ''; position: absolute; right: -70px; top: -70px; width: 220px; aspect-ratio: 1; border-radius: 24px; background: var(--bs-blue); pointer-events: none; }
.home-promise > .wrap { position: relative; z-index: 1; }
/* On the dark theme the page is already black, so the panel takes the brand blue. */
html[data-theme="dark"] .home-page .home-promise { background: var(--bs-blue); }
html[data-theme="dark"] .home-promise .section-label .num, html[data-theme="dark"] .home-promise .point .ref { color: var(--bs-paper); }
html[data-theme="dark"] .home-promise::after { background: var(--bs-void); }
.home-page .home-promise .section-title { font-size: clamp(32px, 4.2vw, 52px); max-width: 20em; margin-bottom: 25px; }
.home-promise .section-body { max-width: 46em; line-height: 1.8; }
.home-promise .point { border-color: rgba(255, 255, 255, .25); }
.home-promise .point .ref { font-size: 26px; margin-bottom: 20px; }
.home-page a:focus-visible { outline: 3px solid var(--bs-text-link); outline-offset: 5px; }
/* Slideshow: past-event slides may be a landscape recap photo rather than a poster. */
.spotlight-poster.is-photo img { object-fit: cover; }
.spotlight-when { color: var(--bs-text-subtle); }
/* Upcoming: the soonest event is the feature card; the rest are compact rows. */
.event-more { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 1px; background: var(--bs-border); border: 1px solid var(--bs-border); border-radius: var(--bs-radius-lg); overflow: hidden; }
.event-more a { display: flex; align-items: center; gap: 20px; padding: 14px 22px 14px 14px; background: var(--bs-bg); color: inherit; text-decoration: none; }
.event-more a:hover .em-title { color: var(--bs-text-link); }
.em-thumb { flex: 0 0 64px; aspect-ratio: 4 / 5; background: var(--bs-bg-raised); overflow: hidden; border-radius: var(--bs-radius-sm); }
.em-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.em-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.em-date { font: 600 12px/1.5 var(--bs-font-label); letter-spacing: .04em; color: var(--bs-text-subtle); }
.em-title { font-size: 17px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.em-go { color: var(--bs-text-link); font-size: 18px; }
.home-events .text-link { margin-top: 24px; }
/* Highlights: past events, recap cover photo first. */
.home-highlights > .wrap > .section-body { max-width: 40em; line-height: 1.8; }
.highlight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; margin-top: 40px; }
.highlight-card { display: flex; flex-direction: column; color: inherit; text-decoration: none; min-width: 0; }
.hl-media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--bs-bg-raised); overflow: hidden; margin-bottom: 16px; border-radius: var(--bs-radius-lg); }
.hl-media img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .35s ease; }
.hl-media.is-photo img { object-fit: cover; }
.hl-media .hl-mark { width: 40%; margin: auto; height: 100%; }
.highlight-card:hover .hl-media img { transform: scale(1.03); }
.hl-badge { position: absolute; left: 10px; bottom: 10px; background: var(--bs-blue); color: var(--bs-paper); font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: var(--bs-radius-sm); }
.hl-date { font: 600 12px/1.5 var(--bs-font-label); letter-spacing: .04em; color: var(--bs-text-subtle); }
.highlight-card h3 { font-size: 19px; font-weight: 700; line-height: 1.45; margin-top: 6px; overflow-wrap: anywhere; }
.highlight-card:hover h3 { color: var(--bs-text-link); }
.highlight-card p { font-size: 15px; line-height: 1.7; color: var(--bs-text-subtle); margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hl-cta { margin-top: 12px; color: var(--bs-text-link); font-weight: 700; font-size: 15px; }
@media (max-width: 960px) {
  body:has(.home-page) .wrap { padding-inline: 28px; }
  .home-page .home-hero { column-gap: 32px; padding-top: 48px; grid-template-columns: 1.2fr 1fr; }
  .home-page .hero h1 { font-size: 54px; }
  .feature-layout { gap: 32px; }
  body:has(.home-page) .header-inner { flex-wrap: wrap; gap: 18px; }
  body:has(.home-page) .header-right { flex: 1; justify-content: flex-end; gap: 10px; }
  .home-page .event-card .poster { width: 230px; flex-basis: 230px; }
  .home-page .event-card .body { padding: 28px; }
}
@media (max-width: 960px) {
  .highlight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  body:has(.home-page) .wrap { padding-inline: 22px; }
  body:has(.home-page) .header-inner { padding-block: 18px 10px; }
  body:has(.home-page) .header-inner .logo img { height: 42px; }
  body:has(.home-page) .header-right { display: contents; }
  body:has(.home-page) nav.site-nav { order: 3; width: 100%; justify-content: space-between; }
  body:has(.home-page) nav.site-nav a { padding: 8px 10px; }
  body:has(.home-page) .lang-toggle { margin-left: auto; }
  body:has(.home-page) .header-inner { gap: 10px; }
  .home-page .home-hero { grid-template-columns: 1fr; padding-top: 38px; }
  .home-page .hero-copy { padding-bottom: 34px; }
  .home-page .hero h1 { font-size: clamp(42px, 12vw, 60px); }
  .hero-squares span:nth-child(n+3) { display: none; }
  .home-page .hero-band .eyebrow { font-size: 10px; letter-spacing: .055em; margin-bottom: 24px; }
  .home-page .hero-band .lead { font-size: 16px; }
  .home-page .btn { font-size: 15px; padding: 13px 17px; }
  .hero-art { min-height: 260px; margin-bottom: 30px; padding: 16px; }
  .hero-spotlight { max-width: 440px; justify-self: center; margin-bottom: 30px; }
  .hero-mark { width: 160px; margin-block: 20px; }
  .hero-bottom { flex-direction: column; gap: 8px; padding-block: 20px; }
  .hero-bottom b { padding-inline: 10px; }
  .home-page section.band { padding-block: 44px; }
  .feature-layout { grid-template-columns: 1fr; gap: 28px; }
  .home-page .section-label { font-size: 10px; gap: 10px; margin-bottom: 26px; letter-spacing: .06em; }
  .home-page .section-label .num { margin-right: 4px; }
  .home-page .section-label a { font-size: 14px; }
  .home-page .event-card { flex-direction: column; }
  .home-page .event-card .poster { width: 100%; flex: none; max-height: 480px; aspect-ratio: 4 / 5; }
  .home-page .event-card .body { padding: 25px; }
  .home-page .points { grid-template-columns: 1fr; gap: 28px; margin-top: 32px; }
  .home-page .home-promise { padding-block: 48px; }
  .home-promise .point { display: grid; grid-template-columns: 42px 1fr; gap: 16px; align-items: start; }
  .home-promise .point .ref { font-size: 22px; margin: 0; }
  .home-promise::after { width: 120px; right: -50px; top: -50px; border-radius: 16px; }
  .highlight-grid { grid-template-columns: 1fr; gap: 32px; margin-top: 28px; }
  .event-more a { gap: 14px; padding: 12px 14px 12px 12px; }
  .em-thumb { flex-basis: 52px; }
  .em-title { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body:has(.home-page), .home-page * { transition: none; }
  .highlight-card:hover .hl-media img { transform: none; }
}