/* design-decisions §67, carried to JP: the first list's 4 and parts 2-9 of sites/hooponopono-en/static/en/assets/polish.css, cut by build.py; edit them there. */
/* 4. Footer language switch centred like the rest of the footer on phones. */
.foot-lang-row {
    align-items: center;
}
.foot-lang {
    justify-content: center;
}

/* 2. Links in text: one thin underline under the words, full colour on hover. */
:is(.article-body, .class-prose, .class-person-bio, .service-body, .entry-content) p a:not([class]) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .22em;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    transition: text-decoration-color .25s ease;
}
:is(.article-body, .class-prose, .class-person-bio, .service-body, .entry-content) p a:not([class]):hover {
    text-decoration-color: currentColor;
}

/* 3. Cards: the photo and the words, no paper box. The photo runs the card's full width at one ratio (16:9, the
   thumbnails carry titles, so no crop), corners barely softened; hover = slow zoom + underlined title. */
:is(.rh-card, .event-card, .t-card, .next-card):not(.hpp-x) {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    transform: none !important;
}
:is(.rh-card .r-thumb, .event-card .ec-thumb) {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 2px;
    background: var(--beige-deep, #efe7d8);
    margin-bottom: 14px !important;
}
:is(.rh-card .r-thumb, .event-card .ec-thumb) img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s ease;
}
:is(.rh-card, .event-card):hover :is(.r-thumb, .ec-thumb) img { transform: scale(1.03); }
:is(.r-title, .v-title, .ec-title):not(.hpp-x) {
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
}
:is(.rh-card, .event-card):hover :is(.r-title, .ec-title) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .22em;
}
:is(.r-teacher, .ec-meta):not(.hpp-x) {
    font-size: 12.5px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase;
    margin: 0 0 6px;
}
.r-teacher { margin: 8px 0 0; }
.rh-grid--sec { gap: var(--s7) var(--s5); }
@media (max-width: 768px) { .rh-grid--sec { gap: var(--s6) var(--s4); } }
/* the related list's frame (theme style.css: cream gradient, border, shadow) goes: a hairline above, then the rows
   (Cid 2026-10-10, measured on /en/reading/faq/ after G3) */
.article-body .hpp-rec {
    background: none !important;
    border: 0 !important;
    border-top: 1px solid var(--navy-hair, rgba(47, 93, 52, .22)) !important;
    box-shadow: none !important;
    padding: var(--s6, 32px) 0 0 !important;
}
/* in-article "related" list: rows on a hairline, not boxes */
.article-body .hpp-rec .hpp-rec-card {
    background: none;
    border: 0;
    border-top: 1px solid var(--navy-hair, rgba(47, 93, 52, .22));
    padding: var(--s4) 0;
}
.article-body .hpp-rec .hpp-rec-card:hover { background: none; }
.article-body .hpp-rec .hpp-rec-thumb img { border-radius: 2px; }
/* after the list (reclayout.py, §63): the next event as one line of text, then previous · list · next as text links */
.article-body .hpp-rec-next { margin: var(--s5) 0 0; font-size: var(--fs-s); letter-spacing: .06em; line-height: 1.7; }
.article-body .hpp-rec-next a { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--navy-hair, rgba(47, 93, 52, .22)); }
.article-body .hpp-rec-next a:hover { border-bottom-color: var(--navy); }
.rs-nav { justify-content: space-between; align-items: baseline; gap: var(--s3); margin: var(--s6) auto var(--s2); }
.rs-nav .rs-nav-btn, .rs-nav .rs-nav-list { flex: 0 1 auto; padding: 4px 0; border: 0; background: none; color: var(--navy); }
.rs-nav .rs-nav-btn:hover, .rs-nav .rs-nav-list:hover { background: none; color: var(--navy); text-decoration: underline; text-underline-offset: 4px; }
.rs-nav .rs-nav-prev { order: 1; } .rs-nav .rs-nav-list { order: 2; } .rs-nav .rs-nav-next { order: 3; }
.rs-nav--entry .rs-nav-list { order: 1; }

/* 4. Buttons: one family. 15px, slight tracking, 2px corners; filled = primary, outlined = secondary (fills on hover).
   The theme's hover that widened the letters is gone (the text moved under the pointer). */
