/* carried to /jp/ by bu2_jp.py from sites/hooponopono-en/static/en/assets/intro.css; edit it there. */
/* /en/about-introduction/ (intro.py; Kohei 2026-10-10「WP の臭いがする」, Cid ①–⑦). One background, the sections apart
   by room (polish.css tokens), no numbers, no bands. main.ai outranks the page's own inline <style>. */
main.ai { background: var(--white, #fff); }

/* ① the head is type, no photo (Kohei 1558419602461950055): title small on top, the lead as the headline, the four
   phrases under it in one spaced line. Height is what the words need. */
main.ai .ai-hero { margin: 0; padding: var(--band) var(--s4); text-align: center; }
main.ai .ai-hero h1 { font-family: var(--ff-jp) !important;
    font-size: var(--fs-s) !important; letter-spacing: .24em !important; text-transform: uppercase; line-height: 1.6;
    color: var(--navy, #2f5d34); margin: 0 0 var(--s2); }
main.ai .ai-hero .sub { font-size: var(--fs-s) !important; letter-spacing: .04em; line-height: 1.6 !important;
    color: var(--navy, #2f5d34); opacity: .7; margin: 0 auto var(--s8); max-width: 34em; }
/* the lead is the headline: the largest step (display), over the theme's p/h rules */
main.ai .ai-hero .lead { max-width: 22em; margin: 0 auto; padding: 0; font-family: var(--ff-jp) !important;
    font-weight: 500; font-size: var(--wp--preset--font-size--display, clamp(32px, 4.5vw, 54px)) !important;
    line-height: 1.3 !important; letter-spacing: .01em !important; color: var(--navy, #2f5d34); }
main.ai .ai-four { margin: var(--s8) auto 0; font-size: var(--fs-s) !important; letter-spacing: .2em !important; line-height: 2 !important;
    color: var(--navy, #2f5d34); }
main.ai .ai-four .ph { white-space: nowrap; }
main.ai .ai-four .dot { margin: 0 .6em; opacity: .45; }
@media (max-width: 768px) {
    main.ai .ai-hero .lead br { display: none; }
    main.ai .ai-four { letter-spacing: .1em !important; }
}

/* ② no numbers, no bands: each heading and its text on the one background */
/* one column for every section: the headings, the text, the doorway tiles, the teachers and the entrances share the
   left edge (Kohei 2026-10-13 12:44 ①: the text sat flush on the window edge, the tiles in a centred box) */
main.ai .ai-sec, main.ai .ai-lineage, main.ai .intro-section-inner { box-sizing: border-box; max-width: 1040px;
    margin-left: auto; margin-right: auto; padding-left: var(--s5) !important; padding-right: var(--s5) !important; }
main.ai .ai-sec { padding-top: var(--band); }
main.ai .ai-sec h2 { font-family: var(--ff-jp); font-weight: 500;
    font-size: var(--fs-h); letter-spacing: .02em; line-height: 1.25; margin: 0 0 var(--head-gap); }
main.ai .ai-sec .band-body { max-width: 680px; }
/* the theme's reset (* { margin: 0 }) runs the paragraphs together */
main.ai .ai-sec .band-body p { font-size: var(--fs-b); margin: 0 0 1.2em; }
main.ai .ai-sec .band-body p:last-child { margin-bottom: 0; }
main.ai .intro-section { background: none; padding: var(--head-gap) 0 0; }

/* ③ the four doorways: 2×2 tiles */
main.ai .brief-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); margin: 0; }
main.ai .brief-item, main.ai .brief-item:last-child { display: flex; flex-direction: column; gap: 0; border: 0;
    padding: var(--s6); background: var(--beige, #e7f1f7); border-radius: 2px; }
main.ai .brief-num { display: none; }
main.ai .brief-body { flex: 1; }
main.ai .brief-body h3 { font-family: var(--ff-jp); font-weight: 500; font-size: var(--fs-b);
    letter-spacing: .01em; line-height: 1.3; margin: 0 0 var(--s3); }
main.ai .brief-body p { line-height: 1.7; margin: 0; }
main.ai .brief-cta { align-self: flex-start; justify-self: auto; margin-top: var(--s5); }

/* ④ the three teachers: three columns of 3:4 portraits (as /en/teachers/) */
main.ai .ai-lineage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s7) var(--s6);
    padding-top: var(--head-gap); }
main.ai .lineage-essay { padding: 0 !important; margin: 0; max-width: none; }
main.ai .lineage-section, main.ai .lineage-section.flip { display: flex !important; flex-direction: column; gap: 0 !important;
    padding: 0; margin: 0; }
main.ai .lineage-portrait, main.ai .lineage-section.flip .lineage-portrait { order: 0; max-width: none; margin: 0; }
main.ai .lineage-portrait img { aspect-ratio: 3 / 4; border-radius: 2px; }
main.ai .lineage-portrait .caption { margin-top: var(--s3); text-align: left; font-size: var(--fs-s); letter-spacing: .04em; }
main.ai .lineage-text { order: 1; padding: 0; margin-top: var(--s4); }
main.ai .lineage-text .role { font-size: var(--fs-s); letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--s1); }
main.ai .lineage-text h2 { font-family: var(--ff-jp); font-weight: 500; font-size: var(--fs-h);
    line-height: 1.25; text-align: left; margin: 0 0 var(--s3); }
main.ai .lineage-text p { line-height: 1.7; margin: 0 0 var(--s4); }
main.ai .lineage-text .ai-more { margin: var(--s4) 0 0; text-align: left; }

/* ⑥ the first cleaning: one larger paragraph, left as text (its heading centred; intro.css_check). It is the one
   section whose text is a single paragraph, so the hook is that shape (p:only-child), not a class of its own */
main.ai .ai-sec .band-body p:only-child { font-family: var(--ff-jp);
    font-size: var(--fs-h); line-height: 1.55; color: var(--navy, #2f5d34); }
main.ai .band-divider { margin: var(--s7) 0 var(--s4); }
main.ai .band-invitation { margin: 0; }

/* ⑦ three entrances */
main.ai .intro-section:last-of-type { padding-bottom: var(--band); }
main.ai .next-cards { gap: var(--s6); margin-top: var(--s6); }
main.ai .next-card { background: none !important; border: 0 !important; box-shadow: none !important;
    border-top: 1px solid var(--navy-hair, rgba(47, 93, 52, .22)) !important; border-radius: 0; padding: var(--s5) 0 0;
    text-align: left; }
main.ai .next-card h4 { font-family: var(--ff-jp); font-weight: 500; font-size: var(--fs-b);
    letter-spacing: .01em; line-height: 1.2; margin: 0 0 var(--s3); }
main.ai .next-card { display: flex; flex-direction: column; }
main.ai .next-card p { line-height: 1.7; margin: 0 0 var(--s4); }
main.ai .next-card .door-cta { margin-top: auto; align-self: flex-start; }

@media (max-width: 768px) {
    main.ai .brief-list, main.ai .ai-lineage { grid-template-columns: 1fr; }
    main.ai .brief-item, main.ai .brief-item:last-child { padding: var(--s5); }
    main.ai .next-cards { grid-template-columns: 1fr; gap: var(--s6); }
}