/* Hallmark · genre: editorial · macrostructure: Marquee Hero · H1 marquee knobs: size=xxl, alignment=left-bias, underlay=rule-below
 * theme: custom · vibe: "gold-leaf, rose, warm cream, boutique luxury" · paper: oklch(97.5% 0.010 85) · accent: oklch(72% 0.130 84)
 * display: Trirong + Cormorant Garamond · body: IBM Plex Sans Thai · axes: light / roman-serif / chromatic-gold ~84°
 * nav: N9 edge-aligned minimal · footer: Ft1 mast-headed · enrichment: none · studied: no · context: user-provided
 * pre-emit critique: P5 H4 E5 S4 R5 V4
 */

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

/* ── shared type ── */
h1, h2, h3, h4 { font-family: var(--font-display); font-style: normal; font-weight: 500; line-height: 1.08; color: var(--color-ink); margin: 0; overflow-wrap: anywhere; }
p { margin: 0 0 var(--space-md); }
a { color: inherit; }
img { max-width: 100%; display: block; }

.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem); }
.eng { font-family: var(--font-latin); }
.tnum { font-variant-numeric: tabular-nums; }
.section { padding-block: var(--space-3xl); }

/* label / kicker (vertical stack only) */
.kicker {
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-xs);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-accent-deep);
  margin: 0 0 var(--space-md);
}
.lede { color: var(--color-ink-2); font-size: var(--text-lg); max-width: 52ch; }

/* ── buttons ── */
.btn {
  --_bg: var(--color-accent); --_fg: var(--color-accent-ink);
  display: inline-flex; align-items: center; gap: 0.5em; white-space: nowrap;
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm);
  padding: 0.75em 1.5em; border-radius: 999px; border: 1px solid transparent;
  background: var(--_bg); color: var(--_fg); cursor: pointer; text-decoration: none;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
  min-height: 44px;
}
.btn:hover { background: var(--color-accent-deep); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-rule); }
.btn--ghost:hover { background: var(--color-paper-2); border-color: var(--color-accent); }
.btn--light { background: var(--color-paper); color: var(--color-ink); }
.btn--light:hover { background: var(--color-accent-soft); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ══════════════ NAV — N9 edge-aligned minimal ══════════════ */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: color-mix(in oklab, var(--color-paper) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-rule-2);
}
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-sm); }
.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--color-ink); }
.brand__mark { width: 38px; height: 38px; flex: none; }
.brand__name { font-family: var(--font-latin); font-weight: 600; font-size: 1.35rem; letter-spacing: 0.02em; line-height: 1; }
.brand__name b { color: var(--color-accent-deep); font-weight: 600; }
.brand__sub { display: block; font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--color-muted); margin-top: 3px; }

/* ══════════════ HERO — Marquee ══════════════ */
.hero { padding-block: clamp(3rem, 9vw, 6rem) var(--space-xl); position: relative; }
.hero__in { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--space-xl); align-items: center; }
.hero__eyebrow { font-family: var(--font-body); font-weight: 500; letter-spacing: 0.06em; color: var(--color-ink-2); margin: 0 0 var(--space-md); }
.hero h1 { font-size: var(--text-display); font-weight: 500; letter-spacing: -0.01em; }
.hero h1 .gold { color: var(--color-accent-deep); }
.hero__tag { margin-top: var(--space-lg); font-size: var(--text-lg); color: var(--color-ink-2); max-width: 40ch; }
.hero__logo { justify-self: center; width: min(340px, 80%); aspect-ratio: 1; filter: drop-shadow(0 18px 40px oklch(56% 0.11 72 / 0.28)); }
.hero__logo svg, .hero__logo img { width: 100%; height: 100%; object-fit: contain; }
.rule-thick { border: none; border-top: 2px solid var(--color-accent); max-width: 1180px; margin: var(--space-xl) auto 0; opacity: 0.7; }

/* ══════════════ STAT STRIP — T4 ══════════════ */
.stats { background: var(--color-paper-2); border-block: 1px solid var(--color-rule-2); }
.stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { padding: var(--space-xl) var(--space-md); text-align: center; border-inline-start: 1px solid var(--color-rule-2); }
.stat:first-child { border-inline-start: none; }
.stat__n { font-family: var(--font-latin); font-weight: 600; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1; color: var(--color-ink); }
.stat__n .u { color: var(--color-accent-deep); }
.stat__l { display: block; margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }

/* ══════════════ CATEGORIES ══════════════ */
.cats__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; margin-bottom: var(--space-xl); }
.cats__head h2 { font-size: var(--text-4xl); }
.cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--color-rule-2); border: 1px solid var(--color-rule-2); border-radius: var(--radius-lg); overflow: hidden; }
.cat { background: var(--color-paper); padding: var(--space-xl) var(--space-lg); text-decoration: none; color: var(--color-ink); transition: background-color var(--dur-mid) var(--ease-out); min-height: 190px; display: flex; flex-direction: column; justify-content: space-between; }
.cat:hover { background: var(--color-accent-soft); }
.cat.cat--wide, .cat.cat--half, .cat.cat--third { grid-column: span 1; }
.cat__no { font-family: var(--font-latin); font-size: var(--text-lg); color: var(--color-accent-deep); }
.cat__name { display: block; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 500; margin-top: var(--space-sm); line-height: 1.15; }
.cat__desc { display: block; font-size: var(--text-sm); color: var(--color-muted); margin: var(--space-2xs) 0 0; }

/* ══════════════ BESTSELLERS — F6 product card grid ══════════════ */
.shop { background: var(--color-paper-2); }
.prod-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); margin-top: var(--space-xl); }
.card { background: var(--color-paper); border: 1px solid var(--color-rule-2); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: var(--color-ink); display: flex; flex-direction: column; transition: transform var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out); }
.card:hover { transform: translateY(-4px); border-color: var(--color-accent); box-shadow: 0 14px 34px oklch(56% 0.11 72 / 0.14); }
.card__img { aspect-ratio: 4 / 3; background:
    radial-gradient(circle at 50% 40%, var(--color-accent-soft), var(--color-paper-3));
  display: grid; place-items: center; position: relative; border-bottom: 1px solid var(--color-rule-2); }
.card__mono { font-family: var(--font-latin); font-weight: 600; font-size: 3rem; color: var(--color-accent-deep); opacity: 0.55; }
.card__tag { position: absolute; top: var(--space-sm); inset-inline-start: var(--space-sm); background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-xs); font-weight: 600; padding: 0.2em 0.7em; border-radius: 999px; }
.card__body { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-2xs); flex: 1; }
.card__cat { font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); }
.card__name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; line-height: 1.25; }
.card__foot { display: flex; align-items: baseline; justify-content: space-between; margin-top: auto; padding-top: var(--space-sm); }
.card__price { font-family: var(--font-latin); font-weight: 600; font-size: var(--text-xl); color: var(--color-ink); }
.card__price .cur { font-size: 0.7em; color: var(--color-muted); }
.card__go { font-size: var(--text-sm); font-weight: 600; color: var(--color-accent-deep); white-space: nowrap; }

/* ══════════════ WHY US — editorial list ══════════════ */
.why__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-2xl); align-items: start; }
.why h2 { font-size: var(--text-4xl); }
.why__lede { margin-top: var(--space-md); color: var(--color-ink-2); font-size: var(--text-lg); }
.why__list { list-style: none; margin: 0; padding: 0; }
.why__item { display: grid; grid-template-columns: auto 1fr; gap: var(--space-md); padding: var(--space-lg) 0; border-top: 1px solid var(--color-rule); }
.why__item:first-child { border-top: none; }
.why__n { font-family: var(--font-latin); font-size: var(--text-2xl); color: var(--color-accent-deep); line-height: 1; }
.why__t { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; margin: 0 0 var(--space-2xs); }
.why__d { color: var(--color-ink-2); font-size: var(--text-base); margin: 0; }

/* ══════════════ PROOF (real review aggregate) ══════════════ */
.proof { background: var(--color-espresso); color: var(--color-ink-invert); text-align: center; }
.proof .wrap { max-width: 900px; }
.proof__stars { color: var(--color-accent); font-size: var(--text-2xl); letter-spacing: 0.15em; }
.proof__q { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 4.5vw, 3rem); line-height: 1.25; margin: var(--space-md) 0; color: var(--color-ink-invert); }
.proof__q b { color: var(--color-accent); font-weight: 500; }
.proof__src { font-size: var(--text-sm); color: oklch(78% 0.02 82); letter-spacing: 0.08em; }