:is(.class-profile-btn, .foot-news-form button, .apx-btn, .apb-btn, .hpp-btn, .wp-block-button__link):not(.hpp-x) {
    font-size: 15px !important;
    letter-spacing: .04em !important;
    border-radius: 2px !important;
    padding: var(--s3) var(--s5) !important;   /* 12 / 24: height to width 1:2 */
    line-height: 1.3 !important;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease !important;
}
.class-profile-btn,
.class-profile-btn:hover {
    border-color: var(--navy, #2f5d34) !important;
    letter-spacing: .04em !important;
}
.class-profile-btn:hover { background: var(--navy, #2f5d34) !important; color: #fff !important; }
/* filter chips and the footer language switch: small pills */
:is(.t-link, .foot-lang a):not(.hpp-x) {
    font-size: 14px !important;
    letter-spacing: .03em !important;
    border-radius: 999px !important;
    padding: var(--s2) var(--s4) !important;
}

/* 5. Class / lecture facts: the label is a quiet small-caps word, not a grey chip. */
:is(.single-class, .single-seminar, .sj-facts) .fact-label {
    background: none !important;
    padding: 0 !important;
    text-align: left !important;
    min-width: 8.5em !important;
    font-size: 12.5px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase;
    color: var(--navy-mute, #6b7d6c) !important;
}

/* 6. Instructor photos on class pages: one size, square, beside the text (they were 169-240px, each its own shape). */
.class-person-bio :is(figure.alignleft, img.alignleft, p > img:first-child) {
    float: left;
    width: 168px !important;
    max-width: 168px !important;
    margin: 4px 26px 12px 0 !important;
}
.class-person-bio :is(figure.alignleft img, img.alignleft, p > img:first-child) {
    width: 168px !important;
    height: 168px !important;
    object-fit: cover;
    border-radius: 2px;
}
@media (max-width: 600px) {
    .class-person-bio :is(figure.alignleft, img.alignleft, p > img:first-child),
    .class-person-bio :is(figure.alignleft img, img.alignleft, p > img:first-child) {
        width: 120px !important; max-width: 120px !important; height: auto;
    }
    .class-person-bio :is(figure.alignleft img, img.alignleft, p > img:first-child) { height: 120px !important; }
    /* a phone column is too narrow to wrap text beside a photo (4-5 words a line): the photo goes on its own line */
    .class-person-bio :is(figure.alignleft, img.alignleft, p > img:first-child) { float: none !important; display: block; margin: 0 0 var(--s4) !important; }
}

/* 7. Spacing (Kohei 2026-10-10 1558302280216744109 「paddingの取り方も…意図なく盛り付けられてるようにみえん」).
   One 8-point scale; every full-width band gets the same room above and below (96 / phone 64), every section title
   the same room under it (48 / 32), every "more" link or pager the same room over it (48 / 32). The theme had 23
   different values and a 16px strip of page colour between coloured bands (the block gap). Heroes keep their own. */
:root {
    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
    --band: var(--s9); --head-gap: var(--s7); --more-gap: var(--s7);
}
@media (max-width: 768px) {
    :root { --band: var(--s8); --head-gap: var(--s6); --more-gap: var(--s6); }
}
:is(.doors, .faq-feature, .tev-sec, .strawberry-jam-feature, .readings-sec, .videos-sec, .service-body, .class-intro,
    .class-domestic, .wwa-block, .class-other-info, .rh-sec, .apx):not(.hpp-x) {
    padding-top: var(--band) !important;
    padding-bottom: var(--band) !important;
    margin-top: 0 !important;
}
/* the article/page shell: the same band under the header and over the footer */
.wp-block-group.article:not(.hpp-x) { padding-top: var(--band) !important; padding-bottom: var(--band) !important; }
.wp-block-group.article > .service-body:first-of-type { padding-top: var(--s7) !important; }
:is(.sec-head, .apx-h):not(.hpp-x) { margin-bottom: var(--head-gap) !important; }
:is(.sj-feature-title, .wwa-block h2):not(.hpp-x) { margin-bottom: var(--s5) !important; }
:is(.tev-more, .readings-more, .videos-more, .rh-pages, .rh-dots, .sj-archive-link, .class-person-link):not(.hpp-x) {
    margin-top: var(--more-gap) !important;
}
/* boxes inside a band (instructor cards, the application steps): inside room = the gap between them */
:is(.class-person, .apx-card):not(.hpp-x) { padding: var(--s6) !important; margin-bottom: var(--s5) !important; }
@media (max-width: 768px) {
    :is(.class-person, .apx-card):not(.hpp-x) { padding: var(--s5) var(--s4) !important; margin-bottom: var(--s4) !important; }
}
.class-facts li:not(.hpp-x) { padding: var(--s4) 0 !important; }
/* The phone (Kohei 2026-10-10 1558467138472255551 /en/wwa/registration/, 1558468842223698012 /en/seminar/kr-seminar-jp/,
   1558469555301384335 /en/class/business-class-sg/ 「スマホ、まだ padding がでかい」; Cid 1558469798944313435 measured 390px:
   header→h1 82–100px, h1→first fact 70, between two bands 210 with the next title). A band takes 32 above and below
   (64 between two, the colour change marks the turn), the page's head 32 under the header (the theme's 100), the
   first band under a title 24, the facts list no margin over it; the KR booking and "What KR can do" bands, outside
   the scale (70 + a 16 strip), join it. */
:is(.service-booking, .kr-cross-nav):not(.hpp-x) { padding-top: var(--band) !important; padding-bottom: var(--band) !important; margin-top: 0 !important; }
@media (max-width: 768px) {
    :root { --band: var(--s6); }
    section.page-head:not(.hpp-x) { padding-top: var(--s6) !important; }
    .wp-block-group.article > .service-body:first-of-type { padding-top: var(--s5) !important; }
    .service-body > :first-child ul.class-facts:first-child, .service-body ul.class-facts:first-child { margin-top: 0 !important; }
}

/* 8. The instructor note at the foot of a post (design-decisions §68; Kohei 2026-10-10 1558304422243602522
   「講師のしょうかいのところ…美しくしといて」). bio.py marks it up: figure.hpp-bio > img + figcaption > name + text.
   One part on every post: a square photo beside the name and the bio, set off by one hairline (the theme's short
   centred rule goes). Phone: the photo above, smaller, centred with the name (Kohei 2026-10-10 1558308826183368817
   「画像左寄せは、意図的？」); the bio itself stays left-aligned, as long centred lines are hard to read. */
.article-body hr.wp-block-separator:has(+ figure.hpp-bio),
.entry-content hr.wp-block-separator:has(+ figure.hpp-bio) { display: none !important; }
figure.hpp-bio:not(.hpp-x) {
    display: grid !important; grid-template-columns: 136px 1fr; column-gap: var(--s6); align-items: start;
    max-width: 680px !important; width: auto !important; margin: var(--s8) auto var(--s7) !important;
    padding: var(--s6) 0 0 !important; border-top: 1px solid var(--hairline, rgba(31, 45, 74, .14));
    text-align: left !important;
}
figure.hpp-bio > a, figure.hpp-bio > img { grid-column: 1; grid-row: 1 / span 2; display: block; }
figure.hpp-bio img {
    width: 136px !important; height: 136px !important; max-width: none !important; object-fit: cover;
    border-radius: 2px; margin: 0 !important;
}
figure.hpp-bio > figcaption.wp-element-caption {
    grid-column: 2; margin: 0 !important; padding: 0 !important; text-align: left !important;
    font-size: 15px !important; line-height: 1.7 !important; letter-spacing: .005em !important;
    color: var(--ink-mute, rgba(31, 45, 74, .78)) !important; font-style: normal !important;
}
figure.hpp-bio figcaption em { font-style: normal; }
figure.hpp-bio .hpp-bio-name {
    display: block; margin: 0 0 var(--s2); font-family: var(--ff-head, 'Cormorant Garamond', serif);
    font-size: 22px; line-height: 1.3; letter-spacing: .01em; color: var(--navy, #1f2d4a); font-weight: 500;
}
figure.hpp-bio .hpp-bio-name::before {
    content: "About the instructor"; display: block; margin: 0 0 var(--s1); font-family: inherit;
    font-family: var(--ff-en, 'Spectral', serif); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--navy-mute, rgba(31, 45, 74, .6)); font-weight: 400;
}
figure.hpp-bio .hpp-bio-text { display: block; }
@media (max-width: 600px) {
    figure.hpp-bio:not(.hpp-x) { grid-template-columns: 1fr; margin: var(--s7) auto var(--s6) !important; }
    figure.hpp-bio > a, figure.hpp-bio > img { grid-row: auto; justify-self: center; margin-bottom: var(--s4) !important; }
    figure.hpp-bio img { width: 112px !important; height: 112px !important; }
    figure.hpp-bio > figcaption.wp-element-caption { grid-column: 1; }
    figure.hpp-bio .hpp-bio-name { text-align: center; margin-bottom: var(--s4); }   /* photo, label and name on one axis */
}
figure.hpp-bio figcaption a { color: inherit; text-decoration: underline 1px; text-underline-offset: .22em;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
figure.hpp-bio figcaption a:hover { text-decoration-color: currentColor; }

/* 9. The footer on the 8pt steps (Kohei 2026-10-10 1558344110924894219 「フッター周り…paddingが間延びして見える」).
   The theme's 160/80/60/50/40px between its five blocks made the footer ~1.5 screens of air; now the band above it,
   48px between the blocks (32 on phones), and the two nav columns side by side in the middle instead of spread to the edges. */
.foot:not(.hpp-x) { padding-top: var(--s8) !important; padding-bottom: var(--s7) !important; }
.foot-news:not(.hpp-x) { padding: 0 0 var(--s7) !important; }
.foot-news-desc:not(.hpp-x) { margin-bottom: var(--s5) !important; }
.foot-nav:not(.hpp-x) { grid-template-columns: repeat(2, max-content) !important; justify-content: center;
    padding: var(--s7) 0 !important; gap: var(--s5) var(--s9) !important; }
.foot-col:not(.hpp-x) { gap: var(--s3) !important; }
:is(.foot-sns, .foot-lang-row):not(.hpp-x) { padding: var(--s6) 0 !important; }
.foot-sns:not(.hpp-x) { gap: var(--s5) !important; }
.foot-legal:not(.hpp-x) { padding-top: var(--s6) !important; }
.foot-copy:not(.hpp-x) { padding-top: var(--s4) !important; }
@media (max-width: 768px) {
    .foot-inner:not(.hpp-x) { padding: 0 16px !important; }
    .foot-nav:not(.hpp-x) { grid-template-columns: 1fr 1fr !important; padding: var(--s6) 0 !important;
        gap: var(--s4) var(--s5) !important; }
    :is(.foot-sns, .foot-lang-row):not(.hpp-x) { padding: var(--s5) 0 !important; }
    .foot-copy:not(.hpp-x) { padding-top: var(--s3) !important; }
}

/* Mobile header (design-decisions §30, Kohei 2026-10-10): the whole header slides up on scroll-down and returns on
   scroll-up (assets/header.js). It is sticky, so a transform keeps its place and the page does not jump. */
@media (max-width: 768px) {
  #fixedHeader { transition: transform .3s ease; will-change: transform; }
  #fixedHeader.fh--off { transform: translateY(-100%); }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  #fixedHeader { transition: none; }
}


/* JP on top of the cut (design-decisions §67/§68 JP). The rules above are EN's polish.css; these are what /jp/ says or
   sets differently. Part 8, the instructor note: the label in the live /jp/ word (Cid 1558858590964555777 Q2), the name
   and the bio in the theme's Japanese type and spacing, not EN's Cormorant / Spectral / .005em. */
figure.hpp-bio .hpp-bio-name {
    font-family: var(--ff-jp) !important; font-size: 18px; line-height: 1.6; letter-spacing: .08em;
}
figure.hpp-bio .hpp-bio-name::before {
    content: "講師紹介"; font-family: var(--ff-jp); font-size: 12px; letter-spacing: .2em; text-transform: none;
}
figure.hpp-bio > figcaption.wp-element-caption { letter-spacing: .04em !important; line-height: 1.9 !important; }

/* §80 the newsletter pop-up (news-pop.css is EN's): the JP type, as the footer's form */
.nlp-h { font-family: var(--ff-jp); font-weight: 450; letter-spacing: .08em; --fs-h: 26px; }   /* the theme's h2 size is --fs-h !important: 26px keeps the 11 chars on one line in the 440px box */
@media (max-width: 480px) { .nlp-h { --fs-h: 22px; } }
.nlp-eye { letter-spacing: .2em; }
.nlp-form input, .nlp-form button { font-family: var(--ff-jp); }