/* Additive, C2-token-consistent prose styling for WordPress post content.
   This is new (the prototype never designed a blog page) — everything else
   on /blog/ and post pages reuses .p-hero/.sec/.idx/.faq/.close as-is from
   bold.css + pages.css. Uses only --tokens already defined in bold.css. */
.post-body{max-width:38em;font-size:18px;line-height:1.95}
.post-body>*+*{margin-top:1.1em}
.post-body h2{font-family:var(--serif);font-weight:900;font-size:clamp(26px,3vw,40px);line-height:1.3;margin-top:1.6em}
.post-body h3{font-family:var(--serif);font-weight:900;font-size:clamp(21px,2.2vw,28px);line-height:1.4;margin-top:1.4em}
.post-body ul,.post-body ol{padding-left:1.4em}
.post-body li+li{margin-top:.4em}
/* --ver (#EF4423) on --paper only reaches ~3.2:1 at body text size, short of
   WCAG AA's 4.5:1 — use --ink (near-black, ample contrast) for inline links
   and reserve --ver for hover, matching how the rest of the site only uses
   --ver on large/bold display text. */
.post-body a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.post-body a:hover{color:var(--ver)}
.post-body strong{font-weight:700}
.post-body blockquote{border-left:3px solid var(--ver);padding-left:1.2em;color:var(--mute);font-style:normal}
.post-body figure{margin-top:1.4em}
.post-body figure img{width:100%;height:auto;border:1px solid var(--line)}
.post-body figcaption{font-size:14px;color:var(--mute);margin-top:8px}
.post-body hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.post-body>p:first-of-type:first-letter{all:unset}

.post-hero-img{background:var(--ink)}
.post-hero-img img{width:100%;height:min(70svh,640px);object-fit:cover}

/* blog index: reuse .idx.is-grid (thumbnails always on), no list/grid toggle needed */
.idx.is-grid .cl{display:block;margin-top:2px}
/* post titles are long sentences: smaller display size, balanced lines (2026-10-01) */
.p-hero h1.post-title{font-size:clamp(32px,4.2vw,76px);line-height:1.22;text-wrap:balance;word-break:normal}
/* images keep their own proportions and are never upscaled (2026-10-01, KUMA) */
#blog-idx .th{aspect-ratio:1200/630}                         /* featured images are 1200×630 cards with type on them — never crop */
.post-hero-img{padding:0 var(--g) clamp(32px,4vw,56px);text-align:center}
.post-hero-img img{display:inline-block;width:100%;max-width:800px;height:auto;object-fit:contain}   /* 1200px source ÷ 1.5 */
.post-body img{max-width:100%;height:auto}

/* FAQ carried over from WordPress (Rank Math / Elementor) — native details, readable without JS */
.post-faq{max-width:684px;margin:clamp(40px,6vw,72px) auto 0;padding:0 var(--g)}
.post-faq h2{font-weight:700;font-size:clamp(22px,2.4vw,28px);margin:0 0 16px}
.post-faq details{border-top:1px solid currentColor;padding:14px 0}
.post-faq details:last-child{border-bottom:1px solid currentColor}
.post-faq summary{cursor:pointer;font-weight:700;line-height:1.6;text-wrap:pretty}
.post-faq summary:focus-visible{outline:2px solid var(--ver);outline-offset:4px}
.post-faq details p{margin:10px 0 0;line-height:1.85;text-wrap:pretty}

/* ── EN/JP content pages (src/lib/i18n-structure.mjs) ─────────────────────────────────────────────
   The live translations arrive without their Elementor layout. These are the C2 components the flat
   content is regrouped into: section rhythm, eyebrow, button row, stat row, numbered steps, card and
   pair grids. Only tokens from bold.css. */
.post-body--page{max-width:1120px;margin-inline:auto}
.post-body--page>*+*{margin-top:0}
.i18n-sec>*+*{margin-top:1.1em}
.i18n-sec+.i18n-sec{margin-top:clamp(56px,7vw,104px);padding-top:clamp(32px,4vw,56px);border-top:1px solid var(--line)}
.i18n-sec>p,.i18n-sec>ul,.i18n-sec>ol:not(.i18n-steps),.i18n-sec>details,.i18n-sec>blockquote,.i18n-sec>h3,.i18n-sec>h4{max-width:42em}
.i18n-sec>h2{max-width:22em;margin-top:0;text-wrap:balance}
.i18n-sec--lead>p:first-child{font-size:clamp(19px,1.6vw,22px);line-height:1.8}
.post-body--page .i18n-eyebrow{color:var(--mute);margin:0 0 .9em;max-width:none}
.i18n-eyebrow+h2{margin-top:0}
.i18n-sec>img,.i18n-sec>figure{display:block;max-width:min(100%,880px);height:auto;margin-top:clamp(24px,3vw,40px)}
.i18n-sec>img{border:1px solid var(--line)}
.i18n-sec>table{width:100%;border-collapse:collapse;font-size:16px}
.i18n-sec>table th,.i18n-sec>table td{border-top:1px solid var(--line);padding:12px 16px 12px 0;text-align:left;vertical-align:top}
.i18n-sec>details{border-top:1px solid var(--line);padding:14px 0;margin-top:0}
.i18n-sec>details+details{margin-top:0}
.i18n-sec>details:last-of-type{border-bottom:1px solid var(--line)}
.i18n-sec>details summary{cursor:pointer;font-weight:700;line-height:1.6}
.i18n-sec>details p{margin:10px 0 0}

