/* Readable Japanese copy at every breakpoint. Load after the original styles. */
:root {
  --muted: #4e5d45;
}

body {
  font-size: 1.125rem;
  line-height: 1.9;
}

.hero-desc,
.story .story-copy p:not(.hand),
.story .brand-principle p:not(.hand),
.story .brand-values p:not(.hand),
.brand-copy > p:not(.hand),
.care-panel > p:last-child,
.characters-heading > p,
.character .character-bio,
.community > div > p:not(.hand),
.section-heading p,
.business-grid p,
.future-copy p,
.contact > p:not(.hand) {
  font-size: 1.125rem;
  line-height: 1.9;
  letter-spacing: .025em;
}

.hero-desc { max-width: 34em; }
.story-copy h3, .brand-values h3 { font-size: 1.375rem; }
.business-grid h3 { font-size: 1.5rem; }
.brand-copy h2 { font-size: clamp(1.5rem, 2.1vw, 1.875rem); }
.future-copy h2 { font-size: clamp(1.75rem, 2.3vw, 2.25rem); }
.brand-copy > p:not(.hand) { color: var(--cream); }
.brand-copy > p.launch-note { font-size: 1rem; color: var(--yellow); }
.characters-heading > p { max-width: 29em; }

.desktop-nav,
.mobile-menu a,
.button,
.hero .button,
.text-link,
.brand-copy .text-link,
.community .text-link,
.character .character-trait,
.character-facts dd,
.community h3 > span,
.business-en,
footer nav {
  font-size: 1rem;
  line-height: 1.7;
}

.button, .hero .button {
  min-height: 3.5rem;
  max-width: 100%;
  min-width: min(15rem, 100%);
}
.text-link, .brand-copy .text-link, .community .text-link {
  max-width: 100%;
  gap: 1rem;
}
.button svg, .text-link svg { flex-shrink: 0; }
.mobile-menu { width: min(23rem, 90%); }
.mobile-menu a { padding: 14px 0; }

.hero-footnote,
.care-label,
.character .character-code,
.character-facts dt,
.company-info small,
.footer-mark small,
.footer-bottom > small {
  font-size: .875rem;
  line-height: 1.7;
}
.company-mark small { font-size: .875rem; letter-spacing: .04em; }
.tag-note { font-size: 1rem; }
.care-tabs button span { font-size: 1rem; }
.character .character-trait { min-height: 3.4em; }
.character-facts { flex-wrap: wrap; gap: 1.5rem; }
.character .character-code { color: var(--muted); }

.company-info > div {
  font-size: 1.125rem;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.5rem 0;
}
.company-info dt { font-size: 1rem; }
.company-info dd { line-height: 1.9; min-width: 0; }
.company-info a { max-width: 100%; overflow-wrap: anywhere; }

footer nav {
  position: static;
  flex-wrap: wrap;
  margin-top: 2rem;
  gap: 1rem 1.75rem;
}
footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-bottom { flex-wrap: wrap; }
.footer-bottom > small:nth-child(2) { margin-left: 0; }
.back-top { margin-left: auto; }

@media (min-width: 1361px) {
  .site-header {
    display: grid;
    grid-template-columns: auto 184px minmax(0, 1fr) 44px;
    gap: clamp(24px, 2.5vw, 44px);
    height: 130px;
    padding: 0 4%;
  }
  .brand-tag { position: relative; left: auto; transform: rotate(-2deg); align-self: start; }
  .desktop-nav { margin: 0; justify-content: flex-end; flex-wrap: wrap; gap: .75rem 1.25rem; }
  .desktop-nav a { padding: 8px 0; }
  .menu-toggle { position: static; }
}

@media (max-width: 1000px) {
  .brand-inner { display: block; max-width: 780px; }
  .brand-copy { max-width: 39rem; margin: auto; }
  .care-card { max-width: 32rem; margin: 3rem auto 0; }
  .brand-copy .text-link { width: auto; }
  .story-layout { grid-template-columns: 1fr; }
  .story-character { width: 60%; max-width: 320px; margin: 1.5rem auto 0; }
  .characters-heading { display: block; }
  .characters-heading > p { margin-top: 1.25rem; }
  .character-lineup { grid-template-columns: 1fr; max-width: 720px; margin-inline: auto; gap: 3rem; }
  .character { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 2rem; }
  .character-art { height: 285px; }
  .character figcaption { padding: 0; }
  .character .character-trait { min-height: 0; }
  .future { display: flex; flex-direction: column; }
  .future-photo { min-height: 340px; aspect-ratio: 1.8; }
  .future-copy { padding: 3.5rem 8%; }
  .future-heart { display: none; }
  .section-heading { display: block; }
  .section-heading p { margin-top: 1.25rem; }
  .business-grid { grid-template-columns: 1fr; gap: 2rem; }
  .business-grid article { min-height: 0; padding-bottom: .5rem; }
  .business-grid p br { display: none; }
  .business-icon { float: right; width: 90px; height: 90px; margin: 0 0 1rem 1.5rem; }
  .company-layout { display: block; }
  .company-layout > div:first-child { position: relative; }
  .company-paw { position: absolute; right: 5%; top: 0; }
  .company-info { margin-top: 2.5rem; }
}

@media (max-width: 640px) {
  .story h2 { font-size: clamp(1.5rem, 6.5vw, 1.9375rem); }
  .brand-copy h2 { font-size: clamp(1.25rem, 6vw, 1.625rem); letter-spacing: .015em; }
  .future-copy h2 { font-size: clamp(1.5rem, 6vw, 2rem); letter-spacing: .02em; }
  .brand-copy .launch-note { text-wrap: balance; }
  .brand-principle h3 { font-size: clamp(1.25rem, 6vw, 1.5rem); }
  .story-copy h3, .brand-values h3, .brand-copy h2,
  .characters-heading h2, .future-copy h2, .contact h2 { text-wrap: balance; }
  .hero-desc { letter-spacing: .015em; }
  .hero .button, .contact .button { min-width: min(15rem, 100%); }
  .hero-footnote { letter-spacing: .015em; }
  .brand-principle { padding: 2rem 1.25rem; }
  .brand-values h3 { font-size: 1.25rem; }
  .brand-copy > p:not(.hand) { text-align: left; }
  .brand-copy .launch-note { display: block; }
  .brand-copy .text-link { width: auto; margin-top: 1.5rem; }
  .care-card { padding: 1.5rem 1.25rem 2rem; transform: none; }
  .care-panel h3 { font-size: 1.5rem; }
  .character-lineup { max-width: 380px; }
  .character { display: block; }
  .character figcaption { padding: 1.5rem 0 0; }
  .character .character-trait { min-height: 0; }
  .community h3 > span { letter-spacing: .15em; }
  .company-info > div { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .company-info a { gap: .75rem; }
  .contact h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
  .contact > p.hand { white-space: normal; }
  .tag-note { font-size: .875rem; }
  .hero-desc br,
  .story-copy p:not(.hand) br,
  .story .brand-principle p:not(.hand) br,
  .brand-values p br,
  .brand-copy > p:not(.hand) br,
  .care-panel > p:last-child br,
  .characters-heading > p br,
  .community > div > p:not(.hand) br,
  .section-heading p br,
  .future-copy p br,
  .contact > p:not(.hand) br { display: none; }
}

@media (max-width: 360px) {
  .company-mark small { font-size: .75rem; }
}