html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
  body { margin: 0; background: #F4F3E8; color: #23291A; font-family: 'Noto Sans JP', system-ui, sans-serif; font-weight: 300; }
  * { box-sizing: border-box; }
  a { color: #6B7A4B; text-decoration: none; }
  a:hover { color: #B15B36; }
  ul { margin: 0; padding: 0; list-style: none; }
  #site-nav-bar { transition: transform .28s ease; will-change: transform; }
  #site-nav-bar.nav-hidden { transform: translateY(-100%); }
  @media (prefers-reduced-motion: reduce) { #site-nav-bar { transition: none; } }
  /* Headings marked "keep on one line" only actually do that once there's
     room — below this width they wrap normally, so short/narrow phone
     screens never get pushed into horizontal overflow. */
  .cta-heading { white-space: normal; }
  @media (min-width: 480px) { .cta-heading { white-space: nowrap; } }
  /* Safety net: nothing on the page should be able to force a horizontal
     scrollbar on the body itself, whatever causes it. */
  html, body { max-width: 100%; overflow-x: hidden; }
  /* Content photos (not hero backgrounds) sit in a two-column row on
     desktop. Once that row collapses to one column on phones, the same
     flex-basis makes the photo balloon to nearly full screen width —
     scale it back down so it still reads as a photo in a layout, not a
     full-bleed image. */
  @media (max-width: 780px) {
    .content-photo { max-width: 68%; margin-left: auto; margin-right: auto; }
  }
  /* Nav: hamburger + dropdown panel below a breakpoint; plain inline row
     above it. The panel markup is identical either way — only its layout
     changes, so nothing needs duplicating in the generator. */
  .hamburger-btn { display: none; }
  .nav-panel { display: contents; }
  @media (max-width: 680px) {
    .hamburger-btn {
      display: flex; flex-direction: column; justify-content: center; align-items: stretch;
      gap: 5px; width: 32px; height: 32px; flex: 0 0 auto;
      background: none; border: none; cursor: pointer; padding: 0; margin: 0;
    }
    .hamburger-btn span { display: block; height: 2px; background: #23291A; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
    .hamburger-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .hamburger-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .nav-panel {
      display: none;
      position: absolute; top: 100%; left: 0; right: 0;
      flex-direction: column; align-items: stretch; gap: 10px;
      background: #F4F3E8; border-bottom: 1px solid rgba(35,41,26,.14);
      padding: 14px clamp(12px,4vw,56px) 20px;
    }
    .nav-panel.open { display: flex; }
    .nav-panel .nav-links { flex-direction: column; align-items: stretch; overflow-x: visible; white-space: normal; gap: 2px; padding: 0; }
    .nav-panel .nav-links a { text-align: left; }
    .nav-panel .lang-pills { align-self: flex-start; }
  }