/* Meow Zzz — shared styles for index.html and th.html.
   Direction: luxury night. A deep aubergine sky with real depth (layered light, a fine star
   field), champagne gold for hairlines and actions, and the rounded Mitr for display,
   echoing the MEOW ZZZ lettering on the logo and packaging.
   Brand motifs come from the logo: the four-point sparkle and the moon's rings. */
:root {
  color-scheme: dark;
  --bg: #16132d;
  --bg-top: #1e1a3f;
  --raise: #231f49;
  --glow: #43378c;
  --text: #f4ecdf;
  --muted: #bcb0dc;
  --ink: #1a1636;
  --gold: #e2c178;
  --gold-soft: #f2deae;
  --hair: rgba(226, 193, 120, 0.3);
  --hair-dim: rgba(188, 176, 220, 0.2);
  --font-display: "Mitr", "Sukhumvit Set", "Thonburi", system-ui, sans-serif;
  --font-body: "Anuphan", "Sukhumvit Set", "Thonburi", system-ui, sans-serif;
  --gutter: clamp(20px, 5vw, 64px);
  --wrap: 1180px;
  --section: clamp(88px, 14vh, 160px);
  --sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.8 7 17 11.2 24 12 17 12.8 12.8 17 12 24 11.2 17 7 12.8 0 12 7 11.2 11.2 7 12 0Z'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html {
  scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%;
  background: var(--bg);
  scrollbar-color: #4a4180 var(--bg);
}
body {
  margin: 0;
  color: var(--text);
  font: 400 1.0625rem/1.75 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
/* The sky: two pools of violet light over a vertical fall-off, fixed behind the page. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(70vw 60vh at 82% 0%, rgba(84, 68, 170, 0.55) 0%, rgba(84, 68, 170, 0) 70%),
    radial-gradient(60vw 70vh at -10% 55%, rgba(60, 46, 130, 0.5) 0%, rgba(60, 46, 130, 0) 70%),
    linear-gradient(var(--bg-top) 0%, var(--bg) 60%);
}
/* A fine, still star field. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.8;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, var(--gold-soft) 50%, transparent 51%),
    radial-gradient(1px 1px at 27% 62%, #d8cdf5 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 41% 9%, #d8cdf5 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 78%, var(--gold-soft) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 66% 33%, #d8cdf5 50%, transparent 51%),
    radial-gradient(1px 1px at 79% 88%, #d8cdf5 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 91% 14%, var(--gold-soft) 50%, transparent 51%),
    radial-gradient(1px 1px at 96% 57%, #d8cdf5 50%, transparent 51%),
    radial-gradient(1px 1px at 5% 84%, #d8cdf5 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 34% 38%, var(--gold-soft) 50%, transparent 51%),
    radial-gradient(1px 1px at 48% 51%, #d8cdf5 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 6%, #d8cdf5 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 85% 44%, #d8cdf5 50%, transparent 51%),
    radial-gradient(1px 1px at 19% 45%, #d8cdf5 50%, transparent 51%),
    radial-gradient(1px 1px at 60% 96%, var(--gold-soft) 50%, transparent 51%);
}
::selection { background: var(--gold); color: var(--ink); }
h1, h2, h3, h4, p, dl, dd { margin: 0; text-wrap: pretty; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.18; text-wrap: balance; }
:lang(th) h1, :lang(th) h2, :lang(th) h3, :lang(th) h4 { line-height: 1.45; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 4px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 4px; border-radius: 4px; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 30px;
  font: 500 0.875rem/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent; border-radius: 999px;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s;
}
:lang(th) .btn { font-size: 1rem; letter-spacing: 0.01em; }
.btn-moon { background: linear-gradient(180deg, var(--gold-soft) 0%, var(--gold) 100%); color: var(--ink); box-shadow: 0 10px 28px -12px rgba(226, 193, 120, 0.7); }
.btn-moon:hover { background: var(--gold-soft); box-shadow: 0 14px 32px -12px rgba(226, 193, 120, 0.9); }
.btn-ghost { border-color: var(--hair); color: var(--gold-soft); }
.btn-ghost:hover { border-color: var(--gold-soft); }
.btn-sm { min-height: 40px; padding: 0 20px; font-size: 0.75rem; box-shadow: none; }
:lang(th) .btn-sm { font-size: 0.9375rem; }

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 10;
  background: rgba(24, 21, 50, 0.86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair-dim);
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.brand {
  display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
  font: 500 1.125rem/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-soft);
}
.brand img { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 1px var(--hair); }
.top nav { display: flex; align-items: center; gap: clamp(16px, 2.6vw, 36px); }
.top nav a:not(.btn) { text-decoration: none; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); transition: color 0.2s; }
:lang(th) .top nav a:not(.btn):not(.lang) { font-size: 0.9375rem; letter-spacing: 0.01em; }
.top nav a:not(.btn):hover { color: var(--gold-soft); }
.top nav a.lang { color: var(--gold-soft); letter-spacing: 0.06em; }

/* ---------- hero ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center;
  gap: clamp(8px, 3vw, 48px);
  padding-block: clamp(32px, 6vh, 72px);
  min-height: min(84svh, 780px);
}
.hero h1 { font-size: clamp(2.7rem, 5.6vw, 4.5rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; }
.hero h1 em { font-style: normal; color: var(--gold-soft); }
:lang(th) .hero h1 { line-height: 1.3; letter-spacing: 0; }
.hero .lede { margin-top: 28px; max-width: 29rem; font-size: 1.125rem; font-weight: 300; color: #ddd3ee; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 40px; }

.viewer { position: relative; height: min(68svh, 640px); min-height: 340px; isolation: isolate; }
/* The moon's rings: a lit disc and two fine gold orbits behind the model. */
.viewer::before, .viewer::after {
  content: ""; position: absolute; left: 50%; top: 46%; z-index: -1; pointer-events: none;
  aspect-ratio: 1; border-radius: 50%; translate: -50% -50%;
}
.viewer::before {
  width: min(86%, 520px);
  border: 1px solid var(--hair);
  background: radial-gradient(closest-side, rgba(104, 88, 196, 0.5) 0%, rgba(104, 88, 196, 0.16) 62%, rgba(104, 88, 196, 0) 100%);
  animation: breathe 9s ease-in-out infinite;
}
.viewer::after { width: min(108%, 660px); border: 1px solid rgba(226, 193, 120, 0.13); }
@keyframes breathe { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } }
#stage { position: absolute; inset: 0; }
#stage canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y !important; }
#stage canvas:active { cursor: grabbing; }
#status { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--muted); pointer-events: none; }
#status[hidden] { display: none; }
.viewer-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: center; align-items: center; gap: 14px;
  font-size: 0.8125rem; color: var(--muted); pointer-events: none;
}
.viewer-bar button {
  pointer-events: auto; cursor: pointer;
  font: 400 0.8125rem var(--font-body); color: var(--gold-soft);
  background: none; border: 0; border-bottom: 1px solid var(--hair); padding: 2px 0;
}
.viewer-bar button:hover { border-color: var(--gold-soft); }