.i18n-actions{display:flex;flex-wrap:wrap;gap:12px;max-width:none!important;margin-top:1.6em}
.post-body a.cta{text-decoration:none;color:var(--ink)}
.post-body a.cta--ink{color:var(--paper)}
.post-body a.cta--ink:hover{background:var(--ver);color:var(--ink)}
.post-body a.cta--line:hover{background:var(--ink);color:var(--paper)}

.i18n-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:clamp(20px,3vw,56px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(24px,3vw,36px) 0;margin-top:clamp(28px,3.5vw,48px)}
.i18n-stats b{display:block;font-weight:200;font-size:clamp(40px,4.4vw,68px);line-height:1;letter-spacing:-.01em}
.i18n-stats span{display:block;margin-top:12px;font-size:14px;line-height:1.5;color:var(--mute)}

.i18n-steps{list-style:none;padding:0!important;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(28px,3vw,44px) clamp(20px,2.4vw,36px);margin-top:clamp(28px,3.5vw,48px)}
.i18n-steps li{border-top:2px solid var(--ink);padding-top:16px;margin:0!important}
.i18n-steps__n{display:block;font-weight:200;font-size:36px;line-height:1;color:var(--mute)}
.post-body .i18n-steps h3,.post-body .i18n-steps h4{margin:.7em 0 .35em;font-size:clamp(19px,1.6vw,22px);line-height:1.4}
.i18n-steps p{margin:0;font-size:15.5px;line-height:1.85}

.i18n-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1px;padding:1px;margin-top:clamp(28px,3.5vw,48px)}
.post-body a.i18n-card{display:flex;flex-direction:column;gap:12px;background:var(--paper);box-shadow:0 0 0 1px var(--line);padding:clamp(22px,2.4vw,34px);text-decoration:none;color:var(--ink);transition:background .3s var(--ease),color .3s var(--ease)}
.post-body a.i18n-card:hover{background:var(--ink);color:var(--paper)}
.post-body .i18n-card h3,.post-body .i18n-card h4{margin:0;font-size:clamp(19px,1.7vw,23px);line-height:1.4}
.i18n-card p{margin:0;font-size:15px;line-height:1.8;opacity:.82}
.i18n-card img{width:100%;height:auto}
.i18n-card__k{font-size:12px;font-weight:700;letter-spacing:.16em}
.i18n-card__more{margin-top:auto;padding-top:6px;font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px}

.i18n-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(28px,3vw,44px) clamp(20px,2.4vw,36px);margin-top:clamp(28px,3.5vw,48px)}
.i18n-grid>div{border-top:1px solid var(--line);padding-top:16px}
.post-body .i18n-grid h3,.post-body .i18n-grid h4{margin:0 0 .4em;font-size:clamp(19px,1.6vw,22px);line-height:1.4}
.i18n-grid p{margin:0;font-size:15.5px;line-height:1.85}
.post-body .i18n-steps__t{margin:.7em 0 .35em;font-family:var(--serif);font-weight:900;font-size:clamp(19px,1.6vw,22px);line-height:1.4}

