/* Locale layout is separate from the original Japanese presentation. */
.site-header,
.paper-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "brand navigation language";
  column-gap: clamp(12px, 2vw, 28px);
  direction: ltr;
}
.site-header > .wordmark,
.paper-header > .paper-logo { grid-area: brand; min-width: 0; max-width: 100%; }
.site-header > .navigation,
.paper-header > .paper-nav { grid-area: navigation; min-width: 0; }
.site-header > .menu-toggle,
.paper-header > .paper-menu { grid-area: menu; }
/* Before localization starts, retain the existing header and noscript fallback. */
.site-header:has(> .language-picker[hidden]),
.paper-header:has(> .language-picker[hidden]) { display: flex; }

.language-picker {
  grid-area: language;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 136px;
  min-width: 0;
  min-height: 44px;
  padding: 6px 8px;
  color: inherit;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 3px;
}
.language-picker > svg { flex: 0 0 16px; width: 16px; height: 16px; }
.language-picker select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 30px;
  border: 0;
  padding: 0;
  border-radius: 0;
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  color: inherit;
  background: transparent;
  text-overflow: ellipsis;
  cursor: pointer;
}
.language-picker:focus-within { outline: 2px solid currentColor; outline-offset: 4px; }
.language-picker select:focus { outline: none; }
.language-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.language-status {
  position: absolute;
  top: calc(100% + 8px);
  right: 16px;
  max-width: min(440px, calc(100vw - 32px));
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paper, #fff);
  color: inherit;
  box-shadow: 0 4px 18px #10233f12;
  font-size: 15px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.language-status:empty,
.language-picker[hidden],
.language-status[hidden] { display: none; }

/* Native select options retain their full names when the system picker opens. */
.language-picker option { font-size: 16px; }

/* Preserve diagram coordinates and the positive scrollLeft carousel model. */
.wordmark,
.paper-logo,
.hero-brand,
.release-name,
.signature,
.copyright,
.hero-content,
.paper-hero,
.hero-collage,
.diagram-frame,
.mode-illustration,
.everyone-art,
.hp-art,
.bc-art,
.scene-controls,
.hp-carousel-track,
.hp-carousel-controls {
  direction: ltr;
  unicode-bidi: isolate;
}
.button > span[aria-hidden],
.paper-button > span[aria-hidden],
.quiet-link > span[aria-hidden],
.hp-arrow {
  direction: ltr;
  unicode-bidi: isolate;
  flex-shrink: 0;
  font-family: Arial, "Noto Sans CJK JP", sans-serif;
}

/* Long translations wrap inside existing cards instead of widening them. */
html:not(:lang(ja)) [data-i18n],
.supported-languages li,
.supported-languages bdi { overflow-wrap: anywhere; word-break: normal; hyphens: auto; }
html:not(:lang(ja)) :is(.hero h1, .paper-hero h1, .section h2, .paper-section h2, .bc-card-heading h3, .hp-slide-body h3) {
  min-width: 0;
  letter-spacing: -.025em;
}
html:not(:lang(ja)) .hero h1 { font-size: clamp(42px, 4.4vw, 72px); line-height: 1.2; }
html:not(:lang(ja)) .paper-hero h1 { font-size: clamp(32px, 3.4vw, 56px); line-height: 1.35; }
html:not(:lang(ja)) :is(.hero-copy, .section-heading > *, .hp-heading > *, .about-copy, .release-copy, .product-spec, .profile) { min-width: 0; }
html:not(:lang(ja)) :is(.button, .paper-button, .quiet-link, .text-link) {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  column-gap: clamp(10px, 2vw, 24px);
}
html:not(:lang(ja)) :is(.profile > div, .product-spec > div) {
  grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr);
}
html:not(:lang(ja)) :is(.profile dt, .profile dd, .product-spec dt, .product-spec dd) { min-width: 0; overflow-wrap: anywhere; }
html:not(:lang(ja)) :is(.hp-status, .development-badge, .pocket-caption) { max-width: 100%; white-space: normal; line-height: 1.5; }
html:not(:lang(ja)) :is(.release-top, .paper-footer nav, .site-footer) { flex-wrap: wrap; }
html:not(:lang(ja)) .paper-footer nav > a { min-width: 0; max-width: 100%; }
html:not(:lang(ja)) .closing > p { white-space: normal; overflow-wrap: anywhere; }
html:not(:lang(ja)) .closing > div { flex-wrap: wrap; gap: 18px; }
html:not(:lang(ja)) .closing-contact { max-width: 100%; margin-inline-start: auto; }
.supported-languages { min-width: 0; max-width: 100%; }
.supported-languages li { padding-inline-end: 4px; }

