/* =============================================================================
   TIMPAEMI · Thai and German homepages · 23 October 2026
   Loaded only on /th/ and /de/, after the flagship system (and the Thai layer).
   Owner, 16:17 ICT: "Can u even go further ? LEts go all the way. Lets try get the maximum". The English homepage's
   opening treatment in the visitor's own language: "new" in the first screen, the three profiles beside the enquiry,
   What's on with three tiles and four facts, and on phones a quiet bar once the opening has scrolled away
   (assets/js/home-bar-20261023.js). Every fact and offer here is stated on the English homepage.
   ============================================================================= */
.page-language .hero-now { display: inline-flex; align-items: center; gap: 10px; width: fit-content; min-height: 44px; margin-top: var(--s-32); padding: 6px 16px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); color: var(--white); font-size: 15px; line-height: 20px; font-weight: 600; text-decoration: none; }
.page-language .hero-now:hover, .page-language .hero-now:focus-visible { box-shadow: inset 0 0 0 1px var(--white); }
.page-language .hero-now-tag { padding: 6px 10px; border-radius: 999px; background: var(--white); color: var(--night); font-size: 13px; line-height: 16px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.page-language .hero-split__copy .hero-now + .label { margin-top: var(--s-32); }
.page-language .hero-follow { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--s-24) 0 0; }
.page-language .hero-follow a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); color: var(--white); font-size: 15px; line-height: 20px; font-weight: 600; text-decoration: none; transition: background-color 0.25s var(--ease), color 0.25s var(--ease); }
.page-language .hero-follow a:hover, .page-language .hero-follow a:focus-visible { background: var(--white); color: var(--night); }

.page-language .home-now .experiences-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-24); align-items: end; }
.page-language .home-now .experiences-head > * { grid-column: 1 / span 8; margin: 0; }
.page-language .home-now .experiences-head .label { grid-column: 1 / -1; }
.page-language .now-lead { max-width: 40rem; font-size: var(--lead); line-height: 1.6; color: #2b2925; }
.page-language .now-row { list-style: none; margin: var(--s-48) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-48) var(--gutter); }
.page-language .now-card a { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.page-language .now-card picture { display: block; overflow: hidden; overflow: clip; background: #121014; }
.page-language .now-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 1.2s var(--ease); }
.page-language .now-card a:hover img { transform: scale(1.025); }
.page-language .now-card .experience-caption { display: flex; flex-direction: column; gap: var(--s-12); margin-top: var(--s-24); padding-top: var(--s-24); box-shadow: inset 0 1px 0 rgba(11, 11, 12, 0.16); }
.page-language .now-kicker { font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #4a4744; }
.page-language .now-card .experience-title { font-size: var(--title); line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; }
.page-language .now-card .experience-line { max-width: 30rem; font-size: 16px; line-height: 25px; color: #4a4744; }
.page-language .now-card .experience-more { width: fit-content; margin-top: var(--s-4); padding-bottom: 2px; font-size: 15px; line-height: 22px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.4em; transition: text-decoration-color 0.35s var(--ease); }
.page-language .now-card a:hover .experience-more { text-decoration-color: var(--sub); }
.page-language .now-swipe { display: none; margin: var(--s-16) 0 0; font-size: 14px; line-height: 20px; font-weight: 600; color: #4a4744; }
/* 17:33 ICT: the coffee shop's free-drink coupons, named as plain text (14 of 1,000 claimed on 23 Oct) */
.page-language .now-claim { max-width: 44rem; margin: var(--s-32) 0 0; padding: 16px 20px; box-shadow: inset 0 0 0 1px var(--night); font-size: 16px; line-height: 26px; color: var(--night); }
.page-language .now-claim strong, .page-language .now-claim b { font-weight: 700; }
.page-lang-th .now-claim { line-height: 1.75; }
.page-lang-th .now-claim strong, .page-lang-th .now-claim b { font-weight: 600; }
.page-language .now-facts { list-style: none; margin: var(--s-72) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-24) var(--gutter); }
.page-language .now-facts li { display: flex; flex-direction: column; gap: var(--s-8); padding-top: var(--s-16); box-shadow: inset 0 1px 0 var(--night); }
.page-language .now-fact-n { font-family: var(--serif); font-size: var(--accent-m); line-height: 1; color: var(--night); }
.page-language .now-fact-t { max-width: 16rem; font-size: 15px; line-height: 22px; font-weight: 600; color: #4a4744; }

.page-language .home-bar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; padding: 8px; border-radius: 4px; background: rgba(11, 11, 12, 0.94); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.page-language .home-bar[hidden] { display: none; }
.page-language .home-bar a { display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 2px; color: var(--white); font-size: 15px; line-height: 20px; font-weight: 700; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
.page-language .home-bar a.bar-mail { background: var(--white); color: var(--night); box-shadow: none; }

/* Thai has no capitals; its letters take no tracking, its sans stops at 600 and its lines need room for vowels and tone marks */
.page-lang-th .hero-now-tag, .page-lang-th .now-kicker, .page-lang-th .now-card .experience-title { letter-spacing: 0; }
.page-lang-th .hero-now-tag, .page-lang-th .now-card .experience-title, .page-lang-th .home-bar a { font-weight: 600; }
.page-lang-th .now-card .experience-title { line-height: 1.4; }
.page-lang-th .now-lead, .page-lang-th .now-card .experience-line, .page-lang-th .now-fact-t { line-height: 1.75; }

@media (max-width: 56rem) {
  .page-language .home-now .experiences-head > * { grid-column: 1 / -1; }
  .page-language .now-row {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 88%; gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--margin)); padding-inline: var(--margin); scroll-padding-inline: var(--margin);
  }
  .page-language .now-row::-webkit-scrollbar { display: none; }
  .page-language .now-row > li { scroll-snap-align: start; }
  .page-language .now-swipe { display: block; }
  .page-language .now-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--s-48); }
}
@media (max-width: 40rem) {
  .page-language .hero-now { font-size: 14px; }
  .page-language .hero-follow { width: 100%; }
  .page-language .hero-follow a { flex: 1 1 0; justify-content: center; padding: 0 8px; }
}
@media (min-width: 40.0625rem) and (max-width: 56rem) { .page-language .now-row { grid-auto-columns: 46%; } }
@media (min-width: 40.0625rem) { .page-language .home-bar { display: none; } }
/* 24 Oct 2026 (owner, 04:15 ICT: "less clutter, more premium"): the three profiles are quiet text links, as on the English homepage */
.page-language .hero-follow { gap: 0 var(--s-24); }
.page-language .hero-follow a { padding: 0; background: none; box-shadow: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: rgba(255, 255, 255, 0.5); }
.page-language .hero-follow a:hover, .page-language .hero-follow a:focus-visible { background: none; color: var(--white); text-decoration-color: currentColor; }
@media (max-width: 40rem) {
  .page-language .hero-follow { width: auto; }
  .page-language .hero-follow a { flex: 0 0 auto; justify-content: flex-start; padding: 0; }
}