/* ============================================
   OHHO BANGKOK CAMPAIGN
   Bright campaign microsite in the style of a
   playful brand-campaign page: warm paper
   ground, oversized Satoshi Black type, sticker
   rotation, bold ink outlines with offset
   shadows, one loud orange.
   The campaign palette stays isolated in this
   token block; everything else inherits the
   landing tokens from styles.css.
   ============================================ */

.ohho {
  --oh-paper: #fff8f0;
  --oh-paper-deep: #ffefdd;
  --oh-ink: #191512;
  --oh-orange: var(--orange, #ff623e);
  --oh-yellow: #ffc93c;
  --oh-blue: #4a53fa;
  --oh-shadow: 6px 6px 0 var(--oh-ink);
  --oh-border: 2.5px solid var(--oh-ink);

  background: var(--oh-paper);
  color: var(--oh-ink);
  overflow-x: hidden;
}

.ohho .container { position: relative; z-index: 1; }

/* ---------- Nav on paper ---------- */
.ohho-nav { background: transparent; }
.ohho-nav.scrolled {
  background: rgba(255, 248, 240, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(25, 21, 18, 0.08);
}

/* ---------- Shared type ---------- */
.ohho-kicker {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oh-paper);
  background: var(--oh-ink);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  transform: rotate(-1.5deg);
  margin-bottom: 22px;
}

.ohho-h2 {
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}

.ohho-body {
  font-size: 1.12rem;
  line-height: 1.65;
  color: rgba(25, 21, 18, 0.78);
  max-width: 640px;
}

.ohho-centered { margin-left: auto; margin-right: auto; text-align: center; }

.ohho-section { padding: 110px 0; text-align: center; }
.ohho-section .ohho-body { margin-left: auto; margin-right: auto; }
.ohho-section-tint { background: var(--oh-paper-deep); }
.ohho-narrow { max-width: 780px; }

/* ---------- Hero ---------- */
.ohho-hero {
  padding: 112px 0 40px;
  text-align: center;
  position: relative;
}

.ohho-chip {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--oh-yellow);
  border: var(--oh-border);
  border-radius: var(--radius-full);
  padding: 8px 18px;
  transform: rotate(-2deg);
  box-shadow: 4px 4px 0 var(--oh-ink);
  margin-bottom: 34px;
}

/* The wordmark is the campaign logo (Thai sticker lockup); the h1 keeps a
   visually hidden text fallback for screen readers and search. */
.ohho-wordmark {
  margin: 4px auto 26px;
  line-height: 0;
}

.ohho-logo {
  display: block;
  width: min(620px, 88vw);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 10px 24px rgba(255, 98, 62, 0.18));
}

.ohho-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ohho-tagline {
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  font-weight: 700;
  margin-bottom: 16px;
}

.ohho-lede {
  font-size: 1.12rem;
  line-height: 1.65;
  color: rgba(25, 21, 18, 0.78);
  max-width: 620px;
  margin: 0 auto 34px;
}

.ohho-note {
  font-size: 0.92rem;
  color: rgba(25, 21, 18, 0.55);
  margin-top: 26px;
}

/* Tilted photo row */
.ohho-photo-row {
  display: flex;
  justify-content: center;
  gap: 18px;
  padding: 48px 24px 26px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.ohho-photo {
  width: clamp(140px, 17vw, 220px);
  aspect-ratio: 4 / 5;
  background: #fff;
  border: var(--oh-border);
  border-radius: 14px;
  padding: 8px 8px 26px;
  box-shadow: var(--oh-shadow);
  transform: rotate(var(--r, 0deg));
  transition: transform 0.3s ease;
  flex: 0 0 auto;
}

.ohho-photo:hover { transform: rotate(0deg) translateY(-6px); }

.ohho-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* ---------- Ticker ---------- */
.ohho-ticker {
  background: var(--oh-orange);
  border-top: var(--oh-border);
  border-bottom: var(--oh-border);
  overflow: hidden;
  padding: 14px 0;
}

/* The track holds two identical halves and slides exactly one half per loop.
   Spacing lives on the items (margin), not a flex gap: a gap leaves no space
   after the last item, so -50% landed 28px short and the loop visibly jumped. */
.ohho-ticker-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: ohho-scroll 28s linear infinite;
  will-change: transform;
}

.ohho-ticker-track > * {
  margin-right: 28px;
}

.ohho-ticker-track span {
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #fff;
  white-space: nowrap;
  text-transform: uppercase;
}

.ohho-ticker-track .tick-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--oh-ink);
  flex: 0 0 auto;
}

@keyframes ohho-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Big statement ---------- */
.ohho-statement {
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
}

.ohho-subheading {
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 700;
  line-height: 1.35;
  margin: 0 auto 18px;
  max-width: 640px;
}

