/* Re:Life Lab — blog design, common layer (brand_blog_20261102, OWNER adopted 2026-11-02). Phase A.
   Loaded LAST and only while RELIFE_BLOG is on (inc/assets.php adds body.rl-blog). Every rule is under body.rl-blog,
   so switching the flag off (or the emergency stop) returns every page to the 0.9.10 look.
   1. tokens (added only; existing values are not changed)
   2. shared parts with the rl-bl- prefix (generated from the mock's blog.css; used by the Hub / TOP / article templates of phases C–F)
   3. the article common look: headings, conclusion, conversation, related-article cards with images.
      The article body HTML is not changed (Bridge adds the classes; this file only styles them). */

/* ── 1. tokens ── */
body.rl-blog{--navy-mid:#728AA4;--psand:#FBF6EC;--mark:#F1DFBA;--r-panel:12px;--read:720px;
  --t-13:13px;--t-14:14px;--t-15:15px;--t-16:16px;--t-18:18px;--t-21:21px;--t-24:24px;--t-30:30px;--t-44:44px;
  --sh:0 1px 2px rgba(22,47,75,.06),0 8px 22px rgba(22,47,75,.07)}

/* ── 2. shared parts (rl-bl-). Zero-specificity resets inside the parts only ── */
body.rl-blog :where([class^="rl-bl-"],[class*=" rl-bl-"]) :where(h2,h3,p,ol,ul,dl,dd,figure,blockquote){margin:0}
body.rl-blog :where([class^="rl-bl-"],[class*=" rl-bl-"]) :where(ol,ul){padding:0;list-style:none}
body.rl-blog :where([class^="rl-bl-"],[class*=" rl-bl-"]) :where(a){color:inherit;text-decoration:none}
body.rl-blog :where([class^="rl-bl-"],[class*=" rl-bl-"]) :where(img){display:block;max-width:100%;height:auto}
body.rl-blog :where([class^="rl-bl-"],[class*=" rl-bl-"]) a:focus-visible{outline:3px solid var(--navy);outline-offset:2px;border-radius:4px}
body.rl-blog .rl-bl-sec{padding:var(--sec) 0}
body.rl-blog .rl-bl-sec--paper{background:var(--paper)}
body.rl-blog .rl-bl-sec--sand{background:var(--sand)}
body.rl-blog .rl-bl-sec--psand{background:var(--psand)}
body.rl-blog .rl-bl-kicker{font-size:var(--t-13);font-weight:700;letter-spacing:.14em;color:var(--ochre-t);margin-bottom:6px}
body.rl-blog .rl-bl-h2{font-family:var(--f-serif);font-size:var(--t-24);line-height:1.4;color:var(--ink);word-break:auto-phrase}
body.rl-blog .rl-bl-h2::after{content:"";display:block;width:36px;height:3px;background:var(--ochre);margin-top:12px}
body.rl-blog .rl-bl-h2--plain::after{display:none}
@media (min-width:768px){body.rl-blog .rl-bl-h2{font-size:var(--t-30)}
}
body.rl-blog .rl-bl-lead{font-size:var(--t-16);margin-top:12px;max-width:40em;word-break:auto-phrase}
body.rl-blog .rl-bl-sec-head{display:grid;gap:4px;margin-bottom:22px}
@media (min-width:960px){body.rl-blog .rl-bl-sec-head--side{grid-template-columns:4fr 8fr;gap:48px;align-items:end}
}
body.rl-blog .rl-bl-tlink{font-weight:700;color:var(--navy);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--navy-mid)}
body.rl-blog .rl-bl-more-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;color:var(--navy);font-size:var(--t-15)}
body.rl-blog .rl-bl-more-link i{font-style:normal;color:var(--ochre-t)}
body.rl-blog .rl-bl-meta{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:var(--t-13);color:var(--sub);line-height:1.5}
body.rl-blog .rl-bl-cat{font-weight:700;color:var(--ochre-t);letter-spacing:.04em}
body.rl-blog .rl-bl-badge{display:inline-block;font-size:11px;font-weight:700;line-height:1;padding:4px 7px;border-radius:3px;background:var(--ochre-t);color:#fff}
body.rl-blog .rl-bl-badge--fig{background:var(--navy)}
body.rl-blog .rl-bl-thumb{position:relative;overflow:hidden;border-radius:8px;background:var(--sand);aspect-ratio:16/9}
body.rl-blog .rl-bl-thumb img{width:100%;height:100%;object-fit:cover}
body.rl-blog .rl-bl-story-lead{display:grid;gap:14px}
body.rl-blog .rl-bl-story-lead .rl-bl-thumb{border-radius:10px}
body.rl-blog .rl-bl-story-lead h3{font-family:var(--f-serif);font-size:var(--t-21);line-height:1.45;color:var(--ink);word-break:auto-phrase}
body.rl-blog .rl-bl-story-lead p.rl-bl-ex{font-size:var(--t-15);color:var(--text);line-height:1.75}
body.rl-blog .rl-bl-story-lead .rl-bl-go{font-size:var(--t-14);font-weight:700;color:var(--navy)}
@media (min-width:960px){body.rl-blog .rl-bl-story-lead{grid-template-columns:7fr 5fr;gap:36px;align-items:center}
body.rl-blog .rl-bl-story-lead h3{font-size:var(--t-30);line-height:1.4}
}
body.rl-blog .rl-bl-stories{display:grid;gap:18px}
body.rl-blog .rl-bl-story{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:start}
body.rl-blog .rl-bl-story>span{min-width:0}
@media (max-width:359px){body.rl-blog .rl-bl-story{grid-template-columns:96px 1fr}
}
body.rl-blog .rl-bl-story h3{font-size:var(--t-15);line-height:1.55;color:var(--ink);word-break:auto-phrase}
body.rl-blog .rl-bl-story p.rl-bl-ex{font-size:var(--t-13);color:var(--sub);line-height:1.6;margin-top:4px}
body.rl-blog .rl-bl-story .rl-bl-thumb{border-radius:6px}
@media (min-width:768px){body.rl-blog .rl-bl-stories--3{grid-template-columns:repeat(3,1fr);gap:28px}
body.rl-blog .rl-bl-stories--2{grid-template-columns:repeat(2,1fr);gap:28px}
body.rl-blog .rl-bl-stories--3 .rl-bl-story, body.rl-blog .rl-bl-stories--2 .rl-bl-story{grid-template-columns:1fr;gap:12px}
body.rl-blog .rl-bl-stories--3 .rl-bl-story h3, body.rl-blog .rl-bl-stories--2 .rl-bl-story h3{font-size:var(--t-18);line-height:1.5}
body.rl-blog .rl-bl-stories--3 .rl-bl-story p.rl-bl-ex, body.rl-blog .rl-bl-stories--2 .rl-bl-story p.rl-bl-ex{font-size:var(--t-14)}
}
body.rl-blog .rl-bl-rows li a{display:grid;grid-template-columns:72px 1fr 16px;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);min-height:56px}
body.rl-blog .rl-bl-rows .rl-bl-thumb{border-radius:4px}
body.rl-blog .rl-bl-rows b{display:block;font-size:var(--t-15);line-height:1.55;color:var(--ink)}
body.rl-blog .rl-bl-rows small{display:block;font-size:var(--t-13);line-height:1.55;color:var(--sub);margin-top:2px}
body.rl-blog .rl-bl-rows i{font-style:normal;color:var(--ochre-t)}
body.rl-blog .rl-bl-group{margin-top:26px}
body.rl-blog .rl-bl-group__h{display:flex;align-items:center;gap:8px;font-size:var(--t-14);font-weight:700;color:var(--ink);padding-bottom:8px;border-bottom:2px solid var(--ink)}
body.rl-blog .rl-bl-group__h svg{width:24px;height:24px;flex:none}
body.rl-blog .rl-bl-group__note{font-size:var(--t-13);color:var(--sub);margin-top:8px}
body.rl-blog .rl-bl-idx{display:grid;gap:0 48px}
@media (min-width:960px){body.rl-blog .rl-bl-idx{grid-template-columns:1fr 1fr}
}
body.rl-blog .rl-bl-voice{display:grid;gap:18px}
@media (min-width:960px){body.rl-blog .rl-bl-voice{grid-template-columns:5fr 7fr;gap:56px;align-items:center}
}
body.rl-blog .rl-bl-voice blockquote{margin:0;font-family:var(--f-serif);font-size:var(--t-21);line-height:1.7;color:var(--ink);padding-left:18px;border-left:3px solid var(--ochre);word-break:auto-phrase}
@media (min-width:768px){body.rl-blog .rl-bl-voice blockquote{font-size:var(--t-24)}
}
body.rl-blog .rl-bl-voice cite{display:block;font-style:normal;font-family:var(--f-sans);font-size:var(--t-13);color:var(--sub);margin-top:10px}
body.rl-blog .rl-bl-who{display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:start}
body.rl-blog .rl-bl-who__mark{width:52px;height:52px;border-radius:14px;background:var(--navy);display:grid;place-items:center;color:#fff;font-family:var(--f-num);font-weight:700;font-size:15px;box-shadow:inset 0 -4px 0 var(--ochre)}
body.rl-blog .rl-bl-who b{display:block;font-size:var(--t-16);color:var(--ink)}
body.rl-blog .rl-bl-who p{font-size:var(--t-14);line-height:1.8;margin-top:4px}
body.rl-blog .rl-bl-who ul{margin-top:8px}
body.rl-blog .rl-bl-who li{position:relative;padding-left:14px;font-size:var(--t-14);line-height:1.75}
body.rl-blog .rl-bl-who li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--ochre)}
body.rl-blog .rl-bl-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:10px 22px;border-radius:8px;background:var(--navy);color:#fff;font-weight:700;font-size:var(--t-16);line-height:1.4;box-shadow:0 2px 0 var(--navy-d)}
body.rl-blog .rl-bl-btn i{font-style:normal;color:var(--gold)}
body.rl-blog .rl-bl-btn small{display:block;font-size:12px;font-weight:400;color:var(--navy-line)}
body.rl-blog .rl-bl-btn--ghost{background:transparent;color:var(--navy);border:1.5px solid var(--navy);box-shadow:none}
body.rl-blog .rl-bl-ad{margin:22px 0;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
body.rl-blog .rl-bl-ad__k{font-size:12px;color:var(--sub);margin-bottom:8px}
body.rl-blog .rl-bl-ad .rl-bl-btn{width:100%;max-width:420px}
body.rl-blog .rl-bl-changes li a{display:grid;grid-template-columns:72px 1fr 16px;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
body.rl-blog .rl-bl-changes .rl-bl-tag{display:inline-block;font-size:12px;font-weight:700;line-height:1;padding:4px 7px;border-radius:3px;border:1px solid var(--ochre);color:var(--ochre-t);margin-right:6px}
body.rl-blog .rl-bl-changes b{font-size:var(--t-15);line-height:1.6;color:var(--ink)}
body.rl-blog .rl-bl-changes small{display:block;font-size:var(--t-13);color:var(--sub);margin-top:2px}
body.rl-blog .rl-bl-changes i{font-style:normal;color:var(--ochre-t)}
body.rl-blog .rl-bl-steps{margin-top:18px;display:grid}
@media (min-width:768px){body.rl-blog .rl-bl-steps{grid-template-columns:repeat(3,1fr);gap:32px}
}
body.rl-blog .rl-bl-steps li{display:grid;grid-template-columns:40px 1fr;gap:2px 12px;padding:10px 0;border-top:1px solid var(--line);align-content:start}
@media (min-width:768px){body.rl-blog .rl-bl-steps li{grid-template-columns:1fr;border-top:2px solid var(--ink);padding-top:12px}
}
body.rl-blog .rl-bl-steps .rl-bl-n{font-family:var(--f-serif);font-size:26px;line-height:1.1;color:var(--ochre-t);font-weight:700}
body.rl-blog .rl-bl-steps b{font-size:var(--t-16);line-height:1.55;color:var(--ink);display:block}
body.rl-blog .rl-bl-steps p{font-size:var(--t-15);line-height:1.75;margin-top:4px}
body.rl-blog .rl-bl-fields{display:grid;gap:14px}
@media (min-width:768px){body.rl-blog .rl-bl-fields{grid-template-columns:repeat(4,1fr);gap:24px}
}
body.rl-blog .rl-bl-field{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center}
@media (min-width:768px){body.rl-blog .rl-bl-field{grid-template-columns:1fr;gap:10px}
}
body.rl-blog .rl-bl-field b{font-family:var(--f-serif);font-size:var(--t-18);color:var(--ink);display:block}
body.rl-blog .rl-bl-field small{font-size:var(--t-13);color:var(--sub);line-height:1.6;display:block}


/* ── 3. the article common look (body HTML unchanged) ── */
/* headings: Mincho + a short ochre line above (R3 removed the line) */
body.rl-blog.rl-article .article .entry-content h2{font-size:24px;line-height:1.5;color:var(--ink);word-break:auto-phrase;margin:56px 0 18px}
body.rl-blog.rl-article .article .entry-content h2::before{display:block!important;content:"";width:36px;height:3px;background:var(--ochre);margin:0 0 14px;border:0;position:static}
@media (min-width:768px){body.rl-blog.rl-article .article .entry-content h2{font-size:26px}}
/* conclusion: a warm panel with the navy top line (one panel, not a card grid). The opening conclusion (rl-b--concl-lead, only on pages with the Quick Answer box) keeps its flat look: no two boxes saying the same thing */
body.rl-blog.rl-bridge .entry-content .rl-b--concl:not(.rl-b--concl-lead){background:var(--psand)!important;border-top:3px solid var(--navy)!important;border-bottom:0!important;border-radius:0 0 var(--r-panel) var(--r-panel);padding:16px 18px 14px!important}
/* conversation: soft bubbles without a frame line (the reader: sand, so the shape shows on the white body; the editor: navy tint) */
body.rl-blog.rl-bridge .entry-content .rl-b--talk>:not(:first-child):is(div){background:var(--sand)!important;border:0!important;border-radius:12px!important;padding:12px 14px!important}
body.rl-blog.rl-bridge .entry-content .rl-b--talk-ed>:not(:first-child):is(div){background:var(--navy-tint)!important}
body.rl-blog.rl-bridge .entry-content .rl-b--talk>img:first-child,body.rl-blog.rl-bridge .entry-content .rl-b--talk>:first-child img{border-radius:50%!important}
/* related articles written in the body: rows with the card image (the skill's "thumbnail card") */
body.rl-blog.rl-bridge .entry-content .rl-b--rel a:has(img){grid-template-columns:96px minmax(0,1fr) auto;gap:0 14px;padding:12px 0!important}
body.rl-blog.rl-bridge .entry-content .rl-b--rel a:has(img) img{display:block!important;width:96px!important;height:54px!important;max-width:none!important;object-fit:cover;border-radius:4px;margin:0!important;border:0!important;background:var(--sand)}
@media (max-width:359px){body.rl-blog.rl-bridge .entry-content .rl-b--rel a:has(img){grid-template-columns:80px minmax(0,1fr) auto}body.rl-blog.rl-bridge .entry-content .rl-b--rel a:has(img) img{width:80px!important;height:45px!important}}