/* Base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: #0b0b0b;
  color: #e8e8e8;
  font-family: "Srisakdi", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Thai", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Full-screen repeating pattern background */
.bg-pattern {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("https://www.tabba.in.th/images/bg-pattern.png"); /* ใส่ไฟล์แพทเทิร์นที่ต่อกันได้ */
  background-repeat: repeat;
  background-position: top left; /* ป้องกันรอยต่อให้ตรงกันทุกขนาดจอ */
  background-size: 5%; /* ใช้ขนาดดั้งเดิมของแพทเทิร์นเพื่อความเนียน */
  opacity: 0.35; /* โทนดำไว้อาลัยแบบบาง ๆ */
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Layout */
.wrapper {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
  position: relative;
  z-index: 1; /* อยู่เหนือพื้นหลังแพทเทิร์น */
}

.content {
  display: grid;
  justify-items: center;
  gap: 20px;
  width: min(84vw, 445px);
}

.figure { margin: 0; }

.portrait {
  display: block;
  width: min(84vw, 445px);
  max-height: min(72vh, 80svh);
  height: auto;
  object-fit: contain;
  border-radius: 22px;
  /* Metallic gradient border (default: silver) */
  --border-gradient: linear-gradient(
    135deg,
    #f7f8fa 0%,
    #d9dde2 25%,
    #aeb3b8 50%,
    #d0d4d9 75%,
    #f7f8fa 100%
  );
  border: 2px solid transparent; /* ใช้ร่วมกับ background-clip เพื่อทำกรอบไล่สี */
  background:
    linear-gradient(#0f0f0f, #0f0f0f) padding-box,
    var(--border-gradient) border-box;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06) inset,
    0 12px 40px rgba(0,0,0,0.65);
}

/* Gold variant: เพิ่มคลาส .gold ให้รูปเพื่อเปลี่ยนเป็นกรอบทอง */
.portrait.gold {
  --border-gradient: linear-gradient(
    135deg, 
    #f2eee3 0%, 
    #eae0bc 22%, 
    #d6caa4 50%, 
    #a09a7c 78%, 
    #ddd1ac 100%);
}

/* Button */
.cta {
  font-size: 26px;
  font-family: "Srisakdi", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Thai", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;
  color: #f5f5f5;
  background: linear-gradient(180deg, #1a1a1a, #101010);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
  transition: transform 120ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  will-change: transform;
}

.cta:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #222, #131313);
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 10px 26px rgba(0,0,0,0.6);
}

.cta:active {
  transform: translateY(0);
  background: #0f0f0f;
}

.cta:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.18),
    0 0 0 6px rgba(255,255,255,0.08);
}

/* Small screens tweaks */
@media (max-width: 420px) {
  /* .portrait { border-radius: 10px; } */
  .cta { padding: 11px 16px; }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .cta { transition: none; }
}