/* Easy theme layer: deep Voiello blue, wave cyan, and warm gold mood tone. */
:root {
  --paper: #09124f;
  --surface: #f2f9ff;
  --surface-strong: #c7ebff;
  --ink: #071047;
  --muted: #667aa5;
  --line: #d3ae63;
  --deep-green: #071047;
  --leaf: #0085c8;
  --red-clay: #0b1c66;
  --ochre: #d3ae63;
  --blue-gray: #79c7f1;
  --violet: #11165e;
  --gold: #d3ae63;
  --cream: #f2f9ff;
  --shadow: 0 22px 62px rgba(7, 16, 71, 0.42);
}

body {
  background:
    radial-gradient(ellipse at 72% 18%, rgba(121, 199, 241, 0.62) 0 11%, transparent 32%),
    radial-gradient(ellipse at 22% 58%, rgba(0, 133, 200, 0.5) 0 16%, transparent 38%),
    linear-gradient(150deg, transparent 0 24%, rgba(0, 133, 200, 0.62) 24.2%, transparent 32% 58%, rgba(121, 199, 241, 0.42) 58.2%, transparent 64%),
    linear-gradient(180deg, #11165e 0%, #071047 54%, #09124f 100%);
}

.topbar {
  background:
    linear-gradient(150deg, transparent 0 74%, rgba(121, 199, 241, 0.64) 74.2%, transparent 80%),
    linear-gradient(90deg, rgba(7, 16, 71, 0.98) 0%, rgba(11, 28, 102, 0.98) 58%, rgba(0, 133, 200, 0.94) 100%);
  border-bottom: 2px solid rgba(211, 174, 99, 0.86);
  color: #f2f9ff;
  box-shadow: 0 18px 54px rgba(7, 16, 71, 0.38);
}

.brand-mark {
  background:
    linear-gradient(135deg, transparent 0 44%, rgba(211, 174, 99, 0.92) 44.5%, transparent 48%),
    linear-gradient(135deg, #0085c8 0%, #071047 74%);
  border: 1px solid rgba(242, 249, 255, 0.9);
  color: #f2f9ff;
}

.brand-block h1 {
  color: #f2f9ff;
  text-shadow: 0 1px 14px rgba(7, 16, 71, 0.45);
}

.brand-block p {
  color: #ead097;
}

.topbar .ghost-link,
.topbar .secondary-button {
  border-color: rgba(211, 174, 99, 0.72);
  background: rgba(7, 16, 71, 0.34);
  color: #f2f9ff;
}

.topbar .secondary-button {
  background: #d3ae63;
  border-color: #ead097;
  color: #071047;
}

.filter-panel,
.detail-panel,
.summary-strip > div,
.motif-card,
.filter-chip,
.empty-state,
.detail-field,
.gallery-item {
  background: rgba(242, 249, 255, 0.94);
  border-color: rgba(211, 174, 99, 0.42);
  color: #071047;
}

.filter-panel,
.detail-panel {
  background:
    linear-gradient(rgba(242, 249, 255, 0.94), rgba(242, 249, 255, 0.94)),
    repeating-linear-gradient(150deg, rgba(0, 133, 200, 0.08) 0 1px, transparent 1px 22px);
}

.summary-strip > div {
  background:
    linear-gradient(150deg, rgba(0, 133, 200, 0.18) 0 18%, transparent 18.4%),
    linear-gradient(180deg, #f2f9ff 0%, #c7ebff 100%);
}

.summary-strip > div:nth-child(2),
.summary-strip > div:nth-child(4),
.data-note {
  background: linear-gradient(180deg, #ead097 0%, #d3ae63 100%);
  border-color: rgba(211, 174, 99, 0.68);
}

.summary-strip strong,
.data-note strong,
.detail-section h3 {
  color: #071047;
}

.metric-label,
.motif-kicker,
.motif-subtitle,
.motif-meta,
.detail-header p,
.detail-field span,
.gallery-item span {
  color: #667aa5;
}

.motif-excerpt,
.detail-section p {
  color: #23325e;
}

.motif-card {
  box-shadow: 0 16px 44px rgba(7, 16, 71, 0.18);
}

.motif-card:hover,
.motif-card.is-selected {
  border-color: #d3ae63;
  box-shadow: 0 0 0 2px rgba(211, 174, 99, 0.36), var(--shadow);
}

.motif-media,
.detail-visual,
.gallery-item img,
.gallery-missing {
  background:
    radial-gradient(ellipse at 72% 30%, rgba(121, 199, 241, 0.66) 0 18%, transparent 42%),
    linear-gradient(150deg, transparent 0 62%, rgba(211, 174, 99, 0.58) 62.4%, transparent 64%),
    linear-gradient(145deg, #071047 0%, #11165e 45%, #0085c8 100%);
}

.motif-media img,
.detail-visual img,
.gallery-item img {
  padding: 8px;
}

.motif-visual::before {
  background:
    radial-gradient(ellipse at 34% 58%, rgba(0, 133, 200, 0.5) 0 18%, transparent 44%),
    repeating-linear-gradient(150deg, rgba(211, 174, 99, 0.22) 0 2px, transparent 2px 18px);
}

.motif-visual::after {
  border-color: rgba(121, 199, 241, 0.42);
}

.category-nat .motif-visual {
  background: #0085c8;
}

.category-fau .motif-visual {
  background: linear-gradient(145deg, #071047 0%, #0085c8 100%);
}

.category-geo .motif-visual {
  background: #79c7f1;
}

.category-sac .motif-visual {
  background: #11165e;
}

.motif-code {
  border-color: rgba(211, 174, 99, 0.72);
  background: rgba(7, 16, 71, 0.24);
  color: #f2f9ff;
}

.image-badge,
.status-badge,
.image-zoom-button,
.secondary-button,
.copy-link-button,
.segmented button.is-active {
  background: #d3ae63;
  border-color: #ead097;
  color: #071047;
}

.ghost-link,
.detail-link,
.close-detail {
  background: rgba(242, 249, 255, 0.92);
  border-color: rgba(211, 174, 99, 0.48);
  color: #071047;
}

.image-zoom-button:hover,
.gallery-item:hover {
  border-color: #d3ae63;
  box-shadow: 0 0 0 2px rgba(211, 174, 99, 0.32);
}

.tag {
  background: rgba(0, 133, 200, 0.12);
  color: #0b1c66;
}

.search-box input,
select,
.segmented button {
  background: rgba(242, 249, 255, 0.9);
  border-color: rgba(211, 174, 99, 0.42);
  color: #071047;
}

.search-box input::placeholder {
  color: rgba(102, 122, 165, 0.78);
}

.search-box input:focus,
select:focus,
button:focus-visible,
a:focus-visible {
  outline-color: rgba(211, 174, 99, 0.72);
}

.image-modal {
  background: rgba(7, 16, 71, 0.9);
}

.image-modal__dialog {
  background: #f2f9ff;
  border-color: rgba(211, 174, 99, 0.56);
}

.image-modal__bar {
  background:
    linear-gradient(150deg, transparent 0 82%, rgba(211, 174, 99, 0.86) 82.2%, transparent 83%),
    linear-gradient(90deg, #071047 0%, #11165e 58%, #0085c8 100%);
}

/* Hero proportion patch, based on the uploaded layout sketch and color palette. */
:root {
  --tspl-coral-red: #ff374b;
  --tspl-sunglow-yellow: #ffd741;
  --tspl-hero-line: #b98a3d;
  --tspl-ornament-gold: #b98a3d;
  --tspl-ornament-gold-light: #d7b46a;
  --tspl-ornament-gold-dark: #735029;
  --tspl-sky-blue: #4196ff;
  --tspl-deep-blue: #192850;
}

.topbar {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(420px, 0.95fr) minmax(520px, 1.05fr) !important;
  align-items: center !important;
  gap: clamp(28px, 5vw, 80px) !important;
  width: 100% !important;
  min-height: clamp(430px, 54vh, 680px) !important;
  padding: clamp(44px, 6vw, 92px) clamp(28px, 6vw, 96px) !important;
  border-bottom: 10px solid var(--tspl-hero-line) !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(25, 40, 80, 0.98) 0%, rgba(25, 40, 80, 0.92) 48%, rgba(65, 150, 255, 0.35) 100%),
    var(--tspl-deep-blue) !important;
}

.topbar::before {
  content: "" !important;
  position: absolute !important;
  right: clamp(28px, 6vw, 96px) !important;
  top: clamp(44px, 6vw, 92px) !important;
  bottom: clamp(44px, 6vw, 92px) !important;
  width: min(46vw, 760px) !important;
  border: 10px solid rgba(255, 255, 255, 0.85) !important;
  background:
    linear-gradient(135deg, rgba(255, 55, 75, 0.82), rgba(185, 138, 61, 0.55) 48%, rgba(65, 150, 255, 0.75)),
    var(--tspl-sky-blue) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28) !important;
}

.topbar::after {
  content: "Symbol\\A Pattern\\A Archive" !important;
  white-space: pre-line !important;
  position: absolute !important;
  right: calc(clamp(28px, 6vw, 96px) + min(6vw, 72px)) !important;
  top: calc(clamp(44px, 6vw, 92px) + min(5vw, 64px)) !important;
  bottom: calc(clamp(44px, 6vw, 92px) + min(5vw, 64px)) !important;
  width: min(34vw, 560px) !important;
  display: grid !important;
  place-items: center !important;
  padding: 32px !important;
  color: #ffffff !important;
  background: rgba(25, 40, 80, 0.72) !important;
  border: 2px solid rgba(255, 255, 255, 0.54) !important;
  font-size: clamp(30px, 4vw, 70px) !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  text-align: center !important;
  z-index: 1 !important;
}

.brand-block {
  position: relative !important;
  z-index: 2 !important;
  align-items: flex-start !important;
  max-width: 760px !important;
}

.brand-mark {
  width: clamp(72px, 8vw, 118px) !important;
  height: clamp(72px, 8vw, 118px) !important;
  border: 2px solid rgba(255, 255, 255, 0.78) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(135deg, rgba(65, 150, 255, 0.88), rgba(25, 40, 80, 1) 62%),
    var(--tspl-deep-blue) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22) !important;
}

.brand-block h1 {
  max-width: 780px !important;
  margin: 0 !important;
  color: #ffffff !important;
  font-size: clamp(46px, 5.6vw, 92px) !important;
  font-weight: 950 !important;
  line-height: 1.02 !important;
}

.brand-block p {
  max-width: 720px !important;
  margin-top: 18px !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: clamp(20px, 1.7vw, 28px) !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

.topbar-actions {
  position: relative !important;
  z-index: 3 !important;
  align-self: end !important;
  justify-self: end !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 14px !important;
  max-width: min(44vw, 760px) !important;
}

.topbar-actions .ghost-link,
.topbar-actions .secondary-button {
  min-height: 52px !important;
  border-radius: 16px !important;
  border: 2px solid rgba(255, 255, 255, 0.5) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

.topbar-actions .secondary-button {
  background:
    linear-gradient(180deg, var(--tspl-ornament-gold-light) 0%, var(--tspl-ornament-gold) 58%, var(--tspl-ornament-gold-dark) 100%) !important;
  border-color: var(--tspl-ornament-gold-light) !important;
  color: var(--tspl-deep-blue) !important;
}

@media (max-width: 980px) {
  .topbar {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    padding: 42px 22px !important;
  }

  .topbar::before,
  .topbar::after {
    position: relative !important;
    inset: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    min-height: 280px !important;
  }

  .topbar::after {
    margin-top: -280px !important;
  }

  .topbar-actions {
    justify-self: start !important;
    justify-content: flex-start !important;
    max-width: 100% !important;
  }
}

/* TSPL: keep SVG/vector previews readable on a clean paper background. */
.gallery-item--vector {
  background: #fffaf0 !important;
  border-color: rgba(211, 174, 99, 0.78) !important;
}

.gallery-item--vector img {
  background: #ffffff !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 16px !important;
  filter: contrast(1.18) saturate(0.92) !important;
}

.gallery-item--vector span {
  background: #fffaf0 !important;
  color: #192850 !important;
  font-weight: 800 !important;
}

.image-modal img[src$="_vector.svg"] {
  background: #ffffff !important;
  padding: 24px !important;
  object-fit: contain !important;
}

.image-modal.is-vector-modal {
  background: rgba(7, 16, 71, 0.72) !important;
}

.image-modal.is-vector-modal .image-modal__dialog {
  background: #ffffff !important;
  border-color: rgba(211, 174, 99, 0.82) !important;
}

.image-modal.is-vector-modal .image-modal__bar {
  background:
    linear-gradient(90deg, #192850 0%, #0b4b88 100%) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(211, 174, 99, 0.62) !important;
}

.image-modal.is-vector-modal img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  background: #ffffff !important;
  padding: clamp(16px, 3vw, 42px) !important;
  object-fit: contain !important;
  object-position: center center !important;
  filter: contrast(1.2) saturate(0.92) !important;
}

/* TSPL: make photographic images fill their frames; keep vector previews separate. */
.motif-media > img:not([src$=".svg"]),
.detail-visual > img:not([src$=".svg"]),
.gallery-item:not(.gallery-item--vector) img {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: #f2f9ff !important;
}

.gallery-item:not(.gallery-item--vector) img {
  aspect-ratio: 4 / 3 !important;
}

.gallery-item--vector img {
  padding: 16px !important;
  object-fit: contain !important;
  background: #ffffff !important;
}

/* TSPL hero ornament: replace the blue hero field and remove the Main Image panel. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Noto Sans Thai", "Tahoma", "Arial", sans-serif;
  line-height: 1.55;
}

.topbar {
  grid-template-columns: minmax(360px, 740px) minmax(240px, 1fr) !important;
  background:
    linear-gradient(90deg, rgba(2, 8, 28, 0.82) 0%, rgba(2, 8, 28, 0.58) 38%, rgba(2, 8, 28, 0.18) 70%, rgba(2, 8, 28, 0.06) 100%),
    url("tspl-hero-ornament.png") center / cover no-repeat !important;
}

.topbar::before,
.topbar::after {
  width: 0 !important;
  min-height: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
  content: none !important;
  display: none !important;
}

.topbar-actions {
  grid-column: 2 !important;
  max-width: min(44vw, 760px) !important;
}

.topbar-actions .ghost-link {
  background: rgba(7, 16, 71, 0.58) !important;
  backdrop-filter: blur(8px);
}

@media (max-width: 980px) {
  .topbar {
    grid-template-columns: 1fr !important;
    background-position: 58% center !important;
  }

  .topbar-actions {
    grid-column: auto !important;
    max-width: 100% !important;
  }
}

/* TSPL homepage logo: place the official mark in the upper Hero brand area. */
.brand-logo-link {
  width: clamp(96px, 10vw, 154px) !important;
  height: clamp(96px, 10vw, 154px) !important;
  flex: 0 0 auto !important;
  display: grid !important;
  place-items: center !important;
  padding: clamp(8px, 1vw, 14px) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 2px solid rgba(211, 174, 99, 0.74) !important;
  box-shadow: 0 18px 44px rgba(7, 16, 71, 0.28) !important;
  text-decoration: none !important;
}

.brand-logo {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.brand-copy {
  min-width: 0 !important;
}

@media (max-width: 980px) {
  .brand-block {
    align-items: center !important;
  }

  .brand-logo-link {
    width: 88px !important;
    height: 88px !important;
    border-radius: 20px !important;
  }
}

@media (max-width: 560px) {
  .brand-block {
    align-items: flex-start !important;
    gap: 14px !important;
  }

  .brand-logo-link {
    width: 72px !important;
    height: 72px !important;
    padding: 7px !important;
  }
}

/* TSPL sponsor footer: place support logos at the upper footer area. */
.tspl-site-footer {
  margin-top: clamp(34px, 5vw, 72px) !important;
  border-top: 10px solid var(--tspl-hero-line, #b98a3d) !important;
  background:
    linear-gradient(180deg, rgba(7, 16, 71, 0.96) 0%, rgba(9, 18, 79, 1) 100%),
    #071047 !important;
  color: #f2f9ff !important;
}

.sponsor-footer {
  display: grid !important;
  grid-template-columns: minmax(220px, 0.28fr) minmax(0, 1fr) !important;
  gap: clamp(20px, 3vw, 42px) !important;
  align-items: center !important;
  width: min(100%, 1720px) !important;
  margin: 0 auto !important;
  padding: clamp(28px, 4vw, 54px) clamp(22px, 5vw, 78px) !important;
  background:
    linear-gradient(90deg, rgba(242, 249, 255, 0.98) 0%, rgba(255, 255, 255, 0.96) 100%) !important;
  color: #071047 !important;
}

.sponsor-footer__intro p {
  margin: 0 0 8px !important;
  color: #b98a3d !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
}

.sponsor-footer__intro h2 {
  margin: 0 !important;
  color: #071047 !important;
  font-size: 28px !important;
  font-weight: 950 !important;
  line-height: 1.18 !important;
}

.sponsor-footer__grid {
  counter-reset: sponsor-order !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(120px, 1fr)) !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.sponsor-card {
  counter-increment: sponsor-order !important;
  position: relative !important;
  display: grid !important;
  grid-template-rows: 132px auto !important;
  align-items: center !important;
  min-width: 0 !important;
  min-height: 204px !important;
  padding: 18px 14px 14px !important;
  border: 1px solid rgba(211, 174, 99, 0.46) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: 0 14px 34px rgba(7, 16, 71, 0.12) !important;
}

.sponsor-card::before {
  content: counter(sponsor-order) !important;
  position: absolute !important;
  left: 10px !important;
  top: 10px !important;
  width: 24px !important;
  height: 24px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: #071047 !important;
  color: #ffd741 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.sponsor-card img {
  display: block !important;
  width: 100% !important;
  max-width: 180px !important;
  max-height: 118px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}

.sponsor-card--fund img,
.sponsor-card--faculty img {
  max-height: 132px !important;
}

.sponsor-card--nu img {
  max-width: 126px !important;
  max-height: 126px !important;
}

.sponsor-card--ppd img {
  max-width: 192px !important;
  max-height: 96px !important;
}

.sponsor-card span {
  display: block !important;
  align-self: end !important;
  min-height: 42px !important;
  color: #23325e !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

.tspl-site-footer__bottom {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: min(100%, 1720px) !important;
  margin: 0 auto !important;
  padding: 18px clamp(22px, 5vw, 78px) 24px !important;
  color: rgba(242, 249, 255, 0.82) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

.tspl-site-footer__bottom strong {
  color: #ffd741 !important;
}

@media (max-width: 1180px) {
  .sponsor-footer {
    grid-template-columns: 1fr !important;
  }

  .sponsor-footer__grid {
    grid-template-columns: repeat(3, minmax(140px, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .sponsor-footer__grid {
    grid-template-columns: repeat(2, minmax(130px, 1fr)) !important;
  }

  .sponsor-card {
    grid-template-rows: 118px auto !important;
    min-height: 190px !important;
  }
}

@media (max-width: 440px) {
  .sponsor-footer__grid {
    grid-template-columns: 1fr !important;
  }
}