/* Business and information pages use TOP's colour and reading hierarchy.
   Shared section roles and spacing are applied after the page styles. */
body.interior-theme {
  background: var(--surface-section-paper);
  color: var(--site-ink);
}

.interior-theme .interior-page {
  --services-ink: var(--site-ink);
  --services-muted: var(--site-copy);
  --services-accent: var(--site-label);
  --project-ink: var(--site-ink);
  --project-muted: var(--site-label);
  --philosophy-copy-ink: var(--site-ink);
  --philosophy-copy-muted: var(--site-copy);
  --philosophy-copy-accent: var(--site-label);
  background: var(--surface-section-paper);
  color: var(--site-ink);
  font-family: var(--font-latin), var(--font-japanese);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-leading);
  letter-spacing: var(--type-body-tracking);
  line-break: strict;
}

.interior-theme .interior-page .wrap {
  width: min(1200px, calc(100% - var(--site-gutter) * 2));
}

/* Section grounds are assigned by the shared four-role surface contract. */
.interior-theme .interior-page > section {
  color: inherit;
}

.interior-theme .interior-page .subhero::before,
.interior-theme .interior-page .subhero::after {
  content: none;
}

.interior-theme .interior-page :is(
  .detail-panel, .related-card, .about-proof-card, .offer-card,
  .legal-contact, .news-empty
) {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .48), rgba(255, 255, 255, .12) 46%, rgba(255, 255, 255, .28)),
    rgba(233, 238, 236, .38);
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 12px 38px rgba(45, 40, 48, .035);
}

.interior-theme .interior-page :is(.works-gallery-media, .project-cover-stage) {
  background: #fff;
}

