/* Complete messages flow together; portrait layouts leave a window for the artwork. */
:root { --gateway-copy-font: "Noto Sans Thai", "Leelawadee UI", system-ui, sans-serif; }
:root:lang(ja) { --gateway-copy-font: "Yu Gothic UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; }
:root:lang(ko) { --gateway-copy-font: "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; }
:root:lang(zh-Hans) { --gateway-copy-font: "Microsoft YaHei UI", "PingFang SC", sans-serif; }
:root:lang(zh-Hant) { --gateway-copy-font: "Microsoft JhengHei UI", "PingFang TC", sans-serif; }
.gateway-portal {
  --message-size: clamp(32px, 3.4cqw, 44px);
  --message-leading: 1.35;
  --copy-width: 560px;
  --intro-gap: clamp(28px, 4svh, 48px);
  --action-gap: clamp(28px, 4svh, 48px);
  --enter-width-reduction: 65px;
  --brand-mark-size: 56px;
  --brand-word-size: 32px;
  --brand-gap: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-content: start;
  align-items: start;
  width: min(calc(100% - 64px), var(--portal-max));
  min-height: 100svh;
  padding-block: max(28px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-bottom));
  row-gap: 0;
  font-family: var(--gateway-copy-font);
}
.gateway-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gateway-language { position: relative; flex: 0 0 auto; min-width: 96px; color: var(--text); background: var(--glass); border: 1px solid var(--line); border-radius: 999px; }
.gateway-language[hidden] { display: none; }
.gateway-language-display { min-height: 44px; padding: 8px 12px; display: flex; align-items: center; justify-content: center; gap: 8px; font: 600 16px/1.5 system-ui, sans-serif; }
.gateway-language-arrow { font-size: 18px; }
.gateway-language select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; font: 16px/1.5 system-ui, sans-serif; }
.gateway-language:focus-within { outline: 2px solid var(--cyan); outline-offset: 4px; }
.gateway-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 380px) {
  .gateway-language { min-width: 44px; }
  .gateway-language-display { padding: 8px; }
  .gateway-language-display [data-language-short], .gateway-language-arrow { display: none; }
}
/* Match product/assets/brand.css while keeping Gateway styles independent. */
.gateway-brand {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: auto;
  min-height: 44px;
  gap: var(--brand-gap);
  color: var(--text);
  text-decoration: none;
}
.gateway-brand img {
  flex: 0 0 var(--brand-mark-size);
  width: var(--brand-mark-size);
  height: var(--brand-mark-size);
  object-fit: contain;
}
.gateway-brand-name {
  font-family: Georgia, serif;
  font-size: var(--brand-word-size);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -1px;
  white-space: nowrap;
}
.gateway-brand:focus-visible { outline: 3px solid var(--cyan); outline-offset: 5px; }
@media (max-width: 650px) {
  .gateway-portal { --brand-mark-size: 44px; --brand-word-size: 24px; --brand-gap: 10px; }
}
.gateway-copy {
  position: relative;
  top: auto;
  width: min(100%, var(--copy-width));
  margin: var(--intro-gap) 0 0;
  padding: 0;
  animation: none;
}
.gateway-message-stage, .gateway-outro-stage, .gateway-cta-stack { display: grid; }
.gateway-message, .gateway-outro, .gateway-cta-label { grid-area: 1 / 1; min-width: 0; }
.gateway-message[aria-hidden="true"],
.gateway-outro[aria-hidden="true"],
.gateway-cta-label[aria-hidden="true"] { opacity: 0; visibility: hidden; }
.gateway-copy .gateway-message h1 {
  margin: 0;
  color: var(--text);
  font-family: var(--gateway-copy-font);
  font-size: var(--message-size);
  font-weight: 500;
  line-height: var(--message-leading);
  letter-spacing: 0;
  overflow-wrap: break-word;
}
.gateway-copy .gateway-subjects {
  margin: 16px 0 0;
  color: var(--cyan);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.6;
  text-wrap: balance;
}
.gateway-subjects span { white-space: nowrap; }
.gateway-actions {
  z-index: 1;
  width: min(100%, 440px, 36vw);
  margin-top: var(--action-gap);
  text-shadow: 0 2px 18px var(--surface);
}
.gateway-outro {
  margin: 0 0 20px;
  line-height: 1.6;
  color: var(--text);
  font-size: 24px;
  font-weight: 500;
  text-shadow: 0 2px 8px var(--surface), 0 0 20px var(--surface);
}
.gateway-enter {
  width: calc(100% - var(--enter-width-reduction));
  min-height: 68px;
  margin-top: 0;
  padding: 12px 18px;
  gap: 12px;
}
.gateway-cta-stack { flex: 1 1 auto; min-width: 0; text-align: center; }
.gateway-enter .gateway-cta-label {
  display: block;
  flex: initial;
  align-self: center;
  height: auto;
  border-radius: 0;
  color: inherit;
  background: none;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: 0;
}
:root:lang(th) .gateway-enter .gateway-cta-label { font-size: 20px; }
.gateway-enter > .gateway-cta-arrow { flex: 0 0 32px; height: 32px; font-size: 22px; }
@media (orientation: portrait) {
  .gateway-portal {
    --message-size: clamp(28px, 6.5cqw, 34px);
    --intro-gap: 28px;
    --action-gap: 28px;
    width: min(calc(100% - 48px), var(--portal-max));
    padding-block: max(20px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-bottom));
  }
  /* Keep the invitation below both faces, near the upper edge of the table. */
  .gateway-copy {
    min-height: max(0px, calc(57svh - max(20px, env(safe-area-inset-top)) - var(--brand-mark-size) - var(--intro-gap) - var(--action-gap)));
  }
  .gateway-copy .gateway-subjects { font-size: 20px; }
  .gateway-actions { width: min(100%, 440px); }
  .gateway-outro { font-size: 22px; }
  .gateway-art::after {
    background: linear-gradient(180deg, var(--glass), transparent 30%, transparent 62%, var(--surface));
  }
}
@media (orientation: landscape) and (max-height: 599px) {
  .gateway-portal {
    --message-size: clamp(22px, 3vw, 28px);
    --message-leading: 1.3;
    --copy-width: 34vw;
    --intro-gap: 20px;
    --action-gap: 24px;
    width: min(calc(100% - 40px), var(--portal-max));
    padding-block: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-bottom));
  }
  .gateway-actions { width: min(100%, var(--copy-width)); }
  .gateway-copy .gateway-subjects { font-size: 20px; }
  .gateway-outro { margin-bottom: 16px; font-size: 20px; line-height: 1.45; }
  .gateway-enter { min-height: 56px; padding: 10px 12px; gap: 8px; }
  .gateway-enter .gateway-cta-label { font-size: 16px; }
  :root:lang(th) .gateway-enter .gateway-cta-label { font-size: 18px; }
}
/* A short portrait viewport scrolls as one composition, keeping faces below the copy. */
@media (orientation: portrait) and (max-height: 700px) {
  .gateway-portal { --action-gap: 260px; min-height: 800px; }
  .gateway-copy { min-height: 0; }
  .gateway-art { position: absolute; inset: 200px 0 0; }
}