/* generic repeated groups, Q&A lists, link rows, galleries */
.i18n-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:clamp(28px,3vw,44px) clamp(20px,2.4vw,36px);margin-top:clamp(28px,3.5vw,48px)}
.i18n-item{border-top:1px solid var(--line);padding-top:16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.i18n-item>*{margin:0!important}
.i18n-item__n{display:block;font-weight:200;font-size:36px;line-height:1.1;color:var(--mute)}
.post-body .i18n-item h3,.post-body .i18n-item h4{font-size:clamp(19px,1.6vw,22px);line-height:1.4}
.post-body .i18n-item__t{font-family:var(--serif);font-weight:900;font-size:clamp(18px,1.5vw,21px);line-height:1.45}
.i18n-item p{font-size:15.5px;line-height:1.85}
.post-body .i18n-item .i18n-eyebrow{font-size:12px;line-height:1.5;color:var(--mute)}
.i18n-item img{width:100%;height:auto;border:1px solid var(--line);order:-1}
.post-body a.i18n-item__more{margin-top:auto;padding-top:4px;font-size:14px;font-weight:700}
.i18n-item__links{display:flex;flex-wrap:wrap;gap:6px 16px}
.i18n-quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(20px,2.4vw,32px);margin-top:clamp(28px,3.5vw,48px)}
.post-body .i18n-quote{margin:0;border:1px solid var(--line);padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;gap:18px;min-width:0}
.post-body .i18n-quote blockquote{margin:0;padding:0;border:0;font-family:var(--serif);font-size:clamp(16px,1.3vw,18px);line-height:1.8}
.post-body .i18n-quote blockquote::before{content:"“";display:block;font-size:44px;line-height:.6;height:22px;color:var(--mute)}
.i18n-quote blockquote p{margin:0;max-width:none}
.i18n-quote figcaption{margin-top:auto;display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:14px}
.i18n-quote__who{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--ink);display:grid;place-items:center;font-weight:700;font-size:14px}
.post-body .i18n-quote__role{margin:0;font-size:13px;line-height:1.5;color:var(--mute)}
@media (min-width:1100px){.i18n-quotes.i18n-n4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.i18n-qa{max-width:46em;margin-top:clamp(20px,2.4vw,32px)}
.i18n-qa>div{border-top:1px solid var(--line);padding:18px 0}
.i18n-qa>div:last-child{border-bottom:1px solid var(--line)}
.i18n-qa p{margin:0}
.i18n-qa p+p{margin-top:8px}
.i18n-qa .i18n-item__t{font-size:clamp(17px,1.4vw,19px)}
.i18n-links{display:flex;flex-wrap:wrap;gap:8px 20px;max-width:none!important;font-size:15.5px;font-weight:700}
.i18n-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:12px;margin-top:clamp(24px,3vw,40px)}
.i18n-gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;border:1px solid var(--line)}
.i18n-tags{display:flex;flex-wrap:wrap;gap:8px;max-width:none}
.i18n-tags>p,.i18n-tags>span{margin:0;padding:.5em .9em;border:1px solid var(--line);font-size:14px;line-height:1.4}
/* small screens: wide tables scroll inside themselves, long tokens wrap */
.i18n-sec>table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.i18n-sec>table th,.i18n-sec>table td{min-width:8em}
.post-body--page{overflow-wrap:break-word}
.i18n-tags p,.i18n-actions .cta,.i18n-links a{max-width:100%;overflow-wrap:anywhere}
.i18n-actions .cta{white-space:normal;line-height:1.3}
.i18n-sec>*{min-width:0}
.i18n-sec>figure img,.i18n-sec>p img{max-width:100%;height:auto}

/* item spans, label/value lines, icon rows, link lists, heading fragments */
p.i18n-tags{margin-top:1.1em}
.i18n-tags.label>span,.label.i18n-tags>span{border:0;padding:0}
.i18n-kv>span:first-child{font-weight:700;margin-right:.6em}
.i18n-hide{display:none}
.i18n-pair{display:flex;align-items:baseline;gap:.7em;max-width:42em}
.i18n-pair>*{margin:0!important}
.i18n-pair__k{flex:none;font-weight:200;font-size:1.5em;line-height:1;color:var(--mute)}
.i18n-linklist{max-width:none!important;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:2px 28px}
.i18n-linklist a{display:block;padding:10px 0;border-top:1px solid var(--line);text-decoration:none!important;font-size:15.5px;line-height:1.5}
.post-body--page :is(h2,h3,h4)>span{display:block}
.post-body--page :is(h2,h3,h4) em{font-style:normal}
.post-body--page a>span{display:block}
.post-body--page li>strong:first-child,.post-body--page li>p>strong:first-child{display:block}
.post-body--page:lang(ja) :is(h2,h3,h4,summary),.post-body--page:lang(ja) .i18n-item__t{word-break:auto-phrase;text-wrap:balance}
.i18n-items,.i18n-grid,.i18n-steps{justify-content:start}
/* a list whose items are whole links built from item spans (number, title + text, arrow): rows, not a bulleted link */
.post-body--page ul:has(>li>a>span){list-style:none;padding:0;max-width:none}
.post-body--page ul:has(>li>a>span)>li{margin:0}
.post-body--page li>a:has(>span){display:grid;grid-template-columns:3.2em minmax(0,1fr) auto;gap:8px 20px;align-items:start;padding:22px 0;border-top:1px solid var(--line);text-decoration:none}
.post-body--page li>a:has(>span)>span:first-child{font-weight:200;font-size:30px;line-height:1.1;color:var(--mute)}
.post-body--page li>a:has(>span)>span:nth-child(2){font-family:var(--serif);font-weight:900;font-size:clamp(18px,1.6vw,22px);line-height:1.45}
.post-body--page li>a:has(>span)>span:nth-child(2)>p{font-family:var(--sans);font-weight:400;font-size:15.5px;line-height:1.85;margin:.5em 0 0}
.post-body--page li>a:has(>span):hover{color:var(--ver)}

/* four of a kind sit 2 × 2 (never 3 + 1); a link row keeps its own separators */
@media (min-width:720px){.i18n-n4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.i18n-items.i18n-n4,.i18n-grid.i18n-n4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.i18n-linkrow{max-width:none!important;font-size:15.5px;line-height:2}
.i18n-linkrow a{white-space:nowrap}

/* leftover item spans inside any line (label + value in a list row): keep them apart */
.post-body--page :is(p,li,figcaption)>span+span{margin-left:.6em}
.i18n-tags>span+span,.post-body--page li>a>span+span{margin-left:0}