/* ---------- three facts under the hero ---------- */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--hair); }
.facts > div { padding: 32px clamp(16px, 3vw, 40px); border-left: 1px solid var(--hair-dim); text-align: center; }
.facts > div:first-child { border-left: 0; }
.facts dt { font: 400 1.1875rem/1.3 var(--font-display); color: var(--gold-soft); }
:lang(th) .facts dt { line-height: 1.5; }
.facts dd { margin-top: 6px; color: var(--muted); font-size: 0.9375rem; }

/* ---------- sections ---------- */
section.block { padding-block: var(--section); }
.head { text-align: center; }
.head::before {
  content: ""; display: block; width: 20px; height: 20px; margin: 0 auto 24px;
  background: var(--gold); -webkit-mask: var(--sparkle) center / contain no-repeat; mask: var(--sparkle) center / contain no-repeat;
}
.head h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); max-width: 20ch; margin-inline: auto; }
.head .intro { margin: 18px auto 0; max-width: 34rem; color: var(--muted); font-weight: 300; font-size: 1.125rem; }

/* ---------- products ---------- */
.way { margin-top: clamp(64px, 10vh, 104px); }
.way-head { display: flex; align-items: baseline; gap: 20px; margin-bottom: 36px; }
.way-head h3 { font-size: 1.625rem; color: var(--gold-soft); white-space: nowrap; }
.way-head::after { content: ""; flex: 1; order: 1; align-self: center; border-top: 1px solid var(--hair); }
.way-head p { order: 2; color: var(--muted); font-size: 0.9375rem; text-align: right; max-width: 22rem; }
.items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px clamp(28px, 4vw, 56px); }
/* Each photo is matted: a fine gold line set off from the print, like a framed plate. */
.item { display: flex; flex-direction: column; padding: 9px; }
.item img {
  width: 100%; aspect-ratio: 1; object-fit: cover; background: #e9dfd0;
  border-radius: 4px;
  outline: 1px solid var(--hair); outline-offset: 8px;
  filter: saturate(0.92) brightness(0.95);
  box-shadow: 0 32px 60px -28px rgba(6, 4, 22, 0.85);
  transition: outline-color 0.3s, filter 0.3s;
}
.item:hover img { outline-color: var(--gold); filter: none; }
.item .body { display: flex; flex-direction: column; flex: 1; padding: 34px 2px 0; }
.item h4 { font-size: 1.375rem; line-height: 1.3; }
.item .desc { margin-top: 10px; color: var(--muted); max-width: 30rem; }
.item .spec { margin-top: 16px; font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
:lang(th) .item .spec { font-size: 0.9375rem; letter-spacing: 0.01em; }
.item.wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: clamp(28px, 5vw, 72px); }
.item.wide img { width: 52%; aspect-ratio: 4 / 3; }
.item.wide .body { flex: 1; padding: 0; }

/* ---------- blue lotus ---------- */
.band { background: rgba(12, 9, 32, 0.42); border-block: 1px solid var(--hair); }
.lotus { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(32px, 7vw, 104px); }
.lotus .mark { border-radius: 50%; padding: 12px; border: 1px solid var(--hair); max-width: 440px; box-shadow: 0 40px 80px -40px rgba(6, 4, 22, 0.9); }
.lotus .mark img { width: 100%; border-radius: 50%; }
.lotus .head { text-align: left; }
.lotus .head::before { margin-inline: 0; }
.lotus .head h2 { margin-inline: 0; }
.lotus .head p { margin-top: 20px; max-width: 35rem; color: var(--muted); }
.lotus .head p em { font-style: italic; color: var(--text); }
.specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--hair); }
.specs dt { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
:lang(th) .specs dt { font-size: 0.875rem; letter-spacing: 0.01em; }
.specs dd { margin-top: 6px; font: 400 1.125rem/1.35 var(--font-display); color: var(--gold-soft); }
:lang(th) .specs dd { line-height: 1.5; }

/* ---------- how to brew ---------- */
.steps { list-style: none; margin: clamp(48px, 7vh, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 4vw, 56px); }
.steps li { padding-top: 28px; border-top: 1px solid var(--hair); }
.steps .fig { display: flex; align-items: baseline; gap: 12px; }
.steps .fig b { font: 400 3.5rem/1 var(--font-display); font-variant-numeric: lining-nums; color: var(--gold-soft); }
.steps .fig span { color: var(--muted); font-size: 0.875rem; }
.steps h3 { margin-top: 22px; font-size: 1.25rem; }
.steps p { margin-top: 8px; color: var(--muted); }
.care { margin: clamp(48px, 7vh, 72px) auto 0; max-width: 46rem; text-align: center; font-size: 0.875rem; line-height: 1.7; color: var(--muted); }
.care strong { display: block; margin-bottom: 6px; color: var(--gold-soft); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.75rem; }
:lang(th) .care strong { font-size: 0.9375rem; letter-spacing: 0.01em; }

/* ---------- contact ---------- */
.contact {
  position: relative; overflow: hidden;
  padding: clamp(64px, 12vh, 128px) clamp(24px, 5vw, 64px); text-align: center;
  border: 1px solid var(--hair); border-radius: 6px;
  background:
    radial-gradient(60% 90% at 50% 0%, rgba(96, 80, 190, 0.5) 0%, rgba(96, 80, 190, 0) 70%),
    var(--raise);
}
.contact::before {
  content: ""; display: block; width: 22px; height: 22px; margin: 0 auto 26px;
  background: var(--gold); -webkit-mask: var(--sparkle) center / contain no-repeat; mask: var(--sparkle) center / contain no-repeat;
}
.contact h2 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); font-weight: 500; color: var(--gold-soft); }
.contact p { margin: 18px auto 0; max-width: 30rem; color: #ddd3ee; font-weight: 300; font-size: 1.125rem; }
.contact .actions { justify-content: center; }

/* ---------- footer ---------- */
footer { margin-top: var(--section); border-top: 1px solid var(--hair-dim); }
footer .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
  padding-block: 32px calc(32px + env(safe-area-inset-bottom, 0px));
  font-size: 0.875rem; color: var(--muted);
}
footer nav { display: flex; flex-wrap: wrap; gap: 8px 28px; }
footer a { text-decoration: none; transition: color 0.2s; }
footer a:hover { color: var(--gold-soft); }
footer .brand { font-size: 1rem; }
footer .brand img { width: 30px; height: 30px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding-block: 8px 48px; text-align: center; }
  .hero .lede { margin-inline: auto; }
  .hero .actions { justify-content: center; }
  .viewer { order: -1; height: 48svh; min-height: 300px; margin-bottom: 12px; }
  .lotus { grid-template-columns: 1fr; }
  .lotus .mark { max-width: 280px; margin-inline: auto; }
  .steps { grid-template-columns: 1fr; }
  .top nav a.optional { display: none; }
}
@media (max-width: 640px) {
  .facts { grid-template-columns: 1fr; }
  .facts > div { padding: 20px 0; border-left: 0; border-top: 1px solid var(--hair-dim); }
  .facts > div:first-child { border-top: 0; }
  .way-head { flex-wrap: wrap; gap: 4px 16px; }
  .way-head p { order: 3; flex-basis: 100%; text-align: left; }
  .items { grid-template-columns: 1fr; gap: 48px; }
  .item.wide { flex-direction: column; align-items: stretch; }
  .item.wide img { width: 100%; }
  .item.wide .body { padding: 34px 2px 0; }
  .specs { grid-template-columns: 1fr; }
  .top nav a.hide-sm { display: none; }
  .brand { font-size: 1rem; letter-spacing: 0.1em; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .viewer::before { animation: none; }
  .btn, .item img, footer a, .top nav a { transition: none; }
}