.ohho-statement em {
  font-style: normal;
  color: var(--oh-orange);
}

/* ---------- Interjection stickers ---------- */
.ohho-words {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 18px;
  margin: 44px auto;
  max-width: 900px;
}

.ohho-word {
  background: #fff;
  border: var(--oh-border);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--oh-ink);
  padding: 24px 28px 26px;
  transform: rotate(var(--r, 0deg));
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  gap: 6px;
  min-width: 130px;
}

.ohho-word:hover { transform: rotate(0deg) scale(1.05); }

.ohho-word-th {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.2;
}

/* Thai gloss first (the campaign speaks Thai), English underneath for the
   rest of the readers. */
.ohho-word-desc {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  margin-top: 6px;
}

.ohho-word-en {
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(25, 21, 18, 0.6);
}

/* โอ้โห sits on its own row above the other four, with clear air between
   the rows so the tilted cards never touch. */
.ohho-words-hero {
  margin: 44px auto 34px;
}

.ohho-words-hero + .ohho-words {
  margin-top: 0;
  gap: 24px;
}

.ohho-word.is-hero {
  background: var(--oh-orange);
  box-shadow: var(--oh-shadow);
  padding: 32px 44px 34px;
  gap: 8px;
}

.ohho-word.is-hero .ohho-word-th {
  font-size: 2.8rem;
  color: #fff;
}

.ohho-word.is-hero .ohho-word-desc {
  color: #fff;
  font-size: 1.05rem;
}

.ohho-word.is-hero .ohho-word-en {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 700;
}

/* ---------- Moment cards ---------- */
.ohho-moments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
  text-align: left;
}

.ohho-moment {
  background: #fff;
  border: var(--oh-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--oh-shadow);
  padding: 16px 16px 26px;
  transform: rotate(var(--r, 0deg));
  transition: transform 0.25s ease;
}

.ohho-moment:hover { transform: rotate(0deg) translateY(-6px); }

.ohho-moment-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 16px;
  border: 2px solid var(--oh-ink);
  display: block;
  margin-bottom: 18px;
}

/* Example reels are 9:16 clips; give them a portrait frame so they read as
   reels rather than cropped stills. Muted, looping, no controls. */
.ohho-moment-video {
  aspect-ratio: 4 / 5;
  background: var(--oh-ink);
}

/* The Thai โอ้โห lockup inline in the section heading. */
.ohho-h2-logo {
  display: inline-block;
  height: 1.2em;
  width: auto;
  vertical-align: -0.22em;
  margin: 0 0.08em;
}

.ohho-quote {
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.3;
  color: var(--oh-orange);
  margin: 0 8px 12px;
}

.ohho-moment h3 {
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 8px 8px;
}

.ohho-moment p:last-child {
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(25, 21, 18, 0.72);
  margin: 0 8px;
}

/* ---------- Steps (ink section) ---------- */
.ohho-section-ink {
  background: var(--oh-ink);
  color: var(--oh-paper);
}

.ohho-section-ink .ohho-kicker {
  background: var(--oh-yellow);
  color: var(--oh-ink);
  font-size: 1.1rem;
  padding: 10px 24px;
}

.ohho-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 48px;
  text-align: left;
  counter-reset: none;
}

@media (max-width: 1024px) {
  .ohho-steps { grid-template-columns: repeat(2, 1fr); }
}

/* Orange cards on the ink section: the step boxes carry the campaign colour,
   the section behind them stays black. */
