/*
 * ぞろ屋共通：PC/SP別改行と日本語の自然な折り返し。
 * このCSSの組み込みや自動監査FAIL=0だけでは公開合格にならない。
 * 全WARNの処置と、PC/SP必須幅での意味単位・行バランス目視を記録すること。
 */
br.pc-br,
br.sp-br {
  display: none !important;
}

@media screen and (max-width: 767px) {
  br.sp-br {
    display: inline !important;
  }
}

@media screen and (min-width: 768px) {
  br.pc-br {
    display: inline !important;
  }
}

:where(body) {
  line-break: strict;
  word-break: normal;
  overflow-wrap: normal;
}

:where(h1, h2, h3, h4, .lead, .hero-lead, .page-hero__lead, .fv-lead, .subcopy, .btn, .button, .wp-block-button__link, nav a, nav button, a.cta, .cta a, [class*="cta"] a, [role="button"], button, input[type="button"], input[type="submit"], input[type="reset"], summary) {
  line-break: strict;
  word-break: normal;
  overflow-wrap: normal;
  text-wrap: balance;
}

@supports (word-break: auto-phrase) {
  :where(body, h1, h2, h3, h4, .lead, .hero-lead, .page-hero__lead, .fv-lead, .subcopy, .btn, .button, .wp-block-button__link, nav a, nav button, a.cta, .cta a, [class*="cta"] a, [role="button"], button, input[type="button"], input[type="submit"], input[type="reset"], summary) {
    word-break: auto-phrase;
  }
}

/*
 * `pc-br` / `sp-br` only decide where a planned line ends. They do not keep
 * the words between two breaks together. Wrap only a short, indivisible
 * Japanese phrase (roughly 3-10 full-width characters) with `.jp-phrase`.
 * Never wrap a whole heading or sentence with this class; fix font size,
 * column width, letter spacing, or the layout breakpoint when it cannot fit.
 */
.jp-phrase {
  display: inline-block;
  white-space: nowrap;
}

/* Long URLs/codes may opt in. Do not apply this to headings, leads or CTAs. */
.allow-anywhere {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/*
 * Opt-in rhythm contract for a standard number -> title -> body card.
 * These are defaults, not a universal art-direction rule. If an editorial
 * layout intentionally departs from them, record the reason and inspect the
 * rendered result instead of reusing this contract silently.
 */
:where([data-z-rhythm="index-title-body"]) {
  --z-index-title-gap: clamp(16px, 1.5vw, 24px);
  --z-title-body-gap: clamp(10px, 1vw, 16px);
  display: grid;
  align-content: start;
}

:where([data-z-rhythm="index-title-body"]) > :where([data-z-role="index"]) {
  margin-block: 0 var(--z-index-title-gap);
}

:where([data-z-rhythm="index-title-body"]) > :where([data-z-role="title"]) {
  margin-block: 0 var(--z-title-body-gap);
}

:where([data-z-rhythm="index-title-body"]) > :where([data-z-role="body"]) {
  margin-block: 0;
}

:where(.post-body, .post_content, .entry-content, .wp-block-post-content) :where(p, li) {
  line-break: strict;
  word-break: normal;
  overflow-wrap: normal;
}

@supports (text-wrap: pretty) {
  :where(.post-body, .post_content, .entry-content, .wp-block-post-content) :where(p, li) {
    text-wrap: pretty;
  }
}

/* Use the available line width for site copy. Keep the separately art-directed
 * main visual, preformatted text and accessibility-only text unchanged. */
body :not(main, .hero, .hero *, pre, pre *, code, code *, .sr-only) {
  word-break: normal;
  text-wrap: wrap;
}
.jp-phrase:not(.hero *) {
  display: inline;
  white-space: normal;
}
br.pc-br:not(.hero *),
br.sp-br:not(.hero *) {
  display: none !important;
}
:where(h1, h2, h3, h4, p) br.semantic-br:not(.hero *, .event-time *) {
  display: none;
}
.event-preview-note br {
  display: none;
}
.events-home-layout .section-heading h2 .jp-phrase {
  margin-right: 0;
}
.profile-content .reading-content,
.profile-content .prose {
  width: 100%;
  max-width: none;
}

/* Give mobile member introductions a complete line, without reducing type. */
@media (max-width: 600px) {
  body .member-grid,
  body .member-grid.home-members,
  body .listing-section .member-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 38px;
  }
  body .member-grid .member-card .member-image {
    aspect-ratio: 1.5;
  }
  body .member-grid .member-card h3 {
    font-size: 19px;
  }
  body .member-grid .member-tag {
    font-size: 12px;
    min-height: 0;
  }
  body .member-grid .member-desc {
    font-size: 14px;
    line-height: 1.9;
  }
}

/* Standard reading size, including narrow-screen component overrides. */
:root {
  --io-body-size: 18px;
}
body.home,
body.subpage {
  font-size: var(--io-body-size);
  line-height: 1.85;
}
body main p:not(.eyebrow, .member-tag, .image-label, .hero-image-caption, .profile-company, .profile-section-label, .activity-label, .profile-signature, .blog-published, .gathering-meta, .gathering-when, .gathering-place, .event-time, .event-preview-note, .calendar-tip),
body main .lead,
body main .reading-content li,
body main .reading-content dd,
body main .prose li,
body main .prose dd,
body main .occurrence-details dd,
body .event-single-hero p.event-no-booking,
body .footer-main p {
  font-size: var(--io-body-size) !important;
  line-height: 1.85;
}
body .member-grid .member-card h3,
body .story-card h3 {
  font-size: 22px;
  line-height: 1.5;
}
body .faq-list summary,
body .filter-bar input,
body .filter-bar select,
body .interest-form input,
body .interest-form select,
body .interest-form textarea {
  font-size: var(--io-body-size);
}
body main .text-link,
body .interest-form label {
  font-size: 16px;
  line-height: 1.7;
}
body h2 .jp-phrase:not(.hero *) {
  display: inline-block;
  white-space: nowrap;
}
body main :is(h2, h3, .lead, summary) {
  text-wrap: pretty;
}
body .faq-layout > div > h2 br.pc-br {
  display: inline !important;
}
body main :is(h2, h3),
body main :is(h2, h3) a {
  text-wrap: balance;
}
body .result-bar {
  flex-wrap: wrap;
  gap: 12px;
}
body .reset-link {
  flex: none;
  white-space: nowrap;
}
body .event-attend p.event-no-booking {
  font-size: var(--io-body-size) !important;
}
body:is(.home, .subpage) main :is(h2, h3),
body:is(.home, .subpage) main :is(h2, h3) a,
body main .lead {
  text-wrap: balance;
}
body .member-card h3 a {
  display: block;
  position: relative;
  padding-inline-end: 1.25em;
}
body .member-card h3 .arrow {
  position: absolute;
  right: 0;
  top: .1em;
}
body .entry-number,
body .eyebrow,
body .faq-list summary > span {
  color: #59634e;
}
body .site-header {
  background: #fffdf8;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@supports (word-break: auto-phrase) {
  body .story-card h3,
  body .event-info h3 a {
    word-break: auto-phrase;
  }
}
@supports (word-break: auto-phrase) {
  body .member-card h3 a {
    word-break: auto-phrase;
  }
}