/* Keep the feedback link to the right of the play button at every width. */
.release-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  direction: ltr;
}
.release-actions > .paper-button,
.release-actions > .quiet-link {
  min-width: 0;
  max-width: 100%;
  margin-top: 0;
  font-size: 15px;
  line-height: 1.65;
  gap: 10px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.release-actions > .paper-button { padding: 16px; }

/* Arabic copy reads RTL; artwork, brand names, and navigation mechanics stay LTR. */
html[dir="rtl"] :is(.navigation, .paper-nav, .language-picker select, .language-status, .hero-content [data-i18n], .paper-hero .hero-copy, .hp-slide) {
  direction: rtl;
  text-align: right;
}
html[dir="rtl"] :is(.hp-slide-body, .bc-card-heading, .bc-description, .mode-card > p, .mode-card > h3, .mode-card ul) { text-align: right; }
html[dir="rtl"] :is(.wordmark, .paper-logo, .hero-brand, .release-name, .signature, .profile dd:not([data-i18n])) { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .profile dd:not([data-i18n]) { text-align: right; }
html[dir="rtl"] .release-actions > a { direction: rtl; text-align: right; }
html[dir="rtl"] :is(.hero-visual, .mode-top, .hp-art, .bc-art, .mode-illustration) { direction: ltr; }
html[dir="rtl"] :is(.scene-copy, .story-visual > #scene-caption, .story-visual > .cutting-note) { direction: rtl; text-align: right; }
html[dir="rtl"] .scene-copy .diagram-bottom { text-align: right; }
html[dir="rtl"] :is(.hero-content [data-i18n], .paper-hero .hero-copy, .hp-slide, .profile, .product-spec) { letter-spacing: normal; }
html[dir="rtl"] .mode-card li::before { margin-right: 0; margin-left: 10px; }

@media (min-width: 761px) {
  /* Keep the same menu breakpoint; long desktop navigation can use two lines. */
  .site-header { height: auto; min-height: 100px; padding-block: 14px; }
  .paper-header { height: auto; min-height: 88px; padding-block: 12px; }
  .site-header > .navigation,
  .paper-header > .paper-nav {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px clamp(12px, 1.8vw, 30px);
    line-height: 1.45;
  }
  .navigation > a,
  .paper-nav > a { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  html:not(:lang(ja)) .navigation .nav-about { margin-left: 0; padding: 10px 12px; }
}

@media (min-width: 761px) and (max-width: 1100px) {
  html { scroll-padding-top: 150px; }
}

@media (max-width: 760px) {
  .site-header,
  .paper-header {
    grid-template-columns: minmax(0, 1fr) 120px 44px;
    grid-template-areas: "brand language menu";
    column-gap: 8px;
  }
  .language-picker { width: 120px; padding-inline: 6px; gap: 5px; }
  .site-header > .navigation,
  .paper-header > .paper-nav { grid-area: auto; }
  .paper-header .supplied-logo { max-width: 100%; }
  html:not(:lang(ja)) .hero h1 { font-size: clamp(23px, 6.6vw, 48px); line-height: 1.25; }
  html:not(:lang(ja)) .paper-hero h1 { font-size: clamp(30px, 6.6vw, 46px); }
  html:not(:lang(ja)) .hero-content { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  html:not(:lang(ja)) .paper-strip > span { min-width: 0; text-align: center; }
  .release-actions { gap: 10px; }
  .release-actions > .paper-button { padding: 12px 10px; }
  .release-actions > .quiet-link { gap: 7px; }
}