.ohho-step {
  background: var(--oh-orange);
  color: var(--oh-paper);
  border: 2.5px solid var(--oh-ink);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  box-shadow: 6px 6px 0 rgba(255, 248, 240, 0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ohho-step:hover {
  transform: translateY(-6px);
  box-shadow: 8px 10px 0 rgba(255, 248, 240, 0.22);
}

.ohho-step-letter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 18px;
  border-radius: var(--radius-full);
  font-size: 1.15rem;
  font-weight: 900;
  background: var(--oh-ink);
  color: var(--oh-paper);
  margin-bottom: 18px;
}

.ohho-step-arrow { font-weight: 700; }

.ohho-step:nth-child(2) .ohho-step-letter { background: var(--oh-yellow); color: var(--oh-ink); transform: rotate(3deg); }
.ohho-step:nth-child(3) .ohho-step-letter { background: var(--oh-blue); transform: rotate(-2deg); }

.ohho-step h3 {
  font-size: 1.25rem;
  font-weight: 900;
  margin-bottom: 12px;
}

.ohho-step p {
  font-size: 0.98rem;
  line-height: 1.65;
  color: rgba(255, 248, 240, 0.92);
}

.ohho-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.ohho-tags span {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: var(--oh-paper);
  color: var(--oh-ink);
  border: 2px solid var(--oh-ink);
}

.ohho-tags-center { justify-content: center; }

/* ---------- Prizes ---------- */
.ohho-prizes {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 28px;
  margin-top: 48px;
  align-items: stretch;
  text-align: left;
}

/* First prize gets its own stage: the prize artwork over a cream band, the
   orange card tucked under it. Second and third sit in a row below. */
.ohho-prize-hero {
  position: relative;
  margin: 72px auto 0;
  padding: 0 24px 44px;
  background: var(--oh-paper-deep);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ohho-prize-img {
  width: min(440px, 76vw);
  height: auto;
  margin-top: -44px;
  filter: drop-shadow(0 14px 28px rgba(25, 21, 18, 0.14));
}

.ohho-prize-hero .ohho-prize {
  width: min(560px, 100%);
  margin-top: -36px;
}

.ohho-prizes-secondary {
  grid-template-columns: 1fr 1fr;
  max-width: 760px;
  margin: 40px auto 0;
}

.ohho-prize {
  background: #fff;
  border: var(--oh-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--oh-shadow);
  padding: 34px 30px;
  transform: rotate(var(--r, 0deg));
  transition: transform 0.25s ease;
}

.ohho-prize:hover { transform: rotate(0deg) translateY(-6px); }

.ohho-prize.is-first {
  background: var(--oh-orange);
  color: #fff;
}

.ohho-prize-rank {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: var(--oh-ink);
  color: var(--oh-paper);
  margin-bottom: 18px;
}

.ohho-prize.is-first .ohho-prize-rank { background: #fff; color: var(--oh-orange); }

.ohho-prize-value {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

.ohho-prize-note {
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(25, 21, 18, 0.65);
}

.ohho-prize.is-first .ohho-prize-note { color: rgba(255, 255, 255, 0.88); }

.ohho-fineprint {
  font-size: 0.9rem;
  color: rgba(25, 21, 18, 0.55);
  margin-top: 34px;
}

/* ---------- Judging & rules ---------- */
.ohho-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
  text-align: left;
}

.ohho-col {
  background: #fff;
  border: var(--oh-border);
  border-radius: var(--radius-lg);
  box-shadow: 4px 4px 0 var(--oh-ink);
  padding: 30px 26px;
}

.ohho-col h3 {
  font-size: 1.1rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--oh-ink);
}

.ohho-list dt {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 6px;
}

.ohho-list dd {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(25, 21, 18, 0.7);
  margin: 0 0 16px;
}

.ohho-bullets {
  list-style: none;
}

.ohho-bullets li {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(25, 21, 18, 0.7);
  padding-left: 22px;
  position: relative;
  margin-bottom: 12px;
}

.ohho-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--oh-orange);
}

/* ---------- Timeline ---------- */
.ohho-timeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin: 44px 0 30px;
}

.ohho-month {
  background: #fff;
  border: var(--oh-border);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--oh-ink);
  padding: 22px 34px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transform: rotate(var(--r, 0deg));
  font-size: 1.35rem;
  font-weight: 900;
}

.ohho-year {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--oh-orange);
  letter-spacing: 0.12em;
}

.ohho-timeline-rule {
  flex: 0 1 120px;
  height: 4px;
  border-radius: 4px;
  background: repeating-linear-gradient(90deg, var(--oh-ink) 0 12px, transparent 12px 22px);
}

/* ---------- Final CTA ---------- */
.ohho-final {
  background: var(--oh-orange);
  border-top: var(--oh-border);
  text-align: center;
  padding: 130px 0;
  color: #fff;
}