/* ══════════════ RECRUIT ══════════════ */
.join__grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--space-2xl); align-items: center; background: var(--color-accent-soft); border-radius: var(--radius-lg); padding: clamp(1.5rem, 5vw, var(--space-2xl)); }
.join h2 { font-size: var(--text-3xl); }
.join p { color: var(--color-ink-2); margin-top: var(--space-sm); }
.join__roles { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-md); }
.chip { background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: 999px; padding: 0.35em 0.9em; font-size: var(--text-sm); font-weight: 500; }
.join__cta { display: flex; flex-direction: column; gap: var(--space-sm); }

/* ══════════════ CONTACT ══════════════ */
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
.contact h2 { font-size: var(--text-4xl); }
.contact__lede { color: var(--color-ink-2); font-size: var(--text-lg); margin-top: var(--space-md); max-width: 42ch; }
.channels { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; gap: 1px; background: var(--color-rule-2); border: 1px solid var(--color-rule-2); border-radius: var(--radius-md); overflow: hidden; }
.channel { background: var(--color-paper); display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); text-decoration: none; color: var(--color-ink); transition: background-color var(--dur-short) var(--ease-out); }
.channel:hover { background: var(--color-accent-soft); }
.channel__ic { width: 34px; height: 34px; flex: none; color: var(--color-accent-deep); }
.channel__k { display: block; font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); }
.channel__v { font-weight: 600; }
.map-card { background: var(--color-paper-2); border: 1px solid var(--color-rule-2); border-radius: var(--radius-md); padding: var(--space-xl); }
.map-card h3 { font-family: var(--font-display); font-size: var(--text-xl); margin-bottom: var(--space-sm); }
.map-card address { font-style: normal; color: var(--color-ink-2); line-height: 1.9; }

/* ══════════════ FOOTER — Ft1 mast-headed ══════════════ */
.foot { background: var(--color-espresso); color: var(--color-ink-invert); padding-block: var(--space-2xl); }
.foot__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-xl); flex-wrap: wrap; }
.foot__brand { display: flex; align-items: center; gap: 0.8rem; }
.foot__brand .brand__name { color: var(--color-ink-invert); }
.foot__brand .brand__name b { color: var(--color-accent); }
.foot__tag { font-family: var(--font-display); font-size: var(--text-xl); color: oklch(86% 0.03 82); max-width: 24ch; }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.foot__links a { color: oklch(84% 0.02 82); text-decoration: none; font-size: var(--text-sm); white-space: nowrap; }
.foot__links a:hover { color: var(--color-accent); }
.foot__rule { border: none; border-top: 1px solid var(--color-espresso-2); margin: var(--space-xl) 0 var(--space-md); }
.foot__meta { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); font-size: var(--text-xs); color: oklch(70% 0.02 82); }

/* ── reveal (one orchestrated entrance) ── */
.reveal { opacity: 0; transform: translateY(18px); animation: rise var(--dur-long) var(--ease-out) forwards; }
.reveal.d1 { animation-delay: 90ms; }
.reveal.d2 { animation-delay: 180ms; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; animation: none; } }

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width: 960px) {
  .hero__in { grid-template-columns: 1fr; }
  .hero__logo { grid-row: 1; width: min(220px, 60%); }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(-n+2) { border-block-end: 1px solid var(--color-rule-2); }
  .stat:nth-child(odd) { border-inline-start: none; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .cat.cat--wide, .cat.cat--half, .cat.cat--third { grid-column: span 1; }
  .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why__grid, .contact__grid, .join__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
}
@media (max-width: 560px) {
  .section { padding-block: var(--space-2xl); }
  .stats__grid { grid-template-columns: 1fr; }
  .stat { border-inline-start: none; border-block-end: 1px solid var(--color-rule-2); }
  .cat-grid { grid-template-columns: 1fr; }
  .prod-grid { grid-template-columns: 1fr; }
  .foot__top { flex-direction: column; }
}