/* Page titles follow TOP's introduction; section titles follow its main sections. */
.interior-theme .interior-page :is(.subhero h1, .project-title) {
  --subhero-title-size: var(--type-page-title-size);
  max-inline-size: min(100%, 1100px);
  font-size: var(--subhero-title-size);
  font-weight: var(--type-heading-weight);
  line-height: 1.2;
  letter-spacing: var(--type-heading-tracking);
  color: var(--site-ink);
  word-break: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

@supports (font-size: 1cqi) {
  .interior-theme .interior-page .subhero h1 {
    font-size: min(var(--subhero-title-size), calc(min(100cqi, 1100px) / var(--heading-unit-em, 1)));
  }
}

.interior-theme .interior-page :is(
  .services-section-heading, .services-strengths-heading,
  .philosophy-introduction-head, .philosophy-section-heading, .philosophy-story-heading,
  .about-vision, .about-mission, .about-harmony, .about-origin,
  .about-proof, .about-philosophy-teaser, .interior-cta
) h2,
.interior-theme .interior-page .detail-section > .wrap > h2,
.interior-theme .interior-page :is(
  .philosophy-declaration-title, .philosophy-core-question, .about-invitation-headline,
  .business-design-copy-title
) {
  font-size: var(--type-section-heading-size);
  font-weight: var(--type-heading-weight);
  line-height: 1.3;
  letter-spacing: var(--type-heading-tracking);
  color: var(--site-ink);
  text-wrap: balance;
}

/* Boxed headings and article chapters have their own, smaller role. */
.interior-theme .interior-page :is(
  .detail-panel, .related-card, .article-section, .legal-section, .legal-contact, .service-example
) h2,
.interior-theme .interior-page :is(.related-card, .offer-card) h3,
.interior-theme .interior-page .service-offering-heading h3 {
  font-size: var(--type-card-heading-size);
  font-weight: var(--type-heading-weight);
  line-height: 1.5;
  letter-spacing: var(--type-heading-tracking);
  color: var(--site-ink);
  overflow-wrap: anywhere;
}

.interior-theme .interior-page :is(
  .business-design-chapter, .services-strength, .services-succession-grid,
  .philosophy-story-chapter, .about-harmony-steps, .engagement-flow-step,
  .about-proof-card, .detail-panel
) h3,
.interior-theme .interior-page :is(.project-section-heading h2, .project-section-caption),
.interior-theme .interior-page :is(.project-headline, .philosophy-harmony-heading),
.interior-theme .interior-page :is(.detail-questions dt, .faq-list summary) {
  font-size: var(--type-step-heading-size);
  font-weight: var(--type-subheading-weight);
  line-height: 1.5;
  letter-spacing: var(--type-heading-tracking);
  color: var(--site-ink);
}

.interior-theme .interior-page :is(.works-gallery-title, .project-next-name) {
  font-size: var(--type-work-title-size);
  font-weight: var(--type-heading-weight);
  line-height: 1.45;
  letter-spacing: var(--type-heading-tracking);
  color: var(--site-ink);
  overflow-wrap: anywhere;
}

.interior-theme .interior-page :is(.heading-unit, [data-reading-line] .reading-word) {
  max-inline-size: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Main paragraphs retain TOP's 1rem reading size. Smaller roles follow below. */
.interior-theme .interior-page :is(
  .subhero-lede, .subhero-summary, .about-proof-lede,
  .about-mission-layout > p, .about-invitation-note,
  .detail-panel > p:not(.eyebrow), .detail-list li,
  .article-body > p, .article-section p, .legal-section p, .legal-contact p,
  .company-facts dd, .related-card > p:not(.eyebrow),
  .business-design-chapter p, .services-section-heading > p:not(.eyebrow),
  .services-strengths-heading > p:not(.eyebrow), .services-strength p,
  .services-succession-grid p,
  .philosophy-introduction-context p, .philosophy-introduction-questions li,
  .philosophy-story-chapter > .reading-copy, .philosophy-story-chapter > .reading-copy > p,
  .philosophy-declaration-note, .philosophy-section-heading > p:not(.eyebrow),
  .interior-cta > .wrap > p:not(.eyebrow), .about-philosophy-teaser p:not(.eyebrow),
  .project-summary, .project-story-copy > p, .project-story-copy > ul > li,
  .engagement-flow-description, .engagement-flow-intro, .offer-summary,
  .offer-terms p:not(.eyebrow), .offer-long-term-note, .engagement-teaser p:not(.eyebrow)
) {
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-leading);
  letter-spacing: var(--type-body-tracking);
  color: var(--site-copy);
}

/* Supporting copy sits below Body; article and service overview paragraphs stay full size. */
.interior-theme .interior-page :is(
  .service-detail .detail-list li,
  .faq-list details p, .detail-questions dd,
  .related-card > p:not(.eyebrow),
  .project-service-description, .project-meta dd, .works-gallery-role
) {
  font-size: var(--type-body-small-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-small-leading);
  letter-spacing: var(--type-body-tracking);
  color: var(--site-copy);
}

/* Notes and metadata share one readable caption size, including on small screens. */
.interior-theme .interior-page :is(
  .detail-panel p.service-scope-note,
  .services-capabilities-note,
  .services-specialist-note, .offer-scope, .offer-long-term-note,
  .offer-proposal-note, .engagement-flow-step-note,
  .project-cover figcaption
) {
  font-size: var(--type-caption-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-caption-leading);
  letter-spacing: var(--type-body-tracking);
  color: var(--site-copy);
}

.interior-theme .interior-page :is(.service-example-inner > p, .philosophy-question-lead) {
  font-size: var(--type-step-heading-size);
  font-weight: var(--type-subheading-weight);
  line-height: 1.7;
  letter-spacing: var(--type-heading-tracking);
  color: var(--site-ink);
}

.interior-theme .interior-page .eyebrow {
  font-size: var(--type-eyebrow-size);
  font-weight: 700;
  line-height: var(--type-eyebrow-leading);
  letter-spacing: var(--type-eyebrow-tracking);
  color: var(--site-label);
  text-transform: uppercase;
}

.interior-theme .interior-page .eyebrow span {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
}

.interior-theme .interior-page .text-link {
  --interaction-ink: var(--site-link);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
  font-size: .88rem;
  font-weight: 650;
  line-height: 1.7;
  color: var(--site-link);
}

.interior-theme .interior-page .about-invitation a {
  --interaction-ink: var(--site-link);
  color: var(--site-link);
}

.interior-theme .interior-page .about-invitation a:hover {
  color: var(--site-link);
}

.interior-theme .interior-page .interior-cta .button {
  --button-bg: var(--site-ink);
  --button-ink: #fff;
  --button-border: var(--site-ink);
  --interaction-hover-bg: #423747;
  --interaction-hover-ink: #fff;
  color: #fff;
  background: var(--site-ink);
}

.interior-theme .interior-page .interior-cta .button:hover {
  background: #423747;
}

@media (max-width: 600px) {
  .interior-theme .interior-page .eyebrow { font-size: .68rem; }
}