.ohho-final-title {
  font-size: clamp(3rem, 9vw, 6.5rem);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.ohho-final-logo {
  display: inline-block;
  height: 1.12em;
  width: auto;
  vertical-align: -0.16em;
  margin: 0 0.02em;
}

.ohho-final-sub {
  font-size: 1.2rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 40px;
}

.ohho-final .ohho-tags span {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}

/* ---------- Buttons ---------- */
.ohho-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.ohho-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 1.02rem;
  font-weight: 700;
  padding: 15px 30px;
  border-radius: var(--radius-full);
  text-decoration: none;
  border: var(--oh-border);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ohho-btn:hover { transform: translate(-2px, -2px); }
.ohho-btn:active { transform: translate(1px, 1px); }

.ohho-btn-primary {
  background: var(--oh-orange);
  color: #fff;
  box-shadow: 4px 4px 0 var(--oh-ink);
}
.ohho-btn-primary:hover { box-shadow: 6px 6px 0 var(--oh-ink); }

.ohho-btn-ghost {
  background: #fff;
  color: var(--oh-ink);
  box-shadow: 4px 4px 0 var(--oh-ink);
}
.ohho-btn-ghost:hover { box-shadow: 6px 6px 0 var(--oh-ink); }

.ohho-btn-invert {
  background: var(--oh-ink);
  color: #fff;
  border-color: var(--oh-ink);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.ohho-btn-outline {
  background: transparent;
  color: #fff;
  border-color: #fff;
}

/* ---------- Footer on paper ---------- */
.ohho-footer { border-top: var(--oh-border); }

/* ---------- Reveal animation ---------- */
.ohho .reveal {
  opacity: 0;
  transform: translateY(22px) rotate(var(--r, 0deg));
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: calc(var(--i, 0) * 90ms);
}

.ohho .reveal.vis {
  opacity: 1;
  transform: translateY(0) rotate(var(--r, 0deg));
}

@media (prefers-reduced-motion: reduce) {
  .ohho .reveal { opacity: 1; transform: none; transition: none; }
  .ohho-ticker-track { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .ohho-moments,
  .ohho-steps,
  .ohho-cols,
  .ohho-prizes { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }

  .ohho-photo-row { gap: 12px; padding: 36px 12px 20px; }
  .ohho-photo:nth-child(5) { display: none; }
}

@media (max-width: 640px) {
  .ohho-section { padding: 80px 0; }
  .ohho-hero { padding: 96px 0 20px; }
  .ohho-photo:nth-child(4) { display: none; }
  .ohho-word { padding: 16px 18px; min-width: 110px; }
  .ohho-word-th { font-size: 1.6rem; }
  .ohho-word.is-hero .ohho-word-th { font-size: 2.2rem; }
  .ohho-timeline { flex-direction: column; gap: 16px; }
  .ohho-timeline-rule { flex-basis: 40px; width: 4px; height: 40px; background: repeating-linear-gradient(180deg, var(--oh-ink) 0 12px, transparent 12px 22px); }
}

/* ---------- Language toggle ---------- */
.ohho-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: var(--oh-border);
  border-radius: var(--radius-full);
  background: #fff;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--oh-ink);
  cursor: pointer;
  line-height: 1;
}

.ohho-lang [data-lang] { opacity: 0.45; }
.ohho-lang [data-lang].active { opacity: 1; color: var(--oh-orange); }
.ohho-lang-sep { opacity: 0.35; }
.mobile-menu .ohho-lang { align-self: flex-start; margin: 8px 0; }

/* On phones the nav links collapse into the menu, so the toggle sits in the
   bar itself next to the menu button instead of hiding inside it. */
.ohho-lang-nav { display: none; margin-left: auto; margin-right: 12px; }
@media (max-width: 900px) {
  .ohho-lang-nav { display: inline-flex; }
}

/* ---------- Step 4 consent row (illustrative; the real tick lives in the app) ---------- */
.ohho-consent {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 2px solid rgba(255, 248, 240, 0.55);
  border-radius: 14px;
  background: rgba(21, 17, 14, 0.14);
}

.ohho-consent-box {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 2.5px solid var(--oh-paper);
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--oh-paper);
}

.ohho-consent-text {
  font-size: 1rem;
  font-weight: 700;
  color: var(--oh-paper);
  line-height: 1.35;
}

.ohho-consent-text a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Steps section: copy on ink, chips as links, closing line ---------- */
.ohho-section-ink .ohho-body { color: rgba(255, 248, 240, 0.8); }
.ohho-tags a {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: var(--oh-paper);
  color: var(--oh-ink);
  border: 2px solid var(--oh-ink);
  text-decoration: none;
}
.ohho-tags a:hover { background: var(--oh-yellow); }
.ohho-step-link { margin-top: 12px; }
.ohho-step-link a { color: var(--oh-paper); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ohho-flow-close {
  margin: 44px auto 18px;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 900;
  color: var(--oh-paper);
  text-align: center;
}

/* ---------- Step 2 chips: two labelled rows, handles never break mid-word ---------- */
.ohho-tags-label {
  margin-top: 14px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 248, 240, 0.7);
}
.ohho-tags-label + .ohho-tags { margin-top: 6px; }
.ohho-tags-tight span, .ohho-tags-tight a {
  font-size: 0.8rem;
  padding: 5px 10px;
  white-space: nowrap;
}
.ohho-handle {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}
.ohho-handle small {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* Thai glyphs: Satoshi has none, so the browser falls through to Prompt for
   Thai runs while Latin stays Satoshi. Heavier Thai weights map to 800. */
.ohho, .ohho button, .ohho input {
  font-family: 'Satoshi', 'Prompt', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* "Why OHHO": lead-in line above the word cards */
.ohho-examples { margin-top: 30px; margin-bottom: -14px; font-weight: 700; color: var(--